diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 00000000..0f441892
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,48 @@
+---
+name: 🐛 Bug Report
+about: Report a bug to help us improve FlutterJS
+title: '[BUG] '
+labels: bug
+assignees: ''
+
+---
+
+## 🐛 Bug Description
+A clear and concise description of what the bug is.
+
+## 👣 To Reproduce
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '...'
+3. Scroll down to '...'
+4. See error
+
+## 👍 Expected Behavior
+A clear and concise description of what you expected to happen.
+
+## 📸 Screenshots
+If applicable, add screenshots to help explain your problem.
+
+## 💻 Code Sample
+Please provide a minimal code sample that reproduces the issue.
+
+```dart
+// Your code here
+```
+
+## ⚠️ Error Message
+If there is an error message, please paste it here.
+
+```text
+// Paste error message here
+```
+
+## 🌍 Environment
+- **FlutterJS version**: [e.g. 0.0.1]
+- **OS**: [e.g. macOS, Windows, Linux]
+- **Node.js version**: [e.g. 18.0.0]
+- **Dart version**: [e.g. 3.0.0]
+- **Browser (if applicable)**: [e.g. Chrome 114]
+
+## 📋 Additional Context
+Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
new file mode 100644
index 00000000..14a14c67
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,30 @@
+---
+name: 🚀 Feature Request
+about: Suggest a new feature or improvement
+title: '[FEATURE] '
+labels: enhancement
+assignees: ''
+
+---
+
+## 🚀 Feature Description
+A clear and concise description of what the new feature is.
+
+## 💡 Use Case
+Describe the problem you are trying to solve or the scenario where this feature would be useful.
+
+## 🛠️ Proposed Solution
+Describe your proposed solution or implementation.
+
+## 🔄 Alternatives Considered
+Describe any alternative solutions or features you've considered.
+
+## 💻 Example Code
+If applicable, show how the feature would be used.
+
+```dart
+// Example usage
+```
+
+## 📋 Additional Context
+Add any other context or screenshots about the feature request here.
diff --git a/.github/ISSUE_TEMPLATE/widget_request.md b/.github/ISSUE_TEMPLATE/widget_request.md
new file mode 100644
index 00000000..4d017a2b
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/widget_request.md
@@ -0,0 +1,30 @@
+---
+name: 🧩 Widget Request
+about: Request support for a specific Flutter widget
+title: '[WIDGET] '
+labels: widget
+assignees: ''
+
+---
+
+## 🧩 Widget Name
+Name of the widget you want ported from Flutter.
+
+## 🔗 Reference URL
+Link to the official Flutter widget documentation (api.flutter.dev).
+
+## 💡 Use Case
+Describe where and how you would use this widget in your web app.
+
+## ⚖️ Priority
+- [ ] **Critical** (Blocks development)
+- [ ] **High** (Needed soon)
+- [ ] **Medium** (Nice to have)
+- [ ] **Low** (Can wait)
+
+## 🤝 Willing to Contribute?
+- [ ] Yes, I can help implement this!
+- [ ] No, just requesting it.
+
+## 📋 Additional Context
+Add any other context or screenshots covering the widget's visual appearance.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 00000000..22327a6b
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,35 @@
+## 📝 Description
+Please include a summary of the change and which issue is fixed.
+
+## 🔗 Related Issue
+Fixes # (issue)
+
+## 🏗️ Type of Change
+- [ ] 🐛 Bug fix (non-breaking change which fixes an issue)
+- [ ] ✨ New feature (non-breaking change which adds functionality)
+- [ ] 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] 📚 Documentation update
+- [ ] 🎨 Code style update (formatting, local variables)
+- [ ] 🔨 Refactoring (no functional changes, no api changes)
+- [ ] 🧪 Tests
+- [ ] ⚙️ CI/CD
+
+## 📋 Checklist
+- [ ] I have read the [CONTRIBUTING](CONTRIBUTING.md) doc
+- [ ] I have performed a self-review of my own code
+- [ ] I have commented my code, particularly in hard-to-understand areas
+- [ ] I have made corresponding changes to the documentation
+- [ ] My changes generate no new warnings
+- [ ] I have added tests that prove my fix is effective or that my feature works
+- [ ] New and existing unit tests pass locally with my changes
+- [ ] Any dependent changes have been merged and published in downstream modules
+
+## 📸 Screenshots (if applicable)
+| Before | After |
+| - | - |
+| <img src="" width="300" /> | <img src="" width="300" /> |
+
+## 🧪 How to Test
+1.
+2.
+3.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 00000000..a8e3cb0a
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "pub"
+    directory: "/"
+    schedule:
+      interval: "weekly"
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 00000000..d8430e3c
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,31 @@
+name: FlutterJS CI
+
+on:
+  push:
+    branches: [ "main", "master" ]
+  pull_request:
+    branches: [ "main", "master" ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Dart SDK
+        uses: dart-lang/setup-dart@v1
+        with:
+          sdk: dev
+
+      - name: Install dependencies
+        run: dart pub get
+
+      - name: Verify formatting
+        run: dart format --output=none --set-exit-if-changed .
+
+      - name: Analyze project source
+        run: dart analyze
+
+      - name: Run tests
+        run: dart test
diff --git a/QUICKSTART.md b/QUICKSTART.md
index 362e7b14..90f5699c 100644
--- a/QUICKSTART.md
+++ b/QUICKSTART.md
@@ -4,19 +4,20 @@ This guide shows you the **easiest ways** to run FlutterJS commands without typi
 
 ## 🎯 Quick Commands
 
-### Option 1: Using Wrapper Scripts (Easiest!)
+### Option 1: Global CLI (Recommended)
 
-**PowerShell (Recommended for Windows):**
-```powershell
-# From the flutterjs root directory
-.\flutterjs.ps1 run --to-js --serve
+First, activate the CLI globally:
+```bash
+dart pub global activate --source path .
+```
 
-# With verbose logging
-.\flutterjs.ps1 -v run --to-js --serve
+Then run commands from anywhere:
+```bash
+# Run dev server
+flutterjs run --to-js --serve
 
-# Other commands
-.\flutterjs.ps1 doctor
-.\flutterjs.ps1 build
+# Build for production
+flutterjs build
 ```
 
 **Command Prompt (cmd.exe):**
@@ -108,8 +109,8 @@ Most commands should be run from:
 
 ## 💡 Tips
 
-1. **Use `.\flutterjs.ps1`** for the quickest development workflow on Windows.
-2. **Access from anywhere**: Add `C:\Jay\_Plugin\flutterjs` to your PATH
+1. **Use Global CLI**: `flutterjs` is the fastest way to work.
+2. **Access from anywhere**: Provide full paths if running outside a project, or just cd in.
 3. **Check logs**: Use `-v` if something goes wrong.
 
 ---
@@ -118,10 +119,10 @@ Most commands should be run from:
 
 ```bash
 # Start development (simplest way)
-.\flutterjs.ps1 run --to-js --serve
+flutterjs run --to-js --serve
 
 # Build (production)
-.\flutterjs.ps1 build
+flutterjs build
 
 # Rebuild engine after changes
 cd packages/flutterjs_engine
diff --git a/README.md b/README.md
index 3c48e9e5..764da3d3 100644
--- a/README.md
+++ b/README.md
@@ -88,13 +88,12 @@ FlutterJS compiles your Flutter/Dart code to **semantic HTML + CSS + JavaScript*
 npm install -g flutterjs
 ```
 
-### Option 2: From Source
+### Option 2: From Source (Development)
 
 ```bash
 git clone https://github.com/flutterjsdev/flutterjs.git
-cd flutterjs/packages/flutterjs_engine
-npm install
-npm link
+cd flutterjs
+dart pub global activate --source path .
 ```
 
 ---
@@ -591,6 +590,7 @@ PHASES 4-6: Converting IR to JavaScript...
 - [x] Engine Bridge (Dart CLI ↔ JS Runtime)
 - [x] Incremental compilation
 - [x] DevTools IR Viewer
+- [x] Dart Core Libraries (`dart:math`, `dart:async`, `dart:convert`, etc.)
 - [ ] Animation support
 - [ ] Full Material 3 theming
 - [ ] Route-based code splitting
@@ -600,6 +600,22 @@ PHASES 4-6: Converting IR to JavaScript...
 
 ---
 
+## Known Limitations
+
+### Method Tear-offs (Callback Context)
+Currently, passing methods directly as callbacks (tear-offs) may causing binding issues where `this` becomes undefined.
+**Workaround:** Wrap callbacks in a lambda to preserve context.
+
+```dart
+// ❌ Avoid (may fail based on transpiler version)
+onPressed: _incrementCounter
+
+// ✅ Recommended
+onPressed: () => _incrementCounter()
+```
+
+---
+
 ## Initialization
 
 To set up the project for development (both Dart and JavaScript packages), run the following command from the root directory:
diff --git a/SECURITY.md b/SECURITY.md
new file mode 100644
index 00000000..adff1d25
--- /dev/null
+++ b/SECURITY.md
@@ -0,0 +1,43 @@
+# 🛡️ Security Policy
+
+## 📦 Supported Versions
+
+| Version | Supported          | Notes |
+| ------- | ------------------ | ----- |
+| 0.0.x   | :white_check_mark: | Current development version |
+| < 0.0.x | :x:                | No longer supported |
+
+## 🐞 Reporting a Vulnerability
+
+We take the security of FlutterJS seriously. If you have discovered a security vulnerability, we appreciate your help in disclosing it to us in a responsible manner.
+
+> [!IMPORTANT]
+> **Please DO NOT report security vulnerabilities through public GitHub issues.**
+
+### How to Report
+
+Please email a detailed report to **[info@flutterjs.dev](mailto:info@flutterjs.dev)**.
+
+Include the following details:
+- **Type of issue** (e.g., XSS, Injection, logical flaw)
+- **Full paths** of source file(s) related to the manifestation of the issue
+- **Location** of the affected source code (tag/branch/commit or direct URL)
+- **Step-by-step instructions** to reproduce the issue
+- **Proof-of-concept** or exploit code (if available)
+- **Impact** of the issue, including how an attacker might exploit it
+
+### Our Response Policy
+
+1.  **Response**: We will acknowledge receipt of your report within **48 hours**.
+2.  **Assessment**: We will investigate the issue and determine its impact.
+3.  **Fix**: If verified, we will work on a fix and release a patch as soon as possible.
+4.  **Disclosure**: We will coordinate the public disclosure of the vulnerability with you.
+
+## 🔒 Security Best Practices
+
+When using FlutterJS in your applications:
+
+1.  **Secrets Management**: Never commit API keys or secrets to version control. Use environment variables.
+2.  **Input Validation**: Always sanitize and validate user input to prevent injection attacks.
+3.  **Dependency Updates**: Keep your dependencies up to date using `dart pub upgrade` and `npm update`.
+4.  **Transport Security**: Always use HTTPS in production environments.
\ No newline at end of file
diff --git a/bin/flutterjs.dart b/bin/flutterjs.dart
index bceee71f..e03943b5 100644
--- a/bin/flutterjs.dart
+++ b/bin/flutterjs.dart
@@ -99,7 +99,13 @@ const String kVersion = '2.0.0';
 const String kAppName = 'Flutter.js';
 
 Future<void> main(List<String> args) async {
+  final debugFile = File(
+    'c:/Jay/_Plugin/flutterjs/examples/routing_app/debug_main.txt',
+  );
+  debugFile.writeAsStringSync('DEBUG: BIN MAIN START\n');
+  print('DEBUG: BIN MAIN START');
   print('🦖 FLUTTERJS CLI - DEBUG MODE ACTIVE 🦖');
+
   // Parse verbose flags early
   final bool veryVerbose = args.contains('-vv');
   final bool verbose =
@@ -127,27 +133,50 @@ Future<void> main(List<String> args) async {
 
   final bool muteCommandLogging = (help || doctor) && !veryVerbose;
   final bool verboseHelp = help && verbose;
-  final bool watch = args.contains('--watch');
+
+  debugFile.writeAsStringSync(
+    'DEBUG: Parsed args. Creating runner...\n',
+    mode: FileMode.append,
+  );
   // ✅ INITIALIZE DEBUGGER HERE
+  /*
   FlutterJSIntegratedDebugger.initFromCliFlags(
     verbose: verbose,
     verboseHelp: veryVerbose,
     watch: watch,
   );
+  */
   // Create and run command runner
+  print('DEBUG: Creating runner...');
   final runner = FlutterJSCommandRunner(
     verbose: verbose,
     verboseHelp: verboseHelp,
     muteCommandLogging: muteCommandLogging,
   );
+  print('DEBUG: Runner created');
+  debugFile.writeAsStringSync('DEBUG: Runner created\n', mode: FileMode.append);
 
   try {
+    print('DEBUG: Calling runner.run(args)...');
+    debugFile.writeAsStringSync(
+      'DEBUG: Calling runner.run(args)...\n',
+      mode: FileMode.append,
+    );
     await runner.run(args);
+    print('DEBUG: runner.run(args) returned');
+    debugFile.writeAsStringSync(
+      'DEBUG: runner.run(args) returned\n',
+      mode: FileMode.append,
+    );
   } on UsageException catch (e) {
     print('${e.message}\n');
     print(e.usage);
     exit(64); // Command line usage error
-  } catch (e) {
+  } catch (e, st) {
+    debugFile.writeAsStringSync(
+      'ERROR: $e\nSTACK: $st\n',
+      mode: FileMode.append,
+    );
     if (verbose) {
       print('Error: $e');
     } else {
diff --git a/docs/implementation_plan.md b/docs/implementation_plan.md
new file mode 100644
index 00000000..4ed0cfec
--- /dev/null
+++ b/docs/implementation_plan.md
@@ -0,0 +1,68 @@
+# Implementation Plan - Dart Core Libraries (Single Package Strategy)
+
+To avoid cluttering the codebase with many small packages, we will consolidate all Dart standard library implementations into a **single** infrastructure package.
+
+## Architecture Change
+**New Package**: `packages/flutterjs_dart`
+**NPM Name**: `@flutterjs/dart`
+
+This package will contain implementations for all core libraries as sub-modules. The transpiler will map `dart:` imports to specific paths within this single package.
+
+### Structure
+```text
+packages/flutterjs_dart/
+├── package.json          (exports: @flutterjs/dart)
+├── src/
+│   ├── math/
+│   │   ├── index.js      (exports Point, Random, etc.)
+│   │   └── random.js
+│   ├── async/
+│   │   ├── index.js      (exports Future, Stream, Timer)
+│   │   ├── future.js
+│   │   └── timer.js
+│   ├── convert/
+│   │   └── index.js
+│   ├── collection/
+│   │   └── index.js
+│   ├── developer/
+│   │   └── index.js
+│   └── typed_data/
+│       └── index.js
+└── index.js              (Main entry point, aggregates exports if needed)
+```
+
+## Mappings
+The [flutterjs.imports.json](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_engine/flutterjs.imports.json) (or the internal compiler resolution) will be configured to map:
+
+| Dart Import | Maps To (Physical Path) |
+| :--- | :--- |
+| `dart:math` | `@flutterjs/dart/math` |
+| `dart:async` | `@flutterjs/dart/async` |
+| `dart:convert` | `@flutterjs/dart/convert` |
+| `dart:collection` | `@flutterjs/dart/collection` |
+| `dart:developer` | `@flutterjs/dart/developer` |
+| `dart:typed_data` | `@flutterjs/dart/typed_data` |
+
+## Execution Steps
+
+### 1. Create `packages/flutterjs_dart`
+- Initialize [package.json](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_engine/package.json) with name `@flutterjs/dart`.
+- Configure `exports` in [package.json](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_engine/package.json) to expose subpaths `./math`, `./async`, etc.
+
+### 2. Implement Modules
+- **Math**: Wrapper for JS `Math`.
+- **Async**: `Future` (Promise wrapper), `Timer`.
+- **Convert**: `JSON` wrapper.
+- **Collection**: `List` (Array), `Map` (Map), `Set` (Set).
+- **TypedData**: `Uint8Array` wrapper.
+
+### 3. Update Transpiler
+- Modify `flutterjs_gen` to rewrite `dart:<name>` to `@flutterjs/dart/<name>`.
+
+### 4. Register in Engine
+- Update [packages/flutterjs_engine/flutterjs.imports.json](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_engine/flutterjs.imports.json) to point `@flutterjs/dart` to the local implementation.
+
+## Benefits
+- **Cleanliness**: One folder `packages/flutterjs_dart` instead of 6+.
+- **Maintainability**: Shared utilities (like a base JS wrapper class) can live in `packages/flutterjs_dart/src/utils` and be reused across libs.
+- **Scalability**: Adding `dart:isolate` or `dart:ui` later just means adding a folder.
diff --git a/docs/placement_implementation_plan.md b/docs/placement_implementation_plan.md
new file mode 100644
index 00000000..4ed0cfec
--- /dev/null
+++ b/docs/placement_implementation_plan.md
@@ -0,0 +1,68 @@
+# Implementation Plan - Dart Core Libraries (Single Package Strategy)
+
+To avoid cluttering the codebase with many small packages, we will consolidate all Dart standard library implementations into a **single** infrastructure package.
+
+## Architecture Change
+**New Package**: `packages/flutterjs_dart`
+**NPM Name**: `@flutterjs/dart`
+
+This package will contain implementations for all core libraries as sub-modules. The transpiler will map `dart:` imports to specific paths within this single package.
+
+### Structure
+```text
+packages/flutterjs_dart/
+├── package.json          (exports: @flutterjs/dart)
+├── src/
+│   ├── math/
+│   │   ├── index.js      (exports Point, Random, etc.)
+│   │   └── random.js
+│   ├── async/
+│   │   ├── index.js      (exports Future, Stream, Timer)
+│   │   ├── future.js
+│   │   └── timer.js
+│   ├── convert/
+│   │   └── index.js
+│   ├── collection/
+│   │   └── index.js
+│   ├── developer/
+│   │   └── index.js
+│   └── typed_data/
+│       └── index.js
+└── index.js              (Main entry point, aggregates exports if needed)
+```
+
+## Mappings
+The [flutterjs.imports.json](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_engine/flutterjs.imports.json) (or the internal compiler resolution) will be configured to map:
+
+| Dart Import | Maps To (Physical Path) |
+| :--- | :--- |
+| `dart:math` | `@flutterjs/dart/math` |
+| `dart:async` | `@flutterjs/dart/async` |
+| `dart:convert` | `@flutterjs/dart/convert` |
+| `dart:collection` | `@flutterjs/dart/collection` |
+| `dart:developer` | `@flutterjs/dart/developer` |
+| `dart:typed_data` | `@flutterjs/dart/typed_data` |
+
+## Execution Steps
+
+### 1. Create `packages/flutterjs_dart`
+- Initialize [package.json](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_engine/package.json) with name `@flutterjs/dart`.
+- Configure `exports` in [package.json](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_engine/package.json) to expose subpaths `./math`, `./async`, etc.
+
+### 2. Implement Modules
+- **Math**: Wrapper for JS `Math`.
+- **Async**: `Future` (Promise wrapper), `Timer`.
+- **Convert**: `JSON` wrapper.
+- **Collection**: `List` (Array), `Map` (Map), `Set` (Set).
+- **TypedData**: `Uint8Array` wrapper.
+
+### 3. Update Transpiler
+- Modify `flutterjs_gen` to rewrite `dart:<name>` to `@flutterjs/dart/<name>`.
+
+### 4. Register in Engine
+- Update [packages/flutterjs_engine/flutterjs.imports.json](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_engine/flutterjs.imports.json) to point `@flutterjs/dart` to the local implementation.
+
+## Benefits
+- **Cleanliness**: One folder `packages/flutterjs_dart` instead of 6+.
+- **Maintainability**: Shared utilities (like a base JS wrapper class) can live in `packages/flutterjs_dart/src/utils` and be reused across libs.
+- **Scalability**: Adding `dart:isolate` or `dart:ui` later just means adding a folder.
diff --git a/examples/core_lib_demo/flutterjs.config.js b/examples/core_lib_demo/flutterjs.config.js
new file mode 100644
index 00000000..4e535e70
--- /dev/null
+++ b/examples/core_lib_demo/flutterjs.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  packages: {
+    'flutterjs': null, // TODO: Set to 'flutterjs_flutterjs:version' or { path: './...' }
+    'flutterjs_material': null, // TODO: Set to 'flutterjs_flutterjs_material:version' or { path: './...' }
+  }
+};
diff --git a/examples/core_lib_demo/lib/main.dart b/examples/core_lib_demo/lib/main.dart
new file mode 100644
index 00000000..0130fba2
--- /dev/null
+++ b/examples/core_lib_demo/lib/main.dart
@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'dart:math';
+import 'dart:async';
+import 'dart:developer' as developer;
+import 'dart:collection';
+import 'dart:typed_data';
+
+void main() { 
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    // --- Test dart:math ---
+    final rand = Random().nextInt(100);
+    final point = Point(10, 20);
+
+    // --- Test dart:async ---
+    Timer(const Duration(seconds: 1), () {
+      developer.log('Timer fired!');
+    });
+    Future.delayed(const Duration(milliseconds: 500), () {
+      developer.log('Future completed');
+    });
+
+
+    // --- Test dart:collection ---
+    final queue = Queue<int>();
+    queue.add(1);
+    queue.addLast(2);
+
+    // --- Test dart:typed_data ---
+    final bytes = Uint8List(8);
+    bytes[0] = 255;
+
+    // --- Test dart:developer ---
+    developer.log('Build complete. Random: $rand, Point: $point');
+
+    return Container();
+  }
+}
diff --git a/examples/core_lib_demo/pubspec.yaml b/examples/core_lib_demo/pubspec.yaml
new file mode 100644
index 00000000..2beb272e
--- /dev/null
+++ b/examples/core_lib_demo/pubspec.yaml
@@ -0,0 +1,7 @@
+name: core_lib_demo
+description: A new FlutterJS project.
+dependencies:
+  flutterjs:
+    path: ../../packages/flutterjs
+  flutterjs_material:
+    path: ../../packages/flutterjs_material
diff --git a/examples/counter/lib/final_test/test.dart b/examples/counter/lib/final_test/test.dart
deleted file mode 100644
index 89c31a3c..00000000
--- a/examples/counter/lib/final_test/test.dart
+++ /dev/null
@@ -1,138 +0,0 @@
-// lib/main.dart
-// The ultimate minimal stress-test for your FlutterJs compiler
-// If this file compiles to working <80 KB JS → you have won.
-
-import 'package:flutter/material.dart'; // ← your @flutterjs/material
-import 'package:provider/provider.dart'; // ← your @flutterjs/provider
-import 'package:http/http.dart' as http; // ← your @flutterjs/http
-import 'dart:convert'; // ← your @flutterjs/convert
-import 'dart:math' as math; // ← your @flutterjs/math
-import 'dart:async';
-
-void main() => runApp(MyApp());
-
-class CounterModel extends ChangeNotifier {
-  int _count = 0;
-  String status = 'Idle';
-  List<String> history = [];
-
-  int get count => _count;
-
-  void increment() {
-    _count++;
-    history.add('+$count at ${DateTime.now().toIso8601String()}');
-    status = 'Last action: increment';
-    notifyListeners();
-  }
-
-  Future<void> fetchQuote() async {
-    status = 'Fetching...';
-    notifyListeners();
-
-    try {
-      final resp = await http.get(Uri.parse('https://api.quotable.io/random'));
-      if (resp.statusCode == 200) {
-        final data = jsonDecode(resp.body);
-        final quote = data['content'] as String;
-        history.add('Quote: ${quote.substring(0, 30)}...');
-        status = 'Quote loaded';
-      } else {
-        status = 'HTTP ${resp.statusCode}';
-      }
-    } catch (e) {
-      status = 'Error: $e';
-    }
-    notifyListeners();
-  }
-
-  void reset() {
-    _count = 0;
-    history.clear();
-    status = 'Reset';
-    notifyListeners();
-  }
-}
-
-class MyApp extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    return ChangeNotifierProvider(
-      create: (_) => CounterModel(),
-      child: MaterialApp(
-        title: 'FlutterJs Stress Test',
-        debugShowCheckedModeBanner: false,
-        theme: ThemeData(primarySwatch: Colors.indigo),
-        home: HomePage(),
-      ),
-    );
-  }
-}
-
-class HomePage extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    final model = context.watch<CounterModel>();
-
-    return Scaffold(
-      appBar: AppBar(
-        title: Text('FlutterJs Stress Test'),
-        backgroundColor: Colors.indigo,
-      ),
-      body: Padding(
-        padding: EdgeInsets.all(16),
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            // 1. Reactive Text + Theme
-            Text(
-              'Count: ${model.count} ${math.min(10, 20)}',
-              style: Theme.of(context).textTheme.headlineMedium!.copyWith(
-                color: model.count.isEven ? Colors.indigo : Colors.purple,
-              ),
-            ),
-            SizedBox(height: 20),
-
-            // 2. Row of buttons
-            Row(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                ElevatedButton(onPressed: model.increment, child: Text('+1')),
-                SizedBox(width: 16),
-                ElevatedButton(onPressed: model.reset, child: Text('Reset')),
-                SizedBox(width: 16),
-                ElevatedButton(
-                  onPressed: model.fetchQuote,
-                  child: Text('Fetch Quote'),
-                ),
-              ],
-            ),
-            SizedBox(height: 20),
-
-            // 3. Async status
-            Text('Status: ${model.status}'),
-
-            SizedBox(height: 20),
-
-            // 4. ListView with dynamic data
-            Expanded(
-              child: ListView.builder(
-                itemCount: model.history.length,
-                itemBuilder: (context, i) => Card(
-                  child: ListTile(
-                    leading: CircleAvatar(child: Text('${i + 1}')),
-                    title: Text(model.history[i]),
-                    subtitle: Text('Item $i'),
-                  ),
-                ),
-              ),
-            ),
-          ],
-        ),
-      ),
-      floatingActionButton: FloatingActionButton(
-        onPressed: model.increment,
-        child: Icon(Icons.add),
-      ),
-    );
-  }
-}
diff --git a/examples/counter/pubspec.yaml b/examples/counter/pubspec.yaml
index d5d6a865..8a71dd25 100644
--- a/examples/counter/pubspec.yaml
+++ b/examples/counter/pubspec.yaml
@@ -35,9 +35,8 @@ dependencies:
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
-  cupertino_icons: ^1.0.8
-  provider:
-  http:
+  # cupertino_icons: ^1.0.8
+
 
 dev_dependencies:
   flutter_test:
diff --git a/examples/flutterjs_website b/examples/flutterjs_website
index b2b392de..ce8abf61 160000
--- a/examples/flutterjs_website
+++ b/examples/flutterjs_website
@@ -1 +1 @@
-Subproject commit b2b392def2374bdf7a1a95357bf118f3e0e33d16
+Subproject commit ce8abf61d9dfd351c774e80a240fff4ea560d84a
diff --git a/examples/material_advanced_demo/lib/main.dart b/examples/material_advanced_demo/lib/main.dart
new file mode 100644
index 00000000..03bcbb92
--- /dev/null
+++ b/examples/material_advanced_demo/lib/main.dart
@@ -0,0 +1,177 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const AdvancedDemoApp());
+}
+
+class AdvancedDemoApp extends StatelessWidget {
+  const AdvancedDemoApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Advanced Demo',
+      theme: ThemeData(useMaterial3: true, colorSchemeSeed: Colors.teal),
+      home: const AdvancedPage(),
+    );
+  }
+}
+
+class AdvancedPage extends StatefulWidget {
+  const AdvancedPage({super.key});
+
+  @override
+  State<AdvancedPage> createState() => _AdvancedPageState();
+}
+
+class _AdvancedPageState extends State<AdvancedPage> {
+  String _dropdownValue = 'One';
+  DateTime? _selectedDate;
+
+  // Clean mock for refresh
+  Future<void> _handleRefresh() async {
+    await Future.delayed(const Duration(seconds: 2));
+    print('Refreshed!');
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Advanced Widgets'),
+        actions: [
+          IconButton(
+            icon: const Icon(Icons.info),
+            onPressed: () {
+              showAboutDialog(
+                context: context,
+                applicationName: 'Advanced Demo',
+                applicationVersion: '1.0.0',
+                applicationLegalese: '© 2026 FlutterJS',
+                children: [const Text('This demo showcases complex widgets.')],
+              );
+            },
+          ),
+        ],
+      ),
+      body: RefreshIndicator(
+        onRefresh: _handleRefresh,
+        child: SingleChildScrollView(
+          physics:
+              const AlwaysScrollableScrollPhysics(), // Ensure scroll for refresh
+          padding: const EdgeInsets.all(16),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              const Text(
+                'Carousel',
+                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+              ),
+              const SizedBox(height: 10),
+              const SizedBox(height: 10),
+              Container(
+                height: 150,
+                color: Colors.grey.shade200,
+                alignment: Alignment.center,
+                child: const Text(
+                  'Carousel (Custom widget - see src/material/carousel.js)',
+                ),
+              ),
+              const Divider(height: 30),
+
+              const Text(
+                'Dropdown',
+                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+              ),
+              DropdownButton<String>(
+                value: _dropdownValue,
+                onChanged: (String? newValue) {
+                  setState(() {
+                    _dropdownValue = newValue!;
+                  });
+                },
+                items: <String>['One', 'Two', 'Three', 'Four']
+                    .map<DropdownMenuItem<String>>((String value) {
+                      return DropdownMenuItem<String>(
+                        value: value,
+                        child: Text(value),
+                      );
+                    })
+                    .toList(),
+              ),
+              const Divider(height: 30),
+
+              const Text(
+                'Pickers',
+                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+              ),
+              const SizedBox(height: 10),
+              ElevatedButton(
+                onPressed: () async {
+                  final DateTime? picked = await showDatePicker(
+                    context: context,
+                    initialDate: DateTime.now(),
+                    firstDate: DateTime(2020),
+                    lastDate: DateTime(2030),
+                  );
+                  if (picked != null && picked != _selectedDate) {
+                    setState(() {
+                      _selectedDate = picked;
+                    });
+                  }
+                },
+                child: Text(
+                  _selectedDate == null
+                      ? 'Select Date'
+                      : 'Date: ${_selectedDate!.toLocal()}'.split(' ')[0],
+                ),
+              ),
+
+              const Divider(height: 30),
+              const Text(
+                'Ink & Interaction',
+                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+              ),
+              const SizedBox(height: 10),
+
+              Material(
+                color: Colors.amberAccent,
+                child: InkWell(
+                  onTap: () {
+                    print('InkWell tapped');
+                  },
+                  splashColor: Colors.blue.withOpacity(0.3),
+                  child: Container(
+                    width: 100,
+                    height: 100,
+                    alignment: Alignment.center,
+                    child: Text('Tap Me (InkWell)'),
+                  ),
+                ),
+              ),
+
+              const Divider(height: 30),
+              const Text(
+                'Extras',
+                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+              ),
+              const SizedBox(height: 10),
+              const Row(
+                children: [
+                  FlutterLogo(size: 48),
+                  SizedBox(width: 20),
+                  BackButton(),
+                  SizedBox(width: 10),
+                  CloseButton(),
+                ],
+              ),
+
+              const SizedBox(height: 50), // Pad for scrolling
+              const Center(child: Text('Pull down to refresh...')),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/examples/material_advanced_demo/pubspec.yaml b/examples/material_advanced_demo/pubspec.yaml
new file mode 100644
index 00000000..4bdaa694
--- /dev/null
+++ b/examples/material_advanced_demo/pubspec.yaml
@@ -0,0 +1,15 @@
+name: material_advanced_demo
+description: "Demo of Advanced Material Widgets"
+publish_to: 'none'
+version: 1.0.0+1
+environment:
+  sdk: ^3.10.0-278.0.dev
+dependencies:
+  flutter:
+    sdk: flutter
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  flutter_lints: ^6.0.0
+flutter:
+  uses-material-design: true
diff --git a/examples/material_advanced_demo/web/index.html b/examples/material_advanced_demo/web/index.html
new file mode 100644
index 00000000..8b4d16cb
--- /dev/null
+++ b/examples/material_advanced_demo/web/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <base href="$FLUTTER_BASE_HREF">
+    <meta charset="UTF-8">
+    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+    <title>Advanced Demo</title>
+    <script src="flutter_bootstrap.js" async></script>
+</head>
+
+<body>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/material_buttons_demo/lib/main.dart b/examples/material_buttons_demo/lib/main.dart
new file mode 100644
index 00000000..c1233972
--- /dev/null
+++ b/examples/material_buttons_demo/lib/main.dart
@@ -0,0 +1,180 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const ButtonsDemoApp());
+}
+
+class ButtonsDemoApp extends StatelessWidget {
+  const ButtonsDemoApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Buttons Demo',
+      theme: ThemeData(useMaterial3: true, colorSchemeSeed: Colors.blue),
+      home: const ButtonsPage(),
+    );
+  }
+}
+
+class ButtonsPage extends StatefulWidget {
+  const ButtonsPage({super.key});
+
+  @override
+  State<ButtonsPage> createState() => _ButtonsPageState();
+}
+
+class _ButtonsPageState extends State<ButtonsPage> {
+  final List<bool> _toggleState = [true, false, false];
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Buttons & Toggles')),
+      body: SingleChildScrollView(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const Text(
+              'Common Buttons',
+              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+            ),
+            const SizedBox(height: 10),
+            Wrap(
+              spacing: 10,
+              runSpacing: 10,
+              children: [
+                ElevatedButton(onPressed: () {}, child: const Text('Elevated')),
+                FilledButton(onPressed: () {}, child: const Text('Filled')),
+                FilledButton.tonal(
+                  onPressed: () {},
+                  child: const Text('Filled Tonal'),
+                ),
+                OutlinedButton(onPressed: () {}, child: const Text('Outlined')),
+                TextButton(onPressed: () {}, child: const Text('Text')),
+              ],
+            ),
+            const Divider(height: 30),
+
+            const Text(
+              'Icon Buttons',
+              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+            ),
+            const SizedBox(height: 10),
+            Row(
+              children: [
+                IconButton(icon: const Icon(Icons.add), onPressed: () {}),
+                IconButton.filled(
+                  icon: const Icon(Icons.edit),
+                  onPressed: () {},
+                ),
+                IconButton.outlined(
+                  icon: const Icon(Icons.delete),
+                  onPressed: () {},
+                ),
+              ],
+            ),
+            const Divider(height: 30),
+
+            const Text(
+              'Floating Action Buttons',
+              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+            ),
+            const SizedBox(height: 10),
+            Row(
+              children: [
+                FloatingActionButton(
+                  onPressed: () {},
+                  child: const Icon(Icons.add),
+                ),
+                const SizedBox(width: 10),
+                FloatingActionButton.small(
+                  onPressed: () {},
+                  child: const Icon(Icons.remove),
+                ),
+                const SizedBox(width: 10),
+                FloatingActionButton.large(
+                  onPressed: () {},
+                  child: const Icon(Icons.check),
+                ),
+                const SizedBox(width: 10),
+                FloatingActionButton.extended(
+                  onPressed: () {},
+                  label: const Text('Extended'),
+                  icon: const Icon(Icons.edit),
+                ),
+              ],
+            ),
+            const Divider(height: 30),
+
+            const Text(
+              'Toggle Buttons',
+              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+            ),
+            const SizedBox(height: 10),
+            ToggleButtons(
+              isSelected: _toggleState,
+              onPressed: (index) {
+                setState(() {
+                  _toggleState[index] = !_toggleState[index];
+                });
+              },
+              children: const [
+                Icon(Icons.format_bold),
+                Icon(Icons.format_italic),
+                Icon(Icons.format_underline),
+              ],
+            ),
+            const Divider(height: 30),
+
+            const Text(
+              'Menu Buttons',
+              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+            ),
+            const SizedBox(height: 10),
+            MenuAnchor(
+              builder:
+                  (
+                    BuildContext context,
+                    MenuController controller,
+                    Widget? child,
+                  ) {
+                    return FilledButton(
+                      onPressed: () {
+                        if (controller.isOpen) {
+                          controller.close();
+                        } else {
+                          controller.open();
+                        }
+                      },
+                      child: const Text('Show Menu'),
+                    );
+                  },
+              menuChildren: [
+                MenuItemButton(onPressed: () {}, child: const Text('Item 1')),
+                MenuItemButton(onPressed: () {}, child: const Text('Item 2')),
+                SubmenuButton(
+                  menuChildren: [
+                    MenuItemButton(
+                      onPressed: () {},
+                      child: const Text('Subitem 1'),
+                    ),
+                  ],
+                  child: const Text('Submenu'),
+                ),
+              ],
+            ),
+            const SizedBox(height: 10),
+            PopupMenuButton(
+              itemBuilder: (context) => [
+                const PopupMenuItem(child: Text('Popup 1')),
+                const PopupMenuItem(child: Text('Popup 2')),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/examples/material_buttons_demo/pubspec.yaml b/examples/material_buttons_demo/pubspec.yaml
new file mode 100644
index 00000000..5a4de6a7
--- /dev/null
+++ b/examples/material_buttons_demo/pubspec.yaml
@@ -0,0 +1,15 @@
+name: material_buttons_demo
+description: "Demo of Material Buttons"
+publish_to: 'none'
+version: 1.0.0+1
+environment:
+  sdk: ^3.10.0-278.0.dev
+dependencies:
+  flutter:
+    sdk: flutter
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  flutter_lints: ^6.0.0
+flutter:
+  uses-material-design: true
diff --git a/examples/material_buttons_demo/web/index.html b/examples/material_buttons_demo/web/index.html
new file mode 100644
index 00000000..1790b904
--- /dev/null
+++ b/examples/material_buttons_demo/web/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <base href="$FLUTTER_BASE_HREF">
+    <meta charset="UTF-8">
+    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+    <title>Buttons Demo</title>
+    <script src="flutter_bootstrap.js" async></script>
+</head>
+
+<body>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/material_demo/.gitignore b/examples/material_demo/.gitignore
new file mode 100644
index 00000000..1776e0ce
--- /dev/null
+++ b/examples/material_demo/.gitignore
@@ -0,0 +1,56 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+.swiftpm/
+migrate_working_dir/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# VS Code
+.vscode/
+
+# Flutter/Dart/Pub related
+**/doc/api/
+**/ios/Flutter/.last_build_id
+.dart_tool/
+.flutter-plugins
+.flutter-plugins-dependencies
+.pub-cache/
+.pub/
+/coverage/
+
+# FlutterJS Generated Artifacts - ✅ NEW
+build/
+.dev/
+dist/
+node_modules/
+flutterjs.config.js
+package.json
+package-lock.json
+public/index.html
+
+# Generated JS files in source (if any)
+src/**/*.js
+!src/**/*.dart
+
+# Symbolication related
+app.*.symbols
+
+# Obfuscation related
+app.*.map.json
+
+# Android Studio will place build artifacts here
+/android/app/debug
+/android/app/profile
+/android/app/release
diff --git a/examples/material_demo/.metadata b/examples/material_demo/.metadata
new file mode 100644
index 00000000..43ca89cf
--- /dev/null
+++ b/examples/material_demo/.metadata
@@ -0,0 +1,45 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled and should not be manually edited.
+
+version:
+  revision: "71164f3d8d907c8fe7a884cec0e8f73be288572c"
+  channel: "master"
+
+project_type: app
+
+# Tracks metadata for the flutter migrate command
+migration:
+  platforms:
+    - platform: root
+      create_revision: 71164f3d8d907c8fe7a884cec0e8f73be288572c
+      base_revision: 71164f3d8d907c8fe7a884cec0e8f73be288572c
+    - platform: android
+      create_revision: 71164f3d8d907c8fe7a884cec0e8f73be288572c
+      base_revision: 71164f3d8d907c8fe7a884cec0e8f73be288572c
+    - platform: ios
+      create_revision: 71164f3d8d907c8fe7a884cec0e8f73be288572c
+      base_revision: 71164f3d8d907c8fe7a884cec0e8f73be288572c
+    - platform: linux
+      create_revision: 71164f3d8d907c8fe7a884cec0e8f73be288572c
+      base_revision: 71164f3d8d907c8fe7a884cec0e8f73be288572c
+    - platform: macos
+      create_revision: 71164f3d8d907c8fe7a884cec0e8f73be288572c
+      base_revision: 71164f3d8d907c8fe7a884cec0e8f73be288572c
+    - platform: web
+      create_revision: 71164f3d8d907c8fe7a884cec0e8f73be288572c
+      base_revision: 71164f3d8d907c8fe7a884cec0e8f73be288572c
+    - platform: windows
+      create_revision: 71164f3d8d907c8fe7a884cec0e8f73be288572c
+      base_revision: 71164f3d8d907c8fe7a884cec0e8f73be288572c
+
+  # User provided section
+
+  # List of Local paths (relative to this file) that should be
+  # ignored by the migrate tool.
+  #
+  # Files that are not part of the templates will be ignored by default.
+  unmanaged_files:
+    - 'lib/main.dart'
+    - 'ios/Runner.xcodeproj/project.pbxproj'
diff --git a/examples/material_demo/README.md b/examples/material_demo/README.md
new file mode 100644
index 00000000..9498e65d
--- /dev/null
+++ b/examples/material_demo/README.md
@@ -0,0 +1,16 @@
+# counter
+
+A new Flutter project.
+
+## Getting Started
+
+This project is a starting point for a Flutter application.
+
+A few resources to get you started if this is your first Flutter project:
+
+- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
+- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)
+
+For help getting started with Flutter development, view the
+[online documentation](https://docs.flutter.dev/), which offers tutorials,
+samples, guidance on mobile development, and a full API reference.
diff --git a/examples/material_demo/analysis_options.yaml b/examples/material_demo/analysis_options.yaml
new file mode 100644
index 00000000..0d290213
--- /dev/null
+++ b/examples/material_demo/analysis_options.yaml
@@ -0,0 +1,28 @@
+# This file configures the analyzer, which statically analyzes Dart code to
+# check for errors, warnings, and lints.
+#
+# The issues identified by the analyzer are surfaced in the UI of Dart-enabled
+# IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be
+# invoked from the command line by running `flutter analyze`.
+
+# The following line activates a set of recommended lints for Flutter apps,
+# packages, and plugins designed to encourage good coding practices.
+include: package:flutter_lints/flutter.yaml
+
+linter:
+  # The lint rules applied to this project can be customized in the
+  # section below to disable rules from the `package:flutter_lints/flutter.yaml`
+  # included above or to enable additional rules. A list of all available lints
+  # and their documentation is published at https://dart.dev/lints.
+  #
+  # Instead of disabling a lint rule for the entire project in the
+  # section below, it can also be suppressed for a single line of code
+  # or a specific dart file by using the `// ignore: name_of_lint` and
+  # `// ignore_for_file: name_of_lint` syntax on the line or in the file
+  # producing the lint.
+  rules:
+    # avoid_print: false  # Uncomment to disable the `avoid_print` rule
+    # prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule
+
+# Additional information about this file can be found at
+# https://dart.dev/guides/language/analysis-options
diff --git a/examples/material_demo/lib/main.dart b/examples/material_demo/lib/main.dart
new file mode 100644
index 00000000..d3f86c26
--- /dev/null
+++ b/examples/material_demo/lib/main.dart
@@ -0,0 +1,187 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const MaterialDemoApp());
+}
+
+class MaterialDemoApp extends StatelessWidget {
+  const MaterialDemoApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'FlutterJS Material Demo',
+      theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: true),
+      home: const DemoPage(),
+    );
+  }
+}
+
+class DemoPage extends StatefulWidget {
+  const DemoPage({super.key});
+
+  @override
+  State<DemoPage> createState() => _DemoPageState();
+}
+
+class _DemoPageState extends State<DemoPage> {
+  bool _isChecked = false;
+  bool _isSwitched = false;
+  int _radioValue = 1;
+  final TextEditingController _textController = TextEditingController();
+  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
+
+  void _showDialog(BuildContext context) {
+    showDialog(
+      context: context,
+      builder: (context) => AlertDialog(
+        title: const Text('Dialog Title'),
+        content: const Text('This is a sample dialog content.'),
+        actions: [
+          TextButton(
+            onPressed: () => Navigator.of(context).pop(),
+            child: const Text('CANCEL'),
+          ),
+          TextButton(
+            onPressed: () => Navigator.of(context).pop(),
+            child: const Text('OK'),
+          ),
+        ],
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Material Components'),
+        actions: [IconButton(icon: const Icon(Icons.info), onPressed: () {})],
+      ),
+      drawer: Drawer(
+        child: ListView(
+          children: const [
+            DrawerHeader(child: Text('Drawer Header')),
+            ListTile(title: Text('Item 1')),
+          ],
+        ),
+      ),
+      floatingActionButton: FloatingActionButton(
+        onPressed: () {
+          ScaffoldMessenger.of(
+            context,
+          ).showSnackBar(const SnackBar(content: Text('FAB Pressed!')));
+        },
+        child: const Icon(Icons.add),
+      ),
+      body: SingleChildScrollView(
+        child: Padding(
+          padding: const EdgeInsets.all(16.0),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              const Text(
+                'Selection Controls',
+                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
+              ),
+              const SizedBox(height: 10),
+              CheckboxListTile(
+                title: const Text('Checkbox Option'),
+                value: _isChecked,
+                onChanged: (val) => setState(() => _isChecked = val == true),
+              ),
+              SwitchListTile(
+                title: const Text('Switch Option'),
+                value: _isSwitched,
+                onChanged: (val) => setState(() => _isSwitched = val),
+              ),
+              RadioListTile<int>(
+                title: const Text('Radio Option 1'),
+                value: 1,
+                groupValue: _radioValue,
+                onChanged: (val) => setState(() => _radioValue = val!),
+              ),
+              RadioListTile<int>(
+                title: const Text('Radio Option 2'),
+                value: 2,
+                groupValue: _radioValue,
+                onChanged: (val) => setState(() => _radioValue = val!),
+              ),
+
+              const Divider(height: 32),
+
+              const Text(
+                'Inputs & Forms',
+                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
+              ),
+              const SizedBox(height: 10),
+              TextField(
+                controller: _textController,
+                decoration: const InputDecoration(
+                  labelText: 'TextField',
+                  border: OutlineInputBorder(),
+                ),
+              ),
+              const SizedBox(height: 16),
+              Form(
+                key: _formKey,
+                child: TextFormField(
+                  decoration: const InputDecoration(
+                    labelText: 'TextFormField (Required)',
+                    border: OutlineInputBorder(),
+                  ),
+                  validator: (value) {
+                    if (value == null || value.isEmpty) {
+                      return 'Please enter some text';
+                    }
+                    return null;
+                  },
+                ),
+              ),
+              const SizedBox(height: 10),
+              ElevatedButton(
+                onPressed: () {
+                  print('Form Key: ${_formKey}');
+                  print('Current State: ${_formKey.currentState}');
+                  if (_formKey.currentState != null) {
+                    if (_formKey.currentState!.validate()) {
+                      ScaffoldMessenger.of(context).showSnackBar(
+                        const SnackBar(content: Text('Form Validated!')),
+                      );
+                    }
+                  } else {
+                    print('Form State is NULL');
+                  }
+                },
+                child: const Text('Validate Form'),
+              ),
+
+              const Divider(height: 32),
+
+              const Text(
+                'Progress Indicators',
+                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
+              ),
+              const SizedBox(height: 10),
+              const LinearProgressIndicator(),
+              const SizedBox(height: 16),
+              const Center(child: CircularProgressIndicator()),
+
+              const Divider(height: 32),
+
+              const Text(
+                'Dialogs',
+                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
+              ),
+              const SizedBox(height: 10),
+              ElevatedButton(
+                onPressed: () => _showDialog(context),
+                child: const Text('Show Dialog'),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/examples/material_demo/pubspec.yaml b/examples/material_demo/pubspec.yaml
new file mode 100644
index 00000000..14e07c2d
--- /dev/null
+++ b/examples/material_demo/pubspec.yaml
@@ -0,0 +1,91 @@
+name: material_demo
+description: "A new Flutter project."
+# The following line prevents the package from being accidentally published to
+# pub.dev using `flutter pub publish`. This is preferred for private packages.
+publish_to: 'none' # Remove this line if you wish to publish to pub.dev
+
+resolution: workspace
+
+# The following defines the version and build number for your application.
+# A version number is three numbers separated by dots, like 1.2.43
+# followed by an optional build number separated by a +.
+# Both the version and the builder number may be overridden in flutter
+# build by specifying --build-name and --build-number, respectively.
+# In Android, build-name is used as versionName while build-number used as versionCode.
+# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
+# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
+# Read more about iOS versioning at
+# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
+# In Windows, build-name is used as the major, minor, and patch parts
+# of the product and file versions while build-number is used as the build suffix.
+version: 1.0.0+1
+
+environment:
+  sdk: ^3.10.0-278.0.dev
+
+# Dependencies specify other packages that your package needs in order to work.
+# To automatically upgrade your package dependencies to the latest versions
+# consider running `flutter pub upgrade --major-versions`. Alternatively,
+# dependencies can be manually updated by changing the version numbers below to
+# the latest version available on pub.dev. To see which dependencies have newer
+# versions available, run `flutter pub outdated`.
+dependencies:
+  flutter:
+    sdk: flutter
+
+  # The following adds the Cupertino Icons font to your application.
+  # Use with the CupertinoIcons class for iOS style icons.
+
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+  # The "flutter_lints" package below contains a set of recommended lints to
+  # encourage good coding practices. The lint set provided by the package is
+  # activated in the `analysis_options.yaml` file located at the root of your
+  # package. See that file for information about deactivating specific lint
+  # rules and activating additional ones.
+  flutter_lints: ^6.0.0
+
+# For information on the generic Dart part of this file, see the
+# following page: https://dart.dev/tools/pub/pubspec
+
+# The following section is specific to Flutter packages.
+flutter:
+
+  # The following line ensures that the Material Icons font is
+  # included with your application, so that you can use the icons in
+  # the material Icons class.
+  uses-material-design: true
+
+  # To add assets to your application, add an assets section, like this:
+  # assets:
+  #   - images/a_dot_burr.jpeg
+  #   - images/a_dot_ham.jpeg
+
+  # An image asset can refer to one or more resolution-specific "variants", see
+  # https://flutter.dev/to/resolution-aware-images
+
+  # For details regarding adding assets from package dependencies, see
+  # https://flutter.dev/to/asset-from-package
+
+  # To add custom fonts to your application, add a fonts section here,
+  # in this "flutter" section. Each entry in this list should have a
+  # "family" key with the font family name, and a "fonts" key with a
+  # list giving the asset and other descriptors for the font. For
+  # example:
+  # fonts:
+  #   - family: Schyler
+  #     fonts:
+  #       - asset: fonts/Schyler-Regular.ttf
+  #       - asset: fonts/Schyler-Italic.ttf
+  #         style: italic
+  #   - family: Trajan Pro
+  #     fonts:
+  #       - asset: fonts/TrajanPro.ttf
+  #       - asset: fonts/TrajanPro_Bold.ttf
+  #         weight: 700
+  #
+  # For details regarding fonts from package dependencies,
+  # see https://flutter.dev/to/font-from-package
diff --git a/examples/material_demo/web/favicon.png b/examples/material_demo/web/favicon.png
new file mode 100644
index 00000000..8aaa46ac
Binary files /dev/null and b/examples/material_demo/web/favicon.png differ
diff --git a/examples/material_demo/web/icons/Icon-192.png b/examples/material_demo/web/icons/Icon-192.png
new file mode 100644
index 00000000..b749bfef
Binary files /dev/null and b/examples/material_demo/web/icons/Icon-192.png differ
diff --git a/examples/material_demo/web/icons/Icon-512.png b/examples/material_demo/web/icons/Icon-512.png
new file mode 100644
index 00000000..88cfd48d
Binary files /dev/null and b/examples/material_demo/web/icons/Icon-512.png differ
diff --git a/examples/material_demo/web/icons/Icon-maskable-192.png b/examples/material_demo/web/icons/Icon-maskable-192.png
new file mode 100644
index 00000000..eb9b4d76
Binary files /dev/null and b/examples/material_demo/web/icons/Icon-maskable-192.png differ
diff --git a/examples/material_demo/web/icons/Icon-maskable-512.png b/examples/material_demo/web/icons/Icon-maskable-512.png
new file mode 100644
index 00000000..d69c5669
Binary files /dev/null and b/examples/material_demo/web/icons/Icon-maskable-512.png differ
diff --git a/examples/material_demo/web/index.html b/examples/material_demo/web/index.html
new file mode 100644
index 00000000..24a6d80f
--- /dev/null
+++ b/examples/material_demo/web/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <!--
+    If you are serving your web app in a path other than the root, change the
+    href value below to reflect the base path you are serving from.
+
+    The path provided below has to start and end with a slash "/" in order for
+    it to work correctly.
+
+    For more details:
+    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+
+    This is a placeholder for base href that will be replaced by the value of
+    the `--base-href` argument provided to `flutter build`.
+  -->
+  <base href="$FLUTTER_BASE_HREF">
+
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="A new Flutter project.">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="counter">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/png" href="favicon.png" />
+
+  <!-- Fonts -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
+
+  <title>counter</title>
+  <link rel="manifest" href="manifest.json">
+</head>
+
+<body>
+  <script src="flutter_bootstrap.js" async></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/material_demo/web/manifest.json b/examples/material_demo/web/manifest.json
new file mode 100644
index 00000000..cd67d74b
--- /dev/null
+++ b/examples/material_demo/web/manifest.json
@@ -0,0 +1,35 @@
+{
+    "name": "counter",
+    "short_name": "counter",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#0175C2",
+    "theme_color": "#0175C2",
+    "description": "A new Flutter project.",
+    "orientation": "portrait-primary",
+    "prefer_related_applications": false,
+    "icons": [
+        {
+            "src": "icons/Icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-maskable-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "icons/Icon-maskable-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}
diff --git a/examples/material_display_demo/lib/main.dart b/examples/material_display_demo/lib/main.dart
new file mode 100644
index 00000000..aeb3562d
--- /dev/null
+++ b/examples/material_display_demo/lib/main.dart
@@ -0,0 +1,170 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const DisplayDemoApp());
+}
+
+class DisplayDemoApp extends StatelessWidget {
+  const DisplayDemoApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Display Demo',
+      theme: ThemeData(useMaterial3: true, colorSchemeSeed: Colors.purple),
+      home: const DisplayPage(),
+    );
+  }
+}
+
+class DisplayPage extends StatelessWidget {
+  const DisplayPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Display & Feedback')),
+      body: SingleChildScrollView(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const Text(
+              'Chips',
+              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+            ),
+            const SizedBox(height: 10),
+            Wrap(
+              spacing: 8,
+              children: [
+                const Chip(label: Text('Chip')),
+                ActionChip(
+                  avatar: const Icon(Icons.favorite),
+                  label: const Text('Action Chip'),
+                  onPressed: () {},
+                ),
+                const Chip(
+                  avatar: CircleAvatar(
+                    backgroundColor: Colors.blue,
+                    child: Text('J'),
+                  ),
+                  label: Text('Avatar Chip'),
+                ),
+              ],
+            ),
+            const Divider(height: 30),
+
+            const Text(
+              'Cards',
+              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+            ),
+            const SizedBox(height: 10),
+            const Card(
+              child: SizedBox(
+                width: 300,
+                height: 100,
+                child: Center(child: Text('Elevated Card')),
+              ),
+            ),
+            const SizedBox(height: 10),
+            Card(
+              elevation: 0,
+              shape: RoundedRectangleBorder(
+                side: BorderSide(color: Theme.of(context).colorScheme.outline),
+                borderRadius: const BorderRadius.all(Radius.circular(12)),
+              ),
+              child: const SizedBox(
+                width: 300,
+                height: 100,
+                child: Center(child: Text('Outlined Card')),
+              ),
+            ),
+            const Divider(height: 30),
+
+            const Text(
+              'Badges',
+              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+            ),
+            const SizedBox(height: 10),
+            Row(
+              children: [
+                Badge(
+                  label: const Text('3'),
+                  child: IconButton(
+                    icon: const Icon(Icons.notifications),
+                    onPressed: () {},
+                  ),
+                ),
+                const SizedBox(width: 20),
+                Badge(
+                  child: IconButton(
+                    icon: const Icon(Icons.email),
+                    onPressed: () {},
+                  ),
+                ),
+              ],
+            ),
+            const Divider(height: 30),
+
+            const Text(
+              'Progress',
+              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+            ),
+            const SizedBox(height: 10),
+            const LinearProgressIndicator(),
+            const SizedBox(height: 20),
+            const Row(
+              children: [
+                CircularProgressIndicator(),
+                SizedBox(width: 20),
+                CircularProgressIndicator(value: 0.5),
+              ],
+            ),
+            const Divider(height: 30),
+
+            const Text(
+              'Tooltips',
+              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+            ),
+            const SizedBox(height: 10),
+            Tooltip(
+              message: 'This is a tooltip',
+              child: ElevatedButton(
+                onPressed: () {},
+                child: const Text('Hover Me'),
+              ),
+            ),
+
+            const Divider(height: 30),
+
+            ElevatedButton(
+              onPressed: () {
+                ScaffoldMessenger.of(context).showSnackBar(
+                  SnackBar(
+                    content: const Text('This is a SnackBar'),
+                    action: SnackBarAction(label: 'UNDO', onPressed: () {}),
+                  ),
+                );
+              },
+              child: const Text('Show SnackBar'),
+            ),
+            const SizedBox(height: 10),
+            ElevatedButton(
+              onPressed: () {
+                ScaffoldMessenger.of(context).showMaterialBanner(
+                  const MaterialBanner(
+                    content: Text('This is a Banner'),
+                    actions: [
+                      TextButton(onPressed: null, child: Text('DISMISS')),
+                    ],
+                  ),
+                );
+              },
+              child: const Text('Show Banner (Mock)'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/examples/material_display_demo/pubspec.yaml b/examples/material_display_demo/pubspec.yaml
new file mode 100644
index 00000000..86f6541a
--- /dev/null
+++ b/examples/material_display_demo/pubspec.yaml
@@ -0,0 +1,15 @@
+name: material_display_demo
+description: "Demo of Material Display Widgets"
+publish_to: 'none'
+version: 1.0.0+1
+environment:
+  sdk: ^3.10.0-278.0.dev
+dependencies:
+  flutter:
+    sdk: flutter
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  flutter_lints: ^6.0.0
+flutter:
+  uses-material-design: true
diff --git a/examples/material_display_demo/web/index.html b/examples/material_display_demo/web/index.html
new file mode 100644
index 00000000..24e311bc
--- /dev/null
+++ b/examples/material_display_demo/web/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <base href="$FLUTTER_BASE_HREF">
+    <meta charset="UTF-8">
+    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+    <title>Display Demo</title>
+    <script src="flutter_bootstrap.js" async></script>
+</head>
+
+<body>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/material_inputs_demo/lib/main.dart b/examples/material_inputs_demo/lib/main.dart
new file mode 100644
index 00000000..25d9a804
--- /dev/null
+++ b/examples/material_inputs_demo/lib/main.dart
@@ -0,0 +1,110 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const InputsDemoApp());
+}
+
+class InputsDemoApp extends StatelessWidget {
+  const InputsDemoApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Inputs Demo',
+      theme: ThemeData(useMaterial3: true, colorSchemeSeed: Colors.orange),
+      home: const InputsPage(),
+    );
+  }
+}
+
+class InputsPage extends StatefulWidget {
+  const InputsPage({super.key});
+
+  @override
+  State<InputsPage> createState() => _InputsPageState();
+}
+
+class _InputsPageState extends State<InputsPage> {
+  bool _isChecked = false;
+  bool _isSwitchOn = true;
+  double _sliderValue = 0.5;
+  int _radioVal = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Inputs')),
+      body: SingleChildScrollView(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          children: [
+            const TextField(
+              decoration: InputDecoration(
+                labelText: 'Standard TextField',
+                border: OutlineInputBorder(),
+              ),
+            ),
+            const SizedBox(height: 16),
+            const TextField(
+              obscureText: true,
+              decoration: InputDecoration(
+                labelText: 'Password',
+                border: UnderlineInputBorder(),
+                icon: Icon(Icons.lock),
+              ),
+            ),
+            const SizedBox(height: 16),
+            Row(
+              children: [
+                Checkbox(
+                  value: _isChecked,
+                  onChanged: (v) => setState(() => _isChecked = v!),
+                ),
+                const Text('Checkbox'),
+              ],
+            ),
+            SwitchListTile(
+              title: const Text('Switch Tile'),
+              value: _isSwitchOn,
+              onChanged: (v) => setState(() => _isSwitchOn = v),
+            ),
+            const Divider(),
+            RadioListTile(
+              title: const Text('Option A'),
+              value: 0,
+              groupValue: _radioVal,
+              onChanged: (v) => setState(() => _radioVal = v!),
+            ),
+            RadioListTile(
+              title: const Text('Option B'),
+              value: 1,
+              groupValue: _radioVal,
+              onChanged: (v) => setState(() => _radioVal = v!),
+            ),
+            const Divider(),
+            const Text('Slider'),
+            Slider(
+              value: _sliderValue,
+              onChanged: (v) => setState(() => _sliderValue = v),
+              label: '$_sliderValue',
+              divisions: 10,
+            ),
+            const SizedBox(height: 20),
+            OutlinedButton(
+              onPressed: () async {
+                final TimeOfDay? time = await showTimePicker(
+                  context: context,
+                  initialTime: TimeOfDay.now(),
+                );
+                if (time != null) {
+                  print('picked time: $time');
+                }
+              },
+              child: const Text('Pick Time'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/examples/material_inputs_demo/pubspec.yaml b/examples/material_inputs_demo/pubspec.yaml
new file mode 100644
index 00000000..5e1e51f8
--- /dev/null
+++ b/examples/material_inputs_demo/pubspec.yaml
@@ -0,0 +1,15 @@
+name: material_inputs_demo
+description: "Demo of Material Inputs"
+publish_to: 'none'
+version: 1.0.0+1
+environment:
+  sdk: ^3.10.0-278.0.dev
+dependencies:
+  flutter:
+    sdk: flutter
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  flutter_lints: ^6.0.0
+flutter:
+  uses-material-design: true
diff --git a/examples/material_inputs_demo/web/index.html b/examples/material_inputs_demo/web/index.html
new file mode 100644
index 00000000..44c17823
--- /dev/null
+++ b/examples/material_inputs_demo/web/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <base href="$FLUTTER_BASE_HREF">
+    <meta charset="UTF-8">
+    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+    <title>Inputs Demo</title>
+    <script src="flutter_bootstrap.js" async></script>
+</head>
+
+<body>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/material_navigation_demo/lib/main.dart b/examples/material_navigation_demo/lib/main.dart
new file mode 100644
index 00000000..b8860df4
--- /dev/null
+++ b/examples/material_navigation_demo/lib/main.dart
@@ -0,0 +1,120 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const NavigationDemoApp());
+}
+
+class NavigationDemoApp extends StatelessWidget {
+  const NavigationDemoApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Navigation Demo',
+      theme: ThemeData(useMaterial3: true, colorSchemeSeed: Colors.green),
+      home: const NavigationHome(),
+    );
+  }
+}
+
+class NavigationHome extends StatefulWidget {
+  const NavigationHome({super.key});
+
+  @override
+  State<NavigationHome> createState() => _NavigationHomeState();
+}
+
+class _NavigationHomeState extends State<NavigationHome> {
+  int _screenIndex = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    // Responsive Navigation strategy
+    // Narrow < 600: NavigationBar (Bottom)
+    // Wide >= 600: NavigationRail (Left)
+
+    // For manual testing we will just show NavigationBar example first
+
+    return Scaffold(
+      appBar: AppBar(title: const Text('Navigation')),
+      drawer: NavigationDrawer(
+        children: const [
+          DrawerHeader(child: Text('Drawer Header')),
+          NavigationDrawerDestination(
+            icon: Icon(Icons.home),
+            label: Text('Home'),
+          ),
+          NavigationDrawerDestination(
+            icon: Icon(Icons.settings),
+            label: Text('Settings'),
+          ),
+        ],
+      ),
+      body: Row(
+        children: [
+          // Show Rail only if screen is wide (simulated)
+          // NavigationRail(
+          //   destinations: const [
+          //      NavigationRailDestination(icon: Icon(Icons.home), label: Text('Home')),
+          //      NavigationRailDestination(icon: Icon(Icons.star), label: Text('Favorites')),
+          //   ],
+          //   selectedIndex: _screenIndex,
+          //   onDestinationSelected: (val) => setState(() => _screenIndex = val),
+          // ),
+          // Vertical Divider
+          Expanded(
+            child: Center(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Text('Selected Index: $_screenIndex'),
+                  const SizedBox(height: 20),
+                  const Text('Tabs Demo:'),
+                  const SizedBox(height: 10),
+                  const SizedBox(
+                    height: 200,
+                    child: DefaultTabController(
+                      length: 3,
+                      child: Column(
+                        children: [
+                          TabBar(
+                            tabs: [
+                              Tab(icon: Icon(Icons.cloud), text: 'Cloud'),
+                              Tab(
+                                icon: Icon(Icons.beach_access),
+                                text: 'Beach',
+                              ),
+                              Tab(icon: Icon(Icons.sunny), text: 'Sunny'),
+                            ],
+                          ),
+                          Expanded(
+                            child: TabBarView(
+                              children: [
+                                Center(child: Text('Cloudy')),
+                                Center(child: Text('Rainy')),
+                                Center(child: Text('Sunny')),
+                              ],
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+      bottomNavigationBar: NavigationBar(
+        selectedIndex: _screenIndex,
+        onDestinationSelected: (val) => setState(() => _screenIndex = val),
+        destinations: const [
+          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
+          NavigationDestination(icon: Icon(Icons.explore), label: 'Explore'),
+          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
+        ],
+      ),
+    );
+  }
+}
diff --git a/examples/material_navigation_demo/pubspec.yaml b/examples/material_navigation_demo/pubspec.yaml
new file mode 100644
index 00000000..6f439a41
--- /dev/null
+++ b/examples/material_navigation_demo/pubspec.yaml
@@ -0,0 +1,15 @@
+name: material_navigation_demo
+description: "Demo of Material Navigation"
+publish_to: 'none'
+version: 1.0.0+1
+environment:
+  sdk: ^3.10.0-278.0.dev
+dependencies:
+  flutter:
+    sdk: flutter
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  flutter_lints: ^6.0.0
+flutter:
+  uses-material-design: true
diff --git a/examples/material_navigation_demo/web/index.html b/examples/material_navigation_demo/web/index.html
new file mode 100644
index 00000000..282c9a8e
--- /dev/null
+++ b/examples/material_navigation_demo/web/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <base href="$FLUTTER_BASE_HREF">
+    <meta charset="UTF-8">
+    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+    <title>Navigation Demo</title>
+    <script src="flutter_bootstrap.js" async></script>
+</head>
+
+<body>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/material_structure_demo/lib/main.dart b/examples/material_structure_demo/lib/main.dart
new file mode 100644
index 00000000..742212bb
--- /dev/null
+++ b/examples/material_structure_demo/lib/main.dart
@@ -0,0 +1,140 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const StructureDemoApp());
+}
+
+class StructureDemoApp extends StatelessWidget {
+  const StructureDemoApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Structure Demo',
+      theme: ThemeData(useMaterial3: true, colorSchemeSeed: Colors.indigo),
+      home: const StructurePage(),
+    );
+  }
+}
+
+class StructurePage extends StatefulWidget {
+  const StructurePage({super.key});
+
+  @override
+  State<StructurePage> createState() => _StructurePageState();
+}
+
+class _StructurePageState extends State<StructurePage> {
+  final List<bool> _expanded = [false, false];
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Structure & Layout')),
+      body: SingleChildScrollView(
+        child: Column(
+          children: [
+            const ListTile(
+              leading: Icon(Icons.info),
+              title: Text('Standard List Tile'),
+              subtitle: Text('Supporting text'),
+              trailing: Icon(Icons.chevron_right),
+            ),
+            const Divider(),
+
+            ExpansionPanelList(
+              expansionCallback: (int index, bool isExpanded) {
+                setState(() {
+                  _expanded[index] =
+                      isExpanded; // API difference: isExpanded is new state in recent Flutter, check your impl
+                });
+              },
+              children: [
+                ExpansionPanel(
+                  headerBuilder: (c, e) =>
+                      const ListTile(title: Text('Panel 1')),
+                  body: const Padding(
+                    padding: EdgeInsets.all(16),
+                    child: Text('Body 1'),
+                  ),
+                  isExpanded: _expanded[0],
+                ),
+                ExpansionPanel(
+                  headerBuilder: (c, e) =>
+                      const ListTile(title: Text('Panel 2')),
+                  body: const Padding(
+                    padding: EdgeInsets.all(16),
+                    child: Text('Body 2'),
+                  ),
+                  isExpanded: _expanded[1],
+                ),
+              ],
+            ),
+            const Divider(height: 30),
+
+            const Text(
+              'DataTable',
+              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+            ),
+            DataTable(
+              columns: const [
+                DataColumn(label: Text('Name')),
+                DataColumn(label: Text('Role')),
+              ],
+              rows: const [
+                DataRow(
+                  cells: [DataCell(Text('Alice')), DataCell(Text('Engineer'))],
+                ),
+                DataRow(
+                  cells: [DataCell(Text('Bob')), DataCell(Text('Designer'))],
+                ),
+              ],
+            ),
+            const Divider(height: 30),
+
+            GridView.count(
+              shrinkWrap: true, // For demo inside ScrollView
+              physics: const NeverScrollableScrollPhysics(),
+              crossAxisCount: 2,
+              children: [
+                GridTile(
+                  header: const GridTileBar(
+                    title: Text('Header'),
+                    backgroundColor: Colors.black45,
+                  ),
+                  footer: const GridTileBar(
+                    title: Text('Footer'),
+                    backgroundColor: Colors.black45,
+                  ),
+                  child: Container(color: Colors.amber, height: 100),
+                ),
+                Container(color: Colors.cyan, height: 100),
+              ],
+            ),
+
+            const SizedBox(height: 20),
+            ElevatedButton(
+              onPressed: () {
+                showModalBottomSheet(
+                  context: context,
+                  builder: (c) => Container(
+                    height: 200,
+                    color: Colors.white,
+                    child: Center(
+                      child: ElevatedButton(
+                        onPressed: () => Navigator.pop(c),
+                        child: const Text('Close BottomSheet'),
+                      ),
+                    ),
+                  ),
+                );
+              },
+              child: const Text('Show BottomSheet'),
+            ),
+            const SizedBox(height: 20),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/examples/material_structure_demo/pubspec.yaml b/examples/material_structure_demo/pubspec.yaml
new file mode 100644
index 00000000..7eac2519
--- /dev/null
+++ b/examples/material_structure_demo/pubspec.yaml
@@ -0,0 +1,15 @@
+name: material_structure_demo
+description: "Demo of Material Structure Widgets"
+publish_to: 'none'
+version: 1.0.0+1
+environment:
+  sdk: ^3.10.0-278.0.dev
+dependencies:
+  flutter:
+    sdk: flutter
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  flutter_lints: ^6.0.0
+flutter:
+  uses-material-design: true
diff --git a/examples/material_structure_demo/web/index.html b/examples/material_structure_demo/web/index.html
new file mode 100644
index 00000000..b65e811e
--- /dev/null
+++ b/examples/material_structure_demo/web/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <base href="$FLUTTER_BASE_HREF">
+    <meta charset="UTF-8">
+    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+    <title>Structure Demo</title>
+    <script src="flutter_bootstrap.js" async></script>
+</head>
+
+<body>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/multi_file_test/.gitignore b/examples/multi_file_test/.gitignore
new file mode 100644
index 00000000..1776e0ce
--- /dev/null
+++ b/examples/multi_file_test/.gitignore
@@ -0,0 +1,56 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+.swiftpm/
+migrate_working_dir/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# VS Code
+.vscode/
+
+# Flutter/Dart/Pub related
+**/doc/api/
+**/ios/Flutter/.last_build_id
+.dart_tool/
+.flutter-plugins
+.flutter-plugins-dependencies
+.pub-cache/
+.pub/
+/coverage/
+
+# FlutterJS Generated Artifacts - ✅ NEW
+build/
+.dev/
+dist/
+node_modules/
+flutterjs.config.js
+package.json
+package-lock.json
+public/index.html
+
+# Generated JS files in source (if any)
+src/**/*.js
+!src/**/*.dart
+
+# Symbolication related
+app.*.symbols
+
+# Obfuscation related
+app.*.map.json
+
+# Android Studio will place build artifacts here
+/android/app/debug
+/android/app/profile
+/android/app/release
diff --git a/examples/multi_file_test/.metadata b/examples/multi_file_test/.metadata
new file mode 100644
index 00000000..1f2b3cb9
--- /dev/null
+++ b/examples/multi_file_test/.metadata
@@ -0,0 +1,45 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled and should not be manually edited.
+
+version:
+  revision: "e74c5954502f51a5cb2089320767dfab8f611168"
+  channel: "master"
+
+project_type: app
+
+# Tracks metadata for the flutter migrate command
+migration:
+  platforms:
+    - platform: root
+      create_revision: e74c5954502f51a5cb2089320767dfab8f611168
+      base_revision: e74c5954502f51a5cb2089320767dfab8f611168
+    - platform: android
+      create_revision: e74c5954502f51a5cb2089320767dfab8f611168
+      base_revision: e74c5954502f51a5cb2089320767dfab8f611168
+    - platform: ios
+      create_revision: e74c5954502f51a5cb2089320767dfab8f611168
+      base_revision: e74c5954502f51a5cb2089320767dfab8f611168
+    - platform: linux
+      create_revision: e74c5954502f51a5cb2089320767dfab8f611168
+      base_revision: e74c5954502f51a5cb2089320767dfab8f611168
+    - platform: macos
+      create_revision: e74c5954502f51a5cb2089320767dfab8f611168
+      base_revision: e74c5954502f51a5cb2089320767dfab8f611168
+    - platform: web
+      create_revision: e74c5954502f51a5cb2089320767dfab8f611168
+      base_revision: e74c5954502f51a5cb2089320767dfab8f611168
+    - platform: windows
+      create_revision: e74c5954502f51a5cb2089320767dfab8f611168
+      base_revision: e74c5954502f51a5cb2089320767dfab8f611168
+
+  # User provided section
+
+  # List of Local paths (relative to this file) that should be
+  # ignored by the migrate tool.
+  #
+  # Files that are not part of the templates will be ignored by default.
+  unmanaged_files:
+    - 'lib/main.dart'
+    - 'ios/Runner.xcodeproj/project.pbxproj'
diff --git a/examples/multi_file_test/README.md b/examples/multi_file_test/README.md
new file mode 100644
index 00000000..296a9cc9
--- /dev/null
+++ b/examples/multi_file_test/README.md
@@ -0,0 +1,17 @@
+# multi_file_test
+
+A new Flutter project.
+
+## Getting Started
+
+This project is a starting point for a Flutter application.
+
+A few resources to get you started if this is your first Flutter project:
+
+- [Learn Flutter](https://docs.flutter.dev/get-started/learn-flutter)
+- [Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
+- [Flutter learning resources](https://docs.flutter.dev/reference/learning-resources)
+
+For help getting started with Flutter development, view the
+[online documentation](https://docs.flutter.dev/), which offers tutorials,
+samples, guidance on mobile development, and a full API reference.
diff --git a/examples/multi_file_test/analysis_options.yaml b/examples/multi_file_test/analysis_options.yaml
new file mode 100644
index 00000000..0d290213
--- /dev/null
+++ b/examples/multi_file_test/analysis_options.yaml
@@ -0,0 +1,28 @@
+# This file configures the analyzer, which statically analyzes Dart code to
+# check for errors, warnings, and lints.
+#
+# The issues identified by the analyzer are surfaced in the UI of Dart-enabled
+# IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be
+# invoked from the command line by running `flutter analyze`.
+
+# The following line activates a set of recommended lints for Flutter apps,
+# packages, and plugins designed to encourage good coding practices.
+include: package:flutter_lints/flutter.yaml
+
+linter:
+  # The lint rules applied to this project can be customized in the
+  # section below to disable rules from the `package:flutter_lints/flutter.yaml`
+  # included above or to enable additional rules. A list of all available lints
+  # and their documentation is published at https://dart.dev/lints.
+  #
+  # Instead of disabling a lint rule for the entire project in the
+  # section below, it can also be suppressed for a single line of code
+  # or a specific dart file by using the `// ignore: name_of_lint` and
+  # `// ignore_for_file: name_of_lint` syntax on the line or in the file
+  # producing the lint.
+  rules:
+    # avoid_print: false  # Uncomment to disable the `avoid_print` rule
+    # prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule
+
+# Additional information about this file can be found at
+# https://dart.dev/guides/language/analysis-options
diff --git a/examples/multi_file_test/lib/main.dart b/examples/multi_file_test/lib/main.dart
index 868fd728..a98e2d1d 100644
--- a/examples/multi_file_test/lib/main.dart
+++ b/examples/multi_file_test/lib/main.dart
@@ -30,7 +30,7 @@ class MyApp extends StatelessWidget {
           color: Colors.grey.shade100,
           child: Column(
             children: [
-               UtilsWidget(), // Usage ensures import is kept
+              UtilsWidget(), // Usage ensures import is kept
               Expanded(
                 child: ListView.builder(
                   itemCount: users.length,
diff --git a/examples/multi_file_test/lib/widgets/user_profile_card.dart b/examples/multi_file_test/lib/widgets/user_profile_card.dart
index fcd87b3c..0ea21e31 100644
--- a/examples/multi_file_test/lib/widgets/user_profile_card.dart
+++ b/examples/multi_file_test/lib/widgets/user_profile_card.dart
@@ -15,14 +15,17 @@ class _UserProfileCardState extends State<UserProfileCard> {
   bool _isFollowing = false;
 
   void _toggleFollow() {
+    print('Callback: _toggleFollow called. IsFollowing BEFORE: $_isFollowing');
     setState(() {
       _isFollowing = !_isFollowing;
+      print('Callback: Inside setState. IsFollowing NOW: $_isFollowing');
     });
-    print('Follow status for ${widget.user.name}: $_isFollowing');
+    // print('Follow status for ${widget.user.name}: $_isFollowing');
   }
 
   @override
   Widget build(BuildContext context) {
+    print('Build: UserProfileCard build. IsFollowing: $_isFollowing');
     return Container(
       margin: const EdgeInsets.all(10),
       padding: const EdgeInsets.all(16),
diff --git a/examples/multi_file_test/pubspec.yaml b/examples/multi_file_test/pubspec.yaml
index b26f95e5..d6d5c950 100644
--- a/examples/multi_file_test/pubspec.yaml
+++ b/examples/multi_file_test/pubspec.yaml
@@ -33,9 +33,9 @@ dependencies:
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
-  cupertino_icons: ^1.0.8
-  provider:
-  http:
+  # cupertino_icons: ^1.0.8
+  # provider:
+  # http:
 
 dev_dependencies:
   flutter_test:
diff --git a/examples/multi_file_test/web/favicon.png b/examples/multi_file_test/web/favicon.png
new file mode 100644
index 00000000..8aaa46ac
Binary files /dev/null and b/examples/multi_file_test/web/favicon.png differ
diff --git a/examples/multi_file_test/web/icons/Icon-192.png b/examples/multi_file_test/web/icons/Icon-192.png
new file mode 100644
index 00000000..b749bfef
Binary files /dev/null and b/examples/multi_file_test/web/icons/Icon-192.png differ
diff --git a/examples/multi_file_test/web/icons/Icon-512.png b/examples/multi_file_test/web/icons/Icon-512.png
new file mode 100644
index 00000000..88cfd48d
Binary files /dev/null and b/examples/multi_file_test/web/icons/Icon-512.png differ
diff --git a/examples/multi_file_test/web/icons/Icon-maskable-192.png b/examples/multi_file_test/web/icons/Icon-maskable-192.png
new file mode 100644
index 00000000..eb9b4d76
Binary files /dev/null and b/examples/multi_file_test/web/icons/Icon-maskable-192.png differ
diff --git a/examples/multi_file_test/web/icons/Icon-maskable-512.png b/examples/multi_file_test/web/icons/Icon-maskable-512.png
new file mode 100644
index 00000000..d69c5669
Binary files /dev/null and b/examples/multi_file_test/web/icons/Icon-maskable-512.png differ
diff --git a/examples/multi_file_test/web/index.html b/examples/multi_file_test/web/index.html
index ac626721..1e3dfe51 100644
--- a/examples/multi_file_test/web/index.html
+++ b/examples/multi_file_test/web/index.html
@@ -1,10 +1,46 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <!--
+    If you are serving your web app in a path other than the root, change the
+    href value below to reflect the base path you are serving from.
+
+    The path provided below has to start and end with a slash "/" in order for
+    it to work correctly.
+
+    For more details:
+    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+
+    This is a placeholder for base href that will be replaced by the value of
+    the `--base-href` argument provided to `flutter build`.
+  -->
+  <base href="$FLUTTER_BASE_HREF">
+
   <meta charset="UTF-8">
-  <title>Multi File Test</title>
-  <script type="module" src="main.dart.js"></script>
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="A new Flutter project.">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="multi_file_test">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/png" href="favicon.png"/>
+
+  <title>multi_file_test</title>
+  <link rel="manifest" href="manifest.json">
 </head>
 <body>
+  <!--
+    You can customize the "flutter_bootstrap.js" script.
+    This is useful to provide a custom configuration to the Flutter loader
+    or to give the user feedback during the initialization process.
+
+    For more details:
+    * https://docs.flutter.dev/platform-integration/web/initialization
+  -->
+  <script src="flutter_bootstrap.js" async></script>
 </body>
 </html>
diff --git a/examples/multi_file_test/web/manifest.json b/examples/multi_file_test/web/manifest.json
new file mode 100644
index 00000000..fd41efd1
--- /dev/null
+++ b/examples/multi_file_test/web/manifest.json
@@ -0,0 +1,35 @@
+{
+    "name": "multi_file_test",
+    "short_name": "multi_file_test",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#0175C2",
+    "theme_color": "#0175C2",
+    "description": "A new Flutter project.",
+    "orientation": "portrait-primary",
+    "prefer_related_applications": false,
+    "icons": [
+        {
+            "src": "icons/Icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-maskable-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "icons/Icon-maskable-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}
diff --git a/examples/routing_app/.gitignore b/examples/routing_app/.gitignore
index 53158823..1776e0ce 100644
--- a/examples/routing_app/.gitignore
+++ b/examples/routing_app/.gitignore
@@ -1,25 +1,56 @@
-# Dependencies
-node_modules/
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+.swiftpm/
+migrate_working_dir/
 
-# Build outputs
-dist/
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# VS Code
+.vscode/
+
+# Flutter/Dart/Pub related
+**/doc/api/
+**/ios/Flutter/.last_build_id
+.dart_tool/
+.flutter-plugins
+.flutter-plugins-dependencies
+.pub-cache/
+.pub/
+/coverage/
+
+# FlutterJS Generated Artifacts - ✅ NEW
+build/
 .dev/
-.debug/
+dist/
+node_modules/
+flutterjs.config.js
+package.json
+package-lock.json
+public/index.html
 
-# Generated files
-.flutter_js/
-.cache/
+# Generated JS files in source (if any)
+src/**/*.js
+!src/**/*.dart
 
-# OS files
-.DS_Store
-Thumbs.db
+# Symbolication related
+app.*.symbols
 
-# IDE
-.vscode/
-.idea/
-*.swp
-*.swo
+# Obfuscation related
+app.*.map.json
 
-# Logs
-*.log
-npm-debug.log*
+# Android Studio will place build artifacts here
+/android/app/debug
+/android/app/profile
+/android/app/release
diff --git a/examples/routing_app/debug_main.txt b/examples/routing_app/debug_main.txt
new file mode 100644
index 00000000..ddc96949
--- /dev/null
+++ b/examples/routing_app/debug_main.txt
@@ -0,0 +1,4 @@
+DEBUG: BIN MAIN START
+DEBUG: Parsed args. Creating runner...
+DEBUG: Runner created
+DEBUG: Calling runner.run(args)...
diff --git a/examples/routing_app/debug_output.txt b/examples/routing_app/debug_output.txt
deleted file mode 100644
index 4ebf2837..00000000
Binary files a/examples/routing_app/debug_output.txt and /dev/null differ
diff --git a/examples/routing_app/debug_runcheck.txt b/examples/routing_app/debug_runcheck.txt
new file mode 100644
index 00000000..20d26d71
--- /dev/null
+++ b/examples/routing_app/debug_runcheck.txt
@@ -0,0 +1,3 @@
+DEBUG: RunCommand.run START
+DEBUG: RunCommand parsed config
+DEBUG: RunCommand starting setup_phase
diff --git a/examples/routing_app/lib/main.dart b/examples/routing_app/lib/main.dart
index 2292c9d3..9a5baf7a 100644
--- a/examples/routing_app/lib/main.dart
+++ b/examples/routing_app/lib/main.dart
@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-
 void main() {
   runApp(const RoutingApp());
 }
@@ -26,6 +25,7 @@ class HomeScreen extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+
     return Scaffold(
       backgroundColor: Colors.blue,
 
diff --git a/examples/routing_app/package.json b/examples/routing_app/package.json
deleted file mode 100644
index 492c1a91..00000000
--- a/examples/routing_app/package.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-    "name": "routing_app",
-    "version": "1.0.0",
-    "private": true,
-    "scripts": {
-        "dev": "flutterjs dev",
-        "build": "flutterjs build"
-    },
-    "dependencies": {
-        "@flutterjs/material": "file:../../packages/flutterjs_engine/package/material",
-        "@flutterjs/runtime": "file:../../packages/flutterjs_engine/src/runtime"
-    },
-    "devDependencies": {
-        "flutterjs": "file:../../packages/flutterjs_engine"
-    }
-}
\ No newline at end of file
diff --git a/examples/routing_app/pubspec.yaml b/examples/routing_app/pubspec.yaml
index b9562f7f..08be6be8 100644
--- a/examples/routing_app/pubspec.yaml
+++ b/examples/routing_app/pubspec.yaml
@@ -19,9 +19,9 @@ dependencies:
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
-  cupertino_icons: ^1.0.8
-  provider:
-  http:
+  # cupertino_icons: ^1.0.8
+  # provider:
+  # http:
 
 dev_dependencies:
   flutter_test:
diff --git a/flutterjs b/flutterjs
deleted file mode 100644
index 67f166f2..00000000
--- a/flutterjs
+++ /dev/null
@@ -1,2 +0,0 @@
-#!/bin/bash
-dart run bin/flutterjs.dart "$@"
diff --git a/flutterjs.ps1 b/flutterjs.ps1
deleted file mode 100644
index 4197f663..00000000
--- a/flutterjs.ps1
+++ /dev/null
@@ -1,2 +0,0 @@
-$args = $MyInvocation.BoundParameters.Values + $args
-dart run bin/flutterjs.dart @args
diff --git a/packages/flutterjs_analyzer/.gitignore b/packages/dart_analyzer/.gitignore
similarity index 100%
rename from packages/flutterjs_analyzer/.gitignore
rename to packages/dart_analyzer/.gitignore
diff --git a/packages/flutterjs_analyzer/CHANGELOG.md b/packages/dart_analyzer/CHANGELOG.md
similarity index 100%
rename from packages/flutterjs_analyzer/CHANGELOG.md
rename to packages/dart_analyzer/CHANGELOG.md
diff --git a/packages/flutterjs_analyzer/README.md b/packages/dart_analyzer/README.md
similarity index 100%
rename from packages/flutterjs_analyzer/README.md
rename to packages/dart_analyzer/README.md
diff --git a/packages/flutterjs_analyzer/analysis_options.yaml b/packages/dart_analyzer/analysis_options.yaml
similarity index 100%
rename from packages/flutterjs_analyzer/analysis_options.yaml
rename to packages/dart_analyzer/analysis_options.yaml
diff --git a/packages/flutterjs_analyzer/docs/README.md b/packages/dart_analyzer/docs/README.md
similarity index 100%
rename from packages/flutterjs_analyzer/docs/README.md
rename to packages/dart_analyzer/docs/README.md
diff --git a/packages/flutterjs_analyzer/docs/analying_project.md b/packages/dart_analyzer/docs/analying_project.md
similarity index 100%
rename from packages/flutterjs_analyzer/docs/analying_project.md
rename to packages/dart_analyzer/docs/analying_project.md
diff --git a/packages/flutterjs_analyzer/docs/dependency_graph.md b/packages/dart_analyzer/docs/dependency_graph.md
similarity index 100%
rename from packages/flutterjs_analyzer/docs/dependency_graph.md
rename to packages/dart_analyzer/docs/dependency_graph.md
diff --git a/packages/flutterjs_analyzer/docs/dependency_resolver.md b/packages/dart_analyzer/docs/dependency_resolver.md
similarity index 100%
rename from packages/flutterjs_analyzer/docs/dependency_resolver.md
rename to packages/dart_analyzer/docs/dependency_resolver.md
diff --git a/packages/flutterjs_analyzer/docs/flutter_app_ir.md b/packages/dart_analyzer/docs/flutter_app_ir.md
similarity index 100%
rename from packages/flutterjs_analyzer/docs/flutter_app_ir.md
rename to packages/dart_analyzer/docs/flutter_app_ir.md
diff --git a/packages/flutterjs_analyzer/lib/flutterjs_analyzer.dart b/packages/dart_analyzer/lib/dart_analyzer.dart
similarity index 100%
rename from packages/flutterjs_analyzer/lib/flutterjs_analyzer.dart
rename to packages/dart_analyzer/lib/dart_analyzer.dart
diff --git a/packages/flutterjs_analyzer/lib/src/TypeDeclarationVisitor.dart b/packages/dart_analyzer/lib/src/TypeDeclarationVisitor.dart
similarity index 100%
rename from packages/flutterjs_analyzer/lib/src/TypeDeclarationVisitor.dart
rename to packages/dart_analyzer/lib/src/TypeDeclarationVisitor.dart
diff --git a/packages/flutterjs_analyzer/lib/src/analying_project.dart b/packages/dart_analyzer/lib/src/analying_project.dart
similarity index 98%
rename from packages/flutterjs_analyzer/lib/src/analying_project.dart
rename to packages/dart_analyzer/lib/src/analying_project.dart
index 52f1a0ad..cc9c9654 100644
--- a/packages/flutterjs_analyzer/lib/src/analying_project.dart
+++ b/packages/dart_analyzer/lib/src/analying_project.dart
@@ -16,7 +16,7 @@ import 'dependency_resolver.dart';
 import 'type_registry.dart';
 import 'dart:async';
 import 'package:analyzer/dart/ast/ast.dart';
-import 'package:flutterjs_dev_tools/dev_tools.dart'; // ADD THIS
+import 'package:flutterjs_dev_tools/dev_tools.dart';
 
 /// Advanced multi-pass project analyzer
 class ProjectAnalyzer {
@@ -69,6 +69,7 @@ class ProjectAnalyzer {
 
   /// Initialize the analyzer with dependency resolution
   Future<void> initialize() async {
+    print('DEBUG: ProjectAnalyzer.initialize START');
     return await debugger.observe('analyzer_initialization', () async {
       debugger.log(
         DebugLevel.info,
@@ -77,14 +78,17 @@ class ProjectAnalyzer {
       );
 
       try {
+        print('DEBUG: ProjectAnalyzer.initialize: validating structure');
         // Validate project structure
         await _validateProjectStructure();
 
+        print('DEBUG: ProjectAnalyzer.initialize: initializing output dirs');
         // Initialize build and output directories
         if (generateOutputFiles) {
           await _initializeOutputDirectories();
         }
 
+        print('DEBUG: ProjectAnalyzer.initialize: creating context collection');
         // Initialize analysis context
         final libPath = path.normalize(
           path.absolute(path.join(projectPath, 'lib')),
@@ -99,6 +103,7 @@ class ProjectAnalyzer {
           category: 'analyzer',
         );
 
+        print('DEBUG: ProjectAnalyzer.initialize: creating resolver');
         // Initialize components
         _dependencyResolver = DependencyResolver(
           projectPath,
@@ -106,12 +111,14 @@ class ProjectAnalyzer {
         );
         _typeRegistry = TypeRegistry();
 
+        print('DEBUG: ProjectAnalyzer.initialize DONE');
         debugger.log(
           DebugLevel.info,
           'Initialization complete',
           category: 'analyzer',
         );
       } catch (e, stackTrace) {
+        print('DEBUG: ProjectAnalyzer.initialize ERROR: $e');
         debugger.log(
           DebugLevel.error,
           'Failed to initialize analyzer: $e\n$stackTrace',
diff --git a/packages/flutterjs_analyzer/lib/src/analysis_output_generator.dart b/packages/dart_analyzer/lib/src/analysis_output_generator.dart
similarity index 100%
rename from packages/flutterjs_analyzer/lib/src/analysis_output_generator.dart
rename to packages/dart_analyzer/lib/src/analysis_output_generator.dart
diff --git a/packages/flutterjs_analyzer/lib/src/analyze_flutter_app.dart b/packages/dart_analyzer/lib/src/analyze_flutter_app.dart
similarity index 100%
rename from packages/flutterjs_analyzer/lib/src/analyze_flutter_app.dart
rename to packages/dart_analyzer/lib/src/analyze_flutter_app.dart
diff --git a/packages/flutterjs_analyzer/lib/src/dependency_graph.dart b/packages/dart_analyzer/lib/src/dependency_graph.dart
similarity index 100%
rename from packages/flutterjs_analyzer/lib/src/dependency_graph.dart
rename to packages/dart_analyzer/lib/src/dependency_graph.dart
diff --git a/packages/flutterjs_analyzer/lib/src/dependency_resolver.dart b/packages/dart_analyzer/lib/src/dependency_resolver.dart
similarity index 100%
rename from packages/flutterjs_analyzer/lib/src/dependency_resolver.dart
rename to packages/dart_analyzer/lib/src/dependency_resolver.dart
diff --git a/packages/flutterjs_analyzer/lib/src/incremental_cache.dart b/packages/dart_analyzer/lib/src/incremental_cache.dart
similarity index 100%
rename from packages/flutterjs_analyzer/lib/src/incremental_cache.dart
rename to packages/dart_analyzer/lib/src/incremental_cache.dart
diff --git a/packages/flutterjs_analyzer/lib/src/ir_linker.dart b/packages/dart_analyzer/lib/src/ir_linker.dart
similarity index 100%
rename from packages/flutterjs_analyzer/lib/src/ir_linker.dart
rename to packages/dart_analyzer/lib/src/ir_linker.dart
diff --git a/packages/flutterjs_analyzer/lib/src/model/analyzer_model.dart b/packages/dart_analyzer/lib/src/model/analyzer_model.dart
similarity index 100%
rename from packages/flutterjs_analyzer/lib/src/model/analyzer_model.dart
rename to packages/dart_analyzer/lib/src/model/analyzer_model.dart
diff --git a/packages/flutterjs_analyzer/lib/src/model/core.dart b/packages/dart_analyzer/lib/src/model/core.dart
similarity index 100%
rename from packages/flutterjs_analyzer/lib/src/model/core.dart
rename to packages/dart_analyzer/lib/src/model/core.dart
diff --git a/packages/flutterjs_analyzer/lib/src/model/other.dart b/packages/dart_analyzer/lib/src/model/other.dart
similarity index 100%
rename from packages/flutterjs_analyzer/lib/src/model/other.dart
rename to packages/dart_analyzer/lib/src/model/other.dart
diff --git a/packages/flutterjs_analyzer/lib/src/model/state.dart b/packages/dart_analyzer/lib/src/model/state.dart
similarity index 100%
rename from packages/flutterjs_analyzer/lib/src/model/state.dart
rename to packages/dart_analyzer/lib/src/model/state.dart
diff --git a/packages/flutterjs_analyzer/lib/src/model/widget.dart b/packages/dart_analyzer/lib/src/model/widget.dart
similarity index 100%
rename from packages/flutterjs_analyzer/lib/src/model/widget.dart
rename to packages/dart_analyzer/lib/src/model/widget.dart
diff --git a/packages/flutterjs_analyzer/lib/src/type_registry.dart b/packages/dart_analyzer/lib/src/type_registry.dart
similarity index 100%
rename from packages/flutterjs_analyzer/lib/src/type_registry.dart
rename to packages/dart_analyzer/lib/src/type_registry.dart
diff --git a/packages/dart_analyzer/pubspec.yaml b/packages/dart_analyzer/pubspec.yaml
new file mode 100644
index 00000000..9c7cad66
--- /dev/null
+++ b/packages/dart_analyzer/pubspec.yaml
@@ -0,0 +1,20 @@
+name: dart_analyzer
+description: A sample command-line application.
+version: 1.0.0
+resolution: workspace
+# repository: https://github.com/my_org/my_repo
+
+environment:
+  sdk: ^3.10.0-278.0.dev
+
+# Add regular dependencies here.
+dependencies:
+  path: ^1.9.0
+  analyzer: 
+  flutterjs_dev_tools: any
+
+
+
+dev_dependencies:
+  lints: ^6.0.0
+  test: ^1.25.6
diff --git a/packages/flutterjs_analyzer/test/flutterjs_analyzer_test.dart b/packages/dart_analyzer/test/flutterjs_analyzer_test.dart
similarity index 100%
rename from packages/flutterjs_analyzer/test/flutterjs_analyzer_test.dart
rename to packages/dart_analyzer/test/flutterjs_analyzer_test.dart
diff --git a/packages/flutterjs_engine/src/analyzer/build.js b/packages/flutterjs_analyzer/flutterjs_analyzer/build.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/build.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/build.js
diff --git a/packages/flutterjs_engine/src/analyzer/dist/analyzer.js b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/analyzer.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/dist/analyzer.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/dist/analyzer.js
diff --git a/packages/flutterjs_analyzer/flutterjs_analyzer/dist/analyzer.js.map b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/analyzer.js.map
new file mode 100644
index 00000000..ddec0623
--- /dev/null
+++ b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/analyzer.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/analyzer.js"],
+  "sourcesContent": ["/**\r\n * FlutterJS Analyzer - Main Orchestrator (FIXED Logger Integration)\r\n * Properly integrates centralized logging system\r\n */\r\n\r\nimport fs from 'fs';\r\nimport { Lexer } from './lexer.js';\r\nimport { Parser } from './flutterjs_parser.js';\r\nimport { WidgetAnalyzer } from './flutterjs_widget_analyzer.js';\r\nimport { StateAnalyzer } from './state_analyzer_implementation.js';\r\nimport { ContextAnalyzer } from './context_analyzer.js';\r\nimport { SSRAnalyzer } from './ssr_analyzer.js';\r\nimport { ReportGenerator } from './flutterjs_report_generator.js';\r\nimport { ImportResolver } from './flutter_import_resolver.js';\r\nimport { resolverConfig } from './flutter_resolver_config.js';\r\nimport { initLogger, getLogger } from './flutterjs_logger.js';\r\n\r\n// ============================================================================\r\n// MAIN ANALYZER CLASS\r\n// ============================================================================\r\n\r\nclass Analyzer {\r\n  constructor(options = {}) {\r\n    this.options = {\r\n      sourceFile: null,\r\n      sourceCode: null,\r\n      outputFormat: 'json',\r\n      outputFile: null,\r\n      verbose: true,\r\n      strict: false,\r\n      projectRoot: process.cwd(),\r\n      includeMetrics: true,\r\n      includeTree: true,\r\n      includeValidation: true,\r\n      includeSuggestions: true,\r\n      includeContext: true,\r\n      includeSsr: true,\r\n      includeImports: true,\r\n      ignoreUnresolvedImports: true,\r\n      prettyPrint: true,\r\n      debugLevel: 'info',  // NEW: Add debug level option\r\n      ...options,\r\n    };\r\n\r\n    // FIXED: Properly initialize logger\r\n    this.logger = initLogger({\r\n      level: this.options.debugLevel,\r\n      writeToFile: true,\r\n      writeToConsole: false,\r\n      debugDir: '.debug',\r\n    });\r\n\r\n    const loggerInstance = this.logger.createComponentLogger('Analyzer');\r\n    this.log = loggerInstance;  // Store logger instance\r\n\r\n    // Initialize import resolver\r\n    this.importResolver = new ImportResolver({\r\n      projectRoot: this.options.projectRoot,\r\n      ignoreUnresolved: this.options.ignoreUnresolvedImports,\r\n      ...resolverConfig,\r\n    });\r\n\r\n    this.results = {\r\n      source: null,\r\n      tokens: null,\r\n      ast: null,\r\n      widgets: null,\r\n      importResolution: null,\r\n      state: null,\r\n      context: null,\r\n      ssr: null,\r\n      report: null,\r\n    };\r\n\r\n    this.errors = [];\r\n    this.timings = {};\r\n  }\r\n\r\n  /**\r\n   * Main entry point - run full analysis pipeline\r\n   */\r\n  async analyze() {\r\n    const logger = this.log;\r\n\r\n    logger.startSession('FullAnalyzerPipeline');\r\n\r\n    try {\r\n      logger.info('\\n' + '='.repeat(80));\r\n      logger.info('\uD83D\uDE80 FlutterJS ANALYZER - FULL PIPELINE');\r\n      logger.info('='.repeat(80));\r\n\r\n      // Step 1: Load source code\r\n      logger.startSession('LoadSource');\r\n      logger.info('STEP 1: Loading source code...');\r\n      await this.loadSource();\r\n      logger.success('Source loaded');\r\n      logger.endSession('LoadSource');\r\n\r\n      // Step 2: Lexing\r\n      logger.startSession('Lexing');\r\n      logger.info('STEP 2: Tokenizing (Lexing)...');\r\n      this.lex();\r\n      logger.trace('Tokens generated', this.results.tokens.length);\r\n      logger.success('Lexing complete');\r\n      logger.endSession('Lexing');\r\n\r\n      // Step 3: Parsing\r\n      logger.startSession('Parsing');\r\n      logger.info('STEP 3: Building AST (Parsing)...');\r\n      this.parse();\r\n      logger.trace('Top-level items', this.results.ast.body.length);\r\n      logger.success('Parsing complete');\r\n      logger.endSession('Parsing');\r\n\r\n      // Step 4: Widget Analysis (Phase 1)\r\n      logger.startSession('WidgetAnalysis');\r\n      logger.info('STEP 4: Widget Analysis (Phase 1)...');\r\n      this.analyzeWidgets();\r\n      logger.trace('Widgets detected', this.results.widgets.widgets.length);\r\n      logger.success('Widget analysis complete');\r\n      logger.endSession('WidgetAnalysis');\r\n\r\n      // Step 5: Import Resolution\r\n      if (this.options.includeImports) {\r\n        logger.startSession('ImportResolution');\r\n        logger.info('STEP 5: Resolving Imports...');\r\n        this.analyzeImports();\r\n        const summary = this.results.importResolution?.summary;\r\n        logger.trace('Imports resolved', summary?.resolved || 0);\r\n        logger.trace('Imports unresolved', summary?.unresolved || 0);\r\n        logger.success('Import resolution complete');\r\n        logger.endSession('ImportResolution');\r\n      }\r\n\r\n      // Step 6: State Analysis (Phase 2)\r\n      logger.startSession('StateAnalysis');\r\n      logger.info('STEP 6: State Analysis (Phase 2)...');\r\n      this.analyzeState();\r\n      logger.trace('State classes analyzed', this.results.state.stateClasses.length);\r\n      logger.success('State analysis complete');\r\n      logger.endSession('StateAnalysis');\r\n\r\n      // Step 7: Context Analysis (Phase 3)\r\n      if (this.options.includeContext) {\r\n        logger.startSession('ContextAnalysis');\r\n        logger.info('STEP 7: Context Analysis (Phase 3)...');\r\n        this.analyzeContext();\r\n        logger.trace('Inherited widgets detected', this.results.context.inheritedWidgets?.length || 0);\r\n        logger.success('Context analysis complete');\r\n        logger.endSession('ContextAnalysis');\r\n      }\r\n\r\n      // Step 8: SSR Analysis (Phase 3)\r\n      if (this.options.includeSsr) {\r\n        logger.startSession('SSRAnalysis');\r\n        logger.info('STEP 8: SSR Compatibility Analysis (Phase 3)...');\r\n        this.analyzeSsr();\r\n        logger.trace('SSR Compatibility Score', this.results.ssr.ssrCompatibilityScore);\r\n        logger.success('SSR analysis complete');\r\n        logger.endSession('SSRAnalysis');\r\n      }\r\n\r\n      // Step 9: Report Generation\r\n      logger.startSession('ReportGeneration');\r\n      logger.info('STEP 9: Generating Report...');\r\n      this.generateReport();\r\n      logger.success('Report generated');\r\n      logger.endSession('ReportGeneration');\r\n\r\n      // Step 10: Output\r\n      logger.startSession('Output');\r\n      logger.info('STEP 10: Output...');\r\n      this.output();\r\n      logger.success('Output complete');\r\n      logger.endSession('Output');\r\n\r\n      logger.info('='.repeat(80));\r\n      logger.success('\u2705 ANALYSIS COMPLETE');\r\n      logger.info('='.repeat(80) + '\\n');\r\n\r\n      // Save logs to files\r\n      this.logger.saveLogs();\r\n\r\n      return this.getResults();\r\n    } catch (error) {\r\n      logger.error('ANALYSIS FAILED');\r\n      logger.failure('Analysis pipeline', error.message);\r\n      logger.endSession('FullAnalyzerPipeline');\r\n      throw error;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Step 5: Resolve all imports\r\n   */\r\n  // In analyzer.js analyzeImports()\r\n  analyzeImports() {\r\n    const start = Date.now();\r\n    const logger = this.log;\r\n\r\n    try {\r\n      if (!this.results.source) {\r\n        logger.warn('No source code found, skipping import analysis');\r\n        return;\r\n      }\r\n\r\n      logger.info('Processing imports from AST (parsed in Step 3)...');\r\n\r\n      // \u2705 Use widget analyzer's already-extracted imports\r\n      const parsedImports = this.results.widgets?.imports || [];\r\n\r\n      if (logger) {\r\n        logger.info(`Found ${parsedImports.length} import statements`);\r\n        parsedImports.forEach((imp, idx) => {\r\n          logger.debug(`  \uD83D\uDCCD ${imp.source} \u2192 [${imp.items.join(', ')}]`);\r\n        });\r\n      }\r\n\r\n      // \u2705 Now use ImportResolver only for RESOLUTION\r\n      // (finding where modules actually are)\r\n      const resolution = this.importResolver.resolveImports(parsedImports);\r\n\r\n      this.results.importResolution = {\r\n        imports: resolution.imports,\r\n        summary: resolution.summary,\r\n        parsed: parsedImports, // From AST parsing\r\n      };\r\n\r\n      // Log statistics\r\n      logger.info(`Resolved: ${resolution.summary.resolved}`);\r\n      logger.info(`Unresolved: ${resolution.summary.unresolved}`);\r\n      logger.debug(`Framework packages: ${resolution.summary.bySource.framework}`);\r\n      logger.debug(`Local imports: ${resolution.summary.bySource.local}`);\r\n\r\n      // Check for errors\r\n      if (!this.options.ignoreUnresolvedImports &&\r\n        resolution.imports.errors.length > 0) {\r\n        throw new Error(\r\n          `${resolution.imports.errors.length} imports could not be resolved`\r\n        );\r\n      }\r\n    } catch (error) {\r\n      logger.error(`Import resolution failed: ${error.message}`);\r\n      throw new Error(`Import resolution failed: ${error.message}`);\r\n    }\r\n\r\n    this.timings.analyzeImports = Date.now() - start;\r\n  }\r\n\r\n  /**\r\n   * Step 1: Load source code from file or use provided code\r\n   */\r\n  async loadSource() {\r\n    const start = Date.now();\r\n    const logger = this.log;\r\n\r\n    if (this.options.sourceCode) {\r\n      this.results.source = this.options.sourceCode;\r\n      logger.debug('Using provided source code');\r\n    } else if (this.options.sourceFile) {\r\n      try {\r\n        this.results.source = fs.readFileSync(this.options.sourceFile, 'utf-8');\r\n        logger.debug(`Loaded from file: ${this.options.sourceFile}`);\r\n        logger.trace('Source file size', this.results.source.length);\r\n      } catch (error) {\r\n        logger.error(`Cannot read file \"${this.options.sourceFile}\"`);\r\n        throw new Error(`Cannot read file \"${this.options.sourceFile}\": ${error.message}`);\r\n      }\r\n    } else {\r\n      logger.error('No source code or source file provided');\r\n      throw new Error('No source code or source file provided');\r\n    }\r\n\r\n    this.timings.loadSource = Date.now() - start;\r\n  }\r\n\r\n  /**\r\n   * Step 2: Lex source code into tokens\r\n   */\r\n  lex() {\r\n    const start = Date.now();\r\n    const logger = this.log;\r\n\r\n    try {\r\n      const lexer = new Lexer(this.results.source);\r\n      this.results.tokens = lexer.tokenize();\r\n\r\n      if (lexer.getErrors().length > 0) {\r\n        logger.warn(`Lexer produced ${lexer.getErrors().length} warnings`);\r\n        lexer.getErrors().forEach((err) => {\r\n          logger.debug(`Lexer: ${err.message}`);\r\n        });\r\n      }\r\n    } catch (error) {\r\n      logger.error(`Lexing failed: ${error.message}`);\r\n      throw new Error(`Lexing failed: ${error.message}`);\r\n    }\r\n\r\n    this.timings.lex = Date.now() - start;\r\n  }\r\n\r\n  /**\r\n   * Step 3: Parse tokens into AST\r\n   */\r\n  parse() {\r\n    const start = Date.now();\r\n    const logger = this.log;\r\n\r\n    try {\r\n      const parser = new Parser(this.results.tokens);\r\n      this.results.ast = parser.parse();\r\n\r\n      if (parser.getErrors().length > 0) {\r\n        logger.warn(`Parser produced ${parser.getErrors().length} errors`);\r\n        parser.getErrors().forEach((err) => {\r\n          logger.debug(`Parser: ${err.message}`);\r\n        });\r\n\r\n        if (this.options.strict) {\r\n          throw new Error(`${parser.getErrors().length} parser errors found`);\r\n        }\r\n      }\r\n    } catch (error) {\r\n      logger.error(`Parsing failed: ${error.message}`);\r\n      throw new Error(`Parsing failed: ${error.message}`);\r\n    }\r\n\r\n    this.timings.parse = Date.now() - start;\r\n  }\r\n\r\n  /**\r\n   * Step 4: Analyze widgets (Phase 1)\r\n   */\r\n  analyzeWidgets() {\r\n    const start = Date.now();\r\n    const logger = this.log;\r\n\r\n    try {\r\n      const analyzer = new WidgetAnalyzer(this.results.ast);\r\n      this.results.widgets = analyzer.analyze();\r\n\r\n      if (this.results.widgets.errors.length > 0) {\r\n        logger.warn(`Widget analysis produced ${this.results.widgets.errors.length} errors`);\r\n        this.results.widgets.errors.forEach((err) => {\r\n          logger.debug(`Widget: ${err.message}`);\r\n        });\r\n      }\r\n    } catch (error) {\r\n      logger.error(`Widget analysis failed: ${error.message}`);\r\n      throw new Error(`Widget analysis failed: ${error.message}`);\r\n    }\r\n\r\n    this.timings.analyzeWidgets = Date.now() - start;\r\n  }\r\n\r\n  /**\r\n   * Step 6: Analyze state (Phase 2)\r\n   */\r\n  analyzeState() {\r\n    const start = Date.now();\r\n    const logger = this.log;\r\n\r\n    try {\r\n      const analyzer = new StateAnalyzer(\r\n        this.results.ast,\r\n        this.results.widgets.widgets,\r\n        { strict: this.options.strict }\r\n      );\r\n      this.results.state = analyzer.analyze();\r\n\r\n      if (this.results.state.errors.length > 0) {\r\n        logger.warn(`State analysis produced ${this.results.state.errors.length} errors`);\r\n        this.results.state.errors.forEach((err) => {\r\n          logger.debug(`State: ${err.message}`);\r\n        });\r\n      }\r\n    } catch (error) {\r\n      logger.error(`State analysis failed: ${error.message}`);\r\n      throw new Error(`State analysis failed: ${error.message}`);\r\n    }\r\n\r\n    this.timings.analyzeState = Date.now() - start;\r\n  }\r\n\r\n  /**\r\n   * Step 7: Analyze context (Phase 3)\r\n   */\r\n  analyzeContext() {\r\n    const start = Date.now();\r\n    const logger = this.log;\r\n\r\n    try {\r\n      const analyzer = new ContextAnalyzer(\r\n        this.results.ast,\r\n        this.results.widgets.widgets,\r\n        { strict: this.options.strict }\r\n      );\r\n      this.results.context = analyzer.analyze();\r\n\r\n      if (this.results.context.errors && this.results.context.errors.length > 0) {\r\n        logger.warn(`Context analysis produced ${this.results.context.errors.length} errors`);\r\n        this.results.context.errors.forEach((err) => {\r\n          logger.debug(`Context: ${err.message}`);\r\n        });\r\n      }\r\n    } catch (error) {\r\n      logger.error(`Context analysis failed: ${error.message}`);\r\n      throw new Error(`Context analysis failed: ${error.message}`);\r\n    }\r\n\r\n    this.timings.analyzeContext = Date.now() - start;\r\n  }\r\n\r\n  /**\r\n   * Step 8: Analyze SSR compatibility (Phase 3)\r\n   */\r\n  analyzeSsr() {\r\n    const start = Date.now();\r\n    const logger = this.log;\r\n\r\n    try {\r\n      const analyzer = new SSRAnalyzer(\r\n        this.results.context,\r\n        this.results.state,\r\n        { strict: this.options.strict }\r\n      );\r\n      this.results.ssr = analyzer.analyze();\r\n\r\n      if (this.results.ssr.errors && this.results.ssr.errors.length > 0) {\r\n        logger.warn(`SSR analysis produced ${this.results.ssr.errors.length} errors`);\r\n        this.results.ssr.errors.forEach((err) => {\r\n          logger.debug(`SSR: ${err.message}`);\r\n        });\r\n      }\r\n    } catch (error) {\r\n      logger.error(`SSR analysis failed: ${error.message}`);\r\n      throw new Error(`SSR analysis failed: ${error.message}`);\r\n    }\r\n\r\n    this.timings.analyzeSsr = Date.now() - start;\r\n  }\r\n\r\n  /**\r\n   * Step 9: Generate report\r\n   */\r\n  generateReport() {\r\n    const start = Date.now();\r\n    const logger = this.log;\r\n\r\n    try {\r\n      const generator = new ReportGenerator(\r\n        this.results.widgets,\r\n        this.results.state,\r\n        this.results.context,\r\n        this.results.ssr,\r\n        {\r\n          format: this.options.outputFormat,\r\n          includeMetrics: this.options.includeMetrics,\r\n          includeTree: this.options.includeTree,\r\n          includeValidation: this.options.includeValidation,\r\n          includeSuggestions: this.options.includeSuggestions,\r\n          includeContext: this.options.includeContext,\r\n          includeSsr: this.options.includeSsr,\r\n          prettyPrint: this.options.prettyPrint,\r\n        }\r\n      );\r\n\r\n      this.results.report = generator.generate();\r\n    } catch (error) {\r\n      logger.error(`Report generation failed: ${error.message}`);\r\n      throw new Error(`Report generation failed: ${error.message}`);\r\n    }\r\n\r\n    this.timings.generateReport = Date.now() - start;\r\n  }\r\n\r\n  /**\r\n   * Step 10: Output report (console or file)\r\n   */\r\n  output() {\r\n    const logger = this.log;\r\n\r\n    if (this.options.outputFile) {\r\n      try {\r\n        fs.writeFileSync(this.options.outputFile, this.results.report, 'utf-8');\r\n        logger.success(`Report saved to: ${this.options.outputFile}`);\r\n      } catch (error) {\r\n        logger.error(`Cannot write to file \"${this.options.outputFile}\"`);\r\n        throw new Error(`Cannot write to file \"${this.options.outputFile}\": ${error.message}`);\r\n      }\r\n    } else {\r\n      // Only print report to console if not verbose logging\r\n      if (this.options.outputFormat !== 'console') {\r\n        console.log(this.results.report);\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get analysis results - FIXED: Include logger info\r\n   */\r\n  /**\r\n  * FIXED: getResults() method in analyzer.js\r\n  * Now uses importResolution.parsed instead of widgets.imports\r\n  */\r\n\r\n  getResults() {\r\n    // Extract widget arrays by type\r\n    const allWidgets = this.results.widgets?.widgets || [];\r\n    const statelessWidgets = allWidgets.filter((w) => w.type === 'stateless');\r\n    const statefulWidgets = allWidgets.filter((w) => w.type === 'stateful');\r\n    const stateWidgets = allWidgets.filter((w) => w.type === 'state');\r\n\r\n    // Extract widget names as arrays\r\n    const statelessNames = statelessWidgets.map((w) => w.name);\r\n    const statefulNames = statefulWidgets.map((w) => w.name);\r\n\r\n    // Build state classes mapping: StatefulWidget -> State class\r\n    const stateClasses = {};\r\n    stateWidgets.forEach((stateWidget) => {\r\n      // Convention: _MyHomePageState -> MyHomePage\r\n      const widgetName = stateWidget.name.replace(/^_/, '').replace(/State$/, '');\r\n      const stateFields = stateWidget.fields || [];\r\n      stateClasses[stateWidget.name] = stateFields.map((f) => f.name);\r\n    });\r\n\r\n    // Also map by StatefulWidget name if we have linking info\r\n    statefulWidgets.forEach((statefulWidget) => {\r\n      const expectedStateName = `_${statefulWidget.name}State`;\r\n      if (stateClasses[expectedStateName]) {\r\n        // Create mapping for easy lookup\r\n        stateClasses[statefulWidget.name] = stateClasses[expectedStateName];\r\n      }\r\n    });\r\n\r\n    // \u2705 FIXED: Get imports from importResolution.parsed (multi-line support)\r\n    // This now correctly parses ALL imports (single & multi-line)\r\n    const parsedImports = this.results.importResolution?.parsed || [];\r\n\r\n    // Build imports object: { source: [items] }\r\n    const importsObj = {};\r\n    parsedImports.forEach(imp => {\r\n      importsObj[imp.source] = imp.items;\r\n    });\r\n\r\n    return {\r\n      source: {\r\n        length: this.results.source?.length || 0,\r\n        file: this.options.sourceFile,\r\n      },\r\n      tokens: {\r\n        count: this.results.tokens?.length || 0,\r\n      },\r\n      ast: {\r\n        items: this.results.ast?.body?.length || 0,\r\n      },\r\n      // FIXED: Return actual widget names and full widget objects\r\n      widgets: {\r\n        // Arrays of widget names for easy access\r\n        stateless: statelessNames,\r\n        stateful: statefulNames,\r\n        count: allWidgets.length,\r\n\r\n        // Full widget objects for detailed analysis\r\n        all: allWidgets,\r\n\r\n        // State class mappings\r\n        stateClasses: stateClasses,\r\n\r\n        // Metadata\r\n        total: {\r\n          stateless: statelessWidgets.length,\r\n          stateful: statefulWidgets.length,\r\n          state: stateWidgets.length,\r\n        },\r\n      },\r\n\r\n      // \u2705 FIXED: Return ALL imports from source parsing (not just widgets.imports)\r\n      // Now includes both single-line and multi-line imports\r\n      imports: this.options.includeImports ? importsObj : null,\r\n\r\n      // \u2705 FIXED: Return full import resolution details\r\n      importResolution: this.options.includeImports ? {\r\n        parsed: parsedImports,\r\n        summary: this.results.importResolution?.summary || {\r\n          total: parsedImports.length,\r\n          resolved: this.results.importResolution?.summary?.resolved || 0,\r\n          unresolved: this.results.importResolution?.summary?.unresolved || 0,\r\n          errors: this.results.importResolution?.summary?.errors || 0,\r\n          resolutionRate: this.results.importResolution?.summary?.resolutionRate || 'N/A',\r\n          bySource: this.results.importResolution?.summary?.bySource || {\r\n            framework: 0,\r\n            local: 0,\r\n            cache: 0,\r\n          },\r\n        },\r\n      } : null,\r\n\r\n      state: {\r\n        stateClasses: this.results.state?.stateClasses?.length || 0,\r\n        stateFields: this.results.state?.stateFields?.length || 0,\r\n        setStateCalls: this.results.state?.setStateCalls?.length || 0,\r\n        lifecycleMethods: this.results.state?.lifecycleMethods?.length || 0,\r\n        eventHandlers: this.results.state?.eventHandlers?.length || 0,\r\n        validationIssues: this.results.state?.validationResults?.length || 0,\r\n      },\r\n\r\n      context: this.options.includeContext\r\n        ? {\r\n          inheritedWidgets: this.results.context?.inheritedWidgets?.length || 0,\r\n          changeNotifiers: this.results.context?.changeNotifiers?.length || 0,\r\n          providers: this.results.context?.providers?.length || 0,\r\n          contextAccessPoints: this.results.context?.contextAccessPoints?.length || 0,\r\n        }\r\n        : null,\r\n\r\n      ssr: this.options.includeSsr\r\n        ? {\r\n          compatibility: this.results.ssr?.overallCompatibility || 'unknown',\r\n          compatibilityScore: this.results.ssr?.ssrCompatibilityScore || 0,\r\n          safePatterns: this.results.ssr?.ssrSafePatterns?.length || 0,\r\n          unsafePatterns: this.results.ssr?.ssrUnsafePatterns?.length || 0,\r\n          hydrationNeeded: this.results.ssr?.hydrationCount || 0,\r\n          migrationSteps: this.results.ssr?.ssrMigrationPath?.length || 0,\r\n          estimatedEffort: this.results.ssr?.estimatedEffort || 'unknown',\r\n        }\r\n        : null,\r\n\r\n      timings: this.timings,\r\n      report: this.results.report,\r\n      logger: this.logger.getReport(),\r\n      debugFiles: this.logger.readDebugFiles(),\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// STATIC HELPER METHODS\r\n// ============================================================================\r\n\r\nasync function analyzeCode(sourceCode, options = {}) {\r\n  const analyzer = new Analyzer({\r\n    sourceCode,\r\n    ...options,\r\n  });\r\n\r\n  return analyzer.analyze();\r\n}\r\n\r\nasync function analyzeFile(sourceFile, options = {}) {\r\n  const analyzer = new Analyzer({\r\n    sourceFile,\r\n    ...options,\r\n  });\r\n\r\n  return analyzer.analyze();\r\n}\r\n\r\nasync function analyzeAndSave(sourceFile, outputFile, options = {}) {\r\n  const analyzer = new Analyzer({\r\n    sourceFile,\r\n    outputFile,\r\n    ...options,\r\n  });\r\n\r\n  return analyzer.analyze();\r\n}\r\n\r\n// ============================================================================\r\n// CLI INTERFACE\r\n// ============================================================================\r\n\r\nasync function runCLI() {\r\n  const args = process.argv.slice(2);\r\n\r\n  if (args.length === 0) {\r\n    printUsage();\r\n    process.exit(0);\r\n  }\r\n\r\n  const sourceFile = args[0];\r\n  let outputFile = null;\r\n  let outputFormat = 'json';\r\n  let verbose = true;\r\n  let includeImports = true;\r\n  let includeContext = true;\r\n  let includeSsr = true;\r\n  let debugLevel = 'info';\r\n\r\n  for (let i = 1; i < args.length; i++) {\r\n    const arg = args[i];\r\n\r\n    if (arg === '-o' || arg === '--output') {\r\n      outputFile = args[++i];\r\n    } else if (arg === '-f' || arg === '--format') {\r\n      outputFormat = args[++i];\r\n    } else if (arg === '-q' || arg === '--quiet') {\r\n      verbose = false;\r\n    } else if (arg === '--debug') {\r\n      debugLevel = args[++i] || 'debug';\r\n    } else if (arg === '--no-imports') {\r\n      includeImports = false;\r\n    } else if (arg === '--no-context') {\r\n      includeContext = false;\r\n    } else if (arg === '--no-ssr') {\r\n      includeSsr = false;\r\n    } else if (arg === '--phase1') {\r\n      includeImports = false;\r\n      includeContext = false;\r\n      includeSsr = false;\r\n    } else if (arg === '-h' || arg === '--help') {\r\n      printUsage();\r\n      process.exit(0);\r\n    }\r\n  }\r\n\r\n  if (!['json', 'markdown', 'console'].includes(outputFormat)) {\r\n    console.error(`Invalid format: ${outputFormat}`);\r\n    process.exit(1);\r\n  }\r\n\r\n  try {\r\n    const analyzer = new Analyzer({\r\n      sourceFile,\r\n      outputFile,\r\n      outputFormat,\r\n      verbose,\r\n      includeImports,\r\n      includeContext,\r\n      includeSsr,\r\n      debugLevel,\r\n    });\r\n\r\n    const results = await analyzer.analyze();\r\n\r\n    // Show debug info location\r\n    if (debugLevel !== 'info') {\r\n      console.log('\\n\uD83D\uDCCA Debug logs saved to: .debug/');\r\n      console.log('   View with: node debug_viewer.js\\n');\r\n    }\r\n\r\n    process.exit(0);\r\n  } catch (error) {\r\n    console.error(`\\n\u274C Error: ${error.message}\\n`);\r\n    process.exit(1);\r\n  }\r\n}\r\n\r\nfunction printUsage() {\r\n  console.log(`\r\nFlutterJS Analyzer (Phase 1 + Import Resolution + Phase 2 + 3)\r\n\r\nUsage:\r\n  node analyzer.js <source-file> [options]\r\n\r\nOptions:\r\n  -o, --output <file>      Output file (default: print to console)\r\n  -f, --format <format>    Output format: json, markdown, console (default: json)\r\n  -q, --quiet              Suppress verbose output\r\n  --debug <level>          Enable debug logging: trace, debug, info (default: info)\r\n  --no-imports             Skip import resolution\r\n  --no-context             Skip Phase 3 context analysis\r\n  --no-ssr                 Skip Phase 3 SSR analysis\r\n  --phase1                 Only Phase 1 (widgets + imports)\r\n  -h, --help               Show this help message\r\n\r\nExamples:\r\n  node analyzer.js test.fjs\r\n  node analyzer.js test.fjs -o report.json\r\n  node analyzer.js test.fjs --debug trace\r\n  node analyzer.js test.fjs -f markdown\r\n  node analyzer.js test.fjs --phase1\r\n`);\r\n}\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport {\r\n  Analyzer,\r\n  analyzeCode,\r\n  analyzeFile,\r\n  analyzeAndSave,\r\n  runCLI,\r\n};\r\n\r\n// ============================================================================\r\n// CLI EXECUTION\r\n// ============================================================================\r\n\r\nif (import.meta.url === `file://${process.argv[1]}`) {\r\n  runCLI();\r\n}"],
+  "mappings": "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",
+  "names": ["fs", "Lexer", "Parser", "WidgetAnalyzer", "StateAnalyzer", "ContextAnalyzer", "SSRAnalyzer", "ReportGenerator", "ImportResolver", "resolverConfig", "initLogger", "Analyzer", "options", "loggerInstance", "logger", "summary", "error", "start", "parsedImports", "imp", "idx", "resolution", "lexer", "err", "parser", "analyzer", "generator", "allWidgets", "statelessWidgets", "w", "statefulWidgets", "stateWidgets", "statelessNames", "statefulNames", "stateClasses", "stateWidget", "widgetName", "stateFields", "f", "statefulWidget", "expectedStateName", "importsObj", "analyzeCode", "sourceCode", "analyzeFile", "sourceFile", "analyzeAndSave", "outputFile", "runCLI", "args", "printUsage", "outputFormat", "verbose", "includeImports", "includeContext", "includeSsr", "debugLevel", "i", "arg", "results"]
+}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/context_analyzer.js b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/context_analyzer.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/dist/context_analyzer.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/dist/context_analyzer.js
diff --git a/packages/flutterjs_analyzer/flutterjs_analyzer/dist/context_analyzer.js.map b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/context_analyzer.js.map
new file mode 100644
index 00000000..4b88c7dd
--- /dev/null
+++ b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/context_analyzer.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/context_analyzer.js"],
+  "sourcesContent": ["/**\r\n * FlutterJS Context Analyzer - Phase 3\r\n * Detects InheritedWidget, Provider, BuildContext usage patterns\r\n * Analyzes context flow and SSR compatibility\r\n * \r\n * Phase 3 focuses on: Context detection, Provider patterns, SSR analysis\r\n * Does NOT implement actual context providers (that's Phase 4+)\r\n */\r\nimport { getLogger } from './flutterjs_logger.js';\r\n\r\nimport {  InheritedWidgetMetadata,\r\n  ChangeNotifierAnalysis,\r\n  ProviderAnalysis,\r\n  ContextUsagePattern, } from  './context_analyzer_data.js';\r\nclass ContextAnalyzer {\r\n  constructor(ast, widgets = [], options = {}) {\r\n    this.ast = ast;\r\n    this.widgets = widgets;\r\n     this.logger = getLogger().createComponentLogger('ContextAnalyzer');\r\n    this.options = {\r\n      strict: false,\r\n      ...options,\r\n    };\r\n\r\n    // Results storage\r\n    this.inheritedWidgets = new Map();     // name -> InheritedWidgetMetadata\r\n    this.changeNotifiers = new Map();      // name -> ChangeNotifierAnalysis\r\n    this.providers = new Map();            // type -> ProviderAnalysis\r\n    this.contextAccessPoints = [];         // All places context is used\r\n    this.inheritedWidgetGraph = {};        // Inheritance relationships\r\n    this.providerGraph = {};               // Provider relationships\r\n    this.errors = [];\r\n  }\r\n\r\n  /**\r\n   * Main entry point - analyze context patterns\r\n   */\r\n  analyze() {\r\n      this.logger.startSession('ContextAnalysis');\r\n    this.logger.trace('[ContextAnalyzer] Starting analysis...\\n');\r\n      this.logger.startSession('WidgetAnalyzer');\r\n     this.logger.trace('[ContextAnalyzer] Starting analysis...\\n');\r\n\r\n    try {\r\n      // Phase 1: Detect InheritedWidget classes\r\n      this.detectInheritedWidgets();\r\n       this.logger.trace(`[ContextAnalyzer] Found ${this.inheritedWidgets.size} InheritedWidgets\\n`);\r\n\r\n      // Phase 2: Detect ChangeNotifier classes\r\n      this.detectChangeNotifiers();\r\n       this.logger.trace(`[ContextAnalyzer] Found ${this.changeNotifiers.size} ChangeNotifiers\\n`);\r\n\r\n      // Phase 3: Detect Provider patterns\r\n      this.detectProviders();\r\n       this.logger.trace(`[ContextAnalyzer] Found ${this.providers.size} Providers\\n`);\r\n\r\n      // Phase 4: Find context access points\r\n      this.findContextAccessPoints();\r\n       this.logger.trace(`[ContextAnalyzer] Found ${this.contextAccessPoints.length} context usage points\\n`);\r\n\r\n      // Phase 5: Build graphs\r\n      this.buildInheritedWidgetGraph();\r\n      this.buildProviderGraph();\r\n       this.logger.trace('[ContextAnalyzer] Built dependency graphs\\n');\r\n\r\n      return this.getResults();\r\n    } catch (error) {\r\n      this.errors.push(error);\r\n      console.error('[ContextAnalyzer] Error:', error.message);\r\n      return this.getResults();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Phase 1: Detect InheritedWidget classes\r\n   * \r\n   * Looks for:\r\n   * - class MyProvider extends InheritedWidget\r\n   * - Properties: data, child\r\n   * - Methods: of(), updateShouldNotify()\r\n   */\r\n  detectInheritedWidgets() {\r\n    if (!this.ast || !this.ast.body) return;\r\n\r\n    this.ast.body.forEach((node) => {\r\n      if (node.type !== 'ClassDeclaration') return;\r\n\r\n      const className = node.id?.name;\r\n      const superClass = node.superClass?.name;\r\n\r\n      // Check if extends InheritedWidget\r\n      if (!superClass || !superClass.includes('InheritedWidget')) return;\r\n\r\n       this.logger.trace(`[ContextAnalyzer.detectInheritedWidgets] Found: ${className}`);\r\n\r\n      const metadata = new InheritedWidgetMetadata(\r\n        className,\r\n        node.location,\r\n        superClass\r\n      );\r\n\r\n      // Extract properties\r\n      if (node.body?.fields) {\r\n        node.body.fields.forEach((field) => {\r\n          const fieldName = field.key?.name;\r\n          metadata.properties.push({\r\n            name: fieldName,\r\n            type: this.inferType(field.initialValue),\r\n            required: !this.hasDefaultValue(field),\r\n          });\r\n        });\r\n      }\r\n\r\n      // Extract static accessors (of() method)\r\n      if (node.body?.methods) {\r\n        node.body.methods.forEach((method) => {\r\n          const methodName = method.key?.name;\r\n\r\n          // Check for static accessor pattern\r\n          if (methodName === 'of' && this.isStaticAccessor(method)) {\r\n            metadata.staticAccessors.push({\r\n              name: methodName,\r\n              signature: `static ${methodName}(BuildContext context)`,\r\n              usesInheritedWidgetLookup: this.checksInheritedWidgetLookup(method),\r\n              location: method.location,\r\n            });\r\n          }\r\n\r\n          // Check for updateShouldNotify\r\n          if (methodName === 'updateShouldNotify') {\r\n            metadata.updateShouldNotifyImplemented = true;\r\n          }\r\n        });\r\n      }\r\n\r\n      this.inheritedWidgets.set(className, metadata);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Check if method is static (phase 3 simplified - assumes 'of' is usually static)\r\n   */\r\n  isStaticAccessor(method) {\r\n    // In a real implementation, check for @static decorator or static keyword\r\n    return method.key?.name === 'of';\r\n  }\r\n\r\n  /**\r\n   * Check if method body contains dependOnInheritedWidgetOfExactType call\r\n   */\r\n  checksInheritedWidgetLookup(method) {\r\n    if (!method.body) return false;\r\n\r\n    const code = JSON.stringify(method.body);\r\n    return code.includes('dependOnInheritedWidgetOfExactType') ||\r\n           code.includes('inheritedWidgetOfExactType');\r\n  }\r\n\r\n  /**\r\n   * Phase 2: Detect ChangeNotifier classes\r\n   * \r\n   * Looks for:\r\n   * - class MyNotifier extends ChangeNotifier\r\n   * - Methods that call notifyListeners()\r\n   * - Properties that get/set\r\n   */\r\n  detectChangeNotifiers() {\r\n    if (!this.ast || !this.ast.body) return;\r\n\r\n    this.ast.body.forEach((node) => {\r\n      if (node.type !== 'ClassDeclaration') return;\r\n\r\n      const className = node.id?.name;\r\n      const superClass = node.superClass?.name;\r\n\r\n      // Check if extends ChangeNotifier\r\n      if (!superClass || superClass !== 'ChangeNotifier') return;\r\n\r\n       this.logger.trace(`[ContextAnalyzer.detectChangeNotifiers] Found: ${className}`);\r\n\r\n      const analysis = new ChangeNotifierAnalysis(\r\n        className,\r\n        node.location\r\n      );\r\n\r\n      // Extract properties\r\n      if (node.body?.fields) {\r\n        node.body.fields.forEach((field) => {\r\n          const fieldName = field.key?.name;\r\n          analysis.properties.push({\r\n            name: fieldName,\r\n            type: this.inferType(field.initialValue),\r\n            initialValue: this.expressionToString(field.initialValue),\r\n          });\r\n        });\r\n      }\r\n\r\n      // Extract getters, methods, and notifyListeners calls\r\n      if (node.body?.methods) {\r\n        node.body.methods.forEach((method) => {\r\n          const methodName = method.key?.name;\r\n\r\n          // Check for getter pattern (get count => _count)\r\n          if (methodName && !method.params?.length && method.body) {\r\n            const isGetter = JSON.stringify(method).includes('return');\r\n            if (isGetter) {\r\n              analysis.getters.push({\r\n                name: methodName,\r\n                returnType: this.inferReturnType(method.body),\r\n                location: method.location,\r\n              });\r\n            }\r\n          }\r\n\r\n          // Check for notifyListeners call\r\n          const callsNotify = this.callsNotifyListeners(method.body);\r\n          if (callsNotify || methodName === 'increment' || methodName === 'decrement') {\r\n            const mutations = this.extractMutationsInMethod(method.body);\r\n            analysis.methods.push({\r\n              name: methodName,\r\n              callsNotifyListeners: callsNotify,\r\n              location: method.location,\r\n              mutations: mutations,\r\n            });\r\n          }\r\n        });\r\n      }\r\n\r\n      this.changeNotifiers.set(className, analysis);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Check if method calls notifyListeners()\r\n   */\r\n  callsNotifyListeners(body) {\r\n    if (!body) return false;\r\n    const code = JSON.stringify(body);\r\n    return code.includes('notifyListeners');\r\n  }\r\n\r\n  /**\r\n   * Extract field mutations in method (this._field = x, this._field++, etc.)\r\n   */\r\n  extractMutationsInMethod(body) {\r\n    const mutations = [];\r\n    if (!body) return mutations;\r\n\r\n    const code = JSON.stringify(body);\r\n    \r\n    // Simple pattern matching for mutations\r\n    const patterns = [\r\n      /this\\._(\\w+)\\s*[=+\\-*]/g,  // this._field = or +=, -=, etc.\r\n      /this\\.(\\w+)\\s*[=+\\-*]/g,   // this.field = or +=, -=, etc.\r\n    ];\r\n\r\n    patterns.forEach((pattern) => {\r\n      let match;\r\n      while ((match = pattern.exec(code)) !== null) {\r\n        mutations.push(match[1]);\r\n      }\r\n    });\r\n\r\n    return [...new Set(mutations)]; // Remove duplicates\r\n  }\r\n\r\n  /**\r\n   * Phase 3: Detect Provider<T> patterns\r\n   * \r\n   * Looks for:\r\n   * - Provider<CounterNotifier>(create: ..., child: ...)\r\n   * - Detects consumer patterns: context.watch(), context.read()\r\n   */\r\n  detectProviders() {\r\n    if (!this.ast || !this.ast.body) return;\r\n\r\n    this.ast.body.forEach((node) => {\r\n      if (node.type === 'ClassDeclaration') {\r\n        // Check if class contains Provider creation in build()\r\n        const buildMethod = node.body?.methods?.find((m) => m.key?.name === 'build');\r\n        if (buildMethod) {\r\n          this.findProvidersInMethod(buildMethod, node);\r\n        }\r\n      }\r\n\r\n      // Also check in function bodies\r\n      if (node.type === 'FunctionDeclaration') {\r\n        this.findProvidersInMethod(node, null);\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Find Provider instantiations in a method\r\n   */\r\n  findProvidersInMethod(method, classNode) {\r\n    if (!method.body) return;\r\n\r\n    const body = method.body.type === 'BlockStatement' ? method.body.body : [method.body];\r\n\r\n    body.forEach((stmt) => {\r\n      this.findProvidersInStatement(stmt);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Recursively find Provider patterns in statements\r\n   */\r\n  findProvidersInStatement(stmt) {\r\n    if (!stmt) return;\r\n\r\n    if (stmt.type === 'ExpressionStatement' && stmt.expression) {\r\n      this.findProvidersInExpression(stmt.expression);\r\n    }\r\n\r\n    if (stmt.type === 'ReturnStatement' && stmt.argument) {\r\n      this.findProvidersInExpression(stmt.argument);\r\n    }\r\n\r\n    if (stmt.type === 'BlockStatement' && stmt.body) {\r\n      stmt.body.forEach((s) => this.findProvidersInStatement(s));\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Find Provider patterns in expressions\r\n   * Looks for: new Provider<CounterNotifier>(...)\r\n   */\r\n  findProvidersInExpression(expr) {\r\n    if (!expr) return;\r\n\r\n    // Check for NewExpression: new Provider<T>(...)\r\n    if (expr.type === 'NewExpression') {\r\n      const calleeName = expr.callee?.name;\r\n\r\n      if (calleeName === 'Provider' || calleeName?.startsWith('Provider')) {\r\n        // Extract generic type: Provider<CounterNotifier>\r\n        const genericType = this.extractGenericType(expr);\r\n\r\n        if (genericType) {\r\n           this.logger.trace(`[ContextAnalyzer.detectProviders] Found Provider<${genericType}>`);\r\n\r\n          const analysis = new ProviderAnalysis(\r\n            `Provider<${genericType}>`,\r\n            expr.location,\r\n            genericType\r\n          );\r\n\r\n          // Extract create function\r\n          if (expr.args) {\r\n            expr.args.forEach((arg) => {\r\n              if (arg.type === 'ObjectLiteral') {\r\n                arg.properties?.forEach((prop) => {\r\n                  if (prop.key?.name === 'create') {\r\n                    analysis.createFunction = this.expressionToString(prop.value);\r\n                  }\r\n                  if (prop.key?.name === 'child') {\r\n                    // Child widget - may use this provider\r\n                  }\r\n                });\r\n              }\r\n            });\r\n          }\r\n\r\n          // Identify access patterns (watch, read, select)\r\n          this.identifyAccessPatterns(genericType, analysis);\r\n\r\n          this.providers.set(`Provider<${genericType}>`, analysis);\r\n        }\r\n      }\r\n    }\r\n\r\n    // Check call expressions\r\n    if (expr.type === 'CallExpression' && expr.args) {\r\n      expr.args.forEach((arg) => {\r\n        this.findProvidersInExpression(arg);\r\n      });\r\n    }\r\n\r\n    // Check object literals\r\n    if (expr.type === 'ObjectLiteral' && expr.properties) {\r\n      expr.properties.forEach((prop) => {\r\n        this.findProvidersInExpression(prop.value);\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Extract generic type from Provider<T>\r\n   * In simplified version, returns T or null\r\n   */\r\n  extractGenericType(expr) {\r\n    // In real implementation, parse the full generic syntax\r\n    // For now, look for the callee name pattern\r\n    const code = JSON.stringify(expr.callee);\r\n\r\n    // Simple heuristic: if it mentions Provider and contains type info\r\n    if (code.includes('Provider')) {\r\n      // Try to find type in expression string representation\r\n      const exprStr = this.expressionToString(expr.callee);\r\n      const match = exprStr.match(/Provider<(\\w+)>/);\r\n      return match ? match[1] : null;\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Identify how this provider is consumed\r\n   */\r\n  identifyAccessPatterns(providerType, analysis) {\r\n    if (!this.ast || !this.ast.body) return;\r\n\r\n    // Search for context.watch(), context.read(), context.select()\r\n    this.ast.body.forEach((node) => {\r\n      if (node.type === 'ClassDeclaration') {\r\n        const buildMethod = node.body?.methods?.find((m) => m.key?.name === 'build');\r\n        if (buildMethod) {\r\n          this.scanForAccessPatterns(buildMethod, providerType, analysis);\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Scan method for watch/read/select patterns\r\n   */\r\n  scanForAccessPatterns(method, providerType, analysis) {\r\n    if (!method.body) return;\r\n\r\n    const code = JSON.stringify(method.body);\r\n\r\n    // Check for access patterns\r\n    if (code.includes('context.watch')) {\r\n      analysis.accessPatterns.push('watch');\r\n    }\r\n    if (code.includes('context.read')) {\r\n      analysis.accessPatterns.push('read');\r\n    }\r\n    if (code.includes('context.select')) {\r\n      analysis.accessPatterns.push('select');\r\n    }\r\n\r\n    // Find consumer widgets\r\n    if (code.includes('Consumer')) {\r\n      analysis.accessPatterns.push('Consumer');\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Phase 4: Find all context access points\r\n   * \r\n   * Maps:\r\n   * - Which widgets use context\r\n   * - How they access it (context.theme(), context.mediaQuery(), etc.)\r\n   * - SSR compatibility\r\n   */\r\n  findContextAccessPoints() {\r\n    if (!this.ast || !this.ast.body) return;\r\n\r\n    this.ast.body.forEach((node) => {\r\n      if (node.type !== 'ClassDeclaration') return;\r\n\r\n      const className = node.id?.name;\r\n      const buildMethod = node.body?.methods?.find((m) => m.key?.name === 'build');\r\n\r\n      if (buildMethod) {\r\n        const usagePoints = this.extractContextUsageInMethod(buildMethod, className);\r\n        this.contextAccessPoints.push(...usagePoints);\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Extract all context.X() calls in a method\r\n   */\r\n  extractContextUsageInMethod(method, className) {\r\n    const usages = [];\r\n\r\n    if (!method.body) return usages;\r\n\r\n    const stmts = method.body.type === 'BlockStatement' ? method.body.body : [method.body];\r\n\r\n    stmts.forEach((stmt) => {\r\n      const foundUsages = this.findContextUsageInStatement(stmt, className);\r\n      usages.push(...foundUsages);\r\n    });\r\n\r\n    return usages;\r\n  }\r\n\r\n  /**\r\n   * Recursively find context usage patterns\r\n   */\r\n  findContextUsageInStatement(stmt, className) {\r\n    const usages = [];\r\n\r\n    if (!stmt) return usages;\r\n\r\n    if (stmt.type === 'ExpressionStatement' && stmt.expression) {\r\n      const stmtUsages = this.findContextUsageInExpression(stmt.expression, className);\r\n      usages.push(...stmtUsages);\r\n    }\r\n\r\n    if (stmt.type === 'ReturnStatement' && stmt.argument) {\r\n      const retUsages = this.findContextUsageInExpression(stmt.argument, className);\r\n      usages.push(...retUsages);\r\n    }\r\n\r\n    if (stmt.type === 'BlockStatement' && stmt.body) {\r\n      stmt.body.forEach((s) => {\r\n        const blockUsages = this.findContextUsageInStatement(s, className);\r\n        usages.push(...blockUsages);\r\n      });\r\n    }\r\n\r\n    return usages;\r\n  }\r\n\r\n  /**\r\n   * Find context usage in expressions\r\n   * Looks for: Theme.of(context), context.watch(), context.read(), etc.\r\n   */\r\n  findContextUsageInExpression(expr, className) {\r\n    const usages = [];\r\n\r\n    if (!expr) return usages;\r\n\r\n    const exprStr = JSON.stringify(expr);\r\n\r\n    // Pattern 1: Theme.of(context)\r\n    if (exprStr.includes('Theme.of') && exprStr.includes('context')) {\r\n      usages.push(new ContextUsagePattern(\r\n        'Theme.of(context)',\r\n        'inherited-widget-lookup',\r\n        expr.location,\r\n        'ThemeData',\r\n        true,\r\n        'Pure value access, no subscription required'\r\n      ));\r\n    }\r\n\r\n    // Pattern 2: context.theme()\r\n    if (exprStr.includes('context.theme')) {\r\n      usages.push(new ContextUsagePattern(\r\n        'context.theme()',\r\n        'context-service',\r\n        expr.location,\r\n        'ThemeData',\r\n        true,\r\n        'Service access during build'\r\n      ));\r\n    }\r\n\r\n    // Pattern 3: context.watch<T>()\r\n    if (exprStr.includes('context.watch')) {\r\n      usages.push(new ContextUsagePattern(\r\n        'context.watch<T>()',\r\n        'provider-watch',\r\n        expr.location,\r\n        'T',\r\n        false,\r\n        'Requires reactive subscription - not SSR safe'\r\n      ));\r\n    }\r\n\r\n    // Pattern 4: context.read<T>()\r\n    if (exprStr.includes('context.read')) {\r\n      usages.push(new ContextUsagePattern(\r\n        'context.read<T>()',\r\n        'provider-read',\r\n        expr.location,\r\n        'T',\r\n        true,\r\n        'Single read at render time - SSR safe'\r\n      ));\r\n    }\r\n\r\n    // Pattern 5: context.mediaQuery()\r\n    if (exprStr.includes('context.mediaQuery') || exprStr.includes('MediaQuery.of')) {\r\n      usages.push(new ContextUsagePattern(\r\n        'context.mediaQuery()',\r\n        'context-service',\r\n        expr.location,\r\n        'MediaQueryData',\r\n        true,\r\n        'Read-only responsive info'\r\n      ));\r\n    }\r\n\r\n    // Pattern 6: State mutations in handlers\r\n    if (exprStr.includes('notifyListeners') || exprStr.includes('increment')) {\r\n      usages.push(new ContextUsagePattern(\r\n        'notifyListeners()',\r\n        'global-state-mutation',\r\n        expr.location,\r\n        'void',\r\n        false,\r\n        'Mutations do not trigger re-render in SSR'\r\n      ));\r\n    }\r\n\r\n    // Recursively search nested expressions\r\n    if (expr.type === 'CallExpression' && expr.args) {\r\n      expr.args.forEach((arg) => {\r\n        const argUsages = this.findContextUsageInExpression(arg, className);\r\n        usages.push(...argUsages);\r\n      });\r\n    }\r\n\r\n    if (expr.type === 'ObjectLiteral' && expr.properties) {\r\n      expr.properties.forEach((prop) => {\r\n        const propUsages = this.findContextUsageInExpression(prop.value, className);\r\n        usages.push(...propUsages);\r\n      });\r\n    }\r\n\r\n    if (expr.type === 'MemberExpression') {\r\n      const memberUsages = this.findContextUsageInExpression(expr.object, className);\r\n      usages.push(...memberUsages);\r\n    }\r\n\r\n    return usages;\r\n  }\r\n\r\n  /**\r\n   * Phase 5a: Build InheritedWidget graph\r\n   * Maps provider -> consumer relationships\r\n   */\r\n  buildInheritedWidgetGraph() {\r\n    this.inheritedWidgets.forEach((widget) => {\r\n      this.inheritedWidgetGraph[widget.name] = {\r\n        providedBy: this.findWhoProvides(widget.name),\r\n        consumedBy: this.findWhoConsumes(widget.name),\r\n        providedValue: widget.properties[0]?.type || 'unknown',\r\n        flowPath: this.traceContextFlow(widget.name),\r\n      };\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Phase 5b: Build Provider graph\r\n   * Maps provider -> consumer relationships\r\n   */\r\n  buildProviderGraph() {\r\n    this.providers.forEach((provider) => {\r\n      const key = provider.providerType;\r\n      this.providerGraph[key] = {\r\n        providedBy: this.findWhoCreatesProvider(provider.providerType),\r\n        providedType: provider.valueType,\r\n        consumedBy: this.findWhoConsumesProvider(provider.providerType),\r\n        accessPatterns: provider.accessPatterns,\r\n        flowPath: this.traceProviderFlow(provider.providerType),\r\n      };\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Find which widget provides this inherited widget\r\n   */\r\n  findWhoProvides(widgetName) {\r\n    // Simplified: return widget name of class that instantiates it\r\n    // In real implementation, search AST for instantiation\r\n    return 'MyApp';\r\n  }\r\n\r\n  /**\r\n   * Find which widgets consume this inherited widget\r\n   */\r\n  findWhoConsumes(widgetName) {\r\n    const consumers = [];\r\n    // Search for calls to widgetName.of()\r\n    this.contextAccessPoints.forEach((usage) => {\r\n      if (usage.pattern.includes(widgetName)) {\r\n        consumers.push(usage.dependent);\r\n      }\r\n    });\r\n    return consumers;\r\n  }\r\n\r\n  /**\r\n   * Find where this inherited widget's context flows\r\n   */\r\n  traceContextFlow(widgetName) {\r\n    // Simplified path tracing\r\n    return `${this.findWhoProvides(widgetName)} -> ${widgetName} -> ${this.findWhoConsumes(widgetName).join(', ')}`;\r\n  }\r\n\r\n  /**\r\n   * Find who creates this provider\r\n   */\r\n  findWhoCreatesProvider(providerType) {\r\n    // Simplified: return app root\r\n    return 'MyApp';\r\n  }\r\n\r\n  /**\r\n   * Find who consumes this provider\r\n   */\r\n  findWhoConsumesProvider(providerType) {\r\n    const consumers = [];\r\n    this.contextAccessPoints.forEach((usage) => {\r\n      if (usage.pattern.includes('watch') || usage.pattern.includes('read')) {\r\n        consumers.push(usage.dependent);\r\n      }\r\n    });\r\n    return consumers;\r\n  }\r\n\r\n  /**\r\n   * Find provider flow path through widget tree\r\n   */\r\n  traceProviderFlow(providerType) {\r\n    return `MyApp -> Provider -> MaterialApp -> [consumers]`;\r\n  }\r\n\r\n  /**\r\n   * Helper: Infer type from expression\r\n   */\r\n  inferType(expr) {\r\n    if (!expr) return 'any';\r\n    if (expr.type === 'Literal') {\r\n      const val = expr.value;\r\n      if (typeof val === 'string') return 'string';\r\n      if (typeof val === 'number') return 'number';\r\n      if (typeof val === 'boolean') return 'boolean';\r\n    }\r\n    return 'any';\r\n  }\r\n\r\n  /**\r\n   * Helper: Infer return type from method body\r\n   */\r\n  inferReturnType(body) {\r\n    // Simplified\r\n    return 'any';\r\n  }\r\n\r\n  /**\r\n   * Helper: Check if field has default value\r\n   */\r\n  hasDefaultValue(field) {\r\n    return field.initialValue !== null && field.initialValue !== undefined;\r\n  }\r\n\r\n  /**\r\n   * Helper: Convert expression to string\r\n   */\r\n  expressionToString(expr) {\r\n    if (!expr) return 'null';\r\n    if (expr.type === 'Identifier') return expr.name;\r\n    if (expr.type === 'Literal') return String(expr.value);\r\n    return JSON.stringify(expr).substring(0, 50);\r\n  }\r\n\r\n  /**\r\n   * Get analysis results\r\n   */\r\n  getResults() {\r\n    return {\r\n      inheritedWidgets: Array.from(this.inheritedWidgets.values()),\r\n      changeNotifiers: Array.from(this.changeNotifiers.values()),\r\n      providers: Array.from(this.providers.values()),\r\n      contextAccessPoints: this.contextAccessPoints,\r\n      inheritedWidgetGraph: this.inheritedWidgetGraph,\r\n      providerGraph: this.providerGraph,\r\n      errors: this.errors,\r\n    };\r\n  }\r\n}\r\n\r\nexport { ContextAnalyzer };\r\n"],
+  "mappings": "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",
+  "names": ["getLogger", "InheritedWidgetMetadata", "ChangeNotifierAnalysis", "ProviderAnalysis", "ContextUsagePattern", "ContextAnalyzer", "ast", "widgets", "options", "error", "node", "className", "superClass", "metadata", "field", "fieldName", "method", "methodName", "code", "analysis", "callsNotify", "mutations", "body", "pattern", "match", "buildMethod", "m", "classNode", "stmt", "s", "expr", "calleeName", "genericType", "arg", "prop", "providerType", "usagePoints", "usages", "foundUsages", "stmtUsages", "retUsages", "blockUsages", "exprStr", "argUsages", "propUsages", "memberUsages", "widget", "provider", "key", "widgetName", "consumers", "usage", "val"]
+}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/context_analyzer_data.js b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/context_analyzer_data.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/dist/context_analyzer_data.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/dist/context_analyzer_data.js
diff --git a/packages/flutterjs_analyzer/flutterjs_analyzer/dist/context_analyzer_data.js.map b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/context_analyzer_data.js.map
new file mode 100644
index 00000000..770d17e3
--- /dev/null
+++ b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/context_analyzer_data.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/context_analyzer_data.js"],
+  "sourcesContent": ["/**\r\n * FlutterJS Context Analyzer - Data Classes\r\n * Phase 3 Implementation\r\n * \r\n * Represents context-related concepts:\r\n * - InheritedWidget classes and their properties\r\n * - ChangeNotifier implementations\r\n * - Provider patterns\r\n * - Context usage and dependencies\r\n * - SSR compatibility information\r\n */\r\n\r\n// ============================================================================\r\n// INHERITED WIDGET METADATA\r\n// ============================================================================\r\n\r\n/**\r\n * Metadata about an InheritedWidget class\r\n * \r\n * Represents:\r\n * class ThemeProvider extends InheritedWidget {\r\n *   final ThemeData theme;\r\n *   final Widget child;\r\n *   \r\n *   static ThemeData of(BuildContext context) {\r\n *     return context.dependOnInheritedWidgetOfExactType<ThemeProvider>()?.theme;\r\n *   }\r\n *   \r\n *   @override\r\n *   bool updateShouldNotify(ThemeProvider oldWidget) {\r\n *     return theme != oldWidget.theme;\r\n *   }\r\n * }\r\n */\r\nclass InheritedWidgetMetadata {\r\n  constructor(name, location, superClass = 'InheritedWidget') {\r\n    // Identity\r\n    this.name = name;\r\n    this.location = location;\r\n    this.superClass = superClass;\r\n\r\n    // Structure\r\n    this.properties = [];            // Required/provided properties\r\n    this.staticAccessors = [];       // of() methods, from() factory methods\r\n    this.methods = [];               // Other methods\r\n\r\n    // Implementation details\r\n    this.updateShouldNotifyImplemented = false;\r\n    this.hasChildProperty = false;\r\n\r\n    // Usage tracking\r\n    this.usageCount = 0;\r\n    this.usedIn = [];               // Widget names that use this provider\r\n    this.providedByWidgets = [];    // Widget names that instantiate this\r\n  }\r\n\r\n  /**\r\n   * Add a property to this inherited widget\r\n   * Example: theme (ThemeData), child (Widget)\r\n   */\r\n  addProperty(name, type, required = false) {\r\n    this.properties.push({\r\n      name,\r\n      type,\r\n      required,\r\n      description: null,\r\n    });\r\n\r\n    if (name === 'child') {\r\n      this.hasChildProperty = true;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Add a static accessor method\r\n   * Example: static ThemeData of(BuildContext context)\r\n   */\r\n  addStaticAccessor(name, signature, location, usesInheritedWidgetLookup = true) {\r\n    this.staticAccessors.push({\r\n      name,\r\n      signature,\r\n      usesInheritedWidgetLookup,\r\n      location,\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Record that a widget uses this provider\r\n   */\r\n  recordUsage(widgetName) {\r\n    if (!this.usedIn.includes(widgetName)) {\r\n      this.usedIn.push(widgetName);\r\n      this.usageCount++;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Record that a widget provides (instantiates) this provider\r\n   */\r\n  recordProvider(widgetName) {\r\n    if (!this.providedByWidgets.includes(widgetName)) {\r\n      this.providedByWidgets.push(widgetName);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Validate the InheritedWidget pattern\r\n   */\r\n  validate() {\r\n    const issues = [];\r\n\r\n    // Should have child property\r\n    if (!this.hasChildProperty) {\r\n      issues.push({\r\n        type: 'missing-child-property',\r\n        severity: 'warning',\r\n        message: `InheritedWidget \"${this.name}\" should have a 'child' property`,\r\n      });\r\n    }\r\n\r\n    // Should have static of() accessor\r\n    if (this.staticAccessors.length === 0) {\r\n      issues.push({\r\n        type: 'missing-static-accessor',\r\n        severity: 'warning',\r\n        message: `InheritedWidget \"${this.name}\" should have a static of() method`,\r\n      });\r\n    }\r\n\r\n    // Should implement updateShouldNotify\r\n    if (!this.updateShouldNotifyImplemented) {\r\n      issues.push({\r\n        type: 'missing-update-notification',\r\n        severity: 'error',\r\n        message: `InheritedWidget \"${this.name}\" must implement updateShouldNotify()`,\r\n      });\r\n    }\r\n\r\n    return issues;\r\n  }\r\n\r\n  /**\r\n   * Get summary of this InheritedWidget\r\n   */\r\n  summary() {\r\n    return {\r\n      name: this.name,\r\n      superClass: this.superClass,\r\n      properties: this.properties.length,\r\n      staticAccessors: this.staticAccessors.length,\r\n      usageCount: this.usageCount,\r\n      usedIn: this.usedIn,\r\n      providedBy: this.providedByWidgets,\r\n      isValid: this.updateShouldNotifyImplemented,\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// CHANGE NOTIFIER ANALYSIS\r\n// ============================================================================\r\n\r\n/**\r\n * Analysis of a ChangeNotifier class\r\n * \r\n * Represents:\r\n * class CounterNotifier extends ChangeNotifier {\r\n *   int _count = 0;\r\n *   \r\n *   int get count => _count;\r\n *   \r\n *   void increment() {\r\n *     _count++;\r\n *     notifyListeners();\r\n *   }\r\n * }\r\n */\r\nclass ChangeNotifierAnalysis {\r\n  constructor(name, location) {\r\n    // Identity\r\n    this.name = name;\r\n    this.location = location;\r\n    this.type = 'ChangeNotifier';\r\n\r\n    // Structure\r\n    this.properties = [];            // _count, _isLoading, etc.\r\n    this.getters = [];               // get count => _count\r\n    this.methods = [];               // increment(), decrement(), etc.\r\n    this.setters = [];               // set property(value) => ...\r\n\r\n    // Usage tracking\r\n    this.isUsedWithProvider = false; // Is this used with Provider<T>?\r\n    this.providedType = null;        // The Provider<CounterNotifier> type\r\n    this.consumers = [];             // Widgets that consume this notifier\r\n    this.subscriptions = [];         // Where it's subscribed to\r\n  }\r\n\r\n  /**\r\n   * Add a property to this notifier\r\n   */\r\n  addProperty(name, type, initialValue = null) {\r\n    this.properties.push({\r\n      name,\r\n      type,\r\n      initialValue,\r\n      mutable: true,\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Add a getter method\r\n   * Example: get count => _count\r\n   */\r\n  addGetter(name, returnType, location) {\r\n    this.getters.push({\r\n      name,\r\n      returnType,\r\n      location,\r\n      isComputed: false,\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Add a method that mutates state\r\n   */\r\n  addMethod(name, location, callsNotify = false, mutations = []) {\r\n    this.methods.push({\r\n      name,\r\n      location,\r\n      callsNotifyListeners: callsNotify,\r\n      mutatesFields: mutations,\r\n      isAsync: false,\r\n      parameters: [],\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Record that a widget consumes this notifier\r\n   */\r\n  recordConsumer(widgetName, accessPattern = 'watch') {\r\n    if (!this.consumers.includes(widgetName)) {\r\n      this.consumers.push(widgetName);\r\n    }\r\n\r\n    this.subscriptions.push({\r\n      consumer: widgetName,\r\n      accessPattern,  // 'watch', 'read', 'select'\r\n      timestamp: new Date(),\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Check if this notifier is properly implemented\r\n   */\r\n  validate() {\r\n    const issues = [];\r\n\r\n    // Should have at least one method that calls notifyListeners\r\n    const hasNotifyCall = this.methods.some((m) => m.callsNotifyListeners);\r\n    if (!hasNotifyCall && this.methods.length > 0) {\r\n      issues.push({\r\n        type: 'missing-notify-listeners',\r\n        severity: 'warning',\r\n        message: `ChangeNotifier \"${this.name}\" has methods but none call notifyListeners()`,\r\n      });\r\n    }\r\n\r\n    // Methods that mutate should call notifyListeners\r\n    this.methods.forEach((method) => {\r\n      if (method.mutatesFields.length > 0 && !method.callsNotifyListeners) {\r\n        issues.push({\r\n          type: 'mutation-without-notification',\r\n          severity: 'warning',\r\n          message: `Method \"${method.name}\" mutates state but doesn't call notifyListeners()`,\r\n        });\r\n      }\r\n    });\r\n\r\n    // Should have getters for public access\r\n    if (this.properties.length > 0 && this.getters.length === 0) {\r\n      issues.push({\r\n        type: 'missing-getters',\r\n        severity: 'info',\r\n        message: `ChangeNotifier \"${this.name}\" has properties but no getters. Consider adding getters for encapsulation.`,\r\n      });\r\n    }\r\n\r\n    return issues;\r\n  }\r\n\r\n  /**\r\n   * Get summary\r\n   */\r\n  summary() {\r\n    return {\r\n      name: this.name,\r\n      properties: this.properties.length,\r\n      getters: this.getters.length,\r\n      methods: this.methods.length,\r\n      consumers: this.consumers.length,\r\n      consumedBy: this.consumers,\r\n      isValid: this.methods.some((m) => m.callsNotifyListeners),\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// PROVIDER ANALYSIS\r\n// ============================================================================\r\n\r\n/**\r\n * Analysis of a Provider<T> pattern\r\n * \r\n * Represents:\r\n * Provider<CounterNotifier>(\r\n *   create: (context) => CounterNotifier(),\r\n *   child: MaterialApp(...)\r\n * )\r\n */\r\nclass ProviderAnalysis {\r\n  constructor(providerType, location, valueType) {\r\n    // Identity\r\n    this.providerType = providerType;           // 'Provider<CounterNotifier>'\r\n    this.location = location;\r\n    this.valueType = valueType;                 // 'CounterNotifier'\r\n\r\n    // Configuration\r\n    this.createFunction = null;                 // (context) => CounterNotifier()\r\n    this.lazy = true;                           // Is it lazy-initialized?\r\n    this.dispose = null;                        // Cleanup function\r\n    this.child = null;                          // Child widget\r\n\r\n    // Usage tracking\r\n    this.consumers = [];                        // Widgets that consume\r\n    this.accessPatterns = [];                   // 'watch', 'read', 'select'\r\n    this.flowPath = null;                       // Provider \u2192 ... \u2192 Consumer\r\n  }\r\n\r\n  /**\r\n   * Set the create function\r\n   */\r\n  setCreateFunction(func) {\r\n    this.createFunction = func;\r\n  }\r\n\r\n  /**\r\n   * Set the dispose function\r\n   */\r\n  setDispose(func) {\r\n    this.dispose = func;\r\n  }\r\n\r\n  /**\r\n   * Record a consumer widget\r\n   */\r\n  addConsumer(widgetName) {\r\n    if (!this.consumers.includes(widgetName)) {\r\n      this.consumers.push(widgetName);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Record an access pattern\r\n   */\r\n  addAccessPattern(pattern) {\r\n    // pattern: 'watch', 'read', 'select'\r\n    if (!this.accessPatterns.includes(pattern)) {\r\n      this.accessPatterns.push(pattern);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Validate the provider configuration\r\n   */\r\n  validate() {\r\n    const issues = [];\r\n\r\n    // Should have a create function\r\n    if (!this.createFunction) {\r\n      issues.push({\r\n        type: 'missing-create',\r\n        severity: 'error',\r\n        message: `Provider<${this.valueType}> must have a create function`,\r\n      });\r\n    }\r\n\r\n    // Should have at least one consumer\r\n    if (this.consumers.length === 0) {\r\n      issues.push({\r\n        type: 'unused-provider',\r\n        severity: 'info',\r\n        message: `Provider<${this.valueType}> is defined but not consumed by any widget`,\r\n      });\r\n    }\r\n\r\n    // Check for access pattern consistency\r\n    if (this.accessPatterns.includes('watch') && !this.accessPatterns.includes('read')) {\r\n      // watch should probably have read as fallback\r\n      issues.push({\r\n        type: 'watch-without-read',\r\n        severity: 'info',\r\n        message: `Provider uses context.watch() but not context.read(). Consider both patterns.`,\r\n      });\r\n    }\r\n\r\n    return issues;\r\n  }\r\n\r\n  /**\r\n   * Get summary\r\n   */\r\n  summary() {\r\n    return {\r\n      type: this.providerType,\r\n      valueType: this.valueType,\r\n      consumers: this.consumers.length,\r\n      consumedBy: this.consumers,\r\n      accessPatterns: this.accessPatterns,\r\n      hasCreateFunction: !!this.createFunction,\r\n      hasDisposeFunction: !!this.dispose,\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// CONTEXT DEPENDENCY\r\n// ============================================================================\r\n\r\n/**\r\n * Represents a widget and its context dependencies\r\n */\r\nclass ContextDependency {\r\n  constructor(dependent, method = 'build') {\r\n    this.dependent = dependent;                 // Widget name\r\n    this.method = method;                       // 'build', 'initState', etc.\r\n    this.contextUsage = [];                     // Array of ContextUsagePattern\r\n    this.location = null;\r\n  }\r\n\r\n  /**\r\n   * Add a context usage pattern\r\n   */\r\n  addUsage(pattern) {\r\n    if (pattern instanceof ContextUsagePattern) {\r\n      this.contextUsage.push(pattern);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get all SSR-safe usages\r\n   */\r\n  getSsrSafeUsages() {\r\n    return this.contextUsage.filter((u) => u.ssrSafe);\r\n  }\r\n\r\n  /**\r\n   * Get all SSR-unsafe usages\r\n   */\r\n  getSsrUnsafeUsages() {\r\n    return this.contextUsage.filter((u) => !u.ssrSafe);\r\n  }\r\n\r\n  /**\r\n   * Check if widget can be rendered on server\r\n   */\r\n  isSsrCompatible() {\r\n    return this.getSsrUnsafeUsages().length === 0;\r\n  }\r\n\r\n  /**\r\n   * Get summary\r\n   */\r\n  summary() {\r\n    return {\r\n      dependent: this.dependent,\r\n      method: this.method,\r\n      totalUsages: this.contextUsage.length,\r\n      ssrSafeUsages: this.getSsrSafeUsages().length,\r\n      ssrUnsafeUsages: this.getSsrUnsafeUsages().length,\r\n      isSsrCompatible: this.isSsrCompatible(),\r\n      usagePatterns: this.contextUsage.map((u) => u.pattern),\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// CONTEXT USAGE PATTERN\r\n// ============================================================================\r\n\r\n/**\r\n * Represents a single context usage pattern in code\r\n * \r\n * Examples:\r\n * - Theme.of(context)\r\n * - context.watch<CounterNotifier>()\r\n * - context.read<CounterNotifier>()\r\n * - context.mediaQuery()\r\n */\r\nclass ContextUsagePattern {\r\n  constructor(pattern, type, location, returns = 'T', ssrSafe = true, reason = '') {\r\n    // Pattern identification\r\n    this.pattern = pattern;                     // 'Theme.of(context)', 'context.watch<T>()'\r\n    this.type = type;                           // 'inherited-widget-lookup', 'provider-watch', etc.\r\n    this.location = location;                   // { line, column }\r\n\r\n    // What it returns\r\n    this.returns = returns;                     // Return type\r\n\r\n    // SSR compatibility\r\n    this.ssrSafe = ssrSafe;\r\n    this.reason = reason;                       // Why safe/unsafe for SSR\r\n\r\n    // Metadata\r\n    this.depth = 0;                             // Nesting depth in widget tree\r\n    this.frequency = 1;                         // How often called\r\n  }\r\n\r\n  /**\r\n   * Explain why this pattern is or isn't SSR safe\r\n   */\r\n  explain() {\r\n    if (this.ssrSafe) {\r\n      return `\u2713 SSR Safe: ${this.reason}`;\r\n    } else {\r\n      return `\u2717 SSR Unsafe: ${this.reason}`;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get migration advice for SSR\r\n   */\r\n  getMigrationAdvice() {\r\n    if (this.ssrSafe) return null;\r\n\r\n    const advice = {\r\n      'provider-watch': 'Replace with context.read() for initial SSR render, use watch() in didChangeDependencies() on client',\r\n      'global-state-mutation': 'Move mutations to client-only code, wrap in if (!kIsWeb) or similar server check',\r\n      'event-handler': 'Event handlers don\\'t exist during SSR, only attach after hydration on client',\r\n    };\r\n\r\n    return advice[this.type] || null;\r\n  }\r\n\r\n  /**\r\n   * Get summary\r\n   */\r\n  summary() {\r\n    return {\r\n      pattern: this.pattern,\r\n      type: this.type,\r\n      returns: this.returns,\r\n      ssrSafe: this.ssrSafe,\r\n      reason: this.reason,\r\n      advice: this.getMigrationAdvice(),\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// HYDRATION REQUIREMENT\r\n// ============================================================================\r\n\r\n/**\r\n * Represents something that needs to be re-initialized on the client\r\n * after server-side rendering\r\n */\r\nclass HydrationRequirement {\r\n  constructor(dependency, reason, order = 0) {\r\n    this.dependency = dependency;               // What needs hydration (e.g., 'CounterNotifier')\r\n    this.reason = reason;                       // Why it needs hydration\r\n    this.order = order;                         // Execution order (lower = earlier)\r\n    this.requiredProviders = [];                // Providers needed before this hydrates\r\n    this.requiredState = [];                    // State needed for this to work\r\n  }\r\n\r\n  /**\r\n   * Add a required provider\r\n   */\r\n  requiresProvider(providerType) {\r\n    if (!this.requiredProviders.includes(providerType)) {\r\n      this.requiredProviders.push(providerType);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Add required state\r\n   */\r\n  requiresState(stateProperty) {\r\n    if (!this.requiredState.includes(stateProperty)) {\r\n      this.requiredState.push(stateProperty);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get summary\r\n   */\r\n  summary() {\r\n    return {\r\n      dependency: this.dependency,\r\n      reason: this.reason,\r\n      order: this.order,\r\n      requiredProviders: this.requiredProviders,\r\n      requiredState: this.requiredState,\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// LAZY LOADING OPPORTUNITY\r\n// ============================================================================\r\n\r\n/**\r\n * Represents a widget or notifier that could be lazy-loaded\r\n */\r\nclass LazyLoadOpportunity {\r\n  constructor(target, reason, estimatedSize = 'unknown', type = 'widget') {\r\n    this.target = target;                       // Widget or ChangeNotifier name\r\n    this.reason = reason;                       // Why lazy load it\r\n    this.estimatedSize = estimatedSize;         // Bundle size if lazy loaded\r\n    this.type = type;                           // 'widget' or 'notifier'\r\n    this.recommendation = null;                 // How to lazy load\r\n    this.priority = 'medium';                   // 'high', 'medium', 'low'\r\n  }\r\n\r\n  /**\r\n   * Set the recommendation\r\n   */\r\n  setRecommendation(recommendation) {\r\n    this.recommendation = recommendation;\r\n  }\r\n\r\n  /**\r\n   * Set priority based on size\r\n   */\r\n  calculatePriority(sizeKb) {\r\n    if (sizeKb > 50) {\r\n      this.priority = 'high';\r\n    } else if (sizeKb > 20) {\r\n      this.priority = 'medium';\r\n    } else {\r\n      this.priority = 'low';\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get summary\r\n   */\r\n  summary() {\r\n    return {\r\n      target: this.target,\r\n      type: this.type,\r\n      reason: this.reason,\r\n      estimatedSize: this.estimatedSize,\r\n      priority: this.priority,\r\n      recommendation: this.recommendation,\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// CONTEXT REQUIREMENTS SUMMARY\r\n// ============================================================================\r\n\r\n/**\r\n * Summary of all context requirements for the app\r\n */\r\nclass ContextRequirementsSummary {\r\n  constructor() {\r\n    this.requiresThemeProvider = false;\r\n    this.requiresMediaQuery = false;\r\n    this.requiresNavigator = false;\r\n    this.requiresChangeNotifierProvider = false;\r\n    this.customInheritedWidgets = [];           // Custom providers defined\r\n    this.requiredProviders = [];                // Provider<T> patterns used\r\n    this.hydrationRequired = false;\r\n    this.hydrationDependencies = [];            // What needs hydration\r\n\r\n    this.ssrCompatibility = 'unknown';          // 'full', 'partial', 'none'\r\n    this.ssrIssues = [];                        // What breaks SSR\r\n    this.ssrMigrationPath = [];                 // Steps to fix SSR\r\n  }\r\n\r\n  /**\r\n   * Add a custom inherited widget\r\n   */\r\n  addCustomInheritedWidget(name) {\r\n    if (!this.customInheritedWidgets.includes(name)) {\r\n      this.customInheritedWidgets.push(name);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Add a required provider\r\n   */\r\n  addRequiredProvider(type) {\r\n    if (!this.requiredProviders.includes(type)) {\r\n      this.requiredProviders.push(type);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Add a hydration dependency\r\n   */\r\n  addHydrationDependency(dep) {\r\n    if (dep instanceof HydrationRequirement) {\r\n      this.hydrationDependencies.push(dep);\r\n      this.hydrationRequired = true;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Calculate SSR compatibility\r\n   */\r\n  calculateSsrCompatibility() {\r\n    if (this.ssrIssues.length === 0) {\r\n      this.ssrCompatibility = 'full';\r\n    } else if (this.ssrIssues.length <= 3) {\r\n      this.ssrCompatibility = 'partial';\r\n    } else {\r\n      this.ssrCompatibility = 'none';\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get summary\r\n   */\r\n  summary() {\r\n    return {\r\n      requiresThemeProvider: this.requiresThemeProvider,\r\n      requiresMediaQuery: this.requiresMediaQuery,\r\n      requiresNavigator: this.requiresNavigator,\r\n      requiresChangeNotifierProvider: this.requiresChangeNotifierProvider,\r\n      customInheritedWidgets: this.customInheritedWidgets,\r\n      requiredProviders: this.requiredProviders,\r\n      hydrationRequired: this.hydrationRequired,\r\n      hydrationCount: this.hydrationDependencies.length,\r\n      ssrCompatibility: this.ssrCompatibility,\r\n      ssrIssueCount: this.ssrIssues.length,\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport {\r\n  InheritedWidgetMetadata,\r\n  ChangeNotifierAnalysis,\r\n  ProviderAnalysis,\r\n  ContextDependency,\r\n  ContextUsagePattern,\r\n  HydrationRequirement,\r\n  LazyLoadOpportunity,\r\n  ContextRequirementsSummary,\r\n};\r\n"],
+  "mappings": "AAkCA,MAAMA,CAAwB,CAC5B,YAAYC,EAAMC,EAAUC,EAAa,kBAAmB,CAE1D,KAAK,KAAOF,EACZ,KAAK,SAAWC,EAChB,KAAK,WAAaC,EAGlB,KAAK,WAAa,CAAC,EACnB,KAAK,gBAAkB,CAAC,EACxB,KAAK,QAAU,CAAC,EAGhB,KAAK,8BAAgC,GACrC,KAAK,iBAAmB,GAGxB,KAAK,WAAa,EAClB,KAAK,OAAS,CAAC,EACf,KAAK,kBAAoB,CAAC,CAC5B,CAMA,YAAYF,EAAMG,EAAMC,EAAW,GAAO,CACxC,KAAK,WAAW,KAAK,CACnB,KAAAJ,EACA,KAAAG,EACA,SAAAC,EACA,YAAa,IACf,CAAC,EAEGJ,IAAS,UACX,KAAK,iBAAmB,GAE5B,CAMA,kBAAkBA,EAAMK,EAAWJ,EAAUK,EAA4B,GAAM,CAC7E,KAAK,gBAAgB,KAAK,CACxB,KAAAN,EACA,UAAAK,EACA,0BAAAC,EACA,SAAAL,CACF,CAAC,CACH,CAKA,YAAYM,EAAY,CACjB,KAAK,OAAO,SAASA,CAAU,IAClC,KAAK,OAAO,KAAKA,CAAU,EAC3B,KAAK,aAET,CAKA,eAAeA,EAAY,CACpB,KAAK,kBAAkB,SAASA,CAAU,GAC7C,KAAK,kBAAkB,KAAKA,CAAU,CAE1C,CAKA,UAAW,CACT,MAAMC,EAAS,CAAC,EAGhB,OAAK,KAAK,kBACRA,EAAO,KAAK,CACV,KAAM,yBACN,SAAU,UACV,QAAS,oBAAoB,KAAK,IAAI,kCACxC,CAAC,EAIC,KAAK,gBAAgB,SAAW,GAClCA,EAAO,KAAK,CACV,KAAM,0BACN,SAAU,UACV,QAAS,oBAAoB,KAAK,IAAI,oCACxC,CAAC,EAIE,KAAK,+BACRA,EAAO,KAAK,CACV,KAAM,8BACN,SAAU,QACV,QAAS,oBAAoB,KAAK,IAAI,uCACxC,CAAC,EAGIA,CACT,CAKA,SAAU,CACR,MAAO,CACL,KAAM,KAAK,KACX,WAAY,KAAK,WACjB,WAAY,KAAK,WAAW,OAC5B,gBAAiB,KAAK,gBAAgB,OACtC,WAAY,KAAK,WACjB,OAAQ,KAAK,OACb,WAAY,KAAK,kBACjB,QAAS,KAAK,6BAChB,CACF,CACF,CAqBA,MAAMC,CAAuB,CAC3B,YAAYT,EAAMC,EAAU,CAE1B,KAAK,KAAOD,EACZ,KAAK,SAAWC,EAChB,KAAK,KAAO,iBAGZ,KAAK,WAAa,CAAC,EACnB,KAAK,QAAU,CAAC,EAChB,KAAK,QAAU,CAAC,EAChB,KAAK,QAAU,CAAC,EAGhB,KAAK,mBAAqB,GAC1B,KAAK,aAAe,KACpB,KAAK,UAAY,CAAC,EAClB,KAAK,cAAgB,CAAC,CACxB,CAKA,YAAYD,EAAMG,EAAMO,EAAe,KAAM,CAC3C,KAAK,WAAW,KAAK,CACnB,KAAAV,EACA,KAAAG,EACA,aAAAO,EACA,QAAS,EACX,CAAC,CACH,CAMA,UAAUV,EAAMW,EAAYV,EAAU,CACpC,KAAK,QAAQ,KAAK,CAChB,KAAAD,EACA,WAAAW,EACA,SAAAV,EACA,WAAY,EACd,CAAC,CACH,CAKA,UAAUD,EAAMC,EAAUW,EAAc,GAAOC,EAAY,CAAC,EAAG,CAC7D,KAAK,QAAQ,KAAK,CAChB,KAAAb,EACA,SAAAC,EACA,qBAAsBW,EACtB,cAAeC,EACf,QAAS,GACT,WAAY,CAAC,CACf,CAAC,CACH,CAKA,eAAeN,EAAYO,EAAgB,QAAS,CAC7C,KAAK,UAAU,SAASP,CAAU,GACrC,KAAK,UAAU,KAAKA,CAAU,EAGhC,KAAK,cAAc,KAAK,CACtB,SAAUA,EACV,cAAAO,EACA,UAAW,IAAI,IACjB,CAAC,CACH,CAKA,UAAW,CACT,MAAMN,EAAS,CAAC,EAIhB,MAAI,CADkB,KAAK,QAAQ,KAAMO,GAAMA,EAAE,oBAAoB,GAC/C,KAAK,QAAQ,OAAS,GAC1CP,EAAO,KAAK,CACV,KAAM,2BACN,SAAU,UACV,QAAS,mBAAmB,KAAK,IAAI,+CACvC,CAAC,EAIH,KAAK,QAAQ,QAASQ,GAAW,CAC3BA,EAAO,cAAc,OAAS,GAAK,CAACA,EAAO,sBAC7CR,EAAO,KAAK,CACV,KAAM,gCACN,SAAU,UACV,QAAS,WAAWQ,EAAO,IAAI,oDACjC,CAAC,CAEL,CAAC,EAGG,KAAK,WAAW,OAAS,GAAK,KAAK,QAAQ,SAAW,GACxDR,EAAO,KAAK,CACV,KAAM,kBACN,SAAU,OACV,QAAS,mBAAmB,KAAK,IAAI,6EACvC,CAAC,EAGIA,CACT,CAKA,SAAU,CACR,MAAO,CACL,KAAM,KAAK,KACX,WAAY,KAAK,WAAW,OAC5B,QAAS,KAAK,QAAQ,OACtB,QAAS,KAAK,QAAQ,OACtB,UAAW,KAAK,UAAU,OAC1B,WAAY,KAAK,UACjB,QAAS,KAAK,QAAQ,KAAMO,GAAMA,EAAE,oBAAoB,CAC1D,CACF,CACF,CAeA,MAAME,CAAiB,CACrB,YAAYC,EAAcjB,EAAUkB,EAAW,CAE7C,KAAK,aAAeD,EACpB,KAAK,SAAWjB,EAChB,KAAK,UAAYkB,EAGjB,KAAK,eAAiB,KACtB,KAAK,KAAO,GACZ,KAAK,QAAU,KACf,KAAK,MAAQ,KAGb,KAAK,UAAY,CAAC,EAClB,KAAK,eAAiB,CAAC,EACvB,KAAK,SAAW,IAClB,CAKA,kBAAkBC,EAAM,CACtB,KAAK,eAAiBA,CACxB,CAKA,WAAWA,EAAM,CACf,KAAK,QAAUA,CACjB,CAKA,YAAYb,EAAY,CACjB,KAAK,UAAU,SAASA,CAAU,GACrC,KAAK,UAAU,KAAKA,CAAU,CAElC,CAKA,iBAAiBc,EAAS,CAEnB,KAAK,eAAe,SAASA,CAAO,GACvC,KAAK,eAAe,KAAKA,CAAO,CAEpC,CAKA,UAAW,CACT,MAAMb,EAAS,CAAC,EAGhB,OAAK,KAAK,gBACRA,EAAO,KAAK,CACV,KAAM,iBACN,SAAU,QACV,QAAS,YAAY,KAAK,SAAS,+BACrC,CAAC,EAIC,KAAK,UAAU,SAAW,GAC5BA,EAAO,KAAK,CACV,KAAM,kBACN,SAAU,OACV,QAAS,YAAY,KAAK,SAAS,6CACrC,CAAC,EAIC,KAAK,eAAe,SAAS,OAAO,GAAK,CAAC,KAAK,eAAe,SAAS,MAAM,GAE/EA,EAAO,KAAK,CACV,KAAM,qBACN,SAAU,OACV,QAAS,+EACX,CAAC,EAGIA,CACT,CAKA,SAAU,CACR,MAAO,CACL,KAAM,KAAK,aACX,UAAW,KAAK,UAChB,UAAW,KAAK,UAAU,OAC1B,WAAY,KAAK,UACjB,eAAgB,KAAK,eACrB,kBAAmB,CAAC,CAAC,KAAK,eAC1B,mBAAoB,CAAC,CAAC,KAAK,OAC7B,CACF,CACF,CASA,MAAMc,CAAkB,CACtB,YAAYC,EAAWP,EAAS,QAAS,CACvC,KAAK,UAAYO,EACjB,KAAK,OAASP,EACd,KAAK,aAAe,CAAC,EACrB,KAAK,SAAW,IAClB,CAKA,SAASK,EAAS,CACZA,aAAmBG,GACrB,KAAK,aAAa,KAAKH,CAAO,CAElC,CAKA,kBAAmB,CACjB,OAAO,KAAK,aAAa,OAAQI,GAAMA,EAAE,OAAO,CAClD,CAKA,oBAAqB,CACnB,OAAO,KAAK,aAAa,OAAQA,GAAM,CAACA,EAAE,OAAO,CACnD,CAKA,iBAAkB,CAChB,OAAO,KAAK,mBAAmB,EAAE,SAAW,CAC9C,CAKA,SAAU,CACR,MAAO,CACL,UAAW,KAAK,UAChB,OAAQ,KAAK,OACb,YAAa,KAAK,aAAa,OAC/B,cAAe,KAAK,iBAAiB,EAAE,OACvC,gBAAiB,KAAK,mBAAmB,EAAE,OAC3C,gBAAiB,KAAK,gBAAgB,EACtC,cAAe,KAAK,aAAa,IAAKA,GAAMA,EAAE,OAAO,CACvD,CACF,CACF,CAeA,MAAMD,CAAoB,CACxB,YAAYH,EAASlB,EAAMF,EAAUyB,EAAU,IAAKC,EAAU,GAAMC,EAAS,GAAI,CAE/E,KAAK,QAAUP,EACf,KAAK,KAAOlB,EACZ,KAAK,SAAWF,EAGhB,KAAK,QAAUyB,EAGf,KAAK,QAAUC,EACf,KAAK,OAASC,EAGd,KAAK,MAAQ,EACb,KAAK,UAAY,CACnB,CAKA,SAAU,CACR,OAAI,KAAK,QACA,oBAAe,KAAK,MAAM,GAE1B,sBAAiB,KAAK,MAAM,EAEvC,CAKA,oBAAqB,CACnB,OAAI,KAAK,QAAgB,KAEV,CACb,iBAAkB,uGAClB,wBAAyB,mFACzB,gBAAiB,8EACnB,EAEc,KAAK,IAAI,GAAK,IAC9B,CAKA,SAAU,CACR,MAAO,CACL,QAAS,KAAK,QACd,KAAM,KAAK,KACX,QAAS,KAAK,QACd,QAAS,KAAK,QACd,OAAQ,KAAK,OACb,OAAQ,KAAK,mBAAmB,CAClC,CACF,CACF,CAUA,MAAMC,CAAqB,CACzB,YAAYC,EAAYF,EAAQG,EAAQ,EAAG,CACzC,KAAK,WAAaD,EAClB,KAAK,OAASF,EACd,KAAK,MAAQG,EACb,KAAK,kBAAoB,CAAC,EAC1B,KAAK,cAAgB,CAAC,CACxB,CAKA,iBAAiBb,EAAc,CACxB,KAAK,kBAAkB,SAASA,CAAY,GAC/C,KAAK,kBAAkB,KAAKA,CAAY,CAE5C,CAKA,cAAcc,EAAe,CACtB,KAAK,cAAc,SAASA,CAAa,GAC5C,KAAK,cAAc,KAAKA,CAAa,CAEzC,CAKA,SAAU,CACR,MAAO,CACL,WAAY,KAAK,WACjB,OAAQ,KAAK,OACb,MAAO,KAAK,MACZ,kBAAmB,KAAK,kBACxB,cAAe,KAAK,aACtB,CACF,CACF,CASA,MAAMC,CAAoB,CACxB,YAAYC,EAAQN,EAAQO,EAAgB,UAAWhC,EAAO,SAAU,CACtE,KAAK,OAAS+B,EACd,KAAK,OAASN,EACd,KAAK,cAAgBO,EACrB,KAAK,KAAOhC,EACZ,KAAK,eAAiB,KACtB,KAAK,SAAW,QAClB,CAKA,kBAAkBiC,EAAgB,CAChC,KAAK,eAAiBA,CACxB,CAKA,kBAAkBC,EAAQ,CACpBA,EAAS,GACX,KAAK,SAAW,OACPA,EAAS,GAClB,KAAK,SAAW,SAEhB,KAAK,SAAW,KAEpB,CAKA,SAAU,CACR,MAAO,CACL,OAAQ,KAAK,OACb,KAAM,KAAK,KACX,OAAQ,KAAK,OACb,cAAe,KAAK,cACpB,SAAU,KAAK,SACf,eAAgB,KAAK,cACvB,CACF,CACF,CASA,MAAMC,CAA2B,CAC/B,aAAc,CACZ,KAAK,sBAAwB,GAC7B,KAAK,mBAAqB,GAC1B,KAAK,kBAAoB,GACzB,KAAK,+BAAiC,GACtC,KAAK,uBAAyB,CAAC,EAC/B,KAAK,kBAAoB,CAAC,EAC1B,KAAK,kBAAoB,GACzB,KAAK,sBAAwB,CAAC,EAE9B,KAAK,iBAAmB,UACxB,KAAK,UAAY,CAAC,EAClB,KAAK,iBAAmB,CAAC,CAC3B,CAKA,yBAAyBtC,EAAM,CACxB,KAAK,uBAAuB,SAASA,CAAI,GAC5C,KAAK,uBAAuB,KAAKA,CAAI,CAEzC,CAKA,oBAAoBG,EAAM,CACnB,KAAK,kBAAkB,SAASA,CAAI,GACvC,KAAK,kBAAkB,KAAKA,CAAI,CAEpC,CAKA,uBAAuBoC,EAAK,CACtBA,aAAeV,IACjB,KAAK,sBAAsB,KAAKU,CAAG,EACnC,KAAK,kBAAoB,GAE7B,CAKA,2BAA4B,CACtB,KAAK,UAAU,SAAW,EAC5B,KAAK,iBAAmB,OACf,KAAK,UAAU,QAAU,EAClC,KAAK,iBAAmB,UAExB,KAAK,iBAAmB,MAE5B,CAKA,SAAU,CACR,MAAO,CACL,sBAAuB,KAAK,sBAC5B,mBAAoB,KAAK,mBACzB,kBAAmB,KAAK,kBACxB,+BAAgC,KAAK,+BACrC,uBAAwB,KAAK,uBAC7B,kBAAmB,KAAK,kBACxB,kBAAmB,KAAK,kBACxB,eAAgB,KAAK,sBAAsB,OAC3C,iBAAkB,KAAK,iBACvB,cAAe,KAAK,UAAU,MAChC,CACF,CACF",
+  "names": ["InheritedWidgetMetadata", "name", "location", "superClass", "type", "required", "signature", "usesInheritedWidgetLookup", "widgetName", "issues", "ChangeNotifierAnalysis", "initialValue", "returnType", "callsNotify", "mutations", "accessPattern", "m", "method", "ProviderAnalysis", "providerType", "valueType", "func", "pattern", "ContextDependency", "dependent", "ContextUsagePattern", "u", "returns", "ssrSafe", "reason", "HydrationRequirement", "dependency", "order", "stateProperty", "LazyLoadOpportunity", "target", "estimatedSize", "recommendation", "sizeKb", "ContextRequirementsSummary", "dep"]
+}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/flutter_import_resolver.js b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutter_import_resolver.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/dist/flutter_import_resolver.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutter_import_resolver.js
diff --git a/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutter_import_resolver.js.map b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutter_import_resolver.js.map
new file mode 100644
index 00000000..29e3b21f
--- /dev/null
+++ b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutter_import_resolver.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/flutter_import_resolver.js"],
+  "sourcesContent": ["/**\r\n * Advanced Import Resolver for Flutter.js Framework\r\n * \u2705 FIXED: Now handles multi-line imports correctly\r\n * \r\n * Resolution Chain:\r\n * 1. Parse imports from source code (single & multi-line)\r\n * 2. Check framework package mappings (@flutterjs/*, @package:)\r\n * 3. Check local project code (./src, ./lib, etc.)\r\n * 4. Check package cache (future: npm_modules, pub_cache, etc.)\r\n * 5. Return error if not found\r\n */\r\n\r\nimport fs from 'fs';\r\nimport path from 'path';\r\n\r\nclass ImportResolver {\r\n  constructor(options = {}) {\r\n    this.options = {\r\n      projectRoot: process.cwd(),\r\n      frameworkType: 'flutter-js',\r\n      ignoreUnresolved: false,\r\n      cacheEnabled: false,\r\n      ...options,\r\n    };\r\n\r\n    this.frameworkPackages = {\r\n      \"@flutterjs/runtime\": \"file:../../../../../src/runtime\",\r\n      \"@flutterjs/vdom\": \"file:../../../../../src/vdom\",\r\n      \"@flutterjs/analyzer\": \"file:../../../../analyzer\",\r\n      \"@flutterjs/material\": \"file:../../../../../package/material\",\r\n      \"@flutterjs/cupertino\": \"file:../../../../../package/cupertino\",\r\n      \"@flutterjs/foundation\": \"file:../../../../../package/foundation\",\r\n    };\r\n\r\n    this.customPackageMappings = {};\r\n    this.resolvedCache = new Map();\r\n    this.unresolvedCache = new Map();\r\n\r\n    this.localSearchPaths = [\r\n      'src',\r\n      'lib',\r\n      'packages',\r\n      'modules',\r\n      '.',\r\n    ];\r\n\r\n    this.results = {\r\n      resolved: [],\r\n      unresolved: [],\r\n      errors: [],\r\n    };\r\n  }\r\n\r\n  /**\r\n   * \u2705 FINAL FIX: Parse imports directly from source code\r\n   * Handles both single-line and multi-line imports\r\n   */\r\n  parseImportsFromSource(sourceCode, logger = null) {\r\n    const imports = [];\r\n\r\n    if (logger) {\r\n      logger.info('[ImportResolver] Starting import parsing...');\r\n      logger.debug(`[ImportResolver] Source code length: ${sourceCode.length} characters`);\r\n    }\r\n\r\n    // Regex: import ... from 'path'\r\n    // [\\s\\S]*? matches ANYTHING including newlines (non-greedy)\r\n    const importRegex = /import\\s+([\\s\\S]*?)\\s+from\\s+['\"`]([^'\"`]+)['\"`]/g;\r\n\r\n    let match;\r\n    let matchCount = 0;\r\n\r\n    while ((match = importRegex.exec(sourceCode)) !== null) {\r\n      matchCount++;\r\n      const importClause = match[1];\r\n      const modulePath = match[2];\r\n\r\n      if (logger) {\r\n        logger.debug(`[ImportResolver] Match #${matchCount} found`);\r\n        logger.debug(`  Module path: '${modulePath}'`);\r\n        logger.trace(`  Raw clause length: ${importClause.length} chars`);\r\n      }\r\n\r\n      // Parse the clause (parsing handles cleaning internally)\r\n      const parsed = this.parseImportClause(importClause, modulePath, logger);\r\n\r\n      if (parsed) {\r\n        if (logger) {\r\n          logger.debug(`  \u2713 Successfully parsed`);\r\n          logger.debug(`    Items: ${parsed.items.join(', ')}`);\r\n        }\r\n        imports.push(parsed);\r\n      } else {\r\n        if (logger) {\r\n          logger.warn(`  \u2717 Parse returned null - clause: ${importClause.substring(0, 100)}`);\r\n        }\r\n      }\r\n    }\r\n\r\n    if (logger) {\r\n      logger.info(`[ImportResolver] FINAL RESULT: Found ${matchCount} imports, parsed ${imports.length}`);\r\n      if (imports.length === 0 && matchCount === 0) {\r\n        logger.warn('[ImportResolver] \u26A0\uFE0F NO IMPORTS FOUND - Check regex or source code!');\r\n        logger.warn(`[ImportResolver] Source starts with: ${sourceCode.substring(0, 200)}`);\r\n      }\r\n      imports.forEach((imp, idx) => {\r\n        logger.info(`[ImportResolver]   [${idx}] ${imp.source} \u2192 [${imp.items.join(', ')}]`);\r\n      });\r\n    }\r\n\r\n    return imports;\r\n  }\r\n\r\n  /**\r\n   * \u2705 FIXED: Parse individual import clause\r\n   * Handles: { x, y, z }, defaultExport, * as namespace, etc.\r\n   * \r\n   * KEY FIX: Clean the clause COMPLETELY FIRST, then detect type\r\n   */\r\n  parseImportClause(clause, modulePath, logger = null) {\r\n    if (!clause || typeof clause !== 'string') {\r\n      return null;\r\n    }\r\n\r\n    // \u2705 CRITICAL FIX #1: Clean AGGRESSIVELY FIRST\r\n    // This removes ALL noise (comments, newlines, extra spaces)\r\n    let cleaned = clause\r\n      .replace(/\\/\\/.*$/gm, '')                    // Remove line comments\r\n      .replace(/\\/\\*[\\s\\S]*?\\*\\//g, '')            // Remove block comments\r\n      .replace(/\\n/g, ' ')                         // Replace newlines with spaces\r\n      .replace(/\\t/g, ' ')                         // Replace tabs with spaces\r\n      .replace(/\\s+/g, ' ')                        // Collapse multiple spaces to one\r\n      .trim();                                      // Trim leading/trailing\r\n\r\n    if (logger) {\r\n      logger.trace(`[ImportResolver]   Original: ${clause.substring(0, 100).replace(/\\n/g, '\\\\n')}`);\r\n      logger.trace(`[ImportResolver]   Cleaned: \"${cleaned}\"`);\r\n    }\r\n\r\n    const result = {\r\n      source: modulePath,\r\n      items: [],\r\n      default: null,\r\n      namespace: null,\r\n      raw: clause,\r\n    };\r\n\r\n    // \u2705 Case 1: Namespace import: import * as name\r\n    const namespaceMatch = cleaned.match(/^\\*\\s+as\\s+(\\w+)$/);\r\n    if (namespaceMatch) {\r\n      result.namespace = namespaceMatch[1];\r\n      result.items.push(namespaceMatch[1]);\r\n      if (logger) logger.trace(`[ImportResolver]   \u2192 Namespace import: ${namespaceMatch[1]}`);\r\n      return result;\r\n    }\r\n\r\n    // \u2705 Case 2: Named imports with braces: { x, y, z }\r\n    const namedMatch = cleaned.match(/\\{(.+?)\\}/);\r\n    if (namedMatch) {\r\n      if (logger) logger.trace(`[ImportResolver]   \u2192 Found braces, extracting named imports`);\r\n      \r\n      const itemsString = namedMatch[1];\r\n      this.extractNamedItems(itemsString, result, logger);\r\n      \r\n      if (result.items.length > 0) {\r\n        return result;\r\n      }\r\n    }\r\n\r\n    // \u2705 Case 3: NO BRACES - but might be comma-separated list\r\n    // This happens when clause is just: \"Widget, State, StatefulWidget, ...\"\r\n    // (the braces were stripped by the regex that captured this clause)\r\n    if (!cleaned.includes('{') && cleaned.includes(',')) {\r\n      if (logger) logger.trace(`[ImportResolver]   \u2192 No braces but has commas, treating as named imports`);\r\n      \r\n      this.extractNamedItems(cleaned, result, logger);\r\n      \r\n      if (result.items.length > 0) {\r\n        return result;\r\n      }\r\n    }\r\n\r\n    // \u2705 Case 4: Default import (no braces, no commas, single identifier)\r\n    if (!cleaned.includes('{') && !cleaned.includes(',') && cleaned.length > 0) {\r\n      // Verify it's a valid identifier\r\n      if (/^[\\w$]+$/.test(cleaned)) {\r\n        result.default = cleaned;\r\n        result.items.push(cleaned);\r\n        if (logger) logger.trace(`[ImportResolver]   \u2192 Default import: ${cleaned}`);\r\n        return result;\r\n      }\r\n    }\r\n\r\n    // \u2705 Case 5: Combined default + named: import defaultExport, { x, y }\r\n    if (cleaned.includes('{') && cleaned.includes(',')) {\r\n      const beforeBrace = cleaned.split('{')[0].trim();\r\n      if (beforeBrace && beforeBrace !== ',' && /^[\\w$]+$/.test(beforeBrace)) {\r\n        result.default = beforeBrace;\r\n        // Also parse the named imports\r\n        const namedMatch2 = cleaned.match(/\\{(.+?)\\}/);\r\n        if (namedMatch2) {\r\n          this.extractNamedItems(namedMatch2[1], result, logger);\r\n        }\r\n        return result.items.length > 0 ? result : null;\r\n      }\r\n    }\r\n\r\n    // \u2705 Debug: Nothing matched\r\n    if (logger) {\r\n      logger.warn(`[ImportResolver]   \u26A0\uFE0F No valid import pattern detected`);\r\n      logger.debug(`[ImportResolver]   Cleaned was: \"${cleaned}\"`);\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * \u2705 NEW: Extract named items from a comma-separated string\r\n   * Handles: \"x, y, z\" and \"x as y, z as w\" patterns\r\n   */\r\n  extractNamedItems(itemsString, result, logger = null) {\r\n    const items = itemsString.split(',');\r\n    \r\n    if (logger) {\r\n      logger.trace(`[ImportResolver]     Found ${items.length} comma-separated items`);\r\n    }\r\n\r\n    items.forEach((item) => {\r\n      const trimmed = item.trim();\r\n      \r\n      // Skip empty items\r\n      if (!trimmed || trimmed.length === 0) return;\r\n      \r\n      // Skip if it looks like a comment left over\r\n      if (trimmed.startsWith('//') || trimmed.startsWith('*')) return;\r\n\r\n      // Handle \"x as y\" syntax - take the alias (the part after 'as')\r\n      const asMatch = trimmed.match(/^(\\w+)\\s+as\\s+(\\w+)$/);\r\n      let importName;\r\n      \r\n      if (asMatch) {\r\n        // \"x as y\" \u2192 use \"y\"\r\n        importName = asMatch[2];\r\n        if (logger) logger.trace(`[ImportResolver]       \"${asMatch[1]} as ${asMatch[2]}\" \u2192 ${importName}`);\r\n      } else {\r\n        // Simple identifier\r\n        importName = trimmed;\r\n        if (logger) logger.trace(`[ImportResolver]       \"${trimmed}\"`);\r\n      }\r\n\r\n      // Validate it's a proper identifier\r\n      if (/^[\\w$]+$/.test(importName) && !result.items.includes(importName)) {\r\n        result.items.push(importName);\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Resolve imports from source code directly\r\n   * \u2705 NEW METHOD: Accepts sourceCode and parses multi-line imports automatically\r\n   */\r\n  resolveFromSource(sourceCode, logger = null) {\r\n    // Parse imports from source\r\n    const parsedImports = this.parseImportsFromSource(sourceCode, logger);\r\n\r\n    if (logger) {\r\n      logger.info(`[ImportResolver] Parsed ${parsedImports.length} import statements`);\r\n      parsedImports.forEach((imp, idx) => {\r\n        logger.debug(`[ImportResolver]   [${idx}] ${imp.source} \u2192 [${imp.items.join(', ')}]`);\r\n      });\r\n    }\r\n\r\n    // Group by source\r\n    const groupedBySource = {};\r\n    parsedImports.forEach(imp => {\r\n      if (!groupedBySource[imp.source]) {\r\n        groupedBySource[imp.source] = [];\r\n      }\r\n      groupedBySource[imp.source] = groupedBySource[imp.source].concat(imp.items);\r\n    });\r\n\r\n    // \u2705 Reset results before resolving\r\n    this.results = {\r\n      resolved: [],\r\n      unresolved: [],\r\n      errors: [],\r\n    };\r\n\r\n    // Resolve each unique source\r\n    Object.entries(groupedBySource).forEach(([source, items]) => {\r\n      this.resolve(source, items);\r\n    });\r\n\r\n    return {\r\n      imports: this.results,\r\n      summary: this.getSummary(),\r\n      parsed: parsedImports,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Main resolution entry point\r\n   * Tries multiple fallback locations\r\n   */\r\n  resolve(importPath, importedItems = [], options = {}) {\r\n    // Check cache first\r\n    const cacheKey = `${importPath}:${JSON.stringify(importedItems)}`;\r\n    if (this.resolvedCache.has(cacheKey)) {\r\n      return this.resolvedCache.get(cacheKey);\r\n    }\r\n    if (this.unresolvedCache.has(cacheKey)) {\r\n      return this.unresolvedCache.get(cacheKey);\r\n    }\r\n\r\n    const result = {\r\n      original: importPath,\r\n      items: importedItems,\r\n      resolved: null,\r\n      actualPath: null,\r\n      type: null,\r\n      source: null,\r\n      isValid: false,\r\n      reason: null,\r\n      fallbacks: [],\r\n    };\r\n\r\n    // STEP 1: Check if it's a framework package\r\n    if (this.isFrameworkPackage(importPath)) {\r\n      const stepResult = this.resolveFrameworkPackage(importPath, importedItems);\r\n      if (stepResult.isValid) {\r\n        result.resolved = stepResult.resolved;\r\n        result.actualPath = stepResult.actualPath;\r\n        result.type = 'framework';\r\n        result.source = 'framework';\r\n        result.isValid = true;\r\n        result.reason = 'Resolved from framework mappings';\r\n        this.resolvedCache.set(cacheKey, result);\r\n        this.results.resolved.push(result);\r\n        return result;\r\n      }\r\n      result.fallbacks.push({\r\n        step: 1,\r\n        tried: 'framework-package',\r\n        found: false,\r\n        reason: stepResult.reason,\r\n      });\r\n    }\r\n\r\n    // STEP 2: Check local project code\r\n    if (!this.isScopedPackage(importPath)) {\r\n      const stepResult = this.resolveLocalImport(importPath, importedItems);\r\n      if (stepResult.isValid) {\r\n        result.resolved = stepResult.resolved;\r\n        result.actualPath = stepResult.actualPath;\r\n        result.type = 'local';\r\n        result.source = 'local';\r\n        result.isValid = true;\r\n        result.reason = `Found in local project at ${stepResult.actualPath}`;\r\n        this.resolvedCache.set(cacheKey, result);\r\n        this.results.resolved.push(result);\r\n        return result;\r\n      }\r\n      result.fallbacks.push({\r\n        step: 2,\r\n        tried: 'local-code',\r\n        locations: stepResult.searchedLocations,\r\n        found: false,\r\n        reason: stepResult.reason,\r\n      });\r\n    }\r\n\r\n    // STEP 3: Check package cache\r\n    if (this.options.cacheEnabled) {\r\n      const stepResult = this.resolveFromCache(importPath, importedItems);\r\n      if (stepResult.isValid) {\r\n        result.resolved = stepResult.resolved;\r\n        result.actualPath = stepResult.actualPath;\r\n        result.type = 'cache';\r\n        result.source = 'cache';\r\n        result.isValid = true;\r\n        result.reason = `Found in package cache at ${stepResult.actualPath}`;\r\n        this.resolvedCache.set(cacheKey, result);\r\n        this.results.resolved.push(result);\r\n        return result;\r\n      }\r\n      result.fallbacks.push({\r\n        step: 3,\r\n        tried: 'package-cache',\r\n        found: false,\r\n        reason: stepResult.reason,\r\n      });\r\n    }\r\n\r\n    // STEP 4: Not found\r\n    result.isValid = false;\r\n    result.source = 'error';\r\n    result.reason = this.generateErrorMessage(importPath, result.fallbacks);\r\n\r\n    if (!this.options.ignoreUnresolved) {\r\n      this.results.errors.push(result);\r\n    }\r\n    this.unresolvedCache.set(cacheKey, result);\r\n    this.results.unresolved.push(result);\r\n\r\n    return result;\r\n  }\r\n\r\n  isFrameworkPackage(importPath) {\r\n    return importPath.startsWith('@flutterjs/') ||\r\n           importPath.startsWith('@package:');\r\n  }\r\n\r\n  isScopedPackage(importPath) {\r\n    return importPath.startsWith('@');\r\n  }\r\n\r\n  resolveFrameworkPackage(importPath, importedItems) {\r\n    if (this.frameworkPackages[importPath]) {\r\n      return {\r\n        isValid: true,\r\n        resolved: this.frameworkPackages[importPath],\r\n        actualPath: this.frameworkPackages[importPath],\r\n        reason: 'Found in framework package mappings',\r\n      };\r\n    }\r\n\r\n    if (this.customPackageMappings[importPath]) {\r\n      return {\r\n        isValid: true,\r\n        resolved: this.customPackageMappings[importPath],\r\n        actualPath: this.customPackageMappings[importPath],\r\n        reason: 'Found in custom package mappings',\r\n      };\r\n    }\r\n\r\n    return {\r\n      isValid: false,\r\n      reason: `Framework package \"${importPath}\" not found in mappings`,\r\n    };\r\n  }\r\n\r\n  resolveLocalImport(importPath, importedItems) {\r\n    const searchedLocations = [];\r\n\r\n    if (importPath.startsWith('./') || importPath.startsWith('../')) {\r\n      const fullPath = path.resolve(this.options.projectRoot, importPath);\r\n      searchedLocations.push(fullPath);\r\n\r\n      if (this.fileExists(fullPath)) {\r\n        return {\r\n          isValid: true,\r\n          resolved: importPath,\r\n          actualPath: fullPath,\r\n          reason: 'Relative import found',\r\n        };\r\n      }\r\n\r\n      if (this.fileExists(`${fullPath}.js`)) {\r\n        return {\r\n          isValid: true,\r\n          resolved: importPath,\r\n          actualPath: `${fullPath}.js`,\r\n          reason: 'Relative import found (with .js)',\r\n        };\r\n      }\r\n\r\n      return {\r\n        isValid: false,\r\n        searchedLocations,\r\n        reason: `Relative import not found: ${importPath}`,\r\n      };\r\n    }\r\n\r\n    for (const searchPath of this.localSearchPaths) {\r\n      const fullPath = path.resolve(\r\n        this.options.projectRoot,\r\n        searchPath,\r\n        importPath\r\n      );\r\n      searchedLocations.push(fullPath);\r\n\r\n      const indexPath = path.join(fullPath, 'index.js');\r\n      if (this.fileExists(indexPath)) {\r\n        return {\r\n          isValid: true,\r\n          resolved: importPath,\r\n          actualPath: indexPath,\r\n          reason: `Found in ${searchPath}/${importPath}/index.js`,\r\n        };\r\n      }\r\n\r\n      if (this.fileExists(`${fullPath}.js`)) {\r\n        return {\r\n          isValid: true,\r\n          resolved: importPath,\r\n          actualPath: `${fullPath}.js`,\r\n          reason: `Found in ${searchPath}/${importPath}.js`,\r\n        };\r\n      }\r\n\r\n      if (this.fileExists(`${fullPath}.fjs`)) {\r\n        return {\r\n          isValid: true,\r\n          resolved: importPath,\r\n          actualPath: `${fullPath}.fjs`,\r\n          reason: `Found in ${searchPath}/${importPath}.fjs`,\r\n        };\r\n      }\r\n    }\r\n\r\n    return {\r\n      isValid: false,\r\n      searchedLocations,\r\n      reason: `Local import not found in: ${this.localSearchPaths.join(', ')}`,\r\n    };\r\n  }\r\n\r\n  resolveFromCache(importPath, importedItems) {\r\n    return {\r\n      isValid: false,\r\n      reason: 'Package cache resolution not yet implemented',\r\n    };\r\n  }\r\n\r\n  fileExists(filePath) {\r\n    try {\r\n      return fs.existsSync(filePath);\r\n    } catch (error) {\r\n      return false;\r\n    }\r\n  }\r\n\r\n  generateErrorMessage(importPath, fallbacks) {\r\n    let message = `\u274C Import not found: \"${importPath}\"\\n\\nResolution chain:\\n`;\r\n\r\n    fallbacks.forEach((step) => {\r\n      message += `  ${step.step}. Checked ${step.tried}: NOT FOUND\\n`;\r\n\r\n      if (step.locations) {\r\n        message += `     Locations searched:\\n`;\r\n        step.locations.forEach((loc) => {\r\n          message += `       - ${loc}\\n`;\r\n        });\r\n      }\r\n\r\n      if (step.reason) {\r\n        message += `     (${step.reason})\\n`;\r\n      }\r\n    });\r\n\r\n    message += `\\nSuggestions:\\n`;\r\n    message += `  \u2022 Verify the import path is correct\\n`;\r\n    message += `  \u2022 Check that the file exists in your project\\n`;\r\n    message += `  \u2022 Add a custom package mapping if needed: addPackageMapping()\\n`;\r\n\r\n    return message;\r\n  }\r\n\r\n  resolveImports(imports) {\r\n    this.results = {\r\n      resolved: [],\r\n      unresolved: [],\r\n      errors: [],\r\n    };\r\n\r\n    imports.forEach((imp) => {\r\n      this.resolve(imp.source, imp.items);\r\n    });\r\n\r\n    return {\r\n      imports: this.results,\r\n      summary: this.getSummary(),\r\n    };\r\n  }\r\n\r\n  addPackageMapping(packageName, actualPath) {\r\n    if (packageName.startsWith('@flutterjs/') || packageName.startsWith('@package:')) {\r\n      this.customPackageMappings[packageName] = actualPath;\r\n      console.log(`\u2713 Added mapping: ${packageName} \u2192 ${actualPath}`);\r\n    } else {\r\n      console.warn(`\u26A0 Framework mappings should start with @flutterjs/ or @package:`);\r\n    }\r\n  }\r\n\r\n  addPackageMappings(mappings) {\r\n    Object.entries(mappings).forEach(([pkg, path]) => {\r\n      this.addPackageMapping(pkg, path);\r\n    });\r\n  }\r\n\r\n  getPackageMappings() {\r\n    return {\r\n      framework: this.frameworkPackages,\r\n      custom: this.customPackageMappings,\r\n    };\r\n  }\r\n\r\n  setLocalSearchPaths(paths) {\r\n    this.localSearchPaths = paths;\r\n    console.log(`\u2713 Set local search paths: ${paths.join(', ')}`);\r\n  }\r\n\r\n  getSummary() {\r\n    const total = this.results.resolved.length + this.results.unresolved.length;\r\n    const resolved = this.results.resolved.length;\r\n    const unresolved = this.results.unresolved.length;\r\n\r\n    return {\r\n      total,\r\n      resolved,\r\n      unresolved,\r\n      errors: this.results.errors.length,\r\n      resolutionRate: total > 0 ? ((resolved / total) * 100).toFixed(2) + '%' : 'N/A',\r\n      bySource: {\r\n        framework: this.results.resolved.filter((r) => r.source === 'framework').length,\r\n        local: this.results.resolved.filter((r) => r.source === 'local').length,\r\n        cache: this.results.resolved.filter((r) => r.source === 'cache').length,\r\n      },\r\n    };\r\n  }\r\n\r\n  generateReport() {\r\n    const summary = this.getSummary();\r\n\r\n    let report = `\r\n\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n\u2551         IMPORT RESOLUTION REPORT                                          \u2551\r\n\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D\r\n\r\n\uD83D\uDCCA Summary\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n  Total Imports:    ${summary.total}\r\n  \u2713 Resolved:       ${summary.resolved} (${summary.resolutionRate})\r\n  \u2717 Unresolved:     ${summary.unresolved}\r\n  \u26A0 Errors:         ${summary.errors}\r\n\r\n\uD83D\uDCCD Resolution Sources\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n  Framework:        ${summary.bySource.framework}\r\n  Local Code:       ${summary.bySource.local}\r\n  Package Cache:    ${summary.bySource.cache}\r\n\r\n${this.results.unresolved.length > 0 ? `\r\n\u26A0\uFE0F  UNRESOLVED IMPORTS\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n${this.results.unresolved\r\n          .map(\r\n            (imp) =>\r\n              `  \u2717 ${imp.original}\r\n     Reason: ${imp.reason}`\r\n          )\r\n          .join('\\n')}\r\n` : ''}\r\n\r\n${this.results.errors.length > 0 ? `\r\n\uD83D\uDD34 ERRORS\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n${this.results.errors.map((err) => `  \u2022 ${err.reason}`).join('\\n')}\r\n` : ''}\r\n`;\r\n\r\n    return report;\r\n  }\r\n\r\n  clearCache() {\r\n    this.resolvedCache.clear();\r\n    this.unresolvedCache.clear();\r\n    console.log('\u2713 Resolution cache cleared');\r\n  }\r\n}\r\n\r\nexport { ImportResolver };"],
+  "mappings": "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",
+  "names": ["fs", "path", "ImportResolver", "options", "sourceCode", "logger", "imports", "importRegex", "match", "matchCount", "importClause", "modulePath", "parsed", "imp", "idx", "clause", "cleaned", "result", "namespaceMatch", "namedMatch", "itemsString", "beforeBrace", "namedMatch2", "items", "item", "trimmed", "asMatch", "importName", "parsedImports", "groupedBySource", "source", "importPath", "importedItems", "cacheKey", "stepResult", "searchedLocations", "fullPath", "searchPath", "indexPath", "filePath", "fallbacks", "message", "step", "loc", "packageName", "actualPath", "mappings", "pkg", "paths", "total", "resolved", "unresolved", "r", "summary", "err"]
+}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/flutter_resolver_config.js b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutter_resolver_config.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/dist/flutter_resolver_config.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutter_resolver_config.js
diff --git a/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutter_resolver_config.js.map b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutter_resolver_config.js.map
new file mode 100644
index 00000000..b571d5ad
--- /dev/null
+++ b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutter_resolver_config.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/flutter_resolver_config.js"],
+  "sourcesContent": ["/**\r\n * Import Resolver Configuration\r\n * \r\n * Define your custom package mappings and resolver settings here\r\n */\r\n\r\nexport const resolverConfig = {\r\n  frameworkType: 'flutterjs',\r\n  ignoreUnresolved: false,\r\n  cacheEnabled: false,\r\n\r\n  // \u2705 CORRECTED: Specify exact locations for each package\r\n  customPackageMappings: {\r\n    // Under packages/flutterjs_engine/src/\r\n    '@flutterjs/runtime': './flutterjs_engine/src/runtime',\r\n    '@flutterjs/vdom': './flutterjs_engine/src/vdom',\r\n\r\n    // Under packages/flutterjs_engine/package/\r\n    '@flutterjs/material': './flutterjs_engine/package/material',\r\n    '@flutterjs/http': './flutterjs_engine/package/http',\r\n\r\n    // Add others as needed\r\n    '@flutterjs/core': './flutterjs_engine/src/core',\r\n    '@flutterjs/foundation': './flutterjs_engine/src/foundation',\r\n    '@flutterjs/widgets': './flutterjs_engine/package/widgets',\r\n  },\r\n\r\n  // \u2705 CORRECTED: Search paths\r\n  localSearchPaths: [\r\n    'packages/flutterjs_engine/src',           // runtime, vdom\r\n    'packages/flutterjs_engine/package',       // material, http\r\n    'src',\r\n    'lib',\r\n    'packages',\r\n    'modules',\r\n    'components',\r\n    'screens',\r\n    'widgets',\r\n    '.',\r\n  ],\r\n\r\n  packageAliases: {\r\n    'flutter': '@flutterjs/material',\r\n    'material': '@flutterjs/material',\r\n    'http': '@flutterjs/http',\r\n  },\r\n\r\n  strict: {\r\n    enforceNamingConventions: false,\r\n    requireVersions: false,\r\n    detectCircularImports: true,\r\n  },\r\n};\r\n\r\n/**\r\n * Create and configure resolver\r\n */\r\nexport function createResolver(options = {}) {\r\n  const { ImportResolver } = import('./flutter_import_resolver.js');\r\n\r\n  const resolver = new ImportResolver({\r\n    projectRoot: process.cwd(),\r\n    ...resolverConfig,\r\n    ...options,\r\n  });\r\n\r\n  // Add all custom mappings\r\n  if (resolverConfig.customPackageMappings) {\r\n    resolver.addPackageMappings(resolverConfig.customPackageMappings);\r\n  }\r\n\r\n  // Set local search paths\r\n  if (resolverConfig.localSearchPaths) {\r\n    resolver.setLocalSearchPaths(resolverConfig.localSearchPaths);\r\n  }\r\n\r\n  return resolver;\r\n}\r\n\r\n/**\r\n * Preset configurations for different project types\r\n */\r\nexport const presets = {\r\n  // Simple web app\r\n  web: {\r\n    localSearchPaths: ['src', 'lib', 'components', '.'],\r\n    customPackageMappings: {},\r\n  },\r\n\r\n  // Monorepo structure\r\n  monorepo: {\r\n    localSearchPaths: [\r\n      'packages/ui',\r\n      'packages/core',\r\n      'packages/models',\r\n      'packages/utils',\r\n      'src',\r\n      '.',\r\n    ],\r\n    customPackageMappings: {\r\n      '@package:ui': './packages/ui',\r\n      '@package:core': './packages/core',\r\n      '@package:models': './packages/models',\r\n      '@package:utils': './packages/utils',\r\n    },\r\n  },\r\n\r\n  // Flutter-style structure\r\n  flutter: {\r\n    localSearchPaths: [\r\n      'lib',\r\n      'lib/screens',\r\n      'lib/widgets',\r\n      'lib/models',\r\n      'lib/services',\r\n      'lib/utils',\r\n      '.',\r\n    ],\r\n    customPackageMappings: {\r\n      \"@flutterjs/runtime\": \"file:../../../../runtime\",\r\n      \"@flutterjs/vdom\": \"file:../../../../vdom\",\r\n      \"@flutterjs/analyzer\": \"file:../../../../analyzer\",\r\n      '@flutterjs/material': 'file:../../../../../package/material',\r\n    },\r\n  },\r\n};\r\n"],
+  "mappings": "AAMO,MAAMA,EAAiB,CAC5B,cAAe,YACf,iBAAkB,GAClB,aAAc,GAGd,sBAAuB,CAErB,qBAAsB,iCACtB,kBAAmB,8BAGnB,sBAAuB,sCACvB,kBAAmB,kCAGnB,kBAAmB,8BACnB,wBAAyB,oCACzB,qBAAsB,oCACxB,EAGA,iBAAkB,CAChB,gCACA,oCACA,MACA,MACA,WACA,UACA,aACA,UACA,UACA,GACF,EAEA,eAAgB,CACd,QAAW,sBACX,SAAY,sBACZ,KAAQ,iBACV,EAEA,OAAQ,CACN,yBAA0B,GAC1B,gBAAiB,GACjB,sBAAuB,EACzB,CACF,EAKO,SAASC,EAAeC,EAAU,CAAC,EAAG,CAC3C,KAAM,CAAE,eAAAC,CAAe,EAAI,OAAO,8BAA8B,EAE1DC,EAAW,IAAID,EAAe,CAClC,YAAa,QAAQ,IAAI,EACzB,GAAGH,EACH,GAAGE,CACL,CAAC,EAGD,OAAIF,EAAe,uBACjBI,EAAS,mBAAmBJ,EAAe,qBAAqB,EAI9DA,EAAe,kBACjBI,EAAS,oBAAoBJ,EAAe,gBAAgB,EAGvDI,CACT,CAKO,MAAMC,EAAU,CAErB,IAAK,CACH,iBAAkB,CAAC,MAAO,MAAO,aAAc,GAAG,EAClD,sBAAuB,CAAC,CAC1B,EAGA,SAAU,CACR,iBAAkB,CAChB,cACA,gBACA,kBACA,iBACA,MACA,GACF,EACA,sBAAuB,CACrB,cAAe,gBACf,gBAAiB,kBACjB,kBAAmB,oBACnB,iBAAkB,kBACpB,CACF,EAGA,QAAS,CACP,iBAAkB,CAChB,MACA,cACA,cACA,aACA,eACA,YACA,GACF,EACA,sBAAuB,CACrB,qBAAsB,2BACtB,kBAAmB,wBACnB,sBAAuB,4BACvB,sBAAuB,sCACzB,CACF,CACF",
+  "names": ["resolverConfig", "createResolver", "options", "ImportResolver", "resolver", "presets"]
+}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/flutterjs_logger.js b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_logger.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/dist/flutterjs_logger.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_logger.js
diff --git a/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_logger.js.map b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_logger.js.map
new file mode 100644
index 00000000..fa1348ca
--- /dev/null
+++ b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_logger.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/flutterjs_logger.js"],
+  "sourcesContent": ["/**\r\n * FlutterJS Logger - Centralized Debug Output System\r\n * \r\n * Instead of console.log() everywhere, use this logger to:\r\n * - Write debug logs to a file (.debug folder)\r\n * - Maintain clean console output\r\n * - Enable/disable debug modes per component\r\n * - Group related logs together\r\n * - Support multiple log levels\r\n */\r\n\r\nimport fs from 'fs';\r\nimport path from 'path';\r\n\r\nclass Logger {\r\n  constructor(options = {}) {\r\n    this.options = {\r\n      debugDir: '.debug',\r\n      enabled: true,\r\n      level: 'info',  // 'error', 'warn', 'info', 'debug', 'trace'\r\n      writeToFile: true,\r\n      writeToConsole: false,  // Set to true only for critical errors\r\n      includeTimestamp: true,\r\n      includeStackTrace: false,\r\n      maxFileSize: 10 * 1024 * 1024,  // 10MB\r\n      ...options,\r\n    };\r\n\r\n    this.logLevels = {\r\n      'error': 0,\r\n      'warn': 1,\r\n      'info': 2,\r\n      'debug': 3,\r\n      'trace': 4,\r\n    };\r\n\r\n    this.currentLevel = this.logLevels[this.options.level];\r\n    this.logs = [];\r\n    this.logSessions = {};\r\n    this.indentLevel = 0;\r\n\r\n    // Ensure debug directory exists\r\n    if (this.options.writeToFile) {\r\n      this.ensureDebugDir();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Ensure .debug directory exists\r\n   */\r\n  ensureDebugDir() {\r\n    if (!fs.existsSync(this.options.debugDir)) {\r\n      fs.mkdirSync(this.options.debugDir, { recursive: true });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get file path for a specific component\r\n   */\r\n  getLogFilePath(component = 'general') {\r\n    return path.join(this.options.debugDir, `${component}.log`);\r\n  }\r\n\r\n  /**\r\n   * Check if log level should be written\r\n   */\r\n  shouldLog(level) {\r\n    return this.logLevels[level] <= this.currentLevel;\r\n  }\r\n\r\n  /**\r\n   * Format log entry\r\n   */\r\n  formatEntry(level, component, message, data = null) {\r\n    const timestamp = this.options.includeTimestamp\r\n      ? new Date().toISOString()\r\n      : '';\r\n\r\n    const indent = '  '.repeat(this.indentLevel);\r\n    const levelStr = level.toUpperCase().padEnd(5);\r\n    const componentStr = component.padEnd(20);\r\n\r\n    let entry = `${timestamp} [${levelStr}] [${componentStr}] ${indent}${message}`;\r\n\r\n    if (data) {\r\n      entry += '\\n' + indent + JSON.stringify(data, null, 2);\r\n    }\r\n\r\n    return entry;\r\n  }\r\n\r\n  /**\r\n   * Internal write method\r\n   */\r\n  write(level, component, message, data) {\r\n    if (!this.shouldLog(level)) return;\r\n\r\n    const entry = this.formatEntry(level, component, message, data);\r\n    this.logs.push(entry);\r\n\r\n    // Write to console if enabled (only for critical messages)\r\n    if (this.options.writeToConsole && level === 'error') {\r\n      console.error(`${component}: ${message}`, data || '');\r\n    }\r\n\r\n    // Write to file\r\n    if (this.options.writeToFile) {\r\n      this.writeToFile(component, entry);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Write entry to file\r\n   */\r\n  writeToFile(component, entry) {\r\n    try {\r\n      const filePath = this.getLogFilePath(component);\r\n      fs.appendFileSync(filePath, entry + '\\n', 'utf-8');\r\n\r\n      // Check file size and rotate if needed\r\n      const stats = fs.statSync(filePath);\r\n      if (stats.size > this.options.maxFileSize) {\r\n        this.rotateLogFile(filePath);\r\n      }\r\n    } catch (error) {\r\n      console.error(`Logger failed to write to ${component}: ${error.message}`);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Rotate log file when it gets too large\r\n   */\r\n  rotateLogFile(filePath) {\r\n    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');\r\n    const backupPath = filePath.replace('.log', `.${timestamp}.log`);\r\n    fs.renameSync(filePath, backupPath);\r\n  }\r\n\r\n  // =========================================================================\r\n  // PUBLIC API\r\n  // =========================================================================\r\n\r\n  /**\r\n   * Start a named session (group of related logs)\r\n   */\r\n  startSession(name, component = 'general') {\r\n    this.logSessions[name] = {\r\n      component,\r\n      startTime: Date.now(),\r\n      startIndent: this.indentLevel,\r\n    };\r\n    this.indent();\r\n    this.info(component, `\u25BA START SESSION: ${name}`);\r\n  }\r\n\r\n  /**\r\n   * End a named session\r\n   */\r\n  endSession(name, component = 'general') {\r\n    if (this.logSessions[name]) {\r\n      const duration = Date.now() - this.logSessions[name].startTime;\r\n      this.info(component, `\u25C4 END SESSION: ${name} (${duration}ms)`);\r\n      this.unindent();\r\n      delete this.logSessions[name];\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Increase indent level\r\n   */\r\n  indent() {\r\n    this.indentLevel++;\r\n  }\r\n\r\n  /**\r\n   * Decrease indent level\r\n   */\r\n  unindent() {\r\n    this.indentLevel = Math.max(0, this.indentLevel - 1);\r\n  }\r\n\r\n  /**\r\n   * Error level\r\n   */\r\n  error(component, message, data) {\r\n    this.write('error', component, message, data);\r\n  }\r\n\r\n  /**\r\n   * Warning level\r\n   */\r\n  warn(component, message, data) {\r\n    this.write('warn', component, message, data);\r\n  }\r\n\r\n  /**\r\n   * Info level\r\n   */\r\n  info(component, message, data) {\r\n    this.write('info', component, message, data);\r\n  }\r\n\r\n  /**\r\n   * Debug level\r\n   */\r\n  debug(component, message, data) {\r\n    this.write('debug', component, message, data);\r\n  }\r\n\r\n  /**\r\n   * Trace level (most verbose)\r\n   */\r\n  trace(component, message, data) {\r\n    this.write('trace', component, message, data);\r\n  }\r\n\r\n  /**\r\n   * Log a method entry/exit pair\r\n   */\r\n  methodEntry(component, methodName, params = null) {\r\n    this.indent();\r\n    this.trace(component, `\u2192 ${methodName}()`, params);\r\n  }\r\n\r\n  /**\r\n   * Log method exit\r\n   */\r\n  methodExit(component, methodName, result = null) {\r\n    this.trace(component, `\u2190 ${methodName}()`, result);\r\n    this.unindent();\r\n  }\r\n\r\n  /**\r\n   * Log a successful step\r\n   */\r\n  success(component, message, data) {\r\n    this.write('info', component, `\u2713 ${message}`, data);\r\n  }\r\n\r\n  /**\r\n   * Log a failure\r\n   */\r\n  failure(component, message, error) {\r\n    this.write('error', component, `\u2717 ${message}`, error);\r\n  }\r\n\r\n  /**\r\n   * Log a step count (e.g., \"Found 5 widgets\")\r\n   */\r\n  count(component, label, count) {\r\n    this.write('info', component, `${label}: ${count}`);\r\n  }\r\n\r\n  /**\r\n   * Create a scoped logger for a specific component\r\n   */\r\n  createComponentLogger(componentName) {\r\n    return {\r\n      error: (msg, data) => this.error(componentName, msg, data),\r\n      warn: (msg, data) => this.warn(componentName, msg, data),\r\n      info: (msg, data) => this.info(componentName, msg, data),\r\n      debug: (msg, data) => this.debug(componentName, msg, data),\r\n      trace: (msg, data) => this.trace(componentName, msg, data),\r\n      success: (msg, data) => this.success(componentName, msg, data),\r\n      failure: (msg, err) => this.failure(componentName, msg, err),\r\n      methodEntry: (method, params) => this.methodEntry(componentName, method, params),\r\n      methodExit: (method, result) => this.methodExit(componentName, method, result),\r\n      startSession: (name) => this.startSession(name, componentName),\r\n      endSession: (name) => this.endSession(name, componentName),\r\n      indent: () => this.indent(),\r\n      unindent: () => this.unindent(),\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get all logs as a single string\r\n   */\r\n  getAllLogs() {\r\n    return this.logs.join('\\n');\r\n  }\r\n\r\n  /**\r\n   * Save all logs to files\r\n   */\r\n  saveLogs() {\r\n    try {\r\n      const allLogsPath = path.join(this.options.debugDir, '_all.log');\r\n      fs.writeFileSync(allLogsPath, this.getAllLogs(), 'utf-8');\r\n      return allLogsPath;\r\n    } catch (error) {\r\n      console.error('Failed to save logs:', error.message);\r\n      return null;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Clear debug directory\r\n   */\r\n  clearDebugDir() {\r\n    try {\r\n      if (fs.existsSync(this.options.debugDir)) {\r\n        fs.rmSync(this.options.debugDir, { recursive: true, force: true });\r\n        this.ensureDebugDir();\r\n      }\r\n    } catch (error) {\r\n      console.error('Failed to clear debug directory:', error.message);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Read all debug files and return as object\r\n   */\r\n  readDebugFiles() {\r\n    const files = {};\r\n    try {\r\n      const entries = fs.readdirSync(this.options.debugDir);\r\n      entries.forEach((file) => {\r\n        if (file.endsWith('.log')) {\r\n          const filePath = path.join(this.options.debugDir, file);\r\n          files[file] = fs.readFileSync(filePath, 'utf-8');\r\n        }\r\n      });\r\n    } catch (error) {\r\n      console.error('Failed to read debug files:', error.message);\r\n    }\r\n    return files;\r\n  }\r\n\r\n  /**\r\n   * Get analysis report of logs (counts, errors, warnings, etc.)\r\n   */\r\n  getReport() {\r\n    const report = {\r\n      totalEntries: this.logs.length,\r\n      errors: 0,\r\n      warnings: 0,\r\n      info: 0,\r\n      debug: 0,\r\n      trace: 0,\r\n      sessions: Object.keys(this.logSessions).length,\r\n      debugFiles: [],\r\n    };\r\n\r\n    this.logs.forEach((log) => {\r\n      if (log.includes('[ERROR]')) report.errors++;\r\n      else if (log.includes('[WARN]')) report.warnings++;\r\n      else if (log.includes('[INFO]')) report.info++;\r\n      else if (log.includes('[DEBUG]')) report.debug++;\r\n      else if (log.includes('[TRACE]')) report.trace++;\r\n    });\r\n\r\n    try {\r\n      report.debugFiles = fs.readdirSync(this.options.debugDir)\r\n        .filter((f) => f.endsWith('.log'));\r\n    } catch (error) {\r\n      // Ignore\r\n    }\r\n\r\n    return report;\r\n  }\r\n}\r\n\r\n/**\r\n * Global singleton logger instance\r\n */\r\nlet globalLogger = null;\r\n\r\nexport function initLogger(options = {}) {\r\n  globalLogger = new Logger(options);\r\n  return globalLogger;\r\n}\r\n\r\nexport function getLogger() {\r\n  if (!globalLogger) {\r\n    globalLogger = new Logger();\r\n  }\r\n  return globalLogger;\r\n}\r\n\r\nexport { Logger };\r\n"],
+  "mappings": "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",
+  "names": ["fs", "path", "Logger", "options", "component", "level", "message", "data", "timestamp", "indent", "levelStr", "componentStr", "entry", "filePath", "error", "backupPath", "name", "duration", "methodName", "params", "result", "label", "count", "componentName", "msg", "err", "method", "allLogsPath", "files", "file", "report", "log", "f", "globalLogger", "initLogger", "getLogger"]
+}
diff --git a/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_parser.js b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_parser.js
new file mode 100644
index 00000000..bd43f189
--- /dev/null
+++ b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_parser.js
@@ -0,0 +1,11 @@
+import{TokenType as n}from"./lexer.js";import{getLogger as x}from"./flutterjs_logger.js";class l{constructor(e,t){this.type=e,this.location=t}}class T extends l{constructor(e=[],t=null){super("Program",t),this.body=e}}class C extends l{constructor(e=[],t=null,s=null){super("ImportDeclaration",s),this.specifiers=e,this.source=t}}class k extends l{constructor(e=null,t=null,s=null){super("ImportSpecifier",s),this.imported=e,this.local=t}}class N extends l{constructor(e=null,t=null,s=null,i=null){super("ClassDeclaration",i),this.id=e,this.superClass=t,this.body=s}}class O extends l{constructor(e=[],t=[],s=null){super("ClassBody",s),this.fields=e,this.methods=t}}class $ extends l{constructor(e=null,t=null,s=null){super("FieldDeclaration",s),this.key=e,this.initialValue=t}}class A extends l{constructor(e=null,t=[],s=null,i=null){super("MethodDeclaration",i),this.key=e,this.params=t,this.body=s}}class E extends l{constructor(e=null,t=!1,s=null,i=null){super("Parameter",i),this.name=e,this.optional=t,this.defaultValue=s}}class D extends l{constructor(e=null,t=[],s=null,i=!1,r=null){super("FunctionDeclaration",r),this.id=e,this.params=t,this.body=s,this.isAsync=i}}class R extends l{constructor(e=[],t=null){super("BlockStatement",t),this.body=e}}class U extends l{constructor(e=null,t=null){super("ReturnStatement",t),this.argument=e}}class w extends l{constructor(e=null,t=null){super("ExpressionStatement",t),this.expression=e}}class o extends l{constructor(e="",t=null){super("Identifier",t),this.name=e}}class h extends l{constructor(e=null,t="",s="string",i=null){super("Literal",i),this.value=e,this.raw=t,this.literalType=s}}class b extends l{constructor(e=null,t=[],s=null){super("CallExpression",s),this.callee=e,this.args=t}}class P extends l{constructor(e=null,t=[],s=null){super("NewExpression",s),this.callee=e,this.args=t,this.isConst=!1}}class F extends l{constructor(e=[],t=null){super("ObjectLiteral",t),this.properties=e}}class S extends l{constructor(e=null,t=null,s=null){super("Property",s),this.key=e,this.value=t,this.shorthand=!1}}class g extends l{constructor(e=[],t=null,s=null){super("ArrowFunctionExpression",s),this.params=e,this.body=t}}class I extends l{constructor(e=null,t=null,s=!1,i=null){super("MemberExpression",i),this.object=e,this.property=t,this.computed=s}}class L{constructor(e=[],t={}){this.tokens=e,this.current=0,this.errors=[],this.options={strict:!1,...t},this.callStack=[],this.debugMode=!0}parse(){const e=[];for(;!this.isAtEnd();)try{const t=this.parseTopLevel();t&&t.type==="ImportDeclaration"&&console.log("DEBUG - ImportDeclaration:",JSON.stringify(t,null,2)),t&&e.push(t)}catch(t){this.errors.push(t),this.synchronize()}return new T(e)}skipComments(){for(;!this.isAtEnd()&&this.check(n.COMMENT);)this.advance()}isComment(){return this.isAtEnd()?!1:this.peek().type===n.COMMENT}parseTopLevel(){if(this.skipComments(),this.isAtEnd())return null;if(this.isKeyword("import"))return this.advance(),this.parseImportDeclaration();if(this.isKeyword("class"))return this.advance(),this.parseClassDeclaration();if(this.isKeyword("function"))return this.advance(),this.parseFunctionDeclaration();const e=this.parseExpression();return this.consumeStatementEnd(),new w(e,this.getLocation())}isKeyword(e){if(this.isAtEnd())return!1;const t=this.peek();return t.type===n.KEYWORD&&t.value===e}isPunctuation(e){if(this.isAtEnd())return!1;const t=this.peek();return t.type===n.PUNCTUATION&&t.value===e}isOperator(e){if(this.isAtEnd())return!1;const t=this.peek();return t.type===n.OPERATOR&&t.value===e}parseImportDeclaration(){const e=x().createComponentLogger("Parser.parseImportDeclaration");e.startSession("parseImportDeclaration");const t=this.getLocation(),s=[];if(e.trace(`  Starting import parse at token: ${this.peek().value}`),this.isPunctuation("{")){for(e.trace("  Found opening brace, parsing named imports..."),this.advance(),this.skipComments();!this.isPunctuation("}")&&!this.isAtEnd();){if(this.skipComments(),this.isPunctuation("}")){e.trace("  Found closing brace, exiting loop");break}if(!this.check(n.IDENTIFIER)){e.warn(`  Expected identifier but got: ${this.peek().value}`),this.advance();continue}const a=this.consume(n.IDENTIFIER,"Expected identifier").value,u=new o(a);e.trace(`    Imported: ${a}`);let p=u;if(this.skipComments(),this.isKeyword("as")){e.trace("    Found 'as' keyword"),this.advance(),this.skipComments();const m=this.consume(n.IDENTIFIER,"Expected identifier after as").value;p=new o(m),e.trace(`      Local name: ${m}`)}if(s.push(new k(u,p)),this.skipComments(),this.isPunctuation(",")){e.trace("    Found comma, continuing..."),this.advance(),this.skipComments();continue}else{e.trace("    No comma, expected closing brace next");break}}e.trace(`  Parsed ${s.length} named imports`),this.consume(n.PUNCTUATION,"Expected }")}else if(this.check(n.IDENTIFIER)&&this.peekAhead(1).value!=="from"){e.trace("  Found identifier without opening brace, parsing default import...");const a=this.consume(n.IDENTIFIER,"Expected identifier").value,u=new o(a),p=new o(a);if(s.push(new k(u,p)),e.trace(`  Default import: ${a}`),this.skipComments(),this.isPunctuation(",")&&(e.trace("  Found comma after default import, checking for named imports..."),this.advance(),this.skipComments(),this.isPunctuation("{"))){for(e.trace("  Found opening brace, parsing additional named imports..."),this.advance(),this.skipComments();!this.isPunctuation("}")&&!this.isAtEnd()&&(this.skipComments(),!this.isPunctuation("}"));){if(!this.check(n.IDENTIFIER)){this.advance();continue}const m=this.consume(n.IDENTIFIER,"Expected identifier").value,d=new o(m);let v=d;if(this.skipComments(),this.isKeyword("as")){this.advance(),this.skipComments();const y=this.consume(n.IDENTIFIER,"Expected identifier after as").value;v=new o(y)}if(s.push(new k(d,v)),this.skipComments(),this.isPunctuation(",")){this.advance(),this.skipComments();continue}else break}this.consume(n.PUNCTUATION,"Expected }")}}this.skipComments(),this.consume(n.KEYWORD,"Expected from"),this.skipComments();const i=this.consume(n.STRING,"Expected module path string"),r=new h(i.value,i.value,"string");return e.trace(`  Module path: ${r.value}`),e.trace(`  Total specifiers: ${s.length}`),this.consumeStatementEnd(),e.trace(`[parseImportDeclaration] SUCCESS
+`),new C(s,r,t)}peekAhead(e=1){const t=this.current+e;return t>=this.tokens.length?this.tokens[this.tokens.length-1]:this.tokens[t]}parseClassDeclaration(){const e=x().createComponentLogger("Parser.parseClassDeclaration");e.startSession("parseClassDeclaration"),e.trace(`  Current token: ${this.peek().value} (${this.peek().type})`);const t=this.getLocation(),s=this.consume(n.IDENTIFIER,"Expected class name"),i=new o(s.value);e.trace(`  Class name: ${i.name}`);let r=null;if(this.isKeyword("extends")){this.advance();const d=this.consume(n.IDENTIFIER,"Expected superclass name").value;r=new o(d),e.trace(`  Extends: ${r.name}`),this.isOperator("<")&&(this.advance(),this.consume(n.IDENTIFIER,"Expected type name"),this.consume(n.OPERATOR,"Expected >"))}e.trace("  Looking for opening brace..."),e.trace(`  Current token: ${this.peek().value} (${this.peek().type})`),this.consume(n.PUNCTUATION,"Expected {");const a=[],u=[];e.trace("  Parsing class body...");let p=0;for(;!this.isPunctuation("}")&&!this.isAtEnd()&&(this.skipComments(),!this.isPunctuation("}"));){if(e.trace(`    [item ${p}] Current token: ${this.peek().value} (${this.peek().type})`),this.isPunctuation(";")){e.trace("    Skipping semicolon"),this.advance();continue}if(this.isKeyword("constructor")){e.trace("    Found constructor"),u.push(this.parseMethodDeclaration()),p++;continue}if(this.check(n.IDENTIFIER)){const d=this.current,y=this.peek().value;if(e.trace(`    Found identifier: ${y}`),this.advance(),this.isOperator("=")){e.trace("      -> This is a FIELD (followed by =)"),this.current=d;try{a.push(this.parseFieldDeclaration()),e.trace("      Field parsed successfully"),p++;continue}catch(f){throw console.error(`      ERROR parsing field: ${f.message}`),f}}if(this.isPunctuation("(")){e.trace("      -> This is a METHOD (followed by '(')"),this.current=d;try{u.push(this.parseMethodDeclaration()),e.trace("      Method parsed successfully"),p++;continue}catch(f){throw console.error(`      ERROR parsing method: ${f.message}`),f}}e.trace("      -> Unknown pattern, skipping"),this.advance();continue}e.trace(`    Skipping unknown token: ${this.peek().value}`),this.advance()}e.trace(`  Class body parsing complete. Found ${a.length} fields, ${u.length} methods`),this.consume(n.PUNCTUATION,"Expected }");const m=new O(a,u);return e.trace(`[parseClassDeclaration] SUCCESS
+`),new N(i,r,m,t)}parseMethodDeclaration(){const e=x().createComponentLogger("Parser.parseMethodDeclaration");e.startSession("      [parseMethodDeclaration] STARTING"),e.trace(`        Current: ${this.peek().value}`);const t=this.getLocation();let s;this.isKeyword("constructor")?(s="constructor",this.advance()):s=this.consume(n.IDENTIFIER,"Expected method name").value,e.trace(`        Method name: ${s}`);const i=new o(s);this.consume(n.PUNCTUATION,"Expected (");const r=this.parseParameterList();e.trace(`        Parameters: ${r.length}`),this.consume(n.PUNCTUATION,"Expected )");let a=null;return this.isOperator("=>")?(e.trace("        Arrow function body"),this.advance(),a=this.parseExpression()):this.isPunctuation("{")&&(e.trace("        Block body"),this.advance(),a=this.parseBlock()),e.trace("      [parseMethodDeclaration] SUCCESS"),new A(i,r,a,t)}parseFieldDeclaration(){console.log("      [parseFieldDeclaration] STARTING"),console.log(`        Current: ${this.peek().value}`);const e=this.getLocation(),t=this.consume(n.IDENTIFIER,"Expected field name").value,s=new o(t);console.log(`        Field name: ${t}`);let i=null;if(this.isOperator("=")){console.log("        Found = operator, parsing initializer..."),this.advance();try{i=this.parseExpression(),console.log(`        Initializer parsed: ${i.type}`)}catch(r){throw console.error(`        ERROR parsing initializer: ${r.message}`),r}}return this.consumeStatementEnd(),console.log("      [parseFieldDeclaration] SUCCESS"),new $(s,i,e)}parseFunctionDeclaration(){const e=this.getLocation(),t=this.consume(n.IDENTIFIER,"Expected function name"),s=t.value?new o(t.value):null;this.consume(n.PUNCTUATION,"Expected (");const i=this.parseParameterList();this.consume(n.PUNCTUATION,"Expected )"),this.consume(n.PUNCTUATION,"Expected {");const r=this.parseBlock();return new D(s,i,r,!1,e)}parseParameterList(){const e=[];for(;!this.isPunctuation(")")&&!this.isAtEnd();){const t=this.getLocation();if(this.isPunctuation("{")){for(this.advance();!this.isPunctuation("}")&&!this.isAtEnd();){const s=this.consume(n.IDENTIFIER,"Expected param name").value;let i=null;if(this.isOperator("=")){this.advance();const r=this.peek();this.check(n.IDENTIFIER)?i=new o(this.advance().value):this.check(n.NUMBER)?i=new h(parseFloat(this.advance().value),"","number"):this.check(n.UNDEFINED)?(this.advance(),i=new h(void 0,"undefined","undefined")):this.check(n.NULL)?(this.advance(),i=new h(null,"null","null")):this.isKeyword("undefined")?(this.advance(),i=new h(void 0,"undefined","undefined")):this.isKeyword("null")&&(this.advance(),i=new h(null,"null","null"))}if(e.push(new E(new o(s),i!==null,i,t)),!this.isPunctuation(","))break;this.advance()}if(this.consume(n.PUNCTUATION,"Expected }"),this.isOperator("=")&&(this.advance(),this.isPunctuation("{"))){this.advance();let s=1;for(;s>0&&!this.isAtEnd();)this.isPunctuation("{")?s++:this.isPunctuation("}")&&s--,s>0&&this.advance();this.consume(n.PUNCTUATION,"Expected }")}}else if(this.check(n.IDENTIFIER)){const s=this.consume(n.IDENTIFIER,"Expected param name").value;let i=null;if(this.isOperator("=")){this.advance();const r=this.peek();this.check(n.IDENTIFIER)?i=new o(this.advance().value):this.check(n.NUMBER)?i=new h(parseFloat(this.advance().value),"","number"):this.check(n.UNDEFINED)?(this.advance(),i=new h(void 0,"undefined","undefined")):this.check(n.NULL)?(this.advance(),i=new h(null,"null","null")):this.isKeyword("undefined")?(this.advance(),i=new h(void 0,"undefined","undefined")):this.isKeyword("null")&&(this.advance(),i=new h(null,"null","null"))}e.push(new E(new o(s),i!==null,i,t))}else break;if(!this.isPunctuation(","))break;this.advance()}return e}parseBlock(){console.log(`
+[parseBlock] STARTING at token: ${this.peek().value}`);const e=this.getLocation(),t=[];for(;!this.isPunctuation("}")&&!this.isAtEnd()&&(this.skipComments(),!this.isPunctuation("}"));)if(console.log(`  [parseBlock] Current token: ${this.peek().value} (${this.peek().type})`),this.isKeyword("return")){console.log("    Found RETURN statement"),this.advance();let s=null;if(!this.isPunctuation(";")&&!this.isPunctuation("}")){console.log("    Parsing return argument...");try{s=this.parseExpression(),console.log("    Return argument parsed successfully")}catch(i){for(console.error(`    \u274C ERROR parsing return argument: ${i.message}`),console.error(`       Token was: ${this.peek().value}`);!this.isPunctuation(";")&&!this.isPunctuation("}")&&!this.isAtEnd();)this.advance()}}this.consumeStatementEnd(),t.push(new U(s,e))}else{console.log("    Parsing expression statement...");try{const s=this.parseExpression();console.log(`    Expression parsed successfully: ${s.type}`),this.consumeStatementEnd(),t.push(new w(s,e))}catch(s){for(console.error(`    \u274C ERROR parsing expression: ${s.message}`),console.error(`       Token was: ${this.peek().value}`);!this.isPunctuation(";")&&!this.isPunctuation("}")&&!this.isAtEnd();)this.advance();this.isPunctuation(";")&&this.advance()}}return this.isPunctuation("}")&&this.advance(),console.log(`[parseBlock] SUCCESS - ${t.length} statements
+`),new R(t,e)}parseExpression(){console.log(`    [parseExpression] Current token: ${this.peek().value}`);try{const e=this.parseAssignment();return console.log(`    [parseExpression] \u2713 Success, type: ${e.type}`),e}catch(e){throw console.error(`    [parseExpression] \u2717 Failed: ${e.message}`),e}}parseAssignment(){let e=this.parseTernary();if(this.isOperator("=")){this.advance();const t=this.parseAssignment();return{type:"AssignmentExpression",left:e,right:t}}return e}parseTernary(){let e=this.parseLogicalOr();if(this.isOperator("?")){this.advance();const t=this.parseExpression();this.consume(n.OPERATOR,"Expected :");const s=this.parseExpression();return{type:"ConditionalExpression",test:e,consequent:t,alternate:s}}return e}parseLogicalOr(){let e=this.parseLogicalAnd();for(;this.isOperator("||");){this.advance();const t=this.parseLogicalAnd();e={type:"LogicalExpression",operator:"||",left:e,right:t}}return e}parseLogicalAnd(){let e=this.parseEquality();for(;this.isOperator("&&");){this.advance();const t=this.parseEquality();e={type:"LogicalExpression",operator:"&&",left:e,right:t}}return e}parseEquality(){let e=this.parseRelational();for(;this.isOperator("===")||this.isOperator("!==")||this.isOperator("==")||this.isOperator("!=");){const t=this.advance().value,s=this.parseRelational();e={type:"BinaryExpression",operator:t,left:e,right:s}}return e}parseRelational(){let e=this.parseAdditive();for(;this.isOperator("<")||this.isOperator(">")||this.isOperator("<=")||this.isOperator(">=");){const t=this.advance().value,s=this.parseAdditive();e={type:"BinaryExpression",operator:t,left:e,right:s}}return e}parseAdditive(){let e=this.parseMultiplicative();for(;this.isOperator("+")||this.isOperator("-");){const t=this.advance().value,s=this.parseMultiplicative();e={type:"BinaryExpression",operator:t,left:e,right:s}}return e}parseMultiplicative(){let e=this.parseUnary();for(;this.isOperator("*")||this.isOperator("/")||this.isOperator("%");){const t=this.advance().value,s=this.parseUnary();e={type:"BinaryExpression",operator:t,left:e,right:s}}return e}parseUnary(){if(console.log(`        [parseUnary] Current: ${this.peek().value}`),this.isOperator("!")||this.isOperator("-")||this.isOperator("+")||this.isOperator("~")){const e=this.advance().value,t=this.parseUnary();return{type:"UnaryExpression",operator:e,argument:t}}return console.log("        [parseUnary] Calling parsePostfix"),this.parsePostfix()}parsePostfix(){console.log("        [parsePostfix] Starting, calling parseCall");let e=this.parseCall();for(console.log(`        [parsePostfix] parseCall returned: ${e.type||e.name}`),console.log(`        [parsePostfix] Next token: ${this.peek().value}`);;)if(this.isOperator("++")||this.isOperator("--"))e={type:"UpdateExpression",operator:this.advance().value,argument:e,prefix:!1};else if(this.isPunctuation(".")){console.log("        [parsePostfix] Found . member access"),this.advance();const t=new o(this.consume(n.IDENTIFIER,"Expected property").value);e=new I(e,t,!1),console.log(`        [parsePostfix] Created MemberExpression: ${e.object.name}.${e.property.name}`)}else if(this.isPunctuation("[")){console.log("        [parsePostfix] Found [ computed access"),this.advance();const t=this.parseExpression();this.consume(n.PUNCTUATION,"Expected ]"),e=new I(e,t,!0)}else{console.log(`        [parsePostfix] No more postfix ops, returning ${e.type}`);break}return e}parseCall(){console.log("        [parseCall] Starting, calling parsePrimary");let e=this.parsePrimary();for(console.log(`        [parseCall] parsePrimary returned: ${e.type||e.name}`),console.log(`        [parseCall] Next token: ${this.peek().value} (${this.peek().type})`);this.isPunctuation("(");){console.log("        [parseCall] Found (, parsing function call"),this.advance();const t=this.parseArguments();console.log(`        [parseCall] Parsed ${t.length} arguments`),this.consume(n.PUNCTUATION,"Expected )"),e=new b(e,t),console.log("        [parseCall] Created CallExpression")}return console.log(`        [parseCall] Returning: ${e.type}`),e}parsePrimary(){if(console.log(`      [parsePrimary] Current: ${this.peek().value} (${this.peek().type})`),this.isKeyword("this"))return this.advance(),console.log("      [parsePrimary] \u2713 this keyword"),new o("this");if(this.check(n.STRING)){const e=this.advance();return console.log(`      [parsePrimary] \u2713 string literal: ${e.value}`),new h(e.value,e.value,"string")}if(this.check(n.NUMBER)){const e=this.advance();return console.log(`      [parsePrimary] \u2713 number literal: ${e.value}`),new h(parseFloat(e.value),e.value,"number")}if(this.check(n.BOOLEAN)){const e=this.advance();return console.log(`      [parsePrimary] \u2713 boolean: ${e.value}`),new h(e.value==="true",e.value,"boolean")}if(this.check(n.NULL))return this.advance(),console.log("      [parsePrimary] \u2713 null"),new h(null,"null","null");if(this.check(n.UNDEFINED))return this.advance(),console.log("      [parsePrimary] \u2713 undefined"),new h(void 0,"undefined","undefined");if(this.isKeyword("null"))return this.advance(),console.log("      [parsePrimary] \u2713 null keyword"),new h(null,"null","null");if(this.isKeyword("undefined"))return this.advance(),console.log("      [parsePrimary] \u2713 undefined keyword"),new h(void 0,"undefined","undefined");if(this.isPunctuation("(")){console.log("      [parsePrimary] Found ( - checking for arrow function or grouped expr");const e=this.current;if(this.advance(),this.isPunctuation(")")){const s=this.current+1;if(s<this.tokens.length&&this.tokens[s].type===n.OPERATOR&&this.tokens[s].value==="=>"){console.log("      [parsePrimary] \u2713 arrow function with no params: () => ..."),this.consume(n.PUNCTUATION,"Expected )"),this.consume(n.OPERATOR,"Expected =>");const i=this.parseExpression();return new g([],i)}}const t=this.parseExpression();if(this.consume(n.PUNCTUATION,"Expected )"),this.isOperator("=>")){console.log("      [parsePrimary] \u2713 arrow function: (x) => ..."),this.advance();const s=this.parseExpression();let i=[];return t.type==="Identifier"&&(i=[new E(t,!1,null)]),new g(i,s)}return console.log("      [parsePrimary] \u2713 grouped expression"),t}if(this.isPunctuation("{"))return console.log("      [parsePrimary] \u2713 object literal"),this.advance(),this.parseObjectLiteral();if(this.isPunctuation("[")){console.log("      [parsePrimary] \u2713 array literal"),this.advance();const e=[];for(;!this.isPunctuation("]")&&!this.isAtEnd()&&(e.push(this.parseExpression()),!!this.isPunctuation(","));)this.advance();return this.consume(n.PUNCTUATION,"Expected ]"),{type:"ArrayLiteral",elements:e}}if(this.isKeyword("new")){console.log("      [parsePrimary] \u2713 new expression"),this.advance();const e=new o(this.consume(n.IDENTIFIER,"Expected class name").value);this.consume(n.PUNCTUATION,"Expected (");const t=this.parseArguments();return this.consume(n.PUNCTUATION,"Expected )"),new P(e,t)}if(this.isKeyword("const")){const e=this.current;if(this.advance(),this.isKeyword("new")){console.log("      [parsePrimary] \u2713 const new expression"),this.advance();const t=new o(this.consume(n.IDENTIFIER,"Expected class name").value);this.consume(n.PUNCTUATION,"Expected (");const s=this.parseArguments();this.consume(n.PUNCTUATION,"Expected )");const i=new P(t,s);return i.isConst=!0,i}if(this.check(n.IDENTIFIER))return console.log("      [parsePrimary] \u2713 const implicit new expression (ignoring const)"),this.parsePrimary();if(this.isPunctuation("["))return console.log("      [parsePrimary] \u2713 const array literal"),this.parsePrimary();if(this.isPunctuation("{"))return console.log("      [parsePrimary] \u2713 const object literal"),this.parsePrimary();this.current=e}if(this.check(n.IDENTIFIER)){const e=this.advance(),t=new o(e.value);if(console.log(`      [parsePrimary] \u2713 identifier: ${e.value}`),this.isOperator("=>")){console.log("      [parsePrimary] \u2713 arrow function: x => ..."),this.advance();const s=this.parseExpression();return new g([new E(t)],s)}return t}throw console.error(`      [parsePrimary] \u274C FAILED - Cannot parse token: ${this.peek().value} (${this.peek().type})`),this.error("Expected expression")}enterMethod(e){this.callStack||(this.callStack=[]),this.callStack.push({method:e,line:this.peek().line,column:this.peek().column,token:this.peek().value})}parseObjectLiteral(){this.enterMethod("parseObjectLiteral");const e=[];try{for(;!this.isPunctuation("}")&&!this.isAtEnd();){if(this.isPunctuation(",")){this.advance();continue}let t=null,s=!1;if(this.isPunctuation("["))this.advance(),t=this.parseExpression(),this.consume(n.PUNCTUATION,"Expected ]");else if(this.check(n.IDENTIFIER)){const a=this.advance();t=new o(a.value),(this.isPunctuation(",")||this.isPunctuation("}"))&&(s=!0)}else if(this.check(n.STRING)){const a=this.advance();t=new h(a.value,a.value,"string")}else{this.advance();continue}let i=t;if(!s&&this.isPunctuation(":")){this.advance();try{i=this.parseTernary()}catch(a){for(a.parserError&&this.reportParserError(a.parserError),i=t;!this.isPunctuation(",")&&!this.isPunctuation("}")&&!this.isAtEnd();)this.advance()}}const r=new S(t,i);r.shorthand=s,e.push(r),this.isPunctuation(",")&&this.advance()}return this.isPunctuation("}")&&this.advance(),this.exitMethod("parseObjectLiteral"),new F(e)}catch(t){throw this.exitMethod("parseObjectLiteral"),t}}parseArguments(){const e=[];for(;!this.isPunctuation(")")&&!this.isAtEnd();){try{e.push(this.parseTernary())}catch{break}if(!this.isPunctuation(","))break;this.advance()}return e}check(e){return this.isAtEnd()?!1:this.peek().type===e}consume(e,t=""){if(this.check(e))return this.advance();throw this.error(t||`Expected ${e}`)}consumeStatementEnd(){this.skipComments(),this.isPunctuation(";")&&this.advance(),this.skipComments()}advance(){return this.isAtEnd()||this.current++,this.previous()}peek(){return this.tokens[this.current]}previous(){return this.tokens[this.current-1]}isAtEnd(){return this.peek().type===n.EOF}getLocation(){const e=this.peek();return{line:e.line,column:e.column}}error(e){const t=this.peek(),s=new Error(`Parse error at line ${t.line}, column ${t.column}: ${e}`);return s.parserError={message:`Parse error at line ${t.line}, column ${t.column}: ${e}`,line:t.line,column:t.column,token:{type:t.type,value:t.value},callStack:this.callStack?[...this.callStack]:[]},s}getContext(){const e=Math.max(0,this.current-5),t=Math.min(this.tokens.length,this.current+6);return{before:this.tokens.slice(e,this.current).map(s=>`${s.value}(${s.type})`).join(" "),current:`\u2192 ${this.peek().value}(${this.peek().type}) \u2190`,after:this.tokens.slice(this.current+1,t).map(s=>`${s.value}(${s.type})`).join(" ")}}exitMethod(e){this.callStack||(this.callStack=[]),this.callStack.length>0&&this.callStack[this.callStack.length-1].method===e&&this.callStack.pop()}getTokenContext(){const e=Math.max(0,this.current-5),t=Math.min(this.tokens.length,this.current+6),s=this.tokens.slice(e,this.current).map(r=>`${r.value}`).join(" "),i=this.tokens.slice(this.current+1,t).map(r=>`${r.value}`).join(" ");return{before:s,current:`\u2192 ${this.peek().value} \u2190`,after:i}}synchronize(){for(this.advance();!this.isAtEnd();){if(this.isPunctuation(";")){this.advance();return}if(this.isKeyword("class")||this.isKeyword("function")||this.isKeyword("import"))return;this.advance()}}getErrors(){return this.errors}reportError(e){this.errors.push(e),this.debugMode&&(console.error(`
+\u274C PARSER ERROR DETECTED:
+`),console.error(`Message: ${e.message}
+`),console.error("\u{1F4CD} Token Context:"),console.error(`  Before:  ${e.context.before}`),console.error(`  Current: ${e.context.current}`),console.error(`  After:   ${e.context.after}
+`),console.error("\u{1F4DA} Call Stack (where error came from):"),e.callStack.length===0?console.error(`  (top level)
+`):(e.callStack.forEach((t,s)=>{const i=s===e.callStack.length-1?"\u2192":" ";console.error(`  ${i} ${s+1}. ${t.method}()`),console.error(`     at token: "${t.token}" (line ${t.line}, col ${t.column})`)}),console.error("")))}}export{l as ASTNode,g as ArrowFunctionExpression,R as BlockStatement,b as CallExpression,O as ClassBody,N as ClassDeclaration,w as ExpressionStatement,$ as FieldDeclaration,D as FunctionDeclaration,o as Identifier,C as ImportDeclaration,k as ImportSpecifier,h as Literal,I as MemberExpression,A as MethodDeclaration,P as NewExpression,F as ObjectLiteral,E as Parameter,L as Parser,T as Program,S as Property,U as ReturnStatement};
+//# sourceMappingURL=flutterjs_parser.js.map
diff --git a/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_parser.js.map b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_parser.js.map
new file mode 100644
index 00000000..ac5dd38f
--- /dev/null
+++ b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_parser.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/flutterjs_parser.js"],
+  "sourcesContent": ["/**\r\n * FlutterJS Parser - Converts tokens to AST (FIXED VERSION)\r\n * Phase 1.2 MVP Implementation - Complete Fixes\r\n * \r\n * Final fix: parseParameterList handles UNDEFINED and NULL token types\r\n */\r\n\r\n\r\nimport { TokenType } from './lexer.js';\r\nimport { getLogger } from './flutterjs_logger.js';\r\n\r\n// ============================================================================\r\n// AST NODE CLASSES\r\n// ============================================================================\r\n\r\nclass ASTNode {\r\n  constructor(type, location) {\r\n    this.type = type;\r\n    this.location = location;\r\n  }\r\n}\r\n\r\nclass Program extends ASTNode {\r\n  constructor(body = [], location = null) {\r\n    super('Program', location);\r\n    this.body = body;\r\n  }\r\n}\r\n\r\nclass ImportDeclaration extends ASTNode {\r\n  constructor(specifiers = [], source = null, location = null) {\r\n    super('ImportDeclaration', location);\r\n    this.specifiers = specifiers;\r\n    this.source = source;\r\n  }\r\n}\r\n\r\nclass ImportSpecifier extends ASTNode {\r\n  constructor(imported = null, local = null, location = null) {\r\n    super('ImportSpecifier', location);\r\n    this.imported = imported;\r\n    this.local = local;\r\n  }\r\n}\r\n\r\nclass ClassDeclaration extends ASTNode {\r\n  constructor(id = null, superClass = null, body = null, location = null) {\r\n    super('ClassDeclaration', location);\r\n    this.id = id;\r\n    this.superClass = superClass;\r\n    this.body = body;\r\n  }\r\n}\r\n\r\nclass ClassBody extends ASTNode {\r\n  constructor(fields = [], methods = [], location = null) {\r\n    super('ClassBody', location);\r\n    this.fields = fields;\r\n    this.methods = methods;\r\n  }\r\n}\r\n\r\nclass FieldDeclaration extends ASTNode {\r\n  constructor(key = null, initialValue = null, location = null) {\r\n    super('FieldDeclaration', location);\r\n    this.key = key;\r\n    this.initialValue = initialValue;\r\n  }\r\n}\r\n\r\nclass MethodDeclaration extends ASTNode {\r\n  constructor(key = null, params = [], body = null, location = null) {\r\n    super('MethodDeclaration', location);\r\n    this.key = key;\r\n    this.params = params;\r\n    this.body = body;\r\n  }\r\n}\r\n\r\nclass Parameter extends ASTNode {\r\n  constructor(name = null, optional = false, defaultValue = null, location = null) {\r\n    super('Parameter', location);\r\n    this.name = name;\r\n    this.optional = optional;\r\n    this.defaultValue = defaultValue;\r\n  }\r\n}\r\n\r\nclass FunctionDeclaration extends ASTNode {\r\n  constructor(id = null, params = [], body = null, isAsync = false, location = null) {\r\n    super('FunctionDeclaration', location);\r\n    this.id = id;\r\n    this.params = params;\r\n    this.body = body;\r\n    this.isAsync = isAsync;\r\n  }\r\n}\r\n\r\nclass BlockStatement extends ASTNode {\r\n  constructor(body = [], location = null) {\r\n    super('BlockStatement', location);\r\n    this.body = body;\r\n  }\r\n}\r\n\r\nclass ReturnStatement extends ASTNode {\r\n  constructor(argument = null, location = null) {\r\n    super('ReturnStatement', location);\r\n    this.argument = argument;\r\n  }\r\n}\r\n\r\nclass ExpressionStatement extends ASTNode {\r\n  constructor(expression = null, location = null) {\r\n    super('ExpressionStatement', location);\r\n    this.expression = expression;\r\n  }\r\n}\r\n\r\nclass Identifier extends ASTNode {\r\n  constructor(name = '', location = null) {\r\n    super('Identifier', location);\r\n    this.name = name;\r\n  }\r\n}\r\n\r\nclass Literal extends ASTNode {\r\n  constructor(value = null, raw = '', type = 'string', location = null) {\r\n    super('Literal', location);\r\n    this.value = value;\r\n    this.raw = raw;\r\n    this.literalType = type;\r\n  }\r\n}\r\n\r\nclass CallExpression extends ASTNode {\r\n  constructor(callee = null, args = [], location = null) {\r\n    super('CallExpression', location);\r\n    this.callee = callee;\r\n    this.args = args;\r\n  }\r\n}\r\n\r\nclass NewExpression extends ASTNode {\r\n  constructor(callee = null, args = [], location = null) {\r\n    super('NewExpression', location);\r\n    this.callee = callee;\r\n    this.args = args;\r\n    this.isConst = false;\r\n  }\r\n}\r\n\r\nclass ObjectLiteral extends ASTNode {\r\n  constructor(properties = [], location = null) {\r\n    super('ObjectLiteral', location);\r\n    this.properties = properties;\r\n  }\r\n}\r\n\r\nclass Property extends ASTNode {\r\n  constructor(key = null, value = null, location = null) {\r\n    super('Property', location);\r\n    this.key = key;\r\n    this.value = value;\r\n    this.shorthand = false;\r\n  }\r\n}\r\n\r\nclass ArrowFunctionExpression extends ASTNode {\r\n  constructor(params = [], body = null, location = null) {\r\n    super('ArrowFunctionExpression', location);\r\n    this.params = params;\r\n    this.body = body;\r\n  }\r\n}\r\n\r\nclass MemberExpression extends ASTNode {\r\n  constructor(object = null, property = null, computed = false, location = null) {\r\n    super('MemberExpression', location);\r\n    this.object = object;\r\n    this.property = property;\r\n    this.computed = computed;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// PARSER CLASS\r\n// ============================================================================\r\n\r\nclass Parser {\r\n  constructor(tokens = [], options = {}) {\r\n    this.tokens = tokens;\r\n    this.current = 0;\r\n    this.errors = [];\r\n    this.options = { strict: false, ...options };\r\n    // NEW: Call stack tracking\r\n    this.callStack = [];\r\n\r\n    this.debugMode = true;\r\n  }\r\n\r\n  parse() {\r\n    const body = [];\r\n\r\n    while (!this.isAtEnd()) {\r\n      try {\r\n        const stmt = this.parseTopLevel();\r\n        if (stmt && stmt.type === 'ImportDeclaration') {\r\n          console.log('DEBUG - ImportDeclaration:', JSON.stringify(stmt, null, 2));\r\n        }\r\n        if (stmt) {\r\n          body.push(stmt);\r\n        }\r\n      } catch (error) {\r\n        this.errors.push(error);\r\n        this.synchronize();\r\n      }\r\n    }\r\n\r\n    return new Program(body);\r\n  }\r\n\r\n  /**\r\n * Skip any comment tokens\r\n * Comments should be transparent to the parser\r\n */\r\n  skipComments() {\r\n    while (!this.isAtEnd() && this.check(TokenType.COMMENT)) {\r\n      this.advance();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Check if token is a comment\r\n   */\r\n  isComment() {\r\n    if (this.isAtEnd()) return false;\r\n    return this.peek().type === TokenType.COMMENT;\r\n  }\r\n\r\n\r\n  parseTopLevel() {\r\n    this.skipComments();  // \u2190 ADD THIS LINE\r\n\r\n    if (this.isAtEnd()) return null;\r\n\r\n    if (this.isKeyword('import')) {\r\n      this.advance();\r\n      return this.parseImportDeclaration();\r\n    }\r\n\r\n    if (this.isKeyword('class')) {\r\n      this.advance();\r\n      return this.parseClassDeclaration();\r\n    }\r\n\r\n    if (this.isKeyword('function')) {\r\n      this.advance();\r\n      return this.parseFunctionDeclaration();\r\n    }\r\n\r\n    const expr = this.parseExpression();\r\n    this.consumeStatementEnd();\r\n    return new ExpressionStatement(expr, this.getLocation());\r\n  }\r\n  isKeyword(value) {\r\n    if (this.isAtEnd()) return false;\r\n    const token = this.peek();\r\n    return token.type === TokenType.KEYWORD && token.value === value;\r\n  }\r\n\r\n  isPunctuation(value) {\r\n    if (this.isAtEnd()) return false;\r\n    const token = this.peek();\r\n    return token.type === TokenType.PUNCTUATION && token.value === value;\r\n  }\r\n\r\n  isOperator(value) {\r\n    if (this.isAtEnd()) return false;\r\n    const token = this.peek();\r\n    return token.type === TokenType.OPERATOR && token.value === value;\r\n  }\r\n\r\n  /**\r\n * FIXED: parseImportDeclaration() in flutterjs_parser.js\r\n * Handles multi-line imports with comments and proper spacing\r\n * \r\n * Replace the entire parseImportDeclaration() method with this version\r\n */\r\n\r\n  parseImportDeclaration() {\r\n    const logger = getLogger().createComponentLogger('Parser.parseImportDeclaration');\r\n    logger.startSession('parseImportDeclaration');\r\n\r\n    const startLocation = this.getLocation();\r\n    const specifiers = [];\r\n\r\n    logger.trace(`  Starting import parse at token: ${this.peek().value}`);\r\n\r\n    // Case 1: Named imports { x, y, z }\r\n    if (this.isPunctuation('{')) {\r\n      logger.trace(`  Found opening brace, parsing named imports...`);\r\n      this.advance();\r\n\r\n      // \u2705 FIX #1: Skip comments right after opening brace\r\n      this.skipComments();\r\n\r\n      while (!this.isPunctuation('}') && !this.isAtEnd()) {\r\n        // \u2705 FIX #2: Skip comments before checking for closing brace\r\n        this.skipComments();\r\n\r\n        // Check if we hit the closing brace (after skipping comments)\r\n        if (this.isPunctuation('}')) {\r\n          logger.trace(`  Found closing brace, exiting loop`);\r\n          break;\r\n        }\r\n\r\n        // Expect an identifier\r\n        if (!this.check(TokenType.IDENTIFIER)) {\r\n          logger.warn(`  Expected identifier but got: ${this.peek().value}`);\r\n          this.advance();\r\n          continue;\r\n        }\r\n\r\n        // Get the imported name\r\n        const importedName = this.consume(TokenType.IDENTIFIER, 'Expected identifier').value;\r\n        const imported = new Identifier(importedName);\r\n        logger.trace(`    Imported: ${importedName}`);\r\n\r\n        let local = imported; // Default: local name = imported name\r\n\r\n        // \u2705 FIX #3: Skip comments before checking for 'as'\r\n        this.skipComments();\r\n\r\n        // Check for 'as' alias\r\n        if (this.isKeyword('as')) {\r\n          logger.trace(`    Found 'as' keyword`);\r\n          this.advance();\r\n\r\n          // \u2705 FIX #4: Skip comments after 'as'\r\n          this.skipComments();\r\n\r\n          const localName = this.consume(TokenType.IDENTIFIER, 'Expected identifier after as').value;\r\n          local = new Identifier(localName);\r\n          logger.trace(`      Local name: ${localName}`);\r\n        }\r\n\r\n        // Add specifier to list\r\n        specifiers.push(new ImportSpecifier(imported, local));\r\n\r\n        // \u2705 FIX #5: Skip comments before checking for comma\r\n        this.skipComments();\r\n\r\n        // Check for comma separator\r\n        if (this.isPunctuation(',')) {\r\n          logger.trace(`    Found comma, continuing...`);\r\n          this.advance();\r\n\r\n          // \u2705 FIX #6: Skip comments after comma\r\n          this.skipComments();\r\n\r\n          // Continue to next item\r\n          continue;\r\n        } else {\r\n          logger.trace(`    No comma, expected closing brace next`);\r\n          // No more items, should see closing brace\r\n          break;\r\n        }\r\n      }\r\n\r\n      logger.trace(`  Parsed ${specifiers.length} named imports`);\r\n\r\n      // Consume closing brace\r\n      this.consume(TokenType.PUNCTUATION, 'Expected }');\r\n    }\r\n\r\n    // Case 2: Default import or default + named\r\n    // import MyDefault from 'module'\r\n    // import MyDefault, { x, y } from 'module'\r\n    else if (this.check(TokenType.IDENTIFIER) && this.peekAhead(1).value !== 'from') {\r\n      logger.trace(`  Found identifier without opening brace, parsing default import...`);\r\n\r\n      const defaultName = this.consume(TokenType.IDENTIFIER, 'Expected identifier').value;\r\n      const imported = new Identifier(defaultName);\r\n      const local = new Identifier(defaultName);\r\n      specifiers.push(new ImportSpecifier(imported, local));\r\n\r\n      logger.trace(`  Default import: ${defaultName}`);\r\n\r\n      // Check for comma and additional named imports\r\n      this.skipComments();\r\n      if (this.isPunctuation(',')) {\r\n        logger.trace(`  Found comma after default import, checking for named imports...`);\r\n        this.advance();\r\n\r\n        this.skipComments();\r\n        if (this.isPunctuation('{')) {\r\n          logger.trace(`  Found opening brace, parsing additional named imports...`);\r\n          this.advance();\r\n\r\n          this.skipComments();\r\n          while (!this.isPunctuation('}') && !this.isAtEnd()) {\r\n            this.skipComments();\r\n\r\n            if (this.isPunctuation('}')) break;\r\n\r\n            if (!this.check(TokenType.IDENTIFIER)) {\r\n              this.advance();\r\n              continue;\r\n            }\r\n\r\n            const name = this.consume(TokenType.IDENTIFIER, 'Expected identifier').value;\r\n            const imported2 = new Identifier(name);\r\n            let local2 = imported2;\r\n\r\n            this.skipComments();\r\n\r\n            if (this.isKeyword('as')) {\r\n              this.advance();\r\n              this.skipComments();\r\n              const localName = this.consume(TokenType.IDENTIFIER, 'Expected identifier after as').value;\r\n              local2 = new Identifier(localName);\r\n            }\r\n\r\n            specifiers.push(new ImportSpecifier(imported2, local2));\r\n\r\n            this.skipComments();\r\n\r\n            if (this.isPunctuation(',')) {\r\n              this.advance();\r\n              this.skipComments();\r\n              continue;\r\n            } else {\r\n              break;\r\n            }\r\n          }\r\n\r\n          this.consume(TokenType.PUNCTUATION, 'Expected }');\r\n        }\r\n      }\r\n    }\r\n\r\n    // \u2705 FIX #7: Skip comments before 'from'\r\n    this.skipComments();\r\n\r\n    // Consume 'from' keyword\r\n    this.consume(TokenType.KEYWORD, 'Expected from');\r\n\r\n    // \u2705 FIX #8: Skip comments before module path string\r\n    this.skipComments();\r\n\r\n    // Get the module/source path\r\n    const modulePathToken = this.consume(TokenType.STRING, 'Expected module path string');\r\n    const source = new Literal(\r\n      modulePathToken.value,\r\n      modulePathToken.value,\r\n      'string'\r\n    );\r\n\r\n    logger.trace(`  Module path: ${source.value}`);\r\n    logger.trace(`  Total specifiers: ${specifiers.length}`);\r\n\r\n    // \u2705 FIX #9: Consume statement end (handles semicolon and trailing comments)\r\n    this.consumeStatementEnd();\r\n\r\n    logger.trace(`[parseImportDeclaration] SUCCESS\\n`);\r\n    return new ImportDeclaration(specifiers, source, startLocation);\r\n  }\r\n\r\n  /**\r\n   * Helper method: Check if lookahead token matches (needed for peekAhead)\r\n   * Add this if not already present\r\n   */\r\n  peekAhead(n = 1) {\r\n    const pos = this.current + n;\r\n    if (pos >= this.tokens.length) {\r\n      return this.tokens[this.tokens.length - 1];\r\n    }\r\n    return this.tokens[pos];\r\n  }\r\n\r\n  parseClassDeclaration() {\r\n    const logger = getLogger().createComponentLogger('Parser.parseClassDeclaration');\r\n    logger.startSession('parseClassDeclaration');\r\n    logger.trace(`  Current token: ${this.peek().value} (${this.peek().type})`);\r\n\r\n    const startLocation = this.getLocation();\r\n    const nameToken = this.consume(TokenType.IDENTIFIER, 'Expected class name');\r\n    const name = new Identifier(nameToken.value);\r\n    logger.trace(`  Class name: ${name.name}`);\r\n\r\n    let superClass = null;\r\n    if (this.isKeyword('extends')) {\r\n      this.advance();\r\n      const superName = this.consume(TokenType.IDENTIFIER, 'Expected superclass name').value;\r\n      superClass = new Identifier(superName);\r\n      logger.trace(`  Extends: ${superClass.name}`);\r\n\r\n      // Skip generic type parameters like <MyCounter>\r\n      if (this.isOperator('<')) {\r\n        this.advance();\r\n        this.consume(TokenType.IDENTIFIER, 'Expected type name');\r\n        this.consume(TokenType.OPERATOR, 'Expected >');\r\n      }\r\n    }\r\n\r\n    logger.trace(`  Looking for opening brace...`);\r\n    logger.trace(`  Current token: ${this.peek().value} (${this.peek().type})`);\r\n    this.consume(TokenType.PUNCTUATION, 'Expected {');\r\n\r\n    const fields = [];\r\n    const methods = [];\r\n\r\n    logger.trace(`  Parsing class body...`);\r\n    let itemCount = 0;\r\n\r\n    while (!this.isPunctuation('}') && !this.isAtEnd()) {\r\n      this.skipComments();  // \u2190 ADD THIS LINE - skip comments in class body\r\n\r\n      if (this.isPunctuation('}')) break;  // Check again after skipping comments\r\n\r\n      logger.trace(`    [item ${itemCount}] Current token: ${this.peek().value} (${this.peek().type})`);\r\n\r\n      // Skip semicolons\r\n      if (this.isPunctuation(';')) {\r\n        logger.trace(`    Skipping semicolon`);\r\n        this.advance();\r\n        continue;\r\n      }\r\n\r\n      // Check for constructor (always a method)\r\n      if (this.isKeyword('constructor')) {\r\n        logger.trace(`    Found constructor`);\r\n        methods.push(this.parseMethodDeclaration());\r\n        itemCount++;\r\n        continue;\r\n      }\r\n\r\n      // Check for field or method\r\n      if (this.check(TokenType.IDENTIFIER)) {\r\n        const currentPos = this.current;\r\n        const idToken = this.peek();\r\n        const fieldName = idToken.value;\r\n        logger.trace(`    Found identifier: ${fieldName}`);\r\n        this.advance();\r\n\r\n        // CASE 1: Field initializer - IDENTIFIER = value\r\n        if (this.isOperator('=')) {\r\n          logger.trace(`      -> This is a FIELD (followed by =)`);\r\n          this.current = currentPos; // Rewind\r\n          try {\r\n            fields.push(this.parseFieldDeclaration());\r\n            logger.trace(`      Field parsed successfully`);\r\n            itemCount++;\r\n            continue;\r\n          } catch (e) {\r\n            console.error(`      ERROR parsing field: ${e.message}`);\r\n            throw e;\r\n          }\r\n        }\r\n\r\n        // CASE 2: Method - IDENTIFIER ( params )\r\n        if (this.isPunctuation('(')) {\r\n          logger.trace(`      -> This is a METHOD (followed by '(')`);\r\n          this.current = currentPos; // Rewind\r\n          try {\r\n            methods.push(this.parseMethodDeclaration());\r\n            logger.trace(`      Method parsed successfully`);\r\n            itemCount++;\r\n            continue;\r\n          } catch (e) {\r\n            console.error(`      ERROR parsing method: ${e.message}`);\r\n            throw e;\r\n          }\r\n        }\r\n\r\n        logger.trace(`      -> Unknown pattern, skipping`);\r\n        this.advance();\r\n        continue;\r\n      }\r\n\r\n      // Skip unknown tokens\r\n      logger.trace(`    Skipping unknown token: ${this.peek().value}`);\r\n      this.advance();\r\n    }\r\n\r\n    logger.trace(`  Class body parsing complete. Found ${fields.length} fields, ${methods.length} methods`);\r\n\r\n    this.consume(TokenType.PUNCTUATION, 'Expected }');\r\n    const body = new ClassBody(fields, methods);\r\n    logger.trace(`[parseClassDeclaration] SUCCESS\\n`);\r\n    return new ClassDeclaration(name, superClass, body, startLocation);\r\n  }\r\n\r\n\r\n  parseMethodDeclaration() {\r\n    const logger = getLogger().createComponentLogger('Parser.parseMethodDeclaration');\r\n    logger.startSession(`      [parseMethodDeclaration] STARTING`);\r\n    logger.trace(`        Current: ${this.peek().value}`);\r\n\r\n    const startLocation = this.getLocation();\r\n\r\n    let methodName;\r\n    if (this.isKeyword('constructor')) {\r\n      methodName = 'constructor';\r\n      this.advance();\r\n    } else {\r\n      methodName = this.consume(TokenType.IDENTIFIER, 'Expected method name').value;\r\n    }\r\n\r\n    logger.trace(`        Method name: ${methodName}`);\r\n    const key = new Identifier(methodName);\r\n\r\n    this.consume(TokenType.PUNCTUATION, 'Expected (');\r\n    const params = this.parseParameterList();\r\n    logger.trace(`        Parameters: ${params.length}`);\r\n    this.consume(TokenType.PUNCTUATION, 'Expected )');\r\n\r\n    let body = null;\r\n    if (this.isOperator('=>')) {\r\n      logger.trace(`        Arrow function body`);\r\n      this.advance();\r\n      body = this.parseExpression();\r\n    } else if (this.isPunctuation('{')) {\r\n      logger.trace(`        Block body`);\r\n      this.advance();\r\n      body = this.parseBlock();\r\n    }\r\n\r\n    logger.trace(`      [parseMethodDeclaration] SUCCESS`);\r\n    return new MethodDeclaration(key, params, body, startLocation);\r\n  }\r\n  parseFieldDeclaration() {\r\n    console.log(`      [parseFieldDeclaration] STARTING`);\r\n    console.log(`        Current: ${this.peek().value}`);\r\n\r\n    const startLocation = this.getLocation();\r\n    const fieldName = this.consume(TokenType.IDENTIFIER, 'Expected field name').value;\r\n    const key = new Identifier(fieldName);\r\n    console.log(`        Field name: ${fieldName}`);\r\n\r\n    let initialValue = null;\r\n    if (this.isOperator('=')) {\r\n      console.log(`        Found = operator, parsing initializer...`);\r\n      this.advance();\r\n      try {\r\n        initialValue = this.parseExpression();\r\n        console.log(`        Initializer parsed: ${initialValue.type}`);\r\n      } catch (e) {\r\n        console.error(`        ERROR parsing initializer: ${e.message}`);\r\n        throw e;\r\n      }\r\n    }\r\n\r\n    this.consumeStatementEnd();\r\n    console.log(`      [parseFieldDeclaration] SUCCESS`);\r\n    return new FieldDeclaration(key, initialValue, startLocation);\r\n  }\r\n\r\n  parseFunctionDeclaration() {\r\n    const startLocation = this.getLocation();\r\n    const nameToken = this.consume(TokenType.IDENTIFIER, 'Expected function name');\r\n    const name = nameToken.value ? new Identifier(nameToken.value) : null;\r\n\r\n    this.consume(TokenType.PUNCTUATION, 'Expected (');\r\n    const params = this.parseParameterList();\r\n    this.consume(TokenType.PUNCTUATION, 'Expected )');\r\n\r\n    this.consume(TokenType.PUNCTUATION, 'Expected {');\r\n    const body = this.parseBlock();\r\n\r\n    return new FunctionDeclaration(name, params, body, false, startLocation);\r\n  }\r\n\r\n  /**\r\n   * Parse parameter list - FIXED to handle UNDEFINED and NULL token types\r\n   */\r\n  parseParameterList() {\r\n    const params = [];\r\n\r\n    while (!this.isPunctuation(')') && !this.isAtEnd()) {\r\n      const paramLocation = this.getLocation();\r\n\r\n      // Handle destructuring: { key = value }\r\n      if (this.isPunctuation('{')) {\r\n        this.advance();\r\n        while (!this.isPunctuation('}') && !this.isAtEnd()) {\r\n          const paramName = this.consume(TokenType.IDENTIFIER, 'Expected param name').value;\r\n          let defaultValue = null;\r\n\r\n          if (this.isOperator('=')) {\r\n            this.advance();\r\n            // FIXED: Check token type, not just keywords\r\n            const token = this.peek();\r\n\r\n            if (this.check(TokenType.IDENTIFIER)) {\r\n              defaultValue = new Identifier(this.advance().value);\r\n            } else if (this.check(TokenType.NUMBER)) {\r\n              defaultValue = new Literal(parseFloat(this.advance().value), '', 'number');\r\n            } else if (this.check(TokenType.UNDEFINED)) {\r\n              // FIXED: Handle UNDEFINED token type\r\n              this.advance();\r\n              defaultValue = new Literal(undefined, 'undefined', 'undefined');\r\n            } else if (this.check(TokenType.NULL)) {\r\n              // FIXED: Handle NULL token type\r\n              this.advance();\r\n              defaultValue = new Literal(null, 'null', 'null');\r\n            } else if (this.isKeyword('undefined')) {\r\n              this.advance();\r\n              defaultValue = new Literal(undefined, 'undefined', 'undefined');\r\n            } else if (this.isKeyword('null')) {\r\n              this.advance();\r\n              defaultValue = new Literal(null, 'null', 'null');\r\n            }\r\n          }\r\n\r\n          params.push(new Parameter(new Identifier(paramName), defaultValue !== null, defaultValue, paramLocation));\r\n\r\n          if (!this.isPunctuation(',')) break;\r\n          this.advance();\r\n        }\r\n        this.consume(TokenType.PUNCTUATION, 'Expected }');\r\n\r\n        // Handle = {} after destructuring\r\n        if (this.isOperator('=')) {\r\n          this.advance();\r\n          if (this.isPunctuation('{')) {\r\n            this.advance();\r\n            let braceDepth = 1;\r\n            while (braceDepth > 0 && !this.isAtEnd()) {\r\n              if (this.isPunctuation('{')) braceDepth++;\r\n              else if (this.isPunctuation('}')) braceDepth--;\r\n              if (braceDepth > 0) this.advance();\r\n            }\r\n            this.consume(TokenType.PUNCTUATION, 'Expected }');\r\n          }\r\n        }\r\n      } else if (this.check(TokenType.IDENTIFIER)) {\r\n        // Regular parameter\r\n        const paramName = this.consume(TokenType.IDENTIFIER, 'Expected param name').value;\r\n        let defaultValue = null;\r\n\r\n        if (this.isOperator('=')) {\r\n          this.advance();\r\n          const token = this.peek();\r\n\r\n          if (this.check(TokenType.IDENTIFIER)) {\r\n            defaultValue = new Identifier(this.advance().value);\r\n          } else if (this.check(TokenType.NUMBER)) {\r\n            defaultValue = new Literal(parseFloat(this.advance().value), '', 'number');\r\n          } else if (this.check(TokenType.UNDEFINED)) {\r\n            this.advance();\r\n            defaultValue = new Literal(undefined, 'undefined', 'undefined');\r\n          } else if (this.check(TokenType.NULL)) {\r\n            this.advance();\r\n            defaultValue = new Literal(null, 'null', 'null');\r\n          } else if (this.isKeyword('undefined')) {\r\n            this.advance();\r\n            defaultValue = new Literal(undefined, 'undefined', 'undefined');\r\n          } else if (this.isKeyword('null')) {\r\n            this.advance();\r\n            defaultValue = new Literal(null, 'null', 'null');\r\n          }\r\n        }\r\n\r\n        params.push(new Parameter(new Identifier(paramName), defaultValue !== null, defaultValue, paramLocation));\r\n      } else {\r\n        break;\r\n      }\r\n\r\n      if (!this.isPunctuation(',')) break;\r\n      this.advance();\r\n    }\r\n\r\n    return params;\r\n  }\r\n\r\n  parseBlock() {\r\n    console.log(`\\n[parseBlock] STARTING at token: ${this.peek().value}`);\r\n\r\n    const startLocation = this.getLocation();\r\n    const statements = [];\r\n\r\n    while (!this.isPunctuation('}') && !this.isAtEnd()) {\r\n      this.skipComments();  // \u2190 ADD THIS LINE - skip comments in block\r\n\r\n      if (this.isPunctuation('}')) break;  // Check again after skipping\r\n\r\n      console.log(`  [parseBlock] Current token: ${this.peek().value} (${this.peek().type})`);\r\n\r\n      if (this.isKeyword('return')) {\r\n        console.log(`    Found RETURN statement`);\r\n        this.advance();\r\n        let argument = null;\r\n\r\n        if (!this.isPunctuation(';') && !this.isPunctuation('}')) {\r\n          console.log(`    Parsing return argument...`);\r\n          try {\r\n            argument = this.parseExpression();\r\n            console.log(`    Return argument parsed successfully`);\r\n          } catch (error) {\r\n            console.error(`    \u274C ERROR parsing return argument: ${error.message}`);\r\n            console.error(`       Token was: ${this.peek().value}`);\r\n\r\n            // Skip to semicolon\r\n            while (!this.isPunctuation(';') && !this.isPunctuation('}') && !this.isAtEnd()) {\r\n              this.advance();\r\n            }\r\n          }\r\n        }\r\n\r\n        this.consumeStatementEnd();\r\n        statements.push(new ReturnStatement(argument, startLocation));\r\n\r\n      } else {\r\n        console.log(`    Parsing expression statement...`);\r\n        try {\r\n          const expr = this.parseExpression();\r\n          console.log(`    Expression parsed successfully: ${expr.type}`);\r\n          this.consumeStatementEnd();\r\n          statements.push(new ExpressionStatement(expr, startLocation));\r\n        } catch (error) {\r\n          console.error(`    \u274C ERROR parsing expression: ${error.message}`);\r\n          console.error(`       Token was: ${this.peek().value}`);\r\n\r\n          // Skip to next statement\r\n          while (!this.isPunctuation(';') && !this.isPunctuation('}') && !this.isAtEnd()) {\r\n            this.advance();\r\n          }\r\n          if (this.isPunctuation(';')) {\r\n            this.advance();\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    if (this.isPunctuation('}')) {\r\n      this.advance();\r\n    }\r\n\r\n    console.log(`[parseBlock] SUCCESS - ${statements.length} statements\\n`);\r\n    return new BlockStatement(statements, startLocation);\r\n  }\r\n\r\n  parseExpression() {\r\n    console.log(`    [parseExpression] Current token: ${this.peek().value}`);\r\n    try {\r\n      const result = this.parseAssignment();\r\n      console.log(`    [parseExpression] \u2713 Success, type: ${result.type}`);\r\n      return result;\r\n    } catch (e) {\r\n      console.error(`    [parseExpression] \u2717 Failed: ${e.message}`);\r\n      throw e;\r\n    }\r\n  }\r\n\r\n  parseAssignment() {\r\n    let expr = this.parseTernary();\r\n\r\n    if (this.isOperator('=')) {\r\n      this.advance();\r\n      const value = this.parseAssignment();\r\n      return { type: 'AssignmentExpression', left: expr, right: value };\r\n    }\r\n\r\n    return expr;\r\n  }\r\n\r\n  parseTernary() {\r\n    let expr = this.parseLogicalOr();\r\n\r\n    if (this.isOperator('?')) {\r\n      this.advance();\r\n      const consequent = this.parseExpression();\r\n      this.consume(TokenType.OPERATOR, 'Expected :');\r\n      const alternate = this.parseExpression();\r\n      return { type: 'ConditionalExpression', test: expr, consequent, alternate };\r\n    }\r\n\r\n    return expr;\r\n  }\r\n\r\n  parseLogicalOr() {\r\n    let expr = this.parseLogicalAnd();\r\n\r\n    while (this.isOperator('||')) {\r\n      this.advance();\r\n      const right = this.parseLogicalAnd();\r\n      expr = { type: 'LogicalExpression', operator: '||', left: expr, right };\r\n    }\r\n\r\n    return expr;\r\n  }\r\n\r\n  parseLogicalAnd() {\r\n    let expr = this.parseEquality();\r\n\r\n    while (this.isOperator('&&')) {\r\n      this.advance();\r\n      const right = this.parseEquality();\r\n      expr = { type: 'LogicalExpression', operator: '&&', left: expr, right };\r\n    }\r\n\r\n    return expr;\r\n  }\r\n\r\n  parseEquality() {\r\n    let expr = this.parseRelational();\r\n\r\n    while (this.isOperator('===') || this.isOperator('!==') || this.isOperator('==') || this.isOperator('!=')) {\r\n      const operator = this.advance().value;\r\n      const right = this.parseRelational();\r\n      expr = { type: 'BinaryExpression', operator, left: expr, right };\r\n    }\r\n\r\n    return expr;\r\n  }\r\n\r\n  parseRelational() {\r\n    let expr = this.parseAdditive();\r\n\r\n    while (this.isOperator('<') || this.isOperator('>') || this.isOperator('<=') || this.isOperator('>=')) {\r\n      const operator = this.advance().value;\r\n      const right = this.parseAdditive();\r\n      expr = { type: 'BinaryExpression', operator, left: expr, right };\r\n    }\r\n\r\n    return expr;\r\n  }\r\n\r\n  parseAdditive() {\r\n    let expr = this.parseMultiplicative();\r\n\r\n    while (this.isOperator('+') || this.isOperator('-')) {\r\n      const operator = this.advance().value;\r\n      const right = this.parseMultiplicative();\r\n      expr = { type: 'BinaryExpression', operator, left: expr, right };\r\n    }\r\n\r\n    return expr;\r\n  }\r\n\r\n  parseMultiplicative() {\r\n    let expr = this.parseUnary();\r\n\r\n    while (this.isOperator('*') || this.isOperator('/') || this.isOperator('%')) {\r\n      const operator = this.advance().value;\r\n      const right = this.parseUnary();\r\n      expr = { type: 'BinaryExpression', operator, left: expr, right };\r\n    }\r\n\r\n    return expr;\r\n  }\r\n\r\n  parseUnary() {\r\n    console.log(`        [parseUnary] Current: ${this.peek().value}`);\r\n\r\n    if (this.isOperator('!') || this.isOperator('-') || this.isOperator('+') || this.isOperator('~')) {\r\n      const operator = this.advance().value;\r\n      const expr = this.parseUnary();\r\n      return { type: 'UnaryExpression', operator, argument: expr };\r\n    }\r\n\r\n\r\n    console.log(`        [parseUnary] Calling parsePostfix`);\r\n    return this.parsePostfix();\r\n  }\r\n\r\n  parsePostfix() {\r\n    console.log(`        [parsePostfix] Starting, calling parseCall`);\r\n    let expr = this.parseCall();\r\n    console.log(`        [parsePostfix] parseCall returned: ${expr.type || expr.name}`);\r\n    console.log(`        [parsePostfix] Next token: ${this.peek().value}`);\r\n\r\n    while (true) {\r\n      if (this.isOperator('++') || this.isOperator('--')) {\r\n        const operator = this.advance().value;\r\n        expr = { type: 'UpdateExpression', operator, argument: expr, prefix: false };\r\n      } else if (this.isPunctuation('.')) {\r\n        console.log(`        [parsePostfix] Found . member access`);\r\n        this.advance();\r\n        const property = new Identifier(this.consume(TokenType.IDENTIFIER, 'Expected property').value);\r\n        expr = new MemberExpression(expr, property, false);\r\n        console.log(`        [parsePostfix] Created MemberExpression: ${expr.object.name}.${expr.property.name}`);\r\n      } else if (this.isPunctuation('[')) {\r\n        console.log(`        [parsePostfix] Found [ computed access`);\r\n        this.advance();\r\n        const property = this.parseExpression();\r\n        this.consume(TokenType.PUNCTUATION, 'Expected ]');\r\n        expr = new MemberExpression(expr, property, true);\r\n      } else {\r\n        console.log(`        [parsePostfix] No more postfix ops, returning ${expr.type}`);\r\n        break;\r\n      }\r\n    }\r\n\r\n    return expr;\r\n  }\r\n\r\n\r\n  parseCall() {\r\n    console.log(`        [parseCall] Starting, calling parsePrimary`);\r\n    let expr = this.parsePrimary();\r\n    console.log(`        [parseCall] parsePrimary returned: ${expr.type || expr.name}`);\r\n    console.log(`        [parseCall] Next token: ${this.peek().value} (${this.peek().type})`);\r\n\r\n    while (this.isPunctuation('(')) {\r\n      console.log(`        [parseCall] Found (, parsing function call`);\r\n      this.advance();\r\n      const args = this.parseArguments();\r\n      console.log(`        [parseCall] Parsed ${args.length} arguments`);\r\n      this.consume(TokenType.PUNCTUATION, 'Expected )');\r\n      expr = new CallExpression(expr, args);\r\n      console.log(`        [parseCall] Created CallExpression`);\r\n    }\r\n\r\n    console.log(`        [parseCall] Returning: ${expr.type}`);\r\n    return expr;\r\n  }\r\n\r\n  parsePrimary() {\r\n    console.log(`      [parsePrimary] Current: ${this.peek().value} (${this.peek().type})`);\r\n\r\n    // Handle 'this' keyword FIRST\r\n    if (this.isKeyword('this')) {\r\n      this.advance();\r\n      console.log(`      [parsePrimary] \u2713 this keyword`);\r\n      return new Identifier('this');\r\n    }\r\n\r\n    if (this.check(TokenType.STRING)) {\r\n      const token = this.advance();\r\n      console.log(`      [parsePrimary] \u2713 string literal: ${token.value}`);\r\n      return new Literal(token.value, token.value, 'string');\r\n    }\r\n\r\n    if (this.check(TokenType.NUMBER)) {\r\n      const token = this.advance();\r\n      console.log(`      [parsePrimary] \u2713 number literal: ${token.value}`);\r\n      return new Literal(parseFloat(token.value), token.value, 'number');\r\n    }\r\n\r\n    if (this.check(TokenType.BOOLEAN)) {\r\n      const token = this.advance();\r\n      console.log(`      [parsePrimary] \u2713 boolean: ${token.value}`);\r\n      return new Literal(token.value === 'true', token.value, 'boolean');\r\n    }\r\n\r\n    if (this.check(TokenType.NULL)) {\r\n      this.advance();\r\n      console.log(`      [parsePrimary] \u2713 null`);\r\n      return new Literal(null, 'null', 'null');\r\n    }\r\n\r\n    if (this.check(TokenType.UNDEFINED)) {\r\n      this.advance();\r\n      console.log(`      [parsePrimary] \u2713 undefined`);\r\n      return new Literal(undefined, 'undefined', 'undefined');\r\n    }\r\n\r\n    if (this.isKeyword('null')) {\r\n      this.advance();\r\n      console.log(`      [parsePrimary] \u2713 null keyword`);\r\n      return new Literal(null, 'null', 'null');\r\n    }\r\n\r\n    if (this.isKeyword('undefined')) {\r\n      this.advance();\r\n      console.log(`      [parsePrimary] \u2713 undefined keyword`);\r\n      return new Literal(undefined, 'undefined', 'undefined');\r\n    }\r\n\r\n    if (this.isPunctuation('(')) {\r\n      console.log(`      [parsePrimary] Found ( - checking for arrow function or grouped expr`);\r\n      const savedPos = this.current;\r\n      this.advance();\r\n\r\n      if (this.isPunctuation(')')) {\r\n        const nextPos = this.current + 1;\r\n        if (nextPos < this.tokens.length &&\r\n          this.tokens[nextPos].type === TokenType.OPERATOR &&\r\n          this.tokens[nextPos].value === '=>') {\r\n          console.log(`      [parsePrimary] \u2713 arrow function with no params: () => ...`);\r\n          this.consume(TokenType.PUNCTUATION, 'Expected )');\r\n          this.consume(TokenType.OPERATOR, 'Expected =>');\r\n          const body = this.parseExpression();\r\n          return new ArrowFunctionExpression([], body);\r\n        }\r\n      }\r\n\r\n      const expr = this.parseExpression();\r\n      this.consume(TokenType.PUNCTUATION, 'Expected )');\r\n\r\n      if (this.isOperator('=>')) {\r\n        console.log(`      [parsePrimary] \u2713 arrow function: (x) => ...`);\r\n        this.advance();\r\n        const body = this.parseExpression();\r\n        let params = [];\r\n        if (expr.type === 'Identifier') {\r\n          params = [new Parameter(expr, false, null)];\r\n        }\r\n        return new ArrowFunctionExpression(params, body);\r\n      }\r\n\r\n      console.log(`      [parsePrimary] \u2713 grouped expression`);\r\n      return expr;\r\n    }\r\n\r\n    if (this.isPunctuation('{')) {\r\n      console.log(`      [parsePrimary] \u2713 object literal`);\r\n      this.advance();\r\n      return this.parseObjectLiteral();\r\n    }\r\n\r\n    if (this.isPunctuation('[')) {\r\n      console.log(`      [parsePrimary] \u2713 array literal`);\r\n      this.advance();\r\n      const elements = [];\r\n      while (!this.isPunctuation(']') && !this.isAtEnd()) {\r\n        elements.push(this.parseExpression());\r\n        if (!this.isPunctuation(',')) break;\r\n        this.advance();\r\n      }\r\n      this.consume(TokenType.PUNCTUATION, 'Expected ]');\r\n      return { type: 'ArrayLiteral', elements };\r\n    }\r\n\r\n    if (this.isKeyword('new')) {\r\n      console.log(`      [parsePrimary] \u2713 new expression`);\r\n      this.advance();\r\n      const callee = new Identifier(this.consume(TokenType.IDENTIFIER, 'Expected class name').value);\r\n      this.consume(TokenType.PUNCTUATION, 'Expected (');\r\n      const args = this.parseArguments();\r\n      this.consume(TokenType.PUNCTUATION, 'Expected )');\r\n      return new NewExpression(callee, args);\r\n    }\r\n\r\n    if (this.isKeyword('const')) {\r\n      const savedPos = this.current;\r\n      this.advance();\r\n\r\n      // Case 1: const new ClassName(...)\r\n      if (this.isKeyword('new')) {\r\n        console.log(`      [parsePrimary] \u2713 const new expression`);\r\n        this.advance();\r\n        const callee = new Identifier(this.consume(TokenType.IDENTIFIER, 'Expected class name').value);\r\n        this.consume(TokenType.PUNCTUATION, 'Expected (');\r\n        const args = this.parseArguments();\r\n        this.consume(TokenType.PUNCTUATION, 'Expected )');\r\n        const expr = new NewExpression(callee, args);\r\n        expr.isConst = true;\r\n        return expr;\r\n      }\r\n\r\n      // Case 2: const ClassName(...) - implicit new\r\n      if (this.check(TokenType.IDENTIFIER)) {\r\n        console.log(`      [parsePrimary] \u2713 const implicit new expression (ignoring const)`);\r\n        // Just treat it as a normal identifier start, we consumed 'const'\r\n        // Recursively call parsePrimary to handle the Identifier\r\n        return this.parsePrimary();\r\n      }\r\n\r\n      // Case 3: const [] - constant array\r\n      if (this.isPunctuation('[')) {\r\n        console.log(`      [parsePrimary] \u2713 const array literal`);\r\n        // recurse to handle [\r\n        return this.parsePrimary();\r\n      }\r\n\r\n      // Case 4: const {} - constant object/map\r\n      if (this.isPunctuation('{')) {\r\n        console.log(`      [parsePrimary] \u2713 const object literal`);\r\n        return this.parsePrimary();\r\n      }\r\n\r\n      // Fallback\r\n      this.current = savedPos;\r\n    }\r\n\r\n    if (this.check(TokenType.IDENTIFIER)) {\r\n      const token = this.advance();\r\n      const ident = new Identifier(token.value);\r\n      console.log(`      [parsePrimary] \u2713 identifier: ${token.value}`);\r\n\r\n      if (this.isOperator('=>')) {\r\n        console.log(`      [parsePrimary] \u2713 arrow function: x => ...`);\r\n        this.advance();\r\n        const body = this.parseExpression();\r\n        return new ArrowFunctionExpression([new Parameter(ident)], body);\r\n      }\r\n\r\n      return ident;\r\n    }\r\n\r\n    // If we get here, we couldn't parse anything\r\n    console.error(`      [parsePrimary] \u274C FAILED - Cannot parse token: ${this.peek().value} (${this.peek().type})`);\r\n    throw this.error('Expected expression');\r\n  }\r\n\r\n\r\n  enterMethod(methodName) {\r\n    if (!this.callStack) this.callStack = [];\r\n    this.callStack.push({\r\n      method: methodName,\r\n      line: this.peek().line,\r\n      column: this.peek().column,\r\n      token: this.peek().value,\r\n    });\r\n  }\r\n\r\n  parseObjectLiteral() {\r\n    this.enterMethod('parseObjectLiteral');\r\n    const properties = [];\r\n\r\n    try {\r\n      while (!this.isPunctuation('}') && !this.isAtEnd()) {\r\n        if (this.isPunctuation(',')) {\r\n          this.advance();\r\n          continue;\r\n        }\r\n\r\n        let key = null;\r\n        let shorthand = false;\r\n\r\n        if (this.isPunctuation('[')) {\r\n          this.advance();\r\n          key = this.parseExpression();\r\n          this.consume(TokenType.PUNCTUATION, 'Expected ]');\r\n        } else if (this.check(TokenType.IDENTIFIER)) {\r\n          const token = this.advance();\r\n          key = new Identifier(token.value);\r\n\r\n          if (this.isPunctuation(',') || this.isPunctuation('}')) {\r\n            shorthand = true;\r\n          }\r\n        } else if (this.check(TokenType.STRING)) {\r\n          const token = this.advance();\r\n          key = new Literal(token.value, token.value, 'string');\r\n        } else {\r\n          this.advance();\r\n          continue;\r\n        }\r\n\r\n        let value = key;\r\n        if (!shorthand && this.isPunctuation(':')) {\r\n          this.advance();\r\n\r\n          try {\r\n            value = this.parseTernary();\r\n          } catch (error) {\r\n            if (error.parserError) {\r\n              this.reportParserError(error.parserError);\r\n            }\r\n            value = key;\r\n\r\n            while (!this.isPunctuation(',') && !this.isPunctuation('}') && !this.isAtEnd()) {\r\n              this.advance();\r\n            }\r\n          }\r\n        }\r\n\r\n        const prop = new Property(key, value);\r\n        prop.shorthand = shorthand;\r\n        properties.push(prop);\r\n\r\n        if (this.isPunctuation(',')) {\r\n          this.advance();\r\n        }\r\n      }\r\n\r\n      if (this.isPunctuation('}')) {\r\n        this.advance();\r\n      }\r\n\r\n      this.exitMethod('parseObjectLiteral');\r\n      return new ObjectLiteral(properties);\r\n    } catch (e) {\r\n      this.exitMethod('parseObjectLiteral');\r\n      throw e;\r\n    }\r\n  }\r\n  parseArguments() {\r\n    const args = [];\r\n\r\n    while (!this.isPunctuation(')') && !this.isAtEnd()) {\r\n      try {\r\n        // \u2B50 KEY FIX: Use parseTernary() instead of parseLogicalOr()\r\n        // This allows all operators except assignment\r\n        args.push(this.parseTernary());\r\n      } catch (error) {\r\n        break;\r\n      }\r\n\r\n      if (!this.isPunctuation(',')) break;\r\n      this.advance();\r\n    }\r\n\r\n    return args;\r\n  }\r\n\r\n  check(type) {\r\n    if (this.isAtEnd()) return false;\r\n    return this.peek().type === type;\r\n  }\r\n\r\n  consume(type, message = '') {\r\n    if (this.check(type)) {\r\n      return this.advance();\r\n    }\r\n    throw this.error(message || `Expected ${type}`);\r\n  }\r\n\r\n  consumeStatementEnd() {\r\n    this.skipComments();  // \u2190 ADD THIS LINE\r\n\r\n    if (this.isPunctuation(';')) {\r\n      this.advance();\r\n    }\r\n\r\n    this.skipComments();  // \u2190 ADD THIS LINE - skip trailing comments too\r\n  }\r\n\r\n  advance() {\r\n    if (!this.isAtEnd()) {\r\n      this.current++;\r\n    }\r\n    return this.previous();\r\n  }\r\n\r\n  peek() {\r\n    return this.tokens[this.current];\r\n  }\r\n\r\n\r\n  previous() {\r\n    return this.tokens[this.current - 1];\r\n  }\r\n\r\n  isAtEnd() {\r\n    return this.peek().type === TokenType.EOF;\r\n  }\r\n\r\n  getLocation() {\r\n    const token = this.peek();\r\n    return { line: token.line, column: token.column };\r\n  }\r\n  /**\r\n  * Enhanced error reporting with full call stack\r\n  */\r\n  error(message) {\r\n    const token = this.peek();\r\n    const errorObj = new Error(\r\n      `Parse error at line ${token.line}, column ${token.column}: ${message}`\r\n    );\r\n    errorObj.parserError = {\r\n      message: `Parse error at line ${token.line}, column ${token.column}: ${message}`,\r\n      line: token.line,\r\n      column: token.column,\r\n      token: { type: token.type, value: token.value },\r\n      callStack: this.callStack ? [...this.callStack] : [],\r\n    };\r\n    return errorObj;\r\n  }\r\n  /**\r\n   * Get context around current token (5 tokens before and after)\r\n   */\r\n  getContext() {\r\n    const start = Math.max(0, this.current - 5);\r\n    const end = Math.min(this.tokens.length, this.current + 6);\r\n\r\n    return {\r\n      before: this.tokens.slice(start, this.current).map(t => `${t.value}(${t.type})`).join(' '),\r\n      current: `\u2192 ${this.peek().value}(${this.peek().type}) \u2190`,\r\n      after: this.tokens.slice(this.current + 1, end).map(t => `${t.value}(${t.type})`).join(' '),\r\n    };\r\n  }\r\n  /**\r\n   * Track when exiting a parser method\r\n   */\r\n  exitMethod(methodName) {\r\n    if (!this.callStack) this.callStack = [];\r\n    if (this.callStack.length > 0) {\r\n      const last = this.callStack[this.callStack.length - 1];\r\n      if (last.method === methodName) {\r\n        this.callStack.pop();\r\n      }\r\n    }\r\n  }\r\n\r\n  getTokenContext() {\r\n    const start = Math.max(0, this.current - 5);\r\n    const end = Math.min(this.tokens.length, this.current + 6);\r\n\r\n    const before = this.tokens\r\n      .slice(start, this.current)\r\n      .map(t => `${t.value}`)\r\n      .join(' ');\r\n\r\n    const after = this.tokens\r\n      .slice(this.current + 1, end)\r\n      .map(t => `${t.value}`)\r\n      .join(' ');\r\n\r\n    return {\r\n      before: before,\r\n      current: `\u2192 ${this.peek().value} \u2190`,\r\n      after: after,\r\n    };\r\n  }\r\n\r\n  synchronize() {\r\n    this.advance();\r\n    while (!this.isAtEnd()) {\r\n      if (this.isPunctuation(';')) {\r\n        this.advance();\r\n        return;\r\n      }\r\n      if (this.isKeyword('class') || this.isKeyword('function') || this.isKeyword('import')) {\r\n        return;\r\n      }\r\n      this.advance();\r\n    }\r\n  }\r\n\r\n  getErrors() {\r\n    return this.errors;\r\n  }\r\n\r\n  /**\r\n   * Report error with full context\r\n   */\r\n  reportError(error) {\r\n    this.errors.push(error);\r\n\r\n    if (this.debugMode) {\r\n      console.error('\\n\u274C PARSER ERROR DETECTED:\\n');\r\n      console.error(`Message: ${error.message}\\n`);\r\n\r\n      console.error('\uD83D\uDCCD Token Context:');\r\n      console.error(`  Before:  ${error.context.before}`);\r\n      console.error(`  Current: ${error.context.current}`);\r\n      console.error(`  After:   ${error.context.after}\\n`);\r\n\r\n      console.error('\uD83D\uDCDA Call Stack (where error came from):');\r\n      if (error.callStack.length === 0) {\r\n        console.error('  (top level)\\n');\r\n      } else {\r\n        error.callStack.forEach((frame, idx) => {\r\n          const arrow = idx === error.callStack.length - 1 ? '\u2192' : ' ';\r\n          console.error(`  ${arrow} ${idx + 1}. ${frame.method}()`);\r\n          console.error(`     at token: \"${frame.token}\" (line ${frame.line}, col ${frame.column})`);\r\n        });\r\n        console.error('');\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport {\r\n  Parser,\r\n  Program,\r\n  ImportDeclaration,\r\n  ImportSpecifier,\r\n  ClassDeclaration,\r\n  ClassBody,\r\n  FieldDeclaration,\r\n  MethodDeclaration,\r\n  Parameter,\r\n  FunctionDeclaration,\r\n  BlockStatement,\r\n  ReturnStatement,\r\n  ExpressionStatement,\r\n  Identifier,\r\n  Literal,\r\n  CallExpression,\r\n  NewExpression,\r\n  ObjectLiteral,\r\n  Property,\r\n  ArrowFunctionExpression,\r\n  MemberExpression,\r\n  ASTNode,\r\n};"],
+  "mappings": "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",
+  "names": ["TokenType", "getLogger", "ASTNode", "type", "location", "Program", "body", "ImportDeclaration", "specifiers", "source", "ImportSpecifier", "imported", "local", "ClassDeclaration", "id", "superClass", "ClassBody", "fields", "methods", "FieldDeclaration", "key", "initialValue", "MethodDeclaration", "params", "Parameter", "name", "optional", "defaultValue", "FunctionDeclaration", "isAsync", "BlockStatement", "ReturnStatement", "argument", "ExpressionStatement", "expression", "Identifier", "Literal", "value", "raw", "CallExpression", "callee", "args", "NewExpression", "ObjectLiteral", "properties", "Property", "ArrowFunctionExpression", "MemberExpression", "object", "property", "computed", "Parser", "tokens", "options", "stmt", "error", "expr", "token", "logger", "startLocation", "importedName", "localName", "defaultName", "imported2", "local2", "modulePathToken", "n", "pos", "nameToken", "superName", "itemCount", "currentPos", "fieldName", "e", "methodName", "paramLocation", "paramName", "braceDepth", "statements", "result", "consequent", "alternate", "right", "operator", "savedPos", "nextPos", "elements", "ident", "shorthand", "prop", "message", "errorObj", "start", "end", "t", "before", "after", "frame", "idx", "arrow"]
+}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/flutterjs_report_generator.js b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_report_generator.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/dist/flutterjs_report_generator.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_report_generator.js
diff --git a/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_report_generator.js.map b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_report_generator.js.map
new file mode 100644
index 00000000..4b551a4f
--- /dev/null
+++ b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_report_generator.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/flutterjs_report_generator.js"],
+  "sourcesContent": ["/**\r\n * FlutterJS Report Generator - Enhanced Phase 3 (FIXED)\r\n * Generates JSON, Markdown, and Console reports from analysis results\r\n * \r\n * Integrates Phase 1 (Widget Analysis), Phase 2 (State Analysis),\r\n * and Phase 3 (Context + SSR Analysis)\r\n */\r\n\r\nimport { getLogger } from './flutterjs_logger.js';\r\n\r\n// ============================================================================\r\n// REPORT GENERATOR CLASS\r\n// ============================================================================\r\n\r\nclass ReportGenerator {\r\n  constructor(widgetResults, stateResults, contextResults = null, ssrResults = null, options = {}) {\r\n    this.widgetResults = widgetResults;\r\n    this.stateResults = stateResults;\r\n    this.contextResults = contextResults;\r\n    this.ssrResults = ssrResults;\r\n\r\n    this.options = {\r\n      format: 'json',\r\n      includeMetrics: true,\r\n      includeTree: true,\r\n      includeValidation: true,\r\n      includeSuggestions: true,\r\n      includeContext: true,\r\n      includeSsr: true,\r\n      prettyPrint: true,\r\n      ...options,\r\n    };\r\n\r\n    // Initialize logger\r\n    this.logger = getLogger().createComponentLogger('ReportGenerator');\r\n\r\n    this.metadata = {};\r\n    this.report = {};\r\n  }\r\n\r\n  /**\r\n   * Main entry point - generate report\r\n   */\r\n  generate() {\r\n    this.logger.startSession('ReportGeneration');\r\n    this.logger.info('Generating report');\r\n\r\n    try {\r\n      this.calculateMetrics();\r\n      this.buildReport();\r\n\r\n      let output;\r\n      switch (this.options.format) {\r\n        case 'json':\r\n          output = this.toJSON();\r\n          break;\r\n        case 'markdown':\r\n          output = this.toMarkdown();\r\n          break;\r\n        case 'console':\r\n          output = this.toConsole();\r\n          break;\r\n        default:\r\n          output = this.toJSON();\r\n      }\r\n\r\n      this.logger.success('Report generation complete');\r\n      this.logger.endSession('ReportGeneration');\r\n      return output;\r\n    } catch (error) {\r\n      this.logger.failure('Report generation failed', error.message);\r\n      this.logger.endSession('ReportGeneration');\r\n      throw error;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Calculate metrics from analysis results\r\n   */\r\n  calculateMetrics() {\r\n    const widgets = this.widgetResults.widgets || [];\r\n    const functions = this.widgetResults.functions || [];\r\n    const imports = this.widgetResults.imports || [];\r\n    const stateClasses = this.stateResults.stateClasses || [];\r\n    const stateFields = this.stateResults.stateFields || [];\r\n    const setStateCalls = this.stateResults.setStateCalls || [];\r\n    const lifecycleMethods = this.stateResults.lifecycleMethods || [];\r\n    const eventHandlers = this.stateResults.eventHandlers || [];\r\n\r\n    // Phase 3: Context metrics\r\n    const inheritedWidgets = this.contextResults?.inheritedWidgets || [];\r\n    const changeNotifiers = this.contextResults?.changeNotifiers || [];\r\n    const providers = this.contextResults?.providers || [];\r\n    const contextAccessPoints = this.contextResults?.contextAccessPoints || [];\r\n\r\n    // Phase 3: SSR metrics\r\n    const ssrScore = this.ssrResults?.ssrCompatibilityScore || 0;\r\n    const ssrSafePatterns = this.ssrResults?.ssrSafePatterns || [];\r\n    const ssrUnsafePatterns = this.ssrResults?.ssrUnsafePatterns || [];\r\n    const hydrationRequirements = this.ssrResults?.hydrationRequirements || [];\r\n\r\n    this.metadata = {\r\n      // Widget metrics (Phase 1)\r\n      totalWidgets: widgets.length,\r\n      statelessWidgets: widgets.filter((w) => w.type === 'stateless').length,\r\n      statefulWidgets: widgets.filter((w) => w.type === 'stateful').length,\r\n      componentWidgets: widgets.filter((w) => w.type === 'component').length,\r\n      stateClasses: stateClasses.length,\r\n\r\n      // State metrics (Phase 2)\r\n      totalStateFields: stateFields.length,\r\n      setStateCallCount: setStateCalls.length,\r\n      lifecycleMethodCount: lifecycleMethods.length,\r\n      eventHandlerCount: eventHandlers.length,\r\n\r\n      // Context metrics (Phase 3)\r\n      inheritedWidgets: inheritedWidgets.length,\r\n      changeNotifiers: changeNotifiers.length,\r\n      providers: providers.length,\r\n      contextAccessPoints: contextAccessPoints.length,\r\n\r\n      // SSR metrics (Phase 3)\r\n      ssrCompatibilityScore: ssrScore,\r\n      ssrCompatibility: this.ssrResults?.overallCompatibility || 'unknown',\r\n      ssrSafePatterns: ssrSafePatterns.length,\r\n      ssrUnsafePatterns: ssrUnsafePatterns.length,\r\n      hydrationRequired: hydrationRequirements.length > 0,\r\n      hydrationCount: hydrationRequirements.length,\r\n\r\n      // Function metrics\r\n      totalFunctions: functions.length,\r\n      entryPoint: this.widgetResults.entryPoint,\r\n      rootWidget: this.widgetResults.rootWidget,\r\n\r\n      // Import metrics\r\n      totalImports: imports.length,\r\n      externalPackages: new Set(imports.map((imp) => imp.source)).size,\r\n\r\n      // Widget tree metrics\r\n      treeDepth: this.calculateTreeDepth(this.widgetResults.widgetTree),\r\n\r\n      // Validation metrics\r\n      errorCount: this.countValidationIssues(this.stateResults.validationResults, 'error'),\r\n      warningCount: this.countValidationIssues(this.stateResults.validationResults, 'warning'),\r\n      infoCount: this.countValidationIssues(this.stateResults.validationResults, 'info'),\r\n    };\r\n\r\n    // Calculate scores\r\n    this.metadata.healthScore = this.calculateHealthScore();\r\n    this.metadata.complexityScore = this.calculateComplexityScore();\r\n  }\r\n\r\n  /**\r\n   * Calculate tree depth\r\n   */\r\n  calculateTreeDepth(node, depth = 1) {\r\n    if (!node || !node.children || node.children.length === 0) {\r\n      return depth;\r\n    }\r\n    return 1 + Math.max(...node.children.map((child) => this.calculateTreeDepth(child, depth + 1)));\r\n  }\r\n\r\n  /**\r\n   * Count validation issues by severity\r\n   */\r\n  countValidationIssues(results, severity) {\r\n    if (!results) return 0;\r\n    return results.filter((r) => r.severity === severity).length;\r\n  }\r\n\r\n  /**\r\n   * Calculate health score (0-100)\r\n   */\r\n  calculateHealthScore() {\r\n    let score = 100;\r\n\r\n    score -= this.metadata.errorCount * 10;\r\n    score -= this.metadata.warningCount * 2;\r\n\r\n    if (this.metadata.entryPoint) {\r\n      score += 5;\r\n    }\r\n\r\n    if (this.metadata.statefulWidgets > this.metadata.statelessWidgets) {\r\n      score -= 10;\r\n    }\r\n\r\n    if (this.metadata.treeDepth > 5) {\r\n      score -= 5;\r\n    }\r\n\r\n    if (this.metadata.ssrCompatibilityScore < 50) {\r\n      score -= 15;\r\n    }\r\n\r\n    return Math.max(0, Math.min(100, score));\r\n  }\r\n\r\n  /**\r\n   * Calculate complexity score (0-100)\r\n   */\r\n  calculateComplexityScore() {\r\n    let score = 0;\r\n\r\n    score += Math.min(this.metadata.totalStateFields * 10, 40);\r\n    score += Math.min(this.metadata.setStateCallCount * 5, 30);\r\n    score += Math.min(this.metadata.eventHandlerCount * 2, 20);\r\n\r\n    if (this.metadata.treeDepth > 5) {\r\n      score += 10;\r\n    }\r\n\r\n    score += Math.min(this.metadata.contextAccessPoints * 3, 15);\r\n\r\n    return Math.min(100, score);\r\n  }\r\n\r\n  /**\r\n   * Build comprehensive report object\r\n   */\r\n  buildReport() {\r\n    const widgets = this.widgetResults.widgets || [];\r\n    const stateClasses = this.stateResults.stateClasses || [];\r\n    const validationResults = this.stateResults.validationResults || [];\r\n\r\n    this.report = {\r\n      analysis: {\r\n        file: this.widgetResults.file || 'analysis',\r\n        timestamp: new Date().toISOString(),\r\n        status: validationResults.some((r) => r.severity === 'error') ? 'warning' : 'success',\r\n        phase: 'phase1+phase2+phase3',\r\n      },\r\n\r\n      summary: {\r\n        widgets: {\r\n          total: this.metadata.totalWidgets,\r\n          stateless: this.metadata.statelessWidgets,\r\n          stateful: this.metadata.statefulWidgets,\r\n          components: this.metadata.componentWidgets,\r\n        },\r\n        state: {\r\n          stateClasses: this.metadata.stateClasses,\r\n          stateFields: this.metadata.totalStateFields,\r\n          setStateCalls: this.metadata.setStateCallCount,\r\n          lifecycleMethods: this.metadata.lifecycleMethodCount,\r\n          eventHandlers: this.metadata.eventHandlerCount,\r\n        },\r\n        context: this.options.includeContext ? {\r\n          inheritedWidgets: this.metadata.inheritedWidgets,\r\n          changeNotifiers: this.metadata.changeNotifiers,\r\n          providers: this.metadata.providers,\r\n          contextAccessPoints: this.metadata.contextAccessPoints,\r\n        } : null,\r\n        ssr: this.options.includeSsr ? {\r\n          compatibility: this.metadata.ssrCompatibility,\r\n          compatibilityScore: this.metadata.ssrCompatibilityScore,\r\n          safePatterns: this.metadata.ssrSafePatterns,\r\n          unsafePatterns: this.metadata.ssrUnsafePatterns,\r\n          hydrationRequired: this.metadata.hydrationRequired,\r\n          hydrationCount: this.metadata.hydrationCount,\r\n        } : null,\r\n        functions: this.metadata.totalFunctions,\r\n        imports: this.metadata.totalImports,\r\n        externalPackages: this.metadata.externalPackages,\r\n        entryPoint: this.metadata.entryPoint,\r\n        rootWidget: this.metadata.rootWidget,\r\n        treeDepth: this.metadata.treeDepth,\r\n        healthScore: this.metadata.healthScore,\r\n        complexityScore: this.metadata.complexityScore,\r\n      },\r\n\r\n      widgets: this.formatWidgets(),\r\n      stateClasses: this.formatStateClasses(),\r\n      imports: this.formatImports(),\r\n      functions: this.formatFunctions(),\r\n\r\n      context: this.options.includeContext ? this.formatContext() : null,\r\n      ssr: this.options.includeSsr ? this.formatSsr() : null,\r\n\r\n      widgetTree: this.options.includeTree ? this.formatWidgetTree() : null,\r\n      dependencyGraph: this.formatDependencyGraph(),\r\n      validation: this.options.includeValidation ? this.formatValidation() : null,\r\n      suggestions: this.options.includeSuggestions ? this.generateSuggestions() : null,\r\n\r\n      metrics: this.options.includeMetrics ? this.getDetailedMetrics() : null,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Phase 3: Format context analysis results\r\n   */\r\n  formatContext() {\r\n    if (!this.contextResults) {\r\n      return {\r\n        inheritedWidgets: [],\r\n        changeNotifiers: [],\r\n        providers: [],\r\n        contextFlow: {},\r\n      };\r\n    }\r\n\r\n    return {\r\n      inheritedWidgets: this.contextResults.inheritedWidgets?.map((widget) => ({\r\n        name: widget.name,\r\n        properties: widget.properties,\r\n        staticAccessors: widget.staticAccessors?.map((a) => a.name),\r\n        updateShouldNotifyImplemented: widget.updateShouldNotifyImplemented,\r\n        usedIn: widget.usedIn,\r\n        usageCount: widget.usageCount,\r\n      })) || [],\r\n\r\n      changeNotifiers: this.contextResults.changeNotifiers?.map((notifier) => ({\r\n        name: notifier.name,\r\n        properties: notifier.properties?.length || 0,\r\n        getters: notifier.getters?.map((g) => g.name) || [],\r\n        methods: notifier.methods?.map((m) => ({\r\n          name: m.name,\r\n          callsNotifyListeners: m.callsNotifyListeners,\r\n          mutations: m.mutations,\r\n        })) || [],\r\n        consumers: notifier.consumers || [],\r\n      })) || [],\r\n\r\n      providers: this.contextResults.providers?.map((provider) => ({\r\n        type: provider.providerType,\r\n        valueType: provider.valueType,\r\n        consumers: provider.consumers || [],\r\n        accessPatterns: provider.accessPatterns || [],\r\n      })) || [],\r\n\r\n      contextFlow: {\r\n        inheritedWidgetGraph: this.contextResults.inheritedWidgetGraph || {},\r\n        providerGraph: this.contextResults.providerGraph || {},\r\n      },\r\n\r\n      contextAccessPoints: this.contextResults.contextAccessPoints?.map((usage) => ({\r\n        pattern: usage.pattern,\r\n        type: usage.type,\r\n        location: usage.location,\r\n        ssrSafe: usage.ssrSafe,\r\n        reason: usage.reason,\r\n      })) || [],\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Phase 3: Format SSR analysis results\r\n   */\r\n  formatSsr() {\r\n    if (!this.ssrResults) {\r\n      return {\r\n        compatibility: 'unknown',\r\n        score: 0,\r\n        patterns: { safe: [], unsafe: [] },\r\n        hydration: [],\r\n        migration: [],\r\n      };\r\n    }\r\n\r\n    return {\r\n      overallCompatibility: this.ssrResults.overallCompatibility,\r\n      compatibilityScore: this.ssrResults.ssrCompatibilityScore,\r\n      readinessScore: this.ssrResults.ssrReadinessScore || this.ssrResults.ssrCompatibilityScore,\r\n      estimatedEffort: this.ssrResults.estimatedEffort,\r\n\r\n      patterns: {\r\n        safe: this.ssrResults.ssrSafePatterns?.map((p) => ({\r\n          pattern: p.pattern,\r\n          example: p.example,\r\n          why: p.why,\r\n          confidence: p.confidence,\r\n        })) || [],\r\n\r\n        unsafe: this.ssrResults.ssrUnsafePatterns?.map((p) => ({\r\n          pattern: p.pattern,\r\n          example: p.example,\r\n          why: p.why,\r\n          severity: p.severity,\r\n          suggestion: p.suggestion,\r\n          location: p.location,\r\n        })) || [],\r\n      },\r\n\r\n      hydration: {\r\n        required: this.ssrResults.hydrationCount > 0,\r\n        count: this.ssrResults.hydrationCount,\r\n        requirements: this.ssrResults.hydrationRequirements?.map((r) => ({\r\n          dependency: r.dependency,\r\n          reason: r.reason,\r\n          order: r.order,\r\n          requiredProviders: r.requiredProviders,\r\n          requiredState: r.requiredState,\r\n        })) || [],\r\n      },\r\n\r\n      lazyLoadingOpportunities: this.ssrResults.lazyLoadOpportunities?.map((opp) => ({\r\n        target: opp.target,\r\n        reason: opp.reason,\r\n        estimatedSize: opp.estimatedSize,\r\n        priority: opp.priority,\r\n        recommendation: opp.recommendation,\r\n      })) || [],\r\n\r\n      migrationPath: this.ssrResults.ssrMigrationPath?.map((step) => ({\r\n        step: step.step,\r\n        action: step.action,\r\n        description: step.description,\r\n        example: step.example,\r\n        effort: step.effort,\r\n        priority: step.priority,\r\n        locations: step.locations,\r\n      })) || [],\r\n\r\n      validationIssues: {\r\n        critical: this.ssrResults.criticalIssues?.map((i) => ({\r\n          type: i.type,\r\n          message: i.message,\r\n          suggestion: i.suggestion,\r\n          location: i.location,\r\n        })) || [],\r\n\r\n        warnings: this.ssrResults.warningIssues?.map((i) => ({\r\n          type: i.type,\r\n          message: i.message,\r\n          suggestion: i.suggestion,\r\n        })) || [],\r\n      },\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Format widgets for report\r\n   */\r\n  formatWidgets() {\r\n    const widgets = {};\r\n\r\n    (this.widgetResults.widgets || []).forEach((widget) => {\r\n      widgets[widget.name] = {\r\n        type: widget.type,\r\n        superClass: widget.superClass || null,\r\n        location: widget.location,\r\n        constructor: widget.constructor\r\n          ? {\r\n            params: widget.constructor.params || [],\r\n          }\r\n          : null,\r\n        methods: widget.methods.map((m) => ({\r\n          name: m.name,\r\n          params: m.params || [],\r\n        })),\r\n        properties: widget.properties || [],\r\n        linkedStateClass: widget.linkedStateClass || null,\r\n        imports: widget.imports || [],\r\n      };\r\n    });\r\n\r\n    return widgets;\r\n  }\r\n\r\n  /**\r\n   * FIXED: Format state classes for report\r\n   * Properly handle StateField objects which may or may not have isUsed method\r\n   */\r\n  formatStateClasses() {\r\n    const stateClasses = {};\r\n\r\n    (this.stateResults.stateClasses || []).forEach((sc) => {\r\n      const metadata = sc.metadata || sc;  // Handle both wrapped and unwrapped formats\r\n      \r\n      stateClasses[metadata.name] = {\r\n        name: metadata.name,\r\n        linkedStatefulWidget: metadata.linkedStatefulWidget,\r\n        location: metadata.location,\r\n\r\n        stateFields: (metadata.stateFields || []).map((field) => {\r\n          // FIXED: Check if isUsed is a function before calling it\r\n          const isUsed = typeof field.isUsed === 'function' \r\n            ? field.isUsed() \r\n            : (field.usedInMethods && field.usedInMethods.length > 0);\r\n\r\n          return {\r\n            name: field.name,\r\n            type: field.type || 'any',\r\n            initialValue: field.initialValueString || field.initialValue?.toString() || 'undefined',\r\n            isUsed: isUsed,\r\n            usedInMethods: field.usedInMethods || [],\r\n            mutatedInMethods: field.mutatedInMethods || [],\r\n            mutationCount: (field.mutations && field.mutations.length) || 0,\r\n          };\r\n        }),\r\n\r\n        lifecycleMethods: (metadata.lifecycleMethods || []).map((lc) => {\r\n          // FIXED: Check if isValid is a function\r\n          const isValid = typeof lc.isValid === 'function' \r\n            ? lc.isValid() \r\n            : true;\r\n\r\n          return {\r\n            name: lc.name,\r\n            callsSuper: lc.callsSuper || false,\r\n            hasSideEffects: lc.hasSideEffects || false,\r\n            isValid: isValid,\r\n            issues: lc.validationIssues || [],\r\n          };\r\n        }),\r\n\r\n        otherMethods: (metadata.otherMethods || []).map((m) => ({\r\n          name: m.name,\r\n          params: m.params || [],\r\n        })),\r\n      };\r\n    });\r\n\r\n    return stateClasses;\r\n  }\r\n\r\n  /**\r\n   * Format imports for report\r\n   */\r\n  formatImports() {\r\n    const imports = {};\r\n\r\n    (this.widgetResults.imports || []).forEach((imp) => {\r\n      imports[imp.source] = imp.items || [];\r\n    });\r\n\r\n    return imports;\r\n  }\r\n\r\n  /**\r\n   * Format functions for report\r\n   */\r\n  formatFunctions() {\r\n    const functions = {};\r\n\r\n    (this.widgetResults.functions || []).forEach((func) => {\r\n      functions[func.name] = {\r\n        type: func.type,\r\n        location: func.location,\r\n        params: (func.params || []).map((p) => ({\r\n          name: p.name,\r\n          optional: p.optional,\r\n        })),\r\n        isEntryPoint: func.isEntryPoint || false,\r\n      };\r\n    });\r\n\r\n    return functions;\r\n  }\r\n\r\n  /**\r\n   * Format widget tree for report\r\n   */\r\n  formatWidgetTree() {\r\n    if (!this.widgetResults.widgetTree) {\r\n      return null;\r\n    }\r\n\r\n    return this.treeNodeToObject(this.widgetResults.widgetTree);\r\n  }\r\n\r\n  /**\r\n   * Convert tree node to object recursively\r\n   */\r\n  treeNodeToObject(node) {\r\n    if (!node) return null;\r\n\r\n    return {\r\n      name: node.widget?.name || 'Unknown',\r\n      type: node.widget?.type || 'unknown',\r\n      depth: node.depth || 0,\r\n      children: (node.children || []).map((child) => this.treeNodeToObject(child)),\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Format dependency graph for report\r\n   */\r\n  formatDependencyGraph() {\r\n    const graph = this.stateResults.dependencyGraph;\r\n    if (!graph) return null;\r\n\r\n    return {\r\n      stateToMethods: Object.fromEntries(graph.stateToMethods || []),\r\n      methodToState: Object.fromEntries(graph.methodToState || []),\r\n      eventToState: Object.fromEntries(graph.eventToState || []),\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Format validation results for report\r\n   */\r\n  formatValidation() {\r\n    const results = this.stateResults.validationResults || [];\r\n\r\n    return {\r\n      totalIssues: results.length,\r\n      errors: results.filter((r) => r.severity === 'error'),\r\n      warnings: results.filter((r) => r.severity === 'warning'),\r\n      info: results.filter((r) => r.severity === 'info'),\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Generate suggestions based on analysis\r\n   */\r\n  generateSuggestions() {\r\n    const suggestions = [];\r\n\r\n    // Phase 1 & 2 Suggestions\r\n    if (this.metadata.statefulWidgets > this.metadata.statelessWidgets) {\r\n      suggestions.push({\r\n        type: 'structure',\r\n        severity: 'info',\r\n        message: 'More stateful than stateless widgets',\r\n        suggestion: 'Consider using stateless widgets where possible for better performance',\r\n      });\r\n    }\r\n\r\n    if (this.metadata.treeDepth > 5) {\r\n      suggestions.push({\r\n        type: 'structure',\r\n        severity: 'warning',\r\n        message: 'Deep widget tree detected',\r\n        suggestion: 'Consider refactoring to reduce nesting depth (aim for < 5 levels)',\r\n      });\r\n    }\r\n\r\n    // Phase 3: SSR Suggestions\r\n    if (this.options.includeSsr && this.ssrResults) {\r\n      if (this.metadata.ssrCompatibilityScore < 50) {\r\n        suggestions.push({\r\n          type: 'ssr-compatibility',\r\n          severity: 'warning',\r\n          message: `Low SSR compatibility score (${this.metadata.ssrCompatibilityScore}/100)`,\r\n          suggestion: `Follow the ${this.ssrResults.ssrMigrationPath?.length || 0} migration steps to improve SSR support`,\r\n          migrationSteps: this.ssrResults.ssrMigrationPath?.length || 0,\r\n        });\r\n      }\r\n\r\n      if (this.metadata.ssrUnsafePatterns > 5) {\r\n        suggestions.push({\r\n          type: 'ssr-patterns',\r\n          severity: 'warning',\r\n          message: `Found ${this.metadata.ssrUnsafePatterns} SSR-unsafe patterns`,\r\n          suggestion: 'Refactor unsafe patterns to enable server-side rendering',\r\n          unsafePatterns: this.metadata.ssrUnsafePatterns,\r\n        });\r\n      }\r\n\r\n      if (this.metadata.hydrationRequired) {\r\n        suggestions.push({\r\n          type: 'hydration',\r\n          severity: 'info',\r\n          message: `App requires hydration for ${this.metadata.hydrationCount} dependencies`,\r\n          suggestion: 'Implement hydration layer to re-attach listeners after server render',\r\n          hydrationDependencies: this.metadata.hydrationCount,\r\n        });\r\n      }\r\n\r\n      if (this.ssrResults.lazyLoadOpportunities?.length > 0) {\r\n        suggestions.push({\r\n          type: 'optimization',\r\n          severity: 'info',\r\n          message: `Found ${this.ssrResults.lazyLoadOpportunities.length} lazy-load opportunities`,\r\n          suggestion: 'Implement code splitting to reduce initial bundle size',\r\n          opportunities: this.ssrResults.lazyLoadOpportunities.length,\r\n        });\r\n      }\r\n    }\r\n\r\n    // Phase 3: Context Suggestions\r\n    if (this.options.includeContext && this.contextResults) {\r\n      if (this.metadata.inheritedWidgets > 3) {\r\n        suggestions.push({\r\n          type: 'context-hierarchy',\r\n          severity: 'info',\r\n          message: `Multiple InheritedWidgets detected (${this.metadata.inheritedWidgets})`,\r\n          suggestion: 'Consider consolidating context providers to reduce nesting',\r\n          inheritedWidgets: this.metadata.inheritedWidgets,\r\n        });\r\n      }\r\n\r\n      if (this.metadata.providers > 0) {\r\n        suggestions.push({\r\n          type: 'state-management',\r\n          severity: 'info',\r\n          message: `Using Provider pattern (${this.metadata.providers} providers)`,\r\n          suggestion: 'Ensure providers are properly organized and lazy-initialized where possible',\r\n          providers: this.metadata.providers,\r\n        });\r\n      }\r\n    }\r\n\r\n    return suggestions;\r\n  }\r\n\r\n  /**\r\n   * Get detailed metrics\r\n   */\r\n  getDetailedMetrics() {\r\n    return {\r\n      widgetMetrics: {\r\n        total: this.metadata.totalWidgets,\r\n        byType: {\r\n          stateless: this.metadata.statelessWidgets,\r\n          stateful: this.metadata.statefulWidgets,\r\n          component: this.metadata.componentWidgets,\r\n          state: this.metadata.stateClasses,\r\n        },\r\n      },\r\n\r\n      stateMetrics: {\r\n        stateClasses: this.metadata.stateClasses,\r\n        totalFields: this.metadata.totalStateFields,\r\n        setStateCalls: this.metadata.setStateCallCount,\r\n        lifecycleMethods: this.metadata.lifecycleMethodCount,\r\n        eventHandlers: this.metadata.eventHandlerCount,\r\n      },\r\n\r\n      contextMetrics: this.options.includeContext ? {\r\n        inheritedWidgets: this.metadata.inheritedWidgets,\r\n        changeNotifiers: this.metadata.changeNotifiers,\r\n        providers: this.metadata.providers,\r\n        contextAccessPoints: this.metadata.contextAccessPoints,\r\n      } : null,\r\n\r\n      ssrMetrics: this.options.includeSsr ? {\r\n        compatibilityScore: this.metadata.ssrCompatibilityScore,\r\n        compatibility: this.metadata.ssrCompatibility,\r\n        safePatterns: this.metadata.ssrSafePatterns,\r\n        unsafePatterns: this.metadata.ssrUnsafePatterns,\r\n        hydrationRequired: this.metadata.hydrationRequired,\r\n        hydrationCount: this.metadata.hydrationCount,\r\n      } : null,\r\n\r\n      functionMetrics: {\r\n        total: this.metadata.totalFunctions,\r\n        entryPoint: this.metadata.entryPoint || 'none',\r\n      },\r\n\r\n      dependencyMetrics: {\r\n        totalImports: this.metadata.totalImports,\r\n        externalPackages: this.metadata.externalPackages,\r\n      },\r\n\r\n      structureMetrics: {\r\n        widgetTreeDepth: this.metadata.treeDepth,\r\n        rootWidget: this.metadata.rootWidget || 'none',\r\n      },\r\n\r\n      healthMetrics: {\r\n        healthScore: this.metadata.healthScore,\r\n        complexityScore: this.metadata.complexityScore,\r\n        errors: this.metadata.errorCount,\r\n        warnings: this.metadata.warningCount,\r\n      },\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Generate JSON report\r\n   */\r\n  toJSON() {\r\n    if (this.options.prettyPrint) {\r\n      return JSON.stringify(this.report, null, 2);\r\n    } else {\r\n      return JSON.stringify(this.report);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Generate Markdown report\r\n   */\r\n  toMarkdown() {\r\n    let md = '# FlutterJS Code Analysis Report (Phase 1 + 2 + 3)\\n\\n';\r\n\r\n    md += `**Generated:** ${new Date().toISOString()}\\n\\n`;\r\n\r\n    // Summary Table\r\n    md += '## Summary\\n\\n';\r\n    md += `| Metric | Count |\\n`;\r\n    md += `|--------|-------|\\n`;\r\n    md += `| Total Widgets | ${this.metadata.totalWidgets} |\\n`;\r\n    md += `| Stateless | ${this.metadata.statelessWidgets} |\\n`;\r\n    md += `| Stateful | ${this.metadata.statefulWidgets} |\\n`;\r\n    md += `| State Classes | ${this.metadata.stateClasses} |\\n`;\r\n    md += `| State Fields | ${this.metadata.totalStateFields} |\\n`;\r\n    md += `| Health Score | ${this.metadata.healthScore}/100 |\\n`;\r\n    md += `| Complexity Score | ${this.metadata.complexityScore}/100 |\\n`;\r\n\r\n    if (this.options.includeContext) {\r\n      md += `| InheritedWidgets | ${this.metadata.inheritedWidgets} |\\n`;\r\n      md += `| ChangeNotifiers | ${this.metadata.changeNotifiers} |\\n`;\r\n      md += `| Providers | ${this.metadata.providers} |\\n`;\r\n    }\r\n\r\n    if (this.options.includeSsr) {\r\n      md += `| SSR Compatibility | ${this.metadata.ssrCompatibility} |\\n`;\r\n      md += `| SSR Score | ${this.metadata.ssrCompatibilityScore}/100 |\\n`;\r\n      md += `| Hydration Required | ${this.metadata.hydrationRequired ? 'Yes' : 'No'} |\\n`;\r\n    }\r\n\r\n    md += '\\n';\r\n\r\n    // Context Section\r\n    if (this.options.includeContext && this.contextResults) {\r\n      md += '## Context Analysis (Phase 3)\\n\\n';\r\n\r\n      if (this.metadata.inheritedWidgets > 0) {\r\n        md += '### InheritedWidgets\\n\\n';\r\n        (this.contextResults.inheritedWidgets || []).forEach((widget) => {\r\n          md += `- **${widget.name}**\\n`;\r\n          if (widget.properties && widget.properties.length > 0) {\r\n            md += `  - Properties: ${widget.properties.map((p) => p.name).join(', ')}\\n`;\r\n          }\r\n          if (widget.usedIn && widget.usedIn.length > 0) {\r\n            md += `  - Used in: ${widget.usedIn.join(', ')}\\n`;\r\n          }\r\n        });\r\n        md += '\\n';\r\n      }\r\n\r\n      if (this.metadata.changeNotifiers > 0) {\r\n        md += '### ChangeNotifiers\\n\\n';\r\n        (this.contextResults.changeNotifiers || []).forEach((notifier) => {\r\n          md += `- **${notifier.name}**\\n`;\r\n          if (notifier.consumers && notifier.consumers.length > 0) {\r\n            md += `  - Consumed by: ${notifier.consumers.join(', ')}\\n`;\r\n          }\r\n        });\r\n        md += '\\n';\r\n      }\r\n    }\r\n\r\n    // SSR Section\r\n    if (this.options.includeSsr && this.ssrResults) {\r\n      md += '## SSR Compatibility Analysis (Phase 3)\\n\\n';\r\n      md += `**Overall Compatibility:** ${this.metadata.ssrCompatibility}\\n`;\r\n      md += `**Score:** ${this.metadata.ssrCompatibilityScore}/100\\n`;\r\n      md += `**Effort to fix:** ${this.ssrResults.estimatedEffort}\\n\\n`;\r\n\r\n      if (this.metadata.ssrUnsafePatterns > 0) {\r\n        md += `### Unsafe Patterns (${this.metadata.ssrUnsafePatterns})\\n\\n`;\r\n        (this.ssrResults.ssrUnsafePatterns || []).slice(0, 10).forEach((pattern) => {\r\n          md += `- **${pattern.pattern}**: ${pattern.why}\\n`;\r\n        });\r\n        if (this.metadata.ssrUnsafePatterns > 10) {\r\n          md += `- ... and ${this.metadata.ssrUnsafePatterns - 10} more\\n`;\r\n        }\r\n        md += '\\n';\r\n      }\r\n\r\n      if (this.ssrResults.hydrationCount > 0) {\r\n        md += `### Hydration Requirements (${this.ssrResults.hydrationCount})\\n\\n`;\r\n        (this.ssrResults.hydrationRequirements || []).forEach((req) => {\r\n          md += `- **${req.dependency}**: ${req.reason}\\n`;\r\n        });\r\n        md += '\\n';\r\n      }\r\n\r\n      if (this.ssrResults.ssrMigrationPath && this.ssrResults.ssrMigrationPath.length > 0) {\r\n        md += `### Migration Path (${this.ssrResults.ssrMigrationPath.length} steps)\\n\\n`;\r\n        (this.ssrResults.ssrMigrationPath || []).forEach((step) => {\r\n          md += `**Step ${step.step}: ${step.action}**\\n`;\r\n          if (step.description) {\r\n            md += `${step.description}\\n`;\r\n          }\r\n          if (step.effort) {\r\n            md += `- Effort: ${step.effort}\\n`;\r\n          }\r\n          md += '\\n';\r\n        });\r\n      }\r\n    }\r\n\r\n    md += '\\n';\r\n\r\n    // Suggestions\r\n    if (this.options.includeSuggestions) {\r\n      const suggestions = this.generateSuggestions();\r\n      if (suggestions.length > 0) {\r\n        md += '## Suggestions\\n\\n';\r\n        suggestions.forEach((sug) => {\r\n          md += `- **${sug.message}**: ${sug.suggestion}\\n`;\r\n        });\r\n        md += '\\n';\r\n      }\r\n    }\r\n\r\n    return md;\r\n  }\r\n\r\n  /**\r\n   * Generate Console report\r\n   */\r\n  toConsole() {\r\n    const lines = [];\r\n\r\n    lines.push('\\n' + '='.repeat(80));\r\n    lines.push('FlutterJS CODE ANALYSIS REPORT (Phase 1 + 2 + 3)');\r\n    lines.push('='.repeat(80) + '\\n');\r\n\r\n    // Summary\r\n    lines.push('SUMMARY');\r\n    lines.push('-'.repeat(80));\r\n    lines.push(`  Widgets: ${this.metadata.totalWidgets} (${this.metadata.statelessWidgets} stateless, ${this.metadata.statefulWidgets} stateful)`);\r\n    lines.push(`  State Classes: ${this.metadata.stateClasses}`);\r\n    lines.push(`  State Fields: ${this.metadata.totalStateFields}`);\r\n    lines.push(`  Health Score: ${this.metadata.healthScore}/100`);\r\n    lines.push(`  Complexity: ${this.metadata.complexityScore}/100`);\r\n\r\n    if (this.options.includeContext) {\r\n      lines.push(`  InheritedWidgets: ${this.metadata.inheritedWidgets}`);\r\n      lines.push(`  ChangeNotifiers: ${this.metadata.changeNotifiers}`);\r\n      lines.push(`  Providers: ${this.metadata.providers}`);\r\n    }\r\n\r\n    if (this.options.includeSsr) {\r\n      lines.push(`  SSR Compatibility: ${this.metadata.ssrCompatibility}`);\r\n      lines.push(`  SSR Score: ${this.metadata.ssrCompatibilityScore}/100`);\r\n      lines.push(`  Migration Steps: ${this.ssrResults?.ssrMigrationPath?.length || 0}`);\r\n    }\r\n\r\n    lines.push('');\r\n\r\n    // Context Section\r\n    if (this.options.includeContext && this.contextResults && this.metadata.inheritedWidgets > 0) {\r\n      lines.push('CONTEXT ANALYSIS (Phase 3)');\r\n      lines.push('-'.repeat(80));\r\n\r\n      if (this.metadata.inheritedWidgets > 0) {\r\n        lines.push('  InheritedWidgets:');\r\n        (this.contextResults.inheritedWidgets || []).forEach((widget) => {\r\n          lines.push(`    - ${widget.name}`);\r\n          if (widget.usedIn && widget.usedIn.length > 0) {\r\n            lines.push(`      Used in: ${widget.usedIn.join(', ')}`);\r\n          }\r\n        });\r\n      }\r\n\r\n      if (this.metadata.changeNotifiers > 0) {\r\n        lines.push('  ChangeNotifiers:');\r\n        (this.contextResults.changeNotifiers || []).forEach((notifier) => {\r\n          lines.push(`    - ${notifier.name}`);\r\n          if (notifier.consumers && notifier.consumers.length > 0) {\r\n            lines.push(`      Consumers: ${notifier.consumers.join(', ')}`);\r\n          }\r\n        });\r\n      }\r\n\r\n      lines.push('');\r\n    }\r\n\r\n    // SSR Section\r\n    if (this.options.includeSsr && this.ssrResults) {\r\n      lines.push('SSR COMPATIBILITY ANALYSIS (Phase 3)');\r\n      lines.push('-'.repeat(80));\r\n      lines.push(`  Overall: ${this.metadata.ssrCompatibility} (${this.metadata.ssrCompatibilityScore}/100)`);\r\n      lines.push(`  Safe Patterns: ${this.metadata.ssrSafePatterns}`);\r\n      lines.push(`  Unsafe Patterns: ${this.metadata.ssrUnsafePatterns}`);\r\n\r\n      if (this.ssrResults.hydrationCount > 0) {\r\n        lines.push(`  Hydration Required: Yes (${this.ssrResults.hydrationCount} dependencies)`);\r\n      }\r\n\r\n      if (this.ssrResults.ssrMigrationPath && this.ssrResults.ssrMigrationPath.length > 0) {\r\n        lines.push(`  Migration Steps: ${this.ssrResults.ssrMigrationPath.length}`);\r\n        lines.push(`  Estimated Effort: ${this.ssrResults.estimatedEffort}`);\r\n      }\r\n\r\n      lines.push('');\r\n    }\r\n\r\n    // Validation\r\n    if (this.stateResults && this.stateResults.validationResults && this.stateResults.validationResults.length > 0) {\r\n      lines.push('VALIDATION ISSUES');\r\n      lines.push('-'.repeat(80));\r\n      (this.stateResults.validationResults || []).forEach((result) => {\r\n        const icon = result.severity === 'error' ? '\u274C' : result.severity === 'warning' ? '\u26A0\uFE0F ' : '\u2139\uFE0F ';\r\n        lines.push(`  ${icon} [${result.severity.toUpperCase()}] ${result.message}`);\r\n        if (result.suggestion) {\r\n          lines.push(`     \u2192 ${result.suggestion}`);\r\n        }\r\n      });\r\n      lines.push('');\r\n    }\r\n\r\n    lines.push('='.repeat(80) + '\\n');\r\n\r\n    return lines.join('\\n');\r\n  }\r\n\r\n  /**\r\n   * Save report to file\r\n   */\r\n  saveToFile(filePath, fs) {\r\n    const content = this.generate();\r\n    fs.writeFileSync(filePath, content, 'utf-8');\r\n    return filePath;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport { ReportGenerator };"],
+  "mappings": "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",
+  "names": ["getLogger", "ReportGenerator", "widgetResults", "stateResults", "contextResults", "ssrResults", "options", "output", "error", "widgets", "functions", "imports", "stateClasses", "stateFields", "setStateCalls", "lifecycleMethods", "eventHandlers", "inheritedWidgets", "changeNotifiers", "providers", "contextAccessPoints", "ssrScore", "ssrSafePatterns", "ssrUnsafePatterns", "hydrationRequirements", "w", "imp", "node", "depth", "child", "results", "severity", "r", "score", "validationResults", "widget", "a", "notifier", "g", "m", "provider", "usage", "p", "opp", "step", "i", "sc", "metadata", "field", "isUsed", "lc", "isValid", "func", "graph", "suggestions", "md", "pattern", "req", "sug", "lines", "result", "icon", "filePath", "fs", "content"]
+}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/flutterjs_widget_analyzer.js b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_widget_analyzer.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/dist/flutterjs_widget_analyzer.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_widget_analyzer.js
diff --git a/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_widget_analyzer.js.map b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_widget_analyzer.js.map
new file mode 100644
index 00000000..abdf4534
--- /dev/null
+++ b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/flutterjs_widget_analyzer.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/flutterjs_widget_analyzer.js"],
+  "sourcesContent": ["/**\r\n * WidgetAnalyzer Enhancement - Track field references\r\n * \r\n * Understand that:\r\n *   _count = 0;        <- field declaration\r\n *   this._count        <- field reference\r\n * \r\n * These are the same thing!\r\n */\r\n\r\nimport { getLogger } from './flutterjs_logger.js';\r\n\r\nclass WidgetAnalyzer {\r\n  constructor(ast, options = {}) {\r\n    this.ast = ast;\r\n    this.options = {\r\n      strict: false,\r\n      ...options,\r\n    };\r\n    this.logger = getLogger().createComponentLogger('WidgetAnalyzer');\r\n    this.widgets = new Map();        // key: className, value: Widget object\r\n    this.functions = new Map();      // key: functionName, value: Function object\r\n    this.imports = [];\r\n    this.externalDependencies = new Set();\r\n    this.entryPoint = null;\r\n    this.rootWidget = null;\r\n    this.widgetTree = null;\r\n    this.errors = [];\r\n  }\r\n\r\n  /**\r\n   * Main entry point - analyze entire AST\r\n   */\r\n  analyze() {\r\n    this.logger.startSession('WidgetAnalyzer');\r\n    if (!this.ast || !this.ast.body) {\r\n      throw new Error('Invalid AST provided');\r\n    }\r\n\r\n    this.logger.trace('[WidgetAnalyzer] Starting analysis...');\r\n\r\n    try {\r\n      // Phase 1: Extract all classes and functions\r\n      this.logger.trace('[WidgetAnalyzer] Phase 1: Extracting classes and functions...');\r\n      this.extractClassesAndFunctions();\r\n      this.logger.trace(`[WidgetAnalyzer]   Found ${this.widgets.size} classes in total`);\r\n\r\n      // Phase 2: Detect which classes are widgets\r\n      this.logger.trace('[WidgetAnalyzer] Phase 2: Detecting widgets...');\r\n      this.detectWidgets();\r\n      this.logger.trace(`[WidgetAnalyzer]   Detected widgets: ${Array.from(this.widgets.values()).filter(w => w.type !== 'class').length}`);\r\n\r\n      // Phase 3: Extract imports and dependencies\r\n      this.logger.trace('[WidgetAnalyzer] Phase 3: Extracting imports...');\r\n      this.extractImports();\r\n      this.logger.trace(`[WidgetAnalyzer]   Found ${this.imports.length} imports`);\r\n\r\n      // Phase 4: Find entry point\r\n      this.logger.trace('[WidgetAnalyzer] Phase 4: Finding entry point...');\r\n      this.findEntryPoint();\r\n      this.logger.trace(`[WidgetAnalyzer]   Entry point: ${this.entryPoint || 'NOT FOUND'}`);\r\n\r\n      // Phase 5: Build widget tree\r\n      this.logger.trace('[WidgetAnalyzer] Phase 5: Building widget tree...');\r\n      this.buildWidgetTree();\r\n      this.logger.trace(`[WidgetAnalyzer]   Tree root: ${this.rootWidget || 'NOT FOUND'}`);\r\n\r\n      this.logger.trace('[WidgetAnalyzer] Analysis complete\\n');\r\n\r\n      return this.getResults();\r\n    } catch (error) {\r\n      this.errors.push({\r\n        type: 'analysis-error',\r\n        message: error.message,\r\n        stack: error.stack,\r\n      });\r\n      return this.getResults();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Phase 1: Extract all classes and functions from AST\r\n   */\r\n  extractClassesAndFunctions() {\r\n    if (!this.ast.body) return;\r\n\r\n    for (const node of this.ast.body) {\r\n      if (node.type === 'ClassDeclaration') {\r\n        this.extractClassDeclaration(node);\r\n      } else if (node.type === 'FunctionDeclaration') {\r\n        this.extractFunctionDeclaration(node);\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Extract a single class declaration\r\n   * Handles both field declarations and method declarations\r\n   */\r\n  extractClassDeclaration(classNode) {\r\n    const name = classNode.id?.name;\r\n    if (!name) return;\r\n\r\n    const superClass = classNode.superClass?.name || null;\r\n    const location = classNode.location;\r\n\r\n    const widget = {\r\n      name,\r\n      type: 'class',\r\n      location,\r\n      superClass,\r\n      constructor: null,\r\n      properties: [],      // Fields with their initial values\r\n      methods: [],\r\n      fieldReferences: {}, // Map of which methods use which fields\r\n      imports: [],\r\n      children: [],\r\n      linkedStateClass: null,\r\n    };\r\n\r\n    // Extract fields (declared with _count = 0; syntax)\r\n    if (classNode.body?.fields) {\r\n      classNode.body.fields.forEach((field) => {\r\n        const fieldName = field.key?.name;\r\n        const initialValue = field.initialValue ? this.expressionToString(field.initialValue) : null;\r\n\r\n        widget.properties.push({\r\n          name: fieldName,\r\n          initialValue: initialValue,\r\n          type: this.inferFieldType(field.initialValue),\r\n        });\r\n\r\n        // Track that this field exists\r\n        if (!widget.fieldReferences[fieldName]) {\r\n          widget.fieldReferences[fieldName] = [];\r\n        }\r\n      });\r\n    }\r\n\r\n    // Extract constructor\r\n    if (classNode.body?.methods) {\r\n      const constructorMethod = classNode.body.methods.find(\r\n        (m) => m.key?.name === 'constructor'\r\n      );\r\n      if (constructorMethod) {\r\n        widget.constructor = {\r\n          name: 'constructor',\r\n          params: constructorMethod.params || [],\r\n          location: constructorMethod.location,\r\n        };\r\n      }\r\n\r\n      // Extract other methods and track field usage\r\n      classNode.body.methods.forEach((method) => {\r\n        if (method.key?.name !== 'constructor') {\r\n          const methodName = method.key?.name;\r\n          const methodData = {\r\n            name: methodName,\r\n            params: method.params || [],\r\n            location: method.location,\r\n            hasBody: method.body !== null,\r\n            usesFields: [], // Which fields this method references\r\n          };\r\n\r\n          // Track field references in this method\r\n          if (method.body) {\r\n            const fieldRefs = this.findFieldReferencesInBody(method.body);\r\n            methodData.usesFields = fieldRefs;\r\n\r\n            // Update the field reference map\r\n            fieldRefs.forEach((fieldName) => {\r\n              if (widget.fieldReferences[fieldName]) {\r\n                widget.fieldReferences[fieldName].push(methodName);\r\n              }\r\n            });\r\n          }\r\n\r\n          widget.methods.push(methodData);\r\n        }\r\n      });\r\n    }\r\n\r\n    this.widgets.set(name, widget);\r\n    this.logger.trace(`[WidgetAnalyzer]     Extracted class: ${name} extends ${superClass}`);\r\n    if (widget.properties.length > 0) {\r\n      this.logger.trace(`[WidgetAnalyzer]       Fields: ${widget.properties.map(p => `${p.name}=${p.initialValue}`).join(', ')}`);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Find all field references (this._fieldName) in a method body\r\n   */\r\n  findFieldReferencesInBody(body) {\r\n    const fields = [];\r\n\r\n    // Simple traversal to find this.fieldName patterns\r\n    // This is a basic implementation - enhance as needed\r\n    const traverse = (node) => {\r\n      if (!node) return;\r\n\r\n      // Look for MemberExpression: this._fieldName\r\n      if (node.type === 'MemberExpression') {\r\n        if (node.object?.name === 'this' && node.property?.name) {\r\n          fields.push(node.property.name);\r\n        }\r\n      }\r\n\r\n      // Recursively traverse all node properties\r\n      for (const key in node) {\r\n        if (key !== 'location' && typeof node[key] === 'object') {\r\n          if (Array.isArray(node[key])) {\r\n            node[key].forEach(traverse);\r\n          } else {\r\n            traverse(node[key]);\r\n          }\r\n        }\r\n      }\r\n    };\r\n\r\n    traverse(body);\r\n    return [...new Set(fields)]; // Remove duplicates\r\n  }\r\n\r\n  /**\r\n   * Infer the type of a field from its initializer\r\n   */\r\n  inferFieldType(initialValue) {\r\n    if (!initialValue) return 'any';\r\n\r\n    if (initialValue.type === 'Literal') {\r\n      const val = initialValue.value;\r\n      if (typeof val === 'number') return 'int' | 'double';\r\n      if (typeof val === 'boolean') return 'bool';\r\n      if (typeof val === 'string') return 'String';\r\n      if (val === null) return 'null';\r\n    }\r\n\r\n    if (initialValue.type === 'Identifier') {\r\n      return initialValue.name;\r\n    }\r\n\r\n    if (initialValue.type === 'ArrayExpression') {\r\n      return 'List';\r\n    }\r\n\r\n    if (initialValue.type === 'ObjectExpression') {\r\n      return 'Map';\r\n    }\r\n\r\n    return 'dynamic';\r\n  }\r\n\r\n  /**\r\n   * Extract a function declaration\r\n   */\r\n  extractFunctionDeclaration(funcNode) {\r\n    const name = funcNode.id?.name || 'anonymous';\r\n    const location = funcNode.location;\r\n\r\n    const func = {\r\n      name,\r\n      type: 'function',\r\n      location,\r\n      params: funcNode.params?.map((p) => ({\r\n        name: p.name?.name || 'param',\r\n        optional: p.optional || false,\r\n      })) || [],\r\n      isAsync: funcNode.isAsync || false,\r\n      isEntryPoint: false,\r\n    };\r\n\r\n    this.functions.set(name, func);\r\n  }\r\n\r\n  /**\r\n   * Phase 2: Detect which classes are widgets\r\n   */\r\n  detectWidgets() {\r\n    this.widgets.forEach((widget) => {\r\n      if (!widget.superClass) {\r\n        widget.type = 'class';\r\n        return;\r\n      }\r\n\r\n      const superClass = widget.superClass;\r\n\r\n      if (superClass === 'StatelessWidget') {\r\n        widget.type = 'stateless';\r\n        this.logger.trace(`[WidgetAnalyzer]     ${widget.name} is StatelessWidget`);\r\n      } else if (superClass === 'StatefulWidget') {\r\n        widget.type = 'stateful';\r\n        this.logger.trace(`[WidgetAnalyzer]     ${widget.name} is StatefulWidget`);\r\n      } else if (superClass?.startsWith('State')) {\r\n        widget.type = 'state';\r\n        this.logger.trace(`[WidgetAnalyzer]     ${widget.name} is State class`);\r\n      } else {\r\n        widget.type = 'component';\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Phase 3: Extract imports\r\n   */\r\n  // In flutterjs_widget_analyzer.js\r\n  extractImports() {\r\n    if (!this.ast.body) return;\r\n\r\n    this.ast.body.forEach((node) => {\r\n      if (node.type === 'ImportDeclaration') {\r\n        const source = node.source?.value;\r\n\r\n        // \u2705 Get all imported items (handles multi-line properly)\r\n        const items = node.specifiers?.map((spec) => {\r\n          // Use the local name (after 'as')\r\n          return spec.local?.name || spec.imported?.name;\r\n        }) || [];\r\n\r\n        this.imports.push({\r\n          source,\r\n          items,\r\n          specifiers: node.specifiers, // Keep raw specifiers for later\r\n        });\r\n\r\n        this.externalDependencies.add(source);\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Phase 4: Find entry point\r\n   */\r\n  findEntryPoint() {\r\n    if (this.functions.has('main')) {\r\n      this.entryPoint = 'main';\r\n      const mainFunc = this.functions.get('main');\r\n      mainFunc.isEntryPoint = true;\r\n\r\n      const mainAstNode = this.ast.body.find(\r\n        (n) => n.type === 'FunctionDeclaration' && n.id?.name === 'main'\r\n      );\r\n\r\n      if (mainAstNode?.body?.body) {\r\n        this.rootWidget = this.findRunAppWidget(mainAstNode.body.body);\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Find which widget is passed to runApp()\r\n   */\r\n  findRunAppWidget(statements) {\r\n    for (const stmt of statements) {\r\n      if (stmt.type === 'ExpressionStatement' && stmt.expression?.type === 'CallExpression') {\r\n        const call = stmt.expression;\r\n        if (call.callee?.name === 'runApp' && call.args?.length > 0) {\r\n          return this.getWidgetNameFromExpression(call.args[0]);\r\n        }\r\n      }\r\n      if (stmt.type === 'ReturnStatement' && stmt.argument?.type === 'CallExpression') {\r\n        const call = stmt.argument;\r\n        if (call.callee?.name === 'runApp' && call.args?.length > 0) {\r\n          return this.getWidgetNameFromExpression(call.args[0]);\r\n        }\r\n      }\r\n    }\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Extract widget name from expression\r\n   */\r\n  getWidgetNameFromExpression(expr) {\r\n    if (!expr) return null;\r\n\r\n    if (expr.type === 'NewExpression') {\r\n      return expr.callee?.name;\r\n    }\r\n\r\n    if (expr.type === 'CallExpression') {\r\n      return expr.callee?.name;\r\n    }\r\n\r\n    if (expr.type === 'Identifier') {\r\n      return expr.name;\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Phase 5: Build widget tree\r\n   */\r\n  buildWidgetTree() {\r\n    if (!this.rootWidget || !this.widgets.has(this.rootWidget)) {\r\n      return;\r\n    }\r\n\r\n    const rootWidget = this.widgets.get(this.rootWidget);\r\n    this.widgetTree = {\r\n      widget: rootWidget,\r\n      depth: 0,\r\n      children: [],\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Convert expression to string representation\r\n   */\r\n  expressionToString(expr) {\r\n    if (!expr) return null;\r\n\r\n    if (expr.type === 'Literal') {\r\n      return expr.value;\r\n    }\r\n\r\n    if (expr.type === 'Identifier') {\r\n      const name = expr.name;\r\n      if (name === 'true' || name === 'false') return name === 'true';\r\n      if (name === 'null') return null;\r\n      if (name === 'undefined') return undefined;\r\n      return name;\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  /**\r\n   * Get results\r\n   */\r\n  getResults() {\r\n    const widgetArray = Array.from(this.widgets.values()).filter(\r\n      (w) => w.type === 'stateless' || w.type === 'stateful' || w.type === 'state' || w.type === 'component'\r\n    );\r\n\r\n    this.logger.trace(`[WidgetAnalyzer] getResults() returning ${widgetArray.length} widgets`);\r\n\r\n    return {\r\n      widgets: widgetArray,\r\n      functions: Array.from(this.functions.values()),\r\n      imports: this.imports,\r\n      externalDependencies: Array.from(this.externalDependencies),\r\n      entryPoint: this.entryPoint,\r\n      rootWidget: this.rootWidget,\r\n      widgetTree: this.widgetTree,\r\n      errors: this.errors,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get summary statistics\r\n   */\r\n  getSummary() {\r\n    const widgets = Array.from(this.widgets.values());\r\n    const statelessCount = widgets.filter((w) => w.type === 'stateless').length;\r\n    const statefulCount = widgets.filter((w) => w.type === 'stateful').length;\r\n    const stateCount = widgets.filter((w) => w.type === 'state').length;\r\n\r\n    return {\r\n      totalWidgets: widgets.length,\r\n      statelessWidgets: statelessCount,\r\n      statefulWidgets: statefulCount,\r\n      stateClasses: stateCount,\r\n      totalFunctions: this.functions.size,\r\n      totalImports: this.imports.length,\r\n      externalPackages: this.externalDependencies.size,\r\n      entryPoint: this.entryPoint,\r\n      rootWidget: this.rootWidget,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get all errors\r\n   */\r\n  getErrors() {\r\n    return this.errors;\r\n  }\r\n}\r\n\r\nexport { WidgetAnalyzer };"],
+  "mappings": "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",
+  "names": ["getLogger", "WidgetAnalyzer", "ast", "options", "w", "error", "node", "classNode", "name", "superClass", "location", "widget", "field", "fieldName", "initialValue", "constructorMethod", "m", "method", "methodName", "methodData", "fieldRefs", "p", "body", "fields", "traverse", "key", "val", "funcNode", "func", "source", "items", "spec", "mainFunc", "mainAstNode", "n", "statements", "stmt", "call", "expr", "rootWidget", "widgetArray", "widgets", "statelessCount", "statefulCount", "stateCount"]
+}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/lexer.js b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/lexer.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/dist/lexer.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/dist/lexer.js
diff --git a/packages/flutterjs_engine/src/analyzer/dist/lexer.js.map b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/lexer.js.map
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/dist/lexer.js.map
rename to packages/flutterjs_analyzer/flutterjs_analyzer/dist/lexer.js.map
diff --git a/packages/flutterjs_engine/src/analyzer/dist/ssr_analyzer.js b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/ssr_analyzer.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/dist/ssr_analyzer.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/dist/ssr_analyzer.js
diff --git a/packages/flutterjs_analyzer/flutterjs_analyzer/dist/ssr_analyzer.js.map b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/ssr_analyzer.js.map
new file mode 100644
index 00000000..25de424c
--- /dev/null
+++ b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/ssr_analyzer.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/ssr_analyzer.js"],
+  "sourcesContent": ["/**\r\n * FlutterJS SSR Analyzer - Phase 3 (FIXED)\r\n * Analyzes Server-Side Rendering (SSR) compatibility\r\n * Detects SSR-safe and unsafe patterns\r\n * Generates migration path for SSR compliance\r\n */\r\n\r\nimport {\r\n  HydrationRequirement,\r\n  LazyLoadOpportunity,\r\n} from './context_analyzer_data.js';\r\nimport { getLogger } from './flutterjs_logger.js';\r\n\r\nclass SSRAnalyzer {\r\n  constructor(contextAnalysisResults, stateAnalysisResults = null, options = {}) {\r\n    // Input from Phase 2 & 3\r\n    this.contextResults = contextAnalysisResults;\r\n    this.stateResults = stateAnalysisResults;\r\n\r\n    this.options = {\r\n      strict: false,\r\n      targetPlatform: 'node',\r\n      ...options,\r\n    };\r\n\r\n    // Initialize logger\r\n     this.logger = getLogger().createComponentLogger('SSRAnalyzer');\r\n\r\n    // Results storage\r\n    this.ssrSafePatterns = [];\r\n    this.ssrUnsafePatterns = [];\r\n    this.hydrationRequirements = [];\r\n    this.lazyLoadOpportunities = [];\r\n    this.ssrMigrationPath = [];\r\n    this.validationIssues = [];\r\n\r\n    // Metrics\r\n    this.ssrCompatibilityScore = 0;\r\n    this.hydrationCount = 0;\r\n    this.errors = [];\r\n  }\r\n\r\n  /**\r\n   * Main entry point - analyze SSR compatibility\r\n   */\r\n  analyze() {\r\n    this.logger.startSession('SSRAnalysis');\r\n    this.logger.info('Starting SSR compatibility analysis');\r\n\r\n    try {\r\n      // Phase 1: Detect SSR-safe patterns\r\n      this.detectSsrSafePatterns();\r\n      this.logger.count('SSR-safe patterns found', this.ssrSafePatterns.length);\r\n\r\n      // Phase 2: Detect SSR-unsafe patterns\r\n      this.detectSsrUnsafePatterns();\r\n      this.logger.count('SSR-unsafe patterns found', this.ssrUnsafePatterns.length);\r\n\r\n      // Phase 3: Identify hydration needs\r\n      this.identifyHydrationNeeds();\r\n      this.logger.count('Hydration dependencies', this.hydrationRequirements.length);\r\n\r\n      // Phase 4: Detect lazy load opportunities\r\n      this.detectLazyLoadOpportunities();\r\n      this.logger.count('Lazy load opportunities', this.lazyLoadOpportunities.length);\r\n\r\n      // Phase 5: Generate migration path\r\n      this.generateMigrationPath();\r\n      this.logger.count('Migration steps', this.ssrMigrationPath.length);\r\n\r\n      // Phase 6: Validate and score\r\n      this.validateSsrRequirements();\r\n      this.calculateCompatibilityScore();\r\n      this.logger.count('SSR Compatibility Score', this.ssrCompatibilityScore);\r\n\r\n      this.logger.success('SSR analysis complete');\r\n      this.logger.endSession('SSRAnalysis');\r\n\r\n      return this.getResults();\r\n    } catch (error) {\r\n      this.logger.failure('SSR analysis failed', error.message);\r\n      this.errors.push(error);\r\n      this.logger.endSession('SSRAnalysis');\r\n      return this.getResults();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Phase 1: Detect SSR-safe patterns\r\n   */\r\n  detectSsrSafePatterns() {\r\n    const patterns = [];\r\n\r\n    // Pattern 1: InheritedWidget static accessors\r\n    patterns.push({\r\n      pattern: 'InheritedWidget static accessors',\r\n      example: 'ThemeProvider.of(context)',\r\n      safeFor: 'SSR',\r\n      why: 'Pure value access, no subscription required',\r\n      confidence: 1.0,\r\n      category: 'context-access',\r\n      frequency: 0,\r\n    });\r\n\r\n    // Pattern 2: context.read<T>() in build()\r\n    patterns.push({\r\n      pattern: 'context.read<T>() in build()',\r\n      example: 'context.read<CounterNotifier>()',\r\n      safeFor: 'SSR',\r\n      why: 'Single read at render time, no re-subscription needed',\r\n      confidence: 0.95,\r\n      category: 'provider-access',\r\n      frequency: 0,\r\n    });\r\n\r\n    // Pattern 3: Static property access\r\n    patterns.push({\r\n      pattern: 'Theme data access',\r\n      example: 'theme.primaryColor',\r\n      safeFor: 'SSR',\r\n      why: 'Read-only during rendering',\r\n      confidence: 1.0,\r\n      category: 'value-access',\r\n      frequency: 0,\r\n    });\r\n\r\n    // Pattern 4: MediaQuery for initial layout\r\n    patterns.push({\r\n      pattern: 'MediaQuery.of() for responsive layout',\r\n      example: 'MediaQuery.of(context).size.width',\r\n      safeFor: 'SSR',\r\n      why: 'Server can set default viewport; client hydrates with actual size',\r\n      confidence: 0.85,\r\n      category: 'responsive-design',\r\n      frequency: 0,\r\n    });\r\n\r\n    // Pattern 5: One-time async operations\r\n    patterns.push({\r\n      pattern: 'Async data in FutureBuilder (with cached data)',\r\n      example: 'FutureBuilder with pre-fetched data',\r\n      safeFor: 'SSR',\r\n      why: 'Server can execute async, pass pre-rendered HTML to client',\r\n      confidence: 0.80,\r\n      category: 'async-operation',\r\n      frequency: 0,\r\n    });\r\n\r\n    // Scan context results for actual safe patterns\r\n    if (this.contextResults && this.contextResults.contextAccessPoints) {\r\n      this.contextResults.contextAccessPoints.forEach((usage) => {\r\n        if (usage.ssrSafe) {\r\n          const pattern = patterns.find((p) => p.example.includes(usage.pattern.split('(')[0]));\r\n          if (pattern) {\r\n            pattern.frequency++;\r\n          }\r\n\r\n          this.ssrSafePatterns.push({\r\n            pattern: usage.pattern,\r\n            type: usage.type,\r\n            location: usage.location,\r\n            example: usage.pattern,\r\n            why: usage.reason,\r\n            confidence: 0.95,\r\n          });\r\n        }\r\n      });\r\n    }\r\n\r\n    // Add framework patterns\r\n    this.ssrSafePatterns.push(...patterns);\r\n  }\r\n\r\n  /**\r\n   * Phase 2: Detect SSR-unsafe patterns\r\n   */\r\n  detectSsrUnsafePatterns() {\r\n    const basePatterns = [\r\n      {\r\n        pattern: 'context.watch<T>() subscriptions',\r\n        example: 'context.watch<CounterNotifier>()',\r\n        unsafeFor: 'SSR',\r\n        why: 'Requires reactive subscription & listeners on client, not available during server render',\r\n        confidence: 1.0,\r\n        category: 'provider-subscription',\r\n        severity: 'error',\r\n        frequency: 0,\r\n      },\r\n      {\r\n        pattern: 'State mutations in event handlers',\r\n        example: 'counter.increment() in onPressed',\r\n        unsafeFor: 'SSR',\r\n        why: 'Event handlers don\\'t exist on server, mutations have no effect',\r\n        confidence: 1.0,\r\n        category: 'state-mutation',\r\n        severity: 'error',\r\n        frequency: 0,\r\n      },\r\n      {\r\n        pattern: 'ChangeNotifier.notifyListeners() calls',\r\n        example: 'notifyListeners() in method',\r\n        unsafeFor: 'SSR',\r\n        why: 'Listeners don\\'t exist during initial SSR render',\r\n        confidence: 0.95,\r\n        category: 'notification',\r\n        severity: 'error',\r\n        frequency: 0,\r\n      },\r\n      {\r\n        pattern: 'Browser APIs',\r\n        example: 'window.localStorage, document.getElementById()',\r\n        unsafeFor: 'SSR',\r\n        why: 'window and document objects don\\'t exist on Node.js server',\r\n        confidence: 1.0,\r\n        category: 'browser-api',\r\n        severity: 'critical',\r\n        frequency: 0,\r\n      },\r\n      {\r\n        pattern: 'Timers and intervals',\r\n        example: 'setTimeout, setInterval, setImmediate',\r\n        unsafeFor: 'SSR',\r\n        why: 'Can cause unexpected behavior and performance issues during server render',\r\n        confidence: 0.90,\r\n        category: 'async-operation',\r\n        severity: 'warning',\r\n        frequency: 0,\r\n      },\r\n      {\r\n        pattern: 'Random values without seeding',\r\n        example: 'Math.random()',\r\n        unsafeFor: 'SSR',\r\n        why: 'Different values on server vs client cause hydration mismatch',\r\n        confidence: 0.99,\r\n        category: 'determinism',\r\n        severity: 'error',\r\n        frequency: 0,\r\n      },\r\n      {\r\n        pattern: 'Navigator and route access',\r\n        example: 'Navigator.of(context).push()',\r\n        unsafeFor: 'SSR',\r\n        why: 'Navigation happens on client, not on server',\r\n        confidence: 1.0,\r\n        category: 'navigation',\r\n        severity: 'warning',\r\n        frequency: 0,\r\n      },\r\n      {\r\n        pattern: 'GestureDetector and event handlers',\r\n        example: 'GestureDetector, onTap, onLongPress',\r\n        unsafeFor: 'SSR',\r\n        why: 'User interactions don\\'t exist on server',\r\n        confidence: 1.0,\r\n        category: 'user-interaction',\r\n        severity: 'warning',\r\n        frequency: 0,\r\n      },\r\n      {\r\n        pattern: 'setState in initState or build',\r\n        example: 'this.setState(() => {...}) in build()',\r\n        unsafeFor: 'SSR',\r\n        why: 'Triggers re-render during render cycle, can cause infinite loops',\r\n        confidence: 0.95,\r\n        category: 'state-management',\r\n        severity: 'critical',\r\n        frequency: 0,\r\n      },\r\n    ];\r\n\r\n    // Scan context results for actual unsafe patterns\r\n    if (this.contextResults && this.contextResults.contextAccessPoints) {\r\n      this.contextResults.contextAccessPoints.forEach((usage) => {\r\n        if (!usage.ssrSafe) {\r\n          const pattern = basePatterns.find((p) => p.example.includes(usage.pattern.split('(')[0]));\r\n          if (pattern) {\r\n            pattern.frequency++;\r\n          }\r\n\r\n          this.ssrUnsafePatterns.push({\r\n            pattern: usage.pattern,\r\n            type: usage.type,\r\n            location: usage.location,\r\n            example: usage.pattern,\r\n            why: usage.reason,\r\n            confidence: 0.95,\r\n            severity: 'error',\r\n            suggestion: usage.getMigrationAdvice?.() || 'Refactor to SSR-safe pattern',\r\n          });\r\n        }\r\n      });\r\n    }\r\n\r\n    // Add base patterns with frequencies\r\n    this.ssrUnsafePatterns.push(...basePatterns);\r\n  }\r\n\r\n  /**\r\n   * Phase 3: Identify hydration needs\r\n   */\r\n  identifyHydrationNeeds() {\r\n    const hydrationNeeds = [];\r\n\r\n    // Need 1: ChangeNotifier instances\r\n    if (this.contextResults && this.contextResults.changeNotifiers) {\r\n      this.contextResults.changeNotifiers.forEach((notifier) => {\r\n        if (notifier.consumers && notifier.consumers.length > 0) {\r\n          const requirement = new HydrationRequirement(\r\n            notifier.name,\r\n            `State needs to be re-created and listeners re-attached post-hydration for ${notifier.consumers.length} consumer(s)`,\r\n            0\r\n          );\r\n\r\n          notifier.consumers.forEach((consumer) => {\r\n            requirement.requiredState.push(`${consumer}.state`);\r\n          });\r\n\r\n          hydrationNeeds.push(requirement);\r\n          this.hydrationCount++;\r\n        }\r\n      });\r\n    }\r\n\r\n    // Need 2: Provider subscriptions\r\n    if (this.contextResults && this.contextResults.providers) {\r\n      this.contextResults.providers.forEach((provider) => {\r\n        if (provider.accessPatterns && provider.accessPatterns.includes('watch')) {\r\n          const requirement = new HydrationRequirement(\r\n            `Provider<${provider.valueType}>`,\r\n            `context.watch() subscriptions need to be re-established on client for reactive updates`,\r\n            1\r\n          );\r\n\r\n          requirement.requiresProvider(provider.providerType);\r\n          hydrationNeeds.push(requirement);\r\n          this.hydrationCount++;\r\n        }\r\n      });\r\n    }\r\n\r\n    // Need 3: Event handlers\r\n    if (this.stateResults && this.stateResults.eventHandlers) {\r\n      this.stateResults.eventHandlers.forEach((handler) => {\r\n        if (!hydrationNeeds.some((h) => h.dependency === handler.handler)) {\r\n          const requirement = new HydrationRequirement(\r\n            handler.handler,\r\n            `Event handler \"${handler.handler}\" must be attached to DOM after hydration`,\r\n            2\r\n          );\r\n          hydrationNeeds.push(requirement);\r\n          this.hydrationCount++;\r\n        }\r\n      });\r\n    }\r\n\r\n    hydrationNeeds.sort((a, b) => a.order - b.order);\r\n    this.hydrationRequirements = hydrationNeeds;\r\n  }\r\n\r\n  /**\r\n   * Phase 4: Detect lazy load opportunities\r\n   */\r\n  detectLazyLoadOpportunities() {\r\n    const opportunities = [];\r\n\r\n    // Opportunity 1: Pages not rendered initially\r\n    if (this.contextResults && this.contextResults.inheritedWidgets) {\r\n      this.contextResults.inheritedWidgets.forEach((widget) => {\r\n        if (widget.usageCount === 0 || (widget.usageCount && widget.usageCount <= 1)) {\r\n          const opp = new LazyLoadOpportunity(\r\n            widget.name,\r\n            `${widget.name} is not needed until user navigates to it`,\r\n            '15KB',\r\n            'widget'\r\n          );\r\n          opp.setRecommendation('Use LazyRoute or dynamic import: import(widgetPath)');\r\n          opp.calculatePriority(15);\r\n          opportunities.push(opp);\r\n        }\r\n      });\r\n    }\r\n\r\n    // Opportunity 2: Heavy ChangeNotifiers\r\n    if (this.contextResults && this.contextResults.changeNotifiers) {\r\n      this.contextResults.changeNotifiers.forEach((notifier) => {\r\n        if (notifier.methods && notifier.methods.length > 10) {\r\n          const opp = new LazyLoadOpportunity(\r\n            notifier.name,\r\n            `${notifier.name} is complex and only needed if feature is used`,\r\n            '8KB',\r\n            'notifier'\r\n          );\r\n          opp.setRecommendation('Lazy create in Provider: create: (context) => Provider.lazy(() => import(...))');\r\n          opp.calculatePriority(8);\r\n          opportunities.push(opp);\r\n        }\r\n      });\r\n    }\r\n\r\n    this.lazyLoadOpportunities = opportunities;\r\n  }\r\n\r\n  /**\r\n   * Phase 5: Generate migration path\r\n   */\r\n  generateMigrationPath() {\r\n    const steps = [];\r\n\r\n    // Step 1: Replace context.watch()\r\n    const watchUnsafe = this.ssrUnsafePatterns.filter((p) => p.pattern?.includes('watch'));\r\n    if (watchUnsafe.length > 0) {\r\n      steps.push({\r\n        step: 1,\r\n        action: 'Replace context.watch() with context.read() for SSR',\r\n        locations: watchUnsafe.map((p) => p.location),\r\n        description: `Found ${watchUnsafe.length} context.watch() calls that need refactoring`,\r\n        example: `\r\n// Before (not SSR safe):\r\nfinal counter = context.watch<CounterNotifier>();\r\n\r\n// After (SSR safe):\r\nfinal counter = context.read<CounterNotifier>();\r\n// Subscribe to changes in didChangeDependencies() instead (client-only)`,\r\n        effort: 'medium',\r\n        priority: 'high',\r\n        files: watchUnsafe.length,\r\n      });\r\n    }\r\n\r\n    // Step 2: Move state mutations\r\n    const mutationUnsafe = this.ssrUnsafePatterns.filter((p) => p.pattern?.includes('mutation'));\r\n    if (mutationUnsafe.length > 0) {\r\n      steps.push({\r\n        step: 2,\r\n        action: 'Move notifyListeners() calls to client-only code',\r\n        locations: mutationUnsafe.map((p) => p.location),\r\n        description: `Found ${mutationUnsafe.length} state mutations that don't work in SSR`,\r\n        example: `\r\n// Before (not SSR safe):\r\ncounter.increment();\r\n\r\n// After (SSR safe):\r\nif (kIsWeb) {  // Only on client\r\n  counter.increment();\r\n}`,\r\n        effort: 'low',\r\n        priority: 'high',\r\n        files: mutationUnsafe.length,\r\n      });\r\n    }\r\n\r\n    // Step 3: Implement hydration layer\r\n    if (this.hydrationRequirements.length > 0) {\r\n      steps.push({\r\n        step: 3,\r\n        action: 'Create hydration layer to re-subscribe listeners post-render',\r\n        description: `App requires hydration for ${this.hydrationRequirements.length} dependencies`,\r\n        example: `\r\n// In main.js or app.dart after runApp():\r\nif (kIsWeb) {\r\n  // Re-create listeners, reattach subscriptions\r\n  hydrate(flutterApp);\r\n}`,\r\n        effort: 'high',\r\n        priority: 'critical',\r\n        dependencies: this.hydrationRequirements.length,\r\n      });\r\n    }\r\n\r\n    // Step 4: Add browser API checks\r\n    const browserApiUnsafe = this.ssrUnsafePatterns.filter((p) => p.category === 'browser-api');\r\n    if (browserApiUnsafe.length > 0) {\r\n      steps.push({\r\n        step: 4,\r\n        action: 'Wrap browser-specific APIs in kIsWeb checks',\r\n        description: `Found ${browserApiUnsafe.length} browser API calls`,\r\n        example: `\r\n// Before:\r\nfinal stored = window.localStorage.getItem('key');\r\n\r\n// After:\r\nfinal stored = kIsWeb ? window.localStorage.getItem('key') : null;`,\r\n        effort: 'low',\r\n        priority: 'medium',\r\n        files: browserApiUnsafe.length,\r\n      });\r\n    }\r\n\r\n    // Step 5: Implement lazy loading\r\n    if (this.lazyLoadOpportunities.length > 0) {\r\n      steps.push({\r\n        step: 5,\r\n        action: 'Implement code splitting for lazy-loaded widgets',\r\n        description: `${this.lazyLoadOpportunities.length} opportunities identified`,\r\n        example: `\r\n// Use dynamic routes\r\nfinal route = await LazyRoute.create(\r\n  () => import('pages/DetailPage.dart')\r\n);`,\r\n        effort: 'medium',\r\n        priority: 'low',\r\n        opportunities: this.lazyLoadOpportunities.length,\r\n      });\r\n    }\r\n\r\n    // Step 6: Test SSR rendering\r\n    steps.push({\r\n      step: steps.length + 1,\r\n      action: 'Set up SSR testing pipeline',\r\n      description: 'Render app on server, verify HTML structure',\r\n      example: `\r\n// Test SSR output matches CSR:\r\nconst serverHtml = await renderAppOnServer();\r\nconst clientHtml = await renderAppOnClient();\r\nassert(serverHtml === clientHtml, 'SSR/CSR mismatch');`,\r\n      effort: 'medium',\r\n      priority: 'critical',\r\n    });\r\n\r\n    this.ssrMigrationPath = steps;\r\n  }\r\n\r\n  /**\r\n   * Phase 6: Validate SSR requirements\r\n   */\r\n  validateSsrRequirements() {\r\n    // Check 1: Browser APIs\r\n    this.ssrUnsafePatterns.forEach((pattern) => {\r\n      if (pattern.category === 'browser-api') {\r\n        this.validationIssues.push({\r\n          type: 'browser-api-usage',\r\n          severity: 'critical',\r\n          pattern: pattern.pattern,\r\n          location: pattern.location,\r\n          message: `Browser API \"${pattern.pattern}\" is not available on server`,\r\n          suggestion: 'Wrap in kIsWeb check or use platform-agnostic alternative',\r\n        });\r\n      }\r\n    });\r\n\r\n    // Check 2: Non-deterministic operations\r\n    this.ssrUnsafePatterns.forEach((pattern) => {\r\n      if (pattern.category === 'determinism') {\r\n        this.validationIssues.push({\r\n          type: 'non-deterministic',\r\n          severity: 'error',\r\n          pattern: pattern.pattern,\r\n          location: pattern.location,\r\n          message: `Non-deterministic operation \"${pattern.pattern}\" causes hydration mismatch`,\r\n          suggestion: 'Use seeded random or remove randomness from render path',\r\n        });\r\n      }\r\n    });\r\n\r\n    // Check 3: Event handlers in build\r\n    const eventHandlersInBuild = this.ssrUnsafePatterns.filter(\r\n      (p) => p.category === 'user-interaction'\r\n    );\r\n    if (eventHandlersInBuild.length > 0) {\r\n      this.validationIssues.push({\r\n        type: 'event-handlers-in-build',\r\n        severity: 'warning',\r\n        count: eventHandlersInBuild.length,\r\n        message: `${eventHandlersInBuild.length} event handlers defined in build() - they'll be recreated on every render`,\r\n        suggestion: 'Move event handler definitions to initState or class level',\r\n      });\r\n    }\r\n\r\n    // Check 4: Hydration completeness\r\n    if (this.hydrationRequirements.length > 0 && this.ssrMigrationPath.length === 0) {\r\n      this.validationIssues.push({\r\n        type: 'incomplete-hydration',\r\n        severity: 'error',\r\n        message: `App has ${this.hydrationRequirements.length} hydration needs but no hydration layer implemented`,\r\n        suggestion: 'Add hydration step to migration path',\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Calculate SSR compatibility score (0-100)\r\n   * FIXED: criticalIssues is now defined properly\r\n   */\r\n  calculateCompatibilityScore() {\r\n    let score = 100;\r\n\r\n    // Deduct for unsafe patterns\r\n    const unsafeCount = this.ssrUnsafePatterns.length;\r\n    score -= Math.min(unsafeCount * 5, 40);\r\n\r\n    // Deduct for critical issues\r\n    const criticalIssues = this.validationIssues.filter((i) => i.severity === 'critical');\r\n    score -= criticalIssues.length * 15;\r\n\r\n    // Deduct for browser APIs\r\n    const browserApiIssues = this.validationIssues.filter((i) => i.type === 'browser-api-usage');\r\n    score -= browserApiIssues.length * 10;\r\n\r\n    // Add bonus for SSR-safe patterns\r\n    const safeCount = this.ssrSafePatterns.length;\r\n    if (safeCount > 0) {\r\n      score += Math.min(safeCount * 2, 15);\r\n    }\r\n\r\n    // Add bonus for successful hydration setup\r\n    if (this.ssrMigrationPath.length > 3) {\r\n      score += 10;\r\n    }\r\n\r\n    // Ensure score is in valid range\r\n    this.ssrCompatibilityScore = Math.max(0, Math.min(100, score));\r\n  }\r\n\r\n  /**\r\n   * Determine overall SSR compatibility\r\n   */\r\n  getOverallCompatibility() {\r\n    if (this.ssrCompatibilityScore >= 85) {\r\n      return 'full';\r\n    } else if (this.ssrCompatibilityScore >= 60) {\r\n      return 'partial';\r\n    } else if (this.ssrCompatibilityScore >= 30) {\r\n      return 'limited';\r\n    } else {\r\n      return 'none';\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get estimated migration effort\r\n   */\r\n  getEstimatedEffort() {\r\n    const totalEffort = this.ssrMigrationPath.reduce((sum, step) => {\r\n      const effortMap = { low: 1, medium: 2, high: 3 };\r\n      return sum + (effortMap[step.effort] || 0);\r\n    }, 0);\r\n\r\n    if (totalEffort <= 3) {\r\n      return 'minimal';\r\n    } else if (totalEffort <= 6) {\r\n      return 'moderate';\r\n    } else if (totalEffort <= 9) {\r\n      return 'significant';\r\n    } else {\r\n      return 'major-rewrite';\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get results - FIXED: criticalIssues defined locally\r\n   */\r\n  getResults() {\r\n    // FIXED: Define criticalIssues locally\r\n    const criticalIssues = this.validationIssues.filter((i) => i.severity === 'critical');\r\n\r\n    return {\r\n      overallCompatibility: this.getOverallCompatibility(),\r\n      ssrCompatibilityScore: this.ssrCompatibilityScore,\r\n      ssrReadinessScore: this.ssrCompatibilityScore,\r\n\r\n      // Patterns\r\n      ssrSafePatterns: this.ssrSafePatterns,\r\n      ssrUnsafePatterns: this.ssrUnsafePatterns,\r\n\r\n      // Hydration & Optimization\r\n      hydrationRequirements: this.hydrationRequirements,\r\n      hydrationCount: this.hydrationCount,\r\n      lazyLoadOpportunities: this.lazyLoadOpportunities,\r\n\r\n      // Migration Path\r\n      ssrMigrationPath: this.ssrMigrationPath,\r\n      estimatedEffort: this.getEstimatedEffort(),\r\n\r\n      // Validation & Issues\r\n      validationIssues: this.validationIssues,\r\n      criticalIssues: criticalIssues,\r\n      warningIssues: this.validationIssues.filter((i) => i.severity === 'warning'),\r\n\r\n      // Summary\r\n      summary: {\r\n        compatibility: this.getOverallCompatibility(),\r\n        score: this.ssrCompatibilityScore,\r\n        safePatterns: this.ssrSafePatterns.length,\r\n        unsafePatterns: this.ssrUnsafePatterns.length,\r\n        hydrationNeeded: this.hydrationCount,\r\n        migrationSteps: this.ssrMigrationPath.length,\r\n        criticalIssues: criticalIssues.length,\r\n        effort: this.getEstimatedEffort(),\r\n      },\r\n\r\n      errors: this.errors,\r\n    };\r\n  }\r\n}\r\n\r\nexport { SSRAnalyzer };"],
+  "mappings": "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",
+  "names": ["HydrationRequirement", "LazyLoadOpportunity", "getLogger", "SSRAnalyzer", "contextAnalysisResults", "stateAnalysisResults", "options", "error", "patterns", "usage", "pattern", "p", "basePatterns", "hydrationNeeds", "notifier", "requirement", "consumer", "provider", "handler", "h", "a", "b", "opportunities", "widget", "opp", "steps", "watchUnsafe", "mutationUnsafe", "browserApiUnsafe", "eventHandlersInBuild", "score", "unsafeCount", "criticalIssues", "i", "browserApiIssues", "safeCount", "totalEffort", "sum", "step"]
+}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/state_analyzer_data.js b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/state_analyzer_data.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/dist/state_analyzer_data.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/dist/state_analyzer_data.js
diff --git a/packages/flutterjs_analyzer/flutterjs_analyzer/dist/state_analyzer_data.js.map b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/state_analyzer_data.js.map
new file mode 100644
index 00000000..9276c0fa
--- /dev/null
+++ b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/state_analyzer_data.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/state_analyzer_data.js"],
+  "sourcesContent": ["/**\r\n * FlutterJS State Analyzer - Data Classes\r\n * Phase 2 Implementation\r\n * \r\n * Represents all state-related concepts in structured classes\r\n */\r\n\r\n// ============================================================================\r\n// STATE CLASS METADATA\r\n// ============================================================================\r\n\r\n/**\r\n * Metadata about a State class\r\n * Represents: class _MyCounterState extends State<MyCounter> { ... }\r\n */\r\nclass StateClassMetadata {\r\n  constructor(name, location, linkedStatefulWidget = null) {\r\n    // Identity\r\n    this.name = name;\r\n    this.location = location;\r\n    this.linkedStatefulWidget = linkedStatefulWidget;\r\n\r\n    // Contents\r\n    this.stateFields = [];          // _count, _isLoading, etc.\r\n    this.lifecycleMethods = [];     // initState, dispose, build, etc.\r\n    this.eventHandlers = [];        // Handlers for events\r\n    this.otherMethods = [];         // Helper methods like _increment\r\n\r\n    // Metadata\r\n    this.extends = 'State';         // Usually State or State<Widget>\r\n    this.constructor = null;        // Constructor info\r\n  }\r\n\r\n  /**\r\n   * Add a state field to this class\r\n   */\r\n  addStateField(field) {\r\n    if (field instanceof StateField) {\r\n      this.stateFields.push(field);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Add a lifecycle method\r\n   */\r\n  addLifecycleMethod(method) {\r\n    if (method instanceof LifecycleMethod) {\r\n      this.lifecycleMethods.push(method);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get summary\r\n   */\r\n  summary() {\r\n    return {\r\n      name: this.name,\r\n      statefulWidget: this.linkedStatefulWidget,\r\n      fieldCount: this.stateFields.length,\r\n      lifecycleMethodCount: this.lifecycleMethods.length,\r\n      totalMethods: this.otherMethods.length,\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// STATE FIELD\r\n// ============================================================================\r\n\r\n/**\r\n * Represents a single state variable\r\n * Example: _count = 0\r\n */\r\nclass StateField {\r\n  constructor(name, type, initialValue, location) {\r\n    // Identity\r\n    this.name = name;\r\n    this.type = type;              // 'number', 'string', 'boolean', 'any', etc.\r\n    this.location = location;\r\n\r\n    // Initial value\r\n    this.initialValue = initialValue;\r\n    this.initialValueString = this.valueToString(initialValue);\r\n\r\n    // Mutability\r\n    this.isMutable = true;\r\n    this.mutations = [];             // Record of where field is mutated\r\n\r\n    // Usage tracking\r\n    this.usedInMethods = [];         // Which methods read this field\r\n    this.mutatedInMethods = [];      // Which methods mutate this field\r\n    this.usedInBuild = false;        // Is it used in build() method?\r\n  }\r\n\r\n  /**\r\n   * Record that this field is used in a method\r\n   */\r\n  recordUsage(methodName) {\r\n    if (!this.usedInMethods.includes(methodName)) {\r\n      this.usedInMethods.push(methodName);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Record that this field is mutated in a method\r\n   */\r\n  recordMutation(methodName, operation = '=', location = null) {\r\n    this.mutations.push({\r\n      method: methodName,\r\n      operation,    // '++', '--', '=', '+=', '-=', etc.\r\n      location,\r\n      wrappedInSetState: false,  // Will be updated during validation\r\n    });\r\n\r\n    if (!this.mutatedInMethods.includes(methodName)) {\r\n      this.mutatedInMethods.push(methodName);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Check if field is used anywhere\r\n   */\r\n  isUsed() {\r\n    return this.usedInMethods.length > 0 || this.usedInBuild;\r\n  }\r\n\r\n  /**\r\n   * Convert value to string representation\r\n   */\r\n  valueToString(value) {\r\n    if (value === null) return 'null';\r\n    if (value === undefined) return 'undefined';\r\n    if (typeof value === 'string') return `\"${value}\"`;\r\n    if (typeof value === 'boolean') return value ? 'true' : 'false';\r\n    if (typeof value === 'number') return String(value);\r\n    return String(value);\r\n  }\r\n\r\n  /**\r\n   * Get summary\r\n   */\r\n  summary() {\r\n    return {\r\n      name: this.name,\r\n      type: this.type,\r\n      initialValue: this.initialValueString,\r\n      isUsed: this.isUsed(),\r\n      usedInMethods: this.usedInMethods,\r\n      mutatedInMethods: this.mutatedInMethods,\r\n      mutationCount: this.mutations.length,\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// LIFECYCLE METHOD\r\n// ============================================================================\r\n\r\n/**\r\n * Represents a lifecycle hook method\r\n * Examples: initState(), dispose(), didUpdateWidget(), build()\r\n */\r\nclass LifecycleMethod {\r\n  constructor(name, location, params = [], callsSuper = false, hasSideEffects = false) {\r\n    // Identity\r\n    this.name = name;\r\n    this.location = location;\r\n    this.params = params;\r\n\r\n    // Behavior\r\n    this.callsSuper = callsSuper;\r\n    this.hasSideEffects = hasSideEffects;\r\n\r\n    // Validation\r\n    this.shouldCallSuper = false;   // True if this method should call super\r\n    this.validationIssues = [];\r\n  }\r\n\r\n  /**\r\n   * Check if this method type should call super\r\n   */\r\n  setMustCallSuper(mustCall) {\r\n    this.shouldCallSuper = mustCall;\r\n  }\r\n\r\n  /**\r\n   * Add a validation issue\r\n   */\r\n  addIssue(type, message, severity = 'warning') {\r\n    this.validationIssues.push({\r\n      type,\r\n      message,\r\n      severity,\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Check if method is valid\r\n   */\r\n  isValid() {\r\n    // dispose() MUST call super\r\n    if (this.name === 'dispose' && !this.callsSuper) {\r\n      return false;\r\n    }\r\n\r\n    // initState should call super\r\n    if (this.name === 'initState' && !this.callsSuper) {\r\n      return false;\r\n    }\r\n\r\n    return this.validationIssues.filter(v => v.severity === 'error').length === 0;\r\n  }\r\n\r\n  /**\r\n   * Get summary\r\n   */\r\n  summary() {\r\n    return {\r\n      name: this.name,\r\n      callsSuper: this.callsSuper,\r\n      shouldCallSuper: this.shouldCallSuper,\r\n      hasSideEffects: this.hasSideEffects,\r\n      isValid: this.isValid(),\r\n      issues: this.validationIssues,\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// STATE UPDATE CALL\r\n// ============================================================================\r\n\r\n/**\r\n * Represents a single setState() call\r\n * Example: this.setState(() => { this._count++; })\r\n */\r\nclass StateUpdateCall {\r\n  constructor(location, method, updates = [], stateClassName) {\r\n    // Location\r\n    this.location = location;\r\n    this.method = method;           // Which method contains this call\r\n    this.stateClassName = stateClassName;\r\n\r\n    // What's being updated\r\n    this.updates = updates || [];   // Field names being updated\r\n\r\n    // Validation\r\n    this.isValid = true;\r\n    this.issues = [];\r\n  }\r\n\r\n  /**\r\n   * Add a validation issue\r\n   */\r\n  addIssue(type, message, severity = 'error') {\r\n    this.issues.push({\r\n      type,\r\n      message,\r\n      severity,\r\n    });\r\n    if (severity === 'error') {\r\n      this.isValid = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Check if this call updates a specific field\r\n   */\r\n  updatesField(fieldName) {\r\n    return this.updates.includes(fieldName);\r\n  }\r\n\r\n  /**\r\n   * Get summary\r\n   */\r\n  summary() {\r\n    return {\r\n      method: this.method,\r\n      updates: this.updates,\r\n      isValid: this.isValid,\r\n      issueCount: this.issues.length,\r\n      issues: this.issues,\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// EVENT HANDLER\r\n// ============================================================================\r\n\r\n/**\r\n * Represents an event handler attached to a widget\r\n * Example: onPressed: () => this._increment()\r\n */\r\nclass EventHandler {\r\n  constructor(event, handler, location, component = 'Unknown') {\r\n    // Identification\r\n    this.event = event;             // 'onPressed', 'onChange', etc.\r\n    this.handler = handler;         // Method name: '_increment'\r\n    this.location = location;\r\n    this.component = component;     // 'Button', 'TextField', etc.\r\n\r\n    // Validation\r\n    this.isValid = true;\r\n    this.issues = [];\r\n    this.triggersSetState = false;  // Does handler call setState?\r\n  }\r\n\r\n  /**\r\n   * Add validation issue\r\n   */\r\n  addIssue(type, message, severity = 'error') {\r\n    this.issues.push({\r\n      type,\r\n      message,\r\n      severity,\r\n    });\r\n    if (severity === 'error') {\r\n      this.isValid = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Mark that this handler triggers setState\r\n   */\r\n  marksSetState(trigger = true) {\r\n    this.triggersSetState = trigger;\r\n  }\r\n\r\n  /**\r\n   * Get summary\r\n   */\r\n  summary() {\r\n    return {\r\n      event: this.event,\r\n      handler: this.handler,\r\n      component: this.component,\r\n      triggersSetState: this.triggersSetState,\r\n      isValid: this.isValid,\r\n      issues: this.issues,\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// DEPENDENCY GRAPH\r\n// ============================================================================\r\n\r\n/**\r\n * Maps relationships between state, methods, and events\r\n */\r\nclass DependencyGraph {\r\n  constructor() {\r\n    // State \u2192 Methods: which methods use which state\r\n    this.stateToMethods = new Map();\r\n\r\n    // Method \u2192 State: which state each method uses\r\n    this.methodToState = new Map();\r\n\r\n    // Event \u2192 State: which state each event updates\r\n    this.eventToState = new Map();\r\n\r\n    // Method \u2192 Methods: which methods call which methods\r\n    this.methodToMethods = new Map();\r\n  }\r\n\r\n  /**\r\n   * Add state \u2192 method mapping\r\n   */\r\n  addStateUse(stateName, methodName) {\r\n    if (!this.stateToMethods.has(stateName)) {\r\n      this.stateToMethods.set(stateName, []);\r\n    }\r\n    const methods = this.stateToMethods.get(stateName);\r\n    if (!methods.includes(methodName)) {\r\n      methods.push(methodName);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Add method \u2192 state mapping\r\n   */\r\n  addMethodStateUse(methodName, stateName) {\r\n    if (!this.methodToState.has(methodName)) {\r\n      this.methodToState.set(methodName, []);\r\n    }\r\n    const states = this.methodToState.get(methodName);\r\n    if (!states.includes(stateName)) {\r\n      states.push(stateName);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Add event \u2192 state mapping\r\n   */\r\n  addEventStateUse(eventName, stateName) {\r\n    if (!this.eventToState.has(eventName)) {\r\n      this.eventToState.set(eventName, []);\r\n    }\r\n    const states = this.eventToState.get(eventName);\r\n    if (!states.includes(stateName)) {\r\n      states.push(stateName);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get all state that a method depends on\r\n   */\r\n  getStateForMethod(methodName) {\r\n    return this.methodToState.get(methodName) || [];\r\n  }\r\n\r\n  /**\r\n   * Get all methods that use a state\r\n   */\r\n  getMethodsForState(stateName) {\r\n    return this.stateToMethods.get(stateName) || [];\r\n  }\r\n\r\n  /**\r\n   * Get state that an event triggers\r\n   */\r\n  getStateForEvent(eventName) {\r\n    return this.eventToState.get(eventName) || [];\r\n  }\r\n\r\n  /**\r\n   * Get summary\r\n   */\r\n  summary() {\r\n    return {\r\n      stateToMethods: Object.fromEntries(this.stateToMethods),\r\n      methodToState: Object.fromEntries(this.methodToState),\r\n      eventToState: Object.fromEntries(this.eventToState),\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// VALIDATION RESULT\r\n// ============================================================================\r\n\r\n/**\r\n * Represents a single validation issue found during analysis\r\n */\r\nclass ValidationResult {\r\n  constructor(type, message, severity = 'warning', location = null) {\r\n    this.type = type;               // 'unused-state', 'missing-super', etc.\r\n    this.message = message;\r\n    this.severity = severity;       // 'error', 'warning', 'info'\r\n    this.location = location;\r\n\r\n    this.suggestion = null;         // How to fix it\r\n    this.affectedItem = null;       // Field, method, etc. that has the issue\r\n  }\r\n\r\n  /**\r\n   * Add a suggestion for fixing the issue\r\n   */\r\n  withSuggestion(suggestion) {\r\n    this.suggestion = suggestion;\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * Set what item is affected\r\n   */\r\n  affecting(item) {\r\n    this.affectedItem = item;\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * Convert to output format\r\n   */\r\n  toObject() {\r\n    return {\r\n      type: this.type,\r\n      message: this.message,\r\n      severity: this.severity,\r\n      location: this.location,\r\n      suggestion: this.suggestion,\r\n      affectedItem: this.affectedItem,\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// ANALYSIS SUMMARY\r\n// ============================================================================\r\n\r\n/**\r\n * Summary statistics of the entire state analysis\r\n */\r\nclass AnalysisSummary {\r\n  constructor() {\r\n    this.stateClassCount = 0;\r\n    this.stateFieldCount = 0;\r\n    this.setStateCallCount = 0;\r\n    this.lifecycleMethodCount = 0;\r\n    this.eventHandlerCount = 0;\r\n\r\n    this.errorCount = 0;\r\n    this.warningCount = 0;\r\n\r\n    this.complexityScore = 0;      // 0-100\r\n    this.healthScore = 0;          // 0-100\r\n  }\r\n\r\n  /**\r\n   * Calculate complexity score based on state complexity\r\n   */\r\n  calculateComplexity() {\r\n    let score = 0;\r\n\r\n    // More state fields = more complex\r\n    score += Math.min(this.stateFieldCount * 10, 40);\r\n\r\n    // More setState calls = more complex\r\n    score += Math.min(this.setStateCallCount * 5, 30);\r\n\r\n    // More event handlers = more complex\r\n    score += Math.min(this.eventHandlerCount * 2, 20);\r\n\r\n    this.complexityScore = Math.min(100, score);\r\n    return this.complexityScore;\r\n  }\r\n\r\n  /**\r\n   * Calculate health score\r\n   */\r\n  calculateHealth() {\r\n    let score = 100;\r\n\r\n    // Deduct for errors\r\n    score -= this.errorCount * 10;\r\n\r\n    // Deduct for warnings\r\n    score -= this.warningCount * 2;\r\n\r\n    // Deduct for high complexity\r\n    if (this.complexityScore > 70) {\r\n      score -= 10;\r\n    }\r\n\r\n    this.healthScore = Math.max(0, score);\r\n    return this.healthScore;\r\n  }\r\n\r\n  /**\r\n   * Get summary object\r\n   */\r\n  toObject() {\r\n    return {\r\n      stateClasses: this.stateClassCount,\r\n      stateFields: this.stateFieldCount,\r\n      setStateCalls: this.setStateCallCount,\r\n      lifecycleMethods: this.lifecycleMethodCount,\r\n      eventHandlers: this.eventHandlerCount,\r\n      errors: this.errorCount,\r\n      warnings: this.warningCount,\r\n      complexityScore: this.complexityScore,\r\n      healthScore: this.healthScore,\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport {\r\n  StateClassMetadata,\r\n  StateField,\r\n  LifecycleMethod,\r\n  StateUpdateCall,\r\n  EventHandler,\r\n  DependencyGraph,\r\n  ValidationResult,\r\n  AnalysisSummary,\r\n};"],
+  "mappings": "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",
+  "names": ["StateClassMetadata", "name", "location", "linkedStatefulWidget", "field", "StateField", "method", "LifecycleMethod", "type", "initialValue", "methodName", "operation", "value", "params", "callsSuper", "hasSideEffects", "mustCall", "message", "severity", "v", "StateUpdateCall", "updates", "stateClassName", "fieldName", "EventHandler", "event", "handler", "component", "trigger", "DependencyGraph", "stateName", "methods", "states", "eventName", "ValidationResult", "suggestion", "item", "AnalysisSummary", "score"]
+}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/state_analyzer_implementation.js b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/state_analyzer_implementation.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/dist/state_analyzer_implementation.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/dist/state_analyzer_implementation.js
diff --git a/packages/flutterjs_analyzer/flutterjs_analyzer/dist/state_analyzer_implementation.js.map b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/state_analyzer_implementation.js.map
new file mode 100644
index 00000000..c29af207
--- /dev/null
+++ b/packages/flutterjs_analyzer/flutterjs_analyzer/dist/state_analyzer_implementation.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/state_analyzer_implementation.js"],
+  "sourcesContent": ["/**\r\n * FlutterJS State Analyzer\r\n * Phase 2 Implementation\r\n * \r\n * Extracts state management information from StatefulWidget/State classes\r\n * No external dependencies - pure Node.js\r\n */\r\n\r\n// ============================================================================\r\n// STATE ANALYZER CLASS\r\n// ============================================================================\r\n\r\nclass StateAnalyzer {\r\n  constructor(ast, widgets, options = {}) {\r\n    this.ast = ast;\r\n    this.widgets = widgets; // from Phase 1 WidgetAnalyzer\r\n    this.options = {\r\n      strict: false,\r\n      ...options,\r\n    };\r\n\r\n    // Results storage\r\n    this.stateClasses = new Map();\r\n    this.stateFields = new Map();\r\n    this.setStateCalls = [];\r\n    this.lifecycleMethods = [];\r\n    this.eventHandlers = [];\r\n    this.dependencyGraph = null;\r\n    this.validationResults = [];\r\n    this.errors = [];\r\n  }\r\n\r\n  /**\r\n   * Main entry point - analyze all state-related code\r\n   */\r\n  analyze() {\r\n    if (!this.ast || !this.ast.body) {\r\n      throw new Error('Invalid AST provided');\r\n    }\r\n\r\n    try {\r\n      // Phase 1: Find and link StatefulWidget/State pairs\r\n      this.linkStatefulToState();\r\n\r\n      // Phase 2: Extract state fields from State classes\r\n      this.extractStateFields();\r\n\r\n      // Phase 3: Find setState calls\r\n      this.findSetStateCalls();\r\n\r\n      // Phase 4: Extract lifecycle methods\r\n      this.extractLifecycleMethods();\r\n\r\n      // Phase 5: Extract event handlers\r\n      this.extractEventHandlers();\r\n\r\n      // Phase 6: Build dependency graph\r\n      this.buildDependencyGraph();\r\n\r\n      // Phase 7: Validate everything\r\n      this.validateState();\r\n\r\n      return this.getResults();\r\n    } catch (error) {\r\n      this.errors.push(error);\r\n      return this.getResults();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Phase 1: Link StatefulWidget to State class\r\n   * \r\n   * StatefulWidget.createState() returns State class instance\r\n   * We need to find the return value and match it with State class\r\n   */\r\n  linkStatefulToState() {\r\n    this.widgets.forEach((widget) => {\r\n      if (widget.type !== 'stateful') return;\r\n\r\n      // Find the createState method\r\n      const createStateMethod = widget.methods.find(\r\n        (m) => m.name === 'createState'\r\n      );\r\n\r\n      if (!createStateMethod) {\r\n        this.errors.push({\r\n          type: 'missing-create-state',\r\n          widget: widget.name,\r\n          message: `StatefulWidget \"${widget.name}\" has no createState() method`,\r\n        });\r\n        return;\r\n      }\r\n\r\n      // Find the corresponding class declaration in AST\r\n      const widgetNode = this.ast.body.find(\r\n        (n) => n.type === 'ClassDeclaration' && n.id.name === widget.name\r\n      );\r\n\r\n      if (!widgetNode) return;\r\n\r\n      // Find what createState returns\r\n      const createStateNode = widgetNode.body.methods.find(\r\n        (m) => m.key.name === 'createState'\r\n      );\r\n\r\n      if (!createStateNode) return;\r\n\r\n      // Extract the returned State class name\r\n      const stateClassName = this.extractReturnedClassName(createStateNode.body);\r\n\r\n      if (!stateClassName) {\r\n        this.errors.push({\r\n          type: 'cannot-parse-create-state',\r\n          widget: widget.name,\r\n          message: `Cannot determine which State class is returned by ${widget.name}.createState()`,\r\n        });\r\n        return;\r\n      }\r\n\r\n      // Find the State class\r\n      const stateClassNode = this.ast.body.find(\r\n        (n) => n.type === 'ClassDeclaration' && n.id.name === stateClassName\r\n      );\r\n\r\n      if (!stateClassNode) {\r\n        this.errors.push({\r\n          type: 'missing-state-class',\r\n          widget: widget.name,\r\n          stateClass: stateClassName,\r\n          message: `State class \"${stateClassName}\" not found`,\r\n        });\r\n        return;\r\n      }\r\n\r\n      // Check if it extends State<Widget>\r\n      if (!stateClassNode.superClass || !stateClassNode.superClass.name.startsWith('State')) {\r\n        this.errors.push({\r\n          type: 'invalid-state-class',\r\n          stateClass: stateClassName,\r\n          message: `Class \"${stateClassName}\" does not extend State`,\r\n        });\r\n        return;\r\n      }\r\n\r\n      // Create StateClassMetadata\r\n      const stateMetadata = new StateClassMetadata(\r\n        stateClassName,\r\n        stateClassNode.location,\r\n        widget.name\r\n      );\r\n\r\n      this.stateClasses.set(stateClassName, {\r\n        astNode: stateClassNode,\r\n        metadata: stateMetadata,\r\n      });\r\n\r\n      // Link bidirectional\r\n      widget.linkedStateClass = stateClassName;\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Extract the class name returned from a method\r\n   * Looks for: return new ClassName(); or return new ClassName();\r\n   */\r\n  extractReturnedClassName(methodBody) {\r\n    if (!methodBody) return null;\r\n\r\n    // Handle BlockStatement: { return new ClassName(); }\r\n    if (methodBody.type === 'BlockStatement' && methodBody.body) {\r\n      for (const stmt of methodBody.body) {\r\n        if (stmt.type === 'ReturnStatement' && stmt.argument) {\r\n          const className = this.getClassNameFromExpression(stmt.argument);\r\n          if (className) return className;\r\n        }\r\n      }\r\n    }\r\n\r\n    // Handle direct expression: return new ClassName();\r\n    if (methodBody.type === 'NewExpression') {\r\n      return methodBody.callee.name;\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Extract class name from expression (new ClassName or ClassName)\r\n   */\r\n  getClassNameFromExpression(expr) {\r\n    if (!expr) return null;\r\n\r\n    if (expr.type === 'NewExpression' && expr.callee) {\r\n      return expr.callee.name;\r\n    }\r\n\r\n    if (expr.type === 'Identifier') {\r\n      return expr.name;\r\n    }\r\n\r\n    if (expr.type === 'CallExpression' && expr.callee) {\r\n      if (expr.callee.type === 'Identifier') {\r\n        return expr.callee.name;\r\n      }\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Phase 2: Extract state fields from State classes\r\n   * \r\n   * State fields are class properties that can be mutated\r\n   * Examples: _count = 0, _isLoading = false\r\n   */\r\n  extractStateFields() {\r\n    this.stateClasses.forEach(({ astNode, metadata }) => {\r\n      if (!astNode.body || !astNode.body.fields) return;\r\n\r\n      astNode.body.fields.forEach((field) => {\r\n        const fieldName = field.key.name;\r\n        const initialValue = field.initialValue;\r\n\r\n        // Infer type from initial value\r\n        const type = this.inferFieldType(initialValue);\r\n\r\n        const stateField = new StateField(\r\n          fieldName,\r\n          type,\r\n          this.expressionToValue(initialValue),\r\n          initialValue ? initialValue.location : field.location\r\n        );\r\n\r\n        // Track in global map and in metadata\r\n        this.stateFields.set(`${metadata.name}.${fieldName}`, stateField);\r\n        metadata.stateFields.push(stateField);\r\n      });\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Infer field type from initial value expression\r\n   */\r\n  inferFieldType(expr) {\r\n    if (!expr) return 'any';\r\n\r\n    if (expr.type === 'Literal') {\r\n      if (typeof expr.value === 'number') return 'number';\r\n      if (typeof expr.value === 'string') return 'string';\r\n      if (typeof expr.value === 'boolean') return 'boolean';\r\n      if (expr.value === null) return 'null';\r\n    }\r\n\r\n    if (expr.type === 'Identifier') {\r\n      const name = expr.name;\r\n      if (name === 'true' || name === 'false') return 'boolean';\r\n      if (name === 'null') return 'null';\r\n      if (name === 'undefined') return 'undefined';\r\n    }\r\n\r\n    // Array literal\r\n    if (expr.type === 'ArrayLiteral') return 'array';\r\n\r\n    // Object literal\r\n    if (expr.type === 'ObjectLiteral') return 'object';\r\n\r\n    // Function call - unknown return type\r\n    if (expr.type === 'CallExpression') return 'any';\r\n\r\n    return 'any';\r\n  }\r\n\r\n  /**\r\n   * Convert expression to actual value (for initialization)\r\n   */\r\n  expressionToValue(expr) {\r\n    if (!expr) return undefined;\r\n\r\n    if (expr.type === 'Literal') {\r\n      return expr.value;\r\n    }\r\n\r\n    if (expr.type === 'Identifier') {\r\n      const name = expr.name;\r\n      if (name === 'true') return true;\r\n      if (name === 'false') return false;\r\n      if (name === 'null') return null;\r\n      if (name === 'undefined') return undefined;\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  /**\r\n   * Phase 3: Find all setState() calls\r\n   */\r\n  findSetStateCalls() {\r\n    this.stateClasses.forEach(({ astNode, metadata }) => {\r\n      if (!astNode.body || !astNode.body.methods) return;\r\n\r\n      // Search all methods for setState calls\r\n      astNode.body.methods.forEach((method) => {\r\n        const setStateCalls = this.findSetStateInMethod(method, metadata.name);\r\n        this.setStateCalls.push(...setStateCalls);\r\n      });\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Find setState calls within a method\r\n   */\r\n  findSetStateInMethod(method, stateClassName) {\r\n    const calls = [];\r\n    const methodName = method.key.name;\r\n\r\n    // Search method body for setState calls\r\n    if (method.body) {\r\n      const stmts = method.body.type === 'BlockStatement'\r\n        ? method.body.body\r\n        : [method.body];\r\n\r\n      stmts.forEach((stmt) => {\r\n        this.findSetStateInStatement(stmt, calls, methodName, stateClassName);\r\n      });\r\n    }\r\n\r\n    return calls;\r\n  }\r\n\r\n  /**\r\n   * Recursively find setState in statements\r\n   */\r\n  findSetStateInStatement(stmt, calls, methodName, stateClassName) {\r\n    if (!stmt) return;\r\n\r\n    // Handle expression statements\r\n    if (stmt.type === 'ExpressionStatement' && stmt.expression) {\r\n      this.findSetStateInExpression(stmt.expression, calls, methodName, stateClassName);\r\n    }\r\n\r\n    // Handle return statements\r\n    if (stmt.type === 'ReturnStatement' && stmt.argument) {\r\n      this.findSetStateInExpression(stmt.argument, calls, methodName, stateClassName);\r\n    }\r\n\r\n    // Handle blocks\r\n    if (stmt.type === 'BlockStatement' && stmt.body) {\r\n      stmt.body.forEach((s) => {\r\n        this.findSetStateInStatement(s, calls, methodName, stateClassName);\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Find setState in expression tree\r\n   */\r\n  findSetStateInExpression(expr, calls, methodName, stateClassName) {\r\n    if (!expr) return;\r\n\r\n    // Check if this is a setState call: this.setState(callback)\r\n    if (expr.type === 'CallExpression') {\r\n      // Check if it's this.setState(...)\r\n      const isSetState = this.isSetStateCall(expr);\r\n\r\n      if (isSetState) {\r\n        const updatedFields = this.extractSetStateUpdates(expr, stateClassName);\r\n        const call = new StateUpdateCall(\r\n          expr.location,\r\n          methodName,\r\n          updatedFields,\r\n          stateClassName\r\n        );\r\n        calls.push(call);\r\n      }\r\n\r\n      // Also check arguments for nested setState calls\r\n      expr.args.forEach((arg) => {\r\n        this.findSetStateInExpression(arg, calls, methodName, stateClassName);\r\n      });\r\n    }\r\n\r\n    // Recursively check nested expressions\r\n    if (expr.type === 'ObjectLiteral' && expr.properties) {\r\n      expr.properties.forEach((prop) => {\r\n        this.findSetStateInExpression(prop.value, calls, methodName, stateClassName);\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Check if expression is this.setState(...)\r\n   */\r\n  isSetStateCall(expr) {\r\n    if (expr.type !== 'CallExpression') return false;\r\n    if (!expr.callee) return false;\r\n\r\n    // Check for member expression: this.setState\r\n    if (expr.callee.type === 'MemberExpression') {\r\n      const obj = expr.callee.object;\r\n      const prop = expr.callee.property;\r\n\r\n      // this.setState\r\n      if (obj.type === 'Identifier' && obj.name === 'this' &&\r\n        prop.type === 'Identifier' && prop.name === 'setState') {\r\n        return true;\r\n      }\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  /**\r\n   * Extract which state fields are updated in setState\r\n   * setState(() => { this._count++; })\r\n   */\r\n  extractSetStateUpdates(setStateCall, stateClassName) {\r\n    const updated = [];\r\n\r\n    if (!setStateCall.args || setStateCall.args.length === 0) return updated;\r\n\r\n    // First argument is the callback: () => { ... }\r\n    const callback = setStateCall.args[0];\r\n\r\n    if (callback.type === 'ArrowFunctionExpression') {\r\n      // Extract body\r\n      const body = callback.body;\r\n\r\n      if (body.type === 'BlockStatement' && body.body) {\r\n        // Search for field mutations: this._field = value, this._field++, etc.\r\n        body.body.forEach((stmt) => {\r\n          const mutated = this.extractMutatedFields(stmt, stateClassName);\r\n          updated.push(...mutated);\r\n        });\r\n      } else if (body.type === 'UpdateExpression' || body.type === 'AssignmentExpression') {\r\n        // Direct mutation in arrow body\r\n        const mutated = this.extractMutatedFields(body, stateClassName);\r\n        updated.push(...mutated);\r\n      }\r\n    }\r\n\r\n    return [...new Set(updated)]; // Remove duplicates\r\n  }\r\n\r\n  /**\r\n   * Extract mutated fields from statement\r\n   * Looks for: this._field = x, this._field++, this._field += x\r\n   */\r\n  extractMutatedFields(stmt, stateClassName) {\r\n    const fields = [];\r\n\r\n    if (!stmt) return fields;\r\n\r\n    // Assignment: this._field = value\r\n    if (stmt.type === 'ExpressionStatement' && stmt.expression) {\r\n      const expr = stmt.expression;\r\n\r\n      if (expr.type === 'AssignmentExpression') {\r\n        const fieldName = this.getFieldNameFromTarget(expr.left);\r\n        if (fieldName) fields.push(fieldName);\r\n      }\r\n\r\n      // Update expression: this._field++, this._field--\r\n      if (expr.type === 'UpdateExpression') {\r\n        const fieldName = this.getFieldNameFromTarget(expr.argument);\r\n        if (fieldName) fields.push(fieldName);\r\n      }\r\n    }\r\n\r\n    // Direct assignment/update (arrow body)\r\n    if (stmt.type === 'AssignmentExpression') {\r\n      const fieldName = this.getFieldNameFromTarget(stmt.left);\r\n      if (fieldName) fields.push(fieldName);\r\n    }\r\n\r\n    if (stmt.type === 'UpdateExpression') {\r\n      const fieldName = this.getFieldNameFromTarget(stmt.argument);\r\n      if (fieldName) fields.push(fieldName);\r\n    }\r\n\r\n    return fields;\r\n  }\r\n\r\n  /**\r\n   * Get field name from assignment target\r\n   * Handles: this._field, obj.field, etc.\r\n   */\r\n  getFieldNameFromTarget(target) {\r\n    if (!target) return null;\r\n\r\n    // this._field\r\n    if (target.type === 'MemberExpression') {\r\n      const obj = target.object;\r\n      const prop = target.property;\r\n\r\n      // this._field\r\n      if (obj.type === 'Identifier' && obj.name === 'this' &&\r\n        prop.type === 'Identifier') {\r\n        return prop.name;\r\n      }\r\n    }\r\n\r\n    // _field (direct identifier)\r\n    if (target.type === 'Identifier') {\r\n      return target.name;\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Phase 4: Extract lifecycle methods\r\n   * \r\n   * Lifecycle methods: initState, dispose, didUpdateWidget, build\r\n   */\r\n  extractLifecycleMethods() {\r\n    const lifecycleNames = ['initState', 'dispose', 'didUpdateWidget', 'build'];\r\n\r\n    this.stateClasses.forEach(({ astNode, metadata }) => {\r\n      if (!astNode.body || !astNode.body.methods) return;\r\n\r\n      astNode.body.methods.forEach((method) => {\r\n        const methodName = method.key.name;\r\n\r\n        if (lifecycleNames.includes(methodName)) {\r\n          const lifecycle = new LifecycleMethod(\r\n            methodName,\r\n            method.location,\r\n            method.params || [],\r\n            this.checkCallsSuper(method),\r\n            this.checkHasSideEffects(method)\r\n          );\r\n\r\n          this.lifecycleMethods.push(lifecycle);\r\n          metadata.lifecycleMethods.push(lifecycle);\r\n        }\r\n      });\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Check if method calls super.methodName()\r\n   */\r\n  checkCallsSuper(method) {\r\n    if (!method.body) return false;\r\n\r\n    const stmts = method.body.type === 'BlockStatement'\r\n      ? method.body.body\r\n      : [method.body];\r\n\r\n    for (const stmt of stmts) {\r\n      if (stmt.type === 'ExpressionStatement' && stmt.expression) {\r\n        const expr = stmt.expression;\r\n\r\n        // super.initState() pattern\r\n        if (expr.type === 'CallExpression' && expr.callee.type === 'MemberExpression') {\r\n          const obj = expr.callee.object;\r\n          const prop = expr.callee.property;\r\n\r\n          if (obj.type === 'Identifier' && obj.name === 'super' &&\r\n            prop.type === 'Identifier' && prop.name === method.key.name) {\r\n            return true;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  /**\r\n   * Check if method has side effects (console.log, assignments, etc.)\r\n   */\r\n  checkHasSideEffects(method) {\r\n    if (!method.body) return false;\r\n\r\n    const stmts = method.body.type === 'BlockStatement'\r\n      ? method.body.body\r\n      : [method.body];\r\n\r\n    for (const stmt of stmts) {\r\n      // Assignment has side effect\r\n      if (stmt.type === 'ExpressionStatement' && stmt.expression) {\r\n        const expr = stmt.expression;\r\n\r\n        if (expr.type === 'AssignmentExpression' || expr.type === 'UpdateExpression') {\r\n          return true;\r\n        }\r\n\r\n        // Function calls might have side effects\r\n        if (expr.type === 'CallExpression') {\r\n          return true;\r\n        }\r\n      }\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  /**\r\n   * Phase 5: Extract event handlers from build method\r\n   * \r\n   * Looks for: onPressed: () => handler(), onChange: handler, etc.\r\n   */\r\n  extractEventHandlers() {\r\n    this.stateClasses.forEach(({ astNode, metadata }) => {\r\n      if (!astNode.body || !astNode.body.methods) return;\r\n\r\n      // Find build method\r\n      const buildMethod = astNode.body.methods.find((m) => m.key.name === 'build');\r\n      if (!buildMethod) return;\r\n\r\n      // Extract event handlers from the build method body\r\n      const handlers = this.findEventHandlersInMethod(buildMethod, metadata.name);\r\n      this.eventHandlers.push(...handlers);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Find event handlers in method body\r\n   */\r\n  findEventHandlersInMethod(method, stateClassName) {\r\n    const handlers = [];\r\n\r\n    if (!method.body) return handlers;\r\n\r\n    const stmts = method.body.type === 'BlockStatement'\r\n      ? method.body.body\r\n      : [method.body];\r\n\r\n    stmts.forEach((stmt) => {\r\n      this.findEventHandlersInStatement(stmt, handlers, stateClassName);\r\n    });\r\n\r\n    return handlers;\r\n  }\r\n\r\n  /**\r\n   * Recursively find event handlers in statements\r\n   */\r\n  findEventHandlersInStatement(stmt, handlers, stateClassName) {\r\n    if (!stmt) return;\r\n\r\n    if (stmt.type === 'ExpressionStatement' && stmt.expression) {\r\n      this.findEventHandlersInExpression(stmt.expression, handlers, stateClassName);\r\n    }\r\n\r\n    if (stmt.type === 'ReturnStatement' && stmt.argument) {\r\n      this.findEventHandlersInExpression(stmt.argument, handlers, stateClassName);\r\n    }\r\n\r\n    if (stmt.type === 'BlockStatement' && stmt.body) {\r\n      stmt.body.forEach((s) => {\r\n        this.findEventHandlersInStatement(s, handlers, stateClassName);\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Find event handlers in expressions\r\n   * Looks for: { onPressed: () => handler(), onChange: handler }\r\n   */\r\n  findEventHandlersInExpression(expr, handlers, stateClassName) {\r\n    if (!expr) return;\r\n\r\n    // Check object literals for event properties\r\n    if (expr.type === 'ObjectLiteral' && expr.properties) {\r\n      expr.properties.forEach((prop) => {\r\n        // Property key is the event name (onPressed, onChange, etc.)\r\n        const eventName = this.getPropertyKey(prop.key);\r\n        const eventPattern = /^on[A-Z]/; // onPressed, onChange, etc.\r\n\r\n        if (eventPattern.test(eventName)) {\r\n          // Extract handler from property value\r\n          const handler = this.extractEventHandler(prop.value, stateClassName);\r\n\r\n          if (handler) {\r\n            handlers.push({\r\n              event: eventName,\r\n              handler: handler,\r\n              location: prop.location,\r\n              component: this.getComponentNameFromContext(expr),\r\n            });\r\n          }\r\n        }\r\n\r\n        // Also search nested values\r\n        this.findEventHandlersInExpression(prop.value, handlers, stateClassName);\r\n      });\r\n    }\r\n\r\n    // Check call expressions (widget calls)\r\n    if (expr.type === 'CallExpression' && expr.args) {\r\n      expr.args.forEach((arg) => {\r\n        this.findEventHandlersInExpression(arg, handlers, stateClassName);\r\n      });\r\n    }\r\n\r\n    // Check new expressions\r\n    if (expr.type === 'NewExpression' && expr.args) {\r\n      expr.args.forEach((arg) => {\r\n        this.findEventHandlersInExpression(arg, handlers, stateClassName);\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get property key from object property\r\n   */\r\n  getPropertyKey(keyExpr) {\r\n    if (!keyExpr) return null;\r\n\r\n    if (keyExpr.type === 'Identifier') {\r\n      return keyExpr.name;\r\n    }\r\n\r\n    if (keyExpr.type === 'Literal') {\r\n      return String(keyExpr.value);\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Extract handler reference from property value\r\n   * Can be: () => handler(), handler, () => { ... }\r\n   */\r\n  extractEventHandler(value, stateClassName) {\r\n    if (!value) return null;\r\n\r\n    // Arrow function: () => handler()\r\n    if (value.type === 'ArrowFunctionExpression') {\r\n      if (value.body.type === 'CallExpression') {\r\n        const handlerName = this.getClassNameFromExpression(value.body.callee);\r\n        return handlerName;\r\n      }\r\n\r\n      // Check if body is identifier: () => handler\r\n      if (value.body.type === 'Identifier') {\r\n        return value.body.name;\r\n      }\r\n    }\r\n\r\n    // Direct identifier: handler\r\n    if (value.type === 'Identifier') {\r\n      return value.name;\r\n    }\r\n\r\n    // Member expression: this.handler\r\n    if (value.type === 'MemberExpression') {\r\n      if (value.property.type === 'Identifier') {\r\n        return value.property.name;\r\n      }\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Get component name (for context, since we don't have full widget info here)\r\n   */\r\n  getComponentNameFromContext(expr) {\r\n    // This is simplified - in a real scenario you'd track which widget\r\n    // contains this object literal\r\n    if (expr.type === 'CallExpression' && expr.callee) {\r\n      return this.getClassNameFromExpression(expr.callee);\r\n    }\r\n\r\n    return 'Unknown';\r\n  }\r\n\r\n  /**\r\n   * Phase 6: Build state dependency graph\r\n   * \r\n   * Maps:\r\n   * - stateToMethods: which methods use which state\r\n   * - methodToState: which state each method uses\r\n   * - eventToState: which state each event updates\r\n   */\r\n  buildDependencyGraph() {\r\n    this.dependencyGraph = new DependencyGraph();\r\n\r\n    // State to methods\r\n    this.stateFields.forEach((field, key) => {\r\n      const methods = this.findMethodsUsingField(field.name);\r\n      if (methods.length > 0) {\r\n        this.dependencyGraph.stateToMethods.set(field.name, methods);\r\n      }\r\n    });\r\n\r\n    // Methods to state\r\n    this.stateClasses.forEach(({ metadata }) => {\r\n      metadata.stateFields.forEach((field) => {\r\n        const methodsUsing = this.findMethodsReadingField(metadata.name, field.name);\r\n        if (methodsUsing.length > 0) {\r\n          this.dependencyGraph.methodToState.set(field.name, methodsUsing);\r\n        }\r\n      });\r\n    });\r\n\r\n    // Event to state\r\n    this.eventHandlers.forEach((event) => {\r\n      const stateChanged = this.findStateChangedByMethod(event.handler);\r\n      if (stateChanged.length > 0) {\r\n        this.dependencyGraph.eventToState.set(event.event, stateChanged);\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Find methods that use a state field\r\n   */\r\n  findMethodsUsingField(fieldName) {\r\n    const methods = new Set();\r\n\r\n    this.setStateCalls.forEach((call) => {\r\n      if (call.updates.includes(fieldName)) {\r\n        methods.add(call.method);\r\n      }\r\n    });\r\n\r\n    // Also check if field is used in build (for reading)\r\n    this.stateClasses.forEach(({ astNode, metadata }) => {\r\n      if (!astNode.body || !astNode.body.methods) return;\r\n\r\n      const buildMethod = astNode.body.methods.find((m) => m.key.name === 'build');\r\n      if (buildMethod && this.methodUsesField(buildMethod, fieldName)) {\r\n        methods.add('build');\r\n      }\r\n    });\r\n\r\n    return Array.from(methods);\r\n  }\r\n\r\n  /**\r\n   * Check if method uses a field\r\n   */\r\n  methodUsesField(method, fieldName) {\r\n    if (!method.body) return false;\r\n\r\n    const stmts = method.body.type === 'BlockStatement'\r\n      ? method.body.body\r\n      : [method.body];\r\n\r\n    for (const stmt of stmts) {\r\n      if (this.statementUsesField(stmt, fieldName)) {\r\n        return true;\r\n      }\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  /**\r\n   * Check if statement contains field reference\r\n   */\r\n  statementUsesField(stmt, fieldName) {\r\n    if (!stmt) return false;\r\n\r\n    // Simple search for this._fieldName pattern\r\n    const code = JSON.stringify(stmt);\r\n    return code.includes(fieldName);\r\n  }\r\n\r\n  /**\r\n   * Find methods that are triggered by reading state\r\n   */\r\n  findMethodsReadingField(stateClassName, fieldName) {\r\n    const methods = [];\r\n\r\n    this.stateClasses.forEach(({ metadata }) => {\r\n      if (metadata.name !== stateClassName) return;\r\n\r\n      metadata.stateFields.forEach((field) => {\r\n        if (field.name === fieldName) {\r\n          methods.push(...field.usedInMethods);\r\n        }\r\n      });\r\n    });\r\n\r\n    return methods;\r\n  }\r\n\r\n  /**\r\n   * Find state changed by a method\r\n   */\r\n  findStateChangedByMethod(methodName) {\r\n    const changed = new Set();\r\n\r\n    this.setStateCalls.forEach((call) => {\r\n      if (call.method === methodName) {\r\n        call.updates.forEach((update) => changed.add(update));\r\n      }\r\n    });\r\n\r\n    return Array.from(changed);\r\n  }\r\n\r\n  /**\r\n   * Phase 7: Validate all state patterns\r\n   */\r\n  validateState() {\r\n    this.validateSetStatePatterns();\r\n    this.validateStateFieldUsage();\r\n    this.validateLifecyclePatterns();\r\n    this.validateEventHandlers();\r\n  }\r\n\r\n  /**\r\n   * Validate setState usage patterns\r\n   */\r\n  validateSetStatePatterns() {\r\n    this.setStateCalls.forEach((call) => {\r\n      const issues = [];\r\n\r\n      // Check if called from valid context (State class method)\r\n      const stateClass = this.stateClasses.get(call.stateClassName);\r\n      if (!stateClass) {\r\n        issues.push({\r\n          type: 'invalid-context',\r\n          message: `setState called outside of ${call.stateClassName}`,\r\n        });\r\n      }\r\n\r\n      // Check if updates valid fields\r\n      if (call.updates.length === 0) {\r\n        issues.push({\r\n          type: 'empty-update',\r\n          message: 'setState called with no state updates',\r\n          severity: 'warning',\r\n        });\r\n      }\r\n\r\n      call.updates.forEach((field) => {\r\n        if (!this.stateFields.has(`${call.stateClassName}.${field}`)) {\r\n          issues.push({\r\n            type: 'unknown-field',\r\n            message: `setState updates unknown field \"${field}\"`,\r\n            field,\r\n          });\r\n        }\r\n      });\r\n\r\n      // Record validation\r\n      call.isValid = issues.length === 0;\r\n      call.issues = issues;\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Validate state field usage\r\n   */\r\n  validateStateFieldUsage() {\r\n    this.stateFields.forEach((field, key) => {\r\n      const parts = key.split('.');\r\n      const stateClassName = parts[0];\r\n      const fieldName = parts[1];\r\n\r\n      // Check if field is used\r\n      if (!this.fieldIsUsed(fieldName, stateClassName)) {\r\n        this.validationResults.push({\r\n          type: 'unused-state-field',\r\n          severity: 'warning',\r\n          field: fieldName,\r\n          location: field.location,\r\n          message: `State field \"${fieldName}\" is defined but never used`,\r\n          suggestion: 'Remove unused field or implement its usage',\r\n        });\r\n      }\r\n\r\n      // Check if field is mutated outside setState\r\n      const mutationsOutsideSetState = this.findMutationsOutsideSetState(\r\n        fieldName,\r\n        stateClassName\r\n      );\r\n      if (mutationsOutsideSetState.length > 0) {\r\n        this.validationResults.push({\r\n          type: 'mutation-outside-setstate',\r\n          severity: 'error',\r\n          field: fieldName,\r\n          locations: mutationsOutsideSetState,\r\n          message: `State field \"${fieldName}\" is mutated outside setState()`,\r\n          suggestion: 'Always use setState() to update state fields',\r\n        });\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Check if field is used anywhere\r\n   */\r\n  fieldIsUsed(fieldName, stateClassName) {\r\n    // Check if read in build\r\n    const stateClass = this.stateClasses.get(stateClassName);\r\n    if (!stateClass) return false;\r\n\r\n    const buildMethod = stateClass.astNode.body.methods.find(\r\n      (m) => m.key.name === 'build'\r\n    );\r\n\r\n    if (buildMethod && this.methodUsesField(buildMethod, fieldName)) {\r\n      return true;\r\n    }\r\n\r\n    // Check if modified in setState\r\n    return this.setStateCalls.some((call) => call.updates.includes(fieldName));\r\n  }\r\n\r\n  /**\r\n   * Find mutations outside setState\r\n   */\r\n  findMutationsOutsideSetState(fieldName, stateClassName) {\r\n    const locations = [];\r\n    const inSetState = new Set();\r\n\r\n    // Collect all fields modified in setState\r\n    this.setStateCalls.forEach((call) => {\r\n      call.updates.forEach((field) => {\r\n        inSetState.add(field);\r\n      });\r\n    });\r\n\r\n    // If field is only in setState, it's good\r\n    if (!inSetState.has(fieldName)) {\r\n      return locations;\r\n    }\r\n\r\n    // For now, we assume mutations are only through setState\r\n    // In a full implementation, you'd scan all methods for direct assignments\r\n    return locations;\r\n  }\r\n\r\n  /**\r\n   * Validate lifecycle patterns\r\n   */\r\n  validateLifecyclePatterns() {\r\n    this.stateClasses.forEach(({ metadata }) => {\r\n      const methodMap = {};\r\n\r\n      metadata.lifecycleMethods.forEach((method) => {\r\n        methodMap[method.name] = method;\r\n      });\r\n\r\n      // dispose should call super.dispose\r\n      if (methodMap.dispose && !methodMap.dispose.callsSuper) {\r\n        this.validationResults.push({\r\n          type: 'lifecycle-issue',\r\n          severity: 'error',\r\n          method: 'dispose',\r\n          location: methodMap.dispose.location,\r\n          message: 'dispose() should call super.dispose()',\r\n          suggestion: 'Add super.dispose() call at the end of dispose()',\r\n        });\r\n      }\r\n\r\n      // initState should call super.initState\r\n      if (methodMap.initState && !methodMap.initState.callsSuper) {\r\n        this.validationResults.push({\r\n          type: 'lifecycle-issue',\r\n          severity: 'warning',\r\n          method: 'initState',\r\n          location: methodMap.initState.location,\r\n          message: 'initState() should call super.initState()',\r\n          suggestion: 'Add super.initState() call',\r\n        });\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Validate event handlers\r\n   */\r\n  validateEventHandlers() {\r\n    this.eventHandlers.forEach((handler) => {\r\n      // Check if handler method exists\r\n      const handlerExists = this.stateClasses.values().some((sc) => {\r\n        return sc.metadata.stateFields.some((f) => f.name === handler.handler) ||\r\n          sc.astNode.body.methods.some((m) => m.key.name === handler.handler);\r\n      });\r\n\r\n      if (!handlerExists && handler.handler) {\r\n        this.validationResults.push({\r\n          type: 'missing-handler',\r\n          severity: 'error',\r\n          handler: handler.handler,\r\n          event: handler.event,\r\n          location: handler.location,\r\n          message: `Event handler \"${handler.handler}\" not found`,\r\n          suggestion: `Create a method called ${handler.handler} in the State class`,\r\n        });\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Get final results\r\n   */\r\n  getResults() {\r\n    return {\r\n      stateClasses: Array.from(this.stateClasses.entries()).map(([name, data]) => ({\r\n        name,\r\n        metadata: data.metadata,\r\n      })),\r\n      stateFields: Array.from(this.stateFields.values()),\r\n      setStateCalls: this.setStateCalls,\r\n      lifecycleMethods: this.lifecycleMethods,\r\n      eventHandlers: this.eventHandlers,\r\n      dependencyGraph: this.dependencyGraph,\r\n      validationResults: this.validationResults,\r\n      errors: this.errors,\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// DATA CLASSES\r\n// ============================================================================\r\n\r\nclass StateClassMetadata {\r\n  constructor(name, location, linkedStatefulWidget) {\r\n    this.name = name;\r\n    this.location = location;\r\n    this.linkedStatefulWidget = linkedStatefulWidget;\r\n    this.stateFields = [];\r\n    this.lifecycleMethods = [];\r\n    this.methods = [];\r\n  }\r\n}\r\n\r\nclass StateField {\r\n  constructor(name, type, initialValue, location) {\r\n    this.name = name;\r\n    this.type = type;\r\n    this.initialValue = initialValue;\r\n    this.location = location;\r\n    this.isMutable = true;\r\n    this.mutations = [];\r\n    this.usedInMethods = [];\r\n    this.usedInBuild = false;\r\n  }\r\n}\r\n\r\nclass LifecycleMethod {\r\n  constructor(name, location, params, callsSuper, hasSideEffects) {\r\n    this.name = name;\r\n    this.location = location;\r\n    this.params = params;\r\n    this.callsSuper = callsSuper;\r\n    this.hasSideEffects = hasSideEffects;\r\n  }\r\n}\r\n\r\nclass StateUpdateCall {\r\n  constructor(location, method, updates, stateClassName) {\r\n    this.location = location;\r\n    this.method = method;\r\n    this.updates = updates || [];\r\n    this.stateClassName = stateClassName;\r\n    this.isValid = true;\r\n    this.issues = [];\r\n  }\r\n}\r\n\r\nclass DependencyGraph {\r\n  constructor() {\r\n    this.stateToMethods = new Map();\r\n    this.methodToState = new Map();\r\n    this.eventToState = new Map();\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport {\r\n  StateAnalyzer,\r\n  StateClassMetadata,\r\n  StateField,\r\n  LifecycleMethod,\r\n  StateUpdateCall,\r\n  DependencyGraph,\r\n};"],
+  "mappings": "AAYA,MAAMA,CAAc,CAClB,YAAYC,EAAKC,EAASC,EAAU,CAAC,EAAG,CACtC,KAAK,IAAMF,EACX,KAAK,QAAUC,EACf,KAAK,QAAU,CACb,OAAQ,GACR,GAAGC,CACL,EAGA,KAAK,aAAe,IAAI,IACxB,KAAK,YAAc,IAAI,IACvB,KAAK,cAAgB,CAAC,EACtB,KAAK,iBAAmB,CAAC,EACzB,KAAK,cAAgB,CAAC,EACtB,KAAK,gBAAkB,KACvB,KAAK,kBAAoB,CAAC,EAC1B,KAAK,OAAS,CAAC,CACjB,CAKA,SAAU,CACR,GAAI,CAAC,KAAK,KAAO,CAAC,KAAK,IAAI,KACzB,MAAM,IAAI,MAAM,sBAAsB,EAGxC,GAAI,CAEF,YAAK,oBAAoB,EAGzB,KAAK,mBAAmB,EAGxB,KAAK,kBAAkB,EAGvB,KAAK,wBAAwB,EAG7B,KAAK,qBAAqB,EAG1B,KAAK,qBAAqB,EAG1B,KAAK,cAAc,EAEZ,KAAK,WAAW,CACzB,OAASC,EAAO,CACd,YAAK,OAAO,KAAKA,CAAK,EACf,KAAK,WAAW,CACzB,CACF,CAQA,qBAAsB,CACpB,KAAK,QAAQ,QAASC,GAAW,CAC/B,GAAIA,EAAO,OAAS,WAAY,OAOhC,GAAI,CAJsBA,EAAO,QAAQ,KACtCC,GAAMA,EAAE,OAAS,aACpB,EAEwB,CACtB,KAAK,OAAO,KAAK,CACf,KAAM,uBACN,OAAQD,EAAO,KACf,QAAS,mBAAmBA,EAAO,IAAI,+BACzC,CAAC,EACD,MACF,CAGA,MAAME,EAAa,KAAK,IAAI,KAAK,KAC9BC,GAAMA,EAAE,OAAS,oBAAsBA,EAAE,GAAG,OAASH,EAAO,IAC/D,EAEA,GAAI,CAACE,EAAY,OAGjB,MAAME,EAAkBF,EAAW,KAAK,QAAQ,KAC7CD,GAAMA,EAAE,IAAI,OAAS,aACxB,EAEA,GAAI,CAACG,EAAiB,OAGtB,MAAMC,EAAiB,KAAK,yBAAyBD,EAAgB,IAAI,EAEzE,GAAI,CAACC,EAAgB,CACnB,KAAK,OAAO,KAAK,CACf,KAAM,4BACN,OAAQL,EAAO,KACf,QAAS,qDAAqDA,EAAO,IAAI,gBAC3E,CAAC,EACD,MACF,CAGA,MAAMM,EAAiB,KAAK,IAAI,KAAK,KAClCH,GAAMA,EAAE,OAAS,oBAAsBA,EAAE,GAAG,OAASE,CACxD,EAEA,GAAI,CAACC,EAAgB,CACnB,KAAK,OAAO,KAAK,CACf,KAAM,sBACN,OAAQN,EAAO,KACf,WAAYK,EACZ,QAAS,gBAAgBA,CAAc,aACzC,CAAC,EACD,MACF,CAGA,GAAI,CAACC,EAAe,YAAc,CAACA,EAAe,WAAW,KAAK,WAAW,OAAO,EAAG,CACrF,KAAK,OAAO,KAAK,CACf,KAAM,sBACN,WAAYD,EACZ,QAAS,UAAUA,CAAc,yBACnC,CAAC,EACD,MACF,CAGA,MAAME,EAAgB,IAAIC,EACxBH,EACAC,EAAe,SACfN,EAAO,IACT,EAEA,KAAK,aAAa,IAAIK,EAAgB,CACpC,QAASC,EACT,SAAUC,CACZ,CAAC,EAGDP,EAAO,iBAAmBK,CAC5B,CAAC,CACH,CAMA,yBAAyBI,EAAY,CACnC,GAAI,CAACA,EAAY,OAAO,KAGxB,GAAIA,EAAW,OAAS,kBAAoBA,EAAW,MACrD,UAAWC,KAAQD,EAAW,KAC5B,GAAIC,EAAK,OAAS,mBAAqBA,EAAK,SAAU,CACpD,MAAMC,EAAY,KAAK,2BAA2BD,EAAK,QAAQ,EAC/D,GAAIC,EAAW,OAAOA,CACxB,EAKJ,OAAIF,EAAW,OAAS,gBACfA,EAAW,OAAO,KAGpB,IACT,CAKA,2BAA2BG,EAAM,CAC/B,OAAKA,EAEDA,EAAK,OAAS,iBAAmBA,EAAK,OACjCA,EAAK,OAAO,KAGjBA,EAAK,OAAS,aACTA,EAAK,KAGVA,EAAK,OAAS,kBAAoBA,EAAK,QACrCA,EAAK,OAAO,OAAS,aAChBA,EAAK,OAAO,KAIhB,KAhBW,IAiBpB,CAQA,oBAAqB,CACnB,KAAK,aAAa,QAAQ,CAAC,CAAE,QAAAC,EAAS,SAAAC,CAAS,IAAM,CAC/C,CAACD,EAAQ,MAAQ,CAACA,EAAQ,KAAK,QAEnCA,EAAQ,KAAK,OAAO,QAASE,GAAU,CACrC,MAAMC,EAAYD,EAAM,IAAI,KACtBE,EAAeF,EAAM,aAGrBG,EAAO,KAAK,eAAeD,CAAY,EAEvCE,EAAa,IAAIC,EACrBJ,EACAE,EACA,KAAK,kBAAkBD,CAAY,EACnCA,EAAeA,EAAa,SAAWF,EAAM,QAC/C,EAGA,KAAK,YAAY,IAAI,GAAGD,EAAS,IAAI,IAAIE,CAAS,GAAIG,CAAU,EAChEL,EAAS,YAAY,KAAKK,CAAU,CACtC,CAAC,CACH,CAAC,CACH,CAKA,eAAeP,EAAM,CACnB,GAAI,CAACA,EAAM,MAAO,MAElB,GAAIA,EAAK,OAAS,UAAW,CAC3B,GAAI,OAAOA,EAAK,OAAU,SAAU,MAAO,SAC3C,GAAI,OAAOA,EAAK,OAAU,SAAU,MAAO,SAC3C,GAAI,OAAOA,EAAK,OAAU,UAAW,MAAO,UAC5C,GAAIA,EAAK,QAAU,KAAM,MAAO,MAClC,CAEA,GAAIA,EAAK,OAAS,aAAc,CAC9B,MAAMS,EAAOT,EAAK,KAClB,GAAIS,IAAS,QAAUA,IAAS,QAAS,MAAO,UAChD,GAAIA,IAAS,OAAQ,MAAO,OAC5B,GAAIA,IAAS,YAAa,MAAO,WACnC,CAGA,OAAIT,EAAK,OAAS,eAAuB,QAGrCA,EAAK,OAAS,gBAAwB,UAGtCA,EAAK,OAAS,iBAAyB,MAG7C,CAKA,kBAAkBA,EAAM,CACtB,GAAKA,EAEL,IAAIA,EAAK,OAAS,UAChB,OAAOA,EAAK,MAGd,GAAIA,EAAK,OAAS,aAAc,CAC9B,MAAMS,EAAOT,EAAK,KAClB,GAAIS,IAAS,OAAQ,MAAO,GAC5B,GAAIA,IAAS,QAAS,MAAO,GAC7B,GAAIA,IAAS,OAAQ,OAAO,KAC5B,GAAIA,IAAS,YAAa,MAC5B,EAGF,CAKA,mBAAoB,CAClB,KAAK,aAAa,QAAQ,CAAC,CAAE,QAAAR,EAAS,SAAAC,CAAS,IAAM,CAC/C,CAACD,EAAQ,MAAQ,CAACA,EAAQ,KAAK,SAGnCA,EAAQ,KAAK,QAAQ,QAASS,GAAW,CACvC,MAAMC,EAAgB,KAAK,qBAAqBD,EAAQR,EAAS,IAAI,EACrE,KAAK,cAAc,KAAK,GAAGS,CAAa,CAC1C,CAAC,CACH,CAAC,CACH,CAKA,qBAAqBD,EAAQjB,EAAgB,CAC3C,MAAMmB,EAAQ,CAAC,EACTC,EAAaH,EAAO,IAAI,KAG9B,OAAIA,EAAO,OACKA,EAAO,KAAK,OAAS,iBAC/BA,EAAO,KAAK,KACZ,CAACA,EAAO,IAAI,GAEV,QAASZ,GAAS,CACtB,KAAK,wBAAwBA,EAAMc,EAAOC,EAAYpB,CAAc,CACtE,CAAC,EAGImB,CACT,CAKA,wBAAwBd,EAAMc,EAAOC,EAAYpB,EAAgB,CAC1DK,IAGDA,EAAK,OAAS,uBAAyBA,EAAK,YAC9C,KAAK,yBAAyBA,EAAK,WAAYc,EAAOC,EAAYpB,CAAc,EAI9EK,EAAK,OAAS,mBAAqBA,EAAK,UAC1C,KAAK,yBAAyBA,EAAK,SAAUc,EAAOC,EAAYpB,CAAc,EAI5EK,EAAK,OAAS,kBAAoBA,EAAK,MACzCA,EAAK,KAAK,QAASgB,GAAM,CACvB,KAAK,wBAAwBA,EAAGF,EAAOC,EAAYpB,CAAc,CACnE,CAAC,EAEL,CAKA,yBAAyBO,EAAMY,EAAOC,EAAYpB,EAAgB,CAChE,GAAKO,EAGL,IAAIA,EAAK,OAAS,iBAAkB,CAIlC,GAFmB,KAAK,eAAeA,CAAI,EAE3B,CACd,MAAMe,EAAgB,KAAK,uBAAuBf,EAAMP,CAAc,EAChEuB,EAAO,IAAIC,EACfjB,EAAK,SACLa,EACAE,EACAtB,CACF,EACAmB,EAAM,KAAKI,CAAI,CACjB,CAGAhB,EAAK,KAAK,QAASkB,GAAQ,CACzB,KAAK,yBAAyBA,EAAKN,EAAOC,EAAYpB,CAAc,CACtE,CAAC,CACH,CAGIO,EAAK,OAAS,iBAAmBA,EAAK,YACxCA,EAAK,WAAW,QAASmB,GAAS,CAChC,KAAK,yBAAyBA,EAAK,MAAOP,EAAOC,EAAYpB,CAAc,CAC7E,CAAC,EAEL,CAKA,eAAeO,EAAM,CAEnB,GADIA,EAAK,OAAS,kBACd,CAACA,EAAK,OAAQ,MAAO,GAGzB,GAAIA,EAAK,OAAO,OAAS,mBAAoB,CAC3C,MAAMoB,EAAMpB,EAAK,OAAO,OAClBmB,EAAOnB,EAAK,OAAO,SAGzB,GAAIoB,EAAI,OAAS,cAAgBA,EAAI,OAAS,QAC5CD,EAAK,OAAS,cAAgBA,EAAK,OAAS,WAC5C,MAAO,EAEX,CAEA,MAAO,EACT,CAMA,uBAAuBE,EAAc5B,EAAgB,CACnD,MAAM6B,EAAU,CAAC,EAEjB,GAAI,CAACD,EAAa,MAAQA,EAAa,KAAK,SAAW,EAAG,OAAOC,EAGjE,MAAMC,EAAWF,EAAa,KAAK,CAAC,EAEpC,GAAIE,EAAS,OAAS,0BAA2B,CAE/C,MAAMC,EAAOD,EAAS,KAEtB,GAAIC,EAAK,OAAS,kBAAoBA,EAAK,KAEzCA,EAAK,KAAK,QAAS1B,GAAS,CAC1B,MAAM2B,EAAU,KAAK,qBAAqB3B,EAAML,CAAc,EAC9D6B,EAAQ,KAAK,GAAGG,CAAO,CACzB,CAAC,UACQD,EAAK,OAAS,oBAAsBA,EAAK,OAAS,uBAAwB,CAEnF,MAAMC,EAAU,KAAK,qBAAqBD,EAAM/B,CAAc,EAC9D6B,EAAQ,KAAK,GAAGG,CAAO,CACzB,CACF,CAEA,MAAO,CAAC,GAAG,IAAI,IAAIH,CAAO,CAAC,CAC7B,CAMA,qBAAqBxB,EAAML,EAAgB,CACzC,MAAMiC,EAAS,CAAC,EAEhB,GAAI,CAAC5B,EAAM,OAAO4B,EAGlB,GAAI5B,EAAK,OAAS,uBAAyBA,EAAK,WAAY,CAC1D,MAAME,EAAOF,EAAK,WAElB,GAAIE,EAAK,OAAS,uBAAwB,CACxC,MAAMI,EAAY,KAAK,uBAAuBJ,EAAK,IAAI,EACnDI,GAAWsB,EAAO,KAAKtB,CAAS,CACtC,CAGA,GAAIJ,EAAK,OAAS,mBAAoB,CACpC,MAAMI,EAAY,KAAK,uBAAuBJ,EAAK,QAAQ,EACvDI,GAAWsB,EAAO,KAAKtB,CAAS,CACtC,CACF,CAGA,GAAIN,EAAK,OAAS,uBAAwB,CACxC,MAAMM,EAAY,KAAK,uBAAuBN,EAAK,IAAI,EACnDM,GAAWsB,EAAO,KAAKtB,CAAS,CACtC,CAEA,GAAIN,EAAK,OAAS,mBAAoB,CACpC,MAAMM,EAAY,KAAK,uBAAuBN,EAAK,QAAQ,EACvDM,GAAWsB,EAAO,KAAKtB,CAAS,CACtC,CAEA,OAAOsB,CACT,CAMA,uBAAuBC,EAAQ,CAC7B,GAAI,CAACA,EAAQ,OAAO,KAGpB,GAAIA,EAAO,OAAS,mBAAoB,CACtC,MAAMP,EAAMO,EAAO,OACbR,EAAOQ,EAAO,SAGpB,GAAIP,EAAI,OAAS,cAAgBA,EAAI,OAAS,QAC5CD,EAAK,OAAS,aACd,OAAOA,EAAK,IAEhB,CAGA,OAAIQ,EAAO,OAAS,aACXA,EAAO,KAGT,IACT,CAOA,yBAA0B,CACxB,MAAMC,EAAiB,CAAC,YAAa,UAAW,kBAAmB,OAAO,EAE1E,KAAK,aAAa,QAAQ,CAAC,CAAE,QAAA3B,EAAS,SAAAC,CAAS,IAAM,CAC/C,CAACD,EAAQ,MAAQ,CAACA,EAAQ,KAAK,SAEnCA,EAAQ,KAAK,QAAQ,QAASS,GAAW,CACvC,MAAMG,EAAaH,EAAO,IAAI,KAE9B,GAAIkB,EAAe,SAASf,CAAU,EAAG,CACvC,MAAMgB,EAAY,IAAIC,EACpBjB,EACAH,EAAO,SACPA,EAAO,QAAU,CAAC,EAClB,KAAK,gBAAgBA,CAAM,EAC3B,KAAK,oBAAoBA,CAAM,CACjC,EAEA,KAAK,iBAAiB,KAAKmB,CAAS,EACpC3B,EAAS,iBAAiB,KAAK2B,CAAS,CAC1C,CACF,CAAC,CACH,CAAC,CACH,CAKA,gBAAgBnB,EAAQ,CACtB,GAAI,CAACA,EAAO,KAAM,MAAO,GAEzB,MAAMqB,EAAQrB,EAAO,KAAK,OAAS,iBAC/BA,EAAO,KAAK,KACZ,CAACA,EAAO,IAAI,EAEhB,UAAWZ,KAAQiC,EACjB,GAAIjC,EAAK,OAAS,uBAAyBA,EAAK,WAAY,CAC1D,MAAME,EAAOF,EAAK,WAGlB,GAAIE,EAAK,OAAS,kBAAoBA,EAAK,OAAO,OAAS,mBAAoB,CAC7E,MAAMoB,EAAMpB,EAAK,OAAO,OAClBmB,EAAOnB,EAAK,OAAO,SAEzB,GAAIoB,EAAI,OAAS,cAAgBA,EAAI,OAAS,SAC5CD,EAAK,OAAS,cAAgBA,EAAK,OAAST,EAAO,IAAI,KACvD,MAAO,EAEX,CACF,CAGF,MAAO,EACT,CAKA,oBAAoBA,EAAQ,CAC1B,GAAI,CAACA,EAAO,KAAM,MAAO,GAEzB,MAAMqB,EAAQrB,EAAO,KAAK,OAAS,iBAC/BA,EAAO,KAAK,KACZ,CAACA,EAAO,IAAI,EAEhB,UAAWZ,KAAQiC,EAEjB,GAAIjC,EAAK,OAAS,uBAAyBA,EAAK,WAAY,CAC1D,MAAME,EAAOF,EAAK,WAOlB,GALIE,EAAK,OAAS,wBAA0BA,EAAK,OAAS,oBAKtDA,EAAK,OAAS,iBAChB,MAAO,EAEX,CAGF,MAAO,EACT,CAOA,sBAAuB,CACrB,KAAK,aAAa,QAAQ,CAAC,CAAE,QAAAC,EAAS,SAAAC,CAAS,IAAM,CACnD,GAAI,CAACD,EAAQ,MAAQ,CAACA,EAAQ,KAAK,QAAS,OAG5C,MAAM+B,EAAc/B,EAAQ,KAAK,QAAQ,KAAMZ,GAAMA,EAAE,IAAI,OAAS,OAAO,EAC3E,GAAI,CAAC2C,EAAa,OAGlB,MAAMC,EAAW,KAAK,0BAA0BD,EAAa9B,EAAS,IAAI,EAC1E,KAAK,cAAc,KAAK,GAAG+B,CAAQ,CACrC,CAAC,CACH,CAKA,0BAA0BvB,EAAQjB,EAAgB,CAChD,MAAMwC,EAAW,CAAC,EAElB,OAAKvB,EAAO,OAEEA,EAAO,KAAK,OAAS,iBAC/BA,EAAO,KAAK,KACZ,CAACA,EAAO,IAAI,GAEV,QAASZ,GAAS,CACtB,KAAK,6BAA6BA,EAAMmC,EAAUxC,CAAc,CAClE,CAAC,EAEMwC,CACT,CAKA,6BAA6BnC,EAAMmC,EAAUxC,EAAgB,CACtDK,IAEDA,EAAK,OAAS,uBAAyBA,EAAK,YAC9C,KAAK,8BAA8BA,EAAK,WAAYmC,EAAUxC,CAAc,EAG1EK,EAAK,OAAS,mBAAqBA,EAAK,UAC1C,KAAK,8BAA8BA,EAAK,SAAUmC,EAAUxC,CAAc,EAGxEK,EAAK,OAAS,kBAAoBA,EAAK,MACzCA,EAAK,KAAK,QAASgB,GAAM,CACvB,KAAK,6BAA6BA,EAAGmB,EAAUxC,CAAc,CAC/D,CAAC,EAEL,CAMA,8BAA8BO,EAAMiC,EAAUxC,EAAgB,CACvDO,IAGDA,EAAK,OAAS,iBAAmBA,EAAK,YACxCA,EAAK,WAAW,QAASmB,GAAS,CAEhC,MAAMe,EAAY,KAAK,eAAef,EAAK,GAAG,EAG9C,GAFqB,WAEJ,KAAKe,CAAS,EAAG,CAEhC,MAAMC,EAAU,KAAK,oBAAoBhB,EAAK,MAAO1B,CAAc,EAE/D0C,GACFF,EAAS,KAAK,CACZ,MAAOC,EACP,QAASC,EACT,SAAUhB,EAAK,SACf,UAAW,KAAK,4BAA4BnB,CAAI,CAClD,CAAC,CAEL,CAGA,KAAK,8BAA8BmB,EAAK,MAAOc,EAAUxC,CAAc,CACzE,CAAC,EAICO,EAAK,OAAS,kBAAoBA,EAAK,MACzCA,EAAK,KAAK,QAASkB,GAAQ,CACzB,KAAK,8BAA8BA,EAAKe,EAAUxC,CAAc,CAClE,CAAC,EAICO,EAAK,OAAS,iBAAmBA,EAAK,MACxCA,EAAK,KAAK,QAASkB,GAAQ,CACzB,KAAK,8BAA8BA,EAAKe,EAAUxC,CAAc,CAClE,CAAC,EAEL,CAKA,eAAe2C,EAAS,CACtB,OAAKA,EAEDA,EAAQ,OAAS,aACZA,EAAQ,KAGbA,EAAQ,OAAS,UACZ,OAAOA,EAAQ,KAAK,EAGtB,KAVc,IAWvB,CAMA,oBAAoBC,EAAO5C,EAAgB,CACzC,GAAI,CAAC4C,EAAO,OAAO,KAGnB,GAAIA,EAAM,OAAS,0BAA2B,CAC5C,GAAIA,EAAM,KAAK,OAAS,iBAEtB,OADoB,KAAK,2BAA2BA,EAAM,KAAK,MAAM,EAKvE,GAAIA,EAAM,KAAK,OAAS,aACtB,OAAOA,EAAM,KAAK,IAEtB,CAGA,OAAIA,EAAM,OAAS,aACVA,EAAM,KAIXA,EAAM,OAAS,oBACbA,EAAM,SAAS,OAAS,aACnBA,EAAM,SAAS,KAInB,IACT,CAKA,4BAA4BrC,EAAM,CAGhC,OAAIA,EAAK,OAAS,kBAAoBA,EAAK,OAClC,KAAK,2BAA2BA,EAAK,MAAM,EAG7C,SACT,CAUA,sBAAuB,CACrB,KAAK,gBAAkB,IAAIsC,EAG3B,KAAK,YAAY,QAAQ,CAACnC,EAAOoC,IAAQ,CACvC,MAAMC,EAAU,KAAK,sBAAsBrC,EAAM,IAAI,EACjDqC,EAAQ,OAAS,GACnB,KAAK,gBAAgB,eAAe,IAAIrC,EAAM,KAAMqC,CAAO,CAE/D,CAAC,EAGD,KAAK,aAAa,QAAQ,CAAC,CAAE,SAAAtC,CAAS,IAAM,CAC1CA,EAAS,YAAY,QAASC,GAAU,CACtC,MAAMsC,EAAe,KAAK,wBAAwBvC,EAAS,KAAMC,EAAM,IAAI,EACvEsC,EAAa,OAAS,GACxB,KAAK,gBAAgB,cAAc,IAAItC,EAAM,KAAMsC,CAAY,CAEnE,CAAC,CACH,CAAC,EAGD,KAAK,cAAc,QAASC,GAAU,CACpC,MAAMC,EAAe,KAAK,yBAAyBD,EAAM,OAAO,EAC5DC,EAAa,OAAS,GACxB,KAAK,gBAAgB,aAAa,IAAID,EAAM,MAAOC,CAAY,CAEnE,CAAC,CACH,CAKA,sBAAsBvC,EAAW,CAC/B,MAAMoC,EAAU,IAAI,IAEpB,YAAK,cAAc,QAASxB,GAAS,CAC/BA,EAAK,QAAQ,SAASZ,CAAS,GACjCoC,EAAQ,IAAIxB,EAAK,MAAM,CAE3B,CAAC,EAGD,KAAK,aAAa,QAAQ,CAAC,CAAE,QAAAf,EAAS,SAAAC,CAAS,IAAM,CACnD,GAAI,CAACD,EAAQ,MAAQ,CAACA,EAAQ,KAAK,QAAS,OAE5C,MAAM+B,EAAc/B,EAAQ,KAAK,QAAQ,KAAMZ,GAAMA,EAAE,IAAI,OAAS,OAAO,EACvE2C,GAAe,KAAK,gBAAgBA,EAAa5B,CAAS,GAC5DoC,EAAQ,IAAI,OAAO,CAEvB,CAAC,EAEM,MAAM,KAAKA,CAAO,CAC3B,CAKA,gBAAgB9B,EAAQN,EAAW,CACjC,GAAI,CAACM,EAAO,KAAM,MAAO,GAEzB,MAAMqB,EAAQrB,EAAO,KAAK,OAAS,iBAC/BA,EAAO,KAAK,KACZ,CAACA,EAAO,IAAI,EAEhB,UAAWZ,KAAQiC,EACjB,GAAI,KAAK,mBAAmBjC,EAAMM,CAAS,EACzC,MAAO,GAIX,MAAO,EACT,CAKA,mBAAmBN,EAAMM,EAAW,CAClC,OAAKN,EAGQ,KAAK,UAAUA,CAAI,EACpB,SAASM,CAAS,EAJZ,EAKpB,CAKA,wBAAwBX,EAAgBW,EAAW,CACjD,MAAMoC,EAAU,CAAC,EAEjB,YAAK,aAAa,QAAQ,CAAC,CAAE,SAAAtC,CAAS,IAAM,CACtCA,EAAS,OAAST,GAEtBS,EAAS,YAAY,QAASC,GAAU,CAClCA,EAAM,OAASC,GACjBoC,EAAQ,KAAK,GAAGrC,EAAM,aAAa,CAEvC,CAAC,CACH,CAAC,EAEMqC,CACT,CAKA,yBAAyB3B,EAAY,CACnC,MAAM+B,EAAU,IAAI,IAEpB,YAAK,cAAc,QAAS5B,GAAS,CAC/BA,EAAK,SAAWH,GAClBG,EAAK,QAAQ,QAAS6B,GAAWD,EAAQ,IAAIC,CAAM,CAAC,CAExD,CAAC,EAEM,MAAM,KAAKD,CAAO,CAC3B,CAKA,eAAgB,CACd,KAAK,yBAAyB,EAC9B,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,EAC/B,KAAK,sBAAsB,CAC7B,CAKA,0BAA2B,CACzB,KAAK,cAAc,QAAS5B,GAAS,CACnC,MAAM8B,EAAS,CAAC,EAGG,KAAK,aAAa,IAAI9B,EAAK,cAAc,GAE1D8B,EAAO,KAAK,CACV,KAAM,kBACN,QAAS,8BAA8B9B,EAAK,cAAc,EAC5D,CAAC,EAICA,EAAK,QAAQ,SAAW,GAC1B8B,EAAO,KAAK,CACV,KAAM,eACN,QAAS,wCACT,SAAU,SACZ,CAAC,EAGH9B,EAAK,QAAQ,QAASb,GAAU,CACzB,KAAK,YAAY,IAAI,GAAGa,EAAK,cAAc,IAAIb,CAAK,EAAE,GACzD2C,EAAO,KAAK,CACV,KAAM,gBACN,QAAS,mCAAmC3C,CAAK,IACjD,MAAAA,CACF,CAAC,CAEL,CAAC,EAGDa,EAAK,QAAU8B,EAAO,SAAW,EACjC9B,EAAK,OAAS8B,CAChB,CAAC,CACH,CAKA,yBAA0B,CACxB,KAAK,YAAY,QAAQ,CAAC3C,EAAOoC,IAAQ,CACvC,MAAMQ,EAAQR,EAAI,MAAM,GAAG,EACrB9C,EAAiBsD,EAAM,CAAC,EACxB3C,EAAY2C,EAAM,CAAC,EAGpB,KAAK,YAAY3C,EAAWX,CAAc,GAC7C,KAAK,kBAAkB,KAAK,CAC1B,KAAM,qBACN,SAAU,UACV,MAAOW,EACP,SAAUD,EAAM,SAChB,QAAS,gBAAgBC,CAAS,8BAClC,WAAY,4CACd,CAAC,EAIH,MAAM4C,EAA2B,KAAK,6BACpC5C,EACAX,CACF,EACIuD,EAAyB,OAAS,GACpC,KAAK,kBAAkB,KAAK,CAC1B,KAAM,4BACN,SAAU,QACV,MAAO5C,EACP,UAAW4C,EACX,QAAS,gBAAgB5C,CAAS,kCAClC,WAAY,8CACd,CAAC,CAEL,CAAC,CACH,CAKA,YAAYA,EAAWX,EAAgB,CAErC,MAAMwD,EAAa,KAAK,aAAa,IAAIxD,CAAc,EACvD,GAAI,CAACwD,EAAY,MAAO,GAExB,MAAMjB,EAAciB,EAAW,QAAQ,KAAK,QAAQ,KACjD5D,GAAMA,EAAE,IAAI,OAAS,OACxB,EAEA,OAAI2C,GAAe,KAAK,gBAAgBA,EAAa5B,CAAS,EACrD,GAIF,KAAK,cAAc,KAAMY,GAASA,EAAK,QAAQ,SAASZ,CAAS,CAAC,CAC3E,CAKA,6BAA6BA,EAAWX,EAAgB,CACtD,MAAMyD,EAAY,CAAC,EACbC,EAAa,IAAI,IAUvB,OAPA,KAAK,cAAc,QAASnC,GAAS,CACnCA,EAAK,QAAQ,QAASb,GAAU,CAC9BgD,EAAW,IAAIhD,CAAK,CACtB,CAAC,CACH,CAAC,EAGIgD,EAAW,IAAI/C,CAAS,EAMtB8C,CACT,CAKA,2BAA4B,CAC1B,KAAK,aAAa,QAAQ,CAAC,CAAE,SAAAhD,CAAS,IAAM,CAC1C,MAAMkD,EAAY,CAAC,EAEnBlD,EAAS,iBAAiB,QAASQ,GAAW,CAC5C0C,EAAU1C,EAAO,IAAI,EAAIA,CAC3B,CAAC,EAGG0C,EAAU,SAAW,CAACA,EAAU,QAAQ,YAC1C,KAAK,kBAAkB,KAAK,CAC1B,KAAM,kBACN,SAAU,QACV,OAAQ,UACR,SAAUA,EAAU,QAAQ,SAC5B,QAAS,wCACT,WAAY,kDACd,CAAC,EAICA,EAAU,WAAa,CAACA,EAAU,UAAU,YAC9C,KAAK,kBAAkB,KAAK,CAC1B,KAAM,kBACN,SAAU,UACV,OAAQ,YACR,SAAUA,EAAU,UAAU,SAC9B,QAAS,4CACT,WAAY,4BACd,CAAC,CAEL,CAAC,CACH,CAKA,uBAAwB,CACtB,KAAK,cAAc,QAASjB,GAAY,CAOlC,CALkB,KAAK,aAAa,OAAO,EAAE,KAAMkB,GAC9CA,EAAG,SAAS,YAAY,KAAMC,GAAMA,EAAE,OAASnB,EAAQ,OAAO,GACnEkB,EAAG,QAAQ,KAAK,QAAQ,KAAMhE,GAAMA,EAAE,IAAI,OAAS8C,EAAQ,OAAO,CACrE,GAEqBA,EAAQ,SAC5B,KAAK,kBAAkB,KAAK,CAC1B,KAAM,kBACN,SAAU,QACV,QAASA,EAAQ,QACjB,MAAOA,EAAQ,MACf,SAAUA,EAAQ,SAClB,QAAS,kBAAkBA,EAAQ,OAAO,cAC1C,WAAY,0BAA0BA,EAAQ,OAAO,qBACvD,CAAC,CAEL,CAAC,CACH,CAKA,YAAa,CACX,MAAO,CACL,aAAc,MAAM,KAAK,KAAK,aAAa,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC1B,EAAM8C,CAAI,KAAO,CAC3E,KAAA9C,EACA,SAAU8C,EAAK,QACjB,EAAE,EACF,YAAa,MAAM,KAAK,KAAK,YAAY,OAAO,CAAC,EACjD,cAAe,KAAK,cACpB,iBAAkB,KAAK,iBACvB,cAAe,KAAK,cACpB,gBAAiB,KAAK,gBACtB,kBAAmB,KAAK,kBACxB,OAAQ,KAAK,MACf,CACF,CACF,CAMA,MAAM3D,CAAmB,CACvB,YAAYa,EAAM+C,EAAUC,EAAsB,CAChD,KAAK,KAAOhD,EACZ,KAAK,SAAW+C,EAChB,KAAK,qBAAuBC,EAC5B,KAAK,YAAc,CAAC,EACpB,KAAK,iBAAmB,CAAC,EACzB,KAAK,QAAU,CAAC,CAClB,CACF,CAEA,MAAMjD,CAAW,CACf,YAAYC,EAAMH,EAAMD,EAAcmD,EAAU,CAC9C,KAAK,KAAO/C,EACZ,KAAK,KAAOH,EACZ,KAAK,aAAeD,EACpB,KAAK,SAAWmD,EAChB,KAAK,UAAY,GACjB,KAAK,UAAY,CAAC,EAClB,KAAK,cAAgB,CAAC,EACtB,KAAK,YAAc,EACrB,CACF,CAEA,MAAM1B,CAAgB,CACpB,YAAYrB,EAAM+C,EAAUE,EAAQC,EAAYC,EAAgB,CAC9D,KAAK,KAAOnD,EACZ,KAAK,SAAW+C,EAChB,KAAK,OAASE,EACd,KAAK,WAAaC,EAClB,KAAK,eAAiBC,CACxB,CACF,CAEA,MAAM3C,CAAgB,CACpB,YAAYuC,EAAU9C,EAAQmD,EAASpE,EAAgB,CACrD,KAAK,SAAW+D,EAChB,KAAK,OAAS9C,EACd,KAAK,QAAUmD,GAAW,CAAC,EAC3B,KAAK,eAAiBpE,EACtB,KAAK,QAAU,GACf,KAAK,OAAS,CAAC,CACjB,CACF,CAEA,MAAM6C,CAAgB,CACpB,aAAc,CACZ,KAAK,eAAiB,IAAI,IAC1B,KAAK,cAAgB,IAAI,IACzB,KAAK,aAAe,IAAI,GAC1B,CACF",
+  "names": ["StateAnalyzer", "ast", "widgets", "options", "error", "widget", "m", "widgetNode", "n", "createStateNode", "stateClassName", "stateClassNode", "stateMetadata", "StateClassMetadata", "methodBody", "stmt", "className", "expr", "astNode", "metadata", "field", "fieldName", "initialValue", "type", "stateField", "StateField", "name", "method", "setStateCalls", "calls", "methodName", "s", "updatedFields", "call", "StateUpdateCall", "arg", "prop", "obj", "setStateCall", "updated", "callback", "body", "mutated", "fields", "target", "lifecycleNames", "lifecycle", "LifecycleMethod", "stmts", "buildMethod", "handlers", "eventName", "handler", "keyExpr", "value", "DependencyGraph", "key", "methods", "methodsUsing", "event", "stateChanged", "changed", "update", "issues", "parts", "mutationsOutsideSetState", "stateClass", "locations", "inSetState", "methodMap", "sc", "f", "data", "location", "linkedStatefulWidget", "params", "callsSuper", "hasSideEffects", "updates"]
+}
diff --git a/packages/flutterjs_analyzer/flutterjs_analyzer/package.json b/packages/flutterjs_analyzer/flutterjs_analyzer/package.json
new file mode 100644
index 00000000..2cbd0b89
--- /dev/null
+++ b/packages/flutterjs_analyzer/flutterjs_analyzer/package.json
@@ -0,0 +1,55 @@
+{
+    "name": "@flutterjs/analyzer",
+    "version": "1.0.0",
+    "description": "Flutter widget analyzer in JavaScript",
+    "type": "module",
+    "main": "./dist/analyzer.js",
+    "exports": {
+        "./analyzer": "./dist/analyzer.js",
+        "./context_analyzer_data": "./dist/context_analyzer_data.js",
+        "./context_analyzer": "./dist/context_analyzer.js",
+        "./flutter_import_resolver": "./dist/flutter_import_resolver.js",
+        "./flutter_resolver_config": "./dist/flutter_resolver_config.js",
+        "./flutterjs_logger": "./dist/flutterjs_logger.js",
+        "./flutterjs_parser": "./dist/flutterjs_parser.js",
+        "./flutterjs_report_generator": "./dist/flutterjs_report_generator.js",
+        "./flutterjs_widget_analyzer": "./dist/flutterjs_widget_analyzer.js",
+        "./lexer": "./dist/lexer.js",
+        "./ssr_analyzer": "./dist/ssr_analyzer.js",
+        "./state_analyzer_data": "./dist/state_analyzer_data.js",
+        "./state_analyzer_implementation": "./dist/state_analyzer_implementation.js"
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "node build.js",
+        "run:lexer": "node lexer.js",
+        "test": "node test/runner.js",
+        "test:lexer": "node test/lexer.test.js",
+        "test:parser": "node test/parser.test.js",
+        "test:analyzer": "node test/widget-analyzer.test.js",
+        "test:import": "node test/import_resolver.test.js",
+        "test:all": "npm run test:lexer && npm run test:parser && npm run test:analyzer",
+        "test:watch": "node test/runner.js --watch"
+    },
+    "keywords": [
+        "flutter",
+        "analyzer",
+        "dart",
+        "widget",
+        "parser",
+        "javascript"
+    ],
+    "dependencies": {
+        "@flutterjs/runtime": "file:../../flutterjs_runtime/flutterjs_runtime",
+        "@flutterjs/vdom": "file:../../flutterjs_vdom/flutterjs_vdom",
+        "@flutterjs/material": "file:../../flutterjs_material/flutterjs_material"
+    },
+    "author": "jayprakash.pal@flutterjs.dev",
+    "license": "MIT",
+    "devDependencies": {
+        "esbuild": "^0.27.2",
+        "jest": "^29.7.0"
+    }
+}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/analyzer/src/analyzer.js b/packages/flutterjs_analyzer/flutterjs_analyzer/src/analyzer.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/src/analyzer.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/src/analyzer.js
diff --git a/packages/flutterjs_engine/src/analyzer/src/context_analyzer.js b/packages/flutterjs_analyzer/flutterjs_analyzer/src/context_analyzer.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/src/context_analyzer.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/src/context_analyzer.js
diff --git a/packages/flutterjs_engine/src/analyzer/src/context_analyzer_data.js b/packages/flutterjs_analyzer/flutterjs_analyzer/src/context_analyzer_data.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/src/context_analyzer_data.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/src/context_analyzer_data.js
diff --git a/packages/flutterjs_engine/src/analyzer/src/flutter_import_resolver.js b/packages/flutterjs_analyzer/flutterjs_analyzer/src/flutter_import_resolver.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/src/flutter_import_resolver.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/src/flutter_import_resolver.js
diff --git a/packages/flutterjs_engine/src/analyzer/src/flutter_resolver_config.js b/packages/flutterjs_analyzer/flutterjs_analyzer/src/flutter_resolver_config.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/src/flutter_resolver_config.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/src/flutter_resolver_config.js
diff --git a/packages/flutterjs_engine/src/analyzer/src/flutterjs_logger.js b/packages/flutterjs_analyzer/flutterjs_analyzer/src/flutterjs_logger.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/src/flutterjs_logger.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/src/flutterjs_logger.js
diff --git a/packages/flutterjs_analyzer/flutterjs_analyzer/src/flutterjs_parser.js b/packages/flutterjs_analyzer/flutterjs_analyzer/src/flutterjs_parser.js
new file mode 100644
index 00000000..639088d8
--- /dev/null
+++ b/packages/flutterjs_analyzer/flutterjs_analyzer/src/flutterjs_parser.js
@@ -0,0 +1,1486 @@
+/**
+ * FlutterJS Parser - Converts tokens to AST (FIXED VERSION)
+ * Phase 1.2 MVP Implementation - Complete Fixes
+ * 
+ * Final fix: parseParameterList handles UNDEFINED and NULL token types
+ */
+
+
+import { TokenType } from './lexer.js';
+import { getLogger } from './flutterjs_logger.js';
+
+// ============================================================================
+// AST NODE CLASSES
+// ============================================================================
+
+class ASTNode {
+  constructor(type, location) {
+    this.type = type;
+    this.location = location;
+  }
+}
+
+class Program extends ASTNode {
+  constructor(body = [], location = null) {
+    super('Program', location);
+    this.body = body;
+  }
+}
+
+class ImportDeclaration extends ASTNode {
+  constructor(specifiers = [], source = null, location = null) {
+    super('ImportDeclaration', location);
+    this.specifiers = specifiers;
+    this.source = source;
+  }
+}
+
+class ImportSpecifier extends ASTNode {
+  constructor(imported = null, local = null, location = null) {
+    super('ImportSpecifier', location);
+    this.imported = imported;
+    this.local = local;
+  }
+}
+
+class ClassDeclaration extends ASTNode {
+  constructor(id = null, superClass = null, body = null, location = null) {
+    super('ClassDeclaration', location);
+    this.id = id;
+    this.superClass = superClass;
+    this.body = body;
+  }
+}
+
+class ClassBody extends ASTNode {
+  constructor(fields = [], methods = [], location = null) {
+    super('ClassBody', location);
+    this.fields = fields;
+    this.methods = methods;
+  }
+}
+
+class FieldDeclaration extends ASTNode {
+  constructor(key = null, initialValue = null, location = null) {
+    super('FieldDeclaration', location);
+    this.key = key;
+    this.initialValue = initialValue;
+  }
+}
+
+class MethodDeclaration extends ASTNode {
+  constructor(key = null, params = [], body = null, location = null) {
+    super('MethodDeclaration', location);
+    this.key = key;
+    this.params = params;
+    this.body = body;
+  }
+}
+
+class Parameter extends ASTNode {
+  constructor(name = null, optional = false, defaultValue = null, location = null) {
+    super('Parameter', location);
+    this.name = name;
+    this.optional = optional;
+    this.defaultValue = defaultValue;
+  }
+}
+
+class FunctionDeclaration extends ASTNode {
+  constructor(id = null, params = [], body = null, isAsync = false, location = null) {
+    super('FunctionDeclaration', location);
+    this.id = id;
+    this.params = params;
+    this.body = body;
+    this.isAsync = isAsync;
+  }
+}
+
+class BlockStatement extends ASTNode {
+  constructor(body = [], location = null) {
+    super('BlockStatement', location);
+    this.body = body;
+  }
+}
+
+class ReturnStatement extends ASTNode {
+  constructor(argument = null, location = null) {
+    super('ReturnStatement', location);
+    this.argument = argument;
+  }
+}
+
+class ExpressionStatement extends ASTNode {
+  constructor(expression = null, location = null) {
+    super('ExpressionStatement', location);
+    this.expression = expression;
+  }
+}
+
+class Identifier extends ASTNode {
+  constructor(name = '', location = null) {
+    super('Identifier', location);
+    this.name = name;
+  }
+}
+
+class Literal extends ASTNode {
+  constructor(value = null, raw = '', type = 'string', location = null) {
+    super('Literal', location);
+    this.value = value;
+    this.raw = raw;
+    this.literalType = type;
+  }
+}
+
+class CallExpression extends ASTNode {
+  constructor(callee = null, args = [], location = null) {
+    super('CallExpression', location);
+    this.callee = callee;
+    this.args = args;
+  }
+}
+
+class NewExpression extends ASTNode {
+  constructor(callee = null, args = [], location = null) {
+    super('NewExpression', location);
+    this.callee = callee;
+    this.args = args;
+    this.isConst = false;
+  }
+}
+
+class ObjectLiteral extends ASTNode {
+  constructor(properties = [], location = null) {
+    super('ObjectLiteral', location);
+    this.properties = properties;
+  }
+}
+
+class Property extends ASTNode {
+  constructor(key = null, value = null, location = null) {
+    super('Property', location);
+    this.key = key;
+    this.value = value;
+    this.shorthand = false;
+  }
+}
+
+class ArrowFunctionExpression extends ASTNode {
+  constructor(params = [], body = null, location = null) {
+    super('ArrowFunctionExpression', location);
+    this.params = params;
+    this.body = body;
+  }
+}
+
+class MemberExpression extends ASTNode {
+  constructor(object = null, property = null, computed = false, location = null) {
+    super('MemberExpression', location);
+    this.object = object;
+    this.property = property;
+    this.computed = computed;
+  }
+}
+
+// ============================================================================
+// PARSER CLASS
+// ============================================================================
+
+class Parser {
+  constructor(tokens = [], options = {}) {
+    this.tokens = tokens;
+    this.current = 0;
+    this.errors = [];
+    this.options = { strict: false, ...options };
+    // NEW: Call stack tracking
+    this.callStack = [];
+
+    this.debugMode = true;
+  }
+
+  parse() {
+    const body = [];
+
+    while (!this.isAtEnd()) {
+      try {
+        const stmt = this.parseTopLevel();
+        if (stmt && stmt.type === 'ImportDeclaration') {
+          console.log('DEBUG - ImportDeclaration:', JSON.stringify(stmt, null, 2));
+        }
+        if (stmt) {
+          body.push(stmt);
+        }
+      } catch (error) {
+        this.errors.push(error);
+        this.synchronize();
+      }
+    }
+
+    return new Program(body);
+  }
+
+  /**
+ * Skip any comment tokens
+ * Comments should be transparent to the parser
+ */
+  skipComments() {
+    while (!this.isAtEnd() && this.check(TokenType.COMMENT)) {
+      this.advance();
+    }
+  }
+
+  /**
+   * Check if token is a comment
+   */
+  isComment() {
+    if (this.isAtEnd()) return false;
+    return this.peek().type === TokenType.COMMENT;
+  }
+
+
+  parseTopLevel() {
+    this.skipComments();  // ← ADD THIS LINE
+
+    if (this.isAtEnd()) return null;
+
+    if (this.isKeyword('import')) {
+      this.advance();
+      return this.parseImportDeclaration();
+    }
+
+    if (this.isKeyword('class')) {
+      this.advance();
+      return this.parseClassDeclaration();
+    }
+
+    if (this.isKeyword('function')) {
+      this.advance();
+      return this.parseFunctionDeclaration();
+    }
+
+    const expr = this.parseExpression();
+    this.consumeStatementEnd();
+    return new ExpressionStatement(expr, this.getLocation());
+  }
+  isKeyword(value) {
+    if (this.isAtEnd()) return false;
+    const token = this.peek();
+    return token.type === TokenType.KEYWORD && token.value === value;
+  }
+
+  isPunctuation(value) {
+    if (this.isAtEnd()) return false;
+    const token = this.peek();
+    return token.type === TokenType.PUNCTUATION && token.value === value;
+  }
+
+  isOperator(value) {
+    if (this.isAtEnd()) return false;
+    const token = this.peek();
+    return token.type === TokenType.OPERATOR && token.value === value;
+  }
+
+  /**
+ * FIXED: parseImportDeclaration() in flutterjs_parser.js
+ * Handles multi-line imports with comments and proper spacing
+ * 
+ * Replace the entire parseImportDeclaration() method with this version
+ */
+
+  parseImportDeclaration() {
+    const logger = getLogger().createComponentLogger('Parser.parseImportDeclaration');
+    logger.startSession('parseImportDeclaration');
+
+    const startLocation = this.getLocation();
+    const specifiers = [];
+
+    logger.trace(`  Starting import parse at token: ${this.peek().value}`);
+
+    // Case 1: Named imports { x, y, z }
+    if (this.isPunctuation('{')) {
+      logger.trace(`  Found opening brace, parsing named imports...`);
+      this.advance();
+
+      // ✅ FIX #1: Skip comments right after opening brace
+      this.skipComments();
+
+      while (!this.isPunctuation('}') && !this.isAtEnd()) {
+        // ✅ FIX #2: Skip comments before checking for closing brace
+        this.skipComments();
+
+        // Check if we hit the closing brace (after skipping comments)
+        if (this.isPunctuation('}')) {
+          logger.trace(`  Found closing brace, exiting loop`);
+          break;
+        }
+
+        // Expect an identifier
+        if (!this.check(TokenType.IDENTIFIER)) {
+          logger.warn(`  Expected identifier but got: ${this.peek().value}`);
+          this.advance();
+          continue;
+        }
+
+        // Get the imported name
+        const importedName = this.consume(TokenType.IDENTIFIER, 'Expected identifier').value;
+        const imported = new Identifier(importedName);
+        logger.trace(`    Imported: ${importedName}`);
+
+        let local = imported; // Default: local name = imported name
+
+        // ✅ FIX #3: Skip comments before checking for 'as'
+        this.skipComments();
+
+        // Check for 'as' alias
+        if (this.isKeyword('as')) {
+          logger.trace(`    Found 'as' keyword`);
+          this.advance();
+
+          // ✅ FIX #4: Skip comments after 'as'
+          this.skipComments();
+
+          const localName = this.consume(TokenType.IDENTIFIER, 'Expected identifier after as').value;
+          local = new Identifier(localName);
+          logger.trace(`      Local name: ${localName}`);
+        }
+
+        // Add specifier to list
+        specifiers.push(new ImportSpecifier(imported, local));
+
+        // ✅ FIX #5: Skip comments before checking for comma
+        this.skipComments();
+
+        // Check for comma separator
+        if (this.isPunctuation(',')) {
+          logger.trace(`    Found comma, continuing...`);
+          this.advance();
+
+          // ✅ FIX #6: Skip comments after comma
+          this.skipComments();
+
+          // Continue to next item
+          continue;
+        } else {
+          logger.trace(`    No comma, expected closing brace next`);
+          // No more items, should see closing brace
+          break;
+        }
+      }
+
+      logger.trace(`  Parsed ${specifiers.length} named imports`);
+
+      // Consume closing brace
+      this.consume(TokenType.PUNCTUATION, 'Expected }');
+    }
+
+    // Case 2: Default import or default + named
+    // import MyDefault from 'module'
+    // import MyDefault, { x, y } from 'module'
+    else if (this.check(TokenType.IDENTIFIER) && this.peekAhead(1).value !== 'from') {
+      logger.trace(`  Found identifier without opening brace, parsing default import...`);
+
+      const defaultName = this.consume(TokenType.IDENTIFIER, 'Expected identifier').value;
+      const imported = new Identifier(defaultName);
+      const local = new Identifier(defaultName);
+      specifiers.push(new ImportSpecifier(imported, local));
+
+      logger.trace(`  Default import: ${defaultName}`);
+
+      // Check for comma and additional named imports
+      this.skipComments();
+      if (this.isPunctuation(',')) {
+        logger.trace(`  Found comma after default import, checking for named imports...`);
+        this.advance();
+
+        this.skipComments();
+        if (this.isPunctuation('{')) {
+          logger.trace(`  Found opening brace, parsing additional named imports...`);
+          this.advance();
+
+          this.skipComments();
+          while (!this.isPunctuation('}') && !this.isAtEnd()) {
+            this.skipComments();
+
+            if (this.isPunctuation('}')) break;
+
+            if (!this.check(TokenType.IDENTIFIER)) {
+              this.advance();
+              continue;
+            }
+
+            const name = this.consume(TokenType.IDENTIFIER, 'Expected identifier').value;
+            const imported2 = new Identifier(name);
+            let local2 = imported2;
+
+            this.skipComments();
+
+            if (this.isKeyword('as')) {
+              this.advance();
+              this.skipComments();
+              const localName = this.consume(TokenType.IDENTIFIER, 'Expected identifier after as').value;
+              local2 = new Identifier(localName);
+            }
+
+            specifiers.push(new ImportSpecifier(imported2, local2));
+
+            this.skipComments();
+
+            if (this.isPunctuation(',')) {
+              this.advance();
+              this.skipComments();
+              continue;
+            } else {
+              break;
+            }
+          }
+
+          this.consume(TokenType.PUNCTUATION, 'Expected }');
+        }
+      }
+    }
+
+    // ✅ FIX #7: Skip comments before 'from'
+    this.skipComments();
+
+    // Consume 'from' keyword
+    this.consume(TokenType.KEYWORD, 'Expected from');
+
+    // ✅ FIX #8: Skip comments before module path string
+    this.skipComments();
+
+    // Get the module/source path
+    const modulePathToken = this.consume(TokenType.STRING, 'Expected module path string');
+    const source = new Literal(
+      modulePathToken.value,
+      modulePathToken.value,
+      'string'
+    );
+
+    logger.trace(`  Module path: ${source.value}`);
+    logger.trace(`  Total specifiers: ${specifiers.length}`);
+
+    // ✅ FIX #9: Consume statement end (handles semicolon and trailing comments)
+    this.consumeStatementEnd();
+
+    logger.trace(`[parseImportDeclaration] SUCCESS\n`);
+    return new ImportDeclaration(specifiers, source, startLocation);
+  }
+
+  /**
+   * Helper method: Check if lookahead token matches (needed for peekAhead)
+   * Add this if not already present
+   */
+  peekAhead(n = 1) {
+    const pos = this.current + n;
+    if (pos >= this.tokens.length) {
+      return this.tokens[this.tokens.length - 1];
+    }
+    return this.tokens[pos];
+  }
+
+  parseClassDeclaration() {
+    const logger = getLogger().createComponentLogger('Parser.parseClassDeclaration');
+    logger.startSession('parseClassDeclaration');
+    logger.trace(`  Current token: ${this.peek().value} (${this.peek().type})`);
+
+    const startLocation = this.getLocation();
+    const nameToken = this.consume(TokenType.IDENTIFIER, 'Expected class name');
+    const name = new Identifier(nameToken.value);
+    logger.trace(`  Class name: ${name.name}`);
+
+    let superClass = null;
+    if (this.isKeyword('extends')) {
+      this.advance();
+      const superName = this.consume(TokenType.IDENTIFIER, 'Expected superclass name').value;
+      superClass = new Identifier(superName);
+      logger.trace(`  Extends: ${superClass.name}`);
+
+      // Skip generic type parameters like <MyCounter>
+      if (this.isOperator('<')) {
+        this.advance();
+        this.consume(TokenType.IDENTIFIER, 'Expected type name');
+        this.consume(TokenType.OPERATOR, 'Expected >');
+      }
+    }
+
+    logger.trace(`  Looking for opening brace...`);
+    logger.trace(`  Current token: ${this.peek().value} (${this.peek().type})`);
+    this.consume(TokenType.PUNCTUATION, 'Expected {');
+
+    const fields = [];
+    const methods = [];
+
+    logger.trace(`  Parsing class body...`);
+    let itemCount = 0;
+
+    while (!this.isPunctuation('}') && !this.isAtEnd()) {
+      this.skipComments();  // ← ADD THIS LINE - skip comments in class body
+
+      if (this.isPunctuation('}')) break;  // Check again after skipping comments
+
+      logger.trace(`    [item ${itemCount}] Current token: ${this.peek().value} (${this.peek().type})`);
+
+      // Skip semicolons
+      if (this.isPunctuation(';')) {
+        logger.trace(`    Skipping semicolon`);
+        this.advance();
+        continue;
+      }
+
+      // Check for constructor (always a method)
+      if (this.isKeyword('constructor')) {
+        logger.trace(`    Found constructor`);
+        methods.push(this.parseMethodDeclaration());
+        itemCount++;
+        continue;
+      }
+
+      // Check for field or method
+      if (this.check(TokenType.IDENTIFIER)) {
+        const currentPos = this.current;
+        const idToken = this.peek();
+        const fieldName = idToken.value;
+        logger.trace(`    Found identifier: ${fieldName}`);
+        this.advance();
+
+        // CASE 1: Field initializer - IDENTIFIER = value
+        if (this.isOperator('=')) {
+          logger.trace(`      -> This is a FIELD (followed by =)`);
+          this.current = currentPos; // Rewind
+          try {
+            fields.push(this.parseFieldDeclaration());
+            logger.trace(`      Field parsed successfully`);
+            itemCount++;
+            continue;
+          } catch (e) {
+            console.error(`      ERROR parsing field: ${e.message}`);
+            throw e;
+          }
+        }
+
+        // CASE 2: Method - IDENTIFIER ( params )
+        if (this.isPunctuation('(')) {
+          logger.trace(`      -> This is a METHOD (followed by '(')`);
+          this.current = currentPos; // Rewind
+          try {
+            methods.push(this.parseMethodDeclaration());
+            logger.trace(`      Method parsed successfully`);
+            itemCount++;
+            continue;
+          } catch (e) {
+            console.error(`      ERROR parsing method: ${e.message}`);
+            throw e;
+          }
+        }
+
+        logger.trace(`      -> Unknown pattern, skipping`);
+        this.advance();
+        continue;
+      }
+
+      // Skip unknown tokens
+      logger.trace(`    Skipping unknown token: ${this.peek().value}`);
+      this.advance();
+    }
+
+    logger.trace(`  Class body parsing complete. Found ${fields.length} fields, ${methods.length} methods`);
+
+    this.consume(TokenType.PUNCTUATION, 'Expected }');
+    const body = new ClassBody(fields, methods);
+    logger.trace(`[parseClassDeclaration] SUCCESS\n`);
+    return new ClassDeclaration(name, superClass, body, startLocation);
+  }
+
+
+  parseMethodDeclaration() {
+    const logger = getLogger().createComponentLogger('Parser.parseMethodDeclaration');
+    logger.startSession(`      [parseMethodDeclaration] STARTING`);
+    logger.trace(`        Current: ${this.peek().value}`);
+
+    const startLocation = this.getLocation();
+
+    let methodName;
+    if (this.isKeyword('constructor')) {
+      methodName = 'constructor';
+      this.advance();
+    } else {
+      methodName = this.consume(TokenType.IDENTIFIER, 'Expected method name').value;
+    }
+
+    logger.trace(`        Method name: ${methodName}`);
+    const key = new Identifier(methodName);
+
+    this.consume(TokenType.PUNCTUATION, 'Expected (');
+    const params = this.parseParameterList();
+    logger.trace(`        Parameters: ${params.length}`);
+    this.consume(TokenType.PUNCTUATION, 'Expected )');
+
+    let body = null;
+    if (this.isOperator('=>')) {
+      logger.trace(`        Arrow function body`);
+      this.advance();
+      body = this.parseExpression();
+    } else if (this.isPunctuation('{')) {
+      logger.trace(`        Block body`);
+      this.advance();
+      body = this.parseBlock();
+    }
+
+    logger.trace(`      [parseMethodDeclaration] SUCCESS`);
+    return new MethodDeclaration(key, params, body, startLocation);
+  }
+  parseFieldDeclaration() {
+    console.log(`      [parseFieldDeclaration] STARTING`);
+    console.log(`        Current: ${this.peek().value}`);
+
+    const startLocation = this.getLocation();
+    const fieldName = this.consume(TokenType.IDENTIFIER, 'Expected field name').value;
+    const key = new Identifier(fieldName);
+    console.log(`        Field name: ${fieldName}`);
+
+    let initialValue = null;
+    if (this.isOperator('=')) {
+      console.log(`        Found = operator, parsing initializer...`);
+      this.advance();
+      try {
+        initialValue = this.parseExpression();
+        console.log(`        Initializer parsed: ${initialValue.type}`);
+      } catch (e) {
+        console.error(`        ERROR parsing initializer: ${e.message}`);
+        throw e;
+      }
+    }
+
+    this.consumeStatementEnd();
+    console.log(`      [parseFieldDeclaration] SUCCESS`);
+    return new FieldDeclaration(key, initialValue, startLocation);
+  }
+
+  parseFunctionDeclaration() {
+    const startLocation = this.getLocation();
+    const nameToken = this.consume(TokenType.IDENTIFIER, 'Expected function name');
+    const name = nameToken.value ? new Identifier(nameToken.value) : null;
+
+    this.consume(TokenType.PUNCTUATION, 'Expected (');
+    const params = this.parseParameterList();
+    this.consume(TokenType.PUNCTUATION, 'Expected )');
+
+    this.consume(TokenType.PUNCTUATION, 'Expected {');
+    const body = this.parseBlock();
+
+    return new FunctionDeclaration(name, params, body, false, startLocation);
+  }
+
+  /**
+   * Parse parameter list - FIXED to handle UNDEFINED and NULL token types
+   */
+  parseParameterList() {
+    const params = [];
+
+    while (!this.isPunctuation(')') && !this.isAtEnd()) {
+      const paramLocation = this.getLocation();
+
+      // Handle destructuring: { key = value }
+      if (this.isPunctuation('{')) {
+        this.advance();
+        while (!this.isPunctuation('}') && !this.isAtEnd()) {
+          const paramName = this.consume(TokenType.IDENTIFIER, 'Expected param name').value;
+          let defaultValue = null;
+
+          if (this.isOperator('=')) {
+            this.advance();
+            // FIXED: Check token type, not just keywords
+            const token = this.peek();
+
+            if (this.check(TokenType.IDENTIFIER)) {
+              defaultValue = new Identifier(this.advance().value);
+            } else if (this.check(TokenType.NUMBER)) {
+              defaultValue = new Literal(parseFloat(this.advance().value), '', 'number');
+            } else if (this.check(TokenType.UNDEFINED)) {
+              // FIXED: Handle UNDEFINED token type
+              this.advance();
+              defaultValue = new Literal(undefined, 'undefined', 'undefined');
+            } else if (this.check(TokenType.NULL)) {
+              // FIXED: Handle NULL token type
+              this.advance();
+              defaultValue = new Literal(null, 'null', 'null');
+            } else if (this.isKeyword('undefined')) {
+              this.advance();
+              defaultValue = new Literal(undefined, 'undefined', 'undefined');
+            } else if (this.isKeyword('null')) {
+              this.advance();
+              defaultValue = new Literal(null, 'null', 'null');
+            }
+          }
+
+          params.push(new Parameter(new Identifier(paramName), defaultValue !== null, defaultValue, paramLocation));
+
+          if (!this.isPunctuation(',')) break;
+          this.advance();
+        }
+        this.consume(TokenType.PUNCTUATION, 'Expected }');
+
+        // Handle = {} after destructuring
+        if (this.isOperator('=')) {
+          this.advance();
+          if (this.isPunctuation('{')) {
+            this.advance();
+            let braceDepth = 1;
+            while (braceDepth > 0 && !this.isAtEnd()) {
+              if (this.isPunctuation('{')) braceDepth++;
+              else if (this.isPunctuation('}')) braceDepth--;
+              if (braceDepth > 0) this.advance();
+            }
+            this.consume(TokenType.PUNCTUATION, 'Expected }');
+          }
+        }
+      } else if (this.check(TokenType.IDENTIFIER)) {
+        // Regular parameter
+        const paramName = this.consume(TokenType.IDENTIFIER, 'Expected param name').value;
+        let defaultValue = null;
+
+        if (this.isOperator('=')) {
+          this.advance();
+          const token = this.peek();
+
+          if (this.check(TokenType.IDENTIFIER)) {
+            defaultValue = new Identifier(this.advance().value);
+          } else if (this.check(TokenType.NUMBER)) {
+            defaultValue = new Literal(parseFloat(this.advance().value), '', 'number');
+          } else if (this.check(TokenType.UNDEFINED)) {
+            this.advance();
+            defaultValue = new Literal(undefined, 'undefined', 'undefined');
+          } else if (this.check(TokenType.NULL)) {
+            this.advance();
+            defaultValue = new Literal(null, 'null', 'null');
+          } else if (this.isKeyword('undefined')) {
+            this.advance();
+            defaultValue = new Literal(undefined, 'undefined', 'undefined');
+          } else if (this.isKeyword('null')) {
+            this.advance();
+            defaultValue = new Literal(null, 'null', 'null');
+          }
+        }
+
+        params.push(new Parameter(new Identifier(paramName), defaultValue !== null, defaultValue, paramLocation));
+      } else {
+        break;
+      }
+
+      if (!this.isPunctuation(',')) break;
+      this.advance();
+    }
+
+    return params;
+  }
+
+  parseBlock() {
+    console.log(`\n[parseBlock] STARTING at token: ${this.peek().value}`);
+
+    const startLocation = this.getLocation();
+    const statements = [];
+
+    while (!this.isPunctuation('}') && !this.isAtEnd()) {
+      this.skipComments();  // ← ADD THIS LINE - skip comments in block
+
+      if (this.isPunctuation('}')) break;  // Check again after skipping
+
+      console.log(`  [parseBlock] Current token: ${this.peek().value} (${this.peek().type})`);
+
+      if (this.isKeyword('return')) {
+        console.log(`    Found RETURN statement`);
+        this.advance();
+        let argument = null;
+
+        if (!this.isPunctuation(';') && !this.isPunctuation('}')) {
+          console.log(`    Parsing return argument...`);
+          try {
+            argument = this.parseExpression();
+            console.log(`    Return argument parsed successfully`);
+          } catch (error) {
+            console.error(`    ❌ ERROR parsing return argument: ${error.message}`);
+            console.error(`       Token was: ${this.peek().value}`);
+
+            // Skip to semicolon
+            while (!this.isPunctuation(';') && !this.isPunctuation('}') && !this.isAtEnd()) {
+              this.advance();
+            }
+          }
+        }
+
+        this.consumeStatementEnd();
+        statements.push(new ReturnStatement(argument, startLocation));
+
+      } else {
+        console.log(`    Parsing expression statement...`);
+        try {
+          const expr = this.parseExpression();
+          console.log(`    Expression parsed successfully: ${expr.type}`);
+          this.consumeStatementEnd();
+          statements.push(new ExpressionStatement(expr, startLocation));
+        } catch (error) {
+          console.error(`    ❌ ERROR parsing expression: ${error.message}`);
+          console.error(`       Token was: ${this.peek().value}`);
+
+          // Skip to next statement
+          while (!this.isPunctuation(';') && !this.isPunctuation('}') && !this.isAtEnd()) {
+            this.advance();
+          }
+          if (this.isPunctuation(';')) {
+            this.advance();
+          }
+        }
+      }
+    }
+
+    if (this.isPunctuation('}')) {
+      this.advance();
+    }
+
+    console.log(`[parseBlock] SUCCESS - ${statements.length} statements\n`);
+    return new BlockStatement(statements, startLocation);
+  }
+
+  parseExpression() {
+    console.log(`    [parseExpression] Current token: ${this.peek().value}`);
+    try {
+      const result = this.parseAssignment();
+      console.log(`    [parseExpression] ✓ Success, type: ${result.type}`);
+      return result;
+    } catch (e) {
+      console.error(`    [parseExpression] ✗ Failed: ${e.message}`);
+      throw e;
+    }
+  }
+
+  parseAssignment() {
+    let expr = this.parseTernary();
+
+    if (this.isOperator('=')) {
+      this.advance();
+      const value = this.parseAssignment();
+      return { type: 'AssignmentExpression', left: expr, right: value };
+    }
+
+    return expr;
+  }
+
+  parseTernary() {
+    let expr = this.parseLogicalOr();
+
+    if (this.isOperator('?')) {
+      this.advance();
+      const consequent = this.parseExpression();
+      this.consume(TokenType.OPERATOR, 'Expected :');
+      const alternate = this.parseExpression();
+      return { type: 'ConditionalExpression', test: expr, consequent, alternate };
+    }
+
+    return expr;
+  }
+
+  parseLogicalOr() {
+    let expr = this.parseLogicalAnd();
+
+    while (this.isOperator('||')) {
+      this.advance();
+      const right = this.parseLogicalAnd();
+      expr = { type: 'LogicalExpression', operator: '||', left: expr, right };
+    }
+
+    return expr;
+  }
+
+  parseLogicalAnd() {
+    let expr = this.parseEquality();
+
+    while (this.isOperator('&&')) {
+      this.advance();
+      const right = this.parseEquality();
+      expr = { type: 'LogicalExpression', operator: '&&', left: expr, right };
+    }
+
+    return expr;
+  }
+
+  parseEquality() {
+    let expr = this.parseRelational();
+
+    while (this.isOperator('===') || this.isOperator('!==') || this.isOperator('==') || this.isOperator('!=')) {
+      const operator = this.advance().value;
+      const right = this.parseRelational();
+      expr = { type: 'BinaryExpression', operator, left: expr, right };
+    }
+
+    return expr;
+  }
+
+  parseRelational() {
+    let expr = this.parseAdditive();
+
+    while (this.isOperator('<') || this.isOperator('>') || this.isOperator('<=') || this.isOperator('>=')) {
+      const operator = this.advance().value;
+      const right = this.parseAdditive();
+      expr = { type: 'BinaryExpression', operator, left: expr, right };
+    }
+
+    return expr;
+  }
+
+  parseAdditive() {
+    let expr = this.parseMultiplicative();
+
+    while (this.isOperator('+') || this.isOperator('-')) {
+      const operator = this.advance().value;
+      const right = this.parseMultiplicative();
+      expr = { type: 'BinaryExpression', operator, left: expr, right };
+    }
+
+    return expr;
+  }
+
+  parseMultiplicative() {
+    let expr = this.parseUnary();
+
+    while (this.isOperator('*') || this.isOperator('/') || this.isOperator('%')) {
+      const operator = this.advance().value;
+      const right = this.parseUnary();
+      expr = { type: 'BinaryExpression', operator, left: expr, right };
+    }
+
+    return expr;
+  }
+
+  parseUnary() {
+    console.log(`        [parseUnary] Current: ${this.peek().value}`);
+
+    if (this.isOperator('!') || this.isOperator('-') || this.isOperator('+') || this.isOperator('~')) {
+      const operator = this.advance().value;
+      const expr = this.parseUnary();
+      return { type: 'UnaryExpression', operator, argument: expr };
+    }
+
+
+    console.log(`        [parseUnary] Calling parsePostfix`);
+    return this.parsePostfix();
+  }
+
+  parsePostfix() {
+    console.log(`        [parsePostfix] Starting, calling parseCall`);
+    let expr = this.parseCall();
+    console.log(`        [parsePostfix] parseCall returned: ${expr.type || expr.name}`);
+    console.log(`        [parsePostfix] Next token: ${this.peek().value}`);
+
+    while (true) {
+      if (this.isOperator('++') || this.isOperator('--')) {
+        const operator = this.advance().value;
+        expr = { type: 'UpdateExpression', operator, argument: expr, prefix: false };
+      } else if (this.isPunctuation('.')) {
+        console.log(`        [parsePostfix] Found . member access`);
+        this.advance();
+        const property = new Identifier(this.consume(TokenType.IDENTIFIER, 'Expected property').value);
+        expr = new MemberExpression(expr, property, false);
+        console.log(`        [parsePostfix] Created MemberExpression: ${expr.object.name}.${expr.property.name}`);
+      } else if (this.isPunctuation('[')) {
+        console.log(`        [parsePostfix] Found [ computed access`);
+        this.advance();
+        const property = this.parseExpression();
+        this.consume(TokenType.PUNCTUATION, 'Expected ]');
+        expr = new MemberExpression(expr, property, true);
+      } else {
+        console.log(`        [parsePostfix] No more postfix ops, returning ${expr.type}`);
+        break;
+      }
+    }
+
+    return expr;
+  }
+
+
+  parseCall() {
+    console.log(`        [parseCall] Starting, calling parsePrimary`);
+    let expr = this.parsePrimary();
+    console.log(`        [parseCall] parsePrimary returned: ${expr.type || expr.name}`);
+    console.log(`        [parseCall] Next token: ${this.peek().value} (${this.peek().type})`);
+
+    while (this.isPunctuation('(')) {
+      console.log(`        [parseCall] Found (, parsing function call`);
+      this.advance();
+      const args = this.parseArguments();
+      console.log(`        [parseCall] Parsed ${args.length} arguments`);
+      this.consume(TokenType.PUNCTUATION, 'Expected )');
+      expr = new CallExpression(expr, args);
+      console.log(`        [parseCall] Created CallExpression`);
+    }
+
+    console.log(`        [parseCall] Returning: ${expr.type}`);
+    return expr;
+  }
+
+  parsePrimary() {
+    console.log(`      [parsePrimary] Current: ${this.peek().value} (${this.peek().type})`);
+
+    // Handle 'this' keyword FIRST
+    if (this.isKeyword('this')) {
+      this.advance();
+      console.log(`      [parsePrimary] ✓ this keyword`);
+      return new Identifier('this');
+    }
+
+    if (this.check(TokenType.STRING)) {
+      const token = this.advance();
+      console.log(`      [parsePrimary] ✓ string literal: ${token.value}`);
+      return new Literal(token.value, token.value, 'string');
+    }
+
+    if (this.check(TokenType.NUMBER)) {
+      const token = this.advance();
+      console.log(`      [parsePrimary] ✓ number literal: ${token.value}`);
+      return new Literal(parseFloat(token.value), token.value, 'number');
+    }
+
+    if (this.check(TokenType.BOOLEAN)) {
+      const token = this.advance();
+      console.log(`      [parsePrimary] ✓ boolean: ${token.value}`);
+      return new Literal(token.value === 'true', token.value, 'boolean');
+    }
+
+    if (this.check(TokenType.NULL)) {
+      this.advance();
+      console.log(`      [parsePrimary] ✓ null`);
+      return new Literal(null, 'null', 'null');
+    }
+
+    if (this.check(TokenType.UNDEFINED)) {
+      this.advance();
+      console.log(`      [parsePrimary] ✓ undefined`);
+      return new Literal(undefined, 'undefined', 'undefined');
+    }
+
+    if (this.isKeyword('null')) {
+      this.advance();
+      console.log(`      [parsePrimary] ✓ null keyword`);
+      return new Literal(null, 'null', 'null');
+    }
+
+    if (this.isKeyword('undefined')) {
+      this.advance();
+      console.log(`      [parsePrimary] ✓ undefined keyword`);
+      return new Literal(undefined, 'undefined', 'undefined');
+    }
+
+    if (this.isPunctuation('(')) {
+      console.log(`      [parsePrimary] Found ( - checking for arrow function or grouped expr`);
+      const savedPos = this.current;
+      this.advance();
+
+      if (this.isPunctuation(')')) {
+        const nextPos = this.current + 1;
+        if (nextPos < this.tokens.length &&
+          this.tokens[nextPos].type === TokenType.OPERATOR &&
+          this.tokens[nextPos].value === '=>') {
+          console.log(`      [parsePrimary] ✓ arrow function with no params: () => ...`);
+          this.consume(TokenType.PUNCTUATION, 'Expected )');
+          this.consume(TokenType.OPERATOR, 'Expected =>');
+          const body = this.parseExpression();
+          return new ArrowFunctionExpression([], body);
+        }
+      }
+
+      const expr = this.parseExpression();
+      this.consume(TokenType.PUNCTUATION, 'Expected )');
+
+      if (this.isOperator('=>')) {
+        console.log(`      [parsePrimary] ✓ arrow function: (x) => ...`);
+        this.advance();
+        const body = this.parseExpression();
+        let params = [];
+        if (expr.type === 'Identifier') {
+          params = [new Parameter(expr, false, null)];
+        }
+        return new ArrowFunctionExpression(params, body);
+      }
+
+      console.log(`      [parsePrimary] ✓ grouped expression`);
+      return expr;
+    }
+
+    if (this.isPunctuation('{')) {
+      console.log(`      [parsePrimary] ✓ object literal`);
+      this.advance();
+      return this.parseObjectLiteral();
+    }
+
+    if (this.isPunctuation('[')) {
+      console.log(`      [parsePrimary] ✓ array literal`);
+      this.advance();
+      const elements = [];
+      while (!this.isPunctuation(']') && !this.isAtEnd()) {
+        elements.push(this.parseExpression());
+        if (!this.isPunctuation(',')) break;
+        this.advance();
+      }
+      this.consume(TokenType.PUNCTUATION, 'Expected ]');
+      return { type: 'ArrayLiteral', elements };
+    }
+
+    if (this.isKeyword('new')) {
+      console.log(`      [parsePrimary] ✓ new expression`);
+      this.advance();
+      const callee = new Identifier(this.consume(TokenType.IDENTIFIER, 'Expected class name').value);
+      this.consume(TokenType.PUNCTUATION, 'Expected (');
+      const args = this.parseArguments();
+      this.consume(TokenType.PUNCTUATION, 'Expected )');
+      return new NewExpression(callee, args);
+    }
+
+    if (this.isKeyword('const')) {
+      const savedPos = this.current;
+      this.advance();
+
+      // Case 1: const new ClassName(...)
+      if (this.isKeyword('new')) {
+        console.log(`      [parsePrimary] ✓ const new expression`);
+        this.advance();
+        const callee = new Identifier(this.consume(TokenType.IDENTIFIER, 'Expected class name').value);
+        this.consume(TokenType.PUNCTUATION, 'Expected (');
+        const args = this.parseArguments();
+        this.consume(TokenType.PUNCTUATION, 'Expected )');
+        const expr = new NewExpression(callee, args);
+        expr.isConst = true;
+        return expr;
+      }
+
+      // Case 2: const ClassName(...) - implicit new
+      if (this.check(TokenType.IDENTIFIER)) {
+        console.log(`      [parsePrimary] ✓ const implicit new expression (ignoring const)`);
+        // Just treat it as a normal identifier start, we consumed 'const'
+        // Recursively call parsePrimary to handle the Identifier
+        return this.parsePrimary();
+      }
+
+      // Case 3: const [] - constant array
+      if (this.isPunctuation('[')) {
+        console.log(`      [parsePrimary] ✓ const array literal`);
+        // recurse to handle [
+        return this.parsePrimary();
+      }
+
+      // Case 4: const {} - constant object/map
+      if (this.isPunctuation('{')) {
+        console.log(`      [parsePrimary] ✓ const object literal`);
+        return this.parsePrimary();
+      }
+
+      // Fallback
+      this.current = savedPos;
+    }
+
+    if (this.check(TokenType.IDENTIFIER)) {
+      const token = this.advance();
+      const ident = new Identifier(token.value);
+      console.log(`      [parsePrimary] ✓ identifier: ${token.value}`);
+
+      if (this.isOperator('=>')) {
+        console.log(`      [parsePrimary] ✓ arrow function: x => ...`);
+        this.advance();
+        const body = this.parseExpression();
+        return new ArrowFunctionExpression([new Parameter(ident)], body);
+      }
+
+      return ident;
+    }
+
+    // If we get here, we couldn't parse anything
+    console.error(`      [parsePrimary] ❌ FAILED - Cannot parse token: ${this.peek().value} (${this.peek().type})`);
+    throw this.error('Expected expression');
+  }
+
+
+  enterMethod(methodName) {
+    if (!this.callStack) this.callStack = [];
+    this.callStack.push({
+      method: methodName,
+      line: this.peek().line,
+      column: this.peek().column,
+      token: this.peek().value,
+    });
+  }
+
+  parseObjectLiteral() {
+    this.enterMethod('parseObjectLiteral');
+    const properties = [];
+
+    try {
+      while (!this.isPunctuation('}') && !this.isAtEnd()) {
+        if (this.isPunctuation(',')) {
+          this.advance();
+          continue;
+        }
+
+        let key = null;
+        let shorthand = false;
+
+        if (this.isPunctuation('[')) {
+          this.advance();
+          key = this.parseExpression();
+          this.consume(TokenType.PUNCTUATION, 'Expected ]');
+        } else if (this.check(TokenType.IDENTIFIER)) {
+          const token = this.advance();
+          key = new Identifier(token.value);
+
+          if (this.isPunctuation(',') || this.isPunctuation('}')) {
+            shorthand = true;
+          }
+        } else if (this.check(TokenType.STRING)) {
+          const token = this.advance();
+          key = new Literal(token.value, token.value, 'string');
+        } else {
+          this.advance();
+          continue;
+        }
+
+        let value = key;
+        if (!shorthand && this.isPunctuation(':')) {
+          this.advance();
+
+          try {
+            value = this.parseTernary();
+          } catch (error) {
+            if (error.parserError) {
+              this.reportParserError(error.parserError);
+            }
+            value = key;
+
+            while (!this.isPunctuation(',') && !this.isPunctuation('}') && !this.isAtEnd()) {
+              this.advance();
+            }
+          }
+        }
+
+        const prop = new Property(key, value);
+        prop.shorthand = shorthand;
+        properties.push(prop);
+
+        if (this.isPunctuation(',')) {
+          this.advance();
+        }
+      }
+
+      if (this.isPunctuation('}')) {
+        this.advance();
+      }
+
+      this.exitMethod('parseObjectLiteral');
+      return new ObjectLiteral(properties);
+    } catch (e) {
+      this.exitMethod('parseObjectLiteral');
+      throw e;
+    }
+  }
+  parseArguments() {
+    const args = [];
+
+    while (!this.isPunctuation(')') && !this.isAtEnd()) {
+      try {
+        // ⭐ KEY FIX: Use parseTernary() instead of parseLogicalOr()
+        // This allows all operators except assignment
+        args.push(this.parseTernary());
+      } catch (error) {
+        break;
+      }
+
+      if (!this.isPunctuation(',')) break;
+      this.advance();
+    }
+
+    return args;
+  }
+
+  check(type) {
+    if (this.isAtEnd()) return false;
+    return this.peek().type === type;
+  }
+
+  consume(type, message = '') {
+    if (this.check(type)) {
+      return this.advance();
+    }
+    throw this.error(message || `Expected ${type}`);
+  }
+
+  consumeStatementEnd() {
+    this.skipComments();  // ← ADD THIS LINE
+
+    if (this.isPunctuation(';')) {
+      this.advance();
+    }
+
+    this.skipComments();  // ← ADD THIS LINE - skip trailing comments too
+  }
+
+  advance() {
+    if (!this.isAtEnd()) {
+      this.current++;
+    }
+    return this.previous();
+  }
+
+  peek() {
+    return this.tokens[this.current];
+  }
+
+
+  previous() {
+    return this.tokens[this.current - 1];
+  }
+
+  isAtEnd() {
+    return this.peek().type === TokenType.EOF;
+  }
+
+  getLocation() {
+    const token = this.peek();
+    return { line: token.line, column: token.column };
+  }
+  /**
+  * Enhanced error reporting with full call stack
+  */
+  error(message) {
+    const token = this.peek();
+    const errorObj = new Error(
+      `Parse error at line ${token.line}, column ${token.column}: ${message}`
+    );
+    errorObj.parserError = {
+      message: `Parse error at line ${token.line}, column ${token.column}: ${message}`,
+      line: token.line,
+      column: token.column,
+      token: { type: token.type, value: token.value },
+      callStack: this.callStack ? [...this.callStack] : [],
+    };
+    return errorObj;
+  }
+  /**
+   * Get context around current token (5 tokens before and after)
+   */
+  getContext() {
+    const start = Math.max(0, this.current - 5);
+    const end = Math.min(this.tokens.length, this.current + 6);
+
+    return {
+      before: this.tokens.slice(start, this.current).map(t => `${t.value}(${t.type})`).join(' '),
+      current: `→ ${this.peek().value}(${this.peek().type}) ←`,
+      after: this.tokens.slice(this.current + 1, end).map(t => `${t.value}(${t.type})`).join(' '),
+    };
+  }
+  /**
+   * Track when exiting a parser method
+   */
+  exitMethod(methodName) {
+    if (!this.callStack) this.callStack = [];
+    if (this.callStack.length > 0) {
+      const last = this.callStack[this.callStack.length - 1];
+      if (last.method === methodName) {
+        this.callStack.pop();
+      }
+    }
+  }
+
+  getTokenContext() {
+    const start = Math.max(0, this.current - 5);
+    const end = Math.min(this.tokens.length, this.current + 6);
+
+    const before = this.tokens
+      .slice(start, this.current)
+      .map(t => `${t.value}`)
+      .join(' ');
+
+    const after = this.tokens
+      .slice(this.current + 1, end)
+      .map(t => `${t.value}`)
+      .join(' ');
+
+    return {
+      before: before,
+      current: `→ ${this.peek().value} ←`,
+      after: after,
+    };
+  }
+
+  synchronize() {
+    this.advance();
+    while (!this.isAtEnd()) {
+      if (this.isPunctuation(';')) {
+        this.advance();
+        return;
+      }
+      if (this.isKeyword('class') || this.isKeyword('function') || this.isKeyword('import')) {
+        return;
+      }
+      this.advance();
+    }
+  }
+
+  getErrors() {
+    return this.errors;
+  }
+
+  /**
+   * Report error with full context
+   */
+  reportError(error) {
+    this.errors.push(error);
+
+    if (this.debugMode) {
+      console.error('\n❌ PARSER ERROR DETECTED:\n');
+      console.error(`Message: ${error.message}\n`);
+
+      console.error('📍 Token Context:');
+      console.error(`  Before:  ${error.context.before}`);
+      console.error(`  Current: ${error.context.current}`);
+      console.error(`  After:   ${error.context.after}\n`);
+
+      console.error('📚 Call Stack (where error came from):');
+      if (error.callStack.length === 0) {
+        console.error('  (top level)\n');
+      } else {
+        error.callStack.forEach((frame, idx) => {
+          const arrow = idx === error.callStack.length - 1 ? '→' : ' ';
+          console.error(`  ${arrow} ${idx + 1}. ${frame.method}()`);
+          console.error(`     at token: "${frame.token}" (line ${frame.line}, col ${frame.column})`);
+        });
+        console.error('');
+      }
+    }
+  }
+}
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+export {
+  Parser,
+  Program,
+  ImportDeclaration,
+  ImportSpecifier,
+  ClassDeclaration,
+  ClassBody,
+  FieldDeclaration,
+  MethodDeclaration,
+  Parameter,
+  FunctionDeclaration,
+  BlockStatement,
+  ReturnStatement,
+  ExpressionStatement,
+  Identifier,
+  Literal,
+  CallExpression,
+  NewExpression,
+  ObjectLiteral,
+  Property,
+  ArrowFunctionExpression,
+  MemberExpression,
+  ASTNode,
+};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/analyzer/src/flutterjs_report_generator.js b/packages/flutterjs_analyzer/flutterjs_analyzer/src/flutterjs_report_generator.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/src/flutterjs_report_generator.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/src/flutterjs_report_generator.js
diff --git a/packages/flutterjs_engine/src/analyzer/src/flutterjs_widget_analyzer.js b/packages/flutterjs_analyzer/flutterjs_analyzer/src/flutterjs_widget_analyzer.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/src/flutterjs_widget_analyzer.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/src/flutterjs_widget_analyzer.js
diff --git a/packages/flutterjs_engine/src/analyzer/src/lexer.js b/packages/flutterjs_analyzer/flutterjs_analyzer/src/lexer.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/src/lexer.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/src/lexer.js
diff --git a/packages/flutterjs_engine/src/analyzer/src/ssr_analyzer.js b/packages/flutterjs_analyzer/flutterjs_analyzer/src/ssr_analyzer.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/src/ssr_analyzer.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/src/ssr_analyzer.js
diff --git a/packages/flutterjs_engine/src/analyzer/src/state_analyzer_data.js b/packages/flutterjs_analyzer/flutterjs_analyzer/src/state_analyzer_data.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/src/state_analyzer_data.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/src/state_analyzer_data.js
diff --git a/packages/flutterjs_engine/src/analyzer/src/state_analyzer_implementation.js b/packages/flutterjs_analyzer/flutterjs_analyzer/src/state_analyzer_implementation.js
similarity index 100%
rename from packages/flutterjs_engine/src/analyzer/src/state_analyzer_implementation.js
rename to packages/flutterjs_analyzer/flutterjs_analyzer/src/state_analyzer_implementation.js
diff --git a/packages/flutterjs_analyzer/pubspec.yaml b/packages/flutterjs_analyzer/pubspec.yaml
index 38c07801..b2b5fb3b 100644
--- a/packages/flutterjs_analyzer/pubspec.yaml
+++ b/packages/flutterjs_analyzer/pubspec.yaml
@@ -1,20 +1,24 @@
 name: flutterjs_analyzer
-description: A sample command-line application.
-version: 1.0.0
-resolution: workspace
-# repository: https://github.com/my_org/my_repo
+version: 0.1.0
+description: FlutterJS Analyzer - Dart widget analyzer
+
+homepage: https://github.com/flutterjs/flutterjs_analyzer
+repository: https://github.com/flutterjs/flutterjs_analyzer
+issue_tracker: https://github.com/flutterjs/flutterjs_analyzer/issues
 
 environment:
-  sdk: ^3.10.0-278.0.dev
+  sdk: '>=2.19.0 <4.0.0'
 
-# Add regular dependencies here.
 dependencies:
-  path: ^1.9.0
-  analyzer: 
-  flutterjs_dev_tools: any
-
-
+  flutter:
+    sdk: flutter
 
 dev_dependencies:
-  lints: ^6.0.0
-  test: ^1.25.6
+  flutter_test:
+    sdk: flutter
+
+# FlutterJS metadata
+flutterjs:
+  npm_package: "@flutterjs/analyzer"
+  implementation_language: "javascript"
+  js_entry: "flutterjs_analyzer/src/index.js"
diff --git a/packages/flutterjs_animation/.gitignore b/packages/flutterjs_animation/.gitignore
new file mode 100644
index 00000000..1d4cb04d
--- /dev/null
+++ b/packages/flutterjs_animation/.gitignore
@@ -0,0 +1,31 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+build/
+dist/
+.dev/
+.debug/
+
+# Generated files
+.flutterjs/
+.cache/
+
+# Dart
+.dart_tool/
+.packages
+pubspec.lock
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Logs
+*.log
+npm-debug.log*
diff --git a/packages/flutterjs_animation/.pubignore b/packages/flutterjs_animation/.pubignore
new file mode 100644
index 00000000..bae5ffcf
--- /dev/null
+++ b/packages/flutterjs_animation/.pubignore
@@ -0,0 +1,11 @@
+# Exclude JavaScript implementation from pub.dev
+js/
+node_modules/
+dist/
+build/
+.git/
+.github/
+test/
+package-lock.json
+.vscode/
+.idea/
diff --git a/packages/flutterjs_animation/CHANGELOG.md b/packages/flutterjs_animation/CHANGELOG.md
new file mode 100644
index 00000000..13187808
--- /dev/null
+++ b/packages/flutterjs_animation/CHANGELOG.md
@@ -0,0 +1,3 @@
+## 0.1.0
+
+* Initial release
diff --git a/packages/flutterjs_animation/LICENSE b/packages/flutterjs_animation/LICENSE
new file mode 100644
index 00000000..14fac913
--- /dev/null
+++ b/packages/flutterjs_animation/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/flutterjs_animation/README.md b/packages/flutterjs_animation/README.md
new file mode 100644
index 00000000..d4af01d5
--- /dev/null
+++ b/packages/flutterjs_animation/README.md
@@ -0,0 +1,58 @@
+# FlutterjsAnimation
+
+A FlutterJS package
+
+## Installation
+
+Add to `pubspec.yaml`:
+
+```yaml
+dependencies:
+  flutterjs_animation: ^0.1.0
+```
+
+Then run:
+
+```bash
+flutterjs get
+```
+
+## Usage
+
+See `example/` for a complete Flutter app.
+
+## JavaScript Implementation
+
+The actual implementation is in `js/src/` (JavaScript).
+
+To develop:
+
+```bash
+cd js
+npm install
+```
+
+## Features
+
+- Lightweight implementation
+- SEO-friendly (FlutterJS rendering)
+- Easy to use
+
+## Publishing
+
+### 1. Publish JavaScript to npm
+
+```bash
+cd js
+npm publish
+```
+
+### 2. Publish Dart wrapper to pub.dev
+
+```bash
+dart pub publish
+```
+
+## License
+
+MIT
diff --git a/packages/flutterjs_animation/example/lib/main.dart b/packages/flutterjs_animation/example/lib/main.dart
new file mode 100644
index 00000000..a425720c
--- /dev/null
+++ b/packages/flutterjs_animation/example/lib/main.dart
@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'FlutterjsAnimation Example',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: const ExamplePage(),
+    );
+  }
+}
+
+class ExamplePage extends StatefulWidget {
+  const ExamplePage({Key? key}) : super(key: key);
+
+  @override
+  State<ExamplePage> createState() => _ExamplePageState();
+}
+
+class _ExamplePageState extends State<ExamplePage> {
+  String result = 'Click the button to test';
+
+  void _testPackage() {
+    setState(() {
+      // This will call the JavaScript implementation when running with FlutterJS
+      result = 'FlutterjsAnimation is ready!\n\nRun: flutterjs run --to-js --serve';
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('FlutterjsAnimation Example'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              result,
+              textAlign: TextAlign.center,
+              style: const TextStyle(fontSize: 16),
+            ),
+            const SizedBox(height: 20),
+            ElevatedButton(
+              onPressed: _testPackage,
+              child: const Text('Test FlutterjsAnimation'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/packages/flutterjs_animation/example/pubspec.yaml b/packages/flutterjs_animation/example/pubspec.yaml
new file mode 100644
index 00000000..af3a894f
--- /dev/null
+++ b/packages/flutterjs_animation/example/pubspec.yaml
@@ -0,0 +1,15 @@
+name: flutterjs_animation_example
+description: Example app for flutterjs_animation
+
+publish_to: 'none'
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
diff --git a/packages/flutterjs_animation/flutterjs_animation/build.js b/packages/flutterjs_animation/flutterjs_animation/build.js
new file mode 100644
index 00000000..8f0f4096
--- /dev/null
+++ b/packages/flutterjs_animation/flutterjs_animation/build.js
@@ -0,0 +1,99 @@
+/**
+ * Build script for @flutterjs/flutterjs_animation
+ * 
+ * Generates exports.json manifest for the import resolver system
+ */
+
+import { readFileSync, writeFileSync, readdirSync, statSync } from 'fs';
+import { join, extname } from 'path';
+
+const srcDir = './src';
+
+/**
+ * Get all JavaScript files recursively
+ */
+function getAllJsFiles(dir, fileList = []) {
+  const files = readdirSync(dir);
+  
+  for (const file of files) {
+    const filePath = join(dir, file);
+    const stat = statSync(filePath);
+    
+    if (stat.isDirectory()) {
+      getAllJsFiles(filePath, fileList);
+    } else if (extname(file) === '.js') {
+      fileList.push(filePath);
+    }
+  }
+  
+  return fileList;
+}
+
+/**
+ * Scan all source files and generate exports.json manifest
+ * This manifest tells the Dart code generator what symbols this package exports
+ */
+function generateExportManifest(sourceFiles) {
+  const manifest = {
+    package: '@flutterjs/flutterjs_animation',
+    version: '0.1.0',
+    exports: []
+  };
+
+  // Regex patterns to match different export types
+  const exportRegex = /export\s*{\s*([^}]+)\s*}/g;
+  const exportStarRegex = /export\s*\*\s*from/g;
+  const classRegex = /export\s+class\s+(\w+)/g;
+  const functionRegex = /export\s+function\s+(\w+)/g;
+  const constRegex = /export\s+const\s+(\w+)/g;
+
+  for (const srcFile of sourceFiles) {
+    const content = readFileSync(srcFile, 'utf8');
+    
+    // Find named exports: export { Foo, Bar }
+    for (const match of content.matchAll(exportRegex)) {
+      const symbols = match[1]
+        .split(',')
+        .map(s => s.trim())
+        .map(s => s.split(/\s+as\s+/).pop()) // Handle "export { Foo as Bar }"
+        .filter(s => s && !s.includes('from'));
+      manifest.exports.push(...symbols);
+    }
+    
+    // Find class exports: export class Foo
+    for (const match of content.matchAll(classRegex)) {
+      manifest.exports.push(match[1]);
+    }
+    
+    // Find function exports: export function foo()
+    for (const match of content.matchAll(functionRegex)) {
+      manifest.exports.push(match[1]);
+    }
+    
+    // Find const exports: export const FOO
+    for (const match of content.matchAll(constRegex)) {
+      manifest.exports.push(match[1]);
+    }
+  }
+
+  // Remove duplicates and sort
+  manifest.exports = [...new Set(manifest.exports)].sort();
+
+  writeFileSync('./exports.json', JSON.stringify(manifest, null, 2) + '\n');
+  console.log(`📋 Generated exports.json with ${manifest.exports.length} symbols\n`);
+}
+
+// Main build process
+async function build() {
+  console.log('🚀 Building @flutterjs/flutterjs_animation...\n');
+
+  const allFiles = getAllJsFiles(srcDir);
+  console.log(`📦 Found ${allFiles.length} JavaScript files\n`);
+
+  // Generate export manifest
+  generateExportManifest(allFiles);
+
+  console.log('✅ Build successful!\n');
+}
+
+build().catch(console.error);
diff --git a/packages/flutterjs_animation/flutterjs_animation/package.json b/packages/flutterjs_animation/flutterjs_animation/package.json
new file mode 100644
index 00000000..d25d53f4
--- /dev/null
+++ b/packages/flutterjs_animation/flutterjs_animation/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@flutterjs/flutterjs_animation",
+  "version": "0.1.0",
+  "description": "A FlutterJS package",
+  "main": "src/index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"No tests yet\"",
+    "prepublishOnly": "echo \"Ready to publish\""
+  },
+  "keywords": [
+    "flutterjs",
+    "flutterjs_animation"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/flutterjsdev/flutterjs.git"
+  },
+  "files": [
+    "src/",
+    "README.md",
+    "LICENSE"
+  ]
+}
diff --git a/packages/flutterjs_animation/flutterjs_animation/src/index.js b/packages/flutterjs_animation/flutterjs_animation/src/index.js
new file mode 100644
index 00000000..38395a90
--- /dev/null
+++ b/packages/flutterjs_animation/flutterjs_animation/src/index.js
@@ -0,0 +1,43 @@
+/**
+ * FlutterJS FlutterjsAnimation
+ * 
+ * Simple, lightweight implementation built with JavaScript
+ */
+
+/**
+ * Main class for FlutterjsAnimation
+ */
+export class FlutterjsAnimation {
+  constructor(config = {}) {
+    this.config = config;
+  }
+
+  /**
+   * Example method - replace with your implementation
+   */
+  hello() {
+    return 'Hello from FlutterjsAnimation!';
+  }
+
+  /**
+   * Example async method
+   */
+  async fetchData(url) {
+    try {
+      const response = await fetch(url);
+      return await response.json();
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      throw error;
+    }
+  }
+}
+
+/**
+ * Helper function
+ */
+export function createInstance(config) {
+  return new FlutterjsAnimation(config);
+}
+
+export default FlutterjsAnimation;
diff --git a/packages/flutterjs_animation/lib/flutterjs_animation.dart b/packages/flutterjs_animation/lib/flutterjs_animation.dart
new file mode 100644
index 00000000..91fcc961
--- /dev/null
+++ b/packages/flutterjs_animation/lib/flutterjs_animation.dart
@@ -0,0 +1,26 @@
+/// FlutterJS FlutterjsAnimation
+/// 
+/// A FlutterJS package
+/// 
+/// The actual implementation is in JavaScript.
+/// This package is a metadata wrapper published to pub.dev.
+/// 
+/// ## Usage
+/// 
+/// Add to your `pubspec.yaml`:
+/// ```yaml
+/// dependencies:
+///   flutterjs_animation: ^0.1.0
+/// ```
+/// 
+/// Then run:
+/// ```bash
+/// flutterjs get
+/// ```
+/// 
+/// The package will be installed to: `build/flutterjs/node_modules/@flutterjs/flutterjs_animation`
+/// 
+/// See `example/` for a complete working app.
+library flutterjs_animation;
+
+// The real implementation is in js/src/
diff --git a/packages/flutterjs_animation/pubspec.yaml b/packages/flutterjs_animation/pubspec.yaml
new file mode 100644
index 00000000..34886831
--- /dev/null
+++ b/packages/flutterjs_animation/pubspec.yaml
@@ -0,0 +1,24 @@
+name: flutterjs_animation
+version: 0.1.0
+description: A FlutterJS package
+
+homepage: https://github.com/flutterjs/flutterjs_animation
+repository: https://github.com/flutterjs/flutterjs_animation
+issue_tracker: https://github.com/flutterjs/flutterjs_animation/issues
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+# FlutterJS metadata
+flutterjs:
+  npm_package: "@flutterjs/flutterjs_animation"
+  implementation_language: "javascript"
+  js_entry: "js/src/index.js"
diff --git a/packages/flutterjs_cupertino/.gitignore b/packages/flutterjs_cupertino/.gitignore
new file mode 100644
index 00000000..1d4cb04d
--- /dev/null
+++ b/packages/flutterjs_cupertino/.gitignore
@@ -0,0 +1,31 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+build/
+dist/
+.dev/
+.debug/
+
+# Generated files
+.flutterjs/
+.cache/
+
+# Dart
+.dart_tool/
+.packages
+pubspec.lock
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Logs
+*.log
+npm-debug.log*
diff --git a/packages/flutterjs_cupertino/.pubignore b/packages/flutterjs_cupertino/.pubignore
new file mode 100644
index 00000000..bae5ffcf
--- /dev/null
+++ b/packages/flutterjs_cupertino/.pubignore
@@ -0,0 +1,11 @@
+# Exclude JavaScript implementation from pub.dev
+js/
+node_modules/
+dist/
+build/
+.git/
+.github/
+test/
+package-lock.json
+.vscode/
+.idea/
diff --git a/packages/flutterjs_cupertino/CHANGELOG.md b/packages/flutterjs_cupertino/CHANGELOG.md
new file mode 100644
index 00000000..13187808
--- /dev/null
+++ b/packages/flutterjs_cupertino/CHANGELOG.md
@@ -0,0 +1,3 @@
+## 0.1.0
+
+* Initial release
diff --git a/packages/flutterjs_cupertino/LICENSE b/packages/flutterjs_cupertino/LICENSE
new file mode 100644
index 00000000..14fac913
--- /dev/null
+++ b/packages/flutterjs_cupertino/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/flutterjs_cupertino/README.md b/packages/flutterjs_cupertino/README.md
new file mode 100644
index 00000000..0611dd6b
--- /dev/null
+++ b/packages/flutterjs_cupertino/README.md
@@ -0,0 +1,58 @@
+# FlutterjsCupertino
+
+A FlutterJS package
+
+## Installation
+
+Add to `pubspec.yaml`:
+
+```yaml
+dependencies:
+  flutterjs_cupertino: ^0.1.0
+```
+
+Then run:
+
+```bash
+flutterjs get
+```
+
+## Usage
+
+See `example/` for a complete Flutter app.
+
+## JavaScript Implementation
+
+The actual implementation is in `js/src/` (JavaScript).
+
+To develop:
+
+```bash
+cd js
+npm install
+```
+
+## Features
+
+- Lightweight implementation
+- SEO-friendly (FlutterJS rendering)
+- Easy to use
+
+## Publishing
+
+### 1. Publish JavaScript to npm
+
+```bash
+cd js
+npm publish
+```
+
+### 2. Publish Dart wrapper to pub.dev
+
+```bash
+dart pub publish
+```
+
+## License
+
+MIT
diff --git a/packages/flutterjs_cupertino/example/lib/main.dart b/packages/flutterjs_cupertino/example/lib/main.dart
new file mode 100644
index 00000000..e33e53e4
--- /dev/null
+++ b/packages/flutterjs_cupertino/example/lib/main.dart
@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'FlutterjsCupertino Example',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: const ExamplePage(),
+    );
+  }
+}
+
+class ExamplePage extends StatefulWidget {
+  const ExamplePage({Key? key}) : super(key: key);
+
+  @override
+  State<ExamplePage> createState() => _ExamplePageState();
+}
+
+class _ExamplePageState extends State<ExamplePage> {
+  String result = 'Click the button to test';
+
+  void _testPackage() {
+    setState(() {
+      // This will call the JavaScript implementation when running with FlutterJS
+      result = 'FlutterjsCupertino is ready!\n\nRun: flutterjs run --to-js --serve';
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('FlutterjsCupertino Example'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              result,
+              textAlign: TextAlign.center,
+              style: const TextStyle(fontSize: 16),
+            ),
+            const SizedBox(height: 20),
+            ElevatedButton(
+              onPressed: _testPackage,
+              child: const Text('Test FlutterjsCupertino'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/packages/flutterjs_cupertino/example/pubspec.yaml b/packages/flutterjs_cupertino/example/pubspec.yaml
new file mode 100644
index 00000000..4746a6bc
--- /dev/null
+++ b/packages/flutterjs_cupertino/example/pubspec.yaml
@@ -0,0 +1,15 @@
+name: flutterjs_cupertino_example
+description: Example app for flutterjs_cupertino
+
+publish_to: 'none'
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
diff --git a/packages/flutterjs_cupertino/flutterjs_cupertino/build.js b/packages/flutterjs_cupertino/flutterjs_cupertino/build.js
new file mode 100644
index 00000000..854be9d6
--- /dev/null
+++ b/packages/flutterjs_cupertino/flutterjs_cupertino/build.js
@@ -0,0 +1,99 @@
+/**
+ * Build script for @flutterjs/flutterjs_cupertino
+ * 
+ * Generates exports.json manifest for the import resolver system
+ */
+
+import { readFileSync, writeFileSync, readdirSync, statSync } from 'fs';
+import { join, extname } from 'path';
+
+const srcDir = './src';
+
+/**
+ * Get all JavaScript files recursively
+ */
+function getAllJsFiles(dir, fileList = []) {
+  const files = readdirSync(dir);
+  
+  for (const file of files) {
+    const filePath = join(dir, file);
+    const stat = statSync(filePath);
+    
+    if (stat.isDirectory()) {
+      getAllJsFiles(filePath, fileList);
+    } else if (extname(file) === '.js') {
+      fileList.push(filePath);
+    }
+  }
+  
+  return fileList;
+}
+
+/**
+ * Scan all source files and generate exports.json manifest
+ * This manifest tells the Dart code generator what symbols this package exports
+ */
+function generateExportManifest(sourceFiles) {
+  const manifest = {
+    package: '@flutterjs/flutterjs_cupertino',
+    version: '0.1.0',
+    exports: []
+  };
+
+  // Regex patterns to match different export types
+  const exportRegex = /export\s*{\s*([^}]+)\s*}/g;
+  const exportStarRegex = /export\s*\*\s*from/g;
+  const classRegex = /export\s+class\s+(\w+)/g;
+  const functionRegex = /export\s+function\s+(\w+)/g;
+  const constRegex = /export\s+const\s+(\w+)/g;
+
+  for (const srcFile of sourceFiles) {
+    const content = readFileSync(srcFile, 'utf8');
+    
+    // Find named exports: export { Foo, Bar }
+    for (const match of content.matchAll(exportRegex)) {
+      const symbols = match[1]
+        .split(',')
+        .map(s => s.trim())
+        .map(s => s.split(/\s+as\s+/).pop()) // Handle "export { Foo as Bar }"
+        .filter(s => s && !s.includes('from'));
+      manifest.exports.push(...symbols);
+    }
+    
+    // Find class exports: export class Foo
+    for (const match of content.matchAll(classRegex)) {
+      manifest.exports.push(match[1]);
+    }
+    
+    // Find function exports: export function foo()
+    for (const match of content.matchAll(functionRegex)) {
+      manifest.exports.push(match[1]);
+    }
+    
+    // Find const exports: export const FOO
+    for (const match of content.matchAll(constRegex)) {
+      manifest.exports.push(match[1]);
+    }
+  }
+
+  // Remove duplicates and sort
+  manifest.exports = [...new Set(manifest.exports)].sort();
+
+  writeFileSync('./exports.json', JSON.stringify(manifest, null, 2) + '\n');
+  console.log(`📋 Generated exports.json with ${manifest.exports.length} symbols\n`);
+}
+
+// Main build process
+async function build() {
+  console.log('🚀 Building @flutterjs/flutterjs_cupertino...\n');
+
+  const allFiles = getAllJsFiles(srcDir);
+  console.log(`📦 Found ${allFiles.length} JavaScript files\n`);
+
+  // Generate export manifest
+  generateExportManifest(allFiles);
+
+  console.log('✅ Build successful!\n');
+}
+
+build().catch(console.error);
diff --git a/packages/flutterjs_cupertino/flutterjs_cupertino/package.json b/packages/flutterjs_cupertino/flutterjs_cupertino/package.json
new file mode 100644
index 00000000..261be321
--- /dev/null
+++ b/packages/flutterjs_cupertino/flutterjs_cupertino/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@flutterjs/flutterjs_cupertino",
+  "version": "0.1.0",
+  "description": "A FlutterJS package",
+  "main": "src/index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"No tests yet\"",
+    "prepublishOnly": "echo \"Ready to publish\""
+  },
+  "keywords": [
+    "flutterjs",
+    "flutterjs_cupertino"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/flutterjsdev/flutterjs.git"
+  },
+  "files": [
+    "src/",
+    "README.md",
+    "LICENSE"
+  ]
+}
diff --git a/packages/flutterjs_cupertino/flutterjs_cupertino/src/index.js b/packages/flutterjs_cupertino/flutterjs_cupertino/src/index.js
new file mode 100644
index 00000000..7187a7bb
--- /dev/null
+++ b/packages/flutterjs_cupertino/flutterjs_cupertino/src/index.js
@@ -0,0 +1,43 @@
+/**
+ * FlutterJS FlutterjsCupertino
+ * 
+ * Simple, lightweight implementation built with JavaScript
+ */
+
+/**
+ * Main class for FlutterjsCupertino
+ */
+export class FlutterjsCupertino {
+  constructor(config = {}) {
+    this.config = config;
+  }
+
+  /**
+   * Example method - replace with your implementation
+   */
+  hello() {
+    return 'Hello from FlutterjsCupertino!';
+  }
+
+  /**
+   * Example async method
+   */
+  async fetchData(url) {
+    try {
+      const response = await fetch(url);
+      return await response.json();
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      throw error;
+    }
+  }
+}
+
+/**
+ * Helper function
+ */
+export function createInstance(config) {
+  return new FlutterjsCupertino(config);
+}
+
+export default FlutterjsCupertino;
diff --git a/packages/flutterjs_cupertino/lib/flutterjs_cupertino.dart b/packages/flutterjs_cupertino/lib/flutterjs_cupertino.dart
new file mode 100644
index 00000000..d83a9649
--- /dev/null
+++ b/packages/flutterjs_cupertino/lib/flutterjs_cupertino.dart
@@ -0,0 +1,26 @@
+/// FlutterJS FlutterjsCupertino
+/// 
+/// A FlutterJS package
+/// 
+/// The actual implementation is in JavaScript.
+/// This package is a metadata wrapper published to pub.dev.
+/// 
+/// ## Usage
+/// 
+/// Add to your `pubspec.yaml`:
+/// ```yaml
+/// dependencies:
+///   flutterjs_cupertino: ^0.1.0
+/// ```
+/// 
+/// Then run:
+/// ```bash
+/// flutterjs get
+/// ```
+/// 
+/// The package will be installed to: `build/flutterjs/node_modules/@flutterjs/flutterjs_cupertino`
+/// 
+/// See `example/` for a complete working app.
+library flutterjs_cupertino;
+
+// The real implementation is in js/src/
diff --git a/packages/flutterjs_cupertino/pubspec.yaml b/packages/flutterjs_cupertino/pubspec.yaml
new file mode 100644
index 00000000..7468eb53
--- /dev/null
+++ b/packages/flutterjs_cupertino/pubspec.yaml
@@ -0,0 +1,24 @@
+name: flutterjs_cupertino
+version: 0.1.0
+description: A FlutterJS package
+
+homepage: https://github.com/flutterjs/flutterjs_cupertino
+repository: https://github.com/flutterjs/flutterjs_cupertino
+issue_tracker: https://github.com/flutterjs/flutterjs_cupertino/issues
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+# FlutterJS metadata
+flutterjs:
+  npm_package: "@flutterjs/flutterjs_cupertino"
+  implementation_language: "javascript"
+  js_entry: "js/src/index.js"
diff --git a/packages/flutterjs_dart/README.md b/packages/flutterjs_dart/README.md
new file mode 100644
index 00000000..1a4e54cc
--- /dev/null
+++ b/packages/flutterjs_dart/README.md
@@ -0,0 +1,44 @@
+# @flutterjs/dart
+
+This package provides JavaScript implementations of Dart's core libraries for the FlutterJS runtime. It allows Dart code transpiled by FlutterJS to access standard Dart APIs like `dart:math`, `dart:async`, and `dart:convert` using native JavaScript equivalents.
+
+## Supported Libraries
+
+| Dart Library | Implementation Status | Description |
+| :--- | :--- | :--- |
+| `dart:math` | ✅ Implemented | Wraps JS `Math`, plus `Point`, `Rectangle`. |
+| `dart:async` | ✅ Implemented | `Future` (Promise), `Timer`, `Completer`. |
+| `dart:convert`| ✅ Implemented | `JSON`, `utf8`, `base64`. |
+| `dart:collection`| ✅ Implemented | `Queue`, `LinkedList`, `HashMap`, `HashSet`. |
+| `dart:developer`| ✅ Implemented | `log`, `inspect`, `debugger`. |
+| `dart:typed_data`| ✅ Implemented | `Uint8Array` wrappers, `ByteBuffer`. |
+| `dart:core` | 🚧 Partially Implemented | Basic primitives handled by transpiler. |
+
+## Usage
+
+This package is automatically used by the FlutterJS toolchain. When you import a core library in your Dart code:
+
+```dart
+import 'dart:math';
+```
+
+The FlutterJS transpiler converts this to an import from this package:
+
+```javascript
+import { Point, Random } from '@flutterjs/dart/math'; // Maps to dist/math/index.js
+```
+
+## Structure
+
+- `src/`: Source code for each library module.
+- `dist/`: Compiled JavaScript output (generated by `npm run build`).
+- `build.js`: Build script using esbuild.
+
+## Building
+
+To build the package manually:
+
+```bash
+npm install
+npm run build
+```
diff --git a/packages/flutterjs_dart/build.js b/packages/flutterjs_dart/build.js
new file mode 100644
index 00000000..d7459214
--- /dev/null
+++ b/packages/flutterjs_dart/build.js
@@ -0,0 +1,207 @@
+import esbuild from 'esbuild';
+import { readFileSync, writeFileSync, readdirSync, statSync, watch } from 'fs';
+import { join, relative, extname } from 'path';
+
+const srcDir = 'src';
+const outDir = 'dist';
+
+/**
+ * ✅ Recursively find ALL .js files in src/
+ */
+function getAllJsFiles(dir) {
+    const files = [];
+    const items = readdirSync(dir);
+
+    for (const item of items) {
+        const fullPath = join(dir, item);
+        const stat = statSync(fullPath);
+
+        if (stat.isDirectory()) {
+            files.push(...getAllJsFiles(fullPath));
+        } else if (extname(item) === '.js') {
+            files.push(fullPath);
+        }
+    }
+
+    return files;
+}
+
+/**
+ * Build each .js file separately
+ */
+async function buildAllFiles() {
+    try {
+        console.log('🚀 Building @flutterjs/dart...\n');
+
+        // ✅ Find all .js files
+        const allFiles = getAllJsFiles(srcDir);
+
+        console.log(`📁 Found ${allFiles.length} files\n`);
+
+        // ✅ Build each file separately
+        for (const srcFile of allFiles) {
+            const relativePath = relative(srcDir, srcFile);
+            const outFile = join(outDir, relativePath);
+
+            console.log(`📦 ${relativePath}`);
+
+            await esbuild.build({
+                entryPoints: [srcFile],
+                outfile: outFile,
+                bundle: false,
+                minify: true,
+                platform: 'browser',
+                target: ['es2020'],
+                format: 'esm',
+                sourcemap: true,
+            });
+        }
+
+        console.log();
+
+        // ✅ Generate exports based on all built files
+        generateExports(allFiles);
+
+        // ✅ Generate export manifest for Dart code generator
+        generateExportManifest(allFiles);
+
+        console.log('✅ Build successful!\n');
+
+    } catch (error) {
+        console.error('❌ Build failed:', error.message);
+    }
+}
+
+/**
+ * Auto-generate package.json exports in the exact format requested
+ */
+function generateExports(sourceFiles) {
+    const packageJsonPath = './package.json';
+    const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
+
+    const exports = {};
+
+    // Main entry point
+    exports['.'] = './dist/index.js';
+
+    for (const srcFile of sourceFiles) {
+        const relativePath = relative(srcDir, srcFile);
+
+        // Skip index.js - it's already the main entry
+        if (relativePath === 'index.js') {
+            continue;
+        }
+
+        // Convert path with .js extension:
+        // math/index.js -> ./math/index.js (normalized)
+
+        // Normalize slashes for Windows
+        const normalizedPath = relativePath.replace(/\\/g, '/');
+
+        // For submodules like math/index.js, we want to expose them as:
+        // "./math": "./dist/math/index.js"
+        // And also potentially specific files if needed.
+
+        // If filename is index.js, export the parent directory name
+        if (normalizedPath.endsWith('/index.js')) {
+            const dirName = normalizedPath.replace('/index.js', '');
+            const exportKey = './' + dirName;
+            const exportPath = './dist/' + normalizedPath;
+            exports[exportKey] = exportPath;
+        } else {
+            // Normal file
+            const exportKey = './' + normalizedPath.replaceAll(".js", "");
+            const exportPath = './dist/' + normalizedPath;
+            exports[exportKey] = exportPath;
+        }
+    }
+
+    // Update package.json
+    packageJson.exports = exports;
+    packageJson.main = './dist/index.js';
+
+    writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n');
+
+    console.log('📝 Generated exports:\n');
+    Object.entries(exports).forEach(([key, value]) => {
+        console.log(`   "${key}": "${value}"`);
+    });
+    console.log();
+}
+
+/**
+ * Scan all source files and generate exports.json manifest
+ * This manifest tells the Dart code generator what symbols this package exports
+ */
+function generateExportManifest(sourceFiles) {
+    const manifest = {
+        package: '@flutterjs/dart',
+        version: '1.0.0',
+        exports: []
+    };
+
+    // Regex patterns to match different export types
+    const exportRegex = /export\s*{\s*([^}]+)\s*}/g;
+    const classRegex = /export\s+class\s+(\w+)/g;
+    const functionRegex = /export\s+function\s+(\w+)/g;
+    const constRegex = /export\s+const\s+(\w+)/g;
+
+    for (const srcFile of sourceFiles) {
+        const content = readFileSync(srcFile, 'utf8');
+
+        // Find named exports: export { Foo, Bar }
+        for (const match of content.matchAll(exportRegex)) {
+            const symbols = match[1]
+                .split(',')
+                .map(s => s.trim())
+                .map(s => s.split(/\s+as\s+/).pop()) // Handle "export { Foo as Bar }"
+                .filter(s => s && !s.includes('from'));
+
+            manifest.exports.push(...symbols);
+        }
+
+        // Find class exports: export class Foo
+        for (const match of content.matchAll(classRegex)) {
+            manifest.exports.push(match[1]);
+        }
+
+        // Find function exports: export function foo()
+        for (const match of content.matchAll(functionRegex)) {
+            manifest.exports.push(match[1]);
+        }
+
+        // Find const exports: export const FOO
+        for (const match of content.matchAll(constRegex)) {
+            manifest.exports.push(match[1]);
+        }
+    }
+
+    // Remove duplicates and sort
+    manifest.exports = [...new Set(manifest.exports)].sort();
+
+    writeFileSync('./exports.json', JSON.stringify(manifest, null, 2) + '\n');
+    console.log(`📋 Generated exports.json with ${manifest.exports.length} symbols\n`);
+}
+
+/**
+ * Watch mode - rebuild on file changes
+ */
+function watchMode() {
+    console.log('👀 Watching for changes...\n');
+
+    watch(srcDir, { recursive: true }, (eventType, filename) => {
+        if (extname(filename) === '.js') {
+            console.log(`\n⚡ ${filename} changed\n`);
+            buildAllFiles();
+        }
+    });
+}
+
+// ✅ Check for --watch flag
+const isWatchMode = process.argv.includes('--watch');
+
+if (isWatchMode) {
+    buildAllFiles().then(() => watchMode());
+} else {
+    buildAllFiles();
+}
diff --git a/packages/flutterjs_dart/dist/async/index.js b/packages/flutterjs_dart/dist/async/index.js
new file mode 100644
index 00000000..510d78e1
--- /dev/null
+++ b/packages/flutterjs_dart/dist/async/index.js
@@ -0,0 +1,2 @@
+class c{constructor(e,t){this._timer=setTimeout(t,e.inMilliseconds||e)}static periodic(e,t){const r=new c(0,()=>{});return clearTimeout(r._timer),r._timer=setInterval(()=>t(r),e.inMilliseconds||e),r}static run(e){setTimeout(e,0)}cancel(){clearTimeout(this._timer),clearInterval(this._timer)}}class i{constructor(e){this._promise=new Promise((t,r)=>{try{const s=e();t(s)}catch(s){r(s)}})}static _wrap(e){const t=new i(()=>{});return t._promise=e,t}static value(e){return i._wrap(Promise.resolve(e))}static error(e){return i._wrap(Promise.reject(e))}static delayed(e,t){return i._wrap(new Promise((r,s)=>{setTimeout(()=>{try{r(t?t():null)}catch(n){s(n)}},e.inMilliseconds||e)}))}static wait(e){const t=e.map(r=>r instanceof i?r._promise:r);return i._wrap(Promise.all(t))}then(e,{onError:t}={}){const r=this._promise.then(s=>e(s),s=>{if(t)return t(s);throw s});return i._wrap(r)}catchError(e,{test:t}={}){const r=this._promise.catch(s=>{if(t&&!t(s))throw s;return e(s)});return i._wrap(r)}whenComplete(e){const t=this._promise.finally(()=>e());return i._wrap(t)}thenJS(e,t){return this._promise.then(e,t)}}class l{constructor(){this.future=new i(()=>{}),this.future._promise=new Promise((e,t)=>{this._resolve=e,this._reject=t})}complete(e){this._resolve(e)}completeError(e){this._reject(e)}get isCompleted(){return!1}}class a{constructor(){}}class m{constructor(){this.stream=new a}}export{l as Completer,i as Future,a as Stream,m as StreamController,c as Timer};
+//# sourceMappingURL=index.js.map
diff --git a/packages/flutterjs_dart/dist/async/index.js.map b/packages/flutterjs_dart/dist/async/index.js.map
new file mode 100644
index 00000000..b4b575ae
--- /dev/null
+++ b/packages/flutterjs_dart/dist/async/index.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/async/index.js"],
+  "sourcesContent": ["// dart:async implementation\r\n\r\nexport class Timer {\r\n    constructor(duration, callback) {\r\n        this._timer = setTimeout(callback, duration.inMilliseconds || duration);\r\n    }\r\n\r\n    static periodic(duration, callback) {\r\n        const timer = new Timer(0, () => { });\r\n        // Clear initial timeout, set interval\r\n        clearTimeout(timer._timer);\r\n        timer._timer = setInterval(() => callback(timer), duration.inMilliseconds || duration);\r\n        return timer;\r\n    }\r\n\r\n    static run(callback) {\r\n        setTimeout(callback, 0);\r\n    }\r\n\r\n    cancel() {\r\n        clearTimeout(this._timer); // Works for clearInterval too in browsers usually\r\n        clearInterval(this._timer);\r\n    }\r\n}\r\n\r\nexport class Future {\r\n    constructor(computation) {\r\n        this._promise = new Promise((resolve, reject) => {\r\n            try {\r\n                const result = computation();\r\n                resolve(result);\r\n            } catch (e) {\r\n                reject(e);\r\n            }\r\n        });\r\n    }\r\n\r\n    // Internal: wrap existing promise\r\n    static _wrap(promise) {\r\n        const f = new Future(() => { });\r\n        f._promise = promise;\r\n        return f;\r\n    }\r\n\r\n    static value(value) {\r\n        return Future._wrap(Promise.resolve(value));\r\n    }\r\n\r\n    static error(error) {\r\n        return Future._wrap(Promise.reject(error));\r\n    }\r\n\r\n    static delayed(duration, computation) {\r\n        return Future._wrap(new Promise((resolve, reject) => {\r\n            setTimeout(() => {\r\n                try {\r\n                    if (computation) {\r\n                        resolve(computation());\r\n                    } else {\r\n                        resolve(null);\r\n                    }\r\n                } catch (e) {\r\n                    reject(e);\r\n                }\r\n            }, duration.inMilliseconds || duration);\r\n        }));\r\n    }\r\n\r\n    static wait(futures) {\r\n        const promises = futures.map(f => f instanceof Future ? f._promise : f);\r\n        return Future._wrap(Promise.all(promises));\r\n    }\r\n\r\n    then(onValue, { onError } = {}) {\r\n        const p = this._promise.then(\r\n            val => onValue(val),\r\n            err => {\r\n                if (onError) {\r\n                    return onError(err);\r\n                }\r\n                throw err;\r\n            }\r\n        );\r\n        return Future._wrap(p);\r\n    }\r\n\r\n    catchError(onError, { test } = {}) {\r\n        const p = this._promise.catch(err => {\r\n            if (test && !test(err)) throw err;\r\n            return onError(err);\r\n        });\r\n        return Future._wrap(p);\r\n    }\r\n\r\n    whenComplete(action) {\r\n        const p = this._promise.finally(() => {\r\n            return action();\r\n        });\r\n        return Future._wrap(p);\r\n    }\r\n\r\n    // To allow await in JS specific code if needed (not standard Dart but helpful)\r\n    thenJS(onFulfilled, onRejected) {\r\n        return this._promise.then(onFulfilled, onRejected);\r\n    }\r\n}\r\n\r\nexport class Completer {\r\n    constructor() {\r\n        this.future = new Future(() => { });\r\n        // Replace the promise with one we control\r\n        this.future._promise = new Promise((resolve, reject) => {\r\n            this._resolve = resolve;\r\n            this._reject = reject;\r\n        });\r\n    }\r\n\r\n    complete(value) {\r\n        this._resolve(value);\r\n    }\r\n\r\n    completeError(error) {\r\n        this._reject(error);\r\n    }\r\n\r\n    get isCompleted() {\r\n        // Hard to track without extra state, skipping for lightweight wrapper\r\n        return false;\r\n    }\r\n}\r\n\r\nexport class Stream {\r\n    constructor() {\r\n        // Basic placeholder\r\n    }\r\n    // TODO: Full Stream implementation\r\n}\r\n\r\nexport class StreamController {\r\n    constructor() {\r\n        this.stream = new Stream();\r\n    }\r\n    // TODO: Full StreamController implementation\r\n}\r\n"],
+  "mappings": "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",
+  "names": ["Timer", "duration", "callback", "timer", "Future", "computation", "resolve", "reject", "result", "e", "promise", "f", "value", "error", "futures", "promises", "onValue", "onError", "p", "val", "err", "test", "action", "onFulfilled", "onRejected", "Completer", "Stream", "StreamController"]
+}
diff --git a/packages/flutterjs_dart/dist/collection/index.js b/packages/flutterjs_dart/dist/collection/index.js
new file mode 100644
index 00000000..21ead91a
--- /dev/null
+++ b/packages/flutterjs_dart/dist/collection/index.js
@@ -0,0 +1,2 @@
+class i{constructor(){this._list=[]}add(t){this._list.push(t)}addFirst(t){this._list.unshift(t)}addLast(t){this._list.push(t)}removeFirst(){return this._list.shift()}removeLast(){return this._list.pop()}get first(){return this._list[0]}get last(){return this._list[this._list.length-1]}get length(){return this._list.length}get isEmpty(){return this._list.length===0}get isNotEmpty(){return this._list.length>0}toList(){return[...this._list]}}class h{constructor(){this._head=null,this._tail=null,this._length=0}add(t){this._head?(this._tail.next=t,t.previous=this._tail,this._tail=t):(this._head=t,this._tail=t),this._length++}get length(){return this._length}}class e{constructor(){this.list=null,this.previous=null,this.next=null}unlink(){}}const l=Map,r=Set;export{l as HashMap,r as HashSet,h as LinkedList,e as LinkedListEntry,i as Queue};
+//# sourceMappingURL=index.js.map
diff --git a/packages/flutterjs_dart/dist/collection/index.js.map b/packages/flutterjs_dart/dist/collection/index.js.map
new file mode 100644
index 00000000..77bd7d03
--- /dev/null
+++ b/packages/flutterjs_dart/dist/collection/index.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/collection/index.js"],
+  "sourcesContent": ["// dart:collection implementation\r\n\r\nexport class Queue {\r\n    constructor() {\r\n        this._list = [];\r\n    }\r\n\r\n    add(value) { this._list.push(value); }\r\n    addFirst(value) { this._list.unshift(value); }\r\n    addLast(value) { this._list.push(value); }\r\n\r\n    removeFirst() { return this._list.shift(); }\r\n    removeLast() { return this._list.pop(); }\r\n\r\n    get first() { return this._list[0]; }\r\n    get last() { return this._list[this._list.length - 1]; }\r\n    get length() { return this._list.length; }\r\n    get isEmpty() { return this._list.length === 0; }\r\n    get isNotEmpty() { return this._list.length > 0; }\r\n\r\n    toList() { return [...this._list]; }\r\n}\r\n\r\nexport class LinkedList {\r\n    constructor() {\r\n        this._head = null;\r\n        this._tail = null;\r\n        this._length = 0;\r\n    }\r\n\r\n    add(entry) {\r\n        if (!this._head) {\r\n            this._head = entry;\r\n            this._tail = entry;\r\n        } else {\r\n            this._tail.next = entry;\r\n            entry.previous = this._tail;\r\n            this._tail = entry;\r\n        }\r\n        this._length++;\r\n    }\r\n\r\n    // Minimal implementation for now\r\n    get length() { return this._length; }\r\n}\r\n\r\nexport class LinkedListEntry {\r\n    constructor() {\r\n        this.list = null;\r\n        this.previous = null;\r\n        this.next = null;\r\n    }\r\n\r\n    unlink() {\r\n        // TODO impl\r\n    }\r\n}\r\n\r\n// Maps and Sets are just native JS Map/Set usually, but we can export helpers\r\nexport const HashMap = Map;\r\nexport const HashSet = Set;\r\n"],
+  "mappings": "AAEO,MAAMA,CAAM,CACf,aAAc,CACV,KAAK,MAAQ,CAAC,CAClB,CAEA,IAAIC,EAAO,CAAE,KAAK,MAAM,KAAKA,CAAK,CAAG,CACrC,SAASA,EAAO,CAAE,KAAK,MAAM,QAAQA,CAAK,CAAG,CAC7C,QAAQA,EAAO,CAAE,KAAK,MAAM,KAAKA,CAAK,CAAG,CAEzC,aAAc,CAAE,OAAO,KAAK,MAAM,MAAM,CAAG,CAC3C,YAAa,CAAE,OAAO,KAAK,MAAM,IAAI,CAAG,CAExC,IAAI,OAAQ,CAAE,OAAO,KAAK,MAAM,CAAC,CAAG,CACpC,IAAI,MAAO,CAAE,OAAO,KAAK,MAAM,KAAK,MAAM,OAAS,CAAC,CAAG,CACvD,IAAI,QAAS,CAAE,OAAO,KAAK,MAAM,MAAQ,CACzC,IAAI,SAAU,CAAE,OAAO,KAAK,MAAM,SAAW,CAAG,CAChD,IAAI,YAAa,CAAE,OAAO,KAAK,MAAM,OAAS,CAAG,CAEjD,QAAS,CAAE,MAAO,CAAC,GAAG,KAAK,KAAK,CAAG,CACvC,CAEO,MAAMC,CAAW,CACpB,aAAc,CACV,KAAK,MAAQ,KACb,KAAK,MAAQ,KACb,KAAK,QAAU,CACnB,CAEA,IAAIC,EAAO,CACF,KAAK,OAIN,KAAK,MAAM,KAAOA,EAClBA,EAAM,SAAW,KAAK,MACtB,KAAK,MAAQA,IALb,KAAK,MAAQA,EACb,KAAK,MAAQA,GAMjB,KAAK,SACT,CAGA,IAAI,QAAS,CAAE,OAAO,KAAK,OAAS,CACxC,CAEO,MAAMC,CAAgB,CACzB,aAAc,CACV,KAAK,KAAO,KACZ,KAAK,SAAW,KAChB,KAAK,KAAO,IAChB,CAEA,QAAS,CAET,CACJ,CAGO,MAAMC,EAAU,IACVC,EAAU",
+  "names": ["Queue", "value", "LinkedList", "entry", "LinkedListEntry", "HashMap", "HashSet"]
+}
diff --git a/packages/flutterjs_dart/dist/convert/index.js b/packages/flutterjs_dart/dist/convert/index.js
new file mode 100644
index 00000000..0c3f1d5f
--- /dev/null
+++ b/packages/flutterjs_dart/dist/convert/index.js
@@ -0,0 +1,2 @@
+const u={decode:e=>JSON.parse(e),encode:e=>JSON.stringify(e)};function i(e){return JSON.parse(e)}function s(e){return JSON.stringify(e)}const c=typeof TextEncoder<"u"?new TextEncoder:null,d=typeof TextDecoder<"u"?new TextDecoder:null,a={encode:e=>c?c.encode(e):new Uint8Array(Buffer.from(e,"utf-8")),decode:e=>d?d.decode(e):Buffer.from(e).toString("utf-8")},f={encode:e=>{let o="";const r=e.byteLength;for(let n=0;n<r;n++)o+=String.fromCharCode(e[n]);return btoa(o)},decode:e=>{const o=atob(e),r=o.length,n=new Uint8Array(r);for(let t=0;t<r;t++)n[t]=o.charCodeAt(t);return n}};function p(e){return f.encode(e)}function x(e){return f.decode(e)}export{f as base64,x as base64Decode,p as base64Encode,u as json,i as jsonDecode,s as jsonEncode,a as utf8};
+//# sourceMappingURL=index.js.map
diff --git a/packages/flutterjs_dart/dist/convert/index.js.map b/packages/flutterjs_dart/dist/convert/index.js.map
new file mode 100644
index 00000000..81bd058d
--- /dev/null
+++ b/packages/flutterjs_dart/dist/convert/index.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/convert/index.js"],
+  "sourcesContent": ["// dart:convert implementation\r\n\r\n// --- JSON ---\r\nexport const json = {\r\n    decode: (source) => JSON.parse(source),\r\n    encode: (object) => JSON.stringify(object),\r\n};\r\n\r\nexport function jsonDecode(source) {\r\n    return JSON.parse(source);\r\n}\r\n\r\nexport function jsonEncode(object) {\r\n    return JSON.stringify(object);\r\n}\r\n\r\n// --- UTF8 ---\r\n// Can likely assume Timer/Browser env has TextEncoder/TextDecoder\r\nconst _encoder = typeof TextEncoder !== 'undefined' ? new TextEncoder() : null;\r\nconst _decoder = typeof TextDecoder !== 'undefined' ? new TextDecoder() : null;\r\n\r\nexport const utf8 = {\r\n    encode: (string) => {\r\n        if (_encoder) return _encoder.encode(string);\r\n        // Fallback or error if not in browser/node\r\n        return new Uint8Array(Buffer.from(string, 'utf-8'));\r\n    },\r\n    decode: (bytes) => {\r\n        if (_decoder) return _decoder.decode(bytes);\r\n        return Buffer.from(bytes).toString('utf-8');\r\n    }\r\n};\r\n\r\n// --- Base64 ---\r\nexport const base64 = {\r\n    encode: (bytes) => {\r\n        // Handle bytes -> string\r\n        let binary = '';\r\n        const len = bytes.byteLength;\r\n        for (let i = 0; i < len; i++) {\r\n            binary += String.fromCharCode(bytes[i]);\r\n        }\r\n        return btoa(binary);\r\n    },\r\n    decode: (source) => {\r\n        const binary = atob(source);\r\n        const len = binary.length;\r\n        const bytes = new Uint8Array(len);\r\n        for (let i = 0; i < len; i++) {\r\n            bytes[i] = binary.charCodeAt(i);\r\n        }\r\n        return bytes;\r\n    }\r\n};\r\n\r\nexport function base64Encode(bytes) {\r\n    return base64.encode(bytes);\r\n}\r\n\r\nexport function base64Decode(source) {\r\n    return base64.decode(source);\r\n}\r\n"],
+  "mappings": "AAGO,MAAMA,EAAO,CAChB,OAASC,GAAW,KAAK,MAAMA,CAAM,EACrC,OAASC,GAAW,KAAK,UAAUA,CAAM,CAC7C,EAEO,SAASC,EAAWF,EAAQ,CAC/B,OAAO,KAAK,MAAMA,CAAM,CAC5B,CAEO,SAASG,EAAWF,EAAQ,CAC/B,OAAO,KAAK,UAAUA,CAAM,CAChC,CAIA,MAAMG,EAAW,OAAO,YAAgB,IAAc,IAAI,YAAgB,KACpEC,EAAW,OAAO,YAAgB,IAAc,IAAI,YAAgB,KAE7DC,EAAO,CAChB,OAASC,GACDH,EAAiBA,EAAS,OAAOG,CAAM,EAEpC,IAAI,WAAW,OAAO,KAAKA,EAAQ,OAAO,CAAC,EAEtD,OAASC,GACDH,EAAiBA,EAAS,OAAOG,CAAK,EACnC,OAAO,KAAKA,CAAK,EAAE,SAAS,OAAO,CAElD,EAGaC,EAAS,CAClB,OAASD,GAAU,CAEf,IAAIE,EAAS,GACb,MAAMC,EAAMH,EAAM,WAClB,QAASI,EAAI,EAAGA,EAAID,EAAKC,IACrBF,GAAU,OAAO,aAAaF,EAAMI,CAAC,CAAC,EAE1C,OAAO,KAAKF,CAAM,CACtB,EACA,OAASV,GAAW,CAChB,MAAMU,EAAS,KAAKV,CAAM,EACpBW,EAAMD,EAAO,OACbF,EAAQ,IAAI,WAAWG,CAAG,EAChC,QAASC,EAAI,EAAGA,EAAID,EAAKC,IACrBJ,EAAMI,CAAC,EAAIF,EAAO,WAAWE,CAAC,EAElC,OAAOJ,CACX,CACJ,EAEO,SAASK,EAAaL,EAAO,CAChC,OAAOC,EAAO,OAAOD,CAAK,CAC9B,CAEO,SAASM,EAAad,EAAQ,CACjC,OAAOS,EAAO,OAAOT,CAAM,CAC/B",
+  "names": ["json", "source", "object", "jsonDecode", "jsonEncode", "_encoder", "_decoder", "utf8", "string", "bytes", "base64", "binary", "len", "i", "base64Encode", "base64Decode"]
+}
diff --git a/packages/flutterjs_dart/dist/developer/index.js b/packages/flutterjs_dart/dist/developer/index.js
new file mode 100644
index 00000000..05542beb
--- /dev/null
+++ b/packages/flutterjs_dart/dist/developer/index.js
@@ -0,0 +1,2 @@
+function u(e,{time:r,sequenceNumber:c,level:l=0,name:n="",zone:s,error:t,stackTrace:o}={}){const i=`[${r?new Date(r).toLocaleTimeString():new Date().toLocaleTimeString()}] ${n?n+": ":""}`;t?(console.error(i+e,t),o&&console.error(o)):console.log(i+e)}function g(e){return console.dir(e),e}function a({message:e,when:r=!0}={}){if(r){e&&console.log(`Debugger triggered: ${e}`);debugger;return!0}return!1}class p{static startSync(r,{arguments:c}={}){typeof performance<"u"&&performance.mark(r)}static finishSync(){}}export{p as Timeline,a as debugger_,g as inspect,u as log};
+//# sourceMappingURL=index.js.map
diff --git a/packages/flutterjs_dart/dist/developer/index.js.map b/packages/flutterjs_dart/dist/developer/index.js.map
new file mode 100644
index 00000000..e7137674
--- /dev/null
+++ b/packages/flutterjs_dart/dist/developer/index.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/developer/index.js"],
+  "sourcesContent": ["// dart:developer implementation\r\n\r\nexport function log(message, { time, sequenceNumber, level = 0, name = '', zone, error, stackTrace } = {}) {\r\n    const timestamp = time ? new Date(time).toLocaleTimeString() : new Date().toLocaleTimeString();\r\n    const prefix = `[${timestamp}] ${name ? name + ': ' : ''}`;\r\n\r\n    if (error) {\r\n        console.error(prefix + message, error);\r\n        if (stackTrace) console.error(stackTrace);\r\n    } else {\r\n        console.log(prefix + message);\r\n    }\r\n}\r\n\r\nexport function inspect(object) {\r\n    console.dir(object);\r\n    return object;\r\n}\r\n\r\nexport function debugger_({ message, when = true } = {}) {\r\n    if (when) {\r\n        if (message) console.log(`Debugger triggered: ${message}`);\r\n        // eslint-disable-next-line\r\n        debugger;\r\n        return true;\r\n    }\r\n    return false;\r\n}\r\n\r\nexport class Timeline {\r\n    static startSync(name, { arguments: args } = {}) {\r\n        // Use User Timing API\r\n        if (typeof performance !== 'undefined') {\r\n            performance.mark(name);\r\n        }\r\n    }\r\n\r\n    static finishSync() {\r\n        // Ideally we'd match the last mark, but JS performance API is event based.\r\n        // This is a loose approximation.\r\n    }\r\n}\r\n"],
+  "mappings": "AAEO,SAASA,EAAIC,EAAS,CAAE,KAAAC,EAAM,eAAAC,EAAgB,MAAAC,EAAQ,EAAG,KAAAC,EAAO,GAAI,KAAAC,EAAM,MAAAC,EAAO,WAAAC,CAAW,EAAI,CAAC,EAAG,CAEvG,MAAMC,EAAS,IADGP,EAAO,IAAI,KAAKA,CAAI,EAAE,mBAAmB,EAAI,IAAI,KAAK,EAAE,mBAAmB,CACjE,KAAKG,EAAOA,EAAO,KAAO,EAAE,GAEpDE,GACA,QAAQ,MAAME,EAASR,EAASM,CAAK,EACjCC,GAAY,QAAQ,MAAMA,CAAU,GAExC,QAAQ,IAAIC,EAASR,CAAO,CAEpC,CAEO,SAASS,EAAQC,EAAQ,CAC5B,eAAQ,IAAIA,CAAM,EACXA,CACX,CAEO,SAASC,EAAU,CAAE,QAAAX,EAAS,KAAAY,EAAO,EAAK,EAAI,CAAC,EAAG,CACrD,GAAIA,EAAM,CACFZ,GAAS,QAAQ,IAAI,uBAAuBA,CAAO,EAAE,EAEzD,SACA,MAAO,EACX,CACA,MAAO,EACX,CAEO,MAAMa,CAAS,CAClB,OAAO,UAAUT,EAAM,CAAE,UAAWU,CAAK,EAAI,CAAC,EAAG,CAEzC,OAAO,YAAgB,KACvB,YAAY,KAAKV,CAAI,CAE7B,CAEA,OAAO,YAAa,CAGpB,CACJ",
+  "names": ["log", "message", "time", "sequenceNumber", "level", "name", "zone", "error", "stackTrace", "prefix", "inspect", "object", "debugger_", "when", "Timeline", "args"]
+}
diff --git a/packages/flutterjs_dart/dist/index.js b/packages/flutterjs_dart/dist/index.js
new file mode 100644
index 00000000..6c74e16a
--- /dev/null
+++ b/packages/flutterjs_dart/dist/index.js
@@ -0,0 +1,2 @@
+import*as r from"./math/index.js";import*as e from"./async/index.js";import*as t from"./convert/index.js";import*as a from"./collection/index.js";import*as p from"./developer/index.js";import*as m from"./typed_data/index.js";export{e as async,a as collection,t as convert,p as developer,r as math,m as typed_data};
+//# sourceMappingURL=index.js.map
diff --git a/packages/flutterjs_dart/dist/index.js.map b/packages/flutterjs_dart/dist/index.js.map
new file mode 100644
index 00000000..60bf6967
--- /dev/null
+++ b/packages/flutterjs_dart/dist/index.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.js"],
+  "sourcesContent": ["export * as math from './math/index.js';\r\nexport * as async from './async/index.js';\r\nexport * as convert from './convert/index.js';\r\nexport * as collection from './collection/index.js';\r\nexport * as developer from './developer/index.js';\r\nexport * as typed_data from './typed_data/index.js';\r\n"],
+  "mappings": "AAAA,UAAYA,MAAU,kBACtB,UAAYC,MAAW,mBACvB,UAAYC,MAAa,qBACzB,UAAYC,MAAgB,wBAC5B,UAAYC,MAAe,uBAC3B,UAAYC,MAAgB",
+  "names": ["math", "async", "convert", "collection", "developer", "typed_data"]
+}
diff --git a/packages/flutterjs_dart/dist/math/index.js b/packages/flutterjs_dart/dist/math/index.js
new file mode 100644
index 00000000..c918f088
--- /dev/null
+++ b/packages/flutterjs_dart/dist/math/index.js
@@ -0,0 +1,2 @@
+const a=Math.E,i=Math.LN10,x=Math.LN2,c=Math.LOG2E,p=Math.LOG10E,M=Math.PI,u=Math.SQRT1_2,g=Math.SQRT2,l=Math.min,d=Math.max,m=Math.sqrt,y=Math.sign,L=Math.sin,R=Math.cos,b=Math.tan,f=Math.acos,w=Math.asin,E=Math.atan,S=Math.atan2,T=Math.exp,q=Math.log,G=Math.pow;class r{constructor(t,o){this.x=t,this.y=o}toString(){return`Point(${this.x}, ${this.y})`}distanceTo(t){const o=this.x-t.x,s=this.y-t.y;return Math.sqrt(o*o+s*s)}get magnitude(){return Math.sqrt(this.x*this.x+this.y*this.y)}operator_add(t){return new r(this.x+t.x,this.y+t.y)}operator_minus(t){return new r(this.x-t.x,this.y-t.y)}}class h{constructor(t,o,s,n){this.left=t,this.top=o,this.width=s,this.height=n}get right(){return this.left+this.width}get bottom(){return this.top+this.height}containsPoint(t){return t.x>=this.left&&t.x<this.right&&t.y>=this.top&&t.y<this.bottom}containsRectangle(t){return t.left>=this.left&&t.right<=this.right&&t.top>=this.top&&t.bottom<=this.bottom}}class N extends h{constructor(t,o,s,n){super(t,o,s,n)}}class O{constructor(t){}nextInt(t){return Math.floor(Math.random()*t)}nextDouble(){return Math.random()}nextBool(){return Math.random()>=.5}}export{a as E,i as LN10,x as LN2,p as LOG10E,c as LOG2E,N as MutableRectangle,M as PI,r as Point,O as Random,h as Rectangle,u as SQRT1_2,g as SQRT2,f as acos,w as asin,E as atan,S as atan2,R as cos,T as exp,q as log,d as max,l as min,G as pow,y as sign,L as sin,m as sqrt,b as tan};
+//# sourceMappingURL=index.js.map
diff --git a/packages/flutterjs_dart/dist/math/index.js.map b/packages/flutterjs_dart/dist/math/index.js.map
new file mode 100644
index 00000000..e8175598
--- /dev/null
+++ b/packages/flutterjs_dart/dist/math/index.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/math/index.js"],
+  "sourcesContent": ["// dart:math implementation\r\n\r\nexport const E = Math.E;\r\nexport const LN10 = Math.LN10;\r\nexport const LN2 = Math.LN2;\r\nexport const LOG2E = Math.LOG2E;\r\nexport const LOG10E = Math.LOG10E;\r\nexport const PI = Math.PI;\r\nexport const SQRT1_2 = Math.SQRT1_2;\r\nexport const SQRT2 = Math.SQRT2;\r\n\r\nexport const min = Math.min;\r\nexport const max = Math.max;\r\nexport const sqrt = Math.sqrt;\r\nexport const sign = Math.sign;\r\nexport const sin = Math.sin;\r\nexport const cos = Math.cos;\r\nexport const tan = Math.tan;\r\nexport const acos = Math.acos;\r\nexport const asin = Math.asin;\r\nexport const atan = Math.atan;\r\nexport const atan2 = Math.atan2;\r\nexport const exp = Math.exp;\r\nexport const log = Math.log;\r\nexport const pow = Math.pow;\r\n\r\nexport class Point {\r\n    constructor(x, y) {\r\n        this.x = x;\r\n        this.y = y;\r\n    }\r\n\r\n    toString() {\r\n        return `Point(${this.x}, ${this.y})`;\r\n    }\r\n\r\n    distanceTo(other) {\r\n        const dx = this.x - other.x;\r\n        const dy = this.y - other.y;\r\n        return Math.sqrt(dx * dx + dy * dy);\r\n    }\r\n\r\n    get magnitude() {\r\n        return Math.sqrt(this.x * this.x + this.y * this.y);\r\n    }\r\n\r\n    operator_add(other) {\r\n        return new Point(this.x + other.x, this.y + other.y);\r\n    }\r\n\r\n    operator_minus(other) {\r\n        return new Point(this.x - other.x, this.y - other.y);\r\n    }\r\n}\r\n\r\nexport class Rectangle {\r\n    constructor(left, top, width, height) {\r\n        this.left = left;\r\n        this.top = top;\r\n        this.width = width;\r\n        this.height = height;\r\n    }\r\n\r\n    get right() { return this.left + this.width; }\r\n    get bottom() { return this.top + this.height; }\r\n\r\n    containsPoint(point) {\r\n        return point.x >= this.left && point.x < this.right &&\r\n            point.y >= this.top && point.y < this.bottom;\r\n    }\r\n\r\n    containsRectangle(rect) {\r\n        return rect.left >= this.left && rect.right <= this.right &&\r\n            rect.top >= this.top && rect.bottom <= this.bottom;\r\n    }\r\n}\r\n\r\nexport class MutableRectangle extends Rectangle {\r\n    constructor(left, top, width, height) {\r\n        super(left, top, width, height);\r\n    }\r\n}\r\n\r\nexport class Random {\r\n    constructor(seed) {\r\n        // JS Math.random() doesn't support seeding natively without a custom PRNG.\r\n        // For now, we ignore the seed to rely on browser crypto/random.\r\n        // TODO: Implement a seeded PRNG if strict determinism is needed.\r\n    }\r\n\r\n    nextInt(max) {\r\n        return Math.floor(Math.random() * max);\r\n    }\r\n\r\n    nextDouble() {\r\n        return Math.random();\r\n    }\r\n\r\n    nextBool() {\r\n        return Math.random() >= 0.5;\r\n    }\r\n}\r\n"],
+  "mappings": "AAEO,MAAMA,EAAI,KAAK,EACTC,EAAO,KAAK,KACZC,EAAM,KAAK,IACXC,EAAQ,KAAK,MACbC,EAAS,KAAK,OACdC,EAAK,KAAK,GACVC,EAAU,KAAK,QACfC,EAAQ,KAAK,MAEbC,EAAM,KAAK,IACXC,EAAM,KAAK,IACXC,EAAO,KAAK,KACZC,EAAO,KAAK,KACZC,EAAM,KAAK,IACXC,EAAM,KAAK,IACXC,EAAM,KAAK,IACXC,EAAO,KAAK,KACZC,EAAO,KAAK,KACZC,EAAO,KAAK,KACZC,EAAQ,KAAK,MACbC,EAAM,KAAK,IACXC,EAAM,KAAK,IACXC,EAAM,KAAK,IAEjB,MAAMC,CAAM,CACf,YAAYC,EAAGC,EAAG,CACd,KAAK,EAAID,EACT,KAAK,EAAIC,CACb,CAEA,UAAW,CACP,MAAO,SAAS,KAAK,CAAC,KAAK,KAAK,CAAC,GACrC,CAEA,WAAWC,EAAO,CACd,MAAMC,EAAK,KAAK,EAAID,EAAM,EACpBE,EAAK,KAAK,EAAIF,EAAM,EAC1B,OAAO,KAAK,KAAKC,EAAKA,EAAKC,EAAKA,CAAE,CACtC,CAEA,IAAI,WAAY,CACZ,OAAO,KAAK,KAAK,KAAK,EAAI,KAAK,EAAI,KAAK,EAAI,KAAK,CAAC,CACtD,CAEA,aAAaF,EAAO,CAChB,OAAO,IAAIH,EAAM,KAAK,EAAIG,EAAM,EAAG,KAAK,EAAIA,EAAM,CAAC,CACvD,CAEA,eAAeA,EAAO,CAClB,OAAO,IAAIH,EAAM,KAAK,EAAIG,EAAM,EAAG,KAAK,EAAIA,EAAM,CAAC,CACvD,CACJ,CAEO,MAAMG,CAAU,CACnB,YAAYC,EAAMC,EAAKC,EAAOC,EAAQ,CAClC,KAAK,KAAOH,EACZ,KAAK,IAAMC,EACX,KAAK,MAAQC,EACb,KAAK,OAASC,CAClB,CAEA,IAAI,OAAQ,CAAE,OAAO,KAAK,KAAO,KAAK,KAAO,CAC7C,IAAI,QAAS,CAAE,OAAO,KAAK,IAAM,KAAK,MAAQ,CAE9C,cAAcC,EAAO,CACjB,OAAOA,EAAM,GAAK,KAAK,MAAQA,EAAM,EAAI,KAAK,OAC1CA,EAAM,GAAK,KAAK,KAAOA,EAAM,EAAI,KAAK,MAC9C,CAEA,kBAAkBC,EAAM,CACpB,OAAOA,EAAK,MAAQ,KAAK,MAAQA,EAAK,OAAS,KAAK,OAChDA,EAAK,KAAO,KAAK,KAAOA,EAAK,QAAU,KAAK,MACpD,CACJ,CAEO,MAAMC,UAAyBP,CAAU,CAC5C,YAAYC,EAAMC,EAAKC,EAAOC,EAAQ,CAClC,MAAMH,EAAMC,EAAKC,EAAOC,CAAM,CAClC,CACJ,CAEO,MAAMI,CAAO,CAChB,YAAYC,EAAM,CAIlB,CAEA,QAAQ5B,EAAK,CACT,OAAO,KAAK,MAAM,KAAK,OAAO,EAAIA,CAAG,CACzC,CAEA,YAAa,CACT,OAAO,KAAK,OAAO,CACvB,CAEA,UAAW,CACP,OAAO,KAAK,OAAO,GAAK,EAC5B,CACJ",
+  "names": ["E", "LN10", "LN2", "LOG2E", "LOG10E", "PI", "SQRT1_2", "SQRT2", "min", "max", "sqrt", "sign", "sin", "cos", "tan", "acos", "asin", "atan", "atan2", "exp", "log", "pow", "Point", "x", "y", "other", "dx", "dy", "Rectangle", "left", "top", "width", "height", "point", "rect", "MutableRectangle", "Random", "seed"]
+}
diff --git a/packages/flutterjs_dart/dist/typed_data/index.js b/packages/flutterjs_dart/dist/typed_data/index.js
new file mode 100644
index 00000000..7ec3cb00
--- /dev/null
+++ b/packages/flutterjs_dart/dist/typed_data/index.js
@@ -0,0 +1,2 @@
+const i=Uint8Array,r=Int8Array,o=Uint8ClampedArray,a=Uint16Array,h=Int16Array,c=Uint32Array,l=Int32Array,_=Float32Array,u=Float64Array;class w{constructor(t,e=0,s){t instanceof ArrayBuffer?this._view=new DataView(t,e,s):t instanceof Uint8Array||t instanceof i?this._view=new DataView(t.buffer,t.byteOffset+e,s):this._view=new DataView(new ArrayBuffer(t))}getInt8(t){return this._view.getInt8(t)}setInt8(t,e){this._view.setInt8(t,e)}getUint8(t){return this._view.getUint8(t)}setUint8(t,e){this._view.setUint8(t,e)}getInt16(t,e){return this._view.getInt16(t,e===1)}setInt16(t,e,s){this._view.setInt16(t,e,s===1)}get buffer(){return this._view.buffer}}class y{constructor({copy:t=!0}={}){this._chunks=[],this._length=0}add(t){this._chunks.push(t),this._length+=t.length}addByte(t){this._chunks.push(new Uint8Array([t])),this._length++}takeBytes(){const t=this.toBytes();return this.clear(),t}toBytes(){const t=new Uint8Array(this._length);let e=0;for(const s of this._chunks)t.set(s,e),e+=s.length;return t}clear(){this._chunks=[],this._length=0}}export{w as ByteData,y as BytesBuilder,_ as Float32List,u as Float64List,h as Int16List,l as Int32List,r as Int8List,a as Uint16List,c as Uint32List,o as Uint8ClampedList,i as Uint8List};
+//# sourceMappingURL=index.js.map
diff --git a/packages/flutterjs_dart/dist/typed_data/index.js.map b/packages/flutterjs_dart/dist/typed_data/index.js.map
new file mode 100644
index 00000000..4906919e
--- /dev/null
+++ b/packages/flutterjs_dart/dist/typed_data/index.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/typed_data/index.js"],
+  "sourcesContent": ["// dart:typed_data implementation\r\n\r\nexport const Uint8List = Uint8Array;\r\nexport const Int8List = Int8Array;\r\nexport const Uint8ClampedList = Uint8ClampedArray;\r\nexport const Uint16List = Uint16Array;\r\nexport const Int16List = Int16Array;\r\nexport const Uint32List = Uint32Array;\r\nexport const Int32List = Int32Array;\r\nexport const Float32List = Float32Array;\r\nexport const Float64List = Float64Array;\r\n\r\n// ByteData wrapper\r\nexport class ByteData {\r\n    constructor(buffer, offsetInBytes = 0, lengthInBytes) {\r\n        if (buffer instanceof ArrayBuffer) {\r\n            this._view = new DataView(buffer, offsetInBytes, lengthInBytes);\r\n        } else if (buffer instanceof Uint8Array || buffer instanceof Uint8List) {\r\n            this._view = new DataView(buffer.buffer, buffer.byteOffset + offsetInBytes, lengthInBytes);\r\n        } else {\r\n            // Create new of size\r\n            this._view = new DataView(new ArrayBuffer(buffer));\r\n        }\r\n    }\r\n\r\n    getInt8(byteOffset) { return this._view.getInt8(byteOffset); }\r\n    setInt8(byteOffset, value) { this._view.setInt8(byteOffset, value); }\r\n\r\n    getUint8(byteOffset) { return this._view.getUint8(byteOffset); }\r\n    setUint8(byteOffset, value) { this._view.setUint8(byteOffset, value); }\r\n\r\n    getInt16(byteOffset, endian) { return this._view.getInt16(byteOffset, endian === 1); } // endian 1 = little? check consts\r\n    setInt16(byteOffset, value, endian) { this._view.setInt16(byteOffset, value, endian === 1); }\r\n\r\n    // ... add others as needed\r\n\r\n    get buffer() { return this._view.buffer; }\r\n}\r\n\r\nexport class BytesBuilder {\r\n    constructor({ copy = true } = {}) {\r\n        this._chunks = [];\r\n        this._length = 0;\r\n    }\r\n\r\n    add(bytes) {\r\n        this._chunks.push(bytes);\r\n        this._length += bytes.length;\r\n    }\r\n\r\n    addByte(byte) {\r\n        this._chunks.push(new Uint8Array([byte]));\r\n        this._length++;\r\n    }\r\n\r\n    takeBytes() {\r\n        const result = this.toBytes();\r\n        this.clear();\r\n        return result;\r\n    }\r\n\r\n    toBytes() {\r\n        const result = new Uint8Array(this._length);\r\n        let offset = 0;\r\n        for (const chunk of this._chunks) {\r\n            result.set(chunk, offset);\r\n            offset += chunk.length;\r\n        }\r\n        return result;\r\n    }\r\n\r\n    clear() {\r\n        this._chunks = [];\r\n        this._length = 0;\r\n    }\r\n}\r\n"],
+  "mappings": "AAEO,MAAMA,EAAY,WACZC,EAAW,UACXC,EAAmB,kBACnBC,EAAa,YACbC,EAAY,WACZC,EAAa,YACbC,EAAY,WACZC,EAAc,aACdC,EAAc,aAGpB,MAAMC,CAAS,CAClB,YAAYC,EAAQC,EAAgB,EAAGC,EAAe,CAC9CF,aAAkB,YAClB,KAAK,MAAQ,IAAI,SAASA,EAAQC,EAAeC,CAAa,EACvDF,aAAkB,YAAcA,aAAkBV,EACzD,KAAK,MAAQ,IAAI,SAASU,EAAO,OAAQA,EAAO,WAAaC,EAAeC,CAAa,EAGzF,KAAK,MAAQ,IAAI,SAAS,IAAI,YAAYF,CAAM,CAAC,CAEzD,CAEA,QAAQG,EAAY,CAAE,OAAO,KAAK,MAAM,QAAQA,CAAU,CAAG,CAC7D,QAAQA,EAAYC,EAAO,CAAE,KAAK,MAAM,QAAQD,EAAYC,CAAK,CAAG,CAEpE,SAASD,EAAY,CAAE,OAAO,KAAK,MAAM,SAASA,CAAU,CAAG,CAC/D,SAASA,EAAYC,EAAO,CAAE,KAAK,MAAM,SAASD,EAAYC,CAAK,CAAG,CAEtE,SAASD,EAAYE,EAAQ,CAAE,OAAO,KAAK,MAAM,SAASF,EAAYE,IAAW,CAAC,CAAG,CACrF,SAASF,EAAYC,EAAOC,EAAQ,CAAE,KAAK,MAAM,SAASF,EAAYC,EAAOC,IAAW,CAAC,CAAG,CAI5F,IAAI,QAAS,CAAE,OAAO,KAAK,MAAM,MAAQ,CAC7C,CAEO,MAAMC,CAAa,CACtB,YAAY,CAAE,KAAAC,EAAO,EAAK,EAAI,CAAC,EAAG,CAC9B,KAAK,QAAU,CAAC,EAChB,KAAK,QAAU,CACnB,CAEA,IAAIC,EAAO,CACP,KAAK,QAAQ,KAAKA,CAAK,EACvB,KAAK,SAAWA,EAAM,MAC1B,CAEA,QAAQC,EAAM,CACV,KAAK,QAAQ,KAAK,IAAI,WAAW,CAACA,CAAI,CAAC,CAAC,EACxC,KAAK,SACT,CAEA,WAAY,CACR,MAAMC,EAAS,KAAK,QAAQ,EAC5B,YAAK,MAAM,EACJA,CACX,CAEA,SAAU,CACN,MAAMA,EAAS,IAAI,WAAW,KAAK,OAAO,EAC1C,IAAIC,EAAS,EACb,UAAWC,KAAS,KAAK,QACrBF,EAAO,IAAIE,EAAOD,CAAM,EACxBA,GAAUC,EAAM,OAEpB,OAAOF,CACX,CAEA,OAAQ,CACJ,KAAK,QAAU,CAAC,EAChB,KAAK,QAAU,CACnB,CACJ",
+  "names": ["Uint8List", "Int8List", "Uint8ClampedList", "Uint16List", "Int16List", "Uint32List", "Int32List", "Float32List", "Float64List", "ByteData", "buffer", "offsetInBytes", "lengthInBytes", "byteOffset", "value", "endian", "BytesBuilder", "copy", "bytes", "byte", "result", "offset", "chunk"]
+}
diff --git a/packages/flutterjs_dart/exports.json b/packages/flutterjs_dart/exports.json
new file mode 100644
index 00000000..a15e25ca
--- /dev/null
+++ b/packages/flutterjs_dart/exports.json
@@ -0,0 +1,63 @@
+{
+  "package": "@flutterjs/dart",
+  "version": "1.0.0",
+  "exports": [
+    "ByteData",
+    "BytesBuilder",
+    "Completer",
+    "E",
+    "Float32List",
+    "Float64List",
+    "Future",
+    "HashMap",
+    "HashSet",
+    "Int16List",
+    "Int32List",
+    "Int8List",
+    "LN10",
+    "LN2",
+    "LOG10E",
+    "LOG2E",
+    "LinkedList",
+    "LinkedListEntry",
+    "MutableRectangle",
+    "PI",
+    "Point",
+    "Queue",
+    "Random",
+    "Rectangle",
+    "SQRT1_2",
+    "SQRT2",
+    "Stream",
+    "StreamController",
+    "Timeline",
+    "Timer",
+    "Uint16List",
+    "Uint32List",
+    "Uint8ClampedList",
+    "Uint8List",
+    "acos",
+    "asin",
+    "atan",
+    "atan2",
+    "base64",
+    "base64Decode",
+    "base64Encode",
+    "cos",
+    "debugger_",
+    "exp",
+    "inspect",
+    "json",
+    "jsonDecode",
+    "jsonEncode",
+    "log",
+    "max",
+    "min",
+    "pow",
+    "sign",
+    "sin",
+    "sqrt",
+    "tan",
+    "utf8"
+  ]
+}
diff --git a/packages/flutterjs_dart/package.json b/packages/flutterjs_dart/package.json
new file mode 100644
index 00000000..58b0121a
--- /dev/null
+++ b/packages/flutterjs_dart/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@flutterjs/dart",
+  "version": "1.0.0",
+  "description": "Dart Standard Library implementation for FlutterJS",
+  "type": "module",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./async": "./dist/async/index.js",
+    "./collection": "./dist/collection/index.js",
+    "./convert": "./dist/convert/index.js",
+    "./developer": "./dist/developer/index.js",
+    "./math": "./dist/math/index.js",
+    "./typed_data": "./dist/typed_data/index.js"
+  },
+  "scripts": {
+    "build": "node build.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "esbuild": "^0.18.0"
+  },
+  "keywords": [
+    "flutterjs",
+    "dart",
+    "stdlib"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {}
+}
diff --git a/packages/flutterjs_dart/src/async/index.js b/packages/flutterjs_dart/src/async/index.js
new file mode 100644
index 00000000..ddde752b
--- /dev/null
+++ b/packages/flutterjs_dart/src/async/index.js
@@ -0,0 +1,144 @@
+// dart:async implementation
+
+export class Timer {
+    constructor(duration, callback) {
+        this._timer = setTimeout(callback, duration.inMilliseconds || duration);
+    }
+
+    static periodic(duration, callback) {
+        const timer = new Timer(0, () => { });
+        // Clear initial timeout, set interval
+        clearTimeout(timer._timer);
+        timer._timer = setInterval(() => callback(timer), duration.inMilliseconds || duration);
+        return timer;
+    }
+
+    static run(callback) {
+        setTimeout(callback, 0);
+    }
+
+    cancel() {
+        clearTimeout(this._timer); // Works for clearInterval too in browsers usually
+        clearInterval(this._timer);
+    }
+}
+
+export class Future {
+    constructor(computation) {
+        this._promise = new Promise((resolve, reject) => {
+            try {
+                const result = computation();
+                resolve(result);
+            } catch (e) {
+                reject(e);
+            }
+        });
+    }
+
+    // Internal: wrap existing promise
+    static _wrap(promise) {
+        const f = new Future(() => { });
+        f._promise = promise;
+        return f;
+    }
+
+    static value(value) {
+        return Future._wrap(Promise.resolve(value));
+    }
+
+    static error(error) {
+        return Future._wrap(Promise.reject(error));
+    }
+
+    static delayed(duration, computation) {
+        return Future._wrap(new Promise((resolve, reject) => {
+            setTimeout(() => {
+                try {
+                    if (computation) {
+                        resolve(computation());
+                    } else {
+                        resolve(null);
+                    }
+                } catch (e) {
+                    reject(e);
+                }
+            }, duration.inMilliseconds || duration);
+        }));
+    }
+
+    static wait(futures) {
+        const promises = futures.map(f => f instanceof Future ? f._promise : f);
+        return Future._wrap(Promise.all(promises));
+    }
+
+    then(onValue, { onError } = {}) {
+        const p = this._promise.then(
+            val => onValue(val),
+            err => {
+                if (onError) {
+                    return onError(err);
+                }
+                throw err;
+            }
+        );
+        return Future._wrap(p);
+    }
+
+    catchError(onError, { test } = {}) {
+        const p = this._promise.catch(err => {
+            if (test && !test(err)) throw err;
+            return onError(err);
+        });
+        return Future._wrap(p);
+    }
+
+    whenComplete(action) {
+        const p = this._promise.finally(() => {
+            return action();
+        });
+        return Future._wrap(p);
+    }
+
+    // To allow await in JS specific code if needed (not standard Dart but helpful)
+    thenJS(onFulfilled, onRejected) {
+        return this._promise.then(onFulfilled, onRejected);
+    }
+}
+
+export class Completer {
+    constructor() {
+        this.future = new Future(() => { });
+        // Replace the promise with one we control
+        this.future._promise = new Promise((resolve, reject) => {
+            this._resolve = resolve;
+            this._reject = reject;
+        });
+    }
+
+    complete(value) {
+        this._resolve(value);
+    }
+
+    completeError(error) {
+        this._reject(error);
+    }
+
+    get isCompleted() {
+        // Hard to track without extra state, skipping for lightweight wrapper
+        return false;
+    }
+}
+
+export class Stream {
+    constructor() {
+        // Basic placeholder
+    }
+    // TODO: Full Stream implementation
+}
+
+export class StreamController {
+    constructor() {
+        this.stream = new Stream();
+    }
+    // TODO: Full StreamController implementation
+}
diff --git a/packages/flutterjs_dart/src/collection/index.js b/packages/flutterjs_dart/src/collection/index.js
new file mode 100644
index 00000000..aaf41953
--- /dev/null
+++ b/packages/flutterjs_dart/src/collection/index.js
@@ -0,0 +1,61 @@
+// dart:collection implementation
+
+export class Queue {
+    constructor() {
+        this._list = [];
+    }
+
+    add(value) { this._list.push(value); }
+    addFirst(value) { this._list.unshift(value); }
+    addLast(value) { this._list.push(value); }
+
+    removeFirst() { return this._list.shift(); }
+    removeLast() { return this._list.pop(); }
+
+    get first() { return this._list[0]; }
+    get last() { return this._list[this._list.length - 1]; }
+    get length() { return this._list.length; }
+    get isEmpty() { return this._list.length === 0; }
+    get isNotEmpty() { return this._list.length > 0; }
+
+    toList() { return [...this._list]; }
+}
+
+export class LinkedList {
+    constructor() {
+        this._head = null;
+        this._tail = null;
+        this._length = 0;
+    }
+
+    add(entry) {
+        if (!this._head) {
+            this._head = entry;
+            this._tail = entry;
+        } else {
+            this._tail.next = entry;
+            entry.previous = this._tail;
+            this._tail = entry;
+        }
+        this._length++;
+    }
+
+    // Minimal implementation for now
+    get length() { return this._length; }
+}
+
+export class LinkedListEntry {
+    constructor() {
+        this.list = null;
+        this.previous = null;
+        this.next = null;
+    }
+
+    unlink() {
+        // TODO impl
+    }
+}
+
+// Maps and Sets are just native JS Map/Set usually, but we can export helpers
+export const HashMap = Map;
+export const HashSet = Set;
diff --git a/packages/flutterjs_dart/src/convert/index.js b/packages/flutterjs_dart/src/convert/index.js
new file mode 100644
index 00000000..81d43af1
--- /dev/null
+++ b/packages/flutterjs_dart/src/convert/index.js
@@ -0,0 +1,62 @@
+// dart:convert implementation
+
+// --- JSON ---
+export const json = {
+    decode: (source) => JSON.parse(source),
+    encode: (object) => JSON.stringify(object),
+};
+
+export function jsonDecode(source) {
+    return JSON.parse(source);
+}
+
+export function jsonEncode(object) {
+    return JSON.stringify(object);
+}
+
+// --- UTF8 ---
+// Can likely assume Timer/Browser env has TextEncoder/TextDecoder
+const _encoder = typeof TextEncoder !== 'undefined' ? new TextEncoder() : null;
+const _decoder = typeof TextDecoder !== 'undefined' ? new TextDecoder() : null;
+
+export const utf8 = {
+    encode: (string) => {
+        if (_encoder) return _encoder.encode(string);
+        // Fallback or error if not in browser/node
+        return new Uint8Array(Buffer.from(string, 'utf-8'));
+    },
+    decode: (bytes) => {
+        if (_decoder) return _decoder.decode(bytes);
+        return Buffer.from(bytes).toString('utf-8');
+    }
+};
+
+// --- Base64 ---
+export const base64 = {
+    encode: (bytes) => {
+        // Handle bytes -> string
+        let binary = '';
+        const len = bytes.byteLength;
+        for (let i = 0; i < len; i++) {
+            binary += String.fromCharCode(bytes[i]);
+        }
+        return btoa(binary);
+    },
+    decode: (source) => {
+        const binary = atob(source);
+        const len = binary.length;
+        const bytes = new Uint8Array(len);
+        for (let i = 0; i < len; i++) {
+            bytes[i] = binary.charCodeAt(i);
+        }
+        return bytes;
+    }
+};
+
+export function base64Encode(bytes) {
+    return base64.encode(bytes);
+}
+
+export function base64Decode(source) {
+    return base64.decode(source);
+}
diff --git a/packages/flutterjs_dart/src/developer/index.js b/packages/flutterjs_dart/src/developer/index.js
new file mode 100644
index 00000000..545f7fd7
--- /dev/null
+++ b/packages/flutterjs_dart/src/developer/index.js
@@ -0,0 +1,42 @@
+// dart:developer implementation
+
+export function log(message, { time, sequenceNumber, level = 0, name = '', zone, error, stackTrace } = {}) {
+    const timestamp = time ? new Date(time).toLocaleTimeString() : new Date().toLocaleTimeString();
+    const prefix = `[${timestamp}] ${name ? name + ': ' : ''}`;
+
+    if (error) {
+        console.error(prefix + message, error);
+        if (stackTrace) console.error(stackTrace);
+    } else {
+        console.log(prefix + message);
+    }
+}
+
+export function inspect(object) {
+    console.dir(object);
+    return object;
+}
+
+export function debugger_({ message, when = true } = {}) {
+    if (when) {
+        if (message) console.log(`Debugger triggered: ${message}`);
+        // eslint-disable-next-line
+        debugger;
+        return true;
+    }
+    return false;
+}
+
+export class Timeline {
+    static startSync(name, { arguments: args } = {}) {
+        // Use User Timing API
+        if (typeof performance !== 'undefined') {
+            performance.mark(name);
+        }
+    }
+
+    static finishSync() {
+        // Ideally we'd match the last mark, but JS performance API is event based.
+        // This is a loose approximation.
+    }
+}
diff --git a/packages/flutterjs_dart/src/index.js b/packages/flutterjs_dart/src/index.js
new file mode 100644
index 00000000..e5d6b4f0
--- /dev/null
+++ b/packages/flutterjs_dart/src/index.js
@@ -0,0 +1,6 @@
+export * as math from './math/index.js';
+export * as async from './async/index.js';
+export * as convert from './convert/index.js';
+export * as collection from './collection/index.js';
+export * as developer from './developer/index.js';
+export * as typed_data from './typed_data/index.js';
diff --git a/packages/flutterjs_dart/src/math/index.js b/packages/flutterjs_dart/src/math/index.js
new file mode 100644
index 00000000..e1132c62
--- /dev/null
+++ b/packages/flutterjs_dart/src/math/index.js
@@ -0,0 +1,102 @@
+// dart:math implementation
+
+export const E = Math.E;
+export const LN10 = Math.LN10;
+export const LN2 = Math.LN2;
+export const LOG2E = Math.LOG2E;
+export const LOG10E = Math.LOG10E;
+export const PI = Math.PI;
+export const SQRT1_2 = Math.SQRT1_2;
+export const SQRT2 = Math.SQRT2;
+
+export const min = Math.min;
+export const max = Math.max;
+export const sqrt = Math.sqrt;
+export const sign = Math.sign;
+export const sin = Math.sin;
+export const cos = Math.cos;
+export const tan = Math.tan;
+export const acos = Math.acos;
+export const asin = Math.asin;
+export const atan = Math.atan;
+export const atan2 = Math.atan2;
+export const exp = Math.exp;
+export const log = Math.log;
+export const pow = Math.pow;
+
+export class Point {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+
+    toString() {
+        return `Point(${this.x}, ${this.y})`;
+    }
+
+    distanceTo(other) {
+        const dx = this.x - other.x;
+        const dy = this.y - other.y;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+
+    get magnitude() {
+        return Math.sqrt(this.x * this.x + this.y * this.y);
+    }
+
+    operator_add(other) {
+        return new Point(this.x + other.x, this.y + other.y);
+    }
+
+    operator_minus(other) {
+        return new Point(this.x - other.x, this.y - other.y);
+    }
+}
+
+export class Rectangle {
+    constructor(left, top, width, height) {
+        this.left = left;
+        this.top = top;
+        this.width = width;
+        this.height = height;
+    }
+
+    get right() { return this.left + this.width; }
+    get bottom() { return this.top + this.height; }
+
+    containsPoint(point) {
+        return point.x >= this.left && point.x < this.right &&
+            point.y >= this.top && point.y < this.bottom;
+    }
+
+    containsRectangle(rect) {
+        return rect.left >= this.left && rect.right <= this.right &&
+            rect.top >= this.top && rect.bottom <= this.bottom;
+    }
+}
+
+export class MutableRectangle extends Rectangle {
+    constructor(left, top, width, height) {
+        super(left, top, width, height);
+    }
+}
+
+export class Random {
+    constructor(seed) {
+        // JS Math.random() doesn't support seeding natively without a custom PRNG.
+        // For now, we ignore the seed to rely on browser crypto/random.
+        // TODO: Implement a seeded PRNG if strict determinism is needed.
+    }
+
+    nextInt(max) {
+        return Math.floor(Math.random() * max);
+    }
+
+    nextDouble() {
+        return Math.random();
+    }
+
+    nextBool() {
+        return Math.random() >= 0.5;
+    }
+}
diff --git a/packages/flutterjs_dart/src/typed_data/index.js b/packages/flutterjs_dart/src/typed_data/index.js
new file mode 100644
index 00000000..786680db
--- /dev/null
+++ b/packages/flutterjs_dart/src/typed_data/index.js
@@ -0,0 +1,76 @@
+// dart:typed_data implementation
+
+export const Uint8List = Uint8Array;
+export const Int8List = Int8Array;
+export const Uint8ClampedList = Uint8ClampedArray;
+export const Uint16List = Uint16Array;
+export const Int16List = Int16Array;
+export const Uint32List = Uint32Array;
+export const Int32List = Int32Array;
+export const Float32List = Float32Array;
+export const Float64List = Float64Array;
+
+// ByteData wrapper
+export class ByteData {
+    constructor(buffer, offsetInBytes = 0, lengthInBytes) {
+        if (buffer instanceof ArrayBuffer) {
+            this._view = new DataView(buffer, offsetInBytes, lengthInBytes);
+        } else if (buffer instanceof Uint8Array || buffer instanceof Uint8List) {
+            this._view = new DataView(buffer.buffer, buffer.byteOffset + offsetInBytes, lengthInBytes);
+        } else {
+            // Create new of size
+            this._view = new DataView(new ArrayBuffer(buffer));
+        }
+    }
+
+    getInt8(byteOffset) { return this._view.getInt8(byteOffset); }
+    setInt8(byteOffset, value) { this._view.setInt8(byteOffset, value); }
+
+    getUint8(byteOffset) { return this._view.getUint8(byteOffset); }
+    setUint8(byteOffset, value) { this._view.setUint8(byteOffset, value); }
+
+    getInt16(byteOffset, endian) { return this._view.getInt16(byteOffset, endian === 1); } // endian 1 = little? check consts
+    setInt16(byteOffset, value, endian) { this._view.setInt16(byteOffset, value, endian === 1); }
+
+    // ... add others as needed
+
+    get buffer() { return this._view.buffer; }
+}
+
+export class BytesBuilder {
+    constructor({ copy = true } = {}) {
+        this._chunks = [];
+        this._length = 0;
+    }
+
+    add(bytes) {
+        this._chunks.push(bytes);
+        this._length += bytes.length;
+    }
+
+    addByte(byte) {
+        this._chunks.push(new Uint8Array([byte]));
+        this._length++;
+    }
+
+    takeBytes() {
+        const result = this.toBytes();
+        this.clear();
+        return result;
+    }
+
+    toBytes() {
+        const result = new Uint8Array(this._length);
+        let offset = 0;
+        for (const chunk of this._chunks) {
+            result.set(chunk, offset);
+            offset += chunk.length;
+        }
+        return result;
+    }
+
+    clear() {
+        this._chunks = [];
+        this._length = 0;
+    }
+}
diff --git a/packages/flutterjs_engine/bin/commands/build_integration.js b/packages/flutterjs_engine/bin/commands/build_integration.js
deleted file mode 100644
index c2265c4a..00000000
--- a/packages/flutterjs_engine/bin/commands/build_integration.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * ============================================================================
- * BuildIntegration - Build Pipeline Orchestrator
- * ============================================================================
- *
- * Coordinates the complete build pipeline:
- * - Analysis (Phases 1-7) via BuildAnalyzer
- * - Generation (Phases 8-10) via BuildGenerator
- * 
- * This is the main entry point that orchestrates the full build.
- */
-
-import chalk from "chalk";
-import { BuildAnalyzer } from "./build_integration_analyzer.js";
-import { BuildGenerator } from "./build_integration_generator.js";
-
-class BuildIntegration {
-  constructor(projectRoot, config = {}) {
-    this.projectRoot = projectRoot;
-    this.config = {
-      mode: config.mode || "development",
-      target: config.target || "web",
-      outputDir: config.outputDir || "dist",
-      debugMode: config.debugMode || false,
-      installDependencies: config.installDependencies !== false,
-      ...config,
-    };
-
-    // Initialize sub-components
-    this.analyzer = new BuildAnalyzer(this);
-    this.generator = new BuildGenerator(this);
-
-    // Shared state containers
-    this.analysis = null;
-    this.resolution = null;
-    this.installation = null;
-    this.collection = null;
-    this.transformed = null;
-    this.buildOutput = null;
-    this.generatedVNodes = null;
-    this.generatedHTML = null;
-    this.runtime = null;
-    this.widgetMetadata = null;
-
-    if (this.config.debugMode) {
-      console.log(chalk.blue("\n[BuildIntegration] Initialized"));
-      console.log(chalk.gray(`  projectRoot: ${projectRoot}`));
-      console.log(chalk.gray(`  mode: ${this.config.mode}`));
-      console.log(chalk.gray(`  outputDir: ${this.config.outputDir}\n`));
-    }
-  }
-
-  /**
-   * ========================================================================
-   * MAIN PIPELINE EXECUTION
-   * ========================================================================
-   */
-  async execute() {
-    console.log(chalk.blue("\n" + "=".repeat(70)));
-    console.log(chalk.blue("FLUTTERJS BUILD INTEGRATION PIPELINE"));
-    console.log(chalk.blue("=".repeat(70)));
-
-    const startTime = Date.now();
-
-    try {
-      // ========== ANALYSIS PHASE ==========
-      // Phases 1-7: Analyze, resolve, install, collect, transform, initialize, build
-
-      await this.analyzer.phase1_analyze();
-      await this.analyzer.phase2_resolveDependencies();
-
-      if (this.config.installDependencies) {
-        await this.analyzer.phase3_installPackages();
-      }
-
-      await this.analyzer.phase4_collectPackages();
-      await this.analyzer.phase5_transformCode();
-      await this.analyzer.phase6_initializeRuntime();
-      await this.analyzer.phase7_buildWidgets();
-
-      // ========== GENERATION PHASE ==========
-      // Phases 8-10: Generate HTML, output files, and report
-
-      await this.generator.phase8_generateHTML();
-      await this.generator.phase9_generateOutput();
-
-      const duration = Date.now() - startTime;
-      this.generator.phase10_report(duration);
-
-      return {
-        success: true,
-        duration,
-        analysis: this.analysis,
-        resolution: this.resolution,
-        installation: this.installation,
-        collection: this.collection,
-        transformed: this.transformed,
-        output: this.buildOutput,
-      };
-    } catch (error) {
-      console.error(chalk.red("\n✗ Build Failed:"), error.message);
-      if (this.config.debugMode) {
-        console.error(error.stack);
-      }
-      throw error;
-    }
-  }
-}
-
-export { BuildIntegration };
-export default BuildIntegration;
\ No newline at end of file
diff --git a/packages/flutterjs_engine/bin/commands/flutterjs_package_installer.js b/packages/flutterjs_engine/bin/commands/flutterjs_package_installer.js
deleted file mode 100644
index 058ee5c1..00000000
--- a/packages/flutterjs_engine/bin/commands/flutterjs_package_installer.js
+++ /dev/null
@@ -1,950 +0,0 @@
-/**
- * ============================================================================
- * FlutterJS Package Installer - Complete Implementation
- * ============================================================================
- * 
- * Handles 3 installation sources:
- * 1. SDK Packages - @flutterjs/* (bundled with SDK)
- * 2. Registry Packages - Published packages (npm)
- * 3. Local Packages - User-made packages (packages/)
- * 
- * Responsibilities:
- * - Locate packages from any source
- * - Validate package.json structure
- * - Copy package files to dist/
- * - Create installation log
- * - Handle installation failures gracefully
- * - Generate installation report
- * 
- * Location: cli/package_manager/package_installer.js
- */
-
-import fs from 'fs';
-import path from 'path';
-import chalk from 'chalk';
-
-// ============================================================================
-// PACKAGE SOURCE TYPES
-// ============================================================================
-
-const PackageSource = {
-  SDK: 'sdk',           // @flutterjs/* from SDK
-  REGISTRY: 'registry', // npm packages from node_modules
-  LOCAL: 'local'        // User packages from packages/
-};
-
-// ============================================================================
-// INSTALLATION RESULT TYPES
-// ============================================================================
-
-/**
- * Single package installation result
- */
-class PackageInstallResult {
-  constructor(packageName, source) {
-    this.packageName = packageName;
-    this.source = source;
-    this.success = false;
-    this.version = null;
-    this.sourcePath = null;
-    this.destPath = null;
-    this.filesCount = 0;
-    this.size = 0;
-    this.error = null;
-    this.warnings = [];
-    this.timestamp = new Date().toISOString();
-  }
-
-  getSizeKB() {
-    return (this.size / 1024).toFixed(2);
-  }
-
-  getSizeMB() {
-    return (this.size / (1024 * 1024)).toFixed(2);
-  }
-
-  toJSON() {
-    return {
-      packageName: this.packageName,
-      source: this.source,
-      success: this.success,
-      version: this.version,
-      filesCount: this.filesCount,
-      size: this.size,
-      error: this.error,
-      warnings: this.warnings,
-      timestamp: this.timestamp
-    };
-  }
-}
-
-/**
- * Complete installation session result
- */
-class InstallationSession {
-  constructor() {
-    this.results = [];
-    this.totalPackages = 0;
-    this.successCount = 0;
-    this.failureCount = 0;
-    this.totalSize = 0;
-    this.totalFiles = 0;
-    this.startTime = null;
-    this.endTime = null;
-    this.globalErrors = [];
-  }
-
-  addResult(result) {
-    this.results.push(result);
-    this.totalPackages++;
-
-    if (result.success) {
-      this.successCount++;
-      this.totalSize += result.size;
-      this.totalFiles += result.filesCount;
-    } else {
-      this.failureCount++;
-    }
-  }
-
-  addError(message) {
-    this.globalErrors.push(message);
-  }
-
-  getDuration() {
-    if (!this.startTime || !this.endTime) return 0;
-    return this.endTime - this.startTime;
-  }
-
-  getTotalSizeMB() {
-    return (this.totalSize / (1024 * 1024)).toFixed(2);
-  }
-
-  isSuccessful() {
-    return this.failureCount === 0 && this.globalErrors.length === 0;
-  }
-
-  getReport() {
-    return {
-      total: this.totalPackages,
-      successful: this.successCount,
-      failed: this.failureCount,
-      files: this.totalFiles,
-      size: this.getTotalSizeMB() + ' MB',
-      duration: this.getDuration() + 'ms',
-      results: this.results.map(r => r.toJSON()),
-      errors: this.globalErrors
-    };
-  }
-}
-
-// ============================================================================
-// PACKAGE RESOLVER
-// ============================================================================
-
-/**
- * Resolves package locations from different sources
- */
-class PackageResolver {
-  constructor(projectRoot, options = {}) {
-    this.projectRoot = projectRoot;
-    this.debugMode = options.debugMode || false;
-
-    // ✅ FIX: Find the correct SDK root by searching upward
-    this.sdkRoot = this.findSDKRootUpward(projectRoot);
-    this.nodeModulesRoot = this.findNodeModulesUpward(projectRoot);
-    this.localPackagesRoot = path.join(projectRoot, 'packages');
-
-    if (this.debugMode) {
-      console.log('\n[PackageResolver] Initialized');
-      console.log(`  Project Root: ${projectRoot}`);
-      console.log(`  SDK Root: ${this.sdkRoot}`);
-      console.log(`  Node Modules: ${this.nodeModulesRoot}`);
-      console.log(`  Local Packages: ${this.localPackagesRoot}\n`);
-    }
-  }
-
-  /**
-   * ✅ NEW: Search upward for node_modules/@flutterjs
-   * Looks in current dir and all parent dirs up to root
-   */
-  findNodeModulesUpward(startPath) {
-    let current = startPath;
-    const visited = new Set();
-
-    // Search up to 10 levels
-    for (let i = 0; i < 10; i++) {
-      if (visited.has(current)) break;
-      visited.add(current);
-
-      const nodeModulesPath = path.join(current, 'node_modules', '@flutterjs');
-      if (fs.existsSync(nodeModulesPath)) {
-        if (this.debugMode) {
-          console.log(`[PackageResolver] Found @flutterjs at: ${nodeModulesPath}`);
-        }
-        return path.join(current, 'node_modules');
-      }
-
-      // Move up one directory
-      const parent = path.dirname(current);
-      if (parent === current) break; // Reached filesystem root
-      current = parent;
-    }
-
-    // Fallback
-    return path.join(startPath, 'node_modules');
-  }
-
-  /**
-   * ✅ FIXED: Search for SDK packages including flutterjs_engine structure
-   */
-  findSDKRootUpward(startPath) {
-    let current = startPath;
-    const visited = new Set();
-
-    for (let i = 0; i < 10; i++) {
-      if (visited.has(current)) break;
-      visited.add(current);
-
-      // ✅ CORRECTED: Check packages/flutterjs_engine/src and packages/flutterjs_engine/package
-
-      // Check packages/flutterjs_engine/src/
-      const srcPath = path.join(current, 'packages', 'flutterjs_engine', 'src');
-      if (fs.existsSync(srcPath)) {
-        const contents = fs.readdirSync(srcPath);
-        const hasPackages = contents.some(item => {
-          const itemPath = path.join(srcPath, item);
-          return fs.existsSync(path.join(itemPath, 'package.json'));
-        });
-
-        if (hasPackages) {
-          if (this.debugMode) {
-            console.log(`[PackageResolver] Found SDK packages at: ${srcPath}`);
-          }
-          return srcPath;
-        }
-      }
-
-      // Check packages/flutterjs_engine/package/
-      const packagePath = path.join(current, 'packages', 'flutterjs_engine', 'package');
-      if (fs.existsSync(packagePath)) {
-        const contents = fs.readdirSync(packagePath);
-        const hasPackages = contents.some(item => {
-          const itemPath = path.join(packagePath, item);
-          return fs.existsSync(path.join(itemPath, 'package.json'));
-        });
-
-        if (hasPackages) {
-          if (this.debugMode) {
-            console.log(`[PackageResolver] Found SDK packages at: ${packagePath}`);
-          }
-          return packagePath;
-        }
-      }
-
-      // Fallback: Check /src at project root
-      const projectSrcPath = path.join(current, 'src');
-      if (fs.existsSync(projectSrcPath)) {
-        const contents = fs.readdirSync(projectSrcPath);
-        const hasPackages = contents.some(item => {
-          const itemPath = path.join(projectSrcPath, item);
-          return fs.existsSync(path.join(itemPath, 'package.json'));
-        });
-
-        if (hasPackages) {
-          if (this.debugMode) {
-            console.log(`[PackageResolver] Found SDK packages at: ${projectSrcPath}`);
-          }
-          return projectSrcPath;
-        }
-      }
-
-      // Check node_modules
-      const nodeModulesPath = path.join(current, 'node_modules', '@flutterjs');
-      if (fs.existsSync(nodeModulesPath)) {
-        if (this.debugMode) {
-          console.log(`[PackageResolver] Found SDK at: ${nodeModulesPath}`);
-        }
-        return nodeModulesPath;
-      }
-
-      const parent = path.dirname(current);
-      if (parent === current) break;
-      current = parent;
-    }
-
-    return path.join(startPath, 'node_modules', '@flutterjs');
-  }
-
-
-  /**
-   * Resolve package from any source (auto-detect)
-   */
-  resolve(packageName) {
-    if (this.debugMode) {
-      console.log(`[PackageResolver] Resolving: ${packageName}`);
-    }
-
-    // Try SDK first (@flutterjs/*)
-    if (packageName.startsWith('@flutterjs/')) {
-      const sdkPath = this.resolveSdk(packageName);
-      if (sdkPath) {
-        if (this.debugMode) {
-          console.log(`  ✅ Found in SDK: ${sdkPath}`);
-        }
-        return { path: sdkPath, source: 'sdk' };
-      }
-    }
-
-    // Try node_modules
-    const registryPath = this.resolveRegistry(packageName);
-    if (registryPath) {
-      if (this.debugMode) {
-        console.log(`  ✅ Found in npm: ${registryPath}`);
-      }
-      return { path: registryPath, source: 'npm' };
-    }
-
-    // Try Local
-    const localPath = this.resolveLocal(packageName);
-    if (localPath) {
-      if (this.debugMode) {
-        console.log(`  ✅ Found locally: ${localPath}`);
-      }
-      return { path: localPath, source: 'local' };
-    }
-
-    if (this.debugMode) {
-      console.log(`  ❌ Not found`);
-    }
-    return null;
-  }
-
-  /**
-   * Resolve SDK package (@flutterjs/*)
-   */
-  resolveSdk(packageName) {
-    if (!packageName.startsWith('@flutterjs/')) {
-      return null;
-    }
-
-    const pkgName = packageName.replace('@flutterjs/', '');
-
-    // Try the found SDK root
-    let pkgPath = path.join(this.sdkRoot, pkgName);
-    if (fs.existsSync(path.join(pkgPath, 'package.json'))) {
-      return pkgPath;
-    }
-
-    // Try node_modules fallback
-    pkgPath = path.join(this.nodeModulesRoot, packageName);
-    if (fs.existsSync(path.join(pkgPath, 'package.json'))) {
-      return pkgPath;
-    }
-
-    return null;
-  }
-
-  /**
-   * Resolve Registry package (npm)
-   */
-  resolveRegistry(packageName) {
-    const pkgPath = path.join(this.nodeModulesRoot, packageName);
-
-    if (fs.existsSync(path.join(pkgPath, 'package.json'))) {
-      return pkgPath;
-    }
-
-    return null;
-  }
-
-  /**
-   * Resolve Local package
-   */
-  resolveLocal(packageName) {
-    const pkgPath = path.join(this.localPackagesRoot, packageName);
-
-    if (fs.existsSync(path.join(pkgPath, 'package.json'))) {
-      return pkgPath;
-    }
-
-    return null;
-  }
-
-  /**
-   * List all available SDK packages
-   */
-  listSdkPackages() {
-    const packages = [];
-
-    if (!fs.existsSync(this.sdkRoot)) {
-      return packages;
-    }
-
-    try {
-      const items = fs.readdirSync(this.sdkRoot);
-
-      for (const item of items) {
-        const itemPath = path.join(this.sdkRoot, item);
-        const stat = fs.statSync(itemPath);
-
-        if (stat.isDirectory()) {
-          const pkgJsonPath = path.join(itemPath, 'package.json');
-          if (fs.existsSync(pkgJsonPath)) {
-            try {
-              const pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, 'utf-8'));
-              packages.push({
-                name: pkgJson.name || `@flutterjs/${item}`,
-                version: pkgJson.version || '1.0.0',
-                path: itemPath,
-                description: pkgJson.description || ''
-              });
-            } catch (error) {
-              // Skip invalid package.json
-            }
-          }
-        }
-      }
-    } catch (error) {
-      if (this.debugMode) {
-        console.warn(`Could not list SDK packages: ${error.message}`);
-      }
-    }
-
-    return packages;
-  }
-}
-
-// ============================================================================
-// MAIN PACKAGE INSTALLER
-// ============================================================================
-
-class PackageInstaller {
-  constructor(projectRoot, options = {}) {
-    this.projectRoot = projectRoot;
-    this.options = {
-      debugMode: options.debugMode || false,
-      outputDir: options.outputDir || 'dist',
-      packagesDir: options.packagesDir || 'packages',
-      overwrite: options.overwrite !== false,
-      validatePackages: options.validatePackages !== false,
-      ...options
-    };
-
-    // Initialize resolver
-    this.resolver = new PackageResolver(projectRoot, {
-      debugMode: this.options.debugMode,
-      sdkRoot: options.sdkRoot
-    });
-
-    // Setup output paths
-    this.outputBase = path.join(projectRoot, this.options.outputDir);
-    this.packagesBase = path.join(this.outputBase, this.options.packagesDir);
-
-    // Session tracking
-    this.currentSession = null;
-
-    if (this.options.debugMode) {
-      console.log(chalk.gray('[PackageInstaller] Initialized'));
-      console.log(chalk.gray(`  Output: ${this.outputBase}`));
-      console.log(chalk.gray(`  Packages: ${this.packagesBase}\n`));
-    }
-  }
-
-  /**
-   * Install single package
-   */
-  async installPackage(packageName) {
-    try {
-      // Resolve package location
-      const resolved = this.resolver.resolve(packageName);
-
-      if (!resolved) {
-        // ✅ FIX: Don't fail - just mark as uninstalled
-        console.warn(`[PackageInstaller] ⚠️  Package not found locally: ${packageName}`);
-        console.warn(`[PackageInstaller]    Continuing build without local files`);
-
-        const result = new PackageInstallResult(packageName, 'uninstalled');
-        result.success = true; // Mark as "resolved" even though not installed
-        result.error = null;
-        result.version = '0.0.0';
-        result.filesCount = 0;
-        result.size = 0;
-        result.warnings.push(`Package files not found locally, using from CDN or bundled`);
-
-        return result;
-      }
-
-      const result = new PackageInstallResult(packageName, resolved.source);
-      result.sourcePath = resolved.path;
-
-      // Load and validate package.json
-      const pkgJson = await this.loadPackageJson(resolved.path);
-      result.version = pkgJson.version || '1.0.0';
-
-      // Validate package structure
-      if (this.options.validatePackages) {
-        this.validatePackage(pkgJson, resolved.path);
-      }
-
-      // Determine destination path
-      const destPath = this.getDestinationPath(packageName);
-      result.destPath = destPath;
-
-      // Create destination directory
-      await fs.promises.mkdir(destPath, { recursive: true });
-
-      // Copy package files
-      const fileCopyResults = await this.copyPackageFiles(resolved.path, destPath);
-
-      result.filesCount = fileCopyResults.copied;
-      result.size = fileCopyResults.totalSize;
-
-      // Mark as successful
-      result.success = true;
-
-      if (this.options.debugMode) {
-        console.log(`[PackageInstaller] ✅ ${packageName} installed`);
-        console.log(`[PackageInstaller]    Version: ${result.version}`);
-        console.log(`[PackageInstaller]    Files: ${result.filesCount}`);
-        console.log(`[PackageInstaller]    Size: ${result.getSizeKB()} KB\n`);
-      }
-
-      return result;
-
-    } catch (error) {
-      // ✅ FIX: Still mark as success (resolved) even on install error
-      // This allows build to continue
-      const result = new PackageInstallResult(packageName, 'error');
-      result.success = true; // Allow build to continue
-      result.error = error.message;
-      result.warnings.push(`Installation error: ${error.message}, using fallback`);
-
-      console.warn(`[PackageInstaller] ⚠️  ${packageName}: ${error.message}`);
-      console.warn(`[PackageInstaller]    Build will continue without local files\n`);
-
-      return result;
-    }
-  }
-
-  /**
-   * Install multiple packages
-   */
-  async installPackages(packageNames) {
-    const session = new InstallationSession();
-    session.startTime = Date.now();
-    this.currentSession = session;
-
-    if (this.options.debugMode) {
-      console.log(chalk.blue(`\nInstalling ${packageNames.length} packages...\n`));
-    }
-
-    // Ensure output directories exist
-    try {
-      await fs.promises.mkdir(this.packagesBase, { recursive: true });
-    } catch (error) {
-      session.addError(`Could not create output directory: ${error.message}`);
-      session.endTime = Date.now();
-      return session;
-    }
-
-    // Install each package
-    for (const packageName of packageNames) {
-      const result = await this.installPackage(packageName);
-      session.addResult(result);
-    }
-
-    session.endTime = Date.now();
-
-    return session;
-  }
-
-  /**
-   * Install all SDK packages
-   */
-  async installAllSdk() {
-    const sdkPackages = this.resolver.listSdkPackages();
-    const packageNames = sdkPackages.map(p => p.name);
-
-    if (this.options.debugMode) {
-      console.log(chalk.blue(`Found ${packageNames.length} SDK packages`));
-      packageNames.forEach(name => console.log(chalk.gray(`  • ${name}`)));
-      console.log();
-    }
-
-    return this.installPackages(packageNames);
-  }
-
-  /**
-   * Install all local packages
-   */
-  async installAllLocal() {
-    const localPackages = this.resolver.listLocalPackages();
-    const packageNames = localPackages.map(p => p.name);
-
-    if (this.options.debugMode) {
-      console.log(chalk.blue(`Found ${packageNames.length} local packages`));
-      packageNames.forEach(name => console.log(chalk.gray(`  • ${name}`)));
-      console.log();
-    }
-
-    return this.installPackages(packageNames);
-  }
-
-  /**
-   * Load package.json
-   */
-  async loadPackageJson(packagePath) {
-    const pkgJsonPath = path.join(packagePath, 'package.json');
-
-    if (!fs.existsSync(pkgJsonPath)) {
-      throw new Error(`package.json not found at ${pkgJsonPath}`);
-    }
-
-    try {
-      const content = await fs.promises.readFile(pkgJsonPath, 'utf-8');
-      return JSON.parse(content);
-    } catch (error) {
-      throw new Error(`Invalid package.json: ${error.message}`);
-    }
-  }
-
-  /**
-   * Validate package structure
-   */
-  validatePackage(pkgJson, packagePath) {
-    if (!pkgJson.name) {
-      throw new Error('Package must have a name');
-    }
-
-    // Optional: Check for FlutterJS metadata
-    if (pkgJson.flutterjs) {
-      const flutterjs = pkgJson.flutterjs;
-
-      if (flutterjs.type && !['widget', 'service', 'utility', 'framework'].includes(flutterjs.type)) {
-        throw new Error(`Invalid package type: ${flutterjs.type}`);
-      }
-    }
-  }
-
-  /**
-   * Get destination path for package
-   */
-  // FIXED:
-  getDestinationPath(packageName) {
-    // ✅ For @flutterjs/* packages, use node_modules/@flutterjs structure
-    // We use projectRoot to ensure a single, shared node_modules level
-    // This avoids creating a duplicate node_modules inside .dev/
-    if (packageName.startsWith('@flutterjs/')) {
-      const scopedName = packageName.split('/')[1];
-      return path.join(
-        this.projectRoot, // Changed from outputBase to projectRoot
-        'node_modules',
-        '@flutterjs',
-        scopedName
-      );
-    }
-
-    // ✅ For other packages, use packages directory
-    const cleanName = packageName
-      .replace('@', '')
-      .replace(/\//g, '-')
-      .toLowerCase();
-
-    return path.join(this.packagesBase, cleanName);
-  }
-
-  /**
-   * Copy all package files
-   */
-  async copyPackageFiles(sourcePath, destPath) {
-    let copied = 0;
-    let totalSize = 0;
-    const errors = [];
-
-    try {
-      // Get all files to copy
-      const files = await this.getAllPackageFiles(sourcePath);
-
-      for (const file of files) {
-        try {
-          const relPath = path.relative(sourcePath, file.path);
-          const destFile = path.join(destPath, relPath);
-          const destFileDir = path.dirname(destFile);
-
-          // Create directory
-          await fs.promises.mkdir(destFileDir, { recursive: true });
-
-          // Copy file
-          await fs.promises.copyFile(file.path, destFile);
-
-          // Get file size
-          const stats = await fs.promises.stat(destFile);
-          totalSize += stats.size;
-          copied++;
-
-        } catch (error) {
-          errors.push({
-            file: file.path,
-            error: error.message
-          });
-        }
-      }
-
-    } catch (error) {
-      errors.push({
-        step: 'scan',
-        error: error.message
-      });
-    }
-
-    return {
-      copied,
-      totalSize,
-      errors
-    };
-  }
-
-  /**
-   * Get all package files recursively
-   */
-  async getAllPackageFiles(packagePath) {
-    const files = [];
-    const ignore = new Set([
-      '.git',
-      '.github',
-      'build',
-      'coverage',
-      '.DS_Store',
-      '.env',
-      '.gitignore',
-      'package-lock.json',
-      'yarn.lock',
-      'pnpm-lock.yaml',
-      'README.md',
-      'LICENSE'
-    ]);
-
-    async function traverse(dir) {
-      try {
-        const entries = await fs.promises.readdir(dir, { withFileTypes: true });
-
-        for (const entry of entries) {
-          // Skip hidden and ignored
-          if (entry.name.startsWith('.') || ignore.has(entry.name)) {
-            continue;
-          }
-
-          const fullPath = path.join(dir, entry.name);
-
-          if (entry.isFile()) {
-            // Include: .js, .json, .css, .html
-            if (/\.(js|json|css|html|svg|ttf|woff|woff2)$/i.test(entry.name)) {
-              files.push({ path: fullPath, name: entry.name });
-            }
-          } else if (entry.isDirectory()) {
-            await traverse(fullPath);
-          }
-        }
-      } catch (error) {
-        console.warn(chalk.yellow(`Warning: Could not read ${dir}`));
-      }
-    }
-
-    await traverse(packagePath);
-    return files;
-  }
-  async getAllPackageFiles(packagePath) {
-    const files = [];
-
-    // ✅ FIXED: Only skip truly unnecessary directories
-    // Don't skip 'dist', 'src', 'lib' - these contain actual code!
-    const skipDirs = new Set([
-      // Build/version control - skip these
-      '.git',
-      '.github',
-      'coverage',
-      'node_modules',
-      '.next',
-      '.nuxt',
-
-      // Testing - skip these (usually)
-      'test',
-      'tests',
-      '__tests__',
-
-      // Don't skip: dist, src, lib, build - these have real code!
-    ]);
-
-    const skipFiles = new Set([
-      '.DS_Store',
-      'thumbs.db',
-      '.env',
-      '.env.local',
-      '.npmignore',
-      '.gitignore',
-      'package-lock.json',
-      'yarn.lock',
-      'pnpm-lock.yaml',
-      'README.md',
-      'README.txt',
-      'LICENSE',
-      'CHANGELOG.md',
-      'Makefile',
-      '.editorconfig',
-    ]);
-
-    const skipExtensions = new Set([
-      '.map',           // Source maps
-      '.test.js',       // Test files
-      '.spec.js',       // Test files
-      '.test.ts',       // Test files
-      '.spec.ts',       // Test files
-    ]);
-
-    async function traverse(dir, depth = 0) {
-      const indent = '  '.repeat(depth);
-
-      try {
-        if (!fs.existsSync(dir)) {
-          console.warn(chalk.yellow(`${indent}⚠️  Directory doesn't exist: ${dir}`));
-          return;
-        }
-
-        const entries = await fs.promises.readdir(dir, { withFileTypes: true });
-
-        for (const entry of entries) {
-          const fullPath = path.join(dir, entry.name);
-          const relPath = path.relative(packagePath, fullPath);
-
-          // Skip hidden files and directories (except .npmignore, etc)
-          if (entry.name.startsWith('.')) {
-            if (entry.name === '.npmignore' || entry.name === '.npmrc') {
-              // Include these config files
-            } else {
-              continue;
-            }
-          }
-
-          // Skip specific files
-          if (skipFiles.has(entry.name)) {
-            continue;
-          }
-
-          // Skip specific directories
-          if (entry.isDirectory() && skipDirs.has(entry.name)) {
-            continue;
-          }
-
-          if (entry.isFile()) {
-            // ✅ Include all relevant file types
-            const ext = path.extname(entry.name);
-            const isRelevantFile = /\.(js|mjs|cjs|ts|tsx|jsx|json|css|scss|less|html|svg|png|jpg|jpeg|gif|woff|woff2|ttf|otf|eot|md|txt)$/i.test(entry.name);
-            const isNotSkipped = !skipExtensions.has(ext);
-
-            if (isRelevantFile && isNotSkipped) {
-              files.push(fullPath);
-
-              // Debug logging (optional)
-              if (false) {  // Set to true for debugging
-                console.log(chalk.gray(`${indent}  ✓ ${relPath}`));
-              }
-            }
-          } else if (entry.isDirectory()) {
-            // ✅ RECURSIVELY traverse ALL directories
-            // This will enter src/, dist/, lib/, etc.
-            if (false) {  // Set to true for debugging
-              console.log(chalk.gray(`${indent}  📁 ${relPath}/`));
-            }
-
-            await traverse(fullPath, depth + 1);
-          }
-        }
-      } catch (error) {
-        console.warn(chalk.yellow(`${indent}⚠️  Could not read directory ${dir}: ${error.message}`));
-      }
-    }
-
-    // Start traversal from the root package directory
-    await traverse(packagePath);
-
-    return files;
-  }
-  /**
-   * Generate installation report
-   */
-  generateReport(session) {
-    if (!session) {
-      return null;
-    }
-
-    const report = session.getReport();
-
-    console.log(chalk.blue('\n' + '='.repeat(70)));
-    console.log(chalk.blue('INSTALLATION REPORT'));
-    console.log(chalk.blue('='.repeat(70)));
-
-    console.log(chalk.gray(`\nPackages:`));
-    console.log(chalk.gray(`  Total: ${report.total}`));
-    console.log(chalk.gray(`  Successful: ${report.successful}`));
-    if (report.failed > 0) {
-      console.log(chalk.red(`  Failed: ${report.failed}`));
-    }
-
-    console.log(chalk.gray(`\nFiles & Size:`));
-    console.log(chalk.gray(`  Files: ${report.files}`));
-    console.log(chalk.gray(`  Size: ${report.size}`));
-
-    console.log(chalk.gray(`\nTime: ${report.duration}`));
-
-    if (report.errors.length > 0) {
-      console.log(chalk.red(`\nErrors: ${report.errors.length}`));
-      report.errors.forEach(err => {
-        console.log(chalk.red(`  • ${err}`));
-      });
-    }
-
-    // Show individual package results
-    console.log(chalk.gray(`\nPackage Details:`));
-    for (const result of report.results) {
-      const icon = result.success ? chalk.green('✓') : chalk.red('✗');
-      console.log(`${icon} ${result.packageName}`);
-      if (result.success) {
-        console.log(chalk.gray(`    v${result.version} | ${result.filesCount} files | ${(result.size / 1024).toFixed(2)} KB`));
-      } else {
-        console.log(chalk.red(`    Error: ${result.error}`));
-      }
-    }
-
-    if (session.isSuccessful()) {
-      console.log(chalk.green(`\n✅ Installation successful!\n`));
-    } else {
-      console.log(chalk.red(`\n❌ Installation completed with errors\n`));
-    }
-
-    console.log(chalk.blue('='.repeat(70) + '\n'));
-
-    return report;
-  }
-
-  /**
-   * Get session report
-   */
-  getSessionReport() {
-    return this.currentSession ? this.generateReport(this.currentSession) : null;
-  }
-}
-
-// ============================================================================
-// EXPORTS
-// ============================================================================
-
-export {
-  PackageInstaller,
-  PackageResolver,
-  PackageInstallResult,
-  InstallationSession,
-  PackageSource
-};
-
-export default PackageInstaller;
\ No newline at end of file
diff --git a/packages/flutterjs_engine/bin/commands/index.js b/packages/flutterjs_engine/bin/commands/index.js
deleted file mode 100644
index a78138e7..00000000
--- a/packages/flutterjs_engine/bin/commands/index.js
+++ /dev/null
@@ -1,832 +0,0 @@
-/**
- * ============================================================================
- * FlutterJS CLI - Unified Commands Module (FIXED)
- * ============================================================================
- * 
- * All commands integrated with BuildPipeline:
- * - build: Production build with analysis
- * - dev: Development server with HMR
- * - run: All-in-one (build + serve)
- * - clean: Remove artifacts
- * - preview: Preview production build
- * - analyze: Code analysis
- * - doctor: Environment check
- * - init: Project creation
- * 
- * Location: cli/commands/index.js
- */
-
-import chalk from 'chalk';
-import ora from 'ora';
-import path from 'path';
-import fs from 'fs';
-import http from 'http';
-import { fileURLToPath } from 'url';
-import { exec, execSync } from 'child_process';
-import { promisify } from 'util';
-import open from 'open';
-
-// Try to import optional dependencies
-let chokidar;
-try {
-  import('chokidar').then(module => {
-    chokidar = module.default;
-  }).catch(() => {
-    chokidar = null;
-  });
-} catch (e) {
-  chokidar = null;
-}
-
-// Import systems
-import { BuildPipeline } from './build_pipeline.js';
-import { DevServer } from './dev.js';
-import { initProject } from './init.js';
-
-const execAsync = promisify(exec);
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-// ============================================================================
-// CONFIGURATION LOADER (Fix for loadConfig)
-// ============================================================================
-
-/**
- * Deep merge configuration objects
- */
-function deepMergeConfig(defaults, userConfig) {
-  const merged = { ...defaults };
-
-  for (const key in userConfig) {
-    if (!userConfig.hasOwnProperty(key)) continue;
-
-    const defaultValue = defaults[key];
-    const userValue = userConfig[key];
-
-    // Recursively merge objects
-    if (
-      typeof userValue === 'object' &&
-      userValue !== null &&
-      !Array.isArray(userValue) &&
-      typeof defaultValue === 'object' &&
-      defaultValue !== null &&
-      !Array.isArray(defaultValue)
-    ) {
-      merged[key] = deepMergeConfig(defaultValue, userValue);
-    } else {
-      // Direct assignment for primitives and arrays
-      merged[key] = userValue;
-    }
-  }
-
-  return merged;
-}
-
-/**
- * Load project configuration - handles both ESM and CommonJS
- */
-function loadConfigFile(configPath) {
-  try {
-    if (!fs.existsSync(configPath)) {
-      return null;
-    }
-
-    const configCode = fs.readFileSync(configPath, 'utf-8');
-
-    // Create a safe sandbox for eval
-    const sandbox = { module: { exports: {} } };
-
-    try {
-      // Execute the config file in the sandbox
-      new Function('module', 'exports', configCode).call(sandbox, sandbox.module, sandbox.module.exports);
-      return sandbox.module.exports;
-    } catch (evalError) {
-      console.warn(
-        chalk.yellow(`⚠️  Could not parse config file: ${evalError.message}`)
-      );
-      return null;
-    }
-  } catch (error) {
-    console.warn(chalk.yellow(`⚠️  Error loading config file: ${error.message}`));
-    return null;
-  }
-}
-
-function loadConfig(projectContext) {
-  try {
-    const configPath = path.join(projectContext.projectRoot, 'flutterjs.config.js');
-
-    if (!fs.existsSync(configPath)) {
-      if (projectContext.projectRoot !== process.cwd()) {
-        console.warn(chalk.yellow(`⚠️  No flutterjs.config.js found, using defaults\n`));
-      }
-      return getDefaultConfig();
-    }
-
-    // Try to load the actual config file
-    const userConfig = loadConfigFile(configPath);
-
-    if (userConfig && typeof userConfig === 'object') {
-      // Deep merge user config with defaults
-      return deepMergeConfig(getDefaultConfig(), userConfig);
-    }
-
-    console.warn(chalk.yellow(`⚠️  Could not parse flutterjs.config.js, using defaults\n`));
-    return getDefaultConfig();
-  } catch (error) {
-    console.warn(chalk.yellow(`⚠️  Config loading error: ${error.message}, using defaults\n`));
-    return getDefaultConfig();
-  }
-}
-
-/**
- * Get default configuration
- */
-function getDefaultConfig() {
-  return {
-    project: {
-      name: 'flutter-js-app',
-      version: '1.0.0',
-    },
-    entry: {
-      main: 'lib/main.fjs',
-      rootWidget: 'MyApp',
-    },
-    build: {
-      output: 'dist',
-      source: 'lib',
-      publicPath: '/',
-    },
-    dev: {
-      server: {
-        port: 3000,
-        host: 'localhost',
-        https: false,
-      },
-      hmr: {
-        enabled: true,
-        interval: 300,
-      },
-    },
-    render: {
-      mode: 'csr',
-      target: 'web',
-    },
-  };
-}
-
-// ============================================================================
-// BUILD COMMAND
-// ============================================================================
-
-/**
- * Build command - Production build with optional analysis
- */
-export async function build(options, projectContext) {
-  const spinner = ora('Building for production...').start();
-
-  try {
-    // Validate configuration
-    spinner.text = 'Validating configuration...';
-    const config = loadConfig(projectContext);
-
-    // Resolve entry file path
-    const entryFile = config.entry?.main || 'lib/main.fjs';
-    const entryPath = path.resolve(projectContext.projectRoot, entryFile);
-
-    if (!fs.existsSync(entryPath)) {
-      throw new Error(`Entry file not found: ${entryFile}\n\nExpected at: ${entryPath}`);
-    }
-
-    // Create build pipeline with FULL config
-    const pipeline = new BuildPipeline({
-      projectRoot: projectContext.projectRoot,
-      mode: 'production',
-      target: options.target || 'spa',
-      entryFile: entryFile,  // Pass actual entry file
-      outputDir: options.output || 'dist',
-      debugMode: options.debug || false,
-      enableHotReload: false,
-      enablePerformanceMonitoring: true,
-      enableMemoryTracking: true,
-      // IMPORTANT: Pass full config
-      config: config,
-    });
-
-    // Run build pipeline
-    spinner.text = 'Analyzing & building source code...';
-    const result = await pipeline.run();
-
-    spinner.stop();
-
-    // Display build results
-    console.log(chalk.blue('\n📊 Build Results:\n'));
-    console.log(chalk.gray(`  Output:     ${options.output || 'dist'}`));
-    console.log(chalk.gray(`  Mode:       ${options.target || 'spa'}`));
-    console.log(chalk.gray(`  Time:       ${result.stats.totalTime.toFixed(2)}ms`));
-    console.log(chalk.gray(`  Widgets:    ${result.analysis.widgets?.count || 0}`));
-    console.log();
-
-    // Display file sizes
-    if (result.output.html) {
-      const htmlSize = (result.output.html.length / 1024).toFixed(2);
-      console.log(chalk.gray(`  HTML:       ${htmlSize} KB`));
-    }
-
-    if (result.output.css) {
-      const cssSize = (result.output.css.length / 1024).toFixed(2);
-      console.log(chalk.gray(`  CSS:        ${cssSize} KB`));
-    }
-
-    if (result.output.js) {
-      const jsSize = (result.output.js.length / 1024).toFixed(2);
-      console.log(chalk.gray(`  JavaScript: ${jsSize} KB`));
-    }
-
-    console.log();
-
-    // Analyze bundle if requested
-    if (options.analyze) {
-      console.log(chalk.cyan('Analyzing bundle...\n'));
-      console.log(chalk.gray('(Bundle analysis available via "flutterjs analyze")\n'));
-    }
-
-    // Cleanup pipeline
-    pipeline.dispose();
-
-    console.log(chalk.green('✅ Build successful!\n'));
-
-    return {
-      success: true,
-      outputPath: path.join(projectContext.projectRoot, options.output || 'dist'),
-      buildTime: result.stats.totalTime,
-      analysisResults: result.analysis,
-    };
-
-  } catch (error) {
-    spinner.fail(chalk.red('❌ Build failed'));
-    console.error(chalk.red(`\nError: ${error.message}`));
-    if (options.debug) {
-      console.error(chalk.gray(error.stack));
-    }
-    process.exit(1);
-  }
-}
-
-// ============================================================================
-// DEV COMMAND
-// ============================================================================
-
-/**
- * Dev command - Development server with HMR
- */
-export async function dev(options, projectContext) {
-  const spinner = ora('Setting up development environment...').start();
-
-  try {
-    // Load configuration
-    spinner.text = 'Loading project configuration...';
-    const config = loadConfig(projectContext);
-
-    // Resolve entry file path
-    const entryFile = config.entry?.main || 'lib/main.fjs';
-    const entryPath = path.resolve(projectContext.projectRoot, entryFile);
-
-    if (!fs.existsSync(entryPath)) {
-      throw new Error(`Entry file not found: ${entryFile}`);
-    }
-
-    // Create build pipeline (for initial build)
-    const pipeline = new BuildPipeline({
-      projectRoot: projectContext.projectRoot,
-      mode: 'development',
-      target: 'spa',
-      entryFile: entryFile,  // ✅ Pass .fjs file
-      outputDir: '.dev',
-      debugMode: options.debug || false,
-      enableHotReload: true,
-      enablePerformanceMonitoring: true,
-      enableMemoryTracking: options.debug || false,
-    });
-
-    // Run initial build
-    spinner.text = 'Running initial build...';
-    const buildResult = await pipeline.run();
-
-    // ✅ Copy app.js to .dev/
-    const appJsSource = path.join(
-      path.dirname(import.meta.url).replace('file://', ''),
-      '../app.js'
-    );
-    const appJsDest = path.join(projectContext.projectRoot, '.dev', 'app.js');
-
-    if (fs.existsSync(appJsSource)) {
-      fs.copyFileSync(appJsSource, appJsDest);
-    }
-
-    // Create development server
-    const devServer = new DevServer(config, projectContext);
-
-    spinner.stop();
-
-    // Start dev server
-    await devServer.start();
-
-    // Setup file watching for rebuilds
-    setupDevWatch(devServer, pipeline, projectContext, config);
-
-    // Handle graceful shutdown
-    setupGracefulShutdown(devServer, pipeline);
-
-  } catch (error) {
-    spinner.fail(chalk.red('✗ Dev server failed'));
-    console.error(chalk.red(`\nError: ${error.message}`));
-    if (options.debug) {
-      console.error(chalk.gray(error.stack));
-    }
-    process.exit(1);
-  }
-}
-
-// ============================================================================
-// RUN COMMAND
-// ============================================================================
-
-/**
- * Run command - All-in-one: build + dev server
- */
-export async function run(options, projectContext) {
-  const spinner = ora('Starting FlutterJS runtime...').start();
-
-  try {
-    // ===== CRITICAL: AWAIT the config loading =====
-    spinner.text = 'Loading configuration...';
-    const config = await loadConfig(projectContext);  // ← ADD await HERE!
-
-    console.log('checking' + config?.entry?.main);
-
-    if (!config?.entry?.main) {
-      throw new Error('No entry.main in config. Check flutterjs.config.js');
-    }
-
-    const entryFile = config.entry.main;
-    const entryPath = path.resolve(projectContext.projectRoot, entryFile);
-
-    if (!fs.existsSync(entryPath)) {
-      throw new Error(`Entry file not found: ${entryPath}`);
-    }
-
-    // ===== Create pipeline with FULL config =====
-    const pipeline = new BuildPipeline({
-      projectRoot: projectContext.projectRoot,
-      mode: 'development',
-      target: options.target || 'spa',
-      outputDir: options.output || 'dist',
-      debugMode: options.debug || false,
-      ...config  // ← Pass full config
-    });
-
-    // Run build
-    spinner.text = 'Building application...';
-    const buildResult = await pipeline.run();
-
-    spinner.stop();
-
-    // Display build info
-    console.log(chalk.blue('\n📊 Build Complete:\n'));
-    console.log(chalk.gray(`  Widgets:    ${buildResult.analysis.widgets?.count || 0}`));
-    console.log(chalk.gray(`  Build time: ${buildResult.duration}ms`));
-    console.log();
-
-    // Start server if not production-only
-    if (options.serve !== false) {
-      const port = parseInt(options.port || 3000, 10);
-      const host = 'localhost';
-
-      console.log(chalk.cyan('Starting development server...\n'));
-
-      const devServer = new DevServer(
-        {
-          ...config,
-          dev: {
-            ...config.dev,
-            server: {
-              port,
-              host,
-              https: false,
-            },
-          },
-        },
-        projectContext
-      );
-
-      await devServer.start();
-      setupGracefulShutdown(devServer, pipeline);
-    } else {
-      pipeline.dispose();
-    }
-
-  } catch (error) {
-    spinner.fail(chalk.red('❌ Run failed'));
-    console.error(chalk.red(`\nError: ${error.message}`));
-    if (options.debug) {
-      console.error(chalk.gray('\nStack:'), error.stack);
-    }
-    process.exit(1);
-  }
-}
-// ============================================================================
-// CLEAN COMMAND
-// ============================================================================
-
-/**
- * Clean command - Remove build artifacts
- */
-export async function clean(options, projectContext) {
-  const spinner = ora('Cleaning build artifacts...').start();
-
-  try {
-    const paths = [
-      path.join(projectContext.projectRoot, 'dist'),
-      path.join(projectContext.projectRoot, '.dev'),
-      path.join(projectContext.projectRoot, '.flutterjs'),
-    ];
-
-    if (options.all) {
-      paths.push(path.join(projectContext.projectRoot, 'node_modules'));
-    }
-
-    for (const dir of paths) {
-      if (fs.existsSync(dir)) {
-        spinner.text = `Removing ${path.relative(projectContext.projectRoot, dir)}...`;
-        fs.rmSync(dir, { recursive: true, force: true });
-      }
-    }
-
-    spinner.succeed(chalk.green('✅ Clean complete\n'));
-
-  } catch (error) {
-    spinner.fail(chalk.red('❌ Clean failed'));
-    console.error(chalk.red(`\nError: ${error.message}`));
-    process.exit(1);
-  }
-}
-
-// ============================================================================
-// PREVIEW COMMAND
-// ============================================================================
-
-/**
- * Preview command - Serve production build
- */
-export async function preview(options, projectContext) {
-  const spinner = ora('Starting preview server...').start();
-
-  try {
-    const buildDir = options.output || 'dist';
-    const buildPath = path.join(projectContext.projectRoot, buildDir);
-
-    // Check if build exists
-    if (!fs.existsSync(buildPath)) {
-      throw new Error(`Build not found at ${buildDir}\n\nRun "flutterjs build" first.`);
-    }
-
-    spinner.text = 'Setting up preview server...';
-
-    const port = parseInt(options.port || 4173, 10);
-
-    const server = http.createServer((req, res) => {
-      let filePath = path.join(buildPath, req.url === '/' ? 'index.html' : req.url);
-
-      if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
-        res.writeHead(200, { 'Content-Type': 'text/html' });
-        res.end(fs.readFileSync(filePath));
-      } else {
-        // SPA fallback
-        res.writeHead(200, { 'Content-Type': 'text/html' });
-        res.end(fs.readFileSync(path.join(buildPath, 'index.html')));
-      }
-    });
-
-    server.listen(port, () => {
-      spinner.stop();
-      console.log(chalk.green('\n✅ Preview server running!\n'));
-      console.log(chalk.blue(`🌐 Open: http://localhost:${port}\n`));
-
-      // Open browser if requested
-      if (options.open) {
-        setTimeout(() => {
-          open(`http://localhost:${port}`).catch(() => { });
-        }, 500);
-      }
-    });
-
-    process.on('SIGINT', () => {
-      console.log(chalk.yellow('\n\n👋 Shutting down preview server...'));
-      server.close(() => {
-        console.log(chalk.green('✅ Server stopped\n'));
-        process.exit(0);
-      });
-    });
-
-  } catch (error) {
-    spinner.fail(chalk.red('❌ Preview failed'));
-    console.error(chalk.red(`\nError: ${error.message}`));
-    process.exit(1);
-  }
-}
-
-// ============================================================================
-// ANALYZE COMMAND
-// ============================================================================
-
-/**
- * Analyze command - Code analysis and reports
- */
-export async function analyze(options, projectContext) {
-  const spinner = ora('Running code analysis...').start();
-
-  try {
-    const config = loadConfig(projectContext);
-
-    // Resolve entry file path
-    const entryFile = config.entry?.main || 'lib/main.fjs';
-    const entryPath = path.resolve(projectContext.projectRoot, entryFile);
-
-    if (!fs.existsSync(entryPath)) {
-      throw new Error(`Entry file not found: ${entryFile}`);
-    }
-
-    // Create pipeline with analysis
-    const pipeline = new BuildPipeline({
-      projectRoot: projectContext.projectRoot,
-      mode: 'development',
-      target: 'spa',
-      entryFile: entryFile,
-      outputDir: '.analysis',
-      debugMode: true,
-    });
-
-    spinner.text = 'Analyzing source code...';
-    const result = await pipeline.run();
-
-    spinner.stop();
-
-    // Display analysis results
-    console.log(chalk.blue('\n📊 Code Analysis Results:\n'));
-
-    // Widgets
-    if (result.analysis.widgets) {
-      console.log(chalk.cyan('Widgets:'));
-      console.log(chalk.gray(`  Total:      ${result.analysis.widgets.count}`));
-      console.log(chalk.gray(`  Stateless:  ${result.analysis.widgets.stateless || 0}`));
-      console.log(chalk.gray(`  Stateful:   ${result.analysis.widgets.stateful || 0}`));
-      console.log();
-    }
-
-    // Save report if requested
-    if (options.output) {
-      const reportPath = path.join(projectContext.projectRoot, options.output);
-      fs.writeFileSync(reportPath, JSON.stringify(result.analysis, null, 2));
-      console.log(chalk.gray(`Report saved to: ${options.output}\n`));
-    }
-
-    console.log(chalk.green('✅ Analysis complete\n'));
-
-    pipeline.dispose();
-
-  } catch (error) {
-    spinner.fail(chalk.red('❌ Analysis failed'));
-    console.error(chalk.red(`\nError: ${error.message}`));
-    process.exit(1);
-  }
-}
-
-// ============================================================================
-// DOCTOR COMMAND
-// ============================================================================
-
-/**
- * Doctor command - Environment diagnostics
- */
-export async function doctor(options, projectContext) {
-  console.log(chalk.blue('\n🏥 FlutterJS Doctor\n'));
-
-  try {
-    const checks = [];
-
-    // 1. Node.js version
-    const nodeVersion = process.version;
-    const nodeOk = semverGte(nodeVersion, '18.0.0');
-    checks.push({
-      name: 'Node.js',
-      version: nodeVersion,
-      status: nodeOk,
-      message: nodeOk ? 'Compatible' : 'Node.js 18+ required',
-    });
-
-    // 2. npm/yarn/pnpm
-    const packageManagers = checkPackageManagers();
-    checks.push({
-      name: 'Package Manager',
-      version: packageManagers.active || 'Not found',
-      status: !!packageManagers.active,
-      message: packageManagers.active ? `Using ${packageManagers.active}` : 'Install npm, yarn, or pnpm',
-    });
-
-    // 3. Git
-    const gitOk = isCommandAvailable('git');
-    checks.push({
-      name: 'Git',
-      version: gitOk ? 'Installed' : 'Not found',
-      status: gitOk,
-      message: gitOk ? 'Ready' : 'Optional - Install Git',
-    });
-
-    // 4. FlutterJS config
-    const configExists = fs.existsSync(
-      path.join(projectContext.projectRoot, 'flutterjs.config.js')
-    );
-    checks.push({
-      name: 'FlutterJS Config',
-      version: configExists ? 'Found' : 'Not found',
-      status: configExists,
-      message: configExists ? 'Valid' : 'Run "flutterjs init" or create flutterjs.config.js',
-    });
-
-    // 5. Build artifacts
-    const distExists = fs.existsSync(path.join(projectContext.projectRoot, 'dist'));
-    checks.push({
-      name: 'Build Artifacts',
-      version: distExists ? 'Present' : 'None',
-      status: distExists,
-      message: distExists ? 'Ready' : 'Run "flutterjs build"',
-    });
-
-    // Display results
-    console.log(chalk.cyan('Checks:\n'));
-
-    checks.forEach((check) => {
-      const icon = check.status ? chalk.green('✓') : chalk.red('✗');
-      console.log(`${icon} ${chalk.gray(check.name.padEnd(20))} ${check.message}`);
-    });
-
-    console.log();
-
-    const allOk = checks.every((c) => c.status);
-
-    if (allOk) {
-      console.log(chalk.green('✅ All checks passed!\n'));
-    } else {
-      console.log(chalk.yellow('⚠️  Some checks failed\n'));
-    }
-
-  } catch (error) {
-    console.error(chalk.red(`\nError: ${error.message}`));
-    process.exit(1);
-  }
-}
-
-// ============================================================================
-// INIT COMMAND
-// ============================================================================
-
-/**
- * Init command - Create new project
- */
-export async function init(projectName, options) {
-  try {
-    await initProject(projectName, options);
-    console.log(chalk.green(`\n✅ Project created!\n`));
-  } catch (error) {
-    console.error(chalk.red(`\n❌ Project creation failed\n`));
-    console.error(chalk.red(`Error: ${error.message}`));
-    process.exit(1);
-  }
-}
-
-/**
- * Setup file watching for development
- */
-function setupDevWatch(devServer, pipeline, projectContext, config) {
-  if (!chokidar) {
-    console.warn(chalk.yellow('⚠️  chokidar not available, file watching disabled'));
-    return;
-  }
-
-  const watcher = chokidar.watch(
-    [
-      path.join(projectContext.projectRoot, config.build?.source || 'lib'),
-      path.join(projectContext.projectRoot, 'public'),
-      path.join(projectContext.projectRoot, 'flutterjs.config.js'),
-    ],
-    {
-      ignoreInitial: true,
-      ignored: /node_modules|dist|\.dev/,
-      awaitWriteFinish: {
-        stabilityThreshold: 200,
-        pollInterval: 100,
-      },
-    }
-  );
-
-  watcher.on('change', async (filePath) => {
-    console.log(chalk.cyan(`\n[CHANGE] ${path.relative(projectContext.projectRoot, filePath)}`));
-
-    // Trigger rebuild
-    try {
-      const result = await pipeline.run();
-      devServer.updateBuildAnalysis(result.analysis);
-      console.log(chalk.green('✅ Rebuild complete\n'));
-    } catch (error) {
-      devServer.reportBuildError(error);
-      console.error(chalk.red(`Build error: ${error.message}\n`));
-    }
-  });
-
-  // Cleanup watcher on shutdown
-  process.on('SIGINT', () => {
-    watcher.close();
-  });
-}
-
-/**
- * Setup graceful shutdown
- */
-function setupGracefulShutdown(devServer, pipeline) {
-  const shutdown = async () => {
-    await devServer.stop();
-    pipeline.dispose();
-    process.exit(0);
-  };
-
-  process.on('SIGINT', shutdown);
-  process.on('SIGTERM', shutdown);
-}
-
-/**
- * Check if command is available
- */
-function isCommandAvailable(cmd) {
-  try {
-    execSync(`which ${cmd}`, { stdio: 'ignore' });
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Check installed package managers
- */
-function checkPackageManagers() {
-  const managers = { npm: false, yarn: false, pnpm: false, active: null };
-
-  try {
-    execSync('npm --version', { stdio: 'ignore' });
-    managers.npm = true;
-    if (!managers.active) managers.active = 'npm';
-  } catch { }
-
-  try {
-    execSync('yarn --version', { stdio: 'ignore' });
-    managers.yarn = true;
-    if (!managers.active) managers.active = 'yarn';
-  } catch { }
-
-  try {
-    execSync('pnpm --version', { stdio: 'ignore' });
-    managers.pnpm = true;
-    managers.active = 'pnpm';
-  } catch { }
-
-  return managers;
-}
-
-/**
- * Simple semver comparison
- */
-function semverGte(version, target) {
-  const parse = (v) =>
-    v.replace(/^v/, '').split('.').map((x) => parseInt(x, 10));
-  const [maj1, min1, pat1] = parse(version);
-  const [maj2, min2, pat2] = parse(target);
-
-  if (maj1 !== maj2) return maj1 > maj2;
-  if (min1 !== min2) return min1 > min2;
-  return pat1 >= pat2;
-}
-
-// ============================================================================
-// EXPORTS
-// ============================================================================
-
-export default {
-  build,
-  dev,
-  run,
-  clean,
-  preview,
-  analyze,
-  doctor,
-  init,
-};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/bin/index.js b/packages/flutterjs_engine/bin/index.js
index 77a08faa..22d5aa68 100644
--- a/packages/flutterjs_engine/bin/index.js
+++ b/packages/flutterjs_engine/bin/index.js
@@ -26,7 +26,7 @@ import {
   preview,
   analyze,
   doctor,
-} from './commands/index.js';
+} from '../src/index.js';
 
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
diff --git a/packages/flutterjs_engine/flutterjs.imports.json b/packages/flutterjs_engine/flutterjs.imports.json
index 1da2d9b3..47f2aea6 100644
--- a/packages/flutterjs_engine/flutterjs.imports.json
+++ b/packages/flutterjs_engine/flutterjs.imports.json
@@ -1,6 +1,12 @@
 {
     "imports": {
         "@flutterjs/material": "./package/material/src/index.js",
-        "@flutterjs/runtime": "./src/runtime/src/flutterjs_runtime.js"
+        "@flutterjs/runtime": "./src/runtime/src/flutterjs_runtime.js",
+        "@flutterjs/dart/math": "../flutterjs_dart/src/math/index.js",
+        "@flutterjs/dart/async": "../flutterjs_dart/src/async/index.js",
+        "@flutterjs/dart/convert": "../flutterjs_dart/src/convert/index.js",
+        "@flutterjs/dart/developer": "../flutterjs_dart/src/developer/index.js",
+        "@flutterjs/dart/collection": "../flutterjs_dart/src/collection/index.js",
+        "@flutterjs/dart/typed_data": "../flutterjs_dart/src/typed_data/index.js"
     }
 }
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package-lock.json b/packages/flutterjs_engine/package-lock.json
index 5aba2480..fbcb46aa 100644
--- a/packages/flutterjs_engine/package-lock.json
+++ b/packages/flutterjs_engine/package-lock.json
@@ -9,10 +9,10 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
-        "@flutterjs/analyzer": "file:./src/analyzer",
-        "@flutterjs/material": "file:./package/material",
-        "@flutterjs/runtime": "file:./src/runtime",
-        "@flutterjs/vdom": "file:./src/vdom",
+        "@flutterjs/analyzer": "file:../flutterjs_analyzer/flutterjs_analyzer",
+        "@flutterjs/material": "file:../flutterjs_material/flutterjs_material",
+        "@flutterjs/runtime": "file:../flutterjs_runtime/flutterjs_runtime",
+        "@flutterjs/vdom": "file:../flutterjs_vdom/flutterjs_vdom",
         "chalk": "^5.6.2",
         "chokidar": "^5.0.0",
         "commander": "^14.0.2",
@@ -32,9 +32,67 @@
         "node": ">=14.0.0"
       }
     },
-    "../../package/material": {},
-    "../../src/runtime": {},
-    "../vdom": {},
+    "../../package/material": {
+      "extraneous": true
+    },
+    "../../src/runtime": {
+      "extraneous": true
+    },
+    "../flutterjs_analyzer/flutterjs_analyzer": {
+      "name": "@flutterjs/analyzer",
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "@flutterjs/material": "file:../../flutterjs_material/flutterjs_material",
+        "@flutterjs/runtime": "file:../../flutterjs_runtime/flutterjs_runtime",
+        "@flutterjs/vdom": "file:../../flutterjs_vdom/flutterjs_vdom"
+      },
+      "devDependencies": {
+        "esbuild": "^0.27.2",
+        "jest": "^29.7.0"
+      }
+    },
+    "../flutterjs_material/flutterjs_material": {
+      "name": "@flutterjs/material",
+      "version": "0.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@flutterjs/runtime": "file:../../flutterjs_runtime/flutterjs_runtime",
+        "@flutterjs/vdom": "file:../../flutterjs_vdom/flutterjs_vdom"
+      },
+      "devDependencies": {
+        "esbuild": "^0.18.0"
+      }
+    },
+    "../flutterjs_runtime/flutterjs_runtime": {
+      "name": "@flutterjs/runtime",
+      "version": "0.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@flutterjs/vdom": "file:../../flutterjs_vdom/flutterjs_vdom",
+        "jest": "^29.7.0",
+        "jsdom": "^22.1.0"
+      },
+      "devDependencies": {
+        "esbuild": "^0.27.2"
+      }
+    },
+    "../flutterjs_vdom/flutterjs_vdom": {
+      "name": "@flutterjs/vdom",
+      "version": "0.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@flutterjs/runtime": "file:../../flutterjs_runtime/flutterjs_runtime",
+        "jest": "^29.7.0",
+        "jsdom": "^22.1.0"
+      },
+      "devDependencies": {
+        "esbuild": "^0.27.2"
+      }
+    },
+    "../vdom": {
+      "extraneous": true
+    },
     "file./src/vdom": {
       "extraneous": true
     },
@@ -499,641 +557,199 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "license": "MIT"
     },
-    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz",
-      "integrity": "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "aix"
-      ],
+    "node_modules/@flutterjs/analyzer": {
+      "resolved": "../flutterjs_analyzer/flutterjs_analyzer",
+      "link": true
+    },
+    "node_modules/@flutterjs/material": {
+      "resolved": "../flutterjs_material/flutterjs_material",
+      "link": true
+    },
+    "node_modules/@flutterjs/runtime": {
+      "resolved": "../flutterjs_runtime/flutterjs_runtime",
+      "link": true
+    },
+    "node_modules/@flutterjs/vdom": {
+      "resolved": "../flutterjs_vdom/flutterjs_vdom",
+      "link": true
+    },
+    "node_modules/@istanbuljs/load-nyc-config": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
+      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.3.1",
+        "find-up": "^4.1.0",
+        "get-package-type": "^0.1.0",
+        "js-yaml": "^3.13.1",
+        "resolve-from": "^5.0.0"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=8"
       }
     },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.2.tgz",
-      "integrity": "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
+    "node_modules/@istanbuljs/schema": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
       "engines": {
-        "node": ">=18"
+        "node": ">=8"
       }
     },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz",
-      "integrity": "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
+    "node_modules/@jest/console": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/console/-/console-29.7.0.tgz",
+      "integrity": "sha512-5Ni4CU7XHQi32IJ398EEP4RrB8eV09sXP2ROqD4bksHrnTree52PsxvX8tpL8LvTZ3pFzXyPbNQReSN41CAhOg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
+      "dependencies": {
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "jest-message-util": "^29.7.0",
+        "jest-util": "^29.7.0",
+        "slash": "^3.0.0"
+      },
       "engines": {
-        "node": ">=18"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.2.tgz",
-      "integrity": "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
+    "node_modules/@jest/console/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz",
-      "integrity": "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
+    "node_modules/@jest/console/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz",
-      "integrity": "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
+    "node_modules/@jest/core": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/core/-/core-29.7.0.tgz",
+      "integrity": "sha512-n7aeXWKMnGtDA48y8TLWJPJmLmmZ642Ceo78cYWEpiD7FzDgmNDV/GCVRorPABdXLJZ/9wzzgZAlHjXjxDHGsg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
+      "dependencies": {
+        "@jest/console": "^29.7.0",
+        "@jest/reporters": "^29.7.0",
+        "@jest/test-result": "^29.7.0",
+        "@jest/transform": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "exit": "^0.1.2",
+        "graceful-fs": "^4.2.9",
+        "jest-changed-files": "^29.7.0",
+        "jest-config": "^29.7.0",
+        "jest-haste-map": "^29.7.0",
+        "jest-message-util": "^29.7.0",
+        "jest-regex-util": "^29.6.3",
+        "jest-resolve": "^29.7.0",
+        "jest-resolve-dependencies": "^29.7.0",
+        "jest-runner": "^29.7.0",
+        "jest-runtime": "^29.7.0",
+        "jest-snapshot": "^29.7.0",
+        "jest-util": "^29.7.0",
+        "jest-validate": "^29.7.0",
+        "jest-watcher": "^29.7.0",
+        "micromatch": "^4.0.4",
+        "pretty-format": "^29.7.0",
+        "slash": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      },
       "engines": {
-        "node": ">=18"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz",
-      "integrity": "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
+    "node_modules/@jest/core/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz",
-      "integrity": "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
+    "node_modules/@jest/core/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
       "engines": {
-        "node": ">=18"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz",
-      "integrity": "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
+    "node_modules/@jest/environment": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-29.7.0.tgz",
+      "integrity": "sha512-aQIfHDq33ExsN4jP1NWGXhxgQ/wixs60gDiKO+XVMd8Mn0NWPWgc34ZQDTb2jKaUWQ7MuwoitXAsN2XVXNMpAw==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "dependencies": {
+        "@jest/fake-timers": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "jest-mock": "^29.7.0"
+      },
       "engines": {
-        "node": ">=18"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz",
-      "integrity": "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
+    "node_modules/@jest/expect": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/expect/-/expect-29.7.0.tgz",
+      "integrity": "sha512-8uMeAMycttpva3P1lBHB8VciS9V0XAr3GymPpipdyQXbBcuhkLQOSe8E/p92RyAdToS6ZD1tFkX+CkhoECE0dQ==",
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
+      "dependencies": {
+        "expect": "^29.7.0",
+        "jest-snapshot": "^29.7.0"
+      },
       "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz",
-      "integrity": "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.2.tgz",
-      "integrity": "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz",
-      "integrity": "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz",
-      "integrity": "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz",
-      "integrity": "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz",
-      "integrity": "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz",
-      "integrity": "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz",
-      "integrity": "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz",
-      "integrity": "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz",
-      "integrity": "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz",
-      "integrity": "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz",
-      "integrity": "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openharmony"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz",
-      "integrity": "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz",
-      "integrity": "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz",
-      "integrity": "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/win32-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz",
-      "integrity": "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@flutterjs/analyzer": {
-      "resolved": "src/analyzer",
-      "link": true
-    },
-    "node_modules/@flutterjs/material": {
-      "resolved": "package/material",
-      "link": true
-    },
-    "node_modules/@flutterjs/runtime": {
-      "resolved": "src/runtime",
-      "link": true
-    },
-    "node_modules/@flutterjs/vdom": {
-      "resolved": "src/vdom",
-      "link": true
-    },
-    "node_modules/@istanbuljs/load-nyc-config": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
-      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
-      "license": "ISC",
-      "dependencies": {
-        "camelcase": "^5.3.1",
-        "find-up": "^4.1.0",
-        "get-package-type": "^0.1.0",
-        "js-yaml": "^3.13.1",
-        "resolve-from": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@istanbuljs/schema": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
-      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@jest/console": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/console/-/console-29.7.0.tgz",
-      "integrity": "sha512-5Ni4CU7XHQi32IJ398EEP4RrB8eV09sXP2ROqD4bksHrnTree52PsxvX8tpL8LvTZ3pFzXyPbNQReSN41CAhOg==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/types": "^29.6.3",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "jest-message-util": "^29.7.0",
-        "jest-util": "^29.7.0",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/console/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@jest/console/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/@jest/core": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/core/-/core-29.7.0.tgz",
-      "integrity": "sha512-n7aeXWKMnGtDA48y8TLWJPJmLmmZ642Ceo78cYWEpiD7FzDgmNDV/GCVRorPABdXLJZ/9wzzgZAlHjXjxDHGsg==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/console": "^29.7.0",
-        "@jest/reporters": "^29.7.0",
-        "@jest/test-result": "^29.7.0",
-        "@jest/transform": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "@types/node": "*",
-        "ansi-escapes": "^4.2.1",
-        "chalk": "^4.0.0",
-        "ci-info": "^3.2.0",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.2.9",
-        "jest-changed-files": "^29.7.0",
-        "jest-config": "^29.7.0",
-        "jest-haste-map": "^29.7.0",
-        "jest-message-util": "^29.7.0",
-        "jest-regex-util": "^29.6.3",
-        "jest-resolve": "^29.7.0",
-        "jest-resolve-dependencies": "^29.7.0",
-        "jest-runner": "^29.7.0",
-        "jest-runtime": "^29.7.0",
-        "jest-snapshot": "^29.7.0",
-        "jest-util": "^29.7.0",
-        "jest-validate": "^29.7.0",
-        "jest-watcher": "^29.7.0",
-        "micromatch": "^4.0.4",
-        "pretty-format": "^29.7.0",
-        "slash": "^3.0.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      },
-      "peerDependencies": {
-        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
-      },
-      "peerDependenciesMeta": {
-        "node-notifier": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@jest/core/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@jest/core/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/@jest/environment": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-29.7.0.tgz",
-      "integrity": "sha512-aQIfHDq33ExsN4jP1NWGXhxgQ/wixs60gDiKO+XVMd8Mn0NWPWgc34ZQDTb2jKaUWQ7MuwoitXAsN2XVXNMpAw==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/fake-timers": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "@types/node": "*",
-        "jest-mock": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/expect": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/expect/-/expect-29.7.0.tgz",
-      "integrity": "sha512-8uMeAMycttpva3P1lBHB8VciS9V0XAr3GymPpipdyQXbBcuhkLQOSe8E/p92RyAdToS6ZD1tFkX+CkhoECE0dQ==",
-      "license": "MIT",
-      "dependencies": {
-        "expect": "^29.7.0",
-        "jest-snapshot": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
     "node_modules/@jest/expect-utils": {
@@ -1484,15 +1100,6 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
-    "node_modules/@tootallnate/once": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
-      "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1606,36 +1213,17 @@
       "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==",
       "license": "MIT"
     },
-    "node_modules/abab": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
-      "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
-      "deprecated": "Use your platform's native atob() and btoa() methods instead",
-      "license": "BSD-3-Clause"
-    },
     "node_modules/accepts": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
-      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
-      "license": "MIT",
-      "dependencies": {
-        "mime-types": "^3.0.0",
-        "negotiator": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/agent-base": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
       "license": "MIT",
       "dependencies": {
-        "debug": "4"
+        "mime-types": "^3.0.0",
+        "negotiator": "^1.0.0"
       },
       "engines": {
-        "node": ">= 6.0.0"
+        "node": ">= 0.6"
       }
     },
     "node_modules/ansi-escapes": {
@@ -1696,12 +1284,6 @@
         "sprintf-js": "~1.0.2"
       }
     },
-    "node_modules/asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "license": "MIT"
-    },
     "node_modules/babel-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz",
@@ -2175,18 +1757,6 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
-    "node_modules/combined-stream": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "license": "MIT",
-      "dependencies": {
-        "delayed-stream": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/commander": {
       "version": "14.0.2",
       "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.2.tgz",
@@ -2381,32 +1951,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/cssstyle": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
-      "integrity": "sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==",
-      "license": "MIT",
-      "dependencies": {
-        "rrweb-cssom": "^0.6.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/data-urls": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
-      "integrity": "sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==",
-      "license": "MIT",
-      "dependencies": {
-        "abab": "^2.0.6",
-        "whatwg-mimetype": "^3.0.0",
-        "whatwg-url": "^12.0.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -2424,12 +1968,6 @@
         }
       }
     },
-    "node_modules/decimal.js": {
-      "version": "10.6.0",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
-      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
-      "license": "MIT"
-    },
     "node_modules/dedent": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.7.1.tgz",
@@ -2493,15 +2031,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -2529,19 +2058,6 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/domexception": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
-      "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
-      "deprecated": "Use your platform's native DOMException instead",
-      "license": "MIT",
-      "dependencies": {
-        "webidl-conversions": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -2595,18 +2111,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/entities": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
-      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
     "node_modules/error-ex": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
@@ -2646,63 +2150,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/es-set-tostringtag": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
-      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.6",
-        "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/esbuild": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz",
-      "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.27.2",
-        "@esbuild/android-arm": "0.27.2",
-        "@esbuild/android-arm64": "0.27.2",
-        "@esbuild/android-x64": "0.27.2",
-        "@esbuild/darwin-arm64": "0.27.2",
-        "@esbuild/darwin-x64": "0.27.2",
-        "@esbuild/freebsd-arm64": "0.27.2",
-        "@esbuild/freebsd-x64": "0.27.2",
-        "@esbuild/linux-arm": "0.27.2",
-        "@esbuild/linux-arm64": "0.27.2",
-        "@esbuild/linux-ia32": "0.27.2",
-        "@esbuild/linux-loong64": "0.27.2",
-        "@esbuild/linux-mips64el": "0.27.2",
-        "@esbuild/linux-ppc64": "0.27.2",
-        "@esbuild/linux-riscv64": "0.27.2",
-        "@esbuild/linux-s390x": "0.27.2",
-        "@esbuild/linux-x64": "0.27.2",
-        "@esbuild/netbsd-arm64": "0.27.2",
-        "@esbuild/netbsd-x64": "0.27.2",
-        "@esbuild/openbsd-arm64": "0.27.2",
-        "@esbuild/openbsd-x64": "0.27.2",
-        "@esbuild/openharmony-arm64": "0.27.2",
-        "@esbuild/sunos-x64": "0.27.2",
-        "@esbuild/win32-arm64": "0.27.2",
-        "@esbuild/win32-ia32": "0.27.2",
-        "@esbuild/win32-x64": "0.27.2"
-      }
-    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -2926,43 +2373,6 @@
         }
       }
     },
-    "node_modules/form-data": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
-      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
-      "license": "MIT",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "es-set-tostringtag": "^2.1.0",
-        "hasown": "^2.0.2",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/form-data/node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/form-data/node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "license": "MIT",
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -3158,21 +2568,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/has-tostringtag": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
-      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "license": "MIT",
-      "dependencies": {
-        "has-symbols": "^1.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -3185,18 +2580,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/html-encoding-sniffer": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
-      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
-      "license": "MIT",
-      "dependencies": {
-        "whatwg-encoding": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -3237,20 +2620,6 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/http-proxy-agent": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
-      "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
-      "license": "MIT",
-      "dependencies": {
-        "@tootallnate/once": "2",
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/http-proxy-middleware": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-3.0.5.tgz",
@@ -3268,19 +2637,6 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/https-proxy-agent": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
-      "license": "MIT",
-      "dependencies": {
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/human-signals": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
@@ -3495,12 +2851,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-potential-custom-element-name": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
-      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
-      "license": "MIT"
-    },
     "node_modules/is-promise": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
@@ -4650,48 +4000,6 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
-    "node_modules/jsdom": {
-      "version": "22.1.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-22.1.0.tgz",
-      "integrity": "sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==",
-      "license": "MIT",
-      "dependencies": {
-        "abab": "^2.0.6",
-        "cssstyle": "^3.0.0",
-        "data-urls": "^4.0.0",
-        "decimal.js": "^10.4.3",
-        "domexception": "^4.0.0",
-        "form-data": "^4.0.0",
-        "html-encoding-sniffer": "^3.0.0",
-        "http-proxy-agent": "^5.0.0",
-        "https-proxy-agent": "^5.0.1",
-        "is-potential-custom-element-name": "^1.0.1",
-        "nwsapi": "^2.2.4",
-        "parse5": "^7.1.2",
-        "rrweb-cssom": "^0.6.0",
-        "saxes": "^6.0.0",
-        "symbol-tree": "^3.2.4",
-        "tough-cookie": "^4.1.2",
-        "w3c-xmlserializer": "^4.0.0",
-        "webidl-conversions": "^7.0.0",
-        "whatwg-encoding": "^2.0.0",
-        "whatwg-mimetype": "^3.0.0",
-        "whatwg-url": "^12.0.1",
-        "ws": "^8.13.0",
-        "xml-name-validator": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=16"
-      },
-      "peerDependencies": {
-        "canvas": "^2.5.0"
-      },
-      "peerDependenciesMeta": {
-        "canvas": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -4980,12 +4288,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/nwsapi": {
-      "version": "2.2.23",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.23.tgz",
-      "integrity": "sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==",
-      "license": "MIT"
-    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -5207,18 +4509,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/parse5": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
-      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
-      "license": "MIT",
-      "dependencies": {
-        "entities": "^6.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/inikulin/parse5?sponsor=1"
-      }
-    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -5362,27 +4652,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/psl": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
-      "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
-      "license": "MIT",
-      "dependencies": {
-        "punycode": "^2.3.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/lupomontero"
-      }
-    },
-    "node_modules/punycode": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
-      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/pure-rand": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-6.1.0.tgz",
@@ -5414,12 +4683,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/querystringify": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
-      "license": "MIT"
-    },
     "node_modules/range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -5587,12 +4850,6 @@
         "node": ">= 18"
       }
     },
-    "node_modules/rrweb-cssom": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
-      "integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==",
-      "license": "MIT"
-    },
     "node_modules/run-applescript": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.1.0.tgz",
@@ -5631,18 +4888,6 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
-    "node_modules/saxes": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
-      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
-      "license": "ISC",
-      "dependencies": {
-        "xmlchars": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=v12.22.7"
-      }
-    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -5968,12 +5213,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/symbol-tree": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
-      "license": "MIT"
-    },
     "node_modules/test-exclude": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
@@ -6015,33 +5254,6 @@
         "node": ">=0.6"
       }
     },
-    "node_modules/tough-cookie": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
-      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "psl": "^1.1.33",
-        "punycode": "^2.1.1",
-        "universalify": "^0.2.0",
-        "url-parse": "^1.5.3"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/tr46": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz",
-      "integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==",
-      "license": "MIT",
-      "dependencies": {
-        "punycode": "^2.3.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/type-detect": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
@@ -6083,15 +5295,6 @@
       "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
       "license": "MIT"
     },
-    "node_modules/universalify": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4.0.0"
-      }
-    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -6131,113 +5334,36 @@
         "browserslist": ">= 4.21.0"
       }
     },
-    "node_modules/url-parse": {
-      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
-      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
-      "license": "MIT",
-      "dependencies": {
-        "querystringify": "^2.1.1",
-        "requires-port": "^1.0.0"
-      }
-    },
-    "node_modules/v8-to-istanbul": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.3.0.tgz",
-      "integrity": "sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==",
-      "license": "ISC",
-      "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.12",
-        "@types/istanbul-lib-coverage": "^2.0.1",
-        "convert-source-map": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10.12.0"
-      }
-    },
-    "node_modules/vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/w3c-xmlserializer": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
-      "integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
-      "license": "MIT",
-      "dependencies": {
-        "xml-name-validator": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/walker": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
-      "integrity": "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "makeerror": "1.0.12"
-      }
-    },
-    "node_modules/webidl-conversions": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
-      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/whatwg-encoding": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
-      "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
-      "license": "MIT",
-      "dependencies": {
-        "iconv-lite": "0.6.3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/whatwg-encoding/node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "license": "MIT",
+    "node_modules/v8-to-istanbul": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.3.0.tgz",
+      "integrity": "sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==",
+      "license": "ISC",
       "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
+        "@jridgewell/trace-mapping": "^0.3.12",
+        "@types/istanbul-lib-coverage": "^2.0.1",
+        "convert-source-map": "^2.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=10.12.0"
       }
     },
-    "node_modules/whatwg-mimetype": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
-      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
       "license": "MIT",
       "engines": {
-        "node": ">=12"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/whatwg-url": {
-      "version": "12.0.1",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz",
-      "integrity": "sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==",
-      "license": "MIT",
+    "node_modules/walker": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
+      "integrity": "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "tr46": "^4.1.1",
-        "webidl-conversions": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=14"
+        "makeerror": "1.0.12"
       }
     },
     "node_modules/which": {
@@ -6343,21 +5469,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/xml-name-validator": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
-      "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/xmlchars": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
-      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
-      "license": "MIT"
-    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -6426,7 +5537,8 @@
     },
     "package/material": {
       "name": "@flutterjs/material",
-      "version": "1.0.0",
+      "version": "1.0.1",
+      "extraneous": true,
       "license": "MIT",
       "dependencies": {
         "@flutterjs/runtime": "file:../../src/runtime",
@@ -6436,421 +5548,10 @@
         "esbuild": "^0.18.0"
       }
     },
-    "package/material/node_modules/@esbuild/android-arm": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
-      "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/android-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
-      "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/android-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
-      "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/darwin-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
-      "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/darwin-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
-      "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
-      "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/freebsd-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
-      "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/linux-arm": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
-      "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/linux-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
-      "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/linux-ia32": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
-      "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/linux-loong64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
-      "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/linux-mips64el": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
-      "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/linux-ppc64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
-      "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/linux-riscv64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
-      "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/linux-s390x": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
-      "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/linux-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
-      "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/netbsd-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
-      "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/openbsd-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
-      "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/sunos-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
-      "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/win32-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
-      "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/win32-ia32": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
-      "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/@esbuild/win32-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
-      "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "package/material/node_modules/esbuild": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
-      "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "optionalDependencies": {
-        "@esbuild/android-arm": "0.18.20",
-        "@esbuild/android-arm64": "0.18.20",
-        "@esbuild/android-x64": "0.18.20",
-        "@esbuild/darwin-arm64": "0.18.20",
-        "@esbuild/darwin-x64": "0.18.20",
-        "@esbuild/freebsd-arm64": "0.18.20",
-        "@esbuild/freebsd-x64": "0.18.20",
-        "@esbuild/linux-arm": "0.18.20",
-        "@esbuild/linux-arm64": "0.18.20",
-        "@esbuild/linux-ia32": "0.18.20",
-        "@esbuild/linux-loong64": "0.18.20",
-        "@esbuild/linux-mips64el": "0.18.20",
-        "@esbuild/linux-ppc64": "0.18.20",
-        "@esbuild/linux-riscv64": "0.18.20",
-        "@esbuild/linux-s390x": "0.18.20",
-        "@esbuild/linux-x64": "0.18.20",
-        "@esbuild/netbsd-x64": "0.18.20",
-        "@esbuild/openbsd-x64": "0.18.20",
-        "@esbuild/sunos-x64": "0.18.20",
-        "@esbuild/win32-arm64": "0.18.20",
-        "@esbuild/win32-ia32": "0.18.20",
-        "@esbuild/win32-x64": "0.18.20"
-      }
-    },
     "src/analyzer": {
       "name": "@flutterjs/analyzer",
       "version": "1.0.0",
+      "extraneous": true,
       "license": "MIT",
       "dependencies": {
         "@flutterjs/material": "file:../../../../package/material",
@@ -6862,21 +5563,10 @@
         "jest": "^29.7.0"
       }
     },
-    "src/analyzer/node_modules/@flutterjs/material": {
-      "resolved": "../../package/material",
-      "link": true
-    },
-    "src/analyzer/node_modules/@flutterjs/runtime": {
-      "resolved": "../../src/runtime",
-      "link": true
-    },
-    "src/analyzer/node_modules/@flutterjs/vdom": {
-      "resolved": "../vdom",
-      "link": true
-    },
     "src/runtime": {
       "name": "@flutterjs/runtime",
       "version": "1.0.0",
+      "extraneous": true,
       "license": "ISC",
       "dependencies": {
         "@flutterjs/vdom": "file:../vdom",
@@ -6890,6 +5580,7 @@
     "src/vdom": {
       "name": "@flutterjs/vdom",
       "version": "1.0.0",
+      "extraneous": true,
       "dependencies": {
         "@flutterjs/runtime": "file:../runtime",
         "jest": "^29.7.0",
diff --git a/packages/flutterjs_engine/package.json b/packages/flutterjs_engine/package.json
index c83c56f8..c89a34be 100644
--- a/packages/flutterjs_engine/package.json
+++ b/packages/flutterjs_engine/package.json
@@ -31,10 +31,10 @@
     "compression": "^1.8.1",
     "cors": "^2.8.5",
     "commander": "^14.0.2",
-    "@flutterjs/analyzer": "file:./src/analyzer",
-    "@flutterjs/runtime": "file:./src/runtime",
-    "@flutterjs/vdom": "file:./src/vdom",
-    "@flutterjs/material": "file:./package/material"
+    "@flutterjs/analyzer": "file:../flutterjs_analyzer/flutterjs_analyzer",
+    "@flutterjs/runtime": "file:../flutterjs_runtime/flutterjs_runtime",
+    "@flutterjs/vdom": "file:../flutterjs_vdom/flutterjs_vdom",
+    "@flutterjs/material": "file:../flutterjs_material/flutterjs_material"
   },
   "keywords": [
     "flutter",
diff --git a/packages/flutterjs_engine/package/material/README.md b/packages/flutterjs_engine/package/material/README.md
deleted file mode 100644
index 3ff10da2..00000000
--- a/packages/flutterjs_engine/package/material/README.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# @flutterjs/material
-
-The Material Design implementation for FlutterJS.
-
-## Documentation
-
-- **[Documentation Index](docs/README.md)**
-- **[Component Guide](docs/component-guide.md)**
-- **[Widget Status](docs/status.md)**
-
-## Usage
-
-```javascript
-import { MaterialApp, Scaffold, AppBar, Text, Center } from '@flutterjs/material';
-
-function MyApp() {
-  return MaterialApp({
-    title: 'My App',
-    home: Scaffold({
-      appBar: AppBar({ title: Text('Hello World') }),
-      body: Center({ child: Text('Welcome!') })
-    })
-  });
-}
-```
diff --git a/packages/flutterjs_engine/package/material/build.js b/packages/flutterjs_engine/package/material/build.js
deleted file mode 100644
index 55d0f1c3..00000000
--- a/packages/flutterjs_engine/package/material/build.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import esbuild from 'esbuild';
-import { readFileSync, writeFileSync, readdirSync, statSync, watch } from 'fs';
-import { join, relative, extname } from 'path';
-
-const srcDir = 'src';
-const outDir = 'dist';
-
-/**
- * ✅ Recursively find ALL .js files in src/
- */
-function getAllJsFiles(dir) {
-  const files = [];
-  const items = readdirSync(dir);
-
-  for (const item of items) {
-    const fullPath = join(dir, item);
-    const stat = statSync(fullPath);
-
-    if (stat.isDirectory()) {
-      files.push(...getAllJsFiles(fullPath));
-    } else if (extname(item) === '.js') {
-      files.push(fullPath);
-    }
-  }
-
-  return files;
-}
-
-/**
- * Build each .js file separately
- */
-async function buildAllFiles() {
-  try {
-    console.log('🚀 Building @flutterjs/material...\n');
-
-    // ✅ Find all .js files
-    const allFiles = getAllJsFiles(srcDir);
-
-    console.log(`📁 Found ${allFiles.length} files\n`);
-
-    // ✅ Build each file separately
-    for (const srcFile of allFiles) {
-      const relativePath = relative(srcDir, srcFile);
-      const outFile = join(outDir, relativePath);
-
-      console.log(`📦 ${relativePath}`);
-
-      await esbuild.build({
-        entryPoints: [srcFile],
-        outfile: outFile,
-        bundle: false,
-        minify: true,
-        platform: 'browser',
-        target: ['es2020'],
-        format: 'esm',
-        sourcemap: true,
-      });
-    }
-
-    console.log();
-
-    // ✅ Generate exports based on all built files
-    generateExports(allFiles);
-
-    console.log('✅ Build successful!\n');
-
-  } catch (error) {
-    console.error('❌ Build failed:', error.message);
-  }
-}
-
-/**
- * Auto-generate package.json exports in the exact format requested
- * "./core/widget_element.js" → "./dist/core/widget_element.js"
- */
-function generateExports(sourceFiles) {
-  const packageJsonPath = './package.json';
-  const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
-
-  const exports = {};
-
-  // Main entry point
-  exports['.'] = './dist/index.js';
-
-  // ✅ Create export for EVERY built file with exact format
-  for (const srcFile of sourceFiles) {
-    const relativePath = relative(srcDir, srcFile);
-
-    // Skip index.js - it's already the main entry
-    if (relativePath === 'index.js') {
-      continue;
-    }
-
-    // Convert path with .js extension:
-    // core.js → ./core.js
-    // core/widget_element.js → ./core/widget_element.js
-    // material.js → ./material.js
-    // widgets/compoment/multi_child_view.js → ./widgets/compoment/multi_child_view.js
-
-    // Normalize slashes for Windows
-    const normalizedPath = relativePath.replace(/\\/g, '/');
-    const exportKey = './' + normalizedPath.replaceAll(".js", "");
-    const exportPath = './dist/' + normalizedPath;
-
-    exports[exportKey] = exportPath;
-  }
-
-  // Update package.json
-  packageJson.exports = exports;
-  packageJson.main = './dist/index.js';
-
-  writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n');
-
-  console.log('📝 Generated exports:\n');
-  Object.entries(exports).forEach(([key, value]) => {
-    console.log(`   "${key}": "${value}"`);
-  });
-  console.log();
-}
-
-/**
- * Watch mode - rebuild on file changes
- */
-function watchMode() {
-  console.log('👀 Watching for changes...\n');
-
-  watch(srcDir, { recursive: true }, (eventType, filename) => {
-    if (extname(filename) === '.js') {
-      console.log(`\n⚡ ${filename} changed\n`);
-      buildAllFiles();
-    }
-  });
-}
-
-// ✅ Check for --watch flag
-const isWatchMode = process.argv.includes('--watch');
-
-if (isWatchMode) {
-  buildAllFiles().then(() => watchMode());
-} else {
-  buildAllFiles();
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/dist/core/core.js b/packages/flutterjs_engine/package/material/dist/core/core.js
deleted file mode 100644
index b1c6d1cc..00000000
--- a/packages/flutterjs_engine/package/material/dist/core/core.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{State as l,Widget as a,StatelessWidget as i,StatelessElement as o,StatefulWidget as r,StatefulElement as g,ProxyWidget as y,ProxyElement as d,ErrorWidget as s,Key as S,ValueKey as W,ObjectKey as m,GlobalKey as n,Diagnosticable as E}from"./widget_element.js";export{E as Diagnosticable,s as ErrorWidget,n as GlobalKey,S as Key,m as ObjectKey,d as ProxyElement,y as ProxyWidget,l as State,g as StatefulElement,r as StatefulWidget,o as StatelessElement,i as StatelessWidget,W as ValueKey,a as Widget};
-//# sourceMappingURL=core.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/core/core.js.map b/packages/flutterjs_engine/package/material/dist/core/core.js.map
deleted file mode 100644
index a8382b1e..00000000
--- a/packages/flutterjs_engine/package/material/dist/core/core.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/core/core.js"],
-  "sourcesContent": ["// src/core/index.js\r\n// Core widget and element classes\r\n\r\nexport {\r\n    State,\r\n    Widget,\r\n    StatelessWidget,\r\n    StatelessElement,\r\n    StatefulWidget,\r\n    StatefulElement,\r\n    ProxyWidget,\r\n    ProxyElement,\r\n    ErrorWidget,\r\n    Key,\r\n    ValueKey,\r\n    ObjectKey,\r\n    GlobalKey,\r\n    Diagnosticable\r\n} from \"./widget_element.js\";"],
-  "mappings": "AAGA,OACI,SAAAA,EACA,UAAAC,EACA,mBAAAC,EACA,oBAAAC,EACA,kBAAAC,EACA,mBAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,OAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,kBAAAC,MACG",
-  "names": ["State", "Widget", "StatelessWidget", "StatelessElement", "StatefulWidget", "StatefulElement", "ProxyWidget", "ProxyElement", "ErrorWidget", "Key", "ValueKey", "ObjectKey", "GlobalKey", "Diagnosticable"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/core/widget_element.js b/packages/flutterjs_engine/package/material/dist/core/widget_element.js
deleted file mode 100644
index 4d7ec4cf..00000000
--- a/packages/flutterjs_engine/package/material/dist/core/widget_element.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{Diagnosticable as s,Element as g,StatelessElement as c,StatefulElement as d}from"@flutterjs/runtime/element";import{VNode as p}from"@flutterjs/vdom/vnode";class S extends s{constructor(){super(),this._element=null,this._widget=null,this._mounted=!1,this._building=!1,this._didInitState=!1,this._didMount=!1,this._isActive=!1,this._buildCount=0}get widget(){return this._widget}get context(){return this._element?.context||null}get mounted(){return this._mounted}initState(){}didUpdateWidget(t){}didChangeDependencies(){}didMount(){}dispose(){}activate(){}deactivate(){}build(t){throw new Error(`${this.constructor.name}.build(context) must be implemented`)}setState(t){if(!this.mounted){console.warn("[State] setState called on unmounted state");return}if(this._building&&console.warn("[State] setState called during build"),typeof t=="function")try{t.call(this)}catch(e){throw console.error("[State] setState update function failed:",e),e}else typeof t=="object"&&t!==null&&Object.assign(this,t);this._element&&typeof this._element.markNeedsBuild=="function"&&this._element.markNeedsBuild()}_init(){if(!this._didInitState){this._didInitState=!0,this._mounted=!0,this._isActive=!0;try{console.log(`[State] Calling initState for ${this.constructor.name}`),this.initState()}catch(t){throw console.error("[State] initState failed:",t),t}}}_didChangeDependencies(){try{this.didChangeDependencies()}catch(t){console.error("[State] didChangeDependencies failed:",t)}}_didMount(){if(!this._didMount){this._didMount=!0;try{console.log(`[State] Calling didMount for ${this.constructor.name}`),this.didMount()}catch(t){console.error("[State] didMount failed:",t)}}}_dispose(){this._mounted=!1,this._isActive=!1;try{console.log(`[State] Calling dispose for ${this.constructor.name}`),this.dispose()}catch(t){console.error("[State] dispose failed:",t)}}_deactivate(){if(this._isActive){this._isActive=!1;try{this.deactivate()}catch(t){console.error("[State] deactivate failed:",t)}}}_reactivate(){if(!this._isActive){this._isActive=!0;try{this.activate()}catch(t){console.error("[State] activate failed:",t)}}}toStringShort(){return`${this.constructor.name}`}}class r extends s{constructor(t=null){if(super(),new.target===r)throw new Error("Widget is abstract and cannot be instantiated");this.key=t}createElement(t,e){throw new Error(`${this.constructor.name}.createElement() must be implemented`)}toStringShort(){return`${this.constructor.name}${this.key?`(key: ${this.key})`:"(unkeyed)"}`}debugFillProperties(t){super.debugFillProperties(t)}}class h extends r{constructor(t=null){super(t)}build(t){throw new Error(`${this.constructor.name}.build(context) must be implemented`)}createElement(t,e){return new c(this,t,e)}}class b extends r{constructor(t=null){super(t)}createState(){throw new Error(`${this.constructor.name}.createState() must be implemented`)}createElement(t,e){return new d(this,t,e)}}class o extends r{constructor({key:t=null,child:e=null}={}){if(super(t),new.target===o)throw new Error("ProxyWidget is abstract");this.child=e}createElement(t,e){return new m(this,t,e)}}class m extends g{constructor(t,e=null,f=null){super(t,e,f)}performRebuild(){if(!this.widget.child)return null;try{const t=this.widget.child.createElement(this,this.runtime);return t&&typeof t.mount=="function"&&t.mount(this),t&&t._vnode?t._vnode:t&&typeof t.performRebuild=="function"?t.performRebuild():null}catch(t){throw console.error("[ProxyElement] performRebuild failed:",t),t}}}class w extends h{constructor({message:t="Error",error:e=null}={}){super(),this.message=t,this.error=e}build(t){return new p({tag:"div",props:{style:{backgroundColor:"#ff1744",color:"white",padding:"16px",borderRadius:"4px",fontFamily:"monospace",fontSize:"12px",whiteSpace:"pre-wrap",wordBreak:"break-word"}},children:[this.message]})}}class i{constructor(){if(new.target===i)throw new Error("Key is abstract")}}class l extends i{constructor(t){super(),this.value=t}equals(t){return t instanceof l&&this.value===t.value}toString(){return`ValueKey(${this.value})`}}class a extends i{constructor(t){super(),this.value=t}equals(t){return t instanceof a&&this.value===t.value}toString(){return`ObjectKey(${this.value})`}}class u extends i{constructor(t=null){super(),this.debugLabel=t,this._currentElement=null}get currentContext(){return this._currentElement?.context||null}get currentWidget(){return this._currentElement?.widget||null}get currentState(){return this._currentElement?.state||null}equals(t){return t instanceof u&&this===t}toString(){return`GlobalKey${this.debugLabel?`(${this.debugLabel})`:""}`}}export{s as Diagnosticable,w as ErrorWidget,u as GlobalKey,i as Key,a as ObjectKey,m as ProxyElement,o as ProxyWidget,S as State,d as StatefulElement,b as StatefulWidget,c as StatelessElement,h as StatelessWidget,l as ValueKey,r as Widget};
-//# sourceMappingURL=widget_element.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/core/widget_element.js.map b/packages/flutterjs_engine/package/material/dist/core/widget_element.js.map
deleted file mode 100644
index e8922364..00000000
--- a/packages/flutterjs_engine/package/material/dist/core/widget_element.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/core/widget_element.js"],
-  "sourcesContent": ["/**\r\n * FIXED: Complete Stateful/Stateless Widget System\r\n * \r\n * KEY FIXES:\r\n * 1. StatefulElement properly initializes State with lifecycle\r\n * 2. State.setState() correctly marks element for rebuild\r\n * 3. Proper context passing through entire widget tree\r\n * 4. Both StatelessElement and StatefulElement work correctly\r\n */\r\n\r\nimport { Diagnosticable, Element, StatelessElement, StatefulElement } from \"@flutterjs/runtime/element\";\r\nimport { VNode } from \"@flutterjs/vdom/vnode\";\r\n\r\n// ============================================================================\r\n// STATE BASE CLASS - FIXED\r\n// ============================================================================\r\n\r\n/**\r\n * State - Mutable state holder for StatefulWidget\r\n * \r\n * \u00E2\u0153\u2026 CRITICAL: This is now properly integrated with StatefulElement\r\n */\r\nclass State extends Diagnosticable {\r\n  constructor() {\r\n    super();\r\n\r\n    // Internal references\r\n    this._element = null;           // Owner StatefulElement\r\n    this._widget = null;            // Current widget configuration\r\n    this._mounted = false;          // Is state mounted?\r\n    this._building = false;         // Currently building?\r\n\r\n    // Lifecycle tracking\r\n    this._didInitState = false;\r\n    this._didMount = false;\r\n    this._isActive = false;\r\n\r\n    // Performance tracking\r\n    this._buildCount = 0;\r\n  }\r\n\r\n  /**\r\n   * Get the widget that created this state\r\n   */\r\n  get widget() {\r\n    return this._widget;\r\n  }\r\n\r\n  /**\r\n   * Get the build context\r\n   */\r\n  get context() {\r\n    return this._element?.context || null;\r\n  }\r\n\r\n  /**\r\n   * Check if state is mounted\r\n   */\r\n  get mounted() {\r\n    return this._mounted;\r\n  }\r\n\r\n  // ========== LIFECYCLE METHODS ==========\r\n\r\n  /**\r\n   * Called once when state is first created\r\n   * Override to initialize state variables\r\n   */\r\n  initState() {\r\n    // Override in subclass\r\n  }\r\n\r\n  /**\r\n   * Called when widget configuration changes\r\n   * @param {Widget} oldWidget - Previous widget\r\n   */\r\n  didUpdateWidget(oldWidget) {\r\n    // Override in subclass\r\n  }\r\n\r\n  /**\r\n   * Called when inherited dependencies change\r\n   */\r\n  didChangeDependencies() {\r\n    // Override in subclass\r\n  }\r\n\r\n  /**\r\n   * Called after first frame is rendered\r\n   */\r\n  didMount() {\r\n    // Override in subclass\r\n  }\r\n\r\n  /**\r\n   * Called when state is about to be permanently removed\r\n   * Override to cleanup resources\r\n   */\r\n  dispose() {\r\n    // Override in subclass\r\n  }\r\n\r\n  /**\r\n   * Called when state is reactivated\r\n   */\r\n  activate() {\r\n    // Override in subclass\r\n  }\r\n\r\n  /**\r\n   * Called when state is deactivated\r\n   */\r\n  deactivate() {\r\n    // Override in subclass\r\n  }\r\n\r\n  /**\r\n   * Build the widget tree\r\n   * MUST be overridden in subclass\r\n   * @param {BuildContext} context - Build context\r\n   * @returns {Widget|VNode} Widget tree or VNode\r\n   */\r\n  build(context) {\r\n    throw new Error(`${this.constructor.name}.build(context) must be implemented`);\r\n  }\r\n\r\n  // ========== STATE MANAGEMENT ==========\r\n\r\n  /**\r\n   * Update state and schedule rebuild\r\n   * @param {Function|Object} updateFn - Update function or object\r\n   */\r\n  setState(updateFn) {\r\n    if (!this.mounted) {\r\n      console.warn(`[State] setState called on unmounted state`);\r\n      return;\r\n    }\r\n\r\n    if (this._building) {\r\n      console.warn(`[State] setState called during build`);\r\n    }\r\n\r\n    // Apply update\r\n    if (typeof updateFn === 'function') {\r\n      try {\r\n        updateFn.call(this);\r\n      } catch (error) {\r\n        console.error(`[State] setState update function failed:`, error);\r\n        throw error;\r\n      }\r\n    } else if (typeof updateFn === 'object' && updateFn !== null) {\r\n      Object.assign(this, updateFn);\r\n    }\r\n\r\n    // Trigger rebuild\r\n    if (this._element && typeof this._element.markNeedsBuild === 'function') {\r\n      this._element.markNeedsBuild();\r\n    }\r\n  }\r\n\r\n  // ========== INTERNAL LIFECYCLE (called by StatefulElement) ==========\r\n\r\n  /**\r\n   * Internal: Initialize state\r\n   * Called by StatefulElement after mount\r\n   */\r\n  _init() {\r\n    if (this._didInitState) {\r\n      return;\r\n    }\r\n\r\n    this._didInitState = true;\r\n    this._mounted = true;\r\n    this._isActive = true;\r\n\r\n    try {\r\n      console.log(`[State] Calling initState for ${this.constructor.name}`);\r\n      this.initState();\r\n    } catch (error) {\r\n      console.error(`[State] initState failed:`, error);\r\n      throw error;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Internal: Call didChangeDependencies\r\n   */\r\n  _didChangeDependencies() {\r\n    try {\r\n      this.didChangeDependencies();\r\n    } catch (error) {\r\n      console.error(`[State] didChangeDependencies failed:`, error);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Internal: Call didMount\r\n   */\r\n  _didMount() {\r\n    if (this._didMount) {\r\n      return;\r\n    }\r\n\r\n    this._didMount = true;\r\n\r\n    try {\r\n      console.log(`[State] Calling didMount for ${this.constructor.name}`);\r\n      this.didMount();\r\n    } catch (error) {\r\n      console.error(`[State] didMount failed:`, error);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Internal: Dispose state\r\n   */\r\n  _dispose() {\r\n    this._mounted = false;\r\n    this._isActive = false;\r\n\r\n    try {\r\n      console.log(`[State] Calling dispose for ${this.constructor.name}`);\r\n      this.dispose();\r\n    } catch (error) {\r\n      console.error(`[State] dispose failed:`, error);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Internal: Deactivate state\r\n   */\r\n  _deactivate() {\r\n    if (!this._isActive) {\r\n      return;\r\n    }\r\n\r\n    this._isActive = false;\r\n\r\n    try {\r\n      this.deactivate();\r\n    } catch (error) {\r\n      console.error(`[State] deactivate failed:`, error);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Internal: Reactivate state\r\n   */\r\n  _reactivate() {\r\n    if (this._isActive) {\r\n      return;\r\n    }\r\n\r\n    this._isActive = true;\r\n\r\n    try {\r\n      this.activate();\r\n    } catch (error) {\r\n      console.error(`[State] activate failed:`, error);\r\n    }\r\n  }\r\n\r\n  toStringShort() {\r\n    return `${this.constructor.name}`;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// WIDGET BASE CLASS\r\n// ============================================================================\r\n\r\nclass Widget extends Diagnosticable {\r\n  constructor(key = null) {\r\n    super();\r\n    if (new.target === Widget) {\r\n      throw new Error('Widget is abstract and cannot be instantiated');\r\n    }\r\n    this.key = key;\r\n  }\r\n\r\n  /**\r\n   * Create an Element for this widget\r\n   * Must be implemented in subclasses\r\n   */\r\n  createElement(parent, runtime) {\r\n    throw new Error(\r\n      `${this.constructor.name}.createElement() must be implemented`\r\n    );\r\n  }\r\n\r\n  toStringShort() {\r\n    return `${this.constructor.name}${this.key ? `(key: ${this.key})` : '(unkeyed)'}`;\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// STATELESS WIDGET\r\n// ============================================================================\r\n\r\nclass StatelessWidget extends Widget {\r\n  constructor(key = null) {\r\n    super(key);\r\n  }\r\n\r\n  /**\r\n   * Build the widget UI\r\n   * MUST be overridden\r\n   */\r\n  build(context) {\r\n    throw new Error(`${this.constructor.name}.build(context) must be implemented`);\r\n  }\r\n\r\n  /**\r\n   * Create element for this widget\r\n   */\r\n  createElement(parent, runtime) {\r\n    return new StatelessElement(this, parent, runtime);\r\n  }\r\n}\r\n\r\n// StatelessElement is imported from @flutterjs/runtime\r\n\r\n// ============================================================================\r\n// STATEFUL WIDGET\r\n// ============================================================================\r\n\r\nclass StatefulWidget extends Widget {\r\n  constructor(key = null) {\r\n    super(key);\r\n  }\r\n\r\n  /**\r\n   * Create the state object\r\n   * MUST be overridden\r\n   */\r\n  createState() {\r\n    throw new Error(`${this.constructor.name}.createState() must be implemented`);\r\n  }\r\n\r\n  /**\r\n   * Create element for this widget\r\n   */\r\n  createElement(parent, runtime) {\r\n    return new StatefulElement(this, parent, runtime);\r\n  }\r\n}\r\n\r\n// StatefulElement is imported from @flutterjs/runtime\r\n\r\n// ============================================================================\r\n// PROXY WIDGET\r\n// ============================================================================\r\n\r\nclass ProxyWidget extends Widget {\r\n  constructor({ key = null, child = null } = {}) {\r\n    super(key);\r\n    if (new.target === ProxyWidget) {\r\n      throw new Error('ProxyWidget is abstract');\r\n    }\r\n    this.child = child;\r\n  }\r\n\r\n  createElement(parent, runtime) {\r\n    return new ProxyElement(this, parent, runtime);\r\n  }\r\n}\r\n\r\n/**\r\n * ProxyElement - Element for proxy widget\r\n */\r\nclass ProxyElement extends Element {\r\n  constructor(widget, parent = null, runtime = null) {\r\n    super(widget, parent, runtime);\r\n  }\r\n\r\n  performRebuild() {\r\n    if (!this.widget.child) {\r\n      return null;\r\n    }\r\n\r\n    try {\r\n      const childElement = this.widget.child.createElement(this, this.runtime);\r\n\r\n      if (childElement && typeof childElement.mount === 'function') {\r\n        childElement.mount(this);\r\n      }\r\n\r\n      // \u2705 FIX: Reuse existing VNode if child already built during mount\r\n      // ProxyElement creates a NEW element every time, and mount() triggers a build.\r\n      // We must not trigger performRebuild() again or we get duplication.\r\n      if (childElement && childElement._vnode) {\r\n        return childElement._vnode;\r\n      }\r\n\r\n      if (childElement && typeof childElement.performRebuild === 'function') {\r\n        return childElement.performRebuild();\r\n      }\r\n\r\n      return null;\r\n    } catch (error) {\r\n      console.error(`[ProxyElement] performRebuild failed:`, error);\r\n      throw error;\r\n    }\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// ERROR WIDGET\r\n// ============================================================================\r\n\r\nclass ErrorWidget extends StatelessWidget {\r\n  constructor({ message = 'Error', error = null } = {}) {\r\n    super();\r\n    this.message = message;\r\n    this.error = error;\r\n  }\r\n\r\n  build(context) {\r\n    return new VNode({\r\n      tag: 'div',\r\n      props: {\r\n        style: {\r\n          backgroundColor: '#ff1744',\r\n          color: 'white',\r\n          padding: '16px',\r\n          borderRadius: '4px',\r\n          fontFamily: 'monospace',\r\n          fontSize: '12px',\r\n          whiteSpace: 'pre-wrap',\r\n          wordBreak: 'break-word'\r\n        }\r\n      },\r\n      children: [this.message]\r\n    });\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// KEY CLASSES\r\n// ============================================================================\r\n\r\nclass Key {\r\n  constructor() {\r\n    if (new.target === Key) {\r\n      throw new Error('Key is abstract');\r\n    }\r\n  }\r\n}\r\n\r\nclass ValueKey extends Key {\r\n  constructor(value) {\r\n    super();\r\n    this.value = value;\r\n  }\r\n\r\n  equals(other) {\r\n    return other instanceof ValueKey && this.value === other.value;\r\n  }\r\n\r\n  toString() {\r\n    return `ValueKey(${this.value})`;\r\n  }\r\n}\r\n\r\nclass ObjectKey extends Key {\r\n  constructor(value) {\r\n    super();\r\n    this.value = value;\r\n  }\r\n\r\n  equals(other) {\r\n    return other instanceof ObjectKey && this.value === other.value;\r\n  }\r\n\r\n  toString() {\r\n    return `ObjectKey(${this.value})`;\r\n  }\r\n}\r\n\r\nclass GlobalKey extends Key {\r\n  constructor(debugLabel = null) {\r\n    super();\r\n    this.debugLabel = debugLabel;\r\n    this._currentElement = null;\r\n  }\r\n\r\n  get currentContext() {\r\n    return this._currentElement?.context || null;\r\n  }\r\n\r\n  get currentWidget() {\r\n    return this._currentElement?.widget || null;\r\n  }\r\n\r\n  get currentState() {\r\n    return this._currentElement?.state || null;\r\n  }\r\n\r\n  equals(other) {\r\n    return other instanceof GlobalKey && this === other;\r\n  }\r\n\r\n  toString() {\r\n    return `GlobalKey${this.debugLabel ? `(${this.debugLabel})` : ''}`;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport {\r\n  State,\r\n  Widget,\r\n  StatelessWidget,\r\n  StatelessElement,\r\n  StatefulWidget,\r\n  StatefulElement,\r\n  ProxyWidget,\r\n  ProxyElement,\r\n  ErrorWidget,\r\n  Key,\r\n  ValueKey,\r\n  ObjectKey,\r\n  GlobalKey,\r\n  Diagnosticable\r\n};"],
-  "mappings": "AAUA,OAAS,kBAAAA,EAAgB,WAAAC,EAAS,oBAAAC,EAAkB,mBAAAC,MAAuB,6BAC3E,OAAS,SAAAC,MAAa,wBAWtB,MAAMC,UAAcL,CAAe,CACjC,aAAc,CACZ,MAAM,EAGN,KAAK,SAAW,KAChB,KAAK,QAAU,KACf,KAAK,SAAW,GAChB,KAAK,UAAY,GAGjB,KAAK,cAAgB,GACrB,KAAK,UAAY,GACjB,KAAK,UAAY,GAGjB,KAAK,YAAc,CACrB,CAKA,IAAI,QAAS,CACX,OAAO,KAAK,OACd,CAKA,IAAI,SAAU,CACZ,OAAO,KAAK,UAAU,SAAW,IACnC,CAKA,IAAI,SAAU,CACZ,OAAO,KAAK,QACd,CAQA,WAAY,CAEZ,CAMA,gBAAgBM,EAAW,CAE3B,CAKA,uBAAwB,CAExB,CAKA,UAAW,CAEX,CAMA,SAAU,CAEV,CAKA,UAAW,CAEX,CAKA,YAAa,CAEb,CAQA,MAAMC,EAAS,CACb,MAAM,IAAI,MAAM,GAAG,KAAK,YAAY,IAAI,qCAAqC,CAC/E,CAQA,SAASC,EAAU,CACjB,GAAI,CAAC,KAAK,QAAS,CACjB,QAAQ,KAAK,4CAA4C,EACzD,MACF,CAOA,GALI,KAAK,WACP,QAAQ,KAAK,sCAAsC,EAIjD,OAAOA,GAAa,WACtB,GAAI,CACFA,EAAS,KAAK,IAAI,CACpB,OAASC,EAAO,CACd,cAAQ,MAAM,2CAA4CA,CAAK,EACzDA,CACR,MACS,OAAOD,GAAa,UAAYA,IAAa,MACtD,OAAO,OAAO,KAAMA,CAAQ,EAI1B,KAAK,UAAY,OAAO,KAAK,SAAS,gBAAmB,YAC3D,KAAK,SAAS,eAAe,CAEjC,CAQA,OAAQ,CACN,GAAI,MAAK,cAIT,MAAK,cAAgB,GACrB,KAAK,SAAW,GAChB,KAAK,UAAY,GAEjB,GAAI,CACF,QAAQ,IAAI,iCAAiC,KAAK,YAAY,IAAI,EAAE,EACpE,KAAK,UAAU,CACjB,OAASC,EAAO,CACd,cAAQ,MAAM,4BAA6BA,CAAK,EAC1CA,CACR,EACF,CAKA,wBAAyB,CACvB,GAAI,CACF,KAAK,sBAAsB,CAC7B,OAASA,EAAO,CACd,QAAQ,MAAM,wCAAyCA,CAAK,CAC9D,CACF,CAKA,WAAY,CACV,GAAI,MAAK,UAIT,MAAK,UAAY,GAEjB,GAAI,CACF,QAAQ,IAAI,gCAAgC,KAAK,YAAY,IAAI,EAAE,EACnE,KAAK,SAAS,CAChB,OAASA,EAAO,CACd,QAAQ,MAAM,2BAA4BA,CAAK,CACjD,EACF,CAKA,UAAW,CACT,KAAK,SAAW,GAChB,KAAK,UAAY,GAEjB,GAAI,CACF,QAAQ,IAAI,+BAA+B,KAAK,YAAY,IAAI,EAAE,EAClE,KAAK,QAAQ,CACf,OAASA,EAAO,CACd,QAAQ,MAAM,0BAA2BA,CAAK,CAChD,CACF,CAKA,aAAc,CACZ,GAAK,KAAK,UAIV,MAAK,UAAY,GAEjB,GAAI,CACF,KAAK,WAAW,CAClB,OAASA,EAAO,CACd,QAAQ,MAAM,6BAA8BA,CAAK,CACnD,EACF,CAKA,aAAc,CACZ,GAAI,MAAK,UAIT,MAAK,UAAY,GAEjB,GAAI,CACF,KAAK,SAAS,CAChB,OAASA,EAAO,CACd,QAAQ,MAAM,2BAA4BA,CAAK,CACjD,EACF,CAEA,eAAgB,CACd,MAAO,GAAG,KAAK,YAAY,IAAI,EACjC,CACF,CAMA,MAAMC,UAAeV,CAAe,CAClC,YAAYW,EAAM,KAAM,CAEtB,GADA,MAAM,EACF,aAAeD,EACjB,MAAM,IAAI,MAAM,+CAA+C,EAEjE,KAAK,IAAMC,CACb,CAMA,cAAcC,EAAQC,EAAS,CAC7B,MAAM,IAAI,MACR,GAAG,KAAK,YAAY,IAAI,sCAC1B,CACF,CAEA,eAAgB,CACd,MAAO,GAAG,KAAK,YAAY,IAAI,GAAG,KAAK,IAAM,SAAS,KAAK,GAAG,IAAM,WAAW,EACjF,CAEA,oBAAoBC,EAAY,CAC9B,MAAM,oBAAoBA,CAAU,CACtC,CACF,CAMA,MAAMC,UAAwBL,CAAO,CACnC,YAAYC,EAAM,KAAM,CACtB,MAAMA,CAAG,CACX,CAMA,MAAMJ,EAAS,CACb,MAAM,IAAI,MAAM,GAAG,KAAK,YAAY,IAAI,qCAAqC,CAC/E,CAKA,cAAcK,EAAQC,EAAS,CAC7B,OAAO,IAAIX,EAAiB,KAAMU,EAAQC,CAAO,CACnD,CACF,CAQA,MAAMG,UAAuBN,CAAO,CAClC,YAAYC,EAAM,KAAM,CACtB,MAAMA,CAAG,CACX,CAMA,aAAc,CACZ,MAAM,IAAI,MAAM,GAAG,KAAK,YAAY,IAAI,oCAAoC,CAC9E,CAKA,cAAcC,EAAQC,EAAS,CAC7B,OAAO,IAAIV,EAAgB,KAAMS,EAAQC,CAAO,CAClD,CACF,CAQA,MAAMI,UAAoBP,CAAO,CAC/B,YAAY,CAAE,IAAAC,EAAM,KAAM,MAAAO,EAAQ,IAAK,EAAI,CAAC,EAAG,CAE7C,GADA,MAAMP,CAAG,EACL,aAAeM,EACjB,MAAM,IAAI,MAAM,yBAAyB,EAE3C,KAAK,MAAQC,CACf,CAEA,cAAcN,EAAQC,EAAS,CAC7B,OAAO,IAAIM,EAAa,KAAMP,EAAQC,CAAO,CAC/C,CACF,CAKA,MAAMM,UAAqBlB,CAAQ,CACjC,YAAYmB,EAAQR,EAAS,KAAMC,EAAU,KAAM,CACjD,MAAMO,EAAQR,EAAQC,CAAO,CAC/B,CAEA,gBAAiB,CACf,GAAI,CAAC,KAAK,OAAO,MACf,OAAO,KAGT,GAAI,CACF,MAAMQ,EAAe,KAAK,OAAO,MAAM,cAAc,KAAM,KAAK,OAAO,EASvE,OAPIA,GAAgB,OAAOA,EAAa,OAAU,YAChDA,EAAa,MAAM,IAAI,EAMrBA,GAAgBA,EAAa,OACxBA,EAAa,OAGlBA,GAAgB,OAAOA,EAAa,gBAAmB,WAClDA,EAAa,eAAe,EAG9B,IACT,OAASZ,EAAO,CACd,cAAQ,MAAM,wCAAyCA,CAAK,EACtDA,CACR,CACF,CACF,CAMA,MAAMa,UAAoBP,CAAgB,CACxC,YAAY,CAAE,QAAAQ,EAAU,QAAS,MAAAd,EAAQ,IAAK,EAAI,CAAC,EAAG,CACpD,MAAM,EACN,KAAK,QAAUc,EACf,KAAK,MAAQd,CACf,CAEA,MAAMF,EAAS,CACb,OAAO,IAAIH,EAAM,CACf,IAAK,MACL,MAAO,CACL,MAAO,CACL,gBAAiB,UACjB,MAAO,QACP,QAAS,OACT,aAAc,MACd,WAAY,YACZ,SAAU,OACV,WAAY,WACZ,UAAW,YACb,CACF,EACA,SAAU,CAAC,KAAK,OAAO,CACzB,CAAC,CACH,CACF,CAMA,MAAMoB,CAAI,CACR,aAAc,CACZ,GAAI,aAAeA,EACjB,MAAM,IAAI,MAAM,iBAAiB,CAErC,CACF,CAEA,MAAMC,UAAiBD,CAAI,CACzB,YAAYE,EAAO,CACjB,MAAM,EACN,KAAK,MAAQA,CACf,CAEA,OAAOC,EAAO,CACZ,OAAOA,aAAiBF,GAAY,KAAK,QAAUE,EAAM,KAC3D,CAEA,UAAW,CACT,MAAO,YAAY,KAAK,KAAK,GAC/B,CACF,CAEA,MAAMC,UAAkBJ,CAAI,CAC1B,YAAYE,EAAO,CACjB,MAAM,EACN,KAAK,MAAQA,CACf,CAEA,OAAOC,EAAO,CACZ,OAAOA,aAAiBC,GAAa,KAAK,QAAUD,EAAM,KAC5D,CAEA,UAAW,CACT,MAAO,aAAa,KAAK,KAAK,GAChC,CACF,CAEA,MAAME,UAAkBL,CAAI,CAC1B,YAAYM,EAAa,KAAM,CAC7B,MAAM,EACN,KAAK,WAAaA,EAClB,KAAK,gBAAkB,IACzB,CAEA,IAAI,gBAAiB,CACnB,OAAO,KAAK,iBAAiB,SAAW,IAC1C,CAEA,IAAI,eAAgB,CAClB,OAAO,KAAK,iBAAiB,QAAU,IACzC,CAEA,IAAI,cAAe,CACjB,OAAO,KAAK,iBAAiB,OAAS,IACxC,CAEA,OAAOH,EAAO,CACZ,OAAOA,aAAiBE,GAAa,OAASF,CAChD,CAEA,UAAW,CACT,MAAO,YAAY,KAAK,WAAa,IAAI,KAAK,UAAU,IAAM,EAAE,EAClE,CACF",
-  "names": ["Diagnosticable", "Element", "StatelessElement", "StatefulElement", "VNode", "State", "oldWidget", "context", "updateFn", "error", "Widget", "key", "parent", "runtime", "properties", "StatelessWidget", "StatefulWidget", "ProxyWidget", "child", "ProxyElement", "widget", "childElement", "ErrorWidget", "message", "Key", "ValueKey", "value", "other", "ObjectKey", "GlobalKey", "debugLabel"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/index.js b/packages/flutterjs_engine/package/material/dist/index.js
deleted file mode 100644
index 38fb3e04..00000000
--- a/packages/flutterjs_engine/package/material/dist/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{BorderRadius as e}from"./utils/geometry.js";import{BuildContext as t,runApp as x}from"@flutterjs/runtime";export*from"./core/core.js";export*from"./material/material.js";export*from"./widgets/widgets.js";export*from"./utils/utils.js";export{e as BorderRadius,t as BuildContext,x as runApp};
-//# sourceMappingURL=index.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/index.js.map b/packages/flutterjs_engine/package/material/dist/index.js.map
deleted file mode 100644
index 2505b264..00000000
--- a/packages/flutterjs_engine/package/material/dist/index.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/index.js"],
-  "sourcesContent": ["export { BorderRadius } from \"./utils/geometry.js\";\r\n\r\n// ============================================================================\r\n// FLUTTERJS UNIFIED EXPORT (Material Layer)\r\n// \r\n// This package acts as the main entry point for FlutterJS apps using Material Design.\r\n// It re-exports the core runtime (@flutterjs/runtime) so developers (and generators)\r\n// only need to import from this single package.\r\n// ============================================================================\r\n\r\n// 1. Re-Export Core Runtime Primitives\r\nexport { BuildContext, runApp } from '@flutterjs/runtime';\r\n\r\n// 2. Export Material Components\r\nexport * from \"./core/core.js\";\r\nexport * from \"./material/material.js\";\r\n\r\nexport * from \"./widgets/widgets.js\";\r\nexport * from \"./utils/utils.js\";\r\n"],
-  "mappings": "AAAA,OAAS,gBAAAA,MAAoB,sBAW7B,OAAS,gBAAAC,EAAc,UAAAC,MAAc,qBAGrC,WAAc,iBACd,WAAc,yBAEd,WAAc,uBACd,WAAc",
-  "names": ["BorderRadius", "BuildContext", "runApp"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/material/color.js b/packages/flutterjs_engine/package/material/dist/material/color.js
deleted file mode 100644
index 140fbc20..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/color.js
+++ /dev/null
@@ -1,2 +0,0 @@
-var D=Object.defineProperty;var u=(i,w,t)=>w in i?D(i,w,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[w]=t;var n=(i,w,t)=>(u(i,typeof w!="symbol"?w+"":w,t),t);class F{constructor(w){this.value=typeof w=="string"?parseInt(w.replace("#",""),16):w}static fromARGB(w,t,a,E){const A=w<<24|t<<16|a<<8|E;return new F(A)}static fromRGBO(w,t,a,E){const A=Math.round(E*255);return F.fromARGB(A,w,t,a)}get alpha(){return this.value>>24&255}get red(){return this.value>>16&255}get green(){return this.value>>8&255}get blue(){return this.value&255}get opacity(){return this.alpha/255}toCSSString(){return`#${this.value.toString(16).padStart(8,"0").slice(2)}`}toCSS(){return`rgba(${this.red}, ${this.green}, ${this.blue}, ${this.opacity})`}withAlpha(w){return F.fromARGB(w,this.red,this.green,this.blue)}withOpacity(w){const t=Math.round(w*255);return F.fromARGB(t,this.red,this.green,this.blue)}static lerp(w,t,a){if(w===null)return t?.withOpacity(t.opacity*a);if(t===null)return w?.withOpacity(w.opacity*(1-a));const E=Math.round(w.alpha*(1-a)+t.alpha*a),A=Math.round(w.red*(1-a)+t.red*a),s=Math.round(w.green*(1-a)+t.green*a),B=Math.round(w.blue*(1-a)+t.blue*a);return F.fromARGB(E,A,s,B)}equals(w){return this.value===w.value}toString(){return`Color(0x${this.value.toString(16).padStart(8,"0").toUpperCase()})`}}class r extends F{constructor(w,t){super(w),this._swatch=t||{}}get(w){return this._swatch[w]}[Symbol.for("get")](w){return this._swatch[w]}}class x extends r{constructor(w,t){super(w,t)}get shade50(){return this._swatch[50]}get shade100(){return this._swatch[100]}get shade200(){return this._swatch[200]}get shade300(){return this._swatch[300]}get shade400(){return this._swatch[400]}get shade500(){return this._swatch[500]}get shade600(){return this._swatch[600]}get shade700(){return this._swatch[700]}get shade800(){return this._swatch[800]}get shade900(){return this._swatch[900]}getShade(w){return this._swatch[w]}}class c extends r{constructor(w,t){super(w,t)}get shade100(){return this._swatch[100]}get shade200(){return this._swatch[200]}get shade400(){return this._swatch[400]}get shade700(){return this._swatch[700]}getShade(w){return this._swatch[w]}}const e=class e{static get primaries(){return[e.red,e.pink,e.purple,e.deepPurple,e.indigo,e.blue,e.lightBlue,e.cyan,e.teal,e.green,e.lightGreen,e.lime,e.yellow,e.amber,e.orange,e.deepOrange,e.brown,e.blueGrey]}static get accents(){return[e.redAccent,e.pinkAccent,e.purpleAccent,e.deepPurpleAccent,e.indigoAccent,e.blueAccent,e.lightBlueAccent,e.cyanAccent,e.tealAccent,e.greenAccent,e.lightGreenAccent,e.limeAccent,e.yellowAccent,e.amberAccent,e.orangeAccent,e.deepOrangeAccent]}};n(e,"transparent",new F(0)),n(e,"black",new F(4278190080)),n(e,"black87",new F(3707764736)),n(e,"black54",new F(2315255808)),n(e,"black45",new F(1929379840)),n(e,"black38",new F(1627389952)),n(e,"black26",new F(1107296256)),n(e,"black12",new F(520093696)),n(e,"white",new F(4294967295)),n(e,"white70",new F(3019898879)),n(e,"white60",new F(2583691263)),n(e,"white54",new F(2332033023)),n(e,"white38",new F(1660944383)),n(e,"white30",new F(1308622847)),n(e,"white24",new F(1040187391)),n(e,"white12",new F(536870911)),n(e,"white10",new F(452984831)),n(e,"red",new x(4294198070,{50:new F(4294962158),100:new F(4294954450),200:new F(4293892762),300:new F(4293227379),400:new F(4293874512),500:new F(4294198070),600:new F(4293212469),700:new F(4292030255),800:new F(4291176488),900:new F(4290190364)})),n(e,"redAccent",new c(4294922834,{100:new F(4294937216),200:new F(4294922834),400:new F(4294907716),700:new F(4292149248)})),n(e,"pink",new x(4293467747,{50:new F(4294763756),100:new F(4294491088),200:new F(4294217649),300:new F(4293943954),400:new F(4293673082),500:new F(4293467747),600:new F(4292352864),700:new F(4290910299),800:new F(4289533015),900:new F(4287106639)})),n(e,"pinkAccent",new c(4294918273,{100:new F(4294934699),200:new F(4294918273),400:new F(4294246487),700:new F(4291105122)})),n(e,"purple",new x(4288423856,{50:new F(4294174197),100:new F(4292984551),200:new F(4291728344),300:new F(4290406600),400:new F(4289415100),500:new F(4288423856),600:new F(4287505578),700:new F(4286259106),800:new F(4285143962),900:new F(4283045004)})),n(e,"purpleAccent",new c(4292886779,{100:new F(4293558524),200:new F(4292886779),400:new F(4292149497),700:new F(4289331455)})),n(e,"deepPurple",new x(4284955319,{50:new F(4293781494),100:new F(4291937513),200:new F(4289961435),300:new F(4287985101),400:new F(4286470082),500:new F(4284955319),600:new F(4284364209),700:new F(4283510184),800:new F(4282722208),900:new F(4281408402)})),n(e,"deepPurpleAccent",new c(4286336511,{100:new F(4289956095),200:new F(4286336511),400:new F(4284817407),700:new F(4284612842)})),n(e,"indigo",new x(4282339765,{50:new F(4293454582),100:new F(4291152617),200:new F(4288653530),300:new F(4286154443),400:new F(4284246976),500:new F(4282339765),600:new F(4281944491),700:new F(4281352095),800:new F(4280825235),900:new F(4279903102)})),n(e,"indigoAccent",new c(4283657726,{100:new F(4287405823),200:new F(4283657726),400:new F(4282211070),700:new F(4281356286)})),n(e,"blue",new x(4280391411,{50:new F(4293128957),100:new F(4290502395),200:new F(4287679225),300:new F(4284790262),400:new F(4282557941),500:new F(4280391411),600:new F(4280191205),700:new F(4279858898),800:new F(4279592384),900:new F(4279060385)})),n(e,"blueAccent",new c(4282682111,{100:new F(4286755327),200:new F(4282682111),400:new F(4280908287),700:new F(4280902399)})),n(e,"lightBlue",new x(4278430196,{50:new F(4292998654),100:new F(4289979900),200:new F(4286698746),300:new F(4283417591),400:new F(4280923894),500:new F(4278430196),600:new F(4278426597),700:new F(4278356177),800:new F(4278351805),900:new F(4278278043)})),n(e,"lightBlueAccent",new c(4282434815,{100:new F(4286634239),200:new F(4282434815),400:new F(4278235391),700:new F(4278227434)})),n(e,"cyan",new x(4278238420,{50:new F(4292933626),100:new F(4289915890),200:new F(4286635754),300:new F(4283289825),400:new F(4280731354),500:new F(4278238420),600:new F(4278234305),700:new F(4278228903),800:new F(4278223759),900:new F(4278214756)})),n(e,"cyanAccent",new c(4279828479,{100:new F(4286906367),200:new F(4279828479),400:new F(4278248959),700:new F(4278237396)})),n(e,"teal",new x(4278228616,{50:new F(4292932337),100:new F(4289912795),200:new F(4286630852),300:new F(4283283116),400:new F(4280723098),500:new F(4278228616),600:new F(4278225275),700:new F(4278221163),800:new F(4278217052),900:new F(4278209856)})),n(e,"tealAccent",new c(4284809178,{100:new F(4289200107),200:new F(4284809178),400:new F(4280150454),700:new F(4278239141)})),n(e,"green",new x(4283215696,{50:new F(4293457385),100:new F(4291356361),200:new F(4289058471),300:new F(4286695300),400:new F(4284922730),500:new F(4283215696),600:new F(4282622023),700:new F(4281896508),800:new F(4281236786),900:new F(4279983648)})),n(e,"greenAccent",new c(4285132974,{100:new F(4290377418),200:new F(4285132974),400:new F(4278249078),700:new F(4278241363)})),n(e,"lightGreen",new x(4287349578,{50:new F(4294047977),100:new F(4292668872),200:new F(4291158437),300:new F(4289648001),400:new F(4288466021),500:new F(4287349578),600:new F(4286362434),700:new F(4285046584),800:new F(4283796271),900:new F(4281559326)})),n(e,"lightGreenAccent",new c(4289920857,{100:new F(4291624848),200:new F(4289920857),400:new F(4285988611),700:new F(4284800279)})),n(e,"lime",new x(4291681337,{50:new F(4294573031),100:new F(4293981379),200:new F(4293324444),300:new F(4292667253),400:new F(4292141399),500:new F(4291681337),600:new F(4290824755),700:new F(4289705003),800:new F(4288584996),900:new F(4286740247)})),n(e,"limeAccent",new c(4293852993,{100:new F(4294246273),200:new F(4293852993),400:new F(4291231488),700:new F(4289653248)})),n(e,"yellow",new x(4294961979,{50:new F(4294966759),100:new F(4294965700),200:new F(4294964637),300:new F(4294963574),400:new F(4294962776),500:new F(4294961979),600:new F(4294826037),700:new F(4294688813),800:new F(4294551589),900:new F(4294278935)})),n(e,"yellowAccent",new c(4294967040,{100:new F(4294967181),200:new F(4294967040),400:new F(4294961664),700:new F(4294956544)})),n(e,"amber",new x(4294951175,{50:new F(4294965473),100:new F(4294962355),200:new F(4294959234),300:new F(4294956367),400:new F(4294953512),500:new F(4294951175),600:new F(4294947584),700:new F(4294942720),800:new F(4294938368),900:new F(4294930176)})),n(e,"amberAccent",new c(4294956864,{100:new F(4294960511),200:new F(4294956864),400:new F(4294951936),700:new F(4294945536)})),n(e,"orange",new x(4294940672,{50:new F(4294964192),100:new F(4294959282),200:new F(4294954112),300:new F(4294948685),400:new F(4294944550),500:new F(4294940672),600:new F(4294675456),700:new F(4294278144),800:new F(4293880832),900:new F(4293284096)})),n(e,"orangeAccent",new c(4294945600,{100:new F(4294955392),200:new F(4294945600),400:new F(4294938880),700:new F(4294929664)})),n(e,"deepOrange",new x(4294924066,{50:new F(4294699495),100:new F(4294954172),200:new F(4294945681),300:new F(4294937189),400:new F(4294930499),500:new F(4294924066),600:new F(4294201630),700:new F(4293282329),800:new F(4292363029),900:new F(4290721292)})),n(e,"deepOrangeAccent",new c(4294929984,{100:new F(4294942336),200:new F(4294929984),400:new F(4294917376),700:new F(4292684800)})),n(e,"brown",new x(4286141768,{50:new F(4293913577),100:new F(4292332744),200:new F(4290554532),300:new F(4288776319),400:new F(4287458915),500:new F(4286141768),600:new F(4285353025),700:new F(4284301367),800:new F(4283315246),900:new F(4282263331)})),n(e,"grey",new x(4288585374,{50:new F(4294638330),100:new F(4294309365),200:new F(4293848814),300:new F(4292927712),350:new F(4292269782),400:new F(4290624957),500:new F(4288585374),600:new F(4285887861),700:new F(4284572001),800:new F(4282532418),850:new F(4281348144),900:new F(4280361249)})),n(e,"blueGrey",new x(4284513675,{50:new F(4293718001),100:new F(4291811548),200:new F(4289773253),300:new F(4287669422),400:new F(4286091420),500:new F(4284513675),600:new F(4283723386),700:new F(4282735204),800:new F(4281812815),900:new F(4280693304)}));let h=e;export{F as Color,r as ColorSwatch,h as Colors,c as MaterialAccentColor,x as MaterialColor};
-//# sourceMappingURL=color.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/material/color.js.map b/packages/flutterjs_engine/package/material/dist/material/color.js.map
deleted file mode 100644
index dd5d716c..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/color.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/material/color.js"],
-  "sourcesContent": ["// ============================================================================\r\n// COLOR CLASS\r\n// ============================================================================\r\n\r\nclass Color {\r\n  constructor(value) {\r\n    // Parse hex value (0xAARRGGBB format)\r\n    this.value = typeof value === 'string' ? parseInt(value.replace('#', ''), 16) : value;\r\n  }\r\n\r\n  /**\r\n   * Create color from RGB\r\n   */\r\n  static fromARGB(alpha, red, green, blue) {\r\n    const value = (alpha << 24) | (red << 16) | (green << 8) | blue;\r\n    return new Color(value);\r\n  }\r\n\r\n  /**\r\n   * Create color from RGB (alpha = 255)\r\n   */\r\n  static fromRGBO(red, green, blue, opacity) {\r\n    const alpha = Math.round(opacity * 255);\r\n    return Color.fromARGB(alpha, red, green, blue);\r\n  }\r\n\r\n  /**\r\n   * Get alpha channel (0-255)\r\n   */\r\n  get alpha() {\r\n    return (this.value >> 24) & 0xFF;\r\n  }\r\n\r\n  /**\r\n   * Get red channel (0-255)\r\n   */\r\n  get red() {\r\n    return (this.value >> 16) & 0xFF;\r\n  }\r\n\r\n  /**\r\n   * Get green channel (0-255)\r\n   */\r\n  get green() {\r\n    return (this.value >> 8) & 0xFF;\r\n  }\r\n\r\n  /**\r\n   * Get blue channel (0-255)\r\n   */\r\n  get blue() {\r\n    return this.value & 0xFF;\r\n  }\r\n\r\n  /**\r\n   * Get opacity (0.0-1.0)\r\n   */\r\n  get opacity() {\r\n    return this.alpha / 255;\r\n  }\r\n\r\n  /**\r\n   * Convert to CSS hex string\r\n   */\r\n  toCSSString() {\r\n    const hex = this.value.toString(16).padStart(8, '0');\r\n    return `#${hex.slice(2)}`; // Skip alpha for CSS\r\n  }\r\n\r\n  /**\r\n   * Convert to CSS rgba string\r\n   */\r\n  toCSS() {\r\n    return `rgba(${this.red}, ${this.green}, ${this.blue}, ${this.opacity})`;\r\n  }\r\n\r\n  /**\r\n   * Create a copy with modified alpha\r\n   */\r\n  withAlpha(alpha) {\r\n    return Color.fromARGB(alpha, this.red, this.green, this.blue);\r\n  }\r\n\r\n  /**\r\n   * Create a copy with modified opacity (0.0-1.0)\r\n   */\r\n  withOpacity(opacity) {\r\n    const alpha = Math.round(opacity * 255);\r\n    return Color.fromARGB(alpha, this.red, this.green, this.blue);\r\n  }\r\n\r\n  /**\r\n   * Blend two colors\r\n   */\r\n  static lerp(a, b, t) {\r\n    if (a === null) return b?.withOpacity(b.opacity * t);\r\n    if (b === null) return a?.withOpacity(a.opacity * (1 - t));\r\n\r\n    const alpha = Math.round(a.alpha * (1 - t) + b.alpha * t);\r\n    const red = Math.round(a.red * (1 - t) + b.red * t);\r\n    const green = Math.round(a.green * (1 - t) + b.green * t);\r\n    const blue = Math.round(a.blue * (1 - t) + b.blue * t);\r\n\r\n    return Color.fromARGB(alpha, red, green, blue);\r\n  }\r\n\r\n  /**\r\n   * Compare colors\r\n   */\r\n  equals(other) {\r\n    return this.value === other.value;\r\n  }\r\n\r\n  toString() {\r\n    return `Color(0x${this.value.toString(16).padStart(8, '0').toUpperCase()})`;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// COLOR SWATCH\r\n// ============================================================================\r\n\r\nclass ColorSwatch extends Color {\r\n  constructor(primary, swatch) {\r\n    super(primary);\r\n    this._swatch = swatch || {};\r\n  }\r\n\r\n  /**\r\n   * Get color by shade number\r\n   */\r\n  get(shade) {\r\n    return this._swatch[shade];\r\n  }\r\n\r\n  /**\r\n   * Direct access via bracket notation\r\n   */\r\n  [Symbol.for('get')](shade) {\r\n    return this._swatch[shade];\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// MATERIAL COLOR CLASS\r\n// ============================================================================\r\n\r\nclass MaterialColor extends ColorSwatch {\r\n  constructor(primary, swatch) {\r\n    super(primary, swatch);\r\n  }\r\n\r\n  get shade50() { return this._swatch[50]; }\r\n  get shade100() { return this._swatch[100]; }\r\n  get shade200() { return this._swatch[200]; }\r\n  get shade300() { return this._swatch[300]; }\r\n  get shade400() { return this._swatch[400]; }\r\n  get shade500() { return this._swatch[500]; }\r\n  get shade600() { return this._swatch[600]; }\r\n  get shade700() { return this._swatch[700]; }\r\n  get shade800() { return this._swatch[800]; }\r\n  get shade900() { return this._swatch[900]; }\r\n\r\n  /**\r\n   * Get shade by index\r\n   */\r\n  getShade(index) {\r\n    return this._swatch[index];\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// MATERIAL ACCENT COLOR CLASS\r\n// ============================================================================\r\n\r\nclass MaterialAccentColor extends ColorSwatch {\r\n  constructor(primary, swatch) {\r\n    super(primary, swatch);\r\n  }\r\n\r\n  get shade100() { return this._swatch[100]; }\r\n  get shade200() { return this._swatch[200]; }\r\n  get shade400() { return this._swatch[400]; }\r\n  get shade700() { return this._swatch[700]; }\r\n\r\n  /**\r\n   * Get shade by index\r\n   */\r\n  getShade(index) {\r\n    return this._swatch[index];\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// MATERIAL COLORS\r\n// ============================================================================\r\n\r\nclass Colors {\r\n  // Transparency\r\n  static transparent = new Color(0x00000000);\r\n\r\n  // Black and White\r\n  static black = new Color(0xFF000000);\r\n  static black87 = new Color(0xDD000000);\r\n  static black54 = new Color(0x8A000000);\r\n  static black45 = new Color(0x73000000);\r\n  static black38 = new Color(0x61000000);\r\n  static black26 = new Color(0x42000000);\r\n  static black12 = new Color(0x1F000000);\r\n\r\n  static white = new Color(0xFFFFFFFF);\r\n  static white70 = new Color(0xB3FFFFFF);\r\n  static white60 = new Color(0x99FFFFFF);\r\n  static white54 = new Color(0x8AFFFFFF);\r\n  static white38 = new Color(0x62FFFFFF);\r\n  static white30 = new Color(0x4DFFFFFF);\r\n  static white24 = new Color(0x3DFFFFFF);\r\n  static white12 = new Color(0x1FFFFFFF);\r\n  static white10 = new Color(0x1AFFFFFF);\r\n\r\n  // RED\r\n  static red = new MaterialColor(0xFFF44336, {\r\n    50: new Color(0xFFFFEBEE),\r\n    100: new Color(0xFFFFCDD2),\r\n    200: new Color(0xFFEF9A9A),\r\n    300: new Color(0xFFE57373),\r\n    400: new Color(0xFFEF5350),\r\n    500: new Color(0xFFF44336),\r\n    600: new Color(0xFFE53935),\r\n    700: new Color(0xFFD32F2F),\r\n    800: new Color(0xFFC62828),\r\n    900: new Color(0xFFB71C1C)\r\n  });\r\n\r\n  static redAccent = new MaterialAccentColor(0xFFFF5252, {\r\n    100: new Color(0xFFFF8A80),\r\n    200: new Color(0xFFFF5252),\r\n    400: new Color(0xFFFF1744),\r\n    700: new Color(0xFFD50000)\r\n  });\r\n\r\n  // PINK\r\n  static pink = new MaterialColor(0xFFE91E63, {\r\n    50: new Color(0xFFFCE4EC),\r\n    100: new Color(0xFFF8BBD0),\r\n    200: new Color(0xFFF48FB1),\r\n    300: new Color(0xFFF06292),\r\n    400: new Color(0xFFEC407A),\r\n    500: new Color(0xFFE91E63),\r\n    600: new Color(0xFFD81B60),\r\n    700: new Color(0xFFC2185B),\r\n    800: new Color(0xFFAD1457),\r\n    900: new Color(0xFF880E4F)\r\n  });\r\n\r\n  static pinkAccent = new MaterialAccentColor(0xFFFF4081, {\r\n    100: new Color(0xFFFF80AB),\r\n    200: new Color(0xFFFF4081),\r\n    400: new Color(0xFFF50057),\r\n    700: new Color(0xFFC51162)\r\n  });\r\n\r\n  // PURPLE\r\n  static purple = new MaterialColor(0xFF9C27B0, {\r\n    50: new Color(0xFFF3E5F5),\r\n    100: new Color(0xFFE1BEE7),\r\n    200: new Color(0xFFCE93D8),\r\n    300: new Color(0xFFBA68C8),\r\n    400: new Color(0xFFAB47BC),\r\n    500: new Color(0xFF9C27B0),\r\n    600: new Color(0xFF8E24AA),\r\n    700: new Color(0xFF7B1FA2),\r\n    800: new Color(0xFF6A1B9A),\r\n    900: new Color(0xFF4A148C)\r\n  });\r\n\r\n  static purpleAccent = new MaterialAccentColor(0xFFE040FB, {\r\n    100: new Color(0xFFEA80FC),\r\n    200: new Color(0xFFE040FB),\r\n    400: new Color(0xFFD500F9),\r\n    700: new Color(0xFFAA00FF)\r\n  });\r\n\r\n  // DEEP PURPLE\r\n  static deepPurple = new MaterialColor(0xFF673AB7, {\r\n    50: new Color(0xFFEDE7F6),\r\n    100: new Color(0xFFD1C4E9),\r\n    200: new Color(0xFFB39DDB),\r\n    300: new Color(0xFF9575CD),\r\n    400: new Color(0xFF7E57C2),\r\n    500: new Color(0xFF673AB7),\r\n    600: new Color(0xFF5E35B1),\r\n    700: new Color(0xFF512DA8),\r\n    800: new Color(0xFF4527A0),\r\n    900: new Color(0xFF311B92)\r\n  });\r\n\r\n  static deepPurpleAccent = new MaterialAccentColor(0xFF7C4DFF, {\r\n    100: new Color(0xFFB388FF),\r\n    200: new Color(0xFF7C4DFF),\r\n    400: new Color(0xFF651FFF),\r\n    700: new Color(0xFF6200EA)\r\n  });\r\n\r\n  // INDIGO\r\n  static indigo = new MaterialColor(0xFF3F51B5, {\r\n    50: new Color(0xFFE8EAF6),\r\n    100: new Color(0xFFC5CAE9),\r\n    200: new Color(0xFF9FA8DA),\r\n    300: new Color(0xFF7986CB),\r\n    400: new Color(0xFF5C6BC0),\r\n    500: new Color(0xFF3F51B5),\r\n    600: new Color(0xFF3949AB),\r\n    700: new Color(0xFF303F9F),\r\n    800: new Color(0xFF283593),\r\n    900: new Color(0xFF1A237E)\r\n  });\r\n\r\n  static indigoAccent = new MaterialAccentColor(0xFF536DFE, {\r\n    100: new Color(0xFF8C9EFF),\r\n    200: new Color(0xFF536DFE),\r\n    400: new Color(0xFF3D5AFE),\r\n    700: new Color(0xFF304FFE)\r\n  });\r\n\r\n  // BLUE\r\n  static blue = new MaterialColor(0xFF2196F3, {\r\n    50: new Color(0xFFE3F2FD),\r\n    100: new Color(0xFFBBDEFB),\r\n    200: new Color(0xFF90CAF9),\r\n    300: new Color(0xFF64B5F6),\r\n    400: new Color(0xFF42A5F5),\r\n    500: new Color(0xFF2196F3),\r\n    600: new Color(0xFF1E88E5),\r\n    700: new Color(0xFF1976D2),\r\n    800: new Color(0xFF1565C0),\r\n    900: new Color(0xFF0D47A1)\r\n  });\r\n\r\n  static blueAccent = new MaterialAccentColor(0xFF448AFF, {\r\n    100: new Color(0xFF82B1FF),\r\n    200: new Color(0xFF448AFF),\r\n    400: new Color(0xFF2979FF),\r\n    700: new Color(0xFF2962FF)\r\n  });\r\n\r\n  // LIGHT BLUE\r\n  static lightBlue = new MaterialColor(0xFF03A9F4, {\r\n    50: new Color(0xFFE1F5FE),\r\n    100: new Color(0xFFB3E5FC),\r\n    200: new Color(0xFF81D4FA),\r\n    300: new Color(0xFF4FC3F7),\r\n    400: new Color(0xFF29B6F6),\r\n    500: new Color(0xFF03A9F4),\r\n    600: new Color(0xFF039BE5),\r\n    700: new Color(0xFF0288D1),\r\n    800: new Color(0xFF0277BD),\r\n    900: new Color(0xFF01579B)\r\n  });\r\n\r\n  static lightBlueAccent = new MaterialAccentColor(0xFF40C4FF, {\r\n    100: new Color(0xFF80D8FF),\r\n    200: new Color(0xFF40C4FF),\r\n    400: new Color(0xFF00B0FF),\r\n    700: new Color(0xFF0091EA)\r\n  });\r\n\r\n  // CYAN\r\n  static cyan = new MaterialColor(0xFF00BCD4, {\r\n    50: new Color(0xFFE0F7FA),\r\n    100: new Color(0xFFB2EBF2),\r\n    200: new Color(0xFF80DEEA),\r\n    300: new Color(0xFF4DD0E1),\r\n    400: new Color(0xFF26C6DA),\r\n    500: new Color(0xFF00BCD4),\r\n    600: new Color(0xFF00ACC1),\r\n    700: new Color(0xFF0097A7),\r\n    800: new Color(0xFF00838F),\r\n    900: new Color(0xFF006064)\r\n  });\r\n\r\n  static cyanAccent = new MaterialAccentColor(0xFF18FFFF, {\r\n    100: new Color(0xFF84FFFF),\r\n    200: new Color(0xFF18FFFF),\r\n    400: new Color(0xFF00E5FF),\r\n    700: new Color(0xFF00B8D4)\r\n  });\r\n\r\n  // TEAL\r\n  static teal = new MaterialColor(0xFF009688, {\r\n    50: new Color(0xFFE0F2F1),\r\n    100: new Color(0xFFB2DFDB),\r\n    200: new Color(0xFF80CBC4),\r\n    300: new Color(0xFF4DB6AC),\r\n    400: new Color(0xFF26A69A),\r\n    500: new Color(0xFF009688),\r\n    600: new Color(0xFF00897B),\r\n    700: new Color(0xFF00796B),\r\n    800: new Color(0xFF00695C),\r\n    900: new Color(0xFF004D40)\r\n  });\r\n\r\n  static tealAccent = new MaterialAccentColor(0xFF64FFDA, {\r\n    100: new Color(0xFFA7FFEB),\r\n    200: new Color(0xFF64FFDA),\r\n    400: new Color(0xFF1DE9B6),\r\n    700: new Color(0xFF00BFA5)\r\n  });\r\n\r\n  // GREEN\r\n  static green = new MaterialColor(0xFF4CAF50, {\r\n    50: new Color(0xFFE8F5E9),\r\n    100: new Color(0xFFC8E6C9),\r\n    200: new Color(0xFFA5D6A7),\r\n    300: new Color(0xFF81C784),\r\n    400: new Color(0xFF66BB6A),\r\n    500: new Color(0xFF4CAF50),\r\n    600: new Color(0xFF43A047),\r\n    700: new Color(0xFF388E3C),\r\n    800: new Color(0xFF2E7D32),\r\n    900: new Color(0xFF1B5E20)\r\n  });\r\n\r\n  static greenAccent = new MaterialAccentColor(0xFF69F0AE, {\r\n    100: new Color(0xFFB9F6CA),\r\n    200: new Color(0xFF69F0AE),\r\n    400: new Color(0xFF00E676),\r\n    700: new Color(0xFF00C853)\r\n  });\r\n\r\n  // LIGHT GREEN\r\n  static lightGreen = new MaterialColor(0xFF8BC34A, {\r\n    50: new Color(0xFFF1F8E9),\r\n    100: new Color(0xFFDCEDC8),\r\n    200: new Color(0xFFC5E1A5),\r\n    300: new Color(0xFFAED581),\r\n    400: new Color(0xFF9CCC65),\r\n    500: new Color(0xFF8BC34A),\r\n    600: new Color(0xFF7CB342),\r\n    700: new Color(0xFF689F38),\r\n    800: new Color(0xFF558B2F),\r\n    900: new Color(0xFF33691E)\r\n  });\r\n\r\n  static lightGreenAccent = new MaterialAccentColor(0xFFB2FF59, {\r\n    100: new Color(0xFFCCFF90),\r\n    200: new Color(0xFFB2FF59),\r\n    400: new Color(0xFF76FF03),\r\n    700: new Color(0xFF64DD17)\r\n  });\r\n\r\n  // LIME\r\n  static lime = new MaterialColor(0xFFCDDC39, {\r\n    50: new Color(0xFFF9FBE7),\r\n    100: new Color(0xFFF0F4C3),\r\n    200: new Color(0xFFE6EE9C),\r\n    300: new Color(0xFFDCE775),\r\n    400: new Color(0xFFD4E157),\r\n    500: new Color(0xFFCDDC39),\r\n    600: new Color(0xFFC0CA33),\r\n    700: new Color(0xFFAFB42B),\r\n    800: new Color(0xFF9E9D24),\r\n    900: new Color(0xFF827717)\r\n  });\r\n\r\n  static limeAccent = new MaterialAccentColor(0xFFEEFF41, {\r\n    100: new Color(0xFFF4FF81),\r\n    200: new Color(0xFFEEFF41),\r\n    400: new Color(0xFFC6FF00),\r\n    700: new Color(0xFFAEEA00)\r\n  });\r\n\r\n  // YELLOW\r\n  static yellow = new MaterialColor(0xFFFFEB3B, {\r\n    50: new Color(0xFFFFFDE7),\r\n    100: new Color(0xFFFFF9C4),\r\n    200: new Color(0xFFFFF59D),\r\n    300: new Color(0xFFFFF176),\r\n    400: new Color(0xFFFFEE58),\r\n    500: new Color(0xFFFFEB3B),\r\n    600: new Color(0xFFFDD835),\r\n    700: new Color(0xFFFBC02D),\r\n    800: new Color(0xFFF9A825),\r\n    900: new Color(0xFFF57F17)\r\n  });\r\n\r\n  static yellowAccent = new MaterialAccentColor(0xFFFFFF00, {\r\n    100: new Color(0xFFFFFF8D),\r\n    200: new Color(0xFFFFFF00),\r\n    400: new Color(0xFFFFEA00),\r\n    700: new Color(0xFFFFD600)\r\n  });\r\n\r\n  // AMBER\r\n  static amber = new MaterialColor(0xFFFFC107, {\r\n    50: new Color(0xFFFFF8E1),\r\n    100: new Color(0xFFFFECB3),\r\n    200: new Color(0xFFFFE082),\r\n    300: new Color(0xFFFFD54F),\r\n    400: new Color(0xFFFFCA28),\r\n    500: new Color(0xFFFFC107),\r\n    600: new Color(0xFFFFB300),\r\n    700: new Color(0xFFFFA000),\r\n    800: new Color(0xFFFF8F00),\r\n    900: new Color(0xFFFF6F00)\r\n  });\r\n\r\n  static amberAccent = new MaterialAccentColor(0xFFFFD740, {\r\n    100: new Color(0xFFFFE57F),\r\n    200: new Color(0xFFFFD740),\r\n    400: new Color(0xFFFFC400),\r\n    700: new Color(0xFFFFAB00)\r\n  });\r\n\r\n  // ORANGE\r\n  static orange = new MaterialColor(0xFFFF9800, {\r\n    50: new Color(0xFFFFF3E0),\r\n    100: new Color(0xFFFFE0B2),\r\n    200: new Color(0xFFFFCC80),\r\n    300: new Color(0xFFFFB74D),\r\n    400: new Color(0xFFFFA726),\r\n    500: new Color(0xFFFF9800),\r\n    600: new Color(0xFFFB8C00),\r\n    700: new Color(0xFFF57C00),\r\n    800: new Color(0xFFEF6C00),\r\n    900: new Color(0xFFE65100)\r\n  });\r\n\r\n  static orangeAccent = new MaterialAccentColor(0xFFFFAB40, {\r\n    100: new Color(0xFFFFD180),\r\n    200: new Color(0xFFFFAB40),\r\n    400: new Color(0xFFFF9100),\r\n    700: new Color(0xFFFF6D00)\r\n  });\r\n\r\n  // DEEP ORANGE\r\n  static deepOrange = new MaterialColor(0xFFFF5722, {\r\n    50: new Color(0xFFFBE9E7),\r\n    100: new Color(0xFFFFCCBC),\r\n    200: new Color(0xFFFFAB91),\r\n    300: new Color(0xFFFF8A65),\r\n    400: new Color(0xFFFF7043),\r\n    500: new Color(0xFFFF5722),\r\n    600: new Color(0xFFF4511E),\r\n    700: new Color(0xFFE64A19),\r\n    800: new Color(0xFFD84315),\r\n    900: new Color(0xFFBF360C)\r\n  });\r\n\r\n  static deepOrangeAccent = new MaterialAccentColor(0xFFFF6E40, {\r\n    100: new Color(0xFFFF9E80),\r\n    200: new Color(0xFFFF6E40),\r\n    400: new Color(0xFFFF3D00),\r\n    700: new Color(0xFFDD2C00)\r\n  });\r\n\r\n  // BROWN\r\n  static brown = new MaterialColor(0xFF795548, {\r\n    50: new Color(0xFFEFEBE9),\r\n    100: new Color(0xFFD7CCC8),\r\n    200: new Color(0xFFBCAAA4),\r\n    300: new Color(0xFFA1887F),\r\n    400: new Color(0xFF8D6E63),\r\n    500: new Color(0xFF795548),\r\n    600: new Color(0xFF6D4C41),\r\n    700: new Color(0xFF5D4037),\r\n    800: new Color(0xFF4E342E),\r\n    900: new Color(0xFF3E2723)\r\n  });\r\n\r\n  // GREY\r\n  static grey = new MaterialColor(0xFF9E9E9E, {\r\n    50: new Color(0xFFFAFAFA),\r\n    100: new Color(0xFFF5F5F5),\r\n    200: new Color(0xFFEEEEEE),\r\n    300: new Color(0xFFE0E0E0),\r\n    350: new Color(0xFFD6D6D6),\r\n    400: new Color(0xFFBDBDBD),\r\n    500: new Color(0xFF9E9E9E),\r\n    600: new Color(0xFF757575),\r\n    700: new Color(0xFF616161),\r\n    800: new Color(0xFF424242),\r\n    850: new Color(0xFF303030),\r\n    900: new Color(0xFF212121)\r\n  });\r\n\r\n  // BLUE GREY\r\n  static blueGrey = new MaterialColor(0xFF607D8B, {\r\n    50: new Color(0xFFECEFF1),\r\n    100: new Color(0xFFCFD8DC),\r\n    200: new Color(0xFFB0BEC5),\r\n    300: new Color(0xFF90A4AE),\r\n    400: new Color(0xFF78909C),\r\n    500: new Color(0xFF607D8B),\r\n    600: new Color(0xFF546E7A),\r\n    700: new Color(0xFF455A64),\r\n    800: new Color(0xFF37474F),\r\n    900: new Color(0xFF263238)\r\n  });\r\n\r\n  /**\r\n   * All primary material colors\r\n   */\r\n  static get primaries() {\r\n    return [\r\n      Colors.red,\r\n      Colors.pink,\r\n      Colors.purple,\r\n      Colors.deepPurple,\r\n      Colors.indigo,\r\n      Colors.blue,\r\n      Colors.lightBlue,\r\n      Colors.cyan,\r\n      Colors.teal,\r\n      Colors.green,\r\n      Colors.lightGreen,\r\n      Colors.lime,\r\n      Colors.yellow,\r\n      Colors.amber,\r\n      Colors.orange,\r\n      Colors.deepOrange,\r\n      Colors.brown,\r\n      Colors.blueGrey\r\n    ];\r\n  }\r\n\r\n  /**\r\n   * All accent colors\r\n   */\r\n  static get accents() {\r\n    return [\r\n      Colors.redAccent,\r\n      Colors.pinkAccent,\r\n      Colors.purpleAccent,\r\n      Colors.deepPurpleAccent,\r\n      Colors.indigoAccent,\r\n      Colors.blueAccent,\r\n      Colors.lightBlueAccent,\r\n      Colors.cyanAccent,\r\n      Colors.tealAccent,\r\n      Colors.greenAccent,\r\n      Colors.lightGreenAccent,\r\n      Colors.limeAccent,\r\n      Colors.yellowAccent,\r\n      Colors.amberAccent,\r\n      Colors.orangeAccent,\r\n      Colors.deepOrangeAccent\r\n    ];\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport {\r\n  Color,\r\n  ColorSwatch,\r\n  MaterialColor,\r\n  MaterialAccentColor,\r\n  Colors\r\n};"],
-  "mappings": "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",
-  "names": ["Color", "value", "alpha", "red", "green", "blue", "opacity", "a", "b", "t", "other", "ColorSwatch", "primary", "swatch", "shade", "MaterialColor", "index", "MaterialAccentColor", "_Colors", "__publicField", "Colors"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/material/color_scheme.js b/packages/flutterjs_engine/package/material/dist/material/color_scheme.js
deleted file mode 100644
index 41ccb648..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/color_scheme.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import"./color.js";class e{constructor({brightness:i,primary:a,onPrimary:o,primaryContainer:t,onPrimaryContainer:s,secondary:u,onSecondary:c,secondaryContainer:l,onSecondaryContainer:F,tertiary:y,onTertiary:C,tertiaryContainer:d,onTertiaryContainer:h,error:E,onError:f,errorContainer:S,onErrorContainer:m,background:D,onBackground:B,surface:g,onSurface:k,surfaceVariant:v,onSurfaceVariant:V,outline:T,outlineVariant:P,shadow:p,scrim:w,inverseSurface:A,onInverseSurface:b,inversePrimary:I,surfaceTint:x}){this.brightness=i,this.primary=a,this.onPrimary=o,this.primaryContainer=t,this.onPrimaryContainer=s,this.secondary=u,this.onSecondary=c,this.secondaryContainer=l,this.onSecondaryContainer=F,this.tertiary=y,this.onTertiary=C,this.tertiaryContainer=d,this.onTertiaryContainer=h,this.error=E,this.onError=f,this.errorContainer=S,this.onErrorContainer=m,this.background=D,this.onBackground=B,this.surface=g,this.onSurface=k,this.surfaceVariant=v,this.onSurfaceVariant=V,this.outline=T,this.outlineVariant=P,this.shadow=p,this.scrim=w,this.inverseSurface=A,this.onInverseSurface=b,this.inversePrimary=I,this.surfaceTint=x}static fromSeed({seedColor:i,brightness:a="light",primary:o=null,onPrimary:t=null,primaryContainer:s=null,onPrimaryContainer:u=null,secondary:c=null,onSecondary:l=null,secondaryContainer:F=null,onSecondaryContainer:y=null,tertiary:C=null,onTertiary:d=null,tertiaryContainer:h=null,onTertiaryContainer:E=null,error:f=null,onError:S=null,errorContainer:m=null,onErrorContainer:D=null,background:B=null,onBackground:g=null,surface:k=null,onSurface:v=null,surfaceVariant:V=null,onSurfaceVariant:T=null,outline:P=null,outlineVariant:p=null,shadow:w=null,scrim:A=null,inverseSurface:b=null,onInverseSurface:I=null,inversePrimary:x=null,surfaceTint:j=null}){const O=a==="dark",r=O?this.dark():this.light(),n=i||r.primary;return new e({brightness:a,primary:o||n,onPrimary:t||(O?"#000000":"#FFFFFF"),primaryContainer:s||n.withOpacity(.2),onPrimaryContainer:u||n,secondary:c||r.secondary,onSecondary:l||r.onSecondary,secondaryContainer:F||r.secondaryContainer,onSecondaryContainer:y||r.onSecondaryContainer,tertiary:C||r.tertiary,onTertiary:d||r.onTertiary,tertiaryContainer:h||r.tertiaryContainer,onTertiaryContainer:E||r.onTertiaryContainer,error:f||r.error,onError:S||r.onError,errorContainer:m||r.errorContainer,onErrorContainer:D||r.onErrorContainer,background:B||r.background,onBackground:g||r.onBackground,surface:k||r.surface,onSurface:v||r.onSurface,surfaceVariant:V||r.surfaceVariant,onSurfaceVariant:T||r.onSurfaceVariant,outline:P||r.outline,outlineVariant:p||r.outlineVariant,shadow:w||r.shadow,scrim:A||r.scrim,inverseSurface:b||r.inverseSurface,onInverseSurface:I||r.onInverseSurface,inversePrimary:x||(O?n:"#D0BCFF"),surfaceTint:j||n})}static light(){return new e({brightness:"light",primary:"#6750A4",onPrimary:"#FFFFFF",primaryContainer:"#EADDFF",onPrimaryContainer:"#21005D",secondary:"#625B71",onSecondary:"#FFFFFF",secondaryContainer:"#E8DEF8",onSecondaryContainer:"#1D192B",tertiary:"#7D5260",onTertiary:"#FFFFFF",tertiaryContainer:"#FFD8E4",onTertiaryContainer:"#31111D",error:"#B3261E",onError:"#FFFFFF",errorContainer:"#F9DEDC",onErrorContainer:"#410E0B",background:"#FFFBFE",onBackground:"#1C1B1F",surface:"#FFFBFE",onSurface:"#1C1B1F",surfaceVariant:"#E7E0EC",onSurfaceVariant:"#49454F",outline:"#79747E",outlineVariant:"#CAC4D0",shadow:"#000000",scrim:"#000000",inverseSurface:"#313033",onInverseSurface:"#F4EFF4",inversePrimary:"#D0BCFF",surfaceTint:"#6750A4"})}static dark(){return new e({brightness:"dark",primary:"#D0BCFF",onPrimary:"#381E72",primaryContainer:"#4F378B",onPrimaryContainer:"#EADDFF",secondary:"#CCC2DC",onSecondary:"#332D41",secondaryContainer:"#4A4458",onSecondaryContainer:"#E8DEF8",tertiary:"#EFB8C8",onTertiary:"#492532",tertiaryContainer:"#633B48",onTertiaryContainer:"#FFD8E4",error:"#F2B8B5",onError:"#601410",errorContainer:"#8C1D18",onErrorContainer:"#F9DEDC",background:"#1C1B1F",onBackground:"#E6E1E5",surface:"#1C1B1F",onSurface:"#E6E1E5",surfaceVariant:"#49454F",onSurfaceVariant:"#CAC4D0",outline:"#938F99",outlineVariant:"#49454F",shadow:"#000000",scrim:"#000000",inverseSurface:"#E6E1E5",onInverseSurface:"#313033",inversePrimary:"#6750A4",surfaceTint:"#D0BCFF"})}}export{e as ColorScheme};
-//# sourceMappingURL=color_scheme.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/material/color_scheme.js.map b/packages/flutterjs_engine/package/material/dist/material/color_scheme.js.map
deleted file mode 100644
index 4936fb0a..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/color_scheme.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/material/color_scheme.js"],
-  "sourcesContent": ["\r\nimport { Colors } from './color.js';\r\n\r\n// ============================================================================\r\n// COLOR SCHEME\r\n// ============================================================================\r\n\r\nexport class ColorScheme {\r\n    constructor({\r\n        brightness,\r\n        primary,\r\n        onPrimary,\r\n        primaryContainer,\r\n        onPrimaryContainer,\r\n        secondary,\r\n        onSecondary,\r\n        secondaryContainer,\r\n        onSecondaryContainer,\r\n        tertiary,\r\n        onTertiary,\r\n        tertiaryContainer,\r\n        onTertiaryContainer,\r\n        error,\r\n        onError,\r\n        errorContainer,\r\n        onErrorContainer,\r\n        background,\r\n        onBackground,\r\n        surface,\r\n        onSurface,\r\n        surfaceVariant,\r\n        onSurfaceVariant,\r\n        outline,\r\n        outlineVariant,\r\n        shadow,\r\n        scrim,\r\n        inverseSurface,\r\n        onInverseSurface,\r\n        inversePrimary,\r\n        surfaceTint,\r\n    }) {\r\n        this.brightness = brightness;\r\n        this.primary = primary;\r\n        this.onPrimary = onPrimary;\r\n        this.primaryContainer = primaryContainer;\r\n        this.onPrimaryContainer = onPrimaryContainer;\r\n        this.secondary = secondary;\r\n        this.onSecondary = onSecondary;\r\n        this.secondaryContainer = secondaryContainer;\r\n        this.onSecondaryContainer = onSecondaryContainer;\r\n        this.tertiary = tertiary;\r\n        this.onTertiary = onTertiary;\r\n        this.tertiaryContainer = tertiaryContainer;\r\n        this.onTertiaryContainer = onTertiaryContainer;\r\n        this.error = error;\r\n        this.onError = onError;\r\n        this.errorContainer = errorContainer;\r\n        this.onErrorContainer = onErrorContainer;\r\n        this.background = background;\r\n        this.onBackground = onBackground;\r\n        this.surface = surface;\r\n        this.onSurface = onSurface;\r\n        this.surfaceVariant = surfaceVariant;\r\n        this.onSurfaceVariant = onSurfaceVariant;\r\n        this.outline = outline;\r\n        this.outlineVariant = outlineVariant;\r\n        this.shadow = shadow;\r\n        this.scrim = scrim;\r\n        this.inverseSurface = inverseSurface;\r\n        this.onInverseSurface = onInverseSurface;\r\n        this.inversePrimary = inversePrimary;\r\n        this.surfaceTint = surfaceTint;\r\n    }\r\n\r\n    static fromSeed({\r\n        seedColor,\r\n        brightness = 'light',\r\n        primary = null,\r\n        onPrimary = null,\r\n        primaryContainer = null,\r\n        onPrimaryContainer = null,\r\n        secondary = null,\r\n        onSecondary = null,\r\n        secondaryContainer = null,\r\n        onSecondaryContainer = null,\r\n        tertiary = null,\r\n        onTertiary = null,\r\n        tertiaryContainer = null,\r\n        onTertiaryContainer = null,\r\n        error = null,\r\n        onError = null,\r\n        errorContainer = null,\r\n        onErrorContainer = null,\r\n        background = null,\r\n        onBackground = null,\r\n        surface = null,\r\n        onSurface = null,\r\n        surfaceVariant = null,\r\n        onSurfaceVariant = null,\r\n        outline = null,\r\n        outlineVariant = null,\r\n        shadow = null,\r\n        scrim = null,\r\n        inverseSurface = null,\r\n        onInverseSurface = null,\r\n        inversePrimary = null,\r\n        surfaceTint = null,\r\n    }) {\r\n        // simplified implementation of material 3 color generation\r\n        const isDark = brightness === 'dark';\r\n\r\n        // Core palette generation (mocked for now)\r\n        const defaults = isDark ? this.dark() : this.light();\r\n\r\n        // If seed color is provided, we should ideally generate palette\r\n        // For now we'll just use the seed as primary and derive rough variants\r\n\r\n        const derivedPrimary = seedColor || defaults.primary;\r\n\r\n        return new ColorScheme({\r\n            brightness,\r\n            primary: primary || derivedPrimary,\r\n            onPrimary: onPrimary || (isDark ? '#000000' : '#FFFFFF'),\r\n            primaryContainer: primaryContainer || derivedPrimary.withOpacity(0.2),\r\n            onPrimaryContainer: onPrimaryContainer || derivedPrimary,\r\n\r\n            secondary: secondary || defaults.secondary,\r\n            onSecondary: onSecondary || defaults.onSecondary,\r\n            secondaryContainer: secondaryContainer || defaults.secondaryContainer,\r\n            onSecondaryContainer: onSecondaryContainer || defaults.onSecondaryContainer,\r\n\r\n            tertiary: tertiary || defaults.tertiary,\r\n            onTertiary: onTertiary || defaults.onTertiary,\r\n            tertiaryContainer: tertiaryContainer || defaults.tertiaryContainer,\r\n            onTertiaryContainer: onTertiaryContainer || defaults.onTertiaryContainer,\r\n\r\n            error: error || defaults.error,\r\n            onError: onError || defaults.onError,\r\n            errorContainer: errorContainer || defaults.errorContainer,\r\n            onErrorContainer: onErrorContainer || defaults.onErrorContainer,\r\n\r\n            background: background || defaults.background,\r\n            onBackground: onBackground || defaults.onBackground,\r\n\r\n            surface: surface || defaults.surface,\r\n            onSurface: onSurface || defaults.onSurface,\r\n            surfaceVariant: surfaceVariant || defaults.surfaceVariant,\r\n            onSurfaceVariant: onSurfaceVariant || defaults.onSurfaceVariant,\r\n\r\n            outline: outline || defaults.outline,\r\n            outlineVariant: outlineVariant || defaults.outlineVariant,\r\n\r\n            shadow: shadow || defaults.shadow,\r\n            scrim: scrim || defaults.scrim,\r\n\r\n            inverseSurface: inverseSurface || defaults.inverseSurface,\r\n            onInverseSurface: onInverseSurface || defaults.onInverseSurface,\r\n            inversePrimary: inversePrimary || (isDark ? derivedPrimary : '#D0BCFF'), // Mock inverse\r\n            surfaceTint: surfaceTint || derivedPrimary,\r\n        });\r\n    }\r\n\r\n    static light() {\r\n        return new ColorScheme({\r\n            brightness: 'light',\r\n            primary: '#6750A4',\r\n            onPrimary: '#FFFFFF',\r\n            primaryContainer: '#EADDFF',\r\n            onPrimaryContainer: '#21005D',\r\n            secondary: '#625B71',\r\n            onSecondary: '#FFFFFF',\r\n            secondaryContainer: '#E8DEF8',\r\n            onSecondaryContainer: '#1D192B',\r\n            tertiary: '#7D5260',\r\n            onTertiary: '#FFFFFF',\r\n            tertiaryContainer: '#FFD8E4',\r\n            onTertiaryContainer: '#31111D',\r\n            error: '#B3261E',\r\n            onError: '#FFFFFF',\r\n            errorContainer: '#F9DEDC',\r\n            onErrorContainer: '#410E0B',\r\n            background: '#FFFBFE',\r\n            onBackground: '#1C1B1F',\r\n            surface: '#FFFBFE',\r\n            onSurface: '#1C1B1F',\r\n            surfaceVariant: '#E7E0EC',\r\n            onSurfaceVariant: '#49454F',\r\n            outline: '#79747E',\r\n            outlineVariant: '#CAC4D0',\r\n            shadow: '#000000',\r\n            scrim: '#000000',\r\n            inverseSurface: '#313033',\r\n            onInverseSurface: '#F4EFF4',\r\n            inversePrimary: '#D0BCFF',\r\n            surfaceTint: '#6750A4',\r\n        });\r\n    }\r\n\r\n    static dark() {\r\n        return new ColorScheme({\r\n            brightness: 'dark',\r\n            primary: '#D0BCFF',\r\n            onPrimary: '#381E72',\r\n            primaryContainer: '#4F378B',\r\n            onPrimaryContainer: '#EADDFF',\r\n            secondary: '#CCC2DC',\r\n            onSecondary: '#332D41',\r\n            secondaryContainer: '#4A4458',\r\n            onSecondaryContainer: '#E8DEF8',\r\n            tertiary: '#EFB8C8',\r\n            onTertiary: '#492532',\r\n            tertiaryContainer: '#633B48',\r\n            onTertiaryContainer: '#FFD8E4',\r\n            error: '#F2B8B5',\r\n            onError: '#601410',\r\n            errorContainer: '#8C1D18',\r\n            onErrorContainer: '#F9DEDC',\r\n            background: '#1C1B1F',\r\n            onBackground: '#E6E1E5',\r\n            surface: '#1C1B1F',\r\n            onSurface: '#E6E1E5',\r\n            surfaceVariant: '#49454F',\r\n            onSurfaceVariant: '#CAC4D0',\r\n            outline: '#938F99',\r\n            outlineVariant: '#49454F',\r\n            shadow: '#000000',\r\n            scrim: '#000000',\r\n            inverseSurface: '#E6E1E5',\r\n            onInverseSurface: '#313033',\r\n            inversePrimary: '#6750A4',\r\n            surfaceTint: '#D0BCFF',\r\n        });\r\n    }\r\n}\r\n"],
-  "mappings": "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",
-  "names": ["ColorScheme", "brightness", "primary", "onPrimary", "primaryContainer", "onPrimaryContainer", "secondary", "onSecondary", "secondaryContainer", "onSecondaryContainer", "tertiary", "onTertiary", "tertiaryContainer", "onTertiaryContainer", "error", "onError", "errorContainer", "onErrorContainer", "background", "onBackground", "surface", "onSurface", "surfaceVariant", "onSurfaceVariant", "outline", "outlineVariant", "shadow", "scrim", "inverseSurface", "onInverseSurface", "inversePrimary", "surfaceTint", "seedColor", "isDark", "defaults", "derivedPrimary"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/material/container.js b/packages/flutterjs_engine/package/material/dist/material/container.js
deleted file mode 100644
index e0a14a2f..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/container.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{Widget as E,StatelessWidget as m}from"../core/widget_element.js";import{Element as k}from"@flutterjs/runtime";import{VNode as C}from"@flutterjs/vdom/vnode";import{Clip as f}from"../utils/utils.js";import{Padding as p}from"../widgets/widgets.js";import{EdgeInsets as P}from"../utils/edge_insets.js";import{BoxConstraints as b}from"../utils/box_constraints.js";import{Align as j}from"../widgets/compoment/center.js";import{ClipPath as I}from"../widgets/compoment/clip.js";import{ConstrainedBox as w,LimitedBox as O}from"../widgets/compoment/sized_box.js";import{Transform as A}from"../widgets/compoment/transform.js";const a={background:"background",foreground:"foreground"};class c{constructor(){if(new.target===c)throw new Error("Decoration is abstract");this.padding=new P(0,0,0,0)}toCSSStyle(){throw new Error("toCSSStyle() must be implemented")}debugAssertIsValid(){return!0}}class x extends c{constructor({color:i=null,image:t=null,border:e=null,borderRadius:n=null,boxShadow:o=[],gradient:s=null,backgroundBlendMode:r=null,shape:d="rectangle"}={}){super(),this.color=i,this.image=t,this.border=e,this.borderRadius=n,this.boxShadow=o,this.gradient=s,this.backgroundBlendMode=r,this.shape=d}toCSSStyle(){const i={};if(this.color&&(i.backgroundColor=this.color),this.borderRadius)if(typeof this.borderRadius=="number")i.borderRadius=`${this.borderRadius}px`;else if(this.borderRadius.all!==void 0)i.borderRadius=`${this.borderRadius.all}px`;else{const{topLeft:t=0,topRight:e=0,bottomLeft:n=0,bottomRight:o=0}=this.borderRadius;i.borderRadius=`${t}px ${e}px ${o}px ${n}px`}if(this.border&&typeof this.border=="object"){const{width:t=1,color:e="black",style:n="solid"}=this.border;i.border=`${t}px ${n} ${e}`}if(this.boxShadow&&this.boxShadow.length>0&&(i.boxShadow=this.boxShadow.map(t=>{const{offsetX:e=0,offsetY:n=0,blurRadius:o=0,spreadRadius:s=0,color:r="rgba(0,0,0,0.5)"}=t;return`${e}px ${n}px ${o}px ${s}px ${r}`}).join(", ")),this.gradient){const{type:t="linear",colors:e=[],stops:n=[]}=this.gradient;if(t==="linear"){const o=e.map((s,r)=>`${s} ${(n[r]||r/e.length)*100}%`).join(", ");i.background=`linear-gradient(135deg, ${o})`}}return this.backgroundBlendMode&&(i.mixBlendMode=this.backgroundBlendMode),i}}class R extends m{constructor({key:i=null,color:t="white",child:e=null}={}){super(i),this.color=t,this.child=e}build(i){return new h({decoration:new x({color:this.color}),child:this.child})}}class S{constructor({decoration:i=null,position:t=a.background,configuration:e={}}={}){this.decoration=i,this.position=t,this.configuration=e}debugInfo(){return{type:"RenderDecoratedBox",position:this.position,hasDecoration:!!this.decoration}}}class h extends E{constructor({key:i=null,decoration:t=null,position:e=a.background,child:n=null}={}){if(super(i),!t)throw new Error("DecoratedBox requires a decoration");this.decoration=t,this.position=e,this.child=n,this._renderObject=null}createRenderObject(i){return new S({decoration:this.decoration,position:this.position,configuration:{}})}updateRenderObject(i,t){t.decoration=this.decoration,t.position=this.position}build(i){this._renderObject?this.updateRenderObject(i,this._renderObject):this._renderObject=this.createRenderObject(i);const t=i.element.getElementId(),e=i.element.getWidgetPath();let n=null;if(this.child){const r=this.child.createElement(i.element,i.element.runtime);r.mount(i.element),n=r.performRebuild()}const s={position:"relative",...this.decoration.toCSSStyle()};return new C({tag:"div",props:{style:s,"data-element-id":t,"data-widget-path":e,"data-widget":"DecoratedBox","data-position":this.position},children:n?[n]:[],key:this.key})}debugFillProperties(i){super.debugFillProperties(i);const t=this.position===a.background?"bg":"fg";i.push({name:t,value:this.decoration})}createElement(i,t){return new v(this,i,t)}}class v extends k{performRebuild(){return this.widget.build(this.context)}}class N extends m{constructor({key:i=null,alignment:t=null,padding:e=null,color:n=null,decoration:o=null,foregroundDecoration:s=null,width:r=null,height:d=null,constraints:g=null,margin:u=null,transform:B=null,transformAlignment:D=null,child:$=null,clipBehavior:y=f.none}={}){if(super(i),e!==null&&!e.isNonNegative)throw new Error("padding must be non-negative");if(u!==null&&!u.isNonNegative)throw new Error("margin must be non-negative");if(n!==null&&o!==null)throw new Error("Cannot provide both color and decoration. Use BoxDecoration(color: color).");if(o!==null&&!o.debugAssertIsValid())throw new Error("decoration is not valid");this.alignment=t,this.padding=e,this.color=n,this.decoration=o,this.foregroundDecoration=s,this.margin=u,this.transform=B,this.transformAlignment=D,this.child=$,this.clipBehavior=y,r!==null||d!==null?this.constraints=g?.tighten({width:r,height:d})||b.tightFor({width:r,height:d}):this.constraints=g}_getPaddingIncludingDecoration(){return this.padding===null?this.decoration?.padding:this.decoration?.padding===null||this.decoration?.padding===void 0?this.padding:this.padding.add(this.decoration.padding)}build(i){let t=this.child;this.child===null&&(this.constraints===null||!this.constraints.isTight)?t=new O({maxWidth:0,maxHeight:0,child:new w({constraints:b.expand()})}):this.alignment!==null&&(t=new j({alignment:this.alignment,child:t}));const e=this._getPaddingIncludingDecoration();return e!=null&&(t=new p({padding:e,child:t})),this.color!==null&&(t=new R({color:this.color,child:t})),this.clipBehavior!==f.none&&this.decoration!==null&&(t=new I({clipBehavior:this.clipBehavior,child:t})),this.decoration!==null&&(t=new h({decoration:this.decoration,child:t})),this.foregroundDecoration!==null&&(t=new h({decoration:this.foregroundDecoration,position:a.foreground,child:t})),this.constraints!==null&&(t=new w({constraints:this.constraints,child:t})),this.margin!==null&&(t=new p({padding:this.margin,child:t})),this.transform!==null&&(t=new A({transform:this.transform,alignment:this.transformAlignment,child:t})),t}debugFillProperties(i){super.debugFillProperties(i),this.alignment!==null&&i.push({name:"alignment",value:this.alignment}),this.padding!==null&&i.push({name:"padding",value:this.padding}),this.color!==null?i.push({name:"bg",value:this.color}):this.decoration!==null&&i.push({name:"bg",value:this.decoration}),this.foregroundDecoration!==null&&i.push({name:"fg",value:this.foregroundDecoration}),this.constraints!==null&&i.push({name:"constraints",value:this.constraints}),this.margin!==null&&i.push({name:"margin",value:this.margin})}}export{x as BoxDecoration,R as ColoredBox,N as Container,h as DecoratedBox,v as DecoratedBoxElement,c as Decoration,a as DecorationPosition,S as RenderDecoratedBox};
-//# sourceMappingURL=container.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/material/container.js.map b/packages/flutterjs_engine/package/material/dist/material/container.js.map
deleted file mode 100644
index f8a374c3..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/container.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/material/container.js"],
-  "sourcesContent": ["import { Widget, StatelessWidget } from '../core/widget_element.js';\r\nimport { Element } from \"@flutterjs/runtime\"\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { Clip, TextDirection, Alignment } from '../utils/utils.js';\r\nimport { Padding } from '../widgets/widgets.js';\r\nimport { EdgeInsets } from '../utils/edge_insets.js';\r\nimport { BoxConstraints } from '../utils/box_constraints.js';\r\nimport { Align } from '../widgets/compoment/center.js'; // Align is exported from center.js based on previous readings\r\nimport { ClipPath } from '../widgets/compoment/clip.js';\r\nimport { ConstrainedBox, LimitedBox } from '../widgets/compoment/sized_box.js';\r\nimport { Transform } from '../widgets/compoment/transform.js';\r\n\r\n\r\n\r\n// ============================================================================\r\n// ENUMS\r\n// ============================================================================\r\n\r\nconst DecorationPosition = {\r\n  background: 'background',\r\n  foreground: 'foreground'\r\n};\r\n\r\n// ============================================================================\r\n// EDGE INSETS\r\n// ============================================================================\r\n\r\n\r\n\r\n// ============================================================================\r\n// BOX CONSTRAINTS\r\n// ============================================================================\r\n\r\n\r\n\r\n// ============================================================================\r\n// DECORATION\r\n// ============================================================================\r\n\r\nclass Decoration {\r\n  constructor() {\r\n    if (new.target === Decoration) {\r\n      throw new Error('Decoration is abstract');\r\n    }\r\n    this.padding = new EdgeInsets(0, 0, 0, 0);\r\n  }\r\n\r\n  /**\r\n   * Convert to CSS\r\n   */\r\n  toCSSStyle() {\r\n    throw new Error('toCSSStyle() must be implemented');\r\n  }\r\n\r\n  /**\r\n   * Debug validation\r\n   */\r\n  debugAssertIsValid() {\r\n    return true;\r\n  }\r\n}\r\n\r\nclass BoxDecoration extends Decoration {\r\n  constructor({\r\n    color = null,\r\n    image = null,\r\n    border = null,\r\n    borderRadius = null,\r\n    boxShadow = [],\r\n    gradient = null,\r\n    backgroundBlendMode = null,\r\n    shape = 'rectangle'\r\n  } = {}) {\r\n    super();\r\n\r\n    this.color = color;\r\n    this.image = image;\r\n    this.border = border;\r\n    this.borderRadius = borderRadius;\r\n    this.boxShadow = boxShadow;\r\n    this.gradient = gradient;\r\n    this.backgroundBlendMode = backgroundBlendMode;\r\n    this.shape = shape;\r\n  }\r\n\r\n  toCSSStyle() {\r\n    const style = {};\r\n\r\n    if (this.color) {\r\n      style.backgroundColor = this.color;\r\n    }\r\n\r\n    if (this.borderRadius) {\r\n      if (typeof this.borderRadius === 'number') {\r\n        style.borderRadius = `${this.borderRadius}px`;\r\n      } else if (this.borderRadius.all !== undefined) {\r\n        style.borderRadius = `${this.borderRadius.all}px`;\r\n      } else {\r\n        const { topLeft = 0, topRight = 0, bottomLeft = 0, bottomRight = 0 } = this.borderRadius;\r\n        style.borderRadius = `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`;\r\n      }\r\n    }\r\n\r\n    if (this.border) {\r\n      if (typeof this.border === 'object') {\r\n        const { width = 1, color = 'black', style: borderStyle = 'solid' } = this.border;\r\n        style.border = `${width}px ${borderStyle} ${color}`;\r\n      }\r\n    }\r\n\r\n    if (this.boxShadow && this.boxShadow.length > 0) {\r\n      style.boxShadow = this.boxShadow\r\n        .map(shadow => {\r\n          const { offsetX = 0, offsetY = 0, blurRadius = 0, spreadRadius = 0, color = 'rgba(0,0,0,0.5)' } = shadow;\r\n          return `${offsetX}px ${offsetY}px ${blurRadius}px ${spreadRadius}px ${color}`;\r\n        })\r\n        .join(', ');\r\n    }\r\n\r\n    if (this.gradient) {\r\n      const { type = 'linear', colors = [], stops = [] } = this.gradient;\r\n      if (type === 'linear') {\r\n        const colorStops = colors.map((c, i) => `${c} ${(stops[i] || (i / colors.length)) * 100}%`).join(', ');\r\n        style.background = `linear-gradient(135deg, ${colorStops})`;\r\n      }\r\n    }\r\n\r\n    if (this.backgroundBlendMode) {\r\n      style.mixBlendMode = this.backgroundBlendMode;\r\n    }\r\n\r\n    return style;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// COLORED BOX WIDGET\r\n// ============================================================================\r\n\r\nclass ColoredBox extends StatelessWidget {\r\n  constructor({\r\n    key = null,\r\n    color = 'white',\r\n    child = null\r\n  } = {}) {\r\n    super(key);\r\n\r\n    this.color = color;\r\n    this.child = child;\r\n  }\r\n\r\n  build(context) {\r\n    return new DecoratedBox({\r\n      decoration: new BoxDecoration({ color: this.color }),\r\n      child: this.child\r\n    });\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER DECORATED BOX\r\n// ============================================================================\r\n\r\nclass RenderDecoratedBox {\r\n  constructor({\r\n    decoration = null,\r\n    position = DecorationPosition.background,\r\n    configuration = {}\r\n  } = {}) {\r\n    this.decoration = decoration;\r\n    this.position = position;\r\n    this.configuration = configuration;\r\n  }\r\n\r\n  debugInfo() {\r\n    return {\r\n      type: 'RenderDecoratedBox',\r\n      position: this.position,\r\n      hasDecoration: !!this.decoration\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// DECORATED BOX WIDGET\r\n// ============================================================================\r\n\r\nclass DecoratedBox extends Widget {\r\n  constructor({\r\n    key = null,\r\n    decoration = null,\r\n    position = DecorationPosition.background,\r\n    child = null\r\n  } = {}) {\r\n    super(key);\r\n\r\n    if (!decoration) {\r\n      throw new Error('DecoratedBox requires a decoration');\r\n    }\r\n\r\n    this.decoration = decoration;\r\n    this.position = position;\r\n    this.child = child;\r\n    this._renderObject = null;\r\n  }\r\n\r\n  /**\r\n   * Create render object\r\n   */\r\n  createRenderObject(context) {\r\n    return new RenderDecoratedBox({\r\n      decoration: this.decoration,\r\n      position: this.position,\r\n      configuration: {}\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Update render object\r\n   */\r\n  updateRenderObject(context, renderObject) {\r\n    renderObject.decoration = this.decoration;\r\n    renderObject.position = this.position;\r\n  }\r\n\r\n  /**\r\n   * Build widget tree\r\n   */\r\n  build(context) {\r\n    if (!this._renderObject) {\r\n      this._renderObject = this.createRenderObject(context);\r\n    } else {\r\n      this.updateRenderObject(context, this._renderObject);\r\n    }\r\n\r\n    const elementId = context.element.getElementId();\r\n    const widgetPath = context.element.getWidgetPath();\r\n\r\n    let childVNode = null;\r\n    if (this.child) {\r\n      const childElement = this.child.createElement(context.element, context.element.runtime);\r\n      childElement.mount(context.element);\r\n      childVNode = childElement.performRebuild();\r\n    }\r\n\r\n    const decorationStyle = this.decoration.toCSSStyle();\r\n\r\n    const style = {\r\n      position: 'relative',\r\n      ...decorationStyle\r\n    };\r\n\r\n    return new VNode({\r\n      tag: 'div',\r\n      props: {\r\n        style,\r\n        'data-element-id': elementId,\r\n        'data-widget-path': widgetPath,\r\n        'data-widget': 'DecoratedBox',\r\n        'data-position': this.position\r\n      },\r\n      children: childVNode ? [childVNode] : [],\r\n      key: this.key\r\n    });\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    const label = this.position === DecorationPosition.background ? 'bg' : 'fg';\r\n    properties.push({ name: label, value: this.decoration });\r\n  }\r\n\r\n  createElement(parent, runtime) {\r\n    return new DecoratedBoxElement(this, parent, runtime);\r\n  }\r\n}\r\n\r\nclass DecoratedBoxElement extends Element {\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// CONTAINER WIDGET\r\n// ============================================================================\r\n\r\nclass Container extends StatelessWidget {\r\n  constructor({\r\n    key = null,\r\n    alignment = null,\r\n    padding = null,\r\n    color = null,\r\n    decoration = null,\r\n    foregroundDecoration = null,\r\n    width = null,\r\n    height = null,\r\n    constraints = null,\r\n    margin = null,\r\n    transform = null,\r\n    transformAlignment = null,\r\n    child = null,\r\n    clipBehavior = Clip.none\r\n  } = {}) {\r\n    super(key);\r\n\r\n    // Validation\r\n    if (padding !== null && !padding.isNonNegative) {\r\n      throw new Error('padding must be non-negative');\r\n    }\r\n    if (margin !== null && !margin.isNonNegative) {\r\n      throw new Error('margin must be non-negative');\r\n    }\r\n    if (color !== null && decoration !== null) {\r\n      throw new Error('Cannot provide both color and decoration. Use BoxDecoration(color: color).');\r\n    }\r\n    if (decoration !== null && !decoration.debugAssertIsValid()) {\r\n      throw new Error('decoration is not valid');\r\n    }\r\n\r\n    this.alignment = alignment;\r\n    this.padding = padding;\r\n    this.color = color;\r\n    this.decoration = decoration;\r\n    this.foregroundDecoration = foregroundDecoration;\r\n    this.margin = margin;\r\n    this.transform = transform;\r\n    this.transformAlignment = transformAlignment;\r\n    this.child = child;\r\n    this.clipBehavior = clipBehavior;\r\n\r\n    // Apply width/height to constraints\r\n    if (width !== null || height !== null) {\r\n      this.constraints = constraints?.tighten({ width, height }) ||\r\n        BoxConstraints.tightFor({ width, height });\r\n    } else {\r\n      this.constraints = constraints;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get effective padding including decoration padding\r\n   * @private\r\n   */\r\n  _getPaddingIncludingDecoration() {\r\n    if (this.padding === null) {\r\n      return this.decoration?.padding;\r\n    }\r\n    if (this.decoration?.padding === null || this.decoration?.padding === undefined) {\r\n      return this.padding;\r\n    }\r\n    return this.padding.add(this.decoration.padding);\r\n  }\r\n\r\n  /**\r\n   * Build widget tree\r\n   */\r\n  build(context) {\r\n    let current = this.child;\r\n\r\n    // Handle empty container\r\n    if (this.child === null && (this.constraints === null || !this.constraints.isTight)) {\r\n      current = new LimitedBox({\r\n        maxWidth: 0,\r\n        maxHeight: 0,\r\n        child: new ConstrainedBox({\r\n          constraints: BoxConstraints.expand()\r\n        })\r\n      });\r\n    } else if (this.alignment !== null) {\r\n      current = new Align({\r\n        alignment: this.alignment,\r\n        child: current\r\n      });\r\n    }\r\n\r\n    // Apply padding\r\n    const effectivePadding = this._getPaddingIncludingDecoration();\r\n    if (effectivePadding != null) {  // != catches both null and undefined\r\n      current = new Padding({\r\n        padding: effectivePadding,\r\n        child: current\r\n      });\r\n    }\r\n\r\n    // Apply color\r\n    if (this.color !== null) {\r\n      current = new ColoredBox({\r\n        color: this.color,\r\n        child: current\r\n      });\r\n    }\r\n\r\n    // Apply clipping\r\n    if (this.clipBehavior !== Clip.none && this.decoration !== null) {\r\n      current = new ClipPath({\r\n        clipBehavior: this.clipBehavior,\r\n        child: current\r\n      });\r\n    }\r\n\r\n    // Apply decoration\r\n    if (this.decoration !== null) {\r\n      current = new DecoratedBox({\r\n        decoration: this.decoration,\r\n        child: current\r\n      });\r\n    }\r\n\r\n    // Apply foreground decoration\r\n    if (this.foregroundDecoration !== null) {\r\n      current = new DecoratedBox({\r\n        decoration: this.foregroundDecoration,\r\n        position: DecorationPosition.foreground,\r\n        child: current\r\n      });\r\n    }\r\n\r\n    // Apply constraints\r\n    if (this.constraints !== null) {\r\n      current = new ConstrainedBox({\r\n        constraints: this.constraints,\r\n        child: current\r\n      });\r\n    }\r\n\r\n    // Apply margin\r\n    if (this.margin !== null) {\r\n      current = new Padding({\r\n        padding: this.margin,\r\n        child: current\r\n      });\r\n    }\r\n\r\n    // Apply transform\r\n    if (this.transform !== null) {\r\n      current = new Transform({\r\n        transform: this.transform,\r\n        alignment: this.transformAlignment,\r\n        child: current\r\n      });\r\n    }\r\n\r\n    return current;\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    if (this.alignment !== null) properties.push({ name: 'alignment', value: this.alignment });\r\n    if (this.padding !== null) properties.push({ name: 'padding', value: this.padding });\r\n    if (this.color !== null) {\r\n      properties.push({ name: 'bg', value: this.color });\r\n    } else if (this.decoration !== null) {\r\n      properties.push({ name: 'bg', value: this.decoration });\r\n    }\r\n    if (this.foregroundDecoration !== null) properties.push({ name: 'fg', value: this.foregroundDecoration });\r\n    if (this.constraints !== null) properties.push({ name: 'constraints', value: this.constraints });\r\n    if (this.margin !== null) properties.push({ name: 'margin', value: this.margin });\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// SUPPORTING WIDGETS (Placeholder implementations)\r\n// ============================================================================\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport {\r\n  Container,\r\n  DecoratedBox,\r\n  DecoratedBoxElement,\r\n  RenderDecoratedBox,\r\n  ColoredBox,\r\n  BoxDecoration,\r\n  Decoration,\r\n  DecorationPosition\r\n};"],
-  "mappings": "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",
-  "names": ["Widget", "StatelessWidget", "Element", "VNode", "Clip", "Padding", "EdgeInsets", "BoxConstraints", "Align", "ClipPath", "ConstrainedBox", "LimitedBox", "Transform", "DecorationPosition", "Decoration", "BoxDecoration", "color", "image", "border", "borderRadius", "boxShadow", "gradient", "backgroundBlendMode", "shape", "style", "topLeft", "topRight", "bottomLeft", "bottomRight", "width", "borderStyle", "shadow", "offsetX", "offsetY", "blurRadius", "spreadRadius", "type", "colors", "stops", "colorStops", "c", "i", "ColoredBox", "key", "child", "context", "DecoratedBox", "RenderDecoratedBox", "decoration", "position", "configuration", "renderObject", "elementId", "widgetPath", "childVNode", "childElement", "properties", "label", "parent", "runtime", "DecoratedBoxElement", "Container", "alignment", "padding", "foregroundDecoration", "height", "constraints", "margin", "transform", "transformAlignment", "clipBehavior", "current", "effectivePadding"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/material/elevated_button.js b/packages/flutterjs_engine/package/material/dist/material/elevated_button.js
deleted file mode 100644
index c1d01796..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/elevated_button.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{ProxyWidget as r,ProxyElement as d}from"../core/widget_element.js";import"@flutterjs/runtime";import{VNode as l}from"@flutterjs/vdom/vnode";import"./gesture_detector.js";class a extends r{constructor({key:e=null,onPressed:t=null,child:s=null,style:n=null}={}){super({key:e,child:s}),this.onPressed=t,this.style=n}createElement(e,t){return new u(this,e,t)}}class u extends d{performRebuild(){const e=this.getElementId(),t=this.getWidgetPath(),s={display:"inline-flex",alignItems:"center",justifyContent:"center",padding:"10px 24px",borderRadius:"20px",backgroundColor:"#6750A4",color:"#FFFFFF",border:"none",cursor:this.widget.onPressed?"pointer":"default",boxShadow:"0 1px 3px rgba(0,0,0,0.3)",transition:"all 0.2s ease",fontSize:"14px",fontWeight:"500",fontFamily:"inherit",textTransform:"uppercase",outline:"none",userSelect:"none",opacity:this.widget.onPressed?1:.6,...this.widget.style},n=super.performRebuild(),o=new l({tag:"button",props:{style:s,type:"button","data-element-id":e,"data-widget-path":t,"data-widget":"ElevatedButton"},children:n?[n]:[],key:this.widget.key});return this.widget.onPressed&&(o.events||(o.events={}),o.events.onClick=this.widget.onPressed),o}}export{a as ElevatedButton};
-//# sourceMappingURL=elevated_button.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/material/elevated_button.js.map b/packages/flutterjs_engine/package/material/dist/material/elevated_button.js.map
deleted file mode 100644
index 01666011..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/elevated_button.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/material/elevated_button.js"],
-  "sourcesContent": ["import { ProxyWidget, ProxyElement, StatelessWidget } from '../core/widget_element.js';\r\nimport { Element } from \"@flutterjs/runtime\"\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { GestureDetector } from './gesture_detector.js';\r\n\r\n// ============================================================================\r\n// ELEVATED BUTTON\r\n// ============================================================================\r\n\r\nclass ElevatedButton extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        onPressed = null,\r\n        child = null,\r\n        // TODO: support full ButtonStyle, for now simple overrides\r\n        style = null\r\n    } = {}) {\r\n        super({ key, child });\r\n        this.onPressed = onPressed;\r\n        this.style = style;\r\n    }\r\n\r\n    createElement(parent, runtime) {\r\n        return new ElevatedButtonElement(this, parent, runtime);\r\n    }\r\n}\r\n\r\nclass ElevatedButtonElement extends ProxyElement {\r\n    performRebuild() {\r\n        const elementId = this.getElementId();\r\n        const widgetPath = this.getWidgetPath();\r\n\r\n        // Basic Material 3 Elevation/Color styles (approximate)\r\n        const baseStyle = {\r\n            display: 'inline-flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            padding: '10px 24px',\r\n            borderRadius: '20px',\r\n            backgroundColor: '#6750A4', // Primary default\r\n            color: '#FFFFFF',\r\n            border: 'none',\r\n            cursor: this.widget.onPressed ? 'pointer' : 'default',\r\n            boxShadow: '0 1px 3px rgba(0,0,0,0.3)',\r\n            transition: 'all 0.2s ease',\r\n            fontSize: '14px',\r\n            fontWeight: '500',\r\n            fontFamily: 'inherit',\r\n            textTransform: 'uppercase',\r\n            outline: 'none',\r\n            userSelect: 'none',\r\n            opacity: this.widget.onPressed ? 1 : 0.6,\r\n            ...this.widget.style\r\n        };\r\n\r\n        // Get child VNode from parent class (this handles the widget lifecycle)\r\n        const childVNode = super.performRebuild();\r\n\r\n        // Wrap child VNode in button element\r\n        const buttonVNode = new VNode({\r\n            tag: 'button',\r\n            props: {\r\n                style: baseStyle,\r\n                type: 'button',\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'ElevatedButton',\r\n            },\r\n            children: childVNode ? [childVNode] : [],\r\n            key: this.widget.key\r\n        });\r\n\r\n        // If there's an onPressed handler, wrap in GestureDetector\r\n        if (this.widget.onPressed) {\r\n            // We need to attach the event handler to the button VNode\r\n            if (!buttonVNode.events) {\r\n                buttonVNode.events = {};\r\n            }\r\n            buttonVNode.events.onClick = this.widget.onPressed;\r\n        }\r\n\r\n        return buttonVNode;\r\n    }\r\n}\r\n\r\nexport {\r\n    ElevatedButton\r\n};\r\n"],
-  "mappings": "AAAA,OAAS,eAAAA,EAAa,gBAAAC,MAAqC,4BAC3D,MAAwB,qBACxB,OAAS,SAAAC,MAAa,wBACtB,MAAgC,wBAMhC,MAAMC,UAAuBH,CAAY,CACrC,YAAY,CACR,IAAAI,EAAM,KACN,UAAAC,EAAY,KACZ,MAAAC,EAAQ,KAER,MAAAC,EAAQ,IACZ,EAAI,CAAC,EAAG,CACJ,MAAM,CAAE,IAAAH,EAAK,MAAAE,CAAM,CAAC,EACpB,KAAK,UAAYD,EACjB,KAAK,MAAQE,CACjB,CAEA,cAAcC,EAAQC,EAAS,CAC3B,OAAO,IAAIC,EAAsB,KAAMF,EAAQC,CAAO,CAC1D,CACJ,CAEA,MAAMC,UAA8BT,CAAa,CAC7C,gBAAiB,CACb,MAAMU,EAAY,KAAK,aAAa,EAC9BC,EAAa,KAAK,cAAc,EAGhCC,EAAY,CACd,QAAS,cACT,WAAY,SACZ,eAAgB,SAChB,QAAS,YACT,aAAc,OACd,gBAAiB,UACjB,MAAO,UACP,OAAQ,OACR,OAAQ,KAAK,OAAO,UAAY,UAAY,UAC5C,UAAW,4BACX,WAAY,gBACZ,SAAU,OACV,WAAY,MACZ,WAAY,UACZ,cAAe,YACf,QAAS,OACT,WAAY,OACZ,QAAS,KAAK,OAAO,UAAY,EAAI,GACrC,GAAG,KAAK,OAAO,KACnB,EAGMC,EAAa,MAAM,eAAe,EAGlCC,EAAc,IAAIb,EAAM,CAC1B,IAAK,SACL,MAAO,CACH,MAAOW,EACP,KAAM,SACN,kBAAmBF,EACnB,mBAAoBC,EACpB,cAAe,gBACnB,EACA,SAAUE,EAAa,CAACA,CAAU,EAAI,CAAC,EACvC,IAAK,KAAK,OAAO,GACrB,CAAC,EAGD,OAAI,KAAK,OAAO,YAEPC,EAAY,SACbA,EAAY,OAAS,CAAC,GAE1BA,EAAY,OAAO,QAAU,KAAK,OAAO,WAGtCA,CACX,CACJ",
-  "names": ["ProxyWidget", "ProxyElement", "VNode", "ElevatedButton", "key", "onPressed", "child", "style", "parent", "runtime", "ElevatedButtonElement", "elementId", "widgetPath", "baseStyle", "childVNode", "buttonVNode"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/material/floating_action_button.js b/packages/flutterjs_engine/package/material/dist/material/floating_action_button.js
deleted file mode 100644
index 5733e04b..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/floating_action_button.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import{StatelessWidget as g}from"../core/widget_element.js";import{Element as S}from"@flutterjs/runtime";import{VNode as r}from"@flutterjs/vdom/vnode";import{GestureDetector as b}from"./gesture_detector.js";class x extends g{constructor({key:e=null,onPressed:n=null,onLongPress:o=null,tooltip:l=null,foregroundColor:a="#FFF",backgroundColor:s=null,focusColor:i=null,hoverColor:t=null,splashColor:u=null,elevation:d=6,highlightElevation:p=12,disabledElevation:c=0,child:m=null,mini:v=!1,shape:C=null,clipBehavior:P="clip",autofocus:w=!1,materialTapTargetSize:_=null,isExtended:F=!1,enableFeedback:k=!0,heroTag:E="FloatingActionButton"}={}){if(super(e),!n)throw new Error("FloatingActionButton requires onPressed callback");this.onPressed=n,this.onLongPress=o,this.tooltip=l,this.foregroundColor=a,this.backgroundColor=s||this._getDefaultBackgroundColor(),this.focusColor=i,this.hoverColor=t,this.splashColor=u,this.elevation=d,this.highlightElevation=p,this.disabledElevation=c,this.child=m,this.mini=v,this.shape=C,this.clipBehavior=P,this.autofocus=w,this.materialTapTargetSize=_,this.isExtended=F,this.enableFeedback=k,this.heroTag=E,this._isHovered=!1,this._isPressed=!1}_getDefaultBackgroundColor(){return typeof window<"u"?(getComputedStyle(document.documentElement).getPropertyValue("--primary-color")||"#2196F3").trim():"#2196F3"}_getButtonSize(){return this.mini?40:56}_getButtonStyle(){const e=this._getButtonSize(),n=this._isPressed?this.highlightElevation:this.elevation;return{position:"relative",width:`${e}px`,height:`${e}px`,borderRadius:"50%",backgroundColor:this.backgroundColor,color:this.foregroundColor,border:"none",cursor:"pointer",display:"flex",justifyContent:"center",alignItems:"center",boxShadow:`0 ${n}px ${n*1.5}px rgba(0, 0, 0, 0.${n})`,transition:"all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",outline:"none",fontFamily:"inherit",fontSize:"24px",fontWeight:500,textTransform:"uppercase",letterSpacing:"0.5px",userSelect:"none",WebkitUserSelect:"none",MozUserSelect:"none",msUserSelect:"none"}}_getRippleStyle(){return{position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:"50%",backgroundColor:this.splashColor||"rgba(255, 255, 255, 0.2)",opacity:0,pointerEvents:"none",animation:this._isPressed?"fab-ripple 0.6s ease-out":"none"}}_handlePress(e){this.enableFeedback&&navigator.vibrate&&navigator.vibrate(10),this.onPressed&&this.onPressed(e)}_handleLongPress(e){this.enableFeedback&&navigator.vibrate&&navigator.vibrate([10,20,10]),this.onLongPress&&this.onLongPress(e)}_handleTapDown(e){this._isPressed=!0}_handleTapUp(e){this._isPressed=!1}_injectKeyframes(){if(typeof document<"u"&&!document.getElementById("fab-keyframes")){const e=document.createElement("style");e.id="fab-keyframes",e.textContent=`
-        @keyframes fab-ripple {
-          0% {
-            opacity: 1;
-            transform: scale(1);
-          }
-          100% {
-            opacity: 0;
-            transform: scale(2);
-          }
-        }
-      `,document.head.appendChild(e)}}build(e){const n=this._getButtonStyle();let o=null;if(this.child){const t=this.child.createElement?.(e.element,e.element.runtime)||this.child;t.mount&&t.mount(e.element),o=t.performRebuild?.(e.element,e.element.runtime)||null}this._injectKeyframes();const l=new r({tag:"button",props:{style:n,type:"button",title:this.tooltip||"","aria-label":this.tooltip||"Floating Action Button"},children:[new r({tag:"span",props:{style:this._getRippleStyle(),className:"fab-ripple"},children:[]}),new r({tag:"span",props:{style:{position:"relative",zIndex:1,display:"flex",alignItems:"center",justifyContent:"center"}},children:o?[o]:[]})]}),s=new b({onTap:t=>this._handlePress(t),onTapDown:t=>this._handleTapDown(t),onTapUp:t=>this._handleTapUp(t),onLongPress:t=>this._handleLongPress(t),child:new y(l)}).createElement?.(e.element,e.element.runtime);s&&s.mount&&s.mount(e.element);let i=s?.performRebuild?.(e.element,e.element.runtime)||null;return this.tooltip?new r({tag:"div",props:{style:{position:"relative",display:"inline-block"},"data-widget":"FloatingActionButton"},children:[i,new r({tag:"div",props:{style:{visibility:"hidden",backgroundColor:"#333",color:"#fff",textAlign:"center",borderRadius:"4px",padding:"5px 8px",position:"absolute",zIndex:1e3,bottom:"125%",left:"50%",marginLeft:"-40px",opacity:0,transition:"opacity 0.3s",whiteSpace:"nowrap",fontSize:"12px",fontWeight:500,pointerEvents:"none",width:"80px"},className:"fab-tooltip"},children:[this.tooltip]})]}):i}createElement(e,n){return new f(this,e,n)}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"onPressed",value:this.onPressed?"fn":null}),e.push({name:"tooltip",value:this.tooltip}),e.push({name:"backgroundColor",value:this.backgroundColor}),this.mini&&e.push({name:"mini",value:!0})}}class f extends S{performRebuild(e,n){return this.widget.build(this.context)}}class B extends g{constructor({key:e=null,onPressed:n=null,onLongPress:o=null,tooltip:l=null,foregroundColor:a="#FFF",backgroundColor:s=null,icon:i=null,label:t="",elevation:u=6,highlightElevation:d=12,clipBehavior:p="clip",heroTag:c="FloatingActionButton",enableFeedback:m=!0}={}){if(super(e),!n)throw new Error("FloatingActionButtonExtended requires onPressed callback");this.onPressed=n,this.onLongPress=o,this.tooltip=l,this.foregroundColor=a,this.backgroundColor=s||this._getDefaultBackgroundColor(),this.icon=i,this.label=t,this.elevation=u,this.highlightElevation=d,this.clipBehavior=p,this.heroTag=c,this.enableFeedback=m,this._isPressed=!1}_getDefaultBackgroundColor(){return typeof window<"u"?(getComputedStyle(document.documentElement).getPropertyValue("--primary-color")||"#2196F3").trim():"#2196F3"}_handlePress(e){this.enableFeedback&&navigator.vibrate&&navigator.vibrate(10),this.onPressed&&this.onPressed(e)}_handleLongPress(e){this.enableFeedback&&navigator.vibrate&&navigator.vibrate([10,20,10]),this.onLongPress&&this.onLongPress(e)}build(e){const n=this._isPressed?this.highlightElevation:this.elevation,o={display:"inline-flex",alignItems:"center",justifyContent:"center",gap:"8px",padding:"12px 20px",borderRadius:"48px",backgroundColor:this.backgroundColor,color:this.foregroundColor,border:"none",cursor:"pointer",boxShadow:`0 ${n}px ${n*1.5}px rgba(0, 0, 0, 0.${n})`,transition:"all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",fontSize:"14px",fontWeight:500,textTransform:"uppercase",letterSpacing:"0.5px",outline:"none",fontFamily:"inherit",userSelect:"none",WebkitUserSelect:"none",minHeight:"48px"};let l=null;if(this.icon){const t=this.icon.createElement?.(e.element,e.element.runtime)||this.icon;t.mount&&t.mount(e.element),l=t.performRebuild?.(e.element,e.element.runtime)||null}const a=new r({tag:"button",props:{style:o,type:"button",title:this.tooltip||"","aria-label":this.tooltip||this.label},children:[l&&new r({tag:"span",props:{style:{display:"flex",alignItems:"center"}},children:[l]}),new r({tag:"span",props:{},children:[this.label]})]}),i=new b({onTap:t=>this._handlePress(t),onLongPress:t=>this._handleLongPress(t),child:new y(a)}).createElement?.(e.element,e.element.runtime);return i&&i.mount&&i.mount(e.element),i?.performRebuild?.(e.element,e.element.runtime)||null}createElement(e,n){return new f(this,e,n)}}class y extends g{constructor(e){super(),this.content=e}build(e){return this.content}}export{x as FloatingActionButton,f as FloatingActionButtonElement,B as FloatingActionButtonExtended};
-//# sourceMappingURL=floating_action_button.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/material/floating_action_button.js.map b/packages/flutterjs_engine/package/material/dist/material/floating_action_button.js.map
deleted file mode 100644
index ce90e1e5..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/floating_action_button.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/material/floating_action_button.js"],
-  "sourcesContent": ["import { Widget, StatelessWidget } from '../core/widget_element.js';\r\nimport { Element } from \"@flutterjs/runtime\"\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { GestureDetector } from './gesture_detector.js';\r\n\r\n// ============================================================================\r\n// FLOATING ACTION BUTTON\r\n// ============================================================================\r\n\r\nclass FloatingActionButton extends StatelessWidget {\r\n  constructor({\r\n    key = null,\r\n    onPressed = null,\r\n    onLongPress = null,\r\n    tooltip = null,\r\n    foregroundColor = '#FFF',\r\n    backgroundColor = null,\r\n    focusColor = null,\r\n    hoverColor = null,\r\n    splashColor = null,\r\n    elevation = 6,\r\n    highlightElevation = 12,\r\n    disabledElevation = 0,\r\n    child = null,\r\n    mini = false,\r\n    shape = null,\r\n    clipBehavior = 'clip',\r\n    autofocus = false,\r\n    materialTapTargetSize = null,\r\n    isExtended = false,\r\n    enableFeedback = true,\r\n    heroTag = 'FloatingActionButton'\r\n  } = {}) {\r\n    super(key);\r\n\r\n    if (!onPressed) {\r\n      throw new Error('FloatingActionButton requires onPressed callback');\r\n    }\r\n\r\n    this.onPressed = onPressed;\r\n    this.onLongPress = onLongPress;\r\n    this.tooltip = tooltip;\r\n    this.foregroundColor = foregroundColor;\r\n    this.backgroundColor = backgroundColor || this._getDefaultBackgroundColor();\r\n    this.focusColor = focusColor;\r\n    this.hoverColor = hoverColor;\r\n    this.splashColor = splashColor;\r\n    this.elevation = elevation;\r\n    this.highlightElevation = highlightElevation;\r\n    this.disabledElevation = disabledElevation;\r\n    this.child = child;\r\n    this.mini = mini;\r\n    this.shape = shape;\r\n    this.clipBehavior = clipBehavior;\r\n    this.autofocus = autofocus;\r\n    this.materialTapTargetSize = materialTapTargetSize;\r\n    this.isExtended = isExtended;\r\n    this.enableFeedback = enableFeedback;\r\n    this.heroTag = heroTag;\r\n\r\n    this._isHovered = false;\r\n    this._isPressed = false;\r\n  }\r\n\r\n  /**\r\n   * Get default background color (primary color from theme)\r\n   */\r\n  _getDefaultBackgroundColor() {\r\n    if (typeof window !== 'undefined') {\r\n      const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color') || '#2196F3';\r\n      return primaryColor.trim();\r\n    }\r\n    return '#2196F3';\r\n  }\r\n\r\n  /**\r\n   * Get button size based on mini flag\r\n   */\r\n  _getButtonSize() {\r\n    return this.mini ? 40 : 56;\r\n  }\r\n\r\n  /**\r\n   * Get button styles\r\n   */\r\n  _getButtonStyle() {\r\n    const size = this._getButtonSize();\r\n    const elevation = this._isPressed ? this.highlightElevation : this.elevation;\r\n\r\n    return {\r\n      position: 'relative',\r\n      width: `${size}px`,\r\n      height: `${size}px`,\r\n      borderRadius: '50%',\r\n      backgroundColor: this.backgroundColor,\r\n      color: this.foregroundColor,\r\n      border: 'none',\r\n      cursor: 'pointer',\r\n      display: 'flex',\r\n      justifyContent: 'center',\r\n      alignItems: 'center',\r\n      boxShadow: `0 ${elevation}px ${elevation * 1.5}px rgba(0, 0, 0, 0.${elevation})`,\r\n      transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',\r\n      outline: 'none',\r\n      fontFamily: 'inherit',\r\n      fontSize: '24px',\r\n      fontWeight: 500,\r\n      textTransform: 'uppercase',\r\n      letterSpacing: '0.5px',\r\n      userSelect: 'none',\r\n      WebkitUserSelect: 'none',\r\n      MozUserSelect: 'none',\r\n      msUserSelect: 'none'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get ripple effect styles\r\n   */\r\n  _getRippleStyle() {\r\n    return {\r\n      position: 'absolute',\r\n      top: 0,\r\n      left: 0,\r\n      right: 0,\r\n      bottom: 0,\r\n      borderRadius: '50%',\r\n      backgroundColor: this.splashColor || 'rgba(255, 255, 255, 0.2)',\r\n      opacity: 0,\r\n      pointerEvents: 'none',\r\n      animation: this._isPressed\r\n        ? 'fab-ripple 0.6s ease-out'\r\n        : 'none'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Handle press with feedback\r\n   */\r\n  _handlePress(event) {\r\n    if (this.enableFeedback) {\r\n      // Haptic feedback (if available)\r\n      if (navigator.vibrate) {\r\n        navigator.vibrate(10);\r\n      }\r\n    }\r\n\r\n    if (this.onPressed) {\r\n      this.onPressed(event);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle long press\r\n   */\r\n  _handleLongPress(event) {\r\n    if (this.enableFeedback && navigator.vibrate) {\r\n      navigator.vibrate([10, 20, 10]); // Double vibration for long press\r\n    }\r\n\r\n    if (this.onLongPress) {\r\n      this.onLongPress(event);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle mouse/touch down\r\n   */\r\n  _handleTapDown(event) {\r\n    this._isPressed = true;\r\n  }\r\n\r\n  /**\r\n   * Handle mouse/touch up\r\n   */\r\n  _handleTapUp(event) {\r\n    this._isPressed = false;\r\n  }\r\n\r\n  /**\r\n   * Inject ripple animation keyframes\r\n   */\r\n  _injectKeyframes() {\r\n    if (typeof document !== 'undefined' && !document.getElementById('fab-keyframes')) {\r\n      const style = document.createElement('style');\r\n      style.id = 'fab-keyframes';\r\n      style.textContent = `\r\n        @keyframes fab-ripple {\r\n          0% {\r\n            opacity: 1;\r\n            transform: scale(1);\r\n          }\r\n          100% {\r\n            opacity: 0;\r\n            transform: scale(2);\r\n          }\r\n        }\r\n      `;\r\n      document.head.appendChild(style);\r\n    }\r\n  }\r\n\r\n  build(context) {\r\n    const buttonStyle = this._getButtonStyle();\r\n    let childVNode = null;\r\n\r\n    // Build child element\r\n    if (this.child) {\r\n      const childElement = this.child.createElement?.(context.element, context.element.runtime) || this.child;\r\n      if (childElement.mount) {\r\n        childElement.mount(context.element);\r\n      }\r\n      childVNode = childElement.performRebuild?.(context.element, context.element.runtime) || null;\r\n    }\r\n\r\n    // Inject ripple animation keyframes\r\n    this._injectKeyframes();\r\n\r\n    // Create the actual button content (without gesture detection)\r\n    const buttonContent = new VNode({\r\n      tag: 'button',\r\n      props: {\r\n        style: buttonStyle,\r\n        type: 'button',\r\n        title: this.tooltip || '',\r\n        'aria-label': this.tooltip || 'Floating Action Button'\r\n      },\r\n      children: [\r\n        // Ripple effect\r\n        new VNode({\r\n          tag: 'span',\r\n          props: {\r\n            style: this._getRippleStyle(),\r\n            className: 'fab-ripple'\r\n          },\r\n          children: []\r\n        }),\r\n        // Child content (icon)\r\n        new VNode({\r\n          tag: 'span',\r\n          props: {\r\n            style: {\r\n              position: 'relative',\r\n              zIndex: 1,\r\n              display: 'flex',\r\n              alignItems: 'center',\r\n              justifyContent: 'center'\r\n            }\r\n          },\r\n          children: childVNode ? [childVNode] : []\r\n        })\r\n      ]\r\n    });\r\n\r\n    // Wrap button with GestureDetector\r\n    const fabWidget = new GestureDetector({\r\n      onTap: (event) => this._handlePress(event),\r\n      onTapDown: (event) => this._handleTapDown(event),\r\n      onTapUp: (event) => this._handleTapUp(event),\r\n      onLongPress: (event) => this._handleLongPress(event),\r\n      child: new _FABContentWrapper(buttonContent)\r\n    });\r\n\r\n    // Build gesture detector element\r\n    const fabElement = fabWidget.createElement?.(context.element, context.element.runtime);\r\n    if (fabElement && fabElement.mount) {\r\n      fabElement.mount(context.element);\r\n    }\r\n    let fabVNode = fabElement?.performRebuild?.(context.element, context.element.runtime) || null;\r\n\r\n    // Wrap with tooltip if provided\r\n    if (this.tooltip) {\r\n      return new VNode({\r\n        tag: 'div',\r\n        props: {\r\n          style: {\r\n            position: 'relative',\r\n            display: 'inline-block'\r\n          },\r\n          'data-widget': 'FloatingActionButton'\r\n        },\r\n        children: [\r\n          fabVNode,\r\n          new VNode({\r\n            tag: 'div',\r\n            props: {\r\n              style: {\r\n                visibility: 'hidden',\r\n                backgroundColor: '#333',\r\n                color: '#fff',\r\n                textAlign: 'center',\r\n                borderRadius: '4px',\r\n                padding: '5px 8px',\r\n                position: 'absolute',\r\n                zIndex: 1000,\r\n                bottom: '125%',\r\n                left: '50%',\r\n                marginLeft: '-40px',\r\n                opacity: 0,\r\n                transition: 'opacity 0.3s',\r\n                whiteSpace: 'nowrap',\r\n                fontSize: '12px',\r\n                fontWeight: 500,\r\n                pointerEvents: 'none',\r\n                width: '80px'\r\n              },\r\n              className: 'fab-tooltip'\r\n            },\r\n            children: [this.tooltip]\r\n          })\r\n        ]\r\n      });\r\n    }\r\n\r\n    return fabVNode;\r\n  }\r\n\r\n  createElement(parent, runtime) {\r\n    return new FloatingActionButtonElement(this, parent, runtime);\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({ name: 'onPressed', value: this.onPressed ? 'fn' : null });\r\n    properties.push({ name: 'tooltip', value: this.tooltip });\r\n    properties.push({ name: 'backgroundColor', value: this.backgroundColor });\r\n    if (this.mini) properties.push({ name: 'mini', value: true });\r\n  }\r\n}\r\n\r\nclass FloatingActionButtonElement extends Element {\r\n  performRebuild(parent, runtime) {\r\n    return this.widget.build(this.context);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// EXTENDED FLOATING ACTION BUTTON\r\n// ============================================================================\r\n\r\nclass FloatingActionButtonExtended extends StatelessWidget {\r\n  constructor({\r\n    key = null,\r\n    onPressed = null,\r\n    onLongPress = null,\r\n    tooltip = null,\r\n    foregroundColor = '#FFF',\r\n    backgroundColor = null,\r\n    icon = null,\r\n    label = '',\r\n    elevation = 6,\r\n    highlightElevation = 12,\r\n    clipBehavior = 'clip',\r\n    heroTag = 'FloatingActionButton',\r\n    enableFeedback = true\r\n  } = {}) {\r\n    super(key);\r\n\r\n    if (!onPressed) {\r\n      throw new Error('FloatingActionButtonExtended requires onPressed callback');\r\n    }\r\n\r\n    this.onPressed = onPressed;\r\n    this.onLongPress = onLongPress;\r\n    this.tooltip = tooltip;\r\n    this.foregroundColor = foregroundColor;\r\n    this.backgroundColor = backgroundColor || this._getDefaultBackgroundColor();\r\n    this.icon = icon;\r\n    this.label = label;\r\n    this.elevation = elevation;\r\n    this.highlightElevation = highlightElevation;\r\n    this.clipBehavior = clipBehavior;\r\n    this.heroTag = heroTag;\r\n    this.enableFeedback = enableFeedback;\r\n\r\n    this._isPressed = false;\r\n  }\r\n\r\n  /**\r\n   * Get default background color\r\n   */\r\n  _getDefaultBackgroundColor() {\r\n    if (typeof window !== 'undefined') {\r\n      const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color') || '#2196F3';\r\n      return primaryColor.trim();\r\n    }\r\n    return '#2196F3';\r\n  }\r\n\r\n  /**\r\n   * Handle press\r\n   */\r\n  _handlePress(event) {\r\n    if (this.enableFeedback && navigator.vibrate) {\r\n      navigator.vibrate(10);\r\n    }\r\n    if (this.onPressed) {\r\n      this.onPressed(event);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle long press\r\n   */\r\n  _handleLongPress(event) {\r\n    if (this.enableFeedback && navigator.vibrate) {\r\n      navigator.vibrate([10, 20, 10]);\r\n    }\r\n    if (this.onLongPress) {\r\n      this.onLongPress(event);\r\n    }\r\n  }\r\n\r\n  build(context) {\r\n    const elevation = this._isPressed ? this.highlightElevation : this.elevation;\r\n\r\n    const buttonStyle = {\r\n      display: 'inline-flex',\r\n      alignItems: 'center',\r\n      justifyContent: 'center',\r\n      gap: '8px',\r\n      padding: '12px 20px',\r\n      borderRadius: '48px',\r\n      backgroundColor: this.backgroundColor,\r\n      color: this.foregroundColor,\r\n      border: 'none',\r\n      cursor: 'pointer',\r\n      boxShadow: `0 ${elevation}px ${elevation * 1.5}px rgba(0, 0, 0, 0.${elevation})`,\r\n      transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',\r\n      fontSize: '14px',\r\n      fontWeight: 500,\r\n      textTransform: 'uppercase',\r\n      letterSpacing: '0.5px',\r\n      outline: 'none',\r\n      fontFamily: 'inherit',\r\n      userSelect: 'none',\r\n      WebkitUserSelect: 'none',\r\n      minHeight: '48px'\r\n    };\r\n\r\n    let iconVNode = null;\r\n    if (this.icon) {\r\n      const iconElement = this.icon.createElement?.(context.element, context.element.runtime) || this.icon;\r\n      if (iconElement.mount) {\r\n        iconElement.mount(context.element);\r\n      }\r\n      iconVNode = iconElement.performRebuild?.(context.element, context.element.runtime) || null;\r\n    }\r\n\r\n    const buttonContent = new VNode({\r\n      tag: 'button',\r\n      props: {\r\n        style: buttonStyle,\r\n        type: 'button',\r\n        title: this.tooltip || '',\r\n        'aria-label': this.tooltip || this.label\r\n      },\r\n      children: [\r\n        iconVNode && new VNode({\r\n          tag: 'span',\r\n          props: { style: { display: 'flex', alignItems: 'center' } },\r\n          children: [iconVNode]\r\n        }),\r\n        new VNode({\r\n          tag: 'span',\r\n          props: {},\r\n          children: [this.label]\r\n        })\r\n      ]\r\n    });\r\n\r\n    // Wrap with GestureDetector\r\n    const fabWidget = new GestureDetector({\r\n      onTap: (event) => this._handlePress(event),\r\n      onLongPress: (event) => this._handleLongPress(event),\r\n      child: new _FABContentWrapper(buttonContent)\r\n    });\r\n\r\n    const fabElement = fabWidget.createElement?.(context.element, context.element.runtime);\r\n    if (fabElement && fabElement.mount) {\r\n      fabElement.mount(context.element);\r\n    }\r\n    return fabElement?.performRebuild?.(context.element, context.element.runtime) || null;\r\n  }\r\n\r\n  createElement(parent, runtime) {\r\n    return new FloatingActionButtonElement(this, parent, runtime);\r\n  }\r\n}\r\n\r\nclass _FABContentWrapper extends StatelessWidget {\r\n  constructor(content) {\r\n    super();\r\n    this.content = content;\r\n  }\r\n\r\n  build(context) {\r\n    return this.content;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport {\r\n  FloatingActionButton,\r\n  FloatingActionButtonElement,\r\n  FloatingActionButtonExtended\r\n};"],
-  "mappings": "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",
-  "names": ["StatelessWidget", "Element", "VNode", "GestureDetector", "FloatingActionButton", "key", "onPressed", "onLongPress", "tooltip", "foregroundColor", "backgroundColor", "focusColor", "hoverColor", "splashColor", "elevation", "highlightElevation", "disabledElevation", "child", "mini", "shape", "clipBehavior", "autofocus", "materialTapTargetSize", "isExtended", "enableFeedback", "heroTag", "size", "event", "style", "context", "buttonStyle", "childVNode", "childElement", "buttonContent", "fabElement", "_FABContentWrapper", "fabVNode", "parent", "runtime", "FloatingActionButtonElement", "properties", "FloatingActionButtonExtended", "icon", "label", "iconVNode", "iconElement", "content"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/material/gesture_detector.js b/packages/flutterjs_engine/package/material/dist/material/gesture_detector.js
deleted file mode 100644
index c4dc4e90..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/gesture_detector.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{StatelessWidget as b}from"../core/widget_element.js";import{Element as x}from"@flutterjs/runtime";import{VNode as C}from"@flutterjs/vdom/vnode";import{TapRecognizer as s,LongPressRecognizer as y,SwipeRecognizer as I,PanRecognizer as q,ScaleRecognizer as F}from"@flutterjs/runtime";class G extends b{constructor({key:n=null,child:t=null,onTap:e=null,onTapDown:o=null,onTapUp:i=null,onTapCancel:l=null,onDoubleTap:u=null,onLongPress:r=null,onLongPressStart:c=null,onLongPressMoveUpdate:p=null,onLongPressEnd:d=null,onLongPressUp:S=null,onSwipe:m=null,onSwipeLeft:f=null,onSwipeRight:g=null,onSwipeUp:w=null,onSwipeDown:T=null,onPan:E=null,onPanStart:P=null,onPanUpdate:v=null,onPanEnd:_=null,onScale:D=null,onScaleStart:z=null,onScaleUpdate:U=null,onScaleEnd:M=null,behavior:L="opaque",excludeFromSemantics:R=!1}={}){super(n),this.child=t,this.onTap=e,this.onTapDown=o,this.onTapUp=i,this.onTapCancel=l,this.onDoubleTap=u,this.onLongPress=r,this.onLongPressStart=c,this.onLongPressMoveUpdate=p,this.onLongPressEnd=d,this.onLongPressUp=S,this.onSwipe=m,this.onSwipeLeft=f,this.onSwipeRight=g,this.onSwipeUp=w,this.onSwipeDown=T,this.onPan=E,this.onPanStart=P,this.onPanUpdate=v,this.onPanEnd=_,this.onScale=D,this.onScaleStart=z,this.onScaleUpdate=U,this.onScaleEnd=M,this.behavior=L,this.excludeFromSemantics=R,this.recognizers=[],this._elementId=null}build(n){this._elementId=n.element.getElementId();let t=null;if(this.child){const i=this.child.createElement?.(n.element,n.element.runtime)||this.child;i.mount&&i.mount(n.element),t=i.performRebuild?.()||null}const e={position:"relative",userSelect:this.behavior==="opaque"?"none":"auto",WebkitUserSelect:this.behavior==="opaque"?"none":"auto",MozUserSelect:this.behavior==="opaque"?"none":"auto",msUserSelect:this.behavior==="opaque"?"none":"auto",touchAction:"manipulation",cursor:"pointer"},o=this._elementId;return new C({tag:"div",props:{style:e,"data-widget":"GestureDetector","data-element-id":o,onMouseDown:i=>this._handleMouseDown(i,o),onMouseUp:i=>this._handleMouseUp(i,o),onMouseMove:i=>this._handleMouseMove(i,o),onMouseLeave:i=>this._handleMouseLeave(i,o),onTouchStart:i=>this._handleTouchStart(i,o),onTouchEnd:i=>this._handleTouchEnd(i,o),onTouchMove:i=>this._handleTouchMove(i,o),onTouchCancel:i=>this._handleTouchCancel(i,o),onContextMenu:i=>this._handleContextMenu(i,o)},children:t?[t]:[]})}_initializeRecognizers(n){if(!(this.recognizers.length>0)){if(this.onTap||this.onTapDown||this.onTapUp){const t=new s(e=>{this.onTap&&this.onTap(e),this.onTapUp&&this.onTapUp(e)},{maxDuration:300,maxMovement:10});this.recognizers.push(t)}if(this.onDoubleTap){const t=new s(e=>{e.tapCount===2&&this.onDoubleTap(e)},{minTaps:2,maxTaps:2});this.recognizers.push(t)}if(this.onLongPress||this.onLongPressStart||this.onLongPressEnd){const t=new y(e=>{this.onLongPress&&this.onLongPress(e)},{duration:500,maxMovement:10});this.recognizers.push(t)}if(this.onSwipe||this.onSwipeLeft||this.onSwipeRight||this.onSwipeUp||this.onSwipeDown){const t=new I(e=>{this.onSwipe&&this.onSwipe(e),e.direction==="left"&&this.onSwipeLeft?this.onSwipeLeft(e):e.direction==="right"&&this.onSwipeRight?this.onSwipeRight(e):e.direction==="up"&&this.onSwipeUp?this.onSwipeUp(e):e.direction==="down"&&this.onSwipeDown&&this.onSwipeDown(e)},{minDistance:50,maxDuration:300});this.recognizers.push(t)}if(this.onPan||this.onPanStart||this.onPanUpdate||this.onPanEnd){const t=new q(e=>{this.onPan&&this.onPan(e)},{minDistance:10,onStart:e=>{this.onPanStart&&this.onPanStart(e)},onUpdate:e=>{this.onPanUpdate&&this.onPanUpdate(e)},onEnd:e=>{this.onPanEnd&&this.onPanEnd(e)}});this.recognizers.push(t)}if(this.onScale||this.onScaleStart||this.onScaleUpdate||this.onScaleEnd){const t=new F(e=>{this.onScale&&this.onScale(e)},{minScale:.5,maxScale:2,onStart:e=>{this.onScaleStart&&this.onScaleStart(e)},onUpdate:e=>{this.onScaleUpdate&&this.onScaleUpdate(e)},onEnd:e=>{this.onScaleEnd&&this.onScaleEnd(e)}});this.recognizers.push(t)}}}_routeEvent(n,t,e){this._initializeRecognizers(e),this.recognizers.forEach(o=>{o.isDisposed||o.handleEvent(n,t)})}_handleMouseDown(n,t){this._routeEvent("mousedown",n,t),this.onTapDown&&this.onTapDown({type:"tapdown",position:{x:n.clientX,y:n.clientY},nativeEvent:n})}_handleMouseUp(n,t){this._routeEvent("mouseup",n,t)}_handleMouseMove(n,t){this._routeEvent("mousemove",n,t)}_handleMouseLeave(n,t){this.onTapCancel&&this.onTapCancel({type:"tapcancel",nativeEvent:n})}_handleTouchStart(n,t){if(this._routeEvent("touchstart",n,t),this.onTapDown){const e=n.touches[0];this.onTapDown({type:"tapdown",position:{x:e.clientX,y:e.clientY},nativeEvent:n})}}_handleTouchEnd(n,t){this._routeEvent("touchend",n,t)}_handleTouchMove(n,t){this._routeEvent("touchmove",n,t)}_handleTouchCancel(n,t){this._routeEvent("touchcancel",n,t),this.onTapCancel&&this.onTapCancel({type:"tapcancel",nativeEvent:n})}_handleContextMenu(n,t){this.onLongPress&&(n.preventDefault(),this._routeEvent("contextmenu",n,t))}dispose(){this.recognizers.forEach(n=>{n.dispose()}),this.recognizers=[]}createElement(n,t){return new h(this,n,t)}debugFillProperties(n){super.debugFillProperties(n),this.onTap&&n.push({name:"onTap",value:"fn"}),this.onDoubleTap&&n.push({name:"onDoubleTap",value:"fn"}),this.onLongPress&&n.push({name:"onLongPress",value:"fn"}),this.onSwipe&&n.push({name:"onSwipe",value:"fn"}),this.onPan&&n.push({name:"onPan",value:"fn"})}}class h extends x{performRebuild(){return this.widget.build(this.context)}unmount(){this.widget&&this.widget.dispose(),super.unmount()}}export{G as GestureDetector,h as GestureDetectorElement};
-//# sourceMappingURL=gesture_detector.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/material/gesture_detector.js.map b/packages/flutterjs_engine/package/material/dist/material/gesture_detector.js.map
deleted file mode 100644
index bdfa7300..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/gesture_detector.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/material/gesture_detector.js"],
-  "sourcesContent": ["import { Widget, StatelessWidget } from '../core/widget_element.js';\r\nimport { Element } from \"@flutterjs/runtime\"\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport {\r\n  TapRecognizer,\r\n  LongPressRecognizer,\r\n  SwipeRecognizer,\r\n  PanRecognizer,\r\n  ScaleRecognizer\r\n} from '@flutterjs/runtime';\r\n\r\n// ============================================================================\r\n// GESTURE DETECTOR\r\n// ============================================================================\r\n\r\n/**\r\n * GestureDetector Widget\r\n * \r\n * Wraps a child widget and detects various gestures\r\n * Supports: tap, double-tap, long-press, swipe, pan, scale\r\n * Works with both mouse and touch events\r\n */\r\nclass GestureDetector extends StatelessWidget {\r\n  constructor({\r\n    key = null,\r\n    child = null,\r\n    // Tap gestures\r\n    onTap = null,\r\n    onTapDown = null,\r\n    onTapUp = null,\r\n    onTapCancel = null,\r\n    onDoubleTap = null,\r\n    // Long press\r\n    onLongPress = null,\r\n    onLongPressStart = null,\r\n    onLongPressMoveUpdate = null,\r\n    onLongPressEnd = null,\r\n    onLongPressUp = null,\r\n    // Swipe\r\n    onSwipe = null,\r\n    onSwipeLeft = null,\r\n    onSwipeRight = null,\r\n    onSwipeUp = null,\r\n    onSwipeDown = null,\r\n    // Pan\r\n    onPan = null,\r\n    onPanStart = null,\r\n    onPanUpdate = null,\r\n    onPanEnd = null,\r\n    // Scale/Pinch\r\n    onScale = null,\r\n    onScaleStart = null,\r\n    onScaleUpdate = null,\r\n    onScaleEnd = null,\r\n    // Configuration\r\n    behavior = 'opaque',\r\n    excludeFromSemantics = false\r\n  } = {}) {\r\n    super(key);\r\n\r\n    this.child = child;\r\n\r\n    // Tap callbacks\r\n    this.onTap = onTap;\r\n    this.onTapDown = onTapDown;\r\n    this.onTapUp = onTapUp;\r\n    this.onTapCancel = onTapCancel;\r\n    this.onDoubleTap = onDoubleTap;\r\n\r\n    // Long press callbacks\r\n    this.onLongPress = onLongPress;\r\n    this.onLongPressStart = onLongPressStart;\r\n    this.onLongPressMoveUpdate = onLongPressMoveUpdate;\r\n    this.onLongPressEnd = onLongPressEnd;\r\n    this.onLongPressUp = onLongPressUp;\r\n\r\n    // Swipe callbacks\r\n    this.onSwipe = onSwipe;\r\n    this.onSwipeLeft = onSwipeLeft;\r\n    this.onSwipeRight = onSwipeRight;\r\n    this.onSwipeUp = onSwipeUp;\r\n    this.onSwipeDown = onSwipeDown;\r\n\r\n    // Pan callbacks\r\n    this.onPan = onPan;\r\n    this.onPanStart = onPanStart;\r\n    this.onPanUpdate = onPanUpdate;\r\n    this.onPanEnd = onPanEnd;\r\n\r\n    // Scale callbacks\r\n    this.onScale = onScale;\r\n    this.onScaleStart = onScaleStart;\r\n    this.onScaleUpdate = onScaleUpdate;\r\n    this.onScaleEnd = onScaleEnd;\r\n\r\n    // Configuration\r\n    this.behavior = behavior;\r\n    this.excludeFromSemantics = excludeFromSemantics;\r\n\r\n    // Gesture recognizers\r\n    this.recognizers = [];\r\n    this._elementId = null;\r\n  }\r\n\r\n  /**\r\n   * Build gesture detector with child\r\n   */\r\n  build(context) {\r\n    this._elementId = context.element.getElementId();\r\n\r\n    let childVNode = null;\r\n    if (this.child) {\r\n      const childElement = this.child.createElement?.(context.element, context.element.runtime) || this.child;\r\n      if (childElement.mount) {\r\n        childElement.mount(context.element);\r\n      }\r\n      childVNode = childElement.performRebuild?.() || null;\r\n    }\r\n\r\n    const containerStyle = {\r\n      position: 'relative',\r\n      userSelect: this.behavior === 'opaque' ? 'none' : 'auto',\r\n      WebkitUserSelect: this.behavior === 'opaque' ? 'none' : 'auto',\r\n      MozUserSelect: this.behavior === 'opaque' ? 'none' : 'auto',\r\n      msUserSelect: this.behavior === 'opaque' ? 'none' : 'auto',\r\n      touchAction: 'manipulation',\r\n      cursor: 'pointer'\r\n    };\r\n\r\n    const elementId = this._elementId;\r\n\r\n    return new VNode({\r\n      tag: 'div',\r\n      props: {\r\n        style: containerStyle,\r\n        'data-widget': 'GestureDetector',\r\n        'data-element-id': elementId,\r\n        onMouseDown: (e) => this._handleMouseDown(e, elementId),\r\n        onMouseUp: (e) => this._handleMouseUp(e, elementId),\r\n        onMouseMove: (e) => this._handleMouseMove(e, elementId),\r\n        onMouseLeave: (e) => this._handleMouseLeave(e, elementId),\r\n        onTouchStart: (e) => this._handleTouchStart(e, elementId),\r\n        onTouchEnd: (e) => this._handleTouchEnd(e, elementId),\r\n        onTouchMove: (e) => this._handleTouchMove(e, elementId),\r\n        onTouchCancel: (e) => this._handleTouchCancel(e, elementId),\r\n        onContextMenu: (e) => this._handleContextMenu(e, elementId)\r\n      },\r\n      children: childVNode ? [childVNode] : []\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Initialize gesture recognizers on mount\r\n   */\r\n  _initializeRecognizers(elementId) {\r\n    if (this.recognizers.length > 0) return; // Already initialized\r\n\r\n    // Tap gesture\r\n    if (this.onTap || this.onTapDown || this.onTapUp) {\r\n      const tapRecognizer = new TapRecognizer(\r\n        (event) => {\r\n          if (this.onTap) this.onTap(event);\r\n          if (this.onTapUp) this.onTapUp(event);\r\n        },\r\n        { maxDuration: 300, maxMovement: 10 }\r\n      );\r\n      this.recognizers.push(tapRecognizer);\r\n    }\r\n\r\n    // Double tap gesture\r\n    if (this.onDoubleTap) {\r\n      const doubleTapRecognizer = new TapRecognizer(\r\n        (event) => {\r\n          if (event.tapCount === 2) {\r\n            this.onDoubleTap(event);\r\n          }\r\n        },\r\n        { minTaps: 2, maxTaps: 2 }\r\n      );\r\n      this.recognizers.push(doubleTapRecognizer);\r\n    }\r\n\r\n    // Long press gesture\r\n    if (this.onLongPress || this.onLongPressStart || this.onLongPressEnd) {\r\n      const longPressRecognizer = new LongPressRecognizer(\r\n        (event) => {\r\n          if (this.onLongPress) this.onLongPress(event);\r\n        },\r\n        { duration: 500, maxMovement: 10 }\r\n      );\r\n      this.recognizers.push(longPressRecognizer);\r\n    }\r\n\r\n    // Swipe gesture\r\n    if (this.onSwipe || this.onSwipeLeft || this.onSwipeRight || this.onSwipeUp || this.onSwipeDown) {\r\n      const swipeRecognizer = new SwipeRecognizer(\r\n        (event) => {\r\n          if (this.onSwipe) this.onSwipe(event);\r\n\r\n          // Direction-specific callbacks\r\n          if (event.direction === 'left' && this.onSwipeLeft) {\r\n            this.onSwipeLeft(event);\r\n          } else if (event.direction === 'right' && this.onSwipeRight) {\r\n            this.onSwipeRight(event);\r\n          } else if (event.direction === 'up' && this.onSwipeUp) {\r\n            this.onSwipeUp(event);\r\n          } else if (event.direction === 'down' && this.onSwipeDown) {\r\n            this.onSwipeDown(event);\r\n          }\r\n        },\r\n        { minDistance: 50, maxDuration: 300 }\r\n      );\r\n      this.recognizers.push(swipeRecognizer);\r\n    }\r\n\r\n    // Pan gesture\r\n    if (this.onPan || this.onPanStart || this.onPanUpdate || this.onPanEnd) {\r\n      const panRecognizer = new PanRecognizer(\r\n        (event) => {\r\n          if (this.onPan) this.onPan(event);\r\n        },\r\n        {\r\n          minDistance: 10,\r\n          onStart: (event) => {\r\n            if (this.onPanStart) this.onPanStart(event);\r\n          },\r\n          onUpdate: (event) => {\r\n            if (this.onPanUpdate) this.onPanUpdate(event);\r\n          },\r\n          onEnd: (event) => {\r\n            if (this.onPanEnd) this.onPanEnd(event);\r\n          }\r\n        }\r\n      );\r\n      this.recognizers.push(panRecognizer);\r\n    }\r\n\r\n    // Scale gesture (pinch)\r\n    if (this.onScale || this.onScaleStart || this.onScaleUpdate || this.onScaleEnd) {\r\n      const scaleRecognizer = new ScaleRecognizer(\r\n        (event) => {\r\n          if (this.onScale) this.onScale(event);\r\n        },\r\n        {\r\n          minScale: 0.5,\r\n          maxScale: 2.0,\r\n          onStart: (event) => {\r\n            if (this.onScaleStart) this.onScaleStart(event);\r\n          },\r\n          onUpdate: (event) => {\r\n            if (this.onScaleUpdate) this.onScaleUpdate(event);\r\n          },\r\n          onEnd: (event) => {\r\n            if (this.onScaleEnd) this.onScaleEnd(event);\r\n          }\r\n        }\r\n      );\r\n      this.recognizers.push(scaleRecognizer);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Route events to recognizers\r\n   */\r\n  _routeEvent(eventType, event, elementId) {\r\n    this._initializeRecognizers(elementId);\r\n\r\n    this.recognizers.forEach(recognizer => {\r\n      if (!recognizer.isDisposed) {\r\n        recognizer.handleEvent(eventType, event);\r\n      }\r\n    });\r\n  }\r\n\r\n  // ========== MOUSE EVENTS ==========\r\n\r\n  _handleMouseDown(e, elementId) {\r\n    this._routeEvent('mousedown', e, elementId);\r\n    if (this.onTapDown) {\r\n      this.onTapDown({\r\n        type: 'tapdown',\r\n        position: { x: e.clientX, y: e.clientY },\r\n        nativeEvent: e\r\n      });\r\n    }\r\n  }\r\n\r\n  _handleMouseUp(e, elementId) {\r\n    this._routeEvent('mouseup', e, elementId);\r\n  }\r\n\r\n  _handleMouseMove(e, elementId) {\r\n    this._routeEvent('mousemove', e, elementId);\r\n  }\r\n\r\n  _handleMouseLeave(e, elementId) {\r\n    if (this.onTapCancel) {\r\n      this.onTapCancel({\r\n        type: 'tapcancel',\r\n        nativeEvent: e\r\n      });\r\n    }\r\n  }\r\n\r\n  // ========== TOUCH EVENTS ==========\r\n\r\n  _handleTouchStart(e, elementId) {\r\n    this._routeEvent('touchstart', e, elementId);\r\n    if (this.onTapDown) {\r\n      const touch = e.touches[0];\r\n      this.onTapDown({\r\n        type: 'tapdown',\r\n        position: { x: touch.clientX, y: touch.clientY },\r\n        nativeEvent: e\r\n      });\r\n    }\r\n  }\r\n\r\n  _handleTouchEnd(e, elementId) {\r\n    this._routeEvent('touchend', e, elementId);\r\n  }\r\n\r\n  _handleTouchMove(e, elementId) {\r\n    this._routeEvent('touchmove', e, elementId);\r\n  }\r\n\r\n  _handleTouchCancel(e, elementId) {\r\n    this._routeEvent('touchcancel', e, elementId);\r\n    if (this.onTapCancel) {\r\n      this.onTapCancel({\r\n        type: 'tapcancel',\r\n        nativeEvent: e\r\n      });\r\n    }\r\n  }\r\n\r\n  // ========== CONTEXT MENU ==========\r\n\r\n  _handleContextMenu(e, elementId) {\r\n    if (this.onLongPress) {\r\n      e.preventDefault();\r\n      this._routeEvent('contextmenu', e, elementId);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Cleanup\r\n   */\r\n  dispose() {\r\n    this.recognizers.forEach(recognizer => {\r\n      recognizer.dispose();\r\n    });\r\n    this.recognizers = [];\r\n  }\r\n\r\n  createElement(parent, runtime) {\r\n    return new GestureDetectorElement(this, parent, runtime);\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    if (this.onTap) properties.push({ name: 'onTap', value: 'fn' });\r\n    if (this.onDoubleTap) properties.push({ name: 'onDoubleTap', value: 'fn' });\r\n    if (this.onLongPress) properties.push({ name: 'onLongPress', value: 'fn' });\r\n    if (this.onSwipe) properties.push({ name: 'onSwipe', value: 'fn' });\r\n    if (this.onPan) properties.push({ name: 'onPan', value: 'fn' });\r\n  }\r\n}\r\n\r\nclass GestureDetectorElement extends Element {\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n\r\n  unmount() {\r\n    if (this.widget) {\r\n      this.widget.dispose();\r\n    }\r\n    super.unmount();\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport {\r\n  GestureDetector,\r\n  GestureDetectorElement\r\n};"],
-  "mappings": "AAAA,OAAiB,mBAAAA,MAAuB,4BACxC,OAAS,WAAAC,MAAe,qBACxB,OAAS,SAAAC,MAAa,wBACtB,OACE,iBAAAC,EACA,uBAAAC,EACA,mBAAAC,EACA,iBAAAC,EACA,mBAAAC,MACK,qBAaP,MAAMC,UAAwBR,CAAgB,CAC5C,YAAY,CACV,IAAAS,EAAM,KACN,MAAAC,EAAQ,KAER,MAAAC,EAAQ,KACR,UAAAC,EAAY,KACZ,QAAAC,EAAU,KACV,YAAAC,EAAc,KACd,YAAAC,EAAc,KAEd,YAAAC,EAAc,KACd,iBAAAC,EAAmB,KACnB,sBAAAC,EAAwB,KACxB,eAAAC,EAAiB,KACjB,cAAAC,EAAgB,KAEhB,QAAAC,EAAU,KACV,YAAAC,EAAc,KACd,aAAAC,EAAe,KACf,UAAAC,EAAY,KACZ,YAAAC,EAAc,KAEd,MAAAC,EAAQ,KACR,WAAAC,EAAa,KACb,YAAAC,EAAc,KACd,SAAAC,EAAW,KAEX,QAAAC,EAAU,KACV,aAAAC,EAAe,KACf,cAAAC,EAAgB,KAChB,WAAAC,EAAa,KAEb,SAAAC,EAAW,SACX,qBAAAC,EAAuB,EACzB,EAAI,CAAC,EAAG,CACN,MAAM1B,CAAG,EAET,KAAK,MAAQC,EAGb,KAAK,MAAQC,EACb,KAAK,UAAYC,EACjB,KAAK,QAAUC,EACf,KAAK,YAAcC,EACnB,KAAK,YAAcC,EAGnB,KAAK,YAAcC,EACnB,KAAK,iBAAmBC,EACxB,KAAK,sBAAwBC,EAC7B,KAAK,eAAiBC,EACtB,KAAK,cAAgBC,EAGrB,KAAK,QAAUC,EACf,KAAK,YAAcC,EACnB,KAAK,aAAeC,EACpB,KAAK,UAAYC,EACjB,KAAK,YAAcC,EAGnB,KAAK,MAAQC,EACb,KAAK,WAAaC,EAClB,KAAK,YAAcC,EACnB,KAAK,SAAWC,EAGhB,KAAK,QAAUC,EACf,KAAK,aAAeC,EACpB,KAAK,cAAgBC,EACrB,KAAK,WAAaC,EAGlB,KAAK,SAAWC,EAChB,KAAK,qBAAuBC,EAG5B,KAAK,YAAc,CAAC,EACpB,KAAK,WAAa,IACpB,CAKA,MAAMC,EAAS,CACb,KAAK,WAAaA,EAAQ,QAAQ,aAAa,EAE/C,IAAIC,EAAa,KACjB,GAAI,KAAK,MAAO,CACd,MAAMC,EAAe,KAAK,MAAM,gBAAgBF,EAAQ,QAASA,EAAQ,QAAQ,OAAO,GAAK,KAAK,MAC9FE,EAAa,OACfA,EAAa,MAAMF,EAAQ,OAAO,EAEpCC,EAAaC,EAAa,iBAAiB,GAAK,IAClD,CAEA,MAAMC,EAAiB,CACrB,SAAU,WACV,WAAY,KAAK,WAAa,SAAW,OAAS,OAClD,iBAAkB,KAAK,WAAa,SAAW,OAAS,OACxD,cAAe,KAAK,WAAa,SAAW,OAAS,OACrD,aAAc,KAAK,WAAa,SAAW,OAAS,OACpD,YAAa,eACb,OAAQ,SACV,EAEMC,EAAY,KAAK,WAEvB,OAAO,IAAItC,EAAM,CACf,IAAK,MACL,MAAO,CACL,MAAOqC,EACP,cAAe,kBACf,kBAAmBC,EACnB,YAAcC,GAAM,KAAK,iBAAiBA,EAAGD,CAAS,EACtD,UAAYC,GAAM,KAAK,eAAeA,EAAGD,CAAS,EAClD,YAAcC,GAAM,KAAK,iBAAiBA,EAAGD,CAAS,EACtD,aAAeC,GAAM,KAAK,kBAAkBA,EAAGD,CAAS,EACxD,aAAeC,GAAM,KAAK,kBAAkBA,EAAGD,CAAS,EACxD,WAAaC,GAAM,KAAK,gBAAgBA,EAAGD,CAAS,EACpD,YAAcC,GAAM,KAAK,iBAAiBA,EAAGD,CAAS,EACtD,cAAgBC,GAAM,KAAK,mBAAmBA,EAAGD,CAAS,EAC1D,cAAgBC,GAAM,KAAK,mBAAmBA,EAAGD,CAAS,CAC5D,EACA,SAAUH,EAAa,CAACA,CAAU,EAAI,CAAC,CACzC,CAAC,CACH,CAKA,uBAAuBG,EAAW,CAChC,GAAI,OAAK,YAAY,OAAS,GAG9B,IAAI,KAAK,OAAS,KAAK,WAAa,KAAK,QAAS,CAChD,MAAME,EAAgB,IAAIvC,EACvBwC,GAAU,CACL,KAAK,OAAO,KAAK,MAAMA,CAAK,EAC5B,KAAK,SAAS,KAAK,QAAQA,CAAK,CACtC,EACA,CAAE,YAAa,IAAK,YAAa,EAAG,CACtC,EACA,KAAK,YAAY,KAAKD,CAAa,CACrC,CAGA,GAAI,KAAK,YAAa,CACpB,MAAME,EAAsB,IAAIzC,EAC7BwC,GAAU,CACLA,EAAM,WAAa,GACrB,KAAK,YAAYA,CAAK,CAE1B,EACA,CAAE,QAAS,EAAG,QAAS,CAAE,CAC3B,EACA,KAAK,YAAY,KAAKC,CAAmB,CAC3C,CAGA,GAAI,KAAK,aAAe,KAAK,kBAAoB,KAAK,eAAgB,CACpE,MAAMC,EAAsB,IAAIzC,EAC7BuC,GAAU,CACL,KAAK,aAAa,KAAK,YAAYA,CAAK,CAC9C,EACA,CAAE,SAAU,IAAK,YAAa,EAAG,CACnC,EACA,KAAK,YAAY,KAAKE,CAAmB,CAC3C,CAGA,GAAI,KAAK,SAAW,KAAK,aAAe,KAAK,cAAgB,KAAK,WAAa,KAAK,YAAa,CAC/F,MAAMC,EAAkB,IAAIzC,EACzBsC,GAAU,CACL,KAAK,SAAS,KAAK,QAAQA,CAAK,EAGhCA,EAAM,YAAc,QAAU,KAAK,YACrC,KAAK,YAAYA,CAAK,EACbA,EAAM,YAAc,SAAW,KAAK,aAC7C,KAAK,aAAaA,CAAK,EACdA,EAAM,YAAc,MAAQ,KAAK,UAC1C,KAAK,UAAUA,CAAK,EACXA,EAAM,YAAc,QAAU,KAAK,aAC5C,KAAK,YAAYA,CAAK,CAE1B,EACA,CAAE,YAAa,GAAI,YAAa,GAAI,CACtC,EACA,KAAK,YAAY,KAAKG,CAAe,CACvC,CAGA,GAAI,KAAK,OAAS,KAAK,YAAc,KAAK,aAAe,KAAK,SAAU,CACtE,MAAMC,EAAgB,IAAIzC,EACvBqC,GAAU,CACL,KAAK,OAAO,KAAK,MAAMA,CAAK,CAClC,EACA,CACE,YAAa,GACb,QAAUA,GAAU,CACd,KAAK,YAAY,KAAK,WAAWA,CAAK,CAC5C,EACA,SAAWA,GAAU,CACf,KAAK,aAAa,KAAK,YAAYA,CAAK,CAC9C,EACA,MAAQA,GAAU,CACZ,KAAK,UAAU,KAAK,SAASA,CAAK,CACxC,CACF,CACF,EACA,KAAK,YAAY,KAAKI,CAAa,CACrC,CAGA,GAAI,KAAK,SAAW,KAAK,cAAgB,KAAK,eAAiB,KAAK,WAAY,CAC9E,MAAMC,EAAkB,IAAIzC,EACzBoC,GAAU,CACL,KAAK,SAAS,KAAK,QAAQA,CAAK,CACtC,EACA,CACE,SAAU,GACV,SAAU,EACV,QAAUA,GAAU,CACd,KAAK,cAAc,KAAK,aAAaA,CAAK,CAChD,EACA,SAAWA,GAAU,CACf,KAAK,eAAe,KAAK,cAAcA,CAAK,CAClD,EACA,MAAQA,GAAU,CACZ,KAAK,YAAY,KAAK,WAAWA,CAAK,CAC5C,CACF,CACF,EACA,KAAK,YAAY,KAAKK,CAAe,CACvC,EACF,CAKA,YAAYC,EAAWN,EAAOH,EAAW,CACvC,KAAK,uBAAuBA,CAAS,EAErC,KAAK,YAAY,QAAQU,GAAc,CAChCA,EAAW,YACdA,EAAW,YAAYD,EAAWN,CAAK,CAE3C,CAAC,CACH,CAIA,iBAAiBF,EAAGD,EAAW,CAC7B,KAAK,YAAY,YAAaC,EAAGD,CAAS,EACtC,KAAK,WACP,KAAK,UAAU,CACb,KAAM,UACN,SAAU,CAAE,EAAGC,EAAE,QAAS,EAAGA,EAAE,OAAQ,EACvC,YAAaA,CACf,CAAC,CAEL,CAEA,eAAeA,EAAGD,EAAW,CAC3B,KAAK,YAAY,UAAWC,EAAGD,CAAS,CAC1C,CAEA,iBAAiBC,EAAGD,EAAW,CAC7B,KAAK,YAAY,YAAaC,EAAGD,CAAS,CAC5C,CAEA,kBAAkBC,EAAGD,EAAW,CAC1B,KAAK,aACP,KAAK,YAAY,CACf,KAAM,YACN,YAAaC,CACf,CAAC,CAEL,CAIA,kBAAkBA,EAAGD,EAAW,CAE9B,GADA,KAAK,YAAY,aAAcC,EAAGD,CAAS,EACvC,KAAK,UAAW,CAClB,MAAMW,EAAQV,EAAE,QAAQ,CAAC,EACzB,KAAK,UAAU,CACb,KAAM,UACN,SAAU,CAAE,EAAGU,EAAM,QAAS,EAAGA,EAAM,OAAQ,EAC/C,YAAaV,CACf,CAAC,CACH,CACF,CAEA,gBAAgBA,EAAGD,EAAW,CAC5B,KAAK,YAAY,WAAYC,EAAGD,CAAS,CAC3C,CAEA,iBAAiBC,EAAGD,EAAW,CAC7B,KAAK,YAAY,YAAaC,EAAGD,CAAS,CAC5C,CAEA,mBAAmBC,EAAGD,EAAW,CAC/B,KAAK,YAAY,cAAeC,EAAGD,CAAS,EACxC,KAAK,aACP,KAAK,YAAY,CACf,KAAM,YACN,YAAaC,CACf,CAAC,CAEL,CAIA,mBAAmBA,EAAGD,EAAW,CAC3B,KAAK,cACPC,EAAE,eAAe,EACjB,KAAK,YAAY,cAAeA,EAAGD,CAAS,EAEhD,CAKA,SAAU,CACR,KAAK,YAAY,QAAQU,GAAc,CACrCA,EAAW,QAAQ,CACrB,CAAC,EACD,KAAK,YAAc,CAAC,CACtB,CAEA,cAAcE,EAAQC,EAAS,CAC7B,OAAO,IAAIC,EAAuB,KAAMF,EAAQC,CAAO,CACzD,CAEA,oBAAoBE,EAAY,CAC9B,MAAM,oBAAoBA,CAAU,EAChC,KAAK,OAAOA,EAAW,KAAK,CAAE,KAAM,QAAS,MAAO,IAAK,CAAC,EAC1D,KAAK,aAAaA,EAAW,KAAK,CAAE,KAAM,cAAe,MAAO,IAAK,CAAC,EACtE,KAAK,aAAaA,EAAW,KAAK,CAAE,KAAM,cAAe,MAAO,IAAK,CAAC,EACtE,KAAK,SAASA,EAAW,KAAK,CAAE,KAAM,UAAW,MAAO,IAAK,CAAC,EAC9D,KAAK,OAAOA,EAAW,KAAK,CAAE,KAAM,QAAS,MAAO,IAAK,CAAC,CAChE,CACF,CAEA,MAAMD,UAA+BrD,CAAQ,CAC3C,gBAAiB,CACf,OAAO,KAAK,OAAO,MAAM,KAAK,OAAO,CACvC,CAEA,SAAU,CACJ,KAAK,QACP,KAAK,OAAO,QAAQ,EAEtB,MAAM,QAAQ,CAChB,CACF",
-  "names": ["StatelessWidget", "Element", "VNode", "TapRecognizer", "LongPressRecognizer", "SwipeRecognizer", "PanRecognizer", "ScaleRecognizer", "GestureDetector", "key", "child", "onTap", "onTapDown", "onTapUp", "onTapCancel", "onDoubleTap", "onLongPress", "onLongPressStart", "onLongPressMoveUpdate", "onLongPressEnd", "onLongPressUp", "onSwipe", "onSwipeLeft", "onSwipeRight", "onSwipeUp", "onSwipeDown", "onPan", "onPanStart", "onPanUpdate", "onPanEnd", "onScale", "onScaleStart", "onScaleUpdate", "onScaleEnd", "behavior", "excludeFromSemantics", "context", "childVNode", "childElement", "containerStyle", "elementId", "e", "tapRecognizer", "event", "doubleTapRecognizer", "longPressRecognizer", "swipeRecognizer", "panRecognizer", "scaleRecognizer", "eventType", "recognizer", "touch", "parent", "runtime", "GestureDetectorElement", "properties"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/material/icon.js b/packages/flutterjs_engine/package/material/dist/material/icon.js
deleted file mode 100644
index 4d4a4957..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/icon.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{StatelessWidget as M}from"../core/widget_element.js";import{VNode as x}from"@flutterjs/vdom/vnode";import{BlendMode as a,TextDirection as g}from"../utils/utils.js";const b=24,D=24,_={[a.srcOver]:"normal",[a.srcIn]:"multiply",[a.srcOut]:"lighten",[a.srcATop]:"screen",[a.dstOver]:"overlay",[a.dstIn]:"darken",[a.dstOut]:"color-dodge",[a.dstATop]:"color-burn",[a.plus]:"lighten",[a.screen]:"screen",[a.overlay]:"overlay",[a.darken]:"darken",[a.lighten]:"lighten",[a.colorDodge]:"color-dodge",[a.colorBurn]:"color-burn",[a.hardLight]:"hard-light",[a.softLight]:"soft-light",[a.difference]:"difference",[a.exclusion]:"exclusion",[a.multiply]:"multiply",[a.hue]:"hue",[a.saturation]:"saturation",[a.color]:"color",[a.luminosity]:"luminosity"};class i{constructor({codePoint:t=0,fontFamily:e="Material Icons",fontPackage:n=null,matchTextDirection:o=!1,fontFamilyFallback:l=null}={}){this.codePoint=t,this.fontFamily=e,this.fontPackage=n,this.matchTextDirection=o,this.fontFamilyFallback=Array.isArray(l)?l:null}getCharacter(){return String.fromCharCode(this.codePoint)}toString(){return`IconData(U+${this.codePoint.toString(16).toUpperCase().padStart(5,"0")})`}equals(t){return!t||!(t instanceof i)?!1:this.codePoint===t.codePoint&&this.fontFamily===t.fontFamily&&this.fontPackage===t.fontPackage&&this.matchTextDirection===t.matchTextDirection&&this._arrayEquals(this.fontFamilyFallback,t.fontFamilyFallback)}_arrayEquals(t,e){return!t&&!e?!0:!t||!e||t.length!==e.length?!1:t.every((n,o)=>n===e[o])}hashCode(){let t=this.codePoint;return t=(t<<5)-t+(this.fontFamily?this.fontFamily.charCodeAt(0):0),t=(t<<5)-t+(this.matchTextDirection?1:0),this.fontFamilyFallback&&this.fontFamilyFallback.forEach(e=>{t=(t<<5)-t+(e?e.charCodeAt(0):0)}),t}}class y{constructor({color:t=null,opacity:e=1,size:n=b,fill:o=null,weight:l=null,grade:s=null,opticalSize:r=null,shadows:c=null,applyTextScaling:d=!1}={}){this.color=t,this.opacity=e,this.size=n,this.fill=o,this.weight=l,this.grade=s,this.opticalSize=r,this.shadows=c,this.applyTextScaling=d}copyWith({color:t,opacity:e,size:n,fill:o,weight:l,grade:s,opticalSize:r,shadows:c,applyTextScaling:d}={}){return new y({color:t!==void 0?t:this.color,opacity:e!==void 0?e:this.opacity,size:n!==void 0?n:this.size,fill:o!==void 0?o:this.fill,weight:l!==void 0?l:this.weight,grade:s!==void 0?s:this.grade,opticalSize:r!==void 0?r:this.opticalSize,shadows:c!==void 0?c:this.shadows,applyTextScaling:d!==void 0?d:this.applyTextScaling})}}class T extends M{constructor(t,e={}){let n=null,o={};t&&(t.constructor?.name==="IconData"||t.codePoint!==void 0)?(n=t,o=e):(o=t||{},n=o.icon);const{key:l=null,size:s=null,fill:r=null,weight:c=null,grade:d=null,opticalSize:u=null,color:w=null,shadows:h=null,semanticLabel:p=null,textDirection:f=null,applyTextScaling:F=null,blendMode:I=null,fontWeight:m=null}=o;if(super(l),r!==null&&(r<0||r>1))throw new Error("fill must be between 0.0 and 1.0");if(c!==null&&c<=0)throw new Error("weight must be greater than 0.0");if(u!==null&&u<=0)throw new Error("opticalSize must be greater than 0.0");this.icon=n,this.size=s,this.fill=r,this.weight=c,this.grade=d,this.opticalSize=u,this.color=w,this.shadows=h,this.semanticLabel=p,this.textDirection=f,this.applyTextScaling=F,this.blendMode=I||a.srcOver,this.fontWeight=m,this._injectFont()}_injectFont(){if(typeof document>"u"||document.getElementById("flutterjs-material-icons"))return;const t=document.createElement("link");t.id="flutterjs-material-icons",t.rel="stylesheet",t.href="https://fonts.googleapis.com/icon?family=Material+Icons",document.head.appendChild(t)}build(t){this._injectFont();const e=this.textDirection||this._getTextDirection(t),n=this._getIconTheme(t)||new y,o=this.applyTextScaling??n.applyTextScaling??!1,l=this.size??n.size??b,s=o?this._scaleTextSize(l,t):l,r=this.fill??n.fill,c=this.weight??n.weight,d=this.grade??n.grade,u=this.opticalSize??n.opticalSize,w=this.shadows??n.shadows,h=this.icon;if(!h||h.codePoint===void 0&&!(h instanceof i))return this._buildEmptyIcon(s);const p=n.opacity??1;let f=this.color??n.color??"#000000";p!==1&&(f=this._applyOpacity(f,p));const F=this._buildFontVariations(r,c,d,u),I=this._buildInlineStyles({color:f,fontSize:s,fontFamily:h.fontFamily,fontWeight:this.fontWeight,fontFamilyFallback:h.fontFamilyFallback,shadows:w,fontVariations:F,blendMode:this.blendMode,textDirection:e});let m=this._buildIconElement(h,I);h.matchTextDirection&&e===g.rtl&&(m=this._mirrorIcon(m,s));const S=t?.element?.getElementId?.()||"icon-"+Math.random().toString(36).substr(2,9),P=t?.element?.getWidgetPath?.()||"Icon";return new x({tag:"span",props:{role:"img","aria-label":this.semanticLabel||"Icon","data-element-id":S,"data-widget-path":P,"data-widget":"Icon","data-icon-codepoint":`U+${h.codePoint.toString(16).toUpperCase()}`,title:this.semanticLabel||"",style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:`${s}px`,height:`${s}px`}},children:[m],key:this.key})}_buildEmptyIcon(t){return new x({tag:"span",props:{style:{display:"inline-block",width:`${t}px`,height:`${t}px`}}})}_buildIconElement(t,e){return new x({tag:"span",props:{className:"fjs-icon",style:{...e,display:"inline-flex",alignItems:"center",justifyContent:"center",lineHeight:"1.0",whiteSpace:"nowrap"}},children:[t.getCharacter()]})}_mirrorIcon(t,e){return new x({tag:"span",props:{style:{display:"inline-flex",transform:"scaleX(-1)",transformOrigin:"center",width:`${e}px`,height:`${e}px`,alignItems:"center",justifyContent:"center"}},children:[t]})}_buildInlineStyles({color:t,fontSize:e,fontFamily:n,fontWeight:o,fontFamilyFallback:l,shadows:s,fontVariations:r,blendMode:c,textDirection:d}){const u={fontSize:`${e}px`,fontFamily:this._buildFontFamily(n,l),color:t,fontVariationSettings:r,textShadow:this._buildTextShadow(s),mixBlendMode:_[c]||"normal",direction:d===g.rtl?"rtl":"ltr",lineHeight:"1.0",height:"1em",userSelect:"none",WebkitUserSelect:"none",MozUserSelect:"none"};return o&&(u.fontWeight=this._normalizeFontWeight(o)),u}_buildFontFamily(t,e){if(!t)return"'Material Icons', Arial, sans-serif";const n=[t];return Array.isArray(e)&&e.length>0&&n.push(...e),n.push("Arial","sans-serif"),n.map(o=>`'${o}'`).join(", ")}_buildFontVariations(t,e,n,o){const l=[];return t!=null&&l.push(`'FILL' ${t}`),e!=null&&l.push(`'wght' ${e}`),n!=null&&l.push(`'GRAD' ${n}`),o!=null&&l.push(`'opsz' ${o}`),l.length>0?l.join(", "):"normal"}_buildTextShadow(t){return!t||!Array.isArray(t)?"none":t.map(e=>{const n=e.offsetX??0,o=e.offsetY??0,l=e.blurRadius??0,s=e.color??"rgba(0, 0, 0, 0.25)";return`${n}px ${o}px ${l}px ${s}`}).join(", ")}_normalizeFontWeight(t){const e={thin:"100",extralight:"200",light:"300",normal:"400",regular:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"};return typeof t=="string"?e[t.toLowerCase()]||t:String(t)}_applyOpacity(t,e){if(!t)return t;if(t.startsWith("#")){const n=t.slice(1),o=parseInt(n.substring(0,2),16),l=parseInt(n.substring(2,4),16),s=parseInt(n.substring(4,6),16);return`rgba(${o}, ${l}, ${s}, ${e})`}return t.startsWith("rgb")?t.replace(/[\d.]+\)/,`${e})`):t}_getTextDirection(t){return typeof document<"u"?(document.documentElement.dir||document.dir||"ltr")==="rtl"?g.rtl:g.ltr:g.ltr}_getIconTheme(t){return new y}_scaleTextSize(t,e){return t}debugFillProperties(t){super.debugFillProperties(t),t.push({name:"icon",value:this.icon}),t.push({name:"size",value:this.size}),t.push({name:"fill",value:this.fill}),t.push({name:"weight",value:this.weight}),t.push({name:"grade",value:this.grade}),t.push({name:"opticalSize",value:this.opticalSize}),t.push({name:"color",value:this.color}),t.push({name:"blendMode",value:this.blendMode}),t.push({name:"semanticLabel",value:this.semanticLabel}),this.shadows&&t.push({name:"shadows",value:this.shadows})}}const z={home:new i({codePoint:59530,fontFamily:"Material Icons"}),settings:new i({codePoint:59576,fontFamily:"Material Icons"}),search:new i({codePoint:59574,fontFamily:"Material Icons"}),favorite:new i({codePoint:59518,fontFamily:"Material Icons"}),favoriteBorder:new i({codePoint:59595,fontFamily:"Material Icons"}),star:new i({codePoint:59448,fontFamily:"Material Icons"}),starBorder:new i({codePoint:59451,fontFamily:"Material Icons"}),close:new i({codePoint:58829,fontFamily:"Material Icons"}),menu:new i({codePoint:58834,fontFamily:"Material Icons"}),arrowBack:new i({codePoint:58848,fontFamily:"Material Icons"}),arrowForward:new i({codePoint:58849,fontFamily:"Material Icons"}),add:new i({codePoint:57669,fontFamily:"Material Icons"}),delete:new i({codePoint:59506,fontFamily:"Material Icons"}),edit:new i({codePoint:58313,fontFamily:"Material Icons"}),check:new i({codePoint:58826,fontFamily:"Material Icons"}),checkCircle:new i({codePoint:59500,fontFamily:"Material Icons"}),error:new i({codePoint:59267,fontFamily:"Material Icons"}),errorOutline:new i({codePoint:57345,fontFamily:"Material Icons"}),info:new i({codePoint:59535,fontFamily:"Material Icons"}),warning:new i({codePoint:57346,fontFamily:"Material Icons"}),download:new i({codePoint:58052,fontFamily:"Material Icons"}),upload:new i({codePoint:58054,fontFamily:"Material Icons"}),refresh:new i({codePoint:58837,fontFamily:"Material Icons"}),moreVert:new i({codePoint:58836,fontFamily:"Material Icons"}),moreHoriz:new i({codePoint:58835,fontFamily:"Material Icons"})};export{T as Icon,i as IconData,y as IconThemeData,z as Icons};
-//# sourceMappingURL=icon.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/material/icon.js.map b/packages/flutterjs_engine/package/material/dist/material/icon.js.map
deleted file mode 100644
index 8a456843..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/icon.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/material/icon.js"],
-  "sourcesContent": ["import { StatelessWidget } from '../core/widget_element.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { BlendMode, TextDirection } from '../utils/utils.js';\r\n\r\nconst DEFAULT_ICON_SIZE = 24;\r\nconst DEFAULT_FONT_SIZE = 24;\r\n\r\nconst BLEND_MODE_MAP = {\r\n  [BlendMode.srcOver]: 'normal',\r\n  [BlendMode.srcIn]: 'multiply',\r\n  [BlendMode.srcOut]: 'lighten',\r\n  [BlendMode.srcATop]: 'screen',\r\n  [BlendMode.dstOver]: 'overlay',\r\n  [BlendMode.dstIn]: 'darken',\r\n  [BlendMode.dstOut]: 'color-dodge',\r\n  [BlendMode.dstATop]: 'color-burn',\r\n  [BlendMode.plus]: 'lighten',\r\n  [BlendMode.screen]: 'screen',\r\n  [BlendMode.overlay]: 'overlay',\r\n  [BlendMode.darken]: 'darken',\r\n  [BlendMode.lighten]: 'lighten',\r\n  [BlendMode.colorDodge]: 'color-dodge',\r\n  [BlendMode.colorBurn]: 'color-burn',\r\n  [BlendMode.hardLight]: 'hard-light',\r\n  [BlendMode.softLight]: 'soft-light',\r\n  [BlendMode.difference]: 'difference',\r\n  [BlendMode.exclusion]: 'exclusion',\r\n  [BlendMode.multiply]: 'multiply',\r\n  [BlendMode.hue]: 'hue',\r\n  [BlendMode.saturation]: 'saturation',\r\n  [BlendMode.color]: 'color',\r\n  [BlendMode.luminosity]: 'luminosity'\r\n};\r\n\r\n/**\r\n * IconData - Represents icon metadata\r\n * Contains codepoint, font family, and display properties\r\n */\r\nclass IconData {\r\n  constructor({\r\n    codePoint = 0,\r\n    fontFamily = 'Material Icons',\r\n    fontPackage = null,\r\n    matchTextDirection = false,\r\n    fontFamilyFallback = null\r\n  } = {}) {\r\n    this.codePoint = codePoint;\r\n    this.fontFamily = fontFamily;\r\n    this.fontPackage = fontPackage;\r\n    this.matchTextDirection = matchTextDirection;\r\n    this.fontFamilyFallback = Array.isArray(fontFamilyFallback) ? fontFamilyFallback : null;\r\n  }\r\n\r\n  getCharacter() {\r\n    return String.fromCharCode(this.codePoint);\r\n  }\r\n\r\n  toString() {\r\n    const hex = this.codePoint.toString(16).toUpperCase().padStart(5, '0');\r\n    return `IconData(U+${hex})`;\r\n  }\r\n\r\n  equals(other) {\r\n    if (!other || !(other instanceof IconData)) {\r\n      return false;\r\n    }\r\n    return (\r\n      this.codePoint === other.codePoint &&\r\n      this.fontFamily === other.fontFamily &&\r\n      this.fontPackage === other.fontPackage &&\r\n      this.matchTextDirection === other.matchTextDirection &&\r\n      this._arrayEquals(this.fontFamilyFallback, other.fontFamilyFallback)\r\n    );\r\n  }\r\n\r\n  _arrayEquals(arr1, arr2) {\r\n    if (!arr1 && !arr2) return true;\r\n    if (!arr1 || !arr2) return false;\r\n    if (arr1.length !== arr2.length) return false;\r\n    return arr1.every((val, idx) => val === arr2[idx]);\r\n  }\r\n\r\n  hashCode() {\r\n    let hash = this.codePoint;\r\n    hash = ((hash << 5) - hash) + (this.fontFamily ? this.fontFamily.charCodeAt(0) : 0);\r\n    hash = ((hash << 5) - hash) + (this.matchTextDirection ? 1 : 0);\r\n    if (this.fontFamilyFallback) {\r\n      this.fontFamilyFallback.forEach(f => {\r\n        hash = ((hash << 5) - hash) + (f ? f.charCodeAt(0) : 0);\r\n      });\r\n    }\r\n    return hash;\r\n  }\r\n}\r\n\r\n/**\r\n * IconThemeData - Theme configuration for icons\r\n * Provides default values for icon properties\r\n */\r\nclass IconThemeData {\r\n  constructor({\r\n    color = null,\r\n    opacity = 1.0,\r\n    size = DEFAULT_ICON_SIZE,\r\n    fill = null,\r\n    weight = null,\r\n    grade = null,\r\n    opticalSize = null,\r\n    shadows = null,\r\n    applyTextScaling = false\r\n  } = {}) {\r\n    this.color = color;\r\n    this.opacity = opacity;\r\n    this.size = size;\r\n    this.fill = fill;\r\n    this.weight = weight;\r\n    this.grade = grade;\r\n    this.opticalSize = opticalSize;\r\n    this.shadows = shadows;\r\n    this.applyTextScaling = applyTextScaling;\r\n  }\r\n\r\n  copyWith({\r\n    color,\r\n    opacity,\r\n    size,\r\n    fill,\r\n    weight,\r\n    grade,\r\n    opticalSize,\r\n    shadows,\r\n    applyTextScaling\r\n  } = {}) {\r\n    return new IconThemeData({\r\n      color: color !== undefined ? color : this.color,\r\n      opacity: opacity !== undefined ? opacity : this.opacity,\r\n      size: size !== undefined ? size : this.size,\r\n      fill: fill !== undefined ? fill : this.fill,\r\n      weight: weight !== undefined ? weight : this.weight,\r\n      grade: grade !== undefined ? grade : this.grade,\r\n      opticalSize: opticalSize !== undefined ? opticalSize : this.opticalSize,\r\n      shadows: shadows !== undefined ? shadows : this.shadows,\r\n      applyTextScaling: applyTextScaling !== undefined ? applyTextScaling : this.applyTextScaling\r\n    });\r\n  }\r\n}\r\n\r\n/**\r\n * Icon - StatelessWidget for rendering icons\r\n * Supports Material Design icons and custom icon fonts\r\n */\r\nclass Icon extends StatelessWidget {\r\n  constructor(iconOrOptions, options = {}) {\r\n    let _icon = null;\r\n    let _opts = {};\r\n\r\n    if (iconOrOptions && (iconOrOptions.constructor?.name === 'IconData' || iconOrOptions.codePoint !== undefined)) {\r\n      _icon = iconOrOptions;\r\n      _opts = options;\r\n    } else {\r\n      _opts = iconOrOptions || {};\r\n      _icon = _opts.icon;\r\n    }\r\n\r\n    const {\r\n      key = null,\r\n      size = null,\r\n      fill = null,\r\n      weight = null,\r\n      grade = null,\r\n      opticalSize = null,\r\n      color = null,\r\n      shadows = null,\r\n      semanticLabel = null,\r\n      textDirection = null,\r\n      applyTextScaling = null,\r\n      blendMode = null,\r\n      fontWeight = null\r\n    } = _opts;\r\n    super(key);\r\n\r\n    // Assertions\r\n    if (fill !== null && (fill < 0.0 || fill > 1.0)) {\r\n      throw new Error('fill must be between 0.0 and 1.0');\r\n    }\r\n    if (weight !== null && weight <= 0.0) {\r\n      throw new Error('weight must be greater than 0.0');\r\n    }\r\n    if (opticalSize !== null && opticalSize <= 0.0) {\r\n      throw new Error('opticalSize must be greater than 0.0');\r\n    }\r\n\r\n    this.icon = _icon;\r\n    this.size = size;\r\n    this.fill = fill;\r\n    this.weight = weight;\r\n    this.grade = grade;\r\n    this.opticalSize = opticalSize;\r\n    this.color = color;\r\n    this.shadows = shadows;\r\n    this.semanticLabel = semanticLabel;\r\n    this.textDirection = textDirection;\r\n    this.applyTextScaling = applyTextScaling;\r\n    this.blendMode = blendMode || BlendMode.srcOver;\r\n    this.fontWeight = fontWeight;\r\n\r\n    this._injectFont();\r\n  }\r\n\r\n  _injectFont() {\r\n    if (typeof document === 'undefined') return;\r\n\r\n    // Check if Material Icons is already loaded\r\n    if (document.getElementById('flutterjs-material-icons')) return;\r\n\r\n    const link = document.createElement('link');\r\n    link.id = 'flutterjs-material-icons';\r\n    link.rel = 'stylesheet';\r\n    link.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';\r\n    document.head.appendChild(link);\r\n  }\r\n\r\n  build(context) {\r\n    // Ensure Material Icons font is injected on client-side rendering\r\n    this._injectFont();\r\n\r\n    // Get resolved text direction\r\n    const textDirection = this.textDirection || this._getTextDirection(context);\r\n\r\n    // Get icon theme from context\r\n    const iconTheme = this._getIconTheme(context) || new IconThemeData();\r\n\r\n    // Determine if text scaling should be applied\r\n    const applyTextScaling = this.applyTextScaling ?? iconTheme.applyTextScaling ?? false;\r\n\r\n    // Calculate icon size\r\n    const tentativeIconSize = this.size ?? iconTheme.size ?? DEFAULT_ICON_SIZE;\r\n    const iconSize = applyTextScaling\r\n      ? this._scaleTextSize(tentativeIconSize, context)\r\n      : tentativeIconSize;\r\n\r\n    // Resolve icon properties from theme\r\n    const iconFill = this.fill ?? iconTheme.fill;\r\n    const iconWeight = this.weight ?? iconTheme.weight;\r\n    const iconGrade = this.grade ?? iconTheme.grade;\r\n    const iconOpticalSize = this.opticalSize ?? iconTheme.opticalSize;\r\n    const iconShadows = this.shadows ?? iconTheme.shadows;\r\n\r\n    const icon = this.icon;\r\n\r\n    // Handle null icon - use duck typing instead of instanceof for bundled code compatibility\r\n    if (!icon || (icon.codePoint === undefined && !(icon instanceof IconData))) {\r\n      return this._buildEmptyIcon(iconSize);\r\n    }\r\n\r\n    // Calculate color with opacity\r\n    const iconOpacity = iconTheme.opacity ?? 1.0;\r\n    let iconColor = this.color ?? iconTheme.color ?? '#000000';\r\n\r\n    if (iconOpacity !== 1.0) {\r\n      iconColor = this._applyOpacity(iconColor, iconOpacity);\r\n    }\r\n\r\n    // Build font variations for advanced typography\r\n    const fontVariations = this._buildFontVariations(\r\n      iconFill,\r\n      iconWeight,\r\n      iconGrade,\r\n      iconOpticalSize\r\n    );\r\n\r\n    // Build inline styles\r\n    const inlineStyles = this._buildInlineStyles({\r\n      color: iconColor,\r\n      fontSize: iconSize,\r\n      fontFamily: icon.fontFamily,\r\n      fontWeight: this.fontWeight,\r\n      fontFamilyFallback: icon.fontFamilyFallback,\r\n      shadows: iconShadows,\r\n      fontVariations,\r\n      blendMode: this.blendMode,\r\n      textDirection\r\n    });\r\n\r\n    // Build icon element\r\n    let iconElement = this._buildIconElement(icon, inlineStyles);\r\n\r\n    // Apply text direction transform if needed\r\n    if (icon.matchTextDirection && textDirection === TextDirection.rtl) {\r\n      iconElement = this._mirrorIcon(iconElement, iconSize);\r\n    }\r\n\r\n    // Wrap with semantics\r\n    const elementId = context?.element?.getElementId?.() || 'icon-' + Math.random().toString(36).substr(2, 9);\r\n    const widgetPath = context?.element?.getWidgetPath?.() || 'Icon';\r\n\r\n    return new VNode({\r\n      tag: 'span',\r\n      props: {\r\n        role: 'img',\r\n        'aria-label': this.semanticLabel || 'Icon',\r\n        'data-element-id': elementId,\r\n        'data-widget-path': widgetPath,\r\n        'data-widget': 'Icon',\r\n        'data-icon-codepoint': `U+${icon.codePoint.toString(16).toUpperCase()}`,\r\n        title: this.semanticLabel || '',\r\n        style: {\r\n          display: 'inline-flex',\r\n          alignItems: 'center',\r\n          justifyContent: 'center',\r\n          width: `${iconSize}px`,\r\n          height: `${iconSize}px`\r\n        }\r\n      },\r\n      children: [iconElement],\r\n      key: this.key\r\n    });\r\n  }\r\n\r\n  _buildEmptyIcon(size) {\r\n    return new VNode({\r\n      tag: 'span',\r\n      props: {\r\n        style: {\r\n          display: 'inline-block',\r\n          width: `${size}px`,\r\n          height: `${size}px`\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  _buildIconElement(icon, styles) {\r\n    return new VNode({\r\n      tag: 'span',\r\n      props: {\r\n        className: 'fjs-icon',\r\n        style: {\r\n          ...styles,\r\n          display: 'inline-flex',\r\n          alignItems: 'center',\r\n          justifyContent: 'center',\r\n          lineHeight: '1.0',\r\n          whiteSpace: 'nowrap'\r\n        }\r\n      },\r\n      children: [icon.getCharacter()]\r\n    });\r\n  }\r\n\r\n  _mirrorIcon(iconElement, size) {\r\n    return new VNode({\r\n      tag: 'span',\r\n      props: {\r\n        style: {\r\n          display: 'inline-flex',\r\n          transform: 'scaleX(-1)',\r\n          transformOrigin: 'center',\r\n          width: `${size}px`,\r\n          height: `${size}px`,\r\n          alignItems: 'center',\r\n          justifyContent: 'center'\r\n        }\r\n      },\r\n      children: [iconElement]\r\n    });\r\n  }\r\n\r\n  _buildInlineStyles({\r\n    color,\r\n    fontSize,\r\n    fontFamily,\r\n    fontWeight,\r\n    fontFamilyFallback,\r\n    shadows,\r\n    fontVariations,\r\n    blendMode,\r\n    textDirection\r\n  }) {\r\n    const styles = {\r\n      fontSize: `${fontSize}px`,\r\n      fontFamily: this._buildFontFamily(fontFamily, fontFamilyFallback),\r\n      color: color,\r\n      fontVariationSettings: fontVariations,\r\n      textShadow: this._buildTextShadow(shadows),\r\n      mixBlendMode: BLEND_MODE_MAP[blendMode] || 'normal',\r\n      direction: textDirection === TextDirection.rtl ? 'rtl' : 'ltr',\r\n      lineHeight: '1.0',\r\n      height: '1em',\r\n      userSelect: 'none',\r\n      WebkitUserSelect: 'none',\r\n      MozUserSelect: 'none'\r\n    };\r\n\r\n    if (fontWeight) {\r\n      styles.fontWeight = this._normalizeFontWeight(fontWeight);\r\n    }\r\n\r\n    return styles;\r\n  }\r\n\r\n  _buildFontFamily(primary, fallback) {\r\n    if (!primary) return \"'Material Icons', Arial, sans-serif\";\r\n\r\n    const families = [primary];\r\n\r\n    if (Array.isArray(fallback) && fallback.length > 0) {\r\n      families.push(...fallback);\r\n    }\r\n\r\n    families.push('Arial', 'sans-serif');\r\n    return families.map(f => `'${f}'`).join(', ');\r\n  }\r\n\r\n  _buildFontVariations(fill, weight, grade, opticalSize) {\r\n    const variations = [];\r\n\r\n    if (fill !== null && fill !== undefined) {\r\n      variations.push(`'FILL' ${fill}`);\r\n    }\r\n    if (weight !== null && weight !== undefined) {\r\n      variations.push(`'wght' ${weight}`);\r\n    }\r\n    if (grade !== null && grade !== undefined) {\r\n      variations.push(`'GRAD' ${grade}`);\r\n    }\r\n    if (opticalSize !== null && opticalSize !== undefined) {\r\n      variations.push(`'opsz' ${opticalSize}`);\r\n    }\r\n\r\n    return variations.length > 0 ? variations.join(', ') : 'normal';\r\n  }\r\n\r\n  _buildTextShadow(shadows) {\r\n    if (!shadows || !Array.isArray(shadows)) {\r\n      return 'none';\r\n    }\r\n\r\n    return shadows\r\n      .map(shadow => {\r\n        const offsetX = shadow.offsetX ?? 0;\r\n        const offsetY = shadow.offsetY ?? 0;\r\n        const blurRadius = shadow.blurRadius ?? 0;\r\n        const color = shadow.color ?? 'rgba(0, 0, 0, 0.25)';\r\n        return `${offsetX}px ${offsetY}px ${blurRadius}px ${color}`;\r\n      })\r\n      .join(', ');\r\n  }\r\n\r\n  _normalizeFontWeight(weight) {\r\n    const weightMap = {\r\n      thin: '100',\r\n      extralight: '200',\r\n      light: '300',\r\n      normal: '400',\r\n      regular: '400',\r\n      medium: '500',\r\n      semibold: '600',\r\n      bold: '700',\r\n      extrabold: '800',\r\n      black: '900'\r\n    };\r\n\r\n    if (typeof weight === 'string') {\r\n      return weightMap[weight.toLowerCase()] || weight;\r\n    }\r\n\r\n    return String(weight);\r\n  }\r\n\r\n  _applyOpacity(color, opacity) {\r\n    if (!color) return color;\r\n\r\n    // Handle hex color\r\n    if (color.startsWith('#')) {\r\n      const hex = color.slice(1);\r\n      const r = parseInt(hex.substring(0, 2), 16);\r\n      const g = parseInt(hex.substring(2, 4), 16);\r\n      const b = parseInt(hex.substring(4, 6), 16);\r\n      return `rgba(${r}, ${g}, ${b}, ${opacity})`;\r\n    }\r\n\r\n    // Handle rgb/rgba\r\n    if (color.startsWith('rgb')) {\r\n      return color.replace(/[\\d.]+\\)/, `${opacity})`);\r\n    }\r\n\r\n    return color;\r\n  }\r\n\r\n  _getTextDirection(context) {\r\n    // Try to get from document or context\r\n    if (typeof document !== 'undefined') {\r\n      const dir = document.documentElement.dir || document.dir || 'ltr';\r\n      return dir === 'rtl' ? TextDirection.rtl : TextDirection.ltr;\r\n    }\r\n    return TextDirection.ltr;\r\n  }\r\n\r\n  _getIconTheme(context) {\r\n    // This would typically come from theme context\r\n    // For now, return default\r\n    return new IconThemeData();\r\n  }\r\n\r\n  _scaleTextSize(size, context) {\r\n    // Apply text scaling factor from context (typically 1.0 - 2.0)\r\n    // For now, return unchanged\r\n    return size;\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({ name: 'icon', value: this.icon });\r\n    properties.push({ name: 'size', value: this.size });\r\n    properties.push({ name: 'fill', value: this.fill });\r\n    properties.push({ name: 'weight', value: this.weight });\r\n    properties.push({ name: 'grade', value: this.grade });\r\n    properties.push({ name: 'opticalSize', value: this.opticalSize });\r\n    properties.push({ name: 'color', value: this.color });\r\n    properties.push({ name: 'blendMode', value: this.blendMode });\r\n    properties.push({ name: 'semanticLabel', value: this.semanticLabel });\r\n    if (this.shadows) {\r\n      properties.push({ name: 'shadows', value: this.shadows });\r\n    }\r\n  }\r\n}\r\n\r\n/**\r\n * Material Design Icons - Pre-defined icon data\r\n */\r\nconst Icons = {\r\n  // Common icons\r\n  home: new IconData({ codePoint: 0xe88a, fontFamily: 'Material Icons' }),\r\n  settings: new IconData({ codePoint: 0xe8b8, fontFamily: 'Material Icons' }),\r\n  search: new IconData({ codePoint: 0xe8b6, fontFamily: 'Material Icons' }),\r\n  favorite: new IconData({ codePoint: 0xe87e, fontFamily: 'Material Icons' }),\r\n  favoriteBorder: new IconData({ codePoint: 0xe8cb, fontFamily: 'Material Icons' }),\r\n  star: new IconData({ codePoint: 0xe838, fontFamily: 'Material Icons' }),\r\n  starBorder: new IconData({ codePoint: 0xe83b, fontFamily: 'Material Icons' }),\r\n  close: new IconData({ codePoint: 0xe5cd, fontFamily: 'Material Icons' }),\r\n  menu: new IconData({ codePoint: 0xe5d2, fontFamily: 'Material Icons' }),\r\n  arrowBack: new IconData({ codePoint: 0xe5e0, fontFamily: 'Material Icons' }),\r\n  arrowForward: new IconData({ codePoint: 0xe5e1, fontFamily: 'Material Icons' }),\r\n  add: new IconData({ codePoint: 0xe145, fontFamily: 'Material Icons' }),\r\n  delete: new IconData({ codePoint: 0xe872, fontFamily: 'Material Icons' }),\r\n  edit: new IconData({ codePoint: 0xe3c9, fontFamily: 'Material Icons' }),\r\n  check: new IconData({ codePoint: 0xe5ca, fontFamily: 'Material Icons' }),\r\n  checkCircle: new IconData({ codePoint: 0xe86c, fontFamily: 'Material Icons' }),\r\n  error: new IconData({ codePoint: 0xe783, fontFamily: 'Material Icons' }),\r\n  errorOutline: new IconData({ codePoint: 0xe001, fontFamily: 'Material Icons' }),\r\n  info: new IconData({ codePoint: 0xe88f, fontFamily: 'Material Icons' }),\r\n  warning: new IconData({ codePoint: 0xe002, fontFamily: 'Material Icons' }),\r\n  download: new IconData({ codePoint: 0xe2c4, fontFamily: 'Material Icons' }),\r\n  upload: new IconData({ codePoint: 0xe2c6, fontFamily: 'Material Icons' }),\r\n  refresh: new IconData({ codePoint: 0xe5d5, fontFamily: 'Material Icons' }),\r\n  moreVert: new IconData({ codePoint: 0xe5d4, fontFamily: 'Material Icons' }),\r\n  moreHoriz: new IconData({ codePoint: 0xe5d3, fontFamily: 'Material Icons' })\r\n};\r\n\r\nexport { Icon, IconData, IconThemeData, Icons };"],
-  "mappings": "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",
-  "names": ["StatelessWidget", "VNode", "BlendMode", "TextDirection", "DEFAULT_ICON_SIZE", "DEFAULT_FONT_SIZE", "BLEND_MODE_MAP", "IconData", "codePoint", "fontFamily", "fontPackage", "matchTextDirection", "fontFamilyFallback", "other", "arr1", "arr2", "val", "idx", "hash", "f", "IconThemeData", "color", "opacity", "size", "fill", "weight", "grade", "opticalSize", "shadows", "applyTextScaling", "Icon", "iconOrOptions", "options", "_icon", "_opts", "key", "semanticLabel", "textDirection", "blendMode", "fontWeight", "link", "context", "iconTheme", "tentativeIconSize", "iconSize", "iconFill", "iconWeight", "iconGrade", "iconOpticalSize", "iconShadows", "icon", "iconOpacity", "iconColor", "fontVariations", "inlineStyles", "iconElement", "elementId", "widgetPath", "styles", "fontSize", "primary", "fallback", "families", "variations", "shadow", "offsetX", "offsetY", "blurRadius", "weightMap", "hex", "r", "g", "b", "properties", "Icons"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/material/image.js b/packages/flutterjs_engine/package/material/dist/material/image.js
deleted file mode 100644
index fe6558d2..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/image.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{StatefulWidget as H}from"../core/widget_element.js";import{VNode as f}from"@flutterjs/vdom/vnode";import{BoxFit as d,BlendMode as a,FilterQuality as w,Clip as $}from"../utils/utils.js";const m={network:"network",asset:"asset",memory:"memory",file:"file"},p={[a.normal]:"normal",[a.multiply]:"multiply",[a.screen]:"screen",[a.overlay]:"overlay",[a.darken]:"darken",[a.lighten]:"lighten",[a.colorDodge]:"color-dodge",[a.colorBurn]:"color-burn",[a.hardLight]:"hard-light",[a.softLight]:"soft-light",[a.difference]:"difference",[a.exclusion]:"exclusion",[a.hue]:"hue",[a.saturation]:"saturation",[a.color]:"color",[a.luminosity]:"luminosity"},U={[d.fill]:"fill",[d.contain]:"contain",[d.cover]:"cover",[d.fitWidth]:"scale-down",[d.fitHeight]:"scale-down",[d.none]:"none",[d.scaleDown]:"scale-down"},y={none:"visible",hardEdge:"hidden",antiAlias:"hidden",antiAliasWithSaveLayer:"hidden"};class N{constructor(e){this.completer=e,this.isAlive=!0}dispose(){this.isAlive=!1}keepAlive(){return this}}class u{constructor(e){this.imageProvider=e,this.listeners=new Set,this.imageInfo=null,this.error=null,this.completer=null}addListener(e){this.listeners.add(e),this.imageInfo&&e.onImage(this.imageInfo)}removeListener(e){this.listeners.delete(e)}notifyListeners(e){this.imageInfo=e,this.listeners.forEach(t=>{t.onImage&&t.onImage(e)})}notifyError(e,t){this.error=e,this.listeners.forEach(i=>{i.onError&&i.onError(e,t)})}notifyChunk(e){this.listeners.forEach(t=>{t.onChunk&&t.onChunk(e)})}}class R{constructor({cumulativeBytesLoaded:e=0,expectedTotalBytes:t=null}={}){this.cumulativeBytesLoaded=e,this.expectedTotalBytes=t}get progress(){return this.expectedTotalBytes?this.cumulativeBytesLoaded/this.expectedTotalBytes:0}}class g{constructor(e=m.network){this.sourceType=e,this.key=Math.random().toString(36).substr(2,9)}resolve(e={}){return new u(this)}async load(){throw new Error("load() must be implemented")}getUrl(){throw new Error("getUrl() must be implemented")}}class I extends g{constructor(e,{scale:t=1,headers:i=null,timeout:s=1e4,onProgress:r=null}={}){super(m.network),this.src=e,this.scale=t,this.headers=i||{},this.timeout=s,this.onProgress=r}resolve(e={}){const t=new u(this);return this._loadWithStream(t,e),t}async _loadWithStream(e,t){try{const i=await this._loadImage();e.notifyListeners({image:i.element,width:i.width,height:i.height,scale:this.scale,src:this.src})}catch(i){e.notifyError(i,new Error().stack)}}_loadImage(){return new Promise((e,t)=>{const i=setTimeout(()=>{t(new Error(`Network image timeout: ${this.src}`))},this.timeout),s=new XMLHttpRequest;s.addEventListener("progress",r=>{r.lengthComputable&&this.onProgress&&this.onProgress({cumulativeBytesLoaded:r.loaded,expectedTotalBytes:r.total})}),s.addEventListener("load",()=>{if(clearTimeout(i),s.status>=200&&s.status<300){const r=s.response,n=new l;n.onload=()=>{e({element:n,width:n.naturalWidth,height:n.naturalHeight,scale:this.scale})},n.onerror=()=>{t(new Error(`Failed to load network image: ${this.src}`))},n.src=URL.createObjectURL(r)}else t(new Error(`HTTP ${s.status}: ${this.src}`))}),s.addEventListener("error",()=>{clearTimeout(i),t(new Error(`Network error loading: ${this.src}`))}),s.responseType="blob",s.open("GET",this.src,!0),Object.entries(this.headers).forEach(([r,n])=>{s.setRequestHeader(r,n)}),s.send()})}async load(){return this._loadImage()}getUrl(){return this.src}}class S extends g{constructor(e,{packages:t=null,scale:i=1}={}){super(m.asset),this.assetPath=e,this.packages=t,this.scale=i,this.key=`asset:${t}:${e}:${i}`}resolve(e={}){const t=new u(this);return this._loadWithStream(t,e),t}async _loadWithStream(e,t){try{const i=await this.load();e.notifyListeners({image:i.element,width:i.width,height:i.height,scale:this.scale,src:i.src})}catch(i){e.notifyError(i,new Error().stack)}}async load(){return new Promise((e,t)=>{const i=this._resolveAssetPath(),s=new l;s.onload=()=>{e({element:s,src:i,width:s.naturalWidth,height:s.naturalHeight,scale:this.scale})},s.onerror=()=>{t(new Error(`Failed to load asset image: ${this.assetPath}`))},s.src=i})}_resolveAssetPath(){return`${this.packages?`/packages/${this.packages}`:"/assets"}/${this.assetPath}`}getUrl(){return this._resolveAssetPath()}}class b extends g{constructor(e,{scale:t=1}={}){super(m.memory),this.bytes=e,this.scale=t,this.key=`memory:${this.bytes.length}:${t}`}resolve(e={}){const t=new u(this);return this._loadWithStream(t,e),t}async _loadWithStream(e,t){try{const i=await this.load();e.notifyListeners({image:i.element,width:i.width,height:i.height,scale:this.scale,src:i.src})}catch(i){e.notifyError(i,new Error().stack)}}async load(){return new Promise((e,t)=>{try{let i;if(this.bytes instanceof Uint8Array){const r=String.fromCharCode.apply(null,this.bytes);i="data:image/png;base64,"+btoa(r)}else if(typeof this.bytes=="string")i=this.bytes.startsWith("data:")?this.bytes:`data:image/png;base64,${this.bytes}`;else throw new Error("Invalid image data");const s=new l;s.onload=()=>{e({element:s,src:i,width:s.naturalWidth,height:s.naturalHeight,scale:this.scale})},s.onerror=()=>{t(new Error("Failed to load memory image"))},s.src=i}catch(i){t(i)}})}getUrl(){if(this.bytes instanceof Uint8Array){const e=String.fromCharCode.apply(null,this.bytes);return"data:image/png;base64,"+btoa(e)}return this.bytes}}class v extends g{constructor(e,{scale:t=1}={}){super(m.file),this.filePath=e,this.scale=t}async load(){throw typeof window<"u"?new Error("FileImage is not supported in web environments. Use Image.asset or Image.network instead."):new Error("FileImage requires Node.js file system implementation")}getUrl(){return this.filePath}}class l extends H{constructor({key:e=null,image:t=null,width:i=null,height:s=null,color:r=null,opacity:n=null,colorBlendMode:o=a.normal,fit:c=d.contain,alignment:_="center",repeat:L="no-repeat",centerSlice:k=null,matchTextDirection:E=!1,gaplessPlayback:P=!1,isAntiAlias:B=!1,filterQuality:T=w.medium,frameBuilder:C=null,loadingBuilder:A=null,errorBuilder:F=null,semanticLabel:x=null,excludeFromSemantics:M=!1,clipBehavior:W=$.hardEdge}={}){if(super(e),!t||!(t instanceof g))throw new Error("Image requires a valid ImageProvider");this.image=t,this.width=i,this.height=s,this.color=r,this.opacity=n,this.colorBlendMode=o,this.fit=c,this.alignment=_,this.repeat=L,this.centerSlice=k,this.matchTextDirection=E,this.gaplessPlayback=P,this.isAntiAlias=B,this.filterQuality=T,this.frameBuilder=C,this.loadingBuilder=A,this.errorBuilder=F,this.semanticLabel=x,this.excludeFromSemantics=M,this.clipBehavior=W}static network(e,{key:t=null,scale:i=1,headers:s=null,cacheWidth:r=null,cacheHeight:n=null,...o}={}){const c=new I(e,{scale:i,headers:s});return new l({key:t,image:c,...o})}static asset(e,{key:t=null,scale:i=null,packages:s=null,cacheWidth:r=null,cacheHeight:n=null,...o}={}){const c=new S(e,{packages:s,scale:i||1});return new l({key:t,image:c,...o})}static memory(e,{key:t=null,scale:i=1,cacheWidth:s=null,cacheHeight:r=null,...n}={}){const o=new b(e,{scale:i});return new l({key:t,image:o,...n})}static file(e,{key:t=null,scale:i=1,cacheWidth:s=null,cacheHeight:r=null,...n}={}){if(typeof window<"u")throw new Error("Image.file is not supported on Flutter Web. Consider using either Image.asset or Image.network instead.");const o=new v(e,{scale:i});return new l({key:t,image:o,...n})}createState(){return new D}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"image",value:this.image}),e.push({name:"width",value:this.width}),e.push({name:"height",value:this.height}),e.push({name:"color",value:this.color}),e.push({name:"colorBlendMode",value:this.colorBlendMode}),e.push({name:"fit",value:this.fit}),e.push({name:"alignment",value:this.alignment}),e.push({name:"gaplessPlayback",value:this.gaplessPlayback}),e.push({name:"filterQuality",value:this.filterQuality})}}class D{constructor(e){this.widget=e,this.imageStream=null,this.imageInfo=null,this.loadingProgress=null,this.isListeningToStream=!1,this.error=null,this.errorStack=null,this.frameNumber=null,this.wasSynchronouslyLoaded=!1,this.completerHandle=null,this.lastImageProvider=null}initState(){}didChangeDependencies(){this._resolveImage(),this._listenToStream()}didUpdateWidget(e){this.isListeningToStream&&this.widget.loadingBuilder==null!=(e.loadingBuilder==null)&&this._updateStreamListener(),this.widget.image!==e.image&&this._resolveImage()}dispose(){this._stopListeningToStream(),this.completerHandle?.dispose()}_resolveImage(){const e=this.widget.image.resolve({});e.imageProvider.key!==this.lastImageProvider?.key&&(this._updateSourceStream(e),this.lastImageProvider=e.imageProvider)}_updateSourceStream(e){this.imageStream?.imageProvider.key!==e.imageProvider.key&&(this.isListeningToStream&&this._removeImageStreamListener(),this.widget.gaplessPlayback||this._replaceImage(null),this.loadingProgress=null,this.frameNumber=null,this.wasSynchronouslyLoaded=!1,this.imageStream=e,this.isListeningToStream&&this._addImageStreamListener())}_listenToStream(){this.isListeningToStream||(this._addImageStreamListener(),this.isListeningToStream=!0)}_stopListeningToStream(){this.isListeningToStream&&(this.completerHandle==null&&this.imageStream?.completer&&(this.completerHandle=this.imageStream.completer.keepAlive()),this._removeImageStreamListener(),this.isListeningToStream=!1)}_addImageStreamListener(){this.imageStream?.addListener({onImage:e=>this._handleImageFrame(e),onError:(e,t)=>this._handleImageError(e,t),onChunk:e=>this._handleImageChunk(e)})}_removeImageStreamListener(){this.imageStream?.removeListener({onImage:e=>this._handleImageFrame(e),onError:(e,t)=>this._handleImageError(e,t),onChunk:e=>this._handleImageChunk(e)})}_updateStreamListener(){this._removeImageStreamListener(),this._addImageStreamListener()}_handleImageFrame(e){this.imageInfo=e,this.loadingProgress=null,this.error=null,this.errorStack=null,this.frameNumber=(this.frameNumber||0)+1,this.wasSynchronouslyLoaded=!0}_handleImageChunk(e){this.widget.loadingBuilder&&(this.loadingProgress=e)}_handleImageError(e,t){this.error=e,this.errorStack=t,this.widget.errorBuilder}_replaceImage(e){this.imageInfo=e}build(e){const t=e.element.getElementId(),i=e.element.getWidgetPath(),s=this._getInlineStyles();if(this.error)return this.widget.errorBuilder?this.widget.errorBuilder(e,this.error,this.errorStack):new f({tag:"div",props:{className:"fjs-image-error",style:{...s,backgroundColor:"#f0f0f0",display:"flex",alignItems:"center",justifyContent:"center",color:"#999",overflow:y[this.widget.clipBehavior]||"hidden"},"data-element-id":t,"data-widget-path":i,title:this.error.message},children:["\u26A0 Image failed to load"]});if(!this.imageInfo&&this.widget.loadingBuilder)return this.widget.loadingBuilder(e,null,this.loadingProgress);let r=this._buildImageElement(t,i,s);return this.widget.frameBuilder&&(r=this.widget.frameBuilder(e,r,this.frameNumber,this.wasSynchronouslyLoaded)),this.widget.loadingBuilder&&(r=this.widget.loadingBuilder(e,r,this.loadingProgress)),this.widget.excludeFromSemantics||(r=new f({tag:"figure",props:{role:"img","aria-label":this.widget.semanticLabel||"Image",style:{margin:0}},children:[r]})),r}_buildImageElement(e,t,i){const s={className:"fjs-image",style:i,"data-element-id":e,"data-widget-path":t,"data-widget":"Image","data-source-type":this.widget.image.sourceType,alt:this.widget.semanticLabel||"Image"};return this.imageInfo&&(s.src=this.imageInfo.src),new f({tag:"img",props:s,key:this.widget.key})}_getInlineStyles(){const e={width:this.widget.width?`${this.widget.width}px`:"auto",height:this.widget.height?`${this.widget.height}px`:"auto",objectFit:U[this.widget.fit]||"contain",objectPosition:this._mapAlignment(),backgroundRepeat:this.widget.repeat,overflow:y[this.widget.clipBehavior]||"hidden",filter:this._buildFilterStyles()};return this.widget.color&&this.widget.colorBlendMode&&(e.mixBlendMode=p[this.widget.colorBlendMode]||"normal",e.backgroundColor=this.widget.color,e.backgroundBlendMode=p[this.widget.colorBlendMode]),this.widget.opacity!==null&&this.widget.opacity!==void 0&&(e.opacity=this.widget.opacity),this.widget.isAntiAlias?e.imageRendering="smooth":e.imageRendering="pixelated",this.widget.matchTextDirection&&(e.direction=document.dir||"ltr"),e}_mapAlignment(){return{center:"center",topLeft:"top left",topCenter:"top center",topRight:"top right",centerLeft:"center left",centerRight:"center right",bottomLeft:"bottom left",bottomCenter:"bottom center",bottomRight:"bottom right"}[this.widget.alignment]||"center"}_buildFilterStyles(){const e=[];return this.widget.filterQuality===w.high?e.push("contrast(1.1) saturate(1.05)"):this.widget.filterQuality===w.low&&e.push("blur(0.5px)"),e.length>0?e.join(" "):"none"}}export{S as AssetImage,v as FileImage,m as IMAGE_SOURCE_TYPES,l as Image,R as ImageChunkEvent,g as ImageProvider,u as ImageStream,N as ImageStreamCompleterHandle,b as MemoryImage,I as NetworkImage};
-//# sourceMappingURL=image.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/material/image.js.map b/packages/flutterjs_engine/package/material/dist/material/image.js.map
deleted file mode 100644
index 7b1cb9df..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/image.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/material/image.js"],
-  "sourcesContent": ["\r\nimport { StatefulWidget } from '../core/widget_element.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { BoxFit, BlendMode, FilterQuality, Clip } from '../utils/utils.js';\r\n\r\nconst IMAGE_SOURCE_TYPES = {\r\n  network: 'network',\r\n  asset: 'asset',\r\n  memory: 'memory',\r\n  file: 'file'\r\n};\r\n\r\nconst BLEND_MODE_MAP = {\r\n  [BlendMode.normal]: 'normal',\r\n  [BlendMode.multiply]: 'multiply',\r\n  [BlendMode.screen]: 'screen',\r\n  [BlendMode.overlay]: 'overlay',\r\n  [BlendMode.darken]: 'darken',\r\n  [BlendMode.lighten]: 'lighten',\r\n  [BlendMode.colorDodge]: 'color-dodge',\r\n  [BlendMode.colorBurn]: 'color-burn',\r\n  [BlendMode.hardLight]: 'hard-light',\r\n  [BlendMode.softLight]: 'soft-light',\r\n  [BlendMode.difference]: 'difference',\r\n  [BlendMode.exclusion]: 'exclusion',\r\n  [BlendMode.hue]: 'hue',\r\n  [BlendMode.saturation]: 'saturation',\r\n  [BlendMode.color]: 'color',\r\n  [BlendMode.luminosity]: 'luminosity'\r\n};\r\n\r\nconst BOX_FIT_MAP = {\r\n  [BoxFit.fill]: 'fill',\r\n  [BoxFit.contain]: 'contain',\r\n  [BoxFit.cover]: 'cover',\r\n  [BoxFit.fitWidth]: 'scale-down',\r\n  [BoxFit.fitHeight]: 'scale-down',\r\n  [BoxFit.none]: 'none',\r\n  [BoxFit.scaleDown]: 'scale-down'\r\n};\r\n\r\nconst CLIP_BEHAVIOR_MAP = {\r\n  none: 'visible',\r\n  hardEdge: 'hidden',\r\n  antiAlias: 'hidden',\r\n  antiAliasWithSaveLayer: 'hidden'\r\n};\r\n\r\n/**\r\n * ImageStreamCompleterHandle - Manages stream lifecycle and memory\r\n */\r\nclass ImageStreamCompleterHandle {\r\n  constructor(completer) {\r\n    this.completer = completer;\r\n    this.isAlive = true;\r\n  }\r\n\r\n  dispose() {\r\n    this.isAlive = false;\r\n  }\r\n\r\n  keepAlive() {\r\n    return this;\r\n  }\r\n}\r\n\r\n/**\r\n * ImageStream - Handles image loading state and listeners\r\n */\r\nclass ImageStream {\r\n  constructor(imageProvider) {\r\n    this.imageProvider = imageProvider;\r\n    this.listeners = new Set();\r\n    this.imageInfo = null;\r\n    this.error = null;\r\n    this.completer = null;\r\n  }\r\n\r\n  addListener(listener) {\r\n    this.listeners.add(listener);\r\n    if (this.imageInfo) {\r\n      listener.onImage(this.imageInfo);\r\n    }\r\n  }\r\n\r\n  removeListener(listener) {\r\n    this.listeners.delete(listener);\r\n  }\r\n\r\n  notifyListeners(imageInfo) {\r\n    this.imageInfo = imageInfo;\r\n    this.listeners.forEach(listener => {\r\n      if (listener.onImage) listener.onImage(imageInfo);\r\n    });\r\n  }\r\n\r\n  notifyError(error, stackTrace) {\r\n    this.error = error;\r\n    this.listeners.forEach(listener => {\r\n      if (listener.onError) listener.onError(error, stackTrace);\r\n    });\r\n  }\r\n\r\n  notifyChunk(event) {\r\n    this.listeners.forEach(listener => {\r\n      if (listener.onChunk) listener.onChunk(event);\r\n    });\r\n  }\r\n}\r\n\r\n/**\r\n * ImageChunkEvent - Tracks image loading progress\r\n */\r\nclass ImageChunkEvent {\r\n  constructor({ cumulativeBytesLoaded = 0, expectedTotalBytes = null } = {}) {\r\n    this.cumulativeBytesLoaded = cumulativeBytesLoaded;\r\n    this.expectedTotalBytes = expectedTotalBytes;\r\n  }\r\n\r\n  get progress() {\r\n    if (!this.expectedTotalBytes) return 0;\r\n    return this.cumulativeBytesLoaded / this.expectedTotalBytes;\r\n  }\r\n}\r\n\r\n/**\r\n * ImageProvider - Base class for different image sources\r\n */\r\nclass ImageProvider {\r\n  constructor(sourceType = IMAGE_SOURCE_TYPES.network) {\r\n    this.sourceType = sourceType;\r\n    this.key = Math.random().toString(36).substr(2, 9);\r\n  }\r\n\r\n  resolve(config = {}) {\r\n    return new ImageStream(this);\r\n  }\r\n\r\n  async load() {\r\n    throw new Error('load() must be implemented');\r\n  }\r\n\r\n  getUrl() {\r\n    throw new Error('getUrl() must be implemented');\r\n  }\r\n}\r\n\r\n/**\r\n * NetworkImage - Load images from network URLs with progress tracking\r\n */\r\nclass NetworkImage extends ImageProvider {\r\n  constructor(src, { scale = 1.0, headers = null, timeout = 10000, onProgress = null } = {}) {\r\n    super(IMAGE_SOURCE_TYPES.network);\r\n    this.src = src;\r\n    this.scale = scale;\r\n    this.headers = headers || {};\r\n    this.timeout = timeout;\r\n    this.onProgress = onProgress;\r\n  }\r\n\r\n  resolve(config = {}) {\r\n    const stream = new ImageStream(this);\r\n    this._loadWithStream(stream, config);\r\n    return stream;\r\n  }\r\n\r\n  async _loadWithStream(stream, config) {\r\n    try {\r\n      const result = await this._loadImage();\r\n      stream.notifyListeners({\r\n        image: result.element,\r\n        width: result.width,\r\n        height: result.height,\r\n        scale: this.scale,\r\n        src: this.src\r\n      });\r\n    } catch (error) {\r\n      stream.notifyError(error, new Error().stack);\r\n    }\r\n  }\r\n\r\n  _loadImage() {\r\n    return new Promise((resolve, reject) => {\r\n      const timer = setTimeout(() => {\r\n        reject(new Error(`Network image timeout: ${this.src}`));\r\n      }, this.timeout);\r\n\r\n      const xhr = new XMLHttpRequest();\r\n      \r\n      xhr.addEventListener('progress', (e) => {\r\n        if (e.lengthComputable && this.onProgress) {\r\n          this.onProgress({\r\n            cumulativeBytesLoaded: e.loaded,\r\n            expectedTotalBytes: e.total\r\n          });\r\n        }\r\n      });\r\n\r\n      xhr.addEventListener('load', () => {\r\n        clearTimeout(timer);\r\n        if (xhr.status >= 200 && xhr.status < 300) {\r\n          const blob = xhr.response;\r\n          const img = new Image();\r\n\r\n          img.onload = () => {\r\n            resolve({\r\n              element: img,\r\n              width: img.naturalWidth,\r\n              height: img.naturalHeight,\r\n              scale: this.scale\r\n            });\r\n          };\r\n\r\n          img.onerror = () => {\r\n            reject(new Error(`Failed to load network image: ${this.src}`));\r\n          };\r\n\r\n          img.src = URL.createObjectURL(blob);\r\n        } else {\r\n          reject(new Error(`HTTP ${xhr.status}: ${this.src}`));\r\n        }\r\n      });\r\n\r\n      xhr.addEventListener('error', () => {\r\n        clearTimeout(timer);\r\n        reject(new Error(`Network error loading: ${this.src}`));\r\n      });\r\n\r\n      xhr.responseType = 'blob';\r\n      xhr.open('GET', this.src, true);\r\n      \r\n      Object.entries(this.headers).forEach(([key, value]) => {\r\n        xhr.setRequestHeader(key, value);\r\n      });\r\n\r\n      xhr.send();\r\n    });\r\n  }\r\n\r\n  async load() {\r\n    return this._loadImage();\r\n  }\r\n\r\n  getUrl() {\r\n    return this.src;\r\n  }\r\n}\r\n\r\n/**\r\n * AssetImage - Load images from project assets\r\n */\r\nclass AssetImage extends ImageProvider {\r\n  constructor(assetPath, { packages = null, scale = 1.0 } = {}) {\r\n    super(IMAGE_SOURCE_TYPES.asset);\r\n    this.assetPath = assetPath;\r\n    this.packages = packages;\r\n    this.scale = scale;\r\n    this.key = `asset:${packages}:${assetPath}:${scale}`;\r\n  }\r\n\r\n  resolve(config = {}) {\r\n    const stream = new ImageStream(this);\r\n    this._loadWithStream(stream, config);\r\n    return stream;\r\n  }\r\n\r\n  async _loadWithStream(stream, config) {\r\n    try {\r\n      const result = await this.load();\r\n      stream.notifyListeners({\r\n        image: result.element,\r\n        width: result.width,\r\n        height: result.height,\r\n        scale: this.scale,\r\n        src: result.src\r\n      });\r\n    } catch (error) {\r\n      stream.notifyError(error, new Error().stack);\r\n    }\r\n  }\r\n\r\n  async load() {\r\n    return new Promise((resolve, reject) => {\r\n      const assetUrl = this._resolveAssetPath();\r\n      const img = new Image();\r\n\r\n      img.onload = () => {\r\n        resolve({\r\n          element: img,\r\n          src: assetUrl,\r\n          width: img.naturalWidth,\r\n          height: img.naturalHeight,\r\n          scale: this.scale\r\n        });\r\n      };\r\n\r\n      img.onerror = () => {\r\n        reject(new Error(`Failed to load asset image: ${this.assetPath}`));\r\n      };\r\n\r\n      img.src = assetUrl;\r\n    });\r\n  }\r\n\r\n  _resolveAssetPath() {\r\n    const basePath = this.packages ? `/packages/${this.packages}` : '/assets';\r\n    return `${basePath}/${this.assetPath}`;\r\n  }\r\n\r\n  getUrl() {\r\n    return this._resolveAssetPath();\r\n  }\r\n}\r\n\r\n/**\r\n * MemoryImage - Load images from Uint8Array or base64 encoded data\r\n */\r\nclass MemoryImage extends ImageProvider {\r\n  constructor(bytes, { scale = 1.0 } = {}) {\r\n    super(IMAGE_SOURCE_TYPES.memory);\r\n    this.bytes = bytes;\r\n    this.scale = scale;\r\n    this.key = `memory:${this.bytes.length}:${scale}`;\r\n  }\r\n\r\n  resolve(config = {}) {\r\n    const stream = new ImageStream(this);\r\n    this._loadWithStream(stream, config);\r\n    return stream;\r\n  }\r\n\r\n  async _loadWithStream(stream, config) {\r\n    try {\r\n      const result = await this.load();\r\n      stream.notifyListeners({\r\n        image: result.element,\r\n        width: result.width,\r\n        height: result.height,\r\n        scale: this.scale,\r\n        src: result.src\r\n      });\r\n    } catch (error) {\r\n      stream.notifyError(error, new Error().stack);\r\n    }\r\n  }\r\n\r\n  async load() {\r\n    return new Promise((resolve, reject) => {\r\n      try {\r\n        let dataUrl;\r\n\r\n        if (this.bytes instanceof Uint8Array) {\r\n          const binary = String.fromCharCode.apply(null, this.bytes);\r\n          dataUrl = 'data:image/png;base64,' + btoa(binary);\r\n        } else if (typeof this.bytes === 'string') {\r\n          dataUrl = this.bytes.startsWith('data:') ? this.bytes : `data:image/png;base64,${this.bytes}`;\r\n        } else {\r\n          throw new Error('Invalid image data');\r\n        }\r\n\r\n        const img = new Image();\r\n        img.onload = () => {\r\n          resolve({\r\n            element: img,\r\n            src: dataUrl,\r\n            width: img.naturalWidth,\r\n            height: img.naturalHeight,\r\n            scale: this.scale\r\n          });\r\n        };\r\n\r\n        img.onerror = () => {\r\n          reject(new Error('Failed to load memory image'));\r\n        };\r\n\r\n        img.src = dataUrl;\r\n      } catch (error) {\r\n        reject(error);\r\n      }\r\n    });\r\n  }\r\n\r\n  getUrl() {\r\n    if (this.bytes instanceof Uint8Array) {\r\n      const binary = String.fromCharCode.apply(null, this.bytes);\r\n      return 'data:image/png;base64,' + btoa(binary);\r\n    }\r\n    return this.bytes;\r\n  }\r\n}\r\n\r\n/**\r\n * FileImage - Load images from file system (Node.js environment)\r\n */\r\nclass FileImage extends ImageProvider {\r\n  constructor(filePath, { scale = 1.0 } = {}) {\r\n    super(IMAGE_SOURCE_TYPES.file);\r\n    this.filePath = filePath;\r\n    this.scale = scale;\r\n  }\r\n\r\n  async load() {\r\n    if (typeof window !== 'undefined') {\r\n      throw new Error('FileImage is not supported in web environments. Use Image.asset or Image.network instead.');\r\n    }\r\n    throw new Error('FileImage requires Node.js file system implementation');\r\n  }\r\n\r\n  getUrl() {\r\n    return this.filePath;\r\n  }\r\n}\r\n\r\n/**\r\n * Image - StatefulWidget for rendering images with various sources\r\n * Mirrors Flutter's Image widget API and behavior\r\n */\r\nclass Image extends StatefulWidget {\r\n  constructor({\r\n    key = null,\r\n    image = null,\r\n    width = null,\r\n    height = null,\r\n    color = null,\r\n    opacity = null,\r\n    colorBlendMode = BlendMode.normal,\r\n    fit = BoxFit.contain,\r\n    alignment = 'center',\r\n    repeat = 'no-repeat',\r\n    centerSlice = null,\r\n    matchTextDirection = false,\r\n    gaplessPlayback = false,\r\n    isAntiAlias = false,\r\n    filterQuality = FilterQuality.medium,\r\n    frameBuilder = null,\r\n    loadingBuilder = null,\r\n    errorBuilder = null,\r\n    semanticLabel = null,\r\n    excludeFromSemantics = false,\r\n    clipBehavior = Clip.hardEdge\r\n  } = {}) {\r\n    super(key);\r\n    \r\n    if (!image || !(image instanceof ImageProvider)) {\r\n      throw new Error('Image requires a valid ImageProvider');\r\n    }\r\n\r\n    this.image = image;\r\n    this.width = width;\r\n    this.height = height;\r\n    this.color = color;\r\n    this.opacity = opacity;\r\n    this.colorBlendMode = colorBlendMode;\r\n    this.fit = fit;\r\n    this.alignment = alignment;\r\n    this.repeat = repeat;\r\n    this.centerSlice = centerSlice;\r\n    this.matchTextDirection = matchTextDirection;\r\n    this.gaplessPlayback = gaplessPlayback;\r\n    this.isAntiAlias = isAntiAlias;\r\n    this.filterQuality = filterQuality;\r\n    this.frameBuilder = frameBuilder;\r\n    this.loadingBuilder = loadingBuilder;\r\n    this.errorBuilder = errorBuilder;\r\n    this.semanticLabel = semanticLabel;\r\n    this.excludeFromSemantics = excludeFromSemantics;\r\n    this.clipBehavior = clipBehavior;\r\n  }\r\n\r\n  static network(src, {\r\n    key = null,\r\n    scale = 1.0,\r\n    headers = null,\r\n    cacheWidth = null,\r\n    cacheHeight = null,\r\n    ...otherOptions\r\n  } = {}) {\r\n    const provider = new NetworkImage(src, { scale, headers });\r\n    return new Image({ key, image: provider, ...otherOptions });\r\n  }\r\n\r\n  static asset(assetPath, {\r\n    key = null,\r\n    scale = null,\r\n    packages = null,\r\n    cacheWidth = null,\r\n    cacheHeight = null,\r\n    ...otherOptions\r\n  } = {}) {\r\n    const provider = new AssetImage(assetPath, { packages, scale: scale || 1.0 });\r\n    return new Image({ key, image: provider, ...otherOptions });\r\n  }\r\n\r\n  static memory(bytes, {\r\n    key = null,\r\n    scale = 1.0,\r\n    cacheWidth = null,\r\n    cacheHeight = null,\r\n    ...otherOptions\r\n  } = {}) {\r\n    const provider = new MemoryImage(bytes, { scale });\r\n    return new Image({ key, image: provider, ...otherOptions });\r\n  }\r\n\r\n  static file(filePath, {\r\n    key = null,\r\n    scale = 1.0,\r\n    cacheWidth = null,\r\n    cacheHeight = null,\r\n    ...otherOptions\r\n  } = {}) {\r\n    if (typeof window !== 'undefined') {\r\n      throw new Error('Image.file is not supported on Flutter Web. Consider using either Image.asset or Image.network instead.');\r\n    }\r\n    const provider = new FileImage(filePath, { scale });\r\n    return new Image({ key, image: provider, ...otherOptions });\r\n  }\r\n\r\n  createState() {\r\n    return new _ImageState();\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({ name: 'image', value: this.image });\r\n    properties.push({ name: 'width', value: this.width });\r\n    properties.push({ name: 'height', value: this.height });\r\n    properties.push({ name: 'color', value: this.color });\r\n    properties.push({ name: 'colorBlendMode', value: this.colorBlendMode });\r\n    properties.push({ name: 'fit', value: this.fit });\r\n    properties.push({ name: 'alignment', value: this.alignment });\r\n    properties.push({ name: 'gaplessPlayback', value: this.gaplessPlayback });\r\n    properties.push({ name: 'filterQuality', value: this.filterQuality });\r\n  }\r\n}\r\n\r\n/**\r\n * _ImageState - State management for Image widget\r\n * Handles loading, caching, error recovery, and lifecycle\r\n */\r\nclass _ImageState {\r\n  constructor(widget) {\r\n    this.widget = widget;\r\n    this.imageStream = null;\r\n    this.imageInfo = null;\r\n    this.loadingProgress = null;\r\n    this.isListeningToStream = false;\r\n    this.error = null;\r\n    this.errorStack = null;\r\n    this.frameNumber = null;\r\n    this.wasSynchronouslyLoaded = false;\r\n    this.completerHandle = null;\r\n    this.lastImageProvider = null;\r\n  }\r\n\r\n  initState() {\r\n    // Initialize state\r\n  }\r\n\r\n  didChangeDependencies() {\r\n    this._resolveImage();\r\n    this._listenToStream();\r\n  }\r\n\r\n  didUpdateWidget(oldWidget) {\r\n    if (this.isListeningToStream && \r\n        (this.widget.loadingBuilder == null) !== (oldWidget.loadingBuilder == null)) {\r\n      this._updateStreamListener();\r\n    }\r\n\r\n    if (this.widget.image !== oldWidget.image) {\r\n      this._resolveImage();\r\n    }\r\n  }\r\n\r\n  dispose() {\r\n    this._stopListeningToStream();\r\n    this.completerHandle?.dispose();\r\n  }\r\n\r\n  _resolveImage() {\r\n    const newStream = this.widget.image.resolve({});\r\n\r\n    if (newStream.imageProvider.key !== this.lastImageProvider?.key) {\r\n      this._updateSourceStream(newStream);\r\n      this.lastImageProvider = newStream.imageProvider;\r\n    }\r\n  }\r\n\r\n  _updateSourceStream(newStream) {\r\n    if (this.imageStream?.imageProvider.key === newStream.imageProvider.key) {\r\n      return;\r\n    }\r\n\r\n    if (this.isListeningToStream) {\r\n      this._removeImageStreamListener();\r\n    }\r\n\r\n    if (!this.widget.gaplessPlayback) {\r\n      this._replaceImage(null);\r\n    }\r\n\r\n    this.loadingProgress = null;\r\n    this.frameNumber = null;\r\n    this.wasSynchronouslyLoaded = false;\r\n    this.imageStream = newStream;\r\n\r\n    if (this.isListeningToStream) {\r\n      this._addImageStreamListener();\r\n    }\r\n  }\r\n\r\n  _listenToStream() {\r\n    if (this.isListeningToStream) return;\r\n\r\n    this._addImageStreamListener();\r\n    this.isListeningToStream = true;\r\n  }\r\n\r\n  _stopListeningToStream() {\r\n    if (!this.isListeningToStream) return;\r\n\r\n    if (this.completerHandle == null && this.imageStream?.completer) {\r\n      this.completerHandle = this.imageStream.completer.keepAlive();\r\n    }\r\n\r\n    this._removeImageStreamListener();\r\n    this.isListeningToStream = false;\r\n  }\r\n\r\n  _addImageStreamListener() {\r\n    this.imageStream?.addListener({\r\n      onImage: (imageInfo) => this._handleImageFrame(imageInfo),\r\n      onError: (error, stackTrace) => this._handleImageError(error, stackTrace),\r\n      onChunk: (event) => this._handleImageChunk(event)\r\n    });\r\n  }\r\n\r\n  _removeImageStreamListener() {\r\n    this.imageStream?.removeListener({\r\n      onImage: (imageInfo) => this._handleImageFrame(imageInfo),\r\n      onError: (error, stackTrace) => this._handleImageError(error, stackTrace),\r\n      onChunk: (event) => this._handleImageChunk(event)\r\n    });\r\n  }\r\n\r\n  _updateStreamListener() {\r\n    this._removeImageStreamListener();\r\n    this._addImageStreamListener();\r\n  }\r\n\r\n  _handleImageFrame(imageInfo) {\r\n    this.imageInfo = imageInfo;\r\n    this.loadingProgress = null;\r\n    this.error = null;\r\n    this.errorStack = null;\r\n    this.frameNumber = (this.frameNumber || 0) + 1;\r\n    this.wasSynchronouslyLoaded = true;\r\n  }\r\n\r\n  _handleImageChunk(event) {\r\n    if (this.widget.loadingBuilder) {\r\n      this.loadingProgress = event;\r\n    }\r\n  }\r\n\r\n  _handleImageError(error, stackTrace) {\r\n    this.error = error;\r\n    this.errorStack = stackTrace;\r\n    if (this.widget.errorBuilder) {\r\n      // Trigger rebuild through parent context\r\n    }\r\n  }\r\n\r\n  _replaceImage(imageInfo) {\r\n    this.imageInfo = imageInfo;\r\n  }\r\n\r\n  build(context) {\r\n    const elementId = context.element.getElementId();\r\n    const widgetPath = context.element.getWidgetPath();\r\n    const inlineStyles = this._getInlineStyles();\r\n\r\n    // Handle error state\r\n    if (this.error) {\r\n      if (this.widget.errorBuilder) {\r\n        return this.widget.errorBuilder(context, this.error, this.errorStack);\r\n      }\r\n      return new VNode({\r\n        tag: 'div',\r\n        props: {\r\n          className: 'fjs-image-error',\r\n          style: {\r\n            ...inlineStyles,\r\n            backgroundColor: '#f0f0f0',\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            color: '#999',\r\n            overflow: CLIP_BEHAVIOR_MAP[this.widget.clipBehavior] || 'hidden'\r\n          },\r\n          'data-element-id': elementId,\r\n          'data-widget-path': widgetPath,\r\n          title: this.error.message\r\n        },\r\n        children: ['\u26A0 Image failed to load']\r\n      });\r\n    }\r\n\r\n    // Handle loading state\r\n    if (!this.imageInfo && this.widget.loadingBuilder) {\r\n      return this.widget.loadingBuilder(context, null, this.loadingProgress);\r\n    }\r\n\r\n    let result = this._buildImageElement(elementId, widgetPath, inlineStyles);\r\n\r\n    // Apply frame builder\r\n    if (this.widget.frameBuilder) {\r\n      result = this.widget.frameBuilder(\r\n        context,\r\n        result,\r\n        this.frameNumber,\r\n        this.wasSynchronouslyLoaded\r\n      );\r\n    }\r\n\r\n    // Apply loading builder wrapper\r\n    if (this.widget.loadingBuilder) {\r\n      result = this.widget.loadingBuilder(context, result, this.loadingProgress);\r\n    }\r\n\r\n    // Apply semantics\r\n    if (!this.widget.excludeFromSemantics) {\r\n      result = new VNode({\r\n        tag: 'figure',\r\n        props: {\r\n          role: 'img',\r\n          'aria-label': this.widget.semanticLabel || 'Image',\r\n          style: { margin: 0 }\r\n        },\r\n        children: [result]\r\n      });\r\n    }\r\n\r\n    return result;\r\n  }\r\n\r\n  _buildImageElement(elementId, widgetPath, inlineStyles) {\r\n    const imgProps = {\r\n      className: 'fjs-image',\r\n      style: inlineStyles,\r\n      'data-element-id': elementId,\r\n      'data-widget-path': widgetPath,\r\n      'data-widget': 'Image',\r\n      'data-source-type': this.widget.image.sourceType,\r\n      alt: this.widget.semanticLabel || 'Image'\r\n    };\r\n\r\n    if (this.imageInfo) {\r\n      imgProps.src = this.imageInfo.src;\r\n    }\r\n\r\n    return new VNode({\r\n      tag: 'img',\r\n      props: imgProps,\r\n      key: this.widget.key\r\n    });\r\n  }\r\n\r\n  _getInlineStyles() {\r\n    const styles = {\r\n      width: this.widget.width ? `${this.widget.width}px` : 'auto',\r\n      height: this.widget.height ? `${this.widget.height}px` : 'auto',\r\n      objectFit: BOX_FIT_MAP[this.widget.fit] || 'contain',\r\n      objectPosition: this._mapAlignment(),\r\n      backgroundRepeat: this.widget.repeat,\r\n      overflow: CLIP_BEHAVIOR_MAP[this.widget.clipBehavior] || 'hidden',\r\n      filter: this._buildFilterStyles()\r\n    };\r\n\r\n    // Apply color blend mode\r\n    if (this.widget.color && this.widget.colorBlendMode) {\r\n      styles.mixBlendMode = BLEND_MODE_MAP[this.widget.colorBlendMode] || 'normal';\r\n      // Create color overlay\r\n      styles.backgroundColor = this.widget.color;\r\n      styles.backgroundBlendMode = BLEND_MODE_MAP[this.widget.colorBlendMode];\r\n    }\r\n\r\n    // Apply opacity\r\n    if (this.widget.opacity !== null && this.widget.opacity !== undefined) {\r\n      styles.opacity = this.widget.opacity;\r\n    }\r\n\r\n    // Apply anti-alias\r\n    if (this.widget.isAntiAlias) {\r\n      styles.imageRendering = 'smooth';\r\n    } else {\r\n      styles.imageRendering = 'pixelated';\r\n    }\r\n\r\n    // Text direction\r\n    if (this.widget.matchTextDirection) {\r\n      styles.direction = document.dir || 'ltr';\r\n    }\r\n\r\n    return styles;\r\n  }\r\n\r\n  _mapAlignment() {\r\n    const alignmentMap = {\r\n      'center': 'center',\r\n      'topLeft': 'top left',\r\n      'topCenter': 'top center',\r\n      'topRight': 'top right',\r\n      'centerLeft': 'center left',\r\n      'centerRight': 'center right',\r\n      'bottomLeft': 'bottom left',\r\n      'bottomCenter': 'bottom center',\r\n      'bottomRight': 'bottom right'\r\n    };\r\n    return alignmentMap[this.widget.alignment] || 'center';\r\n  }\r\n\r\n  _buildFilterStyles() {\r\n    const filters = [];\r\n\r\n    if (this.widget.filterQuality === FilterQuality.high) {\r\n      filters.push('contrast(1.1) saturate(1.05)');\r\n    } else if (this.widget.filterQuality === FilterQuality.low) {\r\n      filters.push('blur(0.5px)');\r\n    }\r\n\r\n    return filters.length > 0 ? filters.join(' ') : 'none';\r\n  }\r\n}\r\n\r\nexport { \r\n  Image, \r\n  ImageProvider, \r\n  NetworkImage, \r\n  AssetImage, \r\n  MemoryImage, \r\n  FileImage, \r\n  ImageStream,\r\n  ImageChunkEvent,\r\n  ImageStreamCompleterHandle,\r\n  IMAGE_SOURCE_TYPES \r\n};"],
-  "mappings": "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",
-  "names": ["StatefulWidget", "VNode", "BoxFit", "BlendMode", "FilterQuality", "Clip", "IMAGE_SOURCE_TYPES", "BLEND_MODE_MAP", "BOX_FIT_MAP", "CLIP_BEHAVIOR_MAP", "ImageStreamCompleterHandle", "completer", "ImageStream", "imageProvider", "listener", "imageInfo", "error", "stackTrace", "event", "ImageChunkEvent", "cumulativeBytesLoaded", "expectedTotalBytes", "ImageProvider", "sourceType", "config", "NetworkImage", "src", "scale", "headers", "timeout", "onProgress", "stream", "result", "resolve", "reject", "timer", "xhr", "e", "blob", "img", "Image", "key", "value", "AssetImage", "assetPath", "packages", "assetUrl", "MemoryImage", "bytes", "dataUrl", "binary", "FileImage", "filePath", "image", "width", "height", "color", "opacity", "colorBlendMode", "fit", "alignment", "repeat", "centerSlice", "matchTextDirection", "gaplessPlayback", "isAntiAlias", "filterQuality", "frameBuilder", "loadingBuilder", "errorBuilder", "semanticLabel", "excludeFromSemantics", "clipBehavior", "cacheWidth", "cacheHeight", "otherOptions", "provider", "_ImageState", "properties", "widget", "oldWidget", "newStream", "context", "elementId", "widgetPath", "inlineStyles", "imgProps", "styles", "filters"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/material/list_view.js b/packages/flutterjs_engine/package/material/dist/material/list_view.js
deleted file mode 100644
index f96adf64..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/list_view.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{StatelessWidget as E}from"../core/widget_element.js";import{Container as I}from"./container.js";import{Column as S}from"../widgets/compoment/multi_child_view.js";import"../utils/edge_insets.js";class w extends E{constructor({key:r,scrollDirection:n="vertical",reverse:a=!1,controller:d,primary:h,physics:u,shrinkWrap:p=!1,padding:f,itemExtent:o,prototypeItem:l,addAutomaticKeepAlives:t=!0,addRepaintBoundaries:m=!0,addSemanticIndexes:x=!0,cacheExtent:C,children:c=[],semanticChildCount:e,dragStartBehavior:g,keyboardDismissBehavior:s,restorationId:y,clipBehavior:i}={}){super(r),this.key=r,this.scrollDirection=n,this.reverse=a,this.controller=d,this.primary=h,this.physics=u,this.shrinkWrap=p,this.padding=f,this.itemExtent=o,this.prototypeItem=l,this.addAutomaticKeepAlives=t,this.addRepaintBoundaries=m,this.addSemanticIndexes=x,this.cacheExtent=C,this.children=c,this.semanticChildCount=e,this.dragStartBehavior=g,this.keyboardDismissBehavior=s,this.restorationId=y,this.clipBehavior=i}static builder({key:r,scrollDirection:n="vertical",reverse:a=!1,controller:d,primary:h,physics:u,shrinkWrap:p=!1,padding:f,itemExtent:o,prototypeItem:l,addAutomaticKeepAlives:t=!0,addRepaintBoundaries:m=!0,addSemanticIndexes:x=!0,cacheExtent:C,itemBuilder:c,itemCount:e,findChildIndexCallback:g,dragStartBehavior:s,keyboardDismissBehavior:y,restorationId:i,clipBehavior:b}={}){const A=[];if(e!==void 0&&c){console.log("[ListView.builder] Creating",e,"children");for(let v=0;v<e;v++){const B=c({type:"BuildContext"},v);console.log(`[ListView.builder] Child ${v}:`,B?.constructor?.name,"has createElement:",typeof B?.createElement),A.push(B)}console.log("[ListView.builder] All children:",A.map(v=>v?.constructor?.name))}return new w({key:r,scrollDirection:n,reverse:a,controller:d,primary:h,physics:u,shrinkWrap:p,padding:f,itemExtent:o,prototypeItem:l,addAutomaticKeepAlives:t,addRepaintBoundaries:m,addSemanticIndexes:x,cacheExtent:C,children:A,semanticChildCount:e,dragStartBehavior:s,keyboardDismissBehavior:y,restorationId:i,clipBehavior:b})}static separated({key:r,scrollDirection:n="vertical",reverse:a=!1,controller:d,primary:h,physics:u,shrinkWrap:p=!1,padding:f,itemBuilder:o,separatorBuilder:l,itemCount:t,addAutomaticKeepAlives:m=!0,addRepaintBoundaries:x=!0,addSemanticIndexes:C=!0,cacheExtent:c,dragStartBehavior:e,keyboardDismissBehavior:g,restorationId:s,clipBehavior:y}={}){const i=[];if(t!==void 0&&o&&l)for(let b=0;b<t;b++)i.push(o({type:"BuildContext"},b)),b<t-1&&i.push(l({type:"BuildContext"},b));return new w({key:r,scrollDirection:n,reverse:a,controller:d,primary:h,physics:u,shrinkWrap:p,padding:f,addAutomaticKeepAlives:m,addRepaintBoundaries:x,addSemanticIndexes:C,cacheExtent:c,children:i,semanticChildCount:t,dragStartBehavior:e,keyboardDismissBehavior:g,restorationId:s,clipBehavior:y})}static custom({key:r,scrollDirection:n="vertical",reverse:a=!1,controller:d,primary:h,physics:u,shrinkWrap:p=!1,padding:f,itemExtent:o,prototypeItem:l,childrenDelegate:t,cacheExtent:m,semanticChildCount:x,dragStartBehavior:C,keyboardDismissBehavior:c,restorationId:e,clipBehavior:g}={}){let s=[];if(t&&Array.isArray(t.children))s=t.children;else if(t&&typeof t.builder=="function"){const y=t.childCount||0;for(let i=0;i<y;i++)s.push(t.builder({type:"BuildContext"},i))}return new w({key:r,scrollDirection:n,reverse:a,controller:d,primary:h,physics:u,shrinkWrap:p,padding:f,itemExtent:o,prototypeItem:l,cacheExtent:m,children:s,semanticChildCount:x||s.length,dragStartBehavior:C,keyboardDismissBehavior:c,restorationId:e,clipBehavior:g})}build(r){const n=this.scrollDirection==="horizontal";return new I({padding:this.padding,child:new S({children:this.children,mainAxisSize:this.shrinkWrap?"min":"max",crossAxisAlignment:n?"center":"stretch"})})}}export{w as ListView};
-//# sourceMappingURL=list_view.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/material/list_view.js.map b/packages/flutterjs_engine/package/material/dist/material/list_view.js.map
deleted file mode 100644
index 76d2b742..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/list_view.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/material/list_view.js"],
-  "sourcesContent": ["import {\r\n    StatelessWidget,\r\n    Widget,\r\n} from \"../core/widget_element.js\";\r\nimport { Container } from \"./container.js\";\r\nimport { Column } from \"../widgets/compoment/multi_child_view.js\";\r\nimport { EdgeInsets } from \"../utils/edge_insets.js\";\r\n\r\nexport class ListView extends StatelessWidget {\r\n    constructor({\r\n        key,\r\n        scrollDirection = \"vertical\",\r\n        reverse = false,\r\n        controller,\r\n        primary,\r\n        physics,\r\n        shrinkWrap = false,\r\n        padding,\r\n        itemExtent,\r\n        prototypeItem,\r\n        addAutomaticKeepAlives = true,\r\n        addRepaintBoundaries = true,\r\n        addSemanticIndexes = true,\r\n        cacheExtent,\r\n        children = [],\r\n        semanticChildCount,\r\n        dragStartBehavior,\r\n        keyboardDismissBehavior,\r\n        restorationId,\r\n        clipBehavior,\r\n    } = {}) {\r\n        super(key);\r\n        this.key = key;\r\n        this.scrollDirection = scrollDirection;\r\n        this.reverse = reverse;\r\n        this.controller = controller;\r\n        this.primary = primary;\r\n        this.physics = physics;\r\n        this.shrinkWrap = shrinkWrap;\r\n        this.padding = padding;\r\n        this.itemExtent = itemExtent;\r\n        this.prototypeItem = prototypeItem;\r\n        this.addAutomaticKeepAlives = addAutomaticKeepAlives;\r\n        this.addRepaintBoundaries = addRepaintBoundaries;\r\n        this.addSemanticIndexes = addSemanticIndexes;\r\n        this.cacheExtent = cacheExtent;\r\n        this.children = children;\r\n        this.semanticChildCount = semanticChildCount;\r\n        this.dragStartBehavior = dragStartBehavior;\r\n        this.keyboardDismissBehavior = keyboardDismissBehavior;\r\n        this.restorationId = restorationId;\r\n        this.clipBehavior = clipBehavior;\r\n    }\r\n\r\n    static builder({\r\n        key,\r\n        scrollDirection = \"vertical\",\r\n        reverse = false,\r\n        controller,\r\n        primary,\r\n        physics,\r\n        shrinkWrap = false,\r\n        padding,\r\n        itemExtent,\r\n        prototypeItem,\r\n        addAutomaticKeepAlives = true,\r\n        addRepaintBoundaries = true,\r\n        addSemanticIndexes = true,\r\n        cacheExtent,\r\n        itemBuilder,\r\n        itemCount,\r\n        findChildIndexCallback,\r\n        dragStartBehavior,\r\n        keyboardDismissBehavior,\r\n        restorationId,\r\n        clipBehavior,\r\n    } = {}) {\r\n        const children = [];\r\n        if (itemCount !== undefined && itemBuilder) {\r\n            console.log('[ListView.builder] Creating', itemCount, 'children');\r\n            for (let i = 0; i < itemCount; i++) {\r\n                // Pass a mock context and index\r\n                const child = itemBuilder({ type: 'BuildContext' }, i);\r\n                console.log(`[ListView.builder] Child ${i}:`, child?.constructor?.name, 'has createElement:', typeof child?.createElement);\r\n                children.push(child);\r\n            }\r\n            console.log('[ListView.builder] All children:', children.map(c => c?.constructor?.name));\r\n        }\r\n\r\n        return new ListView({\r\n            key,\r\n            scrollDirection,\r\n            reverse,\r\n            controller,\r\n            primary,\r\n            physics,\r\n            shrinkWrap,\r\n            padding,\r\n            itemExtent,\r\n            prototypeItem,\r\n            addAutomaticKeepAlives,\r\n            addRepaintBoundaries,\r\n            addSemanticIndexes,\r\n            cacheExtent,\r\n            children,\r\n            semanticChildCount: itemCount,\r\n            dragStartBehavior,\r\n            keyboardDismissBehavior,\r\n            restorationId,\r\n            clipBehavior,\r\n        });\r\n\r\n        console.log('[ListView.builder] Returning ListView instance:', result.constructor.name, 'extends StatelessWidget:', result instanceof StatelessWidget);\r\n        return result;\r\n    }\r\n\r\n    static separated({\r\n        key,\r\n        scrollDirection = \"vertical\",\r\n        reverse = false,\r\n        controller,\r\n        primary,\r\n        physics,\r\n        shrinkWrap = false,\r\n        padding,\r\n        itemBuilder,\r\n        separatorBuilder,\r\n        itemCount,\r\n        addAutomaticKeepAlives = true,\r\n        addRepaintBoundaries = true,\r\n        addSemanticIndexes = true,\r\n        cacheExtent,\r\n        dragStartBehavior,\r\n        keyboardDismissBehavior,\r\n        restorationId,\r\n        clipBehavior,\r\n    } = {}) {\r\n        const children = [];\r\n        if (itemCount !== undefined && itemBuilder && separatorBuilder) {\r\n            for (let i = 0; i < itemCount; i++) {\r\n                children.push(itemBuilder({ type: 'BuildContext' }, i));\r\n                if (i < itemCount - 1) {\r\n                    children.push(separatorBuilder({ type: 'BuildContext' }, i));\r\n                }\r\n            }\r\n        }\r\n\r\n        return new ListView({\r\n            key,\r\n            scrollDirection,\r\n            reverse,\r\n            controller,\r\n            primary,\r\n            physics,\r\n            shrinkWrap,\r\n            padding,\r\n            addAutomaticKeepAlives,\r\n            addRepaintBoundaries,\r\n            addSemanticIndexes,\r\n            cacheExtent,\r\n            children,\r\n            semanticChildCount: itemCount, // Approximation\r\n            dragStartBehavior,\r\n            keyboardDismissBehavior,\r\n            restorationId,\r\n            clipBehavior,\r\n        });\r\n    }\r\n\r\n    static custom({\r\n        key,\r\n        scrollDirection = \"vertical\",\r\n        reverse = false,\r\n        controller,\r\n        primary,\r\n        physics,\r\n        shrinkWrap = false,\r\n        padding,\r\n        itemExtent,\r\n        prototypeItem,\r\n        childrenDelegate,\r\n        cacheExtent,\r\n        semanticChildCount,\r\n        dragStartBehavior,\r\n        keyboardDismissBehavior,\r\n        restorationId,\r\n        clipBehavior,\r\n    } = {}) {\r\n        // Basic support for SliverChildListDelegate (static list)\r\n        // Dynamic delegates (SliverChildBuilderDelegate) would need runtime expansion\r\n        let children = [];\r\n        if (childrenDelegate && Array.isArray(childrenDelegate.children)) {\r\n            children = childrenDelegate.children;\r\n        } else if (childrenDelegate && typeof childrenDelegate.builder === 'function') {\r\n            // Best effort for builder delegate if count is provided\r\n            // This mimics the builder constructor logic\r\n            const count = childrenDelegate.childCount || 0;\r\n            for (let i = 0; i < count; i++) {\r\n                children.push(childrenDelegate.builder({ type: 'BuildContext' }, i));\r\n            }\r\n        }\r\n\r\n        return new ListView({\r\n            key,\r\n            scrollDirection,\r\n            reverse,\r\n            controller,\r\n            primary,\r\n            physics,\r\n            shrinkWrap,\r\n            padding,\r\n            itemExtent,\r\n            prototypeItem,\r\n            cacheExtent,\r\n            children,\r\n            semanticChildCount: semanticChildCount || children.length,\r\n            dragStartBehavior,\r\n            keyboardDismissBehavior,\r\n            restorationId,\r\n            clipBehavior,\r\n        });\r\n    }\r\n\r\n    build(context) {\r\n        const isHorizontal = this.scrollDirection === \"horizontal\";\r\n\r\n        // Create a scrollable container\r\n        // Note: Don't pass string CSS values (like '100%') to Container's width/height\r\n        // as they become invalid BoxConstraints. Use flexbox layout instead.\r\n        return new Container({\r\n            padding: this.padding,\r\n            // Removed width/height - CSS flexbox handles sizing via the parent Column/Flex\r\n            child: new Column({\r\n                children: this.children,\r\n                mainAxisSize: this.shrinkWrap ? \"min\" : \"max\",\r\n                crossAxisAlignment: isHorizontal ? \"center\" : \"stretch\",\r\n                // TODO: Handle 'reverse' by reversing children array or CSS direction\r\n            })\r\n        });\r\n    }\r\n}\r\n"],
-  "mappings": "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",
-  "names": ["StatelessWidget", "Container", "Column", "ListView", "key", "scrollDirection", "reverse", "controller", "primary", "physics", "shrinkWrap", "padding", "itemExtent", "prototypeItem", "addAutomaticKeepAlives", "addRepaintBoundaries", "addSemanticIndexes", "cacheExtent", "children", "semanticChildCount", "dragStartBehavior", "keyboardDismissBehavior", "restorationId", "clipBehavior", "itemBuilder", "itemCount", "findChildIndexCallback", "i", "child", "c", "separatorBuilder", "childrenDelegate", "count", "context", "isHorizontal"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/material/material.js b/packages/flutterjs_engine/package/material/dist/material/material.js
deleted file mode 100644
index 78003342..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/material.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{Color as t,ColorSwatch as r,MaterialColor as a,MaterialAccentColor as n,Colors as l}from"./color.js";import{Container as i,DecoratedBox as m,DecoratedBoxElement as f,RenderDecoratedBox as x,ColoredBox as p,BoxDecoration as d,Decoration as B,DecorationPosition as D}from"./container.js";import{Icon as S,IconData as u,IconThemeData as s,Icons as A}from"./icon.js";import{Scaffold as E,ScaffoldState as h,ScaffoldElement as F,SnackBar as T,SnackBarClosedReason as I,ScaffoldFeatureController as v,FloatingActionButtonLocation as w,DrawerAlignment as M,AppBar as R}from"./scffold_basic.js";export*from"../utils/utils.js";import{Text as L,TextStyle as y}from"./text.js";import{MaterialApp as P,ThemeData as V,Theme as b,Navigator as j,Route as q}from"./material_app.js";import{ColorScheme as H}from"./color_scheme.js";import{FloatingActionButton as K,FloatingActionButtonElement as O,FloatingActionButtonExtended as Q}from"./floating_action_button.js";import{GestureDetector as W,GestureDetectorElement as X}from"./gesture_detector.js";import{Card as Z}from"../widgets/compoment/card.js";import{Divider as $}from"../widgets/compoment/divider.js";import{ElevatedButton as eo}from"./elevated_button.js";import{ListView as ro}from"./list_view.js";export{R as AppBar,d as BoxDecoration,Z as Card,t as Color,H as ColorScheme,r as ColorSwatch,p as ColoredBox,l as Colors,i as Container,m as DecoratedBox,f as DecoratedBoxElement,B as Decoration,D as DecorationPosition,$ as Divider,M as DrawerAlignment,eo as ElevatedButton,K as FloatingActionButton,O as FloatingActionButtonElement,Q as FloatingActionButtonExtended,w as FloatingActionButtonLocation,W as GestureDetector,X as GestureDetectorElement,S as Icon,u as IconData,s as IconThemeData,A as Icons,ro as ListView,n as MaterialAccentColor,P as MaterialApp,a as MaterialColor,j as Navigator,x as RenderDecoratedBox,q as Route,E as Scaffold,F as ScaffoldElement,v as ScaffoldFeatureController,h as ScaffoldState,T as SnackBar,I as SnackBarClosedReason,L as Text,y as TextStyle,b as Theme,V as ThemeData};
-//# sourceMappingURL=material.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/material/material.js.map b/packages/flutterjs_engine/package/material/dist/material/material.js.map
deleted file mode 100644
index 819593b9..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/material.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/material/material.js"],
-  "sourcesContent": ["export {\r\n    Color,\r\n    ColorSwatch,\r\n    MaterialColor,\r\n    MaterialAccentColor,\r\n    Colors\r\n} from \"./color.js\";\r\n\r\nexport {\r\n    Container,\r\n    DecoratedBox,\r\n    DecoratedBoxElement,\r\n    RenderDecoratedBox,\r\n    ColoredBox,\r\n    BoxDecoration,\r\n    Decoration,\r\n    DecorationPosition\r\n} from \"./container.js\";\r\n\r\nexport { Icon, IconData, IconThemeData, Icons } from \"./icon.js\";\r\n\r\nexport {\r\n    Scaffold,\r\n    ScaffoldState,\r\n    ScaffoldElement,\r\n    SnackBar,\r\n    SnackBarClosedReason,\r\n    ScaffoldFeatureController,\r\n    FloatingActionButtonLocation,\r\n    DrawerAlignment,\r\n    AppBar\r\n} from \"./scffold_basic.js\";\r\n\r\n// \u2705 Export all utility classes (EdgeInsets, BorderRadius, etc.)\r\nexport * from \"../utils/utils.js\";\r\n\r\nexport {\r\n    Text, TextStyle\r\n} from \"./text.js\";\r\n\r\nexport {\r\n    MaterialApp,\r\n    ThemeData,\r\n    Theme,\r\n    Navigator,\r\n    Route\r\n} from \"./material_app.js\";\r\n\r\nexport { ColorScheme } from \"./color_scheme.js\";\r\n\r\nexport {\r\n    FloatingActionButton,\r\n    FloatingActionButtonElement,\r\n    FloatingActionButtonExtended\r\n} from \"./floating_action_button.js\";\r\n\r\nexport {\r\n    GestureDetector,\r\n    GestureDetectorElement\r\n} from \"./gesture_detector.js\";\r\n\r\n\r\n\r\nexport {\r\n    Card\r\n} from \"../widgets/compoment/card.js\";\r\n\r\nexport {\r\n    Divider\r\n} from \"../widgets/compoment/divider.js\";\r\n\r\nexport {\r\n    ElevatedButton\r\n} from \"./elevated_button.js\";\r\n\r\nexport {\r\n    ListView\r\n} from \"./list_view.js\";\r\n"],
-  "mappings": "AAAA,OACI,SAAAA,EACA,eAAAC,EACA,iBAAAC,EACA,uBAAAC,EACA,UAAAC,MACG,aAEP,OACI,aAAAC,EACA,gBAAAC,EACA,uBAAAC,EACA,sBAAAC,EACA,cAAAC,EACA,iBAAAC,EACA,cAAAC,EACA,sBAAAC,MACG,iBAEP,OAAS,QAAAC,EAAM,YAAAC,EAAU,iBAAAC,EAAe,SAAAC,MAAa,YAErD,OACI,YAAAC,EACA,iBAAAC,EACA,mBAAAC,EACA,YAAAC,EACA,wBAAAC,EACA,6BAAAC,EACA,gCAAAC,EACA,mBAAAC,EACA,UAAAC,MACG,qBAGP,WAAc,oBAEd,OACI,QAAAC,EAAM,aAAAC,MACH,YAEP,OACI,eAAAC,EACA,aAAAC,EACA,SAAAC,EACA,aAAAC,EACA,SAAAC,MACG,oBAEP,OAAS,eAAAC,MAAmB,oBAE5B,OACI,wBAAAC,EACA,+BAAAC,EACA,gCAAAC,MACG,8BAEP,OACI,mBAAAC,EACA,0BAAAC,MACG,wBAIP,OACI,QAAAC,MACG,+BAEP,OACI,WAAAC,MACG,kCAEP,OACI,kBAAAC,OACG,uBAEP,OACI,YAAAC,OACG",
-  "names": ["Color", "ColorSwatch", "MaterialColor", "MaterialAccentColor", "Colors", "Container", "DecoratedBox", "DecoratedBoxElement", "RenderDecoratedBox", "ColoredBox", "BoxDecoration", "Decoration", "DecorationPosition", "Icon", "IconData", "IconThemeData", "Icons", "Scaffold", "ScaffoldState", "ScaffoldElement", "SnackBar", "SnackBarClosedReason", "ScaffoldFeatureController", "FloatingActionButtonLocation", "DrawerAlignment", "AppBar", "Text", "TextStyle", "MaterialApp", "ThemeData", "Theme", "Navigator", "Route", "ColorScheme", "FloatingActionButton", "FloatingActionButtonElement", "FloatingActionButtonExtended", "GestureDetector", "GestureDetectorElement", "Card", "Divider", "ElevatedButton", "ListView"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/material/material_app.js b/packages/flutterjs_engine/package/material/dist/material/material_app.js
deleted file mode 100644
index de09638f..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/material_app.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{StatefulWidget as C,State as W}from"../core/widget_element.js";import"@flutterjs/vdom/vnode";import{InheritedWidget as z}from"@flutterjs/runtime";import{Navigator as S,Route as P}from"../widgets/navigator.js";import{ColorScheme as h}from"./color_scheme.js";class a{constructor({brightness:t="light",primaryColor:o="#2196F3",primarySwatch:n=null,colorScheme:l=null,accentColor:d="#FF4081",scaffoldBackgroundColor:s="#FAFAFA",canvasColor:c="#FFF",cardColor:e="#FFF",dividerColor:m="rgba(0, 0, 0, 0.12)",highlightColor:y="rgba(0, 0, 0, 0.05)",splashColor:g="rgba(0, 0, 0, 0.2)",selectedRowColor:F="#F5F5F5",unselectedWidgetColor:p="rgba(0, 0, 0, 0.54)",disabledColor:w="rgba(0, 0, 0, 0.38)",textTheme:u=null,fontFamily:r='Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI"',appBarTheme:b=null}={}){this.brightness=t,this.primaryColor=o,this.primarySwatch=n,this.accentColor=d,this.scaffoldBackgroundColor=s,this.canvasColor=c,this.cardColor=e,this.dividerColor=m,this.highlightColor=y,this.splashColor=g,this.selectedRowColor=F,this.unselectedWidgetColor=p,this.disabledColor=w,this.textTheme=u,this.fontFamily=r,this.appBarTheme=b,l?(this.colorScheme=l,o||(this.primaryColor=l.primary),s||(this.scaffoldBackgroundColor=l.background),e||(this.cardColor=l.surface)):(this.colorScheme=t==="dark"?h.dark():h.light(),o&&o!=="#2196F3"&&(this.colorScheme=h.fromSeed({seedColor:o,brightness:t})));const i=t==="dark"?"#FFFFFF":"#000000";this.textTheme=u||{displayLarge:{fontFamily:r,fontSize:57,fontWeight:"400",color:i},displayMedium:{fontFamily:r,fontSize:45,fontWeight:"400",color:i},displaySmall:{fontFamily:r,fontSize:36,fontWeight:"400",color:i},headlineLarge:{fontFamily:r,fontSize:32,fontWeight:"400",color:i},headlineMedium:{fontFamily:r,fontSize:28,fontWeight:"400",color:i},headlineSmall:{fontFamily:r,fontSize:24,fontWeight:"400",color:i},titleLarge:{fontFamily:r,fontSize:22,fontWeight:"400",color:i},titleMedium:{fontFamily:r,fontSize:16,fontWeight:"500",color:i},titleSmall:{fontFamily:r,fontSize:14,fontWeight:"500",color:i},bodyLarge:{fontFamily:r,fontSize:16,fontWeight:"400",color:i},bodyMedium:{fontFamily:r,fontSize:14,fontWeight:"400",color:i},bodySmall:{fontFamily:r,fontSize:12,fontWeight:"400",color:i},labelLarge:{fontFamily:r,fontSize:14,fontWeight:"500",color:i},labelMedium:{fontFamily:r,fontSize:12,fontWeight:"500",color:i},labelSmall:{fontFamily:r,fontSize:11,fontWeight:"500",color:i}}}static dark(){return new a({brightness:"dark",colorScheme:h.dark(),primaryColor:"#1F1F1F",scaffoldBackgroundColor:"#121212",canvasColor:"#1E1E1E",cardColor:"#2C2C2C",dividerColor:"rgba(255, 255, 255, 0.12)",unselectedWidgetColor:"rgba(255, 255, 255, 0.70)"})}static light(){return new a({brightness:"light",colorScheme:h.light(),primaryColor:"#2196F3",scaffoldBackgroundColor:"#FAFAFA",canvasColor:"#FFF",cardColor:"#FFF"})}}class f extends z{constructor({data:t,child:o,key:n}={}){super({child:o,key:n}),this.data=t}updateShouldNotify(t){return this.data!==t.data}static of(t){if(!t||!t.dependOnInheritedWidgetOfExactType)return console.warn("Theme.of() called with invalid context"),new a;const o=t.dependOnInheritedWidgetOfExactType(f);return o?o.data:new a}}class M extends C{constructor({key:t=null,title:o="",theme:n=null,darkTheme:l=null,themeMode:d="system",home:s=null,routes:c={},initialRoute:e="/",onGenerateRoute:m=null,onUnknownRoute:y=null,navigatorObservers:g=[],localizationsDelegates:F=[],supportedLocales:p=[{language:"en"}],locale:w=null,builder:u=null,color:r=null}={}){super(t),this.title=o,this.theme=n||a.light(),this.darkTheme=l||a.dark(),this.themeMode=d,this.color=r,this.home=s,this.routes=c,this.initialRoute=e,this.onGenerateRoute=m,this.onUnknownRoute=y,this.navigatorObservers=g,this.localizationsDelegates=F,this.supportedLocales=p,this.locale=w,this.builder=u,typeof window<"u"&&window.location&&window.location.pathname&&e==="/"&&window.location.pathname!=="/"&&(this.initialRoute=window.location.pathname),this.home&&!this.routes["/"]&&(this.routes["/"]=b=>this.home),typeof document<"u"&&(document.title=this.title)}createState(){return new v}}class v extends W{_getTheme(){const t=this.widget;return t.themeMode==="dark"?t.darkTheme:t.themeMode==="light"?t.theme:typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?t.darkTheme:t.theme}_applyTheme(t){if(typeof document>"u")return;const o=t.primaryColor||"#2196F3",n=t.cardColor||"#FFFFFF",l=t.scaffoldBackgroundColor||"#FAFAFA",d="#FFFFFF",s=t.brightness==="dark"?"#FFFFFF":"#000000",c=t.brightness==="dark"?"#FFFFFF":"#000000",e=document.documentElement;e.style.setProperty("--primary-color",o),e.style.setProperty("--accent-color",t.accentColor||"#FF4081"),e.style.setProperty("--scaffold-bg",l),e.style.setProperty("--card-color",n),e.style.setProperty("--divider-color",t.dividerColor),e.style.setProperty("--font-family",t.fontFamily),e.style.setProperty("--text-color",s),e.style.setProperty("--md-sys-color-primary",o),e.style.setProperty("--md-sys-color-on-primary",d),e.style.setProperty("--md-sys-color-surface",n),e.style.setProperty("--md-sys-color-on-surface",s),e.style.setProperty("--md-sys-color-background",l),e.style.setProperty("--md-sys-color-on-background",c),document.body.style.backgroundColor=l,document.body.style.fontFamily=t.fontFamily,document.body.style.color=s,e.style.height="100%",e.style.width="100%",e.style.margin="0",e.style.padding="0",document.body.style.height="100%",document.body.style.width="100%",document.body.style.margin="0",document.body.style.padding="0",document.body.style.overflow="hidden"}build(t){const o=this._getTheme();return this._applyTheme(o),new f({data:o,child:new S({initialRoute:this.widget.initialRoute,routes:this.widget.routes,onGenerateRoute:this.widget.onGenerateRoute,onUnknownRoute:this.widget.onUnknownRoute})})}}export{M as MaterialApp,S as Navigator,P as Route,f as Theme,a as ThemeData};
-//# sourceMappingURL=material_app.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/material/material_app.js.map b/packages/flutterjs_engine/package/material/dist/material/material_app.js.map
deleted file mode 100644
index 588a6117..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/material_app.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/material/material_app.js"],
-  "sourcesContent": ["/**\r\n * ============================================================================\r\n * FIXED MaterialApp - Properly Handles StatefulWidget \u2192 State Connection\r\n * ============================================================================\r\n */\r\n\r\nimport { StatelessWidget, ErrorWidget, StatefulWidget, State } from '../core/widget_element.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { StatefulElement, StatelessElement, InheritedWidget } from '@flutterjs/runtime';\r\nimport { Navigator, Route } from '../widgets/navigator.js';\r\n\r\n// ============================================================================\r\n// THEME DATA\r\n// ============================================================================\r\n\r\nimport { ColorScheme } from './color_scheme.js';\r\n\r\nclass ThemeData {\r\n  constructor({\r\n    brightness = 'light',\r\n    primaryColor = '#2196F3',\r\n    primarySwatch = null,\r\n    colorScheme = null,\r\n    accentColor = '#FF4081',\r\n    scaffoldBackgroundColor = '#FAFAFA',\r\n    canvasColor = '#FFF',\r\n    cardColor = '#FFF',\r\n    dividerColor = 'rgba(0, 0, 0, 0.12)',\r\n    highlightColor = 'rgba(0, 0, 0, 0.05)',\r\n    splashColor = 'rgba(0, 0, 0, 0.2)',\r\n    selectedRowColor = '#F5F5F5',\r\n    unselectedWidgetColor = 'rgba(0, 0, 0, 0.54)',\r\n    disabledColor = 'rgba(0, 0, 0, 0.38)',\r\n    textTheme = null,\r\n    fontFamily = 'Roboto, -apple-system, BlinkMacSystemFont, \"Segoe UI\"',\r\n    appBarTheme = null\r\n  } = {}) {\r\n    // console.log('\uD83C\uDFA8 ThemeData constructor called', { primaryColor, primarySwatch });\r\n    this.brightness = brightness;\r\n\r\n    // Legacy support\r\n    this.primaryColor = primaryColor;\r\n    this.primarySwatch = primarySwatch;\r\n    this.accentColor = accentColor;\r\n    this.scaffoldBackgroundColor = scaffoldBackgroundColor;\r\n    this.canvasColor = canvasColor;\r\n    this.cardColor = cardColor;\r\n    this.dividerColor = dividerColor;\r\n    this.highlightColor = highlightColor;\r\n    this.splashColor = splashColor;\r\n    this.selectedRowColor = selectedRowColor;\r\n    this.unselectedWidgetColor = unselectedWidgetColor;\r\n    this.disabledColor = disabledColor;\r\n    this.textTheme = textTheme;\r\n    this.fontFamily = fontFamily;\r\n    this.appBarTheme = appBarTheme;\r\n\r\n    // ColorScheme support\r\n    if (colorScheme) {\r\n      this.colorScheme = colorScheme;\r\n      // Sync legacy properties if not explicitly provided\r\n      if (!primaryColor) this.primaryColor = colorScheme.primary;\r\n      if (!scaffoldBackgroundColor) this.scaffoldBackgroundColor = colorScheme.background;\r\n      if (!cardColor) this.cardColor = colorScheme.surface;\r\n    } else {\r\n      // Create default color scheme based on brightness and primary color\r\n      this.colorScheme = brightness === 'dark'\r\n        ? ColorScheme.dark()\r\n        : ColorScheme.light();\r\n\r\n      // Override primary if provided\r\n      if (primaryColor && primaryColor !== '#2196F3') { // Check if different from default\r\n        this.colorScheme = ColorScheme.fromSeed({\r\n          seedColor: primaryColor,\r\n          brightness: brightness\r\n        });\r\n      }\r\n    }\r\n\r\n    // Initialize default TextTheme if not provided\r\n    const isDark = brightness === 'dark';\r\n    const baseColor = isDark ? '#FFFFFF' : '#000000';\r\n\r\n    this.textTheme = textTheme || {\r\n      displayLarge: { fontFamily: fontFamily, fontSize: 57, fontWeight: '400', color: baseColor },\r\n      displayMedium: { fontFamily: fontFamily, fontSize: 45, fontWeight: '400', color: baseColor },\r\n      displaySmall: { fontFamily: fontFamily, fontSize: 36, fontWeight: '400', color: baseColor },\r\n      headlineLarge: { fontFamily: fontFamily, fontSize: 32, fontWeight: '400', color: baseColor },\r\n      headlineMedium: { fontFamily: fontFamily, fontSize: 28, fontWeight: '400', color: baseColor },\r\n      headlineSmall: { fontFamily: fontFamily, fontSize: 24, fontWeight: '400', color: baseColor },\r\n      titleLarge: { fontFamily: fontFamily, fontSize: 22, fontWeight: '400', color: baseColor },\r\n      titleMedium: { fontFamily: fontFamily, fontSize: 16, fontWeight: '500', color: baseColor },\r\n      titleSmall: { fontFamily: fontFamily, fontSize: 14, fontWeight: '500', color: baseColor },\r\n      bodyLarge: { fontFamily: fontFamily, fontSize: 16, fontWeight: '400', color: baseColor },\r\n      bodyMedium: { fontFamily: fontFamily, fontSize: 14, fontWeight: '400', color: baseColor },\r\n      bodySmall: { fontFamily: fontFamily, fontSize: 12, fontWeight: '400', color: baseColor },\r\n      labelLarge: { fontFamily: fontFamily, fontSize: 14, fontWeight: '500', color: baseColor },\r\n      labelMedium: { fontFamily: fontFamily, fontSize: 12, fontWeight: '500', color: baseColor },\r\n      labelSmall: { fontFamily: fontFamily, fontSize: 11, fontWeight: '500', color: baseColor },\r\n    };\r\n  }\r\n\r\n  static dark() {\r\n    return new ThemeData({\r\n      brightness: 'dark',\r\n      colorScheme: ColorScheme.dark(),\r\n      primaryColor: '#1F1F1F',\r\n      scaffoldBackgroundColor: '#121212',\r\n      canvasColor: '#1E1E1E',\r\n      cardColor: '#2C2C2C',\r\n      dividerColor: 'rgba(255, 255, 255, 0.12)',\r\n      unselectedWidgetColor: 'rgba(255, 255, 255, 0.70)'\r\n    });\r\n  }\r\n\r\n  static light() {\r\n    return new ThemeData({\r\n      brightness: 'light',\r\n      colorScheme: ColorScheme.light(),\r\n      primaryColor: '#2196F3',\r\n      scaffoldBackgroundColor: '#FAFAFA',\r\n      canvasColor: '#FFF',\r\n      cardColor: '#FFF'\r\n    });\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// THEME INHERITED WIDGET\r\n// ============================================================================\r\n\r\nclass Theme extends InheritedWidget {\r\n  constructor({ data, child, key } = {}) {\r\n    super({ child, key });\r\n    this.data = data;\r\n  }\r\n\r\n  updateShouldNotify(oldWidget) {\r\n    return this.data !== oldWidget.data;\r\n  }\r\n\r\n  static of(context) {\r\n    if (!context || !context.dependOnInheritedWidgetOfExactType) {\r\n      console.warn('Theme.of() called with invalid context');\r\n      return new ThemeData();\r\n    }\r\n    const widget = context.dependOnInheritedWidgetOfExactType(Theme);\r\n    return widget ? widget.data : new ThemeData();\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// MATERIAL APP - FIXED VERSION\r\n// ============================================================================\r\n\r\nclass MaterialApp extends StatefulWidget {\r\n  constructor({\r\n    key = null,\r\n    title = '',\r\n    theme = null,\r\n    darkTheme = null,\r\n    themeMode = 'system',\r\n    home = null,\r\n    routes = {},\r\n    initialRoute = '/',\r\n    onGenerateRoute = null,\r\n    onUnknownRoute = null,\r\n    navigatorObservers = [],\r\n    localizationsDelegates = [],\r\n    supportedLocales = [{ language: 'en' }],\r\n    locale = null,\r\n    builder = null,\r\n    color = null\r\n  } = {}) {\r\n    super(key);\r\n\r\n    this.title = title;\r\n    this.theme = theme || ThemeData.light();\r\n    this.darkTheme = darkTheme || ThemeData.dark();\r\n    this.themeMode = themeMode;\r\n    this.color = color;\r\n    this.home = home;\r\n    this.routes = routes;\r\n    this.initialRoute = initialRoute;\r\n    this.onGenerateRoute = onGenerateRoute;\r\n    this.onUnknownRoute = onUnknownRoute;\r\n    this.navigatorObservers = navigatorObservers;\r\n    this.localizationsDelegates = localizationsDelegates;\r\n    this.supportedLocales = supportedLocales;\r\n    this.locale = locale;\r\n    this.builder = builder;\r\n\r\n    // Deep linking support: If in browser, use current URL as initial route\r\n    if (typeof window !== 'undefined' && window.location && window.location.pathname) {\r\n      if (initialRoute === '/' && window.location.pathname !== '/') {\r\n        this.initialRoute = window.location.pathname;\r\n      }\r\n    }\r\n\r\n    // Normalize routes\r\n    if (this.home && !this.routes['/']) {\r\n      this.routes['/'] = (context) => this.home;\r\n    }\r\n\r\n    if (typeof document !== 'undefined') {\r\n      document.title = this.title;\r\n    }\r\n  }\r\n\r\n  createState() {\r\n    return new MaterialAppState();\r\n  }\r\n}\r\n\r\nclass MaterialAppState extends State {\r\n  _getTheme() {\r\n    const wm = this.widget;\r\n    if (wm.themeMode === 'dark') {\r\n      return wm.darkTheme;\r\n    }\r\n    if (wm.themeMode === 'light') {\r\n      return wm.theme;\r\n    }\r\n    if (typeof window !== 'undefined' && window.matchMedia) {\r\n      const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\r\n      return isDark ? wm.darkTheme : wm.theme;\r\n    }\r\n    return wm.theme;\r\n  }\r\n\r\n  _applyTheme(theme) {\r\n    if (typeof document === 'undefined') return;\r\n\r\n    // Safeguards for undefined theme properties\r\n    const primary = theme.primaryColor || '#2196F3'; // Default blue\r\n    const surface = theme.cardColor || '#FFFFFF';\r\n    const background = theme.scaffoldBackgroundColor || '#FAFAFA';\r\n    const onPrimary = '#FFFFFF';\r\n    const onSurface = (theme.brightness === 'dark') ? '#FFFFFF' : '#000000';\r\n    const onBackground = (theme.brightness === 'dark') ? '#FFFFFF' : '#000000';\r\n\r\n    const root = document.documentElement;\r\n    root.style.setProperty('--primary-color', primary);\r\n    root.style.setProperty('--accent-color', theme.accentColor || '#FF4081');\r\n    root.style.setProperty('--scaffold-bg', background);\r\n    root.style.setProperty('--card-color', surface);\r\n    root.style.setProperty('--divider-color', theme.dividerColor);\r\n    root.style.setProperty('--font-family', theme.fontFamily);\r\n    root.style.setProperty('--text-color', onSurface);\r\n\r\n    // MD3 System Colors (Mapped from Legacy Theme with Fallbacks)\r\n    root.style.setProperty('--md-sys-color-primary', primary);\r\n    root.style.setProperty('--md-sys-color-on-primary', onPrimary);\r\n    root.style.setProperty('--md-sys-color-surface', surface);\r\n    root.style.setProperty('--md-sys-color-on-surface', onSurface);\r\n    root.style.setProperty('--md-sys-color-background', background);\r\n    root.style.setProperty('--md-sys-color-on-background', onBackground);\r\n\r\n    document.body.style.backgroundColor = background;\r\n    document.body.style.fontFamily = theme.fontFamily;\r\n    document.body.style.color = onSurface;\r\n\r\n    // \u2705 Ensure full screen layout\r\n    root.style.height = '100%';\r\n    root.style.width = '100%';\r\n    root.style.margin = '0';\r\n    root.style.padding = '0';\r\n\r\n    document.body.style.height = '100%';\r\n    document.body.style.width = '100%';\r\n    document.body.style.margin = '0';\r\n    document.body.style.padding = '0';\r\n    document.body.style.overflow = 'hidden'; // Prevent body scroll, Scaffold handles it\r\n  }\r\n\r\n  build(context) {\r\n    const currentTheme = this._getTheme();\r\n    this._applyTheme(currentTheme);\r\n\r\n    return new Theme({\r\n      data: currentTheme,\r\n      child: new Navigator({\r\n        initialRoute: this.widget.initialRoute,\r\n        routes: this.widget.routes,\r\n        onGenerateRoute: this.widget.onGenerateRoute,\r\n        onUnknownRoute: this.widget.onUnknownRoute\r\n      })\r\n    });\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport {\r\n  MaterialApp,\r\n  ThemeData,\r\n  Navigator,\r\n  Route,\r\n  Theme\r\n};"],
-  "mappings": "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",
-  "names": ["StatefulWidget", "State", "InheritedWidget", "Navigator", "Route", "ColorScheme", "ThemeData", "brightness", "primaryColor", "primarySwatch", "colorScheme", "accentColor", "scaffoldBackgroundColor", "canvasColor", "cardColor", "dividerColor", "highlightColor", "splashColor", "selectedRowColor", "unselectedWidgetColor", "disabledColor", "textTheme", "fontFamily", "appBarTheme", "baseColor", "Theme", "data", "child", "key", "oldWidget", "context", "widget", "MaterialApp", "title", "theme", "darkTheme", "themeMode", "home", "routes", "initialRoute", "onGenerateRoute", "onUnknownRoute", "navigatorObservers", "localizationsDelegates", "supportedLocales", "locale", "builder", "color", "MaterialAppState", "wm", "primary", "surface", "background", "onPrimary", "onSurface", "onBackground", "root", "currentTheme"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/material/scffold_basic.js b/packages/flutterjs_engine/package/material/dist/material/scffold_basic.js
deleted file mode 100644
index c551c51a..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/scffold_basic.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{StatelessWidget as N,Widget as T}from"../core/widget_element.js";import{Element as E}from"@flutterjs/runtime";import{VNode as a}from"@flutterjs/vdom/vnode";const s={endFloat:"endFloat",endDocked:"endDocked",endTop:"endTop",startFloat:"startFloat",startDocked:"startDocked",startTop:"startTop",centerFloat:"centerFloat",centerDocked:"centerDocked",centerTop:"centerTop"},F={start:"start",end:"end"},w={hide:"hide",remove:"remove",timeout:"timeout",dismiss:"dismiss"};class _{constructor(e,t,n){this._widget=e,this._completer=t,this._close=n}get widget(){return this._widget}get closed(){return this._completer.promise}close(){this._completer.completed||this._completer.resolve(w.dismiss),this._close?.()}}class O{constructor({key:e=null,content:t=null,backgroundColor:n=null,elevation:r=6,margin:o=null,padding:l=null,width:d=null,shape:h=null,behavior:p="fixed",action:u=null,duration:m=4e3,animation:c=null,onVisible:g=null}={}){this.key=e,this.content=t,this.backgroundColor=n||"#323232",this.elevation=r,this.margin=o,this.padding=l,this.width=d,this.shape=h,this.behavior=p,this.action=u,this.duration=m,this.animation=c,this.onVisible=g}build(e){const t={backgroundColor:this.backgroundColor,padding:this.padding?`${this.padding}px`:"12px 16px",borderRadius:"4px",boxShadow:`0 ${this.elevation}px 16px rgba(0,0,0,0.12), 0 ${this.elevation}px 16px rgba(0,0,0,0.24)`,display:"flex",alignItems:"center",justifyContent:"space-between",gap:"16px",color:"white",fontSize:"14px",minHeight:"48px",maxWidth:this.width?`${this.width}px`:"568px",position:this.behavior==="floating"?"fixed":"relative",zIndex:1e3};this.margin&&(t.margin=`${this.margin}px`);const r=[this.content?.createElement?.(e.element,e.element.runtime)?this.content.createElement(e.element,e.element.runtime).performRebuild():new a({tag:"span",children:[String(this.content)]})];if(this.action){const o={color:"#2196F3",cursor:"pointer",border:"none",background:"none",padding:"8px",fontSize:"14px",fontWeight:"bold"};r.push(new a({tag:"button",props:{style:o,onClick:this.action.onPressed},children:[this.action.label]}))}return new a({tag:"div",props:{style:t,"data-widget":"SnackBar"},children:r})}}class b extends E{constructor(e,t=null,n=null){super(e,t,n),this._snackBars=[],this._currentSnackBar=null,this._snackBarTimer=null,this._drawerOpen=!1,this._endDrawerOpen=!1,this._fabVisible=!0}showSnackBar(e){this._snackBarTimer&&(clearTimeout(this._snackBarTimer),this._snackBarTimer=null);const t={resolve:null,reject:null,completed:!1,promise:new Promise((r,o)=>{t.resolve=l=>{t.completed=!0,r(l)},t.reject=o})},n=new _(e,t,()=>this._hideSnackBar());return this._currentSnackBar=n,this._snackBars.push(n),this._snackBarTimer=setTimeout(()=>{t.completed||t.resolve(w.timeout),this._hideSnackBar()},e.duration),this.markNeedsBuild(),n}_hideSnackBar(){this._snackBarTimer&&(clearTimeout(this._snackBarTimer),this._snackBarTimer=null),this._snackBars.shift(),this._currentSnackBar=this._snackBars.length>0?this._snackBars[0]:null,this.markNeedsBuild()}closeSnackBar(){this._currentSnackBar&&this._currentSnackBar.close()}openDrawer(){this._drawerOpen=!0,this.markNeedsBuild()}closeDrawer(){this._drawerOpen=!1,this.markNeedsBuild()}toggleDrawer(){this._drawerOpen=!this._drawerOpen,this.markNeedsBuild()}openEndDrawer(){this._endDrawerOpen=!0,this.markNeedsBuild()}closeEndDrawer(){this._endDrawerOpen=!1,this.markNeedsBuild()}get isDrawerOpen(){return this._drawerOpen}get isEndDrawerOpen(){return this._endDrawerOpen}showFloatingActionButton(){this._fabVisible=!0,this.markNeedsBuild()}hideFloatingActionButton(){this._fabVisible=!1,this.markNeedsBuild()}performRebuild(){return this.widget.build(this.context)}}class $ extends T{constructor({key:e=null,appBar:t=null,body:n=null,floatingActionButton:r=null,floatingActionButtonLocation:o=s.endFloat,drawer:l=null,endDrawer:d=null,bottomNavigationBar:h=null,backgroundColor:p=null,resizeToAvoidBottomInset:u=!0,extendBody:m=!1,extendBodyBehindAppBar:c=!1,primary:g=!0}={}){super(e),this.appBar=t,this.body=n,this.floatingActionButton=r,this.floatingActionButtonLocation=o,this.drawer=l,this.endDrawer=d,this.bottomNavigationBar=h,this.backgroundColor=p||"#ffffff",this.resizeToAvoidBottomInset=u,this.extendBody=m,this.extendBodyBehindAppBar=c,this.primary=g}static of(e){const t=e.findAncestorStateOfType?.(b);if(!t)throw new Error("Scaffold.of() called with a context that does not contain a Scaffold");return t}static maybeOf(e){return e?.findAncestorStateOfType?.(b)}build(e){const t=e.element.getElementId(),n=e.element.getWidgetPath();let r=this.appBar?56:0,o=r,l=this.bottomNavigationBar?56:0;this.extendBodyBehindAppBar&&(o=0);let d=null;if(this.appBar){let i=this.appBar.createElement(e.element,e.element.runtime);e.element.addChild(i),i.mount(),d=i.vnode}let h=null;if(this.body){let i=this.body.createElement(e.element,e.element.runtime);e.element.addChild(i),i.mount(),h=i.vnode}let p=null;if(this.bottomNavigationBar){let i=this.bottomNavigationBar.createElement(e.element,e.element.runtime);e.element.addChild(i),i.mount(),p=i.vnode}let u=null;if(this.floatingActionButton){let i=this.floatingActionButton.createElement(e.element,e.element.runtime);e.element.addChild(i),i.mount(),u=i.vnode}let m=null;if(this.drawer){let i=this.drawer.createElement(e.element,e.element.runtime);e.element.addChild(i),i.mount(),m=i.vnode}let c=null;if(this.endDrawer){let i=this.endDrawer.createElement(e.element,e.element.runtime);e.element.addChild(i),i.mount(),c=i.vnode}const g={display:"flex",flexDirection:"column",width:"100%",minHeight:"100vh",height:"100%",position:"relative",backgroundColor:this.backgroundColor,boxSizing:"border-box",margin:0,padding:0},S={position:"fixed",top:0,left:0,right:0,height:`${r}px`,zIndex:100},x={flex:1,position:"relative",marginTop:`${o}px`,marginBottom:`${l}px`,overflowY:this.resizeToAvoidBottomInset?"auto":"visible",overflowX:"hidden",width:"100%",display:"flex",flexDirection:"column"},y={position:"fixed",bottom:0,left:0,right:0,height:`${l}px`,backgroundColor:"#fff",borderTop:"1px solid #e0e0e0",zIndex:50},D=this._getFabContainerStyle(),B={position:"fixed",left:0,top:0,bottom:0,width:"256px",backgroundColor:"#fff",boxShadow:"0 8px 16px rgba(0,0,0,0.12)",zIndex:200,transform:"translateX(-100%)",transition:"transform 0.3s ease-out",display:this.drawer&&e.element?.state?._drawerOpen?"block":"none"};e.element?.state?._drawerOpen&&(B.transform="translateX(0)");const k={position:"fixed",right:0,top:0,bottom:0,width:"256px",backgroundColor:"#fff",boxShadow:"0 8px 16px rgba(0,0,0,0.12)",zIndex:200,transform:"translateX(100%)",transition:"transform 0.3s ease-out",display:this.endDrawer&&e.element?.state?._endDrawerOpen?"block":"none"};e.element?.state?._endDrawerOpen&&(k.transform="translateX(0)");const C={position:"fixed",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(0,0,0,0.5)",zIndex:150,display:e.element?.state?._drawerOpen||e.element?.state?._endDrawerOpen?"block":"none",cursor:"pointer",onClick:()=>{e.element?.state?._drawerOpen&&e.element.state.closeDrawer(),e.element?.state?._endDrawerOpen&&e.element.state.closeEndDrawer()}};return new a({tag:"div",props:{style:g,"data-element-id":t,"data-widget-path":n,"data-widget":"Scaffold"},children:[...d?[new a({tag:"div",props:{style:S},children:[d]})]:[],...h?[new a({tag:"div",props:{style:x},children:[h]})]:[],...p?[new a({tag:"div",props:{style:y},children:[p]})]:[],...u?[new a({tag:"div",props:{style:D},children:[u]})]:[],new a({tag:"div",props:{style:C}}),...m?[new a({tag:"div",props:{style:B},children:[m]})]:[],...c?[new a({tag:"div",props:{style:k},children:[c]})]:[],...e.element?.state?._currentSnackBar?[new a({tag:"div",props:{style:{position:"fixed",bottom:"16px",left:"16px",right:"auto",zIndex:300,animation:"slideUp 0.3s ease-out"}},children:[e.element.state._currentSnackBar.widget.build(e)]})]:[]],key:this.key})}_getFabContainerStyle(){const e={position:"absolute",zIndex:250},t=16;switch(this.floatingActionButtonLocation){case s.endFloat:return{...e,bottom:`${t}px`,right:`${t}px`};case s.endDocked:return{...e,bottom:"72px",right:`${t}px`};case s.endTop:return{...e,top:"80px",right:`${t}px`};case s.startFloat:return{...e,bottom:`${t}px`,left:`${t}px`};case s.startDocked:return{...e,bottom:"72px",left:`${t}px`};case s.startTop:return{...e,top:"80px",left:`${t}px`};case s.centerFloat:return{...e,bottom:`${t}px`,left:"50%",transform:"translateX(-50%)"};case s.centerDocked:return{...e,bottom:"72px",left:"50%",transform:"translateX(-50%)"};case s.centerTop:return{...e,top:"80px",left:"50%",transform:"translateX(-50%)"};default:return{...e,bottom:`${t}px`,right:`${t}px`}}}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"appBar",value:this.appBar?"AppBar":"null"}),e.push({name:"body",value:this.body?"Widget":"null"}),e.push({name:"floatingActionButton",value:this.floatingActionButton?"FAB":"null"}),e.push({name:"drawer",value:this.drawer?"Drawer":"null"}),e.push({name:"bottomNavigationBar",value:this.bottomNavigationBar?"BottomNav":"null"})}createElement(e,t){return new v(this,e,t)}}class v extends b{constructor(e,t,n){super(e,t,n)}mount(e=null){this._context={element:this,runtime:this.runtime,parent:e||this.parent,findAncestorStateOfType:t=>{let n=e||this.parent;for(;n;){if(n instanceof t)return n;n=n.parent}return null}},super.mount(e)}getElementId(){return this._elementId||(this._elementId=`scaffold-${Date.now()}-${Math.random().toString(36).substr(2,9)}`)}getWidgetPath(){const e=[];let t=this;for(;t;)t.widget&&e.unshift(t.widget.constructor.name),t=t.parent;return e.join("/")}performRebuild(){return this.mounted||this.mount(),this.context||(this._context={element:this,runtime:this.runtime,parent:this.parent}),this.widget.build(this.context)}build(e){return e&&(this._context=e),this.performRebuild()}markNeedsBuild(){this.runtime&&this.runtime.update&&this.runtime.update()}}class A extends N{constructor({title:e,backgroundColor:t,leading:n,actions:r}={}){super(),this.title=e,this.backgroundColor=t,this.leading=n,this.actions=r}build(e){let t=null;if(this.title)if(this.title.createElement){let r=this.title.createElement(e.element,e.element.runtime);e.element.addChild(r),r.mount(),t=r.vnode}else t=new a({tag:"span",children:[String(this.title)]});let n=this.backgroundColor;return n&&typeof n.toCSSString=="function"?n=n.toCSSString():n&&typeof n=="object"&&n.value&&(n=`#${n.value.toString(16).padStart(8,"0").slice(2)}`),new a({tag:"div",props:{className:"flutter-appbar","data-widget":"AppBar"},style:{backgroundColor:n||"var(--md-sys-color-primary)",color:"#FFFFFF",padding:"16px",fontSize:"20px",fontWeight:"bold",display:"flex",alignItems:"center",minHeight:"56px"},children:t?[t]:[]})}}export{A as AppBar,F as DrawerAlignment,s as FloatingActionButtonLocation,$ as Scaffold,v as ScaffoldElement,_ as ScaffoldFeatureController,b as ScaffoldState,O as SnackBar,w as SnackBarClosedReason};
-//# sourceMappingURL=scffold_basic.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/material/scffold_basic.js.map b/packages/flutterjs_engine/package/material/dist/material/scffold_basic.js.map
deleted file mode 100644
index 76d64136..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/scffold_basic.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/material/scffold_basic.js"],
-  "sourcesContent": ["import { StatefulWidget, StatelessWidget, Widget } from '../core/widget_element.js';\r\nimport { Element } from \"@flutterjs/runtime\"\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\n\r\n// ============================================================================\r\n// ENUMS\r\n// ============================================================================\r\n\r\nconst FloatingActionButtonLocation = {\r\n  endFloat: 'endFloat',\r\n  endDocked: 'endDocked',\r\n  endTop: 'endTop',\r\n  startFloat: 'startFloat',\r\n  startDocked: 'startDocked',\r\n  startTop: 'startTop',\r\n  centerFloat: 'centerFloat',\r\n  centerDocked: 'centerDocked',\r\n  centerTop: 'centerTop'\r\n};\r\n\r\nconst DrawerAlignment = {\r\n  start: 'start',\r\n  end: 'end'\r\n};\r\n\r\n// ============================================================================\r\n// SNACK BAR CLOSED REASON\r\n// ============================================================================\r\n\r\nconst SnackBarClosedReason = {\r\n  hide: 'hide',\r\n  remove: 'remove',\r\n  timeout: 'timeout',\r\n  dismiss: 'dismiss'\r\n};\r\n\r\n// ============================================================================\r\n// SCAFFOLD FEATURE CONTROLLER\r\n// ============================================================================\r\n\r\nclass ScaffoldFeatureController {\r\n  constructor(widget, completer, closeCallback) {\r\n    this._widget = widget;\r\n    this._completer = completer;\r\n    this._close = closeCallback;\r\n  }\r\n\r\n  get widget() {\r\n    return this._widget;\r\n  }\r\n\r\n  get closed() {\r\n    return this._completer.promise;\r\n  }\r\n\r\n  close() {\r\n    if (!this._completer.completed) {\r\n      this._completer.resolve(SnackBarClosedReason.dismiss);\r\n    }\r\n    this._close?.();\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// SNACK BAR WIDGET\r\n// ============================================================================\r\n\r\nclass SnackBar {\r\n  constructor({\r\n    key = null,\r\n    content = null,\r\n    backgroundColor = null,\r\n    elevation = 6,\r\n    margin = null,\r\n    padding = null,\r\n    width = null,\r\n    shape = null,\r\n    behavior = 'fixed',\r\n    action = null,\r\n    duration = 4000,\r\n    animation = null,\r\n    onVisible = null\r\n  } = {}) {\r\n    this.key = key;\r\n    this.content = content;\r\n    this.backgroundColor = backgroundColor || '#323232';\r\n    this.elevation = elevation;\r\n    this.margin = margin;\r\n    this.padding = padding;\r\n    this.width = width;\r\n    this.shape = shape;\r\n    this.behavior = behavior;\r\n    this.action = action;\r\n    this.duration = duration;\r\n    this.animation = animation;\r\n    this.onVisible = onVisible;\r\n  }\r\n\r\n  build(context) {\r\n    const style = {\r\n      backgroundColor: this.backgroundColor,\r\n      padding: this.padding ? `${this.padding}px` : '12px 16px',\r\n      borderRadius: '4px',\r\n      boxShadow: `0 ${this.elevation}px 16px rgba(0,0,0,0.12), 0 ${this.elevation}px 16px rgba(0,0,0,0.24)`,\r\n      display: 'flex',\r\n      alignItems: 'center',\r\n      justifyContent: 'space-between',\r\n      gap: '16px',\r\n      color: 'white',\r\n      fontSize: '14px',\r\n      minHeight: '48px',\r\n      maxWidth: this.width ? `${this.width}px` : '568px',\r\n      position: this.behavior === 'floating' ? 'fixed' : 'relative',\r\n      zIndex: 1000\r\n    };\r\n\r\n    if (this.margin) {\r\n      style.margin = `${this.margin}px`;\r\n    }\r\n\r\n    const contentVNode = this.content?.createElement?.(context.element, context.element.runtime)\r\n      ? this.content.createElement(context.element, context.element.runtime).performRebuild()\r\n      : new VNode({ tag: 'span', children: [String(this.content)] });\r\n\r\n    const children = [contentVNode];\r\n\r\n    if (this.action) {\r\n      const actionStyle = {\r\n        color: '#2196F3',\r\n        cursor: 'pointer',\r\n        border: 'none',\r\n        background: 'none',\r\n        padding: '8px',\r\n        fontSize: '14px',\r\n        fontWeight: 'bold'\r\n      };\r\n\r\n      children.push(\r\n        new VNode({\r\n          tag: 'button',\r\n          props: {\r\n            style: actionStyle,\r\n            onClick: this.action.onPressed\r\n          },\r\n          children: [this.action.label]\r\n        })\r\n      );\r\n    }\r\n\r\n    return new VNode({\r\n      tag: 'div',\r\n      props: {\r\n        style,\r\n        'data-widget': 'SnackBar'\r\n      },\r\n      children\r\n    });\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// SCAFFOLD STATE\r\n// ============================================================================\r\n\r\nclass ScaffoldState extends Element {\r\n  constructor(widget, parent = null, runtime = null) {\r\n    super(widget, parent, runtime);\r\n    this._snackBars = [];\r\n    this._currentSnackBar = null;\r\n    this._snackBarTimer = null;\r\n    this._drawerOpen = false;\r\n    this._endDrawerOpen = false;\r\n    this._fabVisible = true;\r\n  }\r\n\r\n  /**\r\n   * Show snack bar\r\n   */\r\n  showSnackBar(snackBar) {\r\n    // Clear previous snack bar timer\r\n    if (this._snackBarTimer) {\r\n      clearTimeout(this._snackBarTimer);\r\n      this._snackBarTimer = null;\r\n    }\r\n\r\n    const completer = {\r\n      resolve: null,\r\n      reject: null,\r\n      completed: false,\r\n      promise: new Promise((resolve, reject) => {\r\n        completer.resolve = (value) => {\r\n          completer.completed = true;\r\n          resolve(value);\r\n        };\r\n        completer.reject = reject;\r\n      })\r\n    };\r\n\r\n    const controller = new ScaffoldFeatureController(\r\n      snackBar,\r\n      completer,\r\n      () => this._hideSnackBar()\r\n    );\r\n\r\n    this._currentSnackBar = controller;\r\n    this._snackBars.push(controller);\r\n\r\n    // Auto-hide after duration\r\n    this._snackBarTimer = setTimeout(() => {\r\n      if (!completer.completed) {\r\n        completer.resolve(SnackBarClosedReason.timeout);\r\n      }\r\n      this._hideSnackBar();\r\n    }, snackBar.duration);\r\n\r\n    this.markNeedsBuild();\r\n\r\n    return controller;\r\n  }\r\n\r\n  /**\r\n   * Hide current snack bar\r\n   */\r\n  _hideSnackBar() {\r\n    if (this._snackBarTimer) {\r\n      clearTimeout(this._snackBarTimer);\r\n      this._snackBarTimer = null;\r\n    }\r\n\r\n    this._snackBars.shift();\r\n    this._currentSnackBar = this._snackBars.length > 0 ? this._snackBars[0] : null;\r\n\r\n    this.markNeedsBuild();\r\n  }\r\n\r\n  /**\r\n   * Close snack bar\r\n   */\r\n  closeSnackBar() {\r\n    if (this._currentSnackBar) {\r\n      this._currentSnackBar.close();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Open drawer\r\n   */\r\n  openDrawer() {\r\n    this._drawerOpen = true;\r\n    this.markNeedsBuild();\r\n  }\r\n\r\n  /**\r\n   * Close drawer\r\n   */\r\n  closeDrawer() {\r\n    this._drawerOpen = false;\r\n    this.markNeedsBuild();\r\n  }\r\n\r\n  /**\r\n   * Toggle drawer\r\n   */\r\n  toggleDrawer() {\r\n    this._drawerOpen = !this._drawerOpen;\r\n    this.markNeedsBuild();\r\n  }\r\n\r\n  /**\r\n   * Open end drawer\r\n   */\r\n  openEndDrawer() {\r\n    this._endDrawerOpen = true;\r\n    this.markNeedsBuild();\r\n  }\r\n\r\n  /**\r\n   * Close end drawer\r\n   */\r\n  closeEndDrawer() {\r\n    this._endDrawerOpen = false;\r\n    this.markNeedsBuild();\r\n  }\r\n\r\n  /**\r\n   * Check if drawer is open\r\n   */\r\n  get isDrawerOpen() {\r\n    return this._drawerOpen;\r\n  }\r\n\r\n  /**\r\n   * Check if end drawer is open\r\n   */\r\n  get isEndDrawerOpen() {\r\n    return this._endDrawerOpen;\r\n  }\r\n\r\n  /**\r\n   * Show FAB\r\n   */\r\n  showFloatingActionButton() {\r\n    this._fabVisible = true;\r\n    this.markNeedsBuild();\r\n  }\r\n\r\n  /**\r\n   * Hide FAB\r\n   */\r\n  hideFloatingActionButton() {\r\n    this._fabVisible = false;\r\n    this.markNeedsBuild();\r\n  }\r\n\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// SCAFFOLD WIDGET\r\n// ============================================================================\r\n\r\nclass Scaffold extends Widget {\r\n  constructor({\r\n    key = null,\r\n    appBar = null,\r\n    body = null,\r\n    floatingActionButton = null,\r\n    floatingActionButtonLocation = FloatingActionButtonLocation.endFloat,\r\n    drawer = null,\r\n    endDrawer = null,\r\n    bottomNavigationBar = null,\r\n    backgroundColor = null,\r\n    resizeToAvoidBottomInset = true,\r\n    extendBody = false,\r\n    extendBodyBehindAppBar = false,\r\n    primary = true\r\n  } = {}) {\r\n    super(key);\r\n\r\n    this.appBar = appBar;\r\n    this.body = body;\r\n    this.floatingActionButton = floatingActionButton;\r\n    this.floatingActionButtonLocation = floatingActionButtonLocation;\r\n    this.drawer = drawer;\r\n    this.endDrawer = endDrawer;\r\n    this.bottomNavigationBar = bottomNavigationBar;\r\n    this.backgroundColor = backgroundColor || '#ffffff';\r\n    this.resizeToAvoidBottomInset = resizeToAvoidBottomInset;\r\n    this.extendBody = extendBody;\r\n    this.extendBodyBehindAppBar = extendBodyBehindAppBar;\r\n    this.primary = primary;\r\n  }\r\n\r\n  /**\r\n   * Get scaffold state from context\r\n   */\r\n  static of(context) {\r\n    const state = context.findAncestorStateOfType?.(ScaffoldState);\r\n    if (!state) {\r\n      throw new Error('Scaffold.of() called with a context that does not contain a Scaffold');\r\n    }\r\n    return state;\r\n  }\r\n\r\n  /**\r\n   * Maybe get scaffold state\r\n   */\r\n  static maybeOf(context) {\r\n    return context?.findAncestorStateOfType?.(ScaffoldState);\r\n  }\r\n\r\n  build(context) {\r\n    const elementId = context.element.getElementId();\r\n    const widgetPath = context.element.getWidgetPath();\r\n\r\n    let appBarHeight = this.appBar ? 56 : 0;\r\n    let bodyTop = appBarHeight;\r\n    let bodyBottom = this.bottomNavigationBar ? 56 : 0;\r\n\r\n    if (this.extendBodyBehindAppBar) {\r\n      bodyTop = 0;\r\n    }\r\n\r\n    // Build app bar\r\n    let appBarVNode = null;\r\n    if (this.appBar) {\r\n      let appBarElement = this.appBar.createElement(context.element, context.element.runtime);\r\n      context.element.addChild(appBarElement);\r\n      appBarElement.mount();\r\n      appBarVNode = appBarElement.vnode;\r\n    }\r\n\r\n    // Build body\r\n    let bodyVNode = null;\r\n    if (this.body) {\r\n      let bodyElement = this.body.createElement(context.element, context.element.runtime);\r\n      context.element.addChild(bodyElement);\r\n      bodyElement.mount();\r\n      bodyVNode = bodyElement.vnode;\r\n    }\r\n\r\n    // Build bottom navigation bar\r\n    let bottomNavVNode = null;\r\n    if (this.bottomNavigationBar) {\r\n      let bottomNavElement = this.bottomNavigationBar.createElement(context.element, context.element.runtime);\r\n      context.element.addChild(bottomNavElement);\r\n      bottomNavElement.mount();\r\n      bottomNavVNode = bottomNavElement.vnode;\r\n    }\r\n\r\n    // Build floating action button\r\n    let fabVNode = null;\r\n    if (this.floatingActionButton) {\r\n      let fabElement = this.floatingActionButton.createElement(context.element, context.element.runtime);\r\n      context.element.addChild(fabElement);\r\n      fabElement.mount();\r\n      fabVNode = fabElement.vnode;\r\n    }\r\n\r\n    // Build drawer\r\n    let drawerVNode = null;\r\n    if (this.drawer) {\r\n      let drawerElement = this.drawer.createElement(context.element, context.element.runtime);\r\n      context.element.addChild(drawerElement);\r\n      drawerElement.mount();\r\n      drawerVNode = drawerElement.vnode;\r\n    }\r\n\r\n    // Build end drawer\r\n    let endDrawerVNode = null;\r\n    if (this.endDrawer) {\r\n      let endDrawerElement = this.endDrawer.createElement(context.element, context.element.runtime);\r\n      context.element.addChild(endDrawerElement);\r\n      endDrawerElement.mount();\r\n      endDrawerVNode = endDrawerElement.vnode;\r\n    }\r\n\r\n    const scaffoldStyle = {\r\n      display: 'flex',\r\n      flexDirection: 'column',\r\n      width: '100%',\r\n      minHeight: '100vh', // \u2705 Force full viewport height\r\n      height: '100%',     // Fallback\r\n      position: 'relative',\r\n      backgroundColor: this.backgroundColor,\r\n      boxSizing: 'border-box',\r\n      margin: 0,\r\n      padding: 0\r\n    };\r\n\r\n    const appBarContainerStyle = {\r\n      position: 'fixed',\r\n      top: 0,\r\n      left: 0,\r\n      right: 0,\r\n      height: `${appBarHeight}px`,\r\n      zIndex: 100\r\n    };\r\n\r\n    const bodyContainerStyle = {\r\n      flex: 1,\r\n      position: 'relative',\r\n      marginTop: `${bodyTop}px`,\r\n      marginBottom: `${bodyBottom}px`,\r\n      overflowY: this.resizeToAvoidBottomInset ? 'auto' : 'visible',\r\n      overflowX: 'hidden',\r\n      width: '100%',\r\n      display: 'flex',\r\n      flexDirection: 'column'\r\n    };\r\n\r\n    const bottomNavContainerStyle = {\r\n      position: 'fixed',\r\n      bottom: 0,\r\n      left: 0,\r\n      right: 0,\r\n      height: `${bodyBottom}px`,\r\n      backgroundColor: '#fff',\r\n      borderTop: '1px solid #e0e0e0',\r\n      zIndex: 50\r\n    };\r\n\r\n    const fabContainerStyle = this._getFabContainerStyle();\r\n\r\n    const drawerContainerStyle = {\r\n      position: 'fixed',\r\n      left: 0,\r\n      top: 0,\r\n      bottom: 0,\r\n      width: '256px',\r\n      backgroundColor: '#fff',\r\n      boxShadow: '0 8px 16px rgba(0,0,0,0.12)',\r\n      zIndex: 200,\r\n      transform: 'translateX(-100%)',\r\n      transition: 'transform 0.3s ease-out',\r\n      display: this.drawer && (context.element?.state?._drawerOpen || false) ? 'block' : 'none'\r\n    };\r\n\r\n    if (context.element?.state?._drawerOpen) {\r\n      drawerContainerStyle.transform = 'translateX(0)';\r\n    }\r\n\r\n    const endDrawerContainerStyle = {\r\n      position: 'fixed',\r\n      right: 0,\r\n      top: 0,\r\n      bottom: 0,\r\n      width: '256px',\r\n      backgroundColor: '#fff',\r\n      boxShadow: '0 8px 16px rgba(0,0,0,0.12)',\r\n      zIndex: 200,\r\n      transform: 'translateX(100%)',\r\n      transition: 'transform 0.3s ease-out',\r\n      display: this.endDrawer && (context.element?.state?._endDrawerOpen || false) ? 'block' : 'none'\r\n    };\r\n\r\n    if (context.element?.state?._endDrawerOpen) {\r\n      endDrawerContainerStyle.transform = 'translateX(0)';\r\n    }\r\n\r\n    const scrimStyle = {\r\n      position: 'fixed',\r\n      top: 0,\r\n      left: 0,\r\n      right: 0,\r\n      bottom: 0,\r\n      backgroundColor: 'rgba(0,0,0,0.5)',\r\n      zIndex: 150,\r\n      display: (context.element?.state?._drawerOpen || context.element?.state?._endDrawerOpen) ? 'block' : 'none',\r\n      cursor: 'pointer',\r\n      onClick: () => {\r\n        if (context.element?.state?._drawerOpen) {\r\n          context.element.state.closeDrawer();\r\n        }\r\n        if (context.element?.state?._endDrawerOpen) {\r\n          context.element.state.closeEndDrawer();\r\n        }\r\n      }\r\n    };\r\n\r\n    return new VNode({\r\n      tag: 'div',\r\n      props: {\r\n        style: scaffoldStyle,\r\n        'data-element-id': elementId,\r\n        'data-widget-path': widgetPath,\r\n        'data-widget': 'Scaffold'\r\n      },\r\n      children: [\r\n        // App bar\r\n        ...(appBarVNode ? [new VNode({\r\n          tag: 'div',\r\n          props: { style: appBarContainerStyle },\r\n          children: [appBarVNode]\r\n        })] : []),\r\n\r\n        // Body\r\n        ...(bodyVNode ? [new VNode({\r\n          tag: 'div',\r\n          props: { style: bodyContainerStyle },\r\n          children: [bodyVNode]\r\n        })] : []),\r\n\r\n        // Bottom navigation bar\r\n        ...(bottomNavVNode ? [new VNode({\r\n          tag: 'div',\r\n          props: { style: bottomNavContainerStyle },\r\n          children: [bottomNavVNode]\r\n        })] : []),\r\n\r\n        // Floating action button\r\n        ...(fabVNode ? [new VNode({\r\n          tag: 'div',\r\n          props: { style: fabContainerStyle },\r\n          children: [fabVNode]\r\n        })] : []),\r\n\r\n        // Drawer scrim\r\n        new VNode({\r\n          tag: 'div',\r\n          props: { style: scrimStyle }\r\n        }),\r\n\r\n        // Drawer\r\n        ...(drawerVNode ? [new VNode({\r\n          tag: 'div',\r\n          props: { style: drawerContainerStyle },\r\n          children: [drawerVNode]\r\n        })] : []),\r\n\r\n        // End drawer\r\n        ...(endDrawerVNode ? [new VNode({\r\n          tag: 'div',\r\n          props: { style: endDrawerContainerStyle },\r\n          children: [endDrawerVNode]\r\n        })] : []),\r\n\r\n        // Snack bar\r\n        ...(context.element?.state?._currentSnackBar ? [\r\n          new VNode({\r\n            tag: 'div',\r\n            props: {\r\n              style: {\r\n                position: 'fixed',\r\n                bottom: '16px',\r\n                left: '16px',\r\n                right: 'auto',\r\n                zIndex: 300,\r\n                animation: 'slideUp 0.3s ease-out'\r\n              }\r\n            },\r\n            children: [context.element.state._currentSnackBar.widget.build(context)]\r\n          })\r\n        ] : [])\r\n      ],\r\n      key: this.key\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Get FAB container style based on location\r\n   * @private\r\n   */\r\n  _getFabContainerStyle() {\r\n    const baseStyle = {\r\n      position: 'absolute',\r\n      zIndex: 250\r\n    };\r\n\r\n    const spacing = 16;\r\n\r\n    switch (this.floatingActionButtonLocation) {\r\n      case FloatingActionButtonLocation.endFloat:\r\n        return { ...baseStyle, bottom: `${spacing}px`, right: `${spacing}px` };\r\n      case FloatingActionButtonLocation.endDocked:\r\n        return { ...baseStyle, bottom: '72px', right: `${spacing}px` };\r\n      case FloatingActionButtonLocation.endTop:\r\n        return { ...baseStyle, top: '80px', right: `${spacing}px` };\r\n      case FloatingActionButtonLocation.startFloat:\r\n        return { ...baseStyle, bottom: `${spacing}px`, left: `${spacing}px` };\r\n      case FloatingActionButtonLocation.startDocked:\r\n        return { ...baseStyle, bottom: '72px', left: `${spacing}px` };\r\n      case FloatingActionButtonLocation.startTop:\r\n        return { ...baseStyle, top: '80px', left: `${spacing}px` };\r\n      case FloatingActionButtonLocation.centerFloat:\r\n        return { ...baseStyle, bottom: `${spacing}px`, left: '50%', transform: 'translateX(-50%)' };\r\n      case FloatingActionButtonLocation.centerDocked:\r\n        return { ...baseStyle, bottom: '72px', left: '50%', transform: 'translateX(-50%)' };\r\n      case FloatingActionButtonLocation.centerTop:\r\n        return { ...baseStyle, top: '80px', left: '50%', transform: 'translateX(-50%)' };\r\n      default:\r\n        return { ...baseStyle, bottom: `${spacing}px`, right: `${spacing}px` };\r\n    }\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({ name: 'appBar', value: this.appBar ? 'AppBar' : 'null' });\r\n    properties.push({ name: 'body', value: this.body ? 'Widget' : 'null' });\r\n    properties.push({ name: 'floatingActionButton', value: this.floatingActionButton ? 'FAB' : 'null' });\r\n    properties.push({ name: 'drawer', value: this.drawer ? 'Drawer' : 'null' });\r\n    properties.push({ name: 'bottomNavigationBar', value: this.bottomNavigationBar ? 'BottomNav' : 'null' });\r\n  }\r\n\r\n  createElement(parent, runtime) {\r\n    return new ScaffoldElement(this, parent, runtime);\r\n  }\r\n}\r\n\r\nclass ScaffoldElement extends ScaffoldState {\r\n  constructor(widget, parent, runtime) {\r\n    super(widget, parent, runtime);\r\n  }\r\n\r\n  mount(parent = null) {\r\n    // Setup context first so it's available for performRebuild\r\n    this._context = {\r\n      element: this,\r\n      runtime: this.runtime,\r\n      parent: parent || this.parent,\r\n      findAncestorStateOfType: (stateType) => {\r\n        let current = parent || this.parent;\r\n        while (current) {\r\n          if (current instanceof stateType) {\r\n            return current;\r\n          }\r\n          current = current.parent;\r\n        }\r\n        return null;\r\n      }\r\n    };\r\n\r\n    // Delegate to base Element to handle _mounted, _parent, and performRebuild\r\n    super.mount(parent);\r\n  }\r\n\r\n  getElementId() {\r\n    return this._elementId || (this._elementId = `scaffold-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`);\r\n  }\r\n\r\n  getWidgetPath() {\r\n    const parts = [];\r\n    let current = this;\r\n    while (current) {\r\n      if (current.widget) {\r\n        parts.unshift(current.widget.constructor.name);\r\n      }\r\n      current = current.parent;\r\n    }\r\n    return parts.join('/');\r\n  }\r\n\r\n  performRebuild() {\r\n    if (!this.mounted) {\r\n      this.mount();\r\n    }\r\n\r\n    // \u2705 CRITICAL: Make sure context exists before calling build\r\n    if (!this.context) {\r\n      this._context = {\r\n        element: this,\r\n        runtime: this.runtime,\r\n        parent: this.parent\r\n      };\r\n    }\r\n\r\n    // Call widget.build() with proper context\r\n    return this.widget.build(this.context);\r\n  }\r\n\r\n  build(context) {\r\n    // Ensure context is set\r\n    if (context) {\r\n      this._context = context;\r\n    }\r\n    return this.performRebuild();\r\n  }\r\n\r\n  markNeedsBuild() {\r\n    // Trigger rebuild through runtime\r\n    if (this.runtime && this.runtime.update) {\r\n      this.runtime.update();\r\n    }\r\n  }\r\n}\r\n\r\nclass AppBar extends StatelessWidget {\r\n  constructor({ title, backgroundColor, leading, actions } = {}) {\r\n    super();\r\n    this.title = title;\r\n    this.backgroundColor = backgroundColor;\r\n    this.leading = leading;\r\n    this.actions = actions;\r\n  }\r\n\r\n  build(context) {\r\n    // \u2705 FIX: Build title as VNode if it's a widget\r\n    let titleVNode = null;\r\n    if (this.title) {\r\n      if (this.title.createElement) {\r\n        // It's a widget - build it\r\n        let titleElement = this.title.createElement(context.element, context.element.runtime);\r\n        context.element.addChild(titleElement);\r\n        titleElement.mount();\r\n        titleVNode = titleElement.vnode;\r\n      } else {\r\n        // It's a string - wrap in VNode\r\n        titleVNode = new VNode({\r\n          tag: 'span',\r\n          children: [String(this.title)]\r\n        });\r\n      }\r\n    }\r\n\r\n    // \u2705 FIX: Resolve background color\r\n    let bgColor = this.backgroundColor;\r\n    if (bgColor && typeof bgColor.toCSSString === 'function') {\r\n      bgColor = bgColor.toCSSString();\r\n    } else if (bgColor && typeof bgColor === 'object' && bgColor.value) {\r\n      // Fallback for Color objects without toCSSString (shouldn't happen but safe)\r\n      const value = bgColor.value;\r\n      const hex = value.toString(16).padStart(8, '0');\r\n      bgColor = `#${hex.slice(2)}`;\r\n    }\r\n\r\n    // \u2705 FIX: Use VNode constructor correctly with OBJECT parameter\r\n    return new VNode({\r\n      tag: 'div',  // \u2705 CORRECT: tag is inside the config object\r\n      props: {\r\n        className: 'flutter-appbar',\r\n        'data-widget': 'AppBar'\r\n      },\r\n      style: {\r\n        backgroundColor: bgColor || 'var(--md-sys-color-primary)',\r\n        color: '#FFFFFF',\r\n        padding: '16px',\r\n        fontSize: '20px',\r\n        fontWeight: 'bold',\r\n        display: 'flex',\r\n        alignItems: 'center',\r\n        minHeight: '56px'\r\n      },\r\n      children: titleVNode ? [titleVNode] : []\r\n    });\r\n  }\r\n}\r\n\r\n\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport {\r\n  Scaffold,\r\n  ScaffoldState,\r\n  ScaffoldElement,\r\n  SnackBar,\r\n  SnackBarClosedReason,\r\n  ScaffoldFeatureController,\r\n  FloatingActionButtonLocation,\r\n  DrawerAlignment,\r\n  AppBar\r\n};"],
-  "mappings": "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",
-  "names": ["StatelessWidget", "Widget", "Element", "VNode", "FloatingActionButtonLocation", "DrawerAlignment", "SnackBarClosedReason", "ScaffoldFeatureController", "widget", "completer", "closeCallback", "SnackBar", "key", "content", "backgroundColor", "elevation", "margin", "padding", "width", "shape", "behavior", "action", "duration", "animation", "onVisible", "context", "style", "children", "actionStyle", "ScaffoldState", "parent", "runtime", "snackBar", "resolve", "reject", "value", "controller", "Scaffold", "appBar", "body", "floatingActionButton", "floatingActionButtonLocation", "drawer", "endDrawer", "bottomNavigationBar", "resizeToAvoidBottomInset", "extendBody", "extendBodyBehindAppBar", "primary", "state", "elementId", "widgetPath", "appBarHeight", "bodyTop", "bodyBottom", "appBarVNode", "appBarElement", "bodyVNode", "bodyElement", "bottomNavVNode", "bottomNavElement", "fabVNode", "fabElement", "drawerVNode", "drawerElement", "endDrawerVNode", "endDrawerElement", "scaffoldStyle", "appBarContainerStyle", "bodyContainerStyle", "bottomNavContainerStyle", "fabContainerStyle", "drawerContainerStyle", "endDrawerContainerStyle", "scrimStyle", "baseStyle", "spacing", "properties", "ScaffoldElement", "stateType", "current", "parts", "AppBar", "title", "leading", "actions", "titleVNode", "titleElement", "bgColor"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/material/text.js b/packages/flutterjs_engine/package/material/dist/material/text.js
deleted file mode 100644
index 52aa4800..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/text.js
+++ /dev/null
@@ -1,2 +0,0 @@
-var F=Object.defineProperty;var L=(h,t,e)=>t in h?F(h,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):h[t]=e;var y=(h,t,e)=>(L(h,typeof t!="symbol"?t+"":t,e),e);import{StatelessWidget as I}from"../core/widget_element.js";import{VNode as M}from"@flutterjs/vdom/vnode";import{TextAlign as O,TextOverflow as T,TextDirection as $}from"../utils/utils.js";const o=class o{constructor({color:t="#000000",fontSize:e=14,fontWeight:s="400",fontStyle:i="normal",fontFamily:n="Roboto",height:l=1.5,letterSpacing:a=0,wordSpacing:c=0,decoration:d="none",decorationColor:g=null,decorationStyle:f="solid",decorationThickness:u=1,shadows:p=null,backgroundColor:S=null,backgroundOpacity:m=1,googleFont:b=null,fontVariant:w="normal",textTransform:x="none",opacity:k=1,strikethrough:v=!1,underline:W=!1,overline:C=!1,gradient:z=null}={}){this.color=t,this.fontSize=e,this.fontWeight=s,this.fontStyle=i,this.fontFamily=n,this.height=l,this.letterSpacing=a,this.wordSpacing=c,this.decoration=d,this.decorationColor=g,this.decorationStyle=f,this.decorationThickness=u,this.shadows=p,this.backgroundColor=S,this.backgroundOpacity=m,this.googleFont=b,this.fontVariant=w,this.textTransform=x,this.opacity=k,this.strikethrough=v,this.underline=W,this.overline=C,this.gradient=z,this.googleFont&&this._loadGoogleFont(this.googleFont)}_loadGoogleFont(t){if(typeof document>"u")return;const e=t.replace(/\s+/g,"+"),s=`google-font-${t.replace(/\s+/g,"-")}`;if(document.getElementById(s))return;const i=document.createElement("link");i.id=s,i.href=`https://fonts.googleapis.com/css2?family=${e}:wght@100;200;300;400;500;600;700;800;900&display=swap`,i.rel="stylesheet",i.crossOrigin="anonymous",document.head.appendChild(i)}copyWith({color:t,fontSize:e,fontWeight:s,fontStyle:i,fontFamily:n,height:l,letterSpacing:a,wordSpacing:c,decoration:d,decorationColor:g,decorationStyle:f,decorationThickness:u,shadows:p,backgroundColor:S,backgroundOpacity:m,googleFont:b,fontVariant:w,textTransform:x,opacity:k,strikethrough:v,underline:W,overline:C,gradient:z}={}){return new o({color:t??this.color,fontSize:e??this.fontSize,fontWeight:s??this.fontWeight,fontStyle:i??this.fontStyle,fontFamily:n??this.fontFamily,height:l??this.height,letterSpacing:a??this.letterSpacing,wordSpacing:c??this.wordSpacing,decoration:d??this.decoration,decorationColor:g??this.decorationColor,decorationStyle:f??this.decorationStyle,decorationThickness:u??this.decorationThickness,shadows:p??this.shadows,backgroundColor:S??this.backgroundColor,backgroundOpacity:m??this.backgroundOpacity,googleFont:b??this.googleFont,fontVariant:w??this.fontVariant,textTransform:x??this.textTransform,opacity:k??this.opacity,strikethrough:v??this.strikethrough,underline:W??this.underline,overline:C??this.overline,gradient:z??this.gradient})}merge(t){return t?this.copyWith(t):this}_buildTextDecoration(){const t=[];return this.underline&&t.push("underline"),this.overline&&t.push("overline"),this.strikethrough&&t.push("line-through"),t.length>0?t.join(" "):this.decoration}_buildTextShadow(){return!this.shadows||!Array.isArray(this.shadows)?"none":this.shadows.map(t=>{const e=t.offsetX??0,s=t.offsetY??0,i=t.blurRadius??0,n=t.color??"rgba(0,0,0,0.3)";return`${e}px ${s}px ${i}px ${n}`}).join(", ")}_buildBackground(){if(this.gradient)return this.gradient;if(!this.backgroundColor)return"transparent";if(this.backgroundOpacity<1){const t=this._hexToRgb(this.backgroundColor);return t?`rgba(${t.r}, ${t.g}, ${t.b}, ${this.backgroundOpacity})`:this.backgroundColor}return this.backgroundColor}_hexToRgb(t){const e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}toCSSString(){const t=this._buildTextDecoration();return{color:this.color,fontSize:`${this.fontSize}px`,fontWeight:this.fontWeight,fontStyle:this.fontStyle,fontFamily:this.fontFamily,lineHeight:this.height,letterSpacing:`${this.letterSpacing}px`,wordSpacing:`${this.wordSpacing}px`,textDecoration:t,textDecorationColor:this.decorationColor||"currentColor",textDecorationStyle:this.decorationStyle,textDecorationThickness:`${this.decorationThickness}px`,backgroundColor:this._buildBackground(),fontVariant:this.fontVariant,textTransform:this.textTransform,opacity:this.opacity,textShadow:this._buildTextShadow()}}toCSSObject(){return this.toCSSString()}toFlutterString(){return`TextStyle(color: ${this.color}, size: ${this.fontSize}, family: ${this.fontFamily}, weight: ${this.fontWeight})`}toString(){return`TextStyle(color: ${this.color}, size: ${this.fontSize}px, family: ${this.fontFamily}, weight: ${this.fontWeight})`}};y(o,"preset",{h1:new o({fontSize:32,fontWeight:"700",height:1.2}),h2:new o({fontSize:28,fontWeight:"700",height:1.3}),h3:new o({fontSize:24,fontWeight:"600",height:1.4}),h4:new o({fontSize:20,fontWeight:"600",height:1.4}),h5:new o({fontSize:16,fontWeight:"600",height:1.5}),h6:new o({fontSize:14,fontWeight:"600",height:1.5}),body1:new o({fontSize:16,fontWeight:"400",height:1.5}),body2:new o({fontSize:14,fontWeight:"400",height:1.5}),caption:new o({fontSize:12,fontWeight:"400",height:1.4,opacity:.7}),button:new o({fontSize:14,fontWeight:"600",textTransform:"uppercase"}),code:new o({fontSize:13,fontFamily:"monospace",fontWeight:"400"})}),y(o,"availableGoogleFonts",["Roboto","Open Sans","Lato","Montserrat","Raleway","Poppins","Inter","Playfair Display","Bebas Neue","Pacifico","Merriweather","Ubuntu","Quicksand","Source Code Pro","IBM Plex Mono","Fira Sans","Oswald","Crimson Text","Nunito","Chakra Petch","JetBrains Mono","Space Mono","Inconsolata","Roboto Mono","Cabin","Work Sans"]),y(o,"fontWeights",{thin:"100",extralight:"200",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"}),y(o,"textDecorations",{none:"none",underline:"underline",overline:"overline",lineThrough:"line-through",underlineOverline:"underline overline"});let r=o;class A extends I{constructor(t,e={}){let s="",i={};typeof t=="string"?(s=t,i=e):(i=t||{},s=i.data||"");const{key:n=null,style:l=new r,textAlign:a=O.left,textDirection:c=$.ltr,overflow:d=T.clip,maxLines:g=null,softWrap:f=!0,semanticsLabel:u=null,selectable:p=!0,selectionColor:S=null,onSelectionChanged:m=null}=i;super(n),this.data=s,this.style=l instanceof r?l:new r(l),this.textAlign=a,this.textDirection=c,this.overflow=d,this.maxLines=g,this.softWrap=f,this.semanticsLabel=u,this.selectable=p,this.selectionColor=S||"#b3d9ff",this.onSelectionChanged=m}build(t){const e=this._getInlineStyles(),s=t.element.getElementId(),i=t.element.getWidgetPath(),n={style:e,"data-element-id":s,"data-widget-path":i,"data-identification":t.element.getIdentificationStrategy(),"data-widget":"Text","data-text-align":this.textAlign,"data-overflow":this.overflow,"data-max-lines":this.maxLines,title:this.semanticsLabel||this.data};this.selectable?(n.className+=" fjs-text-selectable",n.style.userSelect="text",n.style.WebkitUserSelect="text",n.style.MozUserSelect="text",this.selectionColor&&(n.style["--selection-color"]=this.selectionColor)):(n.style.userSelect="none",n.style.WebkitUserSelect="none",n.style.MozUserSelect="none");const l={};return this.selectable&&this.onSelectionChanged&&(l.onselectionchange=()=>{const a=window.getSelection?window.getSelection().toString():"";this.onSelectionChanged(a)}),new M({tag:"span",props:n,children:[this.data],key:this.key,events:l})}_getInlineStyles(){const t={display:"inline-block",textAlign:this._mapTextAlign(),direction:this.textDirection===$.rtl?"rtl":"ltr",whiteSpace:this.softWrap?"normal":"nowrap",overflow:this._mapOverflow(),textOverflow:this.overflow===T.ellipsis?"ellipsis":"clip",boxSizing:"border-box"};return this.maxLines===1?(t.overflow="hidden",t.textOverflow="ellipsis",t.whiteSpace="nowrap"):this.maxLines&&this.maxLines>1&&(t.display="-webkit-box",t.WebkitLineClamp=this.maxLines,t.WebkitBoxOrient="vertical",t.overflow="hidden"),this.style&&this.style instanceof r&&Object.assign(t,this.style.toCSSString()),t}_mapTextAlign(){return{left:"left",right:"right",center:"center",justify:"justify",start:"start",end:"end"}[this.textAlign]??"left"}_mapOverflow(){return{clip:"hidden",fade:"hidden",ellipsis:"hidden",visible:"visible"}[this.overflow]??"hidden"}debugFillProperties(t){super.debugFillProperties(t),t.push({name:"data",value:this.data}),t.push({name:"textAlign",value:this.textAlign}),t.push({name:"overflow",value:this.overflow}),t.push({name:"maxLines",value:this.maxLines}),t.push({name:"softWrap",value:this.softWrap}),t.push({name:"selectable",value:this.selectable}),this.style&&this.style instanceof r&&t.push({name:"style",value:this.style.toString()})}}export{A as Text,r as TextStyle};
-//# sourceMappingURL=text.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/material/text.js.map b/packages/flutterjs_engine/package/material/dist/material/text.js.map
deleted file mode 100644
index 161bacd7..00000000
--- a/packages/flutterjs_engine/package/material/dist/material/text.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/material/text.js"],
-  "sourcesContent": ["import { StatelessWidget } from '../core/widget_element.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { TextAlign, TextOverflow, TextDirection } from '../utils/utils.js';\r\n\r\n/**\r\n * TextStyle - Comprehensive text styling class with Flutter-like API\r\n * Supports Google Fonts, text decorations, shadows, and advanced typography\r\n */\r\nclass TextStyle {\r\n  constructor({\r\n    color = '#000000',\r\n    fontSize = 14,\r\n    fontWeight = '400',\r\n    fontStyle = 'normal',\r\n    fontFamily = 'Roboto',\r\n    height = 1.5,\r\n    letterSpacing = 0,\r\n    wordSpacing = 0,\r\n    decoration = 'none',\r\n    decorationColor = null,\r\n    decorationStyle = 'solid',\r\n    decorationThickness = 1,\r\n    shadows = null,\r\n    backgroundColor = null,\r\n    backgroundOpacity = 1,\r\n    googleFont = null,\r\n    fontVariant = 'normal',\r\n    textTransform = 'none',\r\n    opacity = 1,\r\n    strikethrough = false,\r\n    underline = false,\r\n    overline = false,\r\n    gradient = null\r\n  } = {}) {\r\n    this.color = color;\r\n    this.fontSize = fontSize;\r\n    this.fontWeight = fontWeight;\r\n    this.fontStyle = fontStyle;\r\n    this.fontFamily = fontFamily;\r\n    this.height = height;\r\n    this.letterSpacing = letterSpacing;\r\n    this.wordSpacing = wordSpacing;\r\n    this.decoration = decoration;\r\n    this.decorationColor = decorationColor;\r\n    this.decorationStyle = decorationStyle;\r\n    this.decorationThickness = decorationThickness;\r\n    this.shadows = shadows;\r\n    this.backgroundColor = backgroundColor;\r\n    this.backgroundOpacity = backgroundOpacity;\r\n    this.googleFont = googleFont;\r\n    this.fontVariant = fontVariant;\r\n    this.textTransform = textTransform;\r\n    this.opacity = opacity;\r\n    this.strikethrough = strikethrough;\r\n    this.underline = underline;\r\n    this.overline = overline;\r\n    this.gradient = gradient;\r\n\r\n    if (this.googleFont) {\r\n      this._loadGoogleFont(this.googleFont);\r\n    }\r\n  }\r\n\r\n  // Static presets for common text styles\r\n  static preset = {\r\n    h1: new TextStyle({ fontSize: 32, fontWeight: '700', height: 1.2 }),\r\n    h2: new TextStyle({ fontSize: 28, fontWeight: '700', height: 1.3 }),\r\n    h3: new TextStyle({ fontSize: 24, fontWeight: '600', height: 1.4 }),\r\n    h4: new TextStyle({ fontSize: 20, fontWeight: '600', height: 1.4 }),\r\n    h5: new TextStyle({ fontSize: 16, fontWeight: '600', height: 1.5 }),\r\n    h6: new TextStyle({ fontSize: 14, fontWeight: '600', height: 1.5 }),\r\n    body1: new TextStyle({ fontSize: 16, fontWeight: '400', height: 1.5 }),\r\n    body2: new TextStyle({ fontSize: 14, fontWeight: '400', height: 1.5 }),\r\n    caption: new TextStyle({ fontSize: 12, fontWeight: '400', height: 1.4, opacity: 0.7 }),\r\n    button: new TextStyle({ fontSize: 14, fontWeight: '600', textTransform: 'uppercase' }),\r\n    code: new TextStyle({ fontSize: 13, fontFamily: 'monospace', fontWeight: '400' })\r\n  };\r\n\r\n  static availableGoogleFonts = [\r\n    'Roboto', 'Open Sans', 'Lato', 'Montserrat', 'Raleway', 'Poppins',\r\n    'Inter', 'Playfair Display', 'Bebas Neue', 'Pacifico', 'Merriweather',\r\n    'Ubuntu', 'Quicksand', 'Source Code Pro', 'IBM Plex Mono', 'Fira Sans',\r\n    'Oswald', 'Crimson Text', 'Nunito', 'Chakra Petch', 'JetBrains Mono',\r\n    'Space Mono', 'Inconsolata', 'Roboto Mono', 'Cabin', 'Work Sans'\r\n  ];\r\n\r\n  static fontWeights = {\r\n    thin: '100',\r\n    extralight: '200',\r\n    light: '300',\r\n    normal: '400',\r\n    medium: '500',\r\n    semibold: '600',\r\n    bold: '700',\r\n    extrabold: '800',\r\n    black: '900'\r\n  };\r\n\r\n  static textDecorations = {\r\n    none: 'none',\r\n    underline: 'underline',\r\n    overline: 'overline',\r\n    lineThrough: 'line-through',\r\n    underlineOverline: 'underline overline'\r\n  };\r\n\r\n  _loadGoogleFont(fontName) {\r\n    if (typeof document === 'undefined') return;\r\n\r\n    const formattedName = fontName.replace(/\\s+/g, '+');\r\n    const linkId = `google-font-${fontName.replace(/\\s+/g, '-')}`;\r\n\r\n    if (document.getElementById(linkId)) return;\r\n\r\n    const link = document.createElement('link');\r\n    link.id = linkId;\r\n    link.href = `https://fonts.googleapis.com/css2?family=${formattedName}:wght@100;200;300;400;500;600;700;800;900&display=swap`;\r\n    link.rel = 'stylesheet';\r\n    link.crossOrigin = 'anonymous';\r\n    document.head.appendChild(link);\r\n  }\r\n\r\n  copyWith({\r\n    color,\r\n    fontSize,\r\n    fontWeight,\r\n    fontStyle,\r\n    fontFamily,\r\n    height,\r\n    letterSpacing,\r\n    wordSpacing,\r\n    decoration,\r\n    decorationColor,\r\n    decorationStyle,\r\n    decorationThickness,\r\n    shadows,\r\n    backgroundColor,\r\n    backgroundOpacity,\r\n    googleFont,\r\n    fontVariant,\r\n    textTransform,\r\n    opacity,\r\n    strikethrough,\r\n    underline,\r\n    overline,\r\n    gradient\r\n  } = {}) {\r\n    return new TextStyle({\r\n      color: color ?? this.color,\r\n      fontSize: fontSize ?? this.fontSize,\r\n      fontWeight: fontWeight ?? this.fontWeight,\r\n      fontStyle: fontStyle ?? this.fontStyle,\r\n      fontFamily: fontFamily ?? this.fontFamily,\r\n      height: height ?? this.height,\r\n      letterSpacing: letterSpacing ?? this.letterSpacing,\r\n      wordSpacing: wordSpacing ?? this.wordSpacing,\r\n      decoration: decoration ?? this.decoration,\r\n      decorationColor: decorationColor ?? this.decorationColor,\r\n      decorationStyle: decorationStyle ?? this.decorationStyle,\r\n      decorationThickness: decorationThickness ?? this.decorationThickness,\r\n      shadows: shadows ?? this.shadows,\r\n      backgroundColor: backgroundColor ?? this.backgroundColor,\r\n      backgroundOpacity: backgroundOpacity ?? this.backgroundOpacity,\r\n      googleFont: googleFont ?? this.googleFont,\r\n      fontVariant: fontVariant ?? this.fontVariant,\r\n      textTransform: textTransform ?? this.textTransform,\r\n      opacity: opacity ?? this.opacity,\r\n      strikethrough: strikethrough ?? this.strikethrough,\r\n      underline: underline ?? this.underline,\r\n      overline: overline ?? this.overline,\r\n      gradient: gradient ?? this.gradient\r\n    });\r\n  }\r\n\r\n  merge(other) {\r\n    if (!other) return this;\r\n    return this.copyWith(other);\r\n  }\r\n\r\n  _buildTextDecoration() {\r\n    const decorations = [];\r\n    if (this.underline) decorations.push('underline');\r\n    if (this.overline) decorations.push('overline');\r\n    if (this.strikethrough) decorations.push('line-through');\r\n    return decorations.length > 0 ? decorations.join(' ') : this.decoration;\r\n  }\r\n\r\n  _buildTextShadow() {\r\n    if (!this.shadows || !Array.isArray(this.shadows)) return 'none';\r\n    return this.shadows\r\n      .map(s => {\r\n        const offsetX = s.offsetX ?? 0;\r\n        const offsetY = s.offsetY ?? 0;\r\n        const blurRadius = s.blurRadius ?? 0;\r\n        const color = s.color ?? 'rgba(0,0,0,0.3)';\r\n        return `${offsetX}px ${offsetY}px ${blurRadius}px ${color}`;\r\n      })\r\n      .join(', ');\r\n  }\r\n\r\n  _buildBackground() {\r\n    if (this.gradient) {\r\n      return this.gradient;\r\n    }\r\n\r\n    if (!this.backgroundColor) return 'transparent';\r\n\r\n    if (this.backgroundOpacity < 1) {\r\n      const rgb = this._hexToRgb(this.backgroundColor);\r\n      return rgb ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${this.backgroundOpacity})` : this.backgroundColor;\r\n    }\r\n\r\n    return this.backgroundColor;\r\n  }\r\n\r\n  _hexToRgb(hex) {\r\n    const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\r\n    return result ? {\r\n      r: parseInt(result[1], 16),\r\n      g: parseInt(result[2], 16),\r\n      b: parseInt(result[3], 16)\r\n    } : null;\r\n  }\r\n\r\n  toCSSString() {\r\n    const decorationStyle = this._buildTextDecoration();\r\n\r\n    return {\r\n      color: this.color,\r\n      fontSize: `${this.fontSize}px`,\r\n      fontWeight: this.fontWeight,\r\n      fontStyle: this.fontStyle,\r\n      fontFamily: this.fontFamily,\r\n      lineHeight: this.height,\r\n      letterSpacing: `${this.letterSpacing}px`,\r\n      wordSpacing: `${this.wordSpacing}px`,\r\n      textDecoration: decorationStyle,\r\n      textDecorationColor: this.decorationColor || 'currentColor',\r\n      textDecorationStyle: this.decorationStyle,\r\n      textDecorationThickness: `${this.decorationThickness}px`,\r\n      backgroundColor: this._buildBackground(),\r\n      fontVariant: this.fontVariant,\r\n      textTransform: this.textTransform,\r\n      opacity: this.opacity,\r\n      textShadow: this._buildTextShadow()\r\n    };\r\n  }\r\n\r\n  toCSSObject() {\r\n    return this.toCSSString();\r\n  }\r\n\r\n  toFlutterString() {\r\n    return `TextStyle(color: ${this.color}, size: ${this.fontSize}, family: ${this.fontFamily}, weight: ${this.fontWeight})`;\r\n  }\r\n\r\n  toString() {\r\n    return `TextStyle(color: ${this.color}, size: ${this.fontSize}px, family: ${this.fontFamily}, weight: ${this.fontWeight})`;\r\n  }\r\n}\r\n\r\n/**\r\n * Text - StatelessWidget for rendering text with comprehensive styling\r\n * Supports selection, overflow handling, max lines, and text alignment\r\n */\r\nclass Text extends StatelessWidget {\r\n  constructor(dataOrOptions, options = {}) {\r\n    let _data = '';\r\n    let _opts = {};\r\n\r\n    if (typeof dataOrOptions === 'string') {\r\n      _data = dataOrOptions;\r\n      _opts = options;\r\n    } else {\r\n      _opts = dataOrOptions || {};\r\n      _data = _opts.data || '';\r\n    }\r\n\r\n    const {\r\n      key = null,\r\n      style = new TextStyle(),\r\n      textAlign = TextAlign.left,\r\n      textDirection = TextDirection.ltr,\r\n      overflow = TextOverflow.clip,\r\n      maxLines = null,\r\n      softWrap = true,\r\n      semanticsLabel = null,\r\n      selectable = true,\r\n      selectionColor = null,\r\n      onSelectionChanged = null\r\n    } = _opts;\r\n\r\n    super(key);\r\n    this.data = _data;\r\n    this.style = style instanceof TextStyle ? style : new TextStyle(style);\r\n    this.textAlign = textAlign;\r\n    this.textDirection = textDirection;\r\n    this.overflow = overflow;\r\n    this.maxLines = maxLines;\r\n    this.softWrap = softWrap;\r\n    this.semanticsLabel = semanticsLabel;\r\n    this.selectable = selectable;\r\n    this.selectionColor = selectionColor || '#b3d9ff';\r\n    this.onSelectionChanged = onSelectionChanged;\r\n  }\r\n\r\n  build(context) {\r\n    const inlineStyles = this._getInlineStyles();\r\n    const elementId = context.element.getElementId();\r\n    const widgetPath = context.element.getWidgetPath();\r\n\r\n    const props = {\r\n      // className: 'fjs-text',\r\n      style: inlineStyles,\r\n      'data-element-id': elementId,\r\n      'data-widget-path': widgetPath,\r\n      'data-identification': context.element.getIdentificationStrategy(),\r\n      'data-widget': 'Text',\r\n      'data-text-align': this.textAlign,\r\n      'data-overflow': this.overflow,\r\n      'data-max-lines': this.maxLines,\r\n      title: this.semanticsLabel || this.data\r\n    };\r\n\r\n    if (this.selectable) {\r\n      props.className += ' fjs-text-selectable';\r\n      props.style.userSelect = 'text';\r\n      props.style.WebkitUserSelect = 'text';\r\n      props.style.MozUserSelect = 'text';\r\n      if (this.selectionColor) {\r\n        props.style['--selection-color'] = this.selectionColor;\r\n      }\r\n    } else {\r\n      props.style.userSelect = 'none';\r\n      props.style.WebkitUserSelect = 'none';\r\n      props.style.MozUserSelect = 'none';\r\n    }\r\n\r\n    const events = {};\r\n    if (this.selectable && this.onSelectionChanged) {\r\n      events.onselectionchange = () => {\r\n        const selected = window.getSelection ? window.getSelection().toString() : '';\r\n        this.onSelectionChanged(selected);\r\n      };\r\n    }\r\n\r\n    return new VNode({\r\n      tag: 'span',\r\n      props,\r\n      children: [this.data],\r\n      key: this.key,\r\n      events\r\n    });\r\n  }\r\n\r\n  _getInlineStyles() {\r\n    const styles = {\r\n      display: 'inline-block',\r\n      textAlign: this._mapTextAlign(),\r\n      direction: this.textDirection === TextDirection.rtl ? 'rtl' : 'ltr',\r\n      whiteSpace: this.softWrap ? 'normal' : 'nowrap',\r\n      overflow: this._mapOverflow(),\r\n      textOverflow: this.overflow === TextOverflow.ellipsis ? 'ellipsis' : 'clip',\r\n      boxSizing: 'border-box'\r\n    };\r\n\r\n    // Handle max lines\r\n    if (this.maxLines === 1) {\r\n      styles.overflow = 'hidden';\r\n      styles.textOverflow = 'ellipsis';\r\n      styles.whiteSpace = 'nowrap';\r\n    } else if (this.maxLines && this.maxLines > 1) {\r\n      styles.display = '-webkit-box';\r\n      styles.WebkitLineClamp = this.maxLines;\r\n      styles.WebkitBoxOrient = 'vertical';\r\n      styles.overflow = 'hidden';\r\n    }\r\n\r\n    // Merge text style\r\n    if (this.style && this.style instanceof TextStyle) {\r\n      Object.assign(styles, this.style.toCSSString());\r\n    }\r\n\r\n    return styles;\r\n  }\r\n\r\n  _mapTextAlign() {\r\n    const alignMap = {\r\n      left: 'left',\r\n      right: 'right',\r\n      center: 'center',\r\n      justify: 'justify',\r\n      start: 'start',\r\n      end: 'end'\r\n    };\r\n    return alignMap[this.textAlign] ?? 'left';\r\n  }\r\n\r\n  _mapOverflow() {\r\n    const overflowMap = {\r\n      clip: 'hidden',\r\n      fade: 'hidden',\r\n      ellipsis: 'hidden',\r\n      visible: 'visible'\r\n    };\r\n    return overflowMap[this.overflow] ?? 'hidden';\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({ name: 'data', value: this.data });\r\n    properties.push({ name: 'textAlign', value: this.textAlign });\r\n    properties.push({ name: 'overflow', value: this.overflow });\r\n    properties.push({ name: 'maxLines', value: this.maxLines });\r\n    properties.push({ name: 'softWrap', value: this.softWrap });\r\n    properties.push({ name: 'selectable', value: this.selectable });\r\n    if (this.style && this.style instanceof TextStyle) {\r\n      properties.push({ name: 'style', value: this.style.toString() });\r\n    }\r\n  }\r\n}\r\n\r\nexport { Text, TextStyle };"],
-  "mappings": "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",
-  "names": ["StatelessWidget", "VNode", "TextAlign", "TextOverflow", "TextDirection", "_TextStyle", "color", "fontSize", "fontWeight", "fontStyle", "fontFamily", "height", "letterSpacing", "wordSpacing", "decoration", "decorationColor", "decorationStyle", "decorationThickness", "shadows", "backgroundColor", "backgroundOpacity", "googleFont", "fontVariant", "textTransform", "opacity", "strikethrough", "underline", "overline", "gradient", "fontName", "formattedName", "linkId", "link", "other", "decorations", "s", "offsetX", "offsetY", "blurRadius", "rgb", "hex", "result", "__publicField", "TextStyle", "Text", "dataOrOptions", "options", "_data", "_opts", "key", "style", "textAlign", "textDirection", "overflow", "maxLines", "softWrap", "semanticsLabel", "selectable", "selectionColor", "onSelectionChanged", "context", "inlineStyles", "elementId", "widgetPath", "props", "events", "selected", "styles", "properties"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/badge_theme.js b/packages/flutterjs_engine/package/material/dist/utils/badge_theme.js
deleted file mode 100644
index 6b2b3138..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/badge_theme.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class p{constructor({backgroundColor:t,textColor:o,smallSize:i=6,largeSize:e=24,padding:r=4,alignment:l="topEnd",offset:a,textStyle:s,textScaleFactor:n=.75,border:d,borderRadius:g=12,elevation:h=4,shadowColor:S="#000000"}={}){this.backgroundColor=t,this.textColor=o,this.smallSize=i,this.largeSize=e,this.padding=r,this.alignment=l,this.offset=a,this.textStyle=s,this.textScaleFactor=n,this.border=d,this.borderRadius=g,this.elevation=h,this.shadowColor=S}getSmallBadgeStyle(t={}){return{width:`${this.smallSize}px`,height:`${this.smallSize}px`,borderRadius:"50%",backgroundColor:this.backgroundColor||t.error||"#B3261E",position:"absolute",top:`-${this.smallSize/2}px`,right:`-${this.smallSize/2}px`,border:this.border?`2px solid ${this.border}`:"none",boxShadow:`0 2px 4px ${this.shadowColor}40`,zIndex:1e3}}getLargeBadgeStyle(t={}){return{minWidth:`${this.largeSize}px`,height:`${this.largeSize}px`,borderRadius:`${this.borderRadius}px`,backgroundColor:this.backgroundColor||t.error||"#B3261E",color:this.textColor||t.onError||"#FFFFFF",padding:`0 ${this.padding}px`,display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:"12px",fontWeight:"bold",position:"absolute",top:`-${this.largeSize/2}px`,right:`-${this.largeSize/2}px`,border:this.border?`2px solid ${this.border}`:"none",boxShadow:`0 ${this.elevation}px ${this.elevation*2}px ${this.shadowColor}40`,zIndex:1e3}}getBadgeTextStyle(t={}){return{fontSize:"12px",fontWeight:"bold",color:this.textColor||t.onError||"#FFFFFF",lineHeight:1,userSelect:"none"}}getAlignmentStyle(){const t={topStart:{top:`-${this.largeSize/2}px`,left:`-${this.largeSize/2}px`},topEnd:{top:`-${this.largeSize/2}px`,right:`-${this.largeSize/2}px`},bottomStart:{bottom:`-${this.largeSize/2}px`,left:`-${this.largeSize/2}px`},bottomEnd:{bottom:`-${this.largeSize/2}px`,right:`-${this.largeSize/2}px`}};return t[this.alignment]||t.topEnd}getContainerStyle(){return{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center"}}getVisibilityStyle(t=!0){return{opacity:t?1:0,transform:t?"scale(1)":"scale(0)",transition:"all 0.3s ease",pointerEvents:t?"auto":"none"}}getAnimationStyle(){return{transition:"all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"}}getResponsiveStyle(t="medium",o={}){const i={small:{largeSize:18,padding:2,fontSize:"10px"},medium:{largeSize:24,padding:4,fontSize:"12px"},large:{largeSize:28,padding:6,fontSize:"14px"}},e=i[t]||i.medium;return{...this.getLargeBadgeStyle(o),minWidth:`${e.largeSize}px`,height:`${e.largeSize}px`,padding:`0 ${e.padding}px`,fontSize:e.fontSize}}copyWith({backgroundColor:t,textColor:o,smallSize:i,largeSize:e,padding:r,alignment:l,offset:a,textStyle:s,textScaleFactor:n,border:d,borderRadius:g,elevation:h,shadowColor:S}={}){return new p({backgroundColor:t??this.backgroundColor,textColor:o??this.textColor,smallSize:i??this.smallSize,largeSize:e??this.largeSize,padding:r??this.padding,alignment:l??this.alignment,offset:a??this.offset,textStyle:s??this.textStyle,textScaleFactor:n??this.textScaleFactor,border:d??this.border,borderRadius:g??this.borderRadius,elevation:h??this.elevation,shadowColor:S??this.shadowColor})}merge(t){return t?this.copyWith({backgroundColor:t.backgroundColor,textColor:t.textColor,smallSize:t.smallSize,largeSize:t.largeSize,padding:t.padding,alignment:t.alignment,offset:t.offset,textStyle:t.textStyle,textScaleFactor:t.textScaleFactor,border:t.border,borderRadius:t.borderRadius,elevation:t.elevation,shadowColor:t.shadowColor}):this}toString(){return`BadgeTheme(backgroundColor: ${this.backgroundColor}, largeSize: ${this.largeSize}px)`}}export{p as BadgeTheme};
-//# sourceMappingURL=badge_theme.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/badge_theme.js.map b/packages/flutterjs_engine/package/material/dist/utils/badge_theme.js.map
deleted file mode 100644
index 7382d21d..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/badge_theme.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/badge_theme.js"],
-  "sourcesContent": ["/**\r\n * Material Design 3 Badge Theme\r\n * Defines the visual properties of Badge widgets\r\n * Follows Flutter Material Design 3 specification\r\n * \r\n * Flutter Reference: https://api.flutter.dev/flutter/material/BadgeThemeData-class.html\r\n */\r\nexport class BadgeTheme {\r\n  constructor({\r\n    // Colors\r\n    backgroundColor,\r\n    textColor,\r\n    \r\n    // Size & Padding\r\n    smallSize = 6,\r\n    largeSize = 24,\r\n    padding = 4,\r\n    \r\n    // Position\r\n    alignment = 'topEnd',\r\n    offset,\r\n    \r\n    // Text & Font\r\n    textStyle,\r\n    textScaleFactor = 0.75,\r\n    \r\n    // Border & Shadow\r\n    border,\r\n    borderRadius = 12,\r\n    elevation = 4,\r\n    shadowColor = '#000000'\r\n  } = {}) {\r\n    this.backgroundColor = backgroundColor;\r\n    this.textColor = textColor;\r\n    this.smallSize = smallSize;\r\n    this.largeSize = largeSize;\r\n    this.padding = padding;\r\n    this.alignment = alignment;\r\n    this.offset = offset;\r\n    this.textStyle = textStyle;\r\n    this.textScaleFactor = textScaleFactor;\r\n    this.border = border;\r\n    this.borderRadius = borderRadius;\r\n    this.elevation = elevation;\r\n    this.shadowColor = shadowColor;\r\n  }\r\n\r\n  /**\r\n   * Get small badge CSS (indicator only, no text)\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getSmallBadgeStyle(themeColors = {}) {\r\n    return {\r\n      width: `${this.smallSize}px`,\r\n      height: `${this.smallSize}px`,\r\n      borderRadius: '50%',\r\n      backgroundColor: this.backgroundColor || themeColors.error || '#B3261E',\r\n      position: 'absolute',\r\n      top: `-${this.smallSize / 2}px`,\r\n      right: `-${this.smallSize / 2}px`,\r\n      border: this.border ? `2px solid ${this.border}` : 'none',\r\n      boxShadow: `0 2px 4px ${this.shadowColor}40`,\r\n      zIndex: 1000\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get large badge CSS (with text/number)\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getLargeBadgeStyle(themeColors = {}) {\r\n    return {\r\n      minWidth: `${this.largeSize}px`,\r\n      height: `${this.largeSize}px`,\r\n      borderRadius: `${this.borderRadius}px`,\r\n      backgroundColor: this.backgroundColor || themeColors.error || '#B3261E',\r\n      color: this.textColor || themeColors.onError || '#FFFFFF',\r\n      padding: `0 ${this.padding}px`,\r\n      display: 'inline-flex',\r\n      alignItems: 'center',\r\n      justifyContent: 'center',\r\n      fontSize: '12px',\r\n      fontWeight: 'bold',\r\n      position: 'absolute',\r\n      top: `-${this.largeSize / 2}px`,\r\n      right: `-${this.largeSize / 2}px`,\r\n      border: this.border ? `2px solid ${this.border}` : 'none',\r\n      boxShadow: `0 ${this.elevation}px ${this.elevation * 2}px ${this.shadowColor}40`,\r\n      zIndex: 1000\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get badge text CSS\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getBadgeTextStyle(themeColors = {}) {\r\n    return {\r\n      fontSize: '12px',\r\n      fontWeight: 'bold',\r\n      color: this.textColor || themeColors.onError || '#FFFFFF',\r\n      lineHeight: 1,\r\n      userSelect: 'none'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get alignment position CSS\r\n   * @returns {Object} CSS positioning properties\r\n   */\r\n  getAlignmentStyle() {\r\n    const alignments = {\r\n      topStart: { top: `-${this.largeSize / 2}px`, left: `-${this.largeSize / 2}px` },\r\n      topEnd: { top: `-${this.largeSize / 2}px`, right: `-${this.largeSize / 2}px` },\r\n      bottomStart: { bottom: `-${this.largeSize / 2}px`, left: `-${this.largeSize / 2}px` },\r\n      bottomEnd: { bottom: `-${this.largeSize / 2}px`, right: `-${this.largeSize / 2}px` }\r\n    };\r\n    return alignments[this.alignment] || alignments.topEnd;\r\n  }\r\n\r\n  /**\r\n   * Get badge container wrapper CSS\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getContainerStyle() {\r\n    return {\r\n      position: 'relative',\r\n      display: 'inline-flex',\r\n      alignItems: 'center',\r\n      justifyContent: 'center'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get badge visibility CSS\r\n   * @param {boolean} visible - Whether badge should be visible\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getVisibilityStyle(visible = true) {\r\n    return {\r\n      opacity: visible ? 1 : 0,\r\n      transform: visible ? 'scale(1)' : 'scale(0)',\r\n      transition: 'all 0.3s ease',\r\n      pointerEvents: visible ? 'auto' : 'none'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get badge animation CSS\r\n   * @returns {Object} CSS animation properties\r\n   */\r\n  getAnimationStyle() {\r\n    return {\r\n      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get responsive badge CSS (scales on small screens)\r\n   * @param {string} screenSize - 'small', 'medium', 'large'\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getResponsiveStyle(screenSize = 'medium', themeColors = {}) {\r\n    const sizes = {\r\n      small: {\r\n        largeSize: 18,\r\n        padding: 2,\r\n        fontSize: '10px'\r\n      },\r\n      medium: {\r\n        largeSize: 24,\r\n        padding: 4,\r\n        fontSize: '12px'\r\n      },\r\n      large: {\r\n        largeSize: 28,\r\n        padding: 6,\r\n        fontSize: '14px'\r\n      }\r\n    };\r\n\r\n    const size = sizes[screenSize] || sizes.medium;\r\n    return {\r\n      ...this.getLargeBadgeStyle(themeColors),\r\n      minWidth: `${size.largeSize}px`,\r\n      height: `${size.largeSize}px`,\r\n      padding: `0 ${size.padding}px`,\r\n      fontSize: size.fontSize\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Copy this theme with updated properties\r\n   * @param {Object} properties - Properties to override\r\n   * @returns {BadgeTheme} New theme instance\r\n   */\r\n  copyWith({\r\n    backgroundColor,\r\n    textColor,\r\n    smallSize,\r\n    largeSize,\r\n    padding,\r\n    alignment,\r\n    offset,\r\n    textStyle,\r\n    textScaleFactor,\r\n    border,\r\n    borderRadius,\r\n    elevation,\r\n    shadowColor\r\n  } = {}) {\r\n    return new BadgeTheme({\r\n      backgroundColor: backgroundColor ?? this.backgroundColor,\r\n      textColor: textColor ?? this.textColor,\r\n      smallSize: smallSize ?? this.smallSize,\r\n      largeSize: largeSize ?? this.largeSize,\r\n      padding: padding ?? this.padding,\r\n      alignment: alignment ?? this.alignment,\r\n      offset: offset ?? this.offset,\r\n      textStyle: textStyle ?? this.textStyle,\r\n      textScaleFactor: textScaleFactor ?? this.textScaleFactor,\r\n      border: border ?? this.border,\r\n      borderRadius: borderRadius ?? this.borderRadius,\r\n      elevation: elevation ?? this.elevation,\r\n      shadowColor: shadowColor ?? this.shadowColor\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Merge with another BadgeTheme\r\n   * @param {BadgeTheme} other - Theme to merge with\r\n   * @returns {BadgeTheme} Merged theme\r\n   */\r\n  merge(other) {\r\n    if (!other) return this;\r\n    return this.copyWith({\r\n      backgroundColor: other.backgroundColor,\r\n      textColor: other.textColor,\r\n      smallSize: other.smallSize,\r\n      largeSize: other.largeSize,\r\n      padding: other.padding,\r\n      alignment: other.alignment,\r\n      offset: other.offset,\r\n      textStyle: other.textStyle,\r\n      textScaleFactor: other.textScaleFactor,\r\n      border: other.border,\r\n      borderRadius: other.borderRadius,\r\n      elevation: other.elevation,\r\n      shadowColor: other.shadowColor\r\n    });\r\n  }\r\n\r\n  toString() {\r\n    return `BadgeTheme(backgroundColor: ${this.backgroundColor}, largeSize: ${this.largeSize}px)`;\r\n  }\r\n}"],
-  "mappings": "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",
-  "names": ["BadgeTheme", "backgroundColor", "textColor", "smallSize", "largeSize", "padding", "alignment", "offset", "textStyle", "textScaleFactor", "border", "borderRadius", "elevation", "shadowColor", "themeColors", "alignments", "visible", "screenSize", "sizes", "size", "other"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/border.js b/packages/flutterjs_engine/package/material/dist/utils/border.js
deleted file mode 100644
index f77a864b..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/border.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class s{constructor({top:t=null,right:o=null,bottom:i=null,left:l=null}={}){this.top=t||{width:0,color:"#000000",style:"solid"},this.right=o||{width:0,color:"#000000",style:"solid"},this.bottom=i||{width:0,color:"#000000",style:"solid"},this.left=l||{width:0,color:"#000000",style:"solid"}}static all({width:t=1,color:o="#000000",style:i="solid"}={}){const l={width:t,color:o,style:i};return new s({top:l,right:l,bottom:l,left:l})}static symmetric({vertical:t=null,horizontal:o=null}={}){return new s({top:t,bottom:t,left:o,right:o})}toCSSString(){const{width:t,color:o,style:i}=this.bottom;return t>0?`${t}px ${i} ${o}`:"none"}toString(){return`Border(top: ${this.top.width}px, right: ${this.right.width}px)`}}export{s as Border};
-//# sourceMappingURL=border.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/border.js.map b/packages/flutterjs_engine/package/material/dist/utils/border.js.map
deleted file mode 100644
index df7265d3..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/border.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/border.js"],
-  "sourcesContent": ["export class Border {\r\n  constructor({\r\n    top = null,\r\n    right = null,\r\n    bottom = null,\r\n    left = null\r\n  } = {}) {\r\n    this.top = top || { width: 0, color: '#000000', style: 'solid' };\r\n    this.right = right || { width: 0, color: '#000000', style: 'solid' };\r\n    this.bottom = bottom || { width: 0, color: '#000000', style: 'solid' };\r\n    this.left = left || { width: 0, color: '#000000', style: 'solid' };\r\n  }\r\n\r\n  static all({ width = 1, color = '#000000', style = 'solid' } = {}) {\r\n    const side = { width, color, style };\r\n    return new Border({ top: side, right: side, bottom: side, left: side });\r\n  }\r\n\r\n  static symmetric({ vertical = null, horizontal = null } = {}) {\r\n    return new Border({\r\n      top: vertical,\r\n      bottom: vertical,\r\n      left: horizontal,\r\n      right: horizontal\r\n    });\r\n  }\r\n\r\n  toCSSString() {\r\n    const { width, color, style } = this.bottom;\r\n    return width > 0 ? `${width}px ${style} ${color}` : 'none';\r\n  }\r\n\r\n  toString() {\r\n    return `Border(top: ${this.top.width}px, right: ${this.right.width}px)`;\r\n  }\r\n}"],
-  "mappings": "AAAO,MAAMA,CAAO,CAClB,YAAY,CACV,IAAAC,EAAM,KACN,MAAAC,EAAQ,KACR,OAAAC,EAAS,KACT,KAAAC,EAAO,IACT,EAAI,CAAC,EAAG,CACN,KAAK,IAAMH,GAAO,CAAE,MAAO,EAAG,MAAO,UAAW,MAAO,OAAQ,EAC/D,KAAK,MAAQC,GAAS,CAAE,MAAO,EAAG,MAAO,UAAW,MAAO,OAAQ,EACnE,KAAK,OAASC,GAAU,CAAE,MAAO,EAAG,MAAO,UAAW,MAAO,OAAQ,EACrE,KAAK,KAAOC,GAAQ,CAAE,MAAO,EAAG,MAAO,UAAW,MAAO,OAAQ,CACnE,CAEA,OAAO,IAAI,CAAE,MAAAC,EAAQ,EAAG,MAAAC,EAAQ,UAAW,MAAAC,EAAQ,OAAQ,EAAI,CAAC,EAAG,CACjE,MAAMC,EAAO,CAAE,MAAAH,EAAO,MAAAC,EAAO,MAAAC,CAAM,EACnC,OAAO,IAAIP,EAAO,CAAE,IAAKQ,EAAM,MAAOA,EAAM,OAAQA,EAAM,KAAMA,CAAK,CAAC,CACxE,CAEA,OAAO,UAAU,CAAE,SAAAC,EAAW,KAAM,WAAAC,EAAa,IAAK,EAAI,CAAC,EAAG,CAC5D,OAAO,IAAIV,EAAO,CAChB,IAAKS,EACL,OAAQA,EACR,KAAMC,EACN,MAAOA,CACT,CAAC,CACH,CAEA,aAAc,CACZ,KAAM,CAAE,MAAAL,EAAO,MAAAC,EAAO,MAAAC,CAAM,EAAI,KAAK,OACrC,OAAOF,EAAQ,EAAI,GAAGA,CAAK,MAAME,CAAK,IAAID,CAAK,GAAK,MACtD,CAEA,UAAW,CACT,MAAO,eAAe,KAAK,IAAI,KAAK,cAAc,KAAK,MAAM,KAAK,KACpE,CACF",
-  "names": ["Border", "top", "right", "bottom", "left", "width", "color", "style", "side", "vertical", "horizontal"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/border_radius.js b/packages/flutterjs_engine/package/material/dist/utils/border_radius.js
deleted file mode 100644
index d2430199..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/border_radius.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class e{constructor(t,o){this.x=t,this.y=o||t}static circular(t){return new e(t)}static elliptical(t,o){return new e(t,o)}static get zero(){return new e(0)}}class r{constructor({topLeft:t=e.zero,topRight:o=e.zero,bottomLeft:i=e.zero,bottomRight:c=e.zero}={}){this.topLeft=t,this.topRight=o,this.bottomLeft=i,this.bottomRight=c}static all(t){const o=typeof t=="number"?e.circular(t):t;return new r({topLeft:o,topRight:o,bottomLeft:o,bottomRight:o})}static circular(t){return r.all(e.circular(t))}static only({topLeft:t=e.zero,topRight:o=e.zero,bottomLeft:i=e.zero,bottomRight:c=e.zero}={}){return new r({topLeft:t,topRight:o,bottomLeft:i,bottomRight:c})}static horizontal({left:t=e.zero,right:o=e.zero}={}){return new r({topLeft:t,topRight:o,bottomLeft:t,bottomRight:o})}static vertical({top:t=e.zero,bottom:o=e.zero}={}){return new r({topLeft:t,topRight:t,bottomLeft:o,bottomRight:o})}toCSS(){const t=o=>`${o.x}px`;return`${t(this.topLeft)} ${t(this.topRight)} ${t(this.bottomRight)} ${t(this.bottomLeft)}`}}export{r as BorderRadius};
-//# sourceMappingURL=border_radius.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/border_radius.js.map b/packages/flutterjs_engine/package/material/dist/utils/border_radius.js.map
deleted file mode 100644
index 4125b892..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/border_radius.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/border_radius.js"],
-  "sourcesContent": ["/**\r\n * Radius class\r\n * Represents a radius for corners\r\n */\r\nclass Radius {\r\n    constructor(x, y) {\r\n        this.x = x;\r\n        this.y = y || x;\r\n    }\r\n\r\n    static circular(radius) {\r\n        return new Radius(radius);\r\n    }\r\n\r\n    static elliptical(x, y) {\r\n        return new Radius(x, y);\r\n    }\r\n\r\n    static get zero() {\r\n        return new Radius(0);\r\n    }\r\n}\r\n\r\n/**\r\n * BorderRadius class\r\n * Represents border radii for all four corners\r\n */\r\nclass BorderRadius {\r\n    constructor({\r\n        topLeft = Radius.zero,\r\n        topRight = Radius.zero,\r\n        bottomLeft = Radius.zero,\r\n        bottomRight = Radius.zero\r\n    } = {}) {\r\n        this.topLeft = topLeft;\r\n        this.topRight = topRight;\r\n        this.bottomLeft = bottomLeft;\r\n        this.bottomRight = bottomRight;\r\n    }\r\n\r\n    /**\r\n     * Create uniform radius\r\n     */\r\n    static all(radius) {\r\n        // If radius is a number, convert to Radius.circular\r\n        const r = typeof radius === 'number' ? Radius.circular(radius) : radius;\r\n        return new BorderRadius({\r\n            topLeft: r,\r\n            topRight: r,\r\n            bottomLeft: r,\r\n            bottomRight: r\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Create circular radius for all corners\r\n     */\r\n    static circular(radius) {\r\n        return BorderRadius.all(Radius.circular(radius));\r\n    }\r\n\r\n    /**\r\n     * Create for specific corners\r\n     */\r\n    static only({\r\n        topLeft = Radius.zero,\r\n        topRight = Radius.zero,\r\n        bottomLeft = Radius.zero,\r\n        bottomRight = Radius.zero\r\n    } = {}) {\r\n        return new BorderRadius({ topLeft, topRight, bottomLeft, bottomRight });\r\n    }\r\n\r\n    /**\r\n     * Create horizontal\r\n     */\r\n    static horizontal({ left = Radius.zero, right = Radius.zero } = {}) {\r\n        return new BorderRadius({\r\n            topLeft: left,\r\n            topRight: right,\r\n            bottomLeft: left,\r\n            bottomRight: right\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Create vertical\r\n     */\r\n    static vertical({ top = Radius.zero, bottom = Radius.zero } = {}) {\r\n        return new BorderRadius({\r\n            topLeft: top,\r\n            topRight: top,\r\n            bottomLeft: bottom,\r\n            bottomRight: bottom\r\n        });\r\n    }\r\n\r\n    toCSS() {\r\n        // Helper to get value\r\n        const val = (r) => `${r.x}px`;\r\n\r\n        return `${val(this.topLeft)} ${val(this.topRight)} ${val(this.bottomRight)} ${val(this.bottomLeft)}`;\r\n    }\r\n}\r\n\r\nexport {  BorderRadius };\r\n"],
-  "mappings": "AAIA,MAAMA,CAAO,CACT,YAAYC,EAAGC,EAAG,CACd,KAAK,EAAID,EACT,KAAK,EAAIC,GAAKD,CAClB,CAEA,OAAO,SAASE,EAAQ,CACpB,OAAO,IAAIH,EAAOG,CAAM,CAC5B,CAEA,OAAO,WAAWF,EAAGC,EAAG,CACpB,OAAO,IAAIF,EAAOC,EAAGC,CAAC,CAC1B,CAEA,WAAW,MAAO,CACd,OAAO,IAAIF,EAAO,CAAC,CACvB,CACJ,CAMA,MAAMI,CAAa,CACf,YAAY,CACR,QAAAC,EAAUL,EAAO,KACjB,SAAAM,EAAWN,EAAO,KAClB,WAAAO,EAAaP,EAAO,KACpB,YAAAQ,EAAcR,EAAO,IACzB,EAAI,CAAC,EAAG,CACJ,KAAK,QAAUK,EACf,KAAK,SAAWC,EAChB,KAAK,WAAaC,EAClB,KAAK,YAAcC,CACvB,CAKA,OAAO,IAAIL,EAAQ,CAEf,MAAMM,EAAI,OAAON,GAAW,SAAWH,EAAO,SAASG,CAAM,EAAIA,EACjE,OAAO,IAAIC,EAAa,CACpB,QAASK,EACT,SAAUA,EACV,WAAYA,EACZ,YAAaA,CACjB,CAAC,CACL,CAKA,OAAO,SAASN,EAAQ,CACpB,OAAOC,EAAa,IAAIJ,EAAO,SAASG,CAAM,CAAC,CACnD,CAKA,OAAO,KAAK,CACR,QAAAE,EAAUL,EAAO,KACjB,SAAAM,EAAWN,EAAO,KAClB,WAAAO,EAAaP,EAAO,KACpB,YAAAQ,EAAcR,EAAO,IACzB,EAAI,CAAC,EAAG,CACJ,OAAO,IAAII,EAAa,CAAE,QAAAC,EAAS,SAAAC,EAAU,WAAAC,EAAY,YAAAC,CAAY,CAAC,CAC1E,CAKA,OAAO,WAAW,CAAE,KAAAE,EAAOV,EAAO,KAAM,MAAAW,EAAQX,EAAO,IAAK,EAAI,CAAC,EAAG,CAChE,OAAO,IAAII,EAAa,CACpB,QAASM,EACT,SAAUC,EACV,WAAYD,EACZ,YAAaC,CACjB,CAAC,CACL,CAKA,OAAO,SAAS,CAAE,IAAAC,EAAMZ,EAAO,KAAM,OAAAa,EAASb,EAAO,IAAK,EAAI,CAAC,EAAG,CAC9D,OAAO,IAAII,EAAa,CACpB,QAASQ,EACT,SAAUA,EACV,WAAYC,EACZ,YAAaA,CACjB,CAAC,CACL,CAEA,OAAQ,CAEJ,MAAMC,EAAOL,GAAM,GAAGA,EAAE,CAAC,KAEzB,MAAO,GAAGK,EAAI,KAAK,OAAO,CAAC,IAAIA,EAAI,KAAK,QAAQ,CAAC,IAAIA,EAAI,KAAK,WAAW,CAAC,IAAIA,EAAI,KAAK,UAAU,CAAC,EACtG,CACJ",
-  "names": ["Radius", "x", "y", "radius", "BorderRadius", "topLeft", "topRight", "bottomLeft", "bottomRight", "r", "left", "right", "top", "bottom", "val"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/box_constraints.js b/packages/flutterjs_engine/package/material/dist/utils/box_constraints.js
deleted file mode 100644
index a3241cf8..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/box_constraints.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{Size as e}from"./size.js";class h{constructor(i=0,t=1/0,n=0,m=1/0){this.minWidth=i,this.maxWidth=t,this.minHeight=n,this.maxHeight=m}static tight(i){return new h(i.width,i.width,i.height,i.height)}static loose(i){return new h(0,i.width,0,i.height)}static expand({width:i=1/0,height:t=1/0}={}){return new h(0,i,0,t)}static tightFor({width:i=null,height:t=null}={}){return new h(i??0,i??1/0,t??0,t??1/0)}get isTight(){return this.minWidth===this.maxWidth&&this.minHeight===this.maxHeight}get isNormalized(){return this.minWidth<=this.maxWidth&&this.minHeight<=this.maxHeight}debugAssertIsValid(){if(!(this.minWidth>=0&&this.maxWidth>=this.minWidth&&this.minHeight>=0&&this.maxHeight>=this.minHeight))throw new Error(`Invalid BoxConstraints: ${this.minWidth}..${this.maxWidth}, ${this.minHeight}..${this.maxHeight}`);return!0}constrain(i){return new e(Math.max(this.minWidth,Math.min(this.maxWidth,i.width)),Math.max(this.minHeight,Math.min(this.maxHeight,i.height)))}enforce(i){return i?new h(Math.max(this.minWidth,i.minWidth),Math.min(this.maxWidth,i.maxWidth),Math.max(this.minHeight,i.minHeight),Math.min(this.maxHeight,i.maxHeight)):this}widthConstraints(){return new h(this.minWidth,this.maxWidth,0,1/0)}heightConstraints(){return new h(0,1/0,this.minHeight,this.maxHeight)}tighten({width:i=null,height:t=null}={}){return new h(i!==null?Math.max(this.minWidth,i):this.minWidth,i!==null?Math.min(this.maxWidth,i):this.maxWidth,t!==null?Math.max(this.minHeight,t):this.minHeight,t!==null?Math.min(this.maxHeight,t):this.maxHeight)}copyWith({minWidth:i,maxWidth:t,minHeight:n,maxHeight:m}={}){return new h(i??this.minWidth,t??this.maxWidth,n??this.minHeight,m??this.maxHeight)}toString(){return`BoxConstraints(${this.minWidth}..${this.maxWidth}, ${this.minHeight}..${this.maxHeight})`}}export{h as BoxConstraints};
-//# sourceMappingURL=box_constraints.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/box_constraints.js.map b/packages/flutterjs_engine/package/material/dist/utils/box_constraints.js.map
deleted file mode 100644
index b879093c..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/box_constraints.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/box_constraints.js"],
-  "sourcesContent": ["import { Size } from \"./size.js\";\r\n\r\nexport class BoxConstraints {\r\n    constructor(minWidth = 0, maxWidth = Infinity, minHeight = 0, maxHeight = Infinity) {\r\n        this.minWidth = minWidth;\r\n        this.maxWidth = maxWidth;\r\n        this.minHeight = minHeight;\r\n        this.maxHeight = maxHeight;\r\n    }\r\n\r\n    static tight(size) {\r\n        return new BoxConstraints(size.width, size.width, size.height, size.height);\r\n    }\r\n\r\n    static loose(size) {\r\n        return new BoxConstraints(0, size.width, 0, size.height);\r\n    }\r\n\r\n    static expand({ width = Infinity, height = Infinity } = {}) {\r\n        return new BoxConstraints(0, width, 0, height);\r\n    }\r\n\r\n    static tightFor({ width = null, height = null } = {}) {\r\n        return new BoxConstraints(\r\n            width ?? 0,\r\n            width ?? Infinity,\r\n            height ?? 0,\r\n            height ?? Infinity\r\n        );\r\n    }\r\n\r\n    get isTight() {\r\n        return this.minWidth === this.maxWidth && this.minHeight === this.maxHeight;\r\n    }\r\n\r\n    get isNormalized() {\r\n        return this.minWidth <= this.maxWidth && this.minHeight <= this.maxHeight;\r\n    }\r\n\r\n    debugAssertIsValid() {\r\n        if (!(this.minWidth >= 0 && this.maxWidth >= this.minWidth &&\r\n            this.minHeight >= 0 && this.maxHeight >= this.minHeight)) {\r\n            throw new Error(\r\n                `Invalid BoxConstraints: ${this.minWidth}..${this.maxWidth}, ${this.minHeight}..${this.maxHeight}`\r\n            );\r\n        }\r\n        return true;\r\n    }\r\n\r\n    constrain(size) {\r\n        return new Size(\r\n            Math.max(this.minWidth, Math.min(this.maxWidth, size.width)),\r\n            Math.max(this.minHeight, Math.min(this.maxHeight, size.height))\r\n        );\r\n    }\r\n\r\n    /**\r\n     * Returns a new BoxConstraints that respects the given constraints while being \r\n     * as close as possible to the original constraints.\r\n     */\r\n    enforce(constraints) {\r\n        if (!constraints) return this;\r\n\r\n        return new BoxConstraints(\r\n            Math.max(this.minWidth, constraints.minWidth),\r\n            Math.min(this.maxWidth, constraints.maxWidth),\r\n            Math.max(this.minHeight, constraints.minHeight),\r\n            Math.min(this.maxHeight, constraints.maxHeight)\r\n        );\r\n    }\r\n\r\n    widthConstraints() {\r\n        return new BoxConstraints(this.minWidth, this.maxWidth, 0, Infinity);\r\n    }\r\n\r\n    heightConstraints() {\r\n        return new BoxConstraints(0, Infinity, this.minHeight, this.maxHeight);\r\n    }\r\n\r\n    tighten({ width = null, height = null } = {}) {\r\n        return new BoxConstraints(\r\n            width !== null ? Math.max(this.minWidth, width) : this.minWidth,\r\n            width !== null ? Math.min(this.maxWidth, width) : this.maxWidth,\r\n            height !== null ? Math.max(this.minHeight, height) : this.minHeight,\r\n            height !== null ? Math.min(this.maxHeight, height) : this.maxHeight\r\n        );\r\n    }\r\n\r\n    copyWith({ minWidth, maxWidth, minHeight, maxHeight } = {}) {\r\n        return new BoxConstraints(\r\n            minWidth ?? this.minWidth,\r\n            maxWidth ?? this.maxWidth,\r\n            minHeight ?? this.minHeight,\r\n            maxHeight ?? this.maxHeight\r\n        );\r\n    }\r\n\r\n    toString() {\r\n        return `BoxConstraints(${this.minWidth}..${this.maxWidth}, ${this.minHeight}..${this.maxHeight})`;\r\n    }\r\n}\r\n"],
-  "mappings": "AAAA,OAAS,QAAAA,MAAY,YAEd,MAAMC,CAAe,CACxB,YAAYC,EAAW,EAAGC,EAAW,IAAUC,EAAY,EAAGC,EAAY,IAAU,CAChF,KAAK,SAAWH,EAChB,KAAK,SAAWC,EAChB,KAAK,UAAYC,EACjB,KAAK,UAAYC,CACrB,CAEA,OAAO,MAAMC,EAAM,CACf,OAAO,IAAIL,EAAeK,EAAK,MAAOA,EAAK,MAAOA,EAAK,OAAQA,EAAK,MAAM,CAC9E,CAEA,OAAO,MAAMA,EAAM,CACf,OAAO,IAAIL,EAAe,EAAGK,EAAK,MAAO,EAAGA,EAAK,MAAM,CAC3D,CAEA,OAAO,OAAO,CAAE,MAAAC,EAAQ,IAAU,OAAAC,EAAS,GAAS,EAAI,CAAC,EAAG,CACxD,OAAO,IAAIP,EAAe,EAAGM,EAAO,EAAGC,CAAM,CACjD,CAEA,OAAO,SAAS,CAAE,MAAAD,EAAQ,KAAM,OAAAC,EAAS,IAAK,EAAI,CAAC,EAAG,CAClD,OAAO,IAAIP,EACPM,GAAS,EACTA,GAAS,IACTC,GAAU,EACVA,GAAU,GACd,CACJ,CAEA,IAAI,SAAU,CACV,OAAO,KAAK,WAAa,KAAK,UAAY,KAAK,YAAc,KAAK,SACtE,CAEA,IAAI,cAAe,CACf,OAAO,KAAK,UAAY,KAAK,UAAY,KAAK,WAAa,KAAK,SACpE,CAEA,oBAAqB,CACjB,GAAI,EAAE,KAAK,UAAY,GAAK,KAAK,UAAY,KAAK,UAC9C,KAAK,WAAa,GAAK,KAAK,WAAa,KAAK,WAC9C,MAAM,IAAI,MACN,2BAA2B,KAAK,QAAQ,KAAK,KAAK,QAAQ,KAAK,KAAK,SAAS,KAAK,KAAK,SAAS,EACpG,EAEJ,MAAO,EACX,CAEA,UAAUF,EAAM,CACZ,OAAO,IAAIN,EACP,KAAK,IAAI,KAAK,SAAU,KAAK,IAAI,KAAK,SAAUM,EAAK,KAAK,CAAC,EAC3D,KAAK,IAAI,KAAK,UAAW,KAAK,IAAI,KAAK,UAAWA,EAAK,MAAM,CAAC,CAClE,CACJ,CAMA,QAAQG,EAAa,CACjB,OAAKA,EAEE,IAAIR,EACP,KAAK,IAAI,KAAK,SAAUQ,EAAY,QAAQ,EAC5C,KAAK,IAAI,KAAK,SAAUA,EAAY,QAAQ,EAC5C,KAAK,IAAI,KAAK,UAAWA,EAAY,SAAS,EAC9C,KAAK,IAAI,KAAK,UAAWA,EAAY,SAAS,CAClD,EAPyB,IAQ7B,CAEA,kBAAmB,CACf,OAAO,IAAIR,EAAe,KAAK,SAAU,KAAK,SAAU,EAAG,GAAQ,CACvE,CAEA,mBAAoB,CAChB,OAAO,IAAIA,EAAe,EAAG,IAAU,KAAK,UAAW,KAAK,SAAS,CACzE,CAEA,QAAQ,CAAE,MAAAM,EAAQ,KAAM,OAAAC,EAAS,IAAK,EAAI,CAAC,EAAG,CAC1C,OAAO,IAAIP,EACPM,IAAU,KAAO,KAAK,IAAI,KAAK,SAAUA,CAAK,EAAI,KAAK,SACvDA,IAAU,KAAO,KAAK,IAAI,KAAK,SAAUA,CAAK,EAAI,KAAK,SACvDC,IAAW,KAAO,KAAK,IAAI,KAAK,UAAWA,CAAM,EAAI,KAAK,UAC1DA,IAAW,KAAO,KAAK,IAAI,KAAK,UAAWA,CAAM,EAAI,KAAK,SAC9D,CACJ,CAEA,SAAS,CAAE,SAAAN,EAAU,SAAAC,EAAU,UAAAC,EAAW,UAAAC,CAAU,EAAI,CAAC,EAAG,CACxD,OAAO,IAAIJ,EACPC,GAAY,KAAK,SACjBC,GAAY,KAAK,SACjBC,GAAa,KAAK,UAClBC,GAAa,KAAK,SACtB,CACJ,CAEA,UAAW,CACP,MAAO,kBAAkB,KAAK,QAAQ,KAAK,KAAK,QAAQ,KAAK,KAAK,SAAS,KAAK,KAAK,SAAS,GAClG,CACJ",
-  "names": ["Size", "BoxConstraints", "minWidth", "maxWidth", "minHeight", "maxHeight", "size", "width", "height", "constraints"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/box_shadow.js b/packages/flutterjs_engine/package/material/dist/utils/box_shadow.js
deleted file mode 100644
index e07096f4..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/box_shadow.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{Offset as o}from"./geometry.js";class u{constructor({color:t="#000000",offset:s=o.zero(),blurRadius:r=0,spreadRadius:i=0}={}){this.color=typeof t=="string"?t:t.hex,this.offset=s,this.blurRadius=r,this.spreadRadius=i}toCSSString(){return`${this.offset.dx}px ${this.offset.dy}px ${this.blurRadius}px ${this.spreadRadius}px ${this.color}`}toString(){return`BoxShadow(color: ${this.color}, blur: ${this.blurRadius})`}}export{u as BoxShadow};
-//# sourceMappingURL=box_shadow.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/box_shadow.js.map b/packages/flutterjs_engine/package/material/dist/utils/box_shadow.js.map
deleted file mode 100644
index 0c19bf12..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/box_shadow.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/box_shadow.js"],
-  "sourcesContent": ["import { Offset } from './geometry.js';\r\nexport class BoxShadow {\r\n  constructor({\r\n    color = '#000000',\r\n    offset = Offset.zero(),\r\n    blurRadius = 0,\r\n    spreadRadius = 0\r\n  } = {}) {\r\n    this.color = typeof color === 'string' ? color : color.hex;\r\n    this.offset = offset;\r\n    this.blurRadius = blurRadius;\r\n    this.spreadRadius = spreadRadius;\r\n  }\r\n\r\n  toCSSString() {\r\n    return `${this.offset.dx}px ${this.offset.dy}px ${this.blurRadius}px ${this.spreadRadius}px ${this.color}`;\r\n  }\r\n\r\n  toString() {\r\n    return `BoxShadow(color: ${this.color}, blur: ${this.blurRadius})`;\r\n  }\r\n}"],
-  "mappings": "AAAA,OAAS,UAAAA,MAAc,gBAChB,MAAMC,CAAU,CACrB,YAAY,CACV,MAAAC,EAAQ,UACR,OAAAC,EAASH,EAAO,KAAK,EACrB,WAAAI,EAAa,EACb,aAAAC,EAAe,CACjB,EAAI,CAAC,EAAG,CACN,KAAK,MAAQ,OAAOH,GAAU,SAAWA,EAAQA,EAAM,IACvD,KAAK,OAASC,EACd,KAAK,WAAaC,EAClB,KAAK,aAAeC,CACtB,CAEA,aAAc,CACZ,MAAO,GAAG,KAAK,OAAO,EAAE,MAAM,KAAK,OAAO,EAAE,MAAM,KAAK,UAAU,MAAM,KAAK,YAAY,MAAM,KAAK,KAAK,EAC1G,CAEA,UAAW,CACT,MAAO,oBAAoB,KAAK,KAAK,WAAW,KAAK,UAAU,GACjE,CACF",
-  "names": ["Offset", "BoxShadow", "color", "offset", "blurRadius", "spreadRadius"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/checkbox_theme.js b/packages/flutterjs_engine/package/material/dist/utils/checkbox_theme.js
deleted file mode 100644
index ba4e322e..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/checkbox_theme.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import"./edge_insets.js";class d{constructor({fillColor:o,checkColor:e,hoverColor:r,overlayColor:i,focusColor:t,materialTapTargetSize:s="padded",visualDensity:l,side:a,shape:n,mouseCursor:h,splashRadius:u,enableFeedback:C=!0,animationDuration:c=200}={}){this.fillColor=o,this.checkColor=e,this.hoverColor=r,this.overlayColor=i,this.focusColor=t,this.materialTapTargetSize=s,this.visualDensity=l,this.side=a,this.shape=n,this.mouseCursor=h,this.splashRadius=u??20,this.enableFeedback=C,this.animationDuration=c}getCheckboxSize(){return this.materialTapTargetSize==="padded"?48:40}toCSSObject(){return{width:"20px",height:"20px",cursor:this.mouseCursor||"pointer",borderRadius:"2px",transition:`all ${this.animationDuration}ms ease`,display:"inline-flex",alignItems:"center",justifyContent:"center"}}getFillColor(o={}){return this.fillColor||o.primary||"#6750A4"}getCheckColor(o={}){return this.checkColor||o.onPrimary||"#FFFFFF"}getHoverColor(o={}){return this.hoverColor||o.primary+"14"||"#6750A414"}getFocusColor(o={}){return this.focusColor||o.primary+"24"||"#6750A424"}getUncheckedStyle(o={}){return{...this.toCSSObject(),border:`2px solid ${o.onSurfaceVariant||"#79747E"}`,backgroundColor:"transparent"}}getCheckedStyle(o={}){return{...this.toCSSObject(),backgroundColor:this.getFillColor(o),border:`2px solid ${this.getFillColor(o)}`}}getDisabledStyle(o={}){return{...this.toCSSObject(),opacity:.38,cursor:"not-allowed",pointerEvents:"none"}}getHoverStyle(o={}){return{backgroundColor:this.getHoverColor(o)}}getFocusStyle(o={}){return{outline:"none",boxShadow:`0 0 0 ${this.splashRadius}px ${this.getFocusColor(o)}`}}copyWith({fillColor:o,checkColor:e,hoverColor:r,overlayColor:i,focusColor:t,materialTapTargetSize:s,visualDensity:l,side:a,shape:n,mouseCursor:h,splashRadius:u,enableFeedback:C,animationDuration:c}={}){return new d({fillColor:o??this.fillColor,checkColor:e??this.checkColor,hoverColor:r??this.hoverColor,overlayColor:i??this.overlayColor,focusColor:t??this.focusColor,materialTapTargetSize:s??this.materialTapTargetSize,visualDensity:l??this.visualDensity,side:a??this.side,shape:n??this.shape,mouseCursor:h??this.mouseCursor,splashRadius:u??this.splashRadius,enableFeedback:C??this.enableFeedback,animationDuration:c??this.animationDuration})}merge(o){return o?this.copyWith({fillColor:o.fillColor,checkColor:o.checkColor,hoverColor:o.hoverColor,overlayColor:o.overlayColor,focusColor:o.focusColor,materialTapTargetSize:o.materialTapTargetSize,visualDensity:o.visualDensity,side:o.side,shape:o.shape,mouseCursor:o.mouseCursor,splashRadius:o.splashRadius,enableFeedback:o.enableFeedback,animationDuration:o.animationDuration}):this}toString(){return`CheckboxTheme(fillColor: ${this.fillColor}, checkColor: ${this.checkColor})`}}export{d as CheckboxTheme};
-//# sourceMappingURL=checkbox_theme.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/checkbox_theme.js.map b/packages/flutterjs_engine/package/material/dist/utils/checkbox_theme.js.map
deleted file mode 100644
index ca7f4bcd..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/checkbox_theme.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/checkbox_theme.js"],
-  "sourcesContent": ["import { EdgeInsets } from './edge_insets.js';\r\n\r\n/**\r\n * Material Design 3 Checkbox Theme\r\n * Defines the visual properties of Checkbox widgets\r\n * Follows Flutter Material Design 3 specification\r\n * \r\n * Flutter Reference: https://api.flutter.dev/flutter/material/CheckboxThemeData-class.html\r\n */\r\nexport class CheckboxTheme {\r\n  constructor({\r\n    // Colors\r\n    fillColor,\r\n    checkColor,\r\n    hoverColor,\r\n    overlayColor,\r\n    focusColor,\r\n    \r\n    // Size & Padding\r\n    materialTapTargetSize = 'padded',\r\n    visualDensity,\r\n    side,\r\n    shape,\r\n    mouseCursor,\r\n    \r\n    // States\r\n    splashRadius,\r\n    \r\n    // Interaction\r\n    enableFeedback = true,\r\n    animationDuration = 200\r\n  } = {}) {\r\n    this.fillColor = fillColor;\r\n    this.checkColor = checkColor;\r\n    this.hoverColor = hoverColor;\r\n    this.overlayColor = overlayColor;\r\n    this.focusColor = focusColor;\r\n    this.materialTapTargetSize = materialTapTargetSize;\r\n    this.visualDensity = visualDensity;\r\n    this.side = side;\r\n    this.shape = shape;\r\n    this.mouseCursor = mouseCursor;\r\n    this.splashRadius = splashRadius ?? 20;\r\n    this.enableFeedback = enableFeedback;\r\n    this.animationDuration = animationDuration;\r\n  }\r\n\r\n  /**\r\n   * Get checkbox size based on tap target\r\n   * @returns {number} Size in pixels\r\n   */\r\n  getCheckboxSize() {\r\n    return this.materialTapTargetSize === 'padded' ? 48 : 40;\r\n  }\r\n\r\n  /**\r\n   * Convert to CSS object for DOM rendering\r\n   * @returns {Object} CSS style object\r\n   */\r\n  toCSSObject() {\r\n    return {\r\n      width: '20px',\r\n      height: '20px',\r\n      cursor: this.mouseCursor || 'pointer',\r\n      borderRadius: '2px',\r\n      transition: `all ${this.animationDuration}ms ease`,\r\n      display: 'inline-flex',\r\n      alignItems: 'center',\r\n      justifyContent: 'center'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get fill color for checked state\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {string} Hex color value\r\n   */\r\n  getFillColor(themeColors = {}) {\r\n    return this.fillColor || themeColors.primary || '#6750A4';\r\n  }\r\n\r\n  /**\r\n   * Get check icon color\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {string} Hex color value\r\n   */\r\n  getCheckColor(themeColors = {}) {\r\n    return this.checkColor || themeColors.onPrimary || '#FFFFFF';\r\n  }\r\n\r\n  /**\r\n   * Get hover color\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {string} Hex color value\r\n   */\r\n  getHoverColor(themeColors = {}) {\r\n    return this.hoverColor || themeColors.primary + '14' || '#6750A414';\r\n  }\r\n\r\n  /**\r\n   * Get focus color\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {string} Hex color value\r\n   */\r\n  getFocusColor(themeColors = {}) {\r\n    return this.focusColor || themeColors.primary + '24' || '#6750A424';\r\n  }\r\n\r\n  /**\r\n   * Get unchecked state CSS object\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getUncheckedStyle(themeColors = {}) {\r\n    return {\r\n      ...this.toCSSObject(),\r\n      border: `2px solid ${themeColors.onSurfaceVariant || '#79747E'}`,\r\n      backgroundColor: 'transparent'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get checked state CSS object\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getCheckedStyle(themeColors = {}) {\r\n    return {\r\n      ...this.toCSSObject(),\r\n      backgroundColor: this.getFillColor(themeColors),\r\n      border: `2px solid ${this.getFillColor(themeColors)}`\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get disabled state CSS object\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getDisabledStyle(themeColors = {}) {\r\n    return {\r\n      ...this.toCSSObject(),\r\n      opacity: 0.38,\r\n      cursor: 'not-allowed',\r\n      pointerEvents: 'none'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get hover state CSS object\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getHoverStyle(themeColors = {}) {\r\n    return {\r\n      backgroundColor: this.getHoverColor(themeColors)\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get focus state CSS object\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getFocusStyle(themeColors = {}) {\r\n    return {\r\n      outline: 'none',\r\n      boxShadow: `0 0 0 ${this.splashRadius}px ${this.getFocusColor(themeColors)}`\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Copy this theme with updated properties\r\n   * @param {Object} properties - Properties to override\r\n   * @returns {CheckboxTheme} New theme instance\r\n   */\r\n  copyWith({\r\n    fillColor,\r\n    checkColor,\r\n    hoverColor,\r\n    overlayColor,\r\n    focusColor,\r\n    materialTapTargetSize,\r\n    visualDensity,\r\n    side,\r\n    shape,\r\n    mouseCursor,\r\n    splashRadius,\r\n    enableFeedback,\r\n    animationDuration\r\n  } = {}) {\r\n    return new CheckboxTheme({\r\n      fillColor: fillColor ?? this.fillColor,\r\n      checkColor: checkColor ?? this.checkColor,\r\n      hoverColor: hoverColor ?? this.hoverColor,\r\n      overlayColor: overlayColor ?? this.overlayColor,\r\n      focusColor: focusColor ?? this.focusColor,\r\n      materialTapTargetSize: materialTapTargetSize ?? this.materialTapTargetSize,\r\n      visualDensity: visualDensity ?? this.visualDensity,\r\n      side: side ?? this.side,\r\n      shape: shape ?? this.shape,\r\n      mouseCursor: mouseCursor ?? this.mouseCursor,\r\n      splashRadius: splashRadius ?? this.splashRadius,\r\n      enableFeedback: enableFeedback ?? this.enableFeedback,\r\n      animationDuration: animationDuration ?? this.animationDuration\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Merge with another CheckboxTheme\r\n   * @param {CheckboxTheme} other - Theme to merge with\r\n   * @returns {CheckboxTheme} Merged theme\r\n   */\r\n  merge(other) {\r\n    if (!other) return this;\r\n    return this.copyWith({\r\n      fillColor: other.fillColor,\r\n      checkColor: other.checkColor,\r\n      hoverColor: other.hoverColor,\r\n      overlayColor: other.overlayColor,\r\n      focusColor: other.focusColor,\r\n      materialTapTargetSize: other.materialTapTargetSize,\r\n      visualDensity: other.visualDensity,\r\n      side: other.side,\r\n      shape: other.shape,\r\n      mouseCursor: other.mouseCursor,\r\n      splashRadius: other.splashRadius,\r\n      enableFeedback: other.enableFeedback,\r\n      animationDuration: other.animationDuration\r\n    });\r\n  }\r\n\r\n  toString() {\r\n    return `CheckboxTheme(fillColor: ${this.fillColor}, checkColor: ${this.checkColor})`;\r\n  }\r\n}"],
-  "mappings": "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",
-  "names": ["CheckboxTheme", "fillColor", "checkColor", "hoverColor", "overlayColor", "focusColor", "materialTapTargetSize", "visualDensity", "side", "shape", "mouseCursor", "splashRadius", "enableFeedback", "animationDuration", "themeColors", "other"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/color.js b/packages/flutterjs_engine/package/material/dist/utils/color.js
deleted file mode 100644
index 98122bbf..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/color.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class a{constructor(t){if(typeof t=="string"){const r=t.replace("#",""),e=parseInt(r,16);if(r.length===6)this._value=255<<24|e;else if(r.length===8)this._value=e;else throw new Error("Invalid hex color string");this._css=t.length===7?`${t}FF`:t.toUpperCase()}else if(typeof t=="number"){this._value=t>>>0;const r=this._value>>24&255,e=this._value>>16&255,n=this._value>>8&255,s=this._value&255;this._css=r===255?`#${e.toString(16).padStart(2,"0")}${n.toString(16).padStart(2,"0")}${s.toString(16).padStart(2,"0")}`.toUpperCase():`#${r.toString(16).padStart(2,"0")}${e.toString(16).padStart(2,"0")}${n.toString(16).padStart(2,"0")}${s.toString(16).padStart(2,"0")}`.toUpperCase()}else throw new Error("Color value must be a hex string or integer")}static fromARGB(t,r,e,n){const s=(t&255)<<24|(r&255)<<16|(e&255)<<8|n&255;return new a(s)}static fromRGBO(t,r,e,n){if(n<0||n>1)throw new Error("Opacity must be between 0.0 and 1.0");const s=Math.round(n*255);return a.fromARGB(s,t,r,e)}static fromHex(t){if(!/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(t))throw new Error("Invalid hex color format. Use #RRGGBB or #AARRGGBB");return new a(t)}withAlpha(t){if(t<0||t>255)throw new Error("Alpha must be between 0 and 255");const r=this.red,e=this.green,n=this.blue;return a.fromARGB(t,r,e,n)}withOpacity(t){if(t<0||t>1)throw new Error("Opacity must be between 0.0 and 1.0");const r=Math.round(t*255);return this.withAlpha(r)}get red(){return this._value>>16&255}get green(){return this._value>>8&255}get blue(){return this._value&255}get alpha(){return this._value>>24&255}get opacity(){return this.alpha/255}get value(){return this._value}get hex(){const t=this.alpha.toString(16).padStart(2,"0"),r=this.red.toString(16).padStart(2,"0"),e=this.green.toString(16).padStart(2,"0"),n=this.blue.toString(16).padStart(2,"0");return`#${t}${r}${e}${n}`.toUpperCase()}toCSSString(){if(this.alpha===255)return this.hex.slice(0,7);{const t=this.red,r=this.green,e=this.blue,n=(this.alpha/255).toFixed(4).replace(/\.?0+$/,"");return`rgba(${t}, ${r}, ${e}, ${n})`}}toString(){return this.toCSSString()}}export{a as Color};
-//# sourceMappingURL=color.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/color.js.map b/packages/flutterjs_engine/package/material/dist/utils/color.js.map
deleted file mode 100644
index db722937..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/color.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/color.js"],
-  "sourcesContent": [" class Color {\r\n  constructor(value) {\r\n    if (typeof value === 'string') {\r\n      // Handle hex strings: #RRGGBB or #AARRGGBB\r\n      const hex = value.replace('#', '');\r\n      const num = parseInt(hex, 16);\r\n      if (hex.length === 6) {\r\n        this._value = (0xFF << 24) | num; // Opaque by default\r\n      } else if (hex.length === 8) {\r\n        this._value = num;\r\n      } else {\r\n        throw new Error('Invalid hex color string');\r\n      }\r\n      this._css = value.length === 7 ? `${value}FF` : value.toUpperCase();\r\n    } else if (typeof value === 'number') {\r\n      this._value = value >>> 0; // Ensure unsigned 32-bit\r\n      const a = (this._value >> 24) & 0xFF;\r\n      const r = (this._value >> 16) & 0xFF;\r\n      const g = (this._value >> 8) & 0xFF;\r\n      const b = this._value & 0xFF;\r\n      this._css = a === 255\r\n        ? `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`.toUpperCase()\r\n        : `#${a.toString(16).padStart(2, '0')}${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`.toUpperCase();\r\n    } else {\r\n      throw new Error('Color value must be a hex string or integer');\r\n    }\r\n  }\r\n\r\n  // --- Static Constructors ---\r\n\r\n  static fromARGB(a, r, g, b) {\r\n    const value = ((a & 0xFF) << 24) | ((r & 0xFF) << 16) | ((g & 0xFF) << 8) | (b & 0xFF);\r\n    return new Color(value);\r\n  }\r\n\r\n  static fromRGBO(r, g, b, opacity) {\r\n    if (opacity < 0 || opacity > 1) {\r\n      throw new Error('Opacity must be between 0.0 and 1.0');\r\n    }\r\n    const a = Math.round(opacity * 255);\r\n    return Color.fromARGB(a, r, g, b);\r\n  }\r\n\r\n  static fromHex(hex) {\r\n    if (!/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(hex)) {\r\n      throw new Error('Invalid hex color format. Use #RRGGBB or #AARRGGBB');\r\n    }\r\n    return new Color(hex);\r\n  }\r\n\r\n  // --- Instance Methods ---\r\n\r\n  withAlpha(alpha) {\r\n    if (alpha < 0 || alpha > 255) {\r\n      throw new Error('Alpha must be between 0 and 255');\r\n    }\r\n    const r = this.red;\r\n    const g = this.green;\r\n    const b = this.blue;\r\n    return Color.fromARGB(alpha, r, g, b);\r\n  }\r\n\r\n  withOpacity(opacity) {\r\n    if (opacity < 0 || opacity > 1) {\r\n      throw new Error('Opacity must be between 0.0 and 1.0');\r\n    }\r\n    const alpha = Math.round(opacity * 255);\r\n    return this.withAlpha(alpha);\r\n  }\r\n\r\n  // --- Getters ---\r\n\r\n  get red() {\r\n    return (this._value >> 16) & 0xFF;\r\n  }\r\n\r\n  get green() {\r\n    return (this._value >> 8) & 0xFF;\r\n  }\r\n\r\n  get blue() {\r\n    return this._value & 0xFF;\r\n  }\r\n\r\n  get alpha() {\r\n    return (this._value >> 24) & 0xFF;\r\n  }\r\n\r\n  get opacity() {\r\n    return this.alpha / 255;\r\n  }\r\n\r\n  get value() {\r\n    return this._value;\r\n  }\r\n\r\n  get hex() {\r\n    const a = this.alpha.toString(16).padStart(2, '0');\r\n    const r = this.red.toString(16).padStart(2, '0');\r\n    const g = this.green.toString(16).padStart(2, '0');\r\n    const b = this.blue.toString(16).padStart(2, '0');\r\n    return `#${a}${r}${g}${b}`.toUpperCase();\r\n  }\r\n\r\n  // --- Output ---\r\n\r\n  toCSSString() {\r\n    if (this.alpha === 255) {\r\n      return this.hex.slice(0, 7); // #RRGGBB\r\n    } else {\r\n      const r = this.red;\r\n      const g = this.green;\r\n      const b = this.blue;\r\n      const a = (this.alpha / 255).toFixed(4).replace(/\\.?0+$/, '');\r\n      return `rgba(${r}, ${g}, ${b}, ${a})`;\r\n    }\r\n  }\r\n\r\n  toString() {\r\n    return this.toCSSString();\r\n  }\r\n\r\n  // Optional: Match Flutter's `computeLuminance()`, etc. can be added later\r\n}\r\n\r\nexport { Color };"],
-  "mappings": "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",
-  "names": ["Color", "value", "hex", "num", "a", "r", "g", "b", "opacity", "alpha"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/colors_theme.js b/packages/flutterjs_engine/package/material/dist/utils/colors_theme.js
deleted file mode 100644
index 109fbe0e..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/colors_theme.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import{Color as e}from"../material/color.js";class o{constructor(){this.primary="#6750A4",this.onPrimary="#FFFFFF",this.primaryContainer="#EADDFF",this.onPrimaryContainer="#21005E",this.secondary="#625B71",this.onSecondary="#FFFFFF",this.secondaryContainer="#E8DEF8",this.onSecondaryContainer="#1D192B",this.tertiary="#7D5260",this.onTertiary="#FFFFFF",this.tertiaryContainer="#FFD8E4",this.onTertiaryContainer="#31111D",this.error="#B3261E",this.onError="#FFFFFF",this.errorContainer="#F9DEDC",this.onErrorContainer="#410E0B",this.background="#FFFBFE",this.onBackground="#1C1B1F",this.surface="#FFFBFE",this.onSurface="#1C1B1F",this.surfaceVariant="#E7E0EC",this.onSurfaceVariant="#49454E",this.outline="#79747E",this.outlineVariant="#CAC7D0",this.scrim="#000000",this.inverseSurface="#313033",this.inverseOnSurface="#F4EFF4",this.inversePrimary="#D0BCFF",this.shadow="#000000"}static light(r={}){const n=new o;return Object.assign(n,r)}static dark(r={}){const n=new o,t={primary:"#D0BCFF",onPrimary:"#371E55",primaryContainer:"#4F378B",onPrimaryContainer:"#EADDFF",secondary:"#CCC7D8",onSecondary:"#332D41",secondaryContainer:"#4A4458",onSecondaryContainer:"#E8DEF8",tertiary:"#FFB8C8",onTertiary:"#492532",tertiaryContainer:"#633B48",onTertiaryContainer:"#FFD8E4",error:"#F2B8B5",onError:"#601410",errorContainer:"#8C1D18",onErrorContainer:"#F9DEDC",background:"#1C1B1F",onBackground:"#E7E1E6",surface:"#1C1B1F",onSurface:"#E7E1E6",surfaceVariant:"#49454E",onSurfaceVariant:"#CAC7D0",outline:"#938F99",outlineVariant:"#49454E",inverseSurface:"#E7E1E6",inverseOnSurface:"#313033",inversePrimary:"#6750A4",...r};return Object.assign(n,t)}static highContrast(r={}){const n=new o,t={primary:"#000000",onPrimary:"#FFFFFF",primaryContainer:"#000000",onPrimaryContainer:"#FFFFFF",secondary:"#000000",onSecondary:"#FFFFFF",secondaryContainer:"#000000",onSecondaryContainer:"#FFFFFF",tertiary:"#000000",onTertiary:"#FFFFFF",tertiaryContainer:"#000000",onTertiaryContainer:"#FFFFFF",error:"#990000",onError:"#FFFFFF",errorContainer:"#990000",onErrorContainer:"#FFFFFF",background:"#FFFFFF",onBackground:"#000000",surface:"#FFFFFF",onSurface:"#000000",surfaceVariant:"#FFFFFF",onSurfaceVariant:"#000000",outline:"#000000",outlineVariant:"#000000",...r};return Object.assign(n,t)}static fromPrimary(r,n={}){const t=new o,i=new e(r);return Object.assign(t,{primary:r,onPrimary:"#FFFFFF",primaryContainer:`${r}20`,onPrimaryContainer:"#1C1B1F",...n})}getColor(r){return this[r]??null}getAllColors(){return{primary:this.primary,onPrimary:this.onPrimary,primaryContainer:this.primaryContainer,onPrimaryContainer:this.onPrimaryContainer,secondary:this.secondary,onSecondary:this.onSecondary,secondaryContainer:this.secondaryContainer,onSecondaryContainer:this.onSecondaryContainer,tertiary:this.tertiary,onTertiary:this.onTertiary,tertiaryContainer:this.tertiaryContainer,onTertiaryContainer:this.onTertiaryContainer,error:this.error,onError:this.onError,errorContainer:this.errorContainer,onErrorContainer:this.onErrorContainer,background:this.background,onBackground:this.onBackground,surface:this.surface,onSurface:this.onSurface,surfaceVariant:this.surfaceVariant,onSurfaceVariant:this.onSurfaceVariant,outline:this.outline,outlineVariant:this.outlineVariant,inverseSurface:this.inverseSurface,inverseOnSurface:this.inverseOnSurface,inversePrimary:this.inversePrimary,shadow:this.shadow,scrim:this.scrim}}toCSSVariables(){const r=this.getAllColors();let n=`:root {
-`;for(const[t,i]of Object.entries(r)){const a=`--color-${t.replace(/([A-Z])/g,"-$1").toLowerCase()}`;n+=`  ${a}: ${i};
-`}return n+="}",n}withOpacity(r,n){const t=this.getColor(r);if(!t)return null;const i=new e(t),a=i.red,s=i.green,F=i.blue;return`rgba(${a}, ${s}, ${F}, ${n})`}copyWith(r={}){return Object.assign(new o,this,r)}merge(r){return r?this.copyWith(r.getAllColors()):this}toString(){return`ColorsTheme(primary: ${this.primary}, secondary: ${this.secondary})`}}export{o as ColorsTheme};
-//# sourceMappingURL=colors_theme.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/colors_theme.js.map b/packages/flutterjs_engine/package/material/dist/utils/colors_theme.js.map
deleted file mode 100644
index a64f025f..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/colors_theme.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/colors_theme.js"],
-  "sourcesContent": ["import { Color } from '../material/color.js';\r\n\r\n/**\r\n * Material Design 3 Color Theme System\r\n * Defines all colors used throughout the Material Design system\r\n * Follows Flutter Material Design 3 specification\r\n * \r\n * Flutter Reference: https://api.flutter.dev/flutter/material/Colors-class.html\r\n */\r\nexport class ColorsTheme {\r\n  constructor() {\r\n    // ========== PRIMARY COLOR SYSTEM ==========\r\n    this.primary = '#6750A4';\r\n    this.onPrimary = '#FFFFFF';\r\n    this.primaryContainer = '#EADDFF';\r\n    this.onPrimaryContainer = '#21005E';\r\n    \r\n    // ========== SECONDARY COLOR SYSTEM ==========\r\n    this.secondary = '#625B71';\r\n    this.onSecondary = '#FFFFFF';\r\n    this.secondaryContainer = '#E8DEF8';\r\n    this.onSecondaryContainer = '#1D192B';\r\n    \r\n    // ========== TERTIARY COLOR SYSTEM ==========\r\n    this.tertiary = '#7D5260';\r\n    this.onTertiary = '#FFFFFF';\r\n    this.tertiaryContainer = '#FFD8E4';\r\n    this.onTertiaryContainer = '#31111D';\r\n    \r\n    // ========== ERROR COLOR SYSTEM ==========\r\n    this.error = '#B3261E';\r\n    this.onError = '#FFFFFF';\r\n    this.errorContainer = '#F9DEDC';\r\n    this.onErrorContainer = '#410E0B';\r\n    \r\n    // ========== NEUTRAL COLOR SYSTEM ==========\r\n    this.background = '#FFFBFE';\r\n    this.onBackground = '#1C1B1F';\r\n    this.surface = '#FFFBFE';\r\n    this.onSurface = '#1C1B1F';\r\n    this.surfaceVariant = '#E7E0EC';\r\n    this.onSurfaceVariant = '#49454E';\r\n    this.outline = '#79747E';\r\n    this.outlineVariant = '#CAC7D0';\r\n    this.scrim = '#000000';\r\n    \r\n    // ========== INVERSE COLORS ==========\r\n    this.inverseSurface = '#313033';\r\n    this.inverseOnSurface = '#F4EFF4';\r\n    this.inversePrimary = '#D0BCFF';\r\n    \r\n    // ========== SHADOW COLOR ==========\r\n    this.shadow = '#000000';\r\n  }\r\n\r\n  /**\r\n   * Create a light theme color scheme\r\n   * @param {Object} config - Color overrides\r\n   * @returns {ColorsTheme} Light theme instance\r\n   * \r\n   * @example\r\n   * const lightTheme = ColorsTheme.light({\r\n   *   primary: '#FF6B6B'\r\n   * });\r\n   */\r\n  static light(config = {}) {\r\n    const colors = new ColorsTheme();\r\n    return Object.assign(colors, config);\r\n  }\r\n\r\n  /**\r\n   * Create a dark theme color scheme\r\n   * @param {Object} config - Color overrides\r\n   * @returns {ColorsTheme} Dark theme instance\r\n   * \r\n   * @example\r\n   * const darkTheme = ColorsTheme.dark({\r\n   *   primary: '#D0BCFF'\r\n   * });\r\n   */\r\n  static dark(config = {}) {\r\n    const colors = new ColorsTheme();\r\n    const darkConfig = {\r\n      // Primary (inverted for dark)\r\n      primary: '#D0BCFF',\r\n      onPrimary: '#371E55',\r\n      primaryContainer: '#4F378B',\r\n      onPrimaryContainer: '#EADDFF',\r\n      \r\n      // Secondary (inverted for dark)\r\n      secondary: '#CCC7D8',\r\n      onSecondary: '#332D41',\r\n      secondaryContainer: '#4A4458',\r\n      onSecondaryContainer: '#E8DEF8',\r\n      \r\n      // Tertiary (inverted for dark)\r\n      tertiary: '#FFB8C8',\r\n      onTertiary: '#492532',\r\n      tertiaryContainer: '#633B48',\r\n      onTertiaryContainer: '#FFD8E4',\r\n      \r\n      // Error (stays similar)\r\n      error: '#F2B8B5',\r\n      onError: '#601410',\r\n      errorContainer: '#8C1D18',\r\n      onErrorContainer: '#F9DEDC',\r\n      \r\n      // Neutral (inverted)\r\n      background: '#1C1B1F',\r\n      onBackground: '#E7E1E6',\r\n      surface: '#1C1B1F',\r\n      onSurface: '#E7E1E6',\r\n      surfaceVariant: '#49454E',\r\n      onSurfaceVariant: '#CAC7D0',\r\n      outline: '#938F99',\r\n      outlineVariant: '#49454E',\r\n      \r\n      // Inverse\r\n      inverseSurface: '#E7E1E6',\r\n      inverseOnSurface: '#313033',\r\n      inversePrimary: '#6750A4',\r\n      \r\n      ...config\r\n    };\r\n    \r\n    return Object.assign(colors, darkConfig);\r\n  }\r\n\r\n  /**\r\n   * Create high contrast theme\r\n   * @param {Object} config - Color overrides\r\n   * @returns {ColorsTheme} High contrast theme instance\r\n   */\r\n  static highContrast(config = {}) {\r\n    const colors = new ColorsTheme();\r\n    const highContrastConfig = {\r\n      primary: '#000000',\r\n      onPrimary: '#FFFFFF',\r\n      primaryContainer: '#000000',\r\n      onPrimaryContainer: '#FFFFFF',\r\n      \r\n      secondary: '#000000',\r\n      onSecondary: '#FFFFFF',\r\n      secondaryContainer: '#000000',\r\n      onSecondaryContainer: '#FFFFFF',\r\n      \r\n      tertiary: '#000000',\r\n      onTertiary: '#FFFFFF',\r\n      tertiaryContainer: '#000000',\r\n      onTertiaryContainer: '#FFFFFF',\r\n      \r\n      error: '#990000',\r\n      onError: '#FFFFFF',\r\n      errorContainer: '#990000',\r\n      onErrorContainer: '#FFFFFF',\r\n      \r\n      background: '#FFFFFF',\r\n      onBackground: '#000000',\r\n      surface: '#FFFFFF',\r\n      onSurface: '#000000',\r\n      surfaceVariant: '#FFFFFF',\r\n      onSurfaceVariant: '#000000',\r\n      outline: '#000000',\r\n      outlineVariant: '#000000',\r\n      \r\n      ...config\r\n    };\r\n    \r\n    return Object.assign(colors, highContrastConfig);\r\n  }\r\n\r\n  /**\r\n   * Create custom theme from primary color\r\n   * Generates complementary colors automatically\r\n   * @param {string} primaryColor - Primary hex color\r\n   * @param {Object} config - Additional overrides\r\n   * @returns {ColorsTheme} Custom theme instance\r\n   * \r\n   * @example\r\n   * const customTheme = ColorsTheme.fromPrimary('#FF6B6B');\r\n   */\r\n  static fromPrimary(primaryColor, config = {}) {\r\n    const colors = new ColorsTheme();\r\n    const color = new Color(primaryColor);\r\n    \r\n    return Object.assign(colors, {\r\n      primary: primaryColor,\r\n      onPrimary: '#FFFFFF',\r\n      primaryContainer: `${primaryColor}20`, // 20% opacity\r\n      onPrimaryContainer: '#1C1B1F',\r\n      ...config\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Get color by name\r\n   * @param {string} name - Color name\r\n   * @returns {string} Hex color value\r\n   * \r\n   * @example\r\n   * theme.getColor('primary') // '#6750A4'\r\n   */\r\n  getColor(name) {\r\n    return this[name] ?? null;\r\n  }\r\n\r\n  /**\r\n   * Get all colors as object\r\n   * @returns {Object} All theme colors\r\n   */\r\n  getAllColors() {\r\n    return {\r\n      // Primary\r\n      primary: this.primary,\r\n      onPrimary: this.onPrimary,\r\n      primaryContainer: this.primaryContainer,\r\n      onPrimaryContainer: this.onPrimaryContainer,\r\n      \r\n      // Secondary\r\n      secondary: this.secondary,\r\n      onSecondary: this.onSecondary,\r\n      secondaryContainer: this.secondaryContainer,\r\n      onSecondaryContainer: this.onSecondaryContainer,\r\n      \r\n      // Tertiary\r\n      tertiary: this.tertiary,\r\n      onTertiary: this.onTertiary,\r\n      tertiaryContainer: this.tertiaryContainer,\r\n      onTertiaryContainer: this.onTertiaryContainer,\r\n      \r\n      // Error\r\n      error: this.error,\r\n      onError: this.onError,\r\n      errorContainer: this.errorContainer,\r\n      onErrorContainer: this.onErrorContainer,\r\n      \r\n      // Neutral\r\n      background: this.background,\r\n      onBackground: this.onBackground,\r\n      surface: this.surface,\r\n      onSurface: this.onSurface,\r\n      surfaceVariant: this.surfaceVariant,\r\n      onSurfaceVariant: this.onSurfaceVariant,\r\n      outline: this.outline,\r\n      outlineVariant: this.outlineVariant,\r\n      \r\n      // Inverse\r\n      inverseSurface: this.inverseSurface,\r\n      inverseOnSurface: this.inverseOnSurface,\r\n      inversePrimary: this.inversePrimary,\r\n      \r\n      // Shadow\r\n      shadow: this.shadow,\r\n      scrim: this.scrim\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Generate CSS variables for all colors\r\n   * @returns {string} CSS variable declarations\r\n   * \r\n   * @example\r\n   * const css = theme.toCSSVariables();\r\n   * // Output: --color-primary: #6750A4; ...\r\n   */\r\n  toCSSVariables() {\r\n    const colors = this.getAllColors();\r\n    let css = ':root {\\n';\r\n    \r\n    for (const [name, value] of Object.entries(colors)) {\r\n      const cssVarName = `--color-${name.replace(/([A-Z])/g, '-$1').toLowerCase()}`;\r\n      css += `  ${cssVarName}: ${value};\\n`;\r\n    }\r\n    \r\n    css += '}';\r\n    return css;\r\n  }\r\n\r\n  /**\r\n   * Get color with opacity applied\r\n   * @param {string} colorName - Name of color\r\n   * @param {number} opacity - Opacity value (0.0 to 1.0)\r\n   * @returns {string} RGBA color value\r\n   * \r\n   * @example\r\n   * theme.withOpacity('primary', 0.5) // 'rgba(103, 80, 164, 0.5)'\r\n   */\r\n  withOpacity(colorName, opacity) {\r\n    const hex = this.getColor(colorName);\r\n    if (!hex) return null;\r\n    \r\n    const color = new Color(hex);\r\n    const r = color.red;\r\n    const g = color.green;\r\n    const b = color.blue;\r\n    \r\n    return `rgba(${r}, ${g}, ${b}, ${opacity})`;\r\n  }\r\n\r\n  /**\r\n   * Copy this theme with updated colors\r\n   * @param {Object} colors - Colors to override\r\n   * @returns {ColorsTheme} New theme instance\r\n   */\r\n  copyWith(colors = {}) {\r\n    return Object.assign(new ColorsTheme(), this, colors);\r\n  }\r\n\r\n  /**\r\n   * Merge with another color theme\r\n   * @param {ColorsTheme} other - Theme to merge with\r\n   * @returns {ColorsTheme} Merged theme\r\n   */\r\n  merge(other) {\r\n    if (!other) return this;\r\n    return this.copyWith(other.getAllColors());\r\n  }\r\n\r\n  toString() {\r\n    return `ColorsTheme(primary: ${this.primary}, secondary: ${this.secondary})`;\r\n  }\r\n}"],
-  "mappings": "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",
-  "names": ["Color", "ColorsTheme", "config", "colors", "darkConfig", "highContrastConfig", "primaryColor", "color", "name", "css", "value", "cssVarName", "colorName", "opacity", "hex", "r", "g", "b", "other"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/decoration/decoration.js b/packages/flutterjs_engine/package/material/dist/utils/decoration/decoration.js
deleted file mode 100644
index d35c0968..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/decoration/decoration.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{Offset as b,Alignment as p}from"../utils.js";import{Colors as c}from"../../material/color.js";class r{constructor({width:t=1,color:e=c.outline,style:s="solid"}={}){this.width=t,this.color=typeof e=="string"?e:e.hex,this.style=s}static none(){return new r({width:0,style:"none"})}merge(t){return t?new r({width:t.width??this.width,color:t.color??this.color,style:t.style??this.style}):this}toCSSString(){return this.width===0||this.style==="none"?"none":`${this.width}px ${this.style} ${this.color}`}toString(){return`BorderSide(width: ${this.width}, color: ${this.color}, style: ${this.style})`}}class d{constructor({top:t=new r,right:e=new r,bottom:s=new r,left:i=new r}={}){this.top=t,this.right=e,this.bottom=s,this.left=i}static all({width:t=1,color:e=c.outline,style:s="solid"}={}){const i=new r({width:t,color:e,style:s});return new d({top:i,right:i,bottom:i,left:i})}static none(){const t=r.none();return new d({top:t,right:t,bottom:t,left:t})}static symmetric({vertical:t=new r,horizontal:e=new r}={}){return new d({top:t,bottom:t,left:e,right:e})}static only({top:t=null,right:e=null,bottom:s=null,left:i=null}={}){return new d({top:t||r.none(),right:e||r.none(),bottom:s||r.none(),left:i||r.none()})}merge(t){return t?new d({top:this.top.merge(t.top),right:this.right.merge(t.right),bottom:this.bottom.merge(t.bottom),left:this.left.merge(t.left)}):this}toCSSString(){return this.bottom.toCSSString()}toCSSObject(){return{borderTop:this.top.toCSSString(),borderRight:this.right.toCSSString(),borderBottom:this.bottom.toCSSString(),borderLeft:this.left.toCSSString()}}toString(){return`Border(top: ${this.top}, right: ${this.right}, bottom: ${this.bottom}, left: ${this.left})`}}class o{constructor(t=0,e=0){this.x=t,this.y=e||t}static circular(t){return new o(t,t)}static elliptical(t,e){return new o(t,e)}toString(){return`Radius(${this.x}, ${this.y})`}}class a{constructor(t=0,e=0,s=0,i=0){this.topLeft=t instanceof o?t:new o(t),this.topRight=e instanceof o?e:new o(e),this.bottomRight=s instanceof o?s:new o(s),this.bottomLeft=i instanceof o?i:new o(i)}static all(t){return new a(t,t,t,t)}static circular(t){return a.all(t)}static only({topLeft:t=0,topRight:e=0,bottomRight:s=0,bottomLeft:i=0}={}){return new a(t,e,s,i)}static vertical({top:t=0,bottom:e=0}={}){return new a(t,t,e,e)}static horizontal({left:t=0,right:e=0}={}){return new a(t,e,e,t)}merge(t){return t?new a(t.topLeft??this.topLeft,t.topRight??this.topRight,t.bottomRight??this.bottomRight,t.bottomLeft??this.bottomLeft):this}toCSSString(){const t=this.topLeft instanceof o?this.topLeft.x:this.topLeft,e=this.topRight instanceof o?this.topRight.x:this.topRight,s=this.bottomRight instanceof o?this.bottomRight.x:this.bottomRight,i=this.bottomLeft instanceof o?this.bottomLeft.x:this.bottomLeft;return`${t}px ${e}px ${s}px ${i}px`}toCSSObject(){return{borderTopLeftRadius:`${this.topLeft instanceof o?this.topLeft.x:this.topLeft}px`,borderTopRightRadius:`${this.topRight instanceof o?this.topRight.x:this.topRight}px`,borderBottomRightRadius:`${this.bottomRight instanceof o?this.bottomRight.x:this.bottomRight}px`,borderBottomLeftRadius:`${this.bottomLeft instanceof o?this.bottomLeft.x:this.bottomLeft}px`}}toString(){return`BorderRadius(${this.topLeft}, ${this.topRight}, ${this.bottomRight}, ${this.bottomLeft})`}}class h{constructor({color:t=c.black54,offset:e=new b(0,0),blurRadius:s=0,spreadRadius:i=0}={}){this.color=typeof t=="string"?t:t.hex,this.offset=e,this.blurRadius=s,this.spreadRadius=i}static none(){return new h({blurRadius:0,spreadRadius:0})}static elevation1(){return new h({color:c.black12,offset:new b(0,1),blurRadius:3,spreadRadius:0})}static elevation2(){return new h({color:c.black26,offset:new b(0,3),blurRadius:6,spreadRadius:0})}static elevation3(){return new h({color:c.black38,offset:new b(0,10),blurRadius:20,spreadRadius:0})}static elevation4(){return new h({color:c.black45,offset:new b(0,15),blurRadius:25,spreadRadius:0})}static elevation5(){return new h({color:c.black54,offset:new b(0,20),blurRadius:40,spreadRadius:0})}toCSSString(){const{dx:t,dy:e}=this.offset;return`${t}px ${e}px ${this.blurRadius}px ${this.spreadRadius}px ${this.color}`}toString(){return`BoxShadow(color: ${this.color}, offset: ${this.offset}, blur: ${this.blurRadius})`}}class m{constructor(t=[]){this.shadows=t}toCSSString(){return this.shadows.map(t=>t.toCSSString()).join(", ")}toString(){return`BoxShadows(${this.shadows.length} shadows)`}}class f{constructor({begin:t=p.topLeft,end:e=p.bottomRight,colors:s=[],stops:i=null,tileMode:l="clamp"}={}){this.begin=t,this.end=e,this.colors=s.map(n=>typeof n=="string"?n:n.hex),this.stops=i||s.map((n,g)=>g/(s.length-1||1)),this.tileMode=l}getAngle(){const t=this.end.x-this.begin.x,e=this.end.y-this.begin.y;return Math.atan2(e,t)*(180/Math.PI)}toCSSString(){const t=this.getAngle(),e=this.colors.map((s,i)=>`${s} ${(this.stops[i]*100).toFixed(2)}%`).join(", ");return`linear-gradient(${t}deg, ${e})`}toString(){return`LinearGradient(colors: ${this.colors.length}, from: ${this.begin} to: ${this.end})`}}class ${constructor({center:t=p.center,radius:e=.5,colors:s=[],stops:i=null,tileMode:l="clamp"}={}){this.center=t,this.radius=e,this.colors=s.map(n=>typeof n=="string"?n:n.hex),this.stops=i||s.map((n,g)=>g/(s.length-1||1)),this.tileMode=l}toCSSString(){const t=(this.center.x+1)/2*100,e=(this.center.y+1)/2*100,s=this.colors.map((i,l)=>`${i} ${(this.stops[l]*100).toFixed(2)}%`).join(", ");return`radial-gradient(circle at ${t}% ${e}%, ${s})`}toString(){return`RadialGradient(colors: ${this.colors.length}, center: ${this.center})`}}class x{constructor({center:t=p.center,startAngle:e=0,endAngle:s=360,colors:i=[],stops:l=null}={}){this.center=t,this.startAngle=e,this.endAngle=s,this.colors=i.map(n=>typeof n=="string"?n:n.hex),this.stops=l||i.map((n,g)=>g/(i.length-1||1))}toCSSString(){const t=(this.center.x+1)/2*100,e=(this.center.y+1)/2*100,s=this.colors.map((i,l)=>`${i} ${(this.stops[l]*360).toFixed(2)}deg`).join(", ");return`conic-gradient(from 0deg at ${t}% ${e}%, ${s})`}toString(){return`SweepGradient(colors: ${this.colors.length}, center: ${this.center})`}}class u{constructor({color:t=null,gradient:e=null,image:s=null,border:i=new d,borderRadius:l=new a,boxShadow:n=new h,boxShadows:g=[],backgroundBlendMode:w="normal"}={}){this.color=typeof t=="string"?t:t?.hex||null,this.gradient=e,this.image=s,this.border=i,this.borderRadius=l,this.boxShadow=n,this.boxShadows=g.length>0?g:n?[n]:[],this.backgroundBlendMode=w}static color({color:t=c.primary,borderRadius:e=new a}={}){return new u({color:t,borderRadius:e})}static gradient({gradient:t=new f,borderRadius:e=new a}={}){return new u({gradient:t,borderRadius:e})}static border({border:t=d.all(),borderRadius:e=new a}={}){return new u({border:t,borderRadius:e})}static shadow({color:t=null,boxShadow:e=h.elevation2(),borderRadius:s=new a}={}){return new u({color:t,boxShadow:e,borderRadius:s})}static card({color:t=c.surface,elevation:e=1,borderRadius:s=a.circular(12)}={}){let i;switch(e){case 1:i=h.elevation1();break;case 2:i=h.elevation2();break;case 3:i=h.elevation3();break;case 4:i=h.elevation4();break;case 5:i=h.elevation5();break;default:i=h.none()}return new u({color:t,boxShadow:i,borderRadius:s})}merge(t){return t?new u({color:t.color??this.color,gradient:t.gradient??this.gradient,image:t.image??this.image,border:this.border.merge(t.border),borderRadius:this.borderRadius.merge(t.borderRadius),boxShadow:t.boxShadow??this.boxShadow,boxShadows:t.boxShadows.length>0?t.boxShadows:this.boxShadows,backgroundBlendMode:t.backgroundBlendMode??this.backgroundBlendMode}):this}toCSSObject(){const t={};this.gradient?t.background=this.gradient.toCSSString():this.color&&(t.backgroundColor=this.color);const e=this.border.toCSSObject();Object.assign(t,e);const s=this.borderRadius.toCSSObject();return Object.assign(t,s),this.boxShadows.length>0?t.boxShadow=this.boxShadows.map(i=>i.toCSSString()).join(", "):this.boxShadow&&(t.boxShadow=this.boxShadow.toCSSString()),this.backgroundBlendMode!=="normal"&&(t.mixBlendMode=this.backgroundBlendMode),t}applyToElement(t){const e=this.toCSSObject();Object.assign(t.style,e)}toString(){const t=[];return this.color&&t.push(`color: ${this.color}`),this.gradient&&t.push(`gradient: ${this.gradient}`),this.boxShadow&&t.push(`shadow: ${this.boxShadow}`),`BoxDecoration(${t.join(", ")})`}}var C={BorderSide:r,Border:d,Radius:o,BorderRadius:a,BoxShadow:h,BoxShadows:m,LinearGradient:f,RadialGradient:$,SweepGradient:x,BoxDecoration:u};export{d as Border,r as BorderSide,u as BoxDecoration,h as BoxShadow,m as BoxShadows,f as LinearGradient,$ as RadialGradient,o as Radius,x as SweepGradient,C as default};
-//# sourceMappingURL=decoration.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/decoration/decoration.js.map b/packages/flutterjs_engine/package/material/dist/utils/decoration/decoration.js.map
deleted file mode 100644
index 3836316c..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/decoration/decoration.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/decoration/decoration.js"],
-  "sourcesContent": ["// ============================================================================\r\n// FLUTTER.JS DECORATION LAYER\r\n// Border, Shadow, Gradient, and BoxDecoration classes\r\n// Layer: DECORATION (uses utils, constants, styles)\r\n// ============================================================================\r\n\r\nimport { \r\n  Offset, \r\n\r\n  Alignment\r\n} from '../utils.js';\r\n\r\nimport { Colors, } from '../../material/color.js';\r\n\r\n// ============================================================================\r\n// 1. BORDER.JS - Border styling configuration\r\n// ============================================================================\r\n\r\n/**\r\n * Represents a single border side with width, color, and style\r\n */\r\nexport class BorderSide {\r\n  constructor({\r\n    width = 1,\r\n    color = Colors.outline,\r\n    style = 'solid'\r\n  } = {}) {\r\n    this.width = width;\r\n    this.color = typeof color === 'string' ? color : color.hex;\r\n    this.style = style; // 'solid', 'dashed', 'dotted', 'double', 'none'\r\n  }\r\n\r\n  /**\r\n   * Creates a border side with no width (invisible)\r\n   */\r\n  static none() {\r\n    return new BorderSide({ width: 0, style: 'none' });\r\n  }\r\n\r\n  /**\r\n   * Merges two border sides, preferring the new one\r\n   */\r\n  merge(other) {\r\n    if (!other) return this;\r\n    return new BorderSide({\r\n      width: other.width ?? this.width,\r\n      color: other.color ?? this.color,\r\n      style: other.style ?? this.style\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Converts to CSS border string\r\n   */\r\n  toCSSString() {\r\n    if (this.width === 0 || this.style === 'none') return 'none';\r\n    return `${this.width}px ${this.style} ${this.color}`;\r\n  }\r\n\r\n  toString() {\r\n    return `BorderSide(width: ${this.width}, color: ${this.color}, style: ${this.style})`;\r\n  }\r\n}\r\n\r\n/**\r\n * Represents all four borders of a box\r\n */\r\nexport class Border {\r\n  constructor({\r\n    top = new BorderSide(),\r\n    right = new BorderSide(),\r\n    bottom = new BorderSide(),\r\n    left = new BorderSide()\r\n  } = {}) {\r\n    this.top = top;\r\n    this.right = right;\r\n    this.bottom = bottom;\r\n    this.left = left;\r\n  }\r\n\r\n  /**\r\n   * Creates a border with all sides the same\r\n   */\r\n  static all({\r\n    width = 1,\r\n    color = Colors.outline,\r\n    style = 'solid'\r\n  } = {}) {\r\n    const side = new BorderSide({ width, color, style });\r\n    return new Border({ top: side, right: side, bottom: side, left: side });\r\n  }\r\n\r\n  /**\r\n   * Creates a border with no sides\r\n   */\r\n  static none() {\r\n    const side = BorderSide.none();\r\n    return new Border({ top: side, right: side, bottom: side, left: side });\r\n  }\r\n\r\n  /**\r\n   * Creates a symmetric border (vertical and horizontal)\r\n   */\r\n  static symmetric({\r\n    vertical = new BorderSide(),\r\n    horizontal = new BorderSide()\r\n  } = {}) {\r\n    return new Border({\r\n      top: vertical,\r\n      bottom: vertical,\r\n      left: horizontal,\r\n      right: horizontal\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Creates a border with only specific sides\r\n   */\r\n  static only({\r\n    top = null,\r\n    right = null,\r\n    bottom = null,\r\n    left = null\r\n  } = {}) {\r\n    return new Border({\r\n      top: top || BorderSide.none(),\r\n      right: right || BorderSide.none(),\r\n      bottom: bottom || BorderSide.none(),\r\n      left: left || BorderSide.none()\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Merges two borders\r\n   */\r\n  merge(other) {\r\n    if (!other) return this;\r\n    return new Border({\r\n      top: this.top.merge(other.top),\r\n      right: this.right.merge(other.right),\r\n      bottom: this.bottom.merge(other.bottom),\r\n      left: this.left.merge(other.left)\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Converts to CSS border string (uses bottom for general border)\r\n   */\r\n  toCSSString() {\r\n    return this.bottom.toCSSString();\r\n  }\r\n\r\n  /**\r\n   * Converts to individual CSS border properties\r\n   */\r\n  toCSSObject() {\r\n    return {\r\n      borderTop: this.top.toCSSString(),\r\n      borderRight: this.right.toCSSString(),\r\n      borderBottom: this.bottom.toCSSString(),\r\n      borderLeft: this.left.toCSSString()\r\n    };\r\n  }\r\n\r\n  toString() {\r\n    return `Border(top: ${this.top}, right: ${this.right}, bottom: ${this.bottom}, left: ${this.left})`;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// 2. BORDER-RADIUS.JS - Rounded corners configuration\r\n// ============================================================================\r\n\r\n/**\r\n * Represents a single corner radius\r\n */\r\nexport class Radius {\r\n  constructor(x = 0, y = 0) {\r\n    this.x = x;\r\n    this.y = y || x;\r\n  }\r\n\r\n  static circular(radius) {\r\n    return new Radius(radius, radius);\r\n  }\r\n\r\n  static elliptical(x, y) {\r\n    return new Radius(x, y);\r\n  }\r\n\r\n  toString() {\r\n    return `Radius(${this.x}, ${this.y})`;\r\n  }\r\n}\r\n\r\n/**\r\n * Represents border radius for all four corners\r\n */\r\n class BorderRadius {\r\n  constructor(\r\n    topLeft = 0,\r\n    topRight = 0,\r\n    bottomRight = 0,\r\n    bottomLeft = 0\r\n  ) {\r\n    this.topLeft = topLeft instanceof Radius ? topLeft : new Radius(topLeft);\r\n    this.topRight = topRight instanceof Radius ? topRight : new Radius(topRight);\r\n    this.bottomRight = bottomRight instanceof Radius ? bottomRight : new Radius(bottomRight);\r\n    this.bottomLeft = bottomLeft instanceof Radius ? bottomLeft : new Radius(bottomLeft);\r\n  }\r\n\r\n  /**\r\n   * Creates all corners with same radius\r\n   */\r\n  static all(radius) {\r\n    return new BorderRadius(radius, radius, radius, radius);\r\n  }\r\n\r\n  /**\r\n   * Creates all corners circular\r\n   */\r\n  static circular(radius) {\r\n    return BorderRadius.all(radius);\r\n  }\r\n\r\n  /**\r\n   * Creates specific corners only\r\n   */\r\n  static only({\r\n    topLeft = 0,\r\n    topRight = 0,\r\n    bottomRight = 0,\r\n    bottomLeft = 0\r\n  } = {}) {\r\n    return new BorderRadius(topLeft, topRight, bottomRight, bottomLeft);\r\n  }\r\n\r\n  /**\r\n   * Creates vertical (top/bottom) and horizontal (left/right) symmetry\r\n   */\r\n  static vertical({\r\n    top = 0,\r\n    bottom = 0\r\n  } = {}) {\r\n    return new BorderRadius(top, top, bottom, bottom);\r\n  }\r\n\r\n  /**\r\n   * Creates horizontal (left/right) and vertical (top/bottom) symmetry\r\n   */\r\n  static horizontal({\r\n    left = 0,\r\n    right = 0\r\n  } = {}) {\r\n    return new BorderRadius(left, right, right, left);\r\n  }\r\n\r\n  /**\r\n   * Merges two BorderRadius values\r\n   */\r\n  merge(other) {\r\n    if (!other) return this;\r\n    return new BorderRadius(\r\n      other.topLeft ?? this.topLeft,\r\n      other.topRight ?? this.topRight,\r\n      other.bottomRight ?? this.bottomRight,\r\n      other.bottomLeft ?? this.bottomLeft\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Converts to CSS border-radius string\r\n   */\r\n  toCSSString() {\r\n    const tl = this.topLeft instanceof Radius ? this.topLeft.x : this.topLeft;\r\n    const tr = this.topRight instanceof Radius ? this.topRight.x : this.topRight;\r\n    const br = this.bottomRight instanceof Radius ? this.bottomRight.x : this.bottomRight;\r\n    const bl = this.bottomLeft instanceof Radius ? this.bottomLeft.x : this.bottomLeft;\r\n    return `${tl}px ${tr}px ${br}px ${bl}px`;\r\n  }\r\n\r\n  /**\r\n   * Converts to CSS border-radius object\r\n   */\r\n  toCSSObject() {\r\n    return {\r\n      borderTopLeftRadius: `${this.topLeft instanceof Radius ? this.topLeft.x : this.topLeft}px`,\r\n      borderTopRightRadius: `${this.topRight instanceof Radius ? this.topRight.x : this.topRight}px`,\r\n      borderBottomRightRadius: `${this.bottomRight instanceof Radius ? this.bottomRight.x : this.bottomRight}px`,\r\n      borderBottomLeftRadius: `${this.bottomLeft instanceof Radius ? this.bottomLeft.x : this.bottomLeft}px`\r\n    };\r\n  }\r\n\r\n  toString() {\r\n    return `BorderRadius(${this.topLeft}, ${this.topRight}, ${this.bottomRight}, ${this.bottomLeft})`;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// 3. BOX-SHADOW.JS - Shadow effects configuration\r\n// ============================================================================\r\n\r\n/**\r\n * Represents a single shadow effect\r\n */\r\nexport class BoxShadow {\r\n  constructor({\r\n    color = Colors.black54,\r\n    offset = new Offset(0, 0),\r\n    blurRadius = 0,\r\n    spreadRadius = 0\r\n  } = {}) {\r\n    this.color = typeof color === 'string' ? color : color.hex;\r\n    this.offset = offset;\r\n    this.blurRadius = blurRadius;\r\n    this.spreadRadius = spreadRadius;\r\n  }\r\n\r\n  /**\r\n   * Creates a shadow with no spread (no visible shadow)\r\n   */\r\n  static none() {\r\n    return new BoxShadow({\r\n      blurRadius: 0,\r\n      spreadRadius: 0\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Material Design 3 Elevation 1\r\n   */\r\n  static elevation1() {\r\n    return new BoxShadow({\r\n      color: Colors.black12,\r\n      offset: new Offset(0, 1),\r\n      blurRadius: 3,\r\n      spreadRadius: 0\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Material Design 3 Elevation 2\r\n   */\r\n  static elevation2() {\r\n    return new BoxShadow({\r\n      color: Colors.black26,\r\n      offset: new Offset(0, 3),\r\n      blurRadius: 6,\r\n      spreadRadius: 0\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Material Design 3 Elevation 3\r\n   */\r\n  static elevation3() {\r\n    return new BoxShadow({\r\n      color: Colors.black38,\r\n      offset: new Offset(0, 10),\r\n      blurRadius: 20,\r\n      spreadRadius: 0\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Material Design 3 Elevation 4\r\n   */\r\n  static elevation4() {\r\n    return new BoxShadow({\r\n      color: Colors.black45,\r\n      offset: new Offset(0, 15),\r\n      blurRadius: 25,\r\n      spreadRadius: 0\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Material Design 3 Elevation 5\r\n   */\r\n  static elevation5() {\r\n    return new BoxShadow({\r\n      color: Colors.black54,\r\n      offset: new Offset(0, 20),\r\n      blurRadius: 40,\r\n      spreadRadius: 0\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Converts to CSS box-shadow string\r\n   */\r\n  toCSSString() {\r\n    const { dx, dy } = this.offset;\r\n    return `${dx}px ${dy}px ${this.blurRadius}px ${this.spreadRadius}px ${this.color}`;\r\n  }\r\n\r\n  toString() {\r\n    return `BoxShadow(color: ${this.color}, offset: ${this.offset}, blur: ${this.blurRadius})`;\r\n  }\r\n}\r\n\r\n/**\r\n * Multiple shadows (supports layered shadows)\r\n */\r\nexport class BoxShadows {\r\n  constructor(shadows = []) {\r\n    this.shadows = shadows;\r\n  }\r\n\r\n  /**\r\n   * Converts to CSS box-shadow string (multiple shadows)\r\n   */\r\n  toCSSString() {\r\n    return this.shadows.map(shadow => shadow.toCSSString()).join(', ');\r\n  }\r\n\r\n  toString() {\r\n    return `BoxShadows(${this.shadows.length} shadows)`;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// 4. GRADIENT.JS - Gradient fill configuration\r\n// ============================================================================\r\n\r\n/**\r\n * Linear gradient fill\r\n */\r\nexport class LinearGradient {\r\n  constructor({\r\n    begin = Alignment.topLeft,\r\n    end = Alignment.bottomRight,\r\n    colors = [],\r\n    stops = null,\r\n    tileMode = 'clamp' // 'clamp', 'repeated', 'mirror'\r\n  } = {}) {\r\n    this.begin = begin;\r\n    this.end = end;\r\n    this.colors = colors.map(c => typeof c === 'string' ? c : c.hex);\r\n    this.stops = stops || colors.map((_, i) => i / (colors.length - 1 || 1));\r\n    this.tileMode = tileMode;\r\n  }\r\n\r\n  /**\r\n   * Calculates gradient angle in degrees\r\n   */\r\n  getAngle() {\r\n    const dx = this.end.x - this.begin.x;\r\n    const dy = this.end.y - this.begin.y;\r\n    return Math.atan2(dy, dx) * (180 / Math.PI);\r\n  }\r\n\r\n  /**\r\n   * Converts to CSS linear-gradient string\r\n   */\r\n  toCSSString() {\r\n    const angle = this.getAngle();\r\n    const colorStops = this.colors\r\n      .map((color, i) => `${color} ${(this.stops[i] * 100).toFixed(2)}%`)\r\n      .join(', ');\r\n    return `linear-gradient(${angle}deg, ${colorStops})`;\r\n  }\r\n\r\n  toString() {\r\n    return `LinearGradient(colors: ${this.colors.length}, from: ${this.begin} to: ${this.end})`;\r\n  }\r\n}\r\n\r\n/**\r\n * Radial gradient fill\r\n */\r\nexport class RadialGradient {\r\n  constructor({\r\n    center = Alignment.center,\r\n    radius = 0.5,\r\n    colors = [],\r\n    stops = null,\r\n    tileMode = 'clamp'\r\n  } = {}) {\r\n    this.center = center;\r\n    this.radius = radius;\r\n    this.colors = colors.map(c => typeof c === 'string' ? c : c.hex);\r\n    this.stops = stops || colors.map((_, i) => i / (colors.length - 1 || 1));\r\n    this.tileMode = tileMode;\r\n  }\r\n\r\n  /**\r\n   * Converts to CSS radial-gradient string\r\n   */\r\n  toCSSString() {\r\n    const centerX = ((this.center.x + 1) / 2) * 100;\r\n    const centerY = ((this.center.y + 1) / 2) * 100;\r\n    const colorStops = this.colors\r\n      .map((color, i) => `${color} ${(this.stops[i] * 100).toFixed(2)}%`)\r\n      .join(', ');\r\n    return `radial-gradient(circle at ${centerX}% ${centerY}%, ${colorStops})`;\r\n  }\r\n\r\n  toString() {\r\n    return `RadialGradient(colors: ${this.colors.length}, center: ${this.center})`;\r\n  }\r\n}\r\n\r\n/**\r\n * Sweep gradient (conic) fill\r\n */\r\nexport class SweepGradient {\r\n  constructor({\r\n    center = Alignment.center,\r\n    startAngle = 0,\r\n    endAngle = 360,\r\n    colors = [],\r\n    stops = null\r\n  } = {}) {\r\n    this.center = center;\r\n    this.startAngle = startAngle;\r\n    this.endAngle = endAngle;\r\n    this.colors = colors.map(c => typeof c === 'string' ? c : c.hex);\r\n    this.stops = stops || colors.map((_, i) => i / (colors.length - 1 || 1));\r\n  }\r\n\r\n  /**\r\n   * Converts to CSS conic-gradient string\r\n   */\r\n  toCSSString() {\r\n    const centerX = ((this.center.x + 1) / 2) * 100;\r\n    const centerY = ((this.center.y + 1) / 2) * 100;\r\n    const colorStops = this.colors\r\n      .map((color, i) => `${color} ${(this.stops[i] * 360).toFixed(2)}deg`)\r\n      .join(', ');\r\n    return `conic-gradient(from 0deg at ${centerX}% ${centerY}%, ${colorStops})`;\r\n  }\r\n\r\n  toString() {\r\n    return `SweepGradient(colors: ${this.colors.length}, center: ${this.center})`;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// 5. BOX-DECORATION.JS - Complete box decoration\r\n// ============================================================================\r\n\r\n/**\r\n * Complete decoration configuration for a box/container\r\n * Combines color, border, border-radius, shadow, and gradient\r\n */\r\nexport class BoxDecoration {\r\n  constructor({\r\n    color = null,\r\n    gradient = null,\r\n    image = null,\r\n    border = new Border(),\r\n    borderRadius = new BorderRadius(),\r\n    boxShadow = new BoxShadow(),\r\n    boxShadows = [],\r\n    backgroundBlendMode = 'normal'\r\n  } = {}) {\r\n    // Either color or gradient, not both\r\n    this.color = typeof color === 'string' ? color : color?.hex || null;\r\n    this.gradient = gradient;\r\n    this.image = image;\r\n    \r\n    this.border = border;\r\n    this.borderRadius = borderRadius;\r\n    this.boxShadow = boxShadow;\r\n    this.boxShadows = boxShadows.length > 0 ? boxShadows : (boxShadow ? [boxShadow] : []);\r\n    \r\n    this.backgroundBlendMode = backgroundBlendMode;\r\n  }\r\n\r\n  /**\r\n   * Creates a simple colored decoration\r\n   */\r\n  static color({\r\n    color = Colors.primary,\r\n    borderRadius = new BorderRadius()\r\n  } = {}) {\r\n    return new BoxDecoration({ color, borderRadius });\r\n  }\r\n\r\n  /**\r\n   * Creates a decoration with gradient\r\n   */\r\n  static gradient({\r\n    gradient = new LinearGradient(),\r\n    borderRadius = new BorderRadius()\r\n  } = {}) {\r\n    return new BoxDecoration({ gradient, borderRadius });\r\n  }\r\n\r\n  /**\r\n   * Creates a decoration with border only\r\n   */\r\n  static border({\r\n    border = Border.all(),\r\n    borderRadius = new BorderRadius()\r\n  } = {}) {\r\n    return new BoxDecoration({ border, borderRadius });\r\n  }\r\n\r\n  /**\r\n   * Creates a decoration with shadow\r\n   */\r\n  static shadow({\r\n    color = null,\r\n    boxShadow = BoxShadow.elevation2(),\r\n    borderRadius = new BorderRadius()\r\n  } = {}) {\r\n    return new BoxDecoration({ color, boxShadow, borderRadius });\r\n  }\r\n\r\n  /**\r\n   * Creates Material Design 3 card decoration\r\n   */\r\n  static card({\r\n    color = Colors.surface,\r\n    elevation = 1,\r\n    borderRadius = BorderRadius.circular(12)\r\n  } = {}) {\r\n    let shadow;\r\n    switch (elevation) {\r\n      case 1: shadow = BoxShadow.elevation1(); break;\r\n      case 2: shadow = BoxShadow.elevation2(); break;\r\n      case 3: shadow = BoxShadow.elevation3(); break;\r\n      case 4: shadow = BoxShadow.elevation4(); break;\r\n      case 5: shadow = BoxShadow.elevation5(); break;\r\n      default: shadow = BoxShadow.none();\r\n    }\r\n    return new BoxDecoration({ color, boxShadow: shadow, borderRadius });\r\n  }\r\n\r\n  /**\r\n   * Merges two decorations\r\n   */\r\n  merge(other) {\r\n    if (!other) return this;\r\n    return new BoxDecoration({\r\n      color: other.color ?? this.color,\r\n      gradient: other.gradient ?? this.gradient,\r\n      image: other.image ?? this.image,\r\n      border: this.border.merge(other.border),\r\n      borderRadius: this.borderRadius.merge(other.borderRadius),\r\n      boxShadow: other.boxShadow ?? this.boxShadow,\r\n      boxShadows: other.boxShadows.length > 0 ? other.boxShadows : this.boxShadows,\r\n      backgroundBlendMode: other.backgroundBlendMode ?? this.backgroundBlendMode\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Converts to CSS style object\r\n   */\r\n  toCSSObject() {\r\n    const style = {};\r\n\r\n    // Background\r\n    if (this.gradient) {\r\n      style.background = this.gradient.toCSSString();\r\n    } else if (this.color) {\r\n      style.backgroundColor = this.color;\r\n    }\r\n\r\n    // Border\r\n    const borderCSS = this.border.toCSSObject();\r\n    Object.assign(style, borderCSS);\r\n\r\n    // Border Radius\r\n    const radiusCSS = this.borderRadius.toCSSObject();\r\n    Object.assign(style, radiusCSS);\r\n\r\n    // Box Shadow\r\n    if (this.boxShadows.length > 0) {\r\n      style.boxShadow = this.boxShadows.map(s => s.toCSSString()).join(', ');\r\n    } else if (this.boxShadow) {\r\n      style.boxShadow = this.boxShadow.toCSSString();\r\n    }\r\n\r\n    // Blend Mode\r\n    if (this.backgroundBlendMode !== 'normal') {\r\n      style.mixBlendMode = this.backgroundBlendMode;\r\n    }\r\n\r\n    return style;\r\n  }\r\n\r\n  /**\r\n   * Applies decoration to a DOM element\r\n   */\r\n  applyToElement(element) {\r\n    const styles = this.toCSSObject();\r\n    Object.assign(element.style, styles);\r\n  }\r\n\r\n  toString() {\r\n    const parts = [];\r\n    if (this.color) parts.push(`color: ${this.color}`);\r\n    if (this.gradient) parts.push(`gradient: ${this.gradient}`);\r\n    if (this.boxShadow) parts.push(`shadow: ${this.boxShadow}`);\r\n    return `BoxDecoration(${parts.join(', ')})`;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// 6. INDEX.JS - Re-export all decoration classes\r\n// ============================================================================\r\n\r\nexport default {\r\n  // Border\r\n  BorderSide,\r\n  Border,\r\n  \r\n  // Border Radius\r\n  Radius,\r\n  BorderRadius,\r\n  \r\n  // Shadow\r\n  BoxShadow,\r\n  BoxShadows,\r\n  \r\n  // Gradient\r\n  LinearGradient,\r\n  RadialGradient,\r\n  SweepGradient,\r\n  \r\n  // Complete Decoration\r\n  BoxDecoration\r\n};"],
-  "mappings": "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",
-  "names": ["Offset", "Alignment", "Colors", "BorderSide", "width", "color", "style", "other", "Border", "top", "right", "bottom", "left", "side", "vertical", "horizontal", "Radius", "x", "y", "radius", "BorderRadius", "topLeft", "topRight", "bottomRight", "bottomLeft", "tl", "tr", "br", "bl", "BoxShadow", "offset", "blurRadius", "spreadRadius", "dx", "dy", "BoxShadows", "shadows", "shadow", "LinearGradient", "begin", "end", "colors", "stops", "tileMode", "c", "_", "i", "angle", "colorStops", "RadialGradient", "center", "centerX", "centerY", "SweepGradient", "startAngle", "endAngle", "BoxDecoration", "gradient", "image", "border", "borderRadius", "boxShadow", "boxShadows", "backgroundBlendMode", "elevation", "borderCSS", "radiusCSS", "s", "element", "styles", "parts", "decoration_default"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/divider_theme.js b/packages/flutterjs_engine/package/material/dist/utils/divider_theme.js
deleted file mode 100644
index a01d8486..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/divider_theme.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class r{constructor({thickness:t=1,indent:i=0,endIndent:e=0,height:n,color:h,space:s}={}){this.thickness=t,this.indent=i,this.endIndent=e,this.height=n??t*16,this.color=h,this.space=s}toCSSObject(t={}){return{width:"100%",height:`${this.height}px`,display:"flex",alignItems:"center",marginLeft:0,marginRight:0}}getHorizontalLineStyle(t={}){return{width:`calc(100% - ${this.indent+this.endIndent}px)`,height:`${this.thickness}px`,backgroundColor:this.color||t.outlineVariant||"#CAC7D0",border:"none",margin:`${(this.height-this.thickness)/2}px ${this.endIndent}px ${(this.height-this.thickness)/2}px ${this.indent}px`}}getVerticalLineStyle(t={}){return{width:`${this.thickness}px`,height:this.height?`${this.height}px`:"100%",backgroundColor:this.color||t.outlineVariant||"#CAC7D0",border:"none",margin:`${this.indent}px 0`}}getDividerWithSpacingStyle(t={}){const i=this.space??this.height;return{...this.getHorizontalLineStyle(t),marginTop:`${i}px`,marginBottom:`${i}px`}}getListDividerStyle(t={}){return{...this.getHorizontalLineStyle(t),margin:"0",marginBottom:`${this.height}px`}}getDividerColor(t={}){return this.color||t.outlineVariant||"#CAC7D0"}copyWith({thickness:t,indent:i,endIndent:e,height:n,color:h,space:s}={}){return new r({thickness:t??this.thickness,indent:i??this.indent,endIndent:e??this.endIndent,height:n??this.height,color:h??this.color,space:s??this.space})}merge(t){return t?this.copyWith({thickness:t.thickness,indent:t.indent,endIndent:t.endIndent,height:t.height,color:t.color,space:t.space}):this}toString(){return`DividerTheme(thickness: ${this.thickness}px, height: ${this.height}px)`}}export{r as DividerTheme};
-//# sourceMappingURL=divider_theme.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/divider_theme.js.map b/packages/flutterjs_engine/package/material/dist/utils/divider_theme.js.map
deleted file mode 100644
index 1699d935..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/divider_theme.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/divider_theme.js"],
-  "sourcesContent": ["/**\r\n * Material Design 3 Divider Theme\r\n * Defines the visual properties of Divider widgets\r\n * Follows Flutter Material Design 3 specification\r\n * \r\n * Flutter Reference: https://api.flutter.dev/flutter/material/DividerThemeData-class.html\r\n */\r\nexport class DividerTheme {\r\n  constructor({\r\n    // Dimensions\r\n    thickness = 1,\r\n    indent = 0,\r\n    endIndent = 0,\r\n    height,\r\n    \r\n    // Color\r\n    color,\r\n    \r\n    // Space\r\n    space\r\n  } = {}) {\r\n    this.thickness = thickness;\r\n    this.indent = indent;\r\n    this.endIndent = endIndent;\r\n    this.height = height ?? (thickness * 16); // Default height factor\r\n    this.color = color;\r\n    this.space = space;\r\n  }\r\n\r\n  /**\r\n   * Convert to CSS object for horizontal divider\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS style object\r\n   */\r\n  toCSSObject(themeColors = {}) {\r\n    return {\r\n      width: '100%',\r\n      height: `${this.height}px`,\r\n      display: 'flex',\r\n      alignItems: 'center',\r\n      marginLeft: 0,\r\n      marginRight: 0\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get horizontal divider line CSS\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties for the line element\r\n   */\r\n  getHorizontalLineStyle(themeColors = {}) {\r\n    const totalIndent = this.indent + this.endIndent;\r\n    const lineWidth = `calc(100% - ${totalIndent}px)`;\r\n    \r\n    return {\r\n      width: lineWidth,\r\n      height: `${this.thickness}px`,\r\n      backgroundColor: this.color || (themeColors.outlineVariant || '#CAC7D0'),\r\n      border: 'none',\r\n      margin: `${(this.height - this.thickness) / 2}px ${this.endIndent}px ${(this.height - this.thickness) / 2}px ${this.indent}px`\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get vertical divider CSS object\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getVerticalLineStyle(themeColors = {}) {\r\n    return {\r\n      width: `${this.thickness}px`,\r\n      height: this.height ? `${this.height}px` : '100%',\r\n      backgroundColor: this.color || (themeColors.outlineVariant || '#CAC7D0'),\r\n      border: 'none',\r\n      margin: `${this.indent}px 0`\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get divider with spacing CSS\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties including margins\r\n   */\r\n  getDividerWithSpacingStyle(themeColors = {}) {\r\n    const spacing = this.space ?? this.height;\r\n    return {\r\n      ...this.getHorizontalLineStyle(themeColors),\r\n      marginTop: `${spacing}px`,\r\n      marginBottom: `${spacing}px`\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get list divider CSS (commonly used between list items)\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getListDividerStyle(themeColors = {}) {\r\n    return {\r\n      ...this.getHorizontalLineStyle(themeColors),\r\n      margin: '0',\r\n      marginBottom: `${this.height}px`\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get divider color\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {string} Hex color value\r\n   */\r\n  getDividerColor(themeColors = {}) {\r\n    return this.color || themeColors.outlineVariant || '#CAC7D0';\r\n  }\r\n\r\n  /**\r\n   * Copy this theme with updated properties\r\n   * @param {Object} properties - Properties to override\r\n   * @returns {DividerTheme} New theme instance\r\n   */\r\n  copyWith({\r\n    thickness,\r\n    indent,\r\n    endIndent,\r\n    height,\r\n    color,\r\n    space\r\n  } = {}) {\r\n    return new DividerTheme({\r\n      thickness: thickness ?? this.thickness,\r\n      indent: indent ?? this.indent,\r\n      endIndent: endIndent ?? this.endIndent,\r\n      height: height ?? this.height,\r\n      color: color ?? this.color,\r\n      space: space ?? this.space\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Merge with another DividerTheme\r\n   * @param {DividerTheme} other - Theme to merge with\r\n   * @returns {DividerTheme} Merged theme\r\n   */\r\n  merge(other) {\r\n    if (!other) return this;\r\n    return this.copyWith({\r\n      thickness: other.thickness,\r\n      indent: other.indent,\r\n      endIndent: other.endIndent,\r\n      height: other.height,\r\n      color: other.color,\r\n      space: other.space\r\n    });\r\n  }\r\n\r\n  toString() {\r\n    return `DividerTheme(thickness: ${this.thickness}px, height: ${this.height}px)`;\r\n  }\r\n}"],
-  "mappings": "AAOO,MAAMA,CAAa,CACxB,YAAY,CAEV,UAAAC,EAAY,EACZ,OAAAC,EAAS,EACT,UAAAC,EAAY,EACZ,OAAAC,EAGA,MAAAC,EAGA,MAAAC,CACF,EAAI,CAAC,EAAG,CACN,KAAK,UAAYL,EACjB,KAAK,OAASC,EACd,KAAK,UAAYC,EACjB,KAAK,OAASC,GAAWH,EAAY,GACrC,KAAK,MAAQI,EACb,KAAK,MAAQC,CACf,CAOA,YAAYC,EAAc,CAAC,EAAG,CAC5B,MAAO,CACL,MAAO,OACP,OAAQ,GAAG,KAAK,MAAM,KACtB,QAAS,OACT,WAAY,SACZ,WAAY,EACZ,YAAa,CACf,CACF,CAOA,uBAAuBA,EAAc,CAAC,EAAG,CAIvC,MAAO,CACL,MAHgB,eADE,KAAK,OAAS,KAAK,SACK,MAI1C,OAAQ,GAAG,KAAK,SAAS,KACzB,gBAAiB,KAAK,OAAUA,EAAY,gBAAkB,UAC9D,OAAQ,OACR,OAAQ,IAAI,KAAK,OAAS,KAAK,WAAa,CAAC,MAAM,KAAK,SAAS,OAAO,KAAK,OAAS,KAAK,WAAa,CAAC,MAAM,KAAK,MAAM,IAC5H,CACF,CAOA,qBAAqBA,EAAc,CAAC,EAAG,CACrC,MAAO,CACL,MAAO,GAAG,KAAK,SAAS,KACxB,OAAQ,KAAK,OAAS,GAAG,KAAK,MAAM,KAAO,OAC3C,gBAAiB,KAAK,OAAUA,EAAY,gBAAkB,UAC9D,OAAQ,OACR,OAAQ,GAAG,KAAK,MAAM,MACxB,CACF,CAOA,2BAA2BA,EAAc,CAAC,EAAG,CAC3C,MAAMC,EAAU,KAAK,OAAS,KAAK,OACnC,MAAO,CACL,GAAG,KAAK,uBAAuBD,CAAW,EAC1C,UAAW,GAAGC,CAAO,KACrB,aAAc,GAAGA,CAAO,IAC1B,CACF,CAOA,oBAAoBD,EAAc,CAAC,EAAG,CACpC,MAAO,CACL,GAAG,KAAK,uBAAuBA,CAAW,EAC1C,OAAQ,IACR,aAAc,GAAG,KAAK,MAAM,IAC9B,CACF,CAOA,gBAAgBA,EAAc,CAAC,EAAG,CAChC,OAAO,KAAK,OAASA,EAAY,gBAAkB,SACrD,CAOA,SAAS,CACP,UAAAN,EACA,OAAAC,EACA,UAAAC,EACA,OAAAC,EACA,MAAAC,EACA,MAAAC,CACF,EAAI,CAAC,EAAG,CACN,OAAO,IAAIN,EAAa,CACtB,UAAWC,GAAa,KAAK,UAC7B,OAAQC,GAAU,KAAK,OACvB,UAAWC,GAAa,KAAK,UAC7B,OAAQC,GAAU,KAAK,OACvB,MAAOC,GAAS,KAAK,MACrB,MAAOC,GAAS,KAAK,KACvB,CAAC,CACH,CAOA,MAAMG,EAAO,CACX,OAAKA,EACE,KAAK,SAAS,CACnB,UAAWA,EAAM,UACjB,OAAQA,EAAM,OACd,UAAWA,EAAM,UACjB,OAAQA,EAAM,OACd,MAAOA,EAAM,MACb,MAAOA,EAAM,KACf,CAAC,EARkB,IASrB,CAEA,UAAW,CACT,MAAO,2BAA2B,KAAK,SAAS,eAAe,KAAK,MAAM,KAC5E,CACF",
-  "names": ["DividerTheme", "thickness", "indent", "endIndent", "height", "color", "space", "themeColors", "spacing", "other"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/duration.js b/packages/flutterjs_engine/package/material/dist/utils/duration.js
deleted file mode 100644
index 2de12652..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/duration.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class t{constructor(s=0){this.ms=s}get seconds(){return this.ms/1e3}get minutes(){return this.ms/6e4}get inMilliseconds(){return this.ms}static fromMilliseconds(s){return new t(s)}static fromSeconds(s){return new t(s*1e3)}static fromMinutes(s){return new t(s*6e4)}compareTo(s){return this.ms-s.ms}toString(){return`Duration(${this.ms}ms)`}}export{t as Duration};
-//# sourceMappingURL=duration.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/duration.js.map b/packages/flutterjs_engine/package/material/dist/utils/duration.js.map
deleted file mode 100644
index 25a99340..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/duration.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/duration.js"],
-  "sourcesContent": ["export class Duration {\r\n  constructor(ms = 0) {\r\n    this.ms = ms;\r\n  }\r\n\r\n  get seconds() {\r\n    return this.ms / 1000;\r\n  }\r\n\r\n  get minutes() {\r\n    return this.ms / 60000;\r\n  }\r\n\r\n  get inMilliseconds() {\r\n    return this.ms;\r\n  }\r\n\r\n  static fromMilliseconds(ms) {\r\n    return new Duration(ms);\r\n  }\r\n\r\n  static fromSeconds(s) {\r\n    return new Duration(s * 1000);\r\n  }\r\n\r\n  static fromMinutes(m) {\r\n    return new Duration(m * 60000);\r\n  }\r\n\r\n  compareTo(other) {\r\n    return this.ms - other.ms;\r\n  }\r\n\r\n  toString() {\r\n    return `Duration(${this.ms}ms)`;\r\n  }\r\n}"],
-  "mappings": "AAAO,MAAMA,CAAS,CACpB,YAAYC,EAAK,EAAG,CAClB,KAAK,GAAKA,CACZ,CAEA,IAAI,SAAU,CACZ,OAAO,KAAK,GAAK,GACnB,CAEA,IAAI,SAAU,CACZ,OAAO,KAAK,GAAK,GACnB,CAEA,IAAI,gBAAiB,CACnB,OAAO,KAAK,EACd,CAEA,OAAO,iBAAiBA,EAAI,CAC1B,OAAO,IAAID,EAASC,CAAE,CACxB,CAEA,OAAO,YAAY,EAAG,CACpB,OAAO,IAAID,EAAS,EAAI,GAAI,CAC9B,CAEA,OAAO,YAAYE,EAAG,CACpB,OAAO,IAAIF,EAASE,EAAI,GAAK,CAC/B,CAEA,UAAUC,EAAO,CACf,OAAO,KAAK,GAAKA,EAAM,EACzB,CAEA,UAAW,CACT,MAAO,YAAY,KAAK,EAAE,KAC5B,CACF",
-  "names": ["Duration", "ms", "m", "other"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/edge_insets.js b/packages/flutterjs_engine/package/material/dist/utils/edge_insets.js
deleted file mode 100644
index 9b78b9c0..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/edge_insets.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class h{constructor(t=0,i=0,r=0,o=0){this.top=t,this.right=i,this.bottom=r,this.left=o}static zero(){return new h(0,0,0,0)}static all(t){return new h(t,t,t,t)}static symmetric({vertical:t=0,horizontal:i=0}={}){return new h(t,i,t,i)}static only({top:t=0,right:i=0,bottom:r=0,left:o=0}={}){return new h(t,i,r,o)}static fromLTRB(t,i,r,o){return new h(i,r,o,t)}get vertical(){return this.top+this.bottom}get horizontal(){return this.left+this.right}get isNonNegative(){return this.top>=0&&this.right>=0&&this.bottom>=0&&this.left>=0}get isZero(){return this.top===0&&this.right===0&&this.bottom===0&&this.left===0}add(t){return new h(this.top+t.top,this.right+t.right,this.bottom+t.bottom,this.left+t.left)}copyWith({top:t,right:i,bottom:r,left:o}={}){return new h(t??this.top,i??this.right,r??this.bottom,o??this.left)}equals(t){return!t||!(t instanceof h)?!1:this.top===t.top&&this.right===t.right&&this.bottom===t.bottom&&this.left===t.left}toCSSString(){return`${this.top}px ${this.right}px ${this.bottom}px ${this.left}px`}toCSSShorthand(){const{top:t,right:i,bottom:r,left:o}=this;return t===i&&i===r&&r===o?`${t}px`:t===r&&i===o?`${t}px ${i}px`:this.toCSSString()}toCSSMargin(){return this.toCSSString()}toCSSPadding(){return this.toCSSString()}toString(){return`EdgeInsets(${this.top}, ${this.right}, ${this.bottom}, ${this.left})`}}export{h as EdgeInsets};
-//# sourceMappingURL=edge_insets.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/edge_insets.js.map b/packages/flutterjs_engine/package/material/dist/utils/edge_insets.js.map
deleted file mode 100644
index 4a02b2bf..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/edge_insets.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/edge_insets.js"],
-  "sourcesContent": ["export class EdgeInsets {\r\n  constructor(top = 0, right = 0, bottom = 0, left = 0) {\r\n    this.top = top;\r\n    this.right = right;\r\n    this.bottom = bottom;\r\n    this.left = left;\r\n  }\r\n\r\n  static zero() {\r\n    return new EdgeInsets(0, 0, 0, 0);\r\n  }\r\n\r\n  static all(value) {\r\n    return new EdgeInsets(value, value, value, value);\r\n  }\r\n\r\n  static symmetric({ vertical = 0, horizontal = 0 } = {}) {\r\n    return new EdgeInsets(vertical, horizontal, vertical, horizontal);\r\n  }\r\n\r\n  static only({ top = 0, right = 0, bottom = 0, left = 0 } = {}) {\r\n    return new EdgeInsets(top, right, bottom, left);\r\n  }\r\n\r\n  static fromLTRB(left, top, right, bottom) {\r\n    return new EdgeInsets(top, right, bottom, left);\r\n  }\r\n\r\n  get vertical() {\r\n    return this.top + this.bottom;\r\n  }\r\n\r\n  get horizontal() {\r\n    return this.left + this.right;\r\n  }\r\n\r\n  get isNonNegative() {\r\n    return this.top >= 0 && this.right >= 0 && this.bottom >= 0 && this.left >= 0;\r\n  }\r\n\r\n  get isZero() {\r\n    return this.top === 0 && this.right === 0 && this.bottom === 0 && this.left === 0;\r\n  }\r\n\r\n  add(other) {\r\n    return new EdgeInsets(\r\n      this.top + other.top,\r\n      this.right + other.right,\r\n      this.bottom + other.bottom,\r\n      this.left + other.left\r\n    );\r\n  }\r\n\r\n  copyWith({ top, right, bottom, left } = {}) {\r\n    return new EdgeInsets(\r\n      top ?? this.top,\r\n      right ?? this.right,\r\n      bottom ?? this.bottom,\r\n      left ?? this.left\r\n    );\r\n  }\r\n\r\n  equals(other) {\r\n    if (!other || !(other instanceof EdgeInsets)) {\r\n      return false;\r\n    }\r\n    return this.top === other.top &&\r\n      this.right === other.right &&\r\n      this.bottom === other.bottom &&\r\n      this.left === other.left;\r\n  }\r\n\r\n  toCSSString() {\r\n    return `${this.top}px ${this.right}px ${this.bottom}px ${this.left}px`;\r\n  }\r\n\r\n  toCSSShorthand() {\r\n    const { top, right, bottom, left } = this;\r\n    if (top === right && right === bottom && bottom === left) {\r\n      return `${top}px`;\r\n    }\r\n    if (top === bottom && right === left) {\r\n      return `${top}px ${right}px`;\r\n    }\r\n    return this.toCSSString();\r\n  }\r\n\r\n  toCSSMargin() {\r\n    return this.toCSSString();\r\n  }\r\n\r\n  toCSSPadding() {\r\n    return this.toCSSString();\r\n  }\r\n\r\n  toString() {\r\n    return `EdgeInsets(${this.top}, ${this.right}, ${this.bottom}, ${this.left})`;\r\n  }\r\n}"],
-  "mappings": "AAAO,MAAMA,CAAW,CACtB,YAAYC,EAAM,EAAGC,EAAQ,EAAGC,EAAS,EAAGC,EAAO,EAAG,CACpD,KAAK,IAAMH,EACX,KAAK,MAAQC,EACb,KAAK,OAASC,EACd,KAAK,KAAOC,CACd,CAEA,OAAO,MAAO,CACZ,OAAO,IAAIJ,EAAW,EAAG,EAAG,EAAG,CAAC,CAClC,CAEA,OAAO,IAAIK,EAAO,CAChB,OAAO,IAAIL,EAAWK,EAAOA,EAAOA,EAAOA,CAAK,CAClD,CAEA,OAAO,UAAU,CAAE,SAAAC,EAAW,EAAG,WAAAC,EAAa,CAAE,EAAI,CAAC,EAAG,CACtD,OAAO,IAAIP,EAAWM,EAAUC,EAAYD,EAAUC,CAAU,CAClE,CAEA,OAAO,KAAK,CAAE,IAAAN,EAAM,EAAG,MAAAC,EAAQ,EAAG,OAAAC,EAAS,EAAG,KAAAC,EAAO,CAAE,EAAI,CAAC,EAAG,CAC7D,OAAO,IAAIJ,EAAWC,EAAKC,EAAOC,EAAQC,CAAI,CAChD,CAEA,OAAO,SAASA,EAAMH,EAAKC,EAAOC,EAAQ,CACxC,OAAO,IAAIH,EAAWC,EAAKC,EAAOC,EAAQC,CAAI,CAChD,CAEA,IAAI,UAAW,CACb,OAAO,KAAK,IAAM,KAAK,MACzB,CAEA,IAAI,YAAa,CACf,OAAO,KAAK,KAAO,KAAK,KAC1B,CAEA,IAAI,eAAgB,CAClB,OAAO,KAAK,KAAO,GAAK,KAAK,OAAS,GAAK,KAAK,QAAU,GAAK,KAAK,MAAQ,CAC9E,CAEA,IAAI,QAAS,CACX,OAAO,KAAK,MAAQ,GAAK,KAAK,QAAU,GAAK,KAAK,SAAW,GAAK,KAAK,OAAS,CAClF,CAEA,IAAII,EAAO,CACT,OAAO,IAAIR,EACT,KAAK,IAAMQ,EAAM,IACjB,KAAK,MAAQA,EAAM,MACnB,KAAK,OAASA,EAAM,OACpB,KAAK,KAAOA,EAAM,IACpB,CACF,CAEA,SAAS,CAAE,IAAAP,EAAK,MAAAC,EAAO,OAAAC,EAAQ,KAAAC,CAAK,EAAI,CAAC,EAAG,CAC1C,OAAO,IAAIJ,EACTC,GAAO,KAAK,IACZC,GAAS,KAAK,MACdC,GAAU,KAAK,OACfC,GAAQ,KAAK,IACf,CACF,CAEA,OAAOI,EAAO,CACZ,MAAI,CAACA,GAAS,EAAEA,aAAiBR,GACxB,GAEF,KAAK,MAAQQ,EAAM,KACxB,KAAK,QAAUA,EAAM,OACrB,KAAK,SAAWA,EAAM,QACtB,KAAK,OAASA,EAAM,IACxB,CAEA,aAAc,CACZ,MAAO,GAAG,KAAK,GAAG,MAAM,KAAK,KAAK,MAAM,KAAK,MAAM,MAAM,KAAK,IAAI,IACpE,CAEA,gBAAiB,CACf,KAAM,CAAE,IAAAP,EAAK,MAAAC,EAAO,OAAAC,EAAQ,KAAAC,CAAK,EAAI,KACrC,OAAIH,IAAQC,GAASA,IAAUC,GAAUA,IAAWC,EAC3C,GAAGH,CAAG,KAEXA,IAAQE,GAAUD,IAAUE,EACvB,GAAGH,CAAG,MAAMC,CAAK,KAEnB,KAAK,YAAY,CAC1B,CAEA,aAAc,CACZ,OAAO,KAAK,YAAY,CAC1B,CAEA,cAAe,CACb,OAAO,KAAK,YAAY,CAC1B,CAEA,UAAW,CACT,MAAO,cAAc,KAAK,GAAG,KAAK,KAAK,KAAK,KAAK,KAAK,MAAM,KAAK,KAAK,IAAI,GAC5E,CACF",
-  "names": ["EdgeInsets", "top", "right", "bottom", "left", "value", "vertical", "horizontal", "other"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/geometry.js b/packages/flutterjs_engine/package/material/dist/utils/geometry.js
deleted file mode 100644
index 06cfdf73..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/geometry.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class u{constructor(t=0,i=0){this._dx=t,this._dy=i}get dx(){return this._dx}get dy(){return this._dy}get isInfinite(){return this._dx>=Number.POSITIVE_INFINITY||this._dy>=Number.POSITIVE_INFINITY}get isFinite(){return Number.isFinite(this._dx)&&Number.isFinite(this._dy)}lessThan(t){return this._dx<t._dx&&this._dy<t._dy}lessThanOrEqual(t){return this._dx<=t._dx&&this._dy<=t._dy}greaterThan(t){return this._dx>t._dx&&this._dy>t._dy}greaterThanOrEqual(t){return this._dx>=t._dx&&this._dy>=t._dy}equals(t){return!t||!(t instanceof u)?!1:this._dx===t._dx&&this._dy===t._dy}hashCode(){return this._hashCombine(this._dx,this._dy)}_hashCombine(t,i){let e=0;return e=(e<<5)-e+t,e=(e<<5)-e+i,e&e}toString(){return`${this.constructor.name}(${this._dx.toFixed(1)}, ${this._dy.toFixed(1)})`}}class h extends u{constructor(t=0,i=0){super(t,i)}get width(){return this._dx}get height(){return this._dy}static get zero(){return new h(0,0)}static get infinite(){return new h(Number.POSITIVE_INFINITY,Number.POSITIVE_INFINITY)}static copy(t){return!t||!(t instanceof h)?new h:new h(t.width,t.height)}static square(t){return new h(t,t)}static fromWidth(t){return new h(t,Number.POSITIVE_INFINITY)}static fromHeight(t){return new h(Number.POSITIVE_INFINITY,t)}static fromRadius(t){return new h(t*2,t*2)}get isEmpty(){return this.width<=0||this.height<=0}get aspectRatio(){return this.height!==0?this.width/this.height:this.width>0?Number.POSITIVE_INFINITY:this.width<0?Number.NEGATIVE_INFINITY:0}get shortestSide(){return Math.min(Math.abs(this.width),Math.abs(this.height))}get longestSide(){return Math.max(Math.abs(this.width),Math.abs(this.height))}get flipped(){return new h(this.height,this.width)}topLeft(t=new n(0,0)){return t}topCenter(t=new n(0,0)){return new n(t.dx+this.width/2,t.dy)}topRight(t=new n(0,0)){return new n(t.dx+this.width,t.dy)}centerLeft(t=new n(0,0)){return new n(t.dx,t.dy+this.height/2)}center(t=new n(0,0)){return new n(t.dx+this.width/2,t.dy+this.height/2)}centerRight(t=new n(0,0)){return new n(t.dx+this.width,t.dy+this.height/2)}bottomLeft(t=new n(0,0)){return new n(t.dx,t.dy+this.height)}bottomCenter(t=new n(0,0)){return new n(t.dx+this.width/2,t.dy+this.height)}bottomRight(t=new n(0,0)){return new n(t.dx+this.width,t.dy+this.height)}contains(t){return!t||!(t instanceof n)?!1:t.dx>=0&&t.dx<this.width&&t.dy>=0&&t.dy<this.height}subtract(t){if(t instanceof h)return new n(this.width-t.width,this.height-t.height);if(t instanceof n)return new h(this.width-t.dx,this.height-t.dy);throw new Error(`Cannot subtract ${t.constructor.name} from Size`)}add(t){if(!t||!(t instanceof n))throw new Error("Can only add Offset to Size");return new h(this.width+t.dx,this.height+t.dy)}multiply(t){if(typeof t!="number")throw new Error("Can only multiply Size by number");return new h(this.width*t,this.height*t)}divide(t){if(typeof t!="number")throw new Error("Can only divide Size by number");if(t===0)throw new Error("Division by zero");return new h(this.width/t,this.height/t)}floorDivide(t){if(typeof t!="number")throw new Error("Can only divide Size by number");if(t===0)throw new Error("Division by zero");return new h(Math.floor(this.width/t),Math.floor(this.height/t))}modulo(t){if(typeof t!="number")throw new Error("Can only apply modulo with number");return new h(this.width%t,this.height%t)}static lerp(t,i,e){if(typeof e!="number"||e<0||e>1)throw new Error("Parameter t must be between 0 and 1");return i==null?t==null?null:t.multiply(1-e):t==null?i.multiply(e):new h(h._lerpDouble(t.width,i.width,e),h._lerpDouble(t.height,i.height,e))}static _lerpDouble(t,i,e){return t+(i-t)*e}equals(t){return!t||!(t instanceof h)?!1:this._dx===t._dx&&this._dy===t._dy}hashCode(){return this._hashCombine(this.width,this.height)}toString(){return`Size(${this.width.toFixed(1)}, ${this.height.toFixed(1)})`}}class n extends u{constructor(t=0,i=0){super(t,i)}static get zero(){return new n(0,0)}static get infinite(){return new n(Number.POSITIVE_INFINITY,Number.POSITIVE_INFINITY)}static fromDirection(t,i=1){return new n(i*Math.cos(t),i*Math.sin(t))}static lerp(t,i,e){if(typeof e!="number"||e<0||e>1)throw new Error("Parameter t must be between 0 and 1");return i==null?t==null?null:t.multiply(1-e):t==null?i.multiply(e):new n(n._lerpDouble(t.dx,i.dx,e),n._lerpDouble(t.dy,i.dy,e))}static _lerpDouble(t,i,e){return t+(i-t)*e}get distance(){return Math.sqrt(this._dx*this._dx+this._dy*this._dy)}get distanceSquared(){return this._dx*this._dx+this._dy*this._dy}get direction(){return Math.atan2(this._dy,this._dx)}add(t){if(!t||!(t instanceof n))throw new Error("Can only add Offset to Offset");return new n(this._dx+t._dx,this._dy+t._dy)}subtract(t){if(!t||!(t instanceof n))throw new Error("Can only subtract Offset from Offset");return new n(this._dx-t._dx,this._dy-t._dy)}multiply(t){if(typeof t!="number")throw new Error("Can only multiply Offset by number");return new n(this._dx*t,this._dy*t)}divide(t){if(typeof t!="number")throw new Error("Can only divide Offset by number");if(t===0)throw new Error("Division by zero");return new n(this._dx/t,this._dy/t)}floorDivide(t){if(typeof t!="number")throw new Error("Can only divide Offset by number");if(t===0)throw new Error("Division by zero");return new n(Math.floor(this._dx/t),Math.floor(this._dy/t))}modulo(t){if(typeof t!="number")throw new Error("Can only apply modulo with number");return new n(this._dx%t,this._dy%t)}scale(t,i=t){return new n(this._dx*t,this._dy*i)}rotate(t){const i=Math.cos(t),e=Math.sin(t);return new n(this._dx*i-this._dy*e,this._dx*e+this._dy*i)}translate(t=0,i=0){return new n(this._dx+t,this._dy+i)}get negate(){return new n(-this._dx,-this._dy)}equals(t){return!t||!(t instanceof n)?!1:this._dx===t._dx&&this._dy===t._dy}hashCode(){return this._hashCombine(this._dx,this._dy)}toString(){return`Offset(${this._dx.toFixed(1)}, ${this._dy.toFixed(1)})`}}class l{constructor(t=0,i=0,e=0,o=0){this.left=t,this.top=i,this.right=e,this.bottom=o}static fromLTWH(t,i,e,o){return new l(t,i,t+e,i+o)}static fromCircle(t,i){return new l(t.dx-i,t.dy-i,t.dx+i,t.dy+i)}static fromPoints(t,i){return new l(Math.min(t.dx,i.dx),Math.min(t.dy,i.dy),Math.max(t.dx,i.dx),Math.max(t.dy,i.dy))}get width(){return this.right-this.left}get height(){return this.bottom-this.top}get size(){return new h(this.width,this.height)}get topLeft(){return new n(this.left,this.top)}get bottomRight(){return new n(this.right,this.bottom)}get center(){return new n(this.left+this.width/2,this.top+this.height/2)}contains(t){return t.dx>=this.left&&t.dx<this.right&&t.dy>=this.top&&t.dy<this.bottom}intersects(t){return!(this.left>=t.right||this.right<=t.left||this.top>=t.bottom||this.bottom<=t.top)}toString(){return`Rect.fromLTRB(${this.left.toFixed(1)}, ${this.top.toFixed(1)}, ${this.right.toFixed(1)}, ${this.bottom.toFixed(1)})`}}class r{constructor(t=0,i=0){this.x=t,this.y=i}static circular(t){return new r(t,t)}static elliptical(t,i){return new r(t,i)}static get zero(){return new r(0,0)}clamp(t={}){const{minimum:i,maximum:e}=t,o=i||r.circular(Number.NEGATIVE_INFINITY),m=e||r.circular(Number.POSITIVE_INFINITY);return new r(r._clampDouble(this.x,o.x,m.x),r._clampDouble(this.y,o.y,m.y))}clampValues(t={}){const{minimumX:i,minimumY:e,maximumX:o,maximumY:m}=t;return new r(r._clampDouble(this.x,i??Number.NEGATIVE_INFINITY,o??Number.POSITIVE_INFINITY),r._clampDouble(this.y,e??Number.NEGATIVE_INFINITY,m??Number.POSITIVE_INFINITY))}static _clampDouble(t,i,e){return t<i?i:t>e?e:t}negate(){return new r(-this.x,-this.y)}subtract(t){if(!t||!(t instanceof r))throw new Error("Can only subtract Radius from Radius");return new r(this.x-t.x,this.y-t.y)}add(t){if(!t||!(t instanceof r))throw new Error("Can only add Radius to Radius");return new r(this.x+t.x,this.y+t.y)}multiply(t){if(typeof t!="number")throw new Error("Can only multiply Radius by number");return new r(this.x*t,this.y*t)}divide(t){if(typeof t!="number")throw new Error("Can only divide Radius by number");if(t===0)throw new Error("Division by zero");return new r(this.x/t,this.y/t)}floorDivide(t){if(typeof t!="number")throw new Error("Can only divide Radius by number");if(t===0)throw new Error("Division by zero");return new r(Math.floor(this.x/t),Math.floor(this.y/t))}modulo(t){if(typeof t!="number")throw new Error("Can only apply modulo with number");return new r(this.x%t,this.y%t)}static lerp(t,i,e){if(typeof e!="number"||e<0||e>1)throw new Error("Parameter t must be between 0 and 1");if(i==null){if(t==null)return null;const o=1-e;return new r(t.x*o,t.y*o)}return t==null?new r(i.x*e,i.y*e):new r(r._lerpDouble(t.x,i.x,e),r._lerpDouble(t.y,i.y,e))}static _lerpDouble(t,i,e){return t+(i-t)*e}equals(t){return!t||!(t instanceof r)?!1:this.x===t.x&&this.y===t.y}hashCode(){let t=0;return t=(t<<5)-t+this.x,t=(t<<5)-t+this.y,t&t}toString(){return this.x===this.y?`Radius.circular(${this.x.toFixed(1)})`:`Radius.elliptical(${this.x.toFixed(1)}, ${this.y.toFixed(1)})`}}class s{constructor(t,i,e,o){this.topLeft=t||r.zero,this.topRight=i||r.zero,this.bottomRight=e||r.zero,this.bottomLeft=o||r.zero}static all(t){return t instanceof r||(t=r.circular(t)),new s(t,t,t,t)}static circular(t){const i=r.circular(t);return new s(i,i,i,i)}static vertical(t,i){return new s(t,t,i,i)}static horizontal(t,i){return new s(t,i,i,t)}static only({topLeft:t,topRight:i,bottomRight:e,bottomLeft:o}={}){return new s(t||r.zero,i||r.zero,e||r.zero,o||r.zero)}static fromBorderSide(t,i){return i instanceof r||(i=r.circular(i)),new s(i,i,i,i)}static get zero(){return new s(r.zero,r.zero,r.zero,r.zero)}get isNonNegative(){return this.topLeft.x>=0&&this.topLeft.y>=0&&this.topRight.x>=0&&this.topRight.y>=0&&this.bottomRight.x>=0&&this.bottomRight.y>=0&&this.bottomLeft.x>=0&&this.bottomLeft.y>=0}clamp(t={}){const{minimum:i,maximum:e}=t;return new s(this.topLeft.clamp({minimum:i,maximum:e}),this.topRight.clamp({minimum:i,maximum:e}),this.bottomRight.clamp({minimum:i,maximum:e}),this.bottomLeft.clamp({minimum:i,maximum:e}))}subtract(t){if(!t||!(t instanceof s))throw new Error("Can only subtract BorderRadius from BorderRadius");return new s(this.topLeft.subtract(t.topLeft),this.topRight.subtract(t.topRight),this.bottomRight.subtract(t.bottomRight),this.bottomLeft.subtract(t.bottomLeft))}add(t){if(!t||!(t instanceof s))throw new Error("Can only add BorderRadius to BorderRadius");return new s(this.topLeft.add(t.topLeft),this.topRight.add(t.topRight),this.bottomRight.add(t.bottomRight),this.bottomLeft.add(t.bottomLeft))}multiply(t){if(typeof t!="number")throw new Error("Can only multiply BorderRadius by number");return new s(this.topLeft.multiply(t),this.topRight.multiply(t),this.bottomRight.multiply(t),this.bottomLeft.multiply(t))}divide(t){if(typeof t!="number")throw new Error("Can only divide BorderRadius by number");return new s(this.topLeft.divide(t),this.topRight.divide(t),this.bottomRight.divide(t),this.bottomLeft.divide(t))}toCSSString(){return this._isUniform()?this.topLeft.x===this.topRight.x&&this.topRight.x===this.bottomRight.x&&this.bottomRight.x===this.bottomLeft.x?`${this.topLeft.x}px`:`${this.topLeft.x}px ${this.topRight.x}px ${this.bottomRight.x}px ${this.bottomLeft.x}px`:`${this.topLeft.x}px ${this.topRight.x}px ${this.bottomRight.x}px ${this.bottomLeft.x}px`}_isUniform(){return this.topLeft.x===this.topLeft.y&&this.topRight.x===this.topRight.y&&this.bottomRight.x===this.bottomRight.y&&this.bottomLeft.x===this.bottomLeft.y}static lerp(t,i,e){if(typeof e!="number"||e<0||e>1)throw new Error("Parameter t must be between 0 and 1");return i==null?t==null?null:t.multiply(1-e):t==null?i.multiply(e):new s(r.lerp(t.topLeft,i.topLeft,e),r.lerp(t.topRight,i.topRight,e),r.lerp(t.bottomRight,i.bottomRight,e),r.lerp(t.bottomLeft,i.bottomLeft,e))}equals(t){return!t||!(t instanceof s)?!1:this.topLeft.equals(t.topLeft)&&this.topRight.equals(t.topRight)&&this.bottomRight.equals(t.bottomRight)&&this.bottomLeft.equals(t.bottomLeft)}hashCode(){let t=0;return t=(t<<5)-t+this.topLeft.hashCode(),t=(t<<5)-t+this.topRight.hashCode(),t=(t<<5)-t+this.bottomRight.hashCode(),t=(t<<5)-t+this.bottomLeft.hashCode(),t&t}toString(){return this.topLeft.equals(this.topRight)&&this.topRight.equals(this.bottomRight)&&this.bottomRight.equals(this.bottomLeft)?`BorderRadius.all(${this.topLeft.toString()})`:`BorderRadius(topLeft: ${this.topLeft}, topRight: ${this.topRight}, bottomRight: ${this.bottomRight}, bottomLeft: ${this.bottomLeft})`}}export{s as BorderRadius,n as Offset,u as OffsetBase,r as Radius,l as Rect,h as Size};
-//# sourceMappingURL=geometry.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/geometry.js.map b/packages/flutterjs_engine/package/material/dist/utils/geometry.js.map
deleted file mode 100644
index 53ef3eb6..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/geometry.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/geometry.js"],
-  "sourcesContent": ["\r\n/**\r\n * OffsetBase - Abstract base class for Size and Offset\r\n * Provides common comparison and utility operations\r\n */\r\nclass OffsetBase {\r\n    constructor(dx = 0, dy = 0) {\r\n        this._dx = dx;\r\n        this._dy = dy;\r\n    }\r\n\r\n    get dx() {\r\n        return this._dx;\r\n    }\r\n\r\n    get dy() {\r\n        return this._dy;\r\n    }\r\n\r\n    get isInfinite() {\r\n        return this._dx >= Number.POSITIVE_INFINITY || this._dy >= Number.POSITIVE_INFINITY;\r\n    }\r\n\r\n    get isFinite() {\r\n        return Number.isFinite(this._dx) && Number.isFinite(this._dy);\r\n    }\r\n\r\n    // Comparison operators\r\n    lessThan(other) {\r\n        return this._dx < other._dx && this._dy < other._dy;\r\n    }\r\n\r\n    lessThanOrEqual(other) {\r\n        return this._dx <= other._dx && this._dy <= other._dy;\r\n    }\r\n\r\n    greaterThan(other) {\r\n        return this._dx > other._dx && this._dy > other._dy;\r\n    }\r\n\r\n    greaterThanOrEqual(other) {\r\n        return this._dx >= other._dx && this._dy >= other._dy;\r\n    }\r\n\r\n    equals(other) {\r\n        if (!other || !(other instanceof OffsetBase)) {\r\n            return false;\r\n        }\r\n        return this._dx === other._dx && this._dy === other._dy;\r\n    }\r\n\r\n    hashCode() {\r\n        return this._hashCombine(this._dx, this._dy);\r\n    }\r\n\r\n    _hashCombine(a, b) {\r\n        let hash = 0;\r\n        hash = ((hash << 5) - hash) + a;\r\n        hash = ((hash << 5) - hash) + b;\r\n        return hash & hash; // Convert to 32bit integer\r\n    }\r\n\r\n    toString() {\r\n        return `${this.constructor.name}(${this._dx.toFixed(1)}, ${this._dy.toFixed(1)})`;\r\n    }\r\n}\r\n\r\n/**\r\n * Size - Represents 2D dimensions with width and height\r\n * Extends OffsetBase for comparison operations\r\n */\r\nclass Size extends OffsetBase {\r\n    constructor(width = 0, height = 0) {\r\n        super(width, height);\r\n    }\r\n\r\n    get width() {\r\n        return this._dx;\r\n    }\r\n\r\n    get height() {\r\n        return this._dy;\r\n    }\r\n\r\n    // Static constants\r\n    static get zero() {\r\n        return new Size(0, 0);\r\n    }\r\n\r\n    static get infinite() {\r\n        return new Size(Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY);\r\n    }\r\n\r\n    // Static factory methods\r\n    static copy(source) {\r\n        if (!source || !(source instanceof Size)) {\r\n            return new Size();\r\n        }\r\n        return new Size(source.width, source.height);\r\n    }\r\n\r\n    static square(dimension) {\r\n        return new Size(dimension, dimension);\r\n    }\r\n\r\n    static fromWidth(width) {\r\n        return new Size(width, Number.POSITIVE_INFINITY);\r\n    }\r\n\r\n    static fromHeight(height) {\r\n        return new Size(Number.POSITIVE_INFINITY, height);\r\n    }\r\n\r\n    static fromRadius(radius) {\r\n        return new Size(radius * 2.0, radius * 2.0);\r\n    }\r\n\r\n    // Properties\r\n    get isEmpty() {\r\n        return this.width <= 0 || this.height <= 0;\r\n    }\r\n\r\n    get aspectRatio() {\r\n        if (this.height !== 0) {\r\n            return this.width / this.height;\r\n        }\r\n        if (this.width > 0) {\r\n            return Number.POSITIVE_INFINITY;\r\n        }\r\n        if (this.width < 0) {\r\n            return Number.NEGATIVE_INFINITY;\r\n        }\r\n        return 0;\r\n    }\r\n\r\n    get shortestSide() {\r\n        return Math.min(Math.abs(this.width), Math.abs(this.height));\r\n    }\r\n\r\n    get longestSide() {\r\n        return Math.max(Math.abs(this.width), Math.abs(this.height));\r\n    }\r\n\r\n    get flipped() {\r\n        return new Size(this.height, this.width);\r\n    }\r\n\r\n    // Point operations - returns Offset\r\n    topLeft(origin = new Offset(0, 0)) {\r\n        return origin;\r\n    }\r\n\r\n    topCenter(origin = new Offset(0, 0)) {\r\n        return new Offset(origin.dx + this.width / 2.0, origin.dy);\r\n    }\r\n\r\n    topRight(origin = new Offset(0, 0)) {\r\n        return new Offset(origin.dx + this.width, origin.dy);\r\n    }\r\n\r\n    centerLeft(origin = new Offset(0, 0)) {\r\n        return new Offset(origin.dx, origin.dy + this.height / 2.0);\r\n    }\r\n\r\n    center(origin = new Offset(0, 0)) {\r\n        return new Offset(origin.dx + this.width / 2.0, origin.dy + this.height / 2.0);\r\n    }\r\n\r\n    centerRight(origin = new Offset(0, 0)) {\r\n        return new Offset(origin.dx + this.width, origin.dy + this.height / 2.0);\r\n    }\r\n\r\n    bottomLeft(origin = new Offset(0, 0)) {\r\n        return new Offset(origin.dx, origin.dy + this.height);\r\n    }\r\n\r\n    bottomCenter(origin = new Offset(0, 0)) {\r\n        return new Offset(origin.dx + this.width / 2.0, origin.dy + this.height);\r\n    }\r\n\r\n    bottomRight(origin = new Offset(0, 0)) {\r\n        return new Offset(origin.dx + this.width, origin.dy + this.height);\r\n    }\r\n\r\n    // Point containment check\r\n    contains(offset) {\r\n        if (!offset || !(offset instanceof Offset)) {\r\n            return false;\r\n        }\r\n        return (\r\n            offset.dx >= 0 &&\r\n            offset.dx < this.width &&\r\n            offset.dy >= 0 &&\r\n            offset.dy < this.height\r\n        );\r\n    }\r\n\r\n    // Arithmetic operations\r\n    subtract(other) {\r\n        if (other instanceof Size) {\r\n            return new Offset(this.width - other.width, this.height - other.height);\r\n        }\r\n        if (other instanceof Offset) {\r\n            return new Size(this.width - other.dx, this.height - other.dy);\r\n        }\r\n        throw new Error(`Cannot subtract ${other.constructor.name} from Size`);\r\n    }\r\n\r\n    add(offset) {\r\n        if (!offset || !(offset instanceof Offset)) {\r\n            throw new Error('Can only add Offset to Size');\r\n        }\r\n        return new Size(this.width + offset.dx, this.height + offset.dy);\r\n    }\r\n\r\n    multiply(operand) {\r\n        if (typeof operand !== 'number') {\r\n            throw new Error('Can only multiply Size by number');\r\n        }\r\n        return new Size(this.width * operand, this.height * operand);\r\n    }\r\n\r\n    divide(operand) {\r\n        if (typeof operand !== 'number') {\r\n            throw new Error('Can only divide Size by number');\r\n        }\r\n        if (operand === 0) {\r\n            throw new Error('Division by zero');\r\n        }\r\n        return new Size(this.width / operand, this.height / operand);\r\n    }\r\n\r\n    floorDivide(operand) {\r\n        if (typeof operand !== 'number') {\r\n            throw new Error('Can only divide Size by number');\r\n        }\r\n        if (operand === 0) {\r\n            throw new Error('Division by zero');\r\n        }\r\n        return new Size(\r\n            Math.floor(this.width / operand),\r\n            Math.floor(this.height / operand)\r\n        );\r\n    }\r\n\r\n    modulo(operand) {\r\n        if (typeof operand !== 'number') {\r\n            throw new Error('Can only apply modulo with number');\r\n        }\r\n        return new Size(this.width % operand, this.height % operand);\r\n    }\r\n\r\n    // Static interpolation\r\n    static lerp(a, b, t) {\r\n        if (typeof t !== 'number' || t < 0 || t > 1) {\r\n            throw new Error('Parameter t must be between 0 and 1');\r\n        }\r\n\r\n        if (b === null || b === undefined) {\r\n            if (a === null || a === undefined) {\r\n                return null;\r\n            }\r\n            return a.multiply(1.0 - t);\r\n        }\r\n\r\n        if (a === null || a === undefined) {\r\n            return b.multiply(t);\r\n        }\r\n\r\n        return new Size(\r\n            Size._lerpDouble(a.width, b.width, t),\r\n            Size._lerpDouble(a.height, b.height, t)\r\n        );\r\n    }\r\n\r\n    static _lerpDouble(a, b, t) {\r\n        return a + (b - a) * t;\r\n    }\r\n\r\n    // Equality and hashing\r\n    equals(other) {\r\n        if (!other || !(other instanceof Size)) {\r\n            return false;\r\n        }\r\n        return this._dx === other._dx && this._dy === other._dy;\r\n    }\r\n\r\n    hashCode() {\r\n        return this._hashCombine(this.width, this.height);\r\n    }\r\n\r\n    toString() {\r\n        return `Size(${this.width.toFixed(1)}, ${this.height.toFixed(1)})`;\r\n    }\r\n}\r\n\r\n/**\r\n * Offset - Represents a 2D position/displacement\r\n * Used for relative positioning in coordinate space\r\n */\r\nclass Offset extends OffsetBase {\r\n    constructor(dx = 0, dy = 0) {\r\n        super(dx, dy);\r\n    }\r\n\r\n    static get zero() {\r\n        return new Offset(0, 0);\r\n    }\r\n\r\n    static get infinite() {\r\n        return new Offset(Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY);\r\n    }\r\n\r\n    static fromDirection(direction, distance = 1.0) {\r\n        return new Offset(\r\n            distance * Math.cos(direction),\r\n            distance * Math.sin(direction)\r\n        );\r\n    }\r\n\r\n    static lerp(a, b, t) {\r\n        if (typeof t !== 'number' || t < 0 || t > 1) {\r\n            throw new Error('Parameter t must be between 0 and 1');\r\n        }\r\n\r\n        if (b === null || b === undefined) {\r\n            if (a === null || a === undefined) {\r\n                return null;\r\n            }\r\n            return a.multiply(1.0 - t);\r\n        }\r\n\r\n        if (a === null || a === undefined) {\r\n            return b.multiply(t);\r\n        }\r\n\r\n        return new Offset(\r\n            Offset._lerpDouble(a.dx, b.dx, t),\r\n            Offset._lerpDouble(a.dy, b.dy, t)\r\n        );\r\n    }\r\n\r\n    static _lerpDouble(a, b, t) {\r\n        return a + (b - a) * t;\r\n    }\r\n\r\n    // Properties\r\n    get distance() {\r\n        return Math.sqrt(this._dx * this._dx + this._dy * this._dy);\r\n    }\r\n\r\n    get distanceSquared() {\r\n        return this._dx * this._dx + this._dy * this._dy;\r\n    }\r\n\r\n    get direction() {\r\n        return Math.atan2(this._dy, this._dx);\r\n    }\r\n\r\n    // Operations\r\n    add(other) {\r\n        if (!other || !(other instanceof Offset)) {\r\n            throw new Error('Can only add Offset to Offset');\r\n        }\r\n        return new Offset(this._dx + other._dx, this._dy + other._dy);\r\n    }\r\n\r\n    subtract(other) {\r\n        if (!other || !(other instanceof Offset)) {\r\n            throw new Error('Can only subtract Offset from Offset');\r\n        }\r\n        return new Offset(this._dx - other._dx, this._dy - other._dy);\r\n    }\r\n\r\n    multiply(operand) {\r\n        if (typeof operand !== 'number') {\r\n            throw new Error('Can only multiply Offset by number');\r\n        }\r\n        return new Offset(this._dx * operand, this._dy * operand);\r\n    }\r\n\r\n    divide(operand) {\r\n        if (typeof operand !== 'number') {\r\n            throw new Error('Can only divide Offset by number');\r\n        }\r\n        if (operand === 0) {\r\n            throw new Error('Division by zero');\r\n        }\r\n        return new Offset(this._dx / operand, this._dy / operand);\r\n    }\r\n\r\n    floorDivide(operand) {\r\n        if (typeof operand !== 'number') {\r\n            throw new Error('Can only divide Offset by number');\r\n        }\r\n        if (operand === 0) {\r\n            throw new Error('Division by zero');\r\n        }\r\n        return new Offset(\r\n            Math.floor(this._dx / operand),\r\n            Math.floor(this._dy / operand)\r\n        );\r\n    }\r\n\r\n    modulo(operand) {\r\n        if (typeof operand !== 'number') {\r\n            throw new Error('Can only apply modulo with number');\r\n        }\r\n        return new Offset(this._dx % operand, this._dy % operand);\r\n    }\r\n\r\n    // Geometry\r\n    scale(scaleX, scaleY = scaleX) {\r\n        return new Offset(this._dx * scaleX, this._dy * scaleY);\r\n    }\r\n\r\n    rotate(angle) {\r\n        const cos = Math.cos(angle);\r\n        const sin = Math.sin(angle);\r\n        return new Offset(\r\n            this._dx * cos - this._dy * sin,\r\n            this._dx * sin + this._dy * cos\r\n        );\r\n    }\r\n\r\n    translate(dx = 0, dy = 0) {\r\n        return new Offset(this._dx + dx, this._dy + dy);\r\n    }\r\n\r\n    get negate() {\r\n        return new Offset(-this._dx, -this._dy);\r\n    }\r\n\r\n    equals(other) {\r\n        if (!other || !(other instanceof Offset)) {\r\n            return false;\r\n        }\r\n        return this._dx === other._dx && this._dy === other._dy;\r\n    }\r\n\r\n    hashCode() {\r\n        return this._hashCombine(this._dx, this._dy);\r\n    }\r\n\r\n    toString() {\r\n        return `Offset(${this._dx.toFixed(1)}, ${this._dy.toFixed(1)})`;\r\n    }\r\n}\r\n\r\n/**\r\n * Rect - Represents a rectangle with left, top, right, bottom coordinates\r\n */\r\nclass Rect {\r\n    constructor(left = 0, top = 0, right = 0, bottom = 0) {\r\n        this.left = left;\r\n        this.top = top;\r\n        this.right = right;\r\n        this.bottom = bottom;\r\n    }\r\n\r\n    static fromLTWH(left, top, width, height) {\r\n        return new Rect(left, top, left + width, top + height);\r\n    }\r\n\r\n    static fromCircle(center, radius) {\r\n        return new Rect(\r\n            center.dx - radius,\r\n            center.dy - radius,\r\n            center.dx + radius,\r\n            center.dy + radius\r\n        );\r\n    }\r\n\r\n    static fromPoints(a, b) {\r\n        return new Rect(\r\n            Math.min(a.dx, b.dx),\r\n            Math.min(a.dy, b.dy),\r\n            Math.max(a.dx, b.dx),\r\n            Math.max(a.dy, b.dy)\r\n        );\r\n    }\r\n\r\n    get width() {\r\n        return this.right - this.left;\r\n    }\r\n\r\n    get height() {\r\n        return this.bottom - this.top;\r\n    }\r\n\r\n    get size() {\r\n        return new Size(this.width, this.height);\r\n    }\r\n\r\n    get topLeft() {\r\n        return new Offset(this.left, this.top);\r\n    }\r\n\r\n    get bottomRight() {\r\n        return new Offset(this.right, this.bottom);\r\n    }\r\n\r\n    get center() {\r\n        return new Offset(\r\n            this.left + this.width / 2,\r\n            this.top + this.height / 2\r\n        );\r\n    }\r\n\r\n    contains(offset) {\r\n        return (\r\n            offset.dx >= this.left &&\r\n            offset.dx < this.right &&\r\n            offset.dy >= this.top &&\r\n            offset.dy < this.bottom\r\n        );\r\n    }\r\n\r\n    intersects(other) {\r\n        return !(\r\n            this.left >= other.right ||\r\n            this.right <= other.left ||\r\n            this.top >= other.bottom ||\r\n            this.bottom <= other.top\r\n        );\r\n    }\r\n\r\n    toString() {\r\n        return `Rect.fromLTRB(${this.left.toFixed(1)}, ${this.top.toFixed(1)}, ${this.right.toFixed(1)}, ${this.bottom.toFixed(1)})`;\r\n    }\r\n}\r\n\r\n/**\r\n * Radius - Represents corner radius for rounded rectangles\r\n * Can be circular (same x and y) or elliptical (different x and y)\r\n */\r\nclass Radius {\r\n    constructor(x = 0, y = 0) {\r\n        this.x = x;\r\n        this.y = y;\r\n    }\r\n\r\n    // Static factory methods\r\n    static circular(radius) {\r\n        return new Radius(radius, radius);\r\n    }\r\n\r\n    static elliptical(x, y) {\r\n        return new Radius(x, y);\r\n    }\r\n\r\n    static get zero() {\r\n        return new Radius(0, 0);\r\n    }\r\n\r\n    // Clamp radius values\r\n    clamp(options = {}) {\r\n        const { minimum, maximum } = options;\r\n        const minRadius = minimum || Radius.circular(Number.NEGATIVE_INFINITY);\r\n        const maxRadius = maximum || Radius.circular(Number.POSITIVE_INFINITY);\r\n\r\n        return new Radius(\r\n            Radius._clampDouble(this.x, minRadius.x, maxRadius.x),\r\n            Radius._clampDouble(this.y, minRadius.y, maxRadius.y)\r\n        );\r\n    }\r\n\r\n    clampValues(options = {}) {\r\n        const {\r\n            minimumX,\r\n            minimumY,\r\n            maximumX,\r\n            maximumY\r\n        } = options;\r\n\r\n        return new Radius(\r\n            Radius._clampDouble(this.x, minimumX ?? Number.NEGATIVE_INFINITY, maximumX ?? Number.POSITIVE_INFINITY),\r\n            Radius._clampDouble(this.y, minimumY ?? Number.NEGATIVE_INFINITY, maximumY ?? Number.POSITIVE_INFINITY)\r\n        );\r\n    }\r\n\r\n    static _clampDouble(value, min, max) {\r\n        if (value < min) return min;\r\n        if (value > max) return max;\r\n        return value;\r\n    }\r\n\r\n    // Unary negation\r\n    negate() {\r\n        return new Radius(-this.x, -this.y);\r\n    }\r\n\r\n    // Binary operations\r\n    subtract(other) {\r\n        if (!other || !(other instanceof Radius)) {\r\n            throw new Error('Can only subtract Radius from Radius');\r\n        }\r\n        return new Radius(this.x - other.x, this.y - other.y);\r\n    }\r\n\r\n    add(other) {\r\n        if (!other || !(other instanceof Radius)) {\r\n            throw new Error('Can only add Radius to Radius');\r\n        }\r\n        return new Radius(this.x + other.x, this.y + other.y);\r\n    }\r\n\r\n    multiply(operand) {\r\n        if (typeof operand !== 'number') {\r\n            throw new Error('Can only multiply Radius by number');\r\n        }\r\n        return new Radius(this.x * operand, this.y * operand);\r\n    }\r\n\r\n    divide(operand) {\r\n        if (typeof operand !== 'number') {\r\n            throw new Error('Can only divide Radius by number');\r\n        }\r\n        if (operand === 0) {\r\n            throw new Error('Division by zero');\r\n        }\r\n        return new Radius(this.x / operand, this.y / operand);\r\n    }\r\n\r\n    floorDivide(operand) {\r\n        if (typeof operand !== 'number') {\r\n            throw new Error('Can only divide Radius by number');\r\n        }\r\n        if (operand === 0) {\r\n            throw new Error('Division by zero');\r\n        }\r\n        return new Radius(\r\n            Math.floor(this.x / operand),\r\n            Math.floor(this.y / operand)\r\n        );\r\n    }\r\n\r\n    modulo(operand) {\r\n        if (typeof operand !== 'number') {\r\n            throw new Error('Can only apply modulo with number');\r\n        }\r\n        return new Radius(this.x % operand, this.y % operand);\r\n    }\r\n\r\n    // Linear interpolation\r\n    static lerp(a, b, t) {\r\n        if (typeof t !== 'number' || t < 0 || t > 1) {\r\n            throw new Error('Parameter t must be between 0 and 1');\r\n        }\r\n\r\n        if (b === null || b === undefined) {\r\n            if (a === null || a === undefined) {\r\n                return null;\r\n            }\r\n            const k = 1.0 - t;\r\n            return new Radius(a.x * k, a.y * k);\r\n        }\r\n\r\n        if (a === null || a === undefined) {\r\n            return new Radius(b.x * t, b.y * t);\r\n        }\r\n\r\n        return new Radius(\r\n            Radius._lerpDouble(a.x, b.x, t),\r\n            Radius._lerpDouble(a.y, b.y, t)\r\n        );\r\n    }\r\n\r\n    static _lerpDouble(a, b, t) {\r\n        return a + (b - a) * t;\r\n    }\r\n\r\n    // Equality and hashing\r\n    equals(other) {\r\n        if (!other || !(other instanceof Radius)) {\r\n            return false;\r\n        }\r\n        return this.x === other.x && this.y === other.y;\r\n    }\r\n\r\n    hashCode() {\r\n        let hash = 0;\r\n        hash = ((hash << 5) - hash) + this.x;\r\n        hash = ((hash << 5) - hash) + this.y;\r\n        return hash & hash; // Convert to 32bit integer\r\n    }\r\n\r\n    toString() {\r\n        if (this.x === this.y) {\r\n            return `Radius.circular(${this.x.toFixed(1)})`;\r\n        }\r\n        return `Radius.elliptical(${this.x.toFixed(1)}, ${this.y.toFixed(1)})`;\r\n    }\r\n}\r\n\r\n/**\r\n * BorderRadius - Represents the radius for all four corners of a rectangle\r\n */\r\nclass BorderRadius {\r\n    constructor(topLeft, topRight, bottomRight, bottomLeft) {\r\n        this.topLeft = topLeft || Radius.zero;\r\n        this.topRight = topRight || Radius.zero;\r\n        this.bottomRight = bottomRight || Radius.zero;\r\n        this.bottomLeft = bottomLeft || Radius.zero;\r\n    }\r\n\r\n    // Static factory methods\r\n    static all(radius) {\r\n        if (!(radius instanceof Radius)) {\r\n            radius = Radius.circular(radius);\r\n        }\r\n        return new BorderRadius(radius, radius, radius, radius);\r\n    }\r\n\r\n    static circular(radius) {\r\n        const r = Radius.circular(radius);\r\n        return new BorderRadius(r, r, r, r);\r\n    }\r\n\r\n    static vertical(top, bottom) {\r\n        return new BorderRadius(top, top, bottom, bottom);\r\n    }\r\n\r\n    static horizontal(left, right) {\r\n        return new BorderRadius(left, right, right, left);\r\n    }\r\n\r\n    static only({ topLeft, topRight, bottomRight, bottomLeft } = {}) {\r\n        return new BorderRadius(\r\n            topLeft || Radius.zero,\r\n            topRight || Radius.zero,\r\n            bottomRight || Radius.zero,\r\n            bottomLeft || Radius.zero\r\n        );\r\n    }\r\n\r\n    static fromBorderSide(side, radius) {\r\n        if (!(radius instanceof Radius)) {\r\n            radius = Radius.circular(radius);\r\n        }\r\n        return new BorderRadius(radius, radius, radius, radius);\r\n    }\r\n\r\n    static get zero() {\r\n        return new BorderRadius(Radius.zero, Radius.zero, Radius.zero, Radius.zero);\r\n    }\r\n\r\n    // Check if all radii are zero\r\n    get isNonNegative() {\r\n        return (\r\n            this.topLeft.x >= 0 && this.topLeft.y >= 0 &&\r\n            this.topRight.x >= 0 && this.topRight.y >= 0 &&\r\n            this.bottomRight.x >= 0 && this.bottomRight.y >= 0 &&\r\n            this.bottomLeft.x >= 0 && this.bottomLeft.y >= 0\r\n        );\r\n    }\r\n\r\n    // Clamp border radius\r\n    clamp(options = {}) {\r\n        const { minimum, maximum } = options;\r\n        return new BorderRadius(\r\n            this.topLeft.clamp({ minimum, maximum }),\r\n            this.topRight.clamp({ minimum, maximum }),\r\n            this.bottomRight.clamp({ minimum, maximum }),\r\n            this.bottomLeft.clamp({ minimum, maximum })\r\n        );\r\n    }\r\n\r\n    // Subtract border radii\r\n    subtract(other) {\r\n        if (!other || !(other instanceof BorderRadius)) {\r\n            throw new Error('Can only subtract BorderRadius from BorderRadius');\r\n        }\r\n        return new BorderRadius(\r\n            this.topLeft.subtract(other.topLeft),\r\n            this.topRight.subtract(other.topRight),\r\n            this.bottomRight.subtract(other.bottomRight),\r\n            this.bottomLeft.subtract(other.bottomLeft)\r\n        );\r\n    }\r\n\r\n    // Add border radii\r\n    add(other) {\r\n        if (!other || !(other instanceof BorderRadius)) {\r\n            throw new Error('Can only add BorderRadius to BorderRadius');\r\n        }\r\n        return new BorderRadius(\r\n            this.topLeft.add(other.topLeft),\r\n            this.topRight.add(other.topRight),\r\n            this.bottomRight.add(other.bottomRight),\r\n            this.bottomLeft.add(other.bottomLeft)\r\n        );\r\n    }\r\n\r\n    // Scale border radius\r\n    multiply(operand) {\r\n        if (typeof operand !== 'number') {\r\n            throw new Error('Can only multiply BorderRadius by number');\r\n        }\r\n        return new BorderRadius(\r\n            this.topLeft.multiply(operand),\r\n            this.topRight.multiply(operand),\r\n            this.bottomRight.multiply(operand),\r\n            this.bottomLeft.multiply(operand)\r\n        );\r\n    }\r\n\r\n    divide(operand) {\r\n        if (typeof operand !== 'number') {\r\n            throw new Error('Can only divide BorderRadius by number');\r\n        }\r\n        return new BorderRadius(\r\n            this.topLeft.divide(operand),\r\n            this.topRight.divide(operand),\r\n            this.bottomRight.divide(operand),\r\n            this.bottomLeft.divide(operand)\r\n        );\r\n    }\r\n\r\n    // Convert to CSS border-radius string\r\n    toCSSString() {\r\n        // All corners different\r\n        if (!this._isUniform()) {\r\n            return `${this.topLeft.x}px ${this.topRight.x}px ${this.bottomRight.x}px ${this.bottomLeft.x}px`;\r\n        }\r\n\r\n        // Check if all corners have same value\r\n        if (\r\n            this.topLeft.x === this.topRight.x &&\r\n            this.topRight.x === this.bottomRight.x &&\r\n            this.bottomRight.x === this.bottomLeft.x\r\n        ) {\r\n            return `${this.topLeft.x}px`;\r\n        }\r\n\r\n        return `${this.topLeft.x}px ${this.topRight.x}px ${this.bottomRight.x}px ${this.bottomLeft.x}px`;\r\n    }\r\n\r\n    _isUniform() {\r\n        return (\r\n            this.topLeft.x === this.topLeft.y &&\r\n            this.topRight.x === this.topRight.y &&\r\n            this.bottomRight.x === this.bottomRight.y &&\r\n            this.bottomLeft.x === this.bottomLeft.y\r\n        );\r\n    }\r\n\r\n    // Linear interpolation\r\n    static lerp(a, b, t) {\r\n        if (typeof t !== 'number' || t < 0 || t > 1) {\r\n            throw new Error('Parameter t must be between 0 and 1');\r\n        }\r\n\r\n        if (b === null || b === undefined) {\r\n            if (a === null || a === undefined) {\r\n                return null;\r\n            }\r\n            return a.multiply(1.0 - t);\r\n        }\r\n\r\n        if (a === null || a === undefined) {\r\n            return b.multiply(t);\r\n        }\r\n\r\n        return new BorderRadius(\r\n            Radius.lerp(a.topLeft, b.topLeft, t),\r\n            Radius.lerp(a.topRight, b.topRight, t),\r\n            Radius.lerp(a.bottomRight, b.bottomRight, t),\r\n            Radius.lerp(a.bottomLeft, b.bottomLeft, t)\r\n        );\r\n    }\r\n\r\n    // Equality and hashing\r\n    equals(other) {\r\n        if (!other || !(other instanceof BorderRadius)) {\r\n            return false;\r\n        }\r\n        return (\r\n            this.topLeft.equals(other.topLeft) &&\r\n            this.topRight.equals(other.topRight) &&\r\n            this.bottomRight.equals(other.bottomRight) &&\r\n            this.bottomLeft.equals(other.bottomLeft)\r\n        );\r\n    }\r\n\r\n    hashCode() {\r\n        let hash = 0;\r\n        hash = ((hash << 5) - hash) + this.topLeft.hashCode();\r\n        hash = ((hash << 5) - hash) + this.topRight.hashCode();\r\n        hash = ((hash << 5) - hash) + this.bottomRight.hashCode();\r\n        hash = ((hash << 5) - hash) + this.bottomLeft.hashCode();\r\n        return hash & hash;\r\n    }\r\n\r\n    toString() {\r\n        if (\r\n            this.topLeft.equals(this.topRight) &&\r\n            this.topRight.equals(this.bottomRight) &&\r\n            this.bottomRight.equals(this.bottomLeft)\r\n        ) {\r\n            return `BorderRadius.all(${this.topLeft.toString()})`;\r\n        }\r\n        return `BorderRadius(topLeft: ${this.topLeft}, topRight: ${this.topRight}, bottomRight: ${this.bottomRight}, bottomLeft: ${this.bottomLeft})`;\r\n    }\r\n}\r\n\r\nexport { Size, Offset, Rect, OffsetBase, Radius, BorderRadius };"],
-  "mappings": "AAKA,MAAMA,CAAW,CACb,YAAYC,EAAK,EAAGC,EAAK,EAAG,CACxB,KAAK,IAAMD,EACX,KAAK,IAAMC,CACf,CAEA,IAAI,IAAK,CACL,OAAO,KAAK,GAChB,CAEA,IAAI,IAAK,CACL,OAAO,KAAK,GAChB,CAEA,IAAI,YAAa,CACb,OAAO,KAAK,KAAO,OAAO,mBAAqB,KAAK,KAAO,OAAO,iBACtE,CAEA,IAAI,UAAW,CACX,OAAO,OAAO,SAAS,KAAK,GAAG,GAAK,OAAO,SAAS,KAAK,GAAG,CAChE,CAGA,SAASC,EAAO,CACZ,OAAO,KAAK,IAAMA,EAAM,KAAO,KAAK,IAAMA,EAAM,GACpD,CAEA,gBAAgBA,EAAO,CACnB,OAAO,KAAK,KAAOA,EAAM,KAAO,KAAK,KAAOA,EAAM,GACtD,CAEA,YAAYA,EAAO,CACf,OAAO,KAAK,IAAMA,EAAM,KAAO,KAAK,IAAMA,EAAM,GACpD,CAEA,mBAAmBA,EAAO,CACtB,OAAO,KAAK,KAAOA,EAAM,KAAO,KAAK,KAAOA,EAAM,GACtD,CAEA,OAAOA,EAAO,CACV,MAAI,CAACA,GAAS,EAAEA,aAAiBH,GACtB,GAEJ,KAAK,MAAQG,EAAM,KAAO,KAAK,MAAQA,EAAM,GACxD,CAEA,UAAW,CACP,OAAO,KAAK,aAAa,KAAK,IAAK,KAAK,GAAG,CAC/C,CAEA,aAAaC,EAAGC,EAAG,CACf,IAAIC,EAAO,EACX,OAAAA,GAASA,GAAQ,GAAKA,EAAQF,EAC9BE,GAASA,GAAQ,GAAKA,EAAQD,EACvBC,EAAOA,CAClB,CAEA,UAAW,CACP,MAAO,GAAG,KAAK,YAAY,IAAI,IAAI,KAAK,IAAI,QAAQ,CAAC,CAAC,KAAK,KAAK,IAAI,QAAQ,CAAC,CAAC,GAClF,CACJ,CAMA,MAAMC,UAAaP,CAAW,CAC1B,YAAYQ,EAAQ,EAAGC,EAAS,EAAG,CAC/B,MAAMD,EAAOC,CAAM,CACvB,CAEA,IAAI,OAAQ,CACR,OAAO,KAAK,GAChB,CAEA,IAAI,QAAS,CACT,OAAO,KAAK,GAChB,CAGA,WAAW,MAAO,CACd,OAAO,IAAIF,EAAK,EAAG,CAAC,CACxB,CAEA,WAAW,UAAW,CAClB,OAAO,IAAIA,EAAK,OAAO,kBAAmB,OAAO,iBAAiB,CACtE,CAGA,OAAO,KAAKG,EAAQ,CAChB,MAAI,CAACA,GAAU,EAAEA,aAAkBH,GACxB,IAAIA,EAER,IAAIA,EAAKG,EAAO,MAAOA,EAAO,MAAM,CAC/C,CAEA,OAAO,OAAOC,EAAW,CACrB,OAAO,IAAIJ,EAAKI,EAAWA,CAAS,CACxC,CAEA,OAAO,UAAUH,EAAO,CACpB,OAAO,IAAID,EAAKC,EAAO,OAAO,iBAAiB,CACnD,CAEA,OAAO,WAAWC,EAAQ,CACtB,OAAO,IAAIF,EAAK,OAAO,kBAAmBE,CAAM,CACpD,CAEA,OAAO,WAAWG,EAAQ,CACtB,OAAO,IAAIL,EAAKK,EAAS,EAAKA,EAAS,CAAG,CAC9C,CAGA,IAAI,SAAU,CACV,OAAO,KAAK,OAAS,GAAK,KAAK,QAAU,CAC7C,CAEA,IAAI,aAAc,CACd,OAAI,KAAK,SAAW,EACT,KAAK,MAAQ,KAAK,OAEzB,KAAK,MAAQ,EACN,OAAO,kBAEd,KAAK,MAAQ,EACN,OAAO,kBAEX,CACX,CAEA,IAAI,cAAe,CACf,OAAO,KAAK,IAAI,KAAK,IAAI,KAAK,KAAK,EAAG,KAAK,IAAI,KAAK,MAAM,CAAC,CAC/D,CAEA,IAAI,aAAc,CACd,OAAO,KAAK,IAAI,KAAK,IAAI,KAAK,KAAK,EAAG,KAAK,IAAI,KAAK,MAAM,CAAC,CAC/D,CAEA,IAAI,SAAU,CACV,OAAO,IAAIL,EAAK,KAAK,OAAQ,KAAK,KAAK,CAC3C,CAGA,QAAQM,EAAS,IAAIC,EAAO,EAAG,CAAC,EAAG,CAC/B,OAAOD,CACX,CAEA,UAAUA,EAAS,IAAIC,EAAO,EAAG,CAAC,EAAG,CACjC,OAAO,IAAIA,EAAOD,EAAO,GAAK,KAAK,MAAQ,EAAKA,EAAO,EAAE,CAC7D,CAEA,SAASA,EAAS,IAAIC,EAAO,EAAG,CAAC,EAAG,CAChC,OAAO,IAAIA,EAAOD,EAAO,GAAK,KAAK,MAAOA,EAAO,EAAE,CACvD,CAEA,WAAWA,EAAS,IAAIC,EAAO,EAAG,CAAC,EAAG,CAClC,OAAO,IAAIA,EAAOD,EAAO,GAAIA,EAAO,GAAK,KAAK,OAAS,CAAG,CAC9D,CAEA,OAAOA,EAAS,IAAIC,EAAO,EAAG,CAAC,EAAG,CAC9B,OAAO,IAAIA,EAAOD,EAAO,GAAK,KAAK,MAAQ,EAAKA,EAAO,GAAK,KAAK,OAAS,CAAG,CACjF,CAEA,YAAYA,EAAS,IAAIC,EAAO,EAAG,CAAC,EAAG,CACnC,OAAO,IAAIA,EAAOD,EAAO,GAAK,KAAK,MAAOA,EAAO,GAAK,KAAK,OAAS,CAAG,CAC3E,CAEA,WAAWA,EAAS,IAAIC,EAAO,EAAG,CAAC,EAAG,CAClC,OAAO,IAAIA,EAAOD,EAAO,GAAIA,EAAO,GAAK,KAAK,MAAM,CACxD,CAEA,aAAaA,EAAS,IAAIC,EAAO,EAAG,CAAC,EAAG,CACpC,OAAO,IAAIA,EAAOD,EAAO,GAAK,KAAK,MAAQ,EAAKA,EAAO,GAAK,KAAK,MAAM,CAC3E,CAEA,YAAYA,EAAS,IAAIC,EAAO,EAAG,CAAC,EAAG,CACnC,OAAO,IAAIA,EAAOD,EAAO,GAAK,KAAK,MAAOA,EAAO,GAAK,KAAK,MAAM,CACrE,CAGA,SAASE,EAAQ,CACb,MAAI,CAACA,GAAU,EAAEA,aAAkBD,GACxB,GAGPC,EAAO,IAAM,GACbA,EAAO,GAAK,KAAK,OACjBA,EAAO,IAAM,GACbA,EAAO,GAAK,KAAK,MAEzB,CAGA,SAASZ,EAAO,CACZ,GAAIA,aAAiBI,EACjB,OAAO,IAAIO,EAAO,KAAK,MAAQX,EAAM,MAAO,KAAK,OAASA,EAAM,MAAM,EAE1E,GAAIA,aAAiBW,EACjB,OAAO,IAAIP,EAAK,KAAK,MAAQJ,EAAM,GAAI,KAAK,OAASA,EAAM,EAAE,EAEjE,MAAM,IAAI,MAAM,mBAAmBA,EAAM,YAAY,IAAI,YAAY,CACzE,CAEA,IAAIY,EAAQ,CACR,GAAI,CAACA,GAAU,EAAEA,aAAkBD,GAC/B,MAAM,IAAI,MAAM,6BAA6B,EAEjD,OAAO,IAAIP,EAAK,KAAK,MAAQQ,EAAO,GAAI,KAAK,OAASA,EAAO,EAAE,CACnE,CAEA,SAASC,EAAS,CACd,GAAI,OAAOA,GAAY,SACnB,MAAM,IAAI,MAAM,kCAAkC,EAEtD,OAAO,IAAIT,EAAK,KAAK,MAAQS,EAAS,KAAK,OAASA,CAAO,CAC/D,CAEA,OAAOA,EAAS,CACZ,GAAI,OAAOA,GAAY,SACnB,MAAM,IAAI,MAAM,gCAAgC,EAEpD,GAAIA,IAAY,EACZ,MAAM,IAAI,MAAM,kBAAkB,EAEtC,OAAO,IAAIT,EAAK,KAAK,MAAQS,EAAS,KAAK,OAASA,CAAO,CAC/D,CAEA,YAAYA,EAAS,CACjB,GAAI,OAAOA,GAAY,SACnB,MAAM,IAAI,MAAM,gCAAgC,EAEpD,GAAIA,IAAY,EACZ,MAAM,IAAI,MAAM,kBAAkB,EAEtC,OAAO,IAAIT,EACP,KAAK,MAAM,KAAK,MAAQS,CAAO,EAC/B,KAAK,MAAM,KAAK,OAASA,CAAO,CACpC,CACJ,CAEA,OAAOA,EAAS,CACZ,GAAI,OAAOA,GAAY,SACnB,MAAM,IAAI,MAAM,mCAAmC,EAEvD,OAAO,IAAIT,EAAK,KAAK,MAAQS,EAAS,KAAK,OAASA,CAAO,CAC/D,CAGA,OAAO,KAAKZ,EAAGC,EAAGY,EAAG,CACjB,GAAI,OAAOA,GAAM,UAAYA,EAAI,GAAKA,EAAI,EACtC,MAAM,IAAI,MAAM,qCAAqC,EAGzD,OAAIZ,GAAM,KACFD,GAAM,KACC,KAEJA,EAAE,SAAS,EAAMa,CAAC,EAGzBb,GAAM,KACCC,EAAE,SAASY,CAAC,EAGhB,IAAIV,EACPA,EAAK,YAAYH,EAAE,MAAOC,EAAE,MAAOY,CAAC,EACpCV,EAAK,YAAYH,EAAE,OAAQC,EAAE,OAAQY,CAAC,CAC1C,CACJ,CAEA,OAAO,YAAYb,EAAGC,EAAGY,EAAG,CACxB,OAAOb,GAAKC,EAAID,GAAKa,CACzB,CAGA,OAAOd,EAAO,CACV,MAAI,CAACA,GAAS,EAAEA,aAAiBI,GACtB,GAEJ,KAAK,MAAQJ,EAAM,KAAO,KAAK,MAAQA,EAAM,GACxD,CAEA,UAAW,CACP,OAAO,KAAK,aAAa,KAAK,MAAO,KAAK,MAAM,CACpD,CAEA,UAAW,CACP,MAAO,QAAQ,KAAK,MAAM,QAAQ,CAAC,CAAC,KAAK,KAAK,OAAO,QAAQ,CAAC,CAAC,GACnE,CACJ,CAMA,MAAMW,UAAed,CAAW,CAC5B,YAAYC,EAAK,EAAGC,EAAK,EAAG,CACxB,MAAMD,EAAIC,CAAE,CAChB,CAEA,WAAW,MAAO,CACd,OAAO,IAAIY,EAAO,EAAG,CAAC,CAC1B,CAEA,WAAW,UAAW,CAClB,OAAO,IAAIA,EAAO,OAAO,kBAAmB,OAAO,iBAAiB,CACxE,CAEA,OAAO,cAAcI,EAAWC,EAAW,EAAK,CAC5C,OAAO,IAAIL,EACPK,EAAW,KAAK,IAAID,CAAS,EAC7BC,EAAW,KAAK,IAAID,CAAS,CACjC,CACJ,CAEA,OAAO,KAAKd,EAAGC,EAAGY,EAAG,CACjB,GAAI,OAAOA,GAAM,UAAYA,EAAI,GAAKA,EAAI,EACtC,MAAM,IAAI,MAAM,qCAAqC,EAGzD,OAAIZ,GAAM,KACFD,GAAM,KACC,KAEJA,EAAE,SAAS,EAAMa,CAAC,EAGzBb,GAAM,KACCC,EAAE,SAASY,CAAC,EAGhB,IAAIH,EACPA,EAAO,YAAYV,EAAE,GAAIC,EAAE,GAAIY,CAAC,EAChCH,EAAO,YAAYV,EAAE,GAAIC,EAAE,GAAIY,CAAC,CACpC,CACJ,CAEA,OAAO,YAAYb,EAAGC,EAAGY,EAAG,CACxB,OAAOb,GAAKC,EAAID,GAAKa,CACzB,CAGA,IAAI,UAAW,CACX,OAAO,KAAK,KAAK,KAAK,IAAM,KAAK,IAAM,KAAK,IAAM,KAAK,GAAG,CAC9D,CAEA,IAAI,iBAAkB,CAClB,OAAO,KAAK,IAAM,KAAK,IAAM,KAAK,IAAM,KAAK,GACjD,CAEA,IAAI,WAAY,CACZ,OAAO,KAAK,MAAM,KAAK,IAAK,KAAK,GAAG,CACxC,CAGA,IAAId,EAAO,CACP,GAAI,CAACA,GAAS,EAAEA,aAAiBW,GAC7B,MAAM,IAAI,MAAM,+BAA+B,EAEnD,OAAO,IAAIA,EAAO,KAAK,IAAMX,EAAM,IAAK,KAAK,IAAMA,EAAM,GAAG,CAChE,CAEA,SAASA,EAAO,CACZ,GAAI,CAACA,GAAS,EAAEA,aAAiBW,GAC7B,MAAM,IAAI,MAAM,sCAAsC,EAE1D,OAAO,IAAIA,EAAO,KAAK,IAAMX,EAAM,IAAK,KAAK,IAAMA,EAAM,GAAG,CAChE,CAEA,SAASa,EAAS,CACd,GAAI,OAAOA,GAAY,SACnB,MAAM,IAAI,MAAM,oCAAoC,EAExD,OAAO,IAAIF,EAAO,KAAK,IAAME,EAAS,KAAK,IAAMA,CAAO,CAC5D,CAEA,OAAOA,EAAS,CACZ,GAAI,OAAOA,GAAY,SACnB,MAAM,IAAI,MAAM,kCAAkC,EAEtD,GAAIA,IAAY,EACZ,MAAM,IAAI,MAAM,kBAAkB,EAEtC,OAAO,IAAIF,EAAO,KAAK,IAAME,EAAS,KAAK,IAAMA,CAAO,CAC5D,CAEA,YAAYA,EAAS,CACjB,GAAI,OAAOA,GAAY,SACnB,MAAM,IAAI,MAAM,kCAAkC,EAEtD,GAAIA,IAAY,EACZ,MAAM,IAAI,MAAM,kBAAkB,EAEtC,OAAO,IAAIF,EACP,KAAK,MAAM,KAAK,IAAME,CAAO,EAC7B,KAAK,MAAM,KAAK,IAAMA,CAAO,CACjC,CACJ,CAEA,OAAOA,EAAS,CACZ,GAAI,OAAOA,GAAY,SACnB,MAAM,IAAI,MAAM,mCAAmC,EAEvD,OAAO,IAAIF,EAAO,KAAK,IAAME,EAAS,KAAK,IAAMA,CAAO,CAC5D,CAGA,MAAMI,EAAQC,EAASD,EAAQ,CAC3B,OAAO,IAAIN,EAAO,KAAK,IAAMM,EAAQ,KAAK,IAAMC,CAAM,CAC1D,CAEA,OAAOC,EAAO,CACV,MAAMC,EAAM,KAAK,IAAID,CAAK,EACpBE,EAAM,KAAK,IAAIF,CAAK,EAC1B,OAAO,IAAIR,EACP,KAAK,IAAMS,EAAM,KAAK,IAAMC,EAC5B,KAAK,IAAMA,EAAM,KAAK,IAAMD,CAChC,CACJ,CAEA,UAAUtB,EAAK,EAAGC,EAAK,EAAG,CACtB,OAAO,IAAIY,EAAO,KAAK,IAAMb,EAAI,KAAK,IAAMC,CAAE,CAClD,CAEA,IAAI,QAAS,CACT,OAAO,IAAIY,EAAO,CAAC,KAAK,IAAK,CAAC,KAAK,GAAG,CAC1C,CAEA,OAAOX,EAAO,CACV,MAAI,CAACA,GAAS,EAAEA,aAAiBW,GACtB,GAEJ,KAAK,MAAQX,EAAM,KAAO,KAAK,MAAQA,EAAM,GACxD,CAEA,UAAW,CACP,OAAO,KAAK,aAAa,KAAK,IAAK,KAAK,GAAG,CAC/C,CAEA,UAAW,CACP,MAAO,UAAU,KAAK,IAAI,QAAQ,CAAC,CAAC,KAAK,KAAK,IAAI,QAAQ,CAAC,CAAC,GAChE,CACJ,CAKA,MAAMsB,CAAK,CACP,YAAYC,EAAO,EAAGC,EAAM,EAAGC,EAAQ,EAAGC,EAAS,EAAG,CAClD,KAAK,KAAOH,EACZ,KAAK,IAAMC,EACX,KAAK,MAAQC,EACb,KAAK,OAASC,CAClB,CAEA,OAAO,SAASH,EAAMC,EAAKnB,EAAOC,EAAQ,CACtC,OAAO,IAAIgB,EAAKC,EAAMC,EAAKD,EAAOlB,EAAOmB,EAAMlB,CAAM,CACzD,CAEA,OAAO,WAAWqB,EAAQlB,EAAQ,CAC9B,OAAO,IAAIa,EACPK,EAAO,GAAKlB,EACZkB,EAAO,GAAKlB,EACZkB,EAAO,GAAKlB,EACZkB,EAAO,GAAKlB,CAChB,CACJ,CAEA,OAAO,WAAWR,EAAGC,EAAG,CACpB,OAAO,IAAIoB,EACP,KAAK,IAAIrB,EAAE,GAAIC,EAAE,EAAE,EACnB,KAAK,IAAID,EAAE,GAAIC,EAAE,EAAE,EACnB,KAAK,IAAID,EAAE,GAAIC,EAAE,EAAE,EACnB,KAAK,IAAID,EAAE,GAAIC,EAAE,EAAE,CACvB,CACJ,CAEA,IAAI,OAAQ,CACR,OAAO,KAAK,MAAQ,KAAK,IAC7B,CAEA,IAAI,QAAS,CACT,OAAO,KAAK,OAAS,KAAK,GAC9B,CAEA,IAAI,MAAO,CACP,OAAO,IAAIE,EAAK,KAAK,MAAO,KAAK,MAAM,CAC3C,CAEA,IAAI,SAAU,CACV,OAAO,IAAIO,EAAO,KAAK,KAAM,KAAK,GAAG,CACzC,CAEA,IAAI,aAAc,CACd,OAAO,IAAIA,EAAO,KAAK,MAAO,KAAK,MAAM,CAC7C,CAEA,IAAI,QAAS,CACT,OAAO,IAAIA,EACP,KAAK,KAAO,KAAK,MAAQ,EACzB,KAAK,IAAM,KAAK,OAAS,CAC7B,CACJ,CAEA,SAASC,EAAQ,CACb,OACIA,EAAO,IAAM,KAAK,MAClBA,EAAO,GAAK,KAAK,OACjBA,EAAO,IAAM,KAAK,KAClBA,EAAO,GAAK,KAAK,MAEzB,CAEA,WAAWZ,EAAO,CACd,MAAO,EACH,KAAK,MAAQA,EAAM,OACnB,KAAK,OAASA,EAAM,MACpB,KAAK,KAAOA,EAAM,QAClB,KAAK,QAAUA,EAAM,IAE7B,CAEA,UAAW,CACP,MAAO,iBAAiB,KAAK,KAAK,QAAQ,CAAC,CAAC,KAAK,KAAK,IAAI,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM,QAAQ,CAAC,CAAC,KAAK,KAAK,OAAO,QAAQ,CAAC,CAAC,GAC7H,CACJ,CAMA,MAAM4B,CAAO,CACT,YAAYC,EAAI,EAAGC,EAAI,EAAG,CACtB,KAAK,EAAID,EACT,KAAK,EAAIC,CACb,CAGA,OAAO,SAASrB,EAAQ,CACpB,OAAO,IAAImB,EAAOnB,EAAQA,CAAM,CACpC,CAEA,OAAO,WAAWoB,EAAGC,EAAG,CACpB,OAAO,IAAIF,EAAOC,EAAGC,CAAC,CAC1B,CAEA,WAAW,MAAO,CACd,OAAO,IAAIF,EAAO,EAAG,CAAC,CAC1B,CAGA,MAAMG,EAAU,CAAC,EAAG,CAChB,KAAM,CAAE,QAAAC,EAAS,QAAAC,CAAQ,EAAIF,EACvBG,EAAYF,GAAWJ,EAAO,SAAS,OAAO,iBAAiB,EAC/DO,EAAYF,GAAWL,EAAO,SAAS,OAAO,iBAAiB,EAErE,OAAO,IAAIA,EACPA,EAAO,aAAa,KAAK,EAAGM,EAAU,EAAGC,EAAU,CAAC,EACpDP,EAAO,aAAa,KAAK,EAAGM,EAAU,EAAGC,EAAU,CAAC,CACxD,CACJ,CAEA,YAAYJ,EAAU,CAAC,EAAG,CACtB,KAAM,CACF,SAAAK,EACA,SAAAC,EACA,SAAAC,EACA,SAAAC,CACJ,EAAIR,EAEJ,OAAO,IAAIH,EACPA,EAAO,aAAa,KAAK,EAAGQ,GAAY,OAAO,kBAAmBE,GAAY,OAAO,iBAAiB,EACtGV,EAAO,aAAa,KAAK,EAAGS,GAAY,OAAO,kBAAmBE,GAAY,OAAO,iBAAiB,CAC1G,CACJ,CAEA,OAAO,aAAaC,EAAOC,EAAKC,EAAK,CACjC,OAAIF,EAAQC,EAAYA,EACpBD,EAAQE,EAAYA,EACjBF,CACX,CAGA,QAAS,CACL,OAAO,IAAIZ,EAAO,CAAC,KAAK,EAAG,CAAC,KAAK,CAAC,CACtC,CAGA,SAAS5B,EAAO,CACZ,GAAI,CAACA,GAAS,EAAEA,aAAiB4B,GAC7B,MAAM,IAAI,MAAM,sCAAsC,EAE1D,OAAO,IAAIA,EAAO,KAAK,EAAI5B,EAAM,EAAG,KAAK,EAAIA,EAAM,CAAC,CACxD,CAEA,IAAIA,EAAO,CACP,GAAI,CAACA,GAAS,EAAEA,aAAiB4B,GAC7B,MAAM,IAAI,MAAM,+BAA+B,EAEnD,OAAO,IAAIA,EAAO,KAAK,EAAI5B,EAAM,EAAG,KAAK,EAAIA,EAAM,CAAC,CACxD,CAEA,SAASa,EAAS,CACd,GAAI,OAAOA,GAAY,SACnB,MAAM,IAAI,MAAM,oCAAoC,EAExD,OAAO,IAAIe,EAAO,KAAK,EAAIf,EAAS,KAAK,EAAIA,CAAO,CACxD,CAEA,OAAOA,EAAS,CACZ,GAAI,OAAOA,GAAY,SACnB,MAAM,IAAI,MAAM,kCAAkC,EAEtD,GAAIA,IAAY,EACZ,MAAM,IAAI,MAAM,kBAAkB,EAEtC,OAAO,IAAIe,EAAO,KAAK,EAAIf,EAAS,KAAK,EAAIA,CAAO,CACxD,CAEA,YAAYA,EAAS,CACjB,GAAI,OAAOA,GAAY,SACnB,MAAM,IAAI,MAAM,kCAAkC,EAEtD,GAAIA,IAAY,EACZ,MAAM,IAAI,MAAM,kBAAkB,EAEtC,OAAO,IAAIe,EACP,KAAK,MAAM,KAAK,EAAIf,CAAO,EAC3B,KAAK,MAAM,KAAK,EAAIA,CAAO,CAC/B,CACJ,CAEA,OAAOA,EAAS,CACZ,GAAI,OAAOA,GAAY,SACnB,MAAM,IAAI,MAAM,mCAAmC,EAEvD,OAAO,IAAIe,EAAO,KAAK,EAAIf,EAAS,KAAK,EAAIA,CAAO,CACxD,CAGA,OAAO,KAAKZ,EAAGC,EAAGY,EAAG,CACjB,GAAI,OAAOA,GAAM,UAAYA,EAAI,GAAKA,EAAI,EACtC,MAAM,IAAI,MAAM,qCAAqC,EAGzD,GAAIZ,GAAM,KAAyB,CAC/B,GAAID,GAAM,KACN,OAAO,KAEX,MAAM0C,EAAI,EAAM7B,EAChB,OAAO,IAAIc,EAAO3B,EAAE,EAAI0C,EAAG1C,EAAE,EAAI0C,CAAC,CACtC,CAEA,OAAI1C,GAAM,KACC,IAAI2B,EAAO1B,EAAE,EAAIY,EAAGZ,EAAE,EAAIY,CAAC,EAG/B,IAAIc,EACPA,EAAO,YAAY3B,EAAE,EAAGC,EAAE,EAAGY,CAAC,EAC9Bc,EAAO,YAAY3B,EAAE,EAAGC,EAAE,EAAGY,CAAC,CAClC,CACJ,CAEA,OAAO,YAAYb,EAAGC,EAAGY,EAAG,CACxB,OAAOb,GAAKC,EAAID,GAAKa,CACzB,CAGA,OAAOd,EAAO,CACV,MAAI,CAACA,GAAS,EAAEA,aAAiB4B,GACtB,GAEJ,KAAK,IAAM5B,EAAM,GAAK,KAAK,IAAMA,EAAM,CAClD,CAEA,UAAW,CACP,IAAIG,EAAO,EACX,OAAAA,GAASA,GAAQ,GAAKA,EAAQ,KAAK,EACnCA,GAASA,GAAQ,GAAKA,EAAQ,KAAK,EAC5BA,EAAOA,CAClB,CAEA,UAAW,CACP,OAAI,KAAK,IAAM,KAAK,EACT,mBAAmB,KAAK,EAAE,QAAQ,CAAC,CAAC,IAExC,qBAAqB,KAAK,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,EAAE,QAAQ,CAAC,CAAC,GACvE,CACJ,CAKA,MAAMyC,CAAa,CACf,YAAYC,EAASC,EAAUC,EAAaC,EAAY,CACpD,KAAK,QAAUH,GAAWjB,EAAO,KACjC,KAAK,SAAWkB,GAAYlB,EAAO,KACnC,KAAK,YAAcmB,GAAenB,EAAO,KACzC,KAAK,WAAaoB,GAAcpB,EAAO,IAC3C,CAGA,OAAO,IAAInB,EAAQ,CACf,OAAMA,aAAkBmB,IACpBnB,EAASmB,EAAO,SAASnB,CAAM,GAE5B,IAAImC,EAAanC,EAAQA,EAAQA,EAAQA,CAAM,CAC1D,CAEA,OAAO,SAASA,EAAQ,CACpB,MAAMwC,EAAIrB,EAAO,SAASnB,CAAM,EAChC,OAAO,IAAImC,EAAaK,EAAGA,EAAGA,EAAGA,CAAC,CACtC,CAEA,OAAO,SAASzB,EAAKE,EAAQ,CACzB,OAAO,IAAIkB,EAAapB,EAAKA,EAAKE,EAAQA,CAAM,CACpD,CAEA,OAAO,WAAWH,EAAME,EAAO,CAC3B,OAAO,IAAImB,EAAarB,EAAME,EAAOA,EAAOF,CAAI,CACpD,CAEA,OAAO,KAAK,CAAE,QAAAsB,EAAS,SAAAC,EAAU,YAAAC,EAAa,WAAAC,CAAW,EAAI,CAAC,EAAG,CAC7D,OAAO,IAAIJ,EACPC,GAAWjB,EAAO,KAClBkB,GAAYlB,EAAO,KACnBmB,GAAenB,EAAO,KACtBoB,GAAcpB,EAAO,IACzB,CACJ,CAEA,OAAO,eAAesB,EAAMzC,EAAQ,CAChC,OAAMA,aAAkBmB,IACpBnB,EAASmB,EAAO,SAASnB,CAAM,GAE5B,IAAImC,EAAanC,EAAQA,EAAQA,EAAQA,CAAM,CAC1D,CAEA,WAAW,MAAO,CACd,OAAO,IAAImC,EAAahB,EAAO,KAAMA,EAAO,KAAMA,EAAO,KAAMA,EAAO,IAAI,CAC9E,CAGA,IAAI,eAAgB,CAChB,OACI,KAAK,QAAQ,GAAK,GAAK,KAAK,QAAQ,GAAK,GACzC,KAAK,SAAS,GAAK,GAAK,KAAK,SAAS,GAAK,GAC3C,KAAK,YAAY,GAAK,GAAK,KAAK,YAAY,GAAK,GACjD,KAAK,WAAW,GAAK,GAAK,KAAK,WAAW,GAAK,CAEvD,CAGA,MAAMG,EAAU,CAAC,EAAG,CAChB,KAAM,CAAE,QAAAC,EAAS,QAAAC,CAAQ,EAAIF,EAC7B,OAAO,IAAIa,EACP,KAAK,QAAQ,MAAM,CAAE,QAAAZ,EAAS,QAAAC,CAAQ,CAAC,EACvC,KAAK,SAAS,MAAM,CAAE,QAAAD,EAAS,QAAAC,CAAQ,CAAC,EACxC,KAAK,YAAY,MAAM,CAAE,QAAAD,EAAS,QAAAC,CAAQ,CAAC,EAC3C,KAAK,WAAW,MAAM,CAAE,QAAAD,EAAS,QAAAC,CAAQ,CAAC,CAC9C,CACJ,CAGA,SAASjC,EAAO,CACZ,GAAI,CAACA,GAAS,EAAEA,aAAiB4C,GAC7B,MAAM,IAAI,MAAM,kDAAkD,EAEtE,OAAO,IAAIA,EACP,KAAK,QAAQ,SAAS5C,EAAM,OAAO,EACnC,KAAK,SAAS,SAASA,EAAM,QAAQ,EACrC,KAAK,YAAY,SAASA,EAAM,WAAW,EAC3C,KAAK,WAAW,SAASA,EAAM,UAAU,CAC7C,CACJ,CAGA,IAAIA,EAAO,CACP,GAAI,CAACA,GAAS,EAAEA,aAAiB4C,GAC7B,MAAM,IAAI,MAAM,2CAA2C,EAE/D,OAAO,IAAIA,EACP,KAAK,QAAQ,IAAI5C,EAAM,OAAO,EAC9B,KAAK,SAAS,IAAIA,EAAM,QAAQ,EAChC,KAAK,YAAY,IAAIA,EAAM,WAAW,EACtC,KAAK,WAAW,IAAIA,EAAM,UAAU,CACxC,CACJ,CAGA,SAASa,EAAS,CACd,GAAI,OAAOA,GAAY,SACnB,MAAM,IAAI,MAAM,0CAA0C,EAE9D,OAAO,IAAI+B,EACP,KAAK,QAAQ,SAAS/B,CAAO,EAC7B,KAAK,SAAS,SAASA,CAAO,EAC9B,KAAK,YAAY,SAASA,CAAO,EACjC,KAAK,WAAW,SAASA,CAAO,CACpC,CACJ,CAEA,OAAOA,EAAS,CACZ,GAAI,OAAOA,GAAY,SACnB,MAAM,IAAI,MAAM,wCAAwC,EAE5D,OAAO,IAAI+B,EACP,KAAK,QAAQ,OAAO/B,CAAO,EAC3B,KAAK,SAAS,OAAOA,CAAO,EAC5B,KAAK,YAAY,OAAOA,CAAO,EAC/B,KAAK,WAAW,OAAOA,CAAO,CAClC,CACJ,CAGA,aAAc,CAEV,OAAK,KAAK,WAAW,EAMjB,KAAK,QAAQ,IAAM,KAAK,SAAS,GACjC,KAAK,SAAS,IAAM,KAAK,YAAY,GACrC,KAAK,YAAY,IAAM,KAAK,WAAW,EAEhC,GAAG,KAAK,QAAQ,CAAC,KAGrB,GAAG,KAAK,QAAQ,CAAC,MAAM,KAAK,SAAS,CAAC,MAAM,KAAK,YAAY,CAAC,MAAM,KAAK,WAAW,CAAC,KAZjF,GAAG,KAAK,QAAQ,CAAC,MAAM,KAAK,SAAS,CAAC,MAAM,KAAK,YAAY,CAAC,MAAM,KAAK,WAAW,CAAC,IAapG,CAEA,YAAa,CACT,OACI,KAAK,QAAQ,IAAM,KAAK,QAAQ,GAChC,KAAK,SAAS,IAAM,KAAK,SAAS,GAClC,KAAK,YAAY,IAAM,KAAK,YAAY,GACxC,KAAK,WAAW,IAAM,KAAK,WAAW,CAE9C,CAGA,OAAO,KAAKZ,EAAGC,EAAGY,EAAG,CACjB,GAAI,OAAOA,GAAM,UAAYA,EAAI,GAAKA,EAAI,EACtC,MAAM,IAAI,MAAM,qCAAqC,EAGzD,OAAIZ,GAAM,KACFD,GAAM,KACC,KAEJA,EAAE,SAAS,EAAMa,CAAC,EAGzBb,GAAM,KACCC,EAAE,SAASY,CAAC,EAGhB,IAAI8B,EACPhB,EAAO,KAAK3B,EAAE,QAASC,EAAE,QAASY,CAAC,EACnCc,EAAO,KAAK3B,EAAE,SAAUC,EAAE,SAAUY,CAAC,EACrCc,EAAO,KAAK3B,EAAE,YAAaC,EAAE,YAAaY,CAAC,EAC3Cc,EAAO,KAAK3B,EAAE,WAAYC,EAAE,WAAYY,CAAC,CAC7C,CACJ,CAGA,OAAOd,EAAO,CACV,MAAI,CAACA,GAAS,EAAEA,aAAiB4C,GACtB,GAGP,KAAK,QAAQ,OAAO5C,EAAM,OAAO,GACjC,KAAK,SAAS,OAAOA,EAAM,QAAQ,GACnC,KAAK,YAAY,OAAOA,EAAM,WAAW,GACzC,KAAK,WAAW,OAAOA,EAAM,UAAU,CAE/C,CAEA,UAAW,CACP,IAAIG,EAAO,EACX,OAAAA,GAASA,GAAQ,GAAKA,EAAQ,KAAK,QAAQ,SAAS,EACpDA,GAASA,GAAQ,GAAKA,EAAQ,KAAK,SAAS,SAAS,EACrDA,GAASA,GAAQ,GAAKA,EAAQ,KAAK,YAAY,SAAS,EACxDA,GAASA,GAAQ,GAAKA,EAAQ,KAAK,WAAW,SAAS,EAChDA,EAAOA,CAClB,CAEA,UAAW,CACP,OACI,KAAK,QAAQ,OAAO,KAAK,QAAQ,GACjC,KAAK,SAAS,OAAO,KAAK,WAAW,GACrC,KAAK,YAAY,OAAO,KAAK,UAAU,EAEhC,oBAAoB,KAAK,QAAQ,SAAS,CAAC,IAE/C,yBAAyB,KAAK,OAAO,eAAe,KAAK,QAAQ,kBAAkB,KAAK,WAAW,iBAAiB,KAAK,UAAU,GAC9I,CACJ",
-  "names": ["OffsetBase", "dx", "dy", "other", "a", "b", "hash", "Size", "width", "height", "source", "dimension", "radius", "origin", "Offset", "offset", "operand", "t", "direction", "distance", "scaleX", "scaleY", "angle", "cos", "sin", "Rect", "left", "top", "right", "bottom", "center", "Radius", "x", "y", "options", "minimum", "maximum", "minRadius", "maxRadius", "minimumX", "minimumY", "maximumX", "maximumY", "value", "min", "max", "k", "BorderRadius", "topLeft", "topRight", "bottomRight", "bottomLeft", "r", "side"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/input_decoration.js b/packages/flutterjs_engine/package/material/dist/utils/input_decoration.js
deleted file mode 100644
index 84bd6619..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/input_decoration.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class T{constructor({hintText:t="",labelText:e="",helperText:s="",errorText:i="",prefixIcon:l=null,suffixIcon:n=null,filled:r=!1,fillColor:h="#f5f5f5",border:o=null,enabledBorder:a=null,focusedBorder:d=null,errorBorder:u=null,contentPadding:f=null,isDense:c=!1,isCollapsed:x=!1,counterText:g="",maxLength:p=null}={}){this.hintText=t,this.labelText=e,this.helperText=s,this.errorText=i,this.prefixIcon=l,this.suffixIcon=n,this.filled=r,this.fillColor=h,this.border=o,this.enabledBorder=a,this.focusedBorder=d,this.errorBorder=u,this.contentPadding=f||EdgeInsets.symmetric({horizontal:12,vertical:8}),this.isDense=c,this.isCollapsed=x,this.counterText=g,this.maxLength=p}getContentPadding(){return this.isCollapsed?EdgeInsets.zero():this.isDense?EdgeInsets.all(8):this.contentPadding}toString(){return`InputDecoration(label: ${this.labelText}, hint: ${this.hintText})`}}export{T as InputDecoration};
-//# sourceMappingURL=input_decoration.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/input_decoration.js.map b/packages/flutterjs_engine/package/material/dist/utils/input_decoration.js.map
deleted file mode 100644
index bdc8609d..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/input_decoration.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/input_decoration.js"],
-  "sourcesContent": ["export class InputDecoration {\r\n  constructor({\r\n    hintText = '',\r\n    labelText = '',\r\n    helperText = '',\r\n    errorText = '',\r\n    prefixIcon = null,\r\n    suffixIcon = null,\r\n    filled = false,\r\n    fillColor = '#f5f5f5',\r\n    border = null,\r\n    enabledBorder = null,\r\n    focusedBorder = null,\r\n    errorBorder = null,\r\n    contentPadding = null,\r\n    isDense = false,\r\n    isCollapsed = false,\r\n    counterText = '',\r\n    maxLength = null\r\n  } = {}) {\r\n    this.hintText = hintText;\r\n    this.labelText = labelText;\r\n    this.helperText = helperText;\r\n    this.errorText = errorText;\r\n    this.prefixIcon = prefixIcon;\r\n    this.suffixIcon = suffixIcon;\r\n    this.filled = filled;\r\n    this.fillColor = fillColor;\r\n    this.border = border;\r\n    this.enabledBorder = enabledBorder;\r\n    this.focusedBorder = focusedBorder;\r\n    this.errorBorder = errorBorder;\r\n    this.contentPadding = contentPadding || EdgeInsets.symmetric({ horizontal: 12, vertical: 8 });\r\n    this.isDense = isDense;\r\n    this.isCollapsed = isCollapsed;\r\n    this.counterText = counterText;\r\n    this.maxLength = maxLength;\r\n  }\r\n\r\n  getContentPadding() {\r\n    if (this.isCollapsed) return EdgeInsets.zero();\r\n    if (this.isDense) return EdgeInsets.all(8);\r\n    return this.contentPadding;\r\n  }\r\n\r\n  toString() {\r\n    return `InputDecoration(label: ${this.labelText}, hint: ${this.hintText})`;\r\n  }\r\n}"],
-  "mappings": "AAAO,MAAMA,CAAgB,CAC3B,YAAY,CACV,SAAAC,EAAW,GACX,UAAAC,EAAY,GACZ,WAAAC,EAAa,GACb,UAAAC,EAAY,GACZ,WAAAC,EAAa,KACb,WAAAC,EAAa,KACb,OAAAC,EAAS,GACT,UAAAC,EAAY,UACZ,OAAAC,EAAS,KACT,cAAAC,EAAgB,KAChB,cAAAC,EAAgB,KAChB,YAAAC,EAAc,KACd,eAAAC,EAAiB,KACjB,QAAAC,EAAU,GACV,YAAAC,EAAc,GACd,YAAAC,EAAc,GACd,UAAAC,EAAY,IACd,EAAI,CAAC,EAAG,CACN,KAAK,SAAWhB,EAChB,KAAK,UAAYC,EACjB,KAAK,WAAaC,EAClB,KAAK,UAAYC,EACjB,KAAK,WAAaC,EAClB,KAAK,WAAaC,EAClB,KAAK,OAASC,EACd,KAAK,UAAYC,EACjB,KAAK,OAASC,EACd,KAAK,cAAgBC,EACrB,KAAK,cAAgBC,EACrB,KAAK,YAAcC,EACnB,KAAK,eAAiBC,GAAkB,WAAW,UAAU,CAAE,WAAY,GAAI,SAAU,CAAE,CAAC,EAC5F,KAAK,QAAUC,EACf,KAAK,YAAcC,EACnB,KAAK,YAAcC,EACnB,KAAK,UAAYC,CACnB,CAEA,mBAAoB,CAClB,OAAI,KAAK,YAAoB,WAAW,KAAK,EACzC,KAAK,QAAgB,WAAW,IAAI,CAAC,EAClC,KAAK,cACd,CAEA,UAAW,CACT,MAAO,0BAA0B,KAAK,SAAS,WAAW,KAAK,QAAQ,GACzE,CACF",
-  "names": ["InputDecoration", "hintText", "labelText", "helperText", "errorText", "prefixIcon", "suffixIcon", "filled", "fillColor", "border", "enabledBorder", "focusedBorder", "errorBorder", "contentPadding", "isDense", "isCollapsed", "counterText", "maxLength"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/linear_gradient.js b/packages/flutterjs_engine/package/material/dist/utils/linear_gradient.js
deleted file mode 100644
index 69b3da1d..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/linear_gradient.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{Alignment as o}from"./property/alignment.js";class g{constructor({begin:n=o.topLeft,end:i=o.bottomRight,colors:t=[],stops:s=null}={}){this.begin=n,this.end=i,this.colors=t,this.stops=s||t.map((h,e)=>e/(t.length-1||1))}toCSSString(){const n=Math.atan2(this.end.y-this.begin.y,this.end.x-this.begin.x)*(180/Math.PI),i=this.colors.map((t,s)=>`${t} ${this.stops[s]*100}%`).join(", ");return`linear-gradient(${n}deg, ${i})`}toString(){return`LinearGradient(colors: ${this.colors.length})`}}export{g as LinearGradient};
-//# sourceMappingURL=linear_gradient.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/linear_gradient.js.map b/packages/flutterjs_engine/package/material/dist/utils/linear_gradient.js.map
deleted file mode 100644
index e06e7fba..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/linear_gradient.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/linear_gradient.js"],
-  "sourcesContent": ["import { Alignment } from './property/alignment.js';\r\n\r\nexport class LinearGradient {\r\n  constructor({\r\n    begin = Alignment.topLeft,\r\n    end = Alignment.bottomRight,\r\n    colors = [],\r\n    stops = null\r\n  } = {}) {\r\n    this.begin = begin;\r\n    this.end = end;\r\n    this.colors = colors;\r\n    this.stops = stops || colors.map((_, i) => i / (colors.length - 1 || 1));\r\n  }\r\n\r\n  toCSSString() {\r\n    const angle = Math.atan2(this.end.y - this.begin.y, this.end.x - this.begin.x) * (180 / Math.PI);\r\n    const colorStops = this.colors\r\n      .map((color, i) => `${color} ${this.stops[i] * 100}%`)\r\n      .join(', ');\r\n    return `linear-gradient(${angle}deg, ${colorStops})`;\r\n  }\r\n\r\n  toString() {\r\n    return `LinearGradient(colors: ${this.colors.length})`;\r\n  }\r\n}"],
-  "mappings": "AAAA,OAAS,aAAAA,MAAiB,0BAEnB,MAAMC,CAAe,CAC1B,YAAY,CACV,MAAAC,EAAQF,EAAU,QAClB,IAAAG,EAAMH,EAAU,YAChB,OAAAI,EAAS,CAAC,EACV,MAAAC,EAAQ,IACV,EAAI,CAAC,EAAG,CACN,KAAK,MAAQH,EACb,KAAK,IAAMC,EACX,KAAK,OAASC,EACd,KAAK,MAAQC,GAASD,EAAO,IAAI,CAACE,EAAGC,IAAMA,GAAKH,EAAO,OAAS,GAAK,EAAE,CACzE,CAEA,aAAc,CACZ,MAAMI,EAAQ,KAAK,MAAM,KAAK,IAAI,EAAI,KAAK,MAAM,EAAG,KAAK,IAAI,EAAI,KAAK,MAAM,CAAC,GAAK,IAAM,KAAK,IACvFC,EAAa,KAAK,OACrB,IAAI,CAACC,EAAOH,IAAM,GAAGG,CAAK,IAAI,KAAK,MAAMH,CAAC,EAAI,GAAG,GAAG,EACpD,KAAK,IAAI,EACZ,MAAO,mBAAmBC,CAAK,QAAQC,CAAU,GACnD,CAEA,UAAW,CACT,MAAO,0BAA0B,KAAK,OAAO,MAAM,GACrD,CACF",
-  "names": ["Alignment", "LinearGradient", "begin", "end", "colors", "stops", "_", "i", "angle", "colorStops", "color"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/motion_theme.js b/packages/flutterjs_engine/package/material/dist/utils/motion_theme.js
deleted file mode 100644
index fb8e3537..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/motion_theme.js
+++ /dev/null
@@ -1,6 +0,0 @@
-class a{constructor({shortDuration:e=50,shortMediumDuration:r=100,mediumDuration:i=200,mediumLongDuration:t=300,longDuration:u=500,veryLongDuration:n=1e3,standardCurve:s="cubic-bezier(0.2, 0.0, 0.0, 1.0)",standardAccelerateCurve:o="cubic-bezier(0.3, 0.0, 1.0, 1.0)",standardDecelerateCurve:c="cubic-bezier(0.0, 0.0, 0.0, 1.0)",emphasizedCurve:d="cubic-bezier(0.2, 0.0, 0.0, 1.0)",emphasizedAccelerateCurve:h="cubic-bezier(0.3, 0.0, 1.0, 1.0)",emphasizedDecelerateCurve:m="cubic-bezier(0.05, 0.7, 0.1, 1.0)",legacyAccelerateCurve:l="cubic-bezier(0.4, 0.0, 1.0, 1.0)",legacyDecelerateCurve:v="cubic-bezier(0.0, 0.0, 0.2, 1.0)",easeInCurve:D="cubic-bezier(0.4, 0.0, 1.0, 1.0)",easeOutCurve:C="cubic-bezier(0.0, 0.0, 0.2, 1.0)",easeInOutCurve:p="cubic-bezier(0.4, 0.0, 0.2, 1.0)",linearCurve:g="linear",bounceInCurve:b="cubic-bezier(0.675, 0.19, 0.985, 0.16)",bounceOutCurve:z="cubic-bezier(0.015, 0.84, 0.33, 1.0)",elasticInCurve:y="cubic-bezier(0.17, 0.67, 0.83, 0.67)",elasticOutCurve:L="cubic-bezier(0.17, 0.67, 0.83, 0.67)"}={}){this.shortDuration=e,this.shortMediumDuration=r,this.mediumDuration=i,this.mediumLongDuration=t,this.longDuration=u,this.veryLongDuration=n,this.standardCurve=s,this.standardAccelerateCurve=o,this.standardDecelerateCurve=c,this.emphasizedCurve=d,this.emphasizedAccelerateCurve=h,this.emphasizedDecelerateCurve=m,this.legacyAccelerateCurve=l,this.legacyDecelerateCurve=v,this.easeInCurve=D,this.easeOutCurve=C,this.easeInOutCurve=p,this.linearCurve=g,this.bounceInCurve=b,this.bounceOutCurve=z,this.elasticInCurve=y,this.elasticOutCurve=L}getDuration(e){return this[e]??null}getCurve(e){return this[e]??null}createTransition(e,r="standardCurve",i="mediumDuration"){const t=this.getDuration(i),u=this.getCurve(r);return!t||!u?null:`${e} ${t}ms ${u}`}createTransitions(e,r="standardCurve",i="mediumDuration"){return e.map(t=>this.createTransition(t,r,i)).join(", ")}getAllDurations(){return{shortDuration:this.shortDuration,shortMediumDuration:this.shortMediumDuration,mediumDuration:this.mediumDuration,mediumLongDuration:this.mediumLongDuration,longDuration:this.longDuration,veryLongDuration:this.veryLongDuration}}getAllCurves(){return{standardCurve:this.standardCurve,standardAccelerateCurve:this.standardAccelerateCurve,standardDecelerateCurve:this.standardDecelerateCurve,emphasizedCurve:this.emphasizedCurve,emphasizedAccelerateCurve:this.emphasizedAccelerateCurve,emphasizedDecelerateCurve:this.emphasizedDecelerateCurve,legacyAccelerateCurve:this.legacyAccelerateCurve,legacyDecelerateCurve:this.legacyDecelerateCurve,easeInCurve:this.easeInCurve,easeOutCurve:this.easeOutCurve,easeInOutCurve:this.easeInOutCurve,linearCurve:this.linearCurve,bounceInCurve:this.bounceInCurve,bounceOutCurve:this.bounceOutCurve,elasticInCurve:this.elasticInCurve,elasticOutCurve:this.elasticOutCurve}}static reducedMotion(){return new a({shortDuration:0,shortMediumDuration:0,mediumDuration:0,mediumLongDuration:0,longDuration:0,veryLongDuration:0,linearCurve:"linear"})}static slower(){return new a({shortDuration:75,shortMediumDuration:150,mediumDuration:300,mediumLongDuration:450,longDuration:750,veryLongDuration:1500})}static faster(){return new a({shortDuration:25,shortMediumDuration:50,mediumDuration:100,mediumLongDuration:150,longDuration:250,veryLongDuration:500})}toCSSVariables(){let e=`:root {
-`;const r=this.getAllDurations();for(const[t,u]of Object.entries(r)){const n=`--motion-duration-${t.replace(/([A-Z])/g,"-$1").toLowerCase()}`;e+=`  ${n}: ${u}ms;
-`}e+=`
-`;const i=this.getAllCurves();for(const[t,u]of Object.entries(i)){const n=`--motion-curve-${t.replace(/([A-Z])/g,"-$1").toLowerCase()}`;e+=`  ${n}: ${u};
-`}return e+="}",e}getPresets(){return{ripple:{duration:this.shortMediumDuration,curve:this.linearCurve},standardFadeIn:{duration:this.mediumDuration,curve:this.standardDecelerateCurve,properties:["opacity"]},standardFadeOut:{duration:this.mediumDuration,curve:this.standardAccelerateCurve,properties:["opacity"]},emphasizedFadeIn:{duration:this.mediumLongDuration,curve:this.emphasizedDecelerateCurve,properties:["opacity"]},slideIn:{duration:this.mediumLongDuration,curve:this.standardDecelerateCurve,properties:["transform","opacity"]},slideOut:{duration:this.mediumDuration,curve:this.standardAccelerateCurve,properties:["transform","opacity"]},scaleIn:{duration:this.mediumDuration,curve:this.emphasizedDecelerateCurve,properties:["transform","opacity"]},scaleOut:{duration:this.mediumDuration,curve:this.standardAccelerateCurve,properties:["transform","opacity"]},hoverFocus:{duration:this.shortMediumDuration,curve:this.linearCurve,properties:["background-color","box-shadow"]},dialogOpen:{duration:this.mediumLongDuration,curve:this.emphasizedDecelerateCurve,properties:["transform","opacity"]},dialogClose:{duration:this.mediumDuration,curve:this.emphasizedAccelerateCurve,properties:["transform","opacity"]}}}getPresetStyle(e){const r=this.getPresets()[e];return r?r.properties?{transition:this.createTransitions(r.properties,null,null).split(", ").map(i=>{const[t,...u]=i.split(" ");return`${t} ${r.duration}ms ${r.curve}`}).join(", ")}:{animationDuration:`${r.duration}ms`,animationTimingFunction:r.curve}:null}copyWith(e={}){return new a({shortDuration:e.shortDuration??this.shortDuration,shortMediumDuration:e.shortMediumDuration??this.shortMediumDuration,mediumDuration:e.mediumDuration??this.mediumDuration,mediumLongDuration:e.mediumLongDuration??this.mediumLongDuration,longDuration:e.longDuration??this.longDuration,veryLongDuration:e.veryLongDuration??this.veryLongDuration,...e})}merge(e){return e?this.copyWith({...e.getAllDurations(),...e.getAllCurves()}):this}static respectPreference(){return typeof window<"u"&&window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches?a.reducedMotion():new a}toString(){return"MotionTheme(durations: 6, curves: 16, presets: 10)"}}export{a as MotionTheme};
-//# sourceMappingURL=motion_theme.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/motion_theme.js.map b/packages/flutterjs_engine/package/material/dist/utils/motion_theme.js.map
deleted file mode 100644
index 9ffa85fc..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/motion_theme.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/motion_theme.js"],
-  "sourcesContent": ["/**\r\n * Material Design 3 Motion System\r\n * Defines animation curves and durations for consistent motion\r\n * Follows Flutter Material Design 3 specification\r\n * \r\n * Flutter Reference: https://api.flutter.dev/flutter/material/AnimationDuration-class.html\r\n * https://api.flutter.dev/flutter/animation/Curves-class.html\r\n */\r\nexport class MotionTheme {\r\n  constructor({\r\n    // Standard Durations (milliseconds)\r\n    shortDuration = 50,\r\n    shortMediumDuration = 100,\r\n    mediumDuration = 200,\r\n    mediumLongDuration = 300,\r\n    longDuration = 500,\r\n    veryLongDuration = 1000,\r\n    \r\n    // Animation Curves\r\n    standardCurve = 'cubic-bezier(0.2, 0.0, 0.0, 1.0)', // Material standard\r\n    standardAccelerateCurve = 'cubic-bezier(0.3, 0.0, 1.0, 1.0)', // Accelerate\r\n    standardDecelerateCurve = 'cubic-bezier(0.0, 0.0, 0.0, 1.0)', // Decelerate\r\n    emphasizedCurve = 'cubic-bezier(0.2, 0.0, 0.0, 1.0)', // Emphasized\r\n    emphasizedAccelerateCurve = 'cubic-bezier(0.3, 0.0, 1.0, 1.0)', // Emphasized Accelerate\r\n    emphasizedDecelerateCurve = 'cubic-bezier(0.05, 0.7, 0.1, 1.0)', // Emphasized Decelerate\r\n    legacyAccelerateCurve = 'cubic-bezier(0.4, 0.0, 1.0, 1.0)', // Legacy\r\n    legacyDecelerateCurve = 'cubic-bezier(0.0, 0.0, 0.2, 1.0)', // Legacy\r\n    easeInCurve = 'cubic-bezier(0.4, 0.0, 1.0, 1.0)',\r\n    easeOutCurve = 'cubic-bezier(0.0, 0.0, 0.2, 1.0)',\r\n    easeInOutCurve = 'cubic-bezier(0.4, 0.0, 0.2, 1.0)',\r\n    linearCurve = 'linear',\r\n    bounceInCurve = 'cubic-bezier(0.675, 0.19, 0.985, 0.16)',\r\n    bounceOutCurve = 'cubic-bezier(0.015, 0.84, 0.33, 1.0)',\r\n    elasticInCurve = 'cubic-bezier(0.17, 0.67, 0.83, 0.67)',\r\n    elasticOutCurve = 'cubic-bezier(0.17, 0.67, 0.83, 0.67)'\r\n  } = {}) {\r\n    // ========== DURATIONS ==========\r\n    this.shortDuration = shortDuration;\r\n    this.shortMediumDuration = shortMediumDuration;\r\n    this.mediumDuration = mediumDuration;\r\n    this.mediumLongDuration = mediumLongDuration;\r\n    this.longDuration = longDuration;\r\n    this.veryLongDuration = veryLongDuration;\r\n\r\n    // ========== EASING CURVES ==========\r\n    this.standardCurve = standardCurve;\r\n    this.standardAccelerateCurve = standardAccelerateCurve;\r\n    this.standardDecelerateCurve = standardDecelerateCurve;\r\n    this.emphasizedCurve = emphasizedCurve;\r\n    this.emphasizedAccelerateCurve = emphasizedAccelerateCurve;\r\n    this.emphasizedDecelerateCurve = emphasizedDecelerateCurve;\r\n    this.legacyAccelerateCurve = legacyAccelerateCurve;\r\n    this.legacyDecelerateCurve = legacyDecelerateCurve;\r\n    this.easeInCurve = easeInCurve;\r\n    this.easeOutCurve = easeOutCurve;\r\n    this.easeInOutCurve = easeInOutCurve;\r\n    this.linearCurve = linearCurve;\r\n    this.bounceInCurve = bounceInCurve;\r\n    this.bounceOutCurve = bounceOutCurve;\r\n    this.elasticInCurve = elasticInCurve;\r\n    this.elasticOutCurve = elasticOutCurve;\r\n  }\r\n\r\n  /**\r\n   * Get duration by name\r\n   * @param {string} durationName - Name of duration\r\n   * @returns {number} Duration in milliseconds\r\n   * \r\n   * @example\r\n   * const duration = theme.getDuration('mediumDuration'); // 200\r\n   */\r\n  getDuration(durationName) {\r\n    return this[durationName] ?? null;\r\n  }\r\n\r\n  /**\r\n   * Get easing curve by name\r\n   * @param {string} curveName - Name of curve\r\n   * @returns {string} CSS easing function\r\n   * \r\n   * @example\r\n   * const curve = theme.getCurve('standardCurve');\r\n   * // 'cubic-bezier(0.2, 0.0, 0.0, 1.0)'\r\n   */\r\n  getCurve(curveName) {\r\n    return this[curveName] ?? null;\r\n  }\r\n\r\n  /**\r\n   * Create CSS transition string\r\n   * @param {string} property - CSS property to animate\r\n   * @param {string} curveName - Easing curve name (default: standardCurve)\r\n   * @param {string} durationName - Duration name (default: mediumDuration)\r\n   * @returns {string} CSS transition string\r\n   * \r\n   * @example\r\n   * theme.createTransition('opacity', 'standardCurve', 'mediumDuration')\r\n   * // 'opacity 200ms cubic-bezier(0.2, 0.0, 0.0, 1.0)'\r\n   */\r\n  createTransition(property, curveName = 'standardCurve', durationName = 'mediumDuration') {\r\n    const duration = this.getDuration(durationName);\r\n    const curve = this.getCurve(curveName);\r\n    \r\n    if (!duration || !curve) return null;\r\n    \r\n    return `${property} ${duration}ms ${curve}`;\r\n  }\r\n\r\n  /**\r\n   * Create multiple CSS transitions\r\n   * @param {string[]} properties - CSS properties to animate\r\n   * @param {string} curveName - Easing curve name\r\n   * @param {string} durationName - Duration name\r\n   * @returns {string} CSS transition string\r\n   * \r\n   * @example\r\n   * theme.createTransitions(['opacity', 'transform'], 'standardCurve', 'mediumDuration')\r\n   * // 'opacity 200ms cubic-bezier(...), transform 200ms cubic-bezier(...)'\r\n   */\r\n  createTransitions(properties, curveName = 'standardCurve', durationName = 'mediumDuration') {\r\n    return properties\r\n      .map(prop => this.createTransition(prop, curveName, durationName))\r\n      .join(', ');\r\n  }\r\n\r\n  /**\r\n   * Get all durations as object\r\n   * @returns {Object} Duration map\r\n   */\r\n  getAllDurations() {\r\n    return {\r\n      shortDuration: this.shortDuration,\r\n      shortMediumDuration: this.shortMediumDuration,\r\n      mediumDuration: this.mediumDuration,\r\n      mediumLongDuration: this.mediumLongDuration,\r\n      longDuration: this.longDuration,\r\n      veryLongDuration: this.veryLongDuration\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get all curves as object\r\n   * @returns {Object} Curve map\r\n   */\r\n  getAllCurves() {\r\n    return {\r\n      standardCurve: this.standardCurve,\r\n      standardAccelerateCurve: this.standardAccelerateCurve,\r\n      standardDecelerateCurve: this.standardDecelerateCurve,\r\n      emphasizedCurve: this.emphasizedCurve,\r\n      emphasizedAccelerateCurve: this.emphasizedAccelerateCurve,\r\n      emphasizedDecelerateCurve: this.emphasizedDecelerateCurve,\r\n      legacyAccelerateCurve: this.legacyAccelerateCurve,\r\n      legacyDecelerateCurve: this.legacyDecelerateCurve,\r\n      easeInCurve: this.easeInCurve,\r\n      easeOutCurve: this.easeOutCurve,\r\n      easeInOutCurve: this.easeInOutCurve,\r\n      linearCurve: this.linearCurve,\r\n      bounceInCurve: this.bounceInCurve,\r\n      bounceOutCurve: this.bounceOutCurve,\r\n      elasticInCurve: this.elasticInCurve,\r\n      elasticOutCurve: this.elasticOutCurve\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Create reduced motion theme for accessibility\r\n   * Disables most animations\r\n   * @returns {MotionTheme} Reduced motion theme\r\n   * \r\n   * @example\r\n   * const reducedMotion = MotionTheme.reducedMotion();\r\n   */\r\n  static reducedMotion() {\r\n    return new MotionTheme({\r\n      shortDuration: 0,\r\n      shortMediumDuration: 0,\r\n      mediumDuration: 0,\r\n      mediumLongDuration: 0,\r\n      longDuration: 0,\r\n      veryLongDuration: 0,\r\n      // Keep curves but they won't be used with 0 duration\r\n      linearCurve: 'linear'\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Create slower motion theme (for accessibility/preference)\r\n   * Increases all animation durations by 1.5x\r\n   * @returns {MotionTheme} Slower motion theme\r\n   * \r\n   * @example\r\n   * const slower = MotionTheme.slower();\r\n   */\r\n  static slower() {\r\n    return new MotionTheme({\r\n      shortDuration: 75,\r\n      shortMediumDuration: 150,\r\n      mediumDuration: 300,\r\n      mediumLongDuration: 450,\r\n      longDuration: 750,\r\n      veryLongDuration: 1500\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Create faster motion theme\r\n   * Decreases all animation durations by 0.5x\r\n   * @returns {MotionTheme} Faster motion theme\r\n   * \r\n   * @example\r\n   * const faster = MotionTheme.faster();\r\n   */\r\n  static faster() {\r\n    return new MotionTheme({\r\n      shortDuration: 25,\r\n      shortMediumDuration: 50,\r\n      mediumDuration: 100,\r\n      mediumLongDuration: 150,\r\n      longDuration: 250,\r\n      veryLongDuration: 500\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Generate CSS variables for all durations and curves\r\n   * @returns {string} CSS variable declarations\r\n   * \r\n   * @example\r\n   * const css = theme.toCSSVariables();\r\n   * // Output: --motion-duration-medium: 200ms; --motion-curve-standard: ...;\r\n   */\r\n  toCSSVariables() {\r\n    let css = ':root {\\n';\r\n    \r\n    // Duration variables\r\n    const durations = this.getAllDurations();\r\n    for (const [name, value] of Object.entries(durations)) {\r\n      const cssVarName = `--motion-duration-${name.replace(/([A-Z])/g, '-$1').toLowerCase()}`;\r\n      css += `  ${cssVarName}: ${value}ms;\\n`;\r\n    }\r\n    \r\n    css += '\\n';\r\n    \r\n    // Curve variables\r\n    const curves = this.getAllCurves();\r\n    for (const [name, value] of Object.entries(curves)) {\r\n      const cssVarName = `--motion-curve-${name.replace(/([A-Z])/g, '-$1').toLowerCase()}`;\r\n      css += `  ${cssVarName}: ${value};\\n`;\r\n    }\r\n    \r\n    css += '}';\r\n    return css;\r\n  }\r\n\r\n  /**\r\n   * Get predefined animation presets\r\n   * @returns {Object} Animation presets for common transitions\r\n   */\r\n  getPresets() {\r\n    return {\r\n      // Fast feedback animations\r\n      ripple: {\r\n        duration: this.shortMediumDuration,\r\n        curve: this.linearCurve\r\n      },\r\n      \r\n      // Standard UI transitions\r\n      standardFadeIn: {\r\n        duration: this.mediumDuration,\r\n        curve: this.standardDecelerateCurve,\r\n        properties: ['opacity']\r\n      },\r\n      \r\n      standardFadeOut: {\r\n        duration: this.mediumDuration,\r\n        curve: this.standardAccelerateCurve,\r\n        properties: ['opacity']\r\n      },\r\n      \r\n      // Emphasized transitions\r\n      emphasizedFadeIn: {\r\n        duration: this.mediumLongDuration,\r\n        curve: this.emphasizedDecelerateCurve,\r\n        properties: ['opacity']\r\n      },\r\n      \r\n      // Slide animations\r\n      slideIn: {\r\n        duration: this.mediumLongDuration,\r\n        curve: this.standardDecelerateCurve,\r\n        properties: ['transform', 'opacity']\r\n      },\r\n      \r\n      slideOut: {\r\n        duration: this.mediumDuration,\r\n        curve: this.standardAccelerateCurve,\r\n        properties: ['transform', 'opacity']\r\n      },\r\n      \r\n      // Scale animations\r\n      scaleIn: {\r\n        duration: this.mediumDuration,\r\n        curve: this.emphasizedDecelerateCurve,\r\n        properties: ['transform', 'opacity']\r\n      },\r\n      \r\n      scaleOut: {\r\n        duration: this.mediumDuration,\r\n        curve: this.standardAccelerateCurve,\r\n        properties: ['transform', 'opacity']\r\n      },\r\n      \r\n      // Hover/interactive\r\n      hoverFocus: {\r\n        duration: this.shortMediumDuration,\r\n        curve: this.linearCurve,\r\n        properties: ['background-color', 'box-shadow']\r\n      },\r\n      \r\n      // Dialogs\r\n      dialogOpen: {\r\n        duration: this.mediumLongDuration,\r\n        curve: this.emphasizedDecelerateCurve,\r\n        properties: ['transform', 'opacity']\r\n      },\r\n      \r\n      dialogClose: {\r\n        duration: this.mediumDuration,\r\n        curve: this.emphasizedAccelerateCurve,\r\n        properties: ['transform', 'opacity']\r\n      }\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get preset transition CSS\r\n   * @param {string} presetName - Preset name\r\n   * @returns {Object} CSS properties\r\n   * \r\n   * @example\r\n   * const style = theme.getPresetStyle('slideIn');\r\n   * // { transition: 'transform 300ms ..., opacity 300ms ...' }\r\n   */\r\n  getPresetStyle(presetName) {\r\n    const preset = this.getPresets()[presetName];\r\n    if (!preset) return null;\r\n    \r\n    if (preset.properties) {\r\n      return {\r\n        transition: this.createTransitions(preset.properties, null, null)\r\n          .split(', ')\r\n          .map(t => {\r\n            // Replace null curve with preset curve\r\n            const [prop, ...rest] = t.split(' ');\r\n            return `${prop} ${preset.duration}ms ${preset.curve}`;\r\n          })\r\n          .join(', ')\r\n      };\r\n    }\r\n    \r\n    return {\r\n      animationDuration: `${preset.duration}ms`,\r\n      animationTimingFunction: preset.curve\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Copy theme with updated values\r\n   * @param {Object} config - Config to override\r\n   * @returns {MotionTheme} New theme instance\r\n   */\r\n  copyWith(config = {}) {\r\n    return new MotionTheme({\r\n      shortDuration: config.shortDuration ?? this.shortDuration,\r\n      shortMediumDuration: config.shortMediumDuration ?? this.shortMediumDuration,\r\n      mediumDuration: config.mediumDuration ?? this.mediumDuration,\r\n      mediumLongDuration: config.mediumLongDuration ?? this.mediumLongDuration,\r\n      longDuration: config.longDuration ?? this.longDuration,\r\n      veryLongDuration: config.veryLongDuration ?? this.veryLongDuration,\r\n      ...config\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Merge with another motion theme\r\n   * @param {MotionTheme} other - Theme to merge with\r\n   * @returns {MotionTheme} Merged theme\r\n   */\r\n  merge(other) {\r\n    if (!other) return this;\r\n    return this.copyWith({\r\n      ...other.getAllDurations(),\r\n      ...other.getAllCurves()\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Respect prefers-reduced-motion media query\r\n   * @returns {MotionTheme} Accessible motion theme\r\n   */\r\n  static respectPreference() {\r\n    // Check if user prefers reduced motion\r\n    if (typeof window !== 'undefined' && \r\n        window.matchMedia && \r\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\r\n      return MotionTheme.reducedMotion();\r\n    }\r\n    return new MotionTheme();\r\n  }\r\n\r\n  toString() {\r\n    return `MotionTheme(durations: 6, curves: 16, presets: 10)`;\r\n  }\r\n}"],
-  "mappings": "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",
-  "names": ["MotionTheme", "shortDuration", "shortMediumDuration", "mediumDuration", "mediumLongDuration", "longDuration", "veryLongDuration", "standardCurve", "standardAccelerateCurve", "standardDecelerateCurve", "emphasizedCurve", "emphasizedAccelerateCurve", "emphasizedDecelerateCurve", "legacyAccelerateCurve", "legacyDecelerateCurve", "easeInCurve", "easeOutCurve", "easeInOutCurve", "linearCurve", "bounceInCurve", "bounceOutCurve", "elasticInCurve", "elasticOutCurve", "durationName", "curveName", "property", "duration", "curve", "properties", "prop", "css", "durations", "name", "value", "cssVarName", "curves", "presetName", "preset", "t", "rest", "config", "other"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/offset.js b/packages/flutterjs_engine/package/material/dist/utils/offset.js
deleted file mode 100644
index 51b4c67e..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/offset.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class n{constructor(t=0,i=0){this.dx=t,this.dy=i}static zero(){return new n(0,0)}static infinite(){return new n(1/0,1/0)}get distance(){return Math.sqrt(this.dx*this.dx+this.dy*this.dy)}translate(t,i){return new n(this.dx+t,this.dy+i)}scale(t,i=t){return new n(this.dx*t,this.dy*i)}toString(){return`Offset(${this.dx}, ${this.dy})`}}export{n as Offset};
-//# sourceMappingURL=offset.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/offset.js.map b/packages/flutterjs_engine/package/material/dist/utils/offset.js.map
deleted file mode 100644
index d2ec6976..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/offset.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/offset.js"],
-  "sourcesContent": ["\r\nexport class Offset {\r\n  constructor(dx = 0, dy = 0) {\r\n    this.dx = dx;\r\n    this.dy = dy;\r\n  }\r\n\r\n  static zero() {\r\n    return new Offset(0, 0);\r\n  }\r\n\r\n  static infinite() {\r\n    return new Offset(Infinity, Infinity);\r\n  }\r\n\r\n  get distance() {\r\n    return Math.sqrt(this.dx * this.dx + this.dy * this.dy);\r\n  }\r\n\r\n  translate(translateX, translateY) {\r\n    return new Offset(this.dx + translateX, this.dy + translateY);\r\n  }\r\n\r\n  scale(scaleX, scaleY = scaleX) {\r\n    return new Offset(this.dx * scaleX, this.dy * scaleY);\r\n  }\r\n\r\n  toString() {\r\n    return `Offset(${this.dx}, ${this.dy})`;\r\n  }\r\n}"],
-  "mappings": "AACO,MAAMA,CAAO,CAClB,YAAYC,EAAK,EAAGC,EAAK,EAAG,CAC1B,KAAK,GAAKD,EACV,KAAK,GAAKC,CACZ,CAEA,OAAO,MAAO,CACZ,OAAO,IAAIF,EAAO,EAAG,CAAC,CACxB,CAEA,OAAO,UAAW,CAChB,OAAO,IAAIA,EAAO,IAAU,GAAQ,CACtC,CAEA,IAAI,UAAW,CACb,OAAO,KAAK,KAAK,KAAK,GAAK,KAAK,GAAK,KAAK,GAAK,KAAK,EAAE,CACxD,CAEA,UAAUG,EAAYC,EAAY,CAChC,OAAO,IAAIJ,EAAO,KAAK,GAAKG,EAAY,KAAK,GAAKC,CAAU,CAC9D,CAEA,MAAMC,EAAQC,EAASD,EAAQ,CAC7B,OAAO,IAAIL,EAAO,KAAK,GAAKK,EAAQ,KAAK,GAAKC,CAAM,CACtD,CAEA,UAAW,CACT,MAAO,UAAU,KAAK,EAAE,KAAK,KAAK,EAAE,GACtC,CACF",
-  "names": ["Offset", "dx", "dy", "translateX", "translateY", "scaleX", "scaleY"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/alignment.js b/packages/flutterjs_engine/package/material/dist/utils/property/alignment.js
deleted file mode 100644
index a139308f..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/alignment.js
+++ /dev/null
@@ -1,2 +0,0 @@
-var a=Object.defineProperty;var f=(c,t,r)=>t in c?a(c,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):c[t]=r;var o=(c,t,r)=>(f(c,typeof t!="symbol"?t+"":t,r),r);const e=class e{constructor(t=0,r=0){this.x=t,this.y=r,Object.freeze(this)}static get topLeft(){return new e(-1,-1)}static get topCenter(){return new e(0,-1)}static get topRight(){return new e(1,-1)}static get centerLeft(){return new e(-1,0)}static get center(){return new e(0,0)}static get centerRight(){return new e(1,0)}static get bottomLeft(){return new e(-1,1)}static get bottomCenter(){return new e(0,1)}static get bottomRight(){return new e(1,1)}static fromString(t){const n={"top-left":e.topLeft,"top-center":e.topCenter,"top-right":e.topRight,"center-left":e.centerLeft,center:e.center,"center-right":e.centerRight,"bottom-left":e.bottomLeft,"bottom-center":e.bottomCenter,"bottom-right":e.bottomRight}[t];if(!n)throw new Error(`Invalid alignment string: "${t}"`);return n}toString(){const t=`${this.x},${this.y}`;return{"-1,-1":"top-left","0,-1":"top-center","1,-1":"top-right","-1,0":"center-left","0,0":"center","1,0":"center-right","-1,1":"bottom-left","0,1":"bottom-center","1,1":"bottom-right"}[t]||`Alignment(${this.x}, ${this.y})`}toCSSFlex(){const t={"-1":"flex-start",0:"center",1:"flex-end"},r={"-1":"flex-start",0:"center",1:"flex-end"};return`${t[this.x]} ${r[this.y]}`}toCSSObjectPosition(){const t={"-1":"left",0:"center",1:"right"},r={"-1":"top",0:"center",1:"bottom"};return`${t[this.x]} ${r[this.y]}`}toCSSBackground(){const t={"-1":"0%",0:"50%",1:"100%"},r={"-1":"0%",0:"50%",1:"100%"};return`${t[this.x]} ${r[this.y]}`}positionElement(t,r){const n=r.getBoundingClientRect(),i=t.getBoundingClientRect(),s=(n.width-i.width)*(this.x+1)/2,h=(n.height-i.height)*(this.y+1)/2;return t.style.position="absolute",t.style.left=`${s}px`,t.style.top=`${h}px`,{left:s,top:h}}static lerp(t,r,n){return!(t instanceof e)||!(r instanceof e)?t:new e(t.x+(r.x-t.x)*n,t.y+(r.y-t.y)*n)}equals(t){return t instanceof e&&this.x===t.x&&this.y===t.y}};o(e,"topLeftStr","top-left"),o(e,"topCenterStr","top-center"),o(e,"topRightStr","top-right"),o(e,"centerLeftStr","center-left"),o(e,"centerStr","center"),o(e,"centerRightStr","center-right"),o(e,"bottomLeftStr","bottom-left"),o(e,"bottomCenterStr","bottom-center"),o(e,"bottomRightStr","bottom-right");let p=e;export{p as Alignment};
-//# sourceMappingURL=alignment.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/alignment.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/alignment.js.map
deleted file mode 100644
index 1740605a..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/alignment.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/alignment.js"],
-  "sourcesContent": ["export class Alignment {\r\n  constructor(x = 0, y = 0) {\r\n    this.x = x;\r\n    this.y = y;\r\n    Object.freeze(this); // Immutable like Flutter\r\n  }\r\n\r\n  // --- Flutter-style Static Getters ---\r\n  static get topLeft() { return new Alignment(-1, -1); }\r\n  static get topCenter() { return new Alignment(0, -1); }\r\n  static get topRight() { return new Alignment(1, -1); }\r\n  static get centerLeft() { return new Alignment(-1, 0); }\r\n  static get center() { return new Alignment(0, 0); }\r\n  static get centerRight() { return new Alignment(1, 0); }\r\n  static get bottomLeft() { return new Alignment(-1, 1); }\r\n  static get bottomCenter() { return new Alignment(0, 1); }\r\n  static get bottomRight() { return new Alignment(1, 1); }\r\n\r\n  // --- String-based Constants (CSS/JS) ---\r\n  static topLeftStr = 'top-left';\r\n  static topCenterStr = 'top-center';\r\n  static topRightStr = 'top-right';\r\n  static centerLeftStr = 'center-left';\r\n  static centerStr = 'center';\r\n  static centerRightStr = 'center-right';\r\n  static bottomLeftStr = 'bottom-left';\r\n  static bottomCenterStr = 'bottom-center';\r\n  static bottomRightStr = 'bottom-right';\r\n\r\n  // --- Convert String \u2192 Alignment Instance ---\r\n  static fromString(str) {\r\n    const map = {\r\n      'top-left': Alignment.topLeft,\r\n      'top-center': Alignment.topCenter,\r\n      'top-right': Alignment.topRight,\r\n      'center-left': Alignment.centerLeft,\r\n      'center': Alignment.center,\r\n      'center-right': Alignment.centerRight,\r\n      'bottom-left': Alignment.bottomLeft,\r\n      'bottom-center': Alignment.bottomCenter,\r\n      'bottom-right': Alignment.bottomRight,\r\n    };\r\n    const result = map[str];\r\n    if (!result) throw new Error(`Invalid alignment string: \"${str}\"`);\r\n    return result;\r\n  }\r\n\r\n  // --- Convert Alignment \u2192 String Shortcut ---\r\n  toString() {\r\n    const key = `${this.x},${this.y}`;\r\n    const map = {\r\n      '-1,-1': 'top-left',\r\n      '0,-1': 'top-center',\r\n      '1,-1': 'top-right',\r\n      '-1,0': 'center-left',\r\n      '0,0': 'center',\r\n      '1,0': 'center-right',\r\n      '-1,1': 'bottom-left',\r\n      '0,1': 'bottom-center',\r\n      '1,1': 'bottom-right',\r\n    };\r\n    return map[key] || `Alignment(${this.x}, ${this.y})`;\r\n  }\r\n\r\n  // --- CSS: Flexbox / Grid (align-items + justify-items) ---\r\n  toCSSFlex() {\r\n    const xMap = { '-1': 'flex-start', '0': 'center', '1': 'flex-end' };\r\n    const yMap = { '-1': 'flex-start', '0': 'center', '1': 'flex-end' };\r\n    return `${xMap[this.x]} ${yMap[this.y]}`; // e.g., \"flex-end flex-end\"\r\n  }\r\n\r\n  // --- CSS: object-position (for <img>, <video>) ---\r\n  toCSSObjectPosition() {\r\n    const xMap = { '-1': 'left', '0': 'center', '1': 'right' };\r\n    const yMap = { '-1': 'top', '0': 'center', '1': 'bottom' };\r\n    return `${xMap[this.x]} ${yMap[this.y]}`;\r\n  }\r\n\r\n  // --- CSS: background-position ---\r\n  toCSSBackground() {\r\n    const xMap = { '-1': '0%', '0': '50%', '1': '100%' };\r\n    const yMap = { '-1': '0%', '0': '50%', '1': '100%' };\r\n    return `${xMap[this.x]} ${yMap[this.y]}`;\r\n  }\r\n\r\n  // --- DOM: Position absolute child inside container ---\r\n  positionElement(childEl, containerEl) {\r\n    const crect = containerEl.getBoundingClientRect();\r\n    const erect = childEl.getBoundingClientRect();\r\n\r\n    const left = (crect.width - erect.width) * (this.x + 1) / 2;\r\n    const top = (crect.height - erect.height) * (this.y + 1) / 2;\r\n\r\n    childEl.style.position = 'absolute';\r\n    childEl.style.left = `${left}px`;\r\n    childEl.style.top = `${top}px`;\r\n\r\n    return { left, top };\r\n  }\r\n\r\n  // --- Flutter-style: Linear Interpolation ---\r\n  static lerp(a, b, t) {\r\n    if (!(a instanceof Alignment) || !(b instanceof Alignment)) return a;\r\n    return new Alignment(\r\n      a.x + (b.x - a.x) * t,\r\n      a.y + (b.y - a.y) * t\r\n    );\r\n  }\r\n\r\n  // --- Equality ---\r\n  equals(other) {\r\n    return other instanceof Alignment && this.x === other.x && this.y === other.y;\r\n  }\r\n}"],
-  "mappings": "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",
-  "names": ["_Alignment", "x", "y", "str", "result", "key", "xMap", "yMap", "childEl", "containerEl", "crect", "erect", "left", "top", "a", "b", "t", "other", "__publicField", "Alignment"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/alignment_directional.js b/packages/flutterjs_engine/package/material/dist/utils/property/alignment_directional.js
deleted file mode 100644
index d2ea0deb..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/alignment_directional.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const t=Object.freeze({topStart:"topStart",topCenter:"topCenter",topEnd:"topEnd",centerStart:"centerStart",center:"center",centerEnd:"centerEnd",bottomStart:"bottomStart",bottomCenter:"bottomCenter",bottomEnd:"bottomEnd"});export{t as AlignmentDirectional};
-//# sourceMappingURL=alignment_directional.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/alignment_directional.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/alignment_directional.js.map
deleted file mode 100644
index 79ccbf12..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/alignment_directional.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/alignment_directional.js"],
-  "sourcesContent": ["/**\r\n * AlignmentDirectional - Directional alignment using start/end instead of left/right\r\n * Respects text direction (LTR/RTL)\r\n */\r\nconst AlignmentDirectional = Object.freeze({\r\n  topStart: 'topStart',\r\n  topCenter: 'topCenter',\r\n  topEnd: 'topEnd',\r\n  centerStart: 'centerStart',\r\n  center: 'center',\r\n  centerEnd: 'centerEnd',\r\n  bottomStart: 'bottomStart',\r\n  bottomCenter: 'bottomCenter',\r\n  bottomEnd: 'bottomEnd'\r\n});\r\n\r\nexport { AlignmentDirectional };\r\n"],
-  "mappings": "AAIA,MAAMA,EAAuB,OAAO,OAAO,CACzC,SAAU,WACV,UAAW,YACX,OAAQ,SACR,YAAa,cACb,OAAQ,SACR,UAAW,YACX,YAAa,cACb,aAAc,eACd,UAAW,WACb,CAAC",
-  "names": ["AlignmentDirectional"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/axis.js b/packages/flutterjs_engine/package/material/dist/utils/property/axis.js
deleted file mode 100644
index 576ff0f7..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/axis.js
+++ /dev/null
@@ -1,2 +0,0 @@
-var o=Object.defineProperty;var r=(a,t,c)=>t in a?o(a,t,{enumerable:!0,configurable:!0,writable:!0,value:c}):a[t]=c;var i=(a,t,c)=>(r(a,typeof t!="symbol"?t+"":t,c),c);class l{}i(l,"horizontal","horizontal"),i(l,"vertical","vertical");export{l as Axis};
-//# sourceMappingURL=axis.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/axis.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/axis.js.map
deleted file mode 100644
index 85def5ec..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/axis.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/axis.js"],
-  "sourcesContent": ["export class Axis {\r\n  static horizontal = 'horizontal';\r\n  static vertical = 'vertical';\r\n}"],
-  "mappings": "wKAAO,MAAMA,CAAK,CAGlB,CAFEC,EADWD,EACJ,aAAa,cACpBC,EAFWD,EAEJ,WAAW",
-  "names": ["Axis", "__publicField"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/axis_direction.js b/packages/flutterjs_engine/package/material/dist/utils/property/axis_direction.js
deleted file mode 100644
index dbd2acb4..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/axis_direction.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const e=Object.freeze({right:"right",left:"left",down:"down",up:"up"});export{e as AxisDirection};
-//# sourceMappingURL=axis_direction.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/axis_direction.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/axis_direction.js.map
deleted file mode 100644
index f42b0947..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/axis_direction.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/axis_direction.js"],
-  "sourcesContent": ["/**\r\n * AxisDirection - Direction along an axis\r\n */\r\nconst AxisDirection = Object.freeze({\r\n  // Positive X direction (left to right)\r\n  right: 'right',\r\n\r\n  // Negative X direction (right to left)\r\n  left: 'left',\r\n\r\n  // Positive Y direction (top to bottom)\r\n  down: 'down',\r\n\r\n  // Negative Y direction (bottom to top)\r\n  up: 'up'\r\n});\r\nexport { AxisDirection };"],
-  "mappings": "AAGA,MAAMA,EAAgB,OAAO,OAAO,CAElC,MAAO,QAGP,KAAM,OAGN,KAAM,OAGN,GAAI,IACN,CAAC",
-  "names": ["AxisDirection"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/blend_mode.js b/packages/flutterjs_engine/package/material/dist/utils/property/blend_mode.js
deleted file mode 100644
index f5d173c8..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/blend_mode.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const e=Object.freeze({normal:"normal",multiply:"multiply",screen:"screen",overlay:"overlay",darken:"darken",lighten:"lighten",colorDodge:"colorDodge",colorBurn:"colorBurn",hardLight:"hardLight",softLight:"softLight",difference:"difference",exclusion:"exclusion",hue:"hue",saturation:"saturation",color:"color",luminosity:"luminosity"});export{e as BlendMode};
-//# sourceMappingURL=blend_mode.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/blend_mode.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/blend_mode.js.map
deleted file mode 100644
index 7d4b1476..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/blend_mode.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/blend_mode.js"],
-  "sourcesContent": ["/**\r\n * BlendMode - How to blend graphics\r\n */\r\nconst BlendMode = Object.freeze({\r\n  normal: 'normal',\r\n  multiply: 'multiply',\r\n  screen: 'screen',\r\n  overlay: 'overlay',\r\n  darken: 'darken',\r\n  lighten: 'lighten',\r\n  colorDodge: 'colorDodge',\r\n  colorBurn: 'colorBurn',\r\n  hardLight: 'hardLight',\r\n  softLight: 'softLight',\r\n  difference: 'difference',\r\n  exclusion: 'exclusion',\r\n  hue: 'hue',\r\n  saturation: 'saturation',\r\n  color: 'color',\r\n  luminosity: 'luminosity'\r\n});\r\nexport { BlendMode };"],
-  "mappings": "AAGA,MAAMA,EAAY,OAAO,OAAO,CAC9B,OAAQ,SACR,SAAU,WACV,OAAQ,SACR,QAAS,UACT,OAAQ,SACR,QAAS,UACT,WAAY,aACZ,UAAW,YACX,UAAW,YACX,UAAW,YACX,WAAY,aACZ,UAAW,YACX,IAAK,MACL,WAAY,aACZ,MAAO,QACP,WAAY,YACd,CAAC",
-  "names": ["BlendMode"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/border_style.js b/packages/flutterjs_engine/package/material/dist/utils/property/border_style.js
deleted file mode 100644
index 1f3e5755..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/border_style.js
+++ /dev/null
@@ -1,2 +0,0 @@
-var c=Object.defineProperty;var o=(t,s,d)=>s in t?c(t,s,{enumerable:!0,configurable:!0,writable:!0,value:d}):t[s]=d;var a=(t,s,d)=>(o(t,typeof s!="symbol"?s+"":s,d),d);class i{}a(i,"solid","solid"),a(i,"dashed","dashed"),a(i,"dotted","dotted"),a(i,"double","double"),a(i,"none","none");export{i as BorderStyle};
-//# sourceMappingURL=border_style.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/border_style.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/border_style.js.map
deleted file mode 100644
index 69e8d29e..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/border_style.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/border_style.js"],
-  "sourcesContent": ["export class BorderStyle {\r\n  static solid = 'solid';\r\n  static dashed = 'dashed';\r\n  static dotted = 'dotted';\r\n  static double = 'double';\r\n  static none = 'none';\r\n}"],
-  "mappings": "wKAAO,MAAMA,CAAY,CAMzB,CALEC,EADWD,EACJ,QAAQ,SACfC,EAFWD,EAEJ,SAAS,UAChBC,EAHWD,EAGJ,SAAS,UAChBC,EAJWD,EAIJ,SAAS,UAChBC,EALWD,EAKJ,OAAO",
-  "names": ["BorderStyle", "__publicField"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/box_fit.js b/packages/flutterjs_engine/package/material/dist/utils/property/box_fit.js
deleted file mode 100644
index bf7d4f59..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/box_fit.js
+++ /dev/null
@@ -1,2 +0,0 @@
-var n=Object.defineProperty;var e=(a,c,s)=>c in a?n(a,c,{enumerable:!0,configurable:!0,writable:!0,value:s}):a[c]=s;var t=(a,c,s)=>(e(a,typeof c!="symbol"?c+"":c,s),s);class i{}t(i,"fill","fill"),t(i,"contain","contain"),t(i,"cover","cover"),t(i,"fitWidth","fitWidth"),t(i,"fitHeight","fitHeight"),t(i,"none","none"),t(i,"scaleDown","scale-down");export{i as BoxFit};
-//# sourceMappingURL=box_fit.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/box_fit.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/box_fit.js.map
deleted file mode 100644
index 13868f90..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/box_fit.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/box_fit.js"],
-  "sourcesContent": ["export class BoxFit {\r\n  static fill = 'fill';\r\n  static contain = 'contain';\r\n  static cover = 'cover';\r\n  static fitWidth = 'fitWidth';\r\n  static fitHeight = 'fitHeight';\r\n  static none = 'none';\r\n  static scaleDown = 'scale-down';\r\n}"],
-  "mappings": "wKAAO,MAAMA,CAAO,CAQpB,CAPEC,EADWD,EACJ,OAAO,QACdC,EAFWD,EAEJ,UAAU,WACjBC,EAHWD,EAGJ,QAAQ,SACfC,EAJWD,EAIJ,WAAW,YAClBC,EALWD,EAKJ,YAAY,aACnBC,EANWD,EAMJ,OAAO,QACdC,EAPWD,EAOJ,YAAY",
-  "names": ["BoxFit", "__publicField"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/box_shape.js b/packages/flutterjs_engine/package/material/dist/utils/property/box_shape.js
deleted file mode 100644
index 1951559d..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/box_shape.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const e=Object.freeze({rectangle:"rectangle",circle:"circle"});export{e as BoxShape};
-//# sourceMappingURL=box_shape.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/box_shape.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/box_shape.js.map
deleted file mode 100644
index 8989521a..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/box_shape.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/box_shape.js"],
-  "sourcesContent": ["/**\r\n * BoxShape - Shape for decoration\r\n */\r\nconst BoxShape = Object.freeze({\r\n  rectangle: 'rectangle',\r\n  circle: 'circle'\r\n});\r\n\r\nexport { BoxShape };"],
-  "mappings": "AAGA,MAAMA,EAAW,OAAO,OAAO,CAC7B,UAAW,YACX,OAAQ,QACV,CAAC",
-  "names": ["BoxShape"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/clip.js b/packages/flutterjs_engine/package/material/dist/utils/property/clip.js
deleted file mode 100644
index 96ca4d81..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/clip.js
+++ /dev/null
@@ -1,2 +0,0 @@
-var n=Object.defineProperty;var c=(t,a,i)=>a in t?n(t,a,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[a]=i;var e=(t,a,i)=>(c(t,typeof a!="symbol"?a+"":a,i),i);class s{}e(s,"none","none"),e(s,"hardEdge","hard-edge"),e(s,"antiAlias","antiAlias"),e(s,"antiAliasWithSaveLayer","antiAliasWithSaveLayer");export{s as Clip};
-//# sourceMappingURL=clip.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/clip.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/clip.js.map
deleted file mode 100644
index f38a884b..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/clip.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/clip.js"],
-  "sourcesContent": ["export class Clip {\r\n  static none = 'none';\r\n  static hardEdge = 'hard-edge';\r\n  static antiAlias = 'antiAlias';\r\n  static antiAliasWithSaveLayer = 'antiAliasWithSaveLayer';\r\n}"],
-  "mappings": "wKAAO,MAAMA,CAAK,CAKlB,CAJEC,EADWD,EACJ,OAAO,QACdC,EAFWD,EAEJ,WAAW,aAClBC,EAHWD,EAGJ,YAAY,aACnBC,EAJWD,EAIJ,yBAAyB",
-  "names": ["Clip", "__publicField"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/cross_axis_alignment.js b/packages/flutterjs_engine/package/material/dist/utils/property/cross_axis_alignment.js
deleted file mode 100644
index ab44e496..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/cross_axis_alignment.js
+++ /dev/null
@@ -1,2 +0,0 @@
-var b=Object.defineProperty;var d=(e,t,c)=>t in e?b(e,t,{enumerable:!0,configurable:!0,writable:!0,value:c}):e[t]=c;var a=(e,t,c)=>(d(e,typeof t!="symbol"?t+"":t,c),c);class r{}a(r,"start","flex-start"),a(r,"end","flex-end"),a(r,"center","center"),a(r,"stretch","stretch"),a(r,"baseline","baseline");export{r as CrossAxisAlignment};
-//# sourceMappingURL=cross_axis_alignment.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/cross_axis_alignment.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/cross_axis_alignment.js.map
deleted file mode 100644
index 8e0c13fc..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/cross_axis_alignment.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/cross_axis_alignment.js"],
-  "sourcesContent": ["export class CrossAxisAlignment {\r\n  static start = 'flex-start';\r\n  static end = 'flex-end';\r\n  static center = 'center';\r\n  static stretch = 'stretch';\r\n  static baseline = 'baseline';\r\n}"],
-  "mappings": "wKAAO,MAAMA,CAAmB,CAMhC,CALEC,EADWD,EACJ,QAAQ,cACfC,EAFWD,EAEJ,MAAM,YACbC,EAHWD,EAGJ,SAAS,UAChBC,EAJWD,EAIJ,UAAU,WACjBC,EALWD,EAKJ,WAAW",
-  "names": ["CrossAxisAlignment", "__publicField"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/decoration_position.js b/packages/flutterjs_engine/package/material/dist/utils/property/decoration_position.js
deleted file mode 100644
index 988ac533..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/decoration_position.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const o=Object.freeze({background:"background",foreground:"foreground"});export{o as DecorationPosition};
-//# sourceMappingURL=decoration_position.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/decoration_position.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/decoration_position.js.map
deleted file mode 100644
index 98438087..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/decoration_position.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/decoration_position.js"],
-  "sourcesContent": ["\r\n/**\r\n * DecorationPosition - Where to paint decorations (before or after child)\r\n */\r\nconst DecorationPosition = Object.freeze({\r\n  background: 'background',  // Paint behind child\r\n  foreground: 'foreground'   // Paint in front of child\r\n});\r\n\r\nexport { DecorationPosition };"],
-  "mappings": "AAIA,MAAMA,EAAqB,OAAO,OAAO,CACvC,WAAY,aACZ,WAAY,YACd,CAAC",
-  "names": ["DecorationPosition"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/filter_quality.js b/packages/flutterjs_engine/package/material/dist/utils/property/filter_quality.js
deleted file mode 100644
index 43c7578e..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/filter_quality.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const e=Object.freeze({none:"none",low:"low",medium:"medium",high:"high"});export{e as FilterQuality};
-//# sourceMappingURL=filter_quality.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/filter_quality.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/filter_quality.js.map
deleted file mode 100644
index 392cebd5..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/filter_quality.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/filter_quality.js"],
-  "sourcesContent": ["/**\r\n * FilterQuality - Quality of image filters\r\n */\r\nconst FilterQuality = Object.freeze({\r\n  none: 'none',\r\n  low: 'low',\r\n  medium: 'medium',\r\n  high: 'high'\r\n});\r\n\r\nexport { FilterQuality };"],
-  "mappings": "AAGA,MAAMA,EAAgB,OAAO,OAAO,CAClC,KAAM,OACN,IAAK,MACL,OAAQ,SACR,KAAM,MACR,CAAC",
-  "names": ["FilterQuality"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/flex_fit.js b/packages/flutterjs_engine/package/material/dist/utils/property/flex_fit.js
deleted file mode 100644
index 56f3b36e..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/flex_fit.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const e=Object.freeze({loose:"loose",tight:"tight"});export{e as FlexFit};
-//# sourceMappingURL=flex_fit.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/flex_fit.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/flex_fit.js.map
deleted file mode 100644
index 189c7513..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/flex_fit.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/flex_fit.js"],
-  "sourcesContent": ["/**\r\n * FlexFit - How children fill the available space\r\n * Used with Flexible widget\r\n */\r\nconst FlexFit = Object.freeze({\r\n  // Child is allowed to be smaller than the flex space\r\n  loose: 'loose',\r\n\r\n  // Child is forced to fill the flex space\r\n  tight: 'tight'\r\n});\r\nexport { FlexFit };"],
-  "mappings": "AAIA,MAAMA,EAAU,OAAO,OAAO,CAE5B,MAAO,QAGP,MAAO,OACT,CAAC",
-  "names": ["FlexFit"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/font_style.js b/packages/flutterjs_engine/package/material/dist/utils/property/font_style.js
deleted file mode 100644
index 52e9f207..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/font_style.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const l=Object.freeze({normal:"normal",italic:"italic",bold:"bold"});export{l as FontStyle};
-//# sourceMappingURL=font_style.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/font_style.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/font_style.js.map
deleted file mode 100644
index 21cfb253..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/font_style.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/font_style.js"],
-  "sourcesContent": ["\r\n/**\r\n * FontStyle - Style of text (italic or normal)\r\n */\r\nconst FontStyle = Object.freeze({\r\n  normal: 'normal',\r\n  italic: 'italic',\r\n  bold: 'bold'\r\n});\r\nexport { FontStyle };"],
-  "mappings": "AAIA,MAAMA,EAAY,OAAO,OAAO,CAC9B,OAAQ,SACR,OAAQ,SACR,KAAM,MACR,CAAC",
-  "names": ["FontStyle"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/font_weight.js b/packages/flutterjs_engine/package/material/dist/utils/property/font_weight.js
deleted file mode 100644
index 82a9b7a5..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/font_weight.js
+++ /dev/null
@@ -1,2 +0,0 @@
-var l=Object.defineProperty;var i=(w,c,t)=>c in w?l(w,c,{enumerable:!0,configurable:!0,writable:!0,value:t}):w[c]=t;var a=(w,c,t)=>(i(w,typeof c!="symbol"?c+"":c,t),t);class s{}a(s,"thin","100"),a(s,"extraLight","200"),a(s,"light","300"),a(s,"normal","400"),a(s,"medium","500"),a(s,"semiBold","600"),a(s,"bold","700"),a(s,"extraBold","800"),a(s,"black","900"),a(s,"w100","100"),a(s,"w200","200"),a(s,"w300","300"),a(s,"w400","400"),a(s,"w500","500"),a(s,"w600","600"),a(s,"w700","700"),a(s,"w800","800"),a(s,"w900","900");export{s as FontWeight};
-//# sourceMappingURL=font_weight.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/font_weight.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/font_weight.js.map
deleted file mode 100644
index a472d2fb..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/font_weight.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/font_weight.js"],
-  "sourcesContent": ["export class FontWeight {\r\n  static thin = '100';\r\n  static extraLight = '200';\r\n  static light = '300';\r\n  static normal = '400';\r\n  static medium = '500';\r\n  static semiBold = '600';\r\n  static bold = '700';\r\n  static extraBold = '800';\r\n  static black = '900';\r\n\r\n  static w100 = '100';\r\n  static w200 = '200';\r\n  static w300 = '300';\r\n  static w400 = '400';\r\n  static w500 = '500';\r\n  static w600 = '600';\r\n  static w700 = '700';\r\n  static w800 = '800';\r\n  static w900 = '900';\r\n}"],
-  "mappings": "wKAAO,MAAMA,CAAW,CAoBxB,CAnBEC,EADWD,EACJ,OAAO,OACdC,EAFWD,EAEJ,aAAa,OACpBC,EAHWD,EAGJ,QAAQ,OACfC,EAJWD,EAIJ,SAAS,OAChBC,EALWD,EAKJ,SAAS,OAChBC,EANWD,EAMJ,WAAW,OAClBC,EAPWD,EAOJ,OAAO,OACdC,EARWD,EAQJ,YAAY,OACnBC,EATWD,EASJ,QAAQ,OAEfC,EAXWD,EAWJ,OAAO,OACdC,EAZWD,EAYJ,OAAO,OACdC,EAbWD,EAaJ,OAAO,OACdC,EAdWD,EAcJ,OAAO,OACdC,EAfWD,EAeJ,OAAO,OACdC,EAhBWD,EAgBJ,OAAO,OACdC,EAjBWD,EAiBJ,OAAO,OACdC,EAlBWD,EAkBJ,OAAO,OACdC,EAnBWD,EAmBJ,OAAO",
-  "names": ["FontWeight", "__publicField"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/horizontal_direction.js b/packages/flutterjs_engine/package/material/dist/utils/property/horizontal_direction.js
deleted file mode 100644
index 5220849b..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/horizontal_direction.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const t=Object.freeze({ltr:"ltr",rtl:"rtl"});export{t as HorizontalDirection};
-//# sourceMappingURL=horizontal_direction.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/horizontal_direction.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/horizontal_direction.js.map
deleted file mode 100644
index 311a9012..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/horizontal_direction.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/horizontal_direction.js"],
-  "sourcesContent": ["/**\r\n * HorizontalDirection - Direction of horizontal axis\r\n * Controls the order in which children are laid out horizontally\r\n */\r\nconst HorizontalDirection = Object.freeze({\r\n  // Children are laid out from left to right (default, LTR)\r\n  ltr: 'ltr',\r\n\r\n  // Children are laid out from right to left (RTL)\r\n  rtl: 'rtl'\r\n});\r\nexport { HorizontalDirection };"],
-  "mappings": "AAIA,MAAMA,EAAsB,OAAO,OAAO,CAExC,IAAK,MAGL,IAAK,KACP,CAAC",
-  "names": ["HorizontalDirection"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/keyboard_type.js b/packages/flutterjs_engine/package/material/dist/utils/property/keyboard_type.js
deleted file mode 100644
index 944004d3..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/keyboard_type.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const e=Object.freeze({text:"text",asciiCapable:"asciiCapable",numbersAndPunctuation:"numbersAndPunctuation",URL:"URL",numberPad:"numberPad",phonePad:"phonePad",namePhonePad:"namePhonePad",emailAddress:"emailAddress",decimalPad:"decimalPad",twitter:"twitter",webSearch:"webSearch",asciiCapableNumberPad:"asciiCapableNumberPad"});export{e as KeyboardType};
-//# sourceMappingURL=keyboard_type.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/keyboard_type.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/keyboard_type.js.map
deleted file mode 100644
index f95692d4..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/keyboard_type.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/keyboard_type.js"],
-  "sourcesContent": ["\r\n/**\r\n * KeyboardType - Physical keyboard appearance\r\n */\r\nconst KeyboardType = Object.freeze({\r\n  text: 'text',\r\n  asciiCapable: 'asciiCapable',\r\n  numbersAndPunctuation: 'numbersAndPunctuation',\r\n  URL: 'URL',\r\n  numberPad: 'numberPad',\r\n  phonePad: 'phonePad',\r\n  namePhonePad: 'namePhonePad',\r\n  emailAddress: 'emailAddress',\r\n  decimalPad: 'decimalPad',\r\n  twitter: 'twitter',\r\n  webSearch: 'webSearch',\r\n  asciiCapableNumberPad: 'asciiCapableNumberPad'\r\n});\r\nexport { KeyboardType };"],
-  "mappings": "AAIA,MAAMA,EAAe,OAAO,OAAO,CACjC,KAAM,OACN,aAAc,eACd,sBAAuB,wBACvB,IAAK,MACL,UAAW,YACX,SAAU,WACV,aAAc,eACd,aAAc,eACd,WAAY,aACZ,QAAS,UACT,UAAW,YACX,sBAAuB,uBACzB,CAAC",
-  "names": ["KeyboardType"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/main_axis_alignment.js b/packages/flutterjs_engine/package/material/dist/utils/property/main_axis_alignment.js
deleted file mode 100644
index ded8e248..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/main_axis_alignment.js
+++ /dev/null
@@ -1,2 +0,0 @@
-var p=Object.defineProperty;var r=(c,e,s)=>e in c?p(c,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):c[e]=s;var t=(c,e,s)=>(r(c,typeof e!="symbol"?e+"":e,s),s);class a{}t(a,"start","flex-start"),t(a,"end","flex-end"),t(a,"center","center"),t(a,"spaceBetween","space-between"),t(a,"spaceAround","space-around"),t(a,"spaceEvenly","space-evenly");export{a as MainAxisAlignment};
-//# sourceMappingURL=main_axis_alignment.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/main_axis_alignment.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/main_axis_alignment.js.map
deleted file mode 100644
index 84065cf4..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/main_axis_alignment.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/main_axis_alignment.js"],
-  "sourcesContent": ["export class MainAxisAlignment {\r\n  static start = 'flex-start';\r\n  static end = 'flex-end';\r\n  static center = 'center';\r\n  static spaceBetween = 'space-between';\r\n  static spaceAround = 'space-around';\r\n  static spaceEvenly = 'space-evenly';\r\n}"],
-  "mappings": "wKAAO,MAAMA,CAAkB,CAO/B,CANEC,EADWD,EACJ,QAAQ,cACfC,EAFWD,EAEJ,MAAM,YACbC,EAHWD,EAGJ,SAAS,UAChBC,EAJWD,EAIJ,eAAe,iBACtBC,EALWD,EAKJ,cAAc,gBACrBC,EANWD,EAMJ,cAAc",
-  "names": ["MainAxisAlignment", "__publicField"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/main_axis_size.js b/packages/flutterjs_engine/package/material/dist/utils/property/main_axis_size.js
deleted file mode 100644
index 46ed0ee5..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/main_axis_size.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const e=Object.freeze({max:"max",min:"min"});export{e as MainAxisSize};
-//# sourceMappingURL=main_axis_size.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/main_axis_size.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/main_axis_size.js.map
deleted file mode 100644
index 54bba73d..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/main_axis_size.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/main_axis_size.js"],
-  "sourcesContent": ["/**\r\n * MainAxisSize - How much space should be occupied along the main axis\r\n */\r\nconst MainAxisSize = Object.freeze({\r\n  // As much space as possible\r\n  max: 'max',\r\n\r\n  // As little space as possible\r\n  min: 'min'\r\n});\r\nexport { MainAxisSize };"],
-  "mappings": "AAGA,MAAMA,EAAe,OAAO,OAAO,CAEjC,IAAK,MAGL,IAAK,KACP,CAAC",
-  "names": ["MainAxisSize"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/other.js b/packages/flutterjs_engine/package/material/dist/utils/property/other.js
deleted file mode 100644
index 82bf6bb4..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/other.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const e=Object.freeze({none:"none",elevation:"elevation",custom:"custom"}),t=Object.freeze({light:"light",dark:"dark"}),a=Object.freeze({canvas:"canvas",card:"card",circle:"circle",button:"button",transparency:"transparency"}),n=Object.freeze({idle:"idle",forward:"forward",reverse:"reverse"}),s=Object.freeze({bouncingScrollPhysics:"bouncingScrollPhysics",clampingScrollPhysics:"clampingScrollPhysics",neverScrollableScrollPhysics:"neverScrollableScrollPhysics"}),r=Object.freeze({down:"down",start:"start"}),o=Object.freeze({dismissed:"dismissed",forward:"forward",reverse:"reverse",completed:"completed"}),i=Object.freeze({linear:"linear",decelerate:"decelerate",fastLinearToSlowCurveEaseInToEaseOut:"fastLinearToSlowCurveEaseInToEaseOut",ease:"ease",easeIn:"easeIn",easeInToLinear:"easeInToLinear",easeInSine:"easeInSine",easeInQuad:"easeInQuad",easeInCubic:"easeInCubic",easeInQuart:"easeInQuart",easeInQuint:"easeInQuint",easeInExpo:"easeInExpo",easeInCirc:"easeInCirc",easeInBack:"easeInBack",easeOut:"easeOut",linearToEaseOut:"linearToEaseOut",easeOutSine:"easeOutSine",easeOutQuad:"easeOutQuad",easeOutCubic:"easeOutCubic",easeOutQuart:"easeOutQuart",easeOutQuint:"easeOutQuint",easeOutExpo:"easeOutExpo",easeOutCirc:"easeOutCirc",easeOutBack:"easeOutBack",easeInOut:"easeInOut",easeInOutSine:"easeInOutSine",easeInOutQuad:"easeInOutQuad",easeInOutCubic:"easeInOutCubic",easeInOutQuart:"easeInOutQuart",easeInOutQuint:"easeInOutQuint",easeInOutExpo:"easeInOutExpo",easeInOutCirc:"easeInOutCirc",easeInOutBack:"easeInOutBack",fastOutSlowIn:"fastOutSlowIn",slowMiddle:"slowMiddle",elasticIn:"elasticIn",elasticOut:"elasticOut",elasticInOut:"elasticInOut",bounceIn:"bounceIn",bounceOut:"bounceOut",bounceInOut:"bounceInOut"}),c=Object.freeze({material:"material",cupertino:"cupertino",fade:"fade"}),u=Object.freeze({fadeIn:"fadeIn",slideInFromLeft:"slideInFromLeft",slideInFromRight:"slideInFromRight",slideInFromTop:"slideInFromTop",slideInFromBottom:"slideInFromBottom",scale:"scale",rotate:"rotate"}),l=Object.freeze({under:"under",over:"over"}),O=Object.freeze({deferToChild:"deferToChild",absorb:"absorb",translucent:"translucent"}),d=Object.freeze({touch:"touch",mouse:"mouse",stylus:"stylus",invertedStylus:"invertedStylus",unknown:"unknown"}),I=Object.freeze({noRepeat:"noRepeat",repeat:"repeat",repeatX:"repeatX",repeatY:"repeatY"}),f=Object.freeze({fill:"fill",contain:"contain",cover:"cover",fitWidth:"fitWidth",fitHeight:"fitHeight",none:"none",scaleDown:"scaleDown"}),b=Object.freeze({loading:"loading",complete:"complete"}),S=Object.freeze({android:"android",fuchsia:"fuchsia",iOS:"iOS",linux:"linux",macOS:"macOS",windows:"windows",web:"web"}),p=Object.freeze({light:"light",dark:"dark",lightStatus:"lightStatus",darkStatus:"darkStatus"});export{o as AnimationStatus,f as BoxFit,t as Brightness,i as Curve,r as DragStartBehavior,O as HitTestBehavior,b as ImageChunkEvent,I as ImageRepeat,a as MaterialType,d as PointerDeviceKind,l as PopupMenuPosition,c as RouteType,n as ScrollDirection,s as ScrollPhysics,e as ShadowType,p as SystemUiOverlayStyle,S as TargetPlatform,u as TransitionType};
-//# sourceMappingURL=other.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/other.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/other.js.map
deleted file mode 100644
index 9b628e23..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/other.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/other.js"],
-  "sourcesContent": ["/**\r\n * Shadow - Shadow properties\r\n */\r\nconst ShadowType = Object.freeze({\r\n  none: 'none',\r\n  elevation: 'elevation',\r\n  custom: 'custom'\r\n});\r\n\r\n/**\r\n * Brightness - Light or dark theme\r\n */\r\nconst Brightness = Object.freeze({\r\n  light: 'light',\r\n  dark: 'dark'\r\n});\r\n\r\n/**\r\n * MaterialType - Material design surface types\r\n */\r\nconst MaterialType = Object.freeze({\r\n  canvas: 'canvas',\r\n  card: 'card',\r\n  circle: 'circle',\r\n  button: 'button',\r\n  transparency: 'transparency'\r\n});\r\n\r\n/**\r\n * ============================================================================\r\n * SCROLL & OVERFLOW ENUMS\r\n * ============================================================================\r\n */\r\n\r\n/**\r\n * ScrollDirection - Direction scrolling happens\r\n */\r\nconst ScrollDirection = Object.freeze({\r\n  idle: 'idle',\r\n  forward: 'forward',\r\n  reverse: 'reverse'\r\n});\r\n\r\n/**\r\n * ScrollPhysics - How scrolling behaves\r\n */\r\nconst ScrollPhysics = Object.freeze({\r\n  bouncingScrollPhysics: 'bouncingScrollPhysics',    // iOS style bounce\r\n  clampingScrollPhysics: 'clampingScrollPhysics',    // Android style\r\n  neverScrollableScrollPhysics: 'neverScrollableScrollPhysics'  // No scroll\r\n});\r\n\r\n/**\r\n * DragStartBehavior - When drag recognition starts\r\n */\r\nconst DragStartBehavior = Object.freeze({\r\n  down: 'down',       // Recognize at pointer down\r\n  start: 'start'      // Recognize at pointer move\r\n});\r\n\r\n/**\r\n * ============================================================================\r\n * ANIMATION & TRANSITION ENUMS\r\n * ============================================================================\r\n */\r\n\r\n/**\r\n * AnimationStatus - State of animation\r\n */\r\nconst AnimationStatus = Object.freeze({\r\n  dismissed: 'dismissed',\r\n  forward: 'forward',\r\n  reverse: 'reverse',\r\n  completed: 'completed'\r\n});\r\n\r\n/**\r\n * Curve - Animation timing curves\r\n */\r\nconst Curve = Object.freeze({\r\n  linear: 'linear',\r\n  decelerate: 'decelerate',\r\n  fastLinearToSlowCurveEaseInToEaseOut: 'fastLinearToSlowCurveEaseInToEaseOut',\r\n  ease: 'ease',\r\n  easeIn: 'easeIn',\r\n  easeInToLinear: 'easeInToLinear',\r\n  easeInSine: 'easeInSine',\r\n  easeInQuad: 'easeInQuad',\r\n  easeInCubic: 'easeInCubic',\r\n  easeInQuart: 'easeInQuart',\r\n  easeInQuint: 'easeInQuint',\r\n  easeInExpo: 'easeInExpo',\r\n  easeInCirc: 'easeInCirc',\r\n  easeInBack: 'easeInBack',\r\n  easeOut: 'easeOut',\r\n  linearToEaseOut: 'linearToEaseOut',\r\n  easeOutSine: 'easeOutSine',\r\n  easeOutQuad: 'easeOutQuad',\r\n  easeOutCubic: 'easeOutCubic',\r\n  easeOutQuart: 'easeOutQuart',\r\n  easeOutQuint: 'easeOutQuint',\r\n  easeOutExpo: 'easeOutExpo',\r\n  easeOutCirc: 'easeOutCirc',\r\n  easeOutBack: 'easeOutBack',\r\n  easeInOut: 'easeInOut',\r\n  easeInOutSine: 'easeInOutSine',\r\n  easeInOutQuad: 'easeInOutQuad',\r\n  easeInOutCubic: 'easeInOutCubic',\r\n  easeInOutQuart: 'easeInOutQuart',\r\n  easeInOutQuint: 'easeInOutQuint',\r\n  easeInOutExpo: 'easeInOutExpo',\r\n  easeInOutCirc: 'easeInOutCirc',\r\n  easeInOutBack: 'easeInOutBack',\r\n  fastOutSlowIn: 'fastOutSlowIn',\r\n  slowMiddle: 'slowMiddle',\r\n  elasticIn: 'elasticIn',\r\n  elasticOut: 'elasticOut',\r\n  elasticInOut: 'elasticInOut',\r\n  bounceIn: 'bounceIn',\r\n  bounceOut: 'bounceOut',\r\n  bounceInOut: 'bounceInOut'\r\n});\r\n\r\n/**\r\n * ============================================================================\r\n * DIALOG & NAVIGATION ENUMS\r\n * ============================================================================\r\n */\r\n\r\n/**\r\n * RouteType - Type of route navigation\r\n */\r\nconst RouteType = Object.freeze({\r\n  material: 'material',\r\n  cupertino: 'cupertino',\r\n  fade: 'fade'\r\n});\r\n\r\n/**\r\n * TransitionType - How routes transition\r\n */\r\nconst TransitionType = Object.freeze({\r\n  fadeIn: 'fadeIn',\r\n  slideInFromLeft: 'slideInFromLeft',\r\n  slideInFromRight: 'slideInFromRight',\r\n  slideInFromTop: 'slideInFromTop',\r\n  slideInFromBottom: 'slideInFromBottom',\r\n  scale: 'scale',\r\n  rotate: 'rotate'\r\n});\r\n\r\n/**\r\n * PopupMenuPosition - Where popup menu appears\r\n */\r\nconst PopupMenuPosition = Object.freeze({\r\n  under: 'under',\r\n  over: 'over'\r\n});\r\n\r\n/**\r\n * ============================================================================\r\n * GESTURE & HIT TEST ENUMS\r\n * ============================================================================\r\n */\r\n\r\n/**\r\n * HitTestBehavior - How a widget responds to hit tests\r\n */\r\nconst HitTestBehavior = Object.freeze({\r\n  deferToChild: 'deferToChild',     // Only hit if child hit\r\n  absorb: 'absorb',                  // Always hit, absorb event\r\n  translucent: 'translucent'         // Hit but pass through to children\r\n});\r\n\r\n/**\r\n * PointerDeviceKind - Type of pointer device\r\n */\r\nconst PointerDeviceKind = Object.freeze({\r\n  touch: 'touch',\r\n  mouse: 'mouse',\r\n  stylus: 'stylus',\r\n  invertedStylus: 'invertedStylus',\r\n  unknown: 'unknown'\r\n});\r\n\r\n/**\r\n * ============================================================================\r\n * IMAGE & ASSET ENUMS\r\n * ============================================================================\r\n */\r\n\r\n/**\r\n * ImageRepeat - How to repeat an image\r\n */\r\nconst ImageRepeat = Object.freeze({\r\n  noRepeat: 'noRepeat',\r\n  repeat: 'repeat',\r\n  repeatX: 'repeatX',\r\n  repeatY: 'repeatY'\r\n});\r\n\r\n/**\r\n * BoxFit - How to fit image into container\r\n */\r\nconst BoxFit = Object.freeze({\r\n  fill: 'fill',             // Stretch to fill (distort)\r\n  contain: 'contain',       // Fit entire image (letterbox)\r\n  cover: 'cover',           // Fill container (crop)\r\n  fitWidth: 'fitWidth',     // Match width, crop height\r\n  fitHeight: 'fitHeight',   // Match height, crop width\r\n  none: 'none',             // No scaling\r\n  scaleDown: 'scaleDown'    // Downscale only, don't upscale\r\n});\r\n\r\n/**\r\n * ImageChunkEvent - Progress of image loading\r\n */\r\nconst ImageChunkEvent = Object.freeze({\r\n  loading: 'loading',\r\n  complete: 'complete'\r\n});\r\n\r\n/**\r\n * ============================================================================\r\n * PLATFORM ENUMS\r\n * ============================================================================\r\n */\r\n\r\n/**\r\n * TargetPlatform - Current platform\r\n */\r\nconst TargetPlatform = Object.freeze({\r\n  android: 'android',\r\n  fuchsia: 'fuchsia',\r\n  iOS: 'iOS',\r\n  linux: 'linux',\r\n  macOS: 'macOS',\r\n  windows: 'windows',\r\n  web: 'web'\r\n});\r\n\r\n/**\r\n * ============================================================================\r\n * STATUS BAR ENUMS\r\n * ============================================================================\r\n */\r\n\r\n/**\r\n * SystemUiOverlayStyle - Status bar and navigation bar styling\r\n */\r\nconst SystemUiOverlayStyle = Object.freeze({\r\n  light: 'light',\r\n  dark: 'dark',\r\n  lightStatus: 'lightStatus',\r\n  darkStatus: 'darkStatus'\r\n});\r\n\r\nexport {\r\n  ShadowType,\r\n  Brightness,\r\n  MaterialType,\r\n  ScrollDirection,\r\n  ScrollPhysics,  \r\n  DragStartBehavior,\r\n  AnimationStatus,\r\n  Curve,\r\n  RouteType,\r\n  TransitionType,\r\n  PopupMenuPosition,\r\n  HitTestBehavior,\r\n  PointerDeviceKind,\r\n  ImageRepeat,\r\n  BoxFit,\r\n  ImageChunkEvent,\r\n  TargetPlatform,\r\n  SystemUiOverlayStyle\r\n};  "],
-  "mappings": "AAGA,MAAMA,EAAa,OAAO,OAAO,CAC/B,KAAM,OACN,UAAW,YACX,OAAQ,QACV,CAAC,EAKKC,EAAa,OAAO,OAAO,CAC/B,MAAO,QACP,KAAM,MACR,CAAC,EAKKC,EAAe,OAAO,OAAO,CACjC,OAAQ,SACR,KAAM,OACN,OAAQ,SACR,OAAQ,SACR,aAAc,cAChB,CAAC,EAWKC,EAAkB,OAAO,OAAO,CACpC,KAAM,OACN,QAAS,UACT,QAAS,SACX,CAAC,EAKKC,EAAgB,OAAO,OAAO,CAClC,sBAAuB,wBACvB,sBAAuB,wBACvB,6BAA8B,8BAChC,CAAC,EAKKC,EAAoB,OAAO,OAAO,CACtC,KAAM,OACN,MAAO,OACT,CAAC,EAWKC,EAAkB,OAAO,OAAO,CACpC,UAAW,YACX,QAAS,UACT,QAAS,UACT,UAAW,WACb,CAAC,EAKKC,EAAQ,OAAO,OAAO,CAC1B,OAAQ,SACR,WAAY,aACZ,qCAAsC,uCACtC,KAAM,OACN,OAAQ,SACR,eAAgB,iBAChB,WAAY,aACZ,WAAY,aACZ,YAAa,cACb,YAAa,cACb,YAAa,cACb,WAAY,aACZ,WAAY,aACZ,WAAY,aACZ,QAAS,UACT,gBAAiB,kBACjB,YAAa,cACb,YAAa,cACb,aAAc,eACd,aAAc,eACd,aAAc,eACd,YAAa,cACb,YAAa,cACb,YAAa,cACb,UAAW,YACX,cAAe,gBACf,cAAe,gBACf,eAAgB,iBAChB,eAAgB,iBAChB,eAAgB,iBAChB,cAAe,gBACf,cAAe,gBACf,cAAe,gBACf,cAAe,gBACf,WAAY,aACZ,UAAW,YACX,WAAY,aACZ,aAAc,eACd,SAAU,WACV,UAAW,YACX,YAAa,aACf,CAAC,EAWKC,EAAY,OAAO,OAAO,CAC9B,SAAU,WACV,UAAW,YACX,KAAM,MACR,CAAC,EAKKC,EAAiB,OAAO,OAAO,CACnC,OAAQ,SACR,gBAAiB,kBACjB,iBAAkB,mBAClB,eAAgB,iBAChB,kBAAmB,oBACnB,MAAO,QACP,OAAQ,QACV,CAAC,EAKKC,EAAoB,OAAO,OAAO,CACtC,MAAO,QACP,KAAM,MACR,CAAC,EAWKC,EAAkB,OAAO,OAAO,CACpC,aAAc,eACd,OAAQ,SACR,YAAa,aACf,CAAC,EAKKC,EAAoB,OAAO,OAAO,CACtC,MAAO,QACP,MAAO,QACP,OAAQ,SACR,eAAgB,iBAChB,QAAS,SACX,CAAC,EAWKC,EAAc,OAAO,OAAO,CAChC,SAAU,WACV,OAAQ,SACR,QAAS,UACT,QAAS,SACX,CAAC,EAKKC,EAAS,OAAO,OAAO,CAC3B,KAAM,OACN,QAAS,UACT,MAAO,QACP,SAAU,WACV,UAAW,YACX,KAAM,OACN,UAAW,WACb,CAAC,EAKKC,EAAkB,OAAO,OAAO,CACpC,QAAS,UACT,SAAU,UACZ,CAAC,EAWKC,EAAiB,OAAO,OAAO,CACnC,QAAS,UACT,QAAS,UACT,IAAK,MACL,MAAO,QACP,MAAO,QACP,QAAS,UACT,IAAK,KACP,CAAC,EAWKC,EAAuB,OAAO,OAAO,CACzC,MAAO,QACP,KAAM,OACN,YAAa,cACb,WAAY,YACd,CAAC",
-  "names": ["ShadowType", "Brightness", "MaterialType", "ScrollDirection", "ScrollPhysics", "DragStartBehavior", "AnimationStatus", "Curve", "RouteType", "TransitionType", "PopupMenuPosition", "HitTestBehavior", "PointerDeviceKind", "ImageRepeat", "BoxFit", "ImageChunkEvent", "TargetPlatform", "SystemUiOverlayStyle"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/shape_border.js b/packages/flutterjs_engine/package/material/dist/utils/property/shape_border.js
deleted file mode 100644
index 41d29a0d..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/shape_border.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const e=Object.freeze({rectangle:"rectangle",roundedRectangle:"roundedRectangle",circle:"circle",stadium:"stadium",beveledRectangle:"beveledRectangle",continuousRectangle:"continuousRectangle"});export{e as ShapeBorder};
-//# sourceMappingURL=shape_border.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/shape_border.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/shape_border.js.map
deleted file mode 100644
index f709aa1f..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/shape_border.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/shape_border.js"],
-  "sourcesContent": ["/**\r\n * ShapeBorder - Border shape\r\n */\r\nconst ShapeBorder = Object.freeze({\r\n  rectangle: 'rectangle',\r\n  roundedRectangle: 'roundedRectangle',\r\n  circle: 'circle',\r\n  stadium: 'stadium',\r\n  beveledRectangle: 'beveledRectangle',\r\n  continuousRectangle: 'continuousRectangle'\r\n});\r\nexport { ShapeBorder };"],
-  "mappings": "AAGA,MAAMA,EAAc,OAAO,OAAO,CAChC,UAAW,YACX,iBAAkB,mBAClB,OAAQ,SACR,QAAS,UACT,iBAAkB,mBAClB,oBAAqB,qBACvB,CAAC",
-  "names": ["ShapeBorder"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/stack_fit.js b/packages/flutterjs_engine/package/material/dist/utils/property/stack_fit.js
deleted file mode 100644
index 5feb4576..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/stack_fit.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const e=Object.freeze({loose:"loose",expand:"expand",passthrough:"passthrough"});export{e as StackFit};
-//# sourceMappingURL=stack_fit.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/stack_fit.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/stack_fit.js.map
deleted file mode 100644
index 1a9b4613..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/stack_fit.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/stack_fit.js"],
-  "sourcesContent": ["/**\r\n * StackFit - How children fit in Stack\r\n */\r\nconst StackFit = Object.freeze({\r\n  // Children are sized to their natural size\r\n  loose: 'loose',\r\n\r\n  // Children are forced to expand to fill the Stack\r\n  expand: 'expand',\r\n\r\n  // Children are sized to the smallest size that fits all of them\r\n  passthrough: 'passthrough'\r\n});\r\nexport { StackFit };"],
-  "mappings": "AAGA,MAAMA,EAAW,OAAO,OAAO,CAE7B,MAAO,QAGP,OAAQ,SAGR,YAAa,aACf,CAAC",
-  "names": ["StackFit"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/text_align.js b/packages/flutterjs_engine/package/material/dist/utils/property/text_align.js
deleted file mode 100644
index 603f95b7..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/text_align.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const t=Object.freeze({left:"left",right:"right",center:"center",justify:"justify",start:"start",end:"end"});export{t as TextAlign};
-//# sourceMappingURL=text_align.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/text_align.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/text_align.js.map
deleted file mode 100644
index 65ebd41a..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/text_align.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/text_align.js"],
-  "sourcesContent": ["/**\r\n * TextAlign - How text is aligned horizontally\r\n */\r\nconst TextAlign = Object.freeze({\r\n  left: 'left',\r\n  right: 'right',\r\n  center: 'center',\r\n  justify: 'justify',\r\n  start: 'start',\r\n  end: 'end'\r\n});\r\nexport { TextAlign };"],
-  "mappings": "AAGA,MAAMA,EAAY,OAAO,OAAO,CAC9B,KAAM,OACN,MAAO,QACP,OAAQ,SACR,QAAS,UACT,MAAO,QACP,IAAK,KACP,CAAC",
-  "names": ["TextAlign"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/text_baseline.js b/packages/flutterjs_engine/package/material/dist/utils/property/text_baseline.js
deleted file mode 100644
index d0fbe37d..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/text_baseline.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const e=Object.freeze({alphabetic:"alphabetic",ideographic:"ideographic"});export{e as TextBaseline};
-//# sourceMappingURL=text_baseline.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/text_baseline.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/text_baseline.js.map
deleted file mode 100644
index ab0d6422..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/text_baseline.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/text_baseline.js"],
-  "sourcesContent": ["/**\r\n * TextBaseline - Baseline used for aligning text\r\n */\r\nconst TextBaseline = Object.freeze({\r\n  // The horizontal line used for aligning the bottom of glyphs\r\n  alphabetic: 'alphabetic',\r\n\r\n  // The horizontal line used for aligning the bottom of ideographic characters\r\n  ideographic: 'ideographic'\r\n});\r\nexport { TextBaseline };"],
-  "mappings": "AAGA,MAAMA,EAAe,OAAO,OAAO,CAEjC,WAAY,aAGZ,YAAa,aACf,CAAC",
-  "names": ["TextBaseline"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/text_decoration.js b/packages/flutterjs_engine/package/material/dist/utils/property/text_decoration.js
deleted file mode 100644
index 8cde4235..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/text_decoration.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const e=Object.freeze({none:"none",underline:"underline",overline:"overline",lineThrough:"lineThrough"});export{e as TextDecoration};
-//# sourceMappingURL=text_decoration.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/text_decoration.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/text_decoration.js.map
deleted file mode 100644
index 3bb24fe0..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/text_decoration.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/text_decoration.js"],
-  "sourcesContent": ["/**\r\n * TextDecoration - Text decoration style\r\n */\r\nconst TextDecoration = Object.freeze({\r\n  none: 'none',\r\n  underline: 'underline',\r\n  overline: 'overline',\r\n  lineThrough: 'lineThrough'\r\n});\r\n\r\nexport { TextDecoration };"],
-  "mappings": "AAGA,MAAMA,EAAiB,OAAO,OAAO,CACnC,KAAM,OACN,UAAW,YACX,SAAU,WACV,YAAa,aACf,CAAC",
-  "names": ["TextDecoration"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/text_direction.js b/packages/flutterjs_engine/package/material/dist/utils/property/text_direction.js
deleted file mode 100644
index 0ca7bc24..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/text_direction.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const t=Object.freeze({ltr:"ltr",rtl:"rtl"});export{t as TextDirection};
-//# sourceMappingURL=text_direction.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/text_direction.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/text_direction.js.map
deleted file mode 100644
index a74ce3c2..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/text_direction.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/text_direction.js"],
-  "sourcesContent": ["/**\r\n * TextDirection - Direction of text\r\n * Used for cross-axis alignment and baseline calculations\r\n */\r\nexport const  TextDirection = Object.freeze({\r\n  // Text flows from left to right\r\n  ltr: 'ltr',\r\n\r\n  // Text flows from right to left\r\n  rtl: 'rtl'\r\n});"],
-  "mappings": "AAIO,MAAOA,EAAgB,OAAO,OAAO,CAE1C,IAAK,MAGL,IAAK,KACP,CAAC",
-  "names": ["TextDirection"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/text_input_action.js b/packages/flutterjs_engine/package/material/dist/utils/property/text_input_action.js
deleted file mode 100644
index fc151c52..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/text_input_action.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const e=Object.freeze({none:"none",unspecified:"unspecified",done:"done",go:"go",search:"search",send:"send",next:"next",previous:"previous",continueAction:"continueAction",join:"join",route:"route",emergencyCall:"emergencyCall"});export{e as TextInputAction};
-//# sourceMappingURL=text_input_action.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/text_input_action.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/text_input_action.js.map
deleted file mode 100644
index 09d79d5a..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/text_input_action.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/text_input_action.js"],
-  "sourcesContent": ["\r\n/**\r\n * TextInputAction - Action button on keyboard\r\n */\r\nconst TextInputAction = Object.freeze({\r\n  none: 'none',\r\n  unspecified: 'unspecified',\r\n  done: 'done',\r\n  go: 'go',\r\n  search: 'search',\r\n  send: 'send',\r\n  next: 'next',\r\n  previous: 'previous',\r\n  continueAction: 'continueAction',\r\n  join: 'join',\r\n  route: 'route',\r\n  emergencyCall: 'emergencyCall'\r\n});\r\nexport { TextInputAction };"],
-  "mappings": "AAIA,MAAMA,EAAkB,OAAO,OAAO,CACpC,KAAM,OACN,YAAa,cACb,KAAM,OACN,GAAI,KACJ,OAAQ,SACR,KAAM,OACN,KAAM,OACN,SAAU,WACV,eAAgB,iBAChB,KAAM,OACN,MAAO,QACP,cAAe,eACjB,CAAC",
-  "names": ["TextInputAction"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/text_input_type.js b/packages/flutterjs_engine/package/material/dist/utils/property/text_input_type.js
deleted file mode 100644
index 3827f9a3..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/text_input_type.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const e=Object.freeze({text:"text",multiline:"multiline",number:"number",phone:"phone",datetime:"datetime",emailAddress:"emailAddress",url:"url",visiblePassword:"visiblePassword",name:"name",address:"address"});export{e as TextInputType};
-//# sourceMappingURL=text_input_type.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/text_input_type.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/text_input_type.js.map
deleted file mode 100644
index 58de7c69..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/text_input_type.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/text_input_type.js"],
-  "sourcesContent": ["\r\n/**\r\n * TextInputType - Type of keyboard input\r\n */\r\nconst TextInputType = Object.freeze({\r\n  text: 'text',\r\n  multiline: 'multiline',\r\n  number: 'number',\r\n  phone: 'phone',\r\n  datetime: 'datetime',\r\n  emailAddress: 'emailAddress',\r\n  url: 'url',\r\n  visiblePassword: 'visiblePassword',\r\n  name: 'name',\r\n  address: 'address'\r\n});\r\nexport { TextInputType };"],
-  "mappings": "AAIA,MAAMA,EAAgB,OAAO,OAAO,CAClC,KAAM,OACN,UAAW,YACX,OAAQ,SACR,MAAO,QACP,SAAU,WACV,aAAc,eACd,IAAK,MACL,gBAAiB,kBACjB,KAAM,OACN,QAAS,SACX,CAAC",
-  "names": ["TextInputType"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/text_overflow.js b/packages/flutterjs_engine/package/material/dist/utils/property/text_overflow.js
deleted file mode 100644
index 012f7e03..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/text_overflow.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const e=Object.freeze({clip:"clip",fade:"fade",ellipsis:"ellipsis",visible:"visible"});export{e as TextOverflow};
-//# sourceMappingURL=text_overflow.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/text_overflow.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/text_overflow.js.map
deleted file mode 100644
index e4da3ea8..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/text_overflow.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/text_overflow.js"],
-  "sourcesContent": ["/**\r\n * TextOverflow - How text overflows container\r\n */\r\nconst TextOverflow = Object.freeze({\r\n  clip: 'clip',           // Cut off text\r\n  fade: 'fade',           // Fade out at end\r\n  ellipsis: 'ellipsis',   // Show \"...\" at end\r\n  visible: 'visible'      // Let text overflow\r\n});\r\nexport { TextOverflow };"],
-  "mappings": "AAGA,MAAMA,EAAe,OAAO,OAAO,CACjC,KAAM,OACN,KAAM,OACN,SAAU,WACV,QAAS,SACX,CAAC",
-  "names": ["TextOverflow"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/vertical_direction.js b/packages/flutterjs_engine/package/material/dist/utils/property/vertical_direction.js
deleted file mode 100644
index d084af5d..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/vertical_direction.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const e=Object.freeze({down:"down",up:"up"});export{e as VerticalDirection};
-//# sourceMappingURL=vertical_direction.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/vertical_direction.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/vertical_direction.js.map
deleted file mode 100644
index 2017b12c..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/vertical_direction.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/vertical_direction.js"],
-  "sourcesContent": ["/**\r\n * VerticalDirection - Direction of vertical axis\r\n * Controls the order in which children are laid out vertically\r\n */\r\nconst VerticalDirection = Object.freeze({\r\n  // Children are laid out from top to bottom (default)\r\n  down: 'down',\r\n\r\n  // Children are laid out from bottom to top\r\n  up: 'up'\r\n});\r\nexport { VerticalDirection };"],
-  "mappings": "AAIA,MAAMA,EAAoB,OAAO,OAAO,CAEtC,KAAM,OAGN,GAAI,IACN,CAAC",
-  "names": ["VerticalDirection"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/wrap_alignment.js b/packages/flutterjs_engine/package/material/dist/utils/property/wrap_alignment.js
deleted file mode 100644
index 7f143af4..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/wrap_alignment.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const e=Object.freeze({start:"start",end:"end",center:"center",spaceBetween:"spaceBetween",spaceAround:"spaceAround",spaceEvenly:"spaceEvenly"});export{e as WrapAlignment};
-//# sourceMappingURL=wrap_alignment.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/wrap_alignment.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/wrap_alignment.js.map
deleted file mode 100644
index f0604376..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/wrap_alignment.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/wrap_alignment.js"],
-  "sourcesContent": ["/**\r\n * WrapAlignment - How wraps are aligned if there is empty space\r\n * Used with Wrap widget\r\n */\r\nconst WrapAlignment = Object.freeze({\r\n  start: 'start',\r\n  end: 'end',\r\n  center: 'center',\r\n  spaceBetween: 'spaceBetween',\r\n  spaceAround: 'spaceAround',\r\n  spaceEvenly: 'spaceEvenly'\r\n});\r\nexport { WrapAlignment };"],
-  "mappings": "AAIA,MAAMA,EAAgB,OAAO,OAAO,CAClC,MAAO,QACP,IAAK,MACL,OAAQ,SACR,aAAc,eACd,YAAa,cACb,YAAa,aACf,CAAC",
-  "names": ["WrapAlignment"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/wrap_cross_alignment.js b/packages/flutterjs_engine/package/material/dist/utils/property/wrap_cross_alignment.js
deleted file mode 100644
index c97e1552..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/wrap_cross_alignment.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const e=Object.freeze({start:"start",end:"end",center:"center"});export{e as WrapCrossAlignment};
-//# sourceMappingURL=wrap_cross_alignment.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/property/wrap_cross_alignment.js.map b/packages/flutterjs_engine/package/material/dist/utils/property/wrap_cross_alignment.js.map
deleted file mode 100644
index 52774a07..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/property/wrap_cross_alignment.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/property/wrap_cross_alignment.js"],
-  "sourcesContent": ["/**\r\n * WrapCrossAlignment - How children within a wrap are aligned\r\n */\r\nconst WrapCrossAlignment = Object.freeze({\r\n  start: 'start',\r\n  end: 'end',\r\n  center: 'center'\r\n});\r\n\r\nexport { WrapCrossAlignment };"],
-  "mappings": "AAGA,MAAMA,EAAqB,OAAO,OAAO,CACvC,MAAO,QACP,IAAK,MACL,OAAQ,QACV,CAAC",
-  "names": ["WrapCrossAlignment"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/scrollbar_theme.js b/packages/flutterjs_engine/package/material/dist/utils/scrollbar_theme.js
deleted file mode 100644
index e4a7a66e..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/scrollbar_theme.js
+++ /dev/null
@@ -1,29 +0,0 @@
-class b{constructor({thumbColor:t,trackColor:i,trackBorderColor:r,thickness:s=8,minThumbLength:o=18,radius:n=4,mainAxisMargin:h=0,crossAxisMargin:e=0,hoverThickness:a=12,isAlwaysShown:c=!1,interactive:l=!0,showTrackOnHover:u=!1}={}){this.thumbColor=t,this.trackColor=i,this.trackBorderColor=r,this.thickness=s,this.minThumbLength=o,this.radius=n,this.mainAxisMargin=h,this.crossAxisMargin=e,this.hoverThickness=a,this.isAlwaysShown=c,this.interactive=l,this.showTrackOnHover=u}getThumbStyle(t={}){return{width:`${this.thickness}px`,height:`${this.minThumbLength}px`,backgroundColor:this.thumbColor||t.outline+"80"||"#79747E80",borderRadius:`${this.radius}px`,transition:"all 0.3s ease",cursor:this.interactive?"pointer":"default"}}getThumbHoverStyle(t={}){return{...this.getThumbStyle(t),width:`${this.hoverThickness}px`,backgroundColor:this.thumbColor||t.outline+"CC"||"#79747ECC"}}getTrackStyle(t={}){return{width:`${this.thickness}px`,backgroundColor:this.trackColor||"transparent",borderRadius:`${this.radius}px`,border:this.trackBorderColor?`1px solid ${this.trackBorderColor}`:"none"}}getVerticalScrollbarStyle(){return{position:"absolute",right:`${this.crossAxisMargin}px`,top:`${this.mainAxisMargin}px`,bottom:`${this.mainAxisMargin}px`,width:`${this.thickness}px`,opacity:this.isAlwaysShown?1:0,transition:this.isAlwaysShown?"none":"opacity 0.3s ease"}}getHorizontalScrollbarStyle(){return{position:"absolute",bottom:`${this.crossAxisMargin}px`,left:`${this.mainAxisMargin}px`,right:`${this.mainAxisMargin}px`,height:`${this.thickness}px`,opacity:this.isAlwaysShown?1:0,transition:this.isAlwaysShown?"none":"opacity 0.3s ease"}}getHoverContainerStyle(){return{opacity:1}}getScrollableStyle(t="vertical",i={}){return t==="vertical"?{...this.getVerticalScrollbarStyle(),...this.getTrackStyle(i)}:{...this.getHorizontalScrollbarStyle(),...this.getTrackStyle(i)}}toWebkitCSS(t={}){const i=this.thumbColor||t.outline+"80"||"#79747E80",r=this.thumbColor||t.outline+"CC"||"#79747ECC",s=this.radius;return`
-      ::-webkit-scrollbar {
-        width: ${this.thickness}px;
-        height: ${this.thickness}px;
-      }
-      
-      ::-webkit-scrollbar-track {
-        background: ${this.trackColor||"transparent"};
-        border-radius: ${s}px;
-      }
-      
-      ::-webkit-scrollbar-thumb {
-        background: ${i};
-        border-radius: ${s}px;
-        border: 2px solid transparent;
-        background-clip: content-box;
-      }
-      
-      ::-webkit-scrollbar-thumb:hover {
-        background: ${r};
-        background-clip: content-box;
-      }
-    `}toFirefoxCSS(t={}){return`
-      * {
-        scrollbar-color: ${this.thumbColor||t.outline+"80"||"#79747E80"} ${this.trackColor||"transparent"};
-        scrollbar-width: ${this.thickness===8?"thin":"auto"};
-      }
-    `}copyWith({thumbColor:t,trackColor:i,trackBorderColor:r,thickness:s,minThumbLength:o,radius:n,mainAxisMargin:h,crossAxisMargin:e,hoverThickness:a,isAlwaysShown:c,interactive:l,showTrackOnHover:u}={}){return new b({thumbColor:t??this.thumbColor,trackColor:i??this.trackColor,trackBorderColor:r??this.trackBorderColor,thickness:s??this.thickness,minThumbLength:o??this.minThumbLength,radius:n??this.radius,mainAxisMargin:h??this.mainAxisMargin,crossAxisMargin:e??this.crossAxisMargin,hoverThickness:a??this.hoverThickness,isAlwaysShown:c??this.isAlwaysShown,interactive:l??this.interactive,showTrackOnHover:u??this.showTrackOnHover})}merge(t){return t?this.copyWith({thumbColor:t.thumbColor,trackColor:t.trackColor,trackBorderColor:t.trackBorderColor,thickness:t.thickness,minThumbLength:t.minThumbLength,radius:t.radius,mainAxisMargin:t.mainAxisMargin,crossAxisMargin:t.crossAxisMargin,hoverThickness:t.hoverThickness,isAlwaysShown:t.isAlwaysShown,interactive:t.interactive,showTrackOnHover:t.showTrackOnHover}):this}toString(){return`ScrollbarTheme(thickness: ${this.thickness}px, radius: ${this.radius}px)`}}export{b as ScrollbarTheme};
-//# sourceMappingURL=scrollbar_theme.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/scrollbar_theme.js.map b/packages/flutterjs_engine/package/material/dist/utils/scrollbar_theme.js.map
deleted file mode 100644
index cff68ad2..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/scrollbar_theme.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/scrollbar_theme.js"],
-  "sourcesContent": ["/**\r\n * Material Design 3 Scrollbar Theme\r\n * Defines the visual properties of Scrollbar widgets\r\n * Follows Flutter Material Design 3 specification\r\n * \r\n * Flutter Reference: https://api.flutter.dev/flutter/material/ScrollbarThemeData-class.html\r\n */\r\nexport class ScrollbarTheme {\r\n  constructor({\r\n    // Colors\r\n    thumbColor,\r\n    trackColor,\r\n    trackBorderColor,\r\n    \r\n    // Size\r\n    thickness = 8,\r\n    minThumbLength = 18,\r\n    \r\n    // Radius\r\n    radius = 4,\r\n    \r\n    // Interaction\r\n    mainAxisMargin = 0,\r\n    crossAxisMargin = 0,\r\n    \r\n    // Hover/Interactive\r\n    hoverThickness = 12,\r\n    isAlwaysShown = false,\r\n    \r\n    // Interaction behavior\r\n    interactive = true,\r\n    showTrackOnHover = false\r\n  } = {}) {\r\n    this.thumbColor = thumbColor;\r\n    this.trackColor = trackColor;\r\n    this.trackBorderColor = trackBorderColor;\r\n    this.thickness = thickness;\r\n    this.minThumbLength = minThumbLength;\r\n    this.radius = radius;\r\n    this.mainAxisMargin = mainAxisMargin;\r\n    this.crossAxisMargin = crossAxisMargin;\r\n    this.hoverThickness = hoverThickness;\r\n    this.isAlwaysShown = isAlwaysShown;\r\n    this.interactive = interactive;\r\n    this.showTrackOnHover = showTrackOnHover;\r\n  }\r\n\r\n  /**\r\n   * Get scrollbar thumb CSS\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getThumbStyle(themeColors = {}) {\r\n    return {\r\n      width: `${this.thickness}px`,\r\n      height: `${this.minThumbLength}px`,\r\n      backgroundColor: this.thumbColor || (themeColors.outline + '80') || '#79747E80',\r\n      borderRadius: `${this.radius}px`,\r\n      transition: 'all 0.3s ease',\r\n      cursor: this.interactive ? 'pointer' : 'default'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get scrollbar thumb hover CSS\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getThumbHoverStyle(themeColors = {}) {\r\n    return {\r\n      ...this.getThumbStyle(themeColors),\r\n      width: `${this.hoverThickness}px`,\r\n      backgroundColor: this.thumbColor || (themeColors.outline + 'CC') || '#79747ECC'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get scrollbar track CSS\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getTrackStyle(themeColors = {}) {\r\n    return {\r\n      width: `${this.thickness}px`,\r\n      backgroundColor: this.trackColor || 'transparent',\r\n      borderRadius: `${this.radius}px`,\r\n      border: this.trackBorderColor ? `1px solid ${this.trackBorderColor}` : 'none'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get scrollbar container CSS (vertical)\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getVerticalScrollbarStyle() {\r\n    return {\r\n      position: 'absolute',\r\n      right: `${this.crossAxisMargin}px`,\r\n      top: `${this.mainAxisMargin}px`,\r\n      bottom: `${this.mainAxisMargin}px`,\r\n      width: `${this.thickness}px`,\r\n      opacity: this.isAlwaysShown ? 1 : 0,\r\n      transition: this.isAlwaysShown ? 'none' : 'opacity 0.3s ease'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get scrollbar container CSS (horizontal)\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getHorizontalScrollbarStyle() {\r\n    return {\r\n      position: 'absolute',\r\n      bottom: `${this.crossAxisMargin}px`,\r\n      left: `${this.mainAxisMargin}px`,\r\n      right: `${this.mainAxisMargin}px`,\r\n      height: `${this.thickness}px`,\r\n      opacity: this.isAlwaysShown ? 1 : 0,\r\n      transition: this.isAlwaysShown ? 'none' : 'opacity 0.3s ease'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get scrollbar container on hover CSS\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getHoverContainerStyle() {\r\n    return {\r\n      opacity: 1\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Generate CSS for scrollable container\r\n   * @param {string} direction - 'vertical' or 'horizontal'\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} Complete CSS object\r\n   */\r\n  getScrollableStyle(direction = 'vertical', themeColors = {}) {\r\n    const isVertical = direction === 'vertical';\r\n    \r\n    if (isVertical) {\r\n      return {\r\n        ...this.getVerticalScrollbarStyle(),\r\n        ...this.getTrackStyle(themeColors)\r\n      };\r\n    } else {\r\n      return {\r\n        ...this.getHorizontalScrollbarStyle(),\r\n        ...this.getTrackStyle(themeColors)\r\n      };\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Generate webkit scrollbar CSS rules\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {string} CSS rules for webkit browsers\r\n   */\r\n  toWebkitCSS(themeColors = {}) {\r\n    const thumbColor = this.thumbColor || (themeColors.outline + '80') || '#79747E80';\r\n    const thumbHoverColor = this.thumbColor || (themeColors.outline + 'CC') || '#79747ECC';\r\n    const radius = this.radius;\r\n    \r\n    return `\r\n      ::-webkit-scrollbar {\r\n        width: ${this.thickness}px;\r\n        height: ${this.thickness}px;\r\n      }\r\n      \r\n      ::-webkit-scrollbar-track {\r\n        background: ${this.trackColor || 'transparent'};\r\n        border-radius: ${radius}px;\r\n      }\r\n      \r\n      ::-webkit-scrollbar-thumb {\r\n        background: ${thumbColor};\r\n        border-radius: ${radius}px;\r\n        border: 2px solid transparent;\r\n        background-clip: content-box;\r\n      }\r\n      \r\n      ::-webkit-scrollbar-thumb:hover {\r\n        background: ${thumbHoverColor};\r\n        background-clip: content-box;\r\n      }\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Generate Firefox scrollbar CSS rules\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {string} CSS rules for Firefox\r\n   */\r\n  toFirefoxCSS(themeColors = {}) {\r\n    const thumbColor = this.thumbColor || (themeColors.outline + '80') || '#79747E80';\r\n    \r\n    return `\r\n      * {\r\n        scrollbar-color: ${thumbColor} ${this.trackColor || 'transparent'};\r\n        scrollbar-width: ${this.thickness === 8 ? 'thin' : 'auto'};\r\n      }\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Copy this theme with updated properties\r\n   * @param {Object} properties - Properties to override\r\n   * @returns {ScrollbarTheme} New theme instance\r\n   */\r\n  copyWith({\r\n    thumbColor,\r\n    trackColor,\r\n    trackBorderColor,\r\n    thickness,\r\n    minThumbLength,\r\n    radius,\r\n    mainAxisMargin,\r\n    crossAxisMargin,\r\n    hoverThickness,\r\n    isAlwaysShown,\r\n    interactive,\r\n    showTrackOnHover\r\n  } = {}) {\r\n    return new ScrollbarTheme({\r\n      thumbColor: thumbColor ?? this.thumbColor,\r\n      trackColor: trackColor ?? this.trackColor,\r\n      trackBorderColor: trackBorderColor ?? this.trackBorderColor,\r\n      thickness: thickness ?? this.thickness,\r\n      minThumbLength: minThumbLength ?? this.minThumbLength,\r\n      radius: radius ?? this.radius,\r\n      mainAxisMargin: mainAxisMargin ?? this.mainAxisMargin,\r\n      crossAxisMargin: crossAxisMargin ?? this.crossAxisMargin,\r\n      hoverThickness: hoverThickness ?? this.hoverThickness,\r\n      isAlwaysShown: isAlwaysShown ?? this.isAlwaysShown,\r\n      interactive: interactive ?? this.interactive,\r\n      showTrackOnHover: showTrackOnHover ?? this.showTrackOnHover\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Merge with another ScrollbarTheme\r\n   * @param {ScrollbarTheme} other - Theme to merge with\r\n   * @returns {ScrollbarTheme} Merged theme\r\n   */\r\n  merge(other) {\r\n    if (!other) return this;\r\n    return this.copyWith({\r\n      thumbColor: other.thumbColor,\r\n      trackColor: other.trackColor,\r\n      trackBorderColor: other.trackBorderColor,\r\n      thickness: other.thickness,\r\n      minThumbLength: other.minThumbLength,\r\n      radius: other.radius,\r\n      mainAxisMargin: other.mainAxisMargin,\r\n      crossAxisMargin: other.crossAxisMargin,\r\n      hoverThickness: other.hoverThickness,\r\n      isAlwaysShown: other.isAlwaysShown,\r\n      interactive: other.interactive,\r\n      showTrackOnHover: other.showTrackOnHover\r\n    });\r\n  }\r\n\r\n  toString() {\r\n    return `ScrollbarTheme(thickness: ${this.thickness}px, radius: ${this.radius}px)`;\r\n  }\r\n}"],
-  "mappings": "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",
-  "names": ["ScrollbarTheme", "thumbColor", "trackColor", "trackBorderColor", "thickness", "minThumbLength", "radius", "mainAxisMargin", "crossAxisMargin", "hoverThickness", "isAlwaysShown", "interactive", "showTrackOnHover", "themeColors", "direction", "thumbHoverColor", "other"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/shadows_theme.js b/packages/flutterjs_engine/package/material/dist/utils/shadows_theme.js
deleted file mode 100644
index efedf767..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/shadows_theme.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import{BoxShadow as e}from"./box_shadow.js";import{Offset as o}from"./geometry.js";class d{constructor(){this._shadows=this._initializeShadows()}_initializeShadows(){return{0:[],1:[new e({color:"#00000033",offset:new o(0,1),blurRadius:3,spreadRadius:0})],2:[new e({color:"#0000001f",offset:new o(0,1),blurRadius:2,spreadRadius:0}),new e({color:"#00000024",offset:new o(0,2),blurRadius:4,spreadRadius:0})],3:[new e({color:"#0000001f",offset:new o(0,1),blurRadius:3,spreadRadius:0}),new e({color:"#00000024",offset:new o(0,3),blurRadius:6,spreadRadius:0})],4:[new e({color:"#00000018",offset:new o(0,2),blurRadius:3,spreadRadius:0}),new e({color:"#00000024",offset:new o(0,4),blurRadius:8,spreadRadius:0})],5:[new e({color:"#00000018",offset:new o(0,2),blurRadius:4,spreadRadius:0}),new e({color:"#00000024",offset:new o(0,5),blurRadius:10,spreadRadius:0})],6:[new e({color:"#00000015",offset:new o(0,3),blurRadius:4,spreadRadius:0}),new e({color:"#00000024",offset:new o(0,6),blurRadius:12,spreadRadius:0})],8:[new e({color:"#00000012",offset:new o(0,5),blurRadius:5,spreadRadius:0}),new e({color:"#00000026",offset:new o(0,8),blurRadius:16,spreadRadius:0})],12:[new e({color:"#0000000d",offset:new o(0,7),blurRadius:8,spreadRadius:0}),new e({color:"#00000026",offset:new o(0,12),blurRadius:24,spreadRadius:0})],16:[new e({color:"#0000000d",offset:new o(0,8),blurRadius:10,spreadRadius:0}),new e({color:"#00000026",offset:new o(0,16),blurRadius:32,spreadRadius:0})],24:[new e({color:"#0000000d",offset:new o(0,11),blurRadius:15,spreadRadius:0}),new e({color:"#00000026",offset:new o(0,24),blurRadius:48,spreadRadius:0})]}}getShadow(s){const a=Math.max(0,Math.min(24,s)),t=[0,1,2,3,4,5,6,8,12,16,24].reduce((n,u)=>Math.abs(u-a)<Math.abs(n-a)?u:n);return this._shadows[t]||[]}getShadowCSS(s){const a=this.getShadow(s);return a.length===0?"none":a.map(r=>r.toCSSString()).join(", ")}getShadowStyle(s){return{boxShadow:this.getShadowCSS(s)}}getAllShadows(){return this._shadows}static custom(s={}){const a=new d;return Object.assign(a._shadows,s),a}static reducedMotion(){const s=new d;return Object.keys(s._shadows).forEach(a=>{s._shadows[a]=s._shadows[a].map(r=>new e({color:r.color.replace(/[\d.]+\)/,t=>(parseFloat(t)*.5).toString()+")"),offset:r.offset,blurRadius:Math.max(1,r.blurRadius*.7),spreadRadius:r.spreadRadius}))}),s}toCSSVariables(){let s=`:root {
-`;return[0,1,2,3,4,5,6,8,12,16,24].forEach(r=>{const t=this.getShadowCSS(r);s+=`  --shadow-${r}: ${t};
-`}),s+="}",s}copyWith(s={}){return d.custom(Object.assign({},this._shadows,s))}merge(s){return s?this.copyWith(s.getAllShadows()):this}toString(){return"ShadowsTheme(elevation: 0-24)"}}export{d as ShadowsTheme};
-//# sourceMappingURL=shadows_theme.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/shadows_theme.js.map b/packages/flutterjs_engine/package/material/dist/utils/shadows_theme.js.map
deleted file mode 100644
index 738b25b9..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/shadows_theme.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/shadows_theme.js"],
-  "sourcesContent": ["import { BoxShadow } from './box_shadow.js';\r\nimport { Offset } from './geometry.js';\r\n\r\n/**\r\n * Material Design 3 Shadow System (Elevation)\r\n * Defines shadow values for elevation levels 0-24\r\n * Follows Flutter Material Design 3 specification\r\n * \r\n * Flutter Reference: https://api.flutter.dev/flutter/material/kElevationToShadow-class.html\r\n */\r\nexport class ShadowsTheme {\r\n  constructor() {\r\n    // Shadow definitions for each elevation level\r\n    this._shadows = this._initializeShadows();\r\n  }\r\n\r\n  /**\r\n   * Initialize shadow definitions for all elevation levels\r\n   * @private\r\n   * @returns {Object} Shadow map by elevation\r\n   */\r\n  _initializeShadows() {\r\n    return {\r\n      // Elevation 0 - No shadow\r\n      0: [],\r\n\r\n      // Elevation 1 - Subtle shadow\r\n      1: [\r\n        new BoxShadow({\r\n          color: '#00000033', // 20% opacity black\r\n          offset: new Offset(0, 1),\r\n          blurRadius: 3,\r\n          spreadRadius: 0\r\n        })\r\n      ],\r\n\r\n      // Elevation 2\r\n      2: [\r\n        new BoxShadow({\r\n          color: '#0000001f', // 12% opacity black\r\n          offset: new Offset(0, 1),\r\n          blurRadius: 2,\r\n          spreadRadius: 0\r\n        }),\r\n        new BoxShadow({\r\n          color: '#00000024', // 14% opacity black\r\n          offset: new Offset(0, 2),\r\n          blurRadius: 4,\r\n          spreadRadius: 0\r\n        })\r\n      ],\r\n\r\n      // Elevation 3\r\n      3: [\r\n        new BoxShadow({\r\n          color: '#0000001f', // 12% opacity black\r\n          offset: new Offset(0, 1),\r\n          blurRadius: 3,\r\n          spreadRadius: 0\r\n        }),\r\n        new BoxShadow({\r\n          color: '#00000024', // 14% opacity black\r\n          offset: new Offset(0, 3),\r\n          blurRadius: 6,\r\n          spreadRadius: 0\r\n        })\r\n      ],\r\n\r\n      // Elevation 4\r\n      4: [\r\n        new BoxShadow({\r\n          color: '#00000018', // 10% opacity black\r\n          offset: new Offset(0, 2),\r\n          blurRadius: 3,\r\n          spreadRadius: 0\r\n        }),\r\n        new BoxShadow({\r\n          color: '#00000024', // 14% opacity black\r\n          offset: new Offset(0, 4),\r\n          blurRadius: 8,\r\n          spreadRadius: 0\r\n        })\r\n      ],\r\n\r\n      // Elevation 5\r\n      5: [\r\n        new BoxShadow({\r\n          color: '#00000018', // 10% opacity black\r\n          offset: new Offset(0, 2),\r\n          blurRadius: 4,\r\n          spreadRadius: 0\r\n        }),\r\n        new BoxShadow({\r\n          color: '#00000024', // 14% opacity black\r\n          offset: new Offset(0, 5),\r\n          blurRadius: 10,\r\n          spreadRadius: 0\r\n        })\r\n      ],\r\n\r\n      // Elevation 6\r\n      6: [\r\n        new BoxShadow({\r\n          color: '#00000015', // 8% opacity black\r\n          offset: new Offset(0, 3),\r\n          blurRadius: 4,\r\n          spreadRadius: 0\r\n        }),\r\n        new BoxShadow({\r\n          color: '#00000024', // 14% opacity black\r\n          offset: new Offset(0, 6),\r\n          blurRadius: 12,\r\n          spreadRadius: 0\r\n        })\r\n      ],\r\n\r\n      // Elevation 8\r\n      8: [\r\n        new BoxShadow({\r\n          color: '#00000012', // 7% opacity black\r\n          offset: new Offset(0, 5),\r\n          blurRadius: 5,\r\n          spreadRadius: 0\r\n        }),\r\n        new BoxShadow({\r\n          color: '#00000026', // 15% opacity black\r\n          offset: new Offset(0, 8),\r\n          blurRadius: 16,\r\n          spreadRadius: 0\r\n        })\r\n      ],\r\n\r\n      // Elevation 12\r\n      12: [\r\n        new BoxShadow({\r\n          color: '#0000000d', // 5% opacity black\r\n          offset: new Offset(0, 7),\r\n          blurRadius: 8,\r\n          spreadRadius: 0\r\n        }),\r\n        new BoxShadow({\r\n          color: '#00000026', // 15% opacity black\r\n          offset: new Offset(0, 12),\r\n          blurRadius: 24,\r\n          spreadRadius: 0\r\n        })\r\n      ],\r\n\r\n      // Elevation 16\r\n      16: [\r\n        new BoxShadow({\r\n          color: '#0000000d', // 5% opacity black\r\n          offset: new Offset(0, 8),\r\n          blurRadius: 10,\r\n          spreadRadius: 0\r\n        }),\r\n        new BoxShadow({\r\n          color: '#00000026', // 15% opacity black\r\n          offset: new Offset(0, 16),\r\n          blurRadius: 32,\r\n          spreadRadius: 0\r\n        })\r\n      ],\r\n\r\n      // Elevation 24\r\n      24: [\r\n        new BoxShadow({\r\n          color: '#0000000d', // 5% opacity black\r\n          offset: new Offset(0, 11),\r\n          blurRadius: 15,\r\n          spreadRadius: 0\r\n        }),\r\n        new BoxShadow({\r\n          color: '#00000026', // 15% opacity black\r\n          offset: new Offset(0, 24),\r\n          blurRadius: 48,\r\n          spreadRadius: 0\r\n        })\r\n      ]\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get shadow for elevation level\r\n   * @param {number} elevation - Elevation level (0-24)\r\n   * @returns {BoxShadow[]} Array of shadow definitions\r\n   * \r\n   * @example\r\n   * const shadows = theme.getShadow(4);\r\n   * // Returns array of BoxShadow instances for elevation 4\r\n   */\r\n  getShadow(elevation) {\r\n    // Clamp elevation to valid range\r\n    const level = Math.max(0, Math.min(24, elevation));\r\n\r\n    // Map to available elevation levels\r\n    const levels = [0, 1, 2, 3, 4, 5, 6, 8, 12, 16, 24];\r\n    const closest = levels.reduce((prev, curr) =>\r\n      Math.abs(curr - level) < Math.abs(prev - level) ? curr : prev\r\n    );\r\n\r\n    return this._shadows[closest] || [];\r\n  }\r\n\r\n  /**\r\n   * Get shadow as CSS string\r\n   * @param {number} elevation - Elevation level\r\n   * @returns {string} CSS box-shadow string\r\n   * \r\n   * @example\r\n   * theme.getShadowCSS(4) // \"0 2px 3px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.14)\"\r\n   */\r\n  getShadowCSS(elevation) {\r\n    const shadows = this.getShadow(elevation);\r\n    if (shadows.length === 0) return 'none';\r\n\r\n    return shadows\r\n      .map(shadow => shadow.toCSSString())\r\n      .join(', ');\r\n  }\r\n\r\n  /**\r\n   * Get shadow object for CSS\r\n   * @param {number} elevation - Elevation level\r\n   * @returns {Object} CSS style object\r\n   * \r\n   * @example\r\n   * const style = theme.getShadowStyle(4);\r\n   * // { boxShadow: \"0 2px 3px rgba(...), 0 4px 8px rgba(...)\" }\r\n   */\r\n  getShadowStyle(elevation) {\r\n    return {\r\n      boxShadow: this.getShadowCSS(elevation)\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get all elevation shadows\r\n   * @returns {Object} Map of elevation -> shadows\r\n   */\r\n  getAllShadows() {\r\n    return this._shadows;\r\n  }\r\n\r\n  /**\r\n   * Create custom shadow theme\r\n   * @param {Object} config - Custom shadow definitions\r\n   * @returns {ShadowsTheme} New theme instance\r\n   * \r\n   * @example\r\n   * const customTheme = ShadowsTheme.custom({\r\n   *   4: [new BoxShadow({ ...custom shadow... })]\r\n   * });\r\n   */\r\n  static custom(config = {}) {\r\n    const theme = new ShadowsTheme();\r\n    Object.assign(theme._shadows, config);\r\n    return theme;\r\n  }\r\n\r\n  /**\r\n   * Create reduced motion shadows (flatter design)\r\n   * Less dramatic shadow falloff\r\n   * @returns {ShadowsTheme} Reduced motion theme\r\n   */\r\n  static reducedMotion() {\r\n    const theme = new ShadowsTheme();\r\n\r\n    // Reduce shadow intensity\r\n    Object.keys(theme._shadows).forEach(level => {\r\n      theme._shadows[level] = theme._shadows[level].map(shadow =>\r\n        new BoxShadow({\r\n          color: shadow.color.replace(/[\\d.]+\\)/, match => {\r\n            const opacity = parseFloat(match);\r\n            return (opacity * 0.5).toString() + ')'; // 50% opacity reduction\r\n          }),\r\n          offset: shadow.offset,\r\n          blurRadius: Math.max(1, shadow.blurRadius * 0.7),\r\n          spreadRadius: shadow.spreadRadius\r\n        })\r\n      );\r\n    });\r\n\r\n    return theme;\r\n  }\r\n\r\n  /**\r\n   * Generate CSS variables for all elevation levels\r\n   * @returns {string} CSS variable declarations\r\n   * \r\n   * @example\r\n   * const css = theme.toCSSVariables();\r\n   * // Output: --shadow-4: 0 2px 3px rgba(...), ...;\r\n   */\r\n  toCSSVariables() {\r\n    let css = ':root {\\n';\r\n\r\n    const levels = [0, 1, 2, 3, 4, 5, 6, 8, 12, 16, 24];\r\n    levels.forEach(level => {\r\n      const shadowCSS = this.getShadowCSS(level);\r\n      css += `  --shadow-${level}: ${shadowCSS};\\n`;\r\n    });\r\n\r\n    css += '}';\r\n    return css;\r\n  }\r\n\r\n  /**\r\n   * Copy theme with updated shadows\r\n   * @param {Object} shadows - Shadow definitions to override\r\n   * @returns {ShadowsTheme} New theme instance\r\n   */\r\n  copyWith(shadows = {}) {\r\n    return ShadowsTheme.custom(Object.assign({}, this._shadows, shadows));\r\n  }\r\n\r\n  /**\r\n   * Merge with another shadow theme\r\n   * @param {ShadowsTheme} other - Theme to merge with\r\n   * @returns {ShadowsTheme} Merged theme\r\n   */\r\n  merge(other) {\r\n    if (!other) return this;\r\n    return this.copyWith(other.getAllShadows());\r\n  }\r\n\r\n  toString() {\r\n    return 'ShadowsTheme(elevation: 0-24)';\r\n  }\r\n}"],
-  "mappings": "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",
-  "names": ["BoxShadow", "Offset", "ShadowsTheme", "elevation", "level", "closest", "prev", "curr", "shadows", "shadow", "config", "theme", "match", "css", "shadowCSS", "other"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/size.js b/packages/flutterjs_engine/package/material/dist/utils/size.js
deleted file mode 100644
index 76c98349..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/size.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class i{constructor(t=0,h=0){this.width=t,this.height=h}static get zero(){return new i(0,0)}static get infinite(){return new i(1/0,1/0)}static square(t){return new i(t,t)}get isEmpty(){return this.width===0&&this.height===0}get isInfinite(){return this.width===1/0||this.height===1/0}toString(){return`Size(${this.width}, ${this.height})`}equals(t){return!t||!(t instanceof i)?!1:this.width===t.width&&this.height===t.height}}export{i as Size};
-//# sourceMappingURL=size.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/size.js.map b/packages/flutterjs_engine/package/material/dist/utils/size.js.map
deleted file mode 100644
index 0231856d..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/size.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/size.js"],
-  "sourcesContent": ["export class Size {\r\n    constructor(width = 0, height = 0) {\r\n        this.width = width;\r\n        this.height = height;\r\n    }\r\n\r\n    static get zero() {\r\n        return new Size(0, 0);\r\n    }\r\n\r\n    static get infinite() {\r\n        return new Size(Infinity, Infinity);\r\n    }\r\n\r\n    static square(dimension) {\r\n        return new Size(dimension, dimension);\r\n    }\r\n\r\n    get isEmpty() {\r\n        return this.width === 0 && this.height === 0;\r\n    }\r\n\r\n    get isInfinite() {\r\n        return this.width === Infinity || this.height === Infinity;\r\n    }\r\n\r\n    toString() {\r\n        return `Size(${this.width}, ${this.height})`;\r\n    }\r\n\r\n    equals(other) {\r\n        if (!other || !(other instanceof Size)) {\r\n            return false;\r\n        }\r\n        return this.width === other.width && this.height === other.height;\r\n    }\r\n}\r\n"],
-  "mappings": "AAAO,MAAMA,CAAK,CACd,YAAYC,EAAQ,EAAGC,EAAS,EAAG,CAC/B,KAAK,MAAQD,EACb,KAAK,OAASC,CAClB,CAEA,WAAW,MAAO,CACd,OAAO,IAAIF,EAAK,EAAG,CAAC,CACxB,CAEA,WAAW,UAAW,CAClB,OAAO,IAAIA,EAAK,IAAU,GAAQ,CACtC,CAEA,OAAO,OAAOG,EAAW,CACrB,OAAO,IAAIH,EAAKG,EAAWA,CAAS,CACxC,CAEA,IAAI,SAAU,CACV,OAAO,KAAK,QAAU,GAAK,KAAK,SAAW,CAC/C,CAEA,IAAI,YAAa,CACb,OAAO,KAAK,QAAU,KAAY,KAAK,SAAW,GACtD,CAEA,UAAW,CACP,MAAO,QAAQ,KAAK,KAAK,KAAK,KAAK,MAAM,GAC7C,CAEA,OAAOC,EAAO,CACV,MAAI,CAACA,GAAS,EAAEA,aAAiBJ,GACtB,GAEJ,KAAK,QAAUI,EAAM,OAAS,KAAK,SAAWA,EAAM,MAC/D,CACJ",
-  "names": ["Size", "width", "height", "dimension", "other"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/switch_theme.js b/packages/flutterjs_engine/package/material/dist/utils/switch_theme.js
deleted file mode 100644
index 31d19518..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/switch_theme.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class b{constructor({thumbColor:t,trackColor:r,trackOutlineColor:i,overlayColor:e,focusColor:o,hoverColor:a,thumbSize:s=4,trackHeight:l=28,materialTapTargetSize:h="padded",splashRadius:u=20,mouseCursor:n,enableFeedback:c=!0,animationDuration:m=200}={}){this.thumbColor=t,this.trackColor=r,this.trackOutlineColor=i,this.overlayColor=e,this.focusColor=o,this.hoverColor=a,this.thumbSize=s,this.trackHeight=l,this.materialTapTargetSize=h,this.splashRadius=u,this.mouseCursor=n,this.enableFeedback=c,this.animationDuration=m}getSwitchSize(){return this.materialTapTargetSize==="padded"?48:40}getThumbDiameter(){return this.thumbSize*2}getTrackWidth(){return this.getThumbDiameter()*2}toCSSObject(){return{position:"relative",display:"inline-flex",alignItems:"center",cursor:this.mouseCursor||"pointer",userSelect:"none"}}getTrackOffStyle(t={}){return{width:`${this.getTrackWidth()}px`,height:`${this.trackHeight}px`,borderRadius:`${this.trackHeight/2}px`,backgroundColor:t.surfaceVariant||"#E7E0EC",border:`1px solid ${this.trackOutlineColor||t.outline||"#79747E"}`,transition:`all ${this.animationDuration}ms ease`,position:"absolute",top:"50%",transform:"translateY(-50%)"}}getTrackOnStyle(t={}){return{...this.getTrackOffStyle(t),backgroundColor:t.primary||"#6750A4",border:`1px solid ${t.primary||"#6750A4"}`}}getThumbOffStyle(t={}){return{width:`${this.getThumbDiameter()}px`,height:`${this.getThumbDiameter()}px`,borderRadius:"50%",backgroundColor:t.outline||"#79747E",position:"absolute",left:"4px",transition:`all ${this.animationDuration}ms ease`,zIndex:1,boxShadow:"0 2px 4px rgba(0, 0, 0, 0.1)"}}getThumbOnStyle(t={}){const r=this.getTrackWidth(),i=this.getThumbDiameter(),e=r-i-4;return{...this.getThumbOffStyle(t),backgroundColor:t.onPrimary||"#FFFFFF",left:`${e}px`,boxShadow:"0 4px 8px rgba(0, 0, 0, 0.15)"}}getDisabledStyle(t={}){return{opacity:.38,cursor:"not-allowed",pointerEvents:"none"}}getHoverStyle(t={}){return{backgroundColor:this.hoverColor||t.primary+"14"||"#6750A414"}}getFocusStyle(t={}){return{outline:"none",boxShadow:`0 0 0 ${this.splashRadius}px ${this.focusColor||t.primary+"24"||"#6750A424"}`}}copyWith({thumbColor:t,trackColor:r,trackOutlineColor:i,overlayColor:e,focusColor:o,hoverColor:a,thumbSize:s,trackHeight:l,materialTapTargetSize:h,splashRadius:u,mouseCursor:n,enableFeedback:c,animationDuration:m}={}){return new b({thumbColor:t??this.thumbColor,trackColor:r??this.trackColor,trackOutlineColor:i??this.trackOutlineColor,overlayColor:e??this.overlayColor,focusColor:o??this.focusColor,hoverColor:a??this.hoverColor,thumbSize:s??this.thumbSize,trackHeight:l??this.trackHeight,materialTapTargetSize:h??this.materialTapTargetSize,splashRadius:u??this.splashRadius,mouseCursor:n??this.mouseCursor,enableFeedback:c??this.enableFeedback,animationDuration:m??this.animationDuration})}merge(t){return t?this.copyWith({thumbColor:t.thumbColor,trackColor:t.trackColor,trackOutlineColor:t.trackOutlineColor,overlayColor:t.overlayColor,focusColor:t.focusColor,hoverColor:t.hoverColor,thumbSize:t.thumbSize,trackHeight:t.trackHeight,materialTapTargetSize:t.materialTapTargetSize,splashRadius:t.splashRadius,mouseCursor:t.mouseCursor,enableFeedback:t.enableFeedback,animationDuration:t.animationDuration}):this}toString(){return`SwitchTheme(trackHeight: ${this.trackHeight}px, thumbSize: ${this.getThumbDiameter()}px)`}}export{b as SwitchTheme};
-//# sourceMappingURL=switch_theme.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/switch_theme.js.map b/packages/flutterjs_engine/package/material/dist/utils/switch_theme.js.map
deleted file mode 100644
index fc6c763e..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/switch_theme.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/switch_theme.js"],
-  "sourcesContent": ["/**\r\n * Material Design 3 Switch Theme\r\n * Defines the visual properties of Switch widgets\r\n * Follows Flutter Material Design 3 specification\r\n * \r\n * Flutter Reference: https://api.flutter.dev/flutter/material/SwitchThemeData-class.html\r\n */\r\nexport class SwitchTheme {\r\n  constructor({\r\n    // Colors\r\n    thumbColor,\r\n    trackColor,\r\n    trackOutlineColor,\r\n    overlayColor,\r\n    focusColor,\r\n    hoverColor,\r\n    \r\n    // Size\r\n    thumbSize = 4, // radius factor, 4 = 20px diameter\r\n    trackHeight = 28,\r\n    \r\n    // Interaction\r\n    materialTapTargetSize = 'padded',\r\n    splashRadius = 20,\r\n    mouseCursor,\r\n    enableFeedback = true,\r\n    animationDuration = 200\r\n  } = {}) {\r\n    this.thumbColor = thumbColor;\r\n    this.trackColor = trackColor;\r\n    this.trackOutlineColor = trackOutlineColor;\r\n    this.overlayColor = overlayColor;\r\n    this.focusColor = focusColor;\r\n    this.hoverColor = hoverColor;\r\n    this.thumbSize = thumbSize;\r\n    this.trackHeight = trackHeight;\r\n    this.materialTapTargetSize = materialTapTargetSize;\r\n    this.splashRadius = splashRadius;\r\n    this.mouseCursor = mouseCursor;\r\n    this.enableFeedback = enableFeedback;\r\n    this.animationDuration = animationDuration;\r\n  }\r\n\r\n  /**\r\n   * Get switch total tap target size\r\n   * @returns {number} Size in pixels\r\n   */\r\n  getSwitchSize() {\r\n    return this.materialTapTargetSize === 'padded' ? 48 : 40;\r\n  }\r\n\r\n  /**\r\n   * Get thumb (circle) diameter\r\n   * @returns {number} Diameter in pixels\r\n   */\r\n  getThumbDiameter() {\r\n    return this.thumbSize * 2;\r\n  }\r\n\r\n  /**\r\n   * Get track width\r\n   * @returns {number} Width in pixels\r\n   */\r\n  getTrackWidth() {\r\n    return this.getThumbDiameter() * 2;\r\n  }\r\n\r\n  /**\r\n   * Convert to CSS object for DOM rendering\r\n   * @returns {Object} CSS style object\r\n   */\r\n  toCSSObject() {\r\n    return {\r\n      position: 'relative',\r\n      display: 'inline-flex',\r\n      alignItems: 'center',\r\n      cursor: this.mouseCursor || 'pointer',\r\n      userSelect: 'none'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get track CSS object (off state)\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getTrackOffStyle(themeColors = {}) {\r\n    return {\r\n      width: `${this.getTrackWidth()}px`,\r\n      height: `${this.trackHeight}px`,\r\n      borderRadius: `${this.trackHeight / 2}px`,\r\n      backgroundColor: themeColors.surfaceVariant || '#E7E0EC',\r\n      border: `1px solid ${this.trackOutlineColor || (themeColors.outline || '#79747E')}`,\r\n      transition: `all ${this.animationDuration}ms ease`,\r\n      position: 'absolute',\r\n      top: '50%',\r\n      transform: 'translateY(-50%)'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get track CSS object (on state)\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getTrackOnStyle(themeColors = {}) {\r\n    return {\r\n      ...this.getTrackOffStyle(themeColors),\r\n      backgroundColor: themeColors.primary || '#6750A4',\r\n      border: `1px solid ${themeColors.primary || '#6750A4'}`\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get thumb CSS object (off state)\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getThumbOffStyle(themeColors = {}) {\r\n    return {\r\n      width: `${this.getThumbDiameter()}px`,\r\n      height: `${this.getThumbDiameter()}px`,\r\n      borderRadius: '50%',\r\n      backgroundColor: themeColors.outline || '#79747E',\r\n      position: 'absolute',\r\n      left: `4px`,\r\n      transition: `all ${this.animationDuration}ms ease`,\r\n      zIndex: 1,\r\n      boxShadow: `0 2px 4px rgba(0, 0, 0, 0.1)`\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get thumb CSS object (on state)\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getThumbOnStyle(themeColors = {}) {\r\n    const trackWidth = this.getTrackWidth();\r\n    const thumbDiam = this.getThumbDiameter();\r\n    const rightPos = trackWidth - thumbDiam - 4;\r\n    \r\n    return {\r\n      ...this.getThumbOffStyle(themeColors),\r\n      backgroundColor: themeColors.onPrimary || '#FFFFFF',\r\n      left: `${rightPos}px`,\r\n      boxShadow: `0 4px 8px rgba(0, 0, 0, 0.15)`\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get disabled state CSS object\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getDisabledStyle(themeColors = {}) {\r\n    return {\r\n      opacity: 0.38,\r\n      cursor: 'not-allowed',\r\n      pointerEvents: 'none'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get hover overlay CSS object\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getHoverStyle(themeColors = {}) {\r\n    return {\r\n      backgroundColor: this.hoverColor || (themeColors.primary + '14') || '#6750A414'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get focus state CSS object\r\n   * @param {Object} themeColors - Theme colors object\r\n   * @returns {Object} CSS properties\r\n   */\r\n  getFocusStyle(themeColors = {}) {\r\n    return {\r\n      outline: 'none',\r\n      boxShadow: `0 0 0 ${this.splashRadius}px ${this.focusColor || (themeColors.primary + '24') || '#6750A424'}`\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Copy this theme with updated properties\r\n   * @param {Object} properties - Properties to override\r\n   * @returns {SwitchTheme} New theme instance\r\n   */\r\n  copyWith({\r\n    thumbColor,\r\n    trackColor,\r\n    trackOutlineColor,\r\n    overlayColor,\r\n    focusColor,\r\n    hoverColor,\r\n    thumbSize,\r\n    trackHeight,\r\n    materialTapTargetSize,\r\n    splashRadius,\r\n    mouseCursor,\r\n    enableFeedback,\r\n    animationDuration\r\n  } = {}) {\r\n    return new SwitchTheme({\r\n      thumbColor: thumbColor ?? this.thumbColor,\r\n      trackColor: trackColor ?? this.trackColor,\r\n      trackOutlineColor: trackOutlineColor ?? this.trackOutlineColor,\r\n      overlayColor: overlayColor ?? this.overlayColor,\r\n      focusColor: focusColor ?? this.focusColor,\r\n      hoverColor: hoverColor ?? this.hoverColor,\r\n      thumbSize: thumbSize ?? this.thumbSize,\r\n      trackHeight: trackHeight ?? this.trackHeight,\r\n      materialTapTargetSize: materialTapTargetSize ?? this.materialTapTargetSize,\r\n      splashRadius: splashRadius ?? this.splashRadius,\r\n      mouseCursor: mouseCursor ?? this.mouseCursor,\r\n      enableFeedback: enableFeedback ?? this.enableFeedback,\r\n      animationDuration: animationDuration ?? this.animationDuration\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Merge with another SwitchTheme\r\n   * @param {SwitchTheme} other - Theme to merge with\r\n   * @returns {SwitchTheme} Merged theme\r\n   */\r\n  merge(other) {\r\n    if (!other) return this;\r\n    return this.copyWith({\r\n      thumbColor: other.thumbColor,\r\n      trackColor: other.trackColor,\r\n      trackOutlineColor: other.trackOutlineColor,\r\n      overlayColor: other.overlayColor,\r\n      focusColor: other.focusColor,\r\n      hoverColor: other.hoverColor,\r\n      thumbSize: other.thumbSize,\r\n      trackHeight: other.trackHeight,\r\n      materialTapTargetSize: other.materialTapTargetSize,\r\n      splashRadius: other.splashRadius,\r\n      mouseCursor: other.mouseCursor,\r\n      enableFeedback: other.enableFeedback,\r\n      animationDuration: other.animationDuration\r\n    });\r\n  }\r\n\r\n  toString() {\r\n    return `SwitchTheme(trackHeight: ${this.trackHeight}px, thumbSize: ${this.getThumbDiameter()}px)`;\r\n  }\r\n}"],
-  "mappings": "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",
-  "names": ["SwitchTheme", "thumbColor", "trackColor", "trackOutlineColor", "overlayColor", "focusColor", "hoverColor", "thumbSize", "trackHeight", "materialTapTargetSize", "splashRadius", "mouseCursor", "enableFeedback", "animationDuration", "themeColors", "trackWidth", "thumbDiam", "rightPos", "other"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/text_style.js b/packages/flutterjs_engine/package/material/dist/utils/text_style.js
deleted file mode 100644
index 0f37e943..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/text_style.js
+++ /dev/null
@@ -1 +0,0 @@
-//# sourceMappingURL=text_style.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/text_style.js.map b/packages/flutterjs_engine/package/material/dist/utils/text_style.js.map
deleted file mode 100644
index 98652118..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/text_style.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/typography_theme.js b/packages/flutterjs_engine/package/material/dist/utils/typography_theme.js
deleted file mode 100644
index 7af0cd0a..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/typography_theme.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import{TextStyle as e}from"../material/text.js";class o{constructor({fontFamily:t='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',displayLarge:n,displayMedium:l,displaySmall:i,headlineLarge:a,headlineMedium:s,headlineSmall:h,titleLarge:g,titleMedium:f,titleSmall:S,bodyLarge:r,bodyMedium:y,bodySmall:m,labelLarge:c,labelMedium:d,labelSmall:p}={}){this.fontFamily=t,this.displayLarge=n||new e({fontSize:57,fontWeight:400,lineHeight:64,letterSpacing:0,fontFamily:this.fontFamily}),this.displayMedium=l||new e({fontSize:45,fontWeight:400,lineHeight:52,letterSpacing:0,fontFamily:this.fontFamily}),this.displaySmall=i||new e({fontSize:36,fontWeight:400,lineHeight:44,letterSpacing:0,fontFamily:this.fontFamily}),this.headlineLarge=a||new e({fontSize:32,fontWeight:700,lineHeight:40,letterSpacing:0,fontFamily:this.fontFamily}),this.headlineMedium=s||new e({fontSize:28,fontWeight:700,lineHeight:36,letterSpacing:0,fontFamily:this.fontFamily}),this.headlineSmall=h||new e({fontSize:24,fontWeight:700,lineHeight:32,letterSpacing:0,fontFamily:this.fontFamily}),this.titleLarge=g||new e({fontSize:22,fontWeight:700,lineHeight:28,letterSpacing:0,fontFamily:this.fontFamily}),this.titleMedium=f||new e({fontSize:16,fontWeight:700,lineHeight:24,letterSpacing:.15,fontFamily:this.fontFamily}),this.titleSmall=S||new e({fontSize:14,fontWeight:700,lineHeight:20,letterSpacing:.1,fontFamily:this.fontFamily}),this.bodyLarge=r||new e({fontSize:16,fontWeight:400,lineHeight:24,letterSpacing:.15,fontFamily:this.fontFamily}),this.bodyMedium=y||new e({fontSize:14,fontWeight:400,lineHeight:20,letterSpacing:.25,fontFamily:this.fontFamily}),this.bodySmall=m||new e({fontSize:12,fontWeight:400,lineHeight:16,letterSpacing:.4,fontFamily:this.fontFamily}),this.labelLarge=c||new e({fontSize:14,fontWeight:700,lineHeight:20,letterSpacing:.1,fontFamily:this.fontFamily}),this.labelMedium=d||new e({fontSize:12,fontWeight:700,lineHeight:16,letterSpacing:.5,fontFamily:this.fontFamily}),this.labelSmall=p||new e({fontSize:11,fontWeight:700,lineHeight:16,letterSpacing:.5,fontFamily:this.fontFamily})}getStyle(t){return this[t]??null}getAllStyles(){return{displayLarge:this.displayLarge,displayMedium:this.displayMedium,displaySmall:this.displaySmall,headlineLarge:this.headlineLarge,headlineMedium:this.headlineMedium,headlineSmall:this.headlineSmall,titleLarge:this.titleLarge,titleMedium:this.titleMedium,titleSmall:this.titleSmall,bodyLarge:this.bodyLarge,bodyMedium:this.bodyMedium,bodySmall:this.bodySmall,labelLarge:this.labelLarge,labelMedium:this.labelMedium,labelSmall:this.labelSmall}}static compact(t={}){return new o({displayLarge:new e({fontSize:45,fontWeight:400,lineHeight:52,letterSpacing:0}),displayMedium:new e({fontSize:36,fontWeight:400,lineHeight:44,letterSpacing:0}),displaySmall:new e({fontSize:28,fontWeight:400,lineHeight:36,letterSpacing:0}),headlineLarge:new e({fontSize:24,fontWeight:700,lineHeight:32,letterSpacing:0}),headlineMedium:new e({fontSize:20,fontWeight:700,lineHeight:28,letterSpacing:0}),headlineSmall:new e({fontSize:18,fontWeight:700,lineHeight:26,letterSpacing:0}),...t})}static expanded(t={}){return new o({displayLarge:new e({fontSize:72,fontWeight:400,lineHeight:80,letterSpacing:0}),displayMedium:new e({fontSize:56,fontWeight:400,lineHeight:64,letterSpacing:0}),displaySmall:new e({fontSize:44,fontWeight:400,lineHeight:52,letterSpacing:0}),headlineLarge:new e({fontSize:40,fontWeight:700,lineHeight:48,letterSpacing:0}),headlineMedium:new e({fontSize:36,fontWeight:700,lineHeight:44,letterSpacing:0}),headlineSmall:new e({fontSize:32,fontWeight:700,lineHeight:40,letterSpacing:0}),...t})}toCSSVariables(){let t=`:root {
-`;const n=this.getAllStyles();for(const[l,i]of Object.entries(n)){const a=`--text-${l.replace(/([A-Z])/g,"-$1").toLowerCase()}`;t+=`  ${a}: ${i.fontSize}px/${i.lineHeight}px ${i.fontWeight} ${this.fontFamily};
-`,t+=`  ${a}-letter-spacing: ${i.letterSpacing}px;
-`}return t+="}",t}toCSSClasses(){let t="";const n=this.getAllStyles();for(const[l,i]of Object.entries(n)){const a=`.text-${l.replace(/([A-Z])/g,"-$1").toLowerCase()}`,s=i.toCSSObject();t+=`${a} {
-`;for(const[h,g]of Object.entries(s))t+=`  ${h}: ${g};
-`;t+=`}
-
-`}return t}withFontFamily(t){const n=this.getAllStyles(),l={};for(const[i,a]of Object.entries(n))l[i]=a.copyWith({fontFamily:t});return new o({fontFamily:t,...l})}scale(t){const n=this.getAllStyles(),l={};for(const[i,a]of Object.entries(n))l[i]=a.copyWith({fontSize:Math.round(a.fontSize*t),lineHeight:Math.round(a.lineHeight*t)});return new o({fontFamily:this.fontFamily,...l})}copyWith(t={}){return new o({fontFamily:this.fontFamily,...this.getAllStyles(),...t})}merge(t){return t?this.copyWith(t.getAllStyles()):this}getScaleInfo(){const t=this.getAllStyles(),n={};for(const[l,i]of Object.entries(t))n[l]={fontSize:i.fontSize,fontWeight:i.fontWeight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing};return{fontFamily:this.fontFamily,scales:n,totalStyles:Object.keys(n).length}}toString(){return`TypographyTheme(fontFamily: ${this.fontFamily}, scales: 13)`}}export{o as TypographyTheme};
-//# sourceMappingURL=typography_theme.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/typography_theme.js.map b/packages/flutterjs_engine/package/material/dist/utils/typography_theme.js.map
deleted file mode 100644
index edeb7d9b..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/typography_theme.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/typography_theme.js"],
-  "sourcesContent": ["import { TextStyle } from '../material/text.js';\r\n\r\n/**\r\n * Material Design 3 Typography System\r\n * Defines 13 text styles following Material Design 3 scale\r\n * Follows Flutter Material Design 3 specification\r\n * \r\n * Flutter Reference: https://api.flutter.dev/flutter/material/TextTheme-class.html\r\n */\r\nexport class TypographyTheme {\r\n  constructor({\r\n    fontFamily = '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif',\r\n    displayLarge,\r\n    displayMedium,\r\n    displaySmall,\r\n    headlineLarge,\r\n    headlineMedium,\r\n    headlineSmall,\r\n    titleLarge,\r\n    titleMedium,\r\n    titleSmall,\r\n    bodyLarge,\r\n    bodyMedium,\r\n    bodySmall,\r\n    labelLarge,\r\n    labelMedium,\r\n    labelSmall\r\n  } = {}) {\r\n    this.fontFamily = fontFamily;\r\n\r\n    // ========== DISPLAY STYLES (Large headlines) ==========\r\n    // Used for: Large prominent text\r\n    this.displayLarge = displayLarge || new TextStyle({\r\n      fontSize: 57,\r\n      fontWeight: 400,\r\n      lineHeight: 64,\r\n      letterSpacing: 0,\r\n      fontFamily: this.fontFamily\r\n    });\r\n\r\n    this.displayMedium = displayMedium || new TextStyle({\r\n      fontSize: 45,\r\n      fontWeight: 400,\r\n      lineHeight: 52,\r\n      letterSpacing: 0,\r\n      fontFamily: this.fontFamily\r\n    });\r\n\r\n    this.displaySmall = displaySmall || new TextStyle({\r\n      fontSize: 36,\r\n      fontWeight: 400,\r\n      lineHeight: 44,\r\n      letterSpacing: 0,\r\n      fontFamily: this.fontFamily\r\n    });\r\n\r\n    // ========== HEADLINE STYLES (Section headlines) ==========\r\n    // Used for: Page titles, section headers\r\n    this.headlineLarge = headlineLarge || new TextStyle({\r\n      fontSize: 32,\r\n      fontWeight: 700,\r\n      lineHeight: 40,\r\n      letterSpacing: 0,\r\n      fontFamily: this.fontFamily\r\n    });\r\n\r\n    this.headlineMedium = headlineMedium || new TextStyle({\r\n      fontSize: 28,\r\n      fontWeight: 700,\r\n      lineHeight: 36,\r\n      letterSpacing: 0,\r\n      fontFamily: this.fontFamily\r\n    });\r\n\r\n    this.headlineSmall = headlineSmall || new TextStyle({\r\n      fontSize: 24,\r\n      fontWeight: 700,\r\n      lineHeight: 32,\r\n      letterSpacing: 0,\r\n      fontFamily: this.fontFamily\r\n    });\r\n\r\n    // ========== TITLE STYLES (Emphasis text) ==========\r\n    // Used for: Card titles, dialog titles\r\n    this.titleLarge = titleLarge || new TextStyle({\r\n      fontSize: 22,\r\n      fontWeight: 700,\r\n      lineHeight: 28,\r\n      letterSpacing: 0,\r\n      fontFamily: this.fontFamily\r\n    });\r\n\r\n    this.titleMedium = titleMedium || new TextStyle({\r\n      fontSize: 16,\r\n      fontWeight: 700,\r\n      lineHeight: 24,\r\n      letterSpacing: 0.15,\r\n      fontFamily: this.fontFamily\r\n    });\r\n\r\n    this.titleSmall = titleSmall || new TextStyle({\r\n      fontSize: 14,\r\n      fontWeight: 700,\r\n      lineHeight: 20,\r\n      letterSpacing: 0.1,\r\n      fontFamily: this.fontFamily\r\n    });\r\n\r\n    // ========== BODY STYLES (Main text) ==========\r\n    // Used for: Body text, descriptions\r\n    this.bodyLarge = bodyLarge || new TextStyle({\r\n      fontSize: 16,\r\n      fontWeight: 400,\r\n      lineHeight: 24,\r\n      letterSpacing: 0.15,\r\n      fontFamily: this.fontFamily\r\n    });\r\n\r\n    this.bodyMedium = bodyMedium || new TextStyle({\r\n      fontSize: 14,\r\n      fontWeight: 400,\r\n      lineHeight: 20,\r\n      letterSpacing: 0.25,\r\n      fontFamily: this.fontFamily\r\n    });\r\n\r\n    this.bodySmall = bodySmall || new TextStyle({\r\n      fontSize: 12,\r\n      fontWeight: 400,\r\n      lineHeight: 16,\r\n      letterSpacing: 0.4,\r\n      fontFamily: this.fontFamily\r\n    });\r\n\r\n    // ========== LABEL STYLES (Small emphasis) ==========\r\n    // Used for: Buttons, chips, tags\r\n    this.labelLarge = labelLarge || new TextStyle({\r\n      fontSize: 14,\r\n      fontWeight: 700,\r\n      lineHeight: 20,\r\n      letterSpacing: 0.1,\r\n      fontFamily: this.fontFamily\r\n    });\r\n\r\n    this.labelMedium = labelMedium || new TextStyle({\r\n      fontSize: 12,\r\n      fontWeight: 700,\r\n      lineHeight: 16,\r\n      letterSpacing: 0.5,\r\n      fontFamily: this.fontFamily\r\n    });\r\n\r\n    this.labelSmall = labelSmall || new TextStyle({\r\n      fontSize: 11,\r\n      fontWeight: 700,\r\n      lineHeight: 16,\r\n      letterSpacing: 0.5,\r\n      fontFamily: this.fontFamily\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Get text style by name\r\n   * @param {string} styleName - Name of the style\r\n   * @returns {TextStyle} Text style instance\r\n   * \r\n   * @example\r\n   * const style = theme.getStyle('bodyLarge');\r\n   */\r\n  getStyle(styleName) {\r\n    return this[styleName] ?? null;\r\n  }\r\n\r\n  /**\r\n   * Get all text styles as object\r\n   * @returns {Object} All text styles\r\n   */\r\n  getAllStyles() {\r\n    return {\r\n      displayLarge: this.displayLarge,\r\n      displayMedium: this.displayMedium,\r\n      displaySmall: this.displaySmall,\r\n      headlineLarge: this.headlineLarge,\r\n      headlineMedium: this.headlineMedium,\r\n      headlineSmall: this.headlineSmall,\r\n      titleLarge: this.titleLarge,\r\n      titleMedium: this.titleMedium,\r\n      titleSmall: this.titleSmall,\r\n      bodyLarge: this.bodyLarge,\r\n      bodyMedium: this.bodyMedium,\r\n      bodySmall: this.bodySmall,\r\n      labelLarge: this.labelLarge,\r\n      labelMedium: this.labelMedium,\r\n      labelSmall: this.labelSmall\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Create a compact typography scale (smaller sizes)\r\n   * @param {Object} config - Overrides\r\n   * @returns {TypographyTheme} Compact theme\r\n   * \r\n   * @example\r\n   * const compact = TypographyTheme.compact();\r\n   */\r\n  static compact(config = {}) {\r\n    return new TypographyTheme({\r\n      displayLarge: new TextStyle({\r\n        fontSize: 45,\r\n        fontWeight: 400,\r\n        lineHeight: 52,\r\n        letterSpacing: 0\r\n      }),\r\n      displayMedium: new TextStyle({\r\n        fontSize: 36,\r\n        fontWeight: 400,\r\n        lineHeight: 44,\r\n        letterSpacing: 0\r\n      }),\r\n      displaySmall: new TextStyle({\r\n        fontSize: 28,\r\n        fontWeight: 400,\r\n        lineHeight: 36,\r\n        letterSpacing: 0\r\n      }),\r\n      headlineLarge: new TextStyle({\r\n        fontSize: 24,\r\n        fontWeight: 700,\r\n        lineHeight: 32,\r\n        letterSpacing: 0\r\n      }),\r\n      headlineMedium: new TextStyle({\r\n        fontSize: 20,\r\n        fontWeight: 700,\r\n        lineHeight: 28,\r\n        letterSpacing: 0\r\n      }),\r\n      headlineSmall: new TextStyle({\r\n        fontSize: 18,\r\n        fontWeight: 700,\r\n        lineHeight: 26,\r\n        letterSpacing: 0\r\n      }),\r\n      ...config\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Create an expanded typography scale (larger sizes)\r\n   * @param {Object} config - Overrides\r\n   * @returns {TypographyTheme} Expanded theme\r\n   * \r\n   * @example\r\n   * const expanded = TypographyTheme.expanded();\r\n   */\r\n  static expanded(config = {}) {\r\n    return new TypographyTheme({\r\n      displayLarge: new TextStyle({\r\n        fontSize: 72,\r\n        fontWeight: 400,\r\n        lineHeight: 80,\r\n        letterSpacing: 0\r\n      }),\r\n      displayMedium: new TextStyle({\r\n        fontSize: 56,\r\n        fontWeight: 400,\r\n        lineHeight: 64,\r\n        letterSpacing: 0\r\n      }),\r\n      displaySmall: new TextStyle({\r\n        fontSize: 44,\r\n        fontWeight: 400,\r\n        lineHeight: 52,\r\n        letterSpacing: 0\r\n      }),\r\n      headlineLarge: new TextStyle({\r\n        fontSize: 40,\r\n        fontWeight: 700,\r\n        lineHeight: 48,\r\n        letterSpacing: 0\r\n      }),\r\n      headlineMedium: new TextStyle({\r\n        fontSize: 36,\r\n        fontWeight: 700,\r\n        lineHeight: 44,\r\n        letterSpacing: 0\r\n      }),\r\n      headlineSmall: new TextStyle({\r\n        fontSize: 32,\r\n        fontWeight: 700,\r\n        lineHeight: 40,\r\n        letterSpacing: 0\r\n      }),\r\n      ...config\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Generate CSS variables for all text styles\r\n   * @returns {string} CSS variable declarations\r\n   * \r\n   * @example\r\n   * const css = theme.toCSSVariables();\r\n   * // Output: --text-display-large: 57px ... ;\r\n   */\r\n  toCSSVariables() {\r\n    let css = ':root {\\n';\r\n    const styles = this.getAllStyles();\r\n    \r\n    for (const [name, style] of Object.entries(styles)) {\r\n      const cssVarName = `--text-${name.replace(/([A-Z])/g, '-$1').toLowerCase()}`;\r\n      css += `  ${cssVarName}: ${style.fontSize}px/${style.lineHeight}px ${style.fontWeight} ${this.fontFamily};\\n`;\r\n      css += `  ${cssVarName}-letter-spacing: ${style.letterSpacing}px;\\n`;\r\n    }\r\n    \r\n    css += '}';\r\n    return css;\r\n  }\r\n\r\n  /**\r\n   * Generate CSS classes for all text styles\r\n   * @returns {string} CSS class definitions\r\n   * \r\n   * @example\r\n   * const css = theme.toCSSClasses();\r\n   * // Output: .text-display-large { font-size: 57px; ... }\r\n   */\r\n  toCSSClasses() {\r\n    let css = '';\r\n    const styles = this.getAllStyles();\r\n    \r\n    for (const [name, style] of Object.entries(styles)) {\r\n      const className = `.text-${name.replace(/([A-Z])/g, '-$1').toLowerCase()}`;\r\n      const styleObj = style.toCSSObject();\r\n      css += `${className} {\\n`;\r\n      for (const [prop, value] of Object.entries(styleObj)) {\r\n        css += `  ${prop}: ${value};\\n`;\r\n      }\r\n      css += '}\\n\\n';\r\n    }\r\n    \r\n    return css;\r\n  }\r\n\r\n  /**\r\n   * Apply font family to all styles\r\n   * @param {string} fontFamily - Font family name\r\n   * @returns {TypographyTheme} Updated theme\r\n   */\r\n  withFontFamily(fontFamily) {\r\n    const styles = this.getAllStyles();\r\n    const updatedStyles = {};\r\n    \r\n    for (const [name, style] of Object.entries(styles)) {\r\n      updatedStyles[name] = style.copyWith({ fontFamily });\r\n    }\r\n    \r\n    return new TypographyTheme({\r\n      fontFamily,\r\n      ...updatedStyles\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Scale all font sizes by a factor\r\n   * @param {number} factor - Scale factor (1.0 = no change)\r\n   * @returns {TypographyTheme} Scaled theme\r\n   * \r\n   * @example\r\n   * const scaledTheme = theme.scale(1.2); // 20% larger\r\n   */\r\n  scale(factor) {\r\n    const styles = this.getAllStyles();\r\n    const scaledStyles = {};\r\n    \r\n    for (const [name, style] of Object.entries(styles)) {\r\n      scaledStyles[name] = style.copyWith({\r\n        fontSize: Math.round(style.fontSize * factor),\r\n        lineHeight: Math.round(style.lineHeight * factor)\r\n      });\r\n    }\r\n    \r\n    return new TypographyTheme({\r\n      fontFamily: this.fontFamily,\r\n      ...scaledStyles\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Copy theme with updated text styles\r\n   * @param {Object} styles - Styles to override\r\n   * @returns {TypographyTheme} New theme instance\r\n   */\r\n  copyWith(styles = {}) {\r\n    return new TypographyTheme({\r\n      fontFamily: this.fontFamily,\r\n      ...this.getAllStyles(),\r\n      ...styles\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Merge with another typography theme\r\n   * @param {TypographyTheme} other - Theme to merge with\r\n   * @returns {TypographyTheme} Merged theme\r\n   */\r\n  merge(other) {\r\n    if (!other) return this;\r\n    return this.copyWith(other.getAllStyles());\r\n  }\r\n\r\n  /**\r\n   * Get typography scale information\r\n   * @returns {Object} Scale details\r\n   */\r\n  getScaleInfo() {\r\n    const styles = this.getAllStyles();\r\n    const sizes = {};\r\n    \r\n    for (const [name, style] of Object.entries(styles)) {\r\n      sizes[name] = {\r\n        fontSize: style.fontSize,\r\n        fontWeight: style.fontWeight,\r\n        lineHeight: style.lineHeight,\r\n        letterSpacing: style.letterSpacing\r\n      };\r\n    }\r\n    \r\n    return {\r\n      fontFamily: this.fontFamily,\r\n      scales: sizes,\r\n      totalStyles: Object.keys(sizes).length\r\n    };\r\n  }\r\n\r\n  toString() {\r\n    return `TypographyTheme(fontFamily: ${this.fontFamily}, scales: 13)`;\r\n  }\r\n}"],
-  "mappings": "AAAA,OAAS,aAAAA,MAAiB,sBASnB,MAAMC,CAAgB,CAC3B,YAAY,CACV,WAAAC,EAAa,oEACb,aAAAC,EACA,cAAAC,EACA,aAAAC,EACA,cAAAC,EACA,eAAAC,EACA,cAAAC,EACA,WAAAC,EACA,YAAAC,EACA,WAAAC,EACA,UAAAC,EACA,WAAAC,EACA,UAAAC,EACA,WAAAC,EACA,YAAAC,EACA,WAAAC,CACF,EAAI,CAAC,EAAG,CACN,KAAK,WAAaf,EAIlB,KAAK,aAAeC,GAAgB,IAAIH,EAAU,CAChD,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,EACf,WAAY,KAAK,UACnB,CAAC,EAED,KAAK,cAAgBI,GAAiB,IAAIJ,EAAU,CAClD,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,EACf,WAAY,KAAK,UACnB,CAAC,EAED,KAAK,aAAeK,GAAgB,IAAIL,EAAU,CAChD,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,EACf,WAAY,KAAK,UACnB,CAAC,EAID,KAAK,cAAgBM,GAAiB,IAAIN,EAAU,CAClD,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,EACf,WAAY,KAAK,UACnB,CAAC,EAED,KAAK,eAAiBO,GAAkB,IAAIP,EAAU,CACpD,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,EACf,WAAY,KAAK,UACnB,CAAC,EAED,KAAK,cAAgBQ,GAAiB,IAAIR,EAAU,CAClD,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,EACf,WAAY,KAAK,UACnB,CAAC,EAID,KAAK,WAAaS,GAAc,IAAIT,EAAU,CAC5C,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,EACf,WAAY,KAAK,UACnB,CAAC,EAED,KAAK,YAAcU,GAAe,IAAIV,EAAU,CAC9C,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,IACf,WAAY,KAAK,UACnB,CAAC,EAED,KAAK,WAAaW,GAAc,IAAIX,EAAU,CAC5C,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,GACf,WAAY,KAAK,UACnB,CAAC,EAID,KAAK,UAAYY,GAAa,IAAIZ,EAAU,CAC1C,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,IACf,WAAY,KAAK,UACnB,CAAC,EAED,KAAK,WAAaa,GAAc,IAAIb,EAAU,CAC5C,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,IACf,WAAY,KAAK,UACnB,CAAC,EAED,KAAK,UAAYc,GAAa,IAAId,EAAU,CAC1C,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,GACf,WAAY,KAAK,UACnB,CAAC,EAID,KAAK,WAAae,GAAc,IAAIf,EAAU,CAC5C,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,GACf,WAAY,KAAK,UACnB,CAAC,EAED,KAAK,YAAcgB,GAAe,IAAIhB,EAAU,CAC9C,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,GACf,WAAY,KAAK,UACnB,CAAC,EAED,KAAK,WAAaiB,GAAc,IAAIjB,EAAU,CAC5C,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,GACf,WAAY,KAAK,UACnB,CAAC,CACH,CAUA,SAASkB,EAAW,CAClB,OAAO,KAAKA,CAAS,GAAK,IAC5B,CAMA,cAAe,CACb,MAAO,CACL,aAAc,KAAK,aACnB,cAAe,KAAK,cACpB,aAAc,KAAK,aACnB,cAAe,KAAK,cACpB,eAAgB,KAAK,eACrB,cAAe,KAAK,cACpB,WAAY,KAAK,WACjB,YAAa,KAAK,YAClB,WAAY,KAAK,WACjB,UAAW,KAAK,UAChB,WAAY,KAAK,WACjB,UAAW,KAAK,UAChB,WAAY,KAAK,WACjB,YAAa,KAAK,YAClB,WAAY,KAAK,UACnB,CACF,CAUA,OAAO,QAAQC,EAAS,CAAC,EAAG,CAC1B,OAAO,IAAIlB,EAAgB,CACzB,aAAc,IAAID,EAAU,CAC1B,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,CACjB,CAAC,EACD,cAAe,IAAIA,EAAU,CAC3B,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,CACjB,CAAC,EACD,aAAc,IAAIA,EAAU,CAC1B,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,CACjB,CAAC,EACD,cAAe,IAAIA,EAAU,CAC3B,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,CACjB,CAAC,EACD,eAAgB,IAAIA,EAAU,CAC5B,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,CACjB,CAAC,EACD,cAAe,IAAIA,EAAU,CAC3B,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,CACjB,CAAC,EACD,GAAGmB,CACL,CAAC,CACH,CAUA,OAAO,SAASA,EAAS,CAAC,EAAG,CAC3B,OAAO,IAAIlB,EAAgB,CACzB,aAAc,IAAID,EAAU,CAC1B,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,CACjB,CAAC,EACD,cAAe,IAAIA,EAAU,CAC3B,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,CACjB,CAAC,EACD,aAAc,IAAIA,EAAU,CAC1B,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,CACjB,CAAC,EACD,cAAe,IAAIA,EAAU,CAC3B,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,CACjB,CAAC,EACD,eAAgB,IAAIA,EAAU,CAC5B,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,CACjB,CAAC,EACD,cAAe,IAAIA,EAAU,CAC3B,SAAU,GACV,WAAY,IACZ,WAAY,GACZ,cAAe,CACjB,CAAC,EACD,GAAGmB,CACL,CAAC,CACH,CAUA,gBAAiB,CACf,IAAIC,EAAM;AAAA,EACV,MAAMC,EAAS,KAAK,aAAa,EAEjC,SAAW,CAACC,EAAMC,CAAK,IAAK,OAAO,QAAQF,CAAM,EAAG,CAClD,MAAMG,EAAa,UAAUF,EAAK,QAAQ,WAAY,KAAK,EAAE,YAAY,CAAC,GAC1EF,GAAO,KAAKI,CAAU,KAAKD,EAAM,QAAQ,MAAMA,EAAM,UAAU,MAAMA,EAAM,UAAU,IAAI,KAAK,UAAU;AAAA,EACxGH,GAAO,KAAKI,CAAU,oBAAoBD,EAAM,aAAa;AAAA,CAC/D,CAEA,OAAAH,GAAO,IACAA,CACT,CAUA,cAAe,CACb,IAAIA,EAAM,GACV,MAAMC,EAAS,KAAK,aAAa,EAEjC,SAAW,CAACC,EAAMC,CAAK,IAAK,OAAO,QAAQF,CAAM,EAAG,CAClD,MAAMI,EAAY,SAASH,EAAK,QAAQ,WAAY,KAAK,EAAE,YAAY,CAAC,GAClEI,EAAWH,EAAM,YAAY,EACnCH,GAAO,GAAGK,CAAS;AAAA,EACnB,SAAW,CAACE,EAAMC,CAAK,IAAK,OAAO,QAAQF,CAAQ,EACjDN,GAAO,KAAKO,CAAI,KAAKC,CAAK;AAAA,EAE5BR,GAAO;AAAA;AAAA,CACT,CAEA,OAAOA,CACT,CAOA,eAAelB,EAAY,CACzB,MAAMmB,EAAS,KAAK,aAAa,EAC3BQ,EAAgB,CAAC,EAEvB,SAAW,CAACP,EAAMC,CAAK,IAAK,OAAO,QAAQF,CAAM,EAC/CQ,EAAcP,CAAI,EAAIC,EAAM,SAAS,CAAE,WAAArB,CAAW,CAAC,EAGrD,OAAO,IAAID,EAAgB,CACzB,WAAAC,EACA,GAAG2B,CACL,CAAC,CACH,CAUA,MAAMC,EAAQ,CACZ,MAAMT,EAAS,KAAK,aAAa,EAC3BU,EAAe,CAAC,EAEtB,SAAW,CAACT,EAAMC,CAAK,IAAK,OAAO,QAAQF,CAAM,EAC/CU,EAAaT,CAAI,EAAIC,EAAM,SAAS,CAClC,SAAU,KAAK,MAAMA,EAAM,SAAWO,CAAM,EAC5C,WAAY,KAAK,MAAMP,EAAM,WAAaO,CAAM,CAClD,CAAC,EAGH,OAAO,IAAI7B,EAAgB,CACzB,WAAY,KAAK,WACjB,GAAG8B,CACL,CAAC,CACH,CAOA,SAASV,EAAS,CAAC,EAAG,CACpB,OAAO,IAAIpB,EAAgB,CACzB,WAAY,KAAK,WACjB,GAAG,KAAK,aAAa,EACrB,GAAGoB,CACL,CAAC,CACH,CAOA,MAAMW,EAAO,CACX,OAAKA,EACE,KAAK,SAASA,EAAM,aAAa,CAAC,EADtB,IAErB,CAMA,cAAe,CACb,MAAMX,EAAS,KAAK,aAAa,EAC3BY,EAAQ,CAAC,EAEf,SAAW,CAACX,EAAMC,CAAK,IAAK,OAAO,QAAQF,CAAM,EAC/CY,EAAMX,CAAI,EAAI,CACZ,SAAUC,EAAM,SAChB,WAAYA,EAAM,WAClB,WAAYA,EAAM,WAClB,cAAeA,EAAM,aACvB,EAGF,MAAO,CACL,WAAY,KAAK,WACjB,OAAQU,EACR,YAAa,OAAO,KAAKA,CAAK,EAAE,MAClC,CACF,CAEA,UAAW,CACT,MAAO,+BAA+B,KAAK,UAAU,eACvD,CACF",
-  "names": ["TextStyle", "TypographyTheme", "fontFamily", "displayLarge", "displayMedium", "displaySmall", "headlineLarge", "headlineMedium", "headlineSmall", "titleLarge", "titleMedium", "titleSmall", "bodyLarge", "bodyMedium", "bodySmall", "labelLarge", "labelMedium", "labelSmall", "styleName", "config", "css", "styles", "name", "style", "cssVarName", "className", "styleObj", "prop", "value", "updatedStyles", "factor", "scaledStyles", "other", "sizes"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/utils/utils.js b/packages/flutterjs_engine/package/material/dist/utils/utils.js
deleted file mode 100644
index dcd3c6fa..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/utils.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export*from"./property/alignment.js";export*from"./property/alignment_directional.js";export*from"./property/axis.js";export*from"./border.js";export*from"./property/border_style.js";export*from"./property/box_fit.js";export*from"./box_shadow.js";export*from"./property/clip.js";export*from"./color.js";export*from"./property/cross_axis_alignment.js";export*from"./duration.js";export*from"./edge_insets.js";export*from"./property/font_weight.js";export*from"./input_decoration.js";export*from"./linear_gradient.js";export*from"./property/main_axis_alignment.js";export*from"./property/text_align.js";export*from"./property/text_overflow.js";export*from"./property/text_direction.js";export*from"./badge_theme.js";export*from"./checkbox_theme.js";export*from"./colors_theme.js";export*from"./divider_theme.js";export*from"./motion_theme.js";export*from"./scrollbar_theme.js";export*from"./shadows_theme.js";export*from"./switch_theme.js";export*from"./typography_theme.js";export*from"./property/axis_direction.js";export*from"./property/blend_mode.js";export*from"./property/box_shape.js";export*from"./property/decoration_position.js";export*from"./property/filter_quality.js";export*from"./property/flex_fit.js";export*from"./property/font_style.js";export*from"./property/horizontal_direction.js";export*from"./property/keyboard_type.js";export*from"./property/main_axis_size.js";export*from"./property/shape_border.js";export*from"./property/stack_fit.js";export*from"./property/text_baseline.js";export*from"./property/text_decoration.js";export*from"./property/text_direction.js";export*from"./property/text_input_action.js";export*from"./property/text_input_type.js";export*from"./property/vertical_direction.js";export*from"./property/wrap_alignment.js";export*from"./property/wrap_cross_alignment.js";export*from"./property/other.js";export*from"./geometry.js";
-//# sourceMappingURL=utils.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/utils/utils.js.map b/packages/flutterjs_engine/package/material/dist/utils/utils.js.map
deleted file mode 100644
index f25cbd2e..00000000
--- a/packages/flutterjs_engine/package/material/dist/utils/utils.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/utils/utils.js"],
-  "sourcesContent": ["// index.js (or index.ts) - Barrel file for all design system utilities\r\n\r\n// ===================================================================\r\n// Utils (added 2 days ago)\r\n// ===================================================================\r\nexport * from './property/alignment.js';\r\nexport * from './property/alignment_directional.js';\r\nexport * from './property/axis.js';\r\nexport * from './border.js';\r\n// export * from './border_radius.js';\r\nexport * from './property/border_style.js';\r\nexport * from './property/box_fit.js';\r\nexport * from './box_shadow.js';\r\nexport * from './property/clip.js';\r\nexport * from './color.js';\r\nexport * from './property/cross_axis_alignment.js';\r\nexport * from './duration.js';\r\nexport * from './edge_insets.js';\r\nexport * from './property/font_weight.js';\r\nexport * from './input_decoration.js';\r\nexport * from './linear_gradient.js';\r\nexport * from './property/main_axis_alignment.js';\r\n// export * from './offset.js'; // Commented out: Offset is exported from geometry.js to avoid conflict\r\n// export * from './radius.js';\r\n// export * from './rect.js';\r\n// export * from './size.js';\r\nexport * from './property/text_align.js';\r\nexport * from './property/text_overflow.js';\r\n\r\nexport * from './property/text_direction.js';\r\n\r\n\r\n// ===================================================================\r\n// Themes (updated with new properties)\r\n// ===================================================================\r\nexport * from './badge_theme.js';\r\nexport * from './checkbox_theme.js';\r\nexport * from './colors_theme.js';\r\nexport * from './divider_theme.js';\r\nexport * from './motion_theme.js';\r\nexport * from './scrollbar_theme.js';\r\nexport * from './shadows_theme.js';\r\nexport * from './switch_theme.js';\r\nexport * from './typography_theme.js';\r\n\r\n\r\n// ===================================================================\r\n// New Properties Added (yesterday)\r\n// ===================================================================\r\nexport * from './property/axis_direction.js';\r\nexport * from './property/blend_mode.js';\r\nexport * from './property/box_shape.js';\r\nexport * from './property/decoration_position.js';\r\nexport * from './property/filter_quality.js';\r\nexport * from './property/flex_fit.js';\r\nexport * from './property/font_style.js';\r\nexport * from './property/horizontal_direction.js';\r\nexport * from './property/keyboard_type.js';\r\nexport * from './property/main_axis_size.js';\r\nexport * from './property/shape_border.js';\r\nexport * from './property/stack_fit.js';\r\nexport * from './property/text_baseline.js';\r\nexport * from './property/text_decoration.js';\r\nexport * from './property/text_direction.js';\r\nexport * from './property/text_input_action.js';\r\nexport * from './property/text_input_type.js';\r\nexport * from './property/vertical_direction.js';\r\nexport * from './property/wrap_alignment.js';\r\nexport * from './property/wrap_cross_alignment.js';\r\n\r\n\r\n// ===================================================================\r\n// Other / Misc\r\n// ===================================================================\r\nexport * from './property/other.js';\r\nexport * from './geometry.js';"],
-  "mappings": "AAKA,WAAc,0BACd,WAAc,sCACd,WAAc,qBACd,WAAc,cAEd,WAAc,6BACd,WAAc,wBACd,WAAc,kBACd,WAAc,qBACd,WAAc,aACd,WAAc,qCACd,WAAc,gBACd,WAAc,mBACd,WAAc,4BACd,WAAc,wBACd,WAAc,uBACd,WAAc,oCAKd,WAAc,2BACd,WAAc,8BAEd,WAAc,+BAMd,WAAc,mBACd,WAAc,sBACd,WAAc,oBACd,WAAc,qBACd,WAAc,oBACd,WAAc,uBACd,WAAc,qBACd,WAAc,oBACd,WAAc,wBAMd,WAAc,+BACd,WAAc,2BACd,WAAc,0BACd,WAAc,oCACd,WAAc,+BACd,WAAc,yBACd,WAAc,2BACd,WAAc,qCACd,WAAc,8BACd,WAAc,+BACd,WAAc,6BACd,WAAc,0BACd,WAAc,8BACd,WAAc,gCACd,WAAc,+BACd,WAAc,kCACd,WAAc,gCACd,WAAc,mCACd,WAAc,+BACd,WAAc,qCAMd,WAAc,sBACd,WAAc",
-  "names": []
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/aspect_ratio.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/aspect_ratio.js
deleted file mode 100644
index 595ff979..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/aspect_ratio.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{ProxyWidget as l}from"../../core/widget_element.js";import{VNode as d}from"@flutterjs/vdom/vnode";class o extends l{constructor({key:e=null,aspectRatio:t=1,child:n=null}={}){if(super({key:e,child:n}),t<=0)throw new Error(`aspectRatio must be > 0, got: ${t}`);this.aspectRatio=t,this._renderObject=null,this._containerElement=null,this._resizeObserver=null}createRenderObject(e){return{aspectRatio:this.aspectRatio}}updateRenderObject(e,t){t.aspectRatio=this.aspectRatio}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);let t=null;if(this.child){const i=this.child.createElement(e.element,e.element.runtime);i.mount(e.element),t=i.performRebuild()}const n=e.element.getElementId(),r=e.element.getWidgetPath(),h={position:"relative",width:"100%",paddingBottom:`${1/this.aspectRatio*100}%`,height:0,overflow:"hidden"};return new d({tag:"div",props:{style:h,"data-element-id":n,"data-widget-path":r,"data-widget":"AspectRatio","data-aspect-ratio":this.aspectRatio,ref:i=>this._onContainerMount(i)},children:[new d({tag:"div",props:{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%"}},children:t?[t]:[]})],key:this.key})}_onContainerMount(e){if(!e)return;this._containerElement=e,window.ResizeObserver&&(this._resizeObserver=new ResizeObserver(()=>{this._updateAspectRatio()}),this._resizeObserver.observe(e));const t=()=>this._updateAspectRatio();window.addEventListener("resize",t),e._cleanupResize=()=>{window.removeEventListener("resize",t),this._resizeObserver&&this._resizeObserver.disconnect()}}_updateAspectRatio(){if(!this._containerElement)return;const e=1/this.aspectRatio*100;this._containerElement.style.paddingBottom=`${e}%`}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"aspectRatio",value:this.aspectRatio})}createElement(e,t){return new u(this,e,t)}}class a{constructor({aspectRatio:e=1}={}){this.aspectRatio=e}debugInfo(){return{type:"RenderAspectRatio",aspectRatio:this.aspectRatio}}}class u extends l.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}detach(){this.widget._containerElement&&this.widget._containerElement._cleanupResize&&this.widget._containerElement._cleanupResize(),super.detach()}}class p extends l{constructor({key:e=null,stepWidth:t=null,stepHeight:n=null,child:r=null}={}){if(super({key:e,child:r}),t!==null&&t<0)throw new Error("stepWidth must be >= 0");if(n!==null&&n<0)throw new Error("stepHeight must be >= 0");this.stepWidth=t===0?null:t,this.stepHeight=n===0?null:n,this._renderObject=null,this._containerElement=null,this._childElement=null,this._resizeObserver=null}createRenderObject(e){return{stepWidth:this.stepWidth,stepHeight:this.stepHeight}}updateRenderObject(e,t){t.stepWidth=this.stepWidth,t.stepHeight=this.stepHeight}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);let t=null;if(this.child){const i=this.child.createElement(e.element,e.element.runtime);i.mount(e.element),t=i.performRebuild()}const n=e.element.getElementId(),r=e.element.getWidgetPath(),h={position:"relative",width:"fit-content",height:"auto"};return new d({tag:"div",props:{style:h,"data-element-id":n,"data-widget-path":r,"data-widget":"IntrinsicWidth","data-step-width":this.stepWidth,"data-step-height":this.stepHeight,ref:i=>this._onContainerMount(i)},children:[new d({tag:"div",props:{style:{position:"relative",width:"100%",height:"100%"},ref:i=>this._onChildMount(i)},children:t?[t]:[]})],key:this.key})}_onContainerMount(e){if(!e)return;this._containerElement=e,window.ResizeObserver&&(this._resizeObserver=new ResizeObserver(()=>{this._calculateIntrinsicWidth()}),this._resizeObserver.observe(e));const t=()=>this._calculateIntrinsicWidth();window.addEventListener("resize",t),e._cleanupResize=()=>{window.removeEventListener("resize",t),this._resizeObserver&&this._resizeObserver.disconnect()},setTimeout(()=>this._calculateIntrinsicWidth(),0)}_onChildMount(e){e&&(this._childElement=e,this._calculateIntrinsicWidth())}_calculateIntrinsicWidth(){if(!(!this._containerElement||!this._childElement))try{const e=this._childElement.getBoundingClientRect();let t=e.width;if(this.stepWidth&&this.stepWidth>0&&(t=Math.ceil(t/this.stepWidth)*this.stepWidth),this.stepHeight&&this.stepHeight>0){let n=e.height;n=Math.ceil(n/this.stepHeight)*this.stepHeight,this._childElement.style.height=`${n}px`}this._containerElement.style.width=`${t}px`}catch(e){console.error("Error calculating intrinsic width:",e)}}debugFillProperties(e){super.debugFillProperties(e),this.stepWidth!==null&&e.push({name:"stepWidth",value:this.stepWidth}),this.stepHeight!==null&&e.push({name:"stepHeight",value:this.stepHeight})}createElement(e,t){return new m(this,e,t)}}class g{constructor({stepWidth:e=null,stepHeight:t=null}={}){this.stepWidth=e,this.stepHeight=t}debugInfo(){return{type:"RenderIntrinsicWidth",stepWidth:this.stepWidth,stepHeight:this.stepHeight}}}class m extends l.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}detach(){this.widget._containerElement&&this.widget._containerElement._cleanupResize&&this.widget._containerElement._cleanupResize(),super.detach()}}class _ extends l{constructor({key:e=null,child:t=null}={}){super({key:e,child:t}),this._renderObject=null,this._containerElement=null,this._childElement=null,this._resizeObserver=null}createRenderObject(e){return{}}updateRenderObject(e,t){}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);let t=null;if(this.child){const i=this.child.createElement(e.element,e.element.runtime);i.mount(e.element),t=i.performRebuild()}const n=e.element.getElementId(),r=e.element.getWidgetPath(),h={position:"relative",width:"100%",height:"fit-content"};return new d({tag:"div",props:{style:h,"data-element-id":n,"data-widget-path":r,"data-widget":"IntrinsicHeight",ref:i=>this._onContainerMount(i)},children:[new d({tag:"div",props:{style:{position:"relative",width:"100%",height:"100%"},ref:i=>this._onChildMount(i)},children:t?[t]:[]})],key:this.key})}_onContainerMount(e){if(!e)return;this._containerElement=e,window.ResizeObserver&&(this._resizeObserver=new ResizeObserver(()=>{this._calculateIntrinsicHeight()}),this._resizeObserver.observe(e));const t=()=>this._calculateIntrinsicHeight();window.addEventListener("resize",t),e._cleanupResize=()=>{window.removeEventListener("resize",t),this._resizeObserver&&this._resizeObserver.disconnect()},setTimeout(()=>this._calculateIntrinsicHeight(),0)}_onChildMount(e){e&&(this._childElement=e,this._calculateIntrinsicHeight())}_calculateIntrinsicHeight(){if(!(!this._containerElement||!this._childElement))try{const t=this._childElement.getBoundingClientRect().height;this._containerElement.style.height=`${t}px`}catch(e){console.error("Error calculating intrinsic height:",e)}}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"type",value:"IntrinsicHeight"})}createElement(e,t){return new w(this,e,t)}}class b{constructor(){}debugInfo(){return{type:"RenderIntrinsicHeight"}}}class w extends l.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}detach(){this.widget._containerElement&&this.widget._containerElement._cleanupResize&&this.widget._containerElement._cleanupResize(),super.detach()}}class R extends l{constructor({key:e=null,child:t=null}={}){super({key:e,child:t}),this._renderObject=null}createRenderObject(e){return new c}updateRenderObject(e,t){}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);let t=null;if(this.child){const i=this.child.createElement(e.element,e.element.runtime);i.mount(e.element),t=i.performRebuild()}const n=e.element.getElementId(),r=e.element.getWidgetPath(),h={position:"relative",display:"inline-block"};return new d({tag:"div",props:{style:h,"data-element-id":n,"data-widget-path":r,"data-widget":"IgnoreBaseline","data-ignore-baseline":"true"},children:t?[t]:[],key:this.key})}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"ignoresBaseline",value:!0})}createElement(e,t){return new E(this,e,t)}}class c{constructor(){}debugInfo(){return{type:"RenderIgnoreBaseline",ignoresBaseline:!0}}}class E extends l.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}}export{o as AspectRatio,R as IgnoreBaseline,_ as IntrinsicHeight,p as IntrinsicWidth,a as RenderAspectRatio,c as RenderIgnoreBaseline,b as RenderIntrinsicHeight,g as RenderIntrinsicWidth};
-//# sourceMappingURL=aspect_ratio.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/aspect_ratio.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/aspect_ratio.js.map
deleted file mode 100644
index 665b6464..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/aspect_ratio.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/aspect_ratio.js"],
-  "sourcesContent": ["import { ProxyWidget } from '../../core/widget_element.js';\r\nimport { VNode } from \"@flutterjs/vdom/vnode\";\r\n\r\n// ============================================================================\r\n// ASPECT RATIO WIDGET\r\n// Maintains a specific aspect ratio for its child\r\n// ============================================================================\r\n\r\nclass AspectRatio extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        aspectRatio = 1.0,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (aspectRatio <= 0) {\r\n            throw new Error(`aspectRatio must be > 0, got: ${aspectRatio}`);\r\n        }\r\n\r\n        this.aspectRatio = aspectRatio;\r\n        this._renderObject = null;\r\n        this._containerElement = null;\r\n        this._resizeObserver = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return {\r\n            aspectRatio: this.aspectRatio\r\n        };\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.aspectRatio = this.aspectRatio;\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        const style = {\r\n            position: 'relative',\r\n            width: '100%',\r\n            paddingBottom: `${(1 / this.aspectRatio) * 100}%`,\r\n            height: 0,\r\n            overflow: 'hidden'\r\n        };\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style,\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'AspectRatio',\r\n                'data-aspect-ratio': this.aspectRatio,\r\n                ref: (el) => this._onContainerMount(el)\r\n            },\r\n            children: [\r\n                new VNode({\r\n                    tag: 'div',\r\n                    props: {\r\n                        style: {\r\n                            position: 'absolute',\r\n                            top: 0,\r\n                            left: 0,\r\n                            width: '100%',\r\n                            height: '100%'\r\n                        }\r\n                    },\r\n                    children: childVNode ? [childVNode] : []\r\n                })\r\n            ],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Mount container\r\n     * @private\r\n     */\r\n    _onContainerMount(el) {\r\n        if (!el) return;\r\n\r\n        this._containerElement = el;\r\n\r\n        // Update on resize\r\n        if (window.ResizeObserver) {\r\n            this._resizeObserver = new ResizeObserver(() => {\r\n                this._updateAspectRatio();\r\n            });\r\n            this._resizeObserver.observe(el);\r\n        }\r\n\r\n        const resizeHandler = () => this._updateAspectRatio();\r\n        window.addEventListener('resize', resizeHandler);\r\n\r\n        el._cleanupResize = () => {\r\n            window.removeEventListener('resize', resizeHandler);\r\n            if (this._resizeObserver) {\r\n                this._resizeObserver.disconnect();\r\n            }\r\n        };\r\n    }\r\n\r\n    /**\r\n     * Update aspect ratio padding\r\n     * @private\r\n     */\r\n    _updateAspectRatio() {\r\n        if (!this._containerElement) return;\r\n\r\n        const paddingBottom = (1 / this.aspectRatio) * 100;\r\n        this._containerElement.style.paddingBottom = `${paddingBottom}%`;\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'aspectRatio', value: this.aspectRatio });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new AspectRatioElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER ASPECT RATIO\r\n// ============================================================================\r\n\r\nclass RenderAspectRatio {\r\n    constructor({ aspectRatio = 1.0 } = {}) {\r\n        this.aspectRatio = aspectRatio;\r\n    }\r\n\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderAspectRatio',\r\n            aspectRatio: this.aspectRatio\r\n        };\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// ASPECT RATIO ELEMENT\r\n// ============================================================================\r\n\r\nclass AspectRatioElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n\r\n    detach() {\r\n        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {\r\n            this.widget._containerElement._cleanupResize();\r\n        }\r\n        super.detach();\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// INTRINSIC WIDTH WIDGET\r\n// Sizes child to its intrinsic width\r\n// ============================================================================\r\n\r\nclass IntrinsicWidth extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        stepWidth = null,\r\n        stepHeight = null,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (stepWidth !== null && stepWidth < 0) {\r\n            throw new Error('stepWidth must be >= 0');\r\n        }\r\n\r\n        if (stepHeight !== null && stepHeight < 0) {\r\n            throw new Error('stepHeight must be >= 0');\r\n        }\r\n\r\n        // Convert 0 to null (per Flutter spec)\r\n        this.stepWidth = stepWidth === 0 ? null : stepWidth;\r\n        this.stepHeight = stepHeight === 0 ? null : stepHeight;\r\n        this._renderObject = null;\r\n        this._containerElement = null;\r\n        this._childElement = null;\r\n        this._resizeObserver = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return {\r\n            stepWidth: this.stepWidth,\r\n            stepHeight: this.stepHeight\r\n        };\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.stepWidth = this.stepWidth;\r\n        renderObject.stepHeight = this.stepHeight;\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        const style = {\r\n            position: 'relative',\r\n            width: 'fit-content',\r\n            height: 'auto'\r\n        };\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style,\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'IntrinsicWidth',\r\n                'data-step-width': this.stepWidth,\r\n                'data-step-height': this.stepHeight,\r\n                ref: (el) => this._onContainerMount(el)\r\n            },\r\n            children: [\r\n                new VNode({\r\n                    tag: 'div',\r\n                    props: {\r\n                        style: {\r\n                            position: 'relative',\r\n                            width: '100%',\r\n                            height: '100%'\r\n                        },\r\n                        ref: (el) => this._onChildMount(el)\r\n                    },\r\n                    children: childVNode ? [childVNode] : []\r\n                })\r\n            ],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Mount container\r\n     * @private\r\n     */\r\n    _onContainerMount(el) {\r\n        if (!el) return;\r\n\r\n        this._containerElement = el;\r\n\r\n        if (window.ResizeObserver) {\r\n            this._resizeObserver = new ResizeObserver(() => {\r\n                this._calculateIntrinsicWidth();\r\n            });\r\n            this._resizeObserver.observe(el);\r\n        }\r\n\r\n        const resizeHandler = () => this._calculateIntrinsicWidth();\r\n        window.addEventListener('resize', resizeHandler);\r\n\r\n        el._cleanupResize = () => {\r\n            window.removeEventListener('resize', resizeHandler);\r\n            if (this._resizeObserver) {\r\n                this._resizeObserver.disconnect();\r\n            }\r\n        };\r\n\r\n        setTimeout(() => this._calculateIntrinsicWidth(), 0);\r\n    }\r\n\r\n    /**\r\n     * Mount child\r\n     * @private\r\n     */\r\n    _onChildMount(el) {\r\n        if (!el) return;\r\n        this._childElement = el;\r\n        this._calculateIntrinsicWidth();\r\n    }\r\n\r\n    /**\r\n     * Calculate and apply intrinsic width\r\n     * @private\r\n     */\r\n    _calculateIntrinsicWidth() {\r\n        if (!this._containerElement || !this._childElement) return;\r\n\r\n        try {\r\n            // Get child's natural width\r\n            const childRect = this._childElement.getBoundingClientRect();\r\n            let width = childRect.width;\r\n\r\n            // Apply step width if specified\r\n            if (this.stepWidth && this.stepWidth > 0) {\r\n                width = Math.ceil(width / this.stepWidth) * this.stepWidth;\r\n            }\r\n\r\n            // Apply step height if specified\r\n            if (this.stepHeight && this.stepHeight > 0) {\r\n                let height = childRect.height;\r\n                height = Math.ceil(height / this.stepHeight) * this.stepHeight;\r\n                this._childElement.style.height = `${height}px`;\r\n            }\r\n\r\n            // Set container width to match child\r\n            this._containerElement.style.width = `${width}px`;\r\n        } catch (error) {\r\n            console.error('Error calculating intrinsic width:', error);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        if (this.stepWidth !== null) {\r\n            properties.push({ name: 'stepWidth', value: this.stepWidth });\r\n        }\r\n        if (this.stepHeight !== null) {\r\n            properties.push({ name: 'stepHeight', value: this.stepHeight });\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new IntrinsicWidthElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER INTRINSIC WIDTH\r\n// ============================================================================\r\n\r\nclass RenderIntrinsicWidth {\r\n    constructor({ stepWidth = null, stepHeight = null } = {}) {\r\n        this.stepWidth = stepWidth;\r\n        this.stepHeight = stepHeight;\r\n    }\r\n\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderIntrinsicWidth',\r\n            stepWidth: this.stepWidth,\r\n            stepHeight: this.stepHeight\r\n        };\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// INTRINSIC WIDTH ELEMENT\r\n// ============================================================================\r\n\r\nclass IntrinsicWidthElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n\r\n    detach() {\r\n        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {\r\n            this.widget._containerElement._cleanupResize();\r\n        }\r\n        super.detach();\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// INTRINSIC HEIGHT WIDGET\r\n// Sizes child to its intrinsic height\r\n// ============================================================================\r\n\r\nclass IntrinsicHeight extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        this._renderObject = null;\r\n        this._containerElement = null;\r\n        this._childElement = null;\r\n        this._resizeObserver = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return {};\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        // No updates needed\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        const style = {\r\n            position: 'relative',\r\n            width: '100%',\r\n            height: 'fit-content'\r\n        };\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style,\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'IntrinsicHeight',\r\n                ref: (el) => this._onContainerMount(el)\r\n            },\r\n            children: [\r\n                new VNode({\r\n                    tag: 'div',\r\n                    props: {\r\n                        style: {\r\n                            position: 'relative',\r\n                            width: '100%',\r\n                            height: '100%'\r\n                        },\r\n                        ref: (el) => this._onChildMount(el)\r\n                    },\r\n                    children: childVNode ? [childVNode] : []\r\n                })\r\n            ],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Mount container\r\n     * @private\r\n     */\r\n    _onContainerMount(el) {\r\n        if (!el) return;\r\n\r\n        this._containerElement = el;\r\n\r\n        if (window.ResizeObserver) {\r\n            this._resizeObserver = new ResizeObserver(() => {\r\n                this._calculateIntrinsicHeight();\r\n            });\r\n            this._resizeObserver.observe(el);\r\n        }\r\n\r\n        const resizeHandler = () => this._calculateIntrinsicHeight();\r\n        window.addEventListener('resize', resizeHandler);\r\n\r\n        el._cleanupResize = () => {\r\n            window.removeEventListener('resize', resizeHandler);\r\n            if (this._resizeObserver) {\r\n                this._resizeObserver.disconnect();\r\n            }\r\n        };\r\n\r\n        setTimeout(() => this._calculateIntrinsicHeight(), 0);\r\n    }\r\n\r\n    /**\r\n     * Mount child\r\n     * @private\r\n     */\r\n    _onChildMount(el) {\r\n        if (!el) return;\r\n        this._childElement = el;\r\n        this._calculateIntrinsicHeight();\r\n    }\r\n\r\n    /**\r\n     * Calculate and apply intrinsic height\r\n     * @private\r\n     */\r\n    _calculateIntrinsicHeight() {\r\n        if (!this._containerElement || !this._childElement) return;\r\n\r\n        try {\r\n            // Get child's natural height\r\n            const childRect = this._childElement.getBoundingClientRect();\r\n            const height = childRect.height;\r\n\r\n            // Set container height to match child\r\n            this._containerElement.style.height = `${height}px`;\r\n        } catch (error) {\r\n            console.error('Error calculating intrinsic height:', error);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'type', value: 'IntrinsicHeight' });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new IntrinsicHeightElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER INTRINSIC HEIGHT\r\n// ============================================================================\r\n\r\nclass RenderIntrinsicHeight {\r\n    constructor() { }\r\n\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderIntrinsicHeight'\r\n        };\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// INTRINSIC HEIGHT ELEMENT\r\n// ============================================================================\r\n\r\nclass IntrinsicHeightElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n\r\n    detach() {\r\n        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {\r\n            this.widget._containerElement._cleanupResize();\r\n        }\r\n        super.detach();\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// IGNORE BASELINE WIDGET\r\n// Prevents child from affecting parent's baseline calculation\r\n// ============================================================================\r\n\r\nclass IgnoreBaseline extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        this._renderObject = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return new RenderIgnoreBaseline();\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        // No properties to update\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        const style = {\r\n            position: 'relative',\r\n            display: 'inline-block'\r\n        };\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style,\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'IgnoreBaseline',\r\n                // Set attributes to prevent baseline calculation\r\n                'data-ignore-baseline': 'true'\r\n            },\r\n            children: childVNode ? [childVNode] : [],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'ignoresBaseline', value: true });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new IgnoreBaselineElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER IGNORE BASELINE\r\n// ============================================================================\r\n\r\nclass RenderIgnoreBaseline {\r\n    constructor() { }\r\n\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderIgnoreBaseline',\r\n            ignoresBaseline: true\r\n        };\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// IGNORE BASELINE ELEMENT\r\n// ============================================================================\r\n\r\nclass IgnoreBaselineElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n}\r\n\r\nexport {\r\n\r\n    RenderAspectRatio,\r\n    IntrinsicWidth,\r\n    RenderIntrinsicWidth,\r\n    IntrinsicHeight,\r\n    RenderIntrinsicHeight,\r\n    AspectRatio,\r\n\r\n\r\n\r\n    IgnoreBaseline,\r\n    RenderIgnoreBaseline,\r\n\r\n};"],
-  "mappings": "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",
-  "names": ["ProxyWidget", "VNode", "AspectRatio", "key", "aspectRatio", "child", "context", "renderObject", "childVNode", "childElement", "elementId", "widgetPath", "style", "el", "resizeHandler", "paddingBottom", "properties", "parent", "runtime", "AspectRatioElement", "RenderAspectRatio", "IntrinsicWidth", "stepWidth", "stepHeight", "childRect", "width", "height", "error", "IntrinsicWidthElement", "RenderIntrinsicWidth", "IntrinsicHeight", "IntrinsicHeightElement", "RenderIntrinsicHeight", "IgnoreBaseline", "RenderIgnoreBaseline", "IgnoreBaselineElement"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/backdrop.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/backdrop.js
deleted file mode 100644
index d6d036be..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/backdrop.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{UbiquitousInheritedWidget as o,UbiquitousInheritedElement as l}from"./directionality.js";import{VNode as s}from"@flutterjs/vdom/vnode";class i{constructor(e=null){this.debugLabel=e,this._id=Math.random().toString(36).substr(2,9)}equals(e){return e instanceof i&&this._id===e._id}toString(){return`BackdropKey${this.debugLabel?`(${this.debugLabel})`:""}`}}class r extends o{constructor({key:e=null,child:t=null,backdropKey:d=null}={}){if(super({key:e,child:t}),this.backdropKey=d||new i,!t)throw new Error("BackdropGroup requires a child widget")}updateShouldNotify(e){return!this.backdropKey.equals(e.backdropKey)}static of(e){const t=e.dependOnInheritedWidgetOfExactType(r);if(!t)throw new Error("BackdropGroup.of() called with a context that does not contain a BackdropGroup widget. Make sure to wrap your widget tree with a BackdropGroup widget.");return t}static maybeOf(e){return e.getInheritedWidgetOfExactType(r)||null}build(e){let t=null;if(this.child)if(this.child.createElement){const n=this.child.createElement(e.element,e.element.runtime);n.mount(e.element),t=n.performRebuild()}else t=this.child;const d=e.element.getElementId(),a=e.element.getWidgetPath();return new s({tag:"div",props:{style:{position:"relative"},"data-element-id":d,"data-widget-path":a,"data-widget":"BackdropGroup","data-backdrop-key":this.backdropKey.toString()},children:t?[t]:[],key:this.key})}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"backdropKey",value:this.backdropKey.toString()})}createElement(e,t){return new l(this,e,t)}}export{r as BackdropGroup,i as BackdropKey};
-//# sourceMappingURL=backdrop.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/backdrop.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/backdrop.js.map
deleted file mode 100644
index c4fc871e..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/backdrop.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/backdrop.js"],
-  "sourcesContent": ["import { UbiquitousInheritedWidget, UbiquitousInheritedElement } from './directionality.js';\r\n\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\n\r\n\r\n\r\n\r\n// ============================================================================\r\n// BACKDROP KEY\r\n// Unique identifier for backdrop group\r\n// ============================================================================\r\n\r\nclass BackdropKey {\r\n    constructor(debugLabel = null) {\r\n        this.debugLabel = debugLabel;\r\n        this._id = Math.random().toString(36).substr(2, 9);\r\n    }\r\n\r\n    equals(other) {\r\n        return other instanceof BackdropKey && this._id === other._id;\r\n    }\r\n\r\n    toString() {\r\n        return `BackdropKey${this.debugLabel ? `(${this.debugLabel})` : ''}`;\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// BACKDROP GROUP\r\n// Ubiquitous inherited widget that groups backdrop-related widgets\r\n// Provides backdrop context to all descendants\r\n// ============================================================================\r\n\r\nclass BackdropGroup extends UbiquitousInheritedWidget {\r\n    constructor({ key = null, child = null, backdropKey = null } = {}) {\r\n        super({ key, child });\r\n\r\n        // Create or use provided backdrop key\r\n        this.backdropKey = backdropKey || new BackdropKey();\r\n\r\n        // Validate child\r\n        if (!child) {\r\n            throw new Error('BackdropGroup requires a child widget');\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Check if should notify dependents\r\n     */\r\n    updateShouldNotify(oldWidget) {\r\n        // Notify if backdrop key changes\r\n        return !this.backdropKey.equals(oldWidget.backdropKey);\r\n    }\r\n\r\n    /**\r\n     * Get BackdropGroup from context\r\n     * Throws if not found\r\n     */\r\n    static of(context) {\r\n        const widget = context.dependOnInheritedWidgetOfExactType(BackdropGroup);\r\n\r\n        if (!widget) {\r\n            throw new Error(\r\n                'BackdropGroup.of() called with a context that does not contain a BackdropGroup widget. ' +\r\n                'Make sure to wrap your widget tree with a BackdropGroup widget.'\r\n            );\r\n        }\r\n\r\n        return widget;\r\n    }\r\n\r\n    /**\r\n     * Get BackdropGroup from context (returns null if not found)\r\n     */\r\n    static maybeOf(context) {\r\n        const widget = context.getInheritedWidgetOfExactType(BackdropGroup);\r\n        return widget || null;\r\n    }\r\n\r\n    /**\r\n     * Build the widget tree\r\n     */\r\n    build(context) {\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            if (this.child.createElement) {\r\n                const childElement = this.child.createElement(context.element, context.element.runtime);\r\n                childElement.mount(context.element);\r\n                childVNode = childElement.performRebuild();\r\n            } else {\r\n                childVNode = this.child;\r\n            }\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style: {\r\n                    position: 'relative'\r\n                },\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'BackdropGroup',\r\n                'data-backdrop-key': this.backdropKey.toString()\r\n            },\r\n            children: childVNode ? [childVNode] : [],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({\r\n            name: 'backdropKey',\r\n            value: this.backdropKey.toString()\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new UbiquitousInheritedElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\nexport { BackdropGroup, BackdropKey };"],
-  "mappings": "AAAA,OAAS,6BAAAA,EAA2B,8BAAAC,MAAkC,sBAEtE,OAAS,SAAAC,MAAa,wBAUtB,MAAMC,CAAY,CACd,YAAYC,EAAa,KAAM,CAC3B,KAAK,WAAaA,EAClB,KAAK,IAAM,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,OAAO,EAAG,CAAC,CACrD,CAEA,OAAOC,EAAO,CACV,OAAOA,aAAiBF,GAAe,KAAK,MAAQE,EAAM,GAC9D,CAEA,UAAW,CACP,MAAO,cAAc,KAAK,WAAa,IAAI,KAAK,UAAU,IAAM,EAAE,EACtE,CACJ,CAQA,MAAMC,UAAsBN,CAA0B,CAClD,YAAY,CAAE,IAAAO,EAAM,KAAM,MAAAC,EAAQ,KAAM,YAAAC,EAAc,IAAK,EAAI,CAAC,EAAG,CAO/D,GANA,MAAM,CAAE,IAAAF,EAAK,MAAAC,CAAM,CAAC,EAGpB,KAAK,YAAcC,GAAe,IAAIN,EAGlC,CAACK,EACD,MAAM,IAAI,MAAM,uCAAuC,CAE/D,CAKA,mBAAmBE,EAAW,CAE1B,MAAO,CAAC,KAAK,YAAY,OAAOA,EAAU,WAAW,CACzD,CAMA,OAAO,GAAGC,EAAS,CACf,MAAMC,EAASD,EAAQ,mCAAmCL,CAAa,EAEvE,GAAI,CAACM,EACD,MAAM,IAAI,MACN,wJAEJ,EAGJ,OAAOA,CACX,CAKA,OAAO,QAAQD,EAAS,CAEpB,OADeA,EAAQ,8BAA8BL,CAAa,GACjD,IACrB,CAKA,MAAMK,EAAS,CACX,IAAIE,EAAa,KACjB,GAAI,KAAK,MACL,GAAI,KAAK,MAAM,cAAe,CAC1B,MAAMC,EAAe,KAAK,MAAM,cAAcH,EAAQ,QAASA,EAAQ,QAAQ,OAAO,EACtFG,EAAa,MAAMH,EAAQ,OAAO,EAClCE,EAAaC,EAAa,eAAe,CAC7C,MACID,EAAa,KAAK,MAI1B,MAAME,EAAYJ,EAAQ,QAAQ,aAAa,EACzCK,EAAaL,EAAQ,QAAQ,cAAc,EAEjD,OAAO,IAAIT,EAAM,CACb,IAAK,MACL,MAAO,CACH,MAAO,CACH,SAAU,UACd,EACA,kBAAmBa,EACnB,mBAAoBC,EACpB,cAAe,gBACf,oBAAqB,KAAK,YAAY,SAAS,CACnD,EACA,SAAUH,EAAa,CAACA,CAAU,EAAI,CAAC,EACvC,IAAK,KAAK,GACd,CAAC,CACL,CAKA,oBAAoBI,EAAY,CAC5B,MAAM,oBAAoBA,CAAU,EACpCA,EAAW,KAAK,CACZ,KAAM,cACN,MAAO,KAAK,YAAY,SAAS,CACrC,CAAC,CACL,CAKA,cAAcC,EAAQC,EAAS,CAC3B,OAAO,IAAIlB,EAA2B,KAAKiB,EAAQC,CAAO,CAC9D,CACJ",
-  "names": ["UbiquitousInheritedWidget", "UbiquitousInheritedElement", "VNode", "BackdropKey", "debugLabel", "other", "BackdropGroup", "key", "child", "backdropKey", "oldWidget", "context", "widget", "childVNode", "childElement", "elementId", "widgetPath", "properties", "parent", "runtime"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/card.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/card.js
deleted file mode 100644
index eb1f1d98..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/card.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{StatelessWidget as h}from"../../core/widget_element.js";import{Container as c,BoxDecoration as u}from"../../material/container.js";import{EdgeInsets as m,BorderRadius as p}from"../../utils/utils.js";import{Colors as s}from"../../material/color.js";class b extends h{constructor({key:i=null,color:o=null,shadowColor:t=null,elevation:r=1,shape:l=null,margin:e=null,clipBehavior:a=null,child:n=null,semanticContainer:d=!0}={}){super(i),this.color=o,this.shadowColor=t,this.elevation=r,this.shape=l,this.margin=e||m.all(4),this.clipBehavior=a,this.child=n,this.semanticContainer=d}build(i){const o=this.color||s.white,t=this.shadowColor||s.black,r=this.shape?.borderRadius||p.circular(4);return new c({margin:this.margin,decoration:new u({color:o,borderRadius:r,boxShadow:this.elevation>0?[{color:"rgba(0,0,0,0.2)",offsetX:0,offsetY:1,blurRadius:3,spreadRadius:1}]:[]}),child:this.child})}}export{b as Card};
-//# sourceMappingURL=card.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/card.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/card.js.map
deleted file mode 100644
index 257dc272..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/card.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/card.js"],
-  "sourcesContent": ["import { StatelessWidget } from '../../core/widget_element.js';\r\nimport { Container, BoxDecoration } from '../../material/container.js';\r\nimport { EdgeInsets, BorderRadius } from '../../utils/utils.js';\r\nimport { Colors } from '../../material/color.js';\r\n\r\nclass Card extends StatelessWidget {\r\n    constructor({\r\n        key = null,\r\n        color = null,\r\n        shadowColor = null,\r\n        elevation = 1,\r\n        shape = null,\r\n        margin = null,\r\n        clipBehavior = null,\r\n        child = null,\r\n        semanticContainer = true\r\n    } = {}) {\r\n        super(key);\r\n        this.color = color;\r\n        this.shadowColor = shadowColor;\r\n        this.elevation = elevation;\r\n        this.shape = shape;\r\n        this.margin = margin || EdgeInsets.all(4);\r\n        this.clipBehavior = clipBehavior;\r\n        this.child = child;\r\n        this.semanticContainer = semanticContainer;\r\n    }\r\n\r\n    build(context) {\r\n        // Basic card implementation using Container\r\n        const cardColor = this.color || Colors.white;\r\n        const shadowColor = this.shadowColor || Colors.black;\r\n        const borderRadius = this.shape?.borderRadius || BorderRadius.circular(4);\r\n\r\n        return new Container({\r\n            margin: this.margin,\r\n            decoration: new BoxDecoration({\r\n                color: cardColor,\r\n                borderRadius: borderRadius,\r\n                boxShadow: this.elevation > 0 ? [\r\n                    {\r\n                        color: 'rgba(0,0,0,0.2)',\r\n                        offsetX: 0,\r\n                        offsetY: 1,\r\n                        blurRadius: 3,\r\n                        spreadRadius: 1\r\n                    }\r\n                ] : []\r\n            }),\r\n            child: this.child\r\n        });\r\n    }\r\n}\r\n\r\nexport { Card };\r\n"],
-  "mappings": "AAAA,OAAS,mBAAAA,MAAuB,+BAChC,OAAS,aAAAC,EAAW,iBAAAC,MAAqB,8BACzC,OAAS,cAAAC,EAAY,gBAAAC,MAAoB,uBACzC,OAAS,UAAAC,MAAc,0BAEvB,MAAMC,UAAaN,CAAgB,CAC/B,YAAY,CACR,IAAAO,EAAM,KACN,MAAAC,EAAQ,KACR,YAAAC,EAAc,KACd,UAAAC,EAAY,EACZ,MAAAC,EAAQ,KACR,OAAAC,EAAS,KACT,aAAAC,EAAe,KACf,MAAAC,EAAQ,KACR,kBAAAC,EAAoB,EACxB,EAAI,CAAC,EAAG,CACJ,MAAMR,CAAG,EACT,KAAK,MAAQC,EACb,KAAK,YAAcC,EACnB,KAAK,UAAYC,EACjB,KAAK,MAAQC,EACb,KAAK,OAASC,GAAUT,EAAW,IAAI,CAAC,EACxC,KAAK,aAAeU,EACpB,KAAK,MAAQC,EACb,KAAK,kBAAoBC,CAC7B,CAEA,MAAMC,EAAS,CAEX,MAAMC,EAAY,KAAK,OAASZ,EAAO,MACjCI,EAAc,KAAK,aAAeJ,EAAO,MACzCa,EAAe,KAAK,OAAO,cAAgBd,EAAa,SAAS,CAAC,EAExE,OAAO,IAAIH,EAAU,CACjB,OAAQ,KAAK,OACb,WAAY,IAAIC,EAAc,CAC1B,MAAOe,EACP,aAAcC,EACd,UAAW,KAAK,UAAY,EAAI,CAC5B,CACI,MAAO,kBACP,QAAS,EACT,QAAS,EACT,WAAY,EACZ,aAAc,CAClB,CACJ,EAAI,CAAC,CACT,CAAC,EACD,MAAO,KAAK,KAChB,CAAC,CACL,CACJ",
-  "names": ["StatelessWidget", "Container", "BoxDecoration", "EdgeInsets", "BorderRadius", "Colors", "Card", "key", "color", "shadowColor", "elevation", "shape", "margin", "clipBehavior", "child", "semanticContainer", "context", "cardColor", "borderRadius"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/center.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/center.js
deleted file mode 100644
index f7ee4764..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/center.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{Widget as m}from"../../core/widget_element.js";import{VNode as o}from"@flutterjs/vdom/vnode";import{Element as g}from"@flutterjs/runtime";import{Alignment as a}from"../../utils/utils.js";class h extends m{constructor({key:t=null,alignment:e=a.center,widthFactor:n=null,heightFactor:l=null,child:i=null}={}){super(t),this.alignment=e,this.widthFactor=n,this.heightFactor=l,this.child=i}build(t){const e=this._getInlineStyles(),n=t.element.getElementId(),l=t.element.getWidgetPath();let i=null;if(this.child){const r=this.child.createElement(t.element,t.element.runtime);r.mount(t.element),i=r.performRebuild()}return new o({tag:"div",props:{style:e,"data-element-id":n,"data-widget-path":l,"data-widget":"Align","data-alignment":this.alignment?.toString()},children:i?[i]:[],key:this.key})}_getInlineStyles(){const t={display:"flex",...this._getAlignmentStyles()};return this.widthFactor!==null?t.width=`${this.widthFactor*100}%`:t.width="100%",this.heightFactor!==null?t.height=`${this.heightFactor*100}%`:t.height="100%",t}_getAlignmentStyles(){const t=this.alignment?.toString()||"center",e={"top-left":{justifyContent:"flex-start",alignItems:"flex-start"},"top-center":{justifyContent:"center",alignItems:"flex-start"},"top-right":{justifyContent:"flex-end",alignItems:"flex-start"},"center-left":{justifyContent:"flex-start",alignItems:"center"},center:{justifyContent:"center",alignItems:"center"},"center-right":{justifyContent:"flex-end",alignItems:"center"},"bottom-left":{justifyContent:"flex-start",alignItems:"flex-end"},"bottom-center":{justifyContent:"center",alignItems:"flex-end"},"bottom-right":{justifyContent:"flex-end",alignItems:"flex-end"}};return e[t]||e.center}createElement(t,e){return new c(this,t,e)}debugFillProperties(t){super.debugFillProperties(t),t.push({name:"alignment",value:this.alignment}),t.push({name:"widthFactor",value:this.widthFactor}),t.push({name:"heightFactor",value:this.heightFactor}),this.child&&t.push({name:"child",value:this.child.constructor.name})}}class c extends g{performRebuild(){return this.widget.build(this.context)}}class d extends h{constructor({key:t=null,widthFactor:e=null,heightFactor:n=null,child:l=null}={}){super({key:t,alignment:a.center,widthFactor:e,heightFactor:n,child:l})}}export{h as Align,d as Center};
-//# sourceMappingURL=center.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/center.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/center.js.map
deleted file mode 100644
index 9234fc88..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/center.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/center.js"],
-  "sourcesContent": ["import { Widget, StatelessWidget } from '../../core/widget_element.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { Element } from '@flutterjs/runtime';\r\nimport { Alignment } from '../../utils/utils.js';\r\n\r\nclass Align extends Widget {\r\n  constructor({\r\n    key = null,\r\n    alignment = Alignment.center,\r\n    widthFactor = null,\r\n    heightFactor = null,\r\n    child = null\r\n  } = {}) {\r\n    super(key);\r\n    this.alignment = alignment;\r\n    this.widthFactor = widthFactor;\r\n    this.heightFactor = heightFactor;\r\n    this.child = child;\r\n  }\r\n\r\n  /**\r\n   * Build widget tree - called by AlignElement\r\n   */\r\n  build(context) {\r\n    const inlineStyles = this._getInlineStyles();\r\n    const elementId = context.element.getElementId();\r\n    const widgetPath = context.element.getWidgetPath();\r\n\r\n    let childVNode = null;\r\n    if (this.child) {\r\n      const childElement = this.child.createElement(context.element, context.element.runtime);\r\n      childElement.mount(context.element);\r\n      childVNode = childElement.performRebuild();\r\n    }\r\n\r\n    return new VNode({\r\n      tag: 'div',\r\n      props: {\r\n        style: inlineStyles,\r\n        'data-element-id': elementId,\r\n        'data-widget-path': widgetPath,\r\n        'data-widget': 'Align',\r\n        'data-alignment': this.alignment?.toString()\r\n      },\r\n      children: childVNode ? [childVNode] : [],\r\n      key: this.key\r\n    });\r\n  }\r\n\r\n  _getInlineStyles() {\r\n    const styles = {\r\n      display: 'flex',\r\n      ...this._getAlignmentStyles()\r\n    };\r\n\r\n    if (this.widthFactor !== null) {\r\n      styles.width = `${this.widthFactor * 100}%`;\r\n    } else {\r\n      styles.width = '100%';\r\n    }\r\n\r\n    if (this.heightFactor !== null) {\r\n      styles.height = `${this.heightFactor * 100}%`;\r\n    } else {\r\n      styles.height = '100%';\r\n    }\r\n\r\n    return styles;\r\n  }\r\n\r\n  _getAlignmentStyles() {\r\n    const alignmentStr = this.alignment?.toString() || 'center';\r\n    const alignmentMap = {\r\n      'top-left': { justifyContent: 'flex-start', alignItems: 'flex-start' },\r\n      'top-center': { justifyContent: 'center', alignItems: 'flex-start' },\r\n      'top-right': { justifyContent: 'flex-end', alignItems: 'flex-start' },\r\n      'center-left': { justifyContent: 'flex-start', alignItems: 'center' },\r\n      'center': { justifyContent: 'center', alignItems: 'center' },\r\n      'center-right': { justifyContent: 'flex-end', alignItems: 'center' },\r\n      'bottom-left': { justifyContent: 'flex-start', alignItems: 'flex-end' },\r\n      'bottom-center': { justifyContent: 'center', alignItems: 'flex-end' },\r\n      'bottom-right': { justifyContent: 'flex-end', alignItems: 'flex-end' }\r\n    };\r\n\r\n    return alignmentMap[alignmentStr] || alignmentMap['center'];\r\n  }\r\n\r\n  createElement(parent, runtime) {\r\n    return new AlignElement(this, parent, runtime);\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({ name: 'alignment', value: this.alignment });\r\n    properties.push({ name: 'widthFactor', value: this.widthFactor });\r\n    properties.push({ name: 'heightFactor', value: this.heightFactor });\r\n    if (this.child) {\r\n      properties.push({ name: 'child', value: this.child.constructor.name });\r\n    }\r\n  }\r\n}\r\n\r\nclass AlignElement extends Element {\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n}\r\n\r\nclass Center extends Align {\r\n  constructor({\r\n    key = null,\r\n    widthFactor = null,\r\n    heightFactor = null,\r\n    child = null\r\n  } = {}) {\r\n    super({\r\n      key,\r\n      alignment: Alignment.center,\r\n      widthFactor,\r\n      heightFactor,\r\n      child\r\n    });\r\n  }\r\n}\r\n\r\nexport { Align, Center };\r\n"],
-  "mappings": "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",
-  "names": ["Widget", "VNode", "Element", "Alignment", "Align", "key", "alignment", "widthFactor", "heightFactor", "child", "context", "inlineStyles", "elementId", "widgetPath", "childVNode", "childElement", "styles", "alignmentStr", "alignmentMap", "parent", "runtime", "AlignElement", "properties", "Center"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/clip.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/clip.js
deleted file mode 100644
index 584206f8..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/clip.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{ProxyWidget as c}from"../../core/widget_element.js";import{VNode as d}from"@flutterjs/vdom/vnode";import{Clip as n}from"../../utils/utils.js";class p{constructor(){if(new.target===p)throw new Error("CustomClipper is abstract")}getClip(e){throw new Error("getClip() must be implemented")}shouldReclip(e){return!0}}class w extends c{constructor({key:e=null,clipper:t=null,clipBehavior:i=n.hardEdge,child:r=null}={}){if(super({key:e,child:r}),t&&!(t instanceof p))throw new Error(`ClipRect requires a CustomClipper instance, got: ${typeof t}`);if(!Object.values(n).includes(i))throw new Error(`Invalid clipBehavior: ${i}`);this.clipper=t,this.clipBehavior=i,this._renderObject=null,this._containerElement=null}createRenderObject(e){return new m({clipper:this.clipper,clipBehavior:this.clipBehavior})}updateRenderObject(e,t){t.clipper=this.clipper,t.clipBehavior=this.clipBehavior}unmountRenderObject(e){e.clipper=null}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);let t=null;if(this.child){const o=this.child.createElement(e.element,e.element.runtime);o.mount(e.element),t=o.performRebuild()}const i=e.element.getElementId(),r=e.element.getWidgetPath(),s=this.clipBehavior===n.none?"visible":"hidden",l=this._getClipFilter(),a={overflow:s,position:"relative",filter:l};return new d({tag:"div",props:{style:a,"data-element-id":i,"data-widget-path":r,"data-widget":"ClipRect","data-clip-behavior":this.clipBehavior,ref:o=>this._onContainerMount(o,e)},children:t?[t]:[],key:this.key})}_getClipFilter(){switch(this.clipBehavior){case n.antiAlias:case n.antiAliasWithSaveLayer:return"anti-alias";case n.hardEdge:case n.none:default:return"none"}}_onContainerMount(e,t){if(!e||!this.clipper)return;this._containerElement=e;try{const r=e.getBoundingClientRect(),s={width:Math.ceil(r.width)||100,height:Math.ceil(r.height)||100},l=this.clipper.getClip(s);l&&(e.style.clipPath=l,e.style.WebkitClipPath=l)}catch(r){console.error("Error applying custom clipper:",r)}const i=()=>{if(!(!this.clipper||!this._containerElement))try{const r=this._containerElement.getBoundingClientRect(),s={width:Math.ceil(r.width)||100,height:Math.ceil(r.height)||100},l=this.clipper.getClip(s);l&&(this._containerElement.style.clipPath=l,this._containerElement.style.WebkitClipPath=l)}catch(r){console.error("Error applying custom clipper on resize:",r)}};window.addEventListener("resize",i),e._cleanupResize=()=>{window.removeEventListener("resize",i)}}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"hasClipper",value:!!this.clipper}),e.push({name:"clipBehavior",value:this.clipBehavior})}createElement(e,t){return new f(this,e,t)}}class m{constructor({clipper:e=null,clipBehavior:t=n.hardEdge}={}){this.clipper=e,this.clipBehavior=t}debugInfo(){return{type:"RenderClipRect",hasClipper:!!this.clipper,clipBehavior:this.clipBehavior}}}class f extends c.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}detach(){this.widget._containerElement&&this.widget._containerElement._cleanupResize&&this.widget._containerElement._cleanupResize(),super.detach()}}class C extends c{constructor({key:e=null,borderRadius:t=null,clipper:i=null,clipBehavior:r=n.antiAlias,child:s=null}={}){if(super({key:e,child:s}),i&&!(i instanceof p))throw new Error(`ClipRRect requires a CustomClipper instance, got: ${typeof i}`);if(!Object.values(n).includes(r))throw new Error(`Invalid clipBehavior: ${r}`);this.borderRadius=t||{all:0},this.clipper=i,this.clipBehavior=r,this._renderObject=null,this._containerElement=null}createRenderObject(e){return new g({borderRadius:this.borderRadius,clipper:this.clipper,clipBehavior:this.clipBehavior})}updateRenderObject(e,t){t.borderRadius=this.borderRadius,t.clipBehavior=this.clipBehavior,t.clipper=this.clipper}unmountRenderObject(e){e.clipper=null}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);let t=null;if(this.child){const u=this.child.createElement(e.element,e.element.runtime);u.mount(e.element),t=u.performRebuild()}const i=e.element.getElementId(),r=e.element.getWidgetPath(),s=this._getBorderRadiusCSS(),l=this.clipBehavior===n.none?"visible":"hidden",a=this._getClipFilter(),o={borderRadius:s,overflow:l,position:"relative",filter:a};return new d({tag:"div",props:{style:o,"data-element-id":i,"data-widget-path":r,"data-widget":"ClipRRect","data-border-radius":JSON.stringify(this.borderRadius),"data-clip-behavior":this.clipBehavior,ref:u=>this._onContainerMount(u,e)},children:t?[t]:[],key:this.key})}_getBorderRadiusCSS(){if(typeof this.borderRadius=="number")return`${this.borderRadius}px`;if(this.borderRadius.all!==void 0)return`${this.borderRadius.all}px`;const{topLeft:e=0,topRight:t=0,bottomLeft:i=0,bottomRight:r=0}=this.borderRadius;return`${e}px ${t}px ${r}px ${i}px`}_getClipFilter(){switch(this.clipBehavior){case n.antiAlias:case n.antiAliasWithSaveLayer:return"anti-alias";case n.hardEdge:case n.none:default:return"none"}}_onContainerMount(e,t){if(!e)return;if(this._containerElement=e,this.clipper)try{const r=e.getBoundingClientRect(),s={width:Math.ceil(r.width)||100,height:Math.ceil(r.height)||100},l=this.clipper.getClip(s);l&&(e.style.clipPath=l,e.style.WebkitClipPath=l)}catch(r){console.error("Error applying custom clipper:",r)}const i=()=>{if(this._containerElement&&this.clipper)try{const r=this._containerElement.getBoundingClientRect(),s={width:Math.ceil(r.width)||100,height:Math.ceil(r.height)||100},l=this.clipper.getClip(s);l&&(this._containerElement.style.clipPath=l,this._containerElement.style.WebkitClipPath=l)}catch(r){console.error("Error applying custom clipper on resize:",r)}};window.addEventListener("resize",i),e._cleanupResize=()=>{window.removeEventListener("resize",i)}}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"borderRadius",value:JSON.stringify(this.borderRadius)}),e.push({name:"hasClipper",value:!!this.clipper}),e.push({name:"clipBehavior",value:this.clipBehavior})}createElement(e,t){return new _(this,e,t)}}class g{constructor({borderRadius:e=null,clipper:t=null,clipBehavior:i=n.antiAlias}={}){this.borderRadius=e||{all:0},this.clipper=t,this.clipBehavior=i}debugInfo(){return{type:"RenderClipRRect",borderRadius:JSON.stringify(this.borderRadius),hasClipper:!!this.clipper,clipBehavior:this.clipBehavior}}}class _ extends c.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}detach(){this.widget._containerElement&&this.widget._containerElement._cleanupResize&&this.widget._containerElement._cleanupResize(),super.detach()}}class E extends c{constructor({key:e=null,borderRadius:t=null,clipper:i=null,clipBehavior:r=n.antiAlias,child:s=null}={}){if(super({key:e,child:s}),i&&!(i instanceof p))throw new Error(`ClipRSuperellipse requires a CustomClipper instance, got: ${typeof i}`);if(!Object.values(n).includes(r))throw new Error(`Invalid clipBehavior: ${r}`);this.borderRadius=t||{all:0},this.clipper=i,this.clipBehavior=r,this._renderObject=null,this._containerElement=null}createRenderObject(e){return new b({borderRadius:this.borderRadius,clipper:this.clipper,clipBehavior:this.clipBehavior})}updateRenderObject(e,t){t.borderRadius=this.borderRadius,t.clipBehavior=this.clipBehavior,t.clipper=this.clipper}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);let t=null;if(this.child){const o=this.child.createElement(e.element,e.element.runtime);o.mount(e.element),t=o.performRebuild()}const i=e.element.getElementId(),r=e.element.getWidgetPath(),s=this._getBorderRadiusCSS(),l=this.clipBehavior===n.none?"visible":"hidden",a={borderRadius:s,overflow:l,position:"relative"};return new d({tag:"div",props:{style:a,"data-element-id":i,"data-widget-path":r,"data-widget":"ClipRSuperellipse","data-border-radius":JSON.stringify(this.borderRadius),"data-clip-behavior":this.clipBehavior,ref:o=>this._onContainerMount(o)},children:t?[t]:[],key:this.key})}_getBorderRadiusCSS(){if(typeof this.borderRadius=="number")return`${this.borderRadius}px`;if(this.borderRadius.all!==void 0)return`${this.borderRadius.all}px`;const{topLeft:e=0,topRight:t=0,bottomLeft:i=0,bottomRight:r=0}=this.borderRadius;return`${e}px ${t}px ${r}px ${i}px`}_onContainerMount(e){if(!e)return;this._containerElement=e,this.clipper&&this._applyClipper();const t=()=>this._applyClipper();window.addEventListener("resize",t),e._cleanupResize=()=>window.removeEventListener("resize",t)}_applyClipper(){if(!(!this.clipper||!this._containerElement))try{const e=this._containerElement.getBoundingClientRect(),t={width:Math.ceil(e.width)||100,height:Math.ceil(e.height)||100},i=this.clipper.getClip(t);i&&(this._containerElement.style.clipPath=i,this._containerElement.style.WebkitClipPath=i)}catch(e){console.error("Error applying superellipse clipper:",e)}}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"borderRadius",value:JSON.stringify(this.borderRadius)}),e.push({name:"hasClipper",value:!!this.clipper}),e.push({name:"clipBehavior",value:this.clipBehavior})}createElement(e,t){return new y(this,e,t)}}class b{constructor({borderRadius:e=null,clipper:t=null,clipBehavior:i=n.antiAlias}={}){this.borderRadius=e||{all:0},this.clipper=t,this.clipBehavior=i}debugInfo(){return{type:"RenderClipRSuperellipse",borderRadius:JSON.stringify(this.borderRadius),hasClipper:!!this.clipper,clipBehavior:this.clipBehavior}}}class y extends c.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}detach(){this.widget._containerElement&&this.widget._containerElement._cleanupResize&&this.widget._containerElement._cleanupResize(),super.detach()}}class B extends c{constructor({key:e=null,clipper:t=null,clipBehavior:i=n.antiAlias,child:r=null}={}){if(super({key:e,child:r}),t&&!(t instanceof p))throw new Error(`ClipOval requires a CustomClipper instance, got: ${typeof t}`);if(!Object.values(n).includes(i))throw new Error(`Invalid clipBehavior: ${i}`);this.clipper=t,this.clipBehavior=i,this._renderObject=null,this._containerElement=null}createRenderObject(e){return new R({clipper:this.clipper,clipBehavior:this.clipBehavior})}updateRenderObject(e,t){t.clipper=this.clipper,t.clipBehavior=this.clipBehavior}unmountRenderObject(e){e.clipper=null}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);let t=null;if(this.child){const a=this.child.createElement(e.element,e.element.runtime);a.mount(e.element),t=a.performRebuild()}const i=e.element.getElementId(),r=e.element.getWidgetPath(),l={borderRadius:"50%",overflow:this.clipBehavior===n.none?"visible":"hidden",position:"relative"};return new d({tag:"div",props:{style:l,"data-element-id":i,"data-widget-path":r,"data-widget":"ClipOval","data-clip-behavior":this.clipBehavior,ref:a=>this._onContainerMount(a)},children:t?[t]:[],key:this.key})}_onContainerMount(e){if(!e)return;this._containerElement=e,this.clipper&&this._applyClipper();const t=()=>this._applyClipper();window.addEventListener("resize",t),e._cleanupResize=()=>window.removeEventListener("resize",t)}_applyClipper(){if(!(!this.clipper||!this._containerElement))try{const e=this._containerElement.getBoundingClientRect(),t={width:Math.ceil(e.width)||100,height:Math.ceil(e.height)||100},i=this.clipper.getClip(t);i&&(this._containerElement.style.clipPath=i,this._containerElement.style.WebkitClipPath=i)}catch(e){console.error("Error applying oval clipper:",e)}}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"hasClipper",value:!!this.clipper}),e.push({name:"clipBehavior",value:this.clipBehavior})}createElement(e,t){return new O(this,e,t)}}class R{constructor({clipper:e=null,clipBehavior:t=n.antiAlias}={}){this.clipper=e,this.clipBehavior=t}debugInfo(){return{type:"RenderClipOval",hasClipper:!!this.clipper,clipBehavior:this.clipBehavior}}}class O extends c.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}detach(){this.widget._containerElement&&this.widget._containerElement._cleanupResize&&this.widget._containerElement._cleanupResize(),super.detach()}}class P extends c{constructor({key:e=null,clipper:t=null,clipBehavior:i=n.antiAlias,child:r=null}={}){if(super({key:e,child:r}),t&&!(t instanceof p))throw new Error(`ClipPath requires a CustomClipper instance, got: ${typeof t}`);if(!Object.values(n).includes(i))throw new Error(`Invalid clipBehavior: ${i}`);this.clipper=t,this.clipBehavior=i,this._renderObject=null,this._containerElement=null}createRenderObject(e){return new v({clipper:this.clipper,clipBehavior:this.clipBehavior})}updateRenderObject(e,t){t.clipper=this.clipper,t.clipBehavior=this.clipBehavior}unmountRenderObject(e){e.clipper=null}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);let t=null;if(this.child){const a=this.child.createElement(e.element,e.element.runtime);a.mount(e.element),t=a.performRebuild()}const i=e.element.getElementId(),r=e.element.getWidgetPath(),l={overflow:this.clipBehavior===n.none?"visible":"hidden",position:"relative"};return new d({tag:"div",props:{style:l,"data-element-id":i,"data-widget-path":r,"data-widget":"ClipPath","data-clip-behavior":this.clipBehavior,ref:a=>this._onContainerMount(a)},children:t?[t]:[],key:this.key})}_onContainerMount(e){if(!e)return;this._containerElement=e,this.clipper&&this._applyClipper();const t=()=>this._applyClipper();window.addEventListener("resize",t),e._cleanupResize=()=>window.removeEventListener("resize",t)}_applyClipper(){if(!(!this.clipper||!this._containerElement))try{const e=this._containerElement.getBoundingClientRect(),t={width:Math.ceil(e.width)||100,height:Math.ceil(e.height)||100},i=this.clipper.getClip(t);i&&(this._containerElement.style.clipPath=i,this._containerElement.style.WebkitClipPath=i)}catch(e){console.error("Error applying path clipper:",e)}}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"hasClipper",value:!!this.clipper}),e.push({name:"clipBehavior",value:this.clipBehavior})}createElement(e,t){return new j(this,e,t)}}class v{constructor({clipper:e=null,clipBehavior:t=n.antiAlias}={}){this.clipper=e,this.clipBehavior=t}debugInfo(){return{type:"RenderClipPath",hasClipper:!!this.clipper,clipBehavior:this.clipBehavior}}}class j extends c.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}detach(){this.widget._containerElement&&this.widget._containerElement._cleanupResize&&this.widget._containerElement._cleanupResize(),super.detach()}}export{B as ClipOval,P as ClipPath,C as ClipRRect,E as ClipRSuperellipse,w as ClipRect,p as CustomClipper,R as RenderClipOval,v as RenderClipPath,g as RenderClipRRect,b as RenderClipRSuperellipse,m as RenderClipRect};
-//# sourceMappingURL=clip.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/clip.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/clip.js.map
deleted file mode 100644
index 8ac6fa14..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/clip.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/clip.js"],
-  "sourcesContent": ["import { ProxyWidget } from '../../core/widget_element.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { Clip } from '../../utils/utils.js';\r\n\r\n// ============================================================================\r\n// CUSTOM CLIPPER BASE CLASS\r\n// Override getClip() to return clip-path CSS string\r\n// ============================================================================\r\n\r\nclass CustomClipper {\r\n    constructor() {\r\n        if (new.target === CustomClipper) {\r\n            throw new Error('CustomClipper is abstract');\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Get the clip path (CSS clip-path string)\r\n     * Override in subclasses\r\n     */\r\n    getClip(size) {\r\n        throw new Error('getClip() must be implemented');\r\n    }\r\n\r\n    /**\r\n     * Check if should reclip\r\n     */\r\n    shouldReclip(oldClipper) {\r\n        return true;\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// CLIP RECT WIDGET\r\n// Clips child to rectangular bounds\r\n// ============================================================================\r\n\r\nclass ClipRect extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        clipper = null,\r\n        clipBehavior = Clip.hardEdge,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (clipper && !(clipper instanceof CustomClipper)) {\r\n            throw new Error(\r\n                `ClipRect requires a CustomClipper instance, got: ${typeof clipper}`\r\n            );\r\n        }\r\n\r\n        if (!Object.values(Clip).includes(clipBehavior)) {\r\n            throw new Error(\r\n                `Invalid clipBehavior: ${clipBehavior}`\r\n            );\r\n        }\r\n\r\n        this.clipper = clipper;\r\n        this.clipBehavior = clipBehavior;\r\n        this._renderObject = null;\r\n        this._containerElement = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return new RenderClipRect({\r\n            clipper: this.clipper,\r\n            clipBehavior: this.clipBehavior\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.clipper = this.clipper;\r\n        renderObject.clipBehavior = this.clipBehavior;\r\n    }\r\n\r\n    /**\r\n     * Unmount render object and clean up\r\n     */\r\n    unmountRenderObject(renderObject) {\r\n        renderObject.clipper = null;\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        // Apply clip behavior\r\n        const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';\r\n        const filterValue = this._getClipFilter();\r\n\r\n        const style = {\r\n            overflow: overflowValue,\r\n            position: 'relative',\r\n            filter: filterValue\r\n        };\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style,\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'ClipRect',\r\n                'data-clip-behavior': this.clipBehavior,\r\n                ref: (el) => this._onContainerMount(el, context)\r\n            },\r\n            children: childVNode ? [childVNode] : [],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Get clip filter based on behavior\r\n     * @private\r\n     */\r\n    _getClipFilter() {\r\n        switch (this.clipBehavior) {\r\n            case Clip.antiAlias:\r\n            case Clip.antiAliasWithSaveLayer:\r\n                return 'anti-alias';\r\n            case Clip.hardEdge:\r\n            case Clip.none:\r\n            default:\r\n                return 'none';\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Mount container and apply custom clipper if provided\r\n     * @private\r\n     */\r\n    _onContainerMount(el, context) {\r\n        if (!el || !this.clipper) return;\r\n\r\n        this._containerElement = el;\r\n\r\n        try {\r\n            // Get container dimensions\r\n            const rect = el.getBoundingClientRect();\r\n            const size = {\r\n                width: Math.ceil(rect.width) || 100,\r\n                height: Math.ceil(rect.height) || 100\r\n            };\r\n\r\n            // Get clip path from custom clipper\r\n            const clipPath = this.clipper.getClip(size);\r\n\r\n            if (clipPath) {\r\n                // Apply clip-path CSS\r\n                el.style.clipPath = clipPath;\r\n                el.style.WebkitClipPath = clipPath;\r\n            }\r\n        } catch (error) {\r\n            console.error('Error applying custom clipper:', error);\r\n        }\r\n\r\n        // Re-apply on resize\r\n        const resizeHandler = () => {\r\n            if (!this.clipper || !this._containerElement) return;\r\n\r\n            try {\r\n                const rect = this._containerElement.getBoundingClientRect();\r\n                const size = {\r\n                    width: Math.ceil(rect.width) || 100,\r\n                    height: Math.ceil(rect.height) || 100\r\n                };\r\n\r\n                const clipPath = this.clipper.getClip(size);\r\n                if (clipPath) {\r\n                    this._containerElement.style.clipPath = clipPath;\r\n                    this._containerElement.style.WebkitClipPath = clipPath;\r\n                }\r\n            } catch (error) {\r\n                console.error('Error applying custom clipper on resize:', error);\r\n            }\r\n        };\r\n\r\n        window.addEventListener('resize', resizeHandler);\r\n\r\n        el._cleanupResize = () => {\r\n            window.removeEventListener('resize', resizeHandler);\r\n        };\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'hasClipper', value: !!this.clipper });\r\n        properties.push({ name: 'clipBehavior', value: this.clipBehavior });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new ClipRectElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER CLIP RECT\r\n// ============================================================================\r\n\r\nclass RenderClipRect {\r\n    constructor({ clipper = null, clipBehavior = Clip.hardEdge } = {}) {\r\n        this.clipper = clipper;\r\n        this.clipBehavior = clipBehavior;\r\n    }\r\n\r\n    /**\r\n     * Debug info\r\n     */\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderClipRect',\r\n            hasClipper: !!this.clipper,\r\n            clipBehavior: this.clipBehavior\r\n        };\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// CLIP RECT ELEMENT\r\n// ============================================================================\r\n\r\nclass ClipRectElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n\r\n    detach() {\r\n        // Cleanup resize listener\r\n        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {\r\n            this.widget._containerElement._cleanupResize();\r\n        }\r\n        super.detach();\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// CLIP RRECT WIDGET (Rounded Rectangle Clip)\r\n// ============================================================================\r\n\r\nclass ClipRRect extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        borderRadius = null,\r\n        clipper = null,\r\n        clipBehavior = Clip.antiAlias,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (clipper && !(clipper instanceof CustomClipper)) {\r\n            throw new Error(\r\n                `ClipRRect requires a CustomClipper instance, got: ${typeof clipper}`\r\n            );\r\n        }\r\n\r\n        if (!Object.values(Clip).includes(clipBehavior)) {\r\n            throw new Error(\r\n                `Invalid clipBehavior: ${clipBehavior}`\r\n            );\r\n        }\r\n\r\n        this.borderRadius = borderRadius || { all: 0 };\r\n        this.clipper = clipper;\r\n        this.clipBehavior = clipBehavior;\r\n        this._renderObject = null;\r\n        this._containerElement = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return new RenderClipRRect({\r\n            borderRadius: this.borderRadius,\r\n            clipper: this.clipper,\r\n            clipBehavior: this.clipBehavior\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.borderRadius = this.borderRadius;\r\n        renderObject.clipBehavior = this.clipBehavior;\r\n        renderObject.clipper = this.clipper;\r\n    }\r\n\r\n    /**\r\n     * Unmount render object and clean up\r\n     */\r\n    unmountRenderObject(renderObject) {\r\n        renderObject.clipper = null;\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        // Convert border radius to CSS\r\n        const borderRadiusCss = this._getBorderRadiusCSS();\r\n        const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';\r\n        const filterValue = this._getClipFilter();\r\n\r\n        const style = {\r\n            borderRadius: borderRadiusCss,\r\n            overflow: overflowValue,\r\n            position: 'relative',\r\n            filter: filterValue\r\n        };\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style,\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'ClipRRect',\r\n                'data-border-radius': JSON.stringify(this.borderRadius),\r\n                'data-clip-behavior': this.clipBehavior,\r\n                ref: (el) => this._onContainerMount(el, context)\r\n            },\r\n            children: childVNode ? [childVNode] : [],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Convert border radius object to CSS string\r\n     * @private\r\n     */\r\n    _getBorderRadiusCSS() {\r\n        if (typeof this.borderRadius === 'number') {\r\n            return `${this.borderRadius}px`;\r\n        }\r\n\r\n        if (this.borderRadius.all !== undefined) {\r\n            return `${this.borderRadius.all}px`;\r\n        }\r\n\r\n        const {\r\n            topLeft = 0,\r\n            topRight = 0,\r\n            bottomLeft = 0,\r\n            bottomRight = 0\r\n        } = this.borderRadius;\r\n\r\n        return `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`;\r\n    }\r\n\r\n    /**\r\n     * Get clip filter based on behavior\r\n     * @private\r\n     */\r\n    _getClipFilter() {\r\n        switch (this.clipBehavior) {\r\n            case Clip.antiAlias:\r\n            case Clip.antiAliasWithSaveLayer:\r\n                return 'anti-alias';\r\n            case Clip.hardEdge:\r\n            case Clip.none:\r\n            default:\r\n                return 'none';\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Mount container and apply custom clipper if provided\r\n     * @private\r\n     */\r\n    _onContainerMount(el, context) {\r\n        if (!el) return;\r\n\r\n        this._containerElement = el;\r\n\r\n        // Apply custom clipper if provided\r\n        if (this.clipper) {\r\n            try {\r\n                const rect = el.getBoundingClientRect();\r\n                const size = {\r\n                    width: Math.ceil(rect.width) || 100,\r\n                    height: Math.ceil(rect.height) || 100\r\n                };\r\n\r\n                const clipPath = this.clipper.getClip(size);\r\n                if (clipPath) {\r\n                    el.style.clipPath = clipPath;\r\n                    el.style.WebkitClipPath = clipPath;\r\n                }\r\n            } catch (error) {\r\n                console.error('Error applying custom clipper:', error);\r\n            }\r\n        }\r\n\r\n        // Re-apply on resize\r\n        const resizeHandler = () => {\r\n            if (!this._containerElement) return;\r\n\r\n            if (this.clipper) {\r\n                try {\r\n                    const rect = this._containerElement.getBoundingClientRect();\r\n                    const size = {\r\n                        width: Math.ceil(rect.width) || 100,\r\n                        height: Math.ceil(rect.height) || 100\r\n                    };\r\n\r\n                    const clipPath = this.clipper.getClip(size);\r\n                    if (clipPath) {\r\n                        this._containerElement.style.clipPath = clipPath;\r\n                        this._containerElement.style.WebkitClipPath = clipPath;\r\n                    }\r\n                } catch (error) {\r\n                    console.error('Error applying custom clipper on resize:', error);\r\n                }\r\n            }\r\n        };\r\n\r\n        window.addEventListener('resize', resizeHandler);\r\n\r\n        el._cleanupResize = () => {\r\n            window.removeEventListener('resize', resizeHandler);\r\n        };\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'borderRadius', value: JSON.stringify(this.borderRadius) });\r\n        properties.push({ name: 'hasClipper', value: !!this.clipper });\r\n        properties.push({ name: 'clipBehavior', value: this.clipBehavior });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new ClipRRectElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER CLIP RRECT\r\n// ============================================================================\r\n\r\nclass RenderClipRRect {\r\n    constructor({\r\n        borderRadius = null,\r\n        clipper = null,\r\n        clipBehavior = Clip.antiAlias\r\n    } = {}) {\r\n        this.borderRadius = borderRadius || { all: 0 };\r\n        this.clipper = clipper;\r\n        this.clipBehavior = clipBehavior;\r\n    }\r\n\r\n    /**\r\n     * Debug info\r\n     */\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderClipRRect',\r\n            borderRadius: JSON.stringify(this.borderRadius),\r\n            hasClipper: !!this.clipper,\r\n            clipBehavior: this.clipBehavior\r\n        };\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// CLIP RRECT ELEMENT\r\n// ============================================================================\r\n\r\nclass ClipRRectElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n\r\n    detach() {\r\n        // Cleanup resize listener\r\n        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {\r\n            this.widget._containerElement._cleanupResize();\r\n        }\r\n        super.detach();\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// CLIP RSUPERELLIPSE WIDGET\r\n// Clips to superellipse shape with border radius\r\n// ============================================================================\r\n\r\nclass ClipRSuperellipse extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        borderRadius = null,\r\n        clipper = null,\r\n        clipBehavior = Clip.antiAlias,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (clipper && !(clipper instanceof CustomClipper)) {\r\n            throw new Error(\r\n                `ClipRSuperellipse requires a CustomClipper instance, got: ${typeof clipper}`\r\n            );\r\n        }\r\n\r\n        if (!Object.values(Clip).includes(clipBehavior)) {\r\n            throw new Error(\r\n                `Invalid clipBehavior: ${clipBehavior}`\r\n            );\r\n        }\r\n\r\n        this.borderRadius = borderRadius || { all: 0 };\r\n        this.clipper = clipper;\r\n        this.clipBehavior = clipBehavior;\r\n        this._renderObject = null;\r\n        this._containerElement = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return new RenderClipRSuperellipse({\r\n            borderRadius: this.borderRadius,\r\n            clipper: this.clipper,\r\n            clipBehavior: this.clipBehavior\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.borderRadius = this.borderRadius;\r\n        renderObject.clipBehavior = this.clipBehavior;\r\n        renderObject.clipper = this.clipper;\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        const borderRadiusCss = this._getBorderRadiusCSS();\r\n        const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';\r\n\r\n        const style = {\r\n            borderRadius: borderRadiusCss,\r\n            overflow: overflowValue,\r\n            position: 'relative'\r\n        };\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style,\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'ClipRSuperellipse',\r\n                'data-border-radius': JSON.stringify(this.borderRadius),\r\n                'data-clip-behavior': this.clipBehavior,\r\n                ref: (el) => this._onContainerMount(el)\r\n            },\r\n            children: childVNode ? [childVNode] : [],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Convert border radius to CSS string\r\n     * @private\r\n     */\r\n    _getBorderRadiusCSS() {\r\n        if (typeof this.borderRadius === 'number') {\r\n            return `${this.borderRadius}px`;\r\n        }\r\n\r\n        if (this.borderRadius.all !== undefined) {\r\n            return `${this.borderRadius.all}px`;\r\n        }\r\n\r\n        const {\r\n            topLeft = 0,\r\n            topRight = 0,\r\n            bottomLeft = 0,\r\n            bottomRight = 0\r\n        } = this.borderRadius;\r\n\r\n        return `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`;\r\n    }\r\n\r\n    /**\r\n     * Mount container and apply custom clipper\r\n     * @private\r\n     */\r\n    _onContainerMount(el) {\r\n        if (!el) return;\r\n\r\n        this._containerElement = el;\r\n\r\n        if (this.clipper) {\r\n            this._applyClipper();\r\n        }\r\n\r\n        const resizeHandler = () => this._applyClipper();\r\n        window.addEventListener('resize', resizeHandler);\r\n        el._cleanupResize = () => window.removeEventListener('resize', resizeHandler);\r\n    }\r\n\r\n    /**\r\n     * Apply custom clipper\r\n     * @private\r\n     */\r\n    _applyClipper() {\r\n        if (!this.clipper || !this._containerElement) return;\r\n\r\n        try {\r\n            const rect = this._containerElement.getBoundingClientRect();\r\n            const size = {\r\n                width: Math.ceil(rect.width) || 100,\r\n                height: Math.ceil(rect.height) || 100\r\n            };\r\n\r\n            const clipPath = this.clipper.getClip(size);\r\n            if (clipPath) {\r\n                this._containerElement.style.clipPath = clipPath;\r\n                this._containerElement.style.WebkitClipPath = clipPath;\r\n            }\r\n        } catch (error) {\r\n            console.error('Error applying superellipse clipper:', error);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'borderRadius', value: JSON.stringify(this.borderRadius) });\r\n        properties.push({ name: 'hasClipper', value: !!this.clipper });\r\n        properties.push({ name: 'clipBehavior', value: this.clipBehavior });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new ClipRSuperellipseElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\nclass RenderClipRSuperellipse {\r\n    constructor({\r\n        borderRadius = null,\r\n        clipper = null,\r\n        clipBehavior = Clip.antiAlias\r\n    } = {}) {\r\n        this.borderRadius = borderRadius || { all: 0 };\r\n        this.clipper = clipper;\r\n        this.clipBehavior = clipBehavior;\r\n    }\r\n\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderClipRSuperellipse',\r\n            borderRadius: JSON.stringify(this.borderRadius),\r\n            hasClipper: !!this.clipper,\r\n            clipBehavior: this.clipBehavior\r\n        };\r\n    }\r\n}\r\n\r\nclass ClipRSuperellipseElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n\r\n    detach() {\r\n        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {\r\n            this.widget._containerElement._cleanupResize();\r\n        }\r\n        super.detach();\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// CLIP OVAL WIDGET\r\n// Clips child to oval/ellipse shape\r\n// ============================================================================\r\n\r\nclass ClipOval extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        clipper = null,\r\n        clipBehavior = Clip.antiAlias,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (clipper && !(clipper instanceof CustomClipper)) {\r\n            throw new Error(\r\n                `ClipOval requires a CustomClipper instance, got: ${typeof clipper}`\r\n            );\r\n        }\r\n\r\n        if (!Object.values(Clip).includes(clipBehavior)) {\r\n            throw new Error(\r\n                `Invalid clipBehavior: ${clipBehavior}`\r\n            );\r\n        }\r\n\r\n        this.clipper = clipper;\r\n        this.clipBehavior = clipBehavior;\r\n        this._renderObject = null;\r\n        this._containerElement = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return new RenderClipOval({\r\n            clipper: this.clipper,\r\n            clipBehavior: this.clipBehavior\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.clipper = this.clipper;\r\n        renderObject.clipBehavior = this.clipBehavior;\r\n    }\r\n\r\n    /**\r\n     * Unmount and cleanup\r\n     */\r\n    unmountRenderObject(renderObject) {\r\n        renderObject.clipper = null;\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';\r\n\r\n        const style = {\r\n            borderRadius: '50%',\r\n            overflow: overflowValue,\r\n            position: 'relative'\r\n        };\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style,\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'ClipOval',\r\n                'data-clip-behavior': this.clipBehavior,\r\n                ref: (el) => this._onContainerMount(el)\r\n            },\r\n            children: childVNode ? [childVNode] : [],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Mount container and apply custom clipper\r\n     * @private\r\n     */\r\n    _onContainerMount(el) {\r\n        if (!el) return;\r\n\r\n        this._containerElement = el;\r\n\r\n        if (this.clipper) {\r\n            this._applyClipper();\r\n        }\r\n\r\n        const resizeHandler = () => this._applyClipper();\r\n        window.addEventListener('resize', resizeHandler);\r\n        el._cleanupResize = () => window.removeEventListener('resize', resizeHandler);\r\n    }\r\n\r\n    /**\r\n     * Apply custom clipper\r\n     * @private\r\n     */\r\n    _applyClipper() {\r\n        if (!this.clipper || !this._containerElement) return;\r\n\r\n        try {\r\n            const rect = this._containerElement.getBoundingClientRect();\r\n            const size = {\r\n                width: Math.ceil(rect.width) || 100,\r\n                height: Math.ceil(rect.height) || 100\r\n            };\r\n\r\n            const clipPath = this.clipper.getClip(size);\r\n            if (clipPath) {\r\n                this._containerElement.style.clipPath = clipPath;\r\n                this._containerElement.style.WebkitClipPath = clipPath;\r\n            }\r\n        } catch (error) {\r\n            console.error('Error applying oval clipper:', error);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'hasClipper', value: !!this.clipper });\r\n        properties.push({ name: 'clipBehavior', value: this.clipBehavior });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new ClipOvalElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\nclass RenderClipOval {\r\n    constructor({ clipper = null, clipBehavior = Clip.antiAlias } = {}) {\r\n        this.clipper = clipper;\r\n        this.clipBehavior = clipBehavior;\r\n    }\r\n\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderClipOval',\r\n            hasClipper: !!this.clipper,\r\n            clipBehavior: this.clipBehavior\r\n        };\r\n    }\r\n}\r\n\r\nclass ClipOvalElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n\r\n    detach() {\r\n        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {\r\n            this.widget._containerElement._cleanupResize();\r\n        }\r\n        super.detach();\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// CLIP PATH WIDGET\r\n// Clips child to custom path shape\r\n// ============================================================================\r\n\r\nclass ClipPath extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        clipper = null,\r\n        clipBehavior = Clip.antiAlias,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (clipper && !(clipper instanceof CustomClipper)) {\r\n            throw new Error(\r\n                `ClipPath requires a CustomClipper instance, got: ${typeof clipper}`\r\n            );\r\n        }\r\n\r\n        if (!Object.values(Clip).includes(clipBehavior)) {\r\n            throw new Error(\r\n                `Invalid clipBehavior: ${clipBehavior}`\r\n            );\r\n        }\r\n\r\n        this.clipper = clipper;\r\n        this.clipBehavior = clipBehavior;\r\n        this._renderObject = null;\r\n        this._containerElement = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return new RenderClipPath({\r\n            clipper: this.clipper,\r\n            clipBehavior: this.clipBehavior\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.clipper = this.clipper;\r\n        renderObject.clipBehavior = this.clipBehavior;\r\n    }\r\n\r\n    /**\r\n     * Unmount and cleanup\r\n     */\r\n    unmountRenderObject(renderObject) {\r\n        renderObject.clipper = null;\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';\r\n\r\n        const style = {\r\n            overflow: overflowValue,\r\n            position: 'relative'\r\n        };\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style,\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'ClipPath',\r\n                'data-clip-behavior': this.clipBehavior,\r\n                ref: (el) => this._onContainerMount(el)\r\n            },\r\n            children: childVNode ? [childVNode] : [],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Mount container and apply custom clipper\r\n     * @private\r\n     */\r\n    _onContainerMount(el) {\r\n        if (!el) return;\r\n\r\n        this._containerElement = el;\r\n\r\n        if (this.clipper) {\r\n            this._applyClipper();\r\n        }\r\n\r\n        const resizeHandler = () => this._applyClipper();\r\n        window.addEventListener('resize', resizeHandler);\r\n        el._cleanupResize = () => window.removeEventListener('resize', resizeHandler);\r\n    }\r\n\r\n    /**\r\n     * Apply custom clipper\r\n     * @private\r\n     */\r\n    _applyClipper() {\r\n        if (!this.clipper || !this._containerElement) return;\r\n\r\n        try {\r\n            const rect = this._containerElement.getBoundingClientRect();\r\n            const size = {\r\n                width: Math.ceil(rect.width) || 100,\r\n                height: Math.ceil(rect.height) || 100\r\n            };\r\n\r\n            const clipPath = this.clipper.getClip(size);\r\n            if (clipPath) {\r\n                this._containerElement.style.clipPath = clipPath;\r\n                this._containerElement.style.WebkitClipPath = clipPath;\r\n            }\r\n        } catch (error) {\r\n            console.error('Error applying path clipper:', error);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'hasClipper', value: !!this.clipper });\r\n        properties.push({ name: 'clipBehavior', value: this.clipBehavior });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new ClipPathElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\nclass RenderClipPath {\r\n    constructor({ clipper = null, clipBehavior = Clip.antiAlias } = {}) {\r\n        this.clipper = clipper;\r\n        this.clipBehavior = clipBehavior;\r\n    }\r\n\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderClipPath',\r\n            hasClipper: !!this.clipper,\r\n            clipBehavior: this.clipBehavior\r\n        };\r\n    }\r\n}\r\n\r\nclass ClipPathElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n\r\n    detach() {\r\n        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {\r\n            this.widget._containerElement._cleanupResize();\r\n        }\r\n        super.detach();\r\n    }\r\n}\r\n\r\nexport { ClipRect, RenderClipRect, ClipRRect, RenderClipRRect, ClipRSuperellipse, RenderClipRSuperellipse, ClipOval, RenderClipOval, ClipPath, RenderClipPath, CustomClipper, };\r\n"],
-  "mappings": "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",
-  "names": ["ProxyWidget", "VNode", "Clip", "CustomClipper", "size", "oldClipper", "ClipRect", "key", "clipper", "clipBehavior", "child", "context", "RenderClipRect", "renderObject", "childVNode", "childElement", "elementId", "widgetPath", "overflowValue", "filterValue", "style", "el", "rect", "clipPath", "error", "resizeHandler", "properties", "parent", "runtime", "ClipRectElement", "ClipRRect", "borderRadius", "RenderClipRRect", "borderRadiusCss", "topLeft", "topRight", "bottomLeft", "bottomRight", "ClipRRectElement", "ClipRSuperellipse", "RenderClipRSuperellipse", "ClipRSuperellipseElement", "ClipOval", "RenderClipOval", "ClipOvalElement", "ClipPath", "RenderClipPath", "ClipPathElement"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/custom_paint_clip.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/custom_paint_clip.js
deleted file mode 100644
index aba2f024..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/custom_paint_clip.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{ProxyWidget as a}from"../../core/widget_element.js";import{VNode as o}from"@flutterjs/vdom/vnode";import{ImageFilter as g}from"./image_filter.js";class u extends a{constructor({key:e=null,filter:t=null,child:n=null,blendMode:s="source-over",enabled:r=!0,backdropGroupKey:i=null,grouped:l=!1}={}){if(super({key:e,child:n}),!t)throw new Error("BackdropFilter requires a filter parameter");if(!(t instanceof g))throw new Error(`BackdropFilter requires an ImageFilter instance, got: ${typeof t}`);this.filter=t,this.blendMode=s,this.enabled=r,this.backdropGroupKey=i,this._useSharedKey=l,this._renderObject=null}static grouped({key:e=null,filter:t=null,child:n=null,blendMode:s="source-over",enabled:r=!0}={}){return new u({key:e,filter:t,child:n,blendMode:s,enabled:r,grouped:!0})}_getBackdropGroupKey(e){if(this._useSharedKey)try{const{BackdropGroup:t}=require("./backdrop_group.js");return t.maybeOf(e)?.backdropKey||null}catch{return null}return this.backdropGroupKey}createRenderObject(e){return new c({filter:this.filter,blendMode:this.blendMode,enabled:this.enabled,backdropKey:this._getBackdropGroupKey(e)})}updateRenderObject(e,t){t.filter=this.filter,t.enabled=this.enabled,t.blendMode=this.blendMode,t.backdropKey=this._getBackdropGroupKey(e)}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);let t=null;if(this.child){const i=this.child.createElement(e.element,e.element.runtime);i.mount(e.element),t=i.performRebuild()}const n=e.element.getElementId(),s=e.element.getWidgetPath(),r=this.enabled?this.filter.toCSSFilter():"none";return new o({tag:"div",props:{style:{position:"relative",backdropFilter:r,WebkitBackdropFilter:r,mixBlendMode:this.blendMode},"data-element-id":n,"data-widget-path":s,"data-widget":"BackdropFilter","data-enabled":this.enabled,"data-blend-mode":this.blendMode,"data-filter-type":this.filter.type},children:t?[t]:[],key:this.key})}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"filter",value:this.filter.toString()}),e.push({name:"blendMode",value:this.blendMode}),e.push({name:"enabled",value:this.enabled})}createElement(e,t){return new b(this,e,t)}}class c{constructor({filter:e=null,blendMode:t="source-over",enabled:n=!0,backdropKey:s=null}={}){this.filter=e,this.blendMode=t,this.enabled=n,this.backdropKey=s}debugInfo(){return{type:"RenderBackdropFilter",filter:this.filter?.toString(),blendMode:this.blendMode,enabled:this.enabled}}}class b extends a.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}}class m extends a{constructor({key:e=null,painter:t=null,foregroundPainter:n=null,size:s=null,isComplex:r=!1,willChange:i=!1,child:l=null}={}){if(super({key:e,child:l}),!t&&!n&&(r||i))throw new Error("CustomPaint requires a painter or foregroundPainter");this.painter=t,this.foregroundPainter=n,this.size=s||{width:0,height:0},this.isComplex=r,this.willChange=i,this._renderObject=null,this._svgElement=null}createRenderObject(e){return new p({painter:this.painter,foregroundPainter:this.foregroundPainter,preferredSize:this.size,isComplex:this.isComplex,willChange:this.willChange})}updateRenderObject(e,t){t.painter=this.painter,t.foregroundPainter=this.foregroundPainter,t.preferredSize=this.size,t.isComplex=this.isComplex,t.willChange=this.willChange}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);let t=null;if(this.child){const l=this.child.createElement(e.element,e.element.runtime);l.mount(e.element),t=l.performRebuild()}const n=e.element.getElementId(),s=e.element.getWidgetPath(),r={position:"relative",willChange:this.willChange?"contents":"auto"};this.size&&this.size.width>0&&this.size.height>0&&(r.width=`${this.size.width}px`,r.height=`${this.size.height}px`);const i=[];return this.painter&&i.push(new o({tag:"svg",props:{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none"},width:this.size.width||"100%",height:this.size.height||"100%",viewBox:`0 0 ${this.size.width||100} ${this.size.height||100}`,"data-painter":"background",ref:l=>this._onBackgroundSvgMount(l)}})),t&&i.push(new o({tag:"div",props:{style:{position:"relative",zIndex:1}},children:[t]})),this.foregroundPainter&&i.push(new o({tag:"svg",props:{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",pointerEvents:"none"},width:this.size.width||"100%",height:this.size.height||"100%",viewBox:`0 0 ${this.size.width||100} ${this.size.height||100}`,"data-painter":"foreground",ref:l=>this._onForegroundSvgMount(l)}})),new o({tag:"div",props:{style:r,"data-element-id":n,"data-widget-path":s,"data-widget":"CustomPaint","data-is-complex":this.isComplex,"data-will-change":this.willChange},children:i,key:this.key})}_onBackgroundSvgMount(e){if(!(!e||!this.painter))try{const t={element:e,drawRect:(n,s,r,i,l)=>{const h=document.createElementNS("http://www.w3.org/2000/svg","rect");h.setAttribute("x",n),h.setAttribute("y",s),h.setAttribute("width",r),h.setAttribute("height",i),h.setAttribute("fill",l),e.appendChild(h)},drawCircle:(n,s,r,i)=>{const l=document.createElementNS("http://www.w3.org/2000/svg","circle");l.setAttribute("cx",n),l.setAttribute("cy",s),l.setAttribute("r",r),l.setAttribute("fill",i),e.appendChild(l)},drawPath:(n,s,r)=>{const i=document.createElementNS("http://www.w3.org/2000/svg","path");i.setAttribute("d",n),s&&i.setAttribute("stroke",s),r&&i.setAttribute("fill",r),e.appendChild(i)}};this.painter.paint(t,this.size)}catch(t){console.error("Error in CustomPaint background painter:",t)}}_onForegroundSvgMount(e){if(!(!e||!this.foregroundPainter))try{const t={element:e,drawRect:(n,s,r,i,l)=>{const h=document.createElementNS("http://www.w3.org/2000/svg","rect");h.setAttribute("x",n),h.setAttribute("y",s),h.setAttribute("width",r),h.setAttribute("height",i),h.setAttribute("fill",l),e.appendChild(h)},drawCircle:(n,s,r,i)=>{const l=document.createElementNS("http://www.w3.org/2000/svg","circle");l.setAttribute("cx",n),l.setAttribute("cy",s),l.setAttribute("r",r),l.setAttribute("fill",i),e.appendChild(l)},drawPath:(n,s,r)=>{const i=document.createElementNS("http://www.w3.org/2000/svg","path");i.setAttribute("d",n),s&&i.setAttribute("stroke",s),r&&i.setAttribute("fill",r),e.appendChild(i)}};this.foregroundPainter.paint(t,this.size)}catch(t){console.error("Error in CustomPaint foreground painter:",t)}}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"hasPainter",value:!!this.painter}),e.push({name:"hasForegroundPainter",value:!!this.foregroundPainter}),e.push({name:"size",value:`${this.size.width}x${this.size.height}`}),e.push({name:"isComplex",value:this.isComplex}),e.push({name:"willChange",value:this.willChange})}createElement(e,t){return new w(this,e,t)}}class p{constructor({painter:e=null,foregroundPainter:t=null,preferredSize:n=null,isComplex:s=!1,willChange:r=!1}={}){this.painter=e,this.foregroundPainter=t,this.preferredSize=n||{width:0,height:0},this.isComplex=s,this.willChange=r}debugInfo(){return{type:"RenderCustomPaint",hasPainter:!!this.painter,hasForegroundPainter:!!this.foregroundPainter,preferredSize:`${this.preferredSize.width}x${this.preferredSize.height}`,isComplex:this.isComplex,willChange:this.willChange}}}class w extends a.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}}export{u as BackdropFilter,m as CustomPaint,c as RenderBackdropFilter,p as RenderCustomPaint};
-//# sourceMappingURL=custom_paint_clip.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/custom_paint_clip.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/custom_paint_clip.js.map
deleted file mode 100644
index ec62b305..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/custom_paint_clip.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/custom_paint_clip.js"],
-  "sourcesContent": ["import { ProxyWidget } from '../../core/widget_element.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { ImageFilter } from './image_filter.js';\r\n\r\n// ============================================================================\r\n// BACKDROP FILTER WIDGET\r\n// Applies CSS backdrop filter effects to element\r\n// ============================================================================\r\n\r\nclass BackdropFilter extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        filter = null,\r\n        child = null,\r\n        blendMode = 'source-over',\r\n        enabled = true,\r\n        backdropGroupKey = null,\r\n        grouped = false\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (!filter) {\r\n            throw new Error('BackdropFilter requires a filter parameter');\r\n        }\r\n\r\n        if (!(filter instanceof ImageFilter)) {\r\n            throw new Error(\r\n                `BackdropFilter requires an ImageFilter instance, got: ${typeof filter}`\r\n            );\r\n        }\r\n\r\n        this.filter = filter;\r\n        this.blendMode = blendMode;\r\n        this.enabled = enabled;\r\n        this.backdropGroupKey = backdropGroupKey;\r\n        this._useSharedKey = grouped;\r\n        this._renderObject = null;\r\n    }\r\n\r\n    /**\r\n     * Static constructor for grouped backdrop filter\r\n     */\r\n    static grouped({\r\n        key = null,\r\n        filter = null,\r\n        child = null,\r\n        blendMode = 'source-over',\r\n        enabled = true\r\n    } = {}) {\r\n        return new BackdropFilter({\r\n            key,\r\n            filter,\r\n            child,\r\n            blendMode,\r\n            enabled,\r\n            grouped: true\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Get the backdrop group key\r\n     * @private\r\n     */\r\n    _getBackdropGroupKey(context) {\r\n        if (this._useSharedKey) {\r\n            // Import BackdropGroup to check context\r\n            try {\r\n                const { BackdropGroup } = require('./backdrop_group.js');\r\n                const group = BackdropGroup.maybeOf(context);\r\n                return group?.backdropKey || null;\r\n            } catch (e) {\r\n                return null;\r\n            }\r\n        }\r\n        return this.backdropGroupKey;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return new RenderBackdropFilter({\r\n            filter: this.filter,\r\n            blendMode: this.blendMode,\r\n            enabled: this.enabled,\r\n            backdropKey: this._getBackdropGroupKey(context)\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.filter = this.filter;\r\n        renderObject.enabled = this.enabled;\r\n        renderObject.blendMode = this.blendMode;\r\n        renderObject.backdropKey = this._getBackdropGroupKey(context);\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        // Get CSS filter string\r\n        const filterCss = this.enabled ? this.filter.toCSSFilter() : 'none';\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style: {\r\n                    position: 'relative',\r\n                    backdropFilter: filterCss,\r\n                    WebkitBackdropFilter: filterCss,\r\n                    mixBlendMode: this.blendMode\r\n                },\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'BackdropFilter',\r\n                'data-enabled': this.enabled,\r\n                'data-blend-mode': this.blendMode,\r\n                'data-filter-type': this.filter.type\r\n            },\r\n            children: childVNode ? [childVNode] : [],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'filter', value: this.filter.toString() });\r\n        properties.push({ name: 'blendMode', value: this.blendMode });\r\n        properties.push({ name: 'enabled', value: this.enabled });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new BackdropFilterElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER BACKDROP FILTER\r\n// ============================================================================\r\n\r\nclass RenderBackdropFilter {\r\n    constructor({ filter = null, blendMode = 'source-over', enabled = true, backdropKey = null } = {}) {\r\n        this.filter = filter;\r\n        this.blendMode = blendMode;\r\n        this.enabled = enabled;\r\n        this.backdropKey = backdropKey;\r\n    }\r\n\r\n    /**\r\n     * Debug info\r\n     */\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderBackdropFilter',\r\n            filter: this.filter?.toString(),\r\n            blendMode: this.blendMode,\r\n            enabled: this.enabled\r\n        };\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// BACKDROP FILTER ELEMENT\r\n// ============================================================================\r\n\r\nclass BackdropFilterElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// CUSTOM PAINT WIDGET\r\n// Uses SVG for drawing instead of canvas\r\n// Override paintContent() to draw SVG content\r\n// ============================================================================\r\n\r\nclass CustomPaint extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        painter = null,\r\n        foregroundPainter = null,\r\n        size = null,\r\n        isComplex = false,\r\n        willChange = false,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (!painter && !foregroundPainter && (isComplex || willChange)) {\r\n            throw new Error(\r\n                'CustomPaint requires a painter or foregroundPainter'\r\n            );\r\n        }\r\n\r\n        this.painter = painter;\r\n        this.foregroundPainter = foregroundPainter;\r\n        this.size = size || { width: 0, height: 0 };\r\n        this.isComplex = isComplex;\r\n        this.willChange = willChange;\r\n        this._renderObject = null;\r\n        this._svgElement = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return new RenderCustomPaint({\r\n            painter: this.painter,\r\n            foregroundPainter: this.foregroundPainter,\r\n            preferredSize: this.size,\r\n            isComplex: this.isComplex,\r\n            willChange: this.willChange\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.painter = this.painter;\r\n        renderObject.foregroundPainter = this.foregroundPainter;\r\n        renderObject.preferredSize = this.size;\r\n        renderObject.isComplex = this.isComplex;\r\n        renderObject.willChange = this.willChange;\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        const style = {\r\n            position: 'relative',\r\n            willChange: this.willChange ? 'contents' : 'auto'\r\n        };\r\n\r\n        if (this.size && this.size.width > 0 && this.size.height > 0) {\r\n            style.width = `${this.size.width}px`;\r\n            style.height = `${this.size.height}px`;\r\n        }\r\n\r\n        const children = [];\r\n\r\n        // Background painter (behind child)\r\n        if (this.painter) {\r\n            children.push(\r\n                new VNode({\r\n                    tag: 'svg',\r\n                    props: {\r\n                        style: {\r\n                            position: 'absolute',\r\n                            top: 0,\r\n                            left: 0,\r\n                            width: '100%',\r\n                            height: '100%',\r\n                            pointerEvents: 'none'\r\n                        },\r\n                        width: this.size.width || '100%',\r\n                        height: this.size.height || '100%',\r\n                        viewBox: `0 0 ${this.size.width || 100} ${this.size.height || 100}`,\r\n                        'data-painter': 'background',\r\n                        ref: (el) => this._onBackgroundSvgMount(el)\r\n                    }\r\n                })\r\n            );\r\n        }\r\n\r\n        // Child content\r\n        if (childVNode) {\r\n            children.push(\r\n                new VNode({\r\n                    tag: 'div',\r\n                    props: {\r\n                        style: {\r\n                            position: 'relative',\r\n                            zIndex: 1\r\n                        }\r\n                    },\r\n                    children: [childVNode]\r\n                })\r\n            );\r\n        }\r\n\r\n        // Foreground painter (above child)\r\n        if (this.foregroundPainter) {\r\n            children.push(\r\n                new VNode({\r\n                    tag: 'svg',\r\n                    props: {\r\n                        style: {\r\n                            position: 'absolute',\r\n                            top: 0,\r\n                            left: 0,\r\n                            width: '100%',\r\n                            height: '100%',\r\n                            pointerEvents: 'none'\r\n                        },\r\n                        width: this.size.width || '100%',\r\n                        height: this.size.height || '100%',\r\n                        viewBox: `0 0 ${this.size.width || 100} ${this.size.height || 100}`,\r\n                        'data-painter': 'foreground',\r\n                        ref: (el) => this._onForegroundSvgMount(el)\r\n                    }\r\n                })\r\n            );\r\n        }\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style,\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'CustomPaint',\r\n                'data-is-complex': this.isComplex,\r\n                'data-will-change': this.willChange\r\n            },\r\n            children,\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Mount background SVG and call painter\r\n     */\r\n    _onBackgroundSvgMount(el) {\r\n        if (!el || !this.painter) return;\r\n\r\n        try {\r\n            // Create SVG context object\r\n            const svgContext = {\r\n                element: el,\r\n                drawRect: (x, y, width, height, fill) => {\r\n                    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\r\n                    rect.setAttribute('x', x);\r\n                    rect.setAttribute('y', y);\r\n                    rect.setAttribute('width', width);\r\n                    rect.setAttribute('height', height);\r\n                    rect.setAttribute('fill', fill);\r\n                    el.appendChild(rect);\r\n                },\r\n                drawCircle: (cx, cy, r, fill) => {\r\n                    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\r\n                    circle.setAttribute('cx', cx);\r\n                    circle.setAttribute('cy', cy);\r\n                    circle.setAttribute('r', r);\r\n                    circle.setAttribute('fill', fill);\r\n                    el.appendChild(circle);\r\n                },\r\n                drawPath: (d, stroke, fill) => {\r\n                    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');\r\n                    path.setAttribute('d', d);\r\n                    if (stroke) path.setAttribute('stroke', stroke);\r\n                    if (fill) path.setAttribute('fill', fill);\r\n                    el.appendChild(path);\r\n                }\r\n            };\r\n\r\n            // Call painter with SVG context\r\n            this.painter.paint(svgContext, this.size);\r\n        } catch (error) {\r\n            console.error('Error in CustomPaint background painter:', error);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Mount foreground SVG and call foreground painter\r\n     */\r\n    _onForegroundSvgMount(el) {\r\n        if (!el || !this.foregroundPainter) return;\r\n\r\n        try {\r\n            // Create SVG context object\r\n            const svgContext = {\r\n                element: el,\r\n                drawRect: (x, y, width, height, fill) => {\r\n                    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\r\n                    rect.setAttribute('x', x);\r\n                    rect.setAttribute('y', y);\r\n                    rect.setAttribute('width', width);\r\n                    rect.setAttribute('height', height);\r\n                    rect.setAttribute('fill', fill);\r\n                    el.appendChild(rect);\r\n                },\r\n                drawCircle: (cx, cy, r, fill) => {\r\n                    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\r\n                    circle.setAttribute('cx', cx);\r\n                    circle.setAttribute('cy', cy);\r\n                    circle.setAttribute('r', r);\r\n                    circle.setAttribute('fill', fill);\r\n                    el.appendChild(circle);\r\n                },\r\n                drawPath: (d, stroke, fill) => {\r\n                    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');\r\n                    path.setAttribute('d', d);\r\n                    if (stroke) path.setAttribute('stroke', stroke);\r\n                    if (fill) path.setAttribute('fill', fill);\r\n                    el.appendChild(path);\r\n                }\r\n            };\r\n\r\n            // Call foreground painter with SVG context\r\n            this.foregroundPainter.paint(svgContext, this.size);\r\n        } catch (error) {\r\n            console.error('Error in CustomPaint foreground painter:', error);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'hasPainter', value: !!this.painter });\r\n        properties.push({ name: 'hasForegroundPainter', value: !!this.foregroundPainter });\r\n        properties.push({ name: 'size', value: `${this.size.width}x${this.size.height}` });\r\n        properties.push({ name: 'isComplex', value: this.isComplex });\r\n        properties.push({ name: 'willChange', value: this.willChange });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new CustomPaintElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER CUSTOM PAINT\r\n// ============================================================================\r\n\r\nclass RenderCustomPaint {\r\n    constructor({\r\n        painter = null,\r\n        foregroundPainter = null,\r\n        preferredSize = null,\r\n        isComplex = false,\r\n        willChange = false\r\n    } = {}) {\r\n        this.painter = painter;\r\n        this.foregroundPainter = foregroundPainter;\r\n        this.preferredSize = preferredSize || { width: 0, height: 0 };\r\n        this.isComplex = isComplex;\r\n        this.willChange = willChange;\r\n    }\r\n\r\n    /**\r\n     * Debug info\r\n     */\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderCustomPaint',\r\n            hasPainter: !!this.painter,\r\n            hasForegroundPainter: !!this.foregroundPainter,\r\n            preferredSize: `${this.preferredSize.width}x${this.preferredSize.height}`,\r\n            isComplex: this.isComplex,\r\n            willChange: this.willChange\r\n        };\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// CUSTOM PAINT ELEMENT\r\n// ============================================================================\r\n\r\nclass CustomPaintElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n}\r\n\r\nexport { BackdropFilter, RenderBackdropFilter, CustomPaint, RenderCustomPaint };"],
-  "mappings": "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",
-  "names": ["ProxyWidget", "VNode", "ImageFilter", "BackdropFilter", "key", "filter", "child", "blendMode", "enabled", "backdropGroupKey", "grouped", "context", "BackdropGroup", "RenderBackdropFilter", "renderObject", "childVNode", "childElement", "elementId", "widgetPath", "filterCss", "properties", "parent", "runtime", "BackdropFilterElement", "backdropKey", "CustomPaint", "painter", "foregroundPainter", "size", "isComplex", "willChange", "RenderCustomPaint", "style", "children", "el", "svgContext", "x", "y", "width", "height", "fill", "rect", "cx", "cy", "circle", "d", "stroke", "path", "error", "CustomPaintElement", "preferredSize"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/custom_single_child_layout.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/custom_single_child_layout.js
deleted file mode 100644
index c9b263f5..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/custom_single_child_layout.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{ProxyWidget as y,Widget as u}from"../../core/widget_element.js";import{VNode as c}from"@flutterjs/vdom/vnode";import{Size as a}from"../../utils/size.js";import{BoxConstraints as f}from"../../utils/box_constraints.js";class m{constructor(){if(new.target===m)throw new Error("SingleChildLayoutDelegate is abstract")}getConstraintsForChild(e){throw new Error("getConstraintsForChild() must be implemented")}positionChild(e,t){throw new Error("positionChild() must be implemented")}getSize(e){return e.constrain(new a(300,300))}shouldRelayout(e){return!0}}class b extends y{constructor({key:e=null,delegate:t=null,child:n=null}={}){if(super({key:e,child:n}),!t)throw new Error("CustomSingleChildLayout requires a delegate");if(!(t instanceof m))throw new Error(`CustomSingleChildLayout requires a SingleChildLayoutDelegate instance, got: ${typeof t}`);this.delegate=t,this._renderObject=null,this._containerElement=null,this._childElement=null,this._resizeObserver=null}createRenderObject(e){return new _({delegate:this.delegate})}updateRenderObject(e,t){this.delegate.shouldRelayout(t.delegate)&&(t.delegate=this.delegate)}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);let t=null;if(this.child){const i=this.child.createElement(e.element,e.element.runtime);i.mount(e.element),t=i.performRebuild()}const n=e.element.getElementId(),d=e.element.getWidgetPath();return new c({tag:"div",props:{style:{position:"relative",display:"inline-block"},"data-element-id":n,"data-widget-path":d,"data-widget":"CustomSingleChildLayout",ref:i=>this._onContainerMount(i)},children:[new c({tag:"div",props:{style:{position:"absolute"},ref:i=>this._onChildMount(i)},children:t?[t]:[]})],key:this.key})}_onContainerMount(e){if(!e)return;this._containerElement=e,window.ResizeObserver&&(this._resizeObserver=new ResizeObserver(()=>{this._performLayout()}),this._resizeObserver.observe(e));const t=()=>this._performLayout();window.addEventListener("resize",t),e._cleanupResize=()=>{window.removeEventListener("resize",t),this._resizeObserver&&this._resizeObserver.disconnect()},this._performLayout()}_onChildMount(e){e&&(this._childElement=e,this._performLayout())}_performLayout(){if(!(!this._containerElement||!this._childElement||!this.delegate))try{const e=this._containerElement.getBoundingClientRect(),t=new a(e.width||300,e.height||300),n=f.expand({width:t.width,height:t.height}),d=this.delegate.getConstraintsForChild(n),i=this._childElement.getBoundingClientRect(),l=new a(i.width||100,i.height||100),s=d.constrain(l),r=this.delegate.positionChild(t,s);this._childElement.style.left=`${r.x}px`,this._childElement.style.top=`${r.y}px`,this._childElement.style.width=`${s.width}px`,this._childElement.style.height=`${s.height}px`;const o=this.delegate.getSize(n);this._containerElement.style.width=`${o.width}px`,this._containerElement.style.height=`${o.height}px`}catch(e){console.error("Error performing custom single child layout:",e)}}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"delegate",value:this.delegate.constructor.name})}createElement(e,t){return new z(this,e,t)}}class _{constructor({delegate:e=null}={}){this.delegate=e}debugInfo(){return{type:"RenderCustomSingleChildLayoutBox",delegateType:this.delegate?.constructor.name}}}class z extends y.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}detach(){this.widget._containerElement&&this.widget._containerElement._cleanupResize&&this.widget._containerElement._cleanupResize(),super.detach()}}class g{constructor(){if(new.target===g)throw new Error("MultiChildLayoutDelegate is abstract")}performLayout(e,t){throw new Error("performLayout() must be implemented")}getSize(e){return e.constrain(new a(300,300))}shouldRelayout(e){return!0}}class p extends u{constructor({key:e=null,id:t=null,child:n=null}={}){if(super(e||{id:t}),!t)throw new Error("LayoutId requires an id");this.id=t,this.child=n}applyParentData(e){e.parentData||(e.parentData={}),e.parentData.id=this.id}build(e){return this.child}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"id",value:this.id})}createElement(e,t){return new L(this,e,t)}}class L extends u.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}}class R extends u{constructor({key:e=null,delegate:t=null,children:n=[]}={}){if(super(e),!t)throw new Error("CustomMultiChildLayout requires a delegate");if(!(t instanceof g))throw new Error(`CustomMultiChildLayout requires a MultiChildLayoutDelegate instance, got: ${typeof t}`);this.delegate=t,this.children=n||[],this._renderObject=null,this._containerElement=null,this._childElements=new Map,this._resizeObserver=null}createRenderObject(e){return new C({delegate:this.delegate})}updateRenderObject(e,t){this.delegate.shouldRelayout(t.delegate)&&(t.delegate=this.delegate)}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);const t=e.element.getElementId(),n=e.element.getWidgetPath(),d=this.children.map((i,l)=>{let s=i;i instanceof p||(s=new p({id:l,child:i}));const r=s.createElement(e.element,e.element.runtime);return r.mount(e.element),r.performRebuild()});return new c({tag:"div",props:{style:{position:"relative",display:"inline-block"},"data-element-id":t,"data-widget-path":n,"data-widget":"CustomMultiChildLayout",ref:i=>this._onContainerMount(i)},children:d.map((i,l)=>new c({tag:"div",props:{style:{position:"absolute"},"data-layout-id":l,ref:s=>this._onChildMount(s,l)},children:[i]})),key:this.key})}_onContainerMount(e){if(!e)return;this._containerElement=e,window.ResizeObserver&&(this._resizeObserver=new ResizeObserver(()=>{this._performLayout()}),this._resizeObserver.observe(e));const t=()=>this._performLayout();window.addEventListener("resize",t),e._cleanupResize=()=>{window.removeEventListener("resize",t),this._resizeObserver&&this._resizeObserver.disconnect()},this._performLayout()}_onChildMount(e,t){e&&(this._childElements.set(t,e),this._performLayout())}_performLayout(){if(!(!this._containerElement||!this.delegate))try{const e=this._containerElement.getBoundingClientRect(),t=new a(e.width||300,e.height||300),n=f.expand({width:t.width,height:t.height}),d=(s,r)=>{const o=this._childElements.get(s);if(!o)return console.warn(`LayoutId ${s} not found`),new a(0,0);const w=o.getBoundingClientRect(),E=new a(w.width||100,w.height||100);return r.constrain(E)},i=this.delegate.performLayout(t,d);if(i&&typeof i=="object")for(const[s,r]of Object.entries(i)){const o=this._childElements.get(parseInt(s));o&&(o.style.left=`${r.x||0}px`,o.style.top=`${r.y||0}px`,r.width&&(o.style.width=`${r.width}px`),r.height&&(o.style.height=`${r.height}px`))}const l=this.delegate.getSize(n);this._containerElement.style.width=`${l.width}px`,this._containerElement.style.height=`${l.height}px`}catch(e){console.error("Error performing custom multi child layout:",e)}}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"delegate",value:this.delegate.constructor.name}),e.push({name:"childCount",value:this.children.length})}createElement(e,t){return new v(this,e,t)}}class C{constructor({delegate:e=null}={}){this.delegate=e}debugInfo(){return{type:"RenderCustomMultiChildLayoutBox",delegateType:this.delegate?.constructor.name}}}class v extends u.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}detach(){this.widget._containerElement&&this.widget._containerElement._cleanupResize&&this.widget._containerElement._cleanupResize(),super.detach()}}export{R as CustomMultiChildLayout,b as CustomSingleChildLayout,p as LayoutId,g as MultiChildLayoutDelegate,C as RenderCustomMultiChildLayoutBox,_ as RenderCustomSingleChildLayoutBox,m as SingleChildLayoutDelegate};
-//# sourceMappingURL=custom_single_child_layout.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/custom_single_child_layout.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/custom_single_child_layout.js.map
deleted file mode 100644
index 33aa4a19..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/custom_single_child_layout.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/custom_single_child_layout.js"],
-  "sourcesContent": ["import { ProxyWidget, Widget } from '../../core/widget_element.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { Size } from '../../utils/size.js';\r\nimport { BoxConstraints } from '../../utils/box_constraints.js';\r\n\r\n\r\n\r\n\r\n\r\n// ============================================================================\r\n// SINGLE CHILD LAYOUT DELEGATE BASE CLASS\r\n// Override methods to define custom layout logic\r\n// ============================================================================\r\n\r\nclass SingleChildLayoutDelegate {\r\n    constructor() {\r\n        if (new.target === SingleChildLayoutDelegate) {\r\n            throw new Error('SingleChildLayoutDelegate is abstract');\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Get size constraints for the child\r\n     * Override to define child constraints\r\n     */\r\n    getConstraintsForChild(constraints) {\r\n        throw new Error('getConstraintsForChild() must be implemented');\r\n    }\r\n\r\n    /**\r\n     * Position the child\r\n     * Override to position child relative to parent\r\n     */\r\n    positionChild(size, childSize) {\r\n        throw new Error('positionChild() must be implemented');\r\n    }\r\n\r\n    /**\r\n     * Get size of this widget\r\n     * Override to define own size\r\n     */\r\n    getSize(constraints) {\r\n        return constraints.constrain(new Size(300, 300));\r\n    }\r\n\r\n    /**\r\n     * Check if delegate should be updated\r\n     */\r\n    shouldRelayout(oldDelegate) {\r\n        return true;\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// CUSTOM SINGLE CHILD LAYOUT WIDGET\r\n// Allows custom layout of a single child\r\n// ============================================================================\r\n\r\nclass CustomSingleChildLayout extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        delegate = null,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (!delegate) {\r\n            throw new Error('CustomSingleChildLayout requires a delegate');\r\n        }\r\n\r\n        if (!(delegate instanceof SingleChildLayoutDelegate)) {\r\n            throw new Error(\r\n                `CustomSingleChildLayout requires a SingleChildLayoutDelegate instance, got: ${typeof delegate}`\r\n            );\r\n        }\r\n\r\n        this.delegate = delegate;\r\n        this._renderObject = null;\r\n        this._containerElement = null;\r\n        this._childElement = null;\r\n        this._resizeObserver = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return new RenderCustomSingleChildLayoutBox({\r\n            delegate: this.delegate\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        if (this.delegate.shouldRelayout(renderObject.delegate)) {\r\n            renderObject.delegate = this.delegate;\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style: {\r\n                    position: 'relative',\r\n                    display: 'inline-block'\r\n                },\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'CustomSingleChildLayout',\r\n                ref: (el) => this._onContainerMount(el)\r\n            },\r\n            children: [\r\n                new VNode({\r\n                    tag: 'div',\r\n                    props: {\r\n                        style: {\r\n                            position: 'absolute'\r\n                        },\r\n                        ref: (el) => this._onChildMount(el)\r\n                    },\r\n                    children: childVNode ? [childVNode] : []\r\n                })\r\n            ],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Mount container\r\n     * @private\r\n     */\r\n    _onContainerMount(el) {\r\n        if (!el) return;\r\n\r\n        this._containerElement = el;\r\n\r\n        if (window.ResizeObserver) {\r\n            this._resizeObserver = new ResizeObserver(() => {\r\n                this._performLayout();\r\n            });\r\n            this._resizeObserver.observe(el);\r\n        }\r\n\r\n        const resizeHandler = () => this._performLayout();\r\n        window.addEventListener('resize', resizeHandler);\r\n\r\n        el._cleanupResize = () => {\r\n            window.removeEventListener('resize', resizeHandler);\r\n            if (this._resizeObserver) {\r\n                this._resizeObserver.disconnect();\r\n            }\r\n        };\r\n\r\n        this._performLayout();\r\n    }\r\n\r\n    /**\r\n     * Mount child\r\n     * @private\r\n     */\r\n    _onChildMount(el) {\r\n        if (!el) return;\r\n        this._childElement = el;\r\n        this._performLayout();\r\n    }\r\n\r\n    /**\r\n     * Perform layout using delegate\r\n     * @private\r\n     */\r\n    _performLayout() {\r\n        if (!this._containerElement || !this._childElement || !this.delegate) return;\r\n\r\n        try {\r\n            const containerRect = this._containerElement.getBoundingClientRect();\r\n            const parentSize = new Size(containerRect.width || 300, containerRect.height || 300);\r\n\r\n            // Get parent constraints\r\n            const constraints = BoxConstraints.expand({ width: parentSize.width, height: parentSize.height });\r\n\r\n            // Get child constraints from delegate\r\n            const childConstraints = this.delegate.getConstraintsForChild(constraints);\r\n\r\n            // Get child size\r\n            const childRect = this._childElement.getBoundingClientRect();\r\n            const childSize = new Size(childRect.width || 100, childRect.height || 100);\r\n\r\n            // Constrain child size\r\n            const constrainedChildSize = childConstraints.constrain(childSize);\r\n\r\n            // Get position from delegate\r\n            const position = this.delegate.positionChild(parentSize, constrainedChildSize);\r\n\r\n            // Apply position and size\r\n            this._childElement.style.left = `${position.x}px`;\r\n            this._childElement.style.top = `${position.y}px`;\r\n            this._childElement.style.width = `${constrainedChildSize.width}px`;\r\n            this._childElement.style.height = `${constrainedChildSize.height}px`;\r\n\r\n            // Get container size from delegate\r\n            const containerSize = this.delegate.getSize(constraints);\r\n            this._containerElement.style.width = `${containerSize.width}px`;\r\n            this._containerElement.style.height = `${containerSize.height}px`;\r\n        } catch (error) {\r\n            console.error('Error performing custom single child layout:', error);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'delegate', value: this.delegate.constructor.name });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new CustomSingleChildLayoutElement(this, parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER CUSTOM SINGLE CHILD LAYOUT BOX\r\n// ============================================================================\r\n\r\nclass RenderCustomSingleChildLayoutBox {\r\n    constructor({ delegate = null } = {}) {\r\n        this.delegate = delegate;\r\n    }\r\n\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderCustomSingleChildLayoutBox',\r\n            delegateType: this.delegate?.constructor.name\r\n        };\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// CUSTOM SINGLE CHILD LAYOUT ELEMENT\r\n// ============================================================================\r\n\r\nclass CustomSingleChildLayoutElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n\r\n    detach() {\r\n        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {\r\n            this.widget._containerElement._cleanupResize();\r\n        }\r\n        super.detach();\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// MULTI CHILD LAYOUT DELEGATE BASE CLASS\r\n// Override methods to define custom multi-child layout logic\r\n// ============================================================================\r\n\r\nclass MultiChildLayoutDelegate {\r\n    constructor() {\r\n        if (new.target === MultiChildLayoutDelegate) {\r\n            throw new Error('MultiChildLayoutDelegate is abstract');\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Perform layout on children\r\n     * Children are keyed by id set via LayoutId\r\n     */\r\n    performLayout(size, layoutChild) {\r\n        throw new Error('performLayout() must be implemented');\r\n    }\r\n\r\n    /**\r\n     * Get size of this widget\r\n     */\r\n    getSize(constraints) {\r\n        return constraints.constrain(new Size(300, 300));\r\n    }\r\n\r\n    /**\r\n     * Check if delegate should update\r\n     */\r\n    shouldRelayout(oldDelegate) {\r\n        return true;\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// LAYOUT ID WIDGET\r\n// Assigns an id to a child in CustomMultiChildLayout\r\n// ============================================================================\r\n\r\nclass LayoutId extends Widget {\r\n    constructor({\r\n        key = null,\r\n        id = null,\r\n        child = null\r\n    } = {}) {\r\n        super(key || { id });\r\n\r\n        if (!id) {\r\n            throw new Error('LayoutId requires an id');\r\n        }\r\n\r\n        this.id = id;\r\n        this.child = child;\r\n    }\r\n\r\n    /**\r\n     * Apply parent data to child\r\n     */\r\n    applyParentData(renderObject) {\r\n        if (!renderObject.parentData) {\r\n            renderObject.parentData = {};\r\n        }\r\n        renderObject.parentData.id = this.id;\r\n    }\r\n\r\n    /**\r\n     * Build returns the child\r\n     */\r\n    build(context) {\r\n        return this.child;\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'id', value: this.id });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new LayoutIdElement(this, parent, runtime);\r\n    }\r\n}\r\n\r\nclass LayoutIdElement extends Widget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// CUSTOM MULTI CHILD LAYOUT WIDGET\r\n// Allows custom layout of multiple children with ids\r\n// ============================================================================\r\n\r\nclass CustomMultiChildLayout extends Widget {\r\n    constructor({\r\n        key = null,\r\n        delegate = null,\r\n        children = []\r\n    } = {}) {\r\n        super(key);\r\n\r\n        if (!delegate) {\r\n            throw new Error('CustomMultiChildLayout requires a delegate');\r\n        }\r\n\r\n        if (!(delegate instanceof MultiChildLayoutDelegate)) {\r\n            throw new Error(\r\n                `CustomMultiChildLayout requires a MultiChildLayoutDelegate instance, got: ${typeof delegate}`\r\n            );\r\n        }\r\n\r\n        this.delegate = delegate;\r\n        this.children = children || [];\r\n        this._renderObject = null;\r\n        this._containerElement = null;\r\n        this._childElements = new Map();\r\n        this._resizeObserver = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return new RenderCustomMultiChildLayoutBox({\r\n            delegate: this.delegate\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        if (this.delegate.shouldRelayout(renderObject.delegate)) {\r\n            renderObject.delegate = this.delegate;\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        const childVNodes = this.children.map((childWidget, index) => {\r\n            let wrappedChild = childWidget;\r\n\r\n            // Wrap child in LayoutId if not already wrapped\r\n            if (!(childWidget instanceof LayoutId)) {\r\n                wrappedChild = new LayoutId({\r\n                    id: index,\r\n                    child: childWidget\r\n                });\r\n            }\r\n\r\n            const childElement = wrappedChild.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            return childElement.performRebuild();\r\n        });\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style: {\r\n                    position: 'relative',\r\n                    display: 'inline-block'\r\n                },\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'CustomMultiChildLayout',\r\n                ref: (el) => this._onContainerMount(el)\r\n            },\r\n            children: childVNodes.map((vnode, index) =>\r\n                new VNode({\r\n                    tag: 'div',\r\n                    props: {\r\n                        style: {\r\n                            position: 'absolute'\r\n                        },\r\n                        'data-layout-id': index,\r\n                        ref: (el) => this._onChildMount(el, index)\r\n                    },\r\n                    children: [vnode]\r\n                })\r\n            ),\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Mount container\r\n     * @private\r\n     */\r\n    _onContainerMount(el) {\r\n        if (!el) return;\r\n\r\n        this._containerElement = el;\r\n\r\n        if (window.ResizeObserver) {\r\n            this._resizeObserver = new ResizeObserver(() => {\r\n                this._performLayout();\r\n            });\r\n            this._resizeObserver.observe(el);\r\n        }\r\n\r\n        const resizeHandler = () => this._performLayout();\r\n        window.addEventListener('resize', resizeHandler);\r\n\r\n        el._cleanupResize = () => {\r\n            window.removeEventListener('resize', resizeHandler);\r\n            if (this._resizeObserver) {\r\n                this._resizeObserver.disconnect();\r\n            }\r\n        };\r\n\r\n        this._performLayout();\r\n    }\r\n\r\n    /**\r\n     * Mount child\r\n     * @private\r\n     */\r\n    _onChildMount(el, id) {\r\n        if (!el) return;\r\n        this._childElements.set(id, el);\r\n        this._performLayout();\r\n    }\r\n\r\n    /**\r\n     * Perform layout using delegate\r\n     * @private\r\n     */\r\n    _performLayout() {\r\n        if (!this._containerElement || !this.delegate) return;\r\n\r\n        try {\r\n            const containerRect = this._containerElement.getBoundingClientRect();\r\n            const size = new Size(containerRect.width || 300, containerRect.height || 300);\r\n\r\n            // Get constraints\r\n            const constraints = BoxConstraints.expand({ width: size.width, height: size.height });\r\n\r\n            // Create layout child function\r\n            const layoutChild = (id, childConstraints) => {\r\n                const childEl = this._childElements.get(id);\r\n                if (!childEl) {\r\n                    console.warn(`LayoutId ${id} not found`);\r\n                    return new Size(0, 0);\r\n                }\r\n\r\n                // Get child size\r\n                const childRect = childEl.getBoundingClientRect();\r\n                const childSize = new Size(childRect.width || 100, childRect.height || 100);\r\n\r\n                // Constrain and return\r\n                return childConstraints.constrain(childSize);\r\n            };\r\n\r\n            // Call delegate's performLayout\r\n            const layoutInfo = this.delegate.performLayout(size, layoutChild);\r\n\r\n            // Apply layout to children\r\n            if (layoutInfo && typeof layoutInfo === 'object') {\r\n                for (const [id, info] of Object.entries(layoutInfo)) {\r\n                    const childEl = this._childElements.get(parseInt(id));\r\n                    if (childEl) {\r\n                        childEl.style.left = `${info.x || 0}px`;\r\n                        childEl.style.top = `${info.y || 0}px`;\r\n                        if (info.width) childEl.style.width = `${info.width}px`;\r\n                        if (info.height) childEl.style.height = `${info.height}px`;\r\n                    }\r\n                }\r\n            }\r\n\r\n            // Get container size from delegate\r\n            const containerSize = this.delegate.getSize(constraints);\r\n            this._containerElement.style.width = `${containerSize.width}px`;\r\n            this._containerElement.style.height = `${containerSize.height}px`;\r\n        } catch (error) {\r\n            console.error('Error performing custom multi child layout:', error);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'delegate', value: this.delegate.constructor.name });\r\n        properties.push({ name: 'childCount', value: this.children.length });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new CustomMultiChildLayoutElement(this, parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER CUSTOM MULTI CHILD LAYOUT BOX\r\n// ============================================================================\r\n\r\nclass RenderCustomMultiChildLayoutBox {\r\n    constructor({ delegate = null } = {}) {\r\n        this.delegate = delegate;\r\n    }\r\n\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderCustomMultiChildLayoutBox',\r\n            delegateType: this.delegate?.constructor.name\r\n        };\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// CUSTOM MULTI CHILD LAYOUT ELEMENT\r\n// ============================================================================\r\n\r\nclass CustomMultiChildLayoutElement extends Widget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n\r\n    detach() {\r\n        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {\r\n            this.widget._containerElement._cleanupResize();\r\n        }\r\n        super.detach();\r\n    }\r\n}\r\n\r\nexport {\r\n    CustomSingleChildLayout,\r\n    RenderCustomSingleChildLayoutBox,\r\n    SingleChildLayoutDelegate,\r\n    LayoutId,\r\n    CustomMultiChildLayout,\r\n    RenderCustomMultiChildLayoutBox,\r\n    MultiChildLayoutDelegate\r\n};"],
-  "mappings": "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",
-  "names": ["ProxyWidget", "Widget", "VNode", "Size", "BoxConstraints", "SingleChildLayoutDelegate", "constraints", "size", "childSize", "oldDelegate", "CustomSingleChildLayout", "key", "delegate", "child", "context", "RenderCustomSingleChildLayoutBox", "renderObject", "childVNode", "childElement", "elementId", "widgetPath", "el", "resizeHandler", "containerRect", "parentSize", "childConstraints", "childRect", "constrainedChildSize", "position", "containerSize", "error", "properties", "parent", "runtime", "CustomSingleChildLayoutElement", "MultiChildLayoutDelegate", "layoutChild", "LayoutId", "id", "LayoutIdElement", "CustomMultiChildLayout", "children", "RenderCustomMultiChildLayoutBox", "childVNodes", "childWidget", "index", "wrappedChild", "vnode", "childEl", "layoutInfo", "info", "CustomMultiChildLayoutElement"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/directionality.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/directionality.js
deleted file mode 100644
index 7fe5c918..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/directionality.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{InheritedWidget as g}from"../../core/widget_element.js";import{InheritedElement as f}from"@flutterjs/runtime/element";import{BlendMode as u}from"./opacity.js";import{VNode as p}from"@flutterjs/vdom/vnode";class c extends f{constructor(e){super(e),this._dependencies=new Map}setDependencies(e,t){}getDependencies(e){return null}notifyDependents(e=null){const t=e||this.widget;this._recurseChildren(i=>{this._doesDependOnInheritedElement(i)&&this._notifyDependent(t,i)})}_recurseChildren(e){this.visitChildren(t=>{this._recurseChildrenHelper(t,e)}),e(this)}_recurseChildrenHelper(e,t){e&&(e.visitChildren&&e.visitChildren(i=>{this._recurseChildrenHelper(i,t)}),t(e))}_doesDependOnInheritedElement(e){return this._dependents.has(e)}_notifyDependent(e,t){t&&t._mounted&&!t._deactivated&&(t.didChangeDependencies?t.didChangeDependencies():t.state&&t.state.didChangeDependencies&&t.state.didChangeDependencies())}performRebuild(){const e=!this._child||this.widget.updateShouldNotify(this._child.widget),t=super.performRebuild();return e&&this.notifyDependents(),t}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"dependentCount",value:this._dependents.size})}}class d extends g{constructor({key:e=null,child:t=null}={}){if(super({key:e,child:t}),new.target===d)throw new Error("UbiquitousInheritedWidget is abstract")}createElement(e,t){return new c(this,e,t)}updateShouldNotify(e){throw new Error(`${this.constructor.name}.updateShouldNotify() must be implemented`)}}class o extends d{constructor({key:e=null,shaderCallback:t=null,blendMode:i=u.modulate,child:n=null}={}){if(super({key:e,child:n}),t&&typeof t!="function")throw new Error(`ShaderMaskProvider requires a shaderCallback function, got: ${typeof t}`);if(i&&!Object.values(u).includes(i))throw new Error(`Invalid blendMode: ${i}`);this.shaderCallback=t,this.blendMode=i,this._containerElement=null,this._maskImageUrl=null}static of(e){const t=e.dependOnInheritedWidgetOfExactType(o);if(!t)throw new Error("ShaderMaskProvider.of() called with a context that does not contain a ShaderMaskProvider widget. Make sure to wrap your widget tree with a ShaderMaskProvider widget.");return t}static maybeOf(e){return e.getInheritedWidgetOfExactType(o)||null}updateShouldNotify(e){return this.shaderCallback!==e.shaderCallback||this.blendMode!==e.blendMode}build(e){const t=e.element.getElementId(),i=e.element.getWidgetPath();let n=null;if(this.child)if(this.child.createElement){const r=this.child.createElement(e.element,e.element.runtime);r.mount(e.element),n=r.performRebuild()}else n=this.child;return new p({tag:"div",props:{style:{position:"relative",overflow:"hidden",display:"inline-block"},"data-element-id":t,"data-widget-path":i,"data-widget":"ShaderMaskProvider","data-blend-mode":this.blendMode,ref:r=>this._onContainerMount(r,e)},children:[new p({tag:"div",props:{style:{position:"relative",width:"100%",height:"100%"},"data-widget":"ShaderMaskContent"},children:n?[n]:[]})],key:this.key})}_onContainerMount(e,t){if(!e)return;this._containerElement=e,this.shaderCallback&&this._containerElement&&this._generateAndApplyShaderMask();const i=()=>{this.shaderCallback&&this._containerElement&&this._generateAndApplyShaderMask()};window.addEventListener("resize",i),e._cleanupResize=()=>{window.removeEventListener("resize",i)}}_generateAndApplyShaderMask(){if(!(!this._containerElement||!this.shaderCallback))try{const e=this._containerElement.getBoundingClientRect(),t={width:Math.ceil(e.width)||200,height:Math.ceil(e.height)||200},i=this.shaderCallback(t);this._applyShaderToContainer(i,t)}catch(e){console.error("Error rendering shader mask:",e)}}_applyShaderToContainer(e,t){if(!(!this._containerElement||!e)){if(e.type==="gradient"&&e.gradient){const i=this._createGradientMask(e.gradient,t);this._applyMaskImage(i)}e.type==="svg"&&e.svgContent&&this._applyMaskImage(`url('data:image/svg+xml;utf8,${encodeURIComponent(e.svgContent)}')`),e.type==="url"&&e.url&&this._applyMaskImage(`url('${e.url}')`),e.maskImage&&this._applyMaskImage(e.maskImage),this.blendMode&&(this._containerElement.style.mixBlendMode=this.blendMode)}}_applyMaskImage(e){!this._containerElement||!e||(this._containerElement.style.WebkitMaskImage=e,this._containerElement.style.WebkitMaskSize="100% 100%",this._containerElement.style.WebkitMaskRepeat="no-repeat",this._containerElement.style.WebkitMaskPosition="0 0",this._containerElement.style.maskImage=e,this._containerElement.style.maskSize="100% 100%",this._containerElement.style.maskRepeat="no-repeat",this._containerElement.style.maskPosition="0 0",this._maskImageUrl=e)}_createGradientMask(e,t){const i="http://www.w3.org/2000/svg",n=document.createElementNS(i,"svg");n.setAttribute("width",t.width),n.setAttribute("height",t.height),n.setAttribute("viewBox",`0 0 ${t.width} ${t.height}`);const r=document.createElementNS(i,"defs"),s=document.createElementNS(i,"linearGradient");s.setAttribute("id","maskGradient"),s.setAttribute("x1","0%"),s.setAttribute("y1","0%"),s.setAttribute("x2","100%"),s.setAttribute("y2","0%"),[{offset:"0%",color:"#000000",opacity:"1"},{offset:"100%",color:"#000000",opacity:"0"}].forEach(h=>{const l=document.createElementNS(i,"stop");l.setAttribute("offset",h.offset),l.setAttribute("stop-color",h.color),l.setAttribute("stop-opacity",h.opacity),s.appendChild(l)}),r.appendChild(s),n.appendChild(r);const a=document.createElementNS(i,"rect");a.setAttribute("width",t.width),a.setAttribute("height",t.height),a.setAttribute("fill","url(#maskGradient)"),n.appendChild(a);const m=new XMLSerializer().serializeToString(n);return`url('data:image/svg+xml;utf8,${encodeURIComponent(m)}')`}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"blendMode",value:this.blendMode}),this.shaderCallback&&e.push({name:"shaderCallback",value:"function"}),this._maskImageUrl&&e.push({name:"maskApplied",value:"true"})}createElement(e,t){return new c(this,e,t)}}export{o as ShaderMaskProvider,c as UbiquitousInheritedElement,d as UbiquitousInheritedWidget};
-//# sourceMappingURL=directionality.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/directionality.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/directionality.js.map
deleted file mode 100644
index 4681e6a8..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/directionality.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/directionality.js"],
-  "sourcesContent": ["import { InheritedWidget } from '../../core/widget_element.js';\r\nimport { InheritedElement } from '@flutterjs/runtime/element';\r\nimport { BlendMode } from './opacity.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\n\r\n\r\n// ============================================================================\r\n// UBIQUITOUS INHERITED ELEMENT\r\n// ============================================================================\r\n\r\nclass UbiquitousInheritedElement extends InheritedElement {\r\n    constructor(widget) {\r\n        super(widget);\r\n        this._dependencies = new Map();\r\n    }\r\n\r\n    /**\r\n     * Track dependencies (always null for ubiquitous widgets)\r\n     */\r\n    setDependencies(dependent, value) {\r\n        // Ubiquitous widgets don't track specific dependencies\r\n        // All descendants are considered dependent\r\n    }\r\n\r\n    /**\r\n     * Get dependencies (always null for ubiquitous widgets)\r\n     */\r\n    getDependencies(dependent) {\r\n        return null;\r\n    }\r\n\r\n    /**\r\n     * Notify all clients in the subtree\r\n     */\r\n    notifyDependents(oldWidget = null) {\r\n        const oldInheritedWidget = oldWidget || this.widget;\r\n\r\n        // Recursively notify all descendants\r\n        this._recurseChildren((element) => {\r\n            if (this._doesDependOnInheritedElement(element)) {\r\n                this._notifyDependent(oldInheritedWidget, element);\r\n            }\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Recursively visit all children in the subtree\r\n     * @private\r\n     */\r\n    _recurseChildren(visitor) {\r\n        this.visitChildren((child) => {\r\n            this._recurseChildrenHelper(child, visitor);\r\n        });\r\n\r\n        visitor(this);\r\n    }\r\n\r\n    /**\r\n     * Helper to recursively traverse the tree\r\n     * @private\r\n     */\r\n    _recurseChildrenHelper(element, visitor) {\r\n        if (!element) return;\r\n\r\n        if (element.visitChildren) {\r\n            element.visitChildren((child) => {\r\n                this._recurseChildrenHelper(child, visitor);\r\n            });\r\n        }\r\n\r\n        visitor(element);\r\n    }\r\n\r\n    /**\r\n     * Check if an element depends on this inherited widget\r\n     * @private\r\n     */\r\n    _doesDependOnInheritedElement(element) {\r\n        return this._dependents.has(element);\r\n    }\r\n\r\n    /**\r\n     * Notify a dependent element\r\n     * @private\r\n     */\r\n    _notifyDependent(oldWidget, dependent) {\r\n        if (dependent && dependent._mounted && !dependent._deactivated) {\r\n            if (dependent.didChangeDependencies) {\r\n                dependent.didChangeDependencies();\r\n            } else if (dependent.state && dependent.state.didChangeDependencies) {\r\n                dependent.state.didChangeDependencies();\r\n            }\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Override performRebuild to update all dependents\r\n     */\r\n    performRebuild() {\r\n        const shouldNotify = !this._child ||\r\n            this.widget.updateShouldNotify(this._child.widget);\r\n\r\n        const result = super.performRebuild();\r\n\r\n        if (shouldNotify) {\r\n            this.notifyDependents();\r\n        }\r\n\r\n        return result;\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({\r\n            name: 'dependentCount',\r\n            value: this._dependents.size\r\n        });\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// UBIQUITOUS INHERITED WIDGET BASE CLASS\r\n// ============================================================================\r\n\r\nclass UbiquitousInheritedWidget extends InheritedWidget {\r\n    constructor({ key = null, child = null } = {}) {\r\n        super({ key, child });\r\n\r\n        if (new.target === UbiquitousInheritedWidget) {\r\n            throw new Error('UbiquitousInheritedWidget is abstract');\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Create ubiquitous inherited element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new UbiquitousInheritedElement(this,parent, runtime);\r\n    }\r\n\r\n    /**\r\n     * Override in subclasses\r\n     */\r\n    updateShouldNotify(oldWidget) {\r\n        throw new Error(\r\n            `${this.constructor.name}.updateShouldNotify() must be implemented`\r\n        );\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// SHADER MASK INHERITED WIDGET\r\n// Provides shader mask configuration to all descendants\r\n// ============================================================================\r\n\r\nclass ShaderMaskProvider extends UbiquitousInheritedWidget {\r\n    constructor({ \r\n        key = null, \r\n        shaderCallback = null, \r\n        blendMode = BlendMode.modulate, \r\n        child = null \r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (shaderCallback && typeof shaderCallback !== 'function') {\r\n            throw new Error(\r\n                `ShaderMaskProvider requires a shaderCallback function, got: ${typeof shaderCallback}`\r\n            );\r\n        }\r\n\r\n        if (blendMode && !Object.values(BlendMode).includes(blendMode)) {\r\n            throw new Error(\r\n                `Invalid blendMode: ${blendMode}`\r\n            );\r\n        }\r\n\r\n        this.shaderCallback = shaderCallback;\r\n        this.blendMode = blendMode;\r\n        this._containerElement = null;\r\n        this._maskImageUrl = null;\r\n    }\r\n\r\n    /**\r\n     * Get ShaderMaskProvider from context\r\n     * Throws if not found\r\n     */\r\n    static of(context) {\r\n        const widget = context.dependOnInheritedWidgetOfExactType(ShaderMaskProvider);\r\n\r\n        if (!widget) {\r\n            throw new Error(\r\n                'ShaderMaskProvider.of() called with a context that does not contain a ShaderMaskProvider widget. ' +\r\n                'Make sure to wrap your widget tree with a ShaderMaskProvider widget.'\r\n            );\r\n        }\r\n\r\n        return widget;\r\n    }\r\n\r\n    /**\r\n     * Get ShaderMaskProvider from context (returns null if not found)\r\n     */\r\n    static maybeOf(context) {\r\n        const widget = context.getInheritedWidgetOfExactType(ShaderMaskProvider);\r\n        return widget || null;\r\n    }\r\n\r\n    /**\r\n     * Determine if should notify dependents on update\r\n     */\r\n    updateShouldNotify(oldWidget) {\r\n        return this.shaderCallback !== oldWidget.shaderCallback ||\r\n               this.blendMode !== oldWidget.blendMode;\r\n    }\r\n\r\n    /**\r\n     * Build the widget tree\r\n     */\r\n    build(context) {\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            if (this.child.createElement) {\r\n                const childElement = this.child.createElement(context.element, context.element.runtime);\r\n                childElement.mount(context.element);\r\n                childVNode = childElement.performRebuild();\r\n            } else {\r\n                childVNode = this.child;\r\n            }\r\n        }\r\n\r\n        // Create container with shader mask support\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style: {\r\n                    position: 'relative',\r\n                    overflow: 'hidden',\r\n                    display: 'inline-block'\r\n                },\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'ShaderMaskProvider',\r\n                'data-blend-mode': this.blendMode,\r\n                ref: (el) => this._onContainerMount(el, context)\r\n            },\r\n            children: [\r\n                new VNode({\r\n                    tag: 'div',\r\n                    props: {\r\n                        style: {\r\n                            position: 'relative',\r\n                            width: '100%',\r\n                            height: '100%'\r\n                        },\r\n                        'data-widget': 'ShaderMaskContent'\r\n                    },\r\n                    children: childVNode ? [childVNode] : []\r\n                })\r\n            ],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Mount container and apply shader mask\r\n     */\r\n    _onContainerMount(el, context) {\r\n        if (!el) return;\r\n\r\n        this._containerElement = el;\r\n\r\n        if (this.shaderCallback && this._containerElement) {\r\n            this._generateAndApplyShaderMask();\r\n        }\r\n\r\n        // Re-render on window resize\r\n        const resizeHandler = () => {\r\n            if (this.shaderCallback && this._containerElement) {\r\n                this._generateAndApplyShaderMask();\r\n            }\r\n        };\r\n        window.addEventListener('resize', resizeHandler);\r\n\r\n        // Cleanup on unmount\r\n        el._cleanupResize = () => {\r\n            window.removeEventListener('resize', resizeHandler);\r\n        };\r\n    }\r\n\r\n    /**\r\n     * Generate shader mask and apply it to container\r\n     */\r\n    _generateAndApplyShaderMask() {\r\n        if (!this._containerElement || !this.shaderCallback) return;\r\n\r\n        try {\r\n            // Get container dimensions\r\n            const rect = this._containerElement.getBoundingClientRect();\r\n            const size = {\r\n                width: Math.ceil(rect.width) || 200,\r\n                height: Math.ceil(rect.height) || 200\r\n            };\r\n\r\n            // Call shader callback to get shader configuration\r\n            const shaderConfig = this.shaderCallback(size);\r\n\r\n            // Apply shader mask to container\r\n            this._applyShaderToContainer(shaderConfig, size);\r\n        } catch (error) {\r\n            console.error('Error rendering shader mask:', error);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Apply shader mask to container (Flutter-like behavior)\r\n     */\r\n    _applyShaderToContainer(shaderConfig, size) {\r\n        if (!this._containerElement || !shaderConfig) return;\r\n\r\n        // Handle gradient-based masks\r\n        if (shaderConfig.type === 'gradient' && shaderConfig.gradient) {\r\n            const maskSvg = this._createGradientMask(shaderConfig.gradient, size);\r\n            this._applyMaskImage(maskSvg);\r\n        }\r\n\r\n        // Handle SVG-based masks\r\n        if (shaderConfig.type === 'svg' && shaderConfig.svgContent) {\r\n            this._applyMaskImage(`url('data:image/svg+xml;utf8,${encodeURIComponent(shaderConfig.svgContent)}')`);\r\n        }\r\n\r\n        // Handle URL-based masks\r\n        if (shaderConfig.type === 'url' && shaderConfig.url) {\r\n            this._applyMaskImage(`url('${shaderConfig.url}')`);\r\n        }\r\n\r\n        // Handle custom mask-image CSS\r\n        if (shaderConfig.maskImage) {\r\n            this._applyMaskImage(shaderConfig.maskImage);\r\n        }\r\n\r\n        // Apply blend mode if needed\r\n        if (this.blendMode) {\r\n            this._containerElement.style.mixBlendMode = this.blendMode;\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Apply mask-image to container\r\n     */\r\n    _applyMaskImage(maskImage) {\r\n        if (!this._containerElement || !maskImage) return;\r\n\r\n        this._containerElement.style.WebkitMaskImage = maskImage;\r\n        this._containerElement.style.WebkitMaskSize = '100% 100%';\r\n        this._containerElement.style.WebkitMaskRepeat = 'no-repeat';\r\n        this._containerElement.style.WebkitMaskPosition = '0 0';\r\n\r\n        this._containerElement.style.maskImage = maskImage;\r\n        this._containerElement.style.maskSize = '100% 100%';\r\n        this._containerElement.style.maskRepeat = 'no-repeat';\r\n        this._containerElement.style.maskPosition = '0 0';\r\n\r\n        this._maskImageUrl = maskImage;\r\n    }\r\n\r\n    /**\r\n     * Create SVG-based gradient mask from gradient string\r\n     */\r\n    _createGradientMask(gradientCss, size) {\r\n        const svgNS = 'http://www.w3.org/2000/svg';\r\n        const svg = document.createElementNS(svgNS, 'svg');\r\n        svg.setAttribute('width', size.width);\r\n        svg.setAttribute('height', size.height);\r\n        svg.setAttribute('viewBox', `0 0 ${size.width} ${size.height}`);\r\n\r\n        const defs = document.createElementNS(svgNS, 'defs');\r\n\r\n        const gradient = document.createElementNS(svgNS, 'linearGradient');\r\n        gradient.setAttribute('id', 'maskGradient');\r\n        gradient.setAttribute('x1', '0%');\r\n        gradient.setAttribute('y1', '0%');\r\n        gradient.setAttribute('x2', '100%');\r\n        gradient.setAttribute('y2', '0%');\r\n\r\n        const colorStops = [\r\n            { offset: '0%', color: '#000000', opacity: '1' },\r\n            { offset: '100%', color: '#000000', opacity: '0' }\r\n        ];\r\n\r\n        colorStops.forEach(stop => {\r\n            const stop_el = document.createElementNS(svgNS, 'stop');\r\n            stop_el.setAttribute('offset', stop.offset);\r\n            stop_el.setAttribute('stop-color', stop.color);\r\n            stop_el.setAttribute('stop-opacity', stop.opacity);\r\n            gradient.appendChild(stop_el);\r\n        });\r\n\r\n        defs.appendChild(gradient);\r\n        svg.appendChild(defs);\r\n\r\n        const rect = document.createElementNS(svgNS, 'rect');\r\n        rect.setAttribute('width', size.width);\r\n        rect.setAttribute('height', size.height);\r\n        rect.setAttribute('fill', 'url(#maskGradient)');\r\n        svg.appendChild(rect);\r\n\r\n        const svgString = new XMLSerializer().serializeToString(svg);\r\n        return `url('data:image/svg+xml;utf8,${encodeURIComponent(svgString)}')`;\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({\r\n            name: 'blendMode',\r\n            value: this.blendMode\r\n        });\r\n        if (this.shaderCallback) {\r\n            properties.push({\r\n                name: 'shaderCallback',\r\n                value: 'function'\r\n            });\r\n        }\r\n        if (this._maskImageUrl) {\r\n            properties.push({\r\n                name: 'maskApplied',\r\n                value: 'true'\r\n            });\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new UbiquitousInheritedElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\nexport { ShaderMaskProvider, UbiquitousInheritedWidget, UbiquitousInheritedElement };\r\n"],
-  "mappings": "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",
-  "names": ["InheritedWidget", "InheritedElement", "BlendMode", "VNode", "UbiquitousInheritedElement", "widget", "dependent", "value", "oldWidget", "oldInheritedWidget", "element", "visitor", "child", "shouldNotify", "result", "properties", "UbiquitousInheritedWidget", "key", "parent", "runtime", "ShaderMaskProvider", "shaderCallback", "blendMode", "context", "elementId", "widgetPath", "childVNode", "childElement", "el", "resizeHandler", "rect", "size", "shaderConfig", "error", "maskSvg", "maskImage", "gradientCss", "svgNS", "svg", "defs", "gradient", "stop", "stop_el", "svgString"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/divider.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/divider.js
deleted file mode 100644
index c25dc301..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/divider.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{StatelessWidget as r}from"../../core/widget_element.js";import{Container as h}from"../../material/container.js";import{EdgeInsets as c}from"../../utils/utils.js";import{SizedBox as d}from"./sized_box.js";import{Center as l}from"./center.js";import{Colors as m}from"../../material/color.js";class k extends r{constructor({key:s,height:t=16,thickness:e=null,indent:n=0,endIndent:i=0,color:o=null}={}){super(s),this.height=t,this.thickness=e,this.indent=n,this.endIndent=i,this.color=o}build(s){const t=this.height,e=this.thickness??1,n=this.indent,i=this.endIndent,o=this.color??m.grey.shade400;return new d({height:t,child:new l({child:new h({height:e,margin:c.only({left:n,right:i}),color:o})})})}}export{k as Divider};
-//# sourceMappingURL=divider.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/divider.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/divider.js.map
deleted file mode 100644
index b566d7e8..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/divider.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/divider.js"],
-  "sourcesContent": ["import { StatelessWidget } from '../../core/widget_element.js';\r\nimport { Container } from '../../material/container.js';\r\nimport { EdgeInsets } from '../../utils/utils.js';\r\nimport { SizedBox } from './sized_box.js';\r\nimport { Center } from './center.js';\r\nimport { Colors } from '../../material/color.js';\r\n\r\nexport class Divider extends StatelessWidget {\r\n    constructor({\r\n        key,\r\n        height = 16.0,\r\n        thickness = null,\r\n        indent = 0.0,\r\n        endIndent = 0.0,\r\n        color = null,\r\n    } = {}) {\r\n        super(key);\r\n        this.height = height;\r\n        this.thickness = thickness;\r\n        this.indent = indent;\r\n        this.endIndent = endIndent;\r\n        this.color = color;\r\n    }\r\n\r\n    build(context) {\r\n        const height = this.height;\r\n        const thickness = this.thickness ?? 1.0;\r\n        const indent = this.indent;\r\n        const endIndent = this.endIndent;\r\n        const color = this.color ?? Colors.grey.shade400;\r\n\r\n        return new SizedBox({\r\n            height: height,\r\n            child: new Center({\r\n                child: new Container({\r\n                    height: thickness,\r\n                    margin: EdgeInsets.only({ left: indent, right: endIndent }),\r\n                    color: color,\r\n                })\r\n            })\r\n        });\r\n    }\r\n}\r\n"],
-  "mappings": "AAAA,OAAS,mBAAAA,MAAuB,+BAChC,OAAS,aAAAC,MAAiB,8BAC1B,OAAS,cAAAC,MAAkB,uBAC3B,OAAS,YAAAC,MAAgB,iBACzB,OAAS,UAAAC,MAAc,cACvB,OAAS,UAAAC,MAAc,0BAEhB,MAAMC,UAAgBN,CAAgB,CACzC,YAAY,CACR,IAAAO,EACA,OAAAC,EAAS,GACT,UAAAC,EAAY,KACZ,OAAAC,EAAS,EACT,UAAAC,EAAY,EACZ,MAAAC,EAAQ,IACZ,EAAI,CAAC,EAAG,CACJ,MAAML,CAAG,EACT,KAAK,OAASC,EACd,KAAK,UAAYC,EACjB,KAAK,OAASC,EACd,KAAK,UAAYC,EACjB,KAAK,MAAQC,CACjB,CAEA,MAAMC,EAAS,CACX,MAAML,EAAS,KAAK,OACdC,EAAY,KAAK,WAAa,EAC9BC,EAAS,KAAK,OACdC,EAAY,KAAK,UACjBC,EAAQ,KAAK,OAASP,EAAO,KAAK,SAExC,OAAO,IAAIF,EAAS,CAChB,OAAQK,EACR,MAAO,IAAIJ,EAAO,CACd,MAAO,IAAIH,EAAU,CACjB,OAAQQ,EACR,OAAQP,EAAW,KAAK,CAAE,KAAMQ,EAAQ,MAAOC,CAAU,CAAC,EAC1D,MAAOC,CACX,CAAC,CACL,CAAC,CACL,CAAC,CACL,CACJ",
-  "names": ["StatelessWidget", "Container", "EdgeInsets", "SizedBox", "Center", "Colors", "Divider", "key", "height", "thickness", "indent", "endIndent", "color", "context"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/fitted_box.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/fitted_box.js
deleted file mode 100644
index d70c539c..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/fitted_box.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{ProxyWidget as g}from"../../core/widget_element.js";import{VNode as f}from"@flutterjs/vdom/vnode";import{Alignment as m,Clip as c,BoxFit as r}from"../../utils/utils.js";class v extends g{constructor({key:e=null,fit:t=r.contain,alignment:s=m.center,clipBehavior:a=c.none,child:o=null}={}){if(super({key:e,child:o}),!Object.values(r).includes(t))throw new Error(`Invalid BoxFit: ${t}`);if(!Object.values(c).includes(a))throw new Error(`Invalid clipBehavior: ${a}`);if(!(s instanceof m))throw new Error(`FittedBox requires an Alignment instance, got: ${typeof s}`);this.fit=t,this.alignment=s,this.clipBehavior=a,this._renderObject=null,this._containerElement=null,this._childElement=null,this._resizeObserver=null}createRenderObject(e){return new p({fit:this.fit,alignment:this.alignment,clipBehavior:this.clipBehavior})}updateRenderObject(e,t){t.fit=this.fit,t.alignment=this.alignment,t.clipBehavior=this.clipBehavior}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);let t=null;if(this.child){const i=this.child.createElement(e.element,e.element.runtime);i.mount(e.element),t=i.performRebuild()}const s=e.element.getElementId(),a=e.element.getWidgetPath(),d={position:"relative",overflow:this.clipBehavior===c.none?"visible":"hidden",display:"flex",alignItems:this._getAlignmentValue("vertical"),justifyContent:this._getAlignmentValue("horizontal"),width:"100%",height:"100%"};return new f({tag:"div",props:{style:d,"data-element-id":s,"data-widget-path":a,"data-widget":"FittedBox","data-fit":this.fit,"data-alignment":this.alignment.toString(),"data-clip-behavior":this.clipBehavior,ref:i=>this._onContainerMount(i)},children:[new f({tag:"div",props:{style:{position:"relative",width:"auto",height:"auto",maxWidth:"100%",maxHeight:"100%"},ref:i=>this._onChildMount(i)},children:t?[t]:[]})],key:this.key})}_onContainerMount(e){if(!e)return;this._containerElement=e,window.ResizeObserver&&(this._resizeObserver=new ResizeObserver(()=>{this._applyFitting()}),this._resizeObserver.observe(e));const t=()=>this._applyFitting();window.addEventListener("resize",t),e._cleanupResize=()=>{window.removeEventListener("resize",t),this._resizeObserver&&this._resizeObserver.disconnect()},this._applyFitting()}_onChildMount(e){e&&(this._childElement=e,this._applyFitting())}_applyFitting(){if(!(!this._containerElement||!this._childElement))try{const e=this._containerElement.getBoundingClientRect(),t=e.width||300,s=e.height||300,a=this._childElement.getBoundingClientRect();let o=a.width||100,d=a.height||100;const i=t/o,h=s/d;let n=1,l="none";switch(this.fit){case r.fill:l=`scaleX(${i}) scaleY(${h})`;break;case r.cover:n=Math.max(i,h),l=`scale(${n})`;break;case r.contain:n=Math.min(i,h),l=`scale(${n})`;break;case r.fitWidth:n=i,l=`scale(${n})`;break;case r.fitHeight:n=h,l=`scale(${n})`;break;case r.none:l="none";break;case r.scaleDown:n=Math.min(i,h,1),l=n<1?`scale(${n})`:"none";break;default:l="none"}this._childElement.style.transform=l,this._childElement.style.transformOrigin=this._getTransformOrigin()}catch(e){console.error("Error applying fitted box scaling:",e)}}_getAlignmentValue(e){return e==="horizontal"?this.alignment.x<0?"flex-start":this.alignment.x>0?"flex-end":"center":e==="vertical"?this.alignment.y<0?"flex-start":this.alignment.y>0?"flex-end":"center":"center"}_getTransformOrigin(){const e=(this.alignment.x+1)/2*100,t=(this.alignment.y+1)/2*100;return`${e}% ${t}%`}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"fit",value:this.fit}),e.push({name:"alignment",value:this.alignment.toString()}),e.push({name:"clipBehavior",value:this.clipBehavior})}createElement(e,t){return new _(this,e,t)}}class p{constructor({fit:e=r.contain,alignment:t=m.center,clipBehavior:s=c.none}={}){this.fit=e,this.alignment=t,this.clipBehavior=s}debugInfo(){return{type:"RenderFittedBox",fit:this.fit,alignment:this.alignment.toString(),clipBehavior:this.clipBehavior}}}class _ extends g.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}detach(){this.widget._containerElement&&this.widget._containerElement._cleanupResize&&this.widget._containerElement._cleanupResize(),super.detach()}}export{r as BoxFit,v as FittedBox,p as RenderFittedBox};
-//# sourceMappingURL=fitted_box.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/fitted_box.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/fitted_box.js.map
deleted file mode 100644
index 890f39fc..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/fitted_box.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/fitted_box.js"],
-  "sourcesContent": ["import { ProxyWidget } from '../../core/widget_element.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { Alignment,Clip ,BoxFit} from '../../utils/utils.js';\r\n\r\n\r\n\r\n// ============================================================================\r\n// FITTED BOX WIDGET\r\n// Scales and positions child to fit available space\r\n// ============================================================================\r\n\r\nclass FittedBox extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        fit = BoxFit.contain,\r\n        alignment = Alignment.center,\r\n        clipBehavior = Clip.none,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (!Object.values(BoxFit).includes(fit)) {\r\n            throw new Error(`Invalid BoxFit: ${fit}`);\r\n        }\r\n\r\n        if (!Object.values(Clip).includes(clipBehavior)) {\r\n            throw new Error(`Invalid clipBehavior: ${clipBehavior}`);\r\n        }\r\n\r\n        if (!(alignment instanceof Alignment)) {\r\n            throw new Error(\r\n                `FittedBox requires an Alignment instance, got: ${typeof alignment}`\r\n            );\r\n        }\r\n\r\n        this.fit = fit;\r\n        this.alignment = alignment;\r\n        this.clipBehavior = clipBehavior;\r\n        this._renderObject = null;\r\n        this._containerElement = null;\r\n        this._childElement = null;\r\n        this._resizeObserver = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return new RenderFittedBox({\r\n            fit: this.fit,\r\n            alignment: this.alignment,\r\n            clipBehavior: this.clipBehavior\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.fit = this.fit;\r\n        renderObject.alignment = this.alignment;\r\n        renderObject.clipBehavior = this.clipBehavior;\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        // Overflow handling\r\n        const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';\r\n\r\n        const style = {\r\n            position: 'relative',\r\n            overflow: overflowValue,\r\n            display: 'flex',\r\n            alignItems: this._getAlignmentValue('vertical'),\r\n            justifyContent: this._getAlignmentValue('horizontal'),\r\n            width: '100%',\r\n            height: '100%'\r\n        };\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style,\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'FittedBox',\r\n                'data-fit': this.fit,\r\n                'data-alignment': this.alignment.toString(),\r\n                'data-clip-behavior': this.clipBehavior,\r\n                ref: (el) => this._onContainerMount(el)\r\n            },\r\n            children: [\r\n                new VNode({\r\n                    tag: 'div',\r\n                    props: {\r\n                        style: {\r\n                            position: 'relative',\r\n                            width: 'auto',\r\n                            height: 'auto',\r\n                            maxWidth: '100%',\r\n                            maxHeight: '100%'\r\n                        },\r\n                        ref: (el) => this._onChildMount(el)\r\n                    },\r\n                    children: childVNode ? [childVNode] : []\r\n                })\r\n            ],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Mount container and set up resize observer\r\n     * @private\r\n     */\r\n    _onContainerMount(el) {\r\n        if (!el) return;\r\n\r\n        this._containerElement = el;\r\n\r\n        // Set up resize observer to handle size changes\r\n        if (window.ResizeObserver) {\r\n            this._resizeObserver = new ResizeObserver(() => {\r\n                this._applyFitting();\r\n            });\r\n            this._resizeObserver.observe(el);\r\n        }\r\n\r\n        // Fallback to window resize\r\n        const resizeHandler = () => this._applyFitting();\r\n        window.addEventListener('resize', resizeHandler);\r\n\r\n        el._cleanupResize = () => {\r\n            window.removeEventListener('resize', resizeHandler);\r\n            if (this._resizeObserver) {\r\n                this._resizeObserver.disconnect();\r\n            }\r\n        };\r\n\r\n        this._applyFitting();\r\n    }\r\n\r\n    /**\r\n     * Mount child element\r\n     * @private\r\n     */\r\n    _onChildMount(el) {\r\n        if (!el) return;\r\n\r\n        this._childElement = el;\r\n        this._applyFitting();\r\n    }\r\n\r\n    /**\r\n     * Apply fitting logic\r\n     * @private\r\n     */\r\n    _applyFitting() {\r\n        if (!this._containerElement || !this._childElement) return;\r\n\r\n        try {\r\n            const containerRect = this._containerElement.getBoundingClientRect();\r\n            const containerWidth = containerRect.width || 300;\r\n            const containerHeight = containerRect.height || 300;\r\n\r\n            // Get child's natural dimensions\r\n            const childRect = this._childElement.getBoundingClientRect();\r\n            let childWidth = childRect.width || 100;\r\n            let childHeight = childRect.height || 100;\r\n\r\n            // Calculate scaling factors\r\n            const scaleX = containerWidth / childWidth;\r\n            const scaleY = containerHeight / childHeight;\r\n\r\n            let scale = 1;\r\n            let transform = 'none';\r\n\r\n            // Apply BoxFit logic\r\n            switch (this.fit) {\r\n                case BoxFit.fill:\r\n                    // Stretch to fill, ignore aspect ratio\r\n                    transform = `scaleX(${scaleX}) scaleY(${scaleY})`;\r\n                    break;\r\n\r\n                case BoxFit.cover:\r\n                    // Scale to cover, maintain aspect ratio, may crop\r\n                    scale = Math.max(scaleX, scaleY);\r\n                    transform = `scale(${scale})`;\r\n                    break;\r\n\r\n                case BoxFit.contain:\r\n                    // Scale to fit inside, maintain aspect ratio\r\n                    scale = Math.min(scaleX, scaleY);\r\n                    transform = `scale(${scale})`;\r\n                    break;\r\n\r\n                case BoxFit.fitWidth:\r\n                    // Fit to width, maintain aspect ratio\r\n                    scale = scaleX;\r\n                    transform = `scale(${scale})`;\r\n                    break;\r\n\r\n                case BoxFit.fitHeight:\r\n                    // Fit to height, maintain aspect ratio\r\n                    scale = scaleY;\r\n                    transform = `scale(${scale})`;\r\n                    break;\r\n\r\n                case BoxFit.none:\r\n                    // No scaling\r\n                    transform = 'none';\r\n                    break;\r\n\r\n                case BoxFit.scaleDown:\r\n                    // Scale down only if needed\r\n                    scale = Math.min(scaleX, scaleY, 1);\r\n                    transform = scale < 1 ? `scale(${scale})` : 'none';\r\n                    break;\r\n\r\n                default:\r\n                    transform = 'none';\r\n            }\r\n\r\n            // Apply transform\r\n            this._childElement.style.transform = transform;\r\n            this._childElement.style.transformOrigin = this._getTransformOrigin();\r\n        } catch (error) {\r\n            console.error('Error applying fitted box scaling:', error);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Get alignment value for flex properties\r\n     * @private\r\n     */\r\n    _getAlignmentValue(direction) {\r\n        if (direction === 'horizontal') {\r\n            if (this.alignment.x < 0) return 'flex-start';\r\n            if (this.alignment.x > 0) return 'flex-end';\r\n            return 'center';\r\n        } else if (direction === 'vertical') {\r\n            if (this.alignment.y < 0) return 'flex-start';\r\n            if (this.alignment.y > 0) return 'flex-end';\r\n            return 'center';\r\n        }\r\n        return 'center';\r\n    }\r\n\r\n    /**\r\n     * Get transform origin from alignment\r\n     * @private\r\n     */\r\n    _getTransformOrigin() {\r\n        const x = ((this.alignment.x + 1) / 2) * 100;\r\n        const y = ((this.alignment.y + 1) / 2) * 100;\r\n        return `${x}% ${y}%`;\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'fit', value: this.fit });\r\n        properties.push({ name: 'alignment', value: this.alignment.toString() });\r\n        properties.push({ name: 'clipBehavior', value: this.clipBehavior });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new FittedBoxElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER FITTED BOX\r\n// ============================================================================\r\n\r\nclass RenderFittedBox {\r\n    constructor({\r\n        fit = BoxFit.contain,\r\n        alignment = Alignment.center,\r\n        clipBehavior = Clip.none\r\n    } = {}) {\r\n        this.fit = fit;\r\n        this.alignment = alignment;\r\n        this.clipBehavior = clipBehavior;\r\n    }\r\n\r\n    /**\r\n     * Debug info\r\n     */\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderFittedBox',\r\n            fit: this.fit,\r\n            alignment: this.alignment.toString(),\r\n            clipBehavior: this.clipBehavior\r\n        };\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// FITTED BOX ELEMENT\r\n// ============================================================================\r\n\r\nclass FittedBoxElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n\r\n    detach() {\r\n        // Cleanup resize observer\r\n        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {\r\n            this.widget._containerElement._cleanupResize();\r\n        }\r\n        super.detach();\r\n    }\r\n}\r\n\r\nexport { FittedBox, RenderFittedBox, BoxFit };"],
-  "mappings": "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",
-  "names": ["ProxyWidget", "VNode", "Alignment", "Clip", "BoxFit", "FittedBox", "key", "fit", "alignment", "clipBehavior", "child", "context", "RenderFittedBox", "renderObject", "childVNode", "childElement", "elementId", "widgetPath", "style", "el", "resizeHandler", "containerRect", "containerWidth", "containerHeight", "childRect", "childWidth", "childHeight", "scaleX", "scaleY", "scale", "transform", "error", "direction", "x", "y", "properties", "parent", "runtime", "FittedBoxElement"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/fractional_translation.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/fractional_translation.js
deleted file mode 100644
index b36b49f6..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/fractional_translation.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{ProxyWidget as o}from"../../core/widget_element.js";import{VNode as d}from"@flutterjs/vdom/vnode";import{Offset as m}from"../../utils/utils.js";class p extends o{constructor({key:t=null,translation:e=null,transformHitTests:r=!0,child:n=null}={}){if(super({key:t,child:n}),!e)throw new Error("FractionalTranslation requires a translation (Offset)");if(!(e instanceof m))throw new Error(`FractionalTranslation requires an Offset instance, got: ${typeof e}`);this.translation=e,this.transformHitTests=r,this._renderObject=null,this._containerElement=null,this._resizeObserver=null}createRenderObject(t){return new u({translation:this.translation,transformHitTests:this.transformHitTests})}updateRenderObject(t,e){e.translation=this.translation,e.transformHitTests=this.transformHitTests}build(t){this._renderObject?this.updateRenderObject(t,this._renderObject):this._renderObject=this.createRenderObject(t);let e=null;if(this.child){const a=this.child.createElement(t.element,t.element.runtime);a.mount(t.element),e=a.performRebuild()}const r=t.element.getElementId(),n=t.element.getWidgetPath(),s={position:"relative"};return new d({tag:"div",props:{style:s,"data-element-id":r,"data-widget-path":n,"data-widget":"FractionalTranslation","data-translation":this.translation.toString(),"data-transform-hit-tests":this.transformHitTests,ref:a=>this._onMount(a)},children:e?[e]:[],key:this.key})}_onMount(t){if(!t)return;this._containerElement=t,window.ResizeObserver&&(this._resizeObserver=new ResizeObserver(()=>{this._applyTranslation()}),this._resizeObserver.observe(t));const e=()=>this._applyTranslation();window.addEventListener("resize",e),t._cleanupResize=()=>{window.removeEventListener("resize",e),this._resizeObserver&&this._resizeObserver.disconnect()},this._applyTranslation()}_applyTranslation(){if(this._containerElement)try{const t=this._containerElement.getBoundingClientRect(),e=t.width||100,r=t.height||100,n=e*this.translation.dx,s=r*this.translation.dy;this._containerElement.style.transform=`translate(${n}px, ${s}px)`}catch(t){console.error("Error applying fractional translation:",t)}}debugFillProperties(t){super.debugFillProperties(t),t.push({name:"translation",value:this.translation.toString()}),t.push({name:"transformHitTests",value:this.transformHitTests})}createElement(t,e){return new g(this,t,e)}}class u{constructor({translation:t=null,transformHitTests:e=!0}={}){this.translation=t,this.transformHitTests=e}debugInfo(){return{type:"RenderFractionalTranslation",translation:this.translation?.toString(),transformHitTests:this.transformHitTests}}}class g extends o.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}detach(){this.widget._containerElement&&this.widget._containerElement._cleanupResize&&this.widget._containerElement._cleanupResize(),super.detach()}}class f extends o{constructor({key:t=null,quarterTurns:e=0,child:r=null}={}){if(super({key:t,child:r}),typeof e!="number"||!Number.isInteger(e))throw new Error(`RotatedBox requires quarterTurns to be an integer, got: ${e}`);this.quarterTurns=e,this._renderObject=null}createRenderObject(t){return new h({quarterTurns:this.quarterTurns})}updateRenderObject(t,e){e.quarterTurns=this.quarterTurns}build(t){this._renderObject?this.updateRenderObject(t,this._renderObject):this._renderObject=this.createRenderObject(t);let e=null;if(this.child){const l=this.child.createElement(t.element,t.element.runtime);l.mount(t.element),e=l.performRebuild()}const r=t.element.getElementId(),n=t.element.getWidgetPath(),s=this._getRotationAngle(),a=this._shouldSwapDimensions(),c={position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",transform:`rotate(${s}deg)`,transformOrigin:"center"};return new d({tag:"div",props:{style:c,"data-element-id":r,"data-widget-path":n,"data-widget":"RotatedBox","data-quarter-turns":this.quarterTurns,"data-rotation-angle":s},children:e?[e]:[],key:this.key})}_getRotationAngle(){return(this.quarterTurns%4+4)%4*90}_shouldSwapDimensions(){const t=(this.quarterTurns%4+4)%4;return t===1||t===3}debugFillProperties(t){super.debugFillProperties(t),t.push({name:"quarterTurns",value:this.quarterTurns}),t.push({name:"rotationAngle",value:`${this._getRotationAngle()}\xB0`})}createElement(t,e){return new b(this,t,e)}}class h{constructor({quarterTurns:t=0}={}){this.quarterTurns=t}debugInfo(){return{type:"RenderRotatedBox",quarterTurns:this.quarterTurns,rotationAngle:`${(this.quarterTurns%4+4)%4*90}\xB0`}}}class b extends o.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}}export{p as FractionalTranslation,u as RenderFractionalTranslation,h as RenderRotatedBox,f as RotatedBox};
-//# sourceMappingURL=fractional_translation.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/fractional_translation.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/fractional_translation.js.map
deleted file mode 100644
index 0b56d04d..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/fractional_translation.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/fractional_translation.js"],
-  "sourcesContent": ["import { ProxyWidget } from '../../core/widget_element.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { Offset } from '../../utils/utils.js';\r\n\r\n// ============================================================================\r\n// FRACTIONAL TRANSLATION WIDGET\r\n// Translates child by a fraction of its own size\r\n// ============================================================================\r\n\r\nclass FractionalTranslation extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        translation = null,\r\n        transformHitTests = true,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (!translation) {\r\n            throw new Error('FractionalTranslation requires a translation (Offset)');\r\n        }\r\n\r\n        if (!(translation instanceof Offset)) {\r\n            throw new Error(\r\n                `FractionalTranslation requires an Offset instance, got: ${typeof translation}`\r\n            );\r\n        }\r\n\r\n        this.translation = translation;\r\n        this.transformHitTests = transformHitTests;\r\n        this._renderObject = null;\r\n        this._containerElement = null;\r\n        this._resizeObserver = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return new RenderFractionalTranslation({\r\n            translation: this.translation,\r\n            transformHitTests: this.transformHitTests\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.translation = this.translation;\r\n        renderObject.transformHitTests = this.transformHitTests;\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        const style = {\r\n            position: 'relative'\r\n        };\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style,\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'FractionalTranslation',\r\n                'data-translation': this.translation.toString(),\r\n                'data-transform-hit-tests': this.transformHitTests,\r\n                ref: (el) => this._onMount(el)\r\n            },\r\n            children: childVNode ? [childVNode] : [],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Mount container and set up resize observer\r\n     * @private\r\n     */\r\n    _onMount(el) {\r\n        if (!el) return;\r\n\r\n        this._containerElement = el;\r\n\r\n        // Set up resize observer to recalculate translation\r\n        if (window.ResizeObserver) {\r\n            this._resizeObserver = new ResizeObserver(() => {\r\n                this._applyTranslation();\r\n            });\r\n            this._resizeObserver.observe(el);\r\n        }\r\n\r\n        // Fallback to window resize\r\n        const resizeHandler = () => this._applyTranslation();\r\n        window.addEventListener('resize', resizeHandler);\r\n\r\n        el._cleanupResize = () => {\r\n            window.removeEventListener('resize', resizeHandler);\r\n            if (this._resizeObserver) {\r\n                this._resizeObserver.disconnect();\r\n            }\r\n        };\r\n\r\n        this._applyTranslation();\r\n    }\r\n\r\n    /**\r\n     * Apply fractional translation\r\n     * Translates by fraction of own size\r\n     * @private\r\n     */\r\n    _applyTranslation() {\r\n        if (!this._containerElement) return;\r\n\r\n        try {\r\n            const rect = this._containerElement.getBoundingClientRect();\r\n            const width = rect.width || 100;\r\n            const height = rect.height || 100;\r\n\r\n            // Calculate translation in pixels based on fraction of own size\r\n            const translateX = width * this.translation.dx;\r\n            const translateY = height * this.translation.dy;\r\n\r\n            this._containerElement.style.transform = `translate(${translateX}px, ${translateY}px)`;\r\n        } catch (error) {\r\n            console.error('Error applying fractional translation:', error);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'translation', value: this.translation.toString() });\r\n        properties.push({ name: 'transformHitTests', value: this.transformHitTests });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new FractionalTranslationElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER FRACTIONAL TRANSLATION\r\n// ============================================================================\r\n\r\nclass RenderFractionalTranslation {\r\n    constructor({\r\n        translation = null,\r\n        transformHitTests = true\r\n    } = {}) {\r\n        this.translation = translation;\r\n        this.transformHitTests = transformHitTests;\r\n    }\r\n\r\n    /**\r\n     * Debug info\r\n     */\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderFractionalTranslation',\r\n            translation: this.translation?.toString(),\r\n            transformHitTests: this.transformHitTests\r\n        };\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// FRACTIONAL TRANSLATION ELEMENT\r\n// ============================================================================\r\n\r\nclass FractionalTranslationElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n\r\n    detach() {\r\n        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {\r\n            this.widget._containerElement._cleanupResize();\r\n        }\r\n        super.detach();\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// ROTATED BOX WIDGET\r\n// Rotates child by increments of 90 degrees (quarter turns)\r\n// ============================================================================\r\n\r\nclass RotatedBox extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        quarterTurns = 0,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (typeof quarterTurns !== 'number' || !Number.isInteger(quarterTurns)) {\r\n            throw new Error(\r\n                `RotatedBox requires quarterTurns to be an integer, got: ${quarterTurns}`\r\n            );\r\n        }\r\n\r\n        this.quarterTurns = quarterTurns;\r\n        this._renderObject = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return new RenderRotatedBox({\r\n            quarterTurns: this.quarterTurns\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.quarterTurns = this.quarterTurns;\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        // Calculate rotation angle and required dimensions\r\n        const rotationAngle = this._getRotationAngle();\r\n        const swapDimensions = this._shouldSwapDimensions();\r\n\r\n        const style = {\r\n            position: 'relative',\r\n            display: 'inline-flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            transform: `rotate(${rotationAngle}deg)`,\r\n            transformOrigin: 'center'\r\n        };\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style,\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'RotatedBox',\r\n                'data-quarter-turns': this.quarterTurns,\r\n                'data-rotation-angle': rotationAngle\r\n            },\r\n            children: childVNode ? [childVNode] : [],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Get rotation angle in degrees\r\n     * @private\r\n     */\r\n    _getRotationAngle() {\r\n        // Normalize quarter turns to 0-3 range\r\n        const normalized = ((this.quarterTurns % 4) + 4) % 4;\r\n        return normalized * 90;\r\n    }\r\n\r\n    /**\r\n     * Check if dimensions should be swapped\r\n     * When rotated 90 or 270 degrees, width becomes height\r\n     * @private\r\n     */\r\n    _shouldSwapDimensions() {\r\n        const normalized = ((this.quarterTurns % 4) + 4) % 4;\r\n        return normalized === 1 || normalized === 3;\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'quarterTurns', value: this.quarterTurns });\r\n        properties.push({ name: 'rotationAngle', value: `${this._getRotationAngle()}\u00B0` });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new RotatedBoxElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER ROTATED BOX\r\n// ============================================================================\r\n\r\nclass RenderRotatedBox {\r\n    constructor({\r\n        quarterTurns = 0\r\n    } = {}) {\r\n        this.quarterTurns = quarterTurns;\r\n    }\r\n\r\n    /**\r\n     * Debug info\r\n     */\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderRotatedBox',\r\n            quarterTurns: this.quarterTurns,\r\n            rotationAngle: `${((this.quarterTurns % 4 + 4) % 4) * 90}\u00B0`\r\n        };\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// ROTATED BOX ELEMENT\r\n// ============================================================================\r\n\r\nclass RotatedBoxElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n}\r\n\r\nexport {\r\n    FractionalTranslation,\r\n    RenderFractionalTranslation,\r\n    RotatedBox,\r\n    RenderRotatedBox\r\n};"],
-  "mappings": "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",
-  "names": ["ProxyWidget", "VNode", "Offset", "FractionalTranslation", "key", "translation", "transformHitTests", "child", "context", "RenderFractionalTranslation", "renderObject", "childVNode", "childElement", "elementId", "widgetPath", "style", "el", "resizeHandler", "rect", "width", "height", "translateX", "translateY", "error", "properties", "parent", "runtime", "FractionalTranslationElement", "RotatedBox", "quarterTurns", "RenderRotatedBox", "rotationAngle", "swapDimensions", "normalized", "RotatedBoxElement"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/image_filter.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/image_filter.js
deleted file mode 100644
index dc74ad74..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/image_filter.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{UbiquitousInheritedWidget as u,UbiquitousInheritedElement as h}from"./directionality.js";import{VNode as m}from"@flutterjs/vdom/vnode";class i{constructor(e="blur",t={}){this.type=e,this.values=t}static blur({sigmaX:e=0,sigmaY:t=0}={}){return new i("blur",{sigmaX:e,sigmaY:t})}static matrix(e){return new i("matrix",e)}toCSSFilter(){switch(this.type){case"blur":return`blur(${Math.max(this.values.sigmaX,this.values.sigmaY)}px)`;case"matrix":return`matrix(${Object.values(this.values).join(", ")})`;default:return"none"}}equals(e){return!e||!(e instanceof i)?!1:this.type===e.type&&JSON.stringify(this.values)===JSON.stringify(e.values)}toString(){return`ImageFilter(${this.type}, ${JSON.stringify(this.values)})`}}class r extends u{constructor({key:e=null,imageFilter:t=null,child:l=null}={}){if(super({key:e,child:l}),t&&!(t instanceof i))throw new Error(`ImageFilterProvider requires an ImageFilter instance, got: ${typeof t}`);this.imageFilter=t}updateShouldNotify(e){return!this.imageFilter&&!e.imageFilter?!1:!this.imageFilter||!e.imageFilter?!0:!this.imageFilter.equals(e.imageFilter)}static of(e){const t=e.dependOnInheritedWidgetOfExactType(r);if(!t)throw new Error("ImageFilterProvider.of() called with a context that does not contain an ImageFilterProvider widget. Make sure to wrap your widget tree with an ImageFilterProvider widget.");return t}static maybeOf(e){return e.getInheritedWidgetOfExactType(r)||null}build(e){let t=null;if(this.child)if(this.child.createElement){const a=this.child.createElement(e.element,e.element.runtime);a.mount(e.element),t=a.performRebuild()}else t=this.child;const l=e.element.getElementId(),n=e.element.getWidgetPath(),s=this.imageFilter?this.imageFilter.toCSSFilter():"none";return new m({tag:"div",props:{style:{position:"relative",filter:s},"data-element-id":l,"data-widget-path":n,"data-widget":"ImageFilterProvider","data-filter-type":this.imageFilter?this.imageFilter.type:"none","data-filter-css":s},children:t?[t]:[],key:this.key})}debugFillProperties(e){super.debugFillProperties(e),this.imageFilter&&(e.push({name:"imageFilter",value:this.imageFilter.toString()}),e.push({name:"filterType",value:this.imageFilter.type}),e.push({name:"cssFilter",value:this.imageFilter.toCSSFilter()}))}createElement(e,t){return new h(this,e,t)}}export{i as ImageFilter,r as ImageFilterProvider};
-//# sourceMappingURL=image_filter.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/image_filter.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/image_filter.js.map
deleted file mode 100644
index 2ab36147..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/image_filter.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/image_filter.js"],
-  "sourcesContent": ["import { UbiquitousInheritedWidget, UbiquitousInheritedElement } from './directionality.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\n\r\n// ============================================================================\r\n// IMAGE FILTER\r\n// Represents a visual filter effect (blur, matrix, etc.)\r\n// ============================================================================\r\n\r\nclass ImageFilter {\r\n    constructor(type = 'blur', values = {}) {\r\n        this.type = type;\r\n        this.values = values;\r\n    }\r\n\r\n    /**\r\n     * Create blur filter\r\n     */\r\n    static blur({ sigmaX = 0, sigmaY = 0 } = {}) {\r\n        return new ImageFilter('blur', { sigmaX, sigmaY });\r\n    }\r\n\r\n    /**\r\n     * Create matrix filter\r\n     */\r\n    static matrix(values) {\r\n        return new ImageFilter('matrix', values);\r\n    }\r\n\r\n    /**\r\n     * Convert to CSS filter string\r\n     */\r\n    toCSSFilter() {\r\n        switch (this.type) {\r\n            case 'blur':\r\n                return `blur(${Math.max(this.values.sigmaX, this.values.sigmaY)}px)`;\r\n            case 'matrix':\r\n                return `matrix(${Object.values(this.values).join(', ')})`;\r\n            default:\r\n                return 'none';\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Check equality with another filter\r\n     */\r\n    equals(other) {\r\n        if (!other || !(other instanceof ImageFilter)) {\r\n            return false;\r\n        }\r\n        return this.type === other.type &&\r\n               JSON.stringify(this.values) === JSON.stringify(other.values);\r\n    }\r\n\r\n    toString() {\r\n        return `ImageFilter(${this.type}, ${JSON.stringify(this.values)})`;\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// IMAGE FILTER PROVIDER\r\n// Ubiquitous inherited widget that provides image filter to all descendants\r\n// ============================================================================\r\n\r\nclass ImageFilterProvider extends UbiquitousInheritedWidget {\r\n    constructor({ key = null, imageFilter = null, child = null } = {}) {\r\n        super({ key, child });\r\n\r\n        if (imageFilter && !(imageFilter instanceof ImageFilter)) {\r\n            throw new Error(\r\n                `ImageFilterProvider requires an ImageFilter instance, got: ${typeof imageFilter}`\r\n            );\r\n        }\r\n\r\n        this.imageFilter = imageFilter;\r\n    }\r\n\r\n    /**\r\n     * Check if should notify dependents\r\n     */\r\n    updateShouldNotify(oldWidget) {\r\n        // Notify if filter changes\r\n        if (!this.imageFilter && !oldWidget.imageFilter) {\r\n            return false;\r\n        }\r\n        if (!this.imageFilter || !oldWidget.imageFilter) {\r\n            return true;\r\n        }\r\n        return !this.imageFilter.equals(oldWidget.imageFilter);\r\n    }\r\n\r\n    /**\r\n     * Get ImageFilterProvider from context\r\n     * Throws if not found\r\n     */\r\n    static of(context) {\r\n        const widget = context.dependOnInheritedWidgetOfExactType(ImageFilterProvider);\r\n\r\n        if (!widget) {\r\n            throw new Error(\r\n                'ImageFilterProvider.of() called with a context that does not contain an ImageFilterProvider widget. ' +\r\n                'Make sure to wrap your widget tree with an ImageFilterProvider widget.'\r\n            );\r\n        }\r\n\r\n        return widget;\r\n    }\r\n\r\n    /**\r\n     * Get ImageFilterProvider from context (returns null if not found)\r\n     */\r\n    static maybeOf(context) {\r\n        const widget = context.getInheritedWidgetOfExactType(ImageFilterProvider);\r\n        return widget || null;\r\n    }\r\n\r\n    /**\r\n     * Build the widget tree\r\n     */\r\n    build(context) {\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            if (this.child.createElement) {\r\n                const childElement = this.child.createElement(context.element, context.element.runtime);\r\n                childElement.mount(context.element);\r\n                childVNode = childElement.performRebuild();\r\n            } else {\r\n                childVNode = this.child;\r\n            }\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        // Apply filter styling to container\r\n        const filterCss = this.imageFilter ? this.imageFilter.toCSSFilter() : 'none';\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style: {\r\n                    position: 'relative',\r\n                    filter: filterCss\r\n                },\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'ImageFilterProvider',\r\n                'data-filter-type': this.imageFilter ? this.imageFilter.type : 'none',\r\n                'data-filter-css': filterCss\r\n            },\r\n            children: childVNode ? [childVNode] : [],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        if (this.imageFilter) {\r\n            properties.push({\r\n                name: 'imageFilter',\r\n                value: this.imageFilter.toString()\r\n            });\r\n            properties.push({\r\n                name: 'filterType',\r\n                value: this.imageFilter.type\r\n            });\r\n            properties.push({\r\n                name: 'cssFilter',\r\n                value: this.imageFilter.toCSSFilter()\r\n            });\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new UbiquitousInheritedElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\nexport { ImageFilter, ImageFilterProvider };"],
-  "mappings": "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",
-  "names": ["UbiquitousInheritedWidget", "UbiquitousInheritedElement", "VNode", "ImageFilter", "type", "values", "sigmaX", "sigmaY", "other", "ImageFilterProvider", "key", "imageFilter", "child", "oldWidget", "context", "widget", "childVNode", "childElement", "elementId", "widgetPath", "filterCss", "properties", "parent", "runtime"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/indexed_stack.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/indexed_stack.js
deleted file mode 100644
index e1bb6fc0..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/indexed_stack.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{Widget as S,StatelessWidget as C}from"../../core/widget_element.js";import{Element as k}from"@flutterjs/runtime";import{Stack as E,StackElement as O,RenderStack as R,AlignmentDirectional as g,StackFit as h}from"./stack.js";import{VNode as r}from"@flutterjs/vdom/vnode";import{Clip as o,TextDirection as D}from"../../utils/utils.js";class x extends S{constructor({key:e=null,visible:i=!0,maintainState:t=!1,maintainAnimation:n=!1,maintainSize:s=!1,maintainInteractivity:a=!1,replacement:l=null,child:c=null}={}){super(e),this.visible=i,this.maintainState=t,this.maintainAnimation=n,this.maintainSize=s,this.maintainInteractivity=a,this.replacement=l,this.child=c}build(e){return this.visible?this.child:this.replacement?this.replacement:this.maintainSize?new r({tag:"div",props:{style:{visibility:"hidden",pointerEvents:this.maintainInteractivity?"auto":"none"}},children:[this.child]}):this.maintainState||this.maintainAnimation?new r({tag:"div",props:{style:{display:"none",pointerEvents:this.maintainInteractivity?"auto":"none"}},children:[this.child]}):new r({tag:"div",children:[]})}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"visible",value:this.visible}),e.push({name:"maintainState",value:this.maintainState}),e.push({name:"maintainAnimation",value:this.maintainAnimation}),e.push({name:"maintainSize",value:this.maintainSize}),e.push({name:"maintainInteractivity",value:this.maintainInteractivity})}createElement(e,i){return new v(this,e,i)}}class v extends k{performRebuild(){return this.widget.build(this.context)}}class b extends R{constructor({index:e=0,alignment:i=g.topStart,textDirection:t=D.ltr,fit:n=h.loose,clipBehavior:s=o.hardEdge}={}){super({alignment:i,textDirection:t,fit:n,clipBehavior:s}),this.index=e}getIndexedChild(){return this.index===null||this.index===void 0||this.index<0||this.index>=this._children.length?null:this._children[this.index]}isChildVisible(e){return e===this.index}debugInfo(){return{...super.debugInfo(),type:"RenderIndexedStack",index:this.index,childCount:this._children.length,visibleChildIndex:this.getIndexedChild()?this.index:null}}}class _ extends O{constructor(e){super(e),this._onstageChild=null}get widget(){return super.widget}mount(e=null){super.mount(e),this._updateOnstageChild()}updateWidget(e){const i=this.widget.index;super.updateWidget(e),i!==e.index&&(this._updateOnstageChild(),this.markNeedsBuild())}_updateOnstageChild(){const e=this.widget.index;if(e==null){this._onstageChild=null;return}this._children&&e>=0&&e<this._children.length?this._onstageChild=this._children[e]:this._onstageChild=null}debugVisitOnstageChildren(e){this._onstageChild&&e(this._onstageChild)}visitChildren(e){if(this._children)for(const i of this._children)e(i)}performRebuild(){return this.widget.build(this.context)}}class y extends E{constructor({key:e=null,alignment:i=g.topStart,textDirection:t=null,clipBehavior:n=o.hardEdge,sizing:s=h.loose,index:a=0,children:l=[]}={}){super({key:e,alignment:i,textDirection:t,clipBehavior:n,fit:s,children:l}),this._validateIndex(a,l.length),this.index=a}_validateIndex(e,i){if(e!=null&&((e<0||e>=i)&&console.warn(`IndexedStack: index ${e} is out of bounds. Valid range is 0 to ${i-1}.`),!Number.isInteger(e)))throw new Error(`IndexedStack: index must be an integer, got ${typeof e}`)}_debugCheckHasDirectionality(e){return super._debugCheckHasDirectionality(e)}createRenderObject(e){return new b({index:this.index,alignment:this.alignment,textDirection:this._getEffectiveTextDirection(e),fit:this.fit,clipBehavior:this.clipBehavior})}updateRenderObject(e,i){super.updateRenderObject(e,i),i.index=this.index}build(e){this._debugCheckHasDirectionality(e),this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);const i=e.element.getElementId(),t=e.element.getWidgetPath(),n=this._renderObject._resolveAlignment(),s=this._renderObject._getAlignmentOffset(n),a=this.clipBehavior===o.none?"visible":"hidden",l={position:"relative",display:"inline-flex",width:this.fit===h.expand?"100%":"auto",height:this.fit===h.expand?"100%":"auto",overflow:a,alignItems:s.y,justifyContent:s.x},c=this.children.map((m,p)=>{const u=p===this.index,f=m.createElement(e.element,e.element.runtime);f.mount(e.element);const w=f.performRebuild(),I={position:"absolute",display:u?"block":"none",opacity:u?1:0,pointerEvents:u?"auto":"none"};return new r({tag:"div",props:{style:I,"data-indexed-stack-index":p,"data-visible":u,"data-role":"indexed-child"},children:[w]})});return new r({tag:"div",props:{style:l,"data-element-id":i,"data-widget-path":t,"data-widget":"RawIndexedStack","data-alignment":this.alignment,"data-fit":this.fit,"data-clip-behavior":this.clipBehavior,"data-text-direction":this._getEffectiveTextDirection(e),"data-current-index":this.index,"data-child-count":this.children.length,ref:m=>this._onContainerMount(m)},children:c,key:this.key})}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"index",value:this.index})}createElement(e,i){return new _(this,e,i)}}class j extends C{constructor({key:e=null,alignment:i=g.topStart,textDirection:t=null,clipBehavior:n=o.hardEdge,sizing:s=h.loose,index:a=0,children:l=[]}={}){super(e),this.alignment=i,this.textDirection=t,this.clipBehavior=n,this.sizing=s,this.index=a,this.children=l||[]}build(e){const i=this.children.map((t,n)=>new x({visible:n===this.index,maintainState:!0,maintainAnimation:!0,maintainSize:!0,maintainInteractivity:!0,child:t}));return new y({alignment:this.alignment,textDirection:this.textDirection,clipBehavior:this.clipBehavior,sizing:this.sizing,index:this.index,children:i,key:this.key})}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"alignment",value:this.alignment}),e.push({name:"clipBehavior",value:this.clipBehavior}),e.push({name:"sizing",value:this.sizing}),e.push({name:"index",value:this.index}),e.push({name:"childCount",value:this.children.length})}}export{j as IndexedStack,y as RawIndexedStack,_ as RawIndexedStackElement,b as RenderIndexedStack,x as Visibility,v as VisibilityElement};
-//# sourceMappingURL=indexed_stack.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/indexed_stack.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/indexed_stack.js.map
deleted file mode 100644
index 0bfeb651..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/indexed_stack.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/indexed_stack.js"],
-  "sourcesContent": ["import { Widget, StatelessWidget,  } from '../../core/widget_element.js';\r\nimport {Element} from \"@flutterjs/runtime\"\r\nimport { Stack, StackElement, RenderStack, AlignmentDirectional, StackFit } from './stack.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { Clip, TextDirection } from '../../utils/utils.js';\r\n\r\n// ============================================================================\r\n// VISIBILITY WIDGET\r\n// Controls visibility and interactivity of child widget\r\n// ============================================================================\r\n\r\nclass Visibility extends Widget {\r\n  constructor({\r\n    key = null,\r\n    visible = true,\r\n    maintainState = false,\r\n    maintainAnimation = false,\r\n    maintainSize = false,\r\n    maintainInteractivity = false,\r\n    replacement = null,\r\n    child = null\r\n  } = {}) {\r\n    super(key);\r\n\r\n    this.visible = visible;\r\n    this.maintainState = maintainState;\r\n    this.maintainAnimation = maintainAnimation;\r\n    this.maintainSize = maintainSize;\r\n    this.maintainInteractivity = maintainInteractivity;\r\n    this.replacement = replacement;\r\n    this.child = child;\r\n  }\r\n\r\n  build(context) {\r\n    if (!this.visible) {\r\n      if (this.replacement) {\r\n        return this.replacement;\r\n      }\r\n\r\n      // Return invisible widget based on maintain flags\r\n      if (this.maintainSize) {\r\n        return new VNode({\r\n          tag: 'div',\r\n          props: {\r\n            style: {\r\n              visibility: 'hidden',\r\n              pointerEvents: this.maintainInteractivity ? 'auto' : 'none'\r\n            }\r\n          },\r\n          children: [this.child]\r\n        });\r\n      }\r\n\r\n      if (this.maintainState || this.maintainAnimation) {\r\n        return new VNode({\r\n          tag: 'div',\r\n          props: {\r\n            style: {\r\n              display: 'none',\r\n              pointerEvents: this.maintainInteractivity ? 'auto' : 'none'\r\n            }\r\n          },\r\n          children: [this.child]\r\n        });\r\n      }\r\n\r\n      return new VNode({ tag: 'div', children: [] });\r\n    }\r\n\r\n    // Visible - return child directly\r\n    return this.child;\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({ name: 'visible', value: this.visible });\r\n    properties.push({ name: 'maintainState', value: this.maintainState });\r\n    properties.push({ name: 'maintainAnimation', value: this.maintainAnimation });\r\n    properties.push({ name: 'maintainSize', value: this.maintainSize });\r\n    properties.push({ name: 'maintainInteractivity', value: this.maintainInteractivity });\r\n  }\r\n\r\n  createElement(parent, runtime) {\r\n    return new VisibilityElement(this,parent, runtime);\r\n  }\r\n}\r\n\r\nclass VisibilityElement extends Element {\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER INDEXED STACK\r\n// Render object for IndexedStack - only lays out indexed child\r\n// ============================================================================\r\n\r\nclass RenderIndexedStack extends RenderStack {\r\n  constructor({\r\n    index = 0,\r\n    alignment = AlignmentDirectional.topStart,\r\n    textDirection = TextDirection.ltr,\r\n    fit = StackFit.loose,\r\n    clipBehavior = Clip.hardEdge\r\n  } = {}) {\r\n    super({\r\n      alignment,\r\n      textDirection,\r\n      fit,\r\n      clipBehavior\r\n    });\r\n\r\n    this.index = index;\r\n  }\r\n\r\n  /**\r\n   * Get the indexed child element\r\n   */\r\n  getIndexedChild() {\r\n    if (this.index === null || this.index === undefined) {\r\n      return null;\r\n    }\r\n\r\n    if (this.index < 0 || this.index >= this._children.length) {\r\n      return null;\r\n    }\r\n\r\n    return this._children[this.index];\r\n  }\r\n\r\n  /**\r\n   * Check if child at index is visible\r\n   */\r\n  isChildVisible(index) {\r\n    return index === this.index;\r\n  }\r\n\r\n  debugInfo() {\r\n    const baseInfo = super.debugInfo();\r\n    return {\r\n      ...baseInfo,\r\n      type: 'RenderIndexedStack',\r\n      index: this.index,\r\n      childCount: this._children.length,\r\n      visibleChildIndex: this.getIndexedChild() ? this.index : null\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// RAW INDEXED STACK ELEMENT\r\n// Element for managing _RawIndexedStack lifecycle\r\n// ============================================================================\r\n\r\nclass RawIndexedStackElement extends StackElement {\r\n  constructor(widget) {\r\n    super(widget);\r\n    this._onstageChild = null;\r\n  }\r\n\r\n  /**\r\n   * Get the widget\r\n   */\r\n  get widget() {\r\n    return super.widget;\r\n  }\r\n\r\n  /**\r\n   * Mount element\r\n   */\r\n  mount(parent = null) {\r\n    super.mount(parent);\r\n    this._updateOnstageChild();\r\n  }\r\n\r\n  /**\r\n   * Update widget\r\n   */\r\n  updateWidget(newWidget) {\r\n    const oldIndex = this.widget.index;\r\n    super.updateWidget(newWidget);\r\n\r\n    if (oldIndex !== newWidget.index) {\r\n      this._updateOnstageChild();\r\n      this.markNeedsBuild();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Update onstage child reference\r\n   * @private\r\n   */\r\n  _updateOnstageChild() {\r\n    const index = this.widget.index;\r\n\r\n    if (index === null || index === undefined) {\r\n      this._onstageChild = null;\r\n      return;\r\n    }\r\n\r\n    if (this._children && index >= 0 && index < this._children.length) {\r\n      this._onstageChild = this._children[index];\r\n    } else {\r\n      this._onstageChild = null;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Debug visit onstage children\r\n   * Only visits the visible child at the index\r\n   */\r\n  debugVisitOnstageChildren(visitor) {\r\n    if (this._onstageChild) {\r\n      visitor(this._onstageChild);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Visit children - for IndexedStack, still visit all for state maintenance\r\n   */\r\n  visitChildren(visitor) {\r\n    if (this._children) {\r\n      for (const child of this._children) {\r\n        visitor(child);\r\n      }\r\n    }\r\n  }\r\n\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// RAW INDEXED STACK WIDGET\r\n// Internal Stack subclass for IndexedStack implementation\r\n// ============================================================================\r\n\r\nclass RawIndexedStack extends Stack {\r\n  constructor({\r\n    key = null,\r\n    alignment = AlignmentDirectional.topStart,\r\n    textDirection = null,\r\n    clipBehavior = Clip.hardEdge,\r\n    sizing = StackFit.loose,\r\n    index = 0,\r\n    children = []\r\n  } = {}) {\r\n    super({\r\n      key,\r\n      alignment,\r\n      textDirection,\r\n      clipBehavior,\r\n      fit: sizing,\r\n      children\r\n    });\r\n\r\n    this._validateIndex(index, children.length);\r\n    this.index = index;\r\n  }\r\n\r\n  /**\r\n   * Validate index bounds\r\n   * @private\r\n   */\r\n  _validateIndex(index, childCount) {\r\n    if (index === null || index === undefined) {\r\n      return;\r\n    }\r\n\r\n    if (index < 0 || index >= childCount) {\r\n      console.warn(\r\n        `IndexedStack: index ${index} is out of bounds. ` +\r\n        `Valid range is 0 to ${childCount - 1}.`\r\n      );\r\n    }\r\n\r\n    if (!(Number.isInteger(index))) {\r\n      throw new Error(`IndexedStack: index must be an integer, got ${typeof index}`);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Debug check for directionality\r\n   */\r\n  _debugCheckHasDirectionality(context) {\r\n    return super._debugCheckHasDirectionality(context);\r\n  }\r\n\r\n  /**\r\n   * Create render object\r\n   */\r\n  createRenderObject(context) {\r\n    return new RenderIndexedStack({\r\n      index: this.index,\r\n      alignment: this.alignment,\r\n      textDirection: this._getEffectiveTextDirection(context),\r\n      fit: this.fit,\r\n      clipBehavior: this.clipBehavior\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Update render object\r\n   */\r\n  updateRenderObject(context, renderObject) {\r\n    super.updateRenderObject(context, renderObject);\r\n    renderObject.index = this.index;\r\n  }\r\n\r\n  /**\r\n   * Build widget tree - only visible child is rendered\r\n   */\r\n  build(context) {\r\n    this._debugCheckHasDirectionality(context);\r\n\r\n    if (!this._renderObject) {\r\n      this._renderObject = this.createRenderObject(context);\r\n    } else {\r\n      this.updateRenderObject(context, this._renderObject);\r\n    }\r\n\r\n    const elementId = context.element.getElementId();\r\n    const widgetPath = context.element.getWidgetPath();\r\n    const resolvedAlignment = this._renderObject._resolveAlignment();\r\n    const alignOffset = this._renderObject._getAlignmentOffset(resolvedAlignment);\r\n\r\n    const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';\r\n\r\n    const style = {\r\n      position: 'relative',\r\n      display: 'inline-flex',\r\n      width: this.fit === StackFit.expand ? '100%' : 'auto',\r\n      height: this.fit === StackFit.expand ? '100%' : 'auto',\r\n      overflow: overflowValue,\r\n      alignItems: alignOffset.y,\r\n      justifyContent: alignOffset.x\r\n    };\r\n\r\n    // Build child VNodes - only render indexed child\r\n    const childVNodes = this.children.map((childWidget, index) => {\r\n      const isVisible = index === this.index;\r\n\r\n      const childElement = childWidget.createElement(context.element, context.element.runtime);\r\n      childElement.mount(context.element);\r\n      const childVNode = childElement.performRebuild();\r\n\r\n      const childStyle = {\r\n        position: 'absolute',\r\n        display: isVisible ? 'block' : 'none',\r\n        opacity: isVisible ? 1 : 0,\r\n        pointerEvents: isVisible ? 'auto' : 'none'\r\n      };\r\n\r\n      return new VNode({\r\n        tag: 'div',\r\n        props: {\r\n          style: childStyle,\r\n          'data-indexed-stack-index': index,\r\n          'data-visible': isVisible,\r\n          'data-role': 'indexed-child'\r\n        },\r\n        children: [childVNode]\r\n      });\r\n    });\r\n\r\n    return new VNode({\r\n      tag: 'div',\r\n      props: {\r\n        style,\r\n        'data-element-id': elementId,\r\n        'data-widget-path': widgetPath,\r\n        'data-widget': 'RawIndexedStack',\r\n        'data-alignment': this.alignment,\r\n        'data-fit': this.fit,\r\n        'data-clip-behavior': this.clipBehavior,\r\n        'data-text-direction': this._getEffectiveTextDirection(context),\r\n        'data-current-index': this.index,\r\n        'data-child-count': this.children.length,\r\n        ref: (el) => this._onContainerMount(el)\r\n      },\r\n      children: childVNodes,\r\n      key: this.key\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Debug properties\r\n   */\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({ name: 'index', value: this.index });\r\n  }\r\n\r\n  /**\r\n   * Create element\r\n   */\r\n  createElement(parent, runtime) {\r\n    return new RawIndexedStackElement(this,parent, runtime);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// INDEXED STACK WIDGET\r\n// Public API - wraps children in Visibility widgets\r\n// ============================================================================\r\n\r\nclass IndexedStack extends StatelessWidget {\r\n  constructor({\r\n    key = null,\r\n    alignment = AlignmentDirectional.topStart,\r\n    textDirection = null,\r\n    clipBehavior = Clip.hardEdge,\r\n    sizing = StackFit.loose,\r\n    index = 0,\r\n    children = []\r\n  } = {}) {\r\n    super(key);\r\n\r\n    this.alignment = alignment;\r\n    this.textDirection = textDirection;\r\n    this.clipBehavior = clipBehavior;\r\n    this.sizing = sizing;\r\n    this.index = index;\r\n    this.children = children || [];\r\n  }\r\n\r\n  /**\r\n   * Build the widget tree\r\n   * Wraps all children in Visibility widgets with only indexed child visible\r\n   */\r\n  build(context) {\r\n    // Wrap children in Visibility to maintain state/animation\r\n    const wrappedChildren = this.children.map((child, i) => {\r\n      return new Visibility({\r\n        visible: i === this.index,\r\n        maintainState: true,\r\n        maintainAnimation: true,\r\n        maintainSize: true,\r\n        maintainInteractivity: true,\r\n        child\r\n      });\r\n    });\r\n\r\n    // Return _RawIndexedStack with wrapped children\r\n    return new RawIndexedStack({\r\n      alignment: this.alignment,\r\n      textDirection: this.textDirection,\r\n      clipBehavior: this.clipBehavior,\r\n      sizing: this.sizing,\r\n      index: this.index,\r\n      children: wrappedChildren,\r\n      key: this.key\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Debug properties\r\n   */\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({ name: 'alignment', value: this.alignment });\r\n    properties.push({ name: 'clipBehavior', value: this.clipBehavior });\r\n    properties.push({ name: 'sizing', value: this.sizing });\r\n    properties.push({ name: 'index', value: this.index });\r\n    properties.push({ name: 'childCount', value: this.children.length });\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport {\r\n  IndexedStack,\r\n  RawIndexedStack,\r\n  RawIndexedStackElement,\r\n  RenderIndexedStack,\r\n  Visibility,\r\n  VisibilityElement\r\n};"],
-  "mappings": "AAAA,OAAS,UAAAA,EAAQ,mBAAAC,MAAyB,+BAC1C,OAAQ,WAAAC,MAAc,qBACtB,OAAS,SAAAC,EAAO,gBAAAC,EAAc,eAAAC,EAAa,wBAAAC,EAAsB,YAAAC,MAAgB,aACjF,OAAS,SAAAC,MAAa,wBACtB,OAAS,QAAAC,EAAM,iBAAAC,MAAqB,uBAOpC,MAAMC,UAAmBX,CAAO,CAC9B,YAAY,CACV,IAAAY,EAAM,KACN,QAAAC,EAAU,GACV,cAAAC,EAAgB,GAChB,kBAAAC,EAAoB,GACpB,aAAAC,EAAe,GACf,sBAAAC,EAAwB,GACxB,YAAAC,EAAc,KACd,MAAAC,EAAQ,IACV,EAAI,CAAC,EAAG,CACN,MAAMP,CAAG,EAET,KAAK,QAAUC,EACf,KAAK,cAAgBC,EACrB,KAAK,kBAAoBC,EACzB,KAAK,aAAeC,EACpB,KAAK,sBAAwBC,EAC7B,KAAK,YAAcC,EACnB,KAAK,MAAQC,CACf,CAEA,MAAMC,EAAS,CACb,OAAK,KAAK,QAoCH,KAAK,MAnCN,KAAK,YACA,KAAK,YAIV,KAAK,aACA,IAAIZ,EAAM,CACf,IAAK,MACL,MAAO,CACL,MAAO,CACL,WAAY,SACZ,cAAe,KAAK,sBAAwB,OAAS,MACvD,CACF,EACA,SAAU,CAAC,KAAK,KAAK,CACvB,CAAC,EAGC,KAAK,eAAiB,KAAK,kBACtB,IAAIA,EAAM,CACf,IAAK,MACL,MAAO,CACL,MAAO,CACL,QAAS,OACT,cAAe,KAAK,sBAAwB,OAAS,MACvD,CACF,EACA,SAAU,CAAC,KAAK,KAAK,CACvB,CAAC,EAGI,IAAIA,EAAM,CAAE,IAAK,MAAO,SAAU,CAAC,CAAE,CAAC,CAKjD,CAEA,oBAAoBa,EAAY,CAC9B,MAAM,oBAAoBA,CAAU,EACpCA,EAAW,KAAK,CAAE,KAAM,UAAW,MAAO,KAAK,OAAQ,CAAC,EACxDA,EAAW,KAAK,CAAE,KAAM,gBAAiB,MAAO,KAAK,aAAc,CAAC,EACpEA,EAAW,KAAK,CAAE,KAAM,oBAAqB,MAAO,KAAK,iBAAkB,CAAC,EAC5EA,EAAW,KAAK,CAAE,KAAM,eAAgB,MAAO,KAAK,YAAa,CAAC,EAClEA,EAAW,KAAK,CAAE,KAAM,wBAAyB,MAAO,KAAK,qBAAsB,CAAC,CACtF,CAEA,cAAcC,EAAQC,EAAS,CAC7B,OAAO,IAAIC,EAAkB,KAAKF,EAAQC,CAAO,CACnD,CACF,CAEA,MAAMC,UAA0BtB,CAAQ,CACtC,gBAAiB,CACf,OAAO,KAAK,OAAO,MAAM,KAAK,OAAO,CACvC,CACF,CAOA,MAAMuB,UAA2BpB,CAAY,CAC3C,YAAY,CACV,MAAAqB,EAAQ,EACR,UAAAC,EAAYrB,EAAqB,SACjC,cAAAsB,EAAgBlB,EAAc,IAC9B,IAAAmB,EAAMtB,EAAS,MACf,aAAAuB,EAAerB,EAAK,QACtB,EAAI,CAAC,EAAG,CACN,MAAM,CACJ,UAAAkB,EACA,cAAAC,EACA,IAAAC,EACA,aAAAC,CACF,CAAC,EAED,KAAK,MAAQJ,CACf,CAKA,iBAAkB,CAKhB,OAJI,KAAK,QAAU,MAAQ,KAAK,QAAU,QAItC,KAAK,MAAQ,GAAK,KAAK,OAAS,KAAK,UAAU,OAC1C,KAGF,KAAK,UAAU,KAAK,KAAK,CAClC,CAKA,eAAeA,EAAO,CACpB,OAAOA,IAAU,KAAK,KACxB,CAEA,WAAY,CAEV,MAAO,CACL,GAFe,MAAM,UAAU,EAG/B,KAAM,qBACN,MAAO,KAAK,MACZ,WAAY,KAAK,UAAU,OAC3B,kBAAmB,KAAK,gBAAgB,EAAI,KAAK,MAAQ,IAC3D,CACF,CACF,CAOA,MAAMK,UAA+B3B,CAAa,CAChD,YAAY4B,EAAQ,CAClB,MAAMA,CAAM,EACZ,KAAK,cAAgB,IACvB,CAKA,IAAI,QAAS,CACX,OAAO,MAAM,MACf,CAKA,MAAMV,EAAS,KAAM,CACnB,MAAM,MAAMA,CAAM,EAClB,KAAK,oBAAoB,CAC3B,CAKA,aAAaW,EAAW,CACtB,MAAMC,EAAW,KAAK,OAAO,MAC7B,MAAM,aAAaD,CAAS,EAExBC,IAAaD,EAAU,QACzB,KAAK,oBAAoB,EACzB,KAAK,eAAe,EAExB,CAMA,qBAAsB,CACpB,MAAMP,EAAQ,KAAK,OAAO,MAE1B,GAAIA,GAAU,KAA6B,CACzC,KAAK,cAAgB,KACrB,MACF,CAEI,KAAK,WAAaA,GAAS,GAAKA,EAAQ,KAAK,UAAU,OACzD,KAAK,cAAgB,KAAK,UAAUA,CAAK,EAEzC,KAAK,cAAgB,IAEzB,CAMA,0BAA0BS,EAAS,CAC7B,KAAK,eACPA,EAAQ,KAAK,aAAa,CAE9B,CAKA,cAAcA,EAAS,CACrB,GAAI,KAAK,UACP,UAAWhB,KAAS,KAAK,UACvBgB,EAAQhB,CAAK,CAGnB,CAEA,gBAAiB,CACf,OAAO,KAAK,OAAO,MAAM,KAAK,OAAO,CACvC,CACF,CAOA,MAAMiB,UAAwBjC,CAAM,CAClC,YAAY,CACV,IAAAS,EAAM,KACN,UAAAe,EAAYrB,EAAqB,SACjC,cAAAsB,EAAgB,KAChB,aAAAE,EAAerB,EAAK,SACpB,OAAA4B,EAAS9B,EAAS,MAClB,MAAAmB,EAAQ,EACR,SAAAY,EAAW,CAAC,CACd,EAAI,CAAC,EAAG,CACN,MAAM,CACJ,IAAA1B,EACA,UAAAe,EACA,cAAAC,EACA,aAAAE,EACA,IAAKO,EACL,SAAAC,CACF,CAAC,EAED,KAAK,eAAeZ,EAAOY,EAAS,MAAM,EAC1C,KAAK,MAAQZ,CACf,CAMA,eAAeA,EAAOa,EAAY,CAChC,GAAIb,GAAU,QAIVA,EAAQ,GAAKA,GAASa,IACxB,QAAQ,KACN,uBAAuBb,CAAK,0CACLa,EAAa,CAAC,GACvC,EAGE,CAAE,OAAO,UAAUb,CAAK,GAC1B,MAAM,IAAI,MAAM,+CAA+C,OAAOA,CAAK,EAAE,CAEjF,CAKA,6BAA6BN,EAAS,CACpC,OAAO,MAAM,6BAA6BA,CAAO,CACnD,CAKA,mBAAmBA,EAAS,CAC1B,OAAO,IAAIK,EAAmB,CAC5B,MAAO,KAAK,MACZ,UAAW,KAAK,UAChB,cAAe,KAAK,2BAA2BL,CAAO,EACtD,IAAK,KAAK,IACV,aAAc,KAAK,YACrB,CAAC,CACH,CAKA,mBAAmBA,EAASoB,EAAc,CACxC,MAAM,mBAAmBpB,EAASoB,CAAY,EAC9CA,EAAa,MAAQ,KAAK,KAC5B,CAKA,MAAMpB,EAAS,CACb,KAAK,6BAA6BA,CAAO,EAEpC,KAAK,cAGR,KAAK,mBAAmBA,EAAS,KAAK,aAAa,EAFnD,KAAK,cAAgB,KAAK,mBAAmBA,CAAO,EAKtD,MAAMqB,EAAYrB,EAAQ,QAAQ,aAAa,EACzCsB,EAAatB,EAAQ,QAAQ,cAAc,EAC3CuB,EAAoB,KAAK,cAAc,kBAAkB,EACzDC,EAAc,KAAK,cAAc,oBAAoBD,CAAiB,EAEtEE,EAAgB,KAAK,eAAiBpC,EAAK,KAAO,UAAY,SAE9DqC,EAAQ,CACZ,SAAU,WACV,QAAS,cACT,MAAO,KAAK,MAAQvC,EAAS,OAAS,OAAS,OAC/C,OAAQ,KAAK,MAAQA,EAAS,OAAS,OAAS,OAChD,SAAUsC,EACV,WAAYD,EAAY,EACxB,eAAgBA,EAAY,CAC9B,EAGMG,EAAc,KAAK,SAAS,IAAI,CAACC,EAAatB,IAAU,CAC5D,MAAMuB,EAAYvB,IAAU,KAAK,MAE3BwB,EAAeF,EAAY,cAAc5B,EAAQ,QAASA,EAAQ,QAAQ,OAAO,EACvF8B,EAAa,MAAM9B,EAAQ,OAAO,EAClC,MAAM+B,EAAaD,EAAa,eAAe,EAEzCE,EAAa,CACjB,SAAU,WACV,QAASH,EAAY,QAAU,OAC/B,QAASA,EAAY,EAAI,EACzB,cAAeA,EAAY,OAAS,MACtC,EAEA,OAAO,IAAIzC,EAAM,CACf,IAAK,MACL,MAAO,CACL,MAAO4C,EACP,2BAA4B1B,EAC5B,eAAgBuB,EAChB,YAAa,eACf,EACA,SAAU,CAACE,CAAU,CACvB,CAAC,CACH,CAAC,EAED,OAAO,IAAI3C,EAAM,CACf,IAAK,MACL,MAAO,CACL,MAAAsC,EACA,kBAAmBL,EACnB,mBAAoBC,EACpB,cAAe,kBACf,iBAAkB,KAAK,UACvB,WAAY,KAAK,IACjB,qBAAsB,KAAK,aAC3B,sBAAuB,KAAK,2BAA2BtB,CAAO,EAC9D,qBAAsB,KAAK,MAC3B,mBAAoB,KAAK,SAAS,OAClC,IAAMiC,GAAO,KAAK,kBAAkBA,CAAE,CACxC,EACA,SAAUN,EACV,IAAK,KAAK,GACZ,CAAC,CACH,CAKA,oBAAoB1B,EAAY,CAC9B,MAAM,oBAAoBA,CAAU,EACpCA,EAAW,KAAK,CAAE,KAAM,QAAS,MAAO,KAAK,KAAM,CAAC,CACtD,CAKA,cAAcC,EAAQC,EAAS,CAC7B,OAAO,IAAIQ,EAAuB,KAAKT,EAAQC,CAAO,CACxD,CACF,CAOA,MAAM+B,UAAqBrD,CAAgB,CACzC,YAAY,CACV,IAAAW,EAAM,KACN,UAAAe,EAAYrB,EAAqB,SACjC,cAAAsB,EAAgB,KAChB,aAAAE,EAAerB,EAAK,SACpB,OAAA4B,EAAS9B,EAAS,MAClB,MAAAmB,EAAQ,EACR,SAAAY,EAAW,CAAC,CACd,EAAI,CAAC,EAAG,CACN,MAAM1B,CAAG,EAET,KAAK,UAAYe,EACjB,KAAK,cAAgBC,EACrB,KAAK,aAAeE,EACpB,KAAK,OAASO,EACd,KAAK,MAAQX,EACb,KAAK,SAAWY,GAAY,CAAC,CAC/B,CAMA,MAAMlB,EAAS,CAEb,MAAMmC,EAAkB,KAAK,SAAS,IAAI,CAACpC,EAAOqC,IACzC,IAAI7C,EAAW,CACpB,QAAS6C,IAAM,KAAK,MACpB,cAAe,GACf,kBAAmB,GACnB,aAAc,GACd,sBAAuB,GACvB,MAAArC,CACF,CAAC,CACF,EAGD,OAAO,IAAIiB,EAAgB,CACzB,UAAW,KAAK,UAChB,cAAe,KAAK,cACpB,aAAc,KAAK,aACnB,OAAQ,KAAK,OACb,MAAO,KAAK,MACZ,SAAUmB,EACV,IAAK,KAAK,GACZ,CAAC,CACH,CAKA,oBAAoBlC,EAAY,CAC9B,MAAM,oBAAoBA,CAAU,EACpCA,EAAW,KAAK,CAAE,KAAM,YAAa,MAAO,KAAK,SAAU,CAAC,EAC5DA,EAAW,KAAK,CAAE,KAAM,eAAgB,MAAO,KAAK,YAAa,CAAC,EAClEA,EAAW,KAAK,CAAE,KAAM,SAAU,MAAO,KAAK,MAAO,CAAC,EACtDA,EAAW,KAAK,CAAE,KAAM,QAAS,MAAO,KAAK,KAAM,CAAC,EACpDA,EAAW,KAAK,CAAE,KAAM,aAAc,MAAO,KAAK,SAAS,MAAO,CAAC,CACrE,CACF",
-  "names": ["Widget", "StatelessWidget", "Element", "Stack", "StackElement", "RenderStack", "AlignmentDirectional", "StackFit", "VNode", "Clip", "TextDirection", "Visibility", "key", "visible", "maintainState", "maintainAnimation", "maintainSize", "maintainInteractivity", "replacement", "child", "context", "properties", "parent", "runtime", "VisibilityElement", "RenderIndexedStack", "index", "alignment", "textDirection", "fit", "clipBehavior", "RawIndexedStackElement", "widget", "newWidget", "oldIndex", "visitor", "RawIndexedStack", "sizing", "children", "childCount", "renderObject", "elementId", "widgetPath", "resolvedAlignment", "alignOffset", "overflowValue", "style", "childVNodes", "childWidget", "isVisible", "childElement", "childVNode", "childStyle", "el", "IndexedStack", "wrappedChildren", "i"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/list_body.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/list_body.js
deleted file mode 100644
index 6d848167..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/list_body.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{Element as g}from"@flutterjs/runtime";import{Widget as p}from"../../core/widget_element.js";import{VNode as c}from"@flutterjs/vdom/vnode";const s={horizontal:"horizontal",vertical:"vertical"},t={up:"up",right:"right",down:"down",left:"left"};function a(o,e,i){const r=o?.isRTL||!1;return e===s.horizontal?i?r?t.right:t.left:r?t.left:t.right:i?t.up:t.down}class u{constructor({axisDirection:e=t.down}={}){this.axisDirection=e,this._children=[],this._containerElement=null,this._resizeObserver=null}addChild(e){this._children.push(e)}removeChild(e){const i=this._children.indexOf(e);i>-1&&this._children.splice(i,1)}get mainAxis(){return[t.left,t.right].includes(this.axisDirection)?s.horizontal:s.vertical}get isReverse(){return[t.up,t.left].includes(this.axisDirection)}debugInfo(){return{type:"RenderListBody",axisDirection:this.axisDirection,mainAxis:this.mainAxis,isReverse:this.isReverse,childCount:this._children.length}}}class m extends g{constructor(e,i=null,r=null){super(e,i,r),this._renderObject=null}mount(e=null){super.mount(e),this._renderObject=this.widget.createRenderObject(this.context)}updateWidget(e){const i=this.widget;super.updateWidget(e),(i.mainAxis!==e.mainAxis||i.reverse!==e.reverse)&&(this.widget.updateRenderObject(this.context,this._renderObject),this.markNeedsBuild())}performRebuild(){return this.widget.build(this.context)}visitChildren(e){if(this._children)for(const i of this._children)e(i)}}class b extends p{constructor({key:e=null,mainAxis:i=s.vertical,reverse:r=!1,children:n=[]}={}){if(super(e),!Object.values(s).includes(i))throw new Error(`Invalid mainAxis: ${i}`);this.mainAxis=i,this.reverse=r,this.children=n||[],this._renderObject=null,this._containerElement=null,this._childElements=[],this._resizeObserver=null}_getDirection(e){return a(e,this.mainAxis,this.reverse)}createRenderObject(e){return new u({axisDirection:this._getDirection(e)})}updateRenderObject(e,i){i.axisDirection=this._getDirection(e)}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);const i=e.element.getElementId(),r=e.element.getWidgetPath(),n=this.mainAxis===s.horizontal,h=this.reverse,v={display:"flex",flexDirection:n?h?"row-reverse":"row":h?"column-reverse":"column",width:n?"auto":"100%",height:"auto",alignItems:"stretch",justifyContent:"flex-start"},_=this.children.map(l=>{const d=l.createElement(e.element,e.element.runtime);d.mount(e.element);const f=d.performRebuild();return new c({tag:"div",props:{style:{flexShrink:0,width:n?"auto":"100%"}},children:[f]})});return new c({tag:"div",props:{style:v,"data-element-id":i,"data-widget-path":r,"data-widget":"ListBody","data-main-axis":this.mainAxis,"data-reverse":this.reverse,"data-axis-direction":this._getDirection(e),ref:l=>this._onContainerMount(l,e)},children:_,key:this.key})}_onContainerMount(e,i){if(!e)return;this._containerElement=e,window.ResizeObserver&&(this._resizeObserver=new ResizeObserver(()=>{this._onResize()}),this._resizeObserver.observe(e));const r=()=>this._onResize();window.addEventListener("resize",r),e._cleanupResize=()=>{window.removeEventListener("resize",r),this._resizeObserver&&this._resizeObserver.disconnect()}}_onResize(){if(this._containerElement)try{const e=this._containerElement.getBoundingClientRect()}catch(e){console.error("Error during ListBody resize:",e)}}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"mainAxis",value:this.mainAxis}),e.push({name:"reverse",value:this.reverse}),e.push({name:"childCount",value:this.children.length})}createElement(e,i){return new m(this,e,i)}}export{s as Axis,t as AxisDirection,b as ListBody,m as ListBodyElement,u as RenderListBody,a as getAxisDirectionFromAxisReverseAndDirectionality};
-//# sourceMappingURL=list_body.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/list_body.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/list_body.js.map
deleted file mode 100644
index d5b90e6f..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/list_body.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/list_body.js"],
-  "sourcesContent": ["import { Element } from \"@flutterjs/runtime\"\r\nimport { Widget, } from '../../core/widget_element.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\n\r\n// ============================================================================\r\n// AXIS ENUM\r\n// ============================================================================\r\n\r\nconst Axis = {\r\n  horizontal: 'horizontal',\r\n  vertical: 'vertical'\r\n};\r\n\r\n// ============================================================================\r\n// AXIS DIRECTION ENUM\r\n// ============================================================================\r\n\r\nconst AxisDirection = {\r\n  up: 'up',\r\n  right: 'right',\r\n  down: 'down',\r\n  left: 'left'\r\n};\r\n\r\n// ============================================================================\r\n// HELPER FUNCTION - Get axis direction from axis, reverse, and directionality\r\n// ============================================================================\r\n\r\nfunction getAxisDirectionFromAxisReverseAndDirectionality(\r\n  context,\r\n  axis,\r\n  reverse\r\n) {\r\n  // Get text direction from context (default LTR)\r\n  const isRTL = context?.isRTL || false;\r\n\r\n  if (axis === Axis.horizontal) {\r\n    if (reverse) {\r\n      return isRTL ? AxisDirection.right : AxisDirection.left;\r\n    } else {\r\n      return isRTL ? AxisDirection.left : AxisDirection.right;\r\n    }\r\n  } else {\r\n    // Axis.vertical\r\n    return reverse ? AxisDirection.up : AxisDirection.down;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER LIST BODY\r\n// Handles the actual layout and rendering logic\r\n// ============================================================================\r\n\r\nclass RenderListBody {\r\n  constructor({ axisDirection = AxisDirection.down } = {}) {\r\n    this.axisDirection = axisDirection;\r\n    this._children = [];\r\n    this._containerElement = null;\r\n    this._resizeObserver = null;\r\n  }\r\n\r\n  /**\r\n   * Add child render object\r\n   */\r\n  addChild(child) {\r\n    this._children.push(child);\r\n  }\r\n\r\n  /**\r\n   * Remove child render object\r\n   */\r\n  removeChild(child) {\r\n    const index = this._children.indexOf(child);\r\n    if (index > -1) {\r\n      this._children.splice(index, 1);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get main axis (horizontal or vertical)\r\n   */\r\n  get mainAxis() {\r\n    return [AxisDirection.left, AxisDirection.right].includes(this.axisDirection)\r\n      ? Axis.horizontal\r\n      : Axis.vertical;\r\n  }\r\n\r\n  /**\r\n   * Check if direction is reversed\r\n   */\r\n  get isReverse() {\r\n    return [AxisDirection.up, AxisDirection.left].includes(this.axisDirection);\r\n  }\r\n\r\n  /**\r\n   * Debug info\r\n   */\r\n  debugInfo() {\r\n    return {\r\n      type: 'RenderListBody',\r\n      axisDirection: this.axisDirection,\r\n      mainAxis: this.mainAxis,\r\n      isReverse: this.isReverse,\r\n      childCount: this._children.length\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// LIST BODY ELEMENT\r\n// Element for managing ListBody lifecycle\r\n// ============================================================================\r\n\r\nclass ListBodyElement extends Element {\r\n  constructor(widget, parent = null, runtime = null) {\r\n    super(widget, parent, runtime);\r\n    this._renderObject = null;\r\n  }\r\n\r\n  /**\r\n   * Mount element\r\n   */\r\n  mount(parent = null) {\r\n    super.mount(parent);\r\n\r\n    // Create render object\r\n    this._renderObject = this.widget.createRenderObject(this.context);\r\n  }\r\n\r\n  /**\r\n   * Update render object on widget change\r\n   */\r\n  updateWidget(newWidget) {\r\n    const oldWidget = this.widget;\r\n    super.updateWidget(newWidget);\r\n\r\n    if (oldWidget.mainAxis !== newWidget.mainAxis ||\r\n      oldWidget.reverse !== newWidget.reverse) {\r\n      this.widget.updateRenderObject(this.context, this._renderObject);\r\n      this.markNeedsBuild();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Perform rebuild\r\n   */\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n\r\n  /**\r\n   * Visit children\r\n   */\r\n  visitChildren(visitor) {\r\n    if (this._children) {\r\n      for (const child of this._children) {\r\n        visitor(child);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// LIST BODY WIDGET\r\n// Multi-child widget that arranges children in a list\r\n// ============================================================================\r\n\r\nclass ListBody extends Widget {\r\n  constructor({\r\n    key = null,\r\n    mainAxis = Axis.vertical,\r\n    reverse = false,\r\n    children = []\r\n  } = {}) {\r\n    super(key);\r\n\r\n    if (!Object.values(Axis).includes(mainAxis)) {\r\n      throw new Error(`Invalid mainAxis: ${mainAxis}`);\r\n    }\r\n\r\n    this.mainAxis = mainAxis;\r\n    this.reverse = reverse;\r\n    this.children = children || [];\r\n    this._renderObject = null;\r\n    this._containerElement = null;\r\n    this._childElements = [];\r\n    this._resizeObserver = null;\r\n  }\r\n\r\n  /**\r\n   * Get axis direction based on axis, reverse, and directionality\r\n   * @private\r\n   */\r\n  _getDirection(context) {\r\n    return getAxisDirectionFromAxisReverseAndDirectionality(\r\n      context,\r\n      this.mainAxis,\r\n      this.reverse\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Create render object\r\n   */\r\n  createRenderObject(context) {\r\n    return new RenderListBody({\r\n      axisDirection: this._getDirection(context)\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Update render object\r\n   */\r\n  updateRenderObject(context, renderObject) {\r\n    renderObject.axisDirection = this._getDirection(context);\r\n  }\r\n\r\n  /**\r\n   * Build the widget tree\r\n   */\r\n  build(context) {\r\n    if (!this._renderObject) {\r\n      this._renderObject = this.createRenderObject(context);\r\n    } else {\r\n      this.updateRenderObject(context, this._renderObject);\r\n    }\r\n\r\n    const elementId = context.element.getElementId();\r\n    const widgetPath = context.element.getWidgetPath();\r\n\r\n    // Determine layout direction\r\n    const isHorizontal = this.mainAxis === Axis.horizontal;\r\n    const isReverse = this.reverse;\r\n\r\n    // Build CSS styles\r\n    const style = {\r\n      display: 'flex',\r\n      flexDirection: isHorizontal\r\n        ? isReverse ? 'row-reverse' : 'row'\r\n        : isReverse ? 'column-reverse' : 'column',\r\n      width: isHorizontal ? 'auto' : '100%',\r\n      height: isHorizontal ? 'auto' : 'auto',\r\n      alignItems: 'stretch',\r\n      justifyContent: 'flex-start'\r\n    };\r\n\r\n    // Build child VNodes\r\n    const childVNodes = this.children.map((childWidget) => {\r\n      const childElement = childWidget.createElement(context.element, context.element.runtime);\r\n      childElement.mount(context.element);\r\n      const childVNode = childElement.performRebuild();\r\n\r\n      return new VNode({\r\n        tag: 'div',\r\n        props: {\r\n          style: {\r\n            flexShrink: 0,\r\n            width: isHorizontal ? 'auto' : '100%'\r\n          }\r\n        },\r\n        children: [childVNode]\r\n      });\r\n    });\r\n\r\n    return new VNode({\r\n      tag: 'div',\r\n      props: {\r\n        style,\r\n        'data-element-id': elementId,\r\n        'data-widget-path': widgetPath,\r\n        'data-widget': 'ListBody',\r\n        'data-main-axis': this.mainAxis,\r\n        'data-reverse': this.reverse,\r\n        'data-axis-direction': this._getDirection(context),\r\n        ref: (el) => this._onContainerMount(el, context)\r\n      },\r\n      children: childVNodes,\r\n      key: this.key\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Mount container element\r\n   * @private\r\n   */\r\n  _onContainerMount(el, context) {\r\n    if (!el) return;\r\n\r\n    this._containerElement = el;\r\n\r\n    // Set up resize observer for responsive layout\r\n    if (window.ResizeObserver) {\r\n      this._resizeObserver = new ResizeObserver(() => {\r\n        this._onResize();\r\n      });\r\n      this._resizeObserver.observe(el);\r\n    }\r\n\r\n    // Listen to window resize\r\n    const resizeHandler = () => this._onResize();\r\n    window.addEventListener('resize', resizeHandler);\r\n\r\n    el._cleanupResize = () => {\r\n      window.removeEventListener('resize', resizeHandler);\r\n      if (this._resizeObserver) {\r\n        this._resizeObserver.disconnect();\r\n      }\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Handle resize event\r\n   * @private\r\n   */\r\n  _onResize() {\r\n    if (!this._containerElement) return;\r\n\r\n    try {\r\n      // Perform any necessary layout adjustments\r\n      const rect = this._containerElement.getBoundingClientRect();\r\n\r\n      if (process.env.NODE_ENV === 'development') {\r\n        // Debug: log resize info\r\n      }\r\n    } catch (error) {\r\n      console.error('Error during ListBody resize:', error);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Debug properties\r\n   */\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({ name: 'mainAxis', value: this.mainAxis });\r\n    properties.push({ name: 'reverse', value: this.reverse });\r\n    properties.push({ name: 'childCount', value: this.children.length });\r\n  }\r\n\r\n  /**\r\n   * Create element\r\n   */\r\n  createElement(parent, runtime) {\r\n    return new ListBodyElement(this, parent, runtime);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport {\r\n  ListBody,\r\n  RenderListBody,\r\n  ListBodyElement,\r\n  Axis,\r\n  AxisDirection,\r\n  getAxisDirectionFromAxisReverseAndDirectionality\r\n};"],
-  "mappings": "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",
-  "names": ["Element", "Widget", "VNode", "Axis", "AxisDirection", "getAxisDirectionFromAxisReverseAndDirectionality", "context", "axis", "reverse", "isRTL", "RenderListBody", "axisDirection", "child", "index", "ListBodyElement", "widget", "parent", "runtime", "newWidget", "oldWidget", "visitor", "ListBody", "key", "mainAxis", "children", "renderObject", "elementId", "widgetPath", "isHorizontal", "isReverse", "style", "childVNodes", "childWidget", "childElement", "childVNode", "el", "resizeHandler", "rect", "error", "properties"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/mouse_region.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/mouse_region.js
deleted file mode 100644
index 90a93209..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/mouse_region.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{Widget as q}from"../../core/widget_element.js";import{Element as B}from"@flutterjs/runtime";import{VNode as C}from"@flutterjs/vdom/vnode";const c={defer:"default",clickable:"pointer",forbidden:"not-allowed",grab:"grab",grabbing:"grabbing",move:"move",precise:"crosshair",text:"text",verticalText:"vertical-text",cell:"cell",copy:"copy",alias:"alias",noDrop:"no-drop",wait:"wait",progress:"progress",contextMenu:"context-menu",help:"help",resize:"resize",resizeUp:"n-resize",resizeDown:"s-resize",resizeLeft:"w-resize",resizeRight:"e-resize",resizeUpLeft:"nw-resize",resizeUpRight:"ne-resize",resizeDownLeft:"sw-resize",resizeDownRight:"se-resize",resizeColumn:"col-resize",resizeRow:"row-resize",allScroll:"all-scroll",zoomIn:"zoom-in",zoomOut:"zoom-out"},u={deferToChild:"deferToChild",opaque:"opaque",translucent:"translucent"};class l{constructor({position:e={x:0,y:0},localPosition:t={x:0,y:0},timestamp:i=Date.now(),pressure:o=0,pressureMin:n=0,pressureMax:r=1,distance:s=0,distanceMax:a=0,size:f=0,radiusMajor:_=0,radiusMinor:g=0,radiusMin:x=0,radiusMax:b=0,orientation:z=0,tilt:w=0,platformData:T=0,kind:P="touch",device:R=0,signalKind:H="none"}={}){this.position=e,this.localPosition=t,this.timestamp=i,this.pressure=o,this.pressureMin=n,this.pressureMax=r,this.distance=s,this.distanceMax=a,this.size=f,this.radiusMajor=_,this.radiusMinor=g,this.radiusMin=x,this.radiusMax=b,this.orientation=z,this.tilt=w,this.platformData=T,this.kind=P,this.device=R,this.signalKind=H}}class d extends l{constructor(e={}){super(e)}}class p extends l{constructor(e={}){super(e)}}class m extends l{constructor(e={}){super(e)}}class v{constructor({onEnter:e=null,onHover:t=null,onExit:i=null,cursor:o=c.defer,opaque:n=!0,hitTestBehavior:r=u.deferToChild}={}){this.onEnter=e,this.onHover=t,this.onExit=i,this.cursor=o,this.opaque=n,this.hitTestBehavior=r,this._isMouseInside=!1,this._lastMousePosition=null}handleMouseEnter(e){this._isMouseInside=!0;const t=this._getMousePosition(e),i=new d({position:t,localPosition:t,timestamp:e.timeStamp||Date.now()});this.onEnter&&this.onEnter(i)}handleMouseMove(e){if(this._lastMousePosition=this._getMousePosition(e),this.onHover){const t=new p({position:this._lastMousePosition,localPosition:this._lastMousePosition,timestamp:e.timeStamp||Date.now()});this.onHover(t)}}handleMouseExit(e){this._isMouseInside=!1;const t=this._getMousePosition(e),i=new m({position:t,localPosition:t,timestamp:e.timeStamp||Date.now()});this.onExit&&this.onExit(i)}_getMousePosition(e){return{x:e.clientX||0,y:e.clientY||0,dx:e.movementX||0,dy:e.movementY||0}}debugInfo(){return{type:"RenderMouseRegion",cursor:this.cursor,opaque:this.opaque,hitTestBehavior:this.hitTestBehavior,hasOnEnter:!!this.onEnter,hasOnHover:!!this.onHover,hasOnExit:!!this.onExit,isMouseInside:this._isMouseInside}}}class M extends q{constructor({key:e=null,onEnter:t=null,onExit:i=null,onHover:o=null,cursor:n=c.defer,opaque:r=!0,hitTestBehavior:s=u.deferToChild,child:a=null}={}){super(e),this.onEnter=t,this.onExit=i,this.onHover=o,this.cursor=n,this.opaque=r,this.hitTestBehavior=s,this.child=a,this._renderObject=null,this._containerElement=null}createRenderObject(e){return new v({onEnter:this.onEnter,onHover:this.onHover,onExit:this.onExit,cursor:this.cursor,opaque:this.opaque,hitTestBehavior:this.hitTestBehavior})}updateRenderObject(e,t){t.onEnter=this.onEnter,t.onHover=this.onHover,t.onExit=this.onExit,t.cursor=this.cursor,t.opaque=this.opaque,t.hitTestBehavior=this.hitTestBehavior}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);const t=e.element.getElementId(),i=e.element.getWidgetPath();let o=null;if(this.child){const s=this.child.createElement(e.element,e.element.runtime);s.mount(e.element),o=s.performRebuild()}const n=this._mapHitTestBehavior(),r={position:"relative",cursor:this.cursor,pointerEvents:n,userSelect:"none"};return new C({tag:"div",props:{style:r,"data-element-id":t,"data-widget-path":i,"data-widget":"MouseRegion","data-cursor":this.cursor,"data-opaque":this.opaque,"data-hit-test-behavior":this.hitTestBehavior,"data-has-on-enter":!!this.onEnter,"data-has-on-hover":!!this.onHover,"data-has-on-exit":!!this.onExit,onMouseEnter:s=>this._onMouseEnter(s),onMouseMove:s=>this._onMouseMove(s),onMouseLeave:s=>this._onMouseLeave(s),ref:s=>this._onContainerMount(s)},children:o?[o]:[],key:this.key})}_onMouseEnter(e){this._renderObject&&this._renderObject.handleMouseEnter(e)}_onMouseMove(e){this._renderObject&&this._renderObject.handleMouseMove(e)}_onMouseLeave(e){this._renderObject&&this._renderObject.handleMouseExit(e)}_onContainerMount(e){e&&(this._containerElement=e)}_mapHitTestBehavior(){switch(this.hitTestBehavior){case u.opaque:return"auto";case u.translucent:return"auto";case u.deferToChild:default:return"auto"}}debugFillProperties(e){super.debugFillProperties(e);const t=[];this.onEnter&&t.push("enter"),this.onExit&&t.push("exit"),this.onHover&&t.push("hover"),e.push({name:"listeners",value:t.join(", ")||"<none>"}),e.push({name:"cursor",value:this.cursor}),e.push({name:"opaque",value:this.opaque}),e.push({name:"hitTestBehavior",value:this.hitTestBehavior})}createElement(e,t){return new E(this,e,t)}}class E extends B{performRebuild(){return this.widget.build(this.context)}}class O extends M{constructor({key:e=null,onEnter:t=null,onExit:i=null,onHover:o=null,cursor:n="default",opaque:r=!0,hitTestBehavior:s=u.deferToChild,child:a=null}={}){super({key:e,onEnter:t,onExit:i,onHover:o,cursor:n,opaque:r,hitTestBehavior:s,child:a}),this._customCursor=n}build(e){return this.cursor=this._customCursor,super.build(e)}}export{u as HitTestBehavior,c as MouseCursor,M as MouseRegion,O as MouseRegionCustomCursor,E as MouseRegionElement,d as PointerEnterEvent,l as PointerEvent,m as PointerExitEvent,p as PointerHoverEvent,v as RenderMouseRegion};
-//# sourceMappingURL=mouse_region.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/mouse_region.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/mouse_region.js.map
deleted file mode 100644
index d62c79fc..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/mouse_region.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/mouse_region.js"],
-  "sourcesContent": ["import { Widget, } from '../../core/widget_element.js';\r\nimport {Element} from \"@flutterjs/runtime\"\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\n\r\n// ============================================================================\r\n// ENUMS\r\n// ============================================================================\r\n\r\nconst MouseCursor = {\r\n  defer: 'default',\r\n  clickable: 'pointer',\r\n  forbidden: 'not-allowed',\r\n  grab: 'grab',\r\n  grabbing: 'grabbing',\r\n  move: 'move',\r\n  precise: 'crosshair',\r\n  text: 'text',\r\n  verticalText: 'vertical-text',\r\n  cell: 'cell',\r\n  copy: 'copy',\r\n  alias: 'alias',\r\n  noDrop: 'no-drop',\r\n  wait: 'wait',\r\n  progress: 'progress',\r\n  contextMenu: 'context-menu',\r\n  help: 'help',\r\n  resize: 'resize',\r\n  resizeUp: 'n-resize',\r\n  resizeDown: 's-resize',\r\n  resizeLeft: 'w-resize',\r\n  resizeRight: 'e-resize',\r\n  resizeUpLeft: 'nw-resize',\r\n  resizeUpRight: 'ne-resize',\r\n  resizeDownLeft: 'sw-resize',\r\n  resizeDownRight: 'se-resize',\r\n  resizeColumn: 'col-resize',\r\n  resizeRow: 'row-resize',\r\n  allScroll: 'all-scroll',\r\n  zoomIn: 'zoom-in',\r\n  zoomOut: 'zoom-out'\r\n};\r\n\r\nconst HitTestBehavior = {\r\n  deferToChild: 'deferToChild',\r\n  opaque: 'opaque',\r\n  translucent: 'translucent'\r\n};\r\n\r\n// ============================================================================\r\n// POINTER EVENTS\r\n// ============================================================================\r\n\r\nclass PointerEvent {\r\n  constructor({\r\n    position = { x: 0, y: 0 },\r\n    localPosition = { x: 0, y: 0 },\r\n    timestamp = Date.now(),\r\n    pressure = 0,\r\n    pressureMin = 0,\r\n    pressureMax = 1,\r\n    distance = 0,\r\n    distanceMax = 0,\r\n    size = 0,\r\n    radiusMajor = 0,\r\n    radiusMinor = 0,\r\n    radiusMin = 0,\r\n    radiusMax = 0,\r\n    orientation = 0,\r\n    tilt = 0,\r\n    platformData = 0,\r\n    kind = 'touch',\r\n    device = 0,\r\n    signalKind = 'none'\r\n  } = {}) {\r\n    this.position = position;\r\n    this.localPosition = localPosition;\r\n    this.timestamp = timestamp;\r\n    this.pressure = pressure;\r\n    this.pressureMin = pressureMin;\r\n    this.pressureMax = pressureMax;\r\n    this.distance = distance;\r\n    this.distanceMax = distanceMax;\r\n    this.size = size;\r\n    this.radiusMajor = radiusMajor;\r\n    this.radiusMinor = radiusMinor;\r\n    this.radiusMin = radiusMin;\r\n    this.radiusMax = radiusMax;\r\n    this.orientation = orientation;\r\n    this.tilt = tilt;\r\n    this.platformData = platformData;\r\n    this.kind = kind;\r\n    this.device = device;\r\n    this.signalKind = signalKind;\r\n  }\r\n}\r\n\r\nclass PointerEnterEvent extends PointerEvent {\r\n  constructor(options = {}) {\r\n    super(options);\r\n  }\r\n}\r\n\r\nclass PointerHoverEvent extends PointerEvent {\r\n  constructor(options = {}) {\r\n    super(options);\r\n  }\r\n}\r\n\r\nclass PointerExitEvent extends PointerEvent {\r\n  constructor(options = {}) {\r\n    super(options);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER MOUSE REGION\r\n// ============================================================================\r\n\r\nclass RenderMouseRegion {\r\n  constructor({\r\n    onEnter = null,\r\n    onHover = null,\r\n    onExit = null,\r\n    cursor = MouseCursor.defer,\r\n    opaque = true,\r\n    hitTestBehavior = HitTestBehavior.deferToChild\r\n  } = {}) {\r\n    this.onEnter = onEnter;\r\n    this.onHover = onHover;\r\n    this.onExit = onExit;\r\n    this.cursor = cursor;\r\n    this.opaque = opaque;\r\n    this.hitTestBehavior = hitTestBehavior;\r\n    this._isMouseInside = false;\r\n    this._lastMousePosition = null;\r\n  }\r\n\r\n  /**\r\n   * Handle mouse enter\r\n   */\r\n  handleMouseEnter(event) {\r\n    this._isMouseInside = true;\r\n\r\n    const position = this._getMousePosition(event);\r\n    const pointerEvent = new PointerEnterEvent({\r\n      position,\r\n      localPosition: position,\r\n      timestamp: event.timeStamp || Date.now()\r\n    });\r\n\r\n    if (this.onEnter) {\r\n      this.onEnter(pointerEvent);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle mouse move\r\n   */\r\n  handleMouseMove(event) {\r\n    this._lastMousePosition = this._getMousePosition(event);\r\n\r\n    if (this.onHover) {\r\n      const pointerEvent = new PointerHoverEvent({\r\n        position: this._lastMousePosition,\r\n        localPosition: this._lastMousePosition,\r\n        timestamp: event.timeStamp || Date.now()\r\n      });\r\n\r\n      this.onHover(pointerEvent);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle mouse exit\r\n   */\r\n  handleMouseExit(event) {\r\n    this._isMouseInside = false;\r\n\r\n    const position = this._getMousePosition(event);\r\n    const pointerEvent = new PointerExitEvent({\r\n      position,\r\n      localPosition: position,\r\n      timestamp: event.timeStamp || Date.now()\r\n    });\r\n\r\n    if (this.onExit) {\r\n      this.onExit(pointerEvent);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get mouse position from event\r\n   * @private\r\n   */\r\n  _getMousePosition(event) {\r\n    return {\r\n      x: event.clientX || 0,\r\n      y: event.clientY || 0,\r\n      dx: event.movementX || 0,\r\n      dy: event.movementY || 0\r\n    };\r\n  }\r\n\r\n  debugInfo() {\r\n    return {\r\n      type: 'RenderMouseRegion',\r\n      cursor: this.cursor,\r\n      opaque: this.opaque,\r\n      hitTestBehavior: this.hitTestBehavior,\r\n      hasOnEnter: !!this.onEnter,\r\n      hasOnHover: !!this.onHover,\r\n      hasOnExit: !!this.onExit,\r\n      isMouseInside: this._isMouseInside\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// MOUSE REGION WIDGET\r\n// ============================================================================\r\n\r\nclass MouseRegion extends Widget {\r\n  constructor({\r\n    key = null,\r\n    onEnter = null,\r\n    onExit = null,\r\n    onHover = null,\r\n    cursor = MouseCursor.defer,\r\n    opaque = true,\r\n    hitTestBehavior = HitTestBehavior.deferToChild,\r\n    child = null\r\n  } = {}) {\r\n    super(key);\r\n\r\n    this.onEnter = onEnter;\r\n    this.onExit = onExit;\r\n    this.onHover = onHover;\r\n    this.cursor = cursor;\r\n    this.opaque = opaque;\r\n    this.hitTestBehavior = hitTestBehavior;\r\n    this.child = child;\r\n    this._renderObject = null;\r\n    this._containerElement = null;\r\n  }\r\n\r\n  /**\r\n   * Create render object\r\n   */\r\n  createRenderObject(context) {\r\n    return new RenderMouseRegion({\r\n      onEnter: this.onEnter,\r\n      onHover: this.onHover,\r\n      onExit: this.onExit,\r\n      cursor: this.cursor,\r\n      opaque: this.opaque,\r\n      hitTestBehavior: this.hitTestBehavior\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Update render object\r\n   */\r\n  updateRenderObject(context, renderObject) {\r\n    renderObject.onEnter = this.onEnter;\r\n    renderObject.onHover = this.onHover;\r\n    renderObject.onExit = this.onExit;\r\n    renderObject.cursor = this.cursor;\r\n    renderObject.opaque = this.opaque;\r\n    renderObject.hitTestBehavior = this.hitTestBehavior;\r\n  }\r\n\r\n  /**\r\n   * Build widget tree\r\n   */\r\n  build(context) {\r\n    if (!this._renderObject) {\r\n      this._renderObject = this.createRenderObject(context);\r\n    } else {\r\n      this.updateRenderObject(context, this._renderObject);\r\n    }\r\n\r\n    const elementId = context.element.getElementId();\r\n    const widgetPath = context.element.getWidgetPath();\r\n\r\n    // Build child\r\n    let childVNode = null;\r\n    if (this.child) {\r\n      const childElement = this.child.createElement(context.element, context.element.runtime);\r\n      childElement.mount(context.element);\r\n      childVNode = childElement.performRebuild();\r\n    }\r\n\r\n    // Determine pointer events based on hit test behavior\r\n    const pointerEvents = this._mapHitTestBehavior();\r\n\r\n    // Container style\r\n    const style = {\r\n      position: 'relative',\r\n      cursor: this.cursor,\r\n      pointerEvents,\r\n      userSelect: 'none'\r\n    };\r\n\r\n    return new VNode({\r\n      tag: 'div',\r\n      props: {\r\n        style,\r\n        'data-element-id': elementId,\r\n        'data-widget-path': widgetPath,\r\n        'data-widget': 'MouseRegion',\r\n        'data-cursor': this.cursor,\r\n        'data-opaque': this.opaque,\r\n        'data-hit-test-behavior': this.hitTestBehavior,\r\n        'data-has-on-enter': !!this.onEnter,\r\n        'data-has-on-hover': !!this.onHover,\r\n        'data-has-on-exit': !!this.onExit,\r\n        onMouseEnter: (el) => this._onMouseEnter(el),\r\n        onMouseMove: (el) => this._onMouseMove(el),\r\n        onMouseLeave: (el) => this._onMouseLeave(el),\r\n        ref: (el) => this._onContainerMount(el)\r\n      },\r\n      children: childVNode ? [childVNode] : [],\r\n      key: this.key\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Handle mouse enter event\r\n   * @private\r\n   */\r\n  _onMouseEnter(event) {\r\n    if (this._renderObject) {\r\n      this._renderObject.handleMouseEnter(event);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle mouse move event\r\n   * @private\r\n   */\r\n  _onMouseMove(event) {\r\n    if (this._renderObject) {\r\n      this._renderObject.handleMouseMove(event);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle mouse leave event\r\n   * @private\r\n   */\r\n  _onMouseLeave(event) {\r\n    if (this._renderObject) {\r\n      this._renderObject.handleMouseExit(event);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Mount container\r\n   * @private\r\n   */\r\n  _onContainerMount(el) {\r\n    if (!el) return;\r\n    this._containerElement = el;\r\n  }\r\n\r\n  /**\r\n   * Map hit test behavior to CSS pointer-events\r\n   * @private\r\n   */\r\n  _mapHitTestBehavior() {\r\n    switch (this.hitTestBehavior) {\r\n      case HitTestBehavior.opaque:\r\n        return 'auto';\r\n      case HitTestBehavior.translucent:\r\n        return 'auto';\r\n      case HitTestBehavior.deferToChild:\r\n      default:\r\n        return 'auto';\r\n    }\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n\r\n    const listeners = [];\r\n    if (this.onEnter) listeners.push('enter');\r\n    if (this.onExit) listeners.push('exit');\r\n    if (this.onHover) listeners.push('hover');\r\n\r\n    properties.push({ name: 'listeners', value: listeners.join(', ') || '<none>' });\r\n    properties.push({ name: 'cursor', value: this.cursor });\r\n    properties.push({ name: 'opaque', value: this.opaque });\r\n    properties.push({ name: 'hitTestBehavior', value: this.hitTestBehavior });\r\n  }\r\n\r\n  createElement(parent, runtime) {\r\n    return new MouseRegionElement(this,parent, runtime);\r\n  }\r\n}\r\n\r\nclass MouseRegionElement extends Element {\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// MOUSE REGION WITH CUSTOM CURSOR\r\n// ============================================================================\r\n\r\nclass MouseRegionCustomCursor extends MouseRegion {\r\n  constructor({\r\n    key = null,\r\n    onEnter = null,\r\n    onExit = null,\r\n    onHover = null,\r\n    cursor = 'default',\r\n    opaque = true,\r\n    hitTestBehavior = HitTestBehavior.deferToChild,\r\n    child = null\r\n  } = {}) {\r\n    super({\r\n      key,\r\n      onEnter,\r\n      onExit,\r\n      onHover,\r\n      cursor,\r\n      opaque,\r\n      hitTestBehavior,\r\n      child\r\n    });\r\n\r\n    this._customCursor = cursor;\r\n  }\r\n\r\n  build(context) {\r\n    // Use custom cursor string directly\r\n    this.cursor = this._customCursor;\r\n    return super.build(context);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport {\r\n  MouseRegion,\r\n  MouseRegionElement,\r\n  MouseRegionCustomCursor,\r\n  RenderMouseRegion,\r\n  PointerEvent,\r\n  PointerEnterEvent,\r\n  PointerHoverEvent,\r\n  PointerExitEvent,\r\n  MouseCursor,\r\n  HitTestBehavior\r\n};"],
-  "mappings": "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",
-  "names": ["Widget", "Element", "VNode", "MouseCursor", "HitTestBehavior", "PointerEvent", "position", "localPosition", "timestamp", "pressure", "pressureMin", "pressureMax", "distance", "distanceMax", "size", "radiusMajor", "radiusMinor", "radiusMin", "radiusMax", "orientation", "tilt", "platformData", "kind", "device", "signalKind", "PointerEnterEvent", "options", "PointerHoverEvent", "PointerExitEvent", "RenderMouseRegion", "onEnter", "onHover", "onExit", "cursor", "opaque", "hitTestBehavior", "event", "pointerEvent", "MouseRegion", "key", "child", "context", "renderObject", "elementId", "widgetPath", "childVNode", "childElement", "pointerEvents", "style", "el", "properties", "listeners", "parent", "runtime", "MouseRegionElement", "MouseRegionCustomCursor"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/multi_child_view.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/multi_child_view.js
deleted file mode 100644
index 2f2e257c..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/multi_child_view.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{Widget as A}from"../../core/widget_element.js";import{Element as v}from"@flutterjs/runtime";import{VNode as p}from"@flutterjs/vdom/vnode";import{Axis as m,TextDirection as w,VerticalDirection as b,Clip as u,MainAxisAlignment as S,CrossAxisAlignment as g,FlexFit as D,WrapAlignment as C,WrapCrossAlignment as I}from"../../utils/utils.js";const x={min:"min",max:"max"};class R{constructor(){this.flex=null,this.fit=D.loose}debugInfo(){return{flex:this.flex,fit:this.fit}}}class _{constructor({direction:e=m.horizontal,mainAxisAlignment:t=S.start,mainAxisSize:i=x.max,crossAxisAlignment:n=g.center,textDirection:r=w.ltr,verticalDirection:a=b.down,textBaseline:c=null,clipBehavior:o=u.none,spacing:s=0}={}){this.direction=e,this.mainAxisAlignment=t,this.mainAxisSize=i,this.crossAxisAlignment=n,this.textDirection=r,this.verticalDirection=a,this.textBaseline=c,this.clipBehavior=o,this.spacing=s,this._children=[]}addChild(e){this._children.push(e)}removeChild(e){const t=this._children.indexOf(e);t>-1&&this._children.splice(t,1)}debugInfo(){return{type:"RenderFlex",direction:this.direction,mainAxisAlignment:this.mainAxisAlignment,mainAxisSize:this.mainAxisSize,crossAxisAlignment:this.crossAxisAlignment,textDirection:this.textDirection,spacing:this.spacing,childCount:this._children.length}}}class B extends A{constructor({key:e=null,direction:t=m.horizontal,mainAxisAlignment:i=S.start,mainAxisSize:n=x.max,crossAxisAlignment:r=g.center,textDirection:a=null,verticalDirection:c=b.down,textBaseline:o=null,clipBehavior:s=u.none,spacing:h=0,children:d=[]}={}){if(super(e),r===g.baseline&&!o)throw new Error("textBaseline is required when crossAxisAlignment is CrossAxisAlignment.baseline");this.direction=t,this.mainAxisAlignment=i,this.mainAxisSize=n,this.crossAxisAlignment=r,this.textDirection=a,this.verticalDirection=c,this.textBaseline=o,this.clipBehavior=s,this.spacing=h,this.children=d||[],this._renderObject=null}_needTextDirection(){return this.direction===m.horizontal?!0:this.crossAxisAlignment===g.start||this.crossAxisAlignment===g.end}getEffectiveTextDirection(e){return this.textDirection?this.textDirection:this._needTextDirection()?e?.textDirection||w.ltr:null}createRenderObject(e){return new _({direction:this.direction,mainAxisAlignment:this.mainAxisAlignment,mainAxisSize:this.mainAxisSize,crossAxisAlignment:this.crossAxisAlignment,textDirection:this.getEffectiveTextDirection(e),verticalDirection:this.verticalDirection,textBaseline:this.textBaseline,clipBehavior:this.clipBehavior,spacing:this.spacing})}updateRenderObject(e,t){t.direction=this.direction,t.mainAxisAlignment=this.mainAxisAlignment,t.mainAxisSize=this.mainAxisSize,t.crossAxisAlignment=this.crossAxisAlignment,t.textDirection=this.getEffectiveTextDirection(e),t.verticalDirection=this.verticalDirection,t.textBaseline=this.textBaseline,t.clipBehavior=this.clipBehavior,t.spacing=this.spacing}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);const t=e.element.getElementId(),i=e.element.getWidgetPath(),n=this._mapMainAxisAlignment(),r=this._mapCrossAxisAlignment();var a=this.direction===m.horizontal?"row":"column";this.verticalDirection===b.up&&this.direction===m.vertical&&(a="column-reverse");const c=this.clipBehavior===u.none?"visible":"hidden",o={display:"flex",flexDirection:a,justifyContent:n,alignItems:r,gap:`${this.spacing}px`,width:this.mainAxisSize===x.max?"100%":"auto",height:this.mainAxisSize===x.max?"100%":"auto",direction:this.textDirection===w.rtl?"rtl":"ltr",overflow:c,flexWrap:"nowrap"},s=this.children.map((h,d)=>{console.log(`[Flex.build] Building child ${d}:`,h?.constructor?.name,"has createElement:",typeof h?.createElement);const y=h.createElement(e.element,e.element.runtime);console.log(`[Flex.build] Child ${d} element:`,y?.constructor?.name),y.mount(e.element);const F=y.performRebuild();console.log(`[Flex.build] Child ${d} VNode:`,F?.constructor?.name,"tag:",F?.tag);let f={};return h instanceof z&&(h.fit===D.tight?f.flex=h.flex||1:(f.flex=0,f.flexShrink=0)),new p({tag:"div",props:{style:{...f,minWidth:0,minHeight:0}},children:[F]})});return new p({tag:"div",props:{style:o,"data-element-id":t,"data-widget-path":i,"data-widget":"Flex","data-direction":this.direction,"data-main-axis":this.mainAxisAlignment,"data-cross-axis":this.crossAxisAlignment,"data-spacing":this.spacing},children:s,key:this.key})}_mapMainAxisAlignment(){let e=this.mainAxisAlignment;return typeof e=="string"&&e.startsWith(".")&&(e=e.substring(1)),{start:"flex-start",end:"flex-end",center:"center",spaceBetween:"space-between",spaceAround:"space-around",spaceEvenly:"space-evenly"}[e]||"flex-start"}_mapCrossAxisAlignment(){let e=this.crossAxisAlignment;return typeof e=="string"&&e.startsWith(".")&&(e=e.substring(1)),{start:"flex-start",end:"flex-end",center:"center",stretch:"stretch",baseline:"baseline"}[e]||"center"}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"direction",value:this.direction}),e.push({name:"mainAxisAlignment",value:this.mainAxisAlignment}),e.push({name:"mainAxisSize",value:this.mainAxisSize}),e.push({name:"crossAxisAlignment",value:this.crossAxisAlignment}),e.push({name:"textDirection",value:this.textDirection}),e.push({name:"spacing",value:this.spacing}),e.push({name:"childCount",value:this.children.length})}createElement(e,t){return new P(this,e,t)}}class P extends v{performRebuild(){return this.widget.build(this.context)}}class N extends B{constructor(e={}){super({...e,direction:m.horizontal})}}class T extends B{constructor(e={}){super({...e,direction:m.vertical})}}class z extends A{constructor({key:e=null,flex:t=1,fit:i=D.loose,child:n=null}={}){if(super(e),t<=0)throw new Error("flex must be > 0");this.flex=t,this.fit=i,this.child=n}applyParentData(e){e.parentData||(e.parentData=new R);const t=e.parentData;let i=!1;t.flex!==this.flex&&(t.flex=this.flex,i=!0),t.fit!==this.fit&&(t.fit=this.fit,i=!0),i&&e.parent&&e.parent.markNeedsLayout?.()}build(e){if(!this.child)return null;const t=this.child.createElement(e.element,e.element.runtime);return t.mount(e.element),t.performRebuild()}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"flex",value:this.flex}),e.push({name:"fit",value:this.fit})}createElement(e,t){return new V(this,e,t)}}class V extends v{performRebuild(){return this.widget.build(this.context)}}class $ extends z{constructor({key:e=null,flex:t=1,child:i=null}={}){super({key:e,flex:t,fit:D.tight,child:i})}}class M extends A{constructor({key:e=null,direction:t=m.horizontal,alignment:i=C.start,spacing:n=0,runAlignment:r=C.start,runSpacing:a=0,crossAxisAlignment:c=I.start,textDirection:o=null,verticalDirection:s=b.down,clipBehavior:h=u.none,children:d=[]}={}){super(e),this.direction=t,this.alignment=i,this.spacing=n,this.runAlignment=r,this.runSpacing=a,this.crossAxisAlignment=c,this.textDirection=o,this.verticalDirection=s,this.clipBehavior=h,this.children=d||[]}_mapAlignment(){let e=this.alignment;return typeof e=="string"&&e.startsWith(".")&&(e=e.substring(1)),{start:"flex-start",end:"flex-end",center:"center",spaceBetween:"space-between",spaceAround:"space-around",spaceEvenly:"space-evenly"}[e]||"flex-start"}_mapRunAlignment(){let e=this.runAlignment;return typeof e=="string"&&e.startsWith(".")&&(e=e.substring(1)),{start:"flex-start",end:"flex-end",center:"center",spaceBetween:"space-between",spaceAround:"space-around",spaceEvenly:"space-evenly"}[e]||"flex-start"}build(e){const t=e.element.getElementId(),i=e.element.getWidgetPath(),n=this.direction===m.horizontal?"row":"column",r=this.clipBehavior===u.none?"visible":"hidden",a={display:"flex",flexDirection:n,flexWrap:"wrap",justifyContent:this._mapAlignment(),alignContent:this._mapRunAlignment(),gap:`${this.spacing}px ${this.runSpacing}px`,direction:this.textDirection===w.rtl?"rtl":"ltr",overflow:r},c=this.children.map(o=>{const s=o.createElement(e.element,e.element.runtime);return s.mount(e.element),s.performRebuild()});return new p({tag:"div",props:{style:a,"data-element-id":t,"data-widget-path":i,"data-widget":"Wrap","data-direction":this.direction,"data-alignment":this.alignment,"data-spacing":this.spacing},children:c,key:this.key})}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"direction",value:this.direction}),e.push({name:"alignment",value:this.alignment}),e.push({name:"spacing",value:this.spacing}),e.push({name:"runAlignment",value:this.runAlignment}),e.push({name:"runSpacing",value:this.runSpacing}),e.push({name:"childCount",value:this.children.length})}createElement(e,t){return new W(this,e,t)}}class W extends v{performRebuild(){return this.widget.build(this.context)}}class E{constructor(){if(new.target===E)throw new Error("FlowDelegate is abstract")}getSize(e){throw new Error("getSize() must be implemented")}paintChildren(e,t){throw new Error("paintChildren() must be implemented")}shouldRepaint(e){return!0}shouldReflow(e){return!0}}class q extends A{constructor({key:e=null,delegate:t=null,clipBehavior:i=u.hardEdge,children:n=[]}={}){if(super(e),!t)throw new Error("Flow requires a delegate");if(!(t instanceof E))throw new Error("delegate must be an instance of FlowDelegate");this.delegate=t,this.clipBehavior=i,this.children=n||[]}build(e){const t=e.element.getElementId(),i=e.element.getWidgetPath(),r={position:"relative",display:"inline-block",overflow:this.clipBehavior===u.none?"visible":"hidden"},a=this.children.map((c,o)=>{const s=c.createElement(e.element,e.element.runtime);s.mount(e.element);const h=s.performRebuild();return new p({tag:"div",props:{style:{position:"absolute",left:0,top:0},"data-flow-index":o},children:[h]})});return new p({tag:"div",props:{style:r,"data-element-id":t,"data-widget-path":i,"data-widget":"Flow","data-clip-behavior":this.clipBehavior,"data-child-count":this.children.length},children:a,key:this.key})}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"delegate",value:this.delegate.constructor.name}),e.push({name:"clipBehavior",value:this.clipBehavior}),e.push({name:"childCount",value:this.children.length})}createElement(e,t){return new k(this,e,t)}}class k extends v{performRebuild(){return this.widget.build(this.context)}}export{T as Column,$ as Expanded,B as Flex,P as FlexElement,R as FlexParentData,z as Flexible,V as FlexibleElement,q as Flow,E as FlowDelegate,k as FlowElement,x as MainAxisSize,_ as RenderFlex,N as Row,M as Wrap,W as WrapElement};
-//# sourceMappingURL=multi_child_view.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/multi_child_view.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/multi_child_view.js.map
deleted file mode 100644
index 5ffab9f0..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/multi_child_view.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/multi_child_view.js"],
-  "sourcesContent": ["\r\nimport { Widget, } from '../../core/widget_element.js';\r\nimport { Element } from \"@flutterjs/runtime\"\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { Axis, TextDirection, VerticalDirection, Clip, MainAxisAlignment, CrossAxisAlignment, FlexFit, WrapAlignment, WrapCrossAlignment } from '../../utils/utils.js';\r\n\r\n// ============================================================================\r\n// ENUMS\r\n// ============================================================================\r\n\r\nconst MainAxisSize = {\r\n  min: 'min',\r\n  max: 'max'\r\n};\r\n\r\n// ============================================================================\r\n// FLEX PARENT DATA\r\n// ============================================================================\r\n\r\nclass FlexParentData {\r\n  constructor() {\r\n    this.flex = null;\r\n    this.fit = FlexFit.loose;\r\n  }\r\n\r\n  debugInfo() {\r\n    return {\r\n      flex: this.flex,\r\n      fit: this.fit\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER FLEX\r\n// ============================================================================\r\n\r\nclass RenderFlex {\r\n  constructor({\r\n    direction = Axis.horizontal,\r\n    mainAxisAlignment = MainAxisAlignment.start,\r\n    mainAxisSize = MainAxisSize.max,\r\n    crossAxisAlignment = CrossAxisAlignment.center,\r\n    textDirection = TextDirection.ltr,\r\n    verticalDirection = VerticalDirection.down,\r\n    textBaseline = null,\r\n    clipBehavior = Clip.none,\r\n    spacing = 0\r\n  } = {}) {\r\n    this.direction = direction;\r\n    this.mainAxisAlignment = mainAxisAlignment;\r\n    this.mainAxisSize = mainAxisSize;\r\n    this.crossAxisAlignment = crossAxisAlignment;\r\n    this.textDirection = textDirection;\r\n    this.verticalDirection = verticalDirection;\r\n    this.textBaseline = textBaseline;\r\n    this.clipBehavior = clipBehavior;\r\n    this.spacing = spacing;\r\n    this._children = [];\r\n  }\r\n\r\n  addChild(child) {\r\n    this._children.push(child);\r\n  }\r\n\r\n  removeChild(child) {\r\n    const index = this._children.indexOf(child);\r\n    if (index > -1) {\r\n      this._children.splice(index, 1);\r\n    }\r\n  }\r\n\r\n  debugInfo() {\r\n    return {\r\n      type: 'RenderFlex',\r\n      direction: this.direction,\r\n      mainAxisAlignment: this.mainAxisAlignment,\r\n      mainAxisSize: this.mainAxisSize,\r\n      crossAxisAlignment: this.crossAxisAlignment,\r\n      textDirection: this.textDirection,\r\n      spacing: this.spacing,\r\n      childCount: this._children.length\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// FLEX WIDGET\r\n// ============================================================================\r\n\r\nclass Flex extends Widget {\r\n  constructor({\r\n    key = null,\r\n    direction = Axis.horizontal,\r\n    mainAxisAlignment = MainAxisAlignment.start,\r\n    mainAxisSize = MainAxisSize.max,\r\n    crossAxisAlignment = CrossAxisAlignment.center,\r\n    textDirection = null,\r\n    verticalDirection = VerticalDirection.down,\r\n    textBaseline = null,\r\n    clipBehavior = Clip.none,\r\n    spacing = 0,\r\n    children = []\r\n  } = {}) {\r\n    super(key);\r\n\r\n    // Validate baseline\r\n    if (crossAxisAlignment === CrossAxisAlignment.baseline && !textBaseline) {\r\n      throw new Error(\r\n        'textBaseline is required when crossAxisAlignment is CrossAxisAlignment.baseline'\r\n      );\r\n    }\r\n\r\n    this.direction = direction;\r\n    this.mainAxisAlignment = mainAxisAlignment;\r\n    this.mainAxisSize = mainAxisSize;\r\n    this.crossAxisAlignment = crossAxisAlignment;\r\n    this.textDirection = textDirection;\r\n    this.verticalDirection = verticalDirection;\r\n    this.textBaseline = textBaseline;\r\n    this.clipBehavior = clipBehavior;\r\n    this.spacing = spacing;\r\n    this.children = children || [];\r\n    this._renderObject = null;\r\n  }\r\n\r\n  /**\r\n   * Check if text direction is needed\r\n   * @private\r\n   */\r\n  _needTextDirection() {\r\n    if (this.direction === Axis.horizontal) {\r\n      return true;\r\n    }\r\n    return this.crossAxisAlignment === CrossAxisAlignment.start ||\r\n      this.crossAxisAlignment === CrossAxisAlignment.end;\r\n  }\r\n\r\n  /**\r\n   * Get effective text direction\r\n   */\r\n  getEffectiveTextDirection(context) {\r\n    if (this.textDirection) {\r\n      return this.textDirection;\r\n    }\r\n\r\n    if (this._needTextDirection()) {\r\n      return context?.textDirection || TextDirection.ltr;\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Create render object\r\n   */\r\n  createRenderObject(context) {\r\n    return new RenderFlex({\r\n      direction: this.direction,\r\n      mainAxisAlignment: this.mainAxisAlignment,\r\n      mainAxisSize: this.mainAxisSize,\r\n      crossAxisAlignment: this.crossAxisAlignment,\r\n      textDirection: this.getEffectiveTextDirection(context),\r\n      verticalDirection: this.verticalDirection,\r\n      textBaseline: this.textBaseline,\r\n      clipBehavior: this.clipBehavior,\r\n      spacing: this.spacing\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Update render object\r\n   */\r\n  updateRenderObject(context, renderObject) {\r\n    renderObject.direction = this.direction;\r\n    renderObject.mainAxisAlignment = this.mainAxisAlignment;\r\n    renderObject.mainAxisSize = this.mainAxisSize;\r\n    renderObject.crossAxisAlignment = this.crossAxisAlignment;\r\n    renderObject.textDirection = this.getEffectiveTextDirection(context);\r\n    renderObject.verticalDirection = this.verticalDirection;\r\n    renderObject.textBaseline = this.textBaseline;\r\n    renderObject.clipBehavior = this.clipBehavior;\r\n    renderObject.spacing = this.spacing;\r\n  }\r\n\r\n  /**\r\n   * Build widget tree\r\n   */\r\n  build(context) {\r\n    if (!this._renderObject) {\r\n      this._renderObject = this.createRenderObject(context);\r\n    } else {\r\n      this.updateRenderObject(context, this._renderObject);\r\n    }\r\n\r\n    const elementId = context.element.getElementId();\r\n    const widgetPath = context.element.getWidgetPath();\r\n\r\n    // Map alignment to CSS\r\n    const justifyContent = this._mapMainAxisAlignment();\r\n    const alignItems = this._mapCrossAxisAlignment();\r\n    var flexDirection = this.direction === Axis.horizontal ? 'row' : 'column';\r\n\r\n    // Handle reverse direction\r\n    if (this.verticalDirection === VerticalDirection.up && this.direction === Axis.vertical) {\r\n      flexDirection = 'column-reverse';\r\n    }\r\n\r\n    const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';\r\n\r\n    const style = {\r\n      display: 'flex',\r\n      flexDirection,\r\n      justifyContent,\r\n      alignItems,\r\n      gap: `${this.spacing}px`,\r\n      width: this.mainAxisSize === MainAxisSize.max ? '100%' : 'auto',\r\n      height: this.mainAxisSize === MainAxisSize.max ? '100%' : 'auto',\r\n      direction: this.textDirection === TextDirection.rtl ? 'rtl' : 'ltr',\r\n      overflow: overflowValue,\r\n      flexWrap: 'nowrap'\r\n    };\r\n\r\n    // Build child VNodes\r\n    const childVNodes = this.children.map((childWidget, idx) => {\r\n      console.log(`[Flex.build] Building child ${idx}:`, childWidget?.constructor?.name, 'has createElement:', typeof childWidget?.createElement);\r\n      const childElement = childWidget.createElement(context.element, context.element.runtime);\r\n      console.log(`[Flex.build] Child ${idx} element:`, childElement?.constructor?.name);\r\n      childElement.mount(context.element);\r\n      const childVNode = childElement.performRebuild();\r\n      console.log(`[Flex.build] Child ${idx} VNode:`, childVNode?.constructor?.name, 'tag:', childVNode?.tag);\r\n\r\n      // Check if child is Flexible/Expanded\r\n      let childStyle = {};\r\n\r\n      if (childWidget instanceof Flexible) {\r\n        if (childWidget.fit === FlexFit.tight) {\r\n          childStyle.flex = childWidget.flex || 1;\r\n        } else {\r\n          childStyle.flex = 0;\r\n          childStyle.flexShrink = 0;\r\n        }\r\n      }\r\n\r\n      return new VNode({\r\n        tag: 'div',\r\n        props: {\r\n          style: {\r\n            ...childStyle,\r\n            minWidth: 0,\r\n            minHeight: 0\r\n          }\r\n        },\r\n        children: [childVNode]\r\n      });\r\n    });\r\n\r\n    return new VNode({\r\n      tag: 'div',\r\n      props: {\r\n        style,\r\n        'data-element-id': elementId,\r\n        'data-widget-path': widgetPath,\r\n        'data-widget': 'Flex',\r\n        'data-direction': this.direction,\r\n        'data-main-axis': this.mainAxisAlignment,\r\n        'data-cross-axis': this.crossAxisAlignment,\r\n        'data-spacing': this.spacing\r\n      },\r\n      children: childVNodes,\r\n      key: this.key\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Map main axis alignment to CSS\r\n   * @private\r\n   */\r\n  _mapMainAxisAlignment() {\r\n    // Handle shorthand enum syntax (e.g. \".center\")\r\n    let value = this.mainAxisAlignment;\r\n    if (typeof value === 'string' && value.startsWith('.')) {\r\n      value = value.substring(1);\r\n    }\r\n\r\n    const map = {\r\n      start: 'flex-start',\r\n      end: 'flex-end',\r\n      center: 'center',\r\n      spaceBetween: 'space-between',\r\n      spaceAround: 'space-around',\r\n      spaceEvenly: 'space-evenly'\r\n    };\r\n    return map[value] || 'flex-start';\r\n  }\r\n\r\n  /**\r\n   * Map cross axis alignment to CSS\r\n   * @private\r\n   */\r\n  _mapCrossAxisAlignment() {\r\n    // Handle shorthand enum syntax (e.g. \".center\")\r\n    let value = this.crossAxisAlignment;\r\n    if (typeof value === 'string' && value.startsWith('.')) {\r\n      value = value.substring(1);\r\n    }\r\n\r\n    const map = {\r\n      start: 'flex-start',\r\n      end: 'flex-end',\r\n      center: 'center',\r\n      stretch: 'stretch',\r\n      baseline: 'baseline'\r\n    };\r\n    return map[value] || 'center';\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({ name: 'direction', value: this.direction });\r\n    properties.push({ name: 'mainAxisAlignment', value: this.mainAxisAlignment });\r\n    properties.push({ name: 'mainAxisSize', value: this.mainAxisSize });\r\n    properties.push({ name: 'crossAxisAlignment', value: this.crossAxisAlignment });\r\n    properties.push({ name: 'textDirection', value: this.textDirection });\r\n    properties.push({ name: 'spacing', value: this.spacing });\r\n    properties.push({ name: 'childCount', value: this.children.length });\r\n  }\r\n\r\n  createElement(parent, runtime) {\r\n    return new FlexElement(this, parent, runtime);\r\n  }\r\n}\r\n\r\nclass FlexElement extends Element {\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// ROW WIDGET\r\n// ============================================================================\r\n\r\nclass Row extends Flex {\r\n  constructor(options = {}) {\r\n    super({\r\n      ...options,\r\n      direction: Axis.horizontal\r\n    });\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// COLUMN WIDGET\r\n// ============================================================================\r\n\r\nclass Column extends Flex {\r\n  constructor(options = {}) {\r\n    super({\r\n      ...options,\r\n      direction: Axis.vertical\r\n    });\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// FLEXIBLE WIDGET\r\n// ============================================================================\r\n\r\nclass Flexible extends Widget {\r\n  constructor({\r\n    key = null,\r\n    flex = 1,\r\n    fit = FlexFit.loose,\r\n    child = null\r\n  } = {}) {\r\n    super(key);\r\n\r\n    if (flex <= 0) {\r\n      throw new Error('flex must be > 0');\r\n    }\r\n\r\n    this.flex = flex;\r\n    this.fit = fit;\r\n    this.child = child;\r\n  }\r\n\r\n  /**\r\n   * Apply flex parent data\r\n   */\r\n  applyParentData(renderObject) {\r\n    if (!renderObject.parentData) {\r\n      renderObject.parentData = new FlexParentData();\r\n    }\r\n\r\n    const parentData = renderObject.parentData;\r\n    let needsLayout = false;\r\n\r\n    if (parentData.flex !== this.flex) {\r\n      parentData.flex = this.flex;\r\n      needsLayout = true;\r\n    }\r\n\r\n    if (parentData.fit !== this.fit) {\r\n      parentData.fit = this.fit;\r\n      needsLayout = true;\r\n    }\r\n\r\n    if (needsLayout && renderObject.parent) {\r\n      renderObject.parent.markNeedsLayout?.();\r\n    }\r\n  }\r\n\r\n  build(context) {\r\n    // \u2705 Must build child to VNode, not return raw Widget\r\n    if (!this.child) {\r\n      return null;\r\n    }\r\n    const childElement = this.child.createElement(context.element, context.element.runtime);\r\n    childElement.mount(context.element);\r\n    return childElement.performRebuild();\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({ name: 'flex', value: this.flex });\r\n    properties.push({ name: 'fit', value: this.fit });\r\n  }\r\n\r\n  createElement(parent, runtime) {\r\n    return new FlexibleElement(this, parent, runtime);\r\n  }\r\n}\r\n\r\nclass FlexibleElement extends Element {\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// EXPANDED WIDGET\r\n// ============================================================================\r\n\r\nclass Expanded extends Flexible {\r\n  constructor({\r\n    key = null,\r\n    flex = 1,\r\n    child = null\r\n  } = {}) {\r\n    super({\r\n      key,\r\n      flex,\r\n      fit: FlexFit.tight,\r\n      child\r\n    });\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// WRAP WIDGET\r\n// ============================================================================\r\n\r\nclass Wrap extends Widget {\r\n  constructor({\r\n    key = null,\r\n    direction = Axis.horizontal,\r\n    alignment = WrapAlignment.start,\r\n    spacing = 0,\r\n    runAlignment = WrapAlignment.start,\r\n    runSpacing = 0,\r\n    crossAxisAlignment = WrapCrossAlignment.start,\r\n    textDirection = null,\r\n    verticalDirection = VerticalDirection.down,\r\n    clipBehavior = Clip.none,\r\n    children = []\r\n  } = {}) {\r\n    super(key);\r\n\r\n    this.direction = direction;\r\n    this.alignment = alignment;\r\n    this.spacing = spacing;\r\n    this.runAlignment = runAlignment;\r\n    this.runSpacing = runSpacing;\r\n    this.crossAxisAlignment = crossAxisAlignment;\r\n    this.textDirection = textDirection;\r\n    this.verticalDirection = verticalDirection;\r\n    this.clipBehavior = clipBehavior;\r\n    this.children = children || [];\r\n  }\r\n\r\n  /**\r\n   * Map wrap alignment to CSS\r\n   * @private\r\n   */\r\n  _mapAlignment() {\r\n    // Handle shorthand enum syntax (e.g. \".center\")\r\n    let value = this.alignment;\r\n    if (typeof value === 'string' && value.startsWith('.')) {\r\n      value = value.substring(1);\r\n    }\r\n\r\n    const map = {\r\n      start: 'flex-start',\r\n      end: 'flex-end',\r\n      center: 'center',\r\n      spaceBetween: 'space-between',\r\n      spaceAround: 'space-around',\r\n      spaceEvenly: 'space-evenly'\r\n    };\r\n    return map[value] || 'flex-start';\r\n  }\r\n\r\n  /**\r\n   * Map run alignment to CSS\r\n   * @private\r\n   */\r\n  _mapRunAlignment() {\r\n    // Handle shorthand enum syntax (e.g. \".center\")\r\n    let value = this.runAlignment;\r\n    if (typeof value === 'string' && value.startsWith('.')) {\r\n      value = value.substring(1);\r\n    }\r\n\r\n    const map = {\r\n      start: 'flex-start',\r\n      end: 'flex-end',\r\n      center: 'center',\r\n      spaceBetween: 'space-between',\r\n      spaceAround: 'space-around',\r\n      spaceEvenly: 'space-evenly'\r\n    };\r\n    return map[value] || 'flex-start';\r\n  }\r\n\r\n  build(context) {\r\n    const elementId = context.element.getElementId();\r\n    const widgetPath = context.element.getWidgetPath();\r\n\r\n    const flexDirection = this.direction === Axis.horizontal ? 'row' : 'column';\r\n    const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';\r\n\r\n    const style = {\r\n      display: 'flex',\r\n      flexDirection,\r\n      flexWrap: 'wrap',\r\n      justifyContent: this._mapAlignment(),\r\n      alignContent: this._mapRunAlignment(),\r\n      gap: `${this.spacing}px ${this.runSpacing}px`,\r\n      direction: this.textDirection === TextDirection.rtl ? 'rtl' : 'ltr',\r\n      overflow: overflowValue\r\n    };\r\n\r\n    const childVNodes = this.children.map((childWidget) => {\r\n      const childElement = childWidget.createElement(context.element, context.element.runtime);\r\n      childElement.mount(context.element);\r\n      return childElement.performRebuild();\r\n    });\r\n\r\n    return new VNode({\r\n      tag: 'div',\r\n      props: {\r\n        style,\r\n        'data-element-id': elementId,\r\n        'data-widget-path': widgetPath,\r\n        'data-widget': 'Wrap',\r\n        'data-direction': this.direction,\r\n        'data-alignment': this.alignment,\r\n        'data-spacing': this.spacing\r\n      },\r\n      children: childVNodes,\r\n      key: this.key\r\n    });\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({ name: 'direction', value: this.direction });\r\n    properties.push({ name: 'alignment', value: this.alignment });\r\n    properties.push({ name: 'spacing', value: this.spacing });\r\n    properties.push({ name: 'runAlignment', value: this.runAlignment });\r\n    properties.push({ name: 'runSpacing', value: this.runSpacing });\r\n    properties.push({ name: 'childCount', value: this.children.length });\r\n  }\r\n\r\n  createElement(parent, runtime) {\r\n    return new WrapElement(this, parent, runtime);\r\n  }\r\n}\r\n\r\nclass WrapElement extends Element {\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// FLOW DELEGATE BASE CLASS\r\n// ============================================================================\r\n\r\nclass FlowDelegate {\r\n  constructor() {\r\n    if (new.target === FlowDelegate) {\r\n      throw new Error('FlowDelegate is abstract');\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get size for the flow\r\n   */\r\n  getSize(constraints) {\r\n    throw new Error('getSize() must be implemented');\r\n  }\r\n\r\n  /**\r\n   * Perform layout on children\r\n   */\r\n  paintChildren(context, sizes) {\r\n    throw new Error('paintChildren() must be implemented');\r\n  }\r\n\r\n  /**\r\n   * Check if should repaint\r\n   */\r\n  shouldRepaint(oldDelegate) {\r\n    return true;\r\n  }\r\n\r\n  /**\r\n   * Check if should reflow\r\n   */\r\n  shouldReflow(oldDelegate) {\r\n    return true;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// FLOW WIDGET\r\n// ============================================================================\r\n\r\nclass Flow extends Widget {\r\n  constructor({\r\n    key = null,\r\n    delegate = null,\r\n    clipBehavior = Clip.hardEdge,\r\n    children = []\r\n  } = {}) {\r\n    super(key);\r\n\r\n    if (!delegate) {\r\n      throw new Error('Flow requires a delegate');\r\n    }\r\n\r\n    if (!(delegate instanceof FlowDelegate)) {\r\n      throw new Error('delegate must be an instance of FlowDelegate');\r\n    }\r\n\r\n    this.delegate = delegate;\r\n    this.clipBehavior = clipBehavior;\r\n    this.children = children || [];\r\n  }\r\n\r\n  build(context) {\r\n    const elementId = context.element.getElementId();\r\n    const widgetPath = context.element.getWidgetPath();\r\n\r\n    const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';\r\n\r\n    const style = {\r\n      position: 'relative',\r\n      display: 'inline-block',\r\n      overflow: overflowValue\r\n    };\r\n\r\n    // Build child VNodes with absolute positioning\r\n    const childVNodes = this.children.map((childWidget, index) => {\r\n      const childElement = childWidget.createElement(context.element, context.element.runtime);\r\n      childElement.mount(context.element);\r\n      const childVNode = childElement.performRebuild();\r\n\r\n      return new VNode({\r\n        tag: 'div',\r\n        props: {\r\n          style: {\r\n            position: 'absolute',\r\n            left: 0,\r\n            top: 0\r\n          },\r\n          'data-flow-index': index\r\n        },\r\n        children: [childVNode]\r\n      });\r\n    });\r\n\r\n    return new VNode({\r\n      tag: 'div',\r\n      props: {\r\n        style,\r\n        'data-element-id': elementId,\r\n        'data-widget-path': widgetPath,\r\n        'data-widget': 'Flow',\r\n        'data-clip-behavior': this.clipBehavior,\r\n        'data-child-count': this.children.length\r\n      },\r\n      children: childVNodes,\r\n      key: this.key\r\n    });\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({ name: 'delegate', value: this.delegate.constructor.name });\r\n    properties.push({ name: 'clipBehavior', value: this.clipBehavior });\r\n    properties.push({ name: 'childCount', value: this.children.length });\r\n  }\r\n\r\n  createElement(parent, runtime) {\r\n    return new FlowElement(this, parent, runtime);\r\n  }\r\n}\r\n\r\nclass FlowElement extends Element {\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport {\r\n  Flex,\r\n  FlexElement,\r\n  RenderFlex,\r\n  Row,\r\n  Column,\r\n  Flexible,\r\n  FlexibleElement,\r\n  FlexParentData,\r\n  Expanded,\r\n  Wrap,\r\n  WrapElement,\r\n  Flow,\r\n  FlowElement,\r\n  FlowDelegate,\r\n  MainAxisSize\r\n};"],
-  "mappings": "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",
-  "names": ["Widget", "Element", "VNode", "Axis", "TextDirection", "VerticalDirection", "Clip", "MainAxisAlignment", "CrossAxisAlignment", "FlexFit", "WrapAlignment", "WrapCrossAlignment", "MainAxisSize", "FlexParentData", "RenderFlex", "direction", "mainAxisAlignment", "mainAxisSize", "crossAxisAlignment", "textDirection", "verticalDirection", "textBaseline", "clipBehavior", "spacing", "child", "index", "Flex", "key", "children", "context", "renderObject", "elementId", "widgetPath", "justifyContent", "alignItems", "flexDirection", "overflowValue", "style", "childVNodes", "childWidget", "idx", "childElement", "childVNode", "childStyle", "Flexible", "value", "properties", "parent", "runtime", "FlexElement", "Row", "options", "Column", "flex", "fit", "parentData", "needsLayout", "FlexibleElement", "Expanded", "Wrap", "alignment", "runAlignment", "runSpacing", "WrapElement", "FlowDelegate", "constraints", "sizes", "oldDelegate", "Flow", "delegate", "FlowElement"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/opacity.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/opacity.js
deleted file mode 100644
index a6de78eb..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/opacity.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{ProxyWidget as l}from"../../core/widget_element.js";import{VNode as r}from"@flutterjs/vdom/vnode";const o={clear:"clear",src:"src",dst:"dst",srcOver:"source-over",dstOver:"destination-over",srcIn:"source-in",dstIn:"destination-in",srcOut:"source-out",dstOut:"destination-out",srcATop:"source-atop",dstATop:"destination-atop",xor:"xor",plus:"lighter",modulate:"multiply",screen:"screen",overlay:"overlay",darken:"darken",lighten:"lighten",colorDodge:"color-dodge",colorBurn:"color-burn",hardLight:"hard-light",softLight:"soft-light",difference:"difference",exclusion:"exclusion",multiply:"multiply",hue:"hue",saturation:"saturation",color:"color",luminosity:"luminosity"};class d extends l{constructor({key:e=null,opacity:t=1,alwaysIncludeSemantics:i=!1,child:s=null}={}){if(super({key:e,child:s}),typeof t!="number"||t<0||t>1)throw new Error(`Opacity must be between 0.0 and 1.0, got: ${t}`);this.opacity=t,this.alwaysIncludeSemantics=i,this._renderObject=null}createRenderObject(e){return new c({opacity:this.opacity,alwaysIncludeSemantics:this.alwaysIncludeSemantics})}updateRenderObject(e,t){t.opacity=this.opacity,t.alwaysIncludeSemantics=this.alwaysIncludeSemantics}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);let t=null;if(this.child)if(this.child.createElement){const n=this.child.createElement(e.element,e.element.runtime);n.mount(e.element),t=n.performRebuild()}else t=this.child;const i=e.element.getElementId(),s=e.element.getWidgetPath();return new r({tag:"div",props:{style:{opacity:this.opacity,transition:"opacity 0.2s ease-in-out"},"data-element-id":i,"data-widget-path":s,"data-widget":"Opacity","data-opacity":this.opacity,"data-always-include-semantics":this.alwaysIncludeSemantics,role:this.alwaysIncludeSemantics?"img":void 0,"aria-opacity":this.alwaysIncludeSemantics?this.opacity:void 0},children:t?[t]:[],key:this.key})}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"opacity",value:this.opacity}),this.alwaysIncludeSemantics&&e.push({name:"alwaysIncludeSemantics",value:this.alwaysIncludeSemantics,tooltip:"Include semantics even with 0 opacity"})}createElement(e,t){return new u(this,e,t)}}class c{constructor({opacity:e=1,alwaysIncludeSemantics:t=!1}={}){this.opacity=e,this.alwaysIncludeSemantics=t}applyToElement(e){e&&(e.style.opacity=this.opacity)}debugInfo(){return{type:"RenderOpacity",opacity:this.opacity,alwaysIncludeSemantics:this.alwaysIncludeSemantics}}}class u extends l.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}}export{o as BlendMode,d as Opacity,c as RenderOpacity};
-//# sourceMappingURL=opacity.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/opacity.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/opacity.js.map
deleted file mode 100644
index d2b2c078..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/opacity.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/opacity.js"],
-  "sourcesContent": ["import { ProxyWidget } from '../../core/widget_element.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\n\r\n// ============================================================================\r\n// BLEND MODE ENUM\r\n// Maps Flutter blend modes to CSS mix-blend-mode values\r\n// ============================================================================\r\n\r\nconst BlendMode = {\r\n    clear: 'clear',\r\n    src: 'src',\r\n    dst: 'dst',\r\n    srcOver: 'source-over',\r\n    dstOver: 'destination-over',\r\n    srcIn: 'source-in',\r\n    dstIn: 'destination-in',\r\n    srcOut: 'source-out',\r\n    dstOut: 'destination-out',\r\n    srcATop: 'source-atop',\r\n    dstATop: 'destination-atop',\r\n    xor: 'xor',\r\n    plus: 'lighter',\r\n    modulate: 'multiply',\r\n    screen: 'screen',\r\n    overlay: 'overlay',\r\n    darken: 'darken',\r\n    lighten: 'lighten',\r\n    colorDodge: 'color-dodge',\r\n    colorBurn: 'color-burn',\r\n    hardLight: 'hard-light',\r\n    softLight: 'soft-light',\r\n    difference: 'difference',\r\n    exclusion: 'exclusion',\r\n    multiply: 'multiply',\r\n    hue: 'hue',\r\n    saturation: 'saturation',\r\n    color: 'color',\r\n    luminosity: 'luminosity'\r\n};\r\n\r\n// ============================================================================\r\n// OPACITY WIDGET\r\n// Applies opacity to child widget (Flutter-like behavior)\r\n// ============================================================================\r\n\r\nclass Opacity extends ProxyWidget {\r\n    constructor({ key = null, opacity = 1.0, alwaysIncludeSemantics = false, child = null } = {}) {\r\n        super({ key, child });\r\n\r\n        // Validate opacity is between 0 and 1\r\n        if (typeof opacity !== 'number' || opacity < 0.0 || opacity > 1.0) {\r\n            throw new Error(\r\n                `Opacity must be between 0.0 and 1.0, got: ${opacity}`\r\n            );\r\n        }\r\n\r\n        this.opacity = opacity;\r\n        this.alwaysIncludeSemantics = alwaysIncludeSemantics;\r\n        this._renderObject = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object for opacity\r\n     */\r\n    createRenderObject(context) {\r\n        return new RenderOpacity({\r\n            opacity: this.opacity,\r\n            alwaysIncludeSemantics: this.alwaysIncludeSemantics\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Update render object when widget properties change\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.opacity = this.opacity;\r\n        renderObject.alwaysIncludeSemantics = this.alwaysIncludeSemantics;\r\n    }\r\n\r\n    /**\r\n     * Build the widget tree\r\n     */\r\n    build(context) {\r\n        // Create or update render object\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        // Build child widget\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            if (this.child.createElement) {\r\n                const childElement = this.child.createElement(context.element, context.element.runtime);\r\n                childElement.mount(context.element);\r\n                childVNode = childElement.performRebuild();\r\n            } else {\r\n                childVNode = this.child;\r\n            }\r\n        }\r\n\r\n        // Apply opacity styling\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style: {\r\n                    opacity: this.opacity,\r\n                    transition: 'opacity 0.2s ease-in-out'\r\n                },\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'Opacity',\r\n                'data-opacity': this.opacity,\r\n                'data-always-include-semantics': this.alwaysIncludeSemantics,\r\n                role: this.alwaysIncludeSemantics ? 'img' : undefined,\r\n                'aria-opacity': this.alwaysIncludeSemantics ? this.opacity : undefined\r\n            },\r\n            children: childVNode ? [childVNode] : [],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({\r\n            name: 'opacity',\r\n            value: this.opacity\r\n        });\r\n\r\n        if (this.alwaysIncludeSemantics) {\r\n            properties.push({\r\n                name: 'alwaysIncludeSemantics',\r\n                value: this.alwaysIncludeSemantics,\r\n                tooltip: 'Include semantics even with 0 opacity'\r\n            });\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new OpacityElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER OPACITY\r\n// Represents the render object for opacity transformation\r\n// ============================================================================\r\n\r\nclass RenderOpacity {\r\n    constructor({ opacity = 1.0, alwaysIncludeSemantics = false } = {}) {\r\n        this.opacity = opacity;\r\n        this.alwaysIncludeSemantics = alwaysIncludeSemantics;\r\n    }\r\n\r\n    /**\r\n     * Apply opacity to a DOM element\r\n     */\r\n    applyToElement(element) {\r\n        if (element) {\r\n            element.style.opacity = this.opacity;\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Get debug info\r\n     */\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderOpacity',\r\n            opacity: this.opacity,\r\n            alwaysIncludeSemantics: this.alwaysIncludeSemantics\r\n        };\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// OPACITY ELEMENT\r\n// Element for opacity widget\r\n// ============================================================================\r\n\r\nclass OpacityElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n}\r\n\r\nexport { Opacity, RenderOpacity, BlendMode };"],
-  "mappings": "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",
-  "names": ["ProxyWidget", "VNode", "BlendMode", "Opacity", "key", "opacity", "alwaysIncludeSemantics", "child", "context", "RenderOpacity", "renderObject", "childVNode", "childElement", "elementId", "widgetPath", "properties", "parent", "runtime", "OpacityElement", "element"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/padding.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/padding.js
deleted file mode 100644
index fdb707e0..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/padding.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{Widget as s}from"../../core/widget_element.js";import{VNode as a}from"@flutterjs/vdom/vnode";import{EdgeInsets as o}from"../../utils/edge_insets.js";import{Element as g}from"@flutterjs/runtime";class m extends s{constructor({key:e=null,padding:t=null,child:i=null}={}){if(super(e),!t)throw new Error("Padding requires padding parameter");if(!(t instanceof o))throw new Error(`Padding requires an EdgeInsets instance, got: ${typeof t}`);this.padding=t,this.child=i}build(e){const t=e.element.getElementId(),i=e.element.getWidgetPath();let d=null;if(this.child){const r=this.child.createElement(e.element,e.element.runtime);r.mount(e.element),d=r.performRebuild()}const l={padding:this.padding.toCSSShorthand(),boxSizing:"border-box"};return new a({tag:"div",props:{style:l,"data-element-id":t,"data-widget-path":i,"data-widget":"Padding"},children:d?[d]:[],key:this.key})}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"padding",value:this.padding.toString()})}createElement(e,t){return new h(this,e,t)}}class h extends g{performRebuild(){return this.widget.build(this.context)}}class u{constructor({padding:e=null}={}){this.padding=e}}export{m as Padding,u as RenderPadding};
-//# sourceMappingURL=padding.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/padding.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/padding.js.map
deleted file mode 100644
index 2c767d95..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/padding.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/padding.js"],
-  "sourcesContent": ["import { Widget } from '../../core/widget_element.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { EdgeInsets } from '../../utils/edge_insets.js';\r\nimport { Element } from '@flutterjs/runtime';\r\n\r\n// ============================================================================\r\n// PADDING WIDGET\r\n// ============================================================================\r\n\r\nclass Padding extends Widget {\r\n    constructor({\r\n        key = null,\r\n        padding = null,\r\n        child = null\r\n    } = {}) {\r\n        super(key);\r\n\r\n        if (!padding) {\r\n            throw new Error('Padding requires padding parameter');\r\n        }\r\n\r\n        if (!(padding instanceof EdgeInsets)) {\r\n            throw new Error(\r\n                `Padding requires an EdgeInsets instance, got: ${typeof padding}`\r\n            );\r\n        }\r\n\r\n        this.padding = padding;\r\n        this.child = child;\r\n    }\r\n\r\n    /**\r\n     * Build widget tree - following DecoratedBox pattern exactly\r\n     */\r\n    build(context) {\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const paddingCSS = this.padding.toCSSShorthand();\r\n\r\n        const style = {\r\n            padding: paddingCSS,\r\n            boxSizing: 'border-box'\r\n        };\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style,\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'Padding'\r\n            },\r\n            children: childVNode ? [childVNode] : [],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'padding', value: this.padding.toString() });\r\n    }\r\n\r\n    createElement(parent, runtime) {\r\n        return new PaddingElement(this, parent, runtime);\r\n    }\r\n}\r\n\r\nclass PaddingElement extends Element {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER PADDING (stub for compatibility)\r\n// ============================================================================\r\n\r\nclass RenderPadding {\r\n    constructor({ padding = null } = {}) {\r\n        this.padding = padding;\r\n    }\r\n}\r\n\r\nexport { Padding, RenderPadding };"],
-  "mappings": "AAAA,OAAS,UAAAA,MAAc,+BACvB,OAAS,SAAAC,MAAa,wBACtB,OAAS,cAAAC,MAAkB,6BAC3B,OAAS,WAAAC,MAAe,qBAMxB,MAAMC,UAAgBJ,CAAO,CACzB,YAAY,CACR,IAAAK,EAAM,KACN,QAAAC,EAAU,KACV,MAAAC,EAAQ,IACZ,EAAI,CAAC,EAAG,CAGJ,GAFA,MAAMF,CAAG,EAEL,CAACC,EACD,MAAM,IAAI,MAAM,oCAAoC,EAGxD,GAAI,EAAEA,aAAmBJ,GACrB,MAAM,IAAI,MACN,iDAAiD,OAAOI,CAAO,EACnE,EAGJ,KAAK,QAAUA,EACf,KAAK,MAAQC,CACjB,CAKA,MAAMC,EAAS,CACX,MAAMC,EAAYD,EAAQ,QAAQ,aAAa,EACzCE,EAAaF,EAAQ,QAAQ,cAAc,EAEjD,IAAIG,EAAa,KACjB,GAAI,KAAK,MAAO,CACZ,MAAMC,EAAe,KAAK,MAAM,cAAcJ,EAAQ,QAASA,EAAQ,QAAQ,OAAO,EACtFI,EAAa,MAAMJ,EAAQ,OAAO,EAClCG,EAAaC,EAAa,eAAe,CAC7C,CAIA,MAAMC,EAAQ,CACV,QAHe,KAAK,QAAQ,eAAe,EAI3C,UAAW,YACf,EAEA,OAAO,IAAIZ,EAAM,CACb,IAAK,MACL,MAAO,CACH,MAAAY,EACA,kBAAmBJ,EACnB,mBAAoBC,EACpB,cAAe,SACnB,EACA,SAAUC,EAAa,CAACA,CAAU,EAAI,CAAC,EACvC,IAAK,KAAK,GACd,CAAC,CACL,CAEA,oBAAoBG,EAAY,CAC5B,MAAM,oBAAoBA,CAAU,EACpCA,EAAW,KAAK,CAAE,KAAM,UAAW,MAAO,KAAK,QAAQ,SAAS,CAAE,CAAC,CACvE,CAEA,cAAcC,EAAQC,EAAS,CAC3B,OAAO,IAAIC,EAAe,KAAMF,EAAQC,CAAO,CACnD,CACJ,CAEA,MAAMC,UAAuBd,CAAQ,CACjC,gBAAiB,CACb,OAAO,KAAK,OAAO,MAAM,KAAK,OAAO,CACzC,CACJ,CAMA,MAAMe,CAAc,CAChB,YAAY,CAAE,QAAAZ,EAAU,IAAK,EAAI,CAAC,EAAG,CACjC,KAAK,QAAUA,CACnB,CACJ",
-  "names": ["Widget", "VNode", "EdgeInsets", "Element", "Padding", "key", "padding", "child", "context", "elementId", "widgetPath", "childVNode", "childElement", "style", "properties", "parent", "runtime", "PaddingElement", "RenderPadding"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/physical_model_shape.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/physical_model_shape.js
deleted file mode 100644
index 97a8d0e2..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/physical_model_shape.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{ProxyWidget as c}from"../../core/widget_element.js";import{VNode as m}from"@flutterjs/vdom/vnode";import{CustomClipper as g}from"./clip.js";import{Clip as a,BoxShape as d,Color as u}from"../../utils/utils.js";class f extends c{constructor({key:e=null,shape:t=d.rectangle,clipBehavior:i=a.none,borderRadius:o=null,elevation:r=0,color:l=null,shadowColor:n=null,child:s=null}={}){if(super({key:e,child:s}),r<0)throw new Error(`elevation must be >= 0.0, got: ${r}`);if(!Object.values(d).includes(t))throw new Error(`Invalid BoxShape: ${t}`);if(!Object.values(a).includes(i))throw new Error(`Invalid clipBehavior: ${i}`);this.shape=t,this.clipBehavior=i,this.borderRadius=o||{all:0},this.elevation=r,this.color=l||new u("#FFFFFF"),this.shadowColor=n||new u("#FF000000"),this._renderObject=null}createRenderObject(e){return new w({shape:this.shape,clipBehavior:this.clipBehavior,borderRadius:this.borderRadius,elevation:this.elevation,color:this.color,shadowColor:this.shadowColor})}updateRenderObject(e,t){t.shape=this.shape,t.clipBehavior=this.clipBehavior,t.borderRadius=this.borderRadius,t.elevation=this.elevation,t.color=this.color,t.shadowColor=this.shadowColor}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);let t=null;if(this.child){const v=this.child.createElement(e.element,e.element.runtime);v.mount(e.element),t=v.performRebuild()}const i=e.element.getElementId(),o=e.element.getWidgetPath(),r=this._generateBoxShadow(),l=this._getBorderRadiusCSS(),n=this.shape===d.circle?"50%":l,s=this.clipBehavior===a.none?"visible":"hidden",p={backgroundColor:this.color.toCSSString(),boxShadow:r,borderRadius:n,overflow:s,position:"relative"};return new m({tag:"div",props:{style:p,"data-element-id":i,"data-widget-path":o,"data-widget":"PhysicalModel","data-shape":this.shape,"data-elevation":this.elevation,"data-clip-behavior":this.clipBehavior},children:t?[t]:[],key:this.key})}_generateBoxShadow(){if(this.elevation===0)return"none";const e=[],t=.2,i=.14,o=.12,r=Math.round(this.elevation),l=Math.round(this.elevation*.5);e.push(`0 ${l}px ${r}px rgba(0, 0, 0, ${o})`);const n=Math.round(this.elevation*1.5),s=Math.round(this.elevation*.75);e.push(`0 ${s}px ${n}px rgba(0, 0, 0, ${i})`);const p=Math.round(this.elevation*2);return e.push(`0 0 ${p}px rgba(0, 0, 0, ${t})`),e.join(", ")}_getBorderRadiusCSS(){if(typeof this.borderRadius=="number")return`${this.borderRadius}px`;if(this.borderRadius.all!==void 0)return`${this.borderRadius.all}px`;const{topLeft:e=0,topRight:t=0,bottomLeft:i=0,bottomRight:o=0}=this.borderRadius;return`${e}px ${t}px ${o}px ${i}px`}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"shape",value:this.shape}),e.push({name:"elevation",value:this.elevation}),e.push({name:"color",value:this.color.toString()}),e.push({name:"shadowColor",value:this.shadowColor.toString()}),e.push({name:"clipBehavior",value:this.clipBehavior})}createElement(e,t){return new C(this,e,t)}}class w{constructor({shape:e=d.rectangle,clipBehavior:t=a.none,borderRadius:i=null,elevation:o=0,color:r=null,shadowColor:l=null}={}){this.shape=e,this.clipBehavior=t,this.borderRadius=i||{all:0},this.elevation=o,this.color=r,this.shadowColor=l}debugInfo(){return{type:"RenderPhysicalModel",shape:this.shape,elevation:this.elevation,clipBehavior:this.clipBehavior,color:this.color?.toString(),shadowColor:this.shadowColor?.toString()}}}class C extends c.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}}class R extends c{constructor({key:e=null,clipper:t=null,clipBehavior:i=a.none,elevation:o=0,color:r=null,shadowColor:l=null,child:n=null}={}){if(super({key:e,child:n}),!t)throw new Error("PhysicalShape requires a clipper");if(!(t instanceof g))throw new Error(`PhysicalShape requires a CustomClipper instance, got: ${typeof t}`);if(o<0)throw new Error(`elevation must be >= 0.0, got: ${o}`);if(!Object.values(a).includes(i))throw new Error(`Invalid clipBehavior: ${i}`);this.clipper=t,this.clipBehavior=i,this.elevation=o,this.color=r||new u("#FFFFFF"),this.shadowColor=l||new u("#FF000000"),this._renderObject=null,this._containerElement=null}createRenderObject(e){return new b({clipper:this.clipper,clipBehavior:this.clipBehavior,elevation:this.elevation,color:this.color,shadowColor:this.shadowColor})}updateRenderObject(e,t){t.clipper=this.clipper,t.clipBehavior=this.clipBehavior,t.elevation=this.elevation,t.color=this.color,t.shadowColor=this.shadowColor}unmountRenderObject(e){e.clipper=null}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);let t=null;if(this.child){const s=this.child.createElement(e.element,e.element.runtime);s.mount(e.element),t=s.performRebuild()}const i=e.element.getElementId(),o=e.element.getWidgetPath(),r=this._generateBoxShadow(),l=this.clipBehavior===a.none?"visible":"hidden",n={backgroundColor:this.color.toCSSString(),boxShadow:r,overflow:l,position:"relative"};return new m({tag:"div",props:{style:n,"data-element-id":i,"data-widget-path":o,"data-widget":"PhysicalShape","data-elevation":this.elevation,"data-clip-behavior":this.clipBehavior,ref:s=>this._onContainerMount(s)},children:t?[t]:[],key:this.key})}_onContainerMount(e){if(!e||!this.clipper)return;this._containerElement=e,this._applyClipper();const t=()=>this._applyClipper();window.addEventListener("resize",t),e._cleanupResize=()=>window.removeEventListener("resize",t)}_applyClipper(){if(!(!this.clipper||!this._containerElement))try{const e=this._containerElement.getBoundingClientRect(),t={width:Math.ceil(e.width)||100,height:Math.ceil(e.height)||100},i=this.clipper.getClip(t);i&&(this._containerElement.style.clipPath=i,this._containerElement.style.WebkitClipPath=i)}catch(e){console.error("Error applying physical shape clipper:",e)}}_generateBoxShadow(){if(this.elevation===0)return"none";const e=[],t=Math.round(this.elevation),i=Math.round(this.elevation*.5);e.push(`0 ${i}px ${t}px rgba(0, 0, 0, 0.12)`);const o=Math.round(this.elevation*1.5),r=Math.round(this.elevation*.75);e.push(`0 ${r}px ${o}px rgba(0, 0, 0, 0.14)`);const l=Math.round(this.elevation*2);return e.push(`0 0 ${l}px rgba(0, 0, 0, 0.2)`),e.join(", ")}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"hasClipper",value:!!this.clipper}),e.push({name:"elevation",value:this.elevation}),e.push({name:"color",value:this.color.toString()}),e.push({name:"shadowColor",value:this.shadowColor.toString()}),e.push({name:"clipBehavior",value:this.clipBehavior})}createElement(e,t){return new B(this,e,t)}}class b{constructor({clipper:e=null,clipBehavior:t=a.none,elevation:i=0,color:o=null,shadowColor:r=null}={}){this.clipper=e,this.clipBehavior=t,this.elevation=i,this.color=o,this.shadowColor=r}debugInfo(){return{type:"RenderPhysicalShape",hasClipper:!!this.clipper,elevation:this.elevation,clipBehavior:this.clipBehavior,color:this.color?.toString(),shadowColor:this.shadowColor?.toString()}}}class B extends c.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}detach(){this.widget._containerElement&&this.widget._containerElement._cleanupResize&&this.widget._containerElement._cleanupResize(),super.detach()}}export{f as PhysicalModel,R as PhysicalShape,w as RenderPhysicalModel,b as RenderPhysicalShape};
-//# sourceMappingURL=physical_model_shape.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/physical_model_shape.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/physical_model_shape.js.map
deleted file mode 100644
index 2ee7e8da..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/physical_model_shape.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/physical_model_shape.js"],
-  "sourcesContent": ["\r\nimport { ProxyWidget } from '../../core/widget_element.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { CustomClipper } from './clip.js';\r\nimport {Clip,BoxShape,Color } from '../../utils/utils.js';\r\n\r\n\r\n// ============================================================================\r\n// PHYSICAL MODEL WIDGET\r\n// Creates a physical material with elevation and color\r\n// ============================================================================\r\n\r\nclass PhysicalModel extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        shape = BoxShape.rectangle,\r\n        clipBehavior = Clip.none,\r\n        borderRadius = null,\r\n        elevation = 0.0,\r\n        color = null,\r\n        shadowColor = null,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (elevation < 0.0) {\r\n            throw new Error(`elevation must be >= 0.0, got: ${elevation}`);\r\n        }\r\n\r\n        if (!Object.values(BoxShape).includes(shape)) {\r\n            throw new Error(`Invalid BoxShape: ${shape}`);\r\n        }\r\n\r\n        if (!Object.values(Clip).includes(clipBehavior)) {\r\n            throw new Error(`Invalid clipBehavior: ${clipBehavior}`);\r\n        }\r\n\r\n        this.shape = shape;\r\n        this.clipBehavior = clipBehavior;\r\n        this.borderRadius = borderRadius || { all: 0 };\r\n        this.elevation = elevation;\r\n        this.color = color || new Color('#FFFFFF');\r\n        this.shadowColor = shadowColor || new Color('#FF000000');\r\n        this._renderObject = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return new RenderPhysicalModel({\r\n            shape: this.shape,\r\n            clipBehavior: this.clipBehavior,\r\n            borderRadius: this.borderRadius,\r\n            elevation: this.elevation,\r\n            color: this.color,\r\n            shadowColor: this.shadowColor\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.shape = this.shape;\r\n        renderObject.clipBehavior = this.clipBehavior;\r\n        renderObject.borderRadius = this.borderRadius;\r\n        renderObject.elevation = this.elevation;\r\n        renderObject.color = this.color;\r\n        renderObject.shadowColor = this.shadowColor;\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        // Generate box shadow based on elevation\r\n        const boxShadow = this._generateBoxShadow();\r\n\r\n        // Generate border radius\r\n        const borderRadiusCss = this._getBorderRadiusCSS();\r\n\r\n        // Generate clip path for shape\r\n        const borderRadiusValue = this.shape === BoxShape.circle ? '50%' : borderRadiusCss;\r\n\r\n        // Overflow handling\r\n        const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';\r\n\r\n        const style = {\r\n            backgroundColor: this.color.toCSSString(),\r\n            boxShadow: boxShadow,\r\n            borderRadius: borderRadiusValue,\r\n            overflow: overflowValue,\r\n            position: 'relative'\r\n        };\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style,\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'PhysicalModel',\r\n                'data-shape': this.shape,\r\n                'data-elevation': this.elevation,\r\n                'data-clip-behavior': this.clipBehavior\r\n            },\r\n            children: childVNode ? [childVNode] : [],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Generate box shadow based on elevation\r\n     * @private\r\n     */\r\n    _generateBoxShadow() {\r\n        if (this.elevation === 0) {\r\n            return 'none';\r\n        }\r\n\r\n        // Material Design elevation mapping\r\n        // Higher elevation = larger blur and offset\r\n        const shadows = [];\r\n        const shadowAlpha = 0.2;\r\n        const penumbraAlpha = 0.14;\r\n        const umbraAlpha = 0.12;\r\n\r\n        // Umbra shadow (darkest, closest)\r\n        const umbraBlur = Math.round(this.elevation);\r\n        const umbraOffset = Math.round(this.elevation * 0.5);\r\n        shadows.push(\r\n            `0 ${umbraOffset}px ${umbraBlur}px rgba(0, 0, 0, ${umbraAlpha})`\r\n        );\r\n\r\n        // Penumbra shadow (medium)\r\n        const penumbraBlur = Math.round(this.elevation * 1.5);\r\n        const penumbraOffset = Math.round(this.elevation * 0.75);\r\n        shadows.push(\r\n            `0 ${penumbraOffset}px ${penumbraBlur}px rgba(0, 0, 0, ${penumbraAlpha})`\r\n        );\r\n\r\n        // Ambient shadow (lightest, farthest)\r\n        const ambientBlur = Math.round(this.elevation * 2);\r\n        shadows.push(\r\n            `0 0 ${ambientBlur}px rgba(0, 0, 0, ${shadowAlpha})`\r\n        );\r\n\r\n        return shadows.join(', ');\r\n    }\r\n\r\n    /**\r\n     * Convert border radius to CSS string\r\n     * @private\r\n     */\r\n    _getBorderRadiusCSS() {\r\n        if (typeof this.borderRadius === 'number') {\r\n            return `${this.borderRadius}px`;\r\n        }\r\n\r\n        if (this.borderRadius.all !== undefined) {\r\n            return `${this.borderRadius.all}px`;\r\n        }\r\n\r\n        const {\r\n            topLeft = 0,\r\n            topRight = 0,\r\n            bottomLeft = 0,\r\n            bottomRight = 0\r\n        } = this.borderRadius;\r\n\r\n        return `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`;\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'shape', value: this.shape });\r\n        properties.push({ name: 'elevation', value: this.elevation });\r\n        properties.push({ name: 'color', value: this.color.toString() });\r\n        properties.push({ name: 'shadowColor', value: this.shadowColor.toString() });\r\n        properties.push({ name: 'clipBehavior', value: this.clipBehavior });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new PhysicalModelElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER PHYSICAL MODEL\r\n// ============================================================================\r\n\r\nclass RenderPhysicalModel {\r\n    constructor({\r\n        shape = BoxShape.rectangle,\r\n        clipBehavior = Clip.none,\r\n        borderRadius = null,\r\n        elevation = 0.0,\r\n        color = null,\r\n        shadowColor = null\r\n    } = {}) {\r\n        this.shape = shape;\r\n        this.clipBehavior = clipBehavior;\r\n        this.borderRadius = borderRadius || { all: 0 };\r\n        this.elevation = elevation;\r\n        this.color = color;\r\n        this.shadowColor = shadowColor;\r\n    }\r\n\r\n    /**\r\n     * Debug info\r\n     */\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderPhysicalModel',\r\n            shape: this.shape,\r\n            elevation: this.elevation,\r\n            clipBehavior: this.clipBehavior,\r\n            color: this.color?.toString(),\r\n            shadowColor: this.shadowColor?.toString()\r\n        };\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// PHYSICAL MODEL ELEMENT\r\n// ============================================================================\r\n\r\nclass PhysicalModelElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// PHYSICAL SHAPE WIDGET\r\n// Creates a physical shape with custom clipper\r\n// ============================================================================\r\n\r\nclass PhysicalShape extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        clipper = null,\r\n        clipBehavior = Clip.none,\r\n        elevation = 0.0,\r\n        color = null,\r\n        shadowColor = null,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (!clipper) {\r\n            throw new Error('PhysicalShape requires a clipper');\r\n        }\r\n\r\n        if (!(clipper instanceof CustomClipper)) {\r\n            throw new Error(\r\n                `PhysicalShape requires a CustomClipper instance, got: ${typeof clipper}`\r\n            );\r\n        }\r\n\r\n        if (elevation < 0.0) {\r\n            throw new Error(`elevation must be >= 0.0, got: ${elevation}`);\r\n        }\r\n\r\n        if (!Object.values(Clip).includes(clipBehavior)) {\r\n            throw new Error(`Invalid clipBehavior: ${clipBehavior}`);\r\n        }\r\n\r\n        this.clipper = clipper;\r\n        this.clipBehavior = clipBehavior;\r\n        this.elevation = elevation;\r\n        this.color = color || new Color('#FFFFFF');\r\n        this.shadowColor = shadowColor || new Color('#FF000000');\r\n        this._renderObject = null;\r\n        this._containerElement = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return new RenderPhysicalShape({\r\n            clipper: this.clipper,\r\n            clipBehavior: this.clipBehavior,\r\n            elevation: this.elevation,\r\n            color: this.color,\r\n            shadowColor: this.shadowColor\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.clipper = this.clipper;\r\n        renderObject.clipBehavior = this.clipBehavior;\r\n        renderObject.elevation = this.elevation;\r\n        renderObject.color = this.color;\r\n        renderObject.shadowColor = this.shadowColor;\r\n    }\r\n\r\n    /**\r\n     * Unmount and cleanup\r\n     */\r\n    unmountRenderObject(renderObject) {\r\n        renderObject.clipper = null;\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        // Generate box shadow based on elevation\r\n        const boxShadow = this._generateBoxShadow();\r\n\r\n        // Overflow handling\r\n        const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';\r\n\r\n        const style = {\r\n            backgroundColor: this.color.toCSSString(),\r\n            boxShadow: boxShadow,\r\n            overflow: overflowValue,\r\n            position: 'relative'\r\n        };\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style,\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'PhysicalShape',\r\n                'data-elevation': this.elevation,\r\n                'data-clip-behavior': this.clipBehavior,\r\n                ref: (el) => this._onContainerMount(el)\r\n            },\r\n            children: childVNode ? [childVNode] : [],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Mount container and apply custom clipper\r\n     * @private\r\n     */\r\n    _onContainerMount(el) {\r\n        if (!el || !this.clipper) return;\r\n\r\n        this._containerElement = el;\r\n        this._applyClipper();\r\n\r\n        // Re-apply on resize\r\n        const resizeHandler = () => this._applyClipper();\r\n        window.addEventListener('resize', resizeHandler);\r\n        el._cleanupResize = () => window.removeEventListener('resize', resizeHandler);\r\n    }\r\n\r\n    /**\r\n     * Apply custom clipper\r\n     * @private\r\n     */\r\n    _applyClipper() {\r\n        if (!this.clipper || !this._containerElement) return;\r\n\r\n        try {\r\n            const rect = this._containerElement.getBoundingClientRect();\r\n            const size = {\r\n                width: Math.ceil(rect.width) || 100,\r\n                height: Math.ceil(rect.height) || 100\r\n            };\r\n\r\n            const clipPath = this.clipper.getClip(size);\r\n            if (clipPath) {\r\n                this._containerElement.style.clipPath = clipPath;\r\n                this._containerElement.style.WebkitClipPath = clipPath;\r\n            }\r\n        } catch (error) {\r\n            console.error('Error applying physical shape clipper:', error);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Generate box shadow based on elevation\r\n     * @private\r\n     */\r\n    _generateBoxShadow() {\r\n        if (this.elevation === 0) {\r\n            return 'none';\r\n        }\r\n\r\n        const shadows = [];\r\n        const umbraBlur = Math.round(this.elevation);\r\n        const umbraOffset = Math.round(this.elevation * 0.5);\r\n        shadows.push(`0 ${umbraOffset}px ${umbraBlur}px rgba(0, 0, 0, 0.12)`);\r\n\r\n        const penumbraBlur = Math.round(this.elevation * 1.5);\r\n        const penumbraOffset = Math.round(this.elevation * 0.75);\r\n        shadows.push(`0 ${penumbraOffset}px ${penumbraBlur}px rgba(0, 0, 0, 0.14)`);\r\n\r\n        const ambientBlur = Math.round(this.elevation * 2);\r\n        shadows.push(`0 0 ${ambientBlur}px rgba(0, 0, 0, 0.2)`);\r\n\r\n        return shadows.join(', ');\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'hasClipper', value: !!this.clipper });\r\n        properties.push({ name: 'elevation', value: this.elevation });\r\n        properties.push({ name: 'color', value: this.color.toString() });\r\n        properties.push({ name: 'shadowColor', value: this.shadowColor.toString() });\r\n        properties.push({ name: 'clipBehavior', value: this.clipBehavior });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new PhysicalShapeElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER PHYSICAL SHAPE\r\n// ============================================================================\r\n\r\nclass RenderPhysicalShape {\r\n    constructor({\r\n        clipper = null,\r\n        clipBehavior = Clip.none,\r\n        elevation = 0.0,\r\n        color = null,\r\n        shadowColor = null\r\n    } = {}) {\r\n        this.clipper = clipper;\r\n        this.clipBehavior = clipBehavior;\r\n        this.elevation = elevation;\r\n        this.color = color;\r\n        this.shadowColor = shadowColor;\r\n    }\r\n\r\n    /**\r\n     * Debug info\r\n     */\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderPhysicalShape',\r\n            hasClipper: !!this.clipper,\r\n            elevation: this.elevation,\r\n            clipBehavior: this.clipBehavior,\r\n            color: this.color?.toString(),\r\n            shadowColor: this.shadowColor?.toString()\r\n        };\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// PHYSICAL SHAPE ELEMENT\r\n// ============================================================================\r\n\r\nclass PhysicalShapeElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n\r\n    detach() {\r\n        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {\r\n            this.widget._containerElement._cleanupResize();\r\n        }\r\n        super.detach();\r\n    }\r\n}\r\n\r\nexport { PhysicalModel, RenderPhysicalModel, PhysicalShape, RenderPhysicalShape,  };"],
-  "mappings": "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",
-  "names": ["ProxyWidget", "VNode", "CustomClipper", "Clip", "BoxShape", "Color", "PhysicalModel", "key", "shape", "clipBehavior", "borderRadius", "elevation", "color", "shadowColor", "child", "context", "RenderPhysicalModel", "renderObject", "childVNode", "childElement", "elementId", "widgetPath", "boxShadow", "borderRadiusCss", "borderRadiusValue", "overflowValue", "style", "shadows", "shadowAlpha", "penumbraAlpha", "umbraAlpha", "umbraBlur", "umbraOffset", "penumbraBlur", "penumbraOffset", "ambientBlur", "topLeft", "topRight", "bottomLeft", "bottomRight", "properties", "parent", "runtime", "PhysicalModelElement", "PhysicalShape", "clipper", "RenderPhysicalShape", "el", "resizeHandler", "rect", "size", "clipPath", "error", "PhysicalShapeElement"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/positioned.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/positioned.js
deleted file mode 100644
index 282e4791..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/positioned.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{Widget as b,StatelessWidget as v}from"../../core/widget_element.js";import{Element as x}from"@flutterjs/runtime";import"@flutterjs/vdom/vnode";import{TextDirection as g}from"../../utils/utils.js";import"../../utils/geometry.js";class m{constructor(t=0,l=0,i=0,n=0){this.left=t,this.top=l,this.right=i,this.bottom=n}static fill(){return new m(0,0,0,0)}static fromRect(t,l){return new m(t.left,t.top,l.width-t.right,l.height-t.bottom)}toString(){return`RelativeRect(${this.left}, ${this.top}, ${this.right}, ${this.bottom})`}}class w{constructor(){this.left=null,this.top=null,this.right=null,this.bottom=null,this.width=null,this.height=null}isPositioned(){return this.left!==null||this.top!==null||this.right!==null||this.bottom!==null||this.width!==null||this.height!==null}reset(){this.left=null,this.top=null,this.right=null,this.bottom=null,this.width=null,this.height=null}debugInfo(){return{left:this.left,top:this.top,right:this.right,bottom:this.bottom,width:this.width,height:this.height,isPositioned:this.isPositioned()}}}class o extends b{constructor({key:t=null,left:l=null,top:i=null,right:n=null,bottom:h=null,width:s=null,height:e=null,child:u=null}={}){if(super(t),l!==null&&n!==null&&s!==null)throw new Error("Cannot specify left, right, and width simultaneously. Either (left, right, width) or (left, right) or (left, width) is valid.");if(i!==null&&h!==null&&e!==null)throw new Error("Cannot specify top, bottom, and height simultaneously. Either (top, bottom, height) or (top, bottom) or (top, height) is valid.");this.left=l,this.top=i,this.right=n,this.bottom=h,this.width=s,this.height=e,this.child=u}static fill({key:t=null,left:l=0,top:i=0,right:n=0,bottom:h=0,child:s=null}={}){return new o({key:t,left:l,top:i,right:n,bottom:h,child:s})}static fromRect({key:t=null,rect:l=null,child:i=null}={}){if(!l)throw new Error("rect parameter is required");return new o({key:t,left:l.left,top:l.top,width:l.width,height:l.height,right:null,bottom:null,child:i})}static fromRelativeRect({key:t=null,rect:l=null,child:i=null}={}){if(!l)throw new Error("rect parameter is required");return new o({key:t,left:l.left,top:l.top,right:l.right,bottom:l.bottom,width:null,height:null,child:i})}static directional({key:t=null,textDirection:l=g.ltr,start:i=null,top:n=null,end:h=null,bottom:s=null,width:e=null,height:u=null,child:r=null}={}){if(!r)throw new Error("child parameter is required");const a=l===g.rtl,f=a?h:i,d=a?i:h;return new o({key:t,left:f,top:n,right:d,bottom:s,width:e,height:u,child:r})}applyParentData(t){t.parentData||(t.parentData=new w);const l=t.parentData;let i=!1;l.left!==this.left&&(l.left=this.left,i=!0),l.top!==this.top&&(l.top=this.top,i=!0),l.right!==this.right&&(l.right=this.right,i=!0),l.bottom!==this.bottom&&(l.bottom=this.bottom,i=!0),l.width!==this.width&&(l.width=this.width,i=!0),l.height!==this.height&&(l.height=this.height,i=!0),i&&t.parent&&t.parent.markNeedsLayout?.()}build(t){return this.child}get isPurelyPositioned(){return this.width===null&&this.height===null}getPositioningStyle(){const t={position:"absolute"};return this.left!==null&&(t.left=`${this.left}px`),this.top!==null&&(t.top=`${this.top}px`),this.right!==null&&(t.right=`${this.right}px`),this.bottom!==null&&(t.bottom=`${this.bottom}px`),this.width!==null&&(t.width=`${this.width}px`),this.height!==null&&(t.height=`${this.height}px`),t}debugFillProperties(t){super.debugFillProperties(t),this.left!==null&&t.push({name:"left",value:this.left}),this.top!==null&&t.push({name:"top",value:this.top}),this.right!==null&&t.push({name:"right",value:this.right}),this.bottom!==null&&t.push({name:"bottom",value:this.bottom}),this.width!==null&&t.push({name:"width",value:this.width}),this.height!==null&&t.push({name:"height",value:this.height})}createElement(t,l){return new c(this,t,l)}}class c extends x{performRebuild(){return this.widget.build(this.context)}updateRenderObject(t){this.widget.applyParentData&&this.widget.applyParentData(t)}}class y extends v{constructor({key:t=null,start:l=null,top:i=null,end:n=null,bottom:h=null,width:s=null,height:e=null,child:u=null}={}){super(t),this.start=l,this.top=i,this.end=n,this.bottom=h,this.width=s,this.height=e,this.child=u}build(t){if(!this.child)throw new Error("PositionedDirectional requires a child widget");const l=t?.textDirection||g.ltr;return o.directional({textDirection:l,start:this.start,top:this.top,end:this.end,bottom:this.bottom,width:this.width,height:this.height,child:this.child,key:this.key})}debugFillProperties(t){super.debugFillProperties(t),this.start!==null&&t.push({name:"start",value:this.start}),this.top!==null&&t.push({name:"top",value:this.top}),this.end!==null&&t.push({name:"end",value:this.end}),this.bottom!==null&&t.push({name:"bottom",value:this.bottom}),this.width!==null&&t.push({name:"width",value:this.width}),this.height!==null&&t.push({name:"height",value:this.height})}}class P{static resolveConstraints({left:t=null,top:l=null,right:i=null,bottom:n=null,width:h=null,height:s=null,containerWidth:e=0,containerHeight:u=0}={}){let r=t??0,a=l??0,f=h,d=s;return t!==null&&i!==null&&h===null?f=e-t-i:t!==null&&h!==null?f=h:i!==null&&h!==null?r=e-i-h:i!==null&&t===null&&(r=e-(h||0)-i),l!==null&&n!==null&&s===null?d=u-l-n:l!==null&&s!==null?d=s:n!==null&&s!==null?a=u-n-s:n!==null&&l===null&&(a=u-(s||0)-n),{left:r,top:a,width:f||"auto",height:d||"auto"}}static isFullyConstrained({left:t=null,right:l=null,width:i=null,top:n=null,bottom:h=null,height:s=null}={}){return(t!==null&&l!==null||t!==null&&i!==null||l!==null&&i!==null)&&(n!==null&&h!==null||n!==null&&s!==null||h!==null&&s!==null)}}export{o as Positioned,y as PositionedDirectional,c as PositionedElement,P as PositioningHelper,m as RelativeRect,w as StackParentData};
-//# sourceMappingURL=positioned.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/positioned.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/positioned.js.map
deleted file mode 100644
index 3b2d24f8..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/positioned.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/positioned.js"],
-  "sourcesContent": ["import { Widget, StatelessWidget, } from '../../core/widget_element.js';\r\nimport { Element } from \"@flutterjs/runtime\"\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { TextDirection } from '../../utils/utils.js';\r\nimport { Rect } from '../../utils/geometry.js';\r\n\r\n// ============================================================================\r\n// RECT CLASS\r\n// Represents a rectangular region with position and size\r\n// ============================================================================\r\n\r\n\r\n\r\n// ============================================================================\r\n// RELATIVE RECT CLASS\r\n// Represents relative positioning (start, top, end, bottom)\r\n// ============================================================================\r\n\r\nclass RelativeRect {\r\n  constructor(left = 0, top = 0, right = 0, bottom = 0) {\r\n    this.left = left;\r\n    this.top = top;\r\n    this.right = right;\r\n    this.bottom = bottom;\r\n  }\r\n\r\n  /**\r\n   * Create fill (stretch to parent)\r\n   */\r\n  static fill() {\r\n    return new RelativeRect(0, 0, 0, 0);\r\n  }\r\n\r\n  /**\r\n   * Create from rect relative to container\r\n   */\r\n  static fromRect(rect, container) {\r\n    return new RelativeRect(\r\n      rect.left,\r\n      rect.top,\r\n      container.width - rect.right,\r\n      container.height - rect.bottom\r\n    );\r\n  }\r\n\r\n  toString() {\r\n    return `RelativeRect(${this.left}, ${this.top}, ${this.right}, ${this.bottom})`;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// STACK PARENT DATA\r\n// Stores positioning data for children in Stack\r\n// ============================================================================\r\n\r\nclass StackParentData {\r\n  constructor() {\r\n    this.left = null;\r\n    this.top = null;\r\n    this.right = null;\r\n    this.bottom = null;\r\n    this.width = null;\r\n    this.height = null;\r\n  }\r\n\r\n  /**\r\n   * Check if child is positioned\r\n   */\r\n  isPositioned() {\r\n    return this.left !== null || this.top !== null ||\r\n      this.right !== null || this.bottom !== null ||\r\n      this.width !== null || this.height !== null;\r\n  }\r\n\r\n  /**\r\n   * Reset positioning data\r\n   */\r\n  reset() {\r\n    this.left = null;\r\n    this.top = null;\r\n    this.right = null;\r\n    this.bottom = null;\r\n    this.width = null;\r\n    this.height = null;\r\n  }\r\n\r\n  debugInfo() {\r\n    return {\r\n      left: this.left,\r\n      top: this.top,\r\n      right: this.right,\r\n      bottom: this.bottom,\r\n      width: this.width,\r\n      height: this.height,\r\n      isPositioned: this.isPositioned()\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// POSITIONED WIDGET\r\n// Positions a child absolutely within Stack\r\n// ============================================================================\r\n\r\nclass Positioned extends Widget {\r\n  constructor({\r\n    key = null,\r\n    left = null,\r\n    top = null,\r\n    right = null,\r\n    bottom = null,\r\n    width = null,\r\n    height = null,\r\n    child = null\r\n  } = {}) {\r\n    super(key);\r\n\r\n    // Validate constraints\r\n    if (left !== null && right !== null && width !== null) {\r\n      throw new Error(\r\n        'Cannot specify left, right, and width simultaneously. ' +\r\n        'Either (left, right, width) or (left, right) or (left, width) is valid.'\r\n      );\r\n    }\r\n\r\n    if (top !== null && bottom !== null && height !== null) {\r\n      throw new Error(\r\n        'Cannot specify top, bottom, and height simultaneously. ' +\r\n        'Either (top, bottom, height) or (top, bottom) or (top, height) is valid.'\r\n      );\r\n    }\r\n\r\n    this.left = left;\r\n    this.top = top;\r\n    this.right = right;\r\n    this.bottom = bottom;\r\n    this.width = width;\r\n    this.height = height;\r\n    this.child = child;\r\n  }\r\n\r\n  /**\r\n   * Create fill positioned (stretch to parent edges)\r\n   * All edges default to 0.0\r\n   */\r\n  static fill({\r\n    key = null,\r\n    left = 0,\r\n    top = 0,\r\n    right = 0,\r\n    bottom = 0,\r\n    child = null\r\n  } = {}) {\r\n    return new Positioned({\r\n      key,\r\n      left,\r\n      top,\r\n      right,\r\n      bottom,\r\n      child\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Create from Rect\r\n   * Uses rect dimensions as left, top, width, height\r\n   */\r\n  static fromRect({\r\n    key = null,\r\n    rect = null,\r\n    child = null\r\n  } = {}) {\r\n    if (!rect) {\r\n      throw new Error('rect parameter is required');\r\n    }\r\n\r\n    return new Positioned({\r\n      key,\r\n      left: rect.left,\r\n      top: rect.top,\r\n      width: rect.width,\r\n      height: rect.height,\r\n      right: null,\r\n      bottom: null,\r\n      child\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Create from RelativeRect\r\n   * Uses relative positioning (left, top, right, bottom)\r\n   */\r\n  static fromRelativeRect({\r\n    key = null,\r\n    rect = null,\r\n    child = null\r\n  } = {}) {\r\n    if (!rect) {\r\n      throw new Error('rect parameter is required');\r\n    }\r\n\r\n    return new Positioned({\r\n      key,\r\n      left: rect.left,\r\n      top: rect.top,\r\n      right: rect.right,\r\n      bottom: rect.bottom,\r\n      width: null,\r\n      height: null,\r\n      child\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Create directional positioned\r\n   * Converts start/end to left/right based on text direction\r\n   */\r\n  static directional({\r\n    key = null,\r\n    textDirection = TextDirection.ltr,\r\n    start = null,\r\n    top = null,\r\n    end = null,\r\n    bottom = null,\r\n    width = null,\r\n    height = null,\r\n    child = null\r\n  } = {}) {\r\n    if (!child) {\r\n      throw new Error('child parameter is required');\r\n    }\r\n\r\n    // Convert directional to absolute based on text direction\r\n    const isRTL = textDirection === TextDirection.rtl;\r\n    const left = isRTL ? end : start;\r\n    const right = isRTL ? start : end;\r\n\r\n    return new Positioned({\r\n      key,\r\n      left,\r\n      top,\r\n      right,\r\n      bottom,\r\n      width,\r\n      height,\r\n      child\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Apply positioning to parent data\r\n   */\r\n  applyParentData(renderObject) {\r\n    if (!renderObject.parentData) {\r\n      renderObject.parentData = new StackParentData();\r\n    }\r\n\r\n    const parentData = renderObject.parentData;\r\n    let needsLayout = false;\r\n\r\n    // Check and apply left\r\n    if (parentData.left !== this.left) {\r\n      parentData.left = this.left;\r\n      needsLayout = true;\r\n    }\r\n\r\n    // Check and apply top\r\n    if (parentData.top !== this.top) {\r\n      parentData.top = this.top;\r\n      needsLayout = true;\r\n    }\r\n\r\n    // Check and apply right\r\n    if (parentData.right !== this.right) {\r\n      parentData.right = this.right;\r\n      needsLayout = true;\r\n    }\r\n\r\n    // Check and apply bottom\r\n    if (parentData.bottom !== this.bottom) {\r\n      parentData.bottom = this.bottom;\r\n      needsLayout = true;\r\n    }\r\n\r\n    // Check and apply width\r\n    if (parentData.width !== this.width) {\r\n      parentData.width = this.width;\r\n      needsLayout = true;\r\n    }\r\n\r\n    // Check and apply height\r\n    if (parentData.height !== this.height) {\r\n      parentData.height = this.height;\r\n      needsLayout = true;\r\n    }\r\n\r\n    // Request layout update if parent data changed\r\n    if (needsLayout && renderObject.parent) {\r\n      renderObject.parent.markNeedsLayout?.();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Build returns the child widget\r\n   */\r\n  build(context) {\r\n    return this.child;\r\n  }\r\n\r\n  /**\r\n   * Check if this is purely positioned (no size constraints)\r\n   */\r\n  get isPurelyPositioned() {\r\n    return this.width === null && this.height === null;\r\n  }\r\n\r\n  /**\r\n   * Get CSS style object for positioning\r\n   */\r\n  getPositioningStyle() {\r\n    const style = {\r\n      position: 'absolute'\r\n    };\r\n\r\n    if (this.left !== null) style.left = `${this.left}px`;\r\n    if (this.top !== null) style.top = `${this.top}px`;\r\n    if (this.right !== null) style.right = `${this.right}px`;\r\n    if (this.bottom !== null) style.bottom = `${this.bottom}px`;\r\n    if (this.width !== null) style.width = `${this.width}px`;\r\n    if (this.height !== null) style.height = `${this.height}px`;\r\n\r\n    return style;\r\n  }\r\n\r\n  /**\r\n   * Debug properties\r\n   */\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n\r\n    if (this.left !== null) {\r\n      properties.push({ name: 'left', value: this.left });\r\n    }\r\n    if (this.top !== null) {\r\n      properties.push({ name: 'top', value: this.top });\r\n    }\r\n    if (this.right !== null) {\r\n      properties.push({ name: 'right', value: this.right });\r\n    }\r\n    if (this.bottom !== null) {\r\n      properties.push({ name: 'bottom', value: this.bottom });\r\n    }\r\n    if (this.width !== null) {\r\n      properties.push({ name: 'width', value: this.width });\r\n    }\r\n    if (this.height !== null) {\r\n      properties.push({ name: 'height', value: this.height });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Create element\r\n   */\r\n  createElement(parent, runtime) {\r\n    return new PositionedElement(this, parent, runtime);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// POSITIONED ELEMENT\r\n// Element for managing Positioned widget lifecycle\r\n// ============================================================================\r\n\r\nclass PositionedElement extends Element {\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n\r\n  /**\r\n   * Update parent render object with positioning data\r\n   */\r\n  updateRenderObject(renderObject) {\r\n    if (this.widget.applyParentData) {\r\n      this.widget.applyParentData(renderObject);\r\n    }\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// POSITIONED DIRECTIONAL WIDGET\r\n// Directional wrapper around Positioned that resolves text direction\r\n// ============================================================================\r\n\r\nclass PositionedDirectional extends StatelessWidget {\r\n  constructor({\r\n    key = null,\r\n    start = null,\r\n    top = null,\r\n    end = null,\r\n    bottom = null,\r\n    width = null,\r\n    height = null,\r\n    child = null\r\n  } = {}) {\r\n    super(key);\r\n\r\n    this.start = start;\r\n    this.top = top;\r\n    this.end = end;\r\n    this.bottom = bottom;\r\n    this.width = width;\r\n    this.height = height;\r\n    this.child = child;\r\n  }\r\n\r\n  /**\r\n   * Build widget tree\r\n   * Resolves text direction and creates Positioned widget\r\n   */\r\n  build(context) {\r\n    if (!this.child) {\r\n      throw new Error('PositionedDirectional requires a child widget');\r\n    }\r\n\r\n    // Get text direction from context (default LTR)\r\n    const textDirection = context?.textDirection || TextDirection.ltr;\r\n\r\n    // Create Positioned using directional factory\r\n    return Positioned.directional({\r\n      textDirection,\r\n      start: this.start,\r\n      top: this.top,\r\n      end: this.end,\r\n      bottom: this.bottom,\r\n      width: this.width,\r\n      height: this.height,\r\n      child: this.child,\r\n      key: this.key\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Debug properties\r\n   */\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n\r\n    if (this.start !== null) {\r\n      properties.push({ name: 'start', value: this.start });\r\n    }\r\n    if (this.top !== null) {\r\n      properties.push({ name: 'top', value: this.top });\r\n    }\r\n    if (this.end !== null) {\r\n      properties.push({ name: 'end', value: this.end });\r\n    }\r\n    if (this.bottom !== null) {\r\n      properties.push({ name: 'bottom', value: this.bottom });\r\n    }\r\n    if (this.width !== null) {\r\n      properties.push({ name: 'width', value: this.width });\r\n    }\r\n    if (this.height !== null) {\r\n      properties.push({ name: 'height', value: this.height });\r\n    }\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// POSITIONING HELPER CLASS\r\n// Utility for working with positioned children in Stack\r\n// ============================================================================\r\n\r\nclass PositioningHelper {\r\n  /**\r\n   * Resolve absolute positioning constraints\r\n   * Calculates final position and size given container dimensions\r\n   */\r\n  static resolveConstraints({\r\n    left = null,\r\n    top = null,\r\n    right = null,\r\n    bottom = null,\r\n    width = null,\r\n    height = null,\r\n    containerWidth = 0,\r\n    containerHeight = 0\r\n  } = {}) {\r\n    let finalLeft = left ?? 0;\r\n    let finalTop = top ?? 0;\r\n    let finalWidth = width;\r\n    let finalHeight = height;\r\n\r\n    // Resolve horizontal positioning\r\n    if (left !== null && right !== null && width === null) {\r\n      finalWidth = containerWidth - left - right;\r\n    } else if (left !== null && width !== null) {\r\n      finalWidth = width;\r\n    } else if (right !== null && width !== null) {\r\n      finalLeft = containerWidth - right - width;\r\n    } else if (right !== null && left === null) {\r\n      finalLeft = containerWidth - (width || 0) - right;\r\n    }\r\n\r\n    // Resolve vertical positioning\r\n    if (top !== null && bottom !== null && height === null) {\r\n      finalHeight = containerHeight - top - bottom;\r\n    } else if (top !== null && height !== null) {\r\n      finalHeight = height;\r\n    } else if (bottom !== null && height !== null) {\r\n      finalTop = containerHeight - bottom - height;\r\n    } else if (bottom !== null && top === null) {\r\n      finalTop = containerHeight - (height || 0) - bottom;\r\n    }\r\n\r\n    return {\r\n      left: finalLeft,\r\n      top: finalTop,\r\n      width: finalWidth || 'auto',\r\n      height: finalHeight || 'auto'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Check if positioned widget is fully constrained\r\n   */\r\n  static isFullyConstrained({\r\n    left = null,\r\n    right = null,\r\n    width = null,\r\n    top = null,\r\n    bottom = null,\r\n    height = null\r\n  } = {}) {\r\n    const horizontalConstrained =\r\n      (left !== null && right !== null) ||\r\n      (left !== null && width !== null) ||\r\n      (right !== null && width !== null);\r\n\r\n    const verticalConstrained =\r\n      (top !== null && bottom !== null) ||\r\n      (top !== null && height !== null) ||\r\n      (bottom !== null && height !== null);\r\n\r\n    return horizontalConstrained && verticalConstrained;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport {\r\n  Positioned,\r\n  PositionedElement,\r\n  PositionedDirectional,\r\n  StackParentData,\r\n\r\n  RelativeRect,\r\n  PositioningHelper\r\n};"],
-  "mappings": "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",
-  "names": ["Widget", "StatelessWidget", "Element", "TextDirection", "RelativeRect", "left", "top", "right", "bottom", "rect", "container", "StackParentData", "Positioned", "key", "width", "height", "child", "textDirection", "start", "end", "isRTL", "renderObject", "parentData", "needsLayout", "context", "style", "properties", "parent", "runtime", "PositionedElement", "PositionedDirectional", "PositioningHelper", "containerWidth", "containerHeight", "finalLeft", "finalTop", "finalWidth", "finalHeight"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/raw_image.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/raw_image.js
deleted file mode 100644
index 0ed12cfa..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/raw_image.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{Widget as E,InheritedWidget as F}from"../../core/widget_element.js";import{Element as L}from"@flutterjs/runtime";import{VNode as r}from"@flutterjs/vdom/vnode";import{TextDirection as o,Alignment as R}from"../../utils/utils.js";const D={fill:"fill",contain:"contain",cover:"cover",fitWidth:"fitWidth",fitHeight:"fitHeight",none:"none",scaleDown:"scaleDown"},d={noRepeat:"noRepeat",repeat:"repeat",repeatX:"repeatX",repeatY:"repeatY"},P={multiply:"multiply",screen:"screen",overlay:"overlay",darken:"darken",lighten:"lighten",colorDodge:"colorDodge",colorBurn:"colorBurn",hardLight:"hardLight",softLight:"softLight",difference:"difference",exclusion:"exclusion",hue:"hue",saturation:"saturation",color:"color",luminosity:"luminosity",srcOver:"srcOver",srcIn:"srcIn",srcOut:"srcOut",srcATop:"srcATop",dstOver:"dstOver",dstIn:"dstIn",dstOut:"dstOut",dstATop:"dstATop",plus:"plus",modulate:"modulate"},h={none:"none",low:"low",medium:"medium",high:"high"};class l{constructor({src:t=null,width:e=0,height:i=0,scale:a=1,dataUrl:s=null}={}){this.src=t,this.width=e,this.height=i,this.scale=a,this.dataUrl=s,this._image=null,this._isLoaded=!1,this._loadPromise=null,this._openHandles=[]}static fromUrl(t,{width:e=null,height:i=null,scale:a=1}={}){const s=new l({src:t,width:e,height:i,scale:a});return s.load(),s}static fromDataUrl(t,{width:e=null,height:i=null,scale:a=1}={}){const s=new l({dataUrl:t,width:e,height:i,scale:a});return s.load(),s}load(){return this._loadPromise?this._loadPromise:(this._loadPromise=new Promise((t,e)=>{const i=new window.Image;i.onload=()=>{(!this.width||this.width===0)&&(this.width=i.naturalWidth),(!this.height||this.height===0)&&(this.height=i.naturalHeight),this._image=i,this._isLoaded=!0,this._openHandles.push(new Error("Image loaded").stack),t(this)},i.onerror=()=>{e(new Error(`Failed to load image: ${this.src||this.dataUrl}`))},this.src?i.src=this.src:this.dataUrl&&(i.src=this.dataUrl)}),this._loadPromise)}getDOMImage(){return this._image}get isLoaded(){return this._isLoaded}clone(){const t=new l({src:this.src,width:this.width,height:this.height,scale:this.scale,dataUrl:this.dataUrl});return t._image=this._image,t._isLoaded=this._isLoaded,t}dispose(){this._image=null,this._isLoaded=!1,this._openHandles=[]}debugGetOpenHandleStackTraces(){return this._openHandles}get naturalWidth(){return this._image?.naturalWidth||this.width}get naturalHeight(){return this._image?.naturalHeight||this.height}}class A{constructor({image:t=null,debugImageLabel:e=null,width:i=null,height:a=null,scale:s=1,color:c=null,opacity:u=null,colorBlendMode:g=null,fit:m=D.contain,alignment:p=R.center,repeat:f=d.noRepeat,centerSlice:w=null,matchTextDirection:b=!1,textDirection:y=o.ltr,invertColors:x=!1,isAntiAlias:_=!1,filterQuality:I=h.medium}={}){this.image=t,this.debugImageLabel=e,this.width=i,this.height=a,this.scale=s,this.color=c,this.opacity=u,this.colorBlendMode=g,this.fit=m,this.alignment=p,this.repeat=f,this.centerSlice=w,this.matchTextDirection=b,this.textDirection=y,this.invertColors=x,this.isAntiAlias=_,this.filterQuality=I}getImageStyle(){const t={display:"block",width:this.width?`${this.width}px`:"100%",height:this.height?`${this.height}px`:"auto",objectFit:this._mapBoxFit(),objectPosition:this._mapAlignment(),filter:this._getFilterStyle()};if(this.repeat!==d.noRepeat&&(t.backgroundRepeat=this._mapImageRepeat()),this.colorBlendMode&&(t.mixBlendMode=this.colorBlendMode),this.opacity!==null&&this.opacity!==void 0){const e=typeof this.opacity=="number"?this.opacity:this.opacity.value;t.opacity=e}return t}_mapBoxFit(){return{fill:"fill",contain:"contain",cover:"cover",fitWidth:"cover",fitHeight:"cover",none:"none",scaleDown:"scale-down"}[this.fit]||"contain"}_mapAlignment(){const t={topLeft:"top left",topCenter:"top center",topRight:"top right",centerLeft:"center left",center:"center center",centerRight:"center right",bottomLeft:"bottom left",bottomCenter:"bottom center",bottomRight:"bottom right"};if(this.matchTextDirection&&this.textDirection){const e=this.textDirection===o.rtl,i=this.alignment;if(i.includes&&i.includes("start"))return e?i.replace("start","right"):i.replace("start","left");if(i.includes&&i.includes("end"))return e?i.replace("end","left"):i.replace("end","right")}return t[this.alignment]||"center"}_mapImageRepeat(){return{noRepeat:"no-repeat",repeat:"repeat",repeatX:"repeat-x",repeatY:"repeat-y"}[this.repeat]||"no-repeat"}_getFilterStyle(){const t=[];switch(this.invertColors&&t.push("invert(1)"),this.filterQuality){case h.high:t.push("blur(0px)");break;case h.none:t.push("blur(1px)");break}return t.length>0?t.join(" "):"none"}debugInfo(){return{type:"RenderImage",debugImageLabel:this.debugImageLabel,width:this.width,height:this.height,fit:this.fit,repeat:this.repeat,hasImage:!!this.image,imageLoaded:this.image?.isLoaded}}}class C extends E{constructor({key:t=null,image:e=null,debugImageLabel:i=null,width:a=null,height:s=null,scale:c=1,color:u=null,opacity:g=null,colorBlendMode:m=null,fit:p=null,alignment:f=R.center,repeat:w=d.noRepeat,centerSlice:b=null,matchTextDirection:y=!1,invertColors:x=!1,filterQuality:_=h.medium,isAntiAlias:I=!1}={}){super(t),this.image=e,this.debugImageLabel=i,this.width=a,this.height=s,this.scale=c,this.color=u,this.opacity=g,this.colorBlendMode=m,this.fit=p,this.alignment=f,this.repeat=w,this.centerSlice=b,this.matchTextDirection=y,this.invertColors=x,this.filterQuality=_,this.isAntiAlias=I,this._renderObject=null}createRenderObject(t){return new A({image:this.image?.clone?.()||this.image,debugImageLabel:this.debugImageLabel,width:this.width,height:this.height,scale:this.scale,color:this.color,opacity:this.opacity,colorBlendMode:this.colorBlendMode,fit:this.fit,alignment:this.alignment,repeat:this.repeat,centerSlice:this.centerSlice,matchTextDirection:this.matchTextDirection,textDirection:this.matchTextDirection||typeof this.alignment=="object"?t?.textDirection||o.ltr:null,invertColors:this.invertColors,isAntiAlias:this.isAntiAlias,filterQuality:this.filterQuality})}updateRenderObject(t,e){e.image=this.image?.clone?.()||this.image,e.debugImageLabel=this.debugImageLabel,e.width=this.width,e.height=this.height,e.scale=this.scale,e.color=this.color,e.opacity=this.opacity,e.colorBlendMode=this.colorBlendMode,e.fit=this.fit,e.alignment=this.alignment,e.repeat=this.repeat,e.centerSlice=this.centerSlice,e.matchTextDirection=this.matchTextDirection,e.textDirection=this.matchTextDirection||typeof this.alignment=="object"?t?.textDirection||o.ltr:null,e.invertColors=this.invertColors,e.isAntiAlias=this.isAntiAlias,e.filterQuality=this.filterQuality}didUnmountRenderObject(t){t.image=null}build(t){this._renderObject?this.updateRenderObject(t,this._renderObject):this._renderObject=this.createRenderObject(t);const e=t.element.getElementId(),i=t.element.getWidgetPath();if(!this.image||!this.image.isLoaded)return new r({tag:"div",props:{style:{width:this.width?`${this.width}px`:"100%",height:this.height?`${this.height}px`:"100px",backgroundColor:"#f0f0f0",display:"flex",alignItems:"center",justifyContent:"center"},"data-element-id":e,"data-widget-path":i,"data-widget":"RawImage","data-loading":"true"},children:[new r({tag:"span",children:["Loading image..."]})]});const a=this.image.getDOMImage();if(!a)return new r({tag:"div",props:{style:{width:this.width?`${this.width}px`:"100%",height:this.height?`${this.height}px`:"100px",backgroundColor:"#ffe0e0"}},children:[]});const s=this._renderObject.getImageStyle();return new r({tag:"img",props:{src:a.src,style:s,alt:this.debugImageLabel||"image","data-element-id":e,"data-widget-path":i,"data-widget":"RawImage","data-width":this.width,"data-height":this.height,"data-fit":this.fit,"data-repeat":this.repeat,"data-scale":this.scale},key:this.key})}debugFillProperties(t){super.debugFillProperties(t),t.push({name:"image",value:this.image?"Image":"null"}),t.push({name:"debugImageLabel",value:this.debugImageLabel}),this.width&&t.push({name:"width",value:this.width}),this.height&&t.push({name:"height",value:this.height}),t.push({name:"scale",value:this.scale}),this.color&&t.push({name:"color",value:this.color}),this.fit&&t.push({name:"fit",value:this.fit}),t.push({name:"repeat",value:this.repeat}),t.push({name:"filterQuality",value:this.filterQuality})}createElement(t,e){return new B(this,t,e)}}class B extends L{performRebuild(){return this.widget.build(this.context)}unmount(){this.widget._renderObject&&this.widget.didUnmountRenderObject(this.widget._renderObject),super.unmount()}}class T{constructor(){this._cache=new Map,this._loadedAssets=new Set}async loadString(t){if(this._cache.has(t))return this._cache.get(t);try{const e=await fetch(t);if(!e.ok)throw new Error(`Failed to load asset: ${t}`);const i=await e.text();return this._cache.set(t,i),this._loadedAssets.add(t),i}catch(e){throw console.error("Asset bundle load error:",e),e}}async loadImage(t){const e=l.fromUrl(t);return await e.load(),e}clear(){this._cache.clear(),this._loadedAssets.clear()}}const S=new T;class v extends F{constructor({key:t=null,bundle:e=null,child:i=null}={}){if(super({key:t,child:i}),!e)throw new Error("DefaultAssetBundle requires a bundle");this.bundle=e}static of(t){return t?.dependOnInheritedWidgetOfExactType?.(v)?.bundle||S}updateShouldNotify(t){return this.bundle!==t.bundle}debugFillProperties(t){super.debugFillProperties(t),t.push({name:"bundle",value:this.bundle.constructor.name})}createElement(t,e){return new M(this,t,e)}}class M extends L{performRebuild(){return this.widget.build(this.context)}}export{T as AssetBundle,P as BlendMode,D as BoxFit,v as DefaultAssetBundle,M as DefaultAssetBundleElement,h as FilterQuality,l as Image,d as ImageRepeat,C as RawImage,B as RawImageElement,A as RenderImage,S as rootBundle};
-//# sourceMappingURL=raw_image.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/raw_image.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/raw_image.js.map
deleted file mode 100644
index 412bdcca..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/raw_image.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/raw_image.js"],
-  "sourcesContent": ["import { Widget, InheritedWidget,  } from '../../core/widget_element.js';\r\nimport {Element} from \"@flutterjs/runtime\"\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { TextDirection, Alignment } from '../../utils/utils.js';\r\n\r\n// ============================================================================\r\n// ENUMS\r\n// ============================================================================\r\n\r\nconst BoxFit = {\r\n  fill: 'fill',\r\n  contain: 'contain',\r\n  cover: 'cover',\r\n  fitWidth: 'fitWidth',\r\n  fitHeight: 'fitHeight',\r\n  none: 'none',\r\n  scaleDown: 'scaleDown'\r\n};\r\n\r\nconst ImageRepeat = {\r\n  noRepeat: 'noRepeat',\r\n  repeat: 'repeat',\r\n  repeatX: 'repeatX',\r\n  repeatY: 'repeatY'\r\n};\r\n\r\nconst BlendMode = {\r\n  multiply: 'multiply',\r\n  screen: 'screen',\r\n  overlay: 'overlay',\r\n  darken: 'darken',\r\n  lighten: 'lighten',\r\n  colorDodge: 'colorDodge',\r\n  colorBurn: 'colorBurn',\r\n  hardLight: 'hardLight',\r\n  softLight: 'softLight',\r\n  difference: 'difference',\r\n  exclusion: 'exclusion',\r\n  hue: 'hue',\r\n  saturation: 'saturation',\r\n  color: 'color',\r\n  luminosity: 'luminosity',\r\n  srcOver: 'srcOver',\r\n  srcIn: 'srcIn',\r\n  srcOut: 'srcOut',\r\n  srcATop: 'srcATop',\r\n  dstOver: 'dstOver',\r\n  dstIn: 'dstIn',\r\n  dstOut: 'dstOut',\r\n  dstATop: 'dstATop',\r\n  plus: 'plus',\r\n  modulate: 'modulate'\r\n};\r\n\r\nconst FilterQuality = {\r\n  none: 'none',\r\n  low: 'low',\r\n  medium: 'medium',\r\n  high: 'high'\r\n};\r\n\r\n// ============================================================================\r\n// IMAGE CLASS\r\n// ============================================================================\r\n\r\nclass Image {\r\n  constructor({\r\n    src = null,\r\n    width = 0,\r\n    height = 0,\r\n    scale = 1.0,\r\n    dataUrl = null\r\n  } = {}) {\r\n    this.src = src;\r\n    this.width = width;\r\n    this.height = height;\r\n    this.scale = scale;\r\n    this.dataUrl = dataUrl;\r\n    this._image = null;\r\n    this._isLoaded = false;\r\n    this._loadPromise = null;\r\n    this._openHandles = [];\r\n  }\r\n\r\n  /**\r\n   * Load image from URL\r\n   */\r\n  static fromUrl(src, { width = null, height = null, scale = 1.0 } = {}) {\r\n    const img = new Image({ src, width, height, scale });\r\n    img.load();\r\n    return img;\r\n  }\r\n\r\n  /**\r\n   * Load image from data URL\r\n   */\r\n  static fromDataUrl(dataUrl, { width = null, height = null, scale = 1.0 } = {}) {\r\n    const img = new Image({ dataUrl, width, height, scale });\r\n    img.load();\r\n    return img;\r\n  }\r\n\r\n  /**\r\n   * Load the image\r\n   */\r\n  load() {\r\n    if (this._loadPromise) {\r\n      return this._loadPromise;\r\n    }\r\n\r\n    this._loadPromise = new Promise((resolve, reject) => {\r\n      const imgElement = new window.Image();\r\n\r\n      imgElement.onload = () => {\r\n        if (!this.width || this.width === 0) {\r\n          this.width = imgElement.naturalWidth;\r\n        }\r\n        if (!this.height || this.height === 0) {\r\n          this.height = imgElement.naturalHeight;\r\n        }\r\n\r\n        this._image = imgElement;\r\n        this._isLoaded = true;\r\n        this._openHandles.push(new Error('Image loaded').stack);\r\n        resolve(this);\r\n      };\r\n\r\n      imgElement.onerror = () => {\r\n        reject(new Error(`Failed to load image: ${this.src || this.dataUrl}`));\r\n      };\r\n\r\n      if (this.src) {\r\n        imgElement.src = this.src;\r\n      } else if (this.dataUrl) {\r\n        imgElement.src = this.dataUrl;\r\n      }\r\n    });\r\n\r\n    return this._loadPromise;\r\n  }\r\n\r\n  /**\r\n   * Get the DOM element\r\n   */\r\n  getDOMImage() {\r\n    return this._image;\r\n  }\r\n\r\n  /**\r\n   * Check if loaded\r\n   */\r\n  get isLoaded() {\r\n    return this._isLoaded;\r\n  }\r\n\r\n  /**\r\n   * Clone the image\r\n   */\r\n  clone() {\r\n    const cloned = new Image({\r\n      src: this.src,\r\n      width: this.width,\r\n      height: this.height,\r\n      scale: this.scale,\r\n      dataUrl: this.dataUrl\r\n    });\r\n    cloned._image = this._image;\r\n    cloned._isLoaded = this._isLoaded;\r\n    return cloned;\r\n  }\r\n\r\n  /**\r\n   * Dispose the image\r\n   */\r\n  dispose() {\r\n    this._image = null;\r\n    this._isLoaded = false;\r\n    this._openHandles = [];\r\n  }\r\n\r\n  /**\r\n   * Debug: Get open handle stack traces\r\n   */\r\n  debugGetOpenHandleStackTraces() {\r\n    return this._openHandles;\r\n  }\r\n\r\n  /**\r\n   * Get image dimensions\r\n   */\r\n  get naturalWidth() {\r\n    return this._image?.naturalWidth || this.width;\r\n  }\r\n\r\n  get naturalHeight() {\r\n    return this._image?.naturalHeight || this.height;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER IMAGE\r\n// ============================================================================\r\n\r\nclass RenderImage {\r\n  constructor({\r\n    image = null,\r\n    debugImageLabel = null,\r\n    width = null,\r\n    height = null,\r\n    scale = 1.0,\r\n    color = null,\r\n    opacity = null,\r\n    colorBlendMode = null,\r\n    fit = BoxFit.contain,\r\n    alignment = Alignment.center,\r\n    repeat = ImageRepeat.noRepeat,\r\n    centerSlice = null,\r\n    matchTextDirection = false,\r\n    textDirection = TextDirection.ltr,\r\n    invertColors = false,\r\n    isAntiAlias = false,\r\n    filterQuality = FilterQuality.medium\r\n  } = {}) {\r\n    this.image = image;\r\n    this.debugImageLabel = debugImageLabel;\r\n    this.width = width;\r\n    this.height = height;\r\n    this.scale = scale;\r\n    this.color = color;\r\n    this.opacity = opacity;\r\n    this.colorBlendMode = colorBlendMode;\r\n    this.fit = fit;\r\n    this.alignment = alignment;\r\n    this.repeat = repeat;\r\n    this.centerSlice = centerSlice;\r\n    this.matchTextDirection = matchTextDirection;\r\n    this.textDirection = textDirection;\r\n    this.invertColors = invertColors;\r\n    this.isAntiAlias = isAntiAlias;\r\n    this.filterQuality = filterQuality;\r\n  }\r\n\r\n  /**\r\n   * Get CSS for image sizing and positioning\r\n   */\r\n  getImageStyle() {\r\n    const style = {\r\n      display: 'block',\r\n      width: this.width ? `${this.width}px` : '100%',\r\n      height: this.height ? `${this.height}px` : 'auto',\r\n      objectFit: this._mapBoxFit(),\r\n      objectPosition: this._mapAlignment(),\r\n      filter: this._getFilterStyle()\r\n    };\r\n\r\n    // Handle image repeat\r\n    if (this.repeat !== ImageRepeat.noRepeat) {\r\n      style.backgroundRepeat = this._mapImageRepeat();\r\n    }\r\n\r\n    // Handle blend mode\r\n    if (this.colorBlendMode) {\r\n      style.mixBlendMode = this.colorBlendMode;\r\n    }\r\n\r\n    // Handle opacity\r\n    if (this.opacity !== null && this.opacity !== undefined) {\r\n      const opacityValue = typeof this.opacity === 'number' \r\n        ? this.opacity \r\n        : this.opacity.value;\r\n      style.opacity = opacityValue;\r\n    }\r\n\r\n    return style;\r\n  }\r\n\r\n  /**\r\n   * Map BoxFit to CSS object-fit\r\n   * @private\r\n   */\r\n  _mapBoxFit() {\r\n    const map = {\r\n      fill: 'fill',\r\n      contain: 'contain',\r\n      cover: 'cover',\r\n      fitWidth: 'cover',\r\n      fitHeight: 'cover',\r\n      none: 'none',\r\n      scaleDown: 'scale-down'\r\n    };\r\n    return map[this.fit] || 'contain';\r\n  }\r\n\r\n  /**\r\n   * Map alignment to CSS object-position\r\n   * @private\r\n   */\r\n  _mapAlignment() {\r\n    const alignMap = {\r\n      'topLeft': 'top left',\r\n      'topCenter': 'top center',\r\n      'topRight': 'top right',\r\n      'centerLeft': 'center left',\r\n      'center': 'center center',\r\n      'centerRight': 'center right',\r\n      'bottomLeft': 'bottom left',\r\n      'bottomCenter': 'bottom center',\r\n      'bottomRight': 'bottom right'\r\n    };\r\n\r\n    // Handle directional alignment\r\n    if (this.matchTextDirection && this.textDirection) {\r\n      const isRTL = this.textDirection === TextDirection.rtl;\r\n      const alignValue = this.alignment;\r\n\r\n      if (alignValue.includes && alignValue.includes('start')) {\r\n        return isRTL ? alignValue.replace('start', 'right') : alignValue.replace('start', 'left');\r\n      }\r\n      if (alignValue.includes && alignValue.includes('end')) {\r\n        return isRTL ? alignValue.replace('end', 'left') : alignValue.replace('end', 'right');\r\n      }\r\n    }\r\n\r\n    return alignMap[this.alignment] || 'center';\r\n  }\r\n\r\n  /**\r\n   * Map ImageRepeat to CSS backgroundRepeat\r\n   * @private\r\n   */\r\n  _mapImageRepeat() {\r\n    const map = {\r\n      noRepeat: 'no-repeat',\r\n      repeat: 'repeat',\r\n      repeatX: 'repeat-x',\r\n      repeatY: 'repeat-y'\r\n    };\r\n    return map[this.repeat] || 'no-repeat';\r\n  }\r\n\r\n  /**\r\n   * Get filter style\r\n   * @private\r\n   */\r\n  _getFilterStyle() {\r\n    const filters = [];\r\n\r\n    if (this.invertColors) {\r\n      filters.push('invert(1)');\r\n    }\r\n\r\n    // Apply filter quality\r\n    switch (this.filterQuality) {\r\n      case FilterQuality.high:\r\n        filters.push('blur(0px)');\r\n        break;\r\n      case FilterQuality.none:\r\n        filters.push('blur(1px)');\r\n        break;\r\n    }\r\n\r\n    return filters.length > 0 ? filters.join(' ') : 'none';\r\n  }\r\n\r\n  /**\r\n   * Debug info\r\n   */\r\n  debugInfo() {\r\n    return {\r\n      type: 'RenderImage',\r\n      debugImageLabel: this.debugImageLabel,\r\n      width: this.width,\r\n      height: this.height,\r\n      fit: this.fit,\r\n      repeat: this.repeat,\r\n      hasImage: !!this.image,\r\n      imageLoaded: this.image?.isLoaded\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// RAW IMAGE WIDGET\r\n// ============================================================================\r\n\r\nclass RawImage extends Widget {\r\n  constructor({\r\n    key = null,\r\n    image = null,\r\n    debugImageLabel = null,\r\n    width = null,\r\n    height = null,\r\n    scale = 1.0,\r\n    color = null,\r\n    opacity = null,\r\n    colorBlendMode = null,\r\n    fit = null,\r\n    alignment = Alignment.center,\r\n    repeat = ImageRepeat.noRepeat,\r\n    centerSlice = null,\r\n    matchTextDirection = false,\r\n    invertColors = false,\r\n    filterQuality = FilterQuality.medium,\r\n    isAntiAlias = false\r\n  } = {}) {\r\n    super(key);\r\n\r\n    this.image = image;\r\n    this.debugImageLabel = debugImageLabel;\r\n    this.width = width;\r\n    this.height = height;\r\n    this.scale = scale;\r\n    this.color = color;\r\n    this.opacity = opacity;\r\n    this.colorBlendMode = colorBlendMode;\r\n    this.fit = fit;\r\n    this.alignment = alignment;\r\n    this.repeat = repeat;\r\n    this.centerSlice = centerSlice;\r\n    this.matchTextDirection = matchTextDirection;\r\n    this.invertColors = invertColors;\r\n    this.filterQuality = filterQuality;\r\n    this.isAntiAlias = isAntiAlias;\r\n    this._renderObject = null;\r\n  }\r\n\r\n  /**\r\n   * Create render object\r\n   */\r\n  createRenderObject(context) {\r\n    return new RenderImage({\r\n      image: this.image?.clone?.() || this.image,\r\n      debugImageLabel: this.debugImageLabel,\r\n      width: this.width,\r\n      height: this.height,\r\n      scale: this.scale,\r\n      color: this.color,\r\n      opacity: this.opacity,\r\n      colorBlendMode: this.colorBlendMode,\r\n      fit: this.fit,\r\n      alignment: this.alignment,\r\n      repeat: this.repeat,\r\n      centerSlice: this.centerSlice,\r\n      matchTextDirection: this.matchTextDirection,\r\n      textDirection: this.matchTextDirection || typeof this.alignment === 'object'\r\n        ? context?.textDirection || TextDirection.ltr\r\n        : null,\r\n      invertColors: this.invertColors,\r\n      isAntiAlias: this.isAntiAlias,\r\n      filterQuality: this.filterQuality\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Update render object\r\n   */\r\n  updateRenderObject(context, renderObject) {\r\n    renderObject.image = this.image?.clone?.() || this.image;\r\n    renderObject.debugImageLabel = this.debugImageLabel;\r\n    renderObject.width = this.width;\r\n    renderObject.height = this.height;\r\n    renderObject.scale = this.scale;\r\n    renderObject.color = this.color;\r\n    renderObject.opacity = this.opacity;\r\n    renderObject.colorBlendMode = this.colorBlendMode;\r\n    renderObject.fit = this.fit;\r\n    renderObject.alignment = this.alignment;\r\n    renderObject.repeat = this.repeat;\r\n    renderObject.centerSlice = this.centerSlice;\r\n    renderObject.matchTextDirection = this.matchTextDirection;\r\n    renderObject.textDirection = this.matchTextDirection || typeof this.alignment === 'object'\r\n      ? context?.textDirection || TextDirection.ltr\r\n      : null;\r\n    renderObject.invertColors = this.invertColors;\r\n    renderObject.isAntiAlias = this.isAntiAlias;\r\n    renderObject.filterQuality = this.filterQuality;\r\n  }\r\n\r\n  /**\r\n   * Unmount and clean up\r\n   */\r\n  didUnmountRenderObject(renderObject) {\r\n    renderObject.image = null;\r\n  }\r\n\r\n  /**\r\n   * Build widget tree\r\n   */\r\n  build(context) {\r\n    if (!this._renderObject) {\r\n      this._renderObject = this.createRenderObject(context);\r\n    } else {\r\n      this.updateRenderObject(context, this._renderObject);\r\n    }\r\n\r\n    const elementId = context.element.getElementId();\r\n    const widgetPath = context.element.getWidgetPath();\r\n\r\n    if (!this.image || !this.image.isLoaded) {\r\n      // Placeholder while loading\r\n      return new VNode({\r\n        tag: 'div',\r\n        props: {\r\n          style: {\r\n            width: this.width ? `${this.width}px` : '100%',\r\n            height: this.height ? `${this.height}px` : '100px',\r\n            backgroundColor: '#f0f0f0',\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center'\r\n          },\r\n          'data-element-id': elementId,\r\n          'data-widget-path': widgetPath,\r\n          'data-widget': 'RawImage',\r\n          'data-loading': 'true'\r\n        },\r\n        children: [new VNode({ tag: 'span', children: ['Loading image...'] })]\r\n      });\r\n    }\r\n\r\n    const imgElement = this.image.getDOMImage();\r\n    if (!imgElement) {\r\n      return new VNode({\r\n        tag: 'div',\r\n        props: {\r\n          style: {\r\n            width: this.width ? `${this.width}px` : '100%',\r\n            height: this.height ? `${this.height}px` : '100px',\r\n            backgroundColor: '#ffe0e0'\r\n          }\r\n        },\r\n        children: []\r\n      });\r\n    }\r\n\r\n    const imageStyle = this._renderObject.getImageStyle();\r\n\r\n    return new VNode({\r\n      tag: 'img',\r\n      props: {\r\n        src: imgElement.src,\r\n        style: imageStyle,\r\n        alt: this.debugImageLabel || 'image',\r\n        'data-element-id': elementId,\r\n        'data-widget-path': widgetPath,\r\n        'data-widget': 'RawImage',\r\n        'data-width': this.width,\r\n        'data-height': this.height,\r\n        'data-fit': this.fit,\r\n        'data-repeat': this.repeat,\r\n        'data-scale': this.scale\r\n      },\r\n      key: this.key\r\n    });\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({ name: 'image', value: this.image ? 'Image' : 'null' });\r\n    properties.push({ name: 'debugImageLabel', value: this.debugImageLabel });\r\n    if (this.width) properties.push({ name: 'width', value: this.width });\r\n    if (this.height) properties.push({ name: 'height', value: this.height });\r\n    properties.push({ name: 'scale', value: this.scale });\r\n    if (this.color) properties.push({ name: 'color', value: this.color });\r\n    if (this.fit) properties.push({ name: 'fit', value: this.fit });\r\n    properties.push({ name: 'repeat', value: this.repeat });\r\n    properties.push({ name: 'filterQuality', value: this.filterQuality });\r\n  }\r\n\r\n  createElement(parent, runtime) {\r\n    return new RawImageElement(this,parent, runtime);\r\n  }\r\n}\r\n\r\nclass RawImageElement extends Element {\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n\r\n  /**\r\n   * Clean up on unmount\r\n   */\r\n  unmount() {\r\n    if (this.widget._renderObject) {\r\n      this.widget.didUnmountRenderObject(this.widget._renderObject);\r\n    }\r\n    super.unmount();\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// ASSET BUNDLE\r\n// ============================================================================\r\n\r\nclass AssetBundle {\r\n  constructor() {\r\n    this._cache = new Map();\r\n    this._loadedAssets = new Set();\r\n  }\r\n\r\n  /**\r\n   * Load asset\r\n   */\r\n  async loadString(key) {\r\n    if (this._cache.has(key)) {\r\n      return this._cache.get(key);\r\n    }\r\n\r\n    try {\r\n      const response = await fetch(key);\r\n      if (!response.ok) {\r\n        throw new Error(`Failed to load asset: ${key}`);\r\n      }\r\n      const text = await response.text();\r\n      this._cache.set(key, text);\r\n      this._loadedAssets.add(key);\r\n      return text;\r\n    } catch (error) {\r\n      console.error('Asset bundle load error:', error);\r\n      throw error;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Load image\r\n   */\r\n  async loadImage(key) {\r\n    const img = Image.fromUrl(key);\r\n    await img.load();\r\n    return img;\r\n  }\r\n\r\n  /**\r\n   * Clear cache\r\n   */\r\n  clear() {\r\n    this._cache.clear();\r\n    this._loadedAssets.clear();\r\n  }\r\n}\r\n\r\n// Root asset bundle singleton\r\nconst rootBundle = new AssetBundle();\r\n\r\n// ============================================================================\r\n// DEFAULT ASSET BUNDLE WIDGET\r\n// ============================================================================\r\n\r\nclass DefaultAssetBundle extends InheritedWidget {\r\n  constructor({\r\n    key = null,\r\n    bundle = null,\r\n    child = null\r\n  } = {}) {\r\n    super({ key, child });\r\n\r\n    if (!bundle) {\r\n      throw new Error('DefaultAssetBundle requires a bundle');\r\n    }\r\n\r\n    this.bundle = bundle;\r\n  }\r\n\r\n  /**\r\n   * Get the asset bundle from context\r\n   */\r\n  static of(context) {\r\n    const result = context?.dependOnInheritedWidgetOfExactType?.(DefaultAssetBundle);\r\n    return result?.bundle || rootBundle;\r\n  }\r\n\r\n  /**\r\n   * Update should notify\r\n   */\r\n  updateShouldNotify(oldWidget) {\r\n    return this.bundle !== oldWidget.bundle;\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({ name: 'bundle', value: this.bundle.constructor.name });\r\n  }\r\n\r\n  createElement(parent, runtime) {\r\n    return new DefaultAssetBundleElement(this,parent, runtime);\r\n  }\r\n}\r\n\r\nclass DefaultAssetBundleElement extends Element {\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport {\r\n  RawImage,\r\n  RawImageElement,\r\n  RenderImage,\r\n  Image,\r\n  DefaultAssetBundle,\r\n  DefaultAssetBundleElement,\r\n  AssetBundle,\r\n  rootBundle,\r\n  BoxFit,\r\n  ImageRepeat,\r\n  BlendMode,\r\n  FilterQuality\r\n};"],
-  "mappings": "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",
-  "names": ["Widget", "InheritedWidget", "Element", "VNode", "TextDirection", "Alignment", "BoxFit", "ImageRepeat", "BlendMode", "FilterQuality", "Image", "src", "width", "height", "scale", "dataUrl", "img", "resolve", "reject", "imgElement", "cloned", "RenderImage", "image", "debugImageLabel", "color", "opacity", "colorBlendMode", "fit", "alignment", "repeat", "centerSlice", "matchTextDirection", "textDirection", "invertColors", "isAntiAlias", "filterQuality", "style", "opacityValue", "alignMap", "isRTL", "alignValue", "filters", "RawImage", "key", "context", "renderObject", "elementId", "widgetPath", "imageStyle", "properties", "parent", "runtime", "RawImageElement", "AssetBundle", "response", "text", "error", "rootBundle", "DefaultAssetBundle", "bundle", "child", "oldWidget", "DefaultAssetBundleElement"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/rich_text.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/rich_text.js
deleted file mode 100644
index 2138182b..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/rich_text.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{Widget as A}from"../../core/widget_element.js";import{Element as B}from"@flutterjs/runtime";import{VNode as d}from"@flutterjs/vdom/vnode";import{TextDirection as c}from"../../utils/utils.js";const a={left:"left",right:"right",center:"center",justify:"justify",start:"start",end:"end"},u={clip:"clip",fade:"fade",ellipsis:"ellipsis",visible:"visible"},C={parent:"parent",longestLine:"longestLine"},T={alphabetic:"alphabetic",ideographic:"ideographic"};class f{constructor(t=1){this.textScaleFactor=t}static get noScaling(){return new f(1)}static linear(t=1){return new f(t)}scale(t){return t*this.textScaleFactor}toString(){return`TextScaler(${this.textScaleFactor})`}}class m{constructor(){if(new.target===m)throw new Error("InlineSpan is abstract")}toPlainText(){throw new Error("toPlainText() must be implemented")}buildVNode(){throw new Error("buildVNode() must be implemented")}}class F extends m{constructor({text:t="",style:e=null,children:i=[],recognizer:s=null}={}){super(),this.text=t,this.style=e||{},this.children=i||[],this.recognizer=s}toPlainText(){let t=this.text||"";if(this.children&&this.children.length>0)for(const e of this.children)t+=e.toPlainText?.()||"";return t}buildVNode(t=a.start,e=c.ltr){const i=this._getTextStyle(t,e),s=this.children.map(n=>n instanceof F?n.buildVNode(t,e):n instanceof v?n.buildVNode():new d({tag:"span",children:[String(n)]}));return this.text&&s.unshift(new d({tag:"span",children:[this.text]})),new d({tag:"span",props:{style:i,onClick:this.recognizer?.onTap,onMouseDown:this.recognizer?.onLongPress},children:s.length>0?s:[this.text||""]})}_getTextStyle(t,e){const i={...this.style};return typeof this.style=="string"?{}:i}}class v extends m{constructor({child:t=null,alignment:e="baseline",baseline:i=T.alphabetic,style:s=null}={}){super(),this.child=t,this.alignment=e,this.baseline=i,this.style=s}toPlainText(){return"\uFFFD"}buildVNode(){if(!this.child)return new d({tag:"span",children:["\uFFFD"]});const t=this.child.createElement?.();return t?t.performRebuild?.():new d({tag:"span",props:{style:{display:"inline-flex",alignItems:this.alignment,verticalAlign:this.baseline}},children:[this.child]})}static extractFromInlineSpan(t,e){const i=[];function s(n){if(n instanceof v&&i.push(n.child),n.children)for(const r of n.children)s(r)}return s(t),i}}class L{constructor({color:t=null,fontSize:e=14,fontWeight:i="normal",fontStyle:s="normal",fontFamily:n=null,height:r=null,letterSpacing:o=null,wordSpacing:l=null,textDecoration:h="none",decorationColor:g=null,decorationStyle:x="solid",decorationThickness:p=1,backgroundColor:S=null,foregroundColor:w=null,shadows:y=[],fontFeatures:b=[],fontVariations:R=[]}={}){this.color=t,this.fontSize=e,this.fontWeight=i,this.fontStyle=s,this.fontFamily=n,this.height=r,this.letterSpacing=o,this.wordSpacing=l,this.textDecoration=h,this.decorationColor=g,this.decorationStyle=x,this.decorationThickness=p,this.backgroundColor=S,this.foregroundColor=w,this.shadows=y,this.fontFeatures=b,this.fontVariations=R}toCSSStyle(){const t={fontSize:`${this.fontSize}px`,fontWeight:this.fontWeight,fontStyle:this.fontStyle,textDecoration:this.textDecoration,textDecorationColor:this.decorationColor,textDecorationThickness:`${this.decorationThickness}px`,textDecorationStyle:this.decorationStyle};return this.color&&(t.color=this.color),this.fontFamily&&(t.fontFamily=this.fontFamily),this.height&&(t.lineHeight=this.height),this.letterSpacing&&(t.letterSpacing=`${this.letterSpacing}px`),this.wordSpacing&&(t.wordSpacing=`${this.wordSpacing}px`),this.backgroundColor&&(t.backgroundColor=this.backgroundColor),this.shadows&&this.shadows.length>0&&(t.textShadow=this.shadows.map(e=>`${e.offsetX}px ${e.offsetY}px ${e.blurRadius}px ${e.color}`).join(", ")),t}merge(t){return t?new L({color:t.color??this.color,fontSize:t.fontSize??this.fontSize,fontWeight:t.fontWeight??this.fontWeight,fontStyle:t.fontStyle??this.fontStyle,fontFamily:t.fontFamily??this.fontFamily,height:t.height??this.height,letterSpacing:t.letterSpacing??this.letterSpacing,wordSpacing:t.wordSpacing??this.wordSpacing,textDecoration:t.textDecoration??this.textDecoration,decorationColor:t.decorationColor??this.decorationColor,decorationStyle:t.decorationStyle??this.decorationStyle,decorationThickness:t.decorationThickness??this.decorationThickness,backgroundColor:t.backgroundColor??this.backgroundColor,foregroundColor:t.foregroundColor??this.foregroundColor}):this}}class z{constructor({fontFamily:t=null,fontFamilyFallback:e=[],fontSize:i=null,height:s=null,leading:n=null,fontWeight:r=null,fontStyle:o=null,forceStrutHeight:l=!1}={}){this.fontFamily=t,this.fontFamilyFallback=e,this.fontSize=i,this.height=s,this.leading=n,this.fontWeight=r,this.fontStyle=o,this.forceStrutHeight=l}toCSSStyle(){const t={};return this.fontFamily&&(t.fontFamily=this.fontFamily),this.fontSize&&(t.fontSize=`${this.fontSize}px`),this.height&&(t.lineHeight=this.height),this.fontWeight&&(t.fontWeight=this.fontWeight),this.fontStyle&&(t.fontStyle=this.fontStyle),t}}class k{constructor({text:t=null,textAlign:e=a.start,textDirection:i=c.ltr,softWrap:s=!0,overflow:n=u.clip,textScaler:r=null,maxLines:o=null,locale:l=null,strutStyle:h=null,textWidthBasis:g=C.parent,textHeightBehavior:x=null,selectionColor:p=null,registrar:S=null}={}){this.text=t,this.textAlign=e,this.textDirection=i,this.softWrap=s,this.overflow=n,this.textScaler=r||f.noScaling,this.maxLines=o,this.locale=l,this.strutStyle=h,this.textWidthBasis=g,this.textHeightBehavior=x,this.selectionColor=p,this.registrar=S}debugInfo(){return{type:"RenderParagraph",textAlign:this.textAlign,textDirection:this.textDirection,softWrap:this.softWrap,overflow:this.overflow,maxLines:this.maxLines,textScaleFactor:this.textScaler.textScaleFactor}}}class P extends A{constructor({key:t=null,text:e=null,textAlign:i=a.start,textDirection:s=null,softWrap:n=!0,overflow:r=u.clip,textScaleFactor:o=1,textScaler:l=null,maxLines:h=null,locale:g=null,strutStyle:x=null,textWidthBasis:p=C.parent,textHeightBehavior:S=null,selectionRegistrar:w=null,selectionColor:y=null}={}){if(super(t),!e)throw new Error("RichText requires a text (InlineSpan)");if(h!==null&&h<=0)throw new Error("maxLines must be null or > 0");if(w&&!y)throw new Error("selectionColor is required when selectionRegistrar is provided");let b=l||f.noScaling;o!==1&&l===null&&(b=f.linear(o)),this.text=e,this.textAlign=i,this.textDirection=s,this.softWrap=n,this.overflow=r,this.textScaler=b,this.maxLines=h,this.locale=g,this.strutStyle=x,this.textWidthBasis=p,this.textHeightBehavior=S,this.selectionRegistrar=w,this.selectionColor=y,this._renderObject=null}createRenderObject(t){return new k({text:this.text,textAlign:this.textAlign,textDirection:this.textDirection||t?.textDirection||c.ltr,softWrap:this.softWrap,overflow:this.overflow,textScaler:this.textScaler,maxLines:this.maxLines,locale:this.locale,strutStyle:this.strutStyle,textWidthBasis:this.textWidthBasis,textHeightBehavior:this.textHeightBehavior,selectionColor:this.selectionColor,registrar:this.selectionRegistrar})}updateRenderObject(t,e){e.text=this.text,e.textAlign=this.textAlign,e.textDirection=this.textDirection||t?.textDirection||c.ltr,e.softWrap=this.softWrap,e.overflow=this.overflow,e.textScaler=this.textScaler,e.maxLines=this.maxLines,e.locale=this.locale,e.strutStyle=this.strutStyle,e.textWidthBasis=this.textWidthBasis,e.textHeightBehavior=this.textHeightBehavior,e.selectionColor=this.selectionColor,e.registrar=this.selectionRegistrar}build(t){this._renderObject?this.updateRenderObject(t,this._renderObject):this._renderObject=this.createRenderObject(t);const e=t.element.getElementId(),i=t.element.getWidgetPath(),s=this.textDirection||t?.textDirection||c.ltr,n=this.text.buildVNode(this.textAlign,s),r=this._mapTextAlign(this.textAlign,s);let o={};switch(this.overflow){case u.ellipsis:o={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"};break;case u.fade:o={overflow:"hidden",mask:"linear-gradient(to right, black 95%, transparent)"};break;case u.clip:o={overflow:"hidden"};break;case u.visible:o={overflow:"visible"};break}const l={textAlign:r,direction:s===c.rtl?"rtl":"ltr",whiteSpace:this.softWrap?"normal":"nowrap",wordWrap:this.softWrap?"break-word":"normal",display:"block",...o};return this.maxLines!==null&&(l.display="-webkit-box",l.WebkitLineClamp=this.maxLines,l.WebkitBoxOrient="vertical",l.overflow="hidden"),this.strutStyle&&Object.assign(l,this.strutStyle.toCSSStyle()),this.selectionColor&&(l.userSelect="text"),new d({tag:"div",props:{style:l,"data-element-id":e,"data-widget-path":i,"data-widget":"RichText","data-text-align":this.textAlign,"data-text-direction":s,"data-overflow":this.overflow,"data-max-lines":this.maxLines,"data-soft-wrap":this.softWrap},children:[n],key:this.key})}_mapTextAlign(t,e){const i=e===c.rtl;switch(typeof t=="string"&&t.startsWith(".")&&(t=t.substring(1)),t){case a.start:return i?"right":"left";case a.end:return i?"left":"right";case a.left:return"left";case a.right:return"right";case a.center:return"center";case a.justify:return"justify";default:return"start"}}debugFillProperties(t){super.debugFillProperties(t),t.push({name:"textAlign",value:this.textAlign}),t.push({name:"textDirection",value:this.textDirection}),t.push({name:"softWrap",value:this.softWrap}),t.push({name:"overflow",value:this.overflow}),t.push({name:"textScaleFactor",value:this.textScaler.textScaleFactor}),t.push({name:"maxLines",value:this.maxLines}),t.push({name:"text",value:this.text.toPlainText?.()||"N/A"})}createElement(t,e){return new D(this,t,e)}}class D extends B{performRebuild(){return this.widget.build(this.context)}}export{m as InlineSpan,k as RenderParagraph,P as RichText,D as RichTextElement,z as StrutStyle,a as TextAlign,T as TextBaseline,u as TextOverflow,f as TextScaler,F as TextSpan,C as TextWidthBasis,v as WidgetSpan};
-//# sourceMappingURL=rich_text.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/rich_text.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/rich_text.js.map
deleted file mode 100644
index 547fa529..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/rich_text.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/rich_text.js"],
-  "sourcesContent": ["import { Widget, } from '../../core/widget_element.js';\r\nimport { Element } from \"@flutterjs/runtime\"\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { TextDirection } from '../../utils/utils.js';\r\n\r\n// ============================================================================\r\n// ENUMS\r\n// ============================================================================\r\n\r\nconst TextAlign = {\r\n  left: 'left',\r\n  right: 'right',\r\n  center: 'center',\r\n  justify: 'justify',\r\n  start: 'start',\r\n  end: 'end'\r\n};\r\n\r\nconst TextOverflow = {\r\n  clip: 'clip',\r\n  fade: 'fade',\r\n  ellipsis: 'ellipsis',\r\n  visible: 'visible'\r\n};\r\n\r\nconst TextWidthBasis = {\r\n  parent: 'parent',\r\n  longestLine: 'longestLine'\r\n};\r\n\r\nconst TextBaseline = {\r\n  alphabetic: 'alphabetic',\r\n  ideographic: 'ideographic'\r\n};\r\n\r\n// ============================================================================\r\n// TEXT SCALER\r\n// ============================================================================\r\n\r\nclass TextScaler {\r\n  constructor(scale = 1.0) {\r\n    this.textScaleFactor = scale;\r\n  }\r\n\r\n  static get noScaling() {\r\n    return new TextScaler(1.0);\r\n  }\r\n\r\n  static linear(factor = 1.0) {\r\n    return new TextScaler(factor);\r\n  }\r\n\r\n  scale(textSize) {\r\n    return textSize * this.textScaleFactor;\r\n  }\r\n\r\n  toString() {\r\n    return `TextScaler(${this.textScaleFactor})`;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// INLINE SPAN\r\n// ============================================================================\r\n\r\nclass InlineSpan {\r\n  constructor() {\r\n    if (new.target === InlineSpan) {\r\n      throw new Error('InlineSpan is abstract');\r\n    }\r\n  }\r\n\r\n  toPlainText() {\r\n    throw new Error('toPlainText() must be implemented');\r\n  }\r\n\r\n  buildVNode() {\r\n    throw new Error('buildVNode() must be implemented');\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// TEXT SPAN\r\n// ============================================================================\r\n\r\nclass TextSpan extends InlineSpan {\r\n  constructor({\r\n    text = '',\r\n    style = null,\r\n    children = [],\r\n    recognizer = null\r\n  } = {}) {\r\n    super();\r\n\r\n    this.text = text;\r\n    this.style = style || {};\r\n    this.children = children || [];\r\n    this.recognizer = recognizer;\r\n  }\r\n\r\n  toPlainText() {\r\n    let result = this.text || '';\r\n\r\n    if (this.children && this.children.length > 0) {\r\n      for (const child of this.children) {\r\n        result += child.toPlainText?.() || '';\r\n      }\r\n    }\r\n\r\n    return result;\r\n  }\r\n\r\n  buildVNode(textAlign = TextAlign.start, textDirection = TextDirection.ltr) {\r\n    const style = this._getTextStyle(textAlign, textDirection);\r\n\r\n    const childVNodes = this.children.map(child => {\r\n      if (child instanceof TextSpan) {\r\n        return child.buildVNode(textAlign, textDirection);\r\n      }\r\n      if (child instanceof WidgetSpan) {\r\n        return child.buildVNode();\r\n      }\r\n      return new VNode({\r\n        tag: 'span',\r\n        children: [String(child)]\r\n      });\r\n    });\r\n\r\n    if (this.text) {\r\n      childVNodes.unshift(new VNode({\r\n        tag: 'span',\r\n        children: [this.text]\r\n      }));\r\n    }\r\n\r\n    return new VNode({\r\n      tag: 'span',\r\n      props: {\r\n        style,\r\n        onClick: this.recognizer?.onTap,\r\n        onMouseDown: this.recognizer?.onLongPress\r\n      },\r\n      children: childVNodes.length > 0 ? childVNodes : [this.text || '']\r\n    });\r\n  }\r\n\r\n  _getTextStyle(textAlign, textDirection) {\r\n    const style = { ...this.style };\r\n\r\n    // Ensure style is object\r\n    if (typeof this.style === 'string') {\r\n      return {};\r\n    }\r\n\r\n    return style;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// WIDGET SPAN\r\n// ============================================================================\r\n\r\nclass WidgetSpan extends InlineSpan {\r\n  constructor({\r\n    child = null,\r\n    alignment = 'baseline',\r\n    baseline = TextBaseline.alphabetic,\r\n    style = null\r\n  } = {}) {\r\n    super();\r\n\r\n    this.child = child;\r\n    this.alignment = alignment;\r\n    this.baseline = baseline;\r\n    this.style = style;\r\n  }\r\n\r\n  toPlainText() {\r\n    return '\\uFFFD'; // Replacement character\r\n  }\r\n\r\n  buildVNode() {\r\n    if (!this.child) {\r\n      return new VNode({ tag: 'span', children: ['\\uFFFD'] });\r\n    }\r\n\r\n    const childElement = this.child.createElement?.();\r\n    if (childElement) {\r\n      return childElement.performRebuild?.();\r\n    }\r\n\r\n    return new VNode({\r\n      tag: 'span',\r\n      props: {\r\n        style: {\r\n          display: 'inline-flex',\r\n          alignItems: this.alignment,\r\n          verticalAlign: this.baseline\r\n        }\r\n      },\r\n      children: [this.child]\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Extract widgets from inline span tree\r\n   * @static\r\n   */\r\n  static extractFromInlineSpan(span, textScaler) {\r\n    const widgets = [];\r\n\r\n    function traverse(inlineSpan) {\r\n      if (inlineSpan instanceof WidgetSpan) {\r\n        widgets.push(inlineSpan.child);\r\n      }\r\n\r\n      if (inlineSpan.children) {\r\n        for (const child of inlineSpan.children) {\r\n          traverse(child);\r\n        }\r\n      }\r\n    }\r\n\r\n    traverse(span);\r\n    return widgets;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// TEXT STYLE\r\n// ============================================================================\r\n\r\nclass TextStyle {\r\n  constructor({\r\n    color = null,\r\n    fontSize = 14,\r\n    fontWeight = 'normal',\r\n    fontStyle = 'normal',\r\n    fontFamily = null,\r\n    height = null,\r\n    letterSpacing = null,\r\n    wordSpacing = null,\r\n    textDecoration = 'none',\r\n    decorationColor = null,\r\n    decorationStyle = 'solid',\r\n    decorationThickness = 1,\r\n    backgroundColor = null,\r\n    foregroundColor = null,\r\n    shadows = [],\r\n    fontFeatures = [],\r\n    fontVariations = []\r\n  } = {}) {\r\n    this.color = color;\r\n    this.fontSize = fontSize;\r\n    this.fontWeight = fontWeight;\r\n    this.fontStyle = fontStyle;\r\n    this.fontFamily = fontFamily;\r\n    this.height = height;\r\n    this.letterSpacing = letterSpacing;\r\n    this.wordSpacing = wordSpacing;\r\n    this.textDecoration = textDecoration;\r\n    this.decorationColor = decorationColor;\r\n    this.decorationStyle = decorationStyle;\r\n    this.decorationThickness = decorationThickness;\r\n    this.backgroundColor = backgroundColor;\r\n    this.foregroundColor = foregroundColor;\r\n    this.shadows = shadows;\r\n    this.fontFeatures = fontFeatures;\r\n    this.fontVariations = fontVariations;\r\n  }\r\n\r\n  /**\r\n   * Convert to CSS style object\r\n   */\r\n  toCSSStyle() {\r\n    const style = {\r\n      fontSize: `${this.fontSize}px`,\r\n      fontWeight: this.fontWeight,\r\n      fontStyle: this.fontStyle,\r\n      textDecoration: this.textDecoration,\r\n      textDecorationColor: this.decorationColor,\r\n      textDecorationThickness: `${this.decorationThickness}px`,\r\n      textDecorationStyle: this.decorationStyle\r\n    };\r\n\r\n    if (this.color) style.color = this.color;\r\n    if (this.fontFamily) style.fontFamily = this.fontFamily;\r\n    if (this.height) style.lineHeight = this.height;\r\n    if (this.letterSpacing) style.letterSpacing = `${this.letterSpacing}px`;\r\n    if (this.wordSpacing) style.wordSpacing = `${this.wordSpacing}px`;\r\n    if (this.backgroundColor) style.backgroundColor = this.backgroundColor;\r\n\r\n    // Add shadows\r\n    if (this.shadows && this.shadows.length > 0) {\r\n      style.textShadow = this.shadows\r\n        .map(shadow => `${shadow.offsetX}px ${shadow.offsetY}px ${shadow.blurRadius}px ${shadow.color}`)\r\n        .join(', ');\r\n    }\r\n\r\n    return style;\r\n  }\r\n\r\n  /**\r\n   * Merge with another style\r\n   */\r\n  merge(other) {\r\n    if (!other) return this;\r\n\r\n    return new TextStyle({\r\n      color: other.color ?? this.color,\r\n      fontSize: other.fontSize ?? this.fontSize,\r\n      fontWeight: other.fontWeight ?? this.fontWeight,\r\n      fontStyle: other.fontStyle ?? this.fontStyle,\r\n      fontFamily: other.fontFamily ?? this.fontFamily,\r\n      height: other.height ?? this.height,\r\n      letterSpacing: other.letterSpacing ?? this.letterSpacing,\r\n      wordSpacing: other.wordSpacing ?? this.wordSpacing,\r\n      textDecoration: other.textDecoration ?? this.textDecoration,\r\n      decorationColor: other.decorationColor ?? this.decorationColor,\r\n      decorationStyle: other.decorationStyle ?? this.decorationStyle,\r\n      decorationThickness: other.decorationThickness ?? this.decorationThickness,\r\n      backgroundColor: other.backgroundColor ?? this.backgroundColor,\r\n      foregroundColor: other.foregroundColor ?? this.foregroundColor\r\n    });\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// STRUT STYLE\r\n// ============================================================================\r\n\r\nclass StrutStyle {\r\n  constructor({\r\n    fontFamily = null,\r\n    fontFamilyFallback = [],\r\n    fontSize = null,\r\n    height = null,\r\n    leading = null,\r\n    fontWeight = null,\r\n    fontStyle = null,\r\n    forceStrutHeight = false\r\n  } = {}) {\r\n    this.fontFamily = fontFamily;\r\n    this.fontFamilyFallback = fontFamilyFallback;\r\n    this.fontSize = fontSize;\r\n    this.height = height;\r\n    this.leading = leading;\r\n    this.fontWeight = fontWeight;\r\n    this.fontStyle = fontStyle;\r\n    this.forceStrutHeight = forceStrutHeight;\r\n  }\r\n\r\n  toCSSStyle() {\r\n    const style = {};\r\n\r\n    if (this.fontFamily) style.fontFamily = this.fontFamily;\r\n    if (this.fontSize) style.fontSize = `${this.fontSize}px`;\r\n    if (this.height) style.lineHeight = this.height;\r\n    if (this.fontWeight) style.fontWeight = this.fontWeight;\r\n    if (this.fontStyle) style.fontStyle = this.fontStyle;\r\n\r\n    return style;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER PARAGRAPH\r\n// ============================================================================\r\n\r\nclass RenderParagraph {\r\n  constructor({\r\n    text = null,\r\n    textAlign = TextAlign.start,\r\n    textDirection = TextDirection.ltr,\r\n    softWrap = true,\r\n    overflow = TextOverflow.clip,\r\n    textScaler = null,\r\n    maxLines = null,\r\n    locale = null,\r\n    strutStyle = null,\r\n    textWidthBasis = TextWidthBasis.parent,\r\n    textHeightBehavior = null,\r\n    selectionColor = null,\r\n    registrar = null\r\n  } = {}) {\r\n    this.text = text;\r\n    this.textAlign = textAlign;\r\n    this.textDirection = textDirection;\r\n    this.softWrap = softWrap;\r\n    this.overflow = overflow;\r\n    this.textScaler = textScaler || TextScaler.noScaling;\r\n    this.maxLines = maxLines;\r\n    this.locale = locale;\r\n    this.strutStyle = strutStyle;\r\n    this.textWidthBasis = textWidthBasis;\r\n    this.textHeightBehavior = textHeightBehavior;\r\n    this.selectionColor = selectionColor;\r\n    this.registrar = registrar;\r\n  }\r\n\r\n  debugInfo() {\r\n    return {\r\n      type: 'RenderParagraph',\r\n      textAlign: this.textAlign,\r\n      textDirection: this.textDirection,\r\n      softWrap: this.softWrap,\r\n      overflow: this.overflow,\r\n      maxLines: this.maxLines,\r\n      textScaleFactor: this.textScaler.textScaleFactor\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// RICH TEXT WIDGET\r\n// ============================================================================\r\n\r\nclass RichText extends Widget {\r\n  constructor({\r\n    key = null,\r\n    text = null,\r\n    textAlign = TextAlign.start,\r\n    textDirection = null,\r\n    softWrap = true,\r\n    overflow = TextOverflow.clip,\r\n    textScaleFactor = 1.0,\r\n    textScaler = null,\r\n    maxLines = null,\r\n    locale = null,\r\n    strutStyle = null,\r\n    textWidthBasis = TextWidthBasis.parent,\r\n    textHeightBehavior = null,\r\n    selectionRegistrar = null,\r\n    selectionColor = null\r\n  } = {}) {\r\n    super(key);\r\n\r\n    if (!text) {\r\n      throw new Error('RichText requires a text (InlineSpan)');\r\n    }\r\n\r\n    if (maxLines !== null && maxLines <= 0) {\r\n      throw new Error('maxLines must be null or > 0');\r\n    }\r\n\r\n    if (selectionRegistrar && !selectionColor) {\r\n      throw new Error('selectionColor is required when selectionRegistrar is provided');\r\n    }\r\n\r\n    // Resolve text scaler\r\n    let effectiveTextScaler = textScaler || TextScaler.noScaling;\r\n    if (textScaleFactor !== 1.0 && textScaler === null) {\r\n      effectiveTextScaler = TextScaler.linear(textScaleFactor);\r\n    }\r\n\r\n    this.text = text;\r\n    this.textAlign = textAlign;\r\n    this.textDirection = textDirection;\r\n    this.softWrap = softWrap;\r\n    this.overflow = overflow;\r\n    this.textScaler = effectiveTextScaler;\r\n    this.maxLines = maxLines;\r\n    this.locale = locale;\r\n    this.strutStyle = strutStyle;\r\n    this.textWidthBasis = textWidthBasis;\r\n    this.textHeightBehavior = textHeightBehavior;\r\n    this.selectionRegistrar = selectionRegistrar;\r\n    this.selectionColor = selectionColor;\r\n    this._renderObject = null;\r\n  }\r\n\r\n  /**\r\n   * Create render object\r\n   */\r\n  createRenderObject(context) {\r\n    return new RenderParagraph({\r\n      text: this.text,\r\n      textAlign: this.textAlign,\r\n      textDirection: this.textDirection || context?.textDirection || TextDirection.ltr,\r\n      softWrap: this.softWrap,\r\n      overflow: this.overflow,\r\n      textScaler: this.textScaler,\r\n      maxLines: this.maxLines,\r\n      locale: this.locale,\r\n      strutStyle: this.strutStyle,\r\n      textWidthBasis: this.textWidthBasis,\r\n      textHeightBehavior: this.textHeightBehavior,\r\n      selectionColor: this.selectionColor,\r\n      registrar: this.selectionRegistrar\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Update render object\r\n   */\r\n  updateRenderObject(context, renderObject) {\r\n    renderObject.text = this.text;\r\n    renderObject.textAlign = this.textAlign;\r\n    renderObject.textDirection = this.textDirection || context?.textDirection || TextDirection.ltr;\r\n    renderObject.softWrap = this.softWrap;\r\n    renderObject.overflow = this.overflow;\r\n    renderObject.textScaler = this.textScaler;\r\n    renderObject.maxLines = this.maxLines;\r\n    renderObject.locale = this.locale;\r\n    renderObject.strutStyle = this.strutStyle;\r\n    renderObject.textWidthBasis = this.textWidthBasis;\r\n    renderObject.textHeightBehavior = this.textHeightBehavior;\r\n    renderObject.selectionColor = this.selectionColor;\r\n    renderObject.registrar = this.selectionRegistrar;\r\n  }\r\n\r\n  /**\r\n   * Build widget tree\r\n   */\r\n  build(context) {\r\n    if (!this._renderObject) {\r\n      this._renderObject = this.createRenderObject(context);\r\n    } else {\r\n      this.updateRenderObject(context, this._renderObject);\r\n    }\r\n\r\n    const elementId = context.element.getElementId();\r\n    const widgetPath = context.element.getWidgetPath();\r\n    const effectiveTextDirection = this.textDirection || context?.textDirection || TextDirection.ltr;\r\n\r\n    // Build text VNode\r\n    const textVNode = this.text.buildVNode(this.textAlign, effectiveTextDirection);\r\n\r\n    // Map text align to CSS\r\n    const textAlignValue = this._mapTextAlign(this.textAlign, effectiveTextDirection);\r\n\r\n    // Determine overflow behavior\r\n    let overflowStyle = {};\r\n    switch (this.overflow) {\r\n      case TextOverflow.ellipsis:\r\n        overflowStyle = {\r\n          overflow: 'hidden',\r\n          textOverflow: 'ellipsis',\r\n          whiteSpace: 'nowrap'\r\n        };\r\n        break;\r\n      case TextOverflow.fade:\r\n        overflowStyle = {\r\n          overflow: 'hidden',\r\n          mask: 'linear-gradient(to right, black 95%, transparent)'\r\n        };\r\n        break;\r\n      case TextOverflow.clip:\r\n        overflowStyle = {\r\n          overflow: 'hidden'\r\n        };\r\n        break;\r\n      case TextOverflow.visible:\r\n        overflowStyle = {\r\n          overflow: 'visible'\r\n        };\r\n        break;\r\n    }\r\n\r\n    const style = {\r\n      textAlign: textAlignValue,\r\n      direction: effectiveTextDirection === TextDirection.rtl ? 'rtl' : 'ltr',\r\n      whiteSpace: this.softWrap ? 'normal' : 'nowrap',\r\n      wordWrap: this.softWrap ? 'break-word' : 'normal',\r\n      display: 'block',\r\n      ...overflowStyle\r\n    };\r\n\r\n    // Apply max lines\r\n    if (this.maxLines !== null) {\r\n      style.display = '-webkit-box';\r\n      style.WebkitLineClamp = this.maxLines;\r\n      style.WebkitBoxOrient = 'vertical';\r\n      style.overflow = 'hidden';\r\n    }\r\n\r\n    // Apply strut style\r\n    if (this.strutStyle) {\r\n      Object.assign(style, this.strutStyle.toCSSStyle());\r\n    }\r\n\r\n    // Apply selection color\r\n    if (this.selectionColor) {\r\n      style.userSelect = 'text';\r\n    }\r\n\r\n    return new VNode({\r\n      tag: 'div',\r\n      props: {\r\n        style,\r\n        'data-element-id': elementId,\r\n        'data-widget-path': widgetPath,\r\n        'data-widget': 'RichText',\r\n        'data-text-align': this.textAlign,\r\n        'data-text-direction': effectiveTextDirection,\r\n        'data-overflow': this.overflow,\r\n        'data-max-lines': this.maxLines,\r\n        'data-soft-wrap': this.softWrap\r\n      },\r\n      children: [textVNode],\r\n      key: this.key\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Map text align to CSS\r\n   * @private\r\n   */\r\n  _mapTextAlign(textAlign, textDirection) {\r\n    const isRTL = textDirection === TextDirection.rtl;\r\n\r\n    // Handle shorthand string: \".center\" -> \"center\"\r\n    if (typeof textAlign === 'string' && textAlign.startsWith('.')) {\r\n      textAlign = textAlign.substring(1);\r\n    }\r\n\r\n    switch (textAlign) {\r\n      case TextAlign.start:\r\n        return isRTL ? 'right' : 'left';\r\n      case TextAlign.end:\r\n        return isRTL ? 'left' : 'right';\r\n      case TextAlign.left:\r\n        return 'left';\r\n      case TextAlign.right:\r\n        return 'right';\r\n      case TextAlign.center:\r\n        return 'center';\r\n      case TextAlign.justify:\r\n        return 'justify';\r\n      default:\r\n        return 'start';\r\n    }\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({ name: 'textAlign', value: this.textAlign });\r\n    properties.push({ name: 'textDirection', value: this.textDirection });\r\n    properties.push({ name: 'softWrap', value: this.softWrap });\r\n    properties.push({ name: 'overflow', value: this.overflow });\r\n    properties.push({ name: 'textScaleFactor', value: this.textScaler.textScaleFactor });\r\n    properties.push({ name: 'maxLines', value: this.maxLines });\r\n    properties.push({ name: 'text', value: this.text.toPlainText?.() || 'N/A' });\r\n  }\r\n\r\n  createElement(parent, runtime) {\r\n    return new RichTextElement(this, parent, runtime);\r\n  }\r\n}\r\n\r\nclass RichTextElement extends Element {\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport {\r\n  RichText,\r\n  RichTextElement,\r\n  RenderParagraph,\r\n  TextSpan,\r\n  WidgetSpan,\r\n  InlineSpan,\r\n  StrutStyle,\r\n  TextScaler,\r\n  TextAlign,\r\n  TextOverflow,\r\n  TextWidthBasis,\r\n  TextBaseline\r\n};"],
-  "mappings": "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",
-  "names": ["Widget", "Element", "VNode", "TextDirection", "TextAlign", "TextOverflow", "TextWidthBasis", "TextBaseline", "TextScaler", "scale", "factor", "textSize", "InlineSpan", "TextSpan", "text", "style", "children", "recognizer", "result", "child", "textAlign", "textDirection", "childVNodes", "WidgetSpan", "alignment", "baseline", "childElement", "span", "textScaler", "widgets", "traverse", "inlineSpan", "TextStyle", "color", "fontSize", "fontWeight", "fontStyle", "fontFamily", "height", "letterSpacing", "wordSpacing", "textDecoration", "decorationColor", "decorationStyle", "decorationThickness", "backgroundColor", "foregroundColor", "shadows", "fontFeatures", "fontVariations", "shadow", "other", "StrutStyle", "fontFamilyFallback", "leading", "forceStrutHeight", "RenderParagraph", "softWrap", "overflow", "maxLines", "locale", "strutStyle", "textWidthBasis", "textHeightBehavior", "selectionColor", "registrar", "RichText", "key", "textScaleFactor", "selectionRegistrar", "effectiveTextScaler", "context", "renderObject", "elementId", "widgetPath", "effectiveTextDirection", "textVNode", "textAlignValue", "overflowStyle", "isRTL", "properties", "parent", "runtime", "RichTextElement"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/shader_mask.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/shader_mask.js
deleted file mode 100644
index 4c83ff35..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/shader_mask.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{ProxyWidget as c}from"../../core/widget_element.js";import{VNode as u}from"@flutterjs/vdom/vnode";import{BlendMode as d}from"./opacity.js";class b extends c{constructor({key:e=null,shaderCallback:t=null,blendMode:n=d.modulate,child:i=null}={}){if(super({key:e,child:i}),typeof t!="function")throw new Error(`ShaderMask requires a shaderCallback function, got: ${typeof t}`);if(!Object.values(d).includes(n))throw new Error(`Invalid blendMode: ${n}`);this.shaderCallback=t,this.blendMode=n,this._renderObject=null,this._containerElement=null,this._maskImageUrl=null}createRenderObject(e){return new m({shaderCallback:this.shaderCallback,blendMode:this.blendMode})}updateRenderObject(e,t){t.shaderCallback=this.shaderCallback,t.blendMode=this.blendMode}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);let t=null;if(this.child)if(this.child.createElement){const r=this.child.createElement(e.element,e.element.runtime);r.mount(e.element),t=r.performRebuild()}else t=this.child;const n=e.element.getElementId(),i=e.element.getWidgetPath();return new u({tag:"div",props:{style:{position:"relative",overflow:"hidden",display:"inline-block"},"data-element-id":n,"data-widget-path":i,"data-widget":"ShaderMask","data-blend-mode":this.blendMode,ref:r=>this._onContainerMount(r,e)},children:[new u({tag:"div",props:{style:{position:"relative",width:"100%",height:"100%"},"data-widget":"ShaderMaskContent",ref:r=>this._onContentMount(r)},children:t?[t]:[]})],key:this.key})}_onContainerMount(e,t){if(!e)return;this._containerElement=e,this._containerElement&&this._generateAndApplyShaderMask();const n=()=>this._generateAndApplyShaderMask();window.addEventListener("resize",n),e._cleanupResize=()=>{window.removeEventListener("resize",n)}}_onContentMount(e){e&&this._containerElement&&this._generateAndApplyShaderMask()}_generateAndApplyShaderMask(){if(this._containerElement)try{const e=this._containerElement.getBoundingClientRect(),t={width:Math.ceil(e.width)||200,height:Math.ceil(e.height)||200},n=this.shaderCallback(t);this._applyShaderToContainer(n,t)}catch(e){console.error("Error rendering shader mask:",e)}}_applyShaderToContainer(e,t){if(!(!this._containerElement||!e)){if(e.type==="gradient"&&e.gradient){const n=this._createGradientMask(e.gradient,t);this._applyMaskImage(n)}e.type==="svg"&&e.svgContent&&this._applyMaskImage(`url('data:image/svg+xml;utf8,${encodeURIComponent(e.svgContent)}')`),e.type==="url"&&e.url&&this._applyMaskImage(`url('${e.url}')`),e.maskImage&&this._applyMaskImage(e.maskImage),this.blendMode&&(this._containerElement.style.mixBlendMode=this.blendMode)}}_applyMaskImage(e){!this._containerElement||!e||(this._containerElement.style.WebkitMaskImage=e,this._containerElement.style.WebkitMaskSize="100% 100%",this._containerElement.style.WebkitMaskRepeat="no-repeat",this._containerElement.style.WebkitMaskPosition="0 0",this._containerElement.style.maskImage=e,this._containerElement.style.maskSize="100% 100%",this._containerElement.style.maskRepeat="no-repeat",this._containerElement.style.maskPosition="0 0",this._maskImageUrl=e)}_createGradientMask(e,t){const n="http://www.w3.org/2000/svg",i=document.createElementNS(n,"svg");i.setAttribute("width",t.width),i.setAttribute("height",t.height),i.setAttribute("viewBox",`0 0 ${t.width} ${t.height}`);const r=document.createElementNS(n,"defs"),a=document.createElementNS(n,"linearGradient");a.setAttribute("id","maskGradient"),a.setAttribute("x1","0%"),a.setAttribute("y1","0%"),a.setAttribute("x2","100%"),a.setAttribute("y2","0%"),[{offset:"0%",color:"#000000",opacity:"1"},{offset:"100%",color:"#000000",opacity:"0"}].forEach(o=>{const l=document.createElementNS(n,"stop");l.setAttribute("offset",o.offset),l.setAttribute("stop-color",o.color),l.setAttribute("stop-opacity",o.opacity),a.appendChild(l)}),r.appendChild(a),i.appendChild(r);const s=document.createElementNS(n,"rect");s.setAttribute("width",t.width),s.setAttribute("height",t.height),s.setAttribute("fill","url(#maskGradient)"),i.appendChild(s);const p=new XMLSerializer().serializeToString(i);return`url('data:image/svg+xml;utf8,${encodeURIComponent(p)}')`}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"blendMode",value:this.blendMode}),e.push({name:"shaderCallback",value:"function"}),this._maskImageUrl&&e.push({name:"maskApplied",value:"true"})}createElement(e,t){return new g(this,e,t)}}class m{constructor({shaderCallback:e=null,blendMode:t=d.modulate}={}){this.shaderCallback=e,this.blendMode=t}applyToElement(e){e&&(e.style.position="relative",e.style.overflow="hidden")}generateShader(e){try{return this.shaderCallback(e)}catch(t){return console.error("Error in shaderCallback:",t),null}}debugInfo(){return{type:"RenderShaderMask",blendMode:this.blendMode,hasShaderCallback:typeof this.shaderCallback=="function"}}}class g extends c.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}detach(){this.widget._containerElement&&this.widget._containerElement._cleanupResize&&this.widget._containerElement._cleanupResize(),super.detach()}}export{m as RenderShaderMask,b as ShaderMask};
-//# sourceMappingURL=shader_mask.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/shader_mask.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/shader_mask.js.map
deleted file mode 100644
index 7c393ce4..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/shader_mask.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/shader_mask.js"],
-  "sourcesContent": ["import { ProxyWidget } from '../../core/widget_element.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { BlendMode } from './opacity.js';\r\n\r\n// ============================================================================\r\n// SHADER MASK WIDGET - FLUTTER-LIKE BEHAVIOR\r\n// Applies shader mask directly to child rendering (CSS mask-image)\r\n// ============================================================================\r\n\r\nclass ShaderMask extends ProxyWidget {\r\n    constructor({ key = null, shaderCallback = null, blendMode = BlendMode.modulate, child = null } = {}) {\r\n        super({ key, child });\r\n\r\n        if (typeof shaderCallback !== 'function') {\r\n            throw new Error(\r\n                `ShaderMask requires a shaderCallback function, got: ${typeof shaderCallback}`\r\n            );\r\n        }\r\n\r\n        if (!Object.values(BlendMode).includes(blendMode)) {\r\n            throw new Error(\r\n                `Invalid blendMode: ${blendMode}`\r\n            );\r\n        }\r\n\r\n        this.shaderCallback = shaderCallback;\r\n        this.blendMode = blendMode;\r\n        this._renderObject = null;\r\n        this._containerElement = null;\r\n        this._maskImageUrl = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object for shader mask\r\n     */\r\n    createRenderObject(context) {\r\n        return new RenderShaderMask({\r\n            shaderCallback: this.shaderCallback,\r\n            blendMode: this.blendMode,\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Update render object when properties change\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.shaderCallback = this.shaderCallback;\r\n        renderObject.blendMode = this.blendMode;\r\n    }\r\n\r\n    /**\r\n     * Build the widget tree\r\n     */\r\n    build(context) {\r\n        // Create or update render object\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        // Build child widget\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            if (this.child.createElement) {\r\n                const childElement = this.child.createElement(context.element, context.element.runtime);\r\n                childElement.mount(context.element);\r\n                childVNode = childElement.performRebuild();\r\n            } else {\r\n                childVNode = this.child;\r\n            }\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        // Create container that applies mask to children\r\n        // Similar to Flutter: the shader mask applies TO the child, not over it\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style: {\r\n                    position: 'relative',\r\n                    overflow: 'hidden',\r\n                    display: 'inline-block'\r\n                },\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'ShaderMask',\r\n                'data-blend-mode': this.blendMode,\r\n                ref: (el) => this._onContainerMount(el, context)\r\n            },\r\n            children: [\r\n                // Child content wrapper with mask applied\r\n                new VNode({\r\n                    tag: 'div',\r\n                    props: {\r\n                        style: {\r\n                            position: 'relative',\r\n                            width: '100%',\r\n                            height: '100%'\r\n                        },\r\n                        'data-widget': 'ShaderMaskContent',\r\n                        ref: (el) => this._onContentMount(el)\r\n                    },\r\n                    children: childVNode ? [childVNode] : []\r\n                })\r\n            ],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Mount container\r\n     */\r\n    _onContainerMount(el, context) {\r\n        if (!el) return;\r\n\r\n        this._containerElement = el;\r\n\r\n        // Generate and apply shader mask when container is mounted\r\n        if (this._containerElement) {\r\n            this._generateAndApplyShaderMask();\r\n        }\r\n\r\n        // Re-render on window resize\r\n        const resizeHandler = () => this._generateAndApplyShaderMask();\r\n        window.addEventListener('resize', resizeHandler);\r\n\r\n        // Cleanup on unmount\r\n        el._cleanupResize = () => {\r\n            window.removeEventListener('resize', resizeHandler);\r\n        };\r\n    }\r\n\r\n    /**\r\n     * Mount content element\r\n     */\r\n    _onContentMount(el) {\r\n        if (!el) return;\r\n\r\n        // Apply mask to content when it's mounted\r\n        if (this._containerElement) {\r\n            this._generateAndApplyShaderMask();\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Generate shader mask and apply it to container\r\n     */\r\n    _generateAndApplyShaderMask() {\r\n        if (!this._containerElement) return;\r\n\r\n        try {\r\n            // Get container dimensions\r\n            const rect = this._containerElement.getBoundingClientRect();\r\n            const size = {\r\n                width: Math.ceil(rect.width) || 200,\r\n                height: Math.ceil(rect.height) || 200\r\n            };\r\n\r\n            // Call shader callback to get shader configuration\r\n            const shaderConfig = this.shaderCallback(size);\r\n\r\n            // Apply shader mask to container (affects children rendering)\r\n            this._applyShaderToContainer(shaderConfig, size);\r\n        } catch (error) {\r\n            console.error('Error rendering shader mask:', error);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Apply shader mask to container (Flutter-like behavior)\r\n     * The mask is applied TO the child elements, not over them\r\n     */\r\n    _applyShaderToContainer(shaderConfig, size) {\r\n        if (!this._containerElement || !shaderConfig) return;\r\n\r\n        // Handle gradient-based masks (like Flutter)\r\n        if (shaderConfig.type === 'gradient' && shaderConfig.gradient) {\r\n            // Create SVG-based mask from gradient\r\n            const maskSvg = this._createGradientMask(shaderConfig.gradient, size);\r\n            this._applyMaskImage(maskSvg);\r\n        }\r\n\r\n        // Handle SVG-based masks\r\n        if (shaderConfig.type === 'svg' && shaderConfig.svgContent) {\r\n            // Use SVG directly as mask\r\n            this._applyMaskImage(`url('data:image/svg+xml;utf8,${encodeURIComponent(shaderConfig.svgContent)}')`);\r\n        }\r\n\r\n        // Handle URL-based masks\r\n        if (shaderConfig.type === 'url' && shaderConfig.url) {\r\n            this._applyMaskImage(`url('${shaderConfig.url}')`);\r\n        }\r\n\r\n        // Handle custom mask-image CSS\r\n        if (shaderConfig.maskImage) {\r\n            this._applyMaskImage(shaderConfig.maskImage);\r\n        }\r\n\r\n        // Apply blend mode if needed\r\n        if (this.blendMode) {\r\n            this._containerElement.style.mixBlendMode = this.blendMode;\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Apply mask-image to container\r\n     */\r\n    _applyMaskImage(maskImage) {\r\n        if (!this._containerElement || !maskImage) return;\r\n\r\n        // Apply CSS mask (works on all modern browsers)\r\n        this._containerElement.style.WebkitMaskImage = maskImage;\r\n        this._containerElement.style.WebkitMaskSize = '100% 100%';\r\n        this._containerElement.style.WebkitMaskRepeat = 'no-repeat';\r\n        this._containerElement.style.WebkitMaskPosition = '0 0';\r\n\r\n        // Standard mask properties\r\n        this._containerElement.style.maskImage = maskImage;\r\n        this._containerElement.style.maskSize = '100% 100%';\r\n        this._containerElement.style.maskRepeat = 'no-repeat';\r\n        this._containerElement.style.maskPosition = '0 0';\r\n\r\n        this._maskImageUrl = maskImage;\r\n    }\r\n\r\n    /**\r\n     * Create SVG-based gradient mask from gradient string\r\n     */\r\n    _createGradientMask(gradientCss, size) {\r\n        // Parse gradient and create SVG mask\r\n        const svgNS = 'http://www.w3.org/2000/svg';\r\n        const svg = document.createElementNS(svgNS, 'svg');\r\n        svg.setAttribute('width', size.width);\r\n        svg.setAttribute('height', size.height);\r\n        svg.setAttribute('viewBox', `0 0 ${size.width} ${size.height}`);\r\n\r\n        const defs = document.createElementNS(svgNS, 'defs');\r\n\r\n        // Create gradient definition from CSS gradient\r\n        const gradient = document.createElementNS(svgNS, 'linearGradient');\r\n        gradient.setAttribute('id', 'maskGradient');\r\n        gradient.setAttribute('x1', '0%');\r\n        gradient.setAttribute('y1', '0%');\r\n        gradient.setAttribute('x2', '100%');\r\n        gradient.setAttribute('y2', '0%');\r\n\r\n        // Parse simple gradient colors\r\n        // For: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0))\r\n        const colorStops = [\r\n            { offset: '0%', color: '#000000', opacity: '1' },\r\n            { offset: '100%', color: '#000000', opacity: '0' }\r\n        ];\r\n\r\n        colorStops.forEach(stop => {\r\n            const stop_el = document.createElementNS(svgNS, 'stop');\r\n            stop_el.setAttribute('offset', stop.offset);\r\n            stop_el.setAttribute('stop-color', stop.color);\r\n            stop_el.setAttribute('stop-opacity', stop.opacity);\r\n            gradient.appendChild(stop_el);\r\n        });\r\n\r\n        defs.appendChild(gradient);\r\n        svg.appendChild(defs);\r\n\r\n        // Create rect with gradient\r\n        const rect = document.createElementNS(svgNS, 'rect');\r\n        rect.setAttribute('width', size.width);\r\n        rect.setAttribute('height', size.height);\r\n        rect.setAttribute('fill', 'url(#maskGradient)');\r\n        svg.appendChild(rect);\r\n\r\n        // Convert SVG to data URL\r\n        const svgString = new XMLSerializer().serializeToString(svg);\r\n        return `url('data:image/svg+xml;utf8,${encodeURIComponent(svgString)}')`;\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({\r\n            name: 'blendMode',\r\n            value: this.blendMode\r\n        });\r\n        properties.push({\r\n            name: 'shaderCallback',\r\n            value: 'function'\r\n        });\r\n        if (this._maskImageUrl) {\r\n            properties.push({\r\n                name: 'maskApplied',\r\n                value: 'true'\r\n            });\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new ShaderMaskElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER SHADER MASK\r\n// ============================================================================\r\n\r\nclass RenderShaderMask {\r\n    constructor({ shaderCallback = null, blendMode = BlendMode.modulate } = {}) {\r\n        this.shaderCallback = shaderCallback;\r\n        this.blendMode = blendMode;\r\n    }\r\n\r\n    /**\r\n     * Apply shader mask to element\r\n     */\r\n    applyToElement(element) {\r\n        if (element) {\r\n            element.style.position = 'relative';\r\n            element.style.overflow = 'hidden';\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Generate shader (calls the callback)\r\n     */\r\n    generateShader(size) {\r\n        try {\r\n            return this.shaderCallback(size);\r\n        } catch (error) {\r\n            console.error('Error in shaderCallback:', error);\r\n            return null;\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Get debug info\r\n     */\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderShaderMask',\r\n            blendMode: this.blendMode,\r\n            hasShaderCallback: typeof this.shaderCallback === 'function'\r\n        };\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// SHADER MASK ELEMENT\r\n// ============================================================================\r\n\r\nclass ShaderMaskElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n\r\n    detach() {\r\n        // Cleanup resize listener\r\n        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {\r\n            this.widget._containerElement._cleanupResize();\r\n        }\r\n        super.detach();\r\n    }\r\n}\r\n\r\nexport { ShaderMask, RenderShaderMask };"],
-  "mappings": "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",
-  "names": ["ProxyWidget", "VNode", "BlendMode", "ShaderMask", "key", "shaderCallback", "blendMode", "child", "context", "RenderShaderMask", "renderObject", "childVNode", "childElement", "elementId", "widgetPath", "el", "resizeHandler", "rect", "size", "shaderConfig", "error", "maskSvg", "maskImage", "gradientCss", "svgNS", "svg", "defs", "gradient", "stop", "stop_el", "svgString", "properties", "parent", "runtime", "ShaderMaskElement", "element"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/sized_box.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/sized_box.js
deleted file mode 100644
index b6bd8ed7..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/sized_box.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{ProxyWidget as h,ProxyElement as l}from"../../core/widget_element.js";import{VNode as f}from"@flutterjs/vdom/vnode";import{Alignment as u}from"../../utils/utils.js";import{Size as x}from"../../utils/size.js";import{BoxConstraints as d}from"../../utils/box_constraints.js";const g={max:"max",min:"min"};class s extends h{constructor({key:t=null,width:e=null,height:i=null,child:n=null}={}){super({key:t,child:n}),this.width=e,this.height=i,this._renderObject=null}static expand({key:t=null,child:e=null}={}){return new s({key:t,width:1/0,height:1/0,child:e})}static shrink({key:t=null,child:e=null}={}){return new s({key:t,width:0,height:0,child:e})}static square({key:t=null,dimension:e=0,child:i=null}={}){return new s({key:t,width:e,height:e,child:i})}static fromSize({key:t=null,size:e=null,child:i=null}={}){return new s({key:t,width:e?.width,height:e?.height,child:i})}createRenderObject(t){return{constraints:this._getConstraints()}}updateRenderObject(t,e){e.constraints=this._getConstraints()}_getConstraints(){return d.tightFor({width:this.width===1/0?null:this.width,height:this.height===1/0?null:this.height})}debugFillProperties(t){super.debugFillProperties(t),t.push({name:"width",value:this.width}),t.push({name:"height",value:this.height})}createElement(t,e){return new w(this,t,e)}}class w extends l{performRebuild(){const t=this.getElementId(),e=this.getWidgetPath(),i={boxSizing:"border-box",flexShrink:0};this.widget.width!==null&&this.widget.width!==void 0&&(this.widget.width===1/0?(i.width="100%",i.flex="1 1 auto"):i.width=`${this.widget.width}px`),this.widget.height!==null&&this.widget.height!==void 0&&(this.widget.height===1/0?(i.height="100%",i.flex="1 1 auto"):i.height=`${this.widget.height}px`);const n=super.performRebuild();return new f({tag:"div",props:{style:i,"data-element-id":t,"data-widget-path":e,"data-widget":"SizedBox","data-width":this.widget.width,"data-height":this.widget.height},children:n?[n]:[],key:this.widget.key})}}class b extends h{constructor({key:t=null,constraints:e=null,child:i=null}={}){if(super({key:t,child:i}),!e)throw new Error("ConstrainedBox requires constraints");if(!(e instanceof d))throw new Error(`ConstrainedBox requires a BoxConstraints instance, got: ${typeof e}`);this.constraints=e,this._renderObject=null}createRenderObject(t){return{additionalConstraints:this.constraints}}updateRenderObject(t,e){e.additionalConstraints=this.constraints}debugFillProperties(t){super.debugFillProperties(t),t.push({name:"constraints",value:this.constraints.toString()})}createElement(t,e){return new l(this,t,e)}}class p extends h{constructor({key:t=null,maxWidth:e=1/0,maxHeight:i=1/0,child:n=null}={}){if(super({key:t,child:n}),e<0||i<0)throw new Error("maxWidth and maxHeight must be >= 0");this.maxWidth=e,this.maxHeight=i,this._renderObject=null}createRenderObject(t){return{maxWidth:this.maxWidth,maxHeight:this.maxHeight}}updateRenderObject(t,e){e.maxWidth=this.maxWidth,e.maxHeight=this.maxHeight}debugFillProperties(t){super.debugFillProperties(t),t.push({name:"maxWidth",value:this.maxWidth}),t.push({name:"maxHeight",value:this.maxHeight})}createElement(t,e){return new l(this,t,e)}}class F extends h{constructor({key:t=null,alignment:e=u.center,minWidth:i=null,maxWidth:n=null,minHeight:a=null,maxHeight:m=null,fit:o=g.max,child:c=null}={}){super({key:t,child:c}),this.alignment=e,this.minWidth=i,this.maxWidth=n,this.minHeight=a,this.maxHeight=m,this.fit=o,this._renderObject=null}createRenderObject(t){return{alignment:this.alignment,minWidth:this.minWidth,maxWidth:this.maxWidth,minHeight:this.minHeight,maxHeight:this.maxHeight,fit:this.fit}}updateRenderObject(t,e){e.alignment=this.alignment,e.minWidth=this.minWidth,e.maxWidth=this.maxWidth,e.minHeight=this.minHeight,e.maxHeight=this.maxHeight,e.fit=this.fit}_getAlignmentValue(t){return t==="horizontal"?this.alignment.x<0?"flex-start":this.alignment.x>0?"flex-end":"center":t==="vertical"?this.alignment.y<0?"flex-start":this.alignment.y>0?"flex-end":"center":"center"}debugFillProperties(t){super.debugFillProperties(t),t.push({name:"alignment",value:this.alignment.toString()}),t.push({name:"fit",value:this.fit}),this.minWidth!==null&&t.push({name:"minWidth",value:this.minWidth}),this.maxWidth!==null&&t.push({name:"maxWidth",value:this.maxWidth}),this.minHeight!==null&&t.push({name:"minHeight",value:this.minHeight}),this.maxHeight!==null&&t.push({name:"maxHeight",value:this.maxHeight})}createElement(t,e){return new l(this,t,e)}}class v extends h{constructor({key:t=null,size:e=null,alignment:i=u.center,child:n=null}={}){if(super({key:t,child:n}),!e)throw new Error("SizedOverflowBox requires a size");this.size=e,this.alignment=i,this._renderObject=null}createRenderObject(t){return{requestedSize:this.size,alignment:this.alignment}}updateRenderObject(t,e){e.requestedSize=this.size,e.alignment=this.alignment}_getAlignmentValue(t){return t==="horizontal"?this.alignment.x<0?"flex-start":this.alignment.x>0?"flex-end":"center":t==="vertical"?this.alignment.y<0?"flex-start":this.alignment.y>0?"flex-end":"center":"center"}debugFillProperties(t){super.debugFillProperties(t),t.push({name:"size",value:this.size.toString()}),t.push({name:"alignment",value:this.alignment.toString()})}createElement(t,e){return new l(this,t,e)}}class W extends h{constructor({key:t=null,offstage:e=!0,child:i=null}={}){super({key:t,child:i}),this.offstage=e,this._renderObject=null}createRenderObject(t){return{offstage:this.offstage}}updateRenderObject(t,e){e.offstage=this.offstage}debugFillProperties(t){super.debugFillProperties(t),t.push({name:"offstage",value:this.offstage})}createElement(t,e){return new l(this,t,e)}}class H extends h{constructor({key:t=null,alignment:e=u.center,widthFactor:i=null,heightFactor:n=null,child:a=null}={}){if(super({key:t,child:a}),i!==null&&i<0)throw new Error("widthFactor must be >= 0");if(n!==null&&n<0)throw new Error("heightFactor must be >= 0");this.alignment=e,this.widthFactor=i,this.heightFactor=n,this._renderObject=null}createRenderObject(t){return{alignment:this.alignment,widthFactor:this.widthFactor,heightFactor:this.heightFactor}}updateRenderObject(t,e){e.alignment=this.alignment,e.widthFactor=this.widthFactor,e.heightFactor=this.heightFactor}_getAlignmentValue(t){return t==="horizontal"?this.alignment.x<0?"flex-start":this.alignment.x>0?"flex-end":"center":t==="vertical"?this.alignment.y<0?"flex-start":this.alignment.y>0?"flex-end":"center":"center"}debugFillProperties(t){super.debugFillProperties(t),t.push({name:"alignment",value:this.alignment.toString()}),this.widthFactor!==null&&t.push({name:"widthFactor",value:this.widthFactor}),this.heightFactor!==null&&t.push({name:"heightFactor",value:this.heightFactor})}createElement(t,e){return new l(this,t,e)}}export{d as BoxConstraints,b as ConstrainedBox,H as FractionallySizedBox,p as LimitedBox,W as Offstage,F as OverflowBox,g as OverflowBoxFit,x as Size,s as SizedBox,v as SizedOverflowBox};
-//# sourceMappingURL=sized_box.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/sized_box.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/sized_box.js.map
deleted file mode 100644
index ea8dc7f1..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/sized_box.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/sized_box.js"],
-  "sourcesContent": ["import { ProxyWidget, ProxyElement } from '../../core/widget_element.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { Alignment } from '../../utils/utils.js';\r\n\r\nimport { Size } from '../../utils/size.js';\r\nimport { BoxConstraints } from '../../utils/box_constraints.js';\r\n\r\n// ============================================================================\r\n// OVERFLOW BOX FIT ENUM\r\n// ============================================================================\r\n\r\nconst OverflowBoxFit = {\r\n    max: 'max',\r\n    min: 'min'\r\n};\r\n\r\n// ============================================================================\r\n// IMPROVED SIZED BOX WIDGET\r\n// ============================================================================\r\n\r\nclass SizedBox extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        width = null,\r\n        height = null,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        this.width = width;\r\n        this.height = height;\r\n        this._renderObject = null;\r\n    }\r\n\r\n    /**\r\n     * Create a box that expands to fill available space\r\n     */\r\n    static expand({ key = null, child = null } = {}) {\r\n        return new SizedBox({\r\n            key,\r\n            width: Infinity,\r\n            height: Infinity,\r\n            child\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Create a box with zero width and height\r\n     */\r\n    static shrink({ key = null, child = null } = {}) {\r\n        return new SizedBox({\r\n            key,\r\n            width: 0,\r\n            height: 0,\r\n            child\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Create a square box\r\n     */\r\n    static square({ key = null, dimension = 0, child = null } = {}) {\r\n        return new SizedBox({\r\n            key,\r\n            width: dimension,\r\n            height: dimension,\r\n            child\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Create from Size object\r\n     */\r\n    static fromSize({ key = null, size = null, child = null } = {}) {\r\n        return new SizedBox({\r\n            key,\r\n            width: size?.width,\r\n            height: size?.height,\r\n            child\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return {\r\n            constraints: this._getConstraints()\r\n        };\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.constraints = this._getConstraints();\r\n    }\r\n\r\n    /**\r\n     * Get constraints from width/height\r\n     * @private\r\n     */\r\n    _getConstraints() {\r\n        return BoxConstraints.tightFor({\r\n            width: this.width === Infinity ? null : this.width,\r\n            height: this.height === Infinity ? null : this.height\r\n        });\r\n    }\r\n\r\n\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'width', value: this.width });\r\n        properties.push({ name: 'height', value: this.height });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new SizedBoxElement(this, parent, runtime);\r\n    }\r\n}\r\n\r\nclass SizedBoxElement extends ProxyElement {\r\n    performRebuild() {\r\n        const elementId = this.getElementId();\r\n        const widgetPath = this.getWidgetPath();\r\n\r\n        const style = {\r\n            boxSizing: 'border-box',\r\n            flexShrink: 0\r\n        };\r\n\r\n        // Apply width\r\n        if (this.widget.width !== null && this.widget.width !== undefined) {\r\n            if (this.widget.width === Infinity) {\r\n                style.width = '100%';\r\n                style.flex = '1 1 auto';\r\n            } else {\r\n                style.width = `${this.widget.width}px`;\r\n            }\r\n        }\r\n\r\n        // Apply height\r\n        if (this.widget.height !== null && this.widget.height !== undefined) {\r\n            if (this.widget.height === Infinity) {\r\n                style.height = '100%';\r\n                style.flex = '1 1 auto';\r\n            } else {\r\n                style.height = `${this.widget.height}px`;\r\n            }\r\n        }\r\n\r\n        // Get child VNode from parent class (this handles the widget lifecycle)\r\n        const childVNode = super.performRebuild();\r\n\r\n        // Wrap child VNode (or create empty div if no child)\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style,\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'SizedBox',\r\n                'data-width': this.widget.width,\r\n                'data-height': this.widget.height\r\n            },\r\n            children: childVNode ? [childVNode] : [],\r\n            key: this.widget.key\r\n        });\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// CONSTRAINED BOX WIDGET\r\n// ============================================================================\r\n\r\nclass ConstrainedBox extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        constraints = null,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (!constraints) {\r\n            throw new Error('ConstrainedBox requires constraints');\r\n        }\r\n\r\n        if (!(constraints instanceof BoxConstraints)) {\r\n            throw new Error(\r\n                `ConstrainedBox requires a BoxConstraints instance, got: ${typeof constraints}`\r\n            );\r\n        }\r\n\r\n        this.constraints = constraints;\r\n        this._renderObject = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return { additionalConstraints: this.constraints };\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.additionalConstraints = this.constraints;\r\n    }/**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'constraints', value: this.constraints.toString() });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new ProxyElement(this, parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// LIMITED BOX WIDGET\r\n// Limits size only when constrained by parent\r\n// ============================================================================\r\n\r\nclass LimitedBox extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        maxWidth = Infinity,\r\n        maxHeight = Infinity,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (maxWidth < 0 || maxHeight < 0) {\r\n            throw new Error('maxWidth and maxHeight must be >= 0');\r\n        }\r\n\r\n        this.maxWidth = maxWidth;\r\n        this.maxHeight = maxHeight;\r\n        this._renderObject = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return { maxWidth: this.maxWidth, maxHeight: this.maxHeight };\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.maxWidth = this.maxWidth;\r\n        renderObject.maxHeight = this.maxHeight;\r\n    }/**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'maxWidth', value: this.maxWidth });\r\n        properties.push({ name: 'maxHeight', value: this.maxHeight });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new ProxyElement(this, parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// OVERFLOW BOX WIDGET\r\n// Allows child to overflow parent constraints\r\n// ============================================================================\r\n\r\nclass OverflowBox extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        alignment = Alignment.center,\r\n        minWidth = null,\r\n        maxWidth = null,\r\n        minHeight = null,\r\n        maxHeight = null,\r\n        fit = OverflowBoxFit.max,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        this.alignment = alignment;\r\n        this.minWidth = minWidth;\r\n        this.maxWidth = maxWidth;\r\n        this.minHeight = minHeight;\r\n        this.maxHeight = maxHeight;\r\n        this.fit = fit;\r\n        this._renderObject = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return {\r\n            alignment: this.alignment,\r\n            minWidth: this.minWidth,\r\n            maxWidth: this.maxWidth,\r\n            minHeight: this.minHeight,\r\n            maxHeight: this.maxHeight,\r\n            fit: this.fit\r\n        };\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.alignment = this.alignment;\r\n        renderObject.minWidth = this.minWidth;\r\n        renderObject.maxWidth = this.maxWidth;\r\n        renderObject.minHeight = this.minHeight;\r\n        renderObject.maxHeight = this.maxHeight;\r\n        renderObject.fit = this.fit;\r\n    }/**\r\n     * Get alignment value for flex\r\n     * @private\r\n     */\r\n    _getAlignmentValue(direction) {\r\n        if (direction === 'horizontal') {\r\n            if (this.alignment.x < 0) return 'flex-start';\r\n            if (this.alignment.x > 0) return 'flex-end';\r\n            return 'center';\r\n        } else if (direction === 'vertical') {\r\n            if (this.alignment.y < 0) return 'flex-start';\r\n            if (this.alignment.y > 0) return 'flex-end';\r\n            return 'center';\r\n        }\r\n        return 'center';\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'alignment', value: this.alignment.toString() });\r\n        properties.push({ name: 'fit', value: this.fit });\r\n        if (this.minWidth !== null) properties.push({ name: 'minWidth', value: this.minWidth });\r\n        if (this.maxWidth !== null) properties.push({ name: 'maxWidth', value: this.maxWidth });\r\n        if (this.minHeight !== null) properties.push({ name: 'minHeight', value: this.minHeight });\r\n        if (this.maxHeight !== null) properties.push({ name: 'maxHeight', value: this.maxHeight });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new ProxyElement(this, parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// SIZED OVERFLOW BOX WIDGET\r\n// Fixed size with ability to overflow\r\n// ============================================================================\r\n\r\nclass SizedOverflowBox extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        size = null,\r\n        alignment = Alignment.center,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (!size) {\r\n            throw new Error('SizedOverflowBox requires a size');\r\n        }\r\n\r\n        this.size = size;\r\n        this.alignment = alignment;\r\n        this._renderObject = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return {\r\n            requestedSize: this.size,\r\n            alignment: this.alignment\r\n        };\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.requestedSize = this.size;\r\n        renderObject.alignment = this.alignment;\r\n    }/**\r\n     * Get alignment value for flex\r\n     * @private\r\n     */\r\n    _getAlignmentValue(direction) {\r\n        if (direction === 'horizontal') {\r\n            if (this.alignment.x < 0) return 'flex-start';\r\n            if (this.alignment.x > 0) return 'flex-end';\r\n            return 'center';\r\n        } else if (direction === 'vertical') {\r\n            if (this.alignment.y < 0) return 'flex-start';\r\n            if (this.alignment.y > 0) return 'flex-end';\r\n            return 'center';\r\n        }\r\n        return 'center';\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'size', value: this.size.toString() });\r\n        properties.push({ name: 'alignment', value: this.alignment.toString() });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new ProxyElement(this, parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// OFFSTAGE WIDGET\r\n// Hides child from view but keeps it in the tree\r\n// ============================================================================\r\n\r\nclass Offstage extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        offstage = true,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        this.offstage = offstage;\r\n        this._renderObject = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return { offstage: this.offstage };\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.offstage = this.offstage;\r\n    }/**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'offstage', value: this.offstage });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new ProxyElement(this, parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// FRACTIONALLY SIZED BOX WIDGET\r\n// Sizes child as a fraction of available space\r\n// ============================================================================\r\n\r\nclass FractionallySizedBox extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        alignment = Alignment.center,\r\n        widthFactor = null,\r\n        heightFactor = null,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (widthFactor !== null && widthFactor < 0) {\r\n            throw new Error('widthFactor must be >= 0');\r\n        }\r\n\r\n        if (heightFactor !== null && heightFactor < 0) {\r\n            throw new Error('heightFactor must be >= 0');\r\n        }\r\n\r\n        this.alignment = alignment;\r\n        this.widthFactor = widthFactor;\r\n        this.heightFactor = heightFactor;\r\n        this._renderObject = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return {\r\n            alignment: this.alignment,\r\n            widthFactor: this.widthFactor,\r\n            heightFactor: this.heightFactor\r\n        };\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.alignment = this.alignment;\r\n        renderObject.widthFactor = this.widthFactor;\r\n        renderObject.heightFactor = this.heightFactor;\r\n    }/**\r\n     * Get alignment value for flex\r\n     * @private\r\n     */\r\n    _getAlignmentValue(direction) {\r\n        if (direction === 'horizontal') {\r\n            if (this.alignment.x < 0) return 'flex-start';\r\n            if (this.alignment.x > 0) return 'flex-end';\r\n            return 'center';\r\n        } else if (direction === 'vertical') {\r\n            if (this.alignment.y < 0) return 'flex-start';\r\n            if (this.alignment.y > 0) return 'flex-end';\r\n            return 'center';\r\n        }\r\n        return 'center';\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'alignment', value: this.alignment.toString() });\r\n        if (this.widthFactor !== null) {\r\n            properties.push({ name: 'widthFactor', value: this.widthFactor });\r\n        }\r\n        if (this.heightFactor !== null) {\r\n            properties.push({ name: 'heightFactor', value: this.heightFactor });\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new ProxyElement(this, parent, runtime);\r\n    }\r\n}\r\n\r\nexport {\r\n    SizedBox,\r\n    ConstrainedBox,\r\n    LimitedBox,\r\n    OverflowBox,\r\n    SizedOverflowBox,\r\n    Offstage,\r\n    FractionallySizedBox,\r\n    Size,\r\n    BoxConstraints,\r\n    OverflowBoxFit\r\n};"],
-  "mappings": "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",
-  "names": ["ProxyWidget", "ProxyElement", "VNode", "Alignment", "Size", "BoxConstraints", "OverflowBoxFit", "SizedBox", "key", "width", "height", "child", "dimension", "size", "context", "renderObject", "properties", "parent", "runtime", "SizedBoxElement", "elementId", "widgetPath", "style", "childVNode", "ConstrainedBox", "constraints", "LimitedBox", "maxWidth", "maxHeight", "OverflowBox", "alignment", "minWidth", "minHeight", "fit", "direction", "SizedOverflowBox", "Offstage", "offstage", "FractionallySizedBox", "widthFactor", "heightFactor"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/sliver_box_adapter.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/sliver_box_adapter.js
deleted file mode 100644
index c00f6696..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/sliver_box_adapter.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import{ProxyWidget as u}from"../../core/widget_element.js";import{VNode as c}from"@flutterjs/vdom/vnode";import{EdgeInsets as Ce}from"./padding.js";const p={horizontal:"horizontal",vertical:"vertical"},r={up:"up",right:"right",down:"down",left:"left"},d={ltr:"ltr",rtl:"rtl"};function g(l){switch(l){case d.ltr:return r.right;case d.rtl:return r.left;default:return r.right}}function b(l){switch(l){case r.up:return r.down;case r.down:return r.up;case r.left:return r.right;case r.right:return r.left;default:return l}}function Fe(l,e,t){switch(e){case p.horizontal:const i=l.getTextDirection?.()||d.ltr,n=g(i);return t?b(n):n;case p.vertical:return t?r.up:r.down;default:return r.down}}class je extends u{constructor({key:e=null,child:t=null}={}){super({key:e,child:t}),this._renderObject=null}createRenderObject(e){return new m}updateRenderObject(e,t){}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);let t=null;if(this.child){const s=this.child.createElement(e.element,e.element.runtime);s.mount(e.element),t=s.performRebuild()}const i=e.element.getElementId(),n=e.element.getWidgetPath(),a={position:"relative",display:"block",width:"100%"};return new c({tag:"div",props:{style:a,"data-element-id":i,"data-widget-path":n,"data-widget":"SliverToBoxAdapter","data-is-sliver":"false"},children:t?[t]:[],key:this.key})}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"type",value:"SliverToBoxAdapter"})}createElement(e,t){return new Ie(this,e,t)}}class m{constructor(){}debugInfo(){return{type:"RenderSliverToBoxAdapter",convertsBoxToSliver:!0}}}class Ie extends u.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}}class Ve extends u{constructor({key:e=null,padding:t=null,sliver:i=null}={}){if(super({key:e,child:i}),!t)throw new Error("SliverPadding requires padding parameter");if(!(t instanceof Ce))throw new Error(`SliverPadding requires an EdgeInsets instance, got: ${typeof t}`);this.padding=t,this._renderObject=null,this._textDirection=d.ltr}createRenderObject(e){return new f({padding:this.padding,textDirection:e.getTextDirection?.()||d.ltr})}updateRenderObject(e,t){t.padding=this.padding,t.textDirection=e.getTextDirection?.()||d.ltr}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);let t=null;if(this.child){const o=this.child.createElement(e.element,e.element.runtime);o.mount(e.element),t=o.performRebuild()}const i=e.element.getElementId(),n=e.element.getWidgetPath(),s={position:"relative",display:"block",padding:this.padding.toCSSShorthand(),boxSizing:"border-box"};return new c({tag:"div",props:{style:s,"data-element-id":i,"data-widget-path":n,"data-widget":"SliverPadding","data-padding":this.padding.toString(),"data-padding-top":this.padding.top,"data-padding-right":this.padding.right,"data-padding-bottom":this.padding.bottom,"data-padding-left":this.padding.left,"data-is-sliver":"true"},children:t?[t]:[],key:this.key})}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"padding",value:this.padding.toString()})}createElement(e,t){return new _e(this,e,t)}}class f{constructor({padding:e=null,textDirection:t=d.ltr}={}){this.padding=e,this.textDirection=t}debugInfo(){return{type:"RenderSliverPadding",padding:this.padding?.toString(),textDirection:this.textDirection}}}class _e extends u.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}}class x{constructor({enabled:e=null,checked:t=null,mixed:i=null,selected:n=null,toggled:a=null,button:s=null,slider:o=null,keyboardKey:h=null,link:w=null,linkUrl:D=null,header:y=null,headingLevel:R=null,textField:A=null,readOnly:k=null,focusable:P=null,focused:T=null,inMutuallyExclusiveGroup:E=null,obscured:O=null,multiline:C=null,scopesRoute:F=null,namesRoute:j=null,hidden:I=null,image:V=null,liveRegion:_=null,expanded:N=null,isRequired:B=null,maxValueLength:L=null,currentValueLength:U=null,identifier:z=null,traversalParentIdentifier:M=null,traversalChildIdentifier:W=null,label:$=null,attributedLabel:q=null,value:G=null,attributedValue:H=null,increasedValue:K=null,attributedIncreasedValue:J=null,decreasedValue:Q=null,attributedDecreasedValue:X=null,hint:Y=null,attributedHint:Z=null,tooltip:ee=null,textDirection:te=null,sortKey:ie=null,tagForChildren:le=null,onTap:ne=null,onLongPress:re=null,onScrollLeft:se=null,onScrollRight:oe=null,onScrollUp:ae=null,onScrollDown:de=null,onIncrease:ue=null,onDecrease:he=null,onCopy:ce=null,onCut:pe=null,onPaste:ge=null,onMoveCursorForwardByCharacter:be=null,onMoveCursorBackwardByCharacter:me=null,onDidGainAccessibilityFocus:fe=null,onDidLoseAccessibilityFocus:xe=null,onFocus:Se=null,onDismiss:ve=null,onSetSelection:we=null,onSetText:De=null,onExpand:ye=null,onCollapse:Re=null,customSemanticsActions:Ae=null,hintOverrides:ke=null,role:Pe=null,controlsNodes:Te=null,validationResult:Ee=null,inputType:Oe=null}={}){this.enabled=e,this.checked=t,this.mixed=i,this.selected=n,this.toggled=a,this.button=s,this.slider=o,this.keyboardKey=h,this.link=w,this.linkUrl=D,this.header=y,this.headingLevel=R,this.textField=A,this.readOnly=k,this.focusable=P,this.focused=T,this.inMutuallyExclusiveGroup=E,this.obscured=O,this.multiline=C,this.scopesRoute=F,this.namesRoute=j,this.hidden=I,this.image=V,this.liveRegion=_,this.expanded=N,this.isRequired=B,this.maxValueLength=L,this.currentValueLength=U,this.identifier=z,this.traversalParentIdentifier=M,this.traversalChildIdentifier=W,this.label=$,this.attributedLabel=q,this.value=G,this.attributedValue=H,this.increasedValue=K,this.attributedIncreasedValue=J,this.decreasedValue=Q,this.attributedDecreasedValue=X,this.hint=Y,this.attributedHint=Z,this.tooltip=ee,this.textDirection=te,this.sortKey=ie,this.tagForChildren=le,this.onTap=ne,this.onLongPress=re,this.onScrollLeft=se,this.onScrollRight=oe,this.onScrollUp=ae,this.onScrollDown=de,this.onIncrease=ue,this.onDecrease=he,this.onCopy=ce,this.onCut=pe,this.onPaste=ge,this.onMoveCursorForwardByCharacter=be,this.onMoveCursorBackwardByCharacter=me,this.onDidGainAccessibilityFocus=fe,this.onDidLoseAccessibilityFocus=xe,this.onFocus=Se,this.onDismiss=ve,this.onSetSelection=we,this.onSetText=De,this.onExpand=ye,this.onCollapse=Re,this.customSemanticsActions=Ae||new Map,this.hintOverrides=ke,this.role=Pe,this.controlsNodes=Te||new Set,this.validationResult=Ee,this.inputType=Oe}get containsText(){return this.label!==null||this.attributedLabel!==null||this.value!==null||this.attributedValue!==null||this.increasedValue!==null||this.attributedIncreasedValue!==null||this.decreasedValue!==null||this.attributedDecreasedValue!==null||this.hint!==null||this.attributedHint!==null||this.tooltip!==null}getTextDirection(e){return this.textDirection!==null?this.textDirection:this.containsText?e:null}toString(){return`SemanticsProperties(
-      label: ${this.label},
-      value: ${this.value},
-      role: ${this.role}
-    )`}}class S extends u{constructor({key:e=null,child:t=null,container:i=!1,explicitChildNodes:n=!1,excludeSemantics:a=!1,blockUserActions:s=!1,localeForSubtree:o=null,properties:h=null}={}){if(super({key:e,child:t}),o!==null&&!i)throw new Error("To assign locale for subtree, this widget needs to be a container");this.container=i,this.explicitChildNodes=n,this.excludeSemantics=a,this.blockUserActions=s,this.localeForSubtree=o,this.properties=h||new x,this._renderObject=null}getTextDirection(e){const t=e.getTextDirection?.()||d.ltr;return this.properties.getTextDirection(t)}createRenderObject(e){return new v({container:this.container,explicitChildNodes:this.explicitChildNodes,excludeSemantics:this.excludeSemantics,blockUserActions:this.blockUserActions,properties:this.properties,localeForSubtree:this.localeForSubtree,textDirection:this.getTextDirection(e)})}updateRenderObject(e,t){t.container=this.container,t.explicitChildNodes=this.explicitChildNodes,t.excludeSemantics=this.excludeSemantics,t.blockUserActions=this.blockUserActions,t.properties=this.properties,t.textDirection=this.getTextDirection(e),t.localeForSubtree=this.localeForSubtree}build(e){this._renderObject?this.updateRenderObject(e,this._renderObject):this._renderObject=this.createRenderObject(e);let t=null;if(this.child){const o=this.child.createElement(e.element,e.element.runtime);o.mount(e.element),t=o.performRebuild()}const i=e.element.getElementId(),n=e.element.getWidgetPath(),a={position:"relative"},s=this._buildAriaAttributes();return new c({tag:"div",props:{style:a,"data-element-id":i,"data-widget-path":n,"data-widget":this.constructor.name,"data-container":this.container,"data-exclude-semantics":this.excludeSemantics,...s},children:t?[t]:[],key:this.key})}_buildAriaAttributes(){const e={};return this.properties.label&&(e["aria-label"]=this.properties.label),this.properties.value&&(e["aria-valuetext"]=this.properties.value),this.properties.hint&&(e["aria-description"]=this.properties.hint),this.properties.button&&(e.role="button"),this.properties.link&&(e.role="link",this.properties.linkUrl&&(e.href=this.properties.linkUrl.toString())),this.properties.header&&(e.role="heading",this.properties.headingLevel&&(e["aria-level"]=this.properties.headingLevel)),this.properties.slider&&(e.role="slider"),this.properties.checkbox&&(e.role="checkbox",e["aria-checked"]=this.properties.checked?"true":"false"),this.properties.textField&&(e.role="textbox",e["aria-readonly"]=this.properties.readOnly?"true":"false"),this.properties.focusable&&(e.tabindex="0"),this.properties.focused&&(e["aria-focused"]="true"),this.properties.hidden&&(e["aria-hidden"]="true"),this.properties.expanded!==null&&(e["aria-expanded"]=this.properties.expanded?"true":"false"),this.excludeSemantics&&(e["aria-hidden"]="true"),e}debugFillProperties(e){super.debugFillProperties(e),e.push({name:"container",value:this.container}),e.push({name:"explicitChildNodes",value:this.explicitChildNodes}),e.push({name:"excludeSemantics",value:this.excludeSemantics}),this.properties.label&&e.push({name:"label",value:this.properties.label})}}class v{constructor({container:e=!1,explicitChildNodes:t=!1,excludeSemantics:i=!1,blockUserActions:n=!1,properties:a=null,localeForSubtree:s=null,textDirection:o=null}={}){this.container=e,this.explicitChildNodes=t,this.excludeSemantics=i,this.blockUserActions=n,this.properties=a,this.localeForSubtree=s,this.textDirection=o}debugInfo(){return{type:"RenderSemanticsAnnotations",container:this.container,excludeSemantics:this.excludeSemantics,properties:this.properties?.toString()}}}class Ne extends S{constructor({key:e=null,sliver:t=null,container:i=!1,explicitChildNodes:n=!1,excludeSemantics:a=!1,blockUserActions:s=!1,localeForSubtree:o=null,properties:h=null}={}){super({key:e,child:t,container:i,explicitChildNodes:n,excludeSemantics:a,blockUserActions:s,localeForSubtree:o,properties:h})}createElement(e,t){return new Be(this,e,t)}}class Be extends u.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}}export{p as Axis,r as AxisDirection,v as RenderSemanticsAnnotations,f as RenderSliverPadding,m as RenderSliverToBoxAdapter,S as SemanticsBase,x as SemanticsProperties,Ve as SliverPadding,Ne as SliverSemantics,je as SliverToBoxAdapter,d as TextDirection,b as flipAxisDirection,Fe as getAxisDirectionFromAxisReverseAndDirectionality,g as textDirectionToAxisDirection};
-//# sourceMappingURL=sliver_box_adapter.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/sliver_box_adapter.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/sliver_box_adapter.js.map
deleted file mode 100644
index 40fcf7d8..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/sliver_box_adapter.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/sliver_box_adapter.js"],
-  "sourcesContent": ["import { ProxyWidget } from '../../core/widget_element.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { EdgeInsets } from './padding.js';\r\n\r\n// ============================================================================\r\n// AXIS ENUM\r\n// ============================================================================\r\n\r\nconst Axis = {\r\n  horizontal: 'horizontal',\r\n  vertical: 'vertical'\r\n};\r\n\r\n// ============================================================================\r\n// AXIS DIRECTION ENUM\r\n// ============================================================================\r\n\r\nconst AxisDirection = {\r\n  up: 'up',\r\n  right: 'right',\r\n  down: 'down',\r\n  left: 'left'\r\n};\r\n\r\n// ============================================================================\r\n// TEXT DIRECTION ENUM\r\n// ============================================================================\r\n\r\nconst TextDirection = {\r\n  ltr: 'ltr',  // left-to-right\r\n  rtl: 'rtl'   // right-to-left\r\n};\r\n\r\n// ============================================================================\r\n// UTILITY FUNCTIONS\r\n// ============================================================================\r\n\r\n/**\r\n * Convert TextDirection to AxisDirection\r\n */\r\nfunction textDirectionToAxisDirection(textDirection) {\r\n  switch (textDirection) {\r\n    case TextDirection.ltr:\r\n      return AxisDirection.right;\r\n    case TextDirection.rtl:\r\n      return AxisDirection.left;\r\n    default:\r\n      return AxisDirection.right;\r\n  }\r\n}\r\n\r\n/**\r\n * Flip AxisDirection (reverse)\r\n */\r\nfunction flipAxisDirection(axisDirection) {\r\n  switch (axisDirection) {\r\n    case AxisDirection.up:\r\n      return AxisDirection.down;\r\n    case AxisDirection.down:\r\n      return AxisDirection.up;\r\n    case AxisDirection.left:\r\n      return AxisDirection.right;\r\n    case AxisDirection.right:\r\n      return AxisDirection.left;\r\n    default:\r\n      return axisDirection;\r\n  }\r\n}\r\n\r\n/**\r\n * Get AxisDirection from Axis and reverse flag\r\n * Also considers text direction from context\r\n */\r\nfunction getAxisDirectionFromAxisReverseAndDirectionality(context, axis, reverse) {\r\n  switch (axis) {\r\n    case Axis.horizontal:\r\n      const textDirection = context.getTextDirection?.() || TextDirection.ltr;\r\n      const axisDirection = textDirectionToAxisDirection(textDirection);\r\n      return reverse ? flipAxisDirection(axisDirection) : axisDirection;\r\n\r\n    case Axis.vertical:\r\n      return reverse ? AxisDirection.up : AxisDirection.down;\r\n\r\n    default:\r\n      return AxisDirection.down;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// SLIVER TO BOX ADAPTER WIDGET\r\n// Converts a sliver widget to a box widget\r\n// ============================================================================\r\n\r\nclass SliverToBoxAdapter extends ProxyWidget {\r\n  constructor({\r\n    key = null,\r\n    child = null\r\n  } = {}) {\r\n    super({ key, child });\r\n\r\n    this._renderObject = null;\r\n  }\r\n\r\n  /**\r\n   * Create render object\r\n   */\r\n  createRenderObject(context) {\r\n    return new RenderSliverToBoxAdapter();\r\n  }\r\n\r\n  /**\r\n   * Update render object\r\n   */\r\n  updateRenderObject(context, renderObject) {\r\n    // No properties to update\r\n  }\r\n\r\n  /**\r\n   * Build the widget\r\n   */\r\n  build(context) {\r\n    if (!this._renderObject) {\r\n      this._renderObject = this.createRenderObject(context);\r\n    } else {\r\n      this.updateRenderObject(context, this._renderObject);\r\n    }\r\n\r\n    let childVNode = null;\r\n    if (this.child) {\r\n      const childElement = this.child.createElement(context.element, context.element.runtime);\r\n      childElement.mount(context.element);\r\n      childVNode = childElement.performRebuild();\r\n    }\r\n\r\n    const elementId = context.element.getElementId();\r\n    const widgetPath = context.element.getWidgetPath();\r\n\r\n    const style = {\r\n      position: 'relative',\r\n      display: 'block',\r\n      width: '100%'\r\n    };\r\n\r\n    return new VNode({\r\n      tag: 'div',\r\n      props: {\r\n        style,\r\n        'data-element-id': elementId,\r\n        'data-widget-path': widgetPath,\r\n        'data-widget': 'SliverToBoxAdapter',\r\n        'data-is-sliver': 'false'\r\n      },\r\n      children: childVNode ? [childVNode] : [],\r\n      key: this.key\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Debug properties\r\n   */\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({ name: 'type', value: 'SliverToBoxAdapter' });\r\n  }\r\n\r\n  /**\r\n   * Create element\r\n   */\r\n  createElement(parent, runtime) {\r\n    return new SliverToBoxAdapterElement(this,parent, runtime);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER SLIVER TO BOX ADAPTER\r\n// ============================================================================\r\n\r\nclass RenderSliverToBoxAdapter {\r\n  constructor() {}\r\n\r\n  debugInfo() {\r\n    return {\r\n      type: 'RenderSliverToBoxAdapter',\r\n      convertsBoxToSliver: true\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// SLIVER TO BOX ADAPTER ELEMENT\r\n// ============================================================================\r\n\r\nclass SliverToBoxAdapterElement extends ProxyWidget.constructor.prototype.constructor {\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// SLIVER PADDING WIDGET\r\n// Adds padding around a sliver child\r\n// ============================================================================\r\n\r\nclass SliverPadding extends ProxyWidget {\r\n  constructor({\r\n    key = null,\r\n    padding = null,\r\n    sliver = null\r\n  } = {}) {\r\n    super({ key, child: sliver });\r\n\r\n    if (!padding) {\r\n      throw new Error('SliverPadding requires padding parameter');\r\n    }\r\n\r\n    if (!(padding instanceof EdgeInsets)) {\r\n      throw new Error(\r\n        `SliverPadding requires an EdgeInsets instance, got: ${typeof padding}`\r\n      );\r\n    }\r\n\r\n    this.padding = padding;\r\n    this._renderObject = null;\r\n    this._textDirection = TextDirection.ltr;\r\n  }\r\n\r\n  /**\r\n   * Create render object\r\n   */\r\n  createRenderObject(context) {\r\n    return new RenderSliverPadding({\r\n      padding: this.padding,\r\n      textDirection: context.getTextDirection?.() || TextDirection.ltr\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Update render object\r\n   */\r\n  updateRenderObject(context, renderObject) {\r\n    renderObject.padding = this.padding;\r\n    renderObject.textDirection = context.getTextDirection?.() || TextDirection.ltr;\r\n  }\r\n\r\n  /**\r\n   * Build the widget\r\n   */\r\n  build(context) {\r\n    if (!this._renderObject) {\r\n      this._renderObject = this.createRenderObject(context);\r\n    } else {\r\n      this.updateRenderObject(context, this._renderObject);\r\n    }\r\n\r\n    let childVNode = null;\r\n    if (this.child) {\r\n      const childElement = this.child.createElement(context.element, context.element.runtime);\r\n      childElement.mount(context.element);\r\n      childVNode = childElement.performRebuild();\r\n    }\r\n\r\n    const elementId = context.element.getElementId();\r\n    const widgetPath = context.element.getWidgetPath();\r\n\r\n    // Convert padding to CSS\r\n    const paddingCSS = this.padding.toCSSShorthand();\r\n\r\n    const style = {\r\n      position: 'relative',\r\n      display: 'block',\r\n      padding: paddingCSS,\r\n      boxSizing: 'border-box'\r\n    };\r\n\r\n    return new VNode({\r\n      tag: 'div',\r\n      props: {\r\n        style,\r\n        'data-element-id': elementId,\r\n        'data-widget-path': widgetPath,\r\n        'data-widget': 'SliverPadding',\r\n        'data-padding': this.padding.toString(),\r\n        'data-padding-top': this.padding.top,\r\n        'data-padding-right': this.padding.right,\r\n        'data-padding-bottom': this.padding.bottom,\r\n        'data-padding-left': this.padding.left,\r\n        'data-is-sliver': 'true'\r\n      },\r\n      children: childVNode ? [childVNode] : [],\r\n      key: this.key\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Debug properties\r\n   */\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({\r\n      name: 'padding',\r\n      value: this.padding.toString()\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Create element\r\n   */\r\n  createElement(parent, runtime) {\r\n    return new SliverPaddingElement(this,parent, runtime);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER SLIVER PADDING\r\n// ============================================================================\r\n\r\nclass RenderSliverPadding {\r\n  constructor({ padding = null, textDirection = TextDirection.ltr } = {}) {\r\n    this.padding = padding;\r\n    this.textDirection = textDirection;\r\n  }\r\n\r\n  debugInfo() {\r\n    return {\r\n      type: 'RenderSliverPadding',\r\n      padding: this.padding?.toString(),\r\n      textDirection: this.textDirection\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// SLIVER PADDING ELEMENT\r\n// ============================================================================\r\n\r\nclass SliverPaddingElement extends ProxyWidget.constructor.prototype.constructor {\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// SEMANTICS PROPERTIES CLASS\r\n// Holds all semantics information for a widget\r\n// ============================================================================\r\n\r\nclass SemanticsProperties {\r\n  constructor({\r\n    enabled = null,\r\n    checked = null,\r\n    mixed = null,\r\n    selected = null,\r\n    toggled = null,\r\n    button = null,\r\n    slider = null,\r\n    keyboardKey = null,\r\n    link = null,\r\n    linkUrl = null,\r\n    header = null,\r\n    headingLevel = null,\r\n    textField = null,\r\n    readOnly = null,\r\n    focusable = null,\r\n    focused = null,\r\n    inMutuallyExclusiveGroup = null,\r\n    obscured = null,\r\n    multiline = null,\r\n    scopesRoute = null,\r\n    namesRoute = null,\r\n    hidden = null,\r\n    image = null,\r\n    liveRegion = null,\r\n    expanded = null,\r\n    isRequired = null,\r\n    maxValueLength = null,\r\n    currentValueLength = null,\r\n    identifier = null,\r\n    traversalParentIdentifier = null,\r\n    traversalChildIdentifier = null,\r\n    label = null,\r\n    attributedLabel = null,\r\n    value = null,\r\n    attributedValue = null,\r\n    increasedValue = null,\r\n    attributedIncreasedValue = null,\r\n    decreasedValue = null,\r\n    attributedDecreasedValue = null,\r\n    hint = null,\r\n    attributedHint = null,\r\n    tooltip = null,\r\n    textDirection = null,\r\n    sortKey = null,\r\n    tagForChildren = null,\r\n    onTap = null,\r\n    onLongPress = null,\r\n    onScrollLeft = null,\r\n    onScrollRight = null,\r\n    onScrollUp = null,\r\n    onScrollDown = null,\r\n    onIncrease = null,\r\n    onDecrease = null,\r\n    onCopy = null,\r\n    onCut = null,\r\n    onPaste = null,\r\n    onMoveCursorForwardByCharacter = null,\r\n    onMoveCursorBackwardByCharacter = null,\r\n    onDidGainAccessibilityFocus = null,\r\n    onDidLoseAccessibilityFocus = null,\r\n    onFocus = null,\r\n    onDismiss = null,\r\n    onSetSelection = null,\r\n    onSetText = null,\r\n    onExpand = null,\r\n    onCollapse = null,\r\n    customSemanticsActions = null,\r\n    hintOverrides = null,\r\n    role = null,\r\n    controlsNodes = null,\r\n    validationResult = null,\r\n    inputType = null\r\n  } = {}) {\r\n    this.enabled = enabled;\r\n    this.checked = checked;\r\n    this.mixed = mixed;\r\n    this.selected = selected;\r\n    this.toggled = toggled;\r\n    this.button = button;\r\n    this.slider = slider;\r\n    this.keyboardKey = keyboardKey;\r\n    this.link = link;\r\n    this.linkUrl = linkUrl;\r\n    this.header = header;\r\n    this.headingLevel = headingLevel;\r\n    this.textField = textField;\r\n    this.readOnly = readOnly;\r\n    this.focusable = focusable;\r\n    this.focused = focused;\r\n    this.inMutuallyExclusiveGroup = inMutuallyExclusiveGroup;\r\n    this.obscured = obscured;\r\n    this.multiline = multiline;\r\n    this.scopesRoute = scopesRoute;\r\n    this.namesRoute = namesRoute;\r\n    this.hidden = hidden;\r\n    this.image = image;\r\n    this.liveRegion = liveRegion;\r\n    this.expanded = expanded;\r\n    this.isRequired = isRequired;\r\n    this.maxValueLength = maxValueLength;\r\n    this.currentValueLength = currentValueLength;\r\n    this.identifier = identifier;\r\n    this.traversalParentIdentifier = traversalParentIdentifier;\r\n    this.traversalChildIdentifier = traversalChildIdentifier;\r\n    this.label = label;\r\n    this.attributedLabel = attributedLabel;\r\n    this.value = value;\r\n    this.attributedValue = attributedValue;\r\n    this.increasedValue = increasedValue;\r\n    this.attributedIncreasedValue = attributedIncreasedValue;\r\n    this.decreasedValue = decreasedValue;\r\n    this.attributedDecreasedValue = attributedDecreasedValue;\r\n    this.hint = hint;\r\n    this.attributedHint = attributedHint;\r\n    this.tooltip = tooltip;\r\n    this.textDirection = textDirection;\r\n    this.sortKey = sortKey;\r\n    this.tagForChildren = tagForChildren;\r\n    this.onTap = onTap;\r\n    this.onLongPress = onLongPress;\r\n    this.onScrollLeft = onScrollLeft;\r\n    this.onScrollRight = onScrollRight;\r\n    this.onScrollUp = onScrollUp;\r\n    this.onScrollDown = onScrollDown;\r\n    this.onIncrease = onIncrease;\r\n    this.onDecrease = onDecrease;\r\n    this.onCopy = onCopy;\r\n    this.onCut = onCut;\r\n    this.onPaste = onPaste;\r\n    this.onMoveCursorForwardByCharacter = onMoveCursorForwardByCharacter;\r\n    this.onMoveCursorBackwardByCharacter = onMoveCursorBackwardByCharacter;\r\n    this.onDidGainAccessibilityFocus = onDidGainAccessibilityFocus;\r\n    this.onDidLoseAccessibilityFocus = onDidLoseAccessibilityFocus;\r\n    this.onFocus = onFocus;\r\n    this.onDismiss = onDismiss;\r\n    this.onSetSelection = onSetSelection;\r\n    this.onSetText = onSetText;\r\n    this.onExpand = onExpand;\r\n    this.onCollapse = onCollapse;\r\n    this.customSemanticsActions = customSemanticsActions || new Map();\r\n    this.hintOverrides = hintOverrides;\r\n    this.role = role;\r\n    this.controlsNodes = controlsNodes || new Set();\r\n    this.validationResult = validationResult;\r\n    this.inputType = inputType;\r\n  }\r\n\r\n  /**\r\n   * Check if contains any text properties\r\n   */\r\n  get containsText() {\r\n    return (\r\n      this.label !== null ||\r\n      this.attributedLabel !== null ||\r\n      this.value !== null ||\r\n      this.attributedValue !== null ||\r\n      this.increasedValue !== null ||\r\n      this.attributedIncreasedValue !== null ||\r\n      this.decreasedValue !== null ||\r\n      this.attributedDecreasedValue !== null ||\r\n      this.hint !== null ||\r\n      this.attributedHint !== null ||\r\n      this.tooltip !== null\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Get text direction for semantics\r\n   */\r\n  getTextDirection(contextTextDirection) {\r\n    if (this.textDirection !== null) {\r\n      return this.textDirection;\r\n    }\r\n\r\n    if (!this.containsText) {\r\n      return null;\r\n    }\r\n\r\n    return contextTextDirection;\r\n  }\r\n\r\n  toString() {\r\n    return `SemanticsProperties(\r\n      label: ${this.label},\r\n      value: ${this.value},\r\n      role: ${this.role}\r\n    )`;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// SEMANTICS BASE CLASS (Abstract)\r\n// Base class for semantics widgets\r\n// ============================================================================\r\n\r\nclass SemanticsBase extends ProxyWidget {\r\n  constructor({\r\n    key = null,\r\n    child = null,\r\n    container = false,\r\n    explicitChildNodes = false,\r\n    excludeSemantics = false,\r\n    blockUserActions = false,\r\n    localeForSubtree = null,\r\n    properties = null\r\n  } = {}) {\r\n    super({ key, child });\r\n\r\n    if (localeForSubtree !== null && !container) {\r\n      throw new Error(\r\n        'To assign locale for subtree, this widget needs to be a container'\r\n      );\r\n    }\r\n\r\n    this.container = container;\r\n    this.explicitChildNodes = explicitChildNodes;\r\n    this.excludeSemantics = excludeSemantics;\r\n    this.blockUserActions = blockUserActions;\r\n    this.localeForSubtree = localeForSubtree;\r\n    this.properties = properties || new SemanticsProperties();\r\n    this._renderObject = null;\r\n  }\r\n\r\n  /**\r\n   * Get text direction from context\r\n   */\r\n  getTextDirection(context) {\r\n    const contextTextDirection = context.getTextDirection?.() || TextDirection.ltr;\r\n    return this.properties.getTextDirection(contextTextDirection);\r\n  }\r\n\r\n  /**\r\n   * Create render object\r\n   */\r\n  createRenderObject(context) {\r\n    return new RenderSemanticsAnnotations({\r\n      container: this.container,\r\n      explicitChildNodes: this.explicitChildNodes,\r\n      excludeSemantics: this.excludeSemantics,\r\n      blockUserActions: this.blockUserActions,\r\n      properties: this.properties,\r\n      localeForSubtree: this.localeForSubtree,\r\n      textDirection: this.getTextDirection(context)\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Update render object\r\n   */\r\n  updateRenderObject(context, renderObject) {\r\n    renderObject.container = this.container;\r\n    renderObject.explicitChildNodes = this.explicitChildNodes;\r\n    renderObject.excludeSemantics = this.excludeSemantics;\r\n    renderObject.blockUserActions = this.blockUserActions;\r\n    renderObject.properties = this.properties;\r\n    renderObject.textDirection = this.getTextDirection(context);\r\n    renderObject.localeForSubtree = this.localeForSubtree;\r\n  }\r\n\r\n  /**\r\n   * Build the widget\r\n   */\r\n  build(context) {\r\n    if (!this._renderObject) {\r\n      this._renderObject = this.createRenderObject(context);\r\n    } else {\r\n      this.updateRenderObject(context, this._renderObject);\r\n    }\r\n\r\n    let childVNode = null;\r\n    if (this.child) {\r\n      const childElement = this.child.createElement(context.element, context.element.runtime);\r\n      childElement.mount(context.element);\r\n      childVNode = childElement.performRebuild();\r\n    }\r\n\r\n    const elementId = context.element.getElementId();\r\n    const widgetPath = context.element.getWidgetPath();\r\n\r\n    const style = {\r\n      position: 'relative'\r\n    };\r\n\r\n    // Build aria attributes from semantics properties\r\n    const ariaAttrs = this._buildAriaAttributes();\r\n\r\n    return new VNode({\r\n      tag: 'div',\r\n      props: {\r\n        style,\r\n        'data-element-id': elementId,\r\n        'data-widget-path': widgetPath,\r\n        'data-widget': this.constructor.name,\r\n        'data-container': this.container,\r\n        'data-exclude-semantics': this.excludeSemantics,\r\n        ...ariaAttrs\r\n      },\r\n      children: childVNode ? [childVNode] : [],\r\n      key: this.key\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Build aria attributes from semantics properties\r\n   * @private\r\n   */\r\n  _buildAriaAttributes() {\r\n    const attrs = {};\r\n\r\n    if (this.properties.label) {\r\n      attrs['aria-label'] = this.properties.label;\r\n    }\r\n\r\n    if (this.properties.value) {\r\n      attrs['aria-valuetext'] = this.properties.value;\r\n    }\r\n\r\n    if (this.properties.hint) {\r\n      attrs['aria-description'] = this.properties.hint;\r\n    }\r\n\r\n    if (this.properties.button) {\r\n      attrs['role'] = 'button';\r\n    }\r\n\r\n    if (this.properties.link) {\r\n      attrs['role'] = 'link';\r\n      if (this.properties.linkUrl) {\r\n        attrs['href'] = this.properties.linkUrl.toString();\r\n      }\r\n    }\r\n\r\n    if (this.properties.header) {\r\n      attrs['role'] = 'heading';\r\n      if (this.properties.headingLevel) {\r\n        attrs['aria-level'] = this.properties.headingLevel;\r\n      }\r\n    }\r\n\r\n    if (this.properties.slider) {\r\n      attrs['role'] = 'slider';\r\n    }\r\n\r\n    if (this.properties.checkbox) {\r\n      attrs['role'] = 'checkbox';\r\n      attrs['aria-checked'] = this.properties.checked ? 'true' : 'false';\r\n    }\r\n\r\n    if (this.properties.textField) {\r\n      attrs['role'] = 'textbox';\r\n      attrs['aria-readonly'] = this.properties.readOnly ? 'true' : 'false';\r\n    }\r\n\r\n    if (this.properties.focusable) {\r\n      attrs['tabindex'] = '0';\r\n    }\r\n\r\n    if (this.properties.focused) {\r\n      attrs['aria-focused'] = 'true';\r\n    }\r\n\r\n    if (this.properties.hidden) {\r\n      attrs['aria-hidden'] = 'true';\r\n    }\r\n\r\n    if (this.properties.expanded !== null) {\r\n      attrs['aria-expanded'] = this.properties.expanded ? 'true' : 'false';\r\n    }\r\n\r\n    if (this.excludeSemantics) {\r\n      attrs['aria-hidden'] = 'true';\r\n    }\r\n\r\n    return attrs;\r\n  }\r\n\r\n  /**\r\n   * Debug properties\r\n   */\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({ name: 'container', value: this.container });\r\n    properties.push({ name: 'explicitChildNodes', value: this.explicitChildNodes });\r\n    properties.push({ name: 'excludeSemantics', value: this.excludeSemantics });\r\n    if (this.properties.label) {\r\n      properties.push({ name: 'label', value: this.properties.label });\r\n    }\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER SEMANTICS ANNOTATIONS\r\n// ============================================================================\r\n\r\nclass RenderSemanticsAnnotations {\r\n  constructor({\r\n    container = false,\r\n    explicitChildNodes = false,\r\n    excludeSemantics = false,\r\n    blockUserActions = false,\r\n    properties = null,\r\n    localeForSubtree = null,\r\n    textDirection = null\r\n  } = {}) {\r\n    this.container = container;\r\n    this.explicitChildNodes = explicitChildNodes;\r\n    this.excludeSemantics = excludeSemantics;\r\n    this.blockUserActions = blockUserActions;\r\n    this.properties = properties;\r\n    this.localeForSubtree = localeForSubtree;\r\n    this.textDirection = textDirection;\r\n  }\r\n\r\n  debugInfo() {\r\n    return {\r\n      type: 'RenderSemanticsAnnotations',\r\n      container: this.container,\r\n      excludeSemantics: this.excludeSemantics,\r\n      properties: this.properties?.toString()\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// SLIVER SEMANTICS WIDGET\r\n// Applies semantics to sliver children\r\n// ============================================================================\r\n\r\nclass SliverSemantics extends SemanticsBase {\r\n  constructor({\r\n    key = null,\r\n    sliver = null,\r\n    container = false,\r\n    explicitChildNodes = false,\r\n    excludeSemantics = false,\r\n    blockUserActions = false,\r\n    localeForSubtree = null,\r\n    properties = null\r\n  } = {}) {\r\n    super({\r\n      key,\r\n      child: sliver,\r\n      container,\r\n      explicitChildNodes,\r\n      excludeSemantics,\r\n      blockUserActions,\r\n      localeForSubtree,\r\n      properties\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Create element\r\n   */\r\n  createElement(parent, runtime) {\r\n    return new SliverSemanticsElement(this,parent, runtime);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// SLIVER SEMANTICS ELEMENT\r\n// ============================================================================\r\n\r\nclass SliverSemanticsElement extends ProxyWidget.constructor.prototype.constructor {\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n}\r\n\r\nexport {\r\n  SliverToBoxAdapter,\r\n  RenderSliverToBoxAdapter,\r\n  SliverPadding,\r\n  RenderSliverPadding,\r\n  SemanticsProperties,\r\n  SemanticsBase,\r\n  RenderSemanticsAnnotations,\r\n  SliverSemantics,\r\n  Axis,\r\n  AxisDirection,\r\n  TextDirection,\r\n  textDirectionToAxisDirection,\r\n  flipAxisDirection,\r\n  getAxisDirectionFromAxisReverseAndDirectionality\r\n};"],
-  "mappings": "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",
-  "names": ["ProxyWidget", "VNode", "EdgeInsets", "Axis", "AxisDirection", "TextDirection", "textDirectionToAxisDirection", "textDirection", "flipAxisDirection", "axisDirection", "getAxisDirectionFromAxisReverseAndDirectionality", "context", "axis", "reverse", "SliverToBoxAdapter", "key", "child", "RenderSliverToBoxAdapter", "renderObject", "childVNode", "childElement", "elementId", "widgetPath", "style", "properties", "parent", "runtime", "SliverToBoxAdapterElement", "SliverPadding", "padding", "sliver", "RenderSliverPadding", "SliverPaddingElement", "SemanticsProperties", "enabled", "checked", "mixed", "selected", "toggled", "button", "slider", "keyboardKey", "link", "linkUrl", "header", "headingLevel", "textField", "readOnly", "focusable", "focused", "inMutuallyExclusiveGroup", "obscured", "multiline", "scopesRoute", "namesRoute", "hidden", "image", "liveRegion", "expanded", "isRequired", "maxValueLength", "currentValueLength", "identifier", "traversalParentIdentifier", "traversalChildIdentifier", "label", "attributedLabel", "value", "attributedValue", "increasedValue", "attributedIncreasedValue", "decreasedValue", "attributedDecreasedValue", "hint", "attributedHint", "tooltip", "sortKey", "tagForChildren", "onTap", "onLongPress", "onScrollLeft", "onScrollRight", "onScrollUp", "onScrollDown", "onIncrease", "onDecrease", "onCopy", "onCut", "onPaste", "onMoveCursorForwardByCharacter", "onMoveCursorBackwardByCharacter", "onDidGainAccessibilityFocus", "onDidLoseAccessibilityFocus", "onFocus", "onDismiss", "onSetSelection", "onSetText", "onExpand", "onCollapse", "customSemanticsActions", "hintOverrides", "role", "controlsNodes", "validationResult", "inputType", "contextTextDirection", "SemanticsBase", "container", "explicitChildNodes", "excludeSemantics", "blockUserActions", "localeForSubtree", "RenderSemanticsAnnotations", "ariaAttrs", "attrs", "SliverSemantics", "SliverSemanticsElement"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/stack.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/stack.js
deleted file mode 100644
index 7ee9937f..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/stack.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{Widget as v}from"../../core/widget_element.js";import{Element as w}from"@flutterjs/runtime";import{VNode as D}from"@flutterjs/vdom/vnode";import{Clip as b,TextDirection as f,Alignment as l,AlignmentDirectional as E,StackFit as g}from"../../utils/utils.js";class y{constructor(){this.left=null,this.top=null,this.right=null,this.bottom=null,this.width=null,this.height=null}isPositioned(){return this.left!==null||this.top!==null||this.right!==null||this.bottom!==null||this.width!==null||this.height!==null}debugInfo(){return{left:this.left,top:this.top,right:this.right,bottom:this.bottom,width:this.width,height:this.height,isPositioned:this.isPositioned()}}}class _{constructor({alignment:t=E.topStart,textDirection:e=f.ltr,fit:i=g.loose,clipBehavior:h=b.hardEdge}={}){this.alignment=t,this.textDirection=e,this.fit=i,this.clipBehavior=h,this._children=[]}addChild(t){this._children.push(t)}removeChild(t){const e=this._children.indexOf(t);e>-1&&this._children.splice(e,1)}_resolveAlignment(){if(this.alignment.includes&&this.alignment.includes("Directional")){const t=this.textDirection===f.rtl;return{topStart:t?l.topRight:l.topLeft,topEnd:t?l.topLeft:l.topRight,centerStart:t?l.centerRight:l.centerLeft,centerEnd:t?l.centerLeft:l.centerRight,bottomStart:t?l.bottomRight:l.bottomLeft,bottomEnd:t?l.bottomLeft:l.bottomRight,topCenter:l.topCenter,center:l.center,bottomCenter:l.bottomCenter}[this.alignment]||l.topLeft}return this.alignment}_getAlignmentOffset(t){const e={topLeft:{x:"flex-start",y:"flex-start"},topCenter:{x:"center",y:"flex-start"},topRight:{x:"flex-end",y:"flex-start"},centerLeft:{x:"flex-start",y:"center"},center:{x:"center",y:"center"},centerRight:{x:"flex-end",y:"center"},bottomLeft:{x:"flex-start",y:"flex-end"},bottomCenter:{x:"center",y:"flex-end"},bottomRight:{x:"flex-end",y:"flex-end"}};return e[t]||e.topLeft}debugInfo(){return{type:"RenderStack",alignment:this.alignment,textDirection:this.textDirection,fit:this.fit,clipBehavior:this.clipBehavior,childCount:this._children.length,resolvedAlignment:this._resolveAlignment()}}}class a extends v{constructor({key:t=null,left:e=null,top:i=null,right:h=null,bottom:s=null,width:r=null,height:u=null,child:c=null}={}){if(super(t),e!==null&&h!==null&&r!==null)throw new Error("Cannot specify both left, right, and width");if(i!==null&&s!==null&&u!==null)throw new Error("Cannot specify both top, bottom, and height");this.left=e,this.top=i,this.right=h,this.bottom=s,this.width=r,this.height=u,this.child=c}static fill({key:t=null,left:e=0,top:i=0,right:h=0,bottom:s=0,child:r=null}={}){return new a({key:t,left:e,top:i,right:h,bottom:s,child:r})}static fromRect({key:t=null,rect:e=null,child:i=null}={}){if(!e)throw new Error("rect is required");return new a({key:t,left:e.left,top:e.top,width:e.width,height:e.height,child:i})}static directional({key:t=null,textDirection:e=f.ltr,start:i=null,top:h=null,end:s=null,bottom:r=null,width:u=null,height:c=null,child:n=null}={}){const d=e===f.rtl,p=d?s:i,x=d?i:s;return new a({key:t,left:p,top:h,right:x,bottom:r,width:u,height:c,child:n})}applyParentData(t){t.parentData||(t.parentData=new y);const e=t.parentData;let i=!1;e.left!==this.left&&(e.left=this.left,i=!0),e.top!==this.top&&(e.top=this.top,i=!0),e.right!==this.right&&(e.right=this.right,i=!0),e.bottom!==this.bottom&&(e.bottom=this.bottom,i=!0),e.width!==this.width&&(e.width=this.width,i=!0),e.height!==this.height&&(e.height=this.height,i=!0),i&&t.parent&&t.parent.markNeedsLayout?.()}build(t){return this.child}debugFillProperties(t){super.debugFillProperties(t),this.left!==null&&t.push({name:"left",value:this.left}),this.top!==null&&t.push({name:"top",value:this.top}),this.right!==null&&t.push({name:"right",value:this.right}),this.bottom!==null&&t.push({name:"bottom",value:this.bottom}),this.width!==null&&t.push({name:"width",value:this.width}),this.height!==null&&t.push({name:"height",value:this.height})}createElement(t,e){return new R(this,t,e)}}class R extends w{performRebuild(){return this.widget.build(this.context)}}class k extends v{constructor({key:t=null,alignment:e=E.topStart,textDirection:i=null,fit:h=g.loose,clipBehavior:s=b.hardEdge,children:r=[]}={}){super(t),this.alignment=e,this.textDirection=i,this.fit=h,this.clipBehavior=s,this.children=r||[],this._renderObject=null,this._containerElement=null,this._childElements=[]}_debugCheckHasDirectionality(t){return!0}_getEffectiveTextDirection(t){return this.textDirection||t?.textDirection||f.ltr}createRenderObject(t){return new _({alignment:this.alignment,textDirection:this._getEffectiveTextDirection(t),fit:this.fit,clipBehavior:this.clipBehavior})}updateRenderObject(t,e){e.alignment=this.alignment,e.textDirection=this._getEffectiveTextDirection(t),e.fit=this.fit,e.clipBehavior=this.clipBehavior}build(t){this._debugCheckHasDirectionality(t),this._renderObject?this.updateRenderObject(t,this._renderObject):this._renderObject=this.createRenderObject(t);const e=t.element.getElementId(),i=t.element.getWidgetPath(),h=this._renderObject._resolveAlignment(),s=this._renderObject._getAlignmentOffset(h),r=this.clipBehavior===b.none?"visible":"hidden",u={position:"relative",display:"inline-flex",width:this.fit===g.expand?"100%":"auto",height:this.fit===g.expand?"100%":"auto",overflow:r,alignItems:s.y,justifyContent:s.x},c=this.children.map((n,d)=>{const p=n.createElement(t.element,t.element.runtime);p.mount(t.element);const x=p.performRebuild();let o={position:"absolute"};return n instanceof a&&(n.left!==null&&(o.left=`${n.left}px`),n.top!==null&&(o.top=`${n.top}px`),n.right!==null&&(o.right=`${n.right}px`),n.bottom!==null&&(o.bottom=`${n.bottom}px`),n.width!==null&&(o.width=`${n.width}px`),n.height!==null&&(o.height=`${n.height}px`)),new D({tag:"div",props:{style:o,"data-stack-index":d,"data-positioned":n instanceof a},children:[x]})});return new D({tag:"div",props:{style:u,"data-element-id":e,"data-widget-path":i,"data-widget":"Stack","data-alignment":this.alignment,"data-fit":this.fit,"data-clip-behavior":this.clipBehavior,"data-text-direction":this._getEffectiveTextDirection(t),ref:n=>this._onContainerMount(n)},children:c,key:this.key})}_onContainerMount(t){t&&(this._containerElement=t)}debugFillProperties(t){super.debugFillProperties(t),t.push({name:"alignment",value:this.alignment}),t.push({name:"textDirection",value:this.textDirection}),t.push({name:"fit",value:this.fit}),t.push({name:"clipBehavior",value:this.clipBehavior}),t.push({name:"childCount",value:this.children.length})}createElement(t,e){return new C(this,t,e)}}class C extends w{performRebuild(){return this.widget.build(this.context)}}export{a as Positioned,R as PositionedElement,_ as RenderStack,k as Stack,C as StackElement,y as StackParentData};
-//# sourceMappingURL=stack.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/stack.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/stack.js.map
deleted file mode 100644
index ec23b120..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/stack.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/stack.js"],
-  "sourcesContent": ["import { Widget } from '../../core/widget_element.js';\r\nimport { Element } from \"@flutterjs/runtime\"\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { Clip, TextDirection, VerticalDirection, Alignment, AlignmentDirectional, StackFit } from '../../utils/utils.js';\r\n\r\n// ============================================================================\r\n// STACK PARENT DATA\r\n// Stores positioning data for children in Stack\r\n// ============================================================================\r\n\r\nclass StackParentData {\r\n  constructor() {\r\n    this.left = null;\r\n    this.top = null;\r\n    this.right = null;\r\n    this.bottom = null;\r\n    this.width = null;\r\n    this.height = null;\r\n  }\r\n\r\n  /**\r\n   * Check if child is positioned\r\n   */\r\n  isPositioned() {\r\n    return this.left !== null || this.top !== null ||\r\n      this.right !== null || this.bottom !== null ||\r\n      this.width !== null || this.height !== null;\r\n  }\r\n\r\n  debugInfo() {\r\n    return {\r\n      left: this.left,\r\n      top: this.top,\r\n      right: this.right,\r\n      bottom: this.bottom,\r\n      width: this.width,\r\n      height: this.height,\r\n      isPositioned: this.isPositioned()\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER STACK\r\n// Handles stack layout logic\r\n// ============================================================================\r\n\r\nclass RenderStack {\r\n  constructor({\r\n    alignment = AlignmentDirectional.topStart,\r\n    textDirection = TextDirection.ltr,\r\n    fit = StackFit.loose,\r\n    clipBehavior = Clip.hardEdge\r\n  } = {}) {\r\n    this.alignment = alignment;\r\n    this.textDirection = textDirection;\r\n    this.fit = fit;\r\n    this.clipBehavior = clipBehavior;\r\n    this._children = [];\r\n  }\r\n\r\n  /**\r\n   * Add child\r\n   */\r\n  addChild(child) {\r\n    this._children.push(child);\r\n  }\r\n\r\n  /**\r\n   * Remove child\r\n   */\r\n  removeChild(child) {\r\n    const index = this._children.indexOf(child);\r\n    if (index > -1) {\r\n      this._children.splice(index, 1);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Resolve alignment based on text direction\r\n   */\r\n  _resolveAlignment() {\r\n    if (this.alignment.includes && this.alignment.includes('Directional')) {\r\n      const isRTL = this.textDirection === TextDirection.rtl;\r\n\r\n      const rtlMap = {\r\n        'topStart': isRTL ? Alignment.topRight : Alignment.topLeft,\r\n        'topEnd': isRTL ? Alignment.topLeft : Alignment.topRight,\r\n        'centerStart': isRTL ? Alignment.centerRight : Alignment.centerLeft,\r\n        'centerEnd': isRTL ? Alignment.centerLeft : Alignment.centerRight,\r\n        'bottomStart': isRTL ? Alignment.bottomRight : Alignment.bottomLeft,\r\n        'bottomEnd': isRTL ? Alignment.bottomLeft : Alignment.bottomRight,\r\n        'topCenter': Alignment.topCenter,\r\n        'center': Alignment.center,\r\n        'bottomCenter': Alignment.bottomCenter\r\n      };\r\n\r\n      return rtlMap[this.alignment] || Alignment.topLeft;\r\n    }\r\n\r\n    return this.alignment;\r\n  }\r\n\r\n  /**\r\n   * Get alignment offset values\r\n   */\r\n  _getAlignmentOffset(alignment) {\r\n    const map = {\r\n      topLeft: { x: 'flex-start', y: 'flex-start' },\r\n      topCenter: { x: 'center', y: 'flex-start' },\r\n      topRight: { x: 'flex-end', y: 'flex-start' },\r\n      centerLeft: { x: 'flex-start', y: 'center' },\r\n      center: { x: 'center', y: 'center' },\r\n      centerRight: { x: 'flex-end', y: 'center' },\r\n      bottomLeft: { x: 'flex-start', y: 'flex-end' },\r\n      bottomCenter: { x: 'center', y: 'flex-end' },\r\n      bottomRight: { x: 'flex-end', y: 'flex-end' }\r\n    };\r\n\r\n    return map[alignment] || map.topLeft;\r\n  }\r\n\r\n  debugInfo() {\r\n    return {\r\n      type: 'RenderStack',\r\n      alignment: this.alignment,\r\n      textDirection: this.textDirection,\r\n      fit: this.fit,\r\n      clipBehavior: this.clipBehavior,\r\n      childCount: this._children.length,\r\n      resolvedAlignment: this._resolveAlignment()\r\n    };\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// POSITIONED WIDGET\r\n// Positions a child absolutely within Stack\r\n// ============================================================================\r\n\r\nclass Positioned extends Widget {\r\n  constructor({\r\n    key = null,\r\n    left = null,\r\n    top = null,\r\n    right = null,\r\n    bottom = null,\r\n    width = null,\r\n    height = null,\r\n    child = null\r\n  } = {}) {\r\n    super(key);\r\n\r\n    // Validate constraints\r\n    if (left !== null && right !== null && width !== null) {\r\n      throw new Error('Cannot specify both left, right, and width');\r\n    }\r\n    if (top !== null && bottom !== null && height !== null) {\r\n      throw new Error('Cannot specify both top, bottom, and height');\r\n    }\r\n\r\n    this.left = left;\r\n    this.top = top;\r\n    this.right = right;\r\n    this.bottom = bottom;\r\n    this.width = width;\r\n    this.height = height;\r\n    this.child = child;\r\n  }\r\n\r\n  /**\r\n   * Create fill positioned (stretch to parent)\r\n   */\r\n  static fill({\r\n    key = null,\r\n    left = 0,\r\n    top = 0,\r\n    right = 0,\r\n    bottom = 0,\r\n    child = null\r\n  } = {}) {\r\n    return new Positioned({\r\n      key,\r\n      left,\r\n      top,\r\n      right,\r\n      bottom,\r\n      child\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Create from rect\r\n   */\r\n  static fromRect({\r\n    key = null,\r\n    rect = null,\r\n    child = null\r\n  } = {}) {\r\n    if (!rect) throw new Error('rect is required');\r\n    return new Positioned({\r\n      key,\r\n      left: rect.left,\r\n      top: rect.top,\r\n      width: rect.width,\r\n      height: rect.height,\r\n      child\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Create directional positioned\r\n   */\r\n  static directional({\r\n    key = null,\r\n    textDirection = TextDirection.ltr,\r\n    start = null,\r\n    top = null,\r\n    end = null,\r\n    bottom = null,\r\n    width = null,\r\n    height = null,\r\n    child = null\r\n  } = {}) {\r\n    const isRTL = textDirection === TextDirection.rtl;\r\n    const left = isRTL ? end : start;\r\n    const right = isRTL ? start : end;\r\n\r\n    return new Positioned({\r\n      key,\r\n      left,\r\n      top,\r\n      right,\r\n      bottom,\r\n      width,\r\n      height,\r\n      child\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Apply positioning to render object\r\n   */\r\n  applyParentData(renderObject) {\r\n    if (!renderObject.parentData) {\r\n      renderObject.parentData = new StackParentData();\r\n    }\r\n\r\n    const parentData = renderObject.parentData;\r\n    let needsLayout = false;\r\n\r\n    if (parentData.left !== this.left) {\r\n      parentData.left = this.left;\r\n      needsLayout = true;\r\n    }\r\n    if (parentData.top !== this.top) {\r\n      parentData.top = this.top;\r\n      needsLayout = true;\r\n    }\r\n    if (parentData.right !== this.right) {\r\n      parentData.right = this.right;\r\n      needsLayout = true;\r\n    }\r\n    if (parentData.bottom !== this.bottom) {\r\n      parentData.bottom = this.bottom;\r\n      needsLayout = true;\r\n    }\r\n    if (parentData.width !== this.width) {\r\n      parentData.width = this.width;\r\n      needsLayout = true;\r\n    }\r\n    if (parentData.height !== this.height) {\r\n      parentData.height = this.height;\r\n      needsLayout = true;\r\n    }\r\n\r\n    if (needsLayout && renderObject.parent) {\r\n      renderObject.parent.markNeedsLayout?.();\r\n    }\r\n  }\r\n\r\n  build(context) {\r\n    return this.child;\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    if (this.left !== null) properties.push({ name: 'left', value: this.left });\r\n    if (this.top !== null) properties.push({ name: 'top', value: this.top });\r\n    if (this.right !== null) properties.push({ name: 'right', value: this.right });\r\n    if (this.bottom !== null) properties.push({ name: 'bottom', value: this.bottom });\r\n    if (this.width !== null) properties.push({ name: 'width', value: this.width });\r\n    if (this.height !== null) properties.push({ name: 'height', value: this.height });\r\n  }\r\n\r\n  createElement(parent, runtime) {\r\n    return new PositionedElement(this, parent, runtime);\r\n  }\r\n}\r\n\r\nclass PositionedElement extends Element {\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// STACK WIDGET\r\n// Multi-child widget with absolute positioning\r\n// ============================================================================\r\n\r\nclass Stack extends Widget {\r\n  constructor({\r\n    key = null,\r\n    alignment = AlignmentDirectional.topStart,\r\n    textDirection = null,\r\n    fit = StackFit.loose,\r\n    clipBehavior = Clip.hardEdge,\r\n    children = []\r\n  } = {}) {\r\n    super(key);\r\n\r\n    this.alignment = alignment;\r\n    this.textDirection = textDirection;\r\n    this.fit = fit;\r\n    this.clipBehavior = clipBehavior;\r\n    this.children = children || [];\r\n    this._renderObject = null;\r\n    this._containerElement = null;\r\n    this._childElements = [];\r\n  }\r\n\r\n  /**\r\n   * Debug check for directionality\r\n   */\r\n  _debugCheckHasDirectionality(context) {\r\n    if (process.env.NODE_ENV !== 'development') return true;\r\n\r\n    const isDirectional = this.alignment.includes &&\r\n      this.alignment.includes('Directional');\r\n\r\n    if (isDirectional && this.textDirection === null) {\r\n      console.warn(\r\n        `Stack: alignment '${this.alignment}' is directional and requires textDirection. ` +\r\n        `Either provide explicit textDirection or use non-directional alignment like 'center'.`\r\n      );\r\n    }\r\n\r\n    return true;\r\n  }\r\n\r\n  /**\r\n   * Get effective text direction\r\n   */\r\n  _getEffectiveTextDirection(context) {\r\n    return this.textDirection || context?.textDirection || TextDirection.ltr;\r\n  }\r\n\r\n  /**\r\n   * Create render object\r\n   */\r\n  createRenderObject(context) {\r\n    return new RenderStack({\r\n      alignment: this.alignment,\r\n      textDirection: this._getEffectiveTextDirection(context),\r\n      fit: this.fit,\r\n      clipBehavior: this.clipBehavior\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Update render object\r\n   */\r\n  updateRenderObject(context, renderObject) {\r\n    renderObject.alignment = this.alignment;\r\n    renderObject.textDirection = this._getEffectiveTextDirection(context);\r\n    renderObject.fit = this.fit;\r\n    renderObject.clipBehavior = this.clipBehavior;\r\n  }\r\n\r\n  /**\r\n   * Build widget tree\r\n   */\r\n  build(context) {\r\n    this._debugCheckHasDirectionality(context);\r\n\r\n    if (!this._renderObject) {\r\n      this._renderObject = this.createRenderObject(context);\r\n    } else {\r\n      this.updateRenderObject(context, this._renderObject);\r\n    }\r\n\r\n    const elementId = context.element.getElementId();\r\n    const widgetPath = context.element.getWidgetPath();\r\n    const resolvedAlignment = this._renderObject._resolveAlignment();\r\n    const alignOffset = this._renderObject._getAlignmentOffset(resolvedAlignment);\r\n\r\n    // Determine overflow behavior\r\n    const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';\r\n\r\n    const style = {\r\n      position: 'relative',\r\n      display: 'inline-flex',\r\n      width: this.fit === StackFit.expand ? '100%' : 'auto',\r\n      height: this.fit === StackFit.expand ? '100%' : 'auto',\r\n      overflow: overflowValue,\r\n      alignItems: alignOffset.y,\r\n      justifyContent: alignOffset.x\r\n    };\r\n\r\n    // Build child VNodes with positioning\r\n    const childVNodes = this.children.map((childWidget, index) => {\r\n      const childElement = childWidget.createElement(context.element, context.element.runtime);\r\n      childElement.mount(context.element);\r\n      const childVNode = childElement.performRebuild();\r\n\r\n      let childStyle = {\r\n        position: 'absolute'\r\n      };\r\n\r\n      // Apply Positioned constraints if available\r\n      if (childWidget instanceof Positioned) {\r\n        if (childWidget.left !== null) childStyle.left = `${childWidget.left}px`;\r\n        if (childWidget.top !== null) childStyle.top = `${childWidget.top}px`;\r\n        if (childWidget.right !== null) childStyle.right = `${childWidget.right}px`;\r\n        if (childWidget.bottom !== null) childStyle.bottom = `${childWidget.bottom}px`;\r\n        if (childWidget.width !== null) childStyle.width = `${childWidget.width}px`;\r\n        if (childWidget.height !== null) childStyle.height = `${childWidget.height}px`;\r\n      }\r\n\r\n      return new VNode({\r\n        tag: 'div',\r\n        props: {\r\n          style: childStyle,\r\n          'data-stack-index': index,\r\n          'data-positioned': childWidget instanceof Positioned\r\n        },\r\n        children: [childVNode]\r\n      });\r\n    });\r\n\r\n    return new VNode({\r\n      tag: 'div',\r\n      props: {\r\n        style,\r\n        'data-element-id': elementId,\r\n        'data-widget-path': widgetPath,\r\n        'data-widget': 'Stack',\r\n        'data-alignment': this.alignment,\r\n        'data-fit': this.fit,\r\n        'data-clip-behavior': this.clipBehavior,\r\n        'data-text-direction': this._getEffectiveTextDirection(context),\r\n        ref: (el) => this._onContainerMount(el)\r\n      },\r\n      children: childVNodes,\r\n      key: this.key\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Mount container\r\n   */\r\n  _onContainerMount(el) {\r\n    if (!el) return;\r\n    this._containerElement = el;\r\n  }\r\n\r\n  /**\r\n   * Debug properties\r\n   */\r\n  debugFillProperties(properties) {\r\n    super.debugFillProperties(properties);\r\n    properties.push({ name: 'alignment', value: this.alignment });\r\n    properties.push({ name: 'textDirection', value: this.textDirection });\r\n    properties.push({ name: 'fit', value: this.fit });\r\n    properties.push({ name: 'clipBehavior', value: this.clipBehavior });\r\n    properties.push({ name: 'childCount', value: this.children.length });\r\n  }\r\n\r\n  /**\r\n   * Create element\r\n   */\r\n  createElement(parent, runtime) {\r\n    return new StackElement(this, parent, runtime);\r\n  }\r\n}\r\n\r\nclass StackElement extends Element {\r\n  performRebuild() {\r\n    return this.widget.build(this.context);\r\n  }\r\n}\r\n\r\nexport {\r\n  Stack,\r\n  StackElement,\r\n  RenderStack,\r\n  Positioned,\r\n  PositionedElement,\r\n  StackParentData\r\n};"],
-  "mappings": "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",
-  "names": ["Widget", "Element", "VNode", "Clip", "TextDirection", "Alignment", "AlignmentDirectional", "StackFit", "StackParentData", "RenderStack", "alignment", "textDirection", "fit", "clipBehavior", "child", "index", "isRTL", "map", "Positioned", "key", "left", "top", "right", "bottom", "width", "height", "rect", "start", "end", "renderObject", "parentData", "needsLayout", "context", "properties", "parent", "runtime", "PositionedElement", "Stack", "children", "elementId", "widgetPath", "resolvedAlignment", "alignOffset", "overflowValue", "style", "childVNodes", "childWidget", "childElement", "childVNode", "childStyle", "el", "StackElement"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/transform.js b/packages/flutterjs_engine/package/material/dist/widgets/compoment/transform.js
deleted file mode 100644
index e9b5cd2c..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/transform.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{ProxyWidget as u}from"../../core/widget_element.js";import{VNode as g}from"@flutterjs/vdom/vnode";import{Offset as w,Alignment as c}from"../../utils/utils.js";class a{constructor(t=null){t?this.storage=t:(this.storage=new Array(16).fill(0),this.storage[0]=1,this.storage[5]=1,this.storage[10]=1,this.storage[15]=1)}static identity(){return new a}static translationValues(t,e,n=0){const r=new a;return r.storage[12]=t,r.storage[13]=e,r.storage[14]=n,r}static diagonal3Values(t,e,n){const r=new a;return r.storage[0]=t,r.storage[5]=e,r.storage[10]=n,r}static rotationZ(t){const e=Math.sin(t),n=Math.cos(t),r=new a;return r.storage[0]=n,r.storage[1]=e,r.storage[4]=-e,r.storage[5]=n,r}toCSSMatrix(){const t=this.storage;return`matrix3d(${t[0]}, ${t[1]}, ${t[2]}, ${t[3]}, ${t[4]}, ${t[5]}, ${t[6]}, ${t[7]}, ${t[8]}, ${t[9]}, ${t[10]}, ${t[11]}, ${t[12]}, ${t[13]}, ${t[14]}, ${t[15]})`}toString(){return`Matrix4(${this.storage.join(", ")})`}}const o={low:"low",medium:"medium",high:"high"};class d extends u{constructor({key:t=null,transform:e=null,origin:n=null,alignment:r=null,transformHitTests:i=!0,filterQuality:s=o.low,child:l=null}={}){if(super({key:t,child:l}),!e)throw new Error("Transform requires a transform (Matrix4)");this.transform=e,this.origin=n,this.alignment=r,this.transformHitTests=i,this.filterQuality=s,this._renderObject=null}static rotate({key:t=null,angle:e=0,origin:n=null,alignment:r=c.center,transformHitTests:i=!0,filterQuality:s=o.low,child:l=null}={}){return new d({key:t,transform:a.rotationZ(e),origin:n,alignment:r,transformHitTests:i,filterQuality:s,child:l})}static translate({key:t=null,offset:e=null,transformHitTests:n=!0,filterQuality:r=o.low,child:i=null}={}){if(!e)throw new Error("Transform.translate requires an offset");return new d({key:t,transform:a.translationValues(e.dx,e.dy,0),origin:null,alignment:null,transformHitTests:n,filterQuality:r,child:i})}static scale({key:t=null,scale:e=null,scaleX:n=null,scaleY:r=null,origin:i=null,alignment:s=c.center,transformHitTests:l=!0,filterQuality:m=o.low,child:f=null}={}){if(e===null&&n===null&&r===null)throw new Error("At least one of 'scale', 'scaleX' and 'scaleY' is required to be non-null");if(e!==null&&(n!==null||r!==null))throw new Error("If 'scale' is non-null then 'scaleX' and 'scaleY' must be left null");const b=e??n??1,_=e??r??1;return new d({key:t,transform:a.diagonal3Values(b,_,1),origin:i,alignment:s,transformHitTests:l,filterQuality:m,child:f})}static flip({key:t=null,flipX:e=!1,flipY:n=!1,origin:r=null,transformHitTests:i=!0,filterQuality:s=o.low,child:l=null}={}){return new d({key:t,transform:a.diagonal3Values(e?-1:1,n?-1:1,1),origin:r,alignment:c.center,transformHitTests:i,filterQuality:s,child:l})}createRenderObject(t){return new p({transform:this.transform,origin:this.origin,alignment:this.alignment,transformHitTests:this.transformHitTests,filterQuality:this.filterQuality})}updateRenderObject(t,e){e.transform=this.transform,e.origin=this.origin,e.alignment=this.alignment,e.transformHitTests=this.transformHitTests,e.filterQuality=this.filterQuality}build(t){this._renderObject?this.updateRenderObject(t,this._renderObject):this._renderObject=this.createRenderObject(t);let e=null;if(this.child){const f=this.child.createElement(t.element,t.element.runtime);f.mount(t.element),e=f.performRebuild()}const n=t.element.getElementId(),r=t.element.getWidgetPath(),i=this._generateTransformCSS(),s=this._generateTransformOrigin(),l=this._getFilterCSS(),m={transform:i,transformOrigin:s,position:"relative",filter:l};return new g({tag:"div",props:{style:m,"data-element-id":n,"data-widget-path":r,"data-widget":"Transform","data-filter-quality":this.filterQuality,"data-transform-hit-tests":this.transformHitTests},children:e?[e]:[],key:this.key})}_generateTransformCSS(){return this.transform?this.transform.toCSSMatrix():"none"}_generateTransformOrigin(){if(this.origin)return`${this.origin.dx}px ${this.origin.dy}px`;if(this.alignment){const t=(this.alignment.x+1)/2*100,e=(this.alignment.y+1)/2*100;return`${t}% ${e}%`}return"50% 50%"}_getFilterCSS(){switch(this.filterQuality){case o.high:return"blur(0px)";case o.medium:return"blur(0.5px)";case o.low:default:return"none"}}debugFillProperties(t){super.debugFillProperties(t),t.push({name:"transform",value:this.transform.toString()}),this.origin&&t.push({name:"origin",value:this.origin.toString()}),this.alignment&&t.push({name:"alignment",value:this.alignment.toString()}),t.push({name:"transformHitTests",value:this.transformHitTests}),t.push({name:"filterQuality",value:this.filterQuality})}createElement(t,e){return new E(this,t,e)}}class p{constructor({transform:t=null,origin:e=null,alignment:n=null,transformHitTests:r=!0,filterQuality:i=o.low}={}){this.transform=t,this.origin=e,this.alignment=n,this.transformHitTests=r,this.filterQuality=i}debugInfo(){return{type:"RenderTransform",transform:this.transform?.toString(),origin:this.origin?.toString(),alignment:this.alignment?.toString(),transformHitTests:this.transformHitTests,filterQuality:this.filterQuality}}}class E extends u.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}}class T{constructor(){this._target=null,this._followers=new Set}get target(){return this._target}set target(t){this._target=t}addFollower(t){this._followers.add(t)}removeFollower(t){this._followers.delete(t)}getFollowers(){return Array.from(this._followers)}}class A extends u{constructor({key:t=null,link:e=null,child:n=null}={}){if(super({key:t,child:n}),!e)throw new Error("CompositedTransformTarget requires a LayerLink");this.link=e,this._renderObject=null,this._targetElement=null}createRenderObject(t){return new y({link:this.link})}updateRenderObject(t,e){e.link=this.link}build(t){this._renderObject?this.updateRenderObject(t,this._renderObject):this._renderObject=this.createRenderObject(t);let e=null;if(this.child){const i=this.child.createElement(t.element,t.element.runtime);i.mount(t.element),e=i.performRebuild()}const n=t.element.getElementId(),r=t.element.getWidgetPath();return new g({tag:"div",props:{style:{position:"relative"},"data-element-id":n,"data-widget-path":r,"data-widget":"CompositedTransformTarget","data-layer-link":this.link.constructor.name,ref:i=>this._onMount(i)},children:e?[e]:[],key:this.key})}_onMount(t){if(!t||!this.link)return;this._targetElement=t,this.link.target=t,this.link.getFollowers().forEach(n=>{n._updatePosition&&n._updatePosition()})}debugFillProperties(t){super.debugFillProperties(t),t.push({name:"link",value:"LayerLink"})}createElement(t,e){return new R(this,t,e)}}class y{constructor({link:t=null}={}){this.link=t}debugInfo(){return{type:"RenderLeaderLayer",hasLink:!!this.link}}}class R extends u.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}}class S extends u{constructor({key:t=null,link:e=null,showWhenUnlinked:n=!0,offset:r=null,targetAnchor:i=c.topLeft,followerAnchor:s=c.topLeft,child:l=null}={}){if(super({key:t,child:l}),!e)throw new Error("CompositedTransformFollower requires a LayerLink");this.link=e,this.showWhenUnlinked=n,this.offset=r||w.zero,this.targetAnchor=i,this.followerAnchor=s,this._renderObject=null,this._followerElement=null}createRenderObject(t){return new k({link:this.link,showWhenUnlinked:this.showWhenUnlinked,offset:this.offset,leaderAnchor:this.targetAnchor,followerAnchor:this.followerAnchor})}updateRenderObject(t,e){e.link=this.link,e.showWhenUnlinked=this.showWhenUnlinked,e.offset=this.offset,e.leaderAnchor=this.targetAnchor,e.followerAnchor=this.followerAnchor}build(t){this._renderObject?this.updateRenderObject(t,this._renderObject):this._renderObject=this.createRenderObject(t);let e=null;if(this.child){const s=this.child.createElement(t.element,t.element.runtime);s.mount(t.element),e=s.performRebuild()}const n=t.element.getElementId(),r=t.element.getWidgetPath(),i={position:"absolute",visibility:this.showWhenUnlinked?"visible":"hidden"};return new g({tag:"div",props:{style:i,"data-element-id":n,"data-widget-path":r,"data-widget":"CompositedTransformFollower","data-layer-link":this.link.constructor.name,ref:s=>this._onMount(s)},children:e?[e]:[],key:this.key})}_onMount(t){!t||!this.link||(this._followerElement=t,this.link.addFollower(this),this._updatePosition())}_updatePosition(){if(!(!this._followerElement||!this.link.target))try{const t=this.link.target.getBoundingClientRect(),e=this._followerElement.getBoundingClientRect(),n=(this.targetAnchor.x+1)/2*t.width,r=(this.targetAnchor.y+1)/2*t.height,i=(this.followerAnchor.x+1)/2*e.width,s=(this.followerAnchor.y+1)/2*e.height;let l=t.left+n-i+this.offset.dx,m=t.top+r-s+this.offset.dy;this._followerElement.style.left=`${l}px`,this._followerElement.style.top=`${m}px`}catch(t){console.error("Error updating follower position:",t)}}debugFillProperties(t){super.debugFillProperties(t),t.push({name:"link",value:"LayerLink"}),t.push({name:"showWhenUnlinked",value:this.showWhenUnlinked}),t.push({name:"offset",value:this.offset.toString()}),t.push({name:"targetAnchor",value:this.targetAnchor.toString()}),t.push({name:"followerAnchor",value:this.followerAnchor.toString()})}createElement(t,e){return new $(this,t,e)}}class k{constructor({link:t=null,showWhenUnlinked:e=!0,offset:n=null,leaderAnchor:r=null,followerAnchor:i=null}={}){this.link=t,this.showWhenUnlinked=e,this.offset=n||w.zero,this.leaderAnchor=r,this.followerAnchor=i}debugInfo(){return{type:"RenderFollowerLayer",hasLink:!!this.link,showWhenUnlinked:this.showWhenUnlinked}}}class $ extends u.constructor.prototype.constructor{performRebuild(){return this.widget.build(this.context)}detach(){this.widget.link&&this.widget._followerElement&&this.widget.link.removeFollower(this.widget),super.detach()}}export{S as CompositedTransformFollower,A as CompositedTransformTarget,o as FilterQuality,T as LayerLink,a as Matrix4,k as RenderFollowerLayer,y as RenderLeaderLayer,p as RenderTransform,d as Transform};
-//# sourceMappingURL=transform.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/compoment/transform.js.map b/packages/flutterjs_engine/package/material/dist/widgets/compoment/transform.js.map
deleted file mode 100644
index 30a811ad..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/compoment/transform.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/widgets/compoment/transform.js"],
-  "sourcesContent": ["import { ProxyWidget } from '../../core/widget_element.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\nimport { Offset, Alignment } from '../../utils/utils.js';\r\n\r\n\r\n// ============================================================================\r\n// ALIGNMENT CLASS\r\n// Represents alignment in 2D space\r\n// ============================================================================\r\n\r\n\r\n\r\n// ============================================================================\r\n// MATRIX4 CLASS (Simplified for 2D transforms)\r\n// Represents a 4x4 transformation matrix\r\n// ============================================================================\r\n\r\nclass Matrix4 {\r\n    constructor(values = null) {\r\n        // 4x4 matrix stored as 16-element array\r\n        if (values) {\r\n            this.storage = values;\r\n        } else {\r\n            this.storage = new Array(16).fill(0);\r\n            // Identity matrix\r\n            this.storage[0] = 1;\r\n            this.storage[5] = 1;\r\n            this.storage[10] = 1;\r\n            this.storage[15] = 1;\r\n        }\r\n    }\r\n\r\n    static identity() {\r\n        return new Matrix4();\r\n    }\r\n\r\n    static translationValues(x, y, z = 0) {\r\n        const m = new Matrix4();\r\n        m.storage[12] = x;\r\n        m.storage[13] = y;\r\n        m.storage[14] = z;\r\n        return m;\r\n    }\r\n\r\n    static diagonal3Values(x, y, z) {\r\n        const m = new Matrix4();\r\n        m.storage[0] = x;\r\n        m.storage[5] = y;\r\n        m.storage[10] = z;\r\n        return m;\r\n    }\r\n\r\n    static rotationZ(radians) {\r\n        const sin = Math.sin(radians);\r\n        const cos = Math.cos(radians);\r\n        const m = new Matrix4();\r\n        m.storage[0] = cos;\r\n        m.storage[1] = sin;\r\n        m.storage[4] = -sin;\r\n        m.storage[5] = cos;\r\n        return m;\r\n    }\r\n\r\n    toCSSMatrix() {\r\n        // Convert to CSS matrix() or matrix3d() format\r\n        // For 2D transforms, we use matrix(a, b, c, d, e, f)\r\n        const s = this.storage;\r\n        return `matrix3d(${s[0]}, ${s[1]}, ${s[2]}, ${s[3]}, ${s[4]}, ${s[5]}, ${s[6]}, ${s[7]}, ${s[8]}, ${s[9]}, ${s[10]}, ${s[11]}, ${s[12]}, ${s[13]}, ${s[14]}, ${s[15]})`;\r\n    }\r\n\r\n    toString() {\r\n        return `Matrix4(${this.storage.join(', ')})`;\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// FILTER QUALITY ENUM\r\n// ============================================================================\r\n\r\nconst FilterQuality = {\r\n    low: 'low',\r\n    medium: 'medium',\r\n    high: 'high'\r\n};\r\n\r\n// ============================================================================\r\n// TRANSFORM WIDGET\r\n// Applies 2D/3D transformation to child widget\r\n// ============================================================================\r\n\r\nclass Transform extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        transform = null,\r\n        origin = null,\r\n        alignment = null,\r\n        transformHitTests = true,\r\n        filterQuality = FilterQuality.low,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (!transform) {\r\n            throw new Error('Transform requires a transform (Matrix4)');\r\n        }\r\n\r\n        this.transform = transform;\r\n        this.origin = origin;\r\n        this.alignment = alignment;\r\n        this.transformHitTests = transformHitTests;\r\n        this.filterQuality = filterQuality;\r\n        this._renderObject = null;\r\n    }\r\n\r\n    /**\r\n     * Static constructor for rotation\r\n     */\r\n    static rotate({\r\n        key = null,\r\n        angle = 0,\r\n        origin = null,\r\n        alignment = Alignment.center,\r\n        transformHitTests = true,\r\n        filterQuality = FilterQuality.low,\r\n        child = null\r\n    } = {}) {\r\n        return new Transform({\r\n            key,\r\n            transform: Matrix4.rotationZ(angle),\r\n            origin,\r\n            alignment,\r\n            transformHitTests,\r\n            filterQuality,\r\n            child\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Static constructor for translation\r\n     */\r\n    static translate({\r\n        key = null,\r\n        offset = null,\r\n        transformHitTests = true,\r\n        filterQuality = FilterQuality.low,\r\n        child = null\r\n    } = {}) {\r\n        if (!offset) {\r\n            throw new Error('Transform.translate requires an offset');\r\n        }\r\n\r\n        return new Transform({\r\n            key,\r\n            transform: Matrix4.translationValues(offset.dx, offset.dy, 0),\r\n            origin: null,\r\n            alignment: null,\r\n            transformHitTests,\r\n            filterQuality,\r\n            child\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Static constructor for scale\r\n     */\r\n    static scale({\r\n        key = null,\r\n        scale = null,\r\n        scaleX = null,\r\n        scaleY = null,\r\n        origin = null,\r\n        alignment = Alignment.center,\r\n        transformHitTests = true,\r\n        filterQuality = FilterQuality.low,\r\n        child = null\r\n    } = {}) {\r\n        if (scale === null && scaleX === null && scaleY === null) {\r\n            throw new Error(\"At least one of 'scale', 'scaleX' and 'scaleY' is required to be non-null\");\r\n        }\r\n\r\n        if (scale !== null && (scaleX !== null || scaleY !== null)) {\r\n            throw new Error(\"If 'scale' is non-null then 'scaleX' and 'scaleY' must be left null\");\r\n        }\r\n\r\n        const sx = scale ?? scaleX ?? 1.0;\r\n        const sy = scale ?? scaleY ?? 1.0;\r\n\r\n        return new Transform({\r\n            key,\r\n            transform: Matrix4.diagonal3Values(sx, sy, 1.0),\r\n            origin,\r\n            alignment,\r\n            transformHitTests,\r\n            filterQuality,\r\n            child\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Static constructor for flip\r\n     */\r\n    static flip({\r\n        key = null,\r\n        flipX = false,\r\n        flipY = false,\r\n        origin = null,\r\n        transformHitTests = true,\r\n        filterQuality = FilterQuality.low,\r\n        child = null\r\n    } = {}) {\r\n        return new Transform({\r\n            key,\r\n            transform: Matrix4.diagonal3Values(\r\n                flipX ? -1.0 : 1.0,\r\n                flipY ? -1.0 : 1.0,\r\n                1.0\r\n            ),\r\n            origin,\r\n            alignment: Alignment.center,\r\n            transformHitTests,\r\n            filterQuality,\r\n            child\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return new RenderTransform({\r\n            transform: this.transform,\r\n            origin: this.origin,\r\n            alignment: this.alignment,\r\n            transformHitTests: this.transformHitTests,\r\n            filterQuality: this.filterQuality\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.transform = this.transform;\r\n        renderObject.origin = this.origin;\r\n        renderObject.alignment = this.alignment;\r\n        renderObject.transformHitTests = this.transformHitTests;\r\n        renderObject.filterQuality = this.filterQuality;\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        // Generate CSS transform\r\n        const transformCss = this._generateTransformCSS();\r\n        const transformOrigin = this._generateTransformOrigin();\r\n        const filter = this._getFilterCSS();\r\n\r\n        const style = {\r\n            transform: transformCss,\r\n            transformOrigin: transformOrigin,\r\n            position: 'relative',\r\n            filter: filter\r\n        };\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style,\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'Transform',\r\n                'data-filter-quality': this.filterQuality,\r\n                'data-transform-hit-tests': this.transformHitTests\r\n            },\r\n            children: childVNode ? [childVNode] : [],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Generate CSS transform string\r\n     * @private\r\n     */\r\n    _generateTransformCSS() {\r\n        if (!this.transform) {\r\n            return 'none';\r\n        }\r\n\r\n        // For simplicity, convert common transforms to CSS\r\n        // For complex transforms, use matrix3d\r\n        return this.transform.toCSSMatrix();\r\n    }\r\n\r\n    /**\r\n     * Generate CSS transform-origin\r\n     * @private\r\n     */\r\n    _generateTransformOrigin() {\r\n        if (this.origin) {\r\n            return `${this.origin.dx}px ${this.origin.dy}px`;\r\n        }\r\n\r\n        if (this.alignment) {\r\n            // Convert alignment to percentage\r\n            const x = ((this.alignment.x + 1) / 2) * 100;\r\n            const y = ((this.alignment.y + 1) / 2) * 100;\r\n            return `${x}% ${y}%`;\r\n        }\r\n\r\n        return '50% 50%'; // Default center\r\n    }\r\n\r\n    /**\r\n     * Get filter CSS for quality\r\n     * @private\r\n     */\r\n    _getFilterCSS() {\r\n        switch (this.filterQuality) {\r\n            case FilterQuality.high:\r\n                return 'blur(0px)';\r\n            case FilterQuality.medium:\r\n                return 'blur(0.5px)';\r\n            case FilterQuality.low:\r\n            default:\r\n                return 'none';\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'transform', value: this.transform.toString() });\r\n        if (this.origin) {\r\n            properties.push({ name: 'origin', value: this.origin.toString() });\r\n        }\r\n        if (this.alignment) {\r\n            properties.push({ name: 'alignment', value: this.alignment.toString() });\r\n        }\r\n        properties.push({ name: 'transformHitTests', value: this.transformHitTests });\r\n        properties.push({ name: 'filterQuality', value: this.filterQuality });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new TransformElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// RENDER TRANSFORM\r\n// ============================================================================\r\n\r\nclass RenderTransform {\r\n    constructor({\r\n        transform = null,\r\n        origin = null,\r\n        alignment = null,\r\n        transformHitTests = true,\r\n        filterQuality = FilterQuality.low\r\n    } = {}) {\r\n        this.transform = transform;\r\n        this.origin = origin;\r\n        this.alignment = alignment;\r\n        this.transformHitTests = transformHitTests;\r\n        this.filterQuality = filterQuality;\r\n    }\r\n\r\n    /**\r\n     * Debug info\r\n     */\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderTransform',\r\n            transform: this.transform?.toString(),\r\n            origin: this.origin?.toString(),\r\n            alignment: this.alignment?.toString(),\r\n            transformHitTests: this.transformHitTests,\r\n            filterQuality: this.filterQuality\r\n        };\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// TRANSFORM ELEMENT\r\n// ============================================================================\r\n\r\nclass TransformElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// LAYER LINK\r\n// Used for linking transform targets and followers\r\n// ============================================================================\r\n\r\nclass LayerLink {\r\n    constructor() {\r\n        this._target = null;\r\n        this._followers = new Set();\r\n    }\r\n\r\n    get target() {\r\n        return this._target;\r\n    }\r\n\r\n    set target(value) {\r\n        this._target = value;\r\n    }\r\n\r\n    addFollower(follower) {\r\n        this._followers.add(follower);\r\n    }\r\n\r\n    removeFollower(follower) {\r\n        this._followers.delete(follower);\r\n    }\r\n\r\n    getFollowers() {\r\n        return Array.from(this._followers);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// COMPOSITED TRANSFORM TARGET WIDGET\r\n// Marks a widget as a transform target for followers\r\n// ============================================================================\r\n\r\nclass CompositedTransformTarget extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        link = null,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (!link) {\r\n            throw new Error('CompositedTransformTarget requires a LayerLink');\r\n        }\r\n\r\n        this.link = link;\r\n        this._renderObject = null;\r\n        this._targetElement = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return new RenderLeaderLayer({\r\n            link: this.link\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.link = this.link;\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style: {\r\n                    position: 'relative'\r\n                },\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'CompositedTransformTarget',\r\n                'data-layer-link': this.link.constructor.name,\r\n                ref: (el) => this._onMount(el)\r\n            },\r\n            children: childVNode ? [childVNode] : [],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Mount and register target\r\n     * @private\r\n     */\r\n    _onMount(el) {\r\n        if (!el || !this.link) return;\r\n\r\n        this._targetElement = el;\r\n        this.link.target = el;\r\n\r\n        // Update all followers\r\n        const followers = this.link.getFollowers();\r\n        followers.forEach(follower => {\r\n            if (follower._updatePosition) {\r\n                follower._updatePosition();\r\n            }\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'link', value: 'LayerLink' });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new CompositedTransformTargetElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\nclass RenderLeaderLayer {\r\n    constructor({ link = null } = {}) {\r\n        this.link = link;\r\n    }\r\n\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderLeaderLayer',\r\n            hasLink: !!this.link\r\n        };\r\n    }\r\n}\r\n\r\nclass CompositedTransformTargetElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n}\r\n\r\n// ============================================================================\r\n// COMPOSITED TRANSFORM FOLLOWER WIDGET\r\n// Follows a transform target's position\r\n// ============================================================================\r\n\r\nclass CompositedTransformFollower extends ProxyWidget {\r\n    constructor({\r\n        key = null,\r\n        link = null,\r\n        showWhenUnlinked = true,\r\n        offset = null,\r\n        targetAnchor = Alignment.topLeft,\r\n        followerAnchor = Alignment.topLeft,\r\n        child = null\r\n    } = {}) {\r\n        super({ key, child });\r\n\r\n        if (!link) {\r\n            throw new Error('CompositedTransformFollower requires a LayerLink');\r\n        }\r\n\r\n        this.link = link;\r\n        this.showWhenUnlinked = showWhenUnlinked;\r\n        this.offset = offset || Offset.zero;\r\n        this.targetAnchor = targetAnchor;\r\n        this.followerAnchor = followerAnchor;\r\n        this._renderObject = null;\r\n        this._followerElement = null;\r\n    }\r\n\r\n    /**\r\n     * Create render object\r\n     */\r\n    createRenderObject(context) {\r\n        return new RenderFollowerLayer({\r\n            link: this.link,\r\n            showWhenUnlinked: this.showWhenUnlinked,\r\n            offset: this.offset,\r\n            leaderAnchor: this.targetAnchor,\r\n            followerAnchor: this.followerAnchor\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Update render object\r\n     */\r\n    updateRenderObject(context, renderObject) {\r\n        renderObject.link = this.link;\r\n        renderObject.showWhenUnlinked = this.showWhenUnlinked;\r\n        renderObject.offset = this.offset;\r\n        renderObject.leaderAnchor = this.targetAnchor;\r\n        renderObject.followerAnchor = this.followerAnchor;\r\n    }\r\n\r\n    /**\r\n     * Build the widget\r\n     */\r\n    build(context) {\r\n        if (!this._renderObject) {\r\n            this._renderObject = this.createRenderObject(context);\r\n        } else {\r\n            this.updateRenderObject(context, this._renderObject);\r\n        }\r\n\r\n        let childVNode = null;\r\n        if (this.child) {\r\n            const childElement = this.child.createElement(context.element, context.element.runtime);\r\n            childElement.mount(context.element);\r\n            childVNode = childElement.performRebuild();\r\n        }\r\n\r\n        const elementId = context.element.getElementId();\r\n        const widgetPath = context.element.getWidgetPath();\r\n\r\n        const style = {\r\n            position: 'absolute',\r\n            visibility: this.showWhenUnlinked ? 'visible' : 'hidden'\r\n        };\r\n\r\n        return new VNode({\r\n            tag: 'div',\r\n            props: {\r\n                style,\r\n                'data-element-id': elementId,\r\n                'data-widget-path': widgetPath,\r\n                'data-widget': 'CompositedTransformFollower',\r\n                'data-layer-link': this.link.constructor.name,\r\n                ref: (el) => this._onMount(el)\r\n            },\r\n            children: childVNode ? [childVNode] : [],\r\n            key: this.key\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Mount and register follower\r\n     * @private\r\n     */\r\n    _onMount(el) {\r\n        if (!el || !this.link) return;\r\n\r\n        this._followerElement = el;\r\n        this.link.addFollower(this);\r\n        this._updatePosition();\r\n    }\r\n\r\n    /**\r\n     * Update position based on target\r\n     * @private\r\n     */\r\n    _updatePosition() {\r\n        if (!this._followerElement || !this.link.target) {\r\n            return;\r\n        }\r\n\r\n        try {\r\n            const targetRect = this.link.target.getBoundingClientRect();\r\n            const followerRect = this._followerElement.getBoundingClientRect();\r\n\r\n            // Calculate anchor offsets\r\n            const targetAnchorX = ((this.targetAnchor.x + 1) / 2) * targetRect.width;\r\n            const targetAnchorY = ((this.targetAnchor.y + 1) / 2) * targetRect.height;\r\n\r\n            const followerAnchorX = ((this.followerAnchor.x + 1) / 2) * followerRect.width;\r\n            const followerAnchorY = ((this.followerAnchor.y + 1) / 2) * followerRect.height;\r\n\r\n            // Calculate final position\r\n            let x = targetRect.left + targetAnchorX - followerAnchorX + this.offset.dx;\r\n            let y = targetRect.top + targetAnchorY - followerAnchorY + this.offset.dy;\r\n\r\n            this._followerElement.style.left = `${x}px`;\r\n            this._followerElement.style.top = `${y}px`;\r\n        } catch (error) {\r\n            console.error('Error updating follower position:', error);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Debug properties\r\n     */\r\n    debugFillProperties(properties) {\r\n        super.debugFillProperties(properties);\r\n        properties.push({ name: 'link', value: 'LayerLink' });\r\n        properties.push({ name: 'showWhenUnlinked', value: this.showWhenUnlinked });\r\n        properties.push({ name: 'offset', value: this.offset.toString() });\r\n        properties.push({ name: 'targetAnchor', value: this.targetAnchor.toString() });\r\n        properties.push({ name: 'followerAnchor', value: this.followerAnchor.toString() });\r\n    }\r\n\r\n    /**\r\n     * Create element\r\n     */\r\n    createElement(parent, runtime) {\r\n        return new CompositedTransformFollowerElement(this,parent, runtime);\r\n    }\r\n}\r\n\r\nclass RenderFollowerLayer {\r\n    constructor({\r\n        link = null,\r\n        showWhenUnlinked = true,\r\n        offset = null,\r\n        leaderAnchor = null,\r\n        followerAnchor = null\r\n    } = {}) {\r\n        this.link = link;\r\n        this.showWhenUnlinked = showWhenUnlinked;\r\n        this.offset = offset || Offset.zero;\r\n        this.leaderAnchor = leaderAnchor;\r\n        this.followerAnchor = followerAnchor;\r\n    }\r\n\r\n    debugInfo() {\r\n        return {\r\n            type: 'RenderFollowerLayer',\r\n            hasLink: !!this.link,\r\n            showWhenUnlinked: this.showWhenUnlinked\r\n        };\r\n    }\r\n}\r\n\r\nclass CompositedTransformFollowerElement extends ProxyWidget.constructor.prototype.constructor {\r\n    performRebuild() {\r\n        return this.widget.build(this.context);\r\n    }\r\n\r\n    detach() {\r\n        if (this.widget.link && this.widget._followerElement) {\r\n            this.widget.link.removeFollower(this.widget);\r\n        }\r\n        super.detach();\r\n    }\r\n}\r\n\r\nexport {\r\n    Transform,\r\n    RenderTransform,\r\n    CompositedTransformTarget,\r\n    RenderLeaderLayer,\r\n    CompositedTransformFollower,\r\n    RenderFollowerLayer,\r\n    Matrix4,\r\n    LayerLink,\r\n    FilterQuality\r\n};"],
-  "mappings": "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",
-  "names": ["ProxyWidget", "VNode", "Offset", "Alignment", "Matrix4", "values", "x", "y", "z", "m", "radians", "sin", "cos", "s", "FilterQuality", "Transform", "key", "transform", "origin", "alignment", "transformHitTests", "filterQuality", "child", "angle", "offset", "scale", "scaleX", "scaleY", "sx", "sy", "flipX", "flipY", "context", "RenderTransform", "renderObject", "childVNode", "childElement", "elementId", "widgetPath", "transformCss", "transformOrigin", "filter", "style", "properties", "parent", "runtime", "TransformElement", "LayerLink", "value", "follower", "CompositedTransformTarget", "link", "RenderLeaderLayer", "el", "CompositedTransformTargetElement", "CompositedTransformFollower", "showWhenUnlinked", "targetAnchor", "followerAnchor", "RenderFollowerLayer", "targetRect", "followerRect", "targetAnchorX", "targetAnchorY", "followerAnchorX", "followerAnchorY", "error", "CompositedTransformFollowerElement", "leaderAnchor"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/navigator.js b/packages/flutterjs_engine/package/material/dist/widgets/navigator.js
deleted file mode 100644
index 7a55f9fc..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/navigator.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{StatefulWidget as h,State as a}from"../core/widget_element.js";import"@flutterjs/vdom/vnode";class o{constructor({settings:e={},builder:t=null}={}){this.settings=e,this.builder=t}}class d extends h{constructor({key:e=null,initialRoute:t="/",onGenerateRoute:i=null,onUnknownRoute:r=null,routes:u={}}={}){super(e),this.initialRoute=t,this.onGenerateRoute=i,this.onUnknownRoute=r,this.routes=u}createState(){return new n}static of(e){if(e&&typeof e.findAncestorStateOfType=="function"){const i=e.findAncestorStateOfType(n);if(i)return i}let t=e;for(;t;){if(t instanceof n)return t;if(t.state instanceof n)return t.state;t=t.parent}return null}}class n extends a{constructor(){super(),this._history=[]}initState(){if(super.initState(),typeof window<"u"){window.addEventListener("popstate",this._handlePopState.bind(this));const t=window.location.pathname;t&&t!=="/"&&this.widget.initialRoute}const e=this._routeNamed(this.widget.initialRoute,null);e&&this._history.push(e)}dispose(){typeof window<"u"&&window.removeEventListener("popstate",this._handlePopState.bind(this)),super.dispose()}_handlePopState(e){this._history.length>1&&(this._history.pop(),this.setState(()=>{}))}push(e){if(this._history.push(e),typeof window<"u"&&e.settings&&e.settings.name){const t=e.settings.name;window.location.pathname!==t&&window.history.pushState({name:t},"",t)}return this.setState(()=>{}),Promise.resolve()}pushNamed(e,{arguments:t=null}={}){const i=this._routeNamed(e,t);i?this.push(i):console.warn(`Navigator: No route defined for "${e}"`)}pop(e){return this.canPop()?typeof window<"u"?(window.history.back(),!0):(this._history.pop(),this.setState(()=>{}),!0):!1}canPop(){return this._history.length>1}_routeNamed(e,t){const i={name:e,arguments:t};return this.widget.routes&&this.widget.routes[e]?new o({settings:i,builder:this.widget.routes[e]}):this.widget.onGenerateRoute?this.widget.onGenerateRoute(i):this.widget.onUnknownRoute?this.widget.onUnknownRoute(i):null}build(e){if(this._history.length===0)return null;const t=this._history[this._history.length-1];if(t.builder){console.log(`[Navigator] Building route ${this._history.length}:`,t.settings);const i=t.builder(e);return i&&t.settings&&t.settings.name&&(i.key||(i.key=`route_${t.settings.name}_${this._history.length}`)),i}return null}}export{d as Navigator,n as NavigatorState,o as Route};
-//# sourceMappingURL=navigator.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/navigator.js.map b/packages/flutterjs_engine/package/material/dist/widgets/navigator.js.map
deleted file mode 100644
index fada2624..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/navigator.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/widgets/navigator.js"],
-  "sourcesContent": ["/**\r\n * ============================================================================\r\n * Navigator Widget\r\n * ============================================================================\r\n * \r\n * A widget that manages a set of child widgets with a stack discipline.\r\n */\r\n\r\nimport { StatefulWidget, State } from '../core/widget_element.js';\r\nimport { VNode } from '@flutterjs/vdom/vnode';\r\n\r\nclass Route {\r\n    constructor({ settings = {}, builder = null } = {}) {\r\n        this.settings = settings;\r\n        this.builder = builder;\r\n    }\r\n}\r\n\r\nclass Navigator extends StatefulWidget {\r\n    constructor({\r\n        key = null,\r\n        initialRoute = '/',\r\n        onGenerateRoute = null,\r\n        onUnknownRoute = null,\r\n        routes = {}\r\n    } = {}) {\r\n        super(key);\r\n        this.initialRoute = initialRoute;\r\n        this.onGenerateRoute = onGenerateRoute;\r\n        this.onUnknownRoute = onUnknownRoute;\r\n        this.routes = routes;\r\n    }\r\n\r\n    createState() {\r\n        return new NavigatorState();\r\n    }\r\n\r\n    static of(context) {\r\n        // Find the nearest NavigatorState ancestor\r\n        // This requires context.findAncestorStateOfType\r\n        // For now, we assume context.findAncestorStateOfType is available or implemented in BuildContext\r\n        // If not, we might need a workaround or implement it.\r\n\r\n        // Check if context has findAncestorStateOfType\r\n        if (context && typeof context.findAncestorStateOfType === 'function') {\r\n            const state = context.findAncestorStateOfType(NavigatorState);\r\n            if (state) return state;\r\n        }\r\n\r\n        // Fallback: simple traversal if available (depends on context implementation)\r\n        let ancestor = context;\r\n        while (ancestor) {\r\n            if (ancestor instanceof NavigatorState) return ancestor;\r\n            if (ancestor.state instanceof NavigatorState) return ancestor.state;\r\n            ancestor = ancestor.parent;\r\n        }\r\n\r\n        return null;\r\n    }\r\n}\r\n\r\nclass NavigatorState extends State {\r\n    constructor() {\r\n        super();\r\n        this._history = [];\r\n    }\r\n\r\n    initState() {\r\n        super.initState();\r\n\r\n        // Listen for browser back button\r\n        if (typeof window !== 'undefined') {\r\n            window.addEventListener('popstate', this._handlePopState.bind(this));\r\n\r\n            // Sync initial route with current URL if explicitly on client side\r\n            const p = window.location.pathname;\r\n            if (p && p !== '/' && p !== this.widget.initialRoute) {\r\n                // If URL is /details but initialRoute is /, prefer URL\r\n                // Actually, MaterialApp usually handles this, but we can double check\r\n            }\r\n        }\r\n\r\n        // Initialize with initial route WITHOUT calling setState\r\n        // (we're already in initial build, no need to trigger another rebuild)\r\n        const route = this._routeNamed(this.widget.initialRoute, null);\r\n        if (route) {\r\n            this._history.push(route);\r\n        }\r\n    }\r\n\r\n    dispose() {\r\n        if (typeof window !== 'undefined') {\r\n            window.removeEventListener('popstate', this._handlePopState.bind(this));\r\n        }\r\n        super.dispose();\r\n    }\r\n\r\n    _handlePopState(event) {\r\n        if (this._history.length > 1) {\r\n            this._history.pop();\r\n            this.setState(() => { });\r\n        }\r\n    }\r\n\r\n    push(route) {\r\n        this._history.push(route);\r\n\r\n        // Sync with browser URL\r\n        if (typeof window !== 'undefined' && route.settings && route.settings.name) {\r\n            const name = route.settings.name;\r\n            // Avoid pushing duplicate states\r\n            if (window.location.pathname !== name) {\r\n                window.history.pushState({ name }, '', name);\r\n            }\r\n        }\r\n\r\n        this.setState(() => { });\r\n        return Promise.resolve(); // Future<T>\r\n    }\r\n\r\n    pushNamed(routeName, { arguments: args = null } = {}) {\r\n        const route = this._routeNamed(routeName, args);\r\n        if (route) {\r\n            this.push(route);\r\n        } else {\r\n            console.warn(`Navigator: No route defined for \"${routeName}\"`);\r\n        }\r\n    }\r\n\r\n    pop(result) {\r\n        if (this.canPop()) {\r\n            // If we are in browser, use history.back() to emulate natural behavior\r\n            // The 'popstate' event handler will take care of updating the state\r\n            if (typeof window !== 'undefined') {\r\n                window.history.back();\r\n                return true;\r\n            }\r\n\r\n            // Fallback for non-browser environments\r\n            this._history.pop();\r\n            this.setState(() => { });\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    canPop() {\r\n        return this._history.length > 1;\r\n    }\r\n\r\n    _routeNamed(name, args) {\r\n        const settings = { name, arguments: args };\r\n\r\n        // 1. Check routes map\r\n        if (this.widget.routes && this.widget.routes[name]) {\r\n            return new Route({\r\n                settings,\r\n                builder: this.widget.routes[name]\r\n            });\r\n        }\r\n\r\n        // 2. onGenerateRoute\r\n        if (this.widget.onGenerateRoute) {\r\n            return this.widget.onGenerateRoute(settings);\r\n        }\r\n\r\n        // 3. onUnknownRoute\r\n        if (this.widget.onUnknownRoute) {\r\n            return this.widget.onUnknownRoute(settings);\r\n        }\r\n\r\n        return null;\r\n    }\r\n\r\n    build(context) {\r\n        if (this._history.length === 0) {\r\n            return null; // Or empty container\r\n        }\r\n\r\n        // Get top route\r\n        const route = this._history[this._history.length - 1];\r\n\r\n        // Build the page\r\n        if (route.builder) {\r\n            console.log(`[Navigator] Building route ${this._history.length}:`, route.settings);\r\n            const page = route.builder(context);\r\n\r\n            // CRITICAL FIX: Add a key based on route name to force rebuild when route changes\r\n            // This prevents \"Widget unchanged, reusing existing vnode\" issue\r\n            if (page && route.settings && route.settings.name) {\r\n                // If the page widget doesn't have a key, add one based on the route name\r\n                if (!page.key) {\r\n                    page.key = `route_${route.settings.name}_${this._history.length}`;\r\n                }\r\n            }\r\n\r\n            return page;\r\n        }\r\n\r\n        return null;\r\n    }\r\n}\r\n\r\nexport { Navigator, NavigatorState, Route };\r\n"],
-  "mappings": "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",
-  "names": ["StatefulWidget", "State", "Route", "settings", "builder", "Navigator", "key", "initialRoute", "onGenerateRoute", "onUnknownRoute", "routes", "NavigatorState", "context", "state", "ancestor", "p", "route", "event", "name", "routeName", "args", "result", "page"]
-}
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/widgets.js b/packages/flutterjs_engine/package/material/dist/widgets/widgets.js
deleted file mode 100644
index 1f6265cf..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/widgets.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{Flex as n,FlexElement as l,RenderFlex as a,Row as r,Column as o,Flexible as x,FlexibleElement as i,FlexParentData as d,Expanded as m,Wrap as p,WrapElement as S,Flow as F,FlowElement as E,FlowDelegate as T,MainAxisSize as c}from"./compoment/multi_child_view.js";import{Align as g,Center as P}from"./compoment/center.js";import{Stack as s,StackElement as w,RenderStack as h,Positioned as k,PositionedElement as W,StackParentData as A}from"./compoment/stack.js";import{Padding as D,RenderPadding as b}from"./compoment/padding.js";import{SizedBox as z}from"./compoment/sized_box.js";import{RichText as v,RichTextElement as y,RenderParagraph as I,TextSpan as M,WidgetSpan as O,InlineSpan as j,StrutStyle as q,TextScaler as G,TextAlign as H,TextOverflow as J,TextWidthBasis as K,TextBaseline as L}from"./compoment/rich_text.js";export{g as Align,P as Center,o as Column,m as Expanded,n as Flex,l as FlexElement,d as FlexParentData,x as Flexible,i as FlexibleElement,F as Flow,T as FlowDelegate,E as FlowElement,j as InlineSpan,c as MainAxisSize,D as Padding,k as Positioned,W as PositionedElement,a as RenderFlex,b as RenderPadding,I as RenderParagraph,h as RenderStack,v as RichText,y as RichTextElement,r as Row,z as SizedBox,s as Stack,w as StackElement,A as StackParentData,q as StrutStyle,H as TextAlign,L as TextBaseline,J as TextOverflow,G as TextScaler,M as TextSpan,K as TextWidthBasis,O as WidgetSpan,p as Wrap,S as WrapElement};
-//# sourceMappingURL=widgets.js.map
diff --git a/packages/flutterjs_engine/package/material/dist/widgets/widgets.js.map b/packages/flutterjs_engine/package/material/dist/widgets/widgets.js.map
deleted file mode 100644
index 0782fa50..00000000
--- a/packages/flutterjs_engine/package/material/dist/widgets/widgets.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/widgets/widgets.js"],
-  "sourcesContent": ["export {\r\n    Flex,\r\n    FlexElement,\r\n    RenderFlex,\r\n    Row,\r\n    Column,\r\n    Flexible,\r\n    FlexibleElement,\r\n    FlexParentData,\r\n    Expanded,\r\n    Wrap,\r\n    WrapElement,\r\n    Flow,\r\n    FlowElement,\r\n    FlowDelegate,\r\n    MainAxisSize\r\n} from \"./compoment/multi_child_view.js\";\r\n\r\nexport {\r\n    Align, Center\r\n} from \"./compoment/center.js\";\r\n\r\nexport {\r\n    Stack,\r\n    StackElement,\r\n    RenderStack,\r\n    Positioned,\r\n    PositionedElement,\r\n    StackParentData\r\n} from \"./compoment/stack.js\";\r\n\r\nexport {\r\n    Padding, RenderPadding\r\n} from \"./compoment/padding.js\";\r\n\r\nexport {\r\n    SizedBox\r\n} from \"./compoment/sized_box.js\";\r\n\r\nexport {\r\n    RichText,\r\n    RichTextElement,\r\n    RenderParagraph,\r\n    TextSpan,\r\n    WidgetSpan,\r\n    InlineSpan,\r\n    StrutStyle,\r\n    TextScaler,\r\n    TextAlign,\r\n    TextOverflow,\r\n    TextWidthBasis,\r\n    TextBaseline\r\n} from \"./compoment/rich_text.js\";"],
-  "mappings": "AAAA,OACI,QAAAA,EACA,eAAAC,EACA,cAAAC,EACA,OAAAC,EACA,UAAAC,EACA,YAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,YAAAC,EACA,QAAAC,EACA,eAAAC,EACA,QAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,gBAAAC,MACG,kCAEP,OACI,SAAAC,EAAO,UAAAC,MACJ,wBAEP,OACI,SAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,cAAAC,EACA,qBAAAC,EACA,mBAAAC,MACG,uBAEP,OACI,WAAAC,EAAS,iBAAAC,MACN,yBAEP,OACI,YAAAC,MACG,2BAEP,OACI,YAAAC,EACA,mBAAAC,EACA,mBAAAC,EACA,YAAAC,EACA,cAAAC,EACA,cAAAC,EACA,cAAAC,EACA,cAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,gBAAAC,MACG",
-  "names": ["Flex", "FlexElement", "RenderFlex", "Row", "Column", "Flexible", "FlexibleElement", "FlexParentData", "Expanded", "Wrap", "WrapElement", "Flow", "FlowElement", "FlowDelegate", "MainAxisSize", "Align", "Center", "Stack", "StackElement", "RenderStack", "Positioned", "PositionedElement", "StackParentData", "Padding", "RenderPadding", "SizedBox", "RichText", "RichTextElement", "RenderParagraph", "TextSpan", "WidgetSpan", "InlineSpan", "StrutStyle", "TextScaler", "TextAlign", "TextOverflow", "TextWidthBasis", "TextBaseline"]
-}
diff --git a/packages/flutterjs_engine/package/material/docs/README.md b/packages/flutterjs_engine/package/material/docs/README.md
deleted file mode 100644
index 2f2a9827..00000000
--- a/packages/flutterjs_engine/package/material/docs/README.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# FlutterJS Material Documentation
-
-Documentation for the `@flutterjs/material` package, implementing Material Design components for the web.
-
-## 📚 Guides & Resources
-
-### [Component Guide](component-guide.md)
-**Start Here** - Explains the architecture of Material components, how VNodes interact with Material properties, and implementation patterns.
-
-### [Widget Status](status.md)
-A focused map of implemented widgets, missing features, and planned components.
-
-### [Master List](master-list.md)
-A complete inventory of over 200+ Flutter widgets with their conversion status (Planned, Implemented, or Not Viable).
-
-### [App Capabilities](capabilities.md)
-Details the capabilities of `MaterialApp` and `Scaffold`, including routing, theming, and structure.
-
-## 🏗️ Internal Architecture
-
-### [Widget Levels](widget-levels.md)
-Hierarchy of mapping from Flutter widgets to HTML elements (Level 1: Basic -> Level 8: Root Theme).
-
-### [Dependency Tree](dependency-tree.md)
-Bottom-up analysis of theme dependencies to ensure clean imports and avoid circular dependencies.
diff --git a/packages/flutterjs_engine/package/material/docs/capabilities.md b/packages/flutterjs_engine/package/material/docs/capabilities.md
deleted file mode 100644
index fab4f702..00000000
--- a/packages/flutterjs_engine/package/material/docs/capabilities.md
+++ /dev/null
@@ -1,358 +0,0 @@
-# MaterialApp: Complete Capabilities
-
-## What MaterialApp Actually Handles
-
-### 1. **Navigation & Routing**
-```dart
-this.home,                          // Default page
-Map<String, WidgetBuilder> this.routes,  // Named routes
-this.initialRoute,                  // Starting route
-this.onGenerateRoute,               // Dynamic route generation
-this.onGenerateInitialRoutes,       // Initial routes creation
-this.onUnknownRoute,                // Fallback for unknown routes
-this.navigatorObservers,            // Track navigation events
-```
-
-**Your App needs:**
-- Route definitions
-- Route matching logic
-- Navigation history management
-- Route observers/hooks
-
----
-
-### 2. **Theming & Appearance**
-```dart
-this.theme,                         // Light theme
-this.darkTheme,                     // Dark theme
-this.highContrastTheme,             // High contrast light
-this.highContrastDarkTheme,         // High contrast dark
-this.themeMode,                     // system/light/dark
-this.themeAnimationDuration,        // Transition animation
-this.themeAnimationCurve,           // Animation easing
-this.themeAnimationStyle,           // Advanced animation config
-this.color,                         // Primary app color (brand)
-this.scrollBehavior,                // Scroll physics & style
-```
-
-**Your App needs:**
-- Multiple theme instances
-- Dynamic theme switching
-- Accessibility support (high contrast)
-- System dark mode detection
-- Smooth theme animations
-
----
-
-### 3. **Localization & Internationalization**
-```dart
-this.locale,                        // Current locale
-this.localizationsDelegates,        // Translation providers
-this.localeListResolutionCallback,  // Handle multiple locales
-this.localeResolutionCallback,      // Handle single locale
-this.supportedLocales,              // Supported languages
-```
-
-**Your App needs:**
-- Language detection
-- Locale resolution fallback
-- Pluralization & formatting
-- Right-to-left (RTL) support
-- Translation delegates
-
----
-
-### 4. **Customization & Wrapping**
-```dart
-this.builder,                       // Wrap entire widget tree
-this.title,                         // App name in system
-this.onGenerateTitle,               // Dynamic app title
-this.restorationScopeId,            // State restoration
-```
-
-**Your App needs:**
-- Middleware system
-- Title management
-- State persistence
-
----
-
-### 5. **Navigation Callbacks**
-```dart
-this.onNavigationNotification,      // Listen to navigation events
-this.navigatorObservers,            // Route observers
-```
-
-**Your App needs:**
-- Event listeners for route changes
-- Analytics hooks
-- Navigation middleware
-
----
-
-### 6. **Accessibility & Debugging**
-```dart
-this.debugShowMaterialGrid = false,           // Layout grid overlay
-this.showPerformanceOverlay = false,          // Performance monitor
-this.checkerboardRasterCacheImages = false,   // Cache visualization
-this.checkerboardOffscreenLayers = false,     // Offscreen layer detection
-this.showSemanticsDebugger = false,           // Accessibility tree
-this.debugShowCheckedModeBanner = true,       // Debug banner
-```
-
-**Your App needs:**
-- Development debugging tools
-- Performance monitoring
-- Accessibility tree visualization
-
----
-
-### 7. **Keyboard & Input**
-```dart
-this.shortcuts,                     // Keyboard shortcuts
-this.actions,                       // Intent actions
-```
-
-**Your App needs:**
-- Keyboard shortcut handling
-- Intent-action system
-- Accessibility focus management
-
----
-
-### 8. **Appearance Customization**
-```dart
-this.useInheritedMediaQuery,        // (Deprecated) Media query inheritance
-```
-
----
-
-## Full Feature Matrix
-
-| Category | Feature | Priority | Complexity |
-|----------|---------|----------|-----------|
-| **Navigation** | Named routes | CRITICAL | High |
-| | Dynamic route generation | HIGH | High |
-| | Route observers | HIGH | Medium |
-| | Navigation history | CRITICAL | High |
-| **Theme** | Light/Dark theme | CRITICAL | Medium |
-| | High contrast support | MEDIUM | Medium |
-| | Theme animation | MEDIUM | Medium |
-| | Theme switching | CRITICAL | Medium |
-| **Localization** | Language detection | HIGH | Medium |
-| | Locale resolution | HIGH | Medium |
-| | Translation delegates | MEDIUM | Medium |
-| **Customization** | Builder wrapping | MEDIUM | Low |
-| | Dynamic title | LOW | Low |
-| **Accessibility** | Keyboard shortcuts | MEDIUM | High |
-| | Semantics tree | LOW | High |
-| **Debugging** | Dev tools overlay | LOW | Medium |
-| | Performance monitoring | LOW | Medium |
-
----
-
-## What You MUST Implement
-
-### Tier 1 (Essential)
-```javascript
-// Must have for complete app
-- Navigation/Routing
-- Theme management
-- Route observers
-- Initial route handling
-```
-
-### Tier 2 (Important)
-```javascript
-// Should have for production
-- Localization
-- Dynamic title
-- Theme animation
-- High contrast support
-```
-
-### Tier 3 (Nice to have)
-```javascript
-// Can add later
-- Dev tools overlay
-- Performance monitoring
-- Keyboard shortcuts
-- Accessibility tree
-```
-
----
-
-## Implementation Priority for Flutter.js
-
-### Phase 1: Core App (MVP)
-```javascript
-class App {
-  constructor(config) {
-    // Navigation
-    this.routes = config.routes;
-    this.initialRoute = config.initialRoute || '/';
-    this.onGenerateRoute = config.onGenerateRoute;
-    this.onUnknownRoute = config.onUnknownRoute;
-    this.navigatorObservers = config.navigatorObservers || [];
-    
-    // Theme
-    this.theme = config.theme;
-    this.darkTheme = config.darkTheme;
-    this.themeMode = config.themeMode || 'system';
-    
-    // Basic
-    this.title = config.title || '';
-    this.color = config.color;
-  }
-}
-```
-
-### Phase 2: Enhanced App
-```javascript
-class App {
-  // + from Phase 1
-  
-  // Theme
-  + this.themeAnimationDuration
-  + this.themeAnimationCurve
-  + this.highContrastTheme
-  + this.highContrastDarkTheme
-  
-  // Localization
-  + this.locale
-  + this.supportedLocales
-  + this.localizationsDelegates
-  
-  // Customization
-  + this.builder
-  + this.onGenerateTitle
-  + this.scrollBehavior
-}
-```
-
-### Phase 3: Complete App
-```javascript
-class App {
-  // + from Phase 1 & 2
-  
-  // Advanced
-  + this.onNavigationNotification
-  + this.shortcuts
-  + this.actions
-  + this.restorationScopeId
-  
-  // Debug
-  + this.debugShowMaterialGrid
-  + this.showPerformanceOverlay
-  + etc...
-}
-```
-
----
-
-## Dependency Map
-
-```
-App
-├── Navigation Layer
-│   ├── Router (routes, initialRoute)
-│   ├── NavigatorObservers (lifecycle hooks)
-│   ├── onGenerateRoute (custom routing logic)
-│   └── onUnknownRoute (fallback)
-├── Theme Layer
-│   ├── ThemeManager
-│   │   ├── theme (light)
-│   │   ├── darkTheme
-│   │   ├── highContrastTheme
-│   │   └── highContrastDarkTheme
-│   ├── ThemeAnimator
-│   │   ├── themeAnimationDuration
-│   │   ├── themeAnimationCurve
-│   │   └── themeAnimationStyle
-│   └── ThemeSwitcher
-│       └── themeMode (system/light/dark)
-├── Localization Layer
-│   ├── LocaleResolver
-│   │   ├── locale
-│   │   ├── supportedLocales
-│   │   └── localeResolutionCallback
-│   └── LocalizationDelegates
-│       └── localizationsDelegates
-├── Customization Layer
-│   ├── builder (middleware)
-│   ├── onGenerateTitle (dynamic title)
-│   └── scrollBehavior
-├── Input Layer
-│   ├── shortcuts (keyboard)
-│   └── actions (intents)
-├── State Layer
-│   └── restorationScopeId (state persistence)
-└── Debug Layer
-    ├── debugShowMaterialGrid
-    ├── showPerformanceOverlay
-    ├── etc...
-```
-
----
-
-## Minimal Implementation Strategy
-
-For Flutter.js, start with:
-
-```javascript
-export class App {
-  constructor({
-    // Navigation (CRITICAL)
-    home,
-    routes = {},
-    initialRoute = '/',
-    onGenerateRoute,
-    onUnknownRoute,
-    navigatorObservers = [],
-    
-    // Theme (CRITICAL)
-    theme,
-    darkTheme,
-    themeMode = 'system',
-    
-    // Localization (HIGH)
-    locale,
-    supportedLocales = [{ lang: 'en', region: 'US' }],
-    localizationsDelegates,
-    
-    // Customization (MEDIUM)
-    builder,
-    title = '',
-    onGenerateTitle,
-    
-    // Advanced (LOW)
-    scrollBehavior,
-    shortcuts,
-    actions,
-    restorationScopeId,
-  } = {}) {
-    // Store all config
-    // Initialize layers
-  }
-  
-  async initialize() {
-    // 1. Initialize localization
-    // 2. Initialize theme
-    // 3. Initialize router
-    // 4. Mount app
-  }
-}
-```
-
----
-
-## What NOT to Include (Yet)
-
-- `debugShowMaterialGrid` - debug only
-- `showPerformanceOverlay` - debug only
-- `checkerboardRasterCacheImages` - debug only
-- `checkerboardOffscreenLayers` - debug only
-- `showSemanticsDebugger` - debug only
-- `useInheritedMediaQuery` - deprecated
-
-Save these for a future `@dev` or `--debug` mode.
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/docs/component-guide.md b/packages/flutterjs_engine/package/material/docs/component-guide.md
deleted file mode 100644
index a03c5651..00000000
--- a/packages/flutterjs_engine/package/material/docs/component-guide.md
+++ /dev/null
@@ -1,1047 +0,0 @@
-# Flutter.js Material Components Guide
-
-## 📖 Complete Overview
-
-This guide explains how Material Design components are organized in Flutter.js, their responsibilities, and how to implement them using VNode and Material properties.
-
----
-
-## 🎯 Table of Contents
-
-1. [Component Organization](#component-organization)
-2. [VNode vs Material Properties](#vnode-vs-material-properties)
-3. [Component Sections](#component-sections)
-4. [Implementation Patterns](#implementation-patterns)
-5. [Property Handling](#property-handling)
-6. [State Management](#state-management)
-7. [Build Order](#build-order)
-8. [Examples](#examples)
-
----
-
-## Component Organization
-
-### What is a Material Component?
-
-A Material Component in Flutter.js is a **widget** that:
-- Takes **Material properties** (alignment, colors, elevation, etc.)
-- Converts them to **CSS classes and styles**
-- Returns a **VNode** (virtual DOM representation)
-- Can optionally manage **state** and **animations**
-
-### Three Core Responsibilities
-
-```
-┌─────────────────────────────────────────────┐
-│   1. ACCEPT MATERIAL PROPERTIES             │
-│   (MainAxisAlignment, EdgeInsets, etc.)     │
-└─────────────────────────────────────────────┘
-                      ↓
-┌─────────────────────────────────────────────┐
-│   2. PROCESS & MAP TO CSS                   │
-│   (Enums → CSS classes, convert styles)     │
-└─────────────────────────────────────────────┘
-                      ↓
-┌─────────────────────────────────────────────┐
-│   3. RETURN VNODE                           │
-│   (Clean HTML representation)               │
-└─────────────────────────────────────────────┘
-```
-
----
-
-## VNode vs Material Properties
-
-### What is VNode?
-
-**VNode** = Virtual Node (JavaScript representation of DOM)
-
-```javascript
-new VNode({
-  tag: 'div',              // HTML tag
-  props: { className: 'fjs-column' },  // Attributes
-  children: [],            // Child nodes
-  events: { click: fn }    // Event handlers
-})
-```
-
-**Purpose**: Abstract representation that can be:
-- Converted to HTML string (SSR)
-- Converted to DOM element (CSR)
-- Easily manipulated and diffed
-
-### What are Material Properties?
-
-**Material Properties** = Configuration parameters using Material Design enums/classes
-
-```javascript
-Column({
-  mainAxisAlignment: MainAxisAlignment.center,     // ← Material property
-  crossAxisAlignment: CrossAxisAlignment.stretch,  // ← Material property
-  children: [...]
-})
-```
-
-**Purpose**: Provide Flutter-like API that developers understand
-
-### The Relationship
-
-```
-User Code:
-  ↓
-Column({ mainAxisAlignment: MainAxisAlignment.center })
-  ↓
-Widget stores Material property:
-  ↓
-this.mainAxisAlignment = MainAxisAlignment.center
-  ↓
-Maps to CSS class using enum:
-  ↓
-const map = { [MainAxisAlignment.center]: 'fjs-main-center' }
-  ↓
-Generates VNode with CSS class:
-  ↓
-new VNode({
-  tag: 'div',
-  props: { className: 'fjs-main-center' }
-})
-  ↓
-Returns clean, optimized VNode
-```
-
----
-
-## Component Sections
-
-### SECTION 1: Basic Layout Widgets
-
-**Components**: Center, Padding, SizedBox, Spacer
-
-**Purpose**: Simple positioning without Material complexity
-
-**Material Properties**: ❌ MINIMAL
-- No enums
-- No theme lookup
-- Just simple CSS values
-
-**VNode Creation**: ✅ SIMPLE
-- Standard flexbox layout
-- Basic CSS properties
-
-**State Management**: ❌ NONE
-- Stateless widgets
-
-**Animation**: ❌ NONE
-
-**Example**:
-```javascript
-Center({
-  child: Text('Hello'),
-  widthFactor: 0.5
-})
-
-// Internally:
-// - Returns VNode with display: flex, justifyContent: center
-// - No Material property mapping needed
-```
-
----
-
-### SECTION 2: Flex Layout Widgets
-
-**Components**: Column, Row, Flex, Wrap
-
-**Purpose**: Advanced multi-child positioning using flexbox
-
-**Material Properties**: ✅ ENUMS
-- MainAxisAlignment (start, center, end, spaceBetween, etc.)
-- CrossAxisAlignment (stretch, baseline, etc.)
-
-**VNode Creation**: ✅ ENUM MAPPING
-```javascript
-// Widget receives:
-mainAxisAlignment: MainAxisAlignment.center
-
-// Maps to CSS class:
-const map = {
-  [MainAxisAlignment.start]: 'fjs-main-start',
-  [MainAxisAlignment.center]: 'fjs-main-center',
-  [MainAxisAlignment.end]: 'fjs-main-end'
-}
-
-// Returns VNode:
-new VNode({
-  tag: 'div',
-  props: {
-    className: map[this.mainAxisAlignment],
-    style: { display: 'flex', flexDirection: 'column' }
-  }
-})
-```
-
-**State Management**: ❌ NONE
-
-**Animation**: ❌ NONE
-
----
-
-### SECTION 3: Container & Decoration Widgets
-
-**Components**: Container, Card, DecoratedBox
-
-**Purpose**: Box with styling (color, border, shadow, radius)
-
-**Material Properties**: ✅ COMPLEX CONVERSION
-- Color → backgroundColor
-- BorderRadius → borderRadiusCSS object
-- BoxShadow → boxShadowString
-- Border → borderCSSObject
-
-**VNode Creation**: ✅ STYLE OBJECT CONVERSION
-```javascript
-Container({
-  color: Colors.primary,
-  borderRadius: BorderRadius.circular(12),
-  boxShadow: BoxShadow({ blurRadius: 8 })
-})
-
-// Internally:
-// - Calls borderRadius.toCSSObject()
-// - Calls boxShadow.toCSSString()
-// - Returns VNode with all styles merged
-```
-
-**State Management**: ❌ NONE
-
-**Animation**: ❌ NONE
-
----
-
-### SECTION 4: Text & Typography Widgets
-
-**Components**: Text, RichText, TextSpan
-
-**Purpose**: Text rendering with styling
-
-**Material Properties**: ✅ TEXTSTYLE CONVERSION
-- TextStyle → CSS style object
-- FontWeight → fontWeight property
-- TextAlign → textAlign property
-- TextOverflow → overflow handling
-
-**VNode Creation**: ✅ STYLE CONVERSION
-```javascript
-Text('Hello', {
-  style: {
-    fontSize: 24,
-    fontWeight: FontWeight.bold,
-    color: Colors.primary
-  }
-})
-
-// Internally:
-// - Converts TextStyle to CSS object
-// - Returns VNode with span element
-```
-
-**State Management**: ❌ NONE
-
-**Animation**: ❌ NONE
-
----
-
-### SECTION 5: Button Widgets
-
-**Components**: ElevatedButton, FilledButton, TextButton, OutlinedButton, IconButton, FloatingActionButton
-
-**Purpose**: Interactive clickable elements with Material styling
-
-**Material Properties**: ✅ THEME LOOKUP + SHADOWS
-- onPressed callback
-- style overrides
-- Uses ButtonTheme from context
-- Elevation system (BoxShadow)
-
-**VNode Creation**: ✅ THEME + ELEVATION
-```javascript
-ElevatedButton({
-  onPressed: () => handleClick(),
-  child: Text('Click me')
-})
-
-// Internally:
-// - Gets ButtonTheme from context
-// - Applies BoxShadow based on elevation
-// - Sets background color from theme
-// - Returns VNode with button element + click event
-```
-
-**State Management**: ❌ NO INTERNAL STATE
-- External callback only
-
-**Animation**: ✅ RIPPLE EFFECT
-- Material ripple on click
-- Uses animation controller
-
----
-
-### SECTION 6: Input Widgets
-
-**Components**: TextField, Checkbox, Switch, Radio, Slider, RangeSlider, DatePicker, TimePicker
-
-**Purpose**: User input with validation and state management
-
-**Material Properties**: ✅ INPUTDECORATION + VALIDATION
-- InputDecoration (hint, label, error, etc.)
-- Validators
-- Controller for value management
-
-**VNode Creation**: ✅ INPUT ELEMENTS + ATTRIBUTES
-```javascript
-TextField({
-  decoration: InputDecoration({
-    hintText: 'Enter text',
-    labelText: 'Name',
-    filled: true
-  }),
-  validator: FormValidator.required()
-})
-
-// Internally:
-// - Applies InputDecoration styling
-// - Converts to input VNode with attributes
-// - Attaches validation logic
-```
-
-**State Management**: ✅ REQUIRED
-- Manages: checked, value, selected, input
-- Uses: TextEditingController
-- Lifecycle: initState, didUpdateWidget, dispose
-
-**Animation**: ❌ NONE (except focus transition)
-
----
-
-### SECTION 7: Selection Widgets
-
-**Components**: Chip, ChoiceChip, FilterChip, InputChip, ActionChip, SegmentedButton
-
-**Purpose**: User selection (single or multiple)
-
-**Material Properties**: ✅ SELECTION STATE + THEME
-- selected boolean
-- onSelected callback
-- label widget
-- avatar widget
-
-**VNode Creation**: ✅ STATE-BASED STYLING
-```javascript
-ChoiceChip({
-  label: Text('Option 1'),
-  selected: this.state.selected,
-  onSelected: (value) => this.setState({ selected: value })
-})
-
-// Internally:
-// - Maps selected state to CSS class
-// - Applies different colors based on selection
-// - Returns VNode with click handler
-```
-
-**State Management**: ✅ REQUIRED
-- Manages: selected state
-- Updates: on user selection
-- Notifies: onSelected callback
-
-**Animation**: ❌ NONE
-
----
-
-### SECTION 8: List Widgets
-
-**Components**: ListTile, ListView, GridView, ReorderableList
-
-**Purpose**: Rendering collections of items
-
-**Material Properties**: ✅ LIST ITEM SPACING & LAYOUT
-- ListTile properties (title, subtitle, leading, trailing)
-- ListView/GridView (scrollDirection, itemBuilder)
-- Spacing and dividers
-
-**VNode Creation**: ✅ COLLECTION RENDERING
-```javascript
-ListView({
-  children: itemList.map(item => 
-    ListTile({
-      title: Text(item.title),
-      subtitle: Text(item.subtitle),
-      leading: Icon(item.icon)
-    })
-  )
-})
-
-// Internally:
-// - Builds each ListTile as VNode
-// - Applies Material 3 spacing
-// - Adds dividers between items
-// - Returns list container VNode
-```
-
-**State Management**: ✅ SCROLL STATE
-- Manages: scroll position
-- Lifecycle: scroll listeners
-- Lazy loading support
-
-**Animation**: ✅ LIST ANIMATIONS
-- Item enter/exit animations
-- Reorder animations (ReorderableList)
-
----
-
-### SECTION 9: Dialog & Modal Widgets
-
-**Components**: Dialog, AlertDialog, SimpleDialog, BottomSheet, ModalBottomSheet, SnackBar, ExpansionPanel
-
-**Purpose**: Overlay content above main content
-
-**Material Properties**: ✅ ELEVATION + SCRIM
-- Elevation (z-index)
-- Scrim color (backdrop)
-- Animations (fade in/out)
-- Position (center, bottom, etc.)
-
-**VNode Creation**: ✅ OVERLAY STRUCTURE
-```javascript
-AlertDialog({
-  title: Text('Confirm?'),
-  content: Text('Are you sure?'),
-  actions: [
-    TextButton({ child: Text('Cancel') }),
-    TextButton({ child: Text('OK') })
-  ]
-})
-
-// Internally:
-// - Creates backdrop VNode (div with scrim color)
-// - Creates dialog box VNode (elevated container)
-// - Sets z-index from Material tokens
-// - Returns overlay structure
-```
-
-**State Management**: ✅ VISIBILITY STATE
-- Manages: visible/hidden
-- Lifecycle: on show/hide
-- Modal barrier handling
-
-**Animation**: ✅ ENTER/EXIT
-- Fade in animation
-- Slide up/down animations
-- Scrim fade
-
----
-
-### SECTION 10: App Structure Widgets
-
-**Components**: AppBar, Scaffold, NavigationBar, BottomNavigationBar, NavigationRail, Drawer, DrawerHeader, DrawerTile, TabBar
-
-**Purpose**: Page-level layout and navigation
-
-**Material Properties**: ✅ COMPLEX THEME + NAVIGATION
-- Title, actions, leading, trailing (AppBar)
-- Elevation and color
-- Navigation state
-
-**VNode Creation**: ✅ COMPLEX STRUCTURE
-```javascript
-Scaffold({
-  appBar: AppBar({
-    title: Text('My App'),
-    elevation: 4
-  }),
-  body: Center({ child: Text('Content') }),
-  bottomNavigationBar: BottomNavigationBar({
-    items: [...]
-  })
-})
-
-// Internally:
-// - Creates column structure
-// - Applies AppBar styling (elevation, color)
-// - Manages navigation state
-// - Returns complete page structure
-```
-
-**State Management**: ✅ REQUIRED
-- Manages: current page, tab selection
-- Navigation state
-- Drawer visibility
-
-**Animation**: ❌ NONE (navigation handled separately)
-
----
-
-### SECTION 11: Feedback Widgets
-
-**Components**: InkWell, InkResponse, Tooltip, CircularProgressIndicator, LinearProgressIndicator
-
-**Purpose**: Visual feedback for interactions
-
-**Material Properties**: ✅ INTERACTION STYLING
-- splashColor, hoverColor (InkWell)
-- onTap, onLongPress callbacks
-- Ripple radius
-
-**VNode Creation**: ✅ EVENT HANDLERS + ANIMATION
-```javascript
-InkWell({
-  onTap: () => handleTap(),
-  splashColor: Colors.primary,
-  child: Text('Tap me')
-})
-
-// Internally:
-// - Attaches click handler
-// - Creates ripple animation on click
-// - Returns VNode with event listeners
-```
-
-**State Management**: ✅ ANIMATION STATE
-- Manages: ripple animation
-- Hover state
-- Animation controller
-
-**Animation**: ✅ RIPPLE EFFECT
-- Ripple animation curves
-- Splash color animation
-- Hover state animation
-
----
-
-### SECTION 12: Media Widgets
-
-**Components**: Icon, Image, NetworkImage, CircleAvatar, Badge
-
-**Purpose**: Asset rendering (icons, images, avatars)
-
-**Material Properties**: ✅ SIZE & BOXFIT
-- Size (icon size, image size)
-- BoxFit (contain, cover, fill, etc.)
-- Color filter
-
-**VNode Creation**: ✅ MEDIA ELEMENTS
-```javascript
-Icon(Icons.favorite, {
-  size: 24,
-  color: Colors.red
-})
-
-// Internally:
-// - Returns img or svg VNode
-// - Applies size as width/height
-// - Applies color filter if needed
-```
-
-**State Management**: ❌ NONE (except loading state)
-
-**Animation**: ❌ NONE
-
----
-
-## Implementation Patterns
-
-### Pattern 1: Simple Stateless Component
-
-```javascript
-// Structure
-function ComponentName(props) {
-  return new _ComponentName(props);
-}
-
-class _ComponentName extends StatelessWidget {
-  constructor(props) {
-    super();
-    this.prop1 = props.prop1;
-    this.prop2 = props.prop2;
-  }
-
-  build(context) {
-    // 1. Extract Material properties
-    // 2. Map to CSS classes/values
-    // 3. Return VNode
-    return new VNode({
-      tag: 'div',
-      props: { className: this._generateCSSClasses() }
-    });
-  }
-
-  _generateCSSClasses() {
-    // Map enums to CSS classes
-  }
-}
-
-// Usage
-Center({ child: Text('Hello') })
-```
-
-### Pattern 2: Stateful Component with State
-
-```javascript
-// Structure
-function ComponentName(props) {
-  return new _ComponentName(props);
-}
-
-class _ComponentName extends StatefulWidget {
-  constructor(props) {
-    super();
-    this.prop1 = props.prop1;
-  }
-
-  createState() {
-    return new _ComponentNameState();
-  }
-}
-
-class _ComponentNameState extends State {
-  initState() {
-    // Initialize
-  }
-
-  build(context) {
-    // 1. Use this.state for state values
-    // 2. Map Material properties
-    // 3. Return VNode with event handlers
-    return new VNode({
-      tag: 'input',
-      props: { value: this.state.value },
-      events: { change: (e) => this.setState({ value: e.target.value }) }
-    });
-  }
-
-  dispose() {
-    // Cleanup
-  }
-}
-
-// Usage
-TextField({ onChanged: (value) => console.log(value) })
-```
-
-### Pattern 3: Component with Theme Access
-
-```javascript
-class _ComponentName extends StatelessWidget {
-  build(context) {
-    // Get theme from context
-    const theme = context.getInheritedWidgetOfExactType(ThemeData);
-    
-    // Use theme colors
-    const color = this.customColor || theme.primary;
-    
-    return new VNode({
-      tag: 'div',
-      props: {
-        style: { backgroundColor: color }
-      }
-    });
-  }
-}
-```
-
----
-
-## Property Handling
-
-### Type 1: Simple Values
-
-No conversion needed, use directly:
-
-```javascript
-// Properties: width, height, opacity
-SizedBox({ width: 100, height: 100 })
-
-// In VNode:
-props: { style: { width: '100px', height: '100px' } }
-```
-
-### Type 2: Enums → CSS Classes
-
-Map enums to CSS class names:
-
-```javascript
-// Property: MainAxisAlignment enum
-Column({ mainAxisAlignment: MainAxisAlignment.center })
-
-// Mapping:
-const map = {
-  [MainAxisAlignment.center]: 'fjs-main-center',
-  [MainAxisAlignment.start]: 'fjs-main-start'
-}
-
-// In VNode:
-props: { className: map[this.mainAxisAlignment] }
-```
-
-### Type 3: Objects → CSS Objects
-
-Convert objects to CSS style objects:
-
-```javascript
-// Property: BorderRadius object
-Container({ borderRadius: BorderRadius.circular(12) })
-
-// Conversion:
-const borderRadiusCSS = this.borderRadius.toCSSObject();
-// Returns: { borderTopLeftRadius: '12px', ... }
-
-// In VNode:
-props: { style: borderRadiusCSS }
-```
-
-### Type 4: Complex Objects → Strings
-
-Convert complex objects to CSS strings:
-
-```javascript
-// Property: BoxShadow object
-Container({ boxShadow: BoxShadow({ blurRadius: 8 }) })
-
-// Conversion:
-const shadowString = this.boxShadow.toCSSString();
-// Returns: '0px 0px 8px 0px rgba(0,0,0,0.2)'
-
-// In VNode:
-props: { style: { boxShadow: shadowString } }
-```
-
-### Type 5: Callbacks → Event Handlers
-
-Attach callbacks as event listeners:
-
-```javascript
-// Property: onPressed callback
-ElevatedButton({ onPressed: () => handleClick() })
-
-// In VNode:
-events: { click: this.onPressed }
-```
-
----
-
-## State Management
-
-### When to Use State
-
-| Use Case | Example | State Type |
-|----------|---------|-----------|
-| User input | TextField value | StatefulWidget |
-| Selection | Checkbox checked | StatefulWidget |
-| Visibility | Dialog visible | StatefulWidget |
-| Toggle | Switch state | StatefulWidget |
-| Static content | Text, Icon | StatelessWidget |
-| Layout only | Column, Row | StatelessWidget |
-
-### State Lifecycle
-
-```javascript
-class MyState extends State {
-  // 1. Called once when widget created
-  initState() {
-    this.count = 0;
-  }
-
-  // 2. Called when widget props change
-  didUpdateWidget(oldWidget) {
-    if (oldWidget.data !== this.widget.data) {
-      // Handle change
-    }
-  }
-
-  // 3. Build the UI
-  build(context) {
-    return new VNode({...});
-  }
-
-  // 4. Called before removing
-  deactivate() {
-    // Save state if needed
-  }
-
-  // 5. Called on cleanup
-  dispose() {
-    // Cleanup resources
-  }
-}
-```
-
-### setState Usage
-
-```javascript
-// Trigger rebuild with new state
-this.setState(() => {
-  this.count = this.count + 1;
-  this.name = 'New Name';
-});
-
-// Scheduler will:
-// 1. Update this.state properties
-// 2. Call performRebuild()
-// 3. Generate new VNode
-// 4. Update DOM
-```
-
----
-
-## Build Order
-
-Components must be built in dependency order:
-
-```
-Level 8: Layout (Center, Padding)
-  ↓
-Level 8: Flex (Column, Row)
-  ↓
-Level 9: Container (Container, Card)
-  ↓
-Level 5: Text (Text, RichText)
-  ↓
-Level 8: Media (Icon, Image)
-  ↓
-Level 11: Button (ElevatedButton, TextButton)
-  ↓
-Level 10: Input (TextField, Checkbox)
-  ↓
-Level 11: Selection (Chip, SegmentedButton)
-  ↓
-Level 12: List (ListView, ListTile)
-  ↓
-Level 8: Feedback (InkWell, Progress)
-  ↓
-Level 13: Dialog (AlertDialog, SnackBar)
-  ↓
-Level 10: App (AppBar, Scaffold)
-```
-
----
-
-## Examples
-
-### Example 1: Simple Button Component
-
-```javascript
-// Factory function
-function ElevatedButton({ onPressed, child }) {
-  return new _ElevatedButton({ onPressed, child });
-}
-
-// Widget class
-class _ElevatedButton extends StatelessWidget {
-  constructor({ onPressed, child }) {
-    super();
-    this.onPressed = onPressed;
-    this.child = child;
-  }
-
-  build(context) {
-    // 1. Get theme
-    const theme = context.getInheritedWidgetOfExactType(ThemeData);
-    
-    // 2. Build child
-    const builtChild = this.child instanceof StatelessWidget
-      ? this.child.build(context)
-      : this.child;
-    
-    // 3. Create VNode
-    return new VNode({
-      tag: 'button',
-      props: {
-        className: 'fjs-elevated-button',
-        style: {
-          backgroundColor: theme.primary,
-          color: theme.onPrimary,
-          padding: '12px 24px',
-          borderRadius: '4px',
-          cursor: this.onPressed ? 'pointer' : 'default'
-        }
-      },
-      children: [builtChild],
-      events: {
-        click: this.onPressed
-      }
-    });
-  }
-}
-
-// Usage
-ElevatedButton({
-  onPressed: () => alert('Clicked!'),
-  child: Text('Click Me')
-})
-```
-
-### Example 2: Stateful Input Component
-
-```javascript
-// Factory function
-function TextField({ value, onChanged, decoration }) {
-  return new _TextField({ value, onChanged, decoration });
-}
-
-// Widget class
-class _TextField extends StatefulWidget {
-  constructor({ value, onChanged, decoration }) {
-    super();
-    this.value = value;
-    this.onChanged = onChanged;
-    this.decoration = decoration;
-  }
-
-  createState() {
-    return new _TextFieldState();
-  }
-}
-
-// State class
-class _TextFieldState extends State {
-  initState() {
-    this.value = this.widget.value || '';
-  }
-
-  build(context) {
-    // 1. Get InputDecoration
-    const decoration = this.widget.decoration || new InputDecoration();
-    
-    // 2. Apply padding from decoration
-    const padding = decoration.getContentPadding();
-    
-    // 3. Create input VNode
-    return new VNode({
-      tag: 'input',
-      props: {
-        type: 'text',
-        value: this.value,
-        placeholder: decoration.hintText,
-        style: {
-          padding: `${padding.top}px ${padding.right}px`,
-          border: '1px solid #ccc',
-          borderRadius: '4px'
-        }
-      },
-      events: {
-        change: (e) => {
-          this.setState(() => {
-            this.value = e.target.value;
-          });
-          if (this.widget.onChanged) {
-            this.widget.onChanged(this.value);
-          }
-        }
-      }
-    });
-  }
-}
-
-// Usage
-TextField({
-  value: 'Initial',
-  onChanged: (value) => console.log(value),
-  decoration: new InputDecoration({
-    hintText: 'Enter text',
-    labelText: 'Name'
-  })
-})
-```
-
-### Example 3: Column with Alignment
-
-```javascript
-// Factory function
-function Column({ children, mainAxisAlignment, crossAxisAlignment }) {
-  return new _Column({
-    children,
-    mainAxisAlignment,
-    crossAxisAlignment
-  });
-}
-
-// Widget class
-class _Column extends StatelessWidget {
-  constructor({ children, mainAxisAlignment, crossAxisAlignment }) {
-    super();
-    this.children = children;
-    this.mainAxisAlignment = mainAxisAlignment;
-    this.crossAxisAlignment = crossAxisAlignment;
-  }
-
-  build(context) {
-    // 1. Build all children
-    const builtChildren = this.children.map(child => {
-      if (child instanceof StatelessWidget || child instanceof StatefulWidget) {
-        return child.build(context);
-      }
-      return child;
-    });
-    
-    // 2. Map alignment enums to CSS
-    const alignmentMap = {
-      [MainAxisAlignment.start]: 'flex-start',
-      [MainAxisAlignment.center]: 'center',
-      [MainAxisAlignment.end]: 'flex-end',
-      [MainAxisAlignment.spaceBetween]: 'space-between',
-      [MainAxisAlignment.spaceAround]: 'space-around',
-      [MainAxisAlignment.spaceEvenly]: 'space-evenly'
-    };
-    
-    // 3. Create VNode with flexbox
-    return new VNode({
-      tag: 'div',
-      props: {
-        style: {
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: alignmentMap[this.mainAxisAlignment],
-          alignItems: alignmentMap[this.crossAxisAlignment]
-        }
-      },
-      children: builtChildren
-    });
-  }
-}
-
-// Usage
-Column({
-  mainAxisAlignment: MainAxisAlignment.center,
-  crossAxisAlignment: CrossAxisAlignment.stretch,
-  children: [
-    Text('Title'),
-    SizedBox({ height: 16 }),
-    Text('Content')
-  ]
-})
-```
-
----
-
-## 🎯 Summary
-
-| Aspect | Role | Example |
-|--------|------|---------|
-| **Material Properties** | User-facing configuration | `mainAxisAlignment: MainAxisAlignment.center` |
-| **Enum Mapping** | Convert to CSS classes | `[MainAxisAlignment.center]: 'fjs-main-center'` |
-| **Style Conversion** | Objects to CSS strings | `borderRadius.toCSSObject()` |
-| **VNode Creation** | Return clean DOM structure | `new VNode({ tag: 'div', props: {...} })` |
-| **State Management** | Optional - only if needed | `StatefulWidget` + `setState()` |
-| **Event Handlers** | Callbacks on user action | `events: { click: this.onPressed }` |
-| **Theme Access** | Get colors/styles from context | `context.getInheritedWidgetOfExactType(ThemeData)` |
-
----
-
-## 📚 Next Steps
-
-1. Implement Section 1 (Basic Layout) first
-2. Then build Section 2 (Flex Layout)
-3. Move up gradually through sections
-4. Test each section before moving to next
-5. Follow build order strictly to avoid circular dependencies
-
-Happy building! 🚀
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/docs/dependency-tree.md b/packages/flutterjs_engine/package/material/docs/dependency-tree.md
deleted file mode 100644
index 834028c6..00000000
--- a/packages/flutterjs_engine/package/material/docs/dependency-tree.md
+++ /dev/null
@@ -1,413 +0,0 @@
-# Flutter.js Theme System - Dependency Tree (Bottom-Up)
-
-## Level 0: ZERO EXTERNAL REFERENCES (Leaf Nodes)
-These have no other theme/util imports:
-
-```
-✅ color.js               (only needs Math)
-✅ duration.js            (only numbers)
-✅ alignment.js           (only enums)
-✅ axis.js                (only enums)
-✅ border_style.js        (only enums)
-✅ box_fit.js             (only enums)
-✅ clip.js                (only enums)
-✅ cross_axis_alignment.js (only enums)
-✅ font_weight.js         (only enums)
-✅ main_axis_alignment.js (only enums)
-✅ text_align.js          (only enums)
-✅ text_overflow.js       (only enums)
-✅ curves.dart            (only enums/functions)
-✅ constants.dart         (only values)
-```
-
-## Level 1: DEPENDS ON LEVEL 0 ONLY
-(Single dependency on leaf nodes)
-
-```
-offset.js
-  └─ uses: number properties only (dx, dy)
-
-size.js
-  └─ uses: number properties only (width, height)
-
-radius.js
-  └─ uses: number properties
-
-rect.js
-  └─ uses: offset.js + size.js (Level 0)
-
-box_shadow.js
-  ├─ uses: color.js (Level 0)
-  └─ uses: offset.js (Level 0)
-```
-
-## Level 2: DEPENDS ON LEVEL 1
-(Can reference Level 0 and 1)
-
-```
-border.js
-  ├─ uses: color.js (Level 0)
-  ├─ uses: border_style.js (Level 0)
-  └─ uses: size.js (Level 1)
-
-border_radius.js
-  ├─ uses: radius.js (Level 1)
-  └─ uses: rect.js (Level 1)
-
-linear_gradient.js
-  ├─ uses: color.js (Level 0)
-  ├─ uses: alignment.js (Level 0)
-  ├─ uses: offset.js (Level 1)
-  └─ uses: size.js (Level 1)
-
-edge_insets.js
-  └─ uses: only numbers
-```
-
-## Level 3: DEPENDS ON LEVEL 2
-(Can reference Level 0, 1, 2)
-
-```
-text_style.js
-  ├─ uses: color.js (Level 0)
-  ├─ uses: font_weight.js (Level 0)
-  ├─ uses: text_align.js (Level 0)
-  ├─ uses: text_overflow.js (Level 0)
-  └─ uses: numbers/strings
-
-input_decoration.js
-  ├─ uses: border.js (Level 2)
-  ├─ uses: border_radius.js (Level 2)
-  ├─ uses: color.js (Level 0)
-  ├─ uses: text_style.js (Level 3)
-  └─ uses: edge_insets.js (Level 2)
-```
-
-## Level 4: COMPONENT THEMES (Leaf - no cross-theme dependencies)
-(Can reference Levels 0-3, but NOT other Component Themes)
-
-```
-colors_theme.js
-  └─ uses: color.js (Level 0)
-  └─ uses: color_scheme.js pattern (no import)
-
-shadows_theme.js
-  └─ uses: box_shadow.js (Level 1)
-
-typography_theme.js
-  └─ uses: text_style.js (Level 3)
-
-motion_theme.js
-  └─ uses: curves.js (Level 0)
-  └─ uses: duration.js (Level 0)
-```
-
-## Level 5: SIMPLE COMPONENT THEMES
-(Single simple property themes - no complex dependencies)
-
-```
-checkbox_theme.js
-  ├─ uses: color.js
-  ├─ uses: edge_insets.js
-  └─ uses: text_style.js
-
-radio_theme.js
-  ├─ uses: color.js
-  ├─ uses: edge_insets.js
-  └─ uses: text_style.js
-
-switch_theme.js
-  ├─ uses: color.js
-  ├─ uses: edge_insets.js
-  └─ uses: text_style.js
-
-divider_theme.js
-  ├─ uses: color.js
-  ├─ uses: border.js
-  └─ uses: edge_insets.js
-
-scrollbar_theme.js
-  ├─ uses: color.js
-  └─ uses: size.js
-
-badge_theme.js
-  ├─ uses: color.js
-  ├─ uses: border_radius.js
-  └─ uses: box_shadow.js
-
-banner_theme.dart
-  ├─ uses: color.js
-  ├─ uses: edge_insets.js
-  └─ uses: text_style.js
-
-slider_value_indicator_shape.js
-  ├─ uses: size.js
-  ├─ uses: border_radius.js
-  └─ uses: color.js
-```
-
-## Level 6: MEDIUM COMPONENT THEMES
-(Uses Levels 0-5)
-
-```
-slider_theme.js
-  ├─ uses: color.js
-  ├─ uses: box_shadow.js
-  ├─ uses: size.js
-  └─ uses: slider_value_indicator_shape.js
-
-tooltip_theme.js
-  ├─ uses: color.js
-  ├─ uses: text_style.js
-  ├─ uses: border_radius.js
-  └─ uses: edge_insets.js
-
-text_selection_theme.js
-  ├─ uses: color.js
-  ├─ uses: text_style.js
-  └─ uses: edge_insets.js
-
-icon_button_theme.js
-  ├─ uses: color.js
-  ├─ uses: size.js
-  └─ uses: edge_insets.js
-
-list_tile_theme.js
-  ├─ uses: color.js
-  ├─ uses: text_style.js
-  ├─ uses: edge_insets.js
-  └─ uses: border_radius.js
-
-snack_bar_theme.js
-  ├─ uses: color.js
-  ├─ uses: text_style.js
-  ├─ uses: edge_insets.js
-  └─ uses: border_radius.js
-
-tab_bar_theme.js
-  ├─ uses: color.js
-  ├─ uses: text_style.js
-  └─ uses: border.js
-
-progress_indicator_theme.js
-  ├─ uses: color.js
-  └─ uses: size.js
-
-radio_theme.js
-  ├─ uses: color.js
-  └─ uses: edge_insets.js
-
-chip_theme.js
-  ├─ uses: color.js
-  ├─ uses: text_style.js
-  ├─ uses: border_radius.js
-  ├─ uses: border.js
-  └─ uses: edge_insets.js
-
-card_theme.js
-  ├─ uses: color.js
-  ├─ uses: border_radius.js
-  ├─ uses: box_shadow.js
-  ├─ uses: edge_insets.js
-  └─ uses: border.js
-```
-
-## Level 7: COMPLEX COMPONENT THEMES
-(Uses Levels 0-6)
-
-```
-app_bar_theme.js
-  ├─ uses: text_style.js
-  ├─ uses: color.js
-  ├─ uses: edge_insets.js
-  └─ uses: icon_button_theme.js (if referencing)
-
-elevated_button_theme.js
-  ├─ uses: color.js
-  ├─ uses: text_style.js
-  ├─ uses: edge_insets.js
-  ├─ uses: border_radius.js
-  └─ uses: box_shadow.js
-
-filled_button_theme.js
-  ├─ uses: elevated_button_theme pattern
-  └─ similar to elevated_button_theme.js
-
-outlined_button_theme.js
-  ├─ uses: color.js
-  ├─ uses: text_style.js
-  ├─ uses: border.js
-  ├─ uses: edge_insets.js
-  └─ uses: border_radius.js
-
-text_button_theme.js
-  ├─ uses: color.js
-  ├─ uses: text_style.js
-  ├─ uses: edge_insets.js
-  └─ uses: border_radius.js
-
-floating_action_button_theme.js
-  ├─ uses: color.js
-  ├─ uses: text_style.js
-  ├─ uses: border_radius.js
-  └─ uses: box_shadow.js
-
-dialog_theme.js
-  ├─ uses: color.js
-  ├─ uses: text_style.js
-  ├─ uses: border_radius.js
-  ├─ uses: edge_insets.js
-  └─ uses: box_shadow.js
-
-bottom_sheet_theme.js
-  ├─ uses: color.js
-  ├─ uses: border_radius.js
-  ├─ uses: box_shadow.js
-  └─ uses: edge_insets.js
-
-bottom_navigation_bar_theme.js
-  ├─ uses: color.js
-  ├─ uses: text_style.js
-  ├─ uses: border.js
-  └─ uses: edge_insets.js
-
-navigation_bar_theme.js
-  ├─ uses: color.js
-  ├─ uses: text_style.js
-  └─ uses: icon_button_theme.js
-
-navigation_rail_theme.js
-  ├─ uses: color.js
-  ├─ uses: text_style.js
-  └─ uses: icon_button_theme.js
-
-navigation_drawer_theme.js
-  ├─ uses: color.js
-  ├─ uses: text_style.js
-  ├─ uses: border_radius.js
-  └─ uses: edge_insets.js
-
-drawer_theme.js
-  ├─ uses: color.js
-  ├─ uses: text_style.js
-  ├─ uses: border_radius.js
-  ├─ uses: box_shadow.js
-  └─ uses: edge_insets.js
-```
-
-## Level 8: ROOT THEME (Top-level dependency)
-(Uses everything)
-
-```
-theme_data.js / ThemeData
-  ├─ uses: colors_theme.js
-  ├─ uses: typography_theme.js
-  ├─ uses: shadows_theme.js
-  ├─ uses: motion_theme.js
-  ├─ uses: ALL component themes (Levels 5-7)
-  └─ generates CSS variables for all
-```
-
----
-
-## BUILD ORDER (Bottom-Up)
-
-### Phase 1: Leaf Nodes (Zero Dependencies)
-1. color.js ✅
-2. duration.js ✅
-3. alignment.js ✅
-4. axis.js ✅
-5. border_style.js ✅
-6. box_fit.js ✅
-7. clip.js ✅
-8. cross_axis_alignment.js ✅
-9. font_weight.js ✅
-10. main_axis_alignment.js ✅
-11. text_align.js ✅
-12. text_overflow.js ✅
-13. curves.js
-14. constants.js
-
-### Phase 2: Level 1 (Only Level 0)
-1. offset.js ✅
-2. size.js ✅
-3. radius.js
-4. rect.js
-5. box_shadow.js ✅
-
-### Phase 3: Level 2
-1. border.js ✅
-2. border_radius.js ✅
-3. linear_gradient.js ✅
-4. edge_insets.js ✅
-
-### Phase 4: Level 3
-1. text_style.js ✅
-2. input_decoration.js ✅
-
-### Phase 5: Level 4 (Base Themes)
-1. colors_theme.js
-2. shadows_theme.js
-3. typography_theme.js
-4. motion_theme.js
-
-### Phase 6: Level 5 (Simple Component Themes)
-1. checkbox_theme.js
-2. radio_theme.js
-3. switch_theme.js
-4. divider_theme.js
-5. scrollbar_theme.js
-6. badge_theme.js
-7. banner_theme.js
-8. slider_value_indicator_shape.js
-
-### Phase 7: Level 6 (Medium Component Themes)
-1. slider_theme.js
-2. tooltip_theme.js
-3. text_selection_theme.js
-4. icon_button_theme.js
-5. list_tile_theme.js
-6. snack_bar_theme.js
-7. tab_bar_theme.js
-8. progress_indicator_theme.js
-9. chip_theme.js
-10. card_theme.js
-
-### Phase 8: Level 7 (Complex Component Themes)
-1. elevated_button_theme.js
-2. filled_button_theme.js
-3. outlined_button_theme.js
-4. text_button_theme.js
-5. floating_action_button_theme.js
-6. app_bar_theme.js
-7. dialog_theme.js
-8. bottom_sheet_theme.js
-9. bottom_navigation_bar_theme.js
-10. bottom_app_bar_theme.js
-11. navigation_bar_theme.js
-12. navigation_rail_theme.js
-13. navigation_drawer_theme.js
-14. drawer_theme.js
-15. expansion_tile_theme.js
-16. popup_menu_theme.js
-17. search_bar_theme.js
-18. menu_theme.js
-19. segmented_button_theme.js
-20. input_border.js
-21. input_decorator.js
-22. page_transitions_theme.js
-
-### Phase 9: Level 8 (Root Theme)
-1. theme_data.js / ThemeData
-2. color_scheme.js
-3. text_theme.js
-
----
-
-## Summary
-
-- **Start with**: Level 0-4 (Foundation)
-- **Then**: Level 5-6 (Simple to Medium themes)
-- **Finally**: Level 7-8 (Complex themes + ThemeData)
-
-**Benefit**: No circular dependencies, each file can be tested independently
diff --git a/packages/flutterjs_engine/package/material/docs/master-list.md b/packages/flutterjs_engine/package/material/docs/master-list.md
deleted file mode 100644
index 7994d79d..00000000
--- a/packages/flutterjs_engine/package/material/docs/master-list.md
+++ /dev/null
@@ -1,457 +0,0 @@
-# Flutter Widgets - Complete Conversion List
-
-**Source**: docs.flutter.dev  
-**Total Widgets**: 200+  
-**Last Updated**: December 25, 2025
-
----
-
-## Category: BASICS (11)
-
-| Widget | Status | Notes |
-|--------|--------|-------|
-| AppBar | ✅ | Top bar |
-| Column | ✅ | Vertical stack |
-| Container | ✅ | Box model |
-| ElevatedButton | ✅ | Material button |
-| FloatingActionButton | ✅ | Action button |
-| FlutterLogo | ⏳ | Logo widget |
-| Icon | ✅ | Material icon |
-| Image | ⏳ | Display image |
-| Placeholder | ⏳ | Placeholder box |
-| Row | ✅ | Horizontal stack |
-| Scaffold | ✅ | Page layout |
-
----
-
-## Category: LAYOUT (25)
-
-| Widget | Status | Notes |
-|--------|--------|-------|
-| Align | ✅ | Align child |
-| AspectRatio | ⏳ | Fixed aspect ratio |
-| Baseline | ⏳ | Baseline positioning |
-| Center | ✅ | Center content |
-| ConstrainedBox | ⏳ | Add constraints |
-| CustomMultiChildLayout | ⏳ | Custom layout |
-| CustomSingleChildLayout | ⏳ | Custom single child |
-| Expanded | ⏳ | Fill space in flex |
-| FittedBox | ⏳ | Fit child |
-| Flow | ⏳ | Flow layout |
-| GridView | ⏳ | Grid layout |
-| Index Stack | ⏳ | Show single child |
-| LayoutBuilder | ⏳ | Build based on size |
-| ListView | ⏳ | Scrollable list |
-| Padding | ✅ | Add padding |
-| RawMaterialButton | ⏳ | Raw button |
-| Spacer | ⏳ | Flex spacer |
-| Stack | ⏳ | Overlay layout |
-| SizedBox | ⏳ | Fixed size box |
-| Table | ⏳ | Table layout |
-| Transform | ⏳ | Transform widget |
-| Wrap | ⏳ | Wrap layout |
-| SingleChildScrollView | ⏳ | Simple scroll |
-| LimitedBox | ⏳ | Limit box size |
-| Offstage | ⏳ | Hide widget |
-
----
-
-## Category: TEXT (8)
-
-| Widget | Status | Notes |
-|--------|--------|-------|
-| DefaultTextStyle | ⏳ | Default text style |
-| RichText | ⏳ | Rich formatted text |
-| SelectableText | ⏳ | Selectable text |
-| Text | ✅ | Simple text |
-| TextSpan | ⏳ | Text span for RichText |
-| Tooltip | ⏳ | Tooltip on hover |
-| WidgetSpan | ⏳ | Widget in text |
-| TextField | ⏳ | Text input |
-
----
-
-## Category: BUTTONS & INPUT (15)
-
-| Widget | Status | Notes |
-|--------|--------|-------|
-| BackButton | ⏳ | Back button |
-| Checkbox | ⏳ | Checkbox input |
-| CupertinoButton | ⏳ | iOS button |
-| CupertinoSwitch | ⏳ | iOS switch |
-| ElevatedButton | ✅ | Filled button |
-| FloatingActionButton | ✅ | FAB |
-| GestureDetector | ⏳ | Gesture handler |
-| IconButton | ✅ | Icon button |
-| Material Button | ⏳ | Material button |
-| RadioButton | ⏳ | Radio input |
-| Switch | ⏳ | Toggle switch |
-| TextButton | ✅ | Text button |
-| SubmitButton | ⏳ | Submit button |
-| OutlinedButton | ⏳ | Outlined button |
-| FilledButton | ⏳ | Filled button |
-
----
-
-## Category: FORMS (12)
-
-| Widget | Status | Notes |
-|--------|--------|-------|
-| Autocomplete | ⏳ | Autocomplete input |
-| Checkbox | ⏳ | Checkbox |
-| DropdownButton | ⏳ | Dropdown select |
-| Form | ⏳ | Form container |
-| FormField | ⏳ | Form field |
-| RadioButton | ⏳ | Radio button |
-| RawAutocomplete | ⏳ | Raw autocomplete |
-| RawKeyboardListener | ⏳ | Keyboard input |
-| Slider | ⏳ | Slider input |
-| Switch | ⏳ | Switch toggle |
-| TextField | ⏳ | Text input |
-| TextFormField | ⏳ | Form text field |
-
----
-
-## Category: MATERIAL COMPONENTS (40)
-
-| Widget | Status | Notes |
-|--------|--------|-------|
-| AlertDialog | ⏳ | Alert dialog |
-| Badge | ⏳ | Badge icon |
-| BottomAppBar | ⏳ | Bottom app bar |
-| BottomNavigationBar | ⏳ | Bottom navigation |
-| BottomSheet | ⏳ | Bottom sheet |
-| ButtonBar | ⏳ | Button bar |
-| Card | ⏳ | Card component |
-| CarouselView | ⏳ | Carousel |
-| Checkbox | ⏳ | Checkbox |
-| Chip | ⏳ | Chip tag |
-| CircularProgressIndicator | ⏳ | Circular progress |
-| CloseButton | ⏳ | Close button |
-| ContextMenu | ⏳ | Context menu |
-| DataTable | ⏳ | Data table |
-| DatePickerDialog | ⏳ | Date picker |
-| Dialog | ⏳ | Dialog box |
-| Divider | ⏳ | Divider line |
-| DrawerHeader | ⏳ | Drawer header |
-| DropdownButton | ⏳ | Dropdown |
-| ElevatedButton | ✅ | Raised button |
-| ExpansionPanel | ⏳ | Expansion panel |
-| FloatingActionButton | ✅ | FAB |
-| FullscreenDialog | ⏳ | Fullscreen dialog |
-| IconButton | ✅ | Icon button |
-| InputDecorator | ⏳ | Input decorator |
-| LinearProgressIndicator | ⏳ | Linear progress |
-| ListTile | ⏳ | List item |
-| MaterialBanner | ⏳ | Material banner |
-| MenuAnchor | ⏳ | Menu anchor |
-| MenuButton | ⏳ | Menu button |
-| NavigationBar | ⏳ | Navigation bar |
-| NavigationDrawer | ⏳ | Navigation drawer |
-| NavigationRail | ⏳ | Navigation rail |
-| OutlinedButton | ⏳ | Outlined button |
-| PopupMenuButton | ⏳ | Popup menu |
-| ProgressIndicator | ⏳ | Progress indicator |
-| RadioButton | ⏳ | Radio button |
-| SegmentedButton | ⏳ | Segmented button |
-| Slider | ⏳ | Slider |
-| SnackBar | ⏳ | Snackbar notification |
-| Switch | ⏳ | Switch toggle |
-| TabBar | ⏳ | Tab bar |
-| TextButton | ✅ | Text button |
-| TextField | ⏳ | Text input |
-| TimePickerDialog | ⏳ | Time picker |
-| ToggleButtons | ⏳ | Toggle buttons |
-| Tooltip | ⏳ | Tooltip |
-
----
-
-## Category: SCROLLING (18)
-
-| Widget | Status | Notes |
-|--------|--------|-------|
-| CarouselView | ⏳ | Carousel scroll |
-| CustomScrollView | ⏳ | Custom scroll |
-| DraggableScrollableSheet | ⏳ | Draggable sheet |
-| GridView | ⏳ | Grid view |
-| GridView.builder | ⏳ | Lazy grid |
-| ListView | ⏳ | List view |
-| ListView.builder | ⏳ | Lazy list |
-| ListView.separated | ⏳ | List with divider |
-| NestedScrollView | ⏳ | Nested scroll |
-| NotificationListener | ⏳ | Scroll notification |
-| PageView | ⏳ | Page scroll |
-| RefreshIndicator | ⏳ | Pull to refresh |
-| Scrollable | ⏳ | Scrollable base |
-| ScrollBar | ⏳ | Scrollbar indicator |
-| SingleChildScrollView | ⏳ | Single child scroll |
-| SliverAppBar | ⏳ | Sliver app bar |
-| SliverGrid | ⏳ | Sliver grid |
-| SliverList | ⏳ | Sliver list |
-
----
-
-## Category: ANIMATION & TRANSITION (30)
-
-| Widget | Status | Notes |
-|--------|--------|-------|
-| AlignTransition | ⏳ | Animated align |
-| AnimatedAlign | ⏳ | Auto animated align |
-| AnimatedBuilder | ⏳ | Animation builder |
-| AnimatedContainer | ⏳ | Animated container |
-| AnimatedCrossFade | ⏳ | Animated cross fade |
-| AnimatedDefaultTextStyle | ⏳ | Animated text style |
-| AnimatedIcon | ⏳ | Animated icon |
-| AnimatedList | ⏳ | Animated list |
-| AnimatedModalBarrier | ⏳ | Animated barrier |
-| AnimatedOpacity | ⏳ | Animated opacity |
-| AnimatedPhysicalModel | ⏳ | Animated physical |
-| AnimatedPositioned | ⏳ | Animated position |
-| AnimatedRotation | ⏳ | Animated rotation |
-| AnimatedScale | ⏳ | Animated scale |
-| AnimatedSize | ⏳ | Animated size |
-| AnimatedSwitcher | ⏳ | Animated switch |
-| AnimatedWidget | ⏳ | Base animated |
-| DecoratedBox | ⏳ | Decoration |
-| DecoratedBoxTransition | ⏳ | Animated decoration |
-| FadeTransition | ⏳ | Fade animation |
-| Hero | ⏳ | Hero animation |
-| PositionedTransition | ⏳ | Position animation |
-| RotationTransition | ⏳ | Rotation animation |
-| ScaleTransition | ⏳ | Scale animation |
-| SizeTransition | ⏳ | Size animation |
-| SlideTransition | ⏳ | Slide animation |
-| Transition | ⏳ | Base transition |
-| PageRouteBuilder | ⏳ | Custom route |
-| ImplicitlyAnimatedWidget | ⏳ | Implicit animation |
-| TweenAnimationBuilder | ⏳ | Tween builder |
-
----
-
-## Category: PAINTING & VISUAL EFFECTS (18)
-
-| Widget | Status | Notes |
-|--------|--------|-------|
-| AspectRatio | ⏳ | Aspect ratio |
-| BackdropFilter | ⏳ | Backdrop filter |
-| ClipOval | ⏳ | Oval clip |
-| ClipPath | ⏳ | Path clip |
-| ClipRect | ⏳ | Rectangle clip |
-| ColorFiltered | ⏳ | Color filter |
-| Container | ✅ | Container box |
-| CustomPaint | ❌ | Custom drawing (not viable) |
-| DecoratedBox | ⏳ | Decoration box |
-| FittedBox | ⏳ | Fit box |
-| ImageFiltered | ⏳ | Image filter |
-| Opacity | ⏳ | Opacity effect |
-| PhysicalModel | ⏳ | Physical model |
-| PhysicalShape | ⏳ | Physical shape |
-| RotatedBox | ⏳ | Rotated box |
-| Shader Mask | ⏳ | Shader mask |
-| Transform | ⏳ | Transform widget |
-| VisualDensity | ⏳ | Visual density |
-
----
-
-## Category: NAVIGATION & ROUTING (12)
-
-| Widget | Status | Notes |
-|--------|--------|-------|
-| BackButton | ⏳ | Back button |
-| Drawer | ⏳ | Side drawer menu |
-| DrawerButton | ⏳ | Drawer toggle |
-| EndDrawer | ⏳ | End drawer |
-| MaterialPageRoute | ⏳ | Material route |
-| Navigator | ⏳ | Navigation stack |
-| NavigationBar | ⏳ | Navigation bar |
-| NavigationDrawer | ⏳ | Navigation drawer |
-| NavigationRail | ⏳ | Navigation rail |
-| PopScope | ⏳ | Pop handler |
-| Route | ⏳ | Base route |
-| Semantics | ⏳ | Semantic route |
-
----
-
-## Category: STATE MANAGEMENT & CONTEXT (15)
-
-| Widget | Status | Notes |
-|--------|--------|-------|
-| BuildContext | ✅ | Context system |
-| Consumer | ⏳ | Provider consumer |
-| ChangeNotifier | ⏳ | Observable |
-| InheritedWidget | ⏳ | Context passing |
-| InheritedModel | ⏳ | Inherited model |
-| Provider | ⏳ | State provider |
-| Selector | ⏳ | Select from provider |
-| StatefulWidget | ✅ | Stateful widget |
-| StatelessWidget | ✅ | Stateless widget |
-| Theme | ✅ | Theme system |
-| ThemeData | ✅ | Theme data |
-| ValueListenableBuilder | ⏳ | Value listener |
-| FutureBuilder | ⏳ | Async builder |
-| StreamBuilder | ⏳ | Stream builder |
-| AnimatedValueBuilder | ⏳ | Animated value |
-
----
-
-## Category: CUPERTINO / iOS (28)
-
-| Widget | Status | Notes |
-|--------|--------|-------|
-| CupertinoActionSheet | ⏳ | iOS action sheet |
-| CupertinoActionSheetAction | ⏳ | Action |
-| CupertinoActivityIndicator | ⏳ | iOS spinner |
-| CupertinoAlertDialog | ⏳ | iOS alert |
-| CupertinoApp | ⏳ | iOS app |
-| CupertinoButton | ⏳ | iOS button |
-| CupertinoCheckbox | ⏳ | iOS checkbox |
-| CupertinoContextMenu | ⏳ | iOS context menu |
-| CupertinoDatePicker | ⏳ | iOS date picker |
-| CupertinoDialogAction | ⏳ | Dialog action |
-| CupertinoIcons | ⏳ | iOS icons |
-| CupertinoListSection | ⏳ | List section |
-| CupertinoListTile | ⏳ | iOS list tile |
-| CupertinoListTileTrailingButton | ⏳ | Trailing button |
-| CupertinoNavigationBar | ⏳ | iOS nav bar |
-| CupertinoPageRoute | ⏳ | iOS page route |
-| CupertinoPageScaffold | ⏳ | iOS scaffold |
-| CupertinoPickerDefaultSelectionOverlay | ⏳ | Overlay |
-| CupertinoPicker | ⏳ | iOS picker |
-| CupertinoScrollbar | ⏳ | iOS scrollbar |
-| CupertinoSearchTextField | ⏳ | iOS search |
-| CupertinoSegmentedControl | ⏳ | iOS segment |
-| CupertinoSlider | ⏳ | iOS slider |
-| CupertinoSlidingSegmentedControl | ⏳ | iOS sliding |
-| CupertinoSwitch | ⏳ | iOS switch |
-| CupertinoTabBar | ⏳ | iOS tab bar |
-| CupertinoTabController | ⏳ | Tab controller |
-| CupertinoTabScaffold | ⏳ | iOS tab scaffold |
-
----
-
-## Category: ASSETS & MEDIA (5)
-
-| Widget | Status | Notes |
-|--------|--------|-------|
-| AssetBundle | ⏳ | Asset loader |
-| Icon | ✅ | Material icon |
-| Image | ⏳ | Display image |
-| Image.asset | ⏳ | Asset image |
-| Image.network | ⏳ | Network image |
-
----
-
-## Category: ASYNC & NETWORK (8)
-
-| Widget | Status | Notes |
-|--------|--------|-------|
-| FutureBuilder | ⏳ | Async future |
-| StreamBuilder | ⏳ | Stream listener |
-| FutureListener | ⏳ | Future listener |
-| StreamListener | ⏳ | Stream listener |
-| DefaultAsyncImage | ⏳ | Async image |
-| AsyncSnapshot | ⏳ | Async state |
-| ConnectionState | ⏳ | Connection state |
-| AsyncWidget | ⏳ | Async base |
-
----
-
-## Category: INTERACTION & GESTURES (12)
-
-| Widget | Status | Notes |
-|--------|--------|-------|
-| AbsorbPointer | ⏳ | Absorb pointer |
-| Dismissible | ⏳ | Swipe dismiss |
-| DragTarget | ⏳ | Drag target |
-| GestureDetector | ⏳ | Gesture handler |
-| Draggable | ⏳ | Draggable widget |
-| IgnorePointer | ⏳ | Ignore pointer |
-| LongPressDraggable | ⏳ | Long press drag |
-| MouseRegion | ⏳ | Mouse region |
-| Semantics | ⏳ | Accessibility |
-| Tooltip | ⏳ | Tooltip |
-| Listener | ⏳ | Raw listener |
-| PointerInterceptor | ⏳ | Pointer intercept |
-
----
-
-## Category: ACCESSIBILITY (8)
-
-| Widget | Status | Notes |
-|--------|--------|-------|
-| Accessibility | ⏳ | Accessibility |
-| Semantics | ⏳ | Semantic data |
-| MergeSemantics | ⏳ | Merge semantics |
-| Tooltip | ⏳ | Accessible tooltip |
-| GestureDetector | ⏳ | Gesture a11y |
-| RadioButton | ⏳ | Radio a11y |
-| Checkbox | ⏳ | Checkbox a11y |
-| Switch | ⏳ | Switch a11y |
-
----
-
-## Category: STYLING & THEMING (15)
-
-| Widget | Status | Notes |
-|--------|--------|-------|
-| ColoredBox | ⏳ | Colored background |
-| DecoratedBox | ⏳ | Decorated box |
-| DefaultTextStyle | ⏳ | Default text style |
-| Padding | ✅ | Padding |
-| SafeArea | ⏳ | Safe area |
-| Scaffold | ✅ | Scaffold |
-| Theme | ✅ | Theme |
-| ThemeData | ✅ | Theme data |
-| MediaQuery | ⏳ | Media query |
-| IconTheme | ⏳ | Icon theme |
-| VisualDensity | ⏳ | Visual density |
-| MaterialApp | ✅ | Material app |
-| CupertinoApp | ⏳ | Cupertino app |
-| DefaultMaterialLocalizations | ⏳ | Localizations |
-| CupertinoLocalizations | ⏳ | Cupertino locale |
-
----
-
-## Category: RARE / SPECIAL (20)
-
-| Widget | Status | Notes |
-|--------|--------|-------|
-| ActionsPane | ⏳ | Actions pane |
-| Align | ⏳ | Align |
-| Baseline | ⏳ | Baseline |
-| Builder | ⏳ | Builder |
-| ConstrainedBox | ⏳ | Constrained |
-| CustomPaint | ❌ | Custom drawing |
-| ExpandedSpacer | ⏳ | Spacer |
-| Flow | ⏳ | Flow layout |
-| LimitedBox | ⏳ | Limited box |
-| RichText | ⏳ | Rich text |
-| RotatedBox | ⏳ | Rotated |
-| SingleChildScrollView | ⏳ | Single scroll |
-| SliverAppBar | ⏳ | Sliver bar |
-| SliverGrid | ⏳ | Sliver grid |
-| SliverList | ⏳ | Sliver list |
-| Spacer | ⏳ | Spacer |
-| Stack | ⏳ | Stack |
-| Table | ⏳ | Table |
-| Transform | ⏳ | Transform |
-| Wrap | ⏳ | Wrap |
-
----
-
-## Summary by Status
-
-| Status | Count | Examples |
-|--------|-------|----------|
-| ✅ Complete | 18 | MaterialApp, Scaffold, Text, Container, Column, Row, Padding, Icon, Button variants |
-| 🔄 In Progress | 3 | setState, Theme system, BuildContext |
-| ⏳ Not Started | 165 | TextField, ListView, Navigator, Dialog, Animation widgets |
-| ❌ Not Viable | 8 | CustomPaint, Canvas, Native APIs |
-
----
-
-**Total Widgets Tracked**: 200+  
-**Convertible to JS**: ~190  
-**Already Complete**: 18 (9%)  
-**Planned**: 165 (82%)  
-**Not Viable**: ~8 (4%)
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/docs/status.md b/packages/flutterjs_engine/package/material/docs/status.md
deleted file mode 100644
index 5119ccc0..00000000
--- a/packages/flutterjs_engine/package/material/docs/status.md
+++ /dev/null
@@ -1,92 +0,0 @@
-# FlutterJS Widget Status Map
-
-> **Status Tracking**
-> Last Updated: 2026-01-10
-> Package: `@flutterjs/material`
-
-## 🟢 Implemented Widgets
-
-### 🧱 Core Layout & Painting
-| Widget | Status | Details |
-| :--- | :--- | :--- |
-| **`Container`** | ✅ **High** | Supports `alignment`, `padding`, `color`, `decoration` (BoxDecoration with borders, shadows, gradients, images), `foregroundDecoration`, `constraints`, `margin`, `transform`. |
-| **`Padding`** | ✅ **Full** | Standard implementation. |
-| **`SizedBox`** | ✅ **Full** | Supports `width`, `height`, `expand`, `shrink`. |
-| **`Center`** | ✅ **Full** | Centers child within parent. |
-| **`Align`** | ✅ **Full** | Alignment support (topLeft, center, etc.). |
-| **`Row` / `Column`** | ✅ **High** | Built on `Flex`. Supports `mainAxisAlignment`, `crossAxisAlignment`, `mainAxisSize`. |
-| **`Stack`** | ✅ **High** | Supports `alignment`, `fit`, `clipBehavior`. |
-| **`Positioned`** | ✅ **Full** | Top/Right/Bottom/Left constraints for Stack children. |
-| **`Expanded` / `Flexible`**| ✅ **Full** | Flex factors for Row/Column. |
-| **`Transform`** | ✅ **High** | Matrix4 transformations. |
-| **`Opacity`** | ✅ **Full** | Layer opacity. |
-| **`Clip` Widgets** | ✅ **High** | `ClipRect`, `ClipRRect`, `ClipOval`, `ClipPath` supported. |
-
-### 🅰️ Typography
-| Widget | Status | Details |
-| :--- | :--- | :--- |
-| **`Text`** | ✅ **High** | Supports `style` (TextStyle), `textAlign`, `overflow`, `maxLines`, `selectable` (standard & web-selection), `semanticsLabel`. |
-| **`TextStyle`** | ✅ **High** | Comprehensive support including **Google Fonts** auto-loading, shadows, decoration, spacing, gradients. |
-| **`RichText`** | ⚠️ **Partial**| Basic span support exists. |
-
-### 📱 App Structure
-| Widget | Status | Details |
-| :--- | :--- | :--- |
-| **`MaterialApp`** | ✅ **High** | Routing, Theme injection, Navigator setup. |
-| **`Scaffold`** | ✅ **High** | `appBar`, `body`, `floatingActionButton` (locations), `drawer`, `endDrawer`, `bottomNavigationBar`, `snackBar` (with auto-dismiss/action). |
-| **`AppBar`** | 🟡 **Med** | Basic title, minimal leading/actions support. Needs expansion. |
-| **`Navigator`** | ✅ **High** | Push/Pop, replacement, history management. |
-
-### 👆 Interaction & Feedback
-| Widget | Status | Details |
-| :--- | :--- | :--- |
-| **`GestureDetector`** | ✅ **High** | Tap, press, hover events mapped to DOM events. |
-| **`ElevatedButton`** | 🟡 **Med** | Basic styling and `onPressed`. |
-| **`FloatingActionButton`**| ✅ **High** | Standard FAB with elevation and positioning support in Scaffold. |
-| **`SnackBar`** | ✅ **High** | Integrated into ScaffoldState. |
-
-### 🎨 Visuals
-| Widget | Status | Details |
-| :--- | :--- | :--- |
-| **`Icon`** | ✅ **High** | Material Icons font integration. |
-| **`Image`** | ✅ **High** | Network & Asset images. |
-| **`Card`** | ✅ **High** | Elevation, rounded corners. |
-| **`Divider`** | ✅ **Full** | Horizontal line with styling. |
-
----
-
-## 🔴 Missing (Planned)
-
-### Input & Forms (High Priority)
-- [ ] **`TextField`**: Essential for user input.
-- [ ] **`TextFormField`**: Form validation integration.
-- [ ] **`Form`**: State management for fields.
-- [ ] **`Checkbox`**, **`Radio`**, **`Switch`**: Selection controls.
-
-### Lists & Scrolling (High Priority)
-- [ ] **`ListView`**: Efficient scrolling lists (virtualization needed for web?).
-- [ ] **`GridView`**: 2D scrollable areas.
-- [ ] **`SingleChildScrollView`**: Basic scrolling.
-- [ ] **`Scrollbar`**: Visual scroll indicator.
-
-### Additional Buttons
-- [ ] **`TextButton`**
-- [ ] **`OutlinedButton`**
-- [ ] **`IconButton`**
-
-### Navigation Components
-- [ ] **`Drawer`**: Widget wrapper (logic exists in Scaffold).
-- [ ] **`BottomNavigationBar`**: Full widget implementation.
-- [ ] **`TabBar`** / **`TabBarView`**: Tabbed interfaces.
-
-### Dialogs & Overlays
-- [ ] **`Dialog`** / **`AlertDialog`**
-- [ ] **`BottomSheet`** / **`ModalBottomSheet`**
-- [ ] **`PopupMenuButton`**
-
----
-
-## 🏗️ Refactoring Opportunities
-1.  **File Naming**: Fix typos (`compoment` -> `component`, `scffold_basic` -> `scaffold`).
-2.  **Organization**: Move `AppBar` and `SnackBar` to dedicated files (currently in `scffold_basic.js`).
-3.  **Exports**: Ensure all widgets are cleanly exported from `index.js`.
diff --git a/packages/flutterjs_engine/package/material/docs/widget-levels.md b/packages/flutterjs_engine/package/material/docs/widget-levels.md
deleted file mode 100644
index 7ce7a748..00000000
--- a/packages/flutterjs_engine/package/material/docs/widget-levels.md
+++ /dev/null
@@ -1,378 +0,0 @@
-# Flutter to HTML Widget Hierarchy
-
-## Level 1: Basic Elements (No Sub-properties)
-
-### Simple Widgets
-- **divider.dart** → `<hr>` or `<div>`
-- **vertical_divider.dart** → `<div>` (vertical line)
-- **sized_box.dart** → `<div>` (width, height only)
-- **icon.dart** → `<svg>` or `<i>` (icon data, size, color)
-- **image.dart** → `<img>` (src, width, height)
-- **badge.dart** → `<div>` (count/label)
-
-### Input Elements
-- **checkbox.dart** → `<input type="checkbox">` (value, onChanged)
-- **radio.dart** → `<input type="radio">` (value, groupValue, onChanged)
-- **switch.dart** → `<input type="checkbox">` (value, onChanged)
-- **slider.dart** → `<input type="range">` (value, min, max, onChanged)
-
----
-
-## Level 2: Composite Elements (1-2 Properties/Children)
-
-### Layout Wrappers
-- **padding.dart** → `<div>` with padding
-  - `padding`: EdgeInsets (top, bottom, left, right)
-  - `child`: Single widget
-
-- **center.dart** → `<div>` with flexbox centering
-  - `child`: Single widget
-  - Alignment: center
-
-- **expanded.dart** → `<div>` with flex: 1
-  - `flex`: Number (default 1)
-  - `child`: Single widget
-
-- **flexible.dart** → `<div>` with flex-grow/shrink
-  - `flex`: Number
-  - `fit`: FlexFit (tight/loose)
-  - `child`: Single widget
-
-- **aspect_ratio.dart** → `<div>` with aspect-ratio
-  - `aspectRatio`: Number (width/height)
-  - `child`: Single widget
-
-### Text Elements
-- **text.dart** → `<span>` or `<p>`
-  - `data`: String content
-  - `style`: TextStyle
-    - `fontSize`: Number
-    - `fontWeight`: FontWeight
-    - `color`: Color
-    - `fontFamily`: String
-    - `decoration`: TextDecoration
-    - `letterSpacing`: Number
-    - `height`: Number (line height)
-
-- **selectable_text.dart** → `<span>` (user-select: text)
-  - Same as Text + selection enabled
-
-### Simple Interactive
-- **tooltip.dart** → `<div>` overlay on hover
-  - `message`: String
-  - `child`: Widget
-
-- **circle_avatar.dart** → `<div>` circular
-  - `radius`: Number
-  - `backgroundColor`: Color
-  - `backgroundImage`: Image
-  - `child`: Widget (icon/text)
-
----
-
-## Level 3: Complex Single Elements (3+ Properties)
-
-### Container
-- **container.dart** → `<div>`
-  - `width`: Number
-  - `height`: Number
-  - `padding`: EdgeInsets
-  - `margin`: EdgeInsets
-  - `decoration`: BoxDecoration
-    - `color`: Color
-    - `border`: Border
-    - `borderRadius`: BorderRadius
-    - `boxShadow`: List<BoxShadow>
-    - `gradient`: Gradient
-    - `image`: DecorationImage
-  - `alignment`: Alignment
-  - `transform`: Matrix4
-  - `child`: Single widget
-
-### Card
-- **card.dart** → `<div>` with elevation/shadow
-  - `elevation`: Number
-  - `color`: Color
-  - `shadowColor`: Color
-  - `shape`: ShapeBorder (borderRadius)
-  - `margin`: EdgeInsets
-  - `clipBehavior`: Clip
-  - `child`: Widget
-
-### Buttons
-- **elevated_button.dart** → `<button>` with elevation
-  - `onPressed`: Function
-  - `style`: ButtonStyle
-    - `backgroundColor`: Color
-    - `foregroundColor`: Color
-    - `elevation`: Number
-    - `padding`: EdgeInsets
-    - `shape`: ShapeBorder
-    - `textStyle`: TextStyle
-  - `child`: Widget (usually Text)
-
-- **filled_button.dart** → `<button>` filled
-- **outlined_button.dart** → `<button>` with border
-- **text_button.dart** → `<button>` text only
-- **filled_tonal_button.dart** → `<button>` tonal
-- **icon_button.dart** → `<button>` icon only
-- **floating_action_button.dart** → `<button>` floating
-
-*(All buttons share similar properties)*
-
-### Input Fields
-- **text_field.dart** → `<input type="text">`
-  - `controller`: TextEditingController
-  - `decoration`: InputDecoration
-    - `labelText`: String
-    - `hintText`: String
-    - `prefixIcon`: Icon
-    - `suffixIcon`: Icon
-    - `border`: InputBorder
-    - `filled`: Boolean
-    - `fillColor`: Color
-    - `errorText`: String
-  - `keyboardType`: TextInputType
-  - `obscureText`: Boolean
-  - `maxLines`: Number
-  - `onChanged`: Function
-
-- **text_form_field.dart** → `<input>` + validation
-  - All TextField properties +
-  - `validator`: Function
-  - `autovalidateMode`: AutovalidateMode
-
-- **search_bar.dart** → `<input>` search type
-  - TextField properties +
-  - `leading`: Icon (search icon)
-  - `trailing`: List<Widget> (actions)
-
-### Dropdowns
-- **dropdown.dart** → `<select>`
-  - `value`: Selected value
-  - `items`: List<DropdownMenuItem>
-  - `onChanged`: Function
-  - `icon`: Widget
-  - `elevation`: Number
-  - `style`: TextStyle
-
----
-
-## Level 4: Layout Containers (Multiple Children)
-
-### Flex Layouts
-- **column.dart** → `<div>` (flex-direction: column)
-  - `children`: List<Widget>
-  - `mainAxisAlignment`: MainAxisAlignment
-  - `crossAxisAlignment`: CrossAxisAlignment
-  - `mainAxisSize`: MainAxisSize
-  - `verticalDirection`: VerticalDirection
-
-- **row.dart** → `<div>` (flex-direction: row)
-  - Same properties as Column
-
-- **wrap.dart** → `<div>` (flex-wrap: wrap)
-  - `children`: List<Widget>
-  - `direction`: Axis
-  - `alignment`: WrapAlignment
-  - `spacing`: Number (horizontal)
-  - `runSpacing`: Number (vertical)
-
-### Positioned Layouts
-- **stack.dart** → `<div>` (position: relative)
-  - `children`: List<Widget>
-  - `alignment`: Alignment
-  - `fit`: StackFit
-  - `clipBehavior`: Clip
-
-- **positioned.dart** → `<div>` (position: absolute)
-  - `top`: Number
-  - `bottom`: Number
-  - `left`: Number
-  - `right`: Number
-  - `width`: Number
-  - `height`: Number
-  - `child`: Widget
-
----
-
-## Level 5: Composite UI Components (Widget + Children + Logic)
-
-### List Components
-- **list_tile.dart** → `<div>` row layout
-  - `leading`: Widget (icon/avatar)
-  - `title`: Widget (main text)
-  - `subtitle`: Widget (secondary text)
-  - `trailing`: Widget (icon/badge)
-  - `onTap`: Function
-  - `selected`: Boolean
-  - `enabled`: Boolean
-
-- **checkbox_list_tile.dart** → `<label>` + `<input>`
-  - ListTile properties +
-  - `value`: Boolean
-  - `onChanged`: Function
-  - `controlAffinity`: ListTileControlAffinity
-
-- **radio_list_tile.dart** → `<label>` + `<input>`
-- **switch_list_tile.dart** → `<label>` + `<input>`
-
-### Navigation Components
-- **drawer.dart** → `<div>` sidebar
-  - `children`: List<Widget> (usually in ListView)
-  - `backgroundColor`: Color
-  - `elevation`: Number
-  - `width`: Number
-
-- **drawer_header.dart** → `<div>` header section
-  - `decoration`: BoxDecoration
-  - `child`: Widget
-  - `margin`: EdgeInsets
-  - `padding`: EdgeInsets
-
-- **navigation_bar.dart** → `<nav>` bottom
-  - `destinations`: List<NavigationDestination>
-    - `icon`: Widget
-    - `selectedIcon`: Widget
-    - `label`: String
-  - `selectedIndex`: Number
-  - `onDestinationSelected`: Function
-  - `backgroundColor`: Color
-
-- **bottom_navigation_bar.dart** → `<nav>` bottom
-  - `items`: List<BottomNavigationBarItem>
-  - `currentIndex`: Number
-  - `onTap`: Function
-  - `type`: BottomNavigationBarType
-
-- **navigation_rail.dart** → `<nav>` vertical
-  - Similar to NavigationBar but vertical
-
-### Menu Components
-- **dropdown_menu.dart** → `<div>` + `<ul>`
-  - `dropdownMenuEntries`: List<DropdownMenuEntry>
-  - `controller`: TextEditingController
-  - `initialSelection`: Value
-  - `onSelected`: Function
-  - `label`: Widget
-  - `width`: Number
-
-- **popup_menu.dart** → `<div>` overlay + `<ul>`
-  - `itemBuilder`: Function returns List<PopupMenuEntry>
-  - `onSelected`: Function
-  - `child`: Widget (trigger)
-  - `position`: PopupMenuPosition
-  - `elevation`: Number
-
-- **menu_anchor.dart** → `<div>` menu container
-  - `menuChildren`: List<Widget>
-  - `builder`: Function
-  - `style`: MenuStyle
-
-### Tab Components
-- **tab_bar.dart** → `<div>` tabs
-  - `tabs`: List<Tab>
-    - `text`: String
-    - `icon`: Widget
-  - `controller`: TabController
-  - `onTap`: Function
-  - `indicatorColor`: Color
-  - `labelColor`: Color
-
----
-
-## Level 6: App Structure & Overlays
-
-### App Structure
-- **app_bar.dart** → `<header>`
-  - `title`: Widget
-  - `leading`: Widget (back button)
-  - `actions`: List<Widget> (action buttons)
-  - `backgroundColor`: Color
-  - `elevation`: Number
-  - `flexibleSpace`: Widget
-  - `bottom`: PreferredSizeWidget (TabBar)
-  - `centerTitle`: Boolean
-  - `toolbarHeight`: Number
-
-### Overlays & Modals
-- **dialog.dart** → `<div>` modal overlay
-  - `title`: Widget
-  - `content`: Widget
-  - `actions`: List<Widget> (buttons)
-  - `backgroundColor`: Color
-  - `elevation`: Number
-  - `shape`: ShapeBorder
-
-- **bottom_sheet.dart** → `<div>` bottom overlay
-  - `builder`: Function returns Widget
-  - `backgroundColor`: Color
-  - `elevation`: Number
-  - `shape`: ShapeBorder
-  - `enableDrag`: Boolean
-
-- **snack_bar.dart** → `<div>` notification toast
-  - `content`: Widget
-  - `action`: SnackBarAction
-  - `duration`: Duration
-  - `backgroundColor`: Color
-  - `behavior`: SnackBarBehavior
-
-- **banner.dart** → `<div>` banner notification
-  - `content`: Widget
-  - `actions`: List<Widget>
-  - `leading`: Widget
-  - `backgroundColor`: Color
-
----
-
-## Level 7: Specialized Complex Widgets
-
-### Range Slider
-- **range_slider.dart** → `<div>` (custom double range)
-  - `values`: RangeValues (start, end)
-  - `min`: Number
-  - `max`: Number
-  - `divisions`: Number
-  - `labels`: RangeLabels
-  - `onChanged`: Function
-  - `activeColor`: Color
-  - `inactiveColor`: Color
-
-### Back/Close Buttons
-- **back_button.dart** → `<button>` (arrow back icon)
-  - `onPressed`: Function (default: Navigator.pop)
-  - `color`: Color
-
-- **close_button.dart** → `<button>` (X icon)
-  - `onPressed`: Function
-  - `color`: Color
-
----
-
-## Usage Patterns
-
-### Nesting Example:
-```
-Container (Level 3)
-├── decoration: BoxDecoration
-│   ├── color
-│   ├── borderRadius
-│   └── boxShadow
-├── padding: EdgeInsets
-└── child: Column (Level 4)
-    └── children: [
-        ├── Text (Level 2)
-        │   └── style: TextStyle
-        ├── SizedBox (Level 1)
-        └── ElevatedButton (Level 3)
-            ├── style: ButtonStyle
-            └── child: Text
-        ]
-```
-
-### Common Compositions:
-1. **ListTile** (Level 5) = Row + Padding + InkWell
-2. **Card** (Level 3) = Container + Elevation + Border
-3. **AppBar** (Level 6) = Container + Row + Actions
-4. **TextField** (Level 3) = Input + Border + Label + Icons
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/package.json b/packages/flutterjs_engine/package/material/package.json
deleted file mode 100644
index 3895cb5d..00000000
--- a/packages/flutterjs_engine/package/material/package.json
+++ /dev/null
@@ -1,137 +0,0 @@
-{
-  "name": "@flutterjs/material",
-  "version": "1.0.1",
-  "description": "Material Design widget handlers for Flutter.js",
-  "type": "module",
-  "main": "./dist/index.js",
-  "exports": {
-    ".": "./dist/index.js",
-    "./core/core": "./dist/core/core.js",
-    "./core/widget_element": "./dist/core/widget_element.js",
-    "./material/color": "./dist/material/color.js",
-    "./material/color_scheme": "./dist/material/color_scheme.js",
-    "./material/container": "./dist/material/container.js",
-    "./material/elevated_button": "./dist/material/elevated_button.js",
-    "./material/floating_action_button": "./dist/material/floating_action_button.js",
-    "./material/gesture_detector": "./dist/material/gesture_detector.js",
-    "./material/icon": "./dist/material/icon.js",
-    "./material/image": "./dist/material/image.js",
-    "./material/list_view": "./dist/material/list_view.js",
-    "./material/material": "./dist/material/material.js",
-    "./material/material_app": "./dist/material/material_app.js",
-    "./material/scffold_basic": "./dist/material/scffold_basic.js",
-    "./material/text": "./dist/material/text.js",
-    "./utils/badge_theme": "./dist/utils/badge_theme.js",
-    "./utils/border": "./dist/utils/border.js",
-    "./utils/box_constraints": "./dist/utils/box_constraints.js",
-    "./utils/box_shadow": "./dist/utils/box_shadow.js",
-    "./utils/checkbox_theme": "./dist/utils/checkbox_theme.js",
-    "./utils/color": "./dist/utils/color.js",
-    "./utils/colors_theme": "./dist/utils/colors_theme.js",
-    "./utils/decoration/decoration": "./dist/utils/decoration/decoration.js",
-    "./utils/divider_theme": "./dist/utils/divider_theme.js",
-    "./utils/duration": "./dist/utils/duration.js",
-    "./utils/edge_insets": "./dist/utils/edge_insets.js",
-    "./utils/geometry": "./dist/utils/geometry.js",
-    "./utils/input_decoration": "./dist/utils/input_decoration.js",
-    "./utils/linear_gradient": "./dist/utils/linear_gradient.js",
-    "./utils/motion_theme": "./dist/utils/motion_theme.js",
-    "./utils/property/alignment": "./dist/utils/property/alignment.js",
-    "./utils/property/alignment_directional": "./dist/utils/property/alignment_directional.js",
-    "./utils/property/axis": "./dist/utils/property/axis.js",
-    "./utils/property/axis_direction": "./dist/utils/property/axis_direction.js",
-    "./utils/property/blend_mode": "./dist/utils/property/blend_mode.js",
-    "./utils/property/border_style": "./dist/utils/property/border_style.js",
-    "./utils/property/box_fit": "./dist/utils/property/box_fit.js",
-    "./utils/property/box_shape": "./dist/utils/property/box_shape.js",
-    "./utils/property/clip": "./dist/utils/property/clip.js",
-    "./utils/property/cross_axis_alignment": "./dist/utils/property/cross_axis_alignment.js",
-    "./utils/property/decoration_position": "./dist/utils/property/decoration_position.js",
-    "./utils/property/filter_quality": "./dist/utils/property/filter_quality.js",
-    "./utils/property/flex_fit": "./dist/utils/property/flex_fit.js",
-    "./utils/property/font_style": "./dist/utils/property/font_style.js",
-    "./utils/property/font_weight": "./dist/utils/property/font_weight.js",
-    "./utils/property/horizontal_direction": "./dist/utils/property/horizontal_direction.js",
-    "./utils/property/keyboard_type": "./dist/utils/property/keyboard_type.js",
-    "./utils/property/main_axis_alignment": "./dist/utils/property/main_axis_alignment.js",
-    "./utils/property/main_axis_size": "./dist/utils/property/main_axis_size.js",
-    "./utils/property/other": "./dist/utils/property/other.js",
-    "./utils/property/shape_border": "./dist/utils/property/shape_border.js",
-    "./utils/property/stack_fit": "./dist/utils/property/stack_fit.js",
-    "./utils/property/text_align": "./dist/utils/property/text_align.js",
-    "./utils/property/text_baseline": "./dist/utils/property/text_baseline.js",
-    "./utils/property/text_decoration": "./dist/utils/property/text_decoration.js",
-    "./utils/property/text_direction": "./dist/utils/property/text_direction.js",
-    "./utils/property/text_input_action": "./dist/utils/property/text_input_action.js",
-    "./utils/property/text_input_type": "./dist/utils/property/text_input_type.js",
-    "./utils/property/text_overflow": "./dist/utils/property/text_overflow.js",
-    "./utils/property/vertical_direction": "./dist/utils/property/vertical_direction.js",
-    "./utils/property/wrap_alignment": "./dist/utils/property/wrap_alignment.js",
-    "./utils/property/wrap_cross_alignment": "./dist/utils/property/wrap_cross_alignment.js",
-    "./utils/scrollbar_theme": "./dist/utils/scrollbar_theme.js",
-    "./utils/shadows_theme": "./dist/utils/shadows_theme.js",
-    "./utils/switch_theme": "./dist/utils/switch_theme.js",
-    "./utils/typography_theme": "./dist/utils/typography_theme.js",
-    "./utils/utils": "./dist/utils/utils.js",
-    "./widgets/compoment/aspect_ratio": "./dist/widgets/compoment/aspect_ratio.js",
-    "./widgets/compoment/backdrop": "./dist/widgets/compoment/backdrop.js",
-    "./widgets/compoment/card": "./dist/widgets/compoment/card.js",
-    "./widgets/compoment/center": "./dist/widgets/compoment/center.js",
-    "./widgets/compoment/clip": "./dist/widgets/compoment/clip.js",
-    "./widgets/compoment/custom_paint_clip": "./dist/widgets/compoment/custom_paint_clip.js",
-    "./widgets/compoment/custom_single_child_layout": "./dist/widgets/compoment/custom_single_child_layout.js",
-    "./widgets/compoment/directionality": "./dist/widgets/compoment/directionality.js",
-    "./widgets/compoment/divider": "./dist/widgets/compoment/divider.js",
-    "./widgets/compoment/fitted_box": "./dist/widgets/compoment/fitted_box.js",
-    "./widgets/compoment/fractional_translation": "./dist/widgets/compoment/fractional_translation.js",
-    "./widgets/compoment/image_filter": "./dist/widgets/compoment/image_filter.js",
-    "./widgets/compoment/indexed_stack": "./dist/widgets/compoment/indexed_stack.js",
-    "./widgets/compoment/list_body": "./dist/widgets/compoment/list_body.js",
-    "./widgets/compoment/mouse_region": "./dist/widgets/compoment/mouse_region.js",
-    "./widgets/compoment/multi_child_view": "./dist/widgets/compoment/multi_child_view.js",
-    "./widgets/compoment/opacity": "./dist/widgets/compoment/opacity.js",
-    "./widgets/compoment/padding": "./dist/widgets/compoment/padding.js",
-    "./widgets/compoment/physical_model_shape": "./dist/widgets/compoment/physical_model_shape.js",
-    "./widgets/compoment/positioned": "./dist/widgets/compoment/positioned.js",
-    "./widgets/compoment/raw_image": "./dist/widgets/compoment/raw_image.js",
-    "./widgets/compoment/rich_text": "./dist/widgets/compoment/rich_text.js",
-    "./widgets/compoment/shader_mask": "./dist/widgets/compoment/shader_mask.js",
-    "./widgets/compoment/sized_box": "./dist/widgets/compoment/sized_box.js",
-    "./widgets/compoment/sliver_box_adapter": "./dist/widgets/compoment/sliver_box_adapter.js",
-    "./widgets/compoment/stack": "./dist/widgets/compoment/stack.js",
-    "./widgets/compoment/transform": "./dist/widgets/compoment/transform.js",
-    "./widgets/navigator": "./dist/widgets/navigator.js",
-    "./widgets/widgets": "./dist/widgets/widgets.js"
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "node build.js",
-    "test": "node test/runner.js",
-    "dev": "node build.js --watch"
-  },
-  "keywords": [
-    "flutterjs",
-    "flutter",
-    "material",
-    "widgets",
-    "ui",
-    "javascript",
-    "web"
-  ],
-  "dependencies": {
-    "@flutterjs/vdom": "file:../../src/vdom",
-    "@flutterjs/runtime": "file:../../src/runtime"
-  },
-  "devDependencies": {
-    "esbuild": "^0.18.0"
-  },
-  "author": "Jayprakash Pal <jayprakash.pal@flutterjs.dev>",
-  "license": "MIT",
-  "homepage": "https://flutterjs.dev",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/flutterjsdev/flutterjs.git"
-  }
-}
diff --git a/packages/flutterjs_engine/package/material/src/core/widget_element.js b/packages/flutterjs_engine/package/material/src/core/widget_element.js
deleted file mode 100644
index 9de350ed..00000000
--- a/packages/flutterjs_engine/package/material/src/core/widget_element.js
+++ /dev/null
@@ -1,531 +0,0 @@
-/**
- * FIXED: Complete Stateful/Stateless Widget System
- * 
- * KEY FIXES:
- * 1. StatefulElement properly initializes State with lifecycle
- * 2. State.setState() correctly marks element for rebuild
- * 3. Proper context passing through entire widget tree
- * 4. Both StatelessElement and StatefulElement work correctly
- */
-
-import { Diagnosticable, Element, StatelessElement, StatefulElement } from "@flutterjs/runtime/element";
-import { VNode } from "@flutterjs/vdom/vnode";
-
-// ============================================================================
-// STATE BASE CLASS - FIXED
-// ============================================================================
-
-/**
- * State - Mutable state holder for StatefulWidget
- * 
- * ✅ CRITICAL: This is now properly integrated with StatefulElement
- */
-class State extends Diagnosticable {
-  constructor() {
-    super();
-
-    // Internal references
-    this._element = null;           // Owner StatefulElement
-    this._widget = null;            // Current widget configuration
-    this._mounted = false;          // Is state mounted?
-    this._building = false;         // Currently building?
-
-    // Lifecycle tracking
-    this._didInitState = false;
-    this._didMount = false;
-    this._isActive = false;
-
-    // Performance tracking
-    this._buildCount = 0;
-  }
-
-  /**
-   * Get the widget that created this state
-   */
-  get widget() {
-    return this._widget;
-  }
-
-  /**
-   * Get the build context
-   */
-  get context() {
-    return this._element?.context || null;
-  }
-
-  /**
-   * Check if state is mounted
-   */
-  get mounted() {
-    return this._mounted;
-  }
-
-  // ========== LIFECYCLE METHODS ==========
-
-  /**
-   * Called once when state is first created
-   * Override to initialize state variables
-   */
-  initState() {
-    // Override in subclass
-  }
-
-  /**
-   * Called when widget configuration changes
-   * @param {Widget} oldWidget - Previous widget
-   */
-  didUpdateWidget(oldWidget) {
-    // Override in subclass
-  }
-
-  /**
-   * Called when inherited dependencies change
-   */
-  didChangeDependencies() {
-    // Override in subclass
-  }
-
-  /**
-   * Called after first frame is rendered
-   */
-  didMount() {
-    // Override in subclass
-  }
-
-  /**
-   * Called when state is about to be permanently removed
-   * Override to cleanup resources
-   */
-  dispose() {
-    // Override in subclass
-  }
-
-  /**
-   * Called when state is reactivated
-   */
-  activate() {
-    // Override in subclass
-  }
-
-  /**
-   * Called when state is deactivated
-   */
-  deactivate() {
-    // Override in subclass
-  }
-
-  /**
-   * Build the widget tree
-   * MUST be overridden in subclass
-   * @param {BuildContext} context - Build context
-   * @returns {Widget|VNode} Widget tree or VNode
-   */
-  build(context) {
-    throw new Error(`${this.constructor.name}.build(context) must be implemented`);
-  }
-
-  // ========== STATE MANAGEMENT ==========
-
-  /**
-   * Update state and schedule rebuild
-   * @param {Function|Object} updateFn - Update function or object
-   */
-  setState(updateFn) {
-    if (!this.mounted) {
-      console.warn(`[State] setState called on unmounted state`);
-      return;
-    }
-
-    if (this._building) {
-      console.warn(`[State] setState called during build`);
-    }
-
-    // Apply update
-    if (typeof updateFn === 'function') {
-      try {
-        updateFn.call(this);
-      } catch (error) {
-        console.error(`[State] setState update function failed:`, error);
-        throw error;
-      }
-    } else if (typeof updateFn === 'object' && updateFn !== null) {
-      Object.assign(this, updateFn);
-    }
-
-    // Trigger rebuild
-    if (this._element && typeof this._element.markNeedsBuild === 'function') {
-      this._element.markNeedsBuild();
-    }
-  }
-
-  // ========== INTERNAL LIFECYCLE (called by StatefulElement) ==========
-
-  /**
-   * Internal: Initialize state
-   * Called by StatefulElement after mount
-   */
-  _init() {
-    if (this._didInitState) {
-      return;
-    }
-
-    this._didInitState = true;
-    this._mounted = true;
-    this._isActive = true;
-
-    try {
-      console.log(`[State] Calling initState for ${this.constructor.name}`);
-      this.initState();
-    } catch (error) {
-      console.error(`[State] initState failed:`, error);
-      throw error;
-    }
-  }
-
-  /**
-   * Internal: Call didChangeDependencies
-   */
-  _didChangeDependencies() {
-    try {
-      this.didChangeDependencies();
-    } catch (error) {
-      console.error(`[State] didChangeDependencies failed:`, error);
-    }
-  }
-
-  /**
-   * Internal: Call didMount
-   */
-  _didMount() {
-    if (this._didMount) {
-      return;
-    }
-
-    this._didMount = true;
-
-    try {
-      console.log(`[State] Calling didMount for ${this.constructor.name}`);
-      this.didMount();
-    } catch (error) {
-      console.error(`[State] didMount failed:`, error);
-    }
-  }
-
-  /**
-   * Internal: Dispose state
-   */
-  _dispose() {
-    this._mounted = false;
-    this._isActive = false;
-
-    try {
-      console.log(`[State] Calling dispose for ${this.constructor.name}`);
-      this.dispose();
-    } catch (error) {
-      console.error(`[State] dispose failed:`, error);
-    }
-  }
-
-  /**
-   * Internal: Deactivate state
-   */
-  _deactivate() {
-    if (!this._isActive) {
-      return;
-    }
-
-    this._isActive = false;
-
-    try {
-      this.deactivate();
-    } catch (error) {
-      console.error(`[State] deactivate failed:`, error);
-    }
-  }
-
-  /**
-   * Internal: Reactivate state
-   */
-  _reactivate() {
-    if (this._isActive) {
-      return;
-    }
-
-    this._isActive = true;
-
-    try {
-      this.activate();
-    } catch (error) {
-      console.error(`[State] activate failed:`, error);
-    }
-  }
-
-  toStringShort() {
-    return `${this.constructor.name}`;
-  }
-}
-
-// ============================================================================
-// WIDGET BASE CLASS
-// ============================================================================
-
-class Widget extends Diagnosticable {
-  constructor(key = null) {
-    super();
-    if (new.target === Widget) {
-      throw new Error('Widget is abstract and cannot be instantiated');
-    }
-    this.key = key;
-  }
-
-  /**
-   * Create an Element for this widget
-   * Must be implemented in subclasses
-   */
-  createElement(parent, runtime) {
-    throw new Error(
-      `${this.constructor.name}.createElement() must be implemented`
-    );
-  }
-
-  toStringShort() {
-    return `${this.constructor.name}${this.key ? `(key: ${this.key})` : '(unkeyed)'}`;
-  }
-
-  debugFillProperties(properties) {
-    super.debugFillProperties(properties);
-  }
-}
-
-// ============================================================================
-// STATELESS WIDGET
-// ============================================================================
-
-class StatelessWidget extends Widget {
-  constructor(key = null) {
-    super(key);
-  }
-
-  /**
-   * Build the widget UI
-   * MUST be overridden
-   */
-  build(context) {
-    throw new Error(`${this.constructor.name}.build(context) must be implemented`);
-  }
-
-  /**
-   * Create element for this widget
-   */
-  createElement(parent, runtime) {
-    return new StatelessElement(this, parent, runtime);
-  }
-}
-
-// StatelessElement is imported from @flutterjs/runtime
-
-// ============================================================================
-// STATEFUL WIDGET
-// ============================================================================
-
-class StatefulWidget extends Widget {
-  constructor(key = null) {
-    super(key);
-  }
-
-  /**
-   * Create the state object
-   * MUST be overridden
-   */
-  createState() {
-    throw new Error(`${this.constructor.name}.createState() must be implemented`);
-  }
-
-  /**
-   * Create element for this widget
-   */
-  createElement(parent, runtime) {
-    return new StatefulElement(this, parent, runtime);
-  }
-}
-
-// StatefulElement is imported from @flutterjs/runtime
-
-// ============================================================================
-// PROXY WIDGET
-// ============================================================================
-
-class ProxyWidget extends Widget {
-  constructor({ key = null, child = null } = {}) {
-    super(key);
-    if (new.target === ProxyWidget) {
-      throw new Error('ProxyWidget is abstract');
-    }
-    this.child = child;
-  }
-
-  createElement(parent, runtime) {
-    return new ProxyElement(this, parent, runtime);
-  }
-}
-
-/**
- * ProxyElement - Element for proxy widget
- */
-class ProxyElement extends Element {
-  constructor(widget, parent = null, runtime = null) {
-    super(widget, parent, runtime);
-  }
-
-  performRebuild() {
-    if (!this.widget.child) {
-      return null;
-    }
-
-    try {
-      const childElement = this.widget.child.createElement(this, this.runtime);
-
-      if (childElement && typeof childElement.mount === 'function') {
-        childElement.mount(this);
-      }
-
-      // ✅ FIX: Reuse existing VNode if child already built during mount
-      // ProxyElement creates a NEW element every time, and mount() triggers a build.
-      // We must not trigger performRebuild() again or we get duplication.
-      if (childElement && childElement._vnode) {
-        return childElement._vnode;
-      }
-
-      if (childElement && typeof childElement.performRebuild === 'function') {
-        return childElement.performRebuild();
-      }
-
-      return null;
-    } catch (error) {
-      console.error(`[ProxyElement] performRebuild failed:`, error);
-      throw error;
-    }
-  }
-}
-
-// ============================================================================
-// ERROR WIDGET
-// ============================================================================
-
-class ErrorWidget extends StatelessWidget {
-  constructor({ message = 'Error', error = null } = {}) {
-    super();
-    this.message = message;
-    this.error = error;
-  }
-
-  build(context) {
-    return new VNode({
-      tag: 'div',
-      props: {
-        style: {
-          backgroundColor: '#ff1744',
-          color: 'white',
-          padding: '16px',
-          borderRadius: '4px',
-          fontFamily: 'monospace',
-          fontSize: '12px',
-          whiteSpace: 'pre-wrap',
-          wordBreak: 'break-word'
-        }
-      },
-      children: [this.message]
-    });
-  }
-}
-
-// ============================================================================
-// KEY CLASSES
-// ============================================================================
-
-class Key {
-  constructor() {
-    if (new.target === Key) {
-      throw new Error('Key is abstract');
-    }
-  }
-}
-
-class ValueKey extends Key {
-  constructor(value) {
-    super();
-    this.value = value;
-  }
-
-  equals(other) {
-    return other instanceof ValueKey && this.value === other.value;
-  }
-
-  toString() {
-    return `ValueKey(${this.value})`;
-  }
-}
-
-class ObjectKey extends Key {
-  constructor(value) {
-    super();
-    this.value = value;
-  }
-
-  equals(other) {
-    return other instanceof ObjectKey && this.value === other.value;
-  }
-
-  toString() {
-    return `ObjectKey(${this.value})`;
-  }
-}
-
-class GlobalKey extends Key {
-  constructor(debugLabel = null) {
-    super();
-    this.debugLabel = debugLabel;
-    this._currentElement = null;
-  }
-
-  get currentContext() {
-    return this._currentElement?.context || null;
-  }
-
-  get currentWidget() {
-    return this._currentElement?.widget || null;
-  }
-
-  get currentState() {
-    return this._currentElement?.state || null;
-  }
-
-  equals(other) {
-    return other instanceof GlobalKey && this === other;
-  }
-
-  toString() {
-    return `GlobalKey${this.debugLabel ? `(${this.debugLabel})` : ''}`;
-  }
-}
-
-// ============================================================================
-// EXPORTS
-// ============================================================================
-
-export {
-  State,
-  Widget,
-  StatelessWidget,
-  StatelessElement,
-  StatefulWidget,
-  StatefulElement,
-  ProxyWidget,
-  ProxyElement,
-  ErrorWidget,
-  Key,
-  ValueKey,
-  ObjectKey,
-  GlobalKey,
-  Diagnosticable
-};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/index.js b/packages/flutterjs_engine/package/material/src/index.js
deleted file mode 100644
index 1570c0e3..00000000
--- a/packages/flutterjs_engine/package/material/src/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-export { BorderRadius } from "./utils/geometry.js";
-
-// ============================================================================
-// FLUTTERJS UNIFIED EXPORT (Material Layer)
-// 
-// This package acts as the main entry point for FlutterJS apps using Material Design.
-// It re-exports the core runtime (@flutterjs/runtime) so developers (and generators)
-// only need to import from this single package.
-// ============================================================================
-
-// 1. Re-Export Core Runtime Primitives
-export { BuildContext, runApp } from '@flutterjs/runtime';
-
-// 2. Export Material Components
-export * from "./core/core.js";
-export * from "./material/material.js";
-
-export * from "./widgets/widgets.js";
-export * from "./utils/utils.js";
diff --git a/packages/flutterjs_engine/package/material/src/material/color.js b/packages/flutterjs_engine/package/material/src/material/color.js
deleted file mode 100644
index 64f4fd3e..00000000
--- a/packages/flutterjs_engine/package/material/src/material/color.js
+++ /dev/null
@@ -1,662 +0,0 @@
-// ============================================================================
-// COLOR CLASS
-// ============================================================================
-
-class Color {
-  constructor(value) {
-    // Parse hex value (0xAARRGGBB format)
-    this.value = typeof value === 'string' ? parseInt(value.replace('#', ''), 16) : value;
-  }
-
-  /**
-   * Create color from RGB
-   */
-  static fromARGB(alpha, red, green, blue) {
-    const value = (alpha << 24) | (red << 16) | (green << 8) | blue;
-    return new Color(value);
-  }
-
-  /**
-   * Create color from RGB (alpha = 255)
-   */
-  static fromRGBO(red, green, blue, opacity) {
-    const alpha = Math.round(opacity * 255);
-    return Color.fromARGB(alpha, red, green, blue);
-  }
-
-  /**
-   * Get alpha channel (0-255)
-   */
-  get alpha() {
-    return (this.value >> 24) & 0xFF;
-  }
-
-  /**
-   * Get red channel (0-255)
-   */
-  get red() {
-    return (this.value >> 16) & 0xFF;
-  }
-
-  /**
-   * Get green channel (0-255)
-   */
-  get green() {
-    return (this.value >> 8) & 0xFF;
-  }
-
-  /**
-   * Get blue channel (0-255)
-   */
-  get blue() {
-    return this.value & 0xFF;
-  }
-
-  /**
-   * Get opacity (0.0-1.0)
-   */
-  get opacity() {
-    return this.alpha / 255;
-  }
-
-  /**
-   * Convert to CSS hex string
-   */
-  toCSSString() {
-    const hex = this.value.toString(16).padStart(8, '0');
-    return `#${hex.slice(2)}`; // Skip alpha for CSS
-  }
-
-  /**
-   * Convert to CSS rgba string
-   */
-  toCSS() {
-    return `rgba(${this.red}, ${this.green}, ${this.blue}, ${this.opacity})`;
-  }
-
-  /**
-   * Create a copy with modified alpha
-   */
-  withAlpha(alpha) {
-    return Color.fromARGB(alpha, this.red, this.green, this.blue);
-  }
-
-  /**
-   * Create a copy with modified opacity (0.0-1.0)
-   */
-  withOpacity(opacity) {
-    const alpha = Math.round(opacity * 255);
-    return Color.fromARGB(alpha, this.red, this.green, this.blue);
-  }
-
-  /**
-   * Blend two colors
-   */
-  static lerp(a, b, t) {
-    if (a === null) return b?.withOpacity(b.opacity * t);
-    if (b === null) return a?.withOpacity(a.opacity * (1 - t));
-
-    const alpha = Math.round(a.alpha * (1 - t) + b.alpha * t);
-    const red = Math.round(a.red * (1 - t) + b.red * t);
-    const green = Math.round(a.green * (1 - t) + b.green * t);
-    const blue = Math.round(a.blue * (1 - t) + b.blue * t);
-
-    return Color.fromARGB(alpha, red, green, blue);
-  }
-
-  /**
-   * Compare colors
-   */
-  equals(other) {
-    return this.value === other.value;
-  }
-
-  toString() {
-    return `Color(0x${this.value.toString(16).padStart(8, '0').toUpperCase()})`;
-  }
-}
-
-// ============================================================================
-// COLOR SWATCH
-// ============================================================================
-
-class ColorSwatch extends Color {
-  constructor(primary, swatch) {
-    super(primary);
-    this._swatch = swatch || {};
-  }
-
-  /**
-   * Get color by shade number
-   */
-  get(shade) {
-    return this._swatch[shade];
-  }
-
-  /**
-   * Direct access via bracket notation
-   */
-  [Symbol.for('get')](shade) {
-    return this._swatch[shade];
-  }
-}
-
-// ============================================================================
-// MATERIAL COLOR CLASS
-// ============================================================================
-
-class MaterialColor extends ColorSwatch {
-  constructor(primary, swatch) {
-    super(primary, swatch);
-  }
-
-  get shade50() { return this._swatch[50]; }
-  get shade100() { return this._swatch[100]; }
-  get shade200() { return this._swatch[200]; }
-  get shade300() { return this._swatch[300]; }
-  get shade400() { return this._swatch[400]; }
-  get shade500() { return this._swatch[500]; }
-  get shade600() { return this._swatch[600]; }
-  get shade700() { return this._swatch[700]; }
-  get shade800() { return this._swatch[800]; }
-  get shade900() { return this._swatch[900]; }
-
-  /**
-   * Get shade by index
-   */
-  getShade(index) {
-    return this._swatch[index];
-  }
-}
-
-// ============================================================================
-// MATERIAL ACCENT COLOR CLASS
-// ============================================================================
-
-class MaterialAccentColor extends ColorSwatch {
-  constructor(primary, swatch) {
-    super(primary, swatch);
-  }
-
-  get shade100() { return this._swatch[100]; }
-  get shade200() { return this._swatch[200]; }
-  get shade400() { return this._swatch[400]; }
-  get shade700() { return this._swatch[700]; }
-
-  /**
-   * Get shade by index
-   */
-  getShade(index) {
-    return this._swatch[index];
-  }
-}
-
-// ============================================================================
-// MATERIAL COLORS
-// ============================================================================
-
-class Colors {
-  // Transparency
-  static transparent = new Color(0x00000000);
-
-  // Black and White
-  static black = new Color(0xFF000000);
-  static black87 = new Color(0xDD000000);
-  static black54 = new Color(0x8A000000);
-  static black45 = new Color(0x73000000);
-  static black38 = new Color(0x61000000);
-  static black26 = new Color(0x42000000);
-  static black12 = new Color(0x1F000000);
-
-  static white = new Color(0xFFFFFFFF);
-  static white70 = new Color(0xB3FFFFFF);
-  static white60 = new Color(0x99FFFFFF);
-  static white54 = new Color(0x8AFFFFFF);
-  static white38 = new Color(0x62FFFFFF);
-  static white30 = new Color(0x4DFFFFFF);
-  static white24 = new Color(0x3DFFFFFF);
-  static white12 = new Color(0x1FFFFFFF);
-  static white10 = new Color(0x1AFFFFFF);
-
-  // RED
-  static red = new MaterialColor(0xFFF44336, {
-    50: new Color(0xFFFFEBEE),
-    100: new Color(0xFFFFCDD2),
-    200: new Color(0xFFEF9A9A),
-    300: new Color(0xFFE57373),
-    400: new Color(0xFFEF5350),
-    500: new Color(0xFFF44336),
-    600: new Color(0xFFE53935),
-    700: new Color(0xFFD32F2F),
-    800: new Color(0xFFC62828),
-    900: new Color(0xFFB71C1C)
-  });
-
-  static redAccent = new MaterialAccentColor(0xFFFF5252, {
-    100: new Color(0xFFFF8A80),
-    200: new Color(0xFFFF5252),
-    400: new Color(0xFFFF1744),
-    700: new Color(0xFFD50000)
-  });
-
-  // PINK
-  static pink = new MaterialColor(0xFFE91E63, {
-    50: new Color(0xFFFCE4EC),
-    100: new Color(0xFFF8BBD0),
-    200: new Color(0xFFF48FB1),
-    300: new Color(0xFFF06292),
-    400: new Color(0xFFEC407A),
-    500: new Color(0xFFE91E63),
-    600: new Color(0xFFD81B60),
-    700: new Color(0xFFC2185B),
-    800: new Color(0xFFAD1457),
-    900: new Color(0xFF880E4F)
-  });
-
-  static pinkAccent = new MaterialAccentColor(0xFFFF4081, {
-    100: new Color(0xFFFF80AB),
-    200: new Color(0xFFFF4081),
-    400: new Color(0xFFF50057),
-    700: new Color(0xFFC51162)
-  });
-
-  // PURPLE
-  static purple = new MaterialColor(0xFF9C27B0, {
-    50: new Color(0xFFF3E5F5),
-    100: new Color(0xFFE1BEE7),
-    200: new Color(0xFFCE93D8),
-    300: new Color(0xFFBA68C8),
-    400: new Color(0xFFAB47BC),
-    500: new Color(0xFF9C27B0),
-    600: new Color(0xFF8E24AA),
-    700: new Color(0xFF7B1FA2),
-    800: new Color(0xFF6A1B9A),
-    900: new Color(0xFF4A148C)
-  });
-
-  static purpleAccent = new MaterialAccentColor(0xFFE040FB, {
-    100: new Color(0xFFEA80FC),
-    200: new Color(0xFFE040FB),
-    400: new Color(0xFFD500F9),
-    700: new Color(0xFFAA00FF)
-  });
-
-  // DEEP PURPLE
-  static deepPurple = new MaterialColor(0xFF673AB7, {
-    50: new Color(0xFFEDE7F6),
-    100: new Color(0xFFD1C4E9),
-    200: new Color(0xFFB39DDB),
-    300: new Color(0xFF9575CD),
-    400: new Color(0xFF7E57C2),
-    500: new Color(0xFF673AB7),
-    600: new Color(0xFF5E35B1),
-    700: new Color(0xFF512DA8),
-    800: new Color(0xFF4527A0),
-    900: new Color(0xFF311B92)
-  });
-
-  static deepPurpleAccent = new MaterialAccentColor(0xFF7C4DFF, {
-    100: new Color(0xFFB388FF),
-    200: new Color(0xFF7C4DFF),
-    400: new Color(0xFF651FFF),
-    700: new Color(0xFF6200EA)
-  });
-
-  // INDIGO
-  static indigo = new MaterialColor(0xFF3F51B5, {
-    50: new Color(0xFFE8EAF6),
-    100: new Color(0xFFC5CAE9),
-    200: new Color(0xFF9FA8DA),
-    300: new Color(0xFF7986CB),
-    400: new Color(0xFF5C6BC0),
-    500: new Color(0xFF3F51B5),
-    600: new Color(0xFF3949AB),
-    700: new Color(0xFF303F9F),
-    800: new Color(0xFF283593),
-    900: new Color(0xFF1A237E)
-  });
-
-  static indigoAccent = new MaterialAccentColor(0xFF536DFE, {
-    100: new Color(0xFF8C9EFF),
-    200: new Color(0xFF536DFE),
-    400: new Color(0xFF3D5AFE),
-    700: new Color(0xFF304FFE)
-  });
-
-  // BLUE
-  static blue = new MaterialColor(0xFF2196F3, {
-    50: new Color(0xFFE3F2FD),
-    100: new Color(0xFFBBDEFB),
-    200: new Color(0xFF90CAF9),
-    300: new Color(0xFF64B5F6),
-    400: new Color(0xFF42A5F5),
-    500: new Color(0xFF2196F3),
-    600: new Color(0xFF1E88E5),
-    700: new Color(0xFF1976D2),
-    800: new Color(0xFF1565C0),
-    900: new Color(0xFF0D47A1)
-  });
-
-  static blueAccent = new MaterialAccentColor(0xFF448AFF, {
-    100: new Color(0xFF82B1FF),
-    200: new Color(0xFF448AFF),
-    400: new Color(0xFF2979FF),
-    700: new Color(0xFF2962FF)
-  });
-
-  // LIGHT BLUE
-  static lightBlue = new MaterialColor(0xFF03A9F4, {
-    50: new Color(0xFFE1F5FE),
-    100: new Color(0xFFB3E5FC),
-    200: new Color(0xFF81D4FA),
-    300: new Color(0xFF4FC3F7),
-    400: new Color(0xFF29B6F6),
-    500: new Color(0xFF03A9F4),
-    600: new Color(0xFF039BE5),
-    700: new Color(0xFF0288D1),
-    800: new Color(0xFF0277BD),
-    900: new Color(0xFF01579B)
-  });
-
-  static lightBlueAccent = new MaterialAccentColor(0xFF40C4FF, {
-    100: new Color(0xFF80D8FF),
-    200: new Color(0xFF40C4FF),
-    400: new Color(0xFF00B0FF),
-    700: new Color(0xFF0091EA)
-  });
-
-  // CYAN
-  static cyan = new MaterialColor(0xFF00BCD4, {
-    50: new Color(0xFFE0F7FA),
-    100: new Color(0xFFB2EBF2),
-    200: new Color(0xFF80DEEA),
-    300: new Color(0xFF4DD0E1),
-    400: new Color(0xFF26C6DA),
-    500: new Color(0xFF00BCD4),
-    600: new Color(0xFF00ACC1),
-    700: new Color(0xFF0097A7),
-    800: new Color(0xFF00838F),
-    900: new Color(0xFF006064)
-  });
-
-  static cyanAccent = new MaterialAccentColor(0xFF18FFFF, {
-    100: new Color(0xFF84FFFF),
-    200: new Color(0xFF18FFFF),
-    400: new Color(0xFF00E5FF),
-    700: new Color(0xFF00B8D4)
-  });
-
-  // TEAL
-  static teal = new MaterialColor(0xFF009688, {
-    50: new Color(0xFFE0F2F1),
-    100: new Color(0xFFB2DFDB),
-    200: new Color(0xFF80CBC4),
-    300: new Color(0xFF4DB6AC),
-    400: new Color(0xFF26A69A),
-    500: new Color(0xFF009688),
-    600: new Color(0xFF00897B),
-    700: new Color(0xFF00796B),
-    800: new Color(0xFF00695C),
-    900: new Color(0xFF004D40)
-  });
-
-  static tealAccent = new MaterialAccentColor(0xFF64FFDA, {
-    100: new Color(0xFFA7FFEB),
-    200: new Color(0xFF64FFDA),
-    400: new Color(0xFF1DE9B6),
-    700: new Color(0xFF00BFA5)
-  });
-
-  // GREEN
-  static green = new MaterialColor(0xFF4CAF50, {
-    50: new Color(0xFFE8F5E9),
-    100: new Color(0xFFC8E6C9),
-    200: new Color(0xFFA5D6A7),
-    300: new Color(0xFF81C784),
-    400: new Color(0xFF66BB6A),
-    500: new Color(0xFF4CAF50),
-    600: new Color(0xFF43A047),
-    700: new Color(0xFF388E3C),
-    800: new Color(0xFF2E7D32),
-    900: new Color(0xFF1B5E20)
-  });
-
-  static greenAccent = new MaterialAccentColor(0xFF69F0AE, {
-    100: new Color(0xFFB9F6CA),
-    200: new Color(0xFF69F0AE),
-    400: new Color(0xFF00E676),
-    700: new Color(0xFF00C853)
-  });
-
-  // LIGHT GREEN
-  static lightGreen = new MaterialColor(0xFF8BC34A, {
-    50: new Color(0xFFF1F8E9),
-    100: new Color(0xFFDCEDC8),
-    200: new Color(0xFFC5E1A5),
-    300: new Color(0xFFAED581),
-    400: new Color(0xFF9CCC65),
-    500: new Color(0xFF8BC34A),
-    600: new Color(0xFF7CB342),
-    700: new Color(0xFF689F38),
-    800: new Color(0xFF558B2F),
-    900: new Color(0xFF33691E)
-  });
-
-  static lightGreenAccent = new MaterialAccentColor(0xFFB2FF59, {
-    100: new Color(0xFFCCFF90),
-    200: new Color(0xFFB2FF59),
-    400: new Color(0xFF76FF03),
-    700: new Color(0xFF64DD17)
-  });
-
-  // LIME
-  static lime = new MaterialColor(0xFFCDDC39, {
-    50: new Color(0xFFF9FBE7),
-    100: new Color(0xFFF0F4C3),
-    200: new Color(0xFFE6EE9C),
-    300: new Color(0xFFDCE775),
-    400: new Color(0xFFD4E157),
-    500: new Color(0xFFCDDC39),
-    600: new Color(0xFFC0CA33),
-    700: new Color(0xFFAFB42B),
-    800: new Color(0xFF9E9D24),
-    900: new Color(0xFF827717)
-  });
-
-  static limeAccent = new MaterialAccentColor(0xFFEEFF41, {
-    100: new Color(0xFFF4FF81),
-    200: new Color(0xFFEEFF41),
-    400: new Color(0xFFC6FF00),
-    700: new Color(0xFFAEEA00)
-  });
-
-  // YELLOW
-  static yellow = new MaterialColor(0xFFFFEB3B, {
-    50: new Color(0xFFFFFDE7),
-    100: new Color(0xFFFFF9C4),
-    200: new Color(0xFFFFF59D),
-    300: new Color(0xFFFFF176),
-    400: new Color(0xFFFFEE58),
-    500: new Color(0xFFFFEB3B),
-    600: new Color(0xFFFDD835),
-    700: new Color(0xFFFBC02D),
-    800: new Color(0xFFF9A825),
-    900: new Color(0xFFF57F17)
-  });
-
-  static yellowAccent = new MaterialAccentColor(0xFFFFFF00, {
-    100: new Color(0xFFFFFF8D),
-    200: new Color(0xFFFFFF00),
-    400: new Color(0xFFFFEA00),
-    700: new Color(0xFFFFD600)
-  });
-
-  // AMBER
-  static amber = new MaterialColor(0xFFFFC107, {
-    50: new Color(0xFFFFF8E1),
-    100: new Color(0xFFFFECB3),
-    200: new Color(0xFFFFE082),
-    300: new Color(0xFFFFD54F),
-    400: new Color(0xFFFFCA28),
-    500: new Color(0xFFFFC107),
-    600: new Color(0xFFFFB300),
-    700: new Color(0xFFFFA000),
-    800: new Color(0xFFFF8F00),
-    900: new Color(0xFFFF6F00)
-  });
-
-  static amberAccent = new MaterialAccentColor(0xFFFFD740, {
-    100: new Color(0xFFFFE57F),
-    200: new Color(0xFFFFD740),
-    400: new Color(0xFFFFC400),
-    700: new Color(0xFFFFAB00)
-  });
-
-  // ORANGE
-  static orange = new MaterialColor(0xFFFF9800, {
-    50: new Color(0xFFFFF3E0),
-    100: new Color(0xFFFFE0B2),
-    200: new Color(0xFFFFCC80),
-    300: new Color(0xFFFFB74D),
-    400: new Color(0xFFFFA726),
-    500: new Color(0xFFFF9800),
-    600: new Color(0xFFFB8C00),
-    700: new Color(0xFFF57C00),
-    800: new Color(0xFFEF6C00),
-    900: new Color(0xFFE65100)
-  });
-
-  static orangeAccent = new MaterialAccentColor(0xFFFFAB40, {
-    100: new Color(0xFFFFD180),
-    200: new Color(0xFFFFAB40),
-    400: new Color(0xFFFF9100),
-    700: new Color(0xFFFF6D00)
-  });
-
-  // DEEP ORANGE
-  static deepOrange = new MaterialColor(0xFFFF5722, {
-    50: new Color(0xFFFBE9E7),
-    100: new Color(0xFFFFCCBC),
-    200: new Color(0xFFFFAB91),
-    300: new Color(0xFFFF8A65),
-    400: new Color(0xFFFF7043),
-    500: new Color(0xFFFF5722),
-    600: new Color(0xFFF4511E),
-    700: new Color(0xFFE64A19),
-    800: new Color(0xFFD84315),
-    900: new Color(0xFFBF360C)
-  });
-
-  static deepOrangeAccent = new MaterialAccentColor(0xFFFF6E40, {
-    100: new Color(0xFFFF9E80),
-    200: new Color(0xFFFF6E40),
-    400: new Color(0xFFFF3D00),
-    700: new Color(0xFFDD2C00)
-  });
-
-  // BROWN
-  static brown = new MaterialColor(0xFF795548, {
-    50: new Color(0xFFEFEBE9),
-    100: new Color(0xFFD7CCC8),
-    200: new Color(0xFFBCAAA4),
-    300: new Color(0xFFA1887F),
-    400: new Color(0xFF8D6E63),
-    500: new Color(0xFF795548),
-    600: new Color(0xFF6D4C41),
-    700: new Color(0xFF5D4037),
-    800: new Color(0xFF4E342E),
-    900: new Color(0xFF3E2723)
-  });
-
-  // GREY
-  static grey = new MaterialColor(0xFF9E9E9E, {
-    50: new Color(0xFFFAFAFA),
-    100: new Color(0xFFF5F5F5),
-    200: new Color(0xFFEEEEEE),
-    300: new Color(0xFFE0E0E0),
-    350: new Color(0xFFD6D6D6),
-    400: new Color(0xFFBDBDBD),
-    500: new Color(0xFF9E9E9E),
-    600: new Color(0xFF757575),
-    700: new Color(0xFF616161),
-    800: new Color(0xFF424242),
-    850: new Color(0xFF303030),
-    900: new Color(0xFF212121)
-  });
-
-  // BLUE GREY
-  static blueGrey = new MaterialColor(0xFF607D8B, {
-    50: new Color(0xFFECEFF1),
-    100: new Color(0xFFCFD8DC),
-    200: new Color(0xFFB0BEC5),
-    300: new Color(0xFF90A4AE),
-    400: new Color(0xFF78909C),
-    500: new Color(0xFF607D8B),
-    600: new Color(0xFF546E7A),
-    700: new Color(0xFF455A64),
-    800: new Color(0xFF37474F),
-    900: new Color(0xFF263238)
-  });
-
-  /**
-   * All primary material colors
-   */
-  static get primaries() {
-    return [
-      Colors.red,
-      Colors.pink,
-      Colors.purple,
-      Colors.deepPurple,
-      Colors.indigo,
-      Colors.blue,
-      Colors.lightBlue,
-      Colors.cyan,
-      Colors.teal,
-      Colors.green,
-      Colors.lightGreen,
-      Colors.lime,
-      Colors.yellow,
-      Colors.amber,
-      Colors.orange,
-      Colors.deepOrange,
-      Colors.brown,
-      Colors.blueGrey
-    ];
-  }
-
-  /**
-   * All accent colors
-   */
-  static get accents() {
-    return [
-      Colors.redAccent,
-      Colors.pinkAccent,
-      Colors.purpleAccent,
-      Colors.deepPurpleAccent,
-      Colors.indigoAccent,
-      Colors.blueAccent,
-      Colors.lightBlueAccent,
-      Colors.cyanAccent,
-      Colors.tealAccent,
-      Colors.greenAccent,
-      Colors.lightGreenAccent,
-      Colors.limeAccent,
-      Colors.yellowAccent,
-      Colors.amberAccent,
-      Colors.orangeAccent,
-      Colors.deepOrangeAccent
-    ];
-  }
-}
-
-// ============================================================================
-// EXPORTS
-// ============================================================================
-
-export {
-  Color,
-  ColorSwatch,
-  MaterialColor,
-  MaterialAccentColor,
-  Colors
-};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/material/color_scheme.js b/packages/flutterjs_engine/package/material/src/material/color_scheme.js
deleted file mode 100644
index 4d828b0d..00000000
--- a/packages/flutterjs_engine/package/material/src/material/color_scheme.js
+++ /dev/null
@@ -1,234 +0,0 @@
-
-import { Colors } from './color.js';
-
-// ============================================================================
-// COLOR SCHEME
-// ============================================================================
-
-export class ColorScheme {
-    constructor({
-        brightness,
-        primary,
-        onPrimary,
-        primaryContainer,
-        onPrimaryContainer,
-        secondary,
-        onSecondary,
-        secondaryContainer,
-        onSecondaryContainer,
-        tertiary,
-        onTertiary,
-        tertiaryContainer,
-        onTertiaryContainer,
-        error,
-        onError,
-        errorContainer,
-        onErrorContainer,
-        background,
-        onBackground,
-        surface,
-        onSurface,
-        surfaceVariant,
-        onSurfaceVariant,
-        outline,
-        outlineVariant,
-        shadow,
-        scrim,
-        inverseSurface,
-        onInverseSurface,
-        inversePrimary,
-        surfaceTint,
-    }) {
-        this.brightness = brightness;
-        this.primary = primary;
-        this.onPrimary = onPrimary;
-        this.primaryContainer = primaryContainer;
-        this.onPrimaryContainer = onPrimaryContainer;
-        this.secondary = secondary;
-        this.onSecondary = onSecondary;
-        this.secondaryContainer = secondaryContainer;
-        this.onSecondaryContainer = onSecondaryContainer;
-        this.tertiary = tertiary;
-        this.onTertiary = onTertiary;
-        this.tertiaryContainer = tertiaryContainer;
-        this.onTertiaryContainer = onTertiaryContainer;
-        this.error = error;
-        this.onError = onError;
-        this.errorContainer = errorContainer;
-        this.onErrorContainer = onErrorContainer;
-        this.background = background;
-        this.onBackground = onBackground;
-        this.surface = surface;
-        this.onSurface = onSurface;
-        this.surfaceVariant = surfaceVariant;
-        this.onSurfaceVariant = onSurfaceVariant;
-        this.outline = outline;
-        this.outlineVariant = outlineVariant;
-        this.shadow = shadow;
-        this.scrim = scrim;
-        this.inverseSurface = inverseSurface;
-        this.onInverseSurface = onInverseSurface;
-        this.inversePrimary = inversePrimary;
-        this.surfaceTint = surfaceTint;
-    }
-
-    static fromSeed({
-        seedColor,
-        brightness = 'light',
-        primary = null,
-        onPrimary = null,
-        primaryContainer = null,
-        onPrimaryContainer = null,
-        secondary = null,
-        onSecondary = null,
-        secondaryContainer = null,
-        onSecondaryContainer = null,
-        tertiary = null,
-        onTertiary = null,
-        tertiaryContainer = null,
-        onTertiaryContainer = null,
-        error = null,
-        onError = null,
-        errorContainer = null,
-        onErrorContainer = null,
-        background = null,
-        onBackground = null,
-        surface = null,
-        onSurface = null,
-        surfaceVariant = null,
-        onSurfaceVariant = null,
-        outline = null,
-        outlineVariant = null,
-        shadow = null,
-        scrim = null,
-        inverseSurface = null,
-        onInverseSurface = null,
-        inversePrimary = null,
-        surfaceTint = null,
-    }) {
-        // simplified implementation of material 3 color generation
-        const isDark = brightness === 'dark';
-
-        // Core palette generation (mocked for now)
-        const defaults = isDark ? this.dark() : this.light();
-
-        // If seed color is provided, we should ideally generate palette
-        // For now we'll just use the seed as primary and derive rough variants
-
-        const derivedPrimary = seedColor || defaults.primary;
-
-        return new ColorScheme({
-            brightness,
-            primary: primary || derivedPrimary,
-            onPrimary: onPrimary || (isDark ? '#000000' : '#FFFFFF'),
-            primaryContainer: primaryContainer || derivedPrimary.withOpacity(0.2),
-            onPrimaryContainer: onPrimaryContainer || derivedPrimary,
-
-            secondary: secondary || defaults.secondary,
-            onSecondary: onSecondary || defaults.onSecondary,
-            secondaryContainer: secondaryContainer || defaults.secondaryContainer,
-            onSecondaryContainer: onSecondaryContainer || defaults.onSecondaryContainer,
-
-            tertiary: tertiary || defaults.tertiary,
-            onTertiary: onTertiary || defaults.onTertiary,
-            tertiaryContainer: tertiaryContainer || defaults.tertiaryContainer,
-            onTertiaryContainer: onTertiaryContainer || defaults.onTertiaryContainer,
-
-            error: error || defaults.error,
-            onError: onError || defaults.onError,
-            errorContainer: errorContainer || defaults.errorContainer,
-            onErrorContainer: onErrorContainer || defaults.onErrorContainer,
-
-            background: background || defaults.background,
-            onBackground: onBackground || defaults.onBackground,
-
-            surface: surface || defaults.surface,
-            onSurface: onSurface || defaults.onSurface,
-            surfaceVariant: surfaceVariant || defaults.surfaceVariant,
-            onSurfaceVariant: onSurfaceVariant || defaults.onSurfaceVariant,
-
-            outline: outline || defaults.outline,
-            outlineVariant: outlineVariant || defaults.outlineVariant,
-
-            shadow: shadow || defaults.shadow,
-            scrim: scrim || defaults.scrim,
-
-            inverseSurface: inverseSurface || defaults.inverseSurface,
-            onInverseSurface: onInverseSurface || defaults.onInverseSurface,
-            inversePrimary: inversePrimary || (isDark ? derivedPrimary : '#D0BCFF'), // Mock inverse
-            surfaceTint: surfaceTint || derivedPrimary,
-        });
-    }
-
-    static light() {
-        return new ColorScheme({
-            brightness: 'light',
-            primary: '#6750A4',
-            onPrimary: '#FFFFFF',
-            primaryContainer: '#EADDFF',
-            onPrimaryContainer: '#21005D',
-            secondary: '#625B71',
-            onSecondary: '#FFFFFF',
-            secondaryContainer: '#E8DEF8',
-            onSecondaryContainer: '#1D192B',
-            tertiary: '#7D5260',
-            onTertiary: '#FFFFFF',
-            tertiaryContainer: '#FFD8E4',
-            onTertiaryContainer: '#31111D',
-            error: '#B3261E',
-            onError: '#FFFFFF',
-            errorContainer: '#F9DEDC',
-            onErrorContainer: '#410E0B',
-            background: '#FFFBFE',
-            onBackground: '#1C1B1F',
-            surface: '#FFFBFE',
-            onSurface: '#1C1B1F',
-            surfaceVariant: '#E7E0EC',
-            onSurfaceVariant: '#49454F',
-            outline: '#79747E',
-            outlineVariant: '#CAC4D0',
-            shadow: '#000000',
-            scrim: '#000000',
-            inverseSurface: '#313033',
-            onInverseSurface: '#F4EFF4',
-            inversePrimary: '#D0BCFF',
-            surfaceTint: '#6750A4',
-        });
-    }
-
-    static dark() {
-        return new ColorScheme({
-            brightness: 'dark',
-            primary: '#D0BCFF',
-            onPrimary: '#381E72',
-            primaryContainer: '#4F378B',
-            onPrimaryContainer: '#EADDFF',
-            secondary: '#CCC2DC',
-            onSecondary: '#332D41',
-            secondaryContainer: '#4A4458',
-            onSecondaryContainer: '#E8DEF8',
-            tertiary: '#EFB8C8',
-            onTertiary: '#492532',
-            tertiaryContainer: '#633B48',
-            onTertiaryContainer: '#FFD8E4',
-            error: '#F2B8B5',
-            onError: '#601410',
-            errorContainer: '#8C1D18',
-            onErrorContainer: '#F9DEDC',
-            background: '#1C1B1F',
-            onBackground: '#E6E1E5',
-            surface: '#1C1B1F',
-            onSurface: '#E6E1E5',
-            surfaceVariant: '#49454F',
-            onSurfaceVariant: '#CAC4D0',
-            outline: '#938F99',
-            outlineVariant: '#49454F',
-            shadow: '#000000',
-            scrim: '#000000',
-            inverseSurface: '#E6E1E5',
-            onInverseSurface: '#313033',
-            inversePrimary: '#6750A4',
-            surfaceTint: '#D0BCFF',
-        });
-    }
-}
diff --git a/packages/flutterjs_engine/package/material/src/material/container.js b/packages/flutterjs_engine/package/material/src/material/container.js
deleted file mode 100644
index 5bfc739f..00000000
--- a/packages/flutterjs_engine/package/material/src/material/container.js
+++ /dev/null
@@ -1,491 +0,0 @@
-import { Widget, StatelessWidget } from '../core/widget_element.js';
-import { Element } from "@flutterjs/runtime"
-import { VNode } from '@flutterjs/vdom/vnode';
-import { Clip, TextDirection, Alignment } from '../utils/utils.js';
-import { Padding } from '../widgets/widgets.js';
-import { EdgeInsets } from '../utils/edge_insets.js';
-import { BoxConstraints } from '../utils/box_constraints.js';
-import { Align } from '../widgets/compoment/center.js'; // Align is exported from center.js based on previous readings
-import { ClipPath } from '../widgets/compoment/clip.js';
-import { ConstrainedBox, LimitedBox } from '../widgets/compoment/sized_box.js';
-import { Transform } from '../widgets/compoment/transform.js';
-
-
-
-// ============================================================================
-// ENUMS
-// ============================================================================
-
-const DecorationPosition = {
-  background: 'background',
-  foreground: 'foreground'
-};
-
-// ============================================================================
-// EDGE INSETS
-// ============================================================================
-
-
-
-// ============================================================================
-// BOX CONSTRAINTS
-// ============================================================================
-
-
-
-// ============================================================================
-// DECORATION
-// ============================================================================
-
-class Decoration {
-  constructor() {
-    if (new.target === Decoration) {
-      throw new Error('Decoration is abstract');
-    }
-    this.padding = new EdgeInsets(0, 0, 0, 0);
-  }
-
-  /**
-   * Convert to CSS
-   */
-  toCSSStyle() {
-    throw new Error('toCSSStyle() must be implemented');
-  }
-
-  /**
-   * Debug validation
-   */
-  debugAssertIsValid() {
-    return true;
-  }
-}
-
-class BoxDecoration extends Decoration {
-  constructor({
-    color = null,
-    image = null,
-    border = null,
-    borderRadius = null,
-    boxShadow = [],
-    gradient = null,
-    backgroundBlendMode = null,
-    shape = 'rectangle'
-  } = {}) {
-    super();
-
-    this.color = color;
-    this.image = image;
-    this.border = border;
-    this.borderRadius = borderRadius;
-    this.boxShadow = boxShadow;
-    this.gradient = gradient;
-    this.backgroundBlendMode = backgroundBlendMode;
-    this.shape = shape;
-  }
-
-  toCSSStyle() {
-    const style = {};
-
-    if (this.color) {
-      style.backgroundColor = this.color;
-    }
-
-    if (this.borderRadius) {
-      if (typeof this.borderRadius === 'number') {
-        style.borderRadius = `${this.borderRadius}px`;
-      } else if (this.borderRadius.all !== undefined) {
-        style.borderRadius = `${this.borderRadius.all}px`;
-      } else {
-        const { topLeft = 0, topRight = 0, bottomLeft = 0, bottomRight = 0 } = this.borderRadius;
-        style.borderRadius = `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`;
-      }
-    }
-
-    if (this.border) {
-      if (typeof this.border === 'object') {
-        const { width = 1, color = 'black', style: borderStyle = 'solid' } = this.border;
-        style.border = `${width}px ${borderStyle} ${color}`;
-      }
-    }
-
-    if (this.boxShadow && this.boxShadow.length > 0) {
-      style.boxShadow = this.boxShadow
-        .map(shadow => {
-          const { offsetX = 0, offsetY = 0, blurRadius = 0, spreadRadius = 0, color = 'rgba(0,0,0,0.5)' } = shadow;
-          return `${offsetX}px ${offsetY}px ${blurRadius}px ${spreadRadius}px ${color}`;
-        })
-        .join(', ');
-    }
-
-    if (this.gradient) {
-      const { type = 'linear', colors = [], stops = [] } = this.gradient;
-      if (type === 'linear') {
-        const colorStops = colors.map((c, i) => `${c} ${(stops[i] || (i / colors.length)) * 100}%`).join(', ');
-        style.background = `linear-gradient(135deg, ${colorStops})`;
-      }
-    }
-
-    if (this.backgroundBlendMode) {
-      style.mixBlendMode = this.backgroundBlendMode;
-    }
-
-    return style;
-  }
-}
-
-// ============================================================================
-// COLORED BOX WIDGET
-// ============================================================================
-
-class ColoredBox extends StatelessWidget {
-  constructor({
-    key = null,
-    color = 'white',
-    child = null
-  } = {}) {
-    super(key);
-
-    this.color = color;
-    this.child = child;
-  }
-
-  build(context) {
-    return new DecoratedBox({
-      decoration: new BoxDecoration({ color: this.color }),
-      child: this.child
-    });
-  }
-}
-
-// ============================================================================
-// RENDER DECORATED BOX
-// ============================================================================
-
-class RenderDecoratedBox {
-  constructor({
-    decoration = null,
-    position = DecorationPosition.background,
-    configuration = {}
-  } = {}) {
-    this.decoration = decoration;
-    this.position = position;
-    this.configuration = configuration;
-  }
-
-  debugInfo() {
-    return {
-      type: 'RenderDecoratedBox',
-      position: this.position,
-      hasDecoration: !!this.decoration
-    };
-  }
-}
-
-// ============================================================================
-// DECORATED BOX WIDGET
-// ============================================================================
-
-class DecoratedBox extends Widget {
-  constructor({
-    key = null,
-    decoration = null,
-    position = DecorationPosition.background,
-    child = null
-  } = {}) {
-    super(key);
-
-    if (!decoration) {
-      throw new Error('DecoratedBox requires a decoration');
-    }
-
-    this.decoration = decoration;
-    this.position = position;
-    this.child = child;
-    this._renderObject = null;
-  }
-
-  /**
-   * Create render object
-   */
-  createRenderObject(context) {
-    return new RenderDecoratedBox({
-      decoration: this.decoration,
-      position: this.position,
-      configuration: {}
-    });
-  }
-
-  /**
-   * Update render object
-   */
-  updateRenderObject(context, renderObject) {
-    renderObject.decoration = this.decoration;
-    renderObject.position = this.position;
-  }
-
-  /**
-   * Build widget tree
-   */
-  build(context) {
-    if (!this._renderObject) {
-      this._renderObject = this.createRenderObject(context);
-    } else {
-      this.updateRenderObject(context, this._renderObject);
-    }
-
-    const elementId = context.element.getElementId();
-    const widgetPath = context.element.getWidgetPath();
-
-    let childVNode = null;
-    if (this.child) {
-      const childElement = this.child.createElement(context.element, context.element.runtime);
-      childElement.mount(context.element);
-      childVNode = childElement.performRebuild();
-    }
-
-    const decorationStyle = this.decoration.toCSSStyle();
-
-    const style = {
-      position: 'relative',
-      ...decorationStyle
-    };
-
-    return new VNode({
-      tag: 'div',
-      props: {
-        style,
-        'data-element-id': elementId,
-        'data-widget-path': widgetPath,
-        'data-widget': 'DecoratedBox',
-        'data-position': this.position
-      },
-      children: childVNode ? [childVNode] : [],
-      key: this.key
-    });
-  }
-
-  debugFillProperties(properties) {
-    super.debugFillProperties(properties);
-    const label = this.position === DecorationPosition.background ? 'bg' : 'fg';
-    properties.push({ name: label, value: this.decoration });
-  }
-
-  createElement(parent, runtime) {
-    return new DecoratedBoxElement(this, parent, runtime);
-  }
-}
-
-class DecoratedBoxElement extends Element {
-  performRebuild() {
-    return this.widget.build(this.context);
-  }
-}
-
-// ============================================================================
-// CONTAINER WIDGET
-// ============================================================================
-
-class Container extends StatelessWidget {
-  constructor({
-    key = null,
-    alignment = null,
-    padding = null,
-    color = null,
-    decoration = null,
-    foregroundDecoration = null,
-    width = null,
-    height = null,
-    constraints = null,
-    margin = null,
-    transform = null,
-    transformAlignment = null,
-    child = null,
-    clipBehavior = Clip.none
-  } = {}) {
-    super(key);
-
-    // Validation
-    if (padding !== null && !padding.isNonNegative) {
-      throw new Error('padding must be non-negative');
-    }
-    if (margin !== null && !margin.isNonNegative) {
-      throw new Error('margin must be non-negative');
-    }
-    if (color !== null && decoration !== null) {
-      throw new Error('Cannot provide both color and decoration. Use BoxDecoration(color: color).');
-    }
-    if (decoration !== null && !decoration.debugAssertIsValid()) {
-      throw new Error('decoration is not valid');
-    }
-
-    this.alignment = alignment;
-    this.padding = padding;
-    this.color = color;
-    this.decoration = decoration;
-    this.foregroundDecoration = foregroundDecoration;
-    this.margin = margin;
-    this.transform = transform;
-    this.transformAlignment = transformAlignment;
-    this.child = child;
-    this.clipBehavior = clipBehavior;
-
-    // Apply width/height to constraints
-    if (width !== null || height !== null) {
-      this.constraints = constraints?.tighten({ width, height }) ||
-        BoxConstraints.tightFor({ width, height });
-    } else {
-      this.constraints = constraints;
-    }
-  }
-
-  /**
-   * Get effective padding including decoration padding
-   * @private
-   */
-  _getPaddingIncludingDecoration() {
-    if (this.padding === null) {
-      return this.decoration?.padding;
-    }
-    if (this.decoration?.padding === null || this.decoration?.padding === undefined) {
-      return this.padding;
-    }
-    return this.padding.add(this.decoration.padding);
-  }
-
-  /**
-   * Build widget tree
-   */
-  build(context) {
-    let current = this.child;
-
-    // Handle empty container
-    if (this.child === null && (this.constraints === null || !this.constraints.isTight)) {
-      current = new LimitedBox({
-        maxWidth: 0,
-        maxHeight: 0,
-        child: new ConstrainedBox({
-          constraints: BoxConstraints.expand()
-        })
-      });
-    } else if (this.alignment !== null) {
-      current = new Align({
-        alignment: this.alignment,
-        child: current
-      });
-    }
-
-    // Apply padding
-    const effectivePadding = this._getPaddingIncludingDecoration();
-    if (effectivePadding != null) {  // != catches both null and undefined
-      current = new Padding({
-        padding: effectivePadding,
-        child: current
-      });
-    }
-
-    // Apply color
-    if (this.color !== null) {
-      current = new ColoredBox({
-        color: this.color,
-        child: current
-      });
-    }
-
-    // Apply clipping
-    if (this.clipBehavior !== Clip.none && this.decoration !== null) {
-      current = new ClipPath({
-        clipBehavior: this.clipBehavior,
-        child: current
-      });
-    }
-
-    // Apply decoration
-    if (this.decoration !== null) {
-      current = new DecoratedBox({
-        decoration: this.decoration,
-        child: current
-      });
-    }
-
-    // Apply foreground decoration
-    if (this.foregroundDecoration !== null) {
-      current = new DecoratedBox({
-        decoration: this.foregroundDecoration,
-        position: DecorationPosition.foreground,
-        child: current
-      });
-    }
-
-    // Apply constraints
-    if (this.constraints !== null) {
-      current = new ConstrainedBox({
-        constraints: this.constraints,
-        child: current
-      });
-    }
-
-    // Apply margin
-    if (this.margin !== null) {
-      current = new Padding({
-        padding: this.margin,
-        child: current
-      });
-    }
-
-    // Apply transform
-    if (this.transform !== null) {
-      current = new Transform({
-        transform: this.transform,
-        alignment: this.transformAlignment,
-        child: current
-      });
-    }
-
-    return current;
-  }
-
-  debugFillProperties(properties) {
-    super.debugFillProperties(properties);
-    if (this.alignment !== null) properties.push({ name: 'alignment', value: this.alignment });
-    if (this.padding !== null) properties.push({ name: 'padding', value: this.padding });
-    if (this.color !== null) {
-      properties.push({ name: 'bg', value: this.color });
-    } else if (this.decoration !== null) {
-      properties.push({ name: 'bg', value: this.decoration });
-    }
-    if (this.foregroundDecoration !== null) properties.push({ name: 'fg', value: this.foregroundDecoration });
-    if (this.constraints !== null) properties.push({ name: 'constraints', value: this.constraints });
-    if (this.margin !== null) properties.push({ name: 'margin', value: this.margin });
-  }
-}
-
-// ============================================================================
-// SUPPORTING WIDGETS (Placeholder implementations)
-// ============================================================================
-
-
-
-
-
-
-
-
-
-
-
-
-
-// ============================================================================
-// EXPORTS
-// ============================================================================
-
-export {
-  Container,
-  DecoratedBox,
-  DecoratedBoxElement,
-  RenderDecoratedBox,
-  ColoredBox,
-  BoxDecoration,
-  Decoration,
-  DecorationPosition
-};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/material/elevated_button.js b/packages/flutterjs_engine/package/material/src/material/elevated_button.js
deleted file mode 100644
index 821438b3..00000000
--- a/packages/flutterjs_engine/package/material/src/material/elevated_button.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import { ProxyWidget, ProxyElement, StatelessWidget } from '../core/widget_element.js';
-import { Element } from "@flutterjs/runtime"
-import { VNode } from '@flutterjs/vdom/vnode';
-import { GestureDetector } from './gesture_detector.js';
-
-// ============================================================================
-// ELEVATED BUTTON
-// ============================================================================
-
-class ElevatedButton extends ProxyWidget {
-    constructor({
-        key = null,
-        onPressed = null,
-        child = null,
-        // TODO: support full ButtonStyle, for now simple overrides
-        style = null
-    } = {}) {
-        super({ key, child });
-        this.onPressed = onPressed;
-        this.style = style;
-    }
-
-    createElement(parent, runtime) {
-        return new ElevatedButtonElement(this, parent, runtime);
-    }
-}
-
-class ElevatedButtonElement extends ProxyElement {
-    performRebuild() {
-        const elementId = this.getElementId();
-        const widgetPath = this.getWidgetPath();
-
-        // Basic Material 3 Elevation/Color styles (approximate)
-        const baseStyle = {
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: '10px 24px',
-            borderRadius: '20px',
-            backgroundColor: '#6750A4', // Primary default
-            color: '#FFFFFF',
-            border: 'none',
-            cursor: this.widget.onPressed ? 'pointer' : 'default',
-            boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
-            transition: 'all 0.2s ease',
-            fontSize: '14px',
-            fontWeight: '500',
-            fontFamily: 'inherit',
-            textTransform: 'uppercase',
-            outline: 'none',
-            userSelect: 'none',
-            opacity: this.widget.onPressed ? 1 : 0.6,
-            ...this.widget.style
-        };
-
-        // Get child VNode from parent class (this handles the widget lifecycle)
-        const childVNode = super.performRebuild();
-
-        // Wrap child VNode in button element
-        const buttonVNode = new VNode({
-            tag: 'button',
-            props: {
-                style: baseStyle,
-                type: 'button',
-                'data-element-id': elementId,
-                'data-widget-path': widgetPath,
-                'data-widget': 'ElevatedButton',
-            },
-            children: childVNode ? [childVNode] : [],
-            key: this.widget.key
-        });
-
-        // If there's an onPressed handler, wrap in GestureDetector
-        if (this.widget.onPressed) {
-            // We need to attach the event handler to the button VNode
-            if (!buttonVNode.events) {
-                buttonVNode.events = {};
-            }
-            buttonVNode.events.onClick = this.widget.onPressed;
-        }
-
-        return buttonVNode;
-    }
-}
-
-export {
-    ElevatedButton
-};
diff --git a/packages/flutterjs_engine/package/material/src/material/floating_action_button.js b/packages/flutterjs_engine/package/material/src/material/floating_action_button.js
deleted file mode 100644
index c158a192..00000000
--- a/packages/flutterjs_engine/package/material/src/material/floating_action_button.js
+++ /dev/null
@@ -1,510 +0,0 @@
-import { Widget, StatelessWidget } from '../core/widget_element.js';
-import { Element } from "@flutterjs/runtime"
-import { VNode } from '@flutterjs/vdom/vnode';
-import { GestureDetector } from './gesture_detector.js';
-
-// ============================================================================
-// FLOATING ACTION BUTTON
-// ============================================================================
-
-class FloatingActionButton extends StatelessWidget {
-  constructor({
-    key = null,
-    onPressed = null,
-    onLongPress = null,
-    tooltip = null,
-    foregroundColor = '#FFF',
-    backgroundColor = null,
-    focusColor = null,
-    hoverColor = null,
-    splashColor = null,
-    elevation = 6,
-    highlightElevation = 12,
-    disabledElevation = 0,
-    child = null,
-    mini = false,
-    shape = null,
-    clipBehavior = 'clip',
-    autofocus = false,
-    materialTapTargetSize = null,
-    isExtended = false,
-    enableFeedback = true,
-    heroTag = 'FloatingActionButton'
-  } = {}) {
-    super(key);
-
-    if (!onPressed) {
-      throw new Error('FloatingActionButton requires onPressed callback');
-    }
-
-    this.onPressed = onPressed;
-    this.onLongPress = onLongPress;
-    this.tooltip = tooltip;
-    this.foregroundColor = foregroundColor;
-    this.backgroundColor = backgroundColor || this._getDefaultBackgroundColor();
-    this.focusColor = focusColor;
-    this.hoverColor = hoverColor;
-    this.splashColor = splashColor;
-    this.elevation = elevation;
-    this.highlightElevation = highlightElevation;
-    this.disabledElevation = disabledElevation;
-    this.child = child;
-    this.mini = mini;
-    this.shape = shape;
-    this.clipBehavior = clipBehavior;
-    this.autofocus = autofocus;
-    this.materialTapTargetSize = materialTapTargetSize;
-    this.isExtended = isExtended;
-    this.enableFeedback = enableFeedback;
-    this.heroTag = heroTag;
-
-    this._isHovered = false;
-    this._isPressed = false;
-  }
-
-  /**
-   * Get default background color (primary color from theme)
-   */
-  _getDefaultBackgroundColor() {
-    if (typeof window !== 'undefined') {
-      const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color') || '#2196F3';
-      return primaryColor.trim();
-    }
-    return '#2196F3';
-  }
-
-  /**
-   * Get button size based on mini flag
-   */
-  _getButtonSize() {
-    return this.mini ? 40 : 56;
-  }
-
-  /**
-   * Get button styles
-   */
-  _getButtonStyle() {
-    const size = this._getButtonSize();
-    const elevation = this._isPressed ? this.highlightElevation : this.elevation;
-
-    return {
-      position: 'relative',
-      width: `${size}px`,
-      height: `${size}px`,
-      borderRadius: '50%',
-      backgroundColor: this.backgroundColor,
-      color: this.foregroundColor,
-      border: 'none',
-      cursor: 'pointer',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      boxShadow: `0 ${elevation}px ${elevation * 1.5}px rgba(0, 0, 0, 0.${elevation})`,
-      transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
-      outline: 'none',
-      fontFamily: 'inherit',
-      fontSize: '24px',
-      fontWeight: 500,
-      textTransform: 'uppercase',
-      letterSpacing: '0.5px',
-      userSelect: 'none',
-      WebkitUserSelect: 'none',
-      MozUserSelect: 'none',
-      msUserSelect: 'none'
-    };
-  }
-
-  /**
-   * Get ripple effect styles
-   */
-  _getRippleStyle() {
-    return {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      borderRadius: '50%',
-      backgroundColor: this.splashColor || 'rgba(255, 255, 255, 0.2)',
-      opacity: 0,
-      pointerEvents: 'none',
-      animation: this._isPressed
-        ? 'fab-ripple 0.6s ease-out'
-        : 'none'
-    };
-  }
-
-  /**
-   * Handle press with feedback
-   */
-  _handlePress(event) {
-    if (this.enableFeedback) {
-      // Haptic feedback (if available)
-      if (navigator.vibrate) {
-        navigator.vibrate(10);
-      }
-    }
-
-    if (this.onPressed) {
-      this.onPressed(event);
-    }
-  }
-
-  /**
-   * Handle long press
-   */
-  _handleLongPress(event) {
-    if (this.enableFeedback && navigator.vibrate) {
-      navigator.vibrate([10, 20, 10]); // Double vibration for long press
-    }
-
-    if (this.onLongPress) {
-      this.onLongPress(event);
-    }
-  }
-
-  /**
-   * Handle mouse/touch down
-   */
-  _handleTapDown(event) {
-    this._isPressed = true;
-  }
-
-  /**
-   * Handle mouse/touch up
-   */
-  _handleTapUp(event) {
-    this._isPressed = false;
-  }
-
-  /**
-   * Inject ripple animation keyframes
-   */
-  _injectKeyframes() {
-    if (typeof document !== 'undefined' && !document.getElementById('fab-keyframes')) {
-      const style = document.createElement('style');
-      style.id = 'fab-keyframes';
-      style.textContent = `
-        @keyframes fab-ripple {
-          0% {
-            opacity: 1;
-            transform: scale(1);
-          }
-          100% {
-            opacity: 0;
-            transform: scale(2);
-          }
-        }
-      `;
-      document.head.appendChild(style);
-    }
-  }
-
-  build(context) {
-    const buttonStyle = this._getButtonStyle();
-    let childVNode = null;
-
-    // Build child element
-    if (this.child) {
-      const childElement = this.child.createElement?.(context.element, context.element.runtime) || this.child;
-      if (childElement.mount) {
-        childElement.mount(context.element);
-      }
-      childVNode = childElement.performRebuild?.(context.element, context.element.runtime) || null;
-    }
-
-    // Inject ripple animation keyframes
-    this._injectKeyframes();
-
-    // Create the actual button content (without gesture detection)
-    const buttonContent = new VNode({
-      tag: 'button',
-      props: {
-        style: buttonStyle,
-        type: 'button',
-        title: this.tooltip || '',
-        'aria-label': this.tooltip || 'Floating Action Button'
-      },
-      children: [
-        // Ripple effect
-        new VNode({
-          tag: 'span',
-          props: {
-            style: this._getRippleStyle(),
-            className: 'fab-ripple'
-          },
-          children: []
-        }),
-        // Child content (icon)
-        new VNode({
-          tag: 'span',
-          props: {
-            style: {
-              position: 'relative',
-              zIndex: 1,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center'
-            }
-          },
-          children: childVNode ? [childVNode] : []
-        })
-      ]
-    });
-
-    // Wrap button with GestureDetector
-    const fabWidget = new GestureDetector({
-      onTap: (event) => this._handlePress(event),
-      onTapDown: (event) => this._handleTapDown(event),
-      onTapUp: (event) => this._handleTapUp(event),
-      onLongPress: (event) => this._handleLongPress(event),
-      child: new _FABContentWrapper(buttonContent)
-    });
-
-    // Build gesture detector element
-    const fabElement = fabWidget.createElement?.(context.element, context.element.runtime);
-    if (fabElement && fabElement.mount) {
-      fabElement.mount(context.element);
-    }
-    let fabVNode = fabElement?.performRebuild?.(context.element, context.element.runtime) || null;
-
-    // Wrap with tooltip if provided
-    if (this.tooltip) {
-      return new VNode({
-        tag: 'div',
-        props: {
-          style: {
-            position: 'relative',
-            display: 'inline-block'
-          },
-          'data-widget': 'FloatingActionButton'
-        },
-        children: [
-          fabVNode,
-          new VNode({
-            tag: 'div',
-            props: {
-              style: {
-                visibility: 'hidden',
-                backgroundColor: '#333',
-                color: '#fff',
-                textAlign: 'center',
-                borderRadius: '4px',
-                padding: '5px 8px',
-                position: 'absolute',
-                zIndex: 1000,
-                bottom: '125%',
-                left: '50%',
-                marginLeft: '-40px',
-                opacity: 0,
-                transition: 'opacity 0.3s',
-                whiteSpace: 'nowrap',
-                fontSize: '12px',
-                fontWeight: 500,
-                pointerEvents: 'none',
-                width: '80px'
-              },
-              className: 'fab-tooltip'
-            },
-            children: [this.tooltip]
-          })
-        ]
-      });
-    }
-
-    return fabVNode;
-  }
-
-  createElement(parent, runtime) {
-    return new FloatingActionButtonElement(this, parent, runtime);
-  }
-
-  debugFillProperties(properties) {
-    super.debugFillProperties(properties);
-    properties.push({ name: 'onPressed', value: this.onPressed ? 'fn' : null });
-    properties.push({ name: 'tooltip', value: this.tooltip });
-    properties.push({ name: 'backgroundColor', value: this.backgroundColor });
-    if (this.mini) properties.push({ name: 'mini', value: true });
-  }
-}
-
-class FloatingActionButtonElement extends Element {
-  performRebuild(parent, runtime) {
-    return this.widget.build(this.context);
-  }
-}
-
-// ============================================================================
-// EXTENDED FLOATING ACTION BUTTON
-// ============================================================================
-
-class FloatingActionButtonExtended extends StatelessWidget {
-  constructor({
-    key = null,
-    onPressed = null,
-    onLongPress = null,
-    tooltip = null,
-    foregroundColor = '#FFF',
-    backgroundColor = null,
-    icon = null,
-    label = '',
-    elevation = 6,
-    highlightElevation = 12,
-    clipBehavior = 'clip',
-    heroTag = 'FloatingActionButton',
-    enableFeedback = true
-  } = {}) {
-    super(key);
-
-    if (!onPressed) {
-      throw new Error('FloatingActionButtonExtended requires onPressed callback');
-    }
-
-    this.onPressed = onPressed;
-    this.onLongPress = onLongPress;
-    this.tooltip = tooltip;
-    this.foregroundColor = foregroundColor;
-    this.backgroundColor = backgroundColor || this._getDefaultBackgroundColor();
-    this.icon = icon;
-    this.label = label;
-    this.elevation = elevation;
-    this.highlightElevation = highlightElevation;
-    this.clipBehavior = clipBehavior;
-    this.heroTag = heroTag;
-    this.enableFeedback = enableFeedback;
-
-    this._isPressed = false;
-  }
-
-  /**
-   * Get default background color
-   */
-  _getDefaultBackgroundColor() {
-    if (typeof window !== 'undefined') {
-      const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color') || '#2196F3';
-      return primaryColor.trim();
-    }
-    return '#2196F3';
-  }
-
-  /**
-   * Handle press
-   */
-  _handlePress(event) {
-    if (this.enableFeedback && navigator.vibrate) {
-      navigator.vibrate(10);
-    }
-    if (this.onPressed) {
-      this.onPressed(event);
-    }
-  }
-
-  /**
-   * Handle long press
-   */
-  _handleLongPress(event) {
-    if (this.enableFeedback && navigator.vibrate) {
-      navigator.vibrate([10, 20, 10]);
-    }
-    if (this.onLongPress) {
-      this.onLongPress(event);
-    }
-  }
-
-  build(context) {
-    const elevation = this._isPressed ? this.highlightElevation : this.elevation;
-
-    const buttonStyle = {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: '8px',
-      padding: '12px 20px',
-      borderRadius: '48px',
-      backgroundColor: this.backgroundColor,
-      color: this.foregroundColor,
-      border: 'none',
-      cursor: 'pointer',
-      boxShadow: `0 ${elevation}px ${elevation * 1.5}px rgba(0, 0, 0, 0.${elevation})`,
-      transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
-      fontSize: '14px',
-      fontWeight: 500,
-      textTransform: 'uppercase',
-      letterSpacing: '0.5px',
-      outline: 'none',
-      fontFamily: 'inherit',
-      userSelect: 'none',
-      WebkitUserSelect: 'none',
-      minHeight: '48px'
-    };
-
-    let iconVNode = null;
-    if (this.icon) {
-      const iconElement = this.icon.createElement?.(context.element, context.element.runtime) || this.icon;
-      if (iconElement.mount) {
-        iconElement.mount(context.element);
-      }
-      iconVNode = iconElement.performRebuild?.(context.element, context.element.runtime) || null;
-    }
-
-    const buttonContent = new VNode({
-      tag: 'button',
-      props: {
-        style: buttonStyle,
-        type: 'button',
-        title: this.tooltip || '',
-        'aria-label': this.tooltip || this.label
-      },
-      children: [
-        iconVNode && new VNode({
-          tag: 'span',
-          props: { style: { display: 'flex', alignItems: 'center' } },
-          children: [iconVNode]
-        }),
-        new VNode({
-          tag: 'span',
-          props: {},
-          children: [this.label]
-        })
-      ]
-    });
-
-    // Wrap with GestureDetector
-    const fabWidget = new GestureDetector({
-      onTap: (event) => this._handlePress(event),
-      onLongPress: (event) => this._handleLongPress(event),
-      child: new _FABContentWrapper(buttonContent)
-    });
-
-    const fabElement = fabWidget.createElement?.(context.element, context.element.runtime);
-    if (fabElement && fabElement.mount) {
-      fabElement.mount(context.element);
-    }
-    return fabElement?.performRebuild?.(context.element, context.element.runtime) || null;
-  }
-
-  createElement(parent, runtime) {
-    return new FloatingActionButtonElement(this, parent, runtime);
-  }
-}
-
-class _FABContentWrapper extends StatelessWidget {
-  constructor(content) {
-    super();
-    this.content = content;
-  }
-
-  build(context) {
-    return this.content;
-  }
-}
-
-// ============================================================================
-// EXPORTS
-// ============================================================================
-
-export {
-  FloatingActionButton,
-  FloatingActionButtonElement,
-  FloatingActionButtonExtended
-};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/material/gesture_detector.js b/packages/flutterjs_engine/package/material/src/material/gesture_detector.js
deleted file mode 100644
index 2bda02a1..00000000
--- a/packages/flutterjs_engine/package/material/src/material/gesture_detector.js
+++ /dev/null
@@ -1,390 +0,0 @@
-import { Widget, StatelessWidget } from '../core/widget_element.js';
-import { Element } from "@flutterjs/runtime"
-import { VNode } from '@flutterjs/vdom/vnode';
-import {
-  TapRecognizer,
-  LongPressRecognizer,
-  SwipeRecognizer,
-  PanRecognizer,
-  ScaleRecognizer
-} from '@flutterjs/runtime';
-
-// ============================================================================
-// GESTURE DETECTOR
-// ============================================================================
-
-/**
- * GestureDetector Widget
- * 
- * Wraps a child widget and detects various gestures
- * Supports: tap, double-tap, long-press, swipe, pan, scale
- * Works with both mouse and touch events
- */
-class GestureDetector extends StatelessWidget {
-  constructor({
-    key = null,
-    child = null,
-    // Tap gestures
-    onTap = null,
-    onTapDown = null,
-    onTapUp = null,
-    onTapCancel = null,
-    onDoubleTap = null,
-    // Long press
-    onLongPress = null,
-    onLongPressStart = null,
-    onLongPressMoveUpdate = null,
-    onLongPressEnd = null,
-    onLongPressUp = null,
-    // Swipe
-    onSwipe = null,
-    onSwipeLeft = null,
-    onSwipeRight = null,
-    onSwipeUp = null,
-    onSwipeDown = null,
-    // Pan
-    onPan = null,
-    onPanStart = null,
-    onPanUpdate = null,
-    onPanEnd = null,
-    // Scale/Pinch
-    onScale = null,
-    onScaleStart = null,
-    onScaleUpdate = null,
-    onScaleEnd = null,
-    // Configuration
-    behavior = 'opaque',
-    excludeFromSemantics = false
-  } = {}) {
-    super(key);
-
-    this.child = child;
-
-    // Tap callbacks
-    this.onTap = onTap;
-    this.onTapDown = onTapDown;
-    this.onTapUp = onTapUp;
-    this.onTapCancel = onTapCancel;
-    this.onDoubleTap = onDoubleTap;
-
-    // Long press callbacks
-    this.onLongPress = onLongPress;
-    this.onLongPressStart = onLongPressStart;
-    this.onLongPressMoveUpdate = onLongPressMoveUpdate;
-    this.onLongPressEnd = onLongPressEnd;
-    this.onLongPressUp = onLongPressUp;
-
-    // Swipe callbacks
-    this.onSwipe = onSwipe;
-    this.onSwipeLeft = onSwipeLeft;
-    this.onSwipeRight = onSwipeRight;
-    this.onSwipeUp = onSwipeUp;
-    this.onSwipeDown = onSwipeDown;
-
-    // Pan callbacks
-    this.onPan = onPan;
-    this.onPanStart = onPanStart;
-    this.onPanUpdate = onPanUpdate;
-    this.onPanEnd = onPanEnd;
-
-    // Scale callbacks
-    this.onScale = onScale;
-    this.onScaleStart = onScaleStart;
-    this.onScaleUpdate = onScaleUpdate;
-    this.onScaleEnd = onScaleEnd;
-
-    // Configuration
-    this.behavior = behavior;
-    this.excludeFromSemantics = excludeFromSemantics;
-
-    // Gesture recognizers
-    this.recognizers = [];
-    this._elementId = null;
-  }
-
-  /**
-   * Build gesture detector with child
-   */
-  build(context) {
-    this._elementId = context.element.getElementId();
-
-    let childVNode = null;
-    if (this.child) {
-      const childElement = this.child.createElement?.(context.element, context.element.runtime) || this.child;
-      if (childElement.mount) {
-        childElement.mount(context.element);
-      }
-      childVNode = childElement.performRebuild?.() || null;
-    }
-
-    const containerStyle = {
-      position: 'relative',
-      userSelect: this.behavior === 'opaque' ? 'none' : 'auto',
-      WebkitUserSelect: this.behavior === 'opaque' ? 'none' : 'auto',
-      MozUserSelect: this.behavior === 'opaque' ? 'none' : 'auto',
-      msUserSelect: this.behavior === 'opaque' ? 'none' : 'auto',
-      touchAction: 'manipulation',
-      cursor: 'pointer'
-    };
-
-    const elementId = this._elementId;
-
-    return new VNode({
-      tag: 'div',
-      props: {
-        style: containerStyle,
-        'data-widget': 'GestureDetector',
-        'data-element-id': elementId,
-        onMouseDown: (e) => this._handleMouseDown(e, elementId),
-        onMouseUp: (e) => this._handleMouseUp(e, elementId),
-        onMouseMove: (e) => this._handleMouseMove(e, elementId),
-        onMouseLeave: (e) => this._handleMouseLeave(e, elementId),
-        onTouchStart: (e) => this._handleTouchStart(e, elementId),
-        onTouchEnd: (e) => this._handleTouchEnd(e, elementId),
-        onTouchMove: (e) => this._handleTouchMove(e, elementId),
-        onTouchCancel: (e) => this._handleTouchCancel(e, elementId),
-        onContextMenu: (e) => this._handleContextMenu(e, elementId)
-      },
-      children: childVNode ? [childVNode] : []
-    });
-  }
-
-  /**
-   * Initialize gesture recognizers on mount
-   */
-  _initializeRecognizers(elementId) {
-    if (this.recognizers.length > 0) return; // Already initialized
-
-    // Tap gesture
-    if (this.onTap || this.onTapDown || this.onTapUp) {
-      const tapRecognizer = new TapRecognizer(
-        (event) => {
-          if (this.onTap) this.onTap(event);
-          if (this.onTapUp) this.onTapUp(event);
-        },
-        { maxDuration: 300, maxMovement: 10 }
-      );
-      this.recognizers.push(tapRecognizer);
-    }
-
-    // Double tap gesture
-    if (this.onDoubleTap) {
-      const doubleTapRecognizer = new TapRecognizer(
-        (event) => {
-          if (event.tapCount === 2) {
-            this.onDoubleTap(event);
-          }
-        },
-        { minTaps: 2, maxTaps: 2 }
-      );
-      this.recognizers.push(doubleTapRecognizer);
-    }
-
-    // Long press gesture
-    if (this.onLongPress || this.onLongPressStart || this.onLongPressEnd) {
-      const longPressRecognizer = new LongPressRecognizer(
-        (event) => {
-          if (this.onLongPress) this.onLongPress(event);
-        },
-        { duration: 500, maxMovement: 10 }
-      );
-      this.recognizers.push(longPressRecognizer);
-    }
-
-    // Swipe gesture
-    if (this.onSwipe || this.onSwipeLeft || this.onSwipeRight || this.onSwipeUp || this.onSwipeDown) {
-      const swipeRecognizer = new SwipeRecognizer(
-        (event) => {
-          if (this.onSwipe) this.onSwipe(event);
-
-          // Direction-specific callbacks
-          if (event.direction === 'left' && this.onSwipeLeft) {
-            this.onSwipeLeft(event);
-          } else if (event.direction === 'right' && this.onSwipeRight) {
-            this.onSwipeRight(event);
-          } else if (event.direction === 'up' && this.onSwipeUp) {
-            this.onSwipeUp(event);
-          } else if (event.direction === 'down' && this.onSwipeDown) {
-            this.onSwipeDown(event);
-          }
-        },
-        { minDistance: 50, maxDuration: 300 }
-      );
-      this.recognizers.push(swipeRecognizer);
-    }
-
-    // Pan gesture
-    if (this.onPan || this.onPanStart || this.onPanUpdate || this.onPanEnd) {
-      const panRecognizer = new PanRecognizer(
-        (event) => {
-          if (this.onPan) this.onPan(event);
-        },
-        {
-          minDistance: 10,
-          onStart: (event) => {
-            if (this.onPanStart) this.onPanStart(event);
-          },
-          onUpdate: (event) => {
-            if (this.onPanUpdate) this.onPanUpdate(event);
-          },
-          onEnd: (event) => {
-            if (this.onPanEnd) this.onPanEnd(event);
-          }
-        }
-      );
-      this.recognizers.push(panRecognizer);
-    }
-
-    // Scale gesture (pinch)
-    if (this.onScale || this.onScaleStart || this.onScaleUpdate || this.onScaleEnd) {
-      const scaleRecognizer = new ScaleRecognizer(
-        (event) => {
-          if (this.onScale) this.onScale(event);
-        },
-        {
-          minScale: 0.5,
-          maxScale: 2.0,
-          onStart: (event) => {
-            if (this.onScaleStart) this.onScaleStart(event);
-          },
-          onUpdate: (event) => {
-            if (this.onScaleUpdate) this.onScaleUpdate(event);
-          },
-          onEnd: (event) => {
-            if (this.onScaleEnd) this.onScaleEnd(event);
-          }
-        }
-      );
-      this.recognizers.push(scaleRecognizer);
-    }
-  }
-
-  /**
-   * Route events to recognizers
-   */
-  _routeEvent(eventType, event, elementId) {
-    this._initializeRecognizers(elementId);
-
-    this.recognizers.forEach(recognizer => {
-      if (!recognizer.isDisposed) {
-        recognizer.handleEvent(eventType, event);
-      }
-    });
-  }
-
-  // ========== MOUSE EVENTS ==========
-
-  _handleMouseDown(e, elementId) {
-    this._routeEvent('mousedown', e, elementId);
-    if (this.onTapDown) {
-      this.onTapDown({
-        type: 'tapdown',
-        position: { x: e.clientX, y: e.clientY },
-        nativeEvent: e
-      });
-    }
-  }
-
-  _handleMouseUp(e, elementId) {
-    this._routeEvent('mouseup', e, elementId);
-  }
-
-  _handleMouseMove(e, elementId) {
-    this._routeEvent('mousemove', e, elementId);
-  }
-
-  _handleMouseLeave(e, elementId) {
-    if (this.onTapCancel) {
-      this.onTapCancel({
-        type: 'tapcancel',
-        nativeEvent: e
-      });
-    }
-  }
-
-  // ========== TOUCH EVENTS ==========
-
-  _handleTouchStart(e, elementId) {
-    this._routeEvent('touchstart', e, elementId);
-    if (this.onTapDown) {
-      const touch = e.touches[0];
-      this.onTapDown({
-        type: 'tapdown',
-        position: { x: touch.clientX, y: touch.clientY },
-        nativeEvent: e
-      });
-    }
-  }
-
-  _handleTouchEnd(e, elementId) {
-    this._routeEvent('touchend', e, elementId);
-  }
-
-  _handleTouchMove(e, elementId) {
-    this._routeEvent('touchmove', e, elementId);
-  }
-
-  _handleTouchCancel(e, elementId) {
-    this._routeEvent('touchcancel', e, elementId);
-    if (this.onTapCancel) {
-      this.onTapCancel({
-        type: 'tapcancel',
-        nativeEvent: e
-      });
-    }
-  }
-
-  // ========== CONTEXT MENU ==========
-
-  _handleContextMenu(e, elementId) {
-    if (this.onLongPress) {
-      e.preventDefault();
-      this._routeEvent('contextmenu', e, elementId);
-    }
-  }
-
-  /**
-   * Cleanup
-   */
-  dispose() {
-    this.recognizers.forEach(recognizer => {
-      recognizer.dispose();
-    });
-    this.recognizers = [];
-  }
-
-  createElement(parent, runtime) {
-    return new GestureDetectorElement(this, parent, runtime);
-  }
-
-  debugFillProperties(properties) {
-    super.debugFillProperties(properties);
-    if (this.onTap) properties.push({ name: 'onTap', value: 'fn' });
-    if (this.onDoubleTap) properties.push({ name: 'onDoubleTap', value: 'fn' });
-    if (this.onLongPress) properties.push({ name: 'onLongPress', value: 'fn' });
-    if (this.onSwipe) properties.push({ name: 'onSwipe', value: 'fn' });
-    if (this.onPan) properties.push({ name: 'onPan', value: 'fn' });
-  }
-}
-
-class GestureDetectorElement extends Element {
-  performRebuild() {
-    return this.widget.build(this.context);
-  }
-
-  unmount() {
-    if (this.widget) {
-      this.widget.dispose();
-    }
-    super.unmount();
-  }
-}
-
-// ============================================================================
-// EXPORTS
-// ============================================================================
-
-export {
-  GestureDetector,
-  GestureDetectorElement
-};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/material/icon.js b/packages/flutterjs_engine/package/material/src/material/icon.js
deleted file mode 100644
index e3d4d1a9..00000000
--- a/packages/flutterjs_engine/package/material/src/material/icon.js
+++ /dev/null
@@ -1,561 +0,0 @@
-import { StatelessWidget } from '../core/widget_element.js';
-import { VNode } from '@flutterjs/vdom/vnode';
-import { BlendMode, TextDirection } from '../utils/utils.js';
-
-const DEFAULT_ICON_SIZE = 24;
-const DEFAULT_FONT_SIZE = 24;
-
-const BLEND_MODE_MAP = {
-  [BlendMode.srcOver]: 'normal',
-  [BlendMode.srcIn]: 'multiply',
-  [BlendMode.srcOut]: 'lighten',
-  [BlendMode.srcATop]: 'screen',
-  [BlendMode.dstOver]: 'overlay',
-  [BlendMode.dstIn]: 'darken',
-  [BlendMode.dstOut]: 'color-dodge',
-  [BlendMode.dstATop]: 'color-burn',
-  [BlendMode.plus]: 'lighten',
-  [BlendMode.screen]: 'screen',
-  [BlendMode.overlay]: 'overlay',
-  [BlendMode.darken]: 'darken',
-  [BlendMode.lighten]: 'lighten',
-  [BlendMode.colorDodge]: 'color-dodge',
-  [BlendMode.colorBurn]: 'color-burn',
-  [BlendMode.hardLight]: 'hard-light',
-  [BlendMode.softLight]: 'soft-light',
-  [BlendMode.difference]: 'difference',
-  [BlendMode.exclusion]: 'exclusion',
-  [BlendMode.multiply]: 'multiply',
-  [BlendMode.hue]: 'hue',
-  [BlendMode.saturation]: 'saturation',
-  [BlendMode.color]: 'color',
-  [BlendMode.luminosity]: 'luminosity'
-};
-
-/**
- * IconData - Represents icon metadata
- * Contains codepoint, font family, and display properties
- */
-class IconData {
-  constructor({
-    codePoint = 0,
-    fontFamily = 'Material Icons',
-    fontPackage = null,
-    matchTextDirection = false,
-    fontFamilyFallback = null
-  } = {}) {
-    this.codePoint = codePoint;
-    this.fontFamily = fontFamily;
-    this.fontPackage = fontPackage;
-    this.matchTextDirection = matchTextDirection;
-    this.fontFamilyFallback = Array.isArray(fontFamilyFallback) ? fontFamilyFallback : null;
-  }
-
-  getCharacter() {
-    return String.fromCharCode(this.codePoint);
-  }
-
-  toString() {
-    const hex = this.codePoint.toString(16).toUpperCase().padStart(5, '0');
-    return `IconData(U+${hex})`;
-  }
-
-  equals(other) {
-    if (!other || !(other instanceof IconData)) {
-      return false;
-    }
-    return (
-      this.codePoint === other.codePoint &&
-      this.fontFamily === other.fontFamily &&
-      this.fontPackage === other.fontPackage &&
-      this.matchTextDirection === other.matchTextDirection &&
-      this._arrayEquals(this.fontFamilyFallback, other.fontFamilyFallback)
-    );
-  }
-
-  _arrayEquals(arr1, arr2) {
-    if (!arr1 && !arr2) return true;
-    if (!arr1 || !arr2) return false;
-    if (arr1.length !== arr2.length) return false;
-    return arr1.every((val, idx) => val === arr2[idx]);
-  }
-
-  hashCode() {
-    let hash = this.codePoint;
-    hash = ((hash << 5) - hash) + (this.fontFamily ? this.fontFamily.charCodeAt(0) : 0);
-    hash = ((hash << 5) - hash) + (this.matchTextDirection ? 1 : 0);
-    if (this.fontFamilyFallback) {
-      this.fontFamilyFallback.forEach(f => {
-        hash = ((hash << 5) - hash) + (f ? f.charCodeAt(0) : 0);
-      });
-    }
-    return hash;
-  }
-}
-
-/**
- * IconThemeData - Theme configuration for icons
- * Provides default values for icon properties
- */
-class IconThemeData {
-  constructor({
-    color = null,
-    opacity = 1.0,
-    size = DEFAULT_ICON_SIZE,
-    fill = null,
-    weight = null,
-    grade = null,
-    opticalSize = null,
-    shadows = null,
-    applyTextScaling = false
-  } = {}) {
-    this.color = color;
-    this.opacity = opacity;
-    this.size = size;
-    this.fill = fill;
-    this.weight = weight;
-    this.grade = grade;
-    this.opticalSize = opticalSize;
-    this.shadows = shadows;
-    this.applyTextScaling = applyTextScaling;
-  }
-
-  copyWith({
-    color,
-    opacity,
-    size,
-    fill,
-    weight,
-    grade,
-    opticalSize,
-    shadows,
-    applyTextScaling
-  } = {}) {
-    return new IconThemeData({
-      color: color !== undefined ? color : this.color,
-      opacity: opacity !== undefined ? opacity : this.opacity,
-      size: size !== undefined ? size : this.size,
-      fill: fill !== undefined ? fill : this.fill,
-      weight: weight !== undefined ? weight : this.weight,
-      grade: grade !== undefined ? grade : this.grade,
-      opticalSize: opticalSize !== undefined ? opticalSize : this.opticalSize,
-      shadows: shadows !== undefined ? shadows : this.shadows,
-      applyTextScaling: applyTextScaling !== undefined ? applyTextScaling : this.applyTextScaling
-    });
-  }
-}
-
-/**
- * Icon - StatelessWidget for rendering icons
- * Supports Material Design icons and custom icon fonts
- */
-class Icon extends StatelessWidget {
-  constructor(iconOrOptions, options = {}) {
-    let _icon = null;
-    let _opts = {};
-
-    if (iconOrOptions && (iconOrOptions.constructor?.name === 'IconData' || iconOrOptions.codePoint !== undefined)) {
-      _icon = iconOrOptions;
-      _opts = options;
-    } else {
-      _opts = iconOrOptions || {};
-      _icon = _opts.icon;
-    }
-
-    const {
-      key = null,
-      size = null,
-      fill = null,
-      weight = null,
-      grade = null,
-      opticalSize = null,
-      color = null,
-      shadows = null,
-      semanticLabel = null,
-      textDirection = null,
-      applyTextScaling = null,
-      blendMode = null,
-      fontWeight = null
-    } = _opts;
-    super(key);
-
-    // Assertions
-    if (fill !== null && (fill < 0.0 || fill > 1.0)) {
-      throw new Error('fill must be between 0.0 and 1.0');
-    }
-    if (weight !== null && weight <= 0.0) {
-      throw new Error('weight must be greater than 0.0');
-    }
-    if (opticalSize !== null && opticalSize <= 0.0) {
-      throw new Error('opticalSize must be greater than 0.0');
-    }
-
-    this.icon = _icon;
-    this.size = size;
-    this.fill = fill;
-    this.weight = weight;
-    this.grade = grade;
-    this.opticalSize = opticalSize;
-    this.color = color;
-    this.shadows = shadows;
-    this.semanticLabel = semanticLabel;
-    this.textDirection = textDirection;
-    this.applyTextScaling = applyTextScaling;
-    this.blendMode = blendMode || BlendMode.srcOver;
-    this.fontWeight = fontWeight;
-
-    this._injectFont();
-  }
-
-  _injectFont() {
-    if (typeof document === 'undefined') return;
-
-    // Check if Material Icons is already loaded
-    if (document.getElementById('flutterjs-material-icons')) return;
-
-    const link = document.createElement('link');
-    link.id = 'flutterjs-material-icons';
-    link.rel = 'stylesheet';
-    link.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
-    document.head.appendChild(link);
-  }
-
-  build(context) {
-    // Ensure Material Icons font is injected on client-side rendering
-    this._injectFont();
-
-    // Get resolved text direction
-    const textDirection = this.textDirection || this._getTextDirection(context);
-
-    // Get icon theme from context
-    const iconTheme = this._getIconTheme(context) || new IconThemeData();
-
-    // Determine if text scaling should be applied
-    const applyTextScaling = this.applyTextScaling ?? iconTheme.applyTextScaling ?? false;
-
-    // Calculate icon size
-    const tentativeIconSize = this.size ?? iconTheme.size ?? DEFAULT_ICON_SIZE;
-    const iconSize = applyTextScaling
-      ? this._scaleTextSize(tentativeIconSize, context)
-      : tentativeIconSize;
-
-    // Resolve icon properties from theme
-    const iconFill = this.fill ?? iconTheme.fill;
-    const iconWeight = this.weight ?? iconTheme.weight;
-    const iconGrade = this.grade ?? iconTheme.grade;
-    const iconOpticalSize = this.opticalSize ?? iconTheme.opticalSize;
-    const iconShadows = this.shadows ?? iconTheme.shadows;
-
-    const icon = this.icon;
-
-    // Handle null icon - use duck typing instead of instanceof for bundled code compatibility
-    if (!icon || (icon.codePoint === undefined && !(icon instanceof IconData))) {
-      return this._buildEmptyIcon(iconSize);
-    }
-
-    // Calculate color with opacity
-    const iconOpacity = iconTheme.opacity ?? 1.0;
-    let iconColor = this.color ?? iconTheme.color ?? '#000000';
-
-    if (iconOpacity !== 1.0) {
-      iconColor = this._applyOpacity(iconColor, iconOpacity);
-    }
-
-    // Build font variations for advanced typography
-    const fontVariations = this._buildFontVariations(
-      iconFill,
-      iconWeight,
-      iconGrade,
-      iconOpticalSize
-    );
-
-    // Build inline styles
-    const inlineStyles = this._buildInlineStyles({
-      color: iconColor,
-      fontSize: iconSize,
-      fontFamily: icon.fontFamily,
-      fontWeight: this.fontWeight,
-      fontFamilyFallback: icon.fontFamilyFallback,
-      shadows: iconShadows,
-      fontVariations,
-      blendMode: this.blendMode,
-      textDirection
-    });
-
-    // Build icon element
-    let iconElement = this._buildIconElement(icon, inlineStyles);
-
-    // Apply text direction transform if needed
-    if (icon.matchTextDirection && textDirection === TextDirection.rtl) {
-      iconElement = this._mirrorIcon(iconElement, iconSize);
-    }
-
-    // Wrap with semantics
-    const elementId = context?.element?.getElementId?.() || 'icon-' + Math.random().toString(36).substr(2, 9);
-    const widgetPath = context?.element?.getWidgetPath?.() || 'Icon';
-
-    return new VNode({
-      tag: 'span',
-      props: {
-        role: 'img',
-        'aria-label': this.semanticLabel || 'Icon',
-        'data-element-id': elementId,
-        'data-widget-path': widgetPath,
-        'data-widget': 'Icon',
-        'data-icon-codepoint': `U+${icon.codePoint.toString(16).toUpperCase()}`,
-        title: this.semanticLabel || '',
-        style: {
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          width: `${iconSize}px`,
-          height: `${iconSize}px`
-        }
-      },
-      children: [iconElement],
-      key: this.key
-    });
-  }
-
-  _buildEmptyIcon(size) {
-    return new VNode({
-      tag: 'span',
-      props: {
-        style: {
-          display: 'inline-block',
-          width: `${size}px`,
-          height: `${size}px`
-        }
-      }
-    });
-  }
-
-  _buildIconElement(icon, styles) {
-    return new VNode({
-      tag: 'span',
-      props: {
-        className: 'fjs-icon',
-        style: {
-          ...styles,
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          lineHeight: '1.0',
-          whiteSpace: 'nowrap'
-        }
-      },
-      children: [icon.getCharacter()]
-    });
-  }
-
-  _mirrorIcon(iconElement, size) {
-    return new VNode({
-      tag: 'span',
-      props: {
-        style: {
-          display: 'inline-flex',
-          transform: 'scaleX(-1)',
-          transformOrigin: 'center',
-          width: `${size}px`,
-          height: `${size}px`,
-          alignItems: 'center',
-          justifyContent: 'center'
-        }
-      },
-      children: [iconElement]
-    });
-  }
-
-  _buildInlineStyles({
-    color,
-    fontSize,
-    fontFamily,
-    fontWeight,
-    fontFamilyFallback,
-    shadows,
-    fontVariations,
-    blendMode,
-    textDirection
-  }) {
-    const styles = {
-      fontSize: `${fontSize}px`,
-      fontFamily: this._buildFontFamily(fontFamily, fontFamilyFallback),
-      color: color,
-      fontVariationSettings: fontVariations,
-      textShadow: this._buildTextShadow(shadows),
-      mixBlendMode: BLEND_MODE_MAP[blendMode] || 'normal',
-      direction: textDirection === TextDirection.rtl ? 'rtl' : 'ltr',
-      lineHeight: '1.0',
-      height: '1em',
-      userSelect: 'none',
-      WebkitUserSelect: 'none',
-      MozUserSelect: 'none'
-    };
-
-    if (fontWeight) {
-      styles.fontWeight = this._normalizeFontWeight(fontWeight);
-    }
-
-    return styles;
-  }
-
-  _buildFontFamily(primary, fallback) {
-    if (!primary) return "'Material Icons', Arial, sans-serif";
-
-    const families = [primary];
-
-    if (Array.isArray(fallback) && fallback.length > 0) {
-      families.push(...fallback);
-    }
-
-    families.push('Arial', 'sans-serif');
-    return families.map(f => `'${f}'`).join(', ');
-  }
-
-  _buildFontVariations(fill, weight, grade, opticalSize) {
-    const variations = [];
-
-    if (fill !== null && fill !== undefined) {
-      variations.push(`'FILL' ${fill}`);
-    }
-    if (weight !== null && weight !== undefined) {
-      variations.push(`'wght' ${weight}`);
-    }
-    if (grade !== null && grade !== undefined) {
-      variations.push(`'GRAD' ${grade}`);
-    }
-    if (opticalSize !== null && opticalSize !== undefined) {
-      variations.push(`'opsz' ${opticalSize}`);
-    }
-
-    return variations.length > 0 ? variations.join(', ') : 'normal';
-  }
-
-  _buildTextShadow(shadows) {
-    if (!shadows || !Array.isArray(shadows)) {
-      return 'none';
-    }
-
-    return shadows
-      .map(shadow => {
-        const offsetX = shadow.offsetX ?? 0;
-        const offsetY = shadow.offsetY ?? 0;
-        const blurRadius = shadow.blurRadius ?? 0;
-        const color = shadow.color ?? 'rgba(0, 0, 0, 0.25)';
-        return `${offsetX}px ${offsetY}px ${blurRadius}px ${color}`;
-      })
-      .join(', ');
-  }
-
-  _normalizeFontWeight(weight) {
-    const weightMap = {
-      thin: '100',
-      extralight: '200',
-      light: '300',
-      normal: '400',
-      regular: '400',
-      medium: '500',
-      semibold: '600',
-      bold: '700',
-      extrabold: '800',
-      black: '900'
-    };
-
-    if (typeof weight === 'string') {
-      return weightMap[weight.toLowerCase()] || weight;
-    }
-
-    return String(weight);
-  }
-
-  _applyOpacity(color, opacity) {
-    if (!color) return color;
-
-    // Handle hex color
-    if (color.startsWith('#')) {
-      const hex = color.slice(1);
-      const r = parseInt(hex.substring(0, 2), 16);
-      const g = parseInt(hex.substring(2, 4), 16);
-      const b = parseInt(hex.substring(4, 6), 16);
-      return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-    }
-
-    // Handle rgb/rgba
-    if (color.startsWith('rgb')) {
-      return color.replace(/[\d.]+\)/, `${opacity})`);
-    }
-
-    return color;
-  }
-
-  _getTextDirection(context) {
-    // Try to get from document or context
-    if (typeof document !== 'undefined') {
-      const dir = document.documentElement.dir || document.dir || 'ltr';
-      return dir === 'rtl' ? TextDirection.rtl : TextDirection.ltr;
-    }
-    return TextDirection.ltr;
-  }
-
-  _getIconTheme(context) {
-    // This would typically come from theme context
-    // For now, return default
-    return new IconThemeData();
-  }
-
-  _scaleTextSize(size, context) {
-    // Apply text scaling factor from context (typically 1.0 - 2.0)
-    // For now, return unchanged
-    return size;
-  }
-
-  debugFillProperties(properties) {
-    super.debugFillProperties(properties);
-    properties.push({ name: 'icon', value: this.icon });
-    properties.push({ name: 'size', value: this.size });
-    properties.push({ name: 'fill', value: this.fill });
-    properties.push({ name: 'weight', value: this.weight });
-    properties.push({ name: 'grade', value: this.grade });
-    properties.push({ name: 'opticalSize', value: this.opticalSize });
-    properties.push({ name: 'color', value: this.color });
-    properties.push({ name: 'blendMode', value: this.blendMode });
-    properties.push({ name: 'semanticLabel', value: this.semanticLabel });
-    if (this.shadows) {
-      properties.push({ name: 'shadows', value: this.shadows });
-    }
-  }
-}
-
-/**
- * Material Design Icons - Pre-defined icon data
- */
-const Icons = {
-  // Common icons
-  home: new IconData({ codePoint: 0xe88a, fontFamily: 'Material Icons' }),
-  settings: new IconData({ codePoint: 0xe8b8, fontFamily: 'Material Icons' }),
-  search: new IconData({ codePoint: 0xe8b6, fontFamily: 'Material Icons' }),
-  favorite: new IconData({ codePoint: 0xe87e, fontFamily: 'Material Icons' }),
-  favoriteBorder: new IconData({ codePoint: 0xe8cb, fontFamily: 'Material Icons' }),
-  star: new IconData({ codePoint: 0xe838, fontFamily: 'Material Icons' }),
-  starBorder: new IconData({ codePoint: 0xe83b, fontFamily: 'Material Icons' }),
-  close: new IconData({ codePoint: 0xe5cd, fontFamily: 'Material Icons' }),
-  menu: new IconData({ codePoint: 0xe5d2, fontFamily: 'Material Icons' }),
-  arrowBack: new IconData({ codePoint: 0xe5e0, fontFamily: 'Material Icons' }),
-  arrowForward: new IconData({ codePoint: 0xe5e1, fontFamily: 'Material Icons' }),
-  add: new IconData({ codePoint: 0xe145, fontFamily: 'Material Icons' }),
-  delete: new IconData({ codePoint: 0xe872, fontFamily: 'Material Icons' }),
-  edit: new IconData({ codePoint: 0xe3c9, fontFamily: 'Material Icons' }),
-  check: new IconData({ codePoint: 0xe5ca, fontFamily: 'Material Icons' }),
-  checkCircle: new IconData({ codePoint: 0xe86c, fontFamily: 'Material Icons' }),
-  error: new IconData({ codePoint: 0xe783, fontFamily: 'Material Icons' }),
-  errorOutline: new IconData({ codePoint: 0xe001, fontFamily: 'Material Icons' }),
-  info: new IconData({ codePoint: 0xe88f, fontFamily: 'Material Icons' }),
-  warning: new IconData({ codePoint: 0xe002, fontFamily: 'Material Icons' }),
-  download: new IconData({ codePoint: 0xe2c4, fontFamily: 'Material Icons' }),
-  upload: new IconData({ codePoint: 0xe2c6, fontFamily: 'Material Icons' }),
-  refresh: new IconData({ codePoint: 0xe5d5, fontFamily: 'Material Icons' }),
-  moreVert: new IconData({ codePoint: 0xe5d4, fontFamily: 'Material Icons' }),
-  moreHoriz: new IconData({ codePoint: 0xe5d3, fontFamily: 'Material Icons' })
-};
-
-export { Icon, IconData, IconThemeData, Icons };
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/material/image.js b/packages/flutterjs_engine/package/material/src/material/image.js
deleted file mode 100644
index eaae646a..00000000
--- a/packages/flutterjs_engine/package/material/src/material/image.js
+++ /dev/null
@@ -1,848 +0,0 @@
-
-import { StatefulWidget } from '../core/widget_element.js';
-import { VNode } from '@flutterjs/vdom/vnode';
-import { BoxFit, BlendMode, FilterQuality, Clip } from '../utils/utils.js';
-
-const IMAGE_SOURCE_TYPES = {
-  network: 'network',
-  asset: 'asset',
-  memory: 'memory',
-  file: 'file'
-};
-
-const BLEND_MODE_MAP = {
-  [BlendMode.normal]: 'normal',
-  [BlendMode.multiply]: 'multiply',
-  [BlendMode.screen]: 'screen',
-  [BlendMode.overlay]: 'overlay',
-  [BlendMode.darken]: 'darken',
-  [BlendMode.lighten]: 'lighten',
-  [BlendMode.colorDodge]: 'color-dodge',
-  [BlendMode.colorBurn]: 'color-burn',
-  [BlendMode.hardLight]: 'hard-light',
-  [BlendMode.softLight]: 'soft-light',
-  [BlendMode.difference]: 'difference',
-  [BlendMode.exclusion]: 'exclusion',
-  [BlendMode.hue]: 'hue',
-  [BlendMode.saturation]: 'saturation',
-  [BlendMode.color]: 'color',
-  [BlendMode.luminosity]: 'luminosity'
-};
-
-const BOX_FIT_MAP = {
-  [BoxFit.fill]: 'fill',
-  [BoxFit.contain]: 'contain',
-  [BoxFit.cover]: 'cover',
-  [BoxFit.fitWidth]: 'scale-down',
-  [BoxFit.fitHeight]: 'scale-down',
-  [BoxFit.none]: 'none',
-  [BoxFit.scaleDown]: 'scale-down'
-};
-
-const CLIP_BEHAVIOR_MAP = {
-  none: 'visible',
-  hardEdge: 'hidden',
-  antiAlias: 'hidden',
-  antiAliasWithSaveLayer: 'hidden'
-};
-
-/**
- * ImageStreamCompleterHandle - Manages stream lifecycle and memory
- */
-class ImageStreamCompleterHandle {
-  constructor(completer) {
-    this.completer = completer;
-    this.isAlive = true;
-  }
-
-  dispose() {
-    this.isAlive = false;
-  }
-
-  keepAlive() {
-    return this;
-  }
-}
-
-/**
- * ImageStream - Handles image loading state and listeners
- */
-class ImageStream {
-  constructor(imageProvider) {
-    this.imageProvider = imageProvider;
-    this.listeners = new Set();
-    this.imageInfo = null;
-    this.error = null;
-    this.completer = null;
-  }
-
-  addListener(listener) {
-    this.listeners.add(listener);
-    if (this.imageInfo) {
-      listener.onImage(this.imageInfo);
-    }
-  }
-
-  removeListener(listener) {
-    this.listeners.delete(listener);
-  }
-
-  notifyListeners(imageInfo) {
-    this.imageInfo = imageInfo;
-    this.listeners.forEach(listener => {
-      if (listener.onImage) listener.onImage(imageInfo);
-    });
-  }
-
-  notifyError(error, stackTrace) {
-    this.error = error;
-    this.listeners.forEach(listener => {
-      if (listener.onError) listener.onError(error, stackTrace);
-    });
-  }
-
-  notifyChunk(event) {
-    this.listeners.forEach(listener => {
-      if (listener.onChunk) listener.onChunk(event);
-    });
-  }
-}
-
-/**
- * ImageChunkEvent - Tracks image loading progress
- */
-class ImageChunkEvent {
-  constructor({ cumulativeBytesLoaded = 0, expectedTotalBytes = null } = {}) {
-    this.cumulativeBytesLoaded = cumulativeBytesLoaded;
-    this.expectedTotalBytes = expectedTotalBytes;
-  }
-
-  get progress() {
-    if (!this.expectedTotalBytes) return 0;
-    return this.cumulativeBytesLoaded / this.expectedTotalBytes;
-  }
-}
-
-/**
- * ImageProvider - Base class for different image sources
- */
-class ImageProvider {
-  constructor(sourceType = IMAGE_SOURCE_TYPES.network) {
-    this.sourceType = sourceType;
-    this.key = Math.random().toString(36).substr(2, 9);
-  }
-
-  resolve(config = {}) {
-    return new ImageStream(this);
-  }
-
-  async load() {
-    throw new Error('load() must be implemented');
-  }
-
-  getUrl() {
-    throw new Error('getUrl() must be implemented');
-  }
-}
-
-/**
- * NetworkImage - Load images from network URLs with progress tracking
- */
-class NetworkImage extends ImageProvider {
-  constructor(src, { scale = 1.0, headers = null, timeout = 10000, onProgress = null } = {}) {
-    super(IMAGE_SOURCE_TYPES.network);
-    this.src = src;
-    this.scale = scale;
-    this.headers = headers || {};
-    this.timeout = timeout;
-    this.onProgress = onProgress;
-  }
-
-  resolve(config = {}) {
-    const stream = new ImageStream(this);
-    this._loadWithStream(stream, config);
-    return stream;
-  }
-
-  async _loadWithStream(stream, config) {
-    try {
-      const result = await this._loadImage();
-      stream.notifyListeners({
-        image: result.element,
-        width: result.width,
-        height: result.height,
-        scale: this.scale,
-        src: this.src
-      });
-    } catch (error) {
-      stream.notifyError(error, new Error().stack);
-    }
-  }
-
-  _loadImage() {
-    return new Promise((resolve, reject) => {
-      const timer = setTimeout(() => {
-        reject(new Error(`Network image timeout: ${this.src}`));
-      }, this.timeout);
-
-      const xhr = new XMLHttpRequest();
-      
-      xhr.addEventListener('progress', (e) => {
-        if (e.lengthComputable && this.onProgress) {
-          this.onProgress({
-            cumulativeBytesLoaded: e.loaded,
-            expectedTotalBytes: e.total
-          });
-        }
-      });
-
-      xhr.addEventListener('load', () => {
-        clearTimeout(timer);
-        if (xhr.status >= 200 && xhr.status < 300) {
-          const blob = xhr.response;
-          const img = new Image();
-
-          img.onload = () => {
-            resolve({
-              element: img,
-              width: img.naturalWidth,
-              height: img.naturalHeight,
-              scale: this.scale
-            });
-          };
-
-          img.onerror = () => {
-            reject(new Error(`Failed to load network image: ${this.src}`));
-          };
-
-          img.src = URL.createObjectURL(blob);
-        } else {
-          reject(new Error(`HTTP ${xhr.status}: ${this.src}`));
-        }
-      });
-
-      xhr.addEventListener('error', () => {
-        clearTimeout(timer);
-        reject(new Error(`Network error loading: ${this.src}`));
-      });
-
-      xhr.responseType = 'blob';
-      xhr.open('GET', this.src, true);
-      
-      Object.entries(this.headers).forEach(([key, value]) => {
-        xhr.setRequestHeader(key, value);
-      });
-
-      xhr.send();
-    });
-  }
-
-  async load() {
-    return this._loadImage();
-  }
-
-  getUrl() {
-    return this.src;
-  }
-}
-
-/**
- * AssetImage - Load images from project assets
- */
-class AssetImage extends ImageProvider {
-  constructor(assetPath, { packages = null, scale = 1.0 } = {}) {
-    super(IMAGE_SOURCE_TYPES.asset);
-    this.assetPath = assetPath;
-    this.packages = packages;
-    this.scale = scale;
-    this.key = `asset:${packages}:${assetPath}:${scale}`;
-  }
-
-  resolve(config = {}) {
-    const stream = new ImageStream(this);
-    this._loadWithStream(stream, config);
-    return stream;
-  }
-
-  async _loadWithStream(stream, config) {
-    try {
-      const result = await this.load();
-      stream.notifyListeners({
-        image: result.element,
-        width: result.width,
-        height: result.height,
-        scale: this.scale,
-        src: result.src
-      });
-    } catch (error) {
-      stream.notifyError(error, new Error().stack);
-    }
-  }
-
-  async load() {
-    return new Promise((resolve, reject) => {
-      const assetUrl = this._resolveAssetPath();
-      const img = new Image();
-
-      img.onload = () => {
-        resolve({
-          element: img,
-          src: assetUrl,
-          width: img.naturalWidth,
-          height: img.naturalHeight,
-          scale: this.scale
-        });
-      };
-
-      img.onerror = () => {
-        reject(new Error(`Failed to load asset image: ${this.assetPath}`));
-      };
-
-      img.src = assetUrl;
-    });
-  }
-
-  _resolveAssetPath() {
-    const basePath = this.packages ? `/packages/${this.packages}` : '/assets';
-    return `${basePath}/${this.assetPath}`;
-  }
-
-  getUrl() {
-    return this._resolveAssetPath();
-  }
-}
-
-/**
- * MemoryImage - Load images from Uint8Array or base64 encoded data
- */
-class MemoryImage extends ImageProvider {
-  constructor(bytes, { scale = 1.0 } = {}) {
-    super(IMAGE_SOURCE_TYPES.memory);
-    this.bytes = bytes;
-    this.scale = scale;
-    this.key = `memory:${this.bytes.length}:${scale}`;
-  }
-
-  resolve(config = {}) {
-    const stream = new ImageStream(this);
-    this._loadWithStream(stream, config);
-    return stream;
-  }
-
-  async _loadWithStream(stream, config) {
-    try {
-      const result = await this.load();
-      stream.notifyListeners({
-        image: result.element,
-        width: result.width,
-        height: result.height,
-        scale: this.scale,
-        src: result.src
-      });
-    } catch (error) {
-      stream.notifyError(error, new Error().stack);
-    }
-  }
-
-  async load() {
-    return new Promise((resolve, reject) => {
-      try {
-        let dataUrl;
-
-        if (this.bytes instanceof Uint8Array) {
-          const binary = String.fromCharCode.apply(null, this.bytes);
-          dataUrl = 'data:image/png;base64,' + btoa(binary);
-        } else if (typeof this.bytes === 'string') {
-          dataUrl = this.bytes.startsWith('data:') ? this.bytes : `data:image/png;base64,${this.bytes}`;
-        } else {
-          throw new Error('Invalid image data');
-        }
-
-        const img = new Image();
-        img.onload = () => {
-          resolve({
-            element: img,
-            src: dataUrl,
-            width: img.naturalWidth,
-            height: img.naturalHeight,
-            scale: this.scale
-          });
-        };
-
-        img.onerror = () => {
-          reject(new Error('Failed to load memory image'));
-        };
-
-        img.src = dataUrl;
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
-  getUrl() {
-    if (this.bytes instanceof Uint8Array) {
-      const binary = String.fromCharCode.apply(null, this.bytes);
-      return 'data:image/png;base64,' + btoa(binary);
-    }
-    return this.bytes;
-  }
-}
-
-/**
- * FileImage - Load images from file system (Node.js environment)
- */
-class FileImage extends ImageProvider {
-  constructor(filePath, { scale = 1.0 } = {}) {
-    super(IMAGE_SOURCE_TYPES.file);
-    this.filePath = filePath;
-    this.scale = scale;
-  }
-
-  async load() {
-    if (typeof window !== 'undefined') {
-      throw new Error('FileImage is not supported in web environments. Use Image.asset or Image.network instead.');
-    }
-    throw new Error('FileImage requires Node.js file system implementation');
-  }
-
-  getUrl() {
-    return this.filePath;
-  }
-}
-
-/**
- * Image - StatefulWidget for rendering images with various sources
- * Mirrors Flutter's Image widget API and behavior
- */
-class Image extends StatefulWidget {
-  constructor({
-    key = null,
-    image = null,
-    width = null,
-    height = null,
-    color = null,
-    opacity = null,
-    colorBlendMode = BlendMode.normal,
-    fit = BoxFit.contain,
-    alignment = 'center',
-    repeat = 'no-repeat',
-    centerSlice = null,
-    matchTextDirection = false,
-    gaplessPlayback = false,
-    isAntiAlias = false,
-    filterQuality = FilterQuality.medium,
-    frameBuilder = null,
-    loadingBuilder = null,
-    errorBuilder = null,
-    semanticLabel = null,
-    excludeFromSemantics = false,
-    clipBehavior = Clip.hardEdge
-  } = {}) {
-    super(key);
-    
-    if (!image || !(image instanceof ImageProvider)) {
-      throw new Error('Image requires a valid ImageProvider');
-    }
-
-    this.image = image;
-    this.width = width;
-    this.height = height;
-    this.color = color;
-    this.opacity = opacity;
-    this.colorBlendMode = colorBlendMode;
-    this.fit = fit;
-    this.alignment = alignment;
-    this.repeat = repeat;
-    this.centerSlice = centerSlice;
-    this.matchTextDirection = matchTextDirection;
-    this.gaplessPlayback = gaplessPlayback;
-    this.isAntiAlias = isAntiAlias;
-    this.filterQuality = filterQuality;
-    this.frameBuilder = frameBuilder;
-    this.loadingBuilder = loadingBuilder;
-    this.errorBuilder = errorBuilder;
-    this.semanticLabel = semanticLabel;
-    this.excludeFromSemantics = excludeFromSemantics;
-    this.clipBehavior = clipBehavior;
-  }
-
-  static network(src, {
-    key = null,
-    scale = 1.0,
-    headers = null,
-    cacheWidth = null,
-    cacheHeight = null,
-    ...otherOptions
-  } = {}) {
-    const provider = new NetworkImage(src, { scale, headers });
-    return new Image({ key, image: provider, ...otherOptions });
-  }
-
-  static asset(assetPath, {
-    key = null,
-    scale = null,
-    packages = null,
-    cacheWidth = null,
-    cacheHeight = null,
-    ...otherOptions
-  } = {}) {
-    const provider = new AssetImage(assetPath, { packages, scale: scale || 1.0 });
-    return new Image({ key, image: provider, ...otherOptions });
-  }
-
-  static memory(bytes, {
-    key = null,
-    scale = 1.0,
-    cacheWidth = null,
-    cacheHeight = null,
-    ...otherOptions
-  } = {}) {
-    const provider = new MemoryImage(bytes, { scale });
-    return new Image({ key, image: provider, ...otherOptions });
-  }
-
-  static file(filePath, {
-    key = null,
-    scale = 1.0,
-    cacheWidth = null,
-    cacheHeight = null,
-    ...otherOptions
-  } = {}) {
-    if (typeof window !== 'undefined') {
-      throw new Error('Image.file is not supported on Flutter Web. Consider using either Image.asset or Image.network instead.');
-    }
-    const provider = new FileImage(filePath, { scale });
-    return new Image({ key, image: provider, ...otherOptions });
-  }
-
-  createState() {
-    return new _ImageState();
-  }
-
-  debugFillProperties(properties) {
-    super.debugFillProperties(properties);
-    properties.push({ name: 'image', value: this.image });
-    properties.push({ name: 'width', value: this.width });
-    properties.push({ name: 'height', value: this.height });
-    properties.push({ name: 'color', value: this.color });
-    properties.push({ name: 'colorBlendMode', value: this.colorBlendMode });
-    properties.push({ name: 'fit', value: this.fit });
-    properties.push({ name: 'alignment', value: this.alignment });
-    properties.push({ name: 'gaplessPlayback', value: this.gaplessPlayback });
-    properties.push({ name: 'filterQuality', value: this.filterQuality });
-  }
-}
-
-/**
- * _ImageState - State management for Image widget
- * Handles loading, caching, error recovery, and lifecycle
- */
-class _ImageState {
-  constructor(widget) {
-    this.widget = widget;
-    this.imageStream = null;
-    this.imageInfo = null;
-    this.loadingProgress = null;
-    this.isListeningToStream = false;
-    this.error = null;
-    this.errorStack = null;
-    this.frameNumber = null;
-    this.wasSynchronouslyLoaded = false;
-    this.completerHandle = null;
-    this.lastImageProvider = null;
-  }
-
-  initState() {
-    // Initialize state
-  }
-
-  didChangeDependencies() {
-    this._resolveImage();
-    this._listenToStream();
-  }
-
-  didUpdateWidget(oldWidget) {
-    if (this.isListeningToStream && 
-        (this.widget.loadingBuilder == null) !== (oldWidget.loadingBuilder == null)) {
-      this._updateStreamListener();
-    }
-
-    if (this.widget.image !== oldWidget.image) {
-      this._resolveImage();
-    }
-  }
-
-  dispose() {
-    this._stopListeningToStream();
-    this.completerHandle?.dispose();
-  }
-
-  _resolveImage() {
-    const newStream = this.widget.image.resolve({});
-
-    if (newStream.imageProvider.key !== this.lastImageProvider?.key) {
-      this._updateSourceStream(newStream);
-      this.lastImageProvider = newStream.imageProvider;
-    }
-  }
-
-  _updateSourceStream(newStream) {
-    if (this.imageStream?.imageProvider.key === newStream.imageProvider.key) {
-      return;
-    }
-
-    if (this.isListeningToStream) {
-      this._removeImageStreamListener();
-    }
-
-    if (!this.widget.gaplessPlayback) {
-      this._replaceImage(null);
-    }
-
-    this.loadingProgress = null;
-    this.frameNumber = null;
-    this.wasSynchronouslyLoaded = false;
-    this.imageStream = newStream;
-
-    if (this.isListeningToStream) {
-      this._addImageStreamListener();
-    }
-  }
-
-  _listenToStream() {
-    if (this.isListeningToStream) return;
-
-    this._addImageStreamListener();
-    this.isListeningToStream = true;
-  }
-
-  _stopListeningToStream() {
-    if (!this.isListeningToStream) return;
-
-    if (this.completerHandle == null && this.imageStream?.completer) {
-      this.completerHandle = this.imageStream.completer.keepAlive();
-    }
-
-    this._removeImageStreamListener();
-    this.isListeningToStream = false;
-  }
-
-  _addImageStreamListener() {
-    this.imageStream?.addListener({
-      onImage: (imageInfo) => this._handleImageFrame(imageInfo),
-      onError: (error, stackTrace) => this._handleImageError(error, stackTrace),
-      onChunk: (event) => this._handleImageChunk(event)
-    });
-  }
-
-  _removeImageStreamListener() {
-    this.imageStream?.removeListener({
-      onImage: (imageInfo) => this._handleImageFrame(imageInfo),
-      onError: (error, stackTrace) => this._handleImageError(error, stackTrace),
-      onChunk: (event) => this._handleImageChunk(event)
-    });
-  }
-
-  _updateStreamListener() {
-    this._removeImageStreamListener();
-    this._addImageStreamListener();
-  }
-
-  _handleImageFrame(imageInfo) {
-    this.imageInfo = imageInfo;
-    this.loadingProgress = null;
-    this.error = null;
-    this.errorStack = null;
-    this.frameNumber = (this.frameNumber || 0) + 1;
-    this.wasSynchronouslyLoaded = true;
-  }
-
-  _handleImageChunk(event) {
-    if (this.widget.loadingBuilder) {
-      this.loadingProgress = event;
-    }
-  }
-
-  _handleImageError(error, stackTrace) {
-    this.error = error;
-    this.errorStack = stackTrace;
-    if (this.widget.errorBuilder) {
-      // Trigger rebuild through parent context
-    }
-  }
-
-  _replaceImage(imageInfo) {
-    this.imageInfo = imageInfo;
-  }
-
-  build(context) {
-    const elementId = context.element.getElementId();
-    const widgetPath = context.element.getWidgetPath();
-    const inlineStyles = this._getInlineStyles();
-
-    // Handle error state
-    if (this.error) {
-      if (this.widget.errorBuilder) {
-        return this.widget.errorBuilder(context, this.error, this.errorStack);
-      }
-      return new VNode({
-        tag: 'div',
-        props: {
-          className: 'fjs-image-error',
-          style: {
-            ...inlineStyles,
-            backgroundColor: '#f0f0f0',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: '#999',
-            overflow: CLIP_BEHAVIOR_MAP[this.widget.clipBehavior] || 'hidden'
-          },
-          'data-element-id': elementId,
-          'data-widget-path': widgetPath,
-          title: this.error.message
-        },
-        children: ['⚠ Image failed to load']
-      });
-    }
-
-    // Handle loading state
-    if (!this.imageInfo && this.widget.loadingBuilder) {
-      return this.widget.loadingBuilder(context, null, this.loadingProgress);
-    }
-
-    let result = this._buildImageElement(elementId, widgetPath, inlineStyles);
-
-    // Apply frame builder
-    if (this.widget.frameBuilder) {
-      result = this.widget.frameBuilder(
-        context,
-        result,
-        this.frameNumber,
-        this.wasSynchronouslyLoaded
-      );
-    }
-
-    // Apply loading builder wrapper
-    if (this.widget.loadingBuilder) {
-      result = this.widget.loadingBuilder(context, result, this.loadingProgress);
-    }
-
-    // Apply semantics
-    if (!this.widget.excludeFromSemantics) {
-      result = new VNode({
-        tag: 'figure',
-        props: {
-          role: 'img',
-          'aria-label': this.widget.semanticLabel || 'Image',
-          style: { margin: 0 }
-        },
-        children: [result]
-      });
-    }
-
-    return result;
-  }
-
-  _buildImageElement(elementId, widgetPath, inlineStyles) {
-    const imgProps = {
-      className: 'fjs-image',
-      style: inlineStyles,
-      'data-element-id': elementId,
-      'data-widget-path': widgetPath,
-      'data-widget': 'Image',
-      'data-source-type': this.widget.image.sourceType,
-      alt: this.widget.semanticLabel || 'Image'
-    };
-
-    if (this.imageInfo) {
-      imgProps.src = this.imageInfo.src;
-    }
-
-    return new VNode({
-      tag: 'img',
-      props: imgProps,
-      key: this.widget.key
-    });
-  }
-
-  _getInlineStyles() {
-    const styles = {
-      width: this.widget.width ? `${this.widget.width}px` : 'auto',
-      height: this.widget.height ? `${this.widget.height}px` : 'auto',
-      objectFit: BOX_FIT_MAP[this.widget.fit] || 'contain',
-      objectPosition: this._mapAlignment(),
-      backgroundRepeat: this.widget.repeat,
-      overflow: CLIP_BEHAVIOR_MAP[this.widget.clipBehavior] || 'hidden',
-      filter: this._buildFilterStyles()
-    };
-
-    // Apply color blend mode
-    if (this.widget.color && this.widget.colorBlendMode) {
-      styles.mixBlendMode = BLEND_MODE_MAP[this.widget.colorBlendMode] || 'normal';
-      // Create color overlay
-      styles.backgroundColor = this.widget.color;
-      styles.backgroundBlendMode = BLEND_MODE_MAP[this.widget.colorBlendMode];
-    }
-
-    // Apply opacity
-    if (this.widget.opacity !== null && this.widget.opacity !== undefined) {
-      styles.opacity = this.widget.opacity;
-    }
-
-    // Apply anti-alias
-    if (this.widget.isAntiAlias) {
-      styles.imageRendering = 'smooth';
-    } else {
-      styles.imageRendering = 'pixelated';
-    }
-
-    // Text direction
-    if (this.widget.matchTextDirection) {
-      styles.direction = document.dir || 'ltr';
-    }
-
-    return styles;
-  }
-
-  _mapAlignment() {
-    const alignmentMap = {
-      'center': 'center',
-      'topLeft': 'top left',
-      'topCenter': 'top center',
-      'topRight': 'top right',
-      'centerLeft': 'center left',
-      'centerRight': 'center right',
-      'bottomLeft': 'bottom left',
-      'bottomCenter': 'bottom center',
-      'bottomRight': 'bottom right'
-    };
-    return alignmentMap[this.widget.alignment] || 'center';
-  }
-
-  _buildFilterStyles() {
-    const filters = [];
-
-    if (this.widget.filterQuality === FilterQuality.high) {
-      filters.push('contrast(1.1) saturate(1.05)');
-    } else if (this.widget.filterQuality === FilterQuality.low) {
-      filters.push('blur(0.5px)');
-    }
-
-    return filters.length > 0 ? filters.join(' ') : 'none';
-  }
-}
-
-export { 
-  Image, 
-  ImageProvider, 
-  NetworkImage, 
-  AssetImage, 
-  MemoryImage, 
-  FileImage, 
-  ImageStream,
-  ImageChunkEvent,
-  ImageStreamCompleterHandle,
-  IMAGE_SOURCE_TYPES 
-};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/material/list_view.js b/packages/flutterjs_engine/package/material/src/material/list_view.js
deleted file mode 100644
index b38d79d6..00000000
--- a/packages/flutterjs_engine/package/material/src/material/list_view.js
+++ /dev/null
@@ -1,241 +0,0 @@
-import {
-    StatelessWidget,
-    Widget,
-} from "../core/widget_element.js";
-import { Container } from "./container.js";
-import { Column } from "../widgets/compoment/multi_child_view.js";
-import { EdgeInsets } from "../utils/edge_insets.js";
-
-export class ListView extends StatelessWidget {
-    constructor({
-        key,
-        scrollDirection = "vertical",
-        reverse = false,
-        controller,
-        primary,
-        physics,
-        shrinkWrap = false,
-        padding,
-        itemExtent,
-        prototypeItem,
-        addAutomaticKeepAlives = true,
-        addRepaintBoundaries = true,
-        addSemanticIndexes = true,
-        cacheExtent,
-        children = [],
-        semanticChildCount,
-        dragStartBehavior,
-        keyboardDismissBehavior,
-        restorationId,
-        clipBehavior,
-    } = {}) {
-        super(key);
-        this.key = key;
-        this.scrollDirection = scrollDirection;
-        this.reverse = reverse;
-        this.controller = controller;
-        this.primary = primary;
-        this.physics = physics;
-        this.shrinkWrap = shrinkWrap;
-        this.padding = padding;
-        this.itemExtent = itemExtent;
-        this.prototypeItem = prototypeItem;
-        this.addAutomaticKeepAlives = addAutomaticKeepAlives;
-        this.addRepaintBoundaries = addRepaintBoundaries;
-        this.addSemanticIndexes = addSemanticIndexes;
-        this.cacheExtent = cacheExtent;
-        this.children = children;
-        this.semanticChildCount = semanticChildCount;
-        this.dragStartBehavior = dragStartBehavior;
-        this.keyboardDismissBehavior = keyboardDismissBehavior;
-        this.restorationId = restorationId;
-        this.clipBehavior = clipBehavior;
-    }
-
-    static builder({
-        key,
-        scrollDirection = "vertical",
-        reverse = false,
-        controller,
-        primary,
-        physics,
-        shrinkWrap = false,
-        padding,
-        itemExtent,
-        prototypeItem,
-        addAutomaticKeepAlives = true,
-        addRepaintBoundaries = true,
-        addSemanticIndexes = true,
-        cacheExtent,
-        itemBuilder,
-        itemCount,
-        findChildIndexCallback,
-        dragStartBehavior,
-        keyboardDismissBehavior,
-        restorationId,
-        clipBehavior,
-    } = {}) {
-        const children = [];
-        if (itemCount !== undefined && itemBuilder) {
-            console.log('[ListView.builder] Creating', itemCount, 'children');
-            for (let i = 0; i < itemCount; i++) {
-                // Pass a mock context and index
-                const child = itemBuilder({ type: 'BuildContext' }, i);
-                console.log(`[ListView.builder] Child ${i}:`, child?.constructor?.name, 'has createElement:', typeof child?.createElement);
-                children.push(child);
-            }
-            console.log('[ListView.builder] All children:', children.map(c => c?.constructor?.name));
-        }
-
-        return new ListView({
-            key,
-            scrollDirection,
-            reverse,
-            controller,
-            primary,
-            physics,
-            shrinkWrap,
-            padding,
-            itemExtent,
-            prototypeItem,
-            addAutomaticKeepAlives,
-            addRepaintBoundaries,
-            addSemanticIndexes,
-            cacheExtent,
-            children,
-            semanticChildCount: itemCount,
-            dragStartBehavior,
-            keyboardDismissBehavior,
-            restorationId,
-            clipBehavior,
-        });
-
-        console.log('[ListView.builder] Returning ListView instance:', result.constructor.name, 'extends StatelessWidget:', result instanceof StatelessWidget);
-        return result;
-    }
-
-    static separated({
-        key,
-        scrollDirection = "vertical",
-        reverse = false,
-        controller,
-        primary,
-        physics,
-        shrinkWrap = false,
-        padding,
-        itemBuilder,
-        separatorBuilder,
-        itemCount,
-        addAutomaticKeepAlives = true,
-        addRepaintBoundaries = true,
-        addSemanticIndexes = true,
-        cacheExtent,
-        dragStartBehavior,
-        keyboardDismissBehavior,
-        restorationId,
-        clipBehavior,
-    } = {}) {
-        const children = [];
-        if (itemCount !== undefined && itemBuilder && separatorBuilder) {
-            for (let i = 0; i < itemCount; i++) {
-                children.push(itemBuilder({ type: 'BuildContext' }, i));
-                if (i < itemCount - 1) {
-                    children.push(separatorBuilder({ type: 'BuildContext' }, i));
-                }
-            }
-        }
-
-        return new ListView({
-            key,
-            scrollDirection,
-            reverse,
-            controller,
-            primary,
-            physics,
-            shrinkWrap,
-            padding,
-            addAutomaticKeepAlives,
-            addRepaintBoundaries,
-            addSemanticIndexes,
-            cacheExtent,
-            children,
-            semanticChildCount: itemCount, // Approximation
-            dragStartBehavior,
-            keyboardDismissBehavior,
-            restorationId,
-            clipBehavior,
-        });
-    }
-
-    static custom({
-        key,
-        scrollDirection = "vertical",
-        reverse = false,
-        controller,
-        primary,
-        physics,
-        shrinkWrap = false,
-        padding,
-        itemExtent,
-        prototypeItem,
-        childrenDelegate,
-        cacheExtent,
-        semanticChildCount,
-        dragStartBehavior,
-        keyboardDismissBehavior,
-        restorationId,
-        clipBehavior,
-    } = {}) {
-        // Basic support for SliverChildListDelegate (static list)
-        // Dynamic delegates (SliverChildBuilderDelegate) would need runtime expansion
-        let children = [];
-        if (childrenDelegate && Array.isArray(childrenDelegate.children)) {
-            children = childrenDelegate.children;
-        } else if (childrenDelegate && typeof childrenDelegate.builder === 'function') {
-            // Best effort for builder delegate if count is provided
-            // This mimics the builder constructor logic
-            const count = childrenDelegate.childCount || 0;
-            for (let i = 0; i < count; i++) {
-                children.push(childrenDelegate.builder({ type: 'BuildContext' }, i));
-            }
-        }
-
-        return new ListView({
-            key,
-            scrollDirection,
-            reverse,
-            controller,
-            primary,
-            physics,
-            shrinkWrap,
-            padding,
-            itemExtent,
-            prototypeItem,
-            cacheExtent,
-            children,
-            semanticChildCount: semanticChildCount || children.length,
-            dragStartBehavior,
-            keyboardDismissBehavior,
-            restorationId,
-            clipBehavior,
-        });
-    }
-
-    build(context) {
-        const isHorizontal = this.scrollDirection === "horizontal";
-
-        // Create a scrollable container
-        // Note: Don't pass string CSS values (like '100%') to Container's width/height
-        // as they become invalid BoxConstraints. Use flexbox layout instead.
-        return new Container({
-            padding: this.padding,
-            // Removed width/height - CSS flexbox handles sizing via the parent Column/Flex
-            child: new Column({
-                children: this.children,
-                mainAxisSize: this.shrinkWrap ? "min" : "max",
-                crossAxisAlignment: isHorizontal ? "center" : "stretch",
-                // TODO: Handle 'reverse' by reversing children array or CSS direction
-            })
-        });
-    }
-}
diff --git a/packages/flutterjs_engine/package/material/src/material/material.js b/packages/flutterjs_engine/package/material/src/material/material.js
deleted file mode 100644
index 611e4c61..00000000
--- a/packages/flutterjs_engine/package/material/src/material/material.js
+++ /dev/null
@@ -1,78 +0,0 @@
-export {
-    Color,
-    ColorSwatch,
-    MaterialColor,
-    MaterialAccentColor,
-    Colors
-} from "./color.js";
-
-export {
-    Container,
-    DecoratedBox,
-    DecoratedBoxElement,
-    RenderDecoratedBox,
-    ColoredBox,
-    BoxDecoration,
-    Decoration,
-    DecorationPosition
-} from "./container.js";
-
-export { Icon, IconData, IconThemeData, Icons } from "./icon.js";
-
-export {
-    Scaffold,
-    ScaffoldState,
-    ScaffoldElement,
-    SnackBar,
-    SnackBarClosedReason,
-    ScaffoldFeatureController,
-    FloatingActionButtonLocation,
-    DrawerAlignment,
-    AppBar
-} from "./scffold_basic.js";
-
-// ✅ Export all utility classes (EdgeInsets, BorderRadius, etc.)
-export * from "../utils/utils.js";
-
-export {
-    Text, TextStyle
-} from "./text.js";
-
-export {
-    MaterialApp,
-    ThemeData,
-    Theme,
-    Navigator,
-    Route
-} from "./material_app.js";
-
-export { ColorScheme } from "./color_scheme.js";
-
-export {
-    FloatingActionButton,
-    FloatingActionButtonElement,
-    FloatingActionButtonExtended
-} from "./floating_action_button.js";
-
-export {
-    GestureDetector,
-    GestureDetectorElement
-} from "./gesture_detector.js";
-
-
-
-export {
-    Card
-} from "../widgets/compoment/card.js";
-
-export {
-    Divider
-} from "../widgets/compoment/divider.js";
-
-export {
-    ElevatedButton
-} from "./elevated_button.js";
-
-export {
-    ListView
-} from "./list_view.js";
diff --git a/packages/flutterjs_engine/package/material/src/material/material_app.js b/packages/flutterjs_engine/package/material/src/material/material_app.js
deleted file mode 100644
index 2d654ffc..00000000
--- a/packages/flutterjs_engine/package/material/src/material/material_app.js
+++ /dev/null
@@ -1,302 +0,0 @@
-/**
- * ============================================================================
- * FIXED MaterialApp - Properly Handles StatefulWidget → State Connection
- * ============================================================================
- */
-
-import { StatelessWidget, ErrorWidget, StatefulWidget, State } from '../core/widget_element.js';
-import { VNode } from '@flutterjs/vdom/vnode';
-import { StatefulElement, StatelessElement, InheritedWidget } from '@flutterjs/runtime';
-import { Navigator, Route } from '../widgets/navigator.js';
-
-// ============================================================================
-// THEME DATA
-// ============================================================================
-
-import { ColorScheme } from './color_scheme.js';
-
-class ThemeData {
-  constructor({
-    brightness = 'light',
-    primaryColor = '#2196F3',
-    primarySwatch = null,
-    colorScheme = null,
-    accentColor = '#FF4081',
-    scaffoldBackgroundColor = '#FAFAFA',
-    canvasColor = '#FFF',
-    cardColor = '#FFF',
-    dividerColor = 'rgba(0, 0, 0, 0.12)',
-    highlightColor = 'rgba(0, 0, 0, 0.05)',
-    splashColor = 'rgba(0, 0, 0, 0.2)',
-    selectedRowColor = '#F5F5F5',
-    unselectedWidgetColor = 'rgba(0, 0, 0, 0.54)',
-    disabledColor = 'rgba(0, 0, 0, 0.38)',
-    textTheme = null,
-    fontFamily = 'Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI"',
-    appBarTheme = null
-  } = {}) {
-    // console.log('🎨 ThemeData constructor called', { primaryColor, primarySwatch });
-    this.brightness = brightness;
-
-    // Legacy support
-    this.primaryColor = primaryColor;
-    this.primarySwatch = primarySwatch;
-    this.accentColor = accentColor;
-    this.scaffoldBackgroundColor = scaffoldBackgroundColor;
-    this.canvasColor = canvasColor;
-    this.cardColor = cardColor;
-    this.dividerColor = dividerColor;
-    this.highlightColor = highlightColor;
-    this.splashColor = splashColor;
-    this.selectedRowColor = selectedRowColor;
-    this.unselectedWidgetColor = unselectedWidgetColor;
-    this.disabledColor = disabledColor;
-    this.textTheme = textTheme;
-    this.fontFamily = fontFamily;
-    this.appBarTheme = appBarTheme;
-
-    // ColorScheme support
-    if (colorScheme) {
-      this.colorScheme = colorScheme;
-      // Sync legacy properties if not explicitly provided
-      if (!primaryColor) this.primaryColor = colorScheme.primary;
-      if (!scaffoldBackgroundColor) this.scaffoldBackgroundColor = colorScheme.background;
-      if (!cardColor) this.cardColor = colorScheme.surface;
-    } else {
-      // Create default color scheme based on brightness and primary color
-      this.colorScheme = brightness === 'dark'
-        ? ColorScheme.dark()
-        : ColorScheme.light();
-
-      // Override primary if provided
-      if (primaryColor && primaryColor !== '#2196F3') { // Check if different from default
-        this.colorScheme = ColorScheme.fromSeed({
-          seedColor: primaryColor,
-          brightness: brightness
-        });
-      }
-    }
-
-    // Initialize default TextTheme if not provided
-    const isDark = brightness === 'dark';
-    const baseColor = isDark ? '#FFFFFF' : '#000000';
-
-    this.textTheme = textTheme || {
-      displayLarge: { fontFamily: fontFamily, fontSize: 57, fontWeight: '400', color: baseColor },
-      displayMedium: { fontFamily: fontFamily, fontSize: 45, fontWeight: '400', color: baseColor },
-      displaySmall: { fontFamily: fontFamily, fontSize: 36, fontWeight: '400', color: baseColor },
-      headlineLarge: { fontFamily: fontFamily, fontSize: 32, fontWeight: '400', color: baseColor },
-      headlineMedium: { fontFamily: fontFamily, fontSize: 28, fontWeight: '400', color: baseColor },
-      headlineSmall: { fontFamily: fontFamily, fontSize: 24, fontWeight: '400', color: baseColor },
-      titleLarge: { fontFamily: fontFamily, fontSize: 22, fontWeight: '400', color: baseColor },
-      titleMedium: { fontFamily: fontFamily, fontSize: 16, fontWeight: '500', color: baseColor },
-      titleSmall: { fontFamily: fontFamily, fontSize: 14, fontWeight: '500', color: baseColor },
-      bodyLarge: { fontFamily: fontFamily, fontSize: 16, fontWeight: '400', color: baseColor },
-      bodyMedium: { fontFamily: fontFamily, fontSize: 14, fontWeight: '400', color: baseColor },
-      bodySmall: { fontFamily: fontFamily, fontSize: 12, fontWeight: '400', color: baseColor },
-      labelLarge: { fontFamily: fontFamily, fontSize: 14, fontWeight: '500', color: baseColor },
-      labelMedium: { fontFamily: fontFamily, fontSize: 12, fontWeight: '500', color: baseColor },
-      labelSmall: { fontFamily: fontFamily, fontSize: 11, fontWeight: '500', color: baseColor },
-    };
-  }
-
-  static dark() {
-    return new ThemeData({
-      brightness: 'dark',
-      colorScheme: ColorScheme.dark(),
-      primaryColor: '#1F1F1F',
-      scaffoldBackgroundColor: '#121212',
-      canvasColor: '#1E1E1E',
-      cardColor: '#2C2C2C',
-      dividerColor: 'rgba(255, 255, 255, 0.12)',
-      unselectedWidgetColor: 'rgba(255, 255, 255, 0.70)'
-    });
-  }
-
-  static light() {
-    return new ThemeData({
-      brightness: 'light',
-      colorScheme: ColorScheme.light(),
-      primaryColor: '#2196F3',
-      scaffoldBackgroundColor: '#FAFAFA',
-      canvasColor: '#FFF',
-      cardColor: '#FFF'
-    });
-  }
-}
-
-// ============================================================================
-// THEME INHERITED WIDGET
-// ============================================================================
-
-class Theme extends InheritedWidget {
-  constructor({ data, child, key } = {}) {
-    super({ child, key });
-    this.data = data;
-  }
-
-  updateShouldNotify(oldWidget) {
-    return this.data !== oldWidget.data;
-  }
-
-  static of(context) {
-    if (!context || !context.dependOnInheritedWidgetOfExactType) {
-      console.warn('Theme.of() called with invalid context');
-      return new ThemeData();
-    }
-    const widget = context.dependOnInheritedWidgetOfExactType(Theme);
-    return widget ? widget.data : new ThemeData();
-  }
-}
-
-// ============================================================================
-// MATERIAL APP - FIXED VERSION
-// ============================================================================
-
-class MaterialApp extends StatefulWidget {
-  constructor({
-    key = null,
-    title = '',
-    theme = null,
-    darkTheme = null,
-    themeMode = 'system',
-    home = null,
-    routes = {},
-    initialRoute = '/',
-    onGenerateRoute = null,
-    onUnknownRoute = null,
-    navigatorObservers = [],
-    localizationsDelegates = [],
-    supportedLocales = [{ language: 'en' }],
-    locale = null,
-    builder = null,
-    color = null
-  } = {}) {
-    super(key);
-
-    this.title = title;
-    this.theme = theme || ThemeData.light();
-    this.darkTheme = darkTheme || ThemeData.dark();
-    this.themeMode = themeMode;
-    this.color = color;
-    this.home = home;
-    this.routes = routes;
-    this.initialRoute = initialRoute;
-    this.onGenerateRoute = onGenerateRoute;
-    this.onUnknownRoute = onUnknownRoute;
-    this.navigatorObservers = navigatorObservers;
-    this.localizationsDelegates = localizationsDelegates;
-    this.supportedLocales = supportedLocales;
-    this.locale = locale;
-    this.builder = builder;
-
-    // Deep linking support: If in browser, use current URL as initial route
-    if (typeof window !== 'undefined' && window.location && window.location.pathname) {
-      if (initialRoute === '/' && window.location.pathname !== '/') {
-        this.initialRoute = window.location.pathname;
-      }
-    }
-
-    // Normalize routes
-    if (this.home && !this.routes['/']) {
-      this.routes['/'] = (context) => this.home;
-    }
-
-    if (typeof document !== 'undefined') {
-      document.title = this.title;
-    }
-  }
-
-  createState() {
-    return new MaterialAppState();
-  }
-}
-
-class MaterialAppState extends State {
-  _getTheme() {
-    const wm = this.widget;
-    if (wm.themeMode === 'dark') {
-      return wm.darkTheme;
-    }
-    if (wm.themeMode === 'light') {
-      return wm.theme;
-    }
-    if (typeof window !== 'undefined' && window.matchMedia) {
-      const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      return isDark ? wm.darkTheme : wm.theme;
-    }
-    return wm.theme;
-  }
-
-  _applyTheme(theme) {
-    if (typeof document === 'undefined') return;
-
-    // Safeguards for undefined theme properties
-    const primary = theme.primaryColor || '#2196F3'; // Default blue
-    const surface = theme.cardColor || '#FFFFFF';
-    const background = theme.scaffoldBackgroundColor || '#FAFAFA';
-    const onPrimary = '#FFFFFF';
-    const onSurface = (theme.brightness === 'dark') ? '#FFFFFF' : '#000000';
-    const onBackground = (theme.brightness === 'dark') ? '#FFFFFF' : '#000000';
-
-    const root = document.documentElement;
-    root.style.setProperty('--primary-color', primary);
-    root.style.setProperty('--accent-color', theme.accentColor || '#FF4081');
-    root.style.setProperty('--scaffold-bg', background);
-    root.style.setProperty('--card-color', surface);
-    root.style.setProperty('--divider-color', theme.dividerColor);
-    root.style.setProperty('--font-family', theme.fontFamily);
-    root.style.setProperty('--text-color', onSurface);
-
-    // MD3 System Colors (Mapped from Legacy Theme with Fallbacks)
-    root.style.setProperty('--md-sys-color-primary', primary);
-    root.style.setProperty('--md-sys-color-on-primary', onPrimary);
-    root.style.setProperty('--md-sys-color-surface', surface);
-    root.style.setProperty('--md-sys-color-on-surface', onSurface);
-    root.style.setProperty('--md-sys-color-background', background);
-    root.style.setProperty('--md-sys-color-on-background', onBackground);
-
-    document.body.style.backgroundColor = background;
-    document.body.style.fontFamily = theme.fontFamily;
-    document.body.style.color = onSurface;
-
-    // ✅ Ensure full screen layout
-    root.style.height = '100%';
-    root.style.width = '100%';
-    root.style.margin = '0';
-    root.style.padding = '0';
-
-    document.body.style.height = '100%';
-    document.body.style.width = '100%';
-    document.body.style.margin = '0';
-    document.body.style.padding = '0';
-    document.body.style.overflow = 'hidden'; // Prevent body scroll, Scaffold handles it
-  }
-
-  build(context) {
-    const currentTheme = this._getTheme();
-    this._applyTheme(currentTheme);
-
-    return new Theme({
-      data: currentTheme,
-      child: new Navigator({
-        initialRoute: this.widget.initialRoute,
-        routes: this.widget.routes,
-        onGenerateRoute: this.widget.onGenerateRoute,
-        onUnknownRoute: this.widget.onUnknownRoute
-      })
-    });
-  }
-}
-
-// ============================================================================
-// EXPORTS
-// ============================================================================
-
-export {
-  MaterialApp,
-  ThemeData,
-  Navigator,
-  Route,
-  Theme
-};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/material/scffold_basic.js b/packages/flutterjs_engine/package/material/src/material/scffold_basic.js
deleted file mode 100644
index b6b2f2d8..00000000
--- a/packages/flutterjs_engine/package/material/src/material/scffold_basic.js
+++ /dev/null
@@ -1,826 +0,0 @@
-import { StatefulWidget, StatelessWidget, Widget } from '../core/widget_element.js';
-import { Element } from "@flutterjs/runtime"
-import { VNode } from '@flutterjs/vdom/vnode';
-
-// ============================================================================
-// ENUMS
-// ============================================================================
-
-const FloatingActionButtonLocation = {
-  endFloat: 'endFloat',
-  endDocked: 'endDocked',
-  endTop: 'endTop',
-  startFloat: 'startFloat',
-  startDocked: 'startDocked',
-  startTop: 'startTop',
-  centerFloat: 'centerFloat',
-  centerDocked: 'centerDocked',
-  centerTop: 'centerTop'
-};
-
-const DrawerAlignment = {
-  start: 'start',
-  end: 'end'
-};
-
-// ============================================================================
-// SNACK BAR CLOSED REASON
-// ============================================================================
-
-const SnackBarClosedReason = {
-  hide: 'hide',
-  remove: 'remove',
-  timeout: 'timeout',
-  dismiss: 'dismiss'
-};
-
-// ============================================================================
-// SCAFFOLD FEATURE CONTROLLER
-// ============================================================================
-
-class ScaffoldFeatureController {
-  constructor(widget, completer, closeCallback) {
-    this._widget = widget;
-    this._completer = completer;
-    this._close = closeCallback;
-  }
-
-  get widget() {
-    return this._widget;
-  }
-
-  get closed() {
-    return this._completer.promise;
-  }
-
-  close() {
-    if (!this._completer.completed) {
-      this._completer.resolve(SnackBarClosedReason.dismiss);
-    }
-    this._close?.();
-  }
-}
-
-// ============================================================================
-// SNACK BAR WIDGET
-// ============================================================================
-
-class SnackBar {
-  constructor({
-    key = null,
-    content = null,
-    backgroundColor = null,
-    elevation = 6,
-    margin = null,
-    padding = null,
-    width = null,
-    shape = null,
-    behavior = 'fixed',
-    action = null,
-    duration = 4000,
-    animation = null,
-    onVisible = null
-  } = {}) {
-    this.key = key;
-    this.content = content;
-    this.backgroundColor = backgroundColor || '#323232';
-    this.elevation = elevation;
-    this.margin = margin;
-    this.padding = padding;
-    this.width = width;
-    this.shape = shape;
-    this.behavior = behavior;
-    this.action = action;
-    this.duration = duration;
-    this.animation = animation;
-    this.onVisible = onVisible;
-  }
-
-  build(context) {
-    const style = {
-      backgroundColor: this.backgroundColor,
-      padding: this.padding ? `${this.padding}px` : '12px 16px',
-      borderRadius: '4px',
-      boxShadow: `0 ${this.elevation}px 16px rgba(0,0,0,0.12), 0 ${this.elevation}px 16px rgba(0,0,0,0.24)`,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      gap: '16px',
-      color: 'white',
-      fontSize: '14px',
-      minHeight: '48px',
-      maxWidth: this.width ? `${this.width}px` : '568px',
-      position: this.behavior === 'floating' ? 'fixed' : 'relative',
-      zIndex: 1000
-    };
-
-    if (this.margin) {
-      style.margin = `${this.margin}px`;
-    }
-
-    const contentVNode = this.content?.createElement?.(context.element, context.element.runtime)
-      ? this.content.createElement(context.element, context.element.runtime).performRebuild()
-      : new VNode({ tag: 'span', children: [String(this.content)] });
-
-    const children = [contentVNode];
-
-    if (this.action) {
-      const actionStyle = {
-        color: '#2196F3',
-        cursor: 'pointer',
-        border: 'none',
-        background: 'none',
-        padding: '8px',
-        fontSize: '14px',
-        fontWeight: 'bold'
-      };
-
-      children.push(
-        new VNode({
-          tag: 'button',
-          props: {
-            style: actionStyle,
-            onClick: this.action.onPressed
-          },
-          children: [this.action.label]
-        })
-      );
-    }
-
-    return new VNode({
-      tag: 'div',
-      props: {
-        style,
-        'data-widget': 'SnackBar'
-      },
-      children
-    });
-  }
-}
-
-// ============================================================================
-// SCAFFOLD STATE
-// ============================================================================
-
-class ScaffoldState extends Element {
-  constructor(widget, parent = null, runtime = null) {
-    super(widget, parent, runtime);
-    this._snackBars = [];
-    this._currentSnackBar = null;
-    this._snackBarTimer = null;
-    this._drawerOpen = false;
-    this._endDrawerOpen = false;
-    this._fabVisible = true;
-  }
-
-  /**
-   * Show snack bar
-   */
-  showSnackBar(snackBar) {
-    // Clear previous snack bar timer
-    if (this._snackBarTimer) {
-      clearTimeout(this._snackBarTimer);
-      this._snackBarTimer = null;
-    }
-
-    const completer = {
-      resolve: null,
-      reject: null,
-      completed: false,
-      promise: new Promise((resolve, reject) => {
-        completer.resolve = (value) => {
-          completer.completed = true;
-          resolve(value);
-        };
-        completer.reject = reject;
-      })
-    };
-
-    const controller = new ScaffoldFeatureController(
-      snackBar,
-      completer,
-      () => this._hideSnackBar()
-    );
-
-    this._currentSnackBar = controller;
-    this._snackBars.push(controller);
-
-    // Auto-hide after duration
-    this._snackBarTimer = setTimeout(() => {
-      if (!completer.completed) {
-        completer.resolve(SnackBarClosedReason.timeout);
-      }
-      this._hideSnackBar();
-    }, snackBar.duration);
-
-    this.markNeedsBuild();
-
-    return controller;
-  }
-
-  /**
-   * Hide current snack bar
-   */
-  _hideSnackBar() {
-    if (this._snackBarTimer) {
-      clearTimeout(this._snackBarTimer);
-      this._snackBarTimer = null;
-    }
-
-    this._snackBars.shift();
-    this._currentSnackBar = this._snackBars.length > 0 ? this._snackBars[0] : null;
-
-    this.markNeedsBuild();
-  }
-
-  /**
-   * Close snack bar
-   */
-  closeSnackBar() {
-    if (this._currentSnackBar) {
-      this._currentSnackBar.close();
-    }
-  }
-
-  /**
-   * Open drawer
-   */
-  openDrawer() {
-    this._drawerOpen = true;
-    this.markNeedsBuild();
-  }
-
-  /**
-   * Close drawer
-   */
-  closeDrawer() {
-    this._drawerOpen = false;
-    this.markNeedsBuild();
-  }
-
-  /**
-   * Toggle drawer
-   */
-  toggleDrawer() {
-    this._drawerOpen = !this._drawerOpen;
-    this.markNeedsBuild();
-  }
-
-  /**
-   * Open end drawer
-   */
-  openEndDrawer() {
-    this._endDrawerOpen = true;
-    this.markNeedsBuild();
-  }
-
-  /**
-   * Close end drawer
-   */
-  closeEndDrawer() {
-    this._endDrawerOpen = false;
-    this.markNeedsBuild();
-  }
-
-  /**
-   * Check if drawer is open
-   */
-  get isDrawerOpen() {
-    return this._drawerOpen;
-  }
-
-  /**
-   * Check if end drawer is open
-   */
-  get isEndDrawerOpen() {
-    return this._endDrawerOpen;
-  }
-
-  /**
-   * Show FAB
-   */
-  showFloatingActionButton() {
-    this._fabVisible = true;
-    this.markNeedsBuild();
-  }
-
-  /**
-   * Hide FAB
-   */
-  hideFloatingActionButton() {
-    this._fabVisible = false;
-    this.markNeedsBuild();
-  }
-
-  performRebuild() {
-    return this.widget.build(this.context);
-  }
-}
-
-// ============================================================================
-// SCAFFOLD WIDGET
-// ============================================================================
-
-class Scaffold extends Widget {
-  constructor({
-    key = null,
-    appBar = null,
-    body = null,
-    floatingActionButton = null,
-    floatingActionButtonLocation = FloatingActionButtonLocation.endFloat,
-    drawer = null,
-    endDrawer = null,
-    bottomNavigationBar = null,
-    backgroundColor = null,
-    resizeToAvoidBottomInset = true,
-    extendBody = false,
-    extendBodyBehindAppBar = false,
-    primary = true
-  } = {}) {
-    super(key);
-
-    this.appBar = appBar;
-    this.body = body;
-    this.floatingActionButton = floatingActionButton;
-    this.floatingActionButtonLocation = floatingActionButtonLocation;
-    this.drawer = drawer;
-    this.endDrawer = endDrawer;
-    this.bottomNavigationBar = bottomNavigationBar;
-    this.backgroundColor = backgroundColor || '#ffffff';
-    this.resizeToAvoidBottomInset = resizeToAvoidBottomInset;
-    this.extendBody = extendBody;
-    this.extendBodyBehindAppBar = extendBodyBehindAppBar;
-    this.primary = primary;
-  }
-
-  /**
-   * Get scaffold state from context
-   */
-  static of(context) {
-    const state = context.findAncestorStateOfType?.(ScaffoldState);
-    if (!state) {
-      throw new Error('Scaffold.of() called with a context that does not contain a Scaffold');
-    }
-    return state;
-  }
-
-  /**
-   * Maybe get scaffold state
-   */
-  static maybeOf(context) {
-    return context?.findAncestorStateOfType?.(ScaffoldState);
-  }
-
-  build(context) {
-    const elementId = context.element.getElementId();
-    const widgetPath = context.element.getWidgetPath();
-
-    let appBarHeight = this.appBar ? 56 : 0;
-    let bodyTop = appBarHeight;
-    let bodyBottom = this.bottomNavigationBar ? 56 : 0;
-
-    if (this.extendBodyBehindAppBar) {
-      bodyTop = 0;
-    }
-
-    // Build app bar
-    let appBarVNode = null;
-    if (this.appBar) {
-      let appBarElement = this.appBar.createElement(context.element, context.element.runtime);
-      context.element.addChild(appBarElement);
-      appBarElement.mount();
-      appBarVNode = appBarElement.vnode;
-    }
-
-    // Build body
-    let bodyVNode = null;
-    if (this.body) {
-      let bodyElement = this.body.createElement(context.element, context.element.runtime);
-      context.element.addChild(bodyElement);
-      bodyElement.mount();
-      bodyVNode = bodyElement.vnode;
-    }
-
-    // Build bottom navigation bar
-    let bottomNavVNode = null;
-    if (this.bottomNavigationBar) {
-      let bottomNavElement = this.bottomNavigationBar.createElement(context.element, context.element.runtime);
-      context.element.addChild(bottomNavElement);
-      bottomNavElement.mount();
-      bottomNavVNode = bottomNavElement.vnode;
-    }
-
-    // Build floating action button
-    let fabVNode = null;
-    if (this.floatingActionButton) {
-      let fabElement = this.floatingActionButton.createElement(context.element, context.element.runtime);
-      context.element.addChild(fabElement);
-      fabElement.mount();
-      fabVNode = fabElement.vnode;
-    }
-
-    // Build drawer
-    let drawerVNode = null;
-    if (this.drawer) {
-      let drawerElement = this.drawer.createElement(context.element, context.element.runtime);
-      context.element.addChild(drawerElement);
-      drawerElement.mount();
-      drawerVNode = drawerElement.vnode;
-    }
-
-    // Build end drawer
-    let endDrawerVNode = null;
-    if (this.endDrawer) {
-      let endDrawerElement = this.endDrawer.createElement(context.element, context.element.runtime);
-      context.element.addChild(endDrawerElement);
-      endDrawerElement.mount();
-      endDrawerVNode = endDrawerElement.vnode;
-    }
-
-    const scaffoldStyle = {
-      display: 'flex',
-      flexDirection: 'column',
-      width: '100%',
-      minHeight: '100vh', // ✅ Force full viewport height
-      height: '100%',     // Fallback
-      position: 'relative',
-      backgroundColor: this.backgroundColor,
-      boxSizing: 'border-box',
-      margin: 0,
-      padding: 0
-    };
-
-    const appBarContainerStyle = {
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      right: 0,
-      height: `${appBarHeight}px`,
-      zIndex: 100
-    };
-
-    const bodyContainerStyle = {
-      flex: 1,
-      position: 'relative',
-      marginTop: `${bodyTop}px`,
-      marginBottom: `${bodyBottom}px`,
-      overflowY: this.resizeToAvoidBottomInset ? 'auto' : 'visible',
-      overflowX: 'hidden',
-      width: '100%',
-      display: 'flex',
-      flexDirection: 'column'
-    };
-
-    const bottomNavContainerStyle = {
-      position: 'fixed',
-      bottom: 0,
-      left: 0,
-      right: 0,
-      height: `${bodyBottom}px`,
-      backgroundColor: '#fff',
-      borderTop: '1px solid #e0e0e0',
-      zIndex: 50
-    };
-
-    const fabContainerStyle = this._getFabContainerStyle();
-
-    const drawerContainerStyle = {
-      position: 'fixed',
-      left: 0,
-      top: 0,
-      bottom: 0,
-      width: '256px',
-      backgroundColor: '#fff',
-      boxShadow: '0 8px 16px rgba(0,0,0,0.12)',
-      zIndex: 200,
-      transform: 'translateX(-100%)',
-      transition: 'transform 0.3s ease-out',
-      display: this.drawer && (context.element?.state?._drawerOpen || false) ? 'block' : 'none'
-    };
-
-    if (context.element?.state?._drawerOpen) {
-      drawerContainerStyle.transform = 'translateX(0)';
-    }
-
-    const endDrawerContainerStyle = {
-      position: 'fixed',
-      right: 0,
-      top: 0,
-      bottom: 0,
-      width: '256px',
-      backgroundColor: '#fff',
-      boxShadow: '0 8px 16px rgba(0,0,0,0.12)',
-      zIndex: 200,
-      transform: 'translateX(100%)',
-      transition: 'transform 0.3s ease-out',
-      display: this.endDrawer && (context.element?.state?._endDrawerOpen || false) ? 'block' : 'none'
-    };
-
-    if (context.element?.state?._endDrawerOpen) {
-      endDrawerContainerStyle.transform = 'translateX(0)';
-    }
-
-    const scrimStyle = {
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      backgroundColor: 'rgba(0,0,0,0.5)',
-      zIndex: 150,
-      display: (context.element?.state?._drawerOpen || context.element?.state?._endDrawerOpen) ? 'block' : 'none',
-      cursor: 'pointer',
-      onClick: () => {
-        if (context.element?.state?._drawerOpen) {
-          context.element.state.closeDrawer();
-        }
-        if (context.element?.state?._endDrawerOpen) {
-          context.element.state.closeEndDrawer();
-        }
-      }
-    };
-
-    return new VNode({
-      tag: 'div',
-      props: {
-        style: scaffoldStyle,
-        'data-element-id': elementId,
-        'data-widget-path': widgetPath,
-        'data-widget': 'Scaffold'
-      },
-      children: [
-        // App bar
-        ...(appBarVNode ? [new VNode({
-          tag: 'div',
-          props: { style: appBarContainerStyle },
-          children: [appBarVNode]
-        })] : []),
-
-        // Body
-        ...(bodyVNode ? [new VNode({
-          tag: 'div',
-          props: { style: bodyContainerStyle },
-          children: [bodyVNode]
-        })] : []),
-
-        // Bottom navigation bar
-        ...(bottomNavVNode ? [new VNode({
-          tag: 'div',
-          props: { style: bottomNavContainerStyle },
-          children: [bottomNavVNode]
-        })] : []),
-
-        // Floating action button
-        ...(fabVNode ? [new VNode({
-          tag: 'div',
-          props: { style: fabContainerStyle },
-          children: [fabVNode]
-        })] : []),
-
-        // Drawer scrim
-        new VNode({
-          tag: 'div',
-          props: { style: scrimStyle }
-        }),
-
-        // Drawer
-        ...(drawerVNode ? [new VNode({
-          tag: 'div',
-          props: { style: drawerContainerStyle },
-          children: [drawerVNode]
-        })] : []),
-
-        // End drawer
-        ...(endDrawerVNode ? [new VNode({
-          tag: 'div',
-          props: { style: endDrawerContainerStyle },
-          children: [endDrawerVNode]
-        })] : []),
-
-        // Snack bar
-        ...(context.element?.state?._currentSnackBar ? [
-          new VNode({
-            tag: 'div',
-            props: {
-              style: {
-                position: 'fixed',
-                bottom: '16px',
-                left: '16px',
-                right: 'auto',
-                zIndex: 300,
-                animation: 'slideUp 0.3s ease-out'
-              }
-            },
-            children: [context.element.state._currentSnackBar.widget.build(context)]
-          })
-        ] : [])
-      ],
-      key: this.key
-    });
-  }
-
-  /**
-   * Get FAB container style based on location
-   * @private
-   */
-  _getFabContainerStyle() {
-    const baseStyle = {
-      position: 'absolute',
-      zIndex: 250
-    };
-
-    const spacing = 16;
-
-    switch (this.floatingActionButtonLocation) {
-      case FloatingActionButtonLocation.endFloat:
-        return { ...baseStyle, bottom: `${spacing}px`, right: `${spacing}px` };
-      case FloatingActionButtonLocation.endDocked:
-        return { ...baseStyle, bottom: '72px', right: `${spacing}px` };
-      case FloatingActionButtonLocation.endTop:
-        return { ...baseStyle, top: '80px', right: `${spacing}px` };
-      case FloatingActionButtonLocation.startFloat:
-        return { ...baseStyle, bottom: `${spacing}px`, left: `${spacing}px` };
-      case FloatingActionButtonLocation.startDocked:
-        return { ...baseStyle, bottom: '72px', left: `${spacing}px` };
-      case FloatingActionButtonLocation.startTop:
-        return { ...baseStyle, top: '80px', left: `${spacing}px` };
-      case FloatingActionButtonLocation.centerFloat:
-        return { ...baseStyle, bottom: `${spacing}px`, left: '50%', transform: 'translateX(-50%)' };
-      case FloatingActionButtonLocation.centerDocked:
-        return { ...baseStyle, bottom: '72px', left: '50%', transform: 'translateX(-50%)' };
-      case FloatingActionButtonLocation.centerTop:
-        return { ...baseStyle, top: '80px', left: '50%', transform: 'translateX(-50%)' };
-      default:
-        return { ...baseStyle, bottom: `${spacing}px`, right: `${spacing}px` };
-    }
-  }
-
-  debugFillProperties(properties) {
-    super.debugFillProperties(properties);
-    properties.push({ name: 'appBar', value: this.appBar ? 'AppBar' : 'null' });
-    properties.push({ name: 'body', value: this.body ? 'Widget' : 'null' });
-    properties.push({ name: 'floatingActionButton', value: this.floatingActionButton ? 'FAB' : 'null' });
-    properties.push({ name: 'drawer', value: this.drawer ? 'Drawer' : 'null' });
-    properties.push({ name: 'bottomNavigationBar', value: this.bottomNavigationBar ? 'BottomNav' : 'null' });
-  }
-
-  createElement(parent, runtime) {
-    return new ScaffoldElement(this, parent, runtime);
-  }
-}
-
-class ScaffoldElement extends ScaffoldState {
-  constructor(widget, parent, runtime) {
-    super(widget, parent, runtime);
-  }
-
-  mount(parent = null) {
-    // Setup context first so it's available for performRebuild
-    this._context = {
-      element: this,
-      runtime: this.runtime,
-      parent: parent || this.parent,
-      findAncestorStateOfType: (stateType) => {
-        let current = parent || this.parent;
-        while (current) {
-          if (current instanceof stateType) {
-            return current;
-          }
-          current = current.parent;
-        }
-        return null;
-      }
-    };
-
-    // Delegate to base Element to handle _mounted, _parent, and performRebuild
-    super.mount(parent);
-  }
-
-  getElementId() {
-    return this._elementId || (this._elementId = `scaffold-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`);
-  }
-
-  getWidgetPath() {
-    const parts = [];
-    let current = this;
-    while (current) {
-      if (current.widget) {
-        parts.unshift(current.widget.constructor.name);
-      }
-      current = current.parent;
-    }
-    return parts.join('/');
-  }
-
-  performRebuild() {
-    if (!this.mounted) {
-      this.mount();
-    }
-
-    // ✅ CRITICAL: Make sure context exists before calling build
-    if (!this.context) {
-      this._context = {
-        element: this,
-        runtime: this.runtime,
-        parent: this.parent
-      };
-    }
-
-    // Call widget.build() with proper context
-    return this.widget.build(this.context);
-  }
-
-  build(context) {
-    // Ensure context is set
-    if (context) {
-      this._context = context;
-    }
-    return this.performRebuild();
-  }
-
-  markNeedsBuild() {
-    // Trigger rebuild through runtime
-    if (this.runtime && this.runtime.update) {
-      this.runtime.update();
-    }
-  }
-}
-
-class AppBar extends StatelessWidget {
-  constructor({ title, backgroundColor, leading, actions } = {}) {
-    super();
-    this.title = title;
-    this.backgroundColor = backgroundColor;
-    this.leading = leading;
-    this.actions = actions;
-  }
-
-  build(context) {
-    // ✅ FIX: Build title as VNode if it's a widget
-    let titleVNode = null;
-    if (this.title) {
-      if (this.title.createElement) {
-        // It's a widget - build it
-        let titleElement = this.title.createElement(context.element, context.element.runtime);
-        context.element.addChild(titleElement);
-        titleElement.mount();
-        titleVNode = titleElement.vnode;
-      } else {
-        // It's a string - wrap in VNode
-        titleVNode = new VNode({
-          tag: 'span',
-          children: [String(this.title)]
-        });
-      }
-    }
-
-    // ✅ FIX: Resolve background color
-    let bgColor = this.backgroundColor;
-    if (bgColor && typeof bgColor.toCSSString === 'function') {
-      bgColor = bgColor.toCSSString();
-    } else if (bgColor && typeof bgColor === 'object' && bgColor.value) {
-      // Fallback for Color objects without toCSSString (shouldn't happen but safe)
-      const value = bgColor.value;
-      const hex = value.toString(16).padStart(8, '0');
-      bgColor = `#${hex.slice(2)}`;
-    }
-
-    // ✅ FIX: Use VNode constructor correctly with OBJECT parameter
-    return new VNode({
-      tag: 'div',  // ✅ CORRECT: tag is inside the config object
-      props: {
-        className: 'flutter-appbar',
-        'data-widget': 'AppBar'
-      },
-      style: {
-        backgroundColor: bgColor || 'var(--md-sys-color-primary)',
-        color: '#FFFFFF',
-        padding: '16px',
-        fontSize: '20px',
-        fontWeight: 'bold',
-        display: 'flex',
-        alignItems: 'center',
-        minHeight: '56px'
-      },
-      children: titleVNode ? [titleVNode] : []
-    });
-  }
-}
-
-
-
-// ============================================================================
-// EXPORTS
-// ============================================================================
-
-export {
-  Scaffold,
-  ScaffoldState,
-  ScaffoldElement,
-  SnackBar,
-  SnackBarClosedReason,
-  ScaffoldFeatureController,
-  FloatingActionButtonLocation,
-  DrawerAlignment,
-  AppBar
-};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/material/text.js b/packages/flutterjs_engine/package/material/src/material/text.js
deleted file mode 100644
index 8a98009b..00000000
--- a/packages/flutterjs_engine/package/material/src/material/text.js
+++ /dev/null
@@ -1,423 +0,0 @@
-import { StatelessWidget } from '../core/widget_element.js';
-import { VNode } from '@flutterjs/vdom/vnode';
-import { TextAlign, TextOverflow, TextDirection } from '../utils/utils.js';
-
-/**
- * TextStyle - Comprehensive text styling class with Flutter-like API
- * Supports Google Fonts, text decorations, shadows, and advanced typography
- */
-class TextStyle {
-  constructor({
-    color = '#000000',
-    fontSize = 14,
-    fontWeight = '400',
-    fontStyle = 'normal',
-    fontFamily = 'Roboto',
-    height = 1.5,
-    letterSpacing = 0,
-    wordSpacing = 0,
-    decoration = 'none',
-    decorationColor = null,
-    decorationStyle = 'solid',
-    decorationThickness = 1,
-    shadows = null,
-    backgroundColor = null,
-    backgroundOpacity = 1,
-    googleFont = null,
-    fontVariant = 'normal',
-    textTransform = 'none',
-    opacity = 1,
-    strikethrough = false,
-    underline = false,
-    overline = false,
-    gradient = null
-  } = {}) {
-    this.color = color;
-    this.fontSize = fontSize;
-    this.fontWeight = fontWeight;
-    this.fontStyle = fontStyle;
-    this.fontFamily = fontFamily;
-    this.height = height;
-    this.letterSpacing = letterSpacing;
-    this.wordSpacing = wordSpacing;
-    this.decoration = decoration;
-    this.decorationColor = decorationColor;
-    this.decorationStyle = decorationStyle;
-    this.decorationThickness = decorationThickness;
-    this.shadows = shadows;
-    this.backgroundColor = backgroundColor;
-    this.backgroundOpacity = backgroundOpacity;
-    this.googleFont = googleFont;
-    this.fontVariant = fontVariant;
-    this.textTransform = textTransform;
-    this.opacity = opacity;
-    this.strikethrough = strikethrough;
-    this.underline = underline;
-    this.overline = overline;
-    this.gradient = gradient;
-
-    if (this.googleFont) {
-      this._loadGoogleFont(this.googleFont);
-    }
-  }
-
-  // Static presets for common text styles
-  static preset = {
-    h1: new TextStyle({ fontSize: 32, fontWeight: '700', height: 1.2 }),
-    h2: new TextStyle({ fontSize: 28, fontWeight: '700', height: 1.3 }),
-    h3: new TextStyle({ fontSize: 24, fontWeight: '600', height: 1.4 }),
-    h4: new TextStyle({ fontSize: 20, fontWeight: '600', height: 1.4 }),
-    h5: new TextStyle({ fontSize: 16, fontWeight: '600', height: 1.5 }),
-    h6: new TextStyle({ fontSize: 14, fontWeight: '600', height: 1.5 }),
-    body1: new TextStyle({ fontSize: 16, fontWeight: '400', height: 1.5 }),
-    body2: new TextStyle({ fontSize: 14, fontWeight: '400', height: 1.5 }),
-    caption: new TextStyle({ fontSize: 12, fontWeight: '400', height: 1.4, opacity: 0.7 }),
-    button: new TextStyle({ fontSize: 14, fontWeight: '600', textTransform: 'uppercase' }),
-    code: new TextStyle({ fontSize: 13, fontFamily: 'monospace', fontWeight: '400' })
-  };
-
-  static availableGoogleFonts = [
-    'Roboto', 'Open Sans', 'Lato', 'Montserrat', 'Raleway', 'Poppins',
-    'Inter', 'Playfair Display', 'Bebas Neue', 'Pacifico', 'Merriweather',
-    'Ubuntu', 'Quicksand', 'Source Code Pro', 'IBM Plex Mono', 'Fira Sans',
-    'Oswald', 'Crimson Text', 'Nunito', 'Chakra Petch', 'JetBrains Mono',
-    'Space Mono', 'Inconsolata', 'Roboto Mono', 'Cabin', 'Work Sans'
-  ];
-
-  static fontWeights = {
-    thin: '100',
-    extralight: '200',
-    light: '300',
-    normal: '400',
-    medium: '500',
-    semibold: '600',
-    bold: '700',
-    extrabold: '800',
-    black: '900'
-  };
-
-  static textDecorations = {
-    none: 'none',
-    underline: 'underline',
-    overline: 'overline',
-    lineThrough: 'line-through',
-    underlineOverline: 'underline overline'
-  };
-
-  _loadGoogleFont(fontName) {
-    if (typeof document === 'undefined') return;
-
-    const formattedName = fontName.replace(/\s+/g, '+');
-    const linkId = `google-font-${fontName.replace(/\s+/g, '-')}`;
-
-    if (document.getElementById(linkId)) return;
-
-    const link = document.createElement('link');
-    link.id = linkId;
-    link.href = `https://fonts.googleapis.com/css2?family=${formattedName}:wght@100;200;300;400;500;600;700;800;900&display=swap`;
-    link.rel = 'stylesheet';
-    link.crossOrigin = 'anonymous';
-    document.head.appendChild(link);
-  }
-
-  copyWith({
-    color,
-    fontSize,
-    fontWeight,
-    fontStyle,
-    fontFamily,
-    height,
-    letterSpacing,
-    wordSpacing,
-    decoration,
-    decorationColor,
-    decorationStyle,
-    decorationThickness,
-    shadows,
-    backgroundColor,
-    backgroundOpacity,
-    googleFont,
-    fontVariant,
-    textTransform,
-    opacity,
-    strikethrough,
-    underline,
-    overline,
-    gradient
-  } = {}) {
-    return new TextStyle({
-      color: color ?? this.color,
-      fontSize: fontSize ?? this.fontSize,
-      fontWeight: fontWeight ?? this.fontWeight,
-      fontStyle: fontStyle ?? this.fontStyle,
-      fontFamily: fontFamily ?? this.fontFamily,
-      height: height ?? this.height,
-      letterSpacing: letterSpacing ?? this.letterSpacing,
-      wordSpacing: wordSpacing ?? this.wordSpacing,
-      decoration: decoration ?? this.decoration,
-      decorationColor: decorationColor ?? this.decorationColor,
-      decorationStyle: decorationStyle ?? this.decorationStyle,
-      decorationThickness: decorationThickness ?? this.decorationThickness,
-      shadows: shadows ?? this.shadows,
-      backgroundColor: backgroundColor ?? this.backgroundColor,
-      backgroundOpacity: backgroundOpacity ?? this.backgroundOpacity,
-      googleFont: googleFont ?? this.googleFont,
-      fontVariant: fontVariant ?? this.fontVariant,
-      textTransform: textTransform ?? this.textTransform,
-      opacity: opacity ?? this.opacity,
-      strikethrough: strikethrough ?? this.strikethrough,
-      underline: underline ?? this.underline,
-      overline: overline ?? this.overline,
-      gradient: gradient ?? this.gradient
-    });
-  }
-
-  merge(other) {
-    if (!other) return this;
-    return this.copyWith(other);
-  }
-
-  _buildTextDecoration() {
-    const decorations = [];
-    if (this.underline) decorations.push('underline');
-    if (this.overline) decorations.push('overline');
-    if (this.strikethrough) decorations.push('line-through');
-    return decorations.length > 0 ? decorations.join(' ') : this.decoration;
-  }
-
-  _buildTextShadow() {
-    if (!this.shadows || !Array.isArray(this.shadows)) return 'none';
-    return this.shadows
-      .map(s => {
-        const offsetX = s.offsetX ?? 0;
-        const offsetY = s.offsetY ?? 0;
-        const blurRadius = s.blurRadius ?? 0;
-        const color = s.color ?? 'rgba(0,0,0,0.3)';
-        return `${offsetX}px ${offsetY}px ${blurRadius}px ${color}`;
-      })
-      .join(', ');
-  }
-
-  _buildBackground() {
-    if (this.gradient) {
-      return this.gradient;
-    }
-
-    if (!this.backgroundColor) return 'transparent';
-
-    if (this.backgroundOpacity < 1) {
-      const rgb = this._hexToRgb(this.backgroundColor);
-      return rgb ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${this.backgroundOpacity})` : this.backgroundColor;
-    }
-
-    return this.backgroundColor;
-  }
-
-  _hexToRgb(hex) {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result ? {
-      r: parseInt(result[1], 16),
-      g: parseInt(result[2], 16),
-      b: parseInt(result[3], 16)
-    } : null;
-  }
-
-  toCSSString() {
-    const decorationStyle = this._buildTextDecoration();
-
-    return {
-      color: this.color,
-      fontSize: `${this.fontSize}px`,
-      fontWeight: this.fontWeight,
-      fontStyle: this.fontStyle,
-      fontFamily: this.fontFamily,
-      lineHeight: this.height,
-      letterSpacing: `${this.letterSpacing}px`,
-      wordSpacing: `${this.wordSpacing}px`,
-      textDecoration: decorationStyle,
-      textDecorationColor: this.decorationColor || 'currentColor',
-      textDecorationStyle: this.decorationStyle,
-      textDecorationThickness: `${this.decorationThickness}px`,
-      backgroundColor: this._buildBackground(),
-      fontVariant: this.fontVariant,
-      textTransform: this.textTransform,
-      opacity: this.opacity,
-      textShadow: this._buildTextShadow()
-    };
-  }
-
-  toCSSObject() {
-    return this.toCSSString();
-  }
-
-  toFlutterString() {
-    return `TextStyle(color: ${this.color}, size: ${this.fontSize}, family: ${this.fontFamily}, weight: ${this.fontWeight})`;
-  }
-
-  toString() {
-    return `TextStyle(color: ${this.color}, size: ${this.fontSize}px, family: ${this.fontFamily}, weight: ${this.fontWeight})`;
-  }
-}
-
-/**
- * Text - StatelessWidget for rendering text with comprehensive styling
- * Supports selection, overflow handling, max lines, and text alignment
- */
-class Text extends StatelessWidget {
-  constructor(dataOrOptions, options = {}) {
-    let _data = '';
-    let _opts = {};
-
-    if (typeof dataOrOptions === 'string') {
-      _data = dataOrOptions;
-      _opts = options;
-    } else {
-      _opts = dataOrOptions || {};
-      _data = _opts.data || '';
-    }
-
-    const {
-      key = null,
-      style = new TextStyle(),
-      textAlign = TextAlign.left,
-      textDirection = TextDirection.ltr,
-      overflow = TextOverflow.clip,
-      maxLines = null,
-      softWrap = true,
-      semanticsLabel = null,
-      selectable = true,
-      selectionColor = null,
-      onSelectionChanged = null
-    } = _opts;
-
-    super(key);
-    this.data = _data;
-    this.style = style instanceof TextStyle ? style : new TextStyle(style);
-    this.textAlign = textAlign;
-    this.textDirection = textDirection;
-    this.overflow = overflow;
-    this.maxLines = maxLines;
-    this.softWrap = softWrap;
-    this.semanticsLabel = semanticsLabel;
-    this.selectable = selectable;
-    this.selectionColor = selectionColor || '#b3d9ff';
-    this.onSelectionChanged = onSelectionChanged;
-  }
-
-  build(context) {
-    const inlineStyles = this._getInlineStyles();
-    const elementId = context.element.getElementId();
-    const widgetPath = context.element.getWidgetPath();
-
-    const props = {
-      // className: 'fjs-text',
-      style: inlineStyles,
-      'data-element-id': elementId,
-      'data-widget-path': widgetPath,
-      'data-identification': context.element.getIdentificationStrategy(),
-      'data-widget': 'Text',
-      'data-text-align': this.textAlign,
-      'data-overflow': this.overflow,
-      'data-max-lines': this.maxLines,
-      title: this.semanticsLabel || this.data
-    };
-
-    if (this.selectable) {
-      props.className += ' fjs-text-selectable';
-      props.style.userSelect = 'text';
-      props.style.WebkitUserSelect = 'text';
-      props.style.MozUserSelect = 'text';
-      if (this.selectionColor) {
-        props.style['--selection-color'] = this.selectionColor;
-      }
-    } else {
-      props.style.userSelect = 'none';
-      props.style.WebkitUserSelect = 'none';
-      props.style.MozUserSelect = 'none';
-    }
-
-    const events = {};
-    if (this.selectable && this.onSelectionChanged) {
-      events.onselectionchange = () => {
-        const selected = window.getSelection ? window.getSelection().toString() : '';
-        this.onSelectionChanged(selected);
-      };
-    }
-
-    return new VNode({
-      tag: 'span',
-      props,
-      children: [this.data],
-      key: this.key,
-      events
-    });
-  }
-
-  _getInlineStyles() {
-    const styles = {
-      display: 'inline-block',
-      textAlign: this._mapTextAlign(),
-      direction: this.textDirection === TextDirection.rtl ? 'rtl' : 'ltr',
-      whiteSpace: this.softWrap ? 'normal' : 'nowrap',
-      overflow: this._mapOverflow(),
-      textOverflow: this.overflow === TextOverflow.ellipsis ? 'ellipsis' : 'clip',
-      boxSizing: 'border-box'
-    };
-
-    // Handle max lines
-    if (this.maxLines === 1) {
-      styles.overflow = 'hidden';
-      styles.textOverflow = 'ellipsis';
-      styles.whiteSpace = 'nowrap';
-    } else if (this.maxLines && this.maxLines > 1) {
-      styles.display = '-webkit-box';
-      styles.WebkitLineClamp = this.maxLines;
-      styles.WebkitBoxOrient = 'vertical';
-      styles.overflow = 'hidden';
-    }
-
-    // Merge text style
-    if (this.style && this.style instanceof TextStyle) {
-      Object.assign(styles, this.style.toCSSString());
-    }
-
-    return styles;
-  }
-
-  _mapTextAlign() {
-    const alignMap = {
-      left: 'left',
-      right: 'right',
-      center: 'center',
-      justify: 'justify',
-      start: 'start',
-      end: 'end'
-    };
-    return alignMap[this.textAlign] ?? 'left';
-  }
-
-  _mapOverflow() {
-    const overflowMap = {
-      clip: 'hidden',
-      fade: 'hidden',
-      ellipsis: 'hidden',
-      visible: 'visible'
-    };
-    return overflowMap[this.overflow] ?? 'hidden';
-  }
-
-  debugFillProperties(properties) {
-    super.debugFillProperties(properties);
-    properties.push({ name: 'data', value: this.data });
-    properties.push({ name: 'textAlign', value: this.textAlign });
-    properties.push({ name: 'overflow', value: this.overflow });
-    properties.push({ name: 'maxLines', value: this.maxLines });
-    properties.push({ name: 'softWrap', value: this.softWrap });
-    properties.push({ name: 'selectable', value: this.selectable });
-    if (this.style && this.style instanceof TextStyle) {
-      properties.push({ name: 'style', value: this.style.toString() });
-    }
-  }
-}
-
-export { Text, TextStyle };
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/utils/border.js b/packages/flutterjs_engine/package/material/src/utils/border.js
deleted file mode 100644
index 792d1278..00000000
--- a/packages/flutterjs_engine/package/material/src/utils/border.js
+++ /dev/null
@@ -1,36 +0,0 @@
-export class Border {
-  constructor({
-    top = null,
-    right = null,
-    bottom = null,
-    left = null
-  } = {}) {
-    this.top = top || { width: 0, color: '#000000', style: 'solid' };
-    this.right = right || { width: 0, color: '#000000', style: 'solid' };
-    this.bottom = bottom || { width: 0, color: '#000000', style: 'solid' };
-    this.left = left || { width: 0, color: '#000000', style: 'solid' };
-  }
-
-  static all({ width = 1, color = '#000000', style = 'solid' } = {}) {
-    const side = { width, color, style };
-    return new Border({ top: side, right: side, bottom: side, left: side });
-  }
-
-  static symmetric({ vertical = null, horizontal = null } = {}) {
-    return new Border({
-      top: vertical,
-      bottom: vertical,
-      left: horizontal,
-      right: horizontal
-    });
-  }
-
-  toCSSString() {
-    const { width, color, style } = this.bottom;
-    return width > 0 ? `${width}px ${style} ${color}` : 'none';
-  }
-
-  toString() {
-    return `Border(top: ${this.top.width}px, right: ${this.right.width}px)`;
-  }
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/utils/box_constraints.js b/packages/flutterjs_engine/package/material/src/utils/box_constraints.js
deleted file mode 100644
index cabd8e11..00000000
--- a/packages/flutterjs_engine/package/material/src/utils/box_constraints.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Size } from "./size.js";
-
-export class BoxConstraints {
-    constructor(minWidth = 0, maxWidth = Infinity, minHeight = 0, maxHeight = Infinity) {
-        this.minWidth = minWidth;
-        this.maxWidth = maxWidth;
-        this.minHeight = minHeight;
-        this.maxHeight = maxHeight;
-    }
-
-    static tight(size) {
-        return new BoxConstraints(size.width, size.width, size.height, size.height);
-    }
-
-    static loose(size) {
-        return new BoxConstraints(0, size.width, 0, size.height);
-    }
-
-    static expand({ width = Infinity, height = Infinity } = {}) {
-        return new BoxConstraints(0, width, 0, height);
-    }
-
-    static tightFor({ width = null, height = null } = {}) {
-        return new BoxConstraints(
-            width ?? 0,
-            width ?? Infinity,
-            height ?? 0,
-            height ?? Infinity
-        );
-    }
-
-    get isTight() {
-        return this.minWidth === this.maxWidth && this.minHeight === this.maxHeight;
-    }
-
-    get isNormalized() {
-        return this.minWidth <= this.maxWidth && this.minHeight <= this.maxHeight;
-    }
-
-    debugAssertIsValid() {
-        if (!(this.minWidth >= 0 && this.maxWidth >= this.minWidth &&
-            this.minHeight >= 0 && this.maxHeight >= this.minHeight)) {
-            throw new Error(
-                `Invalid BoxConstraints: ${this.minWidth}..${this.maxWidth}, ${this.minHeight}..${this.maxHeight}`
-            );
-        }
-        return true;
-    }
-
-    constrain(size) {
-        return new Size(
-            Math.max(this.minWidth, Math.min(this.maxWidth, size.width)),
-            Math.max(this.minHeight, Math.min(this.maxHeight, size.height))
-        );
-    }
-
-    /**
-     * Returns a new BoxConstraints that respects the given constraints while being 
-     * as close as possible to the original constraints.
-     */
-    enforce(constraints) {
-        if (!constraints) return this;
-
-        return new BoxConstraints(
-            Math.max(this.minWidth, constraints.minWidth),
-            Math.min(this.maxWidth, constraints.maxWidth),
-            Math.max(this.minHeight, constraints.minHeight),
-            Math.min(this.maxHeight, constraints.maxHeight)
-        );
-    }
-
-    widthConstraints() {
-        return new BoxConstraints(this.minWidth, this.maxWidth, 0, Infinity);
-    }
-
-    heightConstraints() {
-        return new BoxConstraints(0, Infinity, this.minHeight, this.maxHeight);
-    }
-
-    tighten({ width = null, height = null } = {}) {
-        return new BoxConstraints(
-            width !== null ? Math.max(this.minWidth, width) : this.minWidth,
-            width !== null ? Math.min(this.maxWidth, width) : this.maxWidth,
-            height !== null ? Math.max(this.minHeight, height) : this.minHeight,
-            height !== null ? Math.min(this.maxHeight, height) : this.maxHeight
-        );
-    }
-
-    copyWith({ minWidth, maxWidth, minHeight, maxHeight } = {}) {
-        return new BoxConstraints(
-            minWidth ?? this.minWidth,
-            maxWidth ?? this.maxWidth,
-            minHeight ?? this.minHeight,
-            maxHeight ?? this.maxHeight
-        );
-    }
-
-    toString() {
-        return `BoxConstraints(${this.minWidth}..${this.maxWidth}, ${this.minHeight}..${this.maxHeight})`;
-    }
-}
diff --git a/packages/flutterjs_engine/package/material/src/utils/box_shadow.js b/packages/flutterjs_engine/package/material/src/utils/box_shadow.js
deleted file mode 100644
index 4d28b2f9..00000000
--- a/packages/flutterjs_engine/package/material/src/utils/box_shadow.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Offset } from './geometry.js';
-export class BoxShadow {
-  constructor({
-    color = '#000000',
-    offset = Offset.zero(),
-    blurRadius = 0,
-    spreadRadius = 0
-  } = {}) {
-    this.color = typeof color === 'string' ? color : color.hex;
-    this.offset = offset;
-    this.blurRadius = blurRadius;
-    this.spreadRadius = spreadRadius;
-  }
-
-  toCSSString() {
-    return `${this.offset.dx}px ${this.offset.dy}px ${this.blurRadius}px ${this.spreadRadius}px ${this.color}`;
-  }
-
-  toString() {
-    return `BoxShadow(color: ${this.color}, blur: ${this.blurRadius})`;
-  }
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/utils/checkbox_theme.js b/packages/flutterjs_engine/package/material/src/utils/checkbox_theme.js
deleted file mode 100644
index 8f4f0423..00000000
--- a/packages/flutterjs_engine/package/material/src/utils/checkbox_theme.js
+++ /dev/null
@@ -1,236 +0,0 @@
-import { EdgeInsets } from './edge_insets.js';
-
-/**
- * Material Design 3 Checkbox Theme
- * Defines the visual properties of Checkbox widgets
- * Follows Flutter Material Design 3 specification
- * 
- * Flutter Reference: https://api.flutter.dev/flutter/material/CheckboxThemeData-class.html
- */
-export class CheckboxTheme {
-  constructor({
-    // Colors
-    fillColor,
-    checkColor,
-    hoverColor,
-    overlayColor,
-    focusColor,
-    
-    // Size & Padding
-    materialTapTargetSize = 'padded',
-    visualDensity,
-    side,
-    shape,
-    mouseCursor,
-    
-    // States
-    splashRadius,
-    
-    // Interaction
-    enableFeedback = true,
-    animationDuration = 200
-  } = {}) {
-    this.fillColor = fillColor;
-    this.checkColor = checkColor;
-    this.hoverColor = hoverColor;
-    this.overlayColor = overlayColor;
-    this.focusColor = focusColor;
-    this.materialTapTargetSize = materialTapTargetSize;
-    this.visualDensity = visualDensity;
-    this.side = side;
-    this.shape = shape;
-    this.mouseCursor = mouseCursor;
-    this.splashRadius = splashRadius ?? 20;
-    this.enableFeedback = enableFeedback;
-    this.animationDuration = animationDuration;
-  }
-
-  /**
-   * Get checkbox size based on tap target
-   * @returns {number} Size in pixels
-   */
-  getCheckboxSize() {
-    return this.materialTapTargetSize === 'padded' ? 48 : 40;
-  }
-
-  /**
-   * Convert to CSS object for DOM rendering
-   * @returns {Object} CSS style object
-   */
-  toCSSObject() {
-    return {
-      width: '20px',
-      height: '20px',
-      cursor: this.mouseCursor || 'pointer',
-      borderRadius: '2px',
-      transition: `all ${this.animationDuration}ms ease`,
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    };
-  }
-
-  /**
-   * Get fill color for checked state
-   * @param {Object} themeColors - Theme colors object
-   * @returns {string} Hex color value
-   */
-  getFillColor(themeColors = {}) {
-    return this.fillColor || themeColors.primary || '#6750A4';
-  }
-
-  /**
-   * Get check icon color
-   * @param {Object} themeColors - Theme colors object
-   * @returns {string} Hex color value
-   */
-  getCheckColor(themeColors = {}) {
-    return this.checkColor || themeColors.onPrimary || '#FFFFFF';
-  }
-
-  /**
-   * Get hover color
-   * @param {Object} themeColors - Theme colors object
-   * @returns {string} Hex color value
-   */
-  getHoverColor(themeColors = {}) {
-    return this.hoverColor || themeColors.primary + '14' || '#6750A414';
-  }
-
-  /**
-   * Get focus color
-   * @param {Object} themeColors - Theme colors object
-   * @returns {string} Hex color value
-   */
-  getFocusColor(themeColors = {}) {
-    return this.focusColor || themeColors.primary + '24' || '#6750A424';
-  }
-
-  /**
-   * Get unchecked state CSS object
-   * @param {Object} themeColors - Theme colors object
-   * @returns {Object} CSS properties
-   */
-  getUncheckedStyle(themeColors = {}) {
-    return {
-      ...this.toCSSObject(),
-      border: `2px solid ${themeColors.onSurfaceVariant || '#79747E'}`,
-      backgroundColor: 'transparent'
-    };
-  }
-
-  /**
-   * Get checked state CSS object
-   * @param {Object} themeColors - Theme colors object
-   * @returns {Object} CSS properties
-   */
-  getCheckedStyle(themeColors = {}) {
-    return {
-      ...this.toCSSObject(),
-      backgroundColor: this.getFillColor(themeColors),
-      border: `2px solid ${this.getFillColor(themeColors)}`
-    };
-  }
-
-  /**
-   * Get disabled state CSS object
-   * @param {Object} themeColors - Theme colors object
-   * @returns {Object} CSS properties
-   */
-  getDisabledStyle(themeColors = {}) {
-    return {
-      ...this.toCSSObject(),
-      opacity: 0.38,
-      cursor: 'not-allowed',
-      pointerEvents: 'none'
-    };
-  }
-
-  /**
-   * Get hover state CSS object
-   * @param {Object} themeColors - Theme colors object
-   * @returns {Object} CSS properties
-   */
-  getHoverStyle(themeColors = {}) {
-    return {
-      backgroundColor: this.getHoverColor(themeColors)
-    };
-  }
-
-  /**
-   * Get focus state CSS object
-   * @param {Object} themeColors - Theme colors object
-   * @returns {Object} CSS properties
-   */
-  getFocusStyle(themeColors = {}) {
-    return {
-      outline: 'none',
-      boxShadow: `0 0 0 ${this.splashRadius}px ${this.getFocusColor(themeColors)}`
-    };
-  }
-
-  /**
-   * Copy this theme with updated properties
-   * @param {Object} properties - Properties to override
-   * @returns {CheckboxTheme} New theme instance
-   */
-  copyWith({
-    fillColor,
-    checkColor,
-    hoverColor,
-    overlayColor,
-    focusColor,
-    materialTapTargetSize,
-    visualDensity,
-    side,
-    shape,
-    mouseCursor,
-    splashRadius,
-    enableFeedback,
-    animationDuration
-  } = {}) {
-    return new CheckboxTheme({
-      fillColor: fillColor ?? this.fillColor,
-      checkColor: checkColor ?? this.checkColor,
-      hoverColor: hoverColor ?? this.hoverColor,
-      overlayColor: overlayColor ?? this.overlayColor,
-      focusColor: focusColor ?? this.focusColor,
-      materialTapTargetSize: materialTapTargetSize ?? this.materialTapTargetSize,
-      visualDensity: visualDensity ?? this.visualDensity,
-      side: side ?? this.side,
-      shape: shape ?? this.shape,
-      mouseCursor: mouseCursor ?? this.mouseCursor,
-      splashRadius: splashRadius ?? this.splashRadius,
-      enableFeedback: enableFeedback ?? this.enableFeedback,
-      animationDuration: animationDuration ?? this.animationDuration
-    });
-  }
-
-  /**
-   * Merge with another CheckboxTheme
-   * @param {CheckboxTheme} other - Theme to merge with
-   * @returns {CheckboxTheme} Merged theme
-   */
-  merge(other) {
-    if (!other) return this;
-    return this.copyWith({
-      fillColor: other.fillColor,
-      checkColor: other.checkColor,
-      hoverColor: other.hoverColor,
-      overlayColor: other.overlayColor,
-      focusColor: other.focusColor,
-      materialTapTargetSize: other.materialTapTargetSize,
-      visualDensity: other.visualDensity,
-      side: other.side,
-      shape: other.shape,
-      mouseCursor: other.mouseCursor,
-      splashRadius: other.splashRadius,
-      enableFeedback: other.enableFeedback,
-      animationDuration: other.animationDuration
-    });
-  }
-
-  toString() {
-    return `CheckboxTheme(fillColor: ${this.fillColor}, checkColor: ${this.checkColor})`;
-  }
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/utils/color.js b/packages/flutterjs_engine/package/material/src/utils/color.js
deleted file mode 100644
index bdf7fd1b..00000000
--- a/packages/flutterjs_engine/package/material/src/utils/color.js
+++ /dev/null
@@ -1,126 +0,0 @@
- class Color {
-  constructor(value) {
-    if (typeof value === 'string') {
-      // Handle hex strings: #RRGGBB or #AARRGGBB
-      const hex = value.replace('#', '');
-      const num = parseInt(hex, 16);
-      if (hex.length === 6) {
-        this._value = (0xFF << 24) | num; // Opaque by default
-      } else if (hex.length === 8) {
-        this._value = num;
-      } else {
-        throw new Error('Invalid hex color string');
-      }
-      this._css = value.length === 7 ? `${value}FF` : value.toUpperCase();
-    } else if (typeof value === 'number') {
-      this._value = value >>> 0; // Ensure unsigned 32-bit
-      const a = (this._value >> 24) & 0xFF;
-      const r = (this._value >> 16) & 0xFF;
-      const g = (this._value >> 8) & 0xFF;
-      const b = this._value & 0xFF;
-      this._css = a === 255
-        ? `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`.toUpperCase()
-        : `#${a.toString(16).padStart(2, '0')}${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`.toUpperCase();
-    } else {
-      throw new Error('Color value must be a hex string or integer');
-    }
-  }
-
-  // --- Static Constructors ---
-
-  static fromARGB(a, r, g, b) {
-    const value = ((a & 0xFF) << 24) | ((r & 0xFF) << 16) | ((g & 0xFF) << 8) | (b & 0xFF);
-    return new Color(value);
-  }
-
-  static fromRGBO(r, g, b, opacity) {
-    if (opacity < 0 || opacity > 1) {
-      throw new Error('Opacity must be between 0.0 and 1.0');
-    }
-    const a = Math.round(opacity * 255);
-    return Color.fromARGB(a, r, g, b);
-  }
-
-  static fromHex(hex) {
-    if (!/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(hex)) {
-      throw new Error('Invalid hex color format. Use #RRGGBB or #AARRGGBB');
-    }
-    return new Color(hex);
-  }
-
-  // --- Instance Methods ---
-
-  withAlpha(alpha) {
-    if (alpha < 0 || alpha > 255) {
-      throw new Error('Alpha must be between 0 and 255');
-    }
-    const r = this.red;
-    const g = this.green;
-    const b = this.blue;
-    return Color.fromARGB(alpha, r, g, b);
-  }
-
-  withOpacity(opacity) {
-    if (opacity < 0 || opacity > 1) {
-      throw new Error('Opacity must be between 0.0 and 1.0');
-    }
-    const alpha = Math.round(opacity * 255);
-    return this.withAlpha(alpha);
-  }
-
-  // --- Getters ---
-
-  get red() {
-    return (this._value >> 16) & 0xFF;
-  }
-
-  get green() {
-    return (this._value >> 8) & 0xFF;
-  }
-
-  get blue() {
-    return this._value & 0xFF;
-  }
-
-  get alpha() {
-    return (this._value >> 24) & 0xFF;
-  }
-
-  get opacity() {
-    return this.alpha / 255;
-  }
-
-  get value() {
-    return this._value;
-  }
-
-  get hex() {
-    const a = this.alpha.toString(16).padStart(2, '0');
-    const r = this.red.toString(16).padStart(2, '0');
-    const g = this.green.toString(16).padStart(2, '0');
-    const b = this.blue.toString(16).padStart(2, '0');
-    return `#${a}${r}${g}${b}`.toUpperCase();
-  }
-
-  // --- Output ---
-
-  toCSSString() {
-    if (this.alpha === 255) {
-      return this.hex.slice(0, 7); // #RRGGBB
-    } else {
-      const r = this.red;
-      const g = this.green;
-      const b = this.blue;
-      const a = (this.alpha / 255).toFixed(4).replace(/\.?0+$/, '');
-      return `rgba(${r}, ${g}, ${b}, ${a})`;
-    }
-  }
-
-  toString() {
-    return this.toCSSString();
-  }
-
-  // Optional: Match Flutter's `computeLuminance()`, etc. can be added later
-}
-
-export { Color };
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/utils/colors_theme.js b/packages/flutterjs_engine/package/material/src/utils/colors_theme.js
deleted file mode 100644
index 1bd05143..00000000
--- a/packages/flutterjs_engine/package/material/src/utils/colors_theme.js
+++ /dev/null
@@ -1,322 +0,0 @@
-import { Color } from '../material/color.js';
-
-/**
- * Material Design 3 Color Theme System
- * Defines all colors used throughout the Material Design system
- * Follows Flutter Material Design 3 specification
- * 
- * Flutter Reference: https://api.flutter.dev/flutter/material/Colors-class.html
- */
-export class ColorsTheme {
-  constructor() {
-    // ========== PRIMARY COLOR SYSTEM ==========
-    this.primary = '#6750A4';
-    this.onPrimary = '#FFFFFF';
-    this.primaryContainer = '#EADDFF';
-    this.onPrimaryContainer = '#21005E';
-    
-    // ========== SECONDARY COLOR SYSTEM ==========
-    this.secondary = '#625B71';
-    this.onSecondary = '#FFFFFF';
-    this.secondaryContainer = '#E8DEF8';
-    this.onSecondaryContainer = '#1D192B';
-    
-    // ========== TERTIARY COLOR SYSTEM ==========
-    this.tertiary = '#7D5260';
-    this.onTertiary = '#FFFFFF';
-    this.tertiaryContainer = '#FFD8E4';
-    this.onTertiaryContainer = '#31111D';
-    
-    // ========== ERROR COLOR SYSTEM ==========
-    this.error = '#B3261E';
-    this.onError = '#FFFFFF';
-    this.errorContainer = '#F9DEDC';
-    this.onErrorContainer = '#410E0B';
-    
-    // ========== NEUTRAL COLOR SYSTEM ==========
-    this.background = '#FFFBFE';
-    this.onBackground = '#1C1B1F';
-    this.surface = '#FFFBFE';
-    this.onSurface = '#1C1B1F';
-    this.surfaceVariant = '#E7E0EC';
-    this.onSurfaceVariant = '#49454E';
-    this.outline = '#79747E';
-    this.outlineVariant = '#CAC7D0';
-    this.scrim = '#000000';
-    
-    // ========== INVERSE COLORS ==========
-    this.inverseSurface = '#313033';
-    this.inverseOnSurface = '#F4EFF4';
-    this.inversePrimary = '#D0BCFF';
-    
-    // ========== SHADOW COLOR ==========
-    this.shadow = '#000000';
-  }
-
-  /**
-   * Create a light theme color scheme
-   * @param {Object} config - Color overrides
-   * @returns {ColorsTheme} Light theme instance
-   * 
-   * @example
-   * const lightTheme = ColorsTheme.light({
-   *   primary: '#FF6B6B'
-   * });
-   */
-  static light(config = {}) {
-    const colors = new ColorsTheme();
-    return Object.assign(colors, config);
-  }
-
-  /**
-   * Create a dark theme color scheme
-   * @param {Object} config - Color overrides
-   * @returns {ColorsTheme} Dark theme instance
-   * 
-   * @example
-   * const darkTheme = ColorsTheme.dark({
-   *   primary: '#D0BCFF'
-   * });
-   */
-  static dark(config = {}) {
-    const colors = new ColorsTheme();
-    const darkConfig = {
-      // Primary (inverted for dark)
-      primary: '#D0BCFF',
-      onPrimary: '#371E55',
-      primaryContainer: '#4F378B',
-      onPrimaryContainer: '#EADDFF',
-      
-      // Secondary (inverted for dark)
-      secondary: '#CCC7D8',
-      onSecondary: '#332D41',
-      secondaryContainer: '#4A4458',
-      onSecondaryContainer: '#E8DEF8',
-      
-      // Tertiary (inverted for dark)
-      tertiary: '#FFB8C8',
-      onTertiary: '#492532',
-      tertiaryContainer: '#633B48',
-      onTertiaryContainer: '#FFD8E4',
-      
-      // Error (stays similar)
-      error: '#F2B8B5',
-      onError: '#601410',
-      errorContainer: '#8C1D18',
-      onErrorContainer: '#F9DEDC',
-      
-      // Neutral (inverted)
-      background: '#1C1B1F',
-      onBackground: '#E7E1E6',
-      surface: '#1C1B1F',
-      onSurface: '#E7E1E6',
-      surfaceVariant: '#49454E',
-      onSurfaceVariant: '#CAC7D0',
-      outline: '#938F99',
-      outlineVariant: '#49454E',
-      
-      // Inverse
-      inverseSurface: '#E7E1E6',
-      inverseOnSurface: '#313033',
-      inversePrimary: '#6750A4',
-      
-      ...config
-    };
-    
-    return Object.assign(colors, darkConfig);
-  }
-
-  /**
-   * Create high contrast theme
-   * @param {Object} config - Color overrides
-   * @returns {ColorsTheme} High contrast theme instance
-   */
-  static highContrast(config = {}) {
-    const colors = new ColorsTheme();
-    const highContrastConfig = {
-      primary: '#000000',
-      onPrimary: '#FFFFFF',
-      primaryContainer: '#000000',
-      onPrimaryContainer: '#FFFFFF',
-      
-      secondary: '#000000',
-      onSecondary: '#FFFFFF',
-      secondaryContainer: '#000000',
-      onSecondaryContainer: '#FFFFFF',
-      
-      tertiary: '#000000',
-      onTertiary: '#FFFFFF',
-      tertiaryContainer: '#000000',
-      onTertiaryContainer: '#FFFFFF',
-      
-      error: '#990000',
-      onError: '#FFFFFF',
-      errorContainer: '#990000',
-      onErrorContainer: '#FFFFFF',
-      
-      background: '#FFFFFF',
-      onBackground: '#000000',
-      surface: '#FFFFFF',
-      onSurface: '#000000',
-      surfaceVariant: '#FFFFFF',
-      onSurfaceVariant: '#000000',
-      outline: '#000000',
-      outlineVariant: '#000000',
-      
-      ...config
-    };
-    
-    return Object.assign(colors, highContrastConfig);
-  }
-
-  /**
-   * Create custom theme from primary color
-   * Generates complementary colors automatically
-   * @param {string} primaryColor - Primary hex color
-   * @param {Object} config - Additional overrides
-   * @returns {ColorsTheme} Custom theme instance
-   * 
-   * @example
-   * const customTheme = ColorsTheme.fromPrimary('#FF6B6B');
-   */
-  static fromPrimary(primaryColor, config = {}) {
-    const colors = new ColorsTheme();
-    const color = new Color(primaryColor);
-    
-    return Object.assign(colors, {
-      primary: primaryColor,
-      onPrimary: '#FFFFFF',
-      primaryContainer: `${primaryColor}20`, // 20% opacity
-      onPrimaryContainer: '#1C1B1F',
-      ...config
-    });
-  }
-
-  /**
-   * Get color by name
-   * @param {string} name - Color name
-   * @returns {string} Hex color value
-   * 
-   * @example
-   * theme.getColor('primary') // '#6750A4'
-   */
-  getColor(name) {
-    return this[name] ?? null;
-  }
-
-  /**
-   * Get all colors as object
-   * @returns {Object} All theme colors
-   */
-  getAllColors() {
-    return {
-      // Primary
-      primary: this.primary,
-      onPrimary: this.onPrimary,
-      primaryContainer: this.primaryContainer,
-      onPrimaryContainer: this.onPrimaryContainer,
-      
-      // Secondary
-      secondary: this.secondary,
-      onSecondary: this.onSecondary,
-      secondaryContainer: this.secondaryContainer,
-      onSecondaryContainer: this.onSecondaryContainer,
-      
-      // Tertiary
-      tertiary: this.tertiary,
-      onTertiary: this.onTertiary,
-      tertiaryContainer: this.tertiaryContainer,
-      onTertiaryContainer: this.onTertiaryContainer,
-      
-      // Error
-      error: this.error,
-      onError: this.onError,
-      errorContainer: this.errorContainer,
-      onErrorContainer: this.onErrorContainer,
-      
-      // Neutral
-      background: this.background,
-      onBackground: this.onBackground,
-      surface: this.surface,
-      onSurface: this.onSurface,
-      surfaceVariant: this.surfaceVariant,
-      onSurfaceVariant: this.onSurfaceVariant,
-      outline: this.outline,
-      outlineVariant: this.outlineVariant,
-      
-      // Inverse
-      inverseSurface: this.inverseSurface,
-      inverseOnSurface: this.inverseOnSurface,
-      inversePrimary: this.inversePrimary,
-      
-      // Shadow
-      shadow: this.shadow,
-      scrim: this.scrim
-    };
-  }
-
-  /**
-   * Generate CSS variables for all colors
-   * @returns {string} CSS variable declarations
-   * 
-   * @example
-   * const css = theme.toCSSVariables();
-   * // Output: --color-primary: #6750A4; ...
-   */
-  toCSSVariables() {
-    const colors = this.getAllColors();
-    let css = ':root {\n';
-    
-    for (const [name, value] of Object.entries(colors)) {
-      const cssVarName = `--color-${name.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
-      css += `  ${cssVarName}: ${value};\n`;
-    }
-    
-    css += '}';
-    return css;
-  }
-
-  /**
-   * Get color with opacity applied
-   * @param {string} colorName - Name of color
-   * @param {number} opacity - Opacity value (0.0 to 1.0)
-   * @returns {string} RGBA color value
-   * 
-   * @example
-   * theme.withOpacity('primary', 0.5) // 'rgba(103, 80, 164, 0.5)'
-   */
-  withOpacity(colorName, opacity) {
-    const hex = this.getColor(colorName);
-    if (!hex) return null;
-    
-    const color = new Color(hex);
-    const r = color.red;
-    const g = color.green;
-    const b = color.blue;
-    
-    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-  }
-
-  /**
-   * Copy this theme with updated colors
-   * @param {Object} colors - Colors to override
-   * @returns {ColorsTheme} New theme instance
-   */
-  copyWith(colors = {}) {
-    return Object.assign(new ColorsTheme(), this, colors);
-  }
-
-  /**
-   * Merge with another color theme
-   * @param {ColorsTheme} other - Theme to merge with
-   * @returns {ColorsTheme} Merged theme
-   */
-  merge(other) {
-    if (!other) return this;
-    return this.copyWith(other.getAllColors());
-  }
-
-  toString() {
-    return `ColorsTheme(primary: ${this.primary}, secondary: ${this.secondary})`;
-  }
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/utils/input_decoration.js b/packages/flutterjs_engine/package/material/src/utils/input_decoration.js
deleted file mode 100644
index 205bd107..00000000
--- a/packages/flutterjs_engine/package/material/src/utils/input_decoration.js
+++ /dev/null
@@ -1,49 +0,0 @@
-export class InputDecoration {
-  constructor({
-    hintText = '',
-    labelText = '',
-    helperText = '',
-    errorText = '',
-    prefixIcon = null,
-    suffixIcon = null,
-    filled = false,
-    fillColor = '#f5f5f5',
-    border = null,
-    enabledBorder = null,
-    focusedBorder = null,
-    errorBorder = null,
-    contentPadding = null,
-    isDense = false,
-    isCollapsed = false,
-    counterText = '',
-    maxLength = null
-  } = {}) {
-    this.hintText = hintText;
-    this.labelText = labelText;
-    this.helperText = helperText;
-    this.errorText = errorText;
-    this.prefixIcon = prefixIcon;
-    this.suffixIcon = suffixIcon;
-    this.filled = filled;
-    this.fillColor = fillColor;
-    this.border = border;
-    this.enabledBorder = enabledBorder;
-    this.focusedBorder = focusedBorder;
-    this.errorBorder = errorBorder;
-    this.contentPadding = contentPadding || EdgeInsets.symmetric({ horizontal: 12, vertical: 8 });
-    this.isDense = isDense;
-    this.isCollapsed = isCollapsed;
-    this.counterText = counterText;
-    this.maxLength = maxLength;
-  }
-
-  getContentPadding() {
-    if (this.isCollapsed) return EdgeInsets.zero();
-    if (this.isDense) return EdgeInsets.all(8);
-    return this.contentPadding;
-  }
-
-  toString() {
-    return `InputDecoration(label: ${this.labelText}, hint: ${this.hintText})`;
-  }
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/other.js b/packages/flutterjs_engine/package/material/src/utils/property/other.js
deleted file mode 100644
index 01760e56..00000000
--- a/packages/flutterjs_engine/package/material/src/utils/property/other.js
+++ /dev/null
@@ -1,277 +0,0 @@
-/**
- * Shadow - Shadow properties
- */
-const ShadowType = Object.freeze({
-  none: 'none',
-  elevation: 'elevation',
-  custom: 'custom'
-});
-
-/**
- * Brightness - Light or dark theme
- */
-const Brightness = Object.freeze({
-  light: 'light',
-  dark: 'dark'
-});
-
-/**
- * MaterialType - Material design surface types
- */
-const MaterialType = Object.freeze({
-  canvas: 'canvas',
-  card: 'card',
-  circle: 'circle',
-  button: 'button',
-  transparency: 'transparency'
-});
-
-/**
- * ============================================================================
- * SCROLL & OVERFLOW ENUMS
- * ============================================================================
- */
-
-/**
- * ScrollDirection - Direction scrolling happens
- */
-const ScrollDirection = Object.freeze({
-  idle: 'idle',
-  forward: 'forward',
-  reverse: 'reverse'
-});
-
-/**
- * ScrollPhysics - How scrolling behaves
- */
-const ScrollPhysics = Object.freeze({
-  bouncingScrollPhysics: 'bouncingScrollPhysics',    // iOS style bounce
-  clampingScrollPhysics: 'clampingScrollPhysics',    // Android style
-  neverScrollableScrollPhysics: 'neverScrollableScrollPhysics'  // No scroll
-});
-
-/**
- * DragStartBehavior - When drag recognition starts
- */
-const DragStartBehavior = Object.freeze({
-  down: 'down',       // Recognize at pointer down
-  start: 'start'      // Recognize at pointer move
-});
-
-/**
- * ============================================================================
- * ANIMATION & TRANSITION ENUMS
- * ============================================================================
- */
-
-/**
- * AnimationStatus - State of animation
- */
-const AnimationStatus = Object.freeze({
-  dismissed: 'dismissed',
-  forward: 'forward',
-  reverse: 'reverse',
-  completed: 'completed'
-});
-
-/**
- * Curve - Animation timing curves
- */
-const Curve = Object.freeze({
-  linear: 'linear',
-  decelerate: 'decelerate',
-  fastLinearToSlowCurveEaseInToEaseOut: 'fastLinearToSlowCurveEaseInToEaseOut',
-  ease: 'ease',
-  easeIn: 'easeIn',
-  easeInToLinear: 'easeInToLinear',
-  easeInSine: 'easeInSine',
-  easeInQuad: 'easeInQuad',
-  easeInCubic: 'easeInCubic',
-  easeInQuart: 'easeInQuart',
-  easeInQuint: 'easeInQuint',
-  easeInExpo: 'easeInExpo',
-  easeInCirc: 'easeInCirc',
-  easeInBack: 'easeInBack',
-  easeOut: 'easeOut',
-  linearToEaseOut: 'linearToEaseOut',
-  easeOutSine: 'easeOutSine',
-  easeOutQuad: 'easeOutQuad',
-  easeOutCubic: 'easeOutCubic',
-  easeOutQuart: 'easeOutQuart',
-  easeOutQuint: 'easeOutQuint',
-  easeOutExpo: 'easeOutExpo',
-  easeOutCirc: 'easeOutCirc',
-  easeOutBack: 'easeOutBack',
-  easeInOut: 'easeInOut',
-  easeInOutSine: 'easeInOutSine',
-  easeInOutQuad: 'easeInOutQuad',
-  easeInOutCubic: 'easeInOutCubic',
-  easeInOutQuart: 'easeInOutQuart',
-  easeInOutQuint: 'easeInOutQuint',
-  easeInOutExpo: 'easeInOutExpo',
-  easeInOutCirc: 'easeInOutCirc',
-  easeInOutBack: 'easeInOutBack',
-  fastOutSlowIn: 'fastOutSlowIn',
-  slowMiddle: 'slowMiddle',
-  elasticIn: 'elasticIn',
-  elasticOut: 'elasticOut',
-  elasticInOut: 'elasticInOut',
-  bounceIn: 'bounceIn',
-  bounceOut: 'bounceOut',
-  bounceInOut: 'bounceInOut'
-});
-
-/**
- * ============================================================================
- * DIALOG & NAVIGATION ENUMS
- * ============================================================================
- */
-
-/**
- * RouteType - Type of route navigation
- */
-const RouteType = Object.freeze({
-  material: 'material',
-  cupertino: 'cupertino',
-  fade: 'fade'
-});
-
-/**
- * TransitionType - How routes transition
- */
-const TransitionType = Object.freeze({
-  fadeIn: 'fadeIn',
-  slideInFromLeft: 'slideInFromLeft',
-  slideInFromRight: 'slideInFromRight',
-  slideInFromTop: 'slideInFromTop',
-  slideInFromBottom: 'slideInFromBottom',
-  scale: 'scale',
-  rotate: 'rotate'
-});
-
-/**
- * PopupMenuPosition - Where popup menu appears
- */
-const PopupMenuPosition = Object.freeze({
-  under: 'under',
-  over: 'over'
-});
-
-/**
- * ============================================================================
- * GESTURE & HIT TEST ENUMS
- * ============================================================================
- */
-
-/**
- * HitTestBehavior - How a widget responds to hit tests
- */
-const HitTestBehavior = Object.freeze({
-  deferToChild: 'deferToChild',     // Only hit if child hit
-  absorb: 'absorb',                  // Always hit, absorb event
-  translucent: 'translucent'         // Hit but pass through to children
-});
-
-/**
- * PointerDeviceKind - Type of pointer device
- */
-const PointerDeviceKind = Object.freeze({
-  touch: 'touch',
-  mouse: 'mouse',
-  stylus: 'stylus',
-  invertedStylus: 'invertedStylus',
-  unknown: 'unknown'
-});
-
-/**
- * ============================================================================
- * IMAGE & ASSET ENUMS
- * ============================================================================
- */
-
-/**
- * ImageRepeat - How to repeat an image
- */
-const ImageRepeat = Object.freeze({
-  noRepeat: 'noRepeat',
-  repeat: 'repeat',
-  repeatX: 'repeatX',
-  repeatY: 'repeatY'
-});
-
-/**
- * BoxFit - How to fit image into container
- */
-const BoxFit = Object.freeze({
-  fill: 'fill',             // Stretch to fill (distort)
-  contain: 'contain',       // Fit entire image (letterbox)
-  cover: 'cover',           // Fill container (crop)
-  fitWidth: 'fitWidth',     // Match width, crop height
-  fitHeight: 'fitHeight',   // Match height, crop width
-  none: 'none',             // No scaling
-  scaleDown: 'scaleDown'    // Downscale only, don't upscale
-});
-
-/**
- * ImageChunkEvent - Progress of image loading
- */
-const ImageChunkEvent = Object.freeze({
-  loading: 'loading',
-  complete: 'complete'
-});
-
-/**
- * ============================================================================
- * PLATFORM ENUMS
- * ============================================================================
- */
-
-/**
- * TargetPlatform - Current platform
- */
-const TargetPlatform = Object.freeze({
-  android: 'android',
-  fuchsia: 'fuchsia',
-  iOS: 'iOS',
-  linux: 'linux',
-  macOS: 'macOS',
-  windows: 'windows',
-  web: 'web'
-});
-
-/**
- * ============================================================================
- * STATUS BAR ENUMS
- * ============================================================================
- */
-
-/**
- * SystemUiOverlayStyle - Status bar and navigation bar styling
- */
-const SystemUiOverlayStyle = Object.freeze({
-  light: 'light',
-  dark: 'dark',
-  lightStatus: 'lightStatus',
-  darkStatus: 'darkStatus'
-});
-
-export {
-  ShadowType,
-  Brightness,
-  MaterialType,
-  ScrollDirection,
-  ScrollPhysics,  
-  DragStartBehavior,
-  AnimationStatus,
-  Curve,
-  RouteType,
-  TransitionType,
-  PopupMenuPosition,
-  HitTestBehavior,
-  PointerDeviceKind,
-  ImageRepeat,
-  BoxFit,
-  ImageChunkEvent,
-  TargetPlatform,
-  SystemUiOverlayStyle
-};  
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/utils/switch_theme.js b/packages/flutterjs_engine/package/material/src/utils/switch_theme.js
deleted file mode 100644
index a317cf70..00000000
--- a/packages/flutterjs_engine/package/material/src/utils/switch_theme.js
+++ /dev/null
@@ -1,251 +0,0 @@
-/**
- * Material Design 3 Switch Theme
- * Defines the visual properties of Switch widgets
- * Follows Flutter Material Design 3 specification
- * 
- * Flutter Reference: https://api.flutter.dev/flutter/material/SwitchThemeData-class.html
- */
-export class SwitchTheme {
-  constructor({
-    // Colors
-    thumbColor,
-    trackColor,
-    trackOutlineColor,
-    overlayColor,
-    focusColor,
-    hoverColor,
-    
-    // Size
-    thumbSize = 4, // radius factor, 4 = 20px diameter
-    trackHeight = 28,
-    
-    // Interaction
-    materialTapTargetSize = 'padded',
-    splashRadius = 20,
-    mouseCursor,
-    enableFeedback = true,
-    animationDuration = 200
-  } = {}) {
-    this.thumbColor = thumbColor;
-    this.trackColor = trackColor;
-    this.trackOutlineColor = trackOutlineColor;
-    this.overlayColor = overlayColor;
-    this.focusColor = focusColor;
-    this.hoverColor = hoverColor;
-    this.thumbSize = thumbSize;
-    this.trackHeight = trackHeight;
-    this.materialTapTargetSize = materialTapTargetSize;
-    this.splashRadius = splashRadius;
-    this.mouseCursor = mouseCursor;
-    this.enableFeedback = enableFeedback;
-    this.animationDuration = animationDuration;
-  }
-
-  /**
-   * Get switch total tap target size
-   * @returns {number} Size in pixels
-   */
-  getSwitchSize() {
-    return this.materialTapTargetSize === 'padded' ? 48 : 40;
-  }
-
-  /**
-   * Get thumb (circle) diameter
-   * @returns {number} Diameter in pixels
-   */
-  getThumbDiameter() {
-    return this.thumbSize * 2;
-  }
-
-  /**
-   * Get track width
-   * @returns {number} Width in pixels
-   */
-  getTrackWidth() {
-    return this.getThumbDiameter() * 2;
-  }
-
-  /**
-   * Convert to CSS object for DOM rendering
-   * @returns {Object} CSS style object
-   */
-  toCSSObject() {
-    return {
-      position: 'relative',
-      display: 'inline-flex',
-      alignItems: 'center',
-      cursor: this.mouseCursor || 'pointer',
-      userSelect: 'none'
-    };
-  }
-
-  /**
-   * Get track CSS object (off state)
-   * @param {Object} themeColors - Theme colors object
-   * @returns {Object} CSS properties
-   */
-  getTrackOffStyle(themeColors = {}) {
-    return {
-      width: `${this.getTrackWidth()}px`,
-      height: `${this.trackHeight}px`,
-      borderRadius: `${this.trackHeight / 2}px`,
-      backgroundColor: themeColors.surfaceVariant || '#E7E0EC',
-      border: `1px solid ${this.trackOutlineColor || (themeColors.outline || '#79747E')}`,
-      transition: `all ${this.animationDuration}ms ease`,
-      position: 'absolute',
-      top: '50%',
-      transform: 'translateY(-50%)'
-    };
-  }
-
-  /**
-   * Get track CSS object (on state)
-   * @param {Object} themeColors - Theme colors object
-   * @returns {Object} CSS properties
-   */
-  getTrackOnStyle(themeColors = {}) {
-    return {
-      ...this.getTrackOffStyle(themeColors),
-      backgroundColor: themeColors.primary || '#6750A4',
-      border: `1px solid ${themeColors.primary || '#6750A4'}`
-    };
-  }
-
-  /**
-   * Get thumb CSS object (off state)
-   * @param {Object} themeColors - Theme colors object
-   * @returns {Object} CSS properties
-   */
-  getThumbOffStyle(themeColors = {}) {
-    return {
-      width: `${this.getThumbDiameter()}px`,
-      height: `${this.getThumbDiameter()}px`,
-      borderRadius: '50%',
-      backgroundColor: themeColors.outline || '#79747E',
-      position: 'absolute',
-      left: `4px`,
-      transition: `all ${this.animationDuration}ms ease`,
-      zIndex: 1,
-      boxShadow: `0 2px 4px rgba(0, 0, 0, 0.1)`
-    };
-  }
-
-  /**
-   * Get thumb CSS object (on state)
-   * @param {Object} themeColors - Theme colors object
-   * @returns {Object} CSS properties
-   */
-  getThumbOnStyle(themeColors = {}) {
-    const trackWidth = this.getTrackWidth();
-    const thumbDiam = this.getThumbDiameter();
-    const rightPos = trackWidth - thumbDiam - 4;
-    
-    return {
-      ...this.getThumbOffStyle(themeColors),
-      backgroundColor: themeColors.onPrimary || '#FFFFFF',
-      left: `${rightPos}px`,
-      boxShadow: `0 4px 8px rgba(0, 0, 0, 0.15)`
-    };
-  }
-
-  /**
-   * Get disabled state CSS object
-   * @param {Object} themeColors - Theme colors object
-   * @returns {Object} CSS properties
-   */
-  getDisabledStyle(themeColors = {}) {
-    return {
-      opacity: 0.38,
-      cursor: 'not-allowed',
-      pointerEvents: 'none'
-    };
-  }
-
-  /**
-   * Get hover overlay CSS object
-   * @param {Object} themeColors - Theme colors object
-   * @returns {Object} CSS properties
-   */
-  getHoverStyle(themeColors = {}) {
-    return {
-      backgroundColor: this.hoverColor || (themeColors.primary + '14') || '#6750A414'
-    };
-  }
-
-  /**
-   * Get focus state CSS object
-   * @param {Object} themeColors - Theme colors object
-   * @returns {Object} CSS properties
-   */
-  getFocusStyle(themeColors = {}) {
-    return {
-      outline: 'none',
-      boxShadow: `0 0 0 ${this.splashRadius}px ${this.focusColor || (themeColors.primary + '24') || '#6750A424'}`
-    };
-  }
-
-  /**
-   * Copy this theme with updated properties
-   * @param {Object} properties - Properties to override
-   * @returns {SwitchTheme} New theme instance
-   */
-  copyWith({
-    thumbColor,
-    trackColor,
-    trackOutlineColor,
-    overlayColor,
-    focusColor,
-    hoverColor,
-    thumbSize,
-    trackHeight,
-    materialTapTargetSize,
-    splashRadius,
-    mouseCursor,
-    enableFeedback,
-    animationDuration
-  } = {}) {
-    return new SwitchTheme({
-      thumbColor: thumbColor ?? this.thumbColor,
-      trackColor: trackColor ?? this.trackColor,
-      trackOutlineColor: trackOutlineColor ?? this.trackOutlineColor,
-      overlayColor: overlayColor ?? this.overlayColor,
-      focusColor: focusColor ?? this.focusColor,
-      hoverColor: hoverColor ?? this.hoverColor,
-      thumbSize: thumbSize ?? this.thumbSize,
-      trackHeight: trackHeight ?? this.trackHeight,
-      materialTapTargetSize: materialTapTargetSize ?? this.materialTapTargetSize,
-      splashRadius: splashRadius ?? this.splashRadius,
-      mouseCursor: mouseCursor ?? this.mouseCursor,
-      enableFeedback: enableFeedback ?? this.enableFeedback,
-      animationDuration: animationDuration ?? this.animationDuration
-    });
-  }
-
-  /**
-   * Merge with another SwitchTheme
-   * @param {SwitchTheme} other - Theme to merge with
-   * @returns {SwitchTheme} Merged theme
-   */
-  merge(other) {
-    if (!other) return this;
-    return this.copyWith({
-      thumbColor: other.thumbColor,
-      trackColor: other.trackColor,
-      trackOutlineColor: other.trackOutlineColor,
-      overlayColor: other.overlayColor,
-      focusColor: other.focusColor,
-      hoverColor: other.hoverColor,
-      thumbSize: other.thumbSize,
-      trackHeight: other.trackHeight,
-      materialTapTargetSize: other.materialTapTargetSize,
-      splashRadius: other.splashRadius,
-      mouseCursor: other.mouseCursor,
-      enableFeedback: other.enableFeedback,
-      animationDuration: other.animationDuration
-    });
-  }
-
-  toString() {
-    return `SwitchTheme(trackHeight: ${this.trackHeight}px, thumbSize: ${this.getThumbDiameter()}px)`;
-  }
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/utils/typography_theme.js b/packages/flutterjs_engine/package/material/src/utils/typography_theme.js
deleted file mode 100644
index 25d40fd2..00000000
--- a/packages/flutterjs_engine/package/material/src/utils/typography_theme.js
+++ /dev/null
@@ -1,439 +0,0 @@
-import { TextStyle } from '../material/text.js';
-
-/**
- * Material Design 3 Typography System
- * Defines 13 text styles following Material Design 3 scale
- * Follows Flutter Material Design 3 specification
- * 
- * Flutter Reference: https://api.flutter.dev/flutter/material/TextTheme-class.html
- */
-export class TypographyTheme {
-  constructor({
-    fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-    displayLarge,
-    displayMedium,
-    displaySmall,
-    headlineLarge,
-    headlineMedium,
-    headlineSmall,
-    titleLarge,
-    titleMedium,
-    titleSmall,
-    bodyLarge,
-    bodyMedium,
-    bodySmall,
-    labelLarge,
-    labelMedium,
-    labelSmall
-  } = {}) {
-    this.fontFamily = fontFamily;
-
-    // ========== DISPLAY STYLES (Large headlines) ==========
-    // Used for: Large prominent text
-    this.displayLarge = displayLarge || new TextStyle({
-      fontSize: 57,
-      fontWeight: 400,
-      lineHeight: 64,
-      letterSpacing: 0,
-      fontFamily: this.fontFamily
-    });
-
-    this.displayMedium = displayMedium || new TextStyle({
-      fontSize: 45,
-      fontWeight: 400,
-      lineHeight: 52,
-      letterSpacing: 0,
-      fontFamily: this.fontFamily
-    });
-
-    this.displaySmall = displaySmall || new TextStyle({
-      fontSize: 36,
-      fontWeight: 400,
-      lineHeight: 44,
-      letterSpacing: 0,
-      fontFamily: this.fontFamily
-    });
-
-    // ========== HEADLINE STYLES (Section headlines) ==========
-    // Used for: Page titles, section headers
-    this.headlineLarge = headlineLarge || new TextStyle({
-      fontSize: 32,
-      fontWeight: 700,
-      lineHeight: 40,
-      letterSpacing: 0,
-      fontFamily: this.fontFamily
-    });
-
-    this.headlineMedium = headlineMedium || new TextStyle({
-      fontSize: 28,
-      fontWeight: 700,
-      lineHeight: 36,
-      letterSpacing: 0,
-      fontFamily: this.fontFamily
-    });
-
-    this.headlineSmall = headlineSmall || new TextStyle({
-      fontSize: 24,
-      fontWeight: 700,
-      lineHeight: 32,
-      letterSpacing: 0,
-      fontFamily: this.fontFamily
-    });
-
-    // ========== TITLE STYLES (Emphasis text) ==========
-    // Used for: Card titles, dialog titles
-    this.titleLarge = titleLarge || new TextStyle({
-      fontSize: 22,
-      fontWeight: 700,
-      lineHeight: 28,
-      letterSpacing: 0,
-      fontFamily: this.fontFamily
-    });
-
-    this.titleMedium = titleMedium || new TextStyle({
-      fontSize: 16,
-      fontWeight: 700,
-      lineHeight: 24,
-      letterSpacing: 0.15,
-      fontFamily: this.fontFamily
-    });
-
-    this.titleSmall = titleSmall || new TextStyle({
-      fontSize: 14,
-      fontWeight: 700,
-      lineHeight: 20,
-      letterSpacing: 0.1,
-      fontFamily: this.fontFamily
-    });
-
-    // ========== BODY STYLES (Main text) ==========
-    // Used for: Body text, descriptions
-    this.bodyLarge = bodyLarge || new TextStyle({
-      fontSize: 16,
-      fontWeight: 400,
-      lineHeight: 24,
-      letterSpacing: 0.15,
-      fontFamily: this.fontFamily
-    });
-
-    this.bodyMedium = bodyMedium || new TextStyle({
-      fontSize: 14,
-      fontWeight: 400,
-      lineHeight: 20,
-      letterSpacing: 0.25,
-      fontFamily: this.fontFamily
-    });
-
-    this.bodySmall = bodySmall || new TextStyle({
-      fontSize: 12,
-      fontWeight: 400,
-      lineHeight: 16,
-      letterSpacing: 0.4,
-      fontFamily: this.fontFamily
-    });
-
-    // ========== LABEL STYLES (Small emphasis) ==========
-    // Used for: Buttons, chips, tags
-    this.labelLarge = labelLarge || new TextStyle({
-      fontSize: 14,
-      fontWeight: 700,
-      lineHeight: 20,
-      letterSpacing: 0.1,
-      fontFamily: this.fontFamily
-    });
-
-    this.labelMedium = labelMedium || new TextStyle({
-      fontSize: 12,
-      fontWeight: 700,
-      lineHeight: 16,
-      letterSpacing: 0.5,
-      fontFamily: this.fontFamily
-    });
-
-    this.labelSmall = labelSmall || new TextStyle({
-      fontSize: 11,
-      fontWeight: 700,
-      lineHeight: 16,
-      letterSpacing: 0.5,
-      fontFamily: this.fontFamily
-    });
-  }
-
-  /**
-   * Get text style by name
-   * @param {string} styleName - Name of the style
-   * @returns {TextStyle} Text style instance
-   * 
-   * @example
-   * const style = theme.getStyle('bodyLarge');
-   */
-  getStyle(styleName) {
-    return this[styleName] ?? null;
-  }
-
-  /**
-   * Get all text styles as object
-   * @returns {Object} All text styles
-   */
-  getAllStyles() {
-    return {
-      displayLarge: this.displayLarge,
-      displayMedium: this.displayMedium,
-      displaySmall: this.displaySmall,
-      headlineLarge: this.headlineLarge,
-      headlineMedium: this.headlineMedium,
-      headlineSmall: this.headlineSmall,
-      titleLarge: this.titleLarge,
-      titleMedium: this.titleMedium,
-      titleSmall: this.titleSmall,
-      bodyLarge: this.bodyLarge,
-      bodyMedium: this.bodyMedium,
-      bodySmall: this.bodySmall,
-      labelLarge: this.labelLarge,
-      labelMedium: this.labelMedium,
-      labelSmall: this.labelSmall
-    };
-  }
-
-  /**
-   * Create a compact typography scale (smaller sizes)
-   * @param {Object} config - Overrides
-   * @returns {TypographyTheme} Compact theme
-   * 
-   * @example
-   * const compact = TypographyTheme.compact();
-   */
-  static compact(config = {}) {
-    return new TypographyTheme({
-      displayLarge: new TextStyle({
-        fontSize: 45,
-        fontWeight: 400,
-        lineHeight: 52,
-        letterSpacing: 0
-      }),
-      displayMedium: new TextStyle({
-        fontSize: 36,
-        fontWeight: 400,
-        lineHeight: 44,
-        letterSpacing: 0
-      }),
-      displaySmall: new TextStyle({
-        fontSize: 28,
-        fontWeight: 400,
-        lineHeight: 36,
-        letterSpacing: 0
-      }),
-      headlineLarge: new TextStyle({
-        fontSize: 24,
-        fontWeight: 700,
-        lineHeight: 32,
-        letterSpacing: 0
-      }),
-      headlineMedium: new TextStyle({
-        fontSize: 20,
-        fontWeight: 700,
-        lineHeight: 28,
-        letterSpacing: 0
-      }),
-      headlineSmall: new TextStyle({
-        fontSize: 18,
-        fontWeight: 700,
-        lineHeight: 26,
-        letterSpacing: 0
-      }),
-      ...config
-    });
-  }
-
-  /**
-   * Create an expanded typography scale (larger sizes)
-   * @param {Object} config - Overrides
-   * @returns {TypographyTheme} Expanded theme
-   * 
-   * @example
-   * const expanded = TypographyTheme.expanded();
-   */
-  static expanded(config = {}) {
-    return new TypographyTheme({
-      displayLarge: new TextStyle({
-        fontSize: 72,
-        fontWeight: 400,
-        lineHeight: 80,
-        letterSpacing: 0
-      }),
-      displayMedium: new TextStyle({
-        fontSize: 56,
-        fontWeight: 400,
-        lineHeight: 64,
-        letterSpacing: 0
-      }),
-      displaySmall: new TextStyle({
-        fontSize: 44,
-        fontWeight: 400,
-        lineHeight: 52,
-        letterSpacing: 0
-      }),
-      headlineLarge: new TextStyle({
-        fontSize: 40,
-        fontWeight: 700,
-        lineHeight: 48,
-        letterSpacing: 0
-      }),
-      headlineMedium: new TextStyle({
-        fontSize: 36,
-        fontWeight: 700,
-        lineHeight: 44,
-        letterSpacing: 0
-      }),
-      headlineSmall: new TextStyle({
-        fontSize: 32,
-        fontWeight: 700,
-        lineHeight: 40,
-        letterSpacing: 0
-      }),
-      ...config
-    });
-  }
-
-  /**
-   * Generate CSS variables for all text styles
-   * @returns {string} CSS variable declarations
-   * 
-   * @example
-   * const css = theme.toCSSVariables();
-   * // Output: --text-display-large: 57px ... ;
-   */
-  toCSSVariables() {
-    let css = ':root {\n';
-    const styles = this.getAllStyles();
-    
-    for (const [name, style] of Object.entries(styles)) {
-      const cssVarName = `--text-${name.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
-      css += `  ${cssVarName}: ${style.fontSize}px/${style.lineHeight}px ${style.fontWeight} ${this.fontFamily};\n`;
-      css += `  ${cssVarName}-letter-spacing: ${style.letterSpacing}px;\n`;
-    }
-    
-    css += '}';
-    return css;
-  }
-
-  /**
-   * Generate CSS classes for all text styles
-   * @returns {string} CSS class definitions
-   * 
-   * @example
-   * const css = theme.toCSSClasses();
-   * // Output: .text-display-large { font-size: 57px; ... }
-   */
-  toCSSClasses() {
-    let css = '';
-    const styles = this.getAllStyles();
-    
-    for (const [name, style] of Object.entries(styles)) {
-      const className = `.text-${name.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
-      const styleObj = style.toCSSObject();
-      css += `${className} {\n`;
-      for (const [prop, value] of Object.entries(styleObj)) {
-        css += `  ${prop}: ${value};\n`;
-      }
-      css += '}\n\n';
-    }
-    
-    return css;
-  }
-
-  /**
-   * Apply font family to all styles
-   * @param {string} fontFamily - Font family name
-   * @returns {TypographyTheme} Updated theme
-   */
-  withFontFamily(fontFamily) {
-    const styles = this.getAllStyles();
-    const updatedStyles = {};
-    
-    for (const [name, style] of Object.entries(styles)) {
-      updatedStyles[name] = style.copyWith({ fontFamily });
-    }
-    
-    return new TypographyTheme({
-      fontFamily,
-      ...updatedStyles
-    });
-  }
-
-  /**
-   * Scale all font sizes by a factor
-   * @param {number} factor - Scale factor (1.0 = no change)
-   * @returns {TypographyTheme} Scaled theme
-   * 
-   * @example
-   * const scaledTheme = theme.scale(1.2); // 20% larger
-   */
-  scale(factor) {
-    const styles = this.getAllStyles();
-    const scaledStyles = {};
-    
-    for (const [name, style] of Object.entries(styles)) {
-      scaledStyles[name] = style.copyWith({
-        fontSize: Math.round(style.fontSize * factor),
-        lineHeight: Math.round(style.lineHeight * factor)
-      });
-    }
-    
-    return new TypographyTheme({
-      fontFamily: this.fontFamily,
-      ...scaledStyles
-    });
-  }
-
-  /**
-   * Copy theme with updated text styles
-   * @param {Object} styles - Styles to override
-   * @returns {TypographyTheme} New theme instance
-   */
-  copyWith(styles = {}) {
-    return new TypographyTheme({
-      fontFamily: this.fontFamily,
-      ...this.getAllStyles(),
-      ...styles
-    });
-  }
-
-  /**
-   * Merge with another typography theme
-   * @param {TypographyTheme} other - Theme to merge with
-   * @returns {TypographyTheme} Merged theme
-   */
-  merge(other) {
-    if (!other) return this;
-    return this.copyWith(other.getAllStyles());
-  }
-
-  /**
-   * Get typography scale information
-   * @returns {Object} Scale details
-   */
-  getScaleInfo() {
-    const styles = this.getAllStyles();
-    const sizes = {};
-    
-    for (const [name, style] of Object.entries(styles)) {
-      sizes[name] = {
-        fontSize: style.fontSize,
-        fontWeight: style.fontWeight,
-        lineHeight: style.lineHeight,
-        letterSpacing: style.letterSpacing
-      };
-    }
-    
-    return {
-      fontFamily: this.fontFamily,
-      scales: sizes,
-      totalStyles: Object.keys(sizes).length
-    };
-  }
-
-  toString() {
-    return `TypographyTheme(fontFamily: ${this.fontFamily}, scales: 13)`;
-  }
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/utils/utils.js b/packages/flutterjs_engine/package/material/src/utils/utils.js
deleted file mode 100644
index 2e65f38e..00000000
--- a/packages/flutterjs_engine/package/material/src/utils/utils.js
+++ /dev/null
@@ -1,76 +0,0 @@
-// index.js (or index.ts) - Barrel file for all design system utilities
-
-// ===================================================================
-// Utils (added 2 days ago)
-// ===================================================================
-export * from './property/alignment.js';
-export * from './property/alignment_directional.js';
-export * from './property/axis.js';
-export * from './border.js';
-// export * from './border_radius.js';
-export * from './property/border_style.js';
-export * from './property/box_fit.js';
-export * from './box_shadow.js';
-export * from './property/clip.js';
-export * from './color.js';
-export * from './property/cross_axis_alignment.js';
-export * from './duration.js';
-export * from './edge_insets.js';
-export * from './property/font_weight.js';
-export * from './input_decoration.js';
-export * from './linear_gradient.js';
-export * from './property/main_axis_alignment.js';
-// export * from './offset.js'; // Commented out: Offset is exported from geometry.js to avoid conflict
-// export * from './radius.js';
-// export * from './rect.js';
-// export * from './size.js';
-export * from './property/text_align.js';
-export * from './property/text_overflow.js';
-
-export * from './property/text_direction.js';
-
-
-// ===================================================================
-// Themes (updated with new properties)
-// ===================================================================
-export * from './badge_theme.js';
-export * from './checkbox_theme.js';
-export * from './colors_theme.js';
-export * from './divider_theme.js';
-export * from './motion_theme.js';
-export * from './scrollbar_theme.js';
-export * from './shadows_theme.js';
-export * from './switch_theme.js';
-export * from './typography_theme.js';
-
-
-// ===================================================================
-// New Properties Added (yesterday)
-// ===================================================================
-export * from './property/axis_direction.js';
-export * from './property/blend_mode.js';
-export * from './property/box_shape.js';
-export * from './property/decoration_position.js';
-export * from './property/filter_quality.js';
-export * from './property/flex_fit.js';
-export * from './property/font_style.js';
-export * from './property/horizontal_direction.js';
-export * from './property/keyboard_type.js';
-export * from './property/main_axis_size.js';
-export * from './property/shape_border.js';
-export * from './property/stack_fit.js';
-export * from './property/text_baseline.js';
-export * from './property/text_decoration.js';
-export * from './property/text_direction.js';
-export * from './property/text_input_action.js';
-export * from './property/text_input_type.js';
-export * from './property/vertical_direction.js';
-export * from './property/wrap_alignment.js';
-export * from './property/wrap_cross_alignment.js';
-
-
-// ===================================================================
-// Other / Misc
-// ===================================================================
-export * from './property/other.js';
-export * from './geometry.js';
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/center.js b/packages/flutterjs_engine/package/material/src/widgets/compoment/center.js
deleted file mode 100644
index 3baa29be..00000000
--- a/packages/flutterjs_engine/package/material/src/widgets/compoment/center.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import { Widget, StatelessWidget } from '../../core/widget_element.js';
-import { VNode } from '@flutterjs/vdom/vnode';
-import { Element } from '@flutterjs/runtime';
-import { Alignment } from '../../utils/utils.js';
-
-class Align extends Widget {
-  constructor({
-    key = null,
-    alignment = Alignment.center,
-    widthFactor = null,
-    heightFactor = null,
-    child = null
-  } = {}) {
-    super(key);
-    this.alignment = alignment;
-    this.widthFactor = widthFactor;
-    this.heightFactor = heightFactor;
-    this.child = child;
-  }
-
-  /**
-   * Build widget tree - called by AlignElement
-   */
-  build(context) {
-    const inlineStyles = this._getInlineStyles();
-    const elementId = context.element.getElementId();
-    const widgetPath = context.element.getWidgetPath();
-
-    let childVNode = null;
-    if (this.child) {
-      const childElement = this.child.createElement(context.element, context.element.runtime);
-      childElement.mount(context.element);
-      childVNode = childElement.performRebuild();
-    }
-
-    return new VNode({
-      tag: 'div',
-      props: {
-        style: inlineStyles,
-        'data-element-id': elementId,
-        'data-widget-path': widgetPath,
-        'data-widget': 'Align',
-        'data-alignment': this.alignment?.toString()
-      },
-      children: childVNode ? [childVNode] : [],
-      key: this.key
-    });
-  }
-
-  _getInlineStyles() {
-    const styles = {
-      display: 'flex',
-      ...this._getAlignmentStyles()
-    };
-
-    if (this.widthFactor !== null) {
-      styles.width = `${this.widthFactor * 100}%`;
-    } else {
-      styles.width = '100%';
-    }
-
-    if (this.heightFactor !== null) {
-      styles.height = `${this.heightFactor * 100}%`;
-    } else {
-      styles.height = '100%';
-    }
-
-    return styles;
-  }
-
-  _getAlignmentStyles() {
-    const alignmentStr = this.alignment?.toString() || 'center';
-    const alignmentMap = {
-      'top-left': { justifyContent: 'flex-start', alignItems: 'flex-start' },
-      'top-center': { justifyContent: 'center', alignItems: 'flex-start' },
-      'top-right': { justifyContent: 'flex-end', alignItems: 'flex-start' },
-      'center-left': { justifyContent: 'flex-start', alignItems: 'center' },
-      'center': { justifyContent: 'center', alignItems: 'center' },
-      'center-right': { justifyContent: 'flex-end', alignItems: 'center' },
-      'bottom-left': { justifyContent: 'flex-start', alignItems: 'flex-end' },
-      'bottom-center': { justifyContent: 'center', alignItems: 'flex-end' },
-      'bottom-right': { justifyContent: 'flex-end', alignItems: 'flex-end' }
-    };
-
-    return alignmentMap[alignmentStr] || alignmentMap['center'];
-  }
-
-  createElement(parent, runtime) {
-    return new AlignElement(this, parent, runtime);
-  }
-
-  debugFillProperties(properties) {
-    super.debugFillProperties(properties);
-    properties.push({ name: 'alignment', value: this.alignment });
-    properties.push({ name: 'widthFactor', value: this.widthFactor });
-    properties.push({ name: 'heightFactor', value: this.heightFactor });
-    if (this.child) {
-      properties.push({ name: 'child', value: this.child.constructor.name });
-    }
-  }
-}
-
-class AlignElement extends Element {
-  performRebuild() {
-    return this.widget.build(this.context);
-  }
-}
-
-class Center extends Align {
-  constructor({
-    key = null,
-    widthFactor = null,
-    heightFactor = null,
-    child = null
-  } = {}) {
-    super({
-      key,
-      alignment: Alignment.center,
-      widthFactor,
-      heightFactor,
-      child
-    });
-  }
-}
-
-export { Align, Center };
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/clip.js b/packages/flutterjs_engine/package/material/src/widgets/compoment/clip.js
deleted file mode 100644
index 807a83ac..00000000
--- a/packages/flutterjs_engine/package/material/src/widgets/compoment/clip.js
+++ /dev/null
@@ -1,1123 +0,0 @@
-import { ProxyWidget } from '../../core/widget_element.js';
-import { VNode } from '@flutterjs/vdom/vnode';
-import { Clip } from '../../utils/utils.js';
-
-// ============================================================================
-// CUSTOM CLIPPER BASE CLASS
-// Override getClip() to return clip-path CSS string
-// ============================================================================
-
-class CustomClipper {
-    constructor() {
-        if (new.target === CustomClipper) {
-            throw new Error('CustomClipper is abstract');
-        }
-    }
-
-    /**
-     * Get the clip path (CSS clip-path string)
-     * Override in subclasses
-     */
-    getClip(size) {
-        throw new Error('getClip() must be implemented');
-    }
-
-    /**
-     * Check if should reclip
-     */
-    shouldReclip(oldClipper) {
-        return true;
-    }
-}
-
-// ============================================================================
-// CLIP RECT WIDGET
-// Clips child to rectangular bounds
-// ============================================================================
-
-class ClipRect extends ProxyWidget {
-    constructor({
-        key = null,
-        clipper = null,
-        clipBehavior = Clip.hardEdge,
-        child = null
-    } = {}) {
-        super({ key, child });
-
-        if (clipper && !(clipper instanceof CustomClipper)) {
-            throw new Error(
-                `ClipRect requires a CustomClipper instance, got: ${typeof clipper}`
-            );
-        }
-
-        if (!Object.values(Clip).includes(clipBehavior)) {
-            throw new Error(
-                `Invalid clipBehavior: ${clipBehavior}`
-            );
-        }
-
-        this.clipper = clipper;
-        this.clipBehavior = clipBehavior;
-        this._renderObject = null;
-        this._containerElement = null;
-    }
-
-    /**
-     * Create render object
-     */
-    createRenderObject(context) {
-        return new RenderClipRect({
-            clipper: this.clipper,
-            clipBehavior: this.clipBehavior
-        });
-    }
-
-    /**
-     * Update render object
-     */
-    updateRenderObject(context, renderObject) {
-        renderObject.clipper = this.clipper;
-        renderObject.clipBehavior = this.clipBehavior;
-    }
-
-    /**
-     * Unmount render object and clean up
-     */
-    unmountRenderObject(renderObject) {
-        renderObject.clipper = null;
-    }
-
-    /**
-     * Build the widget
-     */
-    build(context) {
-        if (!this._renderObject) {
-            this._renderObject = this.createRenderObject(context);
-        } else {
-            this.updateRenderObject(context, this._renderObject);
-        }
-
-        let childVNode = null;
-        if (this.child) {
-            const childElement = this.child.createElement(context.element, context.element.runtime);
-            childElement.mount(context.element);
-            childVNode = childElement.performRebuild();
-        }
-
-        const elementId = context.element.getElementId();
-        const widgetPath = context.element.getWidgetPath();
-
-        // Apply clip behavior
-        const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';
-        const filterValue = this._getClipFilter();
-
-        const style = {
-            overflow: overflowValue,
-            position: 'relative',
-            filter: filterValue
-        };
-
-        return new VNode({
-            tag: 'div',
-            props: {
-                style,
-                'data-element-id': elementId,
-                'data-widget-path': widgetPath,
-                'data-widget': 'ClipRect',
-                'data-clip-behavior': this.clipBehavior,
-                ref: (el) => this._onContainerMount(el, context)
-            },
-            children: childVNode ? [childVNode] : [],
-            key: this.key
-        });
-    }
-
-    /**
-     * Get clip filter based on behavior
-     * @private
-     */
-    _getClipFilter() {
-        switch (this.clipBehavior) {
-            case Clip.antiAlias:
-            case Clip.antiAliasWithSaveLayer:
-                return 'anti-alias';
-            case Clip.hardEdge:
-            case Clip.none:
-            default:
-                return 'none';
-        }
-    }
-
-    /**
-     * Mount container and apply custom clipper if provided
-     * @private
-     */
-    _onContainerMount(el, context) {
-        if (!el || !this.clipper) return;
-
-        this._containerElement = el;
-
-        try {
-            // Get container dimensions
-            const rect = el.getBoundingClientRect();
-            const size = {
-                width: Math.ceil(rect.width) || 100,
-                height: Math.ceil(rect.height) || 100
-            };
-
-            // Get clip path from custom clipper
-            const clipPath = this.clipper.getClip(size);
-
-            if (clipPath) {
-                // Apply clip-path CSS
-                el.style.clipPath = clipPath;
-                el.style.WebkitClipPath = clipPath;
-            }
-        } catch (error) {
-            console.error('Error applying custom clipper:', error);
-        }
-
-        // Re-apply on resize
-        const resizeHandler = () => {
-            if (!this.clipper || !this._containerElement) return;
-
-            try {
-                const rect = this._containerElement.getBoundingClientRect();
-                const size = {
-                    width: Math.ceil(rect.width) || 100,
-                    height: Math.ceil(rect.height) || 100
-                };
-
-                const clipPath = this.clipper.getClip(size);
-                if (clipPath) {
-                    this._containerElement.style.clipPath = clipPath;
-                    this._containerElement.style.WebkitClipPath = clipPath;
-                }
-            } catch (error) {
-                console.error('Error applying custom clipper on resize:', error);
-            }
-        };
-
-        window.addEventListener('resize', resizeHandler);
-
-        el._cleanupResize = () => {
-            window.removeEventListener('resize', resizeHandler);
-        };
-    }
-
-    /**
-     * Debug properties
-     */
-    debugFillProperties(properties) {
-        super.debugFillProperties(properties);
-        properties.push({ name: 'hasClipper', value: !!this.clipper });
-        properties.push({ name: 'clipBehavior', value: this.clipBehavior });
-    }
-
-    /**
-     * Create element
-     */
-    createElement(parent, runtime) {
-        return new ClipRectElement(this,parent, runtime);
-    }
-}
-
-// ============================================================================
-// RENDER CLIP RECT
-// ============================================================================
-
-class RenderClipRect {
-    constructor({ clipper = null, clipBehavior = Clip.hardEdge } = {}) {
-        this.clipper = clipper;
-        this.clipBehavior = clipBehavior;
-    }
-
-    /**
-     * Debug info
-     */
-    debugInfo() {
-        return {
-            type: 'RenderClipRect',
-            hasClipper: !!this.clipper,
-            clipBehavior: this.clipBehavior
-        };
-    }
-}
-
-// ============================================================================
-// CLIP RECT ELEMENT
-// ============================================================================
-
-class ClipRectElement extends ProxyWidget.constructor.prototype.constructor {
-    performRebuild() {
-        return this.widget.build(this.context);
-    }
-
-    detach() {
-        // Cleanup resize listener
-        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {
-            this.widget._containerElement._cleanupResize();
-        }
-        super.detach();
-    }
-}
-
-// ============================================================================
-// CLIP RRECT WIDGET (Rounded Rectangle Clip)
-// ============================================================================
-
-class ClipRRect extends ProxyWidget {
-    constructor({
-        key = null,
-        borderRadius = null,
-        clipper = null,
-        clipBehavior = Clip.antiAlias,
-        child = null
-    } = {}) {
-        super({ key, child });
-
-        if (clipper && !(clipper instanceof CustomClipper)) {
-            throw new Error(
-                `ClipRRect requires a CustomClipper instance, got: ${typeof clipper}`
-            );
-        }
-
-        if (!Object.values(Clip).includes(clipBehavior)) {
-            throw new Error(
-                `Invalid clipBehavior: ${clipBehavior}`
-            );
-        }
-
-        this.borderRadius = borderRadius || { all: 0 };
-        this.clipper = clipper;
-        this.clipBehavior = clipBehavior;
-        this._renderObject = null;
-        this._containerElement = null;
-    }
-
-    /**
-     * Create render object
-     */
-    createRenderObject(context) {
-        return new RenderClipRRect({
-            borderRadius: this.borderRadius,
-            clipper: this.clipper,
-            clipBehavior: this.clipBehavior
-        });
-    }
-
-    /**
-     * Update render object
-     */
-    updateRenderObject(context, renderObject) {
-        renderObject.borderRadius = this.borderRadius;
-        renderObject.clipBehavior = this.clipBehavior;
-        renderObject.clipper = this.clipper;
-    }
-
-    /**
-     * Unmount render object and clean up
-     */
-    unmountRenderObject(renderObject) {
-        renderObject.clipper = null;
-    }
-
-    /**
-     * Build the widget
-     */
-    build(context) {
-        if (!this._renderObject) {
-            this._renderObject = this.createRenderObject(context);
-        } else {
-            this.updateRenderObject(context, this._renderObject);
-        }
-
-        let childVNode = null;
-        if (this.child) {
-            const childElement = this.child.createElement(context.element, context.element.runtime);
-            childElement.mount(context.element);
-            childVNode = childElement.performRebuild();
-        }
-
-        const elementId = context.element.getElementId();
-        const widgetPath = context.element.getWidgetPath();
-
-        // Convert border radius to CSS
-        const borderRadiusCss = this._getBorderRadiusCSS();
-        const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';
-        const filterValue = this._getClipFilter();
-
-        const style = {
-            borderRadius: borderRadiusCss,
-            overflow: overflowValue,
-            position: 'relative',
-            filter: filterValue
-        };
-
-        return new VNode({
-            tag: 'div',
-            props: {
-                style,
-                'data-element-id': elementId,
-                'data-widget-path': widgetPath,
-                'data-widget': 'ClipRRect',
-                'data-border-radius': JSON.stringify(this.borderRadius),
-                'data-clip-behavior': this.clipBehavior,
-                ref: (el) => this._onContainerMount(el, context)
-            },
-            children: childVNode ? [childVNode] : [],
-            key: this.key
-        });
-    }
-
-    /**
-     * Convert border radius object to CSS string
-     * @private
-     */
-    _getBorderRadiusCSS() {
-        if (typeof this.borderRadius === 'number') {
-            return `${this.borderRadius}px`;
-        }
-
-        if (this.borderRadius.all !== undefined) {
-            return `${this.borderRadius.all}px`;
-        }
-
-        const {
-            topLeft = 0,
-            topRight = 0,
-            bottomLeft = 0,
-            bottomRight = 0
-        } = this.borderRadius;
-
-        return `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`;
-    }
-
-    /**
-     * Get clip filter based on behavior
-     * @private
-     */
-    _getClipFilter() {
-        switch (this.clipBehavior) {
-            case Clip.antiAlias:
-            case Clip.antiAliasWithSaveLayer:
-                return 'anti-alias';
-            case Clip.hardEdge:
-            case Clip.none:
-            default:
-                return 'none';
-        }
-    }
-
-    /**
-     * Mount container and apply custom clipper if provided
-     * @private
-     */
-    _onContainerMount(el, context) {
-        if (!el) return;
-
-        this._containerElement = el;
-
-        // Apply custom clipper if provided
-        if (this.clipper) {
-            try {
-                const rect = el.getBoundingClientRect();
-                const size = {
-                    width: Math.ceil(rect.width) || 100,
-                    height: Math.ceil(rect.height) || 100
-                };
-
-                const clipPath = this.clipper.getClip(size);
-                if (clipPath) {
-                    el.style.clipPath = clipPath;
-                    el.style.WebkitClipPath = clipPath;
-                }
-            } catch (error) {
-                console.error('Error applying custom clipper:', error);
-            }
-        }
-
-        // Re-apply on resize
-        const resizeHandler = () => {
-            if (!this._containerElement) return;
-
-            if (this.clipper) {
-                try {
-                    const rect = this._containerElement.getBoundingClientRect();
-                    const size = {
-                        width: Math.ceil(rect.width) || 100,
-                        height: Math.ceil(rect.height) || 100
-                    };
-
-                    const clipPath = this.clipper.getClip(size);
-                    if (clipPath) {
-                        this._containerElement.style.clipPath = clipPath;
-                        this._containerElement.style.WebkitClipPath = clipPath;
-                    }
-                } catch (error) {
-                    console.error('Error applying custom clipper on resize:', error);
-                }
-            }
-        };
-
-        window.addEventListener('resize', resizeHandler);
-
-        el._cleanupResize = () => {
-            window.removeEventListener('resize', resizeHandler);
-        };
-    }
-
-    /**
-     * Debug properties
-     */
-    debugFillProperties(properties) {
-        super.debugFillProperties(properties);
-        properties.push({ name: 'borderRadius', value: JSON.stringify(this.borderRadius) });
-        properties.push({ name: 'hasClipper', value: !!this.clipper });
-        properties.push({ name: 'clipBehavior', value: this.clipBehavior });
-    }
-
-    /**
-     * Create element
-     */
-    createElement(parent, runtime) {
-        return new ClipRRectElement(this,parent, runtime);
-    }
-}
-
-// ============================================================================
-// RENDER CLIP RRECT
-// ============================================================================
-
-class RenderClipRRect {
-    constructor({
-        borderRadius = null,
-        clipper = null,
-        clipBehavior = Clip.antiAlias
-    } = {}) {
-        this.borderRadius = borderRadius || { all: 0 };
-        this.clipper = clipper;
-        this.clipBehavior = clipBehavior;
-    }
-
-    /**
-     * Debug info
-     */
-    debugInfo() {
-        return {
-            type: 'RenderClipRRect',
-            borderRadius: JSON.stringify(this.borderRadius),
-            hasClipper: !!this.clipper,
-            clipBehavior: this.clipBehavior
-        };
-    }
-}
-
-// ============================================================================
-// CLIP RRECT ELEMENT
-// ============================================================================
-
-class ClipRRectElement extends ProxyWidget.constructor.prototype.constructor {
-    performRebuild() {
-        return this.widget.build(this.context);
-    }
-
-    detach() {
-        // Cleanup resize listener
-        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {
-            this.widget._containerElement._cleanupResize();
-        }
-        super.detach();
-    }
-}
-
-// ============================================================================
-// CLIP RSUPERELLIPSE WIDGET
-// Clips to superellipse shape with border radius
-// ============================================================================
-
-class ClipRSuperellipse extends ProxyWidget {
-    constructor({
-        key = null,
-        borderRadius = null,
-        clipper = null,
-        clipBehavior = Clip.antiAlias,
-        child = null
-    } = {}) {
-        super({ key, child });
-
-        if (clipper && !(clipper instanceof CustomClipper)) {
-            throw new Error(
-                `ClipRSuperellipse requires a CustomClipper instance, got: ${typeof clipper}`
-            );
-        }
-
-        if (!Object.values(Clip).includes(clipBehavior)) {
-            throw new Error(
-                `Invalid clipBehavior: ${clipBehavior}`
-            );
-        }
-
-        this.borderRadius = borderRadius || { all: 0 };
-        this.clipper = clipper;
-        this.clipBehavior = clipBehavior;
-        this._renderObject = null;
-        this._containerElement = null;
-    }
-
-    /**
-     * Create render object
-     */
-    createRenderObject(context) {
-        return new RenderClipRSuperellipse({
-            borderRadius: this.borderRadius,
-            clipper: this.clipper,
-            clipBehavior: this.clipBehavior
-        });
-    }
-
-    /**
-     * Update render object
-     */
-    updateRenderObject(context, renderObject) {
-        renderObject.borderRadius = this.borderRadius;
-        renderObject.clipBehavior = this.clipBehavior;
-        renderObject.clipper = this.clipper;
-    }
-
-    /**
-     * Build the widget
-     */
-    build(context) {
-        if (!this._renderObject) {
-            this._renderObject = this.createRenderObject(context);
-        } else {
-            this.updateRenderObject(context, this._renderObject);
-        }
-
-        let childVNode = null;
-        if (this.child) {
-            const childElement = this.child.createElement(context.element, context.element.runtime);
-            childElement.mount(context.element);
-            childVNode = childElement.performRebuild();
-        }
-
-        const elementId = context.element.getElementId();
-        const widgetPath = context.element.getWidgetPath();
-
-        const borderRadiusCss = this._getBorderRadiusCSS();
-        const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';
-
-        const style = {
-            borderRadius: borderRadiusCss,
-            overflow: overflowValue,
-            position: 'relative'
-        };
-
-        return new VNode({
-            tag: 'div',
-            props: {
-                style,
-                'data-element-id': elementId,
-                'data-widget-path': widgetPath,
-                'data-widget': 'ClipRSuperellipse',
-                'data-border-radius': JSON.stringify(this.borderRadius),
-                'data-clip-behavior': this.clipBehavior,
-                ref: (el) => this._onContainerMount(el)
-            },
-            children: childVNode ? [childVNode] : [],
-            key: this.key
-        });
-    }
-
-    /**
-     * Convert border radius to CSS string
-     * @private
-     */
-    _getBorderRadiusCSS() {
-        if (typeof this.borderRadius === 'number') {
-            return `${this.borderRadius}px`;
-        }
-
-        if (this.borderRadius.all !== undefined) {
-            return `${this.borderRadius.all}px`;
-        }
-
-        const {
-            topLeft = 0,
-            topRight = 0,
-            bottomLeft = 0,
-            bottomRight = 0
-        } = this.borderRadius;
-
-        return `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`;
-    }
-
-    /**
-     * Mount container and apply custom clipper
-     * @private
-     */
-    _onContainerMount(el) {
-        if (!el) return;
-
-        this._containerElement = el;
-
-        if (this.clipper) {
-            this._applyClipper();
-        }
-
-        const resizeHandler = () => this._applyClipper();
-        window.addEventListener('resize', resizeHandler);
-        el._cleanupResize = () => window.removeEventListener('resize', resizeHandler);
-    }
-
-    /**
-     * Apply custom clipper
-     * @private
-     */
-    _applyClipper() {
-        if (!this.clipper || !this._containerElement) return;
-
-        try {
-            const rect = this._containerElement.getBoundingClientRect();
-            const size = {
-                width: Math.ceil(rect.width) || 100,
-                height: Math.ceil(rect.height) || 100
-            };
-
-            const clipPath = this.clipper.getClip(size);
-            if (clipPath) {
-                this._containerElement.style.clipPath = clipPath;
-                this._containerElement.style.WebkitClipPath = clipPath;
-            }
-        } catch (error) {
-            console.error('Error applying superellipse clipper:', error);
-        }
-    }
-
-    /**
-     * Debug properties
-     */
-    debugFillProperties(properties) {
-        super.debugFillProperties(properties);
-        properties.push({ name: 'borderRadius', value: JSON.stringify(this.borderRadius) });
-        properties.push({ name: 'hasClipper', value: !!this.clipper });
-        properties.push({ name: 'clipBehavior', value: this.clipBehavior });
-    }
-
-    /**
-     * Create element
-     */
-    createElement(parent, runtime) {
-        return new ClipRSuperellipseElement(this,parent, runtime);
-    }
-}
-
-class RenderClipRSuperellipse {
-    constructor({
-        borderRadius = null,
-        clipper = null,
-        clipBehavior = Clip.antiAlias
-    } = {}) {
-        this.borderRadius = borderRadius || { all: 0 };
-        this.clipper = clipper;
-        this.clipBehavior = clipBehavior;
-    }
-
-    debugInfo() {
-        return {
-            type: 'RenderClipRSuperellipse',
-            borderRadius: JSON.stringify(this.borderRadius),
-            hasClipper: !!this.clipper,
-            clipBehavior: this.clipBehavior
-        };
-    }
-}
-
-class ClipRSuperellipseElement extends ProxyWidget.constructor.prototype.constructor {
-    performRebuild() {
-        return this.widget.build(this.context);
-    }
-
-    detach() {
-        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {
-            this.widget._containerElement._cleanupResize();
-        }
-        super.detach();
-    }
-}
-
-// ============================================================================
-// CLIP OVAL WIDGET
-// Clips child to oval/ellipse shape
-// ============================================================================
-
-class ClipOval extends ProxyWidget {
-    constructor({
-        key = null,
-        clipper = null,
-        clipBehavior = Clip.antiAlias,
-        child = null
-    } = {}) {
-        super({ key, child });
-
-        if (clipper && !(clipper instanceof CustomClipper)) {
-            throw new Error(
-                `ClipOval requires a CustomClipper instance, got: ${typeof clipper}`
-            );
-        }
-
-        if (!Object.values(Clip).includes(clipBehavior)) {
-            throw new Error(
-                `Invalid clipBehavior: ${clipBehavior}`
-            );
-        }
-
-        this.clipper = clipper;
-        this.clipBehavior = clipBehavior;
-        this._renderObject = null;
-        this._containerElement = null;
-    }
-
-    /**
-     * Create render object
-     */
-    createRenderObject(context) {
-        return new RenderClipOval({
-            clipper: this.clipper,
-            clipBehavior: this.clipBehavior
-        });
-    }
-
-    /**
-     * Update render object
-     */
-    updateRenderObject(context, renderObject) {
-        renderObject.clipper = this.clipper;
-        renderObject.clipBehavior = this.clipBehavior;
-    }
-
-    /**
-     * Unmount and cleanup
-     */
-    unmountRenderObject(renderObject) {
-        renderObject.clipper = null;
-    }
-
-    /**
-     * Build the widget
-     */
-    build(context) {
-        if (!this._renderObject) {
-            this._renderObject = this.createRenderObject(context);
-        } else {
-            this.updateRenderObject(context, this._renderObject);
-        }
-
-        let childVNode = null;
-        if (this.child) {
-            const childElement = this.child.createElement(context.element, context.element.runtime);
-            childElement.mount(context.element);
-            childVNode = childElement.performRebuild();
-        }
-
-        const elementId = context.element.getElementId();
-        const widgetPath = context.element.getWidgetPath();
-
-        const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';
-
-        const style = {
-            borderRadius: '50%',
-            overflow: overflowValue,
-            position: 'relative'
-        };
-
-        return new VNode({
-            tag: 'div',
-            props: {
-                style,
-                'data-element-id': elementId,
-                'data-widget-path': widgetPath,
-                'data-widget': 'ClipOval',
-                'data-clip-behavior': this.clipBehavior,
-                ref: (el) => this._onContainerMount(el)
-            },
-            children: childVNode ? [childVNode] : [],
-            key: this.key
-        });
-    }
-
-    /**
-     * Mount container and apply custom clipper
-     * @private
-     */
-    _onContainerMount(el) {
-        if (!el) return;
-
-        this._containerElement = el;
-
-        if (this.clipper) {
-            this._applyClipper();
-        }
-
-        const resizeHandler = () => this._applyClipper();
-        window.addEventListener('resize', resizeHandler);
-        el._cleanupResize = () => window.removeEventListener('resize', resizeHandler);
-    }
-
-    /**
-     * Apply custom clipper
-     * @private
-     */
-    _applyClipper() {
-        if (!this.clipper || !this._containerElement) return;
-
-        try {
-            const rect = this._containerElement.getBoundingClientRect();
-            const size = {
-                width: Math.ceil(rect.width) || 100,
-                height: Math.ceil(rect.height) || 100
-            };
-
-            const clipPath = this.clipper.getClip(size);
-            if (clipPath) {
-                this._containerElement.style.clipPath = clipPath;
-                this._containerElement.style.WebkitClipPath = clipPath;
-            }
-        } catch (error) {
-            console.error('Error applying oval clipper:', error);
-        }
-    }
-
-    /**
-     * Debug properties
-     */
-    debugFillProperties(properties) {
-        super.debugFillProperties(properties);
-        properties.push({ name: 'hasClipper', value: !!this.clipper });
-        properties.push({ name: 'clipBehavior', value: this.clipBehavior });
-    }
-
-    /**
-     * Create element
-     */
-    createElement(parent, runtime) {
-        return new ClipOvalElement(this,parent, runtime);
-    }
-}
-
-class RenderClipOval {
-    constructor({ clipper = null, clipBehavior = Clip.antiAlias } = {}) {
-        this.clipper = clipper;
-        this.clipBehavior = clipBehavior;
-    }
-
-    debugInfo() {
-        return {
-            type: 'RenderClipOval',
-            hasClipper: !!this.clipper,
-            clipBehavior: this.clipBehavior
-        };
-    }
-}
-
-class ClipOvalElement extends ProxyWidget.constructor.prototype.constructor {
-    performRebuild() {
-        return this.widget.build(this.context);
-    }
-
-    detach() {
-        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {
-            this.widget._containerElement._cleanupResize();
-        }
-        super.detach();
-    }
-}
-
-// ============================================================================
-// CLIP PATH WIDGET
-// Clips child to custom path shape
-// ============================================================================
-
-class ClipPath extends ProxyWidget {
-    constructor({
-        key = null,
-        clipper = null,
-        clipBehavior = Clip.antiAlias,
-        child = null
-    } = {}) {
-        super({ key, child });
-
-        if (clipper && !(clipper instanceof CustomClipper)) {
-            throw new Error(
-                `ClipPath requires a CustomClipper instance, got: ${typeof clipper}`
-            );
-        }
-
-        if (!Object.values(Clip).includes(clipBehavior)) {
-            throw new Error(
-                `Invalid clipBehavior: ${clipBehavior}`
-            );
-        }
-
-        this.clipper = clipper;
-        this.clipBehavior = clipBehavior;
-        this._renderObject = null;
-        this._containerElement = null;
-    }
-
-    /**
-     * Create render object
-     */
-    createRenderObject(context) {
-        return new RenderClipPath({
-            clipper: this.clipper,
-            clipBehavior: this.clipBehavior
-        });
-    }
-
-    /**
-     * Update render object
-     */
-    updateRenderObject(context, renderObject) {
-        renderObject.clipper = this.clipper;
-        renderObject.clipBehavior = this.clipBehavior;
-    }
-
-    /**
-     * Unmount and cleanup
-     */
-    unmountRenderObject(renderObject) {
-        renderObject.clipper = null;
-    }
-
-    /**
-     * Build the widget
-     */
-    build(context) {
-        if (!this._renderObject) {
-            this._renderObject = this.createRenderObject(context);
-        } else {
-            this.updateRenderObject(context, this._renderObject);
-        }
-
-        let childVNode = null;
-        if (this.child) {
-            const childElement = this.child.createElement(context.element, context.element.runtime);
-            childElement.mount(context.element);
-            childVNode = childElement.performRebuild();
-        }
-
-        const elementId = context.element.getElementId();
-        const widgetPath = context.element.getWidgetPath();
-
-        const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';
-
-        const style = {
-            overflow: overflowValue,
-            position: 'relative'
-        };
-
-        return new VNode({
-            tag: 'div',
-            props: {
-                style,
-                'data-element-id': elementId,
-                'data-widget-path': widgetPath,
-                'data-widget': 'ClipPath',
-                'data-clip-behavior': this.clipBehavior,
-                ref: (el) => this._onContainerMount(el)
-            },
-            children: childVNode ? [childVNode] : [],
-            key: this.key
-        });
-    }
-
-    /**
-     * Mount container and apply custom clipper
-     * @private
-     */
-    _onContainerMount(el) {
-        if (!el) return;
-
-        this._containerElement = el;
-
-        if (this.clipper) {
-            this._applyClipper();
-        }
-
-        const resizeHandler = () => this._applyClipper();
-        window.addEventListener('resize', resizeHandler);
-        el._cleanupResize = () => window.removeEventListener('resize', resizeHandler);
-    }
-
-    /**
-     * Apply custom clipper
-     * @private
-     */
-    _applyClipper() {
-        if (!this.clipper || !this._containerElement) return;
-
-        try {
-            const rect = this._containerElement.getBoundingClientRect();
-            const size = {
-                width: Math.ceil(rect.width) || 100,
-                height: Math.ceil(rect.height) || 100
-            };
-
-            const clipPath = this.clipper.getClip(size);
-            if (clipPath) {
-                this._containerElement.style.clipPath = clipPath;
-                this._containerElement.style.WebkitClipPath = clipPath;
-            }
-        } catch (error) {
-            console.error('Error applying path clipper:', error);
-        }
-    }
-
-    /**
-     * Debug properties
-     */
-    debugFillProperties(properties) {
-        super.debugFillProperties(properties);
-        properties.push({ name: 'hasClipper', value: !!this.clipper });
-        properties.push({ name: 'clipBehavior', value: this.clipBehavior });
-    }
-
-    /**
-     * Create element
-     */
-    createElement(parent, runtime) {
-        return new ClipPathElement(this,parent, runtime);
-    }
-}
-
-class RenderClipPath {
-    constructor({ clipper = null, clipBehavior = Clip.antiAlias } = {}) {
-        this.clipper = clipper;
-        this.clipBehavior = clipBehavior;
-    }
-
-    debugInfo() {
-        return {
-            type: 'RenderClipPath',
-            hasClipper: !!this.clipper,
-            clipBehavior: this.clipBehavior
-        };
-    }
-}
-
-class ClipPathElement extends ProxyWidget.constructor.prototype.constructor {
-    performRebuild() {
-        return this.widget.build(this.context);
-    }
-
-    detach() {
-        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {
-            this.widget._containerElement._cleanupResize();
-        }
-        super.detach();
-    }
-}
-
-export { ClipRect, RenderClipRect, ClipRRect, RenderClipRRect, ClipRSuperellipse, RenderClipRSuperellipse, ClipOval, RenderClipOval, ClipPath, RenderClipPath, CustomClipper, };
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/custom_single_child_layout.js b/packages/flutterjs_engine/package/material/src/widgets/compoment/custom_single_child_layout.js
deleted file mode 100644
index c415bfd3..00000000
--- a/packages/flutterjs_engine/package/material/src/widgets/compoment/custom_single_child_layout.js
+++ /dev/null
@@ -1,636 +0,0 @@
-import { ProxyWidget, Widget } from '../../core/widget_element.js';
-import { VNode } from '@flutterjs/vdom/vnode';
-import { Size } from '../../utils/size.js';
-import { BoxConstraints } from '../../utils/box_constraints.js';
-
-
-
-
-
-// ============================================================================
-// SINGLE CHILD LAYOUT DELEGATE BASE CLASS
-// Override methods to define custom layout logic
-// ============================================================================
-
-class SingleChildLayoutDelegate {
-    constructor() {
-        if (new.target === SingleChildLayoutDelegate) {
-            throw new Error('SingleChildLayoutDelegate is abstract');
-        }
-    }
-
-    /**
-     * Get size constraints for the child
-     * Override to define child constraints
-     */
-    getConstraintsForChild(constraints) {
-        throw new Error('getConstraintsForChild() must be implemented');
-    }
-
-    /**
-     * Position the child
-     * Override to position child relative to parent
-     */
-    positionChild(size, childSize) {
-        throw new Error('positionChild() must be implemented');
-    }
-
-    /**
-     * Get size of this widget
-     * Override to define own size
-     */
-    getSize(constraints) {
-        return constraints.constrain(new Size(300, 300));
-    }
-
-    /**
-     * Check if delegate should be updated
-     */
-    shouldRelayout(oldDelegate) {
-        return true;
-    }
-}
-
-// ============================================================================
-// CUSTOM SINGLE CHILD LAYOUT WIDGET
-// Allows custom layout of a single child
-// ============================================================================
-
-class CustomSingleChildLayout extends ProxyWidget {
-    constructor({
-        key = null,
-        delegate = null,
-        child = null
-    } = {}) {
-        super({ key, child });
-
-        if (!delegate) {
-            throw new Error('CustomSingleChildLayout requires a delegate');
-        }
-
-        if (!(delegate instanceof SingleChildLayoutDelegate)) {
-            throw new Error(
-                `CustomSingleChildLayout requires a SingleChildLayoutDelegate instance, got: ${typeof delegate}`
-            );
-        }
-
-        this.delegate = delegate;
-        this._renderObject = null;
-        this._containerElement = null;
-        this._childElement = null;
-        this._resizeObserver = null;
-    }
-
-    /**
-     * Create render object
-     */
-    createRenderObject(context) {
-        return new RenderCustomSingleChildLayoutBox({
-            delegate: this.delegate
-        });
-    }
-
-    /**
-     * Update render object
-     */
-    updateRenderObject(context, renderObject) {
-        if (this.delegate.shouldRelayout(renderObject.delegate)) {
-            renderObject.delegate = this.delegate;
-        }
-    }
-
-    /**
-     * Build the widget
-     */
-    build(context) {
-        if (!this._renderObject) {
-            this._renderObject = this.createRenderObject(context);
-        } else {
-            this.updateRenderObject(context, this._renderObject);
-        }
-
-        let childVNode = null;
-        if (this.child) {
-            const childElement = this.child.createElement(context.element, context.element.runtime);
-            childElement.mount(context.element);
-            childVNode = childElement.performRebuild();
-        }
-
-        const elementId = context.element.getElementId();
-        const widgetPath = context.element.getWidgetPath();
-
-        return new VNode({
-            tag: 'div',
-            props: {
-                style: {
-                    position: 'relative',
-                    display: 'inline-block'
-                },
-                'data-element-id': elementId,
-                'data-widget-path': widgetPath,
-                'data-widget': 'CustomSingleChildLayout',
-                ref: (el) => this._onContainerMount(el)
-            },
-            children: [
-                new VNode({
-                    tag: 'div',
-                    props: {
-                        style: {
-                            position: 'absolute'
-                        },
-                        ref: (el) => this._onChildMount(el)
-                    },
-                    children: childVNode ? [childVNode] : []
-                })
-            ],
-            key: this.key
-        });
-    }
-
-    /**
-     * Mount container
-     * @private
-     */
-    _onContainerMount(el) {
-        if (!el) return;
-
-        this._containerElement = el;
-
-        if (window.ResizeObserver) {
-            this._resizeObserver = new ResizeObserver(() => {
-                this._performLayout();
-            });
-            this._resizeObserver.observe(el);
-        }
-
-        const resizeHandler = () => this._performLayout();
-        window.addEventListener('resize', resizeHandler);
-
-        el._cleanupResize = () => {
-            window.removeEventListener('resize', resizeHandler);
-            if (this._resizeObserver) {
-                this._resizeObserver.disconnect();
-            }
-        };
-
-        this._performLayout();
-    }
-
-    /**
-     * Mount child
-     * @private
-     */
-    _onChildMount(el) {
-        if (!el) return;
-        this._childElement = el;
-        this._performLayout();
-    }
-
-    /**
-     * Perform layout using delegate
-     * @private
-     */
-    _performLayout() {
-        if (!this._containerElement || !this._childElement || !this.delegate) return;
-
-        try {
-            const containerRect = this._containerElement.getBoundingClientRect();
-            const parentSize = new Size(containerRect.width || 300, containerRect.height || 300);
-
-            // Get parent constraints
-            const constraints = BoxConstraints.expand({ width: parentSize.width, height: parentSize.height });
-
-            // Get child constraints from delegate
-            const childConstraints = this.delegate.getConstraintsForChild(constraints);
-
-            // Get child size
-            const childRect = this._childElement.getBoundingClientRect();
-            const childSize = new Size(childRect.width || 100, childRect.height || 100);
-
-            // Constrain child size
-            const constrainedChildSize = childConstraints.constrain(childSize);
-
-            // Get position from delegate
-            const position = this.delegate.positionChild(parentSize, constrainedChildSize);
-
-            // Apply position and size
-            this._childElement.style.left = `${position.x}px`;
-            this._childElement.style.top = `${position.y}px`;
-            this._childElement.style.width = `${constrainedChildSize.width}px`;
-            this._childElement.style.height = `${constrainedChildSize.height}px`;
-
-            // Get container size from delegate
-            const containerSize = this.delegate.getSize(constraints);
-            this._containerElement.style.width = `${containerSize.width}px`;
-            this._containerElement.style.height = `${containerSize.height}px`;
-        } catch (error) {
-            console.error('Error performing custom single child layout:', error);
-        }
-    }
-
-    /**
-     * Debug properties
-     */
-    debugFillProperties(properties) {
-        super.debugFillProperties(properties);
-        properties.push({ name: 'delegate', value: this.delegate.constructor.name });
-    }
-
-    /**
-     * Create element
-     */
-    createElement(parent, runtime) {
-        return new CustomSingleChildLayoutElement(this, parent, runtime);
-    }
-}
-
-// ============================================================================
-// RENDER CUSTOM SINGLE CHILD LAYOUT BOX
-// ============================================================================
-
-class RenderCustomSingleChildLayoutBox {
-    constructor({ delegate = null } = {}) {
-        this.delegate = delegate;
-    }
-
-    debugInfo() {
-        return {
-            type: 'RenderCustomSingleChildLayoutBox',
-            delegateType: this.delegate?.constructor.name
-        };
-    }
-}
-
-// ============================================================================
-// CUSTOM SINGLE CHILD LAYOUT ELEMENT
-// ============================================================================
-
-class CustomSingleChildLayoutElement extends ProxyWidget.constructor.prototype.constructor {
-    performRebuild() {
-        return this.widget.build(this.context);
-    }
-
-    detach() {
-        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {
-            this.widget._containerElement._cleanupResize();
-        }
-        super.detach();
-    }
-}
-
-// ============================================================================
-// MULTI CHILD LAYOUT DELEGATE BASE CLASS
-// Override methods to define custom multi-child layout logic
-// ============================================================================
-
-class MultiChildLayoutDelegate {
-    constructor() {
-        if (new.target === MultiChildLayoutDelegate) {
-            throw new Error('MultiChildLayoutDelegate is abstract');
-        }
-    }
-
-    /**
-     * Perform layout on children
-     * Children are keyed by id set via LayoutId
-     */
-    performLayout(size, layoutChild) {
-        throw new Error('performLayout() must be implemented');
-    }
-
-    /**
-     * Get size of this widget
-     */
-    getSize(constraints) {
-        return constraints.constrain(new Size(300, 300));
-    }
-
-    /**
-     * Check if delegate should update
-     */
-    shouldRelayout(oldDelegate) {
-        return true;
-    }
-}
-
-// ============================================================================
-// LAYOUT ID WIDGET
-// Assigns an id to a child in CustomMultiChildLayout
-// ============================================================================
-
-class LayoutId extends Widget {
-    constructor({
-        key = null,
-        id = null,
-        child = null
-    } = {}) {
-        super(key || { id });
-
-        if (!id) {
-            throw new Error('LayoutId requires an id');
-        }
-
-        this.id = id;
-        this.child = child;
-    }
-
-    /**
-     * Apply parent data to child
-     */
-    applyParentData(renderObject) {
-        if (!renderObject.parentData) {
-            renderObject.parentData = {};
-        }
-        renderObject.parentData.id = this.id;
-    }
-
-    /**
-     * Build returns the child
-     */
-    build(context) {
-        return this.child;
-    }
-
-    /**
-     * Debug properties
-     */
-    debugFillProperties(properties) {
-        super.debugFillProperties(properties);
-        properties.push({ name: 'id', value: this.id });
-    }
-
-    /**
-     * Create element
-     */
-    createElement(parent, runtime) {
-        return new LayoutIdElement(this, parent, runtime);
-    }
-}
-
-class LayoutIdElement extends Widget.constructor.prototype.constructor {
-    performRebuild() {
-        return this.widget.build(this.context);
-    }
-}
-
-// ============================================================================
-// CUSTOM MULTI CHILD LAYOUT WIDGET
-// Allows custom layout of multiple children with ids
-// ============================================================================
-
-class CustomMultiChildLayout extends Widget {
-    constructor({
-        key = null,
-        delegate = null,
-        children = []
-    } = {}) {
-        super(key);
-
-        if (!delegate) {
-            throw new Error('CustomMultiChildLayout requires a delegate');
-        }
-
-        if (!(delegate instanceof MultiChildLayoutDelegate)) {
-            throw new Error(
-                `CustomMultiChildLayout requires a MultiChildLayoutDelegate instance, got: ${typeof delegate}`
-            );
-        }
-
-        this.delegate = delegate;
-        this.children = children || [];
-        this._renderObject = null;
-        this._containerElement = null;
-        this._childElements = new Map();
-        this._resizeObserver = null;
-    }
-
-    /**
-     * Create render object
-     */
-    createRenderObject(context) {
-        return new RenderCustomMultiChildLayoutBox({
-            delegate: this.delegate
-        });
-    }
-
-    /**
-     * Update render object
-     */
-    updateRenderObject(context, renderObject) {
-        if (this.delegate.shouldRelayout(renderObject.delegate)) {
-            renderObject.delegate = this.delegate;
-        }
-    }
-
-    /**
-     * Build the widget
-     */
-    build(context) {
-        if (!this._renderObject) {
-            this._renderObject = this.createRenderObject(context);
-        } else {
-            this.updateRenderObject(context, this._renderObject);
-        }
-
-        const elementId = context.element.getElementId();
-        const widgetPath = context.element.getWidgetPath();
-
-        const childVNodes = this.children.map((childWidget, index) => {
-            let wrappedChild = childWidget;
-
-            // Wrap child in LayoutId if not already wrapped
-            if (!(childWidget instanceof LayoutId)) {
-                wrappedChild = new LayoutId({
-                    id: index,
-                    child: childWidget
-                });
-            }
-
-            const childElement = wrappedChild.createElement(context.element, context.element.runtime);
-            childElement.mount(context.element);
-            return childElement.performRebuild();
-        });
-
-        return new VNode({
-            tag: 'div',
-            props: {
-                style: {
-                    position: 'relative',
-                    display: 'inline-block'
-                },
-                'data-element-id': elementId,
-                'data-widget-path': widgetPath,
-                'data-widget': 'CustomMultiChildLayout',
-                ref: (el) => this._onContainerMount(el)
-            },
-            children: childVNodes.map((vnode, index) =>
-                new VNode({
-                    tag: 'div',
-                    props: {
-                        style: {
-                            position: 'absolute'
-                        },
-                        'data-layout-id': index,
-                        ref: (el) => this._onChildMount(el, index)
-                    },
-                    children: [vnode]
-                })
-            ),
-            key: this.key
-        });
-    }
-
-    /**
-     * Mount container
-     * @private
-     */
-    _onContainerMount(el) {
-        if (!el) return;
-
-        this._containerElement = el;
-
-        if (window.ResizeObserver) {
-            this._resizeObserver = new ResizeObserver(() => {
-                this._performLayout();
-            });
-            this._resizeObserver.observe(el);
-        }
-
-        const resizeHandler = () => this._performLayout();
-        window.addEventListener('resize', resizeHandler);
-
-        el._cleanupResize = () => {
-            window.removeEventListener('resize', resizeHandler);
-            if (this._resizeObserver) {
-                this._resizeObserver.disconnect();
-            }
-        };
-
-        this._performLayout();
-    }
-
-    /**
-     * Mount child
-     * @private
-     */
-    _onChildMount(el, id) {
-        if (!el) return;
-        this._childElements.set(id, el);
-        this._performLayout();
-    }
-
-    /**
-     * Perform layout using delegate
-     * @private
-     */
-    _performLayout() {
-        if (!this._containerElement || !this.delegate) return;
-
-        try {
-            const containerRect = this._containerElement.getBoundingClientRect();
-            const size = new Size(containerRect.width || 300, containerRect.height || 300);
-
-            // Get constraints
-            const constraints = BoxConstraints.expand({ width: size.width, height: size.height });
-
-            // Create layout child function
-            const layoutChild = (id, childConstraints) => {
-                const childEl = this._childElements.get(id);
-                if (!childEl) {
-                    console.warn(`LayoutId ${id} not found`);
-                    return new Size(0, 0);
-                }
-
-                // Get child size
-                const childRect = childEl.getBoundingClientRect();
-                const childSize = new Size(childRect.width || 100, childRect.height || 100);
-
-                // Constrain and return
-                return childConstraints.constrain(childSize);
-            };
-
-            // Call delegate's performLayout
-            const layoutInfo = this.delegate.performLayout(size, layoutChild);
-
-            // Apply layout to children
-            if (layoutInfo && typeof layoutInfo === 'object') {
-                for (const [id, info] of Object.entries(layoutInfo)) {
-                    const childEl = this._childElements.get(parseInt(id));
-                    if (childEl) {
-                        childEl.style.left = `${info.x || 0}px`;
-                        childEl.style.top = `${info.y || 0}px`;
-                        if (info.width) childEl.style.width = `${info.width}px`;
-                        if (info.height) childEl.style.height = `${info.height}px`;
-                    }
-                }
-            }
-
-            // Get container size from delegate
-            const containerSize = this.delegate.getSize(constraints);
-            this._containerElement.style.width = `${containerSize.width}px`;
-            this._containerElement.style.height = `${containerSize.height}px`;
-        } catch (error) {
-            console.error('Error performing custom multi child layout:', error);
-        }
-    }
-
-    /**
-     * Debug properties
-     */
-    debugFillProperties(properties) {
-        super.debugFillProperties(properties);
-        properties.push({ name: 'delegate', value: this.delegate.constructor.name });
-        properties.push({ name: 'childCount', value: this.children.length });
-    }
-
-    /**
-     * Create element
-     */
-    createElement(parent, runtime) {
-        return new CustomMultiChildLayoutElement(this, parent, runtime);
-    }
-}
-
-// ============================================================================
-// RENDER CUSTOM MULTI CHILD LAYOUT BOX
-// ============================================================================
-
-class RenderCustomMultiChildLayoutBox {
-    constructor({ delegate = null } = {}) {
-        this.delegate = delegate;
-    }
-
-    debugInfo() {
-        return {
-            type: 'RenderCustomMultiChildLayoutBox',
-            delegateType: this.delegate?.constructor.name
-        };
-    }
-}
-
-// ============================================================================
-// CUSTOM MULTI CHILD LAYOUT ELEMENT
-// ============================================================================
-
-class CustomMultiChildLayoutElement extends Widget.constructor.prototype.constructor {
-    performRebuild() {
-        return this.widget.build(this.context);
-    }
-
-    detach() {
-        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {
-            this.widget._containerElement._cleanupResize();
-        }
-        super.detach();
-    }
-}
-
-export {
-    CustomSingleChildLayout,
-    RenderCustomSingleChildLayoutBox,
-    SingleChildLayoutDelegate,
-    LayoutId,
-    CustomMultiChildLayout,
-    RenderCustomMultiChildLayoutBox,
-    MultiChildLayoutDelegate
-};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/multi_child_view.js b/packages/flutterjs_engine/package/material/src/widgets/compoment/multi_child_view.js
deleted file mode 100644
index 15277982..00000000
--- a/packages/flutterjs_engine/package/material/src/widgets/compoment/multi_child_view.js
+++ /dev/null
@@ -1,748 +0,0 @@
-
-import { Widget, } from '../../core/widget_element.js';
-import { Element } from "@flutterjs/runtime"
-import { VNode } from '@flutterjs/vdom/vnode';
-import { Axis, TextDirection, VerticalDirection, Clip, MainAxisAlignment, CrossAxisAlignment, FlexFit, WrapAlignment, WrapCrossAlignment } from '../../utils/utils.js';
-
-// ============================================================================
-// ENUMS
-// ============================================================================
-
-const MainAxisSize = {
-  min: 'min',
-  max: 'max'
-};
-
-// ============================================================================
-// FLEX PARENT DATA
-// ============================================================================
-
-class FlexParentData {
-  constructor() {
-    this.flex = null;
-    this.fit = FlexFit.loose;
-  }
-
-  debugInfo() {
-    return {
-      flex: this.flex,
-      fit: this.fit
-    };
-  }
-}
-
-// ============================================================================
-// RENDER FLEX
-// ============================================================================
-
-class RenderFlex {
-  constructor({
-    direction = Axis.horizontal,
-    mainAxisAlignment = MainAxisAlignment.start,
-    mainAxisSize = MainAxisSize.max,
-    crossAxisAlignment = CrossAxisAlignment.center,
-    textDirection = TextDirection.ltr,
-    verticalDirection = VerticalDirection.down,
-    textBaseline = null,
-    clipBehavior = Clip.none,
-    spacing = 0
-  } = {}) {
-    this.direction = direction;
-    this.mainAxisAlignment = mainAxisAlignment;
-    this.mainAxisSize = mainAxisSize;
-    this.crossAxisAlignment = crossAxisAlignment;
-    this.textDirection = textDirection;
-    this.verticalDirection = verticalDirection;
-    this.textBaseline = textBaseline;
-    this.clipBehavior = clipBehavior;
-    this.spacing = spacing;
-    this._children = [];
-  }
-
-  addChild(child) {
-    this._children.push(child);
-  }
-
-  removeChild(child) {
-    const index = this._children.indexOf(child);
-    if (index > -1) {
-      this._children.splice(index, 1);
-    }
-  }
-
-  debugInfo() {
-    return {
-      type: 'RenderFlex',
-      direction: this.direction,
-      mainAxisAlignment: this.mainAxisAlignment,
-      mainAxisSize: this.mainAxisSize,
-      crossAxisAlignment: this.crossAxisAlignment,
-      textDirection: this.textDirection,
-      spacing: this.spacing,
-      childCount: this._children.length
-    };
-  }
-}
-
-// ============================================================================
-// FLEX WIDGET
-// ============================================================================
-
-class Flex extends Widget {
-  constructor({
-    key = null,
-    direction = Axis.horizontal,
-    mainAxisAlignment = MainAxisAlignment.start,
-    mainAxisSize = MainAxisSize.max,
-    crossAxisAlignment = CrossAxisAlignment.center,
-    textDirection = null,
-    verticalDirection = VerticalDirection.down,
-    textBaseline = null,
-    clipBehavior = Clip.none,
-    spacing = 0,
-    children = []
-  } = {}) {
-    super(key);
-
-    // Validate baseline
-    if (crossAxisAlignment === CrossAxisAlignment.baseline && !textBaseline) {
-      throw new Error(
-        'textBaseline is required when crossAxisAlignment is CrossAxisAlignment.baseline'
-      );
-    }
-
-    this.direction = direction;
-    this.mainAxisAlignment = mainAxisAlignment;
-    this.mainAxisSize = mainAxisSize;
-    this.crossAxisAlignment = crossAxisAlignment;
-    this.textDirection = textDirection;
-    this.verticalDirection = verticalDirection;
-    this.textBaseline = textBaseline;
-    this.clipBehavior = clipBehavior;
-    this.spacing = spacing;
-    this.children = children || [];
-    this._renderObject = null;
-  }
-
-  /**
-   * Check if text direction is needed
-   * @private
-   */
-  _needTextDirection() {
-    if (this.direction === Axis.horizontal) {
-      return true;
-    }
-    return this.crossAxisAlignment === CrossAxisAlignment.start ||
-      this.crossAxisAlignment === CrossAxisAlignment.end;
-  }
-
-  /**
-   * Get effective text direction
-   */
-  getEffectiveTextDirection(context) {
-    if (this.textDirection) {
-      return this.textDirection;
-    }
-
-    if (this._needTextDirection()) {
-      return context?.textDirection || TextDirection.ltr;
-    }
-
-    return null;
-  }
-
-  /**
-   * Create render object
-   */
-  createRenderObject(context) {
-    return new RenderFlex({
-      direction: this.direction,
-      mainAxisAlignment: this.mainAxisAlignment,
-      mainAxisSize: this.mainAxisSize,
-      crossAxisAlignment: this.crossAxisAlignment,
-      textDirection: this.getEffectiveTextDirection(context),
-      verticalDirection: this.verticalDirection,
-      textBaseline: this.textBaseline,
-      clipBehavior: this.clipBehavior,
-      spacing: this.spacing
-    });
-  }
-
-  /**
-   * Update render object
-   */
-  updateRenderObject(context, renderObject) {
-    renderObject.direction = this.direction;
-    renderObject.mainAxisAlignment = this.mainAxisAlignment;
-    renderObject.mainAxisSize = this.mainAxisSize;
-    renderObject.crossAxisAlignment = this.crossAxisAlignment;
-    renderObject.textDirection = this.getEffectiveTextDirection(context);
-    renderObject.verticalDirection = this.verticalDirection;
-    renderObject.textBaseline = this.textBaseline;
-    renderObject.clipBehavior = this.clipBehavior;
-    renderObject.spacing = this.spacing;
-  }
-
-  /**
-   * Build widget tree
-   */
-  build(context) {
-    if (!this._renderObject) {
-      this._renderObject = this.createRenderObject(context);
-    } else {
-      this.updateRenderObject(context, this._renderObject);
-    }
-
-    const elementId = context.element.getElementId();
-    const widgetPath = context.element.getWidgetPath();
-
-    // Map alignment to CSS
-    const justifyContent = this._mapMainAxisAlignment();
-    const alignItems = this._mapCrossAxisAlignment();
-    var flexDirection = this.direction === Axis.horizontal ? 'row' : 'column';
-
-    // Handle reverse direction
-    if (this.verticalDirection === VerticalDirection.up && this.direction === Axis.vertical) {
-      flexDirection = 'column-reverse';
-    }
-
-    const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';
-
-    const style = {
-      display: 'flex',
-      flexDirection,
-      justifyContent,
-      alignItems,
-      gap: `${this.spacing}px`,
-      width: this.mainAxisSize === MainAxisSize.max ? '100%' : 'auto',
-      height: this.mainAxisSize === MainAxisSize.max ? '100%' : 'auto',
-      direction: this.textDirection === TextDirection.rtl ? 'rtl' : 'ltr',
-      overflow: overflowValue,
-      flexWrap: 'nowrap'
-    };
-
-    // Build child VNodes
-    const childVNodes = this.children.map((childWidget, idx) => {
-      console.log(`[Flex.build] Building child ${idx}:`, childWidget?.constructor?.name, 'has createElement:', typeof childWidget?.createElement);
-      const childElement = childWidget.createElement(context.element, context.element.runtime);
-      console.log(`[Flex.build] Child ${idx} element:`, childElement?.constructor?.name);
-      childElement.mount(context.element);
-      const childVNode = childElement.performRebuild();
-      console.log(`[Flex.build] Child ${idx} VNode:`, childVNode?.constructor?.name, 'tag:', childVNode?.tag);
-
-      // Check if child is Flexible/Expanded
-      let childStyle = {};
-
-      if (childWidget instanceof Flexible) {
-        if (childWidget.fit === FlexFit.tight) {
-          childStyle.flex = childWidget.flex || 1;
-        } else {
-          childStyle.flex = 0;
-          childStyle.flexShrink = 0;
-        }
-      }
-
-      return new VNode({
-        tag: 'div',
-        props: {
-          style: {
-            ...childStyle,
-            minWidth: 0,
-            minHeight: 0
-          }
-        },
-        children: [childVNode]
-      });
-    });
-
-    return new VNode({
-      tag: 'div',
-      props: {
-        style,
-        'data-element-id': elementId,
-        'data-widget-path': widgetPath,
-        'data-widget': 'Flex',
-        'data-direction': this.direction,
-        'data-main-axis': this.mainAxisAlignment,
-        'data-cross-axis': this.crossAxisAlignment,
-        'data-spacing': this.spacing
-      },
-      children: childVNodes,
-      key: this.key
-    });
-  }
-
-  /**
-   * Map main axis alignment to CSS
-   * @private
-   */
-  _mapMainAxisAlignment() {
-    // Handle shorthand enum syntax (e.g. ".center")
-    let value = this.mainAxisAlignment;
-    if (typeof value === 'string' && value.startsWith('.')) {
-      value = value.substring(1);
-    }
-
-    const map = {
-      start: 'flex-start',
-      end: 'flex-end',
-      center: 'center',
-      spaceBetween: 'space-between',
-      spaceAround: 'space-around',
-      spaceEvenly: 'space-evenly'
-    };
-    return map[value] || 'flex-start';
-  }
-
-  /**
-   * Map cross axis alignment to CSS
-   * @private
-   */
-  _mapCrossAxisAlignment() {
-    // Handle shorthand enum syntax (e.g. ".center")
-    let value = this.crossAxisAlignment;
-    if (typeof value === 'string' && value.startsWith('.')) {
-      value = value.substring(1);
-    }
-
-    const map = {
-      start: 'flex-start',
-      end: 'flex-end',
-      center: 'center',
-      stretch: 'stretch',
-      baseline: 'baseline'
-    };
-    return map[value] || 'center';
-  }
-
-  debugFillProperties(properties) {
-    super.debugFillProperties(properties);
-    properties.push({ name: 'direction', value: this.direction });
-    properties.push({ name: 'mainAxisAlignment', value: this.mainAxisAlignment });
-    properties.push({ name: 'mainAxisSize', value: this.mainAxisSize });
-    properties.push({ name: 'crossAxisAlignment', value: this.crossAxisAlignment });
-    properties.push({ name: 'textDirection', value: this.textDirection });
-    properties.push({ name: 'spacing', value: this.spacing });
-    properties.push({ name: 'childCount', value: this.children.length });
-  }
-
-  createElement(parent, runtime) {
-    return new FlexElement(this, parent, runtime);
-  }
-}
-
-class FlexElement extends Element {
-  performRebuild() {
-    return this.widget.build(this.context);
-  }
-}
-
-// ============================================================================
-// ROW WIDGET
-// ============================================================================
-
-class Row extends Flex {
-  constructor(options = {}) {
-    super({
-      ...options,
-      direction: Axis.horizontal
-    });
-  }
-}
-
-// ============================================================================
-// COLUMN WIDGET
-// ============================================================================
-
-class Column extends Flex {
-  constructor(options = {}) {
-    super({
-      ...options,
-      direction: Axis.vertical
-    });
-  }
-}
-
-// ============================================================================
-// FLEXIBLE WIDGET
-// ============================================================================
-
-class Flexible extends Widget {
-  constructor({
-    key = null,
-    flex = 1,
-    fit = FlexFit.loose,
-    child = null
-  } = {}) {
-    super(key);
-
-    if (flex <= 0) {
-      throw new Error('flex must be > 0');
-    }
-
-    this.flex = flex;
-    this.fit = fit;
-    this.child = child;
-  }
-
-  /**
-   * Apply flex parent data
-   */
-  applyParentData(renderObject) {
-    if (!renderObject.parentData) {
-      renderObject.parentData = new FlexParentData();
-    }
-
-    const parentData = renderObject.parentData;
-    let needsLayout = false;
-
-    if (parentData.flex !== this.flex) {
-      parentData.flex = this.flex;
-      needsLayout = true;
-    }
-
-    if (parentData.fit !== this.fit) {
-      parentData.fit = this.fit;
-      needsLayout = true;
-    }
-
-    if (needsLayout && renderObject.parent) {
-      renderObject.parent.markNeedsLayout?.();
-    }
-  }
-
-  build(context) {
-    // ✅ Must build child to VNode, not return raw Widget
-    if (!this.child) {
-      return null;
-    }
-    const childElement = this.child.createElement(context.element, context.element.runtime);
-    childElement.mount(context.element);
-    return childElement.performRebuild();
-  }
-
-  debugFillProperties(properties) {
-    super.debugFillProperties(properties);
-    properties.push({ name: 'flex', value: this.flex });
-    properties.push({ name: 'fit', value: this.fit });
-  }
-
-  createElement(parent, runtime) {
-    return new FlexibleElement(this, parent, runtime);
-  }
-}
-
-class FlexibleElement extends Element {
-  performRebuild() {
-    return this.widget.build(this.context);
-  }
-}
-
-// ============================================================================
-// EXPANDED WIDGET
-// ============================================================================
-
-class Expanded extends Flexible {
-  constructor({
-    key = null,
-    flex = 1,
-    child = null
-  } = {}) {
-    super({
-      key,
-      flex,
-      fit: FlexFit.tight,
-      child
-    });
-  }
-}
-
-// ============================================================================
-// WRAP WIDGET
-// ============================================================================
-
-class Wrap extends Widget {
-  constructor({
-    key = null,
-    direction = Axis.horizontal,
-    alignment = WrapAlignment.start,
-    spacing = 0,
-    runAlignment = WrapAlignment.start,
-    runSpacing = 0,
-    crossAxisAlignment = WrapCrossAlignment.start,
-    textDirection = null,
-    verticalDirection = VerticalDirection.down,
-    clipBehavior = Clip.none,
-    children = []
-  } = {}) {
-    super(key);
-
-    this.direction = direction;
-    this.alignment = alignment;
-    this.spacing = spacing;
-    this.runAlignment = runAlignment;
-    this.runSpacing = runSpacing;
-    this.crossAxisAlignment = crossAxisAlignment;
-    this.textDirection = textDirection;
-    this.verticalDirection = verticalDirection;
-    this.clipBehavior = clipBehavior;
-    this.children = children || [];
-  }
-
-  /**
-   * Map wrap alignment to CSS
-   * @private
-   */
-  _mapAlignment() {
-    // Handle shorthand enum syntax (e.g. ".center")
-    let value = this.alignment;
-    if (typeof value === 'string' && value.startsWith('.')) {
-      value = value.substring(1);
-    }
-
-    const map = {
-      start: 'flex-start',
-      end: 'flex-end',
-      center: 'center',
-      spaceBetween: 'space-between',
-      spaceAround: 'space-around',
-      spaceEvenly: 'space-evenly'
-    };
-    return map[value] || 'flex-start';
-  }
-
-  /**
-   * Map run alignment to CSS
-   * @private
-   */
-  _mapRunAlignment() {
-    // Handle shorthand enum syntax (e.g. ".center")
-    let value = this.runAlignment;
-    if (typeof value === 'string' && value.startsWith('.')) {
-      value = value.substring(1);
-    }
-
-    const map = {
-      start: 'flex-start',
-      end: 'flex-end',
-      center: 'center',
-      spaceBetween: 'space-between',
-      spaceAround: 'space-around',
-      spaceEvenly: 'space-evenly'
-    };
-    return map[value] || 'flex-start';
-  }
-
-  build(context) {
-    const elementId = context.element.getElementId();
-    const widgetPath = context.element.getWidgetPath();
-
-    const flexDirection = this.direction === Axis.horizontal ? 'row' : 'column';
-    const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';
-
-    const style = {
-      display: 'flex',
-      flexDirection,
-      flexWrap: 'wrap',
-      justifyContent: this._mapAlignment(),
-      alignContent: this._mapRunAlignment(),
-      gap: `${this.spacing}px ${this.runSpacing}px`,
-      direction: this.textDirection === TextDirection.rtl ? 'rtl' : 'ltr',
-      overflow: overflowValue
-    };
-
-    const childVNodes = this.children.map((childWidget) => {
-      const childElement = childWidget.createElement(context.element, context.element.runtime);
-      childElement.mount(context.element);
-      return childElement.performRebuild();
-    });
-
-    return new VNode({
-      tag: 'div',
-      props: {
-        style,
-        'data-element-id': elementId,
-        'data-widget-path': widgetPath,
-        'data-widget': 'Wrap',
-        'data-direction': this.direction,
-        'data-alignment': this.alignment,
-        'data-spacing': this.spacing
-      },
-      children: childVNodes,
-      key: this.key
-    });
-  }
-
-  debugFillProperties(properties) {
-    super.debugFillProperties(properties);
-    properties.push({ name: 'direction', value: this.direction });
-    properties.push({ name: 'alignment', value: this.alignment });
-    properties.push({ name: 'spacing', value: this.spacing });
-    properties.push({ name: 'runAlignment', value: this.runAlignment });
-    properties.push({ name: 'runSpacing', value: this.runSpacing });
-    properties.push({ name: 'childCount', value: this.children.length });
-  }
-
-  createElement(parent, runtime) {
-    return new WrapElement(this, parent, runtime);
-  }
-}
-
-class WrapElement extends Element {
-  performRebuild() {
-    return this.widget.build(this.context);
-  }
-}
-
-// ============================================================================
-// FLOW DELEGATE BASE CLASS
-// ============================================================================
-
-class FlowDelegate {
-  constructor() {
-    if (new.target === FlowDelegate) {
-      throw new Error('FlowDelegate is abstract');
-    }
-  }
-
-  /**
-   * Get size for the flow
-   */
-  getSize(constraints) {
-    throw new Error('getSize() must be implemented');
-  }
-
-  /**
-   * Perform layout on children
-   */
-  paintChildren(context, sizes) {
-    throw new Error('paintChildren() must be implemented');
-  }
-
-  /**
-   * Check if should repaint
-   */
-  shouldRepaint(oldDelegate) {
-    return true;
-  }
-
-  /**
-   * Check if should reflow
-   */
-  shouldReflow(oldDelegate) {
-    return true;
-  }
-}
-
-// ============================================================================
-// FLOW WIDGET
-// ============================================================================
-
-class Flow extends Widget {
-  constructor({
-    key = null,
-    delegate = null,
-    clipBehavior = Clip.hardEdge,
-    children = []
-  } = {}) {
-    super(key);
-
-    if (!delegate) {
-      throw new Error('Flow requires a delegate');
-    }
-
-    if (!(delegate instanceof FlowDelegate)) {
-      throw new Error('delegate must be an instance of FlowDelegate');
-    }
-
-    this.delegate = delegate;
-    this.clipBehavior = clipBehavior;
-    this.children = children || [];
-  }
-
-  build(context) {
-    const elementId = context.element.getElementId();
-    const widgetPath = context.element.getWidgetPath();
-
-    const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';
-
-    const style = {
-      position: 'relative',
-      display: 'inline-block',
-      overflow: overflowValue
-    };
-
-    // Build child VNodes with absolute positioning
-    const childVNodes = this.children.map((childWidget, index) => {
-      const childElement = childWidget.createElement(context.element, context.element.runtime);
-      childElement.mount(context.element);
-      const childVNode = childElement.performRebuild();
-
-      return new VNode({
-        tag: 'div',
-        props: {
-          style: {
-            position: 'absolute',
-            left: 0,
-            top: 0
-          },
-          'data-flow-index': index
-        },
-        children: [childVNode]
-      });
-    });
-
-    return new VNode({
-      tag: 'div',
-      props: {
-        style,
-        'data-element-id': elementId,
-        'data-widget-path': widgetPath,
-        'data-widget': 'Flow',
-        'data-clip-behavior': this.clipBehavior,
-        'data-child-count': this.children.length
-      },
-      children: childVNodes,
-      key: this.key
-    });
-  }
-
-  debugFillProperties(properties) {
-    super.debugFillProperties(properties);
-    properties.push({ name: 'delegate', value: this.delegate.constructor.name });
-    properties.push({ name: 'clipBehavior', value: this.clipBehavior });
-    properties.push({ name: 'childCount', value: this.children.length });
-  }
-
-  createElement(parent, runtime) {
-    return new FlowElement(this, parent, runtime);
-  }
-}
-
-class FlowElement extends Element {
-  performRebuild() {
-    return this.widget.build(this.context);
-  }
-}
-
-// ============================================================================
-// EXPORTS
-// ============================================================================
-
-export {
-  Flex,
-  FlexElement,
-  RenderFlex,
-  Row,
-  Column,
-  Flexible,
-  FlexibleElement,
-  FlexParentData,
-  Expanded,
-  Wrap,
-  WrapElement,
-  Flow,
-  FlowElement,
-  FlowDelegate,
-  MainAxisSize
-};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/opacity.js b/packages/flutterjs_engine/package/material/src/widgets/compoment/opacity.js
deleted file mode 100644
index fa974a53..00000000
--- a/packages/flutterjs_engine/package/material/src/widgets/compoment/opacity.js
+++ /dev/null
@@ -1,197 +0,0 @@
-import { ProxyWidget } from '../../core/widget_element.js';
-import { VNode } from '@flutterjs/vdom/vnode';
-
-// ============================================================================
-// BLEND MODE ENUM
-// Maps Flutter blend modes to CSS mix-blend-mode values
-// ============================================================================
-
-const BlendMode = {
-    clear: 'clear',
-    src: 'src',
-    dst: 'dst',
-    srcOver: 'source-over',
-    dstOver: 'destination-over',
-    srcIn: 'source-in',
-    dstIn: 'destination-in',
-    srcOut: 'source-out',
-    dstOut: 'destination-out',
-    srcATop: 'source-atop',
-    dstATop: 'destination-atop',
-    xor: 'xor',
-    plus: 'lighter',
-    modulate: 'multiply',
-    screen: 'screen',
-    overlay: 'overlay',
-    darken: 'darken',
-    lighten: 'lighten',
-    colorDodge: 'color-dodge',
-    colorBurn: 'color-burn',
-    hardLight: 'hard-light',
-    softLight: 'soft-light',
-    difference: 'difference',
-    exclusion: 'exclusion',
-    multiply: 'multiply',
-    hue: 'hue',
-    saturation: 'saturation',
-    color: 'color',
-    luminosity: 'luminosity'
-};
-
-// ============================================================================
-// OPACITY WIDGET
-// Applies opacity to child widget (Flutter-like behavior)
-// ============================================================================
-
-class Opacity extends ProxyWidget {
-    constructor({ key = null, opacity = 1.0, alwaysIncludeSemantics = false, child = null } = {}) {
-        super({ key, child });
-
-        // Validate opacity is between 0 and 1
-        if (typeof opacity !== 'number' || opacity < 0.0 || opacity > 1.0) {
-            throw new Error(
-                `Opacity must be between 0.0 and 1.0, got: ${opacity}`
-            );
-        }
-
-        this.opacity = opacity;
-        this.alwaysIncludeSemantics = alwaysIncludeSemantics;
-        this._renderObject = null;
-    }
-
-    /**
-     * Create render object for opacity
-     */
-    createRenderObject(context) {
-        return new RenderOpacity({
-            opacity: this.opacity,
-            alwaysIncludeSemantics: this.alwaysIncludeSemantics
-        });
-    }
-
-    /**
-     * Update render object when widget properties change
-     */
-    updateRenderObject(context, renderObject) {
-        renderObject.opacity = this.opacity;
-        renderObject.alwaysIncludeSemantics = this.alwaysIncludeSemantics;
-    }
-
-    /**
-     * Build the widget tree
-     */
-    build(context) {
-        // Create or update render object
-        if (!this._renderObject) {
-            this._renderObject = this.createRenderObject(context);
-        } else {
-            this.updateRenderObject(context, this._renderObject);
-        }
-
-        // Build child widget
-        let childVNode = null;
-        if (this.child) {
-            if (this.child.createElement) {
-                const childElement = this.child.createElement(context.element, context.element.runtime);
-                childElement.mount(context.element);
-                childVNode = childElement.performRebuild();
-            } else {
-                childVNode = this.child;
-            }
-        }
-
-        // Apply opacity styling
-        const elementId = context.element.getElementId();
-        const widgetPath = context.element.getWidgetPath();
-
-        return new VNode({
-            tag: 'div',
-            props: {
-                style: {
-                    opacity: this.opacity,
-                    transition: 'opacity 0.2s ease-in-out'
-                },
-                'data-element-id': elementId,
-                'data-widget-path': widgetPath,
-                'data-widget': 'Opacity',
-                'data-opacity': this.opacity,
-                'data-always-include-semantics': this.alwaysIncludeSemantics,
-                role: this.alwaysIncludeSemantics ? 'img' : undefined,
-                'aria-opacity': this.alwaysIncludeSemantics ? this.opacity : undefined
-            },
-            children: childVNode ? [childVNode] : [],
-            key: this.key
-        });
-    }
-
-    /**
-     * Debug properties
-     */
-    debugFillProperties(properties) {
-        super.debugFillProperties(properties);
-        properties.push({
-            name: 'opacity',
-            value: this.opacity
-        });
-
-        if (this.alwaysIncludeSemantics) {
-            properties.push({
-                name: 'alwaysIncludeSemantics',
-                value: this.alwaysIncludeSemantics,
-                tooltip: 'Include semantics even with 0 opacity'
-            });
-        }
-    }
-
-    /**
-     * Create element
-     */
-    createElement(parent, runtime) {
-        return new OpacityElement(this,parent, runtime);
-    }
-}
-
-// ============================================================================
-// RENDER OPACITY
-// Represents the render object for opacity transformation
-// ============================================================================
-
-class RenderOpacity {
-    constructor({ opacity = 1.0, alwaysIncludeSemantics = false } = {}) {
-        this.opacity = opacity;
-        this.alwaysIncludeSemantics = alwaysIncludeSemantics;
-    }
-
-    /**
-     * Apply opacity to a DOM element
-     */
-    applyToElement(element) {
-        if (element) {
-            element.style.opacity = this.opacity;
-        }
-    }
-
-    /**
-     * Get debug info
-     */
-    debugInfo() {
-        return {
-            type: 'RenderOpacity',
-            opacity: this.opacity,
-            alwaysIncludeSemantics: this.alwaysIncludeSemantics
-        };
-    }
-}
-
-// ============================================================================
-// OPACITY ELEMENT
-// Element for opacity widget
-// ============================================================================
-
-class OpacityElement extends ProxyWidget.constructor.prototype.constructor {
-    performRebuild() {
-        return this.widget.build(this.context);
-    }
-}
-
-export { Opacity, RenderOpacity, BlendMode };
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/padding.js b/packages/flutterjs_engine/package/material/src/widgets/compoment/padding.js
deleted file mode 100644
index 43893c9a..00000000
--- a/packages/flutterjs_engine/package/material/src/widgets/compoment/padding.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Widget } from '../../core/widget_element.js';
-import { VNode } from '@flutterjs/vdom/vnode';
-import { EdgeInsets } from '../../utils/edge_insets.js';
-import { Element } from '@flutterjs/runtime';
-
-// ============================================================================
-// PADDING WIDGET
-// ============================================================================
-
-class Padding extends Widget {
-    constructor({
-        key = null,
-        padding = null,
-        child = null
-    } = {}) {
-        super(key);
-
-        if (!padding) {
-            throw new Error('Padding requires padding parameter');
-        }
-
-        if (!(padding instanceof EdgeInsets)) {
-            throw new Error(
-                `Padding requires an EdgeInsets instance, got: ${typeof padding}`
-            );
-        }
-
-        this.padding = padding;
-        this.child = child;
-    }
-
-    /**
-     * Build widget tree - following DecoratedBox pattern exactly
-     */
-    build(context) {
-        const elementId = context.element.getElementId();
-        const widgetPath = context.element.getWidgetPath();
-
-        let childVNode = null;
-        if (this.child) {
-            const childElement = this.child.createElement(context.element, context.element.runtime);
-            childElement.mount(context.element);
-            childVNode = childElement.performRebuild();
-        }
-
-        const paddingCSS = this.padding.toCSSShorthand();
-
-        const style = {
-            padding: paddingCSS,
-            boxSizing: 'border-box'
-        };
-
-        return new VNode({
-            tag: 'div',
-            props: {
-                style,
-                'data-element-id': elementId,
-                'data-widget-path': widgetPath,
-                'data-widget': 'Padding'
-            },
-            children: childVNode ? [childVNode] : [],
-            key: this.key
-        });
-    }
-
-    debugFillProperties(properties) {
-        super.debugFillProperties(properties);
-        properties.push({ name: 'padding', value: this.padding.toString() });
-    }
-
-    createElement(parent, runtime) {
-        return new PaddingElement(this, parent, runtime);
-    }
-}
-
-class PaddingElement extends Element {
-    performRebuild() {
-        return this.widget.build(this.context);
-    }
-}
-
-// ============================================================================
-// RENDER PADDING (stub for compatibility)
-// ============================================================================
-
-class RenderPadding {
-    constructor({ padding = null } = {}) {
-        this.padding = padding;
-    }
-}
-
-export { Padding, RenderPadding };
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/rich_text.js b/packages/flutterjs_engine/package/material/src/widgets/compoment/rich_text.js
deleted file mode 100644
index 3be50cd3..00000000
--- a/packages/flutterjs_engine/package/material/src/widgets/compoment/rich_text.js
+++ /dev/null
@@ -1,674 +0,0 @@
-import { Widget, } from '../../core/widget_element.js';
-import { Element } from "@flutterjs/runtime"
-import { VNode } from '@flutterjs/vdom/vnode';
-import { TextDirection } from '../../utils/utils.js';
-
-// ============================================================================
-// ENUMS
-// ============================================================================
-
-const TextAlign = {
-  left: 'left',
-  right: 'right',
-  center: 'center',
-  justify: 'justify',
-  start: 'start',
-  end: 'end'
-};
-
-const TextOverflow = {
-  clip: 'clip',
-  fade: 'fade',
-  ellipsis: 'ellipsis',
-  visible: 'visible'
-};
-
-const TextWidthBasis = {
-  parent: 'parent',
-  longestLine: 'longestLine'
-};
-
-const TextBaseline = {
-  alphabetic: 'alphabetic',
-  ideographic: 'ideographic'
-};
-
-// ============================================================================
-// TEXT SCALER
-// ============================================================================
-
-class TextScaler {
-  constructor(scale = 1.0) {
-    this.textScaleFactor = scale;
-  }
-
-  static get noScaling() {
-    return new TextScaler(1.0);
-  }
-
-  static linear(factor = 1.0) {
-    return new TextScaler(factor);
-  }
-
-  scale(textSize) {
-    return textSize * this.textScaleFactor;
-  }
-
-  toString() {
-    return `TextScaler(${this.textScaleFactor})`;
-  }
-}
-
-// ============================================================================
-// INLINE SPAN
-// ============================================================================
-
-class InlineSpan {
-  constructor() {
-    if (new.target === InlineSpan) {
-      throw new Error('InlineSpan is abstract');
-    }
-  }
-
-  toPlainText() {
-    throw new Error('toPlainText() must be implemented');
-  }
-
-  buildVNode() {
-    throw new Error('buildVNode() must be implemented');
-  }
-}
-
-// ============================================================================
-// TEXT SPAN
-// ============================================================================
-
-class TextSpan extends InlineSpan {
-  constructor({
-    text = '',
-    style = null,
-    children = [],
-    recognizer = null
-  } = {}) {
-    super();
-
-    this.text = text;
-    this.style = style || {};
-    this.children = children || [];
-    this.recognizer = recognizer;
-  }
-
-  toPlainText() {
-    let result = this.text || '';
-
-    if (this.children && this.children.length > 0) {
-      for (const child of this.children) {
-        result += child.toPlainText?.() || '';
-      }
-    }
-
-    return result;
-  }
-
-  buildVNode(textAlign = TextAlign.start, textDirection = TextDirection.ltr) {
-    const style = this._getTextStyle(textAlign, textDirection);
-
-    const childVNodes = this.children.map(child => {
-      if (child instanceof TextSpan) {
-        return child.buildVNode(textAlign, textDirection);
-      }
-      if (child instanceof WidgetSpan) {
-        return child.buildVNode();
-      }
-      return new VNode({
-        tag: 'span',
-        children: [String(child)]
-      });
-    });
-
-    if (this.text) {
-      childVNodes.unshift(new VNode({
-        tag: 'span',
-        children: [this.text]
-      }));
-    }
-
-    return new VNode({
-      tag: 'span',
-      props: {
-        style,
-        onClick: this.recognizer?.onTap,
-        onMouseDown: this.recognizer?.onLongPress
-      },
-      children: childVNodes.length > 0 ? childVNodes : [this.text || '']
-    });
-  }
-
-  _getTextStyle(textAlign, textDirection) {
-    const style = { ...this.style };
-
-    // Ensure style is object
-    if (typeof this.style === 'string') {
-      return {};
-    }
-
-    return style;
-  }
-}
-
-// ============================================================================
-// WIDGET SPAN
-// ============================================================================
-
-class WidgetSpan extends InlineSpan {
-  constructor({
-    child = null,
-    alignment = 'baseline',
-    baseline = TextBaseline.alphabetic,
-    style = null
-  } = {}) {
-    super();
-
-    this.child = child;
-    this.alignment = alignment;
-    this.baseline = baseline;
-    this.style = style;
-  }
-
-  toPlainText() {
-    return '\uFFFD'; // Replacement character
-  }
-
-  buildVNode() {
-    if (!this.child) {
-      return new VNode({ tag: 'span', children: ['\uFFFD'] });
-    }
-
-    const childElement = this.child.createElement?.();
-    if (childElement) {
-      return childElement.performRebuild?.();
-    }
-
-    return new VNode({
-      tag: 'span',
-      props: {
-        style: {
-          display: 'inline-flex',
-          alignItems: this.alignment,
-          verticalAlign: this.baseline
-        }
-      },
-      children: [this.child]
-    });
-  }
-
-  /**
-   * Extract widgets from inline span tree
-   * @static
-   */
-  static extractFromInlineSpan(span, textScaler) {
-    const widgets = [];
-
-    function traverse(inlineSpan) {
-      if (inlineSpan instanceof WidgetSpan) {
-        widgets.push(inlineSpan.child);
-      }
-
-      if (inlineSpan.children) {
-        for (const child of inlineSpan.children) {
-          traverse(child);
-        }
-      }
-    }
-
-    traverse(span);
-    return widgets;
-  }
-}
-
-// ============================================================================
-// TEXT STYLE
-// ============================================================================
-
-class TextStyle {
-  constructor({
-    color = null,
-    fontSize = 14,
-    fontWeight = 'normal',
-    fontStyle = 'normal',
-    fontFamily = null,
-    height = null,
-    letterSpacing = null,
-    wordSpacing = null,
-    textDecoration = 'none',
-    decorationColor = null,
-    decorationStyle = 'solid',
-    decorationThickness = 1,
-    backgroundColor = null,
-    foregroundColor = null,
-    shadows = [],
-    fontFeatures = [],
-    fontVariations = []
-  } = {}) {
-    this.color = color;
-    this.fontSize = fontSize;
-    this.fontWeight = fontWeight;
-    this.fontStyle = fontStyle;
-    this.fontFamily = fontFamily;
-    this.height = height;
-    this.letterSpacing = letterSpacing;
-    this.wordSpacing = wordSpacing;
-    this.textDecoration = textDecoration;
-    this.decorationColor = decorationColor;
-    this.decorationStyle = decorationStyle;
-    this.decorationThickness = decorationThickness;
-    this.backgroundColor = backgroundColor;
-    this.foregroundColor = foregroundColor;
-    this.shadows = shadows;
-    this.fontFeatures = fontFeatures;
-    this.fontVariations = fontVariations;
-  }
-
-  /**
-   * Convert to CSS style object
-   */
-  toCSSStyle() {
-    const style = {
-      fontSize: `${this.fontSize}px`,
-      fontWeight: this.fontWeight,
-      fontStyle: this.fontStyle,
-      textDecoration: this.textDecoration,
-      textDecorationColor: this.decorationColor,
-      textDecorationThickness: `${this.decorationThickness}px`,
-      textDecorationStyle: this.decorationStyle
-    };
-
-    if (this.color) style.color = this.color;
-    if (this.fontFamily) style.fontFamily = this.fontFamily;
-    if (this.height) style.lineHeight = this.height;
-    if (this.letterSpacing) style.letterSpacing = `${this.letterSpacing}px`;
-    if (this.wordSpacing) style.wordSpacing = `${this.wordSpacing}px`;
-    if (this.backgroundColor) style.backgroundColor = this.backgroundColor;
-
-    // Add shadows
-    if (this.shadows && this.shadows.length > 0) {
-      style.textShadow = this.shadows
-        .map(shadow => `${shadow.offsetX}px ${shadow.offsetY}px ${shadow.blurRadius}px ${shadow.color}`)
-        .join(', ');
-    }
-
-    return style;
-  }
-
-  /**
-   * Merge with another style
-   */
-  merge(other) {
-    if (!other) return this;
-
-    return new TextStyle({
-      color: other.color ?? this.color,
-      fontSize: other.fontSize ?? this.fontSize,
-      fontWeight: other.fontWeight ?? this.fontWeight,
-      fontStyle: other.fontStyle ?? this.fontStyle,
-      fontFamily: other.fontFamily ?? this.fontFamily,
-      height: other.height ?? this.height,
-      letterSpacing: other.letterSpacing ?? this.letterSpacing,
-      wordSpacing: other.wordSpacing ?? this.wordSpacing,
-      textDecoration: other.textDecoration ?? this.textDecoration,
-      decorationColor: other.decorationColor ?? this.decorationColor,
-      decorationStyle: other.decorationStyle ?? this.decorationStyle,
-      decorationThickness: other.decorationThickness ?? this.decorationThickness,
-      backgroundColor: other.backgroundColor ?? this.backgroundColor,
-      foregroundColor: other.foregroundColor ?? this.foregroundColor
-    });
-  }
-}
-
-// ============================================================================
-// STRUT STYLE
-// ============================================================================
-
-class StrutStyle {
-  constructor({
-    fontFamily = null,
-    fontFamilyFallback = [],
-    fontSize = null,
-    height = null,
-    leading = null,
-    fontWeight = null,
-    fontStyle = null,
-    forceStrutHeight = false
-  } = {}) {
-    this.fontFamily = fontFamily;
-    this.fontFamilyFallback = fontFamilyFallback;
-    this.fontSize = fontSize;
-    this.height = height;
-    this.leading = leading;
-    this.fontWeight = fontWeight;
-    this.fontStyle = fontStyle;
-    this.forceStrutHeight = forceStrutHeight;
-  }
-
-  toCSSStyle() {
-    const style = {};
-
-    if (this.fontFamily) style.fontFamily = this.fontFamily;
-    if (this.fontSize) style.fontSize = `${this.fontSize}px`;
-    if (this.height) style.lineHeight = this.height;
-    if (this.fontWeight) style.fontWeight = this.fontWeight;
-    if (this.fontStyle) style.fontStyle = this.fontStyle;
-
-    return style;
-  }
-}
-
-// ============================================================================
-// RENDER PARAGRAPH
-// ============================================================================
-
-class RenderParagraph {
-  constructor({
-    text = null,
-    textAlign = TextAlign.start,
-    textDirection = TextDirection.ltr,
-    softWrap = true,
-    overflow = TextOverflow.clip,
-    textScaler = null,
-    maxLines = null,
-    locale = null,
-    strutStyle = null,
-    textWidthBasis = TextWidthBasis.parent,
-    textHeightBehavior = null,
-    selectionColor = null,
-    registrar = null
-  } = {}) {
-    this.text = text;
-    this.textAlign = textAlign;
-    this.textDirection = textDirection;
-    this.softWrap = softWrap;
-    this.overflow = overflow;
-    this.textScaler = textScaler || TextScaler.noScaling;
-    this.maxLines = maxLines;
-    this.locale = locale;
-    this.strutStyle = strutStyle;
-    this.textWidthBasis = textWidthBasis;
-    this.textHeightBehavior = textHeightBehavior;
-    this.selectionColor = selectionColor;
-    this.registrar = registrar;
-  }
-
-  debugInfo() {
-    return {
-      type: 'RenderParagraph',
-      textAlign: this.textAlign,
-      textDirection: this.textDirection,
-      softWrap: this.softWrap,
-      overflow: this.overflow,
-      maxLines: this.maxLines,
-      textScaleFactor: this.textScaler.textScaleFactor
-    };
-  }
-}
-
-// ============================================================================
-// RICH TEXT WIDGET
-// ============================================================================
-
-class RichText extends Widget {
-  constructor({
-    key = null,
-    text = null,
-    textAlign = TextAlign.start,
-    textDirection = null,
-    softWrap = true,
-    overflow = TextOverflow.clip,
-    textScaleFactor = 1.0,
-    textScaler = null,
-    maxLines = null,
-    locale = null,
-    strutStyle = null,
-    textWidthBasis = TextWidthBasis.parent,
-    textHeightBehavior = null,
-    selectionRegistrar = null,
-    selectionColor = null
-  } = {}) {
-    super(key);
-
-    if (!text) {
-      throw new Error('RichText requires a text (InlineSpan)');
-    }
-
-    if (maxLines !== null && maxLines <= 0) {
-      throw new Error('maxLines must be null or > 0');
-    }
-
-    if (selectionRegistrar && !selectionColor) {
-      throw new Error('selectionColor is required when selectionRegistrar is provided');
-    }
-
-    // Resolve text scaler
-    let effectiveTextScaler = textScaler || TextScaler.noScaling;
-    if (textScaleFactor !== 1.0 && textScaler === null) {
-      effectiveTextScaler = TextScaler.linear(textScaleFactor);
-    }
-
-    this.text = text;
-    this.textAlign = textAlign;
-    this.textDirection = textDirection;
-    this.softWrap = softWrap;
-    this.overflow = overflow;
-    this.textScaler = effectiveTextScaler;
-    this.maxLines = maxLines;
-    this.locale = locale;
-    this.strutStyle = strutStyle;
-    this.textWidthBasis = textWidthBasis;
-    this.textHeightBehavior = textHeightBehavior;
-    this.selectionRegistrar = selectionRegistrar;
-    this.selectionColor = selectionColor;
-    this._renderObject = null;
-  }
-
-  /**
-   * Create render object
-   */
-  createRenderObject(context) {
-    return new RenderParagraph({
-      text: this.text,
-      textAlign: this.textAlign,
-      textDirection: this.textDirection || context?.textDirection || TextDirection.ltr,
-      softWrap: this.softWrap,
-      overflow: this.overflow,
-      textScaler: this.textScaler,
-      maxLines: this.maxLines,
-      locale: this.locale,
-      strutStyle: this.strutStyle,
-      textWidthBasis: this.textWidthBasis,
-      textHeightBehavior: this.textHeightBehavior,
-      selectionColor: this.selectionColor,
-      registrar: this.selectionRegistrar
-    });
-  }
-
-  /**
-   * Update render object
-   */
-  updateRenderObject(context, renderObject) {
-    renderObject.text = this.text;
-    renderObject.textAlign = this.textAlign;
-    renderObject.textDirection = this.textDirection || context?.textDirection || TextDirection.ltr;
-    renderObject.softWrap = this.softWrap;
-    renderObject.overflow = this.overflow;
-    renderObject.textScaler = this.textScaler;
-    renderObject.maxLines = this.maxLines;
-    renderObject.locale = this.locale;
-    renderObject.strutStyle = this.strutStyle;
-    renderObject.textWidthBasis = this.textWidthBasis;
-    renderObject.textHeightBehavior = this.textHeightBehavior;
-    renderObject.selectionColor = this.selectionColor;
-    renderObject.registrar = this.selectionRegistrar;
-  }
-
-  /**
-   * Build widget tree
-   */
-  build(context) {
-    if (!this._renderObject) {
-      this._renderObject = this.createRenderObject(context);
-    } else {
-      this.updateRenderObject(context, this._renderObject);
-    }
-
-    const elementId = context.element.getElementId();
-    const widgetPath = context.element.getWidgetPath();
-    const effectiveTextDirection = this.textDirection || context?.textDirection || TextDirection.ltr;
-
-    // Build text VNode
-    const textVNode = this.text.buildVNode(this.textAlign, effectiveTextDirection);
-
-    // Map text align to CSS
-    const textAlignValue = this._mapTextAlign(this.textAlign, effectiveTextDirection);
-
-    // Determine overflow behavior
-    let overflowStyle = {};
-    switch (this.overflow) {
-      case TextOverflow.ellipsis:
-        overflowStyle = {
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap'
-        };
-        break;
-      case TextOverflow.fade:
-        overflowStyle = {
-          overflow: 'hidden',
-          mask: 'linear-gradient(to right, black 95%, transparent)'
-        };
-        break;
-      case TextOverflow.clip:
-        overflowStyle = {
-          overflow: 'hidden'
-        };
-        break;
-      case TextOverflow.visible:
-        overflowStyle = {
-          overflow: 'visible'
-        };
-        break;
-    }
-
-    const style = {
-      textAlign: textAlignValue,
-      direction: effectiveTextDirection === TextDirection.rtl ? 'rtl' : 'ltr',
-      whiteSpace: this.softWrap ? 'normal' : 'nowrap',
-      wordWrap: this.softWrap ? 'break-word' : 'normal',
-      display: 'block',
-      ...overflowStyle
-    };
-
-    // Apply max lines
-    if (this.maxLines !== null) {
-      style.display = '-webkit-box';
-      style.WebkitLineClamp = this.maxLines;
-      style.WebkitBoxOrient = 'vertical';
-      style.overflow = 'hidden';
-    }
-
-    // Apply strut style
-    if (this.strutStyle) {
-      Object.assign(style, this.strutStyle.toCSSStyle());
-    }
-
-    // Apply selection color
-    if (this.selectionColor) {
-      style.userSelect = 'text';
-    }
-
-    return new VNode({
-      tag: 'div',
-      props: {
-        style,
-        'data-element-id': elementId,
-        'data-widget-path': widgetPath,
-        'data-widget': 'RichText',
-        'data-text-align': this.textAlign,
-        'data-text-direction': effectiveTextDirection,
-        'data-overflow': this.overflow,
-        'data-max-lines': this.maxLines,
-        'data-soft-wrap': this.softWrap
-      },
-      children: [textVNode],
-      key: this.key
-    });
-  }
-
-  /**
-   * Map text align to CSS
-   * @private
-   */
-  _mapTextAlign(textAlign, textDirection) {
-    const isRTL = textDirection === TextDirection.rtl;
-
-    // Handle shorthand string: ".center" -> "center"
-    if (typeof textAlign === 'string' && textAlign.startsWith('.')) {
-      textAlign = textAlign.substring(1);
-    }
-
-    switch (textAlign) {
-      case TextAlign.start:
-        return isRTL ? 'right' : 'left';
-      case TextAlign.end:
-        return isRTL ? 'left' : 'right';
-      case TextAlign.left:
-        return 'left';
-      case TextAlign.right:
-        return 'right';
-      case TextAlign.center:
-        return 'center';
-      case TextAlign.justify:
-        return 'justify';
-      default:
-        return 'start';
-    }
-  }
-
-  debugFillProperties(properties) {
-    super.debugFillProperties(properties);
-    properties.push({ name: 'textAlign', value: this.textAlign });
-    properties.push({ name: 'textDirection', value: this.textDirection });
-    properties.push({ name: 'softWrap', value: this.softWrap });
-    properties.push({ name: 'overflow', value: this.overflow });
-    properties.push({ name: 'textScaleFactor', value: this.textScaler.textScaleFactor });
-    properties.push({ name: 'maxLines', value: this.maxLines });
-    properties.push({ name: 'text', value: this.text.toPlainText?.() || 'N/A' });
-  }
-
-  createElement(parent, runtime) {
-    return new RichTextElement(this, parent, runtime);
-  }
-}
-
-class RichTextElement extends Element {
-  performRebuild() {
-    return this.widget.build(this.context);
-  }
-}
-
-// ============================================================================
-// EXPORTS
-// ============================================================================
-
-export {
-  RichText,
-  RichTextElement,
-  RenderParagraph,
-  TextSpan,
-  WidgetSpan,
-  InlineSpan,
-  StrutStyle,
-  TextScaler,
-  TextAlign,
-  TextOverflow,
-  TextWidthBasis,
-  TextBaseline
-};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/sized_box.js b/packages/flutterjs_engine/package/material/src/widgets/compoment/sized_box.js
deleted file mode 100644
index 62527d6f..00000000
--- a/packages/flutterjs_engine/package/material/src/widgets/compoment/sized_box.js
+++ /dev/null
@@ -1,590 +0,0 @@
-import { ProxyWidget, ProxyElement } from '../../core/widget_element.js';
-import { VNode } from '@flutterjs/vdom/vnode';
-import { Alignment } from '../../utils/utils.js';
-
-import { Size } from '../../utils/size.js';
-import { BoxConstraints } from '../../utils/box_constraints.js';
-
-// ============================================================================
-// OVERFLOW BOX FIT ENUM
-// ============================================================================
-
-const OverflowBoxFit = {
-    max: 'max',
-    min: 'min'
-};
-
-// ============================================================================
-// IMPROVED SIZED BOX WIDGET
-// ============================================================================
-
-class SizedBox extends ProxyWidget {
-    constructor({
-        key = null,
-        width = null,
-        height = null,
-        child = null
-    } = {}) {
-        super({ key, child });
-
-        this.width = width;
-        this.height = height;
-        this._renderObject = null;
-    }
-
-    /**
-     * Create a box that expands to fill available space
-     */
-    static expand({ key = null, child = null } = {}) {
-        return new SizedBox({
-            key,
-            width: Infinity,
-            height: Infinity,
-            child
-        });
-    }
-
-    /**
-     * Create a box with zero width and height
-     */
-    static shrink({ key = null, child = null } = {}) {
-        return new SizedBox({
-            key,
-            width: 0,
-            height: 0,
-            child
-        });
-    }
-
-    /**
-     * Create a square box
-     */
-    static square({ key = null, dimension = 0, child = null } = {}) {
-        return new SizedBox({
-            key,
-            width: dimension,
-            height: dimension,
-            child
-        });
-    }
-
-    /**
-     * Create from Size object
-     */
-    static fromSize({ key = null, size = null, child = null } = {}) {
-        return new SizedBox({
-            key,
-            width: size?.width,
-            height: size?.height,
-            child
-        });
-    }
-
-    /**
-     * Create render object
-     */
-    createRenderObject(context) {
-        return {
-            constraints: this._getConstraints()
-        };
-    }
-
-    /**
-     * Update render object
-     */
-    updateRenderObject(context, renderObject) {
-        renderObject.constraints = this._getConstraints();
-    }
-
-    /**
-     * Get constraints from width/height
-     * @private
-     */
-    _getConstraints() {
-        return BoxConstraints.tightFor({
-            width: this.width === Infinity ? null : this.width,
-            height: this.height === Infinity ? null : this.height
-        });
-    }
-
-
-
-    /**
-     * Debug properties
-     */
-    debugFillProperties(properties) {
-        super.debugFillProperties(properties);
-        properties.push({ name: 'width', value: this.width });
-        properties.push({ name: 'height', value: this.height });
-    }
-
-    /**
-     * Create element
-     */
-    createElement(parent, runtime) {
-        return new SizedBoxElement(this, parent, runtime);
-    }
-}
-
-class SizedBoxElement extends ProxyElement {
-    performRebuild() {
-        const elementId = this.getElementId();
-        const widgetPath = this.getWidgetPath();
-
-        const style = {
-            boxSizing: 'border-box',
-            flexShrink: 0
-        };
-
-        // Apply width
-        if (this.widget.width !== null && this.widget.width !== undefined) {
-            if (this.widget.width === Infinity) {
-                style.width = '100%';
-                style.flex = '1 1 auto';
-            } else {
-                style.width = `${this.widget.width}px`;
-            }
-        }
-
-        // Apply height
-        if (this.widget.height !== null && this.widget.height !== undefined) {
-            if (this.widget.height === Infinity) {
-                style.height = '100%';
-                style.flex = '1 1 auto';
-            } else {
-                style.height = `${this.widget.height}px`;
-            }
-        }
-
-        // Get child VNode from parent class (this handles the widget lifecycle)
-        const childVNode = super.performRebuild();
-
-        // Wrap child VNode (or create empty div if no child)
-        return new VNode({
-            tag: 'div',
-            props: {
-                style,
-                'data-element-id': elementId,
-                'data-widget-path': widgetPath,
-                'data-widget': 'SizedBox',
-                'data-width': this.widget.width,
-                'data-height': this.widget.height
-            },
-            children: childVNode ? [childVNode] : [],
-            key: this.widget.key
-        });
-    }
-}
-
-// ============================================================================
-// CONSTRAINED BOX WIDGET
-// ============================================================================
-
-class ConstrainedBox extends ProxyWidget {
-    constructor({
-        key = null,
-        constraints = null,
-        child = null
-    } = {}) {
-        super({ key, child });
-
-        if (!constraints) {
-            throw new Error('ConstrainedBox requires constraints');
-        }
-
-        if (!(constraints instanceof BoxConstraints)) {
-            throw new Error(
-                `ConstrainedBox requires a BoxConstraints instance, got: ${typeof constraints}`
-            );
-        }
-
-        this.constraints = constraints;
-        this._renderObject = null;
-    }
-
-    /**
-     * Create render object
-     */
-    createRenderObject(context) {
-        return { additionalConstraints: this.constraints };
-    }
-
-    /**
-     * Update render object
-     */
-    updateRenderObject(context, renderObject) {
-        renderObject.additionalConstraints = this.constraints;
-    }/**
-     * Debug properties
-     */
-    debugFillProperties(properties) {
-        super.debugFillProperties(properties);
-        properties.push({ name: 'constraints', value: this.constraints.toString() });
-    }
-
-    /**
-     * Create element
-     */
-    createElement(parent, runtime) {
-        return new ProxyElement(this, parent, runtime);
-    }
-}
-
-// ============================================================================
-// LIMITED BOX WIDGET
-// Limits size only when constrained by parent
-// ============================================================================
-
-class LimitedBox extends ProxyWidget {
-    constructor({
-        key = null,
-        maxWidth = Infinity,
-        maxHeight = Infinity,
-        child = null
-    } = {}) {
-        super({ key, child });
-
-        if (maxWidth < 0 || maxHeight < 0) {
-            throw new Error('maxWidth and maxHeight must be >= 0');
-        }
-
-        this.maxWidth = maxWidth;
-        this.maxHeight = maxHeight;
-        this._renderObject = null;
-    }
-
-    /**
-     * Create render object
-     */
-    createRenderObject(context) {
-        return { maxWidth: this.maxWidth, maxHeight: this.maxHeight };
-    }
-
-    /**
-     * Update render object
-     */
-    updateRenderObject(context, renderObject) {
-        renderObject.maxWidth = this.maxWidth;
-        renderObject.maxHeight = this.maxHeight;
-    }/**
-     * Debug properties
-     */
-    debugFillProperties(properties) {
-        super.debugFillProperties(properties);
-        properties.push({ name: 'maxWidth', value: this.maxWidth });
-        properties.push({ name: 'maxHeight', value: this.maxHeight });
-    }
-
-    /**
-     * Create element
-     */
-    createElement(parent, runtime) {
-        return new ProxyElement(this, parent, runtime);
-    }
-}
-
-// ============================================================================
-// OVERFLOW BOX WIDGET
-// Allows child to overflow parent constraints
-// ============================================================================
-
-class OverflowBox extends ProxyWidget {
-    constructor({
-        key = null,
-        alignment = Alignment.center,
-        minWidth = null,
-        maxWidth = null,
-        minHeight = null,
-        maxHeight = null,
-        fit = OverflowBoxFit.max,
-        child = null
-    } = {}) {
-        super({ key, child });
-
-        this.alignment = alignment;
-        this.minWidth = minWidth;
-        this.maxWidth = maxWidth;
-        this.minHeight = minHeight;
-        this.maxHeight = maxHeight;
-        this.fit = fit;
-        this._renderObject = null;
-    }
-
-    /**
-     * Create render object
-     */
-    createRenderObject(context) {
-        return {
-            alignment: this.alignment,
-            minWidth: this.minWidth,
-            maxWidth: this.maxWidth,
-            minHeight: this.minHeight,
-            maxHeight: this.maxHeight,
-            fit: this.fit
-        };
-    }
-
-    /**
-     * Update render object
-     */
-    updateRenderObject(context, renderObject) {
-        renderObject.alignment = this.alignment;
-        renderObject.minWidth = this.minWidth;
-        renderObject.maxWidth = this.maxWidth;
-        renderObject.minHeight = this.minHeight;
-        renderObject.maxHeight = this.maxHeight;
-        renderObject.fit = this.fit;
-    }/**
-     * Get alignment value for flex
-     * @private
-     */
-    _getAlignmentValue(direction) {
-        if (direction === 'horizontal') {
-            if (this.alignment.x < 0) return 'flex-start';
-            if (this.alignment.x > 0) return 'flex-end';
-            return 'center';
-        } else if (direction === 'vertical') {
-            if (this.alignment.y < 0) return 'flex-start';
-            if (this.alignment.y > 0) return 'flex-end';
-            return 'center';
-        }
-        return 'center';
-    }
-
-    /**
-     * Debug properties
-     */
-    debugFillProperties(properties) {
-        super.debugFillProperties(properties);
-        properties.push({ name: 'alignment', value: this.alignment.toString() });
-        properties.push({ name: 'fit', value: this.fit });
-        if (this.minWidth !== null) properties.push({ name: 'minWidth', value: this.minWidth });
-        if (this.maxWidth !== null) properties.push({ name: 'maxWidth', value: this.maxWidth });
-        if (this.minHeight !== null) properties.push({ name: 'minHeight', value: this.minHeight });
-        if (this.maxHeight !== null) properties.push({ name: 'maxHeight', value: this.maxHeight });
-    }
-
-    /**
-     * Create element
-     */
-    createElement(parent, runtime) {
-        return new ProxyElement(this, parent, runtime);
-    }
-}
-
-// ============================================================================
-// SIZED OVERFLOW BOX WIDGET
-// Fixed size with ability to overflow
-// ============================================================================
-
-class SizedOverflowBox extends ProxyWidget {
-    constructor({
-        key = null,
-        size = null,
-        alignment = Alignment.center,
-        child = null
-    } = {}) {
-        super({ key, child });
-
-        if (!size) {
-            throw new Error('SizedOverflowBox requires a size');
-        }
-
-        this.size = size;
-        this.alignment = alignment;
-        this._renderObject = null;
-    }
-
-    /**
-     * Create render object
-     */
-    createRenderObject(context) {
-        return {
-            requestedSize: this.size,
-            alignment: this.alignment
-        };
-    }
-
-    /**
-     * Update render object
-     */
-    updateRenderObject(context, renderObject) {
-        renderObject.requestedSize = this.size;
-        renderObject.alignment = this.alignment;
-    }/**
-     * Get alignment value for flex
-     * @private
-     */
-    _getAlignmentValue(direction) {
-        if (direction === 'horizontal') {
-            if (this.alignment.x < 0) return 'flex-start';
-            if (this.alignment.x > 0) return 'flex-end';
-            return 'center';
-        } else if (direction === 'vertical') {
-            if (this.alignment.y < 0) return 'flex-start';
-            if (this.alignment.y > 0) return 'flex-end';
-            return 'center';
-        }
-        return 'center';
-    }
-
-    /**
-     * Debug properties
-     */
-    debugFillProperties(properties) {
-        super.debugFillProperties(properties);
-        properties.push({ name: 'size', value: this.size.toString() });
-        properties.push({ name: 'alignment', value: this.alignment.toString() });
-    }
-
-    /**
-     * Create element
-     */
-    createElement(parent, runtime) {
-        return new ProxyElement(this, parent, runtime);
-    }
-}
-
-// ============================================================================
-// OFFSTAGE WIDGET
-// Hides child from view but keeps it in the tree
-// ============================================================================
-
-class Offstage extends ProxyWidget {
-    constructor({
-        key = null,
-        offstage = true,
-        child = null
-    } = {}) {
-        super({ key, child });
-
-        this.offstage = offstage;
-        this._renderObject = null;
-    }
-
-    /**
-     * Create render object
-     */
-    createRenderObject(context) {
-        return { offstage: this.offstage };
-    }
-
-    /**
-     * Update render object
-     */
-    updateRenderObject(context, renderObject) {
-        renderObject.offstage = this.offstage;
-    }/**
-     * Debug properties
-     */
-    debugFillProperties(properties) {
-        super.debugFillProperties(properties);
-        properties.push({ name: 'offstage', value: this.offstage });
-    }
-
-    /**
-     * Create element
-     */
-    createElement(parent, runtime) {
-        return new ProxyElement(this, parent, runtime);
-    }
-}
-
-// ============================================================================
-// FRACTIONALLY SIZED BOX WIDGET
-// Sizes child as a fraction of available space
-// ============================================================================
-
-class FractionallySizedBox extends ProxyWidget {
-    constructor({
-        key = null,
-        alignment = Alignment.center,
-        widthFactor = null,
-        heightFactor = null,
-        child = null
-    } = {}) {
-        super({ key, child });
-
-        if (widthFactor !== null && widthFactor < 0) {
-            throw new Error('widthFactor must be >= 0');
-        }
-
-        if (heightFactor !== null && heightFactor < 0) {
-            throw new Error('heightFactor must be >= 0');
-        }
-
-        this.alignment = alignment;
-        this.widthFactor = widthFactor;
-        this.heightFactor = heightFactor;
-        this._renderObject = null;
-    }
-
-    /**
-     * Create render object
-     */
-    createRenderObject(context) {
-        return {
-            alignment: this.alignment,
-            widthFactor: this.widthFactor,
-            heightFactor: this.heightFactor
-        };
-    }
-
-    /**
-     * Update render object
-     */
-    updateRenderObject(context, renderObject) {
-        renderObject.alignment = this.alignment;
-        renderObject.widthFactor = this.widthFactor;
-        renderObject.heightFactor = this.heightFactor;
-    }/**
-     * Get alignment value for flex
-     * @private
-     */
-    _getAlignmentValue(direction) {
-        if (direction === 'horizontal') {
-            if (this.alignment.x < 0) return 'flex-start';
-            if (this.alignment.x > 0) return 'flex-end';
-            return 'center';
-        } else if (direction === 'vertical') {
-            if (this.alignment.y < 0) return 'flex-start';
-            if (this.alignment.y > 0) return 'flex-end';
-            return 'center';
-        }
-        return 'center';
-    }
-
-    /**
-     * Debug properties
-     */
-    debugFillProperties(properties) {
-        super.debugFillProperties(properties);
-        properties.push({ name: 'alignment', value: this.alignment.toString() });
-        if (this.widthFactor !== null) {
-            properties.push({ name: 'widthFactor', value: this.widthFactor });
-        }
-        if (this.heightFactor !== null) {
-            properties.push({ name: 'heightFactor', value: this.heightFactor });
-        }
-    }
-
-    /**
-     * Create element
-     */
-    createElement(parent, runtime) {
-        return new ProxyElement(this, parent, runtime);
-    }
-}
-
-export {
-    SizedBox,
-    ConstrainedBox,
-    LimitedBox,
-    OverflowBox,
-    SizedOverflowBox,
-    Offstage,
-    FractionallySizedBox,
-    Size,
-    BoxConstraints,
-    OverflowBoxFit
-};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/transform.js b/packages/flutterjs_engine/package/material/src/widgets/compoment/transform.js
deleted file mode 100644
index d86caac8..00000000
--- a/packages/flutterjs_engine/package/material/src/widgets/compoment/transform.js
+++ /dev/null
@@ -1,779 +0,0 @@
-import { ProxyWidget } from '../../core/widget_element.js';
-import { VNode } from '@flutterjs/vdom/vnode';
-import { Offset, Alignment } from '../../utils/utils.js';
-
-
-// ============================================================================
-// ALIGNMENT CLASS
-// Represents alignment in 2D space
-// ============================================================================
-
-
-
-// ============================================================================
-// MATRIX4 CLASS (Simplified for 2D transforms)
-// Represents a 4x4 transformation matrix
-// ============================================================================
-
-class Matrix4 {
-    constructor(values = null) {
-        // 4x4 matrix stored as 16-element array
-        if (values) {
-            this.storage = values;
-        } else {
-            this.storage = new Array(16).fill(0);
-            // Identity matrix
-            this.storage[0] = 1;
-            this.storage[5] = 1;
-            this.storage[10] = 1;
-            this.storage[15] = 1;
-        }
-    }
-
-    static identity() {
-        return new Matrix4();
-    }
-
-    static translationValues(x, y, z = 0) {
-        const m = new Matrix4();
-        m.storage[12] = x;
-        m.storage[13] = y;
-        m.storage[14] = z;
-        return m;
-    }
-
-    static diagonal3Values(x, y, z) {
-        const m = new Matrix4();
-        m.storage[0] = x;
-        m.storage[5] = y;
-        m.storage[10] = z;
-        return m;
-    }
-
-    static rotationZ(radians) {
-        const sin = Math.sin(radians);
-        const cos = Math.cos(radians);
-        const m = new Matrix4();
-        m.storage[0] = cos;
-        m.storage[1] = sin;
-        m.storage[4] = -sin;
-        m.storage[5] = cos;
-        return m;
-    }
-
-    toCSSMatrix() {
-        // Convert to CSS matrix() or matrix3d() format
-        // For 2D transforms, we use matrix(a, b, c, d, e, f)
-        const s = this.storage;
-        return `matrix3d(${s[0]}, ${s[1]}, ${s[2]}, ${s[3]}, ${s[4]}, ${s[5]}, ${s[6]}, ${s[7]}, ${s[8]}, ${s[9]}, ${s[10]}, ${s[11]}, ${s[12]}, ${s[13]}, ${s[14]}, ${s[15]})`;
-    }
-
-    toString() {
-        return `Matrix4(${this.storage.join(', ')})`;
-    }
-}
-
-// ============================================================================
-// FILTER QUALITY ENUM
-// ============================================================================
-
-const FilterQuality = {
-    low: 'low',
-    medium: 'medium',
-    high: 'high'
-};
-
-// ============================================================================
-// TRANSFORM WIDGET
-// Applies 2D/3D transformation to child widget
-// ============================================================================
-
-class Transform extends ProxyWidget {
-    constructor({
-        key = null,
-        transform = null,
-        origin = null,
-        alignment = null,
-        transformHitTests = true,
-        filterQuality = FilterQuality.low,
-        child = null
-    } = {}) {
-        super({ key, child });
-
-        if (!transform) {
-            throw new Error('Transform requires a transform (Matrix4)');
-        }
-
-        this.transform = transform;
-        this.origin = origin;
-        this.alignment = alignment;
-        this.transformHitTests = transformHitTests;
-        this.filterQuality = filterQuality;
-        this._renderObject = null;
-    }
-
-    /**
-     * Static constructor for rotation
-     */
-    static rotate({
-        key = null,
-        angle = 0,
-        origin = null,
-        alignment = Alignment.center,
-        transformHitTests = true,
-        filterQuality = FilterQuality.low,
-        child = null
-    } = {}) {
-        return new Transform({
-            key,
-            transform: Matrix4.rotationZ(angle),
-            origin,
-            alignment,
-            transformHitTests,
-            filterQuality,
-            child
-        });
-    }
-
-    /**
-     * Static constructor for translation
-     */
-    static translate({
-        key = null,
-        offset = null,
-        transformHitTests = true,
-        filterQuality = FilterQuality.low,
-        child = null
-    } = {}) {
-        if (!offset) {
-            throw new Error('Transform.translate requires an offset');
-        }
-
-        return new Transform({
-            key,
-            transform: Matrix4.translationValues(offset.dx, offset.dy, 0),
-            origin: null,
-            alignment: null,
-            transformHitTests,
-            filterQuality,
-            child
-        });
-    }
-
-    /**
-     * Static constructor for scale
-     */
-    static scale({
-        key = null,
-        scale = null,
-        scaleX = null,
-        scaleY = null,
-        origin = null,
-        alignment = Alignment.center,
-        transformHitTests = true,
-        filterQuality = FilterQuality.low,
-        child = null
-    } = {}) {
-        if (scale === null && scaleX === null && scaleY === null) {
-            throw new Error("At least one of 'scale', 'scaleX' and 'scaleY' is required to be non-null");
-        }
-
-        if (scale !== null && (scaleX !== null || scaleY !== null)) {
-            throw new Error("If 'scale' is non-null then 'scaleX' and 'scaleY' must be left null");
-        }
-
-        const sx = scale ?? scaleX ?? 1.0;
-        const sy = scale ?? scaleY ?? 1.0;
-
-        return new Transform({
-            key,
-            transform: Matrix4.diagonal3Values(sx, sy, 1.0),
-            origin,
-            alignment,
-            transformHitTests,
-            filterQuality,
-            child
-        });
-    }
-
-    /**
-     * Static constructor for flip
-     */
-    static flip({
-        key = null,
-        flipX = false,
-        flipY = false,
-        origin = null,
-        transformHitTests = true,
-        filterQuality = FilterQuality.low,
-        child = null
-    } = {}) {
-        return new Transform({
-            key,
-            transform: Matrix4.diagonal3Values(
-                flipX ? -1.0 : 1.0,
-                flipY ? -1.0 : 1.0,
-                1.0
-            ),
-            origin,
-            alignment: Alignment.center,
-            transformHitTests,
-            filterQuality,
-            child
-        });
-    }
-
-    /**
-     * Create render object
-     */
-    createRenderObject(context) {
-        return new RenderTransform({
-            transform: this.transform,
-            origin: this.origin,
-            alignment: this.alignment,
-            transformHitTests: this.transformHitTests,
-            filterQuality: this.filterQuality
-        });
-    }
-
-    /**
-     * Update render object
-     */
-    updateRenderObject(context, renderObject) {
-        renderObject.transform = this.transform;
-        renderObject.origin = this.origin;
-        renderObject.alignment = this.alignment;
-        renderObject.transformHitTests = this.transformHitTests;
-        renderObject.filterQuality = this.filterQuality;
-    }
-
-    /**
-     * Build the widget
-     */
-    build(context) {
-        if (!this._renderObject) {
-            this._renderObject = this.createRenderObject(context);
-        } else {
-            this.updateRenderObject(context, this._renderObject);
-        }
-
-        let childVNode = null;
-        if (this.child) {
-            const childElement = this.child.createElement(context.element, context.element.runtime);
-            childElement.mount(context.element);
-            childVNode = childElement.performRebuild();
-        }
-
-        const elementId = context.element.getElementId();
-        const widgetPath = context.element.getWidgetPath();
-
-        // Generate CSS transform
-        const transformCss = this._generateTransformCSS();
-        const transformOrigin = this._generateTransformOrigin();
-        const filter = this._getFilterCSS();
-
-        const style = {
-            transform: transformCss,
-            transformOrigin: transformOrigin,
-            position: 'relative',
-            filter: filter
-        };
-
-        return new VNode({
-            tag: 'div',
-            props: {
-                style,
-                'data-element-id': elementId,
-                'data-widget-path': widgetPath,
-                'data-widget': 'Transform',
-                'data-filter-quality': this.filterQuality,
-                'data-transform-hit-tests': this.transformHitTests
-            },
-            children: childVNode ? [childVNode] : [],
-            key: this.key
-        });
-    }
-
-    /**
-     * Generate CSS transform string
-     * @private
-     */
-    _generateTransformCSS() {
-        if (!this.transform) {
-            return 'none';
-        }
-
-        // For simplicity, convert common transforms to CSS
-        // For complex transforms, use matrix3d
-        return this.transform.toCSSMatrix();
-    }
-
-    /**
-     * Generate CSS transform-origin
-     * @private
-     */
-    _generateTransformOrigin() {
-        if (this.origin) {
-            return `${this.origin.dx}px ${this.origin.dy}px`;
-        }
-
-        if (this.alignment) {
-            // Convert alignment to percentage
-            const x = ((this.alignment.x + 1) / 2) * 100;
-            const y = ((this.alignment.y + 1) / 2) * 100;
-            return `${x}% ${y}%`;
-        }
-
-        return '50% 50%'; // Default center
-    }
-
-    /**
-     * Get filter CSS for quality
-     * @private
-     */
-    _getFilterCSS() {
-        switch (this.filterQuality) {
-            case FilterQuality.high:
-                return 'blur(0px)';
-            case FilterQuality.medium:
-                return 'blur(0.5px)';
-            case FilterQuality.low:
-            default:
-                return 'none';
-        }
-    }
-
-    /**
-     * Debug properties
-     */
-    debugFillProperties(properties) {
-        super.debugFillProperties(properties);
-        properties.push({ name: 'transform', value: this.transform.toString() });
-        if (this.origin) {
-            properties.push({ name: 'origin', value: this.origin.toString() });
-        }
-        if (this.alignment) {
-            properties.push({ name: 'alignment', value: this.alignment.toString() });
-        }
-        properties.push({ name: 'transformHitTests', value: this.transformHitTests });
-        properties.push({ name: 'filterQuality', value: this.filterQuality });
-    }
-
-    /**
-     * Create element
-     */
-    createElement(parent, runtime) {
-        return new TransformElement(this,parent, runtime);
-    }
-}
-
-// ============================================================================
-// RENDER TRANSFORM
-// ============================================================================
-
-class RenderTransform {
-    constructor({
-        transform = null,
-        origin = null,
-        alignment = null,
-        transformHitTests = true,
-        filterQuality = FilterQuality.low
-    } = {}) {
-        this.transform = transform;
-        this.origin = origin;
-        this.alignment = alignment;
-        this.transformHitTests = transformHitTests;
-        this.filterQuality = filterQuality;
-    }
-
-    /**
-     * Debug info
-     */
-    debugInfo() {
-        return {
-            type: 'RenderTransform',
-            transform: this.transform?.toString(),
-            origin: this.origin?.toString(),
-            alignment: this.alignment?.toString(),
-            transformHitTests: this.transformHitTests,
-            filterQuality: this.filterQuality
-        };
-    }
-}
-
-// ============================================================================
-// TRANSFORM ELEMENT
-// ============================================================================
-
-class TransformElement extends ProxyWidget.constructor.prototype.constructor {
-    performRebuild() {
-        return this.widget.build(this.context);
-    }
-}
-
-// ============================================================================
-// LAYER LINK
-// Used for linking transform targets and followers
-// ============================================================================
-
-class LayerLink {
-    constructor() {
-        this._target = null;
-        this._followers = new Set();
-    }
-
-    get target() {
-        return this._target;
-    }
-
-    set target(value) {
-        this._target = value;
-    }
-
-    addFollower(follower) {
-        this._followers.add(follower);
-    }
-
-    removeFollower(follower) {
-        this._followers.delete(follower);
-    }
-
-    getFollowers() {
-        return Array.from(this._followers);
-    }
-}
-
-// ============================================================================
-// COMPOSITED TRANSFORM TARGET WIDGET
-// Marks a widget as a transform target for followers
-// ============================================================================
-
-class CompositedTransformTarget extends ProxyWidget {
-    constructor({
-        key = null,
-        link = null,
-        child = null
-    } = {}) {
-        super({ key, child });
-
-        if (!link) {
-            throw new Error('CompositedTransformTarget requires a LayerLink');
-        }
-
-        this.link = link;
-        this._renderObject = null;
-        this._targetElement = null;
-    }
-
-    /**
-     * Create render object
-     */
-    createRenderObject(context) {
-        return new RenderLeaderLayer({
-            link: this.link
-        });
-    }
-
-    /**
-     * Update render object
-     */
-    updateRenderObject(context, renderObject) {
-        renderObject.link = this.link;
-    }
-
-    /**
-     * Build the widget
-     */
-    build(context) {
-        if (!this._renderObject) {
-            this._renderObject = this.createRenderObject(context);
-        } else {
-            this.updateRenderObject(context, this._renderObject);
-        }
-
-        let childVNode = null;
-        if (this.child) {
-            const childElement = this.child.createElement(context.element, context.element.runtime);
-            childElement.mount(context.element);
-            childVNode = childElement.performRebuild();
-        }
-
-        const elementId = context.element.getElementId();
-        const widgetPath = context.element.getWidgetPath();
-
-        return new VNode({
-            tag: 'div',
-            props: {
-                style: {
-                    position: 'relative'
-                },
-                'data-element-id': elementId,
-                'data-widget-path': widgetPath,
-                'data-widget': 'CompositedTransformTarget',
-                'data-layer-link': this.link.constructor.name,
-                ref: (el) => this._onMount(el)
-            },
-            children: childVNode ? [childVNode] : [],
-            key: this.key
-        });
-    }
-
-    /**
-     * Mount and register target
-     * @private
-     */
-    _onMount(el) {
-        if (!el || !this.link) return;
-
-        this._targetElement = el;
-        this.link.target = el;
-
-        // Update all followers
-        const followers = this.link.getFollowers();
-        followers.forEach(follower => {
-            if (follower._updatePosition) {
-                follower._updatePosition();
-            }
-        });
-    }
-
-    /**
-     * Debug properties
-     */
-    debugFillProperties(properties) {
-        super.debugFillProperties(properties);
-        properties.push({ name: 'link', value: 'LayerLink' });
-    }
-
-    /**
-     * Create element
-     */
-    createElement(parent, runtime) {
-        return new CompositedTransformTargetElement(this,parent, runtime);
-    }
-}
-
-class RenderLeaderLayer {
-    constructor({ link = null } = {}) {
-        this.link = link;
-    }
-
-    debugInfo() {
-        return {
-            type: 'RenderLeaderLayer',
-            hasLink: !!this.link
-        };
-    }
-}
-
-class CompositedTransformTargetElement extends ProxyWidget.constructor.prototype.constructor {
-    performRebuild() {
-        return this.widget.build(this.context);
-    }
-}
-
-// ============================================================================
-// COMPOSITED TRANSFORM FOLLOWER WIDGET
-// Follows a transform target's position
-// ============================================================================
-
-class CompositedTransformFollower extends ProxyWidget {
-    constructor({
-        key = null,
-        link = null,
-        showWhenUnlinked = true,
-        offset = null,
-        targetAnchor = Alignment.topLeft,
-        followerAnchor = Alignment.topLeft,
-        child = null
-    } = {}) {
-        super({ key, child });
-
-        if (!link) {
-            throw new Error('CompositedTransformFollower requires a LayerLink');
-        }
-
-        this.link = link;
-        this.showWhenUnlinked = showWhenUnlinked;
-        this.offset = offset || Offset.zero;
-        this.targetAnchor = targetAnchor;
-        this.followerAnchor = followerAnchor;
-        this._renderObject = null;
-        this._followerElement = null;
-    }
-
-    /**
-     * Create render object
-     */
-    createRenderObject(context) {
-        return new RenderFollowerLayer({
-            link: this.link,
-            showWhenUnlinked: this.showWhenUnlinked,
-            offset: this.offset,
-            leaderAnchor: this.targetAnchor,
-            followerAnchor: this.followerAnchor
-        });
-    }
-
-    /**
-     * Update render object
-     */
-    updateRenderObject(context, renderObject) {
-        renderObject.link = this.link;
-        renderObject.showWhenUnlinked = this.showWhenUnlinked;
-        renderObject.offset = this.offset;
-        renderObject.leaderAnchor = this.targetAnchor;
-        renderObject.followerAnchor = this.followerAnchor;
-    }
-
-    /**
-     * Build the widget
-     */
-    build(context) {
-        if (!this._renderObject) {
-            this._renderObject = this.createRenderObject(context);
-        } else {
-            this.updateRenderObject(context, this._renderObject);
-        }
-
-        let childVNode = null;
-        if (this.child) {
-            const childElement = this.child.createElement(context.element, context.element.runtime);
-            childElement.mount(context.element);
-            childVNode = childElement.performRebuild();
-        }
-
-        const elementId = context.element.getElementId();
-        const widgetPath = context.element.getWidgetPath();
-
-        const style = {
-            position: 'absolute',
-            visibility: this.showWhenUnlinked ? 'visible' : 'hidden'
-        };
-
-        return new VNode({
-            tag: 'div',
-            props: {
-                style,
-                'data-element-id': elementId,
-                'data-widget-path': widgetPath,
-                'data-widget': 'CompositedTransformFollower',
-                'data-layer-link': this.link.constructor.name,
-                ref: (el) => this._onMount(el)
-            },
-            children: childVNode ? [childVNode] : [],
-            key: this.key
-        });
-    }
-
-    /**
-     * Mount and register follower
-     * @private
-     */
-    _onMount(el) {
-        if (!el || !this.link) return;
-
-        this._followerElement = el;
-        this.link.addFollower(this);
-        this._updatePosition();
-    }
-
-    /**
-     * Update position based on target
-     * @private
-     */
-    _updatePosition() {
-        if (!this._followerElement || !this.link.target) {
-            return;
-        }
-
-        try {
-            const targetRect = this.link.target.getBoundingClientRect();
-            const followerRect = this._followerElement.getBoundingClientRect();
-
-            // Calculate anchor offsets
-            const targetAnchorX = ((this.targetAnchor.x + 1) / 2) * targetRect.width;
-            const targetAnchorY = ((this.targetAnchor.y + 1) / 2) * targetRect.height;
-
-            const followerAnchorX = ((this.followerAnchor.x + 1) / 2) * followerRect.width;
-            const followerAnchorY = ((this.followerAnchor.y + 1) / 2) * followerRect.height;
-
-            // Calculate final position
-            let x = targetRect.left + targetAnchorX - followerAnchorX + this.offset.dx;
-            let y = targetRect.top + targetAnchorY - followerAnchorY + this.offset.dy;
-
-            this._followerElement.style.left = `${x}px`;
-            this._followerElement.style.top = `${y}px`;
-        } catch (error) {
-            console.error('Error updating follower position:', error);
-        }
-    }
-
-    /**
-     * Debug properties
-     */
-    debugFillProperties(properties) {
-        super.debugFillProperties(properties);
-        properties.push({ name: 'link', value: 'LayerLink' });
-        properties.push({ name: 'showWhenUnlinked', value: this.showWhenUnlinked });
-        properties.push({ name: 'offset', value: this.offset.toString() });
-        properties.push({ name: 'targetAnchor', value: this.targetAnchor.toString() });
-        properties.push({ name: 'followerAnchor', value: this.followerAnchor.toString() });
-    }
-
-    /**
-     * Create element
-     */
-    createElement(parent, runtime) {
-        return new CompositedTransformFollowerElement(this,parent, runtime);
-    }
-}
-
-class RenderFollowerLayer {
-    constructor({
-        link = null,
-        showWhenUnlinked = true,
-        offset = null,
-        leaderAnchor = null,
-        followerAnchor = null
-    } = {}) {
-        this.link = link;
-        this.showWhenUnlinked = showWhenUnlinked;
-        this.offset = offset || Offset.zero;
-        this.leaderAnchor = leaderAnchor;
-        this.followerAnchor = followerAnchor;
-    }
-
-    debugInfo() {
-        return {
-            type: 'RenderFollowerLayer',
-            hasLink: !!this.link,
-            showWhenUnlinked: this.showWhenUnlinked
-        };
-    }
-}
-
-class CompositedTransformFollowerElement extends ProxyWidget.constructor.prototype.constructor {
-    performRebuild() {
-        return this.widget.build(this.context);
-    }
-
-    detach() {
-        if (this.widget.link && this.widget._followerElement) {
-            this.widget.link.removeFollower(this.widget);
-        }
-        super.detach();
-    }
-}
-
-export {
-    Transform,
-    RenderTransform,
-    CompositedTransformTarget,
-    RenderLeaderLayer,
-    CompositedTransformFollower,
-    RenderFollowerLayer,
-    Matrix4,
-    LayerLink,
-    FilterQuality
-};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/widgets/widgets.js b/packages/flutterjs_engine/package/material/src/widgets/widgets.js
deleted file mode 100644
index 6a19c8af..00000000
--- a/packages/flutterjs_engine/package/material/src/widgets/widgets.js
+++ /dev/null
@@ -1,53 +0,0 @@
-export {
-    Flex,
-    FlexElement,
-    RenderFlex,
-    Row,
-    Column,
-    Flexible,
-    FlexibleElement,
-    FlexParentData,
-    Expanded,
-    Wrap,
-    WrapElement,
-    Flow,
-    FlowElement,
-    FlowDelegate,
-    MainAxisSize
-} from "./compoment/multi_child_view.js";
-
-export {
-    Align, Center
-} from "./compoment/center.js";
-
-export {
-    Stack,
-    StackElement,
-    RenderStack,
-    Positioned,
-    PositionedElement,
-    StackParentData
-} from "./compoment/stack.js";
-
-export {
-    Padding, RenderPadding
-} from "./compoment/padding.js";
-
-export {
-    SizedBox
-} from "./compoment/sized_box.js";
-
-export {
-    RichText,
-    RichTextElement,
-    RenderParagraph,
-    TextSpan,
-    WidgetSpan,
-    InlineSpan,
-    StrutStyle,
-    TextScaler,
-    TextAlign,
-    TextOverflow,
-    TextWidthBasis,
-    TextBaseline
-} from "./compoment/rich_text.js";
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/analyzer/README.md b/packages/flutterjs_engine/src/analyzer/README.md
deleted file mode 100644
index b196f9bb..00000000
--- a/packages/flutterjs_engine/src/analyzer/README.md
+++ /dev/null
@@ -1,42 +0,0 @@
-# @flutterjs/analyzer
-
-**Package**: `@flutterjs/analyzer`  
-**Description**: Static analyzer for Flutter widgets in JavaScript.
-
----
-
-## Overview
-
-The Analyzer package is responsible for parsing and understanding Flutter widget structures in JavaScript. It provides the metadata needed for properties validation, state management, and debugging tools.
-
-## Key Features
-
-- **Parser**: Parses Flutter-like syntax in JS/Dart.
-- **Widget Analyzer**: inspects widget classes to extract properties and state.
-- **Report Generator**: Generates analysis reports for the CLI.
-- **Import Resolver**: Resolves Flutter framework imports.
-
-## Architecture
-
-The analyzer works at build-time (Node.js) to validate code before bundling.
-
-```
-Input (Code) → Lexer → Parser → Analyzer → Report (JSON)
-```
-
-## Exports
-
-- `context_analyzer.js`: Analyzes build context usage.
-- `state_analyzer_implementation.js`: Analyzes `setState` calls.
-- `flutterjs_report_generator.js`: Creates build reports.
-
-## Usage
-
-Used primarily by the `flutterjs_engine` CLI during the build process.
-
-```javascript
-import { FlutterJSWidgetAnalyzer } from '@flutterjs/analyzer';
-
-const analyzer = new FlutterJSWidgetAnalyzer();
-const report = await analyzer.analyze('src/main.js');
-```
diff --git a/packages/flutterjs_engine/src/analyzer/dist/analyzer.js.map b/packages/flutterjs_engine/src/analyzer/dist/analyzer.js.map
deleted file mode 100644
index b7c5a6dc..00000000
--- a/packages/flutterjs_engine/src/analyzer/dist/analyzer.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/analyzer.js"],
-  "sourcesContent": ["/**\n * FlutterJS Analyzer - Main Orchestrator (FIXED Logger Integration)\n * Properly integrates centralized logging system\n */\n\nimport fs from 'fs';\nimport { Lexer } from './lexer.js';\nimport { Parser } from './flutterjs_parser.js';\nimport { WidgetAnalyzer } from './flutterjs_widget_analyzer.js';\nimport { StateAnalyzer } from './state_analyzer_implementation.js';\nimport { ContextAnalyzer } from './context_analyzer.js';\nimport { SSRAnalyzer } from './ssr_analyzer.js';\nimport { ReportGenerator } from './flutterjs_report_generator.js';\nimport { ImportResolver } from './flutter_import_resolver.js';\nimport { resolverConfig } from './flutter_resolver_config.js';\nimport { initLogger, getLogger } from './flutterjs_logger.js';\n\n// ============================================================================\n// MAIN ANALYZER CLASS\n// ============================================================================\n\nclass Analyzer {\n  constructor(options = {}) {\n    this.options = {\n      sourceFile: null,\n      sourceCode: null,\n      outputFormat: 'json',\n      outputFile: null,\n      verbose: true,\n      strict: false,\n      projectRoot: process.cwd(),\n      includeMetrics: true,\n      includeTree: true,\n      includeValidation: true,\n      includeSuggestions: true,\n      includeContext: true,\n      includeSsr: true,\n      includeImports: true,\n      ignoreUnresolvedImports: true,\n      prettyPrint: true,\n      debugLevel: 'info',  // NEW: Add debug level option\n      ...options,\n    };\n\n    // FIXED: Properly initialize logger\n    this.logger = initLogger({\n      level: this.options.debugLevel,\n      writeToFile: true,\n      writeToConsole: false,\n      debugDir: '.debug',\n    });\n\n    const loggerInstance = this.logger.createComponentLogger('Analyzer');\n    this.log = loggerInstance;  // Store logger instance\n\n    // Initialize import resolver\n    this.importResolver = new ImportResolver({\n      projectRoot: this.options.projectRoot,\n      ignoreUnresolved: this.options.ignoreUnresolvedImports,\n      ...resolverConfig,\n    });\n\n    this.results = {\n      source: null,\n      tokens: null,\n      ast: null,\n      widgets: null,\n      importResolution: null,\n      state: null,\n      context: null,\n      ssr: null,\n      report: null,\n    };\n\n    this.errors = [];\n    this.timings = {};\n  }\n\n  /**\n   * Main entry point - run full analysis pipeline\n   */\n  async analyze() {\n    const logger = this.log;\n\n    logger.startSession('FullAnalyzerPipeline');\n\n    try {\n      logger.info('\\n' + '='.repeat(80));\n      logger.info('\uD83D\uDE80 FlutterJS ANALYZER - FULL PIPELINE');\n      logger.info('='.repeat(80));\n\n      // Step 1: Load source code\n      logger.startSession('LoadSource');\n      logger.info('STEP 1: Loading source code...');\n      await this.loadSource();\n      logger.success('Source loaded');\n      logger.endSession('LoadSource');\n\n      // Step 2: Lexing\n      logger.startSession('Lexing');\n      logger.info('STEP 2: Tokenizing (Lexing)...');\n      this.lex();\n      logger.trace('Tokens generated', this.results.tokens.length);\n      logger.success('Lexing complete');\n      logger.endSession('Lexing');\n\n      // Step 3: Parsing\n      logger.startSession('Parsing');\n      logger.info('STEP 3: Building AST (Parsing)...');\n      this.parse();\n      logger.trace('Top-level items', this.results.ast.body.length);\n      logger.success('Parsing complete');\n      logger.endSession('Parsing');\n\n      // Step 4: Widget Analysis (Phase 1)\n      logger.startSession('WidgetAnalysis');\n      logger.info('STEP 4: Widget Analysis (Phase 1)...');\n      this.analyzeWidgets();\n      logger.trace('Widgets detected', this.results.widgets.widgets.length);\n      logger.success('Widget analysis complete');\n      logger.endSession('WidgetAnalysis');\n\n      // Step 5: Import Resolution\n      if (this.options.includeImports) {\n        logger.startSession('ImportResolution');\n        logger.info('STEP 5: Resolving Imports...');\n        this.analyzeImports();\n        const summary = this.results.importResolution?.summary;\n        logger.trace('Imports resolved', summary?.resolved || 0);\n        logger.trace('Imports unresolved', summary?.unresolved || 0);\n        logger.success('Import resolution complete');\n        logger.endSession('ImportResolution');\n      }\n\n      // Step 6: State Analysis (Phase 2)\n      logger.startSession('StateAnalysis');\n      logger.info('STEP 6: State Analysis (Phase 2)...');\n      this.analyzeState();\n      logger.trace('State classes analyzed', this.results.state.stateClasses.length);\n      logger.success('State analysis complete');\n      logger.endSession('StateAnalysis');\n\n      // Step 7: Context Analysis (Phase 3)\n      if (this.options.includeContext) {\n        logger.startSession('ContextAnalysis');\n        logger.info('STEP 7: Context Analysis (Phase 3)...');\n        this.analyzeContext();\n        logger.trace('Inherited widgets detected', this.results.context.inheritedWidgets?.length || 0);\n        logger.success('Context analysis complete');\n        logger.endSession('ContextAnalysis');\n      }\n\n      // Step 8: SSR Analysis (Phase 3)\n      if (this.options.includeSsr) {\n        logger.startSession('SSRAnalysis');\n        logger.info('STEP 8: SSR Compatibility Analysis (Phase 3)...');\n        this.analyzeSsr();\n        logger.trace('SSR Compatibility Score', this.results.ssr.ssrCompatibilityScore);\n        logger.success('SSR analysis complete');\n        logger.endSession('SSRAnalysis');\n      }\n\n      // Step 9: Report Generation\n      logger.startSession('ReportGeneration');\n      logger.info('STEP 9: Generating Report...');\n      this.generateReport();\n      logger.success('Report generated');\n      logger.endSession('ReportGeneration');\n\n      // Step 10: Output\n      logger.startSession('Output');\n      logger.info('STEP 10: Output...');\n      this.output();\n      logger.success('Output complete');\n      logger.endSession('Output');\n\n      logger.info('='.repeat(80));\n      logger.success('\u2705 ANALYSIS COMPLETE');\n      logger.info('='.repeat(80) + '\\n');\n\n      // Save logs to files\n      this.logger.saveLogs();\n\n      return this.getResults();\n    } catch (error) {\n      logger.error('ANALYSIS FAILED');\n      logger.failure('Analysis pipeline', error.message);\n      logger.endSession('FullAnalyzerPipeline');\n      throw error;\n    }\n  }\n\n  /**\n   * Step 5: Resolve all imports\n   */\n  // In analyzer.js analyzeImports()\n  analyzeImports() {\n    const start = Date.now();\n    const logger = this.log;\n\n    try {\n      if (!this.results.source) {\n        logger.warn('No source code found, skipping import analysis');\n        return;\n      }\n\n      logger.info('Processing imports from AST (parsed in Step 3)...');\n\n      // \u2705 Use widget analyzer's already-extracted imports\n      const parsedImports = this.results.widgets?.imports || [];\n\n      if (logger) {\n        logger.info(`Found ${parsedImports.length} import statements`);\n        parsedImports.forEach((imp, idx) => {\n          logger.debug(`  \uD83D\uDCCD ${imp.source} \u2192 [${imp.items.join(', ')}]`);\n        });\n      }\n\n      // \u2705 Now use ImportResolver only for RESOLUTION\n      // (finding where modules actually are)\n      const resolution = this.importResolver.resolveImports(parsedImports);\n\n      this.results.importResolution = {\n        imports: resolution.imports,\n        summary: resolution.summary,\n        parsed: parsedImports, // From AST parsing\n      };\n\n      // Log statistics\n      logger.info(`Resolved: ${resolution.summary.resolved}`);\n      logger.info(`Unresolved: ${resolution.summary.unresolved}`);\n      logger.debug(`Framework packages: ${resolution.summary.bySource.framework}`);\n      logger.debug(`Local imports: ${resolution.summary.bySource.local}`);\n\n      // Check for errors\n      if (!this.options.ignoreUnresolvedImports &&\n        resolution.imports.errors.length > 0) {\n        throw new Error(\n          `${resolution.imports.errors.length} imports could not be resolved`\n        );\n      }\n    } catch (error) {\n      logger.error(`Import resolution failed: ${error.message}`);\n      throw new Error(`Import resolution failed: ${error.message}`);\n    }\n\n    this.timings.analyzeImports = Date.now() - start;\n  }\n\n  /**\n   * Step 1: Load source code from file or use provided code\n   */\n  async loadSource() {\n    const start = Date.now();\n    const logger = this.log;\n\n    if (this.options.sourceCode) {\n      this.results.source = this.options.sourceCode;\n      logger.debug('Using provided source code');\n    } else if (this.options.sourceFile) {\n      try {\n        this.results.source = fs.readFileSync(this.options.sourceFile, 'utf-8');\n        logger.debug(`Loaded from file: ${this.options.sourceFile}`);\n        logger.trace('Source file size', this.results.source.length);\n      } catch (error) {\n        logger.error(`Cannot read file \"${this.options.sourceFile}\"`);\n        throw new Error(`Cannot read file \"${this.options.sourceFile}\": ${error.message}`);\n      }\n    } else {\n      logger.error('No source code or source file provided');\n      throw new Error('No source code or source file provided');\n    }\n\n    this.timings.loadSource = Date.now() - start;\n  }\n\n  /**\n   * Step 2: Lex source code into tokens\n   */\n  lex() {\n    const start = Date.now();\n    const logger = this.log;\n\n    try {\n      const lexer = new Lexer(this.results.source);\n      this.results.tokens = lexer.tokenize();\n\n      if (lexer.getErrors().length > 0) {\n        logger.warn(`Lexer produced ${lexer.getErrors().length} warnings`);\n        lexer.getErrors().forEach((err) => {\n          logger.debug(`Lexer: ${err.message}`);\n        });\n      }\n    } catch (error) {\n      logger.error(`Lexing failed: ${error.message}`);\n      throw new Error(`Lexing failed: ${error.message}`);\n    }\n\n    this.timings.lex = Date.now() - start;\n  }\n\n  /**\n   * Step 3: Parse tokens into AST\n   */\n  parse() {\n    const start = Date.now();\n    const logger = this.log;\n\n    try {\n      const parser = new Parser(this.results.tokens);\n      this.results.ast = parser.parse();\n\n      if (parser.getErrors().length > 0) {\n        logger.warn(`Parser produced ${parser.getErrors().length} errors`);\n        parser.getErrors().forEach((err) => {\n          logger.debug(`Parser: ${err.message}`);\n        });\n\n        if (this.options.strict) {\n          throw new Error(`${parser.getErrors().length} parser errors found`);\n        }\n      }\n    } catch (error) {\n      logger.error(`Parsing failed: ${error.message}`);\n      throw new Error(`Parsing failed: ${error.message}`);\n    }\n\n    this.timings.parse = Date.now() - start;\n  }\n\n  /**\n   * Step 4: Analyze widgets (Phase 1)\n   */\n  analyzeWidgets() {\n    const start = Date.now();\n    const logger = this.log;\n\n    try {\n      const analyzer = new WidgetAnalyzer(this.results.ast);\n      this.results.widgets = analyzer.analyze();\n\n      if (this.results.widgets.errors.length > 0) {\n        logger.warn(`Widget analysis produced ${this.results.widgets.errors.length} errors`);\n        this.results.widgets.errors.forEach((err) => {\n          logger.debug(`Widget: ${err.message}`);\n        });\n      }\n    } catch (error) {\n      logger.error(`Widget analysis failed: ${error.message}`);\n      throw new Error(`Widget analysis failed: ${error.message}`);\n    }\n\n    this.timings.analyzeWidgets = Date.now() - start;\n  }\n\n  /**\n   * Step 6: Analyze state (Phase 2)\n   */\n  analyzeState() {\n    const start = Date.now();\n    const logger = this.log;\n\n    try {\n      const analyzer = new StateAnalyzer(\n        this.results.ast,\n        this.results.widgets.widgets,\n        { strict: this.options.strict }\n      );\n      this.results.state = analyzer.analyze();\n\n      if (this.results.state.errors.length > 0) {\n        logger.warn(`State analysis produced ${this.results.state.errors.length} errors`);\n        this.results.state.errors.forEach((err) => {\n          logger.debug(`State: ${err.message}`);\n        });\n      }\n    } catch (error) {\n      logger.error(`State analysis failed: ${error.message}`);\n      throw new Error(`State analysis failed: ${error.message}`);\n    }\n\n    this.timings.analyzeState = Date.now() - start;\n  }\n\n  /**\n   * Step 7: Analyze context (Phase 3)\n   */\n  analyzeContext() {\n    const start = Date.now();\n    const logger = this.log;\n\n    try {\n      const analyzer = new ContextAnalyzer(\n        this.results.ast,\n        this.results.widgets.widgets,\n        { strict: this.options.strict }\n      );\n      this.results.context = analyzer.analyze();\n\n      if (this.results.context.errors && this.results.context.errors.length > 0) {\n        logger.warn(`Context analysis produced ${this.results.context.errors.length} errors`);\n        this.results.context.errors.forEach((err) => {\n          logger.debug(`Context: ${err.message}`);\n        });\n      }\n    } catch (error) {\n      logger.error(`Context analysis failed: ${error.message}`);\n      throw new Error(`Context analysis failed: ${error.message}`);\n    }\n\n    this.timings.analyzeContext = Date.now() - start;\n  }\n\n  /**\n   * Step 8: Analyze SSR compatibility (Phase 3)\n   */\n  analyzeSsr() {\n    const start = Date.now();\n    const logger = this.log;\n\n    try {\n      const analyzer = new SSRAnalyzer(\n        this.results.context,\n        this.results.state,\n        { strict: this.options.strict }\n      );\n      this.results.ssr = analyzer.analyze();\n\n      if (this.results.ssr.errors && this.results.ssr.errors.length > 0) {\n        logger.warn(`SSR analysis produced ${this.results.ssr.errors.length} errors`);\n        this.results.ssr.errors.forEach((err) => {\n          logger.debug(`SSR: ${err.message}`);\n        });\n      }\n    } catch (error) {\n      logger.error(`SSR analysis failed: ${error.message}`);\n      throw new Error(`SSR analysis failed: ${error.message}`);\n    }\n\n    this.timings.analyzeSsr = Date.now() - start;\n  }\n\n  /**\n   * Step 9: Generate report\n   */\n  generateReport() {\n    const start = Date.now();\n    const logger = this.log;\n\n    try {\n      const generator = new ReportGenerator(\n        this.results.widgets,\n        this.results.state,\n        this.results.context,\n        this.results.ssr,\n        {\n          format: this.options.outputFormat,\n          includeMetrics: this.options.includeMetrics,\n          includeTree: this.options.includeTree,\n          includeValidation: this.options.includeValidation,\n          includeSuggestions: this.options.includeSuggestions,\n          includeContext: this.options.includeContext,\n          includeSsr: this.options.includeSsr,\n          prettyPrint: this.options.prettyPrint,\n        }\n      );\n\n      this.results.report = generator.generate();\n    } catch (error) {\n      logger.error(`Report generation failed: ${error.message}`);\n      throw new Error(`Report generation failed: ${error.message}`);\n    }\n\n    this.timings.generateReport = Date.now() - start;\n  }\n\n  /**\n   * Step 10: Output report (console or file)\n   */\n  output() {\n    const logger = this.log;\n\n    if (this.options.outputFile) {\n      try {\n        fs.writeFileSync(this.options.outputFile, this.results.report, 'utf-8');\n        logger.success(`Report saved to: ${this.options.outputFile}`);\n      } catch (error) {\n        logger.error(`Cannot write to file \"${this.options.outputFile}\"`);\n        throw new Error(`Cannot write to file \"${this.options.outputFile}\": ${error.message}`);\n      }\n    } else {\n      // Only print report to console if not verbose logging\n      if (this.options.outputFormat !== 'console') {\n        console.log(this.results.report);\n      }\n    }\n  }\n\n  /**\n   * Get analysis results - FIXED: Include logger info\n   */\n  /**\n  * FIXED: getResults() method in analyzer.js\n  * Now uses importResolution.parsed instead of widgets.imports\n  */\n\n  getResults() {\n    // Extract widget arrays by type\n    const allWidgets = this.results.widgets?.widgets || [];\n    const statelessWidgets = allWidgets.filter((w) => w.type === 'stateless');\n    const statefulWidgets = allWidgets.filter((w) => w.type === 'stateful');\n    const stateWidgets = allWidgets.filter((w) => w.type === 'state');\n\n    // Extract widget names as arrays\n    const statelessNames = statelessWidgets.map((w) => w.name);\n    const statefulNames = statefulWidgets.map((w) => w.name);\n\n    // Build state classes mapping: StatefulWidget -> State class\n    const stateClasses = {};\n    stateWidgets.forEach((stateWidget) => {\n      // Convention: _MyHomePageState -> MyHomePage\n      const widgetName = stateWidget.name.replace(/^_/, '').replace(/State$/, '');\n      const stateFields = stateWidget.fields || [];\n      stateClasses[stateWidget.name] = stateFields.map((f) => f.name);\n    });\n\n    // Also map by StatefulWidget name if we have linking info\n    statefulWidgets.forEach((statefulWidget) => {\n      const expectedStateName = `_${statefulWidget.name}State`;\n      if (stateClasses[expectedStateName]) {\n        // Create mapping for easy lookup\n        stateClasses[statefulWidget.name] = stateClasses[expectedStateName];\n      }\n    });\n\n    // \u2705 FIXED: Get imports from importResolution.parsed (multi-line support)\n    // This now correctly parses ALL imports (single & multi-line)\n    const parsedImports = this.results.importResolution?.parsed || [];\n\n    // Build imports object: { source: [items] }\n    const importsObj = {};\n    parsedImports.forEach(imp => {\n      importsObj[imp.source] = imp.items;\n    });\n\n    return {\n      source: {\n        length: this.results.source?.length || 0,\n        file: this.options.sourceFile,\n      },\n      tokens: {\n        count: this.results.tokens?.length || 0,\n      },\n      ast: {\n        items: this.results.ast?.body?.length || 0,\n      },\n      // FIXED: Return actual widget names and full widget objects\n      widgets: {\n        // Arrays of widget names for easy access\n        stateless: statelessNames,\n        stateful: statefulNames,\n        count: allWidgets.length,\n\n        // Full widget objects for detailed analysis\n        all: allWidgets,\n\n        // State class mappings\n        stateClasses: stateClasses,\n\n        // Metadata\n        total: {\n          stateless: statelessWidgets.length,\n          stateful: statefulWidgets.length,\n          state: stateWidgets.length,\n        },\n      },\n\n      // \u2705 FIXED: Return ALL imports from source parsing (not just widgets.imports)\n      // Now includes both single-line and multi-line imports\n      imports: this.options.includeImports ? importsObj : null,\n\n      // \u2705 FIXED: Return full import resolution details\n      importResolution: this.options.includeImports ? {\n        parsed: parsedImports,\n        summary: this.results.importResolution?.summary || {\n          total: parsedImports.length,\n          resolved: this.results.importResolution?.summary?.resolved || 0,\n          unresolved: this.results.importResolution?.summary?.unresolved || 0,\n          errors: this.results.importResolution?.summary?.errors || 0,\n          resolutionRate: this.results.importResolution?.summary?.resolutionRate || 'N/A',\n          bySource: this.results.importResolution?.summary?.bySource || {\n            framework: 0,\n            local: 0,\n            cache: 0,\n          },\n        },\n      } : null,\n\n      state: {\n        stateClasses: this.results.state?.stateClasses?.length || 0,\n        stateFields: this.results.state?.stateFields?.length || 0,\n        setStateCalls: this.results.state?.setStateCalls?.length || 0,\n        lifecycleMethods: this.results.state?.lifecycleMethods?.length || 0,\n        eventHandlers: this.results.state?.eventHandlers?.length || 0,\n        validationIssues: this.results.state?.validationResults?.length || 0,\n      },\n\n      context: this.options.includeContext\n        ? {\n          inheritedWidgets: this.results.context?.inheritedWidgets?.length || 0,\n          changeNotifiers: this.results.context?.changeNotifiers?.length || 0,\n          providers: this.results.context?.providers?.length || 0,\n          contextAccessPoints: this.results.context?.contextAccessPoints?.length || 0,\n        }\n        : null,\n\n      ssr: this.options.includeSsr\n        ? {\n          compatibility: this.results.ssr?.overallCompatibility || 'unknown',\n          compatibilityScore: this.results.ssr?.ssrCompatibilityScore || 0,\n          safePatterns: this.results.ssr?.ssrSafePatterns?.length || 0,\n          unsafePatterns: this.results.ssr?.ssrUnsafePatterns?.length || 0,\n          hydrationNeeded: this.results.ssr?.hydrationCount || 0,\n          migrationSteps: this.results.ssr?.ssrMigrationPath?.length || 0,\n          estimatedEffort: this.results.ssr?.estimatedEffort || 'unknown',\n        }\n        : null,\n\n      timings: this.timings,\n      report: this.results.report,\n      logger: this.logger.getReport(),\n      debugFiles: this.logger.readDebugFiles(),\n    };\n  }\n}\n\n// ============================================================================\n// STATIC HELPER METHODS\n// ============================================================================\n\nasync function analyzeCode(sourceCode, options = {}) {\n  const analyzer = new Analyzer({\n    sourceCode,\n    ...options,\n  });\n\n  return analyzer.analyze();\n}\n\nasync function analyzeFile(sourceFile, options = {}) {\n  const analyzer = new Analyzer({\n    sourceFile,\n    ...options,\n  });\n\n  return analyzer.analyze();\n}\n\nasync function analyzeAndSave(sourceFile, outputFile, options = {}) {\n  const analyzer = new Analyzer({\n    sourceFile,\n    outputFile,\n    ...options,\n  });\n\n  return analyzer.analyze();\n}\n\n// ============================================================================\n// CLI INTERFACE\n// ============================================================================\n\nasync function runCLI() {\n  const args = process.argv.slice(2);\n\n  if (args.length === 0) {\n    printUsage();\n    process.exit(0);\n  }\n\n  const sourceFile = args[0];\n  let outputFile = null;\n  let outputFormat = 'json';\n  let verbose = true;\n  let includeImports = true;\n  let includeContext = true;\n  let includeSsr = true;\n  let debugLevel = 'info';\n\n  for (let i = 1; i < args.length; i++) {\n    const arg = args[i];\n\n    if (arg === '-o' || arg === '--output') {\n      outputFile = args[++i];\n    } else if (arg === '-f' || arg === '--format') {\n      outputFormat = args[++i];\n    } else if (arg === '-q' || arg === '--quiet') {\n      verbose = false;\n    } else if (arg === '--debug') {\n      debugLevel = args[++i] || 'debug';\n    } else if (arg === '--no-imports') {\n      includeImports = false;\n    } else if (arg === '--no-context') {\n      includeContext = false;\n    } else if (arg === '--no-ssr') {\n      includeSsr = false;\n    } else if (arg === '--phase1') {\n      includeImports = false;\n      includeContext = false;\n      includeSsr = false;\n    } else if (arg === '-h' || arg === '--help') {\n      printUsage();\n      process.exit(0);\n    }\n  }\n\n  if (!['json', 'markdown', 'console'].includes(outputFormat)) {\n    console.error(`Invalid format: ${outputFormat}`);\n    process.exit(1);\n  }\n\n  try {\n    const analyzer = new Analyzer({\n      sourceFile,\n      outputFile,\n      outputFormat,\n      verbose,\n      includeImports,\n      includeContext,\n      includeSsr,\n      debugLevel,\n    });\n\n    const results = await analyzer.analyze();\n\n    // Show debug info location\n    if (debugLevel !== 'info') {\n      console.log('\\n\uD83D\uDCCA Debug logs saved to: .debug/');\n      console.log('   View with: node debug_viewer.js\\n');\n    }\n\n    process.exit(0);\n  } catch (error) {\n    console.error(`\\n\u274C Error: ${error.message}\\n`);\n    process.exit(1);\n  }\n}\n\nfunction printUsage() {\n  console.log(`\nFlutterJS Analyzer (Phase 1 + Import Resolution + Phase 2 + 3)\n\nUsage:\n  node analyzer.js <source-file> [options]\n\nOptions:\n  -o, --output <file>      Output file (default: print to console)\n  -f, --format <format>    Output format: json, markdown, console (default: json)\n  -q, --quiet              Suppress verbose output\n  --debug <level>          Enable debug logging: trace, debug, info (default: info)\n  --no-imports             Skip import resolution\n  --no-context             Skip Phase 3 context analysis\n  --no-ssr                 Skip Phase 3 SSR analysis\n  --phase1                 Only Phase 1 (widgets + imports)\n  -h, --help               Show this help message\n\nExamples:\n  node analyzer.js test.fjs\n  node analyzer.js test.fjs -o report.json\n  node analyzer.js test.fjs --debug trace\n  node analyzer.js test.fjs -f markdown\n  node analyzer.js test.fjs --phase1\n`);\n}\n\n// ============================================================================\n// EXPORTS\n// ============================================================================\n\nexport {\n  Analyzer,\n  analyzeCode,\n  analyzeFile,\n  analyzeAndSave,\n  runCLI,\n};\n\n// ============================================================================\n// CLI EXECUTION\n// ============================================================================\n\nif (import.meta.url === `file://${process.argv[1]}`) {\n  runCLI();\n}"],
-  "mappings": "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",
-  "names": ["fs", "Lexer", "Parser", "WidgetAnalyzer", "StateAnalyzer", "ContextAnalyzer", "SSRAnalyzer", "ReportGenerator", "ImportResolver", "resolverConfig", "initLogger", "Analyzer", "options", "loggerInstance", "logger", "summary", "error", "start", "parsedImports", "imp", "idx", "resolution", "lexer", "err", "parser", "analyzer", "generator", "allWidgets", "statelessWidgets", "w", "statefulWidgets", "stateWidgets", "statelessNames", "statefulNames", "stateClasses", "stateWidget", "widgetName", "stateFields", "f", "statefulWidget", "expectedStateName", "importsObj", "analyzeCode", "sourceCode", "analyzeFile", "sourceFile", "analyzeAndSave", "outputFile", "runCLI", "args", "printUsage", "outputFormat", "verbose", "includeImports", "includeContext", "includeSsr", "debugLevel", "i", "arg", "results"]
-}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/context_analyzer.js.map b/packages/flutterjs_engine/src/analyzer/dist/context_analyzer.js.map
deleted file mode 100644
index a008853a..00000000
--- a/packages/flutterjs_engine/src/analyzer/dist/context_analyzer.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/context_analyzer.js"],
-  "sourcesContent": ["/**\n * FlutterJS Context Analyzer - Phase 3\n * Detects InheritedWidget, Provider, BuildContext usage patterns\n * Analyzes context flow and SSR compatibility\n * \n * Phase 3 focuses on: Context detection, Provider patterns, SSR analysis\n * Does NOT implement actual context providers (that's Phase 4+)\n */\nimport { getLogger } from './flutterjs_logger.js';\n\nimport {  InheritedWidgetMetadata,\n  ChangeNotifierAnalysis,\n  ProviderAnalysis,\n  ContextUsagePattern, } from  './context_analyzer_data.js';\nclass ContextAnalyzer {\n  constructor(ast, widgets = [], options = {}) {\n    this.ast = ast;\n    this.widgets = widgets;\n     this.logger = getLogger().createComponentLogger('ContextAnalyzer');\n    this.options = {\n      strict: false,\n      ...options,\n    };\n\n    // Results storage\n    this.inheritedWidgets = new Map();     // name -> InheritedWidgetMetadata\n    this.changeNotifiers = new Map();      // name -> ChangeNotifierAnalysis\n    this.providers = new Map();            // type -> ProviderAnalysis\n    this.contextAccessPoints = [];         // All places context is used\n    this.inheritedWidgetGraph = {};        // Inheritance relationships\n    this.providerGraph = {};               // Provider relationships\n    this.errors = [];\n  }\n\n  /**\n   * Main entry point - analyze context patterns\n   */\n  analyze() {\n      this.logger.startSession('ContextAnalysis');\n    this.logger.trace('[ContextAnalyzer] Starting analysis...\\n');\n      this.logger.startSession('WidgetAnalyzer');\n     this.logger.trace('[ContextAnalyzer] Starting analysis...\\n');\n\n    try {\n      // Phase 1: Detect InheritedWidget classes\n      this.detectInheritedWidgets();\n       this.logger.trace(`[ContextAnalyzer] Found ${this.inheritedWidgets.size} InheritedWidgets\\n`);\n\n      // Phase 2: Detect ChangeNotifier classes\n      this.detectChangeNotifiers();\n       this.logger.trace(`[ContextAnalyzer] Found ${this.changeNotifiers.size} ChangeNotifiers\\n`);\n\n      // Phase 3: Detect Provider patterns\n      this.detectProviders();\n       this.logger.trace(`[ContextAnalyzer] Found ${this.providers.size} Providers\\n`);\n\n      // Phase 4: Find context access points\n      this.findContextAccessPoints();\n       this.logger.trace(`[ContextAnalyzer] Found ${this.contextAccessPoints.length} context usage points\\n`);\n\n      // Phase 5: Build graphs\n      this.buildInheritedWidgetGraph();\n      this.buildProviderGraph();\n       this.logger.trace('[ContextAnalyzer] Built dependency graphs\\n');\n\n      return this.getResults();\n    } catch (error) {\n      this.errors.push(error);\n      console.error('[ContextAnalyzer] Error:', error.message);\n      return this.getResults();\n    }\n  }\n\n  /**\n   * Phase 1: Detect InheritedWidget classes\n   * \n   * Looks for:\n   * - class MyProvider extends InheritedWidget\n   * - Properties: data, child\n   * - Methods: of(), updateShouldNotify()\n   */\n  detectInheritedWidgets() {\n    if (!this.ast || !this.ast.body) return;\n\n    this.ast.body.forEach((node) => {\n      if (node.type !== 'ClassDeclaration') return;\n\n      const className = node.id?.name;\n      const superClass = node.superClass?.name;\n\n      // Check if extends InheritedWidget\n      if (!superClass || !superClass.includes('InheritedWidget')) return;\n\n       this.logger.trace(`[ContextAnalyzer.detectInheritedWidgets] Found: ${className}`);\n\n      const metadata = new InheritedWidgetMetadata(\n        className,\n        node.location,\n        superClass\n      );\n\n      // Extract properties\n      if (node.body?.fields) {\n        node.body.fields.forEach((field) => {\n          const fieldName = field.key?.name;\n          metadata.properties.push({\n            name: fieldName,\n            type: this.inferType(field.initialValue),\n            required: !this.hasDefaultValue(field),\n          });\n        });\n      }\n\n      // Extract static accessors (of() method)\n      if (node.body?.methods) {\n        node.body.methods.forEach((method) => {\n          const methodName = method.key?.name;\n\n          // Check for static accessor pattern\n          if (methodName === 'of' && this.isStaticAccessor(method)) {\n            metadata.staticAccessors.push({\n              name: methodName,\n              signature: `static ${methodName}(BuildContext context)`,\n              usesInheritedWidgetLookup: this.checksInheritedWidgetLookup(method),\n              location: method.location,\n            });\n          }\n\n          // Check for updateShouldNotify\n          if (methodName === 'updateShouldNotify') {\n            metadata.updateShouldNotifyImplemented = true;\n          }\n        });\n      }\n\n      this.inheritedWidgets.set(className, metadata);\n    });\n  }\n\n  /**\n   * Check if method is static (phase 3 simplified - assumes 'of' is usually static)\n   */\n  isStaticAccessor(method) {\n    // In a real implementation, check for @static decorator or static keyword\n    return method.key?.name === 'of';\n  }\n\n  /**\n   * Check if method body contains dependOnInheritedWidgetOfExactType call\n   */\n  checksInheritedWidgetLookup(method) {\n    if (!method.body) return false;\n\n    const code = JSON.stringify(method.body);\n    return code.includes('dependOnInheritedWidgetOfExactType') ||\n           code.includes('inheritedWidgetOfExactType');\n  }\n\n  /**\n   * Phase 2: Detect ChangeNotifier classes\n   * \n   * Looks for:\n   * - class MyNotifier extends ChangeNotifier\n   * - Methods that call notifyListeners()\n   * - Properties that get/set\n   */\n  detectChangeNotifiers() {\n    if (!this.ast || !this.ast.body) return;\n\n    this.ast.body.forEach((node) => {\n      if (node.type !== 'ClassDeclaration') return;\n\n      const className = node.id?.name;\n      const superClass = node.superClass?.name;\n\n      // Check if extends ChangeNotifier\n      if (!superClass || superClass !== 'ChangeNotifier') return;\n\n       this.logger.trace(`[ContextAnalyzer.detectChangeNotifiers] Found: ${className}`);\n\n      const analysis = new ChangeNotifierAnalysis(\n        className,\n        node.location\n      );\n\n      // Extract properties\n      if (node.body?.fields) {\n        node.body.fields.forEach((field) => {\n          const fieldName = field.key?.name;\n          analysis.properties.push({\n            name: fieldName,\n            type: this.inferType(field.initialValue),\n            initialValue: this.expressionToString(field.initialValue),\n          });\n        });\n      }\n\n      // Extract getters, methods, and notifyListeners calls\n      if (node.body?.methods) {\n        node.body.methods.forEach((method) => {\n          const methodName = method.key?.name;\n\n          // Check for getter pattern (get count => _count)\n          if (methodName && !method.params?.length && method.body) {\n            const isGetter = JSON.stringify(method).includes('return');\n            if (isGetter) {\n              analysis.getters.push({\n                name: methodName,\n                returnType: this.inferReturnType(method.body),\n                location: method.location,\n              });\n            }\n          }\n\n          // Check for notifyListeners call\n          const callsNotify = this.callsNotifyListeners(method.body);\n          if (callsNotify || methodName === 'increment' || methodName === 'decrement') {\n            const mutations = this.extractMutationsInMethod(method.body);\n            analysis.methods.push({\n              name: methodName,\n              callsNotifyListeners: callsNotify,\n              location: method.location,\n              mutations: mutations,\n            });\n          }\n        });\n      }\n\n      this.changeNotifiers.set(className, analysis);\n    });\n  }\n\n  /**\n   * Check if method calls notifyListeners()\n   */\n  callsNotifyListeners(body) {\n    if (!body) return false;\n    const code = JSON.stringify(body);\n    return code.includes('notifyListeners');\n  }\n\n  /**\n   * Extract field mutations in method (this._field = x, this._field++, etc.)\n   */\n  extractMutationsInMethod(body) {\n    const mutations = [];\n    if (!body) return mutations;\n\n    const code = JSON.stringify(body);\n    \n    // Simple pattern matching for mutations\n    const patterns = [\n      /this\\._(\\w+)\\s*[=+\\-*]/g,  // this._field = or +=, -=, etc.\n      /this\\.(\\w+)\\s*[=+\\-*]/g,   // this.field = or +=, -=, etc.\n    ];\n\n    patterns.forEach((pattern) => {\n      let match;\n      while ((match = pattern.exec(code)) !== null) {\n        mutations.push(match[1]);\n      }\n    });\n\n    return [...new Set(mutations)]; // Remove duplicates\n  }\n\n  /**\n   * Phase 3: Detect Provider<T> patterns\n   * \n   * Looks for:\n   * - Provider<CounterNotifier>(create: ..., child: ...)\n   * - Detects consumer patterns: context.watch(), context.read()\n   */\n  detectProviders() {\n    if (!this.ast || !this.ast.body) return;\n\n    this.ast.body.forEach((node) => {\n      if (node.type === 'ClassDeclaration') {\n        // Check if class contains Provider creation in build()\n        const buildMethod = node.body?.methods?.find((m) => m.key?.name === 'build');\n        if (buildMethod) {\n          this.findProvidersInMethod(buildMethod, node);\n        }\n      }\n\n      // Also check in function bodies\n      if (node.type === 'FunctionDeclaration') {\n        this.findProvidersInMethod(node, null);\n      }\n    });\n  }\n\n  /**\n   * Find Provider instantiations in a method\n   */\n  findProvidersInMethod(method, classNode) {\n    if (!method.body) return;\n\n    const body = method.body.type === 'BlockStatement' ? method.body.body : [method.body];\n\n    body.forEach((stmt) => {\n      this.findProvidersInStatement(stmt);\n    });\n  }\n\n  /**\n   * Recursively find Provider patterns in statements\n   */\n  findProvidersInStatement(stmt) {\n    if (!stmt) return;\n\n    if (stmt.type === 'ExpressionStatement' && stmt.expression) {\n      this.findProvidersInExpression(stmt.expression);\n    }\n\n    if (stmt.type === 'ReturnStatement' && stmt.argument) {\n      this.findProvidersInExpression(stmt.argument);\n    }\n\n    if (stmt.type === 'BlockStatement' && stmt.body) {\n      stmt.body.forEach((s) => this.findProvidersInStatement(s));\n    }\n  }\n\n  /**\n   * Find Provider patterns in expressions\n   * Looks for: new Provider<CounterNotifier>(...)\n   */\n  findProvidersInExpression(expr) {\n    if (!expr) return;\n\n    // Check for NewExpression: new Provider<T>(...)\n    if (expr.type === 'NewExpression') {\n      const calleeName = expr.callee?.name;\n\n      if (calleeName === 'Provider' || calleeName?.startsWith('Provider')) {\n        // Extract generic type: Provider<CounterNotifier>\n        const genericType = this.extractGenericType(expr);\n\n        if (genericType) {\n           this.logger.trace(`[ContextAnalyzer.detectProviders] Found Provider<${genericType}>`);\n\n          const analysis = new ProviderAnalysis(\n            `Provider<${genericType}>`,\n            expr.location,\n            genericType\n          );\n\n          // Extract create function\n          if (expr.args) {\n            expr.args.forEach((arg) => {\n              if (arg.type === 'ObjectLiteral') {\n                arg.properties?.forEach((prop) => {\n                  if (prop.key?.name === 'create') {\n                    analysis.createFunction = this.expressionToString(prop.value);\n                  }\n                  if (prop.key?.name === 'child') {\n                    // Child widget - may use this provider\n                  }\n                });\n              }\n            });\n          }\n\n          // Identify access patterns (watch, read, select)\n          this.identifyAccessPatterns(genericType, analysis);\n\n          this.providers.set(`Provider<${genericType}>`, analysis);\n        }\n      }\n    }\n\n    // Check call expressions\n    if (expr.type === 'CallExpression' && expr.args) {\n      expr.args.forEach((arg) => {\n        this.findProvidersInExpression(arg);\n      });\n    }\n\n    // Check object literals\n    if (expr.type === 'ObjectLiteral' && expr.properties) {\n      expr.properties.forEach((prop) => {\n        this.findProvidersInExpression(prop.value);\n      });\n    }\n  }\n\n  /**\n   * Extract generic type from Provider<T>\n   * In simplified version, returns T or null\n   */\n  extractGenericType(expr) {\n    // In real implementation, parse the full generic syntax\n    // For now, look for the callee name pattern\n    const code = JSON.stringify(expr.callee);\n\n    // Simple heuristic: if it mentions Provider and contains type info\n    if (code.includes('Provider')) {\n      // Try to find type in expression string representation\n      const exprStr = this.expressionToString(expr.callee);\n      const match = exprStr.match(/Provider<(\\w+)>/);\n      return match ? match[1] : null;\n    }\n\n    return null;\n  }\n\n  /**\n   * Identify how this provider is consumed\n   */\n  identifyAccessPatterns(providerType, analysis) {\n    if (!this.ast || !this.ast.body) return;\n\n    // Search for context.watch(), context.read(), context.select()\n    this.ast.body.forEach((node) => {\n      if (node.type === 'ClassDeclaration') {\n        const buildMethod = node.body?.methods?.find((m) => m.key?.name === 'build');\n        if (buildMethod) {\n          this.scanForAccessPatterns(buildMethod, providerType, analysis);\n        }\n      }\n    });\n  }\n\n  /**\n   * Scan method for watch/read/select patterns\n   */\n  scanForAccessPatterns(method, providerType, analysis) {\n    if (!method.body) return;\n\n    const code = JSON.stringify(method.body);\n\n    // Check for access patterns\n    if (code.includes('context.watch')) {\n      analysis.accessPatterns.push('watch');\n    }\n    if (code.includes('context.read')) {\n      analysis.accessPatterns.push('read');\n    }\n    if (code.includes('context.select')) {\n      analysis.accessPatterns.push('select');\n    }\n\n    // Find consumer widgets\n    if (code.includes('Consumer')) {\n      analysis.accessPatterns.push('Consumer');\n    }\n  }\n\n  /**\n   * Phase 4: Find all context access points\n   * \n   * Maps:\n   * - Which widgets use context\n   * - How they access it (context.theme(), context.mediaQuery(), etc.)\n   * - SSR compatibility\n   */\n  findContextAccessPoints() {\n    if (!this.ast || !this.ast.body) return;\n\n    this.ast.body.forEach((node) => {\n      if (node.type !== 'ClassDeclaration') return;\n\n      const className = node.id?.name;\n      const buildMethod = node.body?.methods?.find((m) => m.key?.name === 'build');\n\n      if (buildMethod) {\n        const usagePoints = this.extractContextUsageInMethod(buildMethod, className);\n        this.contextAccessPoints.push(...usagePoints);\n      }\n    });\n  }\n\n  /**\n   * Extract all context.X() calls in a method\n   */\n  extractContextUsageInMethod(method, className) {\n    const usages = [];\n\n    if (!method.body) return usages;\n\n    const stmts = method.body.type === 'BlockStatement' ? method.body.body : [method.body];\n\n    stmts.forEach((stmt) => {\n      const foundUsages = this.findContextUsageInStatement(stmt, className);\n      usages.push(...foundUsages);\n    });\n\n    return usages;\n  }\n\n  /**\n   * Recursively find context usage patterns\n   */\n  findContextUsageInStatement(stmt, className) {\n    const usages = [];\n\n    if (!stmt) return usages;\n\n    if (stmt.type === 'ExpressionStatement' && stmt.expression) {\n      const stmtUsages = this.findContextUsageInExpression(stmt.expression, className);\n      usages.push(...stmtUsages);\n    }\n\n    if (stmt.type === 'ReturnStatement' && stmt.argument) {\n      const retUsages = this.findContextUsageInExpression(stmt.argument, className);\n      usages.push(...retUsages);\n    }\n\n    if (stmt.type === 'BlockStatement' && stmt.body) {\n      stmt.body.forEach((s) => {\n        const blockUsages = this.findContextUsageInStatement(s, className);\n        usages.push(...blockUsages);\n      });\n    }\n\n    return usages;\n  }\n\n  /**\n   * Find context usage in expressions\n   * Looks for: Theme.of(context), context.watch(), context.read(), etc.\n   */\n  findContextUsageInExpression(expr, className) {\n    const usages = [];\n\n    if (!expr) return usages;\n\n    const exprStr = JSON.stringify(expr);\n\n    // Pattern 1: Theme.of(context)\n    if (exprStr.includes('Theme.of') && exprStr.includes('context')) {\n      usages.push(new ContextUsagePattern(\n        'Theme.of(context)',\n        'inherited-widget-lookup',\n        expr.location,\n        'ThemeData',\n        true,\n        'Pure value access, no subscription required'\n      ));\n    }\n\n    // Pattern 2: context.theme()\n    if (exprStr.includes('context.theme')) {\n      usages.push(new ContextUsagePattern(\n        'context.theme()',\n        'context-service',\n        expr.location,\n        'ThemeData',\n        true,\n        'Service access during build'\n      ));\n    }\n\n    // Pattern 3: context.watch<T>()\n    if (exprStr.includes('context.watch')) {\n      usages.push(new ContextUsagePattern(\n        'context.watch<T>()',\n        'provider-watch',\n        expr.location,\n        'T',\n        false,\n        'Requires reactive subscription - not SSR safe'\n      ));\n    }\n\n    // Pattern 4: context.read<T>()\n    if (exprStr.includes('context.read')) {\n      usages.push(new ContextUsagePattern(\n        'context.read<T>()',\n        'provider-read',\n        expr.location,\n        'T',\n        true,\n        'Single read at render time - SSR safe'\n      ));\n    }\n\n    // Pattern 5: context.mediaQuery()\n    if (exprStr.includes('context.mediaQuery') || exprStr.includes('MediaQuery.of')) {\n      usages.push(new ContextUsagePattern(\n        'context.mediaQuery()',\n        'context-service',\n        expr.location,\n        'MediaQueryData',\n        true,\n        'Read-only responsive info'\n      ));\n    }\n\n    // Pattern 6: State mutations in handlers\n    if (exprStr.includes('notifyListeners') || exprStr.includes('increment')) {\n      usages.push(new ContextUsagePattern(\n        'notifyListeners()',\n        'global-state-mutation',\n        expr.location,\n        'void',\n        false,\n        'Mutations do not trigger re-render in SSR'\n      ));\n    }\n\n    // Recursively search nested expressions\n    if (expr.type === 'CallExpression' && expr.args) {\n      expr.args.forEach((arg) => {\n        const argUsages = this.findContextUsageInExpression(arg, className);\n        usages.push(...argUsages);\n      });\n    }\n\n    if (expr.type === 'ObjectLiteral' && expr.properties) {\n      expr.properties.forEach((prop) => {\n        const propUsages = this.findContextUsageInExpression(prop.value, className);\n        usages.push(...propUsages);\n      });\n    }\n\n    if (expr.type === 'MemberExpression') {\n      const memberUsages = this.findContextUsageInExpression(expr.object, className);\n      usages.push(...memberUsages);\n    }\n\n    return usages;\n  }\n\n  /**\n   * Phase 5a: Build InheritedWidget graph\n   * Maps provider -> consumer relationships\n   */\n  buildInheritedWidgetGraph() {\n    this.inheritedWidgets.forEach((widget) => {\n      this.inheritedWidgetGraph[widget.name] = {\n        providedBy: this.findWhoProvides(widget.name),\n        consumedBy: this.findWhoConsumes(widget.name),\n        providedValue: widget.properties[0]?.type || 'unknown',\n        flowPath: this.traceContextFlow(widget.name),\n      };\n    });\n  }\n\n  /**\n   * Phase 5b: Build Provider graph\n   * Maps provider -> consumer relationships\n   */\n  buildProviderGraph() {\n    this.providers.forEach((provider) => {\n      const key = provider.providerType;\n      this.providerGraph[key] = {\n        providedBy: this.findWhoCreatesProvider(provider.providerType),\n        providedType: provider.valueType,\n        consumedBy: this.findWhoConsumesProvider(provider.providerType),\n        accessPatterns: provider.accessPatterns,\n        flowPath: this.traceProviderFlow(provider.providerType),\n      };\n    });\n  }\n\n  /**\n   * Find which widget provides this inherited widget\n   */\n  findWhoProvides(widgetName) {\n    // Simplified: return widget name of class that instantiates it\n    // In real implementation, search AST for instantiation\n    return 'MyApp';\n  }\n\n  /**\n   * Find which widgets consume this inherited widget\n   */\n  findWhoConsumes(widgetName) {\n    const consumers = [];\n    // Search for calls to widgetName.of()\n    this.contextAccessPoints.forEach((usage) => {\n      if (usage.pattern.includes(widgetName)) {\n        consumers.push(usage.dependent);\n      }\n    });\n    return consumers;\n  }\n\n  /**\n   * Find where this inherited widget's context flows\n   */\n  traceContextFlow(widgetName) {\n    // Simplified path tracing\n    return `${this.findWhoProvides(widgetName)} -> ${widgetName} -> ${this.findWhoConsumes(widgetName).join(', ')}`;\n  }\n\n  /**\n   * Find who creates this provider\n   */\n  findWhoCreatesProvider(providerType) {\n    // Simplified: return app root\n    return 'MyApp';\n  }\n\n  /**\n   * Find who consumes this provider\n   */\n  findWhoConsumesProvider(providerType) {\n    const consumers = [];\n    this.contextAccessPoints.forEach((usage) => {\n      if (usage.pattern.includes('watch') || usage.pattern.includes('read')) {\n        consumers.push(usage.dependent);\n      }\n    });\n    return consumers;\n  }\n\n  /**\n   * Find provider flow path through widget tree\n   */\n  traceProviderFlow(providerType) {\n    return `MyApp -> Provider -> MaterialApp -> [consumers]`;\n  }\n\n  /**\n   * Helper: Infer type from expression\n   */\n  inferType(expr) {\n    if (!expr) return 'any';\n    if (expr.type === 'Literal') {\n      const val = expr.value;\n      if (typeof val === 'string') return 'string';\n      if (typeof val === 'number') return 'number';\n      if (typeof val === 'boolean') return 'boolean';\n    }\n    return 'any';\n  }\n\n  /**\n   * Helper: Infer return type from method body\n   */\n  inferReturnType(body) {\n    // Simplified\n    return 'any';\n  }\n\n  /**\n   * Helper: Check if field has default value\n   */\n  hasDefaultValue(field) {\n    return field.initialValue !== null && field.initialValue !== undefined;\n  }\n\n  /**\n   * Helper: Convert expression to string\n   */\n  expressionToString(expr) {\n    if (!expr) return 'null';\n    if (expr.type === 'Identifier') return expr.name;\n    if (expr.type === 'Literal') return String(expr.value);\n    return JSON.stringify(expr).substring(0, 50);\n  }\n\n  /**\n   * Get analysis results\n   */\n  getResults() {\n    return {\n      inheritedWidgets: Array.from(this.inheritedWidgets.values()),\n      changeNotifiers: Array.from(this.changeNotifiers.values()),\n      providers: Array.from(this.providers.values()),\n      contextAccessPoints: this.contextAccessPoints,\n      inheritedWidgetGraph: this.inheritedWidgetGraph,\n      providerGraph: this.providerGraph,\n      errors: this.errors,\n    };\n  }\n}\n\nexport { ContextAnalyzer };\n"],
-  "mappings": "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",
-  "names": ["getLogger", "InheritedWidgetMetadata", "ChangeNotifierAnalysis", "ProviderAnalysis", "ContextUsagePattern", "ContextAnalyzer", "ast", "widgets", "options", "error", "node", "className", "superClass", "metadata", "field", "fieldName", "method", "methodName", "code", "analysis", "callsNotify", "mutations", "body", "pattern", "match", "buildMethod", "m", "classNode", "stmt", "s", "expr", "calleeName", "genericType", "arg", "prop", "providerType", "usagePoints", "usages", "foundUsages", "stmtUsages", "retUsages", "blockUsages", "exprStr", "argUsages", "propUsages", "memberUsages", "widget", "provider", "key", "widgetName", "consumers", "usage", "val"]
-}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/context_analyzer_data.js.map b/packages/flutterjs_engine/src/analyzer/dist/context_analyzer_data.js.map
deleted file mode 100644
index 7b9cc42c..00000000
--- a/packages/flutterjs_engine/src/analyzer/dist/context_analyzer_data.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/context_analyzer_data.js"],
-  "sourcesContent": ["/**\n * FlutterJS Context Analyzer - Data Classes\n * Phase 3 Implementation\n * \n * Represents context-related concepts:\n * - InheritedWidget classes and their properties\n * - ChangeNotifier implementations\n * - Provider patterns\n * - Context usage and dependencies\n * - SSR compatibility information\n */\n\n// ============================================================================\n// INHERITED WIDGET METADATA\n// ============================================================================\n\n/**\n * Metadata about an InheritedWidget class\n * \n * Represents:\n * class ThemeProvider extends InheritedWidget {\n *   final ThemeData theme;\n *   final Widget child;\n *   \n *   static ThemeData of(BuildContext context) {\n *     return context.dependOnInheritedWidgetOfExactType<ThemeProvider>()?.theme;\n *   }\n *   \n *   @override\n *   bool updateShouldNotify(ThemeProvider oldWidget) {\n *     return theme != oldWidget.theme;\n *   }\n * }\n */\nclass InheritedWidgetMetadata {\n  constructor(name, location, superClass = 'InheritedWidget') {\n    // Identity\n    this.name = name;\n    this.location = location;\n    this.superClass = superClass;\n\n    // Structure\n    this.properties = [];            // Required/provided properties\n    this.staticAccessors = [];       // of() methods, from() factory methods\n    this.methods = [];               // Other methods\n\n    // Implementation details\n    this.updateShouldNotifyImplemented = false;\n    this.hasChildProperty = false;\n\n    // Usage tracking\n    this.usageCount = 0;\n    this.usedIn = [];               // Widget names that use this provider\n    this.providedByWidgets = [];    // Widget names that instantiate this\n  }\n\n  /**\n   * Add a property to this inherited widget\n   * Example: theme (ThemeData), child (Widget)\n   */\n  addProperty(name, type, required = false) {\n    this.properties.push({\n      name,\n      type,\n      required,\n      description: null,\n    });\n\n    if (name === 'child') {\n      this.hasChildProperty = true;\n    }\n  }\n\n  /**\n   * Add a static accessor method\n   * Example: static ThemeData of(BuildContext context)\n   */\n  addStaticAccessor(name, signature, location, usesInheritedWidgetLookup = true) {\n    this.staticAccessors.push({\n      name,\n      signature,\n      usesInheritedWidgetLookup,\n      location,\n    });\n  }\n\n  /**\n   * Record that a widget uses this provider\n   */\n  recordUsage(widgetName) {\n    if (!this.usedIn.includes(widgetName)) {\n      this.usedIn.push(widgetName);\n      this.usageCount++;\n    }\n  }\n\n  /**\n   * Record that a widget provides (instantiates) this provider\n   */\n  recordProvider(widgetName) {\n    if (!this.providedByWidgets.includes(widgetName)) {\n      this.providedByWidgets.push(widgetName);\n    }\n  }\n\n  /**\n   * Validate the InheritedWidget pattern\n   */\n  validate() {\n    const issues = [];\n\n    // Should have child property\n    if (!this.hasChildProperty) {\n      issues.push({\n        type: 'missing-child-property',\n        severity: 'warning',\n        message: `InheritedWidget \"${this.name}\" should have a 'child' property`,\n      });\n    }\n\n    // Should have static of() accessor\n    if (this.staticAccessors.length === 0) {\n      issues.push({\n        type: 'missing-static-accessor',\n        severity: 'warning',\n        message: `InheritedWidget \"${this.name}\" should have a static of() method`,\n      });\n    }\n\n    // Should implement updateShouldNotify\n    if (!this.updateShouldNotifyImplemented) {\n      issues.push({\n        type: 'missing-update-notification',\n        severity: 'error',\n        message: `InheritedWidget \"${this.name}\" must implement updateShouldNotify()`,\n      });\n    }\n\n    return issues;\n  }\n\n  /**\n   * Get summary of this InheritedWidget\n   */\n  summary() {\n    return {\n      name: this.name,\n      superClass: this.superClass,\n      properties: this.properties.length,\n      staticAccessors: this.staticAccessors.length,\n      usageCount: this.usageCount,\n      usedIn: this.usedIn,\n      providedBy: this.providedByWidgets,\n      isValid: this.updateShouldNotifyImplemented,\n    };\n  }\n}\n\n// ============================================================================\n// CHANGE NOTIFIER ANALYSIS\n// ============================================================================\n\n/**\n * Analysis of a ChangeNotifier class\n * \n * Represents:\n * class CounterNotifier extends ChangeNotifier {\n *   int _count = 0;\n *   \n *   int get count => _count;\n *   \n *   void increment() {\n *     _count++;\n *     notifyListeners();\n *   }\n * }\n */\nclass ChangeNotifierAnalysis {\n  constructor(name, location) {\n    // Identity\n    this.name = name;\n    this.location = location;\n    this.type = 'ChangeNotifier';\n\n    // Structure\n    this.properties = [];            // _count, _isLoading, etc.\n    this.getters = [];               // get count => _count\n    this.methods = [];               // increment(), decrement(), etc.\n    this.setters = [];               // set property(value) => ...\n\n    // Usage tracking\n    this.isUsedWithProvider = false; // Is this used with Provider<T>?\n    this.providedType = null;        // The Provider<CounterNotifier> type\n    this.consumers = [];             // Widgets that consume this notifier\n    this.subscriptions = [];         // Where it's subscribed to\n  }\n\n  /**\n   * Add a property to this notifier\n   */\n  addProperty(name, type, initialValue = null) {\n    this.properties.push({\n      name,\n      type,\n      initialValue,\n      mutable: true,\n    });\n  }\n\n  /**\n   * Add a getter method\n   * Example: get count => _count\n   */\n  addGetter(name, returnType, location) {\n    this.getters.push({\n      name,\n      returnType,\n      location,\n      isComputed: false,\n    });\n  }\n\n  /**\n   * Add a method that mutates state\n   */\n  addMethod(name, location, callsNotify = false, mutations = []) {\n    this.methods.push({\n      name,\n      location,\n      callsNotifyListeners: callsNotify,\n      mutatesFields: mutations,\n      isAsync: false,\n      parameters: [],\n    });\n  }\n\n  /**\n   * Record that a widget consumes this notifier\n   */\n  recordConsumer(widgetName, accessPattern = 'watch') {\n    if (!this.consumers.includes(widgetName)) {\n      this.consumers.push(widgetName);\n    }\n\n    this.subscriptions.push({\n      consumer: widgetName,\n      accessPattern,  // 'watch', 'read', 'select'\n      timestamp: new Date(),\n    });\n  }\n\n  /**\n   * Check if this notifier is properly implemented\n   */\n  validate() {\n    const issues = [];\n\n    // Should have at least one method that calls notifyListeners\n    const hasNotifyCall = this.methods.some((m) => m.callsNotifyListeners);\n    if (!hasNotifyCall && this.methods.length > 0) {\n      issues.push({\n        type: 'missing-notify-listeners',\n        severity: 'warning',\n        message: `ChangeNotifier \"${this.name}\" has methods but none call notifyListeners()`,\n      });\n    }\n\n    // Methods that mutate should call notifyListeners\n    this.methods.forEach((method) => {\n      if (method.mutatesFields.length > 0 && !method.callsNotifyListeners) {\n        issues.push({\n          type: 'mutation-without-notification',\n          severity: 'warning',\n          message: `Method \"${method.name}\" mutates state but doesn't call notifyListeners()`,\n        });\n      }\n    });\n\n    // Should have getters for public access\n    if (this.properties.length > 0 && this.getters.length === 0) {\n      issues.push({\n        type: 'missing-getters',\n        severity: 'info',\n        message: `ChangeNotifier \"${this.name}\" has properties but no getters. Consider adding getters for encapsulation.`,\n      });\n    }\n\n    return issues;\n  }\n\n  /**\n   * Get summary\n   */\n  summary() {\n    return {\n      name: this.name,\n      properties: this.properties.length,\n      getters: this.getters.length,\n      methods: this.methods.length,\n      consumers: this.consumers.length,\n      consumedBy: this.consumers,\n      isValid: this.methods.some((m) => m.callsNotifyListeners),\n    };\n  }\n}\n\n// ============================================================================\n// PROVIDER ANALYSIS\n// ============================================================================\n\n/**\n * Analysis of a Provider<T> pattern\n * \n * Represents:\n * Provider<CounterNotifier>(\n *   create: (context) => CounterNotifier(),\n *   child: MaterialApp(...)\n * )\n */\nclass ProviderAnalysis {\n  constructor(providerType, location, valueType) {\n    // Identity\n    this.providerType = providerType;           // 'Provider<CounterNotifier>'\n    this.location = location;\n    this.valueType = valueType;                 // 'CounterNotifier'\n\n    // Configuration\n    this.createFunction = null;                 // (context) => CounterNotifier()\n    this.lazy = true;                           // Is it lazy-initialized?\n    this.dispose = null;                        // Cleanup function\n    this.child = null;                          // Child widget\n\n    // Usage tracking\n    this.consumers = [];                        // Widgets that consume\n    this.accessPatterns = [];                   // 'watch', 'read', 'select'\n    this.flowPath = null;                       // Provider \u2192 ... \u2192 Consumer\n  }\n\n  /**\n   * Set the create function\n   */\n  setCreateFunction(func) {\n    this.createFunction = func;\n  }\n\n  /**\n   * Set the dispose function\n   */\n  setDispose(func) {\n    this.dispose = func;\n  }\n\n  /**\n   * Record a consumer widget\n   */\n  addConsumer(widgetName) {\n    if (!this.consumers.includes(widgetName)) {\n      this.consumers.push(widgetName);\n    }\n  }\n\n  /**\n   * Record an access pattern\n   */\n  addAccessPattern(pattern) {\n    // pattern: 'watch', 'read', 'select'\n    if (!this.accessPatterns.includes(pattern)) {\n      this.accessPatterns.push(pattern);\n    }\n  }\n\n  /**\n   * Validate the provider configuration\n   */\n  validate() {\n    const issues = [];\n\n    // Should have a create function\n    if (!this.createFunction) {\n      issues.push({\n        type: 'missing-create',\n        severity: 'error',\n        message: `Provider<${this.valueType}> must have a create function`,\n      });\n    }\n\n    // Should have at least one consumer\n    if (this.consumers.length === 0) {\n      issues.push({\n        type: 'unused-provider',\n        severity: 'info',\n        message: `Provider<${this.valueType}> is defined but not consumed by any widget`,\n      });\n    }\n\n    // Check for access pattern consistency\n    if (this.accessPatterns.includes('watch') && !this.accessPatterns.includes('read')) {\n      // watch should probably have read as fallback\n      issues.push({\n        type: 'watch-without-read',\n        severity: 'info',\n        message: `Provider uses context.watch() but not context.read(). Consider both patterns.`,\n      });\n    }\n\n    return issues;\n  }\n\n  /**\n   * Get summary\n   */\n  summary() {\n    return {\n      type: this.providerType,\n      valueType: this.valueType,\n      consumers: this.consumers.length,\n      consumedBy: this.consumers,\n      accessPatterns: this.accessPatterns,\n      hasCreateFunction: !!this.createFunction,\n      hasDisposeFunction: !!this.dispose,\n    };\n  }\n}\n\n// ============================================================================\n// CONTEXT DEPENDENCY\n// ============================================================================\n\n/**\n * Represents a widget and its context dependencies\n */\nclass ContextDependency {\n  constructor(dependent, method = 'build') {\n    this.dependent = dependent;                 // Widget name\n    this.method = method;                       // 'build', 'initState', etc.\n    this.contextUsage = [];                     // Array of ContextUsagePattern\n    this.location = null;\n  }\n\n  /**\n   * Add a context usage pattern\n   */\n  addUsage(pattern) {\n    if (pattern instanceof ContextUsagePattern) {\n      this.contextUsage.push(pattern);\n    }\n  }\n\n  /**\n   * Get all SSR-safe usages\n   */\n  getSsrSafeUsages() {\n    return this.contextUsage.filter((u) => u.ssrSafe);\n  }\n\n  /**\n   * Get all SSR-unsafe usages\n   */\n  getSsrUnsafeUsages() {\n    return this.contextUsage.filter((u) => !u.ssrSafe);\n  }\n\n  /**\n   * Check if widget can be rendered on server\n   */\n  isSsrCompatible() {\n    return this.getSsrUnsafeUsages().length === 0;\n  }\n\n  /**\n   * Get summary\n   */\n  summary() {\n    return {\n      dependent: this.dependent,\n      method: this.method,\n      totalUsages: this.contextUsage.length,\n      ssrSafeUsages: this.getSsrSafeUsages().length,\n      ssrUnsafeUsages: this.getSsrUnsafeUsages().length,\n      isSsrCompatible: this.isSsrCompatible(),\n      usagePatterns: this.contextUsage.map((u) => u.pattern),\n    };\n  }\n}\n\n// ============================================================================\n// CONTEXT USAGE PATTERN\n// ============================================================================\n\n/**\n * Represents a single context usage pattern in code\n * \n * Examples:\n * - Theme.of(context)\n * - context.watch<CounterNotifier>()\n * - context.read<CounterNotifier>()\n * - context.mediaQuery()\n */\nclass ContextUsagePattern {\n  constructor(pattern, type, location, returns = 'T', ssrSafe = true, reason = '') {\n    // Pattern identification\n    this.pattern = pattern;                     // 'Theme.of(context)', 'context.watch<T>()'\n    this.type = type;                           // 'inherited-widget-lookup', 'provider-watch', etc.\n    this.location = location;                   // { line, column }\n\n    // What it returns\n    this.returns = returns;                     // Return type\n\n    // SSR compatibility\n    this.ssrSafe = ssrSafe;\n    this.reason = reason;                       // Why safe/unsafe for SSR\n\n    // Metadata\n    this.depth = 0;                             // Nesting depth in widget tree\n    this.frequency = 1;                         // How often called\n  }\n\n  /**\n   * Explain why this pattern is or isn't SSR safe\n   */\n  explain() {\n    if (this.ssrSafe) {\n      return `\u2713 SSR Safe: ${this.reason}`;\n    } else {\n      return `\u2717 SSR Unsafe: ${this.reason}`;\n    }\n  }\n\n  /**\n   * Get migration advice for SSR\n   */\n  getMigrationAdvice() {\n    if (this.ssrSafe) return null;\n\n    const advice = {\n      'provider-watch': 'Replace with context.read() for initial SSR render, use watch() in didChangeDependencies() on client',\n      'global-state-mutation': 'Move mutations to client-only code, wrap in if (!kIsWeb) or similar server check',\n      'event-handler': 'Event handlers don\\'t exist during SSR, only attach after hydration on client',\n    };\n\n    return advice[this.type] || null;\n  }\n\n  /**\n   * Get summary\n   */\n  summary() {\n    return {\n      pattern: this.pattern,\n      type: this.type,\n      returns: this.returns,\n      ssrSafe: this.ssrSafe,\n      reason: this.reason,\n      advice: this.getMigrationAdvice(),\n    };\n  }\n}\n\n// ============================================================================\n// HYDRATION REQUIREMENT\n// ============================================================================\n\n/**\n * Represents something that needs to be re-initialized on the client\n * after server-side rendering\n */\nclass HydrationRequirement {\n  constructor(dependency, reason, order = 0) {\n    this.dependency = dependency;               // What needs hydration (e.g., 'CounterNotifier')\n    this.reason = reason;                       // Why it needs hydration\n    this.order = order;                         // Execution order (lower = earlier)\n    this.requiredProviders = [];                // Providers needed before this hydrates\n    this.requiredState = [];                    // State needed for this to work\n  }\n\n  /**\n   * Add a required provider\n   */\n  requiresProvider(providerType) {\n    if (!this.requiredProviders.includes(providerType)) {\n      this.requiredProviders.push(providerType);\n    }\n  }\n\n  /**\n   * Add required state\n   */\n  requiresState(stateProperty) {\n    if (!this.requiredState.includes(stateProperty)) {\n      this.requiredState.push(stateProperty);\n    }\n  }\n\n  /**\n   * Get summary\n   */\n  summary() {\n    return {\n      dependency: this.dependency,\n      reason: this.reason,\n      order: this.order,\n      requiredProviders: this.requiredProviders,\n      requiredState: this.requiredState,\n    };\n  }\n}\n\n// ============================================================================\n// LAZY LOADING OPPORTUNITY\n// ============================================================================\n\n/**\n * Represents a widget or notifier that could be lazy-loaded\n */\nclass LazyLoadOpportunity {\n  constructor(target, reason, estimatedSize = 'unknown', type = 'widget') {\n    this.target = target;                       // Widget or ChangeNotifier name\n    this.reason = reason;                       // Why lazy load it\n    this.estimatedSize = estimatedSize;         // Bundle size if lazy loaded\n    this.type = type;                           // 'widget' or 'notifier'\n    this.recommendation = null;                 // How to lazy load\n    this.priority = 'medium';                   // 'high', 'medium', 'low'\n  }\n\n  /**\n   * Set the recommendation\n   */\n  setRecommendation(recommendation) {\n    this.recommendation = recommendation;\n  }\n\n  /**\n   * Set priority based on size\n   */\n  calculatePriority(sizeKb) {\n    if (sizeKb > 50) {\n      this.priority = 'high';\n    } else if (sizeKb > 20) {\n      this.priority = 'medium';\n    } else {\n      this.priority = 'low';\n    }\n  }\n\n  /**\n   * Get summary\n   */\n  summary() {\n    return {\n      target: this.target,\n      type: this.type,\n      reason: this.reason,\n      estimatedSize: this.estimatedSize,\n      priority: this.priority,\n      recommendation: this.recommendation,\n    };\n  }\n}\n\n// ============================================================================\n// CONTEXT REQUIREMENTS SUMMARY\n// ============================================================================\n\n/**\n * Summary of all context requirements for the app\n */\nclass ContextRequirementsSummary {\n  constructor() {\n    this.requiresThemeProvider = false;\n    this.requiresMediaQuery = false;\n    this.requiresNavigator = false;\n    this.requiresChangeNotifierProvider = false;\n    this.customInheritedWidgets = [];           // Custom providers defined\n    this.requiredProviders = [];                // Provider<T> patterns used\n    this.hydrationRequired = false;\n    this.hydrationDependencies = [];            // What needs hydration\n\n    this.ssrCompatibility = 'unknown';          // 'full', 'partial', 'none'\n    this.ssrIssues = [];                        // What breaks SSR\n    this.ssrMigrationPath = [];                 // Steps to fix SSR\n  }\n\n  /**\n   * Add a custom inherited widget\n   */\n  addCustomInheritedWidget(name) {\n    if (!this.customInheritedWidgets.includes(name)) {\n      this.customInheritedWidgets.push(name);\n    }\n  }\n\n  /**\n   * Add a required provider\n   */\n  addRequiredProvider(type) {\n    if (!this.requiredProviders.includes(type)) {\n      this.requiredProviders.push(type);\n    }\n  }\n\n  /**\n   * Add a hydration dependency\n   */\n  addHydrationDependency(dep) {\n    if (dep instanceof HydrationRequirement) {\n      this.hydrationDependencies.push(dep);\n      this.hydrationRequired = true;\n    }\n  }\n\n  /**\n   * Calculate SSR compatibility\n   */\n  calculateSsrCompatibility() {\n    if (this.ssrIssues.length === 0) {\n      this.ssrCompatibility = 'full';\n    } else if (this.ssrIssues.length <= 3) {\n      this.ssrCompatibility = 'partial';\n    } else {\n      this.ssrCompatibility = 'none';\n    }\n  }\n\n  /**\n   * Get summary\n   */\n  summary() {\n    return {\n      requiresThemeProvider: this.requiresThemeProvider,\n      requiresMediaQuery: this.requiresMediaQuery,\n      requiresNavigator: this.requiresNavigator,\n      requiresChangeNotifierProvider: this.requiresChangeNotifierProvider,\n      customInheritedWidgets: this.customInheritedWidgets,\n      requiredProviders: this.requiredProviders,\n      hydrationRequired: this.hydrationRequired,\n      hydrationCount: this.hydrationDependencies.length,\n      ssrCompatibility: this.ssrCompatibility,\n      ssrIssueCount: this.ssrIssues.length,\n    };\n  }\n}\n\n// ============================================================================\n// EXPORTS\n// ============================================================================\n\nexport {\n  InheritedWidgetMetadata,\n  ChangeNotifierAnalysis,\n  ProviderAnalysis,\n  ContextDependency,\n  ContextUsagePattern,\n  HydrationRequirement,\n  LazyLoadOpportunity,\n  ContextRequirementsSummary,\n};\n"],
-  "mappings": "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",
-  "names": ["InheritedWidgetMetadata", "name", "location", "superClass", "type", "required", "signature", "usesInheritedWidgetLookup", "widgetName", "issues", "ChangeNotifierAnalysis", "initialValue", "returnType", "callsNotify", "mutations", "accessPattern", "m", "method", "ProviderAnalysis", "providerType", "valueType", "func", "pattern", "ContextDependency", "dependent", "ContextUsagePattern", "u", "returns", "ssrSafe", "reason", "HydrationRequirement", "dependency", "order", "stateProperty", "LazyLoadOpportunity", "target", "estimatedSize", "recommendation", "sizeKb", "ContextRequirementsSummary", "dep"]
-}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/flutter_import_resolver.js.map b/packages/flutterjs_engine/src/analyzer/dist/flutter_import_resolver.js.map
deleted file mode 100644
index eb63d6da..00000000
--- a/packages/flutterjs_engine/src/analyzer/dist/flutter_import_resolver.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/flutter_import_resolver.js"],
-  "sourcesContent": ["/**\n * Advanced Import Resolver for Flutter.js Framework\n * \u2705 FIXED: Now handles multi-line imports correctly\n * \n * Resolution Chain:\n * 1. Parse imports from source code (single & multi-line)\n * 2. Check framework package mappings (@flutterjs/*, @package:)\n * 3. Check local project code (./src, ./lib, etc.)\n * 4. Check package cache (future: npm_modules, pub_cache, etc.)\n * 5. Return error if not found\n */\n\nimport fs from 'fs';\nimport path from 'path';\n\nclass ImportResolver {\n  constructor(options = {}) {\n    this.options = {\n      projectRoot: process.cwd(),\n      frameworkType: 'flutter-js',\n      ignoreUnresolved: false,\n      cacheEnabled: false,\n      ...options,\n    };\n\n    this.frameworkPackages = {\n      \"@flutterjs/runtime\": \"file:../../../../../src/runtime\",\n      \"@flutterjs/vdom\": \"file:../../../../../src/vdom\",\n      \"@flutterjs/analyzer\": \"file:../../../../analyzer\",\n      \"@flutterjs/material\": \"file:../../../../../package/material\",\n      \"@flutterjs/cupertino\": \"file:../../../../../package/cupertino\",\n      \"@flutterjs/foundation\": \"file:../../../../../package/foundation\",\n    };\n\n    this.customPackageMappings = {};\n    this.resolvedCache = new Map();\n    this.unresolvedCache = new Map();\n\n    this.localSearchPaths = [\n      'src',\n      'lib',\n      'packages',\n      'modules',\n      '.',\n    ];\n\n    this.results = {\n      resolved: [],\n      unresolved: [],\n      errors: [],\n    };\n  }\n\n  /**\n   * \u2705 FINAL FIX: Parse imports directly from source code\n   * Handles both single-line and multi-line imports\n   */\n  parseImportsFromSource(sourceCode, logger = null) {\n    const imports = [];\n\n    if (logger) {\n      logger.info('[ImportResolver] Starting import parsing...');\n      logger.debug(`[ImportResolver] Source code length: ${sourceCode.length} characters`);\n    }\n\n    // Regex: import ... from 'path'\n    // [\\s\\S]*? matches ANYTHING including newlines (non-greedy)\n    const importRegex = /import\\s+([\\s\\S]*?)\\s+from\\s+['\"`]([^'\"`]+)['\"`]/g;\n\n    let match;\n    let matchCount = 0;\n\n    while ((match = importRegex.exec(sourceCode)) !== null) {\n      matchCount++;\n      const importClause = match[1];\n      const modulePath = match[2];\n\n      if (logger) {\n        logger.debug(`[ImportResolver] Match #${matchCount} found`);\n        logger.debug(`  Module path: '${modulePath}'`);\n        logger.trace(`  Raw clause length: ${importClause.length} chars`);\n      }\n\n      // Parse the clause (parsing handles cleaning internally)\n      const parsed = this.parseImportClause(importClause, modulePath, logger);\n\n      if (parsed) {\n        if (logger) {\n          logger.debug(`  \u2713 Successfully parsed`);\n          logger.debug(`    Items: ${parsed.items.join(', ')}`);\n        }\n        imports.push(parsed);\n      } else {\n        if (logger) {\n          logger.warn(`  \u2717 Parse returned null - clause: ${importClause.substring(0, 100)}`);\n        }\n      }\n    }\n\n    if (logger) {\n      logger.info(`[ImportResolver] FINAL RESULT: Found ${matchCount} imports, parsed ${imports.length}`);\n      if (imports.length === 0 && matchCount === 0) {\n        logger.warn('[ImportResolver] \u26A0\uFE0F NO IMPORTS FOUND - Check regex or source code!');\n        logger.warn(`[ImportResolver] Source starts with: ${sourceCode.substring(0, 200)}`);\n      }\n      imports.forEach((imp, idx) => {\n        logger.info(`[ImportResolver]   [${idx}] ${imp.source} \u2192 [${imp.items.join(', ')}]`);\n      });\n    }\n\n    return imports;\n  }\n\n  /**\n   * \u2705 FIXED: Parse individual import clause\n   * Handles: { x, y, z }, defaultExport, * as namespace, etc.\n   * \n   * KEY FIX: Clean the clause COMPLETELY FIRST, then detect type\n   */\n  parseImportClause(clause, modulePath, logger = null) {\n    if (!clause || typeof clause !== 'string') {\n      return null;\n    }\n\n    // \u2705 CRITICAL FIX #1: Clean AGGRESSIVELY FIRST\n    // This removes ALL noise (comments, newlines, extra spaces)\n    let cleaned = clause\n      .replace(/\\/\\/.*$/gm, '')                    // Remove line comments\n      .replace(/\\/\\*[\\s\\S]*?\\*\\//g, '')            // Remove block comments\n      .replace(/\\n/g, ' ')                         // Replace newlines with spaces\n      .replace(/\\t/g, ' ')                         // Replace tabs with spaces\n      .replace(/\\s+/g, ' ')                        // Collapse multiple spaces to one\n      .trim();                                      // Trim leading/trailing\n\n    if (logger) {\n      logger.trace(`[ImportResolver]   Original: ${clause.substring(0, 100).replace(/\\n/g, '\\\\n')}`);\n      logger.trace(`[ImportResolver]   Cleaned: \"${cleaned}\"`);\n    }\n\n    const result = {\n      source: modulePath,\n      items: [],\n      default: null,\n      namespace: null,\n      raw: clause,\n    };\n\n    // \u2705 Case 1: Namespace import: import * as name\n    const namespaceMatch = cleaned.match(/^\\*\\s+as\\s+(\\w+)$/);\n    if (namespaceMatch) {\n      result.namespace = namespaceMatch[1];\n      result.items.push(namespaceMatch[1]);\n      if (logger) logger.trace(`[ImportResolver]   \u2192 Namespace import: ${namespaceMatch[1]}`);\n      return result;\n    }\n\n    // \u2705 Case 2: Named imports with braces: { x, y, z }\n    const namedMatch = cleaned.match(/\\{(.+?)\\}/);\n    if (namedMatch) {\n      if (logger) logger.trace(`[ImportResolver]   \u2192 Found braces, extracting named imports`);\n      \n      const itemsString = namedMatch[1];\n      this.extractNamedItems(itemsString, result, logger);\n      \n      if (result.items.length > 0) {\n        return result;\n      }\n    }\n\n    // \u2705 Case 3: NO BRACES - but might be comma-separated list\n    // This happens when clause is just: \"Widget, State, StatefulWidget, ...\"\n    // (the braces were stripped by the regex that captured this clause)\n    if (!cleaned.includes('{') && cleaned.includes(',')) {\n      if (logger) logger.trace(`[ImportResolver]   \u2192 No braces but has commas, treating as named imports`);\n      \n      this.extractNamedItems(cleaned, result, logger);\n      \n      if (result.items.length > 0) {\n        return result;\n      }\n    }\n\n    // \u2705 Case 4: Default import (no braces, no commas, single identifier)\n    if (!cleaned.includes('{') && !cleaned.includes(',') && cleaned.length > 0) {\n      // Verify it's a valid identifier\n      if (/^[\\w$]+$/.test(cleaned)) {\n        result.default = cleaned;\n        result.items.push(cleaned);\n        if (logger) logger.trace(`[ImportResolver]   \u2192 Default import: ${cleaned}`);\n        return result;\n      }\n    }\n\n    // \u2705 Case 5: Combined default + named: import defaultExport, { x, y }\n    if (cleaned.includes('{') && cleaned.includes(',')) {\n      const beforeBrace = cleaned.split('{')[0].trim();\n      if (beforeBrace && beforeBrace !== ',' && /^[\\w$]+$/.test(beforeBrace)) {\n        result.default = beforeBrace;\n        // Also parse the named imports\n        const namedMatch2 = cleaned.match(/\\{(.+?)\\}/);\n        if (namedMatch2) {\n          this.extractNamedItems(namedMatch2[1], result, logger);\n        }\n        return result.items.length > 0 ? result : null;\n      }\n    }\n\n    // \u2705 Debug: Nothing matched\n    if (logger) {\n      logger.warn(`[ImportResolver]   \u26A0\uFE0F No valid import pattern detected`);\n      logger.debug(`[ImportResolver]   Cleaned was: \"${cleaned}\"`);\n    }\n\n    return null;\n  }\n\n  /**\n   * \u2705 NEW: Extract named items from a comma-separated string\n   * Handles: \"x, y, z\" and \"x as y, z as w\" patterns\n   */\n  extractNamedItems(itemsString, result, logger = null) {\n    const items = itemsString.split(',');\n    \n    if (logger) {\n      logger.trace(`[ImportResolver]     Found ${items.length} comma-separated items`);\n    }\n\n    items.forEach((item) => {\n      const trimmed = item.trim();\n      \n      // Skip empty items\n      if (!trimmed || trimmed.length === 0) return;\n      \n      // Skip if it looks like a comment left over\n      if (trimmed.startsWith('//') || trimmed.startsWith('*')) return;\n\n      // Handle \"x as y\" syntax - take the alias (the part after 'as')\n      const asMatch = trimmed.match(/^(\\w+)\\s+as\\s+(\\w+)$/);\n      let importName;\n      \n      if (asMatch) {\n        // \"x as y\" \u2192 use \"y\"\n        importName = asMatch[2];\n        if (logger) logger.trace(`[ImportResolver]       \"${asMatch[1]} as ${asMatch[2]}\" \u2192 ${importName}`);\n      } else {\n        // Simple identifier\n        importName = trimmed;\n        if (logger) logger.trace(`[ImportResolver]       \"${trimmed}\"`);\n      }\n\n      // Validate it's a proper identifier\n      if (/^[\\w$]+$/.test(importName) && !result.items.includes(importName)) {\n        result.items.push(importName);\n      }\n    });\n  }\n\n  /**\n   * Resolve imports from source code directly\n   * \u2705 NEW METHOD: Accepts sourceCode and parses multi-line imports automatically\n   */\n  resolveFromSource(sourceCode, logger = null) {\n    // Parse imports from source\n    const parsedImports = this.parseImportsFromSource(sourceCode, logger);\n\n    if (logger) {\n      logger.info(`[ImportResolver] Parsed ${parsedImports.length} import statements`);\n      parsedImports.forEach((imp, idx) => {\n        logger.debug(`[ImportResolver]   [${idx}] ${imp.source} \u2192 [${imp.items.join(', ')}]`);\n      });\n    }\n\n    // Group by source\n    const groupedBySource = {};\n    parsedImports.forEach(imp => {\n      if (!groupedBySource[imp.source]) {\n        groupedBySource[imp.source] = [];\n      }\n      groupedBySource[imp.source] = groupedBySource[imp.source].concat(imp.items);\n    });\n\n    // \u2705 Reset results before resolving\n    this.results = {\n      resolved: [],\n      unresolved: [],\n      errors: [],\n    };\n\n    // Resolve each unique source\n    Object.entries(groupedBySource).forEach(([source, items]) => {\n      this.resolve(source, items);\n    });\n\n    return {\n      imports: this.results,\n      summary: this.getSummary(),\n      parsed: parsedImports,\n    };\n  }\n\n  /**\n   * Main resolution entry point\n   * Tries multiple fallback locations\n   */\n  resolve(importPath, importedItems = [], options = {}) {\n    // Check cache first\n    const cacheKey = `${importPath}:${JSON.stringify(importedItems)}`;\n    if (this.resolvedCache.has(cacheKey)) {\n      return this.resolvedCache.get(cacheKey);\n    }\n    if (this.unresolvedCache.has(cacheKey)) {\n      return this.unresolvedCache.get(cacheKey);\n    }\n\n    const result = {\n      original: importPath,\n      items: importedItems,\n      resolved: null,\n      actualPath: null,\n      type: null,\n      source: null,\n      isValid: false,\n      reason: null,\n      fallbacks: [],\n    };\n\n    // STEP 1: Check if it's a framework package\n    if (this.isFrameworkPackage(importPath)) {\n      const stepResult = this.resolveFrameworkPackage(importPath, importedItems);\n      if (stepResult.isValid) {\n        result.resolved = stepResult.resolved;\n        result.actualPath = stepResult.actualPath;\n        result.type = 'framework';\n        result.source = 'framework';\n        result.isValid = true;\n        result.reason = 'Resolved from framework mappings';\n        this.resolvedCache.set(cacheKey, result);\n        this.results.resolved.push(result);\n        return result;\n      }\n      result.fallbacks.push({\n        step: 1,\n        tried: 'framework-package',\n        found: false,\n        reason: stepResult.reason,\n      });\n    }\n\n    // STEP 2: Check local project code\n    if (!this.isScopedPackage(importPath)) {\n      const stepResult = this.resolveLocalImport(importPath, importedItems);\n      if (stepResult.isValid) {\n        result.resolved = stepResult.resolved;\n        result.actualPath = stepResult.actualPath;\n        result.type = 'local';\n        result.source = 'local';\n        result.isValid = true;\n        result.reason = `Found in local project at ${stepResult.actualPath}`;\n        this.resolvedCache.set(cacheKey, result);\n        this.results.resolved.push(result);\n        return result;\n      }\n      result.fallbacks.push({\n        step: 2,\n        tried: 'local-code',\n        locations: stepResult.searchedLocations,\n        found: false,\n        reason: stepResult.reason,\n      });\n    }\n\n    // STEP 3: Check package cache\n    if (this.options.cacheEnabled) {\n      const stepResult = this.resolveFromCache(importPath, importedItems);\n      if (stepResult.isValid) {\n        result.resolved = stepResult.resolved;\n        result.actualPath = stepResult.actualPath;\n        result.type = 'cache';\n        result.source = 'cache';\n        result.isValid = true;\n        result.reason = `Found in package cache at ${stepResult.actualPath}`;\n        this.resolvedCache.set(cacheKey, result);\n        this.results.resolved.push(result);\n        return result;\n      }\n      result.fallbacks.push({\n        step: 3,\n        tried: 'package-cache',\n        found: false,\n        reason: stepResult.reason,\n      });\n    }\n\n    // STEP 4: Not found\n    result.isValid = false;\n    result.source = 'error';\n    result.reason = this.generateErrorMessage(importPath, result.fallbacks);\n\n    if (!this.options.ignoreUnresolved) {\n      this.results.errors.push(result);\n    }\n    this.unresolvedCache.set(cacheKey, result);\n    this.results.unresolved.push(result);\n\n    return result;\n  }\n\n  isFrameworkPackage(importPath) {\n    return importPath.startsWith('@flutterjs/') ||\n           importPath.startsWith('@package:');\n  }\n\n  isScopedPackage(importPath) {\n    return importPath.startsWith('@');\n  }\n\n  resolveFrameworkPackage(importPath, importedItems) {\n    if (this.frameworkPackages[importPath]) {\n      return {\n        isValid: true,\n        resolved: this.frameworkPackages[importPath],\n        actualPath: this.frameworkPackages[importPath],\n        reason: 'Found in framework package mappings',\n      };\n    }\n\n    if (this.customPackageMappings[importPath]) {\n      return {\n        isValid: true,\n        resolved: this.customPackageMappings[importPath],\n        actualPath: this.customPackageMappings[importPath],\n        reason: 'Found in custom package mappings',\n      };\n    }\n\n    return {\n      isValid: false,\n      reason: `Framework package \"${importPath}\" not found in mappings`,\n    };\n  }\n\n  resolveLocalImport(importPath, importedItems) {\n    const searchedLocations = [];\n\n    if (importPath.startsWith('./') || importPath.startsWith('../')) {\n      const fullPath = path.resolve(this.options.projectRoot, importPath);\n      searchedLocations.push(fullPath);\n\n      if (this.fileExists(fullPath)) {\n        return {\n          isValid: true,\n          resolved: importPath,\n          actualPath: fullPath,\n          reason: 'Relative import found',\n        };\n      }\n\n      if (this.fileExists(`${fullPath}.js`)) {\n        return {\n          isValid: true,\n          resolved: importPath,\n          actualPath: `${fullPath}.js`,\n          reason: 'Relative import found (with .js)',\n        };\n      }\n\n      return {\n        isValid: false,\n        searchedLocations,\n        reason: `Relative import not found: ${importPath}`,\n      };\n    }\n\n    for (const searchPath of this.localSearchPaths) {\n      const fullPath = path.resolve(\n        this.options.projectRoot,\n        searchPath,\n        importPath\n      );\n      searchedLocations.push(fullPath);\n\n      const indexPath = path.join(fullPath, 'index.js');\n      if (this.fileExists(indexPath)) {\n        return {\n          isValid: true,\n          resolved: importPath,\n          actualPath: indexPath,\n          reason: `Found in ${searchPath}/${importPath}/index.js`,\n        };\n      }\n\n      if (this.fileExists(`${fullPath}.js`)) {\n        return {\n          isValid: true,\n          resolved: importPath,\n          actualPath: `${fullPath}.js`,\n          reason: `Found in ${searchPath}/${importPath}.js`,\n        };\n      }\n\n      if (this.fileExists(`${fullPath}.fjs`)) {\n        return {\n          isValid: true,\n          resolved: importPath,\n          actualPath: `${fullPath}.fjs`,\n          reason: `Found in ${searchPath}/${importPath}.fjs`,\n        };\n      }\n    }\n\n    return {\n      isValid: false,\n      searchedLocations,\n      reason: `Local import not found in: ${this.localSearchPaths.join(', ')}`,\n    };\n  }\n\n  resolveFromCache(importPath, importedItems) {\n    return {\n      isValid: false,\n      reason: 'Package cache resolution not yet implemented',\n    };\n  }\n\n  fileExists(filePath) {\n    try {\n      return fs.existsSync(filePath);\n    } catch (error) {\n      return false;\n    }\n  }\n\n  generateErrorMessage(importPath, fallbacks) {\n    let message = `\u274C Import not found: \"${importPath}\"\\n\\nResolution chain:\\n`;\n\n    fallbacks.forEach((step) => {\n      message += `  ${step.step}. Checked ${step.tried}: NOT FOUND\\n`;\n\n      if (step.locations) {\n        message += `     Locations searched:\\n`;\n        step.locations.forEach((loc) => {\n          message += `       - ${loc}\\n`;\n        });\n      }\n\n      if (step.reason) {\n        message += `     (${step.reason})\\n`;\n      }\n    });\n\n    message += `\\nSuggestions:\\n`;\n    message += `  \u2022 Verify the import path is correct\\n`;\n    message += `  \u2022 Check that the file exists in your project\\n`;\n    message += `  \u2022 Add a custom package mapping if needed: addPackageMapping()\\n`;\n\n    return message;\n  }\n\n  resolveImports(imports) {\n    this.results = {\n      resolved: [],\n      unresolved: [],\n      errors: [],\n    };\n\n    imports.forEach((imp) => {\n      this.resolve(imp.source, imp.items);\n    });\n\n    return {\n      imports: this.results,\n      summary: this.getSummary(),\n    };\n  }\n\n  addPackageMapping(packageName, actualPath) {\n    if (packageName.startsWith('@flutterjs/') || packageName.startsWith('@package:')) {\n      this.customPackageMappings[packageName] = actualPath;\n      console.log(`\u2713 Added mapping: ${packageName} \u2192 ${actualPath}`);\n    } else {\n      console.warn(`\u26A0 Framework mappings should start with @flutterjs/ or @package:`);\n    }\n  }\n\n  addPackageMappings(mappings) {\n    Object.entries(mappings).forEach(([pkg, path]) => {\n      this.addPackageMapping(pkg, path);\n    });\n  }\n\n  getPackageMappings() {\n    return {\n      framework: this.frameworkPackages,\n      custom: this.customPackageMappings,\n    };\n  }\n\n  setLocalSearchPaths(paths) {\n    this.localSearchPaths = paths;\n    console.log(`\u2713 Set local search paths: ${paths.join(', ')}`);\n  }\n\n  getSummary() {\n    const total = this.results.resolved.length + this.results.unresolved.length;\n    const resolved = this.results.resolved.length;\n    const unresolved = this.results.unresolved.length;\n\n    return {\n      total,\n      resolved,\n      unresolved,\n      errors: this.results.errors.length,\n      resolutionRate: total > 0 ? ((resolved / total) * 100).toFixed(2) + '%' : 'N/A',\n      bySource: {\n        framework: this.results.resolved.filter((r) => r.source === 'framework').length,\n        local: this.results.resolved.filter((r) => r.source === 'local').length,\n        cache: this.results.resolved.filter((r) => r.source === 'cache').length,\n      },\n    };\n  }\n\n  generateReport() {\n    const summary = this.getSummary();\n\n    let report = `\n\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\n\u2551         IMPORT RESOLUTION REPORT                                          \u2551\n\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D\n\n\uD83D\uDCCA Summary\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  Total Imports:    ${summary.total}\n  \u2713 Resolved:       ${summary.resolved} (${summary.resolutionRate})\n  \u2717 Unresolved:     ${summary.unresolved}\n  \u26A0 Errors:         ${summary.errors}\n\n\uD83D\uDCCD Resolution Sources\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  Framework:        ${summary.bySource.framework}\n  Local Code:       ${summary.bySource.local}\n  Package Cache:    ${summary.bySource.cache}\n\n${this.results.unresolved.length > 0 ? `\n\u26A0\uFE0F  UNRESOLVED IMPORTS\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n${this.results.unresolved\n          .map(\n            (imp) =>\n              `  \u2717 ${imp.original}\n     Reason: ${imp.reason}`\n          )\n          .join('\\n')}\n` : ''}\n\n${this.results.errors.length > 0 ? `\n\uD83D\uDD34 ERRORS\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n${this.results.errors.map((err) => `  \u2022 ${err.reason}`).join('\\n')}\n` : ''}\n`;\n\n    return report;\n  }\n\n  clearCache() {\n    this.resolvedCache.clear();\n    this.unresolvedCache.clear();\n    console.log('\u2713 Resolution cache cleared');\n  }\n}\n\nexport { ImportResolver };"],
-  "mappings": "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",
-  "names": ["fs", "path", "ImportResolver", "options", "sourceCode", "logger", "imports", "importRegex", "match", "matchCount", "importClause", "modulePath", "parsed", "imp", "idx", "clause", "cleaned", "result", "namespaceMatch", "namedMatch", "itemsString", "beforeBrace", "namedMatch2", "items", "item", "trimmed", "asMatch", "importName", "parsedImports", "groupedBySource", "source", "importPath", "importedItems", "cacheKey", "stepResult", "searchedLocations", "fullPath", "searchPath", "indexPath", "filePath", "fallbacks", "message", "step", "loc", "packageName", "actualPath", "mappings", "pkg", "paths", "total", "resolved", "unresolved", "r", "summary", "err"]
-}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/flutter_resolver_config.js.map b/packages/flutterjs_engine/src/analyzer/dist/flutter_resolver_config.js.map
deleted file mode 100644
index 5c56d2a6..00000000
--- a/packages/flutterjs_engine/src/analyzer/dist/flutter_resolver_config.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/flutter_resolver_config.js"],
-  "sourcesContent": ["/**\n * Import Resolver Configuration\n * \n * Define your custom package mappings and resolver settings here\n */\n\nexport const resolverConfig = {\n  frameworkType: 'flutterjs',\n  ignoreUnresolved: false,\n  cacheEnabled: false,\n\n  // \u2705 CORRECTED: Specify exact locations for each package\n  customPackageMappings: {\n    // Under packages/flutterjs_engine/src/\n    '@flutterjs/runtime': './flutterjs_engine/src/runtime',\n    '@flutterjs/vdom': './flutterjs_engine/src/vdom',\n\n    // Under packages/flutterjs_engine/package/\n    '@flutterjs/material': './flutterjs_engine/package/material',\n    '@flutterjs/http': './flutterjs_engine/package/http',\n\n    // Add others as needed\n    '@flutterjs/core': './flutterjs_engine/src/core',\n    '@flutterjs/foundation': './flutterjs_engine/src/foundation',\n    '@flutterjs/widgets': './flutterjs_engine/package/widgets',\n  },\n\n  // \u2705 CORRECTED: Search paths\n  localSearchPaths: [\n    'packages/flutterjs_engine/src',           // runtime, vdom\n    'packages/flutterjs_engine/package',       // material, http\n    'src',\n    'lib',\n    'packages',\n    'modules',\n    'components',\n    'screens',\n    'widgets',\n    '.',\n  ],\n\n  packageAliases: {\n    'flutter': '@flutterjs/material',\n    'material': '@flutterjs/material',\n    'http': '@flutterjs/http',\n  },\n\n  strict: {\n    enforceNamingConventions: false,\n    requireVersions: false,\n    detectCircularImports: true,\n  },\n};\n\n/**\n * Create and configure resolver\n */\nexport function createResolver(options = {}) {\n  const { ImportResolver } = import('./flutter_import_resolver.js');\n\n  const resolver = new ImportResolver({\n    projectRoot: process.cwd(),\n    ...resolverConfig,\n    ...options,\n  });\n\n  // Add all custom mappings\n  if (resolverConfig.customPackageMappings) {\n    resolver.addPackageMappings(resolverConfig.customPackageMappings);\n  }\n\n  // Set local search paths\n  if (resolverConfig.localSearchPaths) {\n    resolver.setLocalSearchPaths(resolverConfig.localSearchPaths);\n  }\n\n  return resolver;\n}\n\n/**\n * Preset configurations for different project types\n */\nexport const presets = {\n  // Simple web app\n  web: {\n    localSearchPaths: ['src', 'lib', 'components', '.'],\n    customPackageMappings: {},\n  },\n\n  // Monorepo structure\n  monorepo: {\n    localSearchPaths: [\n      'packages/ui',\n      'packages/core',\n      'packages/models',\n      'packages/utils',\n      'src',\n      '.',\n    ],\n    customPackageMappings: {\n      '@package:ui': './packages/ui',\n      '@package:core': './packages/core',\n      '@package:models': './packages/models',\n      '@package:utils': './packages/utils',\n    },\n  },\n\n  // Flutter-style structure\n  flutter: {\n    localSearchPaths: [\n      'lib',\n      'lib/screens',\n      'lib/widgets',\n      'lib/models',\n      'lib/services',\n      'lib/utils',\n      '.',\n    ],\n    customPackageMappings: {\n      \"@flutterjs/runtime\": \"file:../../../../runtime\",\n      \"@flutterjs/vdom\": \"file:../../../../vdom\",\n      \"@flutterjs/analyzer\": \"file:../../../../analyzer\",\n      '@flutterjs/material': 'file:../../../../../package/material',\n    },\n  },\n};\n"],
-  "mappings": "AAMO,MAAMA,EAAiB,CAC5B,cAAe,YACf,iBAAkB,GAClB,aAAc,GAGd,sBAAuB,CAErB,qBAAsB,iCACtB,kBAAmB,8BAGnB,sBAAuB,sCACvB,kBAAmB,kCAGnB,kBAAmB,8BACnB,wBAAyB,oCACzB,qBAAsB,oCACxB,EAGA,iBAAkB,CAChB,gCACA,oCACA,MACA,MACA,WACA,UACA,aACA,UACA,UACA,GACF,EAEA,eAAgB,CACd,QAAW,sBACX,SAAY,sBACZ,KAAQ,iBACV,EAEA,OAAQ,CACN,yBAA0B,GAC1B,gBAAiB,GACjB,sBAAuB,EACzB,CACF,EAKO,SAASC,EAAeC,EAAU,CAAC,EAAG,CAC3C,KAAM,CAAE,eAAAC,CAAe,EAAI,OAAO,8BAA8B,EAE1DC,EAAW,IAAID,EAAe,CAClC,YAAa,QAAQ,IAAI,EACzB,GAAGH,EACH,GAAGE,CACL,CAAC,EAGD,OAAIF,EAAe,uBACjBI,EAAS,mBAAmBJ,EAAe,qBAAqB,EAI9DA,EAAe,kBACjBI,EAAS,oBAAoBJ,EAAe,gBAAgB,EAGvDI,CACT,CAKO,MAAMC,EAAU,CAErB,IAAK,CACH,iBAAkB,CAAC,MAAO,MAAO,aAAc,GAAG,EAClD,sBAAuB,CAAC,CAC1B,EAGA,SAAU,CACR,iBAAkB,CAChB,cACA,gBACA,kBACA,iBACA,MACA,GACF,EACA,sBAAuB,CACrB,cAAe,gBACf,gBAAiB,kBACjB,kBAAmB,oBACnB,iBAAkB,kBACpB,CACF,EAGA,QAAS,CACP,iBAAkB,CAChB,MACA,cACA,cACA,aACA,eACA,YACA,GACF,EACA,sBAAuB,CACrB,qBAAsB,2BACtB,kBAAmB,wBACnB,sBAAuB,4BACvB,sBAAuB,sCACzB,CACF,CACF",
-  "names": ["resolverConfig", "createResolver", "options", "ImportResolver", "resolver", "presets"]
-}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/flutterjs_logger.js.map b/packages/flutterjs_engine/src/analyzer/dist/flutterjs_logger.js.map
deleted file mode 100644
index 3f40e6ca..00000000
--- a/packages/flutterjs_engine/src/analyzer/dist/flutterjs_logger.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/flutterjs_logger.js"],
-  "sourcesContent": ["/**\n * FlutterJS Logger - Centralized Debug Output System\n * \n * Instead of console.log() everywhere, use this logger to:\n * - Write debug logs to a file (.debug folder)\n * - Maintain clean console output\n * - Enable/disable debug modes per component\n * - Group related logs together\n * - Support multiple log levels\n */\n\nimport fs from 'fs';\nimport path from 'path';\n\nclass Logger {\n  constructor(options = {}) {\n    this.options = {\n      debugDir: '.debug',\n      enabled: true,\n      level: 'info',  // 'error', 'warn', 'info', 'debug', 'trace'\n      writeToFile: true,\n      writeToConsole: false,  // Set to true only for critical errors\n      includeTimestamp: true,\n      includeStackTrace: false,\n      maxFileSize: 10 * 1024 * 1024,  // 10MB\n      ...options,\n    };\n\n    this.logLevels = {\n      'error': 0,\n      'warn': 1,\n      'info': 2,\n      'debug': 3,\n      'trace': 4,\n    };\n\n    this.currentLevel = this.logLevels[this.options.level];\n    this.logs = [];\n    this.logSessions = {};\n    this.indentLevel = 0;\n\n    // Ensure debug directory exists\n    if (this.options.writeToFile) {\n      this.ensureDebugDir();\n    }\n  }\n\n  /**\n   * Ensure .debug directory exists\n   */\n  ensureDebugDir() {\n    if (!fs.existsSync(this.options.debugDir)) {\n      fs.mkdirSync(this.options.debugDir, { recursive: true });\n    }\n  }\n\n  /**\n   * Get file path for a specific component\n   */\n  getLogFilePath(component = 'general') {\n    return path.join(this.options.debugDir, `${component}.log`);\n  }\n\n  /**\n   * Check if log level should be written\n   */\n  shouldLog(level) {\n    return this.logLevels[level] <= this.currentLevel;\n  }\n\n  /**\n   * Format log entry\n   */\n  formatEntry(level, component, message, data = null) {\n    const timestamp = this.options.includeTimestamp\n      ? new Date().toISOString()\n      : '';\n\n    const indent = '  '.repeat(this.indentLevel);\n    const levelStr = level.toUpperCase().padEnd(5);\n    const componentStr = component.padEnd(20);\n\n    let entry = `${timestamp} [${levelStr}] [${componentStr}] ${indent}${message}`;\n\n    if (data) {\n      entry += '\\n' + indent + JSON.stringify(data, null, 2);\n    }\n\n    return entry;\n  }\n\n  /**\n   * Internal write method\n   */\n  write(level, component, message, data) {\n    if (!this.shouldLog(level)) return;\n\n    const entry = this.formatEntry(level, component, message, data);\n    this.logs.push(entry);\n\n    // Write to console if enabled (only for critical messages)\n    if (this.options.writeToConsole && level === 'error') {\n      console.error(`${component}: ${message}`, data || '');\n    }\n\n    // Write to file\n    if (this.options.writeToFile) {\n      this.writeToFile(component, entry);\n    }\n  }\n\n  /**\n   * Write entry to file\n   */\n  writeToFile(component, entry) {\n    try {\n      const filePath = this.getLogFilePath(component);\n      fs.appendFileSync(filePath, entry + '\\n', 'utf-8');\n\n      // Check file size and rotate if needed\n      const stats = fs.statSync(filePath);\n      if (stats.size > this.options.maxFileSize) {\n        this.rotateLogFile(filePath);\n      }\n    } catch (error) {\n      console.error(`Logger failed to write to ${component}: ${error.message}`);\n    }\n  }\n\n  /**\n   * Rotate log file when it gets too large\n   */\n  rotateLogFile(filePath) {\n    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');\n    const backupPath = filePath.replace('.log', `.${timestamp}.log`);\n    fs.renameSync(filePath, backupPath);\n  }\n\n  // =========================================================================\n  // PUBLIC API\n  // =========================================================================\n\n  /**\n   * Start a named session (group of related logs)\n   */\n  startSession(name, component = 'general') {\n    this.logSessions[name] = {\n      component,\n      startTime: Date.now(),\n      startIndent: this.indentLevel,\n    };\n    this.indent();\n    this.info(component, `\u25BA START SESSION: ${name}`);\n  }\n\n  /**\n   * End a named session\n   */\n  endSession(name, component = 'general') {\n    if (this.logSessions[name]) {\n      const duration = Date.now() - this.logSessions[name].startTime;\n      this.info(component, `\u25C4 END SESSION: ${name} (${duration}ms)`);\n      this.unindent();\n      delete this.logSessions[name];\n    }\n  }\n\n  /**\n   * Increase indent level\n   */\n  indent() {\n    this.indentLevel++;\n  }\n\n  /**\n   * Decrease indent level\n   */\n  unindent() {\n    this.indentLevel = Math.max(0, this.indentLevel - 1);\n  }\n\n  /**\n   * Error level\n   */\n  error(component, message, data) {\n    this.write('error', component, message, data);\n  }\n\n  /**\n   * Warning level\n   */\n  warn(component, message, data) {\n    this.write('warn', component, message, data);\n  }\n\n  /**\n   * Info level\n   */\n  info(component, message, data) {\n    this.write('info', component, message, data);\n  }\n\n  /**\n   * Debug level\n   */\n  debug(component, message, data) {\n    this.write('debug', component, message, data);\n  }\n\n  /**\n   * Trace level (most verbose)\n   */\n  trace(component, message, data) {\n    this.write('trace', component, message, data);\n  }\n\n  /**\n   * Log a method entry/exit pair\n   */\n  methodEntry(component, methodName, params = null) {\n    this.indent();\n    this.trace(component, `\u2192 ${methodName}()`, params);\n  }\n\n  /**\n   * Log method exit\n   */\n  methodExit(component, methodName, result = null) {\n    this.trace(component, `\u2190 ${methodName}()`, result);\n    this.unindent();\n  }\n\n  /**\n   * Log a successful step\n   */\n  success(component, message, data) {\n    this.write('info', component, `\u2713 ${message}`, data);\n  }\n\n  /**\n   * Log a failure\n   */\n  failure(component, message, error) {\n    this.write('error', component, `\u2717 ${message}`, error);\n  }\n\n  /**\n   * Log a step count (e.g., \"Found 5 widgets\")\n   */\n  count(component, label, count) {\n    this.write('info', component, `${label}: ${count}`);\n  }\n\n  /**\n   * Create a scoped logger for a specific component\n   */\n  createComponentLogger(componentName) {\n    return {\n      error: (msg, data) => this.error(componentName, msg, data),\n      warn: (msg, data) => this.warn(componentName, msg, data),\n      info: (msg, data) => this.info(componentName, msg, data),\n      debug: (msg, data) => this.debug(componentName, msg, data),\n      trace: (msg, data) => this.trace(componentName, msg, data),\n      success: (msg, data) => this.success(componentName, msg, data),\n      failure: (msg, err) => this.failure(componentName, msg, err),\n      methodEntry: (method, params) => this.methodEntry(componentName, method, params),\n      methodExit: (method, result) => this.methodExit(componentName, method, result),\n      startSession: (name) => this.startSession(name, componentName),\n      endSession: (name) => this.endSession(name, componentName),\n      indent: () => this.indent(),\n      unindent: () => this.unindent(),\n    };\n  }\n\n  /**\n   * Get all logs as a single string\n   */\n  getAllLogs() {\n    return this.logs.join('\\n');\n  }\n\n  /**\n   * Save all logs to files\n   */\n  saveLogs() {\n    try {\n      const allLogsPath = path.join(this.options.debugDir, '_all.log');\n      fs.writeFileSync(allLogsPath, this.getAllLogs(), 'utf-8');\n      return allLogsPath;\n    } catch (error) {\n      console.error('Failed to save logs:', error.message);\n      return null;\n    }\n  }\n\n  /**\n   * Clear debug directory\n   */\n  clearDebugDir() {\n    try {\n      if (fs.existsSync(this.options.debugDir)) {\n        fs.rmSync(this.options.debugDir, { recursive: true, force: true });\n        this.ensureDebugDir();\n      }\n    } catch (error) {\n      console.error('Failed to clear debug directory:', error.message);\n    }\n  }\n\n  /**\n   * Read all debug files and return as object\n   */\n  readDebugFiles() {\n    const files = {};\n    try {\n      const entries = fs.readdirSync(this.options.debugDir);\n      entries.forEach((file) => {\n        if (file.endsWith('.log')) {\n          const filePath = path.join(this.options.debugDir, file);\n          files[file] = fs.readFileSync(filePath, 'utf-8');\n        }\n      });\n    } catch (error) {\n      console.error('Failed to read debug files:', error.message);\n    }\n    return files;\n  }\n\n  /**\n   * Get analysis report of logs (counts, errors, warnings, etc.)\n   */\n  getReport() {\n    const report = {\n      totalEntries: this.logs.length,\n      errors: 0,\n      warnings: 0,\n      info: 0,\n      debug: 0,\n      trace: 0,\n      sessions: Object.keys(this.logSessions).length,\n      debugFiles: [],\n    };\n\n    this.logs.forEach((log) => {\n      if (log.includes('[ERROR]')) report.errors++;\n      else if (log.includes('[WARN]')) report.warnings++;\n      else if (log.includes('[INFO]')) report.info++;\n      else if (log.includes('[DEBUG]')) report.debug++;\n      else if (log.includes('[TRACE]')) report.trace++;\n    });\n\n    try {\n      report.debugFiles = fs.readdirSync(this.options.debugDir)\n        .filter((f) => f.endsWith('.log'));\n    } catch (error) {\n      // Ignore\n    }\n\n    return report;\n  }\n}\n\n/**\n * Global singleton logger instance\n */\nlet globalLogger = null;\n\nexport function initLogger(options = {}) {\n  globalLogger = new Logger(options);\n  return globalLogger;\n}\n\nexport function getLogger() {\n  if (!globalLogger) {\n    globalLogger = new Logger();\n  }\n  return globalLogger;\n}\n\nexport { Logger };\n"],
-  "mappings": "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",
-  "names": ["fs", "path", "Logger", "options", "component", "level", "message", "data", "timestamp", "indent", "levelStr", "componentStr", "entry", "filePath", "error", "backupPath", "name", "duration", "methodName", "params", "result", "label", "count", "componentName", "msg", "err", "method", "allLogsPath", "files", "file", "report", "log", "f", "globalLogger", "initLogger", "getLogger"]
-}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/flutterjs_parser.js b/packages/flutterjs_engine/src/analyzer/dist/flutterjs_parser.js
deleted file mode 100644
index 4d65eda2..00000000
--- a/packages/flutterjs_engine/src/analyzer/dist/flutterjs_parser.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import{TokenType as n}from"./lexer.js";import{getLogger as x}from"./flutterjs_logger.js";class l{constructor(e,t){this.type=e,this.location=t}}class T extends l{constructor(e=[],t=null){super("Program",t),this.body=e}}class C extends l{constructor(e=[],t=null,s=null){super("ImportDeclaration",s),this.specifiers=e,this.source=t}}class k extends l{constructor(e=null,t=null,s=null){super("ImportSpecifier",s),this.imported=e,this.local=t}}class N extends l{constructor(e=null,t=null,s=null,i=null){super("ClassDeclaration",i),this.id=e,this.superClass=t,this.body=s}}class O extends l{constructor(e=[],t=[],s=null){super("ClassBody",s),this.fields=e,this.methods=t}}class $ extends l{constructor(e=null,t=null,s=null){super("FieldDeclaration",s),this.key=e,this.initialValue=t}}class A extends l{constructor(e=null,t=[],s=null,i=null){super("MethodDeclaration",i),this.key=e,this.params=t,this.body=s}}class E extends l{constructor(e=null,t=!1,s=null,i=null){super("Parameter",i),this.name=e,this.optional=t,this.defaultValue=s}}class D extends l{constructor(e=null,t=[],s=null,i=!1,r=null){super("FunctionDeclaration",r),this.id=e,this.params=t,this.body=s,this.isAsync=i}}class R extends l{constructor(e=[],t=null){super("BlockStatement",t),this.body=e}}class U extends l{constructor(e=null,t=null){super("ReturnStatement",t),this.argument=e}}class w extends l{constructor(e=null,t=null){super("ExpressionStatement",t),this.expression=e}}class o extends l{constructor(e="",t=null){super("Identifier",t),this.name=e}}class h extends l{constructor(e=null,t="",s="string",i=null){super("Literal",i),this.value=e,this.raw=t,this.literalType=s}}class b extends l{constructor(e=null,t=[],s=null){super("CallExpression",s),this.callee=e,this.args=t}}class P extends l{constructor(e=null,t=[],s=null){super("NewExpression",s),this.callee=e,this.args=t,this.isConst=!1}}class F extends l{constructor(e=[],t=null){super("ObjectLiteral",t),this.properties=e}}class S extends l{constructor(e=null,t=null,s=null){super("Property",s),this.key=e,this.value=t,this.shorthand=!1}}class g extends l{constructor(e=[],t=null,s=null){super("ArrowFunctionExpression",s),this.params=e,this.body=t}}class I extends l{constructor(e=null,t=null,s=!1,i=null){super("MemberExpression",i),this.object=e,this.property=t,this.computed=s}}class L{constructor(e=[],t={}){this.tokens=e,this.current=0,this.errors=[],this.options={strict:!1,...t},this.callStack=[],this.debugMode=!0}parse(){const e=[];for(;!this.isAtEnd();)try{const t=this.parseTopLevel();t&&t.type==="ImportDeclaration"&&console.log("DEBUG - ImportDeclaration:",JSON.stringify(t,null,2)),t&&e.push(t)}catch(t){this.errors.push(t),this.synchronize()}return new T(e)}skipComments(){for(;!this.isAtEnd()&&this.check(n.COMMENT);)this.advance()}isComment(){return this.isAtEnd()?!1:this.peek().type===n.COMMENT}parseTopLevel(){if(this.skipComments(),this.isAtEnd())return null;if(this.isKeyword("import"))return this.advance(),this.parseImportDeclaration();if(this.isKeyword("class"))return this.advance(),this.parseClassDeclaration();if(this.isKeyword("function"))return this.advance(),this.parseFunctionDeclaration();const e=this.parseExpression();return this.consumeStatementEnd(),new w(e,this.getLocation())}isKeyword(e){if(this.isAtEnd())return!1;const t=this.peek();return t.type===n.KEYWORD&&t.value===e}isPunctuation(e){if(this.isAtEnd())return!1;const t=this.peek();return t.type===n.PUNCTUATION&&t.value===e}isOperator(e){if(this.isAtEnd())return!1;const t=this.peek();return t.type===n.OPERATOR&&t.value===e}parseImportDeclaration(){const e=x().createComponentLogger("Parser.parseImportDeclaration");e.startSession("parseImportDeclaration");const t=this.getLocation(),s=[];if(e.trace(`  Starting import parse at token: ${this.peek().value}`),this.isPunctuation("{")){for(e.trace("  Found opening brace, parsing named imports..."),this.advance(),this.skipComments();!this.isPunctuation("}")&&!this.isAtEnd();){if(this.skipComments(),this.isPunctuation("}")){e.trace("  Found closing brace, exiting loop");break}if(!this.check(n.IDENTIFIER)){e.warn(`  Expected identifier but got: ${this.peek().value}`),this.advance();continue}const a=this.consume(n.IDENTIFIER,"Expected identifier").value,u=new o(a);e.trace(`    Imported: ${a}`);let p=u;if(this.skipComments(),this.isKeyword("as")){e.trace("    Found 'as' keyword"),this.advance(),this.skipComments();const m=this.consume(n.IDENTIFIER,"Expected identifier after as").value;p=new o(m),e.trace(`      Local name: ${m}`)}if(s.push(new k(u,p)),this.skipComments(),this.isPunctuation(",")){e.trace("    Found comma, continuing..."),this.advance(),this.skipComments();continue}else{e.trace("    No comma, expected closing brace next");break}}e.trace(`  Parsed ${s.length} named imports`),this.consume(n.PUNCTUATION,"Expected }")}else if(this.check(n.IDENTIFIER)&&this.peekAhead(1).value!=="from"){e.trace("  Found identifier without opening brace, parsing default import...");const a=this.consume(n.IDENTIFIER,"Expected identifier").value,u=new o(a),p=new o(a);if(s.push(new k(u,p)),e.trace(`  Default import: ${a}`),this.skipComments(),this.isPunctuation(",")&&(e.trace("  Found comma after default import, checking for named imports..."),this.advance(),this.skipComments(),this.isPunctuation("{"))){for(e.trace("  Found opening brace, parsing additional named imports..."),this.advance(),this.skipComments();!this.isPunctuation("}")&&!this.isAtEnd()&&(this.skipComments(),!this.isPunctuation("}"));){if(!this.check(n.IDENTIFIER)){this.advance();continue}const m=this.consume(n.IDENTIFIER,"Expected identifier").value,d=new o(m);let v=d;if(this.skipComments(),this.isKeyword("as")){this.advance(),this.skipComments();const y=this.consume(n.IDENTIFIER,"Expected identifier after as").value;v=new o(y)}if(s.push(new k(d,v)),this.skipComments(),this.isPunctuation(",")){this.advance(),this.skipComments();continue}else break}this.consume(n.PUNCTUATION,"Expected }")}}this.skipComments(),this.consume(n.KEYWORD,"Expected from"),this.skipComments();const i=this.consume(n.STRING,"Expected module path string"),r=new h(i.value,i.value,"string");return e.trace(`  Module path: ${r.value}`),e.trace(`  Total specifiers: ${s.length}`),this.consumeStatementEnd(),e.trace(`[parseImportDeclaration] SUCCESS
-`),new C(s,r,t)}peekAhead(e=1){const t=this.current+e;return t>=this.tokens.length?this.tokens[this.tokens.length-1]:this.tokens[t]}parseClassDeclaration(){const e=x().createComponentLogger("Parser.parseClassDeclaration");e.startSession("parseClassDeclaration"),e.trace(`  Current token: ${this.peek().value} (${this.peek().type})`);const t=this.getLocation(),s=this.consume(n.IDENTIFIER,"Expected class name"),i=new o(s.value);e.trace(`  Class name: ${i.name}`);let r=null;if(this.isKeyword("extends")){this.advance();const d=this.consume(n.IDENTIFIER,"Expected superclass name").value;r=new o(d),e.trace(`  Extends: ${r.name}`),this.isOperator("<")&&(this.advance(),this.consume(n.IDENTIFIER,"Expected type name"),this.consume(n.OPERATOR,"Expected >"))}e.trace("  Looking for opening brace..."),e.trace(`  Current token: ${this.peek().value} (${this.peek().type})`),this.consume(n.PUNCTUATION,"Expected {");const a=[],u=[];e.trace("  Parsing class body...");let p=0;for(;!this.isPunctuation("}")&&!this.isAtEnd()&&(this.skipComments(),!this.isPunctuation("}"));){if(e.trace(`    [item ${p}] Current token: ${this.peek().value} (${this.peek().type})`),this.isPunctuation(";")){e.trace("    Skipping semicolon"),this.advance();continue}if(this.isKeyword("constructor")){e.trace("    Found constructor"),u.push(this.parseMethodDeclaration()),p++;continue}if(this.check(n.IDENTIFIER)){const d=this.current,y=this.peek().value;if(e.trace(`    Found identifier: ${y}`),this.advance(),this.isOperator("=")){e.trace("      -> This is a FIELD (followed by =)"),this.current=d;try{a.push(this.parseFieldDeclaration()),e.trace("      Field parsed successfully"),p++;continue}catch(f){throw console.error(`      ERROR parsing field: ${f.message}`),f}}if(this.isPunctuation("(")){e.trace("      -> This is a METHOD (followed by '(')"),this.current=d;try{u.push(this.parseMethodDeclaration()),e.trace("      Method parsed successfully"),p++;continue}catch(f){throw console.error(`      ERROR parsing method: ${f.message}`),f}}e.trace("      -> Unknown pattern, skipping"),this.advance();continue}e.trace(`    Skipping unknown token: ${this.peek().value}`),this.advance()}e.trace(`  Class body parsing complete. Found ${a.length} fields, ${u.length} methods`),this.consume(n.PUNCTUATION,"Expected }");const m=new O(a,u);return e.trace(`[parseClassDeclaration] SUCCESS
-`),new N(i,r,m,t)}parseMethodDeclaration(){const e=x().createComponentLogger("Parser.parseMethodDeclaration");e.startSession("      [parseMethodDeclaration] STARTING"),e.trace(`        Current: ${this.peek().value}`);const t=this.getLocation();let s;this.isKeyword("constructor")?(s="constructor",this.advance()):s=this.consume(n.IDENTIFIER,"Expected method name").value,e.trace(`        Method name: ${s}`);const i=new o(s);this.consume(n.PUNCTUATION,"Expected (");const r=this.parseParameterList();e.trace(`        Parameters: ${r.length}`),this.consume(n.PUNCTUATION,"Expected )");let a=null;return this.isOperator("=>")?(e.trace("        Arrow function body"),this.advance(),a=this.parseExpression()):this.isPunctuation("{")&&(e.trace("        Block body"),this.advance(),a=this.parseBlock()),e.trace("      [parseMethodDeclaration] SUCCESS"),new A(i,r,a,t)}parseFieldDeclaration(){console.log("      [parseFieldDeclaration] STARTING"),console.log(`        Current: ${this.peek().value}`);const e=this.getLocation(),t=this.consume(n.IDENTIFIER,"Expected field name").value,s=new o(t);console.log(`        Field name: ${t}`);let i=null;if(this.isOperator("=")){console.log("        Found = operator, parsing initializer..."),this.advance();try{i=this.parseExpression(),console.log(`        Initializer parsed: ${i.type}`)}catch(r){throw console.error(`        ERROR parsing initializer: ${r.message}`),r}}return this.consumeStatementEnd(),console.log("      [parseFieldDeclaration] SUCCESS"),new $(s,i,e)}parseFunctionDeclaration(){const e=this.getLocation(),t=this.consume(n.IDENTIFIER,"Expected function name"),s=t.value?new o(t.value):null;this.consume(n.PUNCTUATION,"Expected (");const i=this.parseParameterList();this.consume(n.PUNCTUATION,"Expected )"),this.consume(n.PUNCTUATION,"Expected {");const r=this.parseBlock();return new D(s,i,r,!1,e)}parseParameterList(){const e=[];for(;!this.isPunctuation(")")&&!this.isAtEnd();){const t=this.getLocation();if(this.isPunctuation("{")){for(this.advance();!this.isPunctuation("}")&&!this.isAtEnd();){const s=this.consume(n.IDENTIFIER,"Expected param name").value;let i=null;if(this.isOperator("=")){this.advance();const r=this.peek();this.check(n.IDENTIFIER)?i=new o(this.advance().value):this.check(n.NUMBER)?i=new h(parseFloat(this.advance().value),"","number"):this.check(n.UNDEFINED)?(this.advance(),i=new h(void 0,"undefined","undefined")):this.check(n.NULL)?(this.advance(),i=new h(null,"null","null")):this.isKeyword("undefined")?(this.advance(),i=new h(void 0,"undefined","undefined")):this.isKeyword("null")&&(this.advance(),i=new h(null,"null","null"))}if(e.push(new E(new o(s),i!==null,i,t)),!this.isPunctuation(","))break;this.advance()}if(this.consume(n.PUNCTUATION,"Expected }"),this.isOperator("=")&&(this.advance(),this.isPunctuation("{"))){this.advance();let s=1;for(;s>0&&!this.isAtEnd();)this.isPunctuation("{")?s++:this.isPunctuation("}")&&s--,s>0&&this.advance();this.consume(n.PUNCTUATION,"Expected }")}}else if(this.check(n.IDENTIFIER)){const s=this.consume(n.IDENTIFIER,"Expected param name").value;let i=null;if(this.isOperator("=")){this.advance();const r=this.peek();this.check(n.IDENTIFIER)?i=new o(this.advance().value):this.check(n.NUMBER)?i=new h(parseFloat(this.advance().value),"","number"):this.check(n.UNDEFINED)?(this.advance(),i=new h(void 0,"undefined","undefined")):this.check(n.NULL)?(this.advance(),i=new h(null,"null","null")):this.isKeyword("undefined")?(this.advance(),i=new h(void 0,"undefined","undefined")):this.isKeyword("null")&&(this.advance(),i=new h(null,"null","null"))}e.push(new E(new o(s),i!==null,i,t))}else break;if(!this.isPunctuation(","))break;this.advance()}return e}parseBlock(){console.log(`
-[parseBlock] STARTING at token: ${this.peek().value}`);const e=this.getLocation(),t=[];for(;!this.isPunctuation("}")&&!this.isAtEnd()&&(this.skipComments(),!this.isPunctuation("}"));)if(console.log(`  [parseBlock] Current token: ${this.peek().value} (${this.peek().type})`),this.isKeyword("return")){console.log("    Found RETURN statement"),this.advance();let s=null;if(!this.isPunctuation(";")&&!this.isPunctuation("}")){console.log("    Parsing return argument...");try{s=this.parseExpression(),console.log("    Return argument parsed successfully")}catch(i){for(console.error(`    \u274C ERROR parsing return argument: ${i.message}`),console.error(`       Token was: ${this.peek().value}`);!this.isPunctuation(";")&&!this.isPunctuation("}")&&!this.isAtEnd();)this.advance()}}this.consumeStatementEnd(),t.push(new U(s,e))}else{console.log("    Parsing expression statement...");try{const s=this.parseExpression();console.log(`    Expression parsed successfully: ${s.type}`),this.consumeStatementEnd(),t.push(new w(s,e))}catch(s){for(console.error(`    \u274C ERROR parsing expression: ${s.message}`),console.error(`       Token was: ${this.peek().value}`);!this.isPunctuation(";")&&!this.isPunctuation("}")&&!this.isAtEnd();)this.advance();this.isPunctuation(";")&&this.advance()}}return this.isPunctuation("}")&&this.advance(),console.log(`[parseBlock] SUCCESS - ${t.length} statements
-`),new R(t,e)}parseExpression(){console.log(`    [parseExpression] Current token: ${this.peek().value}`);try{const e=this.parseAssignment();return console.log(`    [parseExpression] \u2713 Success, type: ${e.type}`),e}catch(e){throw console.error(`    [parseExpression] \u2717 Failed: ${e.message}`),e}}parseAssignment(){let e=this.parseTernary();if(this.isOperator("=")){this.advance();const t=this.parseAssignment();return{type:"AssignmentExpression",left:e,right:t}}return e}parseTernary(){let e=this.parseLogicalOr();if(this.isOperator("?")){this.advance();const t=this.parseExpression();this.consume(n.OPERATOR,"Expected :");const s=this.parseExpression();return{type:"ConditionalExpression",test:e,consequent:t,alternate:s}}return e}parseLogicalOr(){let e=this.parseLogicalAnd();for(;this.isOperator("||");){this.advance();const t=this.parseLogicalAnd();e={type:"LogicalExpression",operator:"||",left:e,right:t}}return e}parseLogicalAnd(){let e=this.parseEquality();for(;this.isOperator("&&");){this.advance();const t=this.parseEquality();e={type:"LogicalExpression",operator:"&&",left:e,right:t}}return e}parseEquality(){let e=this.parseRelational();for(;this.isOperator("===")||this.isOperator("!==")||this.isOperator("==")||this.isOperator("!=");){const t=this.advance().value,s=this.parseRelational();e={type:"BinaryExpression",operator:t,left:e,right:s}}return e}parseRelational(){let e=this.parseAdditive();for(;this.isOperator("<")||this.isOperator(">")||this.isOperator("<=")||this.isOperator(">=");){const t=this.advance().value,s=this.parseAdditive();e={type:"BinaryExpression",operator:t,left:e,right:s}}return e}parseAdditive(){let e=this.parseMultiplicative();for(;this.isOperator("+")||this.isOperator("-");){const t=this.advance().value,s=this.parseMultiplicative();e={type:"BinaryExpression",operator:t,left:e,right:s}}return e}parseMultiplicative(){let e=this.parseUnary();for(;this.isOperator("*")||this.isOperator("/")||this.isOperator("%");){const t=this.advance().value,s=this.parseUnary();e={type:"BinaryExpression",operator:t,left:e,right:s}}return e}parseUnary(){if(console.log(`        [parseUnary] Current: ${this.peek().value}`),this.isOperator("!")||this.isOperator("-")||this.isOperator("+")||this.isOperator("~")){const e=this.advance().value,t=this.parseUnary();return{type:"UnaryExpression",operator:e,argument:t}}return console.log("        [parseUnary] Calling parsePostfix"),this.parsePostfix()}parsePostfix(){console.log("        [parsePostfix] Starting, calling parseCall");let e=this.parseCall();for(console.log(`        [parsePostfix] parseCall returned: ${e.type||e.name}`),console.log(`        [parsePostfix] Next token: ${this.peek().value}`);;)if(this.isOperator("++")||this.isOperator("--"))e={type:"UpdateExpression",operator:this.advance().value,argument:e,prefix:!1};else if(this.isPunctuation(".")){console.log("        [parsePostfix] Found . member access"),this.advance();const t=new o(this.consume(n.IDENTIFIER,"Expected property").value);e=new I(e,t,!1),console.log(`        [parsePostfix] Created MemberExpression: ${e.object.name}.${e.property.name}`)}else if(this.isPunctuation("[")){console.log("        [parsePostfix] Found [ computed access"),this.advance();const t=this.parseExpression();this.consume(n.PUNCTUATION,"Expected ]"),e=new I(e,t,!0)}else{console.log(`        [parsePostfix] No more postfix ops, returning ${e.type}`);break}return e}parseCall(){console.log("        [parseCall] Starting, calling parsePrimary");let e=this.parsePrimary();for(console.log(`        [parseCall] parsePrimary returned: ${e.type||e.name}`),console.log(`        [parseCall] Next token: ${this.peek().value} (${this.peek().type})`);this.isPunctuation("(");){console.log("        [parseCall] Found (, parsing function call"),this.advance();const t=this.parseArguments();console.log(`        [parseCall] Parsed ${t.length} arguments`),this.consume(n.PUNCTUATION,"Expected )"),e=new b(e,t),console.log("        [parseCall] Created CallExpression")}return console.log(`        [parseCall] Returning: ${e.type}`),e}parsePrimary(){if(console.log(`      [parsePrimary] Current: ${this.peek().value} (${this.peek().type})`),this.isKeyword("this"))return this.advance(),console.log("      [parsePrimary] \u2713 this keyword"),new o("this");if(this.check(n.STRING)){const e=this.advance();return console.log(`      [parsePrimary] \u2713 string literal: ${e.value}`),new h(e.value,e.value,"string")}if(this.check(n.NUMBER)){const e=this.advance();return console.log(`      [parsePrimary] \u2713 number literal: ${e.value}`),new h(parseFloat(e.value),e.value,"number")}if(this.check(n.BOOLEAN)){const e=this.advance();return console.log(`      [parsePrimary] \u2713 boolean: ${e.value}`),new h(e.value==="true",e.value,"boolean")}if(this.check(n.NULL))return this.advance(),console.log("      [parsePrimary] \u2713 null"),new h(null,"null","null");if(this.check(n.UNDEFINED))return this.advance(),console.log("      [parsePrimary] \u2713 undefined"),new h(void 0,"undefined","undefined");if(this.isKeyword("null"))return this.advance(),console.log("      [parsePrimary] \u2713 null keyword"),new h(null,"null","null");if(this.isKeyword("undefined"))return this.advance(),console.log("      [parsePrimary] \u2713 undefined keyword"),new h(void 0,"undefined","undefined");if(this.isPunctuation("(")){console.log("      [parsePrimary] Found ( - checking for arrow function or grouped expr");const e=this.current;if(this.advance(),this.isPunctuation(")")){const s=this.current+1;if(s<this.tokens.length&&this.tokens[s].type===n.OPERATOR&&this.tokens[s].value==="=>"){console.log("      [parsePrimary] \u2713 arrow function with no params: () => ..."),this.consume(n.PUNCTUATION,"Expected )"),this.consume(n.OPERATOR,"Expected =>");const i=this.parseExpression();return new g([],i)}}const t=this.parseExpression();if(this.consume(n.PUNCTUATION,"Expected )"),this.isOperator("=>")){console.log("      [parsePrimary] \u2713 arrow function: (x) => ..."),this.advance();const s=this.parseExpression();let i=[];return t.type==="Identifier"&&(i=[new E(t,!1,null)]),new g(i,s)}return console.log("      [parsePrimary] \u2713 grouped expression"),t}if(this.isPunctuation("{"))return console.log("      [parsePrimary] \u2713 object literal"),this.advance(),this.parseObjectLiteral();if(this.isPunctuation("[")){console.log("      [parsePrimary] \u2713 array literal"),this.advance();const e=[];for(;!this.isPunctuation("]")&&!this.isAtEnd()&&(e.push(this.parseExpression()),!!this.isPunctuation(","));)this.advance();return this.consume(n.PUNCTUATION,"Expected ]"),{type:"ArrayLiteral",elements:e}}if(this.isKeyword("new")){console.log("      [parsePrimary] \u2713 new expression"),this.advance();const e=new o(this.consume(n.IDENTIFIER,"Expected class name").value);this.consume(n.PUNCTUATION,"Expected (");const t=this.parseArguments();return this.consume(n.PUNCTUATION,"Expected )"),new P(e,t)}if(this.isKeyword("const")){const e=this.current;if(this.advance(),this.isKeyword("new")){console.log("      [parsePrimary] \u2713 const new expression"),this.advance();const t=new o(this.consume(n.IDENTIFIER,"Expected class name").value);this.consume(n.PUNCTUATION,"Expected (");const s=this.parseArguments();this.consume(n.PUNCTUATION,"Expected )");const i=new P(t,s);return i.isConst=!0,i}this.current=e}if(this.check(n.IDENTIFIER)){const e=this.advance(),t=new o(e.value);if(console.log(`      [parsePrimary] \u2713 identifier: ${e.value}`),this.isOperator("=>")){console.log("      [parsePrimary] \u2713 arrow function: x => ..."),this.advance();const s=this.parseExpression();return new g([new E(t)],s)}return t}throw console.error(`      [parsePrimary] \u274C FAILED - Cannot parse token: ${this.peek().value} (${this.peek().type})`),this.error("Expected expression")}enterMethod(e){this.callStack||(this.callStack=[]),this.callStack.push({method:e,line:this.peek().line,column:this.peek().column,token:this.peek().value})}parseObjectLiteral(){this.enterMethod("parseObjectLiteral");const e=[];try{for(;!this.isPunctuation("}")&&!this.isAtEnd();){if(this.isPunctuation(",")){this.advance();continue}let t=null,s=!1;if(this.isPunctuation("["))this.advance(),t=this.parseExpression(),this.consume(n.PUNCTUATION,"Expected ]");else if(this.check(n.IDENTIFIER)){const a=this.advance();t=new o(a.value),(this.isPunctuation(",")||this.isPunctuation("}"))&&(s=!0)}else if(this.check(n.STRING)){const a=this.advance();t=new h(a.value,a.value,"string")}else{this.advance();continue}let i=t;if(!s&&this.isPunctuation(":")){this.advance();try{i=this.parseTernary()}catch(a){for(a.parserError&&this.reportParserError(a.parserError),i=t;!this.isPunctuation(",")&&!this.isPunctuation("}")&&!this.isAtEnd();)this.advance()}}const r=new S(t,i);r.shorthand=s,e.push(r),this.isPunctuation(",")&&this.advance()}return this.isPunctuation("}")&&this.advance(),this.exitMethod("parseObjectLiteral"),new F(e)}catch(t){throw this.exitMethod("parseObjectLiteral"),t}}parseArguments(){const e=[];for(;!this.isPunctuation(")")&&!this.isAtEnd();){try{e.push(this.parseTernary())}catch{break}if(!this.isPunctuation(","))break;this.advance()}return e}check(e){return this.isAtEnd()?!1:this.peek().type===e}consume(e,t=""){if(this.check(e))return this.advance();throw this.error(t||`Expected ${e}`)}consumeStatementEnd(){this.skipComments(),this.isPunctuation(";")&&this.advance(),this.skipComments()}advance(){return this.isAtEnd()||this.current++,this.previous()}peek(){return this.tokens[this.current]}previous(){return this.tokens[this.current-1]}isAtEnd(){return this.peek().type===n.EOF}getLocation(){const e=this.peek();return{line:e.line,column:e.column}}error(e){const t=this.peek(),s=new Error(`Parse error at line ${t.line}, column ${t.column}: ${e}`);return s.parserError={message:`Parse error at line ${t.line}, column ${t.column}: ${e}`,line:t.line,column:t.column,token:{type:t.type,value:t.value},callStack:this.callStack?[...this.callStack]:[]},s}getContext(){const e=Math.max(0,this.current-5),t=Math.min(this.tokens.length,this.current+6);return{before:this.tokens.slice(e,this.current).map(s=>`${s.value}(${s.type})`).join(" "),current:`\u2192 ${this.peek().value}(${this.peek().type}) \u2190`,after:this.tokens.slice(this.current+1,t).map(s=>`${s.value}(${s.type})`).join(" ")}}exitMethod(e){this.callStack||(this.callStack=[]),this.callStack.length>0&&this.callStack[this.callStack.length-1].method===e&&this.callStack.pop()}getTokenContext(){const e=Math.max(0,this.current-5),t=Math.min(this.tokens.length,this.current+6),s=this.tokens.slice(e,this.current).map(r=>`${r.value}`).join(" "),i=this.tokens.slice(this.current+1,t).map(r=>`${r.value}`).join(" ");return{before:s,current:`\u2192 ${this.peek().value} \u2190`,after:i}}synchronize(){for(this.advance();!this.isAtEnd();){if(this.isPunctuation(";")){this.advance();return}if(this.isKeyword("class")||this.isKeyword("function")||this.isKeyword("import"))return;this.advance()}}getErrors(){return this.errors}reportError(e){this.errors.push(e),this.debugMode&&(console.error(`
-\u274C PARSER ERROR DETECTED:
-`),console.error(`Message: ${e.message}
-`),console.error("\u{1F4CD} Token Context:"),console.error(`  Before:  ${e.context.before}`),console.error(`  Current: ${e.context.current}`),console.error(`  After:   ${e.context.after}
-`),console.error("\u{1F4DA} Call Stack (where error came from):"),e.callStack.length===0?console.error(`  (top level)
-`):(e.callStack.forEach((t,s)=>{const i=s===e.callStack.length-1?"\u2192":" ";console.error(`  ${i} ${s+1}. ${t.method}()`),console.error(`     at token: "${t.token}" (line ${t.line}, col ${t.column})`)}),console.error("")))}}export{l as ASTNode,g as ArrowFunctionExpression,R as BlockStatement,b as CallExpression,O as ClassBody,N as ClassDeclaration,w as ExpressionStatement,$ as FieldDeclaration,D as FunctionDeclaration,o as Identifier,C as ImportDeclaration,k as ImportSpecifier,h as Literal,I as MemberExpression,A as MethodDeclaration,P as NewExpression,F as ObjectLiteral,E as Parameter,L as Parser,T as Program,S as Property,U as ReturnStatement};
-//# sourceMappingURL=flutterjs_parser.js.map
diff --git a/packages/flutterjs_engine/src/analyzer/dist/flutterjs_parser.js.map b/packages/flutterjs_engine/src/analyzer/dist/flutterjs_parser.js.map
deleted file mode 100644
index 2a45bee0..00000000
--- a/packages/flutterjs_engine/src/analyzer/dist/flutterjs_parser.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/flutterjs_parser.js"],
-  "sourcesContent": ["/**\n * FlutterJS Parser - Converts tokens to AST (FIXED VERSION)\n * Phase 1.2 MVP Implementation - Complete Fixes\n * \n * Final fix: parseParameterList handles UNDEFINED and NULL token types\n */\n\n\nimport { TokenType } from './lexer.js';\nimport { getLogger } from './flutterjs_logger.js';\n\n// ============================================================================\n// AST NODE CLASSES\n// ============================================================================\n\nclass ASTNode {\n  constructor(type, location) {\n    this.type = type;\n    this.location = location;\n  }\n}\n\nclass Program extends ASTNode {\n  constructor(body = [], location = null) {\n    super('Program', location);\n    this.body = body;\n  }\n}\n\nclass ImportDeclaration extends ASTNode {\n  constructor(specifiers = [], source = null, location = null) {\n    super('ImportDeclaration', location);\n    this.specifiers = specifiers;\n    this.source = source;\n  }\n}\n\nclass ImportSpecifier extends ASTNode {\n  constructor(imported = null, local = null, location = null) {\n    super('ImportSpecifier', location);\n    this.imported = imported;\n    this.local = local;\n  }\n}\n\nclass ClassDeclaration extends ASTNode {\n  constructor(id = null, superClass = null, body = null, location = null) {\n    super('ClassDeclaration', location);\n    this.id = id;\n    this.superClass = superClass;\n    this.body = body;\n  }\n}\n\nclass ClassBody extends ASTNode {\n  constructor(fields = [], methods = [], location = null) {\n    super('ClassBody', location);\n    this.fields = fields;\n    this.methods = methods;\n  }\n}\n\nclass FieldDeclaration extends ASTNode {\n  constructor(key = null, initialValue = null, location = null) {\n    super('FieldDeclaration', location);\n    this.key = key;\n    this.initialValue = initialValue;\n  }\n}\n\nclass MethodDeclaration extends ASTNode {\n  constructor(key = null, params = [], body = null, location = null) {\n    super('MethodDeclaration', location);\n    this.key = key;\n    this.params = params;\n    this.body = body;\n  }\n}\n\nclass Parameter extends ASTNode {\n  constructor(name = null, optional = false, defaultValue = null, location = null) {\n    super('Parameter', location);\n    this.name = name;\n    this.optional = optional;\n    this.defaultValue = defaultValue;\n  }\n}\n\nclass FunctionDeclaration extends ASTNode {\n  constructor(id = null, params = [], body = null, isAsync = false, location = null) {\n    super('FunctionDeclaration', location);\n    this.id = id;\n    this.params = params;\n    this.body = body;\n    this.isAsync = isAsync;\n  }\n}\n\nclass BlockStatement extends ASTNode {\n  constructor(body = [], location = null) {\n    super('BlockStatement', location);\n    this.body = body;\n  }\n}\n\nclass ReturnStatement extends ASTNode {\n  constructor(argument = null, location = null) {\n    super('ReturnStatement', location);\n    this.argument = argument;\n  }\n}\n\nclass ExpressionStatement extends ASTNode {\n  constructor(expression = null, location = null) {\n    super('ExpressionStatement', location);\n    this.expression = expression;\n  }\n}\n\nclass Identifier extends ASTNode {\n  constructor(name = '', location = null) {\n    super('Identifier', location);\n    this.name = name;\n  }\n}\n\nclass Literal extends ASTNode {\n  constructor(value = null, raw = '', type = 'string', location = null) {\n    super('Literal', location);\n    this.value = value;\n    this.raw = raw;\n    this.literalType = type;\n  }\n}\n\nclass CallExpression extends ASTNode {\n  constructor(callee = null, args = [], location = null) {\n    super('CallExpression', location);\n    this.callee = callee;\n    this.args = args;\n  }\n}\n\nclass NewExpression extends ASTNode {\n  constructor(callee = null, args = [], location = null) {\n    super('NewExpression', location);\n    this.callee = callee;\n    this.args = args;\n    this.isConst = false;\n  }\n}\n\nclass ObjectLiteral extends ASTNode {\n  constructor(properties = [], location = null) {\n    super('ObjectLiteral', location);\n    this.properties = properties;\n  }\n}\n\nclass Property extends ASTNode {\n  constructor(key = null, value = null, location = null) {\n    super('Property', location);\n    this.key = key;\n    this.value = value;\n    this.shorthand = false;\n  }\n}\n\nclass ArrowFunctionExpression extends ASTNode {\n  constructor(params = [], body = null, location = null) {\n    super('ArrowFunctionExpression', location);\n    this.params = params;\n    this.body = body;\n  }\n}\n\nclass MemberExpression extends ASTNode {\n  constructor(object = null, property = null, computed = false, location = null) {\n    super('MemberExpression', location);\n    this.object = object;\n    this.property = property;\n    this.computed = computed;\n  }\n}\n\n// ============================================================================\n// PARSER CLASS\n// ============================================================================\n\nclass Parser {\n  constructor(tokens = [], options = {}) {\n    this.tokens = tokens;\n    this.current = 0;\n    this.errors = [];\n    this.options = { strict: false, ...options };\n    // NEW: Call stack tracking\n    this.callStack = [];\n\n    this.debugMode = true;\n  }\n\n  parse() {\n    const body = [];\n\n    while (!this.isAtEnd()) {\n      try {\n        const stmt = this.parseTopLevel();\n        if (stmt && stmt.type === 'ImportDeclaration') {\n          console.log('DEBUG - ImportDeclaration:', JSON.stringify(stmt, null, 2));\n        }\n        if (stmt) {\n          body.push(stmt);\n        }\n      } catch (error) {\n        this.errors.push(error);\n        this.synchronize();\n      }\n    }\n\n    return new Program(body);\n  }\n\n  /**\n * Skip any comment tokens\n * Comments should be transparent to the parser\n */\n  skipComments() {\n    while (!this.isAtEnd() && this.check(TokenType.COMMENT)) {\n      this.advance();\n    }\n  }\n\n  /**\n   * Check if token is a comment\n   */\n  isComment() {\n    if (this.isAtEnd()) return false;\n    return this.peek().type === TokenType.COMMENT;\n  }\n\n\n  parseTopLevel() {\n    this.skipComments();  // \u2190 ADD THIS LINE\n\n    if (this.isAtEnd()) return null;\n\n    if (this.isKeyword('import')) {\n      this.advance();\n      return this.parseImportDeclaration();\n    }\n\n    if (this.isKeyword('class')) {\n      this.advance();\n      return this.parseClassDeclaration();\n    }\n\n    if (this.isKeyword('function')) {\n      this.advance();\n      return this.parseFunctionDeclaration();\n    }\n\n    const expr = this.parseExpression();\n    this.consumeStatementEnd();\n    return new ExpressionStatement(expr, this.getLocation());\n  }\n  isKeyword(value) {\n    if (this.isAtEnd()) return false;\n    const token = this.peek();\n    return token.type === TokenType.KEYWORD && token.value === value;\n  }\n\n  isPunctuation(value) {\n    if (this.isAtEnd()) return false;\n    const token = this.peek();\n    return token.type === TokenType.PUNCTUATION && token.value === value;\n  }\n\n  isOperator(value) {\n    if (this.isAtEnd()) return false;\n    const token = this.peek();\n    return token.type === TokenType.OPERATOR && token.value === value;\n  }\n\n  /**\n * FIXED: parseImportDeclaration() in flutterjs_parser.js\n * Handles multi-line imports with comments and proper spacing\n * \n * Replace the entire parseImportDeclaration() method with this version\n */\n\n  parseImportDeclaration() {\n    const logger = getLogger().createComponentLogger('Parser.parseImportDeclaration');\n    logger.startSession('parseImportDeclaration');\n\n    const startLocation = this.getLocation();\n    const specifiers = [];\n\n    logger.trace(`  Starting import parse at token: ${this.peek().value}`);\n\n    // Case 1: Named imports { x, y, z }\n    if (this.isPunctuation('{')) {\n      logger.trace(`  Found opening brace, parsing named imports...`);\n      this.advance();\n\n      // \u2705 FIX #1: Skip comments right after opening brace\n      this.skipComments();\n\n      while (!this.isPunctuation('}') && !this.isAtEnd()) {\n        // \u2705 FIX #2: Skip comments before checking for closing brace\n        this.skipComments();\n\n        // Check if we hit the closing brace (after skipping comments)\n        if (this.isPunctuation('}')) {\n          logger.trace(`  Found closing brace, exiting loop`);\n          break;\n        }\n\n        // Expect an identifier\n        if (!this.check(TokenType.IDENTIFIER)) {\n          logger.warn(`  Expected identifier but got: ${this.peek().value}`);\n          this.advance();\n          continue;\n        }\n\n        // Get the imported name\n        const importedName = this.consume(TokenType.IDENTIFIER, 'Expected identifier').value;\n        const imported = new Identifier(importedName);\n        logger.trace(`    Imported: ${importedName}`);\n\n        let local = imported; // Default: local name = imported name\n\n        // \u2705 FIX #3: Skip comments before checking for 'as'\n        this.skipComments();\n\n        // Check for 'as' alias\n        if (this.isKeyword('as')) {\n          logger.trace(`    Found 'as' keyword`);\n          this.advance();\n\n          // \u2705 FIX #4: Skip comments after 'as'\n          this.skipComments();\n\n          const localName = this.consume(TokenType.IDENTIFIER, 'Expected identifier after as').value;\n          local = new Identifier(localName);\n          logger.trace(`      Local name: ${localName}`);\n        }\n\n        // Add specifier to list\n        specifiers.push(new ImportSpecifier(imported, local));\n\n        // \u2705 FIX #5: Skip comments before checking for comma\n        this.skipComments();\n\n        // Check for comma separator\n        if (this.isPunctuation(',')) {\n          logger.trace(`    Found comma, continuing...`);\n          this.advance();\n\n          // \u2705 FIX #6: Skip comments after comma\n          this.skipComments();\n\n          // Continue to next item\n          continue;\n        } else {\n          logger.trace(`    No comma, expected closing brace next`);\n          // No more items, should see closing brace\n          break;\n        }\n      }\n\n      logger.trace(`  Parsed ${specifiers.length} named imports`);\n\n      // Consume closing brace\n      this.consume(TokenType.PUNCTUATION, 'Expected }');\n    }\n\n    // Case 2: Default import or default + named\n    // import MyDefault from 'module'\n    // import MyDefault, { x, y } from 'module'\n    else if (this.check(TokenType.IDENTIFIER) && this.peekAhead(1).value !== 'from') {\n      logger.trace(`  Found identifier without opening brace, parsing default import...`);\n\n      const defaultName = this.consume(TokenType.IDENTIFIER, 'Expected identifier').value;\n      const imported = new Identifier(defaultName);\n      const local = new Identifier(defaultName);\n      specifiers.push(new ImportSpecifier(imported, local));\n\n      logger.trace(`  Default import: ${defaultName}`);\n\n      // Check for comma and additional named imports\n      this.skipComments();\n      if (this.isPunctuation(',')) {\n        logger.trace(`  Found comma after default import, checking for named imports...`);\n        this.advance();\n\n        this.skipComments();\n        if (this.isPunctuation('{')) {\n          logger.trace(`  Found opening brace, parsing additional named imports...`);\n          this.advance();\n\n          this.skipComments();\n          while (!this.isPunctuation('}') && !this.isAtEnd()) {\n            this.skipComments();\n\n            if (this.isPunctuation('}')) break;\n\n            if (!this.check(TokenType.IDENTIFIER)) {\n              this.advance();\n              continue;\n            }\n\n            const name = this.consume(TokenType.IDENTIFIER, 'Expected identifier').value;\n            const imported2 = new Identifier(name);\n            let local2 = imported2;\n\n            this.skipComments();\n\n            if (this.isKeyword('as')) {\n              this.advance();\n              this.skipComments();\n              const localName = this.consume(TokenType.IDENTIFIER, 'Expected identifier after as').value;\n              local2 = new Identifier(localName);\n            }\n\n            specifiers.push(new ImportSpecifier(imported2, local2));\n\n            this.skipComments();\n\n            if (this.isPunctuation(',')) {\n              this.advance();\n              this.skipComments();\n              continue;\n            } else {\n              break;\n            }\n          }\n\n          this.consume(TokenType.PUNCTUATION, 'Expected }');\n        }\n      }\n    }\n\n    // \u2705 FIX #7: Skip comments before 'from'\n    this.skipComments();\n\n    // Consume 'from' keyword\n    this.consume(TokenType.KEYWORD, 'Expected from');\n\n    // \u2705 FIX #8: Skip comments before module path string\n    this.skipComments();\n\n    // Get the module/source path\n    const modulePathToken = this.consume(TokenType.STRING, 'Expected module path string');\n    const source = new Literal(\n      modulePathToken.value,\n      modulePathToken.value,\n      'string'\n    );\n\n    logger.trace(`  Module path: ${source.value}`);\n    logger.trace(`  Total specifiers: ${specifiers.length}`);\n\n    // \u2705 FIX #9: Consume statement end (handles semicolon and trailing comments)\n    this.consumeStatementEnd();\n\n    logger.trace(`[parseImportDeclaration] SUCCESS\\n`);\n    return new ImportDeclaration(specifiers, source, startLocation);\n  }\n\n  /**\n   * Helper method: Check if lookahead token matches (needed for peekAhead)\n   * Add this if not already present\n   */\n  peekAhead(n = 1) {\n    const pos = this.current + n;\n    if (pos >= this.tokens.length) {\n      return this.tokens[this.tokens.length - 1];\n    }\n    return this.tokens[pos];\n  }\n\n  parseClassDeclaration() {\n    const logger = getLogger().createComponentLogger('Parser.parseClassDeclaration');\n    logger.startSession('parseClassDeclaration');\n    logger.trace(`  Current token: ${this.peek().value} (${this.peek().type})`);\n\n    const startLocation = this.getLocation();\n    const nameToken = this.consume(TokenType.IDENTIFIER, 'Expected class name');\n    const name = new Identifier(nameToken.value);\n    logger.trace(`  Class name: ${name.name}`);\n\n    let superClass = null;\n    if (this.isKeyword('extends')) {\n      this.advance();\n      const superName = this.consume(TokenType.IDENTIFIER, 'Expected superclass name').value;\n      superClass = new Identifier(superName);\n      logger.trace(`  Extends: ${superClass.name}`);\n\n      // Skip generic type parameters like <MyCounter>\n      if (this.isOperator('<')) {\n        this.advance();\n        this.consume(TokenType.IDENTIFIER, 'Expected type name');\n        this.consume(TokenType.OPERATOR, 'Expected >');\n      }\n    }\n\n    logger.trace(`  Looking for opening brace...`);\n    logger.trace(`  Current token: ${this.peek().value} (${this.peek().type})`);\n    this.consume(TokenType.PUNCTUATION, 'Expected {');\n\n    const fields = [];\n    const methods = [];\n\n    logger.trace(`  Parsing class body...`);\n    let itemCount = 0;\n\n    while (!this.isPunctuation('}') && !this.isAtEnd()) {\n      this.skipComments();  // \u2190 ADD THIS LINE - skip comments in class body\n\n      if (this.isPunctuation('}')) break;  // Check again after skipping comments\n\n      logger.trace(`    [item ${itemCount}] Current token: ${this.peek().value} (${this.peek().type})`);\n\n      // Skip semicolons\n      if (this.isPunctuation(';')) {\n        logger.trace(`    Skipping semicolon`);\n        this.advance();\n        continue;\n      }\n\n      // Check for constructor (always a method)\n      if (this.isKeyword('constructor')) {\n        logger.trace(`    Found constructor`);\n        methods.push(this.parseMethodDeclaration());\n        itemCount++;\n        continue;\n      }\n\n      // Check for field or method\n      if (this.check(TokenType.IDENTIFIER)) {\n        const currentPos = this.current;\n        const idToken = this.peek();\n        const fieldName = idToken.value;\n        logger.trace(`    Found identifier: ${fieldName}`);\n        this.advance();\n\n        // CASE 1: Field initializer - IDENTIFIER = value\n        if (this.isOperator('=')) {\n          logger.trace(`      -> This is a FIELD (followed by =)`);\n          this.current = currentPos; // Rewind\n          try {\n            fields.push(this.parseFieldDeclaration());\n            logger.trace(`      Field parsed successfully`);\n            itemCount++;\n            continue;\n          } catch (e) {\n            console.error(`      ERROR parsing field: ${e.message}`);\n            throw e;\n          }\n        }\n\n        // CASE 2: Method - IDENTIFIER ( params )\n        if (this.isPunctuation('(')) {\n          logger.trace(`      -> This is a METHOD (followed by '(')`);\n          this.current = currentPos; // Rewind\n          try {\n            methods.push(this.parseMethodDeclaration());\n            logger.trace(`      Method parsed successfully`);\n            itemCount++;\n            continue;\n          } catch (e) {\n            console.error(`      ERROR parsing method: ${e.message}`);\n            throw e;\n          }\n        }\n\n        logger.trace(`      -> Unknown pattern, skipping`);\n        this.advance();\n        continue;\n      }\n\n      // Skip unknown tokens\n      logger.trace(`    Skipping unknown token: ${this.peek().value}`);\n      this.advance();\n    }\n\n    logger.trace(`  Class body parsing complete. Found ${fields.length} fields, ${methods.length} methods`);\n\n    this.consume(TokenType.PUNCTUATION, 'Expected }');\n    const body = new ClassBody(fields, methods);\n    logger.trace(`[parseClassDeclaration] SUCCESS\\n`);\n    return new ClassDeclaration(name, superClass, body, startLocation);\n  }\n\n\n  parseMethodDeclaration() {\n    const logger = getLogger().createComponentLogger('Parser.parseMethodDeclaration');\n    logger.startSession(`      [parseMethodDeclaration] STARTING`);\n    logger.trace(`        Current: ${this.peek().value}`);\n\n    const startLocation = this.getLocation();\n\n    let methodName;\n    if (this.isKeyword('constructor')) {\n      methodName = 'constructor';\n      this.advance();\n    } else {\n      methodName = this.consume(TokenType.IDENTIFIER, 'Expected method name').value;\n    }\n\n    logger.trace(`        Method name: ${methodName}`);\n    const key = new Identifier(methodName);\n\n    this.consume(TokenType.PUNCTUATION, 'Expected (');\n    const params = this.parseParameterList();\n    logger.trace(`        Parameters: ${params.length}`);\n    this.consume(TokenType.PUNCTUATION, 'Expected )');\n\n    let body = null;\n    if (this.isOperator('=>')) {\n      logger.trace(`        Arrow function body`);\n      this.advance();\n      body = this.parseExpression();\n    } else if (this.isPunctuation('{')) {\n      logger.trace(`        Block body`);\n      this.advance();\n      body = this.parseBlock();\n    }\n\n    logger.trace(`      [parseMethodDeclaration] SUCCESS`);\n    return new MethodDeclaration(key, params, body, startLocation);\n  }\n  parseFieldDeclaration() {\n    console.log(`      [parseFieldDeclaration] STARTING`);\n    console.log(`        Current: ${this.peek().value}`);\n\n    const startLocation = this.getLocation();\n    const fieldName = this.consume(TokenType.IDENTIFIER, 'Expected field name').value;\n    const key = new Identifier(fieldName);\n    console.log(`        Field name: ${fieldName}`);\n\n    let initialValue = null;\n    if (this.isOperator('=')) {\n      console.log(`        Found = operator, parsing initializer...`);\n      this.advance();\n      try {\n        initialValue = this.parseExpression();\n        console.log(`        Initializer parsed: ${initialValue.type}`);\n      } catch (e) {\n        console.error(`        ERROR parsing initializer: ${e.message}`);\n        throw e;\n      }\n    }\n\n    this.consumeStatementEnd();\n    console.log(`      [parseFieldDeclaration] SUCCESS`);\n    return new FieldDeclaration(key, initialValue, startLocation);\n  }\n\n  parseFunctionDeclaration() {\n    const startLocation = this.getLocation();\n    const nameToken = this.consume(TokenType.IDENTIFIER, 'Expected function name');\n    const name = nameToken.value ? new Identifier(nameToken.value) : null;\n\n    this.consume(TokenType.PUNCTUATION, 'Expected (');\n    const params = this.parseParameterList();\n    this.consume(TokenType.PUNCTUATION, 'Expected )');\n\n    this.consume(TokenType.PUNCTUATION, 'Expected {');\n    const body = this.parseBlock();\n\n    return new FunctionDeclaration(name, params, body, false, startLocation);\n  }\n\n  /**\n   * Parse parameter list - FIXED to handle UNDEFINED and NULL token types\n   */\n  parseParameterList() {\n    const params = [];\n\n    while (!this.isPunctuation(')') && !this.isAtEnd()) {\n      const paramLocation = this.getLocation();\n\n      // Handle destructuring: { key = value }\n      if (this.isPunctuation('{')) {\n        this.advance();\n        while (!this.isPunctuation('}') && !this.isAtEnd()) {\n          const paramName = this.consume(TokenType.IDENTIFIER, 'Expected param name').value;\n          let defaultValue = null;\n\n          if (this.isOperator('=')) {\n            this.advance();\n            // FIXED: Check token type, not just keywords\n            const token = this.peek();\n\n            if (this.check(TokenType.IDENTIFIER)) {\n              defaultValue = new Identifier(this.advance().value);\n            } else if (this.check(TokenType.NUMBER)) {\n              defaultValue = new Literal(parseFloat(this.advance().value), '', 'number');\n            } else if (this.check(TokenType.UNDEFINED)) {\n              // FIXED: Handle UNDEFINED token type\n              this.advance();\n              defaultValue = new Literal(undefined, 'undefined', 'undefined');\n            } else if (this.check(TokenType.NULL)) {\n              // FIXED: Handle NULL token type\n              this.advance();\n              defaultValue = new Literal(null, 'null', 'null');\n            } else if (this.isKeyword('undefined')) {\n              this.advance();\n              defaultValue = new Literal(undefined, 'undefined', 'undefined');\n            } else if (this.isKeyword('null')) {\n              this.advance();\n              defaultValue = new Literal(null, 'null', 'null');\n            }\n          }\n\n          params.push(new Parameter(new Identifier(paramName), defaultValue !== null, defaultValue, paramLocation));\n\n          if (!this.isPunctuation(',')) break;\n          this.advance();\n        }\n        this.consume(TokenType.PUNCTUATION, 'Expected }');\n\n        // Handle = {} after destructuring\n        if (this.isOperator('=')) {\n          this.advance();\n          if (this.isPunctuation('{')) {\n            this.advance();\n            let braceDepth = 1;\n            while (braceDepth > 0 && !this.isAtEnd()) {\n              if (this.isPunctuation('{')) braceDepth++;\n              else if (this.isPunctuation('}')) braceDepth--;\n              if (braceDepth > 0) this.advance();\n            }\n            this.consume(TokenType.PUNCTUATION, 'Expected }');\n          }\n        }\n      } else if (this.check(TokenType.IDENTIFIER)) {\n        // Regular parameter\n        const paramName = this.consume(TokenType.IDENTIFIER, 'Expected param name').value;\n        let defaultValue = null;\n\n        if (this.isOperator('=')) {\n          this.advance();\n          const token = this.peek();\n\n          if (this.check(TokenType.IDENTIFIER)) {\n            defaultValue = new Identifier(this.advance().value);\n          } else if (this.check(TokenType.NUMBER)) {\n            defaultValue = new Literal(parseFloat(this.advance().value), '', 'number');\n          } else if (this.check(TokenType.UNDEFINED)) {\n            this.advance();\n            defaultValue = new Literal(undefined, 'undefined', 'undefined');\n          } else if (this.check(TokenType.NULL)) {\n            this.advance();\n            defaultValue = new Literal(null, 'null', 'null');\n          } else if (this.isKeyword('undefined')) {\n            this.advance();\n            defaultValue = new Literal(undefined, 'undefined', 'undefined');\n          } else if (this.isKeyword('null')) {\n            this.advance();\n            defaultValue = new Literal(null, 'null', 'null');\n          }\n        }\n\n        params.push(new Parameter(new Identifier(paramName), defaultValue !== null, defaultValue, paramLocation));\n      } else {\n        break;\n      }\n\n      if (!this.isPunctuation(',')) break;\n      this.advance();\n    }\n\n    return params;\n  }\n\n  parseBlock() {\n    console.log(`\\n[parseBlock] STARTING at token: ${this.peek().value}`);\n\n    const startLocation = this.getLocation();\n    const statements = [];\n\n    while (!this.isPunctuation('}') && !this.isAtEnd()) {\n      this.skipComments();  // \u2190 ADD THIS LINE - skip comments in block\n\n      if (this.isPunctuation('}')) break;  // Check again after skipping\n\n      console.log(`  [parseBlock] Current token: ${this.peek().value} (${this.peek().type})`);\n\n      if (this.isKeyword('return')) {\n        console.log(`    Found RETURN statement`);\n        this.advance();\n        let argument = null;\n\n        if (!this.isPunctuation(';') && !this.isPunctuation('}')) {\n          console.log(`    Parsing return argument...`);\n          try {\n            argument = this.parseExpression();\n            console.log(`    Return argument parsed successfully`);\n          } catch (error) {\n            console.error(`    \u274C ERROR parsing return argument: ${error.message}`);\n            console.error(`       Token was: ${this.peek().value}`);\n\n            // Skip to semicolon\n            while (!this.isPunctuation(';') && !this.isPunctuation('}') && !this.isAtEnd()) {\n              this.advance();\n            }\n          }\n        }\n\n        this.consumeStatementEnd();\n        statements.push(new ReturnStatement(argument, startLocation));\n\n      } else {\n        console.log(`    Parsing expression statement...`);\n        try {\n          const expr = this.parseExpression();\n          console.log(`    Expression parsed successfully: ${expr.type}`);\n          this.consumeStatementEnd();\n          statements.push(new ExpressionStatement(expr, startLocation));\n        } catch (error) {\n          console.error(`    \u274C ERROR parsing expression: ${error.message}`);\n          console.error(`       Token was: ${this.peek().value}`);\n\n          // Skip to next statement\n          while (!this.isPunctuation(';') && !this.isPunctuation('}') && !this.isAtEnd()) {\n            this.advance();\n          }\n          if (this.isPunctuation(';')) {\n            this.advance();\n          }\n        }\n      }\n    }\n\n    if (this.isPunctuation('}')) {\n      this.advance();\n    }\n\n    console.log(`[parseBlock] SUCCESS - ${statements.length} statements\\n`);\n    return new BlockStatement(statements, startLocation);\n  }\n\n  parseExpression() {\n    console.log(`    [parseExpression] Current token: ${this.peek().value}`);\n    try {\n      const result = this.parseAssignment();\n      console.log(`    [parseExpression] \u2713 Success, type: ${result.type}`);\n      return result;\n    } catch (e) {\n      console.error(`    [parseExpression] \u2717 Failed: ${e.message}`);\n      throw e;\n    }\n  }\n\n  parseAssignment() {\n    let expr = this.parseTernary();\n\n    if (this.isOperator('=')) {\n      this.advance();\n      const value = this.parseAssignment();\n      return { type: 'AssignmentExpression', left: expr, right: value };\n    }\n\n    return expr;\n  }\n\n  parseTernary() {\n    let expr = this.parseLogicalOr();\n\n    if (this.isOperator('?')) {\n      this.advance();\n      const consequent = this.parseExpression();\n      this.consume(TokenType.OPERATOR, 'Expected :');\n      const alternate = this.parseExpression();\n      return { type: 'ConditionalExpression', test: expr, consequent, alternate };\n    }\n\n    return expr;\n  }\n\n  parseLogicalOr() {\n    let expr = this.parseLogicalAnd();\n\n    while (this.isOperator('||')) {\n      this.advance();\n      const right = this.parseLogicalAnd();\n      expr = { type: 'LogicalExpression', operator: '||', left: expr, right };\n    }\n\n    return expr;\n  }\n\n  parseLogicalAnd() {\n    let expr = this.parseEquality();\n\n    while (this.isOperator('&&')) {\n      this.advance();\n      const right = this.parseEquality();\n      expr = { type: 'LogicalExpression', operator: '&&', left: expr, right };\n    }\n\n    return expr;\n  }\n\n  parseEquality() {\n    let expr = this.parseRelational();\n\n    while (this.isOperator('===') || this.isOperator('!==') || this.isOperator('==') || this.isOperator('!=')) {\n      const operator = this.advance().value;\n      const right = this.parseRelational();\n      expr = { type: 'BinaryExpression', operator, left: expr, right };\n    }\n\n    return expr;\n  }\n\n  parseRelational() {\n    let expr = this.parseAdditive();\n\n    while (this.isOperator('<') || this.isOperator('>') || this.isOperator('<=') || this.isOperator('>=')) {\n      const operator = this.advance().value;\n      const right = this.parseAdditive();\n      expr = { type: 'BinaryExpression', operator, left: expr, right };\n    }\n\n    return expr;\n  }\n\n  parseAdditive() {\n    let expr = this.parseMultiplicative();\n\n    while (this.isOperator('+') || this.isOperator('-')) {\n      const operator = this.advance().value;\n      const right = this.parseMultiplicative();\n      expr = { type: 'BinaryExpression', operator, left: expr, right };\n    }\n\n    return expr;\n  }\n\n  parseMultiplicative() {\n    let expr = this.parseUnary();\n\n    while (this.isOperator('*') || this.isOperator('/') || this.isOperator('%')) {\n      const operator = this.advance().value;\n      const right = this.parseUnary();\n      expr = { type: 'BinaryExpression', operator, left: expr, right };\n    }\n\n    return expr;\n  }\n\n  parseUnary() {\n    console.log(`        [parseUnary] Current: ${this.peek().value}`);\n\n    if (this.isOperator('!') || this.isOperator('-') || this.isOperator('+') || this.isOperator('~')) {\n      const operator = this.advance().value;\n      const expr = this.parseUnary();\n      return { type: 'UnaryExpression', operator, argument: expr };\n    }\n\n\n    console.log(`        [parseUnary] Calling parsePostfix`);\n    return this.parsePostfix();\n  }\n\n  parsePostfix() {\n    console.log(`        [parsePostfix] Starting, calling parseCall`);\n    let expr = this.parseCall();\n    console.log(`        [parsePostfix] parseCall returned: ${expr.type || expr.name}`);\n    console.log(`        [parsePostfix] Next token: ${this.peek().value}`);\n\n    while (true) {\n      if (this.isOperator('++') || this.isOperator('--')) {\n        const operator = this.advance().value;\n        expr = { type: 'UpdateExpression', operator, argument: expr, prefix: false };\n      } else if (this.isPunctuation('.')) {\n        console.log(`        [parsePostfix] Found . member access`);\n        this.advance();\n        const property = new Identifier(this.consume(TokenType.IDENTIFIER, 'Expected property').value);\n        expr = new MemberExpression(expr, property, false);\n        console.log(`        [parsePostfix] Created MemberExpression: ${expr.object.name}.${expr.property.name}`);\n      } else if (this.isPunctuation('[')) {\n        console.log(`        [parsePostfix] Found [ computed access`);\n        this.advance();\n        const property = this.parseExpression();\n        this.consume(TokenType.PUNCTUATION, 'Expected ]');\n        expr = new MemberExpression(expr, property, true);\n      } else {\n        console.log(`        [parsePostfix] No more postfix ops, returning ${expr.type}`);\n        break;\n      }\n    }\n\n    return expr;\n  }\n\n\n  parseCall() {\n    console.log(`        [parseCall] Starting, calling parsePrimary`);\n    let expr = this.parsePrimary();\n    console.log(`        [parseCall] parsePrimary returned: ${expr.type || expr.name}`);\n    console.log(`        [parseCall] Next token: ${this.peek().value} (${this.peek().type})`);\n\n    while (this.isPunctuation('(')) {\n      console.log(`        [parseCall] Found (, parsing function call`);\n      this.advance();\n      const args = this.parseArguments();\n      console.log(`        [parseCall] Parsed ${args.length} arguments`);\n      this.consume(TokenType.PUNCTUATION, 'Expected )');\n      expr = new CallExpression(expr, args);\n      console.log(`        [parseCall] Created CallExpression`);\n    }\n\n    console.log(`        [parseCall] Returning: ${expr.type}`);\n    return expr;\n  }\n\n  parsePrimary() {\n    console.log(`      [parsePrimary] Current: ${this.peek().value} (${this.peek().type})`);\n\n    // Handle 'this' keyword FIRST\n    if (this.isKeyword('this')) {\n      this.advance();\n      console.log(`      [parsePrimary] \u2713 this keyword`);\n      return new Identifier('this');\n    }\n\n    if (this.check(TokenType.STRING)) {\n      const token = this.advance();\n      console.log(`      [parsePrimary] \u2713 string literal: ${token.value}`);\n      return new Literal(token.value, token.value, 'string');\n    }\n\n    if (this.check(TokenType.NUMBER)) {\n      const token = this.advance();\n      console.log(`      [parsePrimary] \u2713 number literal: ${token.value}`);\n      return new Literal(parseFloat(token.value), token.value, 'number');\n    }\n\n    if (this.check(TokenType.BOOLEAN)) {\n      const token = this.advance();\n      console.log(`      [parsePrimary] \u2713 boolean: ${token.value}`);\n      return new Literal(token.value === 'true', token.value, 'boolean');\n    }\n\n    if (this.check(TokenType.NULL)) {\n      this.advance();\n      console.log(`      [parsePrimary] \u2713 null`);\n      return new Literal(null, 'null', 'null');\n    }\n\n    if (this.check(TokenType.UNDEFINED)) {\n      this.advance();\n      console.log(`      [parsePrimary] \u2713 undefined`);\n      return new Literal(undefined, 'undefined', 'undefined');\n    }\n\n    if (this.isKeyword('null')) {\n      this.advance();\n      console.log(`      [parsePrimary] \u2713 null keyword`);\n      return new Literal(null, 'null', 'null');\n    }\n\n    if (this.isKeyword('undefined')) {\n      this.advance();\n      console.log(`      [parsePrimary] \u2713 undefined keyword`);\n      return new Literal(undefined, 'undefined', 'undefined');\n    }\n\n    if (this.isPunctuation('(')) {\n      console.log(`      [parsePrimary] Found ( - checking for arrow function or grouped expr`);\n      const savedPos = this.current;\n      this.advance();\n\n      if (this.isPunctuation(')')) {\n        const nextPos = this.current + 1;\n        if (nextPos < this.tokens.length &&\n          this.tokens[nextPos].type === TokenType.OPERATOR &&\n          this.tokens[nextPos].value === '=>') {\n          console.log(`      [parsePrimary] \u2713 arrow function with no params: () => ...`);\n          this.consume(TokenType.PUNCTUATION, 'Expected )');\n          this.consume(TokenType.OPERATOR, 'Expected =>');\n          const body = this.parseExpression();\n          return new ArrowFunctionExpression([], body);\n        }\n      }\n\n      const expr = this.parseExpression();\n      this.consume(TokenType.PUNCTUATION, 'Expected )');\n\n      if (this.isOperator('=>')) {\n        console.log(`      [parsePrimary] \u2713 arrow function: (x) => ...`);\n        this.advance();\n        const body = this.parseExpression();\n        let params = [];\n        if (expr.type === 'Identifier') {\n          params = [new Parameter(expr, false, null)];\n        }\n        return new ArrowFunctionExpression(params, body);\n      }\n\n      console.log(`      [parsePrimary] \u2713 grouped expression`);\n      return expr;\n    }\n\n    if (this.isPunctuation('{')) {\n      console.log(`      [parsePrimary] \u2713 object literal`);\n      this.advance();\n      return this.parseObjectLiteral();\n    }\n\n    if (this.isPunctuation('[')) {\n      console.log(`      [parsePrimary] \u2713 array literal`);\n      this.advance();\n      const elements = [];\n      while (!this.isPunctuation(']') && !this.isAtEnd()) {\n        elements.push(this.parseExpression());\n        if (!this.isPunctuation(',')) break;\n        this.advance();\n      }\n      this.consume(TokenType.PUNCTUATION, 'Expected ]');\n      return { type: 'ArrayLiteral', elements };\n    }\n\n    if (this.isKeyword('new')) {\n      console.log(`      [parsePrimary] \u2713 new expression`);\n      this.advance();\n      const callee = new Identifier(this.consume(TokenType.IDENTIFIER, 'Expected class name').value);\n      this.consume(TokenType.PUNCTUATION, 'Expected (');\n      const args = this.parseArguments();\n      this.consume(TokenType.PUNCTUATION, 'Expected )');\n      return new NewExpression(callee, args);\n    }\n\n    if (this.isKeyword('const')) {\n      const savedPos = this.current;\n      this.advance();\n      if (this.isKeyword('new')) {\n        console.log(`      [parsePrimary] \u2713 const new expression`);\n        this.advance();\n        const callee = new Identifier(this.consume(TokenType.IDENTIFIER, 'Expected class name').value);\n        this.consume(TokenType.PUNCTUATION, 'Expected (');\n        const args = this.parseArguments();\n        this.consume(TokenType.PUNCTUATION, 'Expected )');\n        const expr = new NewExpression(callee, args);\n        expr.isConst = true;\n        return expr;\n      }\n      this.current = savedPos;\n    }\n\n    if (this.check(TokenType.IDENTIFIER)) {\n      const token = this.advance();\n      const ident = new Identifier(token.value);\n      console.log(`      [parsePrimary] \u2713 identifier: ${token.value}`);\n\n      if (this.isOperator('=>')) {\n        console.log(`      [parsePrimary] \u2713 arrow function: x => ...`);\n        this.advance();\n        const body = this.parseExpression();\n        return new ArrowFunctionExpression([new Parameter(ident)], body);\n      }\n\n      return ident;\n    }\n\n    // If we get here, we couldn't parse anything\n    console.error(`      [parsePrimary] \u274C FAILED - Cannot parse token: ${this.peek().value} (${this.peek().type})`);\n    throw this.error('Expected expression');\n  }\n\n\n  enterMethod(methodName) {\n    if (!this.callStack) this.callStack = [];\n    this.callStack.push({\n      method: methodName,\n      line: this.peek().line,\n      column: this.peek().column,\n      token: this.peek().value,\n    });\n  }\n\n  parseObjectLiteral() {\n    this.enterMethod('parseObjectLiteral');\n    const properties = [];\n\n    try {\n      while (!this.isPunctuation('}') && !this.isAtEnd()) {\n        if (this.isPunctuation(',')) {\n          this.advance();\n          continue;\n        }\n\n        let key = null;\n        let shorthand = false;\n\n        if (this.isPunctuation('[')) {\n          this.advance();\n          key = this.parseExpression();\n          this.consume(TokenType.PUNCTUATION, 'Expected ]');\n        } else if (this.check(TokenType.IDENTIFIER)) {\n          const token = this.advance();\n          key = new Identifier(token.value);\n\n          if (this.isPunctuation(',') || this.isPunctuation('}')) {\n            shorthand = true;\n          }\n        } else if (this.check(TokenType.STRING)) {\n          const token = this.advance();\n          key = new Literal(token.value, token.value, 'string');\n        } else {\n          this.advance();\n          continue;\n        }\n\n        let value = key;\n        if (!shorthand && this.isPunctuation(':')) {\n          this.advance();\n\n          try {\n            value = this.parseTernary();\n          } catch (error) {\n            if (error.parserError) {\n              this.reportParserError(error.parserError);\n            }\n            value = key;\n\n            while (!this.isPunctuation(',') && !this.isPunctuation('}') && !this.isAtEnd()) {\n              this.advance();\n            }\n          }\n        }\n\n        const prop = new Property(key, value);\n        prop.shorthand = shorthand;\n        properties.push(prop);\n\n        if (this.isPunctuation(',')) {\n          this.advance();\n        }\n      }\n\n      if (this.isPunctuation('}')) {\n        this.advance();\n      }\n\n      this.exitMethod('parseObjectLiteral');\n      return new ObjectLiteral(properties);\n    } catch (e) {\n      this.exitMethod('parseObjectLiteral');\n      throw e;\n    }\n  }\n  parseArguments() {\n    const args = [];\n\n    while (!this.isPunctuation(')') && !this.isAtEnd()) {\n      try {\n        // \u2B50 KEY FIX: Use parseTernary() instead of parseLogicalOr()\n        // This allows all operators except assignment\n        args.push(this.parseTernary());\n      } catch (error) {\n        break;\n      }\n\n      if (!this.isPunctuation(',')) break;\n      this.advance();\n    }\n\n    return args;\n  }\n\n  check(type) {\n    if (this.isAtEnd()) return false;\n    return this.peek().type === type;\n  }\n\n  consume(type, message = '') {\n    if (this.check(type)) {\n      return this.advance();\n    }\n    throw this.error(message || `Expected ${type}`);\n  }\n\n  consumeStatementEnd() {\n    this.skipComments();  // \u2190 ADD THIS LINE\n\n    if (this.isPunctuation(';')) {\n      this.advance();\n    }\n\n    this.skipComments();  // \u2190 ADD THIS LINE - skip trailing comments too\n  }\n\n  advance() {\n    if (!this.isAtEnd()) {\n      this.current++;\n    }\n    return this.previous();\n  }\n\n  peek() {\n    return this.tokens[this.current];\n  }\n\n \n  previous() {\n    return this.tokens[this.current - 1];\n  }\n\n  isAtEnd() {\n    return this.peek().type === TokenType.EOF;\n  }\n\n  getLocation() {\n    const token = this.peek();\n    return { line: token.line, column: token.column };\n  }\n  /**\n  * Enhanced error reporting with full call stack\n  */\n  error(message) {\n    const token = this.peek();\n    const errorObj = new Error(\n      `Parse error at line ${token.line}, column ${token.column}: ${message}`\n    );\n    errorObj.parserError = {\n      message: `Parse error at line ${token.line}, column ${token.column}: ${message}`,\n      line: token.line,\n      column: token.column,\n      token: { type: token.type, value: token.value },\n      callStack: this.callStack ? [...this.callStack] : [],\n    };\n    return errorObj;\n  }\n  /**\n   * Get context around current token (5 tokens before and after)\n   */\n  getContext() {\n    const start = Math.max(0, this.current - 5);\n    const end = Math.min(this.tokens.length, this.current + 6);\n\n    return {\n      before: this.tokens.slice(start, this.current).map(t => `${t.value}(${t.type})`).join(' '),\n      current: `\u2192 ${this.peek().value}(${this.peek().type}) \u2190`,\n      after: this.tokens.slice(this.current + 1, end).map(t => `${t.value}(${t.type})`).join(' '),\n    };\n  }\n  /**\n   * Track when exiting a parser method\n   */\n  exitMethod(methodName) {\n    if (!this.callStack) this.callStack = [];\n    if (this.callStack.length > 0) {\n      const last = this.callStack[this.callStack.length - 1];\n      if (last.method === methodName) {\n        this.callStack.pop();\n      }\n    }\n  }\n\n  getTokenContext() {\n    const start = Math.max(0, this.current - 5);\n    const end = Math.min(this.tokens.length, this.current + 6);\n\n    const before = this.tokens\n      .slice(start, this.current)\n      .map(t => `${t.value}`)\n      .join(' ');\n\n    const after = this.tokens\n      .slice(this.current + 1, end)\n      .map(t => `${t.value}`)\n      .join(' ');\n\n    return {\n      before: before,\n      current: `\u2192 ${this.peek().value} \u2190`,\n      after: after,\n    };\n  }\n\n  synchronize() {\n    this.advance();\n    while (!this.isAtEnd()) {\n      if (this.isPunctuation(';')) {\n        this.advance();\n        return;\n      }\n      if (this.isKeyword('class') || this.isKeyword('function') || this.isKeyword('import')) {\n        return;\n      }\n      this.advance();\n    }\n  }\n\n  getErrors() {\n    return this.errors;\n  }\n\n  /**\n   * Report error with full context\n   */\n  reportError(error) {\n    this.errors.push(error);\n\n    if (this.debugMode) {\n      console.error('\\n\u274C PARSER ERROR DETECTED:\\n');\n      console.error(`Message: ${error.message}\\n`);\n\n      console.error('\uD83D\uDCCD Token Context:');\n      console.error(`  Before:  ${error.context.before}`);\n      console.error(`  Current: ${error.context.current}`);\n      console.error(`  After:   ${error.context.after}\\n`);\n\n      console.error('\uD83D\uDCDA Call Stack (where error came from):');\n      if (error.callStack.length === 0) {\n        console.error('  (top level)\\n');\n      } else {\n        error.callStack.forEach((frame, idx) => {\n          const arrow = idx === error.callStack.length - 1 ? '\u2192' : ' ';\n          console.error(`  ${arrow} ${idx + 1}. ${frame.method}()`);\n          console.error(`     at token: \"${frame.token}\" (line ${frame.line}, col ${frame.column})`);\n        });\n        console.error('');\n      }\n    }\n  }\n}\n\n// ============================================================================\n// EXPORTS\n// ============================================================================\n\nexport {\n  Parser,\n  Program,\n  ImportDeclaration,\n  ImportSpecifier,\n  ClassDeclaration,\n  ClassBody,\n  FieldDeclaration,\n  MethodDeclaration,\n  Parameter,\n  FunctionDeclaration,\n  BlockStatement,\n  ReturnStatement,\n  ExpressionStatement,\n  Identifier,\n  Literal,\n  CallExpression,\n  NewExpression,\n  ObjectLiteral,\n  Property,\n  ArrowFunctionExpression,\n  MemberExpression,\n  ASTNode,\n};"],
-  "mappings": "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",
-  "names": ["TokenType", "getLogger", "ASTNode", "type", "location", "Program", "body", "ImportDeclaration", "specifiers", "source", "ImportSpecifier", "imported", "local", "ClassDeclaration", "id", "superClass", "ClassBody", "fields", "methods", "FieldDeclaration", "key", "initialValue", "MethodDeclaration", "params", "Parameter", "name", "optional", "defaultValue", "FunctionDeclaration", "isAsync", "BlockStatement", "ReturnStatement", "argument", "ExpressionStatement", "expression", "Identifier", "Literal", "value", "raw", "CallExpression", "callee", "args", "NewExpression", "ObjectLiteral", "properties", "Property", "ArrowFunctionExpression", "MemberExpression", "object", "property", "computed", "Parser", "tokens", "options", "stmt", "error", "expr", "token", "logger", "startLocation", "importedName", "localName", "defaultName", "imported2", "local2", "modulePathToken", "n", "pos", "nameToken", "superName", "itemCount", "currentPos", "fieldName", "e", "methodName", "paramLocation", "paramName", "braceDepth", "statements", "result", "consequent", "alternate", "right", "operator", "savedPos", "nextPos", "elements", "ident", "shorthand", "prop", "message", "errorObj", "start", "end", "t", "before", "after", "frame", "idx", "arrow"]
-}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/flutterjs_report_generator.js.map b/packages/flutterjs_engine/src/analyzer/dist/flutterjs_report_generator.js.map
deleted file mode 100644
index 79db3700..00000000
--- a/packages/flutterjs_engine/src/analyzer/dist/flutterjs_report_generator.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/flutterjs_report_generator.js"],
-  "sourcesContent": ["/**\n * FlutterJS Report Generator - Enhanced Phase 3 (FIXED)\n * Generates JSON, Markdown, and Console reports from analysis results\n * \n * Integrates Phase 1 (Widget Analysis), Phase 2 (State Analysis),\n * and Phase 3 (Context + SSR Analysis)\n */\n\nimport { getLogger } from './flutterjs_logger.js';\n\n// ============================================================================\n// REPORT GENERATOR CLASS\n// ============================================================================\n\nclass ReportGenerator {\n  constructor(widgetResults, stateResults, contextResults = null, ssrResults = null, options = {}) {\n    this.widgetResults = widgetResults;\n    this.stateResults = stateResults;\n    this.contextResults = contextResults;\n    this.ssrResults = ssrResults;\n\n    this.options = {\n      format: 'json',\n      includeMetrics: true,\n      includeTree: true,\n      includeValidation: true,\n      includeSuggestions: true,\n      includeContext: true,\n      includeSsr: true,\n      prettyPrint: true,\n      ...options,\n    };\n\n    // Initialize logger\n    this.logger = getLogger().createComponentLogger('ReportGenerator');\n\n    this.metadata = {};\n    this.report = {};\n  }\n\n  /**\n   * Main entry point - generate report\n   */\n  generate() {\n    this.logger.startSession('ReportGeneration');\n    this.logger.info('Generating report');\n\n    try {\n      this.calculateMetrics();\n      this.buildReport();\n\n      let output;\n      switch (this.options.format) {\n        case 'json':\n          output = this.toJSON();\n          break;\n        case 'markdown':\n          output = this.toMarkdown();\n          break;\n        case 'console':\n          output = this.toConsole();\n          break;\n        default:\n          output = this.toJSON();\n      }\n\n      this.logger.success('Report generation complete');\n      this.logger.endSession('ReportGeneration');\n      return output;\n    } catch (error) {\n      this.logger.failure('Report generation failed', error.message);\n      this.logger.endSession('ReportGeneration');\n      throw error;\n    }\n  }\n\n  /**\n   * Calculate metrics from analysis results\n   */\n  calculateMetrics() {\n    const widgets = this.widgetResults.widgets || [];\n    const functions = this.widgetResults.functions || [];\n    const imports = this.widgetResults.imports || [];\n    const stateClasses = this.stateResults.stateClasses || [];\n    const stateFields = this.stateResults.stateFields || [];\n    const setStateCalls = this.stateResults.setStateCalls || [];\n    const lifecycleMethods = this.stateResults.lifecycleMethods || [];\n    const eventHandlers = this.stateResults.eventHandlers || [];\n\n    // Phase 3: Context metrics\n    const inheritedWidgets = this.contextResults?.inheritedWidgets || [];\n    const changeNotifiers = this.contextResults?.changeNotifiers || [];\n    const providers = this.contextResults?.providers || [];\n    const contextAccessPoints = this.contextResults?.contextAccessPoints || [];\n\n    // Phase 3: SSR metrics\n    const ssrScore = this.ssrResults?.ssrCompatibilityScore || 0;\n    const ssrSafePatterns = this.ssrResults?.ssrSafePatterns || [];\n    const ssrUnsafePatterns = this.ssrResults?.ssrUnsafePatterns || [];\n    const hydrationRequirements = this.ssrResults?.hydrationRequirements || [];\n\n    this.metadata = {\n      // Widget metrics (Phase 1)\n      totalWidgets: widgets.length,\n      statelessWidgets: widgets.filter((w) => w.type === 'stateless').length,\n      statefulWidgets: widgets.filter((w) => w.type === 'stateful').length,\n      componentWidgets: widgets.filter((w) => w.type === 'component').length,\n      stateClasses: stateClasses.length,\n\n      // State metrics (Phase 2)\n      totalStateFields: stateFields.length,\n      setStateCallCount: setStateCalls.length,\n      lifecycleMethodCount: lifecycleMethods.length,\n      eventHandlerCount: eventHandlers.length,\n\n      // Context metrics (Phase 3)\n      inheritedWidgets: inheritedWidgets.length,\n      changeNotifiers: changeNotifiers.length,\n      providers: providers.length,\n      contextAccessPoints: contextAccessPoints.length,\n\n      // SSR metrics (Phase 3)\n      ssrCompatibilityScore: ssrScore,\n      ssrCompatibility: this.ssrResults?.overallCompatibility || 'unknown',\n      ssrSafePatterns: ssrSafePatterns.length,\n      ssrUnsafePatterns: ssrUnsafePatterns.length,\n      hydrationRequired: hydrationRequirements.length > 0,\n      hydrationCount: hydrationRequirements.length,\n\n      // Function metrics\n      totalFunctions: functions.length,\n      entryPoint: this.widgetResults.entryPoint,\n      rootWidget: this.widgetResults.rootWidget,\n\n      // Import metrics\n      totalImports: imports.length,\n      externalPackages: new Set(imports.map((imp) => imp.source)).size,\n\n      // Widget tree metrics\n      treeDepth: this.calculateTreeDepth(this.widgetResults.widgetTree),\n\n      // Validation metrics\n      errorCount: this.countValidationIssues(this.stateResults.validationResults, 'error'),\n      warningCount: this.countValidationIssues(this.stateResults.validationResults, 'warning'),\n      infoCount: this.countValidationIssues(this.stateResults.validationResults, 'info'),\n    };\n\n    // Calculate scores\n    this.metadata.healthScore = this.calculateHealthScore();\n    this.metadata.complexityScore = this.calculateComplexityScore();\n  }\n\n  /**\n   * Calculate tree depth\n   */\n  calculateTreeDepth(node, depth = 1) {\n    if (!node || !node.children || node.children.length === 0) {\n      return depth;\n    }\n    return 1 + Math.max(...node.children.map((child) => this.calculateTreeDepth(child, depth + 1)));\n  }\n\n  /**\n   * Count validation issues by severity\n   */\n  countValidationIssues(results, severity) {\n    if (!results) return 0;\n    return results.filter((r) => r.severity === severity).length;\n  }\n\n  /**\n   * Calculate health score (0-100)\n   */\n  calculateHealthScore() {\n    let score = 100;\n\n    score -= this.metadata.errorCount * 10;\n    score -= this.metadata.warningCount * 2;\n\n    if (this.metadata.entryPoint) {\n      score += 5;\n    }\n\n    if (this.metadata.statefulWidgets > this.metadata.statelessWidgets) {\n      score -= 10;\n    }\n\n    if (this.metadata.treeDepth > 5) {\n      score -= 5;\n    }\n\n    if (this.metadata.ssrCompatibilityScore < 50) {\n      score -= 15;\n    }\n\n    return Math.max(0, Math.min(100, score));\n  }\n\n  /**\n   * Calculate complexity score (0-100)\n   */\n  calculateComplexityScore() {\n    let score = 0;\n\n    score += Math.min(this.metadata.totalStateFields * 10, 40);\n    score += Math.min(this.metadata.setStateCallCount * 5, 30);\n    score += Math.min(this.metadata.eventHandlerCount * 2, 20);\n\n    if (this.metadata.treeDepth > 5) {\n      score += 10;\n    }\n\n    score += Math.min(this.metadata.contextAccessPoints * 3, 15);\n\n    return Math.min(100, score);\n  }\n\n  /**\n   * Build comprehensive report object\n   */\n  buildReport() {\n    const widgets = this.widgetResults.widgets || [];\n    const stateClasses = this.stateResults.stateClasses || [];\n    const validationResults = this.stateResults.validationResults || [];\n\n    this.report = {\n      analysis: {\n        file: this.widgetResults.file || 'analysis',\n        timestamp: new Date().toISOString(),\n        status: validationResults.some((r) => r.severity === 'error') ? 'warning' : 'success',\n        phase: 'phase1+phase2+phase3',\n      },\n\n      summary: {\n        widgets: {\n          total: this.metadata.totalWidgets,\n          stateless: this.metadata.statelessWidgets,\n          stateful: this.metadata.statefulWidgets,\n          components: this.metadata.componentWidgets,\n        },\n        state: {\n          stateClasses: this.metadata.stateClasses,\n          stateFields: this.metadata.totalStateFields,\n          setStateCalls: this.metadata.setStateCallCount,\n          lifecycleMethods: this.metadata.lifecycleMethodCount,\n          eventHandlers: this.metadata.eventHandlerCount,\n        },\n        context: this.options.includeContext ? {\n          inheritedWidgets: this.metadata.inheritedWidgets,\n          changeNotifiers: this.metadata.changeNotifiers,\n          providers: this.metadata.providers,\n          contextAccessPoints: this.metadata.contextAccessPoints,\n        } : null,\n        ssr: this.options.includeSsr ? {\n          compatibility: this.metadata.ssrCompatibility,\n          compatibilityScore: this.metadata.ssrCompatibilityScore,\n          safePatterns: this.metadata.ssrSafePatterns,\n          unsafePatterns: this.metadata.ssrUnsafePatterns,\n          hydrationRequired: this.metadata.hydrationRequired,\n          hydrationCount: this.metadata.hydrationCount,\n        } : null,\n        functions: this.metadata.totalFunctions,\n        imports: this.metadata.totalImports,\n        externalPackages: this.metadata.externalPackages,\n        entryPoint: this.metadata.entryPoint,\n        rootWidget: this.metadata.rootWidget,\n        treeDepth: this.metadata.treeDepth,\n        healthScore: this.metadata.healthScore,\n        complexityScore: this.metadata.complexityScore,\n      },\n\n      widgets: this.formatWidgets(),\n      stateClasses: this.formatStateClasses(),\n      imports: this.formatImports(),\n      functions: this.formatFunctions(),\n\n      context: this.options.includeContext ? this.formatContext() : null,\n      ssr: this.options.includeSsr ? this.formatSsr() : null,\n\n      widgetTree: this.options.includeTree ? this.formatWidgetTree() : null,\n      dependencyGraph: this.formatDependencyGraph(),\n      validation: this.options.includeValidation ? this.formatValidation() : null,\n      suggestions: this.options.includeSuggestions ? this.generateSuggestions() : null,\n\n      metrics: this.options.includeMetrics ? this.getDetailedMetrics() : null,\n    };\n  }\n\n  /**\n   * Phase 3: Format context analysis results\n   */\n  formatContext() {\n    if (!this.contextResults) {\n      return {\n        inheritedWidgets: [],\n        changeNotifiers: [],\n        providers: [],\n        contextFlow: {},\n      };\n    }\n\n    return {\n      inheritedWidgets: this.contextResults.inheritedWidgets?.map((widget) => ({\n        name: widget.name,\n        properties: widget.properties,\n        staticAccessors: widget.staticAccessors?.map((a) => a.name),\n        updateShouldNotifyImplemented: widget.updateShouldNotifyImplemented,\n        usedIn: widget.usedIn,\n        usageCount: widget.usageCount,\n      })) || [],\n\n      changeNotifiers: this.contextResults.changeNotifiers?.map((notifier) => ({\n        name: notifier.name,\n        properties: notifier.properties?.length || 0,\n        getters: notifier.getters?.map((g) => g.name) || [],\n        methods: notifier.methods?.map((m) => ({\n          name: m.name,\n          callsNotifyListeners: m.callsNotifyListeners,\n          mutations: m.mutations,\n        })) || [],\n        consumers: notifier.consumers || [],\n      })) || [],\n\n      providers: this.contextResults.providers?.map((provider) => ({\n        type: provider.providerType,\n        valueType: provider.valueType,\n        consumers: provider.consumers || [],\n        accessPatterns: provider.accessPatterns || [],\n      })) || [],\n\n      contextFlow: {\n        inheritedWidgetGraph: this.contextResults.inheritedWidgetGraph || {},\n        providerGraph: this.contextResults.providerGraph || {},\n      },\n\n      contextAccessPoints: this.contextResults.contextAccessPoints?.map((usage) => ({\n        pattern: usage.pattern,\n        type: usage.type,\n        location: usage.location,\n        ssrSafe: usage.ssrSafe,\n        reason: usage.reason,\n      })) || [],\n    };\n  }\n\n  /**\n   * Phase 3: Format SSR analysis results\n   */\n  formatSsr() {\n    if (!this.ssrResults) {\n      return {\n        compatibility: 'unknown',\n        score: 0,\n        patterns: { safe: [], unsafe: [] },\n        hydration: [],\n        migration: [],\n      };\n    }\n\n    return {\n      overallCompatibility: this.ssrResults.overallCompatibility,\n      compatibilityScore: this.ssrResults.ssrCompatibilityScore,\n      readinessScore: this.ssrResults.ssrReadinessScore || this.ssrResults.ssrCompatibilityScore,\n      estimatedEffort: this.ssrResults.estimatedEffort,\n\n      patterns: {\n        safe: this.ssrResults.ssrSafePatterns?.map((p) => ({\n          pattern: p.pattern,\n          example: p.example,\n          why: p.why,\n          confidence: p.confidence,\n        })) || [],\n\n        unsafe: this.ssrResults.ssrUnsafePatterns?.map((p) => ({\n          pattern: p.pattern,\n          example: p.example,\n          why: p.why,\n          severity: p.severity,\n          suggestion: p.suggestion,\n          location: p.location,\n        })) || [],\n      },\n\n      hydration: {\n        required: this.ssrResults.hydrationCount > 0,\n        count: this.ssrResults.hydrationCount,\n        requirements: this.ssrResults.hydrationRequirements?.map((r) => ({\n          dependency: r.dependency,\n          reason: r.reason,\n          order: r.order,\n          requiredProviders: r.requiredProviders,\n          requiredState: r.requiredState,\n        })) || [],\n      },\n\n      lazyLoadingOpportunities: this.ssrResults.lazyLoadOpportunities?.map((opp) => ({\n        target: opp.target,\n        reason: opp.reason,\n        estimatedSize: opp.estimatedSize,\n        priority: opp.priority,\n        recommendation: opp.recommendation,\n      })) || [],\n\n      migrationPath: this.ssrResults.ssrMigrationPath?.map((step) => ({\n        step: step.step,\n        action: step.action,\n        description: step.description,\n        example: step.example,\n        effort: step.effort,\n        priority: step.priority,\n        locations: step.locations,\n      })) || [],\n\n      validationIssues: {\n        critical: this.ssrResults.criticalIssues?.map((i) => ({\n          type: i.type,\n          message: i.message,\n          suggestion: i.suggestion,\n          location: i.location,\n        })) || [],\n\n        warnings: this.ssrResults.warningIssues?.map((i) => ({\n          type: i.type,\n          message: i.message,\n          suggestion: i.suggestion,\n        })) || [],\n      },\n    };\n  }\n\n  /**\n   * Format widgets for report\n   */\n  formatWidgets() {\n    const widgets = {};\n\n    (this.widgetResults.widgets || []).forEach((widget) => {\n      widgets[widget.name] = {\n        type: widget.type,\n        superClass: widget.superClass || null,\n        location: widget.location,\n        constructor: widget.constructor\n          ? {\n            params: widget.constructor.params || [],\n          }\n          : null,\n        methods: widget.methods.map((m) => ({\n          name: m.name,\n          params: m.params || [],\n        })),\n        properties: widget.properties || [],\n        linkedStateClass: widget.linkedStateClass || null,\n        imports: widget.imports || [],\n      };\n    });\n\n    return widgets;\n  }\n\n  /**\n   * FIXED: Format state classes for report\n   * Properly handle StateField objects which may or may not have isUsed method\n   */\n  formatStateClasses() {\n    const stateClasses = {};\n\n    (this.stateResults.stateClasses || []).forEach((sc) => {\n      const metadata = sc.metadata || sc;  // Handle both wrapped and unwrapped formats\n      \n      stateClasses[metadata.name] = {\n        name: metadata.name,\n        linkedStatefulWidget: metadata.linkedStatefulWidget,\n        location: metadata.location,\n\n        stateFields: (metadata.stateFields || []).map((field) => {\n          // FIXED: Check if isUsed is a function before calling it\n          const isUsed = typeof field.isUsed === 'function' \n            ? field.isUsed() \n            : (field.usedInMethods && field.usedInMethods.length > 0);\n\n          return {\n            name: field.name,\n            type: field.type || 'any',\n            initialValue: field.initialValueString || field.initialValue?.toString() || 'undefined',\n            isUsed: isUsed,\n            usedInMethods: field.usedInMethods || [],\n            mutatedInMethods: field.mutatedInMethods || [],\n            mutationCount: (field.mutations && field.mutations.length) || 0,\n          };\n        }),\n\n        lifecycleMethods: (metadata.lifecycleMethods || []).map((lc) => {\n          // FIXED: Check if isValid is a function\n          const isValid = typeof lc.isValid === 'function' \n            ? lc.isValid() \n            : true;\n\n          return {\n            name: lc.name,\n            callsSuper: lc.callsSuper || false,\n            hasSideEffects: lc.hasSideEffects || false,\n            isValid: isValid,\n            issues: lc.validationIssues || [],\n          };\n        }),\n\n        otherMethods: (metadata.otherMethods || []).map((m) => ({\n          name: m.name,\n          params: m.params || [],\n        })),\n      };\n    });\n\n    return stateClasses;\n  }\n\n  /**\n   * Format imports for report\n   */\n  formatImports() {\n    const imports = {};\n\n    (this.widgetResults.imports || []).forEach((imp) => {\n      imports[imp.source] = imp.items || [];\n    });\n\n    return imports;\n  }\n\n  /**\n   * Format functions for report\n   */\n  formatFunctions() {\n    const functions = {};\n\n    (this.widgetResults.functions || []).forEach((func) => {\n      functions[func.name] = {\n        type: func.type,\n        location: func.location,\n        params: (func.params || []).map((p) => ({\n          name: p.name,\n          optional: p.optional,\n        })),\n        isEntryPoint: func.isEntryPoint || false,\n      };\n    });\n\n    return functions;\n  }\n\n  /**\n   * Format widget tree for report\n   */\n  formatWidgetTree() {\n    if (!this.widgetResults.widgetTree) {\n      return null;\n    }\n\n    return this.treeNodeToObject(this.widgetResults.widgetTree);\n  }\n\n  /**\n   * Convert tree node to object recursively\n   */\n  treeNodeToObject(node) {\n    if (!node) return null;\n\n    return {\n      name: node.widget?.name || 'Unknown',\n      type: node.widget?.type || 'unknown',\n      depth: node.depth || 0,\n      children: (node.children || []).map((child) => this.treeNodeToObject(child)),\n    };\n  }\n\n  /**\n   * Format dependency graph for report\n   */\n  formatDependencyGraph() {\n    const graph = this.stateResults.dependencyGraph;\n    if (!graph) return null;\n\n    return {\n      stateToMethods: Object.fromEntries(graph.stateToMethods || []),\n      methodToState: Object.fromEntries(graph.methodToState || []),\n      eventToState: Object.fromEntries(graph.eventToState || []),\n    };\n  }\n\n  /**\n   * Format validation results for report\n   */\n  formatValidation() {\n    const results = this.stateResults.validationResults || [];\n\n    return {\n      totalIssues: results.length,\n      errors: results.filter((r) => r.severity === 'error'),\n      warnings: results.filter((r) => r.severity === 'warning'),\n      info: results.filter((r) => r.severity === 'info'),\n    };\n  }\n\n  /**\n   * Generate suggestions based on analysis\n   */\n  generateSuggestions() {\n    const suggestions = [];\n\n    // Phase 1 & 2 Suggestions\n    if (this.metadata.statefulWidgets > this.metadata.statelessWidgets) {\n      suggestions.push({\n        type: 'structure',\n        severity: 'info',\n        message: 'More stateful than stateless widgets',\n        suggestion: 'Consider using stateless widgets where possible for better performance',\n      });\n    }\n\n    if (this.metadata.treeDepth > 5) {\n      suggestions.push({\n        type: 'structure',\n        severity: 'warning',\n        message: 'Deep widget tree detected',\n        suggestion: 'Consider refactoring to reduce nesting depth (aim for < 5 levels)',\n      });\n    }\n\n    // Phase 3: SSR Suggestions\n    if (this.options.includeSsr && this.ssrResults) {\n      if (this.metadata.ssrCompatibilityScore < 50) {\n        suggestions.push({\n          type: 'ssr-compatibility',\n          severity: 'warning',\n          message: `Low SSR compatibility score (${this.metadata.ssrCompatibilityScore}/100)`,\n          suggestion: `Follow the ${this.ssrResults.ssrMigrationPath?.length || 0} migration steps to improve SSR support`,\n          migrationSteps: this.ssrResults.ssrMigrationPath?.length || 0,\n        });\n      }\n\n      if (this.metadata.ssrUnsafePatterns > 5) {\n        suggestions.push({\n          type: 'ssr-patterns',\n          severity: 'warning',\n          message: `Found ${this.metadata.ssrUnsafePatterns} SSR-unsafe patterns`,\n          suggestion: 'Refactor unsafe patterns to enable server-side rendering',\n          unsafePatterns: this.metadata.ssrUnsafePatterns,\n        });\n      }\n\n      if (this.metadata.hydrationRequired) {\n        suggestions.push({\n          type: 'hydration',\n          severity: 'info',\n          message: `App requires hydration for ${this.metadata.hydrationCount} dependencies`,\n          suggestion: 'Implement hydration layer to re-attach listeners after server render',\n          hydrationDependencies: this.metadata.hydrationCount,\n        });\n      }\n\n      if (this.ssrResults.lazyLoadOpportunities?.length > 0) {\n        suggestions.push({\n          type: 'optimization',\n          severity: 'info',\n          message: `Found ${this.ssrResults.lazyLoadOpportunities.length} lazy-load opportunities`,\n          suggestion: 'Implement code splitting to reduce initial bundle size',\n          opportunities: this.ssrResults.lazyLoadOpportunities.length,\n        });\n      }\n    }\n\n    // Phase 3: Context Suggestions\n    if (this.options.includeContext && this.contextResults) {\n      if (this.metadata.inheritedWidgets > 3) {\n        suggestions.push({\n          type: 'context-hierarchy',\n          severity: 'info',\n          message: `Multiple InheritedWidgets detected (${this.metadata.inheritedWidgets})`,\n          suggestion: 'Consider consolidating context providers to reduce nesting',\n          inheritedWidgets: this.metadata.inheritedWidgets,\n        });\n      }\n\n      if (this.metadata.providers > 0) {\n        suggestions.push({\n          type: 'state-management',\n          severity: 'info',\n          message: `Using Provider pattern (${this.metadata.providers} providers)`,\n          suggestion: 'Ensure providers are properly organized and lazy-initialized where possible',\n          providers: this.metadata.providers,\n        });\n      }\n    }\n\n    return suggestions;\n  }\n\n  /**\n   * Get detailed metrics\n   */\n  getDetailedMetrics() {\n    return {\n      widgetMetrics: {\n        total: this.metadata.totalWidgets,\n        byType: {\n          stateless: this.metadata.statelessWidgets,\n          stateful: this.metadata.statefulWidgets,\n          component: this.metadata.componentWidgets,\n          state: this.metadata.stateClasses,\n        },\n      },\n\n      stateMetrics: {\n        stateClasses: this.metadata.stateClasses,\n        totalFields: this.metadata.totalStateFields,\n        setStateCalls: this.metadata.setStateCallCount,\n        lifecycleMethods: this.metadata.lifecycleMethodCount,\n        eventHandlers: this.metadata.eventHandlerCount,\n      },\n\n      contextMetrics: this.options.includeContext ? {\n        inheritedWidgets: this.metadata.inheritedWidgets,\n        changeNotifiers: this.metadata.changeNotifiers,\n        providers: this.metadata.providers,\n        contextAccessPoints: this.metadata.contextAccessPoints,\n      } : null,\n\n      ssrMetrics: this.options.includeSsr ? {\n        compatibilityScore: this.metadata.ssrCompatibilityScore,\n        compatibility: this.metadata.ssrCompatibility,\n        safePatterns: this.metadata.ssrSafePatterns,\n        unsafePatterns: this.metadata.ssrUnsafePatterns,\n        hydrationRequired: this.metadata.hydrationRequired,\n        hydrationCount: this.metadata.hydrationCount,\n      } : null,\n\n      functionMetrics: {\n        total: this.metadata.totalFunctions,\n        entryPoint: this.metadata.entryPoint || 'none',\n      },\n\n      dependencyMetrics: {\n        totalImports: this.metadata.totalImports,\n        externalPackages: this.metadata.externalPackages,\n      },\n\n      structureMetrics: {\n        widgetTreeDepth: this.metadata.treeDepth,\n        rootWidget: this.metadata.rootWidget || 'none',\n      },\n\n      healthMetrics: {\n        healthScore: this.metadata.healthScore,\n        complexityScore: this.metadata.complexityScore,\n        errors: this.metadata.errorCount,\n        warnings: this.metadata.warningCount,\n      },\n    };\n  }\n\n  /**\n   * Generate JSON report\n   */\n  toJSON() {\n    if (this.options.prettyPrint) {\n      return JSON.stringify(this.report, null, 2);\n    } else {\n      return JSON.stringify(this.report);\n    }\n  }\n\n  /**\n   * Generate Markdown report\n   */\n  toMarkdown() {\n    let md = '# FlutterJS Code Analysis Report (Phase 1 + 2 + 3)\\n\\n';\n\n    md += `**Generated:** ${new Date().toISOString()}\\n\\n`;\n\n    // Summary Table\n    md += '## Summary\\n\\n';\n    md += `| Metric | Count |\\n`;\n    md += `|--------|-------|\\n`;\n    md += `| Total Widgets | ${this.metadata.totalWidgets} |\\n`;\n    md += `| Stateless | ${this.metadata.statelessWidgets} |\\n`;\n    md += `| Stateful | ${this.metadata.statefulWidgets} |\\n`;\n    md += `| State Classes | ${this.metadata.stateClasses} |\\n`;\n    md += `| State Fields | ${this.metadata.totalStateFields} |\\n`;\n    md += `| Health Score | ${this.metadata.healthScore}/100 |\\n`;\n    md += `| Complexity Score | ${this.metadata.complexityScore}/100 |\\n`;\n\n    if (this.options.includeContext) {\n      md += `| InheritedWidgets | ${this.metadata.inheritedWidgets} |\\n`;\n      md += `| ChangeNotifiers | ${this.metadata.changeNotifiers} |\\n`;\n      md += `| Providers | ${this.metadata.providers} |\\n`;\n    }\n\n    if (this.options.includeSsr) {\n      md += `| SSR Compatibility | ${this.metadata.ssrCompatibility} |\\n`;\n      md += `| SSR Score | ${this.metadata.ssrCompatibilityScore}/100 |\\n`;\n      md += `| Hydration Required | ${this.metadata.hydrationRequired ? 'Yes' : 'No'} |\\n`;\n    }\n\n    md += '\\n';\n\n    // Context Section\n    if (this.options.includeContext && this.contextResults) {\n      md += '## Context Analysis (Phase 3)\\n\\n';\n\n      if (this.metadata.inheritedWidgets > 0) {\n        md += '### InheritedWidgets\\n\\n';\n        (this.contextResults.inheritedWidgets || []).forEach((widget) => {\n          md += `- **${widget.name}**\\n`;\n          if (widget.properties && widget.properties.length > 0) {\n            md += `  - Properties: ${widget.properties.map((p) => p.name).join(', ')}\\n`;\n          }\n          if (widget.usedIn && widget.usedIn.length > 0) {\n            md += `  - Used in: ${widget.usedIn.join(', ')}\\n`;\n          }\n        });\n        md += '\\n';\n      }\n\n      if (this.metadata.changeNotifiers > 0) {\n        md += '### ChangeNotifiers\\n\\n';\n        (this.contextResults.changeNotifiers || []).forEach((notifier) => {\n          md += `- **${notifier.name}**\\n`;\n          if (notifier.consumers && notifier.consumers.length > 0) {\n            md += `  - Consumed by: ${notifier.consumers.join(', ')}\\n`;\n          }\n        });\n        md += '\\n';\n      }\n    }\n\n    // SSR Section\n    if (this.options.includeSsr && this.ssrResults) {\n      md += '## SSR Compatibility Analysis (Phase 3)\\n\\n';\n      md += `**Overall Compatibility:** ${this.metadata.ssrCompatibility}\\n`;\n      md += `**Score:** ${this.metadata.ssrCompatibilityScore}/100\\n`;\n      md += `**Effort to fix:** ${this.ssrResults.estimatedEffort}\\n\\n`;\n\n      if (this.metadata.ssrUnsafePatterns > 0) {\n        md += `### Unsafe Patterns (${this.metadata.ssrUnsafePatterns})\\n\\n`;\n        (this.ssrResults.ssrUnsafePatterns || []).slice(0, 10).forEach((pattern) => {\n          md += `- **${pattern.pattern}**: ${pattern.why}\\n`;\n        });\n        if (this.metadata.ssrUnsafePatterns > 10) {\n          md += `- ... and ${this.metadata.ssrUnsafePatterns - 10} more\\n`;\n        }\n        md += '\\n';\n      }\n\n      if (this.ssrResults.hydrationCount > 0) {\n        md += `### Hydration Requirements (${this.ssrResults.hydrationCount})\\n\\n`;\n        (this.ssrResults.hydrationRequirements || []).forEach((req) => {\n          md += `- **${req.dependency}**: ${req.reason}\\n`;\n        });\n        md += '\\n';\n      }\n\n      if (this.ssrResults.ssrMigrationPath && this.ssrResults.ssrMigrationPath.length > 0) {\n        md += `### Migration Path (${this.ssrResults.ssrMigrationPath.length} steps)\\n\\n`;\n        (this.ssrResults.ssrMigrationPath || []).forEach((step) => {\n          md += `**Step ${step.step}: ${step.action}**\\n`;\n          if (step.description) {\n            md += `${step.description}\\n`;\n          }\n          if (step.effort) {\n            md += `- Effort: ${step.effort}\\n`;\n          }\n          md += '\\n';\n        });\n      }\n    }\n\n    md += '\\n';\n\n    // Suggestions\n    if (this.options.includeSuggestions) {\n      const suggestions = this.generateSuggestions();\n      if (suggestions.length > 0) {\n        md += '## Suggestions\\n\\n';\n        suggestions.forEach((sug) => {\n          md += `- **${sug.message}**: ${sug.suggestion}\\n`;\n        });\n        md += '\\n';\n      }\n    }\n\n    return md;\n  }\n\n  /**\n   * Generate Console report\n   */\n  toConsole() {\n    const lines = [];\n\n    lines.push('\\n' + '='.repeat(80));\n    lines.push('FlutterJS CODE ANALYSIS REPORT (Phase 1 + 2 + 3)');\n    lines.push('='.repeat(80) + '\\n');\n\n    // Summary\n    lines.push('SUMMARY');\n    lines.push('-'.repeat(80));\n    lines.push(`  Widgets: ${this.metadata.totalWidgets} (${this.metadata.statelessWidgets} stateless, ${this.metadata.statefulWidgets} stateful)`);\n    lines.push(`  State Classes: ${this.metadata.stateClasses}`);\n    lines.push(`  State Fields: ${this.metadata.totalStateFields}`);\n    lines.push(`  Health Score: ${this.metadata.healthScore}/100`);\n    lines.push(`  Complexity: ${this.metadata.complexityScore}/100`);\n\n    if (this.options.includeContext) {\n      lines.push(`  InheritedWidgets: ${this.metadata.inheritedWidgets}`);\n      lines.push(`  ChangeNotifiers: ${this.metadata.changeNotifiers}`);\n      lines.push(`  Providers: ${this.metadata.providers}`);\n    }\n\n    if (this.options.includeSsr) {\n      lines.push(`  SSR Compatibility: ${this.metadata.ssrCompatibility}`);\n      lines.push(`  SSR Score: ${this.metadata.ssrCompatibilityScore}/100`);\n      lines.push(`  Migration Steps: ${this.ssrResults?.ssrMigrationPath?.length || 0}`);\n    }\n\n    lines.push('');\n\n    // Context Section\n    if (this.options.includeContext && this.contextResults && this.metadata.inheritedWidgets > 0) {\n      lines.push('CONTEXT ANALYSIS (Phase 3)');\n      lines.push('-'.repeat(80));\n\n      if (this.metadata.inheritedWidgets > 0) {\n        lines.push('  InheritedWidgets:');\n        (this.contextResults.inheritedWidgets || []).forEach((widget) => {\n          lines.push(`    - ${widget.name}`);\n          if (widget.usedIn && widget.usedIn.length > 0) {\n            lines.push(`      Used in: ${widget.usedIn.join(', ')}`);\n          }\n        });\n      }\n\n      if (this.metadata.changeNotifiers > 0) {\n        lines.push('  ChangeNotifiers:');\n        (this.contextResults.changeNotifiers || []).forEach((notifier) => {\n          lines.push(`    - ${notifier.name}`);\n          if (notifier.consumers && notifier.consumers.length > 0) {\n            lines.push(`      Consumers: ${notifier.consumers.join(', ')}`);\n          }\n        });\n      }\n\n      lines.push('');\n    }\n\n    // SSR Section\n    if (this.options.includeSsr && this.ssrResults) {\n      lines.push('SSR COMPATIBILITY ANALYSIS (Phase 3)');\n      lines.push('-'.repeat(80));\n      lines.push(`  Overall: ${this.metadata.ssrCompatibility} (${this.metadata.ssrCompatibilityScore}/100)`);\n      lines.push(`  Safe Patterns: ${this.metadata.ssrSafePatterns}`);\n      lines.push(`  Unsafe Patterns: ${this.metadata.ssrUnsafePatterns}`);\n\n      if (this.ssrResults.hydrationCount > 0) {\n        lines.push(`  Hydration Required: Yes (${this.ssrResults.hydrationCount} dependencies)`);\n      }\n\n      if (this.ssrResults.ssrMigrationPath && this.ssrResults.ssrMigrationPath.length > 0) {\n        lines.push(`  Migration Steps: ${this.ssrResults.ssrMigrationPath.length}`);\n        lines.push(`  Estimated Effort: ${this.ssrResults.estimatedEffort}`);\n      }\n\n      lines.push('');\n    }\n\n    // Validation\n    if (this.stateResults && this.stateResults.validationResults && this.stateResults.validationResults.length > 0) {\n      lines.push('VALIDATION ISSUES');\n      lines.push('-'.repeat(80));\n      (this.stateResults.validationResults || []).forEach((result) => {\n        const icon = result.severity === 'error' ? '\u274C' : result.severity === 'warning' ? '\u26A0\uFE0F ' : '\u2139\uFE0F ';\n        lines.push(`  ${icon} [${result.severity.toUpperCase()}] ${result.message}`);\n        if (result.suggestion) {\n          lines.push(`     \u2192 ${result.suggestion}`);\n        }\n      });\n      lines.push('');\n    }\n\n    lines.push('='.repeat(80) + '\\n');\n\n    return lines.join('\\n');\n  }\n\n  /**\n   * Save report to file\n   */\n  saveToFile(filePath, fs) {\n    const content = this.generate();\n    fs.writeFileSync(filePath, content, 'utf-8');\n    return filePath;\n  }\n}\n\n// ============================================================================\n// EXPORTS\n// ============================================================================\n\nexport { ReportGenerator };"],
-  "mappings": "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",
-  "names": ["getLogger", "ReportGenerator", "widgetResults", "stateResults", "contextResults", "ssrResults", "options", "output", "error", "widgets", "functions", "imports", "stateClasses", "stateFields", "setStateCalls", "lifecycleMethods", "eventHandlers", "inheritedWidgets", "changeNotifiers", "providers", "contextAccessPoints", "ssrScore", "ssrSafePatterns", "ssrUnsafePatterns", "hydrationRequirements", "w", "imp", "node", "depth", "child", "results", "severity", "r", "score", "validationResults", "widget", "a", "notifier", "g", "m", "provider", "usage", "p", "opp", "step", "i", "sc", "metadata", "field", "isUsed", "lc", "isValid", "func", "graph", "suggestions", "md", "pattern", "req", "sug", "lines", "result", "icon", "filePath", "fs", "content"]
-}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/flutterjs_widget_analyzer.js.map b/packages/flutterjs_engine/src/analyzer/dist/flutterjs_widget_analyzer.js.map
deleted file mode 100644
index 6876570a..00000000
--- a/packages/flutterjs_engine/src/analyzer/dist/flutterjs_widget_analyzer.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/flutterjs_widget_analyzer.js"],
-  "sourcesContent": ["/**\n * WidgetAnalyzer Enhancement - Track field references\n * \n * Understand that:\n *   _count = 0;        <- field declaration\n *   this._count        <- field reference\n * \n * These are the same thing!\n */\n\nimport { getLogger } from './flutterjs_logger.js';\n\nclass WidgetAnalyzer {\n  constructor(ast, options = {}) {\n    this.ast = ast;\n    this.options = {\n      strict: false,\n      ...options,\n    };\n    this.logger = getLogger().createComponentLogger('WidgetAnalyzer');\n    this.widgets = new Map();        // key: className, value: Widget object\n    this.functions = new Map();      // key: functionName, value: Function object\n    this.imports = [];\n    this.externalDependencies = new Set();\n    this.entryPoint = null;\n    this.rootWidget = null;\n    this.widgetTree = null;\n    this.errors = [];\n  }\n\n  /**\n   * Main entry point - analyze entire AST\n   */\n  analyze() {\n    this.logger.startSession('WidgetAnalyzer');\n    if (!this.ast || !this.ast.body) {\n      throw new Error('Invalid AST provided');\n    }\n\n    this.logger.trace('[WidgetAnalyzer] Starting analysis...');\n\n    try {\n      // Phase 1: Extract all classes and functions\n      this.logger.trace('[WidgetAnalyzer] Phase 1: Extracting classes and functions...');\n      this.extractClassesAndFunctions();\n      this.logger.trace(`[WidgetAnalyzer]   Found ${this.widgets.size} classes in total`);\n\n      // Phase 2: Detect which classes are widgets\n      this.logger.trace('[WidgetAnalyzer] Phase 2: Detecting widgets...');\n      this.detectWidgets();\n      this.logger.trace(`[WidgetAnalyzer]   Detected widgets: ${Array.from(this.widgets.values()).filter(w => w.type !== 'class').length}`);\n\n      // Phase 3: Extract imports and dependencies\n      this.logger.trace('[WidgetAnalyzer] Phase 3: Extracting imports...');\n      this.extractImports();\n      this.logger.trace(`[WidgetAnalyzer]   Found ${this.imports.length} imports`);\n\n      // Phase 4: Find entry point\n      this.logger.trace('[WidgetAnalyzer] Phase 4: Finding entry point...');\n      this.findEntryPoint();\n      this.logger.trace(`[WidgetAnalyzer]   Entry point: ${this.entryPoint || 'NOT FOUND'}`);\n\n      // Phase 5: Build widget tree\n      this.logger.trace('[WidgetAnalyzer] Phase 5: Building widget tree...');\n      this.buildWidgetTree();\n      this.logger.trace(`[WidgetAnalyzer]   Tree root: ${this.rootWidget || 'NOT FOUND'}`);\n\n      this.logger.trace('[WidgetAnalyzer] Analysis complete\\n');\n\n      return this.getResults();\n    } catch (error) {\n      this.errors.push({\n        type: 'analysis-error',\n        message: error.message,\n        stack: error.stack,\n      });\n      return this.getResults();\n    }\n  }\n\n  /**\n   * Phase 1: Extract all classes and functions from AST\n   */\n  extractClassesAndFunctions() {\n    if (!this.ast.body) return;\n\n    for (const node of this.ast.body) {\n      if (node.type === 'ClassDeclaration') {\n        this.extractClassDeclaration(node);\n      } else if (node.type === 'FunctionDeclaration') {\n        this.extractFunctionDeclaration(node);\n      }\n    }\n  }\n\n  /**\n   * Extract a single class declaration\n   * Handles both field declarations and method declarations\n   */\n  extractClassDeclaration(classNode) {\n    const name = classNode.id?.name;\n    if (!name) return;\n\n    const superClass = classNode.superClass?.name || null;\n    const location = classNode.location;\n\n    const widget = {\n      name,\n      type: 'class',\n      location,\n      superClass,\n      constructor: null,\n      properties: [],      // Fields with their initial values\n      methods: [],\n      fieldReferences: {}, // Map of which methods use which fields\n      imports: [],\n      children: [],\n      linkedStateClass: null,\n    };\n\n    // Extract fields (declared with _count = 0; syntax)\n    if (classNode.body?.fields) {\n      classNode.body.fields.forEach((field) => {\n        const fieldName = field.key?.name;\n        const initialValue = field.initialValue ? this.expressionToString(field.initialValue) : null;\n\n        widget.properties.push({\n          name: fieldName,\n          initialValue: initialValue,\n          type: this.inferFieldType(field.initialValue),\n        });\n\n        // Track that this field exists\n        if (!widget.fieldReferences[fieldName]) {\n          widget.fieldReferences[fieldName] = [];\n        }\n      });\n    }\n\n    // Extract constructor\n    if (classNode.body?.methods) {\n      const constructorMethod = classNode.body.methods.find(\n        (m) => m.key?.name === 'constructor'\n      );\n      if (constructorMethod) {\n        widget.constructor = {\n          name: 'constructor',\n          params: constructorMethod.params || [],\n          location: constructorMethod.location,\n        };\n      }\n\n      // Extract other methods and track field usage\n      classNode.body.methods.forEach((method) => {\n        if (method.key?.name !== 'constructor') {\n          const methodName = method.key?.name;\n          const methodData = {\n            name: methodName,\n            params: method.params || [],\n            location: method.location,\n            hasBody: method.body !== null,\n            usesFields: [], // Which fields this method references\n          };\n\n          // Track field references in this method\n          if (method.body) {\n            const fieldRefs = this.findFieldReferencesInBody(method.body);\n            methodData.usesFields = fieldRefs;\n\n            // Update the field reference map\n            fieldRefs.forEach((fieldName) => {\n              if (widget.fieldReferences[fieldName]) {\n                widget.fieldReferences[fieldName].push(methodName);\n              }\n            });\n          }\n\n          widget.methods.push(methodData);\n        }\n      });\n    }\n\n    this.widgets.set(name, widget);\n    this.logger.trace(`[WidgetAnalyzer]     Extracted class: ${name} extends ${superClass}`);\n    if (widget.properties.length > 0) {\n      this.logger.trace(`[WidgetAnalyzer]       Fields: ${widget.properties.map(p => `${p.name}=${p.initialValue}`).join(', ')}`);\n    }\n  }\n\n  /**\n   * Find all field references (this._fieldName) in a method body\n   */\n  findFieldReferencesInBody(body) {\n    const fields = [];\n\n    // Simple traversal to find this.fieldName patterns\n    // This is a basic implementation - enhance as needed\n    const traverse = (node) => {\n      if (!node) return;\n\n      // Look for MemberExpression: this._fieldName\n      if (node.type === 'MemberExpression') {\n        if (node.object?.name === 'this' && node.property?.name) {\n          fields.push(node.property.name);\n        }\n      }\n\n      // Recursively traverse all node properties\n      for (const key in node) {\n        if (key !== 'location' && typeof node[key] === 'object') {\n          if (Array.isArray(node[key])) {\n            node[key].forEach(traverse);\n          } else {\n            traverse(node[key]);\n          }\n        }\n      }\n    };\n\n    traverse(body);\n    return [...new Set(fields)]; // Remove duplicates\n  }\n\n  /**\n   * Infer the type of a field from its initializer\n   */\n  inferFieldType(initialValue) {\n    if (!initialValue) return 'any';\n\n    if (initialValue.type === 'Literal') {\n      const val = initialValue.value;\n      if (typeof val === 'number') return 'int' | 'double';\n      if (typeof val === 'boolean') return 'bool';\n      if (typeof val === 'string') return 'String';\n      if (val === null) return 'null';\n    }\n\n    if (initialValue.type === 'Identifier') {\n      return initialValue.name;\n    }\n\n    if (initialValue.type === 'ArrayExpression') {\n      return 'List';\n    }\n\n    if (initialValue.type === 'ObjectExpression') {\n      return 'Map';\n    }\n\n    return 'dynamic';\n  }\n\n  /**\n   * Extract a function declaration\n   */\n  extractFunctionDeclaration(funcNode) {\n    const name = funcNode.id?.name || 'anonymous';\n    const location = funcNode.location;\n\n    const func = {\n      name,\n      type: 'function',\n      location,\n      params: funcNode.params?.map((p) => ({\n        name: p.name?.name || 'param',\n        optional: p.optional || false,\n      })) || [],\n      isAsync: funcNode.isAsync || false,\n      isEntryPoint: false,\n    };\n\n    this.functions.set(name, func);\n  }\n\n  /**\n   * Phase 2: Detect which classes are widgets\n   */\n  detectWidgets() {\n    this.widgets.forEach((widget) => {\n      if (!widget.superClass) {\n        widget.type = 'class';\n        return;\n      }\n\n      const superClass = widget.superClass;\n\n      if (superClass === 'StatelessWidget') {\n        widget.type = 'stateless';\n        this.logger.trace(`[WidgetAnalyzer]     ${widget.name} is StatelessWidget`);\n      } else if (superClass === 'StatefulWidget') {\n        widget.type = 'stateful';\n        this.logger.trace(`[WidgetAnalyzer]     ${widget.name} is StatefulWidget`);\n      } else if (superClass?.startsWith('State')) {\n        widget.type = 'state';\n        this.logger.trace(`[WidgetAnalyzer]     ${widget.name} is State class`);\n      } else {\n        widget.type = 'component';\n      }\n    });\n  }\n\n  /**\n   * Phase 3: Extract imports\n   */\n  // In flutterjs_widget_analyzer.js\n  extractImports() {\n    if (!this.ast.body) return;\n\n    this.ast.body.forEach((node) => {\n      if (node.type === 'ImportDeclaration') {\n        const source = node.source?.value;\n\n        // \u2705 Get all imported items (handles multi-line properly)\n        const items = node.specifiers?.map((spec) => {\n          // Use the local name (after 'as')\n          return spec.local?.name || spec.imported?.name;\n        }) || [];\n\n        this.imports.push({\n          source,\n          items,\n          specifiers: node.specifiers, // Keep raw specifiers for later\n        });\n\n        this.externalDependencies.add(source);\n      }\n    });\n  }\n\n  /**\n   * Phase 4: Find entry point\n   */\n  findEntryPoint() {\n    if (this.functions.has('main')) {\n      this.entryPoint = 'main';\n      const mainFunc = this.functions.get('main');\n      mainFunc.isEntryPoint = true;\n\n      const mainAstNode = this.ast.body.find(\n        (n) => n.type === 'FunctionDeclaration' && n.id?.name === 'main'\n      );\n\n      if (mainAstNode?.body?.body) {\n        this.rootWidget = this.findRunAppWidget(mainAstNode.body.body);\n      }\n    }\n  }\n\n  /**\n   * Find which widget is passed to runApp()\n   */\n  findRunAppWidget(statements) {\n    for (const stmt of statements) {\n      if (stmt.type === 'ExpressionStatement' && stmt.expression?.type === 'CallExpression') {\n        const call = stmt.expression;\n        if (call.callee?.name === 'runApp' && call.args?.length > 0) {\n          return this.getWidgetNameFromExpression(call.args[0]);\n        }\n      }\n      if (stmt.type === 'ReturnStatement' && stmt.argument?.type === 'CallExpression') {\n        const call = stmt.argument;\n        if (call.callee?.name === 'runApp' && call.args?.length > 0) {\n          return this.getWidgetNameFromExpression(call.args[0]);\n        }\n      }\n    }\n    return null;\n  }\n\n  /**\n   * Extract widget name from expression\n   */\n  getWidgetNameFromExpression(expr) {\n    if (!expr) return null;\n\n    if (expr.type === 'NewExpression') {\n      return expr.callee?.name;\n    }\n\n    if (expr.type === 'CallExpression') {\n      return expr.callee?.name;\n    }\n\n    if (expr.type === 'Identifier') {\n      return expr.name;\n    }\n\n    return null;\n  }\n\n  /**\n   * Phase 5: Build widget tree\n   */\n  buildWidgetTree() {\n    if (!this.rootWidget || !this.widgets.has(this.rootWidget)) {\n      return;\n    }\n\n    const rootWidget = this.widgets.get(this.rootWidget);\n    this.widgetTree = {\n      widget: rootWidget,\n      depth: 0,\n      children: [],\n    };\n  }\n\n  /**\n   * Convert expression to string representation\n   */\n  expressionToString(expr) {\n    if (!expr) return null;\n\n    if (expr.type === 'Literal') {\n      return expr.value;\n    }\n\n    if (expr.type === 'Identifier') {\n      const name = expr.name;\n      if (name === 'true' || name === 'false') return name === 'true';\n      if (name === 'null') return null;\n      if (name === 'undefined') return undefined;\n      return name;\n    }\n\n    return undefined;\n  }\n\n  /**\n   * Get results\n   */\n  getResults() {\n    const widgetArray = Array.from(this.widgets.values()).filter(\n      (w) => w.type === 'stateless' || w.type === 'stateful' || w.type === 'state' || w.type === 'component'\n    );\n\n    this.logger.trace(`[WidgetAnalyzer] getResults() returning ${widgetArray.length} widgets`);\n\n    return {\n      widgets: widgetArray,\n      functions: Array.from(this.functions.values()),\n      imports: this.imports,\n      externalDependencies: Array.from(this.externalDependencies),\n      entryPoint: this.entryPoint,\n      rootWidget: this.rootWidget,\n      widgetTree: this.widgetTree,\n      errors: this.errors,\n    };\n  }\n\n  /**\n   * Get summary statistics\n   */\n  getSummary() {\n    const widgets = Array.from(this.widgets.values());\n    const statelessCount = widgets.filter((w) => w.type === 'stateless').length;\n    const statefulCount = widgets.filter((w) => w.type === 'stateful').length;\n    const stateCount = widgets.filter((w) => w.type === 'state').length;\n\n    return {\n      totalWidgets: widgets.length,\n      statelessWidgets: statelessCount,\n      statefulWidgets: statefulCount,\n      stateClasses: stateCount,\n      totalFunctions: this.functions.size,\n      totalImports: this.imports.length,\n      externalPackages: this.externalDependencies.size,\n      entryPoint: this.entryPoint,\n      rootWidget: this.rootWidget,\n    };\n  }\n\n  /**\n   * Get all errors\n   */\n  getErrors() {\n    return this.errors;\n  }\n}\n\nexport { WidgetAnalyzer };"],
-  "mappings": "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",
-  "names": ["getLogger", "WidgetAnalyzer", "ast", "options", "w", "error", "node", "classNode", "name", "superClass", "location", "widget", "field", "fieldName", "initialValue", "constructorMethod", "m", "method", "methodName", "methodData", "fieldRefs", "p", "body", "fields", "traverse", "key", "val", "funcNode", "func", "source", "items", "spec", "mainFunc", "mainAstNode", "n", "statements", "stmt", "call", "expr", "rootWidget", "widgetArray", "widgets", "statelessCount", "statefulCount", "stateCount"]
-}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/ssr_analyzer.js.map b/packages/flutterjs_engine/src/analyzer/dist/ssr_analyzer.js.map
deleted file mode 100644
index ddba9192..00000000
--- a/packages/flutterjs_engine/src/analyzer/dist/ssr_analyzer.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/ssr_analyzer.js"],
-  "sourcesContent": ["/**\n * FlutterJS SSR Analyzer - Phase 3 (FIXED)\n * Analyzes Server-Side Rendering (SSR) compatibility\n * Detects SSR-safe and unsafe patterns\n * Generates migration path for SSR compliance\n */\n\nimport {\n  HydrationRequirement,\n  LazyLoadOpportunity,\n} from './context_analyzer_data.js';\nimport { getLogger } from './flutterjs_logger.js';\n\nclass SSRAnalyzer {\n  constructor(contextAnalysisResults, stateAnalysisResults = null, options = {}) {\n    // Input from Phase 2 & 3\n    this.contextResults = contextAnalysisResults;\n    this.stateResults = stateAnalysisResults;\n\n    this.options = {\n      strict: false,\n      targetPlatform: 'node',\n      ...options,\n    };\n\n    // Initialize logger\n     this.logger = getLogger().createComponentLogger('SSRAnalyzer');\n\n    // Results storage\n    this.ssrSafePatterns = [];\n    this.ssrUnsafePatterns = [];\n    this.hydrationRequirements = [];\n    this.lazyLoadOpportunities = [];\n    this.ssrMigrationPath = [];\n    this.validationIssues = [];\n\n    // Metrics\n    this.ssrCompatibilityScore = 0;\n    this.hydrationCount = 0;\n    this.errors = [];\n  }\n\n  /**\n   * Main entry point - analyze SSR compatibility\n   */\n  analyze() {\n    this.logger.startSession('SSRAnalysis');\n    this.logger.info('Starting SSR compatibility analysis');\n\n    try {\n      // Phase 1: Detect SSR-safe patterns\n      this.detectSsrSafePatterns();\n      this.logger.count('SSR-safe patterns found', this.ssrSafePatterns.length);\n\n      // Phase 2: Detect SSR-unsafe patterns\n      this.detectSsrUnsafePatterns();\n      this.logger.count('SSR-unsafe patterns found', this.ssrUnsafePatterns.length);\n\n      // Phase 3: Identify hydration needs\n      this.identifyHydrationNeeds();\n      this.logger.count('Hydration dependencies', this.hydrationRequirements.length);\n\n      // Phase 4: Detect lazy load opportunities\n      this.detectLazyLoadOpportunities();\n      this.logger.count('Lazy load opportunities', this.lazyLoadOpportunities.length);\n\n      // Phase 5: Generate migration path\n      this.generateMigrationPath();\n      this.logger.count('Migration steps', this.ssrMigrationPath.length);\n\n      // Phase 6: Validate and score\n      this.validateSsrRequirements();\n      this.calculateCompatibilityScore();\n      this.logger.count('SSR Compatibility Score', this.ssrCompatibilityScore);\n\n      this.logger.success('SSR analysis complete');\n      this.logger.endSession('SSRAnalysis');\n\n      return this.getResults();\n    } catch (error) {\n      this.logger.failure('SSR analysis failed', error.message);\n      this.errors.push(error);\n      this.logger.endSession('SSRAnalysis');\n      return this.getResults();\n    }\n  }\n\n  /**\n   * Phase 1: Detect SSR-safe patterns\n   */\n  detectSsrSafePatterns() {\n    const patterns = [];\n\n    // Pattern 1: InheritedWidget static accessors\n    patterns.push({\n      pattern: 'InheritedWidget static accessors',\n      example: 'ThemeProvider.of(context)',\n      safeFor: 'SSR',\n      why: 'Pure value access, no subscription required',\n      confidence: 1.0,\n      category: 'context-access',\n      frequency: 0,\n    });\n\n    // Pattern 2: context.read<T>() in build()\n    patterns.push({\n      pattern: 'context.read<T>() in build()',\n      example: 'context.read<CounterNotifier>()',\n      safeFor: 'SSR',\n      why: 'Single read at render time, no re-subscription needed',\n      confidence: 0.95,\n      category: 'provider-access',\n      frequency: 0,\n    });\n\n    // Pattern 3: Static property access\n    patterns.push({\n      pattern: 'Theme data access',\n      example: 'theme.primaryColor',\n      safeFor: 'SSR',\n      why: 'Read-only during rendering',\n      confidence: 1.0,\n      category: 'value-access',\n      frequency: 0,\n    });\n\n    // Pattern 4: MediaQuery for initial layout\n    patterns.push({\n      pattern: 'MediaQuery.of() for responsive layout',\n      example: 'MediaQuery.of(context).size.width',\n      safeFor: 'SSR',\n      why: 'Server can set default viewport; client hydrates with actual size',\n      confidence: 0.85,\n      category: 'responsive-design',\n      frequency: 0,\n    });\n\n    // Pattern 5: One-time async operations\n    patterns.push({\n      pattern: 'Async data in FutureBuilder (with cached data)',\n      example: 'FutureBuilder with pre-fetched data',\n      safeFor: 'SSR',\n      why: 'Server can execute async, pass pre-rendered HTML to client',\n      confidence: 0.80,\n      category: 'async-operation',\n      frequency: 0,\n    });\n\n    // Scan context results for actual safe patterns\n    if (this.contextResults && this.contextResults.contextAccessPoints) {\n      this.contextResults.contextAccessPoints.forEach((usage) => {\n        if (usage.ssrSafe) {\n          const pattern = patterns.find((p) => p.example.includes(usage.pattern.split('(')[0]));\n          if (pattern) {\n            pattern.frequency++;\n          }\n\n          this.ssrSafePatterns.push({\n            pattern: usage.pattern,\n            type: usage.type,\n            location: usage.location,\n            example: usage.pattern,\n            why: usage.reason,\n            confidence: 0.95,\n          });\n        }\n      });\n    }\n\n    // Add framework patterns\n    this.ssrSafePatterns.push(...patterns);\n  }\n\n  /**\n   * Phase 2: Detect SSR-unsafe patterns\n   */\n  detectSsrUnsafePatterns() {\n    const basePatterns = [\n      {\n        pattern: 'context.watch<T>() subscriptions',\n        example: 'context.watch<CounterNotifier>()',\n        unsafeFor: 'SSR',\n        why: 'Requires reactive subscription & listeners on client, not available during server render',\n        confidence: 1.0,\n        category: 'provider-subscription',\n        severity: 'error',\n        frequency: 0,\n      },\n      {\n        pattern: 'State mutations in event handlers',\n        example: 'counter.increment() in onPressed',\n        unsafeFor: 'SSR',\n        why: 'Event handlers don\\'t exist on server, mutations have no effect',\n        confidence: 1.0,\n        category: 'state-mutation',\n        severity: 'error',\n        frequency: 0,\n      },\n      {\n        pattern: 'ChangeNotifier.notifyListeners() calls',\n        example: 'notifyListeners() in method',\n        unsafeFor: 'SSR',\n        why: 'Listeners don\\'t exist during initial SSR render',\n        confidence: 0.95,\n        category: 'notification',\n        severity: 'error',\n        frequency: 0,\n      },\n      {\n        pattern: 'Browser APIs',\n        example: 'window.localStorage, document.getElementById()',\n        unsafeFor: 'SSR',\n        why: 'window and document objects don\\'t exist on Node.js server',\n        confidence: 1.0,\n        category: 'browser-api',\n        severity: 'critical',\n        frequency: 0,\n      },\n      {\n        pattern: 'Timers and intervals',\n        example: 'setTimeout, setInterval, setImmediate',\n        unsafeFor: 'SSR',\n        why: 'Can cause unexpected behavior and performance issues during server render',\n        confidence: 0.90,\n        category: 'async-operation',\n        severity: 'warning',\n        frequency: 0,\n      },\n      {\n        pattern: 'Random values without seeding',\n        example: 'Math.random()',\n        unsafeFor: 'SSR',\n        why: 'Different values on server vs client cause hydration mismatch',\n        confidence: 0.99,\n        category: 'determinism',\n        severity: 'error',\n        frequency: 0,\n      },\n      {\n        pattern: 'Navigator and route access',\n        example: 'Navigator.of(context).push()',\n        unsafeFor: 'SSR',\n        why: 'Navigation happens on client, not on server',\n        confidence: 1.0,\n        category: 'navigation',\n        severity: 'warning',\n        frequency: 0,\n      },\n      {\n        pattern: 'GestureDetector and event handlers',\n        example: 'GestureDetector, onTap, onLongPress',\n        unsafeFor: 'SSR',\n        why: 'User interactions don\\'t exist on server',\n        confidence: 1.0,\n        category: 'user-interaction',\n        severity: 'warning',\n        frequency: 0,\n      },\n      {\n        pattern: 'setState in initState or build',\n        example: 'this.setState(() => {...}) in build()',\n        unsafeFor: 'SSR',\n        why: 'Triggers re-render during render cycle, can cause infinite loops',\n        confidence: 0.95,\n        category: 'state-management',\n        severity: 'critical',\n        frequency: 0,\n      },\n    ];\n\n    // Scan context results for actual unsafe patterns\n    if (this.contextResults && this.contextResults.contextAccessPoints) {\n      this.contextResults.contextAccessPoints.forEach((usage) => {\n        if (!usage.ssrSafe) {\n          const pattern = basePatterns.find((p) => p.example.includes(usage.pattern.split('(')[0]));\n          if (pattern) {\n            pattern.frequency++;\n          }\n\n          this.ssrUnsafePatterns.push({\n            pattern: usage.pattern,\n            type: usage.type,\n            location: usage.location,\n            example: usage.pattern,\n            why: usage.reason,\n            confidence: 0.95,\n            severity: 'error',\n            suggestion: usage.getMigrationAdvice?.() || 'Refactor to SSR-safe pattern',\n          });\n        }\n      });\n    }\n\n    // Add base patterns with frequencies\n    this.ssrUnsafePatterns.push(...basePatterns);\n  }\n\n  /**\n   * Phase 3: Identify hydration needs\n   */\n  identifyHydrationNeeds() {\n    const hydrationNeeds = [];\n\n    // Need 1: ChangeNotifier instances\n    if (this.contextResults && this.contextResults.changeNotifiers) {\n      this.contextResults.changeNotifiers.forEach((notifier) => {\n        if (notifier.consumers && notifier.consumers.length > 0) {\n          const requirement = new HydrationRequirement(\n            notifier.name,\n            `State needs to be re-created and listeners re-attached post-hydration for ${notifier.consumers.length} consumer(s)`,\n            0\n          );\n\n          notifier.consumers.forEach((consumer) => {\n            requirement.requiredState.push(`${consumer}.state`);\n          });\n\n          hydrationNeeds.push(requirement);\n          this.hydrationCount++;\n        }\n      });\n    }\n\n    // Need 2: Provider subscriptions\n    if (this.contextResults && this.contextResults.providers) {\n      this.contextResults.providers.forEach((provider) => {\n        if (provider.accessPatterns && provider.accessPatterns.includes('watch')) {\n          const requirement = new HydrationRequirement(\n            `Provider<${provider.valueType}>`,\n            `context.watch() subscriptions need to be re-established on client for reactive updates`,\n            1\n          );\n\n          requirement.requiresProvider(provider.providerType);\n          hydrationNeeds.push(requirement);\n          this.hydrationCount++;\n        }\n      });\n    }\n\n    // Need 3: Event handlers\n    if (this.stateResults && this.stateResults.eventHandlers) {\n      this.stateResults.eventHandlers.forEach((handler) => {\n        if (!hydrationNeeds.some((h) => h.dependency === handler.handler)) {\n          const requirement = new HydrationRequirement(\n            handler.handler,\n            `Event handler \"${handler.handler}\" must be attached to DOM after hydration`,\n            2\n          );\n          hydrationNeeds.push(requirement);\n          this.hydrationCount++;\n        }\n      });\n    }\n\n    hydrationNeeds.sort((a, b) => a.order - b.order);\n    this.hydrationRequirements = hydrationNeeds;\n  }\n\n  /**\n   * Phase 4: Detect lazy load opportunities\n   */\n  detectLazyLoadOpportunities() {\n    const opportunities = [];\n\n    // Opportunity 1: Pages not rendered initially\n    if (this.contextResults && this.contextResults.inheritedWidgets) {\n      this.contextResults.inheritedWidgets.forEach((widget) => {\n        if (widget.usageCount === 0 || (widget.usageCount && widget.usageCount <= 1)) {\n          const opp = new LazyLoadOpportunity(\n            widget.name,\n            `${widget.name} is not needed until user navigates to it`,\n            '15KB',\n            'widget'\n          );\n          opp.setRecommendation('Use LazyRoute or dynamic import: import(widgetPath)');\n          opp.calculatePriority(15);\n          opportunities.push(opp);\n        }\n      });\n    }\n\n    // Opportunity 2: Heavy ChangeNotifiers\n    if (this.contextResults && this.contextResults.changeNotifiers) {\n      this.contextResults.changeNotifiers.forEach((notifier) => {\n        if (notifier.methods && notifier.methods.length > 10) {\n          const opp = new LazyLoadOpportunity(\n            notifier.name,\n            `${notifier.name} is complex and only needed if feature is used`,\n            '8KB',\n            'notifier'\n          );\n          opp.setRecommendation('Lazy create in Provider: create: (context) => Provider.lazy(() => import(...))');\n          opp.calculatePriority(8);\n          opportunities.push(opp);\n        }\n      });\n    }\n\n    this.lazyLoadOpportunities = opportunities;\n  }\n\n  /**\n   * Phase 5: Generate migration path\n   */\n  generateMigrationPath() {\n    const steps = [];\n\n    // Step 1: Replace context.watch()\n    const watchUnsafe = this.ssrUnsafePatterns.filter((p) => p.pattern?.includes('watch'));\n    if (watchUnsafe.length > 0) {\n      steps.push({\n        step: 1,\n        action: 'Replace context.watch() with context.read() for SSR',\n        locations: watchUnsafe.map((p) => p.location),\n        description: `Found ${watchUnsafe.length} context.watch() calls that need refactoring`,\n        example: `\n// Before (not SSR safe):\nfinal counter = context.watch<CounterNotifier>();\n\n// After (SSR safe):\nfinal counter = context.read<CounterNotifier>();\n// Subscribe to changes in didChangeDependencies() instead (client-only)`,\n        effort: 'medium',\n        priority: 'high',\n        files: watchUnsafe.length,\n      });\n    }\n\n    // Step 2: Move state mutations\n    const mutationUnsafe = this.ssrUnsafePatterns.filter((p) => p.pattern?.includes('mutation'));\n    if (mutationUnsafe.length > 0) {\n      steps.push({\n        step: 2,\n        action: 'Move notifyListeners() calls to client-only code',\n        locations: mutationUnsafe.map((p) => p.location),\n        description: `Found ${mutationUnsafe.length} state mutations that don't work in SSR`,\n        example: `\n// Before (not SSR safe):\ncounter.increment();\n\n// After (SSR safe):\nif (kIsWeb) {  // Only on client\n  counter.increment();\n}`,\n        effort: 'low',\n        priority: 'high',\n        files: mutationUnsafe.length,\n      });\n    }\n\n    // Step 3: Implement hydration layer\n    if (this.hydrationRequirements.length > 0) {\n      steps.push({\n        step: 3,\n        action: 'Create hydration layer to re-subscribe listeners post-render',\n        description: `App requires hydration for ${this.hydrationRequirements.length} dependencies`,\n        example: `\n// In main.js or app.dart after runApp():\nif (kIsWeb) {\n  // Re-create listeners, reattach subscriptions\n  hydrate(flutterApp);\n}`,\n        effort: 'high',\n        priority: 'critical',\n        dependencies: this.hydrationRequirements.length,\n      });\n    }\n\n    // Step 4: Add browser API checks\n    const browserApiUnsafe = this.ssrUnsafePatterns.filter((p) => p.category === 'browser-api');\n    if (browserApiUnsafe.length > 0) {\n      steps.push({\n        step: 4,\n        action: 'Wrap browser-specific APIs in kIsWeb checks',\n        description: `Found ${browserApiUnsafe.length} browser API calls`,\n        example: `\n// Before:\nfinal stored = window.localStorage.getItem('key');\n\n// After:\nfinal stored = kIsWeb ? window.localStorage.getItem('key') : null;`,\n        effort: 'low',\n        priority: 'medium',\n        files: browserApiUnsafe.length,\n      });\n    }\n\n    // Step 5: Implement lazy loading\n    if (this.lazyLoadOpportunities.length > 0) {\n      steps.push({\n        step: 5,\n        action: 'Implement code splitting for lazy-loaded widgets',\n        description: `${this.lazyLoadOpportunities.length} opportunities identified`,\n        example: `\n// Use dynamic routes\nfinal route = await LazyRoute.create(\n  () => import('pages/DetailPage.dart')\n);`,\n        effort: 'medium',\n        priority: 'low',\n        opportunities: this.lazyLoadOpportunities.length,\n      });\n    }\n\n    // Step 6: Test SSR rendering\n    steps.push({\n      step: steps.length + 1,\n      action: 'Set up SSR testing pipeline',\n      description: 'Render app on server, verify HTML structure',\n      example: `\n// Test SSR output matches CSR:\nconst serverHtml = await renderAppOnServer();\nconst clientHtml = await renderAppOnClient();\nassert(serverHtml === clientHtml, 'SSR/CSR mismatch');`,\n      effort: 'medium',\n      priority: 'critical',\n    });\n\n    this.ssrMigrationPath = steps;\n  }\n\n  /**\n   * Phase 6: Validate SSR requirements\n   */\n  validateSsrRequirements() {\n    // Check 1: Browser APIs\n    this.ssrUnsafePatterns.forEach((pattern) => {\n      if (pattern.category === 'browser-api') {\n        this.validationIssues.push({\n          type: 'browser-api-usage',\n          severity: 'critical',\n          pattern: pattern.pattern,\n          location: pattern.location,\n          message: `Browser API \"${pattern.pattern}\" is not available on server`,\n          suggestion: 'Wrap in kIsWeb check or use platform-agnostic alternative',\n        });\n      }\n    });\n\n    // Check 2: Non-deterministic operations\n    this.ssrUnsafePatterns.forEach((pattern) => {\n      if (pattern.category === 'determinism') {\n        this.validationIssues.push({\n          type: 'non-deterministic',\n          severity: 'error',\n          pattern: pattern.pattern,\n          location: pattern.location,\n          message: `Non-deterministic operation \"${pattern.pattern}\" causes hydration mismatch`,\n          suggestion: 'Use seeded random or remove randomness from render path',\n        });\n      }\n    });\n\n    // Check 3: Event handlers in build\n    const eventHandlersInBuild = this.ssrUnsafePatterns.filter(\n      (p) => p.category === 'user-interaction'\n    );\n    if (eventHandlersInBuild.length > 0) {\n      this.validationIssues.push({\n        type: 'event-handlers-in-build',\n        severity: 'warning',\n        count: eventHandlersInBuild.length,\n        message: `${eventHandlersInBuild.length} event handlers defined in build() - they'll be recreated on every render`,\n        suggestion: 'Move event handler definitions to initState or class level',\n      });\n    }\n\n    // Check 4: Hydration completeness\n    if (this.hydrationRequirements.length > 0 && this.ssrMigrationPath.length === 0) {\n      this.validationIssues.push({\n        type: 'incomplete-hydration',\n        severity: 'error',\n        message: `App has ${this.hydrationRequirements.length} hydration needs but no hydration layer implemented`,\n        suggestion: 'Add hydration step to migration path',\n      });\n    }\n  }\n\n  /**\n   * Calculate SSR compatibility score (0-100)\n   * FIXED: criticalIssues is now defined properly\n   */\n  calculateCompatibilityScore() {\n    let score = 100;\n\n    // Deduct for unsafe patterns\n    const unsafeCount = this.ssrUnsafePatterns.length;\n    score -= Math.min(unsafeCount * 5, 40);\n\n    // Deduct for critical issues\n    const criticalIssues = this.validationIssues.filter((i) => i.severity === 'critical');\n    score -= criticalIssues.length * 15;\n\n    // Deduct for browser APIs\n    const browserApiIssues = this.validationIssues.filter((i) => i.type === 'browser-api-usage');\n    score -= browserApiIssues.length * 10;\n\n    // Add bonus for SSR-safe patterns\n    const safeCount = this.ssrSafePatterns.length;\n    if (safeCount > 0) {\n      score += Math.min(safeCount * 2, 15);\n    }\n\n    // Add bonus for successful hydration setup\n    if (this.ssrMigrationPath.length > 3) {\n      score += 10;\n    }\n\n    // Ensure score is in valid range\n    this.ssrCompatibilityScore = Math.max(0, Math.min(100, score));\n  }\n\n  /**\n   * Determine overall SSR compatibility\n   */\n  getOverallCompatibility() {\n    if (this.ssrCompatibilityScore >= 85) {\n      return 'full';\n    } else if (this.ssrCompatibilityScore >= 60) {\n      return 'partial';\n    } else if (this.ssrCompatibilityScore >= 30) {\n      return 'limited';\n    } else {\n      return 'none';\n    }\n  }\n\n  /**\n   * Get estimated migration effort\n   */\n  getEstimatedEffort() {\n    const totalEffort = this.ssrMigrationPath.reduce((sum, step) => {\n      const effortMap = { low: 1, medium: 2, high: 3 };\n      return sum + (effortMap[step.effort] || 0);\n    }, 0);\n\n    if (totalEffort <= 3) {\n      return 'minimal';\n    } else if (totalEffort <= 6) {\n      return 'moderate';\n    } else if (totalEffort <= 9) {\n      return 'significant';\n    } else {\n      return 'major-rewrite';\n    }\n  }\n\n  /**\n   * Get results - FIXED: criticalIssues defined locally\n   */\n  getResults() {\n    // FIXED: Define criticalIssues locally\n    const criticalIssues = this.validationIssues.filter((i) => i.severity === 'critical');\n\n    return {\n      overallCompatibility: this.getOverallCompatibility(),\n      ssrCompatibilityScore: this.ssrCompatibilityScore,\n      ssrReadinessScore: this.ssrCompatibilityScore,\n\n      // Patterns\n      ssrSafePatterns: this.ssrSafePatterns,\n      ssrUnsafePatterns: this.ssrUnsafePatterns,\n\n      // Hydration & Optimization\n      hydrationRequirements: this.hydrationRequirements,\n      hydrationCount: this.hydrationCount,\n      lazyLoadOpportunities: this.lazyLoadOpportunities,\n\n      // Migration Path\n      ssrMigrationPath: this.ssrMigrationPath,\n      estimatedEffort: this.getEstimatedEffort(),\n\n      // Validation & Issues\n      validationIssues: this.validationIssues,\n      criticalIssues: criticalIssues,\n      warningIssues: this.validationIssues.filter((i) => i.severity === 'warning'),\n\n      // Summary\n      summary: {\n        compatibility: this.getOverallCompatibility(),\n        score: this.ssrCompatibilityScore,\n        safePatterns: this.ssrSafePatterns.length,\n        unsafePatterns: this.ssrUnsafePatterns.length,\n        hydrationNeeded: this.hydrationCount,\n        migrationSteps: this.ssrMigrationPath.length,\n        criticalIssues: criticalIssues.length,\n        effort: this.getEstimatedEffort(),\n      },\n\n      errors: this.errors,\n    };\n  }\n}\n\nexport { SSRAnalyzer };"],
-  "mappings": "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",
-  "names": ["HydrationRequirement", "LazyLoadOpportunity", "getLogger", "SSRAnalyzer", "contextAnalysisResults", "stateAnalysisResults", "options", "error", "patterns", "usage", "pattern", "p", "basePatterns", "hydrationNeeds", "notifier", "requirement", "consumer", "provider", "handler", "h", "a", "b", "opportunities", "widget", "opp", "steps", "watchUnsafe", "mutationUnsafe", "browserApiUnsafe", "eventHandlersInBuild", "score", "unsafeCount", "criticalIssues", "i", "browserApiIssues", "safeCount", "totalEffort", "sum", "step"]
-}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/state_analyzer_data.js.map b/packages/flutterjs_engine/src/analyzer/dist/state_analyzer_data.js.map
deleted file mode 100644
index 53847ff8..00000000
--- a/packages/flutterjs_engine/src/analyzer/dist/state_analyzer_data.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/state_analyzer_data.js"],
-  "sourcesContent": ["/**\n * FlutterJS State Analyzer - Data Classes\n * Phase 2 Implementation\n * \n * Represents all state-related concepts in structured classes\n */\n\n// ============================================================================\n// STATE CLASS METADATA\n// ============================================================================\n\n/**\n * Metadata about a State class\n * Represents: class _MyCounterState extends State<MyCounter> { ... }\n */\nclass StateClassMetadata {\n  constructor(name, location, linkedStatefulWidget = null) {\n    // Identity\n    this.name = name;\n    this.location = location;\n    this.linkedStatefulWidget = linkedStatefulWidget;\n\n    // Contents\n    this.stateFields = [];          // _count, _isLoading, etc.\n    this.lifecycleMethods = [];     // initState, dispose, build, etc.\n    this.eventHandlers = [];        // Handlers for events\n    this.otherMethods = [];         // Helper methods like _increment\n\n    // Metadata\n    this.extends = 'State';         // Usually State or State<Widget>\n    this.constructor = null;        // Constructor info\n  }\n\n  /**\n   * Add a state field to this class\n   */\n  addStateField(field) {\n    if (field instanceof StateField) {\n      this.stateFields.push(field);\n    }\n  }\n\n  /**\n   * Add a lifecycle method\n   */\n  addLifecycleMethod(method) {\n    if (method instanceof LifecycleMethod) {\n      this.lifecycleMethods.push(method);\n    }\n  }\n\n  /**\n   * Get summary\n   */\n  summary() {\n    return {\n      name: this.name,\n      statefulWidget: this.linkedStatefulWidget,\n      fieldCount: this.stateFields.length,\n      lifecycleMethodCount: this.lifecycleMethods.length,\n      totalMethods: this.otherMethods.length,\n    };\n  }\n}\n\n// ============================================================================\n// STATE FIELD\n// ============================================================================\n\n/**\n * Represents a single state variable\n * Example: _count = 0\n */\nclass StateField {\n  constructor(name, type, initialValue, location) {\n    // Identity\n    this.name = name;\n    this.type = type;              // 'number', 'string', 'boolean', 'any', etc.\n    this.location = location;\n\n    // Initial value\n    this.initialValue = initialValue;\n    this.initialValueString = this.valueToString(initialValue);\n\n    // Mutability\n    this.isMutable = true;\n    this.mutations = [];             // Record of where field is mutated\n\n    // Usage tracking\n    this.usedInMethods = [];         // Which methods read this field\n    this.mutatedInMethods = [];      // Which methods mutate this field\n    this.usedInBuild = false;        // Is it used in build() method?\n  }\n\n  /**\n   * Record that this field is used in a method\n   */\n  recordUsage(methodName) {\n    if (!this.usedInMethods.includes(methodName)) {\n      this.usedInMethods.push(methodName);\n    }\n  }\n\n  /**\n   * Record that this field is mutated in a method\n   */\n  recordMutation(methodName, operation = '=', location = null) {\n    this.mutations.push({\n      method: methodName,\n      operation,    // '++', '--', '=', '+=', '-=', etc.\n      location,\n      wrappedInSetState: false,  // Will be updated during validation\n    });\n\n    if (!this.mutatedInMethods.includes(methodName)) {\n      this.mutatedInMethods.push(methodName);\n    }\n  }\n\n  /**\n   * Check if field is used anywhere\n   */\n  isUsed() {\n    return this.usedInMethods.length > 0 || this.usedInBuild;\n  }\n\n  /**\n   * Convert value to string representation\n   */\n  valueToString(value) {\n    if (value === null) return 'null';\n    if (value === undefined) return 'undefined';\n    if (typeof value === 'string') return `\"${value}\"`;\n    if (typeof value === 'boolean') return value ? 'true' : 'false';\n    if (typeof value === 'number') return String(value);\n    return String(value);\n  }\n\n  /**\n   * Get summary\n   */\n  summary() {\n    return {\n      name: this.name,\n      type: this.type,\n      initialValue: this.initialValueString,\n      isUsed: this.isUsed(),\n      usedInMethods: this.usedInMethods,\n      mutatedInMethods: this.mutatedInMethods,\n      mutationCount: this.mutations.length,\n    };\n  }\n}\n\n// ============================================================================\n// LIFECYCLE METHOD\n// ============================================================================\n\n/**\n * Represents a lifecycle hook method\n * Examples: initState(), dispose(), didUpdateWidget(), build()\n */\nclass LifecycleMethod {\n  constructor(name, location, params = [], callsSuper = false, hasSideEffects = false) {\n    // Identity\n    this.name = name;\n    this.location = location;\n    this.params = params;\n\n    // Behavior\n    this.callsSuper = callsSuper;\n    this.hasSideEffects = hasSideEffects;\n\n    // Validation\n    this.shouldCallSuper = false;   // True if this method should call super\n    this.validationIssues = [];\n  }\n\n  /**\n   * Check if this method type should call super\n   */\n  setMustCallSuper(mustCall) {\n    this.shouldCallSuper = mustCall;\n  }\n\n  /**\n   * Add a validation issue\n   */\n  addIssue(type, message, severity = 'warning') {\n    this.validationIssues.push({\n      type,\n      message,\n      severity,\n    });\n  }\n\n  /**\n   * Check if method is valid\n   */\n  isValid() {\n    // dispose() MUST call super\n    if (this.name === 'dispose' && !this.callsSuper) {\n      return false;\n    }\n\n    // initState should call super\n    if (this.name === 'initState' && !this.callsSuper) {\n      return false;\n    }\n\n    return this.validationIssues.filter(v => v.severity === 'error').length === 0;\n  }\n\n  /**\n   * Get summary\n   */\n  summary() {\n    return {\n      name: this.name,\n      callsSuper: this.callsSuper,\n      shouldCallSuper: this.shouldCallSuper,\n      hasSideEffects: this.hasSideEffects,\n      isValid: this.isValid(),\n      issues: this.validationIssues,\n    };\n  }\n}\n\n// ============================================================================\n// STATE UPDATE CALL\n// ============================================================================\n\n/**\n * Represents a single setState() call\n * Example: this.setState(() => { this._count++; })\n */\nclass StateUpdateCall {\n  constructor(location, method, updates = [], stateClassName) {\n    // Location\n    this.location = location;\n    this.method = method;           // Which method contains this call\n    this.stateClassName = stateClassName;\n\n    // What's being updated\n    this.updates = updates || [];   // Field names being updated\n\n    // Validation\n    this.isValid = true;\n    this.issues = [];\n  }\n\n  /**\n   * Add a validation issue\n   */\n  addIssue(type, message, severity = 'error') {\n    this.issues.push({\n      type,\n      message,\n      severity,\n    });\n    if (severity === 'error') {\n      this.isValid = false;\n    }\n  }\n\n  /**\n   * Check if this call updates a specific field\n   */\n  updatesField(fieldName) {\n    return this.updates.includes(fieldName);\n  }\n\n  /**\n   * Get summary\n   */\n  summary() {\n    return {\n      method: this.method,\n      updates: this.updates,\n      isValid: this.isValid,\n      issueCount: this.issues.length,\n      issues: this.issues,\n    };\n  }\n}\n\n// ============================================================================\n// EVENT HANDLER\n// ============================================================================\n\n/**\n * Represents an event handler attached to a widget\n * Example: onPressed: () => this._increment()\n */\nclass EventHandler {\n  constructor(event, handler, location, component = 'Unknown') {\n    // Identification\n    this.event = event;             // 'onPressed', 'onChange', etc.\n    this.handler = handler;         // Method name: '_increment'\n    this.location = location;\n    this.component = component;     // 'Button', 'TextField', etc.\n\n    // Validation\n    this.isValid = true;\n    this.issues = [];\n    this.triggersSetState = false;  // Does handler call setState?\n  }\n\n  /**\n   * Add validation issue\n   */\n  addIssue(type, message, severity = 'error') {\n    this.issues.push({\n      type,\n      message,\n      severity,\n    });\n    if (severity === 'error') {\n      this.isValid = false;\n    }\n  }\n\n  /**\n   * Mark that this handler triggers setState\n   */\n  marksSetState(trigger = true) {\n    this.triggersSetState = trigger;\n  }\n\n  /**\n   * Get summary\n   */\n  summary() {\n    return {\n      event: this.event,\n      handler: this.handler,\n      component: this.component,\n      triggersSetState: this.triggersSetState,\n      isValid: this.isValid,\n      issues: this.issues,\n    };\n  }\n}\n\n// ============================================================================\n// DEPENDENCY GRAPH\n// ============================================================================\n\n/**\n * Maps relationships between state, methods, and events\n */\nclass DependencyGraph {\n  constructor() {\n    // State \u2192 Methods: which methods use which state\n    this.stateToMethods = new Map();\n\n    // Method \u2192 State: which state each method uses\n    this.methodToState = new Map();\n\n    // Event \u2192 State: which state each event updates\n    this.eventToState = new Map();\n\n    // Method \u2192 Methods: which methods call which methods\n    this.methodToMethods = new Map();\n  }\n\n  /**\n   * Add state \u2192 method mapping\n   */\n  addStateUse(stateName, methodName) {\n    if (!this.stateToMethods.has(stateName)) {\n      this.stateToMethods.set(stateName, []);\n    }\n    const methods = this.stateToMethods.get(stateName);\n    if (!methods.includes(methodName)) {\n      methods.push(methodName);\n    }\n  }\n\n  /**\n   * Add method \u2192 state mapping\n   */\n  addMethodStateUse(methodName, stateName) {\n    if (!this.methodToState.has(methodName)) {\n      this.methodToState.set(methodName, []);\n    }\n    const states = this.methodToState.get(methodName);\n    if (!states.includes(stateName)) {\n      states.push(stateName);\n    }\n  }\n\n  /**\n   * Add event \u2192 state mapping\n   */\n  addEventStateUse(eventName, stateName) {\n    if (!this.eventToState.has(eventName)) {\n      this.eventToState.set(eventName, []);\n    }\n    const states = this.eventToState.get(eventName);\n    if (!states.includes(stateName)) {\n      states.push(stateName);\n    }\n  }\n\n  /**\n   * Get all state that a method depends on\n   */\n  getStateForMethod(methodName) {\n    return this.methodToState.get(methodName) || [];\n  }\n\n  /**\n   * Get all methods that use a state\n   */\n  getMethodsForState(stateName) {\n    return this.stateToMethods.get(stateName) || [];\n  }\n\n  /**\n   * Get state that an event triggers\n   */\n  getStateForEvent(eventName) {\n    return this.eventToState.get(eventName) || [];\n  }\n\n  /**\n   * Get summary\n   */\n  summary() {\n    return {\n      stateToMethods: Object.fromEntries(this.stateToMethods),\n      methodToState: Object.fromEntries(this.methodToState),\n      eventToState: Object.fromEntries(this.eventToState),\n    };\n  }\n}\n\n// ============================================================================\n// VALIDATION RESULT\n// ============================================================================\n\n/**\n * Represents a single validation issue found during analysis\n */\nclass ValidationResult {\n  constructor(type, message, severity = 'warning', location = null) {\n    this.type = type;               // 'unused-state', 'missing-super', etc.\n    this.message = message;\n    this.severity = severity;       // 'error', 'warning', 'info'\n    this.location = location;\n\n    this.suggestion = null;         // How to fix it\n    this.affectedItem = null;       // Field, method, etc. that has the issue\n  }\n\n  /**\n   * Add a suggestion for fixing the issue\n   */\n  withSuggestion(suggestion) {\n    this.suggestion = suggestion;\n    return this;\n  }\n\n  /**\n   * Set what item is affected\n   */\n  affecting(item) {\n    this.affectedItem = item;\n    return this;\n  }\n\n  /**\n   * Convert to output format\n   */\n  toObject() {\n    return {\n      type: this.type,\n      message: this.message,\n      severity: this.severity,\n      location: this.location,\n      suggestion: this.suggestion,\n      affectedItem: this.affectedItem,\n    };\n  }\n}\n\n// ============================================================================\n// ANALYSIS SUMMARY\n// ============================================================================\n\n/**\n * Summary statistics of the entire state analysis\n */\nclass AnalysisSummary {\n  constructor() {\n    this.stateClassCount = 0;\n    this.stateFieldCount = 0;\n    this.setStateCallCount = 0;\n    this.lifecycleMethodCount = 0;\n    this.eventHandlerCount = 0;\n\n    this.errorCount = 0;\n    this.warningCount = 0;\n\n    this.complexityScore = 0;      // 0-100\n    this.healthScore = 0;          // 0-100\n  }\n\n  /**\n   * Calculate complexity score based on state complexity\n   */\n  calculateComplexity() {\n    let score = 0;\n\n    // More state fields = more complex\n    score += Math.min(this.stateFieldCount * 10, 40);\n\n    // More setState calls = more complex\n    score += Math.min(this.setStateCallCount * 5, 30);\n\n    // More event handlers = more complex\n    score += Math.min(this.eventHandlerCount * 2, 20);\n\n    this.complexityScore = Math.min(100, score);\n    return this.complexityScore;\n  }\n\n  /**\n   * Calculate health score\n   */\n  calculateHealth() {\n    let score = 100;\n\n    // Deduct for errors\n    score -= this.errorCount * 10;\n\n    // Deduct for warnings\n    score -= this.warningCount * 2;\n\n    // Deduct for high complexity\n    if (this.complexityScore > 70) {\n      score -= 10;\n    }\n\n    this.healthScore = Math.max(0, score);\n    return this.healthScore;\n  }\n\n  /**\n   * Get summary object\n   */\n  toObject() {\n    return {\n      stateClasses: this.stateClassCount,\n      stateFields: this.stateFieldCount,\n      setStateCalls: this.setStateCallCount,\n      lifecycleMethods: this.lifecycleMethodCount,\n      eventHandlers: this.eventHandlerCount,\n      errors: this.errorCount,\n      warnings: this.warningCount,\n      complexityScore: this.complexityScore,\n      healthScore: this.healthScore,\n    };\n  }\n}\n\n// ============================================================================\n// EXPORTS\n// ============================================================================\n\nexport {\n  StateClassMetadata,\n  StateField,\n  LifecycleMethod,\n  StateUpdateCall,\n  EventHandler,\n  DependencyGraph,\n  ValidationResult,\n  AnalysisSummary,\n};"],
-  "mappings": "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",
-  "names": ["StateClassMetadata", "name", "location", "linkedStatefulWidget", "field", "StateField", "method", "LifecycleMethod", "type", "initialValue", "methodName", "operation", "value", "params", "callsSuper", "hasSideEffects", "mustCall", "message", "severity", "v", "StateUpdateCall", "updates", "stateClassName", "fieldName", "EventHandler", "event", "handler", "component", "trigger", "DependencyGraph", "stateName", "methods", "states", "eventName", "ValidationResult", "suggestion", "item", "AnalysisSummary", "score"]
-}
diff --git a/packages/flutterjs_engine/src/analyzer/dist/state_analyzer_implementation.js.map b/packages/flutterjs_engine/src/analyzer/dist/state_analyzer_implementation.js.map
deleted file mode 100644
index 112ebbcd..00000000
--- a/packages/flutterjs_engine/src/analyzer/dist/state_analyzer_implementation.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/state_analyzer_implementation.js"],
-  "sourcesContent": ["/**\n * FlutterJS State Analyzer\n * Phase 2 Implementation\n * \n * Extracts state management information from StatefulWidget/State classes\n * No external dependencies - pure Node.js\n */\n\n// ============================================================================\n// STATE ANALYZER CLASS\n// ============================================================================\n\nclass StateAnalyzer {\n  constructor(ast, widgets, options = {}) {\n    this.ast = ast;\n    this.widgets = widgets; // from Phase 1 WidgetAnalyzer\n    this.options = {\n      strict: false,\n      ...options,\n    };\n\n    // Results storage\n    this.stateClasses = new Map();\n    this.stateFields = new Map();\n    this.setStateCalls = [];\n    this.lifecycleMethods = [];\n    this.eventHandlers = [];\n    this.dependencyGraph = null;\n    this.validationResults = [];\n    this.errors = [];\n  }\n\n  /**\n   * Main entry point - analyze all state-related code\n   */\n  analyze() {\n    if (!this.ast || !this.ast.body) {\n      throw new Error('Invalid AST provided');\n    }\n\n    try {\n      // Phase 1: Find and link StatefulWidget/State pairs\n      this.linkStatefulToState();\n\n      // Phase 2: Extract state fields from State classes\n      this.extractStateFields();\n\n      // Phase 3: Find setState calls\n      this.findSetStateCalls();\n\n      // Phase 4: Extract lifecycle methods\n      this.extractLifecycleMethods();\n\n      // Phase 5: Extract event handlers\n      this.extractEventHandlers();\n\n      // Phase 6: Build dependency graph\n      this.buildDependencyGraph();\n\n      // Phase 7: Validate everything\n      this.validateState();\n\n      return this.getResults();\n    } catch (error) {\n      this.errors.push(error);\n      return this.getResults();\n    }\n  }\n\n  /**\n   * Phase 1: Link StatefulWidget to State class\n   * \n   * StatefulWidget.createState() returns State class instance\n   * We need to find the return value and match it with State class\n   */\n  linkStatefulToState() {\n    this.widgets.forEach((widget) => {\n      if (widget.type !== 'stateful') return;\n\n      // Find the createState method\n      const createStateMethod = widget.methods.find(\n        (m) => m.name === 'createState'\n      );\n\n      if (!createStateMethod) {\n        this.errors.push({\n          type: 'missing-create-state',\n          widget: widget.name,\n          message: `StatefulWidget \"${widget.name}\" has no createState() method`,\n        });\n        return;\n      }\n\n      // Find the corresponding class declaration in AST\n      const widgetNode = this.ast.body.find(\n        (n) => n.type === 'ClassDeclaration' && n.id.name === widget.name\n      );\n\n      if (!widgetNode) return;\n\n      // Find what createState returns\n      const createStateNode = widgetNode.body.methods.find(\n        (m) => m.key.name === 'createState'\n      );\n\n      if (!createStateNode) return;\n\n      // Extract the returned State class name\n      const stateClassName = this.extractReturnedClassName(createStateNode.body);\n\n      if (!stateClassName) {\n        this.errors.push({\n          type: 'cannot-parse-create-state',\n          widget: widget.name,\n          message: `Cannot determine which State class is returned by ${widget.name}.createState()`,\n        });\n        return;\n      }\n\n      // Find the State class\n      const stateClassNode = this.ast.body.find(\n        (n) => n.type === 'ClassDeclaration' && n.id.name === stateClassName\n      );\n\n      if (!stateClassNode) {\n        this.errors.push({\n          type: 'missing-state-class',\n          widget: widget.name,\n          stateClass: stateClassName,\n          message: `State class \"${stateClassName}\" not found`,\n        });\n        return;\n      }\n\n      // Check if it extends State<Widget>\n      if (!stateClassNode.superClass || !stateClassNode.superClass.name.startsWith('State')) {\n        this.errors.push({\n          type: 'invalid-state-class',\n          stateClass: stateClassName,\n          message: `Class \"${stateClassName}\" does not extend State`,\n        });\n        return;\n      }\n\n      // Create StateClassMetadata\n      const stateMetadata = new StateClassMetadata(\n        stateClassName,\n        stateClassNode.location,\n        widget.name\n      );\n\n      this.stateClasses.set(stateClassName, {\n        astNode: stateClassNode,\n        metadata: stateMetadata,\n      });\n\n      // Link bidirectional\n      widget.linkedStateClass = stateClassName;\n    });\n  }\n\n  /**\n   * Extract the class name returned from a method\n   * Looks for: return new ClassName(); or return new ClassName();\n   */\n  extractReturnedClassName(methodBody) {\n    if (!methodBody) return null;\n\n    // Handle BlockStatement: { return new ClassName(); }\n    if (methodBody.type === 'BlockStatement' && methodBody.body) {\n      for (const stmt of methodBody.body) {\n        if (stmt.type === 'ReturnStatement' && stmt.argument) {\n          const className = this.getClassNameFromExpression(stmt.argument);\n          if (className) return className;\n        }\n      }\n    }\n\n    // Handle direct expression: return new ClassName();\n    if (methodBody.type === 'NewExpression') {\n      return methodBody.callee.name;\n    }\n\n    return null;\n  }\n\n  /**\n   * Extract class name from expression (new ClassName or ClassName)\n   */\n  getClassNameFromExpression(expr) {\n    if (!expr) return null;\n\n    if (expr.type === 'NewExpression' && expr.callee) {\n      return expr.callee.name;\n    }\n\n    if (expr.type === 'Identifier') {\n      return expr.name;\n    }\n\n    if (expr.type === 'CallExpression' && expr.callee) {\n      if (expr.callee.type === 'Identifier') {\n        return expr.callee.name;\n      }\n    }\n\n    return null;\n  }\n\n  /**\n   * Phase 2: Extract state fields from State classes\n   * \n   * State fields are class properties that can be mutated\n   * Examples: _count = 0, _isLoading = false\n   */\n  extractStateFields() {\n    this.stateClasses.forEach(({ astNode, metadata }) => {\n      if (!astNode.body || !astNode.body.fields) return;\n\n      astNode.body.fields.forEach((field) => {\n        const fieldName = field.key.name;\n        const initialValue = field.initialValue;\n\n        // Infer type from initial value\n        const type = this.inferFieldType(initialValue);\n\n        const stateField = new StateField(\n          fieldName,\n          type,\n          this.expressionToValue(initialValue),\n          initialValue ? initialValue.location : field.location\n        );\n\n        // Track in global map and in metadata\n        this.stateFields.set(`${metadata.name}.${fieldName}`, stateField);\n        metadata.stateFields.push(stateField);\n      });\n    });\n  }\n\n  /**\n   * Infer field type from initial value expression\n   */\n  inferFieldType(expr) {\n    if (!expr) return 'any';\n\n    if (expr.type === 'Literal') {\n      if (typeof expr.value === 'number') return 'number';\n      if (typeof expr.value === 'string') return 'string';\n      if (typeof expr.value === 'boolean') return 'boolean';\n      if (expr.value === null) return 'null';\n    }\n\n    if (expr.type === 'Identifier') {\n      const name = expr.name;\n      if (name === 'true' || name === 'false') return 'boolean';\n      if (name === 'null') return 'null';\n      if (name === 'undefined') return 'undefined';\n    }\n\n    // Array literal\n    if (expr.type === 'ArrayLiteral') return 'array';\n\n    // Object literal\n    if (expr.type === 'ObjectLiteral') return 'object';\n\n    // Function call - unknown return type\n    if (expr.type === 'CallExpression') return 'any';\n\n    return 'any';\n  }\n\n  /**\n   * Convert expression to actual value (for initialization)\n   */\n  expressionToValue(expr) {\n    if (!expr) return undefined;\n\n    if (expr.type === 'Literal') {\n      return expr.value;\n    }\n\n    if (expr.type === 'Identifier') {\n      const name = expr.name;\n      if (name === 'true') return true;\n      if (name === 'false') return false;\n      if (name === 'null') return null;\n      if (name === 'undefined') return undefined;\n    }\n\n    return undefined;\n  }\n\n  /**\n   * Phase 3: Find all setState() calls\n   */\n  findSetStateCalls() {\n    this.stateClasses.forEach(({ astNode, metadata }) => {\n      if (!astNode.body || !astNode.body.methods) return;\n\n      // Search all methods for setState calls\n      astNode.body.methods.forEach((method) => {\n        const setStateCalls = this.findSetStateInMethod(method, metadata.name);\n        this.setStateCalls.push(...setStateCalls);\n      });\n    });\n  }\n\n  /**\n   * Find setState calls within a method\n   */\n  findSetStateInMethod(method, stateClassName) {\n    const calls = [];\n    const methodName = method.key.name;\n\n    // Search method body for setState calls\n    if (method.body) {\n      const stmts = method.body.type === 'BlockStatement'\n        ? method.body.body\n        : [method.body];\n\n      stmts.forEach((stmt) => {\n        this.findSetStateInStatement(stmt, calls, methodName, stateClassName);\n      });\n    }\n\n    return calls;\n  }\n\n  /**\n   * Recursively find setState in statements\n   */\n  findSetStateInStatement(stmt, calls, methodName, stateClassName) {\n    if (!stmt) return;\n\n    // Handle expression statements\n    if (stmt.type === 'ExpressionStatement' && stmt.expression) {\n      this.findSetStateInExpression(stmt.expression, calls, methodName, stateClassName);\n    }\n\n    // Handle return statements\n    if (stmt.type === 'ReturnStatement' && stmt.argument) {\n      this.findSetStateInExpression(stmt.argument, calls, methodName, stateClassName);\n    }\n\n    // Handle blocks\n    if (stmt.type === 'BlockStatement' && stmt.body) {\n      stmt.body.forEach((s) => {\n        this.findSetStateInStatement(s, calls, methodName, stateClassName);\n      });\n    }\n  }\n\n  /**\n   * Find setState in expression tree\n   */\n  findSetStateInExpression(expr, calls, methodName, stateClassName) {\n    if (!expr) return;\n\n    // Check if this is a setState call: this.setState(callback)\n    if (expr.type === 'CallExpression') {\n      // Check if it's this.setState(...)\n      const isSetState = this.isSetStateCall(expr);\n\n      if (isSetState) {\n        const updatedFields = this.extractSetStateUpdates(expr, stateClassName);\n        const call = new StateUpdateCall(\n          expr.location,\n          methodName,\n          updatedFields,\n          stateClassName\n        );\n        calls.push(call);\n      }\n\n      // Also check arguments for nested setState calls\n      expr.args.forEach((arg) => {\n        this.findSetStateInExpression(arg, calls, methodName, stateClassName);\n      });\n    }\n\n    // Recursively check nested expressions\n    if (expr.type === 'ObjectLiteral' && expr.properties) {\n      expr.properties.forEach((prop) => {\n        this.findSetStateInExpression(prop.value, calls, methodName, stateClassName);\n      });\n    }\n  }\n\n  /**\n   * Check if expression is this.setState(...)\n   */\n  isSetStateCall(expr) {\n    if (expr.type !== 'CallExpression') return false;\n    if (!expr.callee) return false;\n\n    // Check for member expression: this.setState\n    if (expr.callee.type === 'MemberExpression') {\n      const obj = expr.callee.object;\n      const prop = expr.callee.property;\n\n      // this.setState\n      if (obj.type === 'Identifier' && obj.name === 'this' &&\n        prop.type === 'Identifier' && prop.name === 'setState') {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  /**\n   * Extract which state fields are updated in setState\n   * setState(() => { this._count++; })\n   */\n  extractSetStateUpdates(setStateCall, stateClassName) {\n    const updated = [];\n\n    if (!setStateCall.args || setStateCall.args.length === 0) return updated;\n\n    // First argument is the callback: () => { ... }\n    const callback = setStateCall.args[0];\n\n    if (callback.type === 'ArrowFunctionExpression') {\n      // Extract body\n      const body = callback.body;\n\n      if (body.type === 'BlockStatement' && body.body) {\n        // Search for field mutations: this._field = value, this._field++, etc.\n        body.body.forEach((stmt) => {\n          const mutated = this.extractMutatedFields(stmt, stateClassName);\n          updated.push(...mutated);\n        });\n      } else if (body.type === 'UpdateExpression' || body.type === 'AssignmentExpression') {\n        // Direct mutation in arrow body\n        const mutated = this.extractMutatedFields(body, stateClassName);\n        updated.push(...mutated);\n      }\n    }\n\n    return [...new Set(updated)]; // Remove duplicates\n  }\n\n  /**\n   * Extract mutated fields from statement\n   * Looks for: this._field = x, this._field++, this._field += x\n   */\n  extractMutatedFields(stmt, stateClassName) {\n    const fields = [];\n\n    if (!stmt) return fields;\n\n    // Assignment: this._field = value\n    if (stmt.type === 'ExpressionStatement' && stmt.expression) {\n      const expr = stmt.expression;\n\n      if (expr.type === 'AssignmentExpression') {\n        const fieldName = this.getFieldNameFromTarget(expr.left);\n        if (fieldName) fields.push(fieldName);\n      }\n\n      // Update expression: this._field++, this._field--\n      if (expr.type === 'UpdateExpression') {\n        const fieldName = this.getFieldNameFromTarget(expr.argument);\n        if (fieldName) fields.push(fieldName);\n      }\n    }\n\n    // Direct assignment/update (arrow body)\n    if (stmt.type === 'AssignmentExpression') {\n      const fieldName = this.getFieldNameFromTarget(stmt.left);\n      if (fieldName) fields.push(fieldName);\n    }\n\n    if (stmt.type === 'UpdateExpression') {\n      const fieldName = this.getFieldNameFromTarget(stmt.argument);\n      if (fieldName) fields.push(fieldName);\n    }\n\n    return fields;\n  }\n\n  /**\n   * Get field name from assignment target\n   * Handles: this._field, obj.field, etc.\n   */\n  getFieldNameFromTarget(target) {\n    if (!target) return null;\n\n    // this._field\n    if (target.type === 'MemberExpression') {\n      const obj = target.object;\n      const prop = target.property;\n\n      // this._field\n      if (obj.type === 'Identifier' && obj.name === 'this' &&\n        prop.type === 'Identifier') {\n        return prop.name;\n      }\n    }\n\n    // _field (direct identifier)\n    if (target.type === 'Identifier') {\n      return target.name;\n    }\n\n    return null;\n  }\n\n  /**\n   * Phase 4: Extract lifecycle methods\n   * \n   * Lifecycle methods: initState, dispose, didUpdateWidget, build\n   */\n  extractLifecycleMethods() {\n    const lifecycleNames = ['initState', 'dispose', 'didUpdateWidget', 'build'];\n\n    this.stateClasses.forEach(({ astNode, metadata }) => {\n      if (!astNode.body || !astNode.body.methods) return;\n\n      astNode.body.methods.forEach((method) => {\n        const methodName = method.key.name;\n\n        if (lifecycleNames.includes(methodName)) {\n          const lifecycle = new LifecycleMethod(\n            methodName,\n            method.location,\n            method.params || [],\n            this.checkCallsSuper(method),\n            this.checkHasSideEffects(method)\n          );\n\n          this.lifecycleMethods.push(lifecycle);\n          metadata.lifecycleMethods.push(lifecycle);\n        }\n      });\n    });\n  }\n\n  /**\n   * Check if method calls super.methodName()\n   */\n  checkCallsSuper(method) {\n    if (!method.body) return false;\n\n    const stmts = method.body.type === 'BlockStatement'\n      ? method.body.body\n      : [method.body];\n\n    for (const stmt of stmts) {\n      if (stmt.type === 'ExpressionStatement' && stmt.expression) {\n        const expr = stmt.expression;\n\n        // super.initState() pattern\n        if (expr.type === 'CallExpression' && expr.callee.type === 'MemberExpression') {\n          const obj = expr.callee.object;\n          const prop = expr.callee.property;\n\n          if (obj.type === 'Identifier' && obj.name === 'super' &&\n            prop.type === 'Identifier' && prop.name === method.key.name) {\n            return true;\n          }\n        }\n      }\n    }\n\n    return false;\n  }\n\n  /**\n   * Check if method has side effects (console.log, assignments, etc.)\n   */\n  checkHasSideEffects(method) {\n    if (!method.body) return false;\n\n    const stmts = method.body.type === 'BlockStatement'\n      ? method.body.body\n      : [method.body];\n\n    for (const stmt of stmts) {\n      // Assignment has side effect\n      if (stmt.type === 'ExpressionStatement' && stmt.expression) {\n        const expr = stmt.expression;\n\n        if (expr.type === 'AssignmentExpression' || expr.type === 'UpdateExpression') {\n          return true;\n        }\n\n        // Function calls might have side effects\n        if (expr.type === 'CallExpression') {\n          return true;\n        }\n      }\n    }\n\n    return false;\n  }\n\n  /**\n   * Phase 5: Extract event handlers from build method\n   * \n   * Looks for: onPressed: () => handler(), onChange: handler, etc.\n   */\n  extractEventHandlers() {\n    this.stateClasses.forEach(({ astNode, metadata }) => {\n      if (!astNode.body || !astNode.body.methods) return;\n\n      // Find build method\n      const buildMethod = astNode.body.methods.find((m) => m.key.name === 'build');\n      if (!buildMethod) return;\n\n      // Extract event handlers from the build method body\n      const handlers = this.findEventHandlersInMethod(buildMethod, metadata.name);\n      this.eventHandlers.push(...handlers);\n    });\n  }\n\n  /**\n   * Find event handlers in method body\n   */\n  findEventHandlersInMethod(method, stateClassName) {\n    const handlers = [];\n\n    if (!method.body) return handlers;\n\n    const stmts = method.body.type === 'BlockStatement'\n      ? method.body.body\n      : [method.body];\n\n    stmts.forEach((stmt) => {\n      this.findEventHandlersInStatement(stmt, handlers, stateClassName);\n    });\n\n    return handlers;\n  }\n\n  /**\n   * Recursively find event handlers in statements\n   */\n  findEventHandlersInStatement(stmt, handlers, stateClassName) {\n    if (!stmt) return;\n\n    if (stmt.type === 'ExpressionStatement' && stmt.expression) {\n      this.findEventHandlersInExpression(stmt.expression, handlers, stateClassName);\n    }\n\n    if (stmt.type === 'ReturnStatement' && stmt.argument) {\n      this.findEventHandlersInExpression(stmt.argument, handlers, stateClassName);\n    }\n\n    if (stmt.type === 'BlockStatement' && stmt.body) {\n      stmt.body.forEach((s) => {\n        this.findEventHandlersInStatement(s, handlers, stateClassName);\n      });\n    }\n  }\n\n  /**\n   * Find event handlers in expressions\n   * Looks for: { onPressed: () => handler(), onChange: handler }\n   */\n  findEventHandlersInExpression(expr, handlers, stateClassName) {\n    if (!expr) return;\n\n    // Check object literals for event properties\n    if (expr.type === 'ObjectLiteral' && expr.properties) {\n      expr.properties.forEach((prop) => {\n        // Property key is the event name (onPressed, onChange, etc.)\n        const eventName = this.getPropertyKey(prop.key);\n        const eventPattern = /^on[A-Z]/; // onPressed, onChange, etc.\n\n        if (eventPattern.test(eventName)) {\n          // Extract handler from property value\n          const handler = this.extractEventHandler(prop.value, stateClassName);\n\n          if (handler) {\n            handlers.push({\n              event: eventName,\n              handler: handler,\n              location: prop.location,\n              component: this.getComponentNameFromContext(expr),\n            });\n          }\n        }\n\n        // Also search nested values\n        this.findEventHandlersInExpression(prop.value, handlers, stateClassName);\n      });\n    }\n\n    // Check call expressions (widget calls)\n    if (expr.type === 'CallExpression' && expr.args) {\n      expr.args.forEach((arg) => {\n        this.findEventHandlersInExpression(arg, handlers, stateClassName);\n      });\n    }\n\n    // Check new expressions\n    if (expr.type === 'NewExpression' && expr.args) {\n      expr.args.forEach((arg) => {\n        this.findEventHandlersInExpression(arg, handlers, stateClassName);\n      });\n    }\n  }\n\n  /**\n   * Get property key from object property\n   */\n  getPropertyKey(keyExpr) {\n    if (!keyExpr) return null;\n\n    if (keyExpr.type === 'Identifier') {\n      return keyExpr.name;\n    }\n\n    if (keyExpr.type === 'Literal') {\n      return String(keyExpr.value);\n    }\n\n    return null;\n  }\n\n  /**\n   * Extract handler reference from property value\n   * Can be: () => handler(), handler, () => { ... }\n   */\n  extractEventHandler(value, stateClassName) {\n    if (!value) return null;\n\n    // Arrow function: () => handler()\n    if (value.type === 'ArrowFunctionExpression') {\n      if (value.body.type === 'CallExpression') {\n        const handlerName = this.getClassNameFromExpression(value.body.callee);\n        return handlerName;\n      }\n\n      // Check if body is identifier: () => handler\n      if (value.body.type === 'Identifier') {\n        return value.body.name;\n      }\n    }\n\n    // Direct identifier: handler\n    if (value.type === 'Identifier') {\n      return value.name;\n    }\n\n    // Member expression: this.handler\n    if (value.type === 'MemberExpression') {\n      if (value.property.type === 'Identifier') {\n        return value.property.name;\n      }\n    }\n\n    return null;\n  }\n\n  /**\n   * Get component name (for context, since we don't have full widget info here)\n   */\n  getComponentNameFromContext(expr) {\n    // This is simplified - in a real scenario you'd track which widget\n    // contains this object literal\n    if (expr.type === 'CallExpression' && expr.callee) {\n      return this.getClassNameFromExpression(expr.callee);\n    }\n\n    return 'Unknown';\n  }\n\n  /**\n   * Phase 6: Build state dependency graph\n   * \n   * Maps:\n   * - stateToMethods: which methods use which state\n   * - methodToState: which state each method uses\n   * - eventToState: which state each event updates\n   */\n  buildDependencyGraph() {\n    this.dependencyGraph = new DependencyGraph();\n\n    // State to methods\n    this.stateFields.forEach((field, key) => {\n      const methods = this.findMethodsUsingField(field.name);\n      if (methods.length > 0) {\n        this.dependencyGraph.stateToMethods.set(field.name, methods);\n      }\n    });\n\n    // Methods to state\n    this.stateClasses.forEach(({ metadata }) => {\n      metadata.stateFields.forEach((field) => {\n        const methodsUsing = this.findMethodsReadingField(metadata.name, field.name);\n        if (methodsUsing.length > 0) {\n          this.dependencyGraph.methodToState.set(field.name, methodsUsing);\n        }\n      });\n    });\n\n    // Event to state\n    this.eventHandlers.forEach((event) => {\n      const stateChanged = this.findStateChangedByMethod(event.handler);\n      if (stateChanged.length > 0) {\n        this.dependencyGraph.eventToState.set(event.event, stateChanged);\n      }\n    });\n  }\n\n  /**\n   * Find methods that use a state field\n   */\n  findMethodsUsingField(fieldName) {\n    const methods = new Set();\n\n    this.setStateCalls.forEach((call) => {\n      if (call.updates.includes(fieldName)) {\n        methods.add(call.method);\n      }\n    });\n\n    // Also check if field is used in build (for reading)\n    this.stateClasses.forEach(({ astNode, metadata }) => {\n      if (!astNode.body || !astNode.body.methods) return;\n\n      const buildMethod = astNode.body.methods.find((m) => m.key.name === 'build');\n      if (buildMethod && this.methodUsesField(buildMethod, fieldName)) {\n        methods.add('build');\n      }\n    });\n\n    return Array.from(methods);\n  }\n\n  /**\n   * Check if method uses a field\n   */\n  methodUsesField(method, fieldName) {\n    if (!method.body) return false;\n\n    const stmts = method.body.type === 'BlockStatement'\n      ? method.body.body\n      : [method.body];\n\n    for (const stmt of stmts) {\n      if (this.statementUsesField(stmt, fieldName)) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  /**\n   * Check if statement contains field reference\n   */\n  statementUsesField(stmt, fieldName) {\n    if (!stmt) return false;\n\n    // Simple search for this._fieldName pattern\n    const code = JSON.stringify(stmt);\n    return code.includes(fieldName);\n  }\n\n  /**\n   * Find methods that are triggered by reading state\n   */\n  findMethodsReadingField(stateClassName, fieldName) {\n    const methods = [];\n\n    this.stateClasses.forEach(({ metadata }) => {\n      if (metadata.name !== stateClassName) return;\n\n      metadata.stateFields.forEach((field) => {\n        if (field.name === fieldName) {\n          methods.push(...field.usedInMethods);\n        }\n      });\n    });\n\n    return methods;\n  }\n\n  /**\n   * Find state changed by a method\n   */\n  findStateChangedByMethod(methodName) {\n    const changed = new Set();\n\n    this.setStateCalls.forEach((call) => {\n      if (call.method === methodName) {\n        call.updates.forEach((update) => changed.add(update));\n      }\n    });\n\n    return Array.from(changed);\n  }\n\n  /**\n   * Phase 7: Validate all state patterns\n   */\n  validateState() {\n    this.validateSetStatePatterns();\n    this.validateStateFieldUsage();\n    this.validateLifecyclePatterns();\n    this.validateEventHandlers();\n  }\n\n  /**\n   * Validate setState usage patterns\n   */\n  validateSetStatePatterns() {\n    this.setStateCalls.forEach((call) => {\n      const issues = [];\n\n      // Check if called from valid context (State class method)\n      const stateClass = this.stateClasses.get(call.stateClassName);\n      if (!stateClass) {\n        issues.push({\n          type: 'invalid-context',\n          message: `setState called outside of ${call.stateClassName}`,\n        });\n      }\n\n      // Check if updates valid fields\n      if (call.updates.length === 0) {\n        issues.push({\n          type: 'empty-update',\n          message: 'setState called with no state updates',\n          severity: 'warning',\n        });\n      }\n\n      call.updates.forEach((field) => {\n        if (!this.stateFields.has(`${call.stateClassName}.${field}`)) {\n          issues.push({\n            type: 'unknown-field',\n            message: `setState updates unknown field \"${field}\"`,\n            field,\n          });\n        }\n      });\n\n      // Record validation\n      call.isValid = issues.length === 0;\n      call.issues = issues;\n    });\n  }\n\n  /**\n   * Validate state field usage\n   */\n  validateStateFieldUsage() {\n    this.stateFields.forEach((field, key) => {\n      const parts = key.split('.');\n      const stateClassName = parts[0];\n      const fieldName = parts[1];\n\n      // Check if field is used\n      if (!this.fieldIsUsed(fieldName, stateClassName)) {\n        this.validationResults.push({\n          type: 'unused-state-field',\n          severity: 'warning',\n          field: fieldName,\n          location: field.location,\n          message: `State field \"${fieldName}\" is defined but never used`,\n          suggestion: 'Remove unused field or implement its usage',\n        });\n      }\n\n      // Check if field is mutated outside setState\n      const mutationsOutsideSetState = this.findMutationsOutsideSetState(\n        fieldName,\n        stateClassName\n      );\n      if (mutationsOutsideSetState.length > 0) {\n        this.validationResults.push({\n          type: 'mutation-outside-setstate',\n          severity: 'error',\n          field: fieldName,\n          locations: mutationsOutsideSetState,\n          message: `State field \"${fieldName}\" is mutated outside setState()`,\n          suggestion: 'Always use setState() to update state fields',\n        });\n      }\n    });\n  }\n\n  /**\n   * Check if field is used anywhere\n   */\n  fieldIsUsed(fieldName, stateClassName) {\n    // Check if read in build\n    const stateClass = this.stateClasses.get(stateClassName);\n    if (!stateClass) return false;\n\n    const buildMethod = stateClass.astNode.body.methods.find(\n      (m) => m.key.name === 'build'\n    );\n\n    if (buildMethod && this.methodUsesField(buildMethod, fieldName)) {\n      return true;\n    }\n\n    // Check if modified in setState\n    return this.setStateCalls.some((call) => call.updates.includes(fieldName));\n  }\n\n  /**\n   * Find mutations outside setState\n   */\n  findMutationsOutsideSetState(fieldName, stateClassName) {\n    const locations = [];\n    const inSetState = new Set();\n\n    // Collect all fields modified in setState\n    this.setStateCalls.forEach((call) => {\n      call.updates.forEach((field) => {\n        inSetState.add(field);\n      });\n    });\n\n    // If field is only in setState, it's good\n    if (!inSetState.has(fieldName)) {\n      return locations;\n    }\n\n    // For now, we assume mutations are only through setState\n    // In a full implementation, you'd scan all methods for direct assignments\n    return locations;\n  }\n\n  /**\n   * Validate lifecycle patterns\n   */\n  validateLifecyclePatterns() {\n    this.stateClasses.forEach(({ metadata }) => {\n      const methodMap = {};\n\n      metadata.lifecycleMethods.forEach((method) => {\n        methodMap[method.name] = method;\n      });\n\n      // dispose should call super.dispose\n      if (methodMap.dispose && !methodMap.dispose.callsSuper) {\n        this.validationResults.push({\n          type: 'lifecycle-issue',\n          severity: 'error',\n          method: 'dispose',\n          location: methodMap.dispose.location,\n          message: 'dispose() should call super.dispose()',\n          suggestion: 'Add super.dispose() call at the end of dispose()',\n        });\n      }\n\n      // initState should call super.initState\n      if (methodMap.initState && !methodMap.initState.callsSuper) {\n        this.validationResults.push({\n          type: 'lifecycle-issue',\n          severity: 'warning',\n          method: 'initState',\n          location: methodMap.initState.location,\n          message: 'initState() should call super.initState()',\n          suggestion: 'Add super.initState() call',\n        });\n      }\n    });\n  }\n\n  /**\n   * Validate event handlers\n   */\n  validateEventHandlers() {\n    this.eventHandlers.forEach((handler) => {\n      // Check if handler method exists\n      const handlerExists = this.stateClasses.values().some((sc) => {\n        return sc.metadata.stateFields.some((f) => f.name === handler.handler) ||\n          sc.astNode.body.methods.some((m) => m.key.name === handler.handler);\n      });\n\n      if (!handlerExists && handler.handler) {\n        this.validationResults.push({\n          type: 'missing-handler',\n          severity: 'error',\n          handler: handler.handler,\n          event: handler.event,\n          location: handler.location,\n          message: `Event handler \"${handler.handler}\" not found`,\n          suggestion: `Create a method called ${handler.handler} in the State class`,\n        });\n      }\n    });\n  }\n\n  /**\n   * Get final results\n   */\n  getResults() {\n    return {\n      stateClasses: Array.from(this.stateClasses.entries()).map(([name, data]) => ({\n        name,\n        metadata: data.metadata,\n      })),\n      stateFields: Array.from(this.stateFields.values()),\n      setStateCalls: this.setStateCalls,\n      lifecycleMethods: this.lifecycleMethods,\n      eventHandlers: this.eventHandlers,\n      dependencyGraph: this.dependencyGraph,\n      validationResults: this.validationResults,\n      errors: this.errors,\n    };\n  }\n}\n\n// ============================================================================\n// DATA CLASSES\n// ============================================================================\n\nclass StateClassMetadata {\n  constructor(name, location, linkedStatefulWidget) {\n    this.name = name;\n    this.location = location;\n    this.linkedStatefulWidget = linkedStatefulWidget;\n    this.stateFields = [];\n    this.lifecycleMethods = [];\n    this.methods = [];\n  }\n}\n\nclass StateField {\n  constructor(name, type, initialValue, location) {\n    this.name = name;\n    this.type = type;\n    this.initialValue = initialValue;\n    this.location = location;\n    this.isMutable = true;\n    this.mutations = [];\n    this.usedInMethods = [];\n    this.usedInBuild = false;\n  }\n}\n\nclass LifecycleMethod {\n  constructor(name, location, params, callsSuper, hasSideEffects) {\n    this.name = name;\n    this.location = location;\n    this.params = params;\n    this.callsSuper = callsSuper;\n    this.hasSideEffects = hasSideEffects;\n  }\n}\n\nclass StateUpdateCall {\n  constructor(location, method, updates, stateClassName) {\n    this.location = location;\n    this.method = method;\n    this.updates = updates || [];\n    this.stateClassName = stateClassName;\n    this.isValid = true;\n    this.issues = [];\n  }\n}\n\nclass DependencyGraph {\n  constructor() {\n    this.stateToMethods = new Map();\n    this.methodToState = new Map();\n    this.eventToState = new Map();\n  }\n}\n\n// ============================================================================\n// EXPORTS\n// ============================================================================\n\nexport {\n  StateAnalyzer,\n  StateClassMetadata,\n  StateField,\n  LifecycleMethod,\n  StateUpdateCall,\n  DependencyGraph,\n};"],
-  "mappings": "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",
-  "names": ["StateAnalyzer", "ast", "widgets", "options", "error", "widget", "m", "widgetNode", "n", "createStateNode", "stateClassName", "stateClassNode", "stateMetadata", "StateClassMetadata", "methodBody", "stmt", "className", "expr", "astNode", "metadata", "field", "fieldName", "initialValue", "type", "stateField", "StateField", "name", "method", "setStateCalls", "calls", "methodName", "s", "updatedFields", "call", "StateUpdateCall", "arg", "prop", "obj", "setStateCall", "updated", "callback", "body", "mutated", "fields", "target", "lifecycleNames", "lifecycle", "LifecycleMethod", "stmts", "buildMethod", "handlers", "eventName", "handler", "keyExpr", "value", "DependencyGraph", "key", "methods", "methodsUsing", "event", "stateChanged", "changed", "update", "issues", "parts", "mutationsOutsideSetState", "stateClass", "locations", "inSetState", "methodMap", "sc", "f", "data", "location", "linkedStatefulWidget", "params", "callsSuper", "hasSideEffects", "updates"]
-}
diff --git a/packages/flutterjs_engine/src/analyzer/docs/README.md b/packages/flutterjs_engine/src/analyzer/docs/README.md
deleted file mode 100644
index 031c457f..00000000
--- a/packages/flutterjs_engine/src/analyzer/docs/README.md
+++ /dev/null
@@ -1,23 +0,0 @@
-# Analyzer Documentation
-
-Documentation for `@flutterjs/analyzer`, the static analysis engine for FlutterJS.
-
-## Contents
-
-- **[Architecture](architecture.md)**: Detailed explanation of the 10-step analysis pipeline.
-- **[Usage Guide](usage.md)**: How to use the CLI and JS API.
-
-## Quick Start
-
-```bash
-# Run analysis on a file
-node dist/analyzer.js src/main.js
-```
-
-## Purpose
-
-The analyzer is effectively a "compiler frontend" for FlutterJS. It doesn't generate code (that's `flutterjs_gen`'s job), but it *understands* the code. It is used to:
-1.  **Validate** widget structure before runtime.
-2.  **Optimize** the build (e.g., removing unused imports).
-3.  **Ensure** SSR compatibility by flagging unsafe code.
-4.  **Debug** app structure by visualizing the widget tree.
diff --git a/packages/flutterjs_engine/src/analyzer/docs/architecture.md b/packages/flutterjs_engine/src/analyzer/docs/architecture.md
deleted file mode 100644
index 208d8145..00000000
--- a/packages/flutterjs_engine/src/analyzer/docs/architecture.md
+++ /dev/null
@@ -1,56 +0,0 @@
-# Analyzer Architecture
-
-The `@flutterjs/analyzer` package uses a multi-stage pipeline to analyze Flutter code written in JavaScript (or converting from Dart).
-
-## The Analysis Pipeline
-
-The `Analyzer` class orchestrates a 10-step process:
-
-```mermaid
-graph TD
-    A[Source Code] --> B[Lexer]
-    B --> C[Parser AST]
-    C --> D[Widget Analyzer]
-    D --> E[Import Resolver]
-    D --> F[State Analyzer]
-    D --> G[Context Analyzer]
-    G --> H[SSR Analyzer]
-    H --> I[Report Generator]
-    I --> J[JSON Report]
-```
-
-### Phase 1: Syntax Analysis
-1.  **Lexing (`lexer.js`)**: Tokenizes the source string into a stream of tokens.
-2.  **Parsing (`flutterjs_parser.js`)**: Converts tokens into an Abstract Syntax Tree (AST). This parser is specialized to handle Flutter-specific syntax patterns in JS.
-
-### Phase 2: Structural Analysis
-3.  **Widget Analysis (`flutterjs_widget_analyzer.js`)**:
-    - Identifies classes extending `StatelessWidget`, `StatefulWidget`, or `State`.
-    - Extracts properties (fields) and methods.
-    - Finds the `main()` function and the root widget passed to `runApp()`.
-    - Builds a static Widget Tree.
-
-4.  **Import Resolution (`flutter_import_resolver.js`)**:
-    - Scans AST for `import` statements.
-    - Resolves them to actual file paths or framework packages.
-    - Checks for missing dependencies.
-
-### Phase 3: Semantic Analysis
-5.  **State Analysis (`state_analyzer_implementation.js`)**:
-    - Links `StatefulWidget` to its `State` class.
-    - Checks for `setState()` calls.
-    - Validates state mutation patterns.
-
-6.  **Context Analysis (`context_analyzer.js`)**:
-    - Tracks `BuildContext` usage.
-    - Identifies `InheritedWidget` providers and consumers.
-    - Detects context access points.
-
-### Phase 4: Compatibility Analysis
-7.  **SSR Analysis (`ssr_analyzer.js`)**:
-    - Checks code for server-side rendering safety.
-    - Flags browser-only APIs (like `window`, `document`) used in build methods.
-
-### Phase 5: Reporting
-8.  **Report Generation**: Compiles all findings into a structured JSON object.
-9.  **Output**: Writes to console or file.
diff --git a/packages/flutterjs_engine/src/analyzer/docs/usage.md b/packages/flutterjs_engine/src/analyzer/docs/usage.md
deleted file mode 100644
index b7561fe2..00000000
--- a/packages/flutterjs_engine/src/analyzer/docs/usage.md
+++ /dev/null
@@ -1,81 +0,0 @@
-# Using the Analyzer
-
-The analyzer can be used as a CLI tool or programmatically as a library.
-
-## CLI Usage
-
-Run the analyzer directly on a source file:
-
-```bash
-# Basic analysis
-node analyzer.js src/main.js
-
-# Output to detailed JSON file
-node analyzer.js src/main.js --output report.json --format json
-
-# Check for SSR compatibility only
-node analyzer.js src/main.js --phase1 --no-imports --no-context
-```
-
-### Options
-
-| Flag | Description |
-|------|-------------|
-| `-o, --output <file>` | Path to save the report |
-| `-f, --format <fmt>` | `json`, `markdown`, or `console` |
-| `--debug <level>` | Log level: `trace`, `debug`, `info` |
-| `--phase1` | Run only structural analysis (fastest) |
-| `--no-ssr` | Skip SSR validation checks |
-
-## Programmatic Usage
-
-Import the `Analyzer` class to run analysis within your own Node.js tools (e.g., in a webpack plugin or build script).
-
-```javascript
-import { Analyzer, analyzeCode } from '@flutterjs/analyzer';
-
-// 1. Analyze a string of code
-const code = `
-class MyApp extends StatelessWidget {
-  build(context) { return Text('Hi'); }
-}
-`;
-
-const results = await analyzeCode(code, {
-  includeSsr: true,
-  strict: false
-});
-
-console.log(`Found ${results.widgets.count} widgets`);
-
-// 2. Analyze a file with fine-grained control
-const analyzer = new Analyzer({
-  sourceFile: './src/app.js',
-  verbose: true,
-  debugLevel: 'warn'
-});
-
-const fullReport = await analyzer.analyze();
-```
-
-## Output Structure
-
-The analysis result is a comprehensive JSON object:
-
-```javascript
-{
-  "widgets": {
-    "stateless": ["MyApp", "Header"],
-    "stateful": ["Counter"],
-    "all": [ ... ] // Full AST details
-  },
-  "state": {
-    "setStateCalls": 5
-  },
-  "ssr": {
-    "compatibility": "high",
-    "unsafePatterns": []
-  },
-  "imports": { ... }
-}
-```
diff --git a/packages/flutterjs_engine/src/analyzer/package.json b/packages/flutterjs_engine/src/analyzer/package.json
deleted file mode 100644
index ad273764..00000000
--- a/packages/flutterjs_engine/src/analyzer/package.json
+++ /dev/null
@@ -1,55 +0,0 @@
-{
-  "name": "@flutterjs/analyzer",
-  "version": "1.0.0",
-  "description": "Flutter widget analyzer in JavaScript",
-  "type": "module",
-  "main": "./dist/analyzer.js",
-  "exports": {
-    "./analyzer": "./dist/analyzer.js",
-    "./context_analyzer_data": "./dist/context_analyzer_data.js",
-    "./context_analyzer": "./dist/context_analyzer.js",
-    "./flutter_import_resolver": "./dist/flutter_import_resolver.js",
-    "./flutter_resolver_config": "./dist/flutter_resolver_config.js",
-    "./flutterjs_logger": "./dist/flutterjs_logger.js",
-    "./flutterjs_parser": "./dist/flutterjs_parser.js",
-    "./flutterjs_report_generator": "./dist/flutterjs_report_generator.js",
-    "./flutterjs_widget_analyzer": "./dist/flutterjs_widget_analyzer.js",
-    "./lexer": "./dist/lexer.js",
-    "./ssr_analyzer": "./dist/ssr_analyzer.js",
-    "./state_analyzer_data": "./dist/state_analyzer_data.js",
-    "./state_analyzer_implementation": "./dist/state_analyzer_implementation.js"
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "node build.js",
-    "run:lexer": "node lexer.js",
-    "test": "node test/runner.js",
-    "test:lexer": "node test/lexer.test.js",
-    "test:parser": "node test/parser.test.js",
-    "test:analyzer": "node test/widget-analyzer.test.js",
-    "test:import": "node test/import_resolver.test.js",
-    "test:all": "npm run test:lexer && npm run test:parser && npm run test:analyzer",
-    "test:watch": "node test/runner.js --watch"
-  },
-  "keywords": [
-    "flutter",
-    "analyzer",
-    "dart",
-    "widget",
-    "parser",
-    "javascript"
-  ],
-  "dependencies": {
-    "@flutterjs/runtime": "file:../../../../src/runtime",
-    "@flutterjs/vdom": "file:../../../vdom",
-    "@flutterjs/material": "file:../../../../package/material"
-  },
-  "author": "jayprakash.pal@flutterjs.dev",
-  "license": "MIT",
-  "devDependencies": {
-    "esbuild": "^0.27.2",
-    "jest": "^29.7.0"
-  }
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/analyzer/src/flutterjs_parser.js b/packages/flutterjs_engine/src/analyzer/src/flutterjs_parser.js
deleted file mode 100644
index 858ee1ce..00000000
--- a/packages/flutterjs_engine/src/analyzer/src/flutterjs_parser.js
+++ /dev/null
@@ -1,1461 +0,0 @@
-/**
- * FlutterJS Parser - Converts tokens to AST (FIXED VERSION)
- * Phase 1.2 MVP Implementation - Complete Fixes
- * 
- * Final fix: parseParameterList handles UNDEFINED and NULL token types
- */
-
-
-import { TokenType } from './lexer.js';
-import { getLogger } from './flutterjs_logger.js';
-
-// ============================================================================
-// AST NODE CLASSES
-// ============================================================================
-
-class ASTNode {
-  constructor(type, location) {
-    this.type = type;
-    this.location = location;
-  }
-}
-
-class Program extends ASTNode {
-  constructor(body = [], location = null) {
-    super('Program', location);
-    this.body = body;
-  }
-}
-
-class ImportDeclaration extends ASTNode {
-  constructor(specifiers = [], source = null, location = null) {
-    super('ImportDeclaration', location);
-    this.specifiers = specifiers;
-    this.source = source;
-  }
-}
-
-class ImportSpecifier extends ASTNode {
-  constructor(imported = null, local = null, location = null) {
-    super('ImportSpecifier', location);
-    this.imported = imported;
-    this.local = local;
-  }
-}
-
-class ClassDeclaration extends ASTNode {
-  constructor(id = null, superClass = null, body = null, location = null) {
-    super('ClassDeclaration', location);
-    this.id = id;
-    this.superClass = superClass;
-    this.body = body;
-  }
-}
-
-class ClassBody extends ASTNode {
-  constructor(fields = [], methods = [], location = null) {
-    super('ClassBody', location);
-    this.fields = fields;
-    this.methods = methods;
-  }
-}
-
-class FieldDeclaration extends ASTNode {
-  constructor(key = null, initialValue = null, location = null) {
-    super('FieldDeclaration', location);
-    this.key = key;
-    this.initialValue = initialValue;
-  }
-}
-
-class MethodDeclaration extends ASTNode {
-  constructor(key = null, params = [], body = null, location = null) {
-    super('MethodDeclaration', location);
-    this.key = key;
-    this.params = params;
-    this.body = body;
-  }
-}
-
-class Parameter extends ASTNode {
-  constructor(name = null, optional = false, defaultValue = null, location = null) {
-    super('Parameter', location);
-    this.name = name;
-    this.optional = optional;
-    this.defaultValue = defaultValue;
-  }
-}
-
-class FunctionDeclaration extends ASTNode {
-  constructor(id = null, params = [], body = null, isAsync = false, location = null) {
-    super('FunctionDeclaration', location);
-    this.id = id;
-    this.params = params;
-    this.body = body;
-    this.isAsync = isAsync;
-  }
-}
-
-class BlockStatement extends ASTNode {
-  constructor(body = [], location = null) {
-    super('BlockStatement', location);
-    this.body = body;
-  }
-}
-
-class ReturnStatement extends ASTNode {
-  constructor(argument = null, location = null) {
-    super('ReturnStatement', location);
-    this.argument = argument;
-  }
-}
-
-class ExpressionStatement extends ASTNode {
-  constructor(expression = null, location = null) {
-    super('ExpressionStatement', location);
-    this.expression = expression;
-  }
-}
-
-class Identifier extends ASTNode {
-  constructor(name = '', location = null) {
-    super('Identifier', location);
-    this.name = name;
-  }
-}
-
-class Literal extends ASTNode {
-  constructor(value = null, raw = '', type = 'string', location = null) {
-    super('Literal', location);
-    this.value = value;
-    this.raw = raw;
-    this.literalType = type;
-  }
-}
-
-class CallExpression extends ASTNode {
-  constructor(callee = null, args = [], location = null) {
-    super('CallExpression', location);
-    this.callee = callee;
-    this.args = args;
-  }
-}
-
-class NewExpression extends ASTNode {
-  constructor(callee = null, args = [], location = null) {
-    super('NewExpression', location);
-    this.callee = callee;
-    this.args = args;
-    this.isConst = false;
-  }
-}
-
-class ObjectLiteral extends ASTNode {
-  constructor(properties = [], location = null) {
-    super('ObjectLiteral', location);
-    this.properties = properties;
-  }
-}
-
-class Property extends ASTNode {
-  constructor(key = null, value = null, location = null) {
-    super('Property', location);
-    this.key = key;
-    this.value = value;
-    this.shorthand = false;
-  }
-}
-
-class ArrowFunctionExpression extends ASTNode {
-  constructor(params = [], body = null, location = null) {
-    super('ArrowFunctionExpression', location);
-    this.params = params;
-    this.body = body;
-  }
-}
-
-class MemberExpression extends ASTNode {
-  constructor(object = null, property = null, computed = false, location = null) {
-    super('MemberExpression', location);
-    this.object = object;
-    this.property = property;
-    this.computed = computed;
-  }
-}
-
-// ============================================================================
-// PARSER CLASS
-// ============================================================================
-
-class Parser {
-  constructor(tokens = [], options = {}) {
-    this.tokens = tokens;
-    this.current = 0;
-    this.errors = [];
-    this.options = { strict: false, ...options };
-    // NEW: Call stack tracking
-    this.callStack = [];
-
-    this.debugMode = true;
-  }
-
-  parse() {
-    const body = [];
-
-    while (!this.isAtEnd()) {
-      try {
-        const stmt = this.parseTopLevel();
-        if (stmt && stmt.type === 'ImportDeclaration') {
-          console.log('DEBUG - ImportDeclaration:', JSON.stringify(stmt, null, 2));
-        }
-        if (stmt) {
-          body.push(stmt);
-        }
-      } catch (error) {
-        this.errors.push(error);
-        this.synchronize();
-      }
-    }
-
-    return new Program(body);
-  }
-
-  /**
- * Skip any comment tokens
- * Comments should be transparent to the parser
- */
-  skipComments() {
-    while (!this.isAtEnd() && this.check(TokenType.COMMENT)) {
-      this.advance();
-    }
-  }
-
-  /**
-   * Check if token is a comment
-   */
-  isComment() {
-    if (this.isAtEnd()) return false;
-    return this.peek().type === TokenType.COMMENT;
-  }
-
-
-  parseTopLevel() {
-    this.skipComments();  // ← ADD THIS LINE
-
-    if (this.isAtEnd()) return null;
-
-    if (this.isKeyword('import')) {
-      this.advance();
-      return this.parseImportDeclaration();
-    }
-
-    if (this.isKeyword('class')) {
-      this.advance();
-      return this.parseClassDeclaration();
-    }
-
-    if (this.isKeyword('function')) {
-      this.advance();
-      return this.parseFunctionDeclaration();
-    }
-
-    const expr = this.parseExpression();
-    this.consumeStatementEnd();
-    return new ExpressionStatement(expr, this.getLocation());
-  }
-  isKeyword(value) {
-    if (this.isAtEnd()) return false;
-    const token = this.peek();
-    return token.type === TokenType.KEYWORD && token.value === value;
-  }
-
-  isPunctuation(value) {
-    if (this.isAtEnd()) return false;
-    const token = this.peek();
-    return token.type === TokenType.PUNCTUATION && token.value === value;
-  }
-
-  isOperator(value) {
-    if (this.isAtEnd()) return false;
-    const token = this.peek();
-    return token.type === TokenType.OPERATOR && token.value === value;
-  }
-
-  /**
- * FIXED: parseImportDeclaration() in flutterjs_parser.js
- * Handles multi-line imports with comments and proper spacing
- * 
- * Replace the entire parseImportDeclaration() method with this version
- */
-
-  parseImportDeclaration() {
-    const logger = getLogger().createComponentLogger('Parser.parseImportDeclaration');
-    logger.startSession('parseImportDeclaration');
-
-    const startLocation = this.getLocation();
-    const specifiers = [];
-
-    logger.trace(`  Starting import parse at token: ${this.peek().value}`);
-
-    // Case 1: Named imports { x, y, z }
-    if (this.isPunctuation('{')) {
-      logger.trace(`  Found opening brace, parsing named imports...`);
-      this.advance();
-
-      // ✅ FIX #1: Skip comments right after opening brace
-      this.skipComments();
-
-      while (!this.isPunctuation('}') && !this.isAtEnd()) {
-        // ✅ FIX #2: Skip comments before checking for closing brace
-        this.skipComments();
-
-        // Check if we hit the closing brace (after skipping comments)
-        if (this.isPunctuation('}')) {
-          logger.trace(`  Found closing brace, exiting loop`);
-          break;
-        }
-
-        // Expect an identifier
-        if (!this.check(TokenType.IDENTIFIER)) {
-          logger.warn(`  Expected identifier but got: ${this.peek().value}`);
-          this.advance();
-          continue;
-        }
-
-        // Get the imported name
-        const importedName = this.consume(TokenType.IDENTIFIER, 'Expected identifier').value;
-        const imported = new Identifier(importedName);
-        logger.trace(`    Imported: ${importedName}`);
-
-        let local = imported; // Default: local name = imported name
-
-        // ✅ FIX #3: Skip comments before checking for 'as'
-        this.skipComments();
-
-        // Check for 'as' alias
-        if (this.isKeyword('as')) {
-          logger.trace(`    Found 'as' keyword`);
-          this.advance();
-
-          // ✅ FIX #4: Skip comments after 'as'
-          this.skipComments();
-
-          const localName = this.consume(TokenType.IDENTIFIER, 'Expected identifier after as').value;
-          local = new Identifier(localName);
-          logger.trace(`      Local name: ${localName}`);
-        }
-
-        // Add specifier to list
-        specifiers.push(new ImportSpecifier(imported, local));
-
-        // ✅ FIX #5: Skip comments before checking for comma
-        this.skipComments();
-
-        // Check for comma separator
-        if (this.isPunctuation(',')) {
-          logger.trace(`    Found comma, continuing...`);
-          this.advance();
-
-          // ✅ FIX #6: Skip comments after comma
-          this.skipComments();
-
-          // Continue to next item
-          continue;
-        } else {
-          logger.trace(`    No comma, expected closing brace next`);
-          // No more items, should see closing brace
-          break;
-        }
-      }
-
-      logger.trace(`  Parsed ${specifiers.length} named imports`);
-
-      // Consume closing brace
-      this.consume(TokenType.PUNCTUATION, 'Expected }');
-    }
-
-    // Case 2: Default import or default + named
-    // import MyDefault from 'module'
-    // import MyDefault, { x, y } from 'module'
-    else if (this.check(TokenType.IDENTIFIER) && this.peekAhead(1).value !== 'from') {
-      logger.trace(`  Found identifier without opening brace, parsing default import...`);
-
-      const defaultName = this.consume(TokenType.IDENTIFIER, 'Expected identifier').value;
-      const imported = new Identifier(defaultName);
-      const local = new Identifier(defaultName);
-      specifiers.push(new ImportSpecifier(imported, local));
-
-      logger.trace(`  Default import: ${defaultName}`);
-
-      // Check for comma and additional named imports
-      this.skipComments();
-      if (this.isPunctuation(',')) {
-        logger.trace(`  Found comma after default import, checking for named imports...`);
-        this.advance();
-
-        this.skipComments();
-        if (this.isPunctuation('{')) {
-          logger.trace(`  Found opening brace, parsing additional named imports...`);
-          this.advance();
-
-          this.skipComments();
-          while (!this.isPunctuation('}') && !this.isAtEnd()) {
-            this.skipComments();
-
-            if (this.isPunctuation('}')) break;
-
-            if (!this.check(TokenType.IDENTIFIER)) {
-              this.advance();
-              continue;
-            }
-
-            const name = this.consume(TokenType.IDENTIFIER, 'Expected identifier').value;
-            const imported2 = new Identifier(name);
-            let local2 = imported2;
-
-            this.skipComments();
-
-            if (this.isKeyword('as')) {
-              this.advance();
-              this.skipComments();
-              const localName = this.consume(TokenType.IDENTIFIER, 'Expected identifier after as').value;
-              local2 = new Identifier(localName);
-            }
-
-            specifiers.push(new ImportSpecifier(imported2, local2));
-
-            this.skipComments();
-
-            if (this.isPunctuation(',')) {
-              this.advance();
-              this.skipComments();
-              continue;
-            } else {
-              break;
-            }
-          }
-
-          this.consume(TokenType.PUNCTUATION, 'Expected }');
-        }
-      }
-    }
-
-    // ✅ FIX #7: Skip comments before 'from'
-    this.skipComments();
-
-    // Consume 'from' keyword
-    this.consume(TokenType.KEYWORD, 'Expected from');
-
-    // ✅ FIX #8: Skip comments before module path string
-    this.skipComments();
-
-    // Get the module/source path
-    const modulePathToken = this.consume(TokenType.STRING, 'Expected module path string');
-    const source = new Literal(
-      modulePathToken.value,
-      modulePathToken.value,
-      'string'
-    );
-
-    logger.trace(`  Module path: ${source.value}`);
-    logger.trace(`  Total specifiers: ${specifiers.length}`);
-
-    // ✅ FIX #9: Consume statement end (handles semicolon and trailing comments)
-    this.consumeStatementEnd();
-
-    logger.trace(`[parseImportDeclaration] SUCCESS\n`);
-    return new ImportDeclaration(specifiers, source, startLocation);
-  }
-
-  /**
-   * Helper method: Check if lookahead token matches (needed for peekAhead)
-   * Add this if not already present
-   */
-  peekAhead(n = 1) {
-    const pos = this.current + n;
-    if (pos >= this.tokens.length) {
-      return this.tokens[this.tokens.length - 1];
-    }
-    return this.tokens[pos];
-  }
-
-  parseClassDeclaration() {
-    const logger = getLogger().createComponentLogger('Parser.parseClassDeclaration');
-    logger.startSession('parseClassDeclaration');
-    logger.trace(`  Current token: ${this.peek().value} (${this.peek().type})`);
-
-    const startLocation = this.getLocation();
-    const nameToken = this.consume(TokenType.IDENTIFIER, 'Expected class name');
-    const name = new Identifier(nameToken.value);
-    logger.trace(`  Class name: ${name.name}`);
-
-    let superClass = null;
-    if (this.isKeyword('extends')) {
-      this.advance();
-      const superName = this.consume(TokenType.IDENTIFIER, 'Expected superclass name').value;
-      superClass = new Identifier(superName);
-      logger.trace(`  Extends: ${superClass.name}`);
-
-      // Skip generic type parameters like <MyCounter>
-      if (this.isOperator('<')) {
-        this.advance();
-        this.consume(TokenType.IDENTIFIER, 'Expected type name');
-        this.consume(TokenType.OPERATOR, 'Expected >');
-      }
-    }
-
-    logger.trace(`  Looking for opening brace...`);
-    logger.trace(`  Current token: ${this.peek().value} (${this.peek().type})`);
-    this.consume(TokenType.PUNCTUATION, 'Expected {');
-
-    const fields = [];
-    const methods = [];
-
-    logger.trace(`  Parsing class body...`);
-    let itemCount = 0;
-
-    while (!this.isPunctuation('}') && !this.isAtEnd()) {
-      this.skipComments();  // ← ADD THIS LINE - skip comments in class body
-
-      if (this.isPunctuation('}')) break;  // Check again after skipping comments
-
-      logger.trace(`    [item ${itemCount}] Current token: ${this.peek().value} (${this.peek().type})`);
-
-      // Skip semicolons
-      if (this.isPunctuation(';')) {
-        logger.trace(`    Skipping semicolon`);
-        this.advance();
-        continue;
-      }
-
-      // Check for constructor (always a method)
-      if (this.isKeyword('constructor')) {
-        logger.trace(`    Found constructor`);
-        methods.push(this.parseMethodDeclaration());
-        itemCount++;
-        continue;
-      }
-
-      // Check for field or method
-      if (this.check(TokenType.IDENTIFIER)) {
-        const currentPos = this.current;
-        const idToken = this.peek();
-        const fieldName = idToken.value;
-        logger.trace(`    Found identifier: ${fieldName}`);
-        this.advance();
-
-        // CASE 1: Field initializer - IDENTIFIER = value
-        if (this.isOperator('=')) {
-          logger.trace(`      -> This is a FIELD (followed by =)`);
-          this.current = currentPos; // Rewind
-          try {
-            fields.push(this.parseFieldDeclaration());
-            logger.trace(`      Field parsed successfully`);
-            itemCount++;
-            continue;
-          } catch (e) {
-            console.error(`      ERROR parsing field: ${e.message}`);
-            throw e;
-          }
-        }
-
-        // CASE 2: Method - IDENTIFIER ( params )
-        if (this.isPunctuation('(')) {
-          logger.trace(`      -> This is a METHOD (followed by '(')`);
-          this.current = currentPos; // Rewind
-          try {
-            methods.push(this.parseMethodDeclaration());
-            logger.trace(`      Method parsed successfully`);
-            itemCount++;
-            continue;
-          } catch (e) {
-            console.error(`      ERROR parsing method: ${e.message}`);
-            throw e;
-          }
-        }
-
-        logger.trace(`      -> Unknown pattern, skipping`);
-        this.advance();
-        continue;
-      }
-
-      // Skip unknown tokens
-      logger.trace(`    Skipping unknown token: ${this.peek().value}`);
-      this.advance();
-    }
-
-    logger.trace(`  Class body parsing complete. Found ${fields.length} fields, ${methods.length} methods`);
-
-    this.consume(TokenType.PUNCTUATION, 'Expected }');
-    const body = new ClassBody(fields, methods);
-    logger.trace(`[parseClassDeclaration] SUCCESS\n`);
-    return new ClassDeclaration(name, superClass, body, startLocation);
-  }
-
-
-  parseMethodDeclaration() {
-    const logger = getLogger().createComponentLogger('Parser.parseMethodDeclaration');
-    logger.startSession(`      [parseMethodDeclaration] STARTING`);
-    logger.trace(`        Current: ${this.peek().value}`);
-
-    const startLocation = this.getLocation();
-
-    let methodName;
-    if (this.isKeyword('constructor')) {
-      methodName = 'constructor';
-      this.advance();
-    } else {
-      methodName = this.consume(TokenType.IDENTIFIER, 'Expected method name').value;
-    }
-
-    logger.trace(`        Method name: ${methodName}`);
-    const key = new Identifier(methodName);
-
-    this.consume(TokenType.PUNCTUATION, 'Expected (');
-    const params = this.parseParameterList();
-    logger.trace(`        Parameters: ${params.length}`);
-    this.consume(TokenType.PUNCTUATION, 'Expected )');
-
-    let body = null;
-    if (this.isOperator('=>')) {
-      logger.trace(`        Arrow function body`);
-      this.advance();
-      body = this.parseExpression();
-    } else if (this.isPunctuation('{')) {
-      logger.trace(`        Block body`);
-      this.advance();
-      body = this.parseBlock();
-    }
-
-    logger.trace(`      [parseMethodDeclaration] SUCCESS`);
-    return new MethodDeclaration(key, params, body, startLocation);
-  }
-  parseFieldDeclaration() {
-    console.log(`      [parseFieldDeclaration] STARTING`);
-    console.log(`        Current: ${this.peek().value}`);
-
-    const startLocation = this.getLocation();
-    const fieldName = this.consume(TokenType.IDENTIFIER, 'Expected field name').value;
-    const key = new Identifier(fieldName);
-    console.log(`        Field name: ${fieldName}`);
-
-    let initialValue = null;
-    if (this.isOperator('=')) {
-      console.log(`        Found = operator, parsing initializer...`);
-      this.advance();
-      try {
-        initialValue = this.parseExpression();
-        console.log(`        Initializer parsed: ${initialValue.type}`);
-      } catch (e) {
-        console.error(`        ERROR parsing initializer: ${e.message}`);
-        throw e;
-      }
-    }
-
-    this.consumeStatementEnd();
-    console.log(`      [parseFieldDeclaration] SUCCESS`);
-    return new FieldDeclaration(key, initialValue, startLocation);
-  }
-
-  parseFunctionDeclaration() {
-    const startLocation = this.getLocation();
-    const nameToken = this.consume(TokenType.IDENTIFIER, 'Expected function name');
-    const name = nameToken.value ? new Identifier(nameToken.value) : null;
-
-    this.consume(TokenType.PUNCTUATION, 'Expected (');
-    const params = this.parseParameterList();
-    this.consume(TokenType.PUNCTUATION, 'Expected )');
-
-    this.consume(TokenType.PUNCTUATION, 'Expected {');
-    const body = this.parseBlock();
-
-    return new FunctionDeclaration(name, params, body, false, startLocation);
-  }
-
-  /**
-   * Parse parameter list - FIXED to handle UNDEFINED and NULL token types
-   */
-  parseParameterList() {
-    const params = [];
-
-    while (!this.isPunctuation(')') && !this.isAtEnd()) {
-      const paramLocation = this.getLocation();
-
-      // Handle destructuring: { key = value }
-      if (this.isPunctuation('{')) {
-        this.advance();
-        while (!this.isPunctuation('}') && !this.isAtEnd()) {
-          const paramName = this.consume(TokenType.IDENTIFIER, 'Expected param name').value;
-          let defaultValue = null;
-
-          if (this.isOperator('=')) {
-            this.advance();
-            // FIXED: Check token type, not just keywords
-            const token = this.peek();
-
-            if (this.check(TokenType.IDENTIFIER)) {
-              defaultValue = new Identifier(this.advance().value);
-            } else if (this.check(TokenType.NUMBER)) {
-              defaultValue = new Literal(parseFloat(this.advance().value), '', 'number');
-            } else if (this.check(TokenType.UNDEFINED)) {
-              // FIXED: Handle UNDEFINED token type
-              this.advance();
-              defaultValue = new Literal(undefined, 'undefined', 'undefined');
-            } else if (this.check(TokenType.NULL)) {
-              // FIXED: Handle NULL token type
-              this.advance();
-              defaultValue = new Literal(null, 'null', 'null');
-            } else if (this.isKeyword('undefined')) {
-              this.advance();
-              defaultValue = new Literal(undefined, 'undefined', 'undefined');
-            } else if (this.isKeyword('null')) {
-              this.advance();
-              defaultValue = new Literal(null, 'null', 'null');
-            }
-          }
-
-          params.push(new Parameter(new Identifier(paramName), defaultValue !== null, defaultValue, paramLocation));
-
-          if (!this.isPunctuation(',')) break;
-          this.advance();
-        }
-        this.consume(TokenType.PUNCTUATION, 'Expected }');
-
-        // Handle = {} after destructuring
-        if (this.isOperator('=')) {
-          this.advance();
-          if (this.isPunctuation('{')) {
-            this.advance();
-            let braceDepth = 1;
-            while (braceDepth > 0 && !this.isAtEnd()) {
-              if (this.isPunctuation('{')) braceDepth++;
-              else if (this.isPunctuation('}')) braceDepth--;
-              if (braceDepth > 0) this.advance();
-            }
-            this.consume(TokenType.PUNCTUATION, 'Expected }');
-          }
-        }
-      } else if (this.check(TokenType.IDENTIFIER)) {
-        // Regular parameter
-        const paramName = this.consume(TokenType.IDENTIFIER, 'Expected param name').value;
-        let defaultValue = null;
-
-        if (this.isOperator('=')) {
-          this.advance();
-          const token = this.peek();
-
-          if (this.check(TokenType.IDENTIFIER)) {
-            defaultValue = new Identifier(this.advance().value);
-          } else if (this.check(TokenType.NUMBER)) {
-            defaultValue = new Literal(parseFloat(this.advance().value), '', 'number');
-          } else if (this.check(TokenType.UNDEFINED)) {
-            this.advance();
-            defaultValue = new Literal(undefined, 'undefined', 'undefined');
-          } else if (this.check(TokenType.NULL)) {
-            this.advance();
-            defaultValue = new Literal(null, 'null', 'null');
-          } else if (this.isKeyword('undefined')) {
-            this.advance();
-            defaultValue = new Literal(undefined, 'undefined', 'undefined');
-          } else if (this.isKeyword('null')) {
-            this.advance();
-            defaultValue = new Literal(null, 'null', 'null');
-          }
-        }
-
-        params.push(new Parameter(new Identifier(paramName), defaultValue !== null, defaultValue, paramLocation));
-      } else {
-        break;
-      }
-
-      if (!this.isPunctuation(',')) break;
-      this.advance();
-    }
-
-    return params;
-  }
-
-  parseBlock() {
-    console.log(`\n[parseBlock] STARTING at token: ${this.peek().value}`);
-
-    const startLocation = this.getLocation();
-    const statements = [];
-
-    while (!this.isPunctuation('}') && !this.isAtEnd()) {
-      this.skipComments();  // ← ADD THIS LINE - skip comments in block
-
-      if (this.isPunctuation('}')) break;  // Check again after skipping
-
-      console.log(`  [parseBlock] Current token: ${this.peek().value} (${this.peek().type})`);
-
-      if (this.isKeyword('return')) {
-        console.log(`    Found RETURN statement`);
-        this.advance();
-        let argument = null;
-
-        if (!this.isPunctuation(';') && !this.isPunctuation('}')) {
-          console.log(`    Parsing return argument...`);
-          try {
-            argument = this.parseExpression();
-            console.log(`    Return argument parsed successfully`);
-          } catch (error) {
-            console.error(`    ❌ ERROR parsing return argument: ${error.message}`);
-            console.error(`       Token was: ${this.peek().value}`);
-
-            // Skip to semicolon
-            while (!this.isPunctuation(';') && !this.isPunctuation('}') && !this.isAtEnd()) {
-              this.advance();
-            }
-          }
-        }
-
-        this.consumeStatementEnd();
-        statements.push(new ReturnStatement(argument, startLocation));
-
-      } else {
-        console.log(`    Parsing expression statement...`);
-        try {
-          const expr = this.parseExpression();
-          console.log(`    Expression parsed successfully: ${expr.type}`);
-          this.consumeStatementEnd();
-          statements.push(new ExpressionStatement(expr, startLocation));
-        } catch (error) {
-          console.error(`    ❌ ERROR parsing expression: ${error.message}`);
-          console.error(`       Token was: ${this.peek().value}`);
-
-          // Skip to next statement
-          while (!this.isPunctuation(';') && !this.isPunctuation('}') && !this.isAtEnd()) {
-            this.advance();
-          }
-          if (this.isPunctuation(';')) {
-            this.advance();
-          }
-        }
-      }
-    }
-
-    if (this.isPunctuation('}')) {
-      this.advance();
-    }
-
-    console.log(`[parseBlock] SUCCESS - ${statements.length} statements\n`);
-    return new BlockStatement(statements, startLocation);
-  }
-
-  parseExpression() {
-    console.log(`    [parseExpression] Current token: ${this.peek().value}`);
-    try {
-      const result = this.parseAssignment();
-      console.log(`    [parseExpression] ✓ Success, type: ${result.type}`);
-      return result;
-    } catch (e) {
-      console.error(`    [parseExpression] ✗ Failed: ${e.message}`);
-      throw e;
-    }
-  }
-
-  parseAssignment() {
-    let expr = this.parseTernary();
-
-    if (this.isOperator('=')) {
-      this.advance();
-      const value = this.parseAssignment();
-      return { type: 'AssignmentExpression', left: expr, right: value };
-    }
-
-    return expr;
-  }
-
-  parseTernary() {
-    let expr = this.parseLogicalOr();
-
-    if (this.isOperator('?')) {
-      this.advance();
-      const consequent = this.parseExpression();
-      this.consume(TokenType.OPERATOR, 'Expected :');
-      const alternate = this.parseExpression();
-      return { type: 'ConditionalExpression', test: expr, consequent, alternate };
-    }
-
-    return expr;
-  }
-
-  parseLogicalOr() {
-    let expr = this.parseLogicalAnd();
-
-    while (this.isOperator('||')) {
-      this.advance();
-      const right = this.parseLogicalAnd();
-      expr = { type: 'LogicalExpression', operator: '||', left: expr, right };
-    }
-
-    return expr;
-  }
-
-  parseLogicalAnd() {
-    let expr = this.parseEquality();
-
-    while (this.isOperator('&&')) {
-      this.advance();
-      const right = this.parseEquality();
-      expr = { type: 'LogicalExpression', operator: '&&', left: expr, right };
-    }
-
-    return expr;
-  }
-
-  parseEquality() {
-    let expr = this.parseRelational();
-
-    while (this.isOperator('===') || this.isOperator('!==') || this.isOperator('==') || this.isOperator('!=')) {
-      const operator = this.advance().value;
-      const right = this.parseRelational();
-      expr = { type: 'BinaryExpression', operator, left: expr, right };
-    }
-
-    return expr;
-  }
-
-  parseRelational() {
-    let expr = this.parseAdditive();
-
-    while (this.isOperator('<') || this.isOperator('>') || this.isOperator('<=') || this.isOperator('>=')) {
-      const operator = this.advance().value;
-      const right = this.parseAdditive();
-      expr = { type: 'BinaryExpression', operator, left: expr, right };
-    }
-
-    return expr;
-  }
-
-  parseAdditive() {
-    let expr = this.parseMultiplicative();
-
-    while (this.isOperator('+') || this.isOperator('-')) {
-      const operator = this.advance().value;
-      const right = this.parseMultiplicative();
-      expr = { type: 'BinaryExpression', operator, left: expr, right };
-    }
-
-    return expr;
-  }
-
-  parseMultiplicative() {
-    let expr = this.parseUnary();
-
-    while (this.isOperator('*') || this.isOperator('/') || this.isOperator('%')) {
-      const operator = this.advance().value;
-      const right = this.parseUnary();
-      expr = { type: 'BinaryExpression', operator, left: expr, right };
-    }
-
-    return expr;
-  }
-
-  parseUnary() {
-    console.log(`        [parseUnary] Current: ${this.peek().value}`);
-
-    if (this.isOperator('!') || this.isOperator('-') || this.isOperator('+') || this.isOperator('~')) {
-      const operator = this.advance().value;
-      const expr = this.parseUnary();
-      return { type: 'UnaryExpression', operator, argument: expr };
-    }
-
-
-    console.log(`        [parseUnary] Calling parsePostfix`);
-    return this.parsePostfix();
-  }
-
-  parsePostfix() {
-    console.log(`        [parsePostfix] Starting, calling parseCall`);
-    let expr = this.parseCall();
-    console.log(`        [parsePostfix] parseCall returned: ${expr.type || expr.name}`);
-    console.log(`        [parsePostfix] Next token: ${this.peek().value}`);
-
-    while (true) {
-      if (this.isOperator('++') || this.isOperator('--')) {
-        const operator = this.advance().value;
-        expr = { type: 'UpdateExpression', operator, argument: expr, prefix: false };
-      } else if (this.isPunctuation('.')) {
-        console.log(`        [parsePostfix] Found . member access`);
-        this.advance();
-        const property = new Identifier(this.consume(TokenType.IDENTIFIER, 'Expected property').value);
-        expr = new MemberExpression(expr, property, false);
-        console.log(`        [parsePostfix] Created MemberExpression: ${expr.object.name}.${expr.property.name}`);
-      } else if (this.isPunctuation('[')) {
-        console.log(`        [parsePostfix] Found [ computed access`);
-        this.advance();
-        const property = this.parseExpression();
-        this.consume(TokenType.PUNCTUATION, 'Expected ]');
-        expr = new MemberExpression(expr, property, true);
-      } else {
-        console.log(`        [parsePostfix] No more postfix ops, returning ${expr.type}`);
-        break;
-      }
-    }
-
-    return expr;
-  }
-
-
-  parseCall() {
-    console.log(`        [parseCall] Starting, calling parsePrimary`);
-    let expr = this.parsePrimary();
-    console.log(`        [parseCall] parsePrimary returned: ${expr.type || expr.name}`);
-    console.log(`        [parseCall] Next token: ${this.peek().value} (${this.peek().type})`);
-
-    while (this.isPunctuation('(')) {
-      console.log(`        [parseCall] Found (, parsing function call`);
-      this.advance();
-      const args = this.parseArguments();
-      console.log(`        [parseCall] Parsed ${args.length} arguments`);
-      this.consume(TokenType.PUNCTUATION, 'Expected )');
-      expr = new CallExpression(expr, args);
-      console.log(`        [parseCall] Created CallExpression`);
-    }
-
-    console.log(`        [parseCall] Returning: ${expr.type}`);
-    return expr;
-  }
-
-  parsePrimary() {
-    console.log(`      [parsePrimary] Current: ${this.peek().value} (${this.peek().type})`);
-
-    // Handle 'this' keyword FIRST
-    if (this.isKeyword('this')) {
-      this.advance();
-      console.log(`      [parsePrimary] ✓ this keyword`);
-      return new Identifier('this');
-    }
-
-    if (this.check(TokenType.STRING)) {
-      const token = this.advance();
-      console.log(`      [parsePrimary] ✓ string literal: ${token.value}`);
-      return new Literal(token.value, token.value, 'string');
-    }
-
-    if (this.check(TokenType.NUMBER)) {
-      const token = this.advance();
-      console.log(`      [parsePrimary] ✓ number literal: ${token.value}`);
-      return new Literal(parseFloat(token.value), token.value, 'number');
-    }
-
-    if (this.check(TokenType.BOOLEAN)) {
-      const token = this.advance();
-      console.log(`      [parsePrimary] ✓ boolean: ${token.value}`);
-      return new Literal(token.value === 'true', token.value, 'boolean');
-    }
-
-    if (this.check(TokenType.NULL)) {
-      this.advance();
-      console.log(`      [parsePrimary] ✓ null`);
-      return new Literal(null, 'null', 'null');
-    }
-
-    if (this.check(TokenType.UNDEFINED)) {
-      this.advance();
-      console.log(`      [parsePrimary] ✓ undefined`);
-      return new Literal(undefined, 'undefined', 'undefined');
-    }
-
-    if (this.isKeyword('null')) {
-      this.advance();
-      console.log(`      [parsePrimary] ✓ null keyword`);
-      return new Literal(null, 'null', 'null');
-    }
-
-    if (this.isKeyword('undefined')) {
-      this.advance();
-      console.log(`      [parsePrimary] ✓ undefined keyword`);
-      return new Literal(undefined, 'undefined', 'undefined');
-    }
-
-    if (this.isPunctuation('(')) {
-      console.log(`      [parsePrimary] Found ( - checking for arrow function or grouped expr`);
-      const savedPos = this.current;
-      this.advance();
-
-      if (this.isPunctuation(')')) {
-        const nextPos = this.current + 1;
-        if (nextPos < this.tokens.length &&
-          this.tokens[nextPos].type === TokenType.OPERATOR &&
-          this.tokens[nextPos].value === '=>') {
-          console.log(`      [parsePrimary] ✓ arrow function with no params: () => ...`);
-          this.consume(TokenType.PUNCTUATION, 'Expected )');
-          this.consume(TokenType.OPERATOR, 'Expected =>');
-          const body = this.parseExpression();
-          return new ArrowFunctionExpression([], body);
-        }
-      }
-
-      const expr = this.parseExpression();
-      this.consume(TokenType.PUNCTUATION, 'Expected )');
-
-      if (this.isOperator('=>')) {
-        console.log(`      [parsePrimary] ✓ arrow function: (x) => ...`);
-        this.advance();
-        const body = this.parseExpression();
-        let params = [];
-        if (expr.type === 'Identifier') {
-          params = [new Parameter(expr, false, null)];
-        }
-        return new ArrowFunctionExpression(params, body);
-      }
-
-      console.log(`      [parsePrimary] ✓ grouped expression`);
-      return expr;
-    }
-
-    if (this.isPunctuation('{')) {
-      console.log(`      [parsePrimary] ✓ object literal`);
-      this.advance();
-      return this.parseObjectLiteral();
-    }
-
-    if (this.isPunctuation('[')) {
-      console.log(`      [parsePrimary] ✓ array literal`);
-      this.advance();
-      const elements = [];
-      while (!this.isPunctuation(']') && !this.isAtEnd()) {
-        elements.push(this.parseExpression());
-        if (!this.isPunctuation(',')) break;
-        this.advance();
-      }
-      this.consume(TokenType.PUNCTUATION, 'Expected ]');
-      return { type: 'ArrayLiteral', elements };
-    }
-
-    if (this.isKeyword('new')) {
-      console.log(`      [parsePrimary] ✓ new expression`);
-      this.advance();
-      const callee = new Identifier(this.consume(TokenType.IDENTIFIER, 'Expected class name').value);
-      this.consume(TokenType.PUNCTUATION, 'Expected (');
-      const args = this.parseArguments();
-      this.consume(TokenType.PUNCTUATION, 'Expected )');
-      return new NewExpression(callee, args);
-    }
-
-    if (this.isKeyword('const')) {
-      const savedPos = this.current;
-      this.advance();
-      if (this.isKeyword('new')) {
-        console.log(`      [parsePrimary] ✓ const new expression`);
-        this.advance();
-        const callee = new Identifier(this.consume(TokenType.IDENTIFIER, 'Expected class name').value);
-        this.consume(TokenType.PUNCTUATION, 'Expected (');
-        const args = this.parseArguments();
-        this.consume(TokenType.PUNCTUATION, 'Expected )');
-        const expr = new NewExpression(callee, args);
-        expr.isConst = true;
-        return expr;
-      }
-      this.current = savedPos;
-    }
-
-    if (this.check(TokenType.IDENTIFIER)) {
-      const token = this.advance();
-      const ident = new Identifier(token.value);
-      console.log(`      [parsePrimary] ✓ identifier: ${token.value}`);
-
-      if (this.isOperator('=>')) {
-        console.log(`      [parsePrimary] ✓ arrow function: x => ...`);
-        this.advance();
-        const body = this.parseExpression();
-        return new ArrowFunctionExpression([new Parameter(ident)], body);
-      }
-
-      return ident;
-    }
-
-    // If we get here, we couldn't parse anything
-    console.error(`      [parsePrimary] ❌ FAILED - Cannot parse token: ${this.peek().value} (${this.peek().type})`);
-    throw this.error('Expected expression');
-  }
-
-
-  enterMethod(methodName) {
-    if (!this.callStack) this.callStack = [];
-    this.callStack.push({
-      method: methodName,
-      line: this.peek().line,
-      column: this.peek().column,
-      token: this.peek().value,
-    });
-  }
-
-  parseObjectLiteral() {
-    this.enterMethod('parseObjectLiteral');
-    const properties = [];
-
-    try {
-      while (!this.isPunctuation('}') && !this.isAtEnd()) {
-        if (this.isPunctuation(',')) {
-          this.advance();
-          continue;
-        }
-
-        let key = null;
-        let shorthand = false;
-
-        if (this.isPunctuation('[')) {
-          this.advance();
-          key = this.parseExpression();
-          this.consume(TokenType.PUNCTUATION, 'Expected ]');
-        } else if (this.check(TokenType.IDENTIFIER)) {
-          const token = this.advance();
-          key = new Identifier(token.value);
-
-          if (this.isPunctuation(',') || this.isPunctuation('}')) {
-            shorthand = true;
-          }
-        } else if (this.check(TokenType.STRING)) {
-          const token = this.advance();
-          key = new Literal(token.value, token.value, 'string');
-        } else {
-          this.advance();
-          continue;
-        }
-
-        let value = key;
-        if (!shorthand && this.isPunctuation(':')) {
-          this.advance();
-
-          try {
-            value = this.parseTernary();
-          } catch (error) {
-            if (error.parserError) {
-              this.reportParserError(error.parserError);
-            }
-            value = key;
-
-            while (!this.isPunctuation(',') && !this.isPunctuation('}') && !this.isAtEnd()) {
-              this.advance();
-            }
-          }
-        }
-
-        const prop = new Property(key, value);
-        prop.shorthand = shorthand;
-        properties.push(prop);
-
-        if (this.isPunctuation(',')) {
-          this.advance();
-        }
-      }
-
-      if (this.isPunctuation('}')) {
-        this.advance();
-      }
-
-      this.exitMethod('parseObjectLiteral');
-      return new ObjectLiteral(properties);
-    } catch (e) {
-      this.exitMethod('parseObjectLiteral');
-      throw e;
-    }
-  }
-  parseArguments() {
-    const args = [];
-
-    while (!this.isPunctuation(')') && !this.isAtEnd()) {
-      try {
-        // ⭐ KEY FIX: Use parseTernary() instead of parseLogicalOr()
-        // This allows all operators except assignment
-        args.push(this.parseTernary());
-      } catch (error) {
-        break;
-      }
-
-      if (!this.isPunctuation(',')) break;
-      this.advance();
-    }
-
-    return args;
-  }
-
-  check(type) {
-    if (this.isAtEnd()) return false;
-    return this.peek().type === type;
-  }
-
-  consume(type, message = '') {
-    if (this.check(type)) {
-      return this.advance();
-    }
-    throw this.error(message || `Expected ${type}`);
-  }
-
-  consumeStatementEnd() {
-    this.skipComments();  // ← ADD THIS LINE
-
-    if (this.isPunctuation(';')) {
-      this.advance();
-    }
-
-    this.skipComments();  // ← ADD THIS LINE - skip trailing comments too
-  }
-
-  advance() {
-    if (!this.isAtEnd()) {
-      this.current++;
-    }
-    return this.previous();
-  }
-
-  peek() {
-    return this.tokens[this.current];
-  }
-
- 
-  previous() {
-    return this.tokens[this.current - 1];
-  }
-
-  isAtEnd() {
-    return this.peek().type === TokenType.EOF;
-  }
-
-  getLocation() {
-    const token = this.peek();
-    return { line: token.line, column: token.column };
-  }
-  /**
-  * Enhanced error reporting with full call stack
-  */
-  error(message) {
-    const token = this.peek();
-    const errorObj = new Error(
-      `Parse error at line ${token.line}, column ${token.column}: ${message}`
-    );
-    errorObj.parserError = {
-      message: `Parse error at line ${token.line}, column ${token.column}: ${message}`,
-      line: token.line,
-      column: token.column,
-      token: { type: token.type, value: token.value },
-      callStack: this.callStack ? [...this.callStack] : [],
-    };
-    return errorObj;
-  }
-  /**
-   * Get context around current token (5 tokens before and after)
-   */
-  getContext() {
-    const start = Math.max(0, this.current - 5);
-    const end = Math.min(this.tokens.length, this.current + 6);
-
-    return {
-      before: this.tokens.slice(start, this.current).map(t => `${t.value}(${t.type})`).join(' '),
-      current: `→ ${this.peek().value}(${this.peek().type}) ←`,
-      after: this.tokens.slice(this.current + 1, end).map(t => `${t.value}(${t.type})`).join(' '),
-    };
-  }
-  /**
-   * Track when exiting a parser method
-   */
-  exitMethod(methodName) {
-    if (!this.callStack) this.callStack = [];
-    if (this.callStack.length > 0) {
-      const last = this.callStack[this.callStack.length - 1];
-      if (last.method === methodName) {
-        this.callStack.pop();
-      }
-    }
-  }
-
-  getTokenContext() {
-    const start = Math.max(0, this.current - 5);
-    const end = Math.min(this.tokens.length, this.current + 6);
-
-    const before = this.tokens
-      .slice(start, this.current)
-      .map(t => `${t.value}`)
-      .join(' ');
-
-    const after = this.tokens
-      .slice(this.current + 1, end)
-      .map(t => `${t.value}`)
-      .join(' ');
-
-    return {
-      before: before,
-      current: `→ ${this.peek().value} ←`,
-      after: after,
-    };
-  }
-
-  synchronize() {
-    this.advance();
-    while (!this.isAtEnd()) {
-      if (this.isPunctuation(';')) {
-        this.advance();
-        return;
-      }
-      if (this.isKeyword('class') || this.isKeyword('function') || this.isKeyword('import')) {
-        return;
-      }
-      this.advance();
-    }
-  }
-
-  getErrors() {
-    return this.errors;
-  }
-
-  /**
-   * Report error with full context
-   */
-  reportError(error) {
-    this.errors.push(error);
-
-    if (this.debugMode) {
-      console.error('\n❌ PARSER ERROR DETECTED:\n');
-      console.error(`Message: ${error.message}\n`);
-
-      console.error('📍 Token Context:');
-      console.error(`  Before:  ${error.context.before}`);
-      console.error(`  Current: ${error.context.current}`);
-      console.error(`  After:   ${error.context.after}\n`);
-
-      console.error('📚 Call Stack (where error came from):');
-      if (error.callStack.length === 0) {
-        console.error('  (top level)\n');
-      } else {
-        error.callStack.forEach((frame, idx) => {
-          const arrow = idx === error.callStack.length - 1 ? '→' : ' ';
-          console.error(`  ${arrow} ${idx + 1}. ${frame.method}()`);
-          console.error(`     at token: "${frame.token}" (line ${frame.line}, col ${frame.column})`);
-        });
-        console.error('');
-      }
-    }
-  }
-}
-
-// ============================================================================
-// EXPORTS
-// ============================================================================
-
-export {
-  Parser,
-  Program,
-  ImportDeclaration,
-  ImportSpecifier,
-  ClassDeclaration,
-  ClassBody,
-  FieldDeclaration,
-  MethodDeclaration,
-  Parameter,
-  FunctionDeclaration,
-  BlockStatement,
-  ReturnStatement,
-  ExpressionStatement,
-  Identifier,
-  Literal,
-  CallExpression,
-  NewExpression,
-  ObjectLiteral,
-  Property,
-  ArrowFunctionExpression,
-  MemberExpression,
-  ASTNode,
-};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/analyzer/test/analyzer.test.js b/packages/flutterjs_engine/src/analyzer/test/analyzer.test.js
deleted file mode 100644
index 44f79bf6..00000000
--- a/packages/flutterjs_engine/src/analyzer/test/analyzer.test.js
+++ /dev/null
@@ -1,745 +0,0 @@
-/**
- * FlutterJS Analyzer Tests - Enhanced Phase 1 + 2 + 3
- * Comprehensive tests for complete analysis pipeline
- */
-
-import { Analyzer, analyzeCode, analyzeFile, analyzeAndSave } from '../src/ats/analyzer.js';
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-console.log('\n' + '='.repeat(80));
-console.log('🧪 ANALYZER ORCHESTRATOR TESTS (Phase 1 + 2 + 3)');
-console.log('='.repeat(80) + '\n');
-
-let testsPassed = 0;
-let testsFailed = 0;
-
-function test(name, fn) {
-  try {
-    fn();
-    console.log(`✓ ${name}`);
-    testsPassed++;
-  } catch (error) {
-    console.log(`✗ ${name}`);
-    console.log(`  Error: ${error.message}`);
-    testsFailed++;
-  }
-}
-
-function assert(condition, message) {
-  if (!condition) {
-    throw new Error(message);
-  }
-}
-
-// ============================================================================
-// TEST DATA
-// ============================================================================
-
-const simpleSource = `
-class MyApp extends StatelessWidget {
-  build(context) {
-    return Container({
-      child: new Text({ data: "Hello" })
-    });
-  }
-}
-
-function main() {
-  runApp(new MyApp());
-}
-`;
-
-const statefulSource = `
-class MyCounter extends StatefulWidget {
-  createState() {
-    return new _MyCounterState();
-  }
-}
-
-class _MyCounterState extends State<MyCounter> {
-  _count = 0;
-  
-  _increment() {
-    this.setState(() => {
-      this._count++;
-    });
-  }
-  
-  build(context) {
-    return Text({ data: "Count" });
-  }
-}
-
-function main() {
-  runApp(new MyCounter());
-}
-`;
-
-// Phase 3: Context and SSR patterns
-const contextSource = `
-import { InheritedWidget, ChangeNotifier, Provider } from '@flutterjs/core';
-import { Theme, ThemeData } from '@flutterjs/material';
-
-class ThemeProvider extends InheritedWidget {
-  final ThemeData theme;
-  final Widget child;
-
-  ThemeProvider({ required this.theme, required this.child });
-
-  static ThemeData of(BuildContext context) {
-    return context
-      .dependOnInheritedWidgetOfExactType<ThemeProvider>()
-      ?.theme;
-  }
-
-  @override
-  bool updateShouldNotify(ThemeProvider oldWidget) {
-    return theme != oldWidget.theme;
-  }
-}
-
-class CounterNotifier extends ChangeNotifier {
-  int _count = 0;
-  
-  int get count => _count;
-  
-  void increment() {
-    _count++;
-    notifyListeners();
-  }
-}
-
-class MyApp extends StatelessWidget {
-  build(context) {
-    return ThemeProvider(
-      theme: ThemeData.light(),
-      child: new Provider<CounterNotifier>(
-        create: (context) => CounterNotifier(),
-        child: new MaterialApp({
-          home: new HomePage()
-        })
-      )
-    );
-  }
-}
-
-class HomePage extends StatefulWidget {
-  createState() => _HomePageState();
-}
-
-class _HomePageState extends State<HomePage> {
-  build(context) {
-    final theme = ThemeProvider.of(context);
-    final counter = context.watch<CounterNotifier>();
-    
-    return Scaffold({
-      appBar: new AppBar({
-        backgroundColor: theme.primaryColor
-      }),
-      body: new Center({
-        child: new Text({ 
-          data: "Count: \${counter.count}"
-        })
-      }),
-      floatingActionButton: new FloatingActionButton({
-        onPressed: () {
-          counter.increment();
-        }
-      })
-    });
-  }
-}
-
-function main() {
-  runApp(new MyApp());
-}
-`;
-
-// ============================================================================
-// TEST SUITE 1: Analyzer Initialization
-// ============================================================================
-
-console.log('TEST SUITE 1: Analyzer Initialization\n');
-
-test('Create Analyzer with default options', () => {
-  const analyzer = new Analyzer();
-  assert(analyzer.options.verbose === true, 'Should have verbose enabled');
-  assert(analyzer.options.outputFormat === 'json', 'Should default to JSON');
-  assert(analyzer.options.includeContext === true, 'Should include context by default');
-  assert(analyzer.options.includeSsr === true, 'Should include SSR by default');
-});
-
-test('Create Analyzer with Phase 3 disabled', () => {
-  const analyzer = new Analyzer({
-    sourceCode: simpleSource,
-    includeContext: false,
-    includeSsr: false,
-  });
-
-  assert(analyzer.options.includeContext === false, 'Should disable context');
-  assert(analyzer.options.includeSsr === false, 'Should disable SSR');
-});
-
-test('Create Analyzer with phase selection', () => {
-  const analyzer = new Analyzer({
-    sourceCode: simpleSource,
-  });
-
-  // By default all phases enabled
-  assert(analyzer.options.includeContext === true, 'Phase 3 context enabled');
-  assert(analyzer.options.includeSsr === true, 'Phase 3 SSR enabled');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 2: Source Loading & Lexing
-// ============================================================================
-
-console.log('TEST SUITE 2: Source Loading & Lexing\n');
-
-test('Load and tokenize source code', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: simpleSource,
-    verbose: false,
-  });
-
-  await analyzer.loadSource();
-  analyzer.lex();
-
-  assert(analyzer.results.source !== null, 'Should load source');
-  assert(analyzer.results.tokens.length > 0, 'Should tokenize');
-});
-
-test('Handle lexer errors gracefully', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: simpleSource,
-    verbose: false,
-    strict: false,
-  });
-
-  await analyzer.loadSource();
-  analyzer.lex();
-
-  // Should complete without throwing
-  assert(analyzer.results.tokens !== null, 'Should complete lexing');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 3: Parsing Phase
-// ============================================================================
-
-console.log('TEST SUITE 3: Parsing Phase\n');
-
-test('Parse tokens to AST', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: simpleSource,
-    verbose: false,
-  });
-
-  await analyzer.loadSource();
-  analyzer.lex();
-  analyzer.parse();
-
-  assert(analyzer.results.ast !== null, 'Should have AST');
-  assert(analyzer.results.ast.body.length > 0, 'AST should have body');
-});
-
-test('Parse stateful code', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: statefulSource,
-    verbose: false,
-  });
-
-  await analyzer.loadSource();
-  analyzer.lex();
-  analyzer.parse();
-
-  assert(analyzer.results.ast.body.length > 0, 'Should parse stateful code');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 4: Widget Analysis (Phase 1)
-// ============================================================================
-
-console.log('TEST SUITE 4: Widget Analysis (Phase 1)\n');
-
-test('Analyze widgets', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: statefulSource,
-    verbose: false,
-  });
-
-  await analyzer.loadSource();
-  analyzer.lex();
-  analyzer.parse();
-  analyzer.analyzeWidgets();
-
-  assert(analyzer.results.widgets !== null, 'Should have widgets');
-  assert(Array.isArray(analyzer.results.widgets.widgets), 'Widgets should be array');
-});
-
-test('Detect widget types', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: statefulSource,
-    verbose: false,
-  });
-
-  await analyzer.loadSource();
-  analyzer.lex();
-  analyzer.parse();
-  analyzer.analyzeWidgets();
-
-  const widgets = analyzer.results.widgets.widgets;
-  const types = widgets.map((w) => w.type);
-  
-  // Should detect stateful or component types
-  assert(types.length > 0, 'Should detect widget types');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 5: State Analysis (Phase 2)
-// ============================================================================
-
-console.log('TEST SUITE 5: State Analysis (Phase 2)\n');
-
-test('Analyze state classes', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: statefulSource,
-    verbose: false,
-  });
-
-  await analyzer.loadSource();
-  analyzer.lex();
-  analyzer.parse();
-  analyzer.analyzeWidgets();
-  analyzer.analyzeState();
-
-  assert(analyzer.results.state !== null, 'Should have state results');
-  assert(Array.isArray(analyzer.results.state.stateClasses), 'Should be array');
-});
-
-test('Detect lifecycle methods', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: statefulSource,
-    verbose: false,
-  });
-
-  await analyzer.loadSource();
-  analyzer.lex();
-  analyzer.parse();
-  analyzer.analyzeWidgets();
-  analyzer.analyzeState();
-
-  const lifecycleMethods = analyzer.results.state.lifecycleMethods;
-  assert(Array.isArray(lifecycleMethods), 'Should track lifecycle methods');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 6: Context Analysis (Phase 3)
-// ============================================================================
-
-console.log('TEST SUITE 6: Context Analysis (Phase 3)\n');
-
-test('Analyze context when enabled', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: contextSource,
-    verbose: false,
-    includeContext: true,
-  });
-
-  await analyzer.loadSource();
-  analyzer.lex();
-  analyzer.parse();
-  analyzer.analyzeWidgets();
-  analyzer.analyzeState();
-  analyzer.analyzeContext();
-
-  assert(analyzer.results.context !== null, 'Should have context results');
-  assert(Array.isArray(analyzer.results.context.inheritedWidgets), 'Should detect inherited widgets');
-});
-
-test('Skip context analysis when disabled', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: contextSource,
-    verbose: false,
-    includeContext: false,
-  });
-
-  await analyzer.loadSource();
-  analyzer.lex();
-  analyzer.parse();
-  analyzer.analyzeWidgets();
-  analyzer.analyzeState();
-
-  // Should not call analyzeContext, so results.context should be null
-  assert(analyzer.results.context === null, 'Should be null when disabled');
-});
-
-test('Detect InheritedWidget patterns', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: contextSource,
-    verbose: false,
-  });
-
-  await analyzer.loadSource();
-  analyzer.lex();
-  analyzer.parse();
-  analyzer.analyzeWidgets();
-  analyzer.analyzeState();
-  analyzer.analyzeContext();
-
-  const inherited = analyzer.results.context.inheritedWidgets;
-  assert(inherited.length >= 0, 'Should analyze inherited widgets');
-});
-
-test('Detect ChangeNotifier patterns', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: contextSource,
-    verbose: false,
-  });
-
-  await analyzer.loadSource();
-  analyzer.lex();
-  analyzer.parse();
-  analyzer.analyzeWidgets();
-  analyzer.analyzeState();
-  analyzer.analyzeContext();
-
-  const notifiers = analyzer.results.context.changeNotifiers;
-  assert(Array.isArray(notifiers), 'Should analyze change notifiers');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 7: SSR Analysis (Phase 3)
-// ============================================================================
-
-console.log('TEST SUITE 7: SSR Analysis (Phase 3)\n');
-
-test('Analyze SSR when enabled', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: contextSource,
-    verbose: false,
-    includeSsr: true,
-  });
-
-  await analyzer.loadSource();
-  analyzer.lex();
-  analyzer.parse();
-  analyzer.analyzeWidgets();
-  analyzer.analyzeState();
-  analyzer.analyzeContext();
-  analyzer.analyzeSsr();
-
-  assert(analyzer.results.ssr !== null, 'Should have SSR results');
-  assert(analyzer.results.ssr.ssrCompatibilityScore !== undefined, 'Should have compatibility score');
-});
-
-test('Skip SSR analysis when disabled', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: contextSource,
-    verbose: false,
-    includeSsr: false,
-  });
-
-  await analyzer.loadSource();
-  analyzer.lex();
-  analyzer.parse();
-  analyzer.analyzeWidgets();
-  analyzer.analyzeState();
-  analyzer.analyzeContext();
-
-  assert(analyzer.results.ssr === null, 'Should be null when disabled');
-});
-
-test('Detect SSR-safe patterns', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: simpleSource,
-    verbose: false,
-  });
-
-  await analyzer.loadSource();
-  analyzer.lex();
-  analyzer.parse();
-  analyzer.analyzeWidgets();
-  analyzer.analyzeState();
-  analyzer.analyzeContext();
-  analyzer.analyzeSsr();
-
-  const safePatterns = analyzer.results.ssr.ssrSafePatterns;
-  assert(Array.isArray(safePatterns), 'Should track SSR-safe patterns');
-});
-
-test('Detect SSR-unsafe patterns', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: contextSource,
-    verbose: false,
-  });
-
-  await analyzer.loadSource();
-  analyzer.lex();
-  analyzer.parse();
-  analyzer.analyzeWidgets();
-  analyzer.analyzeState();
-  analyzer.analyzeContext();
-  analyzer.analyzeSsr();
-
-  const unsafePatterns = analyzer.results.ssr.ssrUnsafePatterns;
-  assert(Array.isArray(unsafePatterns), 'Should track SSR-unsafe patterns');
-});
-
-test('Generate SSR migration path', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: contextSource,
-    verbose: false,
-  });
-
-  await analyzer.loadSource();
-  analyzer.lex();
-  analyzer.parse();
-  analyzer.analyzeWidgets();
-  analyzer.analyzeState();
-  analyzer.analyzeContext();
-  analyzer.analyzeSsr();
-
-  const migrationPath = analyzer.results.ssr.ssrMigrationPath;
-  assert(Array.isArray(migrationPath), 'Should generate migration steps');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 8: Report Generation
-// ============================================================================
-
-console.log('TEST SUITE 8: Report Generation\n');
-
-test('Generate JSON report with Phase 3', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: contextSource,
-    outputFormat: 'json',
-    verbose: false,
-  });
-
-  const results = await analyzer.analyze();
-
-  assert(results.report !== undefined, 'Should have report');
-  
-  // Parse to verify valid JSON
-  const parsed = JSON.parse(results.report);
-  assert(parsed.context !== undefined, 'Should include context section');
-  assert(parsed.ssr !== undefined, 'Should include SSR section');
-});
-
-test('Generate Markdown report with Phase 3', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: contextSource,
-    outputFormat: 'markdown',
-    verbose: false,
-  });
-
-  const results = await analyzer.analyze();
-
-  assert(results.report.includes('Context'), 'Should mention context');
-  assert(results.report.includes('SSR'), 'Should mention SSR');
-});
-
-test('Generate Console report with Phase 3', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: contextSource,
-    outputFormat: 'console',
-    verbose: false,
-  });
-
-  const results = await analyzer.analyze();
-
-  assert(results.report.includes('='), 'Should have formatting');
-  assert(results.report.length > 0, 'Should generate output');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 9: Full Pipeline
-// ============================================================================
-
-console.log('TEST SUITE 9: Full Pipeline\n');
-
-test('Complete analysis (Phase 1+2)', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: statefulSource,
-    includeContext: false,
-    includeSsr: false,
-    verbose: false,
-  });
-
-  const results = await analyzer.analyze();
-
-  assert(results.widgets.count >= 0, 'Should have widgets');
-  assert(results.state.stateClasses >= 0, 'Should have state');
-  assert(results.context === null, 'Context should be null');
-  assert(results.ssr === null, 'SSR should be null');
-});
-
-test('Complete analysis (Phase 1+2+3)', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: contextSource,
-    includeContext: true,
-    includeSsr: true,
-    verbose: false,
-  });
-
-  const results = await analyzer.analyze();
-
-  assert(results.widgets.count >= 0, 'Should have widgets');
-  assert(results.state.stateClasses >= 0, 'Should have state');
-  assert(results.context !== null, 'Should have context');
-  assert(results.ssr !== null, 'Should have SSR results');
-  assert(results.ssr.compatibility !== undefined, 'Should have compatibility');
-});
-
-test('Get analysis results structure', async () => {
-  const analyzer = new Analyzer({
-    sourceCode: simpleSource,
-    verbose: false,
-  });
-
-  const results = await analyzer.analyze();
-
-  assert(results.source !== undefined, 'Should have source info');
-  assert(results.tokens !== undefined, 'Should have token count');
-  assert(results.ast !== undefined, 'Should have AST info');
-  assert(results.widgets !== undefined, 'Should have widget info');
-  assert(results.state !== undefined, 'Should have state info');
-  assert(results.context !== undefined, 'Should have context info (Phase 3)');
-  assert(results.ssr !== undefined, 'Should have SSR info (Phase 3)');
-  assert(results.timings !== undefined, 'Should have timings');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 10: Helper Functions
-// ============================================================================
-
-console.log('TEST SUITE 10: Helper Functions\n');
-
-test('analyzeCode helper', async () => {
-  const results = await analyzeCode(simpleSource, { verbose: false });
-
-  assert(results.report !== undefined, 'Should generate report');
-  assert(results.tokens.count > 0, 'Should have tokens');
-});
-
-test('analyzeFile helper', async () => {
-  const testFile = path.join(__dirname, 'temp-helper-test.fjs');
-  fs.writeFileSync(testFile, simpleSource, 'utf-8');
-
-  try {
-    const results = await analyzeFile(testFile, { verbose: false });
-    assert(results.report !== undefined, 'Should generate report');
-  } finally {
-    if (fs.existsSync(testFile)) fs.unlinkSync(testFile);
-  }
-});
-
-test('analyzeAndSave helper', async () => {
-  const sourceFile = path.join(__dirname, 'temp-source.fjs');
-  const outputFile = path.join(__dirname, 'temp-output.json');
-
-  fs.writeFileSync(sourceFile, simpleSource, 'utf-8');
-
-  try {
-    const results = await analyzeAndSave(sourceFile, outputFile, { verbose: false });
-
-    assert(fs.existsSync(outputFile), 'Should create output file');
-    
-    const content = fs.readFileSync(outputFile, 'utf-8');
-    const parsed = JSON.parse(content);
-    assert(parsed.summary !== undefined, 'Output should have summary');
-  } finally {
-    if (fs.existsSync(sourceFile)) fs.unlinkSync(sourceFile);
-    if (fs.existsSync(outputFile)) fs.unlinkSync(outputFile);
-  }
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 11: Error Handling
-// ============================================================================
-
-console.log('TEST SUITE 11: Error Handling\n');
-
-test('Handle missing file gracefully', async () => {
-  const analyzer = new Analyzer({
-    sourceFile: '/nonexistent/path/test.fjs',
-    verbose: false,
-  });
-
-  try {
-    await analyzer.analyze();
-    throw new Error('Should have failed');
-  } catch (error) {
-    assert(error.message.includes('Cannot read file'), 'Should report file error');
-  }
-});
-
-test('Handle no source provided', async () => {
-  const analyzer = new Analyzer({ verbose: false });
-
-  try {
-    await analyzer.loadSource();
-    throw new Error('Should have failed');
-  } catch (error) {
-    assert(error.message.includes('No source code'), 'Should error');
-  }
-});
-
-test('Respect verbose setting', () => {
-  const analyzer = new Analyzer({ verbose: false });
-
-  // Should not throw
-  try {
-    analyzer.log('This should not print');
-  } catch (error) {
-    throw new Error('Logging should not throw');
-  }
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUMMARY
-// ============================================================================
-
-console.log('='.repeat(80));
-console.log('📊 TEST SUMMARY');
-console.log('='.repeat(80));
-console.log(`✓ Passed: ${testsPassed}`);
-console.log(`✗ Failed: ${testsFailed}`);
-console.log(`Total:   ${testsPassed + testsFailed}\n`);
-
-if (testsFailed === 0) {
-  console.log('🎉 ALL TESTS PASSED!\n');
-  process.exit(0);
-} else {
-  console.log(`❌ ${testsFailed} test(s) failed\n`);
-  process.exit(1);
-}
-
-console.log('='.repeat(80) + '\n');
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/analyzer/test/context_analyzer.test.js b/packages/flutterjs_engine/src/analyzer/test/context_analyzer.test.js
deleted file mode 100644
index d311cfec..00000000
--- a/packages/flutterjs_engine/src/analyzer/test/context_analyzer.test.js
+++ /dev/null
@@ -1,572 +0,0 @@
-/**
- * FlutterJS Context Analyzer Tests - Phase 3
- * Tests for InheritedWidget, ChangeNotifier, Provider detection
- */
-
-import { ContextAnalyzer } from '../src/ats/context_analyzer.js';
-import { Lexer } from '../src/ats/lexer.js';
-import { Parser } from '../src/ats/flutterjs_parser.js';
-
-console.log('\n' + '='.repeat(80));
-console.log('🧪 CONTEXT ANALYZER TESTS (Phase 3)');
-console.log('='.repeat(80) + '\n');
-
-let testsPassed = 0;
-let testsFailed = 0;
-
-function test(name, fn) {
-  try {
-    fn();
-    console.log(`✓ ${name}`);
-    testsPassed++;
-  } catch (error) {
-    console.log(`✗ ${name}`);
-    console.log(`  Error: ${error.message}`);
-    testsFailed++;
-  }
-}
-
-function assert(condition, message) {
-  if (!condition) {
-    throw new Error(message);
-  }
-}
-
-// ============================================================================
-// HELPER: Parse source code to AST
-// ============================================================================
-
-function parseSource(source) {
-  const lexer = new Lexer(source);
-  const tokens = lexer.tokenize();
-  const parser = new Parser(tokens);
-  return parser.parse();
-}
-
-// ============================================================================
-// TEST DATA
-// ============================================================================
-
-const themeProviderSource = `
-class ThemeProvider extends InheritedWidget {
-  final ThemeData theme;
-  final Widget child;
-
-  ThemeProvider({ required this.theme, required this.child });
-
-  static ThemeData of(BuildContext context) {
-    return context
-      .dependOnInheritedWidgetOfExactType<ThemeProvider>()
-      ?.theme;
-  }
-
-  @override
-  bool updateShouldNotify(ThemeProvider oldWidget) {
-    return theme != oldWidget.theme;
-  }
-}
-`;
-
-const counterNotifierSource = `
-class CounterNotifier extends ChangeNotifier {
-  int _count = 0;
-  
-  int get count => _count;
-  
-  void increment() {
-    _count++;
-    notifyListeners();
-  }
-  
-  void decrement() {
-    _count--;
-    notifyListeners();
-  }
-}
-`;
-
-const providerPatternSource = `
-class MyApp extends StatelessWidget {
-  build(context) {
-    return Provider<CounterNotifier>(
-      create: (context) => CounterNotifier(),
-      child: new MaterialApp({
-        home: new HomePage()
-      })
-    );
-  }
-}
-`;
-
-const contextUsageSource = `
-class HomePage extends StatefulWidget {
-  createState() => _HomePageState();
-}
-
-class _HomePageState extends State<HomePage> {
-  build(context) {
-    final theme = ThemeProvider.of(context);
-    final counter = context.watch<CounterNotifier>();
-    
-    return Scaffold({
-      appBar: new AppBar({
-        backgroundColor: theme.primaryColor
-      }),
-      body: new Center({
-        child: new Text({ 
-          data: "Count: \${counter.count}"
-        })
-      })
-    });
-  }
-}
-`;
-
-const complexContextSource = `
-import { InheritedWidget, ChangeNotifier, Provider } from '@flutterjs/core';
-
-class ThemeProvider extends InheritedWidget {
-  final ThemeData theme;
-  final Widget child;
-
-  static ThemeData of(BuildContext context) {
-    return context.dependOnInheritedWidgetOfExactType<ThemeProvider>()?.theme;
-  }
-
-  @override
-  bool updateShouldNotify(ThemeProvider oldWidget) {
-    return theme != oldWidget.theme;
-  }
-}
-
-class LocalizationProvider extends InheritedWidget {
-  final LocalizationService localization;
-  final Widget child;
-
-  static LocalizationService of(BuildContext context) {
-    return context.dependOnInheritedWidgetOfExactType<LocalizationProvider>()?.localization;
-  }
-
-  @override
-  bool updateShouldNotify(LocalizationProvider oldWidget) {
-    return localization != oldWidget.localization;
-  }
-}
-
-class CounterNotifier extends ChangeNotifier {
-  int _count = 0;
-  int get count => _count;
-  void increment() {
-    _count++;
-    notifyListeners();
-  }
-}
-
-class AnalyticsNotifier extends ChangeNotifier {
-  void trackEvent(String name) {
-    notifyListeners();
-  }
-}
-
-class MyApp extends StatelessWidget {
-  build(context) {
-    return ThemeProvider(
-      theme: ThemeData.light(),
-      child: LocalizationProvider(
-        localization: LocalizationService(),
-        child: Provider<CounterNotifier>(
-          create: (context) => CounterNotifier(),
-          child: Provider<AnalyticsNotifier>(
-            create: (context) => AnalyticsNotifier(),
-            child: MaterialApp()
-          )
-        )
-      )
-    );
-  }
-}
-`;
-
-// ============================================================================
-// TEST SUITE 1: ContextAnalyzer Initialization
-// ============================================================================
-
-console.log('TEST SUITE 1: ContextAnalyzer Initialization\n');
-
-test('Create ContextAnalyzer instance', () => {
-  const ast = parseSource(themeProviderSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-
-  assert(analyzer.ast !== null, 'Should have AST');
-  assert(analyzer.widgets !== null, 'Should have widgets');
-  assert(analyzer.inheritedWidgets instanceof Map, 'inheritedWidgets should be Map');
-  assert(analyzer.changeNotifiers instanceof Map, 'changeNotifiers should be Map');
-  assert(analyzer.providers instanceof Map, 'providers should be Map');
-});
-
-test('Initialize with widgets array', () => {
-  const ast = parseSource(themeProviderSource);
-  const widgets = [{ name: 'ThemeProvider', type: 'component' }];
-  const analyzer = new ContextAnalyzer(ast, widgets);
-
-  assert(analyzer.widgets.length === 1, 'Should store widgets');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 2: InheritedWidget Detection
-// ============================================================================
-
-console.log('TEST SUITE 2: InheritedWidget Detection\n');
-
-test('Detect InheritedWidget class', () => {
-  const ast = parseSource(themeProviderSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  assert(results.inheritedWidgets.length > 0, 'Should detect InheritedWidget');
-});
-
-test('Extract InheritedWidget metadata', () => {
-  const ast = parseSource(themeProviderSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  const widget = results.inheritedWidgets[0];
-  assert(widget.name === 'ThemeProvider', 'Should have correct name');
-  assert(widget.properties.length > 0, 'Should extract properties');
-});
-
-test('Detect static accessors', () => {
-  const ast = parseSource(themeProviderSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  const widget = results.inheritedWidgets[0];
-  assert(widget.staticAccessors.length > 0, 'Should detect static accessor');
-  assert(widget.staticAccessors[0].name === 'of', 'Should detect of() method');
-});
-
-test('Validate updateShouldNotify implementation', () => {
-  const ast = parseSource(themeProviderSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  const widget = results.inheritedWidgets[0];
-  assert(widget.updateShouldNotifyImplemented === true, 'Should validate implementation');
-});
-
-test('Detect multiple InheritedWidgets', () => {
-  const ast = parseSource(complexContextSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  assert(results.inheritedWidgets.length >= 2, 'Should detect multiple inherited widgets');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 3: ChangeNotifier Detection
-// ============================================================================
-
-console.log('TEST SUITE 3: ChangeNotifier Detection\n');
-
-test('Detect ChangeNotifier class', () => {
-  const ast = parseSource(counterNotifierSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  assert(results.changeNotifiers.length > 0, 'Should detect ChangeNotifier');
-});
-
-test('Extract ChangeNotifier metadata', () => {
-  const ast = parseSource(counterNotifierSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  const notifier = results.changeNotifiers[0];
-  assert(notifier.name === 'CounterNotifier', 'Should have correct name');
-  assert(notifier.properties.length > 0, 'Should extract properties');
-});
-
-test('Detect notifyListeners calls', () => {
-  const ast = parseSource(counterNotifierSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  const notifier = results.changeNotifiers[0];
-  const hasNotifyCall = notifier.methods.some((m) => m.callsNotifyListeners);
-  assert(hasNotifyCall === true, 'Should detect notifyListeners calls');
-});
-
-test('Extract getter methods', () => {
-  const ast = parseSource(counterNotifierSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  const notifier = results.changeNotifiers[0];
-  assert(notifier.getters.length > 0, 'Should detect getter methods');
-  assert(notifier.getters[0].name === 'count', 'Should extract getter name');
-});
-
-test('Detect multiple ChangeNotifiers', () => {
-  const ast = parseSource(complexContextSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  assert(results.changeNotifiers.length >= 2, 'Should detect multiple notifiers');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 4: Provider Pattern Detection
-// ============================================================================
-
-console.log('TEST SUITE 4: Provider Pattern Detection\n');
-
-test('Detect Provider pattern', () => {
-  const ast = parseSource(providerPatternSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  assert(results.providers.length > 0, 'Should detect Provider pattern');
-});
-
-test('Extract Provider metadata', () => {
-  const ast = parseSource(providerPatternSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  const provider = results.providers[0];
-  assert(provider.providerType !== undefined, 'Should have provider type');
-  assert(provider.valueType !== undefined, 'Should have value type');
-});
-
-test('Detect multiple providers', () => {
-  const ast = parseSource(complexContextSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  assert(results.providers.length >= 1, 'Should detect providers');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 5: Context Usage Detection
-// ============================================================================
-
-console.log('TEST SUITE 5: Context Usage Detection\n');
-
-test('Detect context access points', () => {
-  const ast = parseSource(contextUsageSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  assert(results.contextAccessPoints.length > 0, 'Should detect context usage');
-});
-
-test('Identify context.of() pattern', () => {
-  const ast = parseSource(contextUsageSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  const hasOfPattern = results.contextAccessPoints.some((u) => u.pattern.includes('of'));
-  assert(hasOfPattern === true || results.contextAccessPoints.length > 0, 'Should detect .of() pattern');
-});
-
-test('Identify context.watch() pattern', () => {
-  const ast = parseSource(contextUsageSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  const hasWatchPattern = results.contextAccessPoints.some((u) => u.pattern.includes('watch'));
-  assert(hasWatchPattern === true || results.contextAccessPoints.length > 0, 'Should detect watch() pattern');
-});
-
-test('Mark SSR compatibility', () => {
-  const ast = parseSource(contextUsageSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  if (results.contextAccessPoints.length > 0) {
-    const hasMarking = results.contextAccessPoints.some((u) => u.ssrSafe !== undefined);
-    assert(hasMarking === true, 'Should mark SSR compatibility');
-  }
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 6: Context Graphs
-// ============================================================================
-
-console.log('TEST SUITE 6: Context Graphs\n');
-
-test('Build InheritedWidget graph', () => {
-  const ast = parseSource(complexContextSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  assert(results.inheritedWidgetGraph !== undefined, 'Should have graph');
-  assert(typeof results.inheritedWidgetGraph === 'object', 'Graph should be object');
-});
-
-test('Build Provider graph', () => {
-  const ast = parseSource(providerPatternSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  assert(results.providerGraph !== undefined, 'Should have provider graph');
-  assert(typeof results.providerGraph === 'object', 'Graph should be object');
-});
-
-test('Track provider-consumer relationships', () => {
-  const ast = parseSource(complexContextSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  if (results.providers.length > 0) {
-    const provider = results.providers[0];
-    assert(Array.isArray(provider.consumers), 'Should track consumers');
-  }
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 7: Analysis Results Structure
-// ============================================================================
-
-console.log('TEST SUITE 7: Analysis Results Structure\n');
-
-test('Get complete analysis results', () => {
-  const ast = parseSource(complexContextSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  assert(results.inheritedWidgets !== undefined, 'Should have inherited widgets');
-  assert(results.changeNotifiers !== undefined, 'Should have notifiers');
-  assert(results.providers !== undefined, 'Should have providers');
-  assert(results.contextAccessPoints !== undefined, 'Should have access points');
-  assert(results.inheritedWidgetGraph !== undefined, 'Should have graph');
-  assert(results.providerGraph !== undefined, 'Should have provider graph');
-});
-
-test('Results include error handling', () => {
-  const ast = parseSource(complexContextSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  assert(Array.isArray(results.errors), 'Should have errors array');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 8: Edge Cases
-// ============================================================================
-
-console.log('TEST SUITE 8: Edge Cases\n');
-
-test('Handle code with no context patterns', () => {
-  const simpleCode = `
-    class MyWidget extends StatelessWidget {
-      build(context) {
-        return Text({ data: "Hello" });
-      }
-    }
-  `;
-  
-  const ast = parseSource(simpleCode);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  // Should not crash
-  assert(results !== null, 'Should handle code without patterns');
-});
-
-test('Handle missing properties', () => {
-  const incompleteCode = `
-    class MyProvider extends InheritedWidget {
-      @override
-      bool updateShouldNotify(MyProvider oldWidget) {
-        return true;
-      }
-    }
-  `;
-
-  const ast = parseSource(incompleteCode);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  // Should handle gracefully
-  assert(Array.isArray(results.inheritedWidgets), 'Should handle incomplete definitions');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 9: Analysis Validation
-// ============================================================================
-
-console.log('TEST SUITE 9: Analysis Validation\n');
-
-test('Validate InheritedWidget implementation', () => {
-  const ast = parseSource(themeProviderSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  if (results.inheritedWidgets.length > 0) {
-    const widget = results.inheritedWidgets[0];
-    const validationResults = widget.validate?.();
-    
-    if (validationResults) {
-      // Valid implementation should have no errors
-      const errors = validationResults.filter((i) => i.severity === 'error');
-      assert(errors.length === 0 || true, 'Should validate implementation');
-    }
-  }
-});
-
-test('Validate ChangeNotifier implementation', () => {
-  const ast = parseSource(counterNotifierSource);
-  const analyzer = new ContextAnalyzer(ast, []);
-  const results = analyzer.analyze();
-
-  if (results.changeNotifiers.length > 0) {
-    const notifier = results.changeNotifiers[0];
-    const validationResults = notifier.validate?.();
-    
-    if (validationResults) {
-      // Should have validation
-      assert(Array.isArray(validationResults) || validationResults === undefined, 'Should validate');
-    }
-  }
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUMMARY
-// ============================================================================
-
-console.log('='.repeat(80));
-console.log('📊 TEST SUMMARY');
-console.log('='.repeat(80));
-console.log(`✓ Passed: ${testsPassed}`);
-console.log(`✗ Failed: ${testsFailed}`);
-console.log(`Total:   ${testsPassed + testsFailed}\n`);
-
-if (testsFailed === 0) {
-  console.log('🎉 ALL TESTS PASSED!\n');
-  process.exit(0);
-} else {
-  console.log(`❌ ${testsFailed} test(s) failed\n`);
-  process.exit(1);
-}
-
-console.log('='.repeat(80) + '\n');
diff --git a/packages/flutterjs_engine/src/analyzer/test/diagnostic.test.js b/packages/flutterjs_engine/src/analyzer/test/diagnostic.test.js
deleted file mode 100644
index 160c7835..00000000
--- a/packages/flutterjs_engine/src/analyzer/test/diagnostic.test.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Lexer } from '../src/ats/lexer.js';
-import { Parser } from '../src/ats/flutterjs_parser.js';
-
-const source = `
-import { MaterialApp, Text, Container } from '@flutterjs/material';
-
-class MyApp extends StatelessWidget {
-  build(context) {
-    return MaterialApp({
-      title: "Flutter Demo",
-      home: new Container()
-    });
-  }
-}
-
-class MyHomePage extends StatelessWidget {
-  title;
-
-  build(context) {
-    return Container({
-      child: new Text()
-    });
-  }
-}
-
-function main() {
-  runApp(new MyApp());
-}
-`;
-
-console.log('🔍 DIAGNOSTIC TEST\n');
-console.log('Source Code:');
-console.log(source);
-console.log('\n' + '='.repeat(70) + '\n');
-
-// Lex
-const lexer = new Lexer(source);
-const tokens = lexer.tokenize();
-
-console.log('📊 TOKEN ANALYSIS:\n');
-console.log(`Total tokens: ${tokens.length}`);
-
-// Find class and function tokens
-const classTokens = tokens.filter((t) => t.type === 'KEYWORD' && t.value === 'class');
-const functionTokens = tokens.filter((t) => t.type === 'KEYWORD' && t.value === 'function');
-const importTokens = tokens.filter((t) => t.type === 'KEYWORD' && t.value === 'import');
-
-console.log(`Class keywords found: ${classTokens.length}`);
-console.log(`Function keywords found: ${functionTokens.length}`);
-console.log(`Import keywords found: ${importTokens.length}`);
-
-console.log('\n' + '='.repeat(70) + '\n');
-
-// Parse
-const parser = new Parser(tokens);
-const ast = parser.parse();
-
-console.log('📊 AST ANALYSIS:\n');
-console.log(`Total body items: ${ast.body.length}`);
-
-console.log('\nBody items:');
-ast.body.forEach((item, idx) => {
-    console.log(`  [${idx}] ${item.type}`);
-    if (item.type === 'ImportDeclaration') {
-        console.log(`       Source: ${item.source.value}`);
-    }
-    if (item.type === 'ClassDeclaration') {
-        console.log(`       Name: ${item.id.name}`);
-        console.log(`       Extends: ${item.superClass?.name}`);
-        console.log(`       Fields: ${item.body.fields.length}`);
-        console.log(`       Methods: ${item.body.methods.length}`);
-    }
-    if (item.type === 'FunctionDeclaration') {
-        console.log(`       Name: ${item.id?.name}`);
-    }
-});
-
-console.log('\n' + '='.repeat(70) + '\n');
-
-if (parser.getErrors().length > 0) {
-    console.log('❌ PARSER ERRORS:\n');
-    parser.getErrors().forEach((err) => {
-        console.log(`  - ${err.message}`);
-    });
-} else {
-    console.log('✅ No parser errors\n');
-}
-
-console.log('\n' + '='.repeat(70) + '\n');
-console.log('Full AST (filtered):');
-console.log(JSON.stringify(ast, (key, value) => {
-    if (key === 'location') return undefined;
-    if (key === 'body' && Array.isArray(value)) {
-        return value.map((item) => ({
-            type: item.type,
-            name: item.id?.name || item.key?.name,
-            ...(item.superClass && { superClass: item.superClass.name }),
-        }));
-    }
-    return value;
-}, 2));
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/analyzer/test/import_resolver.test.js b/packages/flutterjs_engine/src/analyzer/test/import_resolver.test.js
deleted file mode 100644
index ca8372d4..00000000
--- a/packages/flutterjs_engine/src/analyzer/test/import_resolver.test.js
+++ /dev/null
@@ -1,342 +0,0 @@
-/**
- * COMPREHENSIVE TEST SUITE FOR IMPORT RESOLVER
- * Tests both single-line and multi-line import handling
- */
-
-import { ImportResolver } from '../src/flutter_import_resolver.js';
-
-// ============================================================================
-// TEST DATA
-// ============================================================================
-
-const singleLineImport = `
-import { runApp } from '@flutterjs/runtime';
-`;
-
-const multiLineImportLarge = `
-import {
-  // Core Framework
-  Widget,
-  State,
-  StatefulWidget,
-  StatelessWidget,
-  BuildContext,
-  Key,
-  MaterialApp,
-  Scaffold,
-  AppBar,
-  Text,
-  Container,
-  Card,
-  Column,
-  Row,
-  Icon,
-  Padding,
-  Divider,
-  FloatingActionButton,
-  Icons,
-} from '@flutterjs/material';
-`;
-
-const multiLineImportWithComments = `
-import {
-  /* Block comment */
-  Widget, // inline comment
-  State,
-  /* Another block
-     spanning lines */
-  StatefulWidget,
-} from '@flutterjs/runtime';
-`;
-
-const mixedImports = `
-import { runApp } from '@flutterjs/runtime';
-import {
-  MaterialApp,
-  Scaffold,
-  AppBar,
-} from '@flutterjs/material';
-import defaultExport from '@flutterjs/foundation';
-import * as utils from './utils.js';
-`;
-
-// ============================================================================
-// TEST RUNNER
-// ============================================================================
-
-class ImportResolverTester {
-  constructor() {
-    this.resolver = new ImportResolver({
-      projectRoot: process.cwd(),
-      ignoreUnresolved: true,
-    });
-    this.tests = [];
-    this.passed = 0;
-    this.failed = 0;
-  }
-
-  // Test: Single-line import
-  testSingleLineImport() {
-    console.log('\n' + '='.repeat(80));
-    console.log('TEST 1: Single-Line Import');
-    console.log('='.repeat(80));
-
-    const imports = this.resolver.parseImportsFromSource(singleLineImport);
-
-    console.log('Input:');
-    console.log(singleLineImport);
-    console.log('\nParsed Result:');
-    console.log(JSON.stringify(imports, null, 2));
-
-    const pass = imports.length === 1 && 
-                 imports[0].source === '@flutterjs/runtime' &&
-                 imports[0].items.includes('runApp');
-
-    this.logResult('Single-Line Import', pass, imports);
-    return pass;
-  }
-
-  // Test: Multi-line import (large)
-  testMultiLineImportLarge() {
-    console.log('\n' + '='.repeat(80));
-    console.log('TEST 2: Multi-Line Import (Large)');
-    console.log('='.repeat(80));
-
-    const imports = this.resolver.parseImportsFromSource(multiLineImportLarge);
-
-    console.log('Input:');
-    console.log(multiLineImportLarge);
-    console.log('\nParsed Result:');
-    console.log(JSON.stringify(imports, null, 2));
-
-    const expectedItems = [
-      'Widget', 'State', 'StatefulWidget', 'StatelessWidget',
-      'BuildContext', 'Key', 'MaterialApp', 'Scaffold', 'AppBar',
-      'Text', 'Container', 'Card', 'Column', 'Row', 'Icon',
-      'Padding', 'Divider', 'FloatingActionButton', 'Icons'
-    ];
-
-    const pass = imports.length === 1 &&
-                 imports[0].source === '@flutterjs/material' &&
-                 expectedItems.every(item => imports[0].items.includes(item));
-
-    console.log('\nExpected Items:');
-    console.log(expectedItems.join(', '));
-    console.log('\nActual Items:');
-    if (imports[0]) {
-      console.log(imports[0].items.join(', '));
-      console.log(`\nMissing Items: ${expectedItems.filter(i => !imports[0].items.includes(i)).join(', ')}`);
-    }
-
-    this.logResult('Multi-Line Import (Large)', pass, imports);
-    return pass;
-  }
-
-  // Test: Multi-line with comments
-  testMultiLineWithComments() {
-    console.log('\n' + '='.repeat(80));
-    console.log('TEST 3: Multi-Line Import with Comments');
-    console.log('='.repeat(80));
-
-    const imports = this.resolver.parseImportsFromSource(multiLineImportWithComments);
-
-    console.log('Input:');
-    console.log(multiLineImportWithComments);
-    console.log('\nParsed Result:');
-    console.log(JSON.stringify(imports, null, 2));
-
-    const expectedItems = ['Widget', 'State', 'StatefulWidget'];
-
-    const pass = imports.length === 1 &&
-                 imports[0].source === '@flutterjs/runtime' &&
-                 expectedItems.every(item => imports[0].items.includes(item));
-
-    console.log('\nExpected Items:');
-    console.log(expectedItems.join(', '));
-    console.log('\nActual Items:');
-    if (imports[0]) {
-      console.log(imports[0].items.join(', '));
-    }
-
-    this.logResult('Multi-Line with Comments', pass, imports);
-    return pass;
-  }
-
-  // Test: Mixed import styles
-  testMixedImports() {
-    console.log('\n' + '='.repeat(80));
-    console.log('TEST 4: Mixed Import Styles');
-    console.log('='.repeat(80));
-
-    const imports = this.resolver.parseImportsFromSource(mixedImports);
-
-    console.log('Input:');
-    console.log(mixedImports);
-    console.log('\nParsed Result:');
-    console.log(JSON.stringify(imports, null, 2));
-
-    const pass = imports.length === 4 &&
-                 imports[0].items.includes('runApp') &&
-                 imports[1].items.includes('MaterialApp') &&
-                 imports[2].items.includes('defaultExport') &&
-                 imports[3].items.includes('utils');
-
-    console.log('\nExpected:');
-    console.log('  - Import 1: runApp');
-    console.log('  - Import 2: MaterialApp, Scaffold, AppBar');
-    console.log('  - Import 3: defaultExport');
-    console.log('  - Import 4: utils');
-    console.log('\nActual:');
-    imports.forEach((imp, idx) => {
-      console.log(`  - Import ${idx + 1}: ${imp.items.join(', ')}`);
-    });
-
-    this.logResult('Mixed Import Styles', pass, imports);
-    return pass;
-  }
-
-  // Test: Regex pattern matching
-  testRegexPattern() {
-    console.log('\n' + '='.repeat(80));
-    console.log('TEST 5: Regex Pattern Analysis');
-    console.log('='.repeat(80));
-
-    const importRegex = /import\s+([\s\S]*?)\s+from\s+['"`]([^'"`]+)['"`]/g;
-    
-    console.log('Testing regex against multi-line import:');
-    // console.log('Pattern: /import\\s+([\\s\\S]*?)\\s+from\\s+[\\'"`]([^\\'"`]+)[\\'"`]/g');
-    console.log('\nInput:');
-    console.log(multiLineImportLarge);
-
-    let match;
-    let count = 0;
-    const matches = [];
-
-    while ((match = importRegex.exec(multiLineImportLarge)) !== null) {
-      count++;
-      matches.push({
-        fullMatch: match[0].substring(0, 100) + '...',
-        importClause: match[1].substring(0, 100) + '...',
-        modulePath: match[2],
-      });
-    }
-
-    console.log(`\nMatches found: ${count}`);
-    console.log(JSON.stringify(matches, null, 2));
-
-    const pass = count === 1;
-    this.logResult('Regex Pattern Matching', pass, { count });
-    return pass;
-  }
-
-  // Test: Parse import clause
-  testParseImportClause() {
-    console.log('\n' + '='.repeat(80));
-    console.log('TEST 6: Parse Import Clause');
-    console.log('='.repeat(80));
-
-    const clause = `
-  // Core Framework
-  Widget,
-  State,
-  StatefulWidget,
-  StatelessWidget,
-  BuildContext,
-  Key,
-  MaterialApp,
-`;
-
-    console.log('Input clause:');
-    console.log(clause);
-
-    const result = this.resolver.parseImportClause(clause, '@flutterjs/material');
-
-    console.log('\nParsed Result:');
-    console.log(JSON.stringify(result, null, 2));
-
-    const expectedItems = ['Widget', 'State', 'StatefulWidget', 'StatelessWidget', 'BuildContext', 'Key', 'MaterialApp'];
-    const pass = result && result.items.length === expectedItems.length &&
-                 expectedItems.every(item => result.items.includes(item));
-
-    console.log('\nExpected Items:', expectedItems.length);
-    console.log('Actual Items:', result ? result.items.length : 0);
-
-    this.logResult('Parse Import Clause', pass, result);
-    return pass;
-  }
-
-  // Test: Full resolution pipeline
-  testFullResolutionPipeline() {
-    console.log('\n' + '='.repeat(80));
-    console.log('TEST 7: Full Resolution Pipeline');
-    console.log('='.repeat(80));
-
-    const source = `
-${singleLineImport}
-
-${multiLineImportLarge}
-`;
-
-    console.log('Input:');
-    console.log(source);
-
-    const result = this.resolver.resolveFromSource(source);
-
-    console.log('\nResolution Result:');
-    console.log(JSON.stringify(result, null, 2));
-
-    const pass = result.parsed.length === 2 &&
-                 result.summary.resolved >= 0;
-
-    this.logResult('Full Resolution Pipeline', pass, result);
-    return pass;
-  }
-
-  // Logging helper
-  logResult(testName, passed, data) {
-    const status = passed ? '✅ PASS' : '❌ FAIL';
-    console.log(`\n${status}: ${testName}`);
-    
-    if (!passed) {
-      console.log('Data:', JSON.stringify(data, null, 2));
-      this.failed++;
-    } else {
-      this.passed++;
-    }
-  }
-
-  // Run all tests
-  runAll() {
-    console.log('\n' + '█'.repeat(80));
-    console.log('█ IMPORT RESOLVER TEST SUITE');
-    console.log('█'.repeat(80));
-
-    this.testSingleLineImport();
-    this.testMultiLineImportLarge();
-    this.testMultiLineWithComments();
-    this.testMixedImports();
-    this.testRegexPattern();
-    this.testParseImportClause();
-    this.testFullResolutionPipeline();
-
-    this.printSummary();
-  }
-
-  printSummary() {
-    console.log('\n' + '='.repeat(80));
-    console.log('TEST SUMMARY');
-    console.log('='.repeat(80));
-    console.log(`Passed: ${this.passed}`);
-    console.log(`Failed: ${this.failed}`);
-    console.log(`Total:  ${this.passed + this.failed}`);
-    console.log(`Success Rate: ${((this.passed / (this.passed + this.failed)) * 100).toFixed(2)}%`);
-    console.log('='.repeat(80) + '\n');
-  }
-}
-
-// ============================================================================
-// RUN TESTS
-// ============================================================================
-
-const tester = new ImportResolverTester();
-tester.runAll();
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/analyzer/test/lexer/lexer.test.js b/packages/flutterjs_engine/src/analyzer/test/lexer/lexer.test.js
deleted file mode 100644
index d552901b..00000000
--- a/packages/flutterjs_engine/src/analyzer/test/lexer/lexer.test.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Lexer } from '../../src/ats/lexer.js';   // Adjust path if needed
-
-
-const source = `
-class MyApp extends StatelessWidget {
-  build(context) {
-    return Text("Hello");
-  }
-}
-`;
-
-const lexer = new Lexer(source);
-const tokens = lexer.tokenize();
-lexer.printTokens();
-
-// Check for errors
-if (lexer.getErrors().length > 0) {
-  console.log('Lexing errors:', lexer.getErrors());
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/analyzer/test/lexer/lexer_statfull.test.js b/packages/flutterjs_engine/src/analyzer/test/lexer/lexer_statfull.test.js
deleted file mode 100644
index 9bd1b68b..00000000
--- a/packages/flutterjs_engine/src/analyzer/test/lexer/lexer_statfull.test.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Lexer } from '../../src/ats/lexer.js';   // Adjust path if needed
-
-const source = `
-class HomePage extends StatefulWidget {
-  createState() => _HomePageState();
-}
-
-class _HomePageState extends State<HomePage> {
-  build(context) {
-    final theme = ThemeProvider.of(context);
-    final counter = context.watch<CounterNotifier>();
-    
-    return Scaffold({
-      appBar: new AppBar({
-        backgroundColor: theme.primaryColor
-      }),
-      body: new Center({
-        child: new Text({ 
-          data: "Count: \${counter.count}"
-        })
-      })
-    });
-  }
-}
-`;
-
-
-const lexer = new Lexer(source);
-const tokens = lexer.tokenize();
-lexer.printTokens();
-
-// Check for errors
-if (lexer.getErrors().length > 0) {
-  console.log('Lexing errors:', lexer.getErrors());
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/analyzer/test/parser.test.js b/packages/flutterjs_engine/src/analyzer/test/parser.test.js
deleted file mode 100644
index c0200c9b..00000000
--- a/packages/flutterjs_engine/src/analyzer/test/parser.test.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Lexer } from '../src/ats/lexer.js';
-import { Parser } from '../src/ats/flutterjs_parser.js';
-
-const source = `class MyApp extends StatelessWidget {
-  build(context) {
-    return Text("Hello");
-  }
-}
-
-class MyHomePage extends StatelessWidget {
-  title;
-
-  constructor({ key = undefined, title } = {}) {
-    this.title = title;
-  }
-
-  build(context) {
-    return Scaffold({
-      appBar: new AppBar({ title: new Text({ data: "Demo" }) }),
-      body: new Center({
-        child: new Text({ data: "Hello World" })
-      })
-    });
-  }
-}
-
-function main() {
-  runApp(new MyApp());
-}
-
-const buildUserCard = (name, age) => Card({ child: Text(name) });
-`;
-
-console.log('🔍 Testing Parser...\n');
-console.log('Input Source:');
-console.log(source);
-console.log('\n' + '='.repeat(60) + '\n');
-
-// Step 1: Tokenize
-console.log('📝 Step 1: Lexing...\n');
-const lexer = new Lexer(source);
-const tokens = lexer.tokenize();
-console.log(`✅ Tokenization complete: ${tokens.length} tokens\n`);
-
-// Step 2: Parse
-console.log('📝 Step 2: Parsing...\n');
-const parser = new Parser(tokens);
-const ast = parser.parse();
-console.log(`✅ Parsing complete\n`);
-
-// Check for errors
-if (parser.getErrors().length > 0) {
-  console.log('❌ Parsing errors found:');
-  parser.getErrors().forEach(err => {
-    console.log(`  - ${err.message}`);
-  });
-} else {
-  console.log('✅ No parsing errors\n');
-}
-
-// Step 3: Display AST structure
-console.log('📊 AST Structure:\n');
-console.log(JSON.stringify(ast, (key, value) => {
-  // Skip some verbose properties for readability
-  if (key === 'location') return undefined;
-  return value;
-}, 2));
-
-console.log('\n' + '='.repeat(60) + '\n');
-
-// Step 4: Summary
-console.log('📊 Summary:');
-console.log(`  Program body items: ${ast.body.length}`);
-
-// Count different statement types
-const classCount = ast.body.filter(n => n.type === 'ClassDeclaration').length;
-const funcCount = ast.body.filter(n => n.type === 'FunctionDeclaration').length;
-const exprCount = ast.body.filter(n => n.type === 'ExpressionStatement').length;
-
-console.log(`  Classes: ${classCount}`);
-console.log(`  Functions: ${funcCount}`);
-console.log(`  Expressions: ${exprCount}`);
-console.log(`  Errors: ${parser.getErrors().length}`);
diff --git a/packages/flutterjs_engine/src/analyzer/test/parser_statefull.test.js b/packages/flutterjs_engine/src/analyzer/test/parser_statefull.test.js
deleted file mode 100644
index 9843780d..00000000
--- a/packages/flutterjs_engine/src/analyzer/test/parser_statefull.test.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * Detailed diagnostic to identify exact parsing issues
- */
-
-import { Lexer } from '../src/ats/lexer.js';
-import { Parser } from '../src/ats/flutterjs_parser.js';
-
-const source = `
-class MyCounter extends StatefulWidget {
-  constructor({ key = undefined } = {}) {
-    this.key = key;
-  }
-  
-  createState() {
-    return new _MyCounterState();
-  }
-}
-
-class _MyCounterState extends State<MyCounter> {
-  _count = 0;
-  
-  _incrementCounter() {
-    this.setState(() => {
-      this._count++;
-    });
-  }
-  
-  build(context) {
-    return Text({ data: "Count: " + this._count });
-  }
-}
-
-function main() {
-  runApp(new MyCounter());
-}
-`;
-
-const lexer = new Lexer(source);
-const tokens = lexer.tokenize();
-
-// Print tokens with line numbers
-console.log('\n=== TOKENS BY LINE ===\n');
-const lines = source.split('\n');
-lines.forEach((line, lineIdx) => {
-  const lineNum = lineIdx + 1;
-  const lineTokens = tokens.filter(t => t.line === lineNum);
-  
-  console.log(`Line ${lineNum}: ${line}`);
-  if (lineTokens.length > 0) {
-    lineTokens.forEach(t => {
-      console.log(`  [${t.column}] ${t.type} = "${t.value}"`);
-    });
-  }
-  console.log('');
-});
-
-// Now show what's at the error lines
-console.log('\n=== ERROR LOCATIONS ===\n');
-const errorLines = [4, 16, 22, 23];
-errorLines.forEach(lineNum => {
-  console.log(`\n--- Line ${lineNum} (Column 8) ---`);
-  const line = lines[lineNum - 1];
-  console.log(`Source: "${line}"`);
-  
-  const lineTokens = tokens.filter(t => t.line === lineNum);
-  console.log(`Tokens on this line:`);
-  lineTokens.forEach(t => {
-    const marker = t.column === 8 ? ' <-- ERROR HERE' : '';
-    console.log(`  Col ${t.column}: ${t.type} = "${t.value}"${marker}`);
-  });
-});
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/analyzer/test/report_generator.test.js b/packages/flutterjs_engine/src/analyzer/test/report_generator.test.js
deleted file mode 100644
index a0e2ad6f..00000000
--- a/packages/flutterjs_engine/src/analyzer/test/report_generator.test.js
+++ /dev/null
@@ -1,559 +0,0 @@
-/**
- * Report Generator Tests
- * Tests for JSON, Markdown, and Console report generation
- */
-
-import { ReportGenerator } from '../src/ats/report-generator.js';
-
-console.log('\n' + '='.repeat(80));
-console.log('🧪 REPORT GENERATOR TESTS');
-console.log('='.repeat(80) + '\n');
-
-let testsPassed = 0;
-let testsFailed = 0;
-
-function test(name, fn) {
-  try {
-    fn();
-    console.log(`✓ ${name}`);
-    testsPassed++;
-  } catch (error) {
-    console.log(`✗ ${name}`);
-    console.log(`  Error: ${error.message}`);
-    testsFailed++;
-  }
-}
-
-function assert(condition, message) {
-  if (!condition) {
-    throw new Error(message);
-  }
-}
-
-// ============================================================================
-// MOCK DATA - Simulating Phase 1 & 2 Results
-// ============================================================================
-
-const mockWidgetResults = {
-  file: 'test.fjs',
-  widgets: [
-    {
-      name: 'MyCounter',
-      type: 'stateful',
-      superClass: 'StatefulWidget',
-      location: { line: 1, column: 0 },
-      constructor: {
-        params: [{ name: 'key', optional: true }],
-      },
-      methods: [
-        { name: 'createState', params: [] },
-      ],
-      properties: [],
-      linkedStateClass: '_MyCounterState',
-      imports: [],
-    },
-    {
-      name: '_MyCounterState',
-      type: 'state',
-      superClass: 'State<MyCounter>',
-      location: { line: 10, column: 0 },
-      constructor: null,
-      methods: [
-        { name: 'initState', params: [] },
-        { name: '_increment', params: [] },
-        { name: 'build', params: [{ name: 'context' }] },
-        { name: 'dispose', params: [] },
-      ],
-      properties: [
-        { name: '_count' },
-      ],
-      linkedStateClass: null,
-      imports: [],
-    },
-  ],
-  functions: [
-    {
-      name: 'main',
-      type: 'function',
-      location: { line: 50, column: 0 },
-      params: [],
-      isEntryPoint: true,
-    },
-  ],
-  imports: [
-    {
-      source: '@flutterjs/material',
-      items: ['MaterialApp', 'Scaffold', 'Text'],
-    },
-  ],
-  externalDependencies: ['@flutterjs/material'],
-  entryPoint: 'main',
-  rootWidget: 'MyCounter',
-  widgetTree: {
-    widget: { name: 'MyCounter', type: 'stateful' },
-    depth: 0,
-    children: [
-      {
-        widget: { name: 'MaterialApp', type: 'component' },
-        depth: 1,
-        children: [],
-      },
-    ],
-  },
-};
-
-const mockStateResults = {
-  stateClasses: [
-    {
-      metadata: {
-        name: '_MyCounterState',
-        linkedStatefulWidget: 'MyCounter',
-        location: { line: 10, column: 0 },
-        stateFields: [
-          {
-            name: '_count',
-            type: 'number',
-            initialValue: 0,
-            initialValueString: '0',
-            isUsed: () => true,
-            usedInMethods: ['build', '_increment'],
-            mutatedInMethods: ['_increment'],
-            mutations: [
-              {
-                method: '_increment',
-                operation: '++',
-                wrappedInSetState: true,
-              },
-            ],
-          },
-        ],
-        lifecycleMethods: [
-          {
-            name: 'initState',
-            location: { line: 15, column: 2 },
-            callsSuper: true,
-            hasSideEffects: true,
-            isValid: () => true,
-            validationIssues: [],
-          },
-          {
-            name: 'dispose',
-            location: { line: 25, column: 2 },
-            callsSuper: true,
-            hasSideEffects: true,
-            isValid: () => true,
-            validationIssues: [],
-          },
-        ],
-        otherMethods: [
-          {
-            name: '_increment',
-            params: [],
-          },
-        ],
-      },
-    },
-  ],
-  setStateCalls: [
-    {
-      location: { line: 18, column: 4 },
-      method: '_increment',
-      updates: ['_count'],
-      isValid: true,
-      issues: [],
-    },
-  ],
-  lifecycleMethods: [
-    {
-      name: 'initState',
-      location: { line: 15, column: 2 },
-      callsSuper: true,
-      hasSideEffects: true,
-    },
-    {
-      name: 'dispose',
-      location: { line: 25, column: 2 },
-      callsSuper: true,
-      hasSideEffects: true,
-    },
-  ],
-  eventHandlers: [
-    {
-      event: 'onPressed',
-      handler: '_increment',
-      location: { line: 40, column: 6 },
-      component: 'ElevatedButton',
-      triggersSetState: true,
-      isValid: true,
-      issues: [],
-    },
-  ],
-  dependencyGraph: {
-    stateToMethods: new Map([['_count', ['build', '_increment']]]),
-    methodToState: new Map([['_increment', ['_count']]]),
-    eventToState: new Map([['onPressed', ['_count']]]),
-  },
-  validationResults: [
-    {
-      type: 'unused-field',
-      severity: 'warning',
-      message: 'Field _unused is never used',
-      suggestion: 'Remove or use the field',
-    },
-  ],
-};
-
-// ============================================================================
-// TEST SUITE 1: Report Generator Initialization
-// ============================================================================
-
-console.log('TEST SUITE 1: Report Generator Initialization\n');
-
-test('Create ReportGenerator instance', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults);
-  assert(gen.widgetResults !== null, 'Should have widget results');
-  assert(gen.stateResults !== null, 'Should have state results');
-  assert(gen.options.format === 'json', 'Default format should be JSON');
-});
-
-test('Create with custom options', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults, {
-    format: 'markdown',
-    includeMetrics: false,
-    prettyPrint: false,
-  });
-
-  assert(gen.options.format === 'markdown', 'Should set format to markdown');
-  assert(gen.options.includeMetrics === false, 'Should set includeMetrics to false');
-  assert(gen.options.prettyPrint === false, 'Should set prettyPrint to false');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 2: Metrics Calculation
-// ============================================================================
-
-console.log('TEST SUITE 2: Metrics Calculation\n');
-
-test('Calculate widget metrics', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults);
-  gen.calculateMetrics();
-
-  assert(gen.metadata.totalWidgets === 2, 'Should count 2 widgets');
-  assert(gen.metadata.statefulWidgets === 1, 'Should count 1 stateful widget');
-  assert(gen.metadata.stateClasses === 1, 'Should count 1 state class');
-});
-
-test('Calculate state metrics', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults);
-  gen.calculateMetrics();
-
-  assert(gen.metadata.totalStateFields === 1, 'Should count 1 state field');
-  assert(gen.metadata.setStateCallCount === 1, 'Should count 1 setState call');
-  assert(gen.metadata.lifecycleMethodCount === 2, 'Should count lifecycle methods');
-  assert(gen.metadata.eventHandlerCount === 1, 'Should count event handler');
-});
-
-test('Calculate health score', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults);
-  gen.calculateMetrics();
-
-  assert(gen.metadata.healthScore >= 0, 'Health score should be >= 0');
-  assert(gen.metadata.healthScore <= 100, 'Health score should be <= 100');
-});
-
-test('Calculate complexity score', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults);
-  gen.calculateMetrics();
-
-  assert(gen.metadata.complexityScore >= 0, 'Complexity should be >= 0');
-  assert(gen.metadata.complexityScore <= 100, 'Complexity should be <= 100');
-});
-
-test('Calculate tree depth', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults);
-  gen.calculateMetrics();
-
-  assert(gen.metadata.treeDepth >= 1, 'Tree depth should be >= 1');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 3: Report Building
-// ============================================================================
-
-console.log('TEST SUITE 3: Report Building\n');
-
-test('Build comprehensive report', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults);
-  gen.calculateMetrics();
-  gen.buildReport();
-
-  assert(gen.report.analysis !== undefined, 'Should have analysis section');
-  assert(gen.report.summary !== undefined, 'Should have summary section');
-  assert(gen.report.widgets !== undefined, 'Should have widgets section');
-  assert(gen.report.stateClasses !== undefined, 'Should have state classes section');
-});
-
-test('Report includes correct widget count', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults);
-  gen.calculateMetrics();
-  gen.buildReport();
-
-  assert(gen.report.summary.widgets.total === 2, 'Summary should show 2 widgets');
-});
-
-test('Report includes state information', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults);
-  gen.calculateMetrics();
-  gen.buildReport();
-
-  assert(gen.report.summary.state.stateClasses === 1, 'Should show 1 state class');
-  assert(gen.report.summary.state.stateFields === 1, 'Should show 1 state field');
-  assert(gen.report.summary.state.setStateCalls === 1, 'Should show setState calls');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 4: JSON Report Generation
-// ============================================================================
-
-console.log('TEST SUITE 4: JSON Report Generation\n');
-
-test('Generate JSON report', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults, { format: 'json' });
-  const json = gen.generate();
-
-  assert(typeof json === 'string', 'Should return string');
-  assert(json.includes('{'), 'Should contain JSON');
-});
-
-test('JSON report is valid JSON', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults, { format: 'json' });
-  const json = gen.generate();
-
-  let parsed;
-  try {
-    parsed = JSON.parse(json);
-  } catch (e) {
-    throw new Error('Generated JSON is not valid');
-  }
-
-  assert(parsed.summary !== undefined, 'Parsed JSON should have summary');
-});
-
-test('JSON report includes all sections', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults, { format: 'json' });
-  const json = gen.generate();
-  const parsed = JSON.parse(json);
-
-  assert(parsed.analysis !== undefined, 'Should have analysis');
-  assert(parsed.summary !== undefined, 'Should have summary');
-  assert(parsed.widgets !== undefined, 'Should have widgets');
-  assert(parsed.stateClasses !== undefined, 'Should have stateClasses');
-  assert(parsed.validation !== undefined, 'Should have validation');
-});
-
-test('JSON can be pretty printed', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults, {
-    format: 'json',
-    prettyPrint: true,
-  });
-  const json = gen.generate();
-
-  assert(json.includes('\n'), 'Pretty printed JSON should have newlines');
-  assert(json.includes('  '), 'Pretty printed JSON should have indentation');
-});
-
-test('JSON can be minified', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults, {
-    format: 'json',
-    prettyPrint: false,
-  });
-  const json = gen.generate();
-
-  // Minified JSON should be shorter than pretty printed
-  const gen2 = new ReportGenerator(mockWidgetResults, mockStateResults, {
-    format: 'json',
-    prettyPrint: true,
-  });
-  const json2 = gen2.generate();
-
-  assert(json.length < json2.length, 'Minified should be shorter');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 5: Markdown Report Generation
-// ============================================================================
-
-console.log('TEST SUITE 5: Markdown Report Generation\n');
-
-test('Generate Markdown report', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults, {
-    format: 'markdown',
-  });
-  const md = gen.generate();
-
-  assert(typeof md === 'string', 'Should return string');
-  assert(md.includes('#'), 'Should contain Markdown headers');
-});
-
-test('Markdown includes summary table', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults, {
-    format: 'markdown',
-  });
-  const md = gen.generate();
-
-  assert(md.includes('|'), 'Should have table');
-  assert(md.includes('Summary'), 'Should have summary section');
-});
-
-test('Markdown includes widgets section', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults, {
-    format: 'markdown',
-  });
-  const md = gen.generate();
-
-  assert(md.includes('## Widgets'), 'Should have widgets section');
-  assert(md.includes('MyCounter'), 'Should include widget name');
-});
-
-test('Markdown includes state classes section', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults, {
-    format: 'markdown',
-  });
-  const md = gen.generate();
-
-  assert(md.includes('## State Classes'), 'Should have state classes section');
-  assert(md.includes('_MyCounterState'), 'Should include state class name');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 6: Console Report Generation
-// ============================================================================
-
-console.log('TEST SUITE 6: Console Report Generation\n');
-
-test('Generate Console report', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults, {
-    format: 'console',
-  });
-  const console_report = gen.generate();
-
-  assert(typeof console_report === 'string', 'Should return string');
-  assert(console_report.includes('='), 'Should have separator lines');
-});
-
-test('Console report includes summary', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults, {
-    format: 'console',
-  });
-  const console_report = gen.generate();
-
-  assert(console_report.includes('SUMMARY'), 'Should have summary section');
-  assert(console_report.includes('Widgets'), 'Should include widget count');
-  assert(console_report.includes('Health Score'), 'Should include health score');
-});
-
-test('Console report includes state information', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults, {
-    format: 'console',
-  });
-  const console_report = gen.generate();
-
-  assert(console_report.includes('STATE CLASSES'), 'Should have state classes');
-  assert(console_report.includes('_MyCounterState'), 'Should show state class name');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 7: Suggestions Generation
-// ============================================================================
-
-console.log('TEST SUITE 7: Suggestions Generation\n');
-
-test('Generate suggestions', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults, {
-    includeSuggestions: true,
-  });
-  gen.calculateMetrics();
-  gen.buildReport();
-
-  assert(Array.isArray(gen.report.suggestions), 'Suggestions should be array');
-});
-
-test('Suggest unused field removal', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults, {
-    includeSuggestions: true,
-  });
-  gen.calculateMetrics();
-  gen.buildReport();
-
-  // With our mock data having an unused field, it should suggest removing it
-  const suggestions = gen.generateSuggestions();
-  const hasUnusedSuggestion = suggestions.some((s) => s.type === 'state');
-  
-  // Note: Our current mock doesn't have unused fields, so this may not trigger
-  // but the method should be callable
-  assert(Array.isArray(suggestions), 'Should return array of suggestions');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 8: Detailed Metrics
-// ============================================================================
-
-console.log('TEST SUITE 8: Detailed Metrics\n');
-
-test('Include detailed metrics', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults, {
-    includeMetrics: true,
-  });
-  gen.calculateMetrics();
-  gen.buildReport();
-
-  assert(gen.report.metrics !== null, 'Metrics should be included');
-  assert(gen.report.metrics.widgetMetrics !== undefined, 'Should have widget metrics');
-  assert(gen.report.metrics.stateMetrics !== undefined, 'Should have state metrics');
-});
-
-test('Exclude metrics when disabled', () => {
-  const gen = new ReportGenerator(mockWidgetResults, mockStateResults, {
-    includeMetrics: false,
-  });
-  gen.calculateMetrics();
-  gen.buildReport();
-
-  assert(gen.report.metrics === null, 'Metrics should be null');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUMMARY
-// ============================================================================
-
-console.log('='.repeat(80));
-console.log('📊 TEST SUMMARY');
-console.log('='.repeat(80));
-console.log(`✓ Passed: ${testsPassed}`);
-console.log(`✗ Failed: ${testsFailed}`);
-console.log(`Total:   ${testsPassed + testsFailed}\n`);
-
-if (testsFailed === 0) {
-  console.log('🎉 ALL TESTS PASSED!\n');
-} else {
-  console.log(`❌ ${testsFailed} test(s) failed\n`);
-  process.exit(1);
-}
-
-console.log('='.repeat(80) + '\n');
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/analyzer/test/ssr_analyzer.test.js b/packages/flutterjs_engine/src/analyzer/test/ssr_analyzer.test.js
deleted file mode 100644
index 9299ff39..00000000
--- a/packages/flutterjs_engine/src/analyzer/test/ssr_analyzer.test.js
+++ /dev/null
@@ -1,541 +0,0 @@
-/**
- * FlutterJS SSR Analyzer & Context Data Classes Tests - Phase 3
- * Tests for SSR compatibility analysis and context data structures
- */
-
-import {
-  InheritedWidgetMetadata,
-  ChangeNotifierAnalysis,
-  ProviderAnalysis,
-  ContextDependency,
-  ContextUsagePattern,
-  HydrationRequirement,
-  LazyLoadOpportunity,
-  ContextRequirementsSummary,
-} from '../src/ats/context_analyzer_data.js';
-import { SSRAnalyzer } from '../src/ats/ssr_analyzer.js';
-
-console.log('\n' + '='.repeat(80));
-console.log('🧪 SSR ANALYZER & CONTEXT DATA TESTS (Phase 3)');
-console.log('='.repeat(80) + '\n');
-
-let testsPassed = 0;
-let testsFailed = 0;
-
-function test(name, fn) {
-  try {
-    fn();
-    console.log(`✓ ${name}`);
-    testsPassed++;
-  } catch (error) {
-    console.log(`✗ ${name}`);
-    console.log(`  Error: ${error.message}`);
-    testsFailed++;
-  }
-}
-
-function assert(condition, message) {
-  if (!condition) {
-    throw new Error(message);
-  }
-}
-
-// ============================================================================
-// TEST SUITE 1: InheritedWidgetMetadata
-// ============================================================================
-
-console.log('TEST SUITE 1: InheritedWidgetMetadata\n');
-
-test('Create InheritedWidgetMetadata', () => {
-  const metadata = new InheritedWidgetMetadata('ThemeProvider', { line: 1, column: 0 });
-
-  assert(metadata.name === 'ThemeProvider', 'Should have correct name');
-  assert(metadata.properties.length === 0, 'Should start with no properties');
-  assert(metadata.staticAccessors.length === 0, 'Should start with no accessors');
-});
-
-test('Add properties', () => {
-  const metadata = new InheritedWidgetMetadata('ThemeProvider', { line: 1, column: 0 });
-  metadata.addProperty('theme', 'ThemeData', true);
-  metadata.addProperty('child', 'Widget', true);
-
-  assert(metadata.properties.length === 2, 'Should have 2 properties');
-  assert(metadata.hasChildProperty === true, 'Should detect child property');
-});
-
-test('Add static accessors', () => {
-  const metadata = new InheritedWidgetMetadata('ThemeProvider', { line: 1, column: 0 });
-  metadata.addStaticAccessor('of', 'static ThemeData of(BuildContext)', { line: 10, column: 2 });
-
-  assert(metadata.staticAccessors.length === 1, 'Should have 1 accessor');
-  assert(metadata.staticAccessors[0].name === 'of', 'Should have correct name');
-});
-
-test('Record usage', () => {
-  const metadata = new InheritedWidgetMetadata('ThemeProvider', { line: 1, column: 0 });
-  metadata.recordUsage('HomePage');
-  metadata.recordUsage('DetailsPage');
-
-  assert(metadata.usageCount === 2, 'Should track usage count');
-  assert(metadata.usedIn.includes('HomePage'), 'Should track which widgets use it');
-});
-
-test('Validate InheritedWidget', () => {
-  const metadata = new InheritedWidgetMetadata('ThemeProvider', { line: 1, column: 0 });
-  metadata.addProperty('theme', 'ThemeData', true);
-  metadata.addProperty('child', 'Widget', true);
-  metadata.addStaticAccessor('of', 'static ThemeData of(BuildContext)', { line: 10, column: 2 });
-  metadata.updateShouldNotifyImplemented = true;
-
-  const issues = metadata.validate();
-  assert(issues.length === 0, 'Valid implementation should have no issues');
-});
-
-test('Get metadata summary', () => {
-  const metadata = new InheritedWidgetMetadata('ThemeProvider', { line: 1, column: 0 });
-  metadata.addProperty('theme', 'ThemeData', true);
-  metadata.recordUsage('HomePage');
-
-  const summary = metadata.summary();
-  assert(summary.name === 'ThemeProvider', 'Summary should include name');
-  assert(summary.properties === 1, 'Summary should show property count');
-  assert(summary.usageCount === 1, 'Summary should show usage');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 2: ChangeNotifierAnalysis
-// ============================================================================
-
-console.log('TEST SUITE 2: ChangeNotifierAnalysis\n');
-
-test('Create ChangeNotifierAnalysis', () => {
-  const analysis = new ChangeNotifierAnalysis('CounterNotifier', { line: 20, column: 0 });
-
-  assert(analysis.name === 'CounterNotifier', 'Should have correct name');
-  assert(analysis.type === 'ChangeNotifier', 'Should have correct type');
-  assert(analysis.properties.length === 0, 'Should start with no properties');
-});
-
-test('Add properties and getters', () => {
-  const analysis = new ChangeNotifierAnalysis('CounterNotifier', { line: 20, column: 0 });
-  analysis.addProperty('_count', 'number', 0);
-  analysis.addGetter('count', 'number', { line: 25, column: 2 });
-
-  assert(analysis.properties.length === 1, 'Should have 1 property');
-  assert(analysis.getters.length === 1, 'Should have 1 getter');
-});
-
-test('Add methods', () => {
-  const analysis = new ChangeNotifierAnalysis('CounterNotifier', { line: 20, column: 0 });
-  analysis.addMethod('increment', { line: 30, column: 2 }, true, ['_count']);
-
-  assert(analysis.methods.length === 1, 'Should have 1 method');
-  assert(analysis.methods[0].callsNotifyListeners === true, 'Should track notifyListeners');
-  assert(analysis.methods[0].mutatesFields.includes('_count'), 'Should track mutations');
-});
-
-test('Record consumers', () => {
-  const analysis = new ChangeNotifierAnalysis('CounterNotifier', { line: 20, column: 0 });
-  analysis.recordConsumer('HomePage', 'watch');
-  analysis.recordConsumer('DetailsPage', 'read');
-
-  assert(analysis.consumers.length === 2, 'Should track consumers');
-  assert(analysis.consumers.includes('HomePage'), 'Should include consumer');
-});
-
-test('Validate ChangeNotifier', () => {
-  const analysis = new ChangeNotifierAnalysis('CounterNotifier', { line: 20, column: 0 });
-  analysis.addProperty('_count', 'number', 0);
-  analysis.addMethod('increment', { line: 30, column: 2 }, true, ['_count']);
-
-  const issues = analysis.validate();
-  // Valid implementation should have minimal issues
-  assert(Array.isArray(issues), 'Should return issues array');
-});
-
-test('Get analysis summary', () => {
-  const analysis = new ChangeNotifierAnalysis('CounterNotifier', { line: 20, column: 0 });
-  analysis.addProperty('_count', 'number', 0);
-  analysis.recordConsumer('HomePage');
-
-  const summary = analysis.summary();
-  assert(summary.name === 'CounterNotifier', 'Summary should include name');
-  assert(summary.properties === 1, 'Summary should show properties');
-  assert(summary.consumers === 1, 'Summary should show consumers');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 3: ProviderAnalysis
-// ============================================================================
-
-console.log('TEST SUITE 3: ProviderAnalysis\n');
-
-test('Create ProviderAnalysis', () => {
-  const analysis = new ProviderAnalysis('Provider<CounterNotifier>', { line: 40, column: 2 }, 'CounterNotifier');
-
-  assert(analysis.providerType === 'Provider<CounterNotifier>', 'Should have correct type');
-  assert(analysis.valueType === 'CounterNotifier', 'Should have value type');
-});
-
-test('Set create function', () => {
-  const analysis = new ProviderAnalysis('Provider<CounterNotifier>', { line: 40, column: 2 }, 'CounterNotifier');
-  analysis.setCreateFunction('(context) => CounterNotifier()');
-
-  assert(analysis.createFunction !== null, 'Should set create function');
-});
-
-test('Add consumers', () => {
-  const analysis = new ProviderAnalysis('Provider<CounterNotifier>', { line: 40, column: 2 }, 'CounterNotifier');
-  analysis.addConsumer('HomePage');
-  analysis.addConsumer('DetailsPage');
-
-  assert(analysis.consumers.length === 2, 'Should track consumers');
-});
-
-test('Add access patterns', () => {
-  const analysis = new ProviderAnalysis('Provider<CounterNotifier>', { line: 40, column: 2 }, 'CounterNotifier');
-  analysis.addAccessPattern('watch');
-  analysis.addAccessPattern('read');
-
-  assert(analysis.accessPatterns.length === 2, 'Should track patterns');
-  assert(analysis.accessPatterns.includes('watch'), 'Should include watch');
-});
-
-test('Validate Provider', () => {
-  const analysis = new ProviderAnalysis('Provider<CounterNotifier>', { line: 40, column: 2 }, 'CounterNotifier');
-  analysis.setCreateFunction('(context) => CounterNotifier()');
-  analysis.addConsumer('HomePage');
-
-  const issues = analysis.validate();
-  assert(Array.isArray(issues), 'Should return issues');
-});
-
-test('Get provider summary', () => {
-  const analysis = new ProviderAnalysis('Provider<CounterNotifier>', { line: 40, column: 2 }, 'CounterNotifier');
-  analysis.addConsumer('HomePage');
-  analysis.addAccessPattern('watch');
-
-  const summary = analysis.summary();
-  assert(summary.type === 'Provider<CounterNotifier>', 'Summary should include type');
-  assert(summary.consumers === 1, 'Summary should show consumers');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 4: ContextUsagePattern
-// ============================================================================
-
-console.log('TEST SUITE 4: ContextUsagePattern\n');
-
-test('Create ContextUsagePattern - SSR safe', () => {
-  const pattern = new ContextUsagePattern(
-    'Theme.of(context)',
-    'inherited-widget-lookup',
-    { line: 50, column: 4 },
-    'ThemeData',
-    true,
-    'Pure value access, no subscription'
-  );
-
-  assert(pattern.pattern === 'Theme.of(context)', 'Should have pattern');
-  assert(pattern.ssrSafe === true, 'Should mark as SSR safe');
-  assert(pattern.reason !== '', 'Should have reason');
-});
-
-test('Create ContextUsagePattern - SSR unsafe', () => {
-  const pattern = new ContextUsagePattern(
-    'context.watch<CounterNotifier>()',
-    'provider-watch',
-    { line: 60, column: 4 },
-    'CounterNotifier',
-    false,
-    'Requires reactive subscription'
-  );
-
-  assert(pattern.pattern === 'context.watch<CounterNotifier>()', 'Should have pattern');
-  assert(pattern.ssrSafe === false, 'Should mark as SSR unsafe');
-});
-
-test('Explain SSR safety', () => {
-  const safePattern = new ContextUsagePattern('Theme.of(context)', 'inherited-widget-lookup', {}, 'ThemeData', true, 'Safe reason');
-  const unsafePattern = new ContextUsagePattern('context.watch()', 'provider-watch', {}, 'T', false, 'Unsafe reason');
-
-  const safeExplain = safePattern.explain();
-  const unsafeExplain = unsafePattern.explain();
-
-  assert(safeExplain.includes('✓'), 'Safe should show checkmark');
-  assert(unsafeExplain.includes('✗'), 'Unsafe should show X');
-});
-
-test('Get migration advice', () => {
-  const watchPattern = new ContextUsagePattern('context.watch()', 'provider-watch', {}, 'T', false, 'Unsafe');
-  const advice = watchPattern.getMigrationAdvice();
-
-  assert(advice !== null, 'Should provide migration advice');
-  assert(typeof advice === 'string', 'Advice should be string');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 5: HydrationRequirement
-// ============================================================================
-
-console.log('TEST SUITE 5: HydrationRequirement\n');
-
-test('Create HydrationRequirement', () => {
-  const req = new HydrationRequirement('CounterNotifier', 'State needs re-creation', 0);
-
-  assert(req.dependency === 'CounterNotifier', 'Should have dependency');
-  assert(req.reason !== '', 'Should have reason');
-  assert(req.order === 0, 'Should have order');
-});
-
-test('Add required providers', () => {
-  const req = new HydrationRequirement('CounterNotifier', 'State needs re-creation', 0);
-  req.requiresProvider('Provider<CounterNotifier>');
-
-  assert(req.requiredProviders.length === 1, 'Should track providers');
-});
-
-test('Add required state', () => {
-  const req = new HydrationRequirement('CounterNotifier', 'State needs re-creation', 0);
-  req.requiresState('_count');
-
-  assert(req.requiredState.length === 1, 'Should track state');
-});
-
-test('Get hydration summary', () => {
-  const req = new HydrationRequirement('CounterNotifier', 'State needs re-creation', 0);
-  req.requiresProvider('Provider<CounterNotifier>');
-  req.requiresState('_count');
-
-  const summary = req.summary();
-  assert(summary.dependency === 'CounterNotifier', 'Summary should include dependency');
-  assert(summary.order === 0, 'Summary should include order');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 6: LazyLoadOpportunity
-// ============================================================================
-
-console.log('TEST SUITE 6: LazyLoadOpportunity\n');
-
-test('Create LazyLoadOpportunity', () => {
-  const opp = new LazyLoadOpportunity('HomePage', 'Not needed until navigation', '15KB', 'widget');
-
-  assert(opp.target === 'HomePage', 'Should have target');
-  assert(opp.type === 'widget', 'Should have type');
-});
-
-test('Set recommendation', () => {
-  const opp = new LazyLoadOpportunity('HomePage', 'Not needed', '15KB', 'widget');
-  opp.setRecommendation('Use LazyRoute or dynamic import');
-
-  assert(opp.recommendation !== null, 'Should set recommendation');
-});
-
-test('Calculate priority from size', () => {
-  const opp = new LazyLoadOpportunity('LargeWidget', 'Heavy widget', '80KB', 'widget');
-  opp.calculatePriority(80);
-
-  assert(opp.priority === 'high', 'Should set high priority for large widgets');
-});
-
-test('Get opportunity summary', () => {
-  const opp = new LazyLoadOpportunity('HomePage', 'Not needed', '15KB', 'widget');
-  opp.setRecommendation('Use LazyRoute');
-
-  const summary = opp.summary();
-  assert(summary.target === 'HomePage', 'Summary should include target');
-  assert(summary.recommendation !== null, 'Summary should include recommendation');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 7: ContextRequirementsSummary
-// ============================================================================
-
-console.log('TEST SUITE 7: ContextRequirementsSummary\n');
-
-test('Create ContextRequirementsSummary', () => {
-  const summary = new ContextRequirementsSummary();
-
-  assert(summary.requiresThemeProvider === false, 'Should start with false');
-  assert(summary.customInheritedWidgets.length === 0, 'Should start empty');
-});
-
-test('Add custom inherited widget', () => {
-  const summary = new ContextRequirementsSummary();
-  summary.addCustomInheritedWidget('ThemeProvider');
-
-  assert(summary.customInheritedWidgets.length === 1, 'Should add widget');
-});
-
-test('Add required provider', () => {
-  const summary = new ContextRequirementsSummary();
-  summary.addRequiredProvider('Provider<CounterNotifier>');
-
-  assert(summary.requiredProviders.length === 1, 'Should add provider');
-});
-
-test('Add hydration dependency', () => {
-  const summary = new ContextRequirementsSummary();
-  const req = new HydrationRequirement('CounterNotifier', 'Needs hydration', 0);
-  summary.addHydrationDependency(req);
-
-  assert(summary.hydrationRequired === true, 'Should mark hydration required');
-  assert(summary.hydrationDependencies.length === 1, 'Should add dependency');
-});
-
-test('Calculate SSR compatibility', () => {
-  const summary = new ContextRequirementsSummary();
-  summary.calculateSsrCompatibility();
-
-  assert(['full', 'partial', 'limited', 'none'].includes(summary.ssrCompatibility), 'Should calculate compatibility');
-});
-
-test('Get requirements summary', () => {
-  const summary = new ContextRequirementsSummary();
-  summary.addCustomInheritedWidget('ThemeProvider');
-  summary.requiresThemeProvider = true;
-
-  const sum = summary.summary();
-  assert(sum.customInheritedWidgets.length === 1, 'Summary should include widgets');
-  assert(sum.requiresThemeProvider === true, 'Summary should show requirements');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 8: SSRAnalyzer Initialization
-// ============================================================================
-
-console.log('TEST SUITE 8: SSRAnalyzer Initialization\n');
-
-test('Create SSRAnalyzer', () => {
-  const analyzer = new SSRAnalyzer({}, {});
-
-  assert(analyzer.ssrSafePatterns !== undefined, 'Should have safe patterns array');
-  assert(analyzer.ssrUnsafePatterns !== undefined, 'Should have unsafe patterns array');
-  assert(analyzer.hydrationRequirements !== undefined, 'Should have hydration array');
-});
-
-test('Create with options', () => {
-  const analyzer = new SSRAnalyzer({}, {}, { strict: true, targetPlatform: 'node' });
-
-  assert(analyzer.options.strict === true, 'Should set options');
-  assert(analyzer.options.targetPlatform === 'node', 'Should set platform');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 9: SSR Pattern Detection
-// ============================================================================
-
-console.log('TEST SUITE 9: SSR Pattern Detection\n');
-
-test('Detect SSR-safe patterns', () => {
-  const analyzer = new SSRAnalyzer({}, {});
-  analyzer.detectSsrSafePatterns();
-
-  assert(analyzer.ssrSafePatterns.length > 0, 'Should detect safe patterns');
-});
-
-test('Detect SSR-unsafe patterns', () => {
-  const analyzer = new SSRAnalyzer({}, {});
-  analyzer.detectSsrUnsafePatterns();
-
-  assert(analyzer.ssrUnsafePatterns.length > 0, 'Should detect unsafe patterns');
-});
-
-test('Calculate SSR compatibility score', () => {
-  const analyzer = new SSRAnalyzer({}, {});
-  analyzer.calculateCompatibilityScore();
-
-  assert(analyzer.ssrCompatibilityScore >= 0, 'Score should be >= 0');
-  assert(analyzer.ssrCompatibilityScore <= 100, 'Score should be <= 100');
-});
-
-test('Determine overall compatibility', () => {
-  const analyzer = new SSRAnalyzer({}, {});
-  analyzer.ssrCompatibilityScore = 85;
-
-  const compat = analyzer.getOverallCompatibility();
-  assert(['full', 'partial', 'limited', 'none'].includes(compat), 'Should return valid compatibility');
-});
-
-test('Estimate migration effort', () => {
-  const analyzer = new SSRAnalyzer({}, {});
-  
-  const effort = analyzer.getEstimatedEffort();
-  assert(['minimal', 'moderate', 'significant', 'major-rewrite'].includes(effort), 'Should return valid effort');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 10: Full Analysis
-// ============================================================================
-
-console.log('TEST SUITE 10: Full Analysis\n');
-
-test('Run full SSR analysis', () => {
-  const mockContext = {
-    inheritedWidgets: [],
-    changeNotifiers: [],
-    providers: [],
-    contextAccessPoints: [],
-  };
-
-  const analyzer = new SSRAnalyzer(mockContext, {});
-  const results = analyzer.analyze();
-
-  assert(results.ssrCompatibilityScore !== undefined, 'Should have score');
-  assert(results.overallCompatibility !== undefined, 'Should have compatibility');
-  assert(Array.isArray(results.ssrMigrationPath), 'Should have migration path');
-});
-
-test('Get analysis results', () => {
-  const analyzer = new SSRAnalyzer({}, {});
-  const results = analyzer.getResults();
-
-  assert(results.overallCompatibility !== undefined, 'Should have compatibility');
-  assert(results.ssrCompatibilityScore !== undefined, 'Should have score');
-  assert(results.ssrSafePatterns !== undefined, 'Should have safe patterns');
-  assert(results.ssrUnsafePatterns !== undefined, 'Should have unsafe patterns');
-  assert(results.hydrationRequirements !== undefined, 'Should have hydration');
-  assert(results.ssrMigrationPath !== undefined, 'Should have migration path');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUMMARY
-// ============================================================================
-
-console.log('='.repeat(80));
-console.log('📊 TEST SUMMARY');
-console.log('='.repeat(80));
-console.log(`✓ Passed: ${testsPassed}`);
-console.log(`✗ Failed: ${testsFailed}`);
-console.log(`Total:   ${testsPassed + testsFailed}\n`);
-
-if (testsFailed === 0) {
-  console.log('🎉 ALL TESTS PASSED!\n');
-  process.exit(0);
-} else {
-  console.log(`❌ ${testsFailed} test(s) failed\n`);
-  process.exit(1);
-}
-
-console.log('='.repeat(80) + '\n');
diff --git a/packages/flutterjs_engine/src/analyzer/test/state_analyzer.test.js b/packages/flutterjs_engine/src/analyzer/test/state_analyzer.test.js
deleted file mode 100644
index de4aadc3..00000000
--- a/packages/flutterjs_engine/src/analyzer/test/state_analyzer.test.js
+++ /dev/null
@@ -1,499 +0,0 @@
-/**
- * FlutterJS State Analyzer Tests
- * Phase 2 Implementation
- * 
- * Tests for state detection, setState tracking, lifecycle validation, etc.
- */
-
-import { Lexer } from '../src/ats/lexer.js';
-import { Parser } from '../src/ats/flutterjs_parser.js';
-import { WidgetAnalyzer } from '../src/ats/flutterjs_widget_analyzer.js';
-import { StateAnalyzer } from '../src/ats/state_analyzer_implementation.js';
-
-// ============================================================================
-// TEST 1: Simple Counter Widget (Basic State)
-// ============================================================================
-
-const counterSource = `
-class MyCounter extends StatefulWidget {
-  constructor({ key = undefined } = {}) {
-    this.key = key;
-  }
-  
-  createState() {
-    return new _MyCounterState();
-  }
-}
-
-class _MyCounterState extends State<MyCounter> {
-  _count = 0;
-  _isLoading = false;
-  
-  initState() {
-    super.initState();
-    console.log("Counter initialized");
-  }
-  
-  _incrementCounter() {
-    this.setState(() => {
-      this._count++;
-    });
-  }
-  
-  _decrementCounter() {
-    this.setState(() => {
-      this._count--;
-    });
-  }
-  
-  dispose() {
-    console.log("Cleaning up");
-    super.dispose();
-  }
-  
-  build(context) {
-    return Scaffold({
-      body: new Text({ data: "Count: " + this._count })
-    });
-  }
-}
-
-function main() {
-  runApp(new MyCounter());
-}
-`;
-
-console.log('🧪 STATE ANALYZER TEST SUITE\n');
-console.log('='.repeat(70) + '\n');
-
-// ============================================================================
-// TEST 1: Counter Widget
-// ============================================================================
-
-console.log('TEST 1: Simple Counter Widget\n');
-console.log('Source:');
-console.log(counterSource);
-console.log('\n' + '='.repeat(70) + '\n');
-
-try {
-  const lexer = new Lexer(counterSource);
-  const tokens = lexer.tokenize();
-  console.log(`✓ Lexing: ${tokens.length} tokens\n`);
-
-  const parser = new Parser(tokens);
-  const ast = parser.parse();
-  console.log(`✓ Parsing: ${ast.body.length} top-level items\n`);
-
-  const widgetAnalyzer = new WidgetAnalyzer(ast);
-  const widgetResults = widgetAnalyzer.analyze();
-  console.log(`✓ Widget Analysis: ${widgetResults.widgets.length} widgets found\n`);
-
-  console.log('Widgets detected:');
-  widgetResults.widgets.forEach((w) => {
-    console.log(`  - ${w.name} (${w.type})`);
-  });
-  console.log('');
-
-  const stateAnalyzer = new StateAnalyzer(ast, widgetResults.widgets);
-  const stateResults = stateAnalyzer.analyze();
-
-  console.log('STATE ANALYSIS RESULTS:\n');
-
-  // State Classes
-  console.log(`State Classes: ${stateResults.stateClasses.length}`);
-  stateResults.stateClasses.forEach((sc) => {
-    console.log(`  Name: ${sc.metadata.name}`);
-    console.log(`  Linked to: ${sc.metadata.linkedStatefulWidget}`);
-    console.log(`  State Fields: ${sc.metadata.stateFields.length}`);
-    sc.metadata.stateFields.forEach((f) => {
-      console.log(`    - ${f.name}: ${f.type} = ${f.initialValue}`);
-    });
-  });
-  console.log('');
-
-  // setState Calls
-  console.log(`setState Calls: ${stateResults.setStateCalls.length}`);
-  stateResults.setStateCalls.forEach((call) => {
-    console.log(`  Method: ${call.method}`);
-    console.log(`  Updates: ${call.updates.join(', ')}`);
-    console.log(`  Valid: ${call.isValid}`);
-  });
-  console.log('');
-
-  // Lifecycle Methods
-  console.log(`Lifecycle Methods: ${stateResults.lifecycleMethods.length}`);
-  stateResults.lifecycleMethods.forEach((lc) => {
-    console.log(`  - ${lc.name} (calls super: ${lc.callsSuper})`);
-  });
-  console.log('');
-
-  // Event Handlers
-  console.log(`Event Handlers: ${stateResults.eventHandlers.length}`);
-  stateResults.eventHandlers.forEach((eh) => {
-    console.log(`  - ${eh.event}: ${eh.handler}`);
-  });
-  console.log('');
-
-  // Validation Results
-  console.log(`Validation Issues: ${stateResults.validationResults.length}`);
-  if (stateResults.validationResults.length > 0) {
-    stateResults.validationResults.forEach((result) => {
-      console.log(`  [${result.severity.toUpperCase()}] ${result.type}: ${result.message}`);
-      if (result.suggestion) {
-        console.log(`    → ${result.suggestion}`);
-      }
-    });
-  } else {
-    console.log('  ✓ No validation issues');
-  }
-  console.log('');
-
-  // Dependency Graph
-  console.log('Dependency Graph:');
-  console.log('  State to Methods:');
-  stateResults.dependencyGraph.stateToMethods.forEach((methods, state) => {
-    console.log(`    ${state} → [${methods.join(', ')}]`);
-  });
-  console.log('');
-
-  // Errors
-  if (stateResults.errors.length > 0) {
-    console.log(`❌ Analysis Errors: ${stateResults.errors.length}`);
-    stateResults.errors.forEach((err) => {
-      console.log(`  - ${err.message}`);
-    });
-  } else {
-    console.log('✓ No analysis errors');
-  }
-
-  console.log('\n' + '='.repeat(70) + '\n');
-} catch (error) {
-  console.error('❌ ERROR:', error.message);
-  console.error(error.stack);
-  console.log('\n' + '='.repeat(70) + '\n');
-}
-
-// ============================================================================
-// TEST 2: Widget with Event Handlers
-// ============================================================================
-
-const eventHandlerSource = `
-class MyForm extends StatefulWidget {
-  createState() {
-    return new _MyFormState();
-  }
-}
-
-class _MyFormState extends State<MyForm> {
-  _name = "";
-  _email = "";
-  
-  _handleNameChange(value) {
-    this.setState(() => {
-      this._name = value;
-    });
-  }
-  
-  _handleEmailChange(value) {
-    this.setState(() => {
-      this._email = value;
-    });
-  }
-  
-  _handleSubmit() {
-    console.log("Form submitted: " + this._name);
-    // Process form
-  }
-  
-  build(context) {
-    return Column({
-      children: [
-        new TextField({
-          value: this._name,
-          onChange: (val) => this._handleNameChange(val)
-        }),
-        new TextField({
-          value: this._email,
-          onChange: (val) => this._handleEmailChange(val)
-        }),
-        new Button({
-          onPressed: () => this._handleSubmit(),
-          child: new Text({ data: "Submit" })
-        })
-      ]
-    });
-  }
-}
-`;
-
-console.log('TEST 2: Widget with Event Handlers\n');
-console.log('Source:');
-console.log(eventHandlerSource);
-console.log('\n' + '='.repeat(70) + '\n');
-
-try {
-  const lexer = new Lexer(eventHandlerSource);
-  const tokens = lexer.tokenize();
-  console.log(`✓ Lexing: ${tokens.length} tokens\n`);
-
-  const parser = new Parser(tokens);
-  const ast = parser.parse();
-  console.log(`✓ Parsing: ${ast.body.length} top-level items\n`);
-
-  const widgetAnalyzer = new WidgetAnalyzer(ast);
-  const widgetResults = widgetAnalyzer.analyze();
-  console.log(`✓ Widget Analysis: ${widgetResults.widgets.length} widgets\n`);
-
-  const stateAnalyzer = new StateAnalyzer(ast, widgetResults.widgets);
-  const stateResults = stateAnalyzer.analyze();
-
-  console.log('STATE ANALYSIS RESULTS:\n');
-
-  console.log('State Fields:');
-  stateResults.stateClasses.forEach((sc) => {
-    sc.metadata.stateFields.forEach((f) => {
-      console.log(`  - ${f.name}: ${f.type} = "${f.initialValue}"`);
-    });
-  });
-  console.log('');
-
-  console.log(`Event Handlers Found: ${stateResults.eventHandlers.length}`);
-  stateResults.eventHandlers.forEach((eh) => {
-    console.log(`  - ${eh.event}: ${eh.handler}`);
-  });
-  console.log('');
-
-  console.log('setState Calls (that update fields):');
-  stateResults.setStateCalls.forEach((call) => {
-    console.log(`  ${call.method}() updates: [${call.updates.join(', ')}]`);
-  });
-  console.log('');
-
-  if (stateResults.validationResults.length > 0) {
-    console.log('Validation Issues:');
-    stateResults.validationResults.forEach((result) => {
-      console.log(`  [${result.severity}] ${result.message}`);
-    });
-  } else {
-    console.log('✓ No validation issues\n');
-  }
-
-  console.log('\n' + '='.repeat(70) + '\n');
-} catch (error) {
-  console.error('❌ ERROR:', error.message);
-  console.error(error.stack);
-  console.log('\n' + '='.repeat(70) + '\n');
-}
-
-// ============================================================================
-// TEST 3: Validation - Unused State Field
-// ============================================================================
-
-const unusedStateSource = `
-class MyWidget extends StatefulWidget {
-  createState() {
-    return new _MyWidgetState();
-  }
-}
-
-class _MyWidgetState extends State<MyWidget> {
-  _count = 0;
-  _unused = "never used";
-  
-  _increment() {
-    this.setState(() => {
-      this._count++;
-    });
-  }
-  
-  build(context) {
-    return Text({ data: "Count: " + this._count });
-  }
-}
-`;
-
-console.log('TEST 3: Validation - Unused State Field\n');
-console.log('Source:');
-console.log(unusedStateSource);
-console.log('\n' + '='.repeat(70) + '\n');
-
-try {
-  const lexer = new Lexer(unusedStateSource);
-  const tokens = lexer.tokenize();
-
-  const parser = new Parser(tokens);
-  const ast = parser.parse();
-
-  const widgetAnalyzer = new WidgetAnalyzer(ast);
-  const widgetResults = widgetAnalyzer.analyze();
-
-  const stateAnalyzer = new StateAnalyzer(ast, widgetResults.widgets);
-  const stateResults = stateAnalyzer.analyze();
-
-  console.log('STATE ANALYSIS RESULTS:\n');
-
-  console.log('State Fields Detected:');
-  stateResults.stateClasses.forEach((sc) => {
-    sc.metadata.stateFields.forEach((f) => {
-      console.log(`  - ${f.name}`);
-    });
-  });
-  console.log('');
-
-  if (stateResults.validationResults.length > 0) {
-    console.log('⚠️  VALIDATION WARNINGS/ERRORS:');
-    stateResults.validationResults.forEach((result) => {
-      console.log(`  [${result.type}] ${result.message}`);
-      console.log(`    Severity: ${result.severity}`);
-      console.log(`    Suggestion: ${result.suggestion}`);
-    });
-  } else {
-    console.log('✓ No validation issues');
-  }
-
-  console.log('\n' + '='.repeat(70) + '\n');
-} catch (error) {
-  console.error('❌ ERROR:', error.message);
-}
-
-// ============================================================================
-// TEST 4: Lifecycle Validation
-// ============================================================================
-
-const lifecycleSource = `
-class MyWidget extends StatefulWidget {
-  createState() {
-    return new _MyWidgetState();
-  }
-}
-
-class _MyWidgetState extends State<MyWidget> {
-  _timer = null;
-  
-  initState() {
-    super.initState();
-    this._timer = setTimeout(() => {}, 1000);
-  }
-  
-  dispose() {
-    clearTimeout(this._timer);
-    super.dispose();
-  }
-  
-  build(context) {
-    return Text({ data: "Ready" });
-  }
-}
-`;
-
-console.log('TEST 4: Lifecycle Methods Validation\n');
-console.log('Source:');
-console.log(lifecycleSource);
-console.log('\n' + '='.repeat(70) + '\n');
-
-try {
-  const lexer = new Lexer(lifecycleSource);
-  const tokens = lexer.tokenize();
-
-  const parser = new Parser(tokens);
-  const ast = parser.parse();
-
-  const widgetAnalyzer = new WidgetAnalyzer(ast);
-  const widgetResults = widgetAnalyzer.analyze();
-
-  const stateAnalyzer = new StateAnalyzer(ast, widgetResults.widgets);
-  const stateResults = stateAnalyzer.analyze();
-
-  console.log('LIFECYCLE METHODS DETECTED:\n');
-
-  stateResults.lifecycleMethods.forEach((lc) => {
-    console.log(`  ${lc.name}()`);
-    console.log(`    Calls super: ${lc.callsSuper}`);
-    console.log(`    Has side effects: ${lc.hasSideEffects}`);
-  });
-  console.log('');
-
-  if (stateResults.validationResults.length > 0) {
-    console.log('Validation Results:');
-    stateResults.validationResults.forEach((result) => {
-      console.log(`  [${result.severity}] ${result.message}`);
-    });
-  } else {
-    console.log('✓ Lifecycle validation passed');
-  }
-
-  console.log('\n' + '='.repeat(70) + '\n');
-} catch (error) {
-  console.error('❌ ERROR:', error.message);
-}
-
-// ============================================================================
-// TEST 5: Stateless Widget (Should not have state)
-// ============================================================================
-
-const statelessSource = `
-class MyApp extends StatelessWidget {
-  build(context) {
-    return Container({
-      child: new Text({ data: "Hello" })
-    });
-  }
-}
-
-function main() {
-  runApp(new MyApp());
-}
-`;
-
-console.log('TEST 5: Stateless Widget (No State Expected)\n');
-console.log('Source:');
-console.log(statelessSource);
-console.log('\n' + '='.repeat(70) + '\n');
-
-try {
-  const lexer = new Lexer(statelessSource);
-  const tokens = lexer.tokenize();
-
-  const parser = new Parser(tokens);
-  const ast = parser.parse();
-
-  const widgetAnalyzer = new WidgetAnalyzer(ast);
-  const widgetResults = widgetAnalyzer.analyze();
-
-  console.log(`Widgets: ${widgetResults.widgets.length}`);
-  widgetResults.widgets.forEach((w) => {
-    console.log(`  - ${w.name}: ${w.type}`);
-  });
-  console.log('');
-
-  const stateAnalyzer = new StateAnalyzer(ast, widgetResults.widgets);
-  const stateResults = stateAnalyzer.analyze();
-
-  console.log(`State Classes: ${stateResults.stateClasses.length}`);
-  if (stateResults.stateClasses.length === 0) {
-    console.log('  ✓ Correctly identified as stateless widget');
-  }
-  console.log('');
-
-  console.log(`setState Calls: ${stateResults.setStateCalls.length}`);
-  if (stateResults.setStateCalls.length === 0) {
-    console.log('  ✓ No setState found (as expected)');
-  }
-
-  console.log('\n' + '='.repeat(70) + '\n');
-} catch (error) {
-  console.error('❌ ERROR:', error.message);
-}
-
-// ============================================================================
-// SUMMARY
-// ============================================================================
-
-console.log('✅ TESTS COMPLETED\n');
-console.log('Summary:');
-console.log('  - Test 1: Simple Counter (state fields, setState, lifecycle)');
-console.log('  - Test 2: Form Widget (event handlers, multiple fields)');
-console.log('  - Test 3: Unused State (validation warnings)');
-console.log('  - Test 4: Lifecycle Validation (super calls)');
-console.log('  - Test 5: Stateless Widget (no state expected)');
-console.log('\nNext: Run with: node test/state-analyzer.test.js');
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/analyzer/test/state_analyzer_data.test.js b/packages/flutterjs_engine/src/analyzer/test/state_analyzer_data.test.js
deleted file mode 100644
index e8e6a437..00000000
--- a/packages/flutterjs_engine/src/analyzer/test/state_analyzer_data.test.js
+++ /dev/null
@@ -1,517 +0,0 @@
-/**
- * State Analyzer Data Classes - Unit Tests
- * Tests for all data structures used in Phase 2
- */
-
-import {
-  StateClassMetadata,
-  StateField,
-  LifecycleMethod,
-  StateUpdateCall,
-  EventHandler,
-  DependencyGraph,
-  ValidationResult,
-  AnalysisSummary,
-} from '../src/ats/state_analyzer_data.js';
-
-console.log('\n' + '='.repeat(80));
-console.log('🧪 STATE ANALYZER DATA CLASSES - UNIT TESTS');
-console.log('='.repeat(80) + '\n');
-
-let testsPassed = 0;
-let testsFailed = 0;
-
-/**
- * Test helper
- */
-function test(name, fn) {
-  try {
-    fn();
-    console.log(`✓ ${name}`);
-    testsPassed++;
-  } catch (error) {
-    console.log(`✗ ${name}`);
-    console.log(`  Error: ${error.message}`);
-    testsFailed++;
-  }
-}
-
-function assert(condition, message) {
-  if (!condition) {
-    throw new Error(message);
-  }
-}
-
-// ============================================================================
-// TEST SUITE 1: StateClassMetadata
-// ============================================================================
-
-console.log('TEST SUITE 1: StateClassMetadata\n');
-
-test('Create basic StateClassMetadata', () => {
-  const metadata = new StateClassMetadata('_MyWidgetState', { line: 10, column: 0 });
-  assert(metadata.name === '_MyWidgetState', 'Name should be set');
-  assert(metadata.stateFields.length === 0, 'Should start with no fields');
-  assert(metadata.lifecycleMethods.length === 0, 'Should start with no lifecycle methods');
-});
-
-test('Link StatefulWidget to State class', () => {
-  const metadata = new StateClassMetadata('_MyWidgetState', { line: 10, column: 0 }, 'MyWidget');
-  assert(metadata.linkedStatefulWidget === 'MyWidget', 'Should link to widget');
-});
-
-test('Add state field to metadata', () => {
-  const metadata = new StateClassMetadata('_MyWidgetState', { line: 10, column: 0 });
-  const field = new StateField('_count', 'number', 0, { line: 11, column: 2 });
-  
-  metadata.addStateField(field);
-  assert(metadata.stateFields.length === 1, 'Should have 1 field');
-  assert(metadata.stateFields[0].name === '_count', 'Field should be added');
-});
-
-test('Add lifecycle method to metadata', () => {
-  const metadata = new StateClassMetadata('_MyWidgetState', { line: 10, column: 0 });
-  const lifecycle = new LifecycleMethod('initState', { line: 15, column: 2 }, [], true);
-  
-  metadata.addLifecycleMethod(lifecycle);
-  assert(metadata.lifecycleMethods.length === 1, 'Should have 1 lifecycle method');
-  assert(metadata.lifecycleMethods[0].name === 'initState', 'Method should be added');
-});
-
-test('Get StateClassMetadata summary', () => {
-  const metadata = new StateClassMetadata('_MyWidgetState', { line: 10, column: 0 }, 'MyWidget');
-  const field = new StateField('_count', 'number', 0, { line: 11, column: 2 });
-  metadata.addStateField(field);
-  
-  const summary = metadata.summary();
-  assert(summary.name === '_MyWidgetState', 'Summary should include name');
-  assert(summary.fieldCount === 1, 'Summary should show field count');
-  assert(summary.statefulWidget === 'MyWidget', 'Summary should show linked widget');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 2: StateField
-// ============================================================================
-
-console.log('TEST SUITE 2: StateField\n');
-
-test('Create StateField with initial value', () => {
-  const field = new StateField('_count', 'number', 0, { line: 11, column: 2 });
-  assert(field.name === '_count', 'Name should be set');
-  assert(field.type === 'number', 'Type should be number');
-  assert(field.initialValue === 0, 'Initial value should be 0');
-  assert(field.initialValueString === '0', 'Initial value string should be "0"');
-});
-
-test('Create StateField with string value', () => {
-  const field = new StateField('_name', 'string', 'John', { line: 12, column: 2 });
-  assert(field.type === 'string', 'Type should be string');
-  assert(field.initialValueString === '"John"', 'String value should be quoted');
-});
-
-test('Create StateField with boolean value', () => {
-  const field = new StateField('_isLoading', 'boolean', false, { line: 13, column: 2 });
-  assert(field.type === 'boolean', 'Type should be boolean');
-  assert(field.initialValueString === 'false', 'Boolean value should be stringified');
-});
-
-test('Record usage of state field', () => {
-  const field = new StateField('_count', 'number', 0, { line: 11, column: 2 });
-  
-  field.recordUsage('build');
-  field.recordUsage('_increment');
-  
-  assert(field.usedInMethods.length === 2, 'Should record 2 usages');
-  assert(field.usedInMethods.includes('build'), 'Should include build method');
-  assert(field.usedInMethods.includes('_increment'), 'Should include _increment method');
-});
-
-test('Record mutation of state field', () => {
-  const field = new StateField('_count', 'number', 0, { line: 11, column: 2 });
-  
-  field.recordMutation('_increment', '++');
-  field.recordMutation('_decrement', '--');
-  
-  assert(field.mutations.length === 2, 'Should record 2 mutations');
-  assert(field.mutatedInMethods.length === 2, 'Should have 2 mutating methods');
-});
-
-test('Check if field is used', () => {
-  const field = new StateField('_count', 'number', 0, { line: 11, column: 2 });
-  
-  assert(!field.isUsed(), 'Field should not be used initially');
-  
-  field.recordUsage('build');
-  assert(field.isUsed(), 'Field should be used after recording usage');
-});
-
-test('Get StateField summary', () => {
-  const field = new StateField('_count', 'number', 0, { line: 11, column: 2 });
-  field.recordUsage('build');
-  field.recordMutation('_increment', '++');
-  
-  const summary = field.summary();
-  assert(summary.name === '_count', 'Summary should include name');
-  assert(summary.type === 'number', 'Summary should include type');
-  assert(summary.isUsed === true, 'Summary should show usage');
-  assert(summary.mutationCount === 1, 'Summary should show mutations');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 3: LifecycleMethod
-// ============================================================================
-
-console.log('TEST SUITE 3: LifecycleMethod\n');
-
-test('Create LifecycleMethod - initState', () => {
-  const method = new LifecycleMethod('initState', { line: 20, column: 2 }, [], true);
-  assert(method.name === 'initState', 'Name should be initState');
-  assert(method.callsSuper === true, 'Should call super');
-});
-
-test('Create LifecycleMethod - dispose', () => {
-  const method = new LifecycleMethod('dispose', { line: 30, column: 2 }, [], true, true);
-  assert(method.name === 'dispose', 'Name should be dispose');
-  assert(method.hasSideEffects === true, 'Should have side effects');
-});
-
-test('Mark lifecycle method must call super', () => {
-  const method = new LifecycleMethod('dispose', { line: 30, column: 2 }, [], false);
-  method.setMustCallSuper(true);
-  
-  assert(method.shouldCallSuper === true, 'Should mark as must call super');
-});
-
-test('Add validation issue to lifecycle method', () => {
-  const method = new LifecycleMethod('initState', { line: 20, column: 2 }, [], false);
-  method.addIssue('missing-super', 'initState should call super.initState()', 'warning');
-  
-  assert(method.validationIssues.length === 1, 'Should have 1 issue');
-  assert(method.validationIssues[0].type === 'missing-super', 'Issue type should be correct');
-});
-
-test('Validate lifecycle method - dispose without super is invalid', () => {
-  const method = new LifecycleMethod('dispose', { line: 30, column: 2 }, [], false);
-  assert(!method.isValid(), 'dispose() without super should be invalid');
-});
-
-test('Validate lifecycle method - dispose with super is valid', () => {
-  const method = new LifecycleMethod('dispose', { line: 30, column: 2 }, [], true);
-  assert(method.isValid(), 'dispose() with super should be valid');
-});
-
-test('Get LifecycleMethod summary', () => {
-  const method = new LifecycleMethod('initState', { line: 20, column: 2 }, [], true);
-  const summary = method.summary();
-  
-  assert(summary.name === 'initState', 'Summary should include name');
-  assert(summary.callsSuper === true, 'Summary should show super calls');
-  assert(summary.isValid === true, 'Summary should show validity');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 4: StateUpdateCall
-// ============================================================================
-
-console.log('TEST SUITE 4: StateUpdateCall\n');
-
-test('Create StateUpdateCall', () => {
-  const call = new StateUpdateCall(
-    { line: 28, column: 4 },
-    '_increment',
-    ['_count'],
-    '_MyWidgetState'
-  );
-  
-  assert(call.method === '_increment', 'Method should be set');
-  assert(call.updates.includes('_count'), 'Should update _count');
-  assert(call.isValid === true, 'Should be valid initially');
-});
-
-test('Add validation issue to setState call', () => {
-  const call = new StateUpdateCall(
-    { line: 28, column: 4 },
-    '_increment',
-    ['_count'],
-    '_MyWidgetState'
-  );
-  
-  call.addIssue('unknown-field', 'Unknown state field _count', 'error');
-  assert(call.isValid === false, 'Should be invalid after error');
-  assert(call.issues.length === 1, 'Should have 1 issue');
-});
-
-test('Check if setState call updates specific field', () => {
-  const call = new StateUpdateCall(
-    { line: 28, column: 4 },
-    '_increment',
-    ['_count', '_name'],
-    '_MyWidgetState'
-  );
-  
-  assert(call.updatesField('_count'), 'Should update _count');
-  assert(call.updatesField('_name'), 'Should update _name');
-  assert(!call.updatesField('_other'), 'Should not update _other');
-});
-
-test('Get StateUpdateCall summary', () => {
-  const call = new StateUpdateCall(
-    { line: 28, column: 4 },
-    '_increment',
-    ['_count'],
-    '_MyWidgetState'
-  );
-  
-  const summary = call.summary();
-  assert(summary.method === '_increment', 'Summary should include method');
-  assert(summary.updates.includes('_count'), 'Summary should include updates');
-  assert(summary.isValid === true, 'Summary should show validity');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 5: EventHandler
-// ============================================================================
-
-console.log('TEST SUITE 5: EventHandler\n');
-
-test('Create EventHandler', () => {
-  const handler = new EventHandler(
-    'onPressed',
-    '_increment',
-    { line: 50, column: 6 },
-    'ElevatedButton'
-  );
-  
-  assert(handler.event === 'onPressed', 'Event should be onPressed');
-  assert(handler.handler === '_increment', 'Handler should be _increment');
-  assert(handler.component === 'ElevatedButton', 'Component should be ElevatedButton');
-  assert(handler.isValid === true, 'Should be valid initially');
-});
-
-test('Add validation issue to EventHandler', () => {
-  const handler = new EventHandler('onPressed', '_missing', { line: 50, column: 6 });
-  handler.addIssue('missing-handler', 'Handler _missing not found', 'error');
-  
-  assert(handler.isValid === false, 'Should be invalid');
-  assert(handler.issues.length === 1, 'Should have 1 issue');
-});
-
-test('Mark EventHandler triggers setState', () => {
-  const handler = new EventHandler('onPressed', '_increment', { line: 50, column: 6 });
-  handler.marksSetState(true);
-  
-  assert(handler.triggersSetState === true, 'Should mark as triggers setState');
-});
-
-test('Get EventHandler summary', () => {
-  const handler = new EventHandler(
-    'onChange',
-    '_handleChange',
-    { line: 55, column: 6 },
-    'TextField'
-  );
-  handler.marksSetState(true);
-  
-  const summary = handler.summary();
-  assert(summary.event === 'onChange', 'Summary should include event');
-  assert(summary.handler === '_handleChange', 'Summary should include handler');
-  assert(summary.triggersSetState === true, 'Summary should show setState trigger');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 6: DependencyGraph
-// ============================================================================
-
-console.log('TEST SUITE 6: DependencyGraph\n');
-
-test('Create DependencyGraph', () => {
-  const graph = new DependencyGraph();
-  assert(graph.stateToMethods.size === 0, 'Should start empty');
-});
-
-test('Add state → method mapping', () => {
-  const graph = new DependencyGraph();
-  graph.addStateUse('_count', 'build');
-  graph.addStateUse('_count', '_increment');
-  
-  const methods = graph.getMethodsForState('_count');
-  assert(methods.length === 2, 'Should have 2 methods');
-  assert(methods.includes('build'), 'Should include build');
-  assert(methods.includes('_increment'), 'Should include _increment');
-});
-
-test('Add method → state mapping', () => {
-  const graph = new DependencyGraph();
-  graph.addMethodStateUse('_increment', '_count');
-  
-  const states = graph.getStateForMethod('_increment');
-  assert(states.length === 1, 'Should have 1 state');
-  assert(states.includes('_count'), 'Should include _count');
-});
-
-test('Add event → state mapping', () => {
-  const graph = new DependencyGraph();
-  graph.addEventStateUse('onPressed', '_count');
-  
-  const states = graph.getStateForEvent('onPressed');
-  assert(states.length === 1, 'Should have 1 state');
-  assert(states.includes('_count'), 'Should include _count');
-});
-
-test('Get DependencyGraph summary', () => {
-  const graph = new DependencyGraph();
-  graph.addStateUse('_count', 'build');
-  graph.addStateUse('_count', '_increment');
-  graph.addMethodStateUse('_increment', '_count');
-  graph.addEventStateUse('onPressed', '_count');
-  
-  const summary = graph.summary();
-  assert(Object.keys(summary.stateToMethods).length > 0, 'Summary should include mappings');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 7: ValidationResult
-// ============================================================================
-
-console.log('TEST SUITE 7: ValidationResult\n');
-
-test('Create ValidationResult', () => {
-  const result = new ValidationResult(
-    'unused-state',
-    'Field _unused is never used',
-    'warning'
-  );
-  
-  assert(result.type === 'unused-state', 'Type should be unused-state');
-  assert(result.severity === 'warning', 'Severity should be warning');
-});
-
-test('Add suggestion to ValidationResult', () => {
-  const result = new ValidationResult(
-    'unused-state',
-    'Field _unused is never used',
-    'warning'
-  );
-  
-  result.withSuggestion('Remove the unused field or implement its usage');
-  assert(result.suggestion !== null, 'Should have suggestion');
-});
-
-test('Set affected item on ValidationResult', () => {
-  const result = new ValidationResult(
-    'unused-state',
-    'Field _unused is never used',
-    'warning'
-  );
-  
-  result.affecting('_unused');
-  assert(result.affectedItem === '_unused', 'Should set affected item');
-});
-
-test('Convert ValidationResult to object', () => {
-  const result = new ValidationResult(
-    'unused-state',
-    'Field _unused is never used',
-    'warning'
-  );
-  result.withSuggestion('Remove or use the field');
-  
-  const obj = result.toObject();
-  assert(obj.type === 'unused-state', 'Object should include type');
-  assert(obj.message !== undefined, 'Object should include message');
-  assert(obj.suggestion !== undefined, 'Object should include suggestion');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 8: AnalysisSummary
-// ============================================================================
-
-console.log('TEST SUITE 8: AnalysisSummary\n');
-
-test('Create AnalysisSummary', () => {
-  const summary = new AnalysisSummary();
-  assert(summary.stateClassCount === 0, 'Should start with 0 state classes');
-  assert(summary.errorCount === 0, 'Should start with 0 errors');
-});
-
-test('Calculate complexity score', () => {
-  const summary = new AnalysisSummary();
-  summary.stateFieldCount = 3;
-  summary.setStateCallCount = 5;
-  summary.eventHandlerCount = 2;
-  
-  const score = summary.calculateComplexity();
-  assert(score > 0, 'Complexity should be calculated');
-  assert(score <= 100, 'Score should not exceed 100');
-});
-
-test('Calculate health score', () => {
-  const summary = new AnalysisSummary();
-  summary.stateFieldCount = 2;
-  summary.setStateCallCount = 2;
-  summary.errorCount = 0;
-  summary.warningCount = 0;
-  
-  summary.calculateComplexity();
-  const health = summary.calculateHealth();
-  
-  assert(health > 0, 'Health should be positive');
-  assert(health <= 100, 'Health should not exceed 100');
-});
-
-test('Calculate health score with errors', () => {
-  const summary = new AnalysisSummary();
-  summary.errorCount = 2;
-  summary.warningCount = 1;
-  
-  const health = summary.calculateHealth();
-  assert(health < 100, 'Health should be reduced with errors');
-});
-
-test('Get AnalysisSummary object', () => {
-  const summary = new AnalysisSummary();
-  summary.stateClassCount = 1;
-  summary.stateFieldCount = 2;
-  summary.setStateCallCount = 3;
-  
-  const obj = summary.toObject();
-  assert(obj.stateClasses === 1, 'Should include state class count');
-  assert(obj.stateFields === 2, 'Should include state field count');
-  assert(obj.setStateCalls === 3, 'Should include setState call count');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUMMARY
-// ============================================================================
-
-console.log('='.repeat(80));
-console.log('📊 TEST SUMMARY');
-console.log('='.repeat(80));
-console.log(`✓ Passed: ${testsPassed}`);
-console.log(`✗ Failed: ${testsFailed}`);
-console.log(`Total:   ${testsPassed + testsFailed}\n`);
-
-if (testsFailed === 0) {
-  console.log('🎉 ALL TESTS PASSED!\n');
-} else {
-  console.log(`❌ ${testsFailed} test(s) failed\n`);
-  process.exit(1);
-}
-
-console.log('='.repeat(80) + '\n');
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/analyzer/test/test_runner.js b/packages/flutterjs_engine/src/analyzer/test/test_runner.js
deleted file mode 100644
index edfcf16e..00000000
--- a/packages/flutterjs_engine/src/analyzer/test/test_runner.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * Test Runner - Executes all test files
- * Usage: node test/runner.js
- */
-
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// Get all test files
-const testDir = __dirname;
-const testFiles = fs
-  .readdirSync(testDir)
-  .filter(file => file.endsWith('.test.js'))
-  .sort();
-
-// Colors for terminal output
-const colors = {
-  reset: '\x1b[0m',
-  bright: '\x1b[1m',
-  green: '\x1b[32m',
-  red: '\x1b[31m',
-  yellow: '\x1b[33m',
-  blue: '\x1b[34m',
-  cyan: '\x1b[36m',
-};
-
-const log = {
-  title: (msg) => console.log(`\n${colors.bright}${colors.blue}${msg}${colors.reset}`),
-  success: (msg) => console.log(`${colors.green}✅ ${msg}${colors.reset}`),
-  error: (msg) => console.log(`${colors.red}❌ ${msg}${colors.reset}`),
-  info: (msg) => console.log(`${colors.cyan}ℹ️  ${msg}${colors.reset}`),
-  warn: (msg) => console.log(`${colors.yellow}⚠️  ${msg}${colors.reset}`),
-};
-
-/**
- * Run a single test file
- */
-async function runTestFile(filePath) {
-  const fileName = path.basename(filePath);
-  
-  try {
-    log.title(`Running: ${fileName}`);
-    const module = await import(`file://${filePath}`);
-    
-    // If test file has a run function, call it
-    if (typeof module.default === 'function') {
-      await module.default();
-    } else if (typeof module.run === 'function') {
-      await module.run();
-    }
-    
-    log.success(`${fileName} passed`);
-    return true;
-  } catch (error) {
-    log.error(`${fileName} failed`);
-    console.error(error);
-    return false;
-  }
-}
-
-/**
- * Main test runner
- */
-async function runAllTests() {
-  console.log(`\n${colors.bright}${colors.cyan}🧪 FlutterJS Analyzer Test Suite${colors.reset}\n`);
-  
-  if (testFiles.length === 0) {
-    log.warn('No test files found in test/');
-    return;
-  }
-
-  log.info(`Found ${testFiles.length} test file(s)`);
-  
-  let passed = 0;
-  let failed = 0;
-  const startTime = Date.now();
-
-  for (const file of testFiles) {
-    const filePath = path.join(testDir, file);
-    const success = await runTestFile(filePath);
-    
-    if (success) {
-      passed++;
-    } else {
-      failed++;
-    }
-  }
-
-  const duration = ((Date.now() - startTime) / 1000).toFixed(2);
-
-  // Summary
-  console.log(`\n${colors.bright}${'='.repeat(60)}${colors.reset}`);
-  console.log(`${colors.bright}Test Results:${colors.reset}`);
-  console.log(`  ${colors.green}✅ Passed: ${passed}${colors.reset}`);
-  console.log(`  ${colors.red}❌ Failed: ${failed}${colors.reset}`);
-  console.log(`  ${colors.cyan}⏱️  Duration: ${duration}s${colors.reset}`);
-  console.log(`${colors.bright}${'='.repeat(60)}${colors.reset}\n`);
-
-  // Exit with appropriate code
-  process.exit(failed > 0 ? 1 : 0);
-}
-
-runAllTests().catch(error => {
-  log.error('Fatal error in test runner');
-  console.error(error);
-  process.exit(1);
-});
diff --git a/packages/flutterjs_engine/src/analyzer/test/widget_analyzer/complex_inherited_widget.test.js b/packages/flutterjs_engine/src/analyzer/test/widget_analyzer/complex_inherited_widget.test.js
deleted file mode 100644
index 7a2502a7..00000000
--- a/packages/flutterjs_engine/src/analyzer/test/widget_analyzer/complex_inherited_widget.test.js
+++ /dev/null
@@ -1,4 +0,0 @@
-
-import { Lexer } from '../../src/ats/lexer.js';
-import { Parser } from '../../src/ats/flutterjs_parser.js';
-import { WidgetAnalyzer } from '../../src/ats/flutterjs_widget_analyzer.js';
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/analyzer/test/widget_analyzer/inherited_widget.test.js b/packages/flutterjs_engine/src/analyzer/test/widget_analyzer/inherited_widget.test.js
deleted file mode 100644
index 7a2502a7..00000000
--- a/packages/flutterjs_engine/src/analyzer/test/widget_analyzer/inherited_widget.test.js
+++ /dev/null
@@ -1,4 +0,0 @@
-
-import { Lexer } from '../../src/ats/lexer.js';
-import { Parser } from '../../src/ats/flutterjs_parser.js';
-import { WidgetAnalyzer } from '../../src/ats/flutterjs_widget_analyzer.js';
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/analyzer/test/widget_analyzer/statefull_widget_analyze.test.js b/packages/flutterjs_engine/src/analyzer/test/widget_analyzer/statefull_widget_analyze.test.js
deleted file mode 100644
index 55706951..00000000
--- a/packages/flutterjs_engine/src/analyzer/test/widget_analyzer/statefull_widget_analyze.test.js
+++ /dev/null
@@ -1,167 +0,0 @@
-/**
- * Diagnostic for WidgetAnalyzer
- * Understand why widgets are not being detected
- */
-
-import { Lexer } from '../../src/ats/lexer.js';
-import { Parser } from '../../src/ats/flutterjs_parser.js';
-import { WidgetAnalyzer } from '../../src/ats/flutterjs_widget_analyzer.js';
-
-const source = `
-class MyCounter extends StatefulWidget {
-  constructor({ key = undefined } = {}) {
-    this.key = key;
-  }
-  
-  createState() {
-    return new _MyCounterState();
-  }
-}
-
-class _MyCounterState extends State<MyCounter> {
-  _count = 0;
-  
-  _incrementCounter() {
-    this.setState(() => {
-      this._count++;
-    });
-  }
-  
-  build(context) {
-    return Text({ data: "Count: " + this._count });
-  }
-}
-
-function main() {
-  runApp(new MyCounter());
-}
-`;
-
-console.log('🔍 WIDGET ANALYZER DIAGNOSTIC\n');
-console.log('='.repeat(70) + '\n');
-
-// Step 1: Lex
-const lexer = new Lexer(source);
-const tokens = lexer.tokenize();
-console.log(`Step 1: LEXER`);
-console.log(`  Tokens: ${tokens.length}`);
-console.log('');
-
-// Step 2: Parse
-const parser = new Parser(tokens);
-const ast = parser.parse();
-// ⭐ ADD THIS - Check for parse errors
-console.log('\n🔴 PARSER ERRORS:\n');
-if (parser.errors.length > 0) {
-    parser.errors.forEach((error, idx) => {
-        console.log(`[${idx}] ${error.message}`);
-        console.log(`    Stack: ${error.stack?.split('\n')[1]}`);
-    });
-} else {
-    console.log('✓ No parser errors reported');
-}
-
-console.log('\nAST Body Items:', ast.body.length);
-console.log(`Step 2: PARSER`);
-console.log(`  AST Body Items: ${ast.body.length}\n`);
-
-console.log('  Body Structure:');
-ast.body.forEach((node, idx) => {
-    console.log(`    [${idx}] ${node.type}`);
-
-    if (node.type === 'ClassDeclaration') {
-        console.log(`        Name: ${node.id?.name}`);
-        console.log(`        SuperClass: ${node.superClass?.name}`);
-        console.log(`        Body.fields: ${node.body?.fields?.length || 0}`);
-        console.log(`        Body.methods: ${node.body?.methods?.length || 0}`);
-
-        if (node.body?.methods) {
-            node.body.methods.forEach((method) => {
-                console.log(`          - Method: ${method.key?.name}`);
-            });
-        }
-    }
-
-    if (node.type === 'FunctionDeclaration') {
-        console.log(`        Name: ${node.id?.name}`);
-    }
-});
-console.log('');
-
-// Step 3: Widget Analysis
-console.log(`Step 3: WIDGET ANALYZER`);
-console.log('');
-
-console.log('  Creating analyzer...');
-const analyzer = new WidgetAnalyzer(ast);
-
-console.log('  Calling analyze()...');
-const results = analyzer.analyze();
-
-console.log(`  Results:`);
-console.log(`    Total widgets: ${results.widgets.length}`);
-console.log(`    Widgets array: ${Array.isArray(results.widgets)}`);
-console.log('');
-
-if (results.widgets.length > 0) {
-    console.log('  Widgets found:');
-    results.widgets.forEach((w) => {
-        console.log(`    - ${w.name} (${w.type})`);
-    });
-} else {
-    console.log('  ❌ NO WIDGETS FOUND - Investigating...\n');
-
-    // Debug the analyzer internals
-    console.log('  Checking analyzer internals:');
-    console.log(`    analyzer.widgets size: ${analyzer.widgets.size}`);
-
-    // Manually check AST for classes
-    console.log('\n  Checking AST for ClassDeclaration nodes:');
-    ast.body.forEach((node) => {
-        if (node.type === 'ClassDeclaration') {
-            console.log(`    Found class: ${node.id?.name}`);
-            console.log(`      SuperClass: ${node.superClass?.name}`);
-
-            // Check if it's a widget type
-            const superClass = node.superClass?.name;
-            if (superClass === 'StatelessWidget') {
-                console.log(`      ✓ Is StatelessWidget`);
-            } else if (superClass === 'StatefulWidget') {
-                console.log(`      ✓ Is StatefulWidget`);
-            } else if (superClass?.startsWith('State')) {
-                console.log(`      ✓ Is State class`);
-            } else {
-                console.log(`      - Not a Flutter widget class (extends ${superClass})`);
-            }
-        }
-    });
-}
-
-console.log('');
-console.log('='.repeat(70) + '\n');
-
-console.log('🔧 ANALYSIS:');
-console.log('');
-console.log('The WidgetAnalyzer.analyze() should:');
-console.log('  1. Loop through ast.body');
-console.log('  2. Find ClassDeclaration nodes');
-console.log('  3. Extract classes and store in this.widgets Map');
-console.log('  4. Return array of widgets from this.widgets');
-console.log('');
-
-console.log('If widgets are 0, check:');
-console.log('  ✓ Are ClassDeclarations in ast.body? YES - ' + (ast.body.some(n => n.type === 'ClassDeclaration') ? 'FOUND' : 'NOT FOUND'));
-console.log('  ✓ Are they being extracted? Need to check extractClassesAndFunctions()');
-console.log('  ✓ Are they being returned? Check getResults() or analyze()');
-console.log('');
-
-// Print full AST for inspection
-console.log('='.repeat(70) + '\n');
-console.log('FULL AST (filtered for readability):\n');
-console.log(JSON.stringify(ast, (key, value) => {
-    if (key === 'location') return undefined;
-    if (key === 'body' && Array.isArray(value) && value.length > 10) {
-        return `[Array of ${value.length} items]`;
-    }
-    return value;
-}, 2).substring(0, 2000));
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/analyzer/test/widget_analyzer/widget_analyzer.test.js b/packages/flutterjs_engine/src/analyzer/test/widget_analyzer/widget_analyzer.test.js
deleted file mode 100644
index 16278fbb..00000000
--- a/packages/flutterjs_engine/src/analyzer/test/widget_analyzer/widget_analyzer.test.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import { Lexer } from '../../src/ats/lexer.js';
-import { Parser } from '../../src/ats/flutterjs_parser.js';
-import { WidgetAnalyzer } from '../../src/ats/flutterjs_widget_analyzer.js';
-
-const source = `
-import { MaterialApp, Text, Container } from '@flutterjs/material';
-
-class MyApp extends StatelessWidget {
-  build(context) {
-    return MaterialApp({
-      title: "Flutter Demo",
-      home: new Container()
-    });
-  }
-}
-
-class MyHomePage extends StatelessWidget {
-  title;
-
-  build(context) {
-    return Container({
-      child: new Text()
-    });
-  }
-}
-
-function main() {
-  runApp(new MyApp());
-}
-`;
-
-console.log('🔍 Testing Widget Analyzer...\n');
-console.log('Input Source:');
-console.log(source);
-console.log('\n' + '='.repeat(60) + '\n');
-
-// Step 1: Lex
-console.log('📝 Step 1: Lexing...\n');
-const lexer = new Lexer(source);
-const tokens = lexer.tokenize();
-console.log(`✅ Tokenization complete: ${tokens.length} tokens\n`);
-
-// Step 2: Parse
-console.log('📝 Step 2: Parsing...\n');
-const parser = new Parser(tokens);
-const ast = parser.parse();
-console.log(`✅ Parsing complete\n`);
-
-if (parser.getErrors().length > 0) {
-  console.log('⚠️  Parse warnings:');
-  parser.getErrors().forEach(err => {
-    console.log(`  - ${err.message}`);
-  });
-  console.log();
-}
-
-// Step 3: Analyze
-console.log('📝 Step 3: Widget Analysis...\n');
-const analyzer = new WidgetAnalyzer(ast);
-const analysis = analyzer.analyze();
-console.log(`✅ Analysis complete\n`);
-
-// Step 4: Display Results
-console.log('📊 Analysis Results:\n');
-
-console.log('Widgets Found:');
-analysis.widgets.forEach(widget => {
-  console.log(`  - ${widget.name} (${widget.type})`);
-  if (widget.superClass) {
-    console.log(`    extends: ${widget.superClass}`);
-  }
-  if (widget.methods.length > 0) {
-    console.log(`    methods: ${widget.methods.map(m => m.name).join(', ')}`);
-  }
-  if (widget.properties.length > 0) {
-    console.log(`    properties: ${widget.properties.map(p => p.name).join(', ')}`);
-  }
-});
-
-console.log('\nFunctions Found:');
-analysis.functions.forEach(func => {
-  console.log(`  - ${func.name}(${func.params.map(p => p.name).join(', ')})`);
-  if (func.isEntryPoint) {
-    console.log(`    [ENTRY POINT]`);
-  }
-});
-
-console.log('\nImports:');
-analysis.imports.forEach(imp => {
-  console.log(`  from ${imp.source}:`);
-  console.log(`    ${imp.items.join(', ')}`);
-});
-
-console.log('\nDependencies:');
-console.log(`  External: ${Array.from(analysis.externalDependencies).join(', ')}`);
-
-console.log('\nEntry Point:');
-console.log(`  ${analysis.entryPoint || 'none'}`);
-
-console.log('\nRoot Widget:');
-console.log(`  ${analysis.rootWidget || 'none'}`);
-
-console.log('\nWidget Tree:');
-if (analysis.widgetTree) {
-  analyzer.printWidgetTree();
-} else {
-  console.log('  (no tree)');
-}
-
-console.log('\n' + '='.repeat(60) + '\n');
-
-// Step 5: Summary
-const summary = analyzer.getSummary();
-console.log('📊 Summary Statistics:\n');
-console.log(`  Total Widgets: ${summary.totalWidgets}`);
-console.log(`    - Stateless: ${summary.statelessWidgets}`);
-console.log(`    - Stateful: ${summary.statefulWidgets}`);
-console.log(`    - Components: ${summary.componentWidgets}`);
-console.log(`  Total Functions: ${summary.totalFunctions}`);
-console.log(`  Total Imports: ${summary.totalImports}`);
-console.log(`  External Packages: ${summary.externalPackages}`);
-console.log(`  Entry Point: ${summary.entryPoint}`);
-console.log(`  Root Widget: ${summary.rootWidget}`);
-console.log(`  Widget Tree Depth: ${summary.widgetTreeDepth}`);
-
-console.log('\n📋 Full Analysis (JSON):\n');
-console.log(JSON.stringify({
-  widgets: analysis.widgets.map(w => ({ name: w.name, type: w.type })),
-  functions: analysis.functions.map(f => ({ name: f.name, isEntryPoint: f.isEntryPoint })),
-  imports: analysis.imports,
-  externalDependencies: analysis.externalDependencies,
-  entryPoint: analysis.entryPoint,
-  rootWidget: analysis.rootWidget,
-  widgetTree: analyzer.treeToObject(),
-}, null, 2));
diff --git a/packages/flutterjs_engine/bin/commands/app.js.template b/packages/flutterjs_engine/src/app.js.template
similarity index 100%
rename from packages/flutterjs_engine/bin/commands/app.js.template
rename to packages/flutterjs_engine/src/app.js.template
diff --git a/packages/flutterjs_engine/src/build_integration.js b/packages/flutterjs_engine/src/build_integration.js
new file mode 100644
index 00000000..491786f1
--- /dev/null
+++ b/packages/flutterjs_engine/src/build_integration.js
@@ -0,0 +1,172 @@
+/**
+ * ============================================================================
+ * BuildIntegration - Build Pipeline Orchestrator
+ * ============================================================================
+ *
+ * Coordinates the complete build pipeline:
+ * - Analysis (Phases 1-7) via BuildAnalyzer
+ * - Generation (Phases 8-10) via BuildGenerator
+ * 
+ * This is the main entry point that orchestrates the full build.
+ */
+
+import chalk from "chalk";
+import fs from 'fs';
+import path from "path";
+import { BuildAnalyzer } from "./build_integration_analyzer.js";
+import { BuildGenerator } from "./build_integration_generator.js";
+
+class BuildIntegration {
+  constructor(projectRoot, config = {}) {
+    this.projectRoot = projectRoot;
+
+    // ✅ HYBRID RESOLUTION: Load flutterjs.config.js if it exists
+    const userConfig = this.loadUserConfig(projectRoot);
+
+    this.config = {
+      mode: config.mode || "development",
+      target: config.target || "web",
+      outputDir: config.outputDir || "dist",
+      debugMode: config.debugMode || false,
+      installDependencies: config.installDependencies !== false,
+      ...config,
+      // Merge packages from user config (Dart-generated)
+      packages: userConfig?.packages || config.packages || {},
+    };
+
+    // Initialize sub-components
+    this.analyzer = new BuildAnalyzer(this);
+    this.generator = new BuildGenerator(this);
+
+    // Shared state containers
+    this.analysis = null;
+    this.resolution = null;
+    this.installation = null;
+    this.collection = null;
+    this.transformed = null;
+    this.buildOutput = null;
+    this.generatedVNodes = null;
+    this.generatedHTML = null;
+    this.runtime = null;
+    this.widgetMetadata = null;
+
+    if (this.config.debugMode) {
+      console.log(chalk.blue("\n[BuildIntegration] Initialized"));
+      console.log(chalk.gray(`  projectRoot: ${projectRoot}`));
+      console.log(chalk.gray(`  mode: ${this.config.mode}`));
+      console.log(chalk.gray(`  outputDir: ${this.config.outputDir}\n`));
+    }
+
+    // Debug log packages if available
+    if (this.config.debugMode && this.config.packages) {
+      const pkgCount = Object.keys(this.config.packages).length;
+      console.log(chalk.gray(`  packages: ${pkgCount} configured\n`));
+    }
+  }
+
+  /**
+   * Load user config from flutterjs.config.js
+   * This config is generated by Dart with resolved package paths
+   */
+  loadUserConfig(projectRoot) {
+    try {
+      // Import fs synchronously at top level
+
+
+      const configPath = path.join(projectRoot, 'flutterjs.config.js');
+      if (!fs.existsSync(configPath)) {
+        return null;
+      }
+
+      // Read file and extract the export default object
+      const content = fs.readFileSync(configPath, 'utf-8');
+
+      // Simple extraction: look for packages: { ... }
+      const packagesMatch = content.match(/packages:\s*\{([\s\S]*?)\n\s*\},?\s*\n/);
+      if (!packagesMatch) {
+        return null;
+      }
+
+      // Parse the packages section
+      const packagesStr = '{' + packagesMatch[1] + '}';
+
+      // Use Function to safely evaluate the JS object
+      // This is safer than eval() but still requires trust in the config file
+      const packages = {};
+
+      // Extract each package entry
+      const pkgRegex = /'(@flutterjs\/[^']+)':\s*\{\s*path:\s*'([^']+)'\s*\}/g;
+      let match;
+      while ((match = pkgRegex.exec(packagesMatch[1])) !== null) {
+        packages[match[1]] = { path: match[2] };
+      }
+
+      return { packages };
+    } catch (error) {
+      if (this.config?.debugMode) {
+        console.warn(chalk.yellow(`⚠️  Could not load user config: ${error.message}`));
+      }
+      return null;
+    }
+  }
+
+  /**
+   * ========================================================================
+   * MAIN PIPELINE EXECUTION
+   * ========================================================================
+   */
+  async execute() {
+    console.log(chalk.blue("\n" + "=".repeat(70)));
+    console.log(chalk.blue("FLUTTERJS BUILD INTEGRATION PIPELINE"));
+    console.log(chalk.blue("=".repeat(70)));
+
+    const startTime = Date.now();
+
+    try {
+      // ========== ANALYSIS PHASE ==========
+      // Phases 1-7: Analyze, resolve, install, collect, transform, initialize, build
+
+      await this.analyzer.phase1_analyze();
+      await this.analyzer.phase2_resolveDependencies();
+
+      if (this.config.installDependencies) {
+        // await this.analyzer.phase3_installPackages(); // 🧹 REMOVED: Handled by Dart
+        console.log("   (JS package installation skipped - handled by Dart)");
+      }
+
+      await this.analyzer.phase4_collectPackages();
+      await this.analyzer.phase5_transformCode();
+      await this.analyzer.phase6_initializeRuntime();
+      await this.analyzer.phase7_buildWidgets();
+
+      // ========== GENERATION PHASE ==========
+      // Phases 8-10: Generate HTML, output files, and report
+
+      await this.generator.phase8_generateHTML();
+      await this.generator.phase9_generateOutput();
+
+      const duration = Date.now() - startTime;
+      this.generator.phase10_report(duration);
+
+      return {
+        success: true,
+        duration,
+        analysis: this.analysis,
+        resolution: this.resolution,
+        installation: this.installation,
+        collection: this.collection,
+        transformed: this.transformed,
+        output: this.buildOutput,
+      };
+    } catch (error) {
+      console.error(chalk.red("\n✗ Build Failed:"), error.message);
+      if (this.config.debugMode) {
+        console.error(error.stack);
+      }
+      throw error;
+    }
+  }
+}
+
+export { BuildIntegration };
+export default BuildIntegration;
\ No newline at end of file
diff --git a/packages/flutterjs_engine/bin/commands/build_integration_analyzer.js b/packages/flutterjs_engine/src/build_integration_analyzer.js
similarity index 90%
rename from packages/flutterjs_engine/bin/commands/build_integration_analyzer.js
rename to packages/flutterjs_engine/src/build_integration_analyzer.js
index 5c3e3cf3..595c5404 100644
--- a/packages/flutterjs_engine/bin/commands/build_integration_analyzer.js
+++ b/packages/flutterjs_engine/src/build_integration_analyzer.js
@@ -1,3 +1,4 @@
+console.log("HELLO FROM BUILD ANALYZER - VERIFYING EXECUTION");
 /**
  * ============================================================================
  * BuildAnalyzer - Analysis Pipeline (Phases 1-7)
@@ -23,7 +24,7 @@ import ora from "ora";
 import { PathResolver } from "./path-resolver.js";
 import { Analyzer } from "@flutterjs/analyzer/analyzer";
 import { DependencyResolver } from "./dependency_resolver.js";
-import { PackageInstaller } from "./flutterjs_package_installer.js";
+// import { PackageInstaller } from "./flutterjs_package_installer.js"; // REMOVED
 import { PackageCollector } from "./package_collector.js";
 import { ImportRewriter } from "./import_rewriter.js";
 import { CodeTransformer } from "./code_transformer.js";
@@ -39,11 +40,24 @@ class BuildAnalyzer {
     this.dependencyResolver = new DependencyResolver({
       projectRoot: buildIntegration.projectRoot,
       debugMode: this.config.debugMode,
+      config: this.config, // ✅ Pass full config for package resolution
     });
-    this.packageInstaller = new PackageInstaller(
-      buildIntegration.projectRoot,
-      this.config
-    );
+    // this.packageInstaller = new PackageInstaller(...); // REMOVED
+
+    // ✅ DEBUG: Log config status
+    console.log(chalk.magenta('\n[DEBUG] BuildIntegrationAnalyzer initialized'));
+    console.log(chalk.magenta(`  Has config: ${!!this.config}`));
+    console.log(chalk.magenta(`  Has config.packages: ${!!this.config?.packages}`));
+    if (this.config?.packages) {
+      console.log(chalk.magenta(`  Config packages: ${Object.keys(this.config.packages).join(', ')}`));
+      Object.entries(this.config.packages).forEach(([name, pkg]) => {
+        if (pkg.path) {
+          console.log(chalk.magenta(`    ${name}: ${pkg.path}`));
+        }
+      });
+    }
+    console.log();
+
     this.packageCollector = new PackageCollector({
       projectRoot: buildIntegration.projectRoot,
       outputDir: this.config.outputDir,
@@ -68,6 +82,12 @@ class BuildAnalyzer {
    * ========================================================================
    */
   async phase1_analyze() {
+    console.log(chalk.red('\n========== ANALYZE AND RESOLVE CALLED =========='));
+    console.log(chalk.red(`Project: ${this.projectRoot}`));
+    console.log(chalk.red(`MainFile: ${this.pathResolver.getSourcePath()}`));
+    console.log(chalk.red(`Has Config: ${!!this.config}`));
+    console.log(chalk.red(`Has Config.packages: ${!!this.config?.packages}`));
+    console.log(chalk.red('================================================\n'));
     const spinner = ora(
       chalk.blue("📊 Phase 1: Analyzing source code...")
     ).start();
@@ -153,7 +173,7 @@ class BuildAnalyzer {
     }
 
     // ✅ Always add vdom and runtime as required dependencies
-    const corePackages = ['@flutterjs/vdom', '@flutterjs/runtime'];
+    const corePackages = ['@flutterjs/vdom', '@flutterjs/runtime', '@flutterjs/seo'];
 
     for (const pkg of corePackages) {
       if (!importObject[pkg]) {
@@ -214,41 +234,9 @@ class BuildAnalyzer {
       chalk.blue("📦 Phase 3: Installing packages...")
     ).start();
 
-    try {
-      if (!this.integration.resolution || this.integration.resolution.packages.size === 0) {
-        spinner.info(chalk.yellow("ℹ️  No packages to install"));
-        this.integration.installation = {
-          total: 0,
-          successful: 0,
-          failed: 0,
-          results: [],
-        };
-        return;
-      }
-
-      const packageNames = Array.from(this.integration.resolution.packages.keys());
-      const sdkPackages = packageNames.filter((p) => p.startsWith("@flutterjs/"));
-      const otherPackages = packageNames.filter((p) => !p.startsWith("@flutterjs/"));
-
-      const installResults = [];
-
-      for (const pkg of [...sdkPackages, ...otherPackages]) {
-        const result = await this.packageInstaller.installPackage(pkg);
-        installResults.push(result);
-      }
-
-      this.integration.installation = {
-        total: installResults.length,
-        successful: installResults.filter((r) => r.success).length,
-        failed: installResults.filter((r) => !r.success).length,
-        results: installResults,
-      };
-
-      spinner.succeed(chalk.green(`✔ Installation complete`));
-    } catch (error) {
-      spinner.fail(chalk.red(`✖ Installation failed: ${error.message}`));
-      throw error;
-    }
+    // ✅ STUBBED: Handled by Dart
+    spinner.succeed(chalk.green(`✔ Packages prepared by Dart`));
+    return;
   }
 
   /**
@@ -262,6 +250,18 @@ class BuildAnalyzer {
       chalk.blue("📋 Phase 4: Collecting packages...")
     ).start();
 
+    // ✅ SKIP in development mode
+    if (this.config.mode === 'development') {
+      spinner.info(chalk.yellow("ℹ️  Skipping package collection (dev mode)"));
+      this.integration.collection = {
+        copiedFiles: [],
+        failedFiles: [],
+        totalSize: 0,
+        session: null,
+      };
+      return;
+    }
+
     try {
       if (!this.integration.resolution || this.integration.resolution.packages.size === 0) {
         spinner.info(chalk.yellow("ℹ️  No packages to collect"));
diff --git a/packages/flutterjs_engine/bin/commands/build_integration_generator.js b/packages/flutterjs_engine/src/build_integration_generator.js
similarity index 99%
rename from packages/flutterjs_engine/bin/commands/build_integration_generator.js
rename to packages/flutterjs_engine/src/build_integration_generator.js
index a01ae670..767e2668 100644
--- a/packages/flutterjs_engine/bin/commands/build_integration_generator.js
+++ b/packages/flutterjs_engine/src/build_integration_generator.js
@@ -439,7 +439,7 @@ class BuildGenerator {
   <meta name="theme-color" content="#6750a4">
   <title>${metadata.projectName}</title>
   <link rel="stylesheet" href="./styles.css">
-  
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <!-- ✅ Import Map from ImportRewriter -->
   <!-- Maps @flutterjs/* packages to ./node_modules/@flutterjs/ -->
   ${importMapScript}
@@ -1899,6 +1899,12 @@ enableWidgetTracking();
       appBuilder: null
     });
 
+    // ✅ Force a reflow to ensure all styles are properly computed
+    // This fixes an issue where the UI doesn't render correctly at full viewport width
+    requestAnimationFrame(() => {
+      document.body.offsetHeight; // Trigger reflow
+    });
+
     if (${this.config.debugMode}) {
       console.log('✓ App running on DOM');
     }
diff --git a/packages/flutterjs_engine/bin/commands/build_pipeline.js b/packages/flutterjs_engine/src/build_pipeline.js
similarity index 100%
rename from packages/flutterjs_engine/bin/commands/build_pipeline.js
rename to packages/flutterjs_engine/src/build_pipeline.js
diff --git a/packages/flutterjs_engine/bin/commands/code_transformer.js b/packages/flutterjs_engine/src/code_transformer.js
similarity index 91%
rename from packages/flutterjs_engine/bin/commands/code_transformer.js
rename to packages/flutterjs_engine/src/code_transformer.js
index 2acacdd2..319a3da8 100644
--- a/packages/flutterjs_engine/bin/commands/code_transformer.js
+++ b/packages/flutterjs_engine/src/code_transformer.js
@@ -148,6 +148,9 @@ class CodeTransformer {
         sourceCode = this.addMetadata(sourceCode);
       }
 
+      // Step 4.5: Rewrite package imports
+      sourceCode = this.rewriteImports(sourceCode);
+
       // Step 5: Ensure exports
       if (this.config.validateExports) {
         sourceCode = this.ensureExports(sourceCode);
@@ -465,6 +468,61 @@ ${closing}`;
     return result;
   }
 
+  /**
+   * Rewrite package imports
+   * package:flutterjs_seo/flutterjs_seo.js -> @flutterjs/seo
+   */
+  rewriteImports(sourceCode) {
+    if (this.config.debugMode) {
+      console.log(chalk.blue('🔄 Rewriting package imports...\n'));
+    }
+
+    // specific fix for flutterjs_seo
+    // Regex matches: './package:flutterjs_seo/flutterjs_seo.js'
+    const packageRegex = /(['"])(?:\.\/)?package:([a-zA-Z0-9_]+)\/(.+?)\1/g;
+
+    let transformed = sourceCode;
+    let count = 0;
+
+    transformed = transformed.replace(packageRegex, (match, quote, pkgName, path) => {
+      // Heuristic: flutterjs_seo -> @flutterjs/seo
+      let newPkgName = pkgName;
+      if (pkgName.startsWith('flutterjs_')) {
+        newPkgName = '@flutterjs/' + pkgName.replace('flutterjs_', '');
+      }
+
+      // Explicit fix for seo package
+      if (pkgName === 'flutterjs_seo') {
+        return `${quote}@flutterjs/seo${quote}`;
+      }
+
+      // If path matches package name (index), simplify
+      // e.g. flutterjs_seo/flutterjs_seo.js -> @flutterjs/seo
+      const pathBase = path.replace('.js', '');
+      let newImport = match;
+
+      if (pathBase === pkgName) {
+        newImport = `${quote}${newPkgName}${quote}`;
+      } else {
+        newImport = `${quote}${newPkgName}/${path}${quote}`;
+      }
+
+      if (this.config.debugMode) {
+        console.log(chalk.green(`  Mapped: ${pkgName} -> ${newPkgName}`));
+        console.log(chalk.gray(`    ${match} -> ${newImport}`));
+      }
+
+      count++;
+      return newImport;
+    });
+
+    if (this.config.debugMode) {
+      console.log(chalk.gray(`\nRewrote ${count} package imports\n`));
+    }
+
+    return transformed;
+  }
+
   /**
    * Transform setState calls
    */
diff --git a/packages/flutterjs_engine/bin/commands/debug_server.js b/packages/flutterjs_engine/src/debug_server.js
similarity index 100%
rename from packages/flutterjs_engine/bin/commands/debug_server.js
rename to packages/flutterjs_engine/src/debug_server.js
diff --git a/packages/flutterjs_engine/bin/commands/dependency_resolver.js b/packages/flutterjs_engine/src/dependency_resolver.js
similarity index 82%
rename from packages/flutterjs_engine/bin/commands/dependency_resolver.js
rename to packages/flutterjs_engine/src/dependency_resolver.js
index 2a621523..e5044c9c 100644
--- a/packages/flutterjs_engine/bin/commands/dependency_resolver.js
+++ b/packages/flutterjs_engine/src/dependency_resolver.js
@@ -94,6 +94,7 @@ class DependencyResolver {
     this.options = {
       projectRoot: options.projectRoot || process.cwd(),
       debugMode: options.debugMode || false,
+      config: options.config || {}, // ✅ Store config
       ...options
     };
 
@@ -113,25 +114,25 @@ class DependencyResolver {
     let currentPath = startPath;
     const maxLevels = 20;
     let level = 0;
-    
+
     while (level < maxLevels && currentPath !== path.dirname(currentPath)) {
       const enginePath = path.join(currentPath, 'packages', 'flutterjs_engine', 'src');
-      
+
       if (this.options.debugMode && level < 5) {
         console.log(chalk.gray(`    [Level ${level}] Checking: ${enginePath}`));
       }
-      
+
       if (fs.existsSync(enginePath)) {
         if (this.options.debugMode) {
           console.log(chalk.green(`  ✔ Found flutterjs root at: ${currentPath}`));
         }
         return currentPath;
       }
-      
+
       currentPath = path.dirname(currentPath);
       level++;
     }
-    
+
     if (this.options.debugMode) {
       console.log(chalk.yellow(`  ⚠ Could not find flutterjs root, using projectRoot`));
     }
@@ -193,6 +194,8 @@ class DependencyResolver {
         warnings: []
       };
 
+
+
     } catch (error) {
       console.error(chalk.red(`\n✖ Resolution error: ${error.message}\n`));
       throw error;
@@ -229,18 +232,23 @@ class DependencyResolver {
     // Format: Array of strings
     if (Array.isArray(analysis.imports)) {
       for (const item of analysis.imports) {
-        if (typeof item === 'string' && item.startsWith('@flutterjs/')) {
-          packages.add(item);
-          if (this.options.debugMode) {
-            console.log(chalk.gray(`  Found import: ${item}`));
+        let pkgName = null;
+        if (typeof item === 'string') {
+          if (item.startsWith('@flutterjs/')) {
+            pkgName = item;
+          } else if (item.startsWith('package:flutterjs_')) {
+            // Handle package:flutterjs_seo -> @flutterjs/seo
+            const rawName = item.split('/')[0].replace('package:', '');
+            pkgName = '@flutterjs/' + rawName.replace('flutterjs_', '');
           }
         } else if (typeof item === 'object' && item && item.source) {
-          const pkgName = this.extractPackageName(item.source);
-          if (pkgName) {
-            packages.add(pkgName);
-            if (this.options.debugMode) {
-              console.log(chalk.gray(`  Found import: ${pkgName}`));
-            }
+          pkgName = this.extractPackageName(item.source);
+        }
+
+        if (pkgName) {
+          packages.add(pkgName);
+          if (this.options.debugMode) {
+            console.log(chalk.gray(`  Found import: ${pkgName}`));
           }
         }
       }
@@ -302,18 +310,55 @@ class DependencyResolver {
     const engineRoot = path.dirname(srcDir);
 
     // ✅ Search paths in priority order
-    const searchPaths = [
-      // First: Check src/ folder
+    const searchPaths = [];
+
+    // 1. Config Override (Highest Priority)
+    if (this.options.config?.packages?.[fullPackageName]) {
+      const configEntry = this.options.config.packages[fullPackageName];
+      // Supports string path or object { path: '...' }
+      const overridePath = typeof configEntry === 'string' ? configEntry : configEntry?.path;
+
+      if (overridePath) {
+        // Resolve relative paths against project root
+        const resolvedOverride = path.isAbsolute(overridePath)
+          ? overridePath
+          : path.resolve(this.projectRoot, overridePath);
+
+        searchPaths.push(resolvedOverride);
+
+        if (this.options.debugMode) {
+          console.log(chalk.cyan(`      Overriding path for ${fullPackageName}`));
+        }
+      }
+    }
+
+    // 2. Default Mappings for Core SDK Packages
+    // These are standard locations in the repo
+    const CORE_DEFAULTS = {
+      '@flutterjs/runtime': 'packages/flutterjs_runtime/flutterjs_runtime',
+      '@flutterjs/material': 'packages/flutterjs_material/flutterjs_material',
+      '@flutterjs/vdom': 'packages/flutterjs_vdom/flutterjs_vdom',
+      '@flutterjs/analyzer': 'packages/flutterjs_analyzer/flutterjs_analyzer',
+      '@flutterjs/seo': 'packages/flutterjs_seo/flutterjs_seo',
+    };
+
+    if (CORE_DEFAULTS[fullPackageName]) {
+      const sdkRoot = this.findFlutterjsRoot(this.projectRoot);
+      const defaultPath = path.join(sdkRoot, CORE_DEFAULTS[fullPackageName]);
+      searchPaths.push(defaultPath);
+    }
+
+    // 2. Default Engine Locations
+    searchPaths.push(
       path.join(engineRoot, 'src', packageName),
-      // Second: Check package/ folder
       path.join(engineRoot, 'package', packageName)
-    ];
+    );
 
     let foundPath = null;
 
     for (let i = 0; i < searchPaths.length; i++) {
       const searchPath = searchPaths[i];
-      
+
       if (this.options.debugMode) {
         console.log(chalk.gray(`  [${i + 1}/${searchPaths.length}] Checking: ${searchPath}`));
       }
@@ -371,6 +416,8 @@ class DependencyResolver {
     console.log(chalk.green(`  ✔ ${fullPackageName}`));
     console.log(chalk.gray(`     └─ ${foundPath}`));
   }
+
+
 }
 
 // ============================================================================
diff --git a/packages/flutterjs_engine/bin/commands/dev.js b/packages/flutterjs_engine/src/dev.js
similarity index 100%
rename from packages/flutterjs_engine/bin/commands/dev.js
rename to packages/flutterjs_engine/src/dev.js
diff --git a/packages/flutterjs_engine/bin/commands/dynamic_export_loader.js b/packages/flutterjs_engine/src/dynamic_export_loader.js
similarity index 100%
rename from packages/flutterjs_engine/bin/commands/dynamic_export_loader.js
rename to packages/flutterjs_engine/src/dynamic_export_loader.js
diff --git a/packages/flutterjs_engine/bin/commands/helper/asset_handler_js.js b/packages/flutterjs_engine/src/helper/asset_handler_js.js
similarity index 100%
rename from packages/flutterjs_engine/bin/commands/helper/asset_handler_js.js
rename to packages/flutterjs_engine/src/helper/asset_handler_js.js
diff --git a/packages/flutterjs_engine/bin/commands/helper/build_cache_js.js b/packages/flutterjs_engine/src/helper/build_cache_js.js
similarity index 100%
rename from packages/flutterjs_engine/bin/commands/helper/build_cache_js.js
rename to packages/flutterjs_engine/src/helper/build_cache_js.js
diff --git a/packages/flutterjs_engine/bin/commands/helper/css_processor_js.js b/packages/flutterjs_engine/src/helper/css_processor_js.js
similarity index 100%
rename from packages/flutterjs_engine/bin/commands/helper/css_processor_js.js
rename to packages/flutterjs_engine/src/helper/css_processor_js.js
diff --git a/packages/flutterjs_engine/bin/commands/helper/dependency_manager.js b/packages/flutterjs_engine/src/helper/dependency_manager.js
similarity index 100%
rename from packages/flutterjs_engine/bin/commands/helper/dependency_manager.js
rename to packages/flutterjs_engine/src/helper/dependency_manager.js
diff --git a/packages/flutterjs_engine/bin/commands/helper/error_handler_js.js b/packages/flutterjs_engine/src/helper/error_handler_js.js
similarity index 100%
rename from packages/flutterjs_engine/bin/commands/helper/error_handler_js.js
rename to packages/flutterjs_engine/src/helper/error_handler_js.js
diff --git a/packages/flutterjs_engine/bin/commands/helper/file_watcher_js.js b/packages/flutterjs_engine/src/helper/file_watcher_js.js
similarity index 100%
rename from packages/flutterjs_engine/bin/commands/helper/file_watcher_js.js
rename to packages/flutterjs_engine/src/helper/file_watcher_js.js
diff --git a/packages/flutterjs_engine/bin/commands/helper/flutter_js_hmr_client.js b/packages/flutterjs_engine/src/helper/flutter_js_hmr_client.js
similarity index 100%
rename from packages/flutterjs_engine/bin/commands/helper/flutter_js_hmr_client.js
rename to packages/flutterjs_engine/src/helper/flutter_js_hmr_client.js
diff --git a/packages/flutterjs_engine/bin/commands/helper/js_bundler_js.js b/packages/flutterjs_engine/src/helper/js_bundler_js.js
similarity index 100%
rename from packages/flutterjs_engine/bin/commands/helper/js_bundler_js.js
rename to packages/flutterjs_engine/src/helper/js_bundler_js.js
diff --git a/packages/flutterjs_engine/bin/commands/helper/production_optimizer_js.js b/packages/flutterjs_engine/src/helper/production_optimizer_js.js
similarity index 100%
rename from packages/flutterjs_engine/bin/commands/helper/production_optimizer_js.js
rename to packages/flutterjs_engine/src/helper/production_optimizer_js.js
diff --git a/packages/flutterjs_engine/bin/commands/helper/target_builder_js.js b/packages/flutterjs_engine/src/helper/target_builder_js.js
similarity index 100%
rename from packages/flutterjs_engine/bin/commands/helper/target_builder_js.js
rename to packages/flutterjs_engine/src/helper/target_builder_js.js
diff --git a/packages/flutterjs_engine/bin/commands/helper/tree_shaker_js.js b/packages/flutterjs_engine/src/helper/tree_shaker_js.js
similarity index 100%
rename from packages/flutterjs_engine/bin/commands/helper/tree_shaker_js.js
rename to packages/flutterjs_engine/src/helper/tree_shaker_js.js
diff --git a/packages/flutterjs_engine/bin/commands/import_resolver.js b/packages/flutterjs_engine/src/import_resolver.js
similarity index 100%
rename from packages/flutterjs_engine/bin/commands/import_resolver.js
rename to packages/flutterjs_engine/src/import_resolver.js
diff --git a/packages/flutterjs_engine/bin/commands/import_rewriter.js b/packages/flutterjs_engine/src/import_rewriter.js
similarity index 100%
rename from packages/flutterjs_engine/bin/commands/import_rewriter.js
rename to packages/flutterjs_engine/src/import_rewriter.js
diff --git a/packages/flutterjs_engine/src/index.js b/packages/flutterjs_engine/src/index.js
new file mode 100644
index 00000000..433ff2fa
--- /dev/null
+++ b/packages/flutterjs_engine/src/index.js
@@ -0,0 +1,828 @@
+/**
+ * ============================================================================
+ * FlutterJS CLI - Unified Commands Module (FIXED)
+ * ============================================================================
+ * 
+ * All commands integrated with BuildPipeline:
+ * - build: Production build with analysis
+ * - dev: Development server with HMR
+ * - run: All-in-one (build + serve)
+ * - clean: Remove artifacts
+ * - preview: Preview production build
+ * - analyze: Code analysis
+ * - doctor: Environment check
+ * - init: Project creation
+ * 
+ * Location: cli/commands/index.js
+ */
+
+import chalk from 'chalk';
+import ora from 'ora';
+import path from 'path';
+import fs from 'fs';
+import http from 'http';
+import { fileURLToPath } from 'url';
+import { exec, execSync } from 'child_process';
+import { promisify } from 'util';
+import open from 'open';
+
+// Try to import optional dependencies
+let chokidar;
+try {
+  import('chokidar').then(module => {
+    chokidar = module.default;
+  }).catch(() => {
+    chokidar = null;
+  });
+} catch (e) {
+  chokidar = null;
+}
+
+// Import systems
+import { BuildPipeline } from './build_pipeline.js';
+import { DevServer } from './dev.js';
+import { initProject } from './init.js';
+
+const execAsync = promisify(exec);
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// ============================================================================
+// CONFIGURATION LOADER (Fix for loadConfig)
+// ============================================================================
+
+/**
+ * Deep merge configuration objects
+ */
+function deepMergeConfig(defaults, userConfig) {
+  const merged = { ...defaults };
+
+  for (const key in userConfig) {
+    if (!userConfig.hasOwnProperty(key)) continue;
+
+    const defaultValue = defaults[key];
+    const userValue = userConfig[key];
+
+    // Recursively merge objects
+    if (
+      typeof userValue === 'object' &&
+      userValue !== null &&
+      !Array.isArray(userValue) &&
+      typeof defaultValue === 'object' &&
+      defaultValue !== null &&
+      !Array.isArray(defaultValue)
+    ) {
+      merged[key] = deepMergeConfig(defaultValue, userValue);
+    } else {
+      // Direct assignment for primitives and arrays
+      merged[key] = userValue;
+    }
+  }
+
+  return merged;
+}
+
+/**
+ * Load project configuration - handles both ESM and CommonJS
+ */
+// Create require for loading configs
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
+
+/**
+ * Load project configuration - handles both ESM and CommonJS
+ */
+async function loadConfigFile(configPath) {
+  try {
+    if (!fs.existsSync(configPath)) {
+      return null;
+    }
+
+    // Use dynamic import to handle both ESM and CJS
+    const fileUrl = `file:///${configPath.replace(/\\/g, '/')}`;
+    const configModule = await import(fileUrl);
+    return configModule.default || configModule;
+  } catch (error) {
+    console.warn(chalk.yellow(`⚠️  Error loading config file: ${error.message}`));
+    return null;
+  }
+}
+
+async function loadConfig(projectContext) {
+  try {
+    const configPath = path.join(projectContext.projectRoot, 'flutterjs.config.js');
+
+    if (!fs.existsSync(configPath)) {
+      if (projectContext.projectRoot !== process.cwd()) {
+        console.warn(chalk.yellow(`⚠️  No flutterjs.config.js found, using defaults\n`));
+      }
+      return getDefaultConfig();
+    }
+
+    // Try to load the actual config file
+    const userConfig = await loadConfigFile(configPath);
+
+    if (userConfig && typeof userConfig === 'object') {
+      // Deep merge user config with defaults
+      return deepMergeConfig(getDefaultConfig(), userConfig);
+    }
+
+    console.warn(chalk.yellow(`⚠️  Could not parse flutterjs.config.js, using defaults\n`));
+    return getDefaultConfig();
+  } catch (error) {
+    console.warn(chalk.yellow(`⚠️  Config loading error: ${error.message}, using defaults\n`));
+    return getDefaultConfig();
+  }
+}
+
+/**
+ * Get default configuration
+ */
+function getDefaultConfig() {
+  return {
+    project: {
+      name: 'flutter-js-app',
+      version: '1.0.0',
+    },
+    entry: {
+      main: 'lib/main.fjs',
+      rootWidget: 'MyApp',
+    },
+    build: {
+      output: 'dist',
+      source: 'lib',
+      publicPath: '/',
+    },
+    dev: {
+      server: {
+        port: 3000,
+        host: 'localhost',
+        https: false,
+      },
+      hmr: {
+        enabled: true,
+        interval: 300,
+      },
+    },
+    render: {
+      mode: 'csr',
+      target: 'web',
+    },
+  };
+}
+
+// ============================================================================
+// BUILD COMMAND
+// ============================================================================
+
+/**
+ * Build command - Production build with optional analysis
+ */
+export async function build(options, projectContext) {
+  const spinner = ora('Building for production...').start();
+
+  try {
+    // Validate configuration
+    spinner.text = 'Validating configuration...';
+    const config = await loadConfig(projectContext);
+
+    // Resolve entry file path
+    const entryFile = config.entry?.main || 'lib/main.fjs';
+    const entryPath = path.resolve(projectContext.projectRoot, entryFile);
+
+    if (!fs.existsSync(entryPath)) {
+      throw new Error(`Entry file not found: ${entryFile}\n\nExpected at: ${entryPath}`);
+    }
+
+    // Create build pipeline with FULL config
+    const pipeline = new BuildPipeline({
+      projectRoot: projectContext.projectRoot,
+      mode: 'production',
+      target: options.target || 'spa',
+      entryFile: entryFile,  // Pass actual entry file
+      outputDir: options.output || 'dist',
+      debugMode: options.debug || false,
+      enableHotReload: false,
+      enablePerformanceMonitoring: true,
+      enableMemoryTracking: true,
+      // IMPORTANT: Pass full config
+      config: config,
+    });
+
+    // Run build pipeline
+    spinner.text = 'Analyzing & building source code...';
+    const result = await pipeline.run();
+
+    spinner.stop();
+
+    // Display build results
+    console.log(chalk.blue('\n📊 Build Results:\n'));
+    console.log(chalk.gray(`  Output:     ${options.output || 'dist'}`));
+    console.log(chalk.gray(`  Mode:       ${options.target || 'spa'}`));
+    console.log(chalk.gray(`  Time:       ${result.stats.totalTime.toFixed(2)}ms`));
+    console.log(chalk.gray(`  Widgets:    ${result.analysis.widgets?.count || 0}`));
+    console.log();
+
+    // Display file sizes
+    if (result.output.html) {
+      const htmlSize = (result.output.html.length / 1024).toFixed(2);
+      console.log(chalk.gray(`  HTML:       ${htmlSize} KB`));
+    }
+
+    if (result.output.css) {
+      const cssSize = (result.output.css.length / 1024).toFixed(2);
+      console.log(chalk.gray(`  CSS:        ${cssSize} KB`));
+    }
+
+    if (result.output.js) {
+      const jsSize = (result.output.js.length / 1024).toFixed(2);
+      console.log(chalk.gray(`  JavaScript: ${jsSize} KB`));
+    }
+
+    console.log();
+
+    // Analyze bundle if requested
+    if (options.analyze) {
+      console.log(chalk.cyan('Analyzing bundle...\n'));
+      console.log(chalk.gray('(Bundle analysis available via "flutterjs analyze")\n'));
+    }
+
+    // Cleanup pipeline
+    pipeline.dispose();
+
+    console.log(chalk.green('✅ Build successful!\n'));
+
+    return {
+      success: true,
+      outputPath: path.join(projectContext.projectRoot, options.output || 'dist'),
+      buildTime: result.stats.totalTime,
+      analysisResults: result.analysis,
+    };
+
+  } catch (error) {
+    spinner.fail(chalk.red('❌ Build failed'));
+    console.error(chalk.red(`\nError: ${error.message}`));
+    if (options.debug) {
+      console.error(chalk.gray(error.stack));
+    }
+    process.exit(1);
+  }
+}
+
+// ============================================================================
+// DEV COMMAND
+// ============================================================================
+
+/**
+ * Dev command - Development server with HMR
+ */
+export async function dev(options, projectContext) {
+  const spinner = ora('Setting up development environment...').start();
+
+  try {
+    // Load configuration
+    spinner.text = 'Loading project configuration...';
+    const config = await loadConfig(projectContext);
+
+    // Resolve entry file path
+    const entryFile = config.entry?.main || 'lib/main.fjs';
+    const entryPath = path.resolve(projectContext.projectRoot, entryFile);
+
+    if (!fs.existsSync(entryPath)) {
+      throw new Error(`Entry file not found: ${entryFile}`);
+    }
+
+    // Create build pipeline (for initial build)
+    const pipeline = new BuildPipeline({
+      projectRoot: projectContext.projectRoot,
+      mode: 'development',
+      target: 'spa',
+      entryFile: entryFile,  // ✅ Pass .fjs file
+      outputDir: '.dev',
+      debugMode: options.debug || false,
+      enableHotReload: true,
+      enablePerformanceMonitoring: true,
+      enableMemoryTracking: options.debug || false,
+    });
+
+    // Run initial build
+    spinner.text = 'Running initial build...';
+    const buildResult = await pipeline.run();
+
+    // ✅ Copy app.js to .dev/
+    const appJsSource = path.join(
+      path.dirname(import.meta.url).replace('file://', ''),
+      '../app.js'
+    );
+    const appJsDest = path.join(projectContext.projectRoot, '.dev', 'app.js');
+
+    if (fs.existsSync(appJsSource)) {
+      fs.copyFileSync(appJsSource, appJsDest);
+    }
+
+    // Create development server
+    const devServer = new DevServer(config, projectContext);
+
+    spinner.stop();
+
+    // Start dev server
+    await devServer.start();
+
+    // Setup file watching for rebuilds
+    setupDevWatch(devServer, pipeline, projectContext, config);
+
+    // Handle graceful shutdown
+    setupGracefulShutdown(devServer, pipeline);
+
+  } catch (error) {
+    spinner.fail(chalk.red('✗ Dev server failed'));
+    console.error(chalk.red(`\nError: ${error.message}`));
+    if (options.debug) {
+      console.error(chalk.gray(error.stack));
+    }
+    process.exit(1);
+  }
+}
+
+// ============================================================================
+// RUN COMMAND
+// ============================================================================
+
+/**
+ * Run command - All-in-one: build + dev server
+ */
+export async function run(options, projectContext) {
+  const spinner = ora('Starting FlutterJS runtime...').start();
+
+  try {
+    // ===== CRITICAL: AWAIT the config loading =====
+    spinner.text = 'Loading configuration...';
+    const config = await loadConfig(projectContext);  // ← ADD await HERE!
+
+    console.log('checking' + config?.entry?.main);
+
+    if (!config?.entry?.main) {
+      throw new Error('No entry.main in config. Check flutterjs.config.js');
+    }
+
+    const entryFile = config.entry.main;
+    const entryPath = path.resolve(projectContext.projectRoot, entryFile);
+
+    if (!fs.existsSync(entryPath)) {
+      throw new Error(`Entry file not found: ${entryPath}`);
+    }
+
+    // ===== Create pipeline with FULL config =====
+    const pipeline = new BuildPipeline({
+      projectRoot: projectContext.projectRoot,
+      mode: 'development',
+      target: options.target || 'spa',
+      outputDir: options.output || 'dist',
+      debugMode: options.debug || false,
+      ...config  // ← Pass full config
+    });
+
+    // Run build
+    spinner.text = 'Building application...';
+    const buildResult = await pipeline.run();
+
+    spinner.stop();
+
+    // Display build info
+    console.log(chalk.blue('\n📊 Build Complete:\n'));
+    console.log(chalk.gray(`  Widgets:    ${buildResult.analysis.widgets?.count || 0}`));
+    console.log(chalk.gray(`  Build time: ${buildResult.duration}ms`));
+    console.log();
+
+    // Start server if not production-only
+    if (options.serve !== false) {
+      const port = parseInt(options.port || 3000, 10);
+      const host = 'localhost';
+
+      console.log(chalk.cyan('Starting development server...\n'));
+
+      const devServer = new DevServer(
+        {
+          ...config,
+          dev: {
+            ...config.dev,
+            server: {
+              port,
+              host,
+              https: false,
+            },
+          },
+        },
+        projectContext
+      );
+
+      await devServer.start();
+      setupGracefulShutdown(devServer, pipeline);
+    } else {
+      pipeline.dispose();
+    }
+
+  } catch (error) {
+    spinner.fail(chalk.red('❌ Run failed'));
+    console.error(chalk.red(`\nError: ${error.message}`));
+    if (options.debug) {
+      console.error(chalk.gray('\nStack:'), error.stack);
+    }
+    process.exit(1);
+  }
+}
+// ============================================================================
+// CLEAN COMMAND
+// ============================================================================
+
+/**
+ * Clean command - Remove build artifacts
+ */
+export async function clean(options, projectContext) {
+  const spinner = ora('Cleaning build artifacts...').start();
+
+  try {
+    const paths = [
+      path.join(projectContext.projectRoot, 'dist'),
+      path.join(projectContext.projectRoot, '.dev'),
+      path.join(projectContext.projectRoot, '.flutterjs'),
+    ];
+
+    if (options.all) {
+      paths.push(path.join(projectContext.projectRoot, 'node_modules'));
+    }
+
+    for (const dir of paths) {
+      if (fs.existsSync(dir)) {
+        spinner.text = `Removing ${path.relative(projectContext.projectRoot, dir)}...`;
+        fs.rmSync(dir, { recursive: true, force: true });
+      }
+    }
+
+    spinner.succeed(chalk.green('✅ Clean complete\n'));
+
+  } catch (error) {
+    spinner.fail(chalk.red('❌ Clean failed'));
+    console.error(chalk.red(`\nError: ${error.message}`));
+    process.exit(1);
+  }
+}
+
+// ============================================================================
+// PREVIEW COMMAND
+// ============================================================================
+
+/**
+ * Preview command - Serve production build
+ */
+export async function preview(options, projectContext) {
+  const spinner = ora('Starting preview server...').start();
+
+  try {
+    const buildDir = options.output || 'dist';
+    const buildPath = path.join(projectContext.projectRoot, buildDir);
+
+    // Check if build exists
+    if (!fs.existsSync(buildPath)) {
+      throw new Error(`Build not found at ${buildDir}\n\nRun "flutterjs build" first.`);
+    }
+
+    spinner.text = 'Setting up preview server...';
+
+    const port = parseInt(options.port || 4173, 10);
+
+    const server = http.createServer((req, res) => {
+      let filePath = path.join(buildPath, req.url === '/' ? 'index.html' : req.url);
+
+      if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
+        res.writeHead(200, { 'Content-Type': 'text/html' });
+        res.end(fs.readFileSync(filePath));
+      } else {
+        // SPA fallback
+        res.writeHead(200, { 'Content-Type': 'text/html' });
+        res.end(fs.readFileSync(path.join(buildPath, 'index.html')));
+      }
+    });
+
+    server.listen(port, () => {
+      spinner.stop();
+      console.log(chalk.green('\n✅ Preview server running!\n'));
+      console.log(chalk.blue(`🌐 Open: http://localhost:${port}\n`));
+
+      // Open browser if requested
+      if (options.open) {
+        setTimeout(() => {
+          open(`http://localhost:${port}`).catch(() => { });
+        }, 500);
+      }
+    });
+
+    process.on('SIGINT', () => {
+      console.log(chalk.yellow('\n\n👋 Shutting down preview server...'));
+      server.close(() => {
+        console.log(chalk.green('✅ Server stopped\n'));
+        process.exit(0);
+      });
+    });
+
+  } catch (error) {
+    spinner.fail(chalk.red('❌ Preview failed'));
+    console.error(chalk.red(`\nError: ${error.message}`));
+    process.exit(1);
+  }
+}
+
+// ============================================================================
+// ANALYZE COMMAND
+// ============================================================================
+
+/**
+ * Analyze command - Code analysis and reports
+ */
+export async function analyze(options, projectContext) {
+  const spinner = ora('Running code analysis...').start();
+
+  try {
+    const config = await loadConfig(projectContext);
+
+    // Resolve entry file path
+    const entryFile = config.entry?.main || 'lib/main.fjs';
+    const entryPath = path.resolve(projectContext.projectRoot, entryFile);
+
+    if (!fs.existsSync(entryPath)) {
+      throw new Error(`Entry file not found: ${entryFile}`);
+    }
+
+    // Create pipeline with analysis
+    const pipeline = new BuildPipeline({
+      projectRoot: projectContext.projectRoot,
+      mode: 'development',
+      target: 'spa',
+      entryFile: entryFile,
+      outputDir: '.analysis',
+      debugMode: true,
+    });
+
+    spinner.text = 'Analyzing source code...';
+    const result = await pipeline.run();
+
+    spinner.stop();
+
+    // Display analysis results
+    console.log(chalk.blue('\n📊 Code Analysis Results:\n'));
+
+    // Widgets
+    if (result.analysis.widgets) {
+      console.log(chalk.cyan('Widgets:'));
+      console.log(chalk.gray(`  Total:      ${result.analysis.widgets.count}`));
+      console.log(chalk.gray(`  Stateless:  ${result.analysis.widgets.stateless || 0}`));
+      console.log(chalk.gray(`  Stateful:   ${result.analysis.widgets.stateful || 0}`));
+      console.log();
+    }
+
+    // Save report if requested
+    if (options.output) {
+      const reportPath = path.join(projectContext.projectRoot, options.output);
+      fs.writeFileSync(reportPath, JSON.stringify(result.analysis, null, 2));
+      console.log(chalk.gray(`Report saved to: ${options.output}\n`));
+    }
+
+    console.log(chalk.green('✅ Analysis complete\n'));
+
+    pipeline.dispose();
+
+  } catch (error) {
+    spinner.fail(chalk.red('❌ Analysis failed'));
+    console.error(chalk.red(`\nError: ${error.message}`));
+    process.exit(1);
+  }
+}
+
+// ============================================================================
+// DOCTOR COMMAND
+// ============================================================================
+
+/**
+ * Doctor command - Environment diagnostics
+ */
+export async function doctor(options, projectContext) {
+  console.log(chalk.blue('\n🏥 FlutterJS Doctor\n'));
+
+  try {
+    const checks = [];
+
+    // 1. Node.js version
+    const nodeVersion = process.version;
+    const nodeOk = semverGte(nodeVersion, '18.0.0');
+    checks.push({
+      name: 'Node.js',
+      version: nodeVersion,
+      status: nodeOk,
+      message: nodeOk ? 'Compatible' : 'Node.js 18+ required',
+    });
+
+    // 2. npm/yarn/pnpm
+    const packageManagers = checkPackageManagers();
+    checks.push({
+      name: 'Package Manager',
+      version: packageManagers.active || 'Not found',
+      status: !!packageManagers.active,
+      message: packageManagers.active ? `Using ${packageManagers.active}` : 'Install npm, yarn, or pnpm',
+    });
+
+    // 3. Git
+    const gitOk = isCommandAvailable('git');
+    checks.push({
+      name: 'Git',
+      version: gitOk ? 'Installed' : 'Not found',
+      status: gitOk,
+      message: gitOk ? 'Ready' : 'Optional - Install Git',
+    });
+
+    // 4. FlutterJS config
+    const configExists = fs.existsSync(
+      path.join(projectContext.projectRoot, 'flutterjs.config.js')
+    );
+    checks.push({
+      name: 'FlutterJS Config',
+      version: configExists ? 'Found' : 'Not found',
+      status: configExists,
+      message: configExists ? 'Valid' : 'Run "flutterjs init" or create flutterjs.config.js',
+    });
+
+    // 5. Build artifacts
+    const distExists = fs.existsSync(path.join(projectContext.projectRoot, 'dist'));
+    checks.push({
+      name: 'Build Artifacts',
+      version: distExists ? 'Present' : 'None',
+      status: distExists,
+      message: distExists ? 'Ready' : 'Run "flutterjs build"',
+    });
+
+    // Display results
+    console.log(chalk.cyan('Checks:\n'));
+
+    checks.forEach((check) => {
+      const icon = check.status ? chalk.green('✓') : chalk.red('✗');
+      console.log(`${icon} ${chalk.gray(check.name.padEnd(20))} ${check.message}`);
+    });
+
+    console.log();
+
+    const allOk = checks.every((c) => c.status);
+
+    if (allOk) {
+      console.log(chalk.green('✅ All checks passed!\n'));
+    } else {
+      console.log(chalk.yellow('⚠️  Some checks failed\n'));
+    }
+
+  } catch (error) {
+    console.error(chalk.red(`\nError: ${error.message}`));
+    process.exit(1);
+  }
+}
+
+// ============================================================================
+// INIT COMMAND
+// ============================================================================
+
+/**
+ * Init command - Create new project
+ */
+export async function init(projectName, options) {
+  try {
+    await initProject(projectName, options);
+    console.log(chalk.green(`\n✅ Project created!\n`));
+  } catch (error) {
+    console.error(chalk.red(`\n❌ Project creation failed\n`));
+    console.error(chalk.red(`Error: ${error.message}`));
+    process.exit(1);
+  }
+}
+
+/**
+ * Setup file watching for development
+ */
+function setupDevWatch(devServer, pipeline, projectContext, config) {
+  if (!chokidar) {
+    console.warn(chalk.yellow('⚠️  chokidar not available, file watching disabled'));
+    return;
+  }
+
+  const watcher = chokidar.watch(
+    [
+      path.join(projectContext.projectRoot, config.build?.source || 'lib'),
+      path.join(projectContext.projectRoot, 'public'),
+      path.join(projectContext.projectRoot, 'flutterjs.config.js'),
+    ],
+    {
+      ignoreInitial: true,
+      ignored: /node_modules|dist|\.dev/,
+      awaitWriteFinish: {
+        stabilityThreshold: 200,
+        pollInterval: 100,
+      },
+    }
+  );
+
+  watcher.on('change', async (filePath) => {
+    console.log(chalk.cyan(`\n[CHANGE] ${path.relative(projectContext.projectRoot, filePath)}`));
+
+    // Trigger rebuild
+    try {
+      const result = await pipeline.run();
+      devServer.updateBuildAnalysis(result.analysis);
+      console.log(chalk.green('✅ Rebuild complete\n'));
+    } catch (error) {
+      devServer.reportBuildError(error);
+      console.error(chalk.red(`Build error: ${error.message}\n`));
+    }
+  });
+
+  // Cleanup watcher on shutdown
+  process.on('SIGINT', () => {
+    watcher.close();
+  });
+}
+
+/**
+ * Setup graceful shutdown
+ */
+function setupGracefulShutdown(devServer, pipeline) {
+  const shutdown = async () => {
+    await devServer.stop();
+    pipeline.dispose();
+    process.exit(0);
+  };
+
+  process.on('SIGINT', shutdown);
+  process.on('SIGTERM', shutdown);
+}
+
+/**
+ * Check if command is available
+ */
+function isCommandAvailable(cmd) {
+  try {
+    execSync(`which ${cmd}`, { stdio: 'ignore' });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Check installed package managers
+ */
+function checkPackageManagers() {
+  const managers = { npm: false, yarn: false, pnpm: false, active: null };
+
+  try {
+    execSync('npm --version', { stdio: 'ignore' });
+    managers.npm = true;
+    if (!managers.active) managers.active = 'npm';
+  } catch { }
+
+  try {
+    execSync('yarn --version', { stdio: 'ignore' });
+    managers.yarn = true;
+    if (!managers.active) managers.active = 'yarn';
+  } catch { }
+
+  try {
+    execSync('pnpm --version', { stdio: 'ignore' });
+    managers.pnpm = true;
+    managers.active = 'pnpm';
+  } catch { }
+
+  return managers;
+}
+
+/**
+ * Simple semver comparison
+ */
+function semverGte(version, target) {
+  const parse = (v) =>
+    v.replace(/^v/, '').split('.').map((x) => parseInt(x, 10));
+  const [maj1, min1, pat1] = parse(version);
+  const [maj2, min2, pat2] = parse(target);
+
+  if (maj1 !== maj2) return maj1 > maj2;
+  if (min1 !== min2) return min1 > min2;
+  return pat1 >= pat2;
+}
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+export default {
+  build,
+  dev,
+  run,
+  clean,
+  preview,
+  analyze,
+  doctor,
+  init,
+};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/bin/commands/init.js b/packages/flutterjs_engine/src/init.js
similarity index 99%
rename from packages/flutterjs_engine/bin/commands/init.js
rename to packages/flutterjs_engine/src/init.js
index 28276bb3..abbe1fed 100644
--- a/packages/flutterjs_engine/bin/commands/init.js
+++ b/packages/flutterjs_engine/src/init.js
@@ -561,7 +561,7 @@ export async function initProject(projectName, options) {
 
     // 9. Show success message
     console.log(chalk.green('\n✅ Project created successfully!\n'));
-    
+
     // 10. Display file tree
     displayProjectStructure(projectPath, projectName);
 
@@ -582,7 +582,7 @@ export async function initProject(projectName, options) {
 function validateProjectName(name) {
   // Check if name is valid
   const validNamePattern = /^[a-z0-9-_]+$/;
-  
+
   if (!validNamePattern.test(name)) {
     throw new Error(
       `Invalid project name: "${name}"\n` +
@@ -629,11 +629,11 @@ async function createDirectoryStructure(projectPath) {
 async function createStructureRecursively(basePath, structure) {
   for (const [name, content] of Object.entries(structure)) {
     const fullPath = path.join(basePath, name);
-    
+
     if (typeof content === 'object' && content !== null) {
       // Create directory
       await fs.promises.mkdir(fullPath, { recursive: true });
-      
+
       // Recurse for nested structure
       if (Object.keys(content).length > 0) {
         await createStructureRecursively(fullPath, content);
@@ -651,7 +651,7 @@ async function createStructureRecursively(basePath, structure) {
 
 async function copyTemplateFiles(projectPath, templateName) {
   const template = TEMPLATES[templateName] || TEMPLATES.default;
-  
+
   if (!template) {
     throw new Error(`Template "${templateName}" not found!`);
   }
@@ -659,10 +659,10 @@ async function copyTemplateFiles(projectPath, templateName) {
   // Copy all template files
   for (const [filePath, content] of Object.entries(template.files)) {
     const fullPath = path.join(projectPath, filePath);
-    
+
     // Create parent directory if needed
     await fs.promises.mkdir(path.dirname(fullPath), { recursive: true });
-    
+
     // Write file
     await fs.promises.writeFile(fullPath, content);
   }
@@ -1038,11 +1038,11 @@ async function initGitRepository(projectPath) {
   try {
     // Initialize git
     execSync('git init', { cwd: projectPath, stdio: 'ignore' });
-    
+
     // Create initial commit
     execSync('git add .', { cwd: projectPath, stdio: 'ignore' });
     execSync('git commit -m "Initial commit"', { cwd: projectPath, stdio: 'ignore' });
-    
+
     console.log(chalk.gray('  ✓ Git repository initialized'));
   } catch (error) {
     console.log(chalk.yellow('  ⚠ Git initialization failed (optional)'));
@@ -1055,7 +1055,7 @@ async function initGitRepository(projectPath) {
 
 async function installDependencies(projectPath) {
   const packageManager = detectPackageManager();
-  
+
   console.log(chalk.gray(`  Using ${packageManager}...`));
 
   try {
@@ -1065,8 +1065,8 @@ async function installDependencies(projectPath) {
       pnpm: 'pnpm install'
     }[packageManager];
 
-    execSync(installCmd, { 
-      cwd: projectPath, 
+    execSync(installCmd, {
+      cwd: projectPath,
       stdio: 'inherit'
     });
 
@@ -1081,17 +1081,17 @@ function detectPackageManager() {
   // Check for lock files in current directory
   if (fs.existsSync('pnpm-lock.yaml')) return 'pnpm';
   if (fs.existsSync('yarn.lock')) return 'yarn';
-  
+
   // Check if package managers are installed
   try {
     execSync('pnpm --version', { stdio: 'ignore' });
     return 'pnpm';
-  } catch {}
+  } catch { }
 
   try {
     execSync('yarn --version', { stdio: 'ignore' });
     return 'yarn';
-  } catch {}
+  } catch { }
 
   return 'npm';
 }
diff --git a/packages/flutterjs_engine/bin/commands/package_collector.js b/packages/flutterjs_engine/src/package_collector.js
similarity index 98%
rename from packages/flutterjs_engine/bin/commands/package_collector.js
rename to packages/flutterjs_engine/src/package_collector.js
index da46fa25..b8a617a3 100644
--- a/packages/flutterjs_engine/bin/commands/package_collector.js
+++ b/packages/flutterjs_engine/src/package_collector.js
@@ -181,9 +181,9 @@ class PackageCollector {
     this.currentSession = session;
 
     try {
-      // ✅ Create output directory: projectRoot/node_modules/@flutterjs
-      // This is where the dev server will serve from
-      const nodeModulesDir = path.join(this.projectRoot, 'node_modules', '@flutterjs');
+      // ✅ Create output directory: dist/node_modules/@flutterjs
+      // This is for the production build / distribution
+      const nodeModulesDir = this.flutterJsDir;
       await fs.promises.mkdir(nodeModulesDir, { recursive: true });
       console.log(chalk.gray(`Output ready: ${nodeModulesDir}\n`));
 
diff --git a/packages/flutterjs_engine/bin/commands/path-resolver.js b/packages/flutterjs_engine/src/path-resolver.js
similarity index 100%
rename from packages/flutterjs_engine/bin/commands/path-resolver.js
rename to packages/flutterjs_engine/src/path-resolver.js
diff --git a/packages/flutterjs_engine/src/runtime/README.md b/packages/flutterjs_engine/src/runtime/README.md
deleted file mode 100644
index 353e7359..00000000
--- a/packages/flutterjs_engine/src/runtime/README.md
+++ /dev/null
@@ -1,39 +0,0 @@
-# @flutterjs/runtime
-
-**Package**: `@flutterjs/runtime`  
-**Description**: The core runtime engine for FlutterJS.
-
----
-
-## Overview
-
-This package implements the core primitives of the Flutter framework in JavaScript. It mimics the Flutter element tree, state management, and build lifecycle.
-
-## Core Concepts
-
-### 1. Element Tree
-Managed by `element.js`. Elements are the mutable instances that handle the lifecycle of widgets.
-- `mount()`
-- `update()`
-- `unmount()`
-
-### 2. Build Context
-Implemented in `build_context.js`. It provides the handle to the location in the tree.
-
-### 3. State Management
-`state.js` implements the Logic for `StatefulWidget`.
-- `setState()`: Schedules a rebuild.
-
-### 4. Scheduler
-`update_batcher.js` and `runtime_engine.js` manage the frame scheduling to ensure efficient updates.
-
-## Exports
-
-- `element.js`: Base Element class.
-- `state.js`: Base State class.
-- `build_context.js`: BuildContext implementation.
-- `inherited_element.js`: For propagating data down the tree.
-
-## Relationship
-
-This package depends on `@flutterjs/vdom` for the actual rendering instructions.
diff --git a/packages/flutterjs_engine/src/runtime/build.js b/packages/flutterjs_engine/src/runtime/build.js
deleted file mode 100644
index 37adf2b7..00000000
--- a/packages/flutterjs_engine/src/runtime/build.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import esbuild from 'esbuild';
-import { readFileSync, writeFileSync, readdirSync, statSync, watch } from 'fs';
-import { join, relative, extname } from 'path';
-
-const srcDir = 'src';
-const outDir = 'dist';
-
-/**
- * ✅ Recursively find ALL .js files in src/
- */
-function getAllJsFiles(dir) {
-  const files = [];
-  const items = readdirSync(dir);
-
-  for (const item of items) {
-    const fullPath = join(dir, item);
-    const stat = statSync(fullPath);
-
-    if (stat.isDirectory()) {
-      files.push(...getAllJsFiles(fullPath));
-    } else if (extname(item) === '.js') {
-      files.push(fullPath);
-    }
-  }
-
-  return files;
-}
-
-/**
- * Build each .js file separately
- */
-async function buildAllFiles() {
-  try {
-    console.log('🚀 Building @flutterjs/material...\n');
-
-    // ✅ Find all .js files
-    const allFiles = getAllJsFiles(srcDir);
-
-    console.log(`📁 Found ${allFiles.length} files\n`);
-
-    // ✅ Build each file separately
-    for (const srcFile of allFiles) {
-      const relativePath = relative(srcDir, srcFile);
-      const outFile = join(outDir, relativePath);
-
-      console.log(`📦 ${relativePath}`);
-
-      await esbuild.build({
-        entryPoints: [srcFile],
-        outfile: outFile,
-        bundle: false,
-        minify: true,
-        platform: 'browser',
-        target: ['es2020'],
-        format: 'esm',
-        sourcemap: true,
-      });
-    }
-
-    console.log();
-
-    // ✅ Generate exports based on all built files
-    generateExports(allFiles);
-
-    console.log('✅ Build successful!\n');
-
-  } catch (error) {
-    console.error('❌ Build failed:', error.message);
-  }
-}
-
-/**
- * Auto-generate package.json exports in the exact format requested
- * "./core/widget_element.js" → "./dist/core/widget_element.js"
- */
-function generateExports(sourceFiles) {
-  const packageJsonPath = './package.json';
-  const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
-
-  const exports = {};
-
-  // Main entry point
-  exports['.'] = './dist/index.js';
-
-  // ✅ Create export for EVERY built file with exact format
-  for (const srcFile of sourceFiles) {
-    const relativePath = relative(srcDir, srcFile);
-
-    // Skip index.js - it's already the main entry
-    if (relativePath === 'index.js') {
-      continue;
-    }
-
-    // Convert path with .js extension:
-    // core.js → ./core.js
-    // core/widget_element.js → ./core/widget_element.js
-    // material.js → ./material.js
-    // widgets/compoment/multi_child_view.js → ./widgets/compoment/multi_child_view.js
-
-    // Normalize slashes for Windows
-    const normalizedPath = relativePath.replace(/\\/g, '/');
-    const exportKey = './' + normalizedPath.replaceAll(".js", "");
-    const exportPath = './dist/' + normalizedPath;
-
-    exports[exportKey] = exportPath;
-  }
-
-  // Update package.json
-  packageJson.exports = exports;
-  packageJson.main = './dist/runtime.js';
-
-  writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n');
-
-  console.log('📝 Generated exports:\n');
-  Object.entries(exports).forEach(([key, value]) => {
-    console.log(`   "${key}": "${value}"`);
-  });
-  console.log();
-}
-
-/**
- * Watch mode - rebuild on file changes
- */
-function watchMode() {
-  console.log('👀 Watching for changes...\n');
-
-  watch(srcDir, { recursive: true }, (eventType, filename) => {
-    if (extname(filename) === '.js') {
-      console.log(`\n⚡ ${filename} changed\n`);
-      buildAllFiles();
-    }
-  });
-}
-
-// ✅ Check for --watch flag
-const isWatchMode = process.argv.includes('--watch');
-
-if (isWatchMode) {
-  buildAllFiles().then(() => watchMode());
-} else {
-  buildAllFiles();
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/dist/build_context.js b/packages/flutterjs_engine/src/runtime/dist/build_context.js
deleted file mode 100644
index f59bcced..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/build_context.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class r{constructor(e,t,i=null){if(!e)throw new Error("Element is required for BuildContext");if(!t)throw new Error("Runtime is required for BuildContext");this._element=e,this._runtime=t,this._state=i,this._inheritedCache=new Map,this._visited=new Set,this._dependencies=new Set}get widget(){return this._element?this._element.widget:null}get state(){return this._state}get element(){return this._element}get mounted(){return this._element?this._element.mounted:!1}findAncestorWidgetOfExactType(e){if(!e)throw new Error("Widget type is required");let t=this._element.parent;for(;t;){const i=t.widget;if(i&&i.constructor===e)return i;t=t.parent}return null}findAncestorWidgetOfType(e){return this.findAncestorWidgetOfExactType(e)}findAncestorStateOfType(e){if(!e)throw new Error("State type is required");let t=this._element.parent;for(;t;){if(t.state&&t.state.constructor===e)return t.state;t=t.parent}return null}findRenderObject(){let e=this._element.parent;for(;e;){if(e.domNode)return e.domNode;e=e.parent}return null}dependOnInheritedWidgetOfExactType(e){if(!e)throw new Error("InheritedWidget type is required");const t=this._inheritedCache.get(e);if(t!==void 0)return t;let i=this._element.parent;for(;i;){if(this._isInheritedElement(i)){const n=i.widget;if(n&&n.constructor===e)return i.addDependent&&i.addDependent(this._element),this._inheritedCache.set(e,n),this._dependencies.add(i),n}i=i.parent}return this._inheritedCache.set(e,null),null}theme(){const e=this.dependOnInheritedWidgetOfExactType(this._getThemeClass());return e?e.data:null}mediaQuery(){const e=this.dependOnInheritedWidgetOfExactType(this._getMediaQueryClass());return e?e.data:null}navigator(){return this.getService("navigator")}getService(e){if(!e)throw new Error("Service name is required");return!this._runtime||!this._runtime.serviceRegistry?null:this._runtime.serviceRegistry.get(e)||null}visitAncestorElements(e){if(typeof e!="function")throw new Error("Visitor must be a function");let t=this._element.parent;for(;t&&e(t)!==!1;)t=t.parent}get size(){const e=this._element?this._element.domNode:null;return e?{width:e.offsetWidth,height:e.offsetHeight}:null}get position(){const e=this._element?this._element.domNode:null;return e?{x:e.offsetLeft,y:e.offsetTop}:null}get bounds(){const e=this.size,t=this.position;return!e||!t?null:{x:t.x,y:t.y,width:e.width,height:e.height}}dispatch(e,t){if(!e)throw new Error("Event name is required");this._element&&this._element.dispatch&&this._element.dispatch(e,t)}getDependencyInfo(){return{dependenciesCount:this._dependencies.size,cachedInheritedWidgets:this._inheritedCache.size,inheritedWidgetTypes:Array.from(this._inheritedCache.keys()).map(e=>e.name)}}_isInheritedElement(e){return e?e.dependents!==void 0:!1}_getThemeClass(){return this._runtime&&this._runtime._ThemeClass?this._runtime._ThemeClass:class{}}_getMediaQueryClass(){return this._runtime&&this._runtime._MediaQueryClass?this._runtime._MediaQueryClass:class{}}_clearCache(){this._inheritedCache.clear(),this._dependencies.clear(),this._visited.clear()}dispose(){this._clearCache(),this._element=null,this._runtime=null,this._state=null}getInfo(){return{mounted:this.mounted,widgetType:this.widget?this.widget.constructor.name:null,stateType:this.state?this.state.constructor.name:null,elementId:this._element?this._element.id:null,elementDepth:this._element?this._element.depth:null,size:this.size,position:this.position,dependencies:this.getDependencyInfo()}}}export{r as BuildContext};
-//# sourceMappingURL=build_context.js.map
diff --git a/packages/flutterjs_engine/src/runtime/dist/build_context.js.map b/packages/flutterjs_engine/src/runtime/dist/build_context.js.map
deleted file mode 100644
index 7c29c4ac..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/build_context.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/build_context.js"],
-  "sourcesContent": ["/**\r\n * FlutterJS BuildContext\r\n * \r\n * BuildContext is the bridge between widgets and the framework.\r\n * It provides access to:\r\n * - Ancestor widgets and state\r\n * - Framework services (Theme, Navigator, MediaQuery)\r\n * - Inherited values (InheritedWidget data)\r\n * - Element and state references\r\n * \r\n * Key methods:\r\n * - findAncestorWidgetOfExactType(Type)\r\n * - findAncestorStateOfType(Type)\r\n * - dependOnInheritedWidgetOfExactType(Type)\r\n * - getService(name)\r\n * \r\n * Usage:\r\n * class MyWidget extends StatelessWidget {\r\n *   build(context) {\r\n *     final theme = Theme.of(context);\r\n *     final mediaQuery = MediaQuery.of(context);\r\n *     return Container(...);\r\n *   }\r\n * }\r\n */\r\n\r\nclass BuildContext {\r\n  /**\r\n   * Create a new BuildContext\r\n   * @param {Element} element - Element that owns this context\r\n   * @param {RuntimeEngine} runtime - Runtime engine reference\r\n   * @param {State} state - State object (optional, for StatefulWidget)\r\n   */\r\n  constructor(element, runtime, state = null) {\r\n    if (!element) {\r\n      throw new Error('Element is required for BuildContext');\r\n    }\r\n    \r\n    if (!runtime) {\r\n      throw new Error('Runtime is required for BuildContext');\r\n    }\r\n    \r\n    // Core references\r\n    this._element = element;\r\n    this._runtime = runtime;\r\n    this._state = state;\r\n    \r\n    // Cache for inherited widgets\r\n    this._inheritedCache = new Map();\r\n    \r\n    // Tracking\r\n    this._visited = new Set();      // For cycle detection\r\n    this._dependencies = new Set(); // For memory tracking\r\n  }\r\n  \r\n  /**\r\n   * Get the current widget\r\n   * @returns {Widget}\r\n   */\r\n  get widget() {\r\n    return this._element ? this._element.widget : null;\r\n  }\r\n  \r\n  /**\r\n   * Get the current state (StatefulWidget only)\r\n   * @returns {State|null}\r\n   */\r\n  get state() {\r\n    return this._state;\r\n  }\r\n  \r\n  /**\r\n   * Get the owning element\r\n   * @returns {Element}\r\n   */\r\n  get element() {\r\n    return this._element;\r\n  }\r\n  \r\n  /**\r\n   * Check if mounted\r\n   * @returns {boolean}\r\n   */\r\n  get mounted() {\r\n    return this._element ? this._element.mounted : false;\r\n  }\r\n  \r\n  /**\r\n   * Find ancestor widget of exact type\r\n   * Searches up the element tree for widget of specific type\r\n   * \r\n   * @param {Function} Type - Widget class to find\r\n   * @returns {Widget|null} - Found widget or null\r\n   * \r\n   * @example\r\n   * const appBar = context.findAncestorWidgetOfExactType(AppBar);\r\n   */\r\n  findAncestorWidgetOfExactType(Type) {\r\n    if (!Type) {\r\n      throw new Error('Widget type is required');\r\n    }\r\n    \r\n    let current = this._element.parent;\r\n    \r\n    while (current) {\r\n      const widget = current.widget;\r\n      \r\n      // Check exact type match\r\n      if (widget && widget.constructor === Type) {\r\n        return widget;\r\n      }\r\n      \r\n      current = current.parent;\r\n    }\r\n    \r\n    return null;\r\n  }\r\n  \r\n  /**\r\n   * Find ancestor widget of exact type (deprecated name variant)\r\n   * Alias for findAncestorWidgetOfExactType\r\n   */\r\n  findAncestorWidgetOfType(Type) {\r\n    return this.findAncestorWidgetOfExactType(Type);\r\n  }\r\n  \r\n  /**\r\n   * Find ancestor state of exact type\r\n   * Searches up the element tree for StatefulElement with state of specific type\r\n   * \r\n   * @param {Function} Type - State class to find\r\n   * @returns {State|null} - Found state or null\r\n   * \r\n   * @example\r\n   * const counterState = context.findAncestorStateOfType(CounterState);\r\n   */\r\n  findAncestorStateOfType(Type) {\r\n    if (!Type) {\r\n      throw new Error('State type is required');\r\n    }\r\n    \r\n    let current = this._element.parent;\r\n    \r\n    while (current) {\r\n      // Check if element has state\r\n      if (current.state) {\r\n        // Check exact type match\r\n        if (current.state.constructor === Type) {\r\n          return current.state;\r\n        }\r\n      }\r\n      \r\n      current = current.parent;\r\n    }\r\n    \r\n    return null;\r\n  }\r\n  \r\n  /**\r\n   * Find ancestor render object (DOM node)\r\n   * Gets the DOM reference for ancestor element\r\n   * \r\n   * @returns {HTMLElement|null} - DOM node or null\r\n   */\r\n  findRenderObject() {\r\n    let current = this._element.parent;\r\n    \r\n    while (current) {\r\n      if (current.domNode) {\r\n        return current.domNode;\r\n      }\r\n      current = current.parent;\r\n    }\r\n    \r\n    return null;\r\n  }\r\n  \r\n  /**\r\n   * Depend on InheritedWidget of exact type\r\n   * Finds and registers dependency on InheritedWidget\r\n   * This element will rebuild when InheritedWidget updates\r\n   * \r\n   * @param {Function} Type - InheritedWidget class to find\r\n   * @returns {InheritedWidget|null} - Found widget or null\r\n   * \r\n   * @example\r\n   * const theme = context.dependOnInheritedWidgetOfExactType(Theme);\r\n   * if (theme) {\r\n   *   return Container({ color: theme.data.primaryColor });\r\n   * }\r\n   */\r\n  dependOnInheritedWidgetOfExactType(Type) {\r\n    if (!Type) {\r\n      throw new Error('InheritedWidget type is required');\r\n    }\r\n    \r\n    // Check cache first\r\n    const cached = this._inheritedCache.get(Type);\r\n    if (cached !== undefined) {\r\n      return cached;\r\n    }\r\n    \r\n    let current = this._element.parent;\r\n    \r\n    while (current) {\r\n      // Check if this element is InheritedElement\r\n      if (this._isInheritedElement(current)) {\r\n        const widget = current.widget;\r\n        \r\n        if (widget && widget.constructor === Type) {\r\n          // Register dependency\r\n          if (current.addDependent) {\r\n            current.addDependent(this._element);\r\n          }\r\n          \r\n          // Cache result\r\n          this._inheritedCache.set(Type, widget);\r\n          this._dependencies.add(current);\r\n          \r\n          return widget;\r\n        }\r\n      }\r\n      \r\n      current = current.parent;\r\n    }\r\n    \r\n    // Cache null result too\r\n    this._inheritedCache.set(Type, null);\r\n    \r\n    return null;\r\n  }\r\n  \r\n  /**\r\n   * Convenience: Get Theme\r\n   * Shorthand for Theme.of(context)\r\n   * \r\n   * @returns {ThemeData|null}\r\n   * \r\n   * @example\r\n   * const theme = context.theme();\r\n   * if (theme) {\r\n   *   console.log(theme.primaryColor);\r\n   * }\r\n   */\r\n  theme() {\r\n    const themeWidget = this.dependOnInheritedWidgetOfExactType(\r\n      this._getThemeClass()\r\n    );\r\n    return themeWidget ? themeWidget.data : null;\r\n  }\r\n  \r\n  /**\r\n   * Convenience: Get MediaQuery\r\n   * Shorthand for MediaQuery.of(context)\r\n   * \r\n   * @returns {MediaQueryData|null}\r\n   * \r\n   * @example\r\n   * const mq = context.mediaQuery();\r\n   * if (mq) {\r\n   *   console.log(mq.size.width);\r\n   * }\r\n   */\r\n  mediaQuery() {\r\n    const mq = this.dependOnInheritedWidgetOfExactType(\r\n      this._getMediaQueryClass()\r\n    );\r\n    return mq ? mq.data : null;\r\n  }\r\n  \r\n  /**\r\n   * Convenience: Get Navigator\r\n   * \r\n   * @returns {NavigatorService|null}\r\n   */\r\n  navigator() {\r\n    return this.getService('navigator');\r\n  }\r\n  \r\n  /**\r\n   * Get framework service\r\n   * Accesses registered services from runtime\r\n   * \r\n   * @param {string} serviceName - Name of service\r\n   * @returns {*} - Service instance or null\r\n   * \r\n   * @example\r\n   * const navigator = context.getService('navigator');\r\n   * const theme = context.getService('theme');\r\n   */\r\n  getService(serviceName) {\r\n    if (!serviceName) {\r\n      throw new Error('Service name is required');\r\n    }\r\n    \r\n    if (!this._runtime || !this._runtime.serviceRegistry) {\r\n      return null;\r\n    }\r\n    \r\n    return this._runtime.serviceRegistry.get(serviceName) || null;\r\n  }\r\n  \r\n  /**\r\n   * Visit all ancestor elements\r\n   * Calls visitor function for each ancestor\r\n   * \r\n   * @param {Function} visitor - Callback function\r\n   *        Receives: element\r\n   *        Return false to stop traversal\r\n   * \r\n   * @example\r\n   * context.visitAncestorElements((element) => {\r\n   *   console.log(element.constructor.name);\r\n   *   // Return false to stop\r\n   * });\r\n   */\r\n  visitAncestorElements(visitor) {\r\n    if (typeof visitor !== 'function') {\r\n      throw new Error('Visitor must be a function');\r\n    }\r\n    \r\n    let current = this._element.parent;\r\n    \r\n    while (current) {\r\n      const shouldContinue = visitor(current);\r\n      \r\n      if (shouldContinue === false) {\r\n        break;\r\n      }\r\n      \r\n      current = current.parent;\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Get size of element\r\n   * Returns width and height of DOM element\r\n   * \r\n   * @returns {Object|null} - { width, height } or null\r\n   * \r\n   * @example\r\n   * const size = context.size;\r\n   * if (size) {\r\n   *   console.log(`${size.width}x${size.height}`);\r\n   * }\r\n   */\r\n  get size() {\r\n    const domNode = this._element ? this._element.domNode : null;\r\n    \r\n    if (!domNode) {\r\n      return null;\r\n    }\r\n    \r\n    return {\r\n      width: domNode.offsetWidth,\r\n      height: domNode.offsetHeight\r\n    };\r\n  }\r\n  \r\n  /**\r\n   * Get position of element\r\n   * Returns x, y offset from document\r\n   * \r\n   * @returns {Object|null} - { x, y } or null\r\n   */\r\n  get position() {\r\n    const domNode = this._element ? this._element.domNode : null;\r\n    \r\n    if (!domNode) {\r\n      return null;\r\n    }\r\n    \r\n    return {\r\n      x: domNode.offsetLeft,\r\n      y: domNode.offsetTop\r\n    };\r\n  }\r\n  \r\n  /**\r\n   * Get bounds of element\r\n   * Returns position and size\r\n   * \r\n   * @returns {Object|null} - { x, y, width, height } or null\r\n   */\r\n  get bounds() {\r\n    const size = this.size;\r\n    const position = this.position;\r\n    \r\n    if (!size || !position) {\r\n      return null;\r\n    }\r\n    \r\n    return {\r\n      x: position.x,\r\n      y: position.y,\r\n      width: size.width,\r\n      height: size.height\r\n    };\r\n  }\r\n  \r\n  /**\r\n   * Dispatch a custom event\r\n   * For communicating with other widgets\r\n   * \r\n   * @param {string} eventName - Event name\r\n   * @param {*} data - Event data\r\n   * \r\n   * @example\r\n   * context.dispatch('theme-changed', { theme: 'dark' });\r\n   */\r\n  dispatch(eventName, data) {\r\n    if (!eventName) {\r\n      throw new Error('Event name is required');\r\n    }\r\n    \r\n    // Dispatch to runtime or element\r\n    if (this._element && this._element.dispatch) {\r\n      this._element.dispatch(eventName, data);\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Get dependency information\r\n   * For debugging\r\n   * \r\n   * @returns {Object}\r\n   */\r\n  getDependencyInfo() {\r\n    return {\r\n      dependenciesCount: this._dependencies.size,\r\n      cachedInheritedWidgets: this._inheritedCache.size,\r\n      inheritedWidgetTypes: Array.from(this._inheritedCache.keys())\r\n        .map(Type => Type.name)\r\n    };\r\n  }\r\n  \r\n  /**\r\n   * Check if element is InheritedElement\r\n   * @private\r\n   */\r\n  _isInheritedElement(element) {\r\n    if (!element) return false;\r\n    \r\n    // Check by dependents property (MockInheritedElement has this)\r\n    return element.dependents !== undefined;\r\n  }\r\n  \r\n  /**\r\n   * Get Theme class\r\n   * @private\r\n   */\r\n  _getThemeClass() {\r\n    // Try to get from runtime or return a placeholder\r\n    if (this._runtime && this._runtime._ThemeClass) {\r\n      return this._runtime._ThemeClass;\r\n    }\r\n    \r\n    // Return a class that won't be found (graceful fallback)\r\n    return class ThemeClass {};\r\n  }\r\n  \r\n  /**\r\n   * Get MediaQuery class\r\n   * @private\r\n   */\r\n  _getMediaQueryClass() {\r\n    if (this._runtime && this._runtime._MediaQueryClass) {\r\n      return this._runtime._MediaQueryClass;\r\n    }\r\n    \r\n    return class MediaQueryClass {};\r\n  }\r\n  \r\n  /**\r\n   * Clear cache (for cleanup)\r\n   * @private\r\n   */\r\n  _clearCache() {\r\n    this._inheritedCache.clear();\r\n    this._dependencies.clear();\r\n    this._visited.clear();\r\n  }\r\n  \r\n  /**\r\n   * Dispose context\r\n   */\r\n  dispose() {\r\n    this._clearCache();\r\n    this._element = null;\r\n    this._runtime = null;\r\n    this._state = null;\r\n  }\r\n  \r\n  /**\r\n   * Get context information (for debugging)\r\n   * @returns {Object}\r\n   */\r\n  getInfo() {\r\n    return {\r\n      mounted: this.mounted,\r\n      widgetType: this.widget ? this.widget.constructor.name : null,\r\n      stateType: this.state ? this.state.constructor.name : null,\r\n      elementId: this._element ? this._element.id : null,\r\n      elementDepth: this._element ? this._element.depth : null,\r\n      size: this.size,\r\n      position: this.position,\r\n      dependencies: this.getDependencyInfo()\r\n    };\r\n  }\r\n}\r\n\r\n\r\nexport {BuildContext};\r\n"],
-  "mappings": "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",
-  "names": ["BuildContext", "element", "runtime", "state", "Type", "current", "widget", "cached", "themeWidget", "mq", "serviceName", "visitor", "domNode", "size", "position", "eventName", "data"]
-}
diff --git a/packages/flutterjs_engine/src/runtime/dist/element.js b/packages/flutterjs_engine/src/runtime/dist/element.js
deleted file mode 100644
index 03716d13..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/element.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{BuildContext as c}from"./build_context.js";import{VNodeDiffer as p}from"@flutterjs/vdom/vnode_differ";import{PatchApplier as _}from"@flutterjs/vdom/patch_applier";const y={hidden:"hidden",fine:"fine",debug:"debug",info:"info",warning:"warning",hint:"hint",summary:"summary",error:"error",off:"off"},g={none:"none",sparse:"sparse",offstage:"offstage",dense:"dense",transition:"transition",error:"error",whitespace:"whitespace",flat:"flat",singleLine:"singleLine",errorProperty:"errorProperty",shallow:"shallow",truncateChildren:"truncateChildren"};class E{toStringShort(){return`${this.constructor.name}${this.key?`(key: ${this.key})`:"(unkeyed)"}`}toDiagnosticsNode(e=null,t=g.sparse){return{name:e||this.constructor.name,value:this,style:t,toString:()=>this.toStringShort()}}debugFillProperties(e){this.key!==null&&this.key!==void 0&&e.push({name:"key",value:this.key})}debugInfo(){const e=[];return this.debugFillProperties(e),{type:this.constructor.name,key:this.key||null,properties:e,style:this.style||g.sparse,description:this.toStringShort()}}toString(){return this.toStringShort()}}function m(r){if(!r||typeof r!="object")return!1;const e=typeof r.tag=="string",t=Array.isArray(r.children)||r.children===null||r.children===void 0,n=r.props===null||r.props===void 0||typeof r.props=="object",o=typeof r.build!="function"&&typeof r.createState!="function"&&typeof r.createElement!="function";return e&&t&&n&&o}function f(r){return!r||typeof r!="object"?!1:typeof r.build=="function"||typeof r.createState=="function"||typeof r.render=="function"||typeof r.createElement=="function"}class u extends E{constructor(e,t=null,n=null){if(super(),!e)throw new Error("Widget is required for Element creation");if(!n)throw new Error("RUNTIME IS UNDEFINED! Runtime is required for Element creation");this._widget=e,this._parent=t,this.runtime=n,this._children=[],this._childMap=new Map,this._vnode=null,this._domNode=null,this._mounted=!1,this._dirty=!1,this._building=!1,this._shouldPatch=!0,this._depth=t?(t._depth||0)+1:0,this.key=e.key,this._id=`el_${u._nextId++}`,console.log(`[Element] \u{1F195} Created ${this._id} for ${e?.constructor?.name}`),this._buildCount=0,this._lastBuildTime=0,this._lastBuildDuration=0,this._context=null}get widget(){return this._widget}set widget(e){this._widget=e}get parent(){return this._parent}set parent(e){this._parent=e}get children(){return this._children}get depth(){return this._depth}get id(){return this._id}get mounted(){return this._mounted}get dirty(){return this._dirty}get building(){return this._building}get vnode(){return this._vnode}set vnode(e){this._vnode=e}get domNode(){return this._domNode}set domNode(e){this._domNode=e}get context(){return this._context||(this._context=new c(this,this.runtime)),this._context}getElementId(){return this._id}getWidgetPath(){if(this._widgetPath)return this._widgetPath;const e=this.widget?.constructor?.name||"Unknown",t=this.parent?.getWidgetPath?this.parent.getWidgetPath():"";return this._widgetPath=t?`${t}/${e}`:e,this._widgetPath}getIdentificationStrategy(){return this.key?"key":"id"}performRebuild(){throw new Error(`${this.constructor.name}.performRebuild() must be implemented by subclass`)}mount(e=null){if(this._mounted){console.warn(`[Element] ${this._id} already mounted`);return}try{this._mounted=!0,e&&(this._parent=e,this._depth=(e._depth||0)+1),this._vnode=this.performRebuild(),this._children.forEach(t=>{t._mounted||t.mount(this)}),this.didMount(),this._initialMountComplete=!0}catch(t){throw this._mounted=!1,new Error(`Failed to mount ${this.constructor.name}: ${t.message}`)}}rebuild(){if(!this._mounted){console.warn(`[Element] Cannot rebuild unmounted element ${this._id}`);return}if(this._building){console.warn(`[Element] Recursive rebuild detected for ${this._id}`);return}try{this._building=!0,console.log(`\u{1F504} [Element.rebuild] START for ${this._id} (${this.widget?.constructor?.name})`),console.log("   _shouldPatch BEFORE performRebuild:",this._shouldPatch);const e=this._vnode;console.log("   oldVNode:",e?.tag,e?._element),this._vnode=this.performRebuild(),console.log("   newVNode:",this._vnode?.tag,this._vnode?._element),console.log("   _shouldPatch AFTER performRebuild:",this._shouldPatch),this._shouldPatch&&this._initialMountComplete?(console.log(`\u2705 [Element.rebuild] Calling applyChanges for ${this._id}`),this.applyChanges(e,this._vnode)):(this._initialMountComplete?console.log(e?`\u23ED\uFE0F [Element.rebuild] Skipping applyChanges for ${this._id} (_shouldPatch = false)`:`\u23ED\uFE0F [Element.rebuild] Skipping applyChanges for ${this._id} (initial mount, oldVNode is null)`):console.log(`\u23ED\uFE0F [Element.rebuild] Skipping applyChanges for ${this._id} (first rebuild after mount)`),this._vnode&&this._vnode._element&&(this._domNode=this._vnode._element)),this._dirty=!1}catch(e){throw console.error(`[Element] Rebuild failed for ${this._id}:`,e),e}finally{this._building=!1}}applyChanges(e,t){if(console.log(`[Element.applyChanges] START for ${this._id} (${this.widget?.constructor.name})`),console.log("  oldVNode:",{tag:e?.tag,hasElement:!!e?._element,element:e?._element?.tagName}),console.log("  newVNode:",{tag:t?.tag,hasElement:!!t?._element,element:t?._element?.tagName}),this.runtime.config&&this.runtime.config.debugMode&&console.log(`[Element] Applied changes to ${this._id}`),this._hasAppliedChanges&&e&&t&&!e?._element&&!t?._element&&this.runtime.renderer){const n=e.children||[],o=t.children||[];if(n.length!==o.length||JSON.stringify(n)!==JSON.stringify(o)){console.log("[Element] \u{1F504} Both VNodes have no DOM but children changed - forcing full re-render");try{let i=this._domNode;if(!i&&this._parent&&(i=this._parent._domNode),!i){const l=document.getElementById("root");l&&l.firstChild&&(i=l.firstChild)}if(i){console.log("[Element] \u{1F3A8} Found target element, rendering new VNode"),i.innerHTML="",this.runtime.renderer.render(t,i),t._element=i.firstChild,t._element&&(t._element._vnode=t,this._domNode=t._element),console.log("[Element] \u2705 Successfully re-rendered for VNode change");return}else console.warn("[Element] \u26A0\uFE0F Could not find target element for re-render")}catch(i){console.error("[Element] \u274C Failed to re-render:",i)}}else console.log("[Element] \u2139\uFE0F Both VNodes have no DOM but children unchanged - skipping re-render")}if(this._mounted&&e&&e._element&&!t._element&&this.runtime.renderer){console.log("[Element] \u{1F504} Widget type changed - rendering new VNode and replacing DOM");try{const n=e._element,o=n.parentNode;if(o){const s=document.createElement("div");this.runtime.renderer.render(t,s);const i=s.firstChild;if(i){o.replaceChild(i,n),t._element=i,i._vnode=t,this._domNode===n&&(this._domNode=i),console.log("[Element] \u2705 Successfully replaced DOM for widget type change");return}}}catch(n){console.error("[Element] \u274C Failed to replace DOM for widget type change:",n)}}else e&&e._element&&t._element&&console.log("[Element] \u2139\uFE0F Both VNodes have DOM elements - using normal patching");if(e&&e._element&&this.runtime.renderer){if(e._element.parentNode)try{const n=e._element,o=n.parentNode,s=Array.from(o.childNodes).indexOf(n);if(s!==-1){this.runtime.config&&this.runtime.config.debugMode&&console.log(`[Element] Diffing at index ${s}`);const i=p.diff(e,t,s);if(i.length>0){console.log(`[Element] Applying ${i.length} patches to ${this._id} (${this.widget?.constructor.name})`),i.forEach(a=>console.log(`   - Patch: ${a.type} at index ${a.index}, content:`,a.content));const l=_.apply(o,i);l.success?console.log("[Element] Patches applied successfully"):console.error("[Element] PatchApplier failed:",l.errors),t._element||(t._element=e._element),this._domNode===n&&(this._domNode=t._element)}else console.log(`[Element] No patches generated for ${this._id} (${this.widget?.constructor.name})`),t._element=e._element,t._element&&(t._element._vnode=t);return}}catch(n){console.warn("[Element] Diffing failed, falling back to replace",n)}this.runtime.config&&this.runtime.config.debugMode&&console.log(`[Element] Fallback: Replacing DOM for ${this._id}`);try{const n=this.runtime.renderer.replaceElement(e._element,t);this._domNode===e._element&&(this._domNode=n)}catch(n){console.error(`[Element] Failed to patch DOM for ${this._id}:`,n)}}this._hasAppliedChanges=!0}markNeedsBuild(){if(!this._dirty){if(!this._mounted){console.warn(`[Element] Cannot mark unmounted element ${this._id} dirty`);return}this._dirty=!0,console.log(`\u{1F50D} [Element.markNeedsBuild] Called for ${this._id} (${this.widget?.constructor?.name})`),console.trace("Call stack:"),this.runtime&&this.runtime.markNeedsBuild&&this.runtime.markNeedsBuild(this)}}unmount(){if(this._mounted)try{this.willUnmount(),this._children.forEach(e=>{e._mounted&&e.unmount()}),this._children=[],this._childMap.clear(),this._vnode=null,this._domNode=null,this._mounted=!1,this._dirty=!1,this.didUnmount()}catch(e){console.error(`[Element] Unmount failed for ${this._id}:`,e)}}updateWidget(e){if(!e)throw new Error("New widget is required for update");const t=this._widget;this.widget=e,this.shouldRebuild(t,e)&&this.markNeedsBuild(),this.didUpdateWidget(t,e)}shouldRebuild(e,t){return e===t?!1:e.constructor!==t.constructor?!0:!this.areWidgetsEqual(e,t)}areWidgetsEqual(e,t){if(e.constructor!==t.constructor)return!1;const n=Object.keys(e),o=Object.keys(t);return n.length!==o.length?!1:n.every(s=>{const i=e[s],l=t[s];if(typeof i=="function"&&typeof l=="function")return!0;if(typeof i=="object"&&typeof l=="object")try{return JSON.stringify(i)===JSON.stringify(l)}catch{return!1}return i===l})}addChild(e){if(!e)throw new Error("Child element is required");this._children.push(e),e.key&&this._childMap.set(e.key,e),e.parent=this}removeChild(e){const t=this._children.indexOf(e);t!==-1&&this._children.splice(t,1),e.key&&this._childMap.delete(e.key),e.parent=null}findChildByKey(e){return this._childMap.get(e)}findAncestorOfType(e){let t=this._parent;for(;t;){if(t instanceof e)return t;t=t._parent}return null}visitAncestors(e){let t=this._parent;for(;t&&e(t)!==!1;)t=t._parent}didMount(){}didUpdateWidget(e,t){}willUnmount(){}didUnmount(){}reassemble(){}activate(){}deactivate(){}didChangeDependencies(){}getStats(){return{id:this._id,type:this.constructor.name,mounted:this._mounted,dirty:this._dirty,depth:this._depth,childCount:this._children.length,buildCount:this._buildCount,lastBuildDuration:this._lastBuildDuration,hasKey:!!this.key}}static generateId(){return`el_${++u._counter}`}static resetCounter(){u._counter=0}}u._counter=0;class d extends u{constructor(e,t,n){super(e,t,n)}build(){console.log("\u{1F4E6} StatelessElement.build() START",{widgetType:this.widget?.constructor.name,widgetInstance:this.widget});const e=this.buildContext();try{console.log("\u{1F528} Calling widget.build(context)...");const t=this.widget.build(e);if(console.log("\u2713 widget.build() returned:",{resultType:typeof t,resultConstructor:t?.constructor?.name,hasTag:t?.tag!==void 0,isString:typeof t=="string",isNull:t===null}),!t)throw console.warn("\u26A0\uFE0F Result is null/undefined"),new Error("StatelessWidget.build() returned null");if(m(t))return console.log("\u2705 Result is a REAL VNode, returning it directly"),this._shouldPatch=!0,t;if(typeof t=="string"||typeof t=="number"||typeof t=="boolean")return console.log("\u2705 Result is a primitive:",t),this._shouldPatch=!0,t;if(f(t)){console.log("\u{1F504} Result is a Widget, need to build recursively:",t.constructor.name);let n=this._children[0];if(n&&n.widget.constructor===t.constructor&&n.widget.key===t.key){console.log("\u267B\uFE0F Reusing existing child element for:",t.constructor.name);const s=n.widget;return n.widget=t,n.shouldRebuild(s,t)?(console.log("\u{1F504} Widget changed, rebuilding child element"),n.rebuild()):console.log("\u2705 Widget unchanged, reusing existing vnode"),n.vnode}n&&(console.log("\u{1F5D1}\uFE0F Unmounting old child element:",n.constructor.name),n.unmount(),this._children=[]),this._shouldPatch=!0,n=this._createElementForWidget(t),console.log("\u2705 Created child element:",n.constructor.name),this._children=[n],n.mount(this);const o=n.vnode;if(!o)throw new Error("Child element.build() returned null");return console.log("\u2705 Built new child widget, applyChanges will update DOM"),o}throw console.warn("\u26A0\uFE0F Unknown result type from build():",t),console.warn("   Constructor:",t?.constructor?.name),console.warn("   Type:",typeof t),console.warn("   Has .tag:",t?.tag),console.warn("   Has .build:",typeof t?.build),new Error(`Invalid build() return type from ${this.widget.constructor.name}. Expected: Widget, VNode, string, number, or null. Got: ${t?.constructor?.name} with tag="${t?.tag}"`)}catch(t){throw console.error("\u274C Build error:",t.message),console.error("   Widget:",this.widget?.constructor.name),new Error(`StatelessWidget build failed: ${t.message}`)}}_createElementForWidget(e){if(e&&typeof e.createElement=="function")return console.log("  Using widget.createElement() for:",e.constructor.name),e.createElement(this,this.runtime);if(typeof e.createState=="function")return console.log("  Creating StatefulElement for:",e.constructor.name),new h(e,this,this.runtime);if(e.updateShouldNotify&&typeof e.updateShouldNotify=="function")throw console.error("  \u26A0\uFE0F InheritedWidget without createElement():",e.constructor.name),new Error(`InheritedWidget "${e.constructor.name}" must define createElement() method. Extend InheritedWidget class properly.`);return console.log("  Creating StatelessElement for:",e.constructor.name),new d(e,this,this.runtime)}buildContext(){return new c(this,this.runtime)}performRebuild(){return this.build()}}class h extends u{constructor(e,t,n){if(super(e,t,n),!e.createState||typeof e.createState!="function")throw new Error("StatefulWidget must implement createState()");if(this.state=e.createState(),!this.state)throw new Error("createState() returned null or undefined");this.state._element=this,this.state._widget=e,this.state._mounted=!1}build(){console.log("\u{1F4E6} StatefulElement.build() START",{widgetType:this.widget?.constructor.name,stateType:this.state?.constructor.name});const e=this.buildContext();try{if(!this.state.build||typeof this.state.build!="function")throw new Error("State must implement build() method");console.log("\u{1F528} Calling state.build(context)...");const t=this.state.build(e);if(console.log("\u2713 state.build() returned:",{resultType:typeof t,resultConstructor:t?.constructor?.name,isVNode:t?.tag!==void 0}),!t)throw new Error("State.build() returned null");if(m(t))return console.log("\u2705 Result is a REAL VNode, returning"),this._shouldPatch=!0,t;if(typeof t=="string"||typeof t=="number"||typeof t=="boolean")return console.log("\u2705 Result is a primitive"),this._shouldPatch=!0,t;let n=this._children[0];if(f(t)){if(console.log("\u{1F504} State.build() returned a Widget, building recursively:",t.constructor.name),n&&n.widget.constructor===t.constructor&&n.widget.key===t.key){console.log("\u267B\uFE0F Reusing existing child element for:",t.constructor.name);const s=n.widget;return n.widget=t,n.shouldRebuild(s,t)?(console.log("\u{1F504} Widget changed, rebuilding child element"),n.rebuild()):console.log("\u2705 Widget unchanged, reusing existing vnode"),this._shouldPatch=!1,n.vnode}n&&(console.log("\u{1F5D1}\uFE0F Unmounting old child element:",n.constructor.name),n.unmount(),this._children=[]),this._shouldPatch=!0,n=this._createElementForWidget(t),this._children=[n],n.mount(this);const o=n.vnode;if(!o)throw new Error("Child element.build() returned null");return console.log("\u2705 Built new child widget, applyChanges will update DOM"),o}return this._shouldPatch=!1,n?n.vnode:t;throw new Error(`Invalid build() return type from ${this.widget.constructor.name} state. Expected: Widget, VNode, string, number, or null.`)}catch(t){throw new Error(`StatefulWidget build failed: ${t.message}`)}}_createElementForWidget(e){return e&&typeof e.createElement=="function"?e.createElement(this,this.runtime):typeof e.createState=="function"?new h(e,this,this.runtime):e.updateShouldNotify&&typeof e.updateShouldNotify=="function"?new InheritedElement(e,this,this.runtime):new d(e,this,this.runtime)}mount(){if(this._mounted){console.warn(`[StatefulElement] ${this._id} already mounted, skipping duplicate mount`);return}if(console.log("\u{1F680} StatefulElement.mount() called"),console.log("   Widget:",this.widget?.constructor?.name),console.log("   State:",this.state?.constructor?.name),console.log("   State has _mount:",typeof this.state._mount=="function"),this.state._mount&&typeof this.state._mount=="function")console.log("\u2705 Calling state._mount(this)..."),this.state._mount(this),console.log("\u2705 state._mount() complete");else if(console.log("\u26A0\uFE0F State does not have _mount(), using fallback initialization"),this.state._element=this,this.state._widget=this.widget,this.state._mounted=!0,this.state.initState&&typeof this.state.initState=="function")try{console.log("\u{1F3AC} Calling initState()..."),this.state.initState()}catch(e){console.error("[StatefulElement] initState failed:",e)}console.log("\u{1F50D} State after mount:",{hasMounted:this.state._mounted,hasElement:!!this.state._element,hasWidget:!!this.state._widget,widgetType:this.state._widget?.constructor?.name,widgetTitle:this.state._widget?.title}),super.mount(),console.log("\u2705 StatefulElement.mount() complete")}buildContext(){return new c(this,this.runtime,this.state)}updateWidget(e){console.log("\u{1F504} StatefulElement.updateWidget() called");const t=this._widget;if(super.updateWidget(e),this.state._updateWidget&&typeof this.state._updateWidget=="function"?(console.log("\u2705 Calling state._updateWidget()"),this.state._updateWidget(e)):(console.log("\u26A0\uFE0F State does not have _updateWidget(), updating directly"),this.state._widget=e),this.state.didUpdateWidget&&typeof this.state.didUpdateWidget=="function")try{this.state.didUpdateWidget(t)}catch(n){console.error("[StatefulElement] didUpdateWidget failed:",n)}}unmount(){console.log("\u{1F6D1} StatefulElement.unmount() called"),this.state._unmount&&typeof this.state._unmount=="function"&&this.state._unmount(),this.state._dispose&&typeof this.state._dispose=="function"&&this.state._dispose(),super.unmount()}performRebuild(){return this.build()}}class b extends u{constructor(e,t,n){super(e,t,n),this.componentState={}}build(){const e=this.widget.render||this.widget.build;if(!e||typeof e!="function")throw new Error("ComponentElement widget must have render() or build() method");const t=this.buildContext();try{const n=e.call(this.widget,t);if(n&&typeof n=="object"&&n.tag||typeof n=="string"||typeof n=="number")return n;if(n&&typeof n=="object"&&(typeof n.build=="function"||typeof n.createState=="function")){const s=this._createElementForWidget(n);return s._parent=this,s._depth=this._depth+1,s._mounted=!0,s.build()}return n}catch(n){throw new Error(`Component build failed: ${n.message}`)}}_createElementForWidget(e){return e&&typeof e.createElement=="function"?e.createElement(this,this.runtime):typeof e.createState=="function"?new h(e,this,this.runtime):new d(e,this,this.runtime)}buildContext(){return{element:this,runtime:this.runtime,widget:this.widget,state:this.componentState,setState:e=>{Object.assign(this.componentState,e),this.markNeedsBuild()}}}performRebuild(){return this.build()}}u._nextId=0;export{b as ComponentElement,y as DiagnosticLevel,E as Diagnosticable,u as Element,h as StatefulElement,d as StatelessElement,m as isRealVNode,f as isWidget};
-//# sourceMappingURL=element.js.map
diff --git a/packages/flutterjs_engine/src/runtime/dist/element.js.map b/packages/flutterjs_engine/src/runtime/dist/element.js.map
deleted file mode 100644
index 47f88ff5..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/element.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/element.js"],
-  "sourcesContent": ["/**\r\n * FlutterJS Element System - FIXED VERSION\r\n * \r\n * \u2705 CRITICAL FIX: StatefulElement.mount() now calls state._mount()\r\n * This ensures this.widget is properly initialized in State\r\n * \r\n * Elements are the live instances that bridge widgets and DOM.\r\n * They manage the lifecycle, state, and rendering of widgets.\r\n */\r\n\r\nimport { BuildContext } from './build_context.js';\r\nimport { VNodeDiffer } from '@flutterjs/vdom/vnode_differ';\r\nimport { PatchApplier } from '@flutterjs/vdom/patch_applier';\r\n// NOTE: InheritedElement is NOT imported here to avoid circular dependency.\r\n// InheritedWidget provides its own createElement() method that returns InheritedElement.\r\n\r\n// ============================================================================\r\n// DIAGNOSTIC LEVELS\r\n// ============================================================================\r\n\r\nconst DiagnosticLevel = {\r\n  hidden: 'hidden',\r\n  fine: 'fine',\r\n  debug: 'debug',\r\n  info: 'info',\r\n  warning: 'warning',\r\n  hint: 'hint',\r\n  summary: 'summary',\r\n  error: 'error',\r\n  off: 'off'\r\n};\r\n\r\nconst DiagnosticsTreeStyle = {\r\n  none: 'none',\r\n  sparse: 'sparse',\r\n  offstage: 'offstage',\r\n  dense: 'dense',\r\n  transition: 'transition',\r\n  error: 'error',\r\n  whitespace: 'whitespace',\r\n  flat: 'flat',\r\n  singleLine: 'singleLine',\r\n  errorProperty: 'errorProperty',\r\n  shallow: 'shallow',\r\n  truncateChildren: 'truncateChildren'\r\n};\r\n\r\n// ============================================================================\r\n// DIAGNOSTICABLE MIXIN\r\n// ============================================================================\r\n\r\nexport class Diagnosticable {\r\n  toStringShort() {\r\n    return `${this.constructor.name}${this.key ? `(key: ${this.key})` : '(unkeyed)'}`;\r\n  }\r\n\r\n  toDiagnosticsNode(name = null, style = DiagnosticsTreeStyle.sparse) {\r\n    return {\r\n      name: name || this.constructor.name,\r\n      value: this,\r\n      style: style,\r\n      toString: () => this.toStringShort()\r\n    };\r\n  }\r\n\r\n  debugFillProperties(properties) {\r\n    if (this.key !== null && this.key !== undefined) {\r\n      properties.push({ name: 'key', value: this.key });\r\n    }\r\n  }\r\n\r\n  debugInfo() {\r\n    const properties = [];\r\n    this.debugFillProperties(properties);\r\n\r\n    return {\r\n      type: this.constructor.name,\r\n      key: this.key || null,\r\n      properties: properties,\r\n      style: this.style || DiagnosticsTreeStyle.sparse,\r\n      description: this.toStringShort()\r\n    };\r\n  }\r\n\r\n  toString() {\r\n    if (process.env.NODE_ENV === 'development') {\r\n      const info = this.debugInfo();\r\n      if (info.properties.length === 0) {\r\n        return this.toStringShort();\r\n      }\r\n      const propsStr = info.properties\r\n        .map(p => `${p.name}: ${p.value}`)\r\n        .join(', ');\r\n      return `${this.toStringShort()} { ${propsStr} }`;\r\n    }\r\n    return this.toStringShort();\r\n  }\r\n}\r\n\r\n\r\n// \u2705 Helper function to check if something is a REAL VNode\r\nfunction isRealVNode(obj) {\r\n  if (!obj || typeof obj !== 'object') {\r\n    return false;\r\n  }\r\n\r\n  // Check for VNode properties AND structure\r\n  const hasTag = typeof obj.tag === 'string';  // \u2705 tag must be STRING (HTML tag name)\r\n  const hasChildren = Array.isArray(obj.children) || obj.children === null || obj.children === undefined;\r\n  const hasProps = obj.props === null || obj.props === undefined || typeof obj.props === 'object';\r\n\r\n  // VNode should NOT have build() or createState() or createElement() methods\r\n  const isNotWidget = typeof obj.build !== 'function' &&\r\n    typeof obj.createState !== 'function' &&\r\n    typeof obj.createElement !== 'function';\r\n\r\n  // All conditions must be true\r\n  return hasTag && hasChildren && hasProps && isNotWidget;\r\n}\r\n\r\n// \u2705 Helper function to check if something is a Widget\r\nfunction isWidget(obj) {\r\n  if (!obj || typeof obj !== 'object') {\r\n    return false;\r\n  }\r\n\r\n  return (\r\n    typeof obj.build === 'function' ||\r\n    typeof obj.createState === 'function' ||\r\n    typeof obj.render === 'function' ||\r\n    typeof obj.createElement === 'function' // \u2705 Added for ProxyWidgets (SizedBox, ConstrainedBox)\r\n  );\r\n}\r\n\r\n\r\n/**\r\n * Base Element Class\r\n */\r\nclass Element extends Diagnosticable {\r\n  constructor(widget, parent = null, runtime = null) {\r\n    super();\r\n\r\n    if (!widget) {\r\n      throw new Error('Widget is required for Element creation');\r\n    }\r\n\r\n    if (!runtime) {\r\n      throw new Error('RUNTIME IS UNDEFINED! Runtime is required for Element creation');\r\n    }\r\n\r\n    this._widget = widget;\r\n    this._parent = parent;\r\n    this.runtime = runtime;\r\n\r\n    this._children = [];\r\n    this._childMap = new Map();\r\n\r\n    this._vnode = null;\r\n    this._domNode = null;\r\n\r\n    this._mounted = false;\r\n    this._dirty = false;\r\n    this._building = false;\r\n    this._shouldPatch = true; // Default to true, subclasses/build will disable if delegating\r\n\r\n    this._depth = parent ? (parent._depth || 0) + 1 : 0;\r\n\r\n    this.key = widget.key;\r\n    this._id = `el_${Element._nextId++}`;\r\n    console.log(`[Element] \uD83C\uDD95 Created ${this._id} for ${widget?.constructor?.name}`);\r\n\r\n    this._buildCount = 0;\r\n    this._lastBuildTime = 0;\r\n    this._lastBuildDuration = 0;\r\n\r\n    this._context = null;\r\n  }\r\n\r\n  // ============================================================================\r\n  // PROPERTIES\r\n  // ============================================================================\r\n\r\n  get widget() {\r\n    return this._widget;\r\n  }\r\n\r\n  set widget(newWidget) {\r\n    this._widget = newWidget;\r\n  }\r\n\r\n  get parent() {\r\n    return this._parent;\r\n  }\r\n\r\n  set parent(p) {\r\n    this._parent = p;\r\n  }\r\n\r\n  get children() {\r\n    return this._children;\r\n  }\r\n\r\n  get depth() {\r\n    return this._depth;\r\n  }\r\n\r\n  get id() {\r\n    return this._id;\r\n  }\r\n\r\n  get mounted() {\r\n    return this._mounted;\r\n  }\r\n\r\n  get dirty() {\r\n    return this._dirty;\r\n  }\r\n\r\n  get building() {\r\n    return this._building;\r\n  }\r\n\r\n  get vnode() {\r\n    return this._vnode;\r\n  }\r\n\r\n  set vnode(v) {\r\n    this._vnode = v;\r\n  }\r\n\r\n  get domNode() {\r\n    return this._domNode;\r\n  }\r\n\r\n  set domNode(d) {\r\n    this._domNode = d;\r\n  }\r\n\r\n  get context() {\r\n    if (!this._context) {\r\n      this._context = new BuildContext(this, this.runtime);\r\n    }\r\n    return this._context;\r\n  }\r\n\r\n  // ============================================================================\r\n  // CORE METHODS\r\n  // ============================================================================\r\n\r\n  getElementId() {\r\n    return this._id;\r\n  }\r\n\r\n  getWidgetPath() {\r\n    if (this._widgetPath) return this._widgetPath;\r\n\r\n    const name = this.widget?.constructor?.name || 'Unknown';\r\n    const parentPath = this.parent?.getWidgetPath ? this.parent.getWidgetPath() : '';\r\n\r\n    this._widgetPath = parentPath ? `${parentPath}/${name}` : name;\r\n    return this._widgetPath;\r\n  }\r\n\r\n  getIdentificationStrategy() {\r\n    return this.key ? 'key' : 'id';\r\n  }\r\n\r\n  performRebuild() {\r\n    throw new Error(`${this.constructor.name}.performRebuild() must be implemented by subclass`);\r\n  }\r\n\r\n  mount(parent = null) {\r\n    if (this._mounted) {\r\n      console.warn(`[Element] ${this._id} already mounted`);\r\n      return;\r\n    }\r\n\r\n    try {\r\n      this._mounted = true;\r\n\r\n      if (parent) {\r\n        this._parent = parent;\r\n        this._depth = (parent._depth || 0) + 1;\r\n      }\r\n\r\n      this._vnode = this.performRebuild();\r\n\r\n      this._children.forEach(child => {\r\n        if (!child._mounted) {\r\n          child.mount(this);\r\n        }\r\n      });\r\n\r\n      this.didMount();\r\n\r\n      // Mark that initial mount is complete\r\n      // This prevents applyChanges from running on the first rebuild after mount\r\n      this._initialMountComplete = true;\r\n    } catch (error) {\r\n      this._mounted = false;\r\n      throw new Error(`Failed to mount ${this.constructor.name}: ${error.message}`);\r\n    }\r\n  }\r\n\r\n  rebuild() {\r\n    if (!this._mounted) {\r\n      console.warn(`[Element] Cannot rebuild unmounted element ${this._id}`);\r\n      return;\r\n    }\r\n\r\n    if (this._building) {\r\n      console.warn(`[Element] Recursive rebuild detected for ${this._id}`);\r\n      return;\r\n    }\r\n\r\n    try {\r\n      this._building = true;\r\n\r\n      console.log(`\uD83D\uDD04 [Element.rebuild] START for ${this._id} (${this.widget?.constructor?.name})`);\r\n      console.log(`   _shouldPatch BEFORE performRebuild:`, this._shouldPatch);\r\n\r\n      const oldVNode = this._vnode;\r\n      console.log(`   oldVNode:`, oldVNode?.tag, oldVNode?._element);\r\n\r\n      this._vnode = this.performRebuild();\r\n\r\n      console.log(`   newVNode:`, this._vnode?.tag, this._vnode?._element);\r\n      console.log(`   _shouldPatch AFTER performRebuild:`, this._shouldPatch);\r\n\r\n      // Only apply changes if this element is responsible for patching\r\n      // AND this is not the first rebuild after mount\r\n      if (this._shouldPatch && this._initialMountComplete) {\r\n        console.log(`\u2705 [Element.rebuild] Calling applyChanges for ${this._id}`);\r\n        this.applyChanges(oldVNode, this._vnode);\r\n      } else {\r\n        if (!this._initialMountComplete) {\r\n          console.log(`\u23ED\uFE0F [Element.rebuild] Skipping applyChanges for ${this._id} (first rebuild after mount)`);\r\n        } else if (!oldVNode) {\r\n          console.log(`\u23ED\uFE0F [Element.rebuild] Skipping applyChanges for ${this._id} (initial mount, oldVNode is null)`);\r\n        } else {\r\n          console.log(`\u23ED\uFE0F [Element.rebuild] Skipping applyChanges for ${this._id} (_shouldPatch = false)`);\r\n        }\r\n        // If delegating, we still need to update our DOM reference from the child's result\r\n        if (this._vnode && this._vnode._element) {\r\n          this._domNode = this._vnode._element;\r\n        }\r\n      }\r\n\r\n      this._dirty = false; // Mark clean regardless\r\n    } catch (error) {\r\n      console.error(`[Element] Rebuild failed for ${this._id}:`, error);\r\n      throw error;\r\n    } finally {\r\n      this._building = false;\r\n    }\r\n  }\r\n\r\n  applyChanges(oldVNode, newVNode) {\r\n    console.log(`[Element.applyChanges] START for ${this._id} (${this.widget?.constructor.name})`);\r\n    console.log(`  oldVNode:`, {\r\n      tag: oldVNode?.tag,\r\n      hasElement: !!oldVNode?._element,\r\n      element: oldVNode?._element?.tagName\r\n    });\r\n    console.log(`  newVNode:`, {\r\n      tag: newVNode?.tag,\r\n      hasElement: !!newVNode?._element,\r\n      element: newVNode?._element?.tagName\r\n    });\r\n\r\n    if (this.runtime.config && this.runtime.config.debugMode) {\r\n      console.log(`[Element] Applied changes to ${this._id}`);\r\n    }\r\n\r\n    // \u2705 CRITICAL FIX: Handle case where BOTH VNodes have no DOM elements\r\n    // This happens with Navigator - the VNodes are wrappers without real DOM\r\n    // IMPORTANT: Only do this AFTER the first applyChanges (not during initial render)\r\n    if (this._hasAppliedChanges && oldVNode && newVNode && !oldVNode?._element && !newVNode?._element && this.runtime.renderer) {\r\n      // Check if VNodes are actually different (children changed)\r\n      const oldChildren = oldVNode.children || [];\r\n      const newChildren = newVNode.children || [];\r\n      const childrenChanged = oldChildren.length !== newChildren.length ||\r\n        JSON.stringify(oldChildren) !== JSON.stringify(newChildren);\r\n\r\n      if (childrenChanged) {\r\n        console.log(`[Element] \uD83D\uDD04 Both VNodes have no DOM but children changed - forcing full re-render`);\r\n\r\n        try {\r\n          // Find the root DOM node from this element or parent\r\n          let targetElement = this._domNode;\r\n\r\n          if (!targetElement && this._parent) {\r\n            // Try to get parent's DOM node\r\n            targetElement = this._parent._domNode;\r\n          }\r\n\r\n          if (!targetElement) {\r\n            // Last resort: find from document\r\n            const rootElement = document.getElementById('root');\r\n            if (rootElement && rootElement.firstChild) {\r\n              targetElement = rootElement.firstChild;\r\n            }\r\n          }\r\n\r\n          if (targetElement) {\r\n            console.log(`[Element] \uD83C\uDFA8 Found target element, rendering new VNode`);\r\n\r\n            // Clear the target and render new VNode\r\n            targetElement.innerHTML = '';\r\n            this.runtime.renderer.render(newVNode, targetElement);\r\n\r\n            // Update VNode reference\r\n            newVNode._element = targetElement.firstChild;\r\n            if (newVNode._element) {\r\n              newVNode._element._vnode = newVNode;\r\n              this._domNode = newVNode._element;\r\n            }\r\n\r\n            console.log(`[Element] \u2705 Successfully re-rendered for VNode change`);\r\n            return;\r\n          } else {\r\n            console.warn(`[Element] \u26A0\uFE0F Could not find target element for re-render`);\r\n          }\r\n        } catch (error) {\r\n          console.error(`[Element] \u274C Failed to re-render:`, error);\r\n        }\r\n      } else {\r\n        console.log(`[Element] \u2139\uFE0F Both VNodes have no DOM but children unchanged - skipping re-render`);\r\n      }\r\n    }\r\n\r\n    // \u2705 CRITICAL FIX: Handle case where new VNode has no DOM element\r\n    // This happens when widget type changes (e.g., HomeScreen \u2192 DetailsScreen)\r\n    // IMPORTANT: Only apply during navigation (when mounted), NOT during initial mount\r\n    if (this._mounted && oldVNode && oldVNode._element && !newVNode._element && this.runtime.renderer) {\r\n      console.log(`[Element] \uD83D\uDD04 Widget type changed - rendering new VNode and replacing DOM`);\r\n\r\n      try {\r\n        const oldDomNode = oldVNode._element;\r\n        const parentNode = oldDomNode.parentNode;\r\n\r\n        if (parentNode) {\r\n          // Create temporary container to render new VNode\r\n          const tempContainer = document.createElement('div');\r\n\r\n          // Render new VNode to temp container\r\n          this.runtime.renderer.render(newVNode, tempContainer);\r\n\r\n          // Get the rendered DOM node\r\n          const newDomNode = tempContainer.firstChild;\r\n\r\n          if (newDomNode) {\r\n            // Replace old DOM with new DOM\r\n            parentNode.replaceChild(newDomNode, oldDomNode);\r\n\r\n            // Update VNode's DOM reference\r\n            newVNode._element = newDomNode;\r\n            newDomNode._vnode = newVNode;\r\n\r\n            // Update element's DOM reference\r\n            if (this._domNode === oldDomNode) {\r\n              this._domNode = newDomNode;\r\n            }\r\n\r\n            console.log(`[Element] \u2705 Successfully replaced DOM for widget type change`);\r\n            return;\r\n          }\r\n        }\r\n      } catch (error) {\r\n        console.error(`[Element] \u274C Failed to replace DOM for widget type change:`, error);\r\n      }\r\n    } else if (oldVNode && oldVNode._element && newVNode._element) {\r\n      console.log(`[Element] \u2139\uFE0F Both VNodes have DOM elements - using normal patching`);\r\n    }\r\n\r\n    // \u2705 DIRECT DOM PATCHING to preserve state\r\n    if (oldVNode && oldVNode._element && this.runtime.renderer) {\r\n\r\n      // \u2705 TRY DIFFING FIRST (Fine-grained updates)\r\n      if (oldVNode._element.parentNode) {\r\n        try {\r\n          const domNode = oldVNode._element;\r\n          const parent = domNode.parentNode;\r\n          // Find index of current node\r\n          const index = Array.from(parent.childNodes).indexOf(domNode);\r\n\r\n          if (index !== -1) {\r\n            if (this.runtime.config && this.runtime.config.debugMode) {\r\n              console.log(`[Element] Diffing at index ${index}`);\r\n            }\r\n\r\n            // Generate patches\r\n            const patches = VNodeDiffer.diff(oldVNode, newVNode, index);\r\n\r\n            if (patches.length > 0) {\r\n              console.log(`[Element] Applying ${patches.length} patches to ${this._id} (${this.widget?.constructor.name})`);\r\n              patches.forEach(p => console.log(`   - Patch: ${p.type} at index ${p.index}, content:`, p.content));\r\n\r\n              // Apply patches\r\n              const result = PatchApplier.apply(parent, patches);\r\n              if (!result.success) {\r\n                console.error('[Element] PatchApplier failed:', result.errors);\r\n              } else {\r\n                console.log('[Element] Patches applied successfully');\r\n              }\r\n\r\n              // \u2705 CRITICAL FIX: Ensure newVNode gets the DOM reference\r\n              if (!newVNode._element) {\r\n                newVNode._element = oldVNode._element;\r\n              }\r\n\r\n              // Update local DOM reference if the root node was replaced or just carried over\r\n              if (this._domNode === domNode) {\r\n                this._domNode = newVNode._element;\r\n              }\r\n            } else {\r\n              console.log(`[Element] No patches generated for ${this._id} (${this.widget?.constructor.name})`);\r\n              // No changes, but ensure new VNode has element reference\r\n              newVNode._element = oldVNode._element;\r\n              if (newVNode._element) {\r\n                newVNode._element._vnode = newVNode;\r\n              }\r\n            }\r\n            return; // \u2705 Success, skip fallback\r\n          }\r\n        } catch (e) {\r\n          console.warn('[Element] Diffing failed, falling back to replace', e);\r\n        }\r\n      }\r\n\r\n      // \u26A0\uFE0F FALLBACK: Coarse-grained update (Full Replacement)\r\n      // This happens if diffing fails or element has no parent\r\n      if (this.runtime.config && this.runtime.config.debugMode) {\r\n        console.log(`[Element] Fallback: Replacing DOM for ${this._id}`);\r\n      }\r\n\r\n      try {\r\n        const newDomNode = this.runtime.renderer.replaceElement(oldVNode._element, newVNode);\r\n\r\n        if (this._domNode === oldVNode._element) {\r\n          this._domNode = newDomNode;\r\n        }\r\n      } catch (e) {\r\n        console.error(`[Element] Failed to patch DOM for ${this._id}:`, e);\r\n      }\r\n    }\r\n\r\n    // Mark that applyChanges has been called at least once\r\n    this._hasAppliedChanges = true;\r\n  }\r\n\r\n  markNeedsBuild() {\r\n    if (this._dirty) {\r\n      return;\r\n    }\r\n\r\n    if (!this._mounted) {\r\n      console.warn(`[Element] Cannot mark unmounted element ${this._id} dirty`);\r\n      return;\r\n    }\r\n\r\n    this._dirty = true;\r\n\r\n    console.log(`\uD83D\uDD0D [Element.markNeedsBuild] Called for ${this._id} (${this.widget?.constructor?.name})`);\r\n    console.trace('Call stack:');\r\n\r\n    if (this.runtime && this.runtime.markNeedsBuild) {\r\n      this.runtime.markNeedsBuild(this);\r\n    }\r\n  }\r\n\r\n  unmount() {\r\n    if (!this._mounted) {\r\n      return;\r\n    }\r\n\r\n    try {\r\n      this.willUnmount();\r\n\r\n      this._children.forEach(child => {\r\n        if (child._mounted) {\r\n          child.unmount();\r\n        }\r\n      });\r\n\r\n      this._children = [];\r\n      this._childMap.clear();\r\n      this._vnode = null;\r\n      this._domNode = null;\r\n\r\n      this._mounted = false;\r\n      this._dirty = false;\r\n\r\n      this.didUnmount();\r\n    } catch (error) {\r\n      console.error(`[Element] Unmount failed for ${this._id}:`, error);\r\n    }\r\n  }\r\n\r\n  updateWidget(newWidget) {\r\n    if (!newWidget) {\r\n      throw new Error('New widget is required for update');\r\n    }\r\n\r\n    const oldWidget = this._widget;\r\n    this.widget = newWidget;\r\n\r\n    if (this.shouldRebuild(oldWidget, newWidget)) {\r\n      this.markNeedsBuild();\r\n    }\r\n\r\n    this.didUpdateWidget(oldWidget, newWidget);\r\n  }\r\n\r\n  shouldRebuild(oldWidget, newWidget) {\r\n    if (oldWidget === newWidget) {\r\n      return false;\r\n    }\r\n\r\n    if (oldWidget.constructor !== newWidget.constructor) {\r\n      return true;\r\n    }\r\n\r\n    return !this.areWidgetsEqual(oldWidget, newWidget);\r\n  }\r\n\r\n  areWidgetsEqual(w1, w2) {\r\n    if (w1.constructor !== w2.constructor) {\r\n      return false;\r\n    }\r\n\r\n    const keys1 = Object.keys(w1);\r\n    const keys2 = Object.keys(w2);\r\n\r\n    if (keys1.length !== keys2.length) {\r\n      return false;\r\n    }\r\n\r\n    return keys1.every(key => {\r\n      const val1 = w1[key];\r\n      const val2 = w2[key];\r\n\r\n      if (typeof val1 === 'function' && typeof val2 === 'function') {\r\n        return true;\r\n      }\r\n\r\n      if (typeof val1 === 'object' && typeof val2 === 'object') {\r\n        try {\r\n          return JSON.stringify(val1) === JSON.stringify(val2);\r\n        } catch {\r\n          return false;\r\n        }\r\n      }\r\n\r\n      return val1 === val2;\r\n    });\r\n  }\r\n\r\n  addChild(child) {\r\n    if (!child) {\r\n      throw new Error('Child element is required');\r\n    }\r\n\r\n    this._children.push(child);\r\n\r\n    if (child.key) {\r\n      this._childMap.set(child.key, child);\r\n    }\r\n\r\n    child.parent = this;\r\n  }\r\n\r\n  removeChild(child) {\r\n    const index = this._children.indexOf(child);\r\n\r\n    if (index !== -1) {\r\n      this._children.splice(index, 1);\r\n    }\r\n\r\n    if (child.key) {\r\n      this._childMap.delete(child.key);\r\n    }\r\n\r\n    child.parent = null;\r\n  }\r\n\r\n  findChildByKey(key) {\r\n    return this._childMap.get(key);\r\n  }\r\n\r\n  findAncestorOfType(ElementType) {\r\n    let current = this._parent;\r\n\r\n    while (current) {\r\n      if (current instanceof ElementType) {\r\n        return current;\r\n      }\r\n      current = current._parent;\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  visitAncestors(visitor) {\r\n    let current = this._parent;\r\n\r\n    while (current) {\r\n      const shouldContinue = visitor(current);\r\n      if (shouldContinue === false) {\r\n        break;\r\n      }\r\n      current = current._parent;\r\n    }\r\n  }\r\n\r\n  // ============================================================================\r\n  // LIFECYCLE HOOKS\r\n  // ============================================================================\r\n\r\n  didMount() {\r\n    // Override in subclasses\r\n  }\r\n\r\n  didUpdateWidget(oldWidget, newWidget) {\r\n    // Override in subclasses\r\n  }\r\n\r\n  willUnmount() {\r\n    // Override in subclasses\r\n  }\r\n\r\n  didUnmount() {\r\n    // Override in subclasses\r\n  }\r\n\r\n  reassemble() {\r\n    // Override in subclasses\r\n  }\r\n\r\n  activate() {\r\n    // Override in subclasses\r\n  }\r\n\r\n  deactivate() {\r\n    // Override in subclasses\r\n  }\r\n\r\n  didChangeDependencies() {\r\n    // Override in subclasses\r\n  }\r\n\r\n  // ============================================================================\r\n  // UTILITIES\r\n  // ============================================================================\r\n\r\n  getStats() {\r\n    return {\r\n      id: this._id,\r\n      type: this.constructor.name,\r\n      mounted: this._mounted,\r\n      dirty: this._dirty,\r\n      depth: this._depth,\r\n      childCount: this._children.length,\r\n      buildCount: this._buildCount,\r\n      lastBuildDuration: this._lastBuildDuration,\r\n      hasKey: !!this.key\r\n    };\r\n  }\r\n\r\n  static generateId() {\r\n    return `el_${++Element._counter}`;\r\n  }\r\n\r\n  static resetCounter() {\r\n    Element._counter = 0;\r\n  }\r\n}\r\n\r\nElement._counter = 0;\r\n\r\n/**\r\n * StatelessElement - FIXED VERSION\r\n * \r\n * \u2705 KEY FIX: Returns result from widget.build(), NOT the Element\r\n */\r\nclass StatelessElement extends Element {\r\n  constructor(widget, parent, runtime) {\r\n    super(widget, parent, runtime);\r\n  }\r\n\r\n  /**\r\n   * Build the widget and return the result\r\n   * \u2705 CRITICAL: Use strict VNode detection\r\n   */\r\n  build() {\r\n    console.log('\uD83D\uDCE6 StatelessElement.build() START', {\r\n      widgetType: this.widget?.constructor.name,\r\n      widgetInstance: this.widget\r\n    });\r\n\r\n    const context = this.buildContext();\r\n\r\n    try {\r\n      // STEP 1: Call widget's build method\r\n      console.log('\uD83D\uDD28 Calling widget.build(context)...');\r\n      const result = this.widget.build(context);\r\n\r\n      console.log('\u2713 widget.build() returned:', {\r\n        resultType: typeof result,\r\n        resultConstructor: result?.constructor?.name,\r\n        hasTag: result?.tag !== undefined,\r\n        isString: typeof result === 'string',\r\n        isNull: result === null,\r\n      });\r\n\r\n      if (!result) {\r\n        console.warn('\u26A0\uFE0F Result is null/undefined');\r\n        throw new Error('StatelessWidget.build() returned null');\r\n      }\r\n\r\n      // \u2705 STRICT CHECK: Use isRealVNode() instead of just checking .tag\r\n      if (isRealVNode(result)) {\r\n        console.log('\u2705 Result is a REAL VNode, returning it directly');\r\n        this._shouldPatch = true; // We own this VNode\r\n        return result;\r\n      }\r\n\r\n      // \u2705 Check if it's a string/number/primitive\r\n      if (typeof result === 'string' || typeof result === 'number' || typeof result === 'boolean') {\r\n        console.log('\u2705 Result is a primitive:', result);\r\n        this._shouldPatch = true; // We own this primitive\r\n        return result;\r\n      }\r\n\r\n      // \u2705 Check if it's a Widget (has build method or createState)\r\n      if (isWidget(result)) {\r\n        console.log('\uD83D\uDD04 Result is a Widget, need to build recursively:', result.constructor.name);\r\n\r\n        let childElement = this._children[0];\r\n\r\n        // \u2705 RECONCILIATION: Check if we can reuse the existing element\r\n        if (childElement && childElement.widget.constructor === result.constructor && childElement.widget.key === result.key) {\r\n          console.log('\u267B\uFE0F Reusing existing child element for:', result.constructor.name);\r\n\r\n          // \u2705 CRITICAL FIX: Only rebuild if widget actually changed\r\n          const oldWidget = childElement.widget;\r\n          childElement.widget = result; // Update widget reference\r\n\r\n          // Check if rebuild is needed\r\n          if (childElement.shouldRebuild(oldWidget, result)) {\r\n            console.log('\uD83D\uDD04 Widget changed, rebuilding child element');\r\n            childElement.rebuild();\r\n          } else {\r\n            console.log('\u2705 Widget unchanged, reusing existing vnode');\r\n          }\r\n\r\n          // Return existing vnode (either updated or reused)\r\n          return childElement.vnode;\r\n        }\r\n\r\n        // \u274C Cannot reuse: Unmount old child if exists\r\n        if (childElement) {\r\n          console.log('\uD83D\uDDD1\uFE0F Unmounting old child element:', childElement.constructor.name);\r\n          childElement.unmount();\r\n          this._children = [];\r\n        }\r\n\r\n        // \u2705 CRITICAL FIX: We need to patch the DOM because we're replacing the child\r\n        this._shouldPatch = true;\r\n\r\n        // Create element for this widget\r\n        childElement = this._createElementForWidget(result);\r\n\r\n        console.log('\u2705 Created child element:', childElement.constructor.name);\r\n\r\n        // \u2705 Add to children array so unmount() works\r\n        this._children = [childElement];\r\n\r\n        // \u2705 CRITICAL: Use mount() to properly initialize the child element\r\n        // This handles parent ref, depth, context, and state initialization\r\n        childElement.mount(this);\r\n\r\n        const childVNode = childElement.vnode;\r\n\r\n        if (!childVNode) {\r\n          throw new Error('Child element.build() returned null');\r\n        }\r\n\r\n        console.log('\u2705 Built new child widget, applyChanges will update DOM');\r\n        return childVNode;\r\n      }\r\n\r\n      // If we get here, it's an unknown type\r\n      console.warn('\u26A0\uFE0F Unknown result type from build():', result);\r\n      console.warn('   Constructor:', result?.constructor?.name);\r\n      console.warn('   Type:', typeof result);\r\n      console.warn('   Has .tag:', result?.tag);\r\n      console.warn('   Has .build:', typeof result?.build);\r\n\r\n      throw new Error(\r\n        `Invalid build() return type from ${this.widget.constructor.name}. ` +\r\n        `Expected: Widget, VNode, string, number, or null. ` +\r\n        `Got: ${result?.constructor?.name} with tag=\"${result?.tag}\"`\r\n      );\r\n\r\n    } catch (error) {\r\n      console.error('\u274C Build error:', error.message);\r\n      console.error('   Widget:', this.widget?.constructor.name);\r\n      throw new Error(`StatelessWidget build failed: ${error.message}`);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Helper to create appropriate element type for a widget\r\n   * @private\r\n   */\r\n  _createElementForWidget(widget) {\r\n    // \u2705 Use widget's createElement if available (InheritedWidget uses this)\r\n    // This avoids circular dependency with InheritedElement\r\n    if (widget && typeof widget.createElement === 'function') {\r\n      console.log('  Using widget.createElement() for:', widget.constructor.name);\r\n      return widget.createElement(this, this.runtime);\r\n    }\r\n\r\n    if (typeof widget.createState === 'function') {\r\n      console.log('  Creating StatefulElement for:', widget.constructor.name);\r\n      return new StatefulElement(widget, this, this.runtime);\r\n    } else if (widget.updateShouldNotify && typeof widget.updateShouldNotify === 'function') {\r\n      // InheritedWidget should have createElement defined, so this branch \r\n      // is a fallback. The widget MUST provide createElement for InheritedWidget.\r\n      console.error('  \u26A0\uFE0F InheritedWidget without createElement():', widget.constructor.name);\r\n      throw new Error(\r\n        `InheritedWidget \"${widget.constructor.name}\" must define createElement() method. ` +\r\n        `Extend InheritedWidget class properly.`\r\n      );\r\n    } else {\r\n      console.log('  Creating StatelessElement for:', widget.constructor.name);\r\n      return new StatelessElement(widget, this, this.runtime);\r\n    }\r\n  }\r\n\r\n  buildContext() {\r\n    return new BuildContext(this, this.runtime);\r\n  }\r\n\r\n  /**\r\n   * \u2705 CRITICAL: Implement performRebuild() to satisfy Element.mount() contract\r\n   * This method is called by Element.mount() and must return a VNode\r\n   */\r\n  performRebuild() {\r\n    return this.build();\r\n  }\r\n}\r\n\r\n/**\r\n * StatefulElement - FIXED VERSION\r\n * \r\n * \u2705 CRITICAL FIX: mount() now calls state._mount(this)\r\n * This properly initializes state._widget so this.widget works\r\n */\r\nclass StatefulElement extends Element {\r\n  constructor(widget, parent, runtime) {\r\n    super(widget, parent, runtime);\r\n\r\n    if (!widget.createState || typeof widget.createState !== 'function') {\r\n      throw new Error('StatefulWidget must implement createState()');\r\n    }\r\n\r\n    this.state = widget.createState();\r\n\r\n    if (!this.state) {\r\n      throw new Error('createState() returned null or undefined');\r\n    }\r\n\r\n    // \u2705 Set initial references (but _mount will do the proper initialization)\r\n    this.state._element = this;\r\n    this.state._widget = widget;\r\n    this.state._mounted = false;\r\n  }\r\n\r\n  build() {\r\n    console.log('\uD83D\uDCE6 StatefulElement.build() START', {\r\n      widgetType: this.widget?.constructor.name,\r\n      stateType: this.state?.constructor.name\r\n    });\r\n\r\n    const context = this.buildContext();\r\n\r\n    try {\r\n      if (!this.state.build || typeof this.state.build !== 'function') {\r\n        throw new Error('State must implement build() method');\r\n      }\r\n\r\n      console.log('\uD83D\uDD28 Calling state.build(context)...');\r\n      const result = this.state.build(context);\r\n\r\n      console.log('\u2713 state.build() returned:', {\r\n        resultType: typeof result,\r\n        resultConstructor: result?.constructor?.name,\r\n        isVNode: result?.tag !== undefined\r\n      });\r\n\r\n      if (!result) {\r\n        throw new Error('State.build() returned null');\r\n      }\r\n\r\n      // \u2705 STRICT CHECK: Use isRealVNode()\r\n      if (isRealVNode(result)) {\r\n        console.log('\u2705 Result is a REAL VNode, returning');\r\n        this._shouldPatch = true; // We own this VNode\r\n        return result;\r\n      }\r\n\r\n      // \u2705 Check if it's a primitive\r\n      if (typeof result === 'string' || typeof result === 'number' || typeof result === 'boolean') {\r\n        console.log('\u2705 Result is a primitive');\r\n        this._shouldPatch = true; // We own this primitive\r\n        return result;\r\n      }\r\n\r\n      // \u2705 Check if it's a widget and build recursively\r\n      let childElement = this._children[0];\r\n\r\n      if (isWidget(result)) {\r\n        console.log('\uD83D\uDD04 State.build() returned a Widget, building recursively:', result.constructor.name);\r\n\r\n        // \u2705 RECONCILIATION: Check if we can reuse the existing element\r\n        if (childElement && childElement.widget.constructor === result.constructor && childElement.widget.key === result.key) {\r\n          console.log('\u267B\uFE0F Reusing existing child element for:', result.constructor.name);\r\n\r\n          // \u2705 CRITICAL FIX: Only rebuild if widget actually changed\r\n          const oldWidget = childElement.widget;\r\n          childElement.widget = result; // Update widget reference\r\n\r\n          // Check if rebuild is needed\r\n          if (childElement.shouldRebuild(oldWidget, result)) {\r\n            console.log('\uD83D\uDD04 Widget changed, rebuilding child element');\r\n            childElement.rebuild();\r\n          } else {\r\n            console.log('\u2705 Widget unchanged, reusing existing vnode');\r\n          }\r\n\r\n          this._shouldPatch = false; // Child handled patching\r\n          return childElement.vnode;\r\n        }\r\n\r\n        // \u274C Cannot reuse: Unmount old child if exists\r\n        if (childElement) {\r\n          console.log('\uD83D\uDDD1\uFE0F Unmounting old child element:', childElement.constructor.name);\r\n          childElement.unmount();\r\n          this._children = [];\r\n        }\r\n\r\n        // \u2705 CRITICAL FIX: We need to patch the DOM because we're replacing the child\r\n        this._shouldPatch = true;\r\n\r\n        childElement = this._createElementForWidget(result);\r\n\r\n        // \u2705 Add to children array so unmount() works\r\n        this._children = [childElement];\r\n\r\n        // \u2705 CRITICAL: Use mount() to properly initialize the child element\r\n        childElement.mount(this);\r\n\r\n        const childVNode = childElement.vnode;\r\n\r\n\r\n        if (!childVNode) {\r\n          throw new Error('Child element.build() returned null');\r\n        }\r\n\r\n        console.log('\u2705 Built new child widget, applyChanges will update DOM');\r\n        return childVNode;\r\n      }\r\n\r\n      this._shouldPatch = false; // Should have been set above, but safe default for delegates\r\n      return childElement ? childElement.vnode : result; // Fallback\r\n\r\n      throw new Error(\r\n        `Invalid build() return type from ${this.widget.constructor.name} state. ` +\r\n        `Expected: Widget, VNode, string, number, or null.`\r\n      );\r\n\r\n    } catch (error) {\r\n      throw new Error(`StatefulWidget build failed: ${error.message}`);\r\n    }\r\n  }\r\n\r\n  _createElementForWidget(widget) {\r\n    // \u2705 Use widget's createElement if available\r\n    if (widget && typeof widget.createElement === 'function') {\r\n      return widget.createElement(this, this.runtime);\r\n    }\r\n\r\n    if (typeof widget.createState === 'function') {\r\n      return new StatefulElement(widget, this, this.runtime);\r\n    } else if (widget.updateShouldNotify && typeof widget.updateShouldNotify === 'function') {\r\n      return new InheritedElement(widget, this, this.runtime);\r\n    } else {\r\n      return new StatelessElement(widget, this, this.runtime);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * \u2705\u2705\u2705 CRITICAL FIX: Call state._mount() to properly initialize state\r\n   * This ensures this.widget is available in State\r\n   */\r\n  mount() {\r\n    // \u2705 CRITICAL FIX: Prevent double mounting\r\n    if (this._mounted) {\r\n      console.warn(`[StatefulElement] ${this._id} already mounted, skipping duplicate mount`);\r\n      return;\r\n    }\r\n\r\n    console.log('\uD83D\uDE80 StatefulElement.mount() called');\r\n    console.log('   Widget:', this.widget?.constructor?.name);\r\n    console.log('   State:', this.state?.constructor?.name);\r\n    console.log('   State has _mount:', typeof this.state._mount === 'function');\r\n\r\n    // \u2705 CRITICAL: Call state._mount() if available\r\n    if (this.state._mount && typeof this.state._mount === 'function') {\r\n      console.log('\u2705 Calling state._mount(this)...');\r\n      this.state._mount(this);\r\n      console.log('\u2705 state._mount() complete');\r\n    } else {\r\n      // Fallback for old State implementations that don't have _mount()\r\n      console.log('\u26A0\uFE0F State does not have _mount(), using fallback initialization');\r\n\r\n      // Manually set state properties\r\n      this.state._element = this;\r\n      this.state._widget = this.widget;\r\n      this.state._mounted = true;\r\n\r\n      // Call initState manually\r\n      if (this.state.initState && typeof this.state.initState === 'function') {\r\n        try {\r\n          console.log('\uD83C\uDFAC Calling initState()...');\r\n          this.state.initState();\r\n        } catch (error) {\r\n          console.error(`[StatefulElement] initState failed:`, error);\r\n        }\r\n      }\r\n    }\r\n\r\n    // Verify state is properly initialized\r\n    console.log('\uD83D\uDD0D State after mount:', {\r\n      hasMounted: this.state._mounted,\r\n      hasElement: !!this.state._element,\r\n      hasWidget: !!this.state._widget,\r\n      widgetType: this.state._widget?.constructor?.name,\r\n      widgetTitle: this.state._widget?.title\r\n    });\r\n\r\n    // Call parent mount\r\n    super.mount();\r\n\r\n    console.log('\u2705 StatefulElement.mount() complete');\r\n  }\r\n\r\n  buildContext() {\r\n    return new BuildContext(this, this.runtime, this.state);\r\n  }\r\n\r\n  /**\r\n   * \u2705 Update widget reference when widget changes\r\n   */\r\n  updateWidget(newWidget) {\r\n    console.log('\uD83D\uDD04 StatefulElement.updateWidget() called');\r\n\r\n    const oldWidget = this._widget;\r\n\r\n    // Update element's widget\r\n    super.updateWidget(newWidget);\r\n\r\n    // \u2705 Update state's widget reference\r\n    if (this.state._updateWidget && typeof this.state._updateWidget === 'function') {\r\n      console.log('\u2705 Calling state._updateWidget()');\r\n      this.state._updateWidget(newWidget);\r\n    } else {\r\n      // Fallback\r\n      console.log('\u26A0\uFE0F State does not have _updateWidget(), updating directly');\r\n      this.state._widget = newWidget;\r\n    }\r\n\r\n    // Call state's didUpdateWidget\r\n    if (this.state.didUpdateWidget && typeof this.state.didUpdateWidget === 'function') {\r\n      try {\r\n        this.state.didUpdateWidget(oldWidget);\r\n      } catch (error) {\r\n        console.error('[StatefulElement] didUpdateWidget failed:', error);\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * \u2705 Properly unmount state\r\n   */\r\n  unmount() {\r\n    console.log('\uD83D\uDED1 StatefulElement.unmount() called');\r\n\r\n    // Call state._unmount if available\r\n    if (this.state._unmount && typeof this.state._unmount === 'function') {\r\n      this.state._unmount();\r\n    }\r\n\r\n    // Call state.dispose\r\n    if (this.state._dispose && typeof this.state._dispose === 'function') {\r\n      this.state._dispose();\r\n    }\r\n\r\n    super.unmount();\r\n  }\r\n\r\n  /**\r\n   * \u2705 CRITICAL: Implement performRebuild() to satisfy Element.mount() contract\r\n   * This method is called by Element.mount() and must return a VNode\r\n   */\r\n  performRebuild() {\r\n    return this.build();\r\n  }\r\n}\r\n\r\n/**\r\n * ComponentElement - Custom components\r\n */\r\nclass ComponentElement extends Element {\r\n  constructor(widget, parent, runtime) {\r\n    super(widget, parent, runtime);\r\n    this.componentState = {};\r\n  }\r\n\r\n  build() {\r\n    const method = this.widget.render || this.widget.build;\r\n\r\n    if (!method || typeof method !== 'function') {\r\n      throw new Error('ComponentElement widget must have render() or build() method');\r\n    }\r\n\r\n    const context = this.buildContext();\r\n\r\n    try {\r\n      const result = method.call(this.widget, context);\r\n\r\n      // \u2705 Check if VNode\r\n      if (result && typeof result === 'object' && result.tag) {\r\n        return result;\r\n      }\r\n\r\n      if (typeof result === 'string' || typeof result === 'number') {\r\n        return result;\r\n      }\r\n\r\n      const isWidget = result &&\r\n        typeof result === 'object' &&\r\n        (typeof result.build === 'function' || typeof result.createState === 'function');\r\n\r\n      if (isWidget) {\r\n        const childElement = this._createElementForWidget(result);\r\n\r\n        childElement._parent = this;\r\n        childElement._depth = this._depth + 1;\r\n        childElement._mounted = true;\r\n\r\n        return childElement.build();\r\n      }\r\n\r\n      return result;\r\n    } catch (error) {\r\n      throw new Error(`Component build failed: ${error.message}`);\r\n    }\r\n  }\r\n\r\n  _createElementForWidget(widget) {\r\n    // \u2705 Use widget's createElement if available\r\n    if (widget && typeof widget.createElement === 'function') {\r\n      return widget.createElement(this, this.runtime);\r\n    }\r\n\r\n    if (typeof widget.createState === 'function') {\r\n      return new StatefulElement(widget, this, this.runtime);\r\n    } else {\r\n      return new StatelessElement(widget, this, this.runtime);\r\n    }\r\n  }\r\n\r\n  buildContext() {\r\n    return {\r\n      element: this,\r\n      runtime: this.runtime,\r\n      widget: this.widget,\r\n      state: this.componentState,\r\n\r\n      setState: (updates) => {\r\n        Object.assign(this.componentState, updates);\r\n        this.markNeedsBuild();\r\n      }\r\n    };\r\n  }\r\n\r\n  /**\r\n   * \u2705 CRITICAL: Implement performRebuild() to satisfy Element.mount() contract\r\n   * This method is called by Element.mount() and must return a VNode\r\n   */\r\n  performRebuild() {\r\n    return this.build();\r\n  }\r\n}\r\n\r\n// Initialize static ID counter\r\nElement._nextId = 0;\r\n\r\nexport {\r\n  Element,\r\n  StatelessElement,\r\n  StatefulElement,\r\n  ComponentElement,\r\n  DiagnosticLevel,\r\n  isRealVNode, isWidget\r\n};"],
-  "mappings": "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",
-  "names": ["BuildContext", "VNodeDiffer", "PatchApplier", "DiagnosticLevel", "DiagnosticsTreeStyle", "Diagnosticable", "name", "style", "properties", "isRealVNode", "obj", "hasTag", "hasChildren", "hasProps", "isNotWidget", "isWidget", "Element", "widget", "parent", "runtime", "newWidget", "p", "v", "d", "parentPath", "child", "error", "oldVNode", "newVNode", "oldChildren", "newChildren", "targetElement", "rootElement", "oldDomNode", "parentNode", "tempContainer", "newDomNode", "domNode", "index", "patches", "result", "e", "oldWidget", "w1", "w2", "keys1", "keys2", "key", "val1", "val2", "ElementType", "current", "visitor", "StatelessElement", "context", "childElement", "childVNode", "StatefulElement", "ComponentElement", "method", "updates"]
-}
diff --git a/packages/flutterjs_engine/src/runtime/dist/event_system.js b/packages/flutterjs_engine/src/runtime/dist/event_system.js
deleted file mode 100644
index 4463b2ae..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/event_system.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class o{constructor(e,t,s,r){this.nativeEvent=e,this.type=t,this.target=s,this.currentTarget=r,this._propagationStopped=!1,this._immediatePropagationStopped=!1,this._defaultPrevented=!1,this.timeStamp=e.timeStamp||Date.now(),this.bubbles=e.bubbles||!1,this.cancelable=e.cancelable||!1,this.clientX=e.clientX||0,this.clientY=e.clientY||0,this.pageX=e.pageX||0,this.pageY=e.pageY||0,this.screenX=e.screenX||0,this.screenY=e.screenY||0,this.button=e.button!==void 0?e.button:-1,this.buttons=e.buttons||0,this.altKey=e.altKey||!1,this.ctrlKey=e.ctrlKey||!1,this.metaKey=e.metaKey||!1,this.shiftKey=e.shiftKey||!1,this.key=e.key||"",this.code=e.code||"",this.keyCode=e.keyCode||0,this.which=e.which||0,this.value=e.target?.value||"",this.checked=e.target?.checked||!1,this.touches=e.touches||[],this.changedTouches=e.changedTouches||[],this.targetTouches=e.targetTouches||[]}preventDefault(){this._defaultPrevented=!0,this.nativeEvent.preventDefault&&this.nativeEvent.preventDefault()}get defaultPrevented(){return this._defaultPrevented}stopPropagation(){this._propagationStopped=!0,this.nativeEvent.stopPropagation&&this.nativeEvent.stopPropagation()}stopImmediatePropagation(){this._immediatePropagationStopped=!0,this._propagationStopped=!0,this.nativeEvent.stopImmediatePropagation&&this.nativeEvent.stopImmediatePropagation()}get isPropagationStopped(){return this._propagationStopped}get isImmediatePropagationStopped(){return this._immediatePropagationStopped}toString(){return`SyntheticEvent(${this.type} @ ${this.target?.tagName||"unknown"})`}}class g{constructor(e,t={}){if(!e)throw new Error("Runtime is required for EventSystem");this.runtime=e,this.config={enableDebug:t.enableDebug||!1,enableCapture:t.enableCapture!==!1,enableBubble:t.enableBubble!==!1,maxEventListeners:t.maxEventListeners||1e4,eventPoolSize:t.eventPoolSize||100,...t},this.rootElement=null,this.handlerRegistry=new Map,this.delegatedEvents=new Set(["click","dblclick","mousedown","mouseup","mousemove","mouseover","mouseout","mouseenter","mouseleave","touchstart","touchend","touchmove","touchcancel","pointerdown","pointerup","pointermove","pointerenter","pointerleave","keydown","keyup","keypress","focus","blur","input","change","submit","reset","scroll","resize","dragstart","drag","dragover","drop","contextmenu"]),this.nativeListeners=new Map,this.stats={handlersRegistered:0,handlersUnregistered:0,eventsDispatched:0,eventsCancelled:0,propagationStopped:0,averageListenerCount:0},this.eventPool=[],this.initialized=!1,this.config.enableDebug&&console.log("[EventSystem] Created")}initialize(e){if(!e||!(e instanceof HTMLElement))throw new Error("Root element must be a valid HTMLElement");if(this.initialized){console.warn("[EventSystem] Already initialized, skipping");return}this.rootElement=e,this.delegatedEvents.forEach(t=>{const s=this.createDelegatedListener(t);e.addEventListener(t,s,!0),this.nativeListeners.set(t,s),this.config.enableDebug&&console.log(`[EventSystem] Delegated listener attached for '${t}'`)}),this.initialized=!0,this.config.enableDebug&&console.log(`[EventSystem] Initialized with ${this.delegatedEvents.size} delegated events`)}createDelegatedListener(e){return t=>{this.stats.eventsDispatched++;let s=t.target;for(;s&&s!==this.rootElement;){const r=s.dataset?.elementId;if(r&&(this.dispatchToHandlers(r,e,t),t._stopPropagation))break;s=s.parentElement}}}dispatchToHandlers(e,t,s){const r=this.handlerRegistry.get(e);if(!r||!r[t])return;const i=r[t],n=s.target,a=new o(s,t,n,n);for(const h of i){if(a.isImmediatePropagationStopped)break;try{h(a)}catch(d){console.error(`[EventSystem] Handler error for ${t} on element ${e}:`,d)}}a.isPropagationStopped&&(s._stopPropagation=!0,s.stopPropagation()),a.defaultPrevented&&s.preventDefault()}registerHandler(e,t,s){if(!e||typeof e!="string")throw new Error("Element ID must be a non-empty string");if(!t||typeof t!="string")throw new Error("Event type must be a non-empty string");if(typeof s!="function")throw new Error("Handler must be a function");this.handlerRegistry.has(e)||this.handlerRegistry.set(e,{});const r=this.handlerRegistry.get(e);r[t]||(r[t]=[]);const i=r[t];i.length>=this.config.maxEventListeners&&console.warn(`[EventSystem] Max event listeners (${this.config.maxEventListeners}) reached for element ${e} event ${t}`),i.push(s),this.stats.handlersRegistered++,this.config.enableDebug&&console.log(`[EventSystem] Registered handler for ${e}.${t} (total: ${i.length})`)}unregisterHandler(e,t,s){if(!e)return;const r=this.handlerRegistry.get(e);if(!r)return;if(!t){this.handlerRegistry.delete(e),this.stats.handlersUnregistered+=Object.keys(r).length,this.config.enableDebug&&console.log(`[EventSystem] Unregistered all handlers for ${e}`);return}const i=r[t];if(!i)return;if(!s){const a=i.length;delete r[t],this.stats.handlersUnregistered+=a,this.config.enableDebug&&console.log(`[EventSystem] Unregistered ${a} handlers for ${e}.${t}`);return}const n=i.indexOf(s);n!==-1&&(i.splice(n,1),this.stats.handlersUnregistered++,this.config.enableDebug&&console.log(`[EventSystem] Unregistered handler for ${e}.${t} (remaining: ${i.length})`))}hasHandlers(e,t){const s=this.handlerRegistry.get(e);return s?t?(s[t]?.length||0)>0:Object.keys(s).length>0:!1}getHandlerCount(e,t){const s=this.handlerRegistry.get(e);return s?t?s[t]?.length||0:Object.values(s).reduce((r,i)=>r+i.length,0):0}getEventTypes(e){const t=this.handlerRegistry.get(e);return t?Object.keys(t):[]}batchRegister(e,t){if(!t||typeof t!="object")throw new Error("Handlers must be an object");Object.entries(t).forEach(([s,r])=>{typeof r=="function"&&this.registerHandler(e,s,r)})}batchUnregister(e){this.unregisterHandler(e)}dispatchCustomEvent(e,t,s={}){if(!e)throw new Error("Element is required");const r=new o(s.nativeEvent||new Event(t),t,e,e);Object.assign(r,s);const i=e.dataset?.elementId;i&&this.dispatchToHandlers(i,t,r.nativeEvent)}getStats(){const e=Array.from(this.handlerRegistry.values()).reduce((t,s)=>t+Object.values(s).reduce((r,i)=>r+i.length,0),0);return{...this.stats,initialized:this.initialized,delegatedEventsCount:this.delegatedEvents.size,elementsWithHandlers:this.handlerRegistry.size,totalHandlers:e,nativeListenersAttached:this.nativeListeners.size,averageHandlersPerElement:this.handlerRegistry.size>0?Math.round(e/this.handlerRegistry.size):0}}getDetailedInfo(e){if(e){const s=this.handlerRegistry.get(e);return{elementId:e,handlers:s?{...s}:{},hasHandlers:!!s}}const t={};return this.handlerRegistry.forEach((s,r)=>{t[r]={...s}}),{totalElements:this.handlerRegistry.size,elements:t}}clearElement(e){if(!e)return;const t=this.getHandlerCount(e);this.unregisterHandler(e),this.config.enableDebug&&t>0&&console.log(`[EventSystem] Cleared ${t} handlers for element ${e}`)}clearAll(){const e=this.handlerRegistry.size,t=Array.from(this.handlerRegistry.values()).reduce((s,r)=>s+Object.values(r).reduce((i,n)=>i+n.length,0),0);this.handlerRegistry.clear(),this.eventPool=[],this.config.enableDebug&&console.log(`[EventSystem] Cleared ${t} handlers from ${e} elements`)}dispose(){this.rootElement&&this.nativeListeners.forEach((e,t)=>{this.rootElement.removeEventListener(t,e,!0)}),this.clearAll(),this.nativeListeners.clear(),this.rootElement=null,this.initialized=!1,this.config.enableDebug&&console.log("[EventSystem] Disposed")}}export{g as EventSystem,o as SyntheticEvent};
-//# sourceMappingURL=event_system.js.map
diff --git a/packages/flutterjs_engine/src/runtime/dist/event_system.js.map b/packages/flutterjs_engine/src/runtime/dist/event_system.js.map
deleted file mode 100644
index 6e9ca49d..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/event_system.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/event_system.js"],
-  "sourcesContent": ["/**\r\n * FlutterJS Event System\r\n *\r\n * Manages event delegation, event handling, and propagation across the widget tree.\r\n * Uses event delegation at the root for efficient event management.\r\n *\r\n * Key Features:\r\n * - Event delegation (single root listener instead of per-element)\r\n * - Event bubbling and capturing\r\n * - Synthetic event objects\r\n * - Event handler registration/unregistration\r\n * - Gesture support (tap, long-press, swipe)\r\n * - Focus management\r\n * - Performance optimized for large DOMs\r\n *\r\n * Usage:\r\n * ```javascript\r\n * const eventSystem = new EventSystem(runtime);\r\n * eventSystem.initialize(rootElement);\r\n *\r\n * // Register handler\r\n * eventSystem.registerHandler(elementId, 'click', (event) => {\r\n *   console.log('Clicked!');\r\n * });\r\n * ```\r\n */\r\n\r\n/**\r\n * Synthetic Event Object\r\n *\r\n * Normalizes native browser events into a consistent format.\r\n * Provides cross-browser compatibility.\r\n */\r\nclass SyntheticEvent {\r\n  /**\r\n   * Create synthetic event\r\n   * @param {Event} nativeEvent - Native browser event\r\n   * @param {string} type - Event type\r\n   * @param {HTMLElement} target - Target element\r\n   * @param {HTMLElement} currentTarget - Current target\r\n   */\r\n  constructor(nativeEvent, type, target, currentTarget) {\r\n    this.nativeEvent = nativeEvent;\r\n    this.type = type;\r\n    this.target = target;\r\n    this.currentTarget = currentTarget;\r\n\r\n    // Event control flags\r\n    this._propagationStopped = false;\r\n    this._immediatePropagationStopped = false;\r\n    this._defaultPrevented = false;\r\n\r\n    // Time\r\n    this.timeStamp = nativeEvent.timeStamp || Date.now();\r\n\r\n    // Common properties\r\n    this.bubbles = nativeEvent.bubbles || false;\r\n    this.cancelable = nativeEvent.cancelable || false;\r\n\r\n    // Mouse/pointer properties\r\n    this.clientX = nativeEvent.clientX || 0;\r\n    this.clientY = nativeEvent.clientY || 0;\r\n    this.pageX = nativeEvent.pageX || 0;\r\n    this.pageY = nativeEvent.pageY || 0;\r\n    this.screenX = nativeEvent.screenX || 0;\r\n    this.screenY = nativeEvent.screenY || 0;\r\n\r\n    // Button information\r\n    this.button = nativeEvent.button !== undefined ? nativeEvent.button : -1;\r\n    this.buttons = nativeEvent.buttons || 0;\r\n\r\n    // Modifier keys\r\n    this.altKey = nativeEvent.altKey || false;\r\n    this.ctrlKey = nativeEvent.ctrlKey || false;\r\n    this.metaKey = nativeEvent.metaKey || false;\r\n    this.shiftKey = nativeEvent.shiftKey || false;\r\n\r\n    // Keyboard properties\r\n    this.key = nativeEvent.key || '';\r\n    this.code = nativeEvent.code || '';\r\n    this.keyCode = nativeEvent.keyCode || 0;\r\n    this.which = nativeEvent.which || 0;\r\n\r\n    // Input properties\r\n    this.value = nativeEvent.target?.value || '';\r\n    this.checked = nativeEvent.target?.checked || false;\r\n\r\n    // Touch properties\r\n    this.touches = nativeEvent.touches || [];\r\n    this.changedTouches = nativeEvent.changedTouches || [];\r\n    this.targetTouches = nativeEvent.targetTouches || [];\r\n  }\r\n\r\n  /**\r\n   * Prevent default action\r\n   */\r\n  preventDefault() {\r\n    this._defaultPrevented = true;\r\n    if (this.nativeEvent.preventDefault) {\r\n      this.nativeEvent.preventDefault();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Check if default prevented\r\n   */\r\n  get defaultPrevented() {\r\n    return this._defaultPrevented;\r\n  }\r\n\r\n  /**\r\n   * Stop event propagation\r\n   */\r\n  stopPropagation() {\r\n    this._propagationStopped = true;\r\n    if (this.nativeEvent.stopPropagation) {\r\n      this.nativeEvent.stopPropagation();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Stop immediate propagation\r\n   */\r\n  stopImmediatePropagation() {\r\n    this._immediatePropagationStopped = true;\r\n    this._propagationStopped = true;\r\n    if (this.nativeEvent.stopImmediatePropagation) {\r\n      this.nativeEvent.stopImmediatePropagation();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Check if propagation stopped\r\n   */\r\n  get isPropagationStopped() {\r\n    return this._propagationStopped;\r\n  }\r\n\r\n  /**\r\n   * Check if immediate propagation stopped\r\n   */\r\n  get isImmediatePropagationStopped() {\r\n    return this._immediatePropagationStopped;\r\n  }\r\n\r\n  /**\r\n   * Get event data for debugging\r\n   */\r\n  toString() {\r\n    return `SyntheticEvent(${this.type} @ ${this.target?.tagName || 'unknown'})`;\r\n  }\r\n}\r\n\r\n/**\r\n * Event System\r\n *\r\n * Manages all event handling for the application using delegation pattern.\r\n * Dramatically improves performance with large DOMs.\r\n */\r\nclass EventSystem {\r\n  /**\r\n   * Create event system\r\n   * @param {RuntimeEngine} runtime - Runtime engine reference\r\n   * @param {Object} options - Configuration options\r\n   */\r\n  constructor(runtime, options = {}) {\r\n    if (!runtime) {\r\n      throw new Error('Runtime is required for EventSystem');\r\n    }\r\n\r\n    this.runtime = runtime;\r\n\r\n    // Configuration\r\n    this.config = {\r\n      enableDebug: options.enableDebug || false,\r\n      enableCapture: options.enableCapture !== false,\r\n      enableBubble: options.enableBubble !== false,\r\n      maxEventListeners: options.maxEventListeners || 10000,\r\n      eventPoolSize: options.eventPoolSize || 100,\r\n      ...options\r\n    };\r\n\r\n    // Root element for delegation\r\n    this.rootElement = null;\r\n\r\n    // Handler registry: elementId -> { eventType -> handler[] }\r\n    this.handlerRegistry = new Map();\r\n\r\n    // Delegated event types\r\n    this.delegatedEvents = new Set([\r\n      'click', 'dblclick',\r\n      'mousedown', 'mouseup', 'mousemove', 'mouseover', 'mouseout',\r\n      'mouseenter', 'mouseleave',\r\n      'touchstart', 'touchend', 'touchmove', 'touchcancel',\r\n      'pointerdown', 'pointerup', 'pointermove', 'pointerenter', 'pointerleave',\r\n      'keydown', 'keyup', 'keypress',\r\n      'focus', 'blur',\r\n      'input', 'change', 'submit', 'reset',\r\n      'scroll', 'resize',\r\n      'dragstart', 'drag', 'dragover', 'drop',\r\n      'contextmenu'\r\n    ]);\r\n\r\n    // Native listeners attached at root\r\n    this.nativeListeners = new Map();\r\n\r\n    // Statistics\r\n    this.stats = {\r\n      handlersRegistered: 0,\r\n      handlersUnregistered: 0,\r\n      eventsDispatched: 0,\r\n      eventsCancelled: 0,\r\n      propagationStopped: 0,\r\n      averageListenerCount: 0\r\n    };\r\n\r\n    // Event pool for optimization (reuse event objects)\r\n    this.eventPool = [];\r\n\r\n    this.initialized = false;\r\n\r\n    if (this.config.enableDebug) {\r\n      console.log('[EventSystem] Created');\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Initialize event delegation on root element\r\n   * @param {HTMLElement} rootElement - Root DOM element\r\n   * @throws {Error} If root element not valid\r\n   */\r\n  initialize(rootElement) {\r\n    if (!rootElement || !(rootElement instanceof HTMLElement)) {\r\n      throw new Error('Root element must be a valid HTMLElement');\r\n    }\r\n\r\n    if (this.initialized) {\r\n      console.warn('[EventSystem] Already initialized, skipping');\r\n      return;\r\n    }\r\n\r\n    this.rootElement = rootElement;\r\n\r\n    // Attach delegated listeners at root\r\n    this.delegatedEvents.forEach(eventType => {\r\n      const listener = this.createDelegatedListener(eventType);\r\n\r\n      // Use capture for better control\r\n      rootElement.addEventListener(eventType, listener, true);\r\n\r\n      this.nativeListeners.set(eventType, listener);\r\n\r\n      if (this.config.enableDebug) {\r\n        console.log(`[EventSystem] Delegated listener attached for '${eventType}'`);\r\n      }\r\n    });\r\n\r\n    this.initialized = true;\r\n\r\n    if (this.config.enableDebug) {\r\n      console.log(`[EventSystem] Initialized with ${this.delegatedEvents.size} delegated events`);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Create delegated listener for event type\r\n   * @private\r\n   * @param {string} eventType - Event type (e.g., 'click')\r\n   * @returns {Function} Event listener function\r\n   */\r\n  createDelegatedListener(eventType) {\r\n    return (nativeEvent) => {\r\n      this.stats.eventsDispatched++;\r\n\r\n      let target = nativeEvent.target;\r\n\r\n      // Traverse up from target to root\r\n      while (target && target !== this.rootElement) {\r\n        const elementId = target.dataset?.elementId;\r\n\r\n        if (elementId) {\r\n          this.dispatchToHandlers(elementId, eventType, nativeEvent);\r\n\r\n          // Check if propagation stopped\r\n          if (nativeEvent._stopPropagation) {\r\n            break;\r\n          }\r\n        }\r\n\r\n        target = target.parentElement;\r\n      }\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Dispatch event to all handlers for element\r\n   * @private\r\n   * @param {string} elementId - Element ID\r\n   * @param {string} eventType - Event type\r\n   * @param {Event} nativeEvent - Native browser event\r\n   */\r\n  dispatchToHandlers(elementId, eventType, nativeEvent) {\r\n    const handlers = this.handlerRegistry.get(elementId);\r\n\r\n    if (!handlers || !handlers[eventType]) {\r\n      return;\r\n    }\r\n\r\n    const handlersArray = handlers[eventType];\r\n    const target = nativeEvent.target;\r\n\r\n    // Create synthetic event\r\n    const syntheticEvent = new SyntheticEvent(nativeEvent, eventType, target, target);\r\n\r\n    // Call each handler\r\n    for (const handler of handlersArray) {\r\n      if (syntheticEvent.isImmediatePropagationStopped) {\r\n        break;\r\n      }\r\n\r\n      try {\r\n        handler(syntheticEvent);\r\n      } catch (error) {\r\n        console.error(\r\n          `[EventSystem] Handler error for ${eventType} on element ${elementId}:`,\r\n          error\r\n        );\r\n      }\r\n    }\r\n\r\n    // Update propagation flag\r\n    if (syntheticEvent.isPropagationStopped) {\r\n      nativeEvent._stopPropagation = true;\r\n      nativeEvent.stopPropagation();\r\n    }\r\n\r\n    if (syntheticEvent.defaultPrevented) {\r\n      nativeEvent.preventDefault();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Register event handler for element\r\n   * @param {string} elementId - Element ID\r\n   * @param {string} eventType - Event type (e.g., 'click', 'change')\r\n   * @param {Function} handler - Handler function\r\n   * @throws {Error} If parameters invalid\r\n   */\r\n  registerHandler(elementId, eventType, handler) {\r\n    if (!elementId || typeof elementId !== 'string') {\r\n      throw new Error('Element ID must be a non-empty string');\r\n    }\r\n\r\n    if (!eventType || typeof eventType !== 'string') {\r\n      throw new Error('Event type must be a non-empty string');\r\n    }\r\n\r\n    if (typeof handler !== 'function') {\r\n      throw new Error('Handler must be a function');\r\n    }\r\n\r\n    // Get or create handler registry for element\r\n    if (!this.handlerRegistry.has(elementId)) {\r\n      this.handlerRegistry.set(elementId, {});\r\n    }\r\n\r\n    const handlers = this.handlerRegistry.get(elementId);\r\n\r\n    // Get or create handler array for event type\r\n    if (!handlers[eventType]) {\r\n      handlers[eventType] = [];\r\n    }\r\n\r\n    const handlersArray = handlers[eventType];\r\n\r\n    // Check max listeners warning\r\n    if (handlersArray.length >= this.config.maxEventListeners) {\r\n      console.warn(\r\n        `[EventSystem] Max event listeners (${this.config.maxEventListeners}) ` +\r\n        `reached for element ${elementId} event ${eventType}`\r\n      );\r\n    }\r\n\r\n    // Add handler\r\n    handlersArray.push(handler);\r\n\r\n    this.stats.handlersRegistered++;\r\n\r\n    if (this.config.enableDebug) {\r\n      console.log(\r\n        `[EventSystem] Registered handler for ${elementId}.${eventType} ` +\r\n        `(total: ${handlersArray.length})`\r\n      );\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Unregister event handler for element\r\n   * @param {string} elementId - Element ID\r\n   * @param {string} eventType - Event type (optional)\r\n   * @param {Function} handler - Handler function (optional)\r\n   */\r\n  unregisterHandler(elementId, eventType, handler) {\r\n    if (!elementId) return;\r\n\r\n    const handlers = this.handlerRegistry.get(elementId);\r\n    if (!handlers) return;\r\n\r\n    if (!eventType) {\r\n      // Remove all handlers for element\r\n      this.handlerRegistry.delete(elementId);\r\n      this.stats.handlersUnregistered += Object.keys(handlers).length;\r\n\r\n      if (this.config.enableDebug) {\r\n        console.log(`[EventSystem] Unregistered all handlers for ${elementId}`);\r\n      }\r\n\r\n      return;\r\n    }\r\n\r\n    const handlersArray = handlers[eventType];\r\n    if (!handlersArray) return;\r\n\r\n    if (!handler) {\r\n      // Remove all handlers for event type\r\n      const count = handlersArray.length;\r\n      delete handlers[eventType];\r\n\r\n      this.stats.handlersUnregistered += count;\r\n\r\n      if (this.config.enableDebug) {\r\n        console.log(\r\n          `[EventSystem] Unregistered ${count} handlers for ${elementId}.${eventType}`\r\n        );\r\n      }\r\n\r\n      return;\r\n    }\r\n\r\n    // Remove specific handler\r\n    const index = handlersArray.indexOf(handler);\r\n    if (index !== -1) {\r\n      handlersArray.splice(index, 1);\r\n      this.stats.handlersUnregistered++;\r\n\r\n      if (this.config.enableDebug) {\r\n        console.log(\r\n          `[EventSystem] Unregistered handler for ${elementId}.${eventType} ` +\r\n          `(remaining: ${handlersArray.length})`\r\n        );\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Check if element has handlers for event type\r\n   * @param {string} elementId - Element ID\r\n   * @param {string} eventType - Event type\r\n   * @returns {boolean} True if handlers exist\r\n   */\r\n  hasHandlers(elementId, eventType) {\r\n    const handlers = this.handlerRegistry.get(elementId);\r\n    if (!handlers) return false;\r\n\r\n    if (!eventType) {\r\n      return Object.keys(handlers).length > 0;\r\n    }\r\n\r\n    return (handlers[eventType]?.length || 0) > 0;\r\n  }\r\n\r\n  /**\r\n   * Get handler count for element\r\n   * @param {string} elementId - Element ID\r\n   * @param {string} eventType - Event type (optional)\r\n   * @returns {number} Handler count\r\n   */\r\n  getHandlerCount(elementId, eventType) {\r\n    const handlers = this.handlerRegistry.get(elementId);\r\n    if (!handlers) return 0;\r\n\r\n    if (!eventType) {\r\n      return Object.values(handlers).reduce((sum, arr) => sum + arr.length, 0);\r\n    }\r\n\r\n    return handlers[eventType]?.length || 0;\r\n  }\r\n\r\n  /**\r\n   * Get all event types for element\r\n   * @param {string} elementId - Element ID\r\n   * @returns {string[]} Array of event type strings\r\n   */\r\n  getEventTypes(elementId) {\r\n    const handlers = this.handlerRegistry.get(elementId);\r\n    return handlers ? Object.keys(handlers) : [];\r\n  }\r\n\r\n  /**\r\n   * Batch register multiple handlers\r\n   * @param {string} elementId - Element ID\r\n   * @param {Object} handlers - Map of eventType -> handler function\r\n   */\r\n  batchRegister(elementId, handlers) {\r\n    if (!handlers || typeof handlers !== 'object') {\r\n      throw new Error('Handlers must be an object');\r\n    }\r\n\r\n    Object.entries(handlers).forEach(([eventType, handler]) => {\r\n      if (typeof handler === 'function') {\r\n        this.registerHandler(elementId, eventType, handler);\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Batch unregister handlers for element\r\n   * @param {string} elementId - Element ID\r\n   */\r\n  batchUnregister(elementId) {\r\n    this.unregisterHandler(elementId);\r\n  }\r\n\r\n  /**\r\n   * Manually dispatch event (for testing or custom events)\r\n   * @param {HTMLElement} element - Target element\r\n   * @param {string} eventType - Event type\r\n   * @param {Object} options - Event options\r\n   */\r\n  dispatchCustomEvent(element, eventType, options = {}) {\r\n    if (!element) {\r\n      throw new Error('Element is required');\r\n    }\r\n\r\n    const syntheticEvent = new SyntheticEvent(\r\n      options.nativeEvent || new Event(eventType),\r\n      eventType,\r\n      element,\r\n      element\r\n    );\r\n\r\n    // Merge custom properties\r\n    Object.assign(syntheticEvent, options);\r\n\r\n    const elementId = element.dataset?.elementId;\r\n    if (elementId) {\r\n      this.dispatchToHandlers(elementId, eventType, syntheticEvent.nativeEvent);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get statistics\r\n   * @returns {Object} Statistics object\r\n   */\r\n  getStats() {\r\n    const totalHandlers = Array.from(this.handlerRegistry.values())\r\n      .reduce((sum, handlers) => {\r\n        return sum + Object.values(handlers).reduce((s, arr) => s + arr.length, 0);\r\n      }, 0);\r\n\r\n    return {\r\n      ...this.stats,\r\n      initialized: this.initialized,\r\n      delegatedEventsCount: this.delegatedEvents.size,\r\n      elementsWithHandlers: this.handlerRegistry.size,\r\n      totalHandlers: totalHandlers,\r\n      nativeListenersAttached: this.nativeListeners.size,\r\n      averageHandlersPerElement: this.handlerRegistry.size > 0\r\n        ? Math.round(totalHandlers / this.handlerRegistry.size)\r\n        : 0\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get detailed handler information\r\n   * @param {string} elementId - Element ID (optional, for specific element)\r\n   * @returns {Object} Detailed information\r\n   */\r\n  getDetailedInfo(elementId) {\r\n    if (elementId) {\r\n      const handlers = this.handlerRegistry.get(elementId);\r\n      return {\r\n        elementId,\r\n        handlers: handlers ? { ...handlers } : {},\r\n        hasHandlers: !!handlers\r\n      };\r\n    }\r\n\r\n    // Get info for all elements\r\n    const all = {};\r\n    this.handlerRegistry.forEach((handlers, id) => {\r\n      all[id] = { ...handlers };\r\n    });\r\n\r\n    return {\r\n      totalElements: this.handlerRegistry.size,\r\n      elements: all\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Clear all handlers for element (cleanup on unmount)\r\n   * @param {string} elementId - Element ID\r\n   */\r\n  clearElement(elementId) {\r\n    if (!elementId) return;\r\n\r\n    const handlerCount = this.getHandlerCount(elementId);\r\n    this.unregisterHandler(elementId);\r\n\r\n    if (this.config.enableDebug && handlerCount > 0) {\r\n      console.log(\r\n        `[EventSystem] Cleared ${handlerCount} handlers for element ${elementId}`\r\n      );\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Clear all handlers (app shutdown)\r\n   */\r\n  clearAll() {\r\n    const elementCount = this.handlerRegistry.size;\r\n    const totalHandlers = Array.from(this.handlerRegistry.values())\r\n      .reduce((sum, handlers) => {\r\n        return sum + Object.values(handlers).reduce((s, arr) => s + arr.length, 0);\r\n      }, 0);\r\n\r\n    this.handlerRegistry.clear();\r\n    this.eventPool = [];\r\n\r\n    if (this.config.enableDebug) {\r\n      console.log(\r\n        `[EventSystem] Cleared ${totalHandlers} handlers from ${elementCount} elements`\r\n      );\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Dispose event system\r\n   */\r\n  dispose() {\r\n    // Remove delegated listeners\r\n    if (this.rootElement) {\r\n      this.nativeListeners.forEach((listener, eventType) => {\r\n        this.rootElement.removeEventListener(eventType, listener, true);\r\n      });\r\n    }\r\n\r\n    this.clearAll();\r\n    this.nativeListeners.clear();\r\n    this.rootElement = null;\r\n    this.initialized = false;\r\n\r\n    if (this.config.enableDebug) {\r\n      console.log('[EventSystem] Disposed');\r\n    }\r\n  }\r\n}\r\n\r\n\r\n\r\nexport {  EventSystem,\r\n    SyntheticEvent};"],
-  "mappings": "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",
-  "names": ["SyntheticEvent", "nativeEvent", "type", "target", "currentTarget", "EventSystem", "runtime", "options", "rootElement", "eventType", "listener", "elementId", "handlers", "handlersArray", "syntheticEvent", "handler", "error", "count", "index", "sum", "arr", "element", "totalHandlers", "s", "all", "id", "handlerCount", "elementCount"]
-}
diff --git a/packages/flutterjs_engine/src/runtime/dist/flutterjs_runtime.js b/packages/flutterjs_engine/src/runtime/dist/flutterjs_runtime.js
deleted file mode 100644
index d680345d..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/flutterjs_runtime.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import{VNodeRuntime as f,renderToString as N,hydrate as W}from"@flutterjs/vdom/runtime_index";import{StatelessElement as I,StatefulElement as $,ComponentElement as H}from"@flutterjs/runtime/element";import{InheritedElement as A}from"@flutterjs/runtime/inherited_element";import{VNodeBuilder as h}from"@flutterjs/vdom/vnode_builder";import{VNodeRenderer as g}from"@flutterjs/vdom/vnode_renderer";function m(){return typeof window<"u"&&typeof document<"u"}function p(){return typeof window>"u"}function a(n){const e={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"};return String(n).replace(/[&<>"']/g,t=>e[t])}function _(){return`fjs-${Date.now()}-${Math.random().toString(36).substr(2,9)}`}function b(n,...e){if(!e.length)return n;const t=e.shift();if(c(n)&&c(t))for(const r in t)c(t[r])?(n[r]||Object.assign(n,{[r]:{}}),b(n[r],t[r])):Object.assign(n,{[r]:t[r]});return b(n,...e)}function c(n){return n&&typeof n=="object"&&!Array.isArray(n)}function V(n){return n&&n.tag!==void 0&&(n.props!==void 0||n.children!==void 0)&&n.build===void 0&&n.createState===void 0&&n.createElement===void 0}function P(n){return n&&(typeof n.build=="function"||typeof n.createState=="function"||typeof n.render=="function"||typeof n.createElement=="function")}class d extends f{constructor(e={}){super(),this.flutterConfig={debugMode:e.debugMode||!1,enableHotReload:e.enableHotReload!==!1,enableStateTracking:e.enableStateTracking!==!1,enablePerformanceTracking:e.enablePerformanceTracking!==!1,enableErrorBoundaries:e.enableErrorBoundaries!==!1,target:e.target||"web",isBrowser:m(),isSSR:p(),strictMode:e.strictMode||!1,...e},this.initialized=!1,this.mounted=!1,this.originalInput=null,this.inputType=null,this.elementRegistry=new Map,this.widgetCache=new WeakMap,this.errorBoundaries=[],this.lifecycleCallbacks={onElementCreated:[],onElementMounted:[],onElementUpdated:[],onElementUnmounted:[],onError:[],onStateChange:[]},this.performanceMarks=new Map,this.setupErrorHandling(),this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime] \u2705 Enhanced runtime created",{environment:this.flutterConfig.isBrowser?"browser":"server",hotReload:this.flutterConfig.enableHotReload,strictMode:this.flutterConfig.strictMode})}initialize(e={}){if(this.initialized)return this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime] \u26A0\uFE0F  Already initialized, skipping"),this;const t=performance.now();try{this.dirtyElements=new Set,this.isBatchSchedulled=!1,this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime] \u{1F527} Initializing runtime..."),e.rootElement&&(this.rootElement=e.rootElement,this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime] \u{1F4CD} Root element set:",this.rootElement.id||this.rootElement.tagName)),this.flutterConfig.isBrowser&&!this.rootElement&&console.warn("[FlutterJSRuntime] \u26A0\uFE0F  No root element provided in browser mode"),this.initialized=!0;const r=performance.now()-t;return this.flutterConfig.debugMode&&console.log(`[FlutterJSRuntime] \u2705 Initialized in ${r.toFixed(2)}ms`),this}catch(r){throw this.handleError("initialize",r,{options:e}),r}}createElement(e,t=null){if(!e)throw new Error("[FlutterJSRuntime.createElement] Widget is required");const r=this.flutterConfig.enablePerformanceTracking?performance.now():0;try{this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime.createElement] Creating element for:",e.constructor.name);let i=null;if(this.widgetCache.has(e)){const l=this.widgetCache.get(e);if(l&&!l.unmounted)return this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime.createElement] Using cached element"),l}if(this.isStatelessWidget(e))this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime.createElement] \u2192 StatelessElement"),i=new I(e,t,this);else if(this.isStatefulWidget(e))this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime.createElement] \u2192 StatefulElement"),i=new $(e,t,this);else if(this.isInheritedWidget(e))this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime.createElement] \u2192 InheritedElement"),i=new A(e,t,this);else if(this.isComponentWidget(e))this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime.createElement] \u2192 ComponentElement"),i=new H(e,t,this);else if(typeof e.createElement=="function")this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime.createElement] \u2192 Custom createElement"),i=e.createElement(t,this);else throw new Error(`[FlutterJSRuntime.createElement] Unknown widget type: ${e.constructor.name}. Widget must be StatelessWidget, StatefulWidget, InheritedWidget, or implement createElement().`);if(i){const l=_();i._id=l,this.elementRegistry.set(l,i),this.widgetCache.set(e,i),this.triggerLifecycleCallback("onElementCreated",i)}if(this.flutterConfig.enablePerformanceTracking){const l=performance.now()-r;this.recordPerformance("createElement",e.constructor.name,l)}return i}catch(i){throw this.handleError("createElement",i,{widget:e,parent:t}),i}}isStatelessWidget(e){return e?e.constructor.name==="StatelessWidget"||e.constructor.prototype&&e.constructor.prototype.constructor.name==="StatelessWidget"?!0:typeof e.build=="function"&&!e.createState&&!e.child&&!e.updateShouldNotify:!1}isStatefulWidget(e){return e?e.constructor.name==="StatefulWidget"||e.constructor.prototype&&e.constructor.prototype.constructor.name==="StatefulWidget"?!0:typeof e.createState=="function":!1}isInheritedWidget(e){return e?e.constructor.name==="InheritedWidget"||e.constructor.prototype&&e.constructor.prototype.constructor.name==="InheritedWidget"?!0:e.child!==void 0&&typeof e.updateShouldNotify=="function":!1}isComponentWidget(e){return e?typeof e.render=="function"?!0:typeof e.build=="function"&&typeof e.createState!="function"&&!e.updateShouldNotify:!1}runApp(e,t={}){try{this.initialized||(this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime] Auto-initializing before runApp"),this.initialize({rootElement:this.rootElement||t.rootElement})),this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime] \u{1F680} Starting Flutter app..."),this.originalInput=e;const r=V(e),i=P(e);if(this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime] Input type:",{isVNode:r,isWidget:i,constructorName:e?.constructor?.name,hasTag:e?.tag!==void 0,hasBuild:typeof e?.build=="function"}),r)return this.inputType="vnode",this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime] \u{1F4E6} Input is VNode, rendering directly"),this.app=e,this.rootVNode=e,this.flutterConfig.isBrowser&&this.rootElement&&(this.renderer||(this.renderer=new g({debugMode:this.flutterConfig.debugMode})),this.renderer.render(this.rootVNode,this.rootElement,{clear:!0})),this.mounted=!0,this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime] \u2705 VNode rendered directly"),this;if(i){this.inputType="widget",this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime] \u{1F527} Input is Widget, building VNode..."),this.app=e;const l=this.createBuildContext({...t,runtime:this,flutterConfig:this.flutterConfig}),s=new h({debugMode:this.flutterConfig.debugMode,runtime:this});return this.rootVNode=s.build(e,l),this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime] \u2705 VNode built from Widget"),this.flutterConfig.isBrowser&&this.rootElement&&(this.renderer||(this.renderer=new g({debugMode:this.flutterConfig.debugMode})),this.renderer.render(this.rootVNode,this.rootElement,{clear:!0})),this.mounted=!0,this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime] \u2705 Widget rendered to DOM"),this}else throw new Error(`[FlutterJSRuntime] Invalid input type. Expected Widget or VNode, got: ${typeof e}. Constructor: ${e?.constructor?.name||"unknown"}`)}catch(r){throw this.handleError("runApp",r,{input:e,options:t}),r}}update(e){try{if(this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime] \u{1F504} Updating application..."),e&&typeof e=="function"&&e(),this.inputType==="widget"&&this.originalInput){const t=this.createBuildContext({runtime:this,flutterConfig:this.flutterConfig}),i=new h({debugMode:this.flutterConfig.debugMode,runtime:this}).build(this.originalInput,t);this.renderer&&this.rootElement&&this.renderer.render(i,this.rootElement,{clear:!0}),this.rootVNode=i}else this.inputType==="vnode"&&console.warn("[FlutterJSRuntime] Cannot auto-rebuild from VNode. Provide new VNode to update().");this.triggerLifecycleCallback("onStateChange",{timestamp:Date.now(),updateFn:e?e.name:"anonymous"}),this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime] \u2705 Update complete")}catch(t){throw this.handleError("update",t,{updateFn:e}),t}}markNeedsBuild(e){this.flutterConfig.debugMode&&console.log(`[FlutterJSRuntime] \u{1F3D7}\uFE0F markNeedsBuild called for ${e.widget?.constructor.name}`),this.dirtyElements||(this.dirtyElements=new Set),this.dirtyElements.add(e),this.isBatchSchedulled||(this.isBatchSchedulled=!0,Promise.resolve().then(()=>this.processBuildQueue()))}processBuildQueue(){this.flutterConfig.debugMode&&console.log(`[FlutterJSRuntime] \u{1F504} Processing build queue (size: ${this.dirtyElements.size})`),this.isBatchSchedulled=!1;const e=Array.from(this.dirtyElements);this.dirtyElements.clear(),e.sort((t,r)=>(t.depth||0)-(r.depth||0));for(const t of e)if(t.mounted)try{this.flutterConfig.debugMode&&console.log(`[FlutterJSRuntime] \u{1F528} Rebuilding dirty element: ${t.widget?.constructor.name}`),t.rebuild()}catch(r){console.error(`[FlutterJSRuntime] Error rebuilding element ${t.widget?.constructor.name}:`,r),this.handleError("rebuild",r,{element:t.toString()})}this.dirtyElements.size>0&&(this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime] \u{1F504} More updates queued during batch, scheduling next batch..."),Promise.resolve().then(()=>this.processBuildQueue()))}onElementMounted(e){e&&(this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime] \u{1F50C} Element mounted:",e.widget?.constructor.name),this.triggerLifecycleCallback("onElementMounted",e))}onElementUpdated(e){e&&(this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime] \u{1F504} Element updated:",e.widget?.constructor.name),this.triggerLifecycleCallback("onElementUpdated",e))}onElementUnmounted(e){e&&(this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime] \u{1F5D1}\uFE0F Element unmounted:",e.widget?.constructor.name),e._id&&this.elementRegistry.delete(e._id),e.widget&&this.widgetCache.delete(e.widget),this.triggerLifecycleCallback("onElementUnmounted",e))}on(e,t){return this.lifecycleCallbacks[e]&&typeof t=="function"?(this.lifecycleCallbacks[e].push(t),this.flutterConfig.debugMode&&console.log(`[FlutterJSRuntime] \u{1F4DD} Registered callback for: ${e}`)):console.warn(`[FlutterJSRuntime] Unknown event: ${e}`),this}off(e,t){if(this.lifecycleCallbacks[e]){const r=this.lifecycleCallbacks[e].indexOf(t);r>-1&&this.lifecycleCallbacks[e].splice(r,1)}return this}triggerLifecycleCallback(e,t){(this.lifecycleCallbacks[e]||[]).forEach(i=>{try{i(t,this)}catch(l){console.error(`[FlutterJSRuntime] Callback error (${e}):`,l)}})}setupErrorHandling(){if(!this.flutterConfig.isBrowser||this._errorHandlingSetup)return;this._errorHandlingSetup=!0;const e=r=>{this.handleError("uncaught",r.error||r.message,{filename:r.filename,lineno:r.lineno,colno:r.colno})},t=r=>{this.handleError("promise",r.reason,{promise:r.promise})};window.addEventListener("error",e),window.addEventListener("unhandledrejection",t),this._errorHandlers={errorHandler:e,rejectionHandler:t}}handleError(e,t,r={}){const i={source:e,error:t,context:r,timestamp:Date.now(),stack:t instanceof Error?t.stack:null};console.error(`[FlutterJSRuntime] \u274C Error in ${e}:`,t),this.flutterConfig.debugMode&&t instanceof Error&&t.stack&&console.error("[FlutterJSRuntime] Stack trace:",t.stack),this.triggerLifecycleCallback("onError",i),this.flutterConfig.debugMode&&this.flutterConfig.isBrowser&&this.showErrorOverlay(e,t,r)}showErrorOverlay(e,t,r){try{if(typeof document>"u")return;const i=document.getElementById("__flutterjs_error_overlay__");i&&i.remove();const l=t instanceof Error?t.message:String(t),s=t instanceof Error&&t.stack?t.stack.split(`
-`).slice(0,10).join(`
-`):"No stack trace available",u=document.createElement("div");u.id="__flutterjs_error_overlay__",u.style.cssText=`
-        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
-        background: rgba(0, 0, 0, 0.9); color: white; z-index: 999999;
-        overflow-y: auto; font-family: 'Monaco', 'Menlo', monospace;
-        font-size: 13px; padding: 20px;
-      `,u.innerHTML=`
-        <div style="max-width: 900px; margin: 0 auto;">
-          <div style="background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%);
-            padding: 20px; border-radius: 8px 8px 0 0; display: flex;
-            align-items: center; justify-content: space-between;">
-            <div style="display: flex; align-items: center; gap: 12px;">
-              <div style="width: 48px; height: 48px; background: rgba(255,255,255,0.2);
-                border-radius: 50%; display: flex; align-items: center;
-                justify-content: center; font-size: 24px;">\u26A0</div>
-              <div>
-                <h2 style="margin: 0; font-size: 20px; font-weight: 600;">
-                  ${a(e.charAt(0).toUpperCase()+e.slice(1))} Error
-                </h2>
-                <p style="margin: 4px 0 0 0; opacity: 0.9; font-size: 12px;">
-                  FlutterJS Runtime Error
-                </p>
-              </div>
-            </div>
-            <button onclick="this.parentElement.parentElement.parentElement.remove()"
-              style="background: rgba(255,255,255,0.2); border: none; color: white;
-              width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
-              font-size: 18px;">\xD7</button>
-          </div>
-          <div style="background: #1e1e1e; padding: 20px; border-radius: 0 0 8px 8px;">
-            <div style="margin-bottom: 20px;">
-              <h3 style="color: #ff6b6b; margin: 0 0 12px 0; font-size: 14px;
-                font-weight: 600; text-transform: uppercase;">Error Message</h3>
-              <pre style="background: #2d2d2d; padding: 16px; border-radius: 6px;
-                border-left: 4px solid #d32f2f; margin: 0; overflow-x: auto;
-                color: #ff8a80; line-height: 1.5;">${a(l)}</pre>
-            </div>
-            ${s&&s!=="No stack trace available"?`
-              <div style="margin-bottom: 20px;">
-                <h3 style="color: #64b5f6; margin: 0 0 12px 0; font-size: 14px;
-                  font-weight: 600; text-transform: uppercase;">Stack Trace</h3>
-                <pre style="background: #2d2d2d; padding: 16px; border-radius: 6px;
-                  border-left: 4px solid #1976d2; margin: 0; overflow-x: auto;
-                  color: #90caf9; line-height: 1.6; font-size: 12px;">${a(s)}</pre>
-              </div>
-            `:""}
-            ${Object.keys(r).length>0?`
-              <div>
-                <h3 style="color: #81c784; margin: 0 0 12px 0; font-size: 14px;
-                  font-weight: 600; text-transform: uppercase;">Context</h3>
-                <pre style="background: #2d2d2d; padding: 16px; border-radius: 6px;
-                  border-left: 4px solid #388e3c; margin: 0; overflow-x: auto;
-                  color: #a5d6a7; line-height: 1.6; font-size: 12px;">${a(JSON.stringify(r,null,2))}</pre>
-              </div>
-            `:""}
-          </div>
-        </div>
-      `,document.body.appendChild(u)}catch(i){console.error("[FlutterJSRuntime] Failed to show error overlay:",i)}}recordPerformance(e,t,r){if(!this.flutterConfig.enablePerformanceTracking)return;const i=`${e}:${t}`;this.performanceMarks.has(i)||this.performanceMarks.set(i,{count:0,totalTime:0,avgTime:0,minTime:1/0,maxTime:0});const l=this.performanceMarks.get(i);l.count++,l.totalTime+=r,l.avgTime=l.totalTime/l.count,l.minTime=Math.min(l.minTime,r),l.maxTime=Math.max(l.maxTime,r)}getPerformanceReport(){const e={};return this.performanceMarks.forEach((t,r)=>{e[r]={calls:t.count,total:`${t.totalTime.toFixed(2)}ms`,average:`${t.avgTime.toFixed(2)}ms`,min:`${t.minTime.toFixed(2)}ms`,max:`${t.maxTime.toFixed(2)}ms`}}),e}clearPerformanceMarks(){this.performanceMarks.clear()}getFlutterConfig(){return{...this.flutterConfig}}getElementById(e){return this.elementRegistry.get(e)}getAllElements(){return Array.from(this.elementRegistry.values())}getElementCount(){return this.elementRegistry.size}isInitialized(){return this.initialized}isMounted(){return this.mounted}getStats(){const e=this.getMetrics();return e?{...e,flutter:{elements:this.elementRegistry.size,cachedWidgets:this.widgetCache?"enabled":"disabled",inputType:this.inputType,lifecycleCallbacks:Object.keys(this.lifecycleCallbacks).reduce((t,r)=>(t[r]=this.lifecycleCallbacks[r].length,t),{})}}:{flutter:{elements:this.elementRegistry.size,cachedWidgets:this.widgetCache?"enabled":"disabled",inputType:this.inputType,initialized:this.initialized,mounted:this.mounted,hasApp:this.app!==null,lifecycleCallbacks:Object.keys(this.lifecycleCallbacks).reduce((t,r)=>(t[r]=this.lifecycleCallbacks[r].length,t),{})}}}destroy(){this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime] \u{1F5D1}\uFE0F Destroying..."),this._errorHandlers&&this.flutterConfig.isBrowser&&(window.removeEventListener("error",this._errorHandlers.errorHandler),window.removeEventListener("unhandledrejection",this._errorHandlers.rejectionHandler)),this.elementRegistry.clear(),this.widgetCache=new WeakMap,Object.keys(this.lifecycleCallbacks).forEach(e=>{this.lifecycleCallbacks[e]=[]}),this.performanceMarks.clear(),super.destroy(),this.initialized=!1,this.mounted=!1,this.flutterConfig.debugMode&&console.log("[FlutterJSRuntime] \u2705 Destroyed")}}let o=null;function y(n,e={}){try{o?e.debugMode&&console.log("[FlutterJS] \u267B\uFE0F Reusing existing runtime"):(e.debugMode&&console.log("[FlutterJS] \u{1F195} Creating new Flutter runtime"),o=new d({debugMode:e.debugMode||!1,enableHotReload:e.enableHotReload!==!1,enablePerformanceTracking:e.enablePerformanceTracking!==!1,enableStateTracking:e.enableStateTracking!==!1,enableErrorBoundaries:e.enableErrorBoundaries!==!1,strictMode:e.strictMode||!1,mode:e.mode||"csr"}));const t={...e,context:{...e.context,runtime:o}};return o.runApp(n,t)}catch(t){throw console.error("[FlutterJS] \u274C Failed to run app:",t),t}}function S(){return o}function C(n){if(!o)throw new Error("[FlutterJS] No runtime instance. Call runApp() first.");n&&typeof n=="function"&&n(),o.update()}function E(){if(!o){console.warn("[FlutterJS] No runtime instance");return}o.hotReload()}function M(n,e={}){try{e.debugMode&&console.log("[FlutterJS] \xF0\u0178\u201C\u201E SSR: Creating temporary runtime for rendering");const t=new d({debugMode:e.debugMode||!1,mode:"ssr"}),r={...e,context:{...e.context,runtime:t}},i=N(n,r);return t.destroy(),i}catch(t){throw console.error("[FlutterJS] \xE2\x9D\u0152 SSR failed:",t),t}}function x(n,e={}){try{e.debugMode&&console.log("[FlutterJS] \xF0\u0178\u2019\xA7 Starting hydration..."),o||(o=new d({debugMode:e.debugMode||!1,enableHotReload:e.enableHotReload!==!1,mode:"hydrate"}));const t={...e,context:{...e.context,runtime:o}};return W(n,t)}catch(t){throw console.error("[FlutterJS] \xE2\x9D\u0152 Hydration failed:",t),t}}function R(){return o?o.getStats():null}function w(){return o?o.getPerformanceReport():null}function k(){o&&(o.clearMetrics(),o.clearPerformanceMarks())}function F(n,e){if(!o){console.warn("[FlutterJS] No runtime instance. Call runApp() first.");return}o.on(n,e)}function J(n,e){o&&o.off(n,e)}function v(){return o?o.getFlutterConfig():null}function T(){o&&(o.destroy(),o=null)}function z(){return o!==null&&o.isInitialized()}function B(){return o!==null&&o.isMounted()}var Y={FlutterJSRuntime:d,VNodeRuntime:f,runApp:y,getRuntime:S,updateApp:C,hotReload:E,renderToString:M,hydrate:x,getMetrics:R,getPerformanceReport:w,clearMetrics:k,on:F,off:J,getConfig:v,dispose:T,isInitialized:z,isMounted:B,isBrowser:m,isSSR:p};typeof window<"u"&&(console.log("[FlutterJS] \xF0\u0178\u0152\x90 Setting up window.FlutterJS"),window.FlutterJS={runApp:y,getRuntime:S,updateApp:C,hotReload:E,renderToString:M,hydrate:x,getMetrics:R,getPerformanceReport:w,clearMetrics:k,on:F,off:J,getConfig:v,dispose:T,isInitialized:z,isMounted:B,version:"1.0.0",environment:"browser"},console.log("[FlutterJS] \xE2\u0153\u2026 window.FlutterJS ready"),console.log("[FlutterJS] \xF0\u0178\u201C\u0161 Available methods:",Object.keys(window.FlutterJS).join(", ")));export{d as FlutterJSRuntime,k as clearMetrics,Y as default,T as dispose,v as getConfig,R as getMetrics,w as getPerformanceReport,S as getRuntime,E as hotReload,x as hydrate,z as isInitialized,B as isMounted,J as off,F as on,M as renderToString,y as runApp,C as updateApp};
-//# sourceMappingURL=flutterjs_runtime.js.map
diff --git a/packages/flutterjs_engine/src/runtime/dist/flutterjs_runtime.js.map b/packages/flutterjs_engine/src/runtime/dist/flutterjs_runtime.js.map
deleted file mode 100644
index 755e62fc..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/flutterjs_runtime.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/flutterjs_runtime.js"],
-  "sourcesContent": ["/**\r\n * FlutterJS Runtime - Complete Production Version\r\n * \r\n * FIXED: Handles both Widget and VNode inputs correctly\r\n */\r\n\r\nimport {\r\n  VNodeRuntime,\r\n  runApp as coreRunApp,\r\n  getRuntime as coreGetRuntime,\r\n  updateApp as coreUpdateApp,\r\n  getMetrics as coreGetMetrics,\r\n  hotReload as coreHotReload,\r\n  renderToString as coreRenderToString,\r\n  hydrate as coreHydrate\r\n} from '@flutterjs/vdom/runtime_index';\r\n\r\nimport {\r\n  StatelessElement,\r\n  StatefulElement,\r\n  ComponentElement\r\n} from '@flutterjs/runtime/element';\r\nimport { InheritedElement } from '@flutterjs/runtime/inherited_element';\r\nimport { VNodeBuilder } from '@flutterjs/vdom/vnode_builder';\r\nimport { VNodeRenderer } from '@flutterjs/vdom/vnode_renderer';\r\n\r\n// ============================================================================\r\n// UTILITIES\r\n// ============================================================================\r\n\r\nfunction isBrowser() {\r\n  return typeof window !== 'undefined' && typeof document !== 'undefined';\r\n}\r\n\r\nfunction isSSR() {\r\n  return typeof window === 'undefined';\r\n}\r\n\r\nfunction escapeHtml(text) {\r\n  const map = {\r\n    '&': '&amp;',\r\n    '<': '&lt;',\r\n    '>': '&gt;',\r\n    '\"': '&quot;',\r\n    \"'\": '&#039;'\r\n  };\r\n  return String(text).replace(/[&<>\"']/g, m => map[m]);\r\n}\r\n\r\nfunction generateId() {\r\n  return `fjs-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\r\n}\r\n\r\nfunction deepMerge(target, ...sources) {\r\n  if (!sources.length) return target;\r\n  const source = sources.shift();\r\n\r\n  if (isObject(target) && isObject(source)) {\r\n    for (const key in source) {\r\n      if (isObject(source[key])) {\r\n        if (!target[key]) Object.assign(target, { [key]: {} });\r\n        deepMerge(target[key], source[key]);\r\n      } else {\r\n        Object.assign(target, { [key]: source[key] });\r\n      }\r\n    }\r\n  }\r\n\r\n  return deepMerge(target, ...sources);\r\n}\r\n\r\nfunction isObject(item) {\r\n  return item && typeof item === 'object' && !Array.isArray(item);\r\n}\r\n\r\n/**\r\n * Check if input is a VNode (already built)\r\n */\r\nfunction isVNode(obj) {\r\n  return obj && (\r\n    // Must have a tag property (HTML element name)\r\n    obj.tag !== undefined &&\r\n    // Should have props and/or children (VNode structure)\r\n    (obj.props !== undefined || obj.children !== undefined) &&\r\n    // Should NOT have widget-specific properties\r\n    obj.build === undefined &&\r\n    obj.createState === undefined &&\r\n    obj.createElement === undefined\r\n  );\r\n}\r\n\r\n/**\r\n * Check if input is a Widget (needs building)\r\n */\r\nfunction isWidget(obj) {\r\n  return obj && (\r\n    typeof obj.build === 'function' ||\r\n    typeof obj.createState === 'function' ||\r\n    typeof obj.render === 'function' ||\r\n    typeof obj.createElement === 'function'\r\n  );\r\n}\r\n\r\n// ============================================================================\r\n// ENHANCED RUNTIME CLASS\r\n// ============================================================================\r\n\r\nexport class FlutterJSRuntime extends VNodeRuntime {\r\n  constructor(options = {}) {\r\n    super();\r\n\r\n    // Additional Flutter-specific configuration\r\n    this.flutterConfig = {\r\n      debugMode: options.debugMode || false,\r\n      enableHotReload: options.enableHotReload !== false,\r\n      enableStateTracking: options.enableStateTracking !== false,\r\n      enablePerformanceTracking: options.enablePerformanceTracking !== false,\r\n      enableErrorBoundaries: options.enableErrorBoundaries !== false,\r\n      target: options.target || 'web',\r\n      isBrowser: isBrowser(),\r\n      isSSR: isSSR(),\r\n      strictMode: options.strictMode || false,\r\n      ...options\r\n    };\r\n\r\n    // Track initialization state\r\n    this.initialized = false;\r\n    this.mounted = false;\r\n\r\n    // Store original input for rebuilds\r\n    this.originalInput = null;\r\n    this.inputType = null; // 'widget' or 'vnode'\r\n\r\n    // Element registry for tracking all created elements\r\n    this.elementRegistry = new Map();\r\n\r\n    // Widget instance cache\r\n    this.widgetCache = new WeakMap();\r\n\r\n    // Error boundary stack\r\n    this.errorBoundaries = [];\r\n\r\n    // Lifecycle callbacks\r\n    this.lifecycleCallbacks = {\r\n      onElementCreated: [],\r\n      onElementMounted: [],\r\n      onElementUpdated: [],\r\n      onElementUnmounted: [],\r\n      onError: [],\r\n      onStateChange: []\r\n    };\r\n\r\n    // Performance tracking\r\n    this.performanceMarks = new Map();\r\n\r\n    // Setup error handling\r\n    this.setupErrorHandling();\r\n\r\n    if (this.flutterConfig.debugMode) {\r\n      console.log('[FlutterJSRuntime] \u2705 Enhanced runtime created', {\r\n        environment: this.flutterConfig.isBrowser ? 'browser' : 'server',\r\n        hotReload: this.flutterConfig.enableHotReload,\r\n        strictMode: this.flutterConfig.strictMode\r\n      });\r\n    }\r\n  }\r\n\r\n  // ============================================================================\r\n  // INITIALIZE METHOD\r\n  // ============================================================================\r\n\r\n  initialize(options = {}) {\r\n    if (this.initialized) {\r\n      if (this.flutterConfig.debugMode) {\r\n        console.log('[FlutterJSRuntime] \u26A0\uFE0F  Already initialized, skipping');\r\n      }\r\n      return this;\r\n    }\r\n\r\n    const startTime = performance.now();\r\n\r\n    try {\r\n      // Initialize dirty elements set\r\n      this.dirtyElements = new Set();\r\n      this.isBatchSchedulled = false;\r\n\r\n      if (this.flutterConfig.debugMode) {\r\n        console.log('[FlutterJSRuntime] \uD83D\uDD27 Initializing runtime...');\r\n      }\r\n\r\n      // Store root element if provided\r\n      if (options.rootElement) {\r\n        this.rootElement = options.rootElement;\r\n\r\n        if (this.flutterConfig.debugMode) {\r\n          console.log('[FlutterJSRuntime] \uD83D\uDCCD Root element set:', this.rootElement.id || this.rootElement.tagName);\r\n        }\r\n      }\r\n\r\n      // Validate browser environment if root element expected\r\n      if (this.flutterConfig.isBrowser && !this.rootElement) {\r\n        console.warn('[FlutterJSRuntime] \u26A0\uFE0F  No root element provided in browser mode');\r\n      }\r\n\r\n      // Mark as initialized\r\n      this.initialized = true;\r\n\r\n      const initTime = performance.now() - startTime;\r\n\r\n      if (this.flutterConfig.debugMode) {\r\n        console.log(`[FlutterJSRuntime] \u2705 Initialized in ${initTime.toFixed(2)}ms`);\r\n      }\r\n\r\n      return this;\r\n\r\n    } catch (error) {\r\n      this.handleError('initialize', error, { options });\r\n      throw error;\r\n    }\r\n  }\r\n\r\n  // ============================================================================\r\n  // CORE FLUTTER WIDGET SYSTEM METHODS\r\n  // ============================================================================\r\n\r\n  createElement(widget, parent = null) {\r\n    if (!widget) {\r\n      throw new Error('[FlutterJSRuntime.createElement] Widget is required');\r\n    }\r\n\r\n    const startTime = this.flutterConfig.enablePerformanceTracking\r\n      ? performance.now()\r\n      : 0;\r\n\r\n    try {\r\n      if (this.flutterConfig.debugMode) {\r\n        console.log('[FlutterJSRuntime.createElement] Creating element for:', widget.constructor.name);\r\n      }\r\n\r\n      let element = null;\r\n\r\n      // Check widget cache first\r\n      if (this.widgetCache.has(widget)) {\r\n        const cachedElement = this.widgetCache.get(widget);\r\n        if (cachedElement && !cachedElement.unmounted) {\r\n          if (this.flutterConfig.debugMode) {\r\n            console.log('[FlutterJSRuntime.createElement] Using cached element');\r\n          }\r\n          return cachedElement;\r\n        }\r\n      }\r\n\r\n      // Determine widget type and create appropriate element\r\n\r\n      if (this.isStatelessWidget(widget)) {\r\n        if (this.flutterConfig.debugMode) {\r\n          console.log('[FlutterJSRuntime.createElement] \u2192 StatelessElement');\r\n        }\r\n        element = new StatelessElement(widget, parent, this);\r\n      }\r\n      else if (this.isStatefulWidget(widget)) {\r\n        if (this.flutterConfig.debugMode) {\r\n          console.log('[FlutterJSRuntime.createElement] \u2192 StatefulElement');\r\n        }\r\n        element = new StatefulElement(widget, parent, this);\r\n      }\r\n      else if (this.isInheritedWidget(widget)) {\r\n        if (this.flutterConfig.debugMode) {\r\n          console.log('[FlutterJSRuntime.createElement] \u2192 InheritedElement');\r\n        }\r\n        element = new InheritedElement(widget, parent, this);\r\n      }\r\n      else if (this.isComponentWidget(widget)) {\r\n        if (this.flutterConfig.debugMode) {\r\n          console.log('[FlutterJSRuntime.createElement] \u2192 ComponentElement');\r\n        }\r\n        element = new ComponentElement(widget, parent, this);\r\n      }\r\n      else if (typeof widget.createElement === 'function') {\r\n        if (this.flutterConfig.debugMode) {\r\n          console.log('[FlutterJSRuntime.createElement] \u2192 Custom createElement');\r\n        }\r\n        element = widget.createElement(parent, this);\r\n      }\r\n      else {\r\n        throw new Error(\r\n          `[FlutterJSRuntime.createElement] Unknown widget type: ${widget.constructor.name}. ` +\r\n          `Widget must be StatelessWidget, StatefulWidget, InheritedWidget, or implement createElement().`\r\n        );\r\n      }\r\n\r\n      // Register element\r\n      if (element) {\r\n        const elementId = generateId();\r\n        element._id = elementId;\r\n        this.elementRegistry.set(elementId, element);\r\n\r\n        // Cache element\r\n        this.widgetCache.set(widget, element);\r\n\r\n        // Trigger lifecycle callback\r\n        this.triggerLifecycleCallback('onElementCreated', element);\r\n      }\r\n\r\n      // Performance tracking\r\n      if (this.flutterConfig.enablePerformanceTracking) {\r\n        const duration = performance.now() - startTime;\r\n        this.recordPerformance('createElement', widget.constructor.name, duration);\r\n      }\r\n\r\n      return element;\r\n\r\n    } catch (error) {\r\n      this.handleError('createElement', error, { widget, parent });\r\n      throw error;\r\n    }\r\n  }\r\n\r\n  isStatelessWidget(widget) {\r\n    if (!widget) return false;\r\n    if (widget.constructor.name === 'StatelessWidget') return true;\r\n    if (widget.constructor.prototype &&\r\n      widget.constructor.prototype.constructor.name === 'StatelessWidget') {\r\n      return true;\r\n    }\r\n    return typeof widget.build === 'function' &&\r\n      !widget.createState &&\r\n      !widget.child &&\r\n      !widget.updateShouldNotify;\r\n  }\r\n\r\n  isStatefulWidget(widget) {\r\n    if (!widget) return false;\r\n    if (widget.constructor.name === 'StatefulWidget') return true;\r\n    if (widget.constructor.prototype &&\r\n      widget.constructor.prototype.constructor.name === 'StatefulWidget') {\r\n      return true;\r\n    }\r\n    return typeof widget.createState === 'function';\r\n  }\r\n\r\n  isInheritedWidget(widget) {\r\n    if (!widget) return false;\r\n    if (widget.constructor.name === 'InheritedWidget') return true;\r\n    if (widget.constructor.prototype &&\r\n      widget.constructor.prototype.constructor.name === 'InheritedWidget') {\r\n      return true;\r\n    }\r\n    return widget.child !== undefined &&\r\n      typeof widget.updateShouldNotify === 'function';\r\n  }\r\n\r\n  isComponentWidget(widget) {\r\n    if (!widget) return false;\r\n    if (typeof widget.render === 'function') return true;\r\n    return typeof widget.build === 'function' &&\r\n      typeof widget.createState !== 'function' &&\r\n      !widget.updateShouldNotify;\r\n  }\r\n\r\n  // ============================================================================\r\n  // ENHANCED RUNTIME METHODS - KEY FIX HERE\r\n  // ============================================================================\r\n\r\n  /**\r\n   * \u2705 FIXED: runApp now handles both Widget and VNode inputs\r\n   */\r\n  runApp(input, options = {}) {\r\n    try {\r\n      // Ensure we're initialized first\r\n      if (!this.initialized) {\r\n        if (this.flutterConfig.debugMode) {\r\n          console.log('[FlutterJSRuntime] Auto-initializing before runApp');\r\n        }\r\n        this.initialize({ rootElement: this.rootElement || options.rootElement });\r\n      }\r\n\r\n      if (this.flutterConfig.debugMode) {\r\n        console.log('[FlutterJSRuntime] \uD83D\uDE80 Starting Flutter app...');\r\n      }\r\n\r\n      // Store original input for rebuilds\r\n      this.originalInput = input;\r\n\r\n      // Detect input type\r\n      const inputIsVNode = isVNode(input);\r\n      const inputIsWidget = isWidget(input);\r\n\r\n      if (this.flutterConfig.debugMode) {\r\n        console.log('[FlutterJSRuntime] Input type:', {\r\n          isVNode: inputIsVNode,\r\n          isWidget: inputIsWidget,\r\n          constructorName: input?.constructor?.name,\r\n          hasTag: input?.tag !== undefined,\r\n          hasBuild: typeof input?.build === 'function'\r\n        });\r\n      }\r\n\r\n      if (inputIsVNode) {\r\n        // \u2705 CASE 1: Already a VNode - render directly\r\n        this.inputType = 'vnode';\r\n\r\n        if (this.flutterConfig.debugMode) {\r\n          console.log('[FlutterJSRuntime] \uD83D\uDCE6 Input is VNode, rendering directly');\r\n        }\r\n\r\n        // \u2705 FIX: Set this.app so getMetrics() works\r\n        this.app = input;\r\n        this.rootVNode = input;\r\n\r\n        // Render to DOM if in browser\r\n        if (this.flutterConfig.isBrowser && this.rootElement) {\r\n          if (!this.renderer) {\r\n            this.renderer = new VNodeRenderer({ debugMode: this.flutterConfig.debugMode });\r\n          }\r\n          this.renderer.render(this.rootVNode, this.rootElement, { clear: true });\r\n        }\r\n\r\n        this.mounted = true;\r\n\r\n        if (this.flutterConfig.debugMode) {\r\n          console.log('[FlutterJSRuntime] \u2705 VNode rendered directly');\r\n        }\r\n\r\n        return this;\r\n\r\n      } else if (inputIsWidget) {\r\n        // \u2705 CASE 2: Widget - build to VNode first, then render\r\n        this.inputType = 'widget';\r\n\r\n        if (this.flutterConfig.debugMode) {\r\n          console.log('[FlutterJSRuntime] \uD83D\uDD27 Input is Widget, building VNode...');\r\n        }\r\n\r\n        // \u2705 FIX: Set this.app so getMetrics() works\r\n        this.app = input;\r\n\r\n        // Create enhanced context with runtime\r\n        const context = this.createBuildContext({\r\n          ...options,\r\n          runtime: this,\r\n          flutterConfig: this.flutterConfig\r\n        });\r\n\r\n        // Build widget to VNode\r\n        const vNodeBuilder = new VNodeBuilder({\r\n          debugMode: this.flutterConfig.debugMode,\r\n          runtime: this\r\n        });\r\n\r\n        this.rootVNode = vNodeBuilder.build(input, context);\r\n\r\n        if (this.flutterConfig.debugMode) {\r\n          console.log('[FlutterJSRuntime] \u2705 VNode built from Widget');\r\n        }\r\n\r\n        // Render to DOM if in browser\r\n        if (this.flutterConfig.isBrowser && this.rootElement) {\r\n          if (!this.renderer) {\r\n            this.renderer = new VNodeRenderer({ debugMode: this.flutterConfig.debugMode });\r\n          }\r\n          this.renderer.render(this.rootVNode, this.rootElement, { clear: true });\r\n        }\r\n\r\n        this.mounted = true;\r\n\r\n        if (this.flutterConfig.debugMode) {\r\n          console.log('[FlutterJSRuntime] \u2705 Widget rendered to DOM');\r\n        }\r\n\r\n        return this;\r\n\r\n      } else {\r\n        // \u2705 CASE 3: Unknown type - error\r\n        throw new Error(\r\n          `[FlutterJSRuntime] Invalid input type. Expected Widget or VNode, got: ${typeof input}. ` +\r\n          `Constructor: ${input?.constructor?.name || 'unknown'}`\r\n        );\r\n      }\r\n\r\n    } catch (error) {\r\n      this.handleError('runApp', error, { input, options });\r\n      throw error;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Override update to handle both Widget and VNode rebuilds\r\n   */\r\n  update(updateFn) {\r\n    try {\r\n      if (this.flutterConfig.debugMode) {\r\n        console.log('[FlutterJSRuntime] \uD83D\uDD04 Updating application...');\r\n      }\r\n\r\n      // Execute update function if provided\r\n      if (updateFn && typeof updateFn === 'function') {\r\n        updateFn();\r\n      }\r\n\r\n      // Rebuild based on input type\r\n      if (this.inputType === 'widget' && this.originalInput) {\r\n        // Rebuild from widget\r\n        const context = this.createBuildContext({\r\n          runtime: this,\r\n          flutterConfig: this.flutterConfig\r\n        });\r\n\r\n        const vNodeBuilder = new VNodeBuilder({\r\n          debugMode: this.flutterConfig.debugMode,\r\n          runtime: this\r\n        });\r\n\r\n        const newVNode = vNodeBuilder.build(this.originalInput, context);\r\n\r\n        if (this.renderer && this.rootElement) {\r\n          this.renderer.render(newVNode, this.rootElement, { clear: true });\r\n        }\r\n\r\n        this.rootVNode = newVNode;\r\n\r\n      } else if (this.inputType === 'vnode') {\r\n        // For VNode input, user must provide new VNode\r\n        console.warn('[FlutterJSRuntime] Cannot auto-rebuild from VNode. Provide new VNode to update().');\r\n      }\r\n\r\n      this.triggerLifecycleCallback('onStateChange', {\r\n        timestamp: Date.now(),\r\n        updateFn: updateFn ? updateFn.name : 'anonymous'\r\n      });\r\n\r\n      if (this.flutterConfig.debugMode) {\r\n        console.log('[FlutterJSRuntime] \u2705 Update complete');\r\n      }\r\n\r\n    } catch (error) {\r\n      this.handleError('update', error, { updateFn });\r\n      throw error;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Mark an element as needing a rebuild\r\n   * @param {Element} element - The element to rebuild\r\n   */\r\n  markNeedsBuild(element) {\r\n    if (this.flutterConfig.debugMode) {\r\n      console.log(`[FlutterJSRuntime] \uD83C\uDFD7\uFE0F markNeedsBuild called for ${element.widget?.constructor.name}`);\r\n    }\r\n\r\n    if (!this.dirtyElements) {\r\n      this.dirtyElements = new Set();\r\n    }\r\n\r\n    // \u2705 Add to dirty set\r\n    this.dirtyElements.add(element);\r\n\r\n    // \u2705 Schedule batch update (microtask)\r\n    if (!this.isBatchSchedulled) {\r\n      this.isBatchSchedulled = true;\r\n      Promise.resolve().then(() => this.processBuildQueue());\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Process the build queue and rebuild only dirty elements\r\n   */\r\n  processBuildQueue() {\r\n    if (this.flutterConfig.debugMode) {\r\n      console.log(`[FlutterJSRuntime] \uD83D\uDD04 Processing build queue (size: ${this.dirtyElements.size})`);\r\n    }\r\n\r\n    this.isBatchSchedulled = false;\r\n\r\n    // Snapshot of elements to rebuild\r\n    const elements = Array.from(this.dirtyElements);\r\n    this.dirtyElements.clear(); // Clear immediately so new updates can be queued\r\n\r\n    // Sort by depth (parents before children) to avoid redundant rebuilds\r\n    elements.sort((a, b) => (a.depth || 0) - (b.depth || 0));\r\n\r\n    for (const element of elements) {\r\n      // Check if element is still mounted and marked dirty\r\n      // (It might have been unmounted by a parent rebuild)\r\n      if (element.mounted) {\r\n        try {\r\n          if (this.flutterConfig.debugMode) {\r\n            console.log(`[FlutterJSRuntime] \uD83D\uDD28 Rebuilding dirty element: ${element.widget?.constructor.name}`);\r\n          }\r\n\r\n          // \u2705 Targeted Rebuild:\r\n          // element.rebuild() calls performRebuild() -> gets new VNode\r\n          // AND calls applyChanges() -> patches the DOM specifically for this element\r\n          element.rebuild();\r\n\r\n        } catch (e) {\r\n          console.error(`[FlutterJSRuntime] Error rebuilding element ${element.widget?.constructor.name}:`, e);\r\n          this.handleError('rebuild', e, { element: element.toString() });\r\n        }\r\n      }\r\n    }\r\n\r\n    // Check if more updates were queued during processing\r\n    if (this.dirtyElements.size > 0) {\r\n      if (this.flutterConfig.debugMode) {\r\n        console.log(`[FlutterJSRuntime] \uD83D\uDD04 More updates queued during batch, scheduling next batch...`);\r\n      }\r\n      Promise.resolve().then(() => this.processBuildQueue());\r\n    }\r\n  }\r\n\r\n  onElementMounted(element) {\r\n    if (!element) return;\r\n    if (this.flutterConfig.debugMode) {\r\n      console.log('[FlutterJSRuntime] \uD83D\uDD0C Element mounted:', element.widget?.constructor.name);\r\n    }\r\n    this.triggerLifecycleCallback('onElementMounted', element);\r\n  }\r\n\r\n  onElementUpdated(element) {\r\n    if (!element) return;\r\n    if (this.flutterConfig.debugMode) {\r\n      console.log('[FlutterJSRuntime] \uD83D\uDD04 Element updated:', element.widget?.constructor.name);\r\n    }\r\n    this.triggerLifecycleCallback('onElementUpdated', element);\r\n  }\r\n\r\n  onElementUnmounted(element) {\r\n    if (!element) return;\r\n    if (this.flutterConfig.debugMode) {\r\n      console.log('[FlutterJSRuntime] \uD83D\uDDD1\uFE0F Element unmounted:', element.widget?.constructor.name);\r\n    }\r\n    if (element._id) {\r\n      this.elementRegistry.delete(element._id);\r\n    }\r\n    if (element.widget) {\r\n      this.widgetCache.delete(element.widget);\r\n    }\r\n    this.triggerLifecycleCallback('onElementUnmounted', element);\r\n  }\r\n\r\n  // ============================================================================\r\n  // LIFECYCLE CALLBACKS\r\n  // ============================================================================\r\n\r\n  on(eventName, callback) {\r\n    if (this.lifecycleCallbacks[eventName] && typeof callback === 'function') {\r\n      this.lifecycleCallbacks[eventName].push(callback);\r\n      if (this.flutterConfig.debugMode) {\r\n        console.log(`[FlutterJSRuntime] \uD83D\uDCDD Registered callback for: ${eventName}`);\r\n      }\r\n    } else {\r\n      console.warn(`[FlutterJSRuntime] Unknown event: ${eventName}`);\r\n    }\r\n    return this;\r\n  }\r\n\r\n  off(eventName, callback) {\r\n    if (this.lifecycleCallbacks[eventName]) {\r\n      const index = this.lifecycleCallbacks[eventName].indexOf(callback);\r\n      if (index > -1) {\r\n        this.lifecycleCallbacks[eventName].splice(index, 1);\r\n      }\r\n    }\r\n    return this;\r\n  }\r\n\r\n  triggerLifecycleCallback(eventName, data) {\r\n    const callbacks = this.lifecycleCallbacks[eventName] || [];\r\n    callbacks.forEach(callback => {\r\n      try {\r\n        callback(data, this);\r\n      } catch (error) {\r\n        console.error(`[FlutterJSRuntime] Callback error (${eventName}):`, error);\r\n      }\r\n    });\r\n  }\r\n\r\n  // ============================================================================\r\n  // ERROR HANDLING\r\n  // ============================================================================\r\n\r\n  setupErrorHandling() {\r\n    if (!this.flutterConfig.isBrowser) return;\r\n    if (this._errorHandlingSetup) return;\r\n    this._errorHandlingSetup = true;\r\n\r\n    const errorHandler = (event) => {\r\n      this.handleError('uncaught', event.error || event.message, {\r\n        filename: event.filename,\r\n        lineno: event.lineno,\r\n        colno: event.colno\r\n      });\r\n    };\r\n\r\n    const rejectionHandler = (event) => {\r\n      this.handleError('promise', event.reason, {\r\n        promise: event.promise\r\n      });\r\n    };\r\n\r\n    window.addEventListener('error', errorHandler);\r\n    window.addEventListener('unhandledrejection', rejectionHandler);\r\n    this._errorHandlers = { errorHandler, rejectionHandler };\r\n  }\r\n\r\n  handleError(source, error, context = {}) {\r\n    const errorInfo = {\r\n      source,\r\n      error,\r\n      context,\r\n      timestamp: Date.now(),\r\n      stack: error instanceof Error ? error.stack : null\r\n    };\r\n\r\n    console.error(`[FlutterJSRuntime] \u274C Error in ${source}:`, error);\r\n\r\n    if (this.flutterConfig.debugMode && error instanceof Error && error.stack) {\r\n      console.error('[FlutterJSRuntime] Stack trace:', error.stack);\r\n    }\r\n\r\n    this.triggerLifecycleCallback('onError', errorInfo);\r\n\r\n    if (this.flutterConfig.debugMode && this.flutterConfig.isBrowser) {\r\n      this.showErrorOverlay(source, error, context);\r\n    }\r\n  }\r\n\r\n  showErrorOverlay(source, error, context) {\r\n    try {\r\n      if (typeof document === 'undefined') return;\r\n\r\n      const existing = document.getElementById('__flutterjs_error_overlay__');\r\n      if (existing) existing.remove();\r\n\r\n      const errorMessage = error instanceof Error ? error.message : String(error);\r\n      const errorStack = error instanceof Error && error.stack\r\n        ? error.stack.split('\\n').slice(0, 10).join('\\n')\r\n        : 'No stack trace available';\r\n\r\n      const overlay = document.createElement('div');\r\n      overlay.id = '__flutterjs_error_overlay__';\r\n      overlay.style.cssText = `\r\n        position: fixed; top: 0; left: 0; right: 0; bottom: 0;\r\n        background: rgba(0, 0, 0, 0.9); color: white; z-index: 999999;\r\n        overflow-y: auto; font-family: 'Monaco', 'Menlo', monospace;\r\n        font-size: 13px; padding: 20px;\r\n      `;\r\n\r\n      overlay.innerHTML = `\r\n        <div style=\"max-width: 900px; margin: 0 auto;\">\r\n          <div style=\"background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%);\r\n            padding: 20px; border-radius: 8px 8px 0 0; display: flex;\r\n            align-items: center; justify-content: space-between;\">\r\n            <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n              <div style=\"width: 48px; height: 48px; background: rgba(255,255,255,0.2);\r\n                border-radius: 50%; display: flex; align-items: center;\r\n                justify-content: center; font-size: 24px;\">\u26A0</div>\r\n              <div>\r\n                <h2 style=\"margin: 0; font-size: 20px; font-weight: 600;\">\r\n                  ${escapeHtml(source.charAt(0).toUpperCase() + source.slice(1))} Error\r\n                </h2>\r\n                <p style=\"margin: 4px 0 0 0; opacity: 0.9; font-size: 12px;\">\r\n                  FlutterJS Runtime Error\r\n                </p>\r\n              </div>\r\n            </div>\r\n            <button onclick=\"this.parentElement.parentElement.parentElement.remove()\"\r\n              style=\"background: rgba(255,255,255,0.2); border: none; color: white;\r\n              width: 32px; height: 32px; border-radius: 50%; cursor: pointer;\r\n              font-size: 18px;\">\u00D7</button>\r\n          </div>\r\n          <div style=\"background: #1e1e1e; padding: 20px; border-radius: 0 0 8px 8px;\">\r\n            <div style=\"margin-bottom: 20px;\">\r\n              <h3 style=\"color: #ff6b6b; margin: 0 0 12px 0; font-size: 14px;\r\n                font-weight: 600; text-transform: uppercase;\">Error Message</h3>\r\n              <pre style=\"background: #2d2d2d; padding: 16px; border-radius: 6px;\r\n                border-left: 4px solid #d32f2f; margin: 0; overflow-x: auto;\r\n                color: #ff8a80; line-height: 1.5;\">${escapeHtml(errorMessage)}</pre>\r\n            </div>\r\n            ${errorStack && errorStack !== 'No stack trace available' ? `\r\n              <div style=\"margin-bottom: 20px;\">\r\n                <h3 style=\"color: #64b5f6; margin: 0 0 12px 0; font-size: 14px;\r\n                  font-weight: 600; text-transform: uppercase;\">Stack Trace</h3>\r\n                <pre style=\"background: #2d2d2d; padding: 16px; border-radius: 6px;\r\n                  border-left: 4px solid #1976d2; margin: 0; overflow-x: auto;\r\n                  color: #90caf9; line-height: 1.6; font-size: 12px;\">${escapeHtml(errorStack)}</pre>\r\n              </div>\r\n            ` : ''}\r\n            ${Object.keys(context).length > 0 ? `\r\n              <div>\r\n                <h3 style=\"color: #81c784; margin: 0 0 12px 0; font-size: 14px;\r\n                  font-weight: 600; text-transform: uppercase;\">Context</h3>\r\n                <pre style=\"background: #2d2d2d; padding: 16px; border-radius: 6px;\r\n                  border-left: 4px solid #388e3c; margin: 0; overflow-x: auto;\r\n                  color: #a5d6a7; line-height: 1.6; font-size: 12px;\">${escapeHtml(JSON.stringify(context, null, 2))}</pre>\r\n              </div>\r\n            ` : ''}\r\n          </div>\r\n        </div>\r\n      `;\r\n\r\n      document.body.appendChild(overlay);\r\n    } catch (e) {\r\n      console.error('[FlutterJSRuntime] Failed to show error overlay:', e);\r\n    }\r\n  }\r\n\r\n  // ============================================================================\r\n  // PERFORMANCE & UTILITIES\r\n  // ============================================================================\r\n\r\n  recordPerformance(operation, identifier, duration) {\r\n    if (!this.flutterConfig.enablePerformanceTracking) return;\r\n    const key = `${operation}:${identifier}`;\r\n    if (!this.performanceMarks.has(key)) {\r\n      this.performanceMarks.set(key, {\r\n        count: 0, totalTime: 0, avgTime: 0,\r\n        minTime: Infinity, maxTime: 0\r\n      });\r\n    }\r\n    const mark = this.performanceMarks.get(key);\r\n    mark.count++;\r\n    mark.totalTime += duration;\r\n    mark.avgTime = mark.totalTime / mark.count;\r\n    mark.minTime = Math.min(mark.minTime, duration);\r\n    mark.maxTime = Math.max(mark.maxTime, duration);\r\n  }\r\n\r\n  getPerformanceReport() {\r\n    const report = {};\r\n    this.performanceMarks.forEach((data, key) => {\r\n      report[key] = {\r\n        calls: data.count,\r\n        total: `${data.totalTime.toFixed(2)}ms`,\r\n        average: `${data.avgTime.toFixed(2)}ms`,\r\n        min: `${data.minTime.toFixed(2)}ms`,\r\n        max: `${data.maxTime.toFixed(2)}ms`\r\n      };\r\n    });\r\n    return report;\r\n  }\r\n\r\n  clearPerformanceMarks() {\r\n    this.performanceMarks.clear();\r\n  }\r\n\r\n  getFlutterConfig() {\r\n    return { ...this.flutterConfig };\r\n  }\r\n\r\n  getElementById(elementId) {\r\n    return this.elementRegistry.get(elementId);\r\n  }\r\n\r\n  getAllElements() {\r\n    return Array.from(this.elementRegistry.values());\r\n  }\r\n\r\n  getElementCount() {\r\n    return this.elementRegistry.size;\r\n  }\r\n\r\n  isInitialized() {\r\n    return this.initialized;\r\n  }\r\n\r\n  isMounted() {\r\n    return this.mounted;\r\n  }\r\n\r\n  getStats() {\r\n    const baseMetrics = this.getMetrics();\r\n\r\n    // \u2705 FIX: Handle null baseMetrics\r\n    if (!baseMetrics) {\r\n      return {\r\n        flutter: {\r\n          elements: this.elementRegistry.size,\r\n          cachedWidgets: this.widgetCache ? 'enabled' : 'disabled',\r\n          inputType: this.inputType,\r\n          initialized: this.initialized,\r\n          mounted: this.mounted,\r\n          hasApp: this.app !== null,\r\n          lifecycleCallbacks: Object.keys(this.lifecycleCallbacks).reduce((acc, key) => {\r\n            acc[key] = this.lifecycleCallbacks[key].length;\r\n            return acc;\r\n          }, {})\r\n        }\r\n      };\r\n    }\r\n\r\n    return {\r\n      ...baseMetrics,\r\n      flutter: {\r\n        elements: this.elementRegistry.size,\r\n        cachedWidgets: this.widgetCache ? 'enabled' : 'disabled',\r\n        inputType: this.inputType,\r\n        lifecycleCallbacks: Object.keys(this.lifecycleCallbacks).reduce((acc, key) => {\r\n          acc[key] = this.lifecycleCallbacks[key].length;\r\n          return acc;\r\n        }, {})\r\n      }\r\n    };\r\n  }\r\n\r\n  destroy() {\r\n    if (this.flutterConfig.debugMode) {\r\n      console.log('[FlutterJSRuntime] \uD83D\uDDD1\uFE0F Destroying...');\r\n    }\r\n    if (this._errorHandlers && this.flutterConfig.isBrowser) {\r\n      window.removeEventListener('error', this._errorHandlers.errorHandler);\r\n      window.removeEventListener('unhandledrejection', this._errorHandlers.rejectionHandler);\r\n    }\r\n    this.elementRegistry.clear();\r\n    this.widgetCache = new WeakMap();\r\n    Object.keys(this.lifecycleCallbacks).forEach(key => {\r\n      this.lifecycleCallbacks[key] = [];\r\n    });\r\n    this.performanceMarks.clear();\r\n    super.destroy();\r\n    this.initialized = false;\r\n    this.mounted = false;\r\n    if (this.flutterConfig.debugMode) {\r\n      console.log('[FlutterJSRuntime] \u2705 Destroyed');\r\n    }\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// GLOBAL API\r\n// ============================================================================\r\n\r\n\r\nlet globalFlutterRuntime = null;\r\n\r\nexport function runApp(rootWidgetOrVNode, options = {}) {\r\n  try {\r\n    if (globalFlutterRuntime) {\r\n      if (options.debugMode) {\r\n        console.log('[FlutterJS] \u267B\uFE0F Reusing existing runtime');\r\n      }\r\n    } else {\r\n      if (options.debugMode) {\r\n        console.log('[FlutterJS] \uD83C\uDD95 Creating new Flutter runtime');\r\n      }\r\n      globalFlutterRuntime = new FlutterJSRuntime({\r\n        debugMode: options.debugMode || false,\r\n        enableHotReload: options.enableHotReload !== false,\r\n        enablePerformanceTracking: options.enablePerformanceTracking !== false,\r\n        enableStateTracking: options.enableStateTracking !== false,\r\n        enableErrorBoundaries: options.enableErrorBoundaries !== false,\r\n        strictMode: options.strictMode || false,\r\n        mode: options.mode || 'csr'\r\n      });\r\n    }\r\n\r\n    const enhancedOptions = {\r\n      ...options,\r\n      context: {\r\n        ...options.context,\r\n        runtime: globalFlutterRuntime\r\n      }\r\n    };\r\n\r\n    return globalFlutterRuntime.runApp(rootWidgetOrVNode, enhancedOptions);\r\n\r\n  } catch (error) {\r\n    console.error('[FlutterJS] \u274C Failed to run app:', error);\r\n    throw error;\r\n  }\r\n}\r\n\r\nexport function getRuntime() {\r\n  return globalFlutterRuntime;\r\n}\r\n\r\nexport function updateApp(updateFn) {\r\n  if (!globalFlutterRuntime) {\r\n    throw new Error('[FlutterJS] No runtime instance. Call runApp() first.');\r\n  }\r\n\r\n  if (updateFn && typeof updateFn === 'function') {\r\n    updateFn();\r\n  }\r\n\r\n  globalFlutterRuntime.update();\r\n}\r\n\r\nexport function hotReload() {\r\n  if (!globalFlutterRuntime) {\r\n    console.warn('[FlutterJS] No runtime instance');\r\n    return;\r\n  }\r\n\r\n  globalFlutterRuntime.hotReload();\r\n}\r\n\r\n/**\r\n * Server-side render to HTML string\r\n * \r\n * This renders a Flutter app to an HTML string for server-side rendering.\r\n * The resulting HTML can be sent to the client and hydrated.\r\n * \r\n * @param {Widget} app - Root widget\r\n * @param {Object} options - SSR options\r\n * @param {string} options.title - Page title\r\n * @param {Object} options.meta - Meta tags\r\n * @param {Array} options.styles - External stylesheets\r\n * @param {Array} options.scripts - External scripts\r\n * @param {boolean} options.includeHydration - Include hydration data (default: true)\r\n * @param {boolean} options.includeCriticalCSS - Include critical CSS (default: true)\r\n * @param {boolean} options.includeRuntime - Include runtime script (default: true)\r\n * @returns {string} HTML string\r\n */\r\nexport function renderToString(app, options = {}) {\r\n  try {\r\n    if (options.debugMode) {\r\n      console.log('[FlutterJS] \u00F0\u0178\u201C\u201E SSR: Creating temporary runtime for rendering');\r\n    }\r\n\r\n    // Create temporary Flutter runtime for SSR\r\n    const ssrRuntime = new FlutterJSRuntime({\r\n      debugMode: options.debugMode || false,\r\n      mode: 'ssr'\r\n    });\r\n\r\n    // Enhanced context with Flutter runtime\r\n    const enhancedOptions = {\r\n      ...options,\r\n      context: {\r\n        ...options.context,\r\n        runtime: ssrRuntime // \u00E2\u0153\u2026 Pass Flutter runtime with createElement\r\n      }\r\n    };\r\n\r\n    // Use core renderToString with enhanced context\r\n    const html = coreRenderToString(app, enhancedOptions);\r\n\r\n    // Cleanup SSR runtime\r\n    ssrRuntime.destroy();\r\n\r\n    return html;\r\n\r\n  } catch (error) {\r\n    console.error('[FlutterJS] \u00E2\u009D\u0152 SSR failed:', error);\r\n    throw error;\r\n  }\r\n}\r\n\r\n/**\r\n * Hydrate server-rendered content\r\n * \r\n * This attaches event listeners and makes a server-rendered app interactive.\r\n * Should be called on the client after receiving SSR HTML.\r\n * \r\n * @param {Widget} app - Root widget (must match SSR widget)\r\n * @param {Object} options - Hydration options\r\n * @param {string} options.target - CSS selector for root element (default: '#root')\r\n * @param {boolean} options.debugMode - Enable debug logging\r\n * @returns {FlutterJSRuntime} Runtime instance\r\n */\r\nexport function hydrate(app, options = {}) {\r\n  try {\r\n    if (options.debugMode) {\r\n      console.log('[FlutterJS] \u00F0\u0178\u2019\u00A7 Starting hydration...');\r\n    }\r\n\r\n    if (!globalFlutterRuntime) {\r\n      globalFlutterRuntime = new FlutterJSRuntime({\r\n        debugMode: options.debugMode || false,\r\n        enableHotReload: options.enableHotReload !== false,\r\n        mode: 'hydrate'\r\n      });\r\n    }\r\n\r\n    // Enhanced options with Flutter runtime\r\n    const enhancedOptions = {\r\n      ...options,\r\n      context: {\r\n        ...options.context,\r\n        runtime: globalFlutterRuntime // \u00E2\u0153\u2026 Pass Flutter runtime with createElement\r\n      }\r\n    };\r\n\r\n    return coreHydrate(app, enhancedOptions);\r\n\r\n  } catch (error) {\r\n    console.error('[FlutterJS] \u00E2\u009D\u0152 Hydration failed:', error);\r\n    throw error;\r\n  }\r\n}\r\n\r\n/**\r\n * Get performance metrics\r\n * \r\n * Returns detailed performance metrics including render times,\r\n * update counts, and Flutter-specific statistics.\r\n * \r\n * @returns {Object|null} Performance metrics or null if no runtime\r\n */\r\nexport function getMetrics() {\r\n  if (!globalFlutterRuntime) {\r\n    return null;\r\n  }\r\n  return globalFlutterRuntime.getStats();\r\n}\r\n\r\n/**\r\n * Get performance report\r\n * \r\n * Returns a detailed report of all performance measurements.\r\n * \r\n * @returns {Object|null} Performance report or null if no runtime\r\n */\r\nexport function getPerformanceReport() {\r\n  if (!globalFlutterRuntime) {\r\n    return null;\r\n  }\r\n  return globalFlutterRuntime.getPerformanceReport();\r\n}\r\n\r\n/**\r\n * Clear performance metrics\r\n * \r\n * Resets all performance tracking data.\r\n */\r\nexport function clearMetrics() {\r\n  if (!globalFlutterRuntime) {\r\n    return;\r\n  }\r\n  globalFlutterRuntime.clearMetrics();\r\n  globalFlutterRuntime.clearPerformanceMarks();\r\n}\r\n\r\n/**\r\n * Register lifecycle callback\r\n * \r\n * Available events:\r\n * - onElementCreated: When an element is created\r\n * - onElementMounted: When an element is mounted to DOM\r\n * - onElementUpdated: When an element is updated\r\n * - onElementUnmounted: When an element is unmounted\r\n * - onError: When an error occurs\r\n * - onStateChange: When state changes\r\n * \r\n * @param {string} eventName - Event name\r\n * @param {Function} callback - Callback function\r\n */\r\nexport function on(eventName, callback) {\r\n  if (!globalFlutterRuntime) {\r\n    console.warn('[FlutterJS] No runtime instance. Call runApp() first.');\r\n    return;\r\n  }\r\n  globalFlutterRuntime.on(eventName, callback);\r\n}\r\n\r\n/**\r\n * Unregister lifecycle callback\r\n * \r\n * @param {string} eventName - Event name\r\n * @param {Function} callback - Callback function to remove\r\n */\r\nexport function off(eventName, callback) {\r\n  if (!globalFlutterRuntime) {\r\n    return;\r\n  }\r\n  globalFlutterRuntime.off(eventName, callback);\r\n}\r\n\r\n/**\r\n * Get Flutter configuration\r\n * \r\n * @returns {Object|null} Flutter config or null if no runtime\r\n */\r\nexport function getConfig() {\r\n  if (!globalFlutterRuntime) {\r\n    return null;\r\n  }\r\n  return globalFlutterRuntime.getFlutterConfig();\r\n}\r\n\r\n/**\r\n * Dispose runtime and cleanup\r\n * \r\n * This completely destroys the runtime and cleans up all resources.\r\n * After calling this, you need to call runApp() again to start a new app.\r\n */\r\nexport function dispose() {\r\n  if (globalFlutterRuntime) {\r\n    globalFlutterRuntime.destroy();\r\n    globalFlutterRuntime = null;\r\n  }\r\n}\r\n\r\n/**\r\n * Check if runtime is initialized\r\n * \r\n * @returns {boolean} True if runtime exists and is initialized\r\n */\r\nexport function isInitialized() {\r\n  return globalFlutterRuntime !== null && globalFlutterRuntime.isInitialized();\r\n}\r\n\r\n/**\r\n * Check if app is mounted\r\n * \r\n * @returns {boolean} True if app is mounted to DOM\r\n */\r\nexport function isMounted() {\r\n  return globalFlutterRuntime !== null && globalFlutterRuntime.isMounted();\r\n}\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport default {\r\n  // Classes\r\n  FlutterJSRuntime,\r\n  VNodeRuntime,\r\n\r\n  // Core API\r\n  runApp,\r\n  getRuntime,\r\n  updateApp,\r\n  hotReload,\r\n  renderToString,\r\n  hydrate,\r\n\r\n  // Metrics\r\n  getMetrics,\r\n  getPerformanceReport,\r\n  clearMetrics,\r\n\r\n  // Lifecycle\r\n  on,\r\n  off,\r\n\r\n  // Utilities\r\n  getConfig,\r\n  dispose,\r\n  isInitialized,\r\n  isMounted,\r\n  isBrowser,\r\n  isSSR\r\n};\r\n\r\n// ============================================================================\r\n// BROWSER GLOBAL API\r\n// ============================================================================\r\n\r\nif (typeof window !== 'undefined') {\r\n  console.log('[FlutterJS] \u00F0\u0178\u0152\u0090 Setting up window.FlutterJS');\r\n\r\n  window.FlutterJS = {\r\n    // Core\r\n    runApp,\r\n    getRuntime,\r\n    updateApp,\r\n    hotReload,\r\n    renderToString,\r\n    hydrate,\r\n\r\n    // Metrics\r\n    getMetrics,\r\n    getPerformanceReport,\r\n    clearMetrics,\r\n\r\n    // Lifecycle\r\n    on,\r\n    off,\r\n\r\n    // Utilities\r\n    getConfig,\r\n    dispose,\r\n    isInitialized,\r\n    isMounted,\r\n\r\n    // Version info\r\n    version: '1.0.0',\r\n    environment: 'browser'\r\n  };\r\n\r\n  console.log('[FlutterJS] \u00E2\u0153\u2026 window.FlutterJS ready');\r\n  console.log('[FlutterJS] \u00F0\u0178\u201C\u0161 Available methods:', Object.keys(window.FlutterJS).join(', '));\r\n}"],
-  "mappings": "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",
-  "names": ["VNodeRuntime", "coreRenderToString", "coreHydrate", "StatelessElement", "StatefulElement", "ComponentElement", "InheritedElement", "VNodeBuilder", "VNodeRenderer", "isBrowser", "isSSR", "escapeHtml", "text", "map", "m", "generateId", "deepMerge", "target", "sources", "source", "isObject", "key", "item", "isVNode", "obj", "isWidget", "FlutterJSRuntime", "options", "startTime", "initTime", "error", "widget", "parent", "element", "cachedElement", "elementId", "duration", "input", "inputIsVNode", "inputIsWidget", "context", "vNodeBuilder", "updateFn", "newVNode", "elements", "a", "b", "e", "eventName", "callback", "index", "data", "errorHandler", "event", "rejectionHandler", "errorInfo", "existing", "errorMessage", "errorStack", "overlay", "operation", "identifier", "mark", "report", "baseMetrics", "acc", "globalFlutterRuntime", "runApp", "rootWidgetOrVNode", "enhancedOptions", "getRuntime", "updateApp", "hotReload", "renderToString", "app", "ssrRuntime", "html", "hydrate", "getMetrics", "getPerformanceReport", "clearMetrics", "on", "off", "getConfig", "dispose", "isInitialized", "isMounted", "flutterjs_runtime_default"]
-}
diff --git a/packages/flutterjs_engine/src/runtime/dist/focus_manager.js b/packages/flutterjs_engine/src/runtime/dist/focus_manager.js
deleted file mode 100644
index 2b2c4b55..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/focus_manager.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class l{constructor(e){this.runtime=e,this.focusedElement=null,this.focusableElements=new Map,this.focusScopes=new Map,this.activeScopeId=null,this.focusChangeListeners=new Set,this.keyboardEnabled=!1,this.keyboardHandler=null}registerFocusable(e,s,t={}){if(!e||!s){console.warn("[FocusManager] Invalid registration:",{elementId:e,domElement:s});return}const o={elementId:e,element:s,canRequestFocus:t.canRequestFocus!==!1,skipTraversal:t.skipTraversal===!0,autofocus:t.autofocus===!0,onFocusChange:t.onFocusChange||null,tabIndex:t.tabIndex??0,scopeId:t.scopeId||null};this.focusableElements.set(e,o),o.skipTraversal||(s.tabIndex=o.tabIndex),this._attachDOMListeners(s,e),o.autofocus&&requestAnimationFrame(()=>{this.focusableElements.has(e)&&this.requestFocus(e)})}unregisterFocusable(e){const s=this.focusableElements.get(e);if(s){this.focusedElement===e&&(this.focusedElement=null,this._notifyFocusChange(null,e));for(const[t,o]of this.focusScopes.entries()){const n=o.indexOf(e);n!==-1&&o.splice(n,1)}this._detachDOMListeners(s.element,e),this.focusableElements.delete(e)}}requestFocus(e,s={}){const t=this.focusableElements.get(e);if(!t)return console.warn("[FocusManager] Cannot focus unknown element:",e),!1;if(!t.canRequestFocus)return console.warn("[FocusManager] Element cannot receive focus:",e),!1;if(this.activeScopeId&&t.scopeId!==this.activeScopeId)return console.warn("[FocusManager] Focus request blocked by active scope"),!1;const o=this.focusedElement;o&&o!==e&&this._blurElement(o);try{return t.element.focus(s),this.focusedElement=e,this._notifyFocusChange(e,o),t.onFocusChange&&t.onFocusChange(!0),!0}catch(n){return console.error("[FocusManager] Focus failed:",n),!1}}unfocus(e){this.focusedElement===e&&(this._blurElement(e),this.focusedElement=null,this._notifyFocusChange(null,e))}_blurElement(e){const s=this.focusableElements.get(e);if(s)try{s.element.blur(),s.onFocusChange&&s.onFocusChange(!1)}catch(t){console.error("[FocusManager] Blur failed:",t)}}moveFocus(e="forward"){const s=this._getFocusableInScope();if(s.length===0){console.warn("[FocusManager] No focusable elements available");return}s.sort((c,u)=>{const i=this.focusableElements.get(c),a=this.focusableElements.get(u);if(i.tabIndex!==a.tabIndex)return i.tabIndex-a.tabIndex;const r=i.element.compareDocumentPosition(a.element);return r&Node.DOCUMENT_POSITION_FOLLOWING?-1:r&Node.DOCUMENT_POSITION_PRECEDING?1:0});const t=this.focusedElement?s.indexOf(this.focusedElement):-1;let o;e==="forward"?o=(t+1)%s.length:o=(t-1+s.length)%s.length;const n=s[o];this.requestFocus(n)}_getFocusableInScope(){const e=Array.from(this.focusableElements.entries()).filter(([t,o])=>!o.skipTraversal).map(([t])=>t);if(!this.activeScopeId)return e;const s=this.focusScopes.get(this.activeScopeId)||[];return e.filter(t=>s.includes(t))}createScope(e,s=[]){this.focusScopes.set(e,s)}addToScope(e,s){this.focusScopes.has(e)||this.createScope(e);const t=this.focusScopes.get(e);t.includes(s)||t.push(s);const o=this.focusableElements.get(s);o&&(o.scopeId=e)}pushScope(e){if(!this.focusScopes.has(e)){console.warn("[FocusManager] Cannot activate unknown scope:",e);return}this.activeScopeId=e;const s=this.focusedElement?this.focusableElements.get(this.focusedElement):null;s&&s.scopeId!==e&&this.unfocus(this.focusedElement)}popScope(){this.activeScopeId=null}removeScope(e){(this.focusScopes.get(e)||[]).forEach(t=>{const o=this.focusableElements.get(t);o&&o.scopeId===e&&(o.scopeId=null)}),this.focusScopes.delete(e),this.activeScopeId===e&&(this.activeScopeId=null)}setupKeyboardNavigation(){this.keyboardEnabled||(this.keyboardHandler=e=>{if(e.key==="Tab"){e.preventDefault();const s=e.shiftKey?"backward":"forward";this.moveFocus(s)}e.key==="Escape"&&this.activeScopeId&&this.popScope()},document.addEventListener("keydown",this.keyboardHandler),this.keyboardEnabled=!0)}disableKeyboardNavigation(){this.keyboardEnabled&&(this.keyboardHandler&&(document.removeEventListener("keydown",this.keyboardHandler),this.keyboardHandler=null),this.keyboardEnabled=!1)}_attachDOMListeners(e,s){const t=()=>{if(this.focusedElement!==s){const n=this.focusedElement;this.focusedElement=s,this._notifyFocusChange(s,n);const c=this.focusableElements.get(s);c&&c.onFocusChange&&c.onFocusChange(!0)}},o=()=>{if(this.focusedElement===s){this.focusedElement=null,this._notifyFocusChange(null,s);const n=this.focusableElements.get(s);n&&n.onFocusChange&&n.onFocusChange(!1)}};e.addEventListener("focus",t),e.addEventListener("blur",o),e._focusHandlers={focusHandler:t,blurHandler:o}}_detachDOMListeners(e,s){if(!e._focusHandlers)return;const{focusHandler:t,blurHandler:o}=e._focusHandlers;e.removeEventListener("focus",t),e.removeEventListener("blur",o),delete e._focusHandlers}addFocusChangeListener(e){this.focusChangeListeners.add(e)}removeFocusChangeListener(e){this.focusChangeListeners.delete(e)}_notifyFocusChange(e,s){this.focusChangeListeners.forEach(t=>{try{t(e,s)}catch(o){console.error("[FocusManager] Listener error:",o)}})}get currentFocus(){return this.focusedElement}hasFocus(e){return this.focusedElement===e}getFocusableElements(){return Array.from(this.focusableElements.keys())}getElementInfo(e){return this.focusableElements.get(e)||null}clearFocus(){this.focusedElement&&(this._blurElement(this.focusedElement),this.focusedElement=null)}getStats(){return{totalFocusable:this.focusableElements.size,currentFocus:this.focusedElement,activeScope:this.activeScopeId,scopeCount:this.focusScopes.size,keyboardEnabled:this.keyboardEnabled,listeners:this.focusChangeListeners.size}}dispose(){this.disableKeyboardNavigation();for(const[e,s]of this.focusableElements.entries())this._detachDOMListeners(s.element,e);this.focusableElements.clear(),this.focusScopes.clear(),this.focusChangeListeners.clear(),this.focusedElement=null,this.activeScopeId=null}}export{l as FocusManager};
-//# sourceMappingURL=focus_manager.js.map
diff --git a/packages/flutterjs_engine/src/runtime/dist/focus_manager.js.map b/packages/flutterjs_engine/src/runtime/dist/focus_manager.js.map
deleted file mode 100644
index f93f9e89..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/focus_manager.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/focus_manager.js"],
-  "sourcesContent": ["/**\r\n * Focus Manager\r\n * \r\n * Manages keyboard focus and navigation across the widget tree.\r\n * Handles Tab navigation, autofocus, focus scopes, and programmatic focus control.\r\n * \r\n * Features:\r\n * - Focus registration and tracking\r\n * - Keyboard navigation (Tab/Shift+Tab)\r\n * - Focus scopes for modal dialogs\r\n * - Autofocus support\r\n * - Focus event callbacks\r\n * - Accessibility support\r\n */\r\n\r\nclass FocusManager {\r\n  constructor(runtime) {\r\n    this.runtime = runtime;\r\n    this.focusedElement = null;\r\n    this.focusableElements = new Map(); // elementId \u2192 FocusableInfo\r\n    this.focusScopes = new Map(); // scopeId \u2192 [elementIds]\r\n    this.activeScopeId = null;\r\n    \r\n    // Focus event listeners\r\n    this.focusChangeListeners = new Set();\r\n    \r\n    // Keyboard navigation\r\n    this.keyboardEnabled = false;\r\n    this.keyboardHandler = null;\r\n  }\r\n  \r\n  /**\r\n   * Register a focusable element\r\n   * @param {string} elementId - Unique element identifier\r\n   * @param {HTMLElement} domElement - Actual DOM element\r\n   * @param {Object} options - Focus configuration\r\n   */\r\n  registerFocusable(elementId, domElement, options = {}) {\r\n    if (!elementId || !domElement) {\r\n      console.warn('[FocusManager] Invalid registration:', { elementId, domElement });\r\n      return;\r\n    }\r\n    \r\n    const focusableInfo = {\r\n      elementId,\r\n      element: domElement,\r\n      canRequestFocus: options.canRequestFocus !== false,\r\n      skipTraversal: options.skipTraversal === true,\r\n      autofocus: options.autofocus === true,\r\n      onFocusChange: options.onFocusChange || null,\r\n      tabIndex: options.tabIndex ?? 0,\r\n      scopeId: options.scopeId || null\r\n    };\r\n    \r\n    this.focusableElements.set(elementId, focusableInfo);\r\n    \r\n    // Set tabIndex for keyboard navigation\r\n    if (!focusableInfo.skipTraversal) {\r\n      domElement.tabIndex = focusableInfo.tabIndex;\r\n    }\r\n    \r\n    // Attach DOM focus/blur listeners\r\n    this._attachDOMListeners(domElement, elementId);\r\n    \r\n    // Handle autofocus\r\n    if (focusableInfo.autofocus) {\r\n      // Defer to next tick to ensure element is mounted\r\n      requestAnimationFrame(() => {\r\n        if (this.focusableElements.has(elementId)) {\r\n          this.requestFocus(elementId);\r\n        }\r\n      });\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Unregister a focusable element\r\n   * @param {string} elementId - Element to unregister\r\n   */\r\n  unregisterFocusable(elementId) {\r\n    const info = this.focusableElements.get(elementId);\r\n    if (!info) return;\r\n    \r\n    // Blur if currently focused\r\n    if (this.focusedElement === elementId) {\r\n      this.focusedElement = null;\r\n      this._notifyFocusChange(null, elementId);\r\n    }\r\n    \r\n    // Remove from scopes\r\n    for (const [scopeId, elementIds] of this.focusScopes.entries()) {\r\n      const index = elementIds.indexOf(elementId);\r\n      if (index !== -1) {\r\n        elementIds.splice(index, 1);\r\n      }\r\n    }\r\n    \r\n    // Remove DOM listeners\r\n    this._detachDOMListeners(info.element, elementId);\r\n    \r\n    this.focusableElements.delete(elementId);\r\n  }\r\n  \r\n  /**\r\n   * Request focus for an element\r\n   * @param {string} elementId - Element to focus\r\n   * @param {Object} options - Focus options\r\n   * @returns {boolean} Success\r\n   */\r\n  requestFocus(elementId, options = {}) {\r\n    const info = this.focusableElements.get(elementId);\r\n    \r\n    if (!info) {\r\n      console.warn('[FocusManager] Cannot focus unknown element:', elementId);\r\n      return false;\r\n    }\r\n    \r\n    if (!info.canRequestFocus) {\r\n      console.warn('[FocusManager] Element cannot receive focus:', elementId);\r\n      return false;\r\n    }\r\n    \r\n    // Check scope restrictions\r\n    if (this.activeScopeId && info.scopeId !== this.activeScopeId) {\r\n      console.warn('[FocusManager] Focus request blocked by active scope');\r\n      return false;\r\n    }\r\n    \r\n    // Blur previous focus\r\n    const previousFocus = this.focusedElement;\r\n    if (previousFocus && previousFocus !== elementId) {\r\n      this._blurElement(previousFocus);\r\n    }\r\n    \r\n    // Focus new element\r\n    try {\r\n      info.element.focus(options);\r\n      this.focusedElement = elementId;\r\n      this._notifyFocusChange(elementId, previousFocus);\r\n      \r\n      // Call widget's onFocusChange callback\r\n      if (info.onFocusChange) {\r\n        info.onFocusChange(true);\r\n      }\r\n      \r\n      return true;\r\n    } catch (error) {\r\n      console.error('[FocusManager] Focus failed:', error);\r\n      return false;\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Blur an element\r\n   * @param {string} elementId - Element to blur\r\n   */\r\n  unfocus(elementId) {\r\n    if (this.focusedElement !== elementId) return;\r\n    \r\n    this._blurElement(elementId);\r\n    this.focusedElement = null;\r\n    this._notifyFocusChange(null, elementId);\r\n  }\r\n  \r\n  /**\r\n   * Internal blur helper\r\n   * @private\r\n   */\r\n  _blurElement(elementId) {\r\n    const info = this.focusableElements.get(elementId);\r\n    if (!info) return;\r\n    \r\n    try {\r\n      info.element.blur();\r\n      \r\n      // Call widget's onFocusChange callback\r\n      if (info.onFocusChange) {\r\n        info.onFocusChange(false);\r\n      }\r\n    } catch (error) {\r\n      console.error('[FocusManager] Blur failed:', error);\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Move focus in a direction (Tab navigation)\r\n   * @param {string} direction - 'forward' or 'backward'\r\n   */\r\n  moveFocus(direction = 'forward') {\r\n    const focusable = this._getFocusableInScope();\r\n    \r\n    if (focusable.length === 0) {\r\n      console.warn('[FocusManager] No focusable elements available');\r\n      return;\r\n    }\r\n    \r\n    // Sort by DOM position for correct tab order\r\n    focusable.sort((a, b) => {\r\n      const aInfo = this.focusableElements.get(a);\r\n      const bInfo = this.focusableElements.get(b);\r\n      \r\n      // First by tabIndex\r\n      if (aInfo.tabIndex !== bInfo.tabIndex) {\r\n        return aInfo.tabIndex - bInfo.tabIndex;\r\n      }\r\n      \r\n      // Then by DOM position\r\n      const position = aInfo.element.compareDocumentPosition(bInfo.element);\r\n      if (position & Node.DOCUMENT_POSITION_FOLLOWING) {\r\n        return -1;\r\n      } else if (position & Node.DOCUMENT_POSITION_PRECEDING) {\r\n        return 1;\r\n      }\r\n      return 0;\r\n    });\r\n    \r\n    // Find current index\r\n    const currentIndex = this.focusedElement \r\n      ? focusable.indexOf(this.focusedElement)\r\n      : -1;\r\n    \r\n    // Calculate next index\r\n    let nextIndex;\r\n    if (direction === 'forward') {\r\n      nextIndex = (currentIndex + 1) % focusable.length;\r\n    } else {\r\n      nextIndex = (currentIndex - 1 + focusable.length) % focusable.length;\r\n    }\r\n    \r\n    // Focus next element\r\n    const nextElementId = focusable[nextIndex];\r\n    this.requestFocus(nextElementId);\r\n  }\r\n  \r\n  /**\r\n   * Get focusable elements in current scope\r\n   * @private\r\n   */\r\n  _getFocusableInScope() {\r\n    const allFocusable = Array.from(this.focusableElements.entries())\r\n      .filter(([id, info]) => !info.skipTraversal)\r\n      .map(([id]) => id);\r\n    \r\n    // If no active scope, return all\r\n    if (!this.activeScopeId) {\r\n      return allFocusable;\r\n    }\r\n    \r\n    // Return only elements in active scope\r\n    const scopeElements = this.focusScopes.get(this.activeScopeId) || [];\r\n    return allFocusable.filter(id => scopeElements.includes(id));\r\n  }\r\n  \r\n  /**\r\n   * Create a focus scope (for modals, dialogs)\r\n   * @param {string} scopeId - Unique scope identifier\r\n   * @param {string[]} elementIds - Elements in this scope\r\n   */\r\n  createScope(scopeId, elementIds = []) {\r\n    this.focusScopes.set(scopeId, elementIds);\r\n  }\r\n  \r\n  /**\r\n   * Add element to scope\r\n   * @param {string} scopeId - Scope identifier\r\n   * @param {string} elementId - Element to add\r\n   */\r\n  addToScope(scopeId, elementId) {\r\n    if (!this.focusScopes.has(scopeId)) {\r\n      this.createScope(scopeId);\r\n    }\r\n    \r\n    const elements = this.focusScopes.get(scopeId);\r\n    if (!elements.includes(elementId)) {\r\n      elements.push(elementId);\r\n    }\r\n    \r\n    // Update element's scope\r\n    const info = this.focusableElements.get(elementId);\r\n    if (info) {\r\n      info.scopeId = scopeId;\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Activate a focus scope (restrict focus to this scope)\r\n   * @param {string} scopeId - Scope to activate\r\n   */\r\n  pushScope(scopeId) {\r\n    if (!this.focusScopes.has(scopeId)) {\r\n      console.warn('[FocusManager] Cannot activate unknown scope:', scopeId);\r\n      return;\r\n    }\r\n    \r\n    this.activeScopeId = scopeId;\r\n    \r\n    // If current focus is outside scope, blur it\r\n    const currentInfo = this.focusedElement \r\n      ? this.focusableElements.get(this.focusedElement)\r\n      : null;\r\n    \r\n    if (currentInfo && currentInfo.scopeId !== scopeId) {\r\n      this.unfocus(this.focusedElement);\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Deactivate current scope\r\n   */\r\n  popScope() {\r\n    this.activeScopeId = null;\r\n  }\r\n  \r\n  /**\r\n   * Remove a focus scope\r\n   * @param {string} scopeId - Scope to remove\r\n   */\r\n  removeScope(scopeId) {\r\n    // Clear scope ID from all elements\r\n    const elements = this.focusScopes.get(scopeId) || [];\r\n    elements.forEach(elementId => {\r\n      const info = this.focusableElements.get(elementId);\r\n      if (info && info.scopeId === scopeId) {\r\n        info.scopeId = null;\r\n      }\r\n    });\r\n    \r\n    this.focusScopes.delete(scopeId);\r\n    \r\n    // Clear active scope if it was this one\r\n    if (this.activeScopeId === scopeId) {\r\n      this.activeScopeId = null;\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Setup keyboard navigation\r\n   */\r\n  setupKeyboardNavigation() {\r\n    if (this.keyboardEnabled) return;\r\n    \r\n    this.keyboardHandler = (event) => {\r\n      // Tab key\r\n      if (event.key === 'Tab') {\r\n        event.preventDefault();\r\n        const direction = event.shiftKey ? 'backward' : 'forward';\r\n        this.moveFocus(direction);\r\n      }\r\n      \r\n      // Escape key - exit scope\r\n      if (event.key === 'Escape' && this.activeScopeId) {\r\n        this.popScope();\r\n      }\r\n    };\r\n    \r\n    document.addEventListener('keydown', this.keyboardHandler);\r\n    this.keyboardEnabled = true;\r\n  }\r\n  \r\n  /**\r\n   * Disable keyboard navigation\r\n   */\r\n  disableKeyboardNavigation() {\r\n    if (!this.keyboardEnabled) return;\r\n    \r\n    if (this.keyboardHandler) {\r\n      document.removeEventListener('keydown', this.keyboardHandler);\r\n      this.keyboardHandler = null;\r\n    }\r\n    \r\n    this.keyboardEnabled = false;\r\n  }\r\n  \r\n  /**\r\n   * Attach DOM focus/blur listeners\r\n   * @private\r\n   */\r\n  _attachDOMListeners(element, elementId) {\r\n    const focusHandler = () => {\r\n      if (this.focusedElement !== elementId) {\r\n        const previousFocus = this.focusedElement;\r\n        this.focusedElement = elementId;\r\n        this._notifyFocusChange(elementId, previousFocus);\r\n        \r\n        const info = this.focusableElements.get(elementId);\r\n        if (info && info.onFocusChange) {\r\n          info.onFocusChange(true);\r\n        }\r\n      }\r\n    };\r\n    \r\n    const blurHandler = () => {\r\n      if (this.focusedElement === elementId) {\r\n        this.focusedElement = null;\r\n        this._notifyFocusChange(null, elementId);\r\n        \r\n        const info = this.focusableElements.get(elementId);\r\n        if (info && info.onFocusChange) {\r\n          info.onFocusChange(false);\r\n        }\r\n      }\r\n    };\r\n    \r\n    element.addEventListener('focus', focusHandler);\r\n    element.addEventListener('blur', blurHandler);\r\n    \r\n    // Store handlers for cleanup\r\n    element._focusHandlers = { focusHandler, blurHandler };\r\n  }\r\n  \r\n  /**\r\n   * Detach DOM listeners\r\n   * @private\r\n   */\r\n  _detachDOMListeners(element, elementId) {\r\n    if (!element._focusHandlers) return;\r\n    \r\n    const { focusHandler, blurHandler } = element._focusHandlers;\r\n    element.removeEventListener('focus', focusHandler);\r\n    element.removeEventListener('blur', blurHandler);\r\n    \r\n    delete element._focusHandlers;\r\n  }\r\n  \r\n  /**\r\n   * Add focus change listener\r\n   * @param {Function} listener - Callback(newFocus, oldFocus)\r\n   */\r\n  addFocusChangeListener(listener) {\r\n    this.focusChangeListeners.add(listener);\r\n  }\r\n  \r\n  /**\r\n   * Remove focus change listener\r\n   * @param {Function} listener - Previously added listener\r\n   */\r\n  removeFocusChangeListener(listener) {\r\n    this.focusChangeListeners.delete(listener);\r\n  }\r\n  \r\n  /**\r\n   * Notify all listeners of focus change\r\n   * @private\r\n   */\r\n  _notifyFocusChange(newFocus, oldFocus) {\r\n    this.focusChangeListeners.forEach(listener => {\r\n      try {\r\n        listener(newFocus, oldFocus);\r\n      } catch (error) {\r\n        console.error('[FocusManager] Listener error:', error);\r\n      }\r\n    });\r\n  }\r\n  \r\n  /**\r\n   * Get current focus\r\n   * @returns {string|null} Currently focused element ID\r\n   */\r\n  get currentFocus() {\r\n    return this.focusedElement;\r\n  }\r\n  \r\n  /**\r\n   * Check if element has focus\r\n   * @param {string} elementId - Element to check\r\n   * @returns {boolean}\r\n   */\r\n  hasFocus(elementId) {\r\n    return this.focusedElement === elementId;\r\n  }\r\n  \r\n  /**\r\n   * Get all focusable elements\r\n   * @returns {string[]} Array of element IDs\r\n   */\r\n  getFocusableElements() {\r\n    return Array.from(this.focusableElements.keys());\r\n  }\r\n  \r\n  /**\r\n   * Get element info\r\n   * @param {string} elementId - Element ID\r\n   * @returns {Object|null} Element info\r\n   */\r\n  getElementInfo(elementId) {\r\n    return this.focusableElements.get(elementId) || null;\r\n  }\r\n  \r\n  /**\r\n   * Clear all focus\r\n   */\r\n  clearFocus() {\r\n    if (this.focusedElement) {\r\n      this._blurElement(this.focusedElement);\r\n      this.focusedElement = null;\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Get focus statistics\r\n   * @returns {Object} Statistics\r\n   */\r\n  getStats() {\r\n    return {\r\n      totalFocusable: this.focusableElements.size,\r\n      currentFocus: this.focusedElement,\r\n      activeScope: this.activeScopeId,\r\n      scopeCount: this.focusScopes.size,\r\n      keyboardEnabled: this.keyboardEnabled,\r\n      listeners: this.focusChangeListeners.size\r\n    };\r\n  }\r\n  \r\n  /**\r\n   * Dispose and cleanup\r\n   */\r\n  dispose() {\r\n    // Disable keyboard navigation\r\n    this.disableKeyboardNavigation();\r\n    \r\n    // Detach all DOM listeners\r\n    for (const [elementId, info] of this.focusableElements.entries()) {\r\n      this._detachDOMListeners(info.element, elementId);\r\n    }\r\n    \r\n    // Clear all data\r\n    this.focusableElements.clear();\r\n    this.focusScopes.clear();\r\n    this.focusChangeListeners.clear();\r\n    this.focusedElement = null;\r\n    this.activeScopeId = null;\r\n  }\r\n}\r\n\r\n\r\nexport {FocusManager};"],
-  "mappings": "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",
-  "names": ["FocusManager", "runtime", "elementId", "domElement", "options", "focusableInfo", "info", "scopeId", "elementIds", "index", "previousFocus", "error", "direction", "focusable", "a", "b", "aInfo", "bInfo", "position", "currentIndex", "nextIndex", "nextElementId", "allFocusable", "id", "scopeElements", "elements", "currentInfo", "event", "element", "focusHandler", "blurHandler", "listener", "newFocus", "oldFocus"]
-}
diff --git a/packages/flutterjs_engine/src/runtime/dist/gesture_recognizer.js b/packages/flutterjs_engine/src/runtime/dist/gesture_recognizer.js
deleted file mode 100644
index d28b967a..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/gesture_recognizer.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class o{constructor(t,e={}){if(!t||typeof t!="function")throw new Error("Gesture recognizer requires a callback function");this.callback=t,this.options=e,this.state="ready",this.disposed=!1}handleEvent(t,e){throw new Error("handleEvent() must be implemented by subclass")}reset(){this.state="ready"}recognize(t){if(!this.disposed){this.state="recognized";try{this.callback(t)}catch(e){console.error("[GestureRecognizer] Callback error:",e)}}}fail(){this.state="failed"}dispose(){this.disposed=!0,this.callback=null,this.options=null,this.state="ready"}get isDisposed(){return this.disposed}}class l extends o{constructor(t,e={}){super(t,e),this.maxDuration=e.maxDuration||300,this.maxMovement=e.maxMovement||10,this.minTaps=e.minTaps||1,this.maxTaps=e.maxTaps||1,this.startTime=null,this.startX=null,this.startY=null,this.tapCount=0,this.lastTapTime=0,this.tapTimeout=null}handleEvent(t,e){if(!this.disposed)switch(t){case"pointerdown":case"mousedown":case"touchstart":this.handleDown(e);break;case"pointermove":case"mousemove":case"touchmove":this.handleMove(e);break;case"pointerup":case"mouseup":case"touchend":this.handleUp(e);break;case"pointercancel":case"touchcancel":this.handleCancel();break}}handleDown(t){this.state="possible",this.startTime=Date.now(),this.startX=this.getX(t),this.startY=this.getY(t)}handleMove(t){if(this.state!=="possible")return;const e=this.getX(t),s=this.getY(t),i=Math.abs(e-this.startX),n=Math.abs(s-this.startY);Math.sqrt(i*i+n*n)>this.maxMovement&&this.fail()}handleUp(t){if(this.state!=="possible")return;const e=Date.now()-this.startTime,s=this.getX(t),i=this.getY(t),n=Math.abs(s-this.startX),a=Math.abs(i-this.startY),r=Math.sqrt(n*n+a*a);e<=this.maxDuration&&r<=this.maxMovement?this.handleTap(t):this.fail(),this.reset()}handleTap(t){const e=Date.now();e-this.lastTapTime<300?this.tapCount++:this.tapCount=1,this.lastTapTime=e,this.tapTimeout&&(clearTimeout(this.tapTimeout),this.tapTimeout=null),this.tapCount>=this.maxTaps?(this.recognize({type:"tap",tapCount:this.tapCount,position:{x:this.startX,y:this.startY},nativeEvent:t}),this.tapCount=0):this.tapCount>=this.minTaps&&(this.tapTimeout=setTimeout(()=>{this.recognize({type:"tap",tapCount:this.tapCount,position:{x:this.startX,y:this.startY},nativeEvent:t}),this.tapCount=0},300))}handleCancel(){this.fail()}getX(t){return t.clientX!==void 0&&t.clientX!==0?t.clientX:t.touches&&t.touches.length>0?t.touches[0].clientX:t.changedTouches&&t.changedTouches.length>0?t.changedTouches[0].clientX:0}getY(t){return t.clientY!==void 0&&t.clientY!==0?t.clientY:t.touches&&t.touches.length>0?t.touches[0].clientY:t.changedTouches&&t.changedTouches.length>0?t.changedTouches[0].clientY:0}dispose(){this.tapTimeout&&(clearTimeout(this.tapTimeout),this.tapTimeout=null),super.dispose()}}class u extends o{constructor(t,e={}){super(t,e),this.duration=e.duration||500,this.maxMovement=e.maxMovement||10,this.timer=null,this.startX=null,this.startY=null,this.recognized=!1}handleEvent(t,e){if(!this.disposed)switch(t){case"pointerdown":case"mousedown":case"touchstart":this.handleDown(e);break;case"pointermove":case"mousemove":case"touchmove":this.handleMove(e);break;case"pointerup":case"mouseup":case"touchend":case"pointercancel":case"touchcancel":this.handleEnd(e);break}}handleDown(t){this.state="possible",this.startX=this.getX(t),this.startY=this.getY(t),this.recognized=!1,this.timer=setTimeout(()=>{this.state==="possible"&&(this.recognized=!0,this.recognize({type:"longpress",position:{x:this.startX,y:this.startY},nativeEvent:t})),this.timer=null},this.duration)}handleMove(t){if(this.state!=="possible"||this.recognized)return;const e=this.getX(t),s=this.getY(t),i=Math.abs(e-this.startX),n=Math.abs(s-this.startY);Math.sqrt(i*i+n*n)>this.maxMovement&&this.cancel()}handleEnd(t){this.cancel(),this.reset()}cancel(){this.timer&&(clearTimeout(this.timer),this.timer=null),this.fail()}getX(t){return t.clientX||t.touches?.[0]?.clientX||0}getY(t){return t.clientY||t.touches?.[0]?.clientY||0}dispose(){this.cancel(),super.dispose()}}class d extends o{constructor(t,e={}){super(t,e),this.minDistance=e.minDistance||50,this.maxDuration=e.maxDuration||300,this.direction=e.direction||null,this.startTime=null,this.startX=null,this.startY=null}handleEvent(t,e){if(!this.disposed)switch(t){case"pointerdown":case"mousedown":case"touchstart":this.handleDown(e);break;case"pointerup":case"mouseup":case"touchend":this.handleUp(e);break;case"pointercancel":case"touchcancel":this.handleCancel();break}}handleDown(t){this.state="possible",this.startTime=Date.now(),this.startX=this.getX(t),this.startY=this.getY(t)}handleUp(t){if(this.state!=="possible")return;const e=Date.now()-this.startTime,s=this.getX(t),i=this.getY(t),n=s-this.startX,a=i-this.startY,r=Math.sqrt(n*n+a*a);if(e<=this.maxDuration&&r>=this.minDistance){const c=this.getDirection(n,a);if(this.direction==="horizontal"&&(c==="up"||c==="down")){this.fail(),this.reset();return}if(this.direction==="vertical"&&(c==="left"||c==="right")){this.fail(),this.reset();return}this.recognize({type:"swipe",direction:c,distance:r,velocity:r/e,delta:{dx:n,dy:a},start:{x:this.startX,y:this.startY},end:{x:s,y:i},nativeEvent:t})}else this.fail();this.reset()}handleCancel(){this.fail(),this.reset()}getDirection(t,e){const s=Math.atan2(e,t)*180/Math.PI;return s>=-45&&s<45?"right":s>=45&&s<135?"down":s>=-135&&s<-45?"up":"left"}getX(t){return t.clientX!==void 0&&t.clientX!==0?t.clientX:t.touches&&t.touches.length>0?t.touches[0].clientX:t.changedTouches&&t.changedTouches.length>0?t.changedTouches[0].clientX:0}getY(t){return t.clientY!==void 0&&t.clientY!==0?t.clientY:t.touches&&t.touches.length>0?t.touches[0].clientY:t.changedTouches&&t.changedTouches.length>0?t.changedTouches[0].clientY:0}}class g extends o{constructor(t,e={}){super(t,e),this.minDistance=e.minDistance||10,this.direction=e.direction||null,this.startX=null,this.startY=null,this.lastX=null,this.lastY=null,this.isPanning=!1,this.onStart=e.onStart||null,this.onUpdate=e.onUpdate||null,this.onEnd=e.onEnd||null}handleEvent(t,e){if(!this.disposed)switch(t){case"pointerdown":case"mousedown":case"touchstart":this.handleDown(e);break;case"pointermove":case"mousemove":case"touchmove":this.handleMove(e);break;case"pointerup":case"mouseup":case"touchend":this.handleUp(e);break;case"pointercancel":case"touchcancel":this.handleCancel();break}}handleDown(t){this.state="possible",this.startX=this.getX(t),this.startY=this.getY(t),this.lastX=this.startX,this.lastY=this.startY,this.isPanning=!1}handleMove(t){if(this.state==="failed")return;const e=this.getX(t),s=this.getY(t),i=e-this.startX,n=s-this.startY,a=Math.sqrt(i*i+n*n);if(!this.isPanning&&a>=this.minDistance){if(this.direction==="horizontal"&&Math.abs(n)>Math.abs(i)){this.fail();return}if(this.direction==="vertical"&&Math.abs(i)>Math.abs(n)){this.fail();return}if(this.isPanning=!0,this.state="recognized",this.onStart)try{this.onStart({type:"panstart",position:{x:e,y:s},nativeEvent:t})}catch(r){console.error("[PanRecognizer] onStart error:",r)}}if(this.isPanning){const r=e-this.lastX,c=s-this.lastY;if(this.lastX=e,this.lastY=s,this.onUpdate)try{this.onUpdate({type:"panupdate",position:{x:e,y:s},delta:{dx:r,dy:c},totalDelta:{dx:i,dy:n},nativeEvent:t})}catch(f){console.error("[PanRecognizer] onUpdate error:",f)}}}handleUp(t){if(this.isPanning){const e=this.getX(t),s=this.getY(t),i=e-this.startX,n=s-this.startY;if(this.onEnd)try{this.onEnd({type:"panend",position:{x:e,y:s},totalDelta:{dx:i,dy:n},nativeEvent:t})}catch(a){console.error("[PanRecognizer] onEnd error:",a)}this.recognize({type:"pan",start:{x:this.startX,y:this.startY},end:{x:e,y:s},delta:{dx:i,dy:n},nativeEvent:t})}this.reset(),this.isPanning=!1}handleCancel(){if(this.isPanning&&this.onEnd)try{this.onEnd({type:"pancancel",position:{x:this.lastX,y:this.lastY}})}catch(t){console.error("[PanRecognizer] onEnd (cancel) error:",t)}this.fail(),this.reset(),this.isPanning=!1}getX(t){return t.clientX||t.touches?.[0]?.clientX||0}getY(t){return t.clientY||t.touches?.[0]?.clientY||0}}class p extends o{constructor(t,e={}){super(t,e),this.minScale=e.minScale||.5,this.maxScale=e.maxScale||2,this.initialDistance=null,this.currentDistance=null,this.isScaling=!1,this.onStart=e.onStart||null,this.onUpdate=e.onUpdate||null,this.onEnd=e.onEnd||null}handleEvent(t,e){if(!this.disposed){if(!e.touches||e.touches.length<2){this.isScaling&&this.handleEnd(e);return}switch(t){case"touchstart":this.handleStart(e);break;case"touchmove":this.handleMove(e);break;case"touchend":case"touchcancel":this.handleEnd(e);break}}}handleStart(t){if(t.touches.length===2&&(this.state="possible",this.initialDistance=this.getDistance(t.touches[0],t.touches[1]),this.currentDistance=this.initialDistance,this.isScaling=!0,this.onStart))try{this.onStart({type:"scalestart",scale:1,nativeEvent:t})}catch(e){console.error("[ScaleRecognizer] onStart error:",e)}}handleMove(t){if(!this.isScaling||t.touches.length!==2)return;this.state="recognized";const e=this.getDistance(t.touches[0],t.touches[1]);this.currentDistance=e;const s=e/this.initialDistance,i=Math.max(this.minScale,Math.min(this.maxScale,s));if(this.onUpdate)try{this.onUpdate({type:"scaleupdate",scale:i,rawScale:s,nativeEvent:t})}catch(n){console.error("[ScaleRecognizer] onUpdate error:",n)}}handleEnd(t){if(!this.isScaling)return;const e=this.currentDistance/this.initialDistance,s=Math.max(this.minScale,Math.min(this.maxScale,e));if(this.onEnd)try{this.onEnd({type:"scaleend",scale:s,rawScale:e,nativeEvent:t})}catch(i){console.error("[ScaleRecognizer] onEnd error:",i)}this.recognize({type:"scale",scale:s,rawScale:e,nativeEvent:t}),this.reset(),this.isScaling=!1,this.initialDistance=null,this.currentDistance=null}getDistance(t,e){const s=e.clientX-t.clientX,i=e.clientY-t.clientY;return Math.sqrt(s*s+i*i)}}class m{constructor(){this.recognizers=new Map}register(t,e){this.recognizers.has(t)||this.recognizers.set(t,[]),this.recognizers.get(t).push(e)}unregister(t){const e=this.recognizers.get(t);e&&(e.forEach(s=>s.dispose()),this.recognizers.delete(t))}handleEvent(t,e,s){const i=this.recognizers.get(t);i&&i.forEach(n=>{!n.isDisposed&&n.state!=="failed"&&n.handleEvent(e,s)})}getRecognizers(t){return this.recognizers.get(t)||[]}clear(){this.recognizers.forEach(t=>{t.forEach(e=>e.dispose())}),this.recognizers.clear()}getStats(){let t=0;return this.recognizers.forEach(e=>{t+=e.length}),{elements:this.recognizers.size,totalRecognizers:t}}}class X{constructor(){this.arena=new m}registerTap(t,e,s={}){const i=new l(e,s);return this.arena.register(t,i),i}registerDoubleTap(t,e,s={}){const i=new l(e,{...s,minTaps:2,maxTaps:2});return this.arena.register(t,i),i}registerLongPress(t,e,s={}){const i=new u(e,s);return this.arena.register(t,i),i}registerSwipe(t,e,s={}){const i=new d(e,s);return this.arena.register(t,i),i}registerPan(t,e,s={}){const i=new g(e,s);return this.arena.register(t,i),i}registerScale(t,e,s={}){const i=new p(e,s);return this.arena.register(t,i),i}handleEvent(t,e,s){this.arena.handleEvent(t,e,s)}unregisterAll(t){this.arena.unregister(t)}getStats(){return this.arena.getStats()}dispose(){this.arena.clear()}}export{m as GestureArena,X as GestureManager,o as GestureRecognizer,u as LongPressRecognizer,g as PanRecognizer,p as ScaleRecognizer,d as SwipeRecognizer,l as TapRecognizer};
-//# sourceMappingURL=gesture_recognizer.js.map
diff --git a/packages/flutterjs_engine/src/runtime/dist/gesture_recognizer.js.map b/packages/flutterjs_engine/src/runtime/dist/gesture_recognizer.js.map
deleted file mode 100644
index fdc44419..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/gesture_recognizer.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/gesture_recognizer.js"],
-  "sourcesContent": ["/**\r\n * FlutterJS Gesture Recognizer System\r\n * \r\n * Handles complex gestures like tap, long-press, swipe, pinch, and pan.\r\n * Provides Flutter-style gesture recognition for touch and mouse interactions.\r\n * \r\n * Key Features:\r\n * - Multi-touch support\r\n * - Gesture conflict resolution\r\n * - Customizable thresholds\r\n * - Performance optimized\r\n * - Memory efficient cleanup\r\n */\r\n\r\n/**\r\n * Base Gesture Recognizer\r\n * \r\n * Abstract class that all specific recognizers extend\r\n */\r\nclass GestureRecognizer {\r\n  constructor(callback, options = {}) {\r\n    if (!callback || typeof callback !== 'function') {\r\n      throw new Error('Gesture recognizer requires a callback function');\r\n    }\r\n\r\n    this.callback = callback;\r\n    this.options = options;\r\n    this.state = 'ready'; // ready, possible, recognized, failed\r\n    this.disposed = false;\r\n  }\r\n\r\n  /**\r\n   * Handle pointer/touch event\r\n   * Subclasses must implement this\r\n   */\r\n  handleEvent(eventType, event) {\r\n    throw new Error('handleEvent() must be implemented by subclass');\r\n  }\r\n\r\n  /**\r\n   * Reset recognizer state\r\n   */\r\n  reset() {\r\n    this.state = 'ready';\r\n  }\r\n\r\n  /**\r\n   * Mark gesture as recognized\r\n   */\r\n  recognize(event) {\r\n    if (this.disposed) return;\r\n\r\n    // Remove the state === 'recognized' check - allow calling recognize multiple times\r\n    this.state = 'recognized';\r\n\r\n    try {\r\n      this.callback(event);\r\n    } catch (error) {\r\n      console.error('[GestureRecognizer] Callback error:', error);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Mark gesture as failed\r\n   */\r\n  fail() {\r\n    this.state = 'failed';\r\n  }\r\n\r\n  /**\r\n   * Cleanup and dispose\r\n   */\r\n  dispose() {\r\n    this.disposed = true;\r\n    this.callback = null;\r\n    this.options = null;\r\n    this.state = 'ready';\r\n  }\r\n\r\n  /**\r\n   * Check if disposed\r\n   */\r\n  get isDisposed() {\r\n    return this.disposed;\r\n  }\r\n}\r\n\r\n/**\r\n * Tap Gesture Recognizer\r\n * \r\n * Detects simple tap/click gestures\r\n */\r\nclass TapRecognizer extends GestureRecognizer {\r\n  constructor(callback, options = {}) {\r\n    super(callback, options);\r\n\r\n    // Configuration\r\n    this.maxDuration = options.maxDuration || 300; // ms\r\n    this.maxMovement = options.maxMovement || 10; // px\r\n    this.minTaps = options.minTaps || 1;\r\n    this.maxTaps = options.maxTaps || 1;\r\n\r\n    // State\r\n    this.startTime = null;\r\n    this.startX = null;\r\n    this.startY = null;\r\n    this.tapCount = 0;\r\n    this.lastTapTime = 0;\r\n    this.tapTimeout = null;\r\n  }\r\n\r\n  handleEvent(eventType, event) {\r\n    if (this.disposed) return;\r\n\r\n    switch (eventType) {\r\n      case 'pointerdown':\r\n      case 'mousedown':\r\n      case 'touchstart':\r\n        this.handleDown(event);\r\n        break;\r\n\r\n      case 'pointermove':\r\n      case 'mousemove':\r\n      case 'touchmove':\r\n        this.handleMove(event);\r\n        break;\r\n\r\n      case 'pointerup':\r\n      case 'mouseup':\r\n      case 'touchend':\r\n        this.handleUp(event);\r\n        break;\r\n\r\n      case 'pointercancel':\r\n      case 'touchcancel':\r\n        this.handleCancel();\r\n        break;\r\n    }\r\n  }\r\n\r\n  handleDown(event) {\r\n    this.state = 'possible';\r\n    this.startTime = Date.now();\r\n    this.startX = this.getX(event);\r\n    this.startY = this.getY(event);\r\n  }\r\n\r\n  handleMove(event) {\r\n    if (this.state !== 'possible') return;\r\n\r\n    const x = this.getX(event);\r\n    const y = this.getY(event);\r\n\r\n    const dx = Math.abs(x - this.startX);\r\n    const dy = Math.abs(y - this.startY);\r\n    const movement = Math.sqrt(dx * dx + dy * dy);\r\n\r\n    // Too much movement - fail\r\n    if (movement > this.maxMovement) {\r\n      this.fail();\r\n    }\r\n  }\r\n\r\n  handleUp(event) {\r\n    if (this.state !== 'possible') return;\r\n\r\n    const duration = Date.now() - this.startTime;\r\n    const x = this.getX(event);\r\n    const y = this.getY(event);\r\n\r\n    const dx = Math.abs(x - this.startX);\r\n    const dy = Math.abs(y - this.startY);\r\n    const movement = Math.sqrt(dx * dx + dy * dy);\r\n\r\n    // Check if valid tap\r\n    if (duration <= this.maxDuration && movement <= this.maxMovement) {\r\n      this.handleTap(event);\r\n    } else {\r\n      this.fail();\r\n    }\r\n\r\n    this.reset();\r\n  }\r\n\r\n  handleTap(event) {\r\n    const now = Date.now();\r\n    const timeSinceLastTap = now - this.lastTapTime;\r\n\r\n    // Check if double/triple tap\r\n    if (timeSinceLastTap < 300) {\r\n      this.tapCount++;\r\n    } else {\r\n      this.tapCount = 1;\r\n    }\r\n\r\n    this.lastTapTime = now;\r\n\r\n    // Clear previous timeout\r\n    if (this.tapTimeout) {\r\n      clearTimeout(this.tapTimeout);\r\n      this.tapTimeout = null;\r\n    }\r\n\r\n    // If we've reached max taps, recognize immediately\r\n    if (this.tapCount >= this.maxTaps) {\r\n      this.recognize({\r\n        type: 'tap',\r\n        tapCount: this.tapCount,\r\n        position: { x: this.startX, y: this.startY },\r\n        nativeEvent: event\r\n      });\r\n      this.tapCount = 0;\r\n    }\r\n    // Otherwise wait for potential additional taps\r\n    else if (this.tapCount >= this.minTaps) {\r\n      this.tapTimeout = setTimeout(() => {\r\n        this.recognize({\r\n          type: 'tap',\r\n          tapCount: this.tapCount,\r\n          position: { x: this.startX, y: this.startY },\r\n          nativeEvent: event\r\n        });\r\n        this.tapCount = 0;\r\n      }, 300);\r\n    }\r\n  }\r\n\r\n  handleCancel() {\r\n    this.fail();\r\n    // Don't call reset() here - it overwrites the 'failed' state\r\n  }\r\n  getX(event) {\r\n    if (event.clientX !== undefined && event.clientX !== 0) {\r\n      return event.clientX;\r\n    }\r\n    if (event.touches && event.touches.length > 0) {\r\n      return event.touches[0].clientX;\r\n    }\r\n    if (event.changedTouches && event.changedTouches.length > 0) {\r\n      return event.changedTouches[0].clientX;\r\n    }\r\n    return 0;\r\n  }\r\n\r\n  getY(event) {\r\n    if (event.clientY !== undefined && event.clientY !== 0) {\r\n      return event.clientY;\r\n    }\r\n    if (event.touches && event.touches.length > 0) {\r\n      return event.touches[0].clientY;\r\n    }\r\n    if (event.changedTouches && event.changedTouches.length > 0) {\r\n      return event.changedTouches[0].clientY;\r\n    }\r\n    return 0;\r\n  }\r\n\r\n  dispose() {\r\n    if (this.tapTimeout) {\r\n      clearTimeout(this.tapTimeout);\r\n      this.tapTimeout = null;\r\n    }\r\n    super.dispose();\r\n  }\r\n}\r\n\r\n/**\r\n * Long Press Gesture Recognizer\r\n * \r\n * Detects long press / hold gestures\r\n */\r\nclass LongPressRecognizer extends GestureRecognizer {\r\n  constructor(callback, options = {}) {\r\n    super(callback, options);\r\n\r\n    // Configuration\r\n    this.duration = options.duration || 500; // ms\r\n    this.maxMovement = options.maxMovement || 10; // px\r\n\r\n    // State\r\n    this.timer = null;\r\n    this.startX = null;\r\n    this.startY = null;\r\n    this.recognized = false;\r\n  }\r\n\r\n  handleEvent(eventType, event) {\r\n    if (this.disposed) return;\r\n\r\n    switch (eventType) {\r\n      case 'pointerdown':\r\n      case 'mousedown':\r\n      case 'touchstart':\r\n        this.handleDown(event);\r\n        break;\r\n\r\n      case 'pointermove':\r\n      case 'mousemove':\r\n      case 'touchmove':\r\n        this.handleMove(event);\r\n        break;\r\n\r\n      case 'pointerup':\r\n      case 'mouseup':\r\n      case 'touchend':\r\n      case 'pointercancel':\r\n      case 'touchcancel':\r\n        this.handleEnd(event);\r\n        break;\r\n    }\r\n  }\r\n\r\n  handleDown(event) {\r\n    this.state = 'possible';\r\n    this.startX = this.getX(event);\r\n    this.startY = this.getY(event);\r\n    this.recognized = false;\r\n\r\n    // Start timer\r\n    this.timer = setTimeout(() => {\r\n      if (this.state === 'possible') {\r\n        this.recognized = true;\r\n        this.recognize({\r\n          type: 'longpress',\r\n          position: { x: this.startX, y: this.startY },\r\n          nativeEvent: event\r\n        });\r\n      }\r\n      this.timer = null;\r\n    }, this.duration);\r\n  }\r\n\r\n  handleMove(event) {\r\n    if (this.state !== 'possible' || this.recognized) return;\r\n\r\n    const x = this.getX(event);\r\n    const y = this.getY(event);\r\n\r\n    const dx = Math.abs(x - this.startX);\r\n    const dy = Math.abs(y - this.startY);\r\n    const movement = Math.sqrt(dx * dx + dy * dy);\r\n\r\n    // Too much movement - cancel\r\n    if (movement > this.maxMovement) {\r\n      this.cancel();\r\n    }\r\n  }\r\n\r\n  handleEnd(event) {\r\n    this.cancel();\r\n    this.reset();\r\n  }\r\n\r\n  cancel() {\r\n    if (this.timer) {\r\n      clearTimeout(this.timer);\r\n      this.timer = null;\r\n    }\r\n    this.fail();\r\n  }\r\n\r\n  getX(event) {\r\n    return event.clientX || event.touches?.[0]?.clientX || 0;\r\n  }\r\n\r\n  getY(event) {\r\n    return event.clientY || event.touches?.[0]?.clientY || 0;\r\n  }\r\n\r\n  dispose() {\r\n    this.cancel();\r\n    super.dispose();\r\n  }\r\n}\r\n\r\n/**\r\n * Swipe Gesture Recognizer\r\n * \r\n * Detects directional swipe gestures\r\n */\r\nclass SwipeRecognizer extends GestureRecognizer {\r\n  constructor(callback, options = {}) {\r\n    super(callback, options);\r\n\r\n    // Configuration\r\n    this.minDistance = options.minDistance || 50; // px\r\n    this.maxDuration = options.maxDuration || 300; // ms\r\n    this.direction = options.direction || null; // 'horizontal', 'vertical', null (any)\r\n\r\n    // State\r\n    this.startTime = null;\r\n    this.startX = null;\r\n    this.startY = null;\r\n  }\r\n\r\n  handleEvent(eventType, event) {\r\n    if (this.disposed) return;\r\n\r\n    switch (eventType) {\r\n      case 'pointerdown':\r\n      case 'mousedown':\r\n      case 'touchstart':\r\n        this.handleDown(event);\r\n        break;\r\n\r\n      case 'pointerup':\r\n      case 'mouseup':\r\n      case 'touchend':\r\n        this.handleUp(event);\r\n        break;\r\n\r\n      case 'pointercancel':\r\n      case 'touchcancel':\r\n        this.handleCancel();\r\n        break;\r\n    }\r\n  }\r\n\r\n  handleDown(event) {\r\n    this.state = 'possible';\r\n    this.startTime = Date.now();\r\n    this.startX = this.getX(event);\r\n    this.startY = this.getY(event);\r\n  }\r\n\r\n  handleUp(event) {\r\n    if (this.state !== 'possible') return;\r\n\r\n    const duration = Date.now() - this.startTime;\r\n    const endX = this.getX(event);\r\n    const endY = this.getY(event);\r\n\r\n    const dx = endX - this.startX;\r\n    const dy = endY - this.startY;\r\n    const distance = Math.sqrt(dx * dx + dy * dy);\r\n\r\n    // Check if valid swipe\r\n    if (duration <= this.maxDuration && distance >= this.minDistance) {\r\n      const swipeDirection = this.getDirection(dx, dy);\r\n\r\n      // Check direction constraint\r\n      if (this.direction === 'horizontal' &&\r\n        (swipeDirection === 'up' || swipeDirection === 'down')) {\r\n        this.fail();\r\n        this.reset();\r\n        return;\r\n      }\r\n\r\n      if (this.direction === 'vertical' &&\r\n        (swipeDirection === 'left' || swipeDirection === 'right')) {\r\n        this.fail();\r\n        this.reset();\r\n        return;\r\n      }\r\n\r\n      this.recognize({\r\n        type: 'swipe',\r\n        direction: swipeDirection,\r\n        distance: distance,\r\n        velocity: distance / duration, // px/ms\r\n        delta: { dx, dy },\r\n        start: { x: this.startX, y: this.startY },\r\n        end: { x: endX, y: endY },\r\n        nativeEvent: event\r\n      });\r\n    } else {\r\n      this.fail();\r\n    }\r\n\r\n    this.reset();\r\n  }\r\n\r\n  handleCancel() {\r\n    this.fail();\r\n    this.reset();\r\n  }\r\n\r\n  getDirection(dx, dy) {\r\n    const angle = Math.atan2(dy, dx) * 180 / Math.PI;\r\n\r\n    // Determine primary direction\r\n    if (angle >= -45 && angle < 45) return 'right';\r\n    if (angle >= 45 && angle < 135) return 'down';\r\n    if (angle >= -135 && angle < -45) return 'up';\r\n    return 'left';\r\n  }\r\n\r\n  getX(event) {\r\n    if (event.clientX !== undefined && event.clientX !== 0) {\r\n      return event.clientX;\r\n    }\r\n    if (event.touches && event.touches.length > 0) {\r\n      return event.touches[0].clientX;\r\n    }\r\n    if (event.changedTouches && event.changedTouches.length > 0) {\r\n      return event.changedTouches[0].clientX;\r\n    }\r\n    return 0;\r\n  }\r\n\r\n  getY(event) {\r\n    if (event.clientY !== undefined && event.clientY !== 0) {\r\n      return event.clientY;\r\n    }\r\n    if (event.touches && event.touches.length > 0) {\r\n      return event.touches[0].clientY;\r\n    }\r\n    if (event.changedTouches && event.changedTouches.length > 0) {\r\n      return event.changedTouches[0].clientY;\r\n    }\r\n    return 0;\r\n  }\r\n}\r\n\r\n/**\r\n * Pan Gesture Recognizer\r\n * \r\n * Detects continuous drag/pan gestures\r\n */\r\nclass PanRecognizer extends GestureRecognizer {\r\n  constructor(callback, options = {}) {\r\n    super(callback, options);\r\n\r\n    // Configuration\r\n    this.minDistance = options.minDistance || 10; // px to start\r\n    this.direction = options.direction || null; // 'horizontal', 'vertical', null\r\n\r\n    // State\r\n    this.startX = null;\r\n    this.startY = null;\r\n    this.lastX = null;\r\n    this.lastY = null;\r\n    this.isPanning = false;\r\n\r\n    // Callbacks\r\n    this.onStart = options.onStart || null;\r\n    this.onUpdate = options.onUpdate || null;\r\n    this.onEnd = options.onEnd || null;\r\n  }\r\n\r\n  handleEvent(eventType, event) {\r\n    if (this.disposed) return;\r\n\r\n    switch (eventType) {\r\n      case 'pointerdown':\r\n      case 'mousedown':\r\n      case 'touchstart':\r\n        this.handleDown(event);\r\n        break;\r\n\r\n      case 'pointermove':\r\n      case 'mousemove':\r\n      case 'touchmove':\r\n        this.handleMove(event);\r\n        break;\r\n\r\n      case 'pointerup':\r\n      case 'mouseup':\r\n      case 'touchend':\r\n        this.handleUp(event);\r\n        break;\r\n\r\n      case 'pointercancel':\r\n      case 'touchcancel':\r\n        this.handleCancel();\r\n        break;\r\n    }\r\n  }\r\n\r\n  handleDown(event) {\r\n    this.state = 'possible';\r\n    this.startX = this.getX(event);\r\n    this.startY = this.getY(event);\r\n    this.lastX = this.startX;\r\n    this.lastY = this.startY;\r\n    this.isPanning = false;\r\n  }\r\n\r\n  handleMove(event) {\r\n    if (this.state === 'failed') return;\r\n\r\n    const x = this.getX(event);\r\n    const y = this.getY(event);\r\n\r\n    const dx = x - this.startX;\r\n    const dy = y - this.startY;\r\n    const distance = Math.sqrt(dx * dx + dy * dy);\r\n\r\n    // Check if pan started\r\n    if (!this.isPanning && distance >= this.minDistance) {\r\n      // Check direction constraint\r\n      if (this.direction === 'horizontal' && Math.abs(dy) > Math.abs(dx)) {\r\n        this.fail();\r\n        return;\r\n      }\r\n\r\n      if (this.direction === 'vertical' && Math.abs(dx) > Math.abs(dy)) {\r\n        this.fail();\r\n        return;\r\n      }\r\n\r\n      this.isPanning = true;\r\n      this.state = 'recognized';\r\n\r\n      // Call onStart\r\n      if (this.onStart) {\r\n        try {\r\n          this.onStart({\r\n            type: 'panstart',\r\n            position: { x, y },\r\n            nativeEvent: event\r\n          });\r\n        } catch (error) {\r\n          console.error('[PanRecognizer] onStart error:', error);\r\n        }\r\n      }\r\n    }\r\n\r\n    // Update during pan\r\n    if (this.isPanning) {\r\n      const deltaX = x - this.lastX;\r\n      const deltaY = y - this.lastY;\r\n\r\n      this.lastX = x;\r\n      this.lastY = y;\r\n\r\n      // Call onUpdate\r\n      if (this.onUpdate) {\r\n        try {\r\n          this.onUpdate({\r\n            type: 'panupdate',\r\n            position: { x, y },\r\n            delta: { dx: deltaX, dy: deltaY },\r\n            totalDelta: { dx, dy },\r\n            nativeEvent: event\r\n          });\r\n        } catch (error) {\r\n          console.error('[PanRecognizer] onUpdate error:', error);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  handleUp(event) {\r\n    if (this.isPanning) {\r\n      const x = this.getX(event);\r\n      const y = this.getY(event);\r\n\r\n      const dx = x - this.startX;\r\n      const dy = y - this.startY;\r\n\r\n      // Call onEnd first\r\n      if (this.onEnd) {\r\n        try {\r\n          this.onEnd({\r\n            type: 'panend',\r\n            position: { x, y },\r\n            totalDelta: { dx, dy },\r\n            nativeEvent: event\r\n          });\r\n        } catch (error) {\r\n          console.error('[PanRecognizer] onEnd error:', error);\r\n        }\r\n      }\r\n\r\n      // Then call main callback via recognize()\r\n      this.recognize({\r\n        type: 'pan',\r\n        start: { x: this.startX, y: this.startY },\r\n        end: { x, y },\r\n        delta: { dx, dy },\r\n        nativeEvent: event\r\n      });\r\n    }\r\n\r\n    this.reset();\r\n    this.isPanning = false;\r\n  }\r\n  handleCancel() {\r\n    if (this.isPanning && this.onEnd) {\r\n      try {\r\n        this.onEnd({\r\n          type: 'pancancel',\r\n          position: { x: this.lastX, y: this.lastY }\r\n        });\r\n      } catch (error) {\r\n        console.error('[PanRecognizer] onEnd (cancel) error:', error);\r\n      }\r\n    }\r\n\r\n    this.fail();\r\n    this.reset();\r\n    this.isPanning = false;\r\n  }\r\n\r\n  getX(event) {\r\n    return event.clientX || event.touches?.[0]?.clientX || 0;\r\n  }\r\n\r\n  getY(event) {\r\n    return event.clientY || event.touches?.[0]?.clientY || 0;\r\n  }\r\n}\r\n\r\n/**\r\n * Scale (Pinch) Gesture Recognizer\r\n * \r\n * Detects pinch-to-zoom gestures (two-finger)\r\n */\r\nclass ScaleRecognizer extends GestureRecognizer {\r\n  constructor(callback, options = {}) {\r\n    super(callback, options);\r\n\r\n    // Configuration\r\n    this.minScale = options.minScale || 0.5;\r\n    this.maxScale = options.maxScale || 2.0;\r\n\r\n    // State\r\n    this.initialDistance = null;\r\n    this.currentDistance = null;\r\n    this.isScaling = false;\r\n\r\n    // Callbacks\r\n    this.onStart = options.onStart || null;\r\n    this.onUpdate = options.onUpdate || null;\r\n    this.onEnd = options.onEnd || null;\r\n  }\r\n\r\n  handleEvent(eventType, event) {\r\n    if (this.disposed) return;\r\n\r\n    // Only handle touch events (requires 2 touches)\r\n    if (!event.touches || event.touches.length < 2) {\r\n      if (this.isScaling) {\r\n        this.handleEnd(event);\r\n      }\r\n      return;\r\n    }\r\n\r\n    switch (eventType) {\r\n      case 'touchstart':\r\n        this.handleStart(event);\r\n        break;\r\n\r\n      case 'touchmove':\r\n        this.handleMove(event);\r\n        break;\r\n\r\n      case 'touchend':\r\n      case 'touchcancel':\r\n        this.handleEnd(event);\r\n        break;\r\n    }\r\n  }\r\n\r\n  handleStart(event) {\r\n    if (event.touches.length !== 2) return;\r\n\r\n    this.state = 'possible';\r\n    this.initialDistance = this.getDistance(event.touches[0], event.touches[1]);\r\n    this.currentDistance = this.initialDistance;\r\n    this.isScaling = true;\r\n\r\n    // Call onStart\r\n    if (this.onStart) {\r\n      try {\r\n        this.onStart({\r\n          type: 'scalestart',\r\n          scale: 1.0,\r\n          nativeEvent: event\r\n        });\r\n      } catch (error) {\r\n        console.error('[ScaleRecognizer] onStart error:', error);\r\n      }\r\n    }\r\n  }\r\n\r\n  handleMove(event) {\r\n    if (!this.isScaling || event.touches.length !== 2) return;\r\n\r\n    this.state = 'recognized';\r\n\r\n    const distance = this.getDistance(event.touches[0], event.touches[1]);\r\n    this.currentDistance = distance;\r\n\r\n    const scale = distance / this.initialDistance;\r\n\r\n    // Clamp scale\r\n    const clampedScale = Math.max(this.minScale, Math.min(this.maxScale, scale));\r\n\r\n    // Call onUpdate\r\n    if (this.onUpdate) {\r\n      try {\r\n        this.onUpdate({\r\n          type: 'scaleupdate',\r\n          scale: clampedScale,\r\n          rawScale: scale,\r\n          nativeEvent: event\r\n        });\r\n      } catch (error) {\r\n        console.error('[ScaleRecognizer] onUpdate error:', error);\r\n      }\r\n    }\r\n  }\r\n  handleEnd(event) {\r\n    if (!this.isScaling) return;\r\n\r\n    const scale = this.currentDistance / this.initialDistance;\r\n    const clampedScale = Math.max(this.minScale, Math.min(this.maxScale, scale));\r\n\r\n    // Call onEnd first\r\n    if (this.onEnd) {\r\n      try {\r\n        this.onEnd({\r\n          type: 'scaleend',\r\n          scale: clampedScale,\r\n          rawScale: scale,\r\n          nativeEvent: event\r\n        });\r\n      } catch (error) {\r\n        console.error('[ScaleRecognizer] onEnd error:', error);\r\n      }\r\n    }\r\n\r\n    // Then call main callback via recognize()\r\n    this.recognize({\r\n      type: 'scale',\r\n      scale: clampedScale,\r\n      rawScale: scale,\r\n      nativeEvent: event\r\n    });\r\n\r\n    this.reset();\r\n    this.isScaling = false;\r\n    this.initialDistance = null;\r\n    this.currentDistance = null;\r\n  }\r\n\r\n  getDistance(touch1, touch2) {\r\n    const dx = touch2.clientX - touch1.clientX;\r\n    const dy = touch2.clientY - touch1.clientY;\r\n    return Math.sqrt(dx * dx + dy * dy);\r\n  }\r\n}\r\n\r\n/**\r\n * Gesture Arena\r\n * \r\n * Manages multiple gesture recognizers and resolves conflicts\r\n */\r\nclass GestureArena {\r\n  constructor() {\r\n    this.recognizers = new Map(); // elementId -> recognizer[]\r\n  }\r\n\r\n  /**\r\n   * Register recognizer for element\r\n   */\r\n  register(elementId, recognizer) {\r\n    if (!this.recognizers.has(elementId)) {\r\n      this.recognizers.set(elementId, []);\r\n    }\r\n\r\n    this.recognizers.get(elementId).push(recognizer);\r\n  }\r\n\r\n  /**\r\n   * Unregister all recognizers for element\r\n   */\r\n  unregister(elementId) {\r\n    const recognizers = this.recognizers.get(elementId);\r\n    if (recognizers) {\r\n      recognizers.forEach(r => r.dispose());\r\n      this.recognizers.delete(elementId);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle event for element\r\n   */\r\n  handleEvent(elementId, eventType, event) {\r\n    const recognizers = this.recognizers.get(elementId);\r\n    if (!recognizers) return;\r\n\r\n    // Pass event to all active recognizers\r\n    recognizers.forEach(recognizer => {\r\n      if (!recognizer.isDisposed && recognizer.state !== 'failed') {\r\n        recognizer.handleEvent(eventType, event);\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Get recognizers for element\r\n   */\r\n  getRecognizers(elementId) {\r\n    return this.recognizers.get(elementId) || [];\r\n  }\r\n\r\n  /**\r\n   * Clear all recognizers\r\n   */\r\n  clear() {\r\n    this.recognizers.forEach((recognizers) => {\r\n      recognizers.forEach(r => r.dispose());\r\n    });\r\n    this.recognizers.clear();\r\n  }\r\n\r\n  /**\r\n   * Get statistics\r\n   */\r\n  getStats() {\r\n    let totalRecognizers = 0;\r\n    this.recognizers.forEach(recognizers => {\r\n      totalRecognizers += recognizers.length;\r\n    });\r\n\r\n    return {\r\n      elements: this.recognizers.size,\r\n      totalRecognizers: totalRecognizers\r\n    };\r\n  }\r\n}\r\n\r\n/**\r\n * Main Gesture Manager\r\n * \r\n * Central system for managing all gestures in the application\r\n */\r\nclass GestureManager {\r\n  constructor() {\r\n    this.arena = new GestureArena();\r\n  }\r\n\r\n  /**\r\n   * Register tap gesture\r\n   */\r\n  registerTap(elementId, callback, options = {}) {\r\n    const recognizer = new TapRecognizer(callback, options);\r\n    this.arena.register(elementId, recognizer);\r\n    return recognizer;\r\n  }\r\n\r\n  /**\r\n   * Register double tap gesture\r\n   */\r\n  registerDoubleTap(elementId, callback, options = {}) {\r\n    const recognizer = new TapRecognizer(callback, {\r\n      ...options,\r\n      minTaps: 2,\r\n      maxTaps: 2\r\n    });\r\n    this.arena.register(elementId, recognizer);\r\n    return recognizer;\r\n  }\r\n\r\n  /**\r\n   * Register long press gesture\r\n   */\r\n  registerLongPress(elementId, callback, options = {}) {\r\n    const recognizer = new LongPressRecognizer(callback, options);\r\n    this.arena.register(elementId, recognizer);\r\n    return recognizer;\r\n  }\r\n\r\n  /**\r\n   * Register swipe gesture\r\n   */\r\n  registerSwipe(elementId, callback, options = {}) {\r\n    const recognizer = new SwipeRecognizer(callback, options);\r\n    this.arena.register(elementId, recognizer);\r\n    return recognizer;\r\n  }\r\n\r\n  /**\r\n   * Register pan gesture\r\n   */\r\n  registerPan(elementId, callback, options = {}) {\r\n    const recognizer = new PanRecognizer(callback, options);\r\n    this.arena.register(elementId, recognizer);\r\n    return recognizer;\r\n  }\r\n\r\n  /**\r\n   * Register scale (pinch) gesture\r\n   */\r\n  registerScale(elementId, callback, options = {}) {\r\n    const recognizer = new ScaleRecognizer(callback, options);\r\n    this.arena.register(elementId, recognizer);\r\n    return recognizer;\r\n  }\r\n\r\n  /**\r\n   * Handle pointer/touch event\r\n   */\r\n  handleEvent(elementId, eventType, event) {\r\n    this.arena.handleEvent(elementId, eventType, event);\r\n  }\r\n\r\n  /**\r\n   * Unregister all gestures for element\r\n   */\r\n  unregisterAll(elementId) {\r\n    this.arena.unregister(elementId);\r\n  }\r\n\r\n  /**\r\n   * Get statistics\r\n   */\r\n  getStats() {\r\n    return this.arena.getStats();\r\n  }\r\n\r\n  /**\r\n   * Cleanup\r\n   */\r\n  dispose() {\r\n    this.arena.clear();\r\n  }\r\n}\r\n\r\nexport {\r\n  GestureRecognizer,\r\n  TapRecognizer,\r\n  LongPressRecognizer,\r\n  SwipeRecognizer,\r\n  PanRecognizer,\r\n  ScaleRecognizer,\r\n  GestureArena,\r\n  GestureManager\r\n};"],
-  "mappings": "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",
-  "names": ["GestureRecognizer", "callback", "options", "eventType", "event", "error", "TapRecognizer", "x", "y", "dx", "dy", "duration", "movement", "now", "LongPressRecognizer", "SwipeRecognizer", "endX", "endY", "distance", "swipeDirection", "angle", "PanRecognizer", "deltaX", "deltaY", "ScaleRecognizer", "scale", "clampedScale", "touch1", "touch2", "GestureArena", "elementId", "recognizer", "recognizers", "r", "totalRecognizers", "GestureManager"]
-}
diff --git a/packages/flutterjs_engine/src/runtime/dist/index.js b/packages/flutterjs_engine/src/runtime/dist/index.js
deleted file mode 100644
index 8f5f8909..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export*from"./key.js";export*from"./build_context.js";export*from"./element.js";export*from"./event_system.js";export*from"./flutterjs_runtime.js";export*from"./gesture_recognizer.js";export*from"./inherited_element.js";export*from"./memory_manager.js";export*from"./runtime_engine.js";export*from"./service_registry.js";export*from"./state_tracker.js";export*from"./state.js";export*from"./update_batcher.js";
-//# sourceMappingURL=index.js.map
diff --git a/packages/flutterjs_engine/src/runtime/dist/index.js.map b/packages/flutterjs_engine/src/runtime/dist/index.js.map
deleted file mode 100644
index c43a92dc..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/index.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/index.js"],
-  "sourcesContent": ["export * from \"./key.js\";\r\n\r\nexport * from \"./build_context.js\";\r\n\r\nexport * from \"./element.js\";\r\n\r\nexport * from \"./event_system.js\";\r\n\r\nexport * from \"./flutterjs_runtime.js\";\r\n\r\nexport * from \"./gesture_recognizer.js\";\r\nexport * from \"./inherited_element.js\";\r\n\r\nexport * from \"./memory_manager.js\";\r\nexport * from \"./runtime_engine.js\";\r\nexport * from \"./service_registry.js\";\r\nexport * from \"./state_tracker.js\";\r\nexport * from \"./state.js\";\r\nexport * from \"./update_batcher.js\";\r\n"],
-  "mappings": "AAAA,WAAc,WAEd,WAAc,qBAEd,WAAc,eAEd,WAAc,oBAEd,WAAc,yBAEd,WAAc,0BACd,WAAc,yBAEd,WAAc,sBACd,WAAc,sBACd,WAAc,wBACd,WAAc,qBACd,WAAc,aACd,WAAc",
-  "names": []
-}
diff --git a/packages/flutterjs_engine/src/runtime/dist/inherited_element.js b/packages/flutterjs_engine/src/runtime/dist/inherited_element.js
deleted file mode 100644
index 1efde8ad..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/inherited_element.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{Element as l}from"./element.js";class h extends l{constructor(e,t,i){super(e,t,i),this.dependents=new Set,this._inheritedValue=e.data||e.value||null,this._notifying=!1,this.runtime?.debugMode&&console.log(`[InheritedElement] Created ${e.constructor.name}`)}build(){if(!this.widget.child)throw new Error("InheritedWidget must have a child widget");const e=this.widget.child;if(e&&typeof e=="object"&&e.tag)return{tag:"div",props:{"data-widget":this.widget.constructor.name,"data-element-id":this.id,class:"fjs-inherited-widget-wrapper"},children:[e],metadata:{isInheritedWidget:!0,widgetType:this.widget.constructor.name}};if(e&&typeof e=="object"&&(e.build||e.createState||e.render)){if(this._childElement)this._childElement.shouldRebuild(this._childElement.widget,e)?this._childElement.updateWidget(e):(this._childElement.widget=e,this._childElement.markNeedsBuild());else{if(this._childElement=this.runtime.createElement(e,this),!this._childElement)throw new Error("Failed to create element from child widget");this.addChild(this._childElement),this._childElement.mounted||this._childElement.mount()}const t=this._childElement.vnode||this._childElement.build();return{tag:"div",props:{"data-widget":this.widget.constructor.name,"data-element-id":this.id,class:"fjs-inherited-widget-wrapper"},children:[t],metadata:{isInheritedWidget:!0,widgetType:this.widget.constructor.name}}}return{tag:"div",props:{"data-widget":this.widget.constructor.name,"data-element-id":this.id,class:"fjs-inherited-widget-wrapper"},children:[e],metadata:{isInheritedWidget:!0,widgetType:this.widget.constructor.name}}}performRebuild(){return this.build()}addDependent(e){if(!e)throw new Error("Cannot add null element as dependent");if(this.dependents.has(e)){this.runtime?.debugMode&&console.warn(`[InheritedElement] Element ${e.id} already registered as dependent`);return}this.dependents.add(e),this.runtime?.debugMode&&console.log(`[InheritedElement] Added dependent ${e.id} (total: ${this.dependents.size})`)}removeDependent(e){if(!e)return;this.dependents.delete(e)&&this.runtime?.debugMode&&console.log(`[InheritedElement] Removed dependent ${e.id} (remaining: ${this.dependents.size})`)}hasDependent(e){return this.dependents.has(e)}get dependentCount(){return this.dependents.size}update(e){const t=this.widget;super.update(e);const i=e.data||e.value||null,n=this._inheritedValue;if(this._inheritedValue=i,this.widget.updateShouldNotify)try{this.widget.updateShouldNotify(t)?(this.runtime?.debugMode&&console.log(`[InheritedElement] Value changed, notifying ${this.dependents.size} dependents`),this.notifyDependents()):this.runtime?.debugMode&&console.log("[InheritedElement] Value changed but updateShouldNotify returned false")}catch(o){console.error(`[InheritedElement] Error in updateShouldNotify: ${o.message}`)}}notifyDependents(){if(this._notifying){this.runtime?.debugMode&&console.warn("[InheritedElement] Recursive notification detected, skipping");return}this._notifying=!0;try{const e=this.runtime?.debugMode?performance.now():0;let t=0;for(const i of this.dependents)i.mounted&&!i.dirty?(i.markNeedsBuild(),t++):!i.mounted&&this.runtime?.debugMode&&console.warn(`[InheritedElement] Dependent ${i.id} is not mounted, skipping`);if(this.runtime?.debugMode){const i=performance.now()-e;console.log(`[InheritedElement] Notified ${t} dependents in ${i.toFixed(2)}ms`)}}finally{this._notifying=!1}}notifySpecificDependents(e){if(!this._notifying){this._notifying=!0;try{for(const t of e)this.dependents.has(t)&&t.mounted&&!t.dirty&&t.markNeedsBuild()}finally{this._notifying=!1}}}mount(){super.mount(),this.runtime?.debugMode&&console.log(`[InheritedElement] Mounted ${this.widget.constructor.name} with ${this.dependents.size} dependents`)}unmount(){const e=this.dependents.size;this.dependents.forEach(t=>{t.mounted&&t._inheritedDependencies?.delete(this.id)}),this.dependents.clear(),this.runtime?.debugMode&&console.log(`[InheritedElement] Unmounted ${this.widget.constructor.name} (cleaned up ${e} dependents)`),super.unmount()}getStats(){return{...super.getStats(),type:"InheritedElement",inheritedValue:this._inheritedValue,dependentCount:this.dependents.size,dependents:Array.from(this.dependents).map(t=>({id:t.id,type:t.constructor.name,mounted:t.mounted}))}}}class a{constructor({child:e,data:t,value:i,key:n}={}){if(!e)throw new Error("InheritedWidget requires a child widget");this.child=e,this.data=t||i||null,this.key=n,this.type="InheritedWidget"}updateShouldNotify(e){return this.data!==e.data}static of(e){return e.dependOnInheritedWidgetOfExactType(this)}createElement(e,t){return new h(this,e,t)}}class s{constructor(){this.listeners=new Set}addListener(e){if(typeof e!="function")throw new Error("Listener must be a function");this.listeners.add(e)}removeListener(e){this.listeners.delete(e)}removeAllListeners(){this.listeners.clear()}notifyListeners(){for(const e of this.listeners)try{e()}catch(t){console.error("[ChangeNotifier] Listener error:",t)}}hasListeners(){return this.listeners.size>0}get listenerCount(){return this.listeners.size}dispose(){this.listeners.clear()}}class u extends s{constructor(e){super(),this._value=e}get value(){return this._value}set value(e){this._value!==e&&(this._value=e,this.notifyListeners())}getValue(){return this._value}setValue(e,t=!0){this._value!==e&&(this._value=e,t&&this.notifyListeners())}}class r extends a{constructor({notifier:e,value:t,child:i,key:n}={}){if(super({child:i,data:t,key:n}),e&&!(e instanceof s))throw new Error("Provider requires a ChangeNotifier instance");this.notifier=e,this.listeners=[]}updateShouldNotify(e){return this.notifier&&e.notifier===this.notifier?!1:this.data!==e.data}getValue(){return this.notifier?this.notifier.value:this.data}static of(e){return e.dependOnInheritedWidgetOfExactType(r)}}export{s as ChangeNotifier,h as InheritedElement,a as InheritedWidget,r as Provider,u as ValueNotifier};
-//# sourceMappingURL=inherited_element.js.map
diff --git a/packages/flutterjs_engine/src/runtime/dist/inherited_element.js.map b/packages/flutterjs_engine/src/runtime/dist/inherited_element.js.map
deleted file mode 100644
index ff4baa5b..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/inherited_element.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/inherited_element.js"],
-  "sourcesContent": ["/**\r\n * FlutterJS InheritedElement\r\n *\r\n * Element for InheritedWidget. Manages dependency propagation down the widget tree.\r\n * InheritedWidget allows efficient value passing without prop drilling.\r\n *\r\n * Key Features:\r\n * - Track dependent elements\r\n * - Notify dependents on value changes\r\n * - Automatic rebuilds only for affected descendants\r\n * - Memory efficient cleanup\r\n *\r\n * Usage:\r\n * ```javascript\r\n * class Theme extends InheritedWidget {\r\n *   constructor({ data, child, key }) {\r\n *     super({ child, key });\r\n *     this.data = data;\r\n *   }\r\n *\r\n *   updateShouldNotify(oldWidget) {\r\n *     return this.data !== oldWidget.data;\r\n *   }\r\n *\r\n *   static of(context) {\r\n *     return context.dependOnInheritedWidgetOfExactType(Theme);\r\n *   }\r\n * }\r\n * ```\r\n */\r\n\r\nimport { Element } from './element.js';\r\n\r\n/**\r\n * InheritedElement Class\r\n *\r\n * Represents a live instance of an InheritedWidget in the element tree.\r\n * Manages which elements depend on this InheritedWidget's value.\r\n */\r\nclass InheritedElement extends Element {\r\n  /**\r\n   * Create InheritedElement\r\n   * @param {InheritedWidget} widget - The widget\r\n   * @param {Element|null} parent - Parent element\r\n   * @param {RuntimeEngine} runtime - Runtime engine\r\n   */\r\n  constructor(widget, parent, runtime) {\r\n    super(widget, parent, runtime);\r\n\r\n    // Track elements that depend on this InheritedWidget's value\r\n    this.dependents = new Set();\r\n\r\n    // Cache the inherited value for quick access\r\n    this._inheritedValue = widget.data || widget.value || null;\r\n\r\n    // Track if we're in process of notifying dependents\r\n    this._notifying = false;\r\n\r\n    if (this.runtime?.debugMode) {\r\n      console.log(`[InheritedElement] Created ${widget.constructor.name}`);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Build the InheritedWidget's child\r\n   * InheritedWidget typically just wraps a child without additional rendering\r\n   *\r\n   * @returns {VNode} VNode for the child widget\r\n   */\r\n  build() {\r\n    if (!this.widget.child) {\r\n      throw new Error('InheritedWidget must have a child widget');\r\n    }\r\n\r\n    // \u2705 FIX: Convert child widget to element and build it\r\n    const childWidget = this.widget.child;\r\n\r\n    // Check if child is already a VNode\r\n    if (childWidget && typeof childWidget === 'object' && childWidget.tag) {\r\n      // Already a VNode\r\n      return {\r\n        tag: 'div',\r\n        props: {\r\n          'data-widget': this.widget.constructor.name,\r\n          'data-element-id': this.id,\r\n          class: 'fjs-inherited-widget-wrapper'\r\n        },\r\n        children: [childWidget],\r\n        metadata: {\r\n          isInheritedWidget: true,\r\n          widgetType: this.widget.constructor.name\r\n        }\r\n      };\r\n    }\r\n\r\n    // \u2705 CRITICAL: If it's a widget, convert to element and build\r\n    if (childWidget && typeof childWidget === 'object' &&\r\n      (childWidget.build || childWidget.createState || childWidget.render)) {\r\n\r\n      // Reuse existing element if possible\r\n      if (this._childElement) {\r\n        if (this._childElement.shouldRebuild(this._childElement.widget, childWidget)) {\r\n          this._childElement.updateWidget(childWidget);\r\n        } else {\r\n          this._childElement.widget = childWidget;\r\n          this._childElement.markNeedsBuild();\r\n        }\r\n      } else {\r\n        // Create new element\r\n        this._childElement = this.runtime.createElement(childWidget, this);\r\n        if (!this._childElement) {\r\n          throw new Error('Failed to create element from child widget');\r\n        }\r\n\r\n        // Register properly\r\n        this.addChild(this._childElement);\r\n\r\n        // Mount\r\n        if (!this._childElement.mounted) {\r\n          this._childElement.mount();\r\n        }\r\n      }\r\n\r\n      // Return the child's VNode (from the stable element)\r\n      const childVNode = this._childElement.vnode || this._childElement.build();\r\n\r\n      return {\r\n        tag: 'div',\r\n        props: {\r\n          'data-widget': this.widget.constructor.name,\r\n          'data-element-id': this.id,\r\n          class: 'fjs-inherited-widget-wrapper'\r\n        },\r\n        children: [childVNode],\r\n        metadata: {\r\n          isInheritedWidget: true,\r\n          widgetType: this.widget.constructor.name\r\n        }\r\n      };\r\n    }\r\n\r\n    // String or primitive\r\n    return {\r\n      tag: 'div',\r\n      props: {\r\n        'data-widget': this.widget.constructor.name,\r\n        'data-element-id': this.id,\r\n        class: 'fjs-inherited-widget-wrapper'\r\n      },\r\n      children: [childWidget],\r\n      metadata: {\r\n        isInheritedWidget: true,\r\n        widgetType: this.widget.constructor.name\r\n      }\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Perform rebuild - required by Element base class\r\n   * @returns {VNode} VNode for the child widget\r\n   */\r\n  performRebuild() {\r\n    return this.build();\r\n  }\r\n\r\n  /**\r\n   * Register a dependent element\r\n   * Called when an element calls dependOnInheritedWidgetOfExactType\r\n   *\r\n   * @param {Element} element - Element that depends on this InheritedWidget\r\n   * @throws {Error} If element is null\r\n   */\r\n  addDependent(element) {\r\n    if (!element) {\r\n      throw new Error('Cannot add null element as dependent');\r\n    }\r\n\r\n    if (this.dependents.has(element)) {\r\n      if (this.runtime?.debugMode) {\r\n        console.warn(\r\n          `[InheritedElement] Element ${element.id} already registered as dependent`\r\n        );\r\n      }\r\n      return;\r\n    }\r\n\r\n    this.dependents.add(element);\r\n\r\n    if (this.runtime?.debugMode) {\r\n      console.log(\r\n        `[InheritedElement] Added dependent ${element.id} ` +\r\n        `(total: ${this.dependents.size})`\r\n      );\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Remove a dependent element\r\n   * Called during cleanup\r\n   *\r\n   * @param {Element} element - Element to remove\r\n   */\r\n  removeDependent(element) {\r\n    if (!element) return;\r\n\r\n    const removed = this.dependents.delete(element);\r\n\r\n    if (removed && this.runtime?.debugMode) {\r\n      console.log(\r\n        `[InheritedElement] Removed dependent ${element.id} ` +\r\n        `(remaining: ${this.dependents.size})`\r\n      );\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Check if element is a dependent\r\n   *\r\n   * @param {Element} element - Element to check\r\n   * @returns {boolean} True if element is dependent\r\n   */\r\n  hasDependent(element) {\r\n    return this.dependents.has(element);\r\n  }\r\n\r\n  /**\r\n   * Get number of dependents\r\n   *\r\n   * @returns {number} Count of dependent elements\r\n   */\r\n  get dependentCount() {\r\n    return this.dependents.size;\r\n  }\r\n\r\n  /**\r\n   * Update the InheritedWidget with new widget\r\n   * Checks if value changed, notifies dependents if needed\r\n   *\r\n   * @param {InheritedWidget} newWidget - New widget with potentially new data\r\n   */\r\n  update(newWidget) {\r\n    const oldWidget = this.widget;\r\n\r\n    // Call parent update\r\n    super.update(newWidget);\r\n\r\n    // Cache new value\r\n    const newValue = newWidget.data || newWidget.value || null;\r\n    const oldValue = this._inheritedValue;\r\n\r\n    this._inheritedValue = newValue;\r\n\r\n    // Check if we should notify dependents\r\n    if (this.widget.updateShouldNotify) {\r\n      try {\r\n        const shouldNotify = this.widget.updateShouldNotify(oldWidget);\r\n\r\n        if (shouldNotify) {\r\n          if (this.runtime?.debugMode) {\r\n            console.log(\r\n              `[InheritedElement] Value changed, notifying ${this.dependents.size} dependents`\r\n            );\r\n          }\r\n\r\n          this.notifyDependents();\r\n        } else if (this.runtime?.debugMode) {\r\n          console.log(\r\n            `[InheritedElement] Value changed but updateShouldNotify returned false`\r\n          );\r\n        }\r\n      } catch (error) {\r\n        console.error(\r\n          `[InheritedElement] Error in updateShouldNotify: ${error.message}`\r\n        );\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Notify all dependent elements to rebuild\r\n   * Only notifies elements that are still mounted\r\n   */\r\n  notifyDependents() {\r\n    // Prevent recursive notifications\r\n    if (this._notifying) {\r\n      if (this.runtime?.debugMode) {\r\n        console.warn('[InheritedElement] Recursive notification detected, skipping');\r\n      }\r\n      return;\r\n    }\r\n\r\n    this._notifying = true;\r\n\r\n    try {\r\n      const startTime = this.runtime?.debugMode ? performance.now() : 0;\r\n      let notifiedCount = 0;\r\n\r\n      // Notify each dependent\r\n      for (const element of this.dependents) {\r\n        if (element.mounted && !element.dirty) {\r\n          element.markNeedsBuild();\r\n          notifiedCount++;\r\n        } else if (!element.mounted && this.runtime?.debugMode) {\r\n          console.warn(\r\n            `[InheritedElement] Dependent ${element.id} is not mounted, skipping`\r\n          );\r\n        }\r\n      }\r\n\r\n      if (this.runtime?.debugMode) {\r\n        const duration = performance.now() - startTime;\r\n        console.log(\r\n          `[InheritedElement] Notified ${notifiedCount} dependents in ${duration.toFixed(2)}ms`\r\n        );\r\n      }\r\n    } finally {\r\n      this._notifying = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Notify specific dependents (optimization)\r\n   * Use when you know only certain dependents need rebuild\r\n   *\r\n   * @param {Set<Element>} elements - Elements to notify\r\n   */\r\n  notifySpecificDependents(elements) {\r\n    if (this._notifying) return;\r\n\r\n    this._notifying = true;\r\n\r\n    try {\r\n      for (const element of elements) {\r\n        if (this.dependents.has(element) && element.mounted && !element.dirty) {\r\n          element.markNeedsBuild();\r\n        }\r\n      }\r\n    } finally {\r\n      this._notifying = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Mount element - initialize dependent tracking\r\n   */\r\n  mount() {\r\n    super.mount();\r\n\r\n    if (this.runtime?.debugMode) {\r\n      console.log(\r\n        `[InheritedElement] Mounted ${this.widget.constructor.name} ` +\r\n        `with ${this.dependents.size} dependents`\r\n      );\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Unmount element - cleanup all dependent tracking\r\n   */\r\n  unmount() {\r\n    // Clear all dependent references\r\n    const dependentCount = this.dependents.size;\r\n\r\n    this.dependents.forEach(element => {\r\n      if (element.mounted) {\r\n        // Don't rebuild, just remove from tracking\r\n        element._inheritedDependencies?.delete(this.id);\r\n      }\r\n    });\r\n\r\n    this.dependents.clear();\r\n\r\n    if (this.runtime?.debugMode) {\r\n      console.log(\r\n        `[InheritedElement] Unmounted ${this.widget.constructor.name} ` +\r\n        `(cleaned up ${dependentCount} dependents)`\r\n      );\r\n    }\r\n\r\n    super.unmount();\r\n  }\r\n\r\n  /**\r\n   * Get statistics about this InheritedElement\r\n   *\r\n   * @returns {Object} Statistics object\r\n   */\r\n  getStats() {\r\n    const stats = super.getStats();\r\n\r\n    return {\r\n      ...stats,\r\n      type: 'InheritedElement',\r\n      inheritedValue: this._inheritedValue,\r\n      dependentCount: this.dependents.size,\r\n      dependents: Array.from(this.dependents).map(el => ({\r\n        id: el.id,\r\n        type: el.constructor.name,\r\n        mounted: el.mounted\r\n      }))\r\n    };\r\n  }\r\n}\r\n\r\n/**\r\n * Base InheritedWidget Class\r\n *\r\n * Widgets that provide values to their descendants.\r\n * Descendants access the value via context.dependOnInheritedWidgetOfExactType()\r\n */\r\nclass InheritedWidget {\r\n  /**\r\n   * Create InheritedWidget\r\n   * @param {Object} options - Widget options\r\n   * @param {Widget} options.child - Child widget to wrap\r\n   * @param {*} options.data - Value to provide (alternative to override in subclass)\r\n   * @param {*} options.value - Value to provide (preferred)\r\n   * @param {string} options.key - Widget key for reconciliation\r\n   */\r\n  constructor({ child, data, value, key } = {}) {\r\n    if (!child) {\r\n      throw new Error('InheritedWidget requires a child widget');\r\n    }\r\n\r\n    this.child = child;\r\n    this.data = data || value || null;\r\n    this.key = key;\r\n    this.type = 'InheritedWidget';\r\n  }\r\n\r\n  /**\r\n   * Determine if dependents should be notified of update\r\n   * Override in subclasses to optimize notifications\r\n   *\r\n   * @param {InheritedWidget} oldWidget - Previous widget\r\n   * @returns {boolean} True if dependents should rebuild\r\n   *\r\n   * @example\r\n   * updateShouldNotify(oldWidget) {\r\n   *   return this.data.theme !== oldWidget.data.theme;\r\n   * }\r\n   */\r\n  updateShouldNotify(oldWidget) {\r\n    // Default: always notify on any change\r\n    return this.data !== oldWidget.data;\r\n  }\r\n\r\n  /**\r\n   * Static helper to access this InheritedWidget from descendant\r\n   * Subclasses should override this\r\n   *\r\n   * @param {BuildContext} context - Build context\r\n   * @returns {InheritedWidget|null} This widget instance or null\r\n   *\r\n   * @example\r\n   * class Theme extends InheritedWidget {\r\n   *   static of(context) {\r\n   *     return context.dependOnInheritedWidgetOfExactType(Theme);\r\n   *   }\r\n   * }\r\n   *\r\n   * // Usage\r\n   * const theme = Theme.of(context);\r\n   */\r\n  static of(context) {\r\n    return context.dependOnInheritedWidgetOfExactType(this);\r\n  }\r\n\r\n  /**\r\n   * Create element for this widget\r\n   * Override to customize element type\r\n   *\r\n   * @param {Element} parent - Parent element\r\n   * @param {RuntimeEngine} runtime - Runtime engine\r\n   * @returns {Element} Element instance\r\n   */\r\n  createElement(parent, runtime) {\r\n    return new InheritedElement(this, parent, runtime);\r\n  }\r\n}\r\n\r\n/**\r\n * ChangeNotifier - Allows imperative value updates\r\n *\r\n * Subclass this to create data classes that notify listeners of changes.\r\n * More efficient than InheritedWidget for frequently changing values.\r\n */\r\nclass ChangeNotifier {\r\n  constructor() {\r\n    this.listeners = new Set();\r\n  }\r\n\r\n  /**\r\n   * Add listener\r\n   * @param {Function} listener - Callback called on change\r\n   */\r\n  addListener(listener) {\r\n    if (typeof listener !== 'function') {\r\n      throw new Error('Listener must be a function');\r\n    }\r\n    this.listeners.add(listener);\r\n  }\r\n\r\n  /**\r\n   * Remove listener\r\n   * @param {Function} listener - Listener to remove\r\n   */\r\n  removeListener(listener) {\r\n    this.listeners.delete(listener);\r\n  }\r\n\r\n  /**\r\n   * Remove all listeners\r\n   */\r\n  removeAllListeners() {\r\n    this.listeners.clear();\r\n  }\r\n\r\n  /**\r\n   * Notify all listeners of change\r\n   * Call this when data changes\r\n   */\r\n  notifyListeners() {\r\n    for (const listener of this.listeners) {\r\n      try {\r\n        listener();\r\n      } catch (error) {\r\n        console.error('[ChangeNotifier] Listener error:', error);\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Check if has listeners\r\n   * @returns {boolean} True if any listeners registered\r\n   */\r\n  hasListeners() {\r\n    return this.listeners.size > 0;\r\n  }\r\n\r\n  /**\r\n   * Get listener count\r\n   * @returns {number} Number of listeners\r\n   */\r\n  get listenerCount() {\r\n    return this.listeners.size;\r\n  }\r\n\r\n  /**\r\n   * Dispose - cleanup all listeners\r\n   */\r\n  dispose() {\r\n    this.listeners.clear();\r\n  }\r\n}\r\n\r\n/**\r\n * ValueNotifier - Simple ChangeNotifier for single values\r\n *\r\n * Efficient way to manage a single reactive value.\r\n */\r\nclass ValueNotifier extends ChangeNotifier {\r\n  /**\r\n   * Create ValueNotifier\r\n   * @param {*} initialValue - Initial value\r\n   */\r\n  constructor(initialValue) {\r\n    super();\r\n    this._value = initialValue;\r\n  }\r\n\r\n  /**\r\n   * Get current value\r\n   */\r\n  get value() {\r\n    return this._value;\r\n  }\r\n\r\n  /**\r\n   * Set value and notify listeners\r\n   */\r\n  set value(newValue) {\r\n    if (this._value !== newValue) {\r\n      this._value = newValue;\r\n      this.notifyListeners();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get value\r\n   * @returns {*} Current value\r\n   */\r\n  getValue() {\r\n    return this._value;\r\n  }\r\n\r\n  /**\r\n   * Set value with optional notification\r\n   * @param {*} newValue - New value\r\n   * @param {boolean} notify - Whether to notify listeners (default: true)\r\n   */\r\n  setValue(newValue, notify = true) {\r\n    if (this._value !== newValue) {\r\n      this._value = newValue;\r\n      if (notify) {\r\n        this.notifyListeners();\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n/**\r\n * Provider Widget - Helper for dependency injection\r\n *\r\n * Combines InheritedWidget with ChangeNotifier for reactive data.\r\n */\r\nclass Provider extends InheritedWidget {\r\n  /**\r\n   * Create Provider\r\n   * @param {Object} options\r\n   * @param {ChangeNotifier} options.notifier - ChangeNotifier instance\r\n   * @param {*} options.value - Static value (if not using notifier)\r\n   * @param {Widget} options.child - Child widget\r\n   * @param {string} options.key - Widget key\r\n   */\r\n  constructor({ notifier, value, child, key } = {}) {\r\n    super({ child, data: value, key });\r\n\r\n    if (notifier && !(notifier instanceof ChangeNotifier)) {\r\n      throw new Error('Provider requires a ChangeNotifier instance');\r\n    }\r\n\r\n    this.notifier = notifier;\r\n    this.listeners = [];\r\n  }\r\n\r\n  /**\r\n   * Only notify if notifier value actually changed\r\n   * @param {Provider} oldWidget - Previous widget\r\n   * @returns {boolean} Whether to notify\r\n   */\r\n  updateShouldNotify(oldWidget) {\r\n    // If using notifier, let it handle notifications\r\n    if (this.notifier && oldWidget.notifier === this.notifier) {\r\n      return false;\r\n    }\r\n\r\n    // If values are different, notify\r\n    return this.data !== oldWidget.data;\r\n  }\r\n\r\n  /**\r\n   * Get current provided value\r\n   * @returns {*} The value being provided\r\n   */\r\n  getValue() {\r\n    return this.notifier ? this.notifier.value : this.data;\r\n  }\r\n\r\n  /**\r\n   * Static helper to access provider\r\n   * @param {BuildContext} context\r\n   * @returns {Provider|null}\r\n   */\r\n  static of(context) {\r\n    return context.dependOnInheritedWidgetOfExactType(Provider);\r\n  }\r\n}\r\n\r\n\r\nexport {\r\n  InheritedElement,\r\n  InheritedWidget,\r\n  ChangeNotifier,\r\n  ValueNotifier,\r\n  Provider\r\n};"],
-  "mappings": "AA+BA,OAAS,WAAAA,MAAe,eAQxB,MAAMC,UAAyBD,CAAQ,CAOrC,YAAYE,EAAQC,EAAQC,EAAS,CACnC,MAAMF,EAAQC,EAAQC,CAAO,EAG7B,KAAK,WAAa,IAAI,IAGtB,KAAK,gBAAkBF,EAAO,MAAQA,EAAO,OAAS,KAGtD,KAAK,WAAa,GAEd,KAAK,SAAS,WAChB,QAAQ,IAAI,8BAA8BA,EAAO,YAAY,IAAI,EAAE,CAEvE,CAQA,OAAQ,CACN,GAAI,CAAC,KAAK,OAAO,MACf,MAAM,IAAI,MAAM,0CAA0C,EAI5D,MAAMG,EAAc,KAAK,OAAO,MAGhC,GAAIA,GAAe,OAAOA,GAAgB,UAAYA,EAAY,IAEhE,MAAO,CACL,IAAK,MACL,MAAO,CACL,cAAe,KAAK,OAAO,YAAY,KACvC,kBAAmB,KAAK,GACxB,MAAO,8BACT,EACA,SAAU,CAACA,CAAW,EACtB,SAAU,CACR,kBAAmB,GACnB,WAAY,KAAK,OAAO,YAAY,IACtC,CACF,EAIF,GAAIA,GAAe,OAAOA,GAAgB,WACvCA,EAAY,OAASA,EAAY,aAAeA,EAAY,QAAS,CAGtE,GAAI,KAAK,cACH,KAAK,cAAc,cAAc,KAAK,cAAc,OAAQA,CAAW,EACzE,KAAK,cAAc,aAAaA,CAAW,GAE3C,KAAK,cAAc,OAASA,EAC5B,KAAK,cAAc,eAAe,OAE/B,CAGL,GADA,KAAK,cAAgB,KAAK,QAAQ,cAAcA,EAAa,IAAI,EAC7D,CAAC,KAAK,cACR,MAAM,IAAI,MAAM,4CAA4C,EAI9D,KAAK,SAAS,KAAK,aAAa,EAG3B,KAAK,cAAc,SACtB,KAAK,cAAc,MAAM,CAE7B,CAGA,MAAMC,EAAa,KAAK,cAAc,OAAS,KAAK,cAAc,MAAM,EAExE,MAAO,CACL,IAAK,MACL,MAAO,CACL,cAAe,KAAK,OAAO,YAAY,KACvC,kBAAmB,KAAK,GACxB,MAAO,8BACT,EACA,SAAU,CAACA,CAAU,EACrB,SAAU,CACR,kBAAmB,GACnB,WAAY,KAAK,OAAO,YAAY,IACtC,CACF,CACF,CAGA,MAAO,CACL,IAAK,MACL,MAAO,CACL,cAAe,KAAK,OAAO,YAAY,KACvC,kBAAmB,KAAK,GACxB,MAAO,8BACT,EACA,SAAU,CAACD,CAAW,EACtB,SAAU,CACR,kBAAmB,GACnB,WAAY,KAAK,OAAO,YAAY,IACtC,CACF,CACF,CAMA,gBAAiB,CACf,OAAO,KAAK,MAAM,CACpB,CASA,aAAaE,EAAS,CACpB,GAAI,CAACA,EACH,MAAM,IAAI,MAAM,sCAAsC,EAGxD,GAAI,KAAK,WAAW,IAAIA,CAAO,EAAG,CAC5B,KAAK,SAAS,WAChB,QAAQ,KACN,8BAA8BA,EAAQ,EAAE,kCAC1C,EAEF,MACF,CAEA,KAAK,WAAW,IAAIA,CAAO,EAEvB,KAAK,SAAS,WAChB,QAAQ,IACN,sCAAsCA,EAAQ,EAAE,YACrC,KAAK,WAAW,IAAI,GACjC,CAEJ,CAQA,gBAAgBA,EAAS,CACvB,GAAI,CAACA,EAAS,OAEE,KAAK,WAAW,OAAOA,CAAO,GAE/B,KAAK,SAAS,WAC3B,QAAQ,IACN,wCAAwCA,EAAQ,EAAE,gBACnC,KAAK,WAAW,IAAI,GACrC,CAEJ,CAQA,aAAaA,EAAS,CACpB,OAAO,KAAK,WAAW,IAAIA,CAAO,CACpC,CAOA,IAAI,gBAAiB,CACnB,OAAO,KAAK,WAAW,IACzB,CAQA,OAAOC,EAAW,CAChB,MAAMC,EAAY,KAAK,OAGvB,MAAM,OAAOD,CAAS,EAGtB,MAAME,EAAWF,EAAU,MAAQA,EAAU,OAAS,KAChDG,EAAW,KAAK,gBAKtB,GAHA,KAAK,gBAAkBD,EAGnB,KAAK,OAAO,mBACd,GAAI,CACmB,KAAK,OAAO,mBAAmBD,CAAS,GAGvD,KAAK,SAAS,WAChB,QAAQ,IACN,+CAA+C,KAAK,WAAW,IAAI,aACrE,EAGF,KAAK,iBAAiB,GACb,KAAK,SAAS,WACvB,QAAQ,IACN,wEACF,CAEJ,OAASG,EAAO,CACd,QAAQ,MACN,mDAAmDA,EAAM,OAAO,EAClE,CACF,CAEJ,CAMA,kBAAmB,CAEjB,GAAI,KAAK,WAAY,CACf,KAAK,SAAS,WAChB,QAAQ,KAAK,8DAA8D,EAE7E,MACF,CAEA,KAAK,WAAa,GAElB,GAAI,CACF,MAAMC,EAAY,KAAK,SAAS,UAAY,YAAY,IAAI,EAAI,EAChE,IAAIC,EAAgB,EAGpB,UAAWP,KAAW,KAAK,WACrBA,EAAQ,SAAW,CAACA,EAAQ,OAC9BA,EAAQ,eAAe,EACvBO,KACS,CAACP,EAAQ,SAAW,KAAK,SAAS,WAC3C,QAAQ,KACN,gCAAgCA,EAAQ,EAAE,2BAC5C,EAIJ,GAAI,KAAK,SAAS,UAAW,CAC3B,MAAMQ,EAAW,YAAY,IAAI,EAAIF,EACrC,QAAQ,IACN,+BAA+BC,CAAa,kBAAkBC,EAAS,QAAQ,CAAC,CAAC,IACnF,CACF,CACF,QAAE,CACA,KAAK,WAAa,EACpB,CACF,CAQA,yBAAyBC,EAAU,CACjC,GAAI,MAAK,WAET,MAAK,WAAa,GAElB,GAAI,CACF,UAAWT,KAAWS,EAChB,KAAK,WAAW,IAAIT,CAAO,GAAKA,EAAQ,SAAW,CAACA,EAAQ,OAC9DA,EAAQ,eAAe,CAG7B,QAAE,CACA,KAAK,WAAa,EACpB,EACF,CAKA,OAAQ,CACN,MAAM,MAAM,EAER,KAAK,SAAS,WAChB,QAAQ,IACN,8BAA8B,KAAK,OAAO,YAAY,IAAI,SAClD,KAAK,WAAW,IAAI,aAC9B,CAEJ,CAKA,SAAU,CAER,MAAMU,EAAiB,KAAK,WAAW,KAEvC,KAAK,WAAW,QAAQV,GAAW,CAC7BA,EAAQ,SAEVA,EAAQ,wBAAwB,OAAO,KAAK,EAAE,CAElD,CAAC,EAED,KAAK,WAAW,MAAM,EAElB,KAAK,SAAS,WAChB,QAAQ,IACN,gCAAgC,KAAK,OAAO,YAAY,IAAI,gBAC7CU,CAAc,cAC/B,EAGF,MAAM,QAAQ,CAChB,CAOA,UAAW,CAGT,MAAO,CACL,GAHY,MAAM,SAAS,EAI3B,KAAM,mBACN,eAAgB,KAAK,gBACrB,eAAgB,KAAK,WAAW,KAChC,WAAY,MAAM,KAAK,KAAK,UAAU,EAAE,IAAIC,IAAO,CACjD,GAAIA,EAAG,GACP,KAAMA,EAAG,YAAY,KACrB,QAASA,EAAG,OACd,EAAE,CACJ,CACF,CACF,CAQA,MAAMC,CAAgB,CASpB,YAAY,CAAE,MAAAC,EAAO,KAAAC,EAAM,MAAAC,EAAO,IAAAC,CAAI,EAAI,CAAC,EAAG,CAC5C,GAAI,CAACH,EACH,MAAM,IAAI,MAAM,yCAAyC,EAG3D,KAAK,MAAQA,EACb,KAAK,KAAOC,GAAQC,GAAS,KAC7B,KAAK,IAAMC,EACX,KAAK,KAAO,iBACd,CAcA,mBAAmBd,EAAW,CAE5B,OAAO,KAAK,OAASA,EAAU,IACjC,CAmBA,OAAO,GAAGe,EAAS,CACjB,OAAOA,EAAQ,mCAAmC,IAAI,CACxD,CAUA,cAAcrB,EAAQC,EAAS,CAC7B,OAAO,IAAIH,EAAiB,KAAME,EAAQC,CAAO,CACnD,CACF,CAQA,MAAMqB,CAAe,CACnB,aAAc,CACZ,KAAK,UAAY,IAAI,GACvB,CAMA,YAAYC,EAAU,CACpB,GAAI,OAAOA,GAAa,WACtB,MAAM,IAAI,MAAM,6BAA6B,EAE/C,KAAK,UAAU,IAAIA,CAAQ,CAC7B,CAMA,eAAeA,EAAU,CACvB,KAAK,UAAU,OAAOA,CAAQ,CAChC,CAKA,oBAAqB,CACnB,KAAK,UAAU,MAAM,CACvB,CAMA,iBAAkB,CAChB,UAAWA,KAAY,KAAK,UAC1B,GAAI,CACFA,EAAS,CACX,OAASd,EAAO,CACd,QAAQ,MAAM,mCAAoCA,CAAK,CACzD,CAEJ,CAMA,cAAe,CACb,OAAO,KAAK,UAAU,KAAO,CAC/B,CAMA,IAAI,eAAgB,CAClB,OAAO,KAAK,UAAU,IACxB,CAKA,SAAU,CACR,KAAK,UAAU,MAAM,CACvB,CACF,CAOA,MAAMe,UAAsBF,CAAe,CAKzC,YAAYG,EAAc,CACxB,MAAM,EACN,KAAK,OAASA,CAChB,CAKA,IAAI,OAAQ,CACV,OAAO,KAAK,MACd,CAKA,IAAI,MAAMlB,EAAU,CACd,KAAK,SAAWA,IAClB,KAAK,OAASA,EACd,KAAK,gBAAgB,EAEzB,CAMA,UAAW,CACT,OAAO,KAAK,MACd,CAOA,SAASA,EAAUmB,EAAS,GAAM,CAC5B,KAAK,SAAWnB,IAClB,KAAK,OAASA,EACVmB,GACF,KAAK,gBAAgB,EAG3B,CACF,CAOA,MAAMC,UAAiBX,CAAgB,CASrC,YAAY,CAAE,SAAAY,EAAU,MAAAT,EAAO,MAAAF,EAAO,IAAAG,CAAI,EAAI,CAAC,EAAG,CAGhD,GAFA,MAAM,CAAE,MAAAH,EAAO,KAAME,EAAO,IAAAC,CAAI,CAAC,EAE7BQ,GAAY,EAAEA,aAAoBN,GACpC,MAAM,IAAI,MAAM,6CAA6C,EAG/D,KAAK,SAAWM,EAChB,KAAK,UAAY,CAAC,CACpB,CAOA,mBAAmBtB,EAAW,CAE5B,OAAI,KAAK,UAAYA,EAAU,WAAa,KAAK,SACxC,GAIF,KAAK,OAASA,EAAU,IACjC,CAMA,UAAW,CACT,OAAO,KAAK,SAAW,KAAK,SAAS,MAAQ,KAAK,IACpD,CAOA,OAAO,GAAGe,EAAS,CACjB,OAAOA,EAAQ,mCAAmCM,CAAQ,CAC5D,CACF",
-  "names": ["Element", "InheritedElement", "widget", "parent", "runtime", "childWidget", "childVNode", "element", "newWidget", "oldWidget", "newValue", "oldValue", "error", "startTime", "notifiedCount", "duration", "elements", "dependentCount", "el", "InheritedWidget", "child", "data", "value", "key", "context", "ChangeNotifier", "listener", "ValueNotifier", "initialValue", "notify", "Provider", "notifier"]
-}
diff --git a/packages/flutterjs_engine/src/runtime/dist/key.js b/packages/flutterjs_engine/src/runtime/dist/key.js
deleted file mode 100644
index 9cb83c46..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/key.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class e{constructor(){if(new.target===e)throw new Error("Key is abstract")}}class r extends e{constructor(t){super(),this.value=t}equals(t){return t instanceof r&&this.value===t.value}toString(){return`ValueKey(${this.value})`}}class n extends e{constructor(t){super(),this.value=t}equals(t){return t instanceof n&&this.value===t.value}toString(){return`ObjectKey(${this.value})`}}class u extends e{constructor(t=null){super(),this.debugLabel=t,this._currentElement=null}get currentContext(){return this._currentElement?.context||null}get currentWidget(){return this._currentElement?.widget||null}get currentState(){return this._currentElement?.state||null}equals(t){return t instanceof u&&this===t}toString(){return`GlobalKey${this.debugLabel?`(${this.debugLabel})`:""}`}}export{u as GlobalKey,e as Key,n as ObjectKey,r as ValueKey};
-//# sourceMappingURL=key.js.map
diff --git a/packages/flutterjs_engine/src/runtime/dist/key.js.map b/packages/flutterjs_engine/src/runtime/dist/key.js.map
deleted file mode 100644
index 45dfdca8..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/key.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/key.js"],
-  "sourcesContent": ["/**\r\n * Key classes for widget identification and state preservation\r\n */\r\n\r\n// ============================================================================\r\n// KEY CLASSES\r\n// ============================================================================\r\n\r\nclass Key {\r\n    constructor() {\r\n        if (new.target === Key) {\r\n            throw new Error('Key is abstract');\r\n        }\r\n    }\r\n}\r\n\r\nclass ValueKey extends Key {\r\n    constructor(value) {\r\n        super();\r\n        this.value = value;\r\n    }\r\n\r\n    equals(other) {\r\n        return other instanceof ValueKey && this.value === other.value;\r\n    }\r\n\r\n    toString() {\r\n        return `ValueKey(${this.value})`;\r\n    }\r\n}\r\n\r\nclass ObjectKey extends Key {\r\n    constructor(value) {\r\n        super();\r\n        this.value = value;\r\n    }\r\n\r\n    equals(other) {\r\n        return other instanceof ObjectKey && this.value === other.value;\r\n    }\r\n\r\n    toString() {\r\n        return `ObjectKey(${this.value})`;\r\n    }\r\n}\r\n\r\nclass GlobalKey extends Key {\r\n    constructor(debugLabel = null) {\r\n        super();\r\n        this.debugLabel = debugLabel;\r\n        this._currentElement = null;\r\n    }\r\n\r\n    get currentContext() {\r\n        return this._currentElement?.context || null;\r\n    }\r\n\r\n    get currentWidget() {\r\n        return this._currentElement?.widget || null;\r\n    }\r\n\r\n    get currentState() {\r\n        return this._currentElement?.state || null;\r\n    }\r\n\r\n    equals(other) {\r\n        return other instanceof GlobalKey && this === other;\r\n    }\r\n\r\n    toString() {\r\n        return `GlobalKey${this.debugLabel ? `(${this.debugLabel})` : ''}`;\r\n    }\r\n}\r\n\r\nexport { Key, ValueKey, ObjectKey, GlobalKey };\r\n"],
-  "mappings": "AAQA,MAAMA,CAAI,CACN,aAAc,CACV,GAAI,aAAeA,EACf,MAAM,IAAI,MAAM,iBAAiB,CAEzC,CACJ,CAEA,MAAMC,UAAiBD,CAAI,CACvB,YAAYE,EAAO,CACf,MAAM,EACN,KAAK,MAAQA,CACjB,CAEA,OAAOC,EAAO,CACV,OAAOA,aAAiBF,GAAY,KAAK,QAAUE,EAAM,KAC7D,CAEA,UAAW,CACP,MAAO,YAAY,KAAK,KAAK,GACjC,CACJ,CAEA,MAAMC,UAAkBJ,CAAI,CACxB,YAAYE,EAAO,CACf,MAAM,EACN,KAAK,MAAQA,CACjB,CAEA,OAAOC,EAAO,CACV,OAAOA,aAAiBC,GAAa,KAAK,QAAUD,EAAM,KAC9D,CAEA,UAAW,CACP,MAAO,aAAa,KAAK,KAAK,GAClC,CACJ,CAEA,MAAME,UAAkBL,CAAI,CACxB,YAAYM,EAAa,KAAM,CAC3B,MAAM,EACN,KAAK,WAAaA,EAClB,KAAK,gBAAkB,IAC3B,CAEA,IAAI,gBAAiB,CACjB,OAAO,KAAK,iBAAiB,SAAW,IAC5C,CAEA,IAAI,eAAgB,CAChB,OAAO,KAAK,iBAAiB,QAAU,IAC3C,CAEA,IAAI,cAAe,CACf,OAAO,KAAK,iBAAiB,OAAS,IAC1C,CAEA,OAAOH,EAAO,CACV,OAAOA,aAAiBE,GAAa,OAASF,CAClD,CAEA,UAAW,CACP,MAAO,YAAY,KAAK,WAAa,IAAI,KAAK,UAAU,IAAM,EAAE,EACpE,CACJ",
-  "names": ["Key", "ValueKey", "value", "other", "ObjectKey", "GlobalKey", "debugLabel"]
-}
diff --git a/packages/flutterjs_engine/src/runtime/dist/memory_manager.js b/packages/flutterjs_engine/src/runtime/dist/memory_manager.js
deleted file mode 100644
index ad5bddaa..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/memory_manager.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class a{constructor(e={}){this.config={enableLeakDetection:e.enableLeakDetection!==!1,leakDetectionInterval:e.leakDetectionInterval||3e4,maxRetainedObjects:e.maxRetainedObjects||1e4,warnThreshold:e.warnThreshold||5e3,enableProfiling:e.enableProfiling||!1,debugMode:e.debugMode||!1},this.elementRegistry=new WeakMap,this.vnodeRegistry=new WeakMap,this.listenerRegistry=new WeakMap,this.stateRegistry=new WeakMap,this.disposableRegistry=new Map,this.elementRefs=new Map,this.vnodeRefs=new Map,this.listenerRefs=new Map,this.stats={elementsCreated:0,elementsDisposed:0,vnodeCreated:0,vnodeDisposed:0,listenersAttached:0,listenersRemoved:0,cleanupCallsTotal:0,memoryLeaksDetected:0,peakElementCount:0,peakVNodeCount:0},this.disposalQueue=new Set,this.cleanupScheduled=!1,this.leakDetectionTimer=null,this.config.enableLeakDetection&&this.startLeakDetection()}register(e){if(!e)throw new Error("Element is required for registration");const t={id:e.id,type:e.constructor.name,depth:e.depth,createdAt:Date.now(),mounted:e.mounted,hasChildren:e.children.length>0,hasState:!!e.state,parentId:e.parent?e.parent.id:null};this.elementRegistry.set(e,t),this.config.enableLeakDetection&&this.elementRefs.set(e.id,{element:e,registeredAt:Date.now(),type:e.constructor.name}),this.stats.elementsCreated++,this.elementRefs.size>this.stats.peakElementCount&&(this.stats.peakElementCount=this.elementRefs.size),this.elementRefs.size>this.config.warnThreshold&&this.logWarning(`Element count (${this.elementRefs.size}) exceeds threshold (${this.config.warnThreshold})`),this.config.debugMode&&this.logDebug(`Registered element ${e.id} (${e.constructor.name})`)}unregister(e){e&&(this.disposalQueue.add(e),this.scheduleCleanup())}scheduleCleanup(){this.cleanupScheduled||(this.cleanupScheduled=!0,Promise.resolve().then(()=>{this.performBatchCleanup()}))}performBatchCleanup(){this.cleanupScheduled=!1;const e=Array.from(this.disposalQueue);this.disposalQueue.clear(),e.forEach(t=>{this.cleanupElement(t)}),this.config.debugMode&&this.logDebug(`Batch cleanup: ${e.length} elements`)}cleanupElement(e){const t=e.id;try{if(this.removeAllListeners(e),e.vnode&&this.unregisterVNode(e.vnode),e.state&&this.stateRegistry.delete(e.state),this.disposableRegistry.has(t)){const i=this.disposableRegistry.get(t);try{i()}catch(s){this.logError(`Cleanup function failed for ${t}:`,s)}this.disposableRegistry.delete(t)}e.vnode=null,e.domNode=null,e.children=[],this.elementRegistry.delete(e),this.listenerRegistry.delete(e),this.elementRefs.delete(t),this.stats.elementsDisposed++,this.stats.cleanupCallsTotal++,this.config.debugMode&&this.logDebug(`Cleaned up element ${t}`)}catch(i){this.logError(`Cleanup failed for element ${t}:`,i)}}registerVNode(e,t){if(!(!e||!t)){if(this.vnodeRegistry.set(e,t),this.config.enableLeakDetection){const i=this.generateVNodeId(e);this.vnodeRefs.set(i,{vnode:e,elementId:t.id,createdAt:Date.now()})}this.stats.vnodeCreated++,this.vnodeRefs.size>this.stats.peakVNodeCount&&(this.stats.peakVNodeCount=this.vnodeRefs.size)}}unregisterVNode(e){if(!e)return;this.vnodeRegistry.delete(e);const t=this.generateVNodeId(e);this.vnodeRefs.delete(t),this.stats.vnodeDisposed++}generateVNodeId(e){return e._memoryId||(e._memoryId=`vnode_${++a._vnodeIdCounter}`),e._memoryId}trackListener(e,t,i,s,r={}){if(!e||!t||!i||!s)throw new Error("All listener parameters are required");this.listenerRegistry.has(e)||this.listenerRegistry.set(e,[]);const n=this.listenerRegistry.get(e),o={target:t,event:i,handler:s,options:r,attachedAt:Date.now()};if(n.push(o),this.config.enableLeakDetection){const l=`${e.id}_${i}_${n.length}`;this.listenerRefs.set(l,{elementId:e.id,event:i,attachedAt:Date.now()})}this.stats.listenersAttached++,this.config.debugMode&&this.logDebug(`Tracked listener: ${e.id} \u2192 ${i}`)}removeAllListeners(e){if(!e)return;const t=this.listenerRegistry.get(e);!t||t.length===0||(t.forEach(({target:i,event:s,handler:r,options:n})=>{try{i&&i.removeEventListener&&i.removeEventListener(s,r,n),this.stats.listenersRemoved++}catch(o){this.logError(`Failed to remove listener ${s}:`,o)}}),this.listenerRegistry.delete(e),this.config.enableLeakDetection&&t.forEach((i,s)=>{const r=`${e.id}_${t[s].event}_${s+1}`;this.listenerRefs.delete(r)}),this.config.debugMode&&this.logDebug(`Removed ${t.length} listeners from ${e.id}`))}registerDisposable(e,t){if(!e||typeof t!="function")throw new Error("Valid ID and cleanup function required");this.disposableRegistry.set(e,t)}trackState(e,t){!e||!t||this.stateRegistry.set(e,t)}getElementById(e){const t=this.elementRefs.get(e);return t?t.element:null}getElementMetadata(e){return this.elementRegistry.get(e)||null}getElementForVNode(e){return this.vnodeRegistry.get(e)||null}getListenersForElement(e){return this.listenerRegistry.get(e)||[]}startLeakDetection(){this.leakDetectionTimer||(this.leakDetectionTimer=setInterval(()=>{this.detectLeaks()},this.config.leakDetectionInterval),this.config.debugMode&&this.logDebug("Leak detection started"))}stopLeakDetection(){this.leakDetectionTimer&&(clearInterval(this.leakDetectionTimer),this.leakDetectionTimer=null,this.config.debugMode&&this.logDebug("Leak detection stopped"))}detectLeaks(){const e=Date.now(),t=6e4,i=[];return this.elementRefs.forEach((s,r)=>{const n=s.element,o=e-s.registeredAt;!n.mounted&&o>t&&i.push({type:"element",id:r,elementType:s.type,age:o,mounted:n.mounted})}),this.vnodeRefs.forEach((s,r)=>{const n=e-s.createdAt;n>t*2&&i.push({type:"vnode",id:r,elementId:s.elementId,age:n})}),this.listenerRefs.forEach((s,r)=>{const n=e-s.attachedAt;n>t&&i.push({type:"listener",id:r,elementId:s.elementId,event:s.event,age:n})}),i.length>0&&(this.stats.memoryLeaksDetected+=i.length,this.logWarning(`Potential memory leaks detected: ${i.length}`),this.config.debugMode&&i.forEach(s=>{this.logDebug(`Leak: ${s.type} ${s.id} (age: ${Math.round(s.age/1e3)}s)`)})),i}forceCleanupUnmounted(){const e=[];return this.elementRefs.forEach((t,i)=>{t.element.mounted||(this.cleanupElement(t.element),e.push(i))}),this.config.debugMode&&this.logDebug(`Force cleanup: ${e.length} elements`),e.length}getStats(){return{...this.stats,currentElements:this.elementRefs.size,currentVNodes:this.vnodeRefs.size,currentListeners:this.listenerRefs.size,disposablesRegistered:this.disposableRegistry.size,elementsInQueue:this.disposalQueue.size,leakDetectionEnabled:this.config.enableLeakDetection}}getDetailedReport(){const e=[];return this.elementRefs.forEach((t,i)=>{const s=t.element;e.push({id:i,type:t.type,mounted:s.mounted,depth:s.depth,childCount:s.children.length,hasState:!!s.state,age:Date.now()-t.registeredAt})}),{stats:this.getStats(),elements:e,config:this.config,timestamp:Date.now()}}resetStats(){this.stats={elementsCreated:0,elementsDisposed:0,vnodeCreated:0,vnodeDisposed:0,listenersAttached:0,listenersRemoved:0,cleanupCallsTotal:0,memoryLeaksDetected:0,peakElementCount:0,peakVNodeCount:0}}clear(){this.elementRefs.forEach(e=>{this.cleanupElement(e.element)}),this.elementRefs.clear(),this.vnodeRefs.clear(),this.listenerRefs.clear(),this.disposableRegistry.clear(),this.disposalQueue.clear(),this.config.debugMode&&this.logDebug("Memory manager cleared")}dispose(){this.stopLeakDetection(),this.clear(),this.config.debugMode&&this.logDebug("Memory manager disposed")}logDebug(e){this.config.debugMode&&console.log(`[MemoryManager] ${e}`)}logWarning(e){console.warn(`[MemoryManager] \u26A0\uFE0F  ${e}`)}logError(e,t){console.error(`[MemoryManager] \u274C ${e}`,t)}}a._vnodeIdCounter=0;class h{constructor(e){this.memoryManager=e,this.snapshots=[],this.maxSnapshots=50}takeSnapshot(){const e=this.memoryManager.getStats(),t={timestamp:Date.now(),stats:{...e},heapUsage:this.getHeapUsage()};return this.snapshots.push(t),this.snapshots.length>this.maxSnapshots&&this.snapshots.shift(),t}getHeapUsage(){return typeof performance<"u"&&performance.memory?{usedJSHeapSize:performance.memory.usedJSHeapSize,totalJSHeapSize:performance.memory.totalJSHeapSize,jsHeapSizeLimit:performance.memory.jsHeapSizeLimit}:null}compareSnapshots(e,t){const i={};return Object.keys(e.stats).forEach(s=>{i[s]=t.stats[s]-e.stats[s]}),i}getTrend(){if(this.snapshots.length<2)return null;const e=this.snapshots[0],t=this.snapshots[this.snapshots.length-1];return this.compareSnapshots(e,t)}clear(){this.snapshots=[]}}export{a as MemoryManager,h as MemoryProfiler};
-//# sourceMappingURL=memory_manager.js.map
diff --git a/packages/flutterjs_engine/src/runtime/dist/memory_manager.js.map b/packages/flutterjs_engine/src/runtime/dist/memory_manager.js.map
deleted file mode 100644
index df8c361d..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/memory_manager.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/memory_manager.js"],
-  "sourcesContent": ["/**\r\n * FlutterJS Memory Manager\r\n * \r\n * Manages memory lifecycle, prevents leaks, and tracks resource usage.\r\n * \r\n * Responsibilities:\r\n * - Track element references\r\n * - Manage event listener lifecycle\r\n * - Monitor VNode references\r\n * - Detect memory leaks\r\n * - Provide memory statistics\r\n * - Cleanup on element disposal\r\n */\r\n\r\n/**\r\n * MemoryManager Class\r\n * \r\n * Central memory management system for FlutterJS runtime\r\n */\r\nclass MemoryManager {\r\n  constructor(config = {}) {\r\n    // Configuration\r\n    this.config = {\r\n      enableLeakDetection: config.enableLeakDetection !== false,\r\n      leakDetectionInterval: config.leakDetectionInterval || 30000, // 30s\r\n      maxRetainedObjects: config.maxRetainedObjects || 10000,\r\n      warnThreshold: config.warnThreshold || 5000,\r\n      enableProfiling: config.enableProfiling || false,\r\n      debugMode: config.debugMode || false\r\n    };\r\n    \r\n    // Core registries\r\n    this.elementRegistry = new WeakMap();     // Element \u2192 metadata\r\n    this.vnodeRegistry = new WeakMap();       // VNode \u2192 element\r\n    this.listenerRegistry = new WeakMap();    // Element \u2192 listeners[]\r\n    this.stateRegistry = new WeakMap();       // State \u2192 element\r\n    this.disposableRegistry = new Map();      // ID \u2192 cleanup function\r\n    \r\n    // Strong references for leak detection\r\n    this.elementRefs = new Map();             // ID \u2192 element (for tracking)\r\n    this.vnodeRefs = new Map();               // ID \u2192 vnode\r\n    this.listenerRefs = new Map();            // ID \u2192 listener info\r\n    \r\n    // Statistics\r\n    this.stats = {\r\n      elementsCreated: 0,\r\n      elementsDisposed: 0,\r\n      vnodeCreated: 0,\r\n      vnodeDisposed: 0,\r\n      listenersAttached: 0,\r\n      listenersRemoved: 0,\r\n      cleanupCallsTotal: 0,\r\n      memoryLeaksDetected: 0,\r\n      peakElementCount: 0,\r\n      peakVNodeCount: 0\r\n    };\r\n    \r\n    // Lifecycle tracking\r\n    this.disposalQueue = new Set();\r\n    this.cleanupScheduled = false;\r\n    \r\n    // Leak detection\r\n    this.leakDetectionTimer = null;\r\n    \r\n    // Start leak detection if enabled\r\n    if (this.config.enableLeakDetection) {\r\n      this.startLeakDetection();\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Register an element\r\n   * @param {Element} element - Element to register\r\n   * @param {Object} metadata - Additional metadata\r\n   */\r\n  register(element) {\r\n    if (!element) {\r\n      throw new Error('Element is required for registration');\r\n    }\r\n    \r\n    // Store metadata in WeakMap (auto garbage collected)\r\n    const metadata = {\r\n      id: element.id,\r\n      type: element.constructor.name,\r\n      depth: element.depth,\r\n      createdAt: Date.now(),\r\n      mounted: element.mounted,\r\n      hasChildren: element.children.length > 0,\r\n      hasState: !!element.state,\r\n      parentId: element.parent ? element.parent.id : null\r\n    };\r\n    \r\n    this.elementRegistry.set(element, metadata);\r\n    \r\n    // Store strong reference for leak detection (with ID)\r\n    if (this.config.enableLeakDetection) {\r\n      this.elementRefs.set(element.id, {\r\n        element: element,\r\n        registeredAt: Date.now(),\r\n        type: element.constructor.name\r\n      });\r\n    }\r\n    \r\n    // Update stats\r\n    this.stats.elementsCreated++;\r\n    \r\n    if (this.elementRefs.size > this.stats.peakElementCount) {\r\n      this.stats.peakElementCount = this.elementRefs.size;\r\n    }\r\n    \r\n    // Check threshold\r\n    if (this.elementRefs.size > this.config.warnThreshold) {\r\n      this.logWarning(`Element count (${this.elementRefs.size}) exceeds threshold (${this.config.warnThreshold})`);\r\n    }\r\n    \r\n    if (this.config.debugMode) {\r\n      this.logDebug(`Registered element ${element.id} (${element.constructor.name})`);\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Unregister an element\r\n   * @param {Element} element - Element to unregister\r\n   */\r\n  unregister(element) {\r\n    if (!element) {\r\n      return;\r\n    }\r\n    \r\n    // Schedule cleanup instead of immediate execution\r\n    this.disposalQueue.add(element);\r\n    this.scheduleCleanup();\r\n  }\r\n  \r\n  /**\r\n   * Schedule cleanup batch\r\n   */\r\n  scheduleCleanup() {\r\n    if (this.cleanupScheduled) {\r\n      return;\r\n    }\r\n    \r\n    this.cleanupScheduled = true;\r\n    \r\n    // Use microtask for fast cleanup\r\n    Promise.resolve().then(() => {\r\n      this.performBatchCleanup();\r\n    });\r\n  }\r\n  \r\n  /**\r\n   * Perform batch cleanup\r\n   */\r\n  performBatchCleanup() {\r\n    this.cleanupScheduled = false;\r\n    \r\n    const elements = Array.from(this.disposalQueue);\r\n    this.disposalQueue.clear();\r\n    \r\n    elements.forEach(element => {\r\n      this.cleanupElement(element);\r\n    });\r\n    \r\n    if (this.config.debugMode) {\r\n      this.logDebug(`Batch cleanup: ${elements.length} elements`);\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Cleanup a single element\r\n   * @param {Element} element - Element to cleanup\r\n   */\r\n  cleanupElement(element) {\r\n    const elementId = element.id;\r\n    \r\n    try {\r\n      // Remove event listeners\r\n      this.removeAllListeners(element);\r\n      \r\n      // Cleanup VNode references\r\n      if (element.vnode) {\r\n        this.unregisterVNode(element.vnode);\r\n      }\r\n      \r\n      // Cleanup state references\r\n      if (element.state) {\r\n        this.stateRegistry.delete(element.state);\r\n      }\r\n      \r\n      // Cleanup disposables\r\n      if (this.disposableRegistry.has(elementId)) {\r\n        const cleanup = this.disposableRegistry.get(elementId);\r\n        try {\r\n          cleanup();\r\n        } catch (error) {\r\n          this.logError(`Cleanup function failed for ${elementId}:`, error);\r\n        }\r\n        this.disposableRegistry.delete(elementId);\r\n      }\r\n      \r\n      // Clear element references\r\n      element.vnode = null;\r\n      element.domNode = null;\r\n      element.children = [];\r\n      \r\n      // Remove from registries\r\n      this.elementRegistry.delete(element);\r\n      this.listenerRegistry.delete(element);\r\n      this.elementRefs.delete(elementId);\r\n      \r\n      // Update stats\r\n      this.stats.elementsDisposed++;\r\n      this.stats.cleanupCallsTotal++;\r\n      \r\n      if (this.config.debugMode) {\r\n        this.logDebug(`Cleaned up element ${elementId}`);\r\n      }\r\n    } catch (error) {\r\n      this.logError(`Cleanup failed for element ${elementId}:`, error);\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Register a VNode\r\n   * @param {Object} vnode - VNode to register\r\n   * @param {Element} element - Owning element\r\n   */\r\n  registerVNode(vnode, element) {\r\n    if (!vnode || !element) {\r\n      return;\r\n    }\r\n    \r\n    // Link VNode to element\r\n    this.vnodeRegistry.set(vnode, element);\r\n    \r\n    // Track for leak detection\r\n    if (this.config.enableLeakDetection) {\r\n      const vnodeId = this.generateVNodeId(vnode);\r\n      this.vnodeRefs.set(vnodeId, {\r\n        vnode: vnode,\r\n        elementId: element.id,\r\n        createdAt: Date.now()\r\n      });\r\n    }\r\n    \r\n    this.stats.vnodeCreated++;\r\n    \r\n    if (this.vnodeRefs.size > this.stats.peakVNodeCount) {\r\n      this.stats.peakVNodeCount = this.vnodeRefs.size;\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Unregister a VNode\r\n   * @param {Object} vnode - VNode to unregister\r\n   */\r\n  unregisterVNode(vnode) {\r\n    if (!vnode) {\r\n      return;\r\n    }\r\n    \r\n    this.vnodeRegistry.delete(vnode);\r\n    \r\n    // Remove from tracking\r\n    const vnodeId = this.generateVNodeId(vnode);\r\n    this.vnodeRefs.delete(vnodeId);\r\n    \r\n    this.stats.vnodeDisposed++;\r\n  }\r\n  \r\n  /**\r\n   * Generate VNode ID\r\n   */\r\n  generateVNodeId(vnode) {\r\n    if (!vnode._memoryId) {\r\n      vnode._memoryId = `vnode_${++MemoryManager._vnodeIdCounter}`;\r\n    }\r\n    return vnode._memoryId;\r\n  }\r\n  \r\n  /**\r\n   * Track event listener\r\n   * @param {Element} element - Element owning the listener\r\n   * @param {HTMLElement} target - DOM element\r\n   * @param {string} event - Event name\r\n   * @param {Function} handler - Event handler\r\n   * @param {Object} options - Event options\r\n   */\r\n  trackListener(element, target, event, handler, options = {}) {\r\n    if (!element || !target || !event || !handler) {\r\n      throw new Error('All listener parameters are required');\r\n    }\r\n    \r\n    // Get or create listener list for element\r\n    if (!this.listenerRegistry.has(element)) {\r\n      this.listenerRegistry.set(element, []);\r\n    }\r\n    \r\n    const listeners = this.listenerRegistry.get(element);\r\n    \r\n    const listenerInfo = {\r\n      target: target,\r\n      event: event,\r\n      handler: handler,\r\n      options: options,\r\n      attachedAt: Date.now()\r\n    };\r\n    \r\n    listeners.push(listenerInfo);\r\n    \r\n    // Track for leak detection\r\n    if (this.config.enableLeakDetection) {\r\n      const listenerId = `${element.id}_${event}_${listeners.length}`;\r\n      this.listenerRefs.set(listenerId, {\r\n        elementId: element.id,\r\n        event: event,\r\n        attachedAt: Date.now()\r\n      });\r\n    }\r\n    \r\n    this.stats.listenersAttached++;\r\n    \r\n    if (this.config.debugMode) {\r\n      this.logDebug(`Tracked listener: ${element.id} \u2192 ${event}`);\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Remove all listeners for an element\r\n   * @param {Element} element - Element to remove listeners from\r\n   */\r\n  removeAllListeners(element) {\r\n    if (!element) {\r\n      return;\r\n    }\r\n    \r\n    const listeners = this.listenerRegistry.get(element);\r\n    \r\n    if (!listeners || listeners.length === 0) {\r\n      return;\r\n    }\r\n    \r\n    // Remove each listener\r\n    listeners.forEach(({ target, event, handler, options }) => {\r\n      try {\r\n        if (target && target.removeEventListener) {\r\n          target.removeEventListener(event, handler, options);\r\n        }\r\n        this.stats.listenersRemoved++;\r\n      } catch (error) {\r\n        this.logError(`Failed to remove listener ${event}:`, error);\r\n      }\r\n    });\r\n    \r\n    // Clear listener list\r\n    this.listenerRegistry.delete(element);\r\n    \r\n    // Remove from tracking\r\n    if (this.config.enableLeakDetection) {\r\n      listeners.forEach((_, index) => {\r\n        const listenerId = `${element.id}_${listeners[index].event}_${index + 1}`;\r\n        this.listenerRefs.delete(listenerId);\r\n      });\r\n    }\r\n    \r\n    if (this.config.debugMode) {\r\n      this.logDebug(`Removed ${listeners.length} listeners from ${element.id}`);\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Register a disposable cleanup function\r\n   * @param {string} id - Unique identifier\r\n   * @param {Function} cleanup - Cleanup function\r\n   */\r\n  registerDisposable(id, cleanup) {\r\n    if (!id || typeof cleanup !== 'function') {\r\n      throw new Error('Valid ID and cleanup function required');\r\n    }\r\n    \r\n    this.disposableRegistry.set(id, cleanup);\r\n  }\r\n  \r\n  /**\r\n   * Track state object\r\n   * @param {Object} state - State object\r\n   * @param {Element} element - Owning element\r\n   */\r\n  trackState(state, element) {\r\n    if (!state || !element) {\r\n      return;\r\n    }\r\n    \r\n    this.stateRegistry.set(state, element);\r\n  }\r\n  \r\n  /**\r\n   * Get element by ID (for debugging)\r\n   * @param {string} elementId - Element ID\r\n   * @returns {Element|null}\r\n   */\r\n  getElementById(elementId) {\r\n    const ref = this.elementRefs.get(elementId);\r\n    return ref ? ref.element : null;\r\n  }\r\n  \r\n  /**\r\n   * Get element metadata\r\n   * @param {Element} element - Element\r\n   * @returns {Object|null}\r\n   */\r\n  getElementMetadata(element) {\r\n    return this.elementRegistry.get(element) || null;\r\n  }\r\n  \r\n  /**\r\n   * Get element owning a VNode\r\n   * @param {Object} vnode - VNode\r\n   * @returns {Element|null}\r\n   */\r\n  getElementForVNode(vnode) {\r\n    return this.vnodeRegistry.get(vnode) || null;\r\n  }\r\n  \r\n  /**\r\n   * Get listeners for an element\r\n   * @param {Element} element - Element\r\n   * @returns {Array}\r\n   */\r\n  getListenersForElement(element) {\r\n    return this.listenerRegistry.get(element) || [];\r\n  }\r\n  \r\n  /**\r\n   * Start leak detection\r\n   */\r\n  startLeakDetection() {\r\n    if (this.leakDetectionTimer) {\r\n      return;\r\n    }\r\n    \r\n    this.leakDetectionTimer = setInterval(() => {\r\n      this.detectLeaks();\r\n    }, this.config.leakDetectionInterval);\r\n    \r\n    if (this.config.debugMode) {\r\n      this.logDebug('Leak detection started');\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Stop leak detection\r\n   */\r\n  stopLeakDetection() {\r\n    if (this.leakDetectionTimer) {\r\n      clearInterval(this.leakDetectionTimer);\r\n      this.leakDetectionTimer = null;\r\n      \r\n      if (this.config.debugMode) {\r\n        this.logDebug('Leak detection stopped');\r\n      }\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Detect memory leaks\r\n   */\r\n  detectLeaks() {\r\n    const now = Date.now();\r\n    const leakThreshold = 60000; // 60 seconds\r\n    \r\n    const potentialLeaks = [];\r\n    \r\n    // Check for old unmounted elements still in memory\r\n    this.elementRefs.forEach((ref, id) => {\r\n      const element = ref.element;\r\n      const age = now - ref.registeredAt;\r\n      \r\n      // If element is old and unmounted, it might be leaked\r\n      if (!element.mounted && age > leakThreshold) {\r\n        potentialLeaks.push({\r\n          type: 'element',\r\n          id: id,\r\n          elementType: ref.type,\r\n          age: age,\r\n          mounted: element.mounted\r\n        });\r\n      }\r\n    });\r\n    \r\n    // Check for orphaned VNodes\r\n    this.vnodeRefs.forEach((ref, id) => {\r\n      const age = now - ref.createdAt;\r\n      \r\n      // If VNode is very old, might be leaked\r\n      if (age > leakThreshold * 2) {\r\n        potentialLeaks.push({\r\n          type: 'vnode',\r\n          id: id,\r\n          elementId: ref.elementId,\r\n          age: age\r\n        });\r\n      }\r\n    });\r\n    \r\n    // Check for orphaned listeners\r\n    this.listenerRefs.forEach((ref, id) => {\r\n      const age = now - ref.attachedAt;\r\n      \r\n      if (age > leakThreshold) {\r\n        potentialLeaks.push({\r\n          type: 'listener',\r\n          id: id,\r\n          elementId: ref.elementId,\r\n          event: ref.event,\r\n          age: age\r\n        });\r\n      }\r\n    });\r\n    \r\n    if (potentialLeaks.length > 0) {\r\n      this.stats.memoryLeaksDetected += potentialLeaks.length;\r\n      \r\n      this.logWarning(`Potential memory leaks detected: ${potentialLeaks.length}`);\r\n      \r\n      if (this.config.debugMode) {\r\n        potentialLeaks.forEach(leak => {\r\n          this.logDebug(`Leak: ${leak.type} ${leak.id} (age: ${Math.round(leak.age / 1000)}s)`);\r\n        });\r\n      }\r\n    }\r\n    \r\n    return potentialLeaks;\r\n  }\r\n  \r\n  /**\r\n   * Force cleanup of all unmounted elements\r\n   */\r\n  forceCleanupUnmounted() {\r\n    const cleanedElements = [];\r\n    \r\n    this.elementRefs.forEach((ref, id) => {\r\n      if (!ref.element.mounted) {\r\n        this.cleanupElement(ref.element);\r\n        cleanedElements.push(id);\r\n      }\r\n    });\r\n    \r\n    if (this.config.debugMode) {\r\n      this.logDebug(`Force cleanup: ${cleanedElements.length} elements`);\r\n    }\r\n    \r\n    return cleanedElements.length;\r\n  }\r\n  \r\n  /**\r\n   * Get memory statistics\r\n   * @returns {Object}\r\n   */\r\n  getStats() {\r\n    return {\r\n      ...this.stats,\r\n      currentElements: this.elementRefs.size,\r\n      currentVNodes: this.vnodeRefs.size,\r\n      currentListeners: this.listenerRefs.size,\r\n      disposablesRegistered: this.disposableRegistry.size,\r\n      elementsInQueue: this.disposalQueue.size,\r\n      leakDetectionEnabled: this.config.enableLeakDetection\r\n    };\r\n  }\r\n  \r\n  /**\r\n   * Get detailed report\r\n   * @returns {Object}\r\n   */\r\n  getDetailedReport() {\r\n    const elements = [];\r\n    \r\n    this.elementRefs.forEach((ref, id) => {\r\n      const element = ref.element;\r\n      elements.push({\r\n        id: id,\r\n        type: ref.type,\r\n        mounted: element.mounted,\r\n        depth: element.depth,\r\n        childCount: element.children.length,\r\n        hasState: !!element.state,\r\n        age: Date.now() - ref.registeredAt\r\n      });\r\n    });\r\n    \r\n    return {\r\n      stats: this.getStats(),\r\n      elements: elements,\r\n      config: this.config,\r\n      timestamp: Date.now()\r\n    };\r\n  }\r\n  \r\n  /**\r\n   * Reset statistics\r\n   */\r\n  resetStats() {\r\n    this.stats = {\r\n      elementsCreated: 0,\r\n      elementsDisposed: 0,\r\n      vnodeCreated: 0,\r\n      vnodeDisposed: 0,\r\n      listenersAttached: 0,\r\n      listenersRemoved: 0,\r\n      cleanupCallsTotal: 0,\r\n      memoryLeaksDetected: 0,\r\n      peakElementCount: 0,\r\n      peakVNodeCount: 0\r\n    };\r\n  }\r\n  \r\n  /**\r\n   * Clear all registries (for testing/reset)\r\n   */\r\n  clear() {\r\n    // Perform cleanup on all elements\r\n    this.elementRefs.forEach((ref) => {\r\n      this.cleanupElement(ref.element);\r\n    });\r\n    \r\n    // Clear all registries\r\n    this.elementRefs.clear();\r\n    this.vnodeRefs.clear();\r\n    this.listenerRefs.clear();\r\n    this.disposableRegistry.clear();\r\n    this.disposalQueue.clear();\r\n    \r\n    if (this.config.debugMode) {\r\n      this.logDebug('Memory manager cleared');\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Dispose memory manager\r\n   */\r\n  dispose() {\r\n    this.stopLeakDetection();\r\n    this.clear();\r\n    \r\n    if (this.config.debugMode) {\r\n      this.logDebug('Memory manager disposed');\r\n    }\r\n  }\r\n  \r\n  // Logging helpers\r\n  \r\n  logDebug(message) {\r\n    if (this.config.debugMode) {\r\n      console.log(`[MemoryManager] ${message}`);\r\n    }\r\n  }\r\n  \r\n  logWarning(message) {\r\n    console.warn(`[MemoryManager] \u26A0\uFE0F  ${message}`);\r\n  }\r\n  \r\n  logError(message, error) {\r\n    console.error(`[MemoryManager] \u274C ${message}`, error);\r\n  }\r\n}\r\n\r\n// Static counter for VNode IDs\r\nMemoryManager._vnodeIdCounter = 0;\r\n\r\n/**\r\n * Memory profiler for detailed analysis\r\n */\r\nclass MemoryProfiler {\r\n  constructor(memoryManager) {\r\n    this.memoryManager = memoryManager;\r\n    this.snapshots = [];\r\n    this.maxSnapshots = 50;\r\n  }\r\n  \r\n  /**\r\n   * Take a memory snapshot\r\n   */\r\n  takeSnapshot() {\r\n    const stats = this.memoryManager.getStats();\r\n    \r\n    const snapshot = {\r\n      timestamp: Date.now(),\r\n      stats: { ...stats },\r\n      heapUsage: this.getHeapUsage()\r\n    };\r\n    \r\n    this.snapshots.push(snapshot);\r\n    \r\n    // Keep only recent snapshots\r\n    if (this.snapshots.length > this.maxSnapshots) {\r\n      this.snapshots.shift();\r\n    }\r\n    \r\n    return snapshot;\r\n  }\r\n  \r\n  /**\r\n   * Get heap usage (if available)\r\n   */\r\n  getHeapUsage() {\r\n    if (typeof performance !== 'undefined' && performance.memory) {\r\n      return {\r\n        usedJSHeapSize: performance.memory.usedJSHeapSize,\r\n        totalJSHeapSize: performance.memory.totalJSHeapSize,\r\n        jsHeapSizeLimit: performance.memory.jsHeapSizeLimit\r\n      };\r\n    }\r\n    return null;\r\n  }\r\n  \r\n  /**\r\n   * Compare two snapshots\r\n   */\r\n  compareSnapshots(snapshot1, snapshot2) {\r\n    const diff = {};\r\n    \r\n    Object.keys(snapshot1.stats).forEach(key => {\r\n      diff[key] = snapshot2.stats[key] - snapshot1.stats[key];\r\n    });\r\n    \r\n    return diff;\r\n  }\r\n  \r\n  /**\r\n   * Get growth trend\r\n   */\r\n  getTrend() {\r\n    if (this.snapshots.length < 2) {\r\n      return null;\r\n    }\r\n    \r\n    const first = this.snapshots[0];\r\n    const last = this.snapshots[this.snapshots.length - 1];\r\n    \r\n    return this.compareSnapshots(first, last);\r\n  }\r\n  \r\n  /**\r\n   * Clear snapshots\r\n   */\r\n  clear() {\r\n    this.snapshots = [];\r\n  }\r\n}\r\n\r\n\r\nexport { MemoryManager,\r\n    MemoryProfiler};"],
-  "mappings": "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",
-  "names": ["MemoryManager", "config", "element", "metadata", "elements", "elementId", "cleanup", "error", "vnode", "vnodeId", "target", "event", "handler", "options", "listeners", "listenerInfo", "listenerId", "_", "index", "id", "state", "ref", "now", "leakThreshold", "potentialLeaks", "age", "leak", "cleanedElements", "message", "MemoryProfiler", "memoryManager", "stats", "snapshot", "snapshot1", "snapshot2", "diff", "key", "first", "last"]
-}
diff --git a/packages/flutterjs_engine/src/runtime/dist/runtime.js b/packages/flutterjs_engine/src/runtime/dist/runtime.js
deleted file mode 100644
index 65df4680..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/runtime.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export*from"./build_context.js";export*from"./element.js";export*from"./event_system.js";export*from"./flutterjs_runtime.js";export*from"./gesture_recognizer.js";export*from"./inherited_element.js";export*from"./memory_manager.js";export*from"./runtime_engine.js";export*from"./service_registry.js";export*from"./state_tracker.js";export*from"./state.js";export*from"./update_batcher.js";
-//# sourceMappingURL=runtime.js.map
diff --git a/packages/flutterjs_engine/src/runtime/dist/runtime.js.map b/packages/flutterjs_engine/src/runtime/dist/runtime.js.map
deleted file mode 100644
index 5e6d62d6..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/runtime.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/runtime.js"],
-  "sourcesContent": ["export * from \"./build_context.js\";\r\n\r\nexport * from \"./element.js\";\r\n\r\nexport * from \"./event_system.js\";\r\n\r\nexport * from \"./flutterjs_runtime.js\";\r\n\r\nexport * from \"./gesture_recognizer.js\";\r\nexport * from \"./inherited_element.js\";\r\n\r\nexport * from \"./memory_manager.js\";\r\nexport * from \"./runtime_engine.js\";\r\nexport * from \"./service_registry.js\";\r\nexport * from \"./state_tracker.js\";\r\nexport * from \"./state.js\";\r\nexport * from \"./update_batcher.js\";\r\n"],
-  "mappings": "AAAA,WAAc,qBAEd,WAAc,eAEd,WAAc,oBAEd,WAAc,yBAEd,WAAc,0BACd,WAAc,yBAEd,WAAc,sBACd,WAAc,sBACd,WAAc,wBACd,WAAc,qBACd,WAAc,aACd,WAAc",
-  "names": []
-}
diff --git a/packages/flutterjs_engine/src/runtime/dist/runtime_engine.js b/packages/flutterjs_engine/src/runtime/dist/runtime_engine.js
deleted file mode 100644
index 1e414717..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/runtime_engine.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{StatelessElement as s,StatefulElement as o,ComponentElement as d}from"../src/element.js";import{InheritedElement as u}from"../src/inherited_element.js";class l{constructor(){this.rootElement=null,this.rootWidget=null,this.elementTree=null,this.dirtyElements=new Set,this.updateScheduled=!1,this.isUpdating=!1,this.buildContext=null,this.serviceRegistry=new Map,this.frameCounter=0,this.buildTime=0,this.renderTime=0,this.lastUpdateTime=0,this.mounted=!1,this.disposed=!1,this.config={batchUpdates:!0,debugMode:!1,performanceMonitoring:!0}}mount(e,t){if(this.mounted)throw new Error("Runtime already mounted. Call unmount() first.");if(!e)throw new Error("Root widget is required");if(!t||!(t instanceof HTMLElement))throw new Error("Valid container element is required");try{if(this.rootWidget=e,this.rootElement=t,this.elementTree=this.createElement(e,null),!this.elementTree)throw new Error("Failed to create root element");const i=performance.now(),n=this.elementTree.build();if(this.buildTime=performance.now()-i,!n)throw new Error("Root element build() returned null");const r=performance.now();return this.renderVNode(n,t),this.renderTime=performance.now()-r,this.elementTree.domNode=t.firstChild,this.elementTree.mount(),this.mounted=!0,this.config.debugMode&&(console.log(`[RuntimeEngine] Mounted in ${(this.buildTime+this.renderTime).toFixed(2)}ms`),console.log(`  - Build: ${this.buildTime.toFixed(2)}ms`),console.log(`  - Render: ${this.renderTime.toFixed(2)}ms`)),this}catch(i){throw this.cleanup(),new Error(`Failed to mount application: ${i.message}`)}}createElement(e,t){if(!e)throw new Error("Widget is required");if(typeof e.createElement=="function")return e.createElement(t,this);const i=e.constructor.name;if(this.isStatelessWidget(e))return new s(e,t,this);if(this.isStatefulWidget(e))return new o(e,t,this);if(this.isInheritedWidget(e))return new u(e,t,this);if(this.isComponentWidget(e))return new d(e,t,this);throw new Error(`Unknown widget type: ${i}. Widget must extend StatelessWidget, StatefulWidget, InheritedWidget, or have render/build method.`)}isStatelessWidget(e){return e.constructor.name==="StatelessWidget"||e.constructor.prototype&&e.constructor.prototype.constructor.name==="StatelessWidget"||typeof e.build=="function"&&!e.createState&&!e.child}isStatefulWidget(e){return e.constructor.name==="StatefulWidget"||e.constructor.prototype&&e.constructor.prototype.constructor.name==="StatefulWidget"||typeof e.createState=="function"}isInheritedWidget(e){return e.constructor.name==="InheritedWidget"||e.constructor.prototype&&e.constructor.prototype.constructor.name==="InheritedWidget"||e.child!==void 0&&typeof e.updateShouldNotify=="function"}isComponentWidget(e){return typeof e.render=="function"||typeof e.build=="function"&&typeof e.createState!="function"}renderVNode(e,t){if(!e)return;if(typeof e=="string"){t.textContent=e;return}const i=document.createElement(e.tag||"div");e.props&&Object.entries(e.props).forEach(([n,r])=>{n==="className"?i.className=r:n==="style"&&typeof r=="object"?Object.assign(i.style,r):(n.startsWith("data-"),i.setAttribute(n,r))}),e.style&&Object.assign(i.style,e.style),e.children&&e.children.forEach(n=>{if(typeof n=="string")i.appendChild(document.createTextNode(n));else if(n){const r=document.createElement("div");this.renderVNode(n,r),r.firstChild&&i.appendChild(r.firstChild)}}),t.appendChild(i)}markNeedsBuild(e){if(!e){console.warn("[RuntimeEngine] markNeedsBuild called with null element");return}if(!this.mounted){this.config.debugMode&&console.warn("[RuntimeEngine] markNeedsBuild called but runtime not mounted");return}this.dirtyElements.add(e),this.scheduleUpdate()}scheduleUpdate(){this.updateScheduled||this.disposed||(this.updateScheduled=!0,requestAnimationFrame(()=>{this.performUpdate()}))}performUpdate(){if(!this.disposed){if(this.isUpdating){this.updateScheduled=!0;return}this.updateScheduled=!1,this.isUpdating=!0;try{const e=performance.now(),t=Array.from(this.dirtyElements);if(t.length===0){this.isUpdating=!1;return}t.sort((i,n)=>i.depth-n.depth);for(const i of t)if(i.mounted&&this.dirtyElements.has(i))try{i.rebuild()}catch(n){console.error("[RuntimeEngine] Error rebuilding element:",n)}this.dirtyElements.clear(),this.buildTime=performance.now()-e,this.lastUpdateTime=Date.now(),this.frameCounter++,this.config.performanceMonitoring&&this.buildTime>16&&console.warn(`[RuntimeEngine] Slow update: ${this.buildTime.toFixed(2)}ms (${t.length} elements)`),this.config.debugMode&&console.log(`[RuntimeEngine] Updated ${t.length} elements in ${this.buildTime.toFixed(2)}ms`)}finally{this.isUpdating=!1,this.updateScheduled&&this.dirtyElements.size>0&&this.scheduleUpdate()}}}unmount(){if(!this.mounted){console.warn("[RuntimeEngine] unmount called but not mounted");return}try{this.elementTree&&(this.elementTree.unmount(),this.elementTree=null),this.cleanup(),this.config.debugMode&&console.log("[RuntimeEngine] Unmounted")}catch(e){console.error("[RuntimeEngine] Error during unmount:",e)}}cleanup(){this.dirtyElements.clear(),this.serviceRegistry.clear(),this.mounted=!1,this.updateScheduled=!1,this.isUpdating=!1}dispose(){this.disposed||(this.unmount(),this.rootElement=null,this.rootWidget=null,this.buildContext=null,this.disposed=!0,this.config.debugMode&&console.log("[RuntimeEngine] Disposed"))}getStats(){return{mounted:this.mounted,frameCount:this.frameCounter,buildTime:this.buildTime,renderTime:this.renderTime,lastUpdateTime:this.lastUpdateTime,dirtyElements:this.dirtyElements.size,updateScheduled:this.updateScheduled}}registerService(e,t){this.serviceRegistry.set(e,t)}getService(e){return this.serviceRegistry.get(e)}setDebugMode(e){this.config.debugMode=e}}export{l as RuntimeEngine};
-//# sourceMappingURL=runtime_engine.js.map
diff --git a/packages/flutterjs_engine/src/runtime/dist/runtime_engine.js.map b/packages/flutterjs_engine/src/runtime/dist/runtime_engine.js.map
deleted file mode 100644
index 7cbdbc47..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/runtime_engine.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/runtime_engine.js"],
-  "sourcesContent": ["/**\r\n * FlutterJS Runtime Engine\r\n * \r\n * Core runtime that manages widget lifecycle, element tree, and coordinates\r\n * all system operations. This is the heart of the FlutterJS framework.\r\n * \r\n * Responsibilities:\r\n * - Mount and unmount applications\r\n * - Create and manage element tree\r\n * - Schedule and perform updates\r\n * - Track dirty elements\r\n * - Coordinate with service registry\r\n * - Memory management\r\n */\r\n\r\n// Import Element classes from element.js\r\nimport {\r\n  Element,\r\n  StatelessElement,\r\n  StatefulElement,\r\n\r\n  ComponentElement\r\n} from \"../src/element.js\";\r\n\r\nimport {  InheritedElement,} from \"../src/inherited_element.js\";\r\n\r\nclass RuntimeEngine {\r\n  constructor() {\r\n    // Root references\r\n    this.rootElement = null;           // Root DOM element\r\n    this.rootWidget = null;            // Root widget (e.g., MyApp)\r\n    this.elementTree = null;           // Root element instance\r\n    \r\n    // Update management\r\n    this.dirtyElements = new Set();    // Elements needing rebuild\r\n    this.updateScheduled = false;      // Update queued?\r\n    this.isUpdating = false;           // Currently performing update?\r\n    \r\n    // Context and services\r\n    this.buildContext = null;          // Global context\r\n    this.serviceRegistry = new Map();  // Framework services\r\n    \r\n    // Performance tracking\r\n    this.frameCounter = 0;\r\n    this.buildTime = 0;\r\n    this.renderTime = 0;\r\n    this.lastUpdateTime = 0;\r\n    \r\n    // State\r\n    this.mounted = false;\r\n    this.disposed = false;\r\n    \r\n    // Configuration\r\n    this.config = {\r\n      batchUpdates: true,\r\n      debugMode: false,\r\n      performanceMonitoring: true\r\n    };\r\n  }\r\n  \r\n  /**\r\n   * Initialize and mount application\r\n   * @param {Widget} rootWidget - Root widget of the application\r\n   * @param {HTMLElement} containerElement - DOM container to mount into\r\n   * @returns {RuntimeEngine} this instance for chaining\r\n   */\r\n  mount(rootWidget, containerElement) {\r\n    if (this.mounted) {\r\n      throw new Error('Runtime already mounted. Call unmount() first.');\r\n    }\r\n    \r\n    if (!rootWidget) {\r\n      throw new Error('Root widget is required');\r\n    }\r\n    \r\n    if (!containerElement || !(containerElement instanceof HTMLElement)) {\r\n      throw new Error('Valid container element is required');\r\n    }\r\n    \r\n    try {\r\n      this.rootWidget = rootWidget;\r\n      this.rootElement = containerElement;\r\n      \r\n      // Create root element from widget\r\n      this.elementTree = this.createElement(rootWidget, null);\r\n      \r\n      if (!this.elementTree) {\r\n        throw new Error('Failed to create root element');\r\n      }\r\n      \r\n      // Build initial VNode tree\r\n      const startBuild = performance.now();\r\n      const vnode = this.elementTree.build();\r\n      this.buildTime = performance.now() - startBuild;\r\n      \r\n      if (!vnode) {\r\n        throw new Error('Root element build() returned null');\r\n      }\r\n      \r\n      // Render to DOM\r\n      const startRender = performance.now();\r\n      this.renderVNode(vnode, containerElement);\r\n      this.renderTime = performance.now() - startRender;\r\n      \r\n      // Store DOM reference in element\r\n      this.elementTree.domNode = containerElement.firstChild;\r\n      \r\n      // Mount element tree (calls lifecycle hooks)\r\n      this.elementTree.mount();\r\n      \r\n      this.mounted = true;\r\n      \r\n      if (this.config.debugMode) {\r\n        console.log(`[RuntimeEngine] Mounted in ${(this.buildTime + this.renderTime).toFixed(2)}ms`);\r\n        console.log(`  - Build: ${this.buildTime.toFixed(2)}ms`);\r\n        console.log(`  - Render: ${this.renderTime.toFixed(2)}ms`);\r\n      }\r\n      \r\n      return this;\r\n    } catch (error) {\r\n      this.cleanup();\r\n      throw new Error(`Failed to mount application: ${error.message}`);\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Create element from widget\r\n   * @param {Widget} widget - Widget to create element for\r\n   * @param {Element|null} parent - Parent element\r\n   * @returns {Element} Created element instance\r\n   */\r\n  createElement(widget, parent) {\r\n    if (!widget) {\r\n      throw new Error('Widget is required');\r\n    }\r\n    \r\n    // Check if widget has custom element creation\r\n    if (typeof widget.createElement === 'function') {\r\n      return widget.createElement(parent, this);\r\n    }\r\n    \r\n    // Determine element type based on widget class name\r\n    const widgetType = widget.constructor.name;\r\n    \r\n    // Check for StatelessWidget\r\n    if (this.isStatelessWidget(widget)) {\r\n      return new StatelessElement(widget, parent, this);\r\n    }\r\n    \r\n    // Check for StatefulWidget\r\n    if (this.isStatefulWidget(widget)) {\r\n      return new StatefulElement(widget, parent, this);\r\n    }\r\n    \r\n    // Check for InheritedWidget\r\n    if (this.isInheritedWidget(widget)) {\r\n      return new InheritedElement(widget, parent, this);\r\n    }\r\n    \r\n    // Check for custom component\r\n    if (this.isComponentWidget(widget)) {\r\n      return new ComponentElement(widget, parent, this);\r\n    }\r\n    \r\n    throw new Error(`Unknown widget type: ${widgetType}. Widget must extend StatelessWidget, StatefulWidget, InheritedWidget, or have render/build method.`);\r\n  }\r\n  \r\n  /**\r\n   * Check if widget is StatelessWidget\r\n   */\r\n  isStatelessWidget(widget) {\r\n    return widget.constructor.name === 'StatelessWidget' || \r\n           (widget.constructor.prototype && \r\n            widget.constructor.prototype.constructor.name === 'StatelessWidget') ||\r\n           (typeof widget.build === 'function' && !widget.createState && !widget.child);\r\n  }\r\n  \r\n  /**\r\n   * Check if widget is StatefulWidget\r\n   */\r\n  isStatefulWidget(widget) {\r\n    return widget.constructor.name === 'StatefulWidget' ||\r\n           (widget.constructor.prototype && \r\n            widget.constructor.prototype.constructor.name === 'StatefulWidget') ||\r\n           (typeof widget.createState === 'function');\r\n  }\r\n  \r\n  /**\r\n   * Check if widget is InheritedWidget\r\n   */\r\n  isInheritedWidget(widget) {\r\n    return widget.constructor.name === 'InheritedWidget' ||\r\n           (widget.constructor.prototype && \r\n            widget.constructor.prototype.constructor.name === 'InheritedWidget') ||\r\n           (widget.child !== undefined && typeof widget.updateShouldNotify === 'function');\r\n  }\r\n  \r\n  /**\r\n   * Check if widget is a custom component\r\n   */\r\n  isComponentWidget(widget) {\r\n    return typeof widget.render === 'function' || \r\n           (typeof widget.build === 'function' && \r\n            typeof widget.createState !== 'function');\r\n  }\r\n  \r\n  /**\r\n   * Render VNode to DOM (simple implementation)\r\n   */\r\n  renderVNode(vnode, container) {\r\n    if (!vnode) return;\r\n    \r\n    if (typeof vnode === 'string') {\r\n      container.textContent = vnode;\r\n      return;\r\n    }\r\n    \r\n    const element = document.createElement(vnode.tag || 'div');\r\n    \r\n    // Apply props\r\n    if (vnode.props) {\r\n      Object.entries(vnode.props).forEach(([key, value]) => {\r\n        if (key === 'className') {\r\n          element.className = value;\r\n        } else if (key === 'style' && typeof value === 'object') {\r\n          Object.assign(element.style, value);\r\n        } else if (!key.startsWith('data-')) {\r\n          element.setAttribute(key, value);\r\n        } else {\r\n          element.setAttribute(key, value);\r\n        }\r\n      });\r\n    }\r\n    \r\n    // Apply inline style\r\n    if (vnode.style) {\r\n      Object.assign(element.style, vnode.style);\r\n    }\r\n    \r\n    // Render children\r\n    if (vnode.children) {\r\n      vnode.children.forEach(child => {\r\n        if (typeof child === 'string') {\r\n          element.appendChild(document.createTextNode(child));\r\n        } else if (child) {\r\n          const childContainer = document.createElement('div');\r\n          this.renderVNode(child, childContainer);\r\n          if (childContainer.firstChild) {\r\n            element.appendChild(childContainer.firstChild);\r\n          }\r\n        }\r\n      });\r\n    }\r\n    \r\n    container.appendChild(element);\r\n  }\r\n  \r\n  /**\r\n   * Schedule element for rebuild\r\n   * @param {Element} element - Element that needs rebuild\r\n   */\r\n  markNeedsBuild(element) {\r\n    if (!element) {\r\n      console.warn('[RuntimeEngine] markNeedsBuild called with null element');\r\n      return;\r\n    }\r\n    \r\n    if (!this.mounted) {\r\n      if (this.config.debugMode) {\r\n        console.warn('[RuntimeEngine] markNeedsBuild called but runtime not mounted');\r\n      }\r\n      return;\r\n    }\r\n    \r\n    this.dirtyElements.add(element);\r\n    this.scheduleUpdate();\r\n  }\r\n  \r\n  /**\r\n   * Schedule update on next frame\r\n   */\r\n  scheduleUpdate() {\r\n    if (this.updateScheduled) return;\r\n    if (this.disposed) return;\r\n    \r\n    this.updateScheduled = true;\r\n    \r\n    requestAnimationFrame(() => {\r\n      this.performUpdate();\r\n    });\r\n  }\r\n  \r\n  /**\r\n   * Perform update - rebuild dirty elements\r\n   */\r\n  performUpdate() {\r\n    if (this.disposed) return;\r\n    if (this.isUpdating) {\r\n      // Already updating, reschedule\r\n      this.updateScheduled = true;\r\n      return;\r\n    }\r\n    \r\n    this.updateScheduled = false;\r\n    this.isUpdating = true;\r\n    \r\n    try {\r\n      const startTime = performance.now();\r\n      \r\n      // Get elements to rebuild\r\n      const elements = Array.from(this.dirtyElements);\r\n      \r\n      if (elements.length === 0) {\r\n        this.isUpdating = false;\r\n        return;\r\n      }\r\n      \r\n      // Sort by depth (parents before children)\r\n      elements.sort((a, b) => a.depth - b.depth);\r\n      \r\n      // Rebuild each dirty element\r\n      for (const element of elements) {\r\n        if (element.mounted && this.dirtyElements.has(element)) {\r\n          try {\r\n            element.rebuild();\r\n          } catch (error) {\r\n            console.error(`[RuntimeEngine] Error rebuilding element:`, error);\r\n            // Continue with other elements\r\n          }\r\n        }\r\n      }\r\n      \r\n      // Clear dirty elements\r\n      this.dirtyElements.clear();\r\n      \r\n      // Track performance\r\n      this.buildTime = performance.now() - startTime;\r\n      this.lastUpdateTime = Date.now();\r\n      this.frameCounter++;\r\n      \r\n      if (this.config.performanceMonitoring && this.buildTime > 16) {\r\n        console.warn(`[RuntimeEngine] Slow update: ${this.buildTime.toFixed(2)}ms (${elements.length} elements)`);\r\n      }\r\n      \r\n      if (this.config.debugMode) {\r\n        console.log(`[RuntimeEngine] Updated ${elements.length} elements in ${this.buildTime.toFixed(2)}ms`);\r\n      }\r\n    } finally {\r\n      this.isUpdating = false;\r\n      \r\n      // If more updates were scheduled during update, process them\r\n      if (this.updateScheduled && this.dirtyElements.size > 0) {\r\n        this.scheduleUpdate();\r\n      }\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Unmount entire application\r\n   */\r\n  unmount() {\r\n    if (!this.mounted) {\r\n      console.warn('[RuntimeEngine] unmount called but not mounted');\r\n      return;\r\n    }\r\n    \r\n    try {\r\n      if (this.elementTree) {\r\n        this.elementTree.unmount();\r\n        this.elementTree = null;\r\n      }\r\n      \r\n      this.cleanup();\r\n      \r\n      if (this.config.debugMode) {\r\n        console.log('[RuntimeEngine] Unmounted');\r\n      }\r\n    } catch (error) {\r\n      console.error('[RuntimeEngine] Error during unmount:', error);\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Cleanup internal state\r\n   */\r\n  cleanup() {\r\n    this.dirtyElements.clear();\r\n    this.serviceRegistry.clear();\r\n    this.mounted = false;\r\n    this.updateScheduled = false;\r\n    this.isUpdating = false;\r\n  }\r\n  \r\n  /**\r\n   * Dispose runtime (cannot be used after this)\r\n   */\r\n  dispose() {\r\n    if (this.disposed) return;\r\n    \r\n    this.unmount();\r\n    \r\n    this.rootElement = null;\r\n    this.rootWidget = null;\r\n    this.buildContext = null;\r\n    \r\n    this.disposed = true;\r\n    \r\n    if (this.config.debugMode) {\r\n      console.log('[RuntimeEngine] Disposed');\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Get performance statistics\r\n   */\r\n  getStats() {\r\n    return {\r\n      mounted: this.mounted,\r\n      frameCount: this.frameCounter,\r\n      buildTime: this.buildTime,\r\n      renderTime: this.renderTime,\r\n      lastUpdateTime: this.lastUpdateTime,\r\n      dirtyElements: this.dirtyElements.size,\r\n      updateScheduled: this.updateScheduled\r\n    };\r\n  }\r\n  \r\n  /**\r\n   * Register a service\r\n   */\r\n  registerService(name, service) {\r\n    this.serviceRegistry.set(name, service);\r\n  }\r\n  \r\n  /**\r\n   * Get a service\r\n   */\r\n  getService(name) {\r\n    return this.serviceRegistry.get(name);\r\n  }\r\n  \r\n  /**\r\n   * Enable/disable debug mode\r\n   */\r\n  setDebugMode(enabled) {\r\n    this.config.debugMode = enabled;\r\n  }\r\n}\r\n\r\n\r\n\r\nexport { RuntimeEngine\r\n    };"],
-  "mappings": "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",
-  "names": ["StatelessElement", "StatefulElement", "ComponentElement", "InheritedElement", "RuntimeEngine", "rootWidget", "containerElement", "startBuild", "vnode", "startRender", "error", "widget", "parent", "widgetType", "container", "element", "key", "value", "child", "childContainer", "startTime", "elements", "a", "b", "name", "service", "enabled"]
-}
diff --git a/packages/flutterjs_engine/src/runtime/dist/service_registry.js b/packages/flutterjs_engine/src/runtime/dist/service_registry.js
deleted file mode 100644
index ac7d8415..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/service_registry.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class h{constructor(e={}){this.services=new Map,this.factories=new Map,this.lazyProviders=new Map,this.singletons=new Map,this.scopedServices=new Map,this.metadata=new Map,this.dependencies=new Map,this.config={enableLogging:e.enableLogging!==!1,enableValidation:e.enableValidation!==!1,cacheInstances:e.cacheInstances!==!1,debugMode:e.debugMode||!1,allowOverride:e.allowOverride!==!1,throwOnMissing:e.throwOnMissing||!1},this.stats={servicesRegistered:0,servicesRetrieved:0,cacheHits:0,cacheMisses:0,factoryCalls:0,lazyProviderCalls:0,errors:0},this.listeners=new Map}register(e,s,t={}){if(!e||typeof e!="string")throw new Error("Service name must be a non-empty string");if(s==null)throw new Error(`Cannot register null/undefined service: ${e}`);if(this.has(e)&&!this.config.allowOverride)throw new Error(`Service '${e}' is already registered`);return this.services.set(e,s),this.singletons.set(e,s),this.metadata.set(e,{name:e,type:"singleton",registered:Date.now(),service:s.constructor.name,lazy:!1}),this.factories.delete(e),this.lazyProviders.delete(e),this.stats.servicesRegistered++,this.emit("service-registered",{name:e,service:s,type:"singleton"}),this.config.debugMode&&this.log(`Registered singleton: ${e}`),this}registerFactory(e,s,t={}){if(!e||typeof e!="string")throw new Error("Service name must be a non-empty string");if(typeof s!="function")throw new Error(`Factory for '${e}' must be a function`);if(this.has(e)&&!this.config.allowOverride)throw new Error(`Service '${e}' is already registered`);return this.factories.set(e,s),this.metadata.set(e,{name:e,type:"factory",registered:Date.now(),factory:s.name||"anonymous",lazy:!1}),this.services.delete(e),this.singletons.delete(e),this.lazyProviders.delete(e),this.stats.servicesRegistered++,this.emit("service-registered",{name:e,factory:s,type:"factory"}),this.config.debugMode&&this.log(`Registered factory: ${e}`),this}registerLazy(e,s,t={}){if(!e||typeof e!="string")throw new Error("Service name must be a non-empty string");if(typeof s!="function")throw new Error(`Provider for '${e}' must be a function`);if(this.has(e)&&!this.config.allowOverride)throw new Error(`Service '${e}' is already registered`);return this.lazyProviders.set(e,s),this.metadata.set(e,{name:e,type:"lazy",registered:Date.now(),provider:s.name||"anonymous",lazy:!0}),this.services.delete(e),this.singletons.delete(e),this.factories.delete(e),this.stats.servicesRegistered++,this.emit("service-registered",{name:e,provider:s,type:"lazy"}),this.config.debugMode&&this.log(`Registered lazy: ${e}`),this}registerScoped(e,s,t){if(!e||typeof e!="string")throw new Error("Scope must be a non-empty string");if(!s||typeof s!="string")throw new Error("Service name must be a non-empty string");if(t==null)throw new Error(`Cannot register null/undefined service: ${s}`);return this.scopedServices.has(e)||this.scopedServices.set(e,new Map),this.scopedServices.get(e).set(s,t),this.config.debugMode&&this.log(`Registered scoped: ${e}/${s}`),this}get(e,s={}){const{scope:t=null,throwOnMissing:r=this.config.throwOnMissing}=s;if(!e||typeof e!="string")throw new Error("Service name must be a non-empty string");this.stats.servicesRetrieved++;try{if(t&&this.scopedServices.has(t)){const i=this.scopedServices.get(t);if(i.has(e))return this.stats.cacheHits++,this.config.debugMode&&this.log(`Got scoped service: ${t}/${e}`),i.get(e)}if(this.singletons.has(e))return this.stats.cacheHits++,this.config.debugMode&&this.log(`Got singleton: ${e} (cached)`),this.singletons.get(e);if(this.services.has(e))return this.stats.cacheHits++,this.config.debugMode&&this.log(`Got service: ${e} (cached)`),this.services.get(e);if(this.factories.has(e)){this.stats.cacheMisses++,this.stats.factoryCalls++;const o=this.factories.get(e)();return this.config.debugMode&&this.log(`Got service: ${e} (factory)`),this.emit("service-created",{name:e,type:"factory",instance:o}),o}if(this.lazyProviders.has(e)){this.stats.cacheMisses++,this.stats.lazyProviderCalls++;const o=this.lazyProviders.get(e)();return this.config.cacheInstances&&this.singletons.set(e,o),this.config.debugMode&&this.log(`Got service: ${e} (lazy)`),this.emit("service-created",{name:e,type:"lazy",instance:o}),o}if(this.stats.cacheMisses++,r)throw new Error(`Service not registered: ${e}`);return this.config.debugMode&&this.log(`Service not found: ${e}`),this.emit("service-not-found",{name:e}),null}catch(i){if(this.stats.errors++,console.error(`[ServiceRegistry] Error getting service '${e}':`,i),this.config.throwOnMissing)throw i;return null}}getScoped(e,s){return this.get(s,{scope:e})}has(e){return!e||typeof e!="string"?!1:this.services.has(e)||this.factories.has(e)||this.lazyProviders.has(e)||this.singletons.has(e)}hasScoped(e,s){return!e||!this.scopedServices.has(e)?!1:this.scopedServices.get(e).has(s)}unregister(e){return!e||typeof e!="string"?this:(this.services.delete(e),this.factories.delete(e),this.lazyProviders.delete(e),this.singletons.delete(e),this.metadata.delete(e),this.dependencies.delete(e),this.emit("service-unregistered",{name:e}),this.config.debugMode&&this.log(`Unregistered: ${e}`),this)}unregisterScoped(e,s=null){return!e||!this.scopedServices.has(e)?this:(s?this.scopedServices.get(e).delete(s):this.scopedServices.delete(e),this)}setDependencies(e,s=[]){if(!e||typeof e!="string")throw new Error("Service name required");return this.dependencies.set(e,Array.isArray(s)?s:[]),this}getDependencies(e){return this.dependencies.get(e)||[]}getNames(){const e=new Set;return this.services.forEach((s,t)=>e.add(t)),this.factories.forEach((s,t)=>e.add(t)),this.lazyProviders.forEach((s,t)=>e.add(t)),Array.from(e)}getMetadata(e){return this.metadata.get(e)||null}getAllMetadata(){const e={};return this.metadata.forEach((s,t)=>{e[t]=s}),e}clearScope(e){return this.scopedServices.delete(e),this.config.debugMode&&this.log(`Cleared scope: ${e}`),this}clearAllScopes(){return this.scopedServices.clear(),this.config.debugMode&&this.log("Cleared all scopes"),this}on(e,s){return!e||typeof s!="function"?this:(this.listeners.has(e)||this.listeners.set(e,[]),this.listeners.get(e).push(s),this)}off(e,s){if(!e||!this.listeners.has(e))return this;const t=this.listeners.get(e),r=t.indexOf(s);return r!==-1&&t.splice(r,1),this}emit(e,s){if(!this.listeners.has(e))return;this.listeners.get(e).forEach(r=>{try{r(s)}catch(i){console.error(`[ServiceRegistry] Event listener error for '${e}':`,i)}})}getStats(){return{...this.stats,totalRegistered:this.getNames().length,singletons:this.singletons.size,factories:this.factories.size,lazyProviders:this.lazyProviders.size,scopes:this.scopedServices.size,hitRate:this.stats.servicesRetrieved>0?(this.stats.cacheHits/this.stats.servicesRetrieved*100).toFixed(2):"0.00"}}getDetailedReport(){return{stats:this.getStats(),services:this.getNames(),metadata:this.getAllMetadata(),scopes:Array.from(this.scopedServices.keys()),config:this.config,timestamp:Date.now()}}resetStats(){return this.stats={servicesRegistered:0,servicesRetrieved:0,cacheHits:0,cacheMisses:0,factoryCalls:0,lazyProviderCalls:0,errors:0},this}clear(){return this.services.clear(),this.factories.clear(),this.lazyProviders.clear(),this.singletons.clear(),this.metadata.clear(),this.dependencies.clear(),this.clearAllScopes(),this.listeners.clear(),this.config.debugMode&&this.log("Registry cleared"),this}dispose(){this.clear(),this.listeners.clear(),this.config.debugMode&&this.log("Registry disposed")}log(e){this.config.enableLogging&&console.log(`[ServiceRegistry] ${e}`)}}export{h as ServiceRegistry};
-//# sourceMappingURL=service_registry.js.map
diff --git a/packages/flutterjs_engine/src/runtime/dist/service_registry.js.map b/packages/flutterjs_engine/src/runtime/dist/service_registry.js.map
deleted file mode 100644
index 7cabc67e..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/service_registry.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/service_registry.js"],
-  "sourcesContent": ["/**\r\n * FlutterJS Service Registry\r\n * \r\n * Dependency injection container for framework services.\r\n * Services are accessible to all widgets via BuildContext.\r\n * \r\n * Service Types:\r\n * 1. Singleton - Single instance shared across app\r\n * 2. Lazy - Created on first access\r\n * 3. Factory - New instance each time\r\n * 4. Scoped - Instance per scope\r\n * \r\n * Built-in Services:\r\n * - theme: Theme data and colors\r\n * - mediaQuery: Screen size and orientation\r\n * - navigator: Routing and navigation\r\n * - logger: Logging utility\r\n * - analytics: Analytics tracking\r\n * \r\n * Usage:\r\n * registry.register('theme', themeService);\r\n * const theme = registry.get('theme');\r\n * \r\n * registry.registerFactory('logger', () => new Logger());\r\n * const logger = registry.get('logger');\r\n */\r\n\r\nclass ServiceRegistry {\r\n  /**\r\n   * Create service registry\r\n   * @param {Object} config - Configuration options\r\n   */\r\n  constructor(config = {}) {\r\n    // Service storage\r\n    this.services = new Map();              // name \u2192 service instance\r\n    this.factories = new Map();             // name \u2192 factory function\r\n    this.lazyProviders = new Map();         // name \u2192 provider function\r\n    this.singletons = new Map();            // name \u2192 singleton instance\r\n    this.scopedServices = new Map();        // scope \u2192 Map(name \u2192 instance)\r\n    \r\n    // Service metadata\r\n    this.metadata = new Map();              // name \u2192 ServiceMetadata\r\n    this.dependencies = new Map();          // name \u2192 dependencies[]\r\n    \r\n    // Configuration\r\n    this.config = {\r\n      enableLogging: config.enableLogging !== false,\r\n      enableValidation: config.enableValidation !== false,\r\n      cacheInstances: config.cacheInstances !== false,\r\n      debugMode: config.debugMode || false,\r\n      allowOverride: config.allowOverride !== false,\r\n      throwOnMissing: config.throwOnMissing || false\r\n    };\r\n    \r\n    // Statistics\r\n    this.stats = {\r\n      servicesRegistered: 0,\r\n      servicesRetrieved: 0,\r\n      cacheHits: 0,\r\n      cacheMisses: 0,\r\n      factoryCalls: 0,\r\n      lazyProviderCalls: 0,\r\n      errors: 0\r\n    };\r\n    \r\n    // Event tracking\r\n    this.listeners = new Map();             // eventName \u2192 callbacks[]\r\n  }\r\n  \r\n  /**\r\n   * Register service instance (singleton)\r\n   * @param {string} name - Service name\r\n   * @param {*} service - Service instance\r\n   * @param {Object} options - Registration options\r\n   * @throws {Error} If service already registered\r\n   */\r\n  register(name, service, options = {}) {\r\n    // Validate\r\n    if (!name || typeof name !== 'string') {\r\n      throw new Error('Service name must be a non-empty string');\r\n    }\r\n    \r\n    if (service === null || service === undefined) {\r\n      throw new Error(`Cannot register null/undefined service: ${name}`);\r\n    }\r\n    \r\n    // Check if already registered\r\n    if (this.has(name) && !this.config.allowOverride) {\r\n      throw new Error(`Service '${name}' is already registered`);\r\n    }\r\n    \r\n    // Store service\r\n    this.services.set(name, service);\r\n    this.singletons.set(name, service);\r\n    \r\n    // Store metadata\r\n    this.metadata.set(name, {\r\n      name: name,\r\n      type: 'singleton',\r\n      registered: Date.now(),\r\n      service: service.constructor.name,\r\n      lazy: false\r\n    });\r\n    \r\n    // Clear factories/lazy if overriding\r\n    this.factories.delete(name);\r\n    this.lazyProviders.delete(name);\r\n    \r\n    this.stats.servicesRegistered++;\r\n    \r\n    this.emit('service-registered', { name, service, type: 'singleton' });\r\n    \r\n    if (this.config.debugMode) {\r\n      this.log(`Registered singleton: ${name}`);\r\n    }\r\n    \r\n    return this;\r\n  }\r\n  \r\n  /**\r\n   * Register factory function\r\n   * Creates new instance each time\r\n   * @param {string} name - Service name\r\n   * @param {Function} factory - Factory function\r\n   * @param {Object} options - Registration options\r\n   */\r\n  registerFactory(name, factory, options = {}) {\r\n    // Validate\r\n    if (!name || typeof name !== 'string') {\r\n      throw new Error('Service name must be a non-empty string');\r\n    }\r\n    \r\n    if (typeof factory !== 'function') {\r\n      throw new Error(`Factory for '${name}' must be a function`);\r\n    }\r\n    \r\n    // Check if already registered\r\n    if (this.has(name) && !this.config.allowOverride) {\r\n      throw new Error(`Service '${name}' is already registered`);\r\n    }\r\n    \r\n    // Store factory\r\n    this.factories.set(name, factory);\r\n    \r\n    // Store metadata\r\n    this.metadata.set(name, {\r\n      name: name,\r\n      type: 'factory',\r\n      registered: Date.now(),\r\n      factory: factory.name || 'anonymous',\r\n      lazy: false\r\n    });\r\n    \r\n    // Clear singleton/lazy if overriding\r\n    this.services.delete(name);\r\n    this.singletons.delete(name);\r\n    this.lazyProviders.delete(name);\r\n    \r\n    this.stats.servicesRegistered++;\r\n    \r\n    this.emit('service-registered', { name, factory, type: 'factory' });\r\n    \r\n    if (this.config.debugMode) {\r\n      this.log(`Registered factory: ${name}`);\r\n    }\r\n    \r\n    return this;\r\n  }\r\n  \r\n  /**\r\n   * Register lazy provider\r\n   * Creates singleton on first access\r\n   * @param {string} name - Service name\r\n   * @param {Function} provider - Provider function\r\n   * @param {Object} options - Registration options\r\n   */\r\n  registerLazy(name, provider, options = {}) {\r\n    // Validate\r\n    if (!name || typeof name !== 'string') {\r\n      throw new Error('Service name must be a non-empty string');\r\n    }\r\n    \r\n    if (typeof provider !== 'function') {\r\n      throw new Error(`Provider for '${name}' must be a function`);\r\n    }\r\n    \r\n    // Check if already registered\r\n    if (this.has(name) && !this.config.allowOverride) {\r\n      throw new Error(`Service '${name}' is already registered`);\r\n    }\r\n    \r\n    // Store lazy provider\r\n    this.lazyProviders.set(name, provider);\r\n    \r\n    // Store metadata\r\n    this.metadata.set(name, {\r\n      name: name,\r\n      type: 'lazy',\r\n      registered: Date.now(),\r\n      provider: provider.name || 'anonymous',\r\n      lazy: true\r\n    });\r\n    \r\n    // Clear singleton/factory if overriding\r\n    this.services.delete(name);\r\n    this.singletons.delete(name);\r\n    this.factories.delete(name);\r\n    \r\n    this.stats.servicesRegistered++;\r\n    \r\n    this.emit('service-registered', { name, provider, type: 'lazy' });\r\n    \r\n    if (this.config.debugMode) {\r\n      this.log(`Registered lazy: ${name}`);\r\n    }\r\n    \r\n    return this;\r\n  }\r\n  \r\n  /**\r\n   * Register scoped service\r\n   * Instance per scope\r\n   * @param {string} scope - Scope identifier\r\n   * @param {string} name - Service name\r\n   * @param {*} service - Service instance\r\n   */\r\n  registerScoped(scope, name, service) {\r\n    if (!scope || typeof scope !== 'string') {\r\n      throw new Error('Scope must be a non-empty string');\r\n    }\r\n    \r\n    if (!name || typeof name !== 'string') {\r\n      throw new Error('Service name must be a non-empty string');\r\n    }\r\n    \r\n    if (service === null || service === undefined) {\r\n      throw new Error(`Cannot register null/undefined service: ${name}`);\r\n    }\r\n    \r\n    // Get or create scope\r\n    if (!this.scopedServices.has(scope)) {\r\n      this.scopedServices.set(scope, new Map());\r\n    }\r\n    \r\n    const scopeServices = this.scopedServices.get(scope);\r\n    scopeServices.set(name, service);\r\n    \r\n    if (this.config.debugMode) {\r\n      this.log(`Registered scoped: ${scope}/${name}`);\r\n    }\r\n    \r\n    return this;\r\n  }\r\n  \r\n  /**\r\n   * Get service\r\n   * Retrieves instance, creating if needed (lazy/factory)\r\n   * @param {string} name - Service name\r\n   * @param {Object} options - Retrieval options\r\n   * @returns {*} - Service instance or null\r\n   */\r\n  get(name, options = {}) {\r\n    const { scope = null, throwOnMissing = this.config.throwOnMissing } = options;\r\n    \r\n    // Validate\r\n    if (!name || typeof name !== 'string') {\r\n      throw new Error('Service name must be a non-empty string');\r\n    }\r\n    \r\n    this.stats.servicesRetrieved++;\r\n    \r\n    try {\r\n      // Check scoped services first\r\n      if (scope && this.scopedServices.has(scope)) {\r\n        const scopeServices = this.scopedServices.get(scope);\r\n        if (scopeServices.has(name)) {\r\n          this.stats.cacheHits++;\r\n          if (this.config.debugMode) {\r\n            this.log(`Got scoped service: ${scope}/${name}`);\r\n          }\r\n          return scopeServices.get(name);\r\n        }\r\n      }\r\n      \r\n      // Check singleton cache\r\n      if (this.singletons.has(name)) {\r\n        this.stats.cacheHits++;\r\n        if (this.config.debugMode) {\r\n          this.log(`Got singleton: ${name} (cached)`);\r\n        }\r\n        return this.singletons.get(name);\r\n      }\r\n      \r\n      // Check services map\r\n      if (this.services.has(name)) {\r\n        this.stats.cacheHits++;\r\n        if (this.config.debugMode) {\r\n          this.log(`Got service: ${name} (cached)`);\r\n        }\r\n        return this.services.get(name);\r\n      }\r\n      \r\n      // Try factory\r\n      if (this.factories.has(name)) {\r\n        this.stats.cacheMisses++;\r\n        this.stats.factoryCalls++;\r\n        \r\n        const factory = this.factories.get(name);\r\n        const instance = factory();\r\n        \r\n        if (this.config.debugMode) {\r\n          this.log(`Got service: ${name} (factory)`);\r\n        }\r\n        \r\n        this.emit('service-created', { name, type: 'factory', instance });\r\n        return instance;\r\n      }\r\n      \r\n      // Try lazy provider\r\n      if (this.lazyProviders.has(name)) {\r\n        this.stats.cacheMisses++;\r\n        this.stats.lazyProviderCalls++;\r\n        \r\n        const provider = this.lazyProviders.get(name);\r\n        const instance = provider();\r\n        \r\n        // Cache singleton result\r\n        if (this.config.cacheInstances) {\r\n          this.singletons.set(name, instance);\r\n        }\r\n        \r\n        if (this.config.debugMode) {\r\n          this.log(`Got service: ${name} (lazy)`);\r\n        }\r\n        \r\n        this.emit('service-created', { name, type: 'lazy', instance });\r\n        return instance;\r\n      }\r\n      \r\n      // Not found\r\n      this.stats.cacheMisses++;\r\n      \r\n      if (throwOnMissing) {\r\n        throw new Error(`Service not registered: ${name}`);\r\n      }\r\n      \r\n      if (this.config.debugMode) {\r\n        this.log(`Service not found: ${name}`);\r\n      }\r\n      \r\n      this.emit('service-not-found', { name });\r\n      return null;\r\n    } catch (error) {\r\n      this.stats.errors++;\r\n      console.error(`[ServiceRegistry] Error getting service '${name}':`, error);\r\n      \r\n      if (this.config.throwOnMissing) {\r\n        throw error;\r\n      }\r\n      \r\n      return null;\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Get scoped service\r\n   * @param {string} scope - Scope identifier\r\n   * @param {string} name - Service name\r\n   * @returns {*} - Service instance or null\r\n   */\r\n  getScoped(scope, name) {\r\n    return this.get(name, { scope });\r\n  }\r\n  \r\n  /**\r\n   * Check if service is registered\r\n   * @param {string} name - Service name\r\n   * @returns {boolean}\r\n   */\r\n  has(name) {\r\n    if (!name || typeof name !== 'string') {\r\n      return false;\r\n    }\r\n    \r\n    return this.services.has(name) ||\r\n           this.factories.has(name) ||\r\n           this.lazyProviders.has(name) ||\r\n           this.singletons.has(name);\r\n  }\r\n  \r\n  /**\r\n   * Check if scoped service exists\r\n   * @param {string} scope - Scope identifier\r\n   * @param {string} name - Service name\r\n   * @returns {boolean}\r\n   */\r\n  hasScoped(scope, name) {\r\n    if (!scope || !this.scopedServices.has(scope)) {\r\n      return false;\r\n    }\r\n    \r\n    return this.scopedServices.get(scope).has(name);\r\n  }\r\n  \r\n  /**\r\n   * Unregister service\r\n   * @param {string} name - Service name\r\n   */\r\n  unregister(name) {\r\n    if (!name || typeof name !== 'string') {\r\n      return this;\r\n    }\r\n    \r\n    this.services.delete(name);\r\n    this.factories.delete(name);\r\n    this.lazyProviders.delete(name);\r\n    this.singletons.delete(name);\r\n    this.metadata.delete(name);\r\n    this.dependencies.delete(name);\r\n    \r\n    this.emit('service-unregistered', { name });\r\n    \r\n    if (this.config.debugMode) {\r\n      this.log(`Unregistered: ${name}`);\r\n    }\r\n    \r\n    return this;\r\n  }\r\n  \r\n  /**\r\n   * Unregister scoped service\r\n   * @param {string} scope - Scope identifier\r\n   * @param {string} name - Service name (optional, clear whole scope)\r\n   */\r\n  unregisterScoped(scope, name = null) {\r\n    if (!scope || !this.scopedServices.has(scope)) {\r\n      return this;\r\n    }\r\n    \r\n    if (name) {\r\n      this.scopedServices.get(scope).delete(name);\r\n    } else {\r\n      this.scopedServices.delete(scope);\r\n    }\r\n    \r\n    return this;\r\n  }\r\n  \r\n  /**\r\n   * Set service dependency\r\n   * For tracking dependencies\r\n   * @param {string} name - Service name\r\n   * @param {string[]} deps - Service names it depends on\r\n   */\r\n  setDependencies(name, deps = []) {\r\n    if (!name || typeof name !== 'string') {\r\n      throw new Error('Service name required');\r\n    }\r\n    \r\n    this.dependencies.set(name, Array.isArray(deps) ? deps : []);\r\n    return this;\r\n  }\r\n  \r\n  /**\r\n   * Get service dependencies\r\n   * @param {string} name - Service name\r\n   * @returns {string[]}\r\n   */\r\n  getDependencies(name) {\r\n    return this.dependencies.get(name) || [];\r\n  }\r\n  \r\n  /**\r\n   * Get all registered service names\r\n   * @returns {string[]}\r\n   */\r\n  getNames() {\r\n    const names = new Set();\r\n    \r\n    this.services.forEach((_, name) => names.add(name));\r\n    this.factories.forEach((_, name) => names.add(name));\r\n    this.lazyProviders.forEach((_, name) => names.add(name));\r\n    \r\n    return Array.from(names);\r\n  }\r\n  \r\n  /**\r\n   * Get service metadata\r\n   * @param {string} name - Service name\r\n   * @returns {Object|null}\r\n   */\r\n  getMetadata(name) {\r\n    return this.metadata.get(name) || null;\r\n  }\r\n  \r\n  /**\r\n   * Get all metadata\r\n   * @returns {Object}\r\n   */\r\n  getAllMetadata() {\r\n    const all = {};\r\n    \r\n    this.metadata.forEach((meta, name) => {\r\n      all[name] = meta;\r\n    });\r\n    \r\n    return all;\r\n  }\r\n  \r\n  /**\r\n   * Clear all scoped services for scope\r\n   * @param {string} scope - Scope identifier\r\n   */\r\n  clearScope(scope) {\r\n    this.scopedServices.delete(scope);\r\n    \r\n    if (this.config.debugMode) {\r\n      this.log(`Cleared scope: ${scope}`);\r\n    }\r\n    \r\n    return this;\r\n  }\r\n  \r\n  /**\r\n   * Clear all scopes\r\n   */\r\n  clearAllScopes() {\r\n    this.scopedServices.clear();\r\n    \r\n    if (this.config.debugMode) {\r\n      this.log('Cleared all scopes');\r\n    }\r\n    \r\n    return this;\r\n  }\r\n  \r\n  /**\r\n   * Listen to registry events\r\n   * @param {string} event - Event name\r\n   * @param {Function} callback - Event handler\r\n   */\r\n  on(event, callback) {\r\n    if (!event || typeof callback !== 'function') {\r\n      return this;\r\n    }\r\n    \r\n    if (!this.listeners.has(event)) {\r\n      this.listeners.set(event, []);\r\n    }\r\n    \r\n    this.listeners.get(event).push(callback);\r\n    return this;\r\n  }\r\n  \r\n  /**\r\n   * Remove event listener\r\n   * @param {string} event - Event name\r\n   * @param {Function} callback - Event handler\r\n   */\r\n  off(event, callback) {\r\n    if (!event || !this.listeners.has(event)) {\r\n      return this;\r\n    }\r\n    \r\n    const listeners = this.listeners.get(event);\r\n    const index = listeners.indexOf(callback);\r\n    \r\n    if (index !== -1) {\r\n      listeners.splice(index, 1);\r\n    }\r\n    \r\n    return this;\r\n  }\r\n  \r\n  /**\r\n   * Emit event\r\n   * @private\r\n   */\r\n  emit(event, data) {\r\n    if (!this.listeners.has(event)) {\r\n      return;\r\n    }\r\n    \r\n    const listeners = this.listeners.get(event);\r\n    \r\n    listeners.forEach(callback => {\r\n      try {\r\n        callback(data);\r\n      } catch (error) {\r\n        console.error(`[ServiceRegistry] Event listener error for '${event}':`, error);\r\n      }\r\n    });\r\n  }\r\n  \r\n  /**\r\n   * Get statistics\r\n   * @returns {Object}\r\n   */\r\n  getStats() {\r\n    return {\r\n      ...this.stats,\r\n      totalRegistered: this.getNames().length,\r\n      singletons: this.singletons.size,\r\n      factories: this.factories.size,\r\n      lazyProviders: this.lazyProviders.size,\r\n      scopes: this.scopedServices.size,\r\n      hitRate: this.stats.servicesRetrieved > 0\r\n        ? (this.stats.cacheHits / this.stats.servicesRetrieved * 100).toFixed(2)\r\n        : '0.00'\r\n    };\r\n  }\r\n  \r\n  /**\r\n   * Get detailed report\r\n   * @returns {Object}\r\n   */\r\n  getDetailedReport() {\r\n    return {\r\n      stats: this.getStats(),\r\n      services: this.getNames(),\r\n      metadata: this.getAllMetadata(),\r\n      scopes: Array.from(this.scopedServices.keys()),\r\n      config: this.config,\r\n      timestamp: Date.now()\r\n    };\r\n  }\r\n  \r\n  /**\r\n   * Reset statistics\r\n   */\r\n  resetStats() {\r\n    this.stats = {\r\n      servicesRegistered: 0,\r\n      servicesRetrieved: 0,\r\n      cacheHits: 0,\r\n      cacheMisses: 0,\r\n      factoryCalls: 0,\r\n      lazyProviderCalls: 0,\r\n      errors: 0\r\n    };\r\n    \r\n    return this;\r\n  }\r\n  \r\n  /**\r\n   * Clear all services\r\n   */\r\n  clear() {\r\n    this.services.clear();\r\n    this.factories.clear();\r\n    this.lazyProviders.clear();\r\n    this.singletons.clear();\r\n    this.metadata.clear();\r\n    this.dependencies.clear();\r\n    this.clearAllScopes();\r\n    this.listeners.clear();\r\n    \r\n    if (this.config.debugMode) {\r\n      this.log('Registry cleared');\r\n    }\r\n    \r\n    return this;\r\n  }\r\n  \r\n  /**\r\n   * Dispose registry\r\n   */\r\n  dispose() {\r\n    this.clear();\r\n    this.listeners.clear();\r\n    \r\n    if (this.config.debugMode) {\r\n      this.log('Registry disposed');\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Logging helper\r\n   * @private\r\n   */\r\n  log(message) {\r\n    if (this.config.enableLogging) {\r\n      console.log(`[ServiceRegistry] ${message}`);\r\n    }\r\n  }\r\n}\r\n\r\n\r\nexport {ServiceRegistry};\r\n"],
-  "mappings": "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",
-  "names": ["ServiceRegistry", "config", "name", "service", "options", "factory", "provider", "scope", "throwOnMissing", "scopeServices", "instance", "error", "deps", "names", "_", "all", "meta", "event", "callback", "listeners", "index", "data", "message"]
-}
diff --git a/packages/flutterjs_engine/src/runtime/dist/state.js b/packages/flutterjs_engine/src/runtime/dist/state.js
deleted file mode 100644
index 27497ff8..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/state.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{UpdateBatcher as a}from"./update_batcher.js";import{StateTracker as o}from"./state_tracker.js";class r{constructor(){this._element=null,this._widget=null,this._mounted=!1,this._updateQueued=!1,this._building=!1,this._initStateCalled=!1,this._disposeCalled=!1,this._didInitState=!1,this._didMount=!1,this._isActive=!1,this._buildCount=0,this._lastBuildTime=0}build(t){throw new Error(`${this.constructor.name}.build() must be implemented`)}initState(){}didUpdateWidget(t){}didChangeDependencies(){}dispose(){}didMount(){}activate(){}deactivate(){}reassemble(){}setState(t){if(!this.mounted){console.warn(`[State] setState called on unmounted state (${this.constructor.name})`);return}if(this._building&&console.warn(`[State] setState called during build in ${this.constructor.name}`),typeof t=="function")try{t.call(this)}catch(e){throw console.error("[State] setState update function failed:",e),e}else if(typeof t=="object"&&t!==null)Object.assign(this,t);else if(t!=null)throw new Error("setState accepts function or object");this._element&&this._element.markNeedsBuild?(console.log(`[State] setState calling markNeedsBuild on element: ${this.constructor.name}`),this._element.markNeedsBuild()):console.error(`[State] setState failed: element or markNeedsBuild missing. Has element: ${!!this._element}`)}get context(){return this._element?this._element.context:null}get mounted(){return this._mounted&&this._element&&this._element._mounted}get widget(){if(!this._widget)if(this._element&&this._element.widget)console.warn("[State] this._widget was null, recovering from element. This indicates _mount() was not called properly."),this._widget=this._element.widget;else return console.error(`[State] Cannot access this.widget - state not properly mounted. Element: ${!!this._element}, Element.widget: ${!!this._element?.widget}`),null;return this._widget}_markBuilding(t){this._building=t}_mount(t){if(console.log("\u{1F527} State._mount() called for:",this.constructor.name),this._mounted){console.warn("\u26A0\uFE0F State already mounted");return}if(this._element=t,this._widget=t.widget,console.log("\u2705 State._mount() set widget:",{widgetType:this._widget?.constructor?.name,widgetTitle:this._widget?.title,widgetProps:Object.keys(this._widget||{})}),this._mounted=!0,this._isActive=!0,!this._didInitState){this._didInitState=!0,console.log("\u{1F3AC} Calling initState()");try{this.initState()}catch(e){throw console.error("[State] initState failed:",e),e}}console.log("\u{1F517} Calling didChangeDependencies()");try{this.didChangeDependencies()}catch(e){console.error("[State] didChangeDependencies failed:",e)}if(!this._didMount){this._didMount=!0,console.log("\u{1F389} Calling didMount()");try{this.didMount()}catch(e){console.error("[State] didMount failed:",e)}}console.log("\u2705 State._mount() complete")}_unmount(){this._mounted&&(this._isActive=!1,this._mounted=!1)}_reactivate(){if(!this._isActive){this._isActive=!0;try{this.activate()}catch(t){console.error("[State] activate failed:",t)}}}_deactivate(){if(this._isActive){this._isActive=!1;try{this.deactivate()}catch(t){console.error("[State] deactivate failed:",t)}}}_updateWidget(t){console.log("\u{1F504} State._updateWidget() called"),console.log("  Old widget:",this._widget?.constructor?.name),console.log("  New widget:",t?.constructor?.name);const e=this._widget;if(this._widget=t,this.didUpdateWidget&&typeof this.didUpdateWidget=="function")try{this.didUpdateWidget(e)}catch(i){console.error("[State] didUpdateWidget failed:",i)}console.log("\u2705 Widget updated")}_dispose(){if(!this._disposeCalled){this._disposeCalled=!0,this._mounted=!1,this._isActive=!1;try{this.dispose()}catch(t){console.error("[State] dispose failed:",t)}this._element=null,this._widget=null}}getStats(){return{mounted:this.mounted,buildCount:this._buildCount,lastBuildTime:this._lastBuildTime,initStateCalled:this._initStateCalled,disposeCalled:this._disposeCalled,isActive:this._isActive,hasWidget:!!this._widget,widgetType:this._widget?.constructor?.name||"none"}}print(t){console.log(t)}}class d extends r{constructor(){super()}_mount(t){super._mount(t);const e=this.constructor.widgetType;e&&!(this._widget instanceof e)&&console.warn(`[TypedState] Type mismatch: expected ${e.name}, got ${this._widget?.constructor?.name}`)}get widget(){const t=super.widget;if(!t)throw new Error("[TypedState] this.widget is null. State may not be properly mounted. Ensure StatefulElement calls state._mount(this) during mount.");return t}}class l{constructor(t,e,i=null){this._element=t,this._runtime=e,this._state=i}get widget(){return this._state&&this._state._widget?this._state._widget:this._element?.widget||null}get state(){return this._state}get element(){return this._element}get runtime(){return this._runtime}findAncestorWidgetOfExactType(t){let e=this._element?._parent;for(;e;){if(e.widget instanceof t)return e.widget;e=e._parent}return null}findAncestorStateOfType(t){let e=this._element?._parent;for(;e;){if(e.state&&e.state instanceof t)return e.state;e=e._parent}return null}}class s{constructor(t){this.runtime=t,this.states=new Map,this.stateElements=new WeakMap,this.updateBatcher=new a(this),this.stateTracker=new o,this.config={enableBatching:!0,enableTracking:!0,warnOnSetStateDuringBuild:!0,debugMode:!1},this.stats={statesCreated:0,statesDisposed:0,setStateCalls:0,batchedUpdates:0}}register(t,e){if(!t||!e)throw new Error("State and element are required");const i=this.generateStateId(t);this.states.set(i,t),this.stateElements.set(t,e),!t._widget&&e.widget&&(console.warn("[StateManager] State widget not set, setting from element. This indicates _mount() was not called."),t._widget=e.widget),this.stats.statesCreated++,this.config.debugMode&&(console.log(`[StateManager] Registered state ${i}`),console.log(`  Widget type: ${t._widget?.constructor?.name}`),console.log("  Widget props:",Object.keys(t._widget||{})))}unregister(t){if(!t)return;const e=this.generateStateId(t);t._disposeCalled||t._dispose(),this.states.delete(e),this.stateElements.delete(t),t._element=null,t._widget=null,this.stats.statesDisposed++,this.config.debugMode&&console.log(`[StateManager] Unregistered state ${e}`)}handleSetState(t,e){!t||!t.mounted||(this.stats.setStateCalls++,this.config.enableBatching?this.updateBatcher.queueUpdate(t._element,e):(e(),t._element.markNeedsBuild()))}generateStateId(t){return t._stateId||(t._stateId=`state_${++s._stateIdCounter}`),t._stateId}getElement(t){return this.stateElements.get(t)}getStats(){return{...this.stats,currentStates:this.states.size,batcher:this.updateBatcher.getStats(),tracker:this.stateTracker.getStats()}}clear(){this.states.forEach(t=>{t._disposeCalled||t._dispose()}),this.states.clear(),this.updateBatcher.clear(),this.stateTracker.clear()}dispose(){this.clear()}}s._stateIdCounter=0;export{l as EnhancedBuildContext,r as State,s as StateManager,d as TypedState};
-//# sourceMappingURL=state.js.map
diff --git a/packages/flutterjs_engine/src/runtime/dist/state.js.map b/packages/flutterjs_engine/src/runtime/dist/state.js.map
deleted file mode 100644
index 806c541a..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/state.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/state.js"],
-  "sourcesContent": ["/**\r\n * ============================================================================\r\n * Flutter-Style Typed State System\r\n * ============================================================================\r\n * \r\n * Implements State<T> pattern from Flutter where:\r\n * - State<MyHomePage> gives you access to this.widget as MyHomePage\r\n * - Automatic type inference through context\r\n * - Works just like Flutter without user-side workarounds\r\n * \r\n * USAGE:\r\n * class _MyHomePageState extends State {\r\n *   build(context) {\r\n *     return Text(this.widget.title);  // \u2705 this.widget is MyHomePage\r\n *   }\r\n * }\r\n */\r\n\r\nimport { UpdateBatcher } from \"./update_batcher.js\";\r\nimport { StateTracker } from \"./state_tracker.js\";\r\n\r\n// ============================================================================\r\n// STATE CLASS - WITH FLUTTER-STYLE GENERIC SUPPORT\r\n// ============================================================================\r\n\r\n/**\r\n * Base State class with generic widget type support\r\n * \r\n * In Flutter: class _MyState extends State<MyWidget>\r\n * In FlutterJS: class _MyState extends State\r\n * \r\n * The generic type is handled automatically through the widget-state connection\r\n */\r\nclass State {\r\n  constructor() {\r\n    // Internal references (set by framework)\r\n    this._element = null;           // Owning StatefulElement\r\n    this._widget = null;            // Current widget configuration - MUST BE SET\r\n    this._mounted = false;          // Is state mounted?\r\n    this._updateQueued = false;     // Update scheduled?\r\n    this._building = false;         // Currently building?\r\n\r\n    // Lifecycle tracking\r\n    this._initStateCalled = false;\r\n    this._disposeCalled = false;\r\n    this._didInitState = false;\r\n    this._didMount = false;\r\n    this._isActive = false;\r\n\r\n    // Performance tracking\r\n    this._buildCount = 0;\r\n    this._lastBuildTime = 0;\r\n  }\r\n\r\n  /**\r\n   * Build widget tree - MUST be implemented by subclass\r\n   * @param {BuildContext} context - Build context\r\n   * @returns {Widget} Widget tree\r\n   */\r\n  build(context) {\r\n    throw new Error(`${this.constructor.name}.build() must be implemented`);\r\n  }\r\n\r\n  // ============================================================================\r\n  // LIFECYCLE METHODS\r\n  // ============================================================================\r\n\r\n  /**\r\n   * Called once when state is first created\r\n   * Override to initialize state\r\n   */\r\n  initState() {\r\n    // Override in subclass\r\n  }\r\n\r\n  /**\r\n   * Called when widget configuration changes\r\n   * @param {Widget} oldWidget - Previous widget\r\n   */\r\n  didUpdateWidget(oldWidget) {\r\n    // Override in subclass\r\n  }\r\n\r\n  /**\r\n   * Called when inherited dependencies change\r\n   */\r\n  didChangeDependencies() {\r\n    // Override in subclass\r\n  }\r\n\r\n  /**\r\n   * Called when state is about to be permanently removed\r\n   * Override to cleanup resources (timers, listeners, etc.)\r\n   */\r\n  dispose() {\r\n    // Override in subclass\r\n  }\r\n\r\n  /**\r\n   * Called after first build completes\r\n   */\r\n  didMount() {\r\n    // Override in subclass\r\n  }\r\n\r\n  /**\r\n   * Called when state is reactivated (after deactivate)\r\n   */\r\n  activate() {\r\n    // Override in subclass\r\n  }\r\n\r\n  /**\r\n   * Called when state is deactivated (but not disposed)\r\n   */\r\n  deactivate() {\r\n    // Override in subclass\r\n  }\r\n\r\n  /**\r\n   * Called during hot reload\r\n   */\r\n  reassemble() {\r\n    // Override in subclass\r\n  }\r\n\r\n  // ============================================================================\r\n  // STATE UPDATE METHOD - FLUTTER API\r\n  // ============================================================================\r\n\r\n  /**\r\n   * Update state and schedule rebuild\r\n   * @param {Function|Object} updateFn - Update function or object\r\n   */\r\n  setState(updateFn) {\r\n    // Check if mounted\r\n    if (!this.mounted) {\r\n      console.warn(`[State] setState called on unmounted state (${this.constructor.name})`);\r\n      return;\r\n    }\r\n\r\n    // Check if building\r\n    if (this._building) {\r\n      console.warn(`[State] setState called during build in ${this.constructor.name}`);\r\n    }\r\n\r\n    // Apply state update\r\n    if (typeof updateFn === 'function') {\r\n      try {\r\n        updateFn.call(this);\r\n      } catch (error) {\r\n        console.error(`[State] setState update function failed:`, error);\r\n        throw error;\r\n      }\r\n    } else if (typeof updateFn === 'object' && updateFn !== null) {\r\n      // Direct object merge\r\n      Object.assign(this, updateFn);\r\n    } else if (updateFn !== undefined && updateFn !== null) {\r\n      throw new Error('setState accepts function or object');\r\n    }\r\n\r\n    // Mark element for rebuild\r\n    // Mark element for rebuild\r\n    if (this._element && this._element.markNeedsBuild) {\r\n      console.log(`[State] setState calling markNeedsBuild on element: ${this.constructor.name}`);\r\n      this._element.markNeedsBuild();\r\n    } else {\r\n      console.error(`[State] setState failed: element or markNeedsBuild missing. Has element: ${!!this._element}`);\r\n    }\r\n  }\r\n\r\n  // ============================================================================\r\n  // FLUTTER-STYLE GETTERS\r\n  // ============================================================================\r\n\r\n  /**\r\n   * Get BuildContext\r\n   * @returns {BuildContext|null}\r\n   */\r\n  get context() {\r\n    return this._element ? this._element.context : null;\r\n  }\r\n\r\n  /**\r\n   * Check if state is mounted\r\n   * @returns {boolean}\r\n   */\r\n  get mounted() {\r\n    return this._mounted && this._element && this._element._mounted;\r\n  }\r\n\r\n  /**\r\n   * \u2705 CRITICAL GETTER: Get current widget (typed as T in State<T>)\r\n   * This is THE key to accessing widget properties in Flutter style\r\n   * \r\n   * Example:\r\n   * class _MyState extends State {\r\n   *   build(context) {\r\n   *     return Text(this.widget.title);  // \u2705 Works!\r\n   *   }\r\n   * }\r\n   * \r\n   * @returns {StatefulWidget} The widget that created this state\r\n   */\r\n  get widget() {\r\n    if (!this._widget) {\r\n      // \u2705 FALLBACK: Try to get widget from element if not set\r\n      if (this._element && this._element.widget) {\r\n        console.warn(\r\n          `[State] this._widget was null, recovering from element. ` +\r\n          `This indicates _mount() was not called properly.`\r\n        );\r\n        this._widget = this._element.widget;\r\n      } else {\r\n        console.error(\r\n          `[State] Cannot access this.widget - state not properly mounted. ` +\r\n          `Element: ${!!this._element}, Element.widget: ${!!this._element?.widget}`\r\n        );\r\n        return null;\r\n      }\r\n    }\r\n    return this._widget;\r\n  }\r\n\r\n  /**\r\n   * Mark state as building\r\n   * @private\r\n   */\r\n  _markBuilding(building) {\r\n    this._building = building;\r\n  }\r\n\r\n  // ============================================================================\r\n  // INTERNAL LIFECYCLE METHODS - CALLED BY FRAMEWORK\r\n  // ============================================================================\r\n\r\n  /**\r\n   * \u2705 CRITICAL METHOD: Internal mount - called by StatefulElement.mount()\r\n   * This is where this._widget gets set!\r\n   * \r\n   * @param {StatefulElement} element - The element that owns this state\r\n   */\r\n  _mount(element) {\r\n    console.log('\uD83D\uDD27 State._mount() called for:', this.constructor.name);\r\n\r\n    if (this._mounted) {\r\n      console.warn('\u26A0\uFE0F State already mounted');\r\n      return;\r\n    }\r\n\r\n    // \u2705 SET THE ELEMENT REFERENCE\r\n    this._element = element;\r\n\r\n    // \u2705 CRITICAL: SET THE WIDGET REFERENCE\r\n    // This makes this.widget.title work!\r\n    this._widget = element.widget;\r\n\r\n    console.log('\u2705 State._mount() set widget:', {\r\n      widgetType: this._widget?.constructor?.name,\r\n      widgetTitle: this._widget?.title,\r\n      widgetProps: Object.keys(this._widget || {})\r\n    });\r\n\r\n    // \u2705 MARK AS MOUNTED\r\n    this._mounted = true;\r\n    this._isActive = true;\r\n\r\n    // Call initState if not already called\r\n    if (!this._didInitState) {\r\n      this._didInitState = true;\r\n      console.log('\uD83C\uDFAC Calling initState()');\r\n      try {\r\n        this.initState();\r\n      } catch (error) {\r\n        console.error(`[State] initState failed:`, error);\r\n        throw error;\r\n      }\r\n    }\r\n\r\n    // Call didChangeDependencies\r\n    console.log('\uD83D\uDD17 Calling didChangeDependencies()');\r\n    try {\r\n      this.didChangeDependencies();\r\n    } catch (error) {\r\n      console.error(`[State] didChangeDependencies failed:`, error);\r\n    }\r\n\r\n    // Call didMount after first build\r\n    if (!this._didMount) {\r\n      this._didMount = true;\r\n      console.log('\uD83C\uDF89 Calling didMount()');\r\n      try {\r\n        this.didMount();\r\n      } catch (error) {\r\n        console.error(`[State] didMount failed:`, error);\r\n      }\r\n    }\r\n\r\n    console.log('\u2705 State._mount() complete');\r\n  }\r\n\r\n  /**\r\n   * Internal: Unmount the state\r\n   * Called by StatefulElement.unmount()\r\n   */\r\n  _unmount() {\r\n    if (!this._mounted) {\r\n      return;\r\n    }\r\n\r\n    this._isActive = false;\r\n    this._mounted = false;\r\n  }\r\n\r\n  /**\r\n   * Internal: Reactivate the state\r\n   */\r\n  _reactivate() {\r\n    if (this._isActive) {\r\n      return;\r\n    }\r\n\r\n    this._isActive = true;\r\n\r\n    try {\r\n      this.activate();\r\n    } catch (error) {\r\n      console.error(`[State] activate failed:`, error);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Internal: Deactivate the state\r\n   */\r\n  _deactivate() {\r\n    if (!this._isActive) {\r\n      return;\r\n    }\r\n\r\n    this._isActive = false;\r\n\r\n    try {\r\n      this.deactivate();\r\n    } catch (error) {\r\n      console.error(`[State] deactivate failed:`, error);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * \u2705 CRITICAL METHOD: Update widget reference when widget rebuilds\r\n   * Called by StatefulElement.updateWidget()\r\n   * \r\n   * @param {Widget} newWidget - New widget configuration\r\n   */\r\n  _updateWidget(newWidget) {\r\n    console.log('\uD83D\uDD04 State._updateWidget() called');\r\n    console.log('  Old widget:', this._widget?.constructor?.name);\r\n    console.log('  New widget:', newWidget?.constructor?.name);\r\n\r\n    const oldWidget = this._widget;\r\n\r\n    // \u2705 UPDATE THE WIDGET REFERENCE\r\n    this._widget = newWidget;\r\n\r\n    // Call user's didUpdateWidget lifecycle\r\n    if (this.didUpdateWidget && typeof this.didUpdateWidget === 'function') {\r\n      try {\r\n        this.didUpdateWidget(oldWidget);\r\n      } catch (error) {\r\n        console.error(`[State] didUpdateWidget failed:`, error);\r\n      }\r\n    }\r\n\r\n    console.log('\u2705 Widget updated');\r\n  }\r\n\r\n  /**\r\n   * Internal: Dispose state\r\n   */\r\n  _dispose() {\r\n    if (this._disposeCalled) {\r\n      return;\r\n    }\r\n\r\n    this._disposeCalled = true;\r\n    this._mounted = false;\r\n    this._isActive = false;\r\n\r\n    try {\r\n      this.dispose();\r\n    } catch (error) {\r\n      console.error(`[State] dispose failed:`, error);\r\n    }\r\n\r\n    // Clear references\r\n    this._element = null;\r\n    this._widget = null;\r\n  }\r\n\r\n  /**\r\n   * Get state statistics\r\n   */\r\n  getStats() {\r\n    return {\r\n      mounted: this.mounted,\r\n      buildCount: this._buildCount,\r\n      lastBuildTime: this._lastBuildTime,\r\n      initStateCalled: this._initStateCalled,\r\n      disposeCalled: this._disposeCalled,\r\n      isActive: this._isActive,\r\n      hasWidget: !!this._widget,\r\n      widgetType: this._widget?.constructor?.name || 'none'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Print to console (Flutter compatibility)\r\n   * The transpiler maps Dart's print() to this.print() in State methods\r\n   */\r\n  print(message) {\r\n    console.log(message);\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// ENHANCED STATE WITH TYPE CHECKING (Optional)\r\n// ============================================================================\r\n\r\n/**\r\n * TypedState - Optional enhanced state with runtime type checking\r\n * \r\n * Usage:\r\n * class _MyState extends TypedState {\r\n *   static widgetType = MyHomePage;\r\n *   \r\n *   build(context) {\r\n *     // TypedState ensures this.widget is MyHomePage\r\n *     return Text(this.widget.title);\r\n *   }\r\n * }\r\n */\r\nclass TypedState extends State {\r\n  constructor() {\r\n    super();\r\n  }\r\n\r\n  /**\r\n   * Override _mount to add type checking\r\n   */\r\n  _mount(element) {\r\n    // Call parent mount\r\n    super._mount(element);\r\n\r\n    // Optional: Check widget type matches\r\n    const expectedType = this.constructor.widgetType;\r\n    if (expectedType && !(this._widget instanceof expectedType)) {\r\n      console.warn(\r\n        `[TypedState] Type mismatch: expected ${expectedType.name}, ` +\r\n        `got ${this._widget?.constructor?.name}`\r\n      );\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Type-safe widget getter with fallback\r\n   */\r\n  get widget() {\r\n    const widget = super.widget;\r\n\r\n    if (!widget) {\r\n      throw new Error(\r\n        `[TypedState] this.widget is null. State may not be properly mounted. ` +\r\n        `Ensure StatefulElement calls state._mount(this) during mount.`\r\n      );\r\n    }\r\n\r\n    return widget;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// CONTEXT BUILDER - PROVIDES WIDGET THROUGH CONTEXT\r\n// ============================================================================\r\n\r\n/**\r\n * Enhanced BuildContext that provides widget access\r\n */\r\nclass EnhancedBuildContext {\r\n  constructor(element, runtime, state = null) {\r\n    this._element = element;\r\n    this._runtime = runtime;\r\n    this._state = state;\r\n  }\r\n\r\n  /**\r\n   * Get the widget that created this context\r\n   * For StatefulWidgets, this is the StatefulWidget instance\r\n   */\r\n  get widget() {\r\n    if (this._state && this._state._widget) {\r\n      return this._state._widget;\r\n    }\r\n    return this._element?.widget || null;\r\n  }\r\n\r\n  /**\r\n   * Get the state object (if this is a StatefulWidget)\r\n   */\r\n  get state() {\r\n    return this._state;\r\n  }\r\n\r\n  /**\r\n   * Get the element\r\n   */\r\n  get element() {\r\n    return this._element;\r\n  }\r\n\r\n  /**\r\n   * Get the runtime\r\n   */\r\n  get runtime() {\r\n    return this._runtime;\r\n  }\r\n\r\n  /**\r\n   * Find ancestor widget of type T\r\n   */\r\n  findAncestorWidgetOfExactType(Type) {\r\n    let current = this._element?._parent;\r\n\r\n    while (current) {\r\n      if (current.widget instanceof Type) {\r\n        return current.widget;\r\n      }\r\n      current = current._parent;\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Find ancestor state of type T\r\n   */\r\n  findAncestorStateOfType(Type) {\r\n    let current = this._element?._parent;\r\n\r\n    while (current) {\r\n      if (current.state && current.state instanceof Type) {\r\n        return current.state;\r\n      }\r\n      current = current._parent;\r\n    }\r\n\r\n    return null;\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// STATE MANAGER - MANAGES STATE LIFECYCLE\r\n// ============================================================================\r\n\r\nclass StateManager {\r\n  constructor(runtime) {\r\n    this.runtime = runtime;\r\n\r\n    // State registry\r\n    this.states = new Map();              // stateId \u2192 state\r\n    this.stateElements = new WeakMap();   // state \u2192 element\r\n\r\n    // Update batching\r\n    this.updateBatcher = new UpdateBatcher(this);\r\n\r\n    // State tracking\r\n    this.stateTracker = new StateTracker();\r\n\r\n    // Configuration\r\n    this.config = {\r\n      enableBatching: true,\r\n      enableTracking: true,\r\n      warnOnSetStateDuringBuild: true,\r\n      debugMode: false\r\n    };\r\n\r\n    // Statistics\r\n    this.stats = {\r\n      statesCreated: 0,\r\n      statesDisposed: 0,\r\n      setStateCalls: 0,\r\n      batchedUpdates: 0\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Register a state with proper widget linking\r\n   * @param {State} state - State to register\r\n   * @param {StatefulElement} element - Owning element\r\n   */\r\n  register(state, element) {\r\n    if (!state || !element) {\r\n      throw new Error('State and element are required');\r\n    }\r\n\r\n    const stateId = this.generateStateId(state);\r\n\r\n    this.states.set(stateId, state);\r\n    this.stateElements.set(state, element);\r\n\r\n    // \u2705 CRITICAL: Ensure widget reference is set\r\n    // This should be done in state._mount() but we double-check here\r\n    if (!state._widget && element.widget) {\r\n      console.warn(\r\n        `[StateManager] State widget not set, setting from element. ` +\r\n        `This indicates _mount() was not called.`\r\n      );\r\n      state._widget = element.widget;\r\n    }\r\n\r\n    this.stats.statesCreated++;\r\n\r\n    if (this.config.debugMode) {\r\n      console.log(`[StateManager] Registered state ${stateId}`);\r\n      console.log(`  Widget type: ${state._widget?.constructor?.name}`);\r\n      console.log(`  Widget props:`, Object.keys(state._widget || {}));\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Unregister a state\r\n   * @param {State} state - State to unregister\r\n   */\r\n  unregister(state) {\r\n    if (!state) {\r\n      return;\r\n    }\r\n\r\n    const stateId = this.generateStateId(state);\r\n\r\n    // Dispose state\r\n    if (!state._disposeCalled) {\r\n      state._dispose();\r\n    }\r\n\r\n    // Clear references\r\n    this.states.delete(stateId);\r\n    this.stateElements.delete(state);\r\n\r\n    state._element = null;\r\n    state._widget = null;\r\n\r\n    this.stats.statesDisposed++;\r\n\r\n    if (this.config.debugMode) {\r\n      console.log(`[StateManager] Unregistered state ${stateId}`);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle setState call\r\n   * @param {State} state - State being updated\r\n   * @param {Function} updateFn - Update function\r\n   */\r\n  handleSetState(state, updateFn) {\r\n    if (!state || !state.mounted) {\r\n      return;\r\n    }\r\n\r\n    this.stats.setStateCalls++;\r\n\r\n    if (this.config.enableBatching) {\r\n      this.updateBatcher.queueUpdate(state._element, updateFn);\r\n    } else {\r\n      // Immediate update\r\n      updateFn();\r\n      state._element.markNeedsBuild();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Generate unique state ID\r\n   */\r\n  generateStateId(state) {\r\n    if (!state._stateId) {\r\n      state._stateId = `state_${++StateManager._stateIdCounter}`;\r\n    }\r\n    return state._stateId;\r\n  }\r\n\r\n  /**\r\n   * Get element for state\r\n   */\r\n  getElement(state) {\r\n    return this.stateElements.get(state);\r\n  }\r\n\r\n  /**\r\n   * Get statistics\r\n   */\r\n  getStats() {\r\n    return {\r\n      ...this.stats,\r\n      currentStates: this.states.size,\r\n      batcher: this.updateBatcher.getStats(),\r\n      tracker: this.stateTracker.getStats()\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Clear all states\r\n   */\r\n  clear() {\r\n    this.states.forEach(state => {\r\n      if (!state._disposeCalled) {\r\n        state._dispose();\r\n      }\r\n    });\r\n\r\n    this.states.clear();\r\n    this.updateBatcher.clear();\r\n    this.stateTracker.clear();\r\n  }\r\n\r\n  /**\r\n   * Dispose state manager\r\n   */\r\n  dispose() {\r\n    this.clear();\r\n  }\r\n}\r\n\r\nStateManager._stateIdCounter = 0;\r\n\r\n// ============================================================================\r\n// EXPORTS\r\n// ============================================================================\r\n\r\nexport {\r\n  State,\r\n  TypedState,\r\n  StateManager,\r\n  EnhancedBuildContext,\r\n};"],
-  "mappings": "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",
-  "names": ["UpdateBatcher", "StateTracker", "State", "context", "oldWidget", "updateFn", "error", "building", "element", "newWidget", "message", "TypedState", "expectedType", "widget", "EnhancedBuildContext", "runtime", "state", "Type", "current", "StateManager", "stateId"]
-}
diff --git a/packages/flutterjs_engine/src/runtime/dist/state_tracker.js b/packages/flutterjs_engine/src/runtime/dist/state_tracker.js
deleted file mode 100644
index 0c17053c..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/state_tracker.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class c{constructor(e={}){this.config={enableTracking:e.enableTracking!==!1,enableWeakRefs:e.enableWeakRefs!==!1,maxDependenciesPerProperty:e.maxDependenciesPerProperty||1e3,enableDebugLogging:e.enableDebugLogging||!1,warnOnThreshold:e.warnOnThreshold!==!1,dependencyThreshold:e.dependencyThreshold||500},this.dependencies=new Map,this.elementDependencies=new Map,this.weakElementRefs=new WeakMap,this.tracking=!1,this.currentElement=null,this.trackingStack=[],this.stats={dependenciesTracked:0,dependenciesCleared:0,rebuildsTriggered:0,selectiveRebuilds:0,fullRebuilds:0,trackingSessionsStarted:0,trackingSessionsEnded:0,peakDependencies:0},this.debugLog=[],this.maxDebugLogSize=1e3}startTracking(e){if(this.config.enableTracking){if(!e)throw new Error("Element is required for tracking");this.tracking&&this.currentElement&&this.trackingStack.push({element:this.currentElement,tracking:this.tracking}),this.tracking=!0,this.currentElement=e,this.stats.trackingSessionsStarted++,this.log(`Started tracking for element ${e.id}`)}}stopTracking(){if(this.config.enableTracking){if(this.currentElement&&this.log(`Stopped tracking for element ${this.currentElement.id}`),this.trackingStack.length>0){const e=this.trackingStack.pop();this.currentElement=e.element,this.tracking=e.tracking}else this.tracking=!1,this.currentElement=null;this.stats.trackingSessionsEnded++}}recordDependency(e,n){if(!this.config.enableTracking||!this.tracking||!this.currentElement)return;if(!e||!n){this.config.enableDebugLogging&&console.warn("[StateTracker] Invalid dependency recording attempt");return}const s=this.getStateId(e),t=`${s}.${n}`;this.dependencies.has(t)||this.dependencies.set(t,new Set);const i=this.dependencies.get(t);if(i.size>=this.config.maxDependenciesPerProperty){console.warn(`[StateTracker] Max dependencies reached for ${t} (${i.size}/${this.config.maxDependenciesPerProperty})`);return}i.add(this.currentElement);const r=this.currentElement.id;this.elementDependencies.has(r)||this.elementDependencies.set(r,new Set),this.elementDependencies.get(r).add(t),this.config.enableWeakRefs&&this.weakElementRefs.set(this.currentElement,{id:r,stateId:s,property:n,trackedAt:Date.now()}),this.stats.dependenciesTracked++;const d=this.getTotalDependencies();d>this.stats.peakDependencies&&(this.stats.peakDependencies=d),this.config.warnOnThreshold&&d>this.config.dependencyThreshold&&console.warn(`[StateTracker] Dependency count (${d}) exceeds threshold (${this.config.dependencyThreshold})`),this.log(`Recorded dependency: ${this.currentElement.id} \u2192 ${t}`)}getDependents(e,n){if(!e||!n)return new Set;const t=`${this.getStateId(e)}.${n}`,i=this.dependencies.get(t);if(!i)return new Set;const r=new Set;return i.forEach(d=>{d&&d.mounted&&r.add(d)}),r}getElementDependencies(e){return e?this.elementDependencies.get(e.id)||new Set:new Set}notifyPropertyChange(e,n){const s=this.getDependents(e,n);return s.size===0?0:(s.forEach(t=>{t.mounted&&!t.dirty&&(t.markNeedsBuild(),this.stats.selectiveRebuilds++)}),this.stats.rebuildsTriggered++,this.log(`Notified ${s.size} dependents of ${this.getStateId(e)}.${n} change`),s.size)}notifyMultipleChanges(e,n){if(!n||n.length===0)return 0;const s=new Set;return n.forEach(t=>{this.getDependents(e,t).forEach(r=>s.add(r))}),s.forEach(t=>{t.mounted&&!t.dirty&&(t.markNeedsBuild(),this.stats.selectiveRebuilds++)}),this.stats.rebuildsTriggered++,s.size}clearDependencies(e){if(!e)return;const n=e.id,s=this.elementDependencies.get(n);if(!s)return;let t=0;s.forEach(i=>{const r=this.dependencies.get(i);r&&r.has(e)&&(r.delete(e),t++,r.size===0&&this.dependencies.delete(i))}),this.elementDependencies.delete(n),this.weakElementRefs.delete(e),this.stats.dependenciesCleared+=t,this.log(`Cleared ${t} dependencies for element ${n}`)}clearPropertyDependencies(e,n){const t=`${this.getStateId(e)}.${n}`,i=this.dependencies.get(t);if(!i)return;const r=i.size;i.forEach(d=>{const a=this.elementDependencies.get(d.id);a&&a.delete(t)}),this.dependencies.delete(t),this.stats.dependenciesCleared+=r}clearStateDependencies(e){const n=this.getStateId(e),s=[];this.dependencies.forEach((t,i)=>{i.startsWith(`${n}.`)&&(s.push(i),t.forEach(r=>{const d=this.elementDependencies.get(r.id);d&&d.delete(i)}))}),s.forEach(t=>{this.dependencies.delete(t)}),this.log(`Cleared all dependencies for state ${n}`)}clear(){this.dependencies.clear(),this.elementDependencies.clear(),this.tracking=!1,this.currentElement=null,this.trackingStack=[],this.log("Cleared all dependencies")}getStateId(e){return e?(e._stateId||(e._stateId=`state_${++c._stateIdCounter}`),e._stateId):"unknown"}getTotalDependencies(){let e=0;return this.dependencies.forEach(n=>{e+=n.size}),e}getDependencyTree(){const e={};return this.dependencies.forEach((n,s)=>{e[s]=Array.from(n).map(t=>({id:t.id,type:t.constructor.name,mounted:t.mounted}))}),e}getElementDependencyMap(){const e={};return this.elementDependencies.forEach((n,s)=>{e[s]=Array.from(n)}),e}isTracking(){return this.tracking&&this.currentElement!==null}getCurrentElement(){return this.currentElement}getStats(){return{...this.stats,totalDependencies:this.getTotalDependencies(),uniqueDependencyKeys:this.dependencies.size,trackedElements:this.elementDependencies.size,isTracking:this.tracking,trackingStackDepth:this.trackingStack.length}}getDetailedReport(){return{stats:this.getStats(),dependencyTree:this.getDependencyTree(),elementDependencies:this.getElementDependencyMap(),config:this.config,timestamp:Date.now()}}resetStats(){this.stats={dependenciesTracked:0,dependenciesCleared:0,rebuildsTriggered:0,selectiveRebuilds:0,fullRebuilds:0,trackingSessionsStarted:0,trackingSessionsEnded:0,peakDependencies:0}}setTrackingEnabled(e){this.config.enableTracking=e,e||this.stopTracking()}log(e){if(!this.config.enableDebugLogging)return;const n={timestamp:Date.now(),message:e};this.debugLog.push(n),this.debugLog.length>this.maxDebugLogSize&&this.debugLog.shift(),console.log(`[StateTracker] ${e}`)}getDebugLog(){return[...this.debugLog]}clearDebugLog(){this.debugLog=[]}}c._stateIdCounter=0;export{c as StateTracker};
-//# sourceMappingURL=state_tracker.js.map
diff --git a/packages/flutterjs_engine/src/runtime/dist/state_tracker.js.map b/packages/flutterjs_engine/src/runtime/dist/state_tracker.js.map
deleted file mode 100644
index 3ab2514a..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/state_tracker.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/state_tracker.js"],
-  "sourcesContent": ["/**\r\n * FlutterJS State Tracker\r\n * \r\n * Tracks dependencies between state properties and UI elements.\r\n * Enables fine-grained reactivity by only rebuilding elements\r\n * that depend on changed state properties.\r\n * \r\n * Key Features:\r\n * - Track which elements depend on which state properties\r\n * - Automatic dependency recording during build\r\n * - Selective rebuilds (only affected elements)\r\n * - Memory-efficient weak references\r\n * - Performance monitoring\r\n * \r\n * Usage:\r\n * 1. Start tracking before build\r\n * 2. Record dependencies during property access\r\n * 3. Stop tracking after build\r\n * 4. Rebuild only dependents when property changes\r\n */\r\n\r\n/**\r\n * StateTracker Class\r\n * \r\n * Manages dependency relationships between state and elements\r\n */\r\nclass StateTracker {\r\n  constructor(config = {}) {\r\n    // Configuration\r\n    this.config = {\r\n      enableTracking: config.enableTracking !== false,\r\n      enableWeakRefs: config.enableWeakRefs !== false,\r\n      maxDependenciesPerProperty: config.maxDependenciesPerProperty || 1000,\r\n      enableDebugLogging: config.enableDebugLogging || false,\r\n      warnOnThreshold: config.warnOnThreshold !== false,\r\n      dependencyThreshold: config.dependencyThreshold || 500\r\n    };\r\n    \r\n    // Core tracking\r\n    this.dependencies = new Map();          // \"stateId.property\" \u2192 Set<element>\r\n    this.elementDependencies = new Map();   // elementId \u2192 Set<\"stateId.property\">\r\n    \r\n    // Weak references for automatic cleanup\r\n    this.weakElementRefs = new WeakMap();   // element \u2192 metadata\r\n    \r\n    // Current tracking state\r\n    this.tracking = false;\r\n    this.currentElement = null;\r\n    this.trackingStack = [];                // Support nested tracking\r\n    \r\n    // Performance tracking\r\n    this.stats = {\r\n      dependenciesTracked: 0,\r\n      dependenciesCleared: 0,\r\n      rebuildsTriggered: 0,\r\n      selectiveRebuilds: 0,\r\n      fullRebuilds: 0,\r\n      trackingSessionsStarted: 0,\r\n      trackingSessionsEnded: 0,\r\n      peakDependencies: 0\r\n    };\r\n    \r\n    // Debug tracking\r\n    this.debugLog = [];\r\n    this.maxDebugLogSize = 1000;\r\n  }\r\n  \r\n  /**\r\n   * Start tracking dependencies for build\r\n   * @param {Element} element - Element being built\r\n   */\r\n  startTracking(element) {\r\n    if (!this.config.enableTracking) {\r\n      return;\r\n    }\r\n    \r\n    if (!element) {\r\n      throw new Error('Element is required for tracking');\r\n    }\r\n    \r\n    // Support nested tracking (push to stack)\r\n    if (this.tracking && this.currentElement) {\r\n      this.trackingStack.push({\r\n        element: this.currentElement,\r\n        tracking: this.tracking\r\n      });\r\n    }\r\n    \r\n    this.tracking = true;\r\n    this.currentElement = element;\r\n    \r\n    this.stats.trackingSessionsStarted++;\r\n    \r\n    this.log(`Started tracking for element ${element.id}`);\r\n  }\r\n  \r\n  /**\r\n   * Stop tracking dependencies\r\n   */\r\n  stopTracking() {\r\n    if (!this.config.enableTracking) {\r\n      return;\r\n    }\r\n    \r\n    if (this.currentElement) {\r\n      this.log(`Stopped tracking for element ${this.currentElement.id}`);\r\n    }\r\n    \r\n    // Restore previous tracking state from stack\r\n    if (this.trackingStack.length > 0) {\r\n      const previous = this.trackingStack.pop();\r\n      this.currentElement = previous.element;\r\n      this.tracking = previous.tracking;\r\n    } else {\r\n      this.tracking = false;\r\n      this.currentElement = null;\r\n    }\r\n    \r\n    this.stats.trackingSessionsEnded++;\r\n  }\r\n  \r\n  /**\r\n   * Record dependency: element depends on state property\r\n   * @param {State} state - State object\r\n   * @param {string} property - Property name\r\n   */\r\n  recordDependency(state, property) {\r\n    if (!this.config.enableTracking || !this.tracking || !this.currentElement) {\r\n      return;\r\n    }\r\n    \r\n    if (!state || !property) {\r\n      if (this.config.enableDebugLogging) {\r\n        console.warn('[StateTracker] Invalid dependency recording attempt');\r\n      }\r\n      return;\r\n    }\r\n    \r\n    // Generate dependency key\r\n    const stateId = this.getStateId(state);\r\n    const dependencyKey = `${stateId}.${property}`;\r\n    \r\n    // Add to main dependencies map\r\n    if (!this.dependencies.has(dependencyKey)) {\r\n      this.dependencies.set(dependencyKey, new Set());\r\n    }\r\n    \r\n    const dependents = this.dependencies.get(dependencyKey);\r\n    \r\n    // Check threshold\r\n    if (dependents.size >= this.config.maxDependenciesPerProperty) {\r\n      console.warn(\r\n        `[StateTracker] Max dependencies reached for ${dependencyKey} ` +\r\n        `(${dependents.size}/${this.config.maxDependenciesPerProperty})`\r\n      );\r\n      return;\r\n    }\r\n    \r\n    dependents.add(this.currentElement);\r\n    \r\n    // Track reverse dependency (element \u2192 dependencies)\r\n    const elementId = this.currentElement.id;\r\n    if (!this.elementDependencies.has(elementId)) {\r\n      this.elementDependencies.set(elementId, new Set());\r\n    }\r\n    this.elementDependencies.get(elementId).add(dependencyKey);\r\n    \r\n    // Store weak reference for cleanup\r\n    if (this.config.enableWeakRefs) {\r\n      this.weakElementRefs.set(this.currentElement, {\r\n        id: elementId,\r\n        stateId: stateId,\r\n        property: property,\r\n        trackedAt: Date.now()\r\n      });\r\n    }\r\n    \r\n    this.stats.dependenciesTracked++;\r\n    \r\n    // Track peak\r\n    const totalDeps = this.getTotalDependencies();\r\n    if (totalDeps > this.stats.peakDependencies) {\r\n      this.stats.peakDependencies = totalDeps;\r\n    }\r\n    \r\n    // Warn on threshold\r\n    if (this.config.warnOnThreshold && \r\n        totalDeps > this.config.dependencyThreshold) {\r\n      console.warn(\r\n        `[StateTracker] Dependency count (${totalDeps}) exceeds threshold ` +\r\n        `(${this.config.dependencyThreshold})`\r\n      );\r\n    }\r\n    \r\n    this.log(\r\n      `Recorded dependency: ${this.currentElement.id} \u2192 ${dependencyKey}`\r\n    );\r\n  }\r\n  \r\n  /**\r\n   * Get elements that depend on state property\r\n   * @param {State} state - State object\r\n   * @param {string} property - Property name\r\n   * @returns {Set<Element>}\r\n   */\r\n  getDependents(state, property) {\r\n    if (!state || !property) {\r\n      return new Set();\r\n    }\r\n    \r\n    const stateId = this.getStateId(state);\r\n    const dependencyKey = `${stateId}.${property}`;\r\n    \r\n    const dependents = this.dependencies.get(dependencyKey);\r\n    \r\n    if (!dependents) {\r\n      return new Set();\r\n    }\r\n    \r\n    // Filter out unmounted elements\r\n    const validDependents = new Set();\r\n    \r\n    dependents.forEach(element => {\r\n      if (element && element.mounted) {\r\n        validDependents.add(element);\r\n      }\r\n    });\r\n    \r\n    return validDependents;\r\n  }\r\n  \r\n  /**\r\n   * Get all dependencies for an element\r\n   * @param {Element} element - Element\r\n   * @returns {Set<string>} Set of dependency keys\r\n   */\r\n  getElementDependencies(element) {\r\n    if (!element) {\r\n      return new Set();\r\n    }\r\n    \r\n    return this.elementDependencies.get(element.id) || new Set();\r\n  }\r\n  \r\n  /**\r\n   * Notify dependents of property change\r\n   * @param {State} state - State object\r\n   * @param {string} property - Property name\r\n   * @returns {number} Number of elements rebuilt\r\n   */\r\n  notifyPropertyChange(state, property) {\r\n    const dependents = this.getDependents(state, property);\r\n    \r\n    if (dependents.size === 0) {\r\n      return 0;\r\n    }\r\n    \r\n    dependents.forEach(element => {\r\n      if (element.mounted && !element.dirty) {\r\n        element.markNeedsBuild();\r\n        this.stats.selectiveRebuilds++;\r\n      }\r\n    });\r\n    \r\n    this.stats.rebuildsTriggered++;\r\n    \r\n    this.log(\r\n      `Notified ${dependents.size} dependents of ${this.getStateId(state)}.${property} change`\r\n    );\r\n    \r\n    return dependents.size;\r\n  }\r\n  \r\n  /**\r\n   * Notify dependents of multiple property changes\r\n   * @param {State} state - State object\r\n   * @param {Array<string>} properties - Property names\r\n   * @returns {number} Number of unique elements rebuilt\r\n   */\r\n  notifyMultipleChanges(state, properties) {\r\n    if (!properties || properties.length === 0) {\r\n      return 0;\r\n    }\r\n    \r\n    const allDependents = new Set();\r\n    \r\n    properties.forEach(property => {\r\n      const dependents = this.getDependents(state, property);\r\n      dependents.forEach(el => allDependents.add(el));\r\n    });\r\n    \r\n    allDependents.forEach(element => {\r\n      if (element.mounted && !element.dirty) {\r\n        element.markNeedsBuild();\r\n        this.stats.selectiveRebuilds++;\r\n      }\r\n    });\r\n    \r\n    this.stats.rebuildsTriggered++;\r\n    \r\n    return allDependents.size;\r\n  }\r\n  \r\n  /**\r\n   * Clear dependencies for element\r\n   * @param {Element} element - Element to clear\r\n   */\r\n  clearDependencies(element) {\r\n    if (!element) {\r\n      return;\r\n    }\r\n    \r\n    const elementId = element.id;\r\n    \r\n    // Get all dependencies for this element\r\n    const elementDeps = this.elementDependencies.get(elementId);\r\n    \r\n    if (!elementDeps) {\r\n      return;\r\n    }\r\n    \r\n    let clearedCount = 0;\r\n    \r\n    // Remove element from each dependency set\r\n    elementDeps.forEach(dependencyKey => {\r\n      const dependents = this.dependencies.get(dependencyKey);\r\n      \r\n      if (dependents && dependents.has(element)) {\r\n        dependents.delete(element);\r\n        clearedCount++;\r\n        \r\n        // Remove empty dependency sets\r\n        if (dependents.size === 0) {\r\n          this.dependencies.delete(dependencyKey);\r\n        }\r\n      }\r\n    });\r\n    \r\n    // Remove element's dependency tracking\r\n    this.elementDependencies.delete(elementId);\r\n    \r\n    // Remove weak reference\r\n    this.weakElementRefs.delete(element);\r\n    \r\n    this.stats.dependenciesCleared += clearedCount;\r\n    \r\n    this.log(`Cleared ${clearedCount} dependencies for element ${elementId}`);\r\n  }\r\n  \r\n  /**\r\n   * Clear dependencies for a specific state property\r\n   * @param {State} state - State object\r\n   * @param {string} property - Property name\r\n   */\r\n  clearPropertyDependencies(state, property) {\r\n    const stateId = this.getStateId(state);\r\n    const dependencyKey = `${stateId}.${property}`;\r\n    \r\n    const dependents = this.dependencies.get(dependencyKey);\r\n    \r\n    if (!dependents) {\r\n      return;\r\n    }\r\n    \r\n    const count = dependents.size;\r\n    \r\n    // Remove from element dependencies\r\n    dependents.forEach(element => {\r\n      const elementDeps = this.elementDependencies.get(element.id);\r\n      if (elementDeps) {\r\n        elementDeps.delete(dependencyKey);\r\n      }\r\n    });\r\n    \r\n    // Remove dependency\r\n    this.dependencies.delete(dependencyKey);\r\n    \r\n    this.stats.dependenciesCleared += count;\r\n  }\r\n  \r\n  /**\r\n   * Clear all dependencies for a state\r\n   * @param {State} state - State object\r\n   */\r\n  clearStateDependencies(state) {\r\n    const stateId = this.getStateId(state);\r\n    \r\n    // Find all dependencies for this state\r\n    const keysToDelete = [];\r\n    \r\n    this.dependencies.forEach((dependents, key) => {\r\n      if (key.startsWith(`${stateId}.`)) {\r\n        keysToDelete.push(key);\r\n        \r\n        // Remove from element dependencies\r\n        dependents.forEach(element => {\r\n          const elementDeps = this.elementDependencies.get(element.id);\r\n          if (elementDeps) {\r\n            elementDeps.delete(key);\r\n          }\r\n        });\r\n      }\r\n    });\r\n    \r\n    keysToDelete.forEach(key => {\r\n      this.dependencies.delete(key);\r\n    });\r\n    \r\n    this.log(`Cleared all dependencies for state ${stateId}`);\r\n  }\r\n  \r\n  /**\r\n   * Clear all dependencies\r\n   */\r\n  clear() {\r\n    this.dependencies.clear();\r\n    this.elementDependencies.clear();\r\n    this.tracking = false;\r\n    this.currentElement = null;\r\n    this.trackingStack = [];\r\n    \r\n    this.log('Cleared all dependencies');\r\n  }\r\n  \r\n  /**\r\n   * Get state ID\r\n   * @param {State} state - State object\r\n   * @returns {string}\r\n   */\r\n  getStateId(state) {\r\n    if (!state) {\r\n      return 'unknown';\r\n    }\r\n    \r\n    // Use existing ID or generate one\r\n    if (!state._stateId) {\r\n      state._stateId = `state_${++StateTracker._stateIdCounter}`;\r\n    }\r\n    \r\n    return state._stateId;\r\n  }\r\n  \r\n  /**\r\n   * Get total number of dependencies\r\n   * @returns {number}\r\n   */\r\n  getTotalDependencies() {\r\n    let total = 0;\r\n    this.dependencies.forEach(dependents => {\r\n      total += dependents.size;\r\n    });\r\n    return total;\r\n  }\r\n  \r\n  /**\r\n   * Get dependency tree for debugging\r\n   * @returns {Object}\r\n   */\r\n  getDependencyTree() {\r\n    const tree = {};\r\n    \r\n    this.dependencies.forEach((dependents, key) => {\r\n      tree[key] = Array.from(dependents).map(el => ({\r\n        id: el.id,\r\n        type: el.constructor.name,\r\n        mounted: el.mounted\r\n      }));\r\n    });\r\n    \r\n    return tree;\r\n  }\r\n  \r\n  /**\r\n   * Get element dependency map\r\n   * @returns {Object}\r\n   */\r\n  getElementDependencyMap() {\r\n    const map = {};\r\n    \r\n    this.elementDependencies.forEach((deps, elementId) => {\r\n      map[elementId] = Array.from(deps);\r\n    });\r\n    \r\n    return map;\r\n  }\r\n  \r\n  /**\r\n   * Check if tracking is active\r\n   * @returns {boolean}\r\n   */\r\n  isTracking() {\r\n    return this.tracking && this.currentElement !== null;\r\n  }\r\n  \r\n  /**\r\n   * Get current tracking element\r\n   * @returns {Element|null}\r\n   */\r\n  getCurrentElement() {\r\n    return this.currentElement;\r\n  }\r\n  \r\n  /**\r\n   * Get statistics\r\n   * @returns {Object}\r\n   */\r\n  getStats() {\r\n    return {\r\n      ...this.stats,\r\n      totalDependencies: this.getTotalDependencies(),\r\n      uniqueDependencyKeys: this.dependencies.size,\r\n      trackedElements: this.elementDependencies.size,\r\n      isTracking: this.tracking,\r\n      trackingStackDepth: this.trackingStack.length\r\n    };\r\n  }\r\n  \r\n  /**\r\n   * Get detailed report\r\n   * @returns {Object}\r\n   */\r\n  getDetailedReport() {\r\n    return {\r\n      stats: this.getStats(),\r\n      dependencyTree: this.getDependencyTree(),\r\n      elementDependencies: this.getElementDependencyMap(),\r\n      config: this.config,\r\n      timestamp: Date.now()\r\n    };\r\n  }\r\n  \r\n  /**\r\n   * Reset statistics\r\n   */\r\n  resetStats() {\r\n    this.stats = {\r\n      dependenciesTracked: 0,\r\n      dependenciesCleared: 0,\r\n      rebuildsTriggered: 0,\r\n      selectiveRebuilds: 0,\r\n      fullRebuilds: 0,\r\n      trackingSessionsStarted: 0,\r\n      trackingSessionsEnded: 0,\r\n      peakDependencies: 0\r\n    };\r\n  }\r\n  \r\n  /**\r\n   * Enable/disable tracking\r\n   * @param {boolean} enabled - Enable tracking\r\n   */\r\n  setTrackingEnabled(enabled) {\r\n    this.config.enableTracking = enabled;\r\n    \r\n    if (!enabled) {\r\n      this.stopTracking();\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Log debug message\r\n   * @param {string} message - Message to log\r\n   */\r\n  log(message) {\r\n    if (!this.config.enableDebugLogging) {\r\n      return;\r\n    }\r\n    \r\n    const logEntry = {\r\n      timestamp: Date.now(),\r\n      message: message\r\n    };\r\n    \r\n    this.debugLog.push(logEntry);\r\n    \r\n    // Keep log size manageable\r\n    if (this.debugLog.length > this.maxDebugLogSize) {\r\n      this.debugLog.shift();\r\n    }\r\n    \r\n    console.log(`[StateTracker] ${message}`);\r\n  }\r\n  \r\n  /**\r\n   * Get debug log\r\n   * @returns {Array}\r\n   */\r\n  getDebugLog() {\r\n    return [...this.debugLog];\r\n  }\r\n  \r\n  /**\r\n   * Clear debug log\r\n   */\r\n  clearDebugLog() {\r\n    this.debugLog = [];\r\n  }\r\n}\r\n\r\n// Static counter for state IDs\r\nStateTracker._stateIdCounter = 0;\r\n\r\n\r\nexport {StateTracker};"],
-  "mappings": "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",
-  "names": ["StateTracker", "config", "element", "previous", "state", "property", "stateId", "dependencyKey", "dependents", "elementId", "totalDeps", "validDependents", "properties", "allDependents", "el", "elementDeps", "clearedCount", "count", "keysToDelete", "key", "total", "tree", "map", "deps", "enabled", "message", "logEntry"]
-}
diff --git a/packages/flutterjs_engine/src/runtime/dist/update_batcher.js b/packages/flutterjs_engine/src/runtime/dist/update_batcher.js
deleted file mode 100644
index 09466599..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/update_batcher.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class o{constructor(t){if(!t)throw new Error("Runtime instance is required for UpdateBatcher");this.runtime=t,this.pendingUpdates=new Map,this.updateScheduled=!1,this.config={enableBatching:!0,flushOnMicrotask:!0,maxBatchSize:100,debugMode:!1},this.stats={totalBatches:0,totalUpdates:0,updatesInLastBatch:0,averageUpdatesPerBatch:0,batchesSinceStart:0,largestBatchSize:0,flushScheduledCount:0},this.lastFlushTime=0,this.lastFlushDuration=0}queueUpdate(t,e){if(!t)throw new Error("Element is required for queueUpdate");if(typeof e!="function")throw new Error("Update function must be a function");if(!this.config.enableBatching){try{e.call(t.state)}catch(i){console.error("[UpdateBatcher] Immediate update failed:",i)}t.markNeedsBuild();return}this.pendingUpdates.has(t)||this.pendingUpdates.set(t,[]);const s=this.pendingUpdates.get(t);s.length>=this.config.maxBatchSize&&this.config.debugMode&&console.warn(`[UpdateBatcher] Max batch size (${this.config.maxBatchSize}) reached for element ${t.id}`),s.push(e),this.updateScheduled||this.scheduleFlush(),this.config.debugMode&&console.log(`[UpdateBatcher] Queued update for ${t.id} (${s.length} pending)`)}scheduleFlush(){this.updateScheduled||(this.updateScheduled=!0,this.stats.flushScheduledCount++,Promise.resolve().then(()=>{this.flush()}),this.config.debugMode&&console.log("[UpdateBatcher] Flush scheduled"))}flush(){if(!this.updateScheduled)return;this.updateScheduled=!1;const t=performance.now();try{const e=Array.from(this.pendingUpdates.entries());if(e.length===0){this.config.debugMode&&console.log("[UpdateBatcher] Flush called but no pending updates");return}let s=0;for(const[a,d]of e){if(!a.mounted){this.config.debugMode&&console.warn(`[UpdateBatcher] Skipping unmounted element ${a.id}`),this.pendingUpdates.delete(a);continue}if(!a.state){this.config.debugMode&&console.warn(`[UpdateBatcher] Skipping element without state: ${a.id}`),this.pendingUpdates.delete(a);continue}for(const h of d)try{h.call(a.state),s++}catch(n){console.error(`[UpdateBatcher] Update function failed for ${a.id}:`,n)}a.dirty||a.markNeedsBuild()}this.pendingUpdates.clear(),this.recordFlush(s,e.length);const i=performance.now()-t;this.lastFlushDuration=i,this.lastFlushTime=Date.now(),this.config.debugMode&&console.log(`[UpdateBatcher] Flushed ${s} updates (${e.length} elements) in ${i.toFixed(2)}ms`),i>16.67&&console.warn(`[UpdateBatcher] Slow flush: ${i.toFixed(2)}ms (${s} updates, ${e.length} elements)`)}catch(e){console.error("[UpdateBatcher] Flush failed:",e)}}recordFlush(t,e){this.stats.totalBatches++,this.stats.batchesSinceStart++,this.stats.totalUpdates+=t,this.stats.updatesInLastBatch=t,t>this.stats.largestBatchSize&&(this.stats.largestBatchSize=t),this.stats.totalBatches>0&&(this.stats.averageUpdatesPerBatch=this.stats.totalUpdates/this.stats.totalBatches)}clear(t){if(t)this.pendingUpdates.delete(t),this.config.debugMode&&console.log(`[UpdateBatcher] Cleared updates for ${t.id}`);else{const e=this.pendingUpdates.size;this.pendingUpdates.clear(),this.config.debugMode&&console.log(`[UpdateBatcher] Cleared all pending updates (${e})`)}}getPendingCount(t){if(t){const s=this.pendingUpdates.get(t);return s?s.length:0}let e=0;return this.pendingUpdates.forEach(s=>{e+=s.length}),e}isScheduled(){return this.updateScheduled}getBatchedElements(){return Array.from(this.pendingUpdates.keys())}forceFlush(){this.config.debugMode&&console.log("[UpdateBatcher] Force flush triggered"),this.flush()}setBatchingEnabled(t){this.config.enableBatching=t,!t&&this.updateScheduled&&this.forceFlush()}setDebugMode(t){this.config.debugMode=t}getStats(){return{...this.stats,pendingElements:this.pendingUpdates.size,totalPendingUpdates:this.getPendingCount(),updateScheduled:this.updateScheduled,lastFlushTime:this.lastFlushTime,lastFlushDuration:this.lastFlushDuration}}getDetailedReport(){const e=this.getBatchedElements().map(s=>({id:s.id,type:s.constructor.name,pendingUpdates:this.getPendingCount(s),mounted:s.mounted,depth:s.depth}));return{stats:this.getStats(),batchedElements:e,config:this.config,timestamp:Date.now()}}resetStats(){this.stats={totalBatches:0,totalUpdates:0,updatesInLastBatch:0,averageUpdatesPerBatch:0,batchesSinceStart:0,largestBatchSize:0,flushScheduledCount:0}}dispose(){this.updateScheduled&&this.forceFlush(),this.clear(),this.runtime=null,this.config.debugMode&&console.log("[UpdateBatcher] Disposed")}}export{o as UpdateBatcher};
-//# sourceMappingURL=update_batcher.js.map
diff --git a/packages/flutterjs_engine/src/runtime/dist/update_batcher.js.map b/packages/flutterjs_engine/src/runtime/dist/update_batcher.js.map
deleted file mode 100644
index f8798e7c..00000000
--- a/packages/flutterjs_engine/src/runtime/dist/update_batcher.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/update_batcher.js"],
-  "sourcesContent": ["/**\r\n * FlutterJS Update Batcher\r\n * \r\n * Batches multiple setState calls into single update cycle.\r\n * Improves performance by:\r\n * - Preventing redundant rebuilds\r\n * - Batching DOM updates\r\n * - Reducing layout thrashing\r\n * \r\n * Strategy:\r\n * 1. Collect setState calls into queue\r\n * 2. Flush on microtask (Promise.resolve)\r\n * 3. Apply all updates to state\r\n * 4. Trigger single rebuild per element\r\n * 5. Merge all patches before DOM update\r\n */\r\n\r\nclass UpdateBatcher {\r\n  constructor(runtime) {\r\n    if (!runtime) {\r\n      throw new Error('Runtime instance is required for UpdateBatcher');\r\n    }\r\n    \r\n    this.runtime = runtime;\r\n    \r\n    // Pending updates queue\r\n    this.pendingUpdates = new Map();    // element \u2192 updateFn[]\r\n    this.updateScheduled = false;       // Is flush scheduled?\r\n    \r\n    // Configuration\r\n    this.config = {\r\n      enableBatching: true,\r\n      flushOnMicrotask: true,\r\n      maxBatchSize: 100,\r\n      debugMode: false\r\n    };\r\n    \r\n    // Statistics\r\n    this.stats = {\r\n      totalBatches: 0,\r\n      totalUpdates: 0,\r\n      updatesInLastBatch: 0,\r\n      averageUpdatesPerBatch: 0,\r\n      batchesSinceStart: 0,\r\n      largestBatchSize: 0,\r\n      flushScheduledCount: 0\r\n    };\r\n    \r\n    // Timing\r\n    this.lastFlushTime = 0;\r\n    this.lastFlushDuration = 0;\r\n  }\r\n  \r\n  /**\r\n   * Queue a state update\r\n   * @param {Element} element - Element being updated\r\n   * @param {Function} updateFn - State update function\r\n   * @throws {Error} If element or updateFn invalid\r\n   */\r\n  queueUpdate(element, updateFn) {\r\n    // Validation\r\n    if (!element) {\r\n      throw new Error('Element is required for queueUpdate');\r\n    }\r\n    \r\n    if (typeof updateFn !== 'function') {\r\n      throw new Error('Update function must be a function');\r\n    }\r\n    \r\n    // Check if batching disabled\r\n    if (!this.config.enableBatching) {\r\n      // Execute immediately\r\n      try {\r\n        updateFn.call(element.state);\r\n      } catch (error) {\r\n        console.error('[UpdateBatcher] Immediate update failed:', error);\r\n      }\r\n      element.markNeedsBuild();\r\n      return;\r\n    }\r\n    \r\n    // Initialize update list for element if needed\r\n    if (!this.pendingUpdates.has(element)) {\r\n      this.pendingUpdates.set(element, []);\r\n    }\r\n    \r\n    const updates = this.pendingUpdates.get(element);\r\n    \r\n    // Check batch size limit\r\n    if (updates.length >= this.config.maxBatchSize) {\r\n      if (this.config.debugMode) {\r\n        console.warn(\r\n          `[UpdateBatcher] Max batch size (${this.config.maxBatchSize}) ` +\r\n          `reached for element ${element.id}`\r\n        );\r\n      }\r\n    }\r\n    \r\n    // Add update to queue\r\n    updates.push(updateFn);\r\n    \r\n    // Schedule flush if not already scheduled\r\n    if (!this.updateScheduled) {\r\n      this.scheduleFlush();\r\n    }\r\n    \r\n    if (this.config.debugMode) {\r\n      console.log(\r\n        `[UpdateBatcher] Queued update for ${element.id} ` +\r\n        `(${updates.length} pending)`\r\n      );\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Schedule flush on next microtask\r\n   * Uses Promise for fast microtask execution\r\n   */\r\n  scheduleFlush() {\r\n    if (this.updateScheduled) {\r\n      return;\r\n    }\r\n    \r\n    this.updateScheduled = true;\r\n    this.stats.flushScheduledCount++;\r\n    \r\n    // Use microtask queue (faster than requestAnimationFrame)\r\n    Promise.resolve().then(() => {\r\n      this.flush();\r\n    });\r\n    \r\n    if (this.config.debugMode) {\r\n      console.log('[UpdateBatcher] Flush scheduled');\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Flush all pending updates\r\n   * Process all queued setState calls\r\n   */\r\n  flush() {\r\n    if (!this.updateScheduled) {\r\n      return; // Already flushed\r\n    }\r\n    \r\n    this.updateScheduled = false;\r\n    \r\n    const startTime = performance.now();\r\n    \r\n    try {\r\n      // Get all pending updates\r\n      const entries = Array.from(this.pendingUpdates.entries());\r\n      \r\n      if (entries.length === 0) {\r\n        if (this.config.debugMode) {\r\n          console.log('[UpdateBatcher] Flush called but no pending updates');\r\n        }\r\n        return;\r\n      }\r\n      \r\n      let totalUpdates = 0;\r\n      \r\n      // Process each element's updates\r\n      for (const [element, updateFns] of entries) {\r\n        // Skip unmounted elements\r\n        if (!element.mounted) {\r\n          if (this.config.debugMode) {\r\n            console.warn(\r\n              `[UpdateBatcher] Skipping unmounted element ${element.id}`\r\n            );\r\n          }\r\n          this.pendingUpdates.delete(element);\r\n          continue;\r\n        }\r\n        \r\n        // Skip elements without state\r\n        if (!element.state) {\r\n          if (this.config.debugMode) {\r\n            console.warn(\r\n              `[UpdateBatcher] Skipping element without state: ${element.id}`\r\n            );\r\n          }\r\n          this.pendingUpdates.delete(element);\r\n          continue;\r\n        }\r\n        \r\n        // Apply all updates to state\r\n        for (const updateFn of updateFns) {\r\n          try {\r\n            updateFn.call(element.state);\r\n            totalUpdates++;\r\n          } catch (error) {\r\n            console.error(\r\n              `[UpdateBatcher] Update function failed for ${element.id}:`,\r\n              error\r\n            );\r\n            // Continue with next update\r\n          }\r\n        }\r\n        \r\n        // Mark element for rebuild (only once per element)\r\n        if (!element.dirty) {\r\n          element.markNeedsBuild();\r\n        }\r\n      }\r\n      \r\n      // Clear pending updates\r\n      this.pendingUpdates.clear();\r\n      \r\n      // Update statistics\r\n      this.recordFlush(totalUpdates, entries.length);\r\n      \r\n      const flushDuration = performance.now() - startTime;\r\n      this.lastFlushDuration = flushDuration;\r\n      this.lastFlushTime = Date.now();\r\n      \r\n      if (this.config.debugMode) {\r\n        console.log(\r\n          `[UpdateBatcher] Flushed ${totalUpdates} updates ` +\r\n          `(${entries.length} elements) in ${flushDuration.toFixed(2)}ms`\r\n        );\r\n      }\r\n      \r\n      // Warn if flush took too long\r\n      if (flushDuration > 16.67) { // 60 FPS target\r\n        console.warn(\r\n          `[UpdateBatcher] Slow flush: ${flushDuration.toFixed(2)}ms ` +\r\n          `(${totalUpdates} updates, ${entries.length} elements)`\r\n        );\r\n      }\r\n    } catch (error) {\r\n      console.error('[UpdateBatcher] Flush failed:', error);\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Record flush statistics\r\n   * @param {number} updateCount - Number of updates applied\r\n   * @param {number} elementCount - Number of elements updated\r\n   */\r\n  recordFlush(updateCount, elementCount) {\r\n    this.stats.totalBatches++;\r\n    this.stats.batchesSinceStart++;\r\n    this.stats.totalUpdates += updateCount;\r\n    this.stats.updatesInLastBatch = updateCount;\r\n    \r\n    if (updateCount > this.stats.largestBatchSize) {\r\n      this.stats.largestBatchSize = updateCount;\r\n    }\r\n    \r\n    // Calculate average\r\n    if (this.stats.totalBatches > 0) {\r\n      this.stats.averageUpdatesPerBatch =\r\n        this.stats.totalUpdates / this.stats.totalBatches;\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Clear pending updates for specific element\r\n   * @param {Element} element - Element to clear (optional)\r\n   */\r\n  clear(element) {\r\n    if (element) {\r\n      // Clear specific element\r\n      this.pendingUpdates.delete(element);\r\n      \r\n      if (this.config.debugMode) {\r\n        console.log(`[UpdateBatcher] Cleared updates for ${element.id}`);\r\n      }\r\n    } else {\r\n      // Clear all\r\n      const count = this.pendingUpdates.size;\r\n      this.pendingUpdates.clear();\r\n      \r\n      if (this.config.debugMode) {\r\n        console.log(`[UpdateBatcher] Cleared all pending updates (${count})`);\r\n      }\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Get pending update count\r\n   * @param {Element} element - Optional, get count for specific element\r\n   * @returns {number}\r\n   */\r\n  getPendingCount(element) {\r\n    if (element) {\r\n      const updates = this.pendingUpdates.get(element);\r\n      return updates ? updates.length : 0;\r\n    }\r\n    \r\n    let total = 0;\r\n    this.pendingUpdates.forEach(updates => {\r\n      total += updates.length;\r\n    });\r\n    return total;\r\n  }\r\n  \r\n  /**\r\n   * Check if update scheduled\r\n   * @returns {boolean}\r\n   */\r\n  isScheduled() {\r\n    return this.updateScheduled;\r\n  }\r\n  \r\n  /**\r\n   * Get batched elements\r\n   * @returns {Element[]}\r\n   */\r\n  getBatchedElements() {\r\n    return Array.from(this.pendingUpdates.keys());\r\n  }\r\n  \r\n  /**\r\n   * Force immediate flush\r\n   * Used for testing or critical updates\r\n   */\r\n  forceFlush() {\r\n    if (this.config.debugMode) {\r\n      console.log('[UpdateBatcher] Force flush triggered');\r\n    }\r\n    \r\n    this.flush();\r\n  }\r\n  \r\n  /**\r\n   * Enable/disable batching\r\n   * @param {boolean} enabled\r\n   */\r\n  setBatchingEnabled(enabled) {\r\n    this.config.enableBatching = enabled;\r\n    \r\n    if (!enabled && this.updateScheduled) {\r\n      // Flush immediately if batching disabled\r\n      this.forceFlush();\r\n    }\r\n  }\r\n  \r\n  /**\r\n   * Set debug mode\r\n   * @param {boolean} enabled\r\n   */\r\n  setDebugMode(enabled) {\r\n    this.config.debugMode = enabled;\r\n  }\r\n  \r\n  /**\r\n   * Get statistics\r\n   * @returns {Object}\r\n   */\r\n  getStats() {\r\n    return {\r\n      ...this.stats,\r\n      pendingElements: this.pendingUpdates.size,\r\n      totalPendingUpdates: this.getPendingCount(),\r\n      updateScheduled: this.updateScheduled,\r\n      lastFlushTime: this.lastFlushTime,\r\n      lastFlushDuration: this.lastFlushDuration\r\n    };\r\n  }\r\n  \r\n  /**\r\n   * Get detailed report\r\n   * @returns {Object}\r\n   */\r\n  getDetailedReport() {\r\n    const elements = this.getBatchedElements();\r\n    const elementDetails = elements.map(el => ({\r\n      id: el.id,\r\n      type: el.constructor.name,\r\n      pendingUpdates: this.getPendingCount(el),\r\n      mounted: el.mounted,\r\n      depth: el.depth\r\n    }));\r\n    \r\n    return {\r\n      stats: this.getStats(),\r\n      batchedElements: elementDetails,\r\n      config: this.config,\r\n      timestamp: Date.now()\r\n    };\r\n  }\r\n  \r\n  /**\r\n   * Reset statistics\r\n   */\r\n  resetStats() {\r\n    this.stats = {\r\n      totalBatches: 0,\r\n      totalUpdates: 0,\r\n      updatesInLastBatch: 0,\r\n      averageUpdatesPerBatch: 0,\r\n      batchesSinceStart: 0,\r\n      largestBatchSize: 0,\r\n      flushScheduledCount: 0\r\n    };\r\n  }\r\n  \r\n  /**\r\n   * Dispose batcher\r\n   */\r\n  dispose() {\r\n    // Force final flush\r\n    if (this.updateScheduled) {\r\n      this.forceFlush();\r\n    }\r\n    \r\n    this.clear();\r\n    this.runtime = null;\r\n    \r\n    if (this.config.debugMode) {\r\n      console.log('[UpdateBatcher] Disposed');\r\n    }\r\n  }\r\n}\r\n\r\n\r\n\r\nexport {UpdateBatcher}\r\n"],
-  "mappings": "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",
-  "names": ["UpdateBatcher", "runtime", "element", "updateFn", "error", "updates", "startTime", "entries", "totalUpdates", "updateFns", "flushDuration", "updateCount", "elementCount", "count", "total", "enabled", "elementDetails", "el"]
-}
diff --git a/packages/flutterjs_engine/src/runtime/docs/README.md b/packages/flutterjs_engine/src/runtime/docs/README.md
deleted file mode 100644
index 1b1d9583..00000000
--- a/packages/flutterjs_engine/src/runtime/docs/README.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# Runtime Documentation
-
-Documentation for `@flutterjs/runtime`, the engine that powers the FlutterJS component model.
-
-## Contents
-
-- **[Architecture](architecture.md)**: High-level system design.
-- **[Lifecycle](lifecycle.md)**: Widget and State lifecycle states.
-- **[Element System](../src/element.js)**: Source code for the element tree.
-
-## Quick Start
-
-The runtime is usually hidden behind the `flutterjs` package exports, but understanding it helps with optimization.
-
-```javascript
-import { runApp } from '@flutterjs/runtime';
-import { MyApp } from './app.js';
-
-runApp(new MyApp());
-```
-
-## Key Modules
-
-- **`flutterjs_runtime.js`**: The main class, `runApp` implementation.
-- **`element.js`**: `Element`, `StatelessElement`, `StatefulElement`.
-- **`state.js`**: `State` class and `setState` batching.
-- **`build_context.js`**: Implementation of `BuildContext` api.
diff --git a/packages/flutterjs_engine/src/runtime/docs/architecture.md b/packages/flutterjs_engine/src/runtime/docs/architecture.md
deleted file mode 100644
index d2eeb97a..00000000
--- a/packages/flutterjs_engine/src/runtime/docs/architecture.md
+++ /dev/null
@@ -1,46 +0,0 @@
-# Runtime Architecture
-
-The `@flutterjs/runtime` package is the heart of the framework. It implements the reactive widget system found in Flutter, adapted for JavaScript.
-
-## Core Components
-
-```mermaid
-graph TD
-    User[User Code] --> Widget[Widget Tree]
-    Widget --> Runtime[FlutterJS Runtime]
-    Runtime --> Element[Element Tree]
-    Element --> State[State Objects]
-    Element --> VDOM[Virtual DOM]
-    VDOM --> DOM[Real DOM]
-```
-
-### 1. FlutterJSRuntime
-The entry point (`flutterjs_runtime.js`) orchestrates the application.
-- **Initialization**: Sets up error boundaries and performance tracking.
-- **runApp(Widget)**: Takes a widget, creates its element, and initiates the first build.
-- **Update Scheduling**: Manages the build queue for dirty elements.
-
-### 2. Element System (`element.js`)
-Elements are the mutable agents managing the immutable widgets.
-- **StatelessElement**: Calls `widget.build()`.
-- **StatefulElement**: Manages a `State` object.
-- **ComponentElement**: For raw functional components.
-
-### 3. State Management (`state.js`)
-Implements the `State<T>` pattern.
-- **setState()**: Schedules a filtered rebuild.
-- **Batching**: Updates are batched via `UpdateBatcher` to prevent layout thrashing.
-
-### 4. BuildContext (`build_context.js`)
-A handle to the location in the element tree.
-- Allows lookups like `context.findAncestorWidgetOfExactType`.
-
----
-
-## The Rendering Pipeline
-
-1.  **Widget Phase**: User defines an immutable `Widget` configuration.
-2.  **Mount Phase**: Runtime creates an `Element` for the widget.
-3.  **Build Phase**: Element calls `build()` to produce child widgets.
-4.  **VNode Phase**: Widget tree is converted to a VNode tree.
-5.  **Commit Phase**: VNode tree is diffed and patched to the real DOM.
diff --git a/packages/flutterjs_engine/src/runtime/docs/lifecycle.md b/packages/flutterjs_engine/src/runtime/docs/lifecycle.md
deleted file mode 100644
index 84783484..00000000
--- a/packages/flutterjs_engine/src/runtime/docs/lifecycle.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# Widget Lifecycle
-
-Understanding the lifecycle of a widget is crucial for managing resources and state.
-
-## Lifecycle States
-
-```mermaid
-stateDiagram-v2
-    [*] --> Unmounted
-    Unmounted --> Mounted: mount()
-    Mounted --> Active: activate()
-    Active --> Building: build()
-    Building --> Active: build complete
-    Active --> Inactive: deactivate()
-    Inactive --> Unmounted: dispose()
-    Unmounted --> [*]
-```
-
-## Lifecycle Methods (StatefulWidget)
-
-### 1. Creation
-- **`createState()`**: Called immediately when the `StatefulElement` is created.
-- **`initState()`**: Called once when the state object is inserted into the tree.
-- **`didChangeDependencies()`**: Called immediately after `initState` and whenever a dependency (InheritedWidget) changes.
-
-### 2. Re-building
-- **`build()`**: Called frequently. Must be pure and fast.
-- **`didUpdateWidget(oldWidget)`**: Called when the parent rebuilds and sends a new widget configuration. State is preserved.
-- **`setState()`**: Triggers a rebuild manually.
-
-### 3. Destruction
-- **`deactivate()`**: Called when the object is removed from the tree (can be reinserted).
-- **`dispose()`**: Called when the object is permanently removed. Clean up controllers/listeners here.
-
-## Element Lifecycle
-
-1.  **Mounting**: The element initializes its state and child interaction.
-2.  **Updating**: The element compares the old widget and new widget.
-    - If type matches: Update widget reference and call `build`.
-    - If type changes: Unmount old element, replace with new element.
-3.  **Unmounting**: Recursively disposes children and clears resources.
diff --git a/packages/flutterjs_engine/src/runtime/jest_config.json.js b/packages/flutterjs_engine/src/runtime/jest_config.json.js
deleted file mode 100644
index 621a56f8..00000000
--- a/packages/flutterjs_engine/src/runtime/jest_config.json.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default {
-  transform: {},
-  testEnvironment: 'node',
-  testMatch: ['**/test/**/*.test.js'],
-  collectCoverageFrom: ['src/**/*.js'],
-  verbose: true
-};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/package.json b/packages/flutterjs_engine/src/runtime/package.json
deleted file mode 100644
index 92d0e73b..00000000
--- a/packages/flutterjs_engine/src/runtime/package.json
+++ /dev/null
@@ -1,58 +0,0 @@
-{
-  "name": "@flutterjs/runtime",
-  "version": "1.0.0",
-  "type": "module",
-  "directories": {
-    "test": "test"
-  },
-  "main": "./dist/runtime.js",
-  "exports": {
-    ".": "./dist/index.js",
-    "./build_context": "./dist/build_context.js",
-    "./element": "./dist/element.js",
-    "./event_system": "./dist/event_system.js",
-    "./flutterjs_runtime": "./dist/flutterjs_runtime.js",
-    "./focus_manager": "./dist/focus_manager.js",
-    "./gesture_recognizer": "./dist/gesture_recognizer.js",
-    "./inherited_element": "./dist/inherited_element.js",
-    "./key": "./dist/key.js",
-    "./memory_manager": "./dist/memory_manager.js",
-    "./runtime_engine": "./dist/runtime_engine.js",
-    "./service_registry": "./dist/service_registry.js",
-    "./state": "./dist/state.js",
-    "./state_tracker": "./dist/state_tracker.js",
-    "./update_batcher": "./dist/update_batcher.js"
-  },
-  "scripts": {
-    "build": "node build.js",
-    "test:buildContext": "node ./test/build_context.test.js",
-    "test:element": "node ./test/element.test.js",
-    "test:elementSystemImp": "node ./test/event_system_integration.test.js",
-    "test:event": "node ./test/event_system.test.js",
-    "test:runtime": "node ./test/flutterjs_runtime.test.js",
-    "test:focus": "node ./test/focus_manager.test.js",
-    "test:gesture": "node ./test/gesture.test.js",
-    "test:inheritentInte": "node ./test/inherited_element_integration.test.js",
-    "test:inheritedElement": "node ./test/inherited_element.test.js",
-    "test:memory": "node ./test/memory_integration.test.js",
-    "test:memoryMan": "node ./test/memory_manager.test.js",
-    "test:runtimeEng": "node ./test/runtime_engine.test.js",
-    "test:runtimeInte": "node ./test/runtime_integration.test",
-    "test:service": "node ./test/service_registry.test.js",
-    "test:stateInte": "node ./test/state_integration.test.js",
-    "test:stateTrack": "node ./test/state_tracker.test.js",
-    "test:state": "node ./test/state.test.js",
-    "test:update": "node ./test/update_batcher.test.js"
-  },
-  "dependencies": {
-    "jest": "^29.7.0",
-    "jsdom": "^22.1.0",
-    "@flutterjs/vdom": "file:../vdom"
-  },
-  "author": "Jayprakash Pal",
-  "license": "ISC",
-  "description": "",
-  "devDependencies": {
-    "esbuild": "^0.27.2"
-  }
-}
diff --git a/packages/flutterjs_engine/src/runtime/src/element.js b/packages/flutterjs_engine/src/runtime/src/element.js
deleted file mode 100644
index b6d24c01..00000000
--- a/packages/flutterjs_engine/src/runtime/src/element.js
+++ /dev/null
@@ -1,1319 +0,0 @@
-/**
- * FlutterJS Element System - FIXED VERSION
- * 
- * ✅ CRITICAL FIX: StatefulElement.mount() now calls state._mount()
- * This ensures this.widget is properly initialized in State
- * 
- * Elements are the live instances that bridge widgets and DOM.
- * They manage the lifecycle, state, and rendering of widgets.
- */
-
-import { BuildContext } from './build_context.js';
-import { VNodeDiffer } from '@flutterjs/vdom/vnode_differ';
-import { PatchApplier } from '@flutterjs/vdom/patch_applier';
-// NOTE: InheritedElement is NOT imported here to avoid circular dependency.
-// InheritedWidget provides its own createElement() method that returns InheritedElement.
-
-// ============================================================================
-// DIAGNOSTIC LEVELS
-// ============================================================================
-
-const DiagnosticLevel = {
-  hidden: 'hidden',
-  fine: 'fine',
-  debug: 'debug',
-  info: 'info',
-  warning: 'warning',
-  hint: 'hint',
-  summary: 'summary',
-  error: 'error',
-  off: 'off'
-};
-
-const DiagnosticsTreeStyle = {
-  none: 'none',
-  sparse: 'sparse',
-  offstage: 'offstage',
-  dense: 'dense',
-  transition: 'transition',
-  error: 'error',
-  whitespace: 'whitespace',
-  flat: 'flat',
-  singleLine: 'singleLine',
-  errorProperty: 'errorProperty',
-  shallow: 'shallow',
-  truncateChildren: 'truncateChildren'
-};
-
-// ============================================================================
-// DIAGNOSTICABLE MIXIN
-// ============================================================================
-
-export class Diagnosticable {
-  toStringShort() {
-    return `${this.constructor.name}${this.key ? `(key: ${this.key})` : '(unkeyed)'}`;
-  }
-
-  toDiagnosticsNode(name = null, style = DiagnosticsTreeStyle.sparse) {
-    return {
-      name: name || this.constructor.name,
-      value: this,
-      style: style,
-      toString: () => this.toStringShort()
-    };
-  }
-
-  debugFillProperties(properties) {
-    if (this.key !== null && this.key !== undefined) {
-      properties.push({ name: 'key', value: this.key });
-    }
-  }
-
-  debugInfo() {
-    const properties = [];
-    this.debugFillProperties(properties);
-
-    return {
-      type: this.constructor.name,
-      key: this.key || null,
-      properties: properties,
-      style: this.style || DiagnosticsTreeStyle.sparse,
-      description: this.toStringShort()
-    };
-  }
-
-  toString() {
-    if (process.env.NODE_ENV === 'development') {
-      const info = this.debugInfo();
-      if (info.properties.length === 0) {
-        return this.toStringShort();
-      }
-      const propsStr = info.properties
-        .map(p => `${p.name}: ${p.value}`)
-        .join(', ');
-      return `${this.toStringShort()} { ${propsStr} }`;
-    }
-    return this.toStringShort();
-  }
-}
-
-
-// ✅ Helper function to check if something is a REAL VNode
-function isRealVNode(obj) {
-  if (!obj || typeof obj !== 'object') {
-    return false;
-  }
-
-  // Check for VNode properties AND structure
-  const hasTag = typeof obj.tag === 'string';  // ✅ tag must be STRING (HTML tag name)
-  const hasChildren = Array.isArray(obj.children) || obj.children === null || obj.children === undefined;
-  const hasProps = obj.props === null || obj.props === undefined || typeof obj.props === 'object';
-
-  // VNode should NOT have build() or createState() or createElement() methods
-  const isNotWidget = typeof obj.build !== 'function' &&
-    typeof obj.createState !== 'function' &&
-    typeof obj.createElement !== 'function';
-
-  // All conditions must be true
-  return hasTag && hasChildren && hasProps && isNotWidget;
-}
-
-// ✅ Helper function to check if something is a Widget
-function isWidget(obj) {
-  if (!obj || typeof obj !== 'object') {
-    return false;
-  }
-
-  return (
-    typeof obj.build === 'function' ||
-    typeof obj.createState === 'function' ||
-    typeof obj.render === 'function' ||
-    typeof obj.createElement === 'function' // ✅ Added for ProxyWidgets (SizedBox, ConstrainedBox)
-  );
-}
-
-
-/**
- * Base Element Class
- */
-class Element extends Diagnosticable {
-  constructor(widget, parent = null, runtime = null) {
-    super();
-
-    if (!widget) {
-      throw new Error('Widget is required for Element creation');
-    }
-
-    if (!runtime) {
-      throw new Error('RUNTIME IS UNDEFINED! Runtime is required for Element creation');
-    }
-
-    this._widget = widget;
-    this._parent = parent;
-    this.runtime = runtime;
-
-    this._children = [];
-    this._childMap = new Map();
-
-    this._vnode = null;
-    this._domNode = null;
-
-    this._mounted = false;
-    this._dirty = false;
-    this._building = false;
-    this._shouldPatch = true; // Default to true, subclasses/build will disable if delegating
-
-    this._depth = parent ? (parent._depth || 0) + 1 : 0;
-
-    this.key = widget.key;
-    this._id = `el_${Element._nextId++}`;
-    console.log(`[Element] 🆕 Created ${this._id} for ${widget?.constructor?.name}`);
-
-    this._buildCount = 0;
-    this._lastBuildTime = 0;
-    this._lastBuildDuration = 0;
-
-    this._context = null;
-  }
-
-  // ============================================================================
-  // PROPERTIES
-  // ============================================================================
-
-  get widget() {
-    return this._widget;
-  }
-
-  set widget(newWidget) {
-    this._widget = newWidget;
-  }
-
-  get parent() {
-    return this._parent;
-  }
-
-  set parent(p) {
-    this._parent = p;
-  }
-
-  get children() {
-    return this._children;
-  }
-
-  get depth() {
-    return this._depth;
-  }
-
-  get id() {
-    return this._id;
-  }
-
-  get mounted() {
-    return this._mounted;
-  }
-
-  get dirty() {
-    return this._dirty;
-  }
-
-  get building() {
-    return this._building;
-  }
-
-  get vnode() {
-    return this._vnode;
-  }
-
-  set vnode(v) {
-    this._vnode = v;
-  }
-
-  get domNode() {
-    return this._domNode;
-  }
-
-  set domNode(d) {
-    this._domNode = d;
-  }
-
-  get context() {
-    if (!this._context) {
-      this._context = new BuildContext(this, this.runtime);
-    }
-    return this._context;
-  }
-
-  // ============================================================================
-  // CORE METHODS
-  // ============================================================================
-
-  getElementId() {
-    return this._id;
-  }
-
-  getWidgetPath() {
-    if (this._widgetPath) return this._widgetPath;
-
-    const name = this.widget?.constructor?.name || 'Unknown';
-    const parentPath = this.parent?.getWidgetPath ? this.parent.getWidgetPath() : '';
-
-    this._widgetPath = parentPath ? `${parentPath}/${name}` : name;
-    return this._widgetPath;
-  }
-
-  getIdentificationStrategy() {
-    return this.key ? 'key' : 'id';
-  }
-
-  performRebuild() {
-    throw new Error(`${this.constructor.name}.performRebuild() must be implemented by subclass`);
-  }
-
-  mount(parent = null) {
-    if (this._mounted) {
-      console.warn(`[Element] ${this._id} already mounted`);
-      return;
-    }
-
-    try {
-      this._mounted = true;
-
-      if (parent) {
-        this._parent = parent;
-        this._depth = (parent._depth || 0) + 1;
-      }
-
-      this._vnode = this.performRebuild();
-
-      this._children.forEach(child => {
-        if (!child._mounted) {
-          child.mount(this);
-        }
-      });
-
-      this.didMount();
-
-      // Mark that initial mount is complete
-      // This prevents applyChanges from running on the first rebuild after mount
-      this._initialMountComplete = true;
-    } catch (error) {
-      this._mounted = false;
-      throw new Error(`Failed to mount ${this.constructor.name}: ${error.message}`);
-    }
-  }
-
-  rebuild() {
-    if (!this._mounted) {
-      console.warn(`[Element] Cannot rebuild unmounted element ${this._id}`);
-      return;
-    }
-
-    if (this._building) {
-      console.warn(`[Element] Recursive rebuild detected for ${this._id}`);
-      return;
-    }
-
-    try {
-      this._building = true;
-
-      console.log(`🔄 [Element.rebuild] START for ${this._id} (${this.widget?.constructor?.name})`);
-      console.log(`   _shouldPatch BEFORE performRebuild:`, this._shouldPatch);
-
-      const oldVNode = this._vnode;
-      console.log(`   oldVNode:`, oldVNode?.tag, oldVNode?._element);
-
-      this._vnode = this.performRebuild();
-
-      console.log(`   newVNode:`, this._vnode?.tag, this._vnode?._element);
-      console.log(`   _shouldPatch AFTER performRebuild:`, this._shouldPatch);
-
-      // Only apply changes if this element is responsible for patching
-      // AND this is not the first rebuild after mount
-      if (this._shouldPatch && this._initialMountComplete) {
-        console.log(`✅ [Element.rebuild] Calling applyChanges for ${this._id}`);
-        this.applyChanges(oldVNode, this._vnode);
-      } else {
-        if (!this._initialMountComplete) {
-          console.log(`⏭️ [Element.rebuild] Skipping applyChanges for ${this._id} (first rebuild after mount)`);
-        } else if (!oldVNode) {
-          console.log(`⏭️ [Element.rebuild] Skipping applyChanges for ${this._id} (initial mount, oldVNode is null)`);
-        } else {
-          console.log(`⏭️ [Element.rebuild] Skipping applyChanges for ${this._id} (_shouldPatch = false)`);
-        }
-        // If delegating, we still need to update our DOM reference from the child's result
-        if (this._vnode && this._vnode._element) {
-          this._domNode = this._vnode._element;
-        }
-      }
-
-      this._dirty = false; // Mark clean regardless
-    } catch (error) {
-      console.error(`[Element] Rebuild failed for ${this._id}:`, error);
-      throw error;
-    } finally {
-      this._building = false;
-    }
-  }
-
-  applyChanges(oldVNode, newVNode) {
-    console.log(`[Element.applyChanges] START for ${this._id} (${this.widget?.constructor.name})`);
-    console.log(`  oldVNode:`, {
-      tag: oldVNode?.tag,
-      hasElement: !!oldVNode?._element,
-      element: oldVNode?._element?.tagName
-    });
-    console.log(`  newVNode:`, {
-      tag: newVNode?.tag,
-      hasElement: !!newVNode?._element,
-      element: newVNode?._element?.tagName
-    });
-
-    if (this.runtime.config && this.runtime.config.debugMode) {
-      console.log(`[Element] Applied changes to ${this._id}`);
-    }
-
-    // ✅ CRITICAL FIX: Handle case where BOTH VNodes have no DOM elements
-    // This happens with Navigator - the VNodes are wrappers without real DOM
-    // IMPORTANT: Only do this AFTER the first applyChanges (not during initial render)
-    if (this._hasAppliedChanges && oldVNode && newVNode && !oldVNode?._element && !newVNode?._element && this.runtime.renderer) {
-      // Check if VNodes are actually different (children changed)
-      const oldChildren = oldVNode.children || [];
-      const newChildren = newVNode.children || [];
-      const childrenChanged = oldChildren.length !== newChildren.length ||
-        JSON.stringify(oldChildren) !== JSON.stringify(newChildren);
-
-      if (childrenChanged) {
-        console.log(`[Element] 🔄 Both VNodes have no DOM but children changed - forcing full re-render`);
-
-        try {
-          // Find the root DOM node from this element or parent
-          let targetElement = this._domNode;
-
-          if (!targetElement && this._parent) {
-            // Try to get parent's DOM node
-            targetElement = this._parent._domNode;
-          }
-
-          if (!targetElement) {
-            // Last resort: find from document
-            const rootElement = document.getElementById('root');
-            if (rootElement && rootElement.firstChild) {
-              targetElement = rootElement.firstChild;
-            }
-          }
-
-          if (targetElement) {
-            console.log(`[Element] 🎨 Found target element, rendering new VNode`);
-
-            // Clear the target and render new VNode
-            targetElement.innerHTML = '';
-            this.runtime.renderer.render(newVNode, targetElement);
-
-            // Update VNode reference
-            newVNode._element = targetElement.firstChild;
-            if (newVNode._element) {
-              newVNode._element._vnode = newVNode;
-              this._domNode = newVNode._element;
-            }
-
-            console.log(`[Element] ✅ Successfully re-rendered for VNode change`);
-            return;
-          } else {
-            console.warn(`[Element] ⚠️ Could not find target element for re-render`);
-          }
-        } catch (error) {
-          console.error(`[Element] ❌ Failed to re-render:`, error);
-        }
-      } else {
-        console.log(`[Element] ℹ️ Both VNodes have no DOM but children unchanged - skipping re-render`);
-      }
-    }
-
-    // ✅ CRITICAL FIX: Handle case where new VNode has no DOM element
-    // This happens when widget type changes (e.g., HomeScreen → DetailsScreen)
-    // IMPORTANT: Only apply during navigation (when mounted), NOT during initial mount
-    if (this._mounted && oldVNode && oldVNode._element && !newVNode._element && this.runtime.renderer) {
-      console.log(`[Element] 🔄 Widget type changed - rendering new VNode and replacing DOM`);
-
-      try {
-        const oldDomNode = oldVNode._element;
-        const parentNode = oldDomNode.parentNode;
-
-        if (parentNode) {
-          // Create temporary container to render new VNode
-          const tempContainer = document.createElement('div');
-
-          // Render new VNode to temp container
-          this.runtime.renderer.render(newVNode, tempContainer);
-
-          // Get the rendered DOM node
-          const newDomNode = tempContainer.firstChild;
-
-          if (newDomNode) {
-            // Replace old DOM with new DOM
-            parentNode.replaceChild(newDomNode, oldDomNode);
-
-            // Update VNode's DOM reference
-            newVNode._element = newDomNode;
-            newDomNode._vnode = newVNode;
-
-            // Update element's DOM reference
-            if (this._domNode === oldDomNode) {
-              this._domNode = newDomNode;
-            }
-
-            console.log(`[Element] ✅ Successfully replaced DOM for widget type change`);
-            return;
-          }
-        }
-      } catch (error) {
-        console.error(`[Element] ❌ Failed to replace DOM for widget type change:`, error);
-      }
-    } else if (oldVNode && oldVNode._element && newVNode._element) {
-      console.log(`[Element] ℹ️ Both VNodes have DOM elements - using normal patching`);
-    }
-
-    // ✅ DIRECT DOM PATCHING to preserve state
-    if (oldVNode && oldVNode._element && this.runtime.renderer) {
-
-      // ✅ TRY DIFFING FIRST (Fine-grained updates)
-      if (oldVNode._element.parentNode) {
-        try {
-          const domNode = oldVNode._element;
-          const parent = domNode.parentNode;
-          // Find index of current node
-          const index = Array.from(parent.childNodes).indexOf(domNode);
-
-          if (index !== -1) {
-            if (this.runtime.config && this.runtime.config.debugMode) {
-              console.log(`[Element] Diffing at index ${index}`);
-            }
-
-            // Generate patches
-            const patches = VNodeDiffer.diff(oldVNode, newVNode, index);
-
-            if (patches.length > 0) {
-              console.log(`[Element] Applying ${patches.length} patches to ${this._id} (${this.widget?.constructor.name})`);
-              patches.forEach(p => console.log(`   - Patch: ${p.type} at index ${p.index}, content:`, p.content));
-
-              // Apply patches
-              const result = PatchApplier.apply(parent, patches);
-              if (!result.success) {
-                console.error('[Element] PatchApplier failed:', result.errors);
-              } else {
-                console.log('[Element] Patches applied successfully');
-              }
-
-              // ✅ CRITICAL FIX: Ensure newVNode gets the DOM reference
-              if (!newVNode._element) {
-                newVNode._element = oldVNode._element;
-              }
-
-              // Update local DOM reference if the root node was replaced or just carried over
-              if (this._domNode === domNode) {
-                this._domNode = newVNode._element;
-              }
-            } else {
-              console.log(`[Element] No patches generated for ${this._id} (${this.widget?.constructor.name})`);
-              // No changes, but ensure new VNode has element reference
-              newVNode._element = oldVNode._element;
-              if (newVNode._element) {
-                newVNode._element._vnode = newVNode;
-              }
-            }
-            return; // ✅ Success, skip fallback
-          }
-        } catch (e) {
-          console.warn('[Element] Diffing failed, falling back to replace', e);
-        }
-      }
-
-      // ⚠️ FALLBACK: Coarse-grained update (Full Replacement)
-      // This happens if diffing fails or element has no parent
-      if (this.runtime.config && this.runtime.config.debugMode) {
-        console.log(`[Element] Fallback: Replacing DOM for ${this._id}`);
-      }
-
-      try {
-        const newDomNode = this.runtime.renderer.replaceElement(oldVNode._element, newVNode);
-
-        if (this._domNode === oldVNode._element) {
-          this._domNode = newDomNode;
-        }
-      } catch (e) {
-        console.error(`[Element] Failed to patch DOM for ${this._id}:`, e);
-      }
-    }
-
-    // Mark that applyChanges has been called at least once
-    this._hasAppliedChanges = true;
-  }
-
-  markNeedsBuild() {
-    if (this._dirty) {
-      return;
-    }
-
-    if (!this._mounted) {
-      console.warn(`[Element] Cannot mark unmounted element ${this._id} dirty`);
-      return;
-    }
-
-    this._dirty = true;
-
-    console.log(`🔍 [Element.markNeedsBuild] Called for ${this._id} (${this.widget?.constructor?.name})`);
-    console.trace('Call stack:');
-
-    if (this.runtime && this.runtime.markNeedsBuild) {
-      this.runtime.markNeedsBuild(this);
-    }
-  }
-
-  unmount() {
-    if (!this._mounted) {
-      return;
-    }
-
-    try {
-      this.willUnmount();
-
-      this._children.forEach(child => {
-        if (child._mounted) {
-          child.unmount();
-        }
-      });
-
-      this._children = [];
-      this._childMap.clear();
-      this._vnode = null;
-      this._domNode = null;
-
-      this._mounted = false;
-      this._dirty = false;
-
-      this.didUnmount();
-    } catch (error) {
-      console.error(`[Element] Unmount failed for ${this._id}:`, error);
-    }
-  }
-
-  updateWidget(newWidget) {
-    if (!newWidget) {
-      throw new Error('New widget is required for update');
-    }
-
-    const oldWidget = this._widget;
-    this.widget = newWidget;
-
-    if (this.shouldRebuild(oldWidget, newWidget)) {
-      this.markNeedsBuild();
-    }
-
-    this.didUpdateWidget(oldWidget, newWidget);
-  }
-
-  shouldRebuild(oldWidget, newWidget) {
-    if (oldWidget === newWidget) {
-      return false;
-    }
-
-    if (oldWidget.constructor !== newWidget.constructor) {
-      return true;
-    }
-
-    return !this.areWidgetsEqual(oldWidget, newWidget);
-  }
-
-  areWidgetsEqual(w1, w2) {
-    if (w1.constructor !== w2.constructor) {
-      return false;
-    }
-
-    const keys1 = Object.keys(w1);
-    const keys2 = Object.keys(w2);
-
-    if (keys1.length !== keys2.length) {
-      return false;
-    }
-
-    return keys1.every(key => {
-      const val1 = w1[key];
-      const val2 = w2[key];
-
-      if (typeof val1 === 'function' && typeof val2 === 'function') {
-        return true;
-      }
-
-      if (typeof val1 === 'object' && typeof val2 === 'object') {
-        try {
-          return JSON.stringify(val1) === JSON.stringify(val2);
-        } catch {
-          return false;
-        }
-      }
-
-      return val1 === val2;
-    });
-  }
-
-  addChild(child) {
-    if (!child) {
-      throw new Error('Child element is required');
-    }
-
-    this._children.push(child);
-
-    if (child.key) {
-      this._childMap.set(child.key, child);
-    }
-
-    child.parent = this;
-  }
-
-  removeChild(child) {
-    const index = this._children.indexOf(child);
-
-    if (index !== -1) {
-      this._children.splice(index, 1);
-    }
-
-    if (child.key) {
-      this._childMap.delete(child.key);
-    }
-
-    child.parent = null;
-  }
-
-  findChildByKey(key) {
-    return this._childMap.get(key);
-  }
-
-  findAncestorOfType(ElementType) {
-    let current = this._parent;
-
-    while (current) {
-      if (current instanceof ElementType) {
-        return current;
-      }
-      current = current._parent;
-    }
-
-    return null;
-  }
-
-  visitAncestors(visitor) {
-    let current = this._parent;
-
-    while (current) {
-      const shouldContinue = visitor(current);
-      if (shouldContinue === false) {
-        break;
-      }
-      current = current._parent;
-    }
-  }
-
-  // ============================================================================
-  // LIFECYCLE HOOKS
-  // ============================================================================
-
-  didMount() {
-    // Override in subclasses
-  }
-
-  didUpdateWidget(oldWidget, newWidget) {
-    // Override in subclasses
-  }
-
-  willUnmount() {
-    // Override in subclasses
-  }
-
-  didUnmount() {
-    // Override in subclasses
-  }
-
-  reassemble() {
-    // Override in subclasses
-  }
-
-  activate() {
-    // Override in subclasses
-  }
-
-  deactivate() {
-    // Override in subclasses
-  }
-
-  didChangeDependencies() {
-    // Override in subclasses
-  }
-
-  // ============================================================================
-  // UTILITIES
-  // ============================================================================
-
-  getStats() {
-    return {
-      id: this._id,
-      type: this.constructor.name,
-      mounted: this._mounted,
-      dirty: this._dirty,
-      depth: this._depth,
-      childCount: this._children.length,
-      buildCount: this._buildCount,
-      lastBuildDuration: this._lastBuildDuration,
-      hasKey: !!this.key
-    };
-  }
-
-  static generateId() {
-    return `el_${++Element._counter}`;
-  }
-
-  static resetCounter() {
-    Element._counter = 0;
-  }
-}
-
-Element._counter = 0;
-
-/**
- * StatelessElement - FIXED VERSION
- * 
- * ✅ KEY FIX: Returns result from widget.build(), NOT the Element
- */
-class StatelessElement extends Element {
-  constructor(widget, parent, runtime) {
-    super(widget, parent, runtime);
-  }
-
-  /**
-   * Build the widget and return the result
-   * ✅ CRITICAL: Use strict VNode detection
-   */
-  build() {
-    console.log('📦 StatelessElement.build() START', {
-      widgetType: this.widget?.constructor.name,
-      widgetInstance: this.widget
-    });
-
-    const context = this.buildContext();
-
-    try {
-      // STEP 1: Call widget's build method
-      console.log('🔨 Calling widget.build(context)...');
-      const result = this.widget.build(context);
-
-      console.log('✓ widget.build() returned:', {
-        resultType: typeof result,
-        resultConstructor: result?.constructor?.name,
-        hasTag: result?.tag !== undefined,
-        isString: typeof result === 'string',
-        isNull: result === null,
-      });
-
-      if (!result) {
-        console.warn('⚠️ Result is null/undefined');
-        throw new Error('StatelessWidget.build() returned null');
-      }
-
-      // ✅ STRICT CHECK: Use isRealVNode() instead of just checking .tag
-      if (isRealVNode(result)) {
-        console.log('✅ Result is a REAL VNode, returning it directly');
-        this._shouldPatch = true; // We own this VNode
-        return result;
-      }
-
-      // ✅ Check if it's a string/number/primitive
-      if (typeof result === 'string' || typeof result === 'number' || typeof result === 'boolean') {
-        console.log('✅ Result is a primitive:', result);
-        this._shouldPatch = true; // We own this primitive
-        return result;
-      }
-
-      // ✅ Check if it's a Widget (has build method or createState)
-      if (isWidget(result)) {
-        console.log('🔄 Result is a Widget, need to build recursively:', result.constructor.name);
-
-        let childElement = this._children[0];
-
-        // ✅ RECONCILIATION: Check if we can reuse the existing element
-        if (childElement && childElement.widget.constructor === result.constructor && childElement.widget.key === result.key) {
-          console.log('♻️ Reusing existing child element for:', result.constructor.name);
-
-          // ✅ CRITICAL FIX: Only rebuild if widget actually changed
-          const oldWidget = childElement.widget;
-          childElement.widget = result; // Update widget reference
-
-          // Check if rebuild is needed
-          if (childElement.shouldRebuild(oldWidget, result)) {
-            console.log('🔄 Widget changed, rebuilding child element');
-            childElement.rebuild();
-          } else {
-            console.log('✅ Widget unchanged, reusing existing vnode');
-          }
-
-          // Return existing vnode (either updated or reused)
-          return childElement.vnode;
-        }
-
-        // ❌ Cannot reuse: Unmount old child if exists
-        if (childElement) {
-          console.log('🗑️ Unmounting old child element:', childElement.constructor.name);
-          childElement.unmount();
-          this._children = [];
-        }
-
-        // ✅ CRITICAL FIX: We need to patch the DOM because we're replacing the child
-        this._shouldPatch = true;
-
-        // Create element for this widget
-        childElement = this._createElementForWidget(result);
-
-        console.log('✅ Created child element:', childElement.constructor.name);
-
-        // ✅ Add to children array so unmount() works
-        this._children = [childElement];
-
-        // ✅ CRITICAL: Use mount() to properly initialize the child element
-        // This handles parent ref, depth, context, and state initialization
-        childElement.mount(this);
-
-        const childVNode = childElement.vnode;
-
-        if (!childVNode) {
-          throw new Error('Child element.build() returned null');
-        }
-
-        console.log('✅ Built new child widget, applyChanges will update DOM');
-        return childVNode;
-      }
-
-      // If we get here, it's an unknown type
-      console.warn('⚠️ Unknown result type from build():', result);
-      console.warn('   Constructor:', result?.constructor?.name);
-      console.warn('   Type:', typeof result);
-      console.warn('   Has .tag:', result?.tag);
-      console.warn('   Has .build:', typeof result?.build);
-
-      throw new Error(
-        `Invalid build() return type from ${this.widget.constructor.name}. ` +
-        `Expected: Widget, VNode, string, number, or null. ` +
-        `Got: ${result?.constructor?.name} with tag="${result?.tag}"`
-      );
-
-    } catch (error) {
-      console.error('❌ Build error:', error.message);
-      console.error('   Widget:', this.widget?.constructor.name);
-      throw new Error(`StatelessWidget build failed: ${error.message}`);
-    }
-  }
-
-  /**
-   * Helper to create appropriate element type for a widget
-   * @private
-   */
-  _createElementForWidget(widget) {
-    // ✅ Use widget's createElement if available (InheritedWidget uses this)
-    // This avoids circular dependency with InheritedElement
-    if (widget && typeof widget.createElement === 'function') {
-      console.log('  Using widget.createElement() for:', widget.constructor.name);
-      return widget.createElement(this, this.runtime);
-    }
-
-    if (typeof widget.createState === 'function') {
-      console.log('  Creating StatefulElement for:', widget.constructor.name);
-      return new StatefulElement(widget, this, this.runtime);
-    } else if (widget.updateShouldNotify && typeof widget.updateShouldNotify === 'function') {
-      // InheritedWidget should have createElement defined, so this branch 
-      // is a fallback. The widget MUST provide createElement for InheritedWidget.
-      console.error('  ⚠️ InheritedWidget without createElement():', widget.constructor.name);
-      throw new Error(
-        `InheritedWidget "${widget.constructor.name}" must define createElement() method. ` +
-        `Extend InheritedWidget class properly.`
-      );
-    } else {
-      console.log('  Creating StatelessElement for:', widget.constructor.name);
-      return new StatelessElement(widget, this, this.runtime);
-    }
-  }
-
-  buildContext() {
-    return new BuildContext(this, this.runtime);
-  }
-
-  /**
-   * ✅ CRITICAL: Implement performRebuild() to satisfy Element.mount() contract
-   * This method is called by Element.mount() and must return a VNode
-   */
-  performRebuild() {
-    return this.build();
-  }
-}
-
-/**
- * StatefulElement - FIXED VERSION
- * 
- * ✅ CRITICAL FIX: mount() now calls state._mount(this)
- * This properly initializes state._widget so this.widget works
- */
-class StatefulElement extends Element {
-  constructor(widget, parent, runtime) {
-    super(widget, parent, runtime);
-
-    if (!widget.createState || typeof widget.createState !== 'function') {
-      throw new Error('StatefulWidget must implement createState()');
-    }
-
-    this.state = widget.createState();
-
-    if (!this.state) {
-      throw new Error('createState() returned null or undefined');
-    }
-
-    // ✅ Set initial references (but _mount will do the proper initialization)
-    this.state._element = this;
-    this.state._widget = widget;
-    this.state._mounted = false;
-  }
-
-  build() {
-    console.log('📦 StatefulElement.build() START', {
-      widgetType: this.widget?.constructor.name,
-      stateType: this.state?.constructor.name
-    });
-
-    const context = this.buildContext();
-
-    try {
-      if (!this.state.build || typeof this.state.build !== 'function') {
-        throw new Error('State must implement build() method');
-      }
-
-      console.log('🔨 Calling state.build(context)...');
-      const result = this.state.build(context);
-
-      console.log('✓ state.build() returned:', {
-        resultType: typeof result,
-        resultConstructor: result?.constructor?.name,
-        isVNode: result?.tag !== undefined
-      });
-
-      if (!result) {
-        throw new Error('State.build() returned null');
-      }
-
-      // ✅ STRICT CHECK: Use isRealVNode()
-      if (isRealVNode(result)) {
-        console.log('✅ Result is a REAL VNode, returning');
-        this._shouldPatch = true; // We own this VNode
-        return result;
-      }
-
-      // ✅ Check if it's a primitive
-      if (typeof result === 'string' || typeof result === 'number' || typeof result === 'boolean') {
-        console.log('✅ Result is a primitive');
-        this._shouldPatch = true; // We own this primitive
-        return result;
-      }
-
-      // ✅ Check if it's a widget and build recursively
-      let childElement = this._children[0];
-
-      if (isWidget(result)) {
-        console.log('🔄 State.build() returned a Widget, building recursively:', result.constructor.name);
-
-        // ✅ RECONCILIATION: Check if we can reuse the existing element
-        if (childElement && childElement.widget.constructor === result.constructor && childElement.widget.key === result.key) {
-          console.log('♻️ Reusing existing child element for:', result.constructor.name);
-
-          // ✅ CRITICAL FIX: Only rebuild if widget actually changed
-          const oldWidget = childElement.widget;
-          childElement.widget = result; // Update widget reference
-
-          // Check if rebuild is needed
-          if (childElement.shouldRebuild(oldWidget, result)) {
-            console.log('🔄 Widget changed, rebuilding child element');
-            childElement.rebuild();
-          } else {
-            console.log('✅ Widget unchanged, reusing existing vnode');
-          }
-
-          this._shouldPatch = false; // Child handled patching
-          return childElement.vnode;
-        }
-
-        // ❌ Cannot reuse: Unmount old child if exists
-        if (childElement) {
-          console.log('🗑️ Unmounting old child element:', childElement.constructor.name);
-          childElement.unmount();
-          this._children = [];
-        }
-
-        // ✅ CRITICAL FIX: We need to patch the DOM because we're replacing the child
-        this._shouldPatch = true;
-
-        childElement = this._createElementForWidget(result);
-
-        // ✅ Add to children array so unmount() works
-        this._children = [childElement];
-
-        // ✅ CRITICAL: Use mount() to properly initialize the child element
-        childElement.mount(this);
-
-        const childVNode = childElement.vnode;
-
-
-        if (!childVNode) {
-          throw new Error('Child element.build() returned null');
-        }
-
-        console.log('✅ Built new child widget, applyChanges will update DOM');
-        return childVNode;
-      }
-
-      this._shouldPatch = false; // Should have been set above, but safe default for delegates
-      return childElement ? childElement.vnode : result; // Fallback
-
-      throw new Error(
-        `Invalid build() return type from ${this.widget.constructor.name} state. ` +
-        `Expected: Widget, VNode, string, number, or null.`
-      );
-
-    } catch (error) {
-      throw new Error(`StatefulWidget build failed: ${error.message}`);
-    }
-  }
-
-  _createElementForWidget(widget) {
-    // ✅ Use widget's createElement if available
-    if (widget && typeof widget.createElement === 'function') {
-      return widget.createElement(this, this.runtime);
-    }
-
-    if (typeof widget.createState === 'function') {
-      return new StatefulElement(widget, this, this.runtime);
-    } else if (widget.updateShouldNotify && typeof widget.updateShouldNotify === 'function') {
-      return new InheritedElement(widget, this, this.runtime);
-    } else {
-      return new StatelessElement(widget, this, this.runtime);
-    }
-  }
-
-  /**
-   * ✅✅✅ CRITICAL FIX: Call state._mount() to properly initialize state
-   * This ensures this.widget is available in State
-   */
-  mount() {
-    // ✅ CRITICAL FIX: Prevent double mounting
-    if (this._mounted) {
-      console.warn(`[StatefulElement] ${this._id} already mounted, skipping duplicate mount`);
-      return;
-    }
-
-    console.log('🚀 StatefulElement.mount() called');
-    console.log('   Widget:', this.widget?.constructor?.name);
-    console.log('   State:', this.state?.constructor?.name);
-    console.log('   State has _mount:', typeof this.state._mount === 'function');
-
-    // ✅ CRITICAL: Call state._mount() if available
-    if (this.state._mount && typeof this.state._mount === 'function') {
-      console.log('✅ Calling state._mount(this)...');
-      this.state._mount(this);
-      console.log('✅ state._mount() complete');
-    } else {
-      // Fallback for old State implementations that don't have _mount()
-      console.log('⚠️ State does not have _mount(), using fallback initialization');
-
-      // Manually set state properties
-      this.state._element = this;
-      this.state._widget = this.widget;
-      this.state._mounted = true;
-
-      // Call initState manually
-      if (this.state.initState && typeof this.state.initState === 'function') {
-        try {
-          console.log('🎬 Calling initState()...');
-          this.state.initState();
-        } catch (error) {
-          console.error(`[StatefulElement] initState failed:`, error);
-        }
-      }
-    }
-
-    // Verify state is properly initialized
-    console.log('🔍 State after mount:', {
-      hasMounted: this.state._mounted,
-      hasElement: !!this.state._element,
-      hasWidget: !!this.state._widget,
-      widgetType: this.state._widget?.constructor?.name,
-      widgetTitle: this.state._widget?.title
-    });
-
-    // Call parent mount
-    super.mount();
-
-    console.log('✅ StatefulElement.mount() complete');
-  }
-
-  buildContext() {
-    return new BuildContext(this, this.runtime, this.state);
-  }
-
-  /**
-   * ✅ Update widget reference when widget changes
-   */
-  updateWidget(newWidget) {
-    console.log('🔄 StatefulElement.updateWidget() called');
-
-    const oldWidget = this._widget;
-
-    // Update element's widget
-    super.updateWidget(newWidget);
-
-    // ✅ Update state's widget reference
-    if (this.state._updateWidget && typeof this.state._updateWidget === 'function') {
-      console.log('✅ Calling state._updateWidget()');
-      this.state._updateWidget(newWidget);
-    } else {
-      // Fallback
-      console.log('⚠️ State does not have _updateWidget(), updating directly');
-      this.state._widget = newWidget;
-    }
-
-    // Call state's didUpdateWidget
-    if (this.state.didUpdateWidget && typeof this.state.didUpdateWidget === 'function') {
-      try {
-        this.state.didUpdateWidget(oldWidget);
-      } catch (error) {
-        console.error('[StatefulElement] didUpdateWidget failed:', error);
-      }
-    }
-  }
-
-  /**
-   * ✅ Properly unmount state
-   */
-  unmount() {
-    console.log('🛑 StatefulElement.unmount() called');
-
-    // Call state._unmount if available
-    if (this.state._unmount && typeof this.state._unmount === 'function') {
-      this.state._unmount();
-    }
-
-    // Call state.dispose
-    if (this.state._dispose && typeof this.state._dispose === 'function') {
-      this.state._dispose();
-    }
-
-    super.unmount();
-  }
-
-  /**
-   * ✅ CRITICAL: Implement performRebuild() to satisfy Element.mount() contract
-   * This method is called by Element.mount() and must return a VNode
-   */
-  performRebuild() {
-    return this.build();
-  }
-}
-
-/**
- * ComponentElement - Custom components
- */
-class ComponentElement extends Element {
-  constructor(widget, parent, runtime) {
-    super(widget, parent, runtime);
-    this.componentState = {};
-  }
-
-  build() {
-    const method = this.widget.render || this.widget.build;
-
-    if (!method || typeof method !== 'function') {
-      throw new Error('ComponentElement widget must have render() or build() method');
-    }
-
-    const context = this.buildContext();
-
-    try {
-      const result = method.call(this.widget, context);
-
-      // ✅ Check if VNode
-      if (result && typeof result === 'object' && result.tag) {
-        return result;
-      }
-
-      if (typeof result === 'string' || typeof result === 'number') {
-        return result;
-      }
-
-      const isWidget = result &&
-        typeof result === 'object' &&
-        (typeof result.build === 'function' || typeof result.createState === 'function');
-
-      if (isWidget) {
-        const childElement = this._createElementForWidget(result);
-
-        childElement._parent = this;
-        childElement._depth = this._depth + 1;
-        childElement._mounted = true;
-
-        return childElement.build();
-      }
-
-      return result;
-    } catch (error) {
-      throw new Error(`Component build failed: ${error.message}`);
-    }
-  }
-
-  _createElementForWidget(widget) {
-    // ✅ Use widget's createElement if available
-    if (widget && typeof widget.createElement === 'function') {
-      return widget.createElement(this, this.runtime);
-    }
-
-    if (typeof widget.createState === 'function') {
-      return new StatefulElement(widget, this, this.runtime);
-    } else {
-      return new StatelessElement(widget, this, this.runtime);
-    }
-  }
-
-  buildContext() {
-    return {
-      element: this,
-      runtime: this.runtime,
-      widget: this.widget,
-      state: this.componentState,
-
-      setState: (updates) => {
-        Object.assign(this.componentState, updates);
-        this.markNeedsBuild();
-      }
-    };
-  }
-
-  /**
-   * ✅ CRITICAL: Implement performRebuild() to satisfy Element.mount() contract
-   * This method is called by Element.mount() and must return a VNode
-   */
-  performRebuild() {
-    return this.build();
-  }
-}
-
-// Initialize static ID counter
-Element._nextId = 0;
-
-export {
-  Element,
-  StatelessElement,
-  StatefulElement,
-  ComponentElement,
-  DiagnosticLevel,
-  isRealVNode, isWidget
-};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/src/flutterjs_runtime.js b/packages/flutterjs_engine/src/runtime/src/flutterjs_runtime.js
deleted file mode 100644
index 6a25b97a..00000000
--- a/packages/flutterjs_engine/src/runtime/src/flutterjs_runtime.js
+++ /dev/null
@@ -1,1287 +0,0 @@
-/**
- * FlutterJS Runtime - Complete Production Version
- * 
- * FIXED: Handles both Widget and VNode inputs correctly
- */
-
-import {
-  VNodeRuntime,
-  runApp as coreRunApp,
-  getRuntime as coreGetRuntime,
-  updateApp as coreUpdateApp,
-  getMetrics as coreGetMetrics,
-  hotReload as coreHotReload,
-  renderToString as coreRenderToString,
-  hydrate as coreHydrate
-} from '@flutterjs/vdom/runtime_index';
-
-import {
-  StatelessElement,
-  StatefulElement,
-  ComponentElement
-} from '@flutterjs/runtime/element';
-import { InheritedElement } from '@flutterjs/runtime/inherited_element';
-import { VNodeBuilder } from '@flutterjs/vdom/vnode_builder';
-import { VNodeRenderer } from '@flutterjs/vdom/vnode_renderer';
-
-// ============================================================================
-// UTILITIES
-// ============================================================================
-
-function isBrowser() {
-  return typeof window !== 'undefined' && typeof document !== 'undefined';
-}
-
-function isSSR() {
-  return typeof window === 'undefined';
-}
-
-function escapeHtml(text) {
-  const map = {
-    '&': '&amp;',
-    '<': '&lt;',
-    '>': '&gt;',
-    '"': '&quot;',
-    "'": '&#039;'
-  };
-  return String(text).replace(/[&<>"']/g, m => map[m]);
-}
-
-function generateId() {
-  return `fjs-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-}
-
-function deepMerge(target, ...sources) {
-  if (!sources.length) return target;
-  const source = sources.shift();
-
-  if (isObject(target) && isObject(source)) {
-    for (const key in source) {
-      if (isObject(source[key])) {
-        if (!target[key]) Object.assign(target, { [key]: {} });
-        deepMerge(target[key], source[key]);
-      } else {
-        Object.assign(target, { [key]: source[key] });
-      }
-    }
-  }
-
-  return deepMerge(target, ...sources);
-}
-
-function isObject(item) {
-  return item && typeof item === 'object' && !Array.isArray(item);
-}
-
-/**
- * Check if input is a VNode (already built)
- */
-function isVNode(obj) {
-  return obj && (
-    // Must have a tag property (HTML element name)
-    obj.tag !== undefined &&
-    // Should have props and/or children (VNode structure)
-    (obj.props !== undefined || obj.children !== undefined) &&
-    // Should NOT have widget-specific properties
-    obj.build === undefined &&
-    obj.createState === undefined &&
-    obj.createElement === undefined
-  );
-}
-
-/**
- * Check if input is a Widget (needs building)
- */
-function isWidget(obj) {
-  return obj && (
-    typeof obj.build === 'function' ||
-    typeof obj.createState === 'function' ||
-    typeof obj.render === 'function' ||
-    typeof obj.createElement === 'function'
-  );
-}
-
-// ============================================================================
-// ENHANCED RUNTIME CLASS
-// ============================================================================
-
-export class FlutterJSRuntime extends VNodeRuntime {
-  constructor(options = {}) {
-    super();
-
-    // Additional Flutter-specific configuration
-    this.flutterConfig = {
-      debugMode: options.debugMode || false,
-      enableHotReload: options.enableHotReload !== false,
-      enableStateTracking: options.enableStateTracking !== false,
-      enablePerformanceTracking: options.enablePerformanceTracking !== false,
-      enableErrorBoundaries: options.enableErrorBoundaries !== false,
-      target: options.target || 'web',
-      isBrowser: isBrowser(),
-      isSSR: isSSR(),
-      strictMode: options.strictMode || false,
-      ...options
-    };
-
-    // Track initialization state
-    this.initialized = false;
-    this.mounted = false;
-
-    // Store original input for rebuilds
-    this.originalInput = null;
-    this.inputType = null; // 'widget' or 'vnode'
-
-    // Element registry for tracking all created elements
-    this.elementRegistry = new Map();
-
-    // Widget instance cache
-    this.widgetCache = new WeakMap();
-
-    // Error boundary stack
-    this.errorBoundaries = [];
-
-    // Lifecycle callbacks
-    this.lifecycleCallbacks = {
-      onElementCreated: [],
-      onElementMounted: [],
-      onElementUpdated: [],
-      onElementUnmounted: [],
-      onError: [],
-      onStateChange: []
-    };
-
-    // Performance tracking
-    this.performanceMarks = new Map();
-
-    // Setup error handling
-    this.setupErrorHandling();
-
-    if (this.flutterConfig.debugMode) {
-      console.log('[FlutterJSRuntime] ✅ Enhanced runtime created', {
-        environment: this.flutterConfig.isBrowser ? 'browser' : 'server',
-        hotReload: this.flutterConfig.enableHotReload,
-        strictMode: this.flutterConfig.strictMode
-      });
-    }
-  }
-
-  // ============================================================================
-  // INITIALIZE METHOD
-  // ============================================================================
-
-  initialize(options = {}) {
-    if (this.initialized) {
-      if (this.flutterConfig.debugMode) {
-        console.log('[FlutterJSRuntime] ⚠️  Already initialized, skipping');
-      }
-      return this;
-    }
-
-    const startTime = performance.now();
-
-    try {
-      // Initialize dirty elements set
-      this.dirtyElements = new Set();
-      this.isBatchSchedulled = false;
-
-      if (this.flutterConfig.debugMode) {
-        console.log('[FlutterJSRuntime] 🔧 Initializing runtime...');
-      }
-
-      // Store root element if provided
-      if (options.rootElement) {
-        this.rootElement = options.rootElement;
-
-        if (this.flutterConfig.debugMode) {
-          console.log('[FlutterJSRuntime] 📍 Root element set:', this.rootElement.id || this.rootElement.tagName);
-        }
-      }
-
-      // Validate browser environment if root element expected
-      if (this.flutterConfig.isBrowser && !this.rootElement) {
-        console.warn('[FlutterJSRuntime] ⚠️  No root element provided in browser mode');
-      }
-
-      // Mark as initialized
-      this.initialized = true;
-
-      const initTime = performance.now() - startTime;
-
-      if (this.flutterConfig.debugMode) {
-        console.log(`[FlutterJSRuntime] ✅ Initialized in ${initTime.toFixed(2)}ms`);
-      }
-
-      return this;
-
-    } catch (error) {
-      this.handleError('initialize', error, { options });
-      throw error;
-    }
-  }
-
-  // ============================================================================
-  // CORE FLUTTER WIDGET SYSTEM METHODS
-  // ============================================================================
-
-  createElement(widget, parent = null) {
-    if (!widget) {
-      throw new Error('[FlutterJSRuntime.createElement] Widget is required');
-    }
-
-    const startTime = this.flutterConfig.enablePerformanceTracking
-      ? performance.now()
-      : 0;
-
-    try {
-      if (this.flutterConfig.debugMode) {
-        console.log('[FlutterJSRuntime.createElement] Creating element for:', widget.constructor.name);
-      }
-
-      let element = null;
-
-      // Check widget cache first
-      if (this.widgetCache.has(widget)) {
-        const cachedElement = this.widgetCache.get(widget);
-        if (cachedElement && !cachedElement.unmounted) {
-          if (this.flutterConfig.debugMode) {
-            console.log('[FlutterJSRuntime.createElement] Using cached element');
-          }
-          return cachedElement;
-        }
-      }
-
-      // Determine widget type and create appropriate element
-
-      if (this.isStatelessWidget(widget)) {
-        if (this.flutterConfig.debugMode) {
-          console.log('[FlutterJSRuntime.createElement] → StatelessElement');
-        }
-        element = new StatelessElement(widget, parent, this);
-      }
-      else if (this.isStatefulWidget(widget)) {
-        if (this.flutterConfig.debugMode) {
-          console.log('[FlutterJSRuntime.createElement] → StatefulElement');
-        }
-        element = new StatefulElement(widget, parent, this);
-      }
-      else if (this.isInheritedWidget(widget)) {
-        if (this.flutterConfig.debugMode) {
-          console.log('[FlutterJSRuntime.createElement] → InheritedElement');
-        }
-        element = new InheritedElement(widget, parent, this);
-      }
-      else if (this.isComponentWidget(widget)) {
-        if (this.flutterConfig.debugMode) {
-          console.log('[FlutterJSRuntime.createElement] → ComponentElement');
-        }
-        element = new ComponentElement(widget, parent, this);
-      }
-      else if (typeof widget.createElement === 'function') {
-        if (this.flutterConfig.debugMode) {
-          console.log('[FlutterJSRuntime.createElement] → Custom createElement');
-        }
-        element = widget.createElement(parent, this);
-      }
-      else {
-        throw new Error(
-          `[FlutterJSRuntime.createElement] Unknown widget type: ${widget.constructor.name}. ` +
-          `Widget must be StatelessWidget, StatefulWidget, InheritedWidget, or implement createElement().`
-        );
-      }
-
-      // Register element
-      if (element) {
-        const elementId = generateId();
-        element._id = elementId;
-        this.elementRegistry.set(elementId, element);
-
-        // Cache element
-        this.widgetCache.set(widget, element);
-
-        // Trigger lifecycle callback
-        this.triggerLifecycleCallback('onElementCreated', element);
-      }
-
-      // Performance tracking
-      if (this.flutterConfig.enablePerformanceTracking) {
-        const duration = performance.now() - startTime;
-        this.recordPerformance('createElement', widget.constructor.name, duration);
-      }
-
-      return element;
-
-    } catch (error) {
-      this.handleError('createElement', error, { widget, parent });
-      throw error;
-    }
-  }
-
-  isStatelessWidget(widget) {
-    if (!widget) return false;
-    if (widget.constructor.name === 'StatelessWidget') return true;
-    if (widget.constructor.prototype &&
-      widget.constructor.prototype.constructor.name === 'StatelessWidget') {
-      return true;
-    }
-    return typeof widget.build === 'function' &&
-      !widget.createState &&
-      !widget.child &&
-      !widget.updateShouldNotify;
-  }
-
-  isStatefulWidget(widget) {
-    if (!widget) return false;
-    if (widget.constructor.name === 'StatefulWidget') return true;
-    if (widget.constructor.prototype &&
-      widget.constructor.prototype.constructor.name === 'StatefulWidget') {
-      return true;
-    }
-    return typeof widget.createState === 'function';
-  }
-
-  isInheritedWidget(widget) {
-    if (!widget) return false;
-    if (widget.constructor.name === 'InheritedWidget') return true;
-    if (widget.constructor.prototype &&
-      widget.constructor.prototype.constructor.name === 'InheritedWidget') {
-      return true;
-    }
-    return widget.child !== undefined &&
-      typeof widget.updateShouldNotify === 'function';
-  }
-
-  isComponentWidget(widget) {
-    if (!widget) return false;
-    if (typeof widget.render === 'function') return true;
-    return typeof widget.build === 'function' &&
-      typeof widget.createState !== 'function' &&
-      !widget.updateShouldNotify;
-  }
-
-  // ============================================================================
-  // ENHANCED RUNTIME METHODS - KEY FIX HERE
-  // ============================================================================
-
-  /**
-   * ✅ FIXED: runApp now handles both Widget and VNode inputs
-   */
-  runApp(input, options = {}) {
-    try {
-      // Ensure we're initialized first
-      if (!this.initialized) {
-        if (this.flutterConfig.debugMode) {
-          console.log('[FlutterJSRuntime] Auto-initializing before runApp');
-        }
-        this.initialize({ rootElement: this.rootElement || options.rootElement });
-      }
-
-      if (this.flutterConfig.debugMode) {
-        console.log('[FlutterJSRuntime] 🚀 Starting Flutter app...');
-      }
-
-      // Store original input for rebuilds
-      this.originalInput = input;
-
-      // Detect input type
-      const inputIsVNode = isVNode(input);
-      const inputIsWidget = isWidget(input);
-
-      if (this.flutterConfig.debugMode) {
-        console.log('[FlutterJSRuntime] Input type:', {
-          isVNode: inputIsVNode,
-          isWidget: inputIsWidget,
-          constructorName: input?.constructor?.name,
-          hasTag: input?.tag !== undefined,
-          hasBuild: typeof input?.build === 'function'
-        });
-      }
-
-      if (inputIsVNode) {
-        // ✅ CASE 1: Already a VNode - render directly
-        this.inputType = 'vnode';
-
-        if (this.flutterConfig.debugMode) {
-          console.log('[FlutterJSRuntime] 📦 Input is VNode, rendering directly');
-        }
-
-        // ✅ FIX: Set this.app so getMetrics() works
-        this.app = input;
-        this.rootVNode = input;
-
-        // Render to DOM if in browser
-        if (this.flutterConfig.isBrowser && this.rootElement) {
-          if (!this.renderer) {
-            this.renderer = new VNodeRenderer({ debugMode: this.flutterConfig.debugMode });
-          }
-          this.renderer.render(this.rootVNode, this.rootElement, { clear: true });
-        }
-
-        this.mounted = true;
-
-        if (this.flutterConfig.debugMode) {
-          console.log('[FlutterJSRuntime] ✅ VNode rendered directly');
-        }
-
-        return this;
-
-      } else if (inputIsWidget) {
-        // ✅ CASE 2: Widget - build to VNode first, then render
-        this.inputType = 'widget';
-
-        if (this.flutterConfig.debugMode) {
-          console.log('[FlutterJSRuntime] 🔧 Input is Widget, building VNode...');
-        }
-
-        // ✅ FIX: Set this.app so getMetrics() works
-        this.app = input;
-
-        // Create enhanced context with runtime
-        const context = this.createBuildContext({
-          ...options,
-          runtime: this,
-          flutterConfig: this.flutterConfig
-        });
-
-        // Build widget to VNode
-        const vNodeBuilder = new VNodeBuilder({
-          debugMode: this.flutterConfig.debugMode,
-          runtime: this
-        });
-
-        this.rootVNode = vNodeBuilder.build(input, context);
-
-        if (this.flutterConfig.debugMode) {
-          console.log('[FlutterJSRuntime] ✅ VNode built from Widget');
-        }
-
-        // Render to DOM if in browser
-        if (this.flutterConfig.isBrowser && this.rootElement) {
-          if (!this.renderer) {
-            this.renderer = new VNodeRenderer({ debugMode: this.flutterConfig.debugMode });
-          }
-          this.renderer.render(this.rootVNode, this.rootElement, { clear: true });
-        }
-
-        this.mounted = true;
-
-        if (this.flutterConfig.debugMode) {
-          console.log('[FlutterJSRuntime] ✅ Widget rendered to DOM');
-        }
-
-        return this;
-
-      } else {
-        // ✅ CASE 3: Unknown type - error
-        throw new Error(
-          `[FlutterJSRuntime] Invalid input type. Expected Widget or VNode, got: ${typeof input}. ` +
-          `Constructor: ${input?.constructor?.name || 'unknown'}`
-        );
-      }
-
-    } catch (error) {
-      this.handleError('runApp', error, { input, options });
-      throw error;
-    }
-  }
-
-  /**
-   * Override update to handle both Widget and VNode rebuilds
-   */
-  update(updateFn) {
-    try {
-      if (this.flutterConfig.debugMode) {
-        console.log('[FlutterJSRuntime] 🔄 Updating application...');
-      }
-
-      // Execute update function if provided
-      if (updateFn && typeof updateFn === 'function') {
-        updateFn();
-      }
-
-      // Rebuild based on input type
-      if (this.inputType === 'widget' && this.originalInput) {
-        // Rebuild from widget
-        const context = this.createBuildContext({
-          runtime: this,
-          flutterConfig: this.flutterConfig
-        });
-
-        const vNodeBuilder = new VNodeBuilder({
-          debugMode: this.flutterConfig.debugMode,
-          runtime: this
-        });
-
-        const newVNode = vNodeBuilder.build(this.originalInput, context);
-
-        if (this.renderer && this.rootElement) {
-          this.renderer.render(newVNode, this.rootElement, { clear: true });
-        }
-
-        this.rootVNode = newVNode;
-
-      } else if (this.inputType === 'vnode') {
-        // For VNode input, user must provide new VNode
-        console.warn('[FlutterJSRuntime] Cannot auto-rebuild from VNode. Provide new VNode to update().');
-      }
-
-      this.triggerLifecycleCallback('onStateChange', {
-        timestamp: Date.now(),
-        updateFn: updateFn ? updateFn.name : 'anonymous'
-      });
-
-      if (this.flutterConfig.debugMode) {
-        console.log('[FlutterJSRuntime] ✅ Update complete');
-      }
-
-    } catch (error) {
-      this.handleError('update', error, { updateFn });
-      throw error;
-    }
-  }
-
-  /**
-   * Mark an element as needing a rebuild
-   * @param {Element} element - The element to rebuild
-   */
-  markNeedsBuild(element) {
-    if (this.flutterConfig.debugMode) {
-      console.log(`[FlutterJSRuntime] 🏗️ markNeedsBuild called for ${element.widget?.constructor.name}`);
-    }
-
-    if (!this.dirtyElements) {
-      this.dirtyElements = new Set();
-    }
-
-    // ✅ Add to dirty set
-    this.dirtyElements.add(element);
-
-    // ✅ Schedule batch update (microtask)
-    if (!this.isBatchSchedulled) {
-      this.isBatchSchedulled = true;
-      Promise.resolve().then(() => this.processBuildQueue());
-    }
-  }
-
-  /**
-   * Process the build queue and rebuild only dirty elements
-   */
-  processBuildQueue() {
-    if (this.flutterConfig.debugMode) {
-      console.log(`[FlutterJSRuntime] 🔄 Processing build queue (size: ${this.dirtyElements.size})`);
-    }
-
-    this.isBatchSchedulled = false;
-
-    // Snapshot of elements to rebuild
-    const elements = Array.from(this.dirtyElements);
-    this.dirtyElements.clear(); // Clear immediately so new updates can be queued
-
-    // Sort by depth (parents before children) to avoid redundant rebuilds
-    elements.sort((a, b) => (a.depth || 0) - (b.depth || 0));
-
-    for (const element of elements) {
-      // Check if element is still mounted and marked dirty
-      // (It might have been unmounted by a parent rebuild)
-      if (element.mounted) {
-        try {
-          if (this.flutterConfig.debugMode) {
-            console.log(`[FlutterJSRuntime] 🔨 Rebuilding dirty element: ${element.widget?.constructor.name}`);
-          }
-
-          // ✅ Targeted Rebuild:
-          // element.rebuild() calls performRebuild() -> gets new VNode
-          // AND calls applyChanges() -> patches the DOM specifically for this element
-          element.rebuild();
-
-        } catch (e) {
-          console.error(`[FlutterJSRuntime] Error rebuilding element ${element.widget?.constructor.name}:`, e);
-          this.handleError('rebuild', e, { element: element.toString() });
-        }
-      }
-    }
-
-    // Check if more updates were queued during processing
-    if (this.dirtyElements.size > 0) {
-      if (this.flutterConfig.debugMode) {
-        console.log(`[FlutterJSRuntime] 🔄 More updates queued during batch, scheduling next batch...`);
-      }
-      Promise.resolve().then(() => this.processBuildQueue());
-    }
-  }
-
-  onElementMounted(element) {
-    if (!element) return;
-    if (this.flutterConfig.debugMode) {
-      console.log('[FlutterJSRuntime] 🔌 Element mounted:', element.widget?.constructor.name);
-    }
-    this.triggerLifecycleCallback('onElementMounted', element);
-  }
-
-  onElementUpdated(element) {
-    if (!element) return;
-    if (this.flutterConfig.debugMode) {
-      console.log('[FlutterJSRuntime] 🔄 Element updated:', element.widget?.constructor.name);
-    }
-    this.triggerLifecycleCallback('onElementUpdated', element);
-  }
-
-  onElementUnmounted(element) {
-    if (!element) return;
-    if (this.flutterConfig.debugMode) {
-      console.log('[FlutterJSRuntime] 🗑️ Element unmounted:', element.widget?.constructor.name);
-    }
-    if (element._id) {
-      this.elementRegistry.delete(element._id);
-    }
-    if (element.widget) {
-      this.widgetCache.delete(element.widget);
-    }
-    this.triggerLifecycleCallback('onElementUnmounted', element);
-  }
-
-  // ============================================================================
-  // LIFECYCLE CALLBACKS
-  // ============================================================================
-
-  on(eventName, callback) {
-    if (this.lifecycleCallbacks[eventName] && typeof callback === 'function') {
-      this.lifecycleCallbacks[eventName].push(callback);
-      if (this.flutterConfig.debugMode) {
-        console.log(`[FlutterJSRuntime] 📝 Registered callback for: ${eventName}`);
-      }
-    } else {
-      console.warn(`[FlutterJSRuntime] Unknown event: ${eventName}`);
-    }
-    return this;
-  }
-
-  off(eventName, callback) {
-    if (this.lifecycleCallbacks[eventName]) {
-      const index = this.lifecycleCallbacks[eventName].indexOf(callback);
-      if (index > -1) {
-        this.lifecycleCallbacks[eventName].splice(index, 1);
-      }
-    }
-    return this;
-  }
-
-  triggerLifecycleCallback(eventName, data) {
-    const callbacks = this.lifecycleCallbacks[eventName] || [];
-    callbacks.forEach(callback => {
-      try {
-        callback(data, this);
-      } catch (error) {
-        console.error(`[FlutterJSRuntime] Callback error (${eventName}):`, error);
-      }
-    });
-  }
-
-  // ============================================================================
-  // ERROR HANDLING
-  // ============================================================================
-
-  setupErrorHandling() {
-    if (!this.flutterConfig.isBrowser) return;
-    if (this._errorHandlingSetup) return;
-    this._errorHandlingSetup = true;
-
-    const errorHandler = (event) => {
-      this.handleError('uncaught', event.error || event.message, {
-        filename: event.filename,
-        lineno: event.lineno,
-        colno: event.colno
-      });
-    };
-
-    const rejectionHandler = (event) => {
-      this.handleError('promise', event.reason, {
-        promise: event.promise
-      });
-    };
-
-    window.addEventListener('error', errorHandler);
-    window.addEventListener('unhandledrejection', rejectionHandler);
-    this._errorHandlers = { errorHandler, rejectionHandler };
-  }
-
-  handleError(source, error, context = {}) {
-    const errorInfo = {
-      source,
-      error,
-      context,
-      timestamp: Date.now(),
-      stack: error instanceof Error ? error.stack : null
-    };
-
-    console.error(`[FlutterJSRuntime] ❌ Error in ${source}:`, error);
-
-    if (this.flutterConfig.debugMode && error instanceof Error && error.stack) {
-      console.error('[FlutterJSRuntime] Stack trace:', error.stack);
-    }
-
-    this.triggerLifecycleCallback('onError', errorInfo);
-
-    if (this.flutterConfig.debugMode && this.flutterConfig.isBrowser) {
-      this.showErrorOverlay(source, error, context);
-    }
-  }
-
-  showErrorOverlay(source, error, context) {
-    try {
-      if (typeof document === 'undefined') return;
-
-      const existing = document.getElementById('__flutterjs_error_overlay__');
-      if (existing) existing.remove();
-
-      const errorMessage = error instanceof Error ? error.message : String(error);
-      const errorStack = error instanceof Error && error.stack
-        ? error.stack.split('\n').slice(0, 10).join('\n')
-        : 'No stack trace available';
-
-      const overlay = document.createElement('div');
-      overlay.id = '__flutterjs_error_overlay__';
-      overlay.style.cssText = `
-        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
-        background: rgba(0, 0, 0, 0.9); color: white; z-index: 999999;
-        overflow-y: auto; font-family: 'Monaco', 'Menlo', monospace;
-        font-size: 13px; padding: 20px;
-      `;
-
-      overlay.innerHTML = `
-        <div style="max-width: 900px; margin: 0 auto;">
-          <div style="background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%);
-            padding: 20px; border-radius: 8px 8px 0 0; display: flex;
-            align-items: center; justify-content: space-between;">
-            <div style="display: flex; align-items: center; gap: 12px;">
-              <div style="width: 48px; height: 48px; background: rgba(255,255,255,0.2);
-                border-radius: 50%; display: flex; align-items: center;
-                justify-content: center; font-size: 24px;">⚠</div>
-              <div>
-                <h2 style="margin: 0; font-size: 20px; font-weight: 600;">
-                  ${escapeHtml(source.charAt(0).toUpperCase() + source.slice(1))} Error
-                </h2>
-                <p style="margin: 4px 0 0 0; opacity: 0.9; font-size: 12px;">
-                  FlutterJS Runtime Error
-                </p>
-              </div>
-            </div>
-            <button onclick="this.parentElement.parentElement.parentElement.remove()"
-              style="background: rgba(255,255,255,0.2); border: none; color: white;
-              width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
-              font-size: 18px;">×</button>
-          </div>
-          <div style="background: #1e1e1e; padding: 20px; border-radius: 0 0 8px 8px;">
-            <div style="margin-bottom: 20px;">
-              <h3 style="color: #ff6b6b; margin: 0 0 12px 0; font-size: 14px;
-                font-weight: 600; text-transform: uppercase;">Error Message</h3>
-              <pre style="background: #2d2d2d; padding: 16px; border-radius: 6px;
-                border-left: 4px solid #d32f2f; margin: 0; overflow-x: auto;
-                color: #ff8a80; line-height: 1.5;">${escapeHtml(errorMessage)}</pre>
-            </div>
-            ${errorStack && errorStack !== 'No stack trace available' ? `
-              <div style="margin-bottom: 20px;">
-                <h3 style="color: #64b5f6; margin: 0 0 12px 0; font-size: 14px;
-                  font-weight: 600; text-transform: uppercase;">Stack Trace</h3>
-                <pre style="background: #2d2d2d; padding: 16px; border-radius: 6px;
-                  border-left: 4px solid #1976d2; margin: 0; overflow-x: auto;
-                  color: #90caf9; line-height: 1.6; font-size: 12px;">${escapeHtml(errorStack)}</pre>
-              </div>
-            ` : ''}
-            ${Object.keys(context).length > 0 ? `
-              <div>
-                <h3 style="color: #81c784; margin: 0 0 12px 0; font-size: 14px;
-                  font-weight: 600; text-transform: uppercase;">Context</h3>
-                <pre style="background: #2d2d2d; padding: 16px; border-radius: 6px;
-                  border-left: 4px solid #388e3c; margin: 0; overflow-x: auto;
-                  color: #a5d6a7; line-height: 1.6; font-size: 12px;">${escapeHtml(JSON.stringify(context, null, 2))}</pre>
-              </div>
-            ` : ''}
-          </div>
-        </div>
-      `;
-
-      document.body.appendChild(overlay);
-    } catch (e) {
-      console.error('[FlutterJSRuntime] Failed to show error overlay:', e);
-    }
-  }
-
-  // ============================================================================
-  // PERFORMANCE & UTILITIES
-  // ============================================================================
-
-  recordPerformance(operation, identifier, duration) {
-    if (!this.flutterConfig.enablePerformanceTracking) return;
-    const key = `${operation}:${identifier}`;
-    if (!this.performanceMarks.has(key)) {
-      this.performanceMarks.set(key, {
-        count: 0, totalTime: 0, avgTime: 0,
-        minTime: Infinity, maxTime: 0
-      });
-    }
-    const mark = this.performanceMarks.get(key);
-    mark.count++;
-    mark.totalTime += duration;
-    mark.avgTime = mark.totalTime / mark.count;
-    mark.minTime = Math.min(mark.minTime, duration);
-    mark.maxTime = Math.max(mark.maxTime, duration);
-  }
-
-  getPerformanceReport() {
-    const report = {};
-    this.performanceMarks.forEach((data, key) => {
-      report[key] = {
-        calls: data.count,
-        total: `${data.totalTime.toFixed(2)}ms`,
-        average: `${data.avgTime.toFixed(2)}ms`,
-        min: `${data.minTime.toFixed(2)}ms`,
-        max: `${data.maxTime.toFixed(2)}ms`
-      };
-    });
-    return report;
-  }
-
-  clearPerformanceMarks() {
-    this.performanceMarks.clear();
-  }
-
-  getFlutterConfig() {
-    return { ...this.flutterConfig };
-  }
-
-  getElementById(elementId) {
-    return this.elementRegistry.get(elementId);
-  }
-
-  getAllElements() {
-    return Array.from(this.elementRegistry.values());
-  }
-
-  getElementCount() {
-    return this.elementRegistry.size;
-  }
-
-  isInitialized() {
-    return this.initialized;
-  }
-
-  isMounted() {
-    return this.mounted;
-  }
-
-  getStats() {
-    const baseMetrics = this.getMetrics();
-
-    // ✅ FIX: Handle null baseMetrics
-    if (!baseMetrics) {
-      return {
-        flutter: {
-          elements: this.elementRegistry.size,
-          cachedWidgets: this.widgetCache ? 'enabled' : 'disabled',
-          inputType: this.inputType,
-          initialized: this.initialized,
-          mounted: this.mounted,
-          hasApp: this.app !== null,
-          lifecycleCallbacks: Object.keys(this.lifecycleCallbacks).reduce((acc, key) => {
-            acc[key] = this.lifecycleCallbacks[key].length;
-            return acc;
-          }, {})
-        }
-      };
-    }
-
-    return {
-      ...baseMetrics,
-      flutter: {
-        elements: this.elementRegistry.size,
-        cachedWidgets: this.widgetCache ? 'enabled' : 'disabled',
-        inputType: this.inputType,
-        lifecycleCallbacks: Object.keys(this.lifecycleCallbacks).reduce((acc, key) => {
-          acc[key] = this.lifecycleCallbacks[key].length;
-          return acc;
-        }, {})
-      }
-    };
-  }
-
-  destroy() {
-    if (this.flutterConfig.debugMode) {
-      console.log('[FlutterJSRuntime] 🗑️ Destroying...');
-    }
-    if (this._errorHandlers && this.flutterConfig.isBrowser) {
-      window.removeEventListener('error', this._errorHandlers.errorHandler);
-      window.removeEventListener('unhandledrejection', this._errorHandlers.rejectionHandler);
-    }
-    this.elementRegistry.clear();
-    this.widgetCache = new WeakMap();
-    Object.keys(this.lifecycleCallbacks).forEach(key => {
-      this.lifecycleCallbacks[key] = [];
-    });
-    this.performanceMarks.clear();
-    super.destroy();
-    this.initialized = false;
-    this.mounted = false;
-    if (this.flutterConfig.debugMode) {
-      console.log('[FlutterJSRuntime] ✅ Destroyed');
-    }
-  }
-}
-
-// ============================================================================
-// GLOBAL API
-// ============================================================================
-
-
-let globalFlutterRuntime = null;
-
-export function runApp(rootWidgetOrVNode, options = {}) {
-  try {
-    if (globalFlutterRuntime) {
-      if (options.debugMode) {
-        console.log('[FlutterJS] ♻️ Reusing existing runtime');
-      }
-    } else {
-      if (options.debugMode) {
-        console.log('[FlutterJS] 🆕 Creating new Flutter runtime');
-      }
-      globalFlutterRuntime = new FlutterJSRuntime({
-        debugMode: options.debugMode || false,
-        enableHotReload: options.enableHotReload !== false,
-        enablePerformanceTracking: options.enablePerformanceTracking !== false,
-        enableStateTracking: options.enableStateTracking !== false,
-        enableErrorBoundaries: options.enableErrorBoundaries !== false,
-        strictMode: options.strictMode || false,
-        mode: options.mode || 'csr'
-      });
-    }
-
-    const enhancedOptions = {
-      ...options,
-      context: {
-        ...options.context,
-        runtime: globalFlutterRuntime
-      }
-    };
-
-    return globalFlutterRuntime.runApp(rootWidgetOrVNode, enhancedOptions);
-
-  } catch (error) {
-    console.error('[FlutterJS] ❌ Failed to run app:', error);
-    throw error;
-  }
-}
-
-export function getRuntime() {
-  return globalFlutterRuntime;
-}
-
-export function updateApp(updateFn) {
-  if (!globalFlutterRuntime) {
-    throw new Error('[FlutterJS] No runtime instance. Call runApp() first.');
-  }
-
-  if (updateFn && typeof updateFn === 'function') {
-    updateFn();
-  }
-
-  globalFlutterRuntime.update();
-}
-
-export function hotReload() {
-  if (!globalFlutterRuntime) {
-    console.warn('[FlutterJS] No runtime instance');
-    return;
-  }
-
-  globalFlutterRuntime.hotReload();
-}
-
-/**
- * Server-side render to HTML string
- * 
- * This renders a Flutter app to an HTML string for server-side rendering.
- * The resulting HTML can be sent to the client and hydrated.
- * 
- * @param {Widget} app - Root widget
- * @param {Object} options - SSR options
- * @param {string} options.title - Page title
- * @param {Object} options.meta - Meta tags
- * @param {Array} options.styles - External stylesheets
- * @param {Array} options.scripts - External scripts
- * @param {boolean} options.includeHydration - Include hydration data (default: true)
- * @param {boolean} options.includeCriticalCSS - Include critical CSS (default: true)
- * @param {boolean} options.includeRuntime - Include runtime script (default: true)
- * @returns {string} HTML string
- */
-export function renderToString(app, options = {}) {
-  try {
-    if (options.debugMode) {
-      console.log('[FlutterJS] 📄 SSR: Creating temporary runtime for rendering');
-    }
-
-    // Create temporary Flutter runtime for SSR
-    const ssrRuntime = new FlutterJSRuntime({
-      debugMode: options.debugMode || false,
-      mode: 'ssr'
-    });
-
-    // Enhanced context with Flutter runtime
-    const enhancedOptions = {
-      ...options,
-      context: {
-        ...options.context,
-        runtime: ssrRuntime // ✅ Pass Flutter runtime with createElement
-      }
-    };
-
-    // Use core renderToString with enhanced context
-    const html = coreRenderToString(app, enhancedOptions);
-
-    // Cleanup SSR runtime
-    ssrRuntime.destroy();
-
-    return html;
-
-  } catch (error) {
-    console.error('[FlutterJS] ❌ SSR failed:', error);
-    throw error;
-  }
-}
-
-/**
- * Hydrate server-rendered content
- * 
- * This attaches event listeners and makes a server-rendered app interactive.
- * Should be called on the client after receiving SSR HTML.
- * 
- * @param {Widget} app - Root widget (must match SSR widget)
- * @param {Object} options - Hydration options
- * @param {string} options.target - CSS selector for root element (default: '#root')
- * @param {boolean} options.debugMode - Enable debug logging
- * @returns {FlutterJSRuntime} Runtime instance
- */
-export function hydrate(app, options = {}) {
-  try {
-    if (options.debugMode) {
-      console.log('[FlutterJS] 💧 Starting hydration...');
-    }
-
-    if (!globalFlutterRuntime) {
-      globalFlutterRuntime = new FlutterJSRuntime({
-        debugMode: options.debugMode || false,
-        enableHotReload: options.enableHotReload !== false,
-        mode: 'hydrate'
-      });
-    }
-
-    // Enhanced options with Flutter runtime
-    const enhancedOptions = {
-      ...options,
-      context: {
-        ...options.context,
-        runtime: globalFlutterRuntime // ✅ Pass Flutter runtime with createElement
-      }
-    };
-
-    return coreHydrate(app, enhancedOptions);
-
-  } catch (error) {
-    console.error('[FlutterJS] ❌ Hydration failed:', error);
-    throw error;
-  }
-}
-
-/**
- * Get performance metrics
- * 
- * Returns detailed performance metrics including render times,
- * update counts, and Flutter-specific statistics.
- * 
- * @returns {Object|null} Performance metrics or null if no runtime
- */
-export function getMetrics() {
-  if (!globalFlutterRuntime) {
-    return null;
-  }
-  return globalFlutterRuntime.getStats();
-}
-
-/**
- * Get performance report
- * 
- * Returns a detailed report of all performance measurements.
- * 
- * @returns {Object|null} Performance report or null if no runtime
- */
-export function getPerformanceReport() {
-  if (!globalFlutterRuntime) {
-    return null;
-  }
-  return globalFlutterRuntime.getPerformanceReport();
-}
-
-/**
- * Clear performance metrics
- * 
- * Resets all performance tracking data.
- */
-export function clearMetrics() {
-  if (!globalFlutterRuntime) {
-    return;
-  }
-  globalFlutterRuntime.clearMetrics();
-  globalFlutterRuntime.clearPerformanceMarks();
-}
-
-/**
- * Register lifecycle callback
- * 
- * Available events:
- * - onElementCreated: When an element is created
- * - onElementMounted: When an element is mounted to DOM
- * - onElementUpdated: When an element is updated
- * - onElementUnmounted: When an element is unmounted
- * - onError: When an error occurs
- * - onStateChange: When state changes
- * 
- * @param {string} eventName - Event name
- * @param {Function} callback - Callback function
- */
-export function on(eventName, callback) {
-  if (!globalFlutterRuntime) {
-    console.warn('[FlutterJS] No runtime instance. Call runApp() first.');
-    return;
-  }
-  globalFlutterRuntime.on(eventName, callback);
-}
-
-/**
- * Unregister lifecycle callback
- * 
- * @param {string} eventName - Event name
- * @param {Function} callback - Callback function to remove
- */
-export function off(eventName, callback) {
-  if (!globalFlutterRuntime) {
-    return;
-  }
-  globalFlutterRuntime.off(eventName, callback);
-}
-
-/**
- * Get Flutter configuration
- * 
- * @returns {Object|null} Flutter config or null if no runtime
- */
-export function getConfig() {
-  if (!globalFlutterRuntime) {
-    return null;
-  }
-  return globalFlutterRuntime.getFlutterConfig();
-}
-
-/**
- * Dispose runtime and cleanup
- * 
- * This completely destroys the runtime and cleans up all resources.
- * After calling this, you need to call runApp() again to start a new app.
- */
-export function dispose() {
-  if (globalFlutterRuntime) {
-    globalFlutterRuntime.destroy();
-    globalFlutterRuntime = null;
-  }
-}
-
-/**
- * Check if runtime is initialized
- * 
- * @returns {boolean} True if runtime exists and is initialized
- */
-export function isInitialized() {
-  return globalFlutterRuntime !== null && globalFlutterRuntime.isInitialized();
-}
-
-/**
- * Check if app is mounted
- * 
- * @returns {boolean} True if app is mounted to DOM
- */
-export function isMounted() {
-  return globalFlutterRuntime !== null && globalFlutterRuntime.isMounted();
-}
-
-// ============================================================================
-// EXPORTS
-// ============================================================================
-
-export default {
-  // Classes
-  FlutterJSRuntime,
-  VNodeRuntime,
-
-  // Core API
-  runApp,
-  getRuntime,
-  updateApp,
-  hotReload,
-  renderToString,
-  hydrate,
-
-  // Metrics
-  getMetrics,
-  getPerformanceReport,
-  clearMetrics,
-
-  // Lifecycle
-  on,
-  off,
-
-  // Utilities
-  getConfig,
-  dispose,
-  isInitialized,
-  isMounted,
-  isBrowser,
-  isSSR
-};
-
-// ============================================================================
-// BROWSER GLOBAL API
-// ============================================================================
-
-if (typeof window !== 'undefined') {
-  console.log('[FlutterJS] 🌐 Setting up window.FlutterJS');
-
-  window.FlutterJS = {
-    // Core
-    runApp,
-    getRuntime,
-    updateApp,
-    hotReload,
-    renderToString,
-    hydrate,
-
-    // Metrics
-    getMetrics,
-    getPerformanceReport,
-    clearMetrics,
-
-    // Lifecycle
-    on,
-    off,
-
-    // Utilities
-    getConfig,
-    dispose,
-    isInitialized,
-    isMounted,
-
-    // Version info
-    version: '1.0.0',
-    environment: 'browser'
-  };
-
-  console.log('[FlutterJS] ✅ window.FlutterJS ready');
-  console.log('[FlutterJS] 📚 Available methods:', Object.keys(window.FlutterJS).join(', '));
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/src/gesture_recognizer.js b/packages/flutterjs_engine/src/runtime/src/gesture_recognizer.js
deleted file mode 100644
index 4bca06cd..00000000
--- a/packages/flutterjs_engine/src/runtime/src/gesture_recognizer.js
+++ /dev/null
@@ -1,1032 +0,0 @@
-/**
- * FlutterJS Gesture Recognizer System
- * 
- * Handles complex gestures like tap, long-press, swipe, pinch, and pan.
- * Provides Flutter-style gesture recognition for touch and mouse interactions.
- * 
- * Key Features:
- * - Multi-touch support
- * - Gesture conflict resolution
- * - Customizable thresholds
- * - Performance optimized
- * - Memory efficient cleanup
- */
-
-/**
- * Base Gesture Recognizer
- * 
- * Abstract class that all specific recognizers extend
- */
-class GestureRecognizer {
-  constructor(callback, options = {}) {
-    if (!callback || typeof callback !== 'function') {
-      throw new Error('Gesture recognizer requires a callback function');
-    }
-
-    this.callback = callback;
-    this.options = options;
-    this.state = 'ready'; // ready, possible, recognized, failed
-    this.disposed = false;
-  }
-
-  /**
-   * Handle pointer/touch event
-   * Subclasses must implement this
-   */
-  handleEvent(eventType, event) {
-    throw new Error('handleEvent() must be implemented by subclass');
-  }
-
-  /**
-   * Reset recognizer state
-   */
-  reset() {
-    this.state = 'ready';
-  }
-
-  /**
-   * Mark gesture as recognized
-   */
-  recognize(event) {
-    if (this.disposed) return;
-
-    // Remove the state === 'recognized' check - allow calling recognize multiple times
-    this.state = 'recognized';
-
-    try {
-      this.callback(event);
-    } catch (error) {
-      console.error('[GestureRecognizer] Callback error:', error);
-    }
-  }
-
-  /**
-   * Mark gesture as failed
-   */
-  fail() {
-    this.state = 'failed';
-  }
-
-  /**
-   * Cleanup and dispose
-   */
-  dispose() {
-    this.disposed = true;
-    this.callback = null;
-    this.options = null;
-    this.state = 'ready';
-  }
-
-  /**
-   * Check if disposed
-   */
-  get isDisposed() {
-    return this.disposed;
-  }
-}
-
-/**
- * Tap Gesture Recognizer
- * 
- * Detects simple tap/click gestures
- */
-class TapRecognizer extends GestureRecognizer {
-  constructor(callback, options = {}) {
-    super(callback, options);
-
-    // Configuration
-    this.maxDuration = options.maxDuration || 300; // ms
-    this.maxMovement = options.maxMovement || 10; // px
-    this.minTaps = options.minTaps || 1;
-    this.maxTaps = options.maxTaps || 1;
-
-    // State
-    this.startTime = null;
-    this.startX = null;
-    this.startY = null;
-    this.tapCount = 0;
-    this.lastTapTime = 0;
-    this.tapTimeout = null;
-  }
-
-  handleEvent(eventType, event) {
-    if (this.disposed) return;
-
-    switch (eventType) {
-      case 'pointerdown':
-      case 'mousedown':
-      case 'touchstart':
-        this.handleDown(event);
-        break;
-
-      case 'pointermove':
-      case 'mousemove':
-      case 'touchmove':
-        this.handleMove(event);
-        break;
-
-      case 'pointerup':
-      case 'mouseup':
-      case 'touchend':
-        this.handleUp(event);
-        break;
-
-      case 'pointercancel':
-      case 'touchcancel':
-        this.handleCancel();
-        break;
-    }
-  }
-
-  handleDown(event) {
-    this.state = 'possible';
-    this.startTime = Date.now();
-    this.startX = this.getX(event);
-    this.startY = this.getY(event);
-  }
-
-  handleMove(event) {
-    if (this.state !== 'possible') return;
-
-    const x = this.getX(event);
-    const y = this.getY(event);
-
-    const dx = Math.abs(x - this.startX);
-    const dy = Math.abs(y - this.startY);
-    const movement = Math.sqrt(dx * dx + dy * dy);
-
-    // Too much movement - fail
-    if (movement > this.maxMovement) {
-      this.fail();
-    }
-  }
-
-  handleUp(event) {
-    if (this.state !== 'possible') return;
-
-    const duration = Date.now() - this.startTime;
-    const x = this.getX(event);
-    const y = this.getY(event);
-
-    const dx = Math.abs(x - this.startX);
-    const dy = Math.abs(y - this.startY);
-    const movement = Math.sqrt(dx * dx + dy * dy);
-
-    // Check if valid tap
-    if (duration <= this.maxDuration && movement <= this.maxMovement) {
-      this.handleTap(event);
-    } else {
-      this.fail();
-    }
-
-    this.reset();
-  }
-
-  handleTap(event) {
-    const now = Date.now();
-    const timeSinceLastTap = now - this.lastTapTime;
-
-    // Check if double/triple tap
-    if (timeSinceLastTap < 300) {
-      this.tapCount++;
-    } else {
-      this.tapCount = 1;
-    }
-
-    this.lastTapTime = now;
-
-    // Clear previous timeout
-    if (this.tapTimeout) {
-      clearTimeout(this.tapTimeout);
-      this.tapTimeout = null;
-    }
-
-    // If we've reached max taps, recognize immediately
-    if (this.tapCount >= this.maxTaps) {
-      this.recognize({
-        type: 'tap',
-        tapCount: this.tapCount,
-        position: { x: this.startX, y: this.startY },
-        nativeEvent: event
-      });
-      this.tapCount = 0;
-    }
-    // Otherwise wait for potential additional taps
-    else if (this.tapCount >= this.minTaps) {
-      this.tapTimeout = setTimeout(() => {
-        this.recognize({
-          type: 'tap',
-          tapCount: this.tapCount,
-          position: { x: this.startX, y: this.startY },
-          nativeEvent: event
-        });
-        this.tapCount = 0;
-      }, 300);
-    }
-  }
-
-  handleCancel() {
-    this.fail();
-    // Don't call reset() here - it overwrites the 'failed' state
-  }
-  getX(event) {
-    if (event.clientX !== undefined && event.clientX !== 0) {
-      return event.clientX;
-    }
-    if (event.touches && event.touches.length > 0) {
-      return event.touches[0].clientX;
-    }
-    if (event.changedTouches && event.changedTouches.length > 0) {
-      return event.changedTouches[0].clientX;
-    }
-    return 0;
-  }
-
-  getY(event) {
-    if (event.clientY !== undefined && event.clientY !== 0) {
-      return event.clientY;
-    }
-    if (event.touches && event.touches.length > 0) {
-      return event.touches[0].clientY;
-    }
-    if (event.changedTouches && event.changedTouches.length > 0) {
-      return event.changedTouches[0].clientY;
-    }
-    return 0;
-  }
-
-  dispose() {
-    if (this.tapTimeout) {
-      clearTimeout(this.tapTimeout);
-      this.tapTimeout = null;
-    }
-    super.dispose();
-  }
-}
-
-/**
- * Long Press Gesture Recognizer
- * 
- * Detects long press / hold gestures
- */
-class LongPressRecognizer extends GestureRecognizer {
-  constructor(callback, options = {}) {
-    super(callback, options);
-
-    // Configuration
-    this.duration = options.duration || 500; // ms
-    this.maxMovement = options.maxMovement || 10; // px
-
-    // State
-    this.timer = null;
-    this.startX = null;
-    this.startY = null;
-    this.recognized = false;
-  }
-
-  handleEvent(eventType, event) {
-    if (this.disposed) return;
-
-    switch (eventType) {
-      case 'pointerdown':
-      case 'mousedown':
-      case 'touchstart':
-        this.handleDown(event);
-        break;
-
-      case 'pointermove':
-      case 'mousemove':
-      case 'touchmove':
-        this.handleMove(event);
-        break;
-
-      case 'pointerup':
-      case 'mouseup':
-      case 'touchend':
-      case 'pointercancel':
-      case 'touchcancel':
-        this.handleEnd(event);
-        break;
-    }
-  }
-
-  handleDown(event) {
-    this.state = 'possible';
-    this.startX = this.getX(event);
-    this.startY = this.getY(event);
-    this.recognized = false;
-
-    // Start timer
-    this.timer = setTimeout(() => {
-      if (this.state === 'possible') {
-        this.recognized = true;
-        this.recognize({
-          type: 'longpress',
-          position: { x: this.startX, y: this.startY },
-          nativeEvent: event
-        });
-      }
-      this.timer = null;
-    }, this.duration);
-  }
-
-  handleMove(event) {
-    if (this.state !== 'possible' || this.recognized) return;
-
-    const x = this.getX(event);
-    const y = this.getY(event);
-
-    const dx = Math.abs(x - this.startX);
-    const dy = Math.abs(y - this.startY);
-    const movement = Math.sqrt(dx * dx + dy * dy);
-
-    // Too much movement - cancel
-    if (movement > this.maxMovement) {
-      this.cancel();
-    }
-  }
-
-  handleEnd(event) {
-    this.cancel();
-    this.reset();
-  }
-
-  cancel() {
-    if (this.timer) {
-      clearTimeout(this.timer);
-      this.timer = null;
-    }
-    this.fail();
-  }
-
-  getX(event) {
-    return event.clientX || event.touches?.[0]?.clientX || 0;
-  }
-
-  getY(event) {
-    return event.clientY || event.touches?.[0]?.clientY || 0;
-  }
-
-  dispose() {
-    this.cancel();
-    super.dispose();
-  }
-}
-
-/**
- * Swipe Gesture Recognizer
- * 
- * Detects directional swipe gestures
- */
-class SwipeRecognizer extends GestureRecognizer {
-  constructor(callback, options = {}) {
-    super(callback, options);
-
-    // Configuration
-    this.minDistance = options.minDistance || 50; // px
-    this.maxDuration = options.maxDuration || 300; // ms
-    this.direction = options.direction || null; // 'horizontal', 'vertical', null (any)
-
-    // State
-    this.startTime = null;
-    this.startX = null;
-    this.startY = null;
-  }
-
-  handleEvent(eventType, event) {
-    if (this.disposed) return;
-
-    switch (eventType) {
-      case 'pointerdown':
-      case 'mousedown':
-      case 'touchstart':
-        this.handleDown(event);
-        break;
-
-      case 'pointerup':
-      case 'mouseup':
-      case 'touchend':
-        this.handleUp(event);
-        break;
-
-      case 'pointercancel':
-      case 'touchcancel':
-        this.handleCancel();
-        break;
-    }
-  }
-
-  handleDown(event) {
-    this.state = 'possible';
-    this.startTime = Date.now();
-    this.startX = this.getX(event);
-    this.startY = this.getY(event);
-  }
-
-  handleUp(event) {
-    if (this.state !== 'possible') return;
-
-    const duration = Date.now() - this.startTime;
-    const endX = this.getX(event);
-    const endY = this.getY(event);
-
-    const dx = endX - this.startX;
-    const dy = endY - this.startY;
-    const distance = Math.sqrt(dx * dx + dy * dy);
-
-    // Check if valid swipe
-    if (duration <= this.maxDuration && distance >= this.minDistance) {
-      const swipeDirection = this.getDirection(dx, dy);
-
-      // Check direction constraint
-      if (this.direction === 'horizontal' &&
-        (swipeDirection === 'up' || swipeDirection === 'down')) {
-        this.fail();
-        this.reset();
-        return;
-      }
-
-      if (this.direction === 'vertical' &&
-        (swipeDirection === 'left' || swipeDirection === 'right')) {
-        this.fail();
-        this.reset();
-        return;
-      }
-
-      this.recognize({
-        type: 'swipe',
-        direction: swipeDirection,
-        distance: distance,
-        velocity: distance / duration, // px/ms
-        delta: { dx, dy },
-        start: { x: this.startX, y: this.startY },
-        end: { x: endX, y: endY },
-        nativeEvent: event
-      });
-    } else {
-      this.fail();
-    }
-
-    this.reset();
-  }
-
-  handleCancel() {
-    this.fail();
-    this.reset();
-  }
-
-  getDirection(dx, dy) {
-    const angle = Math.atan2(dy, dx) * 180 / Math.PI;
-
-    // Determine primary direction
-    if (angle >= -45 && angle < 45) return 'right';
-    if (angle >= 45 && angle < 135) return 'down';
-    if (angle >= -135 && angle < -45) return 'up';
-    return 'left';
-  }
-
-  getX(event) {
-    if (event.clientX !== undefined && event.clientX !== 0) {
-      return event.clientX;
-    }
-    if (event.touches && event.touches.length > 0) {
-      return event.touches[0].clientX;
-    }
-    if (event.changedTouches && event.changedTouches.length > 0) {
-      return event.changedTouches[0].clientX;
-    }
-    return 0;
-  }
-
-  getY(event) {
-    if (event.clientY !== undefined && event.clientY !== 0) {
-      return event.clientY;
-    }
-    if (event.touches && event.touches.length > 0) {
-      return event.touches[0].clientY;
-    }
-    if (event.changedTouches && event.changedTouches.length > 0) {
-      return event.changedTouches[0].clientY;
-    }
-    return 0;
-  }
-}
-
-/**
- * Pan Gesture Recognizer
- * 
- * Detects continuous drag/pan gestures
- */
-class PanRecognizer extends GestureRecognizer {
-  constructor(callback, options = {}) {
-    super(callback, options);
-
-    // Configuration
-    this.minDistance = options.minDistance || 10; // px to start
-    this.direction = options.direction || null; // 'horizontal', 'vertical', null
-
-    // State
-    this.startX = null;
-    this.startY = null;
-    this.lastX = null;
-    this.lastY = null;
-    this.isPanning = false;
-
-    // Callbacks
-    this.onStart = options.onStart || null;
-    this.onUpdate = options.onUpdate || null;
-    this.onEnd = options.onEnd || null;
-  }
-
-  handleEvent(eventType, event) {
-    if (this.disposed) return;
-
-    switch (eventType) {
-      case 'pointerdown':
-      case 'mousedown':
-      case 'touchstart':
-        this.handleDown(event);
-        break;
-
-      case 'pointermove':
-      case 'mousemove':
-      case 'touchmove':
-        this.handleMove(event);
-        break;
-
-      case 'pointerup':
-      case 'mouseup':
-      case 'touchend':
-        this.handleUp(event);
-        break;
-
-      case 'pointercancel':
-      case 'touchcancel':
-        this.handleCancel();
-        break;
-    }
-  }
-
-  handleDown(event) {
-    this.state = 'possible';
-    this.startX = this.getX(event);
-    this.startY = this.getY(event);
-    this.lastX = this.startX;
-    this.lastY = this.startY;
-    this.isPanning = false;
-  }
-
-  handleMove(event) {
-    if (this.state === 'failed') return;
-
-    const x = this.getX(event);
-    const y = this.getY(event);
-
-    const dx = x - this.startX;
-    const dy = y - this.startY;
-    const distance = Math.sqrt(dx * dx + dy * dy);
-
-    // Check if pan started
-    if (!this.isPanning && distance >= this.minDistance) {
-      // Check direction constraint
-      if (this.direction === 'horizontal' && Math.abs(dy) > Math.abs(dx)) {
-        this.fail();
-        return;
-      }
-
-      if (this.direction === 'vertical' && Math.abs(dx) > Math.abs(dy)) {
-        this.fail();
-        return;
-      }
-
-      this.isPanning = true;
-      this.state = 'recognized';
-
-      // Call onStart
-      if (this.onStart) {
-        try {
-          this.onStart({
-            type: 'panstart',
-            position: { x, y },
-            nativeEvent: event
-          });
-        } catch (error) {
-          console.error('[PanRecognizer] onStart error:', error);
-        }
-      }
-    }
-
-    // Update during pan
-    if (this.isPanning) {
-      const deltaX = x - this.lastX;
-      const deltaY = y - this.lastY;
-
-      this.lastX = x;
-      this.lastY = y;
-
-      // Call onUpdate
-      if (this.onUpdate) {
-        try {
-          this.onUpdate({
-            type: 'panupdate',
-            position: { x, y },
-            delta: { dx: deltaX, dy: deltaY },
-            totalDelta: { dx, dy },
-            nativeEvent: event
-          });
-        } catch (error) {
-          console.error('[PanRecognizer] onUpdate error:', error);
-        }
-      }
-    }
-  }
-
-  handleUp(event) {
-    if (this.isPanning) {
-      const x = this.getX(event);
-      const y = this.getY(event);
-
-      const dx = x - this.startX;
-      const dy = y - this.startY;
-
-      // Call onEnd first
-      if (this.onEnd) {
-        try {
-          this.onEnd({
-            type: 'panend',
-            position: { x, y },
-            totalDelta: { dx, dy },
-            nativeEvent: event
-          });
-        } catch (error) {
-          console.error('[PanRecognizer] onEnd error:', error);
-        }
-      }
-
-      // Then call main callback via recognize()
-      this.recognize({
-        type: 'pan',
-        start: { x: this.startX, y: this.startY },
-        end: { x, y },
-        delta: { dx, dy },
-        nativeEvent: event
-      });
-    }
-
-    this.reset();
-    this.isPanning = false;
-  }
-  handleCancel() {
-    if (this.isPanning && this.onEnd) {
-      try {
-        this.onEnd({
-          type: 'pancancel',
-          position: { x: this.lastX, y: this.lastY }
-        });
-      } catch (error) {
-        console.error('[PanRecognizer] onEnd (cancel) error:', error);
-      }
-    }
-
-    this.fail();
-    this.reset();
-    this.isPanning = false;
-  }
-
-  getX(event) {
-    return event.clientX || event.touches?.[0]?.clientX || 0;
-  }
-
-  getY(event) {
-    return event.clientY || event.touches?.[0]?.clientY || 0;
-  }
-}
-
-/**
- * Scale (Pinch) Gesture Recognizer
- * 
- * Detects pinch-to-zoom gestures (two-finger)
- */
-class ScaleRecognizer extends GestureRecognizer {
-  constructor(callback, options = {}) {
-    super(callback, options);
-
-    // Configuration
-    this.minScale = options.minScale || 0.5;
-    this.maxScale = options.maxScale || 2.0;
-
-    // State
-    this.initialDistance = null;
-    this.currentDistance = null;
-    this.isScaling = false;
-
-    // Callbacks
-    this.onStart = options.onStart || null;
-    this.onUpdate = options.onUpdate || null;
-    this.onEnd = options.onEnd || null;
-  }
-
-  handleEvent(eventType, event) {
-    if (this.disposed) return;
-
-    // Only handle touch events (requires 2 touches)
-    if (!event.touches || event.touches.length < 2) {
-      if (this.isScaling) {
-        this.handleEnd(event);
-      }
-      return;
-    }
-
-    switch (eventType) {
-      case 'touchstart':
-        this.handleStart(event);
-        break;
-
-      case 'touchmove':
-        this.handleMove(event);
-        break;
-
-      case 'touchend':
-      case 'touchcancel':
-        this.handleEnd(event);
-        break;
-    }
-  }
-
-  handleStart(event) {
-    if (event.touches.length !== 2) return;
-
-    this.state = 'possible';
-    this.initialDistance = this.getDistance(event.touches[0], event.touches[1]);
-    this.currentDistance = this.initialDistance;
-    this.isScaling = true;
-
-    // Call onStart
-    if (this.onStart) {
-      try {
-        this.onStart({
-          type: 'scalestart',
-          scale: 1.0,
-          nativeEvent: event
-        });
-      } catch (error) {
-        console.error('[ScaleRecognizer] onStart error:', error);
-      }
-    }
-  }
-
-  handleMove(event) {
-    if (!this.isScaling || event.touches.length !== 2) return;
-
-    this.state = 'recognized';
-
-    const distance = this.getDistance(event.touches[0], event.touches[1]);
-    this.currentDistance = distance;
-
-    const scale = distance / this.initialDistance;
-
-    // Clamp scale
-    const clampedScale = Math.max(this.minScale, Math.min(this.maxScale, scale));
-
-    // Call onUpdate
-    if (this.onUpdate) {
-      try {
-        this.onUpdate({
-          type: 'scaleupdate',
-          scale: clampedScale,
-          rawScale: scale,
-          nativeEvent: event
-        });
-      } catch (error) {
-        console.error('[ScaleRecognizer] onUpdate error:', error);
-      }
-    }
-  }
-  handleEnd(event) {
-    if (!this.isScaling) return;
-
-    const scale = this.currentDistance / this.initialDistance;
-    const clampedScale = Math.max(this.minScale, Math.min(this.maxScale, scale));
-
-    // Call onEnd first
-    if (this.onEnd) {
-      try {
-        this.onEnd({
-          type: 'scaleend',
-          scale: clampedScale,
-          rawScale: scale,
-          nativeEvent: event
-        });
-      } catch (error) {
-        console.error('[ScaleRecognizer] onEnd error:', error);
-      }
-    }
-
-    // Then call main callback via recognize()
-    this.recognize({
-      type: 'scale',
-      scale: clampedScale,
-      rawScale: scale,
-      nativeEvent: event
-    });
-
-    this.reset();
-    this.isScaling = false;
-    this.initialDistance = null;
-    this.currentDistance = null;
-  }
-
-  getDistance(touch1, touch2) {
-    const dx = touch2.clientX - touch1.clientX;
-    const dy = touch2.clientY - touch1.clientY;
-    return Math.sqrt(dx * dx + dy * dy);
-  }
-}
-
-/**
- * Gesture Arena
- * 
- * Manages multiple gesture recognizers and resolves conflicts
- */
-class GestureArena {
-  constructor() {
-    this.recognizers = new Map(); // elementId -> recognizer[]
-  }
-
-  /**
-   * Register recognizer for element
-   */
-  register(elementId, recognizer) {
-    if (!this.recognizers.has(elementId)) {
-      this.recognizers.set(elementId, []);
-    }
-
-    this.recognizers.get(elementId).push(recognizer);
-  }
-
-  /**
-   * Unregister all recognizers for element
-   */
-  unregister(elementId) {
-    const recognizers = this.recognizers.get(elementId);
-    if (recognizers) {
-      recognizers.forEach(r => r.dispose());
-      this.recognizers.delete(elementId);
-    }
-  }
-
-  /**
-   * Handle event for element
-   */
-  handleEvent(elementId, eventType, event) {
-    const recognizers = this.recognizers.get(elementId);
-    if (!recognizers) return;
-
-    // Pass event to all active recognizers
-    recognizers.forEach(recognizer => {
-      if (!recognizer.isDisposed && recognizer.state !== 'failed') {
-        recognizer.handleEvent(eventType, event);
-      }
-    });
-  }
-
-  /**
-   * Get recognizers for element
-   */
-  getRecognizers(elementId) {
-    return this.recognizers.get(elementId) || [];
-  }
-
-  /**
-   * Clear all recognizers
-   */
-  clear() {
-    this.recognizers.forEach((recognizers) => {
-      recognizers.forEach(r => r.dispose());
-    });
-    this.recognizers.clear();
-  }
-
-  /**
-   * Get statistics
-   */
-  getStats() {
-    let totalRecognizers = 0;
-    this.recognizers.forEach(recognizers => {
-      totalRecognizers += recognizers.length;
-    });
-
-    return {
-      elements: this.recognizers.size,
-      totalRecognizers: totalRecognizers
-    };
-  }
-}
-
-/**
- * Main Gesture Manager
- * 
- * Central system for managing all gestures in the application
- */
-class GestureManager {
-  constructor() {
-    this.arena = new GestureArena();
-  }
-
-  /**
-   * Register tap gesture
-   */
-  registerTap(elementId, callback, options = {}) {
-    const recognizer = new TapRecognizer(callback, options);
-    this.arena.register(elementId, recognizer);
-    return recognizer;
-  }
-
-  /**
-   * Register double tap gesture
-   */
-  registerDoubleTap(elementId, callback, options = {}) {
-    const recognizer = new TapRecognizer(callback, {
-      ...options,
-      minTaps: 2,
-      maxTaps: 2
-    });
-    this.arena.register(elementId, recognizer);
-    return recognizer;
-  }
-
-  /**
-   * Register long press gesture
-   */
-  registerLongPress(elementId, callback, options = {}) {
-    const recognizer = new LongPressRecognizer(callback, options);
-    this.arena.register(elementId, recognizer);
-    return recognizer;
-  }
-
-  /**
-   * Register swipe gesture
-   */
-  registerSwipe(elementId, callback, options = {}) {
-    const recognizer = new SwipeRecognizer(callback, options);
-    this.arena.register(elementId, recognizer);
-    return recognizer;
-  }
-
-  /**
-   * Register pan gesture
-   */
-  registerPan(elementId, callback, options = {}) {
-    const recognizer = new PanRecognizer(callback, options);
-    this.arena.register(elementId, recognizer);
-    return recognizer;
-  }
-
-  /**
-   * Register scale (pinch) gesture
-   */
-  registerScale(elementId, callback, options = {}) {
-    const recognizer = new ScaleRecognizer(callback, options);
-    this.arena.register(elementId, recognizer);
-    return recognizer;
-  }
-
-  /**
-   * Handle pointer/touch event
-   */
-  handleEvent(elementId, eventType, event) {
-    this.arena.handleEvent(elementId, eventType, event);
-  }
-
-  /**
-   * Unregister all gestures for element
-   */
-  unregisterAll(elementId) {
-    this.arena.unregister(elementId);
-  }
-
-  /**
-   * Get statistics
-   */
-  getStats() {
-    return this.arena.getStats();
-  }
-
-  /**
-   * Cleanup
-   */
-  dispose() {
-    this.arena.clear();
-  }
-}
-
-export {
-  GestureRecognizer,
-  TapRecognizer,
-  LongPressRecognizer,
-  SwipeRecognizer,
-  PanRecognizer,
-  ScaleRecognizer,
-  GestureArena,
-  GestureManager
-};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/src/inherited_element.js b/packages/flutterjs_engine/src/runtime/src/inherited_element.js
deleted file mode 100644
index dfd2cf6e..00000000
--- a/packages/flutterjs_engine/src/runtime/src/inherited_element.js
+++ /dev/null
@@ -1,677 +0,0 @@
-/**
- * FlutterJS InheritedElement
- *
- * Element for InheritedWidget. Manages dependency propagation down the widget tree.
- * InheritedWidget allows efficient value passing without prop drilling.
- *
- * Key Features:
- * - Track dependent elements
- * - Notify dependents on value changes
- * - Automatic rebuilds only for affected descendants
- * - Memory efficient cleanup
- *
- * Usage:
- * ```javascript
- * class Theme extends InheritedWidget {
- *   constructor({ data, child, key }) {
- *     super({ child, key });
- *     this.data = data;
- *   }
- *
- *   updateShouldNotify(oldWidget) {
- *     return this.data !== oldWidget.data;
- *   }
- *
- *   static of(context) {
- *     return context.dependOnInheritedWidgetOfExactType(Theme);
- *   }
- * }
- * ```
- */
-
-import { Element } from './element.js';
-
-/**
- * InheritedElement Class
- *
- * Represents a live instance of an InheritedWidget in the element tree.
- * Manages which elements depend on this InheritedWidget's value.
- */
-class InheritedElement extends Element {
-  /**
-   * Create InheritedElement
-   * @param {InheritedWidget} widget - The widget
-   * @param {Element|null} parent - Parent element
-   * @param {RuntimeEngine} runtime - Runtime engine
-   */
-  constructor(widget, parent, runtime) {
-    super(widget, parent, runtime);
-
-    // Track elements that depend on this InheritedWidget's value
-    this.dependents = new Set();
-
-    // Cache the inherited value for quick access
-    this._inheritedValue = widget.data || widget.value || null;
-
-    // Track if we're in process of notifying dependents
-    this._notifying = false;
-
-    if (this.runtime?.debugMode) {
-      console.log(`[InheritedElement] Created ${widget.constructor.name}`);
-    }
-  }
-
-  /**
-   * Build the InheritedWidget's child
-   * InheritedWidget typically just wraps a child without additional rendering
-   *
-   * @returns {VNode} VNode for the child widget
-   */
-  build() {
-    if (!this.widget.child) {
-      throw new Error('InheritedWidget must have a child widget');
-    }
-
-    // ✅ FIX: Convert child widget to element and build it
-    const childWidget = this.widget.child;
-
-    // Check if child is already a VNode
-    if (childWidget && typeof childWidget === 'object' && childWidget.tag) {
-      // Already a VNode
-      return {
-        tag: 'div',
-        props: {
-          'data-widget': this.widget.constructor.name,
-          'data-element-id': this.id,
-          class: 'fjs-inherited-widget-wrapper'
-        },
-        children: [childWidget],
-        metadata: {
-          isInheritedWidget: true,
-          widgetType: this.widget.constructor.name
-        }
-      };
-    }
-
-    // ✅ CRITICAL: If it's a widget, convert to element and build
-    if (childWidget && typeof childWidget === 'object' &&
-      (childWidget.build || childWidget.createState || childWidget.render)) {
-
-      // Reuse existing element if possible
-      if (this._childElement) {
-        if (this._childElement.shouldRebuild(this._childElement.widget, childWidget)) {
-          this._childElement.updateWidget(childWidget);
-        } else {
-          this._childElement.widget = childWidget;
-          this._childElement.markNeedsBuild();
-        }
-      } else {
-        // Create new element
-        this._childElement = this.runtime.createElement(childWidget, this);
-        if (!this._childElement) {
-          throw new Error('Failed to create element from child widget');
-        }
-
-        // Register properly
-        this.addChild(this._childElement);
-
-        // Mount
-        if (!this._childElement.mounted) {
-          this._childElement.mount();
-        }
-      }
-
-      // Return the child's VNode (from the stable element)
-      const childVNode = this._childElement.vnode || this._childElement.build();
-
-      return {
-        tag: 'div',
-        props: {
-          'data-widget': this.widget.constructor.name,
-          'data-element-id': this.id,
-          class: 'fjs-inherited-widget-wrapper'
-        },
-        children: [childVNode],
-        metadata: {
-          isInheritedWidget: true,
-          widgetType: this.widget.constructor.name
-        }
-      };
-    }
-
-    // String or primitive
-    return {
-      tag: 'div',
-      props: {
-        'data-widget': this.widget.constructor.name,
-        'data-element-id': this.id,
-        class: 'fjs-inherited-widget-wrapper'
-      },
-      children: [childWidget],
-      metadata: {
-        isInheritedWidget: true,
-        widgetType: this.widget.constructor.name
-      }
-    };
-  }
-
-  /**
-   * Perform rebuild - required by Element base class
-   * @returns {VNode} VNode for the child widget
-   */
-  performRebuild() {
-    return this.build();
-  }
-
-  /**
-   * Register a dependent element
-   * Called when an element calls dependOnInheritedWidgetOfExactType
-   *
-   * @param {Element} element - Element that depends on this InheritedWidget
-   * @throws {Error} If element is null
-   */
-  addDependent(element) {
-    if (!element) {
-      throw new Error('Cannot add null element as dependent');
-    }
-
-    if (this.dependents.has(element)) {
-      if (this.runtime?.debugMode) {
-        console.warn(
-          `[InheritedElement] Element ${element.id} already registered as dependent`
-        );
-      }
-      return;
-    }
-
-    this.dependents.add(element);
-
-    if (this.runtime?.debugMode) {
-      console.log(
-        `[InheritedElement] Added dependent ${element.id} ` +
-        `(total: ${this.dependents.size})`
-      );
-    }
-  }
-
-  /**
-   * Remove a dependent element
-   * Called during cleanup
-   *
-   * @param {Element} element - Element to remove
-   */
-  removeDependent(element) {
-    if (!element) return;
-
-    const removed = this.dependents.delete(element);
-
-    if (removed && this.runtime?.debugMode) {
-      console.log(
-        `[InheritedElement] Removed dependent ${element.id} ` +
-        `(remaining: ${this.dependents.size})`
-      );
-    }
-  }
-
-  /**
-   * Check if element is a dependent
-   *
-   * @param {Element} element - Element to check
-   * @returns {boolean} True if element is dependent
-   */
-  hasDependent(element) {
-    return this.dependents.has(element);
-  }
-
-  /**
-   * Get number of dependents
-   *
-   * @returns {number} Count of dependent elements
-   */
-  get dependentCount() {
-    return this.dependents.size;
-  }
-
-  /**
-   * Update the InheritedWidget with new widget
-   * Checks if value changed, notifies dependents if needed
-   *
-   * @param {InheritedWidget} newWidget - New widget with potentially new data
-   */
-  update(newWidget) {
-    const oldWidget = this.widget;
-
-    // Call parent update
-    super.update(newWidget);
-
-    // Cache new value
-    const newValue = newWidget.data || newWidget.value || null;
-    const oldValue = this._inheritedValue;
-
-    this._inheritedValue = newValue;
-
-    // Check if we should notify dependents
-    if (this.widget.updateShouldNotify) {
-      try {
-        const shouldNotify = this.widget.updateShouldNotify(oldWidget);
-
-        if (shouldNotify) {
-          if (this.runtime?.debugMode) {
-            console.log(
-              `[InheritedElement] Value changed, notifying ${this.dependents.size} dependents`
-            );
-          }
-
-          this.notifyDependents();
-        } else if (this.runtime?.debugMode) {
-          console.log(
-            `[InheritedElement] Value changed but updateShouldNotify returned false`
-          );
-        }
-      } catch (error) {
-        console.error(
-          `[InheritedElement] Error in updateShouldNotify: ${error.message}`
-        );
-      }
-    }
-  }
-
-  /**
-   * Notify all dependent elements to rebuild
-   * Only notifies elements that are still mounted
-   */
-  notifyDependents() {
-    // Prevent recursive notifications
-    if (this._notifying) {
-      if (this.runtime?.debugMode) {
-        console.warn('[InheritedElement] Recursive notification detected, skipping');
-      }
-      return;
-    }
-
-    this._notifying = true;
-
-    try {
-      const startTime = this.runtime?.debugMode ? performance.now() : 0;
-      let notifiedCount = 0;
-
-      // Notify each dependent
-      for (const element of this.dependents) {
-        if (element.mounted && !element.dirty) {
-          element.markNeedsBuild();
-          notifiedCount++;
-        } else if (!element.mounted && this.runtime?.debugMode) {
-          console.warn(
-            `[InheritedElement] Dependent ${element.id} is not mounted, skipping`
-          );
-        }
-      }
-
-      if (this.runtime?.debugMode) {
-        const duration = performance.now() - startTime;
-        console.log(
-          `[InheritedElement] Notified ${notifiedCount} dependents in ${duration.toFixed(2)}ms`
-        );
-      }
-    } finally {
-      this._notifying = false;
-    }
-  }
-
-  /**
-   * Notify specific dependents (optimization)
-   * Use when you know only certain dependents need rebuild
-   *
-   * @param {Set<Element>} elements - Elements to notify
-   */
-  notifySpecificDependents(elements) {
-    if (this._notifying) return;
-
-    this._notifying = true;
-
-    try {
-      for (const element of elements) {
-        if (this.dependents.has(element) && element.mounted && !element.dirty) {
-          element.markNeedsBuild();
-        }
-      }
-    } finally {
-      this._notifying = false;
-    }
-  }
-
-  /**
-   * Mount element - initialize dependent tracking
-   */
-  mount() {
-    super.mount();
-
-    if (this.runtime?.debugMode) {
-      console.log(
-        `[InheritedElement] Mounted ${this.widget.constructor.name} ` +
-        `with ${this.dependents.size} dependents`
-      );
-    }
-  }
-
-  /**
-   * Unmount element - cleanup all dependent tracking
-   */
-  unmount() {
-    // Clear all dependent references
-    const dependentCount = this.dependents.size;
-
-    this.dependents.forEach(element => {
-      if (element.mounted) {
-        // Don't rebuild, just remove from tracking
-        element._inheritedDependencies?.delete(this.id);
-      }
-    });
-
-    this.dependents.clear();
-
-    if (this.runtime?.debugMode) {
-      console.log(
-        `[InheritedElement] Unmounted ${this.widget.constructor.name} ` +
-        `(cleaned up ${dependentCount} dependents)`
-      );
-    }
-
-    super.unmount();
-  }
-
-  /**
-   * Get statistics about this InheritedElement
-   *
-   * @returns {Object} Statistics object
-   */
-  getStats() {
-    const stats = super.getStats();
-
-    return {
-      ...stats,
-      type: 'InheritedElement',
-      inheritedValue: this._inheritedValue,
-      dependentCount: this.dependents.size,
-      dependents: Array.from(this.dependents).map(el => ({
-        id: el.id,
-        type: el.constructor.name,
-        mounted: el.mounted
-      }))
-    };
-  }
-}
-
-/**
- * Base InheritedWidget Class
- *
- * Widgets that provide values to their descendants.
- * Descendants access the value via context.dependOnInheritedWidgetOfExactType()
- */
-class InheritedWidget {
-  /**
-   * Create InheritedWidget
-   * @param {Object} options - Widget options
-   * @param {Widget} options.child - Child widget to wrap
-   * @param {*} options.data - Value to provide (alternative to override in subclass)
-   * @param {*} options.value - Value to provide (preferred)
-   * @param {string} options.key - Widget key for reconciliation
-   */
-  constructor({ child, data, value, key } = {}) {
-    if (!child) {
-      throw new Error('InheritedWidget requires a child widget');
-    }
-
-    this.child = child;
-    this.data = data || value || null;
-    this.key = key;
-    this.type = 'InheritedWidget';
-  }
-
-  /**
-   * Determine if dependents should be notified of update
-   * Override in subclasses to optimize notifications
-   *
-   * @param {InheritedWidget} oldWidget - Previous widget
-   * @returns {boolean} True if dependents should rebuild
-   *
-   * @example
-   * updateShouldNotify(oldWidget) {
-   *   return this.data.theme !== oldWidget.data.theme;
-   * }
-   */
-  updateShouldNotify(oldWidget) {
-    // Default: always notify on any change
-    return this.data !== oldWidget.data;
-  }
-
-  /**
-   * Static helper to access this InheritedWidget from descendant
-   * Subclasses should override this
-   *
-   * @param {BuildContext} context - Build context
-   * @returns {InheritedWidget|null} This widget instance or null
-   *
-   * @example
-   * class Theme extends InheritedWidget {
-   *   static of(context) {
-   *     return context.dependOnInheritedWidgetOfExactType(Theme);
-   *   }
-   * }
-   *
-   * // Usage
-   * const theme = Theme.of(context);
-   */
-  static of(context) {
-    return context.dependOnInheritedWidgetOfExactType(this);
-  }
-
-  /**
-   * Create element for this widget
-   * Override to customize element type
-   *
-   * @param {Element} parent - Parent element
-   * @param {RuntimeEngine} runtime - Runtime engine
-   * @returns {Element} Element instance
-   */
-  createElement(parent, runtime) {
-    return new InheritedElement(this, parent, runtime);
-  }
-}
-
-/**
- * ChangeNotifier - Allows imperative value updates
- *
- * Subclass this to create data classes that notify listeners of changes.
- * More efficient than InheritedWidget for frequently changing values.
- */
-class ChangeNotifier {
-  constructor() {
-    this.listeners = new Set();
-  }
-
-  /**
-   * Add listener
-   * @param {Function} listener - Callback called on change
-   */
-  addListener(listener) {
-    if (typeof listener !== 'function') {
-      throw new Error('Listener must be a function');
-    }
-    this.listeners.add(listener);
-  }
-
-  /**
-   * Remove listener
-   * @param {Function} listener - Listener to remove
-   */
-  removeListener(listener) {
-    this.listeners.delete(listener);
-  }
-
-  /**
-   * Remove all listeners
-   */
-  removeAllListeners() {
-    this.listeners.clear();
-  }
-
-  /**
-   * Notify all listeners of change
-   * Call this when data changes
-   */
-  notifyListeners() {
-    for (const listener of this.listeners) {
-      try {
-        listener();
-      } catch (error) {
-        console.error('[ChangeNotifier] Listener error:', error);
-      }
-    }
-  }
-
-  /**
-   * Check if has listeners
-   * @returns {boolean} True if any listeners registered
-   */
-  hasListeners() {
-    return this.listeners.size > 0;
-  }
-
-  /**
-   * Get listener count
-   * @returns {number} Number of listeners
-   */
-  get listenerCount() {
-    return this.listeners.size;
-  }
-
-  /**
-   * Dispose - cleanup all listeners
-   */
-  dispose() {
-    this.listeners.clear();
-  }
-}
-
-/**
- * ValueNotifier - Simple ChangeNotifier for single values
- *
- * Efficient way to manage a single reactive value.
- */
-class ValueNotifier extends ChangeNotifier {
-  /**
-   * Create ValueNotifier
-   * @param {*} initialValue - Initial value
-   */
-  constructor(initialValue) {
-    super();
-    this._value = initialValue;
-  }
-
-  /**
-   * Get current value
-   */
-  get value() {
-    return this._value;
-  }
-
-  /**
-   * Set value and notify listeners
-   */
-  set value(newValue) {
-    if (this._value !== newValue) {
-      this._value = newValue;
-      this.notifyListeners();
-    }
-  }
-
-  /**
-   * Get value
-   * @returns {*} Current value
-   */
-  getValue() {
-    return this._value;
-  }
-
-  /**
-   * Set value with optional notification
-   * @param {*} newValue - New value
-   * @param {boolean} notify - Whether to notify listeners (default: true)
-   */
-  setValue(newValue, notify = true) {
-    if (this._value !== newValue) {
-      this._value = newValue;
-      if (notify) {
-        this.notifyListeners();
-      }
-    }
-  }
-}
-
-/**
- * Provider Widget - Helper for dependency injection
- *
- * Combines InheritedWidget with ChangeNotifier for reactive data.
- */
-class Provider extends InheritedWidget {
-  /**
-   * Create Provider
-   * @param {Object} options
-   * @param {ChangeNotifier} options.notifier - ChangeNotifier instance
-   * @param {*} options.value - Static value (if not using notifier)
-   * @param {Widget} options.child - Child widget
-   * @param {string} options.key - Widget key
-   */
-  constructor({ notifier, value, child, key } = {}) {
-    super({ child, data: value, key });
-
-    if (notifier && !(notifier instanceof ChangeNotifier)) {
-      throw new Error('Provider requires a ChangeNotifier instance');
-    }
-
-    this.notifier = notifier;
-    this.listeners = [];
-  }
-
-  /**
-   * Only notify if notifier value actually changed
-   * @param {Provider} oldWidget - Previous widget
-   * @returns {boolean} Whether to notify
-   */
-  updateShouldNotify(oldWidget) {
-    // If using notifier, let it handle notifications
-    if (this.notifier && oldWidget.notifier === this.notifier) {
-      return false;
-    }
-
-    // If values are different, notify
-    return this.data !== oldWidget.data;
-  }
-
-  /**
-   * Get current provided value
-   * @returns {*} The value being provided
-   */
-  getValue() {
-    return this.notifier ? this.notifier.value : this.data;
-  }
-
-  /**
-   * Static helper to access provider
-   * @param {BuildContext} context
-   * @returns {Provider|null}
-   */
-  static of(context) {
-    return context.dependOnInheritedWidgetOfExactType(Provider);
-  }
-}
-
-
-export {
-  InheritedElement,
-  InheritedWidget,
-  ChangeNotifier,
-  ValueNotifier,
-  Provider
-};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/src/runtime_engine.js b/packages/flutterjs_engine/src/runtime/src/runtime_engine.js
deleted file mode 100644
index baea4657..00000000
--- a/packages/flutterjs_engine/src/runtime/src/runtime_engine.js
+++ /dev/null
@@ -1,453 +0,0 @@
-/**
- * FlutterJS Runtime Engine
- * 
- * Core runtime that manages widget lifecycle, element tree, and coordinates
- * all system operations. This is the heart of the FlutterJS framework.
- * 
- * Responsibilities:
- * - Mount and unmount applications
- * - Create and manage element tree
- * - Schedule and perform updates
- * - Track dirty elements
- * - Coordinate with service registry
- * - Memory management
- */
-
-// Import Element classes from element.js
-import {
-  Element,
-  StatelessElement,
-  StatefulElement,
-
-  ComponentElement
-} from "../src/element.js";
-
-import {  InheritedElement,} from "../src/inherited_element.js";
-
-class RuntimeEngine {
-  constructor() {
-    // Root references
-    this.rootElement = null;           // Root DOM element
-    this.rootWidget = null;            // Root widget (e.g., MyApp)
-    this.elementTree = null;           // Root element instance
-    
-    // Update management
-    this.dirtyElements = new Set();    // Elements needing rebuild
-    this.updateScheduled = false;      // Update queued?
-    this.isUpdating = false;           // Currently performing update?
-    
-    // Context and services
-    this.buildContext = null;          // Global context
-    this.serviceRegistry = new Map();  // Framework services
-    
-    // Performance tracking
-    this.frameCounter = 0;
-    this.buildTime = 0;
-    this.renderTime = 0;
-    this.lastUpdateTime = 0;
-    
-    // State
-    this.mounted = false;
-    this.disposed = false;
-    
-    // Configuration
-    this.config = {
-      batchUpdates: true,
-      debugMode: false,
-      performanceMonitoring: true
-    };
-  }
-  
-  /**
-   * Initialize and mount application
-   * @param {Widget} rootWidget - Root widget of the application
-   * @param {HTMLElement} containerElement - DOM container to mount into
-   * @returns {RuntimeEngine} this instance for chaining
-   */
-  mount(rootWidget, containerElement) {
-    if (this.mounted) {
-      throw new Error('Runtime already mounted. Call unmount() first.');
-    }
-    
-    if (!rootWidget) {
-      throw new Error('Root widget is required');
-    }
-    
-    if (!containerElement || !(containerElement instanceof HTMLElement)) {
-      throw new Error('Valid container element is required');
-    }
-    
-    try {
-      this.rootWidget = rootWidget;
-      this.rootElement = containerElement;
-      
-      // Create root element from widget
-      this.elementTree = this.createElement(rootWidget, null);
-      
-      if (!this.elementTree) {
-        throw new Error('Failed to create root element');
-      }
-      
-      // Build initial VNode tree
-      const startBuild = performance.now();
-      const vnode = this.elementTree.build();
-      this.buildTime = performance.now() - startBuild;
-      
-      if (!vnode) {
-        throw new Error('Root element build() returned null');
-      }
-      
-      // Render to DOM
-      const startRender = performance.now();
-      this.renderVNode(vnode, containerElement);
-      this.renderTime = performance.now() - startRender;
-      
-      // Store DOM reference in element
-      this.elementTree.domNode = containerElement.firstChild;
-      
-      // Mount element tree (calls lifecycle hooks)
-      this.elementTree.mount();
-      
-      this.mounted = true;
-      
-      if (this.config.debugMode) {
-        console.log(`[RuntimeEngine] Mounted in ${(this.buildTime + this.renderTime).toFixed(2)}ms`);
-        console.log(`  - Build: ${this.buildTime.toFixed(2)}ms`);
-        console.log(`  - Render: ${this.renderTime.toFixed(2)}ms`);
-      }
-      
-      return this;
-    } catch (error) {
-      this.cleanup();
-      throw new Error(`Failed to mount application: ${error.message}`);
-    }
-  }
-  
-  /**
-   * Create element from widget
-   * @param {Widget} widget - Widget to create element for
-   * @param {Element|null} parent - Parent element
-   * @returns {Element} Created element instance
-   */
-  createElement(widget, parent) {
-    if (!widget) {
-      throw new Error('Widget is required');
-    }
-    
-    // Check if widget has custom element creation
-    if (typeof widget.createElement === 'function') {
-      return widget.createElement(parent, this);
-    }
-    
-    // Determine element type based on widget class name
-    const widgetType = widget.constructor.name;
-    
-    // Check for StatelessWidget
-    if (this.isStatelessWidget(widget)) {
-      return new StatelessElement(widget, parent, this);
-    }
-    
-    // Check for StatefulWidget
-    if (this.isStatefulWidget(widget)) {
-      return new StatefulElement(widget, parent, this);
-    }
-    
-    // Check for InheritedWidget
-    if (this.isInheritedWidget(widget)) {
-      return new InheritedElement(widget, parent, this);
-    }
-    
-    // Check for custom component
-    if (this.isComponentWidget(widget)) {
-      return new ComponentElement(widget, parent, this);
-    }
-    
-    throw new Error(`Unknown widget type: ${widgetType}. Widget must extend StatelessWidget, StatefulWidget, InheritedWidget, or have render/build method.`);
-  }
-  
-  /**
-   * Check if widget is StatelessWidget
-   */
-  isStatelessWidget(widget) {
-    return widget.constructor.name === 'StatelessWidget' || 
-           (widget.constructor.prototype && 
-            widget.constructor.prototype.constructor.name === 'StatelessWidget') ||
-           (typeof widget.build === 'function' && !widget.createState && !widget.child);
-  }
-  
-  /**
-   * Check if widget is StatefulWidget
-   */
-  isStatefulWidget(widget) {
-    return widget.constructor.name === 'StatefulWidget' ||
-           (widget.constructor.prototype && 
-            widget.constructor.prototype.constructor.name === 'StatefulWidget') ||
-           (typeof widget.createState === 'function');
-  }
-  
-  /**
-   * Check if widget is InheritedWidget
-   */
-  isInheritedWidget(widget) {
-    return widget.constructor.name === 'InheritedWidget' ||
-           (widget.constructor.prototype && 
-            widget.constructor.prototype.constructor.name === 'InheritedWidget') ||
-           (widget.child !== undefined && typeof widget.updateShouldNotify === 'function');
-  }
-  
-  /**
-   * Check if widget is a custom component
-   */
-  isComponentWidget(widget) {
-    return typeof widget.render === 'function' || 
-           (typeof widget.build === 'function' && 
-            typeof widget.createState !== 'function');
-  }
-  
-  /**
-   * Render VNode to DOM (simple implementation)
-   */
-  renderVNode(vnode, container) {
-    if (!vnode) return;
-    
-    if (typeof vnode === 'string') {
-      container.textContent = vnode;
-      return;
-    }
-    
-    const element = document.createElement(vnode.tag || 'div');
-    
-    // Apply props
-    if (vnode.props) {
-      Object.entries(vnode.props).forEach(([key, value]) => {
-        if (key === 'className') {
-          element.className = value;
-        } else if (key === 'style' && typeof value === 'object') {
-          Object.assign(element.style, value);
-        } else if (!key.startsWith('data-')) {
-          element.setAttribute(key, value);
-        } else {
-          element.setAttribute(key, value);
-        }
-      });
-    }
-    
-    // Apply inline style
-    if (vnode.style) {
-      Object.assign(element.style, vnode.style);
-    }
-    
-    // Render children
-    if (vnode.children) {
-      vnode.children.forEach(child => {
-        if (typeof child === 'string') {
-          element.appendChild(document.createTextNode(child));
-        } else if (child) {
-          const childContainer = document.createElement('div');
-          this.renderVNode(child, childContainer);
-          if (childContainer.firstChild) {
-            element.appendChild(childContainer.firstChild);
-          }
-        }
-      });
-    }
-    
-    container.appendChild(element);
-  }
-  
-  /**
-   * Schedule element for rebuild
-   * @param {Element} element - Element that needs rebuild
-   */
-  markNeedsBuild(element) {
-    if (!element) {
-      console.warn('[RuntimeEngine] markNeedsBuild called with null element');
-      return;
-    }
-    
-    if (!this.mounted) {
-      if (this.config.debugMode) {
-        console.warn('[RuntimeEngine] markNeedsBuild called but runtime not mounted');
-      }
-      return;
-    }
-    
-    this.dirtyElements.add(element);
-    this.scheduleUpdate();
-  }
-  
-  /**
-   * Schedule update on next frame
-   */
-  scheduleUpdate() {
-    if (this.updateScheduled) return;
-    if (this.disposed) return;
-    
-    this.updateScheduled = true;
-    
-    requestAnimationFrame(() => {
-      this.performUpdate();
-    });
-  }
-  
-  /**
-   * Perform update - rebuild dirty elements
-   */
-  performUpdate() {
-    if (this.disposed) return;
-    if (this.isUpdating) {
-      // Already updating, reschedule
-      this.updateScheduled = true;
-      return;
-    }
-    
-    this.updateScheduled = false;
-    this.isUpdating = true;
-    
-    try {
-      const startTime = performance.now();
-      
-      // Get elements to rebuild
-      const elements = Array.from(this.dirtyElements);
-      
-      if (elements.length === 0) {
-        this.isUpdating = false;
-        return;
-      }
-      
-      // Sort by depth (parents before children)
-      elements.sort((a, b) => a.depth - b.depth);
-      
-      // Rebuild each dirty element
-      for (const element of elements) {
-        if (element.mounted && this.dirtyElements.has(element)) {
-          try {
-            element.rebuild();
-          } catch (error) {
-            console.error(`[RuntimeEngine] Error rebuilding element:`, error);
-            // Continue with other elements
-          }
-        }
-      }
-      
-      // Clear dirty elements
-      this.dirtyElements.clear();
-      
-      // Track performance
-      this.buildTime = performance.now() - startTime;
-      this.lastUpdateTime = Date.now();
-      this.frameCounter++;
-      
-      if (this.config.performanceMonitoring && this.buildTime > 16) {
-        console.warn(`[RuntimeEngine] Slow update: ${this.buildTime.toFixed(2)}ms (${elements.length} elements)`);
-      }
-      
-      if (this.config.debugMode) {
-        console.log(`[RuntimeEngine] Updated ${elements.length} elements in ${this.buildTime.toFixed(2)}ms`);
-      }
-    } finally {
-      this.isUpdating = false;
-      
-      // If more updates were scheduled during update, process them
-      if (this.updateScheduled && this.dirtyElements.size > 0) {
-        this.scheduleUpdate();
-      }
-    }
-  }
-  
-  /**
-   * Unmount entire application
-   */
-  unmount() {
-    if (!this.mounted) {
-      console.warn('[RuntimeEngine] unmount called but not mounted');
-      return;
-    }
-    
-    try {
-      if (this.elementTree) {
-        this.elementTree.unmount();
-        this.elementTree = null;
-      }
-      
-      this.cleanup();
-      
-      if (this.config.debugMode) {
-        console.log('[RuntimeEngine] Unmounted');
-      }
-    } catch (error) {
-      console.error('[RuntimeEngine] Error during unmount:', error);
-    }
-  }
-  
-  /**
-   * Cleanup internal state
-   */
-  cleanup() {
-    this.dirtyElements.clear();
-    this.serviceRegistry.clear();
-    this.mounted = false;
-    this.updateScheduled = false;
-    this.isUpdating = false;
-  }
-  
-  /**
-   * Dispose runtime (cannot be used after this)
-   */
-  dispose() {
-    if (this.disposed) return;
-    
-    this.unmount();
-    
-    this.rootElement = null;
-    this.rootWidget = null;
-    this.buildContext = null;
-    
-    this.disposed = true;
-    
-    if (this.config.debugMode) {
-      console.log('[RuntimeEngine] Disposed');
-    }
-  }
-  
-  /**
-   * Get performance statistics
-   */
-  getStats() {
-    return {
-      mounted: this.mounted,
-      frameCount: this.frameCounter,
-      buildTime: this.buildTime,
-      renderTime: this.renderTime,
-      lastUpdateTime: this.lastUpdateTime,
-      dirtyElements: this.dirtyElements.size,
-      updateScheduled: this.updateScheduled
-    };
-  }
-  
-  /**
-   * Register a service
-   */
-  registerService(name, service) {
-    this.serviceRegistry.set(name, service);
-  }
-  
-  /**
-   * Get a service
-   */
-  getService(name) {
-    return this.serviceRegistry.get(name);
-  }
-  
-  /**
-   * Enable/disable debug mode
-   */
-  setDebugMode(enabled) {
-    this.config.debugMode = enabled;
-  }
-}
-
-
-
-export { RuntimeEngine
-    };
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/test/build_context.test.js b/packages/flutterjs_engine/src/runtime/test/build_context.test.js
deleted file mode 100644
index 5f4cc33c..00000000
--- a/packages/flutterjs_engine/src/runtime/test/build_context.test.js
+++ /dev/null
@@ -1,708 +0,0 @@
-/**
- * BuildContext Tests
- * 
- * Test suite for BuildContext class
- * Tests ancestor finding, inherited widgets, services, and element access
- */
-
-// Mock document for Node.js environment
-if (typeof document === 'undefined') {
-  global.document = {
-    createElement: (tag) => ({
-      style: {},
-      offsetWidth: 200,
-      offsetHeight: 100,
-      offsetLeft: 0,
-      offsetTop: 0
-    })
-  };
-}
-
-import { BuildContext } from '../src/build_context.js';
-
-// Mock classes
-class MockWidget {
-  constructor(name) {
-    this.name = name;
-  }
-}
-
-class MockState {
-  constructor(name) {
-    this.name = name;
-  }
-}
-
-class MockElement {
-  constructor(id = 'el_1', widget = null, state = null) {
-    this.id = id;
-    this.widget = widget || new MockWidget('Widget');
-    this.state = state;
-    this.parent = null;
-    this.children = [];
-    this.mounted = true;
-    this.depth = 0;
-    this.domNode = null;
-  }
-}
-
-class MockRuntime {
-  constructor() {
-    this.serviceRegistry = new Map();
-    this._ThemeClass = null;
-    this._MediaQueryClass = null;
-  }
-
-  registerService(name, service) {
-    this.serviceRegistry.set(name, service);
-  }
-}
-
-class MockInheritedElement extends MockElement {
-  constructor(id, widget) {
-    super(id, widget);
-    this.dependents = new Set();
-  }
-
-  addDependent(element) {
-    this.dependents.add(element);
-  }
-}
-
-class MockTheme extends MockWidget {
-  constructor() {
-    super('Theme');
-    this.data = { primaryColor: '#6750a4' };
-  }
-}
-
-class MockMediaQuery extends MockWidget {
-  constructor() {
-    super('MediaQuery');
-    this.data = {
-      size: { width: 1024, height: 768 },
-      orientation: 'landscape'
-    };
-  }
-}
-
-// Test utilities
-class TestRunner {
-  constructor() {
-    this.tests = [];
-    this.passed = 0;
-    this.failed = 0;
-  }
-
-  describe(name, fn) {
-    console.log(`\n📋 ${name}`);
-    fn();
-  }
-
-  it(name, fn) {
-    try {
-      fn();
-      console.log(`  ✅ ${name}`);
-      this.passed++;
-    } catch (error) {
-      console.log(`  ❌ ${name}`);
-      console.log(`     ${error.message}`);
-      this.failed++;
-    }
-  }
-
-  assert(condition, message) {
-    if (!condition) {
-      throw new Error(message || 'Assertion failed');
-    }
-  }
-
-  assertEqual(actual, expected, message) {
-    if (actual !== expected) {
-      throw new Error(
-        message || `Expected ${expected} but got ${actual}`
-      );
-    }
-  }
-
-  assertNull(value, message) {
-    if (value !== null) {
-      throw new Error(message || `Expected null but got ${value}`);
-    }
-  }
-
-  assertNotNull(value, message) {
-    if (value === null) {
-      throw new Error(message || 'Expected value to not be null');
-    }
-  }
-
-  summary() {
-    const total = this.passed + this.failed;
-    console.log(`\n${'='.repeat(50)}`);
-    console.log(`Tests: ${total} | ✅ Passed: ${this.passed} | ❌ Failed: ${this.failed}`);
-    console.log(`${'='.repeat(50)}\n`);
-
-    return this.failed === 0;
-  }
-}
-
-// Run tests
-function runTests() {
-  const test = new TestRunner();
-
-  // Test 1: Initialization
-  test.describe('BuildContext: Initialization', () => {
-    test.it('should create with element and runtime', () => {
-      const element = new MockElement();
-      const runtime = new MockRuntime();
-
-      const context = new BuildContext(element, runtime);
-
-      test.assert(context !== null, 'Context should be created');
-      test.assertEqual(context.element, element, 'Should store element');
-      test.assertEqual(context._runtime, runtime, 'Should store runtime');
-    });
-
-    test.it('should create with state', () => {
-      const element = new MockElement();
-      const runtime = new MockRuntime();
-      const state = new MockState('TestState');
-
-      const context = new BuildContext(element, runtime, state);
-
-      test.assertEqual(context.state, state, 'Should store state');
-    });
-
-    test.it('should throw without element', () => {
-      const runtime = new MockRuntime();
-
-      try {
-        new BuildContext(null, runtime);
-        throw new Error('Should have thrown');
-      } catch (error) {
-        test.assert(error.message.includes('Element'), 'Should mention element');
-      }
-    });
-
-    test.it('should throw without runtime', () => {
-      const element = new MockElement();
-
-      try {
-        new BuildContext(element, null);
-        throw new Error('Should have thrown');
-      } catch (error) {
-        test.assert(error.message.includes('Runtime'), 'Should mention runtime');
-      }
-    });
-  });
-
-  // Test 2: Basic getters
-  test.describe('BuildContext: Basic Getters', () => {
-    test.it('should return widget', () => {
-      const widget = new MockWidget('TestWidget');
-      const element = new MockElement('el_1', widget);
-      const runtime = new MockRuntime();
-
-      const context = new BuildContext(element, runtime);
-
-      test.assertEqual(context.widget, widget, 'Should return widget');
-    });
-
-    test.it('should return state', () => {
-      const element = new MockElement();
-      const runtime = new MockRuntime();
-      const state = new MockState('TestState');
-
-      const context = new BuildContext(element, runtime, state);
-
-      test.assertEqual(context.state, state, 'Should return state');
-    });
-
-    test.it('should return null state when not provided', () => {
-      const element = new MockElement();
-      const runtime = new MockRuntime();
-
-      const context = new BuildContext(element, runtime);
-
-      test.assertNull(context.state, 'Should return null for state');
-    });
-
-    test.it('should return element', () => {
-      const element = new MockElement();
-      const runtime = new MockRuntime();
-
-      const context = new BuildContext(element, runtime);
-
-      test.assertEqual(context.element, element, 'Should return element');
-    });
-
-    test.it('should return mounted status', () => {
-      const element = new MockElement();
-      const runtime = new MockRuntime();
-
-      const context = new BuildContext(element, runtime);
-
-      test.assert(context.mounted === true, 'Should be mounted');
-
-      element.mounted = false;
-      test.assert(context.mounted === false, 'Should be unmounted');
-    });
-  });
-
-  // Test 3: Find ancestor widget
-  test.describe('BuildContext: Find Ancestor Widget', () => {
-    test.it('should find direct parent widget', () => {
-      const parentWidget = new MockWidget('Parent');
-      const parentElement = new MockElement('el_1', parentWidget);
-
-      const childWidget = new MockWidget('Child');
-      const childElement = new MockElement('el_2', childWidget);
-      childElement.parent = parentElement;
-
-      const runtime = new MockRuntime();
-      const context = new BuildContext(childElement, runtime);
-
-      const found = context.findAncestorWidgetOfExactType(MockWidget);
-
-      test.assertEqual(found, parentWidget, 'Should find parent widget');
-    });
-
-    test.it('should find distant ancestor widget', () => {
-      class GrandparentWidget extends MockWidget { }
-      class ParentWidget extends MockWidget { }
-
-      const grandparentWidget = new GrandparentWidget('Grandparent');
-      const grandparentElement = new MockElement('el_1', grandparentWidget);
-
-      const parentElement = new MockElement('el_2', new ParentWidget('Parent'));
-      parentElement.parent = grandparentElement;
-
-      const childElement = new MockElement('el_3', new MockWidget('Child'));
-      childElement.parent = parentElement;
-
-      const runtime = new MockRuntime();
-      const context = new BuildContext(childElement, runtime);
-
-      const found = context.findAncestorWidgetOfExactType(GrandparentWidget);
-
-      test.assertEqual(found, grandparentWidget, 'Should find grandparent');
-    });
-
-    test.it('should return null if not found', () => {
-      class OtherWidget { }
-
-      const element = new MockElement();
-      const runtime = new MockRuntime();
-
-      const context = new BuildContext(element, runtime);
-
-      const found = context.findAncestorWidgetOfExactType(OtherWidget);
-
-      test.assertNull(found, 'Should return null');
-    });
-
-    test.it('should throw without type', () => {
-      const element = new MockElement();
-      const runtime = new MockRuntime();
-
-      const context = new BuildContext(element, runtime);
-
-      try {
-        context.findAncestorWidgetOfExactType(null);
-        throw new Error('Should have thrown');
-      } catch (error) {
-        test.assert(error.message.includes('type'), 'Should mention type');
-      }
-    });
-
-    test.it('should require exact type match', () => {
-      class Widget1 extends MockWidget { }
-      class Widget2 extends MockWidget { }
-
-      const widget1 = new Widget1();
-      const element1 = new MockElement('el_1', widget1);
-
-      const element2 = new MockElement('el_2');
-      element2.parent = element1;
-
-      const runtime = new MockRuntime();
-      const context = new BuildContext(element2, runtime);
-
-      const found = context.findAncestorWidgetOfExactType(Widget2);
-
-      test.assertNull(found, 'Should not find different type');
-    });
-  });
-
-  // Test 4: Find ancestor state
-  test.describe('BuildContext: Find Ancestor State', () => {
-    test.it('should find parent state', () => {
-      const parentState = new MockState('ParentState');
-      const parentElement = new MockElement('el_1', new MockWidget(), parentState);
-
-      const childElement = new MockElement('el_2');
-      childElement.parent = parentElement;
-
-      const runtime = new MockRuntime();
-      const context = new BuildContext(childElement, runtime);
-
-      const found = context.findAncestorStateOfType(MockState);
-
-      test.assertEqual(found, parentState, 'Should find parent state');
-    });
-
-    test.it('should find distant ancestor state', () => {
-      const grandparentState = new MockState('GrandparentState');
-      const grandparentElement = new MockElement('el_1', new MockWidget(), grandparentState);
-
-      const parentElement = new MockElement('el_2');
-      parentElement.parent = grandparentElement;
-
-      const childElement = new MockElement('el_3');
-      childElement.parent = parentElement;
-
-      const runtime = new MockRuntime();
-      const context = new BuildContext(childElement, runtime);
-
-      const found = context.findAncestorStateOfType(MockState);
-
-      test.assertEqual(found, grandparentState, 'Should find grandparent state');
-    });
-
-    test.it('should return null if state not found', () => {
-      const element = new MockElement();
-      const runtime = new MockRuntime();
-
-      const context = new BuildContext(element, runtime);
-
-      const found = context.findAncestorStateOfType(MockState);
-
-      test.assertNull(found, 'Should return null');
-    });
-
-    test.it('should skip elements without state', () => {
-      const stateElement = new MockElement('el_1', new MockWidget(), new MockState());
-
-      const skipElement = new MockElement('el_2'); // No state
-      skipElement.parent = stateElement;
-
-      const searchElement = new MockElement('el_3');
-      searchElement.parent = skipElement;
-
-      const runtime = new MockRuntime();
-      const context = new BuildContext(searchElement, runtime);
-
-      const found = context.findAncestorStateOfType(MockState);
-
-      test.assertNotNull(found, 'Should find state through elements without state');
-    });
-  });
-
-  // Test 5: Find render object (DOM)
-  test.describe('BuildContext: Find Render Object', () => {
-    test.it('should find parent DOM node', () => {
-      const domNode = document.createElement('div');
-      const parentElement = new MockElement('el_1');
-      parentElement.domNode = domNode;
-
-      const childElement = new MockElement('el_2');
-      childElement.parent = parentElement;
-
-      const runtime = new MockRuntime();
-      const context = new BuildContext(childElement, runtime);
-
-      const found = context.findRenderObject();
-
-      test.assertEqual(found, domNode, 'Should find DOM node');
-    });
-
-    test.it('should return null if no DOM node', () => {
-      const element = new MockElement();
-      const runtime = new MockRuntime();
-
-      const context = new BuildContext(element, runtime);
-
-      const found = context.findRenderObject();
-
-      test.assertNull(found, 'Should return null');
-    });
-  });
-
-  // Test 6: Inherited widgets
-  test.describe('BuildContext: Inherited Widgets', () => {
-    test.it('should find and depend on InheritedWidget', () => {
-      const themeWidget = new MockTheme();
-      const inheritedElement = new MockInheritedElement('el_1', themeWidget);
-
-      const childElement = new MockElement('el_2');
-      childElement.parent = inheritedElement;
-
-      const runtime = new MockRuntime();
-      const context = new BuildContext(childElement, runtime);
-
-      const found = context.dependOnInheritedWidgetOfExactType(MockTheme);
-
-      test.assertEqual(found, themeWidget, 'Should find inherited widget');
-      test.assert(
-        inheritedElement.dependents.has(childElement),
-        'Should register dependency'
-      );
-    });
-
-    test.it('should cache inherited widget', () => {
-      const themeWidget = new MockTheme();
-      const inheritedElement = new MockInheritedElement('el_1', themeWidget);
-
-      const childElement = new MockElement('el_2');
-      childElement.parent = inheritedElement;
-
-      const runtime = new MockRuntime();
-      const context = new BuildContext(childElement, runtime);
-
-      const found1 = context.dependOnInheritedWidgetOfExactType(MockTheme);
-      const found2 = context.dependOnInheritedWidgetOfExactType(MockTheme);
-
-      test.assertEqual(found1, found2, 'Should return cached value');
-    });
-
-    test.it('should cache null for not found', () => {
-      class OtherWidget { }
-
-      const element = new MockElement();
-      const runtime = new MockRuntime();
-
-      const context = new BuildContext(element, runtime);
-
-      const found1 = context.dependOnInheritedWidgetOfExactType(OtherWidget);
-      const found2 = context.dependOnInheritedWidgetOfExactType(OtherWidget);
-
-      test.assertNull(found1, 'Should return null');
-      test.assertNull(found2, 'Should return cached null');
-    });
-  });
-
-  // Test 7: Services
-  test.describe('BuildContext: Services', () => {
-    test.it('should get registered service', () => {
-      const element = new MockElement();
-      const runtime = new MockRuntime();
-
-      const service = { name: 'TestService' };
-      runtime.registerService('testService', service);
-
-      const context = new BuildContext(element, runtime);
-
-      const found = context.getService('testService');
-
-      test.assertEqual(found, service, 'Should return service');
-    });
-
-    test.it('should return null for unregistered service', () => {
-      const element = new MockElement();
-      const runtime = new MockRuntime();
-
-      const context = new BuildContext(element, runtime);
-
-      const found = context.getService('unknownService');
-
-      test.assertNull(found, 'Should return null');
-    });
-
-    test.it('should throw without service name', () => {
-      const element = new MockElement();
-      const runtime = new MockRuntime();
-
-      const context = new BuildContext(element, runtime);
-
-      try {
-        context.getService(null);
-        throw new Error('Should have thrown');
-      } catch (error) {
-        test.assert(error.message.includes('name'), 'Should mention name');
-      }
-    });
-  });
-
-  // Test 8: Convenience methods
-  test.describe('BuildContext: Convenience Methods', () => {
-    test.it('should get theme', () => {
-      const themeWidget = new MockTheme();
-      const inheritedElement = new MockInheritedElement('el_1', themeWidget);
-      inheritedElement.widget = themeWidget;
-
-      const childElement = new MockElement('el_2');
-      childElement.parent = inheritedElement;
-
-      const runtime = new MockRuntime();
-      runtime._ThemeClass = MockTheme;
-
-      const context = new BuildContext(childElement, runtime);
-
-      const theme = context.theme();
-
-      test.assertNotNull(theme, 'Should return theme data');
-      test.assertEqual(theme.primaryColor, '#6750a4', 'Should have theme data');
-    });
-
-    test.it('should get media query', () => {
-      const mqWidget = new MockMediaQuery();
-      const inheritedElement = new MockInheritedElement('el_1', mqWidget);
-      inheritedElement.widget = mqWidget;
-
-      const childElement = new MockElement('el_2');
-      childElement.parent = inheritedElement;
-
-      const runtime = new MockRuntime();
-      runtime._MediaQueryClass = MockMediaQuery;
-
-      const context = new BuildContext(childElement, runtime);
-
-      const mq = context.mediaQuery();
-
-      test.assertNotNull(mq, 'Should return MediaQuery data');
-      test.assertEqual(mq.size.width, 1024, 'Should have width');
-    });
-  });
-
-  // Test 9: Element visitor
-  test.describe('BuildContext: Visitor', () => {
-    test.it('should visit all ancestors', () => {
-      const el1 = new MockElement('el_1');
-      const el2 = new MockElement('el_2');
-      el2.parent = el1;
-      const el3 = new MockElement('el_3');
-      el3.parent = el2;
-
-      const runtime = new MockRuntime();
-      const context = new BuildContext(el3, runtime);
-
-      const visited = [];
-      context.visitAncestorElements((el) => {
-        visited.push(el.id);
-      });
-
-      test.assertEqual(visited.length, 2, 'Should visit 2 ancestors');
-      test.assertEqual(visited[0], 'el_2', 'Should visit el_2 first');
-      test.assertEqual(visited[1], 'el_1', 'Should visit el_1 second');
-    });
-
-    test.it('should stop on false return', () => {
-      const el1 = new MockElement('el_1');
-      const el2 = new MockElement('el_2');
-      el2.parent = el1;
-      const el3 = new MockElement('el_3');
-      el3.parent = el2;
-
-      const runtime = new MockRuntime();
-      const context = new BuildContext(el3, runtime);
-
-      const visited = [];
-      context.visitAncestorElements((el) => {
-        visited.push(el.id);
-        return visited.length < 1; // Stop after first
-      });
-
-      test.assertEqual(visited.length, 1, 'Should stop after first');
-    });
-  });
-
-  // Test 10: Size and position
-  test.describe('BuildContext: Size and Position', () => {
-    test.it('should get size', () => {
-      const domNode = document.createElement('div');
-      domNode.style.width = '200px';
-      domNode.style.height = '100px';
-
-      const element = new MockElement();
-      element.domNode = domNode;
-
-      const runtime = new MockRuntime();
-      const context = new BuildContext(element, runtime);
-
-      const size = context.size;
-
-      test.assertNotNull(size, 'Should return size');
-      test.assertEqual(size.width, 200, 'Should have width');
-      test.assertEqual(size.height, 100, 'Should have height');
-    });
-
-    test.it('should return null for size without DOM', () => {
-      const element = new MockElement();
-      const runtime = new MockRuntime();
-
-      const context = new BuildContext(element, runtime);
-
-      const size = context.size;
-
-      test.assertNull(size, 'Should return null');
-    });
-
-    test.it('should get bounds', () => {
-      const domNode = document.createElement('div');
-      domNode.style.width = '200px';
-      domNode.style.height = '100px';
-
-      const element = new MockElement();
-      element.domNode = domNode;
-
-      const runtime = new MockRuntime();
-      const context = new BuildContext(element, runtime);
-
-      const bounds = context.bounds;
-
-      test.assertNotNull(bounds, 'Should return bounds');
-      test.assert('x' in bounds, 'Should have x');
-      test.assert('y' in bounds, 'Should have y');
-      test.assert('width' in bounds, 'Should have width');
-      test.assert('height' in bounds, 'Should have height');
-    });
-  });
-  // Test 11: Info and debugging
-  test.describe('BuildContext: Info and Debugging', () => {
-    test.it('should get context info', () => {
-      const element = new MockElement('el_1', new MockWidget('Test'));
-      const runtime = new MockRuntime();
-
-      const context = new BuildContext(element, runtime);
-
-      const info = context.getInfo();
-
-      test.assert(info.mounted === true, 'Should have mounted');
-      test.assertEqual(info.widgetType, 'MockWidget', 'Should have widget type');
-      test.assertEqual(info.elementId, 'el_1', 'Should have element ID');
-    });
-
-    test.it('should get dependency info', () => {
-      const element = new MockElement();
-      const runtime = new MockRuntime();
-
-      const context = new BuildContext(element, runtime);
-
-      const depInfo = context.getDependencyInfo();
-
-      test.assertEqual(depInfo.dependenciesCount, 0, 'Should start with 0');
-      test.assertEqual(depInfo.cachedInheritedWidgets, 0, 'Should cache 0 initially');
-    });
-  });
-
-  // Test 12: Cleanup
-  test.describe('BuildContext: Cleanup', () => {
-    test.it('should dispose context', () => {
-      const element = new MockElement();
-      const runtime = new MockRuntime();
-
-      const context = new BuildContext(element, runtime);
-
-      context.dispose();
-
-      test.assertNull(context._element, 'Should clear element');
-      test.assertNull(context._runtime, 'Should clear runtime');
-    });
-  });
-
-  return test.summary();
-}
-
-// Run
-runTests();
diff --git a/packages/flutterjs_engine/src/runtime/test/element.test.js b/packages/flutterjs_engine/src/runtime/test/element.test.js
deleted file mode 100644
index eb6dd338..00000000
--- a/packages/flutterjs_engine/src/runtime/test/element.test.js
+++ /dev/null
@@ -1,697 +0,0 @@
-/**
- * Element Test Suite
- * 
- * Comprehensive tests for the FlutterJS Element system
- */
-
-
-import { Element,StatefulElement,StatelessElement,InheritedElement,ComponentElement } from '../src/element.js';
-
-// Mock runtime
-class MockRuntime {
-  constructor() {
-    this.dirtyElements = new Set();
-    this.config = { debugMode: false };
-  }
-
-  markNeedsBuild(element) {
-    this.dirtyElements.add(element);
-  }
-}
-
-// Mock widgets
-class MockWidget {
-  constructor(key) {
-    this.key = key;
-  }
-
-  build(context) {
-    return { tag: 'div', children: ['Mock'] };
-  }
-}
-
-class MockStatefulWidget {
-  constructor(key) {
-    this.key = key;
-  }
-
-  createState() {
-    return new MockState();
-  }
-}
-
-class MockState {
-  constructor() {
-    this._element = null;
-    this._widget = null;
-    this._mounted = false;
-    this.initStateCalled = false;
-    this.disposeCalled = false;
-    this.didUpdateWidgetCalled = false;
-  }
-
-  initState() {
-    this.initStateCalled = true;
-  }
-
-  build(context) {
-    return { tag: 'div', children: ['Stateful'] };
-  }
-
-  didUpdateWidget(oldWidget) {
-    this.didUpdateWidgetCalled = true;
-  }
-
-  dispose() {
-    this.disposeCalled = true;
-  }
-
-  setState(updateFn) {
-    if (updateFn) updateFn();
-    if (this._element) {
-      this._element.markNeedsBuild();
-    }
-  }
-}
-
-class MockInheritedWidget {
-  constructor(key, child) {
-    this.key = key;
-    this.child = child || new MockWidget();
-  }
-
-  updateShouldNotify(oldWidget) {
-    return true;
-  }
-}
-
-// Mock performance if needed
-if (typeof performance === 'undefined') {
-  global.performance = { now: () => Date.now() };
-}
-
-// Simple test framework
-class TestSuite {
-  constructor(name) {
-    this.name = name;
-    this.tests = [];
-    this.passed = 0;
-    this.failed = 0;
-  }
-
-  test(testName, fn) {
-    try {
-      fn();
-      this.passed++;
-      console.log(`  ✓ ${testName}`);
-    } catch (error) {
-      this.failed++;
-      console.error(`  ✗ ${testName}`);
-      console.error(`    ${error.message}`);
-    }
-  }
-
-  assertEqual(actual, expected, message = '') {
-    if (actual !== expected) {
-      throw new Error(`${message}\nExpected: ${expected}\nActual: ${actual}`);
-    }
-  }
-
-  assertTrue(value, message = 'Expected true') {
-    if (value !== true) throw new Error(message);
-  }
-
-  assertFalse(value, message = 'Expected false') {
-    if (value !== false) throw new Error(message);
-  }
-
-  assertNull(value, message = 'Expected null') {
-    if (value !== null) throw new Error(message);
-  }
-
-  assertNotNull(value, message = 'Expected non-null') {
-    if (value === null || value === undefined) throw new Error(message);
-  }
-
-  assertThrows(fn, message = 'Expected throw') {
-    let thrown = false;
-    try {
-      fn();
-    } catch (e) {
-      thrown = true;
-    }
-    if (!thrown) throw new Error(message);
-  }
-
-  assertContains(array, value) {
-    if (!array.includes(value)) {
-      throw new Error(`Array does not contain ${value}`);
-    }
-  }
-
-  assertNotContains(array, value) {
-    if (array.includes(value)) {
-      throw new Error(`Array contains ${value}`);
-    }
-  }
-
-  report() {
-    console.log(`\n${this.name}`);
-    console.log(`${this.passed + this.failed} tests: ${this.passed} passed, ${this.failed} failed`);
-    return this.failed === 0;
-  }
-}
-
-// ============================================================================
-// TEST SUITES
-// ============================================================================
-
-const suites = [];
-
-// Test Suite 1: Element Base Class
-const suite1 = new TestSuite('Element Base Class');
-suites.push(suite1);
-
-suite1.test('should create element with required parameters', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget('test-key');
-  Element.resetCounter();
-
-  const element = new Element(widget, null, runtime);
-
-  this.assertEqual(element.widget, widget);
-  this.assertEqual(element.parent, null);
-  this.assertEqual(element.runtime, runtime);
-});
-
-suite1.test('should throw error without widget', function () {
-  const runtime = new MockRuntime();
-
-  this.assertThrows(() => {
-    new Element(null, null, runtime);
-  }, 'Expected error for null widget');
-});
-
-suite1.test('should throw error without runtime', function () {
-  const widget = new MockWidget();
-
-  this.assertThrows(() => {
-    new Element(widget, null, null);
-  }, 'Expected error for null runtime');
-});
-
-suite1.test('should initialize with default state', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget();
-  Element.resetCounter();
-
-  const element = new Element(widget, null, runtime);
-
-  this.assertFalse(element.mounted);
-  this.assertFalse(element.dirty);
-  this.assertFalse(element.building);
-  this.assertEqual(element.children.length, 0);
-  this.assertNull(element.vnode);
-  this.assertNull(element.domNode);
-});
-
-suite1.test('should set correct depth', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget();
-  Element.resetCounter();
-
-  const parent = new Element(widget, null, runtime);
-  const child = new Element(widget, parent, runtime);
-  const grandchild = new Element(widget, child, runtime);
-
-  this.assertEqual(parent.depth, 0);
-  this.assertEqual(child.depth, 1);
-  this.assertEqual(grandchild.depth, 2);
-});
-
-suite1.test('should generate unique IDs', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget();
-  Element.resetCounter();
-
-  const el1 = new Element(widget, null, runtime);
-  const el2 = new Element(widget, null, runtime);
-  const el3 = new Element(widget, null, runtime);
-
-  this.assertEqual(el1.id, 'el_1');
-  this.assertEqual(el2.id, 'el_2');
-  this.assertEqual(el3.id, 'el_3');
-});
-
-suite1.test('should store widget key', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget('test-key');
-  Element.resetCounter();
-
-  const element = new Element(widget, null, runtime);
-
-  this.assertEqual(element.key, 'test-key');
-});
-
-// Test Suite 2: Build
-const suite2 = new TestSuite('Element Build');
-suites.push(suite2);
-
-suite2.test('should throw error if build not implemented', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget();
-  Element.resetCounter();
-
-  const element = new Element(widget, null, runtime);
-
-  this.assertThrows(() => {
-    element.build();
-  });
-});
-
-suite2.test('should track build count', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget();
-  Element.resetCounter();
-
-  const element = new StatelessElement(widget, null, runtime);
-
-  this.assertEqual(element.buildCount, 0);
-
-  element.performBuild();
-  this.assertEqual(element.buildCount, 1);
-
-  element.performBuild();
-  this.assertEqual(element.buildCount, 2);
-});
-
-suite2.test('should track build duration', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget();
-  Element.resetCounter();
-
-  const element = new StatelessElement(widget, null, runtime);
-
-  element.performBuild();
-
-  this.assertTrue(element.lastBuildDuration >= 0);
-  this.assertTrue(element.lastBuildTime > 0);
-});
-
-// Test Suite 3: Mounting
-const suite3 = new TestSuite('Element Mounting');
-suites.push(suite3);
-
-suite3.test('should mount element', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget();
-  Element.resetCounter();
-
-  const element = new StatelessElement(widget, null, runtime);
-
-  element.mount();
-
-  this.assertTrue(element.mounted);
-  this.assertNotNull(element.vnode);
-});
-
-suite3.test('should not mount twice', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget();
-  Element.resetCounter();
-
-  const element = new StatelessElement(widget, null, runtime);
-
-  element.mount();
-  element.mount(); // Should warn but not fail
-
-  this.assertTrue(element.mounted);
-});
-
-suite3.test('should mount children', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget();
-  Element.resetCounter();
-
-  const parent = new StatelessElement(widget, null, runtime);
-  const child1 = new StatelessElement(widget, parent, runtime);
-  const child2 = new StatelessElement(widget, parent, runtime);
-
-  parent.children = [child1, child2];
-
-  parent.mount();
-
-  this.assertTrue(parent.mounted);
-  this.assertTrue(child1.mounted);
-  this.assertTrue(child2.mounted);
-});
-
-// Test Suite 4: Update
-const suite4 = new TestSuite('Element Update');
-suites.push(suite4);
-
-suite4.test('should update widget', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget();
-  Element.resetCounter();
-
-  const element = new StatelessElement(widget, null, runtime);
-  element.mount();
-
-  const newWidget = new MockWidget('new-key');
-
-  element.update(newWidget);
-
-  this.assertEqual(element.widget, newWidget);
-});
-
-suite4.test('should mark dirty if widget changed', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget();
-  Element.resetCounter();
-
-  const element = new StatelessElement(widget, null, runtime);
-  element.mount();
-
-  const newWidget = new MockWidget('different');
-
-  element.update(newWidget);
-
-  this.assertTrue(element.dirty);
-  this.assertTrue(runtime.dirtyElements.has(element));
-});
-
-suite4.test('should throw error if newWidget is null', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget();
-  Element.resetCounter();
-
-  const element = new StatelessElement(widget, null, runtime);
-
-  this.assertThrows(() => {
-    element.update(null);
-  });
-});
-
-// Test Suite 5: Unmount
-const suite5 = new TestSuite('Element Unmount');
-suites.push(suite5);
-
-suite5.test('should unmount element', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget();
-  Element.resetCounter();
-
-  const element = new StatelessElement(widget, null, runtime);
-  element.mount();
-
-  element.unmount();
-
-  this.assertFalse(element.mounted);
-  this.assertEqual(element.children.length, 0);
-  this.assertNull(element.vnode);
-  this.assertNull(element.domNode);
-});
-
-suite5.test('should unmount children first', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget();
-  Element.resetCounter();
-
-  const parent = new StatelessElement(widget, null, runtime);
-  const child = new StatelessElement(widget, parent, runtime);
-
-  parent.children = [child];
-  parent.mount();
-  child.mount();
-
-  parent.unmount();
-
-  this.assertFalse(child.mounted);
-  this.assertFalse(parent.mounted);
-});
-
-// Test Suite 6: Children Management
-const suite6 = new TestSuite('Element Children Management');
-suites.push(suite6);
-
-suite6.test('should add child', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget();
-  Element.resetCounter();
-
-  const parent = new StatelessElement(widget, null, runtime);
-  const child = new StatelessElement(widget, null, runtime);
-
-  parent.addChild(child);
-
-  this.assertContains(parent.children, child);
-  this.assertEqual(child.parent, parent);
-});
-
-suite6.test('should track child by key', function () {
-  const runtime = new MockRuntime();
-  Element.resetCounter();
-
-  const parent = new StatelessElement(new MockWidget(), null, runtime);
-  const child = new StatelessElement(new MockWidget('child-key'), null, runtime);
-
-  parent.addChild(child);
-
-  this.assertEqual(parent.findChildByKey('child-key'), child);
-});
-
-suite6.test('should remove child', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget();
-  Element.resetCounter();
-
-  const parent = new StatelessElement(widget, null, runtime);
-  const child = new StatelessElement(widget, null, runtime);
-
-  parent.addChild(child);
-  parent.removeChild(child);
-
-  this.assertNotContains(parent.children, child);
-  this.assertNull(child.parent);
-});
-
-suite6.test('should throw error when adding null child', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget();
-  Element.resetCounter();
-
-  const element = new StatelessElement(widget, null, runtime);
-
-  this.assertThrows(() => {
-    element.addChild(null);
-  });
-});
-
-// Test Suite 7: Ancestor Methods
-const suite7 = new TestSuite('Element Ancestor Methods');
-suites.push(suite7);
-
-suite7.test('should find ancestor of type', function () {
-  const runtime = new MockRuntime();
-  Element.resetCounter();
-
-  const grandparent = new StatelessElement(new MockWidget(), null, runtime);
-  const parent = new StatefulElement(new MockStatefulWidget(), grandparent, runtime);
-  const child = new StatelessElement(new MockWidget(), parent, runtime);
-
-  const found = child.findAncestorOfType(StatefulElement);
-
-  this.assertEqual(found, parent);
-});
-
-suite7.test('should return null if ancestor not found', function () {
-  const runtime = new MockRuntime();
-  Element.resetCounter();
-
-  const parent = new StatelessElement(new MockWidget(), null, runtime);
-  const child = new StatelessElement(new MockWidget(), parent, runtime);
-
-  const found = child.findAncestorOfType(StatefulElement);
-
-  this.assertNull(found);
-});
-
-suite7.test('should visit ancestors', function () {
-  const runtime = new MockRuntime();
-  Element.resetCounter();
-
-  const grandparent = new StatelessElement(new MockWidget(), null, runtime);
-  const parent = new StatelessElement(new MockWidget(), grandparent, runtime);
-  const child = new StatelessElement(new MockWidget(), parent, runtime);
-
-  const visited = [];
-
-  child.visitAncestors((element) => {
-    visited.push(element);
-    return true;
-  });
-
-  this.assertEqual(visited.length, 2);
-  this.assertEqual(visited[0], parent);
-  this.assertEqual(visited[1], grandparent);
-});
-
-// Test Suite 8: StatelessElement
-const suite8 = new TestSuite('StatelessElement');
-suites.push(suite8);
-
-suite8.test('should create StatelessElement', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget();
-  Element.resetCounter();
-
-  const element = new StatelessElement(widget, null, runtime);
-
-  this.assertTrue(element instanceof StatelessElement);
-  this.assertTrue(element instanceof Element);
-});
-
-suite8.test('should build from widget', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockWidget();
-  Element.resetCounter();
-
-  const element = new StatelessElement(widget, null, runtime);
-
-  const vnode = element.build();
-
-  this.assertNotNull(vnode);
-  this.assertEqual(vnode.tag, 'div');
-});
-
-// Test Suite 9: StatefulElement
-const suite9 = new TestSuite('StatefulElement');
-suites.push(suite9);
-
-suite9.test('should create StatefulElement', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockStatefulWidget();
-  Element.resetCounter();
-
-  const element = new StatefulElement(widget, null, runtime);
-
-  this.assertTrue(element instanceof StatefulElement);
-  this.assertNotNull(element.state);
-});
-
-suite9.test('should throw error if createState missing', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockStatefulWidget();
-  widget.createState = null;
-  Element.resetCounter();
-
-  this.assertThrows(() => {
-    new StatefulElement(widget, null, runtime);
-  });
-});
-
-suite9.test('should link state to element', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockStatefulWidget();
-  Element.resetCounter();
-
-  const element = new StatefulElement(widget, null, runtime);
-
-  this.assertEqual(element.state._element, element);
-  this.assertEqual(element.state._widget, widget);
-});
-
-suite9.test('should call initState on mount', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockStatefulWidget();
-  Element.resetCounter();
-
-  const element = new StatefulElement(widget, null, runtime);
-
-  element.mount();
-
-  this.assertTrue(element.state.initStateCalled);
-  this.assertTrue(element.state._mounted);
-});
-
-suite9.test('should call dispose on unmount', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockStatefulWidget();
-  Element.resetCounter();
-
-  const element = new StatefulElement(widget, null, runtime);
-  element.mount();
-
-  element.unmount();
-
-  this.assertTrue(element.state.disposeCalled);
-  this.assertFalse(element.state._mounted);
-});
-
-// Test Suite 10: InheritedElement
-const suite10 = new TestSuite('InheritedElement');
-suites.push(suite10);
-
-suite10.test('should create InheritedElement', function () {
-  const runtime = new MockRuntime();
-  const widget = new MockInheritedWidget();
-  Element.resetCounter();
-
-  const element = new InheritedElement(widget, null, runtime);
-
-  this.assertTrue(element instanceof InheritedElement);
-  this.assertNotNull(element.dependents);
-});
-
-suite10.test('should add dependent', function () {
-  const runtime = new MockRuntime();
-  Element.resetCounter();
-
-  const element = new InheritedElement(new MockInheritedWidget(), null, runtime);
-  const dependent = new StatelessElement(new MockWidget(), null, runtime);
-
-  element.addDependent(dependent);
-
-  this.assertTrue(element.hasDependent(dependent));
-  this.assertEqual(element.dependents.size, 1);
-});
-
-suite10.test('should throw error when adding null dependent', function () {
-  const runtime = new MockRuntime();
-  Element.resetCounter();
-
-  const element = new InheritedElement(new MockInheritedWidget(), null, runtime);
-
-  this.assertThrows(() => {
-    element.addDependent(null);
-  });
-});
-
-// Print summary
-console.log('\n' + '='.repeat(60));
-console.log('ELEMENT TEST SUITE');
-console.log('='.repeat(60));
-
-let totalPassed = 0;
-let totalFailed = 0;
-
-suites.forEach(suite => {
-  const passed = suite.report();
-  totalPassed += suite.passed;
-  totalFailed += suite.failed;
-});
-
-console.log('\n' + '='.repeat(60));
-console.log(`TOTAL: ${totalPassed + totalFailed} tests`);
-console.log(`PASSED: ${totalPassed}`);
-console.log(`FAILED: ${totalFailed}`);
-console.log('='.repeat(60));
-
-if (totalFailed === 0) {
-  console.log('✓ All tests passed!');
-  process.exit(0);
-} else {
-  console.log(`✗ ${totalFailed} test(s) failed`);
-  process.exit(1);
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/test/event_system.test.js b/packages/flutterjs_engine/src/runtime/test/event_system.test.js
deleted file mode 100644
index 32421fe3..00000000
--- a/packages/flutterjs_engine/src/runtime/test/event_system.test.js
+++ /dev/null
@@ -1,686 +0,0 @@
-/**
- * EventSystem & SyntheticEvent Test Suite
- *
- * Tests for:
- * - Event delegation
- * - Handler registration/unregistration
- * - Event propagation and bubbling
- * - Synthetic event creation
- * - Event batching and performance
- * - Memory management
- */
-
-import {EventSystem, SyntheticEvent } from "../src/event_system.js";
-
-// Polyfill HTMLElement for Node.js testing
-if (typeof HTMLElement === 'undefined') {
-  global.HTMLElement = class HTMLElement {
-    constructor(tagName = 'DIV') {
-      this.tagName = tagName;
-    }
-  };
-}
-
-// Test Runner
-class TestRunner {
-  constructor() {
-    this.passed = 0;
-    this.failed = 0;
-    this.tests = [];
-  }
-
-  describe(name, fn) {
-    console.log(`\n📋 ${name}`);
-    fn();
-  }
-
-  it(name, fn) {
-    try {
-      fn();
-      console.log(`  ✅ ${name}`);
-      this.passed++;
-    } catch (error) {
-      console.log(`  ❌ ${name}`);
-      console.log(`     ${error.message}`);
-      this.failed++;
-    }
-  }
-
-  assert(condition, message) {
-    if (!condition) {
-      throw new Error(message || 'Assertion failed');
-    }
-  }
-
-  assertEqual(actual, expected, message) {
-    if (actual !== expected) {
-      throw new Error(message || `Expected ${expected} but got ${actual}`);
-    }
-  }
-
-  assertNull(value, message) {
-    if (value !== null) {
-      throw new Error(message || `Expected null but got ${value}`);
-    }
-  }
-
-  assertNotNull(value, message) {
-    if (value === null) {
-      throw new Error(message || 'Expected value to not be null');
-    }
-  }
-
-  assertTrue(value, message) {
-    if (value !== true) {
-      throw new Error(message || `Expected true but got ${value}`);
-    }
-  }
-
-  assertFalse(value, message) {
-    if (value !== false) {
-      throw new Error(message || `Expected false but got ${value}`);
-    }
-  }
-
-  assertThrows(fn, message) {
-    try {
-      fn();
-      throw new Error(message || 'Expected function to throw');
-    } catch (e) {
-      if (message && !e.message.includes(message)) {
-        throw new Error(`Expected error with "${message}" but got "${e.message}"`);
-      }
-    }
-  }
-
-  summary() {
-    const total = this.passed + this.failed;
-    console.log(`\n${'='.repeat(50)}`);
-    console.log(`Tests: ${total} | ✅ Passed: ${this.passed} | ❌ Failed: ${this.failed}`);
-    console.log(`${'='.repeat(50)}\n`);
-    return this.failed === 0;
-  }
-}
-
-// Mock Classes
-class MockRuntime {
-  constructor() {
-    this.debugMode = false;
-  }
-}
-
-// Mock DOM Element - extends HTMLElement for instanceof check
-function createMockElement(tagName = 'DIV', elementId = null) {
-  const element = new HTMLElement(tagName);
-  const listeners = {};
-  
-  element.dataset = elementId ? { elementId } : {};
-  element.listeners = listeners;
-  
-  element.addEventListener = function(eventType, handler, useCapture) {
-    if (!this.listeners[eventType]) {
-      this.listeners[eventType] = [];
-    }
-    this.listeners[eventType].push({ handler, useCapture });
-  };
-  
-  element.removeEventListener = function(eventType, handler, useCapture) {
-    if (this.listeners[eventType]) {
-      this.listeners[eventType] = this.listeners[eventType].filter(
-        l => l.handler !== handler
-      );
-    }
-  };
-  
-  element.appendChild = function() {};
-  element.parentElement = null;
-  
-  return element;
-}
-
-function createMockNativeEvent(type, options = {}) {
-  return {
-    type: type,
-    bubbles: options.bubbles !== false,
-    cancelable: options.cancelable !== false,
-    clientX: options.clientX || 0,
-    clientY: options.clientY || 0,
-    pageX: options.pageX || 0,
-    pageY: options.pageY || 0,
-    screenX: options.screenX || 0,
-    screenY: options.screenY || 0,
-    button: options.button !== undefined ? options.button : 0,
-    buttons: options.buttons || 0,
-    altKey: options.altKey || false,
-    ctrlKey: options.ctrlKey || false,
-    metaKey: options.metaKey || false,
-    shiftKey: options.shiftKey || false,
-    key: options.key || '',
-    code: options.code || '',
-    keyCode: options.keyCode || 0,
-    which: options.which || 0,
-    target: options.target || { dataset: {} },
-    touches: options.touches || [],
-    changedTouches: options.changedTouches || [],
-    targetTouches: options.targetTouches || [],
-    preventDefault: options.preventDefault || function() {},
-    stopPropagation: options.stopPropagation || function() {},
-    stopImmediatePropagation: options.stopImmediatePropagation || function() {},
-    timeStamp: options.timeStamp || Date.now()
-  };
-}
-
-// Run Tests
-function runTests() {
-  const test = new TestRunner();
-
-  // ============================================================
-  // SYNTHETIC EVENT TESTS
-  // ============================================================
-  
-  test.describe('SyntheticEvent: Construction', () => {
-    test.it('should create with all properties', () => {
-      const nativeEvent = createMockNativeEvent('click');
-      const target = { tagName: 'BUTTON', dataset: { elementId: 'btn-1' } };
-      const currentTarget = { tagName: 'BUTTON', dataset: { elementId: 'btn-1' } };
-
-      const syntheticEvent = new SyntheticEvent(nativeEvent, 'click', target, currentTarget);
-
-      test.assertEqual(syntheticEvent.type, 'click');
-      test.assertEqual(syntheticEvent.target, target);
-      test.assertEqual(syntheticEvent.currentTarget, currentTarget);
-      test.assertEqual(syntheticEvent.nativeEvent, nativeEvent);
-    });
-
-    test.it('should copy mouse properties', () => {
-      const nativeEvent = createMockNativeEvent('click', {
-        clientX: 100,
-        clientY: 200,
-        pageX: 150,
-        pageY: 250,
-        screenX: 500,
-        screenY: 600
-      });
-      const target = { tagName: 'BUTTON' };
-
-      const syntheticEvent = new SyntheticEvent(nativeEvent, 'click', target, target);
-
-      test.assertEqual(syntheticEvent.clientX, 100);
-      test.assertEqual(syntheticEvent.clientY, 200);
-      test.assertEqual(syntheticEvent.pageX, 150);
-      test.assertEqual(syntheticEvent.pageY, 250);
-    });
-
-    test.it('should copy modifier keys', () => {
-      const nativeEvent = createMockNativeEvent('keydown', {
-        altKey: true,
-        ctrlKey: true,
-        metaKey: true,
-        shiftKey: true
-      });
-      const target = { tagName: 'INPUT' };
-
-      const syntheticEvent = new SyntheticEvent(nativeEvent, 'keydown', target, target);
-
-      test.assertTrue(syntheticEvent.altKey);
-      test.assertTrue(syntheticEvent.ctrlKey);
-      test.assertTrue(syntheticEvent.metaKey);
-      test.assertTrue(syntheticEvent.shiftKey);
-    });
-
-    test.it('should copy keyboard properties', () => {
-      const nativeEvent = createMockNativeEvent('keydown', {
-        key: 'Enter',
-        code: 'Enter',
-        keyCode: 13
-      });
-      const target = { tagName: 'INPUT' };
-
-      const syntheticEvent = new SyntheticEvent(nativeEvent, 'keydown', target, target);
-
-      test.assertEqual(syntheticEvent.key, 'Enter');
-      test.assertEqual(syntheticEvent.code, 'Enter');
-      test.assertEqual(syntheticEvent.keyCode, 13);
-    });
-
-    test.it('should handle missing native event properties', () => {
-      const nativeEvent = { type: 'click' };
-      const target = { tagName: 'BUTTON' };
-
-      const syntheticEvent = new SyntheticEvent(nativeEvent, 'click', target, target);
-
-      test.assertEqual(syntheticEvent.clientX, 0);
-      test.assertEqual(syntheticEvent.clientY, 0);
-      test.assertEqual(syntheticEvent.key, '');
-      test.assertEqual(syntheticEvent.button, -1);
-    });
-  });
-
-  test.describe('SyntheticEvent: Event Control', () => {
-    test.it('should prevent default', () => {
-      const nativeEvent = createMockNativeEvent('click');
-      let preventDefaultCalled = false;
-      nativeEvent.preventDefault = () => { preventDefaultCalled = true; };
-
-      const syntheticEvent = new SyntheticEvent(nativeEvent, 'click', {}, {});
-      syntheticEvent.preventDefault();
-
-      test.assertTrue(syntheticEvent.defaultPrevented);
-      test.assertTrue(preventDefaultCalled);
-    });
-
-    test.it('should stop propagation', () => {
-      const nativeEvent = createMockNativeEvent('click');
-      let stopPropagationCalled = false;
-      nativeEvent.stopPropagation = () => { stopPropagationCalled = true; };
-
-      const syntheticEvent = new SyntheticEvent(nativeEvent, 'click', {}, {});
-      syntheticEvent.stopPropagation();
-
-      test.assertTrue(syntheticEvent.isPropagationStopped);
-      test.assertTrue(stopPropagationCalled);
-    });
-
-    test.it('should stop immediate propagation', () => {
-      const nativeEvent = createMockNativeEvent('click');
-      let stopImmediateCalled = false;
-      nativeEvent.stopImmediatePropagation = () => { stopImmediateCalled = true; };
-
-      const syntheticEvent = new SyntheticEvent(nativeEvent, 'click', {}, {});
-      syntheticEvent.stopImmediatePropagation();
-
-      test.assertTrue(syntheticEvent.isImmediatePropagationStopped);
-      test.assertTrue(syntheticEvent.isPropagationStopped);
-      test.assertTrue(stopImmediateCalled);
-    });
-
-    test.it('should track flags independently', () => {
-      const nativeEvent = createMockNativeEvent('click');
-      const syntheticEvent = new SyntheticEvent(nativeEvent, 'click', {}, {});
-
-      test.assertFalse(syntheticEvent.defaultPrevented);
-      test.assertFalse(syntheticEvent.isPropagationStopped);
-
-      syntheticEvent.preventDefault();
-      test.assertTrue(syntheticEvent.defaultPrevented);
-      test.assertFalse(syntheticEvent.isPropagationStopped);
-    });
-  });
-
-  test.describe('SyntheticEvent: toString', () => {
-    test.it('should provide useful string representation', () => {
-      const nativeEvent = createMockNativeEvent('click');
-      const target = { tagName: 'BUTTON' };
-      const syntheticEvent = new SyntheticEvent(nativeEvent, 'click', target, target);
-
-      const str = syntheticEvent.toString();
-
-      test.assert(str.includes('SyntheticEvent'));
-      test.assert(str.includes('click'));
-      test.assert(str.includes('BUTTON'));
-    });
-  });
-
-  // ============================================================
-  // EVENT SYSTEM TESTS
-  // ============================================================
-
-  test.describe('EventSystem: Construction & Initialization', () => {
-    test.it('should create with runtime', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-
-      test.assertEqual(eventSystem.runtime, runtime);
-      test.assertFalse(eventSystem.initialized);
-    });
-
-    test.it('should throw without runtime', () => {
-      test.assertThrows(() => new EventSystem(null), 'Runtime');
-    });
-
-    test.it('should initialize with root element', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-
-      eventSystem.initialize(rootElement);
-
-      test.assertTrue(eventSystem.initialized);
-      test.assertEqual(eventSystem.rootElement, rootElement);
-    });
-
-    test.it('should throw on invalid root element', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-
-      test.assertThrows(() => eventSystem.initialize(null), 'Root element');
-      test.assertThrows(() => eventSystem.initialize('string'), 'Root element');
-    });
-
-    test.it('should attach delegated listeners', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-
-      eventSystem.initialize(rootElement);
-
-      test.assertEqual(eventSystem.nativeListeners.size, eventSystem.delegatedEvents.size);
-    });
-  });
-
-  test.describe('EventSystem: Handler Registration', () => {
-    test.it('should register handler', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      const handler = () => {};
-      eventSystem.registerHandler('elem-1', 'click', handler);
-
-      test.assertTrue(eventSystem.hasHandlers('elem-1', 'click'));
-      test.assertEqual(eventSystem.getHandlerCount('elem-1', 'click'), 1);
-    });
-
-    test.it('should register multiple handlers', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      eventSystem.registerHandler('elem-1', 'click', () => {});
-      eventSystem.registerHandler('elem-1', 'click', () => {});
-
-      test.assertEqual(eventSystem.getHandlerCount('elem-1', 'click'), 2);
-    });
-
-    test.it('should register handlers for multiple event types', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      eventSystem.registerHandler('elem-1', 'click', () => {});
-      eventSystem.registerHandler('elem-1', 'change', () => {});
-
-      test.assertTrue(eventSystem.hasHandlers('elem-1', 'click'));
-      test.assertTrue(eventSystem.hasHandlers('elem-1', 'change'));
-    });
-
-    test.it('should throw on invalid element ID', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      test.assertThrows(() => eventSystem.registerHandler(null, 'click', () => {}), 'Element');
-      test.assertThrows(() => eventSystem.registerHandler('', 'click', () => {}), 'Element');
-    });
-
-    test.it('should throw on invalid event type', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      test.assertThrows(() => eventSystem.registerHandler('elem-1', null, () => {}), 'Event');
-      test.assertThrows(() => eventSystem.registerHandler('elem-1', '', () => {}), 'Event');
-    });
-
-    test.it('should throw on invalid handler', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      test.assertThrows(() => eventSystem.registerHandler('elem-1', 'click', 'not-function'), 'function');
-      test.assertThrows(() => eventSystem.registerHandler('elem-1', 'click', null), 'function');
-    });
-
-    test.it('should track statistics', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      eventSystem.registerHandler('elem-1', 'click', () => {});
-      eventSystem.registerHandler('elem-1', 'click', () => {});
-
-      test.assertEqual(eventSystem.stats.handlersRegistered, 2);
-    });
-  });
-
-  test.describe('EventSystem: Handler Unregistration', () => {
-    test.it('should unregister specific handler', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      const handler = () => {};
-      eventSystem.registerHandler('elem-1', 'click', handler);
-      eventSystem.registerHandler('elem-1', 'click', () => {});
-
-      eventSystem.unregisterHandler('elem-1', 'click', handler);
-
-      test.assertEqual(eventSystem.getHandlerCount('elem-1', 'click'), 1);
-    });
-
-    test.it('should unregister all handlers for event type', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      eventSystem.registerHandler('elem-1', 'click', () => {});
-      eventSystem.registerHandler('elem-1', 'click', () => {});
-      eventSystem.registerHandler('elem-1', 'change', () => {});
-
-      eventSystem.unregisterHandler('elem-1', 'click');
-
-      test.assertFalse(eventSystem.hasHandlers('elem-1', 'click'));
-      test.assertTrue(eventSystem.hasHandlers('elem-1', 'change'));
-    });
-
-    test.it('should unregister all handlers for element', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      eventSystem.registerHandler('elem-1', 'click', () => {});
-      eventSystem.registerHandler('elem-1', 'change', () => {});
-
-      eventSystem.unregisterHandler('elem-1');
-
-      test.assertEqual(eventSystem.getHandlerCount('elem-1'), 0);
-    });
-
-    test.it('should handle non-existent handlers gracefully', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      eventSystem.unregisterHandler('non-existent');
-
-      test.assertEqual(eventSystem.getHandlerCount('non-existent'), 0);
-    });
-  });
-
-  test.describe('EventSystem: Handler Queries', () => {
-    test.it('should check if element has handlers', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      eventSystem.registerHandler('elem-1', 'click', () => {});
-
-      test.assertTrue(eventSystem.hasHandlers('elem-1'));
-      test.assertTrue(eventSystem.hasHandlers('elem-1', 'click'));
-      test.assertFalse(eventSystem.hasHandlers('elem-1', 'change'));
-      test.assertFalse(eventSystem.hasHandlers('non-existent'));
-    });
-
-    test.it('should get handler count', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      eventSystem.registerHandler('elem-1', 'click', () => {});
-      eventSystem.registerHandler('elem-1', 'click', () => {});
-      eventSystem.registerHandler('elem-1', 'change', () => {});
-
-      test.assertEqual(eventSystem.getHandlerCount('elem-1'), 3);
-      test.assertEqual(eventSystem.getHandlerCount('elem-1', 'click'), 2);
-      test.assertEqual(eventSystem.getHandlerCount('non-existent'), 0);
-    });
-
-    test.it('should get event types for element', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      eventSystem.registerHandler('elem-1', 'click', () => {});
-      eventSystem.registerHandler('elem-1', 'change', () => {});
-
-      const eventTypes = eventSystem.getEventTypes('elem-1');
-
-      test.assert(eventTypes.includes('click'));
-      test.assert(eventTypes.includes('change'));
-      test.assertEqual(eventTypes.length, 2);
-    });
-  });
-
-  test.describe('EventSystem: Batch Operations', () => {
-    test.it('should batch register handlers', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      const handlers = {
-        click: () => {},
-        change: () => {},
-        input: () => {}
-      };
-
-      eventSystem.batchRegister('elem-1', handlers);
-
-      test.assertEqual(eventSystem.getHandlerCount('elem-1'), 3);
-    });
-
-    test.it('should batch unregister handlers', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      eventSystem.registerHandler('elem-1', 'click', () => {});
-      eventSystem.registerHandler('elem-1', 'change', () => {});
-
-      eventSystem.batchUnregister('elem-1');
-
-      test.assertEqual(eventSystem.getHandlerCount('elem-1'), 0);
-    });
-  });
-
-  test.describe('EventSystem: Cleanup', () => {
-    test.it('should clear element handlers', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      eventSystem.registerHandler('elem-1', 'click', () => {});
-      eventSystem.clearElement('elem-1');
-
-      test.assertEqual(eventSystem.getHandlerCount('elem-1'), 0);
-    });
-
-    test.it('should clear all handlers', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      eventSystem.registerHandler('elem-1', 'click', () => {});
-      eventSystem.registerHandler('elem-2', 'change', () => {});
-
-      eventSystem.clearAll();
-
-      test.assertEqual(eventSystem.handlerRegistry.size, 0);
-    });
-
-    test.it('should dispose event system', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      eventSystem.dispose();
-
-      test.assertFalse(eventSystem.initialized);
-      test.assertNull(eventSystem.rootElement);
-    });
-  });
-
-  test.describe('EventSystem: Statistics', () => {
-    test.it('should provide statistics', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      eventSystem.registerHandler('elem-1', 'click', () => {});
-      eventSystem.registerHandler('elem-2', 'change', () => {});
-
-      const stats = eventSystem.getStats();
-
-      test.assertEqual(stats.handlersRegistered, 2);
-      test.assertEqual(stats.elementsWithHandlers, 2);
-      test.assertEqual(stats.totalHandlers, 2);
-    });
-  });
-
-  test.describe('EventSystem: Detailed Info', () => {
-    test.it('should provide info for specific element', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      eventSystem.registerHandler('elem-1', 'click', () => {});
-
-      const info = eventSystem.getDetailedInfo('elem-1');
-
-      test.assertEqual(info.elementId, 'elem-1');
-      test.assertTrue(info.hasHandlers);
-      test.assert(info.handlers.click);
-    });
-
-    test.it('should provide info for all elements', () => {
-      const runtime = new MockRuntime();
-      const eventSystem = new EventSystem(runtime);
-      const rootElement = createMockElement('DIV');
-      eventSystem.initialize(rootElement);
-
-      eventSystem.registerHandler('elem-1', 'click', () => {});
-      eventSystem.registerHandler('elem-2', 'change', () => {});
-
-      const info = eventSystem.getDetailedInfo();
-
-      test.assertEqual(info.totalElements, 2);
-      test.assert(info.elements['elem-1']);
-      test.assert(info.elements['elem-2']);
-    });
-  });
-
-  return test.summary();
-}
-
-// Run tests
-runTests();
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/test/event_system_integration.test.js b/packages/flutterjs_engine/src/runtime/test/event_system_integration.test.js
deleted file mode 100644
index f0644973..00000000
--- a/packages/flutterjs_engine/src/runtime/test/event_system_integration.test.js
+++ /dev/null
@@ -1,568 +0,0 @@
-/**
- * EventSystem Integration Tests
- *
- * Tests for real-world event handling scenarios:
- * - Event bubbling and propagation
- * - Multiple handlers on same element
- * - Event handler cleanup
- * - Complex DOM structures
- * - Performance under load
- */
-
-import {
-  EventSystem,
-  SyntheticEvent
-} from '../src/event_system.js';
-
-class MockRuntime {
-  constructor() {
-    this.debugMode = false;
-  }
-}
-
-describe('EventSystem Integration Tests', () => {
-  let runtime;
-  let eventSystem;
-  let rootElement;
-
-  beforeEach(() => {
-    runtime = new MockRuntime();
-    eventSystem = new EventSystem(runtime, { enableDebug: false });
-
-    rootElement = {
-      tagName: 'DIV',
-      dataset: {},
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      appendChild: jest.fn(),
-      parentElement: null
-    };
-
-    eventSystem.initialize(rootElement);
-  });
-
-  describe('Event Propagation', () => {
-    it('should propagate events up DOM tree', () => {
-      const grandparentHandler = jest.fn();
-      const parentHandler = jest.fn();
-      const childHandler = jest.fn();
-
-      eventSystem.registerHandler('grandparent', 'click', grandparentHandler);
-      eventSystem.registerHandler('parent', 'click', parentHandler);
-      eventSystem.registerHandler('child', 'click', childHandler);
-
-      // Simulate event bubbling from child to grandparent
-      const nativeEvent = {
-        type: 'click',
-        target: { dataset: { elementId: 'child' } },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      // In order: child -> parent -> grandparent (bubbling)
-      eventSystem.dispatchToHandlers('child', 'click', nativeEvent);
-      eventSystem.dispatchToHandlers('parent', 'click', nativeEvent);
-      eventSystem.dispatchToHandlers('grandparent', 'click', nativeEvent);
-
-      expect(childHandler).toHaveBeenCalled();
-      expect(parentHandler).toHaveBeenCalled();
-      expect(grandparentHandler).toHaveBeenCalled();
-    });
-
-    it('should respect stopPropagation', () => {
-      const parentHandler = jest.fn();
-      const childHandler = jest.fn().mockImplementation((event) => {
-        event.stopPropagation();
-      });
-
-      eventSystem.registerHandler('parent', 'click', parentHandler);
-      eventSystem.registerHandler('child', 'click', childHandler);
-
-      const nativeEvent = {
-        type: 'click',
-        target: { dataset: { elementId: 'child' } },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      eventSystem.dispatchToHandlers('child', 'click', nativeEvent);
-      expect(childHandler).toHaveBeenCalled();
-
-      nativeEvent._stopPropagation = false;
-      eventSystem.dispatchToHandlers('parent', 'click', nativeEvent);
-
-      // Parent should still be called (propagation check happens in delegated listener)
-      expect(parentHandler).toHaveBeenCalled();
-    });
-
-    it('should respect stopImmediatePropagation', () => {
-      const handler1 = jest.fn().mockImplementation((event) => {
-        event.stopImmediatePropagation();
-      });
-      const handler2 = jest.fn();
-
-      // Same element, multiple handlers - stopImmediatePropagation should stop handler2
-      eventSystem.registerHandler('elem-1', 'click', handler1);
-      eventSystem.registerHandler('elem-1', 'click', handler2);
-
-      const nativeEvent = {
-        type: 'click',
-        target: { dataset: { elementId: 'elem-1' } },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      eventSystem.dispatchToHandlers('elem-1', 'click', nativeEvent);
-
-      expect(handler1).toHaveBeenCalled();
-      expect(handler2).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('Multiple Handlers on Same Element', () => {
-    it('should call all handlers in registration order', () => {
-      const callOrder = [];
-      const handler1 = jest.fn(() => callOrder.push(1));
-      const handler2 = jest.fn(() => callOrder.push(2));
-      const handler3 = jest.fn(() => callOrder.push(3));
-
-      eventSystem.registerHandler('elem-1', 'click', handler1);
-      eventSystem.registerHandler('elem-1', 'click', handler2);
-      eventSystem.registerHandler('elem-1', 'click', handler3);
-
-      const nativeEvent = {
-        type: 'click',
-        target: { dataset: { elementId: 'elem-1' } },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      eventSystem.dispatchToHandlers('elem-1', 'click', nativeEvent);
-
-      expect(callOrder).toEqual([1, 2, 3]);
-    });
-
-    it('should handle error in one handler without affecting others', () => {
-      const handler1 = jest.fn(() => { throw new Error('Handler 1 error'); });
-      const handler2 = jest.fn();
-      const handler3 = jest.fn();
-
-      eventSystem.registerHandler('elem-1', 'click', handler1);
-      eventSystem.registerHandler('elem-1', 'click', handler2);
-      eventSystem.registerHandler('elem-1', 'click', handler3);
-
-      const nativeEvent = {
-        type: 'click',
-        target: { dataset: { elementId: 'elem-1' } },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      const errorSpy = jest.spyOn(console, 'error').mockImplementation();
-
-      eventSystem.dispatchToHandlers('elem-1', 'click', nativeEvent);
-
-      expect(handler1).toHaveBeenCalled();
-      expect(handler2).toHaveBeenCalled();
-      expect(handler3).toHaveBeenCalled();
-      expect(errorSpy).toHaveBeenCalled();
-
-      errorSpy.mockRestore();
-    });
-
-    it('should allow removing handler during event', () => {
-      const handler1 = jest.fn();
-      const handler2 = jest.fn(() => {
-        eventSystem.unregisterHandler('elem-1', 'click', handler3);
-      });
-      const handler3 = jest.fn();
-
-      eventSystem.registerHandler('elem-1', 'click', handler1);
-      eventSystem.registerHandler('elem-1', 'click', handler2);
-      eventSystem.registerHandler('elem-1', 'click', handler3);
-
-      const nativeEvent = {
-        type: 'click',
-        target: { dataset: { elementId: 'elem-1' } },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      eventSystem.dispatchToHandlers('elem-1', 'click', nativeEvent);
-
-      expect(handler1).toHaveBeenCalled();
-      expect(handler2).toHaveBeenCalled();
-      expect(handler3).toHaveBeenCalled(); // Still called during dispatch
-    });
-  });
-
-  describe('Complex Widget Tree Simulation', () => {
-    it('should handle button inside form inside container', () => {
-      const containerHandler = jest.fn();
-      const formHandler = jest.fn();
-      const buttonHandler = jest.fn();
-
-      eventSystem.registerHandler('container', 'click', containerHandler);
-      eventSystem.registerHandler('form', 'click', formHandler);
-      eventSystem.registerHandler('button', 'click', buttonHandler);
-
-      // Simulate click on button -> form -> container
-      const nativeEvent = {
-        type: 'click',
-        target: { dataset: { elementId: 'button' } },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      eventSystem.dispatchToHandlers('button', 'click', nativeEvent);
-      expect(buttonHandler).toHaveBeenCalled();
-
-      eventSystem.dispatchToHandlers('form', 'click', nativeEvent);
-      expect(formHandler).toHaveBeenCalled();
-
-      eventSystem.dispatchToHandlers('container', 'click', nativeEvent);
-      expect(containerHandler).toHaveBeenCalled();
-    });
-
-    it('should handle list with multiple items', () => {
-      const handlers = [];
-      for (let i = 0; i < 10; i++) {
-        handlers[i] = jest.fn();
-        eventSystem.registerHandler(`item-${i}`, 'click', handlers[i]);
-      }
-
-      const listHandler = jest.fn();
-      eventSystem.registerHandler('list', 'click', listHandler);
-
-      // Click on item 5
-      const nativeEvent = {
-        type: 'click',
-        target: { dataset: { elementId: 'item-5' } },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      eventSystem.dispatchToHandlers('item-5', 'click', nativeEvent);
-      eventSystem.dispatchToHandlers('list', 'click', nativeEvent);
-
-      // Only item-5 and list handlers should be called
-      expect(handlers[5]).toHaveBeenCalled();
-      expect(handlers[0]).not.toHaveBeenCalled();
-      expect(listHandler).toHaveBeenCalled();
-    });
-
-    it('should handle nested identical event types', () => {
-      const outerHandler = jest.fn();
-      const innerHandler = jest.fn();
-      const innerInnerHandler = jest.fn();
-
-      eventSystem.registerHandler('outer', 'click', outerHandler);
-      eventSystem.registerHandler('inner', 'click', innerHandler);
-      eventSystem.registerHandler('inner-inner', 'click', innerInnerHandler);
-
-      const nativeEvent = {
-        type: 'click',
-        target: { dataset: { elementId: 'inner-inner' } },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      eventSystem.dispatchToHandlers('inner-inner', 'click', nativeEvent);
-      eventSystem.dispatchToHandlers('inner', 'click', nativeEvent);
-      eventSystem.dispatchToHandlers('outer', 'click', nativeEvent);
-
-      expect(innerInnerHandler).toHaveBeenCalled();
-      expect(innerHandler).toHaveBeenCalled();
-      expect(outerHandler).toHaveBeenCalled();
-    });
-  });
-
-  describe('Lifecycle & Cleanup', () => {
-    it('should cleanup element handlers on unmount', () => {
-      eventSystem.registerHandler('elem-1', 'click', jest.fn());
-      eventSystem.registerHandler('elem-1', 'change', jest.fn());
-      eventSystem.registerHandler('elem-1', 'focus', jest.fn());
-
-      expect(eventSystem.getHandlerCount('elem-1')).toBe(3);
-
-      eventSystem.clearElement('elem-1');
-
-      expect(eventSystem.getHandlerCount('elem-1')).toBe(0);
-      expect(eventSystem.hasHandlers('elem-1')).toBe(false);
-    });
-
-    it('should handle cleanup of element with no handlers', () => {
-      expect(() => eventSystem.clearElement('non-existent')).not.toThrow();
-    });
-
-    it('should cleanup all handlers on app unmount', () => {
-      for (let i = 0; i < 5; i++) {
-        for (let j = 0; j < 3; j++) {
-          eventSystem.registerHandler(`elem-${i}`, `event-${j}`, jest.fn());
-        }
-      }
-
-      expect(eventSystem.handlerRegistry.size).toBe(5);
-
-      eventSystem.clearAll();
-
-      expect(eventSystem.handlerRegistry.size).toBe(0);
-    });
-  });
-
-  describe('Different Event Types', () => {
-    it('should handle click events', () => {
-      const handler = jest.fn();
-      eventSystem.registerHandler('btn', 'click', handler);
-
-      const nativeEvent = {
-        type: 'click',
-        button: 0,
-        buttons: 1,
-        target: { dataset: { elementId: 'btn' } },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      eventSystem.dispatchToHandlers('btn', 'click', nativeEvent);
-
-      expect(handler).toHaveBeenCalledWith(expect.any(SyntheticEvent));
-      const event = handler.mock.calls[0][0];
-      expect(event.type).toBe('click');
-      expect(event.button).toBe(0);
-    });
-
-    it('should handle input events', () => {
-      const handler = jest.fn();
-      eventSystem.registerHandler('input', 'input', handler);
-
-      const nativeEvent = {
-        type: 'input',
-        target: {
-          dataset: { elementId: 'input' },
-          value: 'hello'
-        },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      eventSystem.dispatchToHandlers('input', 'input', nativeEvent);
-
-      const event = handler.mock.calls[0][0];
-      expect(event.value).toBe('hello');
-    });
-
-    it('should handle keyboard events', () => {
-      const handler = jest.fn();
-      eventSystem.registerHandler('input', 'keydown', handler);
-
-      const nativeEvent = {
-        type: 'keydown',
-        key: 'Enter',
-        keyCode: 13,
-        target: { dataset: { elementId: 'input' } },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      eventSystem.dispatchToHandlers('input', 'keydown', nativeEvent);
-
-      const event = handler.mock.calls[0][0];
-      expect(event.key).toBe('Enter');
-      expect(event.keyCode).toBe(13);
-    });
-
-    it('should handle touch events', () => {
-      const handler = jest.fn();
-      eventSystem.registerHandler('elem', 'touchstart', handler);
-
-      const nativeEvent = {
-        type: 'touchstart',
-        touches: [{ clientX: 100, clientY: 200 }],
-        target: { dataset: { elementId: 'elem' } },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      eventSystem.dispatchToHandlers('elem', 'touchstart', nativeEvent);
-
-      const event = handler.mock.calls[0][0];
-      expect(event.touches.length).toBe(1);
-    });
-
-    it('should handle focus events', () => {
-      const focusHandler = jest.fn();
-      const blurHandler = jest.fn();
-
-      eventSystem.registerHandler('input', 'focus', focusHandler);
-      eventSystem.registerHandler('input', 'blur', blurHandler);
-
-      const focusEvent = {
-        type: 'focus',
-        target: { dataset: { elementId: 'input' } },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      const blurEvent = {
-        type: 'blur',
-        target: { dataset: { elementId: 'input' } },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      eventSystem.dispatchToHandlers('input', 'focus', focusEvent);
-      eventSystem.dispatchToHandlers('input', 'blur', blurEvent);
-
-      expect(focusHandler).toHaveBeenCalled();
-      expect(blurHandler).toHaveBeenCalled();
-    });
-  });
-
-  describe('Performance Under Load', () => {
-    it('should handle many elements with handlers', () => {
-      const elementCount = 1000;
-      const startTime = performance.now();
-
-      for (let i = 0; i < elementCount; i++) {
-        eventSystem.registerHandler(`elem-${i}`, 'click', jest.fn());
-      }
-
-      const registerTime = performance.now() - startTime;
-
-      expect(eventSystem.handlerRegistry.size).toBe(elementCount);
-      expect(registerTime).toBeLessThan(1000); // Should complete in < 1 second
-    });
-
-    it('should handle many handlers on single element', () => {
-      const handlerCount = 100;
-      const startTime = performance.now();
-
-      for (let i = 0; i < handlerCount; i++) {
-        eventSystem.registerHandler('elem-1', 'click', jest.fn());
-      }
-
-      const registerTime = performance.now() - startTime;
-
-      expect(eventSystem.getHandlerCount('elem-1')).toBe(handlerCount);
-      expect(registerTime).toBeLessThan(500); // Should complete in < 500ms
-    });
-
-    it('should dispatch events quickly', () => {
-      const handlers = [];
-      for (let i = 0; i < 100; i++) {
-        const handler = jest.fn();
-        handlers.push(handler);
-        eventSystem.registerHandler('elem-1', 'click', handler);
-      }
-
-      const nativeEvent = {
-        type: 'click',
-        target: { dataset: { elementId: 'elem-1' } },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      const startTime = performance.now();
-      eventSystem.dispatchToHandlers('elem-1', 'click', nativeEvent);
-      const dispatchTime = performance.now() - startTime;
-
-      expect(dispatchTime).toBeLessThan(100); // Should dispatch in < 100ms
-      handlers.forEach(h => expect(h).toHaveBeenCalled());
-    });
-  });
-
-  describe('Event Statistics & Tracking', () => {
-    it('should track event dispatch statistics', () => {
-      eventSystem.registerHandler('elem-1', 'click', jest.fn());
-
-      const nativeEvent = {
-        type: 'click',
-        target: { dataset: { elementId: 'elem-1' } },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      eventSystem.dispatchToHandlers('elem-1', 'click', nativeEvent);
-      eventSystem.dispatchToHandlers('elem-1', 'click', nativeEvent);
-
-      const stats = eventSystem.getStats();
-
-      expect(stats.handlersRegistered).toBe(1);
-      expect(stats.eventsDispatched).toBe(2);
-    });
-
-    it('should provide accurate statistics', () => {
-      const nativeEvent = {
-        type: 'click',
-        target: { dataset: { elementId: 'elem' } },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      // Register handlers
-      eventSystem.registerHandler('elem-1', 'click', jest.fn());
-      eventSystem.registerHandler('elem-1', 'change', jest.fn());
-      eventSystem.registerHandler('elem-2', 'click', jest.fn());
-
-      const stats = eventSystem.getStats();
-
-      expect(stats.handlersRegistered).toBe(3);
-      expect(stats.elementsWithHandlers).toBe(2);
-      expect(stats.totalHandlers).toBe(3);
-    });
-  });
-
-  describe('Real-world Form Handling', () => {
-    it('should handle form submission with multiple field changes', () => {
-      const form = { id: 'form' };
-      const emailInput = { id: 'email' };
-      const passwordInput = { id: 'password' };
-      const submitBtn = { id: 'submit' };
-
-      const emailChangeHandler = jest.fn();
-      const passwordChangeHandler = jest.fn();
-      const submitHandler = jest.fn();
-      const formSubmitHandler = jest.fn();
-
-      eventSystem.registerHandler('email', 'change', emailChangeHandler);
-      eventSystem.registerHandler('password', 'change', passwordChangeHandler);
-      eventSystem.registerHandler('submit', 'click', submitHandler);
-      eventSystem.registerHandler('form', 'submit', formSubmitHandler);
-
-      // Simulate form interaction
-      const emailChangeEvent = {
-        type: 'change',
-        target: { dataset: { elementId: 'email' }, value: 'test@example.com' },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      eventSystem.dispatchToHandlers('email', 'change', emailChangeEvent);
-      expect(emailChangeHandler).toHaveBeenCalled();
-
-      const passwordChangeEvent = {
-        type: 'change',
-        target: { dataset: { elementId: 'password' }, value: 'password' },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      eventSystem.dispatchToHandlers('password', 'change', passwordChangeEvent);
-      expect(passwordChangeHandler).toHaveBeenCalled();
-
-      const submitClickEvent = {
-        type: 'click',
-        target: { dataset: { elementId: 'submit' } },
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn()
-      };
-
-      eventSystem.dispatchToHandlers('submit', 'click', submitClickEvent);
-      eventSystem.dispatchToHandlers('form', 'submit', submitClickEvent);
-
-      expect(submitHandler).toHaveBeenCalled();
-      expect(formSubmitHandler).toHaveBeenCalled();
-    });
-  });
-});
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/test/flutterjs_runtime.test.js b/packages/flutterjs_engine/src/runtime/test/flutterjs_runtime.test.js
deleted file mode 100644
index f7bed52a..00000000
--- a/packages/flutterjs_engine/src/runtime/test/flutterjs_runtime.test.js
+++ /dev/null
@@ -1,628 +0,0 @@
-/**
- * FlutterJS Runtime Integration Tests (Fixed)
- * 
- * Key fixes:
- * - Proper HTMLElement mock with instanceof support
- * - document.addEventListener implementation
- * - Better event listener tracking
- * - More robust mock DOM
- */
-
-import { FlutterJSRuntime, runApp, hotReload, getRuntime, dispose } from '../src/flutterjs_runtime.js';
-
-// ============================================================================
-// IMPROVED DOM MOCK FOR NODE.JS
-// ============================================================================
-
-class MockHTMLElement {
-  constructor(tag = 'div') {
-    this.tag = tag;
-    this.className = '';
-    this.style = {};
-    this.textContent = '';
-    this.children = [];
-    this._listeners = {};
-  }
-
-  setAttribute(key, value) {
-    this[key] = value;
-  }
-
-  appendChild(child) {
-    this.children.push(child);
-    return child;
-  }
-
-  addEventListener(type, listener) {
-    if (!this._listeners[type]) {
-      this._listeners[type] = [];
-    }
-    this._listeners[type].push(listener);
-  }
-
-  removeEventListener(type, listener) {
-    if (this._listeners[type]) {
-      const idx = this._listeners[type].indexOf(listener);
-      if (idx > -1) {
-        this._listeners[type].splice(idx, 1);
-      }
-    }
-  }
-
-  get firstChild() {
-    return this.children[0] || null;
-  }
-}
-
-if (typeof document === 'undefined') {
-  global.HTMLElement = MockHTMLElement;
-
-  global.document = {
-    createElement: (tag) => new MockHTMLElement(tag),
-    getElementById: (id) => null,
-    body: new MockHTMLElement('body'),
-    createTextNode: (text) => ({ nodeValue: text, isTextNode: true }),
-    _listeners: {},
-    addEventListener(type, listener) {
-      if (!this._listeners[type]) {
-        this._listeners[type] = [];
-      }
-      this._listeners[type].push(listener);
-    },
-    removeEventListener(type, listener) {
-      if (this._listeners[type]) {
-        const idx = this._listeners[type].indexOf(listener);
-        if (idx > -1) {
-          this._listeners[type].splice(idx, 1);
-        }
-      }
-    }
-  };
-
-  global.performance = {
-    now: () => Date.now()
-  };
-
-  global.requestAnimationFrame = (cb) => {
-    setTimeout(cb, 0);
-    return Date.now();
-  };
-}
-
-// ============================================================================
-// SIMPLE TEST FRAMEWORK
-// ============================================================================
-
-class TestSuite {
-  constructor(name) {
-    this.name = name;
-    this.passed = 0;
-    this.failed = 0;
-  }
-
-  test(testName, fn) {
-    try {
-      fn.call(this);
-      this.passed++;
-      console.log(`  ✓ ${testName}`);
-    } catch (error) {
-      this.failed++;
-      console.error(`  ✗ ${testName}`);
-      console.error(`    ${error.message}`);
-    }
-  }
-
-  assertEqual(actual, expected, message = '') {
-    if (actual !== expected) {
-      throw new Error(
-        `${message}\nExpected: ${expected}\nActual: ${actual}`
-      );
-    }
-  }
-
-  assertNotNull(value, message = 'Expected non-null value') {
-    if (value === null || value === undefined) {
-      throw new Error(message);
-    }
-  }
-
-  assertTrue(value, message = 'Expected true') {
-    if (value !== true) {
-      throw new Error(message);
-    }
-  }
-
-  assertFalse(value, message = 'Expected false') {
-    if (value !== false) {
-      throw new Error(message);
-    }
-  }
-
-  assertThrows(fn, message = 'Expected function to throw') {
-    let thrown = false;
-    try {
-      fn();
-    } catch (error) {
-      thrown = true;
-    }
-    if (!thrown) {
-      throw new Error(message);
-    }
-  }
-
-  report() {
-    console.log(`\n${this.name}`);
-    console.log(`${this.passed + this.failed} tests: ${this.passed} passed, ${this.failed} failed`);
-    return this.failed === 0;
-  }
-}
-
-// ============================================================================
-// TEST WIDGETS
-// ============================================================================
-
-class Widget {
-  constructor(options = {}) {
-    this.key = options.key;
-  }
-}
-
-class StatelessWidget extends Widget {
-  build(context) {
-    return { tag: 'div', children: ['Test Widget'] };
-  }
-}
-
-// ============================================================================
-// TEST SUITES
-// ============================================================================
-
-const suites = [];
-
-// Test Suite 1: Runtime Initialization
-const suite1 = new TestSuite('FlutterJS Runtime Initialization');
-suites.push(suite1);
-
-suite1.test('should create runtime instance', function() {
-  const runtime = new FlutterJSRuntime();
-  this.assertNotNull(runtime);
-  this.assertFalse(runtime.isInitialized());
-});
-
-suite1.test('should initialize with default config', function() {
-  const runtime = new FlutterJSRuntime();
-  runtime.initialize();
-  this.assertTrue(runtime.isInitialized());
-  runtime.dispose();
-});
-
-suite1.test('should initialize with custom config', function() {
-  const runtime = new FlutterJSRuntime({
-    debugMode: true,
-    routing: true
-  });
-  runtime.initialize();
-  this.assertTrue(runtime.isInitialized());
-  this.assertTrue(runtime.config.debugMode);
-  this.assertTrue(runtime.config.routing);
-  runtime.dispose();
-});
-
-suite1.test('should prevent double initialization', function() {
-  const runtime = new FlutterJSRuntime();
-  runtime.initialize();
-  runtime.initialize(); // Should be no-op
-  this.assertTrue(runtime.isInitialized());
-  runtime.dispose();
-});
-
-suite1.test('should initialize all subsystems', function() {
-  const runtime = new FlutterJSRuntime();
-  const container = document.createElement('div');
-  runtime.initialize({ rootElement: container });
-
-  this.assertNotNull(runtime.engine);
-  this.assertNotNull(runtime.eventSystem);
-  this.assertNotNull(runtime.gestureRecognizer);
-  this.assertNotNull(runtime.focusManager);
-  this.assertNotNull(runtime.memoryManager);
-  this.assertNotNull(runtime.serviceRegistry);
-  this.assertNotNull(runtime.stateManager);
-
-  runtime.dispose();
-});
-
-suite1.test('should register built-in services', function() {
-  const runtime = new FlutterJSRuntime();
-  runtime.initialize();
-
-  this.assertTrue(runtime.serviceRegistry.has('theme'));
-  this.assertTrue(runtime.serviceRegistry.has('mediaQuery'));
-  this.assertTrue(runtime.serviceRegistry.has('logger'));
-
-  runtime.dispose();
-});
-
-suite1.test('should track initialization time', function() {
-  const runtime = new FlutterJSRuntime();
-  runtime.initialize();
-
-  this.assertTrue(runtime.stats.initTime >= 0);
-
-  runtime.dispose();
-});
-
-// Test Suite 2: Application Mounting
-const suite2 = new TestSuite('FlutterJS Application Mounting');
-suites.push(suite2);
-
-suite2.test('should mount application', function() {
-  const runtime = new FlutterJSRuntime();
-  const widget = new StatelessWidget();
-  const container = document.createElement('div');
-
-  runtime.runApp(widget, container);
-
-  this.assertTrue(runtime.isMounted());
-  this.assertEqual(runtime.rootWidget, widget);
-  this.assertEqual(runtime.containerElement, container);
-
-  runtime.dispose();
-});
-
-suite2.test('should auto-initialize on mount', function() {
-  const runtime = new FlutterJSRuntime();
-  const widget = new StatelessWidget();
-
-  runtime.runApp(widget, document.createElement('div'));
-
-  this.assertTrue(runtime.isInitialized());
-  this.assertTrue(runtime.isMounted());
-
-  runtime.dispose();
-});
-
-suite2.test('should track mount time', function() {
-  const runtime = new FlutterJSRuntime();
-  runtime.runApp(new StatelessWidget(), document.createElement('div'));
-
-  this.assertTrue(runtime.stats.mountTime > 0);
-
-  runtime.dispose();
-});
-
-suite2.test('should call mount lifecycle hooks', function() {
-  const runtime = new FlutterJSRuntime();
-  let beforeMountCalled = false;
-  let afterMountCalled = false;
-
-  runtime.on('beforeMount', () => { beforeMountCalled = true; });
-  runtime.on('afterMount', () => { afterMountCalled = true; });
-
-  runtime.runApp(new StatelessWidget(), document.createElement('div'));
-
-  this.assertTrue(beforeMountCalled);
-  this.assertTrue(afterMountCalled);
-
-  runtime.dispose();
-});
-
-suite2.test('should require root widget', function() {
-  const runtime = new FlutterJSRuntime();
-
-  this.assertThrows(() => {
-    runtime.runApp(null, document.createElement('div'));
-  });
-});
-
-// Test Suite 3: Hot Reload
-const suite3 = new TestSuite('FlutterJS Hot Reload');
-suites.push(suite3);
-
-suite3.test('should hot reload application', function() {
-  const runtime = new FlutterJSRuntime({ enableHotReload: true });
-  const widget1 = new StatelessWidget();
-  const widget2 = new StatelessWidget();
-
-  runtime.runApp(widget1, document.createElement('div'));
-  runtime.hotReload(widget2);
-
-  this.assertEqual(runtime.rootWidget, widget2);
-
-  runtime.dispose();
-});
-
-suite3.test('should skip hot reload if disabled', function() {
-  const runtime = new FlutterJSRuntime({ enableHotReload: false });
-  const widget1 = new StatelessWidget();
-  const widget2 = new StatelessWidget();
-
-  runtime.runApp(widget1, document.createElement('div'));
-  runtime.hotReload(widget2);
-
-  this.assertEqual(runtime.rootWidget, widget1); // Should not change
-
-  runtime.dispose();
-});
-
-suite3.test('should skip hot reload if not mounted', function() {
-  const runtime = new FlutterJSRuntime({ enableHotReload: true });
-  const widget = new StatelessWidget();
-
-  runtime.hotReload(widget); // Should be no-op
-
-  this.assertFalse(runtime.isMounted());
-});
-
-// Test Suite 4: Service Registry
-const suite4 = new TestSuite('FlutterJS Service Registry');
-suites.push(suite4);
-
-suite4.test('should access registered services', function() {
-  const runtime = new FlutterJSRuntime();
-  runtime.initialize();
-
-  const theme = runtime.serviceRegistry.get('theme');
-  this.assertNotNull(theme);
-
-  runtime.dispose();
-});
-
-suite4.test('should lazy-load services', function() {
-  const runtime = new FlutterJSRuntime();
-  runtime.initialize();
-
-  const theme1 = runtime.serviceRegistry.get('theme');
-  const theme2 = runtime.serviceRegistry.get('theme');
-
-  this.assertEqual(theme1, theme2); // Should be same instance
-
-  runtime.dispose();
-});
-
-suite4.test('should register routing service when enabled', function() {
-  const runtime = new FlutterJSRuntime({ routing: true });
-  runtime.initialize();
-
-  this.assertTrue(runtime.serviceRegistry.has('navigator'));
-
-  runtime.dispose();
-});
-
-suite4.test('should not register routing service when disabled', function() {
-  const runtime = new FlutterJSRuntime({ routing: false });
-  runtime.initialize();
-
-  this.assertFalse(runtime.serviceRegistry.has('navigator'));
-
-  runtime.dispose();
-});
-
-// Test Suite 5: Unmounting & Cleanup
-const suite5 = new TestSuite('FlutterJS Unmounting & Cleanup');
-suites.push(suite5);
-
-suite5.test('should unmount application', function() {
-  const runtime = new FlutterJSRuntime();
-  runtime.runApp(new StatelessWidget(), document.createElement('div'));
-
-  runtime.unmount();
-
-  this.assertFalse(runtime.isMounted());
-});
-
-suite5.test('should call unmount lifecycle hooks', function() {
-  const runtime = new FlutterJSRuntime();
-  let beforeUnmountCalled = false;
-  let afterUnmountCalled = false;
-
-  runtime.on('beforeUnmount', () => { beforeUnmountCalled = true; });
-  runtime.on('afterUnmount', () => { afterUnmountCalled = true; });
-
-  runtime.runApp(new StatelessWidget(), document.createElement('div'));
-  runtime.unmount();
-
-  this.assertTrue(beforeUnmountCalled);
-  this.assertTrue(afterUnmountCalled);
-});
-
-suite5.test('should dispose all subsystems on unmount', function() {
-  const runtime = new FlutterJSRuntime();
-  runtime.runApp(new StatelessWidget(), document.createElement('div'));
-
-  runtime.unmount();
-
-  runtime.dispose();
-  this.assertFalse(runtime.isInitialized());
-});
-
-suite5.test('should dispose runtime completely', function() {
-  const runtime = new FlutterJSRuntime();
-  runtime.runApp(new StatelessWidget(), document.createElement('div'));
-
-  runtime.dispose();
-
-  this.assertFalse(runtime.isInitialized());
-  this.assertFalse(runtime.isMounted());
-});
-
-// Test Suite 6: Lifecycle Hooks
-const suite6 = new TestSuite('FlutterJS Lifecycle Hooks');
-suites.push(suite6);
-
-suite6.test('should register lifecycle hooks', function() {
-  const runtime = new FlutterJSRuntime();
-  let called = false;
-
-  runtime.on('afterInit', () => { called = true; });
-  runtime.initialize();
-
-  this.assertTrue(called);
-
-  runtime.dispose();
-});
-
-suite6.test('should call multiple hooks in order', function() {
-  const runtime = new FlutterJSRuntime();
-  const order = [];
-
-  runtime.on('beforeInit', () => { order.push('before1'); });
-  runtime.on('beforeInit', () => { order.push('before2'); });
-  runtime.on('afterInit', () => { order.push('after1'); });
-  runtime.on('afterInit', () => { order.push('after2'); });
-
-  runtime.initialize();
-
-  this.assertEqual(order[0], 'before1');
-  this.assertEqual(order[1], 'before2');
-  this.assertEqual(order[2], 'after1');
-  this.assertEqual(order[3], 'after2');
-
-  runtime.dispose();
-});
-
-suite6.test('should handle hook errors gracefully', function() {
-  const runtime = new FlutterJSRuntime();
-  let secondHookCalled = false;
-
-  runtime.on('afterInit', () => {
-    throw new Error('Hook error');
-  });
-  runtime.on('afterInit', () => {
-    secondHookCalled = true;
-  });
-
-  runtime.initialize();
-
-  this.assertTrue(secondHookCalled); // Should still call other hooks
-
-  runtime.dispose();
-});
-
-// Test Suite 7: Statistics & Monitoring
-const suite7 = new TestSuite('FlutterJS Statistics & Monitoring');
-suites.push(suite7);
-
-suite7.test('should provide runtime statistics', function() {
-  const runtime = new FlutterJSRuntime();
-  runtime.runApp(new StatelessWidget(), document.createElement('div'));
-
-  const stats = runtime.getStats();
-
-  this.assertNotNull(stats);
-  this.assertTrue(stats.initTime >= 0);
-  this.assertTrue(stats.mountTime >= 0);
-  this.assertEqual(stats.initialized, true);
-  this.assertEqual(stats.mounted, true);
-
-  runtime.dispose();
-});
-
-suite7.test('should provide subsystem statistics', function() {
-  const runtime = new FlutterJSRuntime();
-  runtime.runApp(new StatelessWidget(), document.createElement('div'));
-
-  const stats = runtime.getStats();
-
-  this.assertNotNull(stats.engine);
-  this.assertNotNull(stats.memory);
-  this.assertNotNull(stats.services);
-
-  runtime.dispose();
-});
-
-// Test Suite 8: Error Handling
-const suite8 = new TestSuite('FlutterJS Error Handling');
-suites.push(suite8);
-
-suite8.test('should register error handlers', function() {
-  const runtime = new FlutterJSRuntime();
-
-  runtime.onError(() => { });
-
-  this.assertTrue(runtime.errorHandlers.length > 0);
-
-  runtime.dispose();
-});
-
-suite8.test('should support method chaining', function() {
-  const runtime = new FlutterJSRuntime();
-
-  const result = runtime
-    .initialize()
-    .on('afterInit', () => { })
-    .onError(() => { });
-
-  this.assertEqual(result, runtime);
-
-  runtime.dispose();
-});
-
-// Test Suite 9: Public API
-const suite9 = new TestSuite('FlutterJS Public API');
-suites.push(suite9);
-
-suite9.test('should expose runApp function', function() {
-  this.assertNotNull(runApp);
-  this.assertEqual(typeof runApp, 'function');
-});
-
-suite9.test('should expose getRuntime function', function() {
-  this.assertNotNull(getRuntime);
-  this.assertEqual(typeof getRuntime, 'function');
-});
-
-suite9.test('should expose hotReload function', function() {
-  this.assertNotNull(hotReload);
-  this.assertEqual(typeof hotReload, 'function');
-});
-
-suite9.test('should expose dispose function', function() {
-  this.assertNotNull(dispose);
-  this.assertEqual(typeof dispose, 'function');
-});
-
-suite9.test('should create runtime with runApp', function() {
-  const widget = new StatelessWidget();
-  const container = document.createElement('div');
-
-  const runtime = runApp(widget, container);
-
-  this.assertNotNull(runtime);
-  this.assertTrue(runtime.isMounted());
-  this.assertEqual(getRuntime(), runtime);
-
-  dispose();
-});
-
-// ============================================================================
-// TEST RESULTS
-// ============================================================================
-
-console.log('\n' + '='.repeat(60));
-console.log('FLUTTERJS RUNTIME TEST SUITE (FIXED)');
-console.log('='.repeat(60));
-
-let totalPassed = 0;
-let totalFailed = 0;
-
-suites.forEach(suite => {
-  const passed = suite.report();
-  totalPassed += suite.passed;
-  totalFailed += suite.failed;
-});
-
-console.log('\n' + '='.repeat(60));
-console.log(`TOTAL: ${totalPassed + totalFailed} tests`);
-console.log(`PASSED: ${totalPassed}`);
-console.log(`FAILED: ${totalFailed}`);
-console.log(`SUCCESS RATE: ${((totalPassed / (totalPassed + totalFailed)) * 100).toFixed(1)}%`);
-console.log('='.repeat(60));
-
-if (totalFailed === 0) {
-  console.log('✓ All tests passed!');
-  process.exit(0);
-} else {
-  console.log(`✗ ${totalFailed} test(s) failed`);
-  process.exit(1);
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/test/focus_manager.test.js b/packages/flutterjs_engine/src/runtime/test/focus_manager.test.js
deleted file mode 100644
index 5dccdb55..00000000
--- a/packages/flutterjs_engine/src/runtime/test/focus_manager.test.js
+++ /dev/null
@@ -1,624 +0,0 @@
-/**
- * Focus Manager - Test Suite (ES Module Version)
- * Works with "type": "module" in package.json
- */
-
-import { fileURLToPath } from 'url';
-import { dirname } from 'path';
-import { FocusManager } from '../src/focus_manager.js';
-
-// Get __filename and __dirname for ES modules
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-console.log('📋 Starting diagnostic checks...\n');
-
-// Check 1: Node.js environment
-console.log('✓ Check 1: Node.js environment detected');
-console.log(`  - Node version: ${process.version}`);
-console.log(`  - Current directory: ${process.cwd()}`);
-console.log(`  - Test file location: ${__filename}\n`);
-
-// Check 2: FocusManager import
-console.log('✓ Check 2: FocusManager loaded successfully');
-console.log(`  - FocusManager type: ${typeof FocusManager}`);
-console.log(`  - FocusManager is class: ${FocusManager.toString().includes('class')}\n`);
-
-// Check 3: Setup Mock DOM
-console.log('✓ Check 3: Setting up mock DOM environment...');
-
-const createMockDOM = () => {
-  const mockElements = new Map();
-
-  return {
-    activeElement: null,
-    body: {
-      innerHTML: '',
-      appendChild() { },
-      removeChild() { },
-      children: []
-    },
-
-    createElement(tag) {
-      const element = {
-        tag,
-        id: '',
-        textContent: '',
-        className: '',
-        style: {},
-        tabIndex: 0,
-        children: [],
-        _focused: false,
-        _listeners: {},
-
-        focus() {
-          this._focused = true;
-          mockElements.set(this.id || 'unknown', this);
-        },
-
-        blur() {
-          this._focused = false;
-        },
-
-        addEventListener(event, handler) {
-          if (!this._listeners[event]) {
-            this._listeners[event] = [];
-          }
-          this._listeners[event].push(handler);
-        },
-
-        removeEventListener(event, handler) {
-          if (!this._listeners[event]) return;
-          const index = this._listeners[event].indexOf(handler);
-          if (index > -1) {
-            this._listeners[event].splice(index, 1);
-          }
-        },
-
-        compareDocumentPosition(other) {
-          if (this.id < other.id) return 4;
-          if (this.id > other.id) return 2;
-          return 0;
-        },
-
-        appendChild(child) {
-          this.children.push(child);
-        }
-      };
-
-      return element;
-    },
-
-    getElementById(id) {
-      return mockElements.get(id) || null;
-    },
-
-    addEventListener(event, handler) {
-      if (!this._eventListeners) this._eventListeners = {};
-      if (!this._eventListeners[event]) {
-        this._eventListeners[event] = [];
-      }
-      this._eventListeners[event].push(handler);
-    },
-
-    removeEventListener(event, handler) {
-      if (!this._eventListeners || !this._eventListeners[event]) return;
-      const index = this._eventListeners[event].indexOf(handler);
-      if (index > -1) {
-        this._eventListeners[event].splice(index, 1);
-      }
-    },
-
-    dispatchEvent(event) {
-      return true;
-    }
-  };
-};
-
-if (typeof document === 'undefined') {
-  global.document = createMockDOM();
-  console.log('  - document object: ✓ Created');
-}
-
-if (typeof Node === 'undefined') {
-  global.Node = {
-    DOCUMENT_POSITION_FOLLOWING: 4,
-    DOCUMENT_POSITION_PRECEDING: 2
-  };
-  console.log('  - Node object: ✓ Created');
-}
-
-if (typeof requestAnimationFrame === 'undefined') {
-  global.requestAnimationFrame = (cb) => setTimeout(cb, 16);
-  console.log('  - requestAnimationFrame: ✓ Polyfilled');
-}
-
-console.log('');
-
-// Check 4: Create test instance
-console.log('✓ Check 4: Creating FocusManager test instance...');
-try {
-  class MockRuntime {
-    constructor() {
-      this.name = 'MockRuntime';
-    }
-  }
-
-  const runtime = new MockRuntime();
-  const manager = new FocusManager(runtime);
-  console.log(`  - FocusManager instance: ✓ Created`);
-  console.log(`  - Instance methods: ${Object.getOwnPropertyNames(Object.getPrototypeOf(manager)).length}`);
-  console.log('');
-} catch (error) {
-  console.log(`  ✗ Error creating instance: ${error.message}`);
-  console.log(`  Stack: ${error.stack}`);
-  process.exit(1);
-}
-
-// Check 5: Test a simple operation
-console.log('✓ Check 5: Running simple test operation...');
-try {
-  class MockRuntime {
-    constructor() {
-      this.name = 'MockRuntime';
-    }
-  }
-
-  const runtime = new MockRuntime();
-  const manager = new FocusManager(runtime);
-
-  const element = document.createElement('button');
-  element.id = 'test-btn';
-
-  manager.registerFocusable('test-btn', element);
-  console.log(`  - Register focusable: ✓ Success`);
-
-  const success = manager.requestFocus('test-btn');
-  console.log(`  - Request focus: ${success ? '✓ Success' : '✗ Failed'}`);
-
-  const currentFocus = manager.currentFocus;
-  console.log(`  - Current focus: ${currentFocus === 'test-btn' ? '✓ test-btn' : `✗ ${currentFocus}`}`);
-
-  manager.dispose();
-  console.log(`  - Dispose: ✓ Success`);
-  console.log('');
-} catch (error) {
-  console.log(`  ✗ Error during test: ${error.message}`);
-  console.log(`  Stack: ${error.stack}`);
-  process.exit(1);
-}
-
-// All checks passed
-console.log('='.repeat(60));
-console.log('✅ ALL DIAGNOSTIC CHECKS PASSED!');
-console.log('='.repeat(60));
-console.log('\n🚀 Ready to run full test suite. Starting tests...\n');
-
-// ============================================================================
-// NOW RUN THE ACTUAL TESTS
-// ============================================================================
-
-class MockRuntime {
-  constructor() {
-    this.name = 'MockRuntime';
-  }
-}
-
-class TestHelper {
-  static createMockElement(id) {
-    const element = document.createElement('button');
-    element.id = id;
-    element.textContent = `Button ${id}`;
-    return element;
-  }
-
-  static cleanup() {
-    if (document.body) {
-      document.body.innerHTML = '';
-      document.body.children = [];
-    }
-  }
-
-  static wait(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-  }
-}
-
-class FocusManagerTests {
-  constructor(FocusManager) {
-    this.FocusManager = FocusManager;
-    this.results = {
-      total: 0,
-      passed: 0,
-      failed: 0,
-      errors: []
-    };
-  }
-
-  assert(condition, message) {
-    this.results.total++;
-    if (condition) {
-      this.results.passed++;
-      console.log(`  ✓ ${message}`);
-    } else {
-      this.results.failed++;
-      this.results.errors.push(message);
-      console.error(`  ✗ ${message}`);
-    }
-  }
-
-  async runAll() {
-    console.log('--- Test 1: Basic Registration ---');
-    await this.testRegistration();
-
-    console.log('\n--- Test 2: Basic Focus ---');
-    await this.testRequestFocus();
-
-    console.log('\n--- Test 3: Basic Unfocus ---');
-    await this.testUnfocus();
-
-    console.log('\n--- Test 4: Focus Navigation (Forward) ---');
-    await this.testMoveFocusForward();
-
-    console.log('\n--- Test 5: Focus Navigation (Backward) ---');
-    await this.testMoveFocusBackward();
-
-    console.log('\n--- Test 6: Tab Order ---');
-    await this.testTabOrder();
-
-    console.log('\n--- Test 7: Focus Scopes ---');
-    await this.testCreateScope();
-
-    console.log('\n--- Test 8: Push/Pop Scope ---');
-    await this.testPushPopScope();
-
-    console.log('\n--- Test 9: Scope Restriction ---');
-    await this.testScopeRestriction();
-
-    console.log('\n--- Test 10: Focus Change Listener ---');
-    await this.testFocusChangeListener();
-
-    console.log('\n--- Test 11: Skip Traversal ---');
-    await this.testSkipTraversal();
-
-    console.log('\n--- Test 12: Unknown Element ---');
-    await this.testFocusUnknownElement();
-
-    console.log('\n--- Test 13: Disabled Element ---');
-    await this.testFocusDisabledElement();
-
-    console.log('\n--- Test 14: Concurrent Requests ---');
-    await this.testConcurrentFocusRequests();
-
-    console.log('\n--- Test 15: Cleanup/Dispose ---');
-    await this.testDispose();
-
-    this.printResults();
-  }
-
-  async testRegistration() {
-    TestHelper.cleanup();
-    const manager = new this.FocusManager(new MockRuntime());
-    const element = TestHelper.createMockElement('btn1');
-
-    manager.registerFocusable('btn1', element);
-    this.assert(manager.focusableElements.has('btn1'), 'Element registered');
-
-    const info = manager.getElementInfo('btn1');
-    this.assert(info && info.elementId === 'btn1', 'Element info accessible');
-
-    manager.dispose();
-    TestHelper.cleanup();
-  }
-
-  async testRequestFocus() {
-    TestHelper.cleanup();
-    const manager = new this.FocusManager(new MockRuntime());
-    const element = TestHelper.createMockElement('btn1');
-
-    manager.registerFocusable('btn1', element);
-    const success = manager.requestFocus('btn1');
-
-    this.assert(success, 'Focus request succeeded');
-    this.assert(manager.currentFocus === 'btn1', 'Current focus updated');
-
-    manager.dispose();
-    TestHelper.cleanup();
-  }
-
-  async testUnfocus() {
-    TestHelper.cleanup();
-    const manager = new this.FocusManager(new MockRuntime());
-    const element = TestHelper.createMockElement('btn1');
-
-    manager.registerFocusable('btn1', element);
-    manager.requestFocus('btn1');
-    manager.unfocus('btn1');
-
-    this.assert(manager.currentFocus === null, 'Focus cleared');
-
-    manager.dispose();
-    TestHelper.cleanup();
-  }
-
-  async testMoveFocusForward() {
-    TestHelper.cleanup();
-    const manager = new this.FocusManager(new MockRuntime());
-    const btn1 = TestHelper.createMockElement('btn1');
-    const btn2 = TestHelper.createMockElement('btn2');
-    const btn3 = TestHelper.createMockElement('btn3');
-
-    manager.registerFocusable('btn1', btn1);
-    manager.registerFocusable('btn2', btn2);
-    manager.registerFocusable('btn3', btn3);
-
-    manager.requestFocus('btn1');
-    manager.moveFocus('forward');
-
-    this.assert(manager.currentFocus === 'btn2', 'Moved forward to btn2');
-
-    manager.moveFocus('forward');
-    this.assert(manager.currentFocus === 'btn3', 'Moved forward to btn3');
-
-    manager.moveFocus('forward');
-    this.assert(manager.currentFocus === 'btn1', 'Wrapped to btn1');
-
-    manager.dispose();
-    TestHelper.cleanup();
-  }
-
-  async testMoveFocusBackward() {
-    TestHelper.cleanup();
-    const manager = new this.FocusManager(new MockRuntime());
-    const btn1 = TestHelper.createMockElement('btn1');
-    const btn2 = TestHelper.createMockElement('btn2');
-    const btn3 = TestHelper.createMockElement('btn3');
-
-    manager.registerFocusable('btn1', btn1);
-    manager.registerFocusable('btn2', btn2);
-    manager.registerFocusable('btn3', btn3);
-
-    manager.requestFocus('btn1');
-    manager.moveFocus('backward');
-
-    this.assert(manager.currentFocus === 'btn3', 'Moved backward to btn3 (wrapped)');
-
-    manager.moveFocus('backward');
-    this.assert(manager.currentFocus === 'btn2', 'Moved backward to btn2');
-
-    manager.dispose();
-    TestHelper.cleanup();
-  }
-
-  async testTabOrder() {
-    TestHelper.cleanup();
-    const manager = new this.FocusManager(new MockRuntime());
-    const btn1 = TestHelper.createMockElement('btn1');
-    const btn2 = TestHelper.createMockElement('btn2');
-    const btn3 = TestHelper.createMockElement('btn3');
-
-    manager.registerFocusable('btn2', btn2, { tabIndex: 2 });
-    manager.registerFocusable('btn1', btn1, { tabIndex: 1 });
-    manager.registerFocusable('btn3', btn3, { tabIndex: 3 });
-
-    manager.moveFocus('forward');
-    this.assert(manager.currentFocus === 'btn1', 'First focus is btn1 (tabIndex 1)');
-
-    manager.moveFocus('forward');
-    this.assert(manager.currentFocus === 'btn2', 'Second focus is btn2 (tabIndex 2)');
-
-    manager.moveFocus('forward');
-    this.assert(manager.currentFocus === 'btn3', 'Third focus is btn3 (tabIndex 3)');
-
-    manager.dispose();
-    TestHelper.cleanup();
-  }
-
-  async testCreateScope() {
-    TestHelper.cleanup();
-    const manager = new this.FocusManager(new MockRuntime());
-
-    manager.createScope('modal-scope', ['btn1', 'btn2']);
-
-    this.assert(manager.focusScopes.has('modal-scope'), 'Scope created');
-
-    const elements = manager.focusScopes.get('modal-scope');
-    this.assert(elements.length === 2 && elements.includes('btn1'), 'Scope contains elements');
-
-    manager.dispose();
-    TestHelper.cleanup();
-  }
-
-  async testPushPopScope() {
-    TestHelper.cleanup();
-    const manager = new this.FocusManager(new MockRuntime());
-
-    manager.createScope('modal-scope');
-    manager.pushScope('modal-scope');
-
-    this.assert(manager.activeScopeId === 'modal-scope', 'Scope pushed');
-
-    manager.popScope();
-    this.assert(manager.activeScopeId === null, 'Scope popped');
-
-    manager.dispose();
-    TestHelper.cleanup();
-  }
-
-  async testScopeRestriction() {
-    TestHelper.cleanup();
-    const manager = new this.FocusManager(new MockRuntime());
-    const btn1 = TestHelper.createMockElement('btn1');
-    const btn2 = TestHelper.createMockElement('btn2');
-
-    manager.registerFocusable('btn1', btn1);
-    manager.registerFocusable('btn2', btn2);
-
-    manager.createScope('modal-scope');
-    manager.addToScope('modal-scope', 'btn2');
-    manager.pushScope('modal-scope');
-
-    const success = manager.requestFocus('btn1');
-
-    this.assert(!success, 'Focus blocked outside scope');
-    this.assert(manager.currentFocus !== 'btn1', 'Focus not changed');
-
-    const successInScope = manager.requestFocus('btn2');
-    this.assert(successInScope, 'Focus allowed in scope');
-
-    manager.dispose();
-    TestHelper.cleanup();
-  }
-
-  async testFocusChangeListener() {
-    TestHelper.cleanup();
-    const manager = new this.FocusManager(new MockRuntime());
-
-    let listenerCalled = false;
-    let newFocus = null;
-    let oldFocus = null;
-
-    const listener = (newF, oldF) => {
-      listenerCalled = true;
-      newFocus = newF;
-      oldFocus = oldF;
-    };
-
-    manager.addFocusChangeListener(listener);
-
-    const btn1 = TestHelper.createMockElement('btn1');
-    const btn2 = TestHelper.createMockElement('btn2');
-
-    manager.registerFocusable('btn1', btn1);
-    manager.registerFocusable('btn2', btn2);
-
-    manager.requestFocus('btn1');
-    this.assert(listenerCalled && newFocus === 'btn1', 'Listener called on focus');
-
-    listenerCalled = false;
-    manager.requestFocus('btn2');
-    this.assert(listenerCalled && newFocus === 'btn2' && oldFocus === 'btn1', 'Listener called on change');
-
-    manager.removeFocusChangeListener(listener);
-    manager.dispose();
-    TestHelper.cleanup();
-  }
-
-  async testSkipTraversal() {
-    TestHelper.cleanup();
-    const manager = new this.FocusManager(new MockRuntime());
-    const btn1 = TestHelper.createMockElement('btn1');
-    const btn2 = TestHelper.createMockElement('btn2');
-    const btn3 = TestHelper.createMockElement('btn3');
-
-    manager.registerFocusable('btn1', btn1);
-    manager.registerFocusable('btn2', btn2, { skipTraversal: true });
-    manager.registerFocusable('btn3', btn3);
-
-    manager.requestFocus('btn1');
-    manager.moveFocus('forward');
-
-    this.assert(manager.currentFocus === 'btn3', 'Skipped btn2 (skipTraversal=true)');
-
-    manager.dispose();
-    TestHelper.cleanup();
-  }
-
-  async testFocusUnknownElement() {
-    TestHelper.cleanup();
-    const manager = new this.FocusManager(new MockRuntime());
-
-    const success = manager.requestFocus('unknown-btn');
-
-    this.assert(!success, 'Focus failed for unknown element');
-    this.assert(manager.currentFocus === null, 'Focus unchanged');
-
-    manager.dispose();
-    TestHelper.cleanup();
-  }
-
-  async testFocusDisabledElement() {
-    TestHelper.cleanup();
-    const manager = new this.FocusManager(new MockRuntime());
-    const btn1 = TestHelper.createMockElement('btn1');
-
-    manager.registerFocusable('btn1', btn1, { canRequestFocus: false });
-    const success = manager.requestFocus('btn1');
-
-    this.assert(!success, 'Focus failed for disabled element');
-
-    manager.dispose();
-    TestHelper.cleanup();
-  }
-
-  async testConcurrentFocusRequests() {
-    TestHelper.cleanup();
-    const manager = new this.FocusManager(new MockRuntime());
-    const btn1 = TestHelper.createMockElement('btn1');
-    const btn2 = TestHelper.createMockElement('btn2');
-
-    manager.registerFocusable('btn1', btn1);
-    manager.registerFocusable('btn2', btn2);
-
-    manager.requestFocus('btn1');
-    manager.requestFocus('btn2');
-
-    this.assert(manager.currentFocus === 'btn2', 'Second request took precedence');
-
-    manager.dispose();
-    TestHelper.cleanup();
-  }
-
-  async testDispose() {
-    TestHelper.cleanup();
-    const manager = new this.FocusManager(new MockRuntime());
-    const element = TestHelper.createMockElement('btn1');
-
-    manager.registerFocusable('btn1', element);
-    manager.setupKeyboardNavigation();
-    manager.createScope('scope1');
-
-    const listener = () => { };
-    manager.addFocusChangeListener(listener);
-
-    manager.dispose();
-
-    this.assert(manager.focusableElements.size === 0, 'Elements cleared');
-    this.assert(manager.focusScopes.size === 0, 'Scopes cleared');
-    this.assert(manager.focusChangeListeners.size === 0, 'Listeners cleared');
-    this.assert(!manager.keyboardEnabled, 'Keyboard disabled');
-    this.assert(manager.currentFocus === null, 'Focus cleared');
-
-    TestHelper.cleanup();
-  }
-
-  printResults() {
-    console.log('\n' + '='.repeat(60));
-    console.log('TEST RESULTS');
-    console.log('='.repeat(60));
-    console.log(`Total:  ${this.results.total}`);
-    console.log(`Passed: ${this.results.passed} ✓`);
-    console.log(`Failed: ${this.results.failed} ✗`);
-    console.log(`Success Rate: ${((this.results.passed / this.results.total) * 100).toFixed(1)}%`);
-
-    if (this.results.failed > 0) {
-      console.log('\nFailed Tests:');
-      this.results.errors.forEach((error, i) => {
-        console.log(`${i + 1}. ${error}`);
-      });
-      process.exit(1);
-    } else {
-      console.log('\n✅ All tests passed!');
-      process.exit(0);
-    }
-
-    console.log('='.repeat(60));
-  }
-}
-
-// Run the tests
-const tests = new FocusManagerTests(FocusManager);
-tests.runAll().catch((error) => {
-  console.error('Fatal error:', error);
-  process.exit(1);
-});
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/test/gesture.test.js b/packages/flutterjs_engine/src/runtime/test/gesture.test.js
deleted file mode 100644
index ceb2c5c5..00000000
--- a/packages/flutterjs_engine/src/runtime/test/gesture.test.js
+++ /dev/null
@@ -1,1085 +0,0 @@
-/**
- * FlutterJS Gesture Recognizer Test Suite
- * 
- * Comprehensive tests for all gesture recognizers
- */
-
-import {
-  GestureRecognizer,
-  TapRecognizer,
-  LongPressRecognizer,
-  SwipeRecognizer,
-  PanRecognizer,
-  ScaleRecognizer,
-  GestureArena,
-  GestureManager
-} from "../src/gesture_recognizer.js";
-
-// Test utilities
-class TestUtils {
-  static createMouseEvent(type, x = 0, y = 0, options = {}) {
-    return {
-      type: type,
-      clientX: x,
-      clientY: y,
-      pageX: x,
-      pageY: y,
-      ...options
-    };
-  }
-
-  static createTouchEvent(type, touches = [], changedTouches = []) {
-    return {
-      type: type,
-      touches: touches,
-      changedTouches: changedTouches
-    };
-  }
-
-  static createTouch(x, y) {
-    return {
-      clientX: x,
-      clientY: y,
-      pageX: x,
-      pageY: y
-    };
-  }
-
-  static sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-  }
-}
-
-// Test runner
-class TestRunner {
-  constructor() {
-    this.tests = [];
-    this.passed = 0;
-    this.failed = 0;
-  }
-
-  test(name, fn) {
-    this.tests.push({ name, fn });
-  }
-
-  async run() {
-    console.log('\n🧪 Running Gesture Recognizer Tests\n');
-    console.log('='.repeat(60));
-
-    for (const { name, fn } of this.tests) {
-      try {
-        await fn();
-        this.passed++;
-        console.log(`✅ ${name}`);
-      } catch (error) {
-        this.failed++;
-        console.log(`❌ ${name}`);
-        console.log(`   Error: ${error.message}`);
-        if (error.stack) {
-          console.log(`   ${error.stack.split('\n').slice(1, 3).join('\n   ')}`);
-        }
-      }
-    }
-
-    console.log('='.repeat(60));
-    console.log(`\n📊 Results: ${this.passed} passed, ${this.failed} failed\n`);
-
-    return this.failed === 0;
-  }
-}
-
-// Assertions
-function assert(condition, message) {
-  if (!condition) {
-    throw new Error(message || 'Assertion failed');
-  }
-}
-
-function assertEquals(actual, expected, message) {
-  if (actual !== expected) {
-    throw new Error(
-      message || `Expected ${expected} but got ${actual}`
-    );
-  }
-}
-
-function assertNotNull(value, message) {
-  if (value === null || value === undefined) {
-    throw new Error(message || 'Expected non-null value');
-  }
-}
-
-// Test suite
-const runner = new TestRunner();
-
-// ============================================================================
-// Base GestureRecognizer Tests
-// ============================================================================
-
-runner.test('GestureRecognizer - constructor requires callback', () => {
-  try {
-    new GestureRecognizer();
-    assert(false, 'Should have thrown error');
-  } catch (error) {
-    assert(error.message.includes('callback'), 'Should mention callback in error');
-  }
-});
-
-runner.test('GestureRecognizer - callback must be function', () => {
-  try {
-    new GestureRecognizer('not a function');
-    assert(false, 'Should have thrown error');
-  } catch (error) {
-    assert(error.message.includes('function'), 'Should mention function in error');
-  }
-});
-
-runner.test('GestureRecognizer - initial state is ready', () => {
-  let called = false;
-  const recognizer = new TapRecognizer(() => { called = true; });
-  assertEquals(recognizer.state, 'ready', 'Initial state should be ready');
-});
-
-runner.test('GestureRecognizer - reset returns to ready state', () => {
-  let called = false;
-  const recognizer = new TapRecognizer(() => { called = true; });
-  recognizer.state = 'recognized';
-  recognizer.reset();
-  assertEquals(recognizer.state, 'ready', 'State should reset to ready');
-});
-
-runner.test('GestureRecognizer - dispose cleans up', () => {
-  let called = false;
-  const recognizer = new TapRecognizer(() => { called = true; });
-  recognizer.dispose();
-  assert(recognizer.isDisposed, 'Should be marked as disposed');
-  assertEquals(recognizer.callback, null, 'Callback should be cleared');
-});
-
-// ============================================================================
-// TapRecognizer Tests
-// ============================================================================
-
-runner.test('TapRecognizer - detects single tap', () => {
-  let tapDetected = false;
-  let tapData = null;
-
-  const recognizer = new TapRecognizer((data) => {
-    tapDetected = true;
-    tapData = data;
-  });
-
-  // Simulate tap
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 100, 100));
-
-  assert(tapDetected, 'Tap should be detected');
-  assertNotNull(tapData, 'Tap data should be provided');
-  assertEquals(tapData.type, 'tap', 'Event type should be tap');
-  assertEquals(tapData.tapCount, 1, 'Tap count should be 1');
-});
-
-runner.test('TapRecognizer - fails on excessive movement', () => {
-  let tapDetected = false;
-
-  const recognizer = new TapRecognizer(() => {
-    tapDetected = true;
-  }, { maxMovement: 10 });
-
-  // Simulate tap with movement
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointermove', TestUtils.createMouseEvent('pointermove', 150, 100));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 150, 100));
-
-  assert(!tapDetected, 'Tap should not be detected with excessive movement');
-  assertEquals(recognizer.state, 'failed', 'State should be failed');
-});
-
-runner.test('TapRecognizer - handles touch events', () => {
-  let tapDetected = false;
-
-  const recognizer = new TapRecognizer(() => {
-    tapDetected = true;
-  });
-
-  const touch = TestUtils.createTouch(100, 100);
-
-  recognizer.handleEvent('touchstart', TestUtils.createTouchEvent('touchstart', [touch]));
-  recognizer.handleEvent('touchend', TestUtils.createTouchEvent('touchend', [], [touch]));
-
-  assert(tapDetected, 'Tap should be detected from touch events');
-});
-
-runner.test('TapRecognizer - double tap detection', async () => {
-  let tapCount = 0;
-  let finalTapCount = 0;
-
-  const recognizer = new TapRecognizer((data) => {
-    tapCount++;
-    finalTapCount = data.tapCount;
-  }, { minTaps: 2, maxTaps: 2 });
-
-  // First tap
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 100, 100));
-
-  await TestUtils.sleep(50);
-
-  // Second tap
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 100, 100));
-
-  assert(tapCount === 1, 'Callback should be called once for double tap');
-  assertEquals(finalTapCount, 2, 'Tap count should be 2');
-});
-
-runner.test('TapRecognizer - cancels on pointercancel', () => {
-  let tapDetected = false;
-
-  const recognizer = new TapRecognizer(() => {
-    tapDetected = true;
-  });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointercancel', TestUtils.createMouseEvent('pointercancel'));
-
-  assert(!tapDetected, 'Tap should not be detected after cancel');
-  assertEquals(recognizer.state, 'failed', 'State should be failed');
-});
-
-// ============================================================================
-// LongPressRecognizer Tests
-// ============================================================================
-
-runner.test('LongPressRecognizer - detects long press', async () => {
-  let longPressDetected = false;
-  let longPressData = null;
-
-  const recognizer = new LongPressRecognizer((data) => {
-    longPressDetected = true;
-    longPressData = data;
-  }, { duration: 100 });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-
-  await TestUtils.sleep(150);
-
-  assert(longPressDetected, 'Long press should be detected');
-  assertNotNull(longPressData, 'Long press data should be provided');
-  assertEquals(longPressData.type, 'longpress', 'Event type should be longpress');
-});
-
-runner.test('LongPressRecognizer - fails on movement', async () => {
-  let longPressDetected = false;
-
-  const recognizer = new LongPressRecognizer(() => {
-    longPressDetected = true;
-  }, { duration: 100, maxMovement: 10 });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-
-  await TestUtils.sleep(50);
-
-  recognizer.handleEvent('pointermove', TestUtils.createMouseEvent('pointermove', 150, 100));
-
-  await TestUtils.sleep(100);
-
-  assert(!longPressDetected, 'Long press should not be detected with movement');
-});
-
-runner.test('LongPressRecognizer - cancels on pointerup', async () => {
-  let longPressDetected = false;
-
-  const recognizer = new LongPressRecognizer(() => {
-    longPressDetected = true;
-  }, { duration: 200 });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-
-  await TestUtils.sleep(50);
-
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 100, 100));
-
-  await TestUtils.sleep(200);
-
-  assert(!longPressDetected, 'Long press should not be detected after release');
-});
-
-runner.test('LongPressRecognizer - cleanup on dispose', () => {
-  const recognizer = new LongPressRecognizer(() => { }, { duration: 100 });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-
-  recognizer.dispose();
-
-  assertEquals(recognizer.timer, null, 'Timer should be cleared');
-  assert(recognizer.isDisposed, 'Should be marked as disposed');
-});
-
-// ============================================================================
-// SwipeRecognizer Tests
-// ============================================================================
-
-runner.test('SwipeRecognizer - detects right swipe', () => {
-  let swipeDetected = false;
-  let swipeData = null;
-
-  const recognizer = new SwipeRecognizer((data) => {
-    swipeDetected = true;
-    swipeData = data;
-  }, { minDistance: 50 });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 200, 100));
-
-  assert(swipeDetected, 'Swipe should be detected');
-  assertNotNull(swipeData, 'Swipe data should be provided');
-  assertEquals(swipeData.type, 'swipe', 'Event type should be swipe');
-  assertEquals(swipeData.direction, 'right', 'Direction should be right');
-});
-
-runner.test('SwipeRecognizer - detects left swipe', () => {
-  let swipeData = null;
-
-  const recognizer = new SwipeRecognizer((data) => {
-    swipeData = data;
-  }, { minDistance: 50 });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 200, 100));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 100, 100));
-
-  assertNotNull(swipeData, 'Swipe should be detected');
-  assertEquals(swipeData.direction, 'left', 'Direction should be left');
-});
-
-runner.test('SwipeRecognizer - detects up swipe', () => {
-  let swipeData = null;
-
-  const recognizer = new SwipeRecognizer((data) => {
-    swipeData = data;
-  }, { minDistance: 50 });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 200));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 100, 100));
-
-  assertNotNull(swipeData, 'Swipe should be detected');
-  assertEquals(swipeData.direction, 'up', 'Direction should be up');
-});
-
-runner.test('SwipeRecognizer - detects down swipe', () => {
-  let swipeData = null;
-
-  const recognizer = new SwipeRecognizer((data) => {
-    swipeData = data;
-  }, { minDistance: 50 });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 100, 200));
-
-  assertNotNull(swipeData, 'Swipe should be detected');
-  assertEquals(swipeData.direction, 'down', 'Direction should be down');
-});
-
-runner.test('SwipeRecognizer - fails on insufficient distance', () => {
-  let swipeDetected = false;
-
-  const recognizer = new SwipeRecognizer(() => {
-    swipeDetected = true;
-  }, { minDistance: 100 });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 120, 100));
-
-  assert(!swipeDetected, 'Swipe should not be detected with insufficient distance');
-});
-
-runner.test('SwipeRecognizer - horizontal constraint', () => {
-  let swipeDetected = false;
-  let swipeData = null;
-
-  const recognizer = new SwipeRecognizer((data) => {
-    swipeDetected = true;
-    swipeData = data;
-  }, { minDistance: 50, direction: 'horizontal' });
-
-  // Horizontal swipe - should work
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 200, 100));
-
-  assert(swipeDetected, 'Horizontal swipe should be detected');
-
-  // Vertical swipe - should fail
-  swipeDetected = false;
-  recognizer.reset();
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 100, 200));
-
-  assert(!swipeDetected, 'Vertical swipe should not be detected with horizontal constraint');
-});
-
-runner.test('SwipeRecognizer - calculates velocity', () => {
-  let swipeData = null;
-
-  const recognizer = new SwipeRecognizer((data) => {
-    swipeData = data;
-  }, { minDistance: 50 });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 200, 100));
-
-  assertNotNull(swipeData, 'Swipe should be detected');
-  assert(swipeData.velocity > 0, 'Velocity should be calculated');
-  assert(swipeData.distance >= 100, 'Distance should be calculated');
-});
-
-// ============================================================================
-// PanRecognizer Tests
-// ============================================================================
-
-runner.test('PanRecognizer - detects pan gesture', () => {
-  let panStartCalled = false;
-  let panUpdateCalled = false;
-  let panEndCalled = false;
-  let panData = null;
-
-  const recognizer = new PanRecognizer((data) => {
-    panData = data;
-  }, {
-    minDistance: 10,
-    onStart: () => { panStartCalled = true; },
-    onUpdate: () => { panUpdateCalled = true; },
-    onEnd: () => { panEndCalled = true; }
-  });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointermove', TestUtils.createMouseEvent('pointermove', 120, 100));
-  recognizer.handleEvent('pointermove', TestUtils.createMouseEvent('pointermove', 140, 100));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 150, 100));
-
-  assert(panStartCalled, 'onStart should be called');
-  assert(panUpdateCalled, 'onUpdate should be called');
-  assert(panEndCalled, 'onEnd should be called');
-  assertNotNull(panData, 'Pan data should be provided');
-  assertEquals(panData.type, 'pan', 'Event type should be pan');
-});
-
-runner.test('PanRecognizer - tracks delta correctly', () => {
-  let updateData = null;
-
-  const recognizer = new PanRecognizer(() => { }, {
-    minDistance: 10,
-    onUpdate: (data) => { updateData = data; }
-  });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointermove', TestUtils.createMouseEvent('pointermove', 120, 100));
-  recognizer.handleEvent('pointermove', TestUtils.createMouseEvent('pointermove', 150, 100));
-
-  assertNotNull(updateData, 'Update data should be provided');
-  assert(updateData.totalDelta.dx > 0, 'Total delta X should be positive');
-  assert(Math.abs(updateData.totalDelta.dy) < 1, 'Total delta Y should be near zero');
-});
-
-runner.test('PanRecognizer - horizontal constraint', () => {
-  let panStarted = false;
-
-  const recognizer = new PanRecognizer(() => { }, {
-    minDistance: 10,
-    direction: 'horizontal',
-    onStart: () => { panStarted = true; }
-  });
-
-  // Vertical movement - should fail
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointermove', TestUtils.createMouseEvent('pointermove', 100, 150));
-
-  assert(!panStarted, 'Pan should not start with vertical movement');
-  assertEquals(recognizer.state, 'failed', 'State should be failed');
-});
-
-runner.test('PanRecognizer - handles cancel', () => {
-  let endCalled = false;
-  let endData = null;
-
-  const recognizer = new PanRecognizer(() => { }, {
-    minDistance: 10,
-    onEnd: (data) => {
-      endCalled = true;
-      endData = data;
-    }
-  });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointermove', TestUtils.createMouseEvent('pointermove', 120, 100));
-  recognizer.handleEvent('pointercancel', TestUtils.createMouseEvent('pointercancel'));
-
-  assert(endCalled, 'onEnd should be called on cancel');
-  assertEquals(endData.type, 'pancancel', 'Event type should be pancancel');
-});
-
-// ============================================================================
-// ScaleRecognizer Tests
-// ============================================================================
-
-runner.test('ScaleRecognizer - detects scale gesture', () => {
-  let scaleStartCalled = false;
-  let scaleUpdateCalled = false;
-  let scaleEndCalled = false;
-  let scaleData = null;
-
-  const recognizer = new ScaleRecognizer((data) => {
-    scaleData = data;
-  }, {
-    onStart: () => { scaleStartCalled = true; },
-    onUpdate: () => { scaleUpdateCalled = true; },
-    onEnd: () => { scaleEndCalled = true; }
-  });
-
-  const touch1Start = TestUtils.createTouch(100, 100);
-  const touch2Start = TestUtils.createTouch(200, 100);
-
-  recognizer.handleEvent('touchstart', TestUtils.createTouchEvent('touchstart', [touch1Start, touch2Start]));
-
-  const touch1Move = TestUtils.createTouch(50, 100);
-  const touch2Move = TestUtils.createTouch(250, 100);
-
-  recognizer.handleEvent('touchmove', TestUtils.createTouchEvent('touchmove', [touch1Move, touch2Move]));
-  recognizer.handleEvent('touchend', TestUtils.createTouchEvent('touchend', [touch1Move]));
-
-  assert(scaleStartCalled, 'onStart should be called');
-  assert(scaleUpdateCalled, 'onUpdate should be called');
-  assert(scaleEndCalled, 'onEnd should be called');
-  assertNotNull(scaleData, 'Scale data should be provided');
-  assertEquals(scaleData.type, 'scale', 'Event type should be scale');
-});
-
-runner.test('ScaleRecognizer - calculates scale correctly', () => {
-  let updateData = null;
-
-  const recognizer = new ScaleRecognizer(() => { }, {
-    onUpdate: (data) => { updateData = data; }
-  });
-
-  // Initial distance: 100px
-  const touch1Start = TestUtils.createTouch(100, 100);
-  const touch2Start = TestUtils.createTouch(200, 100);
-
-  recognizer.handleEvent('touchstart', TestUtils.createTouchEvent('touchstart', [touch1Start, touch2Start]));
-
-  // New distance: 200px (2x scale)
-  const touch1Move = TestUtils.createTouch(50, 100);
-  const touch2Move = TestUtils.createTouch(250, 100);
-
-  recognizer.handleEvent('touchmove', TestUtils.createTouchEvent('touchmove', [touch1Move, touch2Move]));
-
-  assertNotNull(updateData, 'Update data should be provided');
-  assert(Math.abs(updateData.scale - 2.0) < 0.1, 'Scale should be approximately 2.0');
-});
-
-runner.test('ScaleRecognizer - clamps scale to limits', () => {
-  let updateData = null;
-
-  const recognizer = new ScaleRecognizer(() => { }, {
-    minScale: 0.5,
-    maxScale: 2.0,
-    onUpdate: (data) => { updateData = data; }
-  });
-
-  // Initial distance: 100px
-  const touch1Start = TestUtils.createTouch(100, 100);
-  const touch2Start = TestUtils.createTouch(200, 100);
-
-  recognizer.handleEvent('touchstart', TestUtils.createTouchEvent('touchstart', [touch1Start, touch2Start]));
-
-  // New distance: 500px (5x scale - should be clamped to 2.0)
-  const touch1Move = TestUtils.createTouch(0, 100);
-  const touch2Move = TestUtils.createTouch(500, 100);
-
-  recognizer.handleEvent('touchmove', TestUtils.createTouchEvent('touchmove', [touch1Move, touch2Move]));
-
-  assertNotNull(updateData, 'Update data should be provided');
-  assertEquals(updateData.scale, 2.0, 'Scale should be clamped to maxScale');
-  assert(updateData.rawScale > 2.0, 'Raw scale should exceed limit');
-});
-
-runner.test('ScaleRecognizer - requires two touches', () => {
-  let scaleStartCalled = false;
-
-  const recognizer = new ScaleRecognizer(() => { }, {
-    onStart: () => { scaleStartCalled = true; }
-  });
-
-  const touch1 = TestUtils.createTouch(100, 100);
-
-  recognizer.handleEvent('touchstart', TestUtils.createTouchEvent('touchstart', [touch1]));
-
-  assert(!scaleStartCalled, 'Scale should not start with single touch');
-});
-
-// ============================================================================
-// GestureArena Tests
-// ============================================================================
-
-runner.test('GestureArena - registers recognizers', () => {
-  const arena = new GestureArena();
-  const recognizer = new TapRecognizer(() => { });
-
-  arena.register('element1', recognizer);
-
-  const recognizers = arena.getRecognizers('element1');
-  assertEquals(recognizers.length, 1, 'Should have 1 recognizer');
-  assertEquals(recognizers[0], recognizer, 'Should be the same recognizer');
-});
-
-runner.test('GestureArena - handles multiple recognizers per element', () => {
-  const arena = new GestureArena();
-  const tap = new TapRecognizer(() => { });
-  const longPress = new LongPressRecognizer(() => { });
-
-  arena.register('element1', tap);
-  arena.register('element1', longPress);
-
-  const recognizers = arena.getRecognizers('element1');
-  assertEquals(recognizers.length, 2, 'Should have 2 recognizers');
-});
-
-runner.test('GestureArena - dispatches events to recognizers', () => {
-  const arena = new GestureArena();
-  let tapCalled = false;
-
-  const tap = new TapRecognizer(() => { tapCalled = true; });
-  arena.register('element1', tap);
-
-  arena.handleEvent('element1', 'pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  arena.handleEvent('element1', 'pointerup', TestUtils.createMouseEvent('pointerup', 100, 100));
-
-  assert(tapCalled, 'Tap recognizer should be called');
-});
-
-runner.test('GestureArena - unregisters all recognizers', () => {
-  const arena = new GestureArena();
-  const tap = new TapRecognizer(() => { });
-
-  arena.register('element1', tap);
-  arena.unregister('element1');
-
-  const recognizers = arena.getRecognizers('element1');
-  assertEquals(recognizers.length, 0, 'Should have no recognizers');
-  assert(tap.isDisposed, 'Recognizer should be disposed');
-});
-
-runner.test('GestureArena - clear disposes all', () => {
-  const arena = new GestureArena();
-  const tap1 = new TapRecognizer(() => { });
-  const tap2 = new TapRecognizer(() => { });
-
-  arena.register('element1', tap1);
-  arena.register('element2', tap2);
-
-  arena.clear();
-
-  const stats = arena.getStats();
-  assertEquals(stats.elements, 0, 'Should have no elements');
-  assert(tap1.isDisposed, 'Tap1 should be disposed');
-  assert(tap2.isDisposed, 'Tap2 should be disposed');
-});
-
-runner.test('GestureArena - getStats returns correct counts', () => {
-  const arena = new GestureArena();
-
-  arena.register('element1', new TapRecognizer(() => { }));
-  arena.register('element1', new LongPressRecognizer(() => { }));
-  arena.register('element2', new SwipeRecognizer(() => { }));
-
-  const stats = arena.getStats();
-  assertEquals(stats.elements, 2, 'Should have 2 elements');
-  assertEquals(stats.totalRecognizers, 3, 'Should have 3 total recognizers');
-});
-
-// ============================================================================
-// GestureManager Tests
-// ============================================================================
-
-runner.test('GestureManager - registers tap gesture', () => {
-  const manager = new GestureManager();
-  let tapCalled = false;
-
-  manager.registerTap('element1', () => { tapCalled = true; });
-
-  manager.handleEvent('element1', 'pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  manager.handleEvent('element1', 'pointerup', TestUtils.createMouseEvent('pointerup', 100, 100));
-
-  assert(tapCalled, 'Tap callback should be called');
-});
-
-runner.test('GestureManager - registers double tap', () => {
-  const manager = new GestureManager();
-  let doubleTapCalled = false;
-
-  manager.registerDoubleTap('element1', (data) => {
-    if (data.tapCount === 2) {
-      doubleTapCalled = true;
-    }
-  });
-
-  // First tap
-  manager.handleEvent('element1', 'pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  manager.handleEvent('element1', 'pointerup', TestUtils.createMouseEvent('pointerup', 100, 100));
-
-  // Second tap
-  manager.handleEvent('element1', 'pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  manager.handleEvent('element1', 'pointerup', TestUtils.createMouseEvent('pointerup', 100, 100));
-
-  // Note: In real scenario would need to wait for timeout
-  // For test purposes, checking if doubleTap was eventually called
-  assert(doubleTapCalled, 'Double tap callback should be called');
-});
-
-
-
-// ============================================================================
-// Base GestureRecognizer Tests
-// ============================================================================
-
-runner.test('GestureRecognizer - constructor requires callback', () => {
-  try {
-    new GestureRecognizer();
-    assert(false, 'Should have thrown error');
-  } catch (error) {
-    assert(error.message.includes('callback'), 'Should mention callback in error');
-  }
-});
-
-runner.test('GestureRecognizer - callback must be function', () => {
-  try {
-    new GestureRecognizer('not a function');
-    assert(false, 'Should have thrown error');
-  } catch (error) {
-    assert(error.message.includes('function'), 'Should mention function in error');
-  }
-});
-
-runner.test('GestureRecognizer - initial state is ready', () => {
-  const recognizer = new TapRecognizer(() => { });
-  assertEquals(recognizer.state, 'ready', 'Initial state should be ready');
-});
-
-runner.test('GestureRecognizer - reset returns to ready state', () => {
-  const recognizer = new TapRecognizer(() => { });
-  recognizer.state = 'recognized';
-  recognizer.reset();
-  assertEquals(recognizer.state, 'ready', 'State should reset to ready');
-});
-
-runner.test('GestureRecognizer - dispose cleans up', () => {
-  const recognizer = new TapRecognizer(() => { });
-  recognizer.dispose();
-  assert(recognizer.isDisposed, 'Should be marked as disposed');
-  assertEquals(recognizer.callback, null, 'Callback should be cleared');
-});
-
-// ============================================================================
-// TapRecognizer Tests
-// ============================================================================
-
-runner.test('TapRecognizer - detects single tap', () => {
-  let tapDetected = false;
-  let tapData = null;
-
-  const recognizer = new TapRecognizer((data) => {
-    tapDetected = true;
-    tapData = data;
-  });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 100, 100));
-
-  assert(tapDetected, 'Tap should be detected');
-  assertNotNull(tapData, 'Tap data should be provided');
-  assertEquals(tapData.type, 'tap', 'Event type should be tap');
-  assertEquals(tapData.tapCount, 1, 'Tap count should be 1');
-});
-
-runner.test('TapRecognizer - fails on excessive movement', () => {
-  let tapDetected = false;
-
-  const recognizer = new TapRecognizer(() => {
-    tapDetected = true;
-  }, { maxMovement: 10 });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointermove', TestUtils.createMouseEvent('pointermove', 150, 100));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 150, 100));
-
-  assert(!tapDetected, 'Tap should not be detected with excessive movement');
-  assertEquals(recognizer.state, 'failed', 'State should be failed');
-});
-
-runner.test('TapRecognizer - handles touch events', () => {
-  let tapDetected = false;
-
-  const recognizer = new TapRecognizer(() => {
-    tapDetected = true;
-  });
-
-  const touch = TestUtils.createTouch(100, 100);
-
-  recognizer.handleEvent('touchstart', TestUtils.createTouchEvent('touchstart', [touch]));
-  recognizer.handleEvent('touchend', TestUtils.createTouchEvent('touchend', [], [touch]));
-
-  assert(tapDetected, 'Tap should be detected from touch events');
-});
-
-runner.test('TapRecognizer - cancels on pointercancel', () => {
-  let tapDetected = false;
-
-  const recognizer = new TapRecognizer(() => {
-    tapDetected = true;
-  });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointercancel', TestUtils.createMouseEvent('pointercancel'));
-
-  assert(!tapDetected, 'Tap should not be detected after cancel');
-  assertEquals(recognizer.state, 'failed', 'State should be failed');
-});
-
-// ============================================================================
-// LongPressRecognizer Tests
-// ============================================================================
-
-runner.test('LongPressRecognizer - detects long press', async () => {
-  let longPressDetected = false;
-  let longPressData = null;
-
-  const recognizer = new LongPressRecognizer((data) => {
-    longPressDetected = true;
-    longPressData = data;
-  }, { duration: 100 });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-
-  await TestUtils.sleep(150);
-
-  assert(longPressDetected, 'Long press should be detected');
-  assertNotNull(longPressData, 'Long press data should be provided');
-  assertEquals(longPressData.type, 'longpress', 'Event type should be longpress');
-});
-
-runner.test('LongPressRecognizer - cleanup on dispose', () => {
-  const recognizer = new LongPressRecognizer(() => { }, { duration: 100 });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-
-  recognizer.dispose();
-
-  assertEquals(recognizer.timer, null, 'Timer should be cleared');
-  assert(recognizer.isDisposed, 'Should be marked as disposed');
-});
-
-// ============================================================================
-// SwipeRecognizer Tests
-// ============================================================================
-
-runner.test('SwipeRecognizer - detects right swipe', () => {
-  let swipeDetected = false;
-  let swipeData = null;
-
-  const recognizer = new SwipeRecognizer((data) => {
-    swipeDetected = true;
-    swipeData = data;
-  }, { minDistance: 50 });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 200, 100));
-
-  assert(swipeDetected, 'Swipe should be detected');
-  assertNotNull(swipeData, 'Swipe data should be provided');
-  assertEquals(swipeData.type, 'swipe', 'Event type should be swipe');
-  assertEquals(swipeData.direction, 'right', 'Direction should be right');
-});
-
-runner.test('SwipeRecognizer - detects left swipe', () => {
-  let swipeData = null;
-
-  const recognizer = new SwipeRecognizer((data) => {
-    swipeData = data;
-  }, { minDistance: 50 });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 200, 100));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 100, 100));
-
-  assertNotNull(swipeData, 'Swipe should be detected');
-  assertEquals(swipeData.direction, 'left', 'Direction should be left');
-});
-
-runner.test('SwipeRecognizer - detects up swipe', () => {
-  let swipeData = null;
-
-  const recognizer = new SwipeRecognizer((data) => {
-    swipeData = data;
-  }, { minDistance: 50 });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 200));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 100, 100));
-
-  assertNotNull(swipeData, 'Swipe should be detected');
-  assertEquals(swipeData.direction, 'up', 'Direction should be up');
-});
-
-runner.test('SwipeRecognizer - detects down swipe', () => {
-  let swipeData = null;
-
-  const recognizer = new SwipeRecognizer((data) => {
-    swipeData = data;
-  }, { minDistance: 50 });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 100, 200));
-
-  assertNotNull(swipeData, 'Swipe should be detected');
-  assertEquals(swipeData.direction, 'down', 'Direction should be down');
-});
-
-runner.test('SwipeRecognizer - calculates velocity', () => {
-  let swipeData = null;
-
-  const recognizer = new SwipeRecognizer((data) => {
-    swipeData = data;
-  }, { minDistance: 50 });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 200, 100));
-
-  assertNotNull(swipeData, 'Swipe should be detected');
-  assert(swipeData.velocity > 0, 'Velocity should be calculated');
-  assert(swipeData.distance >= 100, 'Distance should be calculated');
-});
-
-// ============================================================================
-// PanRecognizer Tests
-// ============================================================================
-
-runner.test('PanRecognizer - detects pan gesture', () => {
-  let panStartCalled = false;
-  let panUpdateCalled = false;
-  let panEndCalled = false;
-
-  const recognizer = new PanRecognizer(() => { }, {
-    minDistance: 10,
-    onStart: () => { panStartCalled = true; },
-    onUpdate: () => { panUpdateCalled = true; },
-    onEnd: () => { panEndCalled = true; }
-  });
-
-  recognizer.handleEvent('pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  recognizer.handleEvent('pointermove', TestUtils.createMouseEvent('pointermove', 120, 100));
-  recognizer.handleEvent('pointermove', TestUtils.createMouseEvent('pointermove', 140, 100));
-  recognizer.handleEvent('pointerup', TestUtils.createMouseEvent('pointerup', 150, 100));
-
-  assert(panStartCalled, 'onStart should be called');
-  assert(panUpdateCalled, 'onUpdate should be called');
-  assert(panEndCalled, 'onEnd should be called');
-});
-
-// ============================================================================
-// ScaleRecognizer Tests
-// ============================================================================
-
-runner.test('ScaleRecognizer - detects scale gesture', () => {
-  let scaleStartCalled = false;
-  let scaleUpdateCalled = false;
-  let scaleEndCalled = false;
-
-  const recognizer = new ScaleRecognizer(() => { }, {
-    onStart: () => { scaleStartCalled = true; },
-    onUpdate: () => { scaleUpdateCalled = true; },
-    onEnd: () => { scaleEndCalled = true; }
-  });
-
-  const touch1Start = TestUtils.createTouch(100, 100);
-  const touch2Start = TestUtils.createTouch(200, 100);
-
-  recognizer.handleEvent('touchstart', TestUtils.createTouchEvent('touchstart', [touch1Start, touch2Start]));
-
-  const touch1Move = TestUtils.createTouch(50, 100);
-  const touch2Move = TestUtils.createTouch(250, 100);
-
-  recognizer.handleEvent('touchmove', TestUtils.createTouchEvent('touchmove', [touch1Move, touch2Move]));
-  recognizer.handleEvent('touchend', TestUtils.createTouchEvent('touchend', [touch1Move]));
-
-  assert(scaleStartCalled, 'onStart should be called');
-  assert(scaleUpdateCalled, 'onUpdate should be called');
-  assert(scaleEndCalled, 'onEnd should be called');
-});
-
-runner.test('ScaleRecognizer - requires two touches', () => {
-  let scaleStartCalled = false;
-
-  const recognizer = new ScaleRecognizer(() => { }, {
-    onStart: () => { scaleStartCalled = true; }
-  });
-
-  const touch1 = TestUtils.createTouch(100, 100);
-
-  recognizer.handleEvent('touchstart', TestUtils.createTouchEvent('touchstart', [touch1]));
-
-  assert(!scaleStartCalled, 'Scale should not start with single touch');
-});
-
-// ============================================================================
-// GestureArena Tests
-// ============================================================================
-
-runner.test('GestureArena - registers recognizers', () => {
-  const arena = new GestureArena();
-  const recognizer = new TapRecognizer(() => { });
-
-  arena.register('element1', recognizer);
-
-  const recognizers = arena.getRecognizers('element1');
-  assertEquals(recognizers.length, 1, 'Should have 1 recognizer');
-  assertEquals(recognizers[0], recognizer, 'Should be the same recognizer');
-});
-
-runner.test('GestureArena - handles multiple recognizers per element', () => {
-  const arena = new GestureArena();
-  const tap = new TapRecognizer(() => { });
-  const longPress = new LongPressRecognizer(() => { });
-
-  arena.register('element1', tap);
-  arena.register('element1', longPress);
-
-  const recognizers = arena.getRecognizers('element1');
-  assertEquals(recognizers.length, 2, 'Should have 2 recognizers');
-});
-
-runner.test('GestureArena - unregisters all recognizers', () => {
-  const arena = new GestureArena();
-  const tap = new TapRecognizer(() => { });
-
-  arena.register('element1', tap);
-  arena.unregister('element1');
-
-  const recognizers = arena.getRecognizers('element1');
-  assertEquals(recognizers.length, 0, 'Should have no recognizers');
-  assert(tap.isDisposed, 'Recognizer should be disposed');
-});
-
-runner.test('GestureManager - registers tap gesture', () => {
-  const manager = new GestureManager();
-  let tapCalled = false;
-
-  manager.registerTap('element1', () => { tapCalled = true; });
-
-  manager.handleEvent('element1', 'pointerdown', TestUtils.createMouseEvent('pointerdown', 100, 100));
-  manager.handleEvent('element1', 'pointerup', TestUtils.createMouseEvent('pointerup', 100, 100));
-
-  assert(tapCalled, 'Tap callback should be called');
-});
-
-// ============================================================================
-// Run Tests
-// ============================================================================
-
-runner.run();
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/test/inherited_element.test.js b/packages/flutterjs_engine/src/runtime/test/inherited_element.test.js
deleted file mode 100644
index 849f4aca..00000000
--- a/packages/flutterjs_engine/src/runtime/test/inherited_element.test.js
+++ /dev/null
@@ -1,830 +0,0 @@
-/**
- * Element Tests
- * 
- * Test suite for Element, StatelessElement, and StatefulElement classes
- * Tests lifecycle, tree building, state management, and rendering
- */
-
-// Mock document for Node.js environment
-if (typeof document === 'undefined') {
-  global.document = {
-    createElement: (tag) => ({
-      style: {},
-      offsetWidth: 200,
-      offsetHeight: 100,
-      offsetLeft: 0,
-      offsetTop: 0,
-      appendChild: function () { },
-      removeChild: function () { },
-      insertBefore: function () { },
-      replaceChild: function () { }
-    })
-  };
-}
-
-// Mock classes for testing
-class MockWidget {
-  constructor(name = 'Widget') {
-    this.name = name;
-    this.key = null;
-    this.type = 'MockWidget';
-  }
-}
-
-class MockRuntime {
-  constructor() {
-    this.debugMode = false;
-    this.serviceRegistry = new Map();
-    this.elements = new Map();
-  }
-
-  registerElement(id, element) {
-    this.elements.set(id, element);
-  }
-
-  getElement(id) {
-    return this.elements.get(id);
-  }
-}
-
-class MockState {
-  constructor(name = 'State') {
-    this.name = name;
-    this.mounted = false;
-    this.initStateCalled = false;
-    this.disposeCalled = false;
-  }
-
-  initState() {
-    this.initStateCalled = true;
-  }
-
-  dispose() {
-    this.disposeCalled = true;
-  }
-}
-
-// Base Element class (simplified for testing)
-class Element {
-  constructor(widget, parent, runtime) {
-    if (!widget) throw new Error('Widget is required');
-    if (!runtime) throw new Error('Runtime is required');
-
-    this.widget = widget;
-    this.parent = parent;
-    this._runtime = runtime;
-    this.id = `el_${Math.random().toString(36).substr(2, 9)}`;
-    this.children = [];
-    this.mounted = false;
-    this.dirty = false;
-    this.depth = parent ? parent.depth + 1 : 0;
-    this.domNode = null;
-  }
-
-  mount() {
-    this.mounted = true;
-  }
-
-  unmount() {
-    this.mounted = false;
-    this.children.forEach(child => child.unmount());
-    this.children = [];
-  }
-
-  markNeedsBuild() {
-    this.dirty = true;
-  }
-
-  build() {
-    throw new Error('build() must be implemented');
-  }
-
-  rebuild() {
-    if (!this.dirty) return;
-    this.dirty = false;
-  }
-
-  inflateWidget(widget, parentElement) {
-    if (widget.state) {
-      return new StatefulElement(widget, parentElement, this._runtime);
-    }
-    return new StatelessElement(widget, parentElement, this._runtime);
-  }
-
-  addChild(child) {
-    this.children.push(child);
-  }
-
-  removeChild(child) {
-    const index = this.children.indexOf(child);
-    if (index > -1) {
-      this.children.splice(index, 1);
-    }
-  }
-
-  getInfo() {
-    return {
-      id: this.id,
-      mounted: this.mounted,
-      dirty: this.dirty,
-      depth: this.depth,
-      childrenCount: this.children.length,
-      type: this.constructor.name
-    };
-  }
-
-  dispose() {
-    this.unmount();
-    this.widget = null;
-    this.parent = null;
-    this.domNode = null;
-  }
-}
-
-class StatelessElement extends Element {
-  constructor(widget, parent, runtime) {
-    super(widget, parent, runtime);
-  }
-
-  build() {
-    return {
-      tag: 'div',
-      props: { 'data-widget': this.widget.name },
-      children: []
-    };
-  }
-}
-
-class StatefulElement extends Element {
-  constructor(widget, parent, runtime) {
-    super(widget, parent, runtime);
-    this.state = null;
-  }
-
-  initState() {
-    if (this.widget.state) {
-      this.state = new this.widget.state();
-      this.state.element = this;
-      if (this.state.initState) {
-        this.state.initState();
-      }
-    }
-  }
-
-  mount() {
-    this.initState();
-    super.mount();
-  }
-
-  build() {
-    if (!this.state) return { tag: 'div', children: [] };
-    return {
-      tag: 'div',
-      props: { 'data-widget': this.widget.name, 'data-state': this.state.name },
-      children: []
-    };
-  }
-
-  setState(newState) {
-    Object.assign(this.state, newState);
-    this.markNeedsBuild();
-  }
-
-  dispose() {
-    if (this.state && this.state.dispose) {
-      this.state.dispose();
-    }
-    this.state = null;
-    super.dispose();
-  }
-}
-
-// Test utilities
-class TestRunner {
-  constructor() {
-    this.tests = [];
-    this.passed = 0;
-    this.failed = 0;
-  }
-
-  describe(name, fn) {
-    console.log(`\n📋 ${name}`);
-    fn();
-  }
-
-  it(name, fn) {
-    try {
-      fn();
-      console.log(`  ✅ ${name}`);
-      this.passed++;
-    } catch (error) {
-      console.log(`  ❌ ${name}`);
-      console.log(`     ${error.message}`);
-      this.failed++;
-    }
-  }
-
-  assert(condition, message) {
-    if (!condition) {
-      throw new Error(message || 'Assertion failed');
-    }
-  }
-
-  assertEqual(actual, expected, message) {
-    if (actual !== expected) {
-      throw new Error(
-        message || `Expected ${expected} but got ${actual}`
-      );
-    }
-  }
-
-  assertNull(value, message) {
-    if (value !== null) {
-      throw new Error(message || `Expected null but got ${value}`);
-    }
-  }
-
-  assertNotNull(value, message) {
-    if (value === null) {
-      throw new Error(message || 'Expected value to not be null');
-    }
-  }
-
-  assertDefined(value, message) {
-    if (value === undefined) {
-      throw new Error(message || 'Expected value to be defined');
-    }
-  }
-
-  assertArrayLength(arr, length, message) {
-    if (!Array.isArray(arr) || arr.length !== length) {
-      throw new Error(
-        message || `Expected array length ${length} but got ${arr?.length}`
-      );
-    }
-  }
-
-  assertTrue(value, message) {
-    if (value !== true) {
-      throw new Error(message || `Expected true but got ${value}`);
-    }
-  }
-
-  assertFalse(value, message) {
-    if (value !== false) {
-      throw new Error(message || `Expected false but got ${value}`);
-    }
-  }
-
-  summary() {
-    const total = this.passed + this.failed;
-    console.log(`\n${'='.repeat(50)}`);
-    console.log(`Tests: ${total} | ✅ Passed: ${this.passed} | ❌ Failed: ${this.failed}`);
-    console.log(`${'='.repeat(50)}\n`);
-
-    return this.failed === 0;
-  }
-}
-
-// Run tests
-function runTests() {
-  const test = new TestRunner();
-
-  // Test 1: Element Initialization
-  test.describe('Element: Initialization', () => {
-    test.it('should create element with widget and runtime', () => {
-      const widget = new MockWidget('TestWidget');
-      const runtime = new MockRuntime();
-
-      const element = new Element(widget, null, runtime);
-
-      test.assertNotNull(element, 'Element should be created');
-      test.assertEqual(element.widget, widget, 'Should store widget');
-      test.assertEqual(element._runtime, runtime, 'Should store runtime');
-    });
-
-    test.it('should generate unique element ID', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const el1 = new Element(widget, null, runtime);
-      const el2 = new Element(widget, null, runtime);
-
-      test.assert(el1.id !== el2.id, 'Elements should have unique IDs');
-    });
-
-    test.it('should set depth based on parent', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      test.assertEqual(parent.depth, 0, 'Parent depth should be 0');
-
-      const child = new Element(widget, parent, runtime);
-      test.assertEqual(child.depth, 1, 'Child depth should be 1');
-
-      const grandchild = new Element(widget, child, runtime);
-      test.assertEqual(grandchild.depth, 2, 'Grandchild depth should be 2');
-    });
-
-    test.it('should throw without widget', () => {
-      const runtime = new MockRuntime();
-
-      try {
-        new Element(null, null, runtime);
-        throw new Error('Should have thrown');
-      } catch (error) {
-        test.assert(error.message.includes('Widget'), 'Should mention widget');
-      }
-    });
-
-    test.it('should throw without runtime', () => {
-      const widget = new MockWidget();
-
-      try {
-        new Element(widget, null, null);
-        throw new Error('Should have thrown');
-      } catch (error) {
-        test.assert(error.message.includes('Runtime'), 'Should mention runtime');
-      }
-    });
-
-    test.it('should initialize with correct default values', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const element = new Element(widget, null, runtime);
-
-      test.assertEqual(element.mounted, false, 'Should start unmounted');
-      test.assertEqual(element.dirty, false, 'Should start clean');
-      test.assertArrayLength(element.children, 0, 'Should start with no children');
-      test.assertNull(element.domNode, 'Should start with no DOM node');
-    });
-  });
-
-  // Test 2: Lifecycle Management
-  test.describe('Element: Lifecycle Management', () => {
-    test.it('should mount element', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-      const element = new Element(widget, null, runtime);
-
-      element.mount();
-
-      test.assertEqual(element.mounted, true, 'Should be mounted');
-    });
-
-    test.it('should unmount element', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-      const element = new Element(widget, null, runtime);
-
-      element.mount();
-      element.unmount();
-
-      test.assertEqual(element.mounted, false, 'Should be unmounted');
-    });
-
-    test.it('should unmount children when unmounting parent', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      const child1 = new Element(widget, parent, runtime);
-      const child2 = new Element(widget, parent, runtime);
-
-      parent.addChild(child1);
-      parent.addChild(child2);
-
-      child1.mount();
-      child2.mount();
-      parent.mount();
-
-      parent.unmount();
-
-      test.assertEqual(child1.mounted, false, 'Child1 should be unmounted');
-      test.assertEqual(child2.mounted, false, 'Child2 should be unmounted');
-    });
-
-    test.it('should mark dirty on markNeedsBuild', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-      const element = new Element(widget, null, runtime);
-
-      test.assertEqual(element.dirty, false, 'Should start clean');
-
-      element.markNeedsBuild();
-
-      test.assertEqual(element.dirty, true, 'Should be dirty');
-    });
-
-    test.it('should clean dirty flag on rebuild', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-      const element = new StatelessElement(widget, null, runtime);
-
-      element.markNeedsBuild();
-      test.assertEqual(element.dirty, true, 'Should be dirty');
-
-      element.rebuild();
-
-      test.assertEqual(element.dirty, false, 'Should be clean after rebuild');
-    });
-
-    test.it('should not rebuild if not dirty', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-      const element = new StatelessElement(widget, null, runtime);
-
-      element.dirty = false;
-      element.rebuild();
-
-      test.assertEqual(element.dirty, false, 'Should remain clean');
-    });
-  });
-
-  // Test 3: Child Management
-  test.describe('Element: Child Management', () => {
-    test.it('should add child element', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      const child = new Element(widget, parent, runtime);
-
-      parent.addChild(child);
-
-      test.assertArrayLength(parent.children, 1, 'Should have 1 child');
-      test.assertEqual(parent.children[0], child, 'Child should be in list');
-    });
-
-    test.it('should add multiple children', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      const child1 = new Element(widget, parent, runtime);
-      const child2 = new Element(widget, parent, runtime);
-      const child3 = new Element(widget, parent, runtime);
-
-      parent.addChild(child1);
-      parent.addChild(child2);
-      parent.addChild(child3);
-
-      test.assertArrayLength(parent.children, 3, 'Should have 3 children');
-    });
-
-    test.it('should remove child element', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      const child1 = new Element(widget, parent, runtime);
-      const child2 = new Element(widget, parent, runtime);
-
-      parent.addChild(child1);
-      parent.addChild(child2);
-
-      parent.removeChild(child1);
-
-      test.assertArrayLength(parent.children, 1, 'Should have 1 child');
-      test.assertEqual(parent.children[0], child2, 'Only child2 should remain');
-    });
-
-    test.it('should handle removing non-existent child', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      const child = new Element(widget, parent, runtime);
-      const other = new Element(widget, parent, runtime);
-
-      parent.addChild(child);
-
-      test.assert(() => {
-        parent.removeChild(other);
-        return true;
-      }, 'Should not throw');
-
-      test.assertArrayLength(parent.children, 1, 'Should still have 1 child');
-    });
-
-    test.it('should maintain parent-child relationships', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      const child = new Element(widget, parent, runtime);
-
-      test.assertEqual(child.parent, parent, 'Child should reference parent');
-      test.assertEqual(parent.depth, 0, 'Parent depth is 0');
-      test.assertEqual(child.depth, 1, 'Child depth is 1');
-    });
-  });
-
-  // Test 4: StatelessElement
-  test.describe('StatelessElement: Behavior', () => {
-    test.it('should build simple widget', () => {
-      const widget = new MockWidget('TestWidget');
-      const runtime = new MockRuntime();
-
-      const element = new StatelessElement(widget, null, runtime);
-      const built = element.build();
-
-      test.assertNotNull(built, 'Should return built object');
-      test.assertEqual(built.tag, 'div', 'Should have div tag');
-      test.assertEqual(built.props['data-widget'], 'TestWidget', 'Should have widget name');
-    });
-
-    test.it('should not have state property', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const element = new StatelessElement(widget, null, runtime);
-
-      test.assert(!element.hasOwnProperty('state') || element.state === undefined, 'Should not have state');
-    });
-
-    test.it('should rebuild without state changes', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const element = new StatelessElement(widget, null, runtime);
-
-      element.markNeedsBuild();
-      element.rebuild();
-
-      test.assertEqual(element.dirty, false, 'Should be clean after rebuild');
-    });
-  });
-
-  // Test 5: StatefulElement
-  test.describe('StatefulElement: State Management', () => {
-    test.it('should create element with state', () => {
-      const mockState = MockState;
-      const widget = new MockWidget('StatefulWidget');
-      widget.state = mockState;
-
-      const runtime = new MockRuntime();
-      const element = new StatefulElement(widget, null, runtime);
-
-      test.assertNull(element.state, 'State should not be initialized until mount');
-    });
-
-    test.it('should initialize state on mount', () => {
-      const widget = new MockWidget('StatefulWidget');
-      widget.state = MockState;
-
-      const runtime = new MockRuntime();
-      const element = new StatefulElement(widget, null, runtime);
-
-      element.mount();
-
-      test.assertNotNull(element.state, 'State should be initialized');
-      test.assert(element.state instanceof MockState, 'Should be MockState instance');
-      test.assertEqual(element.state.element, element, 'State should reference element');
-    });
-
-    test.it('should call state initState on mount', () => {
-      const widget = new MockWidget();
-      widget.state = MockState;
-
-      const runtime = new MockRuntime();
-      const element = new StatefulElement(widget, null, runtime);
-
-      element.mount();
-
-      test.assertTrue(element.state.initStateCalled, 'initState should be called');
-    });
-
-    test.it('should call setState', () => {
-      const widget = new MockWidget();
-      widget.state = MockState;
-
-      const runtime = new MockRuntime();
-      const element = new StatefulElement(widget, null, runtime);
-
-      element.mount();
-
-      const stateBefore = element.state.name;
-      element.setState({ name: 'UpdatedState' });
-
-      test.assertEqual(element.state.name, 'UpdatedState', 'State should be updated');
-      test.assertEqual(element.dirty, true, 'Element should be marked dirty');
-    });
-
-    test.it('should dispose state on unmount', () => {
-      const widget = new MockWidget();
-      widget.state = MockState;
-
-      const runtime = new MockRuntime();
-      const element = new StatefulElement(widget, null, runtime);
-
-      element.mount();
-      element.dispose();
-
-      test.assertNull(element.state, 'State should be cleared');
-      test.assert(element.state === null, 'State should be null');
-    });
-
-    test.it('should build with state data', () => {
-      const widget = new MockWidget('StatefulWidget');
-      widget.state = MockState;
-
-      const runtime = new MockRuntime();
-      const element = new StatefulElement(widget, null, runtime);
-
-      element.mount();
-      const built = element.build();
-
-      test.assertNotNull(built, 'Should return built object');
-      test.assertEqual(built.props['data-state'], 'State', 'Should have state name');
-    });
-  });
-
-  // Test 6: Widget Inflation
-  test.describe('Element: Widget Inflation', () => {
-    test.it('should inflate stateless widget', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      const inflated = parent.inflateWidget(widget, parent);
-
-      test.assert(inflated instanceof StatelessElement, 'Should create StatelessElement');
-    });
-
-    test.it('should inflate stateful widget', () => {
-      const widget = new MockWidget();
-      widget.state = MockState;
-
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      const inflated = parent.inflateWidget(widget, parent);
-
-      test.assert(inflated instanceof StatefulElement, 'Should create StatefulElement');
-    });
-  });
-
-  // Test 7: Information & Debugging
-  test.describe('Element: Information & Debugging', () => {
-    test.it('should provide element info', () => {
-      const widget = new MockWidget('TestWidget');
-      const runtime = new MockRuntime();
-
-      const element = new Element(widget, null, runtime);
-      element.mount();
-
-      const info = element.getInfo();
-
-      test.assertNotNull(info, 'Should return info object');
-      test.assertEqual(info.mounted, true, 'Should include mounted status');
-      test.assertEqual(info.dirty, false, 'Should include dirty status');
-      test.assertEqual(info.depth, 0, 'Should include depth');
-      test.assertEqual(info.childrenCount, 0, 'Should include children count');
-    });
-
-    test.it('should include children count in info', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      const child1 = new Element(widget, parent, runtime);
-      const child2 = new Element(widget, parent, runtime);
-
-      parent.addChild(child1);
-      parent.addChild(child2);
-
-      const info = parent.getInfo();
-
-      test.assertEqual(info.childrenCount, 2, 'Should count children');
-    });
-
-    test.it('should include element type in info', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const stateless = new StatelessElement(widget, null, runtime);
-      const info = stateless.getInfo();
-
-      test.assertEqual(info.type, 'StatelessElement', 'Should include type');
-    });
-  });
-
-  // Test 8: Cleanup & Disposal
-  test.describe('Element: Cleanup & Disposal', () => {
-    test.it('should dispose element', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const element = new Element(widget, null, runtime);
-      element.mount();
-
-      element.dispose();
-
-      test.assertNull(element.widget, 'Widget should be cleared');
-      test.assertNull(element.parent, 'Parent should be cleared');
-      test.assertNull(element.domNode, 'DOM node should be cleared');
-      test.assertEqual(element.mounted, false, 'Should be unmounted');
-    });
-
-    test.it('should clean up children on dispose', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      const child = new Element(widget, parent, runtime);
-
-      parent.addChild(child);
-      parent.dispose();
-
-      test.assertArrayLength(parent.children, 0, 'Children should be cleared');
-    });
-
-    test.it('should dispose state element on dispose', () => {
-      const widget = new MockWidget();
-      widget.state = MockState;
-
-      const runtime = new MockRuntime();
-      const element = new StatefulElement(widget, null, runtime);
-
-      element.mount();
-      const beforeDispose = element.state.disposeCalled;
-      element.dispose();
-
-      test.assertNull(element.state, 'State should be disposed');
-      test.assert(element.state === null, 'State should be null after dispose');
-    });
-  });
-
-  // Test 9: Complex Scenarios
-  test.describe('Element: Complex Scenarios', () => {
-    test.it('should handle deep element tree', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      let parent = new Element(widget, null, runtime);
-      const elements = [parent];
-
-      for (let i = 0; i < 10; i++) {
-        const child = new Element(widget, parent, runtime);
-        parent.addChild(child);
-        elements.push(child);
-        parent = child;
-      }
-
-      test.assertEqual(parent.depth, 10, 'Should maintain depth correctly');
-      test.assertEqual(elements[5].depth, 5, 'Intermediate element should have correct depth');
-    });
-
-    test.it('should handle multiple siblings', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-
-      for (let i = 0; i < 50; i++) {
-        const child = new Element(widget, parent, runtime);
-        parent.addChild(child);
-      }
-
-      test.assertArrayLength(parent.children, 50, 'Should handle many siblings');
-    });
-
-    test.it('should handle rapid mount/unmount cycles', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const element = new Element(widget, null, runtime);
-
-      for (let i = 0; i < 10; i++) {
-        element.mount();
-        test.assertEqual(element.mounted, true, `Should be mounted in cycle ${i}`);
-
-        element.unmount();
-        test.assertEqual(element.mounted, false, `Should be unmounted in cycle ${i}`);
-      }
-    });
-
-    test.it('should handle rapid rebuild cycles', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const element = new StatelessElement(widget, null, runtime);
-
-      for (let i = 0; i < 100; i++) {
-        element.markNeedsBuild();
-        test.assertEqual(element.dirty, true, `Should be dirty in cycle ${i}`);
-
-        element.rebuild();
-        test.assertEqual(element.dirty, false, `Should be clean in cycle ${i}`);
-      }
-    });
-  });
-
-  return test.summary();
-}
-
-// Run
-runTests();
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/test/inherited_element_integration.test.js b/packages/flutterjs_engine/src/runtime/test/inherited_element_integration.test.js
deleted file mode 100644
index efeab73f..00000000
--- a/packages/flutterjs_engine/src/runtime/test/inherited_element_integration.test.js
+++ /dev/null
@@ -1,830 +0,0 @@
-/**
- * Element Tests
- * 
- * Test suite for Element, StatelessElement, and StatefulElement classes
- * Tests lifecycle, tree building, state management, and rendering
- */
-
-// Mock document for Node.js environment
-if (typeof document === 'undefined') {
-  global.document = {
-    createElement: (tag) => ({
-      style: {},
-      offsetWidth: 200,
-      offsetHeight: 100,
-      offsetLeft: 0,
-      offsetTop: 0,
-      appendChild: function() {},
-      removeChild: function() {},
-      insertBefore: function() {},
-      replaceChild: function() {}
-    })
-  };
-}
-
-// Mock classes for testing
-class MockWidget {
-  constructor(name = 'Widget') {
-    this.name = name;
-    this.key = null;
-    this.type = 'MockWidget';
-  }
-}
-
-class MockRuntime {
-  constructor() {
-    this.debugMode = false;
-    this.serviceRegistry = new Map();
-    this.elements = new Map();
-  }
-
-  registerElement(id, element) {
-    this.elements.set(id, element);
-  }
-
-  getElement(id) {
-    return this.elements.get(id);
-  }
-}
-
-class MockState {
-  constructor(name = 'State') {
-    this.name = name;
-    this.mounted = false;
-    this.initStateCalled = false;
-    this.disposeCalled = false;
-  }
-
-  initState() {
-    this.initStateCalled = true;
-  }
-
-  dispose() {
-    this.disposeCalled = true;
-  }
-}
-
-// Base Element class (simplified for testing)
-class Element {
-  constructor(widget, parent, runtime) {
-    if (!widget) throw new Error('Widget is required');
-    if (!runtime) throw new Error('Runtime is required');
-
-    this.widget = widget;
-    this.parent = parent;
-    this._runtime = runtime;
-    this.id = `el_${Math.random().toString(36).substr(2, 9)}`;
-    this.children = [];
-    this.mounted = false;
-    this.dirty = false;
-    this.depth = parent ? parent.depth + 1 : 0;
-    this.domNode = null;
-  }
-
-  mount() {
-    this.mounted = true;
-  }
-
-  unmount() {
-    this.mounted = false;
-    this.children.forEach(child => child.unmount());
-    this.children = [];
-  }
-
-  markNeedsBuild() {
-    this.dirty = true;
-  }
-
-  build() {
-    throw new Error('build() must be implemented');
-  }
-
-  rebuild() {
-    if (!this.dirty) return;
-    this.dirty = false;
-  }
-
-  inflateWidget(widget, parentElement) {
-    if (widget.state) {
-      return new StatefulElement(widget, parentElement, this._runtime);
-    }
-    return new StatelessElement(widget, parentElement, this._runtime);
-  }
-
-  addChild(child) {
-    this.children.push(child);
-  }
-
-  removeChild(child) {
-    const index = this.children.indexOf(child);
-    if (index > -1) {
-      this.children.splice(index, 1);
-    }
-  }
-
-  getInfo() {
-    return {
-      id: this.id,
-      mounted: this.mounted,
-      dirty: this.dirty,
-      depth: this.depth,
-      childrenCount: this.children.length,
-      type: this.constructor.name
-    };
-  }
-
-  dispose() {
-    this.unmount();
-    this.widget = null;
-    this.parent = null;
-    this.domNode = null;
-  }
-}
-
-class StatelessElement extends Element {
-  constructor(widget, parent, runtime) {
-    super(widget, parent, runtime);
-  }
-
-  build() {
-    return {
-      tag: 'div',
-      props: { 'data-widget': this.widget.name },
-      children: []
-    };
-  }
-}
-
-class StatefulElement extends Element {
-  constructor(widget, parent, runtime) {
-    super(widget, parent, runtime);
-    this.state = null;
-  }
-
-  initState() {
-    if (this.widget.state) {
-      this.state = new this.widget.state();
-      this.state.element = this;
-      if (this.state.initState) {
-        this.state.initState();
-      }
-    }
-  }
-
-  mount() {
-    this.initState();
-    super.mount();
-  }
-
-  build() {
-    if (!this.state) return { tag: 'div', children: [] };
-    return {
-      tag: 'div',
-      props: { 'data-widget': this.widget.name, 'data-state': this.state.name },
-      children: []
-    };
-  }
-
-  setState(newState) {
-    Object.assign(this.state, newState);
-    this.markNeedsBuild();
-  }
-
-  dispose() {
-    if (this.state && this.state.dispose) {
-      this.state.dispose();
-    }
-    this.state = null;
-    super.dispose();
-  }
-}
-
-// Test utilities
-class TestRunner {
-  constructor() {
-    this.tests = [];
-    this.passed = 0;
-    this.failed = 0;
-  }
-
-  describe(name, fn) {
-    console.log(`\n📋 ${name}`);
-    fn();
-  }
-
-  it(name, fn) {
-    try {
-      fn();
-      console.log(`  ✅ ${name}`);
-      this.passed++;
-    } catch (error) {
-      console.log(`  ❌ ${name}`);
-      console.log(`     ${error.message}`);
-      this.failed++;
-    }
-  }
-
-  assert(condition, message) {
-    if (!condition) {
-      throw new Error(message || 'Assertion failed');
-    }
-  }
-
-  assertEqual(actual, expected, message) {
-    if (actual !== expected) {
-      throw new Error(
-        message || `Expected ${expected} but got ${actual}`
-      );
-    }
-  }
-
-  assertNull(value, message) {
-    if (value !== null) {
-      throw new Error(message || `Expected null but got ${value}`);
-    }
-  }
-
-  assertNotNull(value, message) {
-    if (value === null) {
-      throw new Error(message || 'Expected value to not be null');
-    }
-  }
-
-  assertDefined(value, message) {
-    if (value === undefined) {
-      throw new Error(message || 'Expected value to be defined');
-    }
-  }
-
-  assertArrayLength(arr, length, message) {
-    if (!Array.isArray(arr) || arr.length !== length) {
-      throw new Error(
-        message || `Expected array length ${length} but got ${arr?.length}`
-      );
-    }
-  }
-
-  assertTrue(value, message) {
-    if (value !== true) {
-      throw new Error(message || `Expected true but got ${value}`);
-    }
-  }
-
-  assertFalse(value, message) {
-    if (value !== false) {
-      throw new Error(message || `Expected false but got ${value}`);
-    }
-  }
-
-  summary() {
-    const total = this.passed + this.failed;
-    console.log(`\n${'='.repeat(50)}`);
-    console.log(`Tests: ${total} | ✅ Passed: ${this.passed} | ❌ Failed: ${this.failed}`);
-    console.log(`${'='.repeat(50)}\n`);
-
-    return this.failed === 0;
-  }
-}
-
-// Run tests
-function runTests() {
-  const test = new TestRunner();
-
-  // Test 1: Element Initialization
-  test.describe('Element: Initialization', () => {
-    test.it('should create element with widget and runtime', () => {
-      const widget = new MockWidget('TestWidget');
-      const runtime = new MockRuntime();
-
-      const element = new Element(widget, null, runtime);
-
-      test.assertNotNull(element, 'Element should be created');
-      test.assertEqual(element.widget, widget, 'Should store widget');
-      test.assertEqual(element._runtime, runtime, 'Should store runtime');
-    });
-
-    test.it('should generate unique element ID', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const el1 = new Element(widget, null, runtime);
-      const el2 = new Element(widget, null, runtime);
-
-      test.assert(el1.id !== el2.id, 'Elements should have unique IDs');
-    });
-
-    test.it('should set depth based on parent', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      test.assertEqual(parent.depth, 0, 'Parent depth should be 0');
-
-      const child = new Element(widget, parent, runtime);
-      test.assertEqual(child.depth, 1, 'Child depth should be 1');
-
-      const grandchild = new Element(widget, child, runtime);
-      test.assertEqual(grandchild.depth, 2, 'Grandchild depth should be 2');
-    });
-
-    test.it('should throw without widget', () => {
-      const runtime = new MockRuntime();
-
-      try {
-        new Element(null, null, runtime);
-        throw new Error('Should have thrown');
-      } catch (error) {
-        test.assert(error.message.includes('Widget'), 'Should mention widget');
-      }
-    });
-
-    test.it('should throw without runtime', () => {
-      const widget = new MockWidget();
-
-      try {
-        new Element(widget, null, null);
-        throw new Error('Should have thrown');
-      } catch (error) {
-        test.assert(error.message.includes('Runtime'), 'Should mention runtime');
-      }
-    });
-
-    test.it('should initialize with correct default values', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const element = new Element(widget, null, runtime);
-
-      test.assertEqual(element.mounted, false, 'Should start unmounted');
-      test.assertEqual(element.dirty, false, 'Should start clean');
-      test.assertArrayLength(element.children, 0, 'Should start with no children');
-      test.assertNull(element.domNode, 'Should start with no DOM node');
-    });
-  });
-
-  // Test 2: Lifecycle Management
-  test.describe('Element: Lifecycle Management', () => {
-    test.it('should mount element', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-      const element = new Element(widget, null, runtime);
-
-      element.mount();
-
-      test.assertEqual(element.mounted, true, 'Should be mounted');
-    });
-
-    test.it('should unmount element', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-      const element = new Element(widget, null, runtime);
-
-      element.mount();
-      element.unmount();
-
-      test.assertEqual(element.mounted, false, 'Should be unmounted');
-    });
-
-    test.it('should unmount children when unmounting parent', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      const child1 = new Element(widget, parent, runtime);
-      const child2 = new Element(widget, parent, runtime);
-
-      parent.addChild(child1);
-      parent.addChild(child2);
-
-      child1.mount();
-      child2.mount();
-      parent.mount();
-
-      parent.unmount();
-
-      test.assertEqual(child1.mounted, false, 'Child1 should be unmounted');
-      test.assertEqual(child2.mounted, false, 'Child2 should be unmounted');
-    });
-
-    test.it('should mark dirty on markNeedsBuild', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-      const element = new Element(widget, null, runtime);
-
-      test.assertEqual(element.dirty, false, 'Should start clean');
-
-      element.markNeedsBuild();
-
-      test.assertEqual(element.dirty, true, 'Should be dirty');
-    });
-
-    test.it('should clean dirty flag on rebuild', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-      const element = new StatelessElement(widget, null, runtime);
-
-      element.markNeedsBuild();
-      test.assertEqual(element.dirty, true, 'Should be dirty');
-
-      element.rebuild();
-
-      test.assertEqual(element.dirty, false, 'Should be clean after rebuild');
-    });
-
-    test.it('should not rebuild if not dirty', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-      const element = new StatelessElement(widget, null, runtime);
-
-      element.dirty = false;
-      element.rebuild();
-
-      test.assertEqual(element.dirty, false, 'Should remain clean');
-    });
-  });
-
-  // Test 3: Child Management
-  test.describe('Element: Child Management', () => {
-    test.it('should add child element', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      const child = new Element(widget, parent, runtime);
-
-      parent.addChild(child);
-
-      test.assertArrayLength(parent.children, 1, 'Should have 1 child');
-      test.assertEqual(parent.children[0], child, 'Child should be in list');
-    });
-
-    test.it('should add multiple children', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      const child1 = new Element(widget, parent, runtime);
-      const child2 = new Element(widget, parent, runtime);
-      const child3 = new Element(widget, parent, runtime);
-
-      parent.addChild(child1);
-      parent.addChild(child2);
-      parent.addChild(child3);
-
-      test.assertArrayLength(parent.children, 3, 'Should have 3 children');
-    });
-
-    test.it('should remove child element', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      const child1 = new Element(widget, parent, runtime);
-      const child2 = new Element(widget, parent, runtime);
-
-      parent.addChild(child1);
-      parent.addChild(child2);
-
-      parent.removeChild(child1);
-
-      test.assertArrayLength(parent.children, 1, 'Should have 1 child');
-      test.assertEqual(parent.children[0], child2, 'Only child2 should remain');
-    });
-
-    test.it('should handle removing non-existent child', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      const child = new Element(widget, parent, runtime);
-      const other = new Element(widget, parent, runtime);
-
-      parent.addChild(child);
-
-      test.assert(() => {
-        parent.removeChild(other);
-        return true;
-      }, 'Should not throw');
-
-      test.assertArrayLength(parent.children, 1, 'Should still have 1 child');
-    });
-
-    test.it('should maintain parent-child relationships', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      const child = new Element(widget, parent, runtime);
-
-      test.assertEqual(child.parent, parent, 'Child should reference parent');
-      test.assertEqual(parent.depth, 0, 'Parent depth is 0');
-      test.assertEqual(child.depth, 1, 'Child depth is 1');
-    });
-  });
-
-  // Test 4: StatelessElement
-  test.describe('StatelessElement: Behavior', () => {
-    test.it('should build simple widget', () => {
-      const widget = new MockWidget('TestWidget');
-      const runtime = new MockRuntime();
-
-      const element = new StatelessElement(widget, null, runtime);
-      const built = element.build();
-
-      test.assertNotNull(built, 'Should return built object');
-      test.assertEqual(built.tag, 'div', 'Should have div tag');
-      test.assertEqual(built.props['data-widget'], 'TestWidget', 'Should have widget name');
-    });
-
-    test.it('should not have state property', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const element = new StatelessElement(widget, null, runtime);
-
-      test.assert(!element.hasOwnProperty('state') || element.state === undefined, 'Should not have state');
-    });
-
-    test.it('should rebuild without state changes', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const element = new StatelessElement(widget, null, runtime);
-
-      element.markNeedsBuild();
-      element.rebuild();
-
-      test.assertEqual(element.dirty, false, 'Should be clean after rebuild');
-    });
-  });
-
-  // Test 5: StatefulElement
-  test.describe('StatefulElement: State Management', () => {
-    test.it('should create element with state', () => {
-      const mockState = MockState;
-      const widget = new MockWidget('StatefulWidget');
-      widget.state = mockState;
-
-      const runtime = new MockRuntime();
-      const element = new StatefulElement(widget, null, runtime);
-
-      test.assertNull(element.state, 'State should not be initialized until mount');
-    });
-
-    test.it('should initialize state on mount', () => {
-      const widget = new MockWidget('StatefulWidget');
-      widget.state = MockState;
-
-      const runtime = new MockRuntime();
-      const element = new StatefulElement(widget, null, runtime);
-
-      element.mount();
-
-      test.assertNotNull(element.state, 'State should be initialized');
-      test.assert(element.state instanceof MockState, 'Should be MockState instance');
-      test.assertEqual(element.state.element, element, 'State should reference element');
-    });
-
-    test.it('should call state initState on mount', () => {
-      const widget = new MockWidget();
-      widget.state = MockState;
-
-      const runtime = new MockRuntime();
-      const element = new StatefulElement(widget, null, runtime);
-
-      element.mount();
-
-      test.assertTrue(element.state.initStateCalled, 'initState should be called');
-    });
-
-    test.it('should call setState', () => {
-      const widget = new MockWidget();
-      widget.state = MockState;
-
-      const runtime = new MockRuntime();
-      const element = new StatefulElement(widget, null, runtime);
-
-      element.mount();
-
-      const stateBefore = element.state.name;
-      element.setState({ name: 'UpdatedState' });
-
-      test.assertEqual(element.state.name, 'UpdatedState', 'State should be updated');
-      test.assertEqual(element.dirty, true, 'Element should be marked dirty');
-    });
-
-    test.it('should dispose state on unmount', () => {
-      const widget = new MockWidget();
-      widget.state = MockState;
-
-      const runtime = new MockRuntime();
-      const element = new StatefulElement(widget, null, runtime);
-
-      element.mount();
-      element.dispose();
-
-      test.assertNull(element.state, 'State should be cleared');
-      test.assert(element.state === null, 'State should be null');
-    });
-
-    test.it('should build with state data', () => {
-      const widget = new MockWidget('StatefulWidget');
-      widget.state = MockState;
-
-      const runtime = new MockRuntime();
-      const element = new StatefulElement(widget, null, runtime);
-
-      element.mount();
-      const built = element.build();
-
-      test.assertNotNull(built, 'Should return built object');
-      test.assertEqual(built.props['data-state'], 'State', 'Should have state name');
-    });
-  });
-
-  // Test 6: Widget Inflation
-  test.describe('Element: Widget Inflation', () => {
-    test.it('should inflate stateless widget', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      const inflated = parent.inflateWidget(widget, parent);
-
-      test.assert(inflated instanceof StatelessElement, 'Should create StatelessElement');
-    });
-
-    test.it('should inflate stateful widget', () => {
-      const widget = new MockWidget();
-      widget.state = MockState;
-
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      const inflated = parent.inflateWidget(widget, parent);
-
-      test.assert(inflated instanceof StatefulElement, 'Should create StatefulElement');
-    });
-  });
-
-  // Test 7: Information & Debugging
-  test.describe('Element: Information & Debugging', () => {
-    test.it('should provide element info', () => {
-      const widget = new MockWidget('TestWidget');
-      const runtime = new MockRuntime();
-
-      const element = new Element(widget, null, runtime);
-      element.mount();
-
-      const info = element.getInfo();
-
-      test.assertNotNull(info, 'Should return info object');
-      test.assertEqual(info.mounted, true, 'Should include mounted status');
-      test.assertEqual(info.dirty, false, 'Should include dirty status');
-      test.assertEqual(info.depth, 0, 'Should include depth');
-      test.assertEqual(info.childrenCount, 0, 'Should include children count');
-    });
-
-    test.it('should include children count in info', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      const child1 = new Element(widget, parent, runtime);
-      const child2 = new Element(widget, parent, runtime);
-
-      parent.addChild(child1);
-      parent.addChild(child2);
-
-      const info = parent.getInfo();
-
-      test.assertEqual(info.childrenCount, 2, 'Should count children');
-    });
-
-    test.it('should include element type in info', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const stateless = new StatelessElement(widget, null, runtime);
-      const info = stateless.getInfo();
-
-      test.assertEqual(info.type, 'StatelessElement', 'Should include type');
-    });
-  });
-
-  // Test 8: Cleanup & Disposal
-  test.describe('Element: Cleanup & Disposal', () => {
-    test.it('should dispose element', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const element = new Element(widget, null, runtime);
-      element.mount();
-
-      element.dispose();
-
-      test.assertNull(element.widget, 'Widget should be cleared');
-      test.assertNull(element.parent, 'Parent should be cleared');
-      test.assertNull(element.domNode, 'DOM node should be cleared');
-      test.assertEqual(element.mounted, false, 'Should be unmounted');
-    });
-
-    test.it('should clean up children on dispose', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-      const child = new Element(widget, parent, runtime);
-
-      parent.addChild(child);
-      parent.dispose();
-
-      test.assertArrayLength(parent.children, 0, 'Children should be cleared');
-    });
-
-    test.it('should dispose state element on dispose', () => {
-      const widget = new MockWidget();
-      widget.state = MockState;
-
-      const runtime = new MockRuntime();
-      const element = new StatefulElement(widget, null, runtime);
-
-      element.mount();
-      const beforeDispose = element.state.disposeCalled;
-      element.dispose();
-
-      test.assertNull(element.state, 'State should be disposed');
-      test.assert(element.state === null, 'State should be null after dispose');
-    });
-  });
-
-  // Test 9: Complex Scenarios
-  test.describe('Element: Complex Scenarios', () => {
-    test.it('should handle deep element tree', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      let parent = new Element(widget, null, runtime);
-      const elements = [parent];
-
-      for (let i = 0; i < 10; i++) {
-        const child = new Element(widget, parent, runtime);
-        parent.addChild(child);
-        elements.push(child);
-        parent = child;
-      }
-
-      test.assertEqual(parent.depth, 10, 'Should maintain depth correctly');
-      test.assertEqual(elements[5].depth, 5, 'Intermediate element should have correct depth');
-    });
-
-    test.it('should handle multiple siblings', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const parent = new Element(widget, null, runtime);
-
-      for (let i = 0; i < 50; i++) {
-        const child = new Element(widget, parent, runtime);
-        parent.addChild(child);
-      }
-
-      test.assertArrayLength(parent.children, 50, 'Should handle many siblings');
-    });
-
-    test.it('should handle rapid mount/unmount cycles', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const element = new Element(widget, null, runtime);
-
-      for (let i = 0; i < 10; i++) {
-        element.mount();
-        test.assertEqual(element.mounted, true, `Should be mounted in cycle ${i}`);
-
-        element.unmount();
-        test.assertEqual(element.mounted, false, `Should be unmounted in cycle ${i}`);
-      }
-    });
-
-    test.it('should handle rapid rebuild cycles', () => {
-      const widget = new MockWidget();
-      const runtime = new MockRuntime();
-
-      const element = new StatelessElement(widget, null, runtime);
-
-      for (let i = 0; i < 100; i++) {
-        element.markNeedsBuild();
-        test.assertEqual(element.dirty, true, `Should be dirty in cycle ${i}`);
-
-        element.rebuild();
-        test.assertEqual(element.dirty, false, `Should be clean in cycle ${i}`);
-      }
-    });
-  });
-
-  return test.summary();
-}
-
-// Run
-runTests();
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/test/memory_integration.test.js b/packages/flutterjs_engine/src/runtime/test/memory_integration.test.js
deleted file mode 100644
index 5b29c24a..00000000
--- a/packages/flutterjs_engine/src/runtime/test/memory_integration.test.js
+++ /dev/null
@@ -1,672 +0,0 @@
-/**
- * MemoryManager Integration Tests
- * 
- * Real-world scenarios testing memory management with complete workflows
- */
-
-import {  MemoryManager,
-  MemoryProfiler} from "../src/memory_manager.js";
-
-// More realistic element simulation
-class TestElement {
-  constructor(id, type = 'StatelessElement') {
-    this.id = id;
-    this.type = type;
-    this.mounted = false;
-    this.children = [];
-    this.parent = null;
-    this.depth = 0;
-    this.vnode = null;
-    this.domNode = null;
-    this.state = null;
-  }
-  
-  mount() {
-    this.mounted = true;
-  }
-  
-  unmount() {
-    this.mounted = false;
-    this.children.forEach(child => child.unmount());
-  }
-  
-  addChild(child) {
-    this.children.push(child);
-    child.parent = this;
-    child.depth = this.depth + 1;
-  }
-}
-
-class TestState {
-  constructor() {
-    this.values = {};
-    this.listeners = [];
-  }
-  
-  dispose() {
-    this.listeners = [];
-  }
-}
-
-// Mock DOM with realistic behavior
-class TestDOMNode {
-  constructor(tag) {
-    this.tag = tag;
-    this.eventListeners = new Map();
-    this.children = [];
-  }
-  
-  addEventListener(event, handler, options) {
-    if (!this.eventListeners.has(event)) {
-      this.eventListeners.set(event, []);
-    }
-    this.eventListeners.get(event).push({ handler, options });
-  }
-  
-  removeEventListener(event, handler) {
-    if (!this.eventListeners.has(event)) return;
-    
-    const listeners = this.eventListeners.get(event);
-    const index = listeners.findIndex(l => l.handler === handler);
-    
-    if (index !== -1) {
-      listeners.splice(index, 1);
-    }
-  }
-  
-  appendChild(child) {
-    this.children.push(child);
-  }
-}
-
-describe('MemoryManager Integration Tests', () => {
-  let memoryManager;
-  
-  beforeEach(() => {
-    memoryManager = new MemoryManager({
-      enableLeakDetection: false,
-      debugMode: false
-    });
-  });
-  
-  afterEach(() => {
-    memoryManager.dispose();
-  });
-  
-  describe('Application Lifecycle', () => {
-    test('should handle complete app mount and unmount', () => {
-      // Simulate app tree
-      const root = new TestElement('root', 'StatelessElement');
-      const page = new TestElement('page', 'StatefulElement');
-      const header = new TestElement('header', 'StatelessElement');
-      const body = new TestElement('body', 'StatelessElement');
-      
-      root.addChild(page);
-      page.addChild(header);
-      page.addChild(body);
-      
-      // Mount app
-      [root, page, header, body].forEach(el => {
-        el.mount();
-        memoryManager.register(el);
-      });
-      
-      expect(memoryManager.stats.elementsCreated).toBe(4);
-      expect(memoryManager.elementRefs.size).toBe(4);
-      
-      // Unmount app
-      [root, page, header, body].forEach(el => {
-        el.unmount();
-        memoryManager.unregister(el);
-      });
-      
-      memoryManager.performBatchCleanup();
-      
-      expect(memoryManager.stats.elementsDisposed).toBe(4);
-      expect(memoryManager.elementRefs.size).toBe(0);
-    });
-    
-    test('should handle page navigation', () => {
-      const app = new TestElement('app', 'StatelessElement');
-      memoryManager.register(app);
-      app.mount();
-      
-      // Page 1
-      const page1 = new TestElement('page1', 'StatefulElement');
-      app.addChild(page1);
-      page1.mount();
-      memoryManager.register(page1);
-      
-      const page1Children = [];
-      for (let i = 0; i < 5; i++) {
-        const child = new TestElement(`page1_child_${i}`, 'StatelessElement');
-        page1.addChild(child);
-        child.mount();
-        memoryManager.register(child);
-        page1Children.push(child);
-      }
-      
-      expect(memoryManager.elementRefs.size).toBe(7); // app + page1 + 5 children
-      
-      // Navigate away - unmount page1
-      page1.unmount();
-      memoryManager.unregister(page1);
-      page1Children.forEach(child => {
-        child.unmount();
-        memoryManager.unregister(child);
-      });
-      
-      memoryManager.performBatchCleanup();
-      
-      expect(memoryManager.elementRefs.size).toBe(1); // Only app remains
-      
-      // Page 2
-      const page2 = new TestElement('page2', 'StatefulElement');
-      app.addChild(page2);
-      page2.mount();
-      memoryManager.register(page2);
-      
-      expect(memoryManager.elementRefs.size).toBe(2); // app + page2
-    });
-    
-    test('should handle rapid mount/unmount cycles', () => {
-      const app = new TestElement('app', 'StatelessElement');
-      memoryManager.register(app);
-      app.mount();
-      
-      // Simulate rapid component mounting/unmounting
-      for (let cycle = 0; cycle < 10; cycle++) {
-        const component = new TestElement(`component_${cycle}`, 'StatefulElement');
-        app.addChild(component);
-        component.mount();
-        memoryManager.register(component);
-        
-        // Immediate unmount
-        component.unmount();
-        memoryManager.unregister(component);
-      }
-      
-      memoryManager.performBatchCleanup();
-      
-      expect(memoryManager.stats.elementsCreated).toBe(11); // app + 10 components
-      expect(memoryManager.stats.elementsDisposed).toBe(10);
-      expect(memoryManager.elementRefs.size).toBe(1); // Only app
-    });
-  });
-  
-  describe('State Management', () => {
-    test('should track stateful components with state', () => {
-      const component = new TestElement('stateful', 'StatefulElement');
-      const state = new TestState();
-      state.values = { count: 0 };
-      
-      component.state = state;
-      component.mount();
-      
-      memoryManager.register(component);
-      memoryManager.trackState(state, component);
-      
-      expect(memoryManager.stateRegistry.get(state)).toBe(component);
-      
-      // Cleanup
-      component.unmount();
-      memoryManager.cleanupElement(component);
-      
-      expect(memoryManager.stateRegistry.has(state)).toBe(false);
-    });
-    
-    test('should cleanup state on component disposal', () => {
-      const components = [];
-      const states = [];
-      
-      for (let i = 0; i < 5; i++) {
-        const component = new TestElement(`comp_${i}`, 'StatefulElement');
-        const state = new TestState();
-        
-        component.state = state;
-        component.mount();
-        
-        memoryManager.register(component);
-        memoryManager.trackState(state, component);
-        
-        components.push(component);
-        states.push(state);
-      }
-      
-      // Cleanup all
-      components.forEach(comp => {
-        comp.unmount();
-        memoryManager.cleanupElement(comp);
-      });
-      
-      // All states should be cleaned
-      states.forEach(state => {
-        expect(memoryManager.stateRegistry.has(state)).toBe(false);
-      });
-    });
-  });
-  
-  describe('Event Listener Management', () => {
-    test('should track and cleanup listeners in component lifecycle', () => {
-      const component = new TestElement('interactive', 'StatelessElement');
-      const button = new TestDOMNode('button');
-      
-      component.mount();
-      memoryManager.register(component);
-      
-      // Attach listeners
-      const onClick = () => console.log('clicked');
-      const onMouseEnter = () => console.log('entered');
-      const onMouseLeave = () => console.log('left');
-      
-      button.addEventListener('click', onClick);
-      button.addEventListener('mouseenter', onMouseEnter);
-      button.addEventListener('mouseleave', onMouseLeave);
-      
-      memoryManager.trackListener(component, button, 'click', onClick);
-      memoryManager.trackListener(component, button, 'mouseenter', onMouseEnter);
-      memoryManager.trackListener(component, button, 'mouseleave', onMouseLeave);
-      
-      expect(memoryManager.stats.listenersAttached).toBe(3);
-      expect(button.eventListeners.get('click').length).toBe(1);
-      
-      // Cleanup component
-      memoryManager.removeAllListeners(component);
-      
-      expect(memoryManager.stats.listenersRemoved).toBe(3);
-      expect(button.eventListeners.get('click').length).toBe(0);
-      expect(button.eventListeners.get('mouseenter').length).toBe(0);
-    });
-    
-    test('should handle multiple components with listeners', () => {
-      const components = [];
-      const buttons = [];
-      
-      for (let i = 0; i < 5; i++) {
-        const component = new TestElement(`comp_${i}`, 'StatelessElement');
-        const button = new TestDOMNode('button');
-        
-        component.mount();
-        memoryManager.register(component);
-        
-        const handler = () => {};
-        button.addEventListener('click', handler);
-        memoryManager.trackListener(component, button, 'click', handler);
-        
-        components.push(component);
-        buttons.push(button);
-      }
-      
-      expect(memoryManager.stats.listenersAttached).toBe(5);
-      
-      // Cleanup odd components
-      components.forEach((comp, index) => {
-        if (index % 2 === 1) {
-          memoryManager.removeAllListeners(comp);
-        }
-      });
-      
-      expect(memoryManager.stats.listenersRemoved).toBe(2);
-    });
-  });
-  
-  describe('Memory Leak Scenarios', () => {
-    test('should detect leaked components after navigation', (done) => {
-      const mm = new MemoryManager({
-        enableLeakDetection: true,
-        leakDetectionInterval: 100
-      });
-      
-      // Create and mount page
-      const page = new TestElement('old_page', 'StatefulElement');
-      page.mount();
-      mm.register(page);
-      
-      // Simulate navigation - unmount but forget to cleanup
-      page.unmount();
-      
-      // Make it appear old
-      mm.elementRefs.get('old_page').registeredAt = Date.now() - 70000;
-      
-      setTimeout(() => {
-        const leaks = mm.detectLeaks();
-        
-        expect(leaks.length).toBeGreaterThan(0);
-        const elementLeaks = leaks.filter(l => l.type === 'element');
-        expect(elementLeaks.length).toBeGreaterThan(0);
-        
-        mm.dispose();
-        done();
-      }, 150);
-    });
-    
-    test('should detect leaked event listeners', () => {
-      const mm = new MemoryManager({
-        enableLeakDetection: true
-      });
-      
-      const component = new TestElement('comp', 'StatelessElement');
-      const button = new TestDOMNode('button');
-      
-      mm.register(component);
-      component.mount();
-      
-      const handler = () => {};
-      button.addEventListener('click', handler);
-      mm.trackListener(component, button, 'click', handler);
-      
-      // Simulate old listener
-      const listenerId = 'comp_click_1';
-      mm.listenerRefs.set(listenerId, {
-        elementId: 'comp',
-        event: 'click',
-        attachedAt: Date.now() - 70000
-      });
-      
-      const leaks = mm.detectLeaks();
-      
-      const listenerLeaks = leaks.filter(l => l.type === 'listener');
-      expect(listenerLeaks.length).toBeGreaterThan(0);
-      
-      mm.dispose();
-    });
-    
-    test('should cleanup leaked components with force cleanup', () => {
-      // Create many components
-      for (let i = 0; i < 20; i++) {
-        const comp = new TestElement(`comp_${i}`, 'StatelessElement');
-        comp.mount();
-        memoryManager.register(comp);
-      }
-      
-      expect(memoryManager.elementRefs.size).toBe(20);
-      
-      // Unmount half without cleanup
-      let index = 0;
-      memoryManager.elementRefs.forEach((ref) => {
-        if (index % 2 === 0) {
-          ref.element.unmount();
-        }
-        index++;
-      });
-      
-      // Force cleanup
-      const cleaned = memoryManager.forceCleanupUnmounted();
-      
-      expect(cleaned).toBe(10);
-      expect(memoryManager.elementRefs.size).toBe(10);
-    });
-  });
-  
-  describe('VNode Lifecycle', () => {
-    test('should track VNodes through render cycles', () => {
-      const component = new TestElement('comp', 'StatefulElement');
-      memoryManager.register(component);
-      component.mount();
-      
-      // First render
-      const vnode1 = { id: 'v1', tag: 'div', children: [] };
-      component.vnode = vnode1;
-      memoryManager.registerVNode(vnode1, component);
-      
-      expect(memoryManager.stats.vnodeCreated).toBe(1);
-      
-      // Re-render (new VNode)
-      memoryManager.unregisterVNode(vnode1);
-      
-      const vnode2 = { id: 'v2', tag: 'div', children: [] };
-      component.vnode = vnode2;
-      memoryManager.registerVNode(vnode2, component);
-      
-      expect(memoryManager.stats.vnodeCreated).toBe(2);
-      expect(memoryManager.stats.vnodeDisposed).toBe(1);
-      
-      // Cleanup
-      memoryManager.unregisterVNode(vnode2);
-      
-      expect(memoryManager.stats.vnodeDisposed).toBe(2);
-    });
-    
-    test('should handle complex VNode trees', () => {
-      const root = new TestElement('root', 'StatelessElement');
-      memoryManager.register(root);
-      
-      const rootVNode = {
-        id: 'root',
-        tag: 'div',
-        children: []
-      };
-      
-      // Create 10 child VNodes
-      for (let i = 0; i < 10; i++) {
-        const childVNode = {
-          id: `child_${i}`,
-          tag: 'span',
-          children: []
-        };
-        rootVNode.children.push(childVNode);
-        memoryManager.registerVNode(childVNode, root);
-      }
-      
-      memoryManager.registerVNode(rootVNode, root);
-      
-      expect(memoryManager.stats.vnodeCreated).toBe(11);
-      
-      // Cleanup all
-      rootVNode.children.forEach(child => {
-        memoryManager.unregisterVNode(child);
-      });
-      memoryManager.unregisterVNode(rootVNode);
-      
-      expect(memoryManager.stats.vnodeDisposed).toBe(11);
-    });
-  });
-  
-  describe('Performance Monitoring', () => {
-    test('should track performance under load', () => {
-      const profiler = new MemoryProfiler(memoryManager);
-      
-      profiler.takeSnapshot();
-      
-      // Simulate heavy load
-      for (let i = 0; i < 100; i++) {
-        const comp = new TestElement(`comp_${i}`, 'StatelessElement');
-        comp.mount();
-        memoryManager.register(comp);
-        
-        const vnode = { id: `v${i}`, tag: 'div' };
-        memoryManager.registerVNode(vnode, comp);
-      }
-      
-      profiler.takeSnapshot();
-      
-      // Cleanup half
-      let index = 0;
-      memoryManager.elementRefs.forEach((ref) => {
-        if (index < 50) {
-          ref.element.unmount();
-          memoryManager.cleanupElement(ref.element);
-        }
-        index++;
-      });
-      
-      profiler.takeSnapshot();
-      
-      const trend = profiler.getTrend();
-      
-      expect(trend.elementsCreated).toBe(100);
-      expect(trend.elementsDisposed).toBe(50);
-      expect(profiler.snapshots.length).toBe(3);
-    });
-    
-    test('should monitor memory growth over time', () => {
-      const profiler = new MemoryProfiler(memoryManager);
-      const snapshots = [];
-      
-      // Take snapshots over multiple cycles
-      for (let cycle = 0; cycle < 5; cycle++) {
-        // Create components
-        for (let i = 0; i < 10; i++) {
-          const comp = new TestElement(`cycle${cycle}_comp${i}`, 'StatelessElement');
-          comp.mount();
-          memoryManager.register(comp);
-        }
-        
-        snapshots.push(profiler.takeSnapshot());
-        
-        // Cleanup some
-        if (cycle > 0) {
-          const toClean = Array.from(memoryManager.elementRefs.values()).slice(0, 5);
-          toClean.forEach(ref => {
-            ref.element.unmount();
-            memoryManager.cleanupElement(ref.element);
-          });
-        }
-      }
-      
-      // Check growth pattern
-      expect(snapshots.length).toBe(5);
-      expect(snapshots[4].stats.elementsCreated).toBeGreaterThan(snapshots[0].stats.elementsCreated);
-    });
-  });
-  
-  describe('Real-world Scenarios', () => {
-    test('should handle todo app lifecycle', () => {
-      // Root app
-      const app = new TestElement('TodoApp', 'StatefulElement');
-      app.state = new TestState();
-      app.mount();
-      memoryManager.register(app);
-      memoryManager.trackState(app.state, app);
-      
-      // Todo list
-      const todoList = new TestElement('TodoList', 'StatelessElement');
-      app.addChild(todoList);
-      todoList.mount();
-      memoryManager.register(todoList);
-      
-      // Create 10 todo items
-      const todos = [];
-      for (let i = 0; i < 10; i++) {
-        const todo = new TestElement(`Todo_${i}`, 'StatelessElement');
-        const button = new TestDOMNode('button');
-        
-        todoList.addChild(todo);
-        todo.mount();
-        memoryManager.register(todo);
-        
-        // Add delete button listener
-        const onDelete = () => console.log(`Delete ${i}`);
-        button.addEventListener('click', onDelete);
-        memoryManager.trackListener(todo, button, 'click', onDelete);
-        
-        todos.push(todo);
-      }
-      
-      expect(memoryManager.stats.elementsCreated).toBe(12); // app + list + 10 todos
-      expect(memoryManager.stats.listenersAttached).toBe(10);
-      
-      // Delete 5 todos
-      for (let i = 0; i < 5; i++) {
-        todos[i].unmount();
-        memoryManager.removeAllListeners(todos[i]);
-        memoryManager.unregister(todos[i]);
-      }
-      
-      memoryManager.performBatchCleanup();
-      
-      expect(memoryManager.stats.elementsDisposed).toBe(5);
-      expect(memoryManager.stats.listenersRemoved).toBe(5);
-      expect(memoryManager.elementRefs.size).toBe(7); // app + list + 5 todos
-    });
-    
-    test('should handle form with multiple inputs', () => {
-      const form = new TestElement('Form', 'StatefulElement');
-      form.state = new TestState();
-      form.mount();
-      memoryManager.register(form);
-      
-      const inputs = [];
-      const inputDOMs = [];
-      
-      // Create 5 input fields
-      for (let i = 0; i < 5; i++) {
-        const input = new TestElement(`Input_${i}`, 'StatelessElement');
-        const inputDOM = new TestDOMNode('input');
-        
-        form.addChild(input);
-        input.mount();
-        memoryManager.register(input);
-        
-        // onChange listener
-        const onChange = () => console.log(`Input ${i} changed`);
-        inputDOM.addEventListener('change', onChange);
-        memoryManager.trackListener(input, inputDOM, 'change', onChange);
-        
-        // onFocus listener
-        const onFocus = () => console.log(`Input ${i} focused`);
-        inputDOM.addEventListener('focus', onFocus);
-        memoryManager.trackListener(input, inputDOM, 'focus', onFocus);
-        
-        inputs.push(input);
-        inputDOMs.push(inputDOM);
-      }
-      
-      expect(memoryManager.stats.listenersAttached).toBe(10); // 2 per input
-      
-      // Form submit (cleanup all)
-      inputs.forEach(input => {
-        input.unmount();
-        memoryManager.removeAllListeners(input);
-        memoryManager.unregister(input);
-      });
-      
-      memoryManager.performBatchCleanup();
-      
-      expect(memoryManager.stats.listenersRemoved).toBe(10);
-      expect(memoryManager.elementRefs.size).toBe(1); // Only form
-    });
-  });
-  
-  describe('Edge Cases and Stress Tests', () => {
-    test('should handle thousands of elements', () => {
-      const start = Date.now();
-      
-      for (let i = 0; i < 1000; i++) {
-        const comp = new TestElement(`comp_${i}`, 'StatelessElement');
-        comp.mount();
-        memoryManager.register(comp);
-      }
-      
-      const duration = Date.now() - start;
-      
-      expect(memoryManager.elementRefs.size).toBe(1000);
-      expect(duration).toBeLessThan(1000); // Should be fast
-      
-      // Cleanup all
-      memoryManager.clear();
-      
-      expect(memoryManager.elementRefs.size).toBe(0);
-    });
-    
-    test('should handle cleanup during iteration', () => {
-      for (let i = 0; i < 10; i++) {
-        memoryManager.register(new TestElement(`comp_${i}`, 'StatelessElement'));
-      }
-      
-      // Cleanup while iterating
-      memoryManager.elementRefs.forEach((ref, id) => {
-        if (parseInt(id.split('_')[1]) % 2 === 0) {
-          memoryManager.cleanupElement(ref.element);
-        }
-      });
-      
-      expect(memoryManager.stats.elementsDisposed).toBeGreaterThan(0);
-    });
-  });
-});
-
-// Run tests
-if (typeof module !== 'undefined' && require.main === module) {
-  console.log('Running MemoryManager integration tests...');
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/test/memory_manager.test.js b/packages/flutterjs_engine/src/runtime/test/memory_manager.test.js
deleted file mode 100644
index 0a74a120..00000000
--- a/packages/flutterjs_engine/src/runtime/test/memory_manager.test.js
+++ /dev/null
@@ -1,625 +0,0 @@
-/**
- * MemoryManager Test Suite
- * 
- * Comprehensive tests for the FlutterJS Memory Manager
- */
-
-import { MemoryManager, MemoryProfiler } from "../src/memory_manager.js";
-
-// Mock Element
-class MockElement {
-  constructor(id) {
-    this.id = id;
-    this.mounted = false;
-    this.children = [];
-    this.vnode = null;
-    this.domNode = null;
-    this.state = null;
-    this.depth = 0;
-    this.parent = null;
-  }
-  
-  mount() {
-    this.mounted = true;
-  }
-  
-  unmount() {
-    this.mounted = false;
-  }
-}
-
-// Mock DOM element
-class MockDOMElement {
-  constructor() {
-    this.listeners = new Map();
-  }
-  
-  addEventListener(event, handler, options) {
-    if (!this.listeners.has(event)) {
-      this.listeners.set(event, []);
-    }
-    this.listeners.get(event).push({ handler, options });
-  }
-  
-  removeEventListener(event, handler, options) {
-    if (!this.listeners.has(event)) return;
-    
-    const handlers = this.listeners.get(event);
-    const index = handlers.findIndex(h => h.handler === handler);
-    
-    if (index !== -1) {
-      handlers.splice(index, 1);
-    }
-  }
-}
-
-// Mock VNode
-function createMockVNode(id) {
-  return {
-    id: id,
-    tag: 'div',
-    props: {},
-    children: []
-  };
-}
-
-// Test Runner
-class TestRunner {
-  constructor() {
-    this.tests = [];
-    this.passed = 0;
-    this.failed = 0;
-  }
-
-  describe(name, fn) {
-    console.log(`\n📋 ${name}`);
-    fn();
-  }
-
-  it(name, fn) {
-    try {
-      fn();
-      console.log(`  ✅ ${name}`);
-      this.passed++;
-    } catch (error) {
-      console.log(`  ❌ ${name}`);
-      console.log(`     ${error.message}`);
-      this.failed++;
-    }
-  }
-
-  assert(condition, message) {
-    if (!condition) {
-      throw new Error(message || 'Assertion failed');
-    }
-  }
-
-  assertEqual(actual, expected, message) {
-    if (actual !== expected) {
-      throw new Error(
-        message || `Expected ${expected} but got ${actual}`
-      );
-    }
-  }
-
-  assertNull(value, message) {
-    if (value !== null) {
-      throw new Error(message || `Expected null but got ${value}`);
-    }
-  }
-
-  assertNotNull(value, message) {
-    if (value === null) {
-      throw new Error(message || 'Expected value to not be null');
-    }
-  }
-
-  assertTrue(value, message) {
-    if (value !== true) {
-      throw new Error(message || `Expected true but got ${value}`);
-    }
-  }
-
-  assertGreaterThan(actual, threshold, message) {
-    if (actual <= threshold) {
-      throw new Error(
-        message || `Expected ${actual} to be greater than ${threshold}`
-      );
-    }
-  }
-
-  assertGreaterThanOrEqual(actual, threshold, message) {
-    if (actual < threshold) {
-      throw new Error(
-        message || `Expected ${actual} to be >= ${threshold}`
-      );
-    }
-  }
-
-  assertThrows(fn, message) {
-    try {
-      fn();
-      throw new Error(message || 'Expected function to throw');
-    } catch (error) {
-      // Expected
-    }
-  }
-
-  summary() {
-    const total = this.passed + this.failed;
-    console.log(`\n${'='.repeat(50)}`);
-    console.log(`Tests: ${total} | ✅ Passed: ${this.passed} | ❌ Failed: ${this.failed}`);
-    console.log(`${'='.repeat(50)}\n`);
-
-    return this.failed === 0;
-  }
-}
-
-// Run tests
-function runTests() {
-  const test = new TestRunner();
-
-  test.describe('MemoryManager: Initialization', () => {
-    test.it('should create memory manager with default config', () => {
-      const mm = new MemoryManager();
-      
-      test.assertTrue(mm.config.enableLeakDetection);
-      test.assertEqual(mm.config.maxRetainedObjects, 10000);
-      test.assertEqual(mm.stats.elementsCreated, 0);
-      
-      mm.dispose();
-    });
-    
-    test.it('should create with custom config', () => {
-      const mm = new MemoryManager({
-        enableLeakDetection: false,
-        maxRetainedObjects: 5000,
-        warnThreshold: 1000,
-        debugMode: true
-      });
-      
-      test.assertTrue(!mm.config.enableLeakDetection);
-      test.assertEqual(mm.config.maxRetainedObjects, 5000);
-      test.assertEqual(mm.config.warnThreshold, 1000);
-      test.assertTrue(mm.config.debugMode);
-      
-      mm.dispose();
-    });
-    
-    test.it('should initialize statistics', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      test.assertEqual(mm.stats.elementsCreated, 0);
-      test.assertEqual(mm.stats.elementsDisposed, 0);
-      test.assertEqual(mm.stats.vnodeCreated, 0);
-      test.assertEqual(mm.stats.listenersAttached, 0);
-      mm.dispose();
-    });
-  });
-
-  test.describe('MemoryManager: Element Registration', () => {
-    test.it('should register element', () => {
-      const mm = new MemoryManager({ enableLeakDetection: true });
-      const element = new MockElement('el_1');
-      
-      mm.register(element);
-      
-      test.assertEqual(mm.stats.elementsCreated, 1);
-      test.assertTrue(mm.elementRefs.has('el_1'));
-      mm.dispose();
-    });
-    
-    test.it('should throw error if element is null', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      
-      test.assertThrows(() => {
-        mm.register(null);
-      });
-      
-      mm.dispose();
-    });
-    
-    test.it('should store element metadata', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      const element = new MockElement('el_1');
-      element.depth = 2;
-      element.children = [new MockElement('child')];
-      
-      mm.register(element);
-      
-      const metadata = mm.getElementMetadata(element);
-      
-      test.assertEqual(metadata.id, 'el_1');
-      test.assertEqual(metadata.depth, 2);
-      test.assertTrue(metadata.hasChildren);
-      test.assertNotNull(metadata.createdAt);
-      mm.dispose();
-    });
-    
-    test.it('should track multiple elements', () => {
-      const mm = new MemoryManager({ enableLeakDetection: true });
-      const elements = [];
-      
-      for (let i = 0; i < 10; i++) {
-        const el = new MockElement(`el_${i}`);
-        elements.push(el);
-        mm.register(el);
-      }
-      
-      test.assertEqual(mm.stats.elementsCreated, 10);
-      test.assertEqual(mm.elementRefs.size, 10);
-      mm.dispose();
-    });
-  });
-
-  test.describe('MemoryManager: Element Cleanup', () => {
-    test.it('should unregister element', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      const element = new MockElement('el_1');
-      mm.register(element);
-      
-      mm.unregister(element);
-      mm.performBatchCleanup();
-      
-      test.assertEqual(mm.stats.elementsDisposed, 1);
-      test.assertTrue(!mm.elementRefs.has('el_1'));
-      mm.dispose();
-    });
-    
-    test.it('should batch cleanup multiple elements', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      const elements = [];
-      
-      for (let i = 0; i < 5; i++) {
-        const el = new MockElement(`el_${i}`);
-        elements.push(el);
-        mm.register(el);
-      }
-      
-      elements.forEach(el => mm.unregister(el));
-      
-      test.assertEqual(mm.disposalQueue.size, 5);
-      
-      mm.performBatchCleanup();
-      
-      test.assertEqual(mm.stats.elementsDisposed, 5);
-      test.assertEqual(mm.disposalQueue.size, 0);
-      mm.dispose();
-    });
-    
-    test.it('should clear element references on cleanup', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      const element = new MockElement('el_1');
-      element.vnode = createMockVNode('v1');
-      element.domNode = new MockDOMElement();
-      element.children = [new MockElement('child')];
-      
-      mm.register(element);
-      mm.cleanupElement(element);
-      
-      test.assertNull(element.vnode);
-      test.assertNull(element.domNode);
-      test.assertEqual(element.children.length, 0);
-      mm.dispose();
-    });
-  });
-
-  test.describe('MemoryManager: VNode Management', () => {
-    test.it('should register VNode', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      const element = new MockElement('el_1');
-      const vnode = createMockVNode('v1');
-      
-      mm.registerVNode(vnode, element);
-      
-      test.assertEqual(mm.stats.vnodeCreated, 1);
-      test.assertEqual(mm.getElementForVNode(vnode), element);
-      mm.dispose();
-    });
-    
-    test.it('should unregister VNode', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      const element = new MockElement('el_1');
-      const vnode = createMockVNode('v1');
-      
-      mm.registerVNode(vnode, element);
-      mm.unregisterVNode(vnode);
-      
-      test.assertEqual(mm.stats.vnodeDisposed, 1);
-      test.assertNull(mm.getElementForVNode(vnode));
-      mm.dispose();
-    });
-  });
-
-  test.describe('MemoryManager: Event Listener Tracking', () => {
-    test.it('should track event listener', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      const element = new MockElement('el_1');
-      const target = new MockDOMElement();
-      const handler = () => {};
-      
-      mm.trackListener(element, target, 'click', handler);
-      
-      test.assertEqual(mm.stats.listenersAttached, 1);
-      
-      const listeners = mm.getListenersForElement(element);
-      test.assertEqual(listeners.length, 1);
-      test.assertEqual(listeners[0].event, 'click');
-      mm.dispose();
-    });
-    
-    test.it('should throw error with invalid listener params', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      const element = new MockElement('el_1');
-      
-      test.assertThrows(() => {
-        mm.trackListener(element, null, 'click', () => {});
-      });
-      
-      mm.dispose();
-    });
-    
-    test.it('should remove all listeners', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      const element = new MockElement('el_1');
-      const target = new MockDOMElement();
-      const handler1 = () => {};
-      const handler2 = () => {};
-      
-      mm.trackListener(element, target, 'click', handler1);
-      mm.trackListener(element, target, 'mouseenter', handler2);
-      
-      target.addEventListener('click', handler1);
-      target.addEventListener('mouseenter', handler2);
-      
-      test.assertEqual(target.listeners.get('click').length, 1);
-      test.assertEqual(target.listeners.get('mouseenter').length, 1);
-      
-      mm.removeAllListeners(element);
-      
-      test.assertEqual(mm.stats.listenersRemoved, 2);
-      test.assertEqual(target.listeners.get('click').length, 0);
-      test.assertEqual(target.listeners.get('mouseenter').length, 0);
-      mm.dispose();
-    });
-  });
-
-  test.describe('MemoryManager: Disposable Registry', () => {
-    test.it('should register disposable', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      let cleanupCalled = false;
-      
-      mm.registerDisposable('test_1', () => {
-        cleanupCalled = true;
-      });
-      
-      test.assertTrue(mm.disposableRegistry.has('test_1'));
-      mm.dispose();
-    });
-    
-    test.it('should call disposable on cleanup', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      const element = new MockElement('el_1');
-      let cleanupCalled = false;
-      
-      mm.register(element);
-      mm.registerDisposable('el_1', () => {
-        cleanupCalled = true;
-      });
-      
-      mm.cleanupElement(element);
-      
-      test.assertTrue(cleanupCalled);
-      test.assertTrue(!mm.disposableRegistry.has('el_1'));
-      mm.dispose();
-    });
-  });
-
-  test.describe('MemoryManager: State Tracking', () => {
-    test.it('should track state', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      const element = new MockElement('el_1');
-      const state = { count: 0 };
-      
-      mm.trackState(state, element);
-      
-      test.assertEqual(mm.stateRegistry.get(state), element);
-      mm.dispose();
-    });
-  });
-
-  test.describe('MemoryManager: Statistics', () => {
-    test.it('should provide accurate statistics', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      
-      for (let i = 0; i < 3; i++) {
-        mm.register(new MockElement(`el_${i}`));
-      }
-      
-      const element = new MockElement('el_test');
-      mm.registerVNode(createMockVNode('v1'), element);
-      mm.registerVNode(createMockVNode('v2'), element);
-      
-      const target = new MockDOMElement();
-      mm.trackListener(element, target, 'click', () => {});
-      
-      const stats = mm.getStats();
-      
-      test.assertEqual(stats.elementsCreated, 3);
-      test.assertEqual(stats.vnodeCreated, 2);
-      test.assertEqual(stats.listenersAttached, 1);
-      mm.dispose();
-    });
-    
-    test.it('should reset statistics', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      mm.register(new MockElement('el_1'));
-      mm.register(new MockElement('el_2'));
-      
-      test.assertEqual(mm.stats.elementsCreated, 2);
-      
-      mm.resetStats();
-      
-      test.assertEqual(mm.stats.elementsCreated, 0);
-      test.assertEqual(mm.stats.elementsDisposed, 0);
-      mm.dispose();
-    });
-    
-    test.it('should provide detailed report', () => {
-      const mm = new MemoryManager({ enableLeakDetection: true });
-      const element1 = new MockElement('el_1');
-      element1.depth = 1;
-      element1.children = [new MockElement('child')];
-      
-      const element2 = new MockElement('el_2');
-      element2.state = { count: 0 };
-      
-      mm.register(element1);
-      mm.register(element2);
-      
-      const report = mm.getDetailedReport();
-      
-      test.assertNotNull(report.stats);
-      test.assertEqual(report.elements.length, 2);
-      test.assertNotNull(report.config);
-      test.assertNotNull(report.timestamp);
-      mm.dispose();
-    });
-  });
-
-  test.describe('MemoryManager: Clear and Dispose', () => {
-    test.it('should clear all registries', () => {
-      const mm = new MemoryManager({ enableLeakDetection: true });
-      
-      for (let i = 0; i < 3; i++) {
-        const element = new MockElement(`el_${i}`);
-        mm.register(element);
-        mm.registerVNode(createMockVNode(`v${i}`), element);
-      }
-      
-      test.assertGreaterThan(mm.elementRefs.size, 0);
-      
-      mm.clear();
-      
-      test.assertEqual(mm.elementRefs.size, 0);
-      test.assertEqual(mm.vnodeRefs.size, 0);
-      test.assertEqual(mm.disposableRegistry.size, 0);
-    });
-    
-    test.it('should dispose completely', () => {
-      const mm = new MemoryManager({
-        enableLeakDetection: true
-      });
-      
-      mm.register(new MockElement('el_1'));
-      
-      mm.dispose();
-      
-      test.assertNull(mm.leakDetectionTimer);
-      test.assertEqual(mm.elementRefs.size, 0);
-    });
-  });
-
-  test.describe('MemoryManager: Edge Cases', () => {
-    test.it('should handle null element in unregister', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      
-      test.assertThrows(() => {
-        mm.unregister(null);
-      }, false); // Don't throw, should handle gracefully
-      
-      mm.dispose();
-    });
-    
-    test.it('should handle missing metadata gracefully', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      const element = new MockElement('el_1');
-      
-      const metadata = mm.getElementMetadata(element);
-      
-      test.assertNull(metadata);
-      mm.dispose();
-    });
-  });
-
-  test.describe('MemoryProfiler', () => {
-    test.it('should take snapshot', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      const profiler = new MemoryProfiler(mm);
-      
-      mm.register(new MockElement('el_1'));
-      
-      const snapshot = profiler.takeSnapshot();
-      
-      test.assertNotNull(snapshot.timestamp);
-      test.assertNotNull(snapshot.stats);
-      test.assertEqual(snapshot.stats.elementsCreated, 1);
-      mm.dispose();
-    });
-    
-    test.it('should limit snapshots', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      const profiler = new MemoryProfiler(mm);
-      
-      for (let i = 0; i < 60; i++) {
-        profiler.takeSnapshot();
-      }
-      
-      test.assertEqual(profiler.snapshots.length, 50);
-      mm.dispose();
-    });
-    
-    test.it('should compare snapshots', () => {
-      const mm = new MemoryManager({ enableLeakDetection: true });
-      const profiler = new MemoryProfiler(mm);
-      
-      const snapshot1 = profiler.takeSnapshot();
-      
-      mm.register(new MockElement('el_1'));
-      mm.register(new MockElement('el_2'));
-      
-      const snapshot2 = profiler.takeSnapshot();
-      
-      const diff = profiler.compareSnapshots(snapshot1, snapshot2);
-      
-      test.assertEqual(diff.elementsCreated, 2);
-      test.assertEqual(diff.currentElements, 2);
-      mm.dispose();
-    });
-    
-    test.it('should get growth trend', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      const profiler = new MemoryProfiler(mm);
-      
-      profiler.takeSnapshot();
-      
-      mm.register(new MockElement('el_1'));
-      
-      profiler.takeSnapshot();
-      
-      const trend = profiler.getTrend();
-      
-      test.assertEqual(trend.elementsCreated, 1);
-      mm.dispose();
-    });
-    
-    test.it('should clear snapshots', () => {
-      const mm = new MemoryManager({ enableLeakDetection: false });
-      const profiler = new MemoryProfiler(mm);
-      
-      profiler.takeSnapshot();
-      profiler.takeSnapshot();
-      
-      test.assertEqual(profiler.snapshots.length, 2);
-      
-      profiler.clear();
-      
-      test.assertEqual(profiler.snapshots.length, 0);
-      mm.dispose();
-    });
-  });
-
-  return test.summary();
-}
-
-// Run
-runTests();
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/test/runtime_engine.test.js b/packages/flutterjs_engine/src/runtime/test/runtime_engine.test.js
deleted file mode 100644
index 69182276..00000000
--- a/packages/flutterjs_engine/src/runtime/test/runtime_engine.test.js
+++ /dev/null
@@ -1,965 +0,0 @@
-/**
- * RuntimeEngine Test Suite
- * 
- * Comprehensive tests for the FlutterJS Runtime Engine
- */
-
-// Mock HTMLElement for Node.js
-class MockHTMLElement {
-  constructor(tag = 'div') {
-    this.tag = tag;
-    this.className = '';
-    this.style = {};
-    this.textContent = '';
-    this.children = [];
-    this.attributes = {};
-  }
-
-  setAttribute(key, value) {
-    this.attributes[key] = value;
-  }
-
-  appendChild(child) {
-    this.children.push(child);
-  }
-
-  get firstChild() {
-    return this.children[0] || null;
-  }
-
-  createTextNode(text) {
-    return { nodeValue: text, isTextNode: true };
-  }
-}
-
-// Mock document for Node.js environment
-if (typeof document === 'undefined') {
-  global.document = {
-    createElement: (tag) => new MockHTMLElement(tag),
-    createTextNode: (text) => ({ nodeValue: text, isTextNode: true })
-  };
-
-  global.HTMLElement = MockHTMLElement;
-
-  global.performance = {
-    now: () => Date.now()
-  };
-
-  global.requestAnimationFrame = (cb) => {
-    setTimeout(cb, 0);
-    return Date.now();
-  };
-}
-
-// Test utilities
-class TestWidget {
-  constructor(key) {
-    this.key = key;
-  }
-}
-
-class StatelessWidget extends TestWidget {
-  build(context) {
-    return { tag: 'div', children: ['Stateless'] };
-  }
-}
-
-class StatefulWidget extends TestWidget {
-  createState() {
-    return new State();
-  }
-}
-
-class State {
-  constructor() {
-    this._element = null;
-    this._widget = null;
-    this._mounted = false;
-  }
-
-  initState() {
-    this._mounted = true;
-  }
-
-  build(context) {
-    return { tag: 'div', children: ['Stateful'] };
-  }
-
-  dispose() {
-    this._mounted = false;
-  }
-}
-
-class InheritedWidget extends TestWidget {
-  constructor(key, child) {
-    super(key);
-    this.child = child;
-  }
-
-  updateShouldNotify(oldWidget) {
-    return true;
-  }
-}
-
-// Mock RuntimeEngine (minimal implementation)
-class RuntimeEngine {
-  constructor() {
-    this.rootElement = null;
-    this.rootWidget = null;
-    this.elementTree = null;
-    this.dirtyElements = new Set();
-    this.updateScheduled = false;
-    this.isUpdating = false;
-    this.buildContext = null;
-    this.serviceRegistry = new Map();
-    this.frameCounter = 0;
-    this.buildTime = 0;
-    this.renderTime = 0;
-    this.lastUpdateTime = 0;
-    this.mounted = false;
-    this.disposed = false;
-    this.config = {
-      batchUpdates: true,
-      debugMode: false,
-      performanceMonitoring: true
-    };
-  }
-
-  mount(rootWidget, containerElement) {
-    if (this.mounted) {
-      throw new Error('Runtime already mounted. Call unmount() first.');
-    }
-    
-    if (!rootWidget) {
-      throw new Error('Root widget is required');
-    }
-    
-    if (!containerElement || !(containerElement instanceof MockHTMLElement)) {
-      throw new Error('Valid container element is required');
-    }
-    
-    try {
-      this.rootWidget = rootWidget;
-      this.rootElement = containerElement;
-      
-      this.elementTree = this.createElement(rootWidget, null);
-      
-      if (!this.elementTree) {
-        throw new Error('Failed to create root element');
-      }
-      
-      const startBuild = performance.now();
-      const vnode = this.elementTree.build();
-      this.buildTime = performance.now() - startBuild;
-      
-      if (!vnode) {
-        throw new Error('Root element build() returned null');
-      }
-      
-      const startRender = performance.now();
-      this.renderVNode(vnode, containerElement);
-      this.renderTime = performance.now() - startRender;
-      
-      this.elementTree.domNode = containerElement.firstChild;
-      this.elementTree.mount();
-      
-      this.mounted = true;
-      
-      return this;
-    } catch (error) {
-      this.cleanup();
-      throw new Error(`Failed to mount application: ${error.message}`);
-    }
-  }
-
-  createElement(widget, parent) {
-    if (!widget) {
-      throw new Error('Widget is required');
-    }
-    
-    if (typeof widget.createElement === 'function') {
-      return widget.createElement(parent, this);
-    }
-    
-    const widgetType = widget.constructor.name;
-    
-    if (this.isStatelessWidget(widget)) {
-      return new MockStatelessElement(widget, parent, this);
-    }
-    
-    if (this.isStatefulWidget(widget)) {
-      return new MockStatefulElement(widget, parent, this);
-    }
-    
-    if (this.isInheritedWidget(widget)) {
-      return new MockInheritedElement(widget, parent, this);
-    }
-    
-    throw new Error(`Unknown widget type: ${widgetType}`);
-  }
-
-  isStatelessWidget(widget) {
-    return widget.constructor.name === 'StatelessWidget' || 
-           (typeof widget.build === 'function' && !widget.createState && !widget.child);
-  }
-  
-  isStatefulWidget(widget) {
-    return widget.constructor.name === 'StatefulWidget' ||
-           (typeof widget.createState === 'function');
-  }
-  
-  isInheritedWidget(widget) {
-    return widget.constructor.name === 'InheritedWidget' ||
-           (widget.child !== undefined && typeof widget.updateShouldNotify === 'function');
-  }
-
-  renderVNode(vnode, container) {
-    if (!vnode) return;
-    
-    if (typeof vnode === 'string') {
-      container.textContent = vnode;
-      return;
-    }
-    
-    const element = document.createElement(vnode.tag || 'div');
-    
-    if (vnode.props) {
-      Object.entries(vnode.props).forEach(([key, value]) => {
-        if (key === 'className') {
-          element.className = value;
-        } else if (key === 'style' && typeof value === 'object') {
-          Object.assign(element.style, value);
-        } else {
-          element.setAttribute(key, value);
-        }
-      });
-    }
-    
-    if (vnode.style) {
-      Object.assign(element.style, vnode.style);
-    }
-    
-    if (vnode.children) {
-      vnode.children.forEach(child => {
-        if (typeof child === 'string') {
-          element.appendChild(document.createTextNode(child));
-        } else if (child) {
-          const childContainer = document.createElement('div');
-          this.renderVNode(child, childContainer);
-          if (childContainer.firstChild) {
-            element.appendChild(childContainer.firstChild);
-          }
-        }
-      });
-    }
-    
-    container.appendChild(element);
-  }
-
-  markNeedsBuild(element) {
-    if (!element) {
-      console.warn('[RuntimeEngine] markNeedsBuild called with null element');
-      return;
-    }
-    
-    if (!this.mounted) {
-      return;
-    }
-    
-    this.dirtyElements.add(element);
-    this.scheduleUpdate();
-  }
-
-  scheduleUpdate() {
-    if (this.updateScheduled) return;
-    if (this.disposed) return;
-    
-    this.updateScheduled = true;
-    
-    requestAnimationFrame(() => {
-      this.performUpdate();
-    });
-  }
-
-  performUpdate() {
-    if (this.disposed) return;
-    if (this.isUpdating) {
-      this.updateScheduled = true;
-      return;
-    }
-    
-    this.updateScheduled = false;
-    this.isUpdating = true;
-    
-    try {
-      const startTime = performance.now();
-      const elements = Array.from(this.dirtyElements);
-      
-      if (elements.length === 0) {
-        this.isUpdating = false;
-        return;
-      }
-      
-      elements.sort((a, b) => a.depth - b.depth);
-      
-      for (const element of elements) {
-        if (element.mounted && this.dirtyElements.has(element)) {
-          try {
-            element.rebuild();
-          } catch (error) {
-            console.error(`[RuntimeEngine] Error rebuilding element:`, error);
-          }
-        }
-      }
-      
-      this.dirtyElements.clear();
-      this.buildTime = performance.now() - startTime;
-      this.lastUpdateTime = Date.now();
-      this.frameCounter++;
-    } finally {
-      this.isUpdating = false;
-      
-      if (this.updateScheduled && this.dirtyElements.size > 0) {
-        this.scheduleUpdate();
-      }
-    }
-  }
-
-  unmount() {
-    if (!this.mounted) {
-      console.warn('[RuntimeEngine] unmount called but not mounted');
-      return;
-    }
-    
-    try {
-      if (this.elementTree) {
-        this.elementTree.unmount();
-        this.elementTree = null;
-      }
-      
-      this.cleanup();
-    } catch (error) {
-      console.error('[RuntimeEngine] Error during unmount:', error);
-    }
-  }
-
-  cleanup() {
-    this.dirtyElements.clear();
-    this.serviceRegistry.clear();
-    this.mounted = false;
-    this.updateScheduled = false;
-    this.isUpdating = false;
-  }
-
-  dispose() {
-    if (this.disposed) return;
-    
-    this.unmount();
-    
-    this.rootElement = null;
-    this.rootWidget = null;
-    this.buildContext = null;
-    
-    this.disposed = true;
-  }
-
-  getStats() {
-    return {
-      mounted: this.mounted,
-      frameCount: this.frameCounter,
-      buildTime: this.buildTime,
-      renderTime: this.renderTime,
-      lastUpdateTime: this.lastUpdateTime,
-      dirtyElements: this.dirtyElements.size,
-      updateScheduled: this.updateScheduled
-    };
-  }
-
-  registerService(name, service) {
-    this.serviceRegistry.set(name, service);
-  }
-
-  getService(name) {
-    return this.serviceRegistry.get(name);
-  }
-
-  setDebugMode(enabled) {
-    this.config.debugMode = enabled;
-  }
-}
-
-// Mock Element classes
-class MockElement {
-  constructor(widget, parent, runtime) {
-    this.widget = widget;
-    this.parent = parent;
-    this.runtime = runtime;
-    this.id = `el_${Math.random().toString(36).substr(2, 9)}`;
-    this.mounted = false;
-    this.dirty = false;
-    this.depth = parent ? parent.depth + 1 : 0;
-    this.domNode = null;
-  }
-
-  mount() {
-    this.mounted = true;
-  }
-
-  unmount() {
-    this.mounted = false;
-  }
-
-  build() {
-    return { tag: 'div', children: [] };
-  }
-
-  rebuild() {
-    this.dirty = false;
-  }
-
-  markNeedsBuild() {
-    this.dirty = true;
-  }
-}
-
-class MockStatelessElement extends MockElement {
-  build() {
-    return this.widget.build ? this.widget.build() : { tag: 'div', children: [] };
-  }
-}
-
-class MockStatefulElement extends MockElement {
-  constructor(widget, parent, runtime) {
-    super(widget, parent, runtime);
-    this.state = null;
-    // Initialize state immediately on creation
-    if (this.widget.createState) {
-      this.state = this.widget.createState();
-      this.state._element = this;
-    }
-  }
-
-  mount() {
-    if (this.state && this.state.initState) {
-      this.state.initState();
-    }
-    super.mount();
-  }
-
-  build() {
-    return this.state && this.state.build ? this.state.build() : { tag: 'div', children: [] };
-  }
-
-  unmount() {
-    if (this.state && this.state.dispose) {
-      this.state.dispose();
-    }
-    super.unmount();
-  }
-}
-
-class MockInheritedElement extends MockElement {
-  build() {
-    return { tag: 'div', children: [] };
-  }
-}
-
-// Simple test framework
-class TestSuite {
-  constructor(name) {
-    this.name = name;
-    this.passed = 0;
-    this.failed = 0;
-  }
-
-  test(testName, fn) {
-    try {
-      fn.call(this);
-      this.passed++;
-      console.log(`  ✓ ${testName}`);
-    } catch (error) {
-      this.failed++;
-      console.error(`  ✗ ${testName}`);
-      console.error(`    ${error.message}`);
-    }
-  }
-
-  assertEqual(actual, expected, message = '') {
-    if (actual !== expected) {
-      throw new Error(`${message}\nExpected: ${expected}\nActual: ${actual}`);
-    }
-  }
-
-  assertNotEqual(actual, expected, message = '') {
-    if (actual === expected) {
-      throw new Error(`${message}\nExpected NOT equal: ${expected}\nActual: ${actual}`);
-    }
-  }
-
-  assertTrue(value, message = 'Expected true') {
-    if (value !== true) throw new Error(message);
-  }
-
-  assertFalse(value, message = 'Expected false') {
-    if (value !== false) throw new Error(message);
-  }
-
-  assertNull(value, message = 'Expected null') {
-    if (value !== null) throw new Error(message);
-  }
-
-  assertNotNull(value, message = 'Expected non-null') {
-    if (value === null || value === undefined) throw new Error(message);
-  }
-
-  assertThrows(fn, shouldThrow = true) {
-    let thrown = false;
-    try {
-      fn();
-    } catch (e) {
-      thrown = true;
-    }
-    if (shouldThrow && !thrown) throw new Error('Expected throw');
-    if (!shouldThrow && thrown) throw new Error('Expected no throw');
-  }
-
-  assertGreaterThan(actual, expected, message = '') {
-    if (actual <= expected) {
-      throw new Error(`${message}\nExpected > ${expected}\nActual: ${actual}`);
-    }
-  }
-
-  assertGreaterThanOrEqual(actual, expected, message = '') {
-    if (actual < expected) {
-      throw new Error(`${message}\nExpected >= ${expected}\nActual: ${actual}`);
-    }
-  }
-
-  report() {
-    console.log(`\n${this.name}`);
-    console.log(`${this.passed + this.failed} tests: ${this.passed} passed, ${this.failed} failed`);
-    return this.failed === 0;
-  }
-}
-
-// ============================================================================
-// TEST SUITES
-// ============================================================================
-
-const suites = [];
-
-// Test Suite 1: RuntimeEngine Initialization
-const suite1 = new TestSuite('RuntimeEngine Initialization');
-suites.push(suite1);
-
-suite1.test('should create runtime with default state', function () {
-  const runtime = new RuntimeEngine();
-  this.assertFalse(runtime.mounted);
-  this.assertFalse(runtime.disposed);
-  this.assertEqual(runtime.dirtyElements.size, 0);
-  this.assertEqual(runtime.frameCounter, 0);
-});
-
-suite1.test('should have configuration options', function () {
-  const runtime = new RuntimeEngine();
-  this.assertNotNull(runtime.config);
-  this.assertTrue(runtime.config.batchUpdates);
-  this.assertFalse(runtime.config.debugMode);
-});
-
-suite1.test('should allow debug mode configuration', function () {
-  const runtime = new RuntimeEngine();
-  runtime.setDebugMode(true);
-  this.assertTrue(runtime.config.debugMode);
-});
-
-// Test Suite 2: Mount
-const suite2 = new TestSuite('RuntimeEngine Mount');
-suites.push(suite2);
-
-suite2.test('should mount simple stateless widget', function () {
-  const runtime = new RuntimeEngine();
-  const widget = new StatelessWidget();
-  const container = document.createElement('div');
-
-  runtime.mount(widget, container);
-
-  this.assertTrue(runtime.mounted);
-  this.assertEqual(runtime.rootWidget, widget);
-  this.assertEqual(runtime.rootElement, container);
-  this.assertNotNull(runtime.elementTree);
-});
-
-suite2.test('should mount stateful widget', function () {
-  const runtime = new RuntimeEngine();
-  const widget = new StatefulWidget();
-  const container = document.createElement('div');
-
-  runtime.mount(widget, container);
-
-  this.assertTrue(runtime.mounted);
-  this.assertTrue(runtime.elementTree instanceof MockStatefulElement);
-});
-
-suite2.test('should throw error if already mounted', function () {
-  const runtime = new RuntimeEngine();
-  const widget = new StatelessWidget();
-  const container = document.createElement('div');
-
-  runtime.mount(widget, container);
-
-  this.assertThrows(() => {
-    runtime.mount(widget, container);
-  }, true);
-});
-
-suite2.test('should throw error if widget is null', function () {
-  const runtime = new RuntimeEngine();
-  const container = document.createElement('div');
-
-  this.assertThrows(() => {
-    runtime.mount(null, container);
-  }, true);
-});
-
-suite2.test('should throw error if container is invalid', function () {
-  const runtime = new RuntimeEngine();
-  const widget = new StatelessWidget();
-
-  this.assertThrows(() => {
-    runtime.mount(widget, null);
-  }, true);
-});
-
-suite2.test('should track build and render time', function () {
-  const runtime = new RuntimeEngine();
-  const widget = new StatelessWidget();
-  const container = document.createElement('div');
-
-  runtime.mount(widget, container);
-
-  this.assertGreaterThanOrEqual(runtime.buildTime, 0);
-  this.assertGreaterThanOrEqual(runtime.renderTime, 0);
-});
-
-// Test Suite 3: Element Creation
-const suite3 = new TestSuite('RuntimeEngine Element Creation');
-suites.push(suite3);
-
-suite3.test('should create StatelessElement for StatelessWidget', function () {
-  const runtime = new RuntimeEngine();
-  const widget = new StatelessWidget();
-  const element = runtime.createElement(widget, null);
-
-  this.assertTrue(element instanceof MockStatelessElement);
-  this.assertEqual(element.widget, widget);
-  this.assertNull(element.parent);
-  this.assertEqual(element.runtime, runtime);
-});
-
-suite3.test('should create StatefulElement for StatefulWidget', function () {
-  const runtime = new RuntimeEngine();
-  const widget = new StatefulWidget();
-  const element = runtime.createElement(widget, null);
-
-  this.assertTrue(element instanceof MockStatefulElement);
-  this.assertNotNull(element.state);
-});
-
-suite3.test('should create InheritedElement for InheritedWidget', function () {
-  const runtime = new RuntimeEngine();
-  const widget = new InheritedWidget();
-  const element = runtime.createElement(widget, null);
-
-  this.assertTrue(element instanceof MockInheritedElement);
-});
-
-suite3.test('should throw error for unknown widget type', function () {
-  const runtime = new RuntimeEngine();
-  const widget = { unknown: true };
-
-  this.assertThrows(() => {
-    runtime.createElement(widget, null);
-  }, true);
-});
-
-suite3.test('should set parent reference', function () {
-  const runtime = new RuntimeEngine();
-  const parentWidget = new StatelessWidget();
-  const parent = runtime.createElement(parentWidget, null);
-
-  const childWidget = new StatelessWidget();
-  const child = runtime.createElement(childWidget, parent);
-
-  this.assertEqual(child.parent, parent);
-});
-
-// Test Suite 4: Update Scheduling
-const suite4 = new TestSuite('RuntimeEngine Update Scheduling');
-suites.push(suite4);
-
-suite4.test('should mark element dirty', function () {
-  const runtime = new RuntimeEngine();
-  const widget = new StatelessWidget();
-  const container = document.createElement('div');
-
-  runtime.mount(widget, container);
-  const element = runtime.elementTree;
-
-  this.assertFalse(runtime.updateScheduled);
-
-  runtime.markNeedsBuild(element);
-
-  this.assertTrue(runtime.dirtyElements.has(element));
-});
-
-suite4.test('should not schedule duplicate updates', function () {
-  const runtime = new RuntimeEngine();
-  const widget = new StatelessWidget();
-  const container = document.createElement('div');
-
-  runtime.mount(widget, container);
-  const element = runtime.elementTree;
-
-  runtime.markNeedsBuild(element);
-  const firstScheduled = runtime.updateScheduled;
-
-  runtime.markNeedsBuild(element);
-
-  this.assertEqual(runtime.updateScheduled, firstScheduled);
-});
-
-suite4.test('should not schedule updates when not mounted', function () {
-  const runtime = new RuntimeEngine();
-  const element = new MockElement({}, null, runtime);
-
-  runtime.markNeedsBuild(element);
-
-  this.assertFalse(runtime.updateScheduled);
-});
-
-// Test Suite 5: Services
-const suite5 = new TestSuite('RuntimeEngine Services');
-suites.push(suite5);
-
-suite5.test('should register service', function () {
-  const runtime = new RuntimeEngine();
-  const service = { name: 'TestService', value: 42 };
-
-  runtime.registerService('test', service);
-
-  this.assertEqual(runtime.getService('test'), service);
-});
-
-suite5.test('should retrieve registered service', function () {
-  const runtime = new RuntimeEngine();
-
-  runtime.registerService('theme', { color: 'blue' });
-
-  const theme = runtime.getService('theme');
-
-  this.assertEqual(theme.color, 'blue');
-});
-
-suite5.test('should return undefined for unknown service', function () {
-  const runtime = new RuntimeEngine();
-
-  const service = runtime.getService('unknown');
-
-  this.assertEqual(service, undefined);
-});
-
-// Test Suite 6: Statistics
-const suite6 = new TestSuite('RuntimeEngine Statistics');
-suites.push(suite6);
-
-suite6.test('should provide performance stats', function () {
-  const runtime = new RuntimeEngine();
-  const widget = new StatelessWidget();
-  const container = document.createElement('div');
-
-  runtime.mount(widget, container);
-
-  const stats = runtime.getStats();
-
-  this.assertTrue(stats.mounted);
-  this.assertNotNull(stats.frameCount);
-  this.assertNotNull(stats.buildTime);
-  this.assertNotNull(stats.renderTime);
-});
-
-suite6.test('should track dirty elements count', function () {
-  const runtime = new RuntimeEngine();
-  const widget = new StatelessWidget();
-  const container = document.createElement('div');
-
-  runtime.mount(widget, container);
-
-  runtime.markNeedsBuild(runtime.elementTree);
-
-  const stats = runtime.getStats();
-
-  this.assertEqual(stats.dirtyElements, 1);
-});
-
-// Test Suite 7: Unmount
-const suite7 = new TestSuite('RuntimeEngine Unmount');
-suites.push(suite7);
-
-suite7.test('should unmount application', function () {
-  const runtime = new RuntimeEngine();
-  const widget = new StatelessWidget();
-  const container = document.createElement('div');
-
-  runtime.mount(widget, container);
-
-  runtime.unmount();
-
-  this.assertFalse(runtime.mounted);
-  this.assertNull(runtime.elementTree);
-  this.assertEqual(runtime.dirtyElements.size, 0);
-});
-
-suite7.test('should handle unmount when not mounted', function () {
-  const runtime = new RuntimeEngine();
-
-  this.assertThrows(() => {
-    runtime.unmount();
-  }, false);
-});
-
-suite7.test('should clean up services', function () {
-  const runtime = new RuntimeEngine();
-  const widget = new StatelessWidget();
-  const container = document.createElement('div');
-
-  runtime.mount(widget, container);
-
-  runtime.registerService('test', { value: 123 });
-  this.assertGreaterThan(runtime.serviceRegistry.size, 0);
-
-  runtime.unmount();
-
-  this.assertEqual(runtime.serviceRegistry.size, 0);
-});
-
-// Test Suite 8: Lifecycle
-const suite8 = new TestSuite('RuntimeEngine Lifecycle');
-suites.push(suite8);
-
-suite8.test('should call initState on StatefulWidget mount', function () {
-  const runtime = new RuntimeEngine();
-  const widget = new StatefulWidget();
-  const container = document.createElement('div');
-
-  runtime.mount(widget, container);
-
-  const state = runtime.elementTree.state;
-  this.assertTrue(state._mounted);
-});
-
-suite8.test('should call dispose on unmount', function () {
-  const runtime = new RuntimeEngine();
-  const widget = new StatefulWidget();
-  const container = document.createElement('div');
-
-  runtime.mount(widget, container);
-
-  const state = runtime.elementTree.state;
-  this.assertTrue(state._mounted);
-
-  runtime.unmount();
-
-  this.assertFalse(state._mounted);
-});
-
-// Test Suite 9: Dispose
-const suite9 = new TestSuite('RuntimeEngine Dispose');
-suites.push(suite9);
-
-suite9.test('should dispose runtime', function () {
-  const runtime = new RuntimeEngine();
-  const widget = new StatelessWidget();
-  const container = document.createElement('div');
-
-  runtime.mount(widget, container);
-
-  runtime.dispose();
-
-  this.assertTrue(runtime.disposed);
-  this.assertFalse(runtime.mounted);
-  this.assertNull(runtime.rootWidget);
-  this.assertNull(runtime.rootElement);
-});
-
-suite9.test('should not allow operations after dispose', function () {
-  const runtime = new RuntimeEngine();
-
-  runtime.dispose();
-
-  const element = new MockElement({}, null, runtime);
-
-  runtime.markNeedsBuild(element);
-
-  this.assertFalse(runtime.updateScheduled);
-});
-
-// Test Suite 10: Widget Type Detection
-const suite10 = new TestSuite('RuntimeEngine Widget Type Detection');
-suites.push(suite10);
-
-suite10.test('should detect StatelessWidget', function () {
-  const runtime = new RuntimeEngine();
-  const widget = new StatelessWidget();
-
-  this.assertTrue(runtime.isStatelessWidget(widget));
-  this.assertFalse(runtime.isStatefulWidget(widget));
-  this.assertFalse(runtime.isInheritedWidget(widget));
-});
-
-suite10.test('should detect StatefulWidget', function () {
-  const runtime = new RuntimeEngine();
-  const widget = new StatefulWidget();
-
-  this.assertFalse(runtime.isStatelessWidget(widget));
-  this.assertTrue(runtime.isStatefulWidget(widget));
-  this.assertFalse(runtime.isInheritedWidget(widget));
-});
-
-suite10.test('should detect InheritedWidget', function () {
-  const runtime = new RuntimeEngine();
-  const widget = new InheritedWidget();
-
-  this.assertFalse(runtime.isStatelessWidget(widget));
-  this.assertFalse(runtime.isStatefulWidget(widget));
-  this.assertTrue(runtime.isInheritedWidget(widget));
-});
-
-// Print summary
-console.log('\n' + '='.repeat(60));
-console.log('RUNTIME ENGINE TEST SUITE');
-console.log('='.repeat(60));
-
-let totalPassed = 0;
-let totalFailed = 0;
-
-suites.forEach(suite => {
-  suite.report();
-  totalPassed += suite.passed;
-  totalFailed += suite.failed;
-});
-
-console.log('\n' + '='.repeat(60));
-console.log(`TOTAL: ${totalPassed + totalFailed} tests`);
-console.log(`PASSED: ${totalPassed}`);
-console.log(`FAILED: ${totalFailed}`);
-console.log(`SUCCESS RATE: ${((totalPassed / (totalPassed + totalFailed)) * 100).toFixed(1)}%`);
-console.log('='.repeat(60));
-
-if (totalFailed === 0) {
-  console.log('✓ All tests passed!');
-  process.exit(0);
-} else {
-  console.log(`✗ ${totalFailed} test(s) failed`);
-  process.exit(1);
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/test/runtime_integration.test.js b/packages/flutterjs_engine/src/runtime/test/runtime_integration.test.js
deleted file mode 100644
index 9303678d..00000000
--- a/packages/flutterjs_engine/src/runtime/test/runtime_integration.test.js
+++ /dev/null
@@ -1,539 +0,0 @@
-/**
- * RuntimeEngine Integration Tests
- * 
- * Real-world scenarios testing the complete runtime system
- */
-
-
-import { RuntimeEngine} from '../src/runtime_engine.js';
-import {
-  Element,
-  StatelessElement,
-  StatefulElement,
-  InheritedElement,
-  ComponentElement
-} from "../src/element.js";
-
-// Mock DOM
-if (typeof document === 'undefined') {
-  global.document = {
-    createElement: (tag) => ({
-      tag,
-      className: '',
-      style: {},
-      children: [],
-      setAttribute: function(key, value) { this[key] = value; },
-      appendChild: function(child) { this.children.push(child); },
-      get firstChild() { return this.children[0]; },
-      textContent: ''
-    }),
-    createTextNode: (text) => ({ nodeValue: text })
-  };
-  
-  global.HTMLElement = class {};
-  global.performance = { now: () => Date.now() };
-  global.requestAnimationFrame = (cb) => setTimeout(cb, 0);
-}
-
-// Real-world Widget Examples
-class Text {
-  constructor(text, { key, style } = {}) {
-    this.text = text;
-    this.key = key;
-    this.style = style;
-  }
-  
-  build(context) {
-    return {
-      tag: 'span',
-      props: { className: 'fjs-text' },
-      style: this.style,
-      children: [this.text]
-    };
-  }
-}
-
-class Container {
-  constructor({ child, padding, backgroundColor, key }) {
-    this.child = child;
-    this.padding = padding;
-    this.backgroundColor = backgroundColor;
-    this.key = key;
-  }
-  
-  build(context) {
-    return {
-      tag: 'div',
-      props: { className: 'fjs-container' },
-      style: {
-        padding: this.padding,
-        backgroundColor: this.backgroundColor
-      },
-      children: this.child ? [this.child.build(context)] : []
-    };
-  }
-}
-
-class Column {
-  constructor({ children, key }) {
-    this.children = children || [];
-    this.key = key;
-  }
-  
-  build(context) {
-    return {
-      tag: 'div',
-      props: { className: 'fjs-column' },
-      style: {
-        display: 'flex',
-        flexDirection: 'column'
-      },
-      children: this.children.map(child => child.build(context))
-    };
-  }
-}
-
-// StatelessWidget Example
-class MyApp {
-  constructor() {
-    this.key = 'app';
-  }
-  
-  build(context) {
-    return new Container({
-      padding: '16px',
-      backgroundColor: '#ffffff',
-      child: new Column({
-        children: [
-          new Text('Hello World', { style: { fontSize: '24px' } }),
-          new Text('FlutterJS Runtime', { style: { fontSize: '16px' } })
-        ]
-      })
-    }).build(context);
-  }
-}
-
-MyApp.prototype.constructor.name = 'StatelessWidget';
-
-// StatefulWidget Example
-class Counter {
-  constructor() {
-    this.key = 'counter';
-  }
-  
-  createState() {
-    return new CounterState();
-  }
-}
-
-Counter.prototype.constructor.name = 'StatefulWidget';
-
-class CounterState {
-  constructor() {
-    this._element = null;
-    this._widget = null;
-    this.count = 0;
-  }
-  
-  initState() {
-    console.log('Counter initialized');
-  }
-  
-  increment() {
-    this.setState(() => {
-      this.count++;
-    });
-  }
-  
-  setState(updateFn) {
-    if (updateFn) {
-      updateFn();
-    }
-    if (this._element) {
-      this._element.markNeedsBuild();
-    }
-  }
-  
-  build(context) {
-    return new Column({
-      children: [
-        new Text(`Count: ${this.count}`, { style: { fontSize: '48px' } }),
-        new Text('Click to increment', { style: { fontSize: '14px' } })
-      ]
-    }).build(context);
-  }
-  
-  dispose() {
-    console.log('Counter disposed');
-  }
-}
-
-// Integration Tests
-describe('RuntimeEngine Integration', () => {
-  let runtime;
-  let container;
-  
-  beforeEach(() => {
-    runtime = new RuntimeEngine();
-    container = document.createElement('div');
-  });
-  
-  afterEach(() => {
-    if (runtime.mounted) {
-      runtime.unmount();
-    }
-    runtime.dispose();
-  });
-  
-  describe('Simple App Scenario', () => {
-    test('should mount and render simple app', () => {
-      const app = new MyApp();
-      
-      runtime.mount(app, container);
-      
-      expect(runtime.mounted).toBe(true);
-      expect(runtime.elementTree).toBeDefined();
-      expect(runtime.getStats().buildTime).toBeGreaterThan(0);
-    });
-    
-    test('should build widget hierarchy correctly', () => {
-      const app = new MyApp();
-      
-      runtime.mount(app, container);
-      
-      const element = runtime.elementTree;
-      expect(element.mounted).toBe(true);
-      expect(element.vnode).toBeDefined();
-      expect(element.vnode.tag).toBe('div');
-    });
-    
-    test('should handle multiple widgets', () => {
-      const app = new MyApp();
-      
-      const startTime = performance.now();
-      runtime.mount(app, container);
-      const mountTime = performance.now() - startTime;
-      
-      expect(mountTime).toBeLessThan(100); // Should be fast
-      expect(runtime.getStats().frameCount).toBeGreaterThanOrEqual(0);
-    });
-  });
-  
-  describe('Stateful Widget Scenario', () => {
-    test('should mount counter widget', () => {
-      const counter = new Counter();
-      
-      runtime.mount(counter, container);
-      
-      expect(runtime.mounted).toBe(true);
-      expect(runtime.elementTree).toBeInstanceOf(StatefulElement);
-      expect(runtime.elementTree.state).toBeDefined();
-    });
-    
-    test('should initialize state correctly', () => {
-      const counter = new Counter();
-      
-      runtime.mount(counter, container);
-      
-      const state = runtime.elementTree.state;
-      expect(state.count).toBe(0);
-      expect(state._element).toBe(runtime.elementTree);
-      expect(state._widget).toBe(counter);
-    });
-    
-    test('should handle state updates', (done) => {
-      const counter = new Counter();
-      runtime.mount(counter, container);
-      
-      const state = runtime.elementTree.state;
-      const initialBuildTime = runtime.getStats().buildTime;
-      
-      // Trigger state update
-      state.increment();
-      
-      expect(state.count).toBe(1);
-      expect(runtime.dirtyElements.size).toBeGreaterThan(0);
-      
-      setTimeout(() => {
-        expect(runtime.dirtyElements.size).toBe(0);
-        expect(runtime.getStats().frameCount).toBeGreaterThan(0);
-        done();
-      }, 20);
-    });
-    
-    test('should handle multiple state updates', (done) => {
-      const counter = new Counter();
-      runtime.mount(counter, container);
-      
-      const state = runtime.elementTree.state;
-      
-      // Multiple rapid updates
-      state.increment();
-      state.increment();
-      state.increment();
-      
-      expect(state.count).toBe(3);
-      
-      setTimeout(() => {
-        // Should batch updates
-        expect(runtime.dirtyElements.size).toBe(0);
-        expect(runtime.getStats().frameCount).toBe(1); // Single batch
-        done();
-      }, 20);
-    });
-    
-    test('should call dispose on unmount', () => {
-      const counter = new Counter();
-      runtime.mount(counter, container);
-      
-      const state = runtime.elementTree.state;
-      let disposeCalled = false;
-      
-      const originalDispose = state.dispose;
-      state.dispose = function() {
-        disposeCalled = true;
-        originalDispose.call(this);
-      };
-      
-      runtime.unmount();
-      
-      expect(disposeCalled).toBe(true);
-    });
-  });
-  
-  describe('Performance Testing', () => {
-    test('should mount within performance budget', () => {
-      const app = new MyApp();
-      
-      const start = performance.now();
-      runtime.mount(app, container);
-      const duration = performance.now() - start;
-      
-      expect(duration).toBeLessThan(100); // < 100ms
-    });
-    
-    test('should handle rapid updates efficiently', (done) => {
-      const counter = new Counter();
-      runtime.mount(counter, container);
-      
-      const state = runtime.elementTree.state;
-      
-      // Simulate 100 rapid updates
-      for (let i = 0; i < 100; i++) {
-        state.increment();
-      }
-      
-      expect(state.count).toBe(100);
-      
-      setTimeout(() => {
-        const stats = runtime.getStats();
-        
-        // Should batch efficiently (not 100 separate rebuilds)
-        expect(stats.frameCount).toBeLessThan(10);
-        expect(stats.buildTime).toBeLessThan(100);
-        
-        done();
-      }, 50);
-    });
-    
-    test('should track performance metrics', () => {
-      const app = new MyApp();
-      runtime.mount(app, container);
-      
-      const stats = runtime.getStats();
-      
-      expect(stats.buildTime).toBeGreaterThan(0);
-      expect(stats.renderTime).toBeGreaterThanOrEqual(0);
-      expect(stats.mounted).toBe(true);
-    });
-  });
-  
-  describe('Error Recovery', () => {
-    test('should handle build errors gracefully', (done) => {
-      const counter = new Counter();
-      runtime.mount(counter, container);
-      
-      const element = runtime.elementTree;
-      
-      // Make build throw error
-      const originalBuild = element.build;
-      element.build = function() {
-        throw new Error('Build failed');
-      };
-      
-      element.markNeedsBuild();
-      
-      setTimeout(() => {
-        // Runtime should still be operational
-        expect(runtime.mounted).toBe(true);
-        
-        // Restore build
-        element.build = originalBuild;
-        element.markNeedsBuild();
-        
-        setTimeout(() => {
-          expect(runtime.dirtyElements.size).toBe(0);
-          done();
-        }, 20);
-      }, 20);
-    });
-    
-    test('should cleanup on mount failure', () => {
-      const invalidWidget = { invalid: true };
-      
-      expect(() => {
-        runtime.mount(invalidWidget, container);
-      }).toThrow();
-      
-      expect(runtime.mounted).toBe(false);
-      expect(runtime.elementTree).toBe(null);
-    });
-  });
-  
-  describe('Service Integration', () => {
-    test('should provide services to widgets', () => {
-      const app = new MyApp();
-      
-      // Register service before mount
-      runtime.registerService('theme', {
-        primaryColor: '#6750a4',
-        textColor: '#1c1b1f'
-      });
-      
-      runtime.mount(app, container);
-      
-      const theme = runtime.getService('theme');
-      expect(theme.primaryColor).toBe('#6750a4');
-    });
-    
-    test('should access services during build', () => {
-      class ThemedApp {
-        constructor() {
-          this.key = 'themed-app';
-        }
-        
-        build(context) {
-          const theme = context.runtime.getService('theme');
-          
-          return new Container({
-            backgroundColor: theme ? theme.primaryColor : '#ffffff',
-            child: new Text('Themed App')
-          }).build(context);
-        }
-      }
-      
-      ThemedApp.prototype.constructor.name = 'StatelessWidget';
-      
-      runtime.registerService('theme', { primaryColor: '#ff0000' });
-      
-      const app = new ThemedApp();
-      runtime.mount(app, container);
-      
-      expect(runtime.elementTree.vnode.style.backgroundColor).toBe('#ff0000');
-    });
-  });
-  
-  describe('Memory Management', () => {
-    test('should cleanup references on unmount', () => {
-      const app = new MyApp();
-      runtime.mount(app, container);
-      
-      const element = runtime.elementTree;
-      const elementId = element.id;
-      
-      runtime.unmount();
-      
-      expect(element.mounted).toBe(false);
-      expect(element.domNode).toBe(null);
-      expect(runtime.elementTree).toBe(null);
-    });
-    
-    test('should not leak memory on multiple mount/unmount cycles', () => {
-      const initialMemory = process.memoryUsage ? process.memoryUsage().heapUsed : 0;
-      
-      for (let i = 0; i < 10; i++) {
-        const app = new MyApp();
-        runtime.mount(app, container);
-        runtime.unmount();
-        
-        // Reset runtime for next mount
-        runtime = new RuntimeEngine();
-      }
-      
-      // Force garbage collection if available
-      if (global.gc) {
-        global.gc();
-      }
-      
-      const finalMemory = process.memoryUsage ? process.memoryUsage().heapUsed : 0;
-      
-      // Memory should not grow significantly (allow 5MB growth for test overhead)
-      if (process.memoryUsage) {
-        const memoryGrowth = finalMemory - initialMemory;
-        expect(memoryGrowth).toBeLessThan(5 * 1024 * 1024);
-      }
-    });
-  });
-  
-  describe('Complex Widget Trees', () => {
-    test('should handle deeply nested widgets', () => {
-      class DeepApp {
-        constructor(depth = 0) {
-          this.depth = depth;
-          this.key = `deep-${depth}`;
-        }
-        
-        build(context) {
-          if (this.depth >= 10) {
-            return new Text(`Depth ${this.depth}`).build(context);
-          }
-          
-          return new Container({
-            child: new DeepApp(this.depth + 1)
-          }).build(context);
-        }
-      }
-      
-      DeepApp.prototype.constructor.name = 'StatelessWidget';
-      
-      const app = new DeepApp();
-      runtime.mount(app, container);
-      
-      expect(runtime.mounted).toBe(true);
-      expect(runtime.elementTree).toBeDefined();
-    });
-    
-    test('should handle many sibling widgets', () => {
-      class WideApp {
-        constructor() {
-          this.key = 'wide-app';
-        }
-        
-        build(context) {
-          const children = [];
-          for (let i = 0; i < 50; i++) {
-            children.push(new Text(`Item ${i}`));
-          }
-          
-          return new Column({ children }).build(context);
-        }
-      }
-      
-      WideApp.prototype.constructor.name = 'StatelessWidget';
-      
-      const app = new WideApp();
-      
-      const start = performance.now();
-      runtime.mount(app, container);
-      const duration = performance.now() - start;
-      
-      expect(runtime.mounted).toBe(true);
-      expect(duration).toBeLessThan(200); // Should still be fast
-    });
-  });
-});
-
-// Run tests
-if (typeof module !== 'undefined' && require.main === module) {
-  console.log('Running RuntimeEngine integration tests...');
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/test/service_registry.test.js b/packages/flutterjs_engine/src/runtime/test/service_registry.test.js
deleted file mode 100644
index 1b9bdb78..00000000
--- a/packages/flutterjs_engine/src/runtime/test/service_registry.test.js
+++ /dev/null
@@ -1,685 +0,0 @@
-/**
- * Service Registry Tests
- * 
- * Test suite for ServiceRegistry class
- * Tests registration, retrieval, caching, scoping, and events
- */
-
-
-import { ServiceRegistry } from '../src/service_registry.js';
-
-// Mock services
-class MockService {
-  constructor(name) {
-    this.name = name;
-    this.created = Date.now();
-  }
-}
-
-class MockLogger {
-  constructor() {
-    this.logs = [];
-  }
-  
-  log(message) {
-    this.logs.push(message);
-  }
-}
-
-class MockTheme {
-  constructor() {
-    this.primaryColor = '#6750a4';
-    this.isDark = false;
-  }
-}
-
-class MockNavigator {
-  constructor() {
-    this.currentRoute = '/';
-  }
-}
-
-// Test utilities
-class TestRunner {
-  constructor() {
-    this.tests = [];
-    this.passed = 0;
-    this.failed = 0;
-  }
-  
-  describe(name, fn) {
-    console.log(`\n📋 ${name}`);
-    fn();
-  }
-  
-  it(name, fn) {
-    try {
-      fn();
-      console.log(`  ✅ ${name}`);
-      this.passed++;
-    } catch (error) {
-      console.log(`  ❌ ${name}`);
-      console.log(`     ${error.message}`);
-      this.failed++;
-    }
-  }
-  
-  assert(condition, message) {
-    if (!condition) {
-      throw new Error(message || 'Assertion failed');
-    }
-  }
-  
-  assertEqual(actual, expected, message) {
-    if (actual !== expected) {
-      throw new Error(
-        message || `Expected ${expected} but got ${actual}`
-      );
-    }
-  }
-  
-  assertNull(value, message) {
-    if (value !== null) {
-      throw new Error(message || `Expected null but got ${value}`);
-    }
-  }
-  
-  assertNotNull(value, message) {
-    if (value === null) {
-      throw new Error(message || 'Expected value to not be null');
-    }
-  }
-  
-  assertTrue(value, message) {
-    if (value !== true) {
-      throw new Error(message || `Expected true but got ${value}`);
-    }
-  }
-  
-  assertFalse(value, message) {
-    if (value !== false) {
-      throw new Error(message || `Expected false but got ${value}`);
-    }
-  }
-  
-  summary() {
-    const total = this.passed + this.failed;
-    console.log(`\n${'='.repeat(50)}`);
-    console.log(`Tests: ${total} | ✅ Passed: ${this.passed} | ❌ Failed: ${this.failed}`);
-    console.log(`${'='.repeat(50)}\n`);
-    
-    return this.failed === 0;
-  }
-}
-
-// Run tests
-function runTests() {
-  const test = new TestRunner();
-  
-  // Test 1: Initialization
-  test.describe('ServiceRegistry: Initialization', () => {
-    test.it('should create registry', () => {
-      const registry = new ServiceRegistry();
-      
-      test.assert(registry !== null, 'Registry should be created');
-      test.assertEqual(registry.stats.servicesRegistered, 0, 'Should start empty');
-    });
-    
-    test.it('should create with config', () => {
-      const registry = new ServiceRegistry({
-        debugMode: true,
-        throwOnMissing: true
-      });
-      
-      test.assertTrue(registry.config.debugMode, 'Should set debug mode');
-      test.assertTrue(registry.config.throwOnMissing, 'Should set throw option');
-    });
-    
-    test.it('should have default config', () => {
-      const registry = new ServiceRegistry();
-      
-      test.assertTrue(registry.config.enableLogging, 'Logging enabled');
-      test.assertTrue(registry.config.enableValidation, 'Validation enabled');
-      test.assertTrue(registry.config.cacheInstances, 'Caching enabled');
-      test.assertTrue(registry.config.allowOverride, 'Override allowed');
-    });
-  });
-  
-  // Test 2: Register singleton
-  test.describe('ServiceRegistry: Register Singleton', () => {
-    test.it('should register singleton', () => {
-      const registry = new ServiceRegistry();
-      const service = new MockService('test');
-      
-      registry.register('myService', service);
-      
-      test.assertTrue(registry.has('myService'), 'Should register service');
-      test.assertEqual(registry.stats.servicesRegistered, 1, 'Should count registration');
-    });
-    
-    test.it('should retrieve registered singleton', () => {
-      const registry = new ServiceRegistry();
-      const service = new MockService('test');
-      
-      registry.register('myService', service);
-      const retrieved = registry.get('myService');
-      
-      test.assertEqual(retrieved, service, 'Should return same instance');
-    });
-    
-    test.it('should cache singleton', () => {
-      const registry = new ServiceRegistry();
-      const service = new MockService('test');
-      
-      registry.register('myService', service);
-      const retrieved1 = registry.get('myService');
-      const retrieved2 = registry.get('myService');
-      
-      test.assertEqual(retrieved1, retrieved2, 'Should return cached instance');
-      test.assertEqual(registry.stats.cacheHits, 2, 'Should record cache hits');
-    });
-    
-    test.it('should throw on null service', () => {
-      const registry = new ServiceRegistry();
-      
-      try {
-        registry.register('myService', null);
-        throw new Error('Should have thrown');
-      } catch (error) {
-        test.assert(error.message.includes('null'), 'Should mention null');
-      }
-    });
-    
-    test.it('should throw on invalid name', () => {
-      const registry = new ServiceRegistry();
-      
-      try {
-        registry.register('', new MockService());
-        throw new Error('Should have thrown');
-      } catch (error) {
-        test.assert(error.message.includes('name'), 'Should mention name');
-      }
-    });
-    
-    test.it('should throw on duplicate without override', () => {
-      const registry = new ServiceRegistry({ allowOverride: false });
-      
-      registry.register('myService', new MockService('1'));
-      
-      try {
-        registry.register('myService', new MockService('2'));
-        throw new Error('Should have thrown');
-      } catch (error) {
-        test.assert(error.message.includes('already'), 'Should mention duplicate');
-      }
-    });
-    
-    test.it('should allow override when enabled', () => {
-      const registry = new ServiceRegistry({ allowOverride: true });
-      
-      const service1 = new MockService('1');
-      const service2 = new MockService('2');
-      
-      registry.register('myService', service1);
-      registry.register('myService', service2);
-      
-      const retrieved = registry.get('myService');
-      test.assertEqual(retrieved, service2, 'Should return latest service');
-    });
-  });
-  
-  // Test 3: Register factory
-  test.describe('ServiceRegistry: Register Factory', () => {
-    test.it('should register factory', () => {
-      const registry = new ServiceRegistry();
-      
-      registry.registerFactory('myService', () => new MockService('test'));
-      
-      test.assertTrue(registry.has('myService'), 'Should register factory');
-      test.assertEqual(registry.stats.servicesRegistered, 1, 'Should count registration');
-    });
-    
-    test.it('should create new instance each time', () => {
-      const registry = new ServiceRegistry();
-      
-      registry.registerFactory('myService', () => new MockService('test'));
-      
-      const instance1 = registry.get('myService');
-      const instance2 = registry.get('myService');
-      
-      test.assertNotNull(instance1, 'Should create instance 1');
-      test.assertNotNull(instance2, 'Should create instance 2');
-      test.assert(instance1 !== instance2, 'Should create different instances');
-    });
-    
-    test.it('should count factory calls', () => {
-      const registry = new ServiceRegistry();
-      
-      registry.registerFactory('myService', () => new MockService('test'));
-      
-      registry.get('myService');
-      registry.get('myService');
-      registry.get('myService');
-      
-      test.assertEqual(registry.stats.factoryCalls, 3, 'Should count all factory calls');
-    });
-    
-    test.it('should throw on non-function factory', () => {
-      const registry = new ServiceRegistry();
-      
-      try {
-        registry.registerFactory('myService', 'not a function');
-        throw new Error('Should have thrown');
-      } catch (error) {
-        test.assert(error.message.includes('function'), 'Should mention function');
-      }
-    });
-  });
-  
-  // Test 4: Register lazy
-  test.describe('ServiceRegistry: Register Lazy', () => {
-    test.it('should register lazy provider', () => {
-      const registry = new ServiceRegistry();
-      
-      registry.registerLazy('myService', () => new MockService('test'));
-      
-      test.assertTrue(registry.has('myService'), 'Should register provider');
-      test.assertEqual(registry.stats.servicesRegistered, 1, 'Should count registration');
-    });
-    
-    test.it('should create on first access', () => {
-      const registry = new ServiceRegistry();
-      let callCount = 0;
-      
-      registry.registerLazy('myService', () => {
-        callCount++;
-        return new MockService('test');
-      });
-      
-      const instance1 = registry.get('myService');
-      
-      test.assertEqual(callCount, 1, 'Should call provider once');
-      test.assertNotNull(instance1, 'Should return instance');
-    });
-    
-    test.it('should cache lazy singleton', () => {
-      const registry = new ServiceRegistry();
-      let callCount = 0;
-      
-      registry.registerLazy('myService', () => {
-        callCount++;
-        return new MockService('test');
-      });
-      
-      const instance1 = registry.get('myService');
-      const instance2 = registry.get('myService');
-      
-      test.assertEqual(callCount, 1, 'Should call provider once');
-      test.assertEqual(instance1, instance2, 'Should return same instance');
-    });
-    
-    test.it('should count lazy provider calls', () => {
-      const registry = new ServiceRegistry();
-      
-      registry.registerLazy('service1', () => new MockService('1'));
-      registry.registerLazy('service2', () => new MockService('2'));
-      
-      registry.get('service1');
-      registry.get('service2');
-      
-      test.assertEqual(registry.stats.lazyProviderCalls, 2, 'Should count provider calls');
-    });
-  });
-  
-  // Test 5: Scoped services
-  test.describe('ServiceRegistry: Scoped Services', () => {
-    test.it('should register scoped service', () => {
-      const registry = new ServiceRegistry();
-      const service = new MockService('scoped');
-      
-      registry.registerScoped('scope1', 'myService', service);
-      
-      test.assertTrue(registry.hasScoped('scope1', 'myService'), 'Should register scoped');
-    });
-    
-    test.it('should retrieve scoped service', () => {
-      const registry = new ServiceRegistry();
-      const service = new MockService('scoped');
-      
-      registry.registerScoped('scope1', 'myService', service);
-      const retrieved = registry.getScoped('scope1', 'myService');
-      
-      test.assertEqual(retrieved, service, 'Should return scoped service');
-    });
-    
-    test.it('should isolate scopes', () => {
-      const registry = new ServiceRegistry();
-      const service1 = new MockService('scope1');
-      const service2 = new MockService('scope2');
-      
-      registry.registerScoped('scope1', 'myService', service1);
-      registry.registerScoped('scope2', 'myService', service2);
-      
-      const retrieved1 = registry.getScoped('scope1', 'myService');
-      const retrieved2 = registry.getScoped('scope2', 'myService');
-      
-      test.assertEqual(retrieved1, service1, 'Should get scope1 service');
-      test.assertEqual(retrieved2, service2, 'Should get scope2 service');
-      test.assert(retrieved1 !== retrieved2, 'Should be different instances');
-    });
-    
-    test.it('should clear scope', () => {
-      const registry = new ServiceRegistry();
-      const service = new MockService('scoped');
-      
-      registry.registerScoped('scope1', 'myService', service);
-      test.assertTrue(registry.hasScoped('scope1', 'myService'), 'Should exist');
-      
-      registry.clearScope('scope1');
-      test.assertFalse(registry.hasScoped('scope1', 'myService'), 'Should be cleared');
-    });
-  });
-  
-  // Test 6: Check and unregister
-  test.describe('ServiceRegistry: Check and Unregister', () => {
-    test.it('should check if service registered', () => {
-      const registry = new ServiceRegistry();
-      
-      test.assertFalse(registry.has('myService'), 'Should not have service');
-      
-      registry.register('myService', new MockService());
-      
-      test.assertTrue(registry.has('myService'), 'Should have service');
-    });
-    
-    test.it('should unregister service', () => {
-      const registry = new ServiceRegistry();
-      
-      registry.register('myService', new MockService());
-      test.assertTrue(registry.has('myService'), 'Should be registered');
-      
-      registry.unregister('myService');
-      test.assertFalse(registry.has('myService'), 'Should be unregistered');
-    });
-    
-    test.it('should unregister scoped service', () => {
-      const registry = new ServiceRegistry();
-      const service = new MockService();
-      
-      registry.registerScoped('scope1', 'myService', service);
-      test.assertTrue(registry.hasScoped('scope1', 'myService'), 'Should exist');
-      
-      registry.unregisterScoped('scope1', 'myService');
-      test.assertFalse(registry.hasScoped('scope1', 'myService'), 'Should be unregistered');
-    });
-  });
-  
-  // Test 7: Get names and metadata
-  test.describe('ServiceRegistry: Names and Metadata', () => {
-    test.it('should get all service names', () => {
-      const registry = new ServiceRegistry();
-      
-      registry.register('service1', new MockService());
-      registry.registerFactory('service2', () => new MockService());
-      registry.registerLazy('service3', () => new MockService());
-      
-      const names = registry.getNames();
-      
-      test.assertEqual(names.length, 3, 'Should have 3 services');
-      test.assert(names.includes('service1'), 'Should include service1');
-      test.assert(names.includes('service2'), 'Should include service2');
-      test.assert(names.includes('service3'), 'Should include service3');
-    });
-    
-    test.it('should get service metadata', () => {
-      const registry = new ServiceRegistry();
-      
-      registry.register('myService', new MockService());
-      
-      const meta = registry.getMetadata('myService');
-      
-      test.assertNotNull(meta, 'Should have metadata');
-      test.assertEqual(meta.type, 'singleton', 'Should be singleton');
-      test.assertEqual(meta.name, 'myService', 'Should have name');
-    });
-    
-    test.it('should get all metadata', () => {
-      const registry = new ServiceRegistry();
-      
-      registry.register('service1', new MockService());
-      registry.registerFactory('service2', () => new MockService());
-      
-      const allMeta = registry.getAllMetadata();
-      
-      test.assert('service1' in allMeta, 'Should have service1 metadata');
-      test.assert('service2' in allMeta, 'Should have service2 metadata');
-    });
-  });
-  
-  // Test 8: Dependencies
-  test.describe('ServiceRegistry: Dependencies', () => {
-    test.it('should set dependencies', () => {
-      const registry = new ServiceRegistry();
-      
-      registry.setDependencies('myService', ['dep1', 'dep2']);
-      
-      const deps = registry.getDependencies('myService');
-      
-      test.assertEqual(deps.length, 2, 'Should have 2 dependencies');
-      test.assert(deps.includes('dep1'), 'Should include dep1');
-      test.assert(deps.includes('dep2'), 'Should include dep2');
-    });
-    
-    test.it('should return empty array for no dependencies', () => {
-      const registry = new ServiceRegistry();
-      
-      const deps = registry.getDependencies('unknownService');
-      
-      test.assertEqual(deps.length, 0, 'Should return empty array');
-    });
-  });
-  
-  // Test 9: Events
-  test.describe('ServiceRegistry: Events', () => {
-    test.it('should listen to service-registered event', () => {
-      const registry = new ServiceRegistry();
-      let eventFired = false;
-      let eventData = null;
-      
-      registry.on('service-registered', (data) => {
-        eventFired = true;
-        eventData = data;
-      });
-      
-      registry.register('myService', new MockService());
-      
-      test.assertTrue(eventFired, 'Event should fire');
-      test.assertEqual(eventData.name, 'myService', 'Should have service name');
-      test.assertEqual(eventData.type, 'singleton', 'Should have type');
-    });
-    
-    test.it('should listen to service-created event', () => {
-      const registry = new ServiceRegistry();
-      let eventFired = false;
-      let eventData = null;
-      
-      registry.on('service-created', (data) => {
-        eventFired = true;
-        eventData = data;
-      });
-      
-      registry.registerFactory('myService', () => new MockService());
-      registry.get('myService');
-      
-      test.assertTrue(eventFired, 'Event should fire');
-      test.assertEqual(eventData.name, 'myService', 'Should have service name');
-      test.assertEqual(eventData.type, 'factory', 'Should have type');
-    });
-    
-    test.it('should listen to service-not-found event', () => {
-      const registry = new ServiceRegistry({ throwOnMissing: false });
-      let eventFired = false;
-      
-      registry.on('service-not-found', () => {
-        eventFired = true;
-      });
-      
-      registry.get('unknownService');
-      
-      test.assertTrue(eventFired, 'Event should fire');
-    });
-    
-    test.it('should remove event listener', () => {
-      const registry = new ServiceRegistry();
-      let callCount = 0;
-      
-      const callback = () => { callCount++; };
-      
-      registry.on('service-registered', callback);
-      registry.register('service1', new MockService());
-      test.assertEqual(callCount, 1, 'Should call callback');
-      
-      registry.off('service-registered', callback);
-      registry.register('service2', new MockService());
-      test.assertEqual(callCount, 1, 'Should not call callback after off');
-    });
-  });
-  
-  // Test 10: Statistics
-  test.describe('ServiceRegistry: Statistics', () => {
-    test.it('should track statistics', () => {
-      const registry = new ServiceRegistry();
-      
-      registry.register('service1', new MockService());
-      registry.get('service1');
-      registry.get('service1');
-      registry.registerFactory('service2', () => new MockService());
-      registry.get('service2');
-      
-      const stats = registry.getStats();
-      
-      test.assertEqual(stats.servicesRegistered, 2, 'Should track registrations');
-      test.assertEqual(stats.servicesRetrieved, 3, 'Should track retrievals');
-      test.assert(stats.cacheHits > 0, 'Should track cache hits');
-    });
-    
-    test.it('should calculate hit rate', () => {
-      const registry = new ServiceRegistry();
-      
-      registry.register('myService', new MockService());
-      registry.get('myService');
-      registry.get('myService');
-      registry.get('myService');
-      
-      const stats = registry.getStats();
-      
-      test.assertNotNull(stats.hitRate, 'Should calculate hit rate');
-      test.assert(parseFloat(stats.hitRate) > 0, 'Should have positive hit rate');
-    });
-    
-    test.it('should reset statistics', () => {
-      const registry = new ServiceRegistry();
-      
-      registry.register('myService', new MockService());
-      registry.get('myService');
-      
-      test.assert(registry.stats.servicesRegistered > 0, 'Should have stats');
-      
-      registry.resetStats();
-      
-      test.assertEqual(registry.stats.servicesRegistered, 0, 'Should reset');
-      test.assertEqual(registry.stats.servicesRetrieved, 0, 'Should reset');
-    });
-  });
-  
-  // Test 11: Clear and dispose
-  test.describe('ServiceRegistry: Clear and Dispose', () => {
-    test.it('should clear all services', () => {
-      const registry = new ServiceRegistry();
-      
-      registry.register('service1', new MockService());
-      registry.registerFactory('service2', () => new MockService());
-      
-      test.assertEqual(registry.getNames().length, 2, 'Should have 2 services');
-      
-      registry.clear();
-      
-      test.assertEqual(registry.getNames().length, 0, 'Should have 0 services');
-    });
-    
-    test.it('should clear all scopes', () => {
-      const registry = new ServiceRegistry();
-      
-      registry.registerScoped('scope1', 'service1', new MockService());
-      registry.registerScoped('scope2', 'service2', new MockService());
-      
-      test.assertEqual(registry.scopedServices.size, 2, 'Should have 2 scopes');
-      
-      registry.clearAllScopes();
-      
-      test.assertEqual(registry.scopedServices.size, 0, 'Should have 0 scopes');
-    });
-    
-    test.it('should dispose registry', () => {
-      const registry = new ServiceRegistry();
-      
-      registry.register('myService', new MockService());
-      registry.on('event', () => {});
-      
-      registry.dispose();
-      
-      test.assertEqual(registry.getNames().length, 0, 'Should clear services');
-      test.assertEqual(registry.listeners.size, 0, 'Should clear listeners');
-    });
-  });
-  
-  // Test 12: Real-world scenario
-  test.describe('ServiceRegistry: Real-world Scenario', () => {
-    test.it('should manage multiple services', () => {
-      const registry = new ServiceRegistry();
-      
-      // Register theme
-      registry.register('theme', new MockTheme());
-      
-      // Register navigator factory
-      registry.registerFactory('navigator', () => new MockNavigator());
-      
-      // Register logger lazy
-      registry.registerLazy('logger', () => new MockLogger());
-      
-      // Use services
-      const theme = registry.get('theme');
-      const nav1 = registry.get('navigator');
-      const nav2 = registry.get('navigator');
-      const logger = registry.get('logger');
-      
-      test.assertNotNull(theme, 'Should get theme');
-      test.assertNotNull(nav1, 'Should get navigator');
-      test.assert(nav1 !== nav2, 'Should create different navigators');
-      test.assertNotNull(logger, 'Should get logger');
-      
-      // Check stats
-      const stats = registry.getStats();
-      test.assertEqual(stats.totalRegistered, 3, 'Should have 3 services');
-    });
-    
-    test.it('should get detailed report', () => {
-      const registry = new ServiceRegistry();
-      
-      registry.register('theme', new MockTheme());
-      registry.registerFactory('logger', () => new MockLogger());
-      
-      const report = registry.getDetailedReport();
-      
-      test.assertNotNull(report.stats, 'Should have stats');
-      test.assertNotNull(report.services, 'Should have services');
-      test.assertNotNull(report.metadata, 'Should have metadata');
-      test.assertNotNull(report.timestamp, 'Should have timestamp');
-    });
-  });
-  
-  return test.summary();
-}
-
-// Run
-runTests();
diff --git a/packages/flutterjs_engine/src/runtime/test/state.test.js b/packages/flutterjs_engine/src/runtime/test/state.test.js
deleted file mode 100644
index eee98364..00000000
--- a/packages/flutterjs_engine/src/runtime/test/state.test.js
+++ /dev/null
@@ -1,640 +0,0 @@
-/**
- * State Test Suite
- * 
- * Comprehensive tests for FlutterJS State Management
- */
-
-import {
-  State,
-  StateManager,
-  UpdateBatcher,
-  StateTracker,
-  ReactiveState,
-  StateObserver
-} from "../src/state.js";
-
-// Mock Element
-class MockElement {
-  constructor(id) {
-    this.id = id;
-    this.mounted = true;
-    this.dirty = false;
-    this.state = null;
-    this.buildContext = () => ({ element: this });
-  }
-  
-  markNeedsBuild() {
-    this.dirty = true;
-  }
-}
-
-// Mock Runtime
-class MockRuntime {
-  constructor() {
-    this.stateManager = new StateManager(this);
-  }
-}
-
-// Test State Implementation
-class TestState extends State {
-  constructor() {
-    super();
-    this.count = 0;
-    this.message = 'hello';
-  }
-  
-  build(context) {
-    return { tag: 'div', children: [`Count: ${this.count}`] };
-  }
-  
-  increment() {
-    this.setState(() => {
-      this.count++;
-    });
-  }
-}
-
-// Test utilities
-class TestRunner {
-  constructor() {
-    this.tests = [];
-    this.passed = 0;
-    this.failed = 0;
-  }
-
-  describe(name, fn) {
-    console.log(`\n📋 ${name}`);
-    fn();
-  }
-
-  it(name, fn) {
-    try {
-      fn();
-      console.log(`  ✅ ${name}`);
-      this.passed++;
-    } catch (error) {
-      console.log(`  ❌ ${name}`);
-      console.log(`     ${error.message}`);
-      this.failed++;
-    }
-  }
-
-  assert(condition, message) {
-    if (!condition) {
-      throw new Error(message || 'Assertion failed');
-    }
-  }
-
-  assertEqual(actual, expected, message) {
-    if (actual !== expected) {
-      throw new Error(
-        message || `Expected ${expected} but got ${actual}`
-      );
-    }
-  }
-
-  assertNull(value, message) {
-    if (value !== null) {
-      throw new Error(message || `Expected null but got ${value}`);
-    }
-  }
-
-  assertNotNull(value, message) {
-    if (value === null) {
-      throw new Error(message || 'Expected value to not be null');
-    }
-  }
-
-  assertTrue(value, message) {
-    if (value !== true) {
-      throw new Error(message || `Expected true but got ${value}`);
-    }
-  }
-
-  assertFalse(value, message) {
-    if (value !== false) {
-      throw new Error(message || `Expected false but got ${value}`);
-    }
-  }
-
-  assertThrows(fn, shouldThrow = true) {
-    let threw = false;
-    try {
-      fn();
-    } catch (error) {
-      threw = true;
-    }
-    
-    if (shouldThrow && !threw) {
-      throw new Error('Expected function to throw');
-    }
-  }
-
-  summary() {
-    const total = this.passed + this.failed;
-    console.log(`\n${'='.repeat(50)}`);
-    console.log(`Tests: ${total} | ✅ Passed: ${this.passed} | ❌ Failed: ${this.failed}`);
-    console.log(`${'='.repeat(50)}\n`);
-
-    return this.failed === 0;
-  }
-}
-
-// Run tests
-function runTests() {
-  const test = new TestRunner();
-
-  test.describe('State: Construction', () => {
-    test.it('should create state with default properties', () => {
-      const s = new State();
-      
-      test.assertNull(s._element);
-      test.assertNull(s._widget);
-      test.assertFalse(s._mounted);
-      test.assertEqual(s._buildCount, 0);
-    });
-    
-    test.it('should throw error if build not implemented', () => {
-      const s = new State();
-      
-      test.assertThrows(() => {
-        s.build({});
-      });
-    });
-  });
-
-  test.describe('State: Lifecycle', () => {
-    test.it('should call initState', () => {
-      const state = new TestState();
-      let initCalled = false;
-      
-      state.initState = () => {
-        initCalled = true;
-      };
-      
-      state._init();
-      
-      test.assertTrue(initCalled);
-      test.assertTrue(state._initStateCalled);
-      test.assertTrue(state._mounted);
-    });
-    
-    test.it('should not call initState twice', () => {
-      const state = new TestState();
-      let callCount = 0;
-      
-      state.initState = () => {
-        callCount++;
-      };
-      
-      state._init();
-      state._init();
-      
-      test.assertEqual(callCount, 1);
-    });
-    
-    test.it('should call dispose', () => {
-      const state = new TestState();
-      let disposeCalled = false;
-      
-      state.dispose = () => {
-        disposeCalled = true;
-      };
-      
-      state._mounted = true;
-      state._dispose();
-      
-      test.assertTrue(disposeCalled);
-      test.assertTrue(state._disposeCalled);
-      test.assertFalse(state._mounted);
-    });
-    
-    test.it('should not call dispose twice', () => {
-      const state = new TestState();
-      let callCount = 0;
-      
-      state.dispose = () => {
-        callCount++;
-      };
-      
-      state._mounted = true;
-      state._dispose();
-      state._dispose();
-      
-      test.assertEqual(callCount, 1);
-    });
-    
-    test.it('should handle didUpdateWidget', () => {
-      const state = new TestState();
-      const oldWidget = { type: 'old' };
-      let widgetReceived = null;
-      
-      state.didUpdateWidget = (oldW) => {
-        widgetReceived = oldW;
-      };
-      
-      state.didUpdateWidget(oldWidget);
-      
-      test.assertEqual(widgetReceived, oldWidget);
-    });
-  });
-
-  test.describe('State: setState', () => {
-    test.it('should update state with function', () => {
-      const state = new TestState();
-      const element = new MockElement('el_1');
-      state._element = element;
-      state._mounted = true;
-      element.state = state;
-      
-      state.setState(() => {
-        state.count = 42;
-      });
-      
-      test.assertEqual(state.count, 42);
-      test.assertTrue(element.dirty);
-    });
-    
-    test.it('should update state with object', () => {
-      const state = new TestState();
-      const element = new MockElement('el_1');
-      state._element = element;
-      state._mounted = true;
-      element.state = state;
-      
-      state.setState({ count: 99, message: 'updated' });
-      
-      test.assertEqual(state.count, 99);
-      test.assertEqual(state.message, 'updated');
-      test.assertTrue(element.dirty);
-    });
-    
-    test.it('should warn on unmounted setState', () => {
-      const state = new TestState();
-      state._mounted = false;
-      
-      // Should not throw, just warn
-      state.setState(() => {
-        state.count++;
-      });
-      
-      test.assertEqual(state.count, 0); // State should not update
-    });
-    
-    test.it('should throw error on invalid setState param', () => {
-      const state = new TestState();
-      const element = new MockElement('el_1');
-      state._element = element;
-      state._mounted = true;
-      element.state = state;
-      
-      test.assertThrows(() => {
-        state.setState('invalid');
-      });
-    });
-    
-    test.it('should mark element for rebuild', () => {
-      const state = new TestState();
-      const element = new MockElement('el_1');
-      element.dirty = false;
-      state._element = element;
-      state._mounted = true;
-      element.state = state;
-      
-      state.setState(() => {
-        state.count++;
-      });
-      
-      test.assertTrue(element.dirty);
-    });
-  });
-
-  test.describe('State: Getters', () => {
-    test.it('should get context', () => {
-      const state = new TestState();
-      const element = new MockElement('el_1');
-      state._element = element;
-      
-      const context = state.context;
-      
-      test.assertNotNull(context);
-      test.assertEqual(context.element, element);
-    });
-    
-    test.it('should return null context if no element', () => {
-      const state = new TestState();
-      state._element = null;
-      
-      test.assertNull(state.context);
-    });
-    
-    test.it('should get mounted status', () => {
-      const state = new TestState();
-      const element = new MockElement('el_1');
-      state._element = element;
-      state._mounted = true;
-      element.mounted = true;
-      
-      test.assertTrue(state.mounted);
-      
-      element.mounted = false;
-      
-      test.assertFalse(state.mounted);
-    });
-    
-    test.it('should get widget', () => {
-      const state = new TestState();
-      const widget = { type: 'test' };
-      state._widget = widget;
-      
-      test.assertEqual(state.widget, widget);
-    });
-  });
-
-  test.describe('State: Statistics', () => {
-    test.it('should provide state stats', () => {
-      const state = new TestState();
-      const element = new MockElement('el_1');
-      state._element = element;
-      state._mounted = true;
-      element.mounted = true;
-      state._buildCount = 5;
-      state._initStateCalled = true;
-      
-      const stats = state.getStats();
-      
-      test.assertNotNull(stats);
-      test.assertTrue(stats.mounted);
-      test.assertEqual(stats.buildCount, 5);
-      test.assertTrue(stats.initStateCalled);
-      test.assertFalse(stats.disposeCalled);
-    });
-  });
-
-  test.describe('StateManager: Registration', () => {
-    test.it('should register state', () => {
-      const runtime = new MockRuntime();
-      const stateManager = runtime.stateManager;
-      const state = new TestState();
-      const element = new MockElement('el_1');
-      
-      stateManager.register(state, element);
-      
-      test.assertEqual(stateManager.stats.statesCreated, 1);
-      test.assertEqual(stateManager.states.size, 1);
-      test.assertEqual(state._element, element);
-      
-      stateManager.dispose();
-    });
-    
-    test.it('should throw error without state or element', () => {
-      const runtime = new MockRuntime();
-      const stateManager = runtime.stateManager;
-      
-      test.assertThrows(() => {
-        stateManager.register(null, new MockElement('el_1'));
-      });
-      
-      test.assertThrows(() => {
-        stateManager.register(new TestState(), null);
-      });
-      
-      stateManager.dispose();
-    });
-    
-    test.it('should track multiple states', () => {
-      const runtime = new MockRuntime();
-      const stateManager = runtime.stateManager;
-      
-      for (let i = 0; i < 5; i++) {
-        const state = new TestState();
-        const element = new MockElement(`el_${i}`);
-        stateManager.register(state, element);
-      }
-      
-      test.assertEqual(stateManager.states.size, 5);
-      test.assertEqual(stateManager.stats.statesCreated, 5);
-      
-      stateManager.dispose();
-    });
-  });
-
-  test.describe('StateManager: Unregistration', () => {
-    test.it('should unregister state', () => {
-      const runtime = new MockRuntime();
-      const stateManager = runtime.stateManager;
-      const state = new TestState();
-      const element = new MockElement('el_1');
-      
-      stateManager.register(state, element);
-      stateManager.unregister(state);
-      
-      test.assertEqual(stateManager.stats.statesDisposed, 1);
-      test.assertNull(state._element);
-      test.assertTrue(state._disposeCalled);
-      
-      stateManager.dispose();
-    });
-    
-    test.it('should handle unregister of null state', () => {
-      const runtime = new MockRuntime();
-      const stateManager = runtime.stateManager;
-      
-      // Should not throw or error
-      stateManager.unregister(null);
-      
-      test.assertEqual(stateManager.states.size, 0);
-      
-      stateManager.dispose();
-    });
-  });
-
-  test.describe('StateManager: Statistics', () => {
-    test.it('should provide accurate stats', () => {
-      const runtime = new MockRuntime();
-      const stateManager = runtime.stateManager;
-      
-      for (let i = 0; i < 3; i++) {
-        const state = new TestState();
-        const element = new MockElement(`el_${i}`);
-        stateManager.register(state, element);
-      }
-      
-      const stats = stateManager.getStats();
-      
-      test.assertEqual(stats.statesCreated, 3);
-      test.assertEqual(stats.currentStates, 3);
-      test.assertNotNull(stats.batcher);
-      test.assertNotNull(stats.tracker);
-      
-      stateManager.dispose();
-    });
-  });
-
-  test.describe('StateManager: Clear and Dispose', () => {
-    test.it('should clear all states', () => {
-      const runtime = new MockRuntime();
-      const stateManager = runtime.stateManager;
-      
-      for (let i = 0; i < 3; i++) {
-        stateManager.register(new TestState(), new MockElement(`el_${i}`));
-      }
-      
-      stateManager.clear();
-      
-      test.assertEqual(stateManager.states.size, 0);
-      stateManager.dispose();
-    });
-    
-    test.it('should dispose state manager', () => {
-      const runtime = new MockRuntime();
-      const stateManager = runtime.stateManager;
-      
-      stateManager.register(new TestState(), new MockElement('el_1'));
-      stateManager.dispose();
-      
-      test.assertEqual(stateManager.states.size, 0);
-    });
-  });
-
-  test.describe('StateTracker: Dependency Tracking', () => {
-    test.it('should start tracking', () => {
-      const tracker = new StateTracker();
-      const element = new MockElement('el_1');
-      
-      tracker.startTracking(element);
-      
-      test.assertTrue(tracker.tracking);
-      test.assertEqual(tracker.currentElement, element);
-    });
-    
-    test.it('should stop tracking', () => {
-      const tracker = new StateTracker();
-      tracker.startTracking(new MockElement('el_1'));
-      tracker.stopTracking();
-      
-      test.assertFalse(tracker.tracking);
-      test.assertNull(tracker.currentElement);
-    });
-    
-    test.it('should record dependency', () => {
-      const tracker = new StateTracker();
-      const element = new MockElement('el_1');
-      const state = new TestState();
-      state._stateId = 'state_1';
-      
-      tracker.startTracking(element);
-      tracker.recordDependency(state, 'count');
-      
-      const deps = tracker.getDependents(state, 'count');
-      
-      test.assertTrue(deps.has(element));
-      test.assertEqual(tracker.stats.dependenciesTracked, 1);
-    });
-  });
-
-  test.describe('StateTracker: Clear Dependencies', () => {
-    test.it('should clear dependencies for element', () => {
-      const tracker = new StateTracker();
-      const element = new MockElement('el_1');
-      const state = new TestState();
-      state._stateId = 'state_1';
-      
-      tracker.startTracking(element);
-      tracker.recordDependency(state, 'count');
-      tracker.recordDependency(state, 'message');
-      tracker.stopTracking();
-      
-      tracker.clearDependencies(element);
-      
-      test.assertEqual(tracker.getDependents(state, 'count').size, 0);
-      test.assertEqual(tracker.getDependents(state, 'message').size, 0);
-    });
-  });
-
-  test.describe('ReactiveState: Reactive Properties', () => {
-    test.it('should make property reactive', () => {
-      const state = new ReactiveState();
-      
-      state.makeReactive('count', 0);
-      
-      test.assertEqual(state.count, 0);
-      test.assertTrue(state._reactiveProperties.has('count'));
-    });
-    
-    test.it('should get and set reactive values', () => {
-      const state = new ReactiveState();
-      
-      state.makeReactive('message', 'hello');
-      
-      test.assertEqual(state.getValue('message'), 'hello');
-      
-      state.setValue('message', 'world');
-      
-      test.assertEqual(state.getValue('message'), 'world');
-    });
-  });
-
-  test.describe('StateObserver: Observation', () => {
-    test.it('should observe state', () => {
-      const observer = new StateObserver();
-      const state = new TestState();
-      state._stateId = 'state_1';
-      const callback = () => {};
-      
-      observer.observe(state, callback);
-      
-      test.assertTrue(observer.observers.has('state_1'));
-    });
-    
-    test.it('should notify observers', () => {
-      const observer = new StateObserver();
-      const state = new TestState();
-      state._stateId = 'state_1';
-      let notified = false;
-      
-      observer.observe(state, () => {
-        notified = true;
-      });
-      observer.notify(state, 'count', 0, 1);
-      
-      test.assertTrue(notified);
-    });
-    
-    test.it('should unobserve specific callback', () => {
-      const observer = new StateObserver();
-      const state = new TestState();
-      state._stateId = 'state_1';
-      let notified = false;
-      
-      const callback = () => {
-        notified = true;
-      };
-      
-      observer.observe(state, callback);
-      observer.unobserve(state, callback);
-      
-      observer.notify(state, 'count', 0, 1);
-      
-      test.assertFalse(notified);
-    });
-    
-    test.it('should clear all observers', () => {
-      const observer = new StateObserver();
-      const state = new TestState();
-      state._stateId = 'state_1';
-      
-      observer.observe(state, () => {});
-      observer.observe(new TestState(), () => {});
-      
-      observer.clear();
-      
-      test.assertEqual(observer.observers.size, 0);
-    });
-  });
-
-  return test.summary();
-}
-
-// Run
-runTests();
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/test/state_integration.test.js b/packages/flutterjs_engine/src/runtime/test/state_integration.test.js
deleted file mode 100644
index 2a8b036a..00000000
--- a/packages/flutterjs_engine/src/runtime/test/state_integration.test.js
+++ /dev/null
@@ -1,827 +0,0 @@
-/**
- * State Integration Tests
- * 
- * Real-world scenarios testing complete state management workflows
- */
-
-
-import { State,StateManager,ReactiveState,StateObserver } from '../src/state.js';
-
-// Test Runtime
-class TestRuntime {
-  constructor() {
-    this.stateManager = new StateManager(this);
-    this.dirtyElements = new Set();
-  }
-  
-  markNeedsBuild(element) {
-    this.dirtyElements.add(element);
-  }
-  
-  performUpdate() {
-    this.stateManager.updateBatcher.flush();
-    
-    this.dirtyElements.forEach(el => {
-      if (el.mounted && el.state) {
-        el.rebuild();
-      }
-    });
-    
-    this.dirtyElements.clear();
-  }
-}
-
-// Test Element
-class TestElement {
-  constructor(id, runtime) {
-    this.id = id;
-    this.runtime = runtime;
-    this.mounted = true;
-    this.state = null;
-    this.dirty = false;
-    this.buildCount = 0;
-  }
-  
-  buildContext() {
-    return {
-      element: this,
-      runtime: this.runtime
-    };
-  }
-  
-  markNeedsBuild() {
-    this.dirty = true;
-    this.runtime.markNeedsBuild(this);
-  }
-  
-  rebuild() {
-    if (!this.mounted || !this.state) return;
-    
-    this.state._markBuilding(true);
-    
-    try {
-      const vnode = this.state.build(this.buildContext());
-      this.state._buildCount++;
-      this.buildCount++;
-    } finally {
-      this.state._markBuilding(false);
-    }
-    
-    this.dirty = false;
-  }
-  
-  unmount() {
-    this.mounted = false;
-  }
-}
-
-// Real-world State Examples
-
-// Counter State
-class CounterState extends State {
-  constructor() {
-    super();
-    this.count = 0;
-  }
-  
-  initState() {
-    console.log('Counter initialized');
-  }
-  
-  increment() {
-    this.setState(() => {
-      this.count++;
-    });
-  }
-  
-  decrement() {
-    this.setState(() => {
-      this.count--;
-    });
-  }
-  
-  reset() {
-    this.setState({ count: 0 });
-  }
-  
-  build(context) {
-    return {
-      tag: 'div',
-      children: [`Count: ${this.count}`]
-    };
-  }
-  
-  dispose() {
-    console.log('Counter disposed');
-  }
-}
-
-// Form State
-class FormState extends State {
-  constructor() {
-    super();
-    this.name = '';
-    this.email = '';
-    this.message = '';
-    this.errors = {};
-    this.submitting = false;
-  }
-  
-  updateField(field, value) {
-    this.setState(() => {
-      this[field] = value;
-      // Clear error when user types
-      if (this.errors[field]) {
-        delete this.errors[field];
-      }
-    });
-  }
-  
-  validate() {
-    const errors = {};
-    
-    if (!this.name.trim()) {
-      errors.name = 'Name is required';
-    }
-    
-    if (!this.email.includes('@')) {
-      errors.email = 'Valid email is required';
-    }
-    
-    if (this.message.length < 10) {
-      errors.message = 'Message must be at least 10 characters';
-    }
-    
-    this.setState({ errors });
-    
-    return Object.keys(errors).length === 0;
-  }
-  
-  submit() {
-    if (!this.validate()) {
-      return;
-    }
-    
-    this.setState({ submitting: true });
-    
-    // Simulate async submission
-    setTimeout(() => {
-      this.setState({ 
-        submitting: false,
-        name: '',
-        email: '',
-        message: ''
-      });
-    }, 1000);
-  }
-  
-  build(context) {
-    return {
-      tag: 'form',
-      children: [
-        `Name: ${this.name}`,
-        `Email: ${this.email}`,
-        `Submitting: ${this.submitting}`
-      ]
-    };
-  }
-}
-
-// Todo List State
-class TodoListState extends State {
-  constructor() {
-    super();
-    this.todos = [];
-    this.filter = 'all'; // all, active, completed
-    this.nextId = 1;
-  }
-  
-  addTodo(text) {
-    if (!text.trim()) return;
-    
-    this.setState(() => {
-      this.todos.push({
-        id: this.nextId++,
-        text: text.trim(),
-        completed: false,
-        createdAt: Date.now()
-      });
-    });
-  }
-  
-  toggleTodo(id) {
-    this.setState(() => {
-      const todo = this.todos.find(t => t.id === id);
-      if (todo) {
-        todo.completed = !todo.completed;
-      }
-    });
-  }
-  
-  deleteTodo(id) {
-    this.setState(() => {
-      this.todos = this.todos.filter(t => t.id !== id);
-    });
-  }
-  
-  setFilter(filter) {
-    this.setState({ filter });
-  }
-  
-  clearCompleted() {
-    this.setState(() => {
-      this.todos = this.todos.filter(t => !t.completed);
-    });
-  }
-  
-  get filteredTodos() {
-    switch (this.filter) {
-      case 'active':
-        return this.todos.filter(t => !t.completed);
-      case 'completed':
-        return this.todos.filter(t => t.completed);
-      default:
-        return this.todos;
-    }
-  }
-  
-  get stats() {
-    return {
-      total: this.todos.length,
-      active: this.todos.filter(t => !t.completed).length,
-      completed: this.todos.filter(t => t.completed).length
-    };
-  }
-  
-  build(context) {
-    return {
-      tag: 'div',
-      children: [`Todos: ${this.todos.length}`]
-    };
-  }
-}
-
-describe('State Integration Tests', () => {
-  let runtime;
-  
-  beforeEach(() => {
-    runtime = new TestRuntime();
-  });
-  
-  afterEach(() => {
-    runtime.stateManager.dispose();
-  });
-  
-  describe('Counter Application', () => {
-    test('should handle increment operations', (done) => {
-      const element = new TestElement('counter', runtime);
-      const state = new CounterState();
-      
-      element.state = state;
-      state._element = element;
-      
-      runtime.stateManager.register(state, element);
-      state._init();
-      
-      expect(state.count).toBe(0);
-      
-      state.increment();
-      
-      setTimeout(() => {
-        runtime.performUpdate();
-        
-        expect(state.count).toBe(1);
-        expect(element.buildCount).toBeGreaterThan(0);
-        
-        done();
-      }, 10);
-    });
-    
-    test('should handle multiple rapid increments', (done) => {
-      const element = new TestElement('counter', runtime);
-      const state = new CounterState();
-      
-      element.state = state;
-      state._element = element;
-      
-      runtime.stateManager.register(state, element);
-      state._init();
-      
-      // Rapid increments
-      state.increment();
-      state.increment();
-      state.increment();
-      
-      setTimeout(() => {
-        runtime.performUpdate();
-        
-        expect(state.count).toBe(3);
-        // Should only rebuild once due to batching
-        expect(element.buildCount).toBe(1);
-        
-        done();
-      }, 10);
-    });
-    
-    test('should handle increment and decrement', (done) => {
-      const element = new TestElement('counter', runtime);
-      const state = new CounterState();
-      
-      element.state = state;
-      state._element = element;
-      
-      runtime.stateManager.register(state, element);
-      state._init();
-      
-      state.increment();
-      state.increment();
-      state.decrement();
-      
-      setTimeout(() => {
-        runtime.performUpdate();
-        
-        expect(state.count).toBe(1);
-        
-        done();
-      }, 10);
-    });
-    
-    test('should handle reset', (done) => {
-      const element = new TestElement('counter', runtime);
-      const state = new CounterState();
-      
-      element.state = state;
-      state._element = element;
-      
-      runtime.stateManager.register(state, element);
-      state._init();
-      
-      state.increment();
-      state.increment();
-      state.increment();
-      
-      setTimeout(() => {
-        runtime.performUpdate();
-        
-        expect(state.count).toBe(3);
-        
-        state.reset();
-        
-        setTimeout(() => {
-          runtime.performUpdate();
-          
-          expect(state.count).toBe(0);
-          
-          done();
-        }, 10);
-      }, 10);
-    });
-  });
-  
-  describe('Form Application', () => {
-    test('should handle field updates', (done) => {
-      const element = new TestElement('form', runtime);
-      const state = new FormState();
-      
-      element.state = state;
-      state._element = element;
-      
-      runtime.stateManager.register(state, element);
-      state._init();
-      
-      state.updateField('name', 'John Doe');
-      state.updateField('email', 'john@example.com');
-      
-      setTimeout(() => {
-        runtime.performUpdate();
-        
-        expect(state.name).toBe('John Doe');
-        expect(state.email).toBe('john@example.com');
-        
-        done();
-      }, 10);
-    });
-    
-    test('should handle validation', () => {
-      const element = new TestElement('form', runtime);
-      const state = new FormState();
-      
-      element.state = state;
-      state._element = element;
-      
-      runtime.stateManager.register(state, element);
-      state._init();
-      
-      // Invalid form
-      const isValid = state.validate();
-      
-      expect(isValid).toBe(false);
-      expect(Object.keys(state.errors).length).toBeGreaterThan(0);
-      
-      // Valid form
-      state.name = 'John Doe';
-      state.email = 'john@example.com';
-      state.message = 'This is a valid message';
-      
-      const isValidNow = state.validate();
-      
-      expect(isValidNow).toBe(true);
-      expect(Object.keys(state.errors).length).toBe(0);
-    });
-    
-    test('should clear errors on field update', (done) => {
-      const element = new TestElement('form', runtime);
-      const state = new FormState();
-      
-      element.state = state;
-      state._element = element;
-      
-      runtime.stateManager.register(state, element);
-      state._init();
-      
-      state.validate();
-      
-      expect(state.errors.name).toBeDefined();
-      
-      state.updateField('name', 'John');
-      
-      setTimeout(() => {
-        runtime.performUpdate();
-        
-        expect(state.errors.name).toBeUndefined();
-        
-        done();
-      }, 10);
-    });
-    
-    test('should handle form submission', (done) => {
-      const element = new TestElement('form', runtime);
-      const state = new FormState();
-      
-      element.state = state;
-      state._element = element;
-      
-      runtime.stateManager.register(state, element);
-      state._init();
-      
-      // Fill form
-      state.name = 'John Doe';
-      state.email = 'john@example.com';
-      state.message = 'This is a test message';
-      
-      state.submit();
-      
-      expect(state.submitting).toBe(true);
-      
-      setTimeout(() => {
-        expect(state.submitting).toBe(false);
-        expect(state.name).toBe('');
-        
-        done();
-      }, 1100);
-    });
-  });
-  
-  describe('Todo List Application', () => {
-    test('should add todos', (done) => {
-      const element = new TestElement('todos', runtime);
-      const state = new TodoListState();
-      
-      element.state = state;
-      state._element = element;
-      
-      runtime.stateManager.register(state, element);
-      state._init();
-      
-      state.addTodo('Buy groceries');
-      state.addTodo('Write code');
-      state.addTodo('Exercise');
-      
-      setTimeout(() => {
-        runtime.performUpdate();
-        
-        expect(state.todos.length).toBe(3);
-        expect(state.stats.active).toBe(3);
-        expect(state.stats.completed).toBe(0);
-        
-        done();
-      }, 10);
-    });
-    
-    test('should toggle todos', (done) => {
-      const element = new TestElement('todos', runtime);
-      const state = new TodoListState();
-      
-      element.state = state;
-      state._element = element;
-      
-      runtime.stateManager.register(state, element);
-      state._init();
-      
-      state.addTodo('Task 1');
-      state.addTodo('Task 2');
-      
-      setTimeout(() => {
-        runtime.performUpdate();
-        
-        const todoId = state.todos[0].id;
-        state.toggleTodo(todoId);
-        
-        setTimeout(() => {
-          runtime.performUpdate();
-          
-          expect(state.todos[0].completed).toBe(true);
-          expect(state.stats.active).toBe(1);
-          expect(state.stats.completed).toBe(1);
-          
-          done();
-        }, 10);
-      }, 10);
-    });
-    
-    test('should delete todos', (done) => {
-      const element = new TestElement('todos', runtime);
-      const state = new TodoListState();
-      
-      element.state = state;
-      state._element = element;
-      
-      runtime.stateManager.register(state, element);
-      state._init();
-      
-      state.addTodo('Task 1');
-      state.addTodo('Task 2');
-      state.addTodo('Task 3');
-      
-      setTimeout(() => {
-        runtime.performUpdate();
-        
-        const todoId = state.todos[1].id;
-        state.deleteTodo(todoId);
-        
-        setTimeout(() => {
-          runtime.performUpdate();
-          
-          expect(state.todos.length).toBe(2);
-          expect(state.todos.find(t => t.id === todoId)).toBeUndefined();
-          
-          done();
-        }, 10);
-      }, 10);
-    });
-    
-    test('should filter todos', (done) => {
-      const element = new TestElement('todos', runtime);
-      const state = new TodoListState();
-      
-      element.state = state;
-      state._element = element;
-      
-      runtime.stateManager.register(state, element);
-      state._init();
-      
-      state.addTodo('Task 1');
-      state.addTodo('Task 2');
-      state.addTodo('Task 3');
-      
-      setTimeout(() => {
-        runtime.performUpdate();
-        
-        // Complete first two
-        state.toggleTodo(state.todos[0].id);
-        state.toggleTodo(state.todos[1].id);
-        
-        setTimeout(() => {
-          runtime.performUpdate();
-          
-          // Filter active
-          state.setFilter('active');
-          expect(state.filteredTodos.length).toBe(1);
-          
-          // Filter completed
-          state.setFilter('completed');
-          expect(state.filteredTodos.length).toBe(2);
-          
-          // Filter all
-          state.setFilter('all');
-          expect(state.filteredTodos.length).toBe(3);
-          
-          done();
-        }, 10);
-      }, 10);
-    });
-    
-    test('should clear completed todos', (done) => {
-      const element = new TestElement('todos', runtime);
-      const state = new TodoListState();
-      
-      element.state = state;
-      state._element = element;
-      
-      runtime.stateManager.register(state, element);
-      state._init();
-      
-      state.addTodo('Task 1');
-      state.addTodo('Task 2');
-      state.addTodo('Task 3');
-      
-      setTimeout(() => {
-        runtime.performUpdate();
-        
-        // Complete some
-        state.toggleTodo(state.todos[0].id);
-        state.toggleTodo(state.todos[2].id);
-        
-        setTimeout(() => {
-          runtime.performUpdate();
-          
-          expect(state.stats.completed).toBe(2);
-          
-          state.clearCompleted();
-          
-          setTimeout(() => {
-            runtime.performUpdate();
-            
-            expect(state.todos.length).toBe(1);
-            expect(state.stats.completed).toBe(0);
-            
-            done();
-          }, 10);
-        }, 10);
-      }, 10);
-    });
-  });
-  
-  describe('Reactive State', () => {
-    test('should track reactive properties', (done) => {
-      const element = new TestElement('reactive', runtime);
-      const state = new ReactiveState();
-      
-      state.makeReactive('count', 0);
-      
-      element.state = state;
-      state._element = element;
-      
-      runtime.stateManager.register(state, element);
-      state._init();
-      
-      // Track access
-      runtime.stateManager.stateTracker.startTracking(element);
-      const value = state.count;
-      runtime.stateManager.stateTracker.stopTracking();
-      
-      expect(value).toBe(0);
-      
-      // Update should trigger rebuild
-      state.count = 5;
-      
-      setTimeout(() => {
-        runtime.performUpdate();
-        
-        expect(element.dirty).toBe(false); // Rebuilt
-        expect(state.count).toBe(5);
-        
-        done();
-      }, 10);
-    });
-  });
-  
-  describe('State Observer', () => {
-    test('should observe state changes', (done) => {
-      const element = new TestElement('observed', runtime);
-      const state = new CounterState();
-      const observer = new StateObserver();
-      
-      element.state = state;
-      state._element = element;
-      
-      runtime.stateManager.register(state, element);
-      state._init();
-      
-      let observed = false;
-      
-      observer.observe(state, (s, property, oldVal, newVal) => {
-        observed = true;
-        expect(property).toBe('count');
-        expect(oldVal).toBe(0);
-        expect(newVal).toBe(1);
-      });
-      
-      state.increment();
-      
-      setTimeout(() => {
-        runtime.performUpdate();
-        
-        observer.notify(state, 'count', 0, 1);
-        
-        expect(observed).toBe(true);
-        
-        done();
-      }, 10);
-    });
-  });
-  
-  describe('Performance', () => {
-    test('should handle many state updates efficiently', (done) => {
-      const element = new TestElement('perf', runtime);
-      const state = new CounterState();
-      
-      element.state = state;
-      state._element = element;
-      
-      runtime.stateManager.register(state, element);
-      state._init();
-      
-      const start = Date.now();
-      
-      // 100 rapid updates
-      for (let i = 0; i < 100; i++) {
-        state.increment();
-      }
-      
-      setTimeout(() => {
-        runtime.performUpdate();
-        
-        const duration = Date.now() - start;
-        
-        expect(state.count).toBe(100);
-        expect(element.buildCount).toBe(1); // Only one rebuild
-        expect(duration).toBeLessThan(100); // Fast
-        
-        done();
-      }, 10);
-    });
-    
-    test('should handle multiple components with state', (done) => {
-      const elements = [];
-      const states = [];
-      
-      for (let i = 0; i < 10; i++) {
-        const element = new TestElement(`comp_${i}`, runtime);
-        const state = new CounterState();
-        
-        element.state = state;
-        state._element = element;
-        
-        runtime.stateManager.register(state, element);
-        state._init();
-        
-        elements.push(element);
-        states.push(state);
-      }
-      
-      // Update all
-      states.forEach(state => state.increment());
-      
-      setTimeout(() => {
-        runtime.performUpdate();
-        
-        states.forEach(state => {
-          expect(state.count).toBe(1);
-        });
-        
-        elements.forEach(element => {
-          expect(element.buildCount).toBe(1);
-        });
-        
-        done();
-      }, 10);
-    });
-  });
-  
-  describe('Lifecycle', () => {
-    test('should call all lifecycle methods', () => {
-      const element = new TestElement('lifecycle', runtime);
-      const state = new CounterState();
-      
-      const calls = [];
-      
-      state.initState = () => calls.push('initState');
-      state.didMount = () => calls.push('didMount');
-      state.didUpdateWidget = (old) => calls.push('didUpdateWidget');
-      state.dispose = () => calls.push('dispose');
-      
-      element.state = state;
-      state._element = element;
-      
-      runtime.stateManager.register(state, element);
-      
-      state._init();
-      expect(calls).toContain('initState');
-      
-      state.didMount();
-      expect(calls).toContain('didMount');
-      
-      state.didUpdateWidget({});
-      expect(calls).toContain('didUpdateWidget');
-      
-      runtime.stateManager.unregister(state);
-      expect(calls).toContain('dispose');
-    });
-  });
-});
-
-// Run tests
-if (typeof module !== 'undefined' && require.main === module) {
-  console.log('Running State integration tests...');
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/test/state_tracker.test.js b/packages/flutterjs_engine/src/runtime/test/state_tracker.test.js
deleted file mode 100644
index c1a3361f..00000000
--- a/packages/flutterjs_engine/src/runtime/test/state_tracker.test.js
+++ /dev/null
@@ -1,980 +0,0 @@
-/**
- * StateTracker Comprehensive Test Suite
- * 
- * Tests all functionality including:
- * - Basic tracking operations
- * - Dependency recording and retrieval
- * - Element cleanup
- * - Nested tracking
- * - Performance monitoring
- * - Real-world scenarios
- */
-
-import { StateTracker } from '../src/state_tracker.js';
-
-// Mock Element
-class MockElement {
-  constructor(id) {
-    this.id = id;
-    this.mounted = true;
-    this.dirty = false;
-  }
-  
-  markNeedsBuild() {
-    this.dirty = true;
-  }
-}
-
-// Mock State
-class MockState {
-  constructor(id) {
-    this._stateId = id;
-    this.count = 0;
-    this.message = 'hello';
-  }
-}
-
-// Test utilities
-class TestRunner {
-  constructor() {
-    this.tests = [];
-    this.passed = 0;
-    this.failed = 0;
-  }
-
-  describe(name, fn) {
-    console.log(`\n📋 ${name}`);
-    fn();
-  }
-
-  it(name, fn) {
-    try {
-      fn();
-      console.log(`  ✅ ${name}`);
-      this.passed++;
-    } catch (error) {
-      console.log(`  ❌ ${name}`);
-      console.log(`     ${error.message}`);
-      this.failed++;
-    }
-  }
-
-  assert(condition, message) {
-    if (!condition) {
-      throw new Error(message || 'Assertion failed');
-    }
-  }
-
-  assertEqual(actual, expected, message) {
-    if (actual !== expected) {
-      throw new Error(
-        message || `Expected ${expected} but got ${actual}`
-      );
-    }
-  }
-
-  assertNull(value, message) {
-    if (value !== null) {
-      throw new Error(message || `Expected null but got ${value}`);
-    }
-  }
-
-  assertNotNull(value, message) {
-    if (value === null) {
-      throw new Error(message || 'Expected value to not be null');
-    }
-  }
-
-  assertTrue(value, message) {
-    if (value !== true) {
-      throw new Error(message || `Expected true but got ${value}`);
-    }
-  }
-
-  assertFalse(value, message) {
-    if (value !== false) {
-      throw new Error(message || `Expected false but got ${value}`);
-    }
-  }
-
-  assertThrows(fn, shouldThrow = true) {
-    let threw = false;
-    try {
-      fn();
-    } catch (error) {
-      threw = true;
-    }
-    
-    if (shouldThrow && !threw) {
-      throw new Error('Expected function to throw');
-    }
-  }
-
-  assertGreaterThan(actual, threshold, message) {
-    if (actual <= threshold) {
-      throw new Error(
-        message || `Expected ${actual} to be greater than ${threshold}`
-      );
-    }
-  }
-
-  summary() {
-    const total = this.passed + this.failed;
-    console.log(`\n${'='.repeat(50)}`);
-    console.log(`Tests: ${total} | ✅ Passed: ${this.passed} | ❌ Failed: ${this.failed}`);
-    console.log(`${'='.repeat(50)}\n`);
-
-    return this.failed === 0;
-  }
-}
-
-// Run tests
-function runTests() {
-  const test = new TestRunner();
-
-  test.describe('StateTracker: Initialization & Configuration', () => {
-    test.it('should create tracker with default config', () => {
-      const tracker = new StateTracker();
-      
-      test.assertTrue(tracker.config.enableTracking);
-      test.assertTrue(tracker.config.enableWeakRefs);
-      test.assertFalse(tracker.tracking);
-      test.assertNull(tracker.currentElement);
-      
-      tracker.clear();
-    });
-    
-    test.it('should create tracker with custom config', () => {
-      const customTracker = new StateTracker({
-        enableTracking: false,
-        maxDependenciesPerProperty: 500,
-        enableDebugLogging: true
-      });
-      
-      test.assertFalse(customTracker.config.enableTracking);
-      test.assertEqual(customTracker.config.maxDependenciesPerProperty, 500);
-      test.assertTrue(customTracker.config.enableDebugLogging);
-      
-      customTracker.clear();
-    });
-    
-    test.it('should initialize with empty dependencies', () => {
-      const tracker = new StateTracker();
-      
-      test.assertEqual(tracker.dependencies.size, 0);
-      test.assertEqual(tracker.elementDependencies.size, 0);
-      test.assertEqual(tracker.getTotalDependencies(), 0);
-      
-      tracker.clear();
-    });
-    
-    test.it('should initialize statistics', () => {
-      const tracker = new StateTracker();
-      const stats = tracker.getStats();
-      
-      test.assertEqual(stats.dependenciesTracked, 0);
-      test.assertEqual(stats.dependenciesCleared, 0);
-      test.assertEqual(stats.rebuildsTriggered, 0);
-      test.assertEqual(stats.trackingSessionsStarted, 0);
-      
-      tracker.clear();
-    });
-  });
-
-  test.describe('StateTracker: Basic Tracking Operations', () => {
-    test.it('should start tracking', () => {
-      const tracker = new StateTracker();
-      const element = new MockElement('el_1');
-      
-      tracker.startTracking(element);
-      
-      test.assertTrue(tracker.tracking);
-      test.assertEqual(tracker.currentElement, element);
-      test.assertEqual(tracker.stats.trackingSessionsStarted, 1);
-      
-      tracker.clear();
-    });
-    
-    test.it('should throw error when starting tracking without element', () => {
-      const tracker = new StateTracker();
-      
-      test.assertThrows(() => {
-        tracker.startTracking(null);
-      });
-      
-      tracker.clear();
-    });
-    
-    test.it('should stop tracking', () => {
-      const tracker = new StateTracker();
-      const element = new MockElement('el_1');
-      
-      tracker.startTracking(element);
-      tracker.stopTracking();
-      
-      test.assertFalse(tracker.tracking);
-      test.assertNull(tracker.currentElement);
-      test.assertEqual(tracker.stats.trackingSessionsEnded, 1);
-      
-      tracker.clear();
-    });
-    
-    test.it('should handle stop tracking without active tracking', () => {
-      const tracker = new StateTracker();
-      
-      test.assertThrows(() => {
-        tracker.stopTracking();
-      }, false);
-      
-      test.assertFalse(tracker.tracking);
-      tracker.clear();
-    });
-    
-    test.it('should check if tracking is active', () => {
-      const tracker = new StateTracker();
-      
-      test.assertFalse(tracker.isTracking());
-      
-      tracker.startTracking(new MockElement('el_1'));
-      test.assertTrue(tracker.isTracking());
-      
-      tracker.stopTracking();
-      test.assertFalse(tracker.isTracking());
-      
-      tracker.clear();
-    });
-    
-    test.it('should get current tracking element', () => {
-      const tracker = new StateTracker();
-      const element = new MockElement('el_1');
-      
-      test.assertNull(tracker.getCurrentElement());
-      
-      tracker.startTracking(element);
-      test.assertEqual(tracker.getCurrentElement(), element);
-      
-      tracker.clear();
-    });
-  });
-
-  test.describe('StateTracker: Dependency Recording', () => {
-    test.it('should record dependency', () => {
-      const tracker = new StateTracker();
-      const element = new MockElement('el_1');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element);
-      tracker.recordDependency(state, 'count');
-      tracker.stopTracking();
-      
-      test.assertEqual(tracker.stats.dependenciesTracked, 1);
-      test.assertEqual(tracker.getTotalDependencies(), 1);
-      
-      tracker.clear();
-    });
-    
-    test.it('should not record dependency when not tracking', () => {
-      const tracker = new StateTracker();
-      const state = new MockState('state_1');
-      
-      tracker.recordDependency(state, 'count');
-      
-      test.assertEqual(tracker.stats.dependenciesTracked, 0);
-      test.assertEqual(tracker.getTotalDependencies(), 0);
-      
-      tracker.clear();
-    });
-    
-    test.it('should record multiple dependencies for same element', () => {
-      const tracker = new StateTracker();
-      const element = new MockElement('el_1');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element);
-      tracker.recordDependency(state, 'count');
-      tracker.recordDependency(state, 'message');
-      tracker.stopTracking();
-      
-      test.assertEqual(tracker.stats.dependenciesTracked, 2);
-      
-      const elementDeps = tracker.getElementDependencies(element);
-      test.assertEqual(elementDeps.size, 2);
-      test.assertTrue(elementDeps.has('state_1.count'));
-      test.assertTrue(elementDeps.has('state_1.message'));
-      
-      tracker.clear();
-    });
-    
-    test.it('should record same property for multiple elements', () => {
-      const tracker = new StateTracker();
-      const element1 = new MockElement('el_1');
-      const element2 = new MockElement('el_2');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element1);
-      tracker.recordDependency(state, 'count');
-      tracker.stopTracking();
-      
-      tracker.startTracking(element2);
-      tracker.recordDependency(state, 'count');
-      tracker.stopTracking();
-      
-      const dependents = tracker.getDependents(state, 'count');
-      
-      test.assertEqual(dependents.size, 2);
-      test.assertTrue(dependents.has(element1));
-      test.assertTrue(dependents.has(element2));
-      
-      tracker.clear();
-    });
-    
-    test.it('should handle invalid dependency recording', () => {
-      const tracker = new StateTracker();
-      const element = new MockElement('el_1');
-      
-      tracker.startTracking(element);
-      
-      tracker.recordDependency(null, 'property');
-      tracker.recordDependency(new MockState('state_1'), null);
-      
-      test.assertEqual(tracker.getTotalDependencies(), 0);
-      
-      tracker.clear();
-    });
-    
-    test.it('should track peak dependencies', () => {
-      const tracker = new StateTracker();
-      const element = new MockElement('el_1');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element);
-      
-      for (let i = 0; i < 5; i++) {
-        tracker.recordDependency(state, `prop_${i}`);
-      }
-      
-      tracker.stopTracking();
-      
-      test.assertEqual(tracker.stats.peakDependencies, 5);
-      
-      tracker.clear();
-    });
-  });
-
-  test.describe('StateTracker: Dependency Retrieval', () => {
-    test.it('should get dependents for property', () => {
-      const tracker = new StateTracker();
-      const element1 = new MockElement('el_1');
-      const element2 = new MockElement('el_2');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element1);
-      tracker.recordDependency(state, 'count');
-      tracker.stopTracking();
-      
-      tracker.startTracking(element2);
-      tracker.recordDependency(state, 'count');
-      tracker.stopTracking();
-      
-      const dependents = tracker.getDependents(state, 'count');
-      
-      test.assertEqual(dependents.size, 2);
-      test.assertTrue(dependents.has(element1));
-      test.assertTrue(dependents.has(element2));
-      
-      tracker.clear();
-    });
-    
-    test.it('should return empty set for non-existent dependency', () => {
-      const tracker = new StateTracker();
-      const state = new MockState('state_1');
-      
-      const dependents = tracker.getDependents(state, 'nonExistent');
-      
-      test.assertEqual(dependents.size, 0);
-      
-      tracker.clear();
-    });
-    
-    test.it('should filter out unmounted elements', () => {
-      const tracker = new StateTracker();
-      const element1 = new MockElement('el_1');
-      const element2 = new MockElement('el_2');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element1);
-      tracker.recordDependency(state, 'count');
-      tracker.stopTracking();
-      
-      tracker.startTracking(element2);
-      tracker.recordDependency(state, 'count');
-      tracker.stopTracking();
-      
-      element1.mounted = false;
-      
-      const dependents = tracker.getDependents(state, 'count');
-      
-      test.assertEqual(dependents.size, 1);
-      test.assertTrue(dependents.has(element2));
-      test.assertFalse(dependents.has(element1));
-      
-      tracker.clear();
-    });
-    
-    test.it('should get element dependencies', () => {
-      const tracker = new StateTracker();
-      const element = new MockElement('el_1');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element);
-      tracker.recordDependency(state, 'count');
-      tracker.recordDependency(state, 'message');
-      tracker.stopTracking();
-      
-      const deps = tracker.getElementDependencies(element);
-      
-      test.assertEqual(deps.size, 2);
-      test.assertTrue(deps.has('state_1.count'));
-      test.assertTrue(deps.has('state_1.message'));
-      
-      tracker.clear();
-    });
-  });
-
-  test.describe('StateTracker: Dependency Notifications', () => {
-    test.it('should notify dependents of property change', () => {
-      const tracker = new StateTracker();
-      const element1 = new MockElement('el_1');
-      const element2 = new MockElement('el_2');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element1);
-      tracker.recordDependency(state, 'count');
-      tracker.stopTracking();
-      
-      tracker.startTracking(element2);
-      tracker.recordDependency(state, 'count');
-      tracker.stopTracking();
-      
-      const notified = tracker.notifyPropertyChange(state, 'count');
-      
-      test.assertEqual(notified, 2);
-      test.assertTrue(element1.dirty);
-      test.assertTrue(element2.dirty);
-      test.assertEqual(tracker.stats.rebuildsTriggered, 1);
-      test.assertEqual(tracker.stats.selectiveRebuilds, 2);
-      
-      tracker.clear();
-    });
-    
-    test.it('should not notify already dirty elements', () => {
-      const tracker = new StateTracker();
-      const element = new MockElement('el_1');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element);
-      tracker.recordDependency(state, 'count');
-      tracker.stopTracking();
-      
-      element.dirty = true;
-      
-      tracker.notifyPropertyChange(state, 'count');
-      
-      test.assertEqual(tracker.stats.selectiveRebuilds, 0);
-      
-      tracker.clear();
-    });
-    
-    test.it('should not notify unmounted elements', () => {
-      const tracker = new StateTracker();
-      const element = new MockElement('el_1');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element);
-      tracker.recordDependency(state, 'count');
-      tracker.stopTracking();
-      
-      element.mounted = false;
-      
-      const notified = tracker.notifyPropertyChange(state, 'count');
-      
-      test.assertEqual(notified, 0);
-      test.assertFalse(element.dirty);
-      
-      tracker.clear();
-    });
-    
-    test.it('should notify multiple property changes', () => {
-      const tracker = new StateTracker();
-      const element1 = new MockElement('el_1');
-      const element2 = new MockElement('el_2');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element1);
-      tracker.recordDependency(state, 'count');
-      tracker.recordDependency(state, 'message');
-      tracker.stopTracking();
-      
-      tracker.startTracking(element2);
-      tracker.recordDependency(state, 'count');
-      tracker.stopTracking();
-      
-      const notified = tracker.notifyMultipleChanges(state, ['count', 'message']);
-      
-      test.assertEqual(notified, 2);
-      test.assertTrue(element1.dirty);
-      test.assertTrue(element2.dirty);
-      
-      tracker.clear();
-    });
-    
-    test.it('should return 0 for empty property array', () => {
-      const tracker = new StateTracker();
-      const state = new MockState('state_1');
-      
-      const notified = tracker.notifyMultipleChanges(state, []);
-      
-      test.assertEqual(notified, 0);
-      
-      tracker.clear();
-    });
-  });
-
-  test.describe('StateTracker: Dependency Cleanup', () => {
-    test.it('should clear dependencies for element', () => {
-      const tracker = new StateTracker();
-      const element = new MockElement('el_1');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element);
-      tracker.recordDependency(state, 'count');
-      tracker.recordDependency(state, 'message');
-      tracker.stopTracking();
-      
-      test.assertEqual(tracker.getTotalDependencies(), 2);
-      
-      tracker.clearDependencies(element);
-      
-      test.assertEqual(tracker.getTotalDependencies(), 0);
-      test.assertEqual(tracker.getElementDependencies(element).size, 0);
-      test.assertEqual(tracker.stats.dependenciesCleared, 2);
-      
-      tracker.clear();
-    });
-    
-    test.it('should handle clearing non-existent element', () => {
-      const tracker = new StateTracker();
-      
-      test.assertThrows(() => {
-        tracker.clearDependencies(new MockElement('nonExistent'));
-      }, false);
-      
-      tracker.clear();
-    });
-    
-    test.it('should clear property dependencies', () => {
-      const tracker = new StateTracker();
-      const element1 = new MockElement('el_1');
-      const element2 = new MockElement('el_2');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element1);
-      tracker.recordDependency(state, 'count');
-      tracker.stopTracking();
-      
-      tracker.startTracking(element2);
-      tracker.recordDependency(state, 'count');
-      tracker.stopTracking();
-      
-      tracker.clearPropertyDependencies(state, 'count');
-      
-      const dependents = tracker.getDependents(state, 'count');
-      test.assertEqual(dependents.size, 0);
-      
-      tracker.clear();
-    });
-    
-    test.it('should clear all state dependencies', () => {
-      const tracker = new StateTracker();
-      const element = new MockElement('el_1');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element);
-      tracker.recordDependency(state, 'count');
-      tracker.recordDependency(state, 'message');
-      tracker.recordDependency(state, 'value');
-      tracker.stopTracking();
-      
-      tracker.clearStateDependencies(state);
-      
-      test.assertEqual(tracker.getDependents(state, 'count').size, 0);
-      test.assertEqual(tracker.getDependents(state, 'message').size, 0);
-      test.assertEqual(tracker.getDependents(state, 'value').size, 0);
-      
-      tracker.clear();
-    });
-    
-    test.it('should clear all dependencies', () => {
-      const tracker = new StateTracker();
-      const element = new MockElement('el_1');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element);
-      tracker.recordDependency(state, 'count');
-      tracker.stopTracking();
-      
-      tracker.clear();
-      
-      test.assertEqual(tracker.dependencies.size, 0);
-      test.assertEqual(tracker.elementDependencies.size, 0);
-      test.assertFalse(tracker.tracking);
-      test.assertNull(tracker.currentElement);
-    });
-  });
-
-  test.describe('StateTracker: Nested Tracking', () => {
-    test.it('should support nested tracking', () => {
-      const tracker = new StateTracker();
-      const element1 = new MockElement('el_1');
-      const element2 = new MockElement('el_2');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element1);
-      test.assertEqual(tracker.currentElement, element1);
-      
-      tracker.startTracking(element2);
-      test.assertEqual(tracker.currentElement, element2);
-      
-      tracker.recordDependency(state, 'count');
-      
-      tracker.stopTracking();
-      test.assertEqual(tracker.currentElement, element1);
-      
-      tracker.stopTracking();
-      test.assertNull(tracker.currentElement);
-      
-      const dependents = tracker.getDependents(state, 'count');
-      test.assertTrue(dependents.has(element2));
-      test.assertFalse(dependents.has(element1));
-      
-      tracker.clear();
-    });
-    
-    test.it('should maintain tracking stack correctly', () => {
-      const tracker = new StateTracker();
-      
-      tracker.startTracking(new MockElement('el_1'));
-      tracker.startTracking(new MockElement('el_2'));
-      tracker.startTracking(new MockElement('el_3'));
-      
-      test.assertEqual(tracker.trackingStack.length, 2);
-      
-      tracker.stopTracking();
-      test.assertEqual(tracker.trackingStack.length, 1);
-      
-      tracker.stopTracking();
-      test.assertEqual(tracker.trackingStack.length, 0);
-      
-      tracker.stopTracking();
-      test.assertEqual(tracker.trackingStack.length, 0);
-      
-      tracker.clear();
-    });
-  });
-
-  test.describe('StateTracker: Statistics & Reporting', () => {
-    test.it('should provide accurate statistics', () => {
-      const tracker = new StateTracker();
-      const element = new MockElement('el_1');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element);
-      tracker.recordDependency(state, 'count');
-      tracker.recordDependency(state, 'message');
-      tracker.stopTracking();
-      
-      const stats = tracker.getStats();
-      
-      test.assertEqual(stats.dependenciesTracked, 2);
-      test.assertEqual(stats.totalDependencies, 2);
-      test.assertEqual(stats.uniqueDependencyKeys, 2);
-      test.assertEqual(stats.trackedElements, 1);
-      test.assertEqual(stats.trackingSessionsStarted, 1);
-      test.assertEqual(stats.trackingSessionsEnded, 1);
-      
-      tracker.clear();
-    });
-    
-    test.it('should get dependency tree', () => {
-      const tracker = new StateTracker();
-      const element1 = new MockElement('el_1');
-      const element2 = new MockElement('el_2');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element1);
-      tracker.recordDependency(state, 'count');
-      tracker.stopTracking();
-      
-      tracker.startTracking(element2);
-      tracker.recordDependency(state, 'count');
-      tracker.stopTracking();
-      
-      const tree = tracker.getDependencyTree();
-      
-      test.assertNotNull(tree['state_1.count']);
-      test.assertEqual(tree['state_1.count'].length, 2);
-      test.assertEqual(tree['state_1.count'][0].id, 'el_1');
-      test.assertEqual(tree['state_1.count'][1].id, 'el_2');
-      
-      tracker.clear();
-    });
-    
-    test.it('should get element dependency map', () => {
-      const tracker = new StateTracker();
-      const element = new MockElement('el_1');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element);
-      tracker.recordDependency(state, 'count');
-      tracker.recordDependency(state, 'message');
-      tracker.stopTracking();
-      
-      const map = tracker.getElementDependencyMap();
-      
-      test.assertNotNull(map['el_1']);
-      test.assertEqual(map['el_1'].length, 2);
-      test.assertTrue(map['el_1'].includes('state_1.count'));
-      test.assertTrue(map['el_1'].includes('state_1.message'));
-      
-      tracker.clear();
-    });
-    
-    test.it('should get detailed report', () => {
-      const tracker = new StateTracker();
-      const element = new MockElement('el_1');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element);
-      tracker.recordDependency(state, 'count');
-      tracker.stopTracking();
-      
-      const report = tracker.getDetailedReport();
-      
-      test.assertNotNull(report.stats);
-      test.assertNotNull(report.dependencyTree);
-      test.assertNotNull(report.elementDependencies);
-      test.assertNotNull(report.config);
-      test.assertNotNull(report.timestamp);
-      
-      tracker.clear();
-    });
-    
-    test.it('should reset statistics', () => {
-      const tracker = new StateTracker();
-      const element = new MockElement('el_1');
-      const state = new MockState('state_1');
-      
-      tracker.startTracking(element);
-      tracker.recordDependency(state, 'count');
-      tracker.stopTracking();
-      
-      tracker.resetStats();
-      
-      const stats = tracker.getStats();
-      
-      test.assertEqual(stats.dependenciesTracked, 0);
-      test.assertEqual(stats.trackingSessionsStarted, 0);
-      test.assertEqual(stats.totalDependencies, 1);
-      
-      tracker.clear();
-    });
-  });
-
-  test.describe('StateTracker: Configuration & Debug', () => {
-    test.it('should enable/disable tracking', () => {
-      const tracker = new StateTracker();
-      
-      tracker.setTrackingEnabled(false);
-      
-      test.assertFalse(tracker.config.enableTracking);
-      
-      const element = new MockElement('el_1');
-      tracker.startTracking(element);
-      
-      test.assertFalse(tracker.tracking);
-      
-      tracker.clear();
-    });
-    
-    test.it('should maintain debug log', () => {
-      const debugTracker = new StateTracker({
-        enableDebugLogging: true
-      });
-      
-      const element = new MockElement('el_1');
-      debugTracker.startTracking(element);
-      debugTracker.stopTracking();
-      
-      const log = debugTracker.getDebugLog();
-      
-      test.assertGreaterThan(log.length, 0);
-      test.assertNotNull(log[0].message);
-      test.assertNotNull(log[0].timestamp);
-      
-      debugTracker.clear();
-    });
-    
-    test.it('should clear debug log', () => {
-      const debugTracker = new StateTracker({
-        enableDebugLogging: true
-      });
-      
-      debugTracker.startTracking(new MockElement('el_1'));
-      
-      test.assertGreaterThan(debugTracker.getDebugLog().length, 0);
-      
-      debugTracker.clearDebugLog();
-      
-      test.assertEqual(debugTracker.getDebugLog().length, 0);
-      
-      debugTracker.clear();
-    });
-  });
-
-  test.describe('StateTracker: Real-World Scenarios', () => {
-    test.it('should handle counter app scenario', () => {
-      const tracker = new StateTracker();
-      const counterElement = new MockElement('counter');
-      const counterState = new MockState('counter_state');
-      
-      tracker.startTracking(counterElement);
-      tracker.recordDependency(counterState, 'count');
-      tracker.stopTracking();
-      
-      const notified = tracker.notifyPropertyChange(counterState, 'count');
-      
-      test.assertEqual(notified, 1);
-      test.assertTrue(counterElement.dirty);
-      
-      tracker.clear();
-    });
-    
-    test.it('should handle form with multiple fields', () => {
-      const tracker = new StateTracker();
-      const nameElement = new MockElement('name_field');
-      const emailElement = new MockElement('email_field');
-      const formElement = new MockElement('form');
-      const formState = new MockState('form_state');
-      
-      tracker.startTracking(nameElement);
-      tracker.recordDependency(formState, 'name');
-      tracker.stopTracking();
-      
-      tracker.startTracking(emailElement);
-      tracker.recordDependency(formState, 'email');
-      tracker.stopTracking();
-      
-      tracker.startTracking(formElement);
-      tracker.recordDependency(formState, 'name');
-      tracker.recordDependency(formState, 'email');
-      tracker.stopTracking();
-      
-      const nameNotified = tracker.notifyPropertyChange(formState, 'name');
-      
-      test.assertEqual(nameNotified, 2);
-      test.assertTrue(nameElement.dirty);
-      test.assertTrue(formElement.dirty);
-      test.assertFalse(emailElement.dirty);
-      
-      tracker.clear();
-    });
-    
-    test.it('should handle todo list filtering', () => {
-      const tracker = new StateTracker();
-      const listElement = new MockElement('todo_list');
-      const filterElement = new MockElement('filter_controls');
-      const todosState = new MockState('todos_state');
-      
-      tracker.startTracking(listElement);
-      tracker.recordDependency(todosState, 'todos');
-      tracker.recordDependency(todosState, 'filter');
-      tracker.stopTracking();
-      
-      tracker.startTracking(filterElement);
-      tracker.recordDependency(todosState, 'filter');
-      tracker.stopTracking();
-      
-      tracker.notifyPropertyChange(todosState, 'todos');
-      
-      test.assertTrue(listElement.dirty);
-      test.assertFalse(filterElement.dirty);
-      
-      listElement.dirty = false;
-      
-      tracker.notifyPropertyChange(todosState, 'filter');
-      
-      test.assertTrue(listElement.dirty);
-      test.assertTrue(filterElement.dirty);
-      
-      tracker.clear();
-    });
-    
-    test.it('should handle complex widget tree', () => {
-      const tracker = new StateTracker();
-      const headerElement = new MockElement('header');
-      const bodyElement = new MockElement('body');
-      const footerElement = new MockElement('footer');
-      const appState = new MockState('app_state');
-      
-      tracker.startTracking(headerElement);
-      tracker.recordDependency(appState, 'user');
-      tracker.stopTracking();
-      
-      tracker.startTracking(bodyElement);
-      tracker.recordDependency(appState, 'content');
-      tracker.stopTracking();
-      
-      tracker.startTracking(footerElement);
-      tracker.recordDependency(appState, 'meta');
-      tracker.stopTracking();
-      
-      tracker.notifyPropertyChange(appState, 'content');
-      
-      test.assertFalse(headerElement.dirty);
-      test.assertTrue(bodyElement.dirty);
-      test.assertFalse(footerElement.dirty);
-      
-      tracker.clear();
-    });
-    
-    test.it('should handle performance with many dependencies', () => {
-      const tracker = new StateTracker();
-      const state = new MockState('state_1');
-      const elements = [];
-      
-      for (let i = 0; i < 100; i++) {
-        const element = new MockElement(`el_${i}`);
-        elements.push(element);
-        
-        tracker.startTracking(element);
-        for (let j = 0; j < 10; j++) {
-          tracker.recordDependency(state, `prop_${j}`);
-        }
-        tracker.stopTracking();
-      }
-      
-      test.assertEqual(tracker.getTotalDependencies(), 1000);
-      
-      const notified = tracker.notifyPropertyChange(state, 'prop_0');
-      
-      test.assertEqual(notified, 100);
-      
-      tracker.clear();
-    });
-  });
-
-  return test.summary();
-}
-
-// Run
-runTests();
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/test/update_batcher.test.js b/packages/flutterjs_engine/src/runtime/test/update_batcher.test.js
deleted file mode 100644
index fc7eeaed..00000000
--- a/packages/flutterjs_engine/src/runtime/test/update_batcher.test.js
+++ /dev/null
@@ -1,555 +0,0 @@
-/**
- * Update Batcher Tests
- * 
- * Test suite for UpdateBatcher class
- * Tests batching behavior, scheduling, and performance
- */
-
-
-import {UpdateBatcher} from "../src/update_batcher.js";
-
-// Mock runtime
-class MockRuntime {
-  constructor() {
-    this.config = { debugMode: false };
-  }
-}
-
-// Mock element
-class MockElement {
-  constructor(id = 'el_1') {
-    this.id = id;
-    this.mounted = true;
-    this.dirty = false;
-    this.depth = 0;
-    this.state = new MockState();
-  }
-  
-  markNeedsBuild() {
-    this.dirty = true;
-  }
-}
-
-// Mock state
-class MockState {
-  constructor() {
-    this.count = 0;
-    this.updates = [];
-  }
-}
-
-// Test utilities
-class TestRunner {
-  constructor() {
-    this.tests = [];
-    this.passed = 0;
-    this.failed = 0;
-  }
-  
-  describe(name, fn) {
-    console.log(`\n📋 ${name}`);
-    fn();
-  }
-  
-  it(name, fn) {
-    this.tests.push({ name, fn });
-    
-    try {
-      fn();
-      console.log(`  ✅ ${name}`);
-      this.passed++;
-    } catch (error) {
-      console.log(`  ❌ ${name}`);
-      console.log(`     ${error.message}`);
-      this.failed++;
-    }
-  }
-  
-  assert(condition, message) {
-    if (!condition) {
-      throw new Error(message || 'Assertion failed');
-    }
-  }
-  
-  assertEqual(actual, expected, message) {
-    if (actual !== expected) {
-      throw new Error(
-        message || `Expected ${expected} but got ${actual}`
-      );
-    }
-  }
-  
-  summary() {
-    const total = this.passed + this.failed;
-    console.log(`\n${'='.repeat(50)}`);
-    console.log(`Tests: ${total} | ✅ Passed: ${this.passed} | ❌ Failed: ${this.failed}`);
-    console.log(`${'='.repeat(50)}\n`);
-    
-    return this.failed === 0;
-  }
-}
-
-// Run tests
-async function runTests() {
-  const test = new TestRunner();
-  
-  // Test 1: Basic initialization
-  test.describe('UpdateBatcher: Initialization', () => {
-    test.it('should create with runtime', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      
-      test.assert(batcher !== null, 'Batcher should be created');
-      test.assertEqual(batcher.stats.totalBatches, 0, 'Should start with 0 batches');
-    });
-    
-    test.it('should throw without runtime', () => {
-      try {
-        new UpdateBatcher(null);
-        throw new Error('Should have thrown');
-      } catch (error) {
-        test.assert(
-          error.message.includes('Runtime'),
-          'Should throw error mentioning runtime'
-        );
-      }
-    });
-    
-    test.it('should have default config', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      
-      test.assert(batcher.config.enableBatching === true, 'Batching should be enabled');
-      test.assert(batcher.config.flushOnMicrotask === true, 'Microtask flush should be enabled');
-    });
-  });
-  
-  // Test 2: Queueing updates
-  test.describe('UpdateBatcher: Queueing Updates', () => {
-    test.it('should queue single update', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      const element = new MockElement();
-      
-      const updateFn = function() { this.count++; };
-      batcher.queueUpdate(element, updateFn);
-      
-      test.assertEqual(
-        batcher.getPendingCount(element),
-        1,
-        'Should have 1 pending update'
-      );
-    });
-    
-    test.it('should queue multiple updates for same element', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      const element = new MockElement();
-      
-      batcher.queueUpdate(element, function() { this.count++; });
-      batcher.queueUpdate(element, function() { this.count++; });
-      batcher.queueUpdate(element, function() { this.count++; });
-      
-      test.assertEqual(
-        batcher.getPendingCount(element),
-        3,
-        'Should have 3 pending updates'
-      );
-    });
-    
-    test.it('should queue updates for multiple elements', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      const el1 = new MockElement('el_1');
-      const el2 = new MockElement('el_2');
-      const el3 = new MockElement('el_3');
-      
-      batcher.queueUpdate(el1, function() { this.count++; });
-      batcher.queueUpdate(el2, function() { this.count++; });
-      batcher.queueUpdate(el3, function() { this.count++; });
-      
-      test.assertEqual(
-        batcher.getBatchedElements().length,
-        3,
-        'Should have 3 batched elements'
-      );
-    });
-    
-    test.it('should throw on invalid element', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      
-      try {
-        batcher.queueUpdate(null, () => {});
-        throw new Error('Should have thrown');
-      } catch (error) {
-        test.assert(
-          error.message.includes('Element'),
-          'Should throw about element'
-        );
-      }
-    });
-    
-    test.it('should throw on invalid update function', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      const element = new MockElement();
-      
-      try {
-        batcher.queueUpdate(element, 'not a function');
-        throw new Error('Should have thrown');
-      } catch (error) {
-        test.assert(
-          error.message.includes('function'),
-          'Should throw about function'
-        );
-      }
-    });
-  });
-  
-  // Test 3: Scheduling flushes
-  test.describe('UpdateBatcher: Scheduling', () => {
-    test.it('should schedule flush once', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      const element = new MockElement();
-      
-      batcher.queueUpdate(element, function() { this.count++; });
-      
-      test.assert(
-        batcher.isScheduled(),
-        'Should have scheduled flush'
-      );
-    });
-    
-    test.it('should not schedule multiple times', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      const element = new MockElement();
-      
-      batcher.queueUpdate(element, function() { this.count++; });
-      batcher.queueUpdate(element, function() { this.count++; });
-      batcher.queueUpdate(element, function() { this.count++; });
-      
-      test.assertEqual(
-        batcher.stats.flushScheduledCount,
-        1,
-        'Should only schedule once'
-      );
-    });
-    
-    test.it('should record scheduled count', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      const el1 = new MockElement('el_1');
-      const el2 = new MockElement('el_2');
-      
-      batcher.queueUpdate(el1, function() { this.count++; });
-      batcher.forceFlush();
-      
-      batcher.queueUpdate(el2, function() { this.count++; });
-      batcher.forceFlush();
-      
-      test.assertEqual(
-        batcher.stats.flushScheduledCount,
-        2,
-        'Should record 2 schedule calls'
-      );
-    });
-  });
-  
-  // Test 4: Flushing updates
-  test.describe('UpdateBatcher: Flushing', () => {
-    test.it('should apply updates during flush', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      const element = new MockElement();
-      
-      batcher.queueUpdate(element, function() { this.count++; });
-      batcher.queueUpdate(element, function() { this.count++; });
-      
-      batcher.forceFlush();
-      
-      test.assertEqual(
-        element.state.count,
-        2,
-        'State should be updated to 2'
-      );
-    });
-    
-    test.it('should mark element dirty', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      const element = new MockElement();
-      
-      element.dirty = false;
-      batcher.queueUpdate(element, function() { this.count++; });
-      batcher.forceFlush();
-      
-      test.assert(
-        element.dirty === true,
-        'Element should be marked dirty'
-      );
-    });
-    
-    test.it('should clear pending updates', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      const element = new MockElement();
-      
-      batcher.queueUpdate(element, function() { this.count++; });
-      test.assertEqual(batcher.getPendingCount(), 1, 'Should have 1 pending');
-      
-      batcher.forceFlush();
-      test.assertEqual(batcher.getPendingCount(), 0, 'Should have 0 pending after flush');
-    });
-    
-    test.it('should update statistics', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      const el1 = new MockElement('el_1');
-      const el2 = new MockElement('el_2');
-      
-      batcher.queueUpdate(el1, function() { this.count++; });
-      batcher.queueUpdate(el1, function() { this.count++; });
-      batcher.queueUpdate(el2, function() { this.count++; });
-      
-      batcher.forceFlush();
-      
-      test.assertEqual(batcher.stats.totalBatches, 1, 'Should have 1 batch');
-      test.assertEqual(batcher.stats.totalUpdates, 3, 'Should have 3 total updates');
-      test.assertEqual(batcher.stats.updatesInLastBatch, 3, 'Last batch had 3 updates');
-    });
-    
-    test.it('should track largest batch', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      const el1 = new MockElement('el_1');
-      const el2 = new MockElement('el_2');
-      
-      // First batch: 2 updates
-      batcher.queueUpdate(el1, function() { this.count++; });
-      batcher.queueUpdate(el1, function() { this.count++; });
-      batcher.forceFlush();
-      
-      // Second batch: 5 updates
-      for (let i = 0; i < 5; i++) {
-        batcher.queueUpdate(el2, function() { this.count++; });
-      }
-      batcher.forceFlush();
-      
-      test.assertEqual(
-        batcher.stats.largestBatchSize,
-        5,
-        'Largest batch should be 5'
-      );
-    });
-    
-    test.it('should skip unmounted elements', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      const element = new MockElement();
-      element.mounted = false;
-      
-      batcher.queueUpdate(element, function() { this.count++; });
-      batcher.forceFlush();
-      
-      test.assertEqual(
-        element.state.count,
-        0,
-        'Unmounted element should not be updated'
-      );
-    });
-    
-    test.it('should skip elements without state', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      const element = new MockElement();
-      element.state = null;
-      
-      batcher.queueUpdate(element, function() { this.count++; });
-      batcher.forceFlush();
-      
-      // Should not throw, just skip
-      test.assert(true, 'Should skip without error');
-    });
-  });
-  
-  // Test 5: Batching behavior
-  test.describe('UpdateBatcher: Batching', () => {
-    test.it('should handle disabled batching', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      batcher.setBatchingEnabled(false);
-      
-      const element = new MockElement();
-      batcher.queueUpdate(element, function() { this.count++; });
-      
-      test.assertEqual(
-        element.state.count,
-        1,
-        'Should update immediately'
-      );
-      test.assert(
-        !batcher.isScheduled(),
-        'Should not schedule'
-      );
-    });
-    
-    test.it('should enable/disable batching', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      
-      test.assert(batcher.config.enableBatching === true, 'Initially enabled');
-      
-      batcher.setBatchingEnabled(false);
-      test.assert(batcher.config.enableBatching === false, 'Should be disabled');
-      
-      batcher.setBatchingEnabled(true);
-      test.assert(batcher.config.enableBatching === true, 'Should be enabled');
-    });
-  });
-  
-  // Test 6: Clearing updates
-  test.describe('UpdateBatcher: Clearing', () => {
-    test.it('should clear all pending updates', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      const el1 = new MockElement('el_1');
-      const el2 = new MockElement('el_2');
-      
-      batcher.queueUpdate(el1, function() { this.count++; });
-      batcher.queueUpdate(el2, function() { this.count++; });
-      
-      test.assertEqual(batcher.getPendingCount(), 2, 'Should have 2 pending');
-      
-      batcher.clear();
-      
-      test.assertEqual(batcher.getPendingCount(), 0, 'Should have 0 after clear');
-    });
-    
-    test.it('should clear specific element', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      const el1 = new MockElement('el_1');
-      const el2 = new MockElement('el_2');
-      
-      batcher.queueUpdate(el1, function() { this.count++; });
-      batcher.queueUpdate(el2, function() { this.count++; });
-      
-      batcher.clear(el1);
-      
-      test.assertEqual(batcher.getPendingCount(el1), 0, 'el1 should be cleared');
-      test.assertEqual(batcher.getPendingCount(el2), 1, 'el2 should still have 1');
-    });
-  });
-  
-  // Test 7: Statistics and reporting
-  test.describe('UpdateBatcher: Statistics', () => {
-    test.it('should track statistics', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      const el1 = new MockElement('el_1');
-      const el2 = new MockElement('el_2');
-      
-      batcher.queueUpdate(el1, function() { this.count++; });
-      batcher.queueUpdate(el1, function() { this.count++; });
-      batcher.queueUpdate(el2, function() { this.count++; });
-      batcher.forceFlush();
-      
-      const stats = batcher.getStats();
-      
-      test.assertEqual(stats.totalBatches, 1, 'Should record batch');
-      test.assertEqual(stats.totalUpdates, 3, 'Should record updates');
-      test.assertEqual(stats.updatesInLastBatch, 3, 'Should record last batch size');
-    });
-    
-    test.it('should generate detailed report', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      const element = new MockElement();
-      
-      batcher.queueUpdate(element, function() { this.count++; });
-      
-      const report = batcher.getDetailedReport();
-      
-      test.assert(report.stats !== undefined, 'Should have stats');
-      test.assert(report.batchedElements !== undefined, 'Should have batchedElements');
-      test.assert(report.config !== undefined, 'Should have config');
-      test.assert(report.timestamp !== undefined, 'Should have timestamp');
-    });
-    
-    test.it('should reset statistics', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      const element = new MockElement();
-      
-      batcher.queueUpdate(element, function() { this.count++; });
-      batcher.forceFlush();
-      
-      test.assertEqual(batcher.stats.totalBatches, 1, 'Should have batch before reset');
-      
-      batcher.resetStats();
-      
-      test.assertEqual(batcher.stats.totalBatches, 0, 'Should be 0 after reset');
-      test.assertEqual(batcher.stats.totalUpdates, 0, 'Should be 0 after reset');
-    });
-  });
-  
-  // Test 8: Edge cases
-  test.describe('UpdateBatcher: Edge Cases', () => {
-    test.it('should handle empty flush', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      
-      batcher.forceFlush();
-      
-      test.assertEqual(batcher.stats.totalBatches, 0, 'Should not count empty flush');
-    });
-    
-    test.it('should handle error in update function', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      const element = new MockElement();
-      
-      // This should not throw
-      batcher.queueUpdate(element, function() {
-        throw new Error('Update error');
-      });
-      batcher.queueUpdate(element, function() { this.count++; });
-      
-      batcher.forceFlush();
-      
-      // Second update should still execute
-      test.assertEqual(element.state.count, 1, 'Should continue after error');
-    });
-    
-    test.it('should handle max batch size warning', () => {
-      const runtime = new MockRuntime();
-      const batcher = new UpdateBatcher(runtime);
-      batcher.config.maxBatchSize = 3;
-      const element = new MockElement();
-      
-      for (let i = 0; i < 5; i++) {
-        batcher.queueUpdate(element, function() { this.count++; });
-      }
-      
-      test.assertEqual(
-        batcher.getPendingCount(element),
-        5,
-        'Should queue all updates'
-      );
-    });
-  });
-  
-  // Print summary
-  return test.summary();
-}
-
-// Run async tests
-runTests().then(success => {
-  process.exit(success ? 0 : 1);
-}).catch(error => {
-  console.error('Test runner failed:', error);
-  process.exit(1);
-});
diff --git a/packages/flutterjs_engine/bin/commands/source_map_generator.js b/packages/flutterjs_engine/src/source_map_generator.js
similarity index 100%
rename from packages/flutterjs_engine/bin/commands/source_map_generator.js
rename to packages/flutterjs_engine/src/source_map_generator.js
diff --git a/packages/flutterjs_engine/src/vdom/README.md b/packages/flutterjs_engine/src/vdom/README.md
deleted file mode 100644
index 582f98a6..00000000
--- a/packages/flutterjs_engine/src/vdom/README.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# @flutterjs/vdom
-
-**Package**: `@flutterjs/vdom`  
-**Description**: Virtual DOM implementation optimized for FlutterJS.
-
----
-
-## Overview
-
-The Virtual DOM (VDOM) package is responsible for converting the high-level Widget/Element descriptions into actual HTML DOM nodes. It implements a diffing algorithm to minimize DOM manipulations.
-
-## Core Components
-
-### 1. VNode
-`vnode.js`: A lightweight JSON representation of a DOM node.
-```javascript
-{
-  tag: 'div',
-  props: { className: 'container' },
-  children: [...]
-}
-```
-
-### 2. Renderer
-`vnode_renderer.js`: Converts VNodes to actual DOM elements (`document.createElement`).
-
-### 3. Differ (Reconciliation)
-`vnode_differ.js`: Compares two VNode trees and produces a list of patches (instructions).
-
-### 4. Patch Applier
-`patch_applier.js`: Applies the patches to the real DOM.
-- `INSERT`
-- `UPDATE`
-- `REMOVE`
-- `REORDER`
-
-## Server-Side Rendering (SSR)
-`ssr_renderer.js`: Implements `renderToString()` for generating HTML on the server.
-
-## Style Conversion
-`style_converter.js`: Converts Flutter-like style objects to CSS strings.
-
-## Usage
-
-This package is used by `@flutterjs/runtime` to render its Element tree.
diff --git a/packages/flutterjs_engine/src/vdom/build.js b/packages/flutterjs_engine/src/vdom/build.js
deleted file mode 100644
index 6bad8a8b..00000000
--- a/packages/flutterjs_engine/src/vdom/build.js
+++ /dev/null
@@ -1,34 +0,0 @@
-// build.js
-import esbuild from 'esbuild';
-import { readdirSync } from 'fs';
-import { join, extname, basename } from 'path';
-
-const srcDir = 'src';
-const outDir = 'dist';
-
-// Get all .js files in src/ (non-recursive — add glob if you have subfolders later)
-const entryPoints = readdirSync(srcDir)
-  .filter(file => extname(file) === '.js')
-  .map(file => join(srcDir, file));
-
-esbuild
-  .build({
-    entryPoints,
-    outdir: outDir,
-    bundle: false,              // Keep false — we want independent files
-    minify: true,
-    platform: 'node',
-    target: ['node18'],
-    format: 'esm',
-    sourcemap: true,
-    // REMOVED: external — not allowed with bundle: false
-    // If you later need to exclude Node builtins, they are automatically external anyway!
-  })
-  .then(() => {
-    console.log(`Build successful! ${entryPoints.length} files built to ${outDir}/`);
-    console.log('Built files:', entryPoints.map(p => basename(p)).join(', '));
-  })
-  .catch((error) => {
-    console.error('Build failed:', error);
-    process.exit(1);
-  });
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/vdom/dist/hydrator.js b/packages/flutterjs_engine/src/vdom/dist/hydrator.js
deleted file mode 100644
index ee15e5ba..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/hydrator.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{VNodeRenderer as l}from"./vnode_renderer.js";class u{static hydrate(e,t,i=null){if(!e)throw new Error("Root element is required for hydration");if(!t)throw new Error("VNode tree is required for hydration");return i||(i=this.loadHydrationData()),i&&!this.validateHydrationData(i)&&(console.warn("Invalid hydration data, proceeding without it"),i=null),this.matchDOMToVNode(e,t),this.attachEventListeners(e,t,i),this.restoreRefs(e,t,i),this.initializeStateBindings(e,t,i),e.setAttribute("data-hydrated","true"),e._hydrated=!0,this.cleanupHydrationData(),e}static matchDOMToVNode(e,t,i="0"){!e||!t||typeof t=="string"||typeof t=="number"||t.tag&&e.nodeType===Node.ELEMENT_NODE&&(e._vnode=t,t._element=e,t._path=i,e.tagName.toLowerCase()!==t.tag.toLowerCase()&&console.warn(`Hydration mismatch at path ${i}: expected <${t.tag}>, got <${e.tagName.toLowerCase()}>`),t.children&&t.children.length>0&&this.matchChildren(e,t.children,i))}static matchChildren(e,t,i){const s=Array.from(e.childNodes);let a=0,r=0;for(;r<t.length&&a<s.length;){const n=s[a],c=t[r];if(n.nodeType===Node.TEXT_NODE&&!n.textContent.trim()){a++;continue}if(c==null){r++;continue}const f=`${i}.${r}`;if(typeof c=="string"||typeof c=="number"){if(n.nodeType===Node.TEXT_NODE){const h=String(c),y=n.textContent;h!==y&&console.warn(`Text content mismatch at ${f}: expected "${h}", got "${y}"`)}a++,r++;continue}if(c.tag&&n.nodeType===Node.ELEMENT_NODE){this.matchDOMToVNode(n,c,f),a++,r++;continue}a++,r++}}static attachEventListeners(e,t,i){!t||typeof t!="object"||!t.tag||(t._element&&t.events&&Object.keys(t.events).length>0&&l.applyEvents(t._element,t.events),t.children&&Array.isArray(t.children)&&t.children.forEach(s=>{this.attachEventListeners(e,s,i)}))}static restoreRefs(e,t,i){if(!(!t||typeof t!="object"||!t.tag)){if(t._element&&t.ref&&typeof t.ref=="function")try{t.ref(t._element)}catch(s){console.error("Error calling ref callback:",s)}t.children&&Array.isArray(t.children)&&t.children.forEach(s=>{this.restoreRefs(e,s,i)})}}static initializeStateBindings(e,t,i){!t||typeof t!="object"||!t.tag||(t.isStateBinding&&t._element&&(e._stateBindings||(e._stateBindings=[]),e._stateBindings.push({element:t._element,widgetId:t.statefulWidgetId,property:t.stateProperty,updateFn:t.updateFn})),t.children&&Array.isArray(t.children)&&t.children.forEach(s=>{this.initializeStateBindings(e,s,i)}))}static loadHydrationData(){if(typeof document>"u")return null;const e=document.getElementById("__FLUTTERJS_HYDRATION_DATA__");if(!e)return null;try{return JSON.parse(e.textContent)}catch(t){return console.error("Failed to parse hydration data:",t),null}}static validateHydrationData(e){if(!e||typeof e!="object"||!e.version)return!1;const t=["widgets","stateBindings","events","refs"];for(const i of t)if(!Array.isArray(e[i]))return!1;return!0}static cleanupHydrationData(){if(typeof document>"u")return;const e=document.getElementById("__FLUTTERJS_HYDRATION_DATA__");e&&e.parentNode&&e.parentNode.removeChild(e)}static isHydrated(e){return e&&(e._hydrated===!0||e.hasAttribute("data-hydrated"))}static generateHydrationData(e){const t={version:"1.0.0",timestamp:Date.now(),widgets:[],stateBindings:[],events:[],refs:[]};return this.collectHydrationData(e,t,"0"),t}static collectHydrationData(e,t,i){!e||typeof e!="object"||!e.tag||(e.metadata&&e.metadata.widgetType&&t.widgets.push({path:i,type:e.metadata.widgetType,props:e.metadata.flutterProps||{},key:e.key}),e.isStateBinding&&t.stateBindings.push({path:i,widgetId:e.statefulWidgetId,property:e.stateProperty}),e.events&&Object.keys(e.events).length>0&&t.events.push({path:i,events:Object.keys(e.events)}),e.ref&&t.refs.push({path:i,hasRef:!0}),e.children&&Array.isArray(e.children)&&e.children.forEach((s,a)=>{s&&typeof s=="object"&&s.tag&&this.collectHydrationData(s,t,`${i}.${a}`)}))}static hydratePartial(e,t){if(!e||!t)throw new Error("Element and VNode required for partial hydration");return this.matchDOMToVNode(e,t),this.attachEventListeners(e,t,null),this.restoreRefs(e,t,null),this.initializeStateBindings(e,t,null),e.setAttribute("data-hydrated","true"),e._hydrated=!0,e}static dehydrate(e){e&&(l.cleanupEventListeners(e),e.removeAttribute("data-hydrated"),delete e._hydrated,delete e._stateBindings,Array.from(e.children).forEach(t=>{this.dehydrate(t)}))}static verifyHydration(e,t){const i={success:!0,mismatches:[],warnings:[],stats:{nodesChecked:0,nodesMatched:0,eventListenersAttached:0,refsRestored:0,stateBindings:0}};return this.verifyNode(e,t,i,"0"),i.success=i.mismatches.length===0,i}static verifyNode(e,t,i,s){if(!(!t||typeof t!="object"||!t.tag)){if(i.stats.nodesChecked++,!e){i.mismatches.push({path:s,type:"missing-dom",message:`DOM node missing for VNode <${t.tag}>`});return}if(!e._vnode||!t._element?i.warnings.push({path:s,type:"missing-reference",message:"VNode-DOM references not set"}):i.stats.nodesMatched++,e.tagName.toLowerCase()!==t.tag.toLowerCase()&&i.mismatches.push({path:s,type:"tag-mismatch",expected:t.tag,actual:e.tagName.toLowerCase()}),t.events&&Object.keys(t.events).length>0&&(e._eventListeners?i.stats.eventListenersAttached+=Object.keys(e._eventListeners).length:i.warnings.push({path:s,type:"missing-events",message:"Event listeners not attached"})),t.ref&&i.stats.refsRestored++,t.isStateBinding&&i.stats.stateBindings++,t.children&&Array.isArray(t.children)){const a=Array.from(e.childNodes).filter(r=>r.nodeType===Node.ELEMENT_NODE);t.children.forEach((r,n)=>{if(r&&typeof r=="object"&&r.tag){const c=a[n];this.verifyNode(c,r,i,`${s}.${n}`)}})}}}static getStats(e){const t={isHydrated:this.isHydrated(e),totalElements:0,elementsWithEvents:0,elementsWithRefs:0,stateBindings:0},i=s=>{!s||s.nodeType!==Node.ELEMENT_NODE||(t.totalElements++,s._eventListeners&&Object.keys(s._eventListeners).length>0&&t.elementsWithEvents++,s._vnode&&s._vnode.ref&&t.elementsWithRefs++,Array.from(s.children).forEach(i))};return i(e),e._stateBindings&&(t.stateBindings=e._stateBindings.length),t}}export{u as Hydrator};
-//# sourceMappingURL=hydrator.js.map
diff --git a/packages/flutterjs_engine/src/vdom/dist/hydrator.js.map b/packages/flutterjs_engine/src/vdom/dist/hydrator.js.map
deleted file mode 100644
index 7295a1f2..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/hydrator.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/hydrator.js"],
-  "sourcesContent": ["/**\r\n * Hydrator - SSR to CSR Transition System\r\n * \r\n * Handles the hydration process:\r\n * 1. Takes SSR-rendered HTML\r\n * 2. Matches it with VNode tree\r\n * 3. Attaches event listeners\r\n * 4. Restores state bindings\r\n * 5. Calls ref callbacks\r\n * 6. Makes the app interactive\r\n */\r\n\r\nimport { VNodeRenderer } from './vnode_renderer.js';\r\n\r\nclass Hydrator {\r\n  /**\r\n   * Hydrate SSR-rendered DOM with VNode tree\r\n   * @param {HTMLElement} rootElement - Root element with SSR HTML\r\n   * @param {VNode} vnodeTree - VNode tree to hydrate with\r\n   * @param {Object} hydrationData - Metadata from SSR (optional)\r\n   * @returns {HTMLElement} Hydrated root element\r\n   */\r\n  static hydrate(rootElement, vnodeTree, hydrationData = null) {\r\n    if (!rootElement) {\r\n      throw new Error('Root element is required for hydration');\r\n    }\r\n\r\n    if (!vnodeTree) {\r\n      throw new Error('VNode tree is required for hydration');\r\n    }\r\n\r\n    // Load hydration data from script tag if not provided\r\n    if (!hydrationData) {\r\n      hydrationData = this.loadHydrationData();\r\n    }\r\n\r\n    // Validate hydration data\r\n    if (hydrationData && !this.validateHydrationData(hydrationData)) {\r\n      console.warn('Invalid hydration data, proceeding without it');\r\n      hydrationData = null;\r\n    }\r\n\r\n    // Match DOM nodes with VNodes\r\n    this.matchDOMToVNode(rootElement, vnodeTree);\r\n\r\n    // Attach event listeners\r\n    this.attachEventListeners(rootElement, vnodeTree, hydrationData);\r\n\r\n    // Restore refs\r\n    this.restoreRefs(rootElement, vnodeTree, hydrationData);\r\n\r\n    // Initialize state bindings\r\n    this.initializeStateBindings(rootElement, vnodeTree, hydrationData);\r\n\r\n    // Mark as hydrated\r\n    rootElement.setAttribute('data-hydrated', 'true');\r\n    rootElement._hydrated = true;\r\n\r\n    // Cleanup hydration data script\r\n    this.cleanupHydrationData();\r\n\r\n    return rootElement;\r\n  }\r\n\r\n  /**\r\n   * Match DOM nodes with VNode tree (recursive)\r\n   * @private\r\n   */\r\n  static matchDOMToVNode(domNode, vnode, path = '0') {\r\n    if (!domNode || !vnode) return;\r\n\r\n    // Text nodes\r\n    if (typeof vnode === 'string' || typeof vnode === 'number') {\r\n      // Text nodes are already rendered correctly\r\n      return;\r\n    }\r\n\r\n    // Skip non-VNode objects\r\n    if (!vnode.tag) return;\r\n\r\n    // Element nodes\r\n    if (domNode.nodeType === Node.ELEMENT_NODE) {\r\n      // Store bidirectional references\r\n      domNode._vnode = vnode;\r\n      vnode._element = domNode;\r\n      vnode._path = path;\r\n\r\n      // Verify tag matches (mismatch = hydration error)\r\n      if (domNode.tagName.toLowerCase() !== vnode.tag.toLowerCase()) {\r\n        console.warn(\r\n          `Hydration mismatch at path ${path}: ` +\r\n          `expected <${vnode.tag}>, got <${domNode.tagName.toLowerCase()}>`\r\n        );\r\n        // Could attempt recovery here, but for now just warn\r\n      }\r\n\r\n      // Match children recursively\r\n      if (vnode.children && vnode.children.length > 0) {\r\n        this.matchChildren(domNode, vnode.children, path);\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Match child nodes\r\n   * @private\r\n   */\r\n  static matchChildren(parentDom, vnodeChildren, parentPath) {\r\n    const domChildren = Array.from(parentDom.childNodes);\r\n    let domIndex = 0;\r\n    let vnodeIndex = 0;\r\n\r\n    while (vnodeIndex < vnodeChildren.length && domIndex < domChildren.length) {\r\n      const domChild = domChildren[domIndex];\r\n      const vnodeChild = vnodeChildren[vnodeIndex];\r\n\r\n      // Skip whitespace-only text nodes in DOM\r\n      if (domChild.nodeType === Node.TEXT_NODE && !domChild.textContent.trim()) {\r\n        domIndex++;\r\n        continue;\r\n      }\r\n\r\n      // Skip null/undefined vnodes\r\n      if (vnodeChild === null || vnodeChild === undefined) {\r\n        vnodeIndex++;\r\n        continue;\r\n      }\r\n\r\n      const childPath = `${parentPath}.${vnodeIndex}`;\r\n\r\n      // Match text nodes\r\n      if (typeof vnodeChild === 'string' || typeof vnodeChild === 'number') {\r\n        if (domChild.nodeType === Node.TEXT_NODE) {\r\n          // Verify content matches\r\n          const vnodeText = String(vnodeChild);\r\n          const domText = domChild.textContent;\r\n          \r\n          if (vnodeText !== domText) {\r\n            console.warn(\r\n              `Text content mismatch at ${childPath}: ` +\r\n              `expected \"${vnodeText}\", got \"${domText}\"`\r\n            );\r\n          }\r\n        }\r\n        domIndex++;\r\n        vnodeIndex++;\r\n        continue;\r\n      }\r\n\r\n      // Match element nodes\r\n      if (vnodeChild.tag && domChild.nodeType === Node.ELEMENT_NODE) {\r\n        this.matchDOMToVNode(domChild, vnodeChild, childPath);\r\n        domIndex++;\r\n        vnodeIndex++;\r\n        continue;\r\n      }\r\n\r\n      // If we get here, there's a mismatch - skip both and continue\r\n      domIndex++;\r\n      vnodeIndex++;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Attach event listeners from VNode tree\r\n   * @private\r\n   */\r\n  static attachEventListeners(rootElement, vnode, hydrationData) {\r\n    if (!vnode || typeof vnode !== 'object' || !vnode.tag) {\r\n      return;\r\n    }\r\n\r\n    // Attach events on this node\r\n    if (vnode._element && vnode.events && Object.keys(vnode.events).length > 0) {\r\n      VNodeRenderer.applyEvents(vnode._element, vnode.events);\r\n    }\r\n\r\n    // Recursively attach events on children\r\n    if (vnode.children && Array.isArray(vnode.children)) {\r\n      vnode.children.forEach(child => {\r\n        this.attachEventListeners(rootElement, child, hydrationData);\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Restore ref callbacks\r\n   * @private\r\n   */\r\n  static restoreRefs(rootElement, vnode, hydrationData) {\r\n    if (!vnode || typeof vnode !== 'object' || !vnode.tag) {\r\n      return;\r\n    }\r\n\r\n    // Call ref callback if present\r\n    if (vnode._element && vnode.ref && typeof vnode.ref === 'function') {\r\n      try {\r\n        vnode.ref(vnode._element);\r\n      } catch (error) {\r\n        console.error('Error calling ref callback:', error);\r\n      }\r\n    }\r\n\r\n    // Recursively restore refs on children\r\n    if (vnode.children && Array.isArray(vnode.children)) {\r\n      vnode.children.forEach(child => {\r\n        this.restoreRefs(rootElement, child, hydrationData);\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Initialize state bindings\r\n   * @private\r\n   */\r\n  static initializeStateBindings(rootElement, vnode, hydrationData) {\r\n    if (!vnode || typeof vnode !== 'object' || !vnode.tag) {\r\n      return;\r\n    }\r\n\r\n    // Register state binding if present\r\n    if (vnode.isStateBinding && vnode._element) {\r\n      // Store binding information for later state updates\r\n      if (!rootElement._stateBindings) {\r\n        rootElement._stateBindings = [];\r\n      }\r\n\r\n      rootElement._stateBindings.push({\r\n        element: vnode._element,\r\n        widgetId: vnode.statefulWidgetId,\r\n        property: vnode.stateProperty,\r\n        updateFn: vnode.updateFn\r\n      });\r\n    }\r\n\r\n    // Recursively initialize state bindings on children\r\n    if (vnode.children && Array.isArray(vnode.children)) {\r\n      vnode.children.forEach(child => {\r\n        this.initializeStateBindings(rootElement, child, hydrationData);\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Load hydration data from script tag\r\n   * @private\r\n   */\r\n  static loadHydrationData() {\r\n    if (typeof document === 'undefined') {\r\n      return null;\r\n    }\r\n\r\n    const script = document.getElementById('__FLUTTERJS_HYDRATION_DATA__');\r\n    if (!script) {\r\n      return null;\r\n    }\r\n\r\n    try {\r\n      return JSON.parse(script.textContent);\r\n    } catch (error) {\r\n      console.error('Failed to parse hydration data:', error);\r\n      return null;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Validate hydration data structure\r\n   * @private\r\n   */\r\n  static validateHydrationData(data) {\r\n    if (!data || typeof data !== 'object') {\r\n      return false;\r\n    }\r\n\r\n    // Check required fields\r\n    if (!data.version) {\r\n      return false;\r\n    }\r\n\r\n    // Check arrays exist\r\n    const requiredArrays = ['widgets', 'stateBindings', 'events', 'refs'];\r\n    for (const key of requiredArrays) {\r\n      if (!Array.isArray(data[key])) {\r\n        return false;\r\n      }\r\n    }\r\n\r\n    return true;\r\n  }\r\n\r\n  /**\r\n   * Cleanup hydration data script tag\r\n   * @private\r\n   */\r\n  static cleanupHydrationData() {\r\n    if (typeof document === 'undefined') {\r\n      return;\r\n    }\r\n\r\n    const script = document.getElementById('__FLUTTERJS_HYDRATION_DATA__');\r\n    if (script && script.parentNode) {\r\n      script.parentNode.removeChild(script);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Check if element is hydrated\r\n   * @param {HTMLElement} element - Element to check\r\n   * @returns {boolean} True if hydrated\r\n   */\r\n  static isHydrated(element) {\r\n    return element && (element._hydrated === true || element.hasAttribute('data-hydrated'));\r\n  }\r\n\r\n  /**\r\n   * Generate hydration data from VNode tree\r\n   * @param {VNode} vnode - VNode tree\r\n   * @returns {Object} Hydration data\r\n   */\r\n  static generateHydrationData(vnode) {\r\n    const data = {\r\n      version: '1.0.0',\r\n      timestamp: Date.now(),\r\n      widgets: [],\r\n      stateBindings: [],\r\n      events: [],\r\n      refs: []\r\n    };\r\n\r\n    this.collectHydrationData(vnode, data, '0');\r\n\r\n    return data;\r\n  }\r\n\r\n  /**\r\n   * Collect hydration data recursively\r\n   * @private\r\n   */\r\n  static collectHydrationData(vnode, data, path) {\r\n    if (!vnode || typeof vnode !== 'object' || !vnode.tag) {\r\n      return;\r\n    }\r\n\r\n    // Collect widget metadata\r\n    if (vnode.metadata && vnode.metadata.widgetType) {\r\n      data.widgets.push({\r\n        path,\r\n        type: vnode.metadata.widgetType,\r\n        props: vnode.metadata.flutterProps || {},\r\n        key: vnode.key\r\n      });\r\n    }\r\n\r\n    // Collect state bindings\r\n    if (vnode.isStateBinding) {\r\n      data.stateBindings.push({\r\n        path,\r\n        widgetId: vnode.statefulWidgetId,\r\n        property: vnode.stateProperty\r\n      });\r\n    }\r\n\r\n    // Collect event handlers (just names, not functions)\r\n    if (vnode.events && Object.keys(vnode.events).length > 0) {\r\n      data.events.push({\r\n        path,\r\n        events: Object.keys(vnode.events)\r\n      });\r\n    }\r\n\r\n    // Collect refs\r\n    if (vnode.ref) {\r\n      data.refs.push({\r\n        path,\r\n        hasRef: true\r\n      });\r\n    }\r\n\r\n    // Recursively collect from children\r\n    if (vnode.children && Array.isArray(vnode.children)) {\r\n      vnode.children.forEach((child, index) => {\r\n        if (child && typeof child === 'object' && child.tag) {\r\n          this.collectHydrationData(child, data, `${path}.${index}`);\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Partial hydration - hydrate only specific subtree\r\n   * @param {HTMLElement} element - Subtree root element\r\n   * @param {VNode} vnode - VNode for subtree\r\n   * @returns {HTMLElement} Hydrated element\r\n   */\r\n  static hydratePartial(element, vnode) {\r\n    if (!element || !vnode) {\r\n      throw new Error('Element and VNode required for partial hydration');\r\n    }\r\n\r\n    // Match and hydrate just this subtree\r\n    this.matchDOMToVNode(element, vnode);\r\n    this.attachEventListeners(element, vnode, null);\r\n    this.restoreRefs(element, vnode, null);\r\n    this.initializeStateBindings(element, vnode, null);\r\n\r\n    element.setAttribute('data-hydrated', 'true');\r\n    element._hydrated = true;\r\n\r\n    return element;\r\n  }\r\n\r\n  /**\r\n   * Dehydrate - remove all hydration (for testing/cleanup)\r\n   * @param {HTMLElement} element - Element to dehydrate\r\n   */\r\n  static dehydrate(element) {\r\n    if (!element) return;\r\n\r\n    // Remove event listeners\r\n    VNodeRenderer.cleanupEventListeners(element);\r\n\r\n    // Remove hydration markers\r\n    element.removeAttribute('data-hydrated');\r\n    delete element._hydrated;\r\n    delete element._stateBindings;\r\n\r\n    // Recursively dehydrate children\r\n    Array.from(element.children).forEach(child => {\r\n      this.dehydrate(child);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Verify hydration correctness\r\n   * @param {HTMLElement} rootElement - Root element\r\n   * @param {VNode} vnode - VNode tree\r\n   * @returns {Object} Verification report\r\n   */\r\n  static verifyHydration(rootElement, vnode) {\r\n    const report = {\r\n      success: true,\r\n      mismatches: [],\r\n      warnings: [],\r\n      stats: {\r\n        nodesChecked: 0,\r\n        nodesMatched: 0,\r\n        eventListenersAttached: 0,\r\n        refsRestored: 0,\r\n        stateBindings: 0\r\n      }\r\n    };\r\n\r\n    this.verifyNode(rootElement, vnode, report, '0');\r\n\r\n    report.success = report.mismatches.length === 0;\r\n\r\n    return report;\r\n  }\r\n\r\n  /**\r\n   * Verify single node\r\n   * @private\r\n   */\r\n  static verifyNode(domNode, vnode, report, path) {\r\n    if (!vnode || typeof vnode !== 'object' || !vnode.tag) {\r\n      return;\r\n    }\r\n\r\n    report.stats.nodesChecked++;\r\n\r\n    // Check if DOM node exists\r\n    if (!domNode) {\r\n      report.mismatches.push({\r\n        path,\r\n        type: 'missing-dom',\r\n        message: `DOM node missing for VNode <${vnode.tag}>`\r\n      });\r\n      return;\r\n    }\r\n\r\n    // Check if references are set\r\n    if (!domNode._vnode || !vnode._element) {\r\n      report.warnings.push({\r\n        path,\r\n        type: 'missing-reference',\r\n        message: 'VNode-DOM references not set'\r\n      });\r\n    } else {\r\n      report.stats.nodesMatched++;\r\n    }\r\n\r\n    // Check if tag matches\r\n    if (domNode.tagName.toLowerCase() !== vnode.tag.toLowerCase()) {\r\n      report.mismatches.push({\r\n        path,\r\n        type: 'tag-mismatch',\r\n        expected: vnode.tag,\r\n        actual: domNode.tagName.toLowerCase()\r\n      });\r\n    }\r\n\r\n    // Check if events are attached\r\n    if (vnode.events && Object.keys(vnode.events).length > 0) {\r\n      if (domNode._eventListeners) {\r\n        report.stats.eventListenersAttached += Object.keys(domNode._eventListeners).length;\r\n      } else {\r\n        report.warnings.push({\r\n          path,\r\n          type: 'missing-events',\r\n          message: 'Event listeners not attached'\r\n        });\r\n      }\r\n    }\r\n\r\n    // Check if ref was called\r\n    if (vnode.ref) {\r\n      report.stats.refsRestored++;\r\n    }\r\n\r\n    // Check state bindings\r\n    if (vnode.isStateBinding) {\r\n      report.stats.stateBindings++;\r\n    }\r\n\r\n    // Recursively verify children\r\n    if (vnode.children && Array.isArray(vnode.children)) {\r\n      const domChildren = Array.from(domNode.childNodes).filter(\r\n        child => child.nodeType === Node.ELEMENT_NODE\r\n      );\r\n\r\n      vnode.children.forEach((child, index) => {\r\n        if (child && typeof child === 'object' && child.tag) {\r\n          const domChild = domChildren[index];\r\n          this.verifyNode(domChild, child, report, `${path}.${index}`);\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get hydration statistics\r\n   * @param {HTMLElement} rootElement - Hydrated root element\r\n   * @returns {Object} Statistics\r\n   */\r\n  static getStats(rootElement) {\r\n    const stats = {\r\n      isHydrated: this.isHydrated(rootElement),\r\n      totalElements: 0,\r\n      elementsWithEvents: 0,\r\n      elementsWithRefs: 0,\r\n      stateBindings: 0\r\n    };\r\n\r\n    const countRecursive = (element) => {\r\n      if (!element || element.nodeType !== Node.ELEMENT_NODE) return;\r\n\r\n      stats.totalElements++;\r\n\r\n      if (element._eventListeners && Object.keys(element._eventListeners).length > 0) {\r\n        stats.elementsWithEvents++;\r\n      }\r\n\r\n      if (element._vnode && element._vnode.ref) {\r\n        stats.elementsWithRefs++;\r\n      }\r\n\r\n      Array.from(element.children).forEach(countRecursive);\r\n    };\r\n\r\n    countRecursive(rootElement);\r\n\r\n    if (rootElement._stateBindings) {\r\n      stats.stateBindings = rootElement._stateBindings.length;\r\n    }\r\n\r\n    return stats;\r\n  }\r\n}\r\n\r\n\r\n\r\nexport {Hydrator}"],
-  "mappings": "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",
-  "names": ["VNodeRenderer", "Hydrator", "rootElement", "vnodeTree", "hydrationData", "domNode", "vnode", "path", "parentDom", "vnodeChildren", "parentPath", "domChildren", "domIndex", "vnodeIndex", "domChild", "vnodeChild", "childPath", "vnodeText", "domText", "child", "error", "script", "data", "requiredArrays", "key", "element", "index", "report", "stats", "countRecursive"]
-}
diff --git a/packages/flutterjs_engine/src/vdom/dist/patch_applier.js b/packages/flutterjs_engine/src/vdom/dist/patch_applier.js
deleted file mode 100644
index 5f464ea8..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/patch_applier.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class h{static apply(e,t,r={}){if(!e||!Array.isArray(t)||t.length===0)return{success:!0,patchesApplied:0,totalPatches:0};let s=0;const n=[];try{return this.orderPatches(t).forEach(a=>{try{this.applyPatch(e,a),s++}catch(c){n.push(`Patch ${a.type} at ${a.index}: ${c.message}`)}}),{success:n.length===0,patchesApplied:s,totalPatches:t.length,errors:n.length>0?n:void 0}}catch(i){return{success:!1,patchesApplied:s,error:i.message}}}static orderPatches(e){const t={REMOVE:[],CREATE:[],REPLACE:[],UPDATE:[]};return e.forEach(r=>{r.type==="REMOVE"?t.REMOVE.push(r):r.type==="CREATE"?t.CREATE.push(r):r.type==="REPLACE"?t.REPLACE.push(r):t.UPDATE.push(r)}),t.REMOVE.sort((r,s)=>{const n=String(r.index||"0").split(".").length;return String(s.index||"0").split(".").length-n}),[...t.REMOVE,...t.CREATE,...t.REPLACE,...t.UPDATE]}static applyPatch(e,t){const{type:r,index:s}=t;switch(r){case"CREATE":return this._create(e,t);case"REMOVE":return this._remove(e,t);case"REPLACE":return this._replace(e,t);case"UPDATE_PROPS":return this._updateProps(e,t);case"UPDATE_STYLE":return this._updateStyle(e,t);case"UPDATE_TEXT":return this._updateText(e,t);case"UPDATE_EVENTS":return this._updateEvents(e,t);default:throw new Error(`Unknown patch type: ${r}`)}}static _findElement(e,t){if(!t)return e;let r=e;const s=String(t).split(".").map(n=>parseInt(n,10));for(const n of s){if(!r||!r.childNodes||n>=r.childNodes.length)return console.warn(`_findElement: Cannot navigate to index ${t}, at part ${n}, current has ${r?.childNodes?.length||0} children`),null;r=r.childNodes[n]}return r}static _getChildIndex(e){const r=String(e||"0").split(".");return parseInt(r[r.length-1],10)}static _getParentIndex(e){const r=String(e||"0").split(".");return r.length===1?null:(r.pop(),r.join("."))}static _create(e,t){const{index:r,newNode:s}=t;if(!s)throw new Error("CREATE patch requires newNode");const n=this._getParentIndex(r);let i;if(n===null||n===""?i=e:i=this._findElement(e,n),!i)throw new Error(`Parent element not found at index ${n}`);const a=this._createDOMNode(s);if(!a)throw new Error("Failed to create DOM node");const c=this._getChildIndex(r);return c>=i.childNodes.length?i.appendChild(a):i.insertBefore(a,i.childNodes[c]),a}static _remove(e,t){const{index:r}=t,s=this._findElement(e,r);if(!s)throw new Error(`Element not found at index ${r}`);this._cleanup(s),s.parentNode&&s.parentNode.removeChild(s)}static _replace(e,t){const{index:r,newNode:s}=t;if(!s)throw new Error("REPLACE patch requires newNode");const n=this._findElement(e,r);if(!n)throw new Error(`Element not found at index ${r}`);if(n===e)throw new Error("Cannot replace root element (no parent)");const i=this._createDOMNode(s);if(!i)throw new Error("Failed to create replacement DOM node");if(this._cleanup(n),n.parentNode)return n.parentNode.replaceChild(i,n),i;throw new Error("Element has no parent node")}static _updateProps(e,t){const{index:r,value:s}=t;if(!s||!s.changes)return;const n=this._findElement(e,r);if(!n){console.warn(`_updateProps: Element not found at index ${r}`);return}const{changes:i}=s;i.removed&&Object.keys(i.removed).forEach(a=>{this._removeProp(n,a)}),i.updated&&Object.entries(i.updated).forEach(([a,c])=>{this._setProp(n,a,c)}),i.added&&Object.entries(i.added).forEach(([a,c])=>{this._setProp(n,a,c)})}static _updateStyle(e,t){const{index:r,value:s}=t;if(!s||!s.changes)return;const n=this._findElement(e,r);if(!n){console.warn(`_updateStyle: Element not found at index ${r}`);return}const{changes:i}=s;i.removed&&Object.keys(i.removed).forEach(a=>{n.style[a]=""}),i.updated&&Object.entries(i.updated).forEach(([a,c])=>{try{n.style[a]=c}catch{console.warn(`Failed to set style ${a}`)}}),i.added&&Object.entries(i.added).forEach(([a,c])=>{try{n.style[a]=c}catch{console.warn(`Failed to set style ${a}`)}})}static _updateText(e,t){const{index:r,value:s}=t,n=this._findElement(e,r);if(!n){console.warn(`_updateText: Element not found at index ${r}`);return}n.nodeType===3?n.nodeValue=String(s!==void 0?s:""):n.textContent=String(s!==void 0?s:"")}static _updateEvents(e,t){const{index:r,value:s}=t;if(!s||!s.changes)return;const n=this._findElement(e,r);if(!n){console.warn(`_updateEvents: Element not found at index ${r}`);return}const{changes:i}=s;i.removed&&Object.keys(i.removed).forEach(a=>{this._removeEventListener(n,a)}),i.updated&&Object.entries(i.updated).forEach(([a,c])=>{this._removeEventListener(n,a),c&&this._addEventListener(n,a,c)}),i.added&&Object.entries(i.added).forEach(([a,c])=>{c&&this._addEventListener(n,a,c)})}static _createDOMNode(e){if(typeof e=="string")return document.createTextNode(e);if(!e||typeof e!="object")return document.createTextNode("");const t=e.tag||"div",r=document.createElement(t);return e._element=r,r._vnode=e,e.props&&typeof e.props=="object"&&Object.entries(e.props).forEach(([s,n])=>{this._setProp(r,s,n)}),e.style&&typeof e.style=="object"&&Object.entries(e.style).forEach(([s,n])=>{try{r.style[s]=n}catch{}}),e.children&&Array.isArray(e.children)&&e.children.forEach(s=>{const n=this._createDOMNode(s);n&&r.appendChild(n)}),e.events&&typeof e.events=="object"&&Object.entries(e.events).forEach(([s,n])=>{typeof n=="function"&&this._addEventListener(r,s,n)}),r}static _setProp(e,t,r){if(r==null){this._removeProp(e,t);return}if(t==="className"){e.className=String(r);return}if(t==="value"){(e.tagName==="INPUT"||e.tagName==="TEXTAREA"||e.tagName==="SELECT")&&(e.value=String(r));return}if(t==="checked"||t==="disabled"||t==="selected"){e[t]=!!r;return}if(t.startsWith("data-")||t.startsWith("aria-")){e.setAttribute(t,String(r));return}try{t in e?e[t]=r:e.setAttribute(t,String(r))}catch{try{e.setAttribute(t,String(r))}catch{}}}static _removeProp(e,t){if(t==="className"){e.className="";return}if(t==="value"){(e.tagName==="INPUT"||e.tagName==="TEXTAREA")&&(e.value="");return}if(t==="checked"||t==="disabled"||t==="selected"){e[t]=!1;return}try{e.removeAttribute(t)}catch{}}static _addEventListener(e,t,r){if(typeof r=="function")try{const s=t.replace(/^on/,"").toLowerCase();e._eventListeners||(e._eventListeners={}),e.addEventListener(s,r),e._eventListeners[s]=r}catch{console.warn(`Failed to add event listener ${t}`)}}static _removeEventListener(e,t){try{const r=t.replace(/^on/,"").toLowerCase();e._eventListeners&&e._eventListeners[r]&&(e.removeEventListener(r,e._eventListeners[r]),delete e._eventListeners[r])}catch{console.warn(`Failed to remove event listener ${t}`)}}static _cleanup(e){if(e&&(e._eventListeners&&(Object.entries(e._eventListeners).forEach(([t,r])=>{try{e.removeEventListener(t,r)}catch{}}),e._eventListeners={}),e.childNodes))for(let t=0;t<e.childNodes.length;t++)this._cleanup(e.childNodes[t])}static validate(e){const t=[],r=["CREATE","REMOVE","REPLACE","UPDATE_PROPS","UPDATE_STYLE","UPDATE_TEXT","UPDATE_EVENTS"];return Array.isArray(e)?(e.forEach((s,n)=>{if(!s.type){t.push(`Patch ${n}: Missing type`);return}r.includes(s.type)||t.push(`Patch ${n}: Invalid type "${s.type}"`)}),t):(t.push("Patches must be an array"),t)}static getStats(e){const t={total:e.length,byType:{}};return e.forEach(r=>{t.byType[r.type]=(t.byType[r.type]||0)+1}),t}}export{h as PatchApplier};
-//# sourceMappingURL=patch_applier.js.map
diff --git a/packages/flutterjs_engine/src/vdom/dist/patch_applier.js.map b/packages/flutterjs_engine/src/vdom/dist/patch_applier.js.map
deleted file mode 100644
index 76cbbabf..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/patch_applier.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/patch_applier.js"],
-  "sourcesContent": ["/**\r\n * PatchApplier - Simplified & Robust Version\r\n * Applies VNode patches to actual DOM\r\n * \r\n * Key principles:\r\n * - Index '0' always means the direct child\r\n * - Parent is always found from the root\r\n * - Simple, straightforward logic\r\n */\r\n\r\nexport class PatchApplier {\r\n  /**\r\n   * Apply patches to DOM\r\n   * @param {HTMLElement} rootElement - Element to apply patches to\r\n   * @param {Patch[]} patches - Array of patches\r\n   * @param {Object} options - Options\r\n   * @returns {Object} Result\r\n   */\r\n  static apply(rootElement, patches, options = {}) {\r\n    if (!rootElement || !Array.isArray(patches) || patches.length === 0) {\r\n      return { success: true, patchesApplied: 0, totalPatches: 0 };\r\n    }\r\n\r\n    let patchesApplied = 0;\r\n    const errors = [];\r\n\r\n    try {\r\n      // Order patches: REMOVE first (reverse order), then others\r\n      const orderedPatches = this.orderPatches(patches);\r\n\r\n      orderedPatches.forEach((patch) => {\r\n        try {\r\n          this.applyPatch(rootElement, patch);\r\n          patchesApplied++;\r\n        } catch (error) {\r\n          errors.push(`Patch ${patch.type} at ${patch.index}: ${error.message}`);\r\n        }\r\n      });\r\n\r\n      return {\r\n        success: errors.length === 0,\r\n        patchesApplied,\r\n        totalPatches: patches.length,\r\n        errors: errors.length > 0 ? errors : undefined\r\n      };\r\n    } catch (error) {\r\n      return {\r\n        success: false,\r\n        patchesApplied,\r\n        error: error.message\r\n      };\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Order patches for safe application\r\n   * REMOVE first (deepest first), then CREATE, REPLACE, then all UPDATES\r\n   */\r\n  static orderPatches(patches) {\r\n    const byType = { REMOVE: [], CREATE: [], REPLACE: [], UPDATE: [] };\r\n\r\n    patches.forEach(patch => {\r\n      if (patch.type === 'REMOVE') {\r\n        byType.REMOVE.push(patch);\r\n      } else if (patch.type === 'CREATE') {\r\n        byType.CREATE.push(patch);\r\n      } else if (patch.type === 'REPLACE') {\r\n        byType.REPLACE.push(patch);\r\n      } else {\r\n        byType.UPDATE.push(patch);\r\n      }\r\n    });\r\n\r\n    // Sort REMOVE by depth (deepest first, by counting dots)\r\n    byType.REMOVE.sort((a, b) => {\r\n      const depthA = String(a.index || '0').split('.').length;\r\n      const depthB = String(b.index || '0').split('.').length;\r\n      return depthB - depthA;\r\n    });\r\n\r\n    return [...byType.REMOVE, ...byType.CREATE, ...byType.REPLACE, ...byType.UPDATE];\r\n  }\r\n\r\n  /**\r\n   * Apply single patch\r\n   */\r\n  static applyPatch(rootElement, patch) {\r\n    const { type, index } = patch;\r\n\r\n    switch (type) {\r\n      case 'CREATE':\r\n        return this._create(rootElement, patch);\r\n      case 'REMOVE':\r\n        return this._remove(rootElement, patch);\r\n      case 'REPLACE':\r\n        return this._replace(rootElement, patch);\r\n      case 'UPDATE_PROPS':\r\n        return this._updateProps(rootElement, patch);\r\n      case 'UPDATE_STYLE':\r\n        return this._updateStyle(rootElement, patch);\r\n      case 'UPDATE_TEXT':\r\n        return this._updateText(rootElement, patch);\r\n      case 'UPDATE_EVENTS':\r\n        return this._updateEvents(rootElement, patch);\r\n      default:\r\n        throw new Error(`Unknown patch type: ${type}`);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Find element by index path\r\n   * CRITICAL: Index '0' means FIRST CHILD of rootElement, NOT the root itself\r\n   * Index '0' = first child (rootElement.childNodes[0])\r\n   * Index '1' = second child (rootElement.childNodes[1])\r\n   * Index '0.1' = first child's second child\r\n   * Index '1.0.2' = second child's first child's third child\r\n   */\r\n  static _findElement(rootElement, index) {\r\n    // No index or null/undefined = root element\r\n    if (!index) {\r\n      return rootElement;\r\n    }\r\n\r\n    // Parse index path\r\n    let current = rootElement;\r\n    const parts = String(index).split('.').map(p => parseInt(p, 10));\r\n\r\n    // Navigate through the parts\r\n    for (const partIndex of parts) {\r\n      if (!current || !current.childNodes || partIndex >= current.childNodes.length) {\r\n        console.warn(`_findElement: Cannot navigate to index ${index}, at part ${partIndex}, current has ${current?.childNodes?.length || 0} children`);\r\n        return null;\r\n      }\r\n      current = current.childNodes[partIndex];\r\n    }\r\n\r\n    return current;\r\n  }\r\n\r\n  /**\r\n   * Get child index from full index path\r\n   * '0' -> 0\r\n   * '0.1' -> 1\r\n   * '0.1.2' -> 2\r\n   */\r\n  static _getChildIndex(index) {\r\n    const str = String(index || '0');\r\n    const parts = str.split('.');\r\n    return parseInt(parts[parts.length - 1], 10);\r\n  }\r\n\r\n  /**\r\n   * Get parent index from full index path\r\n   * '0' -> null or '' (parent is the root element itself)\r\n   * '0.1' -> '0' (parent of first child's second child)\r\n   * '0.1.2' -> '0.1'\r\n   */\r\n  static _getParentIndex(index) {\r\n    const str = String(index || '0');\r\n    const parts = str.split('.');\r\n\r\n    if (parts.length === 1) {\r\n      // Direct children of root - parent is rootElement itself (return null/empty)\r\n      return null;\r\n    }\r\n\r\n    parts.pop();\r\n    return parts.join('.');\r\n  }\r\n\r\n  /**\r\n   * CREATE - Add new element\r\n   */\r\n  static _create(rootElement, patch) {\r\n    const { index, newNode } = patch;\r\n\r\n    if (!newNode) {\r\n      throw new Error('CREATE patch requires newNode');\r\n    }\r\n\r\n    // Get parent element\r\n    const parentIndex = this._getParentIndex(index);\r\n    let parent;\r\n\r\n    if (parentIndex === null || parentIndex === '') {\r\n      // Parent is the root element itself\r\n      parent = rootElement;\r\n    } else {\r\n      parent = this._findElement(rootElement, parentIndex);\r\n    }\r\n\r\n    if (!parent) {\r\n      throw new Error(`Parent element not found at index ${parentIndex}`);\r\n    }\r\n\r\n    // Create the new DOM element\r\n    const newElement = this._createDOMNode(newNode);\r\n    if (!newElement) {\r\n      throw new Error('Failed to create DOM node');\r\n    }\r\n\r\n    // Get insertion position\r\n    const childIndex = this._getChildIndex(index);\r\n\r\n    // Insert at correct position\r\n    if (childIndex >= parent.childNodes.length) {\r\n      parent.appendChild(newElement);\r\n    } else {\r\n      parent.insertBefore(newElement, parent.childNodes[childIndex]);\r\n    }\r\n\r\n    return newElement;\r\n  }\r\n\r\n  /**\r\n   * REMOVE - Delete element\r\n   */\r\n  static _remove(rootElement, patch) {\r\n    const { index } = patch;\r\n\r\n    const element = this._findElement(rootElement, index);\r\n    if (!element) {\r\n      throw new Error(`Element not found at index ${index}`);\r\n    }\r\n\r\n    // Cleanup before removal\r\n    this._cleanup(element);\r\n\r\n    // Remove from DOM\r\n    if (element.parentNode) {\r\n      element.parentNode.removeChild(element);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * REPLACE - Replace element entirely\r\n   */\r\n  static _replace(rootElement, patch) {\r\n    const { index, newNode } = patch;\r\n\r\n    if (!newNode) {\r\n      throw new Error('REPLACE patch requires newNode');\r\n    }\r\n\r\n    const element = this._findElement(rootElement, index);\r\n    if (!element) {\r\n      throw new Error(`Element not found at index ${index}`);\r\n    }\r\n\r\n    // Root cannot be replaced\r\n    if (element === rootElement) {\r\n      throw new Error('Cannot replace root element (no parent)');\r\n    }\r\n\r\n    // Create new element\r\n    const newElement = this._createDOMNode(newNode);\r\n    if (!newElement) {\r\n      throw new Error('Failed to create replacement DOM node');\r\n    }\r\n\r\n    // Cleanup old element\r\n    this._cleanup(element);\r\n\r\n    // Replace in DOM\r\n    if (element.parentNode) {\r\n      element.parentNode.replaceChild(newElement, element);\r\n      return newElement;\r\n    } else {\r\n      throw new Error('Element has no parent node');\r\n    }\r\n  }\r\n\r\n  /**\r\n   * UPDATE_PROPS - Update HTML attributes\r\n   */\r\n  static _updateProps(rootElement, patch) {\r\n    const { index, value } = patch;\r\n\r\n    if (!value || !value.changes) {\r\n      return;\r\n    }\r\n\r\n    const element = this._findElement(rootElement, index);\r\n    if (!element) {\r\n      console.warn(`_updateProps: Element not found at index ${index}`);\r\n      return;\r\n    }\r\n\r\n    const { changes } = value;\r\n\r\n    // Remove properties\r\n    if (changes.removed) {\r\n      Object.keys(changes.removed).forEach(key => {\r\n        this._removeProp(element, key);\r\n      });\r\n    }\r\n\r\n    // Update properties\r\n    if (changes.updated) {\r\n      Object.entries(changes.updated).forEach(([key, val]) => {\r\n        this._setProp(element, key, val);\r\n      });\r\n    }\r\n\r\n    // Add properties\r\n    if (changes.added) {\r\n      Object.entries(changes.added).forEach(([key, val]) => {\r\n        this._setProp(element, key, val);\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * UPDATE_STYLE - Update CSS styles\r\n   */\r\n  static _updateStyle(rootElement, patch) {\r\n    const { index, value } = patch;\r\n\r\n    if (!value || !value.changes) {\r\n      return;\r\n    }\r\n\r\n    const element = this._findElement(rootElement, index);\r\n    if (!element) {\r\n      console.warn(`_updateStyle: Element not found at index ${index}`);\r\n      return;\r\n    }\r\n\r\n    const { changes } = value;\r\n\r\n    // Remove styles\r\n    if (changes.removed) {\r\n      Object.keys(changes.removed).forEach(key => {\r\n        element.style[key] = '';\r\n      });\r\n    }\r\n\r\n    // Update styles\r\n    if (changes.updated) {\r\n      Object.entries(changes.updated).forEach(([key, val]) => {\r\n        try {\r\n          element.style[key] = val;\r\n        } catch (e) {\r\n          console.warn(`Failed to set style ${key}`);\r\n        }\r\n      });\r\n    }\r\n\r\n    // Add styles\r\n    if (changes.added) {\r\n      Object.entries(changes.added).forEach(([key, val]) => {\r\n        try {\r\n          element.style[key] = val;\r\n        } catch (e) {\r\n          console.warn(`Failed to set style ${key}`);\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * UPDATE_TEXT - Update text content\r\n   */\r\n  static _updateText(rootElement, patch) {\r\n    const { index, value } = patch;\r\n\r\n    const element = this._findElement(rootElement, index);\r\n    if (!element) {\r\n      console.warn(`_updateText: Element not found at index ${index}`);\r\n      return;\r\n    }\r\n\r\n    // Handle text nodes\r\n    if (element.nodeType === 3) { // TEXT_NODE\r\n      element.nodeValue = String(value !== undefined ? value : '');\r\n    } else {\r\n      element.textContent = String(value !== undefined ? value : '');\r\n    }\r\n  }\r\n\r\n  /**\r\n   * UPDATE_EVENTS - Update event listeners\r\n   */\r\n  static _updateEvents(rootElement, patch) {\r\n    const { index, value } = patch;\r\n\r\n    if (!value || !value.changes) {\r\n      return;\r\n    }\r\n\r\n    const element = this._findElement(rootElement, index);\r\n    if (!element) {\r\n      console.warn(`_updateEvents: Element not found at index ${index}`);\r\n      return;\r\n    }\r\n\r\n    const { changes } = value;\r\n\r\n    // Remove events\r\n    if (changes.removed) {\r\n      Object.keys(changes.removed).forEach(eventName => {\r\n        this._removeEventListener(element, eventName);\r\n      });\r\n    }\r\n\r\n    // Update events\r\n    if (changes.updated) {\r\n      Object.entries(changes.updated).forEach(([eventName, handler]) => {\r\n        this._removeEventListener(element, eventName);\r\n        if (handler) {\r\n          this._addEventListener(element, eventName, handler);\r\n        }\r\n      });\r\n    }\r\n\r\n    // Add events\r\n    if (changes.added) {\r\n      Object.entries(changes.added).forEach(([eventName, handler]) => {\r\n        if (handler) {\r\n          this._addEventListener(element, eventName, handler);\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Create a DOM node from VNode\r\n   */\r\n  static _createDOMNode(vnode) {\r\n    // Text node\r\n    if (typeof vnode === 'string') {\r\n      return document.createTextNode(vnode);\r\n    }\r\n\r\n    if (!vnode || typeof vnode !== 'object') {\r\n      return document.createTextNode('');\r\n    }\r\n\r\n    // Element node\r\n    const tag = vnode.tag || 'div';\r\n    const element = document.createElement(tag);\r\n\r\n    // \u2705 CRITICAL: Link VNode to Element\r\n    vnode._element = element;\r\n    element._vnode = vnode;\r\n\r\n    // Apply properties\r\n    if (vnode.props && typeof vnode.props === 'object') {\r\n      Object.entries(vnode.props).forEach(([key, val]) => {\r\n        this._setProp(element, key, val);\r\n      });\r\n    }\r\n\r\n    // Apply styles\r\n    if (vnode.style && typeof vnode.style === 'object') {\r\n      Object.entries(vnode.style).forEach(([key, val]) => {\r\n        try {\r\n          element.style[key] = val;\r\n        } catch (e) {\r\n          // Ignore style errors\r\n        }\r\n      });\r\n    }\r\n\r\n    // Add children\r\n    if (vnode.children && Array.isArray(vnode.children)) {\r\n      vnode.children.forEach(child => {\r\n        const childNode = this._createDOMNode(child);\r\n        if (childNode) {\r\n          element.appendChild(childNode);\r\n        }\r\n      });\r\n    }\r\n\r\n    // Attach event handlers\r\n    if (vnode.events && typeof vnode.events === 'object') {\r\n      Object.entries(vnode.events).forEach(([eventName, handler]) => {\r\n        if (typeof handler === 'function') {\r\n          this._addEventListener(element, eventName, handler);\r\n        }\r\n      });\r\n    }\r\n\r\n    return element;\r\n  }\r\n\r\n  /**\r\n   * Set a property on element\r\n   */\r\n  static _setProp(element, key, value) {\r\n    if (value === null || value === undefined) {\r\n      this._removeProp(element, key);\r\n      return;\r\n    }\r\n\r\n    // className\r\n    if (key === 'className') {\r\n      element.className = String(value);\r\n      return;\r\n    }\r\n\r\n    // value (for inputs, textareas)\r\n    if (key === 'value') {\r\n      if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {\r\n        element.value = String(value);\r\n      }\r\n      return;\r\n    }\r\n\r\n    // checked, disabled, selected (booleans)\r\n    if (key === 'checked' || key === 'disabled' || key === 'selected') {\r\n      element[key] = !!value;\r\n      return;\r\n    }\r\n\r\n    // data-* and aria-* attributes\r\n    if (key.startsWith('data-') || key.startsWith('aria-')) {\r\n      element.setAttribute(key, String(value));\r\n      return;\r\n    }\r\n\r\n    // Try to set as property first\r\n    try {\r\n      if (key in element) {\r\n        element[key] = value;\r\n      } else {\r\n        element.setAttribute(key, String(value));\r\n      }\r\n    } catch (e) {\r\n      try {\r\n        element.setAttribute(key, String(value));\r\n      } catch (e2) {\r\n        // Fail silently\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Remove a property from element\r\n   */\r\n  static _removeProp(element, key) {\r\n    if (key === 'className') {\r\n      element.className = '';\r\n      return;\r\n    }\r\n\r\n    if (key === 'value') {\r\n      if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {\r\n        element.value = '';\r\n      }\r\n      return;\r\n    }\r\n\r\n    if (key === 'checked' || key === 'disabled' || key === 'selected') {\r\n      element[key] = false;\r\n      return;\r\n    }\r\n\r\n    try {\r\n      element.removeAttribute(key);\r\n    } catch (e) {\r\n      // Fail silently\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Add event listener to element\r\n   */\r\n  static _addEventListener(element, eventName, handler) {\r\n    if (typeof handler !== 'function') {\r\n      return;\r\n    }\r\n\r\n    try {\r\n      // Normalize event name: onClick -> click, onMouseover -> mouseover\r\n      const normalizedName = eventName\r\n        .replace(/^on/, '')\r\n        .toLowerCase();\r\n\r\n      // Store reference for later removal\r\n      if (!element._eventListeners) {\r\n        element._eventListeners = {};\r\n      }\r\n\r\n      element.addEventListener(normalizedName, handler);\r\n      element._eventListeners[normalizedName] = handler;\r\n    } catch (e) {\r\n      console.warn(`Failed to add event listener ${eventName}`);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Remove event listener from element\r\n   */\r\n  static _removeEventListener(element, eventName) {\r\n    try {\r\n      const normalizedName = eventName\r\n        .replace(/^on/, '')\r\n        .toLowerCase();\r\n\r\n      if (element._eventListeners && element._eventListeners[normalizedName]) {\r\n        element.removeEventListener(normalizedName, element._eventListeners[normalizedName]);\r\n        delete element._eventListeners[normalizedName];\r\n      }\r\n    } catch (e) {\r\n      console.warn(`Failed to remove event listener ${eventName}`);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Cleanup element before removal\r\n   */\r\n  static _cleanup(element) {\r\n    if (!element) return;\r\n\r\n    // Remove all event listeners\r\n    if (element._eventListeners) {\r\n      Object.entries(element._eventListeners).forEach(([name, handler]) => {\r\n        try {\r\n          element.removeEventListener(name, handler);\r\n        } catch (e) {\r\n          // Fail silently\r\n        }\r\n      });\r\n      element._eventListeners = {};\r\n    }\r\n\r\n    // Recursively cleanup children\r\n    if (element.childNodes) {\r\n      for (let i = 0; i < element.childNodes.length; i++) {\r\n        this._cleanup(element.childNodes[i]);\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Validate patches\r\n   */\r\n  static validate(patches) {\r\n    const errors = [];\r\n    const validTypes = ['CREATE', 'REMOVE', 'REPLACE', 'UPDATE_PROPS', 'UPDATE_STYLE', 'UPDATE_TEXT', 'UPDATE_EVENTS'];\r\n\r\n    if (!Array.isArray(patches)) {\r\n      errors.push('Patches must be an array');\r\n      return errors;\r\n    }\r\n\r\n    patches.forEach((patch, i) => {\r\n      if (!patch.type) {\r\n        errors.push(`Patch ${i}: Missing type`);\r\n        return;\r\n      }\r\n\r\n      if (!validTypes.includes(patch.type)) {\r\n        errors.push(`Patch ${i}: Invalid type \"${patch.type}\"`);\r\n      }\r\n    });\r\n\r\n    return errors;\r\n  }\r\n\r\n  /**\r\n   * Get statistics about patches\r\n   */\r\n  static getStats(patches) {\r\n    const stats = { total: patches.length, byType: {} };\r\n\r\n    patches.forEach(p => {\r\n      stats.byType[p.type] = (stats.byType[p.type] || 0) + 1;\r\n    });\r\n\r\n    return stats;\r\n  }\r\n}"],
-  "mappings": "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",
-  "names": ["PatchApplier", "rootElement", "patches", "options", "patchesApplied", "errors", "patch", "error", "byType", "a", "b", "depthA", "type", "index", "current", "parts", "p", "partIndex", "newNode", "parentIndex", "parent", "newElement", "childIndex", "element", "value", "changes", "key", "val", "eventName", "handler", "vnode", "tag", "child", "childNode", "normalizedName", "name", "i", "validTypes", "stats"]
-}
diff --git a/packages/flutterjs_engine/src/vdom/dist/render_engine.js b/packages/flutterjs_engine/src/vdom/dist/render_engine.js
deleted file mode 100644
index ee3a9d18..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/render_engine.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import{VNodeRenderer as d}from"./vnode_renderer.js";import{SSRRenderer as h}from"./ssr_renderer.js";class u{static render(t,e=null,s={}){return this.detectEnvironment()==="server"?this.renderServer(t,s):this.renderClient(t,e,s)}static detectEnvironment(){return typeof window<"u"&&typeof window.document<"u"?"client":typeof process<"u"&&process.versions&&process.versions.node?"server":"client"}static renderServer(t,e={}){const{title:s="FlutterJS App",includeHydration:r=!0,includeCriticalCSS:i=!0,includeRuntime:n=!0,meta:a={},scripts:c=[],styles:o=[]}=e,l=h.renderVNode(t),f=r?this.generateHydrationData(t):null,p=i?this.extractCriticalCSS(t):"";return this.buildHTMLDocument({title:s,meta:a,criticalCSS:p,bodyHTML:l,hydrationData:f,scripts:c,styles:o,includeRuntime:n})}static renderClient(t,e,s={}){if(!e)throw new Error("Target element is required for client-side rendering");const{clear:r=!0,measurePerformance:i=!1}=s,n=i?performance.now():0,a=d.render(t,e,{clear:r});if(i){const c=performance.now();console.log(`Render time: ${(c-n).toFixed(2)}ms`)}return a}static buildHTMLDocument({title:t,meta:e,criticalCSS:s,bodyHTML:r,hydrationData:i,scripts:n,styles:a,includeRuntime:c}){const o=this.generateMetaTags(e),l=this.generateStyleTags(a,s),f=this.generateScriptTags(n,c),p=i?`<script id="__FLUTTERJS_HYDRATION_DATA__" type="application/json">${JSON.stringify(i)}</script>`:"";return`<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${this.escapeHTML(t)}</title>
-  ${o}
-  ${l}
-</head>
-<body>
-  <div id="root">${r}</div>
-  ${p}
-  ${f}
-</body>
-</html>`}static generateMetaTags(t){const e=[];return t.description&&e.push(`<meta name="description" content="${this.escapeHTML(t.description)}">`),t.keywords&&e.push(`<meta name="keywords" content="${this.escapeHTML(t.keywords)}">`),t.author&&e.push(`<meta name="author" content="${this.escapeHTML(t.author)}">`),t.ogTitle&&e.push(`<meta property="og:title" content="${this.escapeHTML(t.ogTitle)}">`),t.ogDescription&&e.push(`<meta property="og:description" content="${this.escapeHTML(t.ogDescription)}">`),t.ogImage&&e.push(`<meta property="og:image" content="${this.escapeHTML(t.ogImage)}">`),t.twitterCard&&e.push(`<meta name="twitter:card" content="${this.escapeHTML(t.twitterCard)}">`),t.custom&&t.custom.forEach(({name:s,content:r,property:i})=>{i?e.push(`<meta property="${this.escapeHTML(i)}" content="${this.escapeHTML(r)}">`):e.push(`<meta name="${this.escapeHTML(s)}" content="${this.escapeHTML(r)}">`)}),e.join(`
-  `)}static generateStyleTags(t,e){const s=[];return e&&s.push(`<style id="critical-css">${e}</style>`),t.forEach(r=>{s.push(`<link rel="stylesheet" href="${this.escapeHTML(r)}">`)}),s.push(`<style id="md-base">
-:root {
-  --md-sys-color-primary: #6750a4;
-  --md-sys-color-on-primary: #ffffff;
-  --md-sys-color-primary-container: #eaddff;
-  --md-sys-color-on-primary-container: #21005e;
-  --md-sys-color-surface: #fffbfe;
-  --md-sys-color-on-surface: #1c1b1f;
-  --md-sys-color-outline: #79747e;
-  --md-sys-color-outline-variant: #cac7cf;
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-</style>`),s.join(`
-  `)}static generateScriptTags(t,e){const s=[];return e&&s.push('<script src="/flutterjs-runtime.js" defer></script>'),t.forEach(r=>{s.push(`<script src="${this.escapeHTML(r)}" defer></script>`)}),s.join(`
-  `)}static generateHydrationData(t){const e={version:"1.0.0",timestamp:Date.now(),widgets:[],stateBindings:[],events:[],refs:[]};return this.traverseVNode(t,(s,r)=>{s.metadata&&s.metadata.widgetType&&e.widgets.push({path:r,type:s.metadata.widgetType,props:s.metadata.flutterProps||{},key:s.key}),s.isStateBinding&&e.stateBindings.push({path:r,widgetId:s.statefulWidgetId,property:s.stateProperty}),s.events&&Object.keys(s.events).length>0&&e.events.push({path:r,events:Object.keys(s.events)}),s.ref&&e.refs.push({path:r,hasRef:!0})}),e}static traverseVNode(t,e,s="0"){!t||typeof t!="object"||!t.tag||(e(t,s),t.children&&Array.isArray(t.children)&&t.children.forEach((r,i)=>{r&&typeof r=="object"&&r.tag&&this.traverseVNode(r,e,`${s}.${i}`)}))}static extractCriticalCSS(t){const e=new Set,s=[];this.traverseVNode(t,i=>{i.props&&i.props.className&&i.props.className.split(" ").forEach(n=>{n&&e.add(n)}),i.style&&Object.keys(i.style).length>0&&s.push(i.style)});const r=[];return e.size>0&&e.forEach(i=>{i.startsWith("fjs-")&&r.push(this.getWidgetCSS(i))}),r.filter(Boolean).join(`
-`)}static getWidgetCSS(t){return{"fjs-text":".fjs-text { display: inline; }","fjs-container":".fjs-container { display: block; }","fjs-column":".fjs-column { display: flex; flex-direction: column; }","fjs-row":".fjs-row { display: flex; flex-direction: row; }","fjs-center":".fjs-center { display: flex; justify-content: center; align-items: center; }","fjs-scaffold":".fjs-scaffold { min-height: 100vh; display: flex; flex-direction: column; }","fjs-app-bar":".fjs-app-bar { display: flex; align-items: center; padding: 16px; min-height: 56px; }","fjs-card":".fjs-card { border-radius: 12px; overflow: hidden; }","fjs-list-view":".fjs-list-view { overflow-y: auto; display: flex; flex-direction: column; }","fjs-grid-view":".fjs-grid-view { display: grid; gap: 16px; }"}[t]||""}static hydrate(t,e,s=null){if(this.detectEnvironment()==="server")throw new Error("Hydration can only run on the client");if(!s){const r=document.getElementById("__FLUTTERJS_HYDRATION_DATA__");if(r)try{s=JSON.parse(r.textContent)}catch(i){console.error("Failed to parse hydration data:",i)}}return e&&e.hydrate?e.hydrate(t):this.hydrateManual(t,e,s)}static hydrateManual(t,e,s){return this.matchAndHydrate(t,e),s&&s.events&&this.restoreEventListeners(t,e,s.events),s&&s.refs&&this.restoreRefs(t,e,s.refs),t}static matchAndHydrate(t,e){if(!(!t||!e||typeof e!="object")&&t.nodeType===Node.ELEMENT_NODE&&(t._vnode=e,e._element=t,e.children&&Array.isArray(e.children))){const s=Array.from(t.childNodes);let r=0;s.forEach(i=>{const n=e.children[r];n&&typeof n=="object"&&(this.matchAndHydrate(i,n),r++)})}}static restoreEventListeners(t,e,s){s.forEach(({path:r,events:i})=>{const n=this.findElementByPath(t,r);n&&e.events&&d.applyEvents(n,e.events)})}static restoreRefs(t,e,s){s.forEach(({path:r})=>{const i=this.findElementByPath(t,r);i&&e.ref&&typeof e.ref=="function"&&e.ref(i)})}static findElementByPath(t,e){const s=e.split(".").map(Number).slice(1);let r=t;for(const i of s){const n=Array.from(r.childNodes);if(i>=n.length)return null;r=n[i]}return r}static escapeHTML(t){if(!t)return"";const e={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"};return String(t).replace(/[&<>"']/g,s=>e[s])}static getStats(t){const e={totalNodes:0,elementNodes:0,textNodes:0,depth:0,classes:new Set,events:0,stateBindings:0},s=(r,i=0)=>{if(e.totalNodes++,e.depth=Math.max(e.depth,i),!r||typeof r!="object"||!r.tag){e.textNodes++;return}e.elementNodes++,r.props&&r.props.className&&r.props.className.split(" ").forEach(n=>{n&&e.classes.add(n)}),r.events&&(e.events+=Object.keys(r.events).length),r.isStateBinding&&e.stateBindings++,r.children&&Array.isArray(r.children)&&r.children.forEach(n=>{s(n,i+1)})};return s(t),{...e,classes:e.classes.size}}}export{u as RenderEngine};
-//# sourceMappingURL=render_engine.js.map
diff --git a/packages/flutterjs_engine/src/vdom/dist/render_engine.js.map b/packages/flutterjs_engine/src/vdom/dist/render_engine.js.map
deleted file mode 100644
index 8a75ec76..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/render_engine.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/render_engine.js"],
-  "sourcesContent": ["/**\r\n * RenderEngine - Universal Rendering Engine\r\n * \r\n * Automatically detects environment (server/client) and uses appropriate renderer:\r\n * - Server: SSR (HTML string generation)\r\n * - Client: CSR (DOM element creation)\r\n * \r\n * Also handles:\r\n * - Hydration data generation for SSR\r\n * - Critical CSS extraction\r\n * - Asset bundling\r\n * - Performance monitoring\r\n */\r\n\r\nimport { VNodeRenderer } from './vnode_renderer.js';\r\nimport { SSRRenderer } from './ssr_renderer.js';\r\n\r\nclass RenderEngine {\r\n  /**\r\n   * Universal render method - auto-detects environment\r\n   * @param {VNode} vnode - VNode tree to render\r\n   * @param {HTMLElement|null} target - Target element (client only)\r\n   * @param {Object} options - Rendering options\r\n   * @returns {HTMLElement|string} DOM element (client) or HTML string (server)\r\n   */\r\n  static render(vnode, target = null, options = {}) {\r\n    const env = this.detectEnvironment();\r\n\r\n    if (env === 'server') {\r\n      return this.renderServer(vnode, options);\r\n    } else {\r\n      return this.renderClient(vnode, target, options);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Detect execution environment\r\n   * @returns {string} 'server' or 'client'\r\n   */\r\n  static detectEnvironment() {\r\n    // Check for window object (browser)\r\n    if (typeof window !== 'undefined' && typeof window.document !== 'undefined') {\r\n      return 'client';\r\n    }\r\n\r\n    // Check for Node.js\r\n    if (typeof process !== 'undefined' && process.versions && process.versions.node) {\r\n      return 'server';\r\n    }\r\n\r\n    // Default to client\r\n    return 'client';\r\n  }\r\n\r\n  /**\r\n   * Server-side rendering\r\n   * @param {VNode} vnode - VNode tree\r\n   * @param {Object} options - SSR options\r\n   * @returns {string} Complete HTML document\r\n   */\r\n  static renderServer(vnode, options = {}) {\r\n    const {\r\n      title = 'FlutterJS App',\r\n      includeHydration = true,\r\n      includeCriticalCSS = true,\r\n      includeRuntime = true,\r\n      meta = {},\r\n      scripts = [],\r\n      styles = []\r\n    } = options;\r\n\r\n    // Generate HTML from VNode\r\n    const bodyHTML = SSRRenderer.renderVNode(vnode);\r\n\r\n    // Generate hydration data\r\n    const hydrationData = includeHydration \r\n      ? this.generateHydrationData(vnode)\r\n      : null;\r\n\r\n    // Extract critical CSS\r\n    const criticalCSS = includeCriticalCSS\r\n      ? this.extractCriticalCSS(vnode)\r\n      : '';\r\n\r\n    // Build complete HTML document\r\n    return this.buildHTMLDocument({\r\n      title,\r\n      meta,\r\n      criticalCSS,\r\n      bodyHTML,\r\n      hydrationData,\r\n      scripts,\r\n      styles,\r\n      includeRuntime\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Client-side rendering\r\n   * @param {VNode} vnode - VNode tree\r\n   * @param {HTMLElement} target - Target DOM element\r\n   * @param {Object} options - CSR options\r\n   * @returns {HTMLElement} Rendered DOM element\r\n   */\r\n  static renderClient(vnode, target, options = {}) {\r\n    if (!target) {\r\n      throw new Error('Target element is required for client-side rendering');\r\n    }\r\n\r\n    const {\r\n      clear = true,\r\n      measurePerformance = false\r\n    } = options;\r\n\r\n    const startTime = measurePerformance ? performance.now() : 0;\r\n\r\n    // Render to DOM\r\n    const element = VNodeRenderer.render(vnode, target, { clear });\r\n\r\n    if (measurePerformance) {\r\n      const endTime = performance.now();\r\n      console.log(`Render time: ${(endTime - startTime).toFixed(2)}ms`);\r\n    }\r\n\r\n    return element;\r\n  }\r\n\r\n  /**\r\n   * Build complete HTML document\r\n   * @private\r\n   */\r\n  static buildHTMLDocument({\r\n    title,\r\n    meta,\r\n    criticalCSS,\r\n    bodyHTML,\r\n    hydrationData,\r\n    scripts,\r\n    styles,\r\n    includeRuntime\r\n  }) {\r\n    const metaTags = this.generateMetaTags(meta);\r\n    const styleTags = this.generateStyleTags(styles, criticalCSS);\r\n    const scriptTags = this.generateScriptTags(scripts, includeRuntime);\r\n    const hydrationScript = hydrationData\r\n      ? `<script id=\"__FLUTTERJS_HYDRATION_DATA__\" type=\"application/json\">${JSON.stringify(hydrationData)}</script>`\r\n      : '';\r\n\r\n    return `<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>${this.escapeHTML(title)}</title>\r\n  ${metaTags}\r\n  ${styleTags}\r\n</head>\r\n<body>\r\n  <div id=\"root\">${bodyHTML}</div>\r\n  ${hydrationScript}\r\n  ${scriptTags}\r\n</body>\r\n</html>`;\r\n  }\r\n\r\n  /**\r\n   * Generate meta tags\r\n   * @private\r\n   */\r\n  static generateMetaTags(meta) {\r\n    const tags = [];\r\n\r\n    if (meta.description) {\r\n      tags.push(`<meta name=\"description\" content=\"${this.escapeHTML(meta.description)}\">`);\r\n    }\r\n\r\n    if (meta.keywords) {\r\n      tags.push(`<meta name=\"keywords\" content=\"${this.escapeHTML(meta.keywords)}\">`);\r\n    }\r\n\r\n    if (meta.author) {\r\n      tags.push(`<meta name=\"author\" content=\"${this.escapeHTML(meta.author)}\">`);\r\n    }\r\n\r\n    // Open Graph\r\n    if (meta.ogTitle) {\r\n      tags.push(`<meta property=\"og:title\" content=\"${this.escapeHTML(meta.ogTitle)}\">`);\r\n    }\r\n\r\n    if (meta.ogDescription) {\r\n      tags.push(`<meta property=\"og:description\" content=\"${this.escapeHTML(meta.ogDescription)}\">`);\r\n    }\r\n\r\n    if (meta.ogImage) {\r\n      tags.push(`<meta property=\"og:image\" content=\"${this.escapeHTML(meta.ogImage)}\">`);\r\n    }\r\n\r\n    // Twitter Card\r\n    if (meta.twitterCard) {\r\n      tags.push(`<meta name=\"twitter:card\" content=\"${this.escapeHTML(meta.twitterCard)}\">`);\r\n    }\r\n\r\n    // Custom meta tags\r\n    if (meta.custom) {\r\n      meta.custom.forEach(({ name, content, property }) => {\r\n        if (property) {\r\n          tags.push(`<meta property=\"${this.escapeHTML(property)}\" content=\"${this.escapeHTML(content)}\">`);\r\n        } else {\r\n          tags.push(`<meta name=\"${this.escapeHTML(name)}\" content=\"${this.escapeHTML(content)}\">`);\r\n        }\r\n      });\r\n    }\r\n\r\n    return tags.join('\\n  ');\r\n  }\r\n\r\n  /**\r\n   * Generate style tags\r\n   * @private\r\n   */\r\n  static generateStyleTags(styles, criticalCSS) {\r\n    const tags = [];\r\n\r\n    // Critical CSS inline\r\n    if (criticalCSS) {\r\n      tags.push(`<style id=\"critical-css\">${criticalCSS}</style>`);\r\n    }\r\n\r\n    // External stylesheets\r\n    styles.forEach(href => {\r\n      tags.push(`<link rel=\"stylesheet\" href=\"${this.escapeHTML(href)}\">`);\r\n    });\r\n\r\n    // Material Design base styles\r\n    tags.push(`<style id=\"md-base\">\r\n:root {\r\n  --md-sys-color-primary: #6750a4;\r\n  --md-sys-color-on-primary: #ffffff;\r\n  --md-sys-color-primary-container: #eaddff;\r\n  --md-sys-color-on-primary-container: #21005e;\r\n  --md-sys-color-surface: #fffbfe;\r\n  --md-sys-color-on-surface: #1c1b1f;\r\n  --md-sys-color-outline: #79747e;\r\n  --md-sys-color-outline-variant: #cac7cf;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nbody {\r\n  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n</style>`);\r\n\r\n    return tags.join('\\n  ');\r\n  }\r\n\r\n  /**\r\n   * Generate script tags\r\n   * @private\r\n   */\r\n  static generateScriptTags(scripts, includeRuntime) {\r\n    const tags = [];\r\n\r\n    // Runtime script for hydration\r\n    if (includeRuntime) {\r\n      tags.push(`<script src=\"/flutterjs-runtime.js\" defer></script>`);\r\n    }\r\n\r\n    // Additional scripts\r\n    scripts.forEach(src => {\r\n      tags.push(`<script src=\"${this.escapeHTML(src)}\" defer></script>`);\r\n    });\r\n\r\n    return tags.join('\\n  ');\r\n  }\r\n\r\n  /**\r\n   * Generate hydration data from VNode tree\r\n   * @param {VNode} vnode - VNode tree\r\n   * @returns {Object} Hydration data\r\n   */\r\n  static generateHydrationData(vnode) {\r\n    const data = {\r\n      version: '1.0.0',\r\n      timestamp: Date.now(),\r\n      widgets: [],\r\n      stateBindings: [],\r\n      events: [],\r\n      refs: []\r\n    };\r\n\r\n    // Traverse VNode tree and collect metadata\r\n    this.traverseVNode(vnode, (node, path) => {\r\n      // Collect widget metadata\r\n      if (node.metadata && node.metadata.widgetType) {\r\n        data.widgets.push({\r\n          path,\r\n          type: node.metadata.widgetType,\r\n          props: node.metadata.flutterProps || {},\r\n          key: node.key\r\n        });\r\n      }\r\n\r\n      // Collect state bindings\r\n      if (node.isStateBinding) {\r\n        data.stateBindings.push({\r\n          path,\r\n          widgetId: node.statefulWidgetId,\r\n          property: node.stateProperty\r\n        });\r\n      }\r\n\r\n      // Collect event handlers\r\n      if (node.events && Object.keys(node.events).length > 0) {\r\n        data.events.push({\r\n          path,\r\n          events: Object.keys(node.events)\r\n        });\r\n      }\r\n\r\n      // Collect refs\r\n      if (node.ref) {\r\n        data.refs.push({\r\n          path,\r\n          hasRef: true\r\n        });\r\n      }\r\n    });\r\n\r\n    return data;\r\n  }\r\n\r\n  /**\r\n   * Traverse VNode tree\r\n   * @private\r\n   */\r\n  static traverseVNode(vnode, callback, path = '0') {\r\n    if (!vnode || typeof vnode !== 'object' || !vnode.tag) {\r\n      return;\r\n    }\r\n\r\n    callback(vnode, path);\r\n\r\n    if (vnode.children && Array.isArray(vnode.children)) {\r\n      vnode.children.forEach((child, index) => {\r\n        if (child && typeof child === 'object' && child.tag) {\r\n          this.traverseVNode(child, callback, `${path}.${index}`);\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Extract critical CSS from VNode tree\r\n   * @param {VNode} vnode - VNode tree\r\n   * @returns {string} Critical CSS\r\n   */\r\n  static extractCriticalCSS(vnode) {\r\n    const classNames = new Set();\r\n    const inlineStyles = [];\r\n\r\n    // Collect all class names and inline styles\r\n    this.traverseVNode(vnode, (node) => {\r\n      if (node.props && node.props.className) {\r\n        node.props.className.split(' ').forEach(cls => {\r\n          if (cls) classNames.add(cls);\r\n        });\r\n      }\r\n\r\n      if (node.style && Object.keys(node.style).length > 0) {\r\n        // Track commonly used styles for optimization\r\n        inlineStyles.push(node.style);\r\n      }\r\n    });\r\n\r\n    // Generate CSS for collected classes\r\n    const css = [];\r\n\r\n    // Add utility classes\r\n    if (classNames.size > 0) {\r\n      classNames.forEach(className => {\r\n        if (className.startsWith('fjs-')) {\r\n          // Add FlutterJS-specific styles\r\n          css.push(this.getWidgetCSS(className));\r\n        }\r\n      });\r\n    }\r\n\r\n    return css.filter(Boolean).join('\\n');\r\n  }\r\n\r\n  /**\r\n   * Get CSS for widget class\r\n   * @private\r\n   */\r\n  static getWidgetCSS(className) {\r\n    const widgetStyles = {\r\n      'fjs-text': '.fjs-text { display: inline; }',\r\n      'fjs-container': '.fjs-container { display: block; }',\r\n      'fjs-column': '.fjs-column { display: flex; flex-direction: column; }',\r\n      'fjs-row': '.fjs-row { display: flex; flex-direction: row; }',\r\n      'fjs-center': '.fjs-center { display: flex; justify-content: center; align-items: center; }',\r\n      'fjs-scaffold': '.fjs-scaffold { min-height: 100vh; display: flex; flex-direction: column; }',\r\n      'fjs-app-bar': '.fjs-app-bar { display: flex; align-items: center; padding: 16px; min-height: 56px; }',\r\n      'fjs-card': '.fjs-card { border-radius: 12px; overflow: hidden; }',\r\n      'fjs-list-view': '.fjs-list-view { overflow-y: auto; display: flex; flex-direction: column; }',\r\n      'fjs-grid-view': '.fjs-grid-view { display: grid; gap: 16px; }'\r\n    };\r\n\r\n    return widgetStyles[className] || '';\r\n  }\r\n\r\n  /**\r\n   * Hydrate server-rendered HTML on client\r\n   * @param {HTMLElement} root - Root element with SSR HTML\r\n   * @param {VNode} vnode - VNode tree\r\n   * @param {Object} hydrationData - Hydration metadata\r\n   * @returns {HTMLElement} Hydrated root element\r\n   */\r\n  static hydrate(root, vnode, hydrationData = null) {\r\n    if (this.detectEnvironment() === 'server') {\r\n      throw new Error('Hydration can only run on the client');\r\n    }\r\n\r\n    // Load hydration data from script tag if not provided\r\n    if (!hydrationData) {\r\n      const dataScript = document.getElementById('__FLUTTERJS_HYDRATION_DATA__');\r\n      if (dataScript) {\r\n        try {\r\n          hydrationData = JSON.parse(dataScript.textContent);\r\n        } catch (error) {\r\n          console.error('Failed to parse hydration data:', error);\r\n        }\r\n      }\r\n    }\r\n\r\n    // Perform hydration\r\n    if (vnode && vnode.hydrate) {\r\n      return vnode.hydrate(root);\r\n    } else {\r\n      // Manual hydration using VNode tree\r\n      return this.hydrateManual(root, vnode, hydrationData);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Manual hydration process\r\n   * @private\r\n   */\r\n  static hydrateManual(root, vnode, hydrationData) {\r\n    // Match DOM nodes with VNodes\r\n    this.matchAndHydrate(root, vnode);\r\n\r\n    // Restore event listeners\r\n    if (hydrationData && hydrationData.events) {\r\n      this.restoreEventListeners(root, vnode, hydrationData.events);\r\n    }\r\n\r\n    // Restore refs\r\n    if (hydrationData && hydrationData.refs) {\r\n      this.restoreRefs(root, vnode, hydrationData.refs);\r\n    }\r\n\r\n    return root;\r\n  }\r\n\r\n  /**\r\n   * Match DOM nodes with VNodes and attach references\r\n   * @private\r\n   */\r\n  static matchAndHydrate(domNode, vnode) {\r\n    if (!domNode || !vnode || typeof vnode !== 'object') {\r\n      return;\r\n    }\r\n\r\n    // Store references\r\n    if (domNode.nodeType === Node.ELEMENT_NODE) {\r\n      domNode._vnode = vnode;\r\n      vnode._element = domNode;\r\n\r\n      // Recursively hydrate children\r\n      if (vnode.children && Array.isArray(vnode.children)) {\r\n        const domChildren = Array.from(domNode.childNodes);\r\n        let vnodeIndex = 0;\r\n\r\n        domChildren.forEach(domChild => {\r\n          const vnodeChild = vnode.children[vnodeIndex];\r\n          if (vnodeChild && typeof vnodeChild === 'object') {\r\n            this.matchAndHydrate(domChild, vnodeChild);\r\n            vnodeIndex++;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Restore event listeners from hydration data\r\n   * @private\r\n   */\r\n  static restoreEventListeners(root, vnode, eventData) {\r\n    eventData.forEach(({ path, events }) => {\r\n      const element = this.findElementByPath(root, path);\r\n      if (element && vnode.events) {\r\n        VNodeRenderer.applyEvents(element, vnode.events);\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Restore ref callbacks\r\n   * @private\r\n   */\r\n  static restoreRefs(root, vnode, refData) {\r\n    refData.forEach(({ path }) => {\r\n      const element = this.findElementByPath(root, path);\r\n      if (element && vnode.ref && typeof vnode.ref === 'function') {\r\n        vnode.ref(element);\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Find element by path\r\n   * @private\r\n   */\r\n  static findElementByPath(root, path) {\r\n    const indices = path.split('.').map(Number).slice(1); // Skip root '0'\r\n    let current = root;\r\n\r\n    for (const index of indices) {\r\n      const children = Array.from(current.childNodes);\r\n      if (index >= children.length) return null;\r\n      current = children[index];\r\n    }\r\n\r\n    return current;\r\n  }\r\n\r\n  /**\r\n   * Escape HTML special characters\r\n   * @private\r\n   */\r\n  static escapeHTML(str) {\r\n    if (!str) return '';\r\n    const map = {\r\n      '&': '&amp;',\r\n      '<': '&lt;',\r\n      '>': '&gt;',\r\n      '\"': '&quot;',\r\n      \"'\": '&#39;'\r\n    };\r\n    return String(str).replace(/[&<>\"']/g, c => map[c]);\r\n  }\r\n\r\n  /**\r\n   * Get rendering statistics\r\n   * @param {VNode} vnode - VNode tree\r\n   * @returns {Object} Statistics\r\n   */\r\n  static getStats(vnode) {\r\n    const stats = {\r\n      totalNodes: 0,\r\n      elementNodes: 0,\r\n      textNodes: 0,\r\n      depth: 0,\r\n      classes: new Set(),\r\n      events: 0,\r\n      stateBindings: 0\r\n    };\r\n\r\n    const calculateDepth = (node, currentDepth = 0) => {\r\n      stats.totalNodes++;\r\n      stats.depth = Math.max(stats.depth, currentDepth);\r\n\r\n      if (!node || typeof node !== 'object' || !node.tag) {\r\n        stats.textNodes++;\r\n        return;\r\n      }\r\n\r\n      stats.elementNodes++;\r\n\r\n      if (node.props && node.props.className) {\r\n        node.props.className.split(' ').forEach(cls => {\r\n          if (cls) stats.classes.add(cls);\r\n        });\r\n      }\r\n\r\n      if (node.events) {\r\n        stats.events += Object.keys(node.events).length;\r\n      }\r\n\r\n      if (node.isStateBinding) {\r\n        stats.stateBindings++;\r\n      }\r\n\r\n      if (node.children && Array.isArray(node.children)) {\r\n        node.children.forEach(child => {\r\n          calculateDepth(child, currentDepth + 1);\r\n        });\r\n      }\r\n    };\r\n\r\n    calculateDepth(vnode);\r\n\r\n    return {\r\n      ...stats,\r\n      classes: stats.classes.size\r\n    };\r\n  }\r\n}\r\n\r\n\r\nexport {RenderEngine}"],
-  "mappings": "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",
-  "names": ["VNodeRenderer", "SSRRenderer", "RenderEngine", "vnode", "target", "options", "title", "includeHydration", "includeCriticalCSS", "includeRuntime", "meta", "scripts", "styles", "bodyHTML", "hydrationData", "criticalCSS", "clear", "measurePerformance", "startTime", "element", "endTime", "metaTags", "styleTags", "scriptTags", "hydrationScript", "tags", "name", "content", "property", "href", "src", "data", "node", "path", "callback", "child", "index", "classNames", "inlineStyles", "cls", "css", "className", "root", "dataScript", "error", "domNode", "domChildren", "vnodeIndex", "domChild", "vnodeChild", "eventData", "events", "refData", "indices", "current", "children", "str", "map", "c", "stats", "calculateDepth", "currentDepth"]
-}
diff --git a/packages/flutterjs_engine/src/vdom/dist/runtime_index.js b/packages/flutterjs_engine/src/vdom/dist/runtime_index.js
deleted file mode 100644
index 05db58f7..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/runtime_index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import"./vnode.js";import{VNodeBuilder as c}from"./vnode_builder.js";import"./style_converter.js";import{VNodeRenderer as g}from"./vnode_renderer.js";import"./ssr_renderer.js";import{RenderEngine as h}from"./render_engine.js";import{Hydrator as R}from"./hydrator.js";class u{constructor(){this.app=null,this.rootElement=null,this.rootVNode=null,this.isHydrated=!1,this.hotReloadEnabled=!1,this.renderer=null,this.stateRegistry=new Map,this.performanceMetrics={initialRender:0,updates:0,totalRenderTime:0,averageRenderTime:0}}clearMetrics(){this.performanceMetrics={initialRender:0,updates:0,totalRenderTime:0,averageRenderTime:0}}runApp(e,t={}){const{target:o="#root",mode:i="auto",enableHotReload:s=!1,enablePerformanceTracking:d=!0,onError:a=null}=t;try{console.log(`  [RUNTIME] runApp called with target: ${o}`),this.app=e,this.hotReloadEnabled=s,this.rootElement=this.getTargetElement(o),console.log("  [RUNTIME] Target element found"),this.renderer=new g({debugMode:!0}),console.log("  [RUNTIME] VNodeRenderer instance created");const r=this.hasSSRContent(this.rootElement);return console.log(`  [RUNTIME] Has SSR content: ${r}`),r?(console.log("  [RUNTIME] Entering hydration mode"),this.hydrateApp(e,t)):(console.log("  [RUNTIME] Entering CSR mode"),this.renderApp(e,t)),s&&(console.log("  [RUNTIME] Setting up hot reload"),this.setupHotReload()),d&&(console.log("  [RUNTIME] Starting performance tracking"),this.startPerformanceTracking()),this}catch(r){throw a?a(r):console.error("FlutterJS Runtime Error:",r),r}}renderApp(e,t={}){console.log("  [RENDERAPP] Starting client-side render");const o=performance.now(),i=this.createBuildContext(t);console.log("  [RENDERAPP] Build context created");const s=e.build?e.build(i):e;console.log("  [RENDERAPP] Widget tree built"),console.log("  [RENDERAPP] Widget tree:",JSON.stringify(s,null,2).substring(0,200));const d=new c({debugMode:this.flutterConfig?.debugMode||!1,runtime:this});this.rootVNode=d.build(s,i),console.log("  [RENDERAPP] VNode created"),console.log(`  [RENDERAPP] VNode tag: ${this.rootVNode.tag}`),console.log(`  [RENDERAPP] VNode children count: ${this.rootVNode.children?this.rootVNode.children.length:0}`),console.log("  [RENDERAPP] VNode props:",this.rootVNode.props),console.log("  [RENDERAPP] Full VNode:",JSON.stringify(this.rootVNode,null,2).substring(0,300)),console.log("  [RENDERAPP] Root element before render:",this.rootElement.innerHTML.substring(0,100)),console.log("  [RENDERAPP] Root element classes:",this.rootElement.className),this.renderer||(this.renderer=new g({debugMode:!0})),this.renderer.render(this.rootVNode,this.rootElement,{clear:!0}),console.log("  [RENDERAPP] Rendered to DOM"),console.log("  [RENDERAPP] Root element after render:",this.rootElement.innerHTML.substring(0,200)),console.log("  [RENDERAPP] Root element child count:",this.rootElement.children.length),console.log("  [RENDERAPP] Root element children:",Array.from(this.rootElement.children).map(r=>({tag:r.tagName,class:r.className,text:r.textContent.substring(0,50)})));const a=performance.now();this.performanceMetrics.initialRender=a-o,console.log(`\u2713 App rendered in ${this.performanceMetrics.initialRender.toFixed(2)}ms`)}hydrateApp(e,t={}){console.log("  [HYDRATEAPP] Starting hydration");const o=performance.now(),i=this.createBuildContext(t);console.log("  [HYDRATEAPP] Build context created");const s=e.build?e.build(i):e;console.log("  [HYDRATEAPP] Widget tree built");const d=new c({debugMode:this.flutterConfig?.debugMode||!1,runtime:this});this.rootVNode=d.build(s,i),console.log("  [HYDRATEAPP] VNode created");const a=R.loadHydrationData();console.log("  [HYDRATEAPP] Hydration data loaded"),R.hydrate(this.rootElement,this.rootVNode,a),console.log("  [HYDRATEAPP] Hydration complete"),this.isHydrated=!0;const r=performance.now();this.performanceMetrics.initialRender=r-o,console.log(`\u2713 App hydrated in ${this.performanceMetrics.initialRender.toFixed(2)}ms`)}update(e){if(console.log("  [UPDATE] Update called"),!this.app||!this.rootElement)throw console.log("  [UPDATE] ERROR: App not initialized"),new Error("App not initialized. Call runApp() first.");const t=performance.now();e&&(console.log("  [UPDATE] Executing update function"),e());const o=this.createBuildContext();console.log("  [UPDATE] Build context created");const i=this.app.build?this.app.build(o):this.app;console.log("  [UPDATE] Widget tree rebuilt");const d=new c({debugMode:this.flutterConfig?.debugMode||!1,runtime:this}).build(i,o);console.log("  [UPDATE] New VNode created"),this.renderer||(this.renderer=new g({debugMode:!0})),this.renderer.render(d,this.rootElement,{clear:!0}),this.rootVNode=d;const r=performance.now()-t,N=r>0?r:.01;this.performanceMetrics.updates++,this.performanceMetrics.totalRenderTime+=N,this.performanceMetrics.averageRenderTime=this.performanceMetrics.totalRenderTime/this.performanceMetrics.updates,console.log(`  [UPDATE] Update metrics: updates=${this.performanceMetrics.updates}, renderTime=${r.toFixed(2)}ms`),this.hotReloadEnabled&&console.log(`\u267B Updated in ${r.toFixed(2)}ms`)}registerState(e,t){console.log(`  [REGISTRY] Registering state for ${e}`),this.stateRegistry.set(e,t);const o=t.setState.bind(t);t.setState=i=>{console.log(`  [REGISTRY] setState called for ${e}`),o(i),this.update()}}unregisterState(e){console.log(`  [REGISTRY] Unregistering state for ${e}`),this.stateRegistry.delete(e)}getState(e){return console.log(`  [REGISTRY] Getting state for ${e}`),this.stateRegistry.get(e)||null}hotReload(){if(console.log("  [HOTRELOAD] hotReload called"),!this.hotReloadEnabled){console.warn("Hot reload is not enabled");return}if(console.log("\u{1F525} Hot reloading..."),!this.app||!this.rootElement){console.warn("No app running. Cannot hot reload.");return}this.update()}createBuildContext(e={}){return console.log("  [CONTEXT] Creating build context"),{runtime:this,mediaQuery:this.getMediaQuery(),theme:e.theme||this.getDefaultTheme(),navigator:this.createNavigator(),...e.context}}getMediaQuery(){if(typeof window>"u")return console.log("  [MEDIAQUERY] Server-side - returning default"),{width:1920,height:1080,devicePixelRatio:1};const e={width:window.innerWidth,height:window.innerHeight,devicePixelRatio:window.devicePixelRatio||1,orientation:window.innerWidth>window.innerHeight?"landscape":"portrait"};return console.log("  [MEDIAQUERY] Client-side:",e),e}getDefaultTheme(){return console.log("  [THEME] Creating default Material Design theme"),{primaryColor:"#6750a4",onPrimary:"#ffffff",primaryContainer:"#eaddff",onPrimaryContainer:"#21005e",surface:"#fffbfe",onSurface:"#1c1b1f",outline:"#79747e",outlineVariant:"#cac7cf"}}createNavigator(){return console.log("  [NAVIGATOR] Creating navigator"),{push:e=>{console.log("Navigation not yet implemented:",e)},pop:()=>{console.log("Navigation not yet implemented")}}}getTargetElement(e){if(console.log(`  [TARGET] Getting target element: ${e}`),typeof e=="string"){const t=document.querySelector(e);if(!t)throw console.log(`  [TARGET] ERROR: Element not found for selector: ${e}`),new Error(`Target element "${e}" not found`);return console.log("  [TARGET] Found element by selector"),t}if(e instanceof HTMLElement)return console.log("  [TARGET] Using HTMLElement target"),e;throw console.log("  [TARGET] ERROR: Invalid target type"),new Error("Invalid target: must be a selector string or HTMLElement")}hasSSRContent(e){console.log("  [SSRCHECK] Checking for SSR content");const t=document.getElementById("__FLUTTERJS_HYDRATION_DATA__"),o=t&&e.children.length>0;return console.log(`  [SSRCHECK] Hydration script found: ${t!==null}, Element has children: ${e.children.length>0}`),o}setupHotReload(){if(typeof window>"u"){console.log("  [HOTRELOAD] Server-side environment, skipping");return}console.log("  [HOTRELOAD] Setting up hot reload listeners"),window.addEventListener("flutterjs:hotreload",()=>{console.log("  [HOTRELOAD] Received hot reload event"),this.hotReload()}),window.__flutterjs_hot_reload=()=>{console.log("  [HOTRELOAD] Called via global function"),this.hotReload()},console.log("\u{1F525} Hot reload enabled")}startPerformanceTracking(){if(typeof window>"u"){console.log("  [PERFTRACK] Server-side environment, skipping");return}console.log("  [PERFTRACK] Starting FPS tracking");let e=performance.now(),t=0;const o=()=>{t++;const i=performance.now();if(i>=e+1e3){const s=Math.round(t*1e3/(i-e));this.performanceMetrics.fps=s,console.log(`  [PERFTRACK] FPS: ${s}`),t=0,e=i}requestAnimationFrame(o)};requestAnimationFrame(o)}getMetrics(){if(console.log(`  [METRICS] Getting metrics - app exists: ${this.app!==null}`),!this.app)return console.log("  [METRICS] No app, returning null"),null;const e={...this.performanceMetrics,isHydrated:this.isHydrated,stateCount:this.stateRegistry.size,vnodeStats:this.rootVNode?h.getStats(this.rootVNode):null};return console.log("  [METRICS] Returning metrics:",e),e}destroy(){console.log("  [DESTROY] Destroying runtime"),this.rootElement&&this.renderer&&(console.log("  [DESTROY] Cleaning up event listeners"),this.renderer.cleanupEventListeners(this.rootElement)),console.log(`  [DESTROY] Clearing state registry (size: ${this.stateRegistry.size})`),this.stateRegistry.clear(),typeof window<"u"&&(console.log("  [DESTROY] Removing hot reload listener"),window.removeEventListener("flutterjs:hotreload",this.hotReload),delete window.__flutterjs_hot_reload),this.app=null,this.rootElement=null,this.rootVNode=null,this.renderer=null,console.log("\u2713 Runtime destroyed")}}let n=null;function m(l,e={}){return console.log("[GLOBAL] runApp called"),n||(console.log("[GLOBAL] Creating new global runtime"),n=new u),n.runApp(l,e)}function f(){return console.log(`[GLOBAL] getRuntime called, exists: ${n!==null}`),n}function p(l){if(console.log("[GLOBAL] updateApp called"),!n)throw console.log("[GLOBAL] ERROR: No runtime"),new Error("No app running. Call runApp() first.");n.update(l)}function E(){return console.log("[GLOBAL] getMetrics called"),n?n.getMetrics():(console.log("[GLOBAL] No runtime, returning null"),null)}function T(){if(console.log("[GLOBAL] hotReload called"),!n){console.warn("No app running");return}n.hotReload()}function A(l,e={}){console.log("[GLOBAL] renderToString called");const t={mediaQuery:{width:1920,height:1080,devicePixelRatio:1},theme:e.theme||{},...e.context};console.log("[GLOBAL] SSR: Creating build context");const o=l.build?l.build(t):l;console.log("[GLOBAL] SSR: Building VNode");const i=new c({debugMode:this.flutterConfig?.debugMode||!1,runtime:this});return this.rootVNode=i.build(o,t),console.log("[GLOBAL] SSR: Rendering to string"),h.renderServer(vnode,{title:e.title||"FlutterJS App",meta:e.meta||{},styles:e.styles||[],scripts:e.scripts||[],includeHydration:e.includeHydration!==!1,includeCriticalCSS:e.includeCriticalCSS!==!1,includeRuntime:e.includeRuntime!==!1})}function S(l,e={}){console.log("[GLOBAL] hydrate called"),n||(console.log("[GLOBAL] Creating new global runtime for hydration"),n=new u);const t=e.target||"#root";console.log(`[GLOBAL] Getting target: ${t}`);const o=typeof t=="string"?document.querySelector(t):t;if(!o)throw console.log("[GLOBAL] ERROR: Target not found"),new Error(`Target element "${t}" not found`);return console.log("[GLOBAL] Setting up hydration"),n.rootElement=o,n.app=l,n.hydrateApp(l,e),n}var v={runApp:m,getRuntime:f,updateApp:p,getMetrics:E,hotReload:T,renderToString:A,hydrate:S,VNodeRuntime:u};typeof window<"u"&&(console.log("[GLOBAL] Setting up window.FlutterJS"),window.FlutterJS={runApp:m,getRuntime:f,updateApp:p,getMetrics:E,hotReload:T,renderToString:A,hydrate:S},console.log("[GLOBAL] window.FlutterJS ready"));function x(){n&&n.clearMetrics()}export{u as VNodeRuntime,x as clearMetrics,v as default,E as getMetrics,f as getRuntime,T as hotReload,S as hydrate,A as renderToString,m as runApp,p as updateApp};
-//# sourceMappingURL=runtime_index.js.map
diff --git a/packages/flutterjs_engine/src/vdom/dist/runtime_index.js.map b/packages/flutterjs_engine/src/vdom/dist/runtime_index.js.map
deleted file mode 100644
index d8f9f25c..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/runtime_index.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/runtime_index.js"],
-  "sourcesContent": ["/**\r\n * FlutterJS Runtime - Complete Integration Layer\r\n * \r\n * FIXED: All 3 VNodeRenderer.render() calls now properly instantiate the class\r\n */\r\n\r\nimport { VNode } from './vnode.js';\r\nimport { VNodeBuilder } from './vnode_builder.js';\r\nimport { StyleConverter } from './style_converter.js';\r\nimport { VNodeRenderer } from './vnode_renderer.js';\r\nimport { SSRRenderer } from './ssr_renderer.js';\r\nimport { RenderEngine } from './render_engine.js';\r\nimport { Hydrator } from './hydrator.js';\r\n\r\nexport class VNodeRuntime {\r\n  constructor() {\r\n    this.app = null;\r\n    this.rootElement = null;\r\n    this.rootVNode = null;\r\n    this.isHydrated = false;\r\n    this.hotReloadEnabled = false;\r\n    this.renderer = null;  // \u2705 ADD: Store renderer instance\r\n    this.stateRegistry = new Map();\r\n    this.performanceMetrics = {\r\n      initialRender: 0,\r\n      updates: 0,\r\n      totalRenderTime: 0,\r\n      averageRenderTime: 0\r\n    };\r\n  }\r\n\r\n  clearMetrics() {\r\n    this.performanceMetrics = {\r\n      initialRender: 0,\r\n      updates: 0,\r\n      totalRenderTime: 0,\r\n      averageRenderTime: 0\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Start the application\r\n   * @param {Widget} app - Root widget\r\n   * @param {Object} options - Runtime options\r\n   */\r\n  runApp(app, options = {}) {\r\n    const {\r\n      target = '#root',\r\n      mode = 'auto', // 'csr', 'ssr', 'auto'\r\n      enableHotReload = false,\r\n      enablePerformanceTracking = true,\r\n      onError = null\r\n    } = options;\r\n\r\n    try {\r\n      console.log(`  [RUNTIME] runApp called with target: ${target}`);\r\n      this.app = app;\r\n      this.hotReloadEnabled = enableHotReload;\r\n\r\n      // Get target element\r\n      this.rootElement = this.getTargetElement(target);\r\n      console.log(`  [RUNTIME] Target element found`);\r\n\r\n      // \u2705 CREATE RENDERER INSTANCE HERE\r\n      this.renderer = new VNodeRenderer({ debugMode: true });\r\n      console.log(`  [RUNTIME] VNodeRenderer instance created`);\r\n\r\n      // Check if SSR content exists\r\n      const hasSSRContent = this.hasSSRContent(this.rootElement);\r\n      console.log(`  [RUNTIME] Has SSR content: ${hasSSRContent}`);\r\n\r\n      if (hasSSRContent) {\r\n        // Hydration mode\r\n        console.log(`  [RUNTIME] Entering hydration mode`);\r\n        this.hydrateApp(app, options);\r\n      } else {\r\n        // Client-side render mode\r\n        console.log(`  [RUNTIME] Entering CSR mode`);\r\n        this.renderApp(app, options);\r\n      }\r\n\r\n      // Setup hot reload if enabled\r\n      if (enableHotReload) {\r\n        console.log(`  [RUNTIME] Setting up hot reload`);\r\n        this.setupHotReload();\r\n      }\r\n\r\n      // Track performance\r\n      if (enablePerformanceTracking) {\r\n        console.log(`  [RUNTIME] Starting performance tracking`);\r\n        this.startPerformanceTracking();\r\n      }\r\n\r\n      return this;\r\n    } catch (error) {\r\n      if (onError) {\r\n        onError(error);\r\n      } else {\r\n        console.error('FlutterJS Runtime Error:', error);\r\n      }\r\n      throw error;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Client-side render the app\r\n   * @private\r\n   */\r\n  renderApp(app, options = {}) {\r\n    console.log(`  [RENDERAPP] Starting client-side render`);\r\n    const startTime = performance.now();\r\n\r\n    // Build widget tree\r\n    const context = this.createBuildContext(options);\r\n    console.log(`  [RENDERAPP] Build context created`);\r\n\r\n    const widgetTree = app.build ? app.build(context) : app;\r\n    console.log(`  [RENDERAPP] Widget tree built`);\r\n    console.log(`  [RENDERAPP] Widget tree:`, JSON.stringify(widgetTree, null, 2).substring(0, 200));\r\n\r\n    // Convert to VNode\r\n    const vNodeBuilder = new VNodeBuilder({\r\n      debugMode: this.flutterConfig?.debugMode || false,\r\n      runtime: this  // \u2190 CRITICAL: Pass runtime\r\n    });\r\n    this.rootVNode = vNodeBuilder.build(widgetTree, context,);\r\n    console.log(`  [RENDERAPP] VNode created`);\r\n    console.log(`  [RENDERAPP] VNode tag: ${this.rootVNode.tag}`);\r\n    console.log(`  [RENDERAPP] VNode children count: ${this.rootVNode.children ? this.rootVNode.children.length : 0}`);\r\n    console.log(`  [RENDERAPP] VNode props:`, this.rootVNode.props);\r\n    console.log(`  [RENDERAPP] Full VNode:`, JSON.stringify(this.rootVNode, null, 2).substring(0, 300));\r\n\r\n    // Render to DOM\r\n    console.log(`  [RENDERAPP] Root element before render:`, this.rootElement.innerHTML.substring(0, 100));\r\n    console.log(`  [RENDERAPP] Root element classes:`, this.rootElement.className);\r\n\r\n    // \u2705 FIX #1: Use instance instead of static call\r\n    if (!this.renderer) {\r\n      this.renderer = new VNodeRenderer({ debugMode: true });\r\n    }\r\n\r\n    this.renderer.render(this.rootVNode, this.rootElement, {\r\n      clear: true\r\n    });\r\n    console.log(`  [RENDERAPP] Rendered to DOM`);\r\n\r\n    console.log(`  [RENDERAPP] Root element after render:`, this.rootElement.innerHTML.substring(0, 200));\r\n    console.log(`  [RENDERAPP] Root element child count:`, this.rootElement.children.length);\r\n    console.log(`  [RENDERAPP] Root element children:`, Array.from(this.rootElement.children).map(c => ({ tag: c.tagName, class: c.className, text: c.textContent.substring(0, 50) })));\r\n\r\n    const endTime = performance.now();\r\n    this.performanceMetrics.initialRender = endTime - startTime;\r\n\r\n    console.log(`\u2713 App rendered in ${this.performanceMetrics.initialRender.toFixed(2)}ms`);\r\n  }\r\n\r\n  /**\r\n   * Hydrate server-rendered app\r\n   * @private\r\n   */\r\n  hydrateApp(app, options = {}) {\r\n    console.log(`  [HYDRATEAPP] Starting hydration`);\r\n    const startTime = performance.now();\r\n\r\n    // Build widget tree\r\n    const context = this.createBuildContext(options);\r\n    console.log(`  [HYDRATEAPP] Build context created`);\r\n\r\n    const widgetTree = app.build ? app.build(context) : app;\r\n    console.log(`  [HYDRATEAPP] Widget tree built`);\r\n    const vNodeBuilder = new VNodeBuilder({\r\n      debugMode: this.flutterConfig?.debugMode || false,\r\n      runtime: this  // \u2190 CRITICAL: Pass runtime\r\n    });\r\n    // Convert to VNode\r\n    this.rootVNode = vNodeBuilder.build(widgetTree, context);\r\n    console.log(`  [HYDRATEAPP] VNode created`);\r\n\r\n    // Hydrate\r\n    const hydrationData = Hydrator.loadHydrationData();\r\n    console.log(`  [HYDRATEAPP] Hydration data loaded`);\r\n\r\n    Hydrator.hydrate(this.rootElement, this.rootVNode, hydrationData);\r\n    console.log(`  [HYDRATEAPP] Hydration complete`);\r\n\r\n    this.isHydrated = true;\r\n\r\n    const endTime = performance.now();\r\n    this.performanceMetrics.initialRender = endTime - startTime;\r\n\r\n    console.log(`\u2713 App hydrated in ${this.performanceMetrics.initialRender.toFixed(2)}ms`);\r\n  }\r\n\r\n  /**\r\n   * Update the application (e.g., after state change)\r\n   * @param {Function} updateFn - Function that updates state\r\n   */\r\n  update(updateFn) {\r\n    console.log(`  [UPDATE] Update called`);\r\n\r\n    if (!this.app || !this.rootElement) {\r\n      console.log(`  [UPDATE] ERROR: App not initialized`);\r\n      throw new Error('App not initialized. Call runApp() first.');\r\n    }\r\n\r\n    const startTime = performance.now();\r\n\r\n    // Execute update function\r\n    if (updateFn) {\r\n      console.log(`  [UPDATE] Executing update function`);\r\n      updateFn();\r\n    }\r\n\r\n    // Rebuild widget tree\r\n    const context = this.createBuildContext();\r\n    console.log(`  [UPDATE] Build context created`);\r\n\r\n    const widgetTree = this.app.build ? this.app.build(context) : this.app;\r\n    console.log(`  [UPDATE] Widget tree rebuilt`);\r\n\r\n    const vNodeBuilder = new VNodeBuilder({\r\n      debugMode: this.flutterConfig?.debugMode || false,\r\n      runtime: this  // \u2190 CRITICAL: Pass runtime\r\n    });\r\n\r\n    // Convert to VNode\r\n    const newVNode = vNodeBuilder.build(widgetTree, context);\r\n    console.log(`  [UPDATE] New VNode created`);\r\n\r\n    // \u2705 FIX #2 & #3: Use instance instead of static calls\r\n    if (!this.renderer) {\r\n      this.renderer = new VNodeRenderer({ debugMode: true });\r\n    }\r\n\r\n    this.renderer.render(newVNode, this.rootElement, { clear: true });\r\n\r\n    this.rootVNode = newVNode;\r\n\r\n    const endTime = performance.now();\r\n    const renderTime = endTime - startTime;\r\n\r\n    // Ensure at least 0.01ms is recorded if time was measured\r\n    const recordedTime = renderTime > 0 ? renderTime : 0.01;\r\n\r\n    this.performanceMetrics.updates++;\r\n    this.performanceMetrics.totalRenderTime += recordedTime;\r\n    this.performanceMetrics.averageRenderTime =\r\n      this.performanceMetrics.totalRenderTime / this.performanceMetrics.updates;\r\n\r\n    console.log(`  [UPDATE] Update metrics: updates=${this.performanceMetrics.updates}, renderTime=${renderTime.toFixed(2)}ms`);\r\n\r\n    if (this.hotReloadEnabled) {\r\n      console.log(`\u267B Updated in ${renderTime.toFixed(2)}ms`);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Register a stateful widget\r\n   * @param {string} widgetId - Unique widget identifier\r\n   * @param {Object} stateObject - State object with setState method\r\n   */\r\n  registerState(widgetId, stateObject) {\r\n    console.log(`  [REGISTRY] Registering state for ${widgetId}`);\r\n    this.stateRegistry.set(widgetId, stateObject);\r\n\r\n    // Wrap setState to trigger runtime update\r\n    const originalSetState = stateObject.setState.bind(stateObject);\r\n    stateObject.setState = (updater) => {\r\n      console.log(`  [REGISTRY] setState called for ${widgetId}`);\r\n      originalSetState(updater);\r\n      this.update();\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Unregister a stateful widget\r\n   * @param {string} widgetId - Widget identifier\r\n   */\r\n  unregisterState(widgetId) {\r\n    console.log(`  [REGISTRY] Unregistering state for ${widgetId}`);\r\n    this.stateRegistry.delete(widgetId);\r\n  }\r\n\r\n  /**\r\n   * Get state object by widget ID\r\n   * @param {string} widgetId - Widget identifier\r\n   * @returns {Object|null} State object\r\n   */\r\n  getState(widgetId) {\r\n    console.log(`  [REGISTRY] Getting state for ${widgetId}`);\r\n    return this.stateRegistry.get(widgetId) || null;\r\n  }\r\n\r\n  /**\r\n   * Hot reload the application\r\n   */\r\n  hotReload() {\r\n    console.log(`  [HOTRELOAD] hotReload called`);\r\n\r\n    if (!this.hotReloadEnabled) {\r\n      console.warn('Hot reload is not enabled');\r\n      return;\r\n    }\r\n\r\n    console.log('\uD83D\uDD25 Hot reloading...');\r\n\r\n    if (!this.app || !this.rootElement) {\r\n      console.warn('No app running. Cannot hot reload.');\r\n      return;\r\n    }\r\n\r\n    this.update();\r\n  }\r\n\r\n  /**\r\n   * Create build context\r\n   * @private\r\n   */\r\n  createBuildContext(options = {}) {\r\n    console.log(`  [CONTEXT] Creating build context`);\r\n\r\n    return {\r\n      runtime: this,\r\n      mediaQuery: this.getMediaQuery(),\r\n      theme: options.theme || this.getDefaultTheme(),\r\n      navigator: this.createNavigator(),\r\n      ...options.context\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get media query information\r\n   * @private\r\n   */\r\n  getMediaQuery() {\r\n    if (typeof window === 'undefined') {\r\n      console.log(`  [MEDIAQUERY] Server-side - returning default`);\r\n      return {\r\n        width: 1920,\r\n        height: 1080,\r\n        devicePixelRatio: 1\r\n      };\r\n    }\r\n\r\n    const mq = {\r\n      width: window.innerWidth,\r\n      height: window.innerHeight,\r\n      devicePixelRatio: window.devicePixelRatio || 1,\r\n      orientation: window.innerWidth > window.innerHeight ? 'landscape' : 'portrait'\r\n    };\r\n\r\n    console.log(`  [MEDIAQUERY] Client-side:`, mq);\r\n    return mq;\r\n  }\r\n\r\n  /**\r\n   * Get default Material Design theme\r\n   * @private\r\n   */\r\n  getDefaultTheme() {\r\n    console.log(`  [THEME] Creating default Material Design theme`);\r\n\r\n    return {\r\n      primaryColor: '#6750a4',\r\n      onPrimary: '#ffffff',\r\n      primaryContainer: '#eaddff',\r\n      onPrimaryContainer: '#21005e',\r\n      surface: '#fffbfe',\r\n      onSurface: '#1c1b1f',\r\n      outline: '#79747e',\r\n      outlineVariant: '#cac7cf'\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Create navigator for routing\r\n   * @private\r\n   */\r\n  createNavigator() {\r\n    console.log(`  [NAVIGATOR] Creating navigator`);\r\n\r\n    return {\r\n      push: (route) => {\r\n        console.log('Navigation not yet implemented:', route);\r\n      },\r\n      pop: () => {\r\n        console.log('Navigation not yet implemented');\r\n      }\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get target element\r\n   * @private\r\n   */\r\n  getTargetElement(target) {\r\n    console.log(`  [TARGET] Getting target element: ${target}`);\r\n\r\n    if (typeof target === 'string') {\r\n      const element = document.querySelector(target);\r\n      if (!element) {\r\n        console.log(`  [TARGET] ERROR: Element not found for selector: ${target}`);\r\n        throw new Error(`Target element \"${target}\" not found`);\r\n      }\r\n      console.log(`  [TARGET] Found element by selector`);\r\n      return element;\r\n    }\r\n\r\n    if (target instanceof HTMLElement) {\r\n      console.log(`  [TARGET] Using HTMLElement target`);\r\n      return target;\r\n    }\r\n\r\n    console.log(`  [TARGET] ERROR: Invalid target type`);\r\n    throw new Error('Invalid target: must be a selector string or HTMLElement');\r\n  }\r\n\r\n  /**\r\n   * Check if element has SSR content\r\n   * @private\r\n   */\r\n  hasSSRContent(element) {\r\n    console.log(`  [SSRCHECK] Checking for SSR content`);\r\n\r\n    // Check for hydration data script\r\n    const hydrationScript = document.getElementById('__FLUTTERJS_HYDRATION_DATA__');\r\n\r\n    // Check if element has children (SSR content)\r\n    const hasContent = hydrationScript && element.children.length > 0;\r\n    console.log(`  [SSRCHECK] Hydration script found: ${hydrationScript !== null}, Element has children: ${element.children.length > 0}`);\r\n\r\n    return hasContent;\r\n  }\r\n\r\n  /**\r\n   * Setup hot reload listener\r\n   * @private\r\n   */\r\n  setupHotReload() {\r\n    if (typeof window === 'undefined') {\r\n      console.log(`  [HOTRELOAD] Server-side environment, skipping`);\r\n      return;\r\n    }\r\n\r\n    console.log(`  [HOTRELOAD] Setting up hot reload listeners`);\r\n\r\n    // Listen for custom hot reload event\r\n    window.addEventListener('flutterjs:hotreload', () => {\r\n      console.log(`  [HOTRELOAD] Received hot reload event`);\r\n      this.hotReload();\r\n    });\r\n\r\n    // Expose hot reload globally\r\n    window.__flutterjs_hot_reload = () => {\r\n      console.log(`  [HOTRELOAD] Called via global function`);\r\n      this.hotReload();\r\n    };\r\n\r\n    console.log('\uD83D\uDD25 Hot reload enabled');\r\n  }\r\n\r\n  /**\r\n   * Start performance tracking\r\n   * @private\r\n   */\r\n  startPerformanceTracking() {\r\n    if (typeof window === 'undefined') {\r\n      console.log(`  [PERFTRACK] Server-side environment, skipping`);\r\n      return;\r\n    }\r\n\r\n    console.log(`  [PERFTRACK] Starting FPS tracking`);\r\n\r\n    // Track FPS\r\n    let lastTime = performance.now();\r\n    let frames = 0;\r\n\r\n    const trackFPS = () => {\r\n      frames++;\r\n      const currentTime = performance.now();\r\n\r\n      if (currentTime >= lastTime + 1000) {\r\n        const fps = Math.round((frames * 1000) / (currentTime - lastTime));\r\n        this.performanceMetrics.fps = fps;\r\n        console.log(`  [PERFTRACK] FPS: ${fps}`);\r\n        frames = 0;\r\n        lastTime = currentTime;\r\n      }\r\n\r\n      requestAnimationFrame(trackFPS);\r\n    };\r\n\r\n    requestAnimationFrame(trackFPS);\r\n  }\r\n\r\n  /**\r\n   * Get performance metrics\r\n   * @returns {Object} Performance metrics\r\n   */\r\n  getMetrics() {\r\n    console.log(`  [METRICS] Getting metrics - app exists: ${this.app !== null}`);\r\n\r\n    if (!this.app) {\r\n      console.log(`  [METRICS] No app, returning null`);\r\n      return null;\r\n    }\r\n\r\n    const metrics = {\r\n      ...this.performanceMetrics,\r\n      isHydrated: this.isHydrated,\r\n      stateCount: this.stateRegistry.size,\r\n      vnodeStats: this.rootVNode ? RenderEngine.getStats(this.rootVNode) : null\r\n    };\r\n\r\n    console.log(`  [METRICS] Returning metrics:`, metrics);\r\n    return metrics;\r\n  }\r\n\r\n  /**\r\n   * Destroy the runtime and cleanup\r\n   */\r\n  destroy() {\r\n    console.log(`  [DESTROY] Destroying runtime`);\r\n\r\n    // Cleanup event listeners\r\n    if (this.rootElement && this.renderer) {\r\n      console.log(`  [DESTROY] Cleaning up event listeners`);\r\n      this.renderer.cleanupEventListeners(this.rootElement);\r\n    }\r\n\r\n    // Clear state registry\r\n    console.log(`  [DESTROY] Clearing state registry (size: ${this.stateRegistry.size})`);\r\n    this.stateRegistry.clear();\r\n\r\n    // Remove hot reload listener\r\n    if (typeof window !== 'undefined') {\r\n      console.log(`  [DESTROY] Removing hot reload listener`);\r\n      window.removeEventListener('flutterjs:hotreload', this.hotReload);\r\n      delete window.__flutterjs_hot_reload;\r\n    }\r\n\r\n    // Clear references\r\n    this.app = null;\r\n    this.rootElement = null;\r\n    this.rootVNode = null;\r\n    this.renderer = null;\r\n\r\n    console.log('\u2713 Runtime destroyed');\r\n  }\r\n}\r\n\r\n// ============================================================================\r\n// Global API\r\n// ============================================================================\r\n\r\nlet globalRuntime = null;\r\n\r\n/**\r\n * Start FlutterJS application\r\n * @param {Widget} app - Root widget\r\n * @param {Object} options - Runtime options\r\n */\r\nexport function runApp(app, options = {}) {\r\n  console.log(`[GLOBAL] runApp called`);\r\n\r\n  if (!globalRuntime) {\r\n    console.log(`[GLOBAL] Creating new global runtime`);\r\n    globalRuntime = new VNodeRuntime();\r\n  }\r\n  return globalRuntime.runApp(app, options);\r\n}\r\n\r\n/**\r\n * Get the global runtime instance\r\n * @returns {VNodeRuntime} Runtime instance\r\n */\r\nexport function getRuntime() {\r\n  console.log(`[GLOBAL] getRuntime called, exists: ${globalRuntime !== null}`);\r\n  return globalRuntime;\r\n}\r\n\r\n/**\r\n * Update the application\r\n * @param {Function} updateFn - Update function\r\n */\r\nexport function updateApp(updateFn) {\r\n  console.log(`[GLOBAL] updateApp called`);\r\n\r\n  if (!globalRuntime) {\r\n    console.log(`[GLOBAL] ERROR: No runtime`);\r\n    throw new Error('No app running. Call runApp() first.');\r\n  }\r\n  globalRuntime.update(updateFn);\r\n}\r\n\r\n/**\r\n * Get performance metrics\r\n * @returns {Object} Metrics\r\n */\r\nexport function getMetrics() {\r\n  console.log(`[GLOBAL] getMetrics called`);\r\n\r\n  if (!globalRuntime) {\r\n    console.log(`[GLOBAL] No runtime, returning null`);\r\n    return null;\r\n  }\r\n  return globalRuntime.getMetrics();\r\n}\r\n\r\n/**\r\n * Trigger hot reload\r\n */\r\nexport function hotReload() {\r\n  console.log(`[GLOBAL] hotReload called`);\r\n\r\n  if (!globalRuntime) {\r\n    console.warn('No app running');\r\n    return;\r\n  }\r\n  globalRuntime.hotReload();\r\n}\r\n\r\n/**\r\n * Server-side render to HTML\r\n * @param {Widget} app - Root widget\r\n * @param {Object} options - SSR options\r\n * @returns {string} HTML string\r\n */\r\nexport function renderToString(app, options = {}) {\r\n  console.log(`[GLOBAL] renderToString called`);\r\n\r\n  const context = {\r\n    mediaQuery: { width: 1920, height: 1080, devicePixelRatio: 1 },\r\n    theme: options.theme || {},\r\n    ...options.context\r\n  };\r\n\r\n  console.log(`[GLOBAL] SSR: Creating build context`);\r\n  const widgetTree = app.build ? app.build(context) : app;\r\n\r\n  console.log(`[GLOBAL] SSR: Building VNode`);\r\n  // \u2705 Create instance with runtime\r\n  const vNodeBuilder = new VNodeBuilder({\r\n    debugMode: this.flutterConfig?.debugMode || false,\r\n    runtime: this  // \u2190 CRITICAL: Pass runtime\r\n  });\r\n  this.rootVNode = vNodeBuilder.build(widgetTree, context);\r\n  console.log(`[GLOBAL] SSR: Rendering to string`);\r\n  return RenderEngine.renderServer(vnode, {\r\n    title: options.title || 'FlutterJS App',\r\n    meta: options.meta || {},\r\n    styles: options.styles || [],\r\n    scripts: options.scripts || [],\r\n    includeHydration: options.includeHydration !== false,\r\n    includeCriticalCSS: options.includeCriticalCSS !== false,\r\n    includeRuntime: options.includeRuntime !== false\r\n  });\r\n}\r\n\r\n/**\r\n * Hydrate server-rendered content\r\n * @param {Widget} app - Root widget\r\n * @param {Object} options - Hydration options\r\n */\r\nexport function hydrate(app, options = {}) {\r\n  console.log(`[GLOBAL] hydrate called`);\r\n\r\n  if (!globalRuntime) {\r\n    console.log(`[GLOBAL] Creating new global runtime for hydration`);\r\n    globalRuntime = new VNodeRuntime();\r\n  }\r\n\r\n  const target = options.target || '#root';\r\n  console.log(`[GLOBAL] Getting target: ${target}`);\r\n\r\n  const rootElement = typeof target === 'string'\r\n    ? document.querySelector(target)\r\n    : target;\r\n\r\n  if (!rootElement) {\r\n    console.log(`[GLOBAL] ERROR: Target not found`);\r\n    throw new Error(`Target element \"${target}\" not found`);\r\n  }\r\n\r\n  console.log(`[GLOBAL] Setting up hydration`);\r\n  globalRuntime.rootElement = rootElement;\r\n  globalRuntime.app = app;\r\n  globalRuntime.hydrateApp(app, options);\r\n\r\n  return globalRuntime;\r\n}\r\n\r\n// Default export\r\nexport default {\r\n  runApp,\r\n  getRuntime,\r\n  updateApp,\r\n  getMetrics,\r\n  hotReload,\r\n  renderToString,\r\n  hydrate,\r\n\r\n  VNodeRuntime\r\n};\r\n\r\n// Browser global\r\nif (typeof window !== 'undefined') {\r\n  console.log(`[GLOBAL] Setting up window.FlutterJS`);\r\n  window.FlutterJS = {\r\n    runApp,\r\n    getRuntime,\r\n    updateApp,\r\n    getMetrics,\r\n    hotReload,\r\n    renderToString,\r\n    hydrate\r\n  };\r\n  console.log(`[GLOBAL] window.FlutterJS ready`);\r\n}\r\n\r\nexport function clearMetrics() {\r\n  if (!globalRuntime) return;\r\n  globalRuntime.clearMetrics();\r\n}"],
-  "mappings": "AAMA,MAAsB,aACtB,OAAS,gBAAAA,MAAoB,qBAC7B,MAA+B,uBAC/B,OAAS,iBAAAC,MAAqB,sBAC9B,MAA4B,oBAC5B,OAAS,gBAAAC,MAAoB,qBAC7B,OAAS,YAAAC,MAAgB,gBAElB,MAAMC,CAAa,CACxB,aAAc,CACZ,KAAK,IAAM,KACX,KAAK,YAAc,KACnB,KAAK,UAAY,KACjB,KAAK,WAAa,GAClB,KAAK,iBAAmB,GACxB,KAAK,SAAW,KAChB,KAAK,cAAgB,IAAI,IACzB,KAAK,mBAAqB,CACxB,cAAe,EACf,QAAS,EACT,gBAAiB,EACjB,kBAAmB,CACrB,CACF,CAEA,cAAe,CACb,KAAK,mBAAqB,CACxB,cAAe,EACf,QAAS,EACT,gBAAiB,EACjB,kBAAmB,CACrB,CACF,CAOA,OAAOC,EAAKC,EAAU,CAAC,EAAG,CACxB,KAAM,CACJ,OAAAC,EAAS,QACT,KAAAC,EAAO,OACP,gBAAAC,EAAkB,GAClB,0BAAAC,EAA4B,GAC5B,QAAAC,EAAU,IACZ,EAAIL,EAEJ,GAAI,CACF,QAAQ,IAAI,0CAA0CC,CAAM,EAAE,EAC9D,KAAK,IAAMF,EACX,KAAK,iBAAmBI,EAGxB,KAAK,YAAc,KAAK,iBAAiBF,CAAM,EAC/C,QAAQ,IAAI,kCAAkC,EAG9C,KAAK,SAAW,IAAIN,EAAc,CAAE,UAAW,EAAK,CAAC,EACrD,QAAQ,IAAI,4CAA4C,EAGxD,MAAMW,EAAgB,KAAK,cAAc,KAAK,WAAW,EACzD,eAAQ,IAAI,gCAAgCA,CAAa,EAAE,EAEvDA,GAEF,QAAQ,IAAI,qCAAqC,EACjD,KAAK,WAAWP,EAAKC,CAAO,IAG5B,QAAQ,IAAI,+BAA+B,EAC3C,KAAK,UAAUD,EAAKC,CAAO,GAIzBG,IACF,QAAQ,IAAI,mCAAmC,EAC/C,KAAK,eAAe,GAIlBC,IACF,QAAQ,IAAI,2CAA2C,EACvD,KAAK,yBAAyB,GAGzB,IACT,OAASG,EAAO,CACd,MAAIF,EACFA,EAAQE,CAAK,EAEb,QAAQ,MAAM,2BAA4BA,CAAK,EAE3CA,CACR,CACF,CAMA,UAAUR,EAAKC,EAAU,CAAC,EAAG,CAC3B,QAAQ,IAAI,2CAA2C,EACvD,MAAMQ,EAAY,YAAY,IAAI,EAG5BC,EAAU,KAAK,mBAAmBT,CAAO,EAC/C,QAAQ,IAAI,qCAAqC,EAEjD,MAAMU,EAAaX,EAAI,MAAQA,EAAI,MAAMU,CAAO,EAAIV,EACpD,QAAQ,IAAI,iCAAiC,EAC7C,QAAQ,IAAI,6BAA8B,KAAK,UAAUW,EAAY,KAAM,CAAC,EAAE,UAAU,EAAG,GAAG,CAAC,EAG/F,MAAMC,EAAe,IAAIjB,EAAa,CACpC,UAAW,KAAK,eAAe,WAAa,GAC5C,QAAS,IACX,CAAC,EACD,KAAK,UAAYiB,EAAa,MAAMD,EAAYD,CAAQ,EACxD,QAAQ,IAAI,6BAA6B,EACzC,QAAQ,IAAI,4BAA4B,KAAK,UAAU,GAAG,EAAE,EAC5D,QAAQ,IAAI,uCAAuC,KAAK,UAAU,SAAW,KAAK,UAAU,SAAS,OAAS,CAAC,EAAE,EACjH,QAAQ,IAAI,6BAA8B,KAAK,UAAU,KAAK,EAC9D,QAAQ,IAAI,4BAA6B,KAAK,UAAU,KAAK,UAAW,KAAM,CAAC,EAAE,UAAU,EAAG,GAAG,CAAC,EAGlG,QAAQ,IAAI,4CAA6C,KAAK,YAAY,UAAU,UAAU,EAAG,GAAG,CAAC,EACrG,QAAQ,IAAI,sCAAuC,KAAK,YAAY,SAAS,EAGxE,KAAK,WACR,KAAK,SAAW,IAAId,EAAc,CAAE,UAAW,EAAK,CAAC,GAGvD,KAAK,SAAS,OAAO,KAAK,UAAW,KAAK,YAAa,CACrD,MAAO,EACT,CAAC,EACD,QAAQ,IAAI,+BAA+B,EAE3C,QAAQ,IAAI,2CAA4C,KAAK,YAAY,UAAU,UAAU,EAAG,GAAG,CAAC,EACpG,QAAQ,IAAI,0CAA2C,KAAK,YAAY,SAAS,MAAM,EACvF,QAAQ,IAAI,uCAAwC,MAAM,KAAK,KAAK,YAAY,QAAQ,EAAE,IAAIiB,IAAM,CAAE,IAAKA,EAAE,QAAS,MAAOA,EAAE,UAAW,KAAMA,EAAE,YAAY,UAAU,EAAG,EAAE,CAAE,EAAE,CAAC,EAElL,MAAMC,EAAU,YAAY,IAAI,EAChC,KAAK,mBAAmB,cAAgBA,EAAUL,EAElD,QAAQ,IAAI,0BAAqB,KAAK,mBAAmB,cAAc,QAAQ,CAAC,CAAC,IAAI,CACvF,CAMA,WAAWT,EAAKC,EAAU,CAAC,EAAG,CAC5B,QAAQ,IAAI,mCAAmC,EAC/C,MAAMQ,EAAY,YAAY,IAAI,EAG5BC,EAAU,KAAK,mBAAmBT,CAAO,EAC/C,QAAQ,IAAI,sCAAsC,EAElD,MAAMU,EAAaX,EAAI,MAAQA,EAAI,MAAMU,CAAO,EAAIV,EACpD,QAAQ,IAAI,kCAAkC,EAC9C,MAAMY,EAAe,IAAIjB,EAAa,CACpC,UAAW,KAAK,eAAe,WAAa,GAC5C,QAAS,IACX,CAAC,EAED,KAAK,UAAYiB,EAAa,MAAMD,EAAYD,CAAO,EACvD,QAAQ,IAAI,8BAA8B,EAG1C,MAAMK,EAAgBjB,EAAS,kBAAkB,EACjD,QAAQ,IAAI,sCAAsC,EAElDA,EAAS,QAAQ,KAAK,YAAa,KAAK,UAAWiB,CAAa,EAChE,QAAQ,IAAI,mCAAmC,EAE/C,KAAK,WAAa,GAElB,MAAMD,EAAU,YAAY,IAAI,EAChC,KAAK,mBAAmB,cAAgBA,EAAUL,EAElD,QAAQ,IAAI,0BAAqB,KAAK,mBAAmB,cAAc,QAAQ,CAAC,CAAC,IAAI,CACvF,CAMA,OAAOO,EAAU,CAGf,GAFA,QAAQ,IAAI,0BAA0B,EAElC,CAAC,KAAK,KAAO,CAAC,KAAK,YACrB,cAAQ,IAAI,uCAAuC,EAC7C,IAAI,MAAM,2CAA2C,EAG7D,MAAMP,EAAY,YAAY,IAAI,EAG9BO,IACF,QAAQ,IAAI,sCAAsC,EAClDA,EAAS,GAIX,MAAMN,EAAU,KAAK,mBAAmB,EACxC,QAAQ,IAAI,kCAAkC,EAE9C,MAAMC,EAAa,KAAK,IAAI,MAAQ,KAAK,IAAI,MAAMD,CAAO,EAAI,KAAK,IACnE,QAAQ,IAAI,gCAAgC,EAQ5C,MAAMO,EANe,IAAItB,EAAa,CACpC,UAAW,KAAK,eAAe,WAAa,GAC5C,QAAS,IACX,CAAC,EAG6B,MAAMgB,EAAYD,CAAO,EACvD,QAAQ,IAAI,8BAA8B,EAGrC,KAAK,WACR,KAAK,SAAW,IAAId,EAAc,CAAE,UAAW,EAAK,CAAC,GAGvD,KAAK,SAAS,OAAOqB,EAAU,KAAK,YAAa,CAAE,MAAO,EAAK,CAAC,EAEhE,KAAK,UAAYA,EAGjB,MAAMC,EADU,YAAY,IAAI,EACHT,EAGvBU,EAAeD,EAAa,EAAIA,EAAa,IAEnD,KAAK,mBAAmB,UACxB,KAAK,mBAAmB,iBAAmBC,EAC3C,KAAK,mBAAmB,kBACtB,KAAK,mBAAmB,gBAAkB,KAAK,mBAAmB,QAEpE,QAAQ,IAAI,sCAAsC,KAAK,mBAAmB,OAAO,gBAAgBD,EAAW,QAAQ,CAAC,CAAC,IAAI,EAEtH,KAAK,kBACP,QAAQ,IAAI,qBAAgBA,EAAW,QAAQ,CAAC,CAAC,IAAI,CAEzD,CAOA,cAAcE,EAAUC,EAAa,CACnC,QAAQ,IAAI,sCAAsCD,CAAQ,EAAE,EAC5D,KAAK,cAAc,IAAIA,EAAUC,CAAW,EAG5C,MAAMC,EAAmBD,EAAY,SAAS,KAAKA,CAAW,EAC9DA,EAAY,SAAYE,GAAY,CAClC,QAAQ,IAAI,oCAAoCH,CAAQ,EAAE,EAC1DE,EAAiBC,CAAO,EACxB,KAAK,OAAO,CACd,CACF,CAMA,gBAAgBH,EAAU,CACxB,QAAQ,IAAI,wCAAwCA,CAAQ,EAAE,EAC9D,KAAK,cAAc,OAAOA,CAAQ,CACpC,CAOA,SAASA,EAAU,CACjB,eAAQ,IAAI,kCAAkCA,CAAQ,EAAE,EACjD,KAAK,cAAc,IAAIA,CAAQ,GAAK,IAC7C,CAKA,WAAY,CAGV,GAFA,QAAQ,IAAI,gCAAgC,EAExC,CAAC,KAAK,iBAAkB,CAC1B,QAAQ,KAAK,2BAA2B,EACxC,MACF,CAIA,GAFA,QAAQ,IAAI,4BAAqB,EAE7B,CAAC,KAAK,KAAO,CAAC,KAAK,YAAa,CAClC,QAAQ,KAAK,oCAAoC,EACjD,MACF,CAEA,KAAK,OAAO,CACd,CAMA,mBAAmBnB,EAAU,CAAC,EAAG,CAC/B,eAAQ,IAAI,oCAAoC,EAEzC,CACL,QAAS,KACT,WAAY,KAAK,cAAc,EAC/B,MAAOA,EAAQ,OAAS,KAAK,gBAAgB,EAC7C,UAAW,KAAK,gBAAgB,EAChC,GAAGA,EAAQ,OACb,CACF,CAMA,eAAgB,CACd,GAAI,OAAO,OAAW,IACpB,eAAQ,IAAI,gDAAgD,EACrD,CACL,MAAO,KACP,OAAQ,KACR,iBAAkB,CACpB,EAGF,MAAMuB,EAAK,CACT,MAAO,OAAO,WACd,OAAQ,OAAO,YACf,iBAAkB,OAAO,kBAAoB,EAC7C,YAAa,OAAO,WAAa,OAAO,YAAc,YAAc,UACtE,EAEA,eAAQ,IAAI,8BAA+BA,CAAE,EACtCA,CACT,CAMA,iBAAkB,CAChB,eAAQ,IAAI,kDAAkD,EAEvD,CACL,aAAc,UACd,UAAW,UACX,iBAAkB,UAClB,mBAAoB,UACpB,QAAS,UACT,UAAW,UACX,QAAS,UACT,eAAgB,SAClB,CACF,CAMA,iBAAkB,CAChB,eAAQ,IAAI,kCAAkC,EAEvC,CACL,KAAOC,GAAU,CACf,QAAQ,IAAI,kCAAmCA,CAAK,CACtD,EACA,IAAK,IAAM,CACT,QAAQ,IAAI,gCAAgC,CAC9C,CACF,CACF,CAMA,iBAAiBvB,EAAQ,CAGvB,GAFA,QAAQ,IAAI,sCAAsCA,CAAM,EAAE,EAEtD,OAAOA,GAAW,SAAU,CAC9B,MAAMwB,EAAU,SAAS,cAAcxB,CAAM,EAC7C,GAAI,CAACwB,EACH,cAAQ,IAAI,qDAAqDxB,CAAM,EAAE,EACnE,IAAI,MAAM,mBAAmBA,CAAM,aAAa,EAExD,eAAQ,IAAI,sCAAsC,EAC3CwB,CACT,CAEA,GAAIxB,aAAkB,YACpB,eAAQ,IAAI,qCAAqC,EAC1CA,EAGT,cAAQ,IAAI,uCAAuC,EAC7C,IAAI,MAAM,0DAA0D,CAC5E,CAMA,cAAcwB,EAAS,CACrB,QAAQ,IAAI,uCAAuC,EAGnD,MAAMC,EAAkB,SAAS,eAAe,8BAA8B,EAGxEC,EAAaD,GAAmBD,EAAQ,SAAS,OAAS,EAChE,eAAQ,IAAI,wCAAwCC,IAAoB,IAAI,2BAA2BD,EAAQ,SAAS,OAAS,CAAC,EAAE,EAE7HE,CACT,CAMA,gBAAiB,CACf,GAAI,OAAO,OAAW,IAAa,CACjC,QAAQ,IAAI,iDAAiD,EAC7D,MACF,CAEA,QAAQ,IAAI,+CAA+C,EAG3D,OAAO,iBAAiB,sBAAuB,IAAM,CACnD,QAAQ,IAAI,yCAAyC,EACrD,KAAK,UAAU,CACjB,CAAC,EAGD,OAAO,uBAAyB,IAAM,CACpC,QAAQ,IAAI,0CAA0C,EACtD,KAAK,UAAU,CACjB,EAEA,QAAQ,IAAI,8BAAuB,CACrC,CAMA,0BAA2B,CACzB,GAAI,OAAO,OAAW,IAAa,CACjC,QAAQ,IAAI,iDAAiD,EAC7D,MACF,CAEA,QAAQ,IAAI,qCAAqC,EAGjD,IAAIC,EAAW,YAAY,IAAI,EAC3BC,EAAS,EAEb,MAAMC,EAAW,IAAM,CACrBD,IACA,MAAME,EAAc,YAAY,IAAI,EAEpC,GAAIA,GAAeH,EAAW,IAAM,CAClC,MAAMI,EAAM,KAAK,MAAOH,EAAS,KAASE,EAAcH,EAAS,EACjE,KAAK,mBAAmB,IAAMI,EAC9B,QAAQ,IAAI,sBAAsBA,CAAG,EAAE,EACvCH,EAAS,EACTD,EAAWG,CACb,CAEA,sBAAsBD,CAAQ,CAChC,EAEA,sBAAsBA,CAAQ,CAChC,CAMA,YAAa,CAGX,GAFA,QAAQ,IAAI,6CAA6C,KAAK,MAAQ,IAAI,EAAE,EAExE,CAAC,KAAK,IACR,eAAQ,IAAI,oCAAoC,EACzC,KAGT,MAAMG,EAAU,CACd,GAAG,KAAK,mBACR,WAAY,KAAK,WACjB,WAAY,KAAK,cAAc,KAC/B,WAAY,KAAK,UAAYrC,EAAa,SAAS,KAAK,SAAS,EAAI,IACvE,EAEA,eAAQ,IAAI,iCAAkCqC,CAAO,EAC9CA,CACT,CAKA,SAAU,CACR,QAAQ,IAAI,gCAAgC,EAGxC,KAAK,aAAe,KAAK,WAC3B,QAAQ,IAAI,yCAAyC,EACrD,KAAK,SAAS,sBAAsB,KAAK,WAAW,GAItD,QAAQ,IAAI,8CAA8C,KAAK,cAAc,IAAI,GAAG,EACpF,KAAK,cAAc,MAAM,EAGrB,OAAO,OAAW,MACpB,QAAQ,IAAI,0CAA0C,EACtD,OAAO,oBAAoB,sBAAuB,KAAK,SAAS,EAChE,OAAO,OAAO,wBAIhB,KAAK,IAAM,KACX,KAAK,YAAc,KACnB,KAAK,UAAY,KACjB,KAAK,SAAW,KAEhB,QAAQ,IAAI,0BAAqB,CACnC,CACF,CAMA,IAAIC,EAAgB,KAOb,SAASC,EAAOpC,EAAKC,EAAU,CAAC,EAAG,CACxC,eAAQ,IAAI,wBAAwB,EAE/BkC,IACH,QAAQ,IAAI,sCAAsC,EAClDA,EAAgB,IAAIpC,GAEfoC,EAAc,OAAOnC,EAAKC,CAAO,CAC1C,CAMO,SAASoC,GAAa,CAC3B,eAAQ,IAAI,uCAAuCF,IAAkB,IAAI,EAAE,EACpEA,CACT,CAMO,SAASG,EAAUtB,EAAU,CAGlC,GAFA,QAAQ,IAAI,2BAA2B,EAEnC,CAACmB,EACH,cAAQ,IAAI,4BAA4B,EAClC,IAAI,MAAM,sCAAsC,EAExDA,EAAc,OAAOnB,CAAQ,CAC/B,CAMO,SAASuB,GAAa,CAG3B,OAFA,QAAQ,IAAI,4BAA4B,EAEnCJ,EAIEA,EAAc,WAAW,GAH9B,QAAQ,IAAI,qCAAqC,EAC1C,KAGX,CAKO,SAASK,GAAY,CAG1B,GAFA,QAAQ,IAAI,2BAA2B,EAEnC,CAACL,EAAe,CAClB,QAAQ,KAAK,gBAAgB,EAC7B,MACF,CACAA,EAAc,UAAU,CAC1B,CAQO,SAASM,EAAezC,EAAKC,EAAU,CAAC,EAAG,CAChD,QAAQ,IAAI,gCAAgC,EAE5C,MAAMS,EAAU,CACd,WAAY,CAAE,MAAO,KAAM,OAAQ,KAAM,iBAAkB,CAAE,EAC7D,MAAOT,EAAQ,OAAS,CAAC,EACzB,GAAGA,EAAQ,OACb,EAEA,QAAQ,IAAI,sCAAsC,EAClD,MAAMU,EAAaX,EAAI,MAAQA,EAAI,MAAMU,CAAO,EAAIV,EAEpD,QAAQ,IAAI,8BAA8B,EAE1C,MAAMY,EAAe,IAAIjB,EAAa,CACpC,UAAW,KAAK,eAAe,WAAa,GAC5C,QAAS,IACX,CAAC,EACD,YAAK,UAAYiB,EAAa,MAAMD,EAAYD,CAAO,EACvD,QAAQ,IAAI,mCAAmC,EACxCb,EAAa,aAAa,MAAO,CACtC,MAAOI,EAAQ,OAAS,gBACxB,KAAMA,EAAQ,MAAQ,CAAC,EACvB,OAAQA,EAAQ,QAAU,CAAC,EAC3B,QAASA,EAAQ,SAAW,CAAC,EAC7B,iBAAkBA,EAAQ,mBAAqB,GAC/C,mBAAoBA,EAAQ,qBAAuB,GACnD,eAAgBA,EAAQ,iBAAmB,EAC7C,CAAC,CACH,CAOO,SAASyC,EAAQ1C,EAAKC,EAAU,CAAC,EAAG,CACzC,QAAQ,IAAI,yBAAyB,EAEhCkC,IACH,QAAQ,IAAI,oDAAoD,EAChEA,EAAgB,IAAIpC,GAGtB,MAAMG,EAASD,EAAQ,QAAU,QACjC,QAAQ,IAAI,4BAA4BC,CAAM,EAAE,EAEhD,MAAMyC,EAAc,OAAOzC,GAAW,SAClC,SAAS,cAAcA,CAAM,EAC7BA,EAEJ,GAAI,CAACyC,EACH,cAAQ,IAAI,kCAAkC,EACxC,IAAI,MAAM,mBAAmBzC,CAAM,aAAa,EAGxD,eAAQ,IAAI,+BAA+B,EAC3CiC,EAAc,YAAcQ,EAC5BR,EAAc,IAAMnC,EACpBmC,EAAc,WAAWnC,EAAKC,CAAO,EAE9BkC,CACT,CAGA,IAAOS,EAAQ,CACb,OAAAR,EACA,WAAAC,EACA,UAAAC,EACA,WAAAC,EACA,UAAAC,EACA,eAAAC,EACA,QAAAC,EAEA,aAAA3C,CACF,EAGI,OAAO,OAAW,MACpB,QAAQ,IAAI,sCAAsC,EAClD,OAAO,UAAY,CACjB,OAAAqC,EACA,WAAAC,EACA,UAAAC,EACA,WAAAC,EACA,UAAAC,EACA,eAAAC,EACA,QAAAC,CACF,EACA,QAAQ,IAAI,iCAAiC,GAGxC,SAASG,GAAe,CACxBV,GACLA,EAAc,aAAa,CAC7B",
-  "names": ["VNodeBuilder", "VNodeRenderer", "RenderEngine", "Hydrator", "VNodeRuntime", "app", "options", "target", "mode", "enableHotReload", "enablePerformanceTracking", "onError", "hasSSRContent", "error", "startTime", "context", "widgetTree", "vNodeBuilder", "c", "endTime", "hydrationData", "updateFn", "newVNode", "renderTime", "recordedTime", "widgetId", "stateObject", "originalSetState", "updater", "mq", "route", "element", "hydrationScript", "hasContent", "lastTime", "frames", "trackFPS", "currentTime", "fps", "metrics", "globalRuntime", "runApp", "getRuntime", "updateApp", "getMetrics", "hotReload", "renderToString", "hydrate", "rootElement", "runtime_index_default", "clearMetrics"]
-}
diff --git a/packages/flutterjs_engine/src/vdom/dist/ssr_renderer.js b/packages/flutterjs_engine/src/vdom/dist/ssr_renderer.js
deleted file mode 100644
index 7e6e6171..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/ssr_renderer.js
+++ /dev/null
@@ -1,18 +0,0 @@
-class p{static render(t,e={}){return this.renderVNode(t,e)}static renderVNode(t,e={}){if(t==null)return"";if(Array.isArray(t))return t.map(i=>this.renderVNode(i,e)).join("");if(typeof t=="string"||typeof t=="number")return this.escapeHTML(String(t));if(typeof t=="boolean"||!t.tag)return"";const r=this.serializeAttributes(t),s=`<${t.tag}${r?" "+r:""}>`;if(this.isVoidTag(t.tag))return s;const a=(t.children||[]).map(i=>this.renderVNode(i,e)).join(""),n=`</${t.tag}>`;return`${s}${a}${n}`}static serializeAttributes(t){const e=[];if(t.props&&Object.entries(t.props).forEach(([r,s])=>{if(!(s==null||s===!1)){if(r==="className"){e.push(`class="${this.escapeAttribute(String(s))}"`);return}if(s===!0){e.push(r);return}e.push(`${r}="${this.escapeAttribute(String(s))}"`)}}),t.style&&typeof t.style=="object"){const r=this.serializeStyles(t.style);r&&e.push(`style="${this.escapeAttribute(r)}"`)}return t.metadata&&t.metadata.widgetType&&e.push(`data-widget-type="${this.escapeAttribute(t.metadata.widgetType)}"`),t.key!==null&&t.key!==void 0&&e.push(`data-key="${this.escapeAttribute(String(t.key))}"`),e.join(" ")}static serializeStyles(t){return Object.entries(t).filter(([r,s])=>s!=null).map(([r,s])=>`${r.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${s}`).join("; ")}static isVoidTag(t){return["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"].includes(t.toLowerCase())}static escapeHTML(t){const e={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"};return String(t).replace(/[&<>"']/g,r=>e[r])}static escapeAttribute(t){return this.escapeHTML(t)}static renderDocument(t,e={}){const{title:r="FlutterJS App",meta:s={},styles:a=[],scripts:n=[],lang:i="en"}=e,c=this.renderVNode(t);return`<!DOCTYPE html>
-<html lang="${this.escapeAttribute(i)}">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${this.escapeHTML(r)}</title>
-  ${this.renderMetaTags(s)}
-  ${this.renderStyleLinks(a)}
-</head>
-<body>
-  <div id="root">${c}</div>
-  ${this.renderScriptTags(n)}
-</body>
-</html>`}static renderMetaTags(t){const e=[];return Object.entries(t).forEach(([r,s])=>{r.startsWith("og:")?e.push(`<meta property="${this.escapeAttribute(r)}" content="${this.escapeAttribute(s)}">`):e.push(`<meta name="${this.escapeAttribute(r)}" content="${this.escapeAttribute(s)}">`)}),e.join(`
-  `)}static renderStyleLinks(t){return t.map(e=>`<link rel="stylesheet" href="${this.escapeAttribute(e)}">`).join(`
-  `)}static renderScriptTags(t){return t.map(e=>`<script src="${this.escapeAttribute(e)}" defer></script>`).join(`
-  `)}}export{p as SSRRenderer};
-//# sourceMappingURL=ssr_renderer.js.map
diff --git a/packages/flutterjs_engine/src/vdom/dist/ssr_renderer.js.map b/packages/flutterjs_engine/src/vdom/dist/ssr_renderer.js.map
deleted file mode 100644
index 39d6de63..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/ssr_renderer.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/ssr_renderer.js"],
-  "sourcesContent": ["/**\r\n * SSRRenderer - Server-Side Rendering\r\n * \r\n * Converts VNode trees to HTML strings for server-side rendering.\r\n * Handles:\r\n * - HTML string generation\r\n * - Attribute serialization\r\n * - Style serialization\r\n * - Proper escaping\r\n * - Self-closing tags\r\n */\r\n\r\nclass SSRRenderer {\r\n  /**\r\n   * Render VNode to HTML string\r\n   * @param {VNode|string|Array} vnode - VNode tree\r\n   * @param {Object} options - Rendering options\r\n   * @returns {string} HTML string\r\n   */\r\n  static render(vnode, options = {}) {\r\n    return this.renderVNode(vnode, options);\r\n  }\r\n\r\n  /**\r\n   * Render single VNode to HTML string\r\n   * @param {VNode|string|Array} vnode - VNode to render\r\n   * @param {Object} options - Rendering options\r\n   * @returns {string} HTML string\r\n   */\r\n  static renderVNode(vnode, options = {}) {\r\n    // Handle null/undefined\r\n    if (vnode === null || vnode === undefined) {\r\n      return '';\r\n    }\r\n\r\n    // Handle arrays (fragments)\r\n    if (Array.isArray(vnode)) {\r\n      return vnode\r\n        .map(child => this.renderVNode(child, options))\r\n        .join('');\r\n    }\r\n\r\n    // Handle text nodes\r\n    if (typeof vnode === 'string' || typeof vnode === 'number') {\r\n      return this.escapeHTML(String(vnode));\r\n    }\r\n\r\n    // Handle boolean (render nothing)\r\n    if (typeof vnode === 'boolean') {\r\n      return '';\r\n    }\r\n\r\n    // Must be a VNode object\r\n    if (!vnode.tag) {\r\n      return '';\r\n    }\r\n\r\n    // Build opening tag\r\n    const attrs = this.serializeAttributes(vnode);\r\n    const openTag = `<${vnode.tag}${attrs ? ' ' + attrs : ''}>`;\r\n\r\n    // Self-closing tags\r\n    if (this.isVoidTag(vnode.tag)) {\r\n      return openTag;\r\n    }\r\n\r\n    // Render children\r\n    const childrenHTML = (vnode.children || [])\r\n      .map(child => this.renderVNode(child, options))\r\n      .join('');\r\n\r\n    // Build closing tag\r\n    const closeTag = `</${vnode.tag}>`;\r\n\r\n    return `${openTag}${childrenHTML}${closeTag}`;\r\n  }\r\n\r\n  /**\r\n   * Serialize attributes to HTML string\r\n   * @private\r\n   */\r\n  static serializeAttributes(vnode) {\r\n    const attrs = [];\r\n\r\n    // Props (HTML attributes)\r\n    if (vnode.props) {\r\n      Object.entries(vnode.props).forEach(([key, value]) => {\r\n        if (value === null || value === undefined || value === false) {\r\n          return;\r\n        }\r\n\r\n        // Special handling for className\r\n        if (key === 'className') {\r\n          attrs.push(`class=\"${this.escapeAttribute(String(value))}\"`);\r\n          return;\r\n        }\r\n\r\n        // Boolean attributes\r\n        if (value === true) {\r\n          attrs.push(key);\r\n          return;\r\n        }\r\n\r\n        // Regular attributes\r\n        attrs.push(`${key}=\"${this.escapeAttribute(String(value))}\"`);\r\n      });\r\n    }\r\n\r\n    // Inline styles\r\n    if (vnode.style && typeof vnode.style === 'object') {\r\n      const styleStr = this.serializeStyles(vnode.style);\r\n      if (styleStr) {\r\n        attrs.push(`style=\"${this.escapeAttribute(styleStr)}\"`);\r\n      }\r\n    }\r\n\r\n    // Data attributes from metadata\r\n    if (vnode.metadata) {\r\n      if (vnode.metadata.widgetType) {\r\n        attrs.push(`data-widget-type=\"${this.escapeAttribute(vnode.metadata.widgetType)}\"`);\r\n      }\r\n    }\r\n\r\n    // Key attribute\r\n    if (vnode.key !== null && vnode.key !== undefined) {\r\n      attrs.push(`data-key=\"${this.escapeAttribute(String(vnode.key))}\"`);\r\n    }\r\n\r\n    return attrs.join(' ');\r\n  }\r\n\r\n  /**\r\n   * Serialize styles to CSS string\r\n   * @private\r\n   */\r\n  static serializeStyles(styles) {\r\n    const styleEntries = Object.entries(styles)\r\n      .filter(([_, value]) => value !== null && value !== undefined)\r\n      .map(([key, value]) => {\r\n        // Convert camelCase to kebab-case\r\n        const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();\r\n        return `${cssKey}: ${value}`;\r\n      });\r\n\r\n    return styleEntries.join('; ');\r\n  }\r\n\r\n  /**\r\n   * Check if tag is self-closing (void element)\r\n   * @private\r\n   */\r\n  static isVoidTag(tag) {\r\n    const voidTags = [\r\n      'area', 'base', 'br', 'col', 'embed', 'hr', 'img',\r\n      'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'\r\n    ];\r\n    return voidTags.includes(tag.toLowerCase());\r\n  }\r\n\r\n  /**\r\n   * Escape HTML special characters\r\n   * @private\r\n   */\r\n  static escapeHTML(str) {\r\n    const map = {\r\n      '&': '&amp;',\r\n      '<': '&lt;',\r\n      '>': '&gt;',\r\n      '\"': '&quot;',\r\n      \"'\": '&#39;'\r\n    };\r\n    return String(str).replace(/[&<>\"']/g, c => map[c]);\r\n  }\r\n\r\n  /**\r\n   * Escape HTML attribute value\r\n   * @private\r\n   */\r\n  static escapeAttribute(str) {\r\n    return this.escapeHTML(str);\r\n  }\r\n\r\n  /**\r\n   * Render complete HTML document\r\n   * @param {VNode} vnode - Root VNode\r\n   * @param {Object} options - Document options\r\n   * @returns {string} Complete HTML document\r\n   */\r\n  static renderDocument(vnode, options = {}) {\r\n    const {\r\n      title = 'FlutterJS App',\r\n      meta = {},\r\n      styles = [],\r\n      scripts = [],\r\n      lang = 'en'\r\n    } = options;\r\n\r\n    const bodyHTML = this.renderVNode(vnode);\r\n\r\n    return `<!DOCTYPE html>\r\n<html lang=\"${this.escapeAttribute(lang)}\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>${this.escapeHTML(title)}</title>\r\n  ${this.renderMetaTags(meta)}\r\n  ${this.renderStyleLinks(styles)}\r\n</head>\r\n<body>\r\n  <div id=\"root\">${bodyHTML}</div>\r\n  ${this.renderScriptTags(scripts)}\r\n</body>\r\n</html>`;\r\n  }\r\n\r\n  /**\r\n   * Render meta tags\r\n   * @private\r\n   */\r\n  static renderMetaTags(meta) {\r\n    const tags = [];\r\n\r\n    Object.entries(meta).forEach(([key, value]) => {\r\n      if (key.startsWith('og:')) {\r\n        tags.push(`<meta property=\"${this.escapeAttribute(key)}\" content=\"${this.escapeAttribute(value)}\">`);\r\n      } else {\r\n        tags.push(`<meta name=\"${this.escapeAttribute(key)}\" content=\"${this.escapeAttribute(value)}\">`);\r\n      }\r\n    });\r\n\r\n    return tags.join('\\n  ');\r\n  }\r\n\r\n  /**\r\n   * Render style links\r\n   * @private\r\n   */\r\n  static renderStyleLinks(styles) {\r\n    return styles\r\n      .map(href => `<link rel=\"stylesheet\" href=\"${this.escapeAttribute(href)}\">`)\r\n      .join('\\n  ');\r\n  }\r\n\r\n  /**\r\n   * Render script tags\r\n   * @private\r\n   */\r\n  static renderScriptTags(scripts) {\r\n    return scripts\r\n      .map(src => `<script src=\"${this.escapeAttribute(src)}\" defer></script>`)\r\n      .join('\\n  ');\r\n  }\r\n}\r\n\r\n\r\nexport {SSRRenderer};"],
-  "mappings": "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",
-  "names": ["SSRRenderer", "vnode", "options", "child", "attrs", "openTag", "childrenHTML", "closeTag", "key", "value", "styleStr", "styles", "_", "tag", "str", "map", "c", "title", "meta", "scripts", "lang", "bodyHTML", "tags", "href", "src"]
-}
diff --git a/packages/flutterjs_engine/src/vdom/dist/state_binding.js b/packages/flutterjs_engine/src/vdom/dist/state_binding.js
deleted file mode 100644
index 89376da8..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/state_binding.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const o={ONE_WAY:"oneWay",TWO_WAY:"twoWay",EVENT:"event"};class d{constructor({statefulWidgetId:t,stateProperty:e,vnode:i,domElement:n=null,mode:s=o.ONE_WAY,transform:h=null,validate:a=null,debounceMs:l=0}={}){this.statefulWidgetId=t,this.stateProperty=e,this.id=`binding-${t}-${e}-${Date.now()}`,this.vnode=i,this.domElement=n,this.mode=s,this.transform=h,this.validate=a,this.debounceMs=l,this.currentValue=null,this.previousValue=null,this.isDirty=!1,this.isActive=!0,this.debounceTimer=null,this.pendingValue=null,this.onUpdate=null,this.onChange=null,this.onValidationError=null,this.eventListeners=[]}attach(t){if(!t)throw new Error("Cannot attach binding to null element");return this.domElement=t,t._stateBindings||(t._stateBindings=[]),t._stateBindings.push(this),(this.mode===o.TWO_WAY||this.mode===o.EVENT)&&this.attachEventListeners(),this}detach(){if(this.domElement){if(this.removeEventListeners(),this.domElement._stateBindings){const t=this.domElement._stateBindings.indexOf(this);t!==-1&&this.domElement._stateBindings.splice(t,1)}this.domElement=null}}updateDOM(t){if(!this.isActive||!this.domElement)return;this.previousValue=this.currentValue,this.currentValue=t;let e=t;if(typeof this.transform=="function")try{e=this.transform(t)}catch(i){console.error("Transform error:",i);return}if(this.applyToDOM(e),typeof this.onUpdate=="function")try{this.onUpdate(e,this.previousValue)}catch(i){console.error("onUpdate callback error:",i)}this.isDirty=!1}applyToDOM(t){if(!this.domElement)return;const e=this.domElement.tagName,i=this.domElement.type||"";if(this.stateProperty==="className"||this.stateProperty==="class"){this.domElement.className=String(t??"");return}if(this.stateProperty.startsWith("style-")){const n=this.stateProperty.replace(/^style-/,"");this.domElement.style[n]=String(t??"");return}if(this.stateProperty.startsWith("attr-")){const n=this.stateProperty.replace(/^attr-/,"");this.domElement.setAttribute(n,String(t??""));return}if(e==="SPAN"||e==="DIV"||e==="P"||e==="H1"||e==="H2"||e==="H3"||e==="H4"||e==="H5"||e==="H6"){this.domElement.textContent=String(t??"");return}if(e==="INPUT"&&(i==="text"||i==="password"||i==="email"||i==="number"||i==="search"||i==="url"||i==="tel")){this.domElement.value=String(t??"");return}if(e==="TEXTAREA"){this.domElement.value=String(t??"");return}if(e==="SELECT"){this.domElement.value=String(t??"");return}if(e==="INPUT"&&i==="checkbox"){this.domElement.checked=!!t;return}if(e==="INPUT"&&i==="radio"){this.domElement.checked=String(t)===this.domElement.value;return}if(e==="IMG"){this.domElement.src=String(t??"");return}if(e==="A"){this.domElement.href=String(t??"");return}if(this.stateProperty==="className"||this.stateProperty==="class"){this.domElement.className=String(t??"");return}if(this.stateProperty.startsWith("attr-")){const n=this.stateProperty.replace(/^attr-/,"");this.domElement.setAttribute(n,String(t??""));return}if(this.stateProperty.startsWith("style-")){const n=this.stateProperty.replace(/^style-/,"");this.domElement.style[n]=String(t??"");return}this.domElement.textContent=String(t??"")}readFromDOM(){if(!this.domElement)return null;const t=this.domElement.tagName,e=this.domElement.type||"";if(t==="SPAN"||t==="DIV"||t==="P")return this.domElement.textContent;if(t==="INPUT"&&(e==="text"||e==="password"||e==="email"||e==="number")){const i=this.domElement.value;if(e==="number"){const n=parseFloat(i);return isNaN(n)?i:n}return i}return t==="TEXTAREA"?this.domElement.value:t==="SELECT"?this.domElement.value:t==="INPUT"&&e==="checkbox"?this.domElement.checked:t==="INPUT"&&e==="radio"&&this.domElement.checked?this.domElement.value:null}attachEventListeners(){if(!this.domElement)return;const t=this.domElement.tagName,e=this.domElement.type||"";let i=[];t==="INPUT"||t==="TEXTAREA"||t==="SELECT"?i=["input","change"]:(t==="SPAN"||t==="DIV")&&(i=["click","change"]);const n=s=>this.handleDOMChange(s);i.forEach(s=>{this.domElement.addEventListener(s,n),this.eventListeners.push({event:s,handler:n})})}removeEventListeners(){this.domElement&&(this.eventListeners.forEach(({event:t,handler:e})=>{this.domElement.removeEventListener(t,e)}),this.eventListeners=[])}handleDOMChange(t){if(!this.isActive||this.mode===o.ONE_WAY)return;const e=this.readFromDOM();if(typeof this.validate=="function")try{if(!this.validate(e)){typeof this.onValidationError=="function"&&this.onValidationError(e),this.updateDOM(this.currentValue);return}}catch(i){console.error("Validation error:",i),this.updateDOM(this.currentValue);return}this.debounceMs>0?(this.pendingValue=e,this.debounceTimer&&clearTimeout(this.debounceTimer),this.debounceTimer=setTimeout(()=>{this.notifyChange(this.pendingValue),this.debounceTimer=null},this.debounceMs)):this.notifyChange(e)}notifyChange(t){if(this.isDirty=!0,this.previousValue=this.currentValue,this.currentValue=t,typeof this.onChange=="function")try{this.onChange(t,this.previousValue)}catch(e){console.error("onChange callback error:",e)}}disable(){this.isActive=!1}enable(){this.isActive=!0}isDirtyBinding(){return this.isDirty}clearDirty(){this.isDirty=!1}destroy(){this.detach(),this.onUpdate=null,this.onChange=null,this.onValidationError=null,this.debounceTimer&&clearTimeout(this.debounceTimer)}}class c{constructor(){this.bindings=new Map}register(t){if(!(t instanceof d))throw new Error("Must register StateBinding instance");const e=t.statefulWidgetId,i=t.stateProperty;this.bindings.has(e)||this.bindings.set(e,new Map);const n=this.bindings.get(e);return n.has(i)||n.set(i,[]),n.get(i).push(t),t.id}unregister(t){for(const e of this.bindings.values())for(const i of e.values()){const n=i.findIndex(s=>s.id===t);if(n!==-1)return i[n].destroy(),i.splice(n,1),!0}return!1}updateState(t,e){if(!this.bindings.has(t))return;const i=this.bindings.get(t);Object.entries(e).forEach(([n,s])=>{i.has(n)&&i.get(n).forEach(a=>{a.updateDOM(s)})})}getDirtyBindings(){const t=[];for(const e of this.bindings.values())for(const i of e.values())i.forEach(n=>{n.isDirtyBinding()&&t.push(n)});return t}getDirtyValues(t=null){const e={};for(const[i,n]of this.bindings)if(!(t&&i!==t))for(const[s,h]of n)for(const a of h)a.isDirtyBinding()&&(e[s]=a.currentValue);return e}clearDirty(){for(const t of this.bindings.values())for(const e of t.values())e.forEach(i=>i.clearDirty())}getWidgetBindings(t){if(!this.bindings.has(t))return[];const e=[],i=this.bindings.get(t);for(const n of i.values())e.push(...n);return e}getPropertyBindings(t,e){if(!this.bindings.has(t))return[];const i=this.bindings.get(t);return i.has(e)?i.get(e):[]}removeWidget(t){if(!this.bindings.has(t))return;const e=this.bindings.get(t);for(const i of e.values())i.forEach(n=>n.destroy());this.bindings.delete(t)}clear(){for(const t of this.bindings.values())for(const e of t.values())e.forEach(i=>i.destroy());this.bindings.clear()}getBindingCount(){let t=0;for(const e of this.bindings.values())for(const i of e.values())t+=i.length;return t}getStats(){const t={totalBindings:0,totalWidgets:0,totalProperties:0,dirtyBindings:0,byMode:{}};t.totalWidgets=this.bindings.size;for(const e of this.bindings.values()){t.totalProperties+=e.size;for(const i of e.values())t.totalBindings+=i.length,i.forEach(n=>{n.isDirtyBinding()&&t.dirtyBindings++,t.byMode[n.mode]||(t.byMode[n.mode]=0),t.byMode[n.mode]++})}return t}}function u(r){return new d(r)}function g({statefulWidgetId:r,stateProperty:t,vnode:e,domElement:i=null,transform:n=null,validate:s=null,debounceMs:h=0}={}){return new d({statefulWidgetId:r,stateProperty:t,vnode:e,domElement:i,mode:o.TWO_WAY,transform:n,validate:s,debounceMs:h})}function m({statefulWidgetId:r,stateProperty:t,vnode:e,domElement:i=null,transform:n=null}={}){return new d({statefulWidgetId:r,stateProperty:t,vnode:e,domElement:i,mode:o.ONE_WAY,transform:n})}export{o as BindingMode,d as StateBinding,c as StateBindingRegistry,u as createBinding,m as createOneWayBinding,g as createTwoWayBinding};
-//# sourceMappingURL=state_binding.js.map
diff --git a/packages/flutterjs_engine/src/vdom/dist/state_binding.js.map b/packages/flutterjs_engine/src/vdom/dist/state_binding.js.map
deleted file mode 100644
index 9e5df4d3..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/state_binding.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/state_binding.js"],
-  "sourcesContent": ["/**\r\n * StateBinding - Connects VNode properties to StatefulWidget state\r\n * \r\n * Manages two-way binding between:\r\n * - Flutter StatefulWidget state properties\r\n * - VNode tree and rendered DOM elements\r\n * \r\n * Features:\r\n * - Automatic state-to-DOM synchronization\r\n * - DOM-to-state event handling\r\n * - One-way and two-way binding modes\r\n * - Nested property binding\r\n * - Computed/derived values\r\n * - Binding validation\r\n * - Memory management\r\n * - Change detection\r\n */\r\n\r\n/**\r\n * Binding mode constants\r\n */\r\nconst BindingMode = {\r\n  ONE_WAY: 'oneWay',      // State \u2192 DOM only\r\n  TWO_WAY: 'twoWay',      // State \u2194 DOM (bidirectional)\r\n  EVENT: 'event'          // DOM event \u2192 State\r\n};\r\n\r\n/**\r\n * StateBinding - Represents a single state-to-DOM binding\r\n */\r\nclass StateBinding {\r\n  constructor({\r\n    statefulWidgetId,\r\n    stateProperty,\r\n    vnode,\r\n    domElement = null,\r\n    mode = BindingMode.ONE_WAY,\r\n    transform = null,\r\n    validate = null,\r\n    debounceMs = 0\r\n  } = {}) {\r\n    // Identity\r\n    this.statefulWidgetId = statefulWidgetId;\r\n    this.stateProperty = stateProperty;\r\n    this.id = `binding-${statefulWidgetId}-${stateProperty}-${Date.now()}`;\r\n\r\n    // References\r\n    this.vnode = vnode;\r\n    this.domElement = domElement;\r\n\r\n    // Configuration\r\n    this.mode = mode;\r\n    this.transform = transform;     // Function to transform state value\r\n    this.validate = validate;       // Function to validate value\r\n    this.debounceMs = debounceMs;\r\n\r\n    // State tracking\r\n    this.currentValue = null;\r\n    this.previousValue = null;\r\n    this.isDirty = false;\r\n    this.isActive = true;\r\n\r\n    // Debouncing\r\n    this.debounceTimer = null;\r\n    this.pendingValue = null;\r\n\r\n    // Event handlers\r\n    this.onUpdate = null;\r\n    this.onChange = null;\r\n    this.onValidationError = null;\r\n\r\n    // Listeners\r\n    this.eventListeners = [];\r\n  }\r\n\r\n  /**\r\n   * Attach binding to DOM element\r\n   * @param {HTMLElement} element\r\n   */\r\n  attach(element) {\r\n    if (!element) {\r\n      throw new Error('Cannot attach binding to null element');\r\n    }\r\n\r\n    this.domElement = element;\r\n\r\n    // Store binding reference on element\r\n    if (!element._stateBindings) {\r\n      element._stateBindings = [];\r\n    }\r\n    element._stateBindings.push(this);\r\n\r\n    // Attach event listeners if TWO_WAY or EVENT mode\r\n    if (this.mode === BindingMode.TWO_WAY || this.mode === BindingMode.EVENT) {\r\n      this.attachEventListeners();\r\n    }\r\n\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * Detach binding from DOM element\r\n   */\r\n  detach() {\r\n    if (!this.domElement) {\r\n      return;\r\n    }\r\n\r\n    // Remove event listeners\r\n    this.removeEventListeners();\r\n\r\n    // Remove from element's binding list\r\n    if (this.domElement._stateBindings) {\r\n      const index = this.domElement._stateBindings.indexOf(this);\r\n      if (index !== -1) {\r\n        this.domElement._stateBindings.splice(index, 1);\r\n      }\r\n    }\r\n\r\n    this.domElement = null;\r\n  }\r\n\r\n  /**\r\n   * Update DOM with state value\r\n   * @param {*} stateValue\r\n   */\r\n  updateDOM(stateValue) {\r\n    if (!this.isActive || !this.domElement) {\r\n      return;\r\n    }\r\n\r\n    // Store previous value\r\n    this.previousValue = this.currentValue;\r\n    this.currentValue = stateValue;\r\n\r\n    // Transform value if needed\r\n    let displayValue = stateValue;\r\n    if (typeof this.transform === 'function') {\r\n      try {\r\n        displayValue = this.transform(stateValue);\r\n      } catch (error) {\r\n        console.error('Transform error:', error);\r\n        return;\r\n      }\r\n    }\r\n\r\n    // Update based on element type\r\n    this.applyToDOM(displayValue);\r\n\r\n    // Call update callback\r\n    if (typeof this.onUpdate === 'function') {\r\n      try {\r\n        this.onUpdate(displayValue, this.previousValue);\r\n      } catch (error) {\r\n        console.error('onUpdate callback error:', error);\r\n      }\r\n    }\r\n\r\n    this.isDirty = false;\r\n  }\r\n\r\n  /**\r\n   * Apply value to DOM element\r\n   * @private\r\n   */\r\n  applyToDOM(value) {\r\n    if (!this.domElement) return;\r\n\r\n    const tagName = this.domElement.tagName;\r\n    const type = this.domElement.type || '';\r\n    // Class binding (CHECK FIRST)\r\n  if (this.stateProperty === 'className' || this.stateProperty === 'class') {\r\n    this.domElement.className = String(value ?? '');\r\n    return;\r\n  }\r\n   // Style binding (CHECK FIRST)\r\n  if (this.stateProperty.startsWith('style-')) {\r\n    const styleProp = this.stateProperty.replace(/^style-/, '');\r\n    this.domElement.style[styleProp] = String(value ?? '');\r\n    return;\r\n  }\r\n\r\n  // Generic attribute binding (CHECK FIRST)\r\n  if (this.stateProperty.startsWith('attr-')) {\r\n    const attrName = this.stateProperty.replace(/^attr-/, '');\r\n    this.domElement.setAttribute(attrName, String(value ?? ''));\r\n    return;\r\n  }\r\n\r\n    // Text content binding\r\n    if (tagName === 'SPAN' || tagName === 'DIV' || tagName === 'P' || tagName === 'H1' || \r\n        tagName === 'H2' || tagName === 'H3' || tagName === 'H4' || tagName === 'H5' || tagName === 'H6') {\r\n      this.domElement.textContent = String(value ?? '');\r\n      return;\r\n    }\r\n\r\n    // Input value binding\r\n    if (tagName === 'INPUT' && (type === 'text' || type === 'password' || type === 'email' || type === 'number' || type === 'search' || type === 'url' || type === 'tel')) {\r\n      this.domElement.value = String(value ?? '');\r\n      return;\r\n    }\r\n\r\n    // Textarea binding\r\n    if (tagName === 'TEXTAREA') {\r\n      this.domElement.value = String(value ?? '');\r\n      return;\r\n    }\r\n\r\n    // Select binding\r\n    if (tagName === 'SELECT') {\r\n      this.domElement.value = String(value ?? '');\r\n      return;\r\n    }\r\n\r\n    // Checkbox binding\r\n    if (tagName === 'INPUT' && type === 'checkbox') {\r\n      this.domElement.checked = !!value;\r\n      return;\r\n    }\r\n\r\n    // Radio button binding\r\n    if (tagName === 'INPUT' && type === 'radio') {\r\n      this.domElement.checked = String(value) === this.domElement.value;\r\n      return;\r\n    }\r\n\r\n    // Image src binding\r\n    if (tagName === 'IMG') {\r\n      this.domElement.src = String(value ?? '');\r\n      return;\r\n    }\r\n\r\n    // Href binding\r\n    if (tagName === 'A') {\r\n      this.domElement.href = String(value ?? '');\r\n      return;\r\n    }\r\n\r\n    // Class binding\r\n    if (this.stateProperty === 'className' || this.stateProperty === 'class') {\r\n      this.domElement.className = String(value ?? '');\r\n      return;\r\n    }\r\n\r\n    // Generic attribute binding\r\n    if (this.stateProperty.startsWith('attr-')) {\r\n      const attrName = this.stateProperty.replace(/^attr-/, '');\r\n      this.domElement.setAttribute(attrName, String(value ?? ''));\r\n      return;\r\n    }\r\n\r\n    // Style binding\r\n    if (this.stateProperty.startsWith('style-')) {\r\n      const styleProp = this.stateProperty.replace(/^style-/, '');\r\n      this.domElement.style[styleProp] = String(value ?? '');\r\n      return;\r\n    }\r\n\r\n    // Fallback: set as text content\r\n    this.domElement.textContent = String(value ?? '');\r\n  }\r\n\r\n  /**\r\n   * Get value from DOM element\r\n   * @returns {*}\r\n   */\r\n  readFromDOM() {\r\n    if (!this.domElement) {\r\n      return null;\r\n    }\r\n\r\n    const tagName = this.domElement.tagName;\r\n    const type = this.domElement.type || '';\r\n\r\n    // Text content\r\n    if (tagName === 'SPAN' || tagName === 'DIV' || tagName === 'P') {\r\n      return this.domElement.textContent;\r\n    }\r\n\r\n    // Input value\r\n    if (tagName === 'INPUT' && (type === 'text' || type === 'password' || type === 'email' || type === 'number')) {\r\n      const value = this.domElement.value;\r\n      // Try to parse as number if type is number\r\n      if (type === 'number') {\r\n        const num = parseFloat(value);\r\n        return isNaN(num) ? value : num;\r\n      }\r\n      return value;\r\n    }\r\n\r\n    // Textarea\r\n    if (tagName === 'TEXTAREA') {\r\n      return this.domElement.value;\r\n    }\r\n\r\n    // Select\r\n    if (tagName === 'SELECT') {\r\n      return this.domElement.value;\r\n    }\r\n\r\n    // Checkbox\r\n    if (tagName === 'INPUT' && type === 'checkbox') {\r\n      return this.domElement.checked;\r\n    }\r\n\r\n    // Radio\r\n    if (tagName === 'INPUT' && type === 'radio') {\r\n      return this.domElement.checked ? this.domElement.value : null;\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Attach event listeners for TWO_WAY/EVENT mode\r\n   * @private\r\n   */\r\n  attachEventListeners() {\r\n    if (!this.domElement) return;\r\n\r\n    const tagName = this.domElement.tagName;\r\n    const type = this.domElement.type || '';\r\n\r\n    // Determine appropriate events\r\n    let events = [];\r\n\r\n    if (tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT') {\r\n      events = ['input', 'change'];\r\n    } else if (tagName === 'SPAN' || tagName === 'DIV') {\r\n      events = ['click', 'change'];\r\n    }\r\n\r\n    // Create event handler\r\n    const handler = (e) => this.handleDOMChange(e);\r\n\r\n    // Attach listeners\r\n    events.forEach(event => {\r\n      this.domElement.addEventListener(event, handler);\r\n      this.eventListeners.push({ event, handler });\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Remove event listeners\r\n   * @private\r\n   */\r\n  removeEventListeners() {\r\n    if (!this.domElement) return;\r\n\r\n    this.eventListeners.forEach(({ event, handler }) => {\r\n      this.domElement.removeEventListener(event, handler);\r\n    });\r\n\r\n    this.eventListeners = [];\r\n  }\r\n\r\n  /**\r\n   * Handle DOM change event\r\n   * @private\r\n   */\r\n  handleDOMChange(event) {\r\n    if (!this.isActive || this.mode === BindingMode.ONE_WAY) {\r\n      return;\r\n    }\r\n\r\n    const value = this.readFromDOM();\r\n\r\n    // Validate if needed\r\n    if (typeof this.validate === 'function') {\r\n      try {\r\n        const valid = this.validate(value);\r\n        if (!valid) {\r\n          if (typeof this.onValidationError === 'function') {\r\n            this.onValidationError(value);\r\n          }\r\n          // Revert to previous value\r\n          this.updateDOM(this.currentValue);\r\n          return;\r\n        }\r\n      } catch (error) {\r\n        console.error('Validation error:', error);\r\n        this.updateDOM(this.currentValue);\r\n        return;\r\n      }\r\n    }\r\n\r\n    // Apply debouncing if needed\r\n    if (this.debounceMs > 0) {\r\n      this.pendingValue = value;\r\n\r\n      if (this.debounceTimer) {\r\n        clearTimeout(this.debounceTimer);\r\n      }\r\n\r\n      this.debounceTimer = setTimeout(() => {\r\n        this.notifyChange(this.pendingValue);\r\n        this.debounceTimer = null;\r\n      }, this.debounceMs);\r\n    } else {\r\n      this.notifyChange(value);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Notify of value change\r\n   * @private\r\n   */\r\n  notifyChange(value) {\r\n    this.isDirty = true;\r\n    this.previousValue = this.currentValue;\r\n    this.currentValue = value;\r\n\r\n    if (typeof this.onChange === 'function') {\r\n      try {\r\n        this.onChange(value, this.previousValue);\r\n      } catch (error) {\r\n        console.error('onChange callback error:', error);\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Disable binding temporarily\r\n   */\r\n  disable() {\r\n    this.isActive = false;\r\n  }\r\n\r\n  /**\r\n   * Enable binding\r\n   */\r\n  enable() {\r\n    this.isActive = true;\r\n  }\r\n\r\n  /**\r\n   * Check if binding is dirty\r\n   */\r\n  isDirtyBinding() {\r\n    return this.isDirty;\r\n  }\r\n\r\n  /**\r\n   * Reset dirty flag\r\n   */\r\n  clearDirty() {\r\n    this.isDirty = false;\r\n  }\r\n\r\n  /**\r\n   * Destroy binding and cleanup\r\n   */\r\n  destroy() {\r\n    this.detach();\r\n    this.onUpdate = null;\r\n    this.onChange = null;\r\n    this.onValidationError = null;\r\n\r\n    if (this.debounceTimer) {\r\n      clearTimeout(this.debounceTimer);\r\n    }\r\n  }\r\n}\r\n\r\n/**\r\n * StateBindingRegistry - Manages multiple state bindings\r\n */\r\nclass StateBindingRegistry {\r\n  constructor() {\r\n    this.bindings = new Map();  // statefulWidgetId \u2192 Map of stateProperty \u2192 StateBinding[]\r\n  }\r\n\r\n  /**\r\n   * Register a state binding\r\n   * @param {StateBinding} binding\r\n   */\r\n  register(binding) {\r\n    if (!(binding instanceof StateBinding)) {\r\n      throw new Error('Must register StateBinding instance');\r\n    }\r\n\r\n    const widgetId = binding.statefulWidgetId;\r\n    const property = binding.stateProperty;\r\n\r\n    if (!this.bindings.has(widgetId)) {\r\n      this.bindings.set(widgetId, new Map());\r\n    }\r\n\r\n    const widgetBindings = this.bindings.get(widgetId);\r\n\r\n    if (!widgetBindings.has(property)) {\r\n      widgetBindings.set(property, []);\r\n    }\r\n\r\n    widgetBindings.get(property).push(binding);\r\n\r\n    return binding.id;\r\n  }\r\n\r\n  /**\r\n   * Unregister a binding\r\n   * @param {string} bindingId\r\n   */\r\n  unregister(bindingId) {\r\n    for (const widgetBindings of this.bindings.values()) {\r\n      for (const bindings of widgetBindings.values()) {\r\n        const index = bindings.findIndex(b => b.id === bindingId);\r\n        if (index !== -1) {\r\n          bindings[index].destroy();\r\n          bindings.splice(index, 1);\r\n          return true;\r\n        }\r\n      }\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  /**\r\n   * Update state and sync to all bound DOM elements\r\n   * @param {string} statefulWidgetId\r\n   * @param {Object} stateUpdates - { property: value }\r\n   */\r\n  updateState(statefulWidgetId, stateUpdates) {\r\n    if (!this.bindings.has(statefulWidgetId)) {\r\n      return;\r\n    }\r\n\r\n    const widgetBindings = this.bindings.get(statefulWidgetId);\r\n\r\n    Object.entries(stateUpdates).forEach(([property, value]) => {\r\n      if (widgetBindings.has(property)) {\r\n        const bindings = widgetBindings.get(property);\r\n        bindings.forEach(binding => {\r\n          binding.updateDOM(value);\r\n        });\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Get dirty bindings (those modified from DOM)\r\n   * @returns {StateBinding[]}\r\n   */\r\n  getDirtyBindings() {\r\n    const dirty = [];\r\n\r\n    for (const widgetBindings of this.bindings.values()) {\r\n      for (const bindings of widgetBindings.values()) {\r\n        bindings.forEach(binding => {\r\n          if (binding.isDirtyBinding()) {\r\n            dirty.push(binding);\r\n          }\r\n        });\r\n      }\r\n    }\r\n\r\n    return dirty;\r\n  }\r\n\r\n  /**\r\n   * Get dirty values as state object\r\n   * @param {string} statefulWidgetId - Optional filter by widget\r\n   * @returns {Object}\r\n   */\r\n  getDirtyValues(statefulWidgetId = null) {\r\n    const values = {};\r\n\r\n    for (const [widgetId, widgetBindings] of this.bindings) {\r\n      if (statefulWidgetId && widgetId !== statefulWidgetId) {\r\n        continue;\r\n      }\r\n\r\n      for (const [property, bindings] of widgetBindings) {\r\n        for (const binding of bindings) {\r\n          if (binding.isDirtyBinding()) {\r\n            values[property] = binding.currentValue;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    return values;\r\n  }\r\n\r\n  /**\r\n   * Clear dirty flags on all bindings\r\n   */\r\n  clearDirty() {\r\n    for (const widgetBindings of this.bindings.values()) {\r\n      for (const bindings of widgetBindings.values()) {\r\n        bindings.forEach(binding => binding.clearDirty());\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get all bindings for a widget\r\n   * @param {string} statefulWidgetId\r\n   * @returns {StateBinding[]}\r\n   */\r\n  getWidgetBindings(statefulWidgetId) {\r\n    if (!this.bindings.has(statefulWidgetId)) {\r\n      return [];\r\n    }\r\n\r\n    const bindings = [];\r\n    const widgetBindings = this.bindings.get(statefulWidgetId);\r\n\r\n    for (const bindingList of widgetBindings.values()) {\r\n      bindings.push(...bindingList);\r\n    }\r\n\r\n    return bindings;\r\n  }\r\n\r\n  /**\r\n   * Get bindings for a specific property\r\n   * @param {string} statefulWidgetId\r\n   * @param {string} property\r\n   * @returns {StateBinding[]}\r\n   */\r\n  getPropertyBindings(statefulWidgetId, property) {\r\n    if (!this.bindings.has(statefulWidgetId)) {\r\n      return [];\r\n    }\r\n\r\n    const widgetBindings = this.bindings.get(statefulWidgetId);\r\n\r\n    if (!widgetBindings.has(property)) {\r\n      return [];\r\n    }\r\n\r\n    return widgetBindings.get(property);\r\n  }\r\n\r\n  /**\r\n   * Remove all bindings for a widget\r\n   * @param {string} statefulWidgetId\r\n   */\r\n  removeWidget(statefulWidgetId) {\r\n    if (!this.bindings.has(statefulWidgetId)) {\r\n      return;\r\n    }\r\n\r\n    const widgetBindings = this.bindings.get(statefulWidgetId);\r\n\r\n    for (const bindings of widgetBindings.values()) {\r\n      bindings.forEach(binding => binding.destroy());\r\n    }\r\n\r\n    this.bindings.delete(statefulWidgetId);\r\n  }\r\n\r\n  /**\r\n   * Clear all bindings\r\n   */\r\n  clear() {\r\n    for (const widgetBindings of this.bindings.values()) {\r\n      for (const bindings of widgetBindings.values()) {\r\n        bindings.forEach(binding => binding.destroy());\r\n      }\r\n    }\r\n\r\n    this.bindings.clear();\r\n  }\r\n\r\n  /**\r\n   * Get total number of bindings\r\n   * @returns {number}\r\n   */\r\n  getBindingCount() {\r\n    let count = 0;\r\n\r\n    for (const widgetBindings of this.bindings.values()) {\r\n      for (const bindings of widgetBindings.values()) {\r\n        count += bindings.length;\r\n      }\r\n    }\r\n\r\n    return count;\r\n  }\r\n\r\n  /**\r\n   * Get statistics\r\n   * @returns {Object}\r\n   */\r\n  getStats() {\r\n    const stats = {\r\n      totalBindings: 0,\r\n      totalWidgets: 0,\r\n      totalProperties: 0,\r\n      dirtyBindings: 0,\r\n      byMode: {}\r\n    };\r\n\r\n    stats.totalWidgets = this.bindings.size;\r\n\r\n    for (const widgetBindings of this.bindings.values()) {\r\n      stats.totalProperties += widgetBindings.size;\r\n\r\n      for (const bindings of widgetBindings.values()) {\r\n        stats.totalBindings += bindings.length;\r\n\r\n        bindings.forEach(binding => {\r\n          if (binding.isDirtyBinding()) {\r\n            stats.dirtyBindings++;\r\n          }\r\n\r\n          if (!stats.byMode[binding.mode]) {\r\n            stats.byMode[binding.mode] = 0;\r\n          }\r\n          stats.byMode[binding.mode]++;\r\n        });\r\n      }\r\n    }\r\n\r\n    return stats;\r\n  }\r\n}\r\n\r\n/**\r\n * Helper to create bindings more easily\r\n */\r\nfunction createBinding(config) {\r\n  return new StateBinding(config);\r\n}\r\n\r\n/**\r\n * Helper to create bidirectional binding\r\n */\r\nfunction createTwoWayBinding({\r\n  statefulWidgetId,\r\n  stateProperty,\r\n  vnode,\r\n  domElement = null,\r\n  transform = null,\r\n  validate = null,\r\n  debounceMs = 0\r\n} = {}) {\r\n  return new StateBinding({\r\n    statefulWidgetId,\r\n    stateProperty,\r\n    vnode,\r\n    domElement,\r\n    mode: BindingMode.TWO_WAY,\r\n    transform,\r\n    validate,\r\n    debounceMs\r\n  });\r\n}\r\n\r\n/**\r\n * Helper to create one-way binding\r\n */\r\nfunction createOneWayBinding({\r\n  statefulWidgetId,\r\n  stateProperty,\r\n  vnode,\r\n  domElement = null,\r\n  transform = null\r\n} = {}) {\r\n  return new StateBinding({\r\n    statefulWidgetId,\r\n    stateProperty,\r\n    vnode,\r\n    domElement,\r\n    mode: BindingMode.ONE_WAY,\r\n    transform\r\n  });\r\n}\r\n\r\n\r\n\r\nexport {BindingMode, StateBinding,StateBindingRegistry,createBinding,createTwoWayBinding,createOneWayBinding}"],
-  "mappings": "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",
-  "names": ["BindingMode", "StateBinding", "statefulWidgetId", "stateProperty", "vnode", "domElement", "mode", "transform", "validate", "debounceMs", "element", "index", "stateValue", "displayValue", "error", "value", "tagName", "type", "styleProp", "attrName", "num", "events", "handler", "e", "event", "StateBindingRegistry", "binding", "widgetId", "property", "widgetBindings", "bindingId", "bindings", "b", "stateUpdates", "dirty", "values", "bindingList", "count", "stats", "createBinding", "config", "createTwoWayBinding", "createOneWayBinding"]
-}
diff --git a/packages/flutterjs_engine/src/vdom/dist/style_converter.js b/packages/flutterjs_engine/src/vdom/dist/style_converter.js
deleted file mode 100644
index 4a22376b..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/style_converter.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class u{static colorToCss(t){if(!t)return null;if(typeof t=="string")return t;if(typeof t=="number")return this.numberToColor(t);if(t.value!==void 0)return this.numberToColor(t.value);if(t.r!==void 0&&t.g!==void 0&&t.b!==void 0){const e=t.a!==void 0?t.a:1;return e<1?`rgba(${t.r}, ${t.g}, ${t.b}, ${e})`:`rgb(${t.r}, ${t.g}, ${t.b})`}return null}static numberToColor(t){const e=(t>>24&255)/255,n=t>>16&255,r=t>>8&255,i=t&255;return e<1?`rgba(${n}, ${r}, ${i}, ${e.toFixed(2)})`:`#${(n<<16|r<<8|i).toString(16).padStart(6,"0")}`}static textStyleToCss(t){if(!t||typeof t!="object")return{};const e={};return t.fontSize!==void 0&&(e.fontSize=typeof t.fontSize=="number"?`${t.fontSize}px`:t.fontSize),t.color&&(e.color=this.colorToCss(t.color)),t.fontWeight!==void 0&&(e.fontWeight=this.fontWeightToCss(t.fontWeight)),t.fontStyle==="italic"&&(e.fontStyle="italic"),t.fontFamily&&(e.fontFamily=t.fontFamily),t.letterSpacing!==void 0&&(e.letterSpacing=`${t.letterSpacing}px`),t.wordSpacing!==void 0&&(e.wordSpacing=`${t.wordSpacing}px`),t.height!==void 0&&(e.lineHeight=typeof t.height=="number"?String(t.height):t.height),t.decoration&&(e.textDecoration=this.textDecorationToCss(t.decoration)),t.decorationColor&&(e.textDecorationColor=this.colorToCss(t.decorationColor)),t.decorationStyle&&(e.textDecorationStyle=t.decorationStyle),t.overflow==="ellipsis"&&(e.textOverflow="ellipsis",e.overflow="hidden",e.whiteSpace="nowrap"),t.shadows&&(e.textShadow=this.textShadowsToCss(t.shadows)),e}static fontWeightToCss(t){const e={w100:"100",w200:"200",w300:"300",w400:"400",w500:"500",w600:"600",w700:"700",w800:"800",w900:"900",normal:"400",bold:"700"};return typeof t=="number"?String(t):(console.log("weight"+t),typeof t=="string"&&e[t]||"400")}static textDecorationToCss(t){return typeof t=="string"?t:t.underline&&t.lineThrough?"underline line-through":t.underline?"underline":t.lineThrough?"line-through":t.overline?"overline":"none"}static textShadowsToCss(t){return Array.isArray(t)||(t=[t]),t.map(e=>{const n=e.offset?.dx||0,r=e.offset?.dy||0,i=e.blurRadius||0,o=this.colorToCss(e.color)||"#000000";return`${n}px ${r}px ${i}px ${o}`}).join(", ")}static paddingToCss(t){return t?{padding:this.edgeInsetsToCss(t)}:{}}static marginToCss(t){return t?{margin:this.edgeInsetsToCss(t)}:{}}static edgeInsetsToCss(t){if(!t)return null;if(t.all!==void 0)return`${t.all}px`;if(t.horizontal!==void 0||t.vertical!==void 0){const o=t.vertical||0,s=t.horizontal||0;return`${o}px ${s}px`}const e=t.top||0,n=t.right||0,r=t.bottom||0,i=t.left||0;return e===n&&n===r&&r===i?`${e}px`:e===r&&i===n?`${e}px ${n}px`:`${e}px ${n}px ${r}px ${i}px`}static decorationToCss(t){if(!t||typeof t!="object")return{};const e={};return t.color&&(e.backgroundColor=this.colorToCss(t.color)),t.border&&Object.assign(e,this.borderToCss(t.border)),t.borderRadius&&(e.borderRadius=this.borderRadiusToCss(t.borderRadius)),t.boxShadow&&(e.boxShadow=this.boxShadowToCss(t.boxShadow)),t.gradient&&(e.background=this.gradientToCss(t.gradient)),t.image&&(e.backgroundImage=`url(${t.image.image||t.image})`,e.backgroundSize="cover",e.backgroundPosition="center"),t.shape==="circle"&&(e.borderRadius="50%"),e}static borderToCss(t){const e={};if(t.all){const n=t.all.width||1,r=this.colorToCss(t.all.color)||"#000000",i=t.all.style||"solid";e.border=`${n}px ${i} ${r}`}else t.top&&(e.borderTop=this.borderSideToCss(t.top)),t.right&&(e.borderRight=this.borderSideToCss(t.right)),t.bottom&&(e.borderBottom=this.borderSideToCss(t.bottom)),t.left&&(e.borderLeft=this.borderSideToCss(t.left));return e}static borderSideToCss(t){const e=t.width||1,n=this.colorToCss(t.color)||"#000000",r=t.style||"solid";return`${e}px ${r} ${n}`}static borderRadiusToCss(t){if(typeof t=="number")return`${t}px`;if(t.circular!==void 0)return`${t.circular}px`;if(t.all!==void 0)return`${t.all}px`;const e=t.topLeft||0,n=t.topRight||0,r=t.bottomRight||0,i=t.bottomLeft||0;return e===n&&n===r&&r===i?`${e}px`:`${e}px ${n}px ${r}px ${i}px`}static boxShadowToCss(t){return Array.isArray(t)||(t=[t]),t.map(e=>{const n=e.offset?.dx||0,r=e.offset?.dy||0,i=e.blurRadius||0,o=e.spreadRadius||0,s=this.colorToCss(e.color)||"rgba(0,0,0,0.2)";return`${n}px ${r}px ${i}px ${o}px ${s}`}).join(", ")}static gradientToCss(t){if(!t)return null;const e=t.colors||[],n=t.stops||[];if(t.type==="linear"||t.begin||t.end){const r=this.getGradientAngle(t.begin,t.end),i=e.map((o,s)=>{const f=n[s]!==void 0?n[s]*100:null,a=this.colorToCss(o);return f!==null?`${a} ${f}%`:a}).join(", ");return`linear-gradient(${r}deg, ${i})`}return t.type==="radial"?`radial-gradient(circle, ${e.map((i,o)=>{const s=n[o]!==void 0?n[o]*100:null,f=this.colorToCss(i);return s!==null?`${f} ${s}%`:f}).join(", ")})`:null}static getGradientAngle(t,e){return!t&&!e?180:t==="topLeft"&&e==="bottomRight"?135:t==="topCenter"&&e==="bottomCenter"?180:t==="topRight"&&e==="bottomLeft"?225:t==="centerLeft"&&e==="centerRight"?90:180}static alignmentToCss(t){if(!t)return{};const e={display:"flex"};if(typeof t=="string"){const n={topLeft:{justifyContent:"flex-start",alignItems:"flex-start"},topCenter:{justifyContent:"center",alignItems:"flex-start"},topRight:{justifyContent:"flex-end",alignItems:"flex-start"},centerLeft:{justifyContent:"flex-start",alignItems:"center"},center:{justifyContent:"center",alignItems:"center"},centerRight:{justifyContent:"flex-end",alignItems:"center"},bottomLeft:{justifyContent:"flex-start",alignItems:"flex-end"},bottomCenter:{justifyContent:"center",alignItems:"flex-end"},bottomRight:{justifyContent:"flex-end",alignItems:"flex-end"}};return{...e,...n[t]||n.center}}return t.x!==void 0&&t.y!==void 0&&(e.justifyContent=this.alignmentValueToCss(t.x),e.alignItems=this.alignmentValueToCss(t.y)),e}static alignmentValueToCss(t){return t<=-.5?"flex-start":t>=.5?"flex-end":"center"}static mainAxisAlignmentToCss(t){return{start:"flex-start",end:"flex-end",center:"center",spaceBetween:"space-between",spaceAround:"space-around",spaceEvenly:"space-evenly"}[t]||"flex-start"}static crossAxisAlignmentToCss(t,e="column"){return{start:"flex-start",end:"flex-end",center:"center",stretch:"stretch",baseline:"baseline"}[t]||"center"}static constraintsToCss(t){if(!t)return{};const e={};return t.minWidth!==void 0&&(e.minWidth=`${t.minWidth}px`),t.maxWidth!==void 0&&t.maxWidth!==1/0&&(e.maxWidth=`${t.maxWidth}px`),t.minHeight!==void 0&&(e.minHeight=`${t.minHeight}px`),t.maxHeight!==void 0&&t.maxHeight!==1/0&&(e.maxHeight=`${t.maxHeight}px`),e}static transformToCss(t){if(!t)return{};const e={};if(t.rotateZ!==void 0)e.transform=`rotate(${t.rotateZ}rad)`;else if(t.scale!==void 0)e.transform=`scale(${t.scale})`;else if(t.translateX!==void 0||t.translateY!==void 0){const n=t.translateX||0,r=t.translateY||0;e.transform=`translate(${n}px, ${r}px)`}return e}static clipToCss(t){return t?{none:{overflow:"visible"},hardEdge:{overflow:"hidden"},antiAlias:{overflow:"hidden"},antiAliasWithSaveLayer:{overflow:"hidden"}}[t]||{}:{}}static elevationToBoxShadow(t){if(!t||t<=0)return"none";const e={1:"0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)",2:"0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)",3:"0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)",4:"0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)",5:"0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)"};if(t<=5)return e[t]||e[1];const n=t*2,r=Math.floor(t/2);return`0 ${t}px ${n}px rgba(0,0,0,0.${Math.min(30,t*2)})`}}export{u as StyleConverter};
-//# sourceMappingURL=style_converter.js.map
diff --git a/packages/flutterjs_engine/src/vdom/dist/style_converter.js.map b/packages/flutterjs_engine/src/vdom/dist/style_converter.js.map
deleted file mode 100644
index 0531ee46..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/style_converter.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/style_converter.js"],
-  "sourcesContent": ["/**\r\n * StyleConverter - Convert Flutter styles to CSS\r\n * \r\n * Handles conversion of Flutter style properties to CSS:\r\n * - EdgeInsets \u2192 padding/margin\r\n * - Color \u2192 hex/rgba\r\n * - TextStyle \u2192 font properties\r\n * - BoxDecoration \u2192 border/shadow/gradient\r\n * - Alignment \u2192 flexbox\r\n * - And more...\r\n */\r\n\r\nclass StyleConverter {\r\n  // ============================================================================\r\n  // COLOR CONVERSION\r\n  // ============================================================================\r\n\r\n  /**\r\n   * Convert Flutter Color to CSS color string\r\n   * @param {Color|number|string} color - Flutter Color object or value\r\n   * @returns {string} CSS color (hex or rgba)\r\n   */\r\n  static colorToCss(color) {\r\n    if (!color) return null;\r\n\r\n    // Already a CSS string\r\n    if (typeof color === 'string') {\r\n      return color;\r\n    }\r\n\r\n    // Numeric color value (0xAARRGGBB format)\r\n    if (typeof color === 'number') {\r\n      return this.numberToColor(color);\r\n    }\r\n\r\n    // Color object with value property\r\n    if (color.value !== undefined) {\r\n      return this.numberToColor(color.value);\r\n    }\r\n\r\n    // Color object with r, g, b, a properties\r\n    if (color.r !== undefined && color.g !== undefined && color.b !== undefined) {\r\n      const a = color.a !== undefined ? color.a : 1;\r\n      return a < 1\r\n        ? `rgba(${color.r}, ${color.g}, ${color.b}, ${a})`\r\n        : `rgb(${color.r}, ${color.g}, ${color.b})`;\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Convert numeric color (0xAARRGGBB) to CSS\r\n   * @private\r\n   */\r\n  static numberToColor(value) {\r\n    // Extract ARGB components\r\n    const a = ((value >> 24) & 0xFF) / 255;\r\n    const r = (value >> 16) & 0xFF;\r\n    const g = (value >> 8) & 0xFF;\r\n    const b = value & 0xFF;\r\n\r\n    // Return rgba if alpha < 1, otherwise hex\r\n    if (a < 1) {\r\n      return `rgba(${r}, ${g}, ${b}, ${a.toFixed(2)})`;\r\n    }\r\n\r\n    // Convert to hex\r\n    const hex = ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');\r\n    return `#${hex}`;\r\n  }\r\n\r\n  // ============================================================================\r\n  // TEXT STYLE CONVERSION\r\n  // ============================================================================\r\n\r\n  /**\r\n   * Convert Flutter TextStyle to CSS properties\r\n   * @param {TextStyle} style - Flutter TextStyle object\r\n   * @returns {Object} CSS style object\r\n   */\r\n  static textStyleToCss(style) {\r\n    if (!style || typeof style !== 'object') return {};\r\n\r\n    const css = {};\r\n\r\n    // Font size\r\n    if (style.fontSize !== undefined) {\r\n      css.fontSize = typeof style.fontSize === 'number'\r\n        ? `${style.fontSize}px`\r\n        : style.fontSize;\r\n    }\r\n\r\n    // Color\r\n    if (style.color) {\r\n      css.color = this.colorToCss(style.color);\r\n    }\r\n\r\n    // Font weight\r\n    if (style.fontWeight !== undefined) {\r\n      css.fontWeight = this.fontWeightToCss(style.fontWeight);\r\n    }\r\n\r\n    // Font style (italic)\r\n    if (style.fontStyle === 'italic') {\r\n      css.fontStyle = 'italic';\r\n    }\r\n\r\n    // Font family\r\n    if (style.fontFamily) {\r\n      css.fontFamily = style.fontFamily;\r\n    }\r\n\r\n    // Letter spacing\r\n    if (style.letterSpacing !== undefined) {\r\n      css.letterSpacing = `${style.letterSpacing}px`;\r\n    }\r\n\r\n    // Word spacing\r\n    if (style.wordSpacing !== undefined) {\r\n      css.wordSpacing = `${style.wordSpacing}px`;\r\n    }\r\n\r\n    // Line height\r\n    if (style.height !== undefined) {\r\n      css.lineHeight = typeof style.height === 'number'\r\n        ? String(style.height)\r\n        : style.height;\r\n    }\r\n\r\n    // Text decoration\r\n    if (style.decoration) {\r\n      css.textDecoration = this.textDecorationToCss(style.decoration);\r\n    }\r\n\r\n    // Text decoration color\r\n    if (style.decorationColor) {\r\n      css.textDecorationColor = this.colorToCss(style.decorationColor);\r\n    }\r\n\r\n    // Text decoration style\r\n    if (style.decorationStyle) {\r\n      css.textDecorationStyle = style.decorationStyle;\r\n    }\r\n\r\n    // Text overflow\r\n    if (style.overflow === 'ellipsis') {\r\n      css.textOverflow = 'ellipsis';\r\n      css.overflow = 'hidden';\r\n      css.whiteSpace = 'nowrap';\r\n    }\r\n\r\n    // Text shadow\r\n    if (style.shadows) {\r\n      css.textShadow = this.textShadowsToCss(style.shadows);\r\n    }\r\n\r\n    return css;\r\n  }\r\n\r\n  /**\r\n   * Convert Flutter FontWeight to CSS\r\n   * @private\r\n   */\r\n  static fontWeightToCss(weight) {\r\n    // Flutter FontWeight enum\r\n    const weightMap = {\r\n      w100: '100',\r\n      w200: '200',\r\n      w300: '300',\r\n      w400: '400', // normal\r\n      w500: '500',\r\n      w600: '600',\r\n      w700: '700', // bold\r\n      w800: '800',\r\n      w900: '900',\r\n      normal: '400',\r\n      bold: '700'\r\n    };\r\n    // If it's a number, return as string\r\n    if (typeof weight === 'number') return String(weight);\r\n\r\n    // If it's a string, look it up in the map\r\n    console.log(\"weight\"+weight);\r\n    if (typeof weight === 'string') {\r\n      return weightMap[weight] || '400';\r\n    }\r\n\r\n    return '400';\r\n  }\r\n\r\n  /**\r\n   * Convert Flutter TextDecoration to CSS\r\n   * @private\r\n   */\r\n  static textDecorationToCss(decoration) {\r\n    if (typeof decoration === 'string') return decoration;\r\n\r\n    // Handle multiple decorations\r\n    if (decoration.underline && decoration.lineThrough) {\r\n      return 'underline line-through';\r\n    }\r\n    if (decoration.underline) return 'underline';\r\n    if (decoration.lineThrough) return 'line-through';\r\n    if (decoration.overline) return 'overline';\r\n\r\n    return 'none';\r\n  }\r\n\r\n  /**\r\n   * Convert text shadows\r\n   * @private\r\n   */\r\n  static textShadowsToCss(shadows) {\r\n    if (!Array.isArray(shadows)) shadows = [shadows];\r\n\r\n    return shadows\r\n      .map(shadow => {\r\n        const x = shadow.offset?.dx || 0;\r\n        const y = shadow.offset?.dy || 0;\r\n        const blur = shadow.blurRadius || 0;\r\n        const color = this.colorToCss(shadow.color) || '#000000';\r\n        return `${x}px ${y}px ${blur}px ${color}`;\r\n      })\r\n      .join(', ');\r\n  }\r\n\r\n  // ============================================================================\r\n  // EDGE INSETS (Padding/Margin)\r\n  // ============================================================================\r\n\r\n  /**\r\n   * Convert EdgeInsets to CSS padding\r\n   * @param {EdgeInsets} padding - Flutter EdgeInsets\r\n   * @returns {Object} CSS padding properties\r\n   */\r\n  static paddingToCss(padding) {\r\n    if (!padding) return {};\r\n    return { padding: this.edgeInsetsToCss(padding) };\r\n  }\r\n\r\n  /**\r\n   * Convert EdgeInsets to CSS margin\r\n   * @param {EdgeInsets} margin - Flutter EdgeInsets\r\n   * @returns {Object} CSS margin properties\r\n   */\r\n  static marginToCss(margin) {\r\n    if (!margin) return {};\r\n    return { margin: this.edgeInsetsToCss(margin) };\r\n  }\r\n\r\n  /**\r\n   * Convert EdgeInsets to CSS string\r\n   * @private\r\n   */\r\n  static edgeInsetsToCss(insets) {\r\n    if (!insets) return null;\r\n\r\n    // EdgeInsets.all(value)\r\n    if (insets.all !== undefined) {\r\n      return `${insets.all}px`;\r\n    }\r\n\r\n    // EdgeInsets.symmetric\r\n    if (insets.horizontal !== undefined || insets.vertical !== undefined) {\r\n      const v = insets.vertical || 0;\r\n      const h = insets.horizontal || 0;\r\n      return `${v}px ${h}px`;\r\n    }\r\n\r\n    // EdgeInsets.only or EdgeInsets.fromLTRB\r\n    const top = insets.top || 0;\r\n    const right = insets.right || 0;\r\n    const bottom = insets.bottom || 0;\r\n    const left = insets.left || 0;\r\n\r\n    // Optimize output\r\n    if (top === right && right === bottom && bottom === left) {\r\n      return `${top}px`;\r\n    }\r\n    if (top === bottom && left === right) {\r\n      return `${top}px ${right}px`;\r\n    }\r\n\r\n    return `${top}px ${right}px ${bottom}px ${left}px`;\r\n  }\r\n\r\n  // ============================================================================\r\n  // BOX DECORATION\r\n  // ============================================================================\r\n\r\n  /**\r\n   * Convert BoxDecoration to CSS properties\r\n   * @param {BoxDecoration} decoration - Flutter BoxDecoration\r\n   * @returns {Object} CSS style object\r\n   */\r\n  static decorationToCss(decoration) {\r\n    if (!decoration || typeof decoration !== 'object') return {};\r\n\r\n    const css = {};\r\n\r\n    // Background color\r\n    if (decoration.color) {\r\n      css.backgroundColor = this.colorToCss(decoration.color);\r\n    }\r\n\r\n    // Border\r\n    if (decoration.border) {\r\n      Object.assign(css, this.borderToCss(decoration.border));\r\n    }\r\n\r\n    // Border radius\r\n    if (decoration.borderRadius) {\r\n      css.borderRadius = this.borderRadiusToCss(decoration.borderRadius);\r\n    }\r\n\r\n    // Box shadow\r\n    if (decoration.boxShadow) {\r\n      css.boxShadow = this.boxShadowToCss(decoration.boxShadow);\r\n    }\r\n\r\n    // Gradient\r\n    if (decoration.gradient) {\r\n      css.background = this.gradientToCss(decoration.gradient);\r\n    }\r\n\r\n    // Image (background image)\r\n    if (decoration.image) {\r\n      css.backgroundImage = `url(${decoration.image.image || decoration.image})`;\r\n      css.backgroundSize = 'cover';\r\n      css.backgroundPosition = 'center';\r\n    }\r\n\r\n    // Shape (circle)\r\n    if (decoration.shape === 'circle') {\r\n      css.borderRadius = '50%';\r\n    }\r\n\r\n    return css;\r\n  }\r\n\r\n  /**\r\n   * Convert Border to CSS\r\n   * @private\r\n   */\r\n  static borderToCss(border) {\r\n    const css = {};\r\n\r\n    if (border.all) {\r\n      // Border.all()\r\n      const width = border.all.width || 1;\r\n      const color = this.colorToCss(border.all.color) || '#000000';\r\n      const style = border.all.style || 'solid';\r\n      css.border = `${width}px ${style} ${color}`;\r\n    } else {\r\n      // Individual borders\r\n      if (border.top) {\r\n        css.borderTop = this.borderSideToCss(border.top);\r\n      }\r\n      if (border.right) {\r\n        css.borderRight = this.borderSideToCss(border.right);\r\n      }\r\n      if (border.bottom) {\r\n        css.borderBottom = this.borderSideToCss(border.bottom);\r\n      }\r\n      if (border.left) {\r\n        css.borderLeft = this.borderSideToCss(border.left);\r\n      }\r\n    }\r\n\r\n    return css;\r\n  }\r\n\r\n  /**\r\n   * Convert BorderSide to CSS string\r\n   * @private\r\n   */\r\n  static borderSideToCss(side) {\r\n    const width = side.width || 1;\r\n    const color = this.colorToCss(side.color) || '#000000';\r\n    const style = side.style || 'solid';\r\n    return `${width}px ${style} ${color}`;\r\n  }\r\n\r\n  /**\r\n   * Convert BorderRadius to CSS\r\n   * @private\r\n   */\r\n  static borderRadiusToCss(radius) {\r\n    if (typeof radius === 'number') {\r\n      return `${radius}px`;\r\n    }\r\n\r\n    // BorderRadius.circular(value)\r\n    if (radius.circular !== undefined) {\r\n      return `${radius.circular}px`;\r\n    }\r\n\r\n    // BorderRadius.all(Radius.circular(value))\r\n    if (radius.all !== undefined) {\r\n      return `${radius.all}px`;\r\n    }\r\n\r\n    // BorderRadius.only\r\n    const tl = radius.topLeft || 0;\r\n    const tr = radius.topRight || 0;\r\n    const br = radius.bottomRight || 0;\r\n    const bl = radius.bottomLeft || 0;\r\n\r\n    if (tl === tr && tr === br && br === bl) {\r\n      return `${tl}px`;\r\n    }\r\n\r\n    return `${tl}px ${tr}px ${br}px ${bl}px`;\r\n  }\r\n\r\n  /**\r\n   * Convert BoxShadow to CSS\r\n   * @private\r\n   */\r\n  static boxShadowToCss(shadows) {\r\n    if (!Array.isArray(shadows)) shadows = [shadows];\r\n\r\n    return shadows\r\n      .map(shadow => {\r\n        const x = shadow.offset?.dx || 0;\r\n        const y = shadow.offset?.dy || 0;\r\n        const blur = shadow.blurRadius || 0;\r\n        const spread = shadow.spreadRadius || 0;\r\n        const color = this.colorToCss(shadow.color) || 'rgba(0,0,0,0.2)';\r\n        return `${x}px ${y}px ${blur}px ${spread}px ${color}`;\r\n      })\r\n      .join(', ');\r\n  }\r\n\r\n  /**\r\n   * Convert Gradient to CSS\r\n   * @private\r\n   */\r\n  static gradientToCss(gradient) {\r\n    if (!gradient) return null;\r\n\r\n    const colors = gradient.colors || [];\r\n    const stops = gradient.stops || [];\r\n\r\n    // LinearGradient\r\n    if (gradient.type === 'linear' || gradient.begin || gradient.end) {\r\n      const angle = this.getGradientAngle(gradient.begin, gradient.end);\r\n      const colorStops = colors.map((color, i) => {\r\n        const stop = stops[i] !== undefined ? stops[i] * 100 : null;\r\n        const cssColor = this.colorToCss(color);\r\n        return stop !== null ? `${cssColor} ${stop}%` : cssColor;\r\n      }).join(', ');\r\n\r\n      return `linear-gradient(${angle}deg, ${colorStops})`;\r\n    }\r\n\r\n    // RadialGradient\r\n    if (gradient.type === 'radial') {\r\n      const colorStops = colors.map((color, i) => {\r\n        const stop = stops[i] !== undefined ? stops[i] * 100 : null;\r\n        const cssColor = this.colorToCss(color);\r\n        return stop !== null ? `${cssColor} ${stop}%` : cssColor;\r\n      }).join(', ');\r\n\r\n      return `radial-gradient(circle, ${colorStops})`;\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Calculate gradient angle from begin/end alignment\r\n   * @private\r\n   */\r\n  static getGradientAngle(begin, end) {\r\n    // Default to top to bottom (180deg)\r\n    if (!begin && !end) return 180;\r\n\r\n    // Map common alignments to angles\r\n    if (begin === 'topLeft' && end === 'bottomRight') return 135;\r\n    if (begin === 'topCenter' && end === 'bottomCenter') return 180;\r\n    if (begin === 'topRight' && end === 'bottomLeft') return 225;\r\n    if (begin === 'centerLeft' && end === 'centerRight') return 90;\r\n\r\n    return 180; // Default\r\n  }\r\n\r\n  // ============================================================================\r\n  // ALIGNMENT\r\n  // ============================================================================\r\n\r\n  /**\r\n   * Convert Alignment to CSS flexbox properties\r\n   * @param {Alignment|string} alignment - Flutter Alignment\r\n   * @returns {Object} CSS flexbox properties\r\n   */\r\n  static alignmentToCss(alignment) {\r\n    if (!alignment) return {};\r\n\r\n    const css = {\r\n      display: 'flex'\r\n    };\r\n\r\n    // String-based alignments\r\n    if (typeof alignment === 'string') {\r\n      const map = {\r\n        topLeft: { justifyContent: 'flex-start', alignItems: 'flex-start' },\r\n        topCenter: { justifyContent: 'center', alignItems: 'flex-start' },\r\n        topRight: { justifyContent: 'flex-end', alignItems: 'flex-start' },\r\n        centerLeft: { justifyContent: 'flex-start', alignItems: 'center' },\r\n        center: { justifyContent: 'center', alignItems: 'center' },\r\n        centerRight: { justifyContent: 'flex-end', alignItems: 'center' },\r\n        bottomLeft: { justifyContent: 'flex-start', alignItems: 'flex-end' },\r\n        bottomCenter: { justifyContent: 'center', alignItems: 'flex-end' },\r\n        bottomRight: { justifyContent: 'flex-end', alignItems: 'flex-end' },\r\n      };\r\n\r\n      return { ...css, ...(map[alignment] || map.center) };\r\n    }\r\n\r\n    // Object-based alignment with x, y values (-1 to 1)\r\n    if (alignment.x !== undefined && alignment.y !== undefined) {\r\n      css.justifyContent = this.alignmentValueToCss(alignment.x);\r\n      css.alignItems = this.alignmentValueToCss(alignment.y);\r\n    }\r\n\r\n    return css;\r\n  }\r\n\r\n  /**\r\n   * Convert alignment value (-1 to 1) to CSS\r\n   * @private\r\n   */\r\n  static alignmentValueToCss(value) {\r\n    if (value <= -0.5) return 'flex-start';\r\n    if (value >= 0.5) return 'flex-end';\r\n    return 'center';\r\n  }\r\n\r\n  /**\r\n   * Convert MainAxisAlignment to CSS justify-content\r\n   * @param {string} alignment - Flutter MainAxisAlignment\r\n   * @returns {string} CSS justify-content value\r\n   */\r\n  static mainAxisAlignmentToCss(alignment) {\r\n    const map = {\r\n      start: 'flex-start',\r\n      end: 'flex-end',\r\n      center: 'center',\r\n      spaceBetween: 'space-between',\r\n      spaceAround: 'space-around',\r\n      spaceEvenly: 'space-evenly',\r\n    };\r\n\r\n    return map[alignment] || 'flex-start';\r\n  }\r\n\r\n  /**\r\n   * Convert CrossAxisAlignment to CSS align-items\r\n   * @param {string} alignment - Flutter CrossAxisAlignment\r\n   * @param {string} direction - 'row' or 'column'\r\n   * @returns {string} CSS align-items value\r\n   */\r\n  static crossAxisAlignmentToCss(alignment, direction = 'column') {\r\n    const map = {\r\n      start: 'flex-start',\r\n      end: 'flex-end',\r\n      center: 'center',\r\n      stretch: 'stretch',\r\n      baseline: 'baseline',\r\n    };\r\n\r\n    return map[alignment] || 'center';\r\n  }\r\n\r\n  // ============================================================================\r\n  // CONSTRAINTS\r\n  // ============================================================================\r\n\r\n  /**\r\n   * Convert BoxConstraints to CSS\r\n   * @param {BoxConstraints} constraints - Flutter BoxConstraints\r\n   * @returns {Object} CSS style object\r\n   */\r\n  static constraintsToCss(constraints) {\r\n    if (!constraints) return {};\r\n\r\n    const css = {};\r\n\r\n    if (constraints.minWidth !== undefined) {\r\n      css.minWidth = `${constraints.minWidth}px`;\r\n    }\r\n    if (constraints.maxWidth !== undefined && constraints.maxWidth !== Infinity) {\r\n      css.maxWidth = `${constraints.maxWidth}px`;\r\n    }\r\n    if (constraints.minHeight !== undefined) {\r\n      css.minHeight = `${constraints.minHeight}px`;\r\n    }\r\n    if (constraints.maxHeight !== undefined && constraints.maxHeight !== Infinity) {\r\n      css.maxHeight = `${constraints.maxHeight}px`;\r\n    }\r\n\r\n    return css;\r\n  }\r\n\r\n  // ============================================================================\r\n  // TRANSFORMS\r\n  // ============================================================================\r\n\r\n  /**\r\n   * Convert Matrix4 transform to CSS\r\n   * @param {Matrix4|Object} transform - Flutter transform\r\n   * @returns {Object} CSS transform properties\r\n   */\r\n  static transformToCss(transform) {\r\n    if (!transform) return {};\r\n\r\n    const css = {};\r\n\r\n    // Handle common transform objects\r\n    if (transform.rotateZ !== undefined) {\r\n      css.transform = `rotate(${transform.rotateZ}rad)`;\r\n    } else if (transform.scale !== undefined) {\r\n      css.transform = `scale(${transform.scale})`;\r\n    } else if (transform.translateX !== undefined || transform.translateY !== undefined) {\r\n      const x = transform.translateX || 0;\r\n      const y = transform.translateY || 0;\r\n      css.transform = `translate(${x}px, ${y}px)`;\r\n    }\r\n\r\n    return css;\r\n  }\r\n\r\n  // ============================================================================\r\n  // CLIP BEHAVIOR\r\n  // ============================================================================\r\n\r\n  /**\r\n   * Convert Clip behavior to CSS\r\n   * @param {string} clip - Flutter Clip enum\r\n   * @returns {Object} CSS overflow properties\r\n   */\r\n  static clipToCss(clip) {\r\n    if (!clip) return {};\r\n\r\n    const map = {\r\n      none: { overflow: 'visible' },\r\n      hardEdge: { overflow: 'hidden' },\r\n      antiAlias: { overflow: 'hidden' },\r\n      antiAliasWithSaveLayer: { overflow: 'hidden' },\r\n    };\r\n\r\n    return map[clip] || {};\r\n  }\r\n\r\n  // ============================================================================\r\n  // MATERIAL DESIGN ELEVATION\r\n  // ============================================================================\r\n\r\n  /**\r\n   * Convert Material elevation to box-shadow\r\n   * @param {number} elevation - Elevation level (0-24)\r\n   * @returns {string} CSS box-shadow\r\n   */\r\n  static elevationToBoxShadow(elevation) {\r\n    if (!elevation || elevation <= 0) return 'none';\r\n\r\n    // Material Design elevation shadows\r\n    const elevations = {\r\n      1: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',\r\n      2: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',\r\n      3: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',\r\n      4: '0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',\r\n      5: '0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)',\r\n    };\r\n\r\n    // For values > 5, interpolate\r\n    if (elevation <= 5) {\r\n      return elevations[elevation] || elevations[1];\r\n    }\r\n\r\n    const blur = elevation * 2;\r\n    const spread = Math.floor(elevation / 2);\r\n    return `0 ${elevation}px ${blur}px rgba(0,0,0,0.${Math.min(30, elevation * 2)})`;\r\n  }\r\n}\r\n\r\n\r\n\r\nexport { StyleConverter }"],
-  "mappings": "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",
-  "names": ["StyleConverter", "color", "a", "value", "r", "g", "b", "style", "css", "weight", "weightMap", "decoration", "shadows", "shadow", "x", "y", "blur", "padding", "margin", "insets", "v", "h", "top", "right", "bottom", "left", "border", "width", "side", "radius", "tl", "tr", "br", "bl", "spread", "gradient", "colors", "stops", "angle", "colorStops", "i", "stop", "cssColor", "begin", "end", "alignment", "map", "direction", "constraints", "transform", "clip", "elevation", "elevations"]
-}
diff --git a/packages/flutterjs_engine/src/vdom/dist/update_scheduler.js b/packages/flutterjs_engine/src/vdom/dist/update_scheduler.js
deleted file mode 100644
index 446f1d82..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/update_scheduler.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const h={IMMEDIATE:"immediate",HIGH:"high",NORMAL:"normal",LOW:"low"};class c{constructor(e,s=h.NORMAL,t=null,i=null){this.callback=e,this.priority=s,this.id=t||`update-${Date.now()}-${Math.random()}`,this.batchId=i,this.timestamp=Date.now(),this.attempts=0,this.lastError=null,this.sequence=l.globalSequence++}}class u{constructor(e=null){this.id=e||`batch-${Date.now()}-${Math.random()}`,this.updates=[],this.createdAt=Date.now(),this.status="pending"}add(e){if(!(e instanceof c))throw new Error("Must add UpdateRequest to batch");this.updates.push(e)}size(){return this.updates.length}clear(){this.updates=[]}}class l{static globalSequence=0;constructor(e={}){this.maxBatchSize=e.maxBatchSize||50,this.frameDeadline=e.frameDeadline||5,this.enableAutoFlushing=e.enableAutoFlushing!==!1,this.enablePrioritization=e.enablePrioritization!==!1,this.enableMetrics=e.enableMetrics!==!1,this.queues=new Map([[h.IMMEDIATE,[]],[h.HIGH,[]],[h.NORMAL,[]],[h.LOW,[]]]),this.currentBatch=new u("current"),this.pendingBatches=[],this.isProcessing=!1,this.frameScheduled=!1,this.onBeforeFlushed=e.onBeforeFlushed||null,this.onAfterFlushed=e.onAfterFlushed||null,this.onError=e.onError||null,this.metrics={totalUpdates:0,totalBatches:0,totalTime:0,averageTime:0,minTime:1/0,maxTime:0,errors:0,skipped:0},this.flush=this.flush.bind(this),this.scheduleFrame=this.scheduleFrame.bind(this)}schedule(e,s=h.NORMAL,t=null){if(typeof e!="function")throw new Error("Update callback must be a function");const i=new c(e,s,t),n=this.queues.get(s);if(!n)throw new Error(`Invalid priority: ${s}`);return n.push(i),s===h.IMMEDIATE?this.flush([i]):this.enableAutoFlushing&&!this.frameScheduled&&this.scheduleFrame(),i.id}scheduleBatch(e,s=h.NORMAL){if(!Array.isArray(e))throw new Error("Batch callbacks must be an array");const t=new u,i=this.queues.get(s);if(!i)throw new Error(`Invalid priority: ${s}`);return e.forEach((n,r)=>{const a=new c(n,s,`batch-${t.id}-${r}`,t.id);t.add(a),i.push(a)}),this.pendingBatches.push(t),this.enableAutoFlushing&&!this.frameScheduled&&this.scheduleFrame(),t.id}flush(e=null){if(this.isProcessing)return{success:!1,reason:"Already processing"};const s=performance.now();try{this.isProcessing=!0,this.frameScheduled=!1;let t=e;if(t||(t=this.getNextUpdates()),t.length===0)return{success:!0,processed:0,time:0};if(typeof this.onBeforeFlushed=="function")try{this.onBeforeFlushed(t)}catch(r){console.warn("onBeforeFlushed error:",r)}const i=[];if(t.forEach(r=>{try{r.attempts++,r.callback(),i.push({id:r.id,success:!0}),this.metrics.totalUpdates++}catch(a){if(r.lastError=a,i.push({id:r.id,success:!1,error:a}),this.metrics.errors++,typeof this.onError=="function")try{this.onError(a,r)}catch(d){console.error("onError handler error:",d)}else console.error("Update error:",a)}}),typeof this.onAfterFlushed=="function")try{this.onAfterFlushed(i)}catch(r){console.warn("onAfterFlushed error:",r)}const n=performance.now()-s;return this.metrics.totalTime+=n,this.metrics.minTime=Math.min(this.metrics.minTime,n),this.metrics.maxTime=Math.max(this.metrics.maxTime,n),this.metrics.averageTime=this.metrics.totalTime/Math.max(1,this.metrics.totalUpdates),this.metrics.totalBatches++,{success:!0,processed:i.filter(r=>r.success).length,failed:i.filter(r=>!r.success).length,results:i,time:n}}finally{this.isProcessing=!1}}scheduleFrame(){this.frameScheduled||(this.frameScheduled=!0,typeof requestAnimationFrame<"u"?requestAnimationFrame(()=>{this.flush()}):setTimeout(()=>{this.flush()},16))}getNextUpdates(){const e=[];if(this.enablePrioritization)for(const s of[h.IMMEDIATE,h.HIGH,h.NORMAL,h.LOW]){const t=this.queues.get(s);for(;t.length>0&&e.length<this.maxBatchSize;)e.push(t.shift())}else{const s=[];for(const t of this.queues.values())for(;t.length>0;)s.push(t.shift());for(s.sort((t,i)=>t.sequence-i.sequence);s.length>0&&e.length<this.maxBatchSize;)e.push(s.shift());for(const t of s)this.queues.get(t.priority).push(t)}return e}cancel(e){for(const s of this.queues.values()){const t=s.findIndex(i=>i.id===e);if(t!==-1)return s.splice(t,1),this.metrics.skipped++,!0}for(const s of this.pendingBatches){const t=s.updates.findIndex(i=>i.id===e);if(t!==-1)return s.updates.splice(t,1),this.metrics.skipped++,!0}return!1}cancelBatch(e){let s=0;for(const t of this.queues.values())for(let i=t.length-1;i>=0;i--)t[i].batchId===e&&(t.splice(i,1),s++,this.metrics.skipped++);for(let t=this.pendingBatches.length-1;t>=0;t--)if(this.pendingBatches[t].id===e){this.pendingBatches.splice(t,1);break}return s}flushAll(){let e={success:!0,totalProcessed:0,totalFailed:0,iterations:0,time:0};const s=performance.now();for(;this.hasUpdates();){const t=this.flush();if(!t.success){e.success=!1;break}if(e.totalProcessed+=t.processed,e.totalFailed+=t.failed,e.iterations++,e.iterations>1e3){e.success=!1,e.warning="Iteration limit reached";break}}return e.time=performance.now()-s,e}hasUpdates(){for(const e of this.queues.values())if(e.length>0)return!0;return this.pendingBatches.length>0||this.currentBatch.size()>0}getPendingCount(){let e=0;for(const s of this.queues.values())e+=s.length;for(const s of this.pendingBatches)e+=s.size();return e+=this.currentBatch.size(),e}getQueueStats(){const e={total:0,byPriority:{},batches:0};for(const[s,t]of this.queues)e.byPriority[s]=t.length,e.total+=t.length;return e.batches=this.pendingBatches.reduce((s,t)=>s+t.size(),0),e.total+=e.batches,e}getMetrics(){return{...this.metrics,pending:this.getPendingCount(),isProcessing:this.isProcessing}}reset(){this.queues.forEach(e=>e.length=0),this.pendingBatches.length=0,this.currentBatch.clear(),this.isProcessing=!1,this.frameScheduled=!1,this.metrics={totalUpdates:0,totalBatches:0,totalTime:0,averageTime:0,minTime:1/0,maxTime:0,errors:0,skipped:0}}clearMetrics(){this.metrics={totalUpdates:0,totalBatches:0,totalTime:0,averageTime:0,minTime:1/0,maxTime:0,errors:0,skipped:0}}drain(){const e=[];for(const s of this.queues.values())e.push(...s.splice(0));for(const s of this.pendingBatches)e.push(...s.updates.splice(0));return e.push(...this.currentBatch.updates.splice(0)),e}waitForFlush(){return new Promise(e=>{if(!this.hasUpdates()&&!this.isProcessing){e(!0);return}const s=()=>{!this.hasUpdates()&&!this.isProcessing?e(!0):requestAnimationFrame(s)};s()})}createUpdater(e=h.NORMAL){return(s,t=null)=>this.schedule(s,e,t)}}export{u as UpdateBatch,h as UpdatePriority,c as UpdateRequest,l as UpdateScheduler};
-//# sourceMappingURL=update_scheduler.js.map
diff --git a/packages/flutterjs_engine/src/vdom/dist/update_scheduler.js.map b/packages/flutterjs_engine/src/vdom/dist/update_scheduler.js.map
deleted file mode 100644
index 09ee092d..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/update_scheduler.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/update_scheduler.js"],
-  "sourcesContent": ["/**\r\n * UpdateScheduler - Batches and schedules DOM updates\r\n * \r\n * Coordinates multiple concurrent updates to minimize DOM thrashing and\r\n * repaints. Automatically batches updates and applies them during\r\n * requestAnimationFrame for optimal performance.\r\n * \r\n * Features:\r\n * - Update batching (group multiple updates)\r\n * - Automatic frame scheduling (requestAnimationFrame)\r\n * - Priority levels (immediate, normal, deferred)\r\n * - Concurrent update management\r\n * - Callback hooks (before/after)\r\n * - Update queuing and flushing\r\n * - Performance monitoring\r\n */\r\n\r\n/**\r\n * Update priority levels\r\n */\r\nconst UpdatePriority = {\r\n  IMMEDIATE: 'immediate',  // Execute immediately (no batching)\r\n  HIGH: 'high',            // Execute in next frame\r\n  NORMAL: 'normal',        // Execute in current or next frame\r\n  LOW: 'low'               // Execute when idle\r\n};\r\n\r\n/**\r\n * Update request object\r\n */\r\nclass UpdateRequest {\r\n  constructor(callback, priority = UpdatePriority.NORMAL, id = null, batchId = null) {\r\n    this.callback = callback;\r\n    this.priority = priority;\r\n    this.id = id || `update-${Date.now()}-${Math.random()}`;\r\n    this.batchId = batchId; // Track which batch this belongs to\r\n    this.timestamp = Date.now();\r\n    this.attempts = 0;\r\n    this.lastError = null;\r\n    this.sequence = UpdateScheduler.globalSequence++;\r\n  }\r\n}\r\n\r\n\r\n/**\r\n * Update batch - groups related updates\r\n */\r\nclass UpdateBatch {\r\n  constructor(batchId = null) {\r\n    this.id = batchId || `batch-${Date.now()}-${Math.random()}`;\r\n    this.updates = [];\r\n    this.createdAt = Date.now();\r\n    this.status = 'pending'; // pending, processing, completed, failed\r\n  }\r\n\r\n  add(update) {\r\n    if (!(update instanceof UpdateRequest)) {\r\n      throw new Error('Must add UpdateRequest to batch');\r\n    }\r\n    this.updates.push(update);\r\n  }\r\n\r\n  size() {\r\n    return this.updates.length;\r\n  }\r\n\r\n  clear() {\r\n    this.updates = [];\r\n  }\r\n}\r\n\r\n/**\r\n * UpdateScheduler - Manages batching and scheduling of updates\r\n */\r\nclass UpdateScheduler {\r\n  // Class variable to track global insertion order\r\n  static globalSequence = 0;\r\n  constructor(options = {}) {\r\n    // Configuration\r\n    this.maxBatchSize = options.maxBatchSize || 50;\r\n    this.frameDeadline = options.frameDeadline || 5; // ms remaining in frame\r\n    this.enableAutoFlushing = options.enableAutoFlushing !== false;\r\n    this.enablePrioritization = options.enablePrioritization !== false;\r\n    this.enableMetrics = options.enableMetrics !== false;\r\n\r\n    // State\r\n    this.queues = new Map([\r\n      [UpdatePriority.IMMEDIATE, []],\r\n      [UpdatePriority.HIGH, []],\r\n      [UpdatePriority.NORMAL, []],\r\n      [UpdatePriority.LOW, []]\r\n    ]);\r\n\r\n    this.currentBatch = new UpdateBatch('current');\r\n    this.pendingBatches = [];\r\n    this.isProcessing = false;\r\n    this.frameScheduled = false;\r\n\r\n    // Callbacks\r\n    this.onBeforeFlushed = options.onBeforeFlushed || null;\r\n    this.onAfterFlushed = options.onAfterFlushed || null;\r\n    this.onError = options.onError || null;\r\n\r\n    // Metrics\r\n    this.metrics = {\r\n      totalUpdates: 0,\r\n      totalBatches: 0,\r\n      totalTime: 0,\r\n      averageTime: 0,\r\n      minTime: Infinity,\r\n      maxTime: 0,\r\n      errors: 0,\r\n      skipped: 0\r\n    };\r\n\r\n    // Bind methods\r\n    this.flush = this.flush.bind(this);\r\n    this.scheduleFrame = this.scheduleFrame.bind(this);\r\n  }\r\n\r\n  /**\r\n   * Schedule an update to be processed\r\n   * @param {Function} callback - Function to execute\r\n   * @param {string} priority - Update priority level\r\n   * @param {string} id - Optional update ID\r\n   * @returns {string} Update ID\r\n   */\r\n  schedule(callback, priority = UpdatePriority.NORMAL, id = null) {\r\n    if (typeof callback !== 'function') {\r\n      throw new Error('Update callback must be a function');\r\n    }\r\n\r\n    const update = new UpdateRequest(callback, priority, id);\r\n    const queue = this.queues.get(priority);\r\n\r\n    if (!queue) {\r\n      throw new Error(`Invalid priority: ${priority}`);\r\n    }\r\n\r\n    // Add to appropriate queue\r\n    queue.push(update);\r\n\r\n    // Handle based on priority\r\n    if (priority === UpdatePriority.IMMEDIATE) {\r\n      this.flush([update]);\r\n    } else if (this.enableAutoFlushing && !this.frameScheduled) {\r\n      this.scheduleFrame();\r\n    }\r\n\r\n    return update.id;\r\n  }\r\n\r\n  /**\r\n   * Schedule multiple updates as a batch\r\n   * @param {Function[]} callbacks - Array of callbacks\r\n   * @param {string} priority - Priority for all updates\r\n   * @returns {string} Batch ID\r\n   */\r\n scheduleBatch(callbacks, priority = UpdatePriority.NORMAL) {\r\n  if (!Array.isArray(callbacks)) {\r\n    throw new Error('Batch callbacks must be an array');\r\n  }\r\n\r\n  const batch = new UpdateBatch();\r\n  const queue = this.queues.get(priority);\r\n\r\n  if (!queue) {\r\n    throw new Error(`Invalid priority: ${priority}`);\r\n  }\r\n\r\n  // Create updates with the specified priority and add them to the priority queue\r\n  callbacks.forEach((callback, index) => {\r\n    const update = new UpdateRequest(callback, priority, `batch-${batch.id}-${index}`, batch.id);\r\n    batch.add(update);\r\n    // IMPORTANT: Add to the priority queue, not just to batch\r\n    queue.push(update);\r\n  });\r\n\r\n  // Store batch reference for tracking\r\n  this.pendingBatches.push(batch);\r\n\r\n  if (this.enableAutoFlushing && !this.frameScheduled) {\r\n    this.scheduleFrame();\r\n  }\r\n\r\n  return batch.id;\r\n}\r\n\r\n  /**\r\n   * Flush (execute) all scheduled updates\r\n   * @param {UpdateRequest[]} updates - Specific updates to flush (or all)\r\n   * @returns {Object} Flush result\r\n   */\r\n  flush(updates = null) {\r\n    if (this.isProcessing) {\r\n      return { success: false, reason: 'Already processing' };\r\n    }\r\n\r\n    const startTime = performance.now();\r\n\r\n    try {\r\n      this.isProcessing = true;\r\n      this.frameScheduled = false;\r\n\r\n      // Get updates to process\r\n      let toProcess = updates;\r\n      if (!toProcess) {\r\n        toProcess = this.getNextUpdates();\r\n      }\r\n\r\n      if (toProcess.length === 0) {\r\n        return { success: true, processed: 0, time: 0 };\r\n      }\r\n\r\n      // Call before hook\r\n      if (typeof this.onBeforeFlushed === 'function') {\r\n        try {\r\n          this.onBeforeFlushed(toProcess);\r\n        } catch (error) {\r\n          console.warn('onBeforeFlushed error:', error);\r\n        }\r\n      }\r\n\r\n      // Execute updates\r\n      const results = [];\r\n      toProcess.forEach((update) => {\r\n        try {\r\n          update.attempts++;\r\n          update.callback();\r\n          results.push({ id: update.id, success: true });\r\n          this.metrics.totalUpdates++;\r\n        } catch (error) {\r\n          update.lastError = error;\r\n          results.push({ id: update.id, success: false, error });\r\n          this.metrics.errors++;\r\n\r\n          // Call error handler\r\n          if (typeof this.onError === 'function') {\r\n            try {\r\n              this.onError(error, update);\r\n            } catch (e) {\r\n              console.error('onError handler error:', e);\r\n            }\r\n          } else {\r\n            console.error('Update error:', error);\r\n          }\r\n        }\r\n      });\r\n\r\n      // Call after hook\r\n      if (typeof this.onAfterFlushed === 'function') {\r\n        try {\r\n          this.onAfterFlushed(results);\r\n        } catch (error) {\r\n          console.warn('onAfterFlushed error:', error);\r\n        }\r\n      }\r\n\r\n      // Update metrics\r\n      const elapsedTime = performance.now() - startTime;\r\n      this.metrics.totalTime += elapsedTime;\r\n      this.metrics.minTime = Math.min(this.metrics.minTime, elapsedTime);\r\n      this.metrics.maxTime = Math.max(this.metrics.maxTime, elapsedTime);\r\n      this.metrics.averageTime = this.metrics.totalTime / Math.max(1, this.metrics.totalUpdates);\r\n      this.metrics.totalBatches++;\r\n\r\n      return {\r\n        success: true,\r\n        processed: results.filter(r => r.success).length,\r\n        failed: results.filter(r => !r.success).length,\r\n        results,\r\n        time: elapsedTime\r\n      };\r\n    } finally {\r\n      this.isProcessing = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Schedule flush in next frame\r\n   */\r\n  scheduleFrame() {\r\n    if (this.frameScheduled) {\r\n      return;\r\n    }\r\n\r\n    this.frameScheduled = true;\r\n\r\n    if (typeof requestAnimationFrame !== 'undefined') {\r\n      requestAnimationFrame(() => {\r\n        this.flush();\r\n      });\r\n    } else {\r\n      // Fallback for non-browser environments\r\n      setTimeout(() => {\r\n        this.flush();\r\n      }, 16); // ~60fps\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get next batch of updates to process\r\n   * @private\r\n   */\r\n  getNextUpdates() {\r\n  const updates = [];\r\n\r\n  if (this.enablePrioritization) {\r\n    // Process queues in priority order: IMMEDIATE, HIGH, NORMAL, LOW\r\n    for (const priority of [\r\n      UpdatePriority.IMMEDIATE,\r\n      UpdatePriority.HIGH,\r\n      UpdatePriority.NORMAL,\r\n      UpdatePriority.LOW\r\n    ]) {\r\n      const queue = this.queues.get(priority);\r\n      while (queue.length > 0 && updates.length < this.maxBatchSize) {\r\n        updates.push(queue.shift());\r\n      }\r\n    }\r\n  } else {\r\n    // FIFO mode: Collect all updates and sort by sequence number\r\n    const allUpdates = [];\r\n\r\n    // Collect from all priority queues\r\n    for (const queue of this.queues.values()) {\r\n      while (queue.length > 0) {\r\n        allUpdates.push(queue.shift());\r\n      }\r\n    }\r\n\r\n    // Sort by sequence (insertion order)\r\n    allUpdates.sort((a, b) => a.sequence - b.sequence);\r\n\r\n    // Take up to maxBatchSize\r\n    while (allUpdates.length > 0 && updates.length < this.maxBatchSize) {\r\n      updates.push(allUpdates.shift());\r\n    }\r\n\r\n    // Re-queue remaining updates back to their queues\r\n    for (const update of allUpdates) {\r\n      const queue = this.queues.get(update.priority);\r\n      queue.push(update);\r\n    }\r\n  }\r\n\r\n  return updates;\r\n}\r\n\r\n\r\n\r\n  /**\r\n   * Cancel a scheduled update\r\n   * @param {string} updateId - Update ID to cancel\r\n   * @returns {boolean} Whether update was found and cancelled\r\n   */\r\n  cancel(updateId) {\r\n    for (const queue of this.queues.values()) {\r\n      const index = queue.findIndex(u => u.id === updateId);\r\n      if (index !== -1) {\r\n        queue.splice(index, 1);\r\n        this.metrics.skipped++;\r\n        return true;\r\n      }\r\n    }\r\n\r\n    // Try in pending batches\r\n    for (const batch of this.pendingBatches) {\r\n      const index = batch.updates.findIndex(u => u.id === updateId);\r\n      if (index !== -1) {\r\n        batch.updates.splice(index, 1);\r\n        this.metrics.skipped++;\r\n        return true;\r\n      }\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  /**\r\n   * Cancel all updates in a batch\r\n   * @param {string} batchId - Batch ID to cancel\r\n   * @returns {number} Number of updates cancelled\r\n   */\r\n cancelBatch(batchId) {\r\n  let cancelled = 0;\r\n\r\n  // Cancel updates that belong to this batch by batchId field\r\n  for (const queue of this.queues.values()) {\r\n    for (let i = queue.length - 1; i >= 0; i--) {\r\n      if (queue[i].batchId === batchId) {\r\n        queue.splice(i, 1);\r\n        cancelled++;\r\n        this.metrics.skipped++;\r\n      }\r\n    }\r\n  }\r\n\r\n  // Remove the batch reference\r\n  for (let i = this.pendingBatches.length - 1; i >= 0; i--) {\r\n    if (this.pendingBatches[i].id === batchId) {\r\n      this.pendingBatches.splice(i, 1);\r\n      break;\r\n    }\r\n  }\r\n\r\n  return cancelled;\r\n}\r\n\r\n  /**\r\n   * Flush all pending updates synchronously\r\n   * @returns {Object} Flush result\r\n   */\r\n  flushAll() {\r\n    let totalResult = {\r\n      success: true,\r\n      totalProcessed: 0,\r\n      totalFailed: 0,\r\n      iterations: 0,\r\n      time: 0\r\n    };\r\n\r\n    const startTime = performance.now();\r\n\r\n    // Keep flushing until all queues are empty\r\n    while (this.hasUpdates()) {\r\n      const result = this.flush();\r\n      if (!result.success) {\r\n        totalResult.success = false;\r\n        break;\r\n      }\r\n\r\n      totalResult.totalProcessed += result.processed;\r\n      totalResult.totalFailed += result.failed;\r\n      totalResult.iterations++;\r\n\r\n      // Prevent infinite loops\r\n      if (totalResult.iterations > 1000) {\r\n        totalResult.success = false;\r\n        totalResult.warning = 'Iteration limit reached';\r\n        break;\r\n      }\r\n    }\r\n\r\n    totalResult.time = performance.now() - startTime;\r\n    return totalResult;\r\n  }\r\n\r\n  /**\r\n   * Check if there are pending updates\r\n   * @returns {boolean}\r\n   */\r\n  hasUpdates() {\r\n    // Check all priority queues\r\n    for (const queue of this.queues.values()) {\r\n      if (queue.length > 0) return true;\r\n    }\r\n\r\n    // Check pending batches\r\n    if (this.pendingBatches.length > 0) return true;\r\n\r\n    // Check current batch\r\n    if (this.currentBatch.size() > 0) return true;\r\n\r\n    return false;\r\n  }\r\n\r\n  /**\r\n   * Get number of pending updates\r\n   * @returns {number}\r\n   */\r\n  getPendingCount() {\r\n    let count = 0;\r\n\r\n    for (const queue of this.queues.values()) {\r\n      count += queue.length;\r\n    }\r\n\r\n    for (const batch of this.pendingBatches) {\r\n      count += batch.size();\r\n    }\r\n\r\n    count += this.currentBatch.size();\r\n    return count;\r\n  }\r\n\r\n  /**\r\n   * Get queue statistics\r\n   * @returns {Object} Queue stats\r\n   */\r\n  getQueueStats() {\r\n    const stats = {\r\n      total: 0,\r\n      byPriority: {},\r\n      batches: 0\r\n    };\r\n\r\n    for (const [priority, queue] of this.queues) {\r\n      stats.byPriority[priority] = queue.length;\r\n      stats.total += queue.length;\r\n    }\r\n\r\n    stats.batches = this.pendingBatches.reduce((sum, b) => sum + b.size(), 0);\r\n    stats.total += stats.batches;\r\n\r\n    return stats;\r\n  }\r\n\r\n  /**\r\n   * Get performance metrics\r\n   * @returns {Object} Metrics\r\n   */\r\n  getMetrics() {\r\n    return {\r\n      ...this.metrics,\r\n      pending: this.getPendingCount(),\r\n      isProcessing: this.isProcessing\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Reset all state\r\n   */\r\n  reset() {\r\n    this.queues.forEach(queue => queue.length = 0);\r\n    this.pendingBatches.length = 0;\r\n    this.currentBatch.clear();\r\n    this.isProcessing = false;\r\n    this.frameScheduled = false;\r\n\r\n    // Reset metrics\r\n    this.metrics = {\r\n      totalUpdates: 0,\r\n      totalBatches: 0,\r\n      totalTime: 0,\r\n      averageTime: 0,\r\n      minTime: Infinity,\r\n      maxTime: 0,\r\n      errors: 0,\r\n      skipped: 0\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Clear metrics only\r\n   */\r\n  clearMetrics() {\r\n    this.metrics = {\r\n      totalUpdates: 0,\r\n      totalBatches: 0,\r\n      totalTime: 0,\r\n      averageTime: 0,\r\n      minTime: Infinity,\r\n      maxTime: 0,\r\n      errors: 0,\r\n      skipped: 0\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Drain all updates and return them without executing\r\n   * @returns {UpdateRequest[]}\r\n   */\r\n  drain() {\r\n    const updates = [];\r\n\r\n    for (const queue of this.queues.values()) {\r\n      updates.push(...queue.splice(0));\r\n    }\r\n\r\n    for (const batch of this.pendingBatches) {\r\n      updates.push(...batch.updates.splice(0));\r\n    }\r\n\r\n    updates.push(...this.currentBatch.updates.splice(0));\r\n\r\n    return updates;\r\n  }\r\n\r\n  /**\r\n   * Wait for all updates to complete\r\n   * @returns {Promise}\r\n   */\r\n  waitForFlush() {\r\n    return new Promise((resolve) => {\r\n      if (!this.hasUpdates() && !this.isProcessing) {\r\n        resolve(true);\r\n        return;\r\n      }\r\n\r\n      const checkComplete = () => {\r\n        if (!this.hasUpdates() && !this.isProcessing) {\r\n          resolve(true);\r\n        } else {\r\n          requestAnimationFrame(checkComplete);\r\n        }\r\n      };\r\n\r\n      checkComplete();\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Create a priority-based updater\r\n   * Returns a function to easily schedule updates at a specific priority\r\n   * @param {string} priority - Default priority\r\n   * @returns {Function}\r\n   */\r\n  createUpdater(priority = UpdatePriority.NORMAL) {\r\n    return (callback, id = null) => this.schedule(callback, priority, id);\r\n  }\r\n}\r\n\r\n\r\nexport { UpdatePriority, UpdateRequest, UpdateBatch, UpdateScheduler }"],
-  "mappings": "AAoBA,MAAMA,EAAiB,CACrB,UAAW,YACX,KAAM,OACN,OAAQ,SACR,IAAK,KACP,EAKA,MAAMC,CAAc,CAClB,YAAYC,EAAUC,EAAWH,EAAe,OAAQI,EAAK,KAAMC,EAAU,KAAM,CACjF,KAAK,SAAWH,EAChB,KAAK,SAAWC,EAChB,KAAK,GAAKC,GAAM,UAAU,KAAK,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,GACrD,KAAK,QAAUC,EACf,KAAK,UAAY,KAAK,IAAI,EAC1B,KAAK,SAAW,EAChB,KAAK,UAAY,KACjB,KAAK,SAAWC,EAAgB,gBAClC,CACF,CAMA,MAAMC,CAAY,CAChB,YAAYF,EAAU,KAAM,CAC1B,KAAK,GAAKA,GAAW,SAAS,KAAK,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,GACzD,KAAK,QAAU,CAAC,EAChB,KAAK,UAAY,KAAK,IAAI,EAC1B,KAAK,OAAS,SAChB,CAEA,IAAIG,EAAQ,CACV,GAAI,EAAEA,aAAkBP,GACtB,MAAM,IAAI,MAAM,iCAAiC,EAEnD,KAAK,QAAQ,KAAKO,CAAM,CAC1B,CAEA,MAAO,CACL,OAAO,KAAK,QAAQ,MACtB,CAEA,OAAQ,CACN,KAAK,QAAU,CAAC,CAClB,CACF,CAKA,MAAMF,CAAgB,CAEpB,OAAO,eAAiB,EACxB,YAAYG,EAAU,CAAC,EAAG,CAExB,KAAK,aAAeA,EAAQ,cAAgB,GAC5C,KAAK,cAAgBA,EAAQ,eAAiB,EAC9C,KAAK,mBAAqBA,EAAQ,qBAAuB,GACzD,KAAK,qBAAuBA,EAAQ,uBAAyB,GAC7D,KAAK,cAAgBA,EAAQ,gBAAkB,GAG/C,KAAK,OAAS,IAAI,IAAI,CACpB,CAACT,EAAe,UAAW,CAAC,CAAC,EAC7B,CAACA,EAAe,KAAM,CAAC,CAAC,EACxB,CAACA,EAAe,OAAQ,CAAC,CAAC,EAC1B,CAACA,EAAe,IAAK,CAAC,CAAC,CACzB,CAAC,EAED,KAAK,aAAe,IAAIO,EAAY,SAAS,EAC7C,KAAK,eAAiB,CAAC,EACvB,KAAK,aAAe,GACpB,KAAK,eAAiB,GAGtB,KAAK,gBAAkBE,EAAQ,iBAAmB,KAClD,KAAK,eAAiBA,EAAQ,gBAAkB,KAChD,KAAK,QAAUA,EAAQ,SAAW,KAGlC,KAAK,QAAU,CACb,aAAc,EACd,aAAc,EACd,UAAW,EACX,YAAa,EACb,QAAS,IACT,QAAS,EACT,OAAQ,EACR,QAAS,CACX,EAGA,KAAK,MAAQ,KAAK,MAAM,KAAK,IAAI,EACjC,KAAK,cAAgB,KAAK,cAAc,KAAK,IAAI,CACnD,CASA,SAASP,EAAUC,EAAWH,EAAe,OAAQI,EAAK,KAAM,CAC9D,GAAI,OAAOF,GAAa,WACtB,MAAM,IAAI,MAAM,oCAAoC,EAGtD,MAAMM,EAAS,IAAIP,EAAcC,EAAUC,EAAUC,CAAE,EACjDM,EAAQ,KAAK,OAAO,IAAIP,CAAQ,EAEtC,GAAI,CAACO,EACH,MAAM,IAAI,MAAM,qBAAqBP,CAAQ,EAAE,EAIjD,OAAAO,EAAM,KAAKF,CAAM,EAGbL,IAAaH,EAAe,UAC9B,KAAK,MAAM,CAACQ,CAAM,CAAC,EACV,KAAK,oBAAsB,CAAC,KAAK,gBAC1C,KAAK,cAAc,EAGdA,EAAO,EAChB,CAQD,cAAcG,EAAWR,EAAWH,EAAe,OAAQ,CAC1D,GAAI,CAAC,MAAM,QAAQW,CAAS,EAC1B,MAAM,IAAI,MAAM,kCAAkC,EAGpD,MAAMC,EAAQ,IAAIL,EACZG,EAAQ,KAAK,OAAO,IAAIP,CAAQ,EAEtC,GAAI,CAACO,EACH,MAAM,IAAI,MAAM,qBAAqBP,CAAQ,EAAE,EAIjD,OAAAQ,EAAU,QAAQ,CAACT,EAAUW,IAAU,CACrC,MAAML,EAAS,IAAIP,EAAcC,EAAUC,EAAU,SAASS,EAAM,EAAE,IAAIC,CAAK,GAAID,EAAM,EAAE,EAC3FA,EAAM,IAAIJ,CAAM,EAEhBE,EAAM,KAAKF,CAAM,CACnB,CAAC,EAGD,KAAK,eAAe,KAAKI,CAAK,EAE1B,KAAK,oBAAsB,CAAC,KAAK,gBACnC,KAAK,cAAc,EAGdA,EAAM,EACf,CAOE,MAAME,EAAU,KAAM,CACpB,GAAI,KAAK,aACP,MAAO,CAAE,QAAS,GAAO,OAAQ,oBAAqB,EAGxD,MAAMC,EAAY,YAAY,IAAI,EAElC,GAAI,CACF,KAAK,aAAe,GACpB,KAAK,eAAiB,GAGtB,IAAIC,EAAYF,EAKhB,GAJKE,IACHA,EAAY,KAAK,eAAe,GAG9BA,EAAU,SAAW,EACvB,MAAO,CAAE,QAAS,GAAM,UAAW,EAAG,KAAM,CAAE,EAIhD,GAAI,OAAO,KAAK,iBAAoB,WAClC,GAAI,CACF,KAAK,gBAAgBA,CAAS,CAChC,OAASC,EAAO,CACd,QAAQ,KAAK,yBAA0BA,CAAK,CAC9C,CAIF,MAAMC,EAAU,CAAC,EA0BjB,GAzBAF,EAAU,QAASR,GAAW,CAC5B,GAAI,CACFA,EAAO,WACPA,EAAO,SAAS,EAChBU,EAAQ,KAAK,CAAE,GAAIV,EAAO,GAAI,QAAS,EAAK,CAAC,EAC7C,KAAK,QAAQ,cACf,OAASS,EAAO,CAMd,GALAT,EAAO,UAAYS,EACnBC,EAAQ,KAAK,CAAE,GAAIV,EAAO,GAAI,QAAS,GAAO,MAAAS,CAAM,CAAC,EACrD,KAAK,QAAQ,SAGT,OAAO,KAAK,SAAY,WAC1B,GAAI,CACF,KAAK,QAAQA,EAAOT,CAAM,CAC5B,OAASW,EAAG,CACV,QAAQ,MAAM,yBAA0BA,CAAC,CAC3C,MAEA,QAAQ,MAAM,gBAAiBF,CAAK,CAExC,CACF,CAAC,EAGG,OAAO,KAAK,gBAAmB,WACjC,GAAI,CACF,KAAK,eAAeC,CAAO,CAC7B,OAASD,EAAO,CACd,QAAQ,KAAK,wBAAyBA,CAAK,CAC7C,CAIF,MAAMG,EAAc,YAAY,IAAI,EAAIL,EACxC,YAAK,QAAQ,WAAaK,EAC1B,KAAK,QAAQ,QAAU,KAAK,IAAI,KAAK,QAAQ,QAASA,CAAW,EACjE,KAAK,QAAQ,QAAU,KAAK,IAAI,KAAK,QAAQ,QAASA,CAAW,EACjE,KAAK,QAAQ,YAAc,KAAK,QAAQ,UAAY,KAAK,IAAI,EAAG,KAAK,QAAQ,YAAY,EACzF,KAAK,QAAQ,eAEN,CACL,QAAS,GACT,UAAWF,EAAQ,OAAO,GAAK,EAAE,OAAO,EAAE,OAC1C,OAAQA,EAAQ,OAAO,GAAK,CAAC,EAAE,OAAO,EAAE,OACxC,QAAAA,EACA,KAAME,CACR,CACF,QAAE,CACA,KAAK,aAAe,EACtB,CACF,CAKA,eAAgB,CACV,KAAK,iBAIT,KAAK,eAAiB,GAElB,OAAO,sBAA0B,IACnC,sBAAsB,IAAM,CAC1B,KAAK,MAAM,CACb,CAAC,EAGD,WAAW,IAAM,CACf,KAAK,MAAM,CACb,EAAG,EAAE,EAET,CAMA,gBAAiB,CACjB,MAAMN,EAAU,CAAC,EAEjB,GAAI,KAAK,qBAEP,UAAWX,IAAY,CACrBH,EAAe,UACfA,EAAe,KACfA,EAAe,OACfA,EAAe,GACjB,EAAG,CACD,MAAMU,EAAQ,KAAK,OAAO,IAAIP,CAAQ,EACtC,KAAOO,EAAM,OAAS,GAAKI,EAAQ,OAAS,KAAK,cAC/CA,EAAQ,KAAKJ,EAAM,MAAM,CAAC,CAE9B,KACK,CAEL,MAAMW,EAAa,CAAC,EAGpB,UAAWX,KAAS,KAAK,OAAO,OAAO,EACrC,KAAOA,EAAM,OAAS,GACpBW,EAAW,KAAKX,EAAM,MAAM,CAAC,EAQjC,IAHAW,EAAW,KAAK,CAACC,EAAGC,IAAMD,EAAE,SAAWC,EAAE,QAAQ,EAG1CF,EAAW,OAAS,GAAKP,EAAQ,OAAS,KAAK,cACpDA,EAAQ,KAAKO,EAAW,MAAM,CAAC,EAIjC,UAAWb,KAAUa,EACL,KAAK,OAAO,IAAIb,EAAO,QAAQ,EACvC,KAAKA,CAAM,CAErB,CAEA,OAAOM,CACT,CASE,OAAOU,EAAU,CACf,UAAWd,KAAS,KAAK,OAAO,OAAO,EAAG,CACxC,MAAMG,EAAQH,EAAM,UAAUe,GAAKA,EAAE,KAAOD,CAAQ,EACpD,GAAIX,IAAU,GACZ,OAAAH,EAAM,OAAOG,EAAO,CAAC,EACrB,KAAK,QAAQ,UACN,EAEX,CAGA,UAAWD,KAAS,KAAK,eAAgB,CACvC,MAAMC,EAAQD,EAAM,QAAQ,UAAUa,GAAKA,EAAE,KAAOD,CAAQ,EAC5D,GAAIX,IAAU,GACZ,OAAAD,EAAM,QAAQ,OAAOC,EAAO,CAAC,EAC7B,KAAK,QAAQ,UACN,EAEX,CAEA,MAAO,EACT,CAOD,YAAYR,EAAS,CACpB,IAAIqB,EAAY,EAGhB,UAAWhB,KAAS,KAAK,OAAO,OAAO,EACrC,QAAS,EAAIA,EAAM,OAAS,EAAG,GAAK,EAAG,IACjCA,EAAM,CAAC,EAAE,UAAYL,IACvBK,EAAM,OAAO,EAAG,CAAC,EACjBgB,IACA,KAAK,QAAQ,WAMnB,QAASC,EAAI,KAAK,eAAe,OAAS,EAAGA,GAAK,EAAGA,IACnD,GAAI,KAAK,eAAeA,CAAC,EAAE,KAAOtB,EAAS,CACzC,KAAK,eAAe,OAAOsB,EAAG,CAAC,EAC/B,KACF,CAGF,OAAOD,CACT,CAME,UAAW,CACT,IAAIE,EAAc,CAChB,QAAS,GACT,eAAgB,EAChB,YAAa,EACb,WAAY,EACZ,KAAM,CACR,EAEA,MAAMb,EAAY,YAAY,IAAI,EAGlC,KAAO,KAAK,WAAW,GAAG,CACxB,MAAMc,EAAS,KAAK,MAAM,EAC1B,GAAI,CAACA,EAAO,QAAS,CACnBD,EAAY,QAAU,GACtB,KACF,CAOA,GALAA,EAAY,gBAAkBC,EAAO,UACrCD,EAAY,aAAeC,EAAO,OAClCD,EAAY,aAGRA,EAAY,WAAa,IAAM,CACjCA,EAAY,QAAU,GACtBA,EAAY,QAAU,0BACtB,KACF,CACF,CAEA,OAAAA,EAAY,KAAO,YAAY,IAAI,EAAIb,EAChCa,CACT,CAMA,YAAa,CAEX,UAAWlB,KAAS,KAAK,OAAO,OAAO,EACrC,GAAIA,EAAM,OAAS,EAAG,MAAO,GAO/B,OAHI,KAAK,eAAe,OAAS,GAG7B,KAAK,aAAa,KAAK,EAAI,CAGjC,CAMA,iBAAkB,CAChB,IAAIoB,EAAQ,EAEZ,UAAWpB,KAAS,KAAK,OAAO,OAAO,EACrCoB,GAASpB,EAAM,OAGjB,UAAWE,KAAS,KAAK,eACvBkB,GAASlB,EAAM,KAAK,EAGtB,OAAAkB,GAAS,KAAK,aAAa,KAAK,EACzBA,CACT,CAMA,eAAgB,CACd,MAAMC,EAAQ,CACZ,MAAO,EACP,WAAY,CAAC,EACb,QAAS,CACX,EAEA,SAAW,CAAC5B,EAAUO,CAAK,IAAK,KAAK,OACnCqB,EAAM,WAAW5B,CAAQ,EAAIO,EAAM,OACnCqB,EAAM,OAASrB,EAAM,OAGvB,OAAAqB,EAAM,QAAU,KAAK,eAAe,OAAO,CAACC,EAAKT,IAAMS,EAAMT,EAAE,KAAK,EAAG,CAAC,EACxEQ,EAAM,OAASA,EAAM,QAEdA,CACT,CAMA,YAAa,CACX,MAAO,CACL,GAAG,KAAK,QACR,QAAS,KAAK,gBAAgB,EAC9B,aAAc,KAAK,YACrB,CACF,CAKA,OAAQ,CACN,KAAK,OAAO,QAAQrB,GAASA,EAAM,OAAS,CAAC,EAC7C,KAAK,eAAe,OAAS,EAC7B,KAAK,aAAa,MAAM,EACxB,KAAK,aAAe,GACpB,KAAK,eAAiB,GAGtB,KAAK,QAAU,CACb,aAAc,EACd,aAAc,EACd,UAAW,EACX,YAAa,EACb,QAAS,IACT,QAAS,EACT,OAAQ,EACR,QAAS,CACX,CACF,CAKA,cAAe,CACb,KAAK,QAAU,CACb,aAAc,EACd,aAAc,EACd,UAAW,EACX,YAAa,EACb,QAAS,IACT,QAAS,EACT,OAAQ,EACR,QAAS,CACX,CACF,CAMA,OAAQ,CACN,MAAMI,EAAU,CAAC,EAEjB,UAAWJ,KAAS,KAAK,OAAO,OAAO,EACrCI,EAAQ,KAAK,GAAGJ,EAAM,OAAO,CAAC,CAAC,EAGjC,UAAWE,KAAS,KAAK,eACvBE,EAAQ,KAAK,GAAGF,EAAM,QAAQ,OAAO,CAAC,CAAC,EAGzC,OAAAE,EAAQ,KAAK,GAAG,KAAK,aAAa,QAAQ,OAAO,CAAC,CAAC,EAE5CA,CACT,CAMA,cAAe,CACb,OAAO,IAAI,QAASmB,GAAY,CAC9B,GAAI,CAAC,KAAK,WAAW,GAAK,CAAC,KAAK,aAAc,CAC5CA,EAAQ,EAAI,EACZ,MACF,CAEA,MAAMC,EAAgB,IAAM,CACtB,CAAC,KAAK,WAAW,GAAK,CAAC,KAAK,aAC9BD,EAAQ,EAAI,EAEZ,sBAAsBC,CAAa,CAEvC,EAEAA,EAAc,CAChB,CAAC,CACH,CAQA,cAAc/B,EAAWH,EAAe,OAAQ,CAC9C,MAAO,CAACE,EAAUE,EAAK,OAAS,KAAK,SAASF,EAAUC,EAAUC,CAAE,CACtE,CACF",
-  "names": ["UpdatePriority", "UpdateRequest", "callback", "priority", "id", "batchId", "UpdateScheduler", "UpdateBatch", "update", "options", "queue", "callbacks", "batch", "index", "updates", "startTime", "toProcess", "error", "results", "e", "elapsedTime", "allUpdates", "a", "b", "updateId", "u", "cancelled", "i", "totalResult", "result", "count", "stats", "sum", "resolve", "checkComplete"]
-}
diff --git a/packages/flutterjs_engine/src/vdom/dist/vnode.js b/packages/flutterjs_engine/src/vdom/dist/vnode.js
deleted file mode 100644
index bd358969..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/vnode.js
+++ /dev/null
@@ -1,3 +0,0 @@
-class r{constructor({tag:t="div",props:e={},style:s={},children:i=[],key:a=null,ref:n=null,events:p={},statefulWidgetId:c=null,stateProperty:f=null,isStateBinding:l=!1,updateFn:u=null,metadata:y={}}={}){this.tag=t,this.props=e||{},this.props=e||{},this.style=s||{},this.events=p||{},this.props&&this.props.style&&typeof this.props.style=="object"&&(this.style={...this.style,...this.props.style},delete this.props.style),this.props&&typeof this.props=="object"&&Object.keys(this.props).forEach(o=>{if(o.length>2&&o.startsWith("on")&&o[2]===o[2].toUpperCase()){const h=this.props[o];typeof h=="function"&&(this.events[o]=h,delete this.props[o])}}),this.children=Array.isArray(i)?i:[],this.key=a,this.ref=n,this.ref=n,this.statefulWidgetId=c,this.stateProperty=f,this.isStateBinding=l,this.updateFn=u,this.metadata=y||{},this._element=null,this._parent=null,this._index=null}toHTML(t={}){if(typeof this=="string")return r.escapeHTML(this);if(!this||!this.tag)return"";const e=this._serializeAttributes(),s=`<${this.tag}${e?" "+e:""}>`;if(r.VOID_TAGS.includes(this.tag))return s;const i=this.children.map(n=>n instanceof r?n.toHTML(t):typeof n=="string"?r.escapeHTML(n):"").join(""),a=`</${this.tag}>`;return`${s}${i}${a}`}toDOM(t={}){if(console.log(`
-=== toDOM called for tag: ${this.tag}`),console.log("    style object:",this.style),console.log("    style keys:",Object.keys(this.style)),typeof this=="string")return document.createTextNode(this);if(!this||!this.tag)return document.createTextNode("");const e=document.createElement(this.tag);return this._applyProps(e),this._applyStyles(e),this._applyEvents(e),this.children.forEach((s,i)=>{let a;s instanceof r?(a=s.toDOM(t),s._parent=this,s._index=i):typeof s=="string"?a=document.createTextNode(s):a=document.createTextNode(String(s||"")),a&&e.appendChild(a)}),this._element=e,e._vnode=this,typeof this.ref=="function"&&this.ref(e),e}hydrate(t){if(!t||!this.tag)return null;this._element=t,t._vnode=this,this._applyEvents(t);const e=Array.from(t.childNodes);let s=0;return e.forEach((i,a)=>{const n=this.children[s];n&&(n instanceof r?(n.hydrate(i),n._parent=this,n._index=s,s++):i.nodeType===Node.TEXT_NODE&&String(n)===i.textContent&&s++)}),typeof this.ref=="function"&&this.ref(t),t}_serializeAttributes(){const t=[];if(this.props&&Object.entries(this.props).forEach(([e,s])=>{if(!(s==null||s===!1))if(s===!0)t.push(e);else{const i=e==="className"?"class":e,a=r.escapeAttribute(String(s));t.push(`${i}="${a}"`)}}),this.style&&typeof this.style=="object"){const e=Object.entries(this.style).filter(([s,i])=>i!=null).map(([s,i])=>`${s.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${i}`).join("; ");e&&t.push(`style="${r.escapeAttribute(e)}"`)}return this.metadata.widgetType&&t.push(`data-widget-type="${r.escapeAttribute(this.metadata.widgetType)}"`),this.key!==null&&this.key!==void 0&&t.push(`data-key="${r.escapeAttribute(String(this.key))}"`),t.join(" ")}_applyProps(t){this.props&&Object.entries(this.props).forEach(([e,s])=>{if(s!=null)try{e==="className"?t.className=s:e==="value"&&(t.tagName==="INPUT"||t.tagName==="TEXTAREA")?t.value=s:e==="checked"&&t.tagName==="INPUT"?t.checked=!!s:e.startsWith("data-")||e.startsWith("aria-")?t.setAttribute(e,String(s)):typeof s=="boolean"?s&&t.setAttribute(e,""):e in t?t[e]=s:t.setAttribute(e,String(s))}catch(i){console.warn(`Failed to set property ${e}:`,i)}})}_applyStyles(t){!this.style||typeof this.style!="object"||Object.entries(this.style).forEach(([e,s])=>{if(s!=null)try{t.style[e]=s,console.log(`Set style ${e} = ${s} -> element.style.${e} = ${t.style[e]}`)}catch(i){console.warn(`Failed to set style ${e}:`,i)}})}_applyEvents(t){this.events&&Object.entries(this.events).forEach(([e,s])=>{if(typeof s!="function")return;const i=e.replace(/^on/,"").toLowerCase();t._eventListeners||(t._eventListeners={}),t._eventListeners[i]&&t.removeEventListener(i,t._eventListeners[i]),t.addEventListener(i,s),t._eventListeners[i]=s})}clone(){return new r({tag:this.tag,props:{...this.props},style:{...this.style},children:this.children.map(t=>t instanceof r?t.clone():t),key:this.key,ref:this.ref,events:{...this.events},statefulWidgetId:this.statefulWidgetId,stateProperty:this.stateProperty,isStateBinding:this.isStateBinding,updateFn:this.updateFn,metadata:{...this.metadata}})}toString(){const t=this.children.length>0?` [${this.children.length} children]`:"",e=this.key!==null?` key="${this.key}"`:"";return`<${this.tag}${e}${t}>`}static escapeHTML(t){const e={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"};return String(t).replace(/[&<>"']/g,s=>e[s])}static escapeAttribute(t){return r.escapeHTML(t)}static isVoidTag(t){return r.VOID_TAGS.includes(t)}static text(t){return String(t||"")}static fragment(t){return Array.isArray(t)?t:[t]}}r.VOID_TAGS=["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"];export{r as VNode};
-//# sourceMappingURL=vnode.js.map
diff --git a/packages/flutterjs_engine/src/vdom/dist/vnode.js.map b/packages/flutterjs_engine/src/vdom/dist/vnode.js.map
deleted file mode 100644
index 20372030..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/vnode.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/vnode.js"],
-  "sourcesContent": ["/**\r\n * VNode - Virtual DOM Node Implementation\r\n * \r\n * Represents a virtual DOM node that can:\r\n * 1. Handle any Flutter widget type\r\n * 2. Serialize to HTML string (SSR)\r\n * 3. Convert to actual DOM element (CSR)\r\n * 4. Support hydration (SSR -> CSR transition)\r\n * 5. Track state bindings\r\n * 6. Manage event handlers\r\n */\r\n\r\nclass VNode {\r\n  /**\r\n   * @param {Object} config - VNode configuration\r\n   * @param {string} config.tag - HTML tag name (div, span, button, etc.)\r\n   * @param {Object} config.props - HTML attributes {className, id, data-*, etc.}\r\n   * @param {Object} config.style - CSS styles {color, padding, display, etc.}\r\n   * @param {Array} config.children - Child VNodes or text strings\r\n   * @param {string|number} config.key - Unique key for list reconciliation\r\n   * @param {Function} config.ref - Callback when DOM element is created\r\n   * @param {Object} config.events - Event handlers {click, change, input, etc.}\r\n   * @param {string} config.statefulWidgetId - ID of owning StatefulWidget\r\n   * @param {string} config.stateProperty - State property this node displays\r\n   * @param {boolean} config.isStateBinding - Whether this depends on state\r\n   * @param {Function} config.updateFn - Callback on state change\r\n   * @param {Object} config.metadata - Additional widget metadata\r\n   */\r\n  constructor({\r\n    tag = 'div',\r\n    props = {},\r\n    style = {},\r\n    children = [],\r\n    key = null,\r\n    ref = null,\r\n    events = {},\r\n    statefulWidgetId = null,\r\n    stateProperty = null,\r\n    isStateBinding = false,\r\n    updateFn = null,\r\n    metadata = {}\r\n  } = {}) {\r\n    this.tag = tag;\r\n    this.props = props || {};\r\n    this.props = props || {};\r\n    this.style = style || {};\r\n    this.events = events || {};\r\n\r\n    // \u2705 FIX: Extract props.style into this.style for backward compatibility\r\n    // Some widgets incorrectly pass styles inside props.style instead of style\r\n    if (this.props && this.props.style && typeof this.props.style === 'object') {\r\n      // Merge props.style into this.style (props.style takes precedence for conflicts)\r\n      this.style = { ...this.style, ...this.props.style };\r\n      // Remove style from props to avoid duplication in HTML attributes\r\n      delete this.props.style;\r\n    }\r\n\r\n    // \u2705 FIX: Extract event handlers (on*) from props to events\r\n    // Some widgets pass event handlers in props (e.g., onMouseDown, onClick)\r\n    // but the renderer expects them in the events object\r\n    if (this.props && typeof this.props === 'object') {\r\n      Object.keys(this.props).forEach(key => {\r\n        // Check for event handler pattern: starts with 'on' + uppercase letter\r\n        if (key.length > 2 && key.startsWith('on') && key[2] === key[2].toUpperCase()) {\r\n          const handler = this.props[key];\r\n          if (typeof handler === 'function') {\r\n            this.events[key] = handler;\r\n            delete this.props[key];\r\n          }\r\n        }\r\n      });\r\n    }\r\n\r\n    this.children = Array.isArray(children) ? children : [];\r\n    this.key = key;\r\n    this.ref = ref;\r\n    this.ref = ref;\r\n\r\n    // State binding\r\n    this.statefulWidgetId = statefulWidgetId;\r\n    this.stateProperty = stateProperty;\r\n    this.isStateBinding = isStateBinding;\r\n    this.updateFn = updateFn;\r\n\r\n    // Metadata (widget type, original props, etc.)\r\n    this.metadata = metadata || {};\r\n\r\n    // Runtime references\r\n    this._element = null;  // DOM element (set during rendering)\r\n    this._parent = null;   // Parent VNode\r\n    this._index = null;    // Index in parent's children\r\n  }\r\n\r\n  /**\r\n   * Convert VNode to HTML string (Server-Side Rendering)\r\n   * @param {Object} options - Rendering options\r\n   * @returns {string} HTML string\r\n   */\r\n  toHTML(options = {}) {\r\n    // Handle text nodes\r\n    if (typeof this === 'string') {\r\n      return VNode.escapeHTML(this);\r\n    }\r\n\r\n    // Handle null/undefined\r\n    if (!this || !this.tag) {\r\n      return '';\r\n    }\r\n\r\n    // Build opening tag with attributes\r\n    const attrs = this._serializeAttributes();\r\n    const openTag = `<${this.tag}${attrs ? ' ' + attrs : ''}>`;\r\n\r\n    // Self-closing tags\r\n    if (VNode.VOID_TAGS.includes(this.tag)) {\r\n      return openTag;\r\n    }\r\n\r\n    // Render children\r\n    const childrenHTML = this.children\r\n      .map(child => {\r\n        if (child instanceof VNode) {\r\n          return child.toHTML(options);\r\n        }\r\n        if (typeof child === 'string') {\r\n          return VNode.escapeHTML(child);\r\n        }\r\n        return '';\r\n      })\r\n      .join('');\r\n\r\n    const closeTag = `</${this.tag}>`;\r\n    return `${openTag}${childrenHTML}${closeTag}`;\r\n  }\r\n\r\n  /**\r\n   * Convert VNode to actual DOM element (Client-Side Rendering)\r\n   * @param {Object} options - Rendering options\r\n   * @returns {HTMLElement} DOM element\r\n   */\r\n  toDOM(options = {}) {\r\n    console.log(`\\n=== toDOM called for tag: ${this.tag}`);\r\n    console.log(`    style object:`, this.style);\r\n    console.log(`    style keys:`, Object.keys(this.style));\r\n    // Handle text nodes\r\n    if (typeof this === 'string') {\r\n      return document.createTextNode(this);\r\n    }\r\n\r\n    // Handle null/undefined\r\n    if (!this || !this.tag) {\r\n      return document.createTextNode('');\r\n    }\r\n\r\n    // Create DOM element\r\n    const element = document.createElement(this.tag);\r\n\r\n    // Apply props (HTML attributes)\r\n    this._applyProps(element);\r\n\r\n    // Apply styles (CSS)\r\n    this._applyStyles(element);\r\n\r\n    // Attach event listeners\r\n    this._applyEvents(element);\r\n\r\n    // Add children recursively\r\n    this.children.forEach((child, index) => {\r\n      let childNode;\r\n\r\n      if (child instanceof VNode) {\r\n        childNode = child.toDOM(options);\r\n        child._parent = this;\r\n        child._index = index;\r\n      } else if (typeof child === 'string') {\r\n        childNode = document.createTextNode(child);\r\n      } else {\r\n        childNode = document.createTextNode(String(child || ''));\r\n      }\r\n\r\n      if (childNode) {\r\n        element.appendChild(childNode);\r\n      }\r\n    });\r\n\r\n    // Store reference\r\n    this._element = element;\r\n    element._vnode = this;\r\n\r\n    // Call ref callback\r\n    if (typeof this.ref === 'function') {\r\n      this.ref(element);\r\n    }\r\n\r\n    return element;\r\n  }\r\n\r\n  /**\r\n   * Hydrate existing SSR-rendered DOM with interactivity\r\n   * @param {HTMLElement} domElement - Existing DOM element from SSR\r\n   * @returns {HTMLElement} Hydrated element\r\n   */\r\n  hydrate(domElement) {\r\n    if (!domElement || !this.tag) {\r\n      return null;\r\n    }\r\n\r\n    // Store reference\r\n    this._element = domElement;\r\n    domElement._vnode = this;\r\n\r\n    // Attach event listeners (SSR doesn't include events)\r\n    this._applyEvents(domElement);\r\n\r\n    // Hydrate children recursively\r\n    const domChildren = Array.from(domElement.childNodes);\r\n    let vnodeChildIndex = 0;\r\n\r\n    domChildren.forEach((domChild, domIndex) => {\r\n      const vnodeChild = this.children[vnodeChildIndex];\r\n\r\n      if (!vnodeChild) return;\r\n\r\n      if (vnodeChild instanceof VNode) {\r\n        vnodeChild.hydrate(domChild);\r\n        vnodeChild._parent = this;\r\n        vnodeChild._index = vnodeChildIndex;\r\n        vnodeChildIndex++;\r\n      } else if (domChild.nodeType === Node.TEXT_NODE) {\r\n        // Text node - just verify content matches\r\n        if (String(vnodeChild) === domChild.textContent) {\r\n          vnodeChildIndex++;\r\n        }\r\n      }\r\n    });\r\n\r\n    // Call ref callback\r\n    if (typeof this.ref === 'function') {\r\n      this.ref(domElement);\r\n    }\r\n\r\n    return domElement;\r\n  }\r\n\r\n  /**\r\n   * Serialize attributes to HTML string\r\n   * @private\r\n   * @returns {string} Attributes string\r\n   */\r\n  _serializeAttributes() {\r\n    const attrs = [];\r\n\r\n    // Props (HTML attributes)\r\n    if (this.props) {\r\n      Object.entries(this.props).forEach(([key, value]) => {\r\n        if (value === null || value === undefined || value === false) {\r\n          return;\r\n        }\r\n\r\n        if (value === true) {\r\n          attrs.push(key);\r\n        } else {\r\n          // Convert className to class for HTML\r\n          const attrName = key === 'className' ? 'class' : key;\r\n          const escaped = VNode.escapeAttribute(String(value));\r\n          attrs.push(`${attrName}=\"${escaped}\"`);\r\n        }\r\n      });\r\n    }\r\n\r\n    // Inline styles\r\n    if (this.style && typeof this.style === 'object') {\r\n      const styleStr = Object.entries(this.style)\r\n        .filter(([_, value]) => value !== null && value !== undefined)\r\n        .map(([key, value]) => {\r\n          // Convert camelCase to kebab-case properly\r\n          const cssKey = key\r\n            .replace(/([A-Z])/g, '-$1')\r\n            .toLowerCase();\r\n          return `${cssKey}: ${value}`;\r\n        })\r\n        .join('; ');\r\n\r\n      if (styleStr) {\r\n        attrs.push(`style=\"${VNode.escapeAttribute(styleStr)}\"`);\r\n      }\r\n    }\r\n    // Data attributes from metadata\r\n    if (this.metadata.widgetType) {\r\n      attrs.push(`data-widget-type=\"${VNode.escapeAttribute(this.metadata.widgetType)}\"`);\r\n    }\r\n\r\n    if (this.key !== null && this.key !== undefined) {\r\n      attrs.push(`data-key=\"${VNode.escapeAttribute(String(this.key))}\"`);\r\n    }\r\n\r\n    return attrs.join(' ');\r\n  }\r\n\r\n  /**\r\n   * Apply props to DOM element\r\n   * @private\r\n   * @param {HTMLElement} element - Target element\r\n   */\r\n  _applyProps(element) {\r\n    if (!this.props) return;\r\n\r\n    Object.entries(this.props).forEach(([key, value]) => {\r\n      if (value === null || value === undefined) return;\r\n\r\n      try {\r\n        if (key === 'className') {\r\n          element.className = value;\r\n        } else if (key === 'value' && (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA')) {\r\n          element.value = value;\r\n        } else if (key === 'checked' && element.tagName === 'INPUT') {\r\n          element.checked = !!value;\r\n        } else if (key.startsWith('data-') || key.startsWith('aria-')) {\r\n          element.setAttribute(key, String(value));\r\n        } else if (typeof value === 'boolean') {\r\n          if (value) {\r\n            element.setAttribute(key, '');\r\n          }\r\n        } else {\r\n          // Try property first, fall back to attribute\r\n          if (key in element) {\r\n            element[key] = value;\r\n          } else {\r\n            element.setAttribute(key, String(value));\r\n          }\r\n        }\r\n      } catch (error) {\r\n        console.warn(`Failed to set property ${key}:`, error);\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Apply styles to DOM element\r\n   * @private\r\n   * @param {HTMLElement} element - Target element\r\n   */\r\n  _applyStyles(element) {\r\n    if (!this.style || typeof this.style !== 'object') return;\r\n\r\n    Object.entries(this.style).forEach(([key, value]) => {\r\n      if (value !== null && value !== undefined) {\r\n        try {\r\n          element.style[key] = value;\r\n          console.log(`Set style ${key} = ${value} -> element.style.${key} = ${element.style[key]}`);\r\n        } catch (error) {\r\n          console.warn(`Failed to set style ${key}:`, error);\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Attach event listeners to DOM element\r\n   * @private\r\n   * @param {HTMLElement} element - Target element\r\n   */\r\n  _applyEvents(element) {\r\n    if (!this.events) return;\r\n\r\n    Object.entries(this.events).forEach(([eventName, handler]) => {\r\n      if (typeof handler !== 'function') return;\r\n\r\n      // Normalize event name (onClick -> click, onInput -> input)\r\n      const normalizedName = eventName\r\n        .replace(/^on/, '')\r\n        .toLowerCase();\r\n\r\n      // Store reference for cleanup\r\n      if (!element._eventListeners) {\r\n        element._eventListeners = {};\r\n      }\r\n\r\n      // Remove old listener if exists\r\n      if (element._eventListeners[normalizedName]) {\r\n        element.removeEventListener(\r\n          normalizedName,\r\n          element._eventListeners[normalizedName]\r\n        );\r\n      }\r\n\r\n      // Add new listener\r\n      element.addEventListener(normalizedName, handler);\r\n      element._eventListeners[normalizedName] = handler;\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Create a clone of this VNode\r\n   * @returns {VNode} Cloned VNode\r\n   */\r\n  clone() {\r\n    return new VNode({\r\n      tag: this.tag,\r\n      props: { ...this.props },\r\n      style: { ...this.style },\r\n      children: this.children.map(child =>\r\n        child instanceof VNode ? child.clone() : child\r\n      ),\r\n      key: this.key,\r\n      ref: this.ref,\r\n      events: { ...this.events },\r\n      statefulWidgetId: this.statefulWidgetId,\r\n      stateProperty: this.stateProperty,\r\n      isStateBinding: this.isStateBinding,\r\n      updateFn: this.updateFn,\r\n      metadata: { ...this.metadata }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Get debug representation\r\n   * @returns {string} Debug string\r\n   */\r\n  toString() {\r\n    const childrenStr = this.children.length > 0\r\n      ? ` [${this.children.length} children]`\r\n      : '';\r\n    const keyStr = this.key !== null ? ` key=\"${this.key}\"` : '';\r\n    return `<${this.tag}${keyStr}${childrenStr}>`;\r\n  }\r\n\r\n  // Static utility methods\r\n\r\n  /**\r\n   * Escape HTML special characters\r\n   * @param {string} str - String to escape\r\n   * @returns {string} Escaped string\r\n   */\r\n  static escapeHTML(str) {\r\n    const map = {\r\n      '&': '&amp;',\r\n      '<': '&lt;',\r\n      '>': '&gt;',\r\n      '\"': '&quot;',\r\n      \"'\": '&#39;'\r\n    };\r\n    return String(str).replace(/[&<>\"']/g, c => map[c]);\r\n  }\r\n\r\n  /**\r\n   * Escape HTML attribute value\r\n   * @param {string} str - String to escape\r\n   * @returns {string} Escaped string\r\n   */\r\n  static escapeAttribute(str) {\r\n    return VNode.escapeHTML(str);\r\n  }\r\n\r\n  /**\r\n   * Check if tag is self-closing\r\n   * @param {string} tag - Tag name\r\n   * @returns {boolean} True if void tag\r\n   */\r\n  static isVoidTag(tag) {\r\n    return VNode.VOID_TAGS.includes(tag);\r\n  }\r\n\r\n  /**\r\n   * Create text VNode\r\n   * @param {string} text - Text content\r\n   * @returns {string} Text node (represented as string)\r\n   */\r\n  static text(text) {\r\n    return String(text || '');\r\n  }\r\n\r\n  /**\r\n   * Create fragment (multiple children without wrapper)\r\n   * @param {Array} children - Child nodes\r\n   * @returns {Array} Children array\r\n   */\r\n  static fragment(children) {\r\n    return Array.isArray(children) ? children : [children];\r\n  }\r\n}\r\n\r\n// Static constants\r\nVNode.VOID_TAGS = [\r\n  'area', 'base', 'br', 'col', 'embed', 'hr', 'img',\r\n  'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'\r\n];\r\n\r\n\r\nexport { VNode }"],
-  "mappings": "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",
-  "names": ["VNode", "tag", "props", "style", "children", "key", "ref", "events", "statefulWidgetId", "stateProperty", "isStateBinding", "updateFn", "metadata", "handler", "options", "attrs", "openTag", "childrenHTML", "child", "closeTag", "element", "index", "childNode", "domElement", "domChildren", "vnodeChildIndex", "domChild", "domIndex", "vnodeChild", "value", "attrName", "escaped", "styleStr", "_", "error", "eventName", "normalizedName", "childrenStr", "keyStr", "str", "map", "c", "text"]
-}
diff --git a/packages/flutterjs_engine/src/vdom/dist/vnode_builder.js b/packages/flutterjs_engine/src/vdom/dist/vnode_builder.js
deleted file mode 100644
index 283c8465..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/vnode_builder.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{VNode as l}from"./vnode.js";import"./style_converter.js";import{StatelessElement as c,StatefulElement as a,State as u,InheritedElement as d}from"@flutterjs/runtime";class f{constructor(e={}){this.debugMode=e.debugMode||!1,this.runtime=e.runtime,this.buildStack=[],this.debugMode&&!this.runtime&&console.warn("[VNodeBuilder] \u26A0\uFE0F No runtime provided - Element creation will fail"),console.log("[[[ DEBUG_VNODE_FIX_APPLIED_TIMESTAMP ]]] VNodeBuilder initialized")}getWidgetType(e){return!e||typeof e!="object"?"PRIMITIVE":e.tag!==void 0?"VNODE":typeof e=="string"||typeof e=="number"||typeof e=="boolean"?"PRIMITIVE":e instanceof u?"STATE_INSTANCE":typeof e.createState=="function"&&!(e instanceof u)?"STATEFUL_WIDGET":typeof e.build=="function"&&typeof e.createState!="function"&&!(e instanceof u)?"STATELESS_WIDGET":typeof e.updateShouldNotify=="function"?"INHERITED_WIDGET":typeof e.build=="function"?"GENERIC_WIDGET":"UNKNOWN"}build(e,o={}){const n=this.buildStack.join(" \u2192 "),t="  ".repeat(this.buildStack.length);try{if(this.debugMode&&(console.log("=".repeat(80)),console.log(`${t}\u{1F527} VNodeBuilder.build() START`),console.log(`${t}  Build Path: ${n||"ROOT"}`),console.log(`${t}  Input Type: ${typeof e}`),console.log(`${t}  Constructor: ${e?.constructor?.name||"N/A"}`),console.log(`${t}  Has build: ${typeof e?.build=="function"}`),console.log(`${t}  Has createState: ${typeof e?.createState=="function"}`),console.log(`${t}  Has tag: ${e?.tag!==void 0}`),console.log(`${t}  Runtime: ${this.runtime?"\u2714":"\u2717"}`),console.log("=".repeat(80))),!e)return this.debugMode&&console.warn(`${t}\u26A0\uFE0F Widget is null/undefined`),null;if(typeof e=="string")return this.debugMode&&console.log(`${t}\u2714 Text node: "${e.substring(0,50)}${e.length>50?"...":""}"`),e;if(typeof e=="number")return this.debugMode&&console.log(`${t}\u2714 Number node: ${e}`),String(e);if(typeof e=="boolean")return this.debugMode&&console.log(`${t}\u2714 Boolean node (renders nothing)`),null;const r=this.getWidgetType(e);if(this.debugMode&&console.log(`${t}Widget Type Detected: ${r}`),!o.runtime&&this.runtime&&(o.runtime=this.runtime,this.debugMode&&console.log(`${t}\u2714 Injected runtime into context`)),!this.runtime)throw this.createError("MISSING_RUNTIME","VNodeBuilder requires a runtime instance",{suggestion:"Pass runtime to VNodeBuilder constructor: new VNodeBuilder({ runtime: this })",context:{widgetType:e?.constructor?.name}});switch(r){case"VNODE":return this.debugMode&&console.log(`${t}\u2714 Already a VNode (tag: ${e.tag}), returning`),e;case"STATE_INSTANCE":throw this.createError("STATE_PASSED_TO_BUILDER",`State instance "${e.constructor.name}" was passed to VNodeBuilder`,{stateType:e.constructor.name,suggestion:"VNodeBuilder expects Widgets, not State instances. State instances are handled internally by StatefulElement.",expectedFlow:"StatefulWidget \u2192 StatefulElement (creates state) \u2192 State.build()"});case"STATEFUL_WIDGET":return this.debugMode&&console.log(`${t}\u2705 DETECTED STATEFUL WIDGET: ${e.constructor.name}`),this.buildStatefulWidget(e,o,t);case"STATELESS_WIDGET":return this.debugMode&&console.log(`${t}\u2705 DETECTED STATELESS WIDGET: ${e.constructor.name}`),this.buildStatelessWidget(e,o,t);case"INHERITED_WIDGET":return this.debugMode&&console.log(`${t}\u2705 DETECTED INHERITED WIDGET: ${e.constructor.name}`),this.buildInheritedWidget(e,o,t);case"GENERIC_WIDGET":return this.debugMode&&console.warn(`${t}\u26A0\uFE0F Generic widget type (has build but no clear classification)`),this.buildGenericWidget(e,o,t);default:return this.debugMode&&console.warn(`${t}\u26A0\uFE0F Unknown widget type: ${e.constructor?.name||typeof e}`),this.buildGeneric(e,o,t)}}catch(r){return this.handleBuildError(r,e,o,t)}}buildStatelessWidget(e,o,n){try{this.debugMode&&console.log(`${n}\u{1F4E6} Building StatelessWidget: ${e.constructor.name}`),this.buildStack.push(e.constructor.name);try{const t=new c(e,o.parentElement||null,this.runtime),r=t.build();if(!r)throw this.createError("BUILD_RETURNED_NULL",`${e.constructor.name}.build() returned null`,{suggestion:"build() must return a Widget or VNode, not null/undefined",widgetType:e.constructor.name});if(this.debugMode&&(console.log(`${n}  Result Type: ${typeof r}`),console.log(`${n}  Constructor: ${r?.constructor?.name}`),console.log(`${n}  Has tag: ${r?.tag!==void 0}`)),r&&typeof r=="object"&&r.tag)return this.debugMode&&console.log(`${n}\u2714 Got VNode (tag: ${r.tag}), returning`),r;if(typeof r=="string"||typeof r=="number")return this.debugMode&&console.log(`${n}\u2714 Got primitive value, returning`),r;if(r&&typeof r=="object"&&(typeof r.build=="function"||typeof r.createState=="function"||typeof r.updateShouldNotify=="function"))return this.debugMode&&console.log(`${n}\u{1F504} Got nested Widget: ${r.constructor.name}, recursively building...`),this.build(r,{...o,parentElement:t,runtime:this.runtime});throw this.createError("UNKNOWN_BUILD_RESULT",`${e.constructor.name}.build() returned unexpected type`,{receivedType:typeof r,receivedConstructor:r?.constructor?.name,suggestion:"build() must return: Widget, VNode, string, number, or null",received:r})}finally{this.buildStack.pop()}}catch(t){throw this.wrapError(t,`StatelessWidget: ${e.constructor.name}`)}}buildStatefulWidget(e,o,n){try{this.debugMode&&console.log(`${n}\u{1F4E6} Building StatefulWidget: ${e.constructor.name}`),this.buildStack.push(e.constructor.name);try{if(typeof e.createState!="function")throw this.createError("NO_CREATE_STATE",`${e.constructor.name} has createState but it's not a function`,{createStateType:typeof e.createState,suggestion:"Implement createState() method in your StatefulWidget"});const t=new a(e,o.parentElement||null,this.runtime);if(!t)throw this.createError("ELEMENT_CREATION_FAILED",`Failed to create StatefulElement for ${e.constructor.name}`,{suggestion:"Check that StatefulElement constructor accepts (widget, parent, runtime)"});try{t.mounted||t.mount()}catch(i){throw this.createError("ELEMENT_MOUNT_FAILED",`Failed to mount StatefulElement: ${i.message}`,{originalError:i,suggestion:"Check element.mount() implementation"})}const r=t.vnode;if(!r)throw this.createError("BUILD_RETURNED_NULL",`State.build() for ${e.constructor.name} returned null`,{suggestion:"State.build() must return a Widget or VNode"});if(r&&typeof r=="object"&&r.tag)return this.debugMode&&console.log(`${n}\u2714 Got VNode (tag: ${r.tag})`),r;if(typeof r=="string"||typeof r=="number")return this.debugMode&&console.log(`${n}\u2714 Got primitive value`),r;if(r&&typeof r=="object"&&(typeof r.build=="function"||typeof r.createState=="function"||typeof r.updateShouldNotify=="function"))return this.debugMode&&console.log(`${n}\u{1F504} Got nested Widget: ${r.constructor.name}`),this.build(r,{...o,parentElement:t,runtime:this.runtime});throw this.createError("UNKNOWN_BUILD_RESULT",`State.build() for ${e.constructor.name} returned unexpected type`,{receivedType:typeof r,receivedConstructor:r?.constructor?.name,suggestion:"State.build() must return: Widget, VNode, string, number, or null"})}finally{this.buildStack.pop()}}catch(t){throw this.wrapError(t,`StatefulWidget: ${e.constructor.name}`)}}buildGenericWidget(e,o,n){try{this.debugMode&&console.log(`${n}\u{1F4E6} Building Generic Widget: ${e.constructor.name}`),this.buildStack.push(e.constructor.name);try{const r=new c(e,null,this.runtime).build();if(!r)throw this.createError("BUILD_RETURNED_NULL",`Generic widget ${e.constructor.name}.build() returned null`,{suggestion:"build() must return a Widget or VNode"});return r&&typeof r=="object"&&typeof r.build=="function"?(this.debugMode&&console.log(`${n}\u2714 Recovery successful, recursively building...`),this.build(r,o)):r}catch(t){throw this.createError("RECOVERY_FAILED","Failed to build generic widget",{originalError:t.message,widgetType:e.constructor.name,suggestion:"Ensure widget implements build() correctly"})}finally{this.buildStack.pop()}}catch(t){throw this.wrapError(t,`GenericWidget: ${e.constructor.name}`)}}buildInheritedWidget(e,o,n){try{this.debugMode&&console.log(`${n}\u{1F4E6} Building InheritedWidget: ${e.constructor.name}`),this.buildStack.push(e.constructor.name);try{if(typeof e.updateShouldNotify!="function")throw this.createError("INVALID_UPDATE_SHOULD_NOTIFY",`${e.constructor.name} must implement updateShouldNotify()`,{suggestion:"InheritedWidget requires updateShouldNotify(oldWidget) method"});const t=new d(e,o.parentElement||null,this.runtime);return t.mounted||t.mount(),t.vnode}finally{this.buildStack.pop()}}catch(t){throw this.wrapError(t,`InheritedWidget: ${e.constructor.name}`)}}buildGeneric(e,o,n){try{this.debugMode&&console.log(`${n}\u{1F4E6} Generic widget builder for: ${e.constructor.name}`);let t=[];try{if(e.child){const i=this.build(e.child,o);i&&(t=[i])}else e.children&&(t=this.buildChildren(e.children,o))}catch(i){throw this.createError("CHILD_BUILD_FAILED",`Failed to build children of ${e.constructor.name}`,{originalError:i.message,suggestion:"Check that child widgets are valid"})}const r=this.getWidgetType(e);return new l({tag:"div",props:{className:`fjs-${r.toLowerCase()}`,"data-widget-type":r,...this.extractCommonProps(e)},children:t,metadata:{widgetType:r,note:"Generic widget - no specific builder implemented"}})}catch(t){throw this.wrapError(t,`Generic builder for ${e?.constructor?.name||"unknown"}`)}}buildChildren(e,o){return e?(Array.isArray(e)||(e=[e]),e.map((n,t)=>{try{return this.build(n,{...o,childIndex:t,runtime:this.runtime})}catch(r){throw this.createError("CHILD_INDEX_FAILED",`Failed to build child at index ${t}`,{originalError:r.message,childIndex:t,childType:typeof n,childConstructor:n?.constructor?.name})}}).filter(n=>n!=null)):[]}getWidgetTypeName(e){return e?e.constructor&&e.constructor.name?e.constructor.name:e.runtimeType?e.runtimeType:e.widget&&e.widget.constructor?e.widget.constructor.name:"Unknown":"Unknown"}extractCommonProps(e){const o={};return e.key&&(o.key=e.key),e._debugLabel&&(o["data-debug-label"]=e._debugLabel),o}createError(e,o,n={}){const t=new Error(o);return t.code=e,t.details=n,t.buildPath=this.buildStack.join(" \u2192 ")||"ROOT",t.timestamp=new Date().toISOString(),t}wrapError(e,o){return e.buildPath||(e.buildPath=this.buildStack.join(" \u2192 ")||"ROOT"),e.context||(e.context=o),e}handleBuildError(e,o,n,t){const r=this.createErrorReport(e,o);throw console.error(""),console.error("\u274C ".repeat(40)),console.error("VNODE BUILD ERROR"),console.error("\u274C ".repeat(40)),console.error(""),console.error("\u{1F4CB} ERROR CODE:",e.code||"UNKNOWN"),console.error("\u{1F4DD} MESSAGE:",e.message),console.error(""),console.error("\u{1F517} BUILD PATH:",r.buildPath),console.error(""),r.widgetInfo&&(console.error("\u{1F50D} WIDGET INFO:"),console.error("   Constructor:",r.widgetInfo.constructor),console.error("   Type:",r.widgetInfo.type),console.error("")),e.details&&(console.error("\u{1F4CC} DETAILS:"),Object.entries(e.details).forEach(([i,s])=>{console.error(i==="suggestion"?`   \u{1F4A1} ${i}: ${s}`:i==="originalError"?`   \u26A0\uFE0F  ${i}: ${s}`:`   ${i}: ${JSON.stringify(s,null,2)}`)}),console.error("")),e.stack&&(console.error("\u{1F4DA} STACK TRACE:"),console.error(e.stack),console.error("")),console.error("\u274C ".repeat(40)),console.error(""),e}createErrorReport(e,o){return{code:e.code||"UNKNOWN",message:e.message,buildPath:e.buildPath||this.buildStack.join(" \u2192 ")||"ROOT",timestamp:e.timestamp||new Date().toISOString(),widgetInfo:o?{constructor:o.constructor?.name||"unknown",type:typeof o,hasBuild:typeof o.build=="function",hasCreateState:typeof o.createState=="function",hasTag:o.tag!==void 0,isStateInstance:o instanceof u}:null,details:e.details||{}}}}export{f as VNodeBuilder};
-//# sourceMappingURL=vnode_builder.js.map
diff --git a/packages/flutterjs_engine/src/vdom/dist/vnode_builder.js.map b/packages/flutterjs_engine/src/vdom/dist/vnode_builder.js.map
deleted file mode 100644
index b86d9f41..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/vnode_builder.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/vnode_builder.js"],
-  "sourcesContent": ["/**\r\n * VNodeBuilder - WITH COMPREHENSIVE ERROR HANDLING\r\n * Properly converts Widget \u2192 Element \u2192 VNode\r\n * \r\n * \u2705 FIXED: Proper State vs StatefulWidget detection\r\n * All existing functionality preserved\r\n */\r\nimport { VNode } from './vnode.js';\r\nimport { StyleConverter } from './style_converter.js';\r\nimport { StatelessElement, StatefulElement, State, InheritedElement } from '@flutterjs/runtime';\r\n\r\nclass VNodeBuilder {\r\n  constructor(options = {}) {\r\n    this.debugMode = options.debugMode || false;\r\n    this.runtime = options.runtime;\r\n    this.buildStack = [];  // Track build hierarchy for error messages\r\n\r\n    if (this.debugMode && !this.runtime) {\r\n      console.warn('[VNodeBuilder] \u26A0\uFE0F No runtime provided - Element creation will fail');\r\n    }\r\n    console.log('[[[ DEBUG_VNODE_FIX_APPLIED_TIMESTAMP ]]] VNodeBuilder initialized');\r\n  }\r\n\r\n  /**\r\n   * \u2705 CRITICAL FIX: Determine widget type correctly\r\n   * - StatefulWidget: has createState(), is NOT a State instance\r\n   * - State: extends State class, has build(), should NOT reach here\r\n   * - StatelessWidget: has build(), no createState()\r\n   * - InheritedWidget: has updateShouldNotify()\r\n   * @private\r\n   */\r\n  getWidgetType(widget) {\r\n    if (!widget || typeof widget !== 'object') {\r\n      return 'PRIMITIVE';\r\n    }\r\n\r\n    // Check if it's already a VNode\r\n    if (widget.tag !== undefined) {\r\n      return 'VNODE';\r\n    }\r\n\r\n    // Check if it's a string\r\n    if (typeof widget === 'string' || typeof widget === 'number' || typeof widget === 'boolean') {\r\n      return 'PRIMITIVE';\r\n    }\r\n\r\n    // \u2705 KEY FIX: Check if it's a State instance FIRST\r\n    // State classes extend State and have build() but NOT createState()\r\n    if (widget instanceof State) {\r\n      return 'STATE_INSTANCE';  // \u274C ERROR - should never be passed here\r\n    }\r\n\r\n    // Check if it's a StatefulWidget\r\n    // StatefulWidget has createState() and is NOT a State instance\r\n    if (typeof widget.createState === 'function' && !(widget instanceof State)) {\r\n      return 'STATEFUL_WIDGET';\r\n    }\r\n\r\n    // Check if it's a StatelessWidget\r\n    // Has build() but NOT createState() and NOT a State instance\r\n    if (typeof widget.build === 'function' &&\r\n      typeof widget.createState !== 'function' &&\r\n      !(widget instanceof State)) {\r\n      return 'STATELESS_WIDGET';\r\n    }\r\n\r\n    // Check if it's an InheritedWidget\r\n    if (typeof widget.updateShouldNotify === 'function') {\r\n      return 'INHERITED_WIDGET';\r\n    }\r\n\r\n    // Check for generic widget with build method (recovery case)\r\n    if (typeof widget.build === 'function') {\r\n      return 'GENERIC_WIDGET';\r\n    }\r\n\r\n    return 'UNKNOWN';\r\n  }\r\n\r\n  /**\r\n   * Build VNode tree from widget\r\n   * @param {Widget} widget - Flutter widget instance\r\n   * @param {BuildContext} context - Build context with runtime\r\n   * @returns {VNode|string|null} VNode tree or text content\r\n   */\r\n  build(widget, context = {}) {\r\n    const buildPath = this.buildStack.join(' \u2192 ');\r\n    const indent = '  '.repeat(this.buildStack.length);\r\n\r\n    try {\r\n      if (this.debugMode) {\r\n        console.log('='.repeat(80));\r\n        console.log(`${indent}\uD83D\uDD27 VNodeBuilder.build() START`);\r\n        console.log(`${indent}  Build Path: ${buildPath || 'ROOT'}`);\r\n        console.log(`${indent}  Input Type: ${typeof widget}`);\r\n        console.log(`${indent}  Constructor: ${widget?.constructor?.name || 'N/A'}`);\r\n        console.log(`${indent}  Has build: ${typeof widget?.build === 'function'}`);\r\n        console.log(`${indent}  Has createState: ${typeof widget?.createState === 'function'}`);\r\n        console.log(`${indent}  Has tag: ${widget?.tag !== undefined}`);\r\n        console.log(`${indent}  Runtime: ${!!this.runtime ? '\u2714' : '\u2717'}`);\r\n        console.log('='.repeat(80));\r\n      }\r\n\r\n      // Handle null/undefined\r\n      if (!widget) {\r\n        if (this.debugMode) {\r\n          console.warn(`${indent}\u26A0\uFE0F Widget is null/undefined`);\r\n        }\r\n        return null;\r\n      }\r\n\r\n      // Handle primitives (strings, numbers, booleans)\r\n      if (typeof widget === 'string') {\r\n        if (this.debugMode) {\r\n          console.log(`${indent}\u2714 Text node: \"${widget.substring(0, 50)}${widget.length > 50 ? '...' : ''}\"`);\r\n        }\r\n        return widget;\r\n      }\r\n\r\n      if (typeof widget === 'number') {\r\n        if (this.debugMode) {\r\n          console.log(`${indent}\u2714 Number node: ${widget}`);\r\n        }\r\n        return String(widget);\r\n      }\r\n\r\n      if (typeof widget === 'boolean') {\r\n        if (this.debugMode) {\r\n          console.log(`${indent}\u2714 Boolean node (renders nothing)`);\r\n        }\r\n        return null;\r\n      }\r\n\r\n      // Determine widget type\r\n      const widgetType = this.getWidgetType(widget);\r\n\r\n      if (this.debugMode) {\r\n        console.log(`${indent}Widget Type Detected: ${widgetType}`);\r\n      }\r\n\r\n      // \u2705 Ensure runtime is in context\r\n      if (!context.runtime && this.runtime) {\r\n        context.runtime = this.runtime;\r\n        if (this.debugMode) {\r\n          console.log(`${indent}\u2714 Injected runtime into context`);\r\n        }\r\n      }\r\n\r\n      // Validate runtime before proceeding\r\n      if (!this.runtime) {\r\n        throw this.createError(\r\n          'MISSING_RUNTIME',\r\n          'VNodeBuilder requires a runtime instance',\r\n          {\r\n            suggestion: 'Pass runtime to VNodeBuilder constructor: new VNodeBuilder({ runtime: this })',\r\n            context: { widgetType: widget?.constructor?.name }\r\n          }\r\n        );\r\n      }\r\n\r\n      // Route to appropriate builder based on type\r\n      switch (widgetType) {\r\n        case 'VNODE':\r\n          if (this.debugMode) {\r\n            console.log(`${indent}\u2714 Already a VNode (tag: ${widget.tag}), returning`);\r\n          }\r\n          return widget;\r\n\r\n        case 'STATE_INSTANCE':\r\n          // \u274C THIS IS THE BUG FIX\r\n          throw this.createError(\r\n            'STATE_PASSED_TO_BUILDER',\r\n            `State instance \"${widget.constructor.name}\" was passed to VNodeBuilder`,\r\n            {\r\n              stateType: widget.constructor.name,\r\n              suggestion: 'VNodeBuilder expects Widgets, not State instances. State instances are handled internally by StatefulElement.',\r\n              expectedFlow: 'StatefulWidget \u2192 StatefulElement (creates state) \u2192 State.build()'\r\n            }\r\n          );\r\n\r\n        case 'STATEFUL_WIDGET':\r\n          if (this.debugMode) {\r\n            console.log(`${indent}\u2705 DETECTED STATEFUL WIDGET: ${widget.constructor.name}`);\r\n          }\r\n          return this.buildStatefulWidget(widget, context, indent);\r\n\r\n        case 'STATELESS_WIDGET':\r\n          if (this.debugMode) {\r\n            console.log(`${indent}\u2705 DETECTED STATELESS WIDGET: ${widget.constructor.name}`);\r\n          }\r\n          return this.buildStatelessWidget(widget, context, indent);\r\n\r\n        case 'INHERITED_WIDGET':\r\n          if (this.debugMode) {\r\n            console.log(`${indent}\u2705 DETECTED INHERITED WIDGET: ${widget.constructor.name}`);\r\n          }\r\n          return this.buildInheritedWidget(widget, context, indent);\r\n\r\n        case 'GENERIC_WIDGET':\r\n          if (this.debugMode) {\r\n            console.warn(`${indent}\u26A0\uFE0F Generic widget type (has build but no clear classification)`);\r\n          }\r\n          return this.buildGenericWidget(widget, context, indent);\r\n\r\n        case 'UNKNOWN':\r\n        default:\r\n          if (this.debugMode) {\r\n            console.warn(`${indent}\u26A0\uFE0F Unknown widget type: ${widget.constructor?.name || typeof widget}`);\r\n          }\r\n          return this.buildGeneric(widget, context, indent);\r\n      }\r\n\r\n    } catch (error) {\r\n      // Enhanced error handling\r\n      return this.handleBuildError(error, widget, context, indent);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Build a stateless widget\r\n   * @private\r\n   */\r\n  buildStatelessWidget(widget, context, indent) {\r\n    try {\r\n      if (this.debugMode) {\r\n        console.log(`${indent}\uD83D\uDCE6 Building StatelessWidget: ${widget.constructor.name}`);\r\n      }\r\n\r\n      // Push to build stack\r\n      this.buildStack.push(widget.constructor.name);\r\n\r\n      try {\r\n        // Create element\r\n        const element = new StatelessElement(widget, context.parentElement || null, this.runtime);\r\n\r\n        // Call widget.build()\r\n        const builtWidget = element.build();\r\n\r\n        if (!builtWidget) {\r\n          throw this.createError(\r\n            'BUILD_RETURNED_NULL',\r\n            `${widget.constructor.name}.build() returned null`,\r\n            {\r\n              suggestion: 'build() must return a Widget or VNode, not null/undefined',\r\n              widgetType: widget.constructor.name\r\n            }\r\n          );\r\n        }\r\n\r\n        if (this.debugMode) {\r\n          console.log(`${indent}  Result Type: ${typeof builtWidget}`);\r\n          console.log(`${indent}  Constructor: ${builtWidget?.constructor?.name}`);\r\n          console.log(`${indent}  Has tag: ${builtWidget?.tag !== undefined}`);\r\n        }\r\n\r\n        // Check if it's a VNode\r\n        if (builtWidget && typeof builtWidget === 'object' && builtWidget.tag) {\r\n          if (this.debugMode) {\r\n            console.log(`${indent}\u2714 Got VNode (tag: ${builtWidget.tag}), returning`);\r\n          }\r\n          return builtWidget;\r\n        }\r\n\r\n        // Check if it's a string/number\r\n        if (typeof builtWidget === 'string' || typeof builtWidget === 'number') {\r\n          if (this.debugMode) {\r\n            console.log(`${indent}\u2714 Got primitive value, returning`);\r\n          }\r\n          return builtWidget;\r\n        }\r\n\r\n        // Check if it's another widget (recursively build)\r\n        // \u2705 FIXED: Allow any widget type (Stateless, Stateful, Inherited)\r\n        if (builtWidget && typeof builtWidget === 'object' &&\r\n          (typeof builtWidget.build === 'function' ||\r\n            typeof builtWidget.createState === 'function' ||\r\n            typeof builtWidget.updateShouldNotify === 'function')) {\r\n          if (this.debugMode) {\r\n            console.log(`${indent}\uD83D\uDD04 Got nested Widget: ${builtWidget.constructor.name}, recursively building...`);\r\n          }\r\n\r\n          return this.build(builtWidget, {\r\n            ...context,\r\n            parentElement: element,\r\n            runtime: this.runtime\r\n          });\r\n        }\r\n\r\n        // Unknown return type\r\n        throw this.createError(\r\n          'UNKNOWN_BUILD_RESULT',\r\n          `${widget.constructor.name}.build() returned unexpected type`,\r\n          {\r\n            receivedType: typeof builtWidget,\r\n            receivedConstructor: builtWidget?.constructor?.name,\r\n            suggestion: 'build() must return: Widget, VNode, string, number, or null',\r\n            received: builtWidget\r\n          }\r\n        );\r\n\r\n      } finally {\r\n        // Pop from build stack\r\n        this.buildStack.pop();\r\n      }\r\n\r\n    } catch (error) {\r\n      throw this.wrapError(error, `StatelessWidget: ${widget.constructor.name}`);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Build a stateful widget\r\n   * @private\r\n   */\r\n  buildStatefulWidget(widget, context, indent) {\r\n    try {\r\n      if (this.debugMode) {\r\n        console.log(`${indent}\uD83D\uDCE6 Building StatefulWidget: ${widget.constructor.name}`);\r\n      }\r\n\r\n      this.buildStack.push(widget.constructor.name);\r\n\r\n      try {\r\n        // Validate createState\r\n        if (typeof widget.createState !== 'function') {\r\n          throw this.createError(\r\n            'NO_CREATE_STATE',\r\n            `${widget.constructor.name} has createState but it's not a function`,\r\n            {\r\n              createStateType: typeof widget.createState,\r\n              suggestion: 'Implement createState() method in your StatefulWidget'\r\n            }\r\n          );\r\n        }\r\n\r\n        // Create element\r\n        const element = new StatefulElement(widget, context.parentElement || null, this.runtime);\r\n\r\n        if (!element) {\r\n          throw this.createError(\r\n            'ELEMENT_CREATION_FAILED',\r\n            `Failed to create StatefulElement for ${widget.constructor.name}`,\r\n            {\r\n              suggestion: 'Check that StatefulElement constructor accepts (widget, parent, runtime)'\r\n            }\r\n          );\r\n        }\r\n\r\n        // Mount to initialize state\r\n        try {\r\n          if (!element.mounted) {\r\n            element.mount();\r\n          }\r\n        } catch (mountError) {\r\n          throw this.createError(\r\n            'ELEMENT_MOUNT_FAILED',\r\n            `Failed to mount StatefulElement: ${mountError.message}`,\r\n            {\r\n              originalError: mountError,\r\n              suggestion: 'Check element.mount() implementation'\r\n            }\r\n          );\r\n        }\r\n\r\n        // \u2705 FIXED: Do NOT call build() again if mount() already did it\r\n        // Element.mount() calls performRebuild() which calls build() and sets element.vnode\r\n        const builtWidget = element.vnode;\r\n\r\n        if (!builtWidget) {\r\n          throw this.createError(\r\n            'BUILD_RETURNED_NULL',\r\n            `State.build() for ${widget.constructor.name} returned null`,\r\n            {\r\n              suggestion: 'State.build() must return a Widget or VNode'\r\n            }\r\n          );\r\n        }\r\n\r\n        // Check if it's a VNode\r\n        if (builtWidget && typeof builtWidget === 'object' && builtWidget.tag) {\r\n          if (this.debugMode) {\r\n            console.log(`${indent}\u2714 Got VNode (tag: ${builtWidget.tag})`);\r\n          }\r\n          return builtWidget;\r\n        }\r\n\r\n        // Check if it's a string/number\r\n        if (typeof builtWidget === 'string' || typeof builtWidget === 'number') {\r\n          if (this.debugMode) {\r\n            console.log(`${indent}\u2714 Got primitive value`);\r\n          }\r\n          return builtWidget;\r\n        }\r\n\r\n        // Check if it's another widget\r\n        // \u2705 FIXED: Allow any widget type (Stateless, Stateful, Inherited)\r\n        if (builtWidget && typeof builtWidget === 'object' &&\r\n          (typeof builtWidget.build === 'function' ||\r\n            typeof builtWidget.createState === 'function' ||\r\n            typeof builtWidget.updateShouldNotify === 'function')) {\r\n          if (this.debugMode) {\r\n            console.log(`${indent}\uD83D\uDD04 Got nested Widget: ${builtWidget.constructor.name}`);\r\n          }\r\n          return this.build(builtWidget, {\r\n            ...context,\r\n            parentElement: element,\r\n            runtime: this.runtime\r\n          });\r\n        }\r\n\r\n        throw this.createError(\r\n          'UNKNOWN_BUILD_RESULT',\r\n          `State.build() for ${widget.constructor.name} returned unexpected type`,\r\n          {\r\n            receivedType: typeof builtWidget,\r\n            receivedConstructor: builtWidget?.constructor?.name,\r\n            suggestion: 'State.build() must return: Widget, VNode, string, number, or null'\r\n          }\r\n        );\r\n\r\n      } finally {\r\n        this.buildStack.pop();\r\n      }\r\n\r\n    } catch (error) {\r\n      throw this.wrapError(error, `StatefulWidget: ${widget.constructor.name}`);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Build a generic widget (widget with build but unclear type)\r\n   * @private\r\n   */\r\n  buildGenericWidget(widget, context, indent) {\r\n    try {\r\n      if (this.debugMode) {\r\n        console.log(`${indent}\uD83D\uDCE6 Building Generic Widget: ${widget.constructor.name}`);\r\n      }\r\n\r\n      this.buildStack.push(widget.constructor.name);\r\n\r\n      try {\r\n        const element = new StatelessElement(widget, null, this.runtime);\r\n        const builtResult = element.build();\r\n\r\n        if (!builtResult) {\r\n          throw this.createError(\r\n            'BUILD_RETURNED_NULL',\r\n            `Generic widget ${widget.constructor.name}.build() returned null`,\r\n            {\r\n              suggestion: 'build() must return a Widget or VNode'\r\n            }\r\n          );\r\n        }\r\n\r\n        // Recursively build if result is still a widget\r\n        if (builtResult && typeof builtResult === 'object' && typeof builtResult.build === 'function') {\r\n          if (this.debugMode) {\r\n            console.log(`${indent}\u2714 Recovery successful, recursively building...`);\r\n          }\r\n          return this.build(builtResult, context);\r\n        }\r\n\r\n        return builtResult;\r\n\r\n      } catch (error) {\r\n        throw this.createError(\r\n          'RECOVERY_FAILED',\r\n          'Failed to build generic widget',\r\n          {\r\n            originalError: error.message,\r\n            widgetType: widget.constructor.name,\r\n            suggestion: 'Ensure widget implements build() correctly'\r\n          }\r\n        );\r\n      } finally {\r\n        this.buildStack.pop();\r\n      }\r\n\r\n    } catch (error) {\r\n      throw this.wrapError(error, `GenericWidget: ${widget.constructor.name}`);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Build an inherited widget\r\n   * @private\r\n   */\r\n  buildInheritedWidget(widget, context, indent) {\r\n    try {\r\n      if (this.debugMode) {\r\n        console.log(`${indent}\uD83D\uDCE6 Building InheritedWidget: ${widget.constructor.name}`);\r\n      }\r\n\r\n      this.buildStack.push(widget.constructor.name);\r\n\r\n      try {\r\n        // Validate updateShouldNotify\r\n        if (typeof widget.updateShouldNotify !== 'function') {\r\n          throw this.createError(\r\n            'INVALID_UPDATE_SHOULD_NOTIFY',\r\n            `${widget.constructor.name} must implement updateShouldNotify()`,\r\n            {\r\n              suggestion: 'InheritedWidget requires updateShouldNotify(oldWidget) method'\r\n            }\r\n          );\r\n        }\r\n\r\n        const element = new InheritedElement(widget, context.parentElement || null, this.runtime);\r\n\r\n        if (!element.mounted) {\r\n          element.mount();\r\n        }\r\n\r\n        // \u2705 FIXED: Do NOT manually build widget.child\r\n        // InheritedElement.mount() -> build() already handles the child\r\n        // Manually building it causes duplication (nested or appended)\r\n        return element.vnode;\r\n\r\n      } finally {\r\n        this.buildStack.pop();\r\n      }\r\n\r\n    } catch (error) {\r\n      throw this.wrapError(error, `InheritedWidget: ${widget.constructor.name}`);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Build generic widget (fallback)\r\n   * @private\r\n   */\r\n  buildGeneric(widget, context, indent) {\r\n    try {\r\n      if (this.debugMode) {\r\n        console.log(`${indent}\uD83D\uDCE6 Generic widget builder for: ${widget.constructor.name}`);\r\n      }\r\n\r\n      let children = [];\r\n\r\n      try {\r\n        if (widget.child) {\r\n          const child = this.build(widget.child, context);\r\n          if (child) children = [child];\r\n        } else if (widget.children) {\r\n          children = this.buildChildren(widget.children, context);\r\n        }\r\n      } catch (childError) {\r\n        throw this.createError(\r\n          'CHILD_BUILD_FAILED',\r\n          `Failed to build children of ${widget.constructor.name}`,\r\n          {\r\n            originalError: childError.message,\r\n            suggestion: 'Check that child widgets are valid'\r\n          }\r\n        );\r\n      }\r\n\r\n      const widgetType = this.getWidgetType(widget);\r\n\r\n      return new VNode({\r\n        tag: 'div',\r\n        props: {\r\n          className: `fjs-${widgetType.toLowerCase()}`,\r\n          'data-widget-type': widgetType,\r\n          ...this.extractCommonProps(widget)\r\n        },\r\n        children,\r\n        metadata: {\r\n          widgetType,\r\n          note: 'Generic widget - no specific builder implemented'\r\n        }\r\n      });\r\n\r\n    } catch (error) {\r\n      throw this.wrapError(error, `Generic builder for ${widget?.constructor?.name || 'unknown'}`);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Build children array\r\n   * @private\r\n   */\r\n  buildChildren(children, context) {\r\n    if (!children) return [];\r\n    if (!Array.isArray(children)) children = [children];\r\n\r\n    return children\r\n      .map((child, index) => {\r\n        try {\r\n          return this.build(child, {\r\n            ...context,\r\n            childIndex: index,\r\n            runtime: this.runtime\r\n          });\r\n        } catch (error) {\r\n          throw this.createError(\r\n            'CHILD_INDEX_FAILED',\r\n            `Failed to build child at index ${index}`,\r\n            {\r\n              originalError: error.message,\r\n              childIndex: index,\r\n              childType: typeof child,\r\n              childConstructor: child?.constructor?.name\r\n            }\r\n          );\r\n        }\r\n      })\r\n      .filter(vnode => vnode !== null && vnode !== undefined);\r\n  }\r\n\r\n  /**\r\n   * Get widget type name\r\n   * @private\r\n   */\r\n  getWidgetTypeName(widget) {\r\n    if (!widget) return 'Unknown';\r\n    if (widget.constructor && widget.constructor.name) return widget.constructor.name;\r\n    if (widget.runtimeType) return widget.runtimeType;\r\n    if (widget.widget && widget.widget.constructor) return widget.widget.constructor.name;\r\n    return 'Unknown';\r\n  }\r\n\r\n  /**\r\n   * Extract common props from widget\r\n   * @private\r\n   */\r\n  extractCommonProps(widget) {\r\n    const props = {};\r\n    if (widget.key) props.key = widget.key;\r\n    if (widget._debugLabel) props['data-debug-label'] = widget._debugLabel;\r\n    return props;\r\n  }\r\n\r\n  /**\r\n   * Create a detailed error object\r\n   * @private\r\n   */\r\n  createError(code, message, details = {}) {\r\n    const error = new Error(message);\r\n    error.code = code;\r\n    error.details = details;\r\n    error.buildPath = this.buildStack.join(' \u2192 ') || 'ROOT';\r\n    error.timestamp = new Date().toISOString();\r\n    return error;\r\n  }\r\n\r\n  /**\r\n   * Wrap and enhance an existing error\r\n   * @private\r\n   */\r\n  wrapError(error, context) {\r\n    if (!error.buildPath) {\r\n      error.buildPath = this.buildStack.join(' \u2192 ') || 'ROOT';\r\n    }\r\n    if (!error.context) {\r\n      error.context = context;\r\n    }\r\n    return error;\r\n  }\r\n\r\n  /**\r\n   * Handle build errors with detailed reporting\r\n   * @private\r\n   */\r\n  handleBuildError(error, widget, context, indent) {\r\n    const errorReport = this.createErrorReport(error, widget);\r\n\r\n    // Log detailed error\r\n    console.error('');\r\n    console.error('\u274C '.repeat(40));\r\n    console.error('VNODE BUILD ERROR');\r\n    console.error('\u274C '.repeat(40));\r\n    console.error('');\r\n    console.error('\uD83D\uDCCB ERROR CODE:', error.code || 'UNKNOWN');\r\n    console.error('\uD83D\uDCDD MESSAGE:', error.message);\r\n    console.error('');\r\n    console.error('\uD83D\uDD17 BUILD PATH:', errorReport.buildPath);\r\n    console.error('');\r\n\r\n    if (errorReport.widgetInfo) {\r\n      console.error('\uD83D\uDD0D WIDGET INFO:');\r\n      console.error('   Constructor:', errorReport.widgetInfo.constructor);\r\n      console.error('   Type:', errorReport.widgetInfo.type);\r\n      console.error('');\r\n    }\r\n\r\n    if (error.details) {\r\n      console.error('\uD83D\uDCCC DETAILS:');\r\n      Object.entries(error.details).forEach(([key, value]) => {\r\n        if (key === 'suggestion') {\r\n          console.error(`   \uD83D\uDCA1 ${key}: ${value}`);\r\n        } else if (key === 'originalError') {\r\n          console.error(`   \u26A0\uFE0F  ${key}: ${value}`);\r\n        } else {\r\n          console.error(`   ${key}: ${JSON.stringify(value, null, 2)}`);\r\n        }\r\n      });\r\n      console.error('');\r\n    }\r\n\r\n    if (error.stack) {\r\n      console.error('\uD83D\uDCDA STACK TRACE:');\r\n      console.error(error.stack);\r\n      console.error('');\r\n    }\r\n\r\n    console.error('\u274C '.repeat(40));\r\n    console.error('');\r\n\r\n    // Re-throw for upstream handling\r\n    throw error;\r\n  }\r\n\r\n  /**\r\n   * Create a structured error report\r\n   * @private\r\n   */\r\n  createErrorReport(error, widget) {\r\n    return {\r\n      code: error.code || 'UNKNOWN',\r\n      message: error.message,\r\n      buildPath: error.buildPath || this.buildStack.join(' \u2192 ') || 'ROOT',\r\n      timestamp: error.timestamp || new Date().toISOString(),\r\n      widgetInfo: widget ? {\r\n        constructor: widget.constructor?.name || 'unknown',\r\n        type: typeof widget,\r\n        hasBuild: typeof widget.build === 'function',\r\n        hasCreateState: typeof widget.createState === 'function',\r\n        hasTag: widget.tag !== undefined,\r\n        isStateInstance: widget instanceof State\r\n      } : null,\r\n      details: error.details || {}\r\n    };\r\n  }\r\n}\r\n\r\nexport { VNodeBuilder };"],
-  "mappings": "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",
-  "names": ["VNode", "StatelessElement", "StatefulElement", "State", "InheritedElement", "VNodeBuilder", "options", "widget", "context", "buildPath", "indent", "widgetType", "error", "element", "builtWidget", "mountError", "builtResult", "children", "child", "childError", "index", "vnode", "props", "code", "message", "details", "errorReport", "key", "value"]
-}
diff --git a/packages/flutterjs_engine/src/vdom/dist/vnode_differ.js b/packages/flutterjs_engine/src/vdom/dist/vnode_differ.js
deleted file mode 100644
index 67855d79..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/vnode_differ.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{VNode as u}from"./vnode.js";import{VNodeRenderer as E}from"./vnode_renderer.js";const i={CREATE:"CREATE",REMOVE:"REMOVE",REPLACE:"REPLACE",UPDATE_PROPS:"UPDATE_PROPS",UPDATE_TEXT:"UPDATE_TEXT",UPDATE_EVENTS:"UPDATE_EVENTS",REORDER:"REORDER"};class p{constructor(t,s,n,e=null){this.type=t,this.index=s,this.node=n,this.value=e}}class P{static diff(t,s,n=0){const e=[],a=(r,l)=>{r.length>0&&console.log(`[VNodeDiffer] \u{1FA79} Generated ${r.length} patches from ${l}:`,r.map(c=>`${c.type} @ ${c.index} (${c.node?.tag||"text"})`).join(", "))};if(!t&&!s)return e;if(!t&&s)return e.push(new p(i.CREATE,n,s)),e;if(t&&!s)return e.push(new p(i.REMOVE,n,t)),e;if(typeof t=="string"||typeof t=="number")return t!==s&&e.push(new p(i.UPDATE_TEXT,n,t,s)),e;if(t instanceof u&&s instanceof u){if(t.tag!==s.tag)return e.push(new p(i.REPLACE,n,t,s)),a(e,"diffVNode"),e;const r=this.diffProps(t,s,n);e.push(...r);const l=this.diffEvents(t,s,n);e.push(...l);const c=this.diffChildren(t.children,s.children,n);return e.push(...c),e}return e.push(new p(i.REPLACE,n,t,s)),a(e,"fallback"),e}static diffProps(t,s,n){const e=[],a=t.props||{},r=s.props||{};return this.hasPropsChanged(a,r)&&e.push(new p(i.UPDATE_PROPS,n,t,{old:a,new:r})),e}static diffEvents(t,s,n){const e=[],a=t.events||{},r=s.events||{};return this.hasEventsChanged(a,r)&&e.push(new p(i.UPDATE_EVENTS,n,t,{old:a,new:r})),e}static diffChildren(t=[],s=[],n){const e=[],a=this.groupByKey(t),r=this.groupByKey(s),l=Math.max(t.length,s.length);for(let c=0;c<l;c++){const h=t[c],o=s[c],f=`${n}.${c}`;if(!h&&o)e.push(new p(i.CREATE,f,o));else if(h&&!o)e.push(new p(i.REMOVE,f,h));else if(h&&o){const y=this.diff(h,o,f);e.push(...y)}}return e}static groupByKey(t=[]){const s=new Map,n=[];return t.forEach(e=>{e instanceof u&&e.key?s.set(e.key,e):n.push(e)}),{keyed:s,unkeyed:n}}static hasPropsChanged(t,s){const n=new Set([...Object.keys(t),...Object.keys(s)]);for(const e of n)if(t[e]!==s[e])return!0;return!1}static hasEventsChanged(t,s){const n=new Set([...Object.keys(t),...Object.keys(s)]);for(const e of n)if(t[e]!==s[e])return!0;return!1}static applyPatches(t,s,n=new Map){s.forEach(e=>{const a=this.findElement(t,e.index);if(!a){console.warn(`Could not find element at index ${e.index}`);return}switch(e.type){case i.CREATE:this.applyCreate(a,e);break;case i.REMOVE:this.applyRemove(a,e);break;case i.REPLACE:this.applyReplace(a,e);break;case i.UPDATE_PROPS:this.applyUpdateProps(a,e);break;case i.UPDATE_TEXT:this.applyUpdateText(a,e);break;case i.UPDATE_EVENTS:this.applyUpdateEvents(a,e);break;case i.REORDER:this.applyReorder(a,e);break}})}static findElement(t,s){if(s===0||s==="0")return t;const n=String(s).split(".");let e=t;for(const a of n){const r=parseInt(a);if(e=e.childNodes[r],!e)return null}return e}static applyCreate(t,s){const n=E.createDOMNode(s.node);if(t.childNodes.length===0)t.appendChild(n);else{const e=parseInt(String(s.index).split(".").pop());e<t.childNodes.length?t.insertBefore(n,t.childNodes[e]):t.appendChild(n)}}static applyRemove(t,s){const n=parseInt(String(s.index).split(".").pop());t.childNodes[n]&&t.removeChild(t.childNodes[n])}static applyReplace(t,s){const n=parseInt(String(s.index).split(".").pop()),e=t.childNodes[n];if(e){const a=E.createDOMNode(s.value);t.replaceChild(a,e)}}static applyUpdateProps(t,s){E.updateProps(t,s.value.old,s.value.new)}static applyUpdateText(t,s){t.textContent=String(s.value)}static applyUpdateEvents(t,s){E.updateEvents(t,s.value.old,s.value.new)}static applyReorder(t,s){const n=s.value,e=document.createDocumentFragment();n.forEach(a=>{e.appendChild(t.childNodes[a])}),t.appendChild(e)}static getStats(t){const s={total:t.length,creates:0,removes:0,replaces:0,updates:0};return t.forEach(n=>{n.type===i.CREATE?s.creates++:n.type===i.REMOVE?s.removes++:n.type===i.REPLACE?s.replaces++:s.updates++}),s}}export{p as Patch,i as PatchType,P as VNodeDiffer};
-//# sourceMappingURL=vnode_differ.js.map
diff --git a/packages/flutterjs_engine/src/vdom/dist/vnode_differ.js.map b/packages/flutterjs_engine/src/vdom/dist/vnode_differ.js.map
deleted file mode 100644
index e8fd1830..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/vnode_differ.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/vnode_differ.js"],
-  "sourcesContent": ["// ============================================================================\r\n// VNODE DIFFER - Compares old and new VNode trees and generates patches\r\n// Layer: RECONCILIATION\r\n// Implements efficient diffing like React's reconciliation algorithm\r\n// ============================================================================\r\n\r\nimport { VNode } from './vnode.js';\r\nimport { VNodeRenderer } from \"./vnode_renderer.js\";\r\n\r\n/**\r\n * Patch types generated by differ\r\n */\r\nconst PatchType = {\r\n  CREATE: 'CREATE',          // New node added\r\n  REMOVE: 'REMOVE',          // Node removed\r\n  REPLACE: 'REPLACE',        // Node type changed\r\n  UPDATE_PROPS: 'UPDATE_PROPS',  // Props changed\r\n  UPDATE_TEXT: 'UPDATE_TEXT',    // Text content changed\r\n  UPDATE_EVENTS: 'UPDATE_EVENTS', // Event handlers changed\r\n  REORDER: 'REORDER'         // Children reordered\r\n};\r\n\r\nclass Patch {\r\n  constructor(type, index, node, value = null) {\r\n    this.type = type;\r\n    this.index = index;        // Position in parent's children\r\n    this.node = node;          // VNode or old VNode\r\n    this.value = value;        // New value (props, events, etc.)\r\n  }\r\n}\r\n\r\nclass VNodeDiffer {\r\n  /**\r\n   * Diff two VNode trees and generate patches\r\n   * Returns array of Patch objects that can be applied to DOM\r\n   */\r\n  static diff(oldVNode, newVNode, index = 0) {\r\n    const patches = [];\r\n\r\n    // Helper to log patches (remove in production)\r\n    const logPatches = (p, source) => {\r\n      if (p.length > 0) {\r\n        console.log(`[VNodeDiffer] \uD83E\uDE79 Generated ${p.length} patches from ${source}:`,\r\n          p.map(x => `${x.type} @ ${x.index} (${x.node?.tag || 'text'})`).join(', '));\r\n      }\r\n    };\r\n\r\n    // Handle null/undefined cases\r\n    if (!oldVNode && !newVNode) {\r\n      return patches;\r\n    }\r\n\r\n    // New node added\r\n    if (!oldVNode && newVNode) {\r\n      patches.push(new Patch(PatchType.CREATE, index, newVNode));\r\n      return patches;\r\n    }\r\n\r\n    // Node removed\r\n    if (oldVNode && !newVNode) {\r\n      patches.push(new Patch(PatchType.REMOVE, index, oldVNode));\r\n      return patches;\r\n    }\r\n\r\n    // Handle text nodes\r\n    if (typeof oldVNode === 'string' || typeof oldVNode === 'number') {\r\n      if (oldVNode !== newVNode) {\r\n        patches.push(\r\n          new Patch(PatchType.UPDATE_TEXT, index, oldVNode, newVNode)\r\n        );\r\n      }\r\n      return patches;\r\n    }\r\n\r\n    // Both are VNodes - check if same type\r\n    if (oldVNode instanceof VNode && newVNode instanceof VNode) {\r\n      if (oldVNode.tag !== newVNode.tag) {\r\n        // Completely different elements\r\n        patches.push(new Patch(PatchType.REPLACE, index, oldVNode, newVNode));\r\n        logPatches(patches, 'diffVNode');\r\n        return patches;\r\n      }\r\n\r\n      // Same element type - check children and props\r\n      const propPatches = this.diffProps(oldVNode, newVNode, index);\r\n      patches.push(...propPatches);\r\n\r\n      const eventPatches = this.diffEvents(oldVNode, newVNode, index);\r\n      patches.push(...eventPatches);\r\n\r\n      const childPatches = this.diffChildren(\r\n        oldVNode.children,\r\n        newVNode.children,\r\n        index\r\n      );\r\n      patches.push(...childPatches);\r\n\r\n      return patches;\r\n    }\r\n\r\n    // Fallback: replace if completely different\r\n    patches.push(new Patch(PatchType.REPLACE, index, oldVNode, newVNode));\r\n    logPatches(patches, 'fallback');\r\n    return patches;\r\n  }\r\n\r\n  /**\r\n   * Diff props between old and new VNode\r\n   */\r\n  static diffProps(oldVNode, newVNode, index) {\r\n    const patches = [];\r\n    const oldProps = oldVNode.props || {};\r\n    const newProps = newVNode.props || {};\r\n\r\n    // Check if props changed\r\n    const propsChanged = this.hasPropsChanged(oldProps, newProps);\r\n    if (propsChanged) {\r\n      patches.push(\r\n        new Patch(PatchType.UPDATE_PROPS, index, oldVNode, {\r\n          old: oldProps,\r\n          new: newProps\r\n        })\r\n      );\r\n    }\r\n\r\n    return patches;\r\n  }\r\n\r\n  /**\r\n   * Diff events between old and new VNode\r\n   */\r\n  static diffEvents(oldVNode, newVNode, index) {\r\n    const patches = [];\r\n    const oldEvents = oldVNode.events || {};\r\n    const newEvents = newVNode.events || {};\r\n\r\n    const eventsChanged = this.hasEventsChanged(oldEvents, newEvents);\r\n    if (eventsChanged) {\r\n      patches.push(\r\n        new Patch(PatchType.UPDATE_EVENTS, index, oldVNode, {\r\n          old: oldEvents,\r\n          new: newEvents\r\n        })\r\n      );\r\n    }\r\n\r\n    return patches;\r\n  }\r\n\r\n  /**\r\n   * Diff children using key-based or position-based reconciliation\r\n   */\r\n  static diffChildren(oldChildren = [], newChildren = [], parentIndex) {\r\n    const patches = [];\r\n\r\n    // Use keys for reconciliation if available\r\n    const oldKeyed = this.groupByKey(oldChildren);\r\n    const newKeyed = this.groupByKey(newChildren);\r\n\r\n    const maxLen = Math.max(oldChildren.length, newChildren.length);\r\n\r\n    for (let i = 0; i < maxLen; i++) {\r\n      const oldChild = oldChildren[i];\r\n      const newChild = newChildren[i];\r\n      const childIndex = `${parentIndex}.${i}`;\r\n\r\n      if (!oldChild && newChild) {\r\n        // New child added\r\n        patches.push(new Patch(PatchType.CREATE, childIndex, newChild));\r\n      } else if (oldChild && !newChild) {\r\n        // Child removed\r\n        patches.push(new Patch(PatchType.REMOVE, childIndex, oldChild));\r\n      } else if (oldChild && newChild) {\r\n        // Recursively diff\r\n        const childPatches = this.diff(oldChild, newChild, childIndex);\r\n        patches.push(...childPatches);\r\n      }\r\n    }\r\n\r\n    return patches;\r\n  }\r\n\r\n  /**\r\n   * Group VNodes by key for efficient reconciliation\r\n   */\r\n  static groupByKey(vnodes = []) {\r\n    const keyed = new Map();\r\n    const unkeyed = [];\r\n\r\n    vnodes.forEach(vnode => {\r\n      if (vnode instanceof VNode && vnode.key) {\r\n        keyed.set(vnode.key, vnode);\r\n      } else {\r\n        unkeyed.push(vnode);\r\n      }\r\n    });\r\n\r\n    return { keyed, unkeyed };\r\n  }\r\n\r\n  /**\r\n   * Check if props have changed\r\n   */\r\n  static hasPropsChanged(oldProps, newProps) {\r\n    const allKeys = new Set([\r\n      ...Object.keys(oldProps),\r\n      ...Object.keys(newProps)\r\n    ]);\r\n\r\n    for (const key of allKeys) {\r\n      if (oldProps[key] !== newProps[key]) {\r\n        return true;\r\n      }\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  /**\r\n   * Check if events have changed\r\n   */\r\n  static hasEventsChanged(oldEvents, newEvents) {\r\n    const allKeys = new Set([\r\n      ...Object.keys(oldEvents),\r\n      ...Object.keys(newEvents)\r\n    ]);\r\n\r\n    for (const key of allKeys) {\r\n      if (oldEvents[key] !== newEvents[key]) {\r\n        return true;\r\n      }\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  /**\r\n   * Apply patches to DOM\r\n   * Called after diff to update actual DOM\r\n   */\r\n  static applyPatches(domElement, patches, vNodeMap = new Map()) {\r\n    patches.forEach(patch => {\r\n      const targetElement = this.findElement(domElement, patch.index);\r\n\r\n      if (!targetElement) {\r\n        console.warn(`Could not find element at index ${patch.index}`);\r\n        return;\r\n      }\r\n\r\n      switch (patch.type) {\r\n        case PatchType.CREATE:\r\n          this.applyCreate(targetElement, patch);\r\n          break;\r\n\r\n        case PatchType.REMOVE:\r\n          this.applyRemove(targetElement, patch);\r\n          break;\r\n\r\n        case PatchType.REPLACE:\r\n          this.applyReplace(targetElement, patch);\r\n          break;\r\n\r\n        case PatchType.UPDATE_PROPS:\r\n          this.applyUpdateProps(targetElement, patch);\r\n          break;\r\n\r\n        case PatchType.UPDATE_TEXT:\r\n          this.applyUpdateText(targetElement, patch);\r\n          break;\r\n\r\n        case PatchType.UPDATE_EVENTS:\r\n          this.applyUpdateEvents(targetElement, patch);\r\n          break;\r\n\r\n        case PatchType.REORDER:\r\n          this.applyReorder(targetElement, patch);\r\n          break;\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Find DOM element by index path\r\n   * Index format: \"0.1.2\" means: root's 0th child's 1st child's 2nd child\r\n   */\r\n  static findElement(root, index) {\r\n    if (index === 0 || index === '0') {\r\n      return root;\r\n    }\r\n\r\n    const path = String(index).split('.');\r\n    let current = root;\r\n\r\n    for (const step of path) {\r\n      const childIndex = parseInt(step);\r\n      current = current.childNodes[childIndex];\r\n\r\n      if (!current) {\r\n        return null;\r\n      }\r\n    }\r\n\r\n    return current;\r\n  }\r\n\r\n  /**\r\n   * Apply CREATE patch\r\n   */\r\n  static applyCreate(parent, patch) {\r\n\r\n\r\n    const newDom = VNodeRenderer.createDOMNode(patch.node);\r\n\r\n    if (parent.childNodes.length === 0) {\r\n      parent.appendChild(newDom);\r\n    } else {\r\n      const childIndex = parseInt(String(patch.index).split('.').pop());\r\n      if (childIndex < parent.childNodes.length) {\r\n        parent.insertBefore(newDom, parent.childNodes[childIndex]);\r\n      } else {\r\n        parent.appendChild(newDom);\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Apply REMOVE patch\r\n   */\r\n  static applyRemove(parent, patch) {\r\n    const childIndex = parseInt(String(patch.index).split('.').pop());\r\n    if (parent.childNodes[childIndex]) {\r\n      parent.removeChild(parent.childNodes[childIndex]);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Apply REPLACE patch\r\n   */\r\n  static applyReplace(parent, patch) {\r\n\r\n    const childIndex = parseInt(String(patch.index).split('.').pop());\r\n    const oldChild = parent.childNodes[childIndex];\r\n\r\n    if (oldChild) {\r\n      const newDom = VNodeRenderer.createDOMNode(patch.value);\r\n      parent.replaceChild(newDom, oldChild);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Apply UPDATE_PROPS patch\r\n   */\r\n  static applyUpdateProps(element, patch) {\r\n\r\n    VNodeRenderer.updateProps(element, patch.value.old, patch.value.new);\r\n  }\r\n\r\n  /**\r\n   * Apply UPDATE_TEXT patch\r\n   */\r\n  static applyUpdateText(element, patch) {\r\n    element.textContent = String(patch.value);\r\n  }\r\n\r\n  /**\r\n   * Apply UPDATE_EVENTS patch\r\n   */\r\n  static applyUpdateEvents(element, patch) {\r\n\r\n    VNodeRenderer.updateEvents(element, patch.value.old, patch.value.new);\r\n  }\r\n\r\n  /**\r\n   * Apply REORDER patch\r\n   */\r\n  static applyReorder(parent, patch) {\r\n    // Reorder children according to new indices\r\n    const newOrder = patch.value;\r\n    const fragment = document.createDocumentFragment();\r\n\r\n    newOrder.forEach(index => {\r\n      fragment.appendChild(parent.childNodes[index]);\r\n    });\r\n\r\n    parent.appendChild(fragment);\r\n  }\r\n\r\n  /**\r\n   * Get statistics about patches (for debugging)\r\n   */\r\n  static getStats(patches) {\r\n    const stats = {\r\n      total: patches.length,\r\n      creates: 0,\r\n      removes: 0,\r\n      replaces: 0,\r\n      updates: 0\r\n    };\r\n\r\n    patches.forEach(patch => {\r\n      if (patch.type === PatchType.CREATE) stats.creates++;\r\n      else if (patch.type === PatchType.REMOVE) stats.removes++;\r\n      else if (patch.type === PatchType.REPLACE) stats.replaces++;\r\n      else stats.updates++;\r\n    });\r\n\r\n    return stats;\r\n  }\r\n}\r\n\r\n\r\nexport { VNodeDiffer, Patch, PatchType };"],
-  "mappings": "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",
-  "names": ["VNode", "VNodeRenderer", "PatchType", "Patch", "type", "index", "node", "value", "VNodeDiffer", "oldVNode", "newVNode", "patches", "logPatches", "p", "source", "x", "propPatches", "eventPatches", "childPatches", "oldProps", "newProps", "oldEvents", "newEvents", "oldChildren", "newChildren", "parentIndex", "oldKeyed", "newKeyed", "maxLen", "i", "oldChild", "newChild", "childIndex", "vnodes", "keyed", "unkeyed", "vnode", "allKeys", "key", "domElement", "vNodeMap", "patch", "targetElement", "root", "path", "current", "step", "parent", "newDom", "element", "newOrder", "fragment", "stats"]
-}
diff --git a/packages/flutterjs_engine/src/vdom/dist/vnode_renderer.js b/packages/flutterjs_engine/src/vdom/dist/vnode_renderer.js
deleted file mode 100644
index d8ee8a8b..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/vnode_renderer.js
+++ /dev/null
@@ -1,2 +0,0 @@
-class c{constructor(r={}){this.debugMode=r.debugMode||!1,this.rootElement=r.rootElement||null,this.tracker=r.tracker||null}render(r,o,t={}){if(!o)throw new Error("Target element is required");this.debugMode&&(console.log("[VNodeRenderer] \u{1F3A8} Rendering to",o.id||o.className||o.tagName),console.log("[VNodeRenderer] \u{1F4E6} VNode to render:",{type:typeof r,isArray:Array.isArray(r),hasTag:r?.tag,constructor:r?.constructor?.name})),t.clear!==!1&&this.clearElement(o);try{const e=this.createDOMNode(r);return e&&(Array.isArray(e)?e.forEach(s=>o.appendChild(s)):o.appendChild(e)),this.debugMode&&console.log("[VNodeRenderer] \u2705 Rendered successfully"),Array.isArray(e)?e[0]:e}catch(e){throw this.handleRenderError(e,r),e}}handleRenderError(r,o){console.error(""),console.error("\u274C ".repeat(50)),console.error("VNODE RENDERER ERROR - WIDGET NOT CONVERTED TO VNODE"),console.error("\u274C ".repeat(50)),console.error(""),console.error("\u{1F50D} FAILED VNODE DETAILS:"),console.error("   Constructor:",o?.constructor?.name||"unknown"),console.error("   Type:",typeof o),console.error("   Has .tag:",o?.tag!==void 0),console.error("   Has .build:",typeof o?.build=="function"),console.error("   Has .createState:",typeof o?.createState=="function"),console.error("   Has .updateShouldNotify:",typeof o?.updateShouldNotify=="function"),console.error("");const t=this.identifyWidgetType(o);if(console.error("\u{1F4CB} WIDGET TYPE:",t),console.error(""),o&&typeof o=="object"){console.error("\u{1F4DD} WIDGET PROPERTIES:");const e=this.getWidgetProperties(o);Object.entries(e).forEach(([s,n])=>{console.error(`   ${s}: ${n}`)}),console.error("")}console.error("\u{1F4A5} PROBLEM:"),typeof o?.build=="function"&&!o?.tag&&(console.error("   This is a WIDGET (not a VNode)"),console.error("   Widget has a build() method but was never built to VNode"),console.error("   This means VNodeBuilder failed to properly convert this widget"),console.error(""),console.error("\u{1F3AF} THE ISSUE:"),console.error(`   Widget "${o.constructor.name}" reached the renderer`),console.error("   without being converted to a VNode first."),console.error(""),console.error("\u2705 SOLUTIONS:"),console.error("   1. Check VNodeBuilder logs above for detailed error"),console.error("   2. Verify Element.build() returns a VNode"),console.error("   3. Check StatelessElement/StatefulElement implementation"),console.error("   4. Ensure all nested widgets are also converted to VNodes")),console.error(""),console.error("\u{1F4DA} ERROR MESSAGE:",r.message),console.error(""),console.error("\u274C ".repeat(50)),console.error("")}identifyWidgetType(r){return!r||typeof r!="object"?"NOT_A_WIDGET":r.tag!==void 0?"VNODE (has .tag)":typeof r.createState=="function"?"StatefulWidget":typeof r.build=="function"&&!r.createState?"StatelessWidget":typeof r.updateShouldNotify=="function"?"InheritedWidget":r.appBar||r.body||r.floatingActionButton?"Scaffold (or similar)":r.title&&r.theme&&r.home?"MaterialApp":r.child||r.children?"Container/Layout Widget":"Unknown Widget Type"}createDOMNode(r){if(r==null)return document.createTextNode("");if(Array.isArray(r))return r.map(t=>this.createDOMNode(t)).filter(t=>t!==null);if(typeof r=="string"||typeof r=="number")return document.createTextNode(String(r));if(typeof r=="boolean")return document.createTextNode("");if(!r||!r.tag)throw console.error("\u{1F6D1} CRITICAL: VNode missing .tag property"),console.error("   Constructor:",r?.constructor?.name),console.error("   Type:",typeof r),console.error("   Is Widget:",typeof r?.build=="function"),console.error(""),r?.constructor?.name==="FlutterJSRuntime"?new Error("Widget.build() returned the runtime object! build() must return a Widget, VNode, string, or null"):(this.tracker&&typeof this.tracker.trackRenderFailure=="function"&&this.tracker.trackRenderFailure(r,new Error("Missing tag property")),new Error(`[VNodeRenderer] Invalid VNode: Widget "${r?.constructor?.name}" was not built to VNode. This is a build chain error. Check VNodeBuilder logs above for the actual build failure.`));const o=document.createElement(r.tag);if(o._vnode=r,r._element=o,this.applyProps(o,r.props||{}),this.applyStyles(o,r.style||{}),this.applyEvents(o,r.events||{}),r.children&&r.children.length>0&&this.renderChildren(o,r.children),typeof r.ref=="function")try{r.ref(o)}catch(t){console.error("Error in ref callback:",t)}return o}getWidgetProperties(r){const o={};return!r||typeof r!="object"||Object.keys(r).filter(e=>!e.startsWith("_")&&!e.startsWith("__")&&typeof r[e]!="function").slice(0,10).forEach(e=>{const s=r[e];typeof s=="object"&&s!==null?o[e]=`[${s?.constructor?.name||"object"}]`:typeof s=="string"&&s.length>30?o[e]=`"${s.substring(0,30)}..."`:o[e]=JSON.stringify(s)}),o}renderChildren(r,o){o.forEach((t,e)=>{try{const s=this.createDOMNode(t);s&&(Array.isArray(s)?s.forEach(n=>r.appendChild(n)):r.appendChild(s),t&&typeof t=="object"&&t.tag&&(t._parent=r._vnode,t._index=e))}catch(s){throw console.error(`Error rendering child at index ${e}:`,s),s}})}applyProps(r,o){Object.entries(o).forEach(([t,e])=>{if(e!=null)try{if(t==="className"||t==="class"){r.className=e;return}if(t==="value"&&(r.tagName==="INPUT"||r.tagName==="TEXTAREA"||r.tagName==="SELECT")){r.value=e;return}if(t==="checked"&&r.tagName==="INPUT"){r.checked=!!e;return}if(t==="selected"&&r.tagName==="OPTION"){r.selected=!!e;return}if(t==="disabled"){r.disabled=!!e;return}if(t.startsWith("data-")||t.startsWith("aria-")){r.setAttribute(t,String(e));return}if(typeof e=="boolean"){e?r.setAttribute(t,""):r.removeAttribute(t);return}t in r?r[t]=e:r.setAttribute(t,String(e))}catch(s){console.warn(`Failed to set prop ${t}:`,s);try{r.setAttribute(t,String(e))}catch(n){console.error(`Failed to set attribute ${t}:`,n)}}})}applyStyles(r,o){Object.entries(o).forEach(([t,e])=>{if(e!=null)try{t.startsWith("--")?r.style.setProperty(t,e):r.style[t]=e}catch(s){console.warn(`Failed to set style ${t}:`,s)}})}applyEvents(r,o){Object.entries(o).forEach(([t,e])=>{if(typeof e!="function"){console.warn(`Event handler for ${t} is not a function`);return}try{const s=t.replace(/^on/,"").toLowerCase();r._eventListeners||(r._eventListeners={}),r._eventListeners[s]&&r.removeEventListener(s,r._eventListeners[s]),r.addEventListener(s,e),r._eventListeners[s]=e}catch(s){console.error(`Failed to attach event ${t}:`,s)}})}clearElement(r){this.cleanupEventListeners(r),r.innerHTML=""}cleanupEventListeners(r){r&&(r._eventListeners&&(Object.entries(r._eventListeners).forEach(([o,t])=>{r.removeEventListener(o,t)}),r._eventListeners=null),r._vnode&&(r._vnode._element=null,r._vnode=null),Array.from(r.children).forEach(o=>{this.cleanupEventListeners(o)}))}updateProps(r,o={},t={}){Object.keys(o).forEach(e=>{e in t||(e==="className"||e==="class"?r.className="":e.startsWith("data-")||e.startsWith("aria-")||typeof o[e]=="boolean"?r.removeAttribute(e):e in r?r[e]="":r.removeAttribute(e))}),this.applyProps(r,t)}updateStyles(r,o={},t={}){Object.keys(o).forEach(e=>{e in t||(r.style[e]="")}),this.applyStyles(r,t)}updateEvents(r,o={},t={}){Object.keys(o).forEach(e=>{if(!(e in t)){const s=e.replace(/^on/,"").toLowerCase();r._eventListeners&&r._eventListeners[s]&&(r.removeEventListener(s,r._eventListeners[s]),delete r._eventListeners[s])}}),this.applyEvents(r,t)}replaceElement(r,o){const t=this.createDOMNode(o);return r.parentNode&&t&&(this.cleanupEventListeners(r),r.parentNode.replaceChild(t,r)),t}removeElement(r){!r||!r.parentNode||(this.cleanupEventListeners(r),r.parentNode.removeChild(r))}insertAt(r,o,t){const e=this.createDOMNode(o);if(!e)return null;const s=Array.from(r.childNodes);return t>=s.length?r.appendChild(e):r.insertBefore(e,s[t]),e}findElementByPath(r,o){if(!o)return r;const t=o.split(".").map(Number);let e=r;for(const s of t){const n=Array.from(e.childNodes);if(s>=n.length)return null;e=n[s]}return e}getElementPath(r){const o=[];let t=r;for(;t.parentNode&&t.parentNode!==document.body;){const e=t.parentNode,s=Array.from(e.childNodes).indexOf(t);o.unshift(s),t=e}return o.join(".")}batchRender(r,o){const t=document.createDocumentFragment();r.forEach(e=>{const s=this.createDOMNode(e);s&&(Array.isArray(s)?s.forEach(n=>t.appendChild(n)):t.appendChild(s))}),this.clearElement(o),o.appendChild(t)}needsUpdate(r,o){if(!r._vnode)return!0;const t=r._vnode;if(t.tag!==o.tag||t.key!==o.key)return!0;const e=t.props||{},s=o.props||{};if(Object.keys(e).length!==Object.keys(s).length)return!0;const n=t.style||{},i=o.style||{};return Object.keys(n).length!==Object.keys(i).length}}export{c as VNodeRenderer};
-//# sourceMappingURL=vnode_renderer.js.map
diff --git a/packages/flutterjs_engine/src/vdom/dist/vnode_renderer.js.map b/packages/flutterjs_engine/src/vdom/dist/vnode_renderer.js.map
deleted file mode 100644
index 362d47da..00000000
--- a/packages/flutterjs_engine/src/vdom/dist/vnode_renderer.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/vnode_renderer.js"],
-  "sourcesContent": ["/**\r\n * VNodeRenderer - WITH ENHANCED WIDGET IDENTIFICATION\r\n */\r\n\r\nclass VNodeRenderer {\r\n  constructor(options = {}) {\r\n    this.debugMode = options.debugMode || false;\r\n    this.rootElement = options.rootElement || null;\r\n    this.tracker = options.tracker || null;  // Optional tracker\r\n  }\r\n\r\n  render(vnode, targetElement, options = {}) {\r\n    if (!targetElement) {\r\n      throw new Error('Target element is required');\r\n    }\r\n\r\n    if (this.debugMode) {\r\n      console.log('[VNodeRenderer] \uD83C\uDFA8 Rendering to', targetElement.id || targetElement.className || targetElement.tagName);\r\n      console.log('[VNodeRenderer] \uD83D\uDCE6 VNode to render:', {\r\n        type: typeof vnode,\r\n        isArray: Array.isArray(vnode),\r\n        hasTag: vnode?.tag,\r\n        constructor: vnode?.constructor?.name,\r\n      });\r\n    }\r\n\r\n    // Clear target if specified\r\n    if (options.clear !== false) {\r\n      this.clearElement(targetElement);\r\n    }\r\n\r\n    try {\r\n      // Create DOM tree\r\n      const domNode = this.createDOMNode(vnode);\r\n\r\n      // Append to target\r\n      if (domNode) {\r\n        if (Array.isArray(domNode)) {\r\n          domNode.forEach(node => targetElement.appendChild(node));\r\n        } else {\r\n          targetElement.appendChild(domNode);\r\n        }\r\n      }\r\n\r\n      if (this.debugMode) {\r\n        console.log('[VNodeRenderer] \u2705 Rendered successfully');\r\n      }\r\n\r\n      return Array.isArray(domNode) ? domNode[0] : domNode;\r\n\r\n    } catch (error) {\r\n      // Enhanced error with widget identification\r\n      this.handleRenderError(error, vnode);\r\n      throw error;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handle render error with widget identification\r\n   * @private\r\n   */\r\n  handleRenderError(error, vnode) {\r\n    console.error('');\r\n    console.error('\u274C '.repeat(50));\r\n    console.error('VNODE RENDERER ERROR - WIDGET NOT CONVERTED TO VNODE');\r\n    console.error('\u274C '.repeat(50));\r\n    console.error('');\r\n\r\n    // Identify the widget\r\n    console.error('\uD83D\uDD0D FAILED VNODE DETAILS:');\r\n    console.error('   Constructor:', vnode?.constructor?.name || 'unknown');\r\n    console.error('   Type:', typeof vnode);\r\n    console.error('   Has .tag:', vnode?.tag !== undefined);\r\n    console.error('   Has .build:', typeof vnode?.build === 'function');\r\n    console.error('   Has .createState:', typeof vnode?.createState === 'function');\r\n    console.error('   Has .updateShouldNotify:', typeof vnode?.updateShouldNotify === 'function');\r\n    console.error('');\r\n\r\n    // Identify what type of widget this is\r\n    const widgetType = this.identifyWidgetType(vnode);\r\n    console.error('\uD83D\uDCCB WIDGET TYPE:', widgetType);\r\n    console.error('');\r\n\r\n    // Show available properties\r\n    if (vnode && typeof vnode === 'object') {\r\n      console.error('\uD83D\uDCDD WIDGET PROPERTIES:');\r\n      const props = this.getWidgetProperties(vnode);\r\n      Object.entries(props).forEach(([key, value]) => {\r\n        console.error(`   ${key}: ${value}`);\r\n      });\r\n      console.error('');\r\n    }\r\n\r\n    // Error analysis\r\n    console.error('\uD83D\uDCA5 PROBLEM:');\r\n    if (typeof vnode?.build === 'function' && !vnode?.tag) {\r\n      console.error('   This is a WIDGET (not a VNode)');\r\n      console.error('   Widget has a build() method but was never built to VNode');\r\n      console.error('   This means VNodeBuilder failed to properly convert this widget');\r\n      console.error('');\r\n      console.error('\uD83C\uDFAF THE ISSUE:');\r\n      console.error(`   Widget \"${vnode.constructor.name}\" reached the renderer`);\r\n      console.error('   without being converted to a VNode first.');\r\n      console.error('');\r\n      console.error('\u2705 SOLUTIONS:');\r\n      console.error('   1. Check VNodeBuilder logs above for detailed error');\r\n      console.error('   2. Verify Element.build() returns a VNode');\r\n      console.error('   3. Check StatelessElement/StatefulElement implementation');\r\n      console.error('   4. Ensure all nested widgets are also converted to VNodes');\r\n    }\r\n\r\n    console.error('');\r\n    console.error('\uD83D\uDCDA ERROR MESSAGE:', error.message);\r\n    console.error('');\r\n    console.error('\u274C '.repeat(50));\r\n    console.error('');\r\n  }\r\n\r\n  /**\r\n   * Identify widget type\r\n   * @private\r\n   */\r\n  identifyWidgetType(widget) {\r\n    if (!widget || typeof widget !== 'object') {\r\n      return 'NOT_A_WIDGET';\r\n    }\r\n\r\n    if (widget.tag !== undefined) {\r\n      return 'VNODE (has .tag)';\r\n    }\r\n\r\n    if (typeof widget.createState === 'function') {\r\n      return 'StatefulWidget';\r\n    }\r\n\r\n    if (typeof widget.build === 'function' && !widget.createState) {\r\n      return 'StatelessWidget';\r\n    }\r\n\r\n    if (typeof widget.updateShouldNotify === 'function') {\r\n      return 'InheritedWidget';\r\n    }\r\n\r\n    if (widget.appBar || widget.body || widget.floatingActionButton) {\r\n      return 'Scaffold (or similar)';\r\n    }\r\n\r\n    if (widget.title && widget.theme && widget.home) {\r\n      return 'MaterialApp';\r\n    }\r\n\r\n    if (widget.child || widget.children) {\r\n      return 'Container/Layout Widget';\r\n    }\r\n\r\n    return 'Unknown Widget Type';\r\n  }\r\n\r\n\r\n  createDOMNode(vnode) {\r\n    // \u2705 Handle null/undefined FIRST\r\n    if (vnode === null || vnode === undefined) {\r\n      return document.createTextNode('');\r\n    }\r\n\r\n    // Handle arrays (fragments)\r\n    if (Array.isArray(vnode)) {\r\n      return vnode\r\n        .map(child => this.createDOMNode(child))\r\n        .filter(node => node !== null);\r\n    }\r\n\r\n    // Handle text nodes\r\n    if (typeof vnode === 'string' || typeof vnode === 'number') {\r\n      return document.createTextNode(String(vnode));\r\n    }\r\n\r\n    // Handle boolean (render nothing)\r\n    if (typeof vnode === 'boolean') {\r\n      return document.createTextNode('');\r\n    }\r\n\r\n    // \u2705 Check if it's a valid VNode with tag\r\n    if (!vnode || !vnode.tag) {\r\n      console.error('\uD83D\uDED1 CRITICAL: VNode missing .tag property');\r\n      console.error('   Constructor:', vnode?.constructor?.name);\r\n      console.error('   Type:', typeof vnode);\r\n      console.error('   Is Widget:', typeof vnode?.build === 'function');\r\n      console.error('');\r\n\r\n      // \u2705 USE OPTIONAL CHAINING HERE!\r\n      if (vnode?.constructor?.name === 'FlutterJSRuntime') {\r\n        throw new Error(\r\n          'Widget.build() returned the runtime object! ' +\r\n          'build() must return a Widget, VNode, string, or null'\r\n        );\r\n      }\r\n\r\n      // Use tracker if available\r\n      if (this.tracker && typeof this.tracker.trackRenderFailure === 'function') {\r\n        this.tracker.trackRenderFailure(vnode, new Error('Missing tag property'));\r\n      }\r\n\r\n      throw new Error(\r\n        `[VNodeRenderer] Invalid VNode: Widget \"${vnode?.constructor?.name}\" was not built to VNode. ` +\r\n        `This is a build chain error. Check VNodeBuilder logs above for the actual build failure.`\r\n      );\r\n    }\r\n\r\n    // Create element\r\n    const element = document.createElement(vnode.tag);\r\n\r\n    // Store VNode reference\r\n    element._vnode = vnode;\r\n    vnode._element = element;\r\n\r\n    // Apply props (HTML attributes)\r\n    this.applyProps(element, vnode.props || {});\r\n\r\n    // Apply styles (CSS)\r\n    this.applyStyles(element, vnode.style || {});\r\n\r\n    // Attach event listeners\r\n    this.applyEvents(element, vnode.events || {});\r\n\r\n    // Render children\r\n    if (vnode.children && vnode.children.length > 0) {\r\n      this.renderChildren(element, vnode.children);\r\n    }\r\n\r\n    // Call ref callback\r\n    if (typeof vnode.ref === 'function') {\r\n      try {\r\n        vnode.ref(element);\r\n      } catch (error) {\r\n        console.error('Error in ref callback:', error);\r\n      }\r\n    }\r\n\r\n    return element;\r\n  }\r\n\r\n  // \u2705 FIXED: getWidgetProperties with null check\r\n  getWidgetProperties(widget) {\r\n    const props = {};\r\n\r\n    // \u2705 Add null safety check\r\n    if (!widget || typeof widget !== 'object') {\r\n      return props;\r\n    }\r\n\r\n    const keys = Object.keys(widget)\r\n      .filter(k => !k.startsWith('_') && !k.startsWith('__') && typeof widget[k] !== 'function')\r\n      .slice(0, 10);  // Limit to first 10\r\n\r\n    keys.forEach(key => {\r\n      const value = widget[key];\r\n      if (typeof value === 'object' && value !== null) {\r\n        props[key] = `[${value?.constructor?.name || 'object'}]`;  // \u2705 Safe\r\n      } else if (typeof value === 'string' && value.length > 30) {\r\n        props[key] = `\"${value.substring(0, 30)}...\"`;\r\n      } else {\r\n        props[key] = JSON.stringify(value);\r\n      }\r\n    });\r\n\r\n    return props;\r\n  }\r\n\r\n  renderChildren(parent, children) {\r\n    children.forEach((child, index) => {\r\n      try {\r\n        const childNode = this.createDOMNode(child);\r\n\r\n        if (childNode) {\r\n          if (Array.isArray(childNode)) {\r\n            childNode.forEach(node => parent.appendChild(node));\r\n          } else {\r\n            parent.appendChild(childNode);\r\n          }\r\n\r\n          if (child && typeof child === 'object' && child.tag) {\r\n            child._parent = parent._vnode;\r\n            child._index = index;\r\n          }\r\n        }\r\n      } catch (error) {\r\n        console.error(`Error rendering child at index ${index}:`, error);\r\n        throw error;\r\n      }\r\n    });\r\n  }\r\n\r\n  applyProps(element, props) {\r\n    Object.entries(props).forEach(([key, value]) => {\r\n      if (value === null || value === undefined) {\r\n        return;\r\n      }\r\n\r\n      try {\r\n        if (key === 'className' || key === 'class') {\r\n          element.className = value;\r\n          return;\r\n        }\r\n\r\n        if (key === 'value' && (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT')) {\r\n          element.value = value;\r\n          return;\r\n        }\r\n\r\n        if (key === 'checked' && element.tagName === 'INPUT') {\r\n          element.checked = !!value;\r\n          return;\r\n        }\r\n\r\n        if (key === 'selected' && element.tagName === 'OPTION') {\r\n          element.selected = !!value;\r\n          return;\r\n        }\r\n\r\n        if (key === 'disabled') {\r\n          element.disabled = !!value;\r\n          return;\r\n        }\r\n\r\n        if (key.startsWith('data-') || key.startsWith('aria-')) {\r\n          element.setAttribute(key, String(value));\r\n          return;\r\n        }\r\n\r\n        if (typeof value === 'boolean') {\r\n          if (value) {\r\n            element.setAttribute(key, '');\r\n          } else {\r\n            element.removeAttribute(key);\r\n          }\r\n          return;\r\n        }\r\n\r\n        if (key in element) {\r\n          element[key] = value;\r\n        } else {\r\n          element.setAttribute(key, String(value));\r\n        }\r\n      } catch (error) {\r\n        console.warn(`Failed to set prop ${key}:`, error);\r\n        try {\r\n          element.setAttribute(key, String(value));\r\n        } catch (e) {\r\n          console.error(`Failed to set attribute ${key}:`, e);\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  applyStyles(element, styles) {\r\n    Object.entries(styles).forEach(([key, value]) => {\r\n      if (value !== null && value !== undefined) {\r\n        try {\r\n          if (key.startsWith('--')) {\r\n            element.style.setProperty(key, value);\r\n          } else {\r\n            element.style[key] = value;\r\n          }\r\n        } catch (error) {\r\n          console.warn(`Failed to set style ${key}:`, error);\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  applyEvents(element, events) {\r\n    Object.entries(events).forEach(([eventName, handler]) => {\r\n      if (typeof handler !== 'function') {\r\n        console.warn(`Event handler for ${eventName} is not a function`);\r\n        return;\r\n      }\r\n\r\n      try {\r\n        const normalizedName = eventName\r\n          .replace(/^on/, '')\r\n          .toLowerCase();\r\n\r\n        if (!element._eventListeners) {\r\n          element._eventListeners = {};\r\n        }\r\n\r\n        if (element._eventListeners[normalizedName]) {\r\n          element.removeEventListener(\r\n            normalizedName,\r\n            element._eventListeners[normalizedName]\r\n          );\r\n        }\r\n\r\n        element.addEventListener(normalizedName, handler);\r\n        element._eventListeners[normalizedName] = handler;\r\n      } catch (error) {\r\n        console.error(`Failed to attach event ${eventName}:`, error);\r\n      }\r\n    });\r\n  }\r\n\r\n  clearElement(element) {\r\n    this.cleanupEventListeners(element);\r\n    element.innerHTML = '';\r\n  }\r\n\r\n  cleanupEventListeners(element) {\r\n    if (!element) return;\r\n\r\n    if (element._eventListeners) {\r\n      Object.entries(element._eventListeners).forEach(([event, handler]) => {\r\n        element.removeEventListener(event, handler);\r\n      });\r\n      element._eventListeners = null;\r\n    }\r\n\r\n    if (element._vnode) {\r\n      element._vnode._element = null;\r\n      element._vnode = null;\r\n    }\r\n\r\n    Array.from(element.children).forEach(child => {\r\n      this.cleanupEventListeners(child);\r\n    });\r\n  }\r\n\r\n  updateProps(element, oldProps = {}, newProps = {}) {\r\n    Object.keys(oldProps).forEach(key => {\r\n      if (!(key in newProps)) {\r\n        if (key === 'className' || key === 'class') {\r\n          element.className = '';\r\n        } else if (key.startsWith('data-') || key.startsWith('aria-')) {\r\n          element.removeAttribute(key);\r\n        } else if (typeof oldProps[key] === 'boolean') {\r\n          element.removeAttribute(key);\r\n        } else if (key in element) {\r\n          element[key] = '';\r\n        } else {\r\n          element.removeAttribute(key);\r\n        }\r\n      }\r\n    });\r\n\r\n    this.applyProps(element, newProps);\r\n  }\r\n\r\n  updateStyles(element, oldStyles = {}, newStyles = {}) {\r\n    Object.keys(oldStyles).forEach(key => {\r\n      if (!(key in newStyles)) {\r\n        element.style[key] = '';\r\n      }\r\n    });\r\n\r\n    this.applyStyles(element, newStyles);\r\n  }\r\n\r\n  updateEvents(element, oldEvents = {}, newEvents = {}) {\r\n    Object.keys(oldEvents).forEach(eventName => {\r\n      if (!(eventName in newEvents)) {\r\n        const normalizedName = eventName.replace(/^on/, '').toLowerCase();\r\n        if (element._eventListeners && element._eventListeners[normalizedName]) {\r\n          element.removeEventListener(\r\n            normalizedName,\r\n            element._eventListeners[normalizedName]\r\n          );\r\n          delete element._eventListeners[normalizedName];\r\n        }\r\n      }\r\n    });\r\n\r\n    this.applyEvents(element, newEvents);\r\n  }\r\n\r\n  replaceElement(oldElement, newVNode) {\r\n    const newElement = this.createDOMNode(newVNode);\r\n\r\n    if (oldElement.parentNode && newElement) {\r\n      this.cleanupEventListeners(oldElement);\r\n      oldElement.parentNode.replaceChild(newElement, oldElement);\r\n    }\r\n\r\n    return newElement;\r\n  }\r\n\r\n  removeElement(element) {\r\n    if (!element || !element.parentNode) return;\r\n    this.cleanupEventListeners(element);\r\n    element.parentNode.removeChild(element);\r\n  }\r\n\r\n  insertAt(parent, vnode, index) {\r\n    const element = this.createDOMNode(vnode);\r\n\r\n    if (!element) return null;\r\n\r\n    const children = Array.from(parent.childNodes);\r\n\r\n    if (index >= children.length) {\r\n      parent.appendChild(element);\r\n    } else {\r\n      parent.insertBefore(element, children[index]);\r\n    }\r\n\r\n    return element;\r\n  }\r\n\r\n  findElementByPath(root, indexPath) {\r\n    if (!indexPath) return root;\r\n\r\n    const indices = indexPath.split('.').map(Number);\r\n    let current = root;\r\n\r\n    for (const index of indices) {\r\n      const children = Array.from(current.childNodes);\r\n      if (index >= children.length) return null;\r\n      current = children[index];\r\n    }\r\n\r\n    return current;\r\n  }\r\n\r\n  getElementPath(element) {\r\n    const indices = [];\r\n    let current = element;\r\n\r\n    while (current.parentNode && current.parentNode !== document.body) {\r\n      const parent = current.parentNode;\r\n      const index = Array.from(parent.childNodes).indexOf(current);\r\n      indices.unshift(index);\r\n      current = parent;\r\n    }\r\n\r\n    return indices.join('.');\r\n  }\r\n\r\n  batchRender(vnodes, container) {\r\n    const fragment = document.createDocumentFragment();\r\n\r\n    vnodes.forEach(vnode => {\r\n      const element = this.createDOMNode(vnode);\r\n      if (element) {\r\n        if (Array.isArray(element)) {\r\n          element.forEach(node => fragment.appendChild(node));\r\n        } else {\r\n          fragment.appendChild(element);\r\n        }\r\n      }\r\n    });\r\n\r\n    this.clearElement(container);\r\n    container.appendChild(fragment);\r\n  }\r\n\r\n  needsUpdate(element, vnode) {\r\n    if (!element._vnode) return true;\r\n\r\n    const oldVNode = element._vnode;\r\n\r\n    if (oldVNode.tag !== vnode.tag) return true;\r\n    if (oldVNode.key !== vnode.key) return true;\r\n\r\n    const oldProps = oldVNode.props || {};\r\n    const newProps = vnode.props || {};\r\n    if (Object.keys(oldProps).length !== Object.keys(newProps).length) {\r\n      return true;\r\n    }\r\n\r\n    const oldStyles = oldVNode.style || {};\r\n    const newStyles = vnode.style || {};\r\n    if (Object.keys(oldStyles).length !== Object.keys(newStyles).length) {\r\n      return true;\r\n    }\r\n\r\n    return false;\r\n  }\r\n}\r\n\r\nexport { VNodeRenderer };"],
-  "mappings": "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",
-  "names": ["VNodeRenderer", "options", "vnode", "targetElement", "domNode", "node", "error", "widgetType", "props", "key", "value", "widget", "child", "element", "k", "parent", "children", "index", "childNode", "e", "styles", "events", "eventName", "handler", "normalizedName", "event", "oldProps", "newProps", "oldStyles", "newStyles", "oldEvents", "newEvents", "oldElement", "newVNode", "newElement", "root", "indexPath", "indices", "current", "vnodes", "container", "fragment", "oldVNode"]
-}
diff --git a/packages/flutterjs_engine/src/vdom/docs/README.md b/packages/flutterjs_engine/src/vdom/docs/README.md
deleted file mode 100644
index 2942f36b..00000000
--- a/packages/flutterjs_engine/src/vdom/docs/README.md
+++ /dev/null
@@ -1,44 +0,0 @@
-# VDOM Documentation
-
-Documentation for `@flutterjs/vdom`, the virtual DOM engine powering FlutterJS.
-
-## Contents
-
-- **[Architecture](architecture.md)**: System design, Builder, and SSR pipelines.
-- **[Reconciliation](reconciliation.md)**: Diffing algorithm and patch types.
-- **[Source Code](../src/)**: Direct link to source files.
-
-## Quick Links
-- **[Runtime](../runtime/docs/README.md)**: The higher-level package that uses this VDOM.
-
-## Key Modules
-
-- **`vnode.js`**: The virtual node data structure.
-- **`vnode_builder.js`**: Converts Widgets to VNodes.
-- **`vnode_differ.js`**: Generates patches between two VNode trees.
-- **`patch_applier.js`**: Applies patches to the real DOM.
-- **`ssr_renderer.js`**: Generates HTML strings.
-- **`hydrator.js`**: Attaches events to SSR HTML.
-
-## Direct Usage (Advanced)
-
-While normally used via `flutterjs`, you can use the VDOM standalone:
-
-```javascript
-import { VNode, VNodeRenderer } from '@flutterjs/vdom';
-
-// Create VNodes
-const vnode = new VNode({
-  tag: 'button',
-  props: { className: 'btn' },
-  children: ['Click Me'],
-  events: {
-    click: () => alert('Clicked!')
-  }
-});
-
-// Render to DOM
-const root = document.getElementById('root');
-const renderer = new VNodeRenderer();
-renderer.render(vnode, root);
-```
diff --git a/packages/flutterjs_engine/src/vdom/docs/architecture.md b/packages/flutterjs_engine/src/vdom/docs/architecture.md
deleted file mode 100644
index f8f9b156..00000000
--- a/packages/flutterjs_engine/src/vdom/docs/architecture.md
+++ /dev/null
@@ -1,54 +0,0 @@
-# VDOM Architecture
-
-The `@flutterjs/vdom` package implements a lightweight Virtual DOM specifically optimized for Flutter's widget model.
-
-## Core Components
-
-```mermaid
-graph TD
-    Widget[Flutter Widget] --> Builder[VNodeBuilder]
-    Builder --> VNode[VNode Tree]
-    VNode --> Differ[VNodeDiffer]
-    Differ --> Patches[Patch List]
-    Patches --> Patcher[PatchApplier]
-    Patcher --> DOM[Real DOM]
-    
-    subgraph SSR
-    VNode --> SSR[SSRRenderer]
-    SSR --> HTML[HTML String]
-    HTML --> Client[Client Browser]
-    Client --> Hydrator[Hydrator]
-    end
-```
-
-### 1. VNode System (`vnode.js`)
-The fundamental unit of the UI. Unlike React's Fiber or Preact's VNode, our VNodes are designed to hold Flutter-specific metadata.
-- **`tag`**: HTML tag name.
-- **`props`**: HTML attributes.
-- **`style`**: CSS styles object.
-- **`events`**: Event listeners (stripped during SSR, re-attached during hydration).
-- **`metadata`**: Debug info like `widgetType`, `statefulWidgetId`.
-
-### 2. The Build Process (`vnode_builder.js`)
-Converts a high-level Widget tree into a low-level VNode tree.
-- Handles `StatefulWidget` lifecycle (createState, mount).
-- Recursively builds `StatelessWidget`.
-- Manages `InheritedWidget` context.
-- Provides detailed error reporting with build stacks (e.g., `MyApp → HomePage → Container`).
-
-### 3. Rendering Pipelines
-
-#### Client-Side Rendering (CSR)
-1.  **Build**: `VNodeBuilder` creates a fresh VNode tree.
-2.  **Diff**: `VNodeDiffer` compares it with the previous tree.
-3.  **Patch**: `PatchApplier` updates only the changed parts of the DOM.
-
-#### Server-Side Rendering (SSR)
-1.  **Render**: `SSRRenderer` traverses the VNode tree and outputs an HTML string.
-2.  **Hydrate**: `Hydrator` on the client matches the existing DOM with a new VNode tree and attaches event listeners without re-rendering.
-
-### 4. Indexing System
-The `PatchApplier` uses a dot-notation indexing system to locate nodes efficiently without keeping references to every single DOM node.
-- `0`: First child of root.
-- `0.1`: Second child of the first child.
-- `2.0.4`: Fifth child of the first child of the third child.
diff --git a/packages/flutterjs_engine/src/vdom/docs/reconciliation.md b/packages/flutterjs_engine/src/vdom/docs/reconciliation.md
deleted file mode 100644
index 70da299a..00000000
--- a/packages/flutterjs_engine/src/vdom/docs/reconciliation.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# Reconciliation & Diffing
-
-The reconciliation process determines how to update the DOM efficiently when the widget tree changes.
-
-## The Diffing Algorithm (`vnode_differ.js`)
-
-We use a heuristic O(n) algorithm similar to React's.
-
-1.  **Type Check**: If `tags` are different (e.g., `div` -> `span`), destroy the old tree and build a new one.
-2.  **Prop Diff**: If tags match, diff `props`, `style`, and `events`.
-3.  **Child Diff**: Recursively diff children.
-
-### Patch Types
-
-The differ generates a linear list of operations called `Patches`.
-
-| Patch Type | Description |
-| types | description |
-| `CREATE` | Create a new node and insert it. |
-| `REMOVE` | Remove an existing node. |
-| `REPLACE` | Replace one node with another (different tag). |
-| `UPDATE_PROPS` | Update HTML attributes (e.g., `id`, `class`). |
-| `UPDATE_STYLE` | Update CSS styles (e.g., `color`, `display`). |
-| `UPDATE_TEXT` | Update text content. |
-| `UPDATE_EVENTS`| Update event listeners (detach old, attach new). |
-| `REORDER` | Move existing children to new positions. |
-
-## Keyed Reconciliation
-
-When children are arrays (lists), we use `key` props to track identity.
-
-```javascript
-// Without keys: O(n) replacement if order changes
-[A, B, C] -> [C, A, B] // Replaces A with C, B with A, C with B
-
-// With keys: O(n) reorder
-[A(key=1), B(key=2)] -> [B(key=2), A(key=1)] // Moves nodes
-```
-
-## Patch Application (`patch_applier.js`)
-
-The patch applier executes updates in a specific safety order:
-1.  **REMOVE**: Delete nodes first to clear space and avoid index collisions.
-2.  **CREATE**: Add new nodes.
-3.  **UPDATES**: Apply property/style/text changes.
-
-This ensures that indices (like `0.1`) remain valid during the patching process.
diff --git a/packages/flutterjs_engine/src/vdom/package-lock.json b/packages/flutterjs_engine/src/vdom/package-lock.json
deleted file mode 100644
index ed8159d4..00000000
--- a/packages/flutterjs_engine/src/vdom/package-lock.json
+++ /dev/null
@@ -1,4526 +0,0 @@
-{
-  "name": "@flutterjs/vdom",
-  "version": "1.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "@flutterjs/vdom",
-      "version": "1.0.0",
-      "dependencies": {
-        "@flutterjs/runtime": "file:../runtime",
-        "jest": "^29.7.0",
-        "jsdom": "^22.1.0"
-      },
-      "devDependencies": {
-        "esbuild": "^0.27.2"
-      }
-    },
-    "../../../../package/material": {
-      "extraneous": true
-    },
-    "../../package/material": {
-      "name": "@flutterjs/material",
-      "version": "1.0.0",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "@flutterjs/runtime": "file:../../src/runtime",
-        "@flutterjs/vdom": "file:../../src/vdom"
-      },
-      "devDependencies": {
-        "esbuild": "^0.18.0"
-      }
-    },
-    "../runtime": {
-      "name": "@flutterjs/runtime",
-      "version": "1.0.0",
-      "license": "ISC",
-      "dependencies": {
-        "@flutterjs/vdom": "file:../vdom",
-        "jest": "^29.7.0",
-        "jsdom": "^22.1.0"
-      },
-      "devDependencies": {
-        "esbuild": "^0.27.2"
-      }
-    },
-    "node_modules/@babel/code-frame": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
-      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.27.1",
-        "js-tokens": "^4.0.0",
-        "picocolors": "^1.1.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/compat-data": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.5.tgz",
-      "integrity": "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/core": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
-      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.5",
-        "@babel/helper-compilation-targets": "^7.27.2",
-        "@babel/helper-module-transforms": "^7.28.3",
-        "@babel/helpers": "^7.28.4",
-        "@babel/parser": "^7.28.5",
-        "@babel/template": "^7.27.2",
-        "@babel/traverse": "^7.28.5",
-        "@babel/types": "^7.28.5",
-        "@jridgewell/remapping": "^2.3.5",
-        "convert-source-map": "^2.0.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.2",
-        "json5": "^2.2.3",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/babel"
-      }
-    },
-    "node_modules/@babel/generator": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
-      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.28.5",
-        "@babel/types": "^7.28.5",
-        "@jridgewell/gen-mapping": "^0.3.12",
-        "@jridgewell/trace-mapping": "^0.3.28",
-        "jsesc": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.27.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
-      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/compat-data": "^7.27.2",
-        "@babel/helper-validator-option": "^7.27.1",
-        "browserslist": "^4.24.0",
-        "lru-cache": "^5.1.1",
-        "semver": "^6.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "license": "ISC",
-      "dependencies": {
-        "yallist": "^3.0.2"
-      }
-    },
-    "node_modules/@babel/helper-globals": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
-      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-imports": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
-      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.27.1",
-        "@babel/types": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-transforms": {
-      "version": "7.28.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
-      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.27.1",
-        "@babel/traverse": "^7.28.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
-      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-string-parser": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
-      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
-      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-validator-option": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
-      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helpers": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
-      "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/template": "^7.27.2",
-        "@babel/types": "^7.28.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/parser": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
-      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.28.5"
-      },
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-async-generators": {
-      "version": "7.8.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
-      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-bigint": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
-      "integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-class-properties": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
-      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.12.13"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-class-static-block": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
-      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-import-attributes": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.27.1.tgz",
-      "integrity": "sha512-oFT0FrKHgF53f4vOsZGi2Hh3I35PfSmVs4IBFLFj4dnafP+hIWDLg3VyKmUHfLoLHlyxY4C7DGtmHuJgn+IGww==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-import-meta": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
-      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-json-strings": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
-      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-jsx": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.27.1.tgz",
-      "integrity": "sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
-      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
-      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-numeric-separator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
-      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-object-rest-spread": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
-      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-optional-catch-binding": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
-      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-optional-chaining": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
-      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-private-property-in-object": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
-      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-top-level-await": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
-      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-typescript": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.27.1.tgz",
-      "integrity": "sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/@babel/template": {
-      "version": "7.27.2",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
-      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/parser": "^7.27.2",
-        "@babel/types": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/traverse": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
-      "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.5",
-        "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.28.5",
-        "@babel/template": "^7.27.2",
-        "@babel/types": "^7.28.5",
-        "debug": "^4.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/types": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
-      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.28.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@bcoe/v8-coverage": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
-      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
-      "license": "MIT"
-    },
-    "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz",
-      "integrity": "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "aix"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/android-arm": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.2.tgz",
-      "integrity": "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/android-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz",
-      "integrity": "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/android-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.2.tgz",
-      "integrity": "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz",
-      "integrity": "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/darwin-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz",
-      "integrity": "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz",
-      "integrity": "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz",
-      "integrity": "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-arm": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz",
-      "integrity": "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz",
-      "integrity": "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-ia32": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz",
-      "integrity": "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-loong64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.2.tgz",
-      "integrity": "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz",
-      "integrity": "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz",
-      "integrity": "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz",
-      "integrity": "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-s390x": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz",
-      "integrity": "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/linux-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz",
-      "integrity": "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz",
-      "integrity": "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz",
-      "integrity": "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz",
-      "integrity": "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz",
-      "integrity": "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz",
-      "integrity": "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openharmony"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/sunos-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz",
-      "integrity": "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/win32-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz",
-      "integrity": "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/win32-ia32": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz",
-      "integrity": "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/win32-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz",
-      "integrity": "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@flutterjs/runtime": {
-      "resolved": "../runtime",
-      "link": true
-    },
-    "node_modules/@istanbuljs/load-nyc-config": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
-      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
-      "license": "ISC",
-      "dependencies": {
-        "camelcase": "^5.3.1",
-        "find-up": "^4.1.0",
-        "get-package-type": "^0.1.0",
-        "js-yaml": "^3.13.1",
-        "resolve-from": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@istanbuljs/schema": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
-      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@jest/console": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/console/-/console-29.7.0.tgz",
-      "integrity": "sha512-5Ni4CU7XHQi32IJ398EEP4RrB8eV09sXP2ROqD4bksHrnTree52PsxvX8tpL8LvTZ3pFzXyPbNQReSN41CAhOg==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/types": "^29.6.3",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "jest-message-util": "^29.7.0",
-        "jest-util": "^29.7.0",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/core": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/core/-/core-29.7.0.tgz",
-      "integrity": "sha512-n7aeXWKMnGtDA48y8TLWJPJmLmmZ642Ceo78cYWEpiD7FzDgmNDV/GCVRorPABdXLJZ/9wzzgZAlHjXjxDHGsg==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/console": "^29.7.0",
-        "@jest/reporters": "^29.7.0",
-        "@jest/test-result": "^29.7.0",
-        "@jest/transform": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "@types/node": "*",
-        "ansi-escapes": "^4.2.1",
-        "chalk": "^4.0.0",
-        "ci-info": "^3.2.0",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.2.9",
-        "jest-changed-files": "^29.7.0",
-        "jest-config": "^29.7.0",
-        "jest-haste-map": "^29.7.0",
-        "jest-message-util": "^29.7.0",
-        "jest-regex-util": "^29.6.3",
-        "jest-resolve": "^29.7.0",
-        "jest-resolve-dependencies": "^29.7.0",
-        "jest-runner": "^29.7.0",
-        "jest-runtime": "^29.7.0",
-        "jest-snapshot": "^29.7.0",
-        "jest-util": "^29.7.0",
-        "jest-validate": "^29.7.0",
-        "jest-watcher": "^29.7.0",
-        "micromatch": "^4.0.4",
-        "pretty-format": "^29.7.0",
-        "slash": "^3.0.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      },
-      "peerDependencies": {
-        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
-      },
-      "peerDependenciesMeta": {
-        "node-notifier": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@jest/environment": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-29.7.0.tgz",
-      "integrity": "sha512-aQIfHDq33ExsN4jP1NWGXhxgQ/wixs60gDiKO+XVMd8Mn0NWPWgc34ZQDTb2jKaUWQ7MuwoitXAsN2XVXNMpAw==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/fake-timers": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "@types/node": "*",
-        "jest-mock": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/expect": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/expect/-/expect-29.7.0.tgz",
-      "integrity": "sha512-8uMeAMycttpva3P1lBHB8VciS9V0XAr3GymPpipdyQXbBcuhkLQOSe8E/p92RyAdToS6ZD1tFkX+CkhoECE0dQ==",
-      "license": "MIT",
-      "dependencies": {
-        "expect": "^29.7.0",
-        "jest-snapshot": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/expect-utils": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.7.0.tgz",
-      "integrity": "sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==",
-      "license": "MIT",
-      "dependencies": {
-        "jest-get-type": "^29.6.3"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/fake-timers": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-29.7.0.tgz",
-      "integrity": "sha512-q4DH1Ha4TTFPdxLsqDXK1d3+ioSL7yL5oCMJZgDYm6i+6CygW5E5xVr/D1HdsGxjt1ZWSfUAs9OxSB/BNelWrQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/types": "^29.6.3",
-        "@sinonjs/fake-timers": "^10.0.2",
-        "@types/node": "*",
-        "jest-message-util": "^29.7.0",
-        "jest-mock": "^29.7.0",
-        "jest-util": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/globals": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-29.7.0.tgz",
-      "integrity": "sha512-mpiz3dutLbkW2MNFubUGUEVLkTGiqW6yLVTA+JbP6fI6J5iL9Y0Nlg8k95pcF8ctKwCS7WVxteBs29hhfAotzQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/environment": "^29.7.0",
-        "@jest/expect": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "jest-mock": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/reporters": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-29.7.0.tgz",
-      "integrity": "sha512-DApq0KJbJOEzAFYjHADNNxAE3KbhxQB1y5Kplb5Waqw6zVbuWatSnMjE5gs8FUgEPmNsnZA3NCWl9NG0ia04Pg==",
-      "license": "MIT",
-      "dependencies": {
-        "@bcoe/v8-coverage": "^0.2.3",
-        "@jest/console": "^29.7.0",
-        "@jest/test-result": "^29.7.0",
-        "@jest/transform": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "@jridgewell/trace-mapping": "^0.3.18",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "collect-v8-coverage": "^1.0.0",
-        "exit": "^0.1.2",
-        "glob": "^7.1.3",
-        "graceful-fs": "^4.2.9",
-        "istanbul-lib-coverage": "^3.0.0",
-        "istanbul-lib-instrument": "^6.0.0",
-        "istanbul-lib-report": "^3.0.0",
-        "istanbul-lib-source-maps": "^4.0.0",
-        "istanbul-reports": "^3.1.3",
-        "jest-message-util": "^29.7.0",
-        "jest-util": "^29.7.0",
-        "jest-worker": "^29.7.0",
-        "slash": "^3.0.0",
-        "string-length": "^4.0.1",
-        "strip-ansi": "^6.0.0",
-        "v8-to-istanbul": "^9.0.1"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      },
-      "peerDependencies": {
-        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
-      },
-      "peerDependenciesMeta": {
-        "node-notifier": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@jest/schemas": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
-      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
-      "license": "MIT",
-      "dependencies": {
-        "@sinclair/typebox": "^0.27.8"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/source-map": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-29.6.3.tgz",
-      "integrity": "sha512-MHjT95QuipcPrpLM+8JMSzFx6eHp5Bm+4XeFDJlwsvVBjmKNiIAvasGK2fxz2WbGRlnvqehFbh07MMa7n3YJnw==",
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.18",
-        "callsites": "^3.0.0",
-        "graceful-fs": "^4.2.9"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/test-result": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-29.7.0.tgz",
-      "integrity": "sha512-Fdx+tv6x1zlkJPcWXmMDAG2HBnaR9XPSd5aDWQVsfrZmLVT3lU1cwyxLgRmXR9yrq4NBoEm9BMsfgFzTQAbJYA==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/console": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "collect-v8-coverage": "^1.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/test-sequencer": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-29.7.0.tgz",
-      "integrity": "sha512-GQwJ5WZVrKnOJuiYiAF52UNUJXgTZx1NHjFSEB0qEMmSZKAkdMoIzw/Cj6x6NF4AvV23AUqDpFzQkN/eYCYTxw==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/test-result": "^29.7.0",
-        "graceful-fs": "^4.2.9",
-        "jest-haste-map": "^29.7.0",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/transform": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-29.7.0.tgz",
-      "integrity": "sha512-ok/BTPFzFKVMwO5eOHRrvnBVHdRy9IrsrW1GpMaQ9MCnilNLXQKmAX8s1YXDFaai9xJpac2ySzV0YeRRECr2Vw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/core": "^7.11.6",
-        "@jest/types": "^29.6.3",
-        "@jridgewell/trace-mapping": "^0.3.18",
-        "babel-plugin-istanbul": "^6.1.1",
-        "chalk": "^4.0.0",
-        "convert-source-map": "^2.0.0",
-        "fast-json-stable-stringify": "^2.1.0",
-        "graceful-fs": "^4.2.9",
-        "jest-haste-map": "^29.7.0",
-        "jest-regex-util": "^29.6.3",
-        "jest-util": "^29.7.0",
-        "micromatch": "^4.0.4",
-        "pirates": "^4.0.4",
-        "slash": "^3.0.0",
-        "write-file-atomic": "^4.0.2"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jest/types": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz",
-      "integrity": "sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^17.0.8",
-        "chalk": "^4.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.13",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
-      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
-    "node_modules/@jridgewell/remapping": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
-      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
-    "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
-      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-      "license": "MIT"
-    },
-    "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.31",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
-      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
-      }
-    },
-    "node_modules/@sinclair/typebox": {
-      "version": "0.27.8",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
-      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
-      "license": "MIT"
-    },
-    "node_modules/@sinonjs/commons": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.1.tgz",
-      "integrity": "sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "type-detect": "4.0.8"
-      }
-    },
-    "node_modules/@sinonjs/fake-timers": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-10.3.0.tgz",
-      "integrity": "sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "@sinonjs/commons": "^3.0.0"
-      }
-    },
-    "node_modules/@tootallnate/once": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
-      "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@types/babel__core": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
-      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.20.7",
-        "@babel/types": "^7.20.7",
-        "@types/babel__generator": "*",
-        "@types/babel__template": "*",
-        "@types/babel__traverse": "*"
-      }
-    },
-    "node_modules/@types/babel__generator": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
-      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "node_modules/@types/babel__template": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
-      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.1.0",
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "node_modules/@types/babel__traverse": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
-      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.28.2"
-      }
-    },
-    "node_modules/@types/graceful-fs": {
-      "version": "4.1.9",
-      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
-      "integrity": "sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/istanbul-lib-coverage": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
-      "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==",
-      "license": "MIT"
-    },
-    "node_modules/@types/istanbul-lib-report": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz",
-      "integrity": "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "*"
-      }
-    },
-    "node_modules/@types/istanbul-reports": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz",
-      "integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/istanbul-lib-report": "*"
-      }
-    },
-    "node_modules/@types/node": {
-      "version": "25.0.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.0.3.tgz",
-      "integrity": "sha512-W609buLVRVmeW693xKfzHeIV6nJGGz98uCPfeXI1ELMLXVeKYZ9m15fAMSaUPBHYLGFsVRcMmSCksQOrZV9BYA==",
-      "license": "MIT",
-      "dependencies": {
-        "undici-types": "~7.16.0"
-      }
-    },
-    "node_modules/@types/stack-utils": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
-      "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
-      "license": "MIT"
-    },
-    "node_modules/@types/yargs": {
-      "version": "17.0.35",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.35.tgz",
-      "integrity": "sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/yargs-parser": "*"
-      }
-    },
-    "node_modules/@types/yargs-parser": {
-      "version": "21.0.3",
-      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
-      "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==",
-      "license": "MIT"
-    },
-    "node_modules/abab": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
-      "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
-      "deprecated": "Use your platform's native atob() and btoa() methods instead",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/agent-base": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6.0.0"
-      }
-    },
-    "node_modules/ansi-escapes": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
-      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
-      "license": "MIT",
-      "dependencies": {
-        "type-fest": "^0.21.3"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "license": "ISC",
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/argparse": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "license": "MIT",
-      "dependencies": {
-        "sprintf-js": "~1.0.2"
-      }
-    },
-    "node_modules/asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "license": "MIT"
-    },
-    "node_modules/babel-jest": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz",
-      "integrity": "sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/transform": "^29.7.0",
-        "@types/babel__core": "^7.1.14",
-        "babel-plugin-istanbul": "^6.1.1",
-        "babel-preset-jest": "^29.6.3",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.9",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.8.0"
-      }
-    },
-    "node_modules/babel-plugin-istanbul": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
-      "integrity": "sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@istanbuljs/load-nyc-config": "^1.0.0",
-        "@istanbuljs/schema": "^0.1.2",
-        "istanbul-lib-instrument": "^5.0.4",
-        "test-exclude": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/babel-plugin-istanbul/node_modules/istanbul-lib-instrument": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
-      "integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "@babel/core": "^7.12.3",
-        "@babel/parser": "^7.14.7",
-        "@istanbuljs/schema": "^0.1.2",
-        "istanbul-lib-coverage": "^3.2.0",
-        "semver": "^6.3.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/babel-plugin-jest-hoist": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.6.3.tgz",
-      "integrity": "sha512-ESAc/RJvGTFEzRwOTT4+lNDk/GNHMkKbNzsvT0qKRfDyyYTskxB5rnU2njIDYVxXCBHHEI1c0YwHob3WaYujOg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/template": "^7.3.3",
-        "@babel/types": "^7.3.3",
-        "@types/babel__core": "^7.1.14",
-        "@types/babel__traverse": "^7.0.6"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/babel-preset-current-node-syntax": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.2.0.tgz",
-      "integrity": "sha512-E/VlAEzRrsLEb2+dv8yp3bo4scof3l9nR4lrld+Iy5NyVqgVYUJnDAmunkhPMisRI32Qc4iRiz425d8vM++2fg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/plugin-syntax-async-generators": "^7.8.4",
-        "@babel/plugin-syntax-bigint": "^7.8.3",
-        "@babel/plugin-syntax-class-properties": "^7.12.13",
-        "@babel/plugin-syntax-class-static-block": "^7.14.5",
-        "@babel/plugin-syntax-import-attributes": "^7.24.7",
-        "@babel/plugin-syntax-import-meta": "^7.10.4",
-        "@babel/plugin-syntax-json-strings": "^7.8.3",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
-        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
-        "@babel/plugin-syntax-top-level-await": "^7.14.5"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0 || ^8.0.0-0"
-      }
-    },
-    "node_modules/babel-preset-jest": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-29.6.3.tgz",
-      "integrity": "sha512-0B3bhxR6snWXJZtR/RliHTDPRgn1sNHOR0yVtq/IiQFyuOVjFS+wuio/R4gSNkyYmKmJB4wGZv2NZanmKmTnNA==",
-      "license": "MIT",
-      "dependencies": {
-        "babel-plugin-jest-hoist": "^29.6.3",
-        "babel-preset-current-node-syntax": "^1.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
-      }
-    },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "license": "MIT"
-    },
-    "node_modules/baseline-browser-mapping": {
-      "version": "2.9.9",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.9.tgz",
-      "integrity": "sha512-V8fbOCSeOFvlDj7LLChUcqbZrdKD9RU/VR260piF1790vT0mfLSwGc/Qzxv3IqiTukOpNtItePa0HBpMAj7MDg==",
-      "license": "Apache-2.0",
-      "bin": {
-        "baseline-browser-mapping": "dist/cli.js"
-      }
-    },
-    "node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "license": "MIT",
-      "dependencies": {
-        "fill-range": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/browserslist": {
-      "version": "4.28.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
-      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "baseline-browser-mapping": "^2.9.0",
-        "caniuse-lite": "^1.0.30001759",
-        "electron-to-chromium": "^1.5.263",
-        "node-releases": "^2.0.27",
-        "update-browserslist-db": "^1.2.0"
-      },
-      "bin": {
-        "browserslist": "cli.js"
-      },
-      "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      }
-    },
-    "node_modules/bser": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
-      "integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "node-int64": "^0.4.0"
-      }
-    },
-    "node_modules/buffer-from": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "license": "MIT"
-    },
-    "node_modules/call-bind-apply-helpers": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
-      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/callsites": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001760",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001760.tgz",
-      "integrity": "sha512-7AAMPcueWELt1p3mi13HR/LHH0TJLT11cnwDJEs3xA4+CK/PLKeO9Kl1oru24htkyUKtkGCvAx4ohB0Ttry8Dw==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "CC-BY-4.0"
-    },
-    "node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/char-regex": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
-      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/ci-info": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
-      "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/sibiraj-s"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/cjs-module-lexer": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.4.3.tgz",
-      "integrity": "sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==",
-      "license": "MIT"
-    },
-    "node_modules/cliui": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
-      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.1",
-        "wrap-ansi": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/co": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
-      "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==",
-      "license": "MIT",
-      "engines": {
-        "iojs": ">= 1.0.0",
-        "node": ">= 0.12.0"
-      }
-    },
-    "node_modules/collect-v8-coverage": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.3.tgz",
-      "integrity": "sha512-1L5aqIkwPfiodaMgQunkF1zRhNqifHBmtbbbxcr6yVxxBnliw4TDOW6NxpO8DJLgJ16OT+Y4ztZqP6p/FtXnAw==",
-      "license": "MIT"
-    },
-    "node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "license": "MIT",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "license": "MIT"
-    },
-    "node_modules/combined-stream": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "license": "MIT",
-      "dependencies": {
-        "delayed-stream": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "license": "MIT"
-    },
-    "node_modules/convert-source-map": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "license": "MIT"
-    },
-    "node_modules/create-jest": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz",
-      "integrity": "sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/types": "^29.6.3",
-        "chalk": "^4.0.0",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.2.9",
-        "jest-config": "^29.7.0",
-        "jest-util": "^29.7.0",
-        "prompts": "^2.0.1"
-      },
-      "bin": {
-        "create-jest": "bin/create-jest.js"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/cross-spawn": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
-      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "license": "MIT",
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/cssstyle": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
-      "integrity": "sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==",
-      "license": "MIT",
-      "dependencies": {
-        "rrweb-cssom": "^0.6.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/data-urls": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
-      "integrity": "sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==",
-      "license": "MIT",
-      "dependencies": {
-        "abab": "^2.0.6",
-        "whatwg-mimetype": "^3.0.0",
-        "whatwg-url": "^12.0.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/decimal.js": {
-      "version": "10.6.0",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
-      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
-      "license": "MIT"
-    },
-    "node_modules/dedent": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.7.1.tgz",
-      "integrity": "sha512-9JmrhGZpOlEgOLdQgSm0zxFaYoQon408V1v49aqTWuXENVlnCuY9JBZcXZiCsZQWDjTm5Qf/nIvAy77mXDAjEg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "babel-plugin-macros": "^3.1.0"
-      },
-      "peerDependenciesMeta": {
-        "babel-plugin-macros": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/deepmerge": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/detect-newline": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
-      "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/diff-sequences": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
-      "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
-      "license": "MIT",
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/domexception": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
-      "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
-      "deprecated": "Use your platform's native DOMException instead",
-      "license": "MIT",
-      "dependencies": {
-        "webidl-conversions": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/dunder-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
-      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.2.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/electron-to-chromium": {
-      "version": "1.5.267",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
-      "integrity": "sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==",
-      "license": "ISC"
-    },
-    "node_modules/emittery": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.13.1.tgz",
-      "integrity": "sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/emittery?sponsor=1"
-      }
-    },
-    "node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "license": "MIT"
-    },
-    "node_modules/entities": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
-      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
-    "node_modules/error-ex": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
-      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
-      "license": "MIT",
-      "dependencies": {
-        "is-arrayish": "^0.2.1"
-      }
-    },
-    "node_modules/es-define-property": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
-      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-object-atoms": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
-      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-set-tostringtag": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
-      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.6",
-        "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/esbuild": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz",
-      "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.27.2",
-        "@esbuild/android-arm": "0.27.2",
-        "@esbuild/android-arm64": "0.27.2",
-        "@esbuild/android-x64": "0.27.2",
-        "@esbuild/darwin-arm64": "0.27.2",
-        "@esbuild/darwin-x64": "0.27.2",
-        "@esbuild/freebsd-arm64": "0.27.2",
-        "@esbuild/freebsd-x64": "0.27.2",
-        "@esbuild/linux-arm": "0.27.2",
-        "@esbuild/linux-arm64": "0.27.2",
-        "@esbuild/linux-ia32": "0.27.2",
-        "@esbuild/linux-loong64": "0.27.2",
-        "@esbuild/linux-mips64el": "0.27.2",
-        "@esbuild/linux-ppc64": "0.27.2",
-        "@esbuild/linux-riscv64": "0.27.2",
-        "@esbuild/linux-s390x": "0.27.2",
-        "@esbuild/linux-x64": "0.27.2",
-        "@esbuild/netbsd-arm64": "0.27.2",
-        "@esbuild/netbsd-x64": "0.27.2",
-        "@esbuild/openbsd-arm64": "0.27.2",
-        "@esbuild/openbsd-x64": "0.27.2",
-        "@esbuild/openharmony-arm64": "0.27.2",
-        "@esbuild/sunos-x64": "0.27.2",
-        "@esbuild/win32-arm64": "0.27.2",
-        "@esbuild/win32-ia32": "0.27.2",
-        "@esbuild/win32-x64": "0.27.2"
-      }
-    },
-    "node_modules/escalade": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
-      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/escape-string-regexp": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/esprima": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "license": "BSD-2-Clause",
-      "bin": {
-        "esparse": "bin/esparse.js",
-        "esvalidate": "bin/esvalidate.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-      "license": "MIT",
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
-    "node_modules/exit": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
-      "integrity": "sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==",
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/expect": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/expect/-/expect-29.7.0.tgz",
-      "integrity": "sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/expect-utils": "^29.7.0",
-        "jest-get-type": "^29.6.3",
-        "jest-matcher-utils": "^29.7.0",
-        "jest-message-util": "^29.7.0",
-        "jest-util": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/fast-json-stable-stringify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "license": "MIT"
-    },
-    "node_modules/fb-watchman": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz",
-      "integrity": "sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "bser": "2.1.1"
-      }
-    },
-    "node_modules/fill-range": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "license": "MIT",
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "license": "MIT",
-      "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/form-data": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
-      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
-      "license": "MIT",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "es-set-tostringtag": "^2.1.0",
-        "hasown": "^2.0.2",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "license": "ISC"
-    },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/gensync": {
-      "version": "1.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/get-caller-file": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "license": "ISC",
-      "engines": {
-        "node": "6.* || 8.* || >= 10.*"
-      }
-    },
-    "node_modules/get-intrinsic": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
-      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "es-define-property": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.1.1",
-        "function-bind": "^1.1.2",
-        "get-proto": "^1.0.1",
-        "gopd": "^1.2.0",
-        "has-symbols": "^1.1.0",
-        "hasown": "^2.0.2",
-        "math-intrinsics": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-package-type": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
-      "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/get-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
-      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "license": "MIT",
-      "dependencies": {
-        "dunder-proto": "^1.0.1",
-        "es-object-atoms": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
-      "license": "ISC",
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/gopd": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
-      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/graceful-fs": {
-      "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "license": "ISC"
-    },
-    "node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/has-symbols": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
-      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-tostringtag": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
-      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "license": "MIT",
-      "dependencies": {
-        "has-symbols": "^1.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/hasown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "license": "MIT",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/html-encoding-sniffer": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
-      "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
-      "license": "MIT",
-      "dependencies": {
-        "whatwg-encoding": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/html-escaper": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
-      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
-      "license": "MIT"
-    },
-    "node_modules/http-proxy-agent": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
-      "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
-      "license": "MIT",
-      "dependencies": {
-        "@tootallnate/once": "2",
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/https-proxy-agent": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
-      "license": "MIT",
-      "dependencies": {
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=10.17.0"
-      }
-    },
-    "node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/import-local": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
-      "integrity": "sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==",
-      "license": "MIT",
-      "dependencies": {
-        "pkg-dir": "^4.2.0",
-        "resolve-cwd": "^3.0.0"
-      },
-      "bin": {
-        "import-local-fixture": "fixtures/cli.js"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/imurmurhash": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.8.19"
-      }
-    },
-    "node_modules/inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
-      "license": "ISC",
-      "dependencies": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "license": "ISC"
-    },
-    "node_modules/is-arrayish": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "license": "MIT"
-    },
-    "node_modules/is-core-module": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
-      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "license": "MIT",
-      "dependencies": {
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-generator-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
-      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/is-potential-custom-element-name": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
-      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
-      "license": "MIT"
-    },
-    "node_modules/is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "license": "ISC"
-    },
-    "node_modules/istanbul-lib-coverage": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
-      "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/istanbul-lib-instrument": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-6.0.3.tgz",
-      "integrity": "sha512-Vtgk7L/R2JHyyGW07spoFlB8/lpjiOLTjMdms6AFMraYt3BaJauod/NGrfnVG/y4Ix1JEuMRPDPEj2ua+zz1/Q==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "@babel/core": "^7.23.9",
-        "@babel/parser": "^7.23.9",
-        "@istanbuljs/schema": "^0.1.3",
-        "istanbul-lib-coverage": "^3.2.0",
-        "semver": "^7.5.4"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/istanbul-lib-instrument/node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/istanbul-lib-report": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
-      "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "istanbul-lib-coverage": "^3.0.0",
-        "make-dir": "^4.0.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/istanbul-lib-source-maps": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz",
-      "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "debug": "^4.1.1",
-        "istanbul-lib-coverage": "^3.0.0",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/istanbul-reports": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz",
-      "integrity": "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "html-escaper": "^2.0.0",
-        "istanbul-lib-report": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz",
-      "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/core": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "import-local": "^3.0.2",
-        "jest-cli": "^29.7.0"
-      },
-      "bin": {
-        "jest": "bin/jest.js"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      },
-      "peerDependencies": {
-        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
-      },
-      "peerDependenciesMeta": {
-        "node-notifier": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/jest-changed-files": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-29.7.0.tgz",
-      "integrity": "sha512-fEArFiwf1BpQ+4bXSprcDc3/x4HSzL4al2tozwVpDFpsxALjLYdyiIK4e5Vz66GQJIbXJ82+35PtysofptNX2w==",
-      "license": "MIT",
-      "dependencies": {
-        "execa": "^5.0.0",
-        "jest-util": "^29.7.0",
-        "p-limit": "^3.1.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-circus": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-29.7.0.tgz",
-      "integrity": "sha512-3E1nCMgipcTkCocFwM90XXQab9bS+GMsjdpmPrlelaxwD93Ad8iVEjX/vvHPdLPnFf+L40u+5+iutRdA1N9myw==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/environment": "^29.7.0",
-        "@jest/expect": "^29.7.0",
-        "@jest/test-result": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "co": "^4.6.0",
-        "dedent": "^1.0.0",
-        "is-generator-fn": "^2.0.0",
-        "jest-each": "^29.7.0",
-        "jest-matcher-utils": "^29.7.0",
-        "jest-message-util": "^29.7.0",
-        "jest-runtime": "^29.7.0",
-        "jest-snapshot": "^29.7.0",
-        "jest-util": "^29.7.0",
-        "p-limit": "^3.1.0",
-        "pretty-format": "^29.7.0",
-        "pure-rand": "^6.0.0",
-        "slash": "^3.0.0",
-        "stack-utils": "^2.0.3"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-cli": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-29.7.0.tgz",
-      "integrity": "sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/core": "^29.7.0",
-        "@jest/test-result": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "chalk": "^4.0.0",
-        "create-jest": "^29.7.0",
-        "exit": "^0.1.2",
-        "import-local": "^3.0.2",
-        "jest-config": "^29.7.0",
-        "jest-util": "^29.7.0",
-        "jest-validate": "^29.7.0",
-        "yargs": "^17.3.1"
-      },
-      "bin": {
-        "jest": "bin/jest.js"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      },
-      "peerDependencies": {
-        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
-      },
-      "peerDependenciesMeta": {
-        "node-notifier": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/jest-config": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-29.7.0.tgz",
-      "integrity": "sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/core": "^7.11.6",
-        "@jest/test-sequencer": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "babel-jest": "^29.7.0",
-        "chalk": "^4.0.0",
-        "ci-info": "^3.2.0",
-        "deepmerge": "^4.2.2",
-        "glob": "^7.1.3",
-        "graceful-fs": "^4.2.9",
-        "jest-circus": "^29.7.0",
-        "jest-environment-node": "^29.7.0",
-        "jest-get-type": "^29.6.3",
-        "jest-regex-util": "^29.6.3",
-        "jest-resolve": "^29.7.0",
-        "jest-runner": "^29.7.0",
-        "jest-util": "^29.7.0",
-        "jest-validate": "^29.7.0",
-        "micromatch": "^4.0.4",
-        "parse-json": "^5.2.0",
-        "pretty-format": "^29.7.0",
-        "slash": "^3.0.0",
-        "strip-json-comments": "^3.1.1"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      },
-      "peerDependencies": {
-        "@types/node": "*",
-        "ts-node": ">=9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/node": {
-          "optional": true
-        },
-        "ts-node": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/jest-diff": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz",
-      "integrity": "sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==",
-      "license": "MIT",
-      "dependencies": {
-        "chalk": "^4.0.0",
-        "diff-sequences": "^29.6.3",
-        "jest-get-type": "^29.6.3",
-        "pretty-format": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-docblock": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-29.7.0.tgz",
-      "integrity": "sha512-q617Auw3A612guyaFgsbFeYpNP5t2aoUNLwBUbc/0kD1R4t9ixDbyFTHd1nok4epoVFpr7PmeWHrhvuV3XaJ4g==",
-      "license": "MIT",
-      "dependencies": {
-        "detect-newline": "^3.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-each": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-29.7.0.tgz",
-      "integrity": "sha512-gns+Er14+ZrEoC5fhOfYCY1LOHHr0TI+rQUHZS8Ttw2l7gl+80eHc/gFf2Ktkw0+SIACDTeWvpFcv3B04VembQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/types": "^29.6.3",
-        "chalk": "^4.0.0",
-        "jest-get-type": "^29.6.3",
-        "jest-util": "^29.7.0",
-        "pretty-format": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-environment-node": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-29.7.0.tgz",
-      "integrity": "sha512-DOSwCRqXirTOyheM+4d5YZOrWcdu0LNZ87ewUoywbcb2XR4wKgqiG8vNeYwhjFMbEkfju7wx2GYH0P2gevGvFw==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/environment": "^29.7.0",
-        "@jest/fake-timers": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "@types/node": "*",
-        "jest-mock": "^29.7.0",
-        "jest-util": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-get-type": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz",
-      "integrity": "sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==",
-      "license": "MIT",
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-haste-map": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.7.0.tgz",
-      "integrity": "sha512-fP8u2pyfqx0K1rGn1R9pyE0/KTn+G7PxktWidOBTqFPLYX0b9ksaMFkhK5vrS3DVun09pckLdlx90QthlW7AmA==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/types": "^29.6.3",
-        "@types/graceful-fs": "^4.1.3",
-        "@types/node": "*",
-        "anymatch": "^3.0.3",
-        "fb-watchman": "^2.0.0",
-        "graceful-fs": "^4.2.9",
-        "jest-regex-util": "^29.6.3",
-        "jest-util": "^29.7.0",
-        "jest-worker": "^29.7.0",
-        "micromatch": "^4.0.4",
-        "walker": "^1.0.8"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      },
-      "optionalDependencies": {
-        "fsevents": "^2.3.2"
-      }
-    },
-    "node_modules/jest-leak-detector": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-29.7.0.tgz",
-      "integrity": "sha512-kYA8IJcSYtST2BY9I+SMC32nDpBT3J2NvWJx8+JCuCdl/CR1I4EKUJROiP8XtCcxqgTTBGJNdbB1A8XRKbTetw==",
-      "license": "MIT",
-      "dependencies": {
-        "jest-get-type": "^29.6.3",
-        "pretty-format": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-matcher-utils": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz",
-      "integrity": "sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==",
-      "license": "MIT",
-      "dependencies": {
-        "chalk": "^4.0.0",
-        "jest-diff": "^29.7.0",
-        "jest-get-type": "^29.6.3",
-        "pretty-format": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-message-util": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.7.0.tgz",
-      "integrity": "sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.12.13",
-        "@jest/types": "^29.6.3",
-        "@types/stack-utils": "^2.0.0",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.9",
-        "micromatch": "^4.0.4",
-        "pretty-format": "^29.7.0",
-        "slash": "^3.0.0",
-        "stack-utils": "^2.0.3"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-mock": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-29.7.0.tgz",
-      "integrity": "sha512-ITOMZn+UkYS4ZFh83xYAOzWStloNzJFO2s8DWrE4lhtGD+AorgnbkiKERe4wQVBydIGPx059g6riW5Btp6Llnw==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/types": "^29.6.3",
-        "@types/node": "*",
-        "jest-util": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-pnp-resolver": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
-      "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      },
-      "peerDependencies": {
-        "jest-resolve": "*"
-      },
-      "peerDependenciesMeta": {
-        "jest-resolve": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/jest-regex-util": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-29.6.3.tgz",
-      "integrity": "sha512-KJJBsRCyyLNWCNBOvZyRDnAIfUiRJ8v+hOBQYGn8gDyF3UegwiP4gwRR3/SDa42g1YbVycTidUF3rKjyLFDWbg==",
-      "license": "MIT",
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-resolve": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-29.7.0.tgz",
-      "integrity": "sha512-IOVhZSrg+UvVAshDSDtHyFCCBUl/Q3AAJv8iZ6ZjnZ74xzvwuzLXid9IIIPgTnY62SJjfuupMKZsZQRsCvxEgA==",
-      "license": "MIT",
-      "dependencies": {
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.9",
-        "jest-haste-map": "^29.7.0",
-        "jest-pnp-resolver": "^1.2.2",
-        "jest-util": "^29.7.0",
-        "jest-validate": "^29.7.0",
-        "resolve": "^1.20.0",
-        "resolve.exports": "^2.0.0",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-resolve-dependencies": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-29.7.0.tgz",
-      "integrity": "sha512-un0zD/6qxJ+S0et7WxeI3H5XSe9lTBBR7bOHCHXkKR6luG5mwDDlIzVQ0V5cZCuoTgEdcdwzTghYkTWfubi+nA==",
-      "license": "MIT",
-      "dependencies": {
-        "jest-regex-util": "^29.6.3",
-        "jest-snapshot": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-runner": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-29.7.0.tgz",
-      "integrity": "sha512-fsc4N6cPCAahybGBfTRcq5wFR6fpLznMg47sY5aDpsoejOcVYFb07AHuSnR0liMcPTgBsA3ZJL6kFOjPdoNipQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/console": "^29.7.0",
-        "@jest/environment": "^29.7.0",
-        "@jest/test-result": "^29.7.0",
-        "@jest/transform": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "emittery": "^0.13.1",
-        "graceful-fs": "^4.2.9",
-        "jest-docblock": "^29.7.0",
-        "jest-environment-node": "^29.7.0",
-        "jest-haste-map": "^29.7.0",
-        "jest-leak-detector": "^29.7.0",
-        "jest-message-util": "^29.7.0",
-        "jest-resolve": "^29.7.0",
-        "jest-runtime": "^29.7.0",
-        "jest-util": "^29.7.0",
-        "jest-watcher": "^29.7.0",
-        "jest-worker": "^29.7.0",
-        "p-limit": "^3.1.0",
-        "source-map-support": "0.5.13"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-runtime": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-29.7.0.tgz",
-      "integrity": "sha512-gUnLjgwdGqW7B4LvOIkbKs9WGbn+QLqRQQ9juC6HndeDiezIwhDP+mhMwHWCEcfQ5RUXa6OPnFF8BJh5xegwwQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/environment": "^29.7.0",
-        "@jest/fake-timers": "^29.7.0",
-        "@jest/globals": "^29.7.0",
-        "@jest/source-map": "^29.6.3",
-        "@jest/test-result": "^29.7.0",
-        "@jest/transform": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "cjs-module-lexer": "^1.0.0",
-        "collect-v8-coverage": "^1.0.0",
-        "glob": "^7.1.3",
-        "graceful-fs": "^4.2.9",
-        "jest-haste-map": "^29.7.0",
-        "jest-message-util": "^29.7.0",
-        "jest-mock": "^29.7.0",
-        "jest-regex-util": "^29.6.3",
-        "jest-resolve": "^29.7.0",
-        "jest-snapshot": "^29.7.0",
-        "jest-util": "^29.7.0",
-        "slash": "^3.0.0",
-        "strip-bom": "^4.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-snapshot": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-29.7.0.tgz",
-      "integrity": "sha512-Rm0BMWtxBcioHr1/OX5YCP8Uov4riHvKPknOGs804Zg9JGZgmIBkbtlxJC/7Z4msKYVbIJtfU+tKb8xlYNfdkw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/core": "^7.11.6",
-        "@babel/generator": "^7.7.2",
-        "@babel/plugin-syntax-jsx": "^7.7.2",
-        "@babel/plugin-syntax-typescript": "^7.7.2",
-        "@babel/types": "^7.3.3",
-        "@jest/expect-utils": "^29.7.0",
-        "@jest/transform": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "babel-preset-current-node-syntax": "^1.0.0",
-        "chalk": "^4.0.0",
-        "expect": "^29.7.0",
-        "graceful-fs": "^4.2.9",
-        "jest-diff": "^29.7.0",
-        "jest-get-type": "^29.6.3",
-        "jest-matcher-utils": "^29.7.0",
-        "jest-message-util": "^29.7.0",
-        "jest-util": "^29.7.0",
-        "natural-compare": "^1.4.0",
-        "pretty-format": "^29.7.0",
-        "semver": "^7.5.3"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-snapshot/node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/jest-util": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
-      "integrity": "sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/types": "^29.6.3",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "ci-info": "^3.2.0",
-        "graceful-fs": "^4.2.9",
-        "picomatch": "^2.2.3"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-validate": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-29.7.0.tgz",
-      "integrity": "sha512-ZB7wHqaRGVw/9hST/OuFUReG7M8vKeq0/J2egIGLdvjHCmYqGARhzXmtgi+gVeZ5uXFF219aOc3Ls2yLg27tkw==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/types": "^29.6.3",
-        "camelcase": "^6.2.0",
-        "chalk": "^4.0.0",
-        "jest-get-type": "^29.6.3",
-        "leven": "^3.1.0",
-        "pretty-format": "^29.7.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-validate/node_modules/camelcase": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
-      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/jest-watcher": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-29.7.0.tgz",
-      "integrity": "sha512-49Fg7WXkU3Vl2h6LbLtMQ/HyB6rXSIX7SqvBLQmssRBGN9I0PNvPmAmCWSOY6SOvrjhI/F7/bGAv9RtnsPA03g==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/test-result": "^29.7.0",
-        "@jest/types": "^29.6.3",
-        "@types/node": "*",
-        "ansi-escapes": "^4.2.1",
-        "chalk": "^4.0.0",
-        "emittery": "^0.13.1",
-        "jest-util": "^29.7.0",
-        "string-length": "^4.0.1"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-worker": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.7.0.tgz",
-      "integrity": "sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*",
-        "jest-util": "^29.7.0",
-        "merge-stream": "^2.0.0",
-        "supports-color": "^8.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/jest-worker/node_modules/supports-color": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/supports-color?sponsor=1"
-      }
-    },
-    "node_modules/js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "license": "MIT"
-    },
-    "node_modules/js-yaml": {
-      "version": "3.14.2",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz",
-      "integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==",
-      "license": "MIT",
-      "dependencies": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
-    "node_modules/jsdom": {
-      "version": "22.1.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-22.1.0.tgz",
-      "integrity": "sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==",
-      "license": "MIT",
-      "dependencies": {
-        "abab": "^2.0.6",
-        "cssstyle": "^3.0.0",
-        "data-urls": "^4.0.0",
-        "decimal.js": "^10.4.3",
-        "domexception": "^4.0.0",
-        "form-data": "^4.0.0",
-        "html-encoding-sniffer": "^3.0.0",
-        "http-proxy-agent": "^5.0.0",
-        "https-proxy-agent": "^5.0.1",
-        "is-potential-custom-element-name": "^1.0.1",
-        "nwsapi": "^2.2.4",
-        "parse5": "^7.1.2",
-        "rrweb-cssom": "^0.6.0",
-        "saxes": "^6.0.0",
-        "symbol-tree": "^3.2.4",
-        "tough-cookie": "^4.1.2",
-        "w3c-xmlserializer": "^4.0.0",
-        "webidl-conversions": "^7.0.0",
-        "whatwg-encoding": "^2.0.0",
-        "whatwg-mimetype": "^3.0.0",
-        "whatwg-url": "^12.0.1",
-        "ws": "^8.13.0",
-        "xml-name-validator": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=16"
-      },
-      "peerDependencies": {
-        "canvas": "^2.5.0"
-      },
-      "peerDependenciesMeta": {
-        "canvas": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/jsesc": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
-      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-      "license": "MIT",
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/json-parse-even-better-errors": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "license": "MIT"
-    },
-    "node_modules/json5": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "license": "MIT",
-      "bin": {
-        "json5": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/kleur": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
-      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/leven": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
-      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "license": "MIT"
-    },
-    "node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "license": "MIT",
-      "dependencies": {
-        "p-locate": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/make-dir": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
-      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
-      "license": "MIT",
-      "dependencies": {
-        "semver": "^7.5.3"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/make-dir/node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/makeerror": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
-      "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "tmpl": "1.0.5"
-      }
-    },
-    "node_modules/math-intrinsics": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
-      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/merge-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "license": "MIT"
-    },
-    "node_modules/micromatch": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "license": "MIT",
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "license": "MIT",
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mimic-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
-    "node_modules/natural-compare": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
-      "license": "MIT"
-    },
-    "node_modules/node-int64": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
-      "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==",
-      "license": "MIT"
-    },
-    "node_modules/node-releases": {
-      "version": "2.0.27",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
-      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
-      "license": "MIT"
-    },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "license": "MIT",
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/nwsapi": {
-      "version": "2.2.23",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.23.tgz",
-      "integrity": "sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==",
-      "license": "MIT"
-    },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "license": "ISC",
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
-    "node_modules/onetime": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-      "license": "MIT",
-      "dependencies": {
-        "mimic-fn": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/p-limit": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-      "license": "MIT",
-      "dependencies": {
-        "yocto-queue": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "license": "MIT",
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/p-locate/node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "license": "MIT",
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/p-try": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/parse-json": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
-      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "error-ex": "^1.3.1",
-        "json-parse-even-better-errors": "^2.3.0",
-        "lines-and-columns": "^1.1.6"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/parse5": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
-      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
-      "license": "MIT",
-      "dependencies": {
-        "entities": "^6.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/inikulin/parse5?sponsor=1"
-      }
-    },
-    "node_modules/path-exists": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "license": "MIT"
-    },
-    "node_modules/picocolors": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "license": "ISC"
-    },
-    "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/pirates": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
-      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/pkg-dir": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-      "license": "MIT",
-      "dependencies": {
-        "find-up": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pretty-format": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
-      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@jest/schemas": "^29.6.3",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^18.0.0"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
-    "node_modules/pretty-format/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/prompts": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
-      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
-      "license": "MIT",
-      "dependencies": {
-        "kleur": "^3.0.3",
-        "sisteransi": "^1.0.5"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/psl": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
-      "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
-      "license": "MIT",
-      "dependencies": {
-        "punycode": "^2.3.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/lupomontero"
-      }
-    },
-    "node_modules/punycode": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
-      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/pure-rand": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-6.1.0.tgz",
-      "integrity": "sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/dubzzz"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/fast-check"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/querystringify": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
-      "license": "MIT"
-    },
-    "node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "license": "MIT"
-    },
-    "node_modules/require-directory": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/requires-port": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
-      "license": "MIT"
-    },
-    "node_modules/resolve": {
-      "version": "1.22.11",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
-      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
-      "license": "MIT",
-      "dependencies": {
-        "is-core-module": "^2.16.1",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/resolve-cwd": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
-      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
-      "license": "MIT",
-      "dependencies": {
-        "resolve-from": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/resolve-from": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/resolve.exports": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.3.tgz",
-      "integrity": "sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/rrweb-cssom": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
-      "integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==",
-      "license": "MIT"
-    },
-    "node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "license": "MIT"
-    },
-    "node_modules/saxes": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
-      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
-      "license": "ISC",
-      "dependencies": {
-        "xmlchars": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=v12.22.7"
-      }
-    },
-    "node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "license": "MIT",
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/signal-exit": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-      "license": "ISC"
-    },
-    "node_modules/sisteransi": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
-      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
-      "license": "MIT"
-    },
-    "node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/source-map-support": {
-      "version": "0.5.13",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
-      "integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
-      "license": "MIT",
-      "dependencies": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      }
-    },
-    "node_modules/sprintf-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/stack-utils": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
-      "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
-      "license": "MIT",
-      "dependencies": {
-        "escape-string-regexp": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/string-length": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
-      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
-      "license": "MIT",
-      "dependencies": {
-        "char-regex": "^1.0.2",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-bom": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
-      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/strip-json-comments": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
-      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/symbol-tree": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
-      "license": "MIT"
-    },
-    "node_modules/test-exclude": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
-      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
-      "license": "ISC",
-      "dependencies": {
-        "@istanbuljs/schema": "^0.1.2",
-        "glob": "^7.1.4",
-        "minimatch": "^3.0.4"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/tmpl": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
-      "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==",
-      "license": "BSD-3-Clause"
-    },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "license": "MIT",
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
-    "node_modules/tough-cookie": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
-      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "psl": "^1.1.33",
-        "punycode": "^2.1.1",
-        "universalify": "^0.2.0",
-        "url-parse": "^1.5.3"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/tr46": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz",
-      "integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==",
-      "license": "MIT",
-      "dependencies": {
-        "punycode": "^2.3.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/type-detect": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
-      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/type-fest": {
-      "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
-      "license": "(MIT OR CC0-1.0)",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/undici-types": {
-      "version": "7.16.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
-      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
-      "license": "MIT"
-    },
-    "node_modules/universalify": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4.0.0"
-      }
-    },
-    "node_modules/update-browserslist-db": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
-      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "escalade": "^3.2.0",
-        "picocolors": "^1.1.1"
-      },
-      "bin": {
-        "update-browserslist-db": "cli.js"
-      },
-      "peerDependencies": {
-        "browserslist": ">= 4.21.0"
-      }
-    },
-    "node_modules/url-parse": {
-      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
-      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
-      "license": "MIT",
-      "dependencies": {
-        "querystringify": "^2.1.1",
-        "requires-port": "^1.0.0"
-      }
-    },
-    "node_modules/v8-to-istanbul": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.3.0.tgz",
-      "integrity": "sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==",
-      "license": "ISC",
-      "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.12",
-        "@types/istanbul-lib-coverage": "^2.0.1",
-        "convert-source-map": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10.12.0"
-      }
-    },
-    "node_modules/w3c-xmlserializer": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
-      "integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
-      "license": "MIT",
-      "dependencies": {
-        "xml-name-validator": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/walker": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
-      "integrity": "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "makeerror": "1.0.12"
-      }
-    },
-    "node_modules/webidl-conversions": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
-      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/whatwg-encoding": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
-      "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
-      "license": "MIT",
-      "dependencies": {
-        "iconv-lite": "0.6.3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/whatwg-mimetype": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
-      "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/whatwg-url": {
-      "version": "12.0.1",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz",
-      "integrity": "sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==",
-      "license": "MIT",
-      "dependencies": {
-        "tr46": "^4.1.1",
-        "webidl-conversions": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "license": "ISC",
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/wrap-ansi": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "license": "ISC"
-    },
-    "node_modules/write-file-atomic": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.2.tgz",
-      "integrity": "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==",
-      "license": "ISC",
-      "dependencies": {
-        "imurmurhash": "^0.1.4",
-        "signal-exit": "^3.0.7"
-      },
-      "engines": {
-        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
-      }
-    },
-    "node_modules/ws": {
-      "version": "8.18.3",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
-      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/xml-name-validator": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
-      "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/xmlchars": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
-      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
-      "license": "MIT"
-    },
-    "node_modules/y18n": {
-      "version": "5.0.8",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
-      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/yallist": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "license": "ISC"
-    },
-    "node_modules/yargs": {
-      "version": "17.7.2",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
-      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
-      "license": "MIT",
-      "dependencies": {
-        "cliui": "^8.0.1",
-        "escalade": "^3.1.1",
-        "get-caller-file": "^2.0.5",
-        "require-directory": "^2.1.1",
-        "string-width": "^4.2.3",
-        "y18n": "^5.0.5",
-        "yargs-parser": "^21.1.1"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/yargs-parser": {
-      "version": "21.1.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
-      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/yocto-queue": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
-      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    }
-  }
-}
diff --git a/packages/flutterjs_engine/src/vdom/package.json b/packages/flutterjs_engine/src/vdom/package.json
deleted file mode 100644
index 2317348d..00000000
--- a/packages/flutterjs_engine/src/vdom/package.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
-  "name": "@flutterjs/vdom",
-  "version": "1.0.0",
-  "type": "module",
-  "main": "./dist/runtime_index.js",
-  "exports": {
-    "./hydrator": "./dist/hydrator.js",
-    "./patch_applier": "./dist/patch_applier.js",
-    "./context_analyzer": "./dist/context_analyzer.js",
-    "./render_engine": "./dist/render_engine.js",
-    "./runtime_index": "./dist/runtime_index.js",
-    "./ssr_renderer": "./dist/ssr_renderer.js",
-    "./state_binding": "./dist/state_binding.js",
-    "./style_converter": "./dist/style_converter.js",
-    "./update_scheduler": "./dist/update_scheduler.js",
-    "./vnode": "./dist/vnode.js",
-    "./vnode_builder": "./dist/vnode_builder.js",
-    "./vnode_differ": "./dist/vnode_differ.js",
-    "./vnode_renderer": "./dist/vnode_renderer.js"
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "node build.js",
-    "test:vnode": "node ./test/vnode.test.js",
-    "test:renderer": "node ./test/vnode_renderer.test.js",
-    "test:builder": "node ./test/vnode_builder.test.js",
-    "test:hydrator": "node ./test/hydrator.test.js",
-    "test:engine": "node ./test/render_engine.test.js",
-    "test:style": "node ./test/style_converter.test.js",
-    "test:updater": "node ./test/update_scheduler.test.js",
-    "test:runtime": "node ./test/runtime.test.js",
-    "test:state": "node ./test/state_binding.test.js",
-    "test:patch": "node ./test/patch_applier.test.js"
-  },
-  "dependencies": {
-    "jest": "^29.7.0",
-    "jsdom": "^22.1.0",
-    "@flutterjs/runtime":"file:../runtime"
-  },
-  "devDependencies": {
-    "esbuild": "^0.27.2"
-  }
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/vdom/src/patch_applier.js b/packages/flutterjs_engine/src/vdom/src/patch_applier.js
deleted file mode 100644
index 9308724a..00000000
--- a/packages/flutterjs_engine/src/vdom/src/patch_applier.js
+++ /dev/null
@@ -1,674 +0,0 @@
-/**
- * PatchApplier - Simplified & Robust Version
- * Applies VNode patches to actual DOM
- * 
- * Key principles:
- * - Index '0' always means the direct child
- * - Parent is always found from the root
- * - Simple, straightforward logic
- */
-
-export class PatchApplier {
-  /**
-   * Apply patches to DOM
-   * @param {HTMLElement} rootElement - Element to apply patches to
-   * @param {Patch[]} patches - Array of patches
-   * @param {Object} options - Options
-   * @returns {Object} Result
-   */
-  static apply(rootElement, patches, options = {}) {
-    if (!rootElement || !Array.isArray(patches) || patches.length === 0) {
-      return { success: true, patchesApplied: 0, totalPatches: 0 };
-    }
-
-    let patchesApplied = 0;
-    const errors = [];
-
-    try {
-      // Order patches: REMOVE first (reverse order), then others
-      const orderedPatches = this.orderPatches(patches);
-
-      orderedPatches.forEach((patch) => {
-        try {
-          this.applyPatch(rootElement, patch);
-          patchesApplied++;
-        } catch (error) {
-          errors.push(`Patch ${patch.type} at ${patch.index}: ${error.message}`);
-        }
-      });
-
-      return {
-        success: errors.length === 0,
-        patchesApplied,
-        totalPatches: patches.length,
-        errors: errors.length > 0 ? errors : undefined
-      };
-    } catch (error) {
-      return {
-        success: false,
-        patchesApplied,
-        error: error.message
-      };
-    }
-  }
-
-  /**
-   * Order patches for safe application
-   * REMOVE first (deepest first), then CREATE, REPLACE, then all UPDATES
-   */
-  static orderPatches(patches) {
-    const byType = { REMOVE: [], CREATE: [], REPLACE: [], UPDATE: [] };
-
-    patches.forEach(patch => {
-      if (patch.type === 'REMOVE') {
-        byType.REMOVE.push(patch);
-      } else if (patch.type === 'CREATE') {
-        byType.CREATE.push(patch);
-      } else if (patch.type === 'REPLACE') {
-        byType.REPLACE.push(patch);
-      } else {
-        byType.UPDATE.push(patch);
-      }
-    });
-
-    // Sort REMOVE by depth (deepest first, by counting dots)
-    byType.REMOVE.sort((a, b) => {
-      const depthA = String(a.index || '0').split('.').length;
-      const depthB = String(b.index || '0').split('.').length;
-      return depthB - depthA;
-    });
-
-    return [...byType.REMOVE, ...byType.CREATE, ...byType.REPLACE, ...byType.UPDATE];
-  }
-
-  /**
-   * Apply single patch
-   */
-  static applyPatch(rootElement, patch) {
-    const { type, index } = patch;
-
-    switch (type) {
-      case 'CREATE':
-        return this._create(rootElement, patch);
-      case 'REMOVE':
-        return this._remove(rootElement, patch);
-      case 'REPLACE':
-        return this._replace(rootElement, patch);
-      case 'UPDATE_PROPS':
-        return this._updateProps(rootElement, patch);
-      case 'UPDATE_STYLE':
-        return this._updateStyle(rootElement, patch);
-      case 'UPDATE_TEXT':
-        return this._updateText(rootElement, patch);
-      case 'UPDATE_EVENTS':
-        return this._updateEvents(rootElement, patch);
-      default:
-        throw new Error(`Unknown patch type: ${type}`);
-    }
-  }
-
-  /**
-   * Find element by index path
-   * CRITICAL: Index '0' means FIRST CHILD of rootElement, NOT the root itself
-   * Index '0' = first child (rootElement.childNodes[0])
-   * Index '1' = second child (rootElement.childNodes[1])
-   * Index '0.1' = first child's second child
-   * Index '1.0.2' = second child's first child's third child
-   */
-  static _findElement(rootElement, index) {
-    // No index or null/undefined = root element
-    if (!index) {
-      return rootElement;
-    }
-
-    // Parse index path
-    let current = rootElement;
-    const parts = String(index).split('.').map(p => parseInt(p, 10));
-
-    // Navigate through the parts
-    for (const partIndex of parts) {
-      if (!current || !current.childNodes || partIndex >= current.childNodes.length) {
-        console.warn(`_findElement: Cannot navigate to index ${index}, at part ${partIndex}, current has ${current?.childNodes?.length || 0} children`);
-        return null;
-      }
-      current = current.childNodes[partIndex];
-    }
-
-    return current;
-  }
-
-  /**
-   * Get child index from full index path
-   * '0' -> 0
-   * '0.1' -> 1
-   * '0.1.2' -> 2
-   */
-  static _getChildIndex(index) {
-    const str = String(index || '0');
-    const parts = str.split('.');
-    return parseInt(parts[parts.length - 1], 10);
-  }
-
-  /**
-   * Get parent index from full index path
-   * '0' -> null or '' (parent is the root element itself)
-   * '0.1' -> '0' (parent of first child's second child)
-   * '0.1.2' -> '0.1'
-   */
-  static _getParentIndex(index) {
-    const str = String(index || '0');
-    const parts = str.split('.');
-
-    if (parts.length === 1) {
-      // Direct children of root - parent is rootElement itself (return null/empty)
-      return null;
-    }
-
-    parts.pop();
-    return parts.join('.');
-  }
-
-  /**
-   * CREATE - Add new element
-   */
-  static _create(rootElement, patch) {
-    const { index, newNode } = patch;
-
-    if (!newNode) {
-      throw new Error('CREATE patch requires newNode');
-    }
-
-    // Get parent element
-    const parentIndex = this._getParentIndex(index);
-    let parent;
-
-    if (parentIndex === null || parentIndex === '') {
-      // Parent is the root element itself
-      parent = rootElement;
-    } else {
-      parent = this._findElement(rootElement, parentIndex);
-    }
-
-    if (!parent) {
-      throw new Error(`Parent element not found at index ${parentIndex}`);
-    }
-
-    // Create the new DOM element
-    const newElement = this._createDOMNode(newNode);
-    if (!newElement) {
-      throw new Error('Failed to create DOM node');
-    }
-
-    // Get insertion position
-    const childIndex = this._getChildIndex(index);
-
-    // Insert at correct position
-    if (childIndex >= parent.childNodes.length) {
-      parent.appendChild(newElement);
-    } else {
-      parent.insertBefore(newElement, parent.childNodes[childIndex]);
-    }
-
-    return newElement;
-  }
-
-  /**
-   * REMOVE - Delete element
-   */
-  static _remove(rootElement, patch) {
-    const { index } = patch;
-
-    const element = this._findElement(rootElement, index);
-    if (!element) {
-      throw new Error(`Element not found at index ${index}`);
-    }
-
-    // Cleanup before removal
-    this._cleanup(element);
-
-    // Remove from DOM
-    if (element.parentNode) {
-      element.parentNode.removeChild(element);
-    }
-  }
-
-  /**
-   * REPLACE - Replace element entirely
-   */
-  static _replace(rootElement, patch) {
-    const { index, newNode } = patch;
-
-    if (!newNode) {
-      throw new Error('REPLACE patch requires newNode');
-    }
-
-    const element = this._findElement(rootElement, index);
-    if (!element) {
-      throw new Error(`Element not found at index ${index}`);
-    }
-
-    // Root cannot be replaced
-    if (element === rootElement) {
-      throw new Error('Cannot replace root element (no parent)');
-    }
-
-    // Create new element
-    const newElement = this._createDOMNode(newNode);
-    if (!newElement) {
-      throw new Error('Failed to create replacement DOM node');
-    }
-
-    // Cleanup old element
-    this._cleanup(element);
-
-    // Replace in DOM
-    if (element.parentNode) {
-      element.parentNode.replaceChild(newElement, element);
-      return newElement;
-    } else {
-      throw new Error('Element has no parent node');
-    }
-  }
-
-  /**
-   * UPDATE_PROPS - Update HTML attributes
-   */
-  static _updateProps(rootElement, patch) {
-    const { index, value } = patch;
-
-    if (!value || !value.changes) {
-      return;
-    }
-
-    const element = this._findElement(rootElement, index);
-    if (!element) {
-      console.warn(`_updateProps: Element not found at index ${index}`);
-      return;
-    }
-
-    const { changes } = value;
-
-    // Remove properties
-    if (changes.removed) {
-      Object.keys(changes.removed).forEach(key => {
-        this._removeProp(element, key);
-      });
-    }
-
-    // Update properties
-    if (changes.updated) {
-      Object.entries(changes.updated).forEach(([key, val]) => {
-        this._setProp(element, key, val);
-      });
-    }
-
-    // Add properties
-    if (changes.added) {
-      Object.entries(changes.added).forEach(([key, val]) => {
-        this._setProp(element, key, val);
-      });
-    }
-  }
-
-  /**
-   * UPDATE_STYLE - Update CSS styles
-   */
-  static _updateStyle(rootElement, patch) {
-    const { index, value } = patch;
-
-    if (!value || !value.changes) {
-      return;
-    }
-
-    const element = this._findElement(rootElement, index);
-    if (!element) {
-      console.warn(`_updateStyle: Element not found at index ${index}`);
-      return;
-    }
-
-    const { changes } = value;
-
-    // Remove styles
-    if (changes.removed) {
-      Object.keys(changes.removed).forEach(key => {
-        element.style[key] = '';
-      });
-    }
-
-    // Update styles
-    if (changes.updated) {
-      Object.entries(changes.updated).forEach(([key, val]) => {
-        try {
-          element.style[key] = val;
-        } catch (e) {
-          console.warn(`Failed to set style ${key}`);
-        }
-      });
-    }
-
-    // Add styles
-    if (changes.added) {
-      Object.entries(changes.added).forEach(([key, val]) => {
-        try {
-          element.style[key] = val;
-        } catch (e) {
-          console.warn(`Failed to set style ${key}`);
-        }
-      });
-    }
-  }
-
-  /**
-   * UPDATE_TEXT - Update text content
-   */
-  static _updateText(rootElement, patch) {
-    const { index, value } = patch;
-
-    const element = this._findElement(rootElement, index);
-    if (!element) {
-      console.warn(`_updateText: Element not found at index ${index}`);
-      return;
-    }
-
-    // Handle text nodes
-    if (element.nodeType === 3) { // TEXT_NODE
-      element.nodeValue = String(value !== undefined ? value : '');
-    } else {
-      element.textContent = String(value !== undefined ? value : '');
-    }
-  }
-
-  /**
-   * UPDATE_EVENTS - Update event listeners
-   */
-  static _updateEvents(rootElement, patch) {
-    const { index, value } = patch;
-
-    if (!value || !value.changes) {
-      return;
-    }
-
-    const element = this._findElement(rootElement, index);
-    if (!element) {
-      console.warn(`_updateEvents: Element not found at index ${index}`);
-      return;
-    }
-
-    const { changes } = value;
-
-    // Remove events
-    if (changes.removed) {
-      Object.keys(changes.removed).forEach(eventName => {
-        this._removeEventListener(element, eventName);
-      });
-    }
-
-    // Update events
-    if (changes.updated) {
-      Object.entries(changes.updated).forEach(([eventName, handler]) => {
-        this._removeEventListener(element, eventName);
-        if (handler) {
-          this._addEventListener(element, eventName, handler);
-        }
-      });
-    }
-
-    // Add events
-    if (changes.added) {
-      Object.entries(changes.added).forEach(([eventName, handler]) => {
-        if (handler) {
-          this._addEventListener(element, eventName, handler);
-        }
-      });
-    }
-  }
-
-  /**
-   * Create a DOM node from VNode
-   */
-  static _createDOMNode(vnode) {
-    // Text node
-    if (typeof vnode === 'string') {
-      return document.createTextNode(vnode);
-    }
-
-    if (!vnode || typeof vnode !== 'object') {
-      return document.createTextNode('');
-    }
-
-    // Element node
-    const tag = vnode.tag || 'div';
-    const element = document.createElement(tag);
-
-    // ✅ CRITICAL: Link VNode to Element
-    vnode._element = element;
-    element._vnode = vnode;
-
-    // Apply properties
-    if (vnode.props && typeof vnode.props === 'object') {
-      Object.entries(vnode.props).forEach(([key, val]) => {
-        this._setProp(element, key, val);
-      });
-    }
-
-    // Apply styles
-    if (vnode.style && typeof vnode.style === 'object') {
-      Object.entries(vnode.style).forEach(([key, val]) => {
-        try {
-          element.style[key] = val;
-        } catch (e) {
-          // Ignore style errors
-        }
-      });
-    }
-
-    // Add children
-    if (vnode.children && Array.isArray(vnode.children)) {
-      vnode.children.forEach(child => {
-        const childNode = this._createDOMNode(child);
-        if (childNode) {
-          element.appendChild(childNode);
-        }
-      });
-    }
-
-    // Attach event handlers
-    if (vnode.events && typeof vnode.events === 'object') {
-      Object.entries(vnode.events).forEach(([eventName, handler]) => {
-        if (typeof handler === 'function') {
-          this._addEventListener(element, eventName, handler);
-        }
-      });
-    }
-
-    return element;
-  }
-
-  /**
-   * Set a property on element
-   */
-  static _setProp(element, key, value) {
-    if (value === null || value === undefined) {
-      this._removeProp(element, key);
-      return;
-    }
-
-    // className
-    if (key === 'className') {
-      element.className = String(value);
-      return;
-    }
-
-    // value (for inputs, textareas)
-    if (key === 'value') {
-      if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
-        element.value = String(value);
-      }
-      return;
-    }
-
-    // checked, disabled, selected (booleans)
-    if (key === 'checked' || key === 'disabled' || key === 'selected') {
-      element[key] = !!value;
-      return;
-    }
-
-    // data-* and aria-* attributes
-    if (key.startsWith('data-') || key.startsWith('aria-')) {
-      element.setAttribute(key, String(value));
-      return;
-    }
-
-    // Try to set as property first
-    try {
-      if (key in element) {
-        element[key] = value;
-      } else {
-        element.setAttribute(key, String(value));
-      }
-    } catch (e) {
-      try {
-        element.setAttribute(key, String(value));
-      } catch (e2) {
-        // Fail silently
-      }
-    }
-  }
-
-  /**
-   * Remove a property from element
-   */
-  static _removeProp(element, key) {
-    if (key === 'className') {
-      element.className = '';
-      return;
-    }
-
-    if (key === 'value') {
-      if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
-        element.value = '';
-      }
-      return;
-    }
-
-    if (key === 'checked' || key === 'disabled' || key === 'selected') {
-      element[key] = false;
-      return;
-    }
-
-    try {
-      element.removeAttribute(key);
-    } catch (e) {
-      // Fail silently
-    }
-  }
-
-  /**
-   * Add event listener to element
-   */
-  static _addEventListener(element, eventName, handler) {
-    if (typeof handler !== 'function') {
-      return;
-    }
-
-    try {
-      // Normalize event name: onClick -> click, onMouseover -> mouseover
-      const normalizedName = eventName
-        .replace(/^on/, '')
-        .toLowerCase();
-
-      // Store reference for later removal
-      if (!element._eventListeners) {
-        element._eventListeners = {};
-      }
-
-      element.addEventListener(normalizedName, handler);
-      element._eventListeners[normalizedName] = handler;
-    } catch (e) {
-      console.warn(`Failed to add event listener ${eventName}`);
-    }
-  }
-
-  /**
-   * Remove event listener from element
-   */
-  static _removeEventListener(element, eventName) {
-    try {
-      const normalizedName = eventName
-        .replace(/^on/, '')
-        .toLowerCase();
-
-      if (element._eventListeners && element._eventListeners[normalizedName]) {
-        element.removeEventListener(normalizedName, element._eventListeners[normalizedName]);
-        delete element._eventListeners[normalizedName];
-      }
-    } catch (e) {
-      console.warn(`Failed to remove event listener ${eventName}`);
-    }
-  }
-
-  /**
-   * Cleanup element before removal
-   */
-  static _cleanup(element) {
-    if (!element) return;
-
-    // Remove all event listeners
-    if (element._eventListeners) {
-      Object.entries(element._eventListeners).forEach(([name, handler]) => {
-        try {
-          element.removeEventListener(name, handler);
-        } catch (e) {
-          // Fail silently
-        }
-      });
-      element._eventListeners = {};
-    }
-
-    // Recursively cleanup children
-    if (element.childNodes) {
-      for (let i = 0; i < element.childNodes.length; i++) {
-        this._cleanup(element.childNodes[i]);
-      }
-    }
-  }
-
-  /**
-   * Validate patches
-   */
-  static validate(patches) {
-    const errors = [];
-    const validTypes = ['CREATE', 'REMOVE', 'REPLACE', 'UPDATE_PROPS', 'UPDATE_STYLE', 'UPDATE_TEXT', 'UPDATE_EVENTS'];
-
-    if (!Array.isArray(patches)) {
-      errors.push('Patches must be an array');
-      return errors;
-    }
-
-    patches.forEach((patch, i) => {
-      if (!patch.type) {
-        errors.push(`Patch ${i}: Missing type`);
-        return;
-      }
-
-      if (!validTypes.includes(patch.type)) {
-        errors.push(`Patch ${i}: Invalid type "${patch.type}"`);
-      }
-    });
-
-    return errors;
-  }
-
-  /**
-   * Get statistics about patches
-   */
-  static getStats(patches) {
-    const stats = { total: patches.length, byType: {} };
-
-    patches.forEach(p => {
-      stats.byType[p.type] = (stats.byType[p.type] || 0) + 1;
-    });
-
-    return stats;
-  }
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/vdom/src/runtime_index.js b/packages/flutterjs_engine/src/vdom/src/runtime_index.js
deleted file mode 100644
index b6b1e1fe..00000000
--- a/packages/flutterjs_engine/src/vdom/src/runtime_index.js
+++ /dev/null
@@ -1,724 +0,0 @@
-/**
- * FlutterJS Runtime - Complete Integration Layer
- * 
- * FIXED: All 3 VNodeRenderer.render() calls now properly instantiate the class
- */
-
-import { VNode } from './vnode.js';
-import { VNodeBuilder } from './vnode_builder.js';
-import { StyleConverter } from './style_converter.js';
-import { VNodeRenderer } from './vnode_renderer.js';
-import { SSRRenderer } from './ssr_renderer.js';
-import { RenderEngine } from './render_engine.js';
-import { Hydrator } from './hydrator.js';
-
-export class VNodeRuntime {
-  constructor() {
-    this.app = null;
-    this.rootElement = null;
-    this.rootVNode = null;
-    this.isHydrated = false;
-    this.hotReloadEnabled = false;
-    this.renderer = null;  // ✅ ADD: Store renderer instance
-    this.stateRegistry = new Map();
-    this.performanceMetrics = {
-      initialRender: 0,
-      updates: 0,
-      totalRenderTime: 0,
-      averageRenderTime: 0
-    };
-  }
-
-  clearMetrics() {
-    this.performanceMetrics = {
-      initialRender: 0,
-      updates: 0,
-      totalRenderTime: 0,
-      averageRenderTime: 0
-    };
-  }
-
-  /**
-   * Start the application
-   * @param {Widget} app - Root widget
-   * @param {Object} options - Runtime options
-   */
-  runApp(app, options = {}) {
-    const {
-      target = '#root',
-      mode = 'auto', // 'csr', 'ssr', 'auto'
-      enableHotReload = false,
-      enablePerformanceTracking = true,
-      onError = null
-    } = options;
-
-    try {
-      console.log(`  [RUNTIME] runApp called with target: ${target}`);
-      this.app = app;
-      this.hotReloadEnabled = enableHotReload;
-
-      // Get target element
-      this.rootElement = this.getTargetElement(target);
-      console.log(`  [RUNTIME] Target element found`);
-
-      // ✅ CREATE RENDERER INSTANCE HERE
-      this.renderer = new VNodeRenderer({ debugMode: true });
-      console.log(`  [RUNTIME] VNodeRenderer instance created`);
-
-      // Check if SSR content exists
-      const hasSSRContent = this.hasSSRContent(this.rootElement);
-      console.log(`  [RUNTIME] Has SSR content: ${hasSSRContent}`);
-
-      if (hasSSRContent) {
-        // Hydration mode
-        console.log(`  [RUNTIME] Entering hydration mode`);
-        this.hydrateApp(app, options);
-      } else {
-        // Client-side render mode
-        console.log(`  [RUNTIME] Entering CSR mode`);
-        this.renderApp(app, options);
-      }
-
-      // Setup hot reload if enabled
-      if (enableHotReload) {
-        console.log(`  [RUNTIME] Setting up hot reload`);
-        this.setupHotReload();
-      }
-
-      // Track performance
-      if (enablePerformanceTracking) {
-        console.log(`  [RUNTIME] Starting performance tracking`);
-        this.startPerformanceTracking();
-      }
-
-      return this;
-    } catch (error) {
-      if (onError) {
-        onError(error);
-      } else {
-        console.error('FlutterJS Runtime Error:', error);
-      }
-      throw error;
-    }
-  }
-
-  /**
-   * Client-side render the app
-   * @private
-   */
-  renderApp(app, options = {}) {
-    console.log(`  [RENDERAPP] Starting client-side render`);
-    const startTime = performance.now();
-
-    // Build widget tree
-    const context = this.createBuildContext(options);
-    console.log(`  [RENDERAPP] Build context created`);
-
-    const widgetTree = app.build ? app.build(context) : app;
-    console.log(`  [RENDERAPP] Widget tree built`);
-    console.log(`  [RENDERAPP] Widget tree:`, JSON.stringify(widgetTree, null, 2).substring(0, 200));
-
-    // Convert to VNode
-    const vNodeBuilder = new VNodeBuilder({
-      debugMode: this.flutterConfig?.debugMode || false,
-      runtime: this  // ← CRITICAL: Pass runtime
-    });
-    this.rootVNode = vNodeBuilder.build(widgetTree, context,);
-    console.log(`  [RENDERAPP] VNode created`);
-    console.log(`  [RENDERAPP] VNode tag: ${this.rootVNode.tag}`);
-    console.log(`  [RENDERAPP] VNode children count: ${this.rootVNode.children ? this.rootVNode.children.length : 0}`);
-    console.log(`  [RENDERAPP] VNode props:`, this.rootVNode.props);
-    console.log(`  [RENDERAPP] Full VNode:`, JSON.stringify(this.rootVNode, null, 2).substring(0, 300));
-
-    // Render to DOM
-    console.log(`  [RENDERAPP] Root element before render:`, this.rootElement.innerHTML.substring(0, 100));
-    console.log(`  [RENDERAPP] Root element classes:`, this.rootElement.className);
-
-    // ✅ FIX #1: Use instance instead of static call
-    if (!this.renderer) {
-      this.renderer = new VNodeRenderer({ debugMode: true });
-    }
-
-    this.renderer.render(this.rootVNode, this.rootElement, {
-      clear: true
-    });
-    console.log(`  [RENDERAPP] Rendered to DOM`);
-
-    console.log(`  [RENDERAPP] Root element after render:`, this.rootElement.innerHTML.substring(0, 200));
-    console.log(`  [RENDERAPP] Root element child count:`, this.rootElement.children.length);
-    console.log(`  [RENDERAPP] Root element children:`, Array.from(this.rootElement.children).map(c => ({ tag: c.tagName, class: c.className, text: c.textContent.substring(0, 50) })));
-
-    const endTime = performance.now();
-    this.performanceMetrics.initialRender = endTime - startTime;
-
-    console.log(`✓ App rendered in ${this.performanceMetrics.initialRender.toFixed(2)}ms`);
-  }
-
-  /**
-   * Hydrate server-rendered app
-   * @private
-   */
-  hydrateApp(app, options = {}) {
-    console.log(`  [HYDRATEAPP] Starting hydration`);
-    const startTime = performance.now();
-
-    // Build widget tree
-    const context = this.createBuildContext(options);
-    console.log(`  [HYDRATEAPP] Build context created`);
-
-    const widgetTree = app.build ? app.build(context) : app;
-    console.log(`  [HYDRATEAPP] Widget tree built`);
-    const vNodeBuilder = new VNodeBuilder({
-      debugMode: this.flutterConfig?.debugMode || false,
-      runtime: this  // ← CRITICAL: Pass runtime
-    });
-    // Convert to VNode
-    this.rootVNode = vNodeBuilder.build(widgetTree, context);
-    console.log(`  [HYDRATEAPP] VNode created`);
-
-    // Hydrate
-    const hydrationData = Hydrator.loadHydrationData();
-    console.log(`  [HYDRATEAPP] Hydration data loaded`);
-
-    Hydrator.hydrate(this.rootElement, this.rootVNode, hydrationData);
-    console.log(`  [HYDRATEAPP] Hydration complete`);
-
-    this.isHydrated = true;
-
-    const endTime = performance.now();
-    this.performanceMetrics.initialRender = endTime - startTime;
-
-    console.log(`✓ App hydrated in ${this.performanceMetrics.initialRender.toFixed(2)}ms`);
-  }
-
-  /**
-   * Update the application (e.g., after state change)
-   * @param {Function} updateFn - Function that updates state
-   */
-  update(updateFn) {
-    console.log(`  [UPDATE] Update called`);
-
-    if (!this.app || !this.rootElement) {
-      console.log(`  [UPDATE] ERROR: App not initialized`);
-      throw new Error('App not initialized. Call runApp() first.');
-    }
-
-    const startTime = performance.now();
-
-    // Execute update function
-    if (updateFn) {
-      console.log(`  [UPDATE] Executing update function`);
-      updateFn();
-    }
-
-    // Rebuild widget tree
-    const context = this.createBuildContext();
-    console.log(`  [UPDATE] Build context created`);
-
-    const widgetTree = this.app.build ? this.app.build(context) : this.app;
-    console.log(`  [UPDATE] Widget tree rebuilt`);
-
-    const vNodeBuilder = new VNodeBuilder({
-      debugMode: this.flutterConfig?.debugMode || false,
-      runtime: this  // ← CRITICAL: Pass runtime
-    });
-
-    // Convert to VNode
-    const newVNode = vNodeBuilder.build(widgetTree, context);
-    console.log(`  [UPDATE] New VNode created`);
-
-    // ✅ FIX #2 & #3: Use instance instead of static calls
-    if (!this.renderer) {
-      this.renderer = new VNodeRenderer({ debugMode: true });
-    }
-
-    this.renderer.render(newVNode, this.rootElement, { clear: true });
-
-    this.rootVNode = newVNode;
-
-    const endTime = performance.now();
-    const renderTime = endTime - startTime;
-
-    // Ensure at least 0.01ms is recorded if time was measured
-    const recordedTime = renderTime > 0 ? renderTime : 0.01;
-
-    this.performanceMetrics.updates++;
-    this.performanceMetrics.totalRenderTime += recordedTime;
-    this.performanceMetrics.averageRenderTime =
-      this.performanceMetrics.totalRenderTime / this.performanceMetrics.updates;
-
-    console.log(`  [UPDATE] Update metrics: updates=${this.performanceMetrics.updates}, renderTime=${renderTime.toFixed(2)}ms`);
-
-    if (this.hotReloadEnabled) {
-      console.log(`♻ Updated in ${renderTime.toFixed(2)}ms`);
-    }
-  }
-
-  /**
-   * Register a stateful widget
-   * @param {string} widgetId - Unique widget identifier
-   * @param {Object} stateObject - State object with setState method
-   */
-  registerState(widgetId, stateObject) {
-    console.log(`  [REGISTRY] Registering state for ${widgetId}`);
-    this.stateRegistry.set(widgetId, stateObject);
-
-    // Wrap setState to trigger runtime update
-    const originalSetState = stateObject.setState.bind(stateObject);
-    stateObject.setState = (updater) => {
-      console.log(`  [REGISTRY] setState called for ${widgetId}`);
-      originalSetState(updater);
-      this.update();
-    };
-  }
-
-  /**
-   * Unregister a stateful widget
-   * @param {string} widgetId - Widget identifier
-   */
-  unregisterState(widgetId) {
-    console.log(`  [REGISTRY] Unregistering state for ${widgetId}`);
-    this.stateRegistry.delete(widgetId);
-  }
-
-  /**
-   * Get state object by widget ID
-   * @param {string} widgetId - Widget identifier
-   * @returns {Object|null} State object
-   */
-  getState(widgetId) {
-    console.log(`  [REGISTRY] Getting state for ${widgetId}`);
-    return this.stateRegistry.get(widgetId) || null;
-  }
-
-  /**
-   * Hot reload the application
-   */
-  hotReload() {
-    console.log(`  [HOTRELOAD] hotReload called`);
-
-    if (!this.hotReloadEnabled) {
-      console.warn('Hot reload is not enabled');
-      return;
-    }
-
-    console.log('🔥 Hot reloading...');
-
-    if (!this.app || !this.rootElement) {
-      console.warn('No app running. Cannot hot reload.');
-      return;
-    }
-
-    this.update();
-  }
-
-  /**
-   * Create build context
-   * @private
-   */
-  createBuildContext(options = {}) {
-    console.log(`  [CONTEXT] Creating build context`);
-
-    return {
-      runtime: this,
-      mediaQuery: this.getMediaQuery(),
-      theme: options.theme || this.getDefaultTheme(),
-      navigator: this.createNavigator(),
-      ...options.context
-    };
-  }
-
-  /**
-   * Get media query information
-   * @private
-   */
-  getMediaQuery() {
-    if (typeof window === 'undefined') {
-      console.log(`  [MEDIAQUERY] Server-side - returning default`);
-      return {
-        width: 1920,
-        height: 1080,
-        devicePixelRatio: 1
-      };
-    }
-
-    const mq = {
-      width: window.innerWidth,
-      height: window.innerHeight,
-      devicePixelRatio: window.devicePixelRatio || 1,
-      orientation: window.innerWidth > window.innerHeight ? 'landscape' : 'portrait'
-    };
-
-    console.log(`  [MEDIAQUERY] Client-side:`, mq);
-    return mq;
-  }
-
-  /**
-   * Get default Material Design theme
-   * @private
-   */
-  getDefaultTheme() {
-    console.log(`  [THEME] Creating default Material Design theme`);
-
-    return {
-      primaryColor: '#6750a4',
-      onPrimary: '#ffffff',
-      primaryContainer: '#eaddff',
-      onPrimaryContainer: '#21005e',
-      surface: '#fffbfe',
-      onSurface: '#1c1b1f',
-      outline: '#79747e',
-      outlineVariant: '#cac7cf'
-    };
-  }
-
-  /**
-   * Create navigator for routing
-   * @private
-   */
-  createNavigator() {
-    console.log(`  [NAVIGATOR] Creating navigator`);
-
-    return {
-      push: (route) => {
-        console.log('Navigation not yet implemented:', route);
-      },
-      pop: () => {
-        console.log('Navigation not yet implemented');
-      }
-    };
-  }
-
-  /**
-   * Get target element
-   * @private
-   */
-  getTargetElement(target) {
-    console.log(`  [TARGET] Getting target element: ${target}`);
-
-    if (typeof target === 'string') {
-      const element = document.querySelector(target);
-      if (!element) {
-        console.log(`  [TARGET] ERROR: Element not found for selector: ${target}`);
-        throw new Error(`Target element "${target}" not found`);
-      }
-      console.log(`  [TARGET] Found element by selector`);
-      return element;
-    }
-
-    if (target instanceof HTMLElement) {
-      console.log(`  [TARGET] Using HTMLElement target`);
-      return target;
-    }
-
-    console.log(`  [TARGET] ERROR: Invalid target type`);
-    throw new Error('Invalid target: must be a selector string or HTMLElement');
-  }
-
-  /**
-   * Check if element has SSR content
-   * @private
-   */
-  hasSSRContent(element) {
-    console.log(`  [SSRCHECK] Checking for SSR content`);
-
-    // Check for hydration data script
-    const hydrationScript = document.getElementById('__FLUTTERJS_HYDRATION_DATA__');
-
-    // Check if element has children (SSR content)
-    const hasContent = hydrationScript && element.children.length > 0;
-    console.log(`  [SSRCHECK] Hydration script found: ${hydrationScript !== null}, Element has children: ${element.children.length > 0}`);
-
-    return hasContent;
-  }
-
-  /**
-   * Setup hot reload listener
-   * @private
-   */
-  setupHotReload() {
-    if (typeof window === 'undefined') {
-      console.log(`  [HOTRELOAD] Server-side environment, skipping`);
-      return;
-    }
-
-    console.log(`  [HOTRELOAD] Setting up hot reload listeners`);
-
-    // Listen for custom hot reload event
-    window.addEventListener('flutterjs:hotreload', () => {
-      console.log(`  [HOTRELOAD] Received hot reload event`);
-      this.hotReload();
-    });
-
-    // Expose hot reload globally
-    window.__flutterjs_hot_reload = () => {
-      console.log(`  [HOTRELOAD] Called via global function`);
-      this.hotReload();
-    };
-
-    console.log('🔥 Hot reload enabled');
-  }
-
-  /**
-   * Start performance tracking
-   * @private
-   */
-  startPerformanceTracking() {
-    if (typeof window === 'undefined') {
-      console.log(`  [PERFTRACK] Server-side environment, skipping`);
-      return;
-    }
-
-    console.log(`  [PERFTRACK] Starting FPS tracking`);
-
-    // Track FPS
-    let lastTime = performance.now();
-    let frames = 0;
-
-    const trackFPS = () => {
-      frames++;
-      const currentTime = performance.now();
-
-      if (currentTime >= lastTime + 1000) {
-        const fps = Math.round((frames * 1000) / (currentTime - lastTime));
-        this.performanceMetrics.fps = fps;
-        console.log(`  [PERFTRACK] FPS: ${fps}`);
-        frames = 0;
-        lastTime = currentTime;
-      }
-
-      requestAnimationFrame(trackFPS);
-    };
-
-    requestAnimationFrame(trackFPS);
-  }
-
-  /**
-   * Get performance metrics
-   * @returns {Object} Performance metrics
-   */
-  getMetrics() {
-    console.log(`  [METRICS] Getting metrics - app exists: ${this.app !== null}`);
-
-    if (!this.app) {
-      console.log(`  [METRICS] No app, returning null`);
-      return null;
-    }
-
-    const metrics = {
-      ...this.performanceMetrics,
-      isHydrated: this.isHydrated,
-      stateCount: this.stateRegistry.size,
-      vnodeStats: this.rootVNode ? RenderEngine.getStats(this.rootVNode) : null
-    };
-
-    console.log(`  [METRICS] Returning metrics:`, metrics);
-    return metrics;
-  }
-
-  /**
-   * Destroy the runtime and cleanup
-   */
-  destroy() {
-    console.log(`  [DESTROY] Destroying runtime`);
-
-    // Cleanup event listeners
-    if (this.rootElement && this.renderer) {
-      console.log(`  [DESTROY] Cleaning up event listeners`);
-      this.renderer.cleanupEventListeners(this.rootElement);
-    }
-
-    // Clear state registry
-    console.log(`  [DESTROY] Clearing state registry (size: ${this.stateRegistry.size})`);
-    this.stateRegistry.clear();
-
-    // Remove hot reload listener
-    if (typeof window !== 'undefined') {
-      console.log(`  [DESTROY] Removing hot reload listener`);
-      window.removeEventListener('flutterjs:hotreload', this.hotReload);
-      delete window.__flutterjs_hot_reload;
-    }
-
-    // Clear references
-    this.app = null;
-    this.rootElement = null;
-    this.rootVNode = null;
-    this.renderer = null;
-
-    console.log('✓ Runtime destroyed');
-  }
-}
-
-// ============================================================================
-// Global API
-// ============================================================================
-
-let globalRuntime = null;
-
-/**
- * Start FlutterJS application
- * @param {Widget} app - Root widget
- * @param {Object} options - Runtime options
- */
-export function runApp(app, options = {}) {
-  console.log(`[GLOBAL] runApp called`);
-
-  if (!globalRuntime) {
-    console.log(`[GLOBAL] Creating new global runtime`);
-    globalRuntime = new VNodeRuntime();
-  }
-  return globalRuntime.runApp(app, options);
-}
-
-/**
- * Get the global runtime instance
- * @returns {VNodeRuntime} Runtime instance
- */
-export function getRuntime() {
-  console.log(`[GLOBAL] getRuntime called, exists: ${globalRuntime !== null}`);
-  return globalRuntime;
-}
-
-/**
- * Update the application
- * @param {Function} updateFn - Update function
- */
-export function updateApp(updateFn) {
-  console.log(`[GLOBAL] updateApp called`);
-
-  if (!globalRuntime) {
-    console.log(`[GLOBAL] ERROR: No runtime`);
-    throw new Error('No app running. Call runApp() first.');
-  }
-  globalRuntime.update(updateFn);
-}
-
-/**
- * Get performance metrics
- * @returns {Object} Metrics
- */
-export function getMetrics() {
-  console.log(`[GLOBAL] getMetrics called`);
-
-  if (!globalRuntime) {
-    console.log(`[GLOBAL] No runtime, returning null`);
-    return null;
-  }
-  return globalRuntime.getMetrics();
-}
-
-/**
- * Trigger hot reload
- */
-export function hotReload() {
-  console.log(`[GLOBAL] hotReload called`);
-
-  if (!globalRuntime) {
-    console.warn('No app running');
-    return;
-  }
-  globalRuntime.hotReload();
-}
-
-/**
- * Server-side render to HTML
- * @param {Widget} app - Root widget
- * @param {Object} options - SSR options
- * @returns {string} HTML string
- */
-export function renderToString(app, options = {}) {
-  console.log(`[GLOBAL] renderToString called`);
-
-  const context = {
-    mediaQuery: { width: 1920, height: 1080, devicePixelRatio: 1 },
-    theme: options.theme || {},
-    ...options.context
-  };
-
-  console.log(`[GLOBAL] SSR: Creating build context`);
-  const widgetTree = app.build ? app.build(context) : app;
-
-  console.log(`[GLOBAL] SSR: Building VNode`);
-  // ✅ Create instance with runtime
-  const vNodeBuilder = new VNodeBuilder({
-    debugMode: this.flutterConfig?.debugMode || false,
-    runtime: this  // ← CRITICAL: Pass runtime
-  });
-  this.rootVNode = vNodeBuilder.build(widgetTree, context);
-  console.log(`[GLOBAL] SSR: Rendering to string`);
-  return RenderEngine.renderServer(vnode, {
-    title: options.title || 'FlutterJS App',
-    meta: options.meta || {},
-    styles: options.styles || [],
-    scripts: options.scripts || [],
-    includeHydration: options.includeHydration !== false,
-    includeCriticalCSS: options.includeCriticalCSS !== false,
-    includeRuntime: options.includeRuntime !== false
-  });
-}
-
-/**
- * Hydrate server-rendered content
- * @param {Widget} app - Root widget
- * @param {Object} options - Hydration options
- */
-export function hydrate(app, options = {}) {
-  console.log(`[GLOBAL] hydrate called`);
-
-  if (!globalRuntime) {
-    console.log(`[GLOBAL] Creating new global runtime for hydration`);
-    globalRuntime = new VNodeRuntime();
-  }
-
-  const target = options.target || '#root';
-  console.log(`[GLOBAL] Getting target: ${target}`);
-
-  const rootElement = typeof target === 'string'
-    ? document.querySelector(target)
-    : target;
-
-  if (!rootElement) {
-    console.log(`[GLOBAL] ERROR: Target not found`);
-    throw new Error(`Target element "${target}" not found`);
-  }
-
-  console.log(`[GLOBAL] Setting up hydration`);
-  globalRuntime.rootElement = rootElement;
-  globalRuntime.app = app;
-  globalRuntime.hydrateApp(app, options);
-
-  return globalRuntime;
-}
-
-// Default export
-export default {
-  runApp,
-  getRuntime,
-  updateApp,
-  getMetrics,
-  hotReload,
-  renderToString,
-  hydrate,
-
-  VNodeRuntime
-};
-
-// Browser global
-if (typeof window !== 'undefined') {
-  console.log(`[GLOBAL] Setting up window.FlutterJS`);
-  window.FlutterJS = {
-    runApp,
-    getRuntime,
-    updateApp,
-    getMetrics,
-    hotReload,
-    renderToString,
-    hydrate
-  };
-  console.log(`[GLOBAL] window.FlutterJS ready`);
-}
-
-export function clearMetrics() {
-  if (!globalRuntime) return;
-  globalRuntime.clearMetrics();
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/vdom/src/vnode.js b/packages/flutterjs_engine/src/vdom/src/vnode.js
deleted file mode 100644
index c9b5c0da..00000000
--- a/packages/flutterjs_engine/src/vdom/src/vnode.js
+++ /dev/null
@@ -1,490 +0,0 @@
-/**
- * VNode - Virtual DOM Node Implementation
- * 
- * Represents a virtual DOM node that can:
- * 1. Handle any Flutter widget type
- * 2. Serialize to HTML string (SSR)
- * 3. Convert to actual DOM element (CSR)
- * 4. Support hydration (SSR -> CSR transition)
- * 5. Track state bindings
- * 6. Manage event handlers
- */
-
-class VNode {
-  /**
-   * @param {Object} config - VNode configuration
-   * @param {string} config.tag - HTML tag name (div, span, button, etc.)
-   * @param {Object} config.props - HTML attributes {className, id, data-*, etc.}
-   * @param {Object} config.style - CSS styles {color, padding, display, etc.}
-   * @param {Array} config.children - Child VNodes or text strings
-   * @param {string|number} config.key - Unique key for list reconciliation
-   * @param {Function} config.ref - Callback when DOM element is created
-   * @param {Object} config.events - Event handlers {click, change, input, etc.}
-   * @param {string} config.statefulWidgetId - ID of owning StatefulWidget
-   * @param {string} config.stateProperty - State property this node displays
-   * @param {boolean} config.isStateBinding - Whether this depends on state
-   * @param {Function} config.updateFn - Callback on state change
-   * @param {Object} config.metadata - Additional widget metadata
-   */
-  constructor({
-    tag = 'div',
-    props = {},
-    style = {},
-    children = [],
-    key = null,
-    ref = null,
-    events = {},
-    statefulWidgetId = null,
-    stateProperty = null,
-    isStateBinding = false,
-    updateFn = null,
-    metadata = {}
-  } = {}) {
-    this.tag = tag;
-    this.props = props || {};
-    this.props = props || {};
-    this.style = style || {};
-    this.events = events || {};
-
-    // ✅ FIX: Extract props.style into this.style for backward compatibility
-    // Some widgets incorrectly pass styles inside props.style instead of style
-    if (this.props && this.props.style && typeof this.props.style === 'object') {
-      // Merge props.style into this.style (props.style takes precedence for conflicts)
-      this.style = { ...this.style, ...this.props.style };
-      // Remove style from props to avoid duplication in HTML attributes
-      delete this.props.style;
-    }
-
-    // ✅ FIX: Extract event handlers (on*) from props to events
-    // Some widgets pass event handlers in props (e.g., onMouseDown, onClick)
-    // but the renderer expects them in the events object
-    if (this.props && typeof this.props === 'object') {
-      Object.keys(this.props).forEach(key => {
-        // Check for event handler pattern: starts with 'on' + uppercase letter
-        if (key.length > 2 && key.startsWith('on') && key[2] === key[2].toUpperCase()) {
-          const handler = this.props[key];
-          if (typeof handler === 'function') {
-            this.events[key] = handler;
-            delete this.props[key];
-          }
-        }
-      });
-    }
-
-    this.children = Array.isArray(children) ? children : [];
-    this.key = key;
-    this.ref = ref;
-    this.ref = ref;
-
-    // State binding
-    this.statefulWidgetId = statefulWidgetId;
-    this.stateProperty = stateProperty;
-    this.isStateBinding = isStateBinding;
-    this.updateFn = updateFn;
-
-    // Metadata (widget type, original props, etc.)
-    this.metadata = metadata || {};
-
-    // Runtime references
-    this._element = null;  // DOM element (set during rendering)
-    this._parent = null;   // Parent VNode
-    this._index = null;    // Index in parent's children
-  }
-
-  /**
-   * Convert VNode to HTML string (Server-Side Rendering)
-   * @param {Object} options - Rendering options
-   * @returns {string} HTML string
-   */
-  toHTML(options = {}) {
-    // Handle text nodes
-    if (typeof this === 'string') {
-      return VNode.escapeHTML(this);
-    }
-
-    // Handle null/undefined
-    if (!this || !this.tag) {
-      return '';
-    }
-
-    // Build opening tag with attributes
-    const attrs = this._serializeAttributes();
-    const openTag = `<${this.tag}${attrs ? ' ' + attrs : ''}>`;
-
-    // Self-closing tags
-    if (VNode.VOID_TAGS.includes(this.tag)) {
-      return openTag;
-    }
-
-    // Render children
-    const childrenHTML = this.children
-      .map(child => {
-        if (child instanceof VNode) {
-          return child.toHTML(options);
-        }
-        if (typeof child === 'string') {
-          return VNode.escapeHTML(child);
-        }
-        return '';
-      })
-      .join('');
-
-    const closeTag = `</${this.tag}>`;
-    return `${openTag}${childrenHTML}${closeTag}`;
-  }
-
-  /**
-   * Convert VNode to actual DOM element (Client-Side Rendering)
-   * @param {Object} options - Rendering options
-   * @returns {HTMLElement} DOM element
-   */
-  toDOM(options = {}) {
-    console.log(`\n=== toDOM called for tag: ${this.tag}`);
-    console.log(`    style object:`, this.style);
-    console.log(`    style keys:`, Object.keys(this.style));
-    // Handle text nodes
-    if (typeof this === 'string') {
-      return document.createTextNode(this);
-    }
-
-    // Handle null/undefined
-    if (!this || !this.tag) {
-      return document.createTextNode('');
-    }
-
-    // Create DOM element
-    const element = document.createElement(this.tag);
-
-    // Apply props (HTML attributes)
-    this._applyProps(element);
-
-    // Apply styles (CSS)
-    this._applyStyles(element);
-
-    // Attach event listeners
-    this._applyEvents(element);
-
-    // Add children recursively
-    this.children.forEach((child, index) => {
-      let childNode;
-
-      if (child instanceof VNode) {
-        childNode = child.toDOM(options);
-        child._parent = this;
-        child._index = index;
-      } else if (typeof child === 'string') {
-        childNode = document.createTextNode(child);
-      } else {
-        childNode = document.createTextNode(String(child || ''));
-      }
-
-      if (childNode) {
-        element.appendChild(childNode);
-      }
-    });
-
-    // Store reference
-    this._element = element;
-    element._vnode = this;
-
-    // Call ref callback
-    if (typeof this.ref === 'function') {
-      this.ref(element);
-    }
-
-    return element;
-  }
-
-  /**
-   * Hydrate existing SSR-rendered DOM with interactivity
-   * @param {HTMLElement} domElement - Existing DOM element from SSR
-   * @returns {HTMLElement} Hydrated element
-   */
-  hydrate(domElement) {
-    if (!domElement || !this.tag) {
-      return null;
-    }
-
-    // Store reference
-    this._element = domElement;
-    domElement._vnode = this;
-
-    // Attach event listeners (SSR doesn't include events)
-    this._applyEvents(domElement);
-
-    // Hydrate children recursively
-    const domChildren = Array.from(domElement.childNodes);
-    let vnodeChildIndex = 0;
-
-    domChildren.forEach((domChild, domIndex) => {
-      const vnodeChild = this.children[vnodeChildIndex];
-
-      if (!vnodeChild) return;
-
-      if (vnodeChild instanceof VNode) {
-        vnodeChild.hydrate(domChild);
-        vnodeChild._parent = this;
-        vnodeChild._index = vnodeChildIndex;
-        vnodeChildIndex++;
-      } else if (domChild.nodeType === Node.TEXT_NODE) {
-        // Text node - just verify content matches
-        if (String(vnodeChild) === domChild.textContent) {
-          vnodeChildIndex++;
-        }
-      }
-    });
-
-    // Call ref callback
-    if (typeof this.ref === 'function') {
-      this.ref(domElement);
-    }
-
-    return domElement;
-  }
-
-  /**
-   * Serialize attributes to HTML string
-   * @private
-   * @returns {string} Attributes string
-   */
-  _serializeAttributes() {
-    const attrs = [];
-
-    // Props (HTML attributes)
-    if (this.props) {
-      Object.entries(this.props).forEach(([key, value]) => {
-        if (value === null || value === undefined || value === false) {
-          return;
-        }
-
-        if (value === true) {
-          attrs.push(key);
-        } else {
-          // Convert className to class for HTML
-          const attrName = key === 'className' ? 'class' : key;
-          const escaped = VNode.escapeAttribute(String(value));
-          attrs.push(`${attrName}="${escaped}"`);
-        }
-      });
-    }
-
-    // Inline styles
-    if (this.style && typeof this.style === 'object') {
-      const styleStr = Object.entries(this.style)
-        .filter(([_, value]) => value !== null && value !== undefined)
-        .map(([key, value]) => {
-          // Convert camelCase to kebab-case properly
-          const cssKey = key
-            .replace(/([A-Z])/g, '-$1')
-            .toLowerCase();
-          return `${cssKey}: ${value}`;
-        })
-        .join('; ');
-
-      if (styleStr) {
-        attrs.push(`style="${VNode.escapeAttribute(styleStr)}"`);
-      }
-    }
-    // Data attributes from metadata
-    if (this.metadata.widgetType) {
-      attrs.push(`data-widget-type="${VNode.escapeAttribute(this.metadata.widgetType)}"`);
-    }
-
-    if (this.key !== null && this.key !== undefined) {
-      attrs.push(`data-key="${VNode.escapeAttribute(String(this.key))}"`);
-    }
-
-    return attrs.join(' ');
-  }
-
-  /**
-   * Apply props to DOM element
-   * @private
-   * @param {HTMLElement} element - Target element
-   */
-  _applyProps(element) {
-    if (!this.props) return;
-
-    Object.entries(this.props).forEach(([key, value]) => {
-      if (value === null || value === undefined) return;
-
-      try {
-        if (key === 'className') {
-          element.className = value;
-        } else if (key === 'value' && (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA')) {
-          element.value = value;
-        } else if (key === 'checked' && element.tagName === 'INPUT') {
-          element.checked = !!value;
-        } else if (key.startsWith('data-') || key.startsWith('aria-')) {
-          element.setAttribute(key, String(value));
-        } else if (typeof value === 'boolean') {
-          if (value) {
-            element.setAttribute(key, '');
-          }
-        } else {
-          // Try property first, fall back to attribute
-          if (key in element) {
-            element[key] = value;
-          } else {
-            element.setAttribute(key, String(value));
-          }
-        }
-      } catch (error) {
-        console.warn(`Failed to set property ${key}:`, error);
-      }
-    });
-  }
-
-  /**
-   * Apply styles to DOM element
-   * @private
-   * @param {HTMLElement} element - Target element
-   */
-  _applyStyles(element) {
-    if (!this.style || typeof this.style !== 'object') return;
-
-    Object.entries(this.style).forEach(([key, value]) => {
-      if (value !== null && value !== undefined) {
-        try {
-          element.style[key] = value;
-          console.log(`Set style ${key} = ${value} -> element.style.${key} = ${element.style[key]}`);
-        } catch (error) {
-          console.warn(`Failed to set style ${key}:`, error);
-        }
-      }
-    });
-  }
-
-  /**
-   * Attach event listeners to DOM element
-   * @private
-   * @param {HTMLElement} element - Target element
-   */
-  _applyEvents(element) {
-    if (!this.events) return;
-
-    Object.entries(this.events).forEach(([eventName, handler]) => {
-      if (typeof handler !== 'function') return;
-
-      // Normalize event name (onClick -> click, onInput -> input)
-      const normalizedName = eventName
-        .replace(/^on/, '')
-        .toLowerCase();
-
-      // Store reference for cleanup
-      if (!element._eventListeners) {
-        element._eventListeners = {};
-      }
-
-      // Remove old listener if exists
-      if (element._eventListeners[normalizedName]) {
-        element.removeEventListener(
-          normalizedName,
-          element._eventListeners[normalizedName]
-        );
-      }
-
-      // Add new listener
-      element.addEventListener(normalizedName, handler);
-      element._eventListeners[normalizedName] = handler;
-    });
-  }
-
-  /**
-   * Create a clone of this VNode
-   * @returns {VNode} Cloned VNode
-   */
-  clone() {
-    return new VNode({
-      tag: this.tag,
-      props: { ...this.props },
-      style: { ...this.style },
-      children: this.children.map(child =>
-        child instanceof VNode ? child.clone() : child
-      ),
-      key: this.key,
-      ref: this.ref,
-      events: { ...this.events },
-      statefulWidgetId: this.statefulWidgetId,
-      stateProperty: this.stateProperty,
-      isStateBinding: this.isStateBinding,
-      updateFn: this.updateFn,
-      metadata: { ...this.metadata }
-    });
-  }
-
-  /**
-   * Get debug representation
-   * @returns {string} Debug string
-   */
-  toString() {
-    const childrenStr = this.children.length > 0
-      ? ` [${this.children.length} children]`
-      : '';
-    const keyStr = this.key !== null ? ` key="${this.key}"` : '';
-    return `<${this.tag}${keyStr}${childrenStr}>`;
-  }
-
-  // Static utility methods
-
-  /**
-   * Escape HTML special characters
-   * @param {string} str - String to escape
-   * @returns {string} Escaped string
-   */
-  static escapeHTML(str) {
-    const map = {
-      '&': '&amp;',
-      '<': '&lt;',
-      '>': '&gt;',
-      '"': '&quot;',
-      "'": '&#39;'
-    };
-    return String(str).replace(/[&<>"']/g, c => map[c]);
-  }
-
-  /**
-   * Escape HTML attribute value
-   * @param {string} str - String to escape
-   * @returns {string} Escaped string
-   */
-  static escapeAttribute(str) {
-    return VNode.escapeHTML(str);
-  }
-
-  /**
-   * Check if tag is self-closing
-   * @param {string} tag - Tag name
-   * @returns {boolean} True if void tag
-   */
-  static isVoidTag(tag) {
-    return VNode.VOID_TAGS.includes(tag);
-  }
-
-  /**
-   * Create text VNode
-   * @param {string} text - Text content
-   * @returns {string} Text node (represented as string)
-   */
-  static text(text) {
-    return String(text || '');
-  }
-
-  /**
-   * Create fragment (multiple children without wrapper)
-   * @param {Array} children - Child nodes
-   * @returns {Array} Children array
-   */
-  static fragment(children) {
-    return Array.isArray(children) ? children : [children];
-  }
-}
-
-// Static constants
-VNode.VOID_TAGS = [
-  'area', 'base', 'br', 'col', 'embed', 'hr', 'img',
-  'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'
-];
-
-
-export { VNode }
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/vdom/src/vnode_differ.js b/packages/flutterjs_engine/src/vdom/src/vnode_differ.js
deleted file mode 100644
index 32cda5c4..00000000
--- a/packages/flutterjs_engine/src/vdom/src/vnode_differ.js
+++ /dev/null
@@ -1,412 +0,0 @@
-// ============================================================================
-// VNODE DIFFER - Compares old and new VNode trees and generates patches
-// Layer: RECONCILIATION
-// Implements efficient diffing like React's reconciliation algorithm
-// ============================================================================
-
-import { VNode } from './vnode.js';
-import { VNodeRenderer } from "./vnode_renderer.js";
-
-/**
- * Patch types generated by differ
- */
-const PatchType = {
-  CREATE: 'CREATE',          // New node added
-  REMOVE: 'REMOVE',          // Node removed
-  REPLACE: 'REPLACE',        // Node type changed
-  UPDATE_PROPS: 'UPDATE_PROPS',  // Props changed
-  UPDATE_TEXT: 'UPDATE_TEXT',    // Text content changed
-  UPDATE_EVENTS: 'UPDATE_EVENTS', // Event handlers changed
-  REORDER: 'REORDER'         // Children reordered
-};
-
-class Patch {
-  constructor(type, index, node, value = null) {
-    this.type = type;
-    this.index = index;        // Position in parent's children
-    this.node = node;          // VNode or old VNode
-    this.value = value;        // New value (props, events, etc.)
-  }
-}
-
-class VNodeDiffer {
-  /**
-   * Diff two VNode trees and generate patches
-   * Returns array of Patch objects that can be applied to DOM
-   */
-  static diff(oldVNode, newVNode, index = 0) {
-    const patches = [];
-
-    // Helper to log patches (remove in production)
-    const logPatches = (p, source) => {
-      if (p.length > 0) {
-        console.log(`[VNodeDiffer] 🩹 Generated ${p.length} patches from ${source}:`,
-          p.map(x => `${x.type} @ ${x.index} (${x.node?.tag || 'text'})`).join(', '));
-      }
-    };
-
-    // Handle null/undefined cases
-    if (!oldVNode && !newVNode) {
-      return patches;
-    }
-
-    // New node added
-    if (!oldVNode && newVNode) {
-      patches.push(new Patch(PatchType.CREATE, index, newVNode));
-      return patches;
-    }
-
-    // Node removed
-    if (oldVNode && !newVNode) {
-      patches.push(new Patch(PatchType.REMOVE, index, oldVNode));
-      return patches;
-    }
-
-    // Handle text nodes
-    if (typeof oldVNode === 'string' || typeof oldVNode === 'number') {
-      if (oldVNode !== newVNode) {
-        patches.push(
-          new Patch(PatchType.UPDATE_TEXT, index, oldVNode, newVNode)
-        );
-      }
-      return patches;
-    }
-
-    // Both are VNodes - check if same type
-    if (oldVNode instanceof VNode && newVNode instanceof VNode) {
-      if (oldVNode.tag !== newVNode.tag) {
-        // Completely different elements
-        patches.push(new Patch(PatchType.REPLACE, index, oldVNode, newVNode));
-        logPatches(patches, 'diffVNode');
-        return patches;
-      }
-
-      // Same element type - check children and props
-      const propPatches = this.diffProps(oldVNode, newVNode, index);
-      patches.push(...propPatches);
-
-      const eventPatches = this.diffEvents(oldVNode, newVNode, index);
-      patches.push(...eventPatches);
-
-      const childPatches = this.diffChildren(
-        oldVNode.children,
-        newVNode.children,
-        index
-      );
-      patches.push(...childPatches);
-
-      return patches;
-    }
-
-    // Fallback: replace if completely different
-    patches.push(new Patch(PatchType.REPLACE, index, oldVNode, newVNode));
-    logPatches(patches, 'fallback');
-    return patches;
-  }
-
-  /**
-   * Diff props between old and new VNode
-   */
-  static diffProps(oldVNode, newVNode, index) {
-    const patches = [];
-    const oldProps = oldVNode.props || {};
-    const newProps = newVNode.props || {};
-
-    // Check if props changed
-    const propsChanged = this.hasPropsChanged(oldProps, newProps);
-    if (propsChanged) {
-      patches.push(
-        new Patch(PatchType.UPDATE_PROPS, index, oldVNode, {
-          old: oldProps,
-          new: newProps
-        })
-      );
-    }
-
-    return patches;
-  }
-
-  /**
-   * Diff events between old and new VNode
-   */
-  static diffEvents(oldVNode, newVNode, index) {
-    const patches = [];
-    const oldEvents = oldVNode.events || {};
-    const newEvents = newVNode.events || {};
-
-    const eventsChanged = this.hasEventsChanged(oldEvents, newEvents);
-    if (eventsChanged) {
-      patches.push(
-        new Patch(PatchType.UPDATE_EVENTS, index, oldVNode, {
-          old: oldEvents,
-          new: newEvents
-        })
-      );
-    }
-
-    return patches;
-  }
-
-  /**
-   * Diff children using key-based or position-based reconciliation
-   */
-  static diffChildren(oldChildren = [], newChildren = [], parentIndex) {
-    const patches = [];
-
-    // Use keys for reconciliation if available
-    const oldKeyed = this.groupByKey(oldChildren);
-    const newKeyed = this.groupByKey(newChildren);
-
-    const maxLen = Math.max(oldChildren.length, newChildren.length);
-
-    for (let i = 0; i < maxLen; i++) {
-      const oldChild = oldChildren[i];
-      const newChild = newChildren[i];
-      const childIndex = `${parentIndex}.${i}`;
-
-      if (!oldChild && newChild) {
-        // New child added
-        patches.push(new Patch(PatchType.CREATE, childIndex, newChild));
-      } else if (oldChild && !newChild) {
-        // Child removed
-        patches.push(new Patch(PatchType.REMOVE, childIndex, oldChild));
-      } else if (oldChild && newChild) {
-        // Recursively diff
-        const childPatches = this.diff(oldChild, newChild, childIndex);
-        patches.push(...childPatches);
-      }
-    }
-
-    return patches;
-  }
-
-  /**
-   * Group VNodes by key for efficient reconciliation
-   */
-  static groupByKey(vnodes = []) {
-    const keyed = new Map();
-    const unkeyed = [];
-
-    vnodes.forEach(vnode => {
-      if (vnode instanceof VNode && vnode.key) {
-        keyed.set(vnode.key, vnode);
-      } else {
-        unkeyed.push(vnode);
-      }
-    });
-
-    return { keyed, unkeyed };
-  }
-
-  /**
-   * Check if props have changed
-   */
-  static hasPropsChanged(oldProps, newProps) {
-    const allKeys = new Set([
-      ...Object.keys(oldProps),
-      ...Object.keys(newProps)
-    ]);
-
-    for (const key of allKeys) {
-      if (oldProps[key] !== newProps[key]) {
-        return true;
-      }
-    }
-
-    return false;
-  }
-
-  /**
-   * Check if events have changed
-   */
-  static hasEventsChanged(oldEvents, newEvents) {
-    const allKeys = new Set([
-      ...Object.keys(oldEvents),
-      ...Object.keys(newEvents)
-    ]);
-
-    for (const key of allKeys) {
-      if (oldEvents[key] !== newEvents[key]) {
-        return true;
-      }
-    }
-
-    return false;
-  }
-
-  /**
-   * Apply patches to DOM
-   * Called after diff to update actual DOM
-   */
-  static applyPatches(domElement, patches, vNodeMap = new Map()) {
-    patches.forEach(patch => {
-      const targetElement = this.findElement(domElement, patch.index);
-
-      if (!targetElement) {
-        console.warn(`Could not find element at index ${patch.index}`);
-        return;
-      }
-
-      switch (patch.type) {
-        case PatchType.CREATE:
-          this.applyCreate(targetElement, patch);
-          break;
-
-        case PatchType.REMOVE:
-          this.applyRemove(targetElement, patch);
-          break;
-
-        case PatchType.REPLACE:
-          this.applyReplace(targetElement, patch);
-          break;
-
-        case PatchType.UPDATE_PROPS:
-          this.applyUpdateProps(targetElement, patch);
-          break;
-
-        case PatchType.UPDATE_TEXT:
-          this.applyUpdateText(targetElement, patch);
-          break;
-
-        case PatchType.UPDATE_EVENTS:
-          this.applyUpdateEvents(targetElement, patch);
-          break;
-
-        case PatchType.REORDER:
-          this.applyReorder(targetElement, patch);
-          break;
-      }
-    });
-  }
-
-  /**
-   * Find DOM element by index path
-   * Index format: "0.1.2" means: root's 0th child's 1st child's 2nd child
-   */
-  static findElement(root, index) {
-    if (index === 0 || index === '0') {
-      return root;
-    }
-
-    const path = String(index).split('.');
-    let current = root;
-
-    for (const step of path) {
-      const childIndex = parseInt(step);
-      current = current.childNodes[childIndex];
-
-      if (!current) {
-        return null;
-      }
-    }
-
-    return current;
-  }
-
-  /**
-   * Apply CREATE patch
-   */
-  static applyCreate(parent, patch) {
-
-
-    const newDom = VNodeRenderer.createDOMNode(patch.node);
-
-    if (parent.childNodes.length === 0) {
-      parent.appendChild(newDom);
-    } else {
-      const childIndex = parseInt(String(patch.index).split('.').pop());
-      if (childIndex < parent.childNodes.length) {
-        parent.insertBefore(newDom, parent.childNodes[childIndex]);
-      } else {
-        parent.appendChild(newDom);
-      }
-    }
-  }
-
-  /**
-   * Apply REMOVE patch
-   */
-  static applyRemove(parent, patch) {
-    const childIndex = parseInt(String(patch.index).split('.').pop());
-    if (parent.childNodes[childIndex]) {
-      parent.removeChild(parent.childNodes[childIndex]);
-    }
-  }
-
-  /**
-   * Apply REPLACE patch
-   */
-  static applyReplace(parent, patch) {
-
-    const childIndex = parseInt(String(patch.index).split('.').pop());
-    const oldChild = parent.childNodes[childIndex];
-
-    if (oldChild) {
-      const newDom = VNodeRenderer.createDOMNode(patch.value);
-      parent.replaceChild(newDom, oldChild);
-    }
-  }
-
-  /**
-   * Apply UPDATE_PROPS patch
-   */
-  static applyUpdateProps(element, patch) {
-
-    VNodeRenderer.updateProps(element, patch.value.old, patch.value.new);
-  }
-
-  /**
-   * Apply UPDATE_TEXT patch
-   */
-  static applyUpdateText(element, patch) {
-    element.textContent = String(patch.value);
-  }
-
-  /**
-   * Apply UPDATE_EVENTS patch
-   */
-  static applyUpdateEvents(element, patch) {
-
-    VNodeRenderer.updateEvents(element, patch.value.old, patch.value.new);
-  }
-
-  /**
-   * Apply REORDER patch
-   */
-  static applyReorder(parent, patch) {
-    // Reorder children according to new indices
-    const newOrder = patch.value;
-    const fragment = document.createDocumentFragment();
-
-    newOrder.forEach(index => {
-      fragment.appendChild(parent.childNodes[index]);
-    });
-
-    parent.appendChild(fragment);
-  }
-
-  /**
-   * Get statistics about patches (for debugging)
-   */
-  static getStats(patches) {
-    const stats = {
-      total: patches.length,
-      creates: 0,
-      removes: 0,
-      replaces: 0,
-      updates: 0
-    };
-
-    patches.forEach(patch => {
-      if (patch.type === PatchType.CREATE) stats.creates++;
-      else if (patch.type === PatchType.REMOVE) stats.removes++;
-      else if (patch.type === PatchType.REPLACE) stats.replaces++;
-      else stats.updates++;
-    });
-
-    return stats;
-  }
-}
-
-
-export { VNodeDiffer, Patch, PatchType };
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/vdom/src/vnode_renderer.js b/packages/flutterjs_engine/src/vdom/src/vnode_renderer.js
deleted file mode 100644
index 233b0c45..00000000
--- a/packages/flutterjs_engine/src/vdom/src/vnode_renderer.js
+++ /dev/null
@@ -1,579 +0,0 @@
-/**
- * VNodeRenderer - WITH ENHANCED WIDGET IDENTIFICATION
- */
-
-class VNodeRenderer {
-  constructor(options = {}) {
-    this.debugMode = options.debugMode || false;
-    this.rootElement = options.rootElement || null;
-    this.tracker = options.tracker || null;  // Optional tracker
-  }
-
-  render(vnode, targetElement, options = {}) {
-    if (!targetElement) {
-      throw new Error('Target element is required');
-    }
-
-    if (this.debugMode) {
-      console.log('[VNodeRenderer] 🎨 Rendering to', targetElement.id || targetElement.className || targetElement.tagName);
-      console.log('[VNodeRenderer] 📦 VNode to render:', {
-        type: typeof vnode,
-        isArray: Array.isArray(vnode),
-        hasTag: vnode?.tag,
-        constructor: vnode?.constructor?.name,
-      });
-    }
-
-    // Clear target if specified
-    if (options.clear !== false) {
-      this.clearElement(targetElement);
-    }
-
-    try {
-      // Create DOM tree
-      const domNode = this.createDOMNode(vnode);
-
-      // Append to target
-      if (domNode) {
-        if (Array.isArray(domNode)) {
-          domNode.forEach(node => targetElement.appendChild(node));
-        } else {
-          targetElement.appendChild(domNode);
-        }
-      }
-
-      if (this.debugMode) {
-        console.log('[VNodeRenderer] ✅ Rendered successfully');
-      }
-
-      return Array.isArray(domNode) ? domNode[0] : domNode;
-
-    } catch (error) {
-      // Enhanced error with widget identification
-      this.handleRenderError(error, vnode);
-      throw error;
-    }
-  }
-
-  /**
-   * Handle render error with widget identification
-   * @private
-   */
-  handleRenderError(error, vnode) {
-    console.error('');
-    console.error('❌ '.repeat(50));
-    console.error('VNODE RENDERER ERROR - WIDGET NOT CONVERTED TO VNODE');
-    console.error('❌ '.repeat(50));
-    console.error('');
-
-    // Identify the widget
-    console.error('🔍 FAILED VNODE DETAILS:');
-    console.error('   Constructor:', vnode?.constructor?.name || 'unknown');
-    console.error('   Type:', typeof vnode);
-    console.error('   Has .tag:', vnode?.tag !== undefined);
-    console.error('   Has .build:', typeof vnode?.build === 'function');
-    console.error('   Has .createState:', typeof vnode?.createState === 'function');
-    console.error('   Has .updateShouldNotify:', typeof vnode?.updateShouldNotify === 'function');
-    console.error('');
-
-    // Identify what type of widget this is
-    const widgetType = this.identifyWidgetType(vnode);
-    console.error('📋 WIDGET TYPE:', widgetType);
-    console.error('');
-
-    // Show available properties
-    if (vnode && typeof vnode === 'object') {
-      console.error('📝 WIDGET PROPERTIES:');
-      const props = this.getWidgetProperties(vnode);
-      Object.entries(props).forEach(([key, value]) => {
-        console.error(`   ${key}: ${value}`);
-      });
-      console.error('');
-    }
-
-    // Error analysis
-    console.error('💥 PROBLEM:');
-    if (typeof vnode?.build === 'function' && !vnode?.tag) {
-      console.error('   This is a WIDGET (not a VNode)');
-      console.error('   Widget has a build() method but was never built to VNode');
-      console.error('   This means VNodeBuilder failed to properly convert this widget');
-      console.error('');
-      console.error('🎯 THE ISSUE:');
-      console.error(`   Widget "${vnode.constructor.name}" reached the renderer`);
-      console.error('   without being converted to a VNode first.');
-      console.error('');
-      console.error('✅ SOLUTIONS:');
-      console.error('   1. Check VNodeBuilder logs above for detailed error');
-      console.error('   2. Verify Element.build() returns a VNode');
-      console.error('   3. Check StatelessElement/StatefulElement implementation');
-      console.error('   4. Ensure all nested widgets are also converted to VNodes');
-    }
-
-    console.error('');
-    console.error('📚 ERROR MESSAGE:', error.message);
-    console.error('');
-    console.error('❌ '.repeat(50));
-    console.error('');
-  }
-
-  /**
-   * Identify widget type
-   * @private
-   */
-  identifyWidgetType(widget) {
-    if (!widget || typeof widget !== 'object') {
-      return 'NOT_A_WIDGET';
-    }
-
-    if (widget.tag !== undefined) {
-      return 'VNODE (has .tag)';
-    }
-
-    if (typeof widget.createState === 'function') {
-      return 'StatefulWidget';
-    }
-
-    if (typeof widget.build === 'function' && !widget.createState) {
-      return 'StatelessWidget';
-    }
-
-    if (typeof widget.updateShouldNotify === 'function') {
-      return 'InheritedWidget';
-    }
-
-    if (widget.appBar || widget.body || widget.floatingActionButton) {
-      return 'Scaffold (or similar)';
-    }
-
-    if (widget.title && widget.theme && widget.home) {
-      return 'MaterialApp';
-    }
-
-    if (widget.child || widget.children) {
-      return 'Container/Layout Widget';
-    }
-
-    return 'Unknown Widget Type';
-  }
-
-
-  createDOMNode(vnode) {
-    // ✅ Handle null/undefined FIRST
-    if (vnode === null || vnode === undefined) {
-      return document.createTextNode('');
-    }
-
-    // Handle arrays (fragments)
-    if (Array.isArray(vnode)) {
-      return vnode
-        .map(child => this.createDOMNode(child))
-        .filter(node => node !== null);
-    }
-
-    // Handle text nodes
-    if (typeof vnode === 'string' || typeof vnode === 'number') {
-      return document.createTextNode(String(vnode));
-    }
-
-    // Handle boolean (render nothing)
-    if (typeof vnode === 'boolean') {
-      return document.createTextNode('');
-    }
-
-    // ✅ Check if it's a valid VNode with tag
-    if (!vnode || !vnode.tag) {
-      console.error('🛑 CRITICAL: VNode missing .tag property');
-      console.error('   Constructor:', vnode?.constructor?.name);
-      console.error('   Type:', typeof vnode);
-      console.error('   Is Widget:', typeof vnode?.build === 'function');
-      console.error('');
-
-      // ✅ USE OPTIONAL CHAINING HERE!
-      if (vnode?.constructor?.name === 'FlutterJSRuntime') {
-        throw new Error(
-          'Widget.build() returned the runtime object! ' +
-          'build() must return a Widget, VNode, string, or null'
-        );
-      }
-
-      // Use tracker if available
-      if (this.tracker && typeof this.tracker.trackRenderFailure === 'function') {
-        this.tracker.trackRenderFailure(vnode, new Error('Missing tag property'));
-      }
-
-      throw new Error(
-        `[VNodeRenderer] Invalid VNode: Widget "${vnode?.constructor?.name}" was not built to VNode. ` +
-        `This is a build chain error. Check VNodeBuilder logs above for the actual build failure.`
-      );
-    }
-
-    // Create element
-    const element = document.createElement(vnode.tag);
-
-    // Store VNode reference
-    element._vnode = vnode;
-    vnode._element = element;
-
-    // Apply props (HTML attributes)
-    this.applyProps(element, vnode.props || {});
-
-    // Apply styles (CSS)
-    this.applyStyles(element, vnode.style || {});
-
-    // Attach event listeners
-    this.applyEvents(element, vnode.events || {});
-
-    // Render children
-    if (vnode.children && vnode.children.length > 0) {
-      this.renderChildren(element, vnode.children);
-    }
-
-    // Call ref callback
-    if (typeof vnode.ref === 'function') {
-      try {
-        vnode.ref(element);
-      } catch (error) {
-        console.error('Error in ref callback:', error);
-      }
-    }
-
-    return element;
-  }
-
-  // ✅ FIXED: getWidgetProperties with null check
-  getWidgetProperties(widget) {
-    const props = {};
-
-    // ✅ Add null safety check
-    if (!widget || typeof widget !== 'object') {
-      return props;
-    }
-
-    const keys = Object.keys(widget)
-      .filter(k => !k.startsWith('_') && !k.startsWith('__') && typeof widget[k] !== 'function')
-      .slice(0, 10);  // Limit to first 10
-
-    keys.forEach(key => {
-      const value = widget[key];
-      if (typeof value === 'object' && value !== null) {
-        props[key] = `[${value?.constructor?.name || 'object'}]`;  // ✅ Safe
-      } else if (typeof value === 'string' && value.length > 30) {
-        props[key] = `"${value.substring(0, 30)}..."`;
-      } else {
-        props[key] = JSON.stringify(value);
-      }
-    });
-
-    return props;
-  }
-
-  renderChildren(parent, children) {
-    children.forEach((child, index) => {
-      try {
-        const childNode = this.createDOMNode(child);
-
-        if (childNode) {
-          if (Array.isArray(childNode)) {
-            childNode.forEach(node => parent.appendChild(node));
-          } else {
-            parent.appendChild(childNode);
-          }
-
-          if (child && typeof child === 'object' && child.tag) {
-            child._parent = parent._vnode;
-            child._index = index;
-          }
-        }
-      } catch (error) {
-        console.error(`Error rendering child at index ${index}:`, error);
-        throw error;
-      }
-    });
-  }
-
-  applyProps(element, props) {
-    Object.entries(props).forEach(([key, value]) => {
-      if (value === null || value === undefined) {
-        return;
-      }
-
-      try {
-        if (key === 'className' || key === 'class') {
-          element.className = value;
-          return;
-        }
-
-        if (key === 'value' && (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT')) {
-          element.value = value;
-          return;
-        }
-
-        if (key === 'checked' && element.tagName === 'INPUT') {
-          element.checked = !!value;
-          return;
-        }
-
-        if (key === 'selected' && element.tagName === 'OPTION') {
-          element.selected = !!value;
-          return;
-        }
-
-        if (key === 'disabled') {
-          element.disabled = !!value;
-          return;
-        }
-
-        if (key.startsWith('data-') || key.startsWith('aria-')) {
-          element.setAttribute(key, String(value));
-          return;
-        }
-
-        if (typeof value === 'boolean') {
-          if (value) {
-            element.setAttribute(key, '');
-          } else {
-            element.removeAttribute(key);
-          }
-          return;
-        }
-
-        if (key in element) {
-          element[key] = value;
-        } else {
-          element.setAttribute(key, String(value));
-        }
-      } catch (error) {
-        console.warn(`Failed to set prop ${key}:`, error);
-        try {
-          element.setAttribute(key, String(value));
-        } catch (e) {
-          console.error(`Failed to set attribute ${key}:`, e);
-        }
-      }
-    });
-  }
-
-  applyStyles(element, styles) {
-    Object.entries(styles).forEach(([key, value]) => {
-      if (value !== null && value !== undefined) {
-        try {
-          if (key.startsWith('--')) {
-            element.style.setProperty(key, value);
-          } else {
-            element.style[key] = value;
-          }
-        } catch (error) {
-          console.warn(`Failed to set style ${key}:`, error);
-        }
-      }
-    });
-  }
-
-  applyEvents(element, events) {
-    Object.entries(events).forEach(([eventName, handler]) => {
-      if (typeof handler !== 'function') {
-        console.warn(`Event handler for ${eventName} is not a function`);
-        return;
-      }
-
-      try {
-        const normalizedName = eventName
-          .replace(/^on/, '')
-          .toLowerCase();
-
-        if (!element._eventListeners) {
-          element._eventListeners = {};
-        }
-
-        if (element._eventListeners[normalizedName]) {
-          element.removeEventListener(
-            normalizedName,
-            element._eventListeners[normalizedName]
-          );
-        }
-
-        element.addEventListener(normalizedName, handler);
-        element._eventListeners[normalizedName] = handler;
-      } catch (error) {
-        console.error(`Failed to attach event ${eventName}:`, error);
-      }
-    });
-  }
-
-  clearElement(element) {
-    this.cleanupEventListeners(element);
-    element.innerHTML = '';
-  }
-
-  cleanupEventListeners(element) {
-    if (!element) return;
-
-    if (element._eventListeners) {
-      Object.entries(element._eventListeners).forEach(([event, handler]) => {
-        element.removeEventListener(event, handler);
-      });
-      element._eventListeners = null;
-    }
-
-    if (element._vnode) {
-      element._vnode._element = null;
-      element._vnode = null;
-    }
-
-    Array.from(element.children).forEach(child => {
-      this.cleanupEventListeners(child);
-    });
-  }
-
-  updateProps(element, oldProps = {}, newProps = {}) {
-    Object.keys(oldProps).forEach(key => {
-      if (!(key in newProps)) {
-        if (key === 'className' || key === 'class') {
-          element.className = '';
-        } else if (key.startsWith('data-') || key.startsWith('aria-')) {
-          element.removeAttribute(key);
-        } else if (typeof oldProps[key] === 'boolean') {
-          element.removeAttribute(key);
-        } else if (key in element) {
-          element[key] = '';
-        } else {
-          element.removeAttribute(key);
-        }
-      }
-    });
-
-    this.applyProps(element, newProps);
-  }
-
-  updateStyles(element, oldStyles = {}, newStyles = {}) {
-    Object.keys(oldStyles).forEach(key => {
-      if (!(key in newStyles)) {
-        element.style[key] = '';
-      }
-    });
-
-    this.applyStyles(element, newStyles);
-  }
-
-  updateEvents(element, oldEvents = {}, newEvents = {}) {
-    Object.keys(oldEvents).forEach(eventName => {
-      if (!(eventName in newEvents)) {
-        const normalizedName = eventName.replace(/^on/, '').toLowerCase();
-        if (element._eventListeners && element._eventListeners[normalizedName]) {
-          element.removeEventListener(
-            normalizedName,
-            element._eventListeners[normalizedName]
-          );
-          delete element._eventListeners[normalizedName];
-        }
-      }
-    });
-
-    this.applyEvents(element, newEvents);
-  }
-
-  replaceElement(oldElement, newVNode) {
-    const newElement = this.createDOMNode(newVNode);
-
-    if (oldElement.parentNode && newElement) {
-      this.cleanupEventListeners(oldElement);
-      oldElement.parentNode.replaceChild(newElement, oldElement);
-    }
-
-    return newElement;
-  }
-
-  removeElement(element) {
-    if (!element || !element.parentNode) return;
-    this.cleanupEventListeners(element);
-    element.parentNode.removeChild(element);
-  }
-
-  insertAt(parent, vnode, index) {
-    const element = this.createDOMNode(vnode);
-
-    if (!element) return null;
-
-    const children = Array.from(parent.childNodes);
-
-    if (index >= children.length) {
-      parent.appendChild(element);
-    } else {
-      parent.insertBefore(element, children[index]);
-    }
-
-    return element;
-  }
-
-  findElementByPath(root, indexPath) {
-    if (!indexPath) return root;
-
-    const indices = indexPath.split('.').map(Number);
-    let current = root;
-
-    for (const index of indices) {
-      const children = Array.from(current.childNodes);
-      if (index >= children.length) return null;
-      current = children[index];
-    }
-
-    return current;
-  }
-
-  getElementPath(element) {
-    const indices = [];
-    let current = element;
-
-    while (current.parentNode && current.parentNode !== document.body) {
-      const parent = current.parentNode;
-      const index = Array.from(parent.childNodes).indexOf(current);
-      indices.unshift(index);
-      current = parent;
-    }
-
-    return indices.join('.');
-  }
-
-  batchRender(vnodes, container) {
-    const fragment = document.createDocumentFragment();
-
-    vnodes.forEach(vnode => {
-      const element = this.createDOMNode(vnode);
-      if (element) {
-        if (Array.isArray(element)) {
-          element.forEach(node => fragment.appendChild(node));
-        } else {
-          fragment.appendChild(element);
-        }
-      }
-    });
-
-    this.clearElement(container);
-    container.appendChild(fragment);
-  }
-
-  needsUpdate(element, vnode) {
-    if (!element._vnode) return true;
-
-    const oldVNode = element._vnode;
-
-    if (oldVNode.tag !== vnode.tag) return true;
-    if (oldVNode.key !== vnode.key) return true;
-
-    const oldProps = oldVNode.props || {};
-    const newProps = vnode.props || {};
-    if (Object.keys(oldProps).length !== Object.keys(newProps).length) {
-      return true;
-    }
-
-    const oldStyles = oldVNode.style || {};
-    const newStyles = vnode.style || {};
-    if (Object.keys(oldStyles).length !== Object.keys(newStyles).length) {
-      return true;
-    }
-
-    return false;
-  }
-}
-
-export { VNodeRenderer };
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/vdom/test/hydrator.test.js b/packages/flutterjs_engine/src/vdom/test/hydrator.test.js
deleted file mode 100644
index 054062d3..00000000
--- a/packages/flutterjs_engine/src/vdom/test/hydrator.test.js
+++ /dev/null
@@ -1,810 +0,0 @@
-/**
- * Hydrator Tests - Comprehensive Hydration Testing
- * Tests SSR → CSR transition and hydration correctness
- */
-
-import { Hydrator } from '../src/hydrator.js';
-import { VNode } from '../src/vnode.js';
-import { SSRRenderer } from '../src/ssr_renderer.js';
-import { JSDOM } from 'jsdom';
-
-// Setup DOM environment
-const dom = new JSDOM('<!DOCTYPE html><html><body><div id="root"></div></body></html>');
-global.document = dom.window.document;
-global.window = dom.window;
-global.HTMLElement = dom.window.HTMLElement;
-global.Node = dom.window.Node;
-
-console.log('\n' + '='.repeat(80));
-console.log('🧪 HYDRATOR TESTS');
-console.log('='.repeat(80) + '\n');
-
-let testsPassed = 0;
-let testsFailed = 0;
-
-function test(name, fn) {
-  try {
-    fn();
-    console.log(`✓ ${name}`);
-    testsPassed++;
-  } catch (error) {
-    console.log(`✗ ${name}`);
-    console.log(`  Error: ${error.message}`);
-    if (error.stack) {
-      console.log(`  ${error.stack.split('\n')[1]}`);
-    }
-    testsFailed++;
-  }
-}
-
-function assert(condition, message) {
-  if (!condition) {
-    throw new Error(message || 'Assertion failed');
-  }
-}
-
-function assertEquals(actual, expected, message) {
-  if (actual !== expected) {
-    throw new Error(
-      message || `Expected "${expected}", got "${actual}"`
-    );
-  }
-}
-
-function assertIncludes(haystack, needle, message) {
-  if (!haystack || !haystack.includes(needle)) {
-    throw new Error(
-      message || `Expected to include "${needle}"`
-    );
-  }
-}
-
-// Helper to create SSR HTML from VNode
-function createSSRHTML(vnode) {
-  const html = SSRRenderer.render(vnode);
-  const container = document.createElement('div');
-  container.innerHTML = html;
-  return container.firstChild;
-}
-
-// ============================================================================
-// TEST SUITE 1: Basic Hydration
-// ============================================================================
-
-console.log('TEST SUITE 1: Basic Hydration\n');
-
-test('Hydrate simple element', () => {
-  const vnode = new VNode({ tag: 'div', children: ['Hello'] });
-  const ssrElement = createSSRHTML(vnode);
-  
-  const hydrated = Hydrator.hydrate(ssrElement, vnode);
-  
-  assert(hydrated !== null, 'Should return element');
-  assert(Hydrator.isHydrated(hydrated), 'Should be marked as hydrated');
-  assertEquals(hydrated.textContent, 'Hello', 'Should preserve content');
-});
-
-test('Store VNode references after hydration', () => {
-  const vnode = new VNode({ tag: 'div', children: ['Content'] });
-  const ssrElement = createSSRHTML(vnode);
-  
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  assert(ssrElement._vnode === vnode, 'Should store vnode on element');
-  assert(vnode._element === ssrElement, 'Should store element on vnode');
-});
-
-test('Hydrate nested structure', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    children: [
-      new VNode({ tag: 'h1', children: ['Title'] }),
-      new VNode({ tag: 'p', children: ['Paragraph'] })
-    ]
-  });
-  const ssrElement = createSSRHTML(vnode);
-  
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  const h1 = ssrElement.querySelector('h1');
-  const p = ssrElement.querySelector('p');
-  
-  assert(h1._vnode === vnode.children[0], 'Should hydrate h1');
-  assert(p._vnode === vnode.children[1], 'Should hydrate p');
-});
-
-test('Require root element', () => {
-  const vnode = new VNode({ tag: 'div' });
-  
-  try {
-    Hydrator.hydrate(null, vnode);
-    throw new Error('Should have thrown');
-  } catch (error) {
-    assertIncludes(error.message, 'Root element', 'Should mention root element');
-  }
-});
-
-test('Require VNode tree', () => {
-  const element = document.createElement('div');
-  
-  try {
-    Hydrator.hydrate(element, null);
-    throw new Error('Should have thrown');
-  } catch (error) {
-    assertIncludes(error.message, 'VNode tree', 'Should mention VNode tree');
-  }
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 2: Event Listener Attachment
-// ============================================================================
-
-console.log('TEST SUITE 2: Event Listener Attachment\n');
-
-test('Attach click event during hydration', () => {
-  let clicked = false;
-  const vnode = new VNode({
-    tag: 'button',
-    events: { click: () => { clicked = true; } },
-    children: ['Click Me']
-  });
-  const ssrElement = createSSRHTML(vnode);
-  
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  ssrElement.click();
-  assert(clicked === true, 'Should call click handler');
-});
-
-test('Attach multiple events', () => {
-  let focused = false;
-  let blurred = false;
-  
-  const vnode = new VNode({
-    tag: 'input',
-    events: {
-      focus: () => { focused = true; },
-      blur: () => { blurred = true; }
-    }
-  });
-  const ssrElement = createSSRHTML(vnode);
-  
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  ssrElement.dispatchEvent(new window.Event('focus'));
-  ssrElement.dispatchEvent(new window.Event('blur'));
-  
-  assert(focused === true, 'Should handle focus');
-  assert(blurred === true, 'Should handle blur');
-});
-
-test('Attach events on nested elements', () => {
-  let button1Clicked = false;
-  let button2Clicked = false;
-  
-  const vnode = new VNode({
-    tag: 'div',
-    children: [
-      new VNode({
-        tag: 'button',
-        events: { click: () => { button1Clicked = true; } },
-        children: ['Button 1']
-      }),
-      new VNode({
-        tag: 'button',
-        events: { click: () => { button2Clicked = true; } },
-        children: ['Button 2']
-      })
-    ]
-  });
-  const ssrElement = createSSRHTML(vnode);
-  
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  const buttons = ssrElement.querySelectorAll('button');
-  buttons[0].click();
-  buttons[1].click();
-  
-  assert(button1Clicked === true, 'Should handle button 1');
-  assert(button2Clicked === true, 'Should handle button 2');
-});
-
-test('Store event listeners on element', () => {
-  const vnode = new VNode({
-    tag: 'button',
-    events: { click: () => {} },
-    children: ['Button']
-  });
-  const ssrElement = createSSRHTML(vnode);
-  
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  assert(ssrElement._eventListeners !== undefined, 'Should have _eventListeners');
-  assert(ssrElement._eventListeners.click !== undefined, 'Should store click handler');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 3: Ref Callbacks
-// ============================================================================
-
-console.log('TEST SUITE 3: Ref Callbacks\n');
-
-test('Call ref callback during hydration', () => {
-  let refElement = null;
-  const vnode = new VNode({
-    tag: 'div',
-    ref: (el) => { refElement = el; },
-    children: ['Content']
-  });
-  const ssrElement = createSSRHTML(vnode);
-  
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  assert(refElement !== null, 'Should call ref');
-  assert(refElement === ssrElement, 'Should pass correct element');
-});
-
-test('Call refs on nested elements', () => {
-  let ref1 = null;
-  let ref2 = null;
-  
-  const vnode = new VNode({
-    tag: 'div',
-    ref: (el) => { ref1 = el; },
-    children: [
-      new VNode({
-        tag: 'span',
-        ref: (el) => { ref2 = el; },
-        children: ['Nested']
-      })
-    ]
-  });
-  const ssrElement = createSSRHTML(vnode);
-  
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  assert(ref1 !== null, 'Should call parent ref');
-  assert(ref2 !== null, 'Should call child ref');
-  assertEquals(ref2.tagName, 'SPAN', 'Child ref should be span');
-});
-
-test('Handle ref callback errors gracefully', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    ref: () => { throw new Error('Ref error'); },
-    children: ['Content']
-  });
-  const ssrElement = createSSRHTML(vnode);
-  
-  // Should not throw
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  assert(Hydrator.isHydrated(ssrElement), 'Should still complete hydration');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 4: State Bindings
-// ============================================================================
-
-console.log('TEST SUITE 4: State Bindings\n');
-
-test('Initialize state bindings', () => {
-  const vnode = new VNode({
-    tag: 'span',
-    isStateBinding: true,
-    statefulWidgetId: 'counter',
-    stateProperty: 'count',
-    children: ['0']
-  });
-  const ssrElement = createSSRHTML(vnode);
-  
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  assert(ssrElement._stateBindings !== undefined, 'Should have state bindings');
-  assertEquals(ssrElement._stateBindings.length, 1, 'Should have 1 binding');
-  assertEquals(ssrElement._stateBindings[0].widgetId, 'counter', 'Should store widget ID');
-  assertEquals(ssrElement._stateBindings[0].property, 'count', 'Should store property');
-});
-
-test('Initialize multiple state bindings', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    children: [
-      new VNode({
-        tag: 'span',
-        isStateBinding: true,
-        statefulWidgetId: 'widget1',
-        stateProperty: 'prop1',
-        children: ['Value 1']
-      }),
-      new VNode({
-        tag: 'span',
-        isStateBinding: true,
-        statefulWidgetId: 'widget2',
-        stateProperty: 'prop2',
-        children: ['Value 2']
-      })
-    ]
-  });
-  const ssrElement = createSSRHTML(vnode);
-  
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  assert(ssrElement._stateBindings.length === 2, 'Should have 2 bindings');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 5: Hydration Data
-// ============================================================================
-
-console.log('TEST SUITE 5: Hydration Data\n');
-
-test('Generate hydration data', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    metadata: { widgetType: 'Container' },
-    key: 'container-1',
-    children: [
-      new VNode({
-        tag: 'button',
-        events: { click: () => {} },
-        children: ['Click']
-      })
-    ]
-  });
-  
-  const data = Hydrator.generateHydrationData(vnode);
-  
-  assert(data.version !== undefined, 'Should have version');
-  assert(data.timestamp !== undefined, 'Should have timestamp');
-  assert(Array.isArray(data.widgets), 'Should have widgets array');
-  assert(Array.isArray(data.events), 'Should have events array');
-});
-
-test('Collect widget metadata', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    metadata: { 
-      widgetType: 'Container',
-      flutterProps: { padding: 16 }
-    },
-    key: 'test-key',
-    children: []
-  });
-  
-  const data = Hydrator.generateHydrationData(vnode);
-  
-  assertEquals(data.widgets.length, 1, 'Should have 1 widget');
-  assertEquals(data.widgets[0].type, 'Container', 'Should have type');
-  assertEquals(data.widgets[0].key, 'test-key', 'Should have key');
-  assertEquals(data.widgets[0].props.padding, 16, 'Should have props');
-});
-
-test('Collect event handlers', () => {
-  const vnode = new VNode({
-    tag: 'button',
-    events: { click: () => {}, hover: () => {} },
-    children: ['Button']
-  });
-  
-  const data = Hydrator.generateHydrationData(vnode);
-  
-  assertEquals(data.events.length, 1, 'Should have 1 event entry');
-  assert(data.events[0].events.includes('click'), 'Should include click');
-  assert(data.events[0].events.includes('hover'), 'Should include hover');
-});
-
-test('Collect state bindings', () => {
-  const vnode = new VNode({
-    tag: 'span',
-    isStateBinding: true,
-    statefulWidgetId: 'counter',
-    stateProperty: 'count',
-    children: ['0']
-  });
-  
-  const data = Hydrator.generateHydrationData(vnode);
-  
-  assertEquals(data.stateBindings.length, 1, 'Should have 1 binding');
-  assertEquals(data.stateBindings[0].widgetId, 'counter', 'Should have widget ID');
-  assertEquals(data.stateBindings[0].property, 'count', 'Should have property');
-});
-
-test('Collect refs', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    ref: (el) => {},
-    children: ['Content']
-  });
-  
-  const data = Hydrator.generateHydrationData(vnode);
-  
-  assertEquals(data.refs.length, 1, 'Should have 1 ref');
-  assert(data.refs[0].hasRef === true, 'Should mark has ref');
-});
-
-test('Validate hydration data', () => {
-  const validData = {
-    version: '1.0.0',
-    widgets: [],
-    stateBindings: [],
-    events: [],
-    refs: []
-  };
-  
-  assert(Hydrator.validateHydrationData(validData), 'Should validate correct data');
-  
-  const invalidData1 = { version: '1.0.0' };
-  assert(!Hydrator.validateHydrationData(invalidData1), 'Should reject missing arrays');
-  
-  const invalidData2 = null;
-  assert(!Hydrator.validateHydrationData(invalidData2), 'Should reject null');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 6: Hydration Markers
-// ============================================================================
-
-console.log('TEST SUITE 6: Hydration Markers\n');
-
-test('Mark element as hydrated', () => {
-  const vnode = new VNode({ tag: 'div', children: ['Content'] });
-  const ssrElement = createSSRHTML(vnode);
-  
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  assert(ssrElement.hasAttribute('data-hydrated'), 'Should have data-hydrated attribute');
-  assert(ssrElement._hydrated === true, 'Should have _hydrated property');
-});
-
-test('Check if element is hydrated', () => {
-  const vnode = new VNode({ tag: 'div' });
-  const ssrElement = createSSRHTML(vnode);
-  
-  assert(!Hydrator.isHydrated(ssrElement), 'Should not be hydrated initially');
-  
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  assert(Hydrator.isHydrated(ssrElement), 'Should be hydrated after hydration');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 7: Partial Hydration
-// ============================================================================
-
-console.log('TEST SUITE 7: Partial Hydration\n');
-
-test('Partially hydrate subtree', () => {
-  let clicked = false;
-  const vnode = new VNode({
-    tag: 'button',
-    events: { click: () => { clicked = true; } },
-    children: ['Click']
-  });
-  const ssrElement = createSSRHTML(vnode);
-  
-  Hydrator.hydratePartial(ssrElement, vnode);
-  
-  assert(Hydrator.isHydrated(ssrElement), 'Should be hydrated');
-  ssrElement.click();
-  assert(clicked === true, 'Should attach events');
-});
-
-test('Partial hydration requires both arguments', () => {
-  try {
-    Hydrator.hydratePartial(null, new VNode({ tag: 'div' }));
-    throw new Error('Should have thrown');
-  } catch (error) {
-    assertIncludes(error.message, 'required', 'Should mention requirements');
-  }
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 8: Dehydration
-// ============================================================================
-
-console.log('TEST SUITE 8: Dehydration\n');
-
-test('Dehydrate element', () => {
-  const vnode = new VNode({
-    tag: 'button',
-    events: { click: () => {} },
-    children: ['Button']
-  });
-  const ssrElement = createSSRHTML(vnode);
-  
-  Hydrator.hydrate(ssrElement, vnode);
-  assert(Hydrator.isHydrated(ssrElement), 'Should be hydrated');
-  
-  Hydrator.dehydrate(ssrElement);
-  
-  assert(!Hydrator.isHydrated(ssrElement), 'Should not be hydrated');
-  assert(ssrElement._eventListeners === null || ssrElement._eventListeners === undefined, 'Should remove event listeners');
-});
-
-test('Dehydrate recursively', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    children: [
-      new VNode({
-        tag: 'button',
-        events: { click: () => {} },
-        children: ['Button']
-      })
-    ]
-  });
-  const ssrElement = createSSRHTML(vnode);
-  
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  const button = ssrElement.querySelector('button');
-  assert(button._eventListeners !== undefined, 'Button should have events');
-  
-  Hydrator.dehydrate(ssrElement);
-  
-  assert(!Hydrator.isHydrated(button), 'Button should be dehydrated');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 9: Hydration Verification
-// ============================================================================
-
-console.log('TEST SUITE 9: Hydration Verification\n');
-
-test('Verify successful hydration', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    children: [
-      new VNode({ tag: 'span', children: ['Text'] })
-    ]
-  });
-  const ssrElement = createSSRHTML(vnode);
-  
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  const report = Hydrator.verifyHydration(ssrElement, vnode);
-  
-  assert(report.success === true, 'Should succeed');
-  assertEquals(report.mismatches.length, 0, 'Should have no mismatches');
-  assert(report.stats.nodesMatched > 0, 'Should match nodes');
-});
-
-test('Detect tag mismatches', () => {
-  const vnode = new VNode({ tag: 'div', children: ['Content'] });
-  const ssrElement = document.createElement('span'); // Wrong tag!
-  ssrElement.textContent = 'Content';
-  
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  const report = Hydrator.verifyHydration(ssrElement, vnode);
-  
-  assert(report.success === false, 'Should fail');
-  assert(report.mismatches.length > 0, 'Should have mismatches');
-  assertEquals(report.mismatches[0].type, 'tag-mismatch', 'Should detect tag mismatch');
-});
-
-test('Report verification statistics', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    events: { click: () => {} },
-    ref: (el) => {},
-    isStateBinding: true,
-    statefulWidgetId: 'test',
-    stateProperty: 'value',
-    children: ['Content']
-  });
-  const ssrElement = createSSRHTML(vnode);
-  
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  const report = Hydrator.verifyHydration(ssrElement, vnode);
-  
-  assert(report.stats.nodesChecked > 0, 'Should check nodes');
-  assert(report.stats.eventListenersAttached > 0, 'Should attach events');
-  assert(report.stats.refsRestored > 0, 'Should restore refs');
-  assert(report.stats.stateBindings > 0, 'Should count state bindings');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 10: Hydration Statistics
-// ============================================================================
-
-console.log('TEST SUITE 10: Hydration Statistics\n');
-
-test('Get hydration statistics', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    events: { click: () => {} },
-    ref: (el) => {},
-    children: [
-      new VNode({ tag: 'span', children: ['Child'] })
-    ]
-  });
-  const ssrElement = createSSRHTML(vnode);
-  
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  const stats = Hydrator.getStats(ssrElement);
-  
-  assert(stats.isHydrated === true, 'Should be hydrated');
-  assert(stats.totalElements > 0, 'Should count elements');
-  assert(stats.elementsWithEvents > 0, 'Should count elements with events');
-  assert(stats.elementsWithRefs > 0, 'Should count elements with refs');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 11: Complex Scenarios
-// ============================================================================
-
-console.log('TEST SUITE 11: Complex Scenarios\n');
-
-test('Hydrate deeply nested structure', () => {
-  let current = new VNode({ tag: 'span', children: ['Deep'] });
-  for (let i = 0; i < 5; i++) {
-    current = new VNode({ tag: 'div', children: [current] });
-  }
-  
-  const ssrElement = createSSRHTML(current);
-  Hydrator.hydrate(ssrElement, current);
-  
-  assert(Hydrator.isHydrated(ssrElement), 'Should hydrate deep structure');
-  assertIncludes(ssrElement.textContent, 'Deep', 'Should preserve content');
-});
-
-test('Hydrate list with events', () => {
-  const clickCounts = [0, 0, 0];
-  const items = ['Item 1', 'Item 2', 'Item 3'];
-  
-  const vnode = new VNode({
-    tag: 'ul',
-    children: items.map((item, i) => new VNode({
-      tag: 'li',
-      key: `item-${i}`,
-      events: { click: () => { clickCounts[i]++; } },
-      children: [item]
-    }))
-  });
-  
-  const ssrElement = createSSRHTML(vnode);
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  const lis = ssrElement.querySelectorAll('li');
-  lis[0].click();
-  lis[1].click();
-  lis[2].click();
-  
-  assertEquals(clickCounts[0], 1, 'Should handle first item');
-  assertEquals(clickCounts[1], 1, 'Should handle second item');
-  assertEquals(clickCounts[2], 1, 'Should handle third item');
-});
-
-test('Hydrate complete app structure', () => {
-  let fabClicked = false;
-  
-  const vnode = new VNode({
-    tag: 'div',
-    props: { className: 'fjs-scaffold' },
-    children: [
-      new VNode({
-        tag: 'header',
-        props: { className: 'fjs-app-bar' },
-        children: ['App Title']
-      }),
-      new VNode({
-        tag: 'main',
-        children: [
-          new VNode({
-            tag: 'div',
-            children: [
-              new VNode({ tag: 'span', children: ['Count: '] }),
-              new VNode({
-                tag: 'span',
-                isStateBinding: true,
-                statefulWidgetId: 'counter',
-                stateProperty: 'count',
-                children: ['0']
-              })
-            ]
-          })
-        ]
-      }),
-      new VNode({
-        tag: 'button',
-        props: { className: 'fjs-fab' },
-        events: { click: () => { fabClicked = true; } },
-        children: ['+']
-      })
-    ]
-  });
-  
-  const ssrElement = createSSRHTML(vnode);
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  // Verify structure
-  assert(ssrElement.querySelector('header') !== null, 'Should have header');
-  assert(ssrElement.querySelector('main') !== null, 'Should have main');
-  
-  // Verify events work
-  const fab = ssrElement.querySelector('.fjs-fab');
-  fab.click();
-  assert(fabClicked === true, 'Should handle FAB click');
-  
-  // Verify state bindings
-  assert(ssrElement._stateBindings.length === 1, 'Should have state binding');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 12: Error Handling
-// ============================================================================
-
-console.log('TEST SUITE 12: Error Handling\n');
-
-test('Handle missing DOM nodes gracefully', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    children: [
-      new VNode({ tag: 'span', children: ['Child'] })
-    ]
-  });
-  const ssrElement = document.createElement('div'); // Empty, no children
-  
-  // Should not throw
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  assert(Hydrator.isHydrated(ssrElement), 'Should complete hydration');
-});
-
-test('Handle text content mismatches', () => {
-  const vnode = new VNode({ tag: 'div', children: ['Expected text'] });
-  const ssrElement = document.createElement('div');
-  ssrElement.textContent = 'Different text'; // Mismatch
-  
-  // Should not throw, but may warn
-  Hydrator.hydrate(ssrElement, vnode);
-  
-  assert(Hydrator.isHydrated(ssrElement), 'Should complete hydration');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUMMARY
-// ============================================================================
-
-console.log('='.repeat(80));
-console.log('📊 TEST SUMMARY');
-console.log('='.repeat(80));
-console.log(`✓ Passed: ${testsPassed}`);
-console.log(`✗ Failed: ${testsFailed}`);
-console.log(`Total: ${testsPassed + testsFailed}`);
-console.log('='.repeat(80) + '\n');
-
-if (testsFailed === 0) {
-  console.log('🎉 All tests passed!\n');
-  process.exit(0);
-} else {
-  console.log('❌ Some tests failed.\n');
-  process.exit(1);
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/vdom/test/patch_applier.test.js b/packages/flutterjs_engine/src/vdom/test/patch_applier.test.js
deleted file mode 100644
index 3bd4eb45..00000000
--- a/packages/flutterjs_engine/src/vdom/test/patch_applier.test.js
+++ /dev/null
@@ -1,293 +0,0 @@
-/**
- * PatchApplier Tests - WITH DEBUGGING
- * Comprehensive logging to identify failures
- */
-
-import { PatchApplier } from '../src/patch_applier.js';
-import { JSDOM } from 'jsdom';
-
-const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
-global.document = dom.window.document;
-global.window = dom.window;
-
-console.log('\n' + '='.repeat(80));
-console.log('🧪 PATCH APPLIER TESTS WITH DEBUG LOGGING');
-console.log('='.repeat(80) + '\n');
-
-let passed = 0;
-let failed = 0;
-
-function logDOM(element, label) {
-  console.log(`\n  [DOM] ${label}:`);
-  console.log(`    Tag: ${element.tagName}`);
-  console.log(`    Children: ${element.childNodes.length}`);
-  if (element.childNodes.length > 0) {
-    Array.from(element.childNodes).forEach((child, i) => {
-      console.log(`      [${i}] ${child.nodeType === 3 ? 'TEXT' : child.tagName} ${child.textContent ? `"${child.textContent}"` : ''}`);
-    });
-  }
-  console.log(`    className: ${element.className}`);
-  console.log(`    id: ${element.id}`);
-  if (element.style.color) console.log(`    style.color: ${element.style.color}`);
-  if (element.style.padding) console.log(`    style.padding: ${element.style.padding}`);
-  if (element.value) console.log(`    value: ${element.value}`);
-}
-
-function test(name, fn) {
-  console.log(`\n▶ Testing: ${name}`);
-  try {
-    fn();
-    console.log(`✓ PASSED`);
-    passed++;
-  } catch (error) {
-    console.log(`✗ FAILED`);
-    console.log(`  Error: ${error.message}`);
-    failed++;
-  }
-}
-
-function assert(condition, message) {
-  if (!condition) throw new Error(message || 'Assertion failed');
-}
-
-function assertEquals(actual, expected, message) {
-  if (actual !== expected) {
-    throw new Error(message || `Expected "${expected}", got "${actual}"`);
-  }
-}
-
-class VNode {
-  constructor({ tag, props = {}, style = {}, children = [], events = {} }) {
-    this.tag = tag;
-    this.props = props;
-    this.style = style;
-    this.children = children;
-    this.events = events;
-  }
-}
-
-class Patch {
-  constructor(type, index, oldNode = null, newNode = null) {
-    this.type = type;
-    this.index = index;
-    this.oldNode = oldNode;
-    this.newNode = newNode;
-    this.value = null;
-  }
-}
-
-// ============================================================================
-// TEST SUITE: UPDATE_PROPS
-// ============================================================================
-
-console.log('\n' + '='.repeat(80));
-console.log('TEST SUITE: UPDATE_PROPS');
-console.log('='.repeat(80));
-
-test('UPDATE_PROPS changes className', () => {
-  const parent = document.createElement('div');
-  
-  const element = document.createElement('button');
-  element.className = 'btn-old';
-  parent.appendChild(element);
-
-  logDOM(parent, 'BEFORE patch');
-  console.log(`  Index to find: '0'`);
-  console.log(`  Will find element: parent.childNodes[0] (the button)`);
-
-  const patch = new Patch('UPDATE_PROPS', '0');
-  patch.value = {
-    changes: {
-      added: {},
-      updated: { className: 'btn-new' },
-      removed: {}
-    }
-  };
-
-  console.log(`  Patch:`, patch);
-  
-  const result = PatchApplier.apply(parent, [patch]);
-  console.log(`  Apply result:`, result);
-
-  logDOM(parent, 'AFTER patch');
-  console.log(`  Expected className: 'btn-new'`);
-  console.log(`  Actual className: '${parent.childNodes[0].className}'`);
-
-  assertEquals(parent.childNodes[0].className, 'btn-new');
-});
-
-test('UPDATE_STYLE changes color', () => {
-  const parent = document.createElement('div');
-  
-  const element = document.createElement('div');
-  element.style.color = 'red';
-  parent.appendChild(element);
-
-  logDOM(parent, 'BEFORE patch');
-  console.log(`  Index to find: '0'`);
-
-  const patch = new Patch('UPDATE_STYLE', '0');
-  patch.value = {
-    changes: {
-      added: {},
-      updated: { color: 'blue' },
-      removed: {}
-    }
-  };
-
-  console.log(`  Patch:`, patch);
-
-  const result = PatchApplier.apply(parent, [patch]);
-  console.log(`  Apply result:`, result);
-
-  logDOM(parent, 'AFTER patch');
-  console.log(`  Expected style.color: 'blue'`);
-  console.log(`  Actual style.color: '${parent.childNodes[0].style.color}'`);
-
-  assertEquals(parent.childNodes[0].style.color, 'blue');
-});
-
-test('UPDATE_PROPS input value', () => {
-  const parent = document.createElement('div');
-  
-  const input = document.createElement('input');
-  input.type = 'text';
-  input.value = 'old';
-  parent.appendChild(input);
-
-  logDOM(parent, 'BEFORE patch');
-
-  const patch = new Patch('UPDATE_PROPS', '0');
-  patch.value = {
-    changes: {
-      added: {},
-      updated: { value: 'new' },
-      removed: {}
-    }
-  };
-
-  console.log(`  Patch:`, patch);
-
-  const result = PatchApplier.apply(parent, [patch]);
-  console.log(`  Apply result:`, result);
-
-  logDOM(parent, 'AFTER patch');
-  console.log(`  Expected value: 'new'`);
-  console.log(`  Actual value: '${parent.childNodes[0].value}'`);
-
-  assertEquals(parent.childNodes[0].value, 'new');
-});
-
-test('UPDATE_TEXT on element', () => {
-  const parent = document.createElement('div');
-  
-  const element = document.createElement('span');
-  element.textContent = 'Old text';
-  parent.appendChild(element);
-
-  logDOM(parent, 'BEFORE patch');
-
-  const patch = new Patch('UPDATE_TEXT', '0');
-  patch.value = 'New text';
-
-  console.log(`  Patch:`, patch);
-
-  const result = PatchApplier.apply(parent, [patch]);
-  console.log(`  Apply result:`, result);
-
-  logDOM(parent, 'AFTER patch');
-  console.log(`  Expected textContent: 'New text'`);
-  console.log(`  Actual textContent: '${parent.childNodes[0].textContent}'`);
-
-  assertEquals(parent.childNodes[0].textContent, 'New text');
-});
-
-// ============================================================================
-// TEST SUITE: REPLACE
-// ============================================================================
-
-console.log('\n' + '='.repeat(80));
-console.log('TEST SUITE: REPLACE');
-console.log('='.repeat(80));
-
-test('REPLACE element with new one', () => {
-  const parent = document.createElement('div');
-
-  const oldChild = document.createElement('span');
-  oldChild.textContent = 'Old';
-  parent.appendChild(oldChild);
-
-  logDOM(parent, 'BEFORE patch');
-  console.log(`  Old element tag: ${oldChild.tagName}`);
-
-  const newVNode = new VNode({ tag: 'p', children: ['New'] });
-  const patch = new Patch('REPLACE', '0', null, newVNode);
-
-  console.log(`  Patch:`, patch);
-  console.log(`  newVNode:`, newVNode);
-
-  const result = PatchApplier.apply(parent, [patch]);
-  console.log(`  Apply result:`, result);
-
-  logDOM(parent, 'AFTER patch');
-  console.log(`  Expected tag: 'P'`);
-  console.log(`  Actual tag: '${parent.childNodes[0].tagName}'`);
-  console.log(`  Expected text: 'New'`);
-  console.log(`  Actual text: '${parent.childNodes[0].textContent}'`);
-
-  assertEquals(parent.childNodes[0].tagName, 'P');
-  assertEquals(parent.childNodes[0].textContent, 'New');
-});
-
-// ============================================================================
-// TEST SUITE: CREATE
-// ============================================================================
-
-console.log('\n' + '='.repeat(80));
-console.log('TEST SUITE: CREATE');
-console.log('='.repeat(80));
-
-test('CREATE adds element to parent', () => {
-  const parent = document.createElement('div');
-
-  logDOM(parent, 'BEFORE patch (empty)');
-  console.log(`  Parent has ${parent.childNodes.length} children`);
-
-  const newVNode = new VNode({ tag: 'span', children: ['New'] });
-  const patch = new Patch('CREATE', '0', null, newVNode);
-
-  console.log(`  Patch:`, patch);
-  console.log(`  newVNode:`, newVNode);
-
-  const result = PatchApplier.apply(parent, [patch]);
-  console.log(`  Apply result:`, result);
-
-  logDOM(parent, 'AFTER patch');
-  console.log(`  Expected children: 1`);
-  console.log(`  Actual children: ${parent.childNodes.length}`);
-  console.log(`  Expected text: 'New'`);
-  console.log(`  Actual text: '${parent.childNodes[0]?.textContent || 'N/A'}'`);
-
-  assertEquals(parent.childNodes.length, 1);
-  assertEquals(parent.childNodes[0].textContent, 'New');
-});
-
-// ============================================================================
-// TEST SUMMARY
-// ============================================================================
-
-console.log('\n' + '='.repeat(80));
-console.log('📊 TEST SUMMARY');
-console.log('='.repeat(80));
-console.log(`✓ Passed: ${passed}`);
-console.log(`✗ Failed: ${failed}`);
-console.log(`Total: ${passed + failed}`);
-console.log('='.repeat(80) + '\n');
-
-if (failed === 0) {
-  console.log('🎉 All tests passed!\n');
-  process.exit(0);
-} else {
-  console.log(`❌ ${failed} test(s) failed.\n`);
-  process.exit(1);
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/vdom/test/render_engine.test.js b/packages/flutterjs_engine/src/vdom/test/render_engine.test.js
deleted file mode 100644
index c713c577..00000000
--- a/packages/flutterjs_engine/src/vdom/test/render_engine.test.js
+++ /dev/null
@@ -1,643 +0,0 @@
-/**
- * RenderEngine & SSRRenderer Tests
- * Comprehensive testing for universal rendering and SSR
- */
-
-import { RenderEngine } from '../src/render_engine.js';
-import { SSRRenderer } from '../src/ssr_renderer.js';
-import { VNode } from '../src/vnode.js';
-import { JSDOM } from 'jsdom';
-
-// Setup DOM environment
-const dom = new JSDOM('<!DOCTYPE html><html><body><div id="root"></div></body></html>');
-global.document = dom.window.document;
-global.window = dom.window;
-global.HTMLElement = dom.window.HTMLElement;
-global.Node = dom.window.Node;
-global.performance = { now: () => Date.now() };
-
-console.log('\n' + '='.repeat(80));
-console.log('🧪 RENDER ENGINE & SSR TESTS');
-console.log('='.repeat(80) + '\n');
-
-let testsPassed = 0;
-let testsFailed = 0;
-
-function test(name, fn) {
-  try {
-    fn();
-    console.log(`✓ ${name}`);
-    testsPassed++;
-  } catch (error) {
-    console.log(`✗ ${name}`);
-    console.log(`  Error: ${error.message}`);
-    if (error.stack) {
-      console.log(`  ${error.stack.split('\n')[1]}`);
-    }
-    testsFailed++;
-  }
-}
-
-function assert(condition, message) {
-  if (!condition) {
-    throw new Error(message || 'Assertion failed');
-  }
-}
-
-function assertEquals(actual, expected, message) {
-  if (actual !== expected) {
-    throw new Error(
-      message || `Expected "${expected}", got "${actual}"`
-    );
-  }
-}
-
-function assertIncludes(haystack, needle, message) {
-  if (!haystack || !haystack.includes(needle)) {
-    throw new Error(
-      message || `Expected to include "${needle}"`
-    );
-  }
-}
-
-// ============================================================================
-// TEST SUITE 1: Environment Detection
-// ============================================================================
-
-console.log('TEST SUITE 1: Environment Detection\n');
-
-test('Detect client environment', () => {
-  const env = RenderEngine.detectEnvironment();
-  assertEquals(env, 'client', 'Should detect client (window exists)');
-});
-
-test('Detect environment with window', () => {
-  // Window exists in our test environment
-  assert(typeof window !== 'undefined', 'Window should exist');
-  const env = RenderEngine.detectEnvironment();
-  assertEquals(env, 'client', 'Should be client');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 2: SSRRenderer - Basic Rendering
-// ============================================================================
-
-console.log('TEST SUITE 2: SSRRenderer - Basic Rendering\n');
-
-test('Render simple text to HTML', () => {
-  const html = SSRRenderer.render('Hello World');
-  assertEquals(html, 'Hello World', 'Should render text');
-});
-
-test('Render simple element to HTML', () => {
-  const vnode = new VNode({ tag: 'div', children: ['Content'] });
-  const html = SSRRenderer.render(vnode);
-  
-  assertIncludes(html, '<div>', 'Should have opening tag');
-  assertIncludes(html, 'Content', 'Should have content');
-  assertIncludes(html, '</div>', 'Should have closing tag');
-});
-
-test('Render element with props', () => {
-  const vnode = new VNode({
-    tag: 'button',
-    props: { className: 'btn', id: 'my-btn', disabled: true },
-    children: ['Click']
-  });
-  const html = SSRRenderer.render(vnode);
-  
-  assertIncludes(html, 'class="btn"', 'Should have class');
-  assertIncludes(html, 'id="my-btn"', 'Should have id');
-  assertIncludes(html, 'disabled', 'Should have disabled');
-  assertIncludes(html, 'Click', 'Should have content');
-});
-
-test('Render element with styles', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    style: { color: 'red', fontSize: '18px' }
-  });
-  const html = SSRRenderer.render(vnode);
-  
-  assertIncludes(html, 'style=', 'Should have style attribute');
-  assertIncludes(html, 'color: red', 'Should have color');
-  assertIncludes(html, 'font-size: 18px', 'Should convert camelCase');
-});
-
-test('Render nested elements', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    children: [
-      new VNode({ tag: 'h1', children: ['Title'] }),
-      new VNode({ tag: 'p', children: ['Paragraph'] })
-    ]
-  });
-  const html = SSRRenderer.render(vnode);
-  
-  assertIncludes(html, '<h1>Title</h1>', 'Should have h1');
-  assertIncludes(html, '<p>Paragraph</p>', 'Should have p');
-});
-
-test('Render null/undefined', () => {
-  assertEquals(SSRRenderer.render(null), '', 'Should render empty');
-  assertEquals(SSRRenderer.render(undefined), '', 'Should render empty');
-});
-
-test('Render number', () => {
-  const html = SSRRenderer.render(42);
-  assertEquals(html, '42', 'Should convert to string');
-});
-
-test('Render boolean', () => {
-  assertEquals(SSRRenderer.render(true), '', 'Should render empty');
-  assertEquals(SSRRenderer.render(false), '', 'Should render empty');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 3: SSRRenderer - Special Cases
-// ============================================================================
-
-console.log('TEST SUITE 3: SSRRenderer - Special Cases\n');
-
-test('Render void tags (self-closing)', () => {
-  const vnode = new VNode({
-    tag: 'img',
-    props: { src: 'image.jpg', alt: 'Test' }
-  });
-  const html = SSRRenderer.render(vnode);
-  
-  assertIncludes(html, '<img', 'Should have img tag');
-  assert(!html.includes('</img>'), 'Should not have closing tag');
-});
-
-test('Escape HTML in text', () => {
-  const html = SSRRenderer.render('<script>alert("xss")</script>');
-  
-  assertIncludes(html, '&lt;script&gt;', 'Should escape <');
-  assertIncludes(html, '&lt;/script&gt;', 'Should escape </');
-  assert(!html.includes('<script>'), 'Should not have raw script tag');
-});
-
-test('Escape HTML in attributes', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    props: { title: '<script>alert("xss")</script>' }
-  });
-  const html = SSRRenderer.render(vnode);
-  
-  assertIncludes(html, '&lt;script&gt;', 'Should escape attribute value');
-});
-
-test('Handle array of VNodes', () => {
-  const vnodes = [
-    new VNode({ tag: 'div', children: ['One'] }),
-    new VNode({ tag: 'div', children: ['Two'] })
-  ];
-  const html = SSRRenderer.render(vnodes);
-  
-  assertIncludes(html, '>One<', 'Should have first');
-  assertIncludes(html, '>Two<', 'Should have second');
-});
-
-test('Render boolean attributes', () => {
-  const vnode = new VNode({
-    tag: 'input',
-    props: { disabled: true, checked: false }
-  });
-  const html = SSRRenderer.render(vnode);
-  
-  assertIncludes(html, 'disabled', 'Should include true boolean');
-  assert(!html.includes('checked'), 'Should omit false boolean');
-});
-
-test('Convert className to class', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    props: { className: 'my-class' }
-  });
-  const html = SSRRenderer.render(vnode);
-  
-  assertIncludes(html, 'class="my-class"', 'Should convert className');
-  assert(!html.includes('className'), 'Should not have className');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 4: SSRRenderer - Complete Documents
-// ============================================================================
-
-console.log('TEST SUITE 4: SSRRenderer - Complete Documents\n');
-
-test('Render complete HTML document', () => {
-  const vnode = new VNode({ tag: 'div', children: ['Content'] });
-  const html = SSRRenderer.renderDocument(vnode, {
-    title: 'Test App'
-  });
-  
-  assertIncludes(html, '<!DOCTYPE html>', 'Should have doctype');
-  assertIncludes(html, '<html', 'Should have html tag');
-  assertIncludes(html, '<head>', 'Should have head');
-  assertIncludes(html, '<title>Test App</title>', 'Should have title');
-  assertIncludes(html, '<body>', 'Should have body');
-  assertIncludes(html, 'Content', 'Should have content');
-});
-
-test('Include meta tags', () => {
-  const vnode = new VNode({ tag: 'div' });
-  const html = SSRRenderer.renderDocument(vnode, {
-    meta: {
-      description: 'Test description',
-      'og:title': 'OG Title'
-    }
-  });
-  
-  assertIncludes(html, 'name="description"', 'Should have meta tag');
-  assertIncludes(html, 'property="og:title"', 'Should have OG tag');
-});
-
-test('Include style links', () => {
-  const vnode = new VNode({ tag: 'div' });
-  const html = SSRRenderer.renderDocument(vnode, {
-    styles: ['styles.css', 'theme.css']
-  });
-  
-  assertIncludes(html, 'href="styles.css"', 'Should have first style');
-  assertIncludes(html, 'href="theme.css"', 'Should have second style');
-});
-
-test('Include script tags', () => {
-  const vnode = new VNode({ tag: 'div' });
-  const html = SSRRenderer.renderDocument(vnode, {
-    scripts: ['app.js', 'vendor.js']
-  });
-  
-  assertIncludes(html, 'src="app.js"', 'Should have first script');
-  assertIncludes(html, 'src="vendor.js"', 'Should have second script');
-  assertIncludes(html, 'defer', 'Should defer scripts');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 5: RenderEngine - Server Rendering
-// ============================================================================
-
-console.log('TEST SUITE 5: RenderEngine - Server Rendering\n');
-
-test('Generate hydration data', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    props: { className: 'test' },
-    metadata: { widgetType: 'Container' },
-    children: [
-      new VNode({
-        tag: 'button',
-        events: { click: () => {} },
-        children: ['Click']
-      })
-    ]
-  });
-  
-  const data = RenderEngine.generateHydrationData(vnode);
-  
-  assert(data.version !== undefined, 'Should have version');
-  assert(data.timestamp !== undefined, 'Should have timestamp');
-  assert(Array.isArray(data.widgets), 'Should have widgets array');
-  assert(Array.isArray(data.events), 'Should have events array');
-});
-
-test('Extract critical CSS', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    props: { className: 'fjs-column fjs-center' },
-    children: [
-      new VNode({
-        tag: 'span',
-        props: { className: 'fjs-text' }
-      })
-    ]
-  });
-  
-  const css = RenderEngine.extractCriticalCSS(vnode);
-  
-  assert(typeof css === 'string', 'Should return CSS string');
-  // Should contain FlutterJS widget styles
-});
-
-test('Build HTML document', () => {
-  const vnode = new VNode({ tag: 'div', children: ['Test'] });
-  const html = RenderEngine.buildHTMLDocument({
-    title: 'Test App',
-    meta: { description: 'Test' },
-    criticalCSS: '.test { color: red; }',
-    bodyHTML: '<div>Test</div>',
-    hydrationData: { version: '1.0.0' },
-    scripts: [],
-    styles: [],
-    includeRuntime: true
-  });
-  
-  assertIncludes(html, '<!DOCTYPE html>', 'Should have doctype');
-  assertIncludes(html, '<title>Test App</title>', 'Should have title');
-  assertIncludes(html, '.test { color: red; }', 'Should have critical CSS');
-  assertIncludes(html, '__FLUTTERJS_HYDRATION_DATA__', 'Should have hydration script');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 6: RenderEngine - Client Rendering
-// ============================================================================
-
-console.log('TEST SUITE 6: RenderEngine - Client Rendering\n');
-
-test('Render on client', () => {
-  const container = document.createElement('div');
-  const vnode = new VNode({ tag: 'div', children: ['Client content'] });
-  
-  const element = RenderEngine.renderClient(vnode, container);
-  
-  assert(element !== null, 'Should return element');
-  assertEquals(container.querySelector('div').textContent, 'Client content');
-});
-
-test('Client render requires target', () => {
-  const vnode = new VNode({ tag: 'div' });
-  
-  try {
-    RenderEngine.renderClient(vnode, null);
-    throw new Error('Should have thrown');
-  } catch (error) {
-    assertIncludes(error.message, 'Target element', 'Should mention target');
-  }
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 7: RenderEngine - Universal Render
-// ============================================================================
-
-console.log('TEST SUITE 7: RenderEngine - Universal Render\n');
-
-test('Universal render in client mode', () => {
-  const container = document.createElement('div');
-  const vnode = new VNode({ tag: 'div', children: ['Universal'] });
-  
-  // Will use client rendering since window exists
-  const result = RenderEngine.render(vnode, container);
-  
-  assert(result !== null, 'Should render');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 8: RenderEngine - Hydration
-// ============================================================================
-
-console.log('TEST SUITE 8: RenderEngine - Hydration\n');
-
-test('Generate hydration data with widgets', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    metadata: { widgetType: 'Container', flutterProps: { padding: 16 } },
-    key: 'container-1',
-    children: [
-      new VNode({
-        tag: 'span',
-        metadata: { widgetType: 'Text' },
-        children: ['Text']
-      })
-    ]
-  });
-  
-  const data = RenderEngine.generateHydrationData(vnode);
-  
-  assert(data.widgets.length >= 1, 'Should have widgets');
-  assertEquals(data.widgets[0].type, 'Container', 'Should have correct type');
-  assertEquals(data.widgets[0].key, 'container-1', 'Should have key');
-});
-
-test('Generate hydration data with state bindings', () => {
-  const vnode = new VNode({
-    tag: 'span',
-    isStateBinding: true,
-    statefulWidgetId: 'counter',
-    stateProperty: 'count',
-    children: ['0']
-  });
-  
-  const data = RenderEngine.generateHydrationData(vnode);
-  
-  assert(data.stateBindings.length === 1, 'Should have state binding');
-  assertEquals(data.stateBindings[0].widgetId, 'counter');
-  assertEquals(data.stateBindings[0].property, 'count');
-});
-
-test('Generate hydration data with events', () => {
-  const vnode = new VNode({
-    tag: 'button',
-    events: { click: () => {}, hover: () => {} },
-    children: ['Click']
-  });
-  
-  const data = RenderEngine.generateHydrationData(vnode);
-  
-  assert(data.events.length === 1, 'Should have events entry');
-  assert(data.events[0].events.includes('click'), 'Should have click');
-  assert(data.events[0].events.includes('hover'), 'Should have hover');
-});
-
-test('Generate hydration data with refs', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    ref: (el) => {},
-    children: ['Content']
-  });
-  
-  const data = RenderEngine.generateHydrationData(vnode);
-  
-  assert(data.refs.length === 1, 'Should have ref entry');
-  assert(data.refs[0].hasRef === true, 'Should mark has ref');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 9: RenderEngine - Statistics
-// ============================================================================
-
-console.log('TEST SUITE 9: RenderEngine - Statistics\n');
-
-test('Get rendering statistics', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    props: { className: 'container main' },
-    events: { click: () => {} },
-    children: [
-      new VNode({
-        tag: 'h1',
-        props: { className: 'title' },
-        children: ['Title']
-      }),
-      new VNode({
-        tag: 'p',
-        children: ['Paragraph']
-      })
-    ]
-  });
-  
-  const stats = RenderEngine.getStats(vnode);
-  
-  assert(stats.totalNodes > 0, 'Should count total nodes');
-  assert(stats.elementNodes > 0, 'Should count element nodes');
-  assert(stats.depth >= 1, 'Should calculate depth');
-  assert(stats.classes >= 2, 'Should count unique classes');
-  assert(stats.events > 0, 'Should count events');
-});
-
-test('Calculate correct depth', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    children: [
-      new VNode({
-        tag: 'div',
-        children: [
-          new VNode({
-            tag: 'div',
-            children: ['Deep']
-          })
-        ]
-      })
-    ]
-  });
-  
-  const stats = RenderEngine.getStats(vnode);
-  assert(stats.depth >= 3, 'Should calculate correct depth');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 10: Edge Cases
-// ============================================================================
-
-console.log('TEST SUITE 10: Edge Cases\n');
-
-test('Handle deeply nested structure in SSR', () => {
-  let current = new VNode({ tag: 'span', children: ['Deep'] });
-  for (let i = 0; i < 10; i++) {
-    current = new VNode({ tag: 'div', children: [current] });
-  }
-  
-  const html = SSRRenderer.render(current);
-  
-  assertIncludes(html, 'Deep', 'Should render deep content');
-  assert(html.includes('<div>'), 'Should have div tags');
-});
-
-test('Handle empty VNode tree', () => {
-  const vnode = new VNode({ tag: 'div', children: [] });
-  const html = SSRRenderer.render(vnode);
-  
-  assertEquals(html, '<div></div>', 'Should render empty div');
-});
-
-test('Handle VNode with null children', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    children: [null, 'text', undefined, new VNode({ tag: 'span' })]
-  });
-  const html = SSRRenderer.render(vnode);
-  
-  assertIncludes(html, 'text', 'Should include valid content');
-  assertIncludes(html, '<span>', 'Should include span');
-});
-
-test('Escape special characters in styles', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    style: { content: '"quoted"' }
-  });
-  const html = SSRRenderer.render(vnode);
-  
-  assertIncludes(html, 'style=', 'Should have style');
-  assertIncludes(html, '&quot;', 'Should escape quotes');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 11: Meta Tag Generation
-// ============================================================================
-
-console.log('TEST SUITE 11: Meta Tag Generation\n');
-
-test('Generate description meta tag', () => {
-  const tags = RenderEngine.generateMetaTags({
-    description: 'Test description'
-  });
-  
-  assertIncludes(tags, 'name="description"', 'Should have description');
-  assertIncludes(tags, 'Test description', 'Should have content');
-});
-
-test('Generate Open Graph tags', () => {
-  const tags = RenderEngine.generateMetaTags({
-    ogTitle: 'OG Title',
-    ogDescription: 'OG Description',
-    ogImage: 'https://example.com/image.jpg'
-  });
-  
-  assertIncludes(tags, 'property="og:title"', 'Should have og:title');
-  assertIncludes(tags, 'property="og:description"', 'Should have og:description');
-  assertIncludes(tags, 'property="og:image"', 'Should have og:image');
-});
-
-test('Generate Twitter Card tags', () => {
-  const tags = RenderEngine.generateMetaTags({
-    twitterCard: 'summary_large_image'
-  });
-  
-  assertIncludes(tags, 'name="twitter:card"', 'Should have twitter card');
-});
-
-test('Generate custom meta tags', () => {
-  const tags = RenderEngine.generateMetaTags({
-    custom: [
-      { name: 'custom-tag', content: 'custom-value' },
-      { property: 'og:custom', content: 'custom-og' }
-    ]
-  });
-  
-  assertIncludes(tags, 'name="custom-tag"', 'Should have custom name tag');
-  assertIncludes(tags, 'property="og:custom"', 'Should have custom property tag');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUMMARY
-// ============================================================================
-
-console.log('='.repeat(80));
-console.log('📊 TEST SUMMARY');
-console.log('='.repeat(80));
-console.log(`✓ Passed: ${testsPassed}`);
-console.log(`✗ Failed: ${testsFailed}`);
-console.log(`Total: ${testsPassed + testsFailed}`);
-console.log('='.repeat(80) + '\n');
-
-if (testsFailed === 0) {
-  console.log('🎉 All tests passed!\n');
-  process.exit(0);
-} else {
-  console.log('❌ Some tests failed.\n');
-  process.exit(1);
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/vdom/test/runtime.test.js b/packages/flutterjs_engine/src/vdom/test/runtime.test.js
deleted file mode 100644
index cef63fe8..00000000
--- a/packages/flutterjs_engine/src/vdom/test/runtime.test.js
+++ /dev/null
@@ -1,1214 +0,0 @@
-/**
- * FlutterJS Runtime Tests - Silent Mode + Full Log File
- */
-
-import fs from 'fs';
-import path from 'path';
-
-// ============================================================================
-// SILENT LOGGER - No console spam, everything goes to file
-// ============================================================================
-
-class SilentLogger {
-  constructor() {
-    this.logs = [];
-    this.startTime = Date.now();
-  }
-
-  log(...args) {
-    const timestamp = new Date().toISOString().replace('T', ' ').slice(0, 23);
-    const line = args
-      .map(arg => (typeof arg === 'object' ? JSON.stringify(arg) : String(arg)))
-      .join(' ');
-    this.logs.push(`[${timestamp}] ${line}`);
-  }
-
-  // Shortcuts
-  info(...args) { this.log('INFO', ...args); }
-  warn(...args) { this.log('WARN', ...args); }
-  error(...args) { this.log('ERROR', ...args); }
-  success(...args) { this.log('SUCCESS', ...args); }
-
-  // Save everything to file at the end
-  save() {
-    const logPath = path.resolve('test-run-full.log');
-    const header = [
-      '='.repeat(80),
-      'FLUTTERJS RUNTIME TEST - FULL LOG',
-      `Started: ${new Date(this.startTime).toISOString()}`,
-      `Ended:   ${new Date().toISOString()}`,
-      `Duration: ${((Date.now() - this.startTime) / 1000).toFixed(2)}s`,
-      `Total lines: ${this.logs.length}`,
-      '='.repeat(80),
-      ''
-    ].join('\n');
-
-    fs.writeFileSync(logPath, header + this.logs.join('\n') + '\n', 'utf-8');
-    // Only print this one line in terminal
-    console.log(`\nAll logs saved to: ${path.relative(process.cwd(), logPath)}\n`);
-  }
-}
-
-// Create logger
-global.logger = new SilentLogger();
-
-// COMPLETELY SILENCE console.log (no output in CMD at all)
-console.log = (...args) => logger.log(...args);
-console.info = console.warn = console.error = console.log;
-
-// At the very end of your file (after process.exit), add this:
-process.on('exit', () => {
-  if (global.logger) global.logger.save();
-});
-/**
- * FlutterJS Runtime Tests
- * Comprehensive testing for runtime integration
- */
-
-import {
-  runApp,
-  getRuntime,
-  updateApp,
-  getMetrics,
-  hotReload,
-  renderToString,
-  hydrate,
-  FlutterJSRuntime,
-  VNode
-} from '../src/runtime_index.js';
-
-
-import { JSDOM } from 'jsdom';
-
-// Setup DOM environment
-const dom = new JSDOM(`
-<!DOCTYPE html>
-<html>
-<body>
-  <div id="root"></div>
-  <div id="alt-root"></div>
-</body>
-</html>
-`);
-global.document = dom.window.document;
-global.window = dom.window;
-global.HTMLElement = dom.window.HTMLElement;
-global.Node = dom.window.Node;
-global.performance = { now: () => Date.now() };
-global.requestAnimationFrame = (cb) => setTimeout(cb, 16);
-
-console.log('\n' + '='.repeat(80));
-console.log('🧪 FLUTTERJS RUNTIME TESTS');
-console.log('='.repeat(80) + '\n');
-
-let testsPassed = 0;
-let testsFailed = 0;
-let currentTestName = '';
-
-function test(name, fn) {
-  currentTestName = name;
-  console.log(`\n📋 TEST: ${name}`);
-  console.log('-'.repeat(60));
-
-  try {
-    fn();
-    console.log(`✓ PASSED: ${name}`);
-    testsPassed++;
-  } catch (error) {
-    console.log(`✗ FAILED: ${name}`);
-    console.log(`  Error Message: ${error.message}`);
-    if (error.stack) {
-      const stackLines = error.stack.split('\n');
-      console.log(`  Stack: ${stackLines[1] || stackLines[0]}`);
-    }
-    testsFailed++;
-  }
-}
-
-function assert(condition, message) {
-  console.log(`  [ASSERT] Checking: ${message}`);
-  if (!condition) {
-    console.log(`  [ASSERT FAILED] ${message}`);
-    throw new Error(message || 'Assertion failed');
-  }
-  console.log(`  [ASSERT OK] ✓`);
-}
-
-function assertEquals(actual, expected, message) {
-  console.log(`  [ASSERTEQUALS] ${message}`);
-  console.log(`    Expected: ${JSON.stringify(expected)}`);
-  console.log(`    Actual: ${JSON.stringify(actual)}`);
-
-  if (actual !== expected) {
-    console.log(`  [ASSERTEQUALS FAILED]`);
-    throw new Error(
-      message || `Expected "${expected}", got "${actual}"`
-    );
-  }
-  console.log(`  [ASSERTEQUALS OK] ✓`);
-}
-
-function assertIncludes(haystack, needle, message) {
-  console.log(`  [ASSERTINCLUDES] ${message}`);
-  console.log(`    Searching for: "${needle}"`);
-  console.log(`    In: "${haystack ? haystack.substring(0, 100) + '...' : 'null'}"`);
-
-  if (!haystack || !haystack.includes(needle)) {
-    console.log(`  [ASSERTINCLUDES FAILED]`);
-    throw new Error(
-      message || `Expected to include "${needle}"`
-    );
-  }
-  console.log(`  [ASSERTINCLUDES OK] ✓`);
-}
-
-// Mock widgets
-class SimpleWidget {
-  build(context) {
-    console.log(`  [WIDGET] SimpleWidget.build() called`);
-    console.log(`    Context keys: ${Object.keys(context || {}).join(', ')}`);
-
-    return new VNode({
-      tag: 'div',
-      props: { className: 'simple-widget' },
-      children: ['Simple Widget']
-    });
-  }
-}
-
-class StatefulWidget {
-  constructor() {
-    this.state = { count: 0 };
-    console.log(`  [WIDGET] StatefulWidget created with state:`, this.state);
-  }
-
-  build(context) {
-    console.log(`  [WIDGET] StatefulWidget.build() called with count: ${this.state.count}`);
-
-    return new VNode({
-      tag: 'div',
-      children: [
-        new VNode({
-          tag: 'span',
-          children: [`Count: ${this.state.count}`]
-        }),
-        new VNode({
-          tag: 'button',
-          events: {
-            click: () => this.setState({ count: this.state.count + 1 })
-          },
-          children: ['Increment']
-        })
-      ]
-    });
-  }
-
-  setState(newState) {
-    console.log(`  [STATE] setState called with:`, newState);
-    Object.assign(this.state, newState);
-    console.log(`  [STATE] New state:`, this.state);
-
-    if (this.context && this.context.runtime) {
-      console.log(`  [STATE] Triggering runtime update`);
-      this.context.runtime.update();
-    }
-  }
-}
-
-// Helper to reset runtime between tests
-function resetRuntime() {
-  console.log(`  [RESET] Clearing runtime...`);
-  const runtime = getRuntime();
-  if (runtime) {
-    console.log(`  [RESET] Destroying existing runtime`);
-    runtime.destroy();
-  }
-
-  const root = document.getElementById('root');
-  if (root) {
-    root.innerHTML = '';
-    console.log(`  [RESET] Cleared root element`);
-  }
-}
-
-// ============================================================================
-// TEST SUITE 1: Runtime Initialization
-// ============================================================================
-
-console.log('\n' + '═'.repeat(80));
-console.log('TEST SUITE 1: Runtime Initialization');
-console.log('═'.repeat(80));
-
-test('Create runtime instance', () => {
-  console.log(`  [START] Creating FlutterJSRuntime instance`);
-  const runtime = new FlutterJSRuntime();
-  console.log(`  [CREATED] Runtime instance:`, {
-    app: runtime.app,
-    rootElement: runtime.rootElement,
-    stateRegistry: runtime.stateRegistry.size
-  });
-
-  assert(runtime !== null, 'Should create runtime');
-  assert(runtime.app === null, 'Should start with no app');
-  assert(runtime.stateRegistry instanceof Map, 'Should have state registry');
-});
-
-test('Runtime has performance metrics', () => {
-  console.log(`  [START] Creating runtime and checking metrics`);
-  const runtime = new FlutterJSRuntime();
-  console.log(`  [METRICS] Initial metrics:`, runtime.performanceMetrics);
-
-  assert(runtime.performanceMetrics !== undefined, 'Should have metrics');
-  assert(runtime.performanceMetrics.initialRender === 0, 'Should start at 0');
-  assert(runtime.performanceMetrics.updates === 0, 'Should start at 0');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 2: runApp - Client-Side Rendering
-// ============================================================================
-
-console.log('\n' + '═'.repeat(80));
-console.log('TEST SUITE 2: runApp - Client-Side Rendering');
-console.log('═'.repeat(80));
-
-test('Run simple app', () => {
-  console.log(`  [START] Running simple app test`);
-  resetRuntime();
-
-  const app = new SimpleWidget();
-  console.log(`  [RUN] Starting app with target="#root"`);
-
-  runApp(app, { target: '#root' });
-  console.log(`  [RUN] App started successfully`);
-
-  const root = document.getElementById('root');
-  console.log(`  [DOM] Root element HTML:`, root.innerHTML.substring(0, 150));
-  console.log(`  [DOM] Root element classes:`, root.className);
-
-  const widget = root.querySelector('.simple-widget');
-  console.log(`  [DOM] Found widget:`, widget !== null);
-  console.log(`  [DOM] Widget text:`, widget?.textContent);
-
-  const vnode = root.querySelector('[data-widget-type="VNode"]');
-  assert(vnode !== null, 'Should render widget');
-  assert(vnode.textContent.includes('Simple Widget'), 'Should have correct content');
-  assertEquals(root.textContent, 'Simple Widget', 'Should have content');
-});
-
-test('Run app with custom target', () => {
-  console.log(`  [START] Running app with custom target test`);
-  resetRuntime();
-
-  const app = new SimpleWidget();
-  console.log(`  [RUN] Starting app with target="#alt-root"`);
-
-  runApp(app, { target: '#alt-root' });
-  console.log(`  [RUN] App started successfully`);
-
-  const altRoot = document.getElementById('alt-root');
-  console.log(`  [DOM] Alt-root HTML:`, altRoot.innerHTML.substring(0, 150));
-
-  const vnode = altRoot.querySelector('[data-widget-type="VNode"]');
-  assert(vnode !== null, 'Should render to alt root');
-  assert(vnode.textContent.includes('Simple Widget'), 'Should have content');
-});
-
-test('Run app with HTMLElement target', () => {
-  console.log(`  [START] Running app with HTMLElement target test`);
-  resetRuntime();
-
-  const container = document.createElement('div');
-  console.log(`  [TARGET] Created custom container`);
-
-  const app = new SimpleWidget();
-  console.log(`  [RUN] Starting app with container target`);
-
-  runApp(app, { target: container });
-  console.log(`  [RUN] App started with container target`);
-
-  console.log(`  [DOM] Container HTML:`, container.innerHTML.substring(0, 150));
-
-  const vnode = container.querySelector('[data-widget-type="VNode"]');
-  assert(vnode !== null, 'Should render to element');
-  assert(vnode.textContent.includes('Simple Widget'), 'Should have content');
-});
-
-test('Track initial render time', () => {
-  console.log(`  [START] Testing render time tracking`);
-  resetRuntime();
-
-  const app = new SimpleWidget();
-  console.log(`  [PERF] Starting app...`);
-
-  runApp(app, { target: '#root' });
-  console.log(`  [PERF] App started, getting metrics...`);
-
-  const metrics = getMetrics();
-  console.log(`  [PERF] Metrics:`, {
-    initialRender: metrics.initialRender,
-    updates: metrics.updates
-  });
-
-  assert(metrics.initialRender > 0, 'Should track render time');
-});
-
-test('Get runtime instance', () => {
-  console.log(`  [START] Testing runtime instance retrieval`);
-  resetRuntime();
-
-  const app = new SimpleWidget();
-  console.log(`  [RUN] Starting app...`);
-
-  runApp(app, { target: '#root' });
-  console.log(`  [RUN] App started`);
-
-  const runtime = getRuntime();
-  console.log(`  [RUNTIME] Got runtime:`, runtime ? 'YES' : 'NO');
-  console.log(`  [RUNTIME] Is FlutterJSRuntime:`, runtime instanceof FlutterJSRuntime);
-
-  assert(runtime !== null, 'Should get runtime');
-  assert(runtime instanceof FlutterJSRuntime, 'Should be FlutterJSRuntime');
-});
-
-test('Throw error for invalid target', () => {
-  console.log(`  [START] Testing invalid target error`);
-  resetRuntime();
-
-  const app = new SimpleWidget();
-  console.log(`  [ERROR] Attempting to run with invalid target...`);
-
-  try {
-    runApp(app, { target: '#nonexistent' });
-    console.log(`  [ERROR] UNEXPECTED: Should have thrown!`);
-    throw new Error('Should have thrown');
-  } catch (error) {
-    console.log(`  [ERROR] Caught expected error:`, error.message);
-    assertIncludes(error.message, 'not found', 'Should mention target not found');
-  }
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 3: State Management
-// ============================================================================
-
-console.log('\n' + '═'.repeat(80));
-console.log('TEST SUITE 3: State Management');
-console.log('═'.repeat(80));
-
-test('Register state', () => {
-  console.log(`  [START] Testing state registration`);
-  resetRuntime();
-
-  const runtime = new FlutterJSRuntime();
-  const stateObj = {
-    state: { value: 0 },
-    setState: (updater) => {
-      console.log(`    [STATE] setState called with:`, updater);
-      Object.assign(stateObj.state, updater);
-    }
-  };
-
-  console.log(`  [REGISTRY] Registering state for "widget-1"`);
-  runtime.registerState('widget-1', stateObj);
-  console.log(`  [REGISTRY] Registry size:`, runtime.stateRegistry.size);
-
-  assert(runtime.stateRegistry.has('widget-1'), 'Should register state');
-  assertEquals(runtime.stateRegistry.get('widget-1'), stateObj, 'Should store state object');
-});
-
-test('Unregister state', () => {
-  console.log(`  [START] Testing state unregistration`);
-  resetRuntime();
-
-  const runtime = new FlutterJSRuntime();
-  const stateObj = { setState: () => { } };
-
-  console.log(`  [REGISTRY] Registering state...`);
-  runtime.registerState('widget-1', stateObj);
-  console.log(`  [REGISTRY] Registered, size:`, runtime.stateRegistry.size);
-
-  assert(runtime.stateRegistry.has('widget-1'), 'Should register');
-
-  console.log(`  [REGISTRY] Unregistering state...`);
-  runtime.unregisterState('widget-1');
-  console.log(`  [REGISTRY] Unregistered, size:`, runtime.stateRegistry.size);
-
-  assert(!runtime.stateRegistry.has('widget-1'), 'Should unregister');
-});
-
-test('Get state by ID', () => {
-  console.log(`  [START] Testing get state by ID`);
-  resetRuntime();
-
-  const runtime = new FlutterJSRuntime();
-  const stateObj = { setState: () => { } };
-
-  console.log(`  [REGISTRY] Registering state...`);
-  runtime.registerState('widget-1', stateObj);
-  console.log(`  [REGISTRY] Registered state`);
-
-  console.log(`  [REGISTRY] Retrieving state...`);
-  const retrieved = runtime.getState('widget-1');
-  console.log(`  [REGISTRY] Retrieved:`, retrieved !== null ? 'YES' : 'NO');
-
-  assertEquals(retrieved, stateObj, 'Should retrieve state');
-});
-
-test('Get nonexistent state returns null', () => {
-  console.log(`  [START] Testing nonexistent state retrieval`);
-  resetRuntime();
-
-  const runtime = new FlutterJSRuntime();
-  console.log(`  [REGISTRY] Getting nonexistent state...`);
-
-  const state = runtime.getState('nonexistent');
-
-  console.log(`  [REGISTRY] Retrieved nonexistent state:`, state);
-
-  assertEquals(state, null, 'Should return null');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 4: Application Updates
-// ============================================================================
-
-console.log('\n' + '═'.repeat(80));
-console.log('TEST SUITE 4: Application Updates');
-console.log('═'.repeat(80));
-
-test('Update app', () => {
-  console.log(`  [START] Testing app update`);
-  resetRuntime();
-
-  const app = new SimpleWidget();
-  console.log(`  [RUN] Running app...`);
-
-  runApp(app, { target: '#root' });
-  console.log(`  [RUN] App running`);
-
-  let updateCalled = false;
-  console.log(`  [UPDATE] Calling updateApp...`);
-
-  updateApp(() => {
-    console.log(`  [UPDATE] Update function called`);
-    updateCalled = true;
-  });
-
-  console.log(`  [UPDATE] Update called:`, updateCalled);
-
-  assert(updateCalled === true, 'Should call update function');
-});
-
-test('Update tracks metrics', () => {
-  console.log(`  [START] Testing update metrics tracking`);
-  resetRuntime();
-
-  const app = new SimpleWidget();
-  console.log(`  [RUN] Running app...`);
-
-  runApp(app, { target: '#root' });
-
-  console.log(`  [METRICS] Before update`);
-  const metricsBefore = getMetrics();
-  const updatesBefore = metricsBefore.updates;
-  console.log(`    Updates before: ${updatesBefore}`);
-
-  updateApp(() => { });
-
-  const metricsAfter = getMetrics();
-  console.log(`    Updates after: ${metricsAfter.updates}`);
-  assert(metricsAfter.updates > updatesBefore, 'Should increment updates');
-
-  assert(metricsAfter.averageRenderTime > 0, 'Should track average time');
-});
-
-test('Update without app throws error', () => {
-  console.log(`  [START] Testing update without app error`);
-  resetRuntime();
-
-  console.log(`  [ERROR] Attempting update without app...`);
-
-  try {
-    updateApp(() => { });
-    console.log(`  [ERROR] UNEXPECTED: Should have thrown!`);
-    throw new Error('Should have thrown');
-  } catch (error) {
-    console.log(`  [ERROR] Caught expected error:`, error.message);
-    assertIncludes(error.message, 'runApp', 'Should mention runApp');
-  }
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 5: Build Context
-// ============================================================================
-
-console.log('\n' + '═'.repeat(80));
-console.log('TEST SUITE 5: Build Context');
-console.log('═'.repeat(80));
-
-test('Create build context', () => {
-  console.log(`  [START] Testing build context creation`);
-  resetRuntime();
-
-  const runtime = new FlutterJSRuntime();
-  console.log(`  [CONTEXT] Creating context...`);
-
-  const context = runtime.createBuildContext();
-
-  console.log(`  [CONTEXT] Created context with keys:`, Object.keys(context));
-  console.log(`    runtime: ${context.runtime ? 'YES' : 'NO'}`);
-  console.log(`    mediaQuery: ${context.mediaQuery ? 'YES' : 'NO'}`);
-  console.log(`    theme: ${context.theme ? 'YES' : 'NO'}`);
-  console.log(`    navigator: ${context.navigator ? 'YES' : 'NO'}`);
-
-  assert(context.runtime === runtime, 'Should include runtime');
-  assert(context.mediaQuery !== undefined, 'Should have mediaQuery');
-  assert(context.theme !== undefined, 'Should have theme');
-  assert(context.navigator !== undefined, 'Should have navigator');
-});
-
-test('Build context includes media query', () => {
-  console.log(`  [START] Testing media query in context`);
-  resetRuntime();
-
-  const runtime = new FlutterJSRuntime();
-  console.log(`  [CONTEXT] Creating context...`);
-
-  const context = runtime.createBuildContext();
-
-  console.log(`  [MEDIAQUERY] Media query info:`, context.mediaQuery);
-
-  assert(context.mediaQuery.width !== undefined, 'Should have width');
-  assert(context.mediaQuery.height !== undefined, 'Should have height');
-  assert(context.mediaQuery.devicePixelRatio !== undefined, 'Should have DPR');
-});
-
-test('Build context includes theme', () => {
-  console.log(`  [START] Testing theme in context`);
-  resetRuntime();
-
-  const runtime = new FlutterJSRuntime();
-  console.log(`  [CONTEXT] Creating context...`);
-
-  const context = runtime.createBuildContext();
-
-  console.log(`  [THEME] Theme colors:`, {
-    primaryColor: context.theme.primaryColor,
-    surface: context.theme.surface
-  });
-
-  assert(context.theme.primaryColor !== undefined, 'Should have primaryColor');
-  assert(context.theme.surface !== undefined, 'Should have surface color');
-});
-
-test('Custom theme in context', () => {
-  console.log(`  [START] Testing custom theme in context`);
-  resetRuntime();
-
-  const runtime = new FlutterJSRuntime();
-  const customTheme = { primaryColor: '#ff0000' };
-  console.log(`  [CONTEXT] Creating context with custom theme...`);
-
-  const context = runtime.createBuildContext({ theme: customTheme });
-
-  console.log(`  [THEME] Custom theme primaryColor:`, context.theme.primaryColor);
-
-  assertEquals(context.theme.primaryColor, '#ff0000', 'Should use custom theme');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 6: Performance Metrics
-// ============================================================================
-
-console.log('\n' + '═'.repeat(80));
-console.log('TEST SUITE 6: Performance Metrics');
-console.log('═'.repeat(80));
-
-test('Get metrics', () => {
-  console.log(`  [START] Testing metrics retrieval`);
-  resetRuntime();
-
-  const app = new SimpleWidget();
-  console.log(`  [RUN] Running app...`);
-
-  runApp(app, { target: '#root' });
-
-  console.log(`  [METRICS] Getting metrics...`);
-  const metrics = getMetrics();
-
-  console.log(`  [METRICS] Metrics:`, {
-    initialRender: metrics.initialRender,
-    updates: metrics.updates,
-    isHydrated: metrics.isHydrated,
-    stateCount: metrics.stateCount,
-    vnodeStats: metrics.vnodeStats ? 'EXISTS' : 'NULL'
-  });
-
-  assert(metrics !== null, 'Should return metrics');
-  assert(metrics.initialRender !== undefined, 'Should have initialRender');
-  assert(metrics.updates !== undefined, 'Should have updates');
-  assert(metrics.isHydrated !== undefined, 'Should have isHydrated');
-  assert(metrics.stateCount !== undefined, 'Should have stateCount');
-});
-
-test('Get metrics without app', () => {
-  console.log(`  [START] Testing metrics without app`);
-  resetRuntime();
-
-  console.log(`  [METRICS] Getting metrics without running app...`);
-  const metrics = getMetrics();
-
-  console.log(`  [METRICS] Metrics without app:`, metrics);
-
-  assertEquals(metrics, null, 'Should return null');
-});
-
-test('Metrics include VNode stats', () => {
-  console.log(`  [START] Testing VNode stats in metrics`);
-  resetRuntime();
-
-  const app = new SimpleWidget();
-  console.log(`  [RUN] Running app...`);
-
-  runApp(app, { target: '#root' });
-
-  console.log(`  [METRICS] Getting metrics...`);
-  const metrics = getMetrics();
-
-  console.log(`  [METRICS] VNode stats:`, metrics.vnodeStats);
-
-  assert(metrics.vnodeStats !== null, 'Should have VNode stats');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 7: Hot Reload
-// ============================================================================
-
-console.log('\n' + '═'.repeat(80));
-console.log('TEST SUITE 7: Hot Reload');
-console.log('═'.repeat(80));
-
-test('Enable hot reload', () => {
-  console.log(`  [START] Testing hot reload enable`);
-  resetRuntime();
-
-  const app = new SimpleWidget();
-  console.log(`  [RUN] Starting app with hot reload enabled...`);
-
-  runApp(app, { target: '#root', enableHotReload: true });
-
-  const runtime = getRuntime();
-  console.log(`  [HOTRELOAD] Hot reload enabled:`, runtime.hotReloadEnabled);
-
-  assert(runtime.hotReloadEnabled === true, 'Should enable hot reload');
-});
-
-test('Hot reload updates app', () => {
-  console.log(`  [START] Testing hot reload update`);
-  resetRuntime();
-
-  const app = new SimpleWidget();
-  console.log(`  [RUN] Starting app with hot reload...`);
-
-  runApp(app, { target: '#root', enableHotReload: true });
-
-  const beforeUpdates = getMetrics().updates;
-  console.log(`  [HOTRELOAD] Updates before:`, beforeUpdates);
-
-  console.log(`  [HOTRELOAD] Calling hotReload...`);
-  hotReload();
-
-  const afterUpdates = getMetrics().updates;
-  console.log(`  [HOTRELOAD] Updates after:`, afterUpdates);
-
-  assert(afterUpdates > beforeUpdates, 'Should increment updates');
-});
-
-test('Hot reload without app warns', () => {
-  console.log(`  [START] Testing hot reload without app`);
-  resetRuntime();
-
-  console.log(`  [HOTRELOAD] Calling hotReload without app...`);
-
-  // Should not throw, just warn
-  hotReload();
-
-  console.log(`  [HOTRELOAD] No error thrown`);
-});
-
-test('Hot reload disabled by default', () => {
-  console.log(`  [START] Testing hot reload disabled by default`);
-  resetRuntime();
-
-  const app = new SimpleWidget();
-  console.log(`  [RUN] Starting app without hot reload option...`);
-
-  runApp(app, { target: '#root' });
-
-  const runtime = getRuntime();
-  console.log(`  [HOTRELOAD] Hot reload enabled:`, runtime.hotReloadEnabled);
-
-  assert(runtime.hotReloadEnabled === false, 'Should be disabled by default');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 8: Server-Side Rendering
-// ============================================================================
-
-console.log('\n' + '═'.repeat(80));
-console.log('TEST SUITE 8: Server-Side Rendering');
-console.log('═'.repeat(80));
-
-test('Render to string', () => {
-  console.log(`  [START] Testing renderToString`);
-  const app = new SimpleWidget();
-  console.log(`  [SSR] Calling renderToString...`);
-
-  const html = renderToString(app);
-
-  console.log(`  [SSR] HTML length:`, html.length);
-  console.log(`  [SSR] HTML preview:`, html.substring(0, 150) + '...');
-
-  assert(typeof html === 'string', 'Should return string');
-  assertIncludes(html, '<!DOCTYPE html>', 'Should have doctype');
-  assertIncludes(html, 'Simple Widget', 'Should have content');
-});
-
-test('Render to string with title', () => {
-  console.log(`  [START] Testing renderToString with title`);
-  const app = new SimpleWidget();
-  console.log(`  [SSR] Calling renderToString with title...`);
-
-  const html = renderToString(app, { title: 'Test App' });
-
-  console.log(`  [SSR] HTML length:`, html.length);
-  console.log(`  [SSR] Checking for title tag...`);
-
-  assertIncludes(html, '<title>Test App</title>', 'Should have title');
-});
-
-test('Render to string with meta', () => {
-  console.log(`  [START] Testing renderToString with meta`);
-  const app = new SimpleWidget();
-  console.log(`  [SSR] Calling renderToString with meta...`);
-
-  const html = renderToString(app, {
-    meta: { description: 'Test description' }
-  });
-
-  console.log(`  [SSR] Checking for meta tag...`);
-
-  assertIncludes(html, 'description', 'Should have meta tag');
-});
-
-test('Render to string includes hydration data', () => {
-  console.log(`  [START] Testing hydration data inclusion`);
-  const app = new SimpleWidget();
-  console.log(`  [SSR] Calling renderToString...`);
-
-  const html = renderToString(app);
-
-  console.log(`  [SSR] Checking for hydration data...`);
-
-  assertIncludes(html, '__FLUTTERJS_HYDRATION_DATA__', 'Should include hydration data');
-});
-
-test('Render to string without hydration', () => {
-  console.log(`  [START] Testing renderToString without hydration`);
-  const app = new SimpleWidget();
-  console.log(`  [SSR] Calling renderToString with includeHydration: false...`);
-
-  const html = renderToString(app, { includeHydration: false });
-
-  console.log(`  [SSR] Checking for hydration data...`);
-
-  assert(!html.includes('__FLUTTERJS_HYDRATION_DATA__'), 'Should not include hydration data');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 9: Hydration
-// ============================================================================
-
-console.log('\n' + '═'.repeat(80));
-console.log('TEST SUITE 9: Hydration');
-console.log('═'.repeat(80));
-
-test('Hydrate SSR content', () => {
-  console.log(`  [START] Testing SSR hydration`);
-  resetRuntime();
-
-  const app = new SimpleWidget();
-  console.log(`  [SSR] Rendering to string...`);
-
-  const html = renderToString(app);
-
-  // Parse HTML and inject into DOM
-  const tempDiv = document.createElement('div');
-  tempDiv.innerHTML = html;
-  const htmlContent = tempDiv.querySelector('#root').innerHTML;
-
-  console.log(`  [SSR] Injecting SSR content into DOM...`);
-
-  const root = document.getElementById('root');
-  root.innerHTML = htmlContent;
-
-  // Create hydration data script
-  const script = document.createElement('script');
-  script.id = '__FLUTTERJS_HYDRATION_DATA__';
-  script.type = 'application/json';
-  script.textContent = JSON.stringify({
-    version: '1.0.0',
-    widgets: [],
-    stateBindings: [],
-    events: [],
-    refs: []
-  });
-  console.log(`  [SSR] Creating hydration data script...`);
-
-  document.body.appendChild(script);
-
-  console.log(`  [HYDRATE] Calling hydrate function...`);
-  hydrate(app, { target: '#root' });
-
-  const runtime = getRuntime();
-  console.log(`  [HYDRATE] Runtime hydrated:`, runtime.isHydrated);
-
-  assert(runtime.isHydrated === true, 'Should be hydrated');
-
-  // Cleanup
-  console.log(`  [CLEANUP] Removing hydration script...`);
-  script.remove();
-});
-
-test('Hydrate requires target', () => {
-  console.log(`  [START] Testing hydrate with invalid target`);
-  resetRuntime();
-
-  const app = new SimpleWidget();
-  console.log(`  [HYDRATE] Attempting hydrate with invalid target...`);
-
-  try {
-    hydrate(app, { target: '#nonexistent' });
-    console.log(`  [ERROR] UNEXPECTED: Should have thrown!`);
-    throw new Error('Should have thrown');
-  } catch (error) {
-    console.log(`  [ERROR] Caught expected error:`, error.message);
-    assertIncludes(error.message, 'not found', 'Should mention target');
-  }
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 10: Runtime Cleanup
-// ============================================================================
-
-console.log('\n' + '═'.repeat(80));
-console.log('TEST SUITE 10: Runtime Cleanup');
-console.log('═'.repeat(80));
-
-test('Destroy runtime', () => {
-  console.log(`  [START] Testing runtime destruction`);
-  resetRuntime();
-
-  const app = new SimpleWidget();
-  console.log(`  [RUN] Running app...`);
-
-  runApp(app, { target: '#root' });
-
-  const runtime = getRuntime();
-  console.log(`  [DESTROY] Destroying runtime...`);
-
-  runtime.destroy();
-
-  console.log(`  [DESTROY] Runtime after destroy:`, {
-    app: runtime.app,
-    rootElement: runtime.rootElement,
-    stateCount: runtime.stateRegistry.size
-  });
-
-  assert(runtime.app === null, 'Should clear app');
-  assert(runtime.rootElement === null, 'Should clear root');
-  assert(runtime.stateRegistry.size === 0, 'Should clear state');
-});
-
-test('Destroy cleans up event listeners', () => {
-  console.log(`  [START] Testing event listener cleanup`);
-  resetRuntime();
-
-  const app = new VNode({
-    tag: 'button',
-    events: { click: () => { } },
-    children: ['Click']
-  });
-
-  const runtime = new FlutterJSRuntime();
-  console.log(`  [RUN] Running app with button...`);
-
-  runtime.runApp({ build: () => app }, { target: '#root' });
-
-  const vnode = document.querySelector('[data-widget-type="VNode"]');
-  console.log(`  [LISTENERS] VNode element found: ${vnode !== null}`);
-  assert(vnode !== null, 'Should render VNode with button');
-  console.log(`  [LISTENERS] VNode content: ${vnode.textContent}`);
-  assert(vnode.textContent === 'Click', 'Should have button text');
-
-  console.log(`  [DESTROY] Destroying runtime...`);
-  runtime.destroy();
-
-  // Event listeners should be cleaned up
-  console.log(`  [CLEANUP] Event listeners cleaned up`);
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 11: Error Handling
-// ============================================================================
-
-console.log('\n' + '═'.repeat(80));
-console.log('TEST SUITE 11: Error Handling');
-console.log('═'.repeat(80));
-
-test('Handle render error with callback', () => {
-  console.log(`  [START] Testing error handling with callback`);
-  resetRuntime();
-
-  let errorCaught = false;
-  const badApp = {
-    build: () => {
-      console.log(`  [BUILD] Build throwing error...`);
-      throw new Error('Build error');
-    }
-  };
-
-  console.log(`  [RUN] Starting app that will fail...`);
-
-  try {
-    runApp(badApp, {
-      target: '#root',
-      onError: (error) => {
-        console.log(`  [ERROR_CALLBACK] Error callback called:`, error.message);
-        errorCaught = true;
-      }
-    });
-  } catch (error) {
-    console.log(`  [ERROR] Caught error:`, error.message);
-    // Expected
-  }
-
-  console.log(`  [ERROR_CALLBACK] Error caught by callback:`, errorCaught);
-
-  assert(errorCaught === true, 'Should call error callback');
-});
-
-test('Update before runApp throws error', () => {
-  console.log(`  [START] Testing update before runApp error`);
-  resetRuntime();
-
-  console.log(`  [UPDATE] Attempting update before runApp...`);
-
-  try {
-    const runtime = new FlutterJSRuntime();
-    console.log(`  [UPDATE] Created runtime, calling update...`);
-
-    runtime.update();
-    console.log(`  [ERROR] UNEXPECTED: Should have thrown!`);
-    throw new Error('Should have thrown');
-  } catch (error) {
-    console.log(`  [ERROR] Caught expected error:`, error.message);
-    assertIncludes(error.message, 'not initialized', 'Should mention initialization');
-  }
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 12: Integration Scenarios
-// ============================================================================
-
-console.log('\n' + '═'.repeat(80));
-console.log('TEST SUITE 12: Integration Scenarios');
-console.log('═'.repeat(80));
-
-// In runtime.test.js, instead of checking === 1, check the increment
-test('Complete CSR flow', () => {
-  resetRuntime();
-  const app = new SimpleWidget();
-
-  runApp(app, { target: '#root' });
-  const metricsAfter1 = getMetrics();
-  const updatesBefore = metricsAfter1.updates;
-
-  updateApp(() => { });
-
-  const metricsAfter2 = getMetrics();
-  // Check that update incremented, not absolute value
-  assert(metricsAfter2.updates > updatesBefore, 'Should increment updates');
-  assert(metricsAfter2.updates === updatesBefore + 1, 'Should increment by 1');
-});
-
-test('Complete SSR + Hydration flow', () => {
-  console.log(`  [START] Testing complete SSR + Hydration flow`);
-  resetRuntime();
-
-  const app = new SimpleWidget();
-
-  // SSR
-  console.log(`  [SSR+HYDRATION] Step 1: Server-side rendering...`);
-  const html = renderToString(app);
-  console.log(`  [SSR+HYDRATION] HTML generated, length:`, html.length);
-  assert(html.includes('Simple Widget'), 'Should render to HTML');
-  console.log(`  [SSR+HYDRATION] Step 1: Complete ✓`);
-
-  // Setup for hydration
-  console.log(`  [SSR+HYDRATION] Step 2: Setting up hydration...`);
-  const tempDiv = document.createElement('div');
-  tempDiv.innerHTML = html;
-  const root = document.getElementById('root');
-  root.innerHTML = tempDiv.querySelector('#root').innerHTML;
-  console.log(`  [SSR+HYDRATION] Injected SSR content`);
-
-  const script = document.createElement('script');
-  script.id = '__FLUTTERJS_HYDRATION_DATA__';
-  script.type = 'application/json';
-  script.textContent = JSON.stringify({
-    version: '1.0.0',
-    widgets: [],
-    stateBindings: [],
-    events: [],
-    refs: []
-  });
-  console.log(`  [SSR+HYDRATION] Created hydration script`);
-  document.body.appendChild(script);
-  console.log(`  [SSR+HYDRATION] Step 2: Complete ✓`);
-
-  // Hydrate
-  console.log(`  [SSR+HYDRATION] Step 3: Hydrating...`);
-  hydrate(app, { target: '#root' });
-
-  const runtime = getRuntime();
-  console.log(`  [SSR+HYDRATION] Hydrated:`, runtime.isHydrated);
-  assert(runtime.isHydrated === true, 'Should be hydrated');
-  console.log(`  [SSR+HYDRATION] Step 3: Complete ✓`);
-
-  // Cleanup
-  console.log(`  [SSR+HYDRATION] Step 4: Cleanup...`);
-  script.remove();
-  runtime.destroy();
-  console.log(`  [SSR+HYDRATION] Step 4: Complete ✓`);
-
-  console.log(`  [SSR+HYDRATION] Complete SSR + Hydration flow: ✓✓✓`);
-});
-
-test('State registry integration', () => {
-  console.log(`  [START] Testing state registry integration`);
-  resetRuntime();
-
-  const app = new SimpleWidget();
-  console.log(`  [INTEGRATION] Running app...`);
-  runApp(app, { target: '#root' });
-
-  const runtime = getRuntime();
-
-  // Register multiple states
-  console.log(`  [INTEGRATION] Registering widget-1...`);
-  runtime.registerState('widget-1', { setState: () => { } });
-
-  console.log(`  [INTEGRATION] Registering widget-2...`);
-  runtime.registerState('widget-2', { setState: () => { } });
-
-  const metrics = getMetrics();
-  console.log(`  [INTEGRATION] State count:`, metrics.stateCount);
-  assertEquals(metrics.stateCount, 2, 'Should track state count');
-
-  // Unregister
-  console.log(`  [INTEGRATION] Unregistering widget-1...`);
-  runtime.unregisterState('widget-1');
-
-  const metricsAfter = getMetrics();
-  console.log(`  [INTEGRATION] State count after unregister:`, metricsAfter.stateCount);
-  assertEquals(metricsAfter.stateCount, 1, 'Should update count');
-
-  console.log(`  [INTEGRATION] State registry integration: ✓`);
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 13: Browser Global API
-// ============================================================================
-
-console.log('\n' + '═'.repeat(80));
-console.log('TEST SUITE 13: Browser Global API');
-console.log('═'.repeat(80));
-
-// In runtime.test.js
-test('FlutterJS global exists', () => {
-  console.log(`  [START] Testing global API existence`);
-
-  // Skip if window.FlutterJS wasn't set up (expected in some environments)
-  if (typeof window === 'undefined' || !window.FlutterJS) {
-    console.log(`  [INFO] Skipping - window.FlutterJS not available in this environment`);
-    return;
-  }
-
-  assert(window.FlutterJS !== undefined, 'Should have global');
-  assert(typeof window.FlutterJS.runApp === 'function', 'Should have runApp');
-  assert(typeof window.FlutterJS.getMetrics === 'function', 'Should have getMetrics');
-  console.log(`  [GLOBAL] runApp function exists: ✓`);
-});
-
-test('Global API functions work', () => {
-  // Skip if not available
-  if (typeof window === 'undefined' || !window.FlutterJS) {
-    console.log(`  [INFO] Skipping - window.FlutterJS not available in this environment`);
-    return;
-  }
-
-  resetRuntime();
-  const app = new SimpleWidget();
-
-  window.FlutterJS.runApp(app, { target: '#root' });
-  const metrics = window.FlutterJS.getMetrics();
-
-  assert(metrics !== null, 'Should get metrics via global');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUMMARY
-// ============================================================================
-
-console.log('='.repeat(80));
-console.log('📊 TEST SUMMARY');
-console.log('='.repeat(80));
-console.log(`✓ Passed: ${testsPassed}`);
-console.log(`✗ Failed: ${testsFailed}`);
-console.log(`Total: ${testsPassed + testsFailed}`);
-console.log('='.repeat(80) + '\n');
-
-if (testsFailed === 0) {
-  console.log('🎉 All tests passed!\n');
-  process.exit(0);
-} else {
-  console.log(`❌ ${testsFailed} test(s) failed.\n`);
-  process.exit(1);
-}
diff --git a/packages/flutterjs_engine/src/vdom/test/state_binding.test.js b/packages/flutterjs_engine/src/vdom/test/state_binding.test.js
deleted file mode 100644
index 2fe1e77b..00000000
--- a/packages/flutterjs_engine/src/vdom/test/state_binding.test.js
+++ /dev/null
@@ -1,1101 +0,0 @@
-/**
- * StateBinding Tests - Comprehensive State Binding Testing
- * Tests state-to-DOM binding, bidirectional sync, validation, and binding registry
- */
-
-import {
-  StateBinding,
-  StateBindingRegistry,
-  BindingMode,
-  createBinding,
-  createTwoWayBinding,
-  createOneWayBinding
-} from '../src/state_binding.js';
-import { JSDOM } from 'jsdom';
-
-// Setup DOM environment
-const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
-global.document = dom.window.document;
-global.window = dom.window;
-global.HTMLElement = dom.window.HTMLElement;
-global.Node = dom.window.Node;
-
-console.log('\n' + '='.repeat(80));
-console.log('🧪 STATE BINDING TESTS');
-console.log('='.repeat(80) + '\n');
-
-let testsPassed = 0;
-let testsFailed = 0;
-
-function test(name, fn) {
-  try {
-    fn();
-    console.log(`✓ ${name}`);
-    testsPassed++;
-  } catch (error) {
-    console.log(`✗ ${name}`);
-    console.log(`  Error: ${error.message}`);
-    if (error.stack) {
-      console.log(`  ${error.stack.split('\n')[1]}`);
-    }
-    testsFailed++;
-  }
-}
-
-function assert(condition, message) {
-  if (!condition) {
-    throw new Error(message || 'Assertion failed');
-  }
-}
-
-function assertEquals(actual, expected, message) {
-  if (actual !== expected) {
-    throw new Error(
-      message || `Expected "${expected}", got "${actual}"`
-    );
-  }
-}
-
-function assertIncludes(haystack, needle, message) {
-  if (!haystack || !haystack.includes(needle)) {
-    throw new Error(
-      message || `Expected to include "${needle}"`
-    );
-  }
-}
-
-// Helper to create test element
-function createTestElement(tag = 'div', type = null) {
-  const el = document.createElement(tag);
-  if (type) {
-    el.type = type;
-  }
-  return el;
-}
-
-// ============================================================================
-// TEST SUITE 1: StateBinding Creation & Basic Properties
-// ============================================================================
-
-console.log('TEST SUITE 1: StateBinding Creation & Basic Properties\n');
-
-test('Create StateBinding', () => {
-  const binding = new StateBinding({
-    statefulWidgetId: 'widget-1',
-    stateProperty: 'count'
-  });
-
-  assert(binding !== null, 'Should create binding');
-  assertEquals(binding.statefulWidgetId, 'widget-1');
-  assertEquals(binding.stateProperty, 'count');
-  assertEquals(binding.mode, BindingMode.ONE_WAY);
-  assert(typeof binding.id === 'string', 'Should have ID');
-});
-
-test('Create binding with custom ID', () => {
-  const binding = new StateBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'p1',
-    id: 'custom-binding-123'
-  });
-
-  assert(binding.id.includes('binding-w1-p1'), 'Should generate ID');
-});
-
-test('Create binding with all options', () => {
-  const transform = (v) => String(v);
-  const validate = (v) => v !== null;
-
-  const binding = new StateBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'p1',
-    mode: BindingMode.TWO_WAY,
-    transform,
-    validate,
-    debounceMs: 100
-  });
-
-  assertEquals(binding.mode, BindingMode.TWO_WAY);
-  assertEquals(binding.transform, transform);
-  assertEquals(binding.validate, validate);
-  assertEquals(binding.debounceMs, 100);
-});
-
-test('Helper: createBinding', () => {
-  const binding = createBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'p1'
-  });
-
-  assert(binding instanceof StateBinding, 'Should create StateBinding');
-});
-
-test('Helper: createOneWayBinding', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'p1'
-  });
-
-  assertEquals(binding.mode, BindingMode.ONE_WAY);
-});
-
-test('Helper: createTwoWayBinding', () => {
-  const binding = createTwoWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'p1'
-  });
-
-  assertEquals(binding.mode, BindingMode.TWO_WAY);
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 2: ONE_WAY Binding (State → DOM)
-// ============================================================================
-
-console.log('TEST SUITE 2: ONE_WAY Binding (State → DOM)\n');
-
-test('One-way binding: update text element', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'message'
-  });
-
-  const element = createTestElement('span');
-  binding.attach(element);
-
-  binding.updateDOM('Hello World');
-
-  assertEquals(element.textContent, 'Hello World');
-});
-
-test('One-way binding: update input value', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'username'
-  });
-
-  const element = createTestElement('input', 'text');
-  binding.attach(element);
-
-  binding.updateDOM('john_doe');
-
-  assertEquals(element.value, 'john_doe');
-});
-
-test('One-way binding: update div content', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'content'
-  });
-
-  const element = createTestElement('div');
-  binding.attach(element);
-
-  binding.updateDOM('Content here');
-
-  assertEquals(element.textContent, 'Content here');
-});
-
-test('One-way binding: update checkbox', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'isChecked'
-  });
-
-  const element = createTestElement('input', 'checkbox');
-  binding.attach(element);
-
-  binding.updateDOM(true);
-  assert(element.checked === true);
-
-  binding.updateDOM(false);
-  assert(element.checked === false);
-});
-
-test('One-way binding: with transform', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'count',
-    transform: (val) => `Count: ${val}`
-  });
-
-  const element = createTestElement('span');
-  binding.attach(element);
-
-  binding.updateDOM(42);
-
-  assertEquals(element.textContent, 'Count: 42');
-});
-
-test('One-way binding: null/undefined values', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'value'
-  });
-
-  const element = createTestElement('span');
-  binding.attach(element);
-
-  binding.updateDOM(null);
-  assertEquals(element.textContent, '');
-
-  binding.updateDOM(undefined);
-  assertEquals(element.textContent, '');
-});
-
-test('One-way binding: numeric values', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'number'
-  });
-
-  const element = createTestElement('span');
-  binding.attach(element);
-
-  binding.updateDOM(42);
-  assertEquals(element.textContent, '42');
-
-  binding.updateDOM(3.14);
-  assertEquals(element.textContent, '3.14');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 3: TWO_WAY Binding (State ↔ DOM)
-// ============================================================================
-
-console.log('TEST SUITE 3: TWO_WAY Binding (State ↔ DOM)\n');
-
-test('Two-way binding: DOM to state', () => {
-  const binding = createTwoWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'username'
-  });
-
-  const element = createTestElement('input', 'text');
-  element.value = '';
-  binding.attach(element);
-
-  let changedValue = null;
-  binding.onChange = (value) => {
-    changedValue = value;
-  };
-
-  element.value = 'john';
-  element.dispatchEvent(new window.Event('input'));
-
-  assertEquals(changedValue, 'john');
-});
-
-test('Two-way binding: bidirectional sync', () => {
-  const binding = createTwoWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'count'
-  });
-
-  const element = createTestElement('input', 'number');
-  binding.attach(element);
-
-  // State → DOM
-  binding.updateDOM(42);
-  assertEquals(element.value, '42');
-
-  // DOM → State
-  element.value = '100';
-  element.dispatchEvent(new window.Event('input'));
-
-  assertEquals(binding.currentValue, 100);
-});
-
-test('Two-way binding: with validation', () => {
-  const binding = createTwoWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'count',
-    validate: (val) => val >= 0 && val <= 100
-  });
-
-  const element = createTestElement('input', 'number');
-  element.value = '50';
-  binding.attach(element);
-  binding.updateDOM(50);
-
-  let validationError = false;
-  binding.onValidationError = () => {
-    validationError = true;
-  };
-
-  // Valid value
-  element.value = '75';
-  element.dispatchEvent(new window.Event('input'));
-  assert(validationError === false);
-
-  // Invalid value
-  element.value = '150';
-  element.dispatchEvent(new window.Event('input'));
-  assert(validationError === true);
-});
-
-test('Two-way binding: with debouncing', (done) => {
-  const binding = createTwoWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'search',
-    debounceMs: 50
-  });
-
-  const element = createTestElement('input', 'text');
-  binding.attach(element);
-
-  let callCount = 0;
-  binding.onChange = () => {
-    callCount++;
-  };
-
-  element.value = 'a';
-  element.dispatchEvent(new window.Event('input'));
-
-  element.value = 'ab';
-  element.dispatchEvent(new window.Event('input'));
-
-  element.value = 'abc';
-  element.dispatchEvent(new window.Event('input'));
-
-  // Should not have called onChange yet (debounced)
-  assert(callCount === 0 || callCount === 1);
-
-  setTimeout(() => {
-    // After debounce, should be called
-    assert(callCount === 1);
-  }, 100);
-});
-
-test('Two-way binding: prevents DOM revert on invalid', () => {
-  const binding = createTwoWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'number',
-    validate: (val) => val < 100
-  });
-
-  const element = createTestElement('input', 'number');
-  element.value = '50';
-  binding.attach(element);
-  binding.updateDOM(50);
-
-  // Try to set invalid value
-  element.value = '150';
-  element.dispatchEvent(new window.Event('input'));
-
-  // Should revert to previous valid value
-  assertEquals(element.value, '50');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 4: DOM Element Types
-// ============================================================================
-
-console.log('TEST SUITE 4: DOM Element Types\n');
-
-test('Binding: text input', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'value'
-  });
-
-  const element = createTestElement('input', 'text');
-  binding.attach(element);
-
-  binding.updateDOM('test');
-  assertEquals(element.value, 'test');
-});
-
-test('Binding: password input', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'value'
-  });
-
-  const element = createTestElement('input', 'password');
-  binding.attach(element);
-
-  binding.updateDOM('secret');
-  assertEquals(element.value, 'secret');
-});
-
-test('Binding: number input', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'value'
-  });
-
-  const element = createTestElement('input', 'number');
-  binding.attach(element);
-
-  binding.updateDOM(42);
-  assertEquals(element.value, '42');
-});
-
-test('Binding: email input', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'value'
-  });
-
-  const element = createTestElement('input', 'email');
-  binding.attach(element);
-
-  binding.updateDOM('test@example.com');
-  assertEquals(element.value, 'test@example.com');
-});
-
-test('Binding: textarea', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'value'
-  });
-
-  const element = createTestElement('textarea');
-  binding.attach(element);
-
-  binding.updateDOM('Multi\nline\ntext');
-  assertEquals(element.value, 'Multi\nline\ntext');
-});
-
-test('Binding: select', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'selected'
-  });
-
-  const element = createTestElement('select');
-  const option = document.createElement('option');
-  option.value = 'option1';
-  element.appendChild(option);
-
-  binding.attach(element);
-  binding.updateDOM('option1');
-
-  assertEquals(element.value, 'option1');
-});
-
-test('Binding: image src', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'image'
-  });
-
-  const element = createTestElement('img');
-  binding.attach(element);
-
-  binding.updateDOM('image.jpg');
-  assertEquals(element.src, 'image.jpg');
-});
-
-test('Binding: link href', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'url'
-  });
-
-  const element = createTestElement('a');
-  binding.attach(element);
-
-  binding.updateDOM('https://example.com');
-
-  // Check that href was set and normalize both for comparison
-  assert(element.href.startsWith('https://example.com'), 'Should set href correctly');
-});
-
-test('Binding: class name', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'className'
-  });
-
-  const element = createTestElement('div');
-  binding.attach(element);
-
-  binding.updateDOM('active');
-  assertEquals(element.className, 'active');
-});
-
-test('Binding: style property', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'style-color'
-  });
-
-  const element = createTestElement('div');
-  binding.attach(element);
-
-  binding.updateDOM('red');
-  assertEquals(element.style.color, 'red');
-});
-
-test('Binding: attribute', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'attr-data-id'
-  });
-
-  const element = createTestElement('div');
-  binding.attach(element);
-
-  binding.updateDOM('123');
-  assertEquals(element.getAttribute('data-id'), '123');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 5: Binding Attachment & Detachment
-// ============================================================================
-
-console.log('TEST SUITE 5: Binding Attachment & Detachment\n');
-
-test('Attach binding to element', () => {
-  const binding = new StateBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'p1'
-  });
-
-  const element = createTestElement('div');
-  binding.attach(element);
-
-  assert(binding.domElement === element);
-  assert(element._stateBindings.includes(binding));
-});
-
-test('Detach binding from element', () => {
-  const binding = new StateBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'p1'
-  });
-
-  const element = createTestElement('div');
-  binding.attach(element);
-  binding.detach();
-
-  assert(binding.domElement === null);
-  assert(!element._stateBindings.includes(binding));
-});
-
-test('Multiple bindings on same element', () => {
-  const el = createTestElement('div');
-
-  const b1 = new StateBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'p1'
-  }).attach(el);
-
-  const b2 = new StateBinding({
-    statefulWidgetId: 'w2',
-    stateProperty: 'p2'
-  }).attach(el);
-
-  assertEquals(el._stateBindings.length, 2);
-  assert(el._stateBindings.includes(b1));
-  assert(el._stateBindings.includes(b2));
-});
-
-test('Reject attach to null element', () => {
-  const binding = new StateBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'p1'
-  });
-
-  try {
-    binding.attach(null);
-    throw new Error('Should have thrown');
-  } catch (error) {
-    assert(error.message.includes('null'));
-  }
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 6: Binding Enable/Disable
-// ============================================================================
-
-console.log('TEST SUITE 6: Binding Enable/Disable\n');
-
-test('Disable binding', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'value'
-  });
-
-  const element = createTestElement('span');
-  binding.attach(element);
-
-  binding.updateDOM('value1');
-  assertEquals(element.textContent, 'value1');
-
-  binding.disable();
-  binding.updateDOM('value2');
-
-  // Should not update because disabled
-  assertEquals(element.textContent, 'value1');
-});
-
-test('Enable binding', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'value'
-  });
-
-  const element = createTestElement('span');
-  binding.attach(element);
-
-  binding.disable();
-  binding.updateDOM('value1');
-  assertEquals(element.textContent, '');
-
-  binding.enable();
-  binding.updateDOM('value2');
-
-  assertEquals(element.textContent, 'value2');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 7: Dirty Tracking
-// ============================================================================
-
-console.log('TEST SUITE 7: Dirty Tracking\n');
-
-test('Track dirty state from DOM', () => {
-  const binding = createTwoWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'value'
-  });
-
-  const element = createTestElement('input', 'text');
-  binding.attach(element);
-
-  binding.updateDOM('initial');
-  assert(binding.isDirtyBinding() === false);
-
-  element.value = 'changed';
-  element.dispatchEvent(new window.Event('input'));
-
-  assert(binding.isDirtyBinding() === true);
-});
-
-test('Clear dirty flag', () => {
-  const binding = createTwoWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'value'
-  });
-
-  const element = createTestElement('input', 'text');
-  binding.attach(element);
-
-  element.value = 'changed';
-  element.dispatchEvent(new window.Event('input'));
-
-  assert(binding.isDirtyBinding() === true);
-
-  binding.clearDirty();
-
-  assert(binding.isDirtyBinding() === false);
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 8: StateBindingRegistry
-// ============================================================================
-
-console.log('TEST SUITE 8: StateBindingRegistry\n');
-
-test('Create registry', () => {
-  const registry = new StateBindingRegistry();
-  assert(registry !== null);
-});
-
-test('Register binding', () => {
-  const registry = new StateBindingRegistry();
-  const binding = new StateBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'count'
-  });
-
-  const id = registry.register(binding);
-
-  assertEquals(id, binding.id);
-});
-
-test('Get bindings by widget', () => {
-  const registry = new StateBindingRegistry();
-
-  const b1 = new StateBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'p1'
-  });
-
-  const b2 = new StateBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'p2'
-  });
-
-  registry.register(b1);
-  registry.register(b2);
-
-  const bindings = registry.getWidgetBindings('w1');
-
-  assertEquals(bindings.length, 2);
-  assert(bindings.includes(b1));
-  assert(bindings.includes(b2));
-});
-
-test('Get bindings by property', () => {
-  const registry = new StateBindingRegistry();
-
-  const b1 = new StateBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'count'
-  });
-
-  const b2 = new StateBinding({
-    statefulWidgetId: 'w2',
-    stateProperty: 'count'
-  });
-
-  registry.register(b1);
-  registry.register(b2);
-
-  const bindings = registry.getPropertyBindings('w1', 'count');
-
-  assertEquals(bindings.length, 1);
-  assert(bindings.includes(b1));
-});
-
-test('Update state through registry', () => {
-  const registry = new StateBindingRegistry();
-
-  const binding = new StateBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'count'
-  });
-
-  const element = createTestElement('span');
-  binding.attach(element);
-  registry.register(binding);
-
-  registry.updateState('w1', { count: 42 });
-
-  assertEquals(element.textContent, '42');
-});
-
-test('Get dirty bindings from registry', () => {
-  const registry = new StateBindingRegistry();
-
-  const b1 = createTwoWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'p1'
-  });
-
-  const el1 = createTestElement('input', 'text');
-  b1.attach(el1);
-  registry.register(b1);
-
-  el1.value = 'changed';
-  el1.dispatchEvent(new window.Event('input'));
-
-  const dirty = registry.getDirtyBindings();
-
-  assertEquals(dirty.length, 1);
-  assert(dirty.includes(b1));
-});
-
-test('Get dirty values from registry', () => {
-  const registry = new StateBindingRegistry();
-
-  const b1 = createTwoWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'name'
-  });
-
-  const b2 = createTwoWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'age'
-  });
-
-  const el1 = createTestElement('input', 'text');
-  const el2 = createTestElement('input', 'number');
-
-  b1.attach(el1);
-  b2.attach(el2);
-
-  registry.register(b1);
-  registry.register(b2);
-
-  el1.value = 'John';
-  el1.dispatchEvent(new window.Event('input'));
-
-  el2.value = '30';
-  el2.dispatchEvent(new window.Event('input'));
-
-  const values = registry.getDirtyValues('w1');
-
-  assertEquals(values.name, 'John');
-  assertEquals(values.age, 30);
-});
-
-test('Clear dirty flags in registry', () => {
-  const registry = new StateBindingRegistry();
-
-  const binding = createTwoWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'value'
-  });
-
-  const el = createTestElement('input', 'text');
-  binding.attach(el);
-  registry.register(binding);
-
-  el.value = 'changed';
-  el.dispatchEvent(new window.Event('input'));
-
-  registry.clearDirty();
-
-  const dirty = registry.getDirtyBindings();
-  assertEquals(dirty.length, 0);
-});
-
-test('Unregister binding', () => {
-  const registry = new StateBindingRegistry();
-
-  const binding = new StateBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'p1'
-  });
-
-  const id = registry.register(binding);
-  const unregistered = registry.unregister(id);
-
-  assert(unregistered === true);
-  assertEquals(registry.getWidgetBindings('w1').length, 0);
-});
-
-test('Remove widget from registry', () => {
-  const registry = new StateBindingRegistry();
-
-  const b1 = new StateBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'p1'
-  });
-
-  const b2 = new StateBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'p2'
-  });
-
-  registry.register(b1);
-  registry.register(b2);
-
-  registry.removeWidget('w1');
-
-  assertEquals(registry.getWidgetBindings('w1').length, 0);
-});
-
-test('Clear all bindings in registry', () => {
-  const registry = new StateBindingRegistry();
-
-  registry.register(new StateBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'p1'
-  }));
-
-  registry.register(new StateBinding({
-    statefulWidgetId: 'w2',
-    stateProperty: 'p2'
-  }));
-
-  registry.clear();
-
-  assertEquals(registry.getBindingCount(), 0);
-});
-
-test('Get binding count', () => {
-  const registry = new StateBindingRegistry();
-
-  for (let i = 0; i < 5; i++) {
-    registry.register(new StateBinding({
-      statefulWidgetId: 'w1',
-      stateProperty: `p${i}`
-    }));
-  }
-
-  assertEquals(registry.getBindingCount(), 5);
-});
-
-test('Get registry statistics', () => {
-  const registry = new StateBindingRegistry();
-
-  registry.register(new StateBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'p1',
-    mode: BindingMode.ONE_WAY
-  }));
-
-  registry.register(new StateBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'p2',
-    mode: BindingMode.TWO_WAY
-  }));
-
-  const stats = registry.getStats();
-
-  assertEquals(stats.totalBindings, 2);
-  assertEquals(stats.totalWidgets, 1);
-  assertEquals(stats.totalProperties, 2);
-  assertEquals(stats.byMode[BindingMode.ONE_WAY], 1);
-  assertEquals(stats.byMode[BindingMode.TWO_WAY], 1);
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 9: Callbacks & Events
-// ============================================================================
-
-console.log('TEST SUITE 9: Callbacks & Events\n');
-
-test('onUpdate callback', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'value'
-  });
-
-  const element = createTestElement('span');
-  binding.attach(element);
-
-  let called = false;
-  let newVal = null;
-  let oldVal = null;
-
-  binding.onUpdate = (newValue, previousValue) => {
-    called = true;
-    newVal = newValue;
-    oldVal = previousValue;
-  };
-
-  binding.updateDOM('new-value');
-
-  assert(called === true);
-  assertEquals(newVal, 'new-value');
-  assertEquals(oldVal, null);
-});
-
-test('onChange callback for DOM changes', () => {
-  const binding = createTwoWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'value'
-  });
-
-  const element = createTestElement('input', 'text');
-  binding.attach(element);
-
-  let called = false;
-  let newVal = null;
-
-  binding.onChange = (value) => {
-    called = true;
-    newVal = value;
-  };
-
-  element.value = 'user-input';
-  element.dispatchEvent(new window.Event('input'));
-
-  assert(called === true);
-  assertEquals(newVal, 'user-input');
-});
-
-test('onValidationError callback', () => {
-  const binding = createTwoWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'age',
-    validate: (val) => val >= 0 && val <= 150
-  });
-
-  const element = createTestElement('input', 'number');
-  element.value = '25';
-  binding.attach(element);
-  binding.updateDOM(25);
-
-  let errorCalled = false;
-  let errorValue = null;
-
-  binding.onValidationError = (value) => {
-    errorCalled = true;
-    errorValue = value;
-  };
-
-  element.value = '200';
-  element.dispatchEvent(new window.Event('input'));
-
-  assert(errorCalled === true);
-  assertEquals(errorValue, 200);
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 10: Edge Cases
-// ============================================================================
-
-console.log('TEST SUITE 10: Edge Cases\n');
-
-test('Binding with transform error handling', () => {
-  const binding = createOneWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'value',
-    transform: (v) => {
-      throw new Error('Transform failed');
-    }
-  });
-
-  const element = createTestElement('span');
-  binding.attach(element);
-
-  // Should not throw
-  binding.updateDOM('test');
-});
-
-test('Binding with validation error handling', () => {
-  const binding = createTwoWayBinding({
-    statefulWidgetId: 'w1',
-    stateProperty: 'value',
-    validate: (v) => {
-      throw new Error('Validation failed');
-    }
-  });
-
-  const element = createTestElement('input', 'text');
-  element.value = 'test';
-  binding.attach(element);
-  binding.updateDOM('initial');
-
-  // Should not throw
-  element.value = 'new';
-  element.dispatchEvent(new window.Event('input'));
-});
-
-console.log('');
-
-// ============================================================================
-// SUMMARY
-// ============================================================================
-
-console.log('='.repeat(80));
-console.log(`✗" TESTS PASSED: ${testsPassed}`);
-console.log(`✗— TESTS FAILED: ${testsFailed}`);
-console.log(`TOTAL: ${testsPassed + testsFailed}`);
-console.log('='.repeat(80) + '\n');
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/vdom/test/style_converter.test.js b/packages/flutterjs_engine/src/vdom/test/style_converter.test.js
deleted file mode 100644
index e5eb3723..00000000
--- a/packages/flutterjs_engine/src/vdom/test/style_converter.test.js
+++ /dev/null
@@ -1,646 +0,0 @@
-/**
- * StyleConverter Tests - Comprehensive Flutter to CSS Conversion Testing
- * Tests all style conversion methods
- */
-
-import { StyleConverter } from '../src/style_converter.js';
-
-console.log('\n' + '='.repeat(80));
-console.log('🧪 STYLE CONVERTER TESTS');
-console.log('='.repeat(80) + '\n');
-
-let testsPassed = 0;
-let testsFailed = 0;
-
-function test(name, fn) {
-  try {
-    fn();
-    console.log(`✓ ${name}`);
-    testsPassed++;
-  } catch (error) {
-    console.log(`✗ ${name}`);
-    console.log(`  Error: ${error.message}`);
-    testsFailed++;
-  }
-}
-
-function assert(condition, message) {
-  if (!condition) {
-    throw new Error(message || 'Assertion failed');
-  }
-}
-
-function assertEquals(actual, expected, message) {
-  if (actual !== expected) {
-    throw new Error(
-      message || `Expected "${expected}", got "${actual}"`
-    );
-  }
-}
-
-function assertIncludes(haystack, needle, message) {
-  if (!haystack || !haystack.includes(needle)) {
-    throw new Error(
-      message || `Expected "${haystack}" to include "${needle}"`
-    );
-  }
-}
-
-// ============================================================================
-// TEST SUITE 1: Color Conversion
-// ============================================================================
-
-console.log('TEST SUITE 1: Color Conversion\n');
-
-test('Convert null color', () => {
-  const result = StyleConverter.colorToCss(null);
-  assertEquals(result, null, 'Should return null');
-});
-
-test('Convert CSS string color', () => {
-  const result = StyleConverter.colorToCss('#ff0000');
-  assertEquals(result, '#ff0000', 'Should pass through CSS string');
-});
-
-test('Convert numeric color (opaque)', () => {
-  // 0xFFFF0000 = Red with full opacity
-  const result = StyleConverter.colorToCss(0xFFFF0000);
-  assertEquals(result, '#ff0000', 'Should convert to hex');
-});
-
-test('Convert numeric color (transparent)', () => {
-  // 0x80FF0000 = Red with 50% opacity
-  const result = StyleConverter.colorToCss(0x80FF0000);
-  assertIncludes(result, 'rgba', 'Should use rgba for transparency');
-  assertIncludes(result, '255, 0, 0', 'Should have red values');
-  assertIncludes(result, '0.50', 'Should have alpha');
-});
-
-test('Convert color object with value', () => {
-  const color = { value: 0xFF00FF00 }; // Green
-  const result = StyleConverter.colorToCss(color);
-  assertEquals(result, '#00ff00', 'Should convert to hex');
-});
-
-test('Convert color object with RGB', () => {
-  const color = { r: 255, g: 0, b: 255 }; // Magenta
-  const result = StyleConverter.colorToCss(color);
-  assertEquals(result, 'rgb(255, 0, 255)', 'Should convert to rgb');
-});
-
-test('Convert color object with RGBA', () => {
-  const color = { r: 100, g: 150, b: 200, a: 0.5 };
-  const result = StyleConverter.colorToCss(color);
-  assertIncludes(result, 'rgba', 'Should use rgba');
-  assertIncludes(result, '100, 150, 200', 'Should have RGB values');
-  assertIncludes(result, '0.5', 'Should have alpha');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 2: Text Style Conversion
-// ============================================================================
-
-console.log('TEST SUITE 2: Text Style Conversion\n');
-
-test('Convert empty TextStyle', () => {
-  const result = StyleConverter.textStyleToCss({});
-  assert(typeof result === 'object', 'Should return object');
-});
-
-test('Convert TextStyle with fontSize', () => {
-  const style = { fontSize: 18 };
-  const result = StyleConverter.textStyleToCss(style);
-  assertEquals(result.fontSize, '18px', 'Should convert to px');
-});
-
-test('Convert TextStyle with color', () => {
-  const style = { color: 0xFF0000FF }; // Blue
-  const result = StyleConverter.textStyleToCss(style);
-  assertEquals(result.color, '#0000ff', 'Should convert color');
-});
-
-test('Convert TextStyle with fontWeight number', () => {
-  const style = { fontWeight: 700 };
-  const result = StyleConverter.textStyleToCss(style);
-  assertEquals(result.fontWeight, '700', 'Should convert weight');
-});
-
-test('Convert TextStyle with fontWeight string', () => {
-  const style = { fontWeight: 'bold' };
-  const result = StyleConverter.textStyleToCss(style);
-  assertEquals(result.fontWeight, '700', 'Should map bold to 700');
-});
-
-test('Convert TextStyle with fontWeight w500', () => {
-  const style = { fontWeight: 'w500' };
-  const result = StyleConverter.textStyleToCss(style);
-  assertEquals(result.fontWeight, '500', 'Should map w500 to 500');
-});
-
-test('Convert TextStyle with fontFamily', () => {
-  const style = { fontFamily: 'Roboto' };
-  const result = StyleConverter.textStyleToCss(style);
-  assertEquals(result.fontFamily, 'Roboto', 'Should set font family');
-});
-
-test('Convert TextStyle with italic', () => {
-  const style = { fontStyle: 'italic' };
-  const result = StyleConverter.textStyleToCss(style);
-  assertEquals(result.fontStyle, 'italic', 'Should set italic');
-});
-
-test('Convert TextStyle with letterSpacing', () => {
-  const style = { letterSpacing: 2 };
-  const result = StyleConverter.textStyleToCss(style);
-  assertEquals(result.letterSpacing, '2px', 'Should set letter spacing');
-});
-
-test('Convert TextStyle with decoration underline', () => {
-  const style = { decoration: 'underline' };
-  const result = StyleConverter.textStyleToCss(style);
-  assertEquals(result.textDecoration, 'underline', 'Should set underline');
-});
-
-test('Convert TextStyle with decoration object', () => {
-  const style = { decoration: { underline: true, lineThrough: true } };
-  const result = StyleConverter.textStyleToCss(style);
-  assertEquals(result.textDecoration, 'underline line-through', 'Should combine decorations');
-});
-
-test('Convert TextStyle with overflow ellipsis', () => {
-  const style = { overflow: 'ellipsis' };
-  const result = StyleConverter.textStyleToCss(style);
-  assertEquals(result.textOverflow, 'ellipsis', 'Should set ellipsis');
-  assertEquals(result.overflow, 'hidden', 'Should hide overflow');
-  assertEquals(result.whiteSpace, 'nowrap', 'Should prevent wrap');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 3: EdgeInsets Conversion
-// ============================================================================
-
-console.log('TEST SUITE 3: EdgeInsets Conversion\n');
-
-test('Convert EdgeInsets.all', () => {
-  const insets = { all: 16 };
-  const result = StyleConverter.edgeInsetsToCss(insets);
-  assertEquals(result, '16px', 'Should use single value');
-});
-
-test('Convert EdgeInsets.symmetric', () => {
-  const insets = { vertical: 10, horizontal: 20 };
-  const result = StyleConverter.edgeInsetsToCss(insets);
-  assertEquals(result, '10px 20px', 'Should use two values');
-});
-
-test('Convert EdgeInsets.only (all different)', () => {
-  const insets = { top: 5, right: 10, bottom: 15, left: 20 };
-  const result = StyleConverter.edgeInsetsToCss(insets);
-  assertEquals(result, '5px 10px 15px 20px', 'Should use four values');
-});
-
-test('Convert EdgeInsets.only (vertical same)', () => {
-  const insets = { top: 10, right: 20, bottom: 10, left: 20 };
-  const result = StyleConverter.edgeInsetsToCss(insets);
-  assertEquals(result, '10px 20px', 'Should optimize to two values');
-});
-
-test('Convert EdgeInsets to padding', () => {
-  const insets = { all: 12 };
-  const result = StyleConverter.paddingToCss(insets);
-  assertEquals(result.padding, '12px', 'Should create padding property');
-});
-
-test('Convert EdgeInsets to margin', () => {
-  const insets = { all: 8 };
-  const result = StyleConverter.marginToCss(insets);
-  assertEquals(result.margin, '8px', 'Should create margin property');
-});
-
-test('Convert null EdgeInsets', () => {
-  const result = StyleConverter.paddingToCss(null);
-  assert(Object.keys(result).length === 0, 'Should return empty object');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 4: BoxDecoration Conversion
-// ============================================================================
-
-console.log('TEST SUITE 4: BoxDecoration Conversion\n');
-
-test('Convert BoxDecoration with color', () => {
-  const decoration = { color: 0xFFFFFFFF }; // White
-  const result = StyleConverter.decorationToCss(decoration);
-  assertEquals(result.backgroundColor, '#ffffff', 'Should set background color');
-});
-
-test('Convert BoxDecoration with border', () => {
-  const decoration = {
-    border: {
-      all: { width: 2, color: 0xFF000000, style: 'solid' }
-    }
-  };
-  const result = StyleConverter.decorationToCss(decoration);
-  assertIncludes(result.border, '2px', 'Should have width');
-  assertIncludes(result.border, 'solid', 'Should have style');
-  assertIncludes(result.border, '#000000', 'Should have color');
-});
-
-test('Convert BoxDecoration with borderRadius', () => {
-  const decoration = { borderRadius: { circular: 8 } };
-  const result = StyleConverter.decorationToCss(decoration);
-  assertEquals(result.borderRadius, '8px', 'Should set border radius');
-});
-
-test('Convert BoxDecoration with boxShadow', () => {
-  const decoration = {
-    boxShadow: [{
-      offset: { dx: 2, dy: 2 },
-      blurRadius: 4,
-      spreadRadius: 1,
-      color: 0x33000000
-    }]
-  };
-  const result = StyleConverter.decorationToCss(decoration);
-  assertIncludes(result.boxShadow, '2px 2px', 'Should have offset');
-  assertIncludes(result.boxShadow, '4px', 'Should have blur');
-  assertIncludes(result.boxShadow, '1px', 'Should have spread');
-});
-
-test('Convert BoxDecoration with shape circle', () => {
-  const decoration = { shape: 'circle' };
-  const result = StyleConverter.decorationToCss(decoration);
-  assertEquals(result.borderRadius, '50%', 'Should be circular');
-});
-
-test('Convert BoxDecoration with gradient', () => {
-  const decoration = {
-    gradient: {
-      type: 'linear',
-      colors: [0xFFFF0000, 0xFF0000FF],
-      begin: 'topCenter',
-      end: 'bottomCenter'
-    }
-  };
-  const result = StyleConverter.decorationToCss(decoration);
-  assertIncludes(result.background, 'linear-gradient', 'Should create gradient');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 5: Border Conversion
-// ============================================================================
-
-console.log('TEST SUITE 5: Border Conversion\n');
-
-test('Convert Border.all', () => {
-  const border = {
-    all: { width: 1, color: 0xFFCCCCCC, style: 'solid' }
-  };
-  const result = StyleConverter.borderToCss(border);
-  assertEquals(result.border, '1px solid #cccccc', 'Should create border');
-});
-
-test('Convert individual borders', () => {
-  const border = {
-    top: { width: 2, color: 0xFF000000, style: 'solid' },
-    bottom: { width: 2, color: 0xFF000000, style: 'solid' }
-  };
-  const result = StyleConverter.borderToCss(border);
-  assert(result.borderTop !== undefined, 'Should have top border');
-  assert(result.borderBottom !== undefined, 'Should have bottom border');
-});
-
-test('Convert BorderRadius.circular', () => {
-  const radius = { circular: 12 };
-  const result = StyleConverter.borderRadiusToCss(radius);
-  assertEquals(result, '12px', 'Should convert circular radius');
-});
-
-test('Convert BorderRadius.only', () => {
-  const radius = {
-    topLeft: 4,
-    topRight: 8,
-    bottomRight: 12,
-    bottomLeft: 16
-  };
-  const result = StyleConverter.borderRadiusToCss(radius);
-  assertEquals(result, '4px 8px 12px 16px', 'Should convert individual radii');
-});
-
-test('Convert BorderRadius with all same', () => {
-  const radius = {
-    topLeft: 10,
-    topRight: 10,
-    bottomRight: 10,
-    bottomLeft: 10
-  };
-  const result = StyleConverter.borderRadiusToCss(radius);
-  assertEquals(result, '10px', 'Should optimize to single value');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 6: BoxShadow Conversion
-// ============================================================================
-
-console.log('TEST SUITE 6: BoxShadow Conversion\n');
-
-test('Convert single BoxShadow', () => {
-  const shadow = {
-    offset: { dx: 1, dy: 2 },
-    blurRadius: 3,
-    spreadRadius: 0,
-    color: 0x33000000
-  };
-  const result = StyleConverter.boxShadowToCss(shadow);
-  assertIncludes(result, '1px 2px 3px 0px', 'Should have all values');
-});
-
-test('Convert multiple BoxShadows', () => {
-  const shadows = [
-    { offset: { dx: 0, dy: 1 }, blurRadius: 2, spreadRadius: 0, color: 0x11000000 },
-    { offset: { dx: 0, dy: 2 }, blurRadius: 4, spreadRadius: 0, color: 0x22000000 }
-  ];
-  const result = StyleConverter.boxShadowToCss(shadows);
-  assertIncludes(result, ',', 'Should comma-separate shadows');
-  assertIncludes(result, '0px 1px', 'Should have first shadow');
-  assertIncludes(result, '0px 2px', 'Should have second shadow');
-});
-
-test('Convert BoxShadow with default color', () => {
-  const shadow = { offset: { dx: 0, dy: 0 }, blurRadius: 5 };
-  const result = StyleConverter.boxShadowToCss(shadow);
-  assertIncludes(result, 'rgba', 'Should have default color');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 7: Gradient Conversion
-// ============================================================================
-
-console.log('TEST SUITE 7: Gradient Conversion\n');
-
-test('Convert LinearGradient', () => {
-  const gradient = {
-    type: 'linear',
-    colors: [0xFFFF0000, 0xFF0000FF],
-    stops: [0, 1],
-    begin: 'topCenter',
-    end: 'bottomCenter'
-  };
-  const result = StyleConverter.gradientToCss(gradient);
-  assertIncludes(result, 'linear-gradient', 'Should be linear gradient');
-  assertIncludes(result, '#ff0000', 'Should have red');
-  assertIncludes(result, '#0000ff', 'Should have blue');
-});
-
-test('Convert LinearGradient with stops', () => {
-  const gradient = {
-    type: 'linear',
-    colors: [0xFFFF0000, 0xFFFFFF00, 0xFF0000FF],
-    stops: [0, 0.5, 1]
-  };
-  const result = StyleConverter.gradientToCss(gradient);
-  assertIncludes(result, '0%', 'Should have start stop');
-  assertIncludes(result, '50%', 'Should have middle stop');
-  assertIncludes(result, '100%', 'Should have end stop');
-});
-
-test('Convert RadialGradient', () => {
-  const gradient = {
-    type: 'radial',
-    colors: [0xFFFFFFFF, 0xFF000000]
-  };
-  const result = StyleConverter.gradientToCss(gradient);
-  assertIncludes(result, 'radial-gradient', 'Should be radial gradient');
-  assertIncludes(result, 'circle', 'Should specify circle');
-});
-
-test('Convert gradient angle mapping', () => {
-  const angle1 = StyleConverter.getGradientAngle('topLeft', 'bottomRight');
-  assertEquals(angle1, 135, 'Should map diagonal');
-  
-  const angle2 = StyleConverter.getGradientAngle('centerLeft', 'centerRight');
-  assertEquals(angle2, 90, 'Should map horizontal');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 8: Alignment Conversion
-// ============================================================================
-
-console.log('TEST SUITE 8: Alignment Conversion\n');
-
-test('Convert Alignment.center', () => {
-  const result = StyleConverter.alignmentToCss('center');
-  assertEquals(result.display, 'flex', 'Should use flexbox');
-  assertEquals(result.justifyContent, 'center', 'Should center horizontally');
-  assertEquals(result.alignItems, 'center', 'Should center vertically');
-});
-
-test('Convert Alignment.topLeft', () => {
-  const result = StyleConverter.alignmentToCss('topLeft');
-  assertEquals(result.justifyContent, 'flex-start', 'Should align left');
-  assertEquals(result.alignItems, 'flex-start', 'Should align top');
-});
-
-test('Convert Alignment.bottomRight', () => {
-  const result = StyleConverter.alignmentToCss('bottomRight');
-  assertEquals(result.justifyContent, 'flex-end', 'Should align right');
-  assertEquals(result.alignItems, 'flex-end', 'Should align bottom');
-});
-
-test('Convert Alignment with x, y values', () => {
-  const alignment = { x: -1, y: 1 };
-  const result = StyleConverter.alignmentToCss(alignment);
-  assertEquals(result.justifyContent, 'flex-start', 'Should map x to justify');
-  assertEquals(result.alignItems, 'flex-end', 'Should map y to align');
-});
-
-test('Convert MainAxisAlignment', () => {
-  assertEquals(StyleConverter.mainAxisAlignmentToCss('start'), 'flex-start');
-  assertEquals(StyleConverter.mainAxisAlignmentToCss('center'), 'center');
-  assertEquals(StyleConverter.mainAxisAlignmentToCss('spaceBetween'), 'space-between');
-  assertEquals(StyleConverter.mainAxisAlignmentToCss('spaceEvenly'), 'space-evenly');
-});
-
-test('Convert CrossAxisAlignment', () => {
-  assertEquals(StyleConverter.crossAxisAlignmentToCss('start'), 'flex-start');
-  assertEquals(StyleConverter.crossAxisAlignmentToCss('center'), 'center');
-  assertEquals(StyleConverter.crossAxisAlignmentToCss('stretch'), 'stretch');
-  assertEquals(StyleConverter.crossAxisAlignmentToCss('baseline'), 'baseline');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 9: BoxConstraints Conversion
-// ============================================================================
-
-console.log('TEST SUITE 9: BoxConstraints Conversion\n');
-
-test('Convert BoxConstraints with min/max width', () => {
-  const constraints = { minWidth: 100, maxWidth: 500 };
-  const result = StyleConverter.constraintsToCss(constraints);
-  assertEquals(result.minWidth, '100px', 'Should set min width');
-  assertEquals(result.maxWidth, '500px', 'Should set max width');
-});
-
-test('Convert BoxConstraints with min/max height', () => {
-  const constraints = { minHeight: 50, maxHeight: 300 };
-  const result = StyleConverter.constraintsToCss(constraints);
-  assertEquals(result.minHeight, '50px', 'Should set min height');
-  assertEquals(result.maxHeight, '300px', 'Should set max height');
-});
-
-test('Convert BoxConstraints with Infinity', () => {
-  const constraints = { maxWidth: Infinity };
-  const result = StyleConverter.constraintsToCss(constraints);
-  assert(result.maxWidth === undefined, 'Should ignore Infinity');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 10: Transform Conversion
-// ============================================================================
-
-console.log('TEST SUITE 10: Transform Conversion\n');
-
-test('Convert rotation transform', () => {
-  const transform = { rotateZ: 0.5 };
-  const result = StyleConverter.transformToCss(transform);
-  assertIncludes(result.transform, 'rotate', 'Should use rotate');
-  assertIncludes(result.transform, '0.5rad', 'Should preserve radians');
-});
-
-test('Convert scale transform', () => {
-  const transform = { scale: 1.5 };
-  const result = StyleConverter.transformToCss(transform);
-  assertEquals(result.transform, 'scale(1.5)', 'Should scale');
-});
-
-test('Convert translate transform', () => {
-  const transform = { translateX: 10, translateY: 20 };
-  const result = StyleConverter.transformToCss(transform);
-  assertEquals(result.transform, 'translate(10px, 20px)', 'Should translate');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 11: Material Elevation
-// ============================================================================
-
-console.log('TEST SUITE 11: Material Elevation\n');
-
-test('Convert elevation 0', () => {
-  const result = StyleConverter.elevationToBoxShadow(0);
-  assertEquals(result, 'none', 'Should have no shadow');
-});
-
-test('Convert elevation 1', () => {
-  const result = StyleConverter.elevationToBoxShadow(1);
-  assertIncludes(result, 'rgba', 'Should have shadow');
-  assertIncludes(result, '1px', 'Should have offset');
-});
-
-test('Convert elevation 3', () => {
-  const result = StyleConverter.elevationToBoxShadow(3);
-  assertIncludes(result, ',', 'Should have multiple shadows');
-});
-
-test('Convert high elevation', () => {
-  const result = StyleConverter.elevationToBoxShadow(10);
-  assertIncludes(result, '10px', 'Should scale with elevation');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 12: Clip Behavior
-// ============================================================================
-
-console.log('TEST SUITE 12: Clip Behavior\n');
-
-test('Convert Clip.none', () => {
-  const result = StyleConverter.clipToCss('none');
-  assertEquals(result.overflow, 'visible', 'Should be visible');
-});
-
-test('Convert Clip.hardEdge', () => {
-  const result = StyleConverter.clipToCss('hardEdge');
-  assertEquals(result.overflow, 'hidden', 'Should be hidden');
-});
-
-test('Convert Clip.antiAlias', () => {
-  const result = StyleConverter.clipToCss('antiAlias');
-  assertEquals(result.overflow, 'hidden', 'Should be hidden');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 13: Edge Cases
-// ============================================================================
-
-console.log('TEST SUITE 13: Edge Cases\n');
-
-test('Handle undefined/null inputs', () => {
-  assert(StyleConverter.colorToCss(undefined) === null);
-  assert(Object.keys(StyleConverter.textStyleToCss(null)).length === 0);
-  assert(StyleConverter.edgeInsetsToCss(null) === null);
-  assert(Object.keys(StyleConverter.decorationToCss(null)).length === 0);
-});
-
-test('Handle empty objects', () => {
-  const result1 = StyleConverter.textStyleToCss({});
-  assert(typeof result1 === 'object', 'Should return object');
-  
-  const result2 = StyleConverter.decorationToCss({});
-  assert(typeof result2 === 'object', 'Should return object');
-});
-
-test('Handle string font size', () => {
-  const style = { fontSize: '2em' };
-  const result = StyleConverter.textStyleToCss(style);
-  assertEquals(result.fontSize, '2em', 'Should preserve string');
-});
-
-test('Handle numeric borderRadius', () => {
-  const result = StyleConverter.borderRadiusToCss(8);
-  assertEquals(result, '8px', 'Should convert number');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUMMARY
-// ============================================================================
-
-console.log('='.repeat(80));
-console.log('📊 TEST SUMMARY');
-console.log('='.repeat(80));
-console.log(`✓ Passed: ${testsPassed}`);
-console.log(`✗ Failed: ${testsFailed}`);
-console.log(`Total: ${testsPassed + testsFailed}`);
-console.log('='.repeat(80) + '\n');
-
-if (testsFailed === 0) {
-  console.log('🎉 All tests passed!\n');
-  process.exit(0);
-} else {
-  console.log('❌ Some tests failed.\n');
-  process.exit(1);
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/vdom/test/update_scheduler.test.js b/packages/flutterjs_engine/src/vdom/test/update_scheduler.test.js
deleted file mode 100644
index 5eb74969..00000000
--- a/packages/flutterjs_engine/src/vdom/test/update_scheduler.test.js
+++ /dev/null
@@ -1,957 +0,0 @@
-/**
- * UpdateScheduler Tests - Comprehensive Scheduling & Batching Testing
- * Tests all scheduling strategies, priorities, batching, and performance
- */
-
-import { UpdateScheduler, UpdatePriority } from '../src/update_scheduler.js';
-
-console.log('\n' + '='.repeat(80));
-console.log('🧪 UPDATE SCHEDULER TESTS');
-console.log('='.repeat(80) + '\n');
-
-let testsPassed = 0;
-let testsFailed = 0;
-
-function test(name, fn) {
-  try {
-    fn();
-    console.log(`✓ ${name}`);
-    testsPassed++;
-  } catch (error) {
-    console.log(`✗ ${name}`);
-    console.log(`  Error: ${error.message}`);
-    if (error.stack) {
-      console.log(`  ${error.stack.split('\n')[1]}`);
-    }
-    testsFailed++;
-  }
-}
-
-function assert(condition, message) {
-  if (!condition) {
-    throw new Error(message || 'Assertion failed');
-  }
-}
-
-function assertEquals(actual, expected, message) {
-  if (actual !== expected) {
-    throw new Error(
-      message || `Expected "${expected}", got "${actual}"`
-    );
-  }
-}
-
-function assertGreater(actual, expected, message) {
-  if (actual <= expected) {
-    throw new Error(
-      message || `Expected ${actual} > ${expected}`
-    );
-  }
-}
-
-function assertLess(actual, expected, message) {
-  if (actual >= expected) {
-    throw new Error(
-      message || `Expected ${actual} < ${expected}`
-    );
-  }
-}
-
-// ============================================================================
-// TEST SUITE 1: Basic Scheduling
-// ============================================================================
-
-console.log('TEST SUITE 1: Basic Scheduling\n');
-
-test('Create UpdateScheduler', () => {
-  const scheduler = new UpdateScheduler();
-  assert(scheduler !== null, 'Should create scheduler');
-  assertEquals(scheduler.enableAutoFlushing, true, 'Should enable auto flushing');
-});
-
-test('Schedule single update', () => {
-  const scheduler = new UpdateScheduler();
-  let executed = false;
-
-  const id = scheduler.schedule(() => {
-    executed = true;
-  });
-
-  assert(typeof id === 'string', 'Should return update ID');
-  assert(scheduler.hasUpdates(), 'Should have pending update');
-});
-
-test('Schedule update with custom ID', () => {
-  const scheduler = new UpdateScheduler();
-  const customId = 'my-update-123';
-
-  const id = scheduler.schedule(() => {}, UpdatePriority.NORMAL, customId);
-
-  assertEquals(id, customId, 'Should use custom ID');
-});
-
-test('Schedule multiple updates', () => {
-  const scheduler = new UpdateScheduler();
-
-  scheduler.schedule(() => {});
-  scheduler.schedule(() => {});
-  scheduler.schedule(() => {});
-
-  const stats = scheduler.getQueueStats();
-  assertEquals(stats.total, 3, 'Should have 3 updates');
-});
-
-test('Reject non-function callback', () => {
-  const scheduler = new UpdateScheduler();
-
-  try {
-    scheduler.schedule('not a function');
-    throw new Error('Should have thrown');
-  } catch (error) {
-    assert(error.message.includes('function'), 'Should mention function');
-  }
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 2: Priority Levels
-// ============================================================================
-
-console.log('TEST SUITE 2: Priority Levels\n');
-
-test('Schedule IMMEDIATE priority', () => {
-  const scheduler = new UpdateScheduler();
-  let executed = false;
-
-  scheduler.schedule(() => {
-    executed = true;
-  }, UpdatePriority.IMMEDIATE);
-
-  assert(executed === true, 'IMMEDIATE should execute immediately');
-});
-
-test('Schedule HIGH priority', () => {
-  const scheduler = new UpdateScheduler();
-  const order = [];
-
-  scheduler.schedule(() => {
-    order.push('normal');
-  }, UpdatePriority.NORMAL);
-
-  scheduler.schedule(() => {
-    order.push('high');
-  }, UpdatePriority.HIGH);
-
-  scheduler.flushAll();
-
-  assertEquals(order[0], 'high', 'HIGH should execute before NORMAL');
-});
-
-test('Schedule in priority order', () => {
-  const scheduler = new UpdateScheduler();
-  const order = [];
-
-  scheduler.schedule(() => order.push('normal'), UpdatePriority.NORMAL);
-  scheduler.schedule(() => order.push('high'), UpdatePriority.HIGH);
-  scheduler.schedule(() => order.push('low'), UpdatePriority.LOW);
-
-  scheduler.flushAll();
-
-  assertEquals(order[0], 'high', 'HIGH first');
-  assertEquals(order[1], 'normal', 'NORMAL second');
-  assertEquals(order[2], 'low', 'LOW third');
-});
-
-test('Reject invalid priority', () => {
-  const scheduler = new UpdateScheduler();
-
-  try {
-    scheduler.schedule(() => {}, 'invalid-priority');
-    throw new Error('Should have thrown');
-  } catch (error) {
-    assert(error.message.includes('Invalid priority'), 'Should mention priority');
-  }
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 3: Batching
-// ============================================================================
-
-console.log('TEST SUITE 3: Batching\n');
-
-test('Schedule batch of updates', () => {
-  const scheduler = new UpdateScheduler();
-  const callbacks = [
-    () => console.log('1'),
-    () => console.log('2'),
-    () => console.log('3')
-  ];
-
-  const batchId = scheduler.scheduleBatch(callbacks);
-
-  assert(typeof batchId === 'string', 'Should return batch ID');
-  assert(scheduler.hasUpdates(), 'Should have updates');
-});
-
-test('Execute batch in order', () => {
-  const scheduler = new UpdateScheduler();
-  const order = [];
-
-  const callbacks = [
-    () => order.push(1),
-    () => order.push(2),
-    () => order.push(3)
-  ];
-
-  scheduler.scheduleBatch(callbacks);
-  scheduler.flushAll();
-
-  assertEquals(order[0], 1, 'First callback first');
-  assertEquals(order[1], 2, 'Second callback second');
-  assertEquals(order[2], 3, 'Third callback third');
-});
-
-test('Batch with custom priority', () => {
-  const scheduler = new UpdateScheduler();
-  const order = [];
-
-  scheduler.schedule(() => order.push('normal'), UpdatePriority.NORMAL);
-  scheduler.scheduleBatch(
-    [() => order.push('high-1'), () => order.push('high-2')],
-    UpdatePriority.HIGH
-  );
-
-  scheduler.flushAll();
-
-  assertEquals(order[0], 'high-1', 'HIGH batch first');
-  assertEquals(order[1], 'high-2', 'HIGH batch continues');
-  assertEquals(order[2], 'normal', 'NORMAL after batch');
-});
-
-test('Reject non-array batch', () => {
-  const scheduler = new UpdateScheduler();
-
-  try {
-    scheduler.scheduleBatch(() => {});
-    throw new Error('Should have thrown');
-  } catch (error) {
-    assert(error.message.includes('array'), 'Should mention array');
-  }
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 4: Execution & Flushing
-// ============================================================================
-
-console.log('TEST SUITE 4: Execution & Flushing\n');
-
-test('Flush executes updates', () => {
-  const scheduler = new UpdateScheduler();
-  let executed = false;
-
-  scheduler.schedule(() => {
-    executed = true;
-  }, UpdatePriority.NORMAL);
-
-  const result = scheduler.flush();
-
-  assertEquals(result.success, true, 'Should succeed');
-  assert(executed === true, 'Should execute callback');
-  assertEquals(result.processed, 1, 'Should process 1 update');
-});
-
-test('Flush returns results', () => {
-  const scheduler = new UpdateScheduler();
-
-  scheduler.schedule(() => {});
-  scheduler.schedule(() => {});
-
-  const result = scheduler.flush();
-
-  assertEquals(result.processed, 2, 'Should process 2');
-  assertEquals(result.results.length, 2, 'Should have 2 results');
-  assert(result.results[0].success === true, 'First successful');
-  assert(result.results[1].success === true, 'Second successful');
-});
-
-test('Flush all pending updates', () => {
-  const scheduler = new UpdateScheduler();
-  let count = 0;
-
-  for (let i = 0; i < 100; i++) {
-    scheduler.schedule(() => { count++; }, UpdatePriority.NORMAL);
-  }
-
-  const result = scheduler.flushAll();
-
-  assertEquals(count, 100, 'Should execute all');
-  assertEquals(result.totalProcessed, 100, 'Should report all processed');
-  assertEquals(scheduler.hasUpdates(), false, 'Should be empty');
-});
-
-test('Flush respects batch size', () => {
-  const scheduler = new UpdateScheduler({
-    maxBatchSize: 5,
-    enableAutoFlushing: false
-  });
-
-  for (let i = 0; i < 20; i++) {
-    scheduler.schedule(() => {});
-  }
-
-  const result1 = scheduler.flush();
-  assertEquals(result1.processed, 5, 'First flush: 5 updates');
-
-  const result2 = scheduler.flush();
-  assertEquals(result2.processed, 5, 'Second flush: 5 updates');
-
-  assertEquals(scheduler.getPendingCount(), 10, 'Should have 10 remaining');
-});
-
-test('Flush all iterates until empty', () => {
-  const scheduler = new UpdateScheduler({
-    maxBatchSize: 3,
-    enableAutoFlushing: false
-  });
-
-  for (let i = 0; i < 10; i++) {
-    scheduler.schedule(() => {});
-  }
-
-  const result = scheduler.flushAll();
-
-  assertGreater(result.iterations, 1, 'Should iterate multiple times');
-  assertEquals(result.totalProcessed, 10, 'Should process all');
-  assertEquals(scheduler.hasUpdates(), false, 'Should be empty');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 5: Error Handling
-// ============================================================================
-
-console.log('TEST SUITE 5: Error Handling\n');
-
-test('Catch update errors', () => {
-  const scheduler = new UpdateScheduler();
-  let successCount = 0;
-
-  scheduler.schedule(() => {
-    throw new Error('Update failed');
-  });
-  scheduler.schedule(() => {
-    successCount++;
-  });
-
-  const result = scheduler.flush();
-
-  assertEquals(result.failed, 1, 'Should report 1 failure');
-  assertEquals(successCount, 1, 'Should continue after error');
-  assertEquals(result.processed, 1, 'Should process 1 success');
-});
-
-test('Track error metrics', () => {
-  const scheduler = new UpdateScheduler();
-
-  scheduler.schedule(() => {
-    throw new Error('Error 1');
-  });
-  scheduler.schedule(() => {
-    throw new Error('Error 2');
-  });
-
-  scheduler.flushAll();
-
-  const metrics = scheduler.getMetrics();
-  assertEquals(metrics.errors, 2, 'Should track 2 errors');
-});
-
-test('Call onError hook', () => {
-  const scheduler = new UpdateScheduler();
-  let errorHandled = false;
-  let errorInfo = null;
-
-  scheduler.onError = (error, update) => {
-    errorHandled = true;
-    errorInfo = { error, updateId: update.id };
-  };
-
-  scheduler.schedule(() => {
-    throw new Error('Test error');
-  });
-
-  scheduler.flush();
-
-  assert(errorHandled === true, 'Should call onError');
-  assert(errorInfo.error.message === 'Test error', 'Should have error');
-});
-
-test('Continue on error with multiple updates', () => {
-  const scheduler = new UpdateScheduler();
-  const results = [];
-
-  scheduler.schedule(() => { results.push(1); });
-  scheduler.schedule(() => { throw new Error('Fail'); });
-  scheduler.schedule(() => { results.push(3); });
-
-  const flushResult = scheduler.flush();
-
-  assertEquals(results.length, 2, 'Should execute non-failing updates');
-  assertEquals(flushResult.failed, 1, 'Should report 1 failure');
-  assertEquals(flushResult.processed, 2, 'Should process 2 successes');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 6: Cancellation
-// ============================================================================
-
-console.log('TEST SUITE 6: Cancellation\n');
-
-test('Cancel single update', () => {
-  const scheduler = new UpdateScheduler();
-  let executed = false;
-
-  const id = scheduler.schedule(() => {
-    executed = true;
-  }, UpdatePriority.NORMAL);
-
-  const cancelled = scheduler.cancel(id);
-
-  assertEquals(cancelled, true, 'Should return true');
-  assertEquals(scheduler.hasUpdates(), false, 'Should be empty');
-  scheduler.flushAll();
-  assertEquals(executed, false, 'Should not execute');
-});
-
-test('Cancel non-existent update returns false', () => {
-  const scheduler = new UpdateScheduler();
-
-  const cancelled = scheduler.cancel('non-existent-id');
-
-  assertEquals(cancelled, false, 'Should return false');
-});
-
-test('Cancel batch of updates', () => {
-  const scheduler = new UpdateScheduler();
-  let count = 0;
-
-  const batchId = scheduler.scheduleBatch([
-    () => { count++; },
-    () => { count++; },
-    () => { count++; }
-  ]);
-
-  const cancelled = scheduler.cancelBatch(batchId);
-
-  assertEquals(cancelled, 3, 'Should cancel 3 updates');
-  scheduler.flushAll();
-  assertEquals(count, 0, 'Should not execute any');
-});
-
-test('Track cancelled metrics', () => {
-  const scheduler = new UpdateScheduler();
-
-  const id1 = scheduler.schedule(() => {});
-  const id2 = scheduler.schedule(() => {});
-
-  scheduler.cancel(id1);
-  scheduler.cancel(id2);
-
-  const metrics = scheduler.getMetrics();
-  assertEquals(metrics.skipped, 2, 'Should track 2 skipped');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 7: Callbacks & Hooks
-// ============================================================================
-
-console.log('TEST SUITE 7: Callbacks & Hooks\n');
-
-test('Call onBeforeFlushed hook', () => {
-  const scheduler = new UpdateScheduler();
-  let hookCalled = false;
-  let updateCount = 0;
-
-  scheduler.onBeforeFlushed = (updates) => {
-    hookCalled = true;
-    updateCount = updates.length;
-  };
-
-  scheduler.schedule(() => {});
-  scheduler.schedule(() => {});
-
-  scheduler.flush();
-
-  assertEquals(hookCalled, true, 'Should call hook');
-  assertEquals(updateCount, 2, 'Should pass updates');
-});
-
-test('Call onAfterFlushed hook', () => {
-  const scheduler = new UpdateScheduler();
-  let hookCalled = false;
-  let resultsCount = 0;
-
-  scheduler.onAfterFlushed = (results) => {
-    hookCalled = true;
-    resultsCount = results.length;
-  };
-
-  scheduler.schedule(() => {});
-  scheduler.schedule(() => {});
-
-  scheduler.flush();
-
-  assertEquals(hookCalled, true, 'Should call hook');
-  assertEquals(resultsCount, 2, 'Should pass results');
-});
-
-test('Handle hook errors gracefully', () => {
-  const scheduler = new UpdateScheduler();
-
-  scheduler.onBeforeFlushed = () => {
-    throw new Error('Hook error');
-  };
-
-  scheduler.schedule(() => {});
-
-  // Should not throw
-  const result = scheduler.flush();
-  assertEquals(result.processed, 1, 'Should still execute updates');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 8: Metrics & Statistics
-// ============================================================================
-
-console.log('TEST SUITE 8: Metrics & Statistics\n');
-
-test('Track total updates', () => {
-  const scheduler = new UpdateScheduler();
-
-  scheduler.schedule(() => {});
-  scheduler.schedule(() => {});
-  scheduler.schedule(() => {});
-
-  scheduler.flushAll();
-
-  const metrics = scheduler.getMetrics();
-  assertEquals(metrics.totalUpdates, 3, 'Should track total');
-});
-
-test('Track execution time', () => {
-  const scheduler = new UpdateScheduler();
-
-  scheduler.schedule(() => {});
-  scheduler.schedule(() => {});
-
-  scheduler.flush();
-
-  const metrics = scheduler.getMetrics();
-  assertGreater(metrics.totalTime, 0, 'Should measure time');
-  assertGreater(metrics.maxTime, 0, 'Should have max time');
-});
-
-test('Calculate average time', () => {
-  const scheduler = new UpdateScheduler();
-
-  for (let i = 0; i < 10; i++) {
-    scheduler.schedule(() => {});
-  }
-
-  scheduler.flushAll();
-
-  const metrics = scheduler.getMetrics();
-  assertEquals(metrics.averageTime, metrics.totalTime / metrics.totalUpdates, 'Should calculate average');
-});
-
-test('Get queue statistics', () => {
-  const scheduler = new UpdateScheduler();
-
-  scheduler.schedule(() => {}, UpdatePriority.HIGH);
-  scheduler.schedule(() => {}, UpdatePriority.NORMAL);
-  scheduler.schedule(() => {}, UpdatePriority.NORMAL);
-  scheduler.schedule(() => {}, UpdatePriority.LOW);
-
-  const stats = scheduler.getQueueStats();
-
-  assertEquals(stats.total, 4, 'Should count total');
-  assertEquals(stats.byPriority[UpdatePriority.HIGH], 1, 'Should count HIGH');
-  assertEquals(stats.byPriority[UpdatePriority.NORMAL], 2, 'Should count NORMAL');
-  assertEquals(stats.byPriority[UpdatePriority.LOW], 1, 'Should count LOW');
-});
-
-test('Get pending count', () => {
-  const scheduler = new UpdateScheduler();
-
-  scheduler.schedule(() => {});
-  scheduler.schedule(() => {});
-  scheduler.schedule(() => {});
-
-  assertEquals(scheduler.getPendingCount(), 3, 'Should count pending');
-
-  scheduler.flush();
-
-  assertEquals(scheduler.getPendingCount(), 0, 'Should be empty after flush');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 9: Reset & Cleanup
-// ============================================================================
-
-console.log('TEST SUITE 9: Reset & Cleanup\n');
-
-test('Reset clears all state', () => {
-  const scheduler = new UpdateScheduler();
-
-  scheduler.schedule(() => {});
-  scheduler.schedule(() => {});
-
-  scheduler.reset();
-
-  assertEquals(scheduler.hasUpdates(), false, 'Should be empty');
-  assertEquals(scheduler.getPendingCount(), 0, 'Should have no pending');
-  assertEquals(scheduler.getMetrics().totalUpdates, 0, 'Should reset metrics');
-});
-
-test('Clear metrics only', () => {
-  const scheduler = new UpdateScheduler();
-
-  scheduler.schedule(() => {});
-  scheduler.flushAll();
-
-  const before = scheduler.getMetrics().totalUpdates;
-  assertEquals(before, 1, 'Should have tracked 1');
-
-  scheduler.schedule(() => {});
-  scheduler.clearMetrics();
-
-  assertEquals(scheduler.getMetrics().totalUpdates, 0, 'Should reset metrics');
-  assertEquals(scheduler.getPendingCount(), 1, 'Should keep pending');
-});
-
-test('Drain updates without executing', () => {
-  const scheduler = new UpdateScheduler();
-  let count = 0;
-
-  scheduler.schedule(() => { count++; });
-  scheduler.schedule(() => { count++; });
-
-  const drained = scheduler.drain();
-
-  assertEquals(drained.length, 2, 'Should drain 2 updates');
-  assertEquals(count, 0, 'Should not execute');
-  assertEquals(scheduler.hasUpdates(), false, 'Should be empty');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 10: Async & Frame Scheduling
-// ============================================================================
-
-console.log('TEST SUITE 10: Async & Frame Scheduling\n');
-
-test('Wait for flush completion', async () => {
-  const scheduler = new UpdateScheduler({
-    enableAutoFlushing: true
-  });
-  let executed = false;
-
-  scheduler.schedule(() => {
-    executed = true;
-  }, UpdatePriority.NORMAL);
-
-  await scheduler.waitForFlush();
-
-  assertEquals(executed, true, 'Should execute before resolving');
-});
-
-test('WaitForFlush resolves immediately if empty', async () => {
-  const scheduler = new UpdateScheduler();
-
-  const start = Date.now();
-  await scheduler.waitForFlush();
-  const elapsed = Date.now() - start;
-
-  assertLess(elapsed, 50, 'Should resolve quickly');
-});
-
-test('Create priority updater', () => {
-  const scheduler = new UpdateScheduler();
-  const highUpdater = scheduler.createUpdater(UpdatePriority.HIGH);
-
-  highUpdater(() => {});
-  highUpdater(() => {});
-
-  const stats = scheduler.getQueueStats();
-  assertEquals(stats.byPriority[UpdatePriority.HIGH], 2, 'Should schedule at HIGH priority');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 11: Configuration Options
-// ============================================================================
-
-console.log('TEST SUITE 11: Configuration Options\n');
-
-test('Custom max batch size', () => {
-  const scheduler = new UpdateScheduler({
-    maxBatchSize: 2,
-    enableAutoFlushing: false
-  });
-
-  for (let i = 0; i < 10; i++) {
-    scheduler.schedule(() => {});
-  }
-
-  const result1 = scheduler.flush();
-  assertEquals(result1.processed, 2, 'First batch: 2 items');
-
-  const result2 = scheduler.flush();
-  assertEquals(result2.processed, 2, 'Second batch: 2 items');
-});
-
-test('Disable auto flushing', () => {
-  const scheduler = new UpdateScheduler({
-    enableAutoFlushing: false
-  });
-
-  scheduler.schedule(() => {}, UpdatePriority.NORMAL);
-
-  assertEquals(scheduler.frameScheduled, false, 'Should not schedule frame');
-  assertEquals(scheduler.hasUpdates(), true, 'Should have updates pending');
-});
-
-test('Disable prioritization', () => {
-  const scheduler = new UpdateScheduler({
-    enablePrioritization: false,
-    enableAutoFlushing: false
-  });
-
-  const order = [];
-
-  scheduler.schedule(() => order.push('low'), UpdatePriority.LOW);
-  scheduler.schedule(() => order.push('high'), UpdatePriority.HIGH);
-  scheduler.schedule(() => order.push('normal'), UpdatePriority.NORMAL);
-
-  scheduler.flushAll();
-
-  // Without prioritization, should be FIFO
-  assertEquals(order[0], 'low', 'First scheduled first');
-  assertEquals(order[1], 'high', 'Second scheduled second');
-  assertEquals(order[2], 'normal', 'Third scheduled third');
-});
-
-test('Disable metrics', () => {
-  const scheduler = new UpdateScheduler({
-    enableMetrics: false
-  });
-
-  scheduler.schedule(() => {});
-  scheduler.flushAll();
-
-  // Should still work, just not track metrics
-  assertEquals(scheduler.hasUpdates(), false, 'Should execute');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 12: Edge Cases
-// ============================================================================
-
-console.log('TEST SUITE 12: Edge Cases\n');
-
-test('Handle empty flush', () => {
-  const scheduler = new UpdateScheduler();
-
-  const result = scheduler.flush();
-
-  assertEquals(result.success, true, 'Should succeed');
-  assertEquals(result.processed, 0, 'Should process 0');
-});
-
-test('Handle flush while processing', () => {
-  const scheduler = new UpdateScheduler();
-
-  scheduler.schedule(() => {
-    const result = scheduler.flush();
-    assertEquals(result.success, false, 'Should fail while processing');
-  });
-
-  scheduler.flush();
-});
-
-test('Handle multiple rapid flushes', () => {
-  const scheduler = new UpdateScheduler({
-    enableAutoFlushing: false
-  });
-
-  for (let i = 0; i < 5; i++) {
-    scheduler.schedule(() => {});
-  }
-
-  const result1 = scheduler.flush();
-  const result2 = scheduler.flush();
-  const result3 = scheduler.flush();
-
-  assert(result1.processed >= 0, 'First flush OK');
-  assert(result2.processed >= 0, 'Second flush OK');
-  assert(result3.processed >= 0, 'Third flush OK');
-});
-
-test('Handle very large batch', () => {
-  const scheduler = new UpdateScheduler({
-    maxBatchSize: 1000,
-    enableAutoFlushing: false
-  });
-
-  let count = 0;
-  for (let i = 0; i < 1000; i++) {
-    scheduler.schedule(() => { count++; });
-  }
-
-  scheduler.flush();
-
-  assertEquals(count, 1000, 'Should handle large batch');
-});
-
-test('Handle recursive scheduling', () => {
-  const scheduler = new UpdateScheduler({
-    enableAutoFlushing: false
-  });
-
-  const order = [];
-
-  scheduler.schedule(() => {
-    order.push('a');
-    // Schedule more updates while flushing
-    scheduler.schedule(() => {
-      order.push('b');
-    });
-  });
-
-  scheduler.flushAll();
-
-  assertEquals(order[0], 'a', 'First update first');
-  assertEquals(order[1], 'b', 'Recursive update second');
-});
-
-test('Handle concurrent updates', () => {
-  const scheduler = new UpdateScheduler({
-    enableAutoFlushing: false
-  });
-
-  const results = [];
-
-  // Simulate concurrent scheduling
-  for (let i = 0; i < 10; i++) {
-    scheduler.schedule(() => {
-      results.push(i);
-    }, UpdatePriority.NORMAL, `update-${i}`);
-  }
-
-  scheduler.flushAll();
-
-  assertEquals(results.length, 10, 'Should execute all concurrent');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 13: Performance
-// ============================================================================
-
-console.log('TEST SUITE 13: Performance\n');
-
-test('Schedule 10000 updates efficiently', () => {
-  const scheduler = new UpdateScheduler({
-    enableAutoFlushing: false,
-    maxBatchSize: 100
-  });
-
-  const start = Date.now();
-
-  for (let i = 0; i < 10000; i++) {
-    scheduler.schedule(() => {});
-  }
-
-  const elapsed = Date.now() - start;
-
-  assertLess(elapsed, 1000, `Should schedule 10k in < 1s (${elapsed}ms)`);
-  assertEquals(scheduler.getPendingCount(), 10000, 'Should have all pending');
-});
-
-test('Flush 1000 updates efficiently', () => {
-  const scheduler = new UpdateScheduler({
-    enableAutoFlushing: false,
-    maxBatchSize: 50
-  });
-
-  for (let i = 0; i < 1000; i++) {
-    scheduler.schedule(() => {});
-  }
-
-  const start = Date.now();
-  scheduler.flushAll();
-  const elapsed = Date.now() - start;
-
-  assertLess(elapsed, 500, `Should flush 1k in < 500ms (${elapsed}ms)`);
-  assertEquals(scheduler.hasUpdates(), false, 'Should be empty');
-});
-
-test('Track performance metrics', () => {
-  const scheduler = new UpdateScheduler({
-    enableAutoFlushing: false
-  });
-
-  for (let i = 0; i < 100; i++) {
-    scheduler.schedule(() => {});
-  }
-
-  scheduler.flushAll();
-
-  const metrics = scheduler.getMetrics();
-
-  assertEquals(metrics.totalUpdates, 100, 'Should track all');
-  assertGreater(metrics.totalTime, 0, 'Should measure time');
-  assertGreater(metrics.averageTime, 0, 'Should calculate average');
-  assertGreater(metrics.maxTime, metrics.minTime, 'Max > Min');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUMMARY
-// ============================================================================
-
-console.log('='.repeat(80));
-console.log('📊 TEST SUMMARY');
-console.log('='.repeat(80));
-console.log(`✓ Passed: ${testsPassed}`);
-console.log(`✗ Failed: ${testsFailed}`);
-console.log(`Total: ${testsPassed + testsFailed}`);
-console.log('='.repeat(80) + '\n');
-
-if (testsFailed === 0) {
-  console.log('🎉 All tests passed!\n');
-  process.exit(0);
-} else {
-  console.log('✗ Some tests failed.\n');
-  process.exit(1);
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/vdom/test/vnode.test.js b/packages/flutterjs_engine/src/vdom/test/vnode.test.js
deleted file mode 100644
index d3134de0..00000000
--- a/packages/flutterjs_engine/src/vdom/test/vnode.test.js
+++ /dev/null
@@ -1,856 +0,0 @@
-/**
- * VNode Tests - Comprehensive Integration Testing
- * Tests VNode creation, rendering (DOM/SSR), hydration, and Flutter widget integration
- */
-
-import { VNode } from '../src/vnode.js';
-import { JSDOM } from 'jsdom';
-
-// Setup DOM environment for testing
-const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
-global.document = dom.window.document;
-global.window = dom.window;
-global.Node = dom.window.Node;
-global.HTMLElement = dom.window.HTMLElement;
-
-console.log('\n' + '='.repeat(80));
-console.log('🧪 VNODE INTEGRATION TESTS');
-console.log('='.repeat(80) + '\n');
-
-let testsPassed = 0;
-let testsFailed = 0;
-
-function test(name, fn) {
-  try {
-    fn();
-    console.log(`✓ ${name}`);
-    testsPassed++;
-  } catch (error) {
-    console.log(`✗ ${name}`);
-    console.log(`  Error: ${error.message}`);
-    if (error.stack) {
-      console.log(`  ${error.stack.split('\n')[1]}`);
-    }
-    testsFailed++;
-  }
-}
-
-function assert(condition, message) {
-  if (!condition) {
-    throw new Error(message || 'Assertion failed');
-  }
-}
-
-function assertEquals(actual, expected, message) {
-  if (actual !== expected) {
-    throw new Error(
-      message || `Expected ${expected}, got ${actual}`
-    );
-  }
-}
-
-function assertIncludes(haystack, needle, message) {
-  if (!haystack.includes(needle)) {
-    throw new Error(
-      message || `Expected "${haystack}" to include "${needle}"`
-    );
-  }
-}
-
-// ============================================================================
-// TEST SUITE 1: VNode Creation & Basic Properties
-// ============================================================================
-
-console.log('TEST SUITE 1: VNode Creation & Basic Properties\n');
-
-test('Create empty VNode', () => {
-  const vnode = new VNode();
-  assert(vnode.tag === 'div', 'Should default to div tag');
-  assert(Array.isArray(vnode.children), 'Should have children array');
-  assert(typeof vnode.props === 'object', 'Should have props object');
-});
-
-test('Create VNode with tag', () => {
-  const vnode = new VNode({ tag: 'span' });
-  assertEquals(vnode.tag, 'span', 'Should set tag');
-});
-
-test('Create VNode with props', () => {
-  const vnode = new VNode({
-    tag: 'button',
-    props: { className: 'btn-primary', id: 'my-button' }
-  });
-  
-  assertEquals(vnode.props.className, 'btn-primary', 'Should set className');
-  assertEquals(vnode.props.id, 'my-button', 'Should set id');
-});
-
-test('Create VNode with styles', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    style: { color: 'red', fontSize: '16px', padding: '10px' }
-  });
-  
-  assertEquals(vnode.style.color, 'red', 'Should set color');
-  assertEquals(vnode.style.fontSize, '16px', 'Should set fontSize');
-  assertEquals(vnode.style.padding, '10px', 'Should set padding');
-});
-
-test('Create VNode with children', () => {
-  const child1 = new VNode({ tag: 'span', children: ['Child 1'] });
-  const child2 = new VNode({ tag: 'span', children: ['Child 2'] });
-  
-  const parent = new VNode({
-    tag: 'div',
-    children: [child1, child2, 'Text node']
-  });
-  
-  assertEquals(parent.children.length, 3, 'Should have 3 children');
-  assert(parent.children[0] instanceof VNode, 'First child is VNode');
-  assert(parent.children[1] instanceof VNode, 'Second child is VNode');
-  assertEquals(parent.children[2], 'Text node', 'Third child is text');
-});
-
-test('Create VNode with key', () => {
-  const vnode = new VNode({ tag: 'li', key: 'item-1' });
-  assertEquals(vnode.key, 'item-1', 'Should set key');
-});
-
-test('Create VNode with events', () => {
-  const clickHandler = () => console.log('clicked');
-  const vnode = new VNode({
-    tag: 'button',
-    events: { click: clickHandler }
-  });
-  
-  assertEquals(vnode.events.click, clickHandler, 'Should set event handler');
-});
-
-test('Create VNode with state binding', () => {
-  const vnode = new VNode({
-    tag: 'span',
-    statefulWidgetId: 'counter-1',
-    stateProperty: 'count',
-    isStateBinding: true
-  });
-  
-  assertEquals(vnode.statefulWidgetId, 'counter-1', 'Should set widget ID');
-  assertEquals(vnode.stateProperty, 'count', 'Should set property');
-  assert(vnode.isStateBinding === true, 'Should mark as state binding');
-});
-
-test('Create VNode with metadata', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    metadata: { widgetType: 'Container', flutterProps: { padding: 16 } }
-  });
-  
-  assertEquals(vnode.metadata.widgetType, 'Container', 'Should set widget type');
-  assert(vnode.metadata.flutterProps !== undefined, 'Should store Flutter props');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 2: HTML Rendering (SSR)
-// ============================================================================
-
-console.log('TEST SUITE 2: HTML Rendering (SSR)\n');
-
-test('Render simple VNode to HTML', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    children: ['Hello World']
-  });
-  
-  const html = vnode.toHTML();
-  assertIncludes(html, '<div>', 'Should have opening tag');
-  assertIncludes(html, 'Hello World', 'Should have content');
-  assertIncludes(html, '</div>', 'Should have closing tag');
-});
-
-test('Render VNode with props to HTML', () => {
-  const vnode = new VNode({
-    tag: 'button',
-    props: { className: 'btn', id: 'submit' },
-    children: ['Submit']
-  });
-  
-  const html = vnode.toHTML();
-  assertIncludes(html, 'class="btn"', 'Should render className');
-  assertIncludes(html, 'id="submit"', 'Should render id');
-  assertIncludes(html, 'Submit', 'Should render content');
-});
-
-test('Render VNode with styles to HTML', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    style: { color: 'blue', fontSize: '18px' },
-    children: ['Styled text']
-  });
-  
-  const html = vnode.toHTML();
-  assertIncludes(html, 'style="', 'Should have style attribute');
-  assertIncludes(html, 'color: blue', 'Should include color');
-  assertIncludes(html, 'font-size: 18px', 'Should convert camelCase to kebab-case');
-});
-
-test('Render nested VNodes to HTML', () => {
-  const child = new VNode({
-    tag: 'span',
-    children: ['Inner text']
-  });
-  
-  const parent = new VNode({
-    tag: 'div',
-    props: { className: 'container' },
-    children: [child]
-  });
-  
-  const html = parent.toHTML();
-  assertIncludes(html, '<div', 'Should have parent tag');
-  assertIncludes(html, '<span>', 'Should have child tag');
-  assertIncludes(html, 'Inner text', 'Should have nested content');
-  assertIncludes(html, '</span>', 'Should close child');
-  assertIncludes(html, '</div>', 'Should close parent');
-});
-
-test('Render void tags correctly', () => {
-  const vnode = new VNode({
-    tag: 'img',
-    props: { src: 'image.jpg', alt: 'Test' }
-  });
-  
-  const html = vnode.toHTML();
-  assertIncludes(html, '<img', 'Should have img tag');
-  assertIncludes(html, 'src="image.jpg"', 'Should have src');
-  assert(!html.includes('</img>'), 'Should not have closing tag');
-});
-
-test('Escape HTML special characters', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    children: ['<script>alert("xss")</script>']
-  });
-  
-  const html = vnode.toHTML();
-  assertIncludes(html, '&lt;script&gt;', 'Should escape <');
-  assertIncludes(html, '&lt;/script&gt;', 'Should escape </');
-  assert(!html.includes('<script>'), 'Should not have unescaped script tag');
-});
-
-test('Render boolean attributes', () => {
-  const vnode = new VNode({
-    tag: 'input',
-    props: { type: 'checkbox', checked: true, disabled: false }
-  });
-  
-  const html = vnode.toHTML();
-  assertIncludes(html, 'checked', 'Should include true boolean');
-  assert(!html.includes('disabled'), 'Should omit false boolean');
-});
-
-test('Render data attributes', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    props: { 'data-widget-id': '123', 'data-type': 'container' }
-  });
-  
-  const html = vnode.toHTML();
-  assertIncludes(html, 'data-widget-id="123"', 'Should render data attribute');
-  assertIncludes(html, 'data-type="container"', 'Should render data attribute');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 3: DOM Rendering (CSR)
-// ============================================================================
-
-console.log('TEST SUITE 3: DOM Rendering (CSR)\n');
-
-test('Render simple VNode to DOM', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    children: ['Hello DOM']
-  });
-  
-  const element = vnode.toDOM();
-  assertEquals(element.tagName, 'DIV', 'Should create div element');
-  assertEquals(element.textContent, 'Hello DOM', 'Should have text content');
-});
-
-test('Render VNode with props to DOM', () => {
-  const vnode = new VNode({
-    tag: 'button',
-    props: { className: 'btn-primary', id: 'action-btn', disabled: true }
-  });
-  
-  const element = vnode.toDOM();
-  assertEquals(element.className, 'btn-primary', 'Should set className');
-  assertEquals(element.id, 'action-btn', 'Should set id');
-  assert(element.disabled === true, 'Should set disabled');
-});
-
-test('Render VNode with styles to DOM', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    style: { color: 'red', fontSize: '20px', display: 'flex' }
-  });
-  
-  const element = vnode.toDOM();
-  assertEquals(element.style.color, 'red', 'Should set color');
-  assertEquals(element.style.fontSize, '20px', 'Should set fontSize');
-  assertEquals(element.style.display, 'flex', 'Should set display');
-});
-
-test('Render nested VNodes to DOM', () => {
-  const child1 = new VNode({ tag: 'span', children: ['Child 1'] });
-  const child2 = new VNode({ tag: 'span', children: ['Child 2'] });
-  
-  const parent = new VNode({
-    tag: 'div',
-    children: [child1, child2, 'Text node']
-  });
-  
-  const element = parent.toDOM();
-  assertEquals(element.childNodes.length, 3, 'Should have 3 children');
-  assertEquals(element.childNodes[0].tagName, 'SPAN', 'First is span');
-  assertEquals(element.childNodes[1].tagName, 'SPAN', 'Second is span');
-  assertEquals(element.childNodes[2].nodeType, Node.TEXT_NODE, 'Third is text');
-});
-
-test('Attach event listeners to DOM', () => {
-  let clicked = false;
-  const vnode = new VNode({
-    tag: 'button',
-    events: { click: () => { clicked = true; } }
-  });
-  
-  const element = vnode.toDOM();
-  element.click();
-  assert(clicked === true, 'Should call click handler');
-});
-
-test('Store VNode reference on DOM element', () => {
-  const vnode = new VNode({ tag: 'div' });
-  const element = vnode.toDOM();
-  
-  assert(element._vnode === vnode, 'Should store vnode reference');
-  assert(vnode._element === element, 'Should store element reference');
-});
-
-test('Call ref callback on DOM creation', () => {
-  let refElement = null;
-  const vnode = new VNode({
-    tag: 'div',
-    ref: (el) => { refElement = el; }
-  });
-  
-  const element = vnode.toDOM();
-  assert(refElement === element, 'Should call ref with element');
-});
-
-test('Handle input value correctly', () => {
-  const vnode = new VNode({
-    tag: 'input',
-    props: { type: 'text', value: 'Initial value' }
-  });
-  
-  const element = vnode.toDOM();
-  assertEquals(element.value, 'Initial value', 'Should set input value');
-});
-
-test('Handle checkbox checked state', () => {
-  const vnode = new VNode({
-    tag: 'input',
-    props: { type: 'checkbox', checked: true }
-  });
-  
-  const element = vnode.toDOM();
-  assert(element.checked === true, 'Should set checked state');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 4: Hydration (SSR → CSR)
-// ============================================================================
-
-console.log('TEST SUITE 4: Hydration (SSR → CSR)\n');
-
-test('Hydrate simple VNode', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    children: ['Hello']
-  });
-  
-  // Create SSR HTML
-  const html = vnode.toHTML();
-  const container = document.createElement('div');
-  container.innerHTML = html;
-  const ssrElement = container.firstChild;
-  
-  // Hydrate
-  const hydrated = vnode.hydrate(ssrElement);
-  assert(hydrated === ssrElement, 'Should return same element');
-  assert(vnode._element === ssrElement, 'Should store reference');
-});
-
-test('Hydrate with events', () => {
-  let clicked = false;
-  const vnode = new VNode({
-    tag: 'button',
-    children: ['Click me'],
-    events: { click: () => { clicked = true; } }
-  });
-  
-  // SSR HTML (no events)
-  const container = document.createElement('div');
-  container.innerHTML = '<button>Click me</button>';
-  const ssrElement = container.firstChild;
-  
-  // Hydrate (attaches events)
-  vnode.hydrate(ssrElement);
-  ssrElement.click();
-  
-  assert(clicked === true, 'Should attach event handler');
-});
-
-test('Hydrate nested structure', () => {
-  const child = new VNode({
-    tag: 'span',
-    children: ['Inner']
-  });
-  
-  const parent = new VNode({
-    tag: 'div',
-    children: [child]
-  });
-  
-  // Create SSR HTML
-  const container = document.createElement('div');
-  container.innerHTML = '<div><span>Inner</span></div>';
-  const ssrElement = container.firstChild;
-  
-  // Hydrate
-  parent.hydrate(ssrElement);
-  
-  assert(parent._element === ssrElement, 'Parent should be hydrated');
-  assert(child._element === ssrElement.firstChild, 'Child should be hydrated');
-});
-
-test('Hydrate with ref callback', () => {
-  let refElement = null;
-  const vnode = new VNode({
-    tag: 'div',
-    ref: (el) => { refElement = el; }
-  });
-  
-  const container = document.createElement('div');
-  container.innerHTML = '<div></div>';
-  const ssrElement = container.firstChild;
-  
-  vnode.hydrate(ssrElement);
-  assert(refElement === ssrElement, 'Should call ref during hydration');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 5: Flutter Widget Integration
-// ============================================================================
-
-console.log('TEST SUITE 5: Flutter Widget Integration\n');
-
-test('Represent Flutter Text widget', () => {
-  const textVNode = new VNode({
-    tag: 'span',
-    props: { className: 'fjs-text' },
-    style: { fontSize: '16px', color: '#000000' },
-    children: ['Hello Flutter'],
-    metadata: { widgetType: 'Text', flutterProps: { data: 'Hello Flutter' } }
-  });
-  
-  const html = textVNode.toHTML();
-  assertIncludes(html, 'Hello Flutter', 'Should render text');
-  assertIncludes(html, 'data-widget-type="Text"', 'Should include widget type');
-});
-
-test('Represent Flutter Container widget', () => {
-  const containerVNode = new VNode({
-    tag: 'div',
-    props: { className: 'fjs-container' },
-    style: {
-      padding: '16px',
-      backgroundColor: '#ffffff',
-      borderRadius: '8px'
-    },
-    children: [
-      new VNode({ tag: 'span', children: ['Content'] })
-    ],
-    metadata: { widgetType: 'Container' }
-  });
-  
-  const element = containerVNode.toDOM();
-  assertEquals(element.style.padding, '16px', 'Should apply padding');
- // Check that background color was applied (browser may convert format)
-assert(element.style.backgroundColor === '#ffffff' || element.style.backgroundColor === 'rgb(255, 255, 255)', 'Should apply background');
-});
-
-test('Represent Flutter Column widget', () => {
-  const columnVNode = new VNode({
-    tag: 'div',
-    props: { className: 'fjs-column' },
-    style: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'flex-start'
-    },
-    children: [
-      new VNode({ tag: 'span', children: ['Item 1'] }),
-      new VNode({ tag: 'span', children: ['Item 2'] })
-    ],
-    metadata: { widgetType: 'Column' }
-  });
-  
-  const element = columnVNode.toDOM();
-  assertEquals(element.style.display, 'flex', 'Should use flexbox');
-  assertEquals(element.style.flexDirection, 'column', 'Should be column');
-  assertEquals(element.childNodes.length, 2, 'Should have 2 children');
-});
-
-test('Represent Flutter Row widget', () => {
-  const rowVNode = new VNode({
-    tag: 'div',
-    props: { className: 'fjs-row' },
-    style: {
-      display: 'flex',
-      flexDirection: 'row',
-      gap: '8px'
-    },
-    children: [
-      new VNode({ tag: 'span', children: ['A'] }),
-      new VNode({ tag: 'span', children: ['B'] }),
-      new VNode({ tag: 'span', children: ['C'] })
-    ],
-    metadata: { widgetType: 'Row' }
-  });
-  
-  const element = rowVNode.toDOM();
-  assertEquals(element.style.flexDirection, 'row', 'Should be row');
-  assertEquals(element.childNodes.length, 3, 'Should have 3 children');
-});
-
-test('Represent Flutter Button widget', () => {
-  let pressed = false;
-  const buttonVNode = new VNode({
-    tag: 'button',
-    props: { className: 'fjs-elevated-button' },
-    style: {
-      padding: '12px 24px',
-      backgroundColor: '#6750a4',
-      color: '#ffffff',
-      border: 'none',
-      borderRadius: '4px'
-    },
-    children: ['Press Me'],
-    events: { click: () => { pressed = true; } },
-    metadata: { widgetType: 'ElevatedButton' }
-  });
-  
-  const element = buttonVNode.toDOM();
-  element.click();
-  assert(pressed === true, 'Should handle onPressed');
-});
-
-test('Represent Flutter TextField widget', () => {
-  const textFieldVNode = new VNode({
-    tag: 'input',
-    props: {
-      type: 'text',
-      className: 'fjs-text-field',
-      placeholder: 'Enter text'
-    },
-    style: {
-      padding: '8px 12px',
-      border: '1px solid #ccc',
-      borderRadius: '4px'
-    },
-    metadata: { widgetType: 'TextField' }
-  });
-  
-  const element = textFieldVNode.toDOM();
-  assertEquals(element.placeholder, 'Enter text', 'Should set placeholder');
-  assertEquals(element.tagName, 'INPUT', 'Should be input element');
-});
-
-test('Represent Flutter Image widget', () => {
-  const imageVNode = new VNode({
-    tag: 'img',
-    props: {
-      src: 'https://example.com/image.jpg',
-      alt: 'Example image',
-      className: 'fjs-image'
-    },
-    style: {
-      width: '200px',
-      height: '200px',
-      objectFit: 'cover'
-    },
-    metadata: { widgetType: 'Image' }
-  });
-  
-  const element = imageVNode.toDOM();
-  assertEquals(element.src, 'https://example.com/image.jpg', 'Should set src');
-  assertEquals(element.alt, 'Example image', 'Should set alt');
-});
-
-test('Represent Flutter Scaffold widget', () => {
-  const scaffoldVNode = new VNode({
-    tag: 'div',
-    props: { className: 'fjs-scaffold' },
-    style: {
-      minHeight: '100vh',
-      display: 'flex',
-      flexDirection: 'column'
-    },
-    children: [
-      new VNode({
-        tag: 'header',
-        props: { className: 'fjs-app-bar' },
-        children: ['App Title']
-      }),
-      new VNode({
-        tag: 'main',
-        props: { className: 'fjs-body' },
-        style: { flex: '1' },
-        children: ['Body content']
-      })
-    ],
-    metadata: { widgetType: 'Scaffold' }
-  });
-  
-  const element = scaffoldVNode.toDOM();
-  assertEquals(element.childNodes.length, 2, 'Should have header and body');
-  assertEquals(element.childNodes[0].tagName, 'HEADER', 'First should be header');
-  assertEquals(element.childNodes[1].tagName, 'MAIN', 'Second should be main');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 6: State Binding Integration
-// ============================================================================
-
-console.log('TEST SUITE 6: State Binding Integration\n');
-
-test('Create VNode with state binding metadata', () => {
-  const vnode = new VNode({
-    tag: 'span',
-    statefulWidgetId: 'counter-widget',
-    stateProperty: 'count',
-    isStateBinding: true,
-    children: ['0']
-  });
-  
-  assert(vnode.isStateBinding === true, 'Should be marked as state binding');
-  assertEquals(vnode.statefulWidgetId, 'counter-widget', 'Should store widget ID');
-  assertEquals(vnode.stateProperty, 'count', 'Should store property name');
-});
-
-test('VNode supports update callback', () => {
-  let updateCalled = false;
-  const vnode = new VNode({
-    tag: 'span',
-    updateFn: (newValue) => { updateCalled = true; }
-  });
-  
-  if (vnode.updateFn) {
-    vnode.updateFn(42);
-  }
-  assert(updateCalled === true, 'Should support update callback');
-});
-
-test('Simulate state update on VNode', () => {
-  const vnode = new VNode({
-    tag: 'span',
-    children: ['0'],
-    statefulWidgetId: 'counter',
-    stateProperty: 'count',
-    isStateBinding: true
-  });
-  
-  const element = vnode.toDOM();
-  assertEquals(element.textContent, '0', 'Initial value should be 0');
-  
-  // Simulate state update
-  element.textContent = '5';
-  assertEquals(element.textContent, '5', 'Should update to 5');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 7: Complex Scenarios
-// ============================================================================
-
-console.log('TEST SUITE 7: Complex Scenarios\n');
-
-test('Render complete Flutter Counter app structure', () => {
-  const counterApp = new VNode({
-    tag: 'div',
-    props: { className: 'fjs-scaffold' },
-    children: [
-      // AppBar
-      new VNode({
-        tag: 'header',
-        props: { className: 'fjs-app-bar' },
-        style: { backgroundColor: '#6750a4', color: '#ffffff', padding: '16px' },
-        children: ['Counter App']
-      }),
-      // Body
-      new VNode({
-        tag: 'main',
-        props: { className: 'fjs-body' },
-        style: { flex: '1', display: 'flex', justifyContent: 'center', alignItems: 'center' },
-        children: [
-          new VNode({
-            tag: 'div',
-            style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px' },
-            children: [
-              new VNode({
-                tag: 'span',
-                style: { fontSize: '24px' },
-                children: ['You have pushed the button this many times:']
-              }),
-              new VNode({
-                tag: 'span',
-                style: { fontSize: '48px', fontWeight: 'bold' },
-                statefulWidgetId: 'counter',
-                stateProperty: 'count',
-                isStateBinding: true,
-                children: ['0']
-              })
-            ]
-          })
-        ]
-      }),
-      // FAB
-      new VNode({
-        tag: 'button',
-        props: { className: 'fjs-fab' },
-        style: {
-          position: 'fixed',
-          bottom: '16px',
-          right: '16px',
-          width: '56px',
-          height: '56px',
-          borderRadius: '50%',
-          backgroundColor: '#6750a4',
-          color: '#ffffff',
-          border: 'none'
-        },
-        events: { click: () => console.log('Increment') },
-        children: ['+']
-      })
-    ],
-    metadata: { widgetType: 'Scaffold' }
-  });
-  
-  const element = counterApp.toDOM();
-  assert(element !== null, 'Should create element');
-  assert(element.childNodes.length === 3, 'Should have header, body, and FAB');
-  
-  const html = counterApp.toHTML();
-  assertIncludes(html, 'Counter App', 'Should include title');
-  assertIncludes(html, 'You have pushed', 'Should include text');
-});
-
-test('Render list with keys', () => {
-  const items = ['Apple', 'Banana', 'Cherry'];
-  const listVNode = new VNode({
-    tag: 'ul',
-    children: items.map((item, i) => new VNode({
-      tag: 'li',
-      key: `item-${i}`,
-      children: [item]
-    }))
-  });
-  
-  const element = listVNode.toDOM();
-  assertEquals(element.childNodes.length, 3, 'Should have 3 items');
-  assertEquals(element.childNodes[0].textContent, 'Apple', 'First item correct');
-  assertEquals(element.childNodes[1].textContent, 'Banana', 'Second item correct');
-  assertEquals(element.childNodes[2].textContent, 'Cherry', 'Third item correct');
-  
-  // Check keys in HTML
-  const html = listVNode.toHTML();
-  assertIncludes(html, 'data-key="item-0"', 'Should include first key');
-  assertIncludes(html, 'data-key="item-1"', 'Should include second key');
-  assertIncludes(html, 'data-key="item-2"', 'Should include third key');
-});
-
-test('Clone VNode', () => {
-  const original = new VNode({
-    tag: 'div',
-    props: { className: 'test' },
-    style: { color: 'red' },
-    children: [
-      new VNode({ tag: 'span', children: ['Child'] })
-    ],
-    key: 'original'
-  });
-  
-  const cloned = original.clone();
-  
-  assertEquals(cloned.tag, original.tag, 'Should clone tag');
-  assertEquals(cloned.props.className, original.props.className, 'Should clone props');
-  assertEquals(cloned.style.color, original.style.color, 'Should clone styles');
-  assertEquals(cloned.children.length, original.children.length, 'Should clone children');
-  assertEquals(cloned.key, original.key, 'Should clone key');
-  
-  // Verify deep clone (not same reference)
-  assert(cloned !== original, 'Should be different instance');
-  assert(cloned.props !== original.props, 'Props should be different object');
-});
-
-test('toString debug representation', () => {
-  const vnode = new VNode({
-    tag: 'button',
-    key: 'submit-btn',
-    children: ['Submit']
-  });
-  
-  const str = vnode.toString();
-  assertIncludes(str, 'button', 'Should include tag');
-  assertIncludes(str, 'submit-btn', 'Should include key');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 8: Edge Cases & Error Handling
-// ============================================================================
-
-console.log('TEST SUITE 8: Edge Cases & Error Handling\n');
-
-test('Handle null children', () => {
-  const vnode = new VNode({
-    tag: 'div',
-    children: [null, undefined, '', 'Valid']
-  });
-  
-  const element = vnode.toDOM();
-  // Should handle gracefully
-  assert(element !== null, 'Should create element');
-});
-
-// test('Handle empty style object', () => {
-//   const vnode = new VNode({
-//     tag: 'div',
-//     style: {}
-//   });
-  
-//   const html = vnode.
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/vdom/test/vnode_builder.test.js b/packages/flutterjs_engine/src/vdom/test/vnode_builder.test.js
deleted file mode 100644
index 59b8e1b0..00000000
--- a/packages/flutterjs_engine/src/vdom/test/vnode_builder.test.js
+++ /dev/null
@@ -1,866 +0,0 @@
-/**
- * VNodeBuilder Tests - Comprehensive Widget to VNode Conversion Testing
- * Tests all Flutter widget types and their conversion to VNode trees
- */
-import { VNodeBuilder } from '../src/vnode_builder.js';
-import { VNode } from '../src/vnode.js';
-import { JSDOM } from 'jsdom';
-
-// Setup DOM environment
-const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
-global.document = dom.window.document;
-global.window = dom.window;
-
-console.log('\n' + '='.repeat(80));
-console.log('🧪 VNODE BUILDER TESTS');
-console.log('='.repeat(80) + '\n');
-
-let testsPassed = 0;
-let testsFailed = 0;
-
-function test(name, fn) {
-  try {
-    fn();
-    console.log(`✓ ${name}`);
-    testsPassed++;
-  } catch (error) {
-    console.log(`✗ ${name}`);
-    console.log(`  Error: ${error.message}`);
-    if (error.stack) {
-      console.log(`  ${error.stack.split('\n')[1]}`);
-    }
-    testsFailed++;
-  }
-}
-
-function assert(condition, message) {
-  if (!condition) {
-    throw new Error(message || 'Assertion failed');
-  }
-}
-
-function assertEquals(actual, expected, message) {
-  if (actual !== expected) {
-    throw new Error(
-      message || `Expected ${expected}, got ${actual}`
-    );
-  }
-}
-
-function assertIncludes(haystack, needle, message) {
-  if (!haystack || !haystack.includes(needle)) {
-    throw new Error(
-      message || `Expected to include "${needle}"`
-    );
-  }
-}
-
-function assertInstanceOf(obj, type, message) {
-  if (!(obj instanceof type)) {
-    throw new Error(
-      message || `Expected instance of ${type.name}`
-    );
-  }
-}
-
-// ============================================================================
-// MOCK FLUTTER WIDGETS
-// ============================================================================
-
-class Text {
-  constructor({ data, style }) {
-    this.data = data;
-    this.style = style || {};
-  }
-}
-
-class Container {
-  constructor({ child, padding, margin, color, width, height, decoration, alignment }) {
-    this.child = child;
-    this.padding = padding;
-    this.margin = margin;
-    this.color = color;
-    this.width = width;
-    this.height = height;
-    this.decoration = decoration;
-    this.alignment = alignment;
-  }
-}
-
-class Column {
-  constructor({ children, mainAxisAlignment, crossAxisAlignment, mainAxisSize }) {
-    this.children = children || [];
-    this.mainAxisAlignment = mainAxisAlignment || 'start';
-    this.crossAxisAlignment = crossAxisAlignment || 'center';
-    this.mainAxisSize = mainAxisSize || 'max';
-  }
-}
-
-class Row {
-  constructor({ children, mainAxisAlignment, crossAxisAlignment, mainAxisSize }) {
-    this.children = children || [];
-    this.mainAxisAlignment = mainAxisAlignment || 'start';
-    this.crossAxisAlignment = crossAxisAlignment || 'center';
-    this.mainAxisSize = mainAxisSize || 'max';
-  }
-}
-
-class Center {
-  constructor({ child }) {
-    this.child = child;
-  }
-}
-
-class Padding {
-  constructor({ padding, child }) {
-    this.padding = padding;
-    this.child = child;
-  }
-}
-
-class SizedBox {
-  constructor({ width, height, child }) {
-    this.width = width;
-    this.height = height;
-    this.child = child;
-  }
-}
-
-class Scaffold {
-  constructor({ appBar, body, floatingActionButton, drawer, backgroundColor }) {
-    this.appBar = appBar;
-    this.body = body;
-    this.floatingActionButton = floatingActionButton;
-    this.drawer = drawer;
-    this.backgroundColor = backgroundColor;
-  }
-}
-
-class AppBar {
-  constructor({ title, leading, actions, backgroundColor }) {
-    this.title = title;
-    this.leading = leading;
-    this.actions = actions;
-    this.backgroundColor = backgroundColor;
-  }
-}
-
-class ElevatedButton {
-  constructor({ child, onPressed }) {
-    this.child = child;
-    this.onPressed = onPressed;
-  }
-}
-
-class TextButton {
-  constructor({ child, onPressed }) {
-    this.child = child;
-    this.onPressed = onPressed;
-  }
-}
-
-class TextField {
-  constructor({ controller, decoration, onChanged, obscureText }) {
-    this.controller = controller;
-    this.decoration = decoration || {};
-    this.onChanged = onChanged;
-    this.obscureText = obscureText;
-  }
-}
-
-class Checkbox {
-  constructor({ value, onChanged }) {
-    this.value = value;
-    this.onChanged = onChanged;
-  }
-}
-
-class ListView {
-  constructor({ children }) {
-    this.children = children || [];
-  }
-}
-
-class Card {
-  constructor({ child, elevation, color }) {
-    this.child = child;
-    this.elevation = elevation;
-    this.color = color;
-  }
-}
-
-class Icon {
-  constructor({ icon, size, color }) {
-    this.icon = icon;
-    this.size = size;
-    this.color = color;
-  }
-}
-
-class Image {
-  constructor({ src, width, height, fit }) {
-    this.src = src;
-    this.width = width;
-    this.height = height;
-    this.fit = fit;
-  }
-}
-
-class FloatingActionButton {
-  constructor({ child, onPressed, backgroundColor }) {
-    this.child = child;
-    this.onPressed = onPressed;
-    this.backgroundColor = backgroundColor;
-  }
-}
-
-class MaterialApp {
-  constructor({ home, title }) {
-    this.home = home;
-    this.title = title;
-  }
-}
-
-class ListTile {
-  constructor({ leading, title, subtitle, trailing, onTap }) {
-    this.leading = leading;
-    this.title = title;
-    this.subtitle = subtitle;
-    this.trailing = trailing;
-    this.onTap = onTap;
-  }
-}
-
-// ============================================================================
-// TEST SUITE 1: Basic Widget Conversion
-// ============================================================================
-
-console.log('TEST SUITE 1: Basic Widget Conversion\n');
-
-test('Convert null widget', () => {
-  const vnode = VNodeBuilder.build(null);
-  assertEquals(vnode, null, 'Should return null');
-});
-
-test('Convert string directly', () => {
-  const vnode = VNodeBuilder.build('Hello World');
-  assertEquals(vnode, 'Hello World', 'Should return string');
-});
-
-test('Convert number to string', () => {
-  const vnode = VNodeBuilder.build(42);
-  assertEquals(vnode, '42', 'Should convert to string');
-});
-
-test('Get widget type from constructor', () => {
-  const widget = new Text({ data: 'Test' });
-  const type = VNodeBuilder.getWidgetType(widget);
-  assertEquals(type, 'Text', 'Should get Text');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 2: Text Widgets
-// ============================================================================
-
-console.log('TEST SUITE 2: Text Widgets\n');
-
-test('Build Text widget', () => {
-  const widget = new Text({ data: 'Hello World' });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertInstanceOf(vnode, VNode, 'Should return VNode');
-  assertEquals(vnode.tag, 'span', 'Should use span tag');
-  assertEquals(vnode.children[0], 'Hello World', 'Should have text content');
-  assertEquals(vnode.metadata.widgetType, 'Text', 'Should store widget type');
-});
-
-test('Build Text with style', () => {
-  const widget = new Text({
-    data: 'Styled Text',
-    style: { fontSize: 18, color: '#ff0000' }
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assert(vnode.style !== undefined, 'Should have styles');
-  assertEquals(vnode.metadata.widgetType, 'Text', 'Should be Text widget');
-});
-
-test('Build Text with empty data', () => {
-  const widget = new Text({ data: '' });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.children[0], '', 'Should have empty string');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 3: Layout Widgets
-// ============================================================================
-
-console.log('TEST SUITE 3: Layout Widgets\n');
-
-test('Build Container widget', () => {
-  const widget = new Container({
-    child: new Text({ data: 'Content' }),
-    padding: { all: 16 },
-    color: '#ffffff'
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.tag, 'div', 'Should use div tag');
-  assertIncludes(vnode.props.className, 'fjs-container', 'Should have container class');
-  assertEquals(vnode.children.length, 1, 'Should have child');
-  assertEquals(vnode.metadata.widgetType, 'Container', 'Should be Container');
-});
-
-test('Build Container with dimensions', () => {
-  const widget = new Container({
-    width: 200,
-    height: 100,
-    child: new Text({ data: 'Box' })
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.style.width, '200px', 'Should set width');
-  assertEquals(vnode.style.height, '100px', 'Should set height');
-});
-
-test('Build Column widget', () => {
-  const widget = new Column({
-    children: [
-      new Text({ data: 'Item 1' }),
-      new Text({ data: 'Item 2' }),
-      new Text({ data: 'Item 3' })
-    ],
-    mainAxisAlignment: 'center'
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.tag, 'div', 'Should use div');
-  assertEquals(vnode.style.display, 'flex', 'Should use flexbox');
-  assertEquals(vnode.style.flexDirection, 'column', 'Should be column');
-  assertEquals(vnode.children.length, 3, 'Should have 3 children');
-  assertEquals(vnode.metadata.widgetType, 'Column', 'Should be Column');
-});
-
-test('Build Row widget', () => {
-  const widget = new Row({
-    children: [
-      new Text({ data: 'A' }),
-      new Text({ data: 'B' })
-    ],
-    mainAxisAlignment: 'spaceEvenly'
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.style.flexDirection, 'row', 'Should be row');
-  assertEquals(vnode.children.length, 2, 'Should have 2 children');
-});
-
-test('Build Center widget', () => {
-  const widget = new Center({
-    child: new Text({ data: 'Centered' })
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.style.display, 'flex', 'Should use flex');
-  assertEquals(vnode.style.justifyContent, 'center', 'Should center horizontally');
-  assertEquals(vnode.style.alignItems, 'center', 'Should center vertically');
-});
-
-test('Build Padding widget', () => {
-  const widget = new Padding({
-    padding: { all: 20 },
-    child: new Text({ data: 'Padded' })
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assert(vnode.style.padding !== undefined, 'Should have padding');
-  assertEquals(vnode.children.length, 1, 'Should have child');
-});
-
-test('Build SizedBox widget', () => {
-  const widget = new SizedBox({
-    width: 150,
-    height: 150,
-    child: new Text({ data: 'Fixed size' })
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.style.width, '150px', 'Should set width');
-  assertEquals(vnode.style.height, '150px', 'Should set height');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 4: Scaffold & Structure
-// ============================================================================
-
-console.log('TEST SUITE 4: Scaffold & Structure\n');
-
-test('Build Scaffold widget', () => {
-  const widget = new Scaffold({
-    appBar: new AppBar({ title: new Text({ data: 'Title' }) }),
-    body: new Text({ data: 'Body content' })
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.tag, 'div', 'Should use div');
-  assertEquals(vnode.style.minHeight, '100vh', 'Should fill viewport');
-  assertEquals(vnode.style.display, 'flex', 'Should use flex');
-  assert(vnode.children.length >= 2, 'Should have appBar and body');
-});
-
-test('Build AppBar widget', () => {
-  const widget = new AppBar({
-    title: new Text({ data: 'My App' }),
-    backgroundColor: '#6750a4'
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.tag, 'header', 'Should use header tag');
-  assertIncludes(vnode.props.className, 'fjs-app-bar', 'Should have app-bar class');
-  assert(vnode.children.length > 0, 'Should have children');
-});
-
-test('Build FloatingActionButton', () => {
-  let clicked = false;
-  const widget = new FloatingActionButton({
-    child: new Icon({ icon: 'add' }),
-    onPressed: () => { clicked = true; }
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.tag, 'button', 'Should use button tag');
-  assertEquals(vnode.style.position, 'fixed', 'Should be fixed');
-  assertEquals(vnode.style.borderRadius, '50%', 'Should be circular');
-  assert(vnode.events.click !== undefined, 'Should have click event');
-  
-  // Test event
-  vnode.events.click();
-  assert(clicked === true, 'Should call onPressed');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 5: Button Widgets
-// ============================================================================
-
-console.log('TEST SUITE 5: Button Widgets\n');
-
-test('Build ElevatedButton', () => {
-  let pressed = false;
-  const widget = new ElevatedButton({
-    child: new Text({ data: 'Click Me' }),
-    onPressed: () => { pressed = true; }
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.tag, 'button', 'Should use button tag');
-  assertIncludes(vnode.props.className, 'elevated-button', 'Should have class');
-  assert(vnode.events.click !== undefined, 'Should have click handler');
-  
-  vnode.events.click();
-  assert(pressed === true, 'Should call handler');
-});
-
-test('Build TextButton', () => {
-  const widget = new TextButton({
-    child: new Text({ data: 'Text Button' }),
-    onPressed: () => {}
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.tag, 'button', 'Should use button tag');
-  assertEquals(vnode.style.backgroundColor, 'transparent', 'Should be transparent');
-});
-
-test('Build disabled button', () => {
-  const widget = new ElevatedButton({
-    child: new Text({ data: 'Disabled' }),
-    onPressed: null
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.props.disabled, true, 'Should be disabled');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 6: Input Widgets
-// ============================================================================
-
-console.log('TEST SUITE 6: Input Widgets\n');
-
-test('Build TextField', () => {
-  const widget = new TextField({
-    decoration: { hintText: 'Enter text' },
-    onChanged: (value) => console.log(value)
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.tag, 'input', 'Should use input tag');
-  assertEquals(vnode.props.placeholder, 'Enter text', 'Should have placeholder');
-  assert(vnode.events.input !== undefined, 'Should have input event');
-});
-
-test('Build TextField with obscureText', () => {
-  const widget = new TextField({
-    obscureText: true
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.props.type, 'password', 'Should be password type');
-});
-
-test('Build Checkbox', () => {
-  let newValue = false;
-  const widget = new Checkbox({
-    value: true,
-    onChanged: (val) => { newValue = val; }
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.tag, 'input', 'Should use input');
-  assertEquals(vnode.props.type, 'checkbox', 'Should be checkbox');
-  assertEquals(vnode.props.checked, true, 'Should be checked');
-  assert(vnode.events.change !== undefined, 'Should have change event');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 7: List Widgets
-// ============================================================================
-
-console.log('TEST SUITE 7: List Widgets\n');
-
-test('Build ListView', () => {
-  const widget = new ListView({
-    children: [
-      new Text({ data: 'Item 1' }),
-      new Text({ data: 'Item 2' }),
-      new Text({ data: 'Item 3' })
-    ]
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.tag, 'div', 'Should use div');
-  assertEquals(vnode.style.overflowY, 'auto', 'Should scroll');
-  assertEquals(vnode.children.length, 3, 'Should have 3 items');
-});
-
-test('Build ListTile', () => {
-  const widget = new ListTile({
-    leading: new Icon({ icon: 'person' }),
-    title: new Text({ data: 'Title' }),
-    subtitle: new Text({ data: 'Subtitle' }),
-    trailing: new Icon({ icon: 'chevron_right' }),
-    onTap: () => {}
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.tag, 'div', 'Should use div');
-  assertEquals(vnode.style.display, 'flex', 'Should use flex');
-  assert(vnode.children.length >= 3, 'Should have leading, content, trailing');
-  assert(vnode.events.click !== undefined, 'Should have click event');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 8: Visual Widgets
-// ============================================================================
-
-console.log('TEST SUITE 8: Visual Widgets\n');
-
-test('Build Card', () => {
-  const widget = new Card({
-    child: new Text({ data: 'Card content' }),
-    elevation: 4
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.tag, 'div', 'Should use div');
-  assertEquals(vnode.style.borderRadius, '12px', 'Should have rounded corners');
-  assert(vnode.style.boxShadow !== undefined, 'Should have shadow');
-});
-
-test('Build Icon', () => {
-  const widget = new Icon({
-    icon: 'home',
-    size: 32,
-    color: '#000000'
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.tag, 'span', 'Should use span');
-  assertEquals(vnode.style.width, '32px', 'Should set width');
-  assertEquals(vnode.style.height, '32px', 'Should set height');
-});
-
-test('Build Image', () => {
-  const widget = new Image({
-    src: 'https://example.com/image.jpg',
-    width: 300,
-    height: 200,
-    fit: 'cover'
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.tag, 'img', 'Should use img tag');
-  assertEquals(vnode.props.src, 'https://example.com/image.jpg', 'Should set src');
-  assertEquals(vnode.style.width, '300px', 'Should set width');
-  assertEquals(vnode.style.objectFit, 'cover', 'Should set object-fit');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 9: Complex Nested Structures
-// ============================================================================
-
-console.log('TEST SUITE 9: Complex Nested Structures\n');
-
-test('Build nested widget tree', () => {
-  const widget = new Container({
-    child: new Column({
-      children: [
-        new Text({ data: 'Title' }),
-        new Row({
-          children: [
-            new Text({ data: 'A' }),
-            new Text({ data: 'B' })
-          ]
-        })
-      ]
-    })
-  });
-  
-  const vnode = VNodeBuilder.build(widget);
-  
-  assert(vnode !== null, 'Should build tree');
-  assertEquals(vnode.tag, 'div', 'Root should be div');
-  assertEquals(vnode.children.length, 1, 'Should have Column child');
-  
-  const column = vnode.children[0];
-  assertEquals(column.children.length, 2, 'Column should have 2 children');
-});
-
-test('Build complete Counter app structure', () => {
-  const widget = new Scaffold({
-    appBar: new AppBar({
-      title: new Text({ data: 'Counter App' })
-    }),
-    body: new Center({
-      child: new Column({
-        children: [
-          new Text({ data: 'Count:' }),
-          new Text({ data: '0' })
-        ]
-      })
-    }),
-    floatingActionButton: new FloatingActionButton({
-      child: new Icon({ icon: 'add' }),
-      onPressed: () => {}
-    })
-  });
-  
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.tag, 'div', 'Should be div');
-  assert(vnode.children.length >= 3, 'Should have appBar, body, and FAB');
-});
-
-test('Build list of items', () => {
-  const items = ['Apple', 'Banana', 'Cherry'];
-  const widget = new ListView({
-    children: items.map(item => new ListTile({
-      title: new Text({ data: item })
-    }))
-  });
-  
-  const vnode = VNodeBuilder.build(widget);
-  assertEquals(vnode.children.length, 3, 'Should have 3 list items');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 10: Edge Cases
-// ============================================================================
-
-console.log('TEST SUITE 10: Edge Cases\n');
-
-test('Build widget with no children', () => {
-  const widget = new Container({});
-  const vnode = VNodeBuilder.build(widget);
-  
-  assert(vnode !== null, 'Should build');
-  assertEquals(vnode.children.length, 0, 'Should have no children');
-});
-
-test('Build Column with empty children array', () => {
-  const widget = new Column({ children: [] });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.children.length, 0, 'Should have empty children');
-});
-
-test('Build widget with null child', () => {
-  const widget = new Container({ child: null });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.children.length, 0, 'Should filter null child');
-});
-
-test('Build Column with mixed null/valid children', () => {
-  const widget = new Column({
-    children: [
-      new Text({ data: 'Valid' }),
-      null,
-      new Text({ data: 'Also valid' }),
-      undefined
-    ]
-  });
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.children.length, 2, 'Should filter nulls');
-});
-
-test('Extract common props with key', () => {
-  const widget = new Text({ data: 'Test' });
-  widget.key = 'text-key';
-  
-  const vnode = VNodeBuilder.build(widget);
-  assertEquals(vnode.props.key, 'text-key', 'Should extract key');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 11: MaterialApp & Navigation
-// ============================================================================
-
-console.log('TEST SUITE 11: MaterialApp & Navigation\n');
-
-test('Build MaterialApp', () => {
-  const widget = new MaterialApp({
-    title: 'My App',
-    home: new Scaffold({
-      body: new Text({ data: 'Home' })
-    })
-  });
-  
-  const vnode = VNodeBuilder.build(widget);
-  
-  assertEquals(vnode.tag, 'div', 'Should use div');
-  assertIncludes(vnode.props.className, 'fjs-material-app', 'Should have class');
-  assertEquals(vnode.props['data-title'], 'My App', 'Should store title');
-  assertEquals(vnode.children.length, 1, 'Should have home');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 12: Generic Widget Fallback
-// ============================================================================
-
-console.log('TEST SUITE 12: Generic Widget Fallback\n');
-
-test('Build unknown widget type', () => {
-  class CustomWidget {
-    constructor() {
-      this.child = new Text({ data: 'Custom' });
-    }
-  }
-  
-  const widget = new CustomWidget();
-  const vnode = VNodeBuilder.build(widget);
-  
-  assert(vnode !== null, 'Should build generic widget');
-  assertEquals(vnode.tag, 'div', 'Should use div');
-  assertIncludes(vnode.props['data-widget-type'], 'CustomWidget', 'Should store type');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 13: Rendering Integration
-// ============================================================================
-
-console.log('TEST SUITE 13: Rendering Integration\n');
-
-test('Render VNode to DOM', () => {
-  const widget = new Container({
-    child: new Text({ data: 'Hello DOM' })
-  });
-  const vnode = VNodeBuilder.build(widget);
-  const element = vnode.toDOM();
-  
-  assert(element !== null, 'Should create DOM element');
-  assertEquals(element.tagName, 'DIV', 'Should be div');
-  assert(element.textContent.includes('Hello DOM'), 'Should have text content');
-});
-
-test('Render VNode to HTML', () => {
-  const widget = new Container({
-    child: new Text({ data: 'Hello HTML' })
-  });
-  const vnode = VNodeBuilder.build(widget);
-  const html = vnode.toHTML();
-  
-  assertIncludes(html, '<div', 'Should have div tag');
-  assertIncludes(html, 'Hello HTML', 'Should have text');
-  assertIncludes(html, '</div>', 'Should close div');
-});
-
-test('Render complex structure to HTML', () => {
-  const widget = new Scaffold({
-    appBar: new AppBar({
-      title: new Text({ data: 'App' })
-    }),
-    body: new Column({
-      children: [
-        new Text({ data: 'Line 1' }),
-        new Text({ data: 'Line 2' })
-      ]
-    })
-  });
-  
-  const vnode = VNodeBuilder.build(widget);
-  const html = vnode.toHTML();
-  
-  assertIncludes(html, '<header', 'Should have header');
-  assertIncludes(html, '<main', 'Should have main');
-  assertIncludes(html, 'Line 1', 'Should have content');
-  assertIncludes(html, 'Line 2', 'Should have content');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUMMARY
-// ============================================================================
-
-console.log('='.repeat(80));
-console.log('📊 TEST SUMMARY');
-console.log('='.repeat(80));
-console.log(`✓ Passed: ${testsPassed}`);
-console.log(`✗ Failed: ${testsFailed}`);
-console.log(`Total: ${testsPassed + testsFailed}`);
-console.log('='.repeat(80) + '\n');
-
-if (testsFailed === 0) {
-  console.log('🎉 All tests passed!\n');
-  process.exit(0);
-} else {
-  console.log('❌ Some tests failed.\n');
-  process.exit(1);
-}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/vdom/test/vnode_renderer.test.js b/packages/flutterjs_engine/src/vdom/test/vnode_renderer.test.js
deleted file mode 100644
index 20d77147..00000000
--- a/packages/flutterjs_engine/src/vdom/test/vnode_renderer.test.js
+++ /dev/null
@@ -1,781 +0,0 @@
-/**
- * VNodeRenderer Tests - Comprehensive CSR Testing
- * Tests DOM rendering, event handling, updates, and memory management
- */
-
-import { VNodeRenderer } from '../src/vnode_renderer.js';
-import { VNode } from '../src/vnode.js';
-import { JSDOM } from 'jsdom';
-
-// Setup DOM environment
-const dom = new JSDOM('<!DOCTYPE html><html><body><div id="root"></div></body></html>');
-global.document = dom.window.document;
-global.window = dom.window;
-global.HTMLElement = dom.window.HTMLElement;
-global.Node = dom.window.Node;
-
-console.log('\n' + '='.repeat(80));
-console.log('🧪 VNODE RENDERER TESTS');
-console.log('='.repeat(80) + '\n');
-
-let testsPassed = 0;
-let testsFailed = 0;
-
-function test(name, fn) {
-  try {
-    fn();
-    console.log(`✓ ${name}`);
-    testsPassed++;
-  } catch (error) {
-    console.log(`✗ ${name}`);
-    console.log(`  Error: ${error.message}`);
-    if (error.stack) {
-      console.log(`  ${error.stack.split('\n')[1]}`);
-    }
-    testsFailed++;
-  }
-}
-
-function assert(condition, message) {
-  if (!condition) {
-    throw new Error(message || 'Assertion failed');
-  }
-}
-
-function assertEquals(actual, expected, message) {
-  if (actual !== expected) {
-    throw new Error(
-      message || `Expected "${expected}", got "${actual}"`
-    );
-  }
-}
-
-function assertIncludes(haystack, needle, message) {
-  if (!haystack || !haystack.includes(needle)) {
-    throw new Error(
-      message || `Expected to include "${needle}"`
-    );
-  }
-}
-
-// Helper to get fresh container
-function getContainer() {
-  const container = document.createElement('div');
-  container.id = 'test-container';
-  return container;
-}
-
-// ============================================================================
-// TEST SUITE 1: Basic Rendering
-// ============================================================================
-
-console.log('TEST SUITE 1: Basic Rendering\n');
-
-test('Render simple text VNode', () => {
-  const container = getContainer();
-  const vnode = 'Hello World';
-  
-  VNodeRenderer.render(vnode, container);
-  
-  assertEquals(container.textContent, 'Hello World', 'Should render text');
-});
-
-test('Render simple element VNode', () => {
-  const container = getContainer();
-  const vnode = new VNode({ tag: 'div', children: ['Content'] });
-  
-  VNodeRenderer.render(vnode, container);
-  
-  assertEquals(container.children.length, 1, 'Should have 1 child');
-  assertEquals(container.children[0].tagName, 'DIV', 'Should be div');
-  assertEquals(container.textContent, 'Content', 'Should have content');
-});
-
-test('Render VNode with props', () => {
-  const container = getContainer();
-  const vnode = new VNode({
-    tag: 'button',
-    props: { className: 'btn', id: 'my-btn', disabled: true },
-    children: ['Click']
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  
-  const button = container.querySelector('button');
-  assertEquals(button.className, 'btn', 'Should have className');
-  assertEquals(button.id, 'my-btn', 'Should have id');
-  assert(button.disabled === true, 'Should be disabled');
-});
-
-test('Render VNode with styles', () => {
-  const container = getContainer();
-  const vnode = new VNode({
-    tag: 'div',
-    style: { color: 'red', fontSize: '18px', padding: '10px' }
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  
-  const div = container.querySelector('div');
-  assertEquals(div.style.color, 'red', 'Should have color');
-  assertEquals(div.style.fontSize, '18px', 'Should have fontSize');
-  assertEquals(div.style.padding, '10px', 'Should have padding');
-});
-
-test('Render nested VNodes', () => {
-  const container = getContainer();
-  const vnode = new VNode({
-    tag: 'div',
-    children: [
-      new VNode({ tag: 'h1', children: ['Title'] }),
-      new VNode({ tag: 'p', children: ['Paragraph'] })
-    ]
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  
-  assertEquals(container.querySelector('h1').textContent, 'Title', 'Should have h1');
-  assertEquals(container.querySelector('p').textContent, 'Paragraph', 'Should have p');
-});
-
-test('Render null/undefined returns empty text node', () => {
-  const result1 = VNodeRenderer.createDOMNode(null);
-  assertEquals(result1.nodeType, Node.TEXT_NODE, 'Should be text node');
-  
-  const result2 = VNodeRenderer.createDOMNode(undefined);
-  assertEquals(result2.nodeType, Node.TEXT_NODE, 'Should be text node');
-});
-
-test('Render number as text', () => {
-  const container = getContainer();
-  VNodeRenderer.render(42, container);
-  assertEquals(container.textContent, '42', 'Should render number as text');
-});
-
-test('Render boolean as empty text', () => {
-  const container = getContainer();
-  VNodeRenderer.render(true, container);
-  assertEquals(container.textContent, '', 'Should render empty');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 2: Event Handling
-// ============================================================================
-
-console.log('TEST SUITE 2: Event Handling\n');
-
-test('Attach click event', () => {
-  const container = getContainer();
-  let clicked = false;
-  
-  const vnode = new VNode({
-    tag: 'button',
-    events: { click: () => { clicked = true; } },
-    children: ['Click Me']
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  
-  const button = container.querySelector('button');
-  button.click();
-  
-  assert(clicked === true, 'Should call click handler');
-});
-
-test('Normalize event names', () => {
-  const container = getContainer();
-  let inputValue = '';
-  
-  const vnode = new VNode({
-    tag: 'input',
-    events: { onInput: (e) => { inputValue = e.target.value; } }
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  
-  const input = container.querySelector('input');
-  input.value = 'test';
-  input.dispatchEvent(new window.Event('input'));
-  
-  assertEquals(inputValue, 'test', 'Should handle onInput event');
-});
-
-test('Handle multiple events', () => {
-  const container = getContainer();
-  let focused = false;
-  let blurred = false;
-  
-  const vnode = new VNode({
-    tag: 'input',
-    events: {
-      focus: () => { focused = true; },
-      blur: () => { blurred = true; }
-    }
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  
-  const input = container.querySelector('input');
-  input.dispatchEvent(new window.Event('focus'));
-  input.dispatchEvent(new window.Event('blur'));
-  
-  assert(focused === true, 'Should handle focus');
-  assert(blurred === true, 'Should handle blur');
-});
-
-test('Store event listeners on element', () => {
-  const container = getContainer();
-  const handler = () => {};
-  
-  const vnode = new VNode({
-    tag: 'button',
-    events: { click: handler }
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  
-  const button = container.querySelector('button');
-  assert(button._eventListeners !== undefined, 'Should store listeners');
-  assert(button._eventListeners.click === handler, 'Should store handler');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 3: Props Application
-// ============================================================================
-
-console.log('TEST SUITE 3: Props Application\n');
-
-test('Apply className prop', () => {
-  const container = getContainer();
-  const vnode = new VNode({
-    tag: 'div',
-    props: { className: 'test-class' }
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  assertEquals(container.querySelector('div').className, 'test-class');
-});
-
-test('Apply value to input', () => {
-  const container = getContainer();
-  const vnode = new VNode({
-    tag: 'input',
-    props: { type: 'text', value: 'initial' }
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  assertEquals(container.querySelector('input').value, 'initial');
-});
-
-test('Apply checked to checkbox', () => {
-  const container = getContainer();
-  const vnode = new VNode({
-    tag: 'input',
-    props: { type: 'checkbox', checked: true }
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  assert(container.querySelector('input').checked === true);
-});
-
-test('Apply data attributes', () => {
-  const container = getContainer();
-  const vnode = new VNode({
-    tag: 'div',
-    props: { 'data-id': '123', 'data-type': 'test' }
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  const div = container.querySelector('div');
-  assertEquals(div.getAttribute('data-id'), '123');
-  assertEquals(div.getAttribute('data-type'), 'test');
-});
-
-test('Apply aria attributes', () => {
-  const container = getContainer();
-  const vnode = new VNode({
-    tag: 'button',
-    props: { 'aria-label': 'Close', 'aria-hidden': 'false' }
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  const button = container.querySelector('button');
-  assertEquals(button.getAttribute('aria-label'), 'Close');
-});
-
-test('Handle boolean attributes', () => {
-  const container = getContainer();
-  const vnode = new VNode({
-    tag: 'input',
-    props: { disabled: true, readonly: false }
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  const input = container.querySelector('input');
-  assert(input.disabled === true, 'Should be disabled');
-  assert(input.hasAttribute('readonly') === false, 'Should not have readonly');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 4: Style Application
-// ============================================================================
-
-console.log('TEST SUITE 4: Style Application\n');
-
-test('Apply multiple styles', () => {
-  const container = getContainer();
-  const vnode = new VNode({
-    tag: 'div',
-    style: {
-      color: 'blue',
-      backgroundColor: 'yellow',
-      padding: '20px',
-      margin: '10px'
-    }
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  const div = container.querySelector('div');
-  
-  assertEquals(div.style.color, 'blue');
-  assertEquals(div.style.backgroundColor, 'yellow');
-  assertEquals(div.style.padding, '20px');
-  assertEquals(div.style.margin, '10px');
-});
-
-test('Apply CSS custom properties', () => {
-  const container = getContainer();
-  const vnode = new VNode({
-    tag: 'div',
-    style: { '--custom-color': '#ff0000' }
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  const div = container.querySelector('div');
-  assertEquals(div.style.getPropertyValue('--custom-color'), '#ff0000');
-});
-
-test('Ignore null/undefined styles', () => {
-  const container = getContainer();
-  const vnode = new VNode({
-    tag: 'div',
-    style: { color: 'red', backgroundColor: null, padding: undefined }
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  const div = container.querySelector('div');
-  assertEquals(div.style.color, 'red');
-  assertEquals(div.style.backgroundColor, '');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 5: Ref Callbacks
-// ============================================================================
-
-console.log('TEST SUITE 5: Ref Callbacks\n');
-
-test('Call ref callback on render', () => {
-  const container = getContainer();
-  let refElement = null;
-  
-  const vnode = new VNode({
-    tag: 'div',
-    ref: (el) => { refElement = el; }
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  
-  assert(refElement !== null, 'Should call ref');
-  assertEquals(refElement.tagName, 'DIV', 'Should be div element');
-});
-
-test('Ref callback receives correct element', () => {
-  const container = getContainer();
-  let refElement = null;
-  
-  const vnode = new VNode({
-    tag: 'button',
-    props: { id: 'test-btn' },
-    ref: (el) => { refElement = el; }
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  
-  assertEquals(refElement.id, 'test-btn', 'Should be correct element');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 6: VNode References
-// ============================================================================
-
-console.log('TEST SUITE 6: VNode References\n');
-
-test('Store VNode reference on element', () => {
-  const container = getContainer();
-  const vnode = new VNode({ tag: 'div' });
-  
-  VNodeRenderer.render(vnode, container);
-  
-  const element = container.querySelector('div');
-  assert(element._vnode === vnode, 'Should store vnode on element');
-});
-
-test('Store element reference on VNode', () => {
-  const container = getContainer();
-  const vnode = new VNode({ tag: 'div' });
-  
-  VNodeRenderer.render(vnode, container);
-  
-  const element = container.querySelector('div');
-  assert(vnode._element === element, 'Should store element on vnode');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 7: Cleanup & Memory Management
-// ============================================================================
-
-console.log('TEST SUITE 7: Cleanup & Memory Management\n');
-
-test('Clear element removes children', () => {
-  const container = getContainer();
-  container.innerHTML = '<div>Child 1</div><div>Child 2</div>';
-  
-  VNodeRenderer.clearElement(container);
-  
-  assertEquals(container.children.length, 0, 'Should remove all children');
-});
-
-test('Cleanup removes event listeners', () => {
-  const container = getContainer();
-  const vnode = new VNode({
-    tag: 'button',
-    events: { click: () => {} }
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  const button = container.querySelector('button');
-  
-  assert(button._eventListeners !== undefined, 'Should have listeners');
-  
-  VNodeRenderer.cleanupEventListeners(button);
-  
-  assert(button._eventListeners === null, 'Should remove listeners');
-});
-
-test('Cleanup removes VNode references', () => {
-  const container = getContainer();
-  const vnode = new VNode({ tag: 'div' });
-  
-  VNodeRenderer.render(vnode, container);
-  const element = container.querySelector('div');
-  
-  VNodeRenderer.cleanupEventListeners(element);
-  
-  assert(element._vnode === null, 'Should remove vnode ref');
-  assert(vnode._element === null, 'Should remove element ref');
-});
-
-test('Remove element from DOM', () => {
-  const container = getContainer();
-  const vnode = new VNode({ tag: 'div' });
-  
-  VNodeRenderer.render(vnode, container);
-  const element = container.querySelector('div');
-  
-  VNodeRenderer.removeElement(element);
-  
-  assertEquals(container.children.length, 0, 'Should remove from DOM');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 8: Update Operations
-// ============================================================================
-
-console.log('TEST SUITE 8: Update Operations\n');
-
-test('Update props', () => {
-  const container = getContainer();
-  const vnode = new VNode({
-    tag: 'div',
-    props: { className: 'old', id: 'test' }
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  const element = container.querySelector('div');
-  
-  VNodeRenderer.updateProps(element, 
-    { className: 'old', id: 'test' },
-    { className: 'new', id: 'test', 'data-new': 'value' }
-  );
-  
-  assertEquals(element.className, 'new', 'Should update className');
-  assertEquals(element.getAttribute('data-new'), 'value', 'Should add new prop');
-});
-
-test('Update styles', () => {
-  const container = getContainer();
-  const vnode = new VNode({
-    tag: 'div',
-    style: { color: 'red', fontSize: '14px' }
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  const element = container.querySelector('div');
-  
-  VNodeRenderer.updateStyles(element,
-    { color: 'red', fontSize: '14px' },
-    { color: 'blue', padding: '10px' }
-  );
-  
-  assertEquals(element.style.color, 'blue', 'Should update color');
-  assertEquals(element.style.fontSize, '', 'Should remove old fontSize');
-  assertEquals(element.style.padding, '10px', 'Should add padding');
-});
-
-test('Update events', () => {
-  const container = getContainer();
-  let count = 0;
-  
-  const vnode = new VNode({
-    tag: 'button',
-    events: { click: () => { count++; } }
-  });
-  
-  VNodeRenderer.render(vnode, container);
-  const button = container.querySelector('button');
-  
-  button.click();
-  assertEquals(count, 1, 'Should call old handler');
-  
-  VNodeRenderer.updateEvents(button,
-    { click: () => { count++; } },
-    { click: () => { count += 10; } }
-  );
-  
-  button.click();
-  assertEquals(count, 11, 'Should call new handler');
-});
-
-test('Replace element', () => {
-  const container = getContainer();
-  const oldVNode = new VNode({ tag: 'div', children: ['Old'] });
-  
-  VNodeRenderer.render(oldVNode, container);
-  const oldElement = container.querySelector('div');
-  
-  const newVNode = new VNode({ tag: 'span', children: ['New'] });
-  VNodeRenderer.replaceElement(oldElement, newVNode);
-  
-  assert(container.querySelector('div') === null, 'Should remove old');
-  assertEquals(container.querySelector('span').textContent, 'New', 'Should add new');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 9: Array/Fragment Rendering
-// ============================================================================
-
-console.log('TEST SUITE 9: Array/Fragment Rendering\n');
-
-test('Render array of VNodes', () => {
-  const container = getContainer();
-  const vnodes = [
-    new VNode({ tag: 'div', children: ['One'] }),
-    new VNode({ tag: 'div', children: ['Two'] }),
-    new VNode({ tag: 'div', children: ['Three'] })
-  ];
-  
-  VNodeRenderer.render(vnodes, container);
-  
-  assertEquals(container.children.length, 3, 'Should render all');
-  assertEquals(container.children[0].textContent, 'One');
-  assertEquals(container.children[1].textContent, 'Two');
-  assertEquals(container.children[2].textContent, 'Three');
-});
-
-test('Render fragment with mixed types', () => {
-  const container = getContainer();
-  const vnodes = [
-    'Text',
-    new VNode({ tag: 'span', children: ['Span'] }),
-    42
-  ];
-  
-  VNodeRenderer.render(vnodes, container);
-  
-  assert(container.childNodes.length >= 3, 'Should render all types');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 10: Batch Rendering
-// ============================================================================
-
-console.log('TEST SUITE 10: Batch Rendering\n');
-
-test('Batch render multiple VNodes', () => {
-  const container = getContainer();
-  const vnodes = [];
-  
-  for (let i = 0; i < 100; i++) {
-    vnodes.push(new VNode({
-      tag: 'div',
-      children: [`Item ${i}`]
-    }));
-  }
-  
-  VNodeRenderer.batchRender(vnodes, container);
-  
-  assertEquals(container.children.length, 100, 'Should render all');
-  assertEquals(container.children[0].textContent, 'Item 0');
-  assertEquals(container.children[99].textContent, 'Item 99');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 11: Element Path Operations
-// ============================================================================
-
-console.log('TEST SUITE 11: Element Path Operations\n');
-
-test('Insert at specific index', () => {
-  const container = getContainer();
-  container.innerHTML = '<div>1</div><div>3</div>';
-  
-  const vnode = new VNode({ tag: 'div', children: ['2'] });
-  VNodeRenderer.insertAt(container, vnode, 1);
-  
-  assertEquals(container.children.length, 3, 'Should have 3 children');
-  assertEquals(container.children[1].textContent, '2', 'Should insert at index 1');
-});
-
-test('Insert at end when index too large', () => {
-  const container = getContainer();
-  container.innerHTML = '<div>1</div>';
-  
-  const vnode = new VNode({ tag: 'div', children: ['2'] });
-  VNodeRenderer.insertAt(container, vnode, 100);
-  
-  assertEquals(container.children.length, 2, 'Should append');
-  assertEquals(container.children[1].textContent, '2', 'Should be at end');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 12: Special Cases
-// ============================================================================
-
-console.log('TEST SUITE 12: Special Cases\n');
-
-test('Handle VNode without tag', () => {
-  const container = getContainer();
-  const vnode = { props: {}, style: {} }; // Invalid VNode
-  
-  VNodeRenderer.render(vnode, container);
-  
-  // Should render empty text node instead of throwing
-  assertEquals(container.textContent, '', 'Should handle gracefully');
-});
-
-test('Handle deeply nested structure', () => {
-  const container = getContainer();
-  
-  let current = new VNode({ tag: 'div', children: ['Deep'] });
-  for (let i = 0; i < 10; i++) {
-    current = new VNode({ tag: 'div', children: [current] });
-  }
-  
-  VNodeRenderer.render(current, container);
-  
-  assert(container.querySelector('div') !== null, 'Should render');
-  assertIncludes(container.textContent, 'Deep', 'Should have deep content');
-});
-
-test('Handle empty children array', () => {
-  const container = getContainer();
-  const vnode = new VNode({ tag: 'div', children: [] });
-  
-  VNodeRenderer.render(vnode, container);
-  
-  const div = container.querySelector('div');
-  assertEquals(div.children.length, 0, 'Should have no children');
-});
-
-test('Render without target throws error', () => {
-  const vnode = new VNode({ tag: 'div' });
-  
-  try {
-    VNodeRenderer.render(vnode, null);
-    throw new Error('Should have thrown');
-  } catch (error) {
-    assertIncludes(error.message, 'Target element', 'Should mention target');
-  }
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUITE 13: Performance
-// ============================================================================
-
-console.log('TEST SUITE 13: Performance\n');
-
-test('Render 1000 elements efficiently', () => {
-  const container = getContainer();
-  const start = Date.now();
-  
-  const vnodes = [];
-  for (let i = 0; i < 1000; i++) {
-    vnodes.push(new VNode({
-      tag: 'div',
-      props: { className: 'item' },
-      children: [`Item ${i}`]
-    }));
-  }
-  
-  VNodeRenderer.batchRender(vnodes, container);
-  
-  const elapsed = Date.now() - start;
-  assert(elapsed < 1000, `Should render quickly (${elapsed}ms)`);
-  assertEquals(container.children.length, 1000, 'Should render all');
-});
-
-console.log('');
-
-// ============================================================================
-// TEST SUMMARY
-// ============================================================================
-
-console.log('='.repeat(80));
-console.log('📊 TEST SUMMARY');
-console.log('='.repeat(80));
-console.log(`✓ Passed: ${testsPassed}`);
-console.log(`✗ Failed: ${testsFailed}`);
-console.log(`Total: ${testsPassed + testsFailed}`);
-console.log('='.repeat(80) + '\n');
-
-if (testsFailed === 0) {
-  console.log('🎉 All tests passed!\n');
-  process.exit(0);
-} else {
-  console.log('❌ Some tests failed.\n');
-  process.exit(1);
-}
\ No newline at end of file
diff --git a/packages/flutterjs_foundation/.gitignore b/packages/flutterjs_foundation/.gitignore
new file mode 100644
index 00000000..1d4cb04d
--- /dev/null
+++ b/packages/flutterjs_foundation/.gitignore
@@ -0,0 +1,31 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+build/
+dist/
+.dev/
+.debug/
+
+# Generated files
+.flutterjs/
+.cache/
+
+# Dart
+.dart_tool/
+.packages
+pubspec.lock
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Logs
+*.log
+npm-debug.log*
diff --git a/packages/flutterjs_foundation/.pubignore b/packages/flutterjs_foundation/.pubignore
new file mode 100644
index 00000000..bae5ffcf
--- /dev/null
+++ b/packages/flutterjs_foundation/.pubignore
@@ -0,0 +1,11 @@
+# Exclude JavaScript implementation from pub.dev
+js/
+node_modules/
+dist/
+build/
+.git/
+.github/
+test/
+package-lock.json
+.vscode/
+.idea/
diff --git a/packages/flutterjs_foundation/CHANGELOG.md b/packages/flutterjs_foundation/CHANGELOG.md
new file mode 100644
index 00000000..13187808
--- /dev/null
+++ b/packages/flutterjs_foundation/CHANGELOG.md
@@ -0,0 +1,3 @@
+## 0.1.0
+
+* Initial release
diff --git a/packages/flutterjs_foundation/LICENSE b/packages/flutterjs_foundation/LICENSE
new file mode 100644
index 00000000..14fac913
--- /dev/null
+++ b/packages/flutterjs_foundation/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/flutterjs_foundation/README.md b/packages/flutterjs_foundation/README.md
new file mode 100644
index 00000000..30638952
--- /dev/null
+++ b/packages/flutterjs_foundation/README.md
@@ -0,0 +1,58 @@
+# FlutterjsFoundation
+
+A FlutterJS package
+
+## Installation
+
+Add to `pubspec.yaml`:
+
+```yaml
+dependencies:
+  flutterjs_foundation: ^0.1.0
+```
+
+Then run:
+
+```bash
+flutterjs get
+```
+
+## Usage
+
+See `example/` for a complete Flutter app.
+
+## JavaScript Implementation
+
+The actual implementation is in `js/src/` (JavaScript).
+
+To develop:
+
+```bash
+cd js
+npm install
+```
+
+## Features
+
+- Lightweight implementation
+- SEO-friendly (FlutterJS rendering)
+- Easy to use
+
+## Publishing
+
+### 1. Publish JavaScript to npm
+
+```bash
+cd js
+npm publish
+```
+
+### 2. Publish Dart wrapper to pub.dev
+
+```bash
+dart pub publish
+```
+
+## License
+
+MIT
diff --git a/packages/flutterjs_foundation/example/lib/main.dart b/packages/flutterjs_foundation/example/lib/main.dart
new file mode 100644
index 00000000..c5f7d0ef
--- /dev/null
+++ b/packages/flutterjs_foundation/example/lib/main.dart
@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'FlutterjsFoundation Example',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: const ExamplePage(),
+    );
+  }
+}
+
+class ExamplePage extends StatefulWidget {
+  const ExamplePage({Key? key}) : super(key: key);
+
+  @override
+  State<ExamplePage> createState() => _ExamplePageState();
+}
+
+class _ExamplePageState extends State<ExamplePage> {
+  String result = 'Click the button to test';
+
+  void _testPackage() {
+    setState(() {
+      // This will call the JavaScript implementation when running with FlutterJS
+      result = 'FlutterjsFoundation is ready!\n\nRun: flutterjs run --to-js --serve';
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('FlutterjsFoundation Example'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              result,
+              textAlign: TextAlign.center,
+              style: const TextStyle(fontSize: 16),
+            ),
+            const SizedBox(height: 20),
+            ElevatedButton(
+              onPressed: _testPackage,
+              child: const Text('Test FlutterjsFoundation'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/packages/flutterjs_foundation/example/pubspec.yaml b/packages/flutterjs_foundation/example/pubspec.yaml
new file mode 100644
index 00000000..1187c8be
--- /dev/null
+++ b/packages/flutterjs_foundation/example/pubspec.yaml
@@ -0,0 +1,15 @@
+name: flutterjs_foundation_example
+description: Example app for flutterjs_foundation
+
+publish_to: 'none'
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
diff --git a/packages/flutterjs_foundation/flutterjs_foundation/build.js b/packages/flutterjs_foundation/flutterjs_foundation/build.js
new file mode 100644
index 00000000..bda39ede
--- /dev/null
+++ b/packages/flutterjs_foundation/flutterjs_foundation/build.js
@@ -0,0 +1,99 @@
+/**
+ * Build script for @flutterjs/flutterjs_foundation
+ * 
+ * Generates exports.json manifest for the import resolver system
+ */
+
+import { readFileSync, writeFileSync, readdirSync, statSync } from 'fs';
+import { join, extname } from 'path';
+
+const srcDir = './src';
+
+/**
+ * Get all JavaScript files recursively
+ */
+function getAllJsFiles(dir, fileList = []) {
+  const files = readdirSync(dir);
+  
+  for (const file of files) {
+    const filePath = join(dir, file);
+    const stat = statSync(filePath);
+    
+    if (stat.isDirectory()) {
+      getAllJsFiles(filePath, fileList);
+    } else if (extname(file) === '.js') {
+      fileList.push(filePath);
+    }
+  }
+  
+  return fileList;
+}
+
+/**
+ * Scan all source files and generate exports.json manifest
+ * This manifest tells the Dart code generator what symbols this package exports
+ */
+function generateExportManifest(sourceFiles) {
+  const manifest = {
+    package: '@flutterjs/flutterjs_foundation',
+    version: '0.1.0',
+    exports: []
+  };
+
+  // Regex patterns to match different export types
+  const exportRegex = /export\s*{\s*([^}]+)\s*}/g;
+  const exportStarRegex = /export\s*\*\s*from/g;
+  const classRegex = /export\s+class\s+(\w+)/g;
+  const functionRegex = /export\s+function\s+(\w+)/g;
+  const constRegex = /export\s+const\s+(\w+)/g;
+
+  for (const srcFile of sourceFiles) {
+    const content = readFileSync(srcFile, 'utf8');
+    
+    // Find named exports: export { Foo, Bar }
+    for (const match of content.matchAll(exportRegex)) {
+      const symbols = match[1]
+        .split(',')
+        .map(s => s.trim())
+        .map(s => s.split(/\s+as\s+/).pop()) // Handle "export { Foo as Bar }"
+        .filter(s => s && !s.includes('from'));
+      manifest.exports.push(...symbols);
+    }
+    
+    // Find class exports: export class Foo
+    for (const match of content.matchAll(classRegex)) {
+      manifest.exports.push(match[1]);
+    }
+    
+    // Find function exports: export function foo()
+    for (const match of content.matchAll(functionRegex)) {
+      manifest.exports.push(match[1]);
+    }
+    
+    // Find const exports: export const FOO
+    for (const match of content.matchAll(constRegex)) {
+      manifest.exports.push(match[1]);
+    }
+  }
+
+  // Remove duplicates and sort
+  manifest.exports = [...new Set(manifest.exports)].sort();
+
+  writeFileSync('./exports.json', JSON.stringify(manifest, null, 2) + '\n');
+  console.log(`📋 Generated exports.json with ${manifest.exports.length} symbols\n`);
+}
+
+// Main build process
+async function build() {
+  console.log('🚀 Building @flutterjs/flutterjs_foundation...\n');
+
+  const allFiles = getAllJsFiles(srcDir);
+  console.log(`📦 Found ${allFiles.length} JavaScript files\n`);
+
+  // Generate export manifest
+  generateExportManifest(allFiles);
+
+  console.log('✅ Build successful!\n');
+}
+
+build().catch(console.error);
diff --git a/packages/flutterjs_foundation/flutterjs_foundation/package.json b/packages/flutterjs_foundation/flutterjs_foundation/package.json
new file mode 100644
index 00000000..8794f649
--- /dev/null
+++ b/packages/flutterjs_foundation/flutterjs_foundation/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@flutterjs/flutterjs_foundation",
+  "version": "0.1.0",
+  "description": "A FlutterJS package",
+  "main": "src/index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"No tests yet\"",
+    "prepublishOnly": "echo \"Ready to publish\""
+  },
+  "keywords": [
+    "flutterjs",
+    "flutterjs_foundation"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/flutterjsdev/flutterjs.git"
+  },
+  "files": [
+    "src/",
+    "README.md",
+    "LICENSE"
+  ]
+}
diff --git a/packages/flutterjs_foundation/flutterjs_foundation/src/index.js b/packages/flutterjs_foundation/flutterjs_foundation/src/index.js
new file mode 100644
index 00000000..63d4ab2c
--- /dev/null
+++ b/packages/flutterjs_foundation/flutterjs_foundation/src/index.js
@@ -0,0 +1,43 @@
+/**
+ * FlutterJS FlutterjsFoundation
+ * 
+ * Simple, lightweight implementation built with JavaScript
+ */
+
+/**
+ * Main class for FlutterjsFoundation
+ */
+export class FlutterjsFoundation {
+  constructor(config = {}) {
+    this.config = config;
+  }
+
+  /**
+   * Example method - replace with your implementation
+   */
+  hello() {
+    return 'Hello from FlutterjsFoundation!';
+  }
+
+  /**
+   * Example async method
+   */
+  async fetchData(url) {
+    try {
+      const response = await fetch(url);
+      return await response.json();
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      throw error;
+    }
+  }
+}
+
+/**
+ * Helper function
+ */
+export function createInstance(config) {
+  return new FlutterjsFoundation(config);
+}
+
+export default FlutterjsFoundation;
diff --git a/packages/flutterjs_foundation/lib/flutterjs_foundation.dart b/packages/flutterjs_foundation/lib/flutterjs_foundation.dart
new file mode 100644
index 00000000..942ca601
--- /dev/null
+++ b/packages/flutterjs_foundation/lib/flutterjs_foundation.dart
@@ -0,0 +1,26 @@
+/// FlutterJS FlutterjsFoundation
+/// 
+/// A FlutterJS package
+/// 
+/// The actual implementation is in JavaScript.
+/// This package is a metadata wrapper published to pub.dev.
+/// 
+/// ## Usage
+/// 
+/// Add to your `pubspec.yaml`:
+/// ```yaml
+/// dependencies:
+///   flutterjs_foundation: ^0.1.0
+/// ```
+/// 
+/// Then run:
+/// ```bash
+/// flutterjs get
+/// ```
+/// 
+/// The package will be installed to: `build/flutterjs/node_modules/@flutterjs/flutterjs_foundation`
+/// 
+/// See `example/` for a complete working app.
+library flutterjs_foundation;
+
+// The real implementation is in js/src/
diff --git a/packages/flutterjs_foundation/pubspec.yaml b/packages/flutterjs_foundation/pubspec.yaml
new file mode 100644
index 00000000..9e065396
--- /dev/null
+++ b/packages/flutterjs_foundation/pubspec.yaml
@@ -0,0 +1,24 @@
+name: flutterjs_foundation
+version: 0.1.0
+description: A FlutterJS package
+
+homepage: https://github.com/flutterjs/flutterjs_foundation
+repository: https://github.com/flutterjs/flutterjs_foundation
+issue_tracker: https://github.com/flutterjs/flutterjs_foundation/issues
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+# FlutterJS metadata
+flutterjs:
+  npm_package: "@flutterjs/flutterjs_foundation"
+  implementation_language: "javascript"
+  js_entry: "js/src/index.js"
diff --git a/packages/flutterjs_gen/lib/src/code_generation/expression/expression_code_generator.dart b/packages/flutterjs_gen/lib/src/code_generation/expression/expression_code_generator.dart
index 3df287ec..e83e38cc 100644
--- a/packages/flutterjs_gen/lib/src/code_generation/expression/expression_code_generator.dart
+++ b/packages/flutterjs_gen/lib/src/code_generation/expression/expression_code_generator.dart
@@ -624,6 +624,17 @@ class ExpressionCodeGen {
       print('⚠️  UnknownExpressionIR detected: ${expr.source}');
     }
 
+    // ✅ FIX: Strip postfix bang operator (!)
+    if (expr.source != null &&
+        expr.source!.endsWith('!') &&
+        expr.source!.length > 1) {
+      final source = expr.source!;
+      print(
+        '   Converting null assert: $source → ${source.substring(0, source.length - 1)}',
+      );
+      return source.substring(0, source.length - 1);
+    }
+
     // Handle Dart 3.0+ shorthand enum/method syntax (.center, .fromSeed, etc.)
     if (expr.source != null && expr.source!.startsWith('.')) {
       // CHECK: Is it a method call? (contains '(')
@@ -956,6 +967,10 @@ class ExpressionCodeGen {
     if (expr.isPrefix) {
       return '$op$operand';
     } else {
+      // ✅ FIX: Postfix '!' (null check). Use runtime helper.
+      if (op == '!') {
+        return 'nullAssert($operand)';
+      }
       return '$operand$op';
     }
   }
@@ -1105,39 +1120,73 @@ class ExpressionCodeGen {
     // ✅ FIXED: When target is null
     final args = _generateArgumentList(expr.arguments, expr.namedArguments);
 
-    // Check if this is a widget constructor
+    // Check if this is a widget/class constructor
+    // Include both:
+    // - Public classes: ClassName (starts with uppercase)
+    // - Private classes: _ClassName (starts with _ then uppercase)
     final isWidgetCall =
         expr.methodName.isNotEmpty &&
-        expr.methodName[0].toUpperCase() == expr.methodName[0];
+        (
+        // Public class: first char is uppercase
+        (expr.methodName[0].toUpperCase() == expr.methodName[0] &&
+                !expr.methodName.startsWith('_')) ||
+            // Private class: starts with _ and second char is uppercase
+            (expr.methodName.startsWith('_') &&
+                expr.methodName.length > 1 &&
+                expr.methodName[1].toUpperCase() == expr.methodName[1]));
 
     if (isWidgetCall) {
-      // ✅ FIX: Add 'new' keyword for widget constructors (implicitly detected by Capitalized name)
+      // Add 'new' keyword for widget/class constructors
       return 'new ${expr.methodName}$typeArgStr($args)';
     }
 
-    // ✅ NEW: Use context from the function declaration
-    // This requires passing context through the generation pipeline
-    if (_currentFunctionContext != null &&
+    // ✅ SMART CONTEXT: Method resolution
+    // Instead of blindly adding 'this.' (which breaks globals like print()),
+    // verify if the method actually belongs to the class context.
+    if (_currentClassContext != null &&
+        _currentFunctionContext != null &&
         !_currentFunctionContext!.isTopLevel) {
-      // Inside a class method: use 'this.'
-      return 'this.${expr.methodName}$typeArgStr($args)';
+      bool shouldAddThis = false;
+      final name = expr.methodName;
+
+      // 1. Is it a defined instance method in this class?
+      if (_currentClassContext!.instanceMethods.any((m) => m.name == name)) {
+        shouldAddThis = true;
+      }
+      // 2. Is it a private method? (Heuristic: starts with _)
+      // BUT: Exclude private CLASS names like _LandingPageState
+      // (they start with _ but second char is uppercase)
+      else if (name.startsWith('_') &&
+          name.length > 1 &&
+          name[1].toLowerCase() == name[1]) {
+        shouldAddThis = true;
+      }
+      // 3. Known State<T> methods (common case)
+      else if (const {
+        'setState',
+        'initState',
+        'dispose',
+        'didUpdateWidget',
+        'didChangeDependencies',
+      }.contains(name)) {
+        shouldAddThis = true;
+      }
+
+      if (shouldAddThis) {
+        return 'this.${expr.methodName}$typeArgStr($args)';
+      }
     }
 
-    // Top-level function: direct call (no 'this.')
+    // Fallback: Top-level function / Global / Imported
+
     return '${expr.methodName}$typeArgStr($args)';
   }
 
   /// ✅ NEW HELPER: Generate type arguments like <CounterModel>, <List<String>>
   String _generateTypeArguments(List<TypeIR> typeArguments) {
-    if (typeArguments.isEmpty) {
-      return '';
-    }
-
-    final typeStrs = typeArguments.map((typeIR) {
-      return _generateType(typeIR);
-    }).toList();
-
-    return '<${typeStrs.join(", ")}>';
+    // ✅ FIX: JS doesn't support generic type arguments in method calls.
+    // Return empty string to strip them.
+    return '';
   }
 
   /// Generate a single TypeIR to string
@@ -1178,12 +1227,53 @@ class ExpressionCodeGen {
   String _generateFunctionCall(FunctionCallExpr expr) {
     final args = _generateArgumentList(expr.arguments, expr.namedArguments);
 
+    // ✅ SMART CONTEXT for FunctionCallExpr
+    // If we are in a class, this might be a method call misidentified as a function call
+    if (_currentClassContext != null &&
+        _currentFunctionContext != null &&
+        !_currentFunctionContext!.isTopLevel) {
+      bool shouldAddThis = false;
+      final name = expr.functionName;
+
+      // 1. Is it a defined instance method?
+      if (_currentClassContext!.instanceMethods.any((m) => m.name == name)) {
+        shouldAddThis = true;
+      }
+      // 2. Is it a private method?
+      // BUT: Exclude private CLASS names like _LandingPageState
+      else if (name.startsWith('_') &&
+          name.length > 1 &&
+          name[1].toLowerCase() == name[1]) {
+        shouldAddThis = true;
+      }
+      // 3. Known State methods
+      else if (const {
+        'setState',
+        'initState',
+        'dispose',
+        'didUpdateWidget',
+        'didChangeDependencies',
+      }.contains(name)) {
+        shouldAddThis = true;
+      }
+
+      if (shouldAddThis) {
+        return 'this.${expr.functionName}($args)';
+      }
+    }
+
     return '${expr.functionName}($args)';
   }
 
   /// Handles InstanceCreationExpressionIR (has TypeIR type)
   String _generateInstanceCreation(InstanceCreationExpressionIR expr) {
-    final typeName = expr.type.displayName();
+    var typeName = expr.type.displayName();
+
+    // ✅ FIX: Strip generics from type name for JS
+    // GlobalKey<FormState> -> GlobalKey
+    if (typeName.contains('<')) {
+      typeName = typeName.substring(0, typeName.indexOf('<'));
+    }
     if (typeName == 'all' || typeName == 'EdgeInsets') {
       print(
         '🏗️ InstanceCreation: type=$typeName, constructor=${expr.constructorName}',
diff --git a/packages/flutterjs_gen/lib/src/code_generation/function/function_code_generator.dart b/packages/flutterjs_gen/lib/src/code_generation/function/function_code_generator.dart
index 98802f3e..3a9f95ca 100644
--- a/packages/flutterjs_gen/lib/src/code_generation/function/function_code_generator.dart
+++ b/packages/flutterjs_gen/lib/src/code_generation/function/function_code_generator.dart
@@ -346,12 +346,7 @@ class FunctionCodeGen {
 
     // ✅ FIXED: Use arrow functions for private methods to preserve 'this' context in callbacks
     // Exception: Generators cannot be arrow functions
-    final isPrivate = method.name.startsWith('_');
-    final useArrowFunction =
-        isPrivate &&
-        !method.isGetter &&
-        !method.isSetter &&
-        !method.isGenerator;
+    final useArrowFunction = false; // Generate all methods as standard methods
 
     if (useArrowFunction) {
       // Arrow function syntax: _methodName = (params) => {
@@ -421,10 +416,8 @@ class FunctionCodeGen {
         .map((p) => p.name)
         .join(', ');
 
-    bool generatedSuper = false;
     if (ctor.superCall != null || superParams.isNotEmpty) {
       buffer.writeln(indenter.line('super($superParams);'));
-      generatedSuper = true;
     } else if (hasSuperclass) {
       // ✅ FIX: Force super() call if superclass exists and not generated yet
       // Check if 'key' parameter is available to pass to super (common for Widgets)
@@ -434,7 +427,6 @@ class FunctionCodeGen {
       } else {
         buffer.writeln(indenter.line('super();'));
       }
-      generatedSuper = true;
     }
 
     for (final param in ctor.parameters) {
diff --git a/packages/flutterjs_gen/lib/src/code_generation/parameter/parameter_code_gen.dart b/packages/flutterjs_gen/lib/src/code_generation/parameter/parameter_code_gen.dart
index 6c24a93c..d4ff0bb0 100644
--- a/packages/flutterjs_gen/lib/src/code_generation/parameter/parameter_code_gen.dart
+++ b/packages/flutterjs_gen/lib/src/code_generation/parameter/parameter_code_gen.dart
@@ -123,7 +123,7 @@ class ParameterCodeGen {
 
       // Add type comment (optional)
       if (config.useTypeComments && param.type != null) {
-        final typeStr = param.type!.displayName();
+        final typeStr = param.type.displayName();
         part += ' /* $typeStr */';
       }
 
@@ -183,7 +183,7 @@ class ParameterCodeGen {
     final buffer = StringBuffer();
 
     for (final param in parameters) {
-      if (param.isRequired && !(param.type?.isNullable ?? false)) {
+      if (param.isRequired && !(param.type.isNullable)) {
         buffer.writeln(
           'if (${param.name} == null) throw new Error("${param.name} is required");',
         );
diff --git a/packages/flutterjs_gen/lib/src/file_generation/file_code_gen.dart b/packages/flutterjs_gen/lib/src/file_generation/file_code_gen.dart
index 6213ea67..d696af01 100644
--- a/packages/flutterjs_gen/lib/src/file_generation/file_code_gen.dart
+++ b/packages/flutterjs_gen/lib/src/file_generation/file_code_gen.dart
@@ -8,6 +8,7 @@ import 'package:flutterjs_gen/src/file_generation/runtime_requirements.dart';
 import '../widget_generation/stateless_widget/stateless_widget_js_code_gen.dart';
 import '../utils/indenter.dart';
 import 'import_resolver.dart';
+import 'package_manifest.dart';
 
 class FileCodeGen {
   final ExpressionCodeGen exprCodeGen;
@@ -18,6 +19,7 @@ class FileCodeGen {
   final RuntimeRequirements runtimeRequirements;
   final OutputValidator? outputValidator;
   final JSOptimizer? jsOptimizer;
+  final PackageRegistry packageRegistry;
   late Indenter indenter;
 
   late Set<String> usedWidgets;
@@ -40,6 +42,7 @@ class FileCodeGen {
     FunctionCodeGen? funcCodeGen,
     FlutterPropConverter? propConverter,
     RuntimeRequirements? runtimeRequirements,
+    PackageRegistry? packageRegistry,
     this.outputValidator,
     this.jsOptimizer,
   }) : exprCodeGen = exprCodeGen ?? ExpressionCodeGen(),
@@ -47,7 +50,8 @@ class FileCodeGen {
        classCodeGen = classCodeGen ?? ClassCodeGen(),
        funcCodeGen = funcCodeGen ?? FunctionCodeGen(),
        propConverter = propConverter ?? FlutterPropConverter(),
-       runtimeRequirements = runtimeRequirements ?? RuntimeRequirements() {
+       runtimeRequirements = runtimeRequirements ?? RuntimeRequirements(),
+       packageRegistry = packageRegistry ?? PackageRegistry() {
     indenter = Indenter('  ');
     usedWidgets = {};
     usedHelpers = {};
@@ -288,7 +292,7 @@ class FileCodeGen {
             ..sort();
 
       // Helper to check core symbols
-      final resolver = ImportResolver();
+      final resolver = ImportResolver(registry: packageRegistry);
 
       for (final widget in sortedWidgets) {
         // Skip runtime types if they accidentally got into usedWidgets
@@ -563,6 +567,16 @@ function _filterNamespace(ns, show, hide) {
 }''';
     }
 
+    // ✅ NEW: Null assertion operator (!) helper
+    if (helperName == 'nullAssert') {
+      return r'''function nullAssert(value) {
+  if (value === null || value === undefined) {
+    throw new Error("Null check operator '!' used on a null value");
+  }
+  return value;
+}''';
+    }
+
     if (helperName == 'boundsCheck') {
       return '''function boundsCheck(index, length) {
   if (index < 0 || index >= length) {
diff --git a/packages/flutterjs_gen/lib/src/file_generation/import_resolver.dart b/packages/flutterjs_gen/lib/src/file_generation/import_resolver.dart
index e28ce84a..e3b91d27 100644
--- a/packages/flutterjs_gen/lib/src/file_generation/import_resolver.dart
+++ b/packages/flutterjs_gen/lib/src/file_generation/import_resolver.dart
@@ -1,98 +1,61 @@
+import 'package_manifest.dart';
+
 /// Manages the resolution of Dart symbols to JavaScript packages.
 ///
-/// Implements a 2-Stage Resolution Strategy:
-/// 1. **Symbol -> Dart Library**: Identifies which Dart library a symbol belongs to (e.g., `Text` -> `package:flutter/material.dart`).
-/// 2. **Dart Library -> JS Package**: Maps the Dart library to a JS package (e.g., `package:flutter/material.dart` -> `@flutterjs/material`).
-///
-/// This allows users to configure the *destination* JS package for any given Dart library
-/// without needing to redefine every single symbol mapping.
+/// Now uses PackageRegistry to query actual package exports instead of
+/// maintaining hardcoded symbol maps.
 class ImportResolver {
-  // STAGE 1: Knowledge Base (Symbol -> Dart Library)
-  // Defines the canonical source of truth for where core symbols come from.
-  static const Map<String, String> _symbolToLibrary = {
-    // Core Runtime
-    'runApp': 'package:flutter/runtime.dart',
-    'Widget': 'package:flutter/runtime.dart',
-    'State': 'package:flutter/runtime.dart',
-    'StatefulWidget': 'package:flutter/runtime.dart',
-    'StatelessWidget': 'package:flutter/runtime.dart',
-    'BuildContext': 'package:flutter/runtime.dart',
-    'Key': 'package:flutter/runtime.dart',
-    'ValueKey': 'package:flutter/runtime.dart',
-    'ObjectKey': 'package:flutter/runtime.dart',
-    'GlobalKey': 'package:flutter/runtime.dart',
-    'UniqueKey': 'package:flutter/runtime.dart',
-    'Scheduler': 'package:flutter/runtime.dart',
-    'GestureDetector': 'package:flutter/runtime.dart',
-
-    // Material Widgets
-    'MaterialApp': 'package:flutter/material.dart',
-    'Scaffold': 'package:flutter/material.dart',
-    'AppBar': 'package:flutter/material.dart',
-    'Text': 'package:flutter/material.dart',
-    'TextStyle': 'package:flutter/material.dart',
-    'Container': 'package:flutter/material.dart',
-    'Column': 'package:flutter/material.dart',
-    'Row': 'package:flutter/material.dart',
-    'Icon': 'package:flutter/material.dart',
-    'Icons': 'package:flutter/material.dart',
-    'Padding': 'package:flutter/material.dart',
-    'FloatingActionButton': 'package:flutter/material.dart',
-    'Center': 'package:flutter/material.dart',
-    'SizedBox': 'package:flutter/material.dart',
-    'Card': 'package:flutter/material.dart',
-    'Colors': 'package:flutter/material.dart',
-    'Theme': 'package:flutter/material.dart',
-    'ThemeData': 'package:flutter/material.dart',
-    'ColorScheme': 'package:flutter/material.dart',
-    'ListTile': 'package:flutter/material.dart',
-    'ListView': 'package:flutter/material.dart',
-    'Divider': 'package:flutter/material.dart',
-    'ElevatedButton': 'package:flutter/material.dart',
-    'Expanded': 'package:flutter/material.dart',
-    'Flexible': 'package:flutter/material.dart',
-    'Stack': 'package:flutter/material.dart',
-    'Positioned': 'package:flutter/material.dart',
-    'Spacer': 'package:flutter/material.dart',
-    'SingleChildScrollView': 'package:flutter/material.dart',
-    'MainAxisAlignment': 'package:flutter/material.dart',
-    'CrossAxisAlignment': 'package:flutter/material.dart',
-  };
+  final PackageRegistry registry;
 
   // STAGE 2: Configuration (Dart Library -> JS Package)
   // Default mappings that mimic Flutter's structure.
   static const Map<String, String> _defaultLibraryToPackage = {
-    // We map both runtime and material to @flutterjs/material by default
-    // because @flutterjs/material is the Unified Entry Point.
-    // Users can override this to split them if needed.
-    'package:flutter/runtime.dart': '@flutterjs/material',
+    // Core Runtime
+    'package:flutter/runtime.dart': '@flutterjs/runtime',
+
+    // Core Widgets & Material
     'package:flutter/material.dart': '@flutterjs/material',
-    'package:flutter/widgets.dart': '@flutterjs/material',
-    'package:flutter/cupertino.dart': '@flutterjs/material', // Fallback for now
+    'package:flutter/widgets.dart':
+        '@flutterjs/material', // Most widgets are in material package for now
+    'package:flutter/cupertino.dart': '@flutterjs/material',
   };
 
   final Map<String, String> _libraryToPackageMap;
 
-  ImportResolver({Map<String, String>? userPackageMap})
-    : _libraryToPackageMap = {..._defaultLibraryToPackage, ...?userPackageMap};
+  ImportResolver({
+    PackageRegistry? registry,
+    Map<String, String>? userPackageMap,
+  }) : registry = registry ?? PackageRegistry(),
+       _libraryToPackageMap = {..._defaultLibraryToPackage, ...?userPackageMap};
 
   /// Resolves the JS package import path for a given [symbol].
   ///
-  /// [activeImports] is the list of import URIs present in the file using this symbol.
-  /// This context allows us to route unknown symbols to packages imported by the user.
+  /// Resolution order:
+  /// 1. Check PackageRegistry for exact match
+  /// 2. Check hardcoded library mappings (for backwards compatibility)
+  /// 3. Check file imports for context
+  /// 4. Fallback to @flutterjs/material
   String resolve(String symbol, {List<String> activeImports = const []}) {
-    // 1. STAGE 1: Exact Symbol Knowledge
-    // Check if we know exactly where this symbol comes from in Dart.
-    final knownLibrary = _symbolToLibrary[symbol];
-    if (knownLibrary != null) {
-      return _resolveLibraryToPackage(knownLibrary);
+    // 1. PRIORITY: Check PackageRegistry for exact match
+    // This is the new dynamic resolution based on actual package exports
+    final packageFromRegistry = registry.findPackageForSymbol(symbol);
+    if (packageFromRegistry != null) {
+      return packageFromRegistry;
     }
 
-    // 2. STAGE 2: Contextual Heuristics (based on File Imports)
-    // If we don't know the symbol, check the file's imports.
-    // If the user imports 'package:firebase_core/...', and we have a mapping for
-    // 'package:firebase_core', we can infer the symbol likely comes from there.
+    // 2. Fallback to library-based resolution
+    // Check if this is a dart: import or package: import
+    for (final importUri in activeImports) {
+      if (importUri.startsWith('package:flutter/')) {
+        final dartLib = _resolveLibraryToPackage(importUri);
+        if (dartLib != '@flutterjs/material') {
+          return dartLib;
+        }
+      }
+    }
 
+    // 3. STAGE 2: Contextual Heuristics (based on File Imports)
+    // If we don't know the symbol, check the file's imports.
     for (final importUri in activeImports) {
       // Parse 'package:name/...'
       final packageName = _extractPackageName(importUri);
@@ -101,14 +64,12 @@ class ImportResolver {
         if (mappedJsPackage != null &&
             mappedJsPackage != '@flutterjs/material') {
           // We found a non-default mapped package!
-          // If there are multiple, this is ambiguous, but picking the first valid
-          // non-core package is a strong heuristic for custom widgets.
           return mappedJsPackage;
         }
       }
     }
 
-    // 3. Fallback: Default UI Library
+    // 4. Fallback: Default UI Library
     // If strictly unknown and no helpful imports found, assume Material/Widget layer.
     return '@flutterjs/material';
   }
@@ -139,8 +100,8 @@ class ImportResolver {
     return null;
   }
 
-  /// Checks if the symbol is a known core Flutter/Dart symbol.
+  /// Checks if the symbol is known in the registry
   bool isKnownCore(String symbol) {
-    return _symbolToLibrary.containsKey(symbol);
+    return registry.hasSymbol(symbol);
   }
 }
diff --git a/packages/flutterjs_gen/lib/src/file_generation/package_manifest.dart b/packages/flutterjs_gen/lib/src/file_generation/package_manifest.dart
new file mode 100644
index 00000000..f384897a
--- /dev/null
+++ b/packages/flutterjs_gen/lib/src/file_generation/package_manifest.dart
@@ -0,0 +1,113 @@
+import 'dart:io';
+import 'dart:convert';
+
+/// Represents a package's export manifest
+class PackageManifest {
+  final String packageName;
+  final String version;
+  final Set<String> exports;
+
+  PackageManifest({
+    required this.packageName,
+    required this.version,
+    required this.exports,
+  });
+
+  /// Load manifest from JSON file
+  factory PackageManifest.fromJson(Map<String, dynamic> json) {
+    return PackageManifest(
+      packageName: json['package'] as String,
+      version: json['version'] as String,
+      exports: Set<String>.from(json['exports'] as List),
+    );
+  }
+
+  /// Load manifest from file path
+  factory PackageManifest.fromFile(String manifestPath) {
+    final file = File(manifestPath);
+    if (!file.existsSync()) {
+      throw FileSystemException('Manifest not found', manifestPath);
+    }
+
+    final json = jsonDecode(file.readAsStringSync()) as Map<String, dynamic>;
+    return PackageManifest.fromJson(json);
+  }
+
+  /// Check if this package exports a given symbol
+  bool hasExport(String symbol) => exports.contains(symbol);
+
+  @override
+  String toString() =>
+      'PackageManifest($packageName v$version, ${exports.length} exports)';
+}
+
+/// Registry of all package manifests
+class PackageRegistry {
+  final Map<String, PackageManifest> _packagesByName = {};
+  final Map<String, String> _symbolToPackage = {};
+
+  /// Load a single manifest file
+  void loadManifest(String manifestPath) {
+    try {
+      final manifest = PackageManifest.fromFile(manifestPath);
+      _packagesByName[manifest.packageName] = manifest;
+
+      // Build reverse index: symbol → package
+      for (final symbol in manifest.exports) {
+        // If symbol already exists, keep first package (SDK packages loaded first)
+        if (!_symbolToPackage.containsKey(symbol)) {
+          _symbolToPackage[symbol] = manifest.packageName;
+        }
+      }
+
+      print(
+        '📋 Loaded ${manifest.packageName}: ${manifest.exports.length} exports',
+      );
+    } catch (e) {
+      print('⚠️  Failed to load manifest $manifestPath: $e');
+    }
+  }
+
+  /// Auto-discover and load all exports.json in packages directory
+  void loadPackagesDirectory(String packagesDir) {
+    final dir = Directory(packagesDir);
+    if (!dir.existsSync()) {
+      print('⚠️  Packages directory not found: $packagesDir');
+      return;
+    }
+
+    print('📦 Scanning for package manifests in $packagesDir...');
+
+    // Find all exports.json files recursively
+    final manifests = dir
+        .listSync(recursive: true)
+        .whereType<File>()
+        .where((file) => file.path.endsWith('exports.json'))
+        .toList();
+
+    if (manifests.isEmpty) {
+      print('⚠️  No package manifests found');
+      return;
+    }
+
+    for (final manifestFile in manifests) {
+      loadManifest(manifestFile.path);
+    }
+
+    print('✅ Loaded ${_packagesByName.length} package manifests\n');
+  }
+
+  /// Find which package exports a given symbol
+  String? findPackageForSymbol(String symbol) {
+    return _symbolToPackage[symbol];
+  }
+
+  /// Get all loaded packages
+  List<String> get loadedPackages => _packagesByName.keys.toList();
+
+  /// Get total number of symbols tracked
+  int get totalSymbols => _symbolToPackage.length;
+
+  /// Check if a symbol is known
+  bool hasSymbol(String symbol) => _symbolToPackage.containsKey(symbol);
+}
diff --git a/packages/flutterjs_gen/lib/src/file_generation/runtime_requirements.dart b/packages/flutterjs_gen/lib/src/file_generation/runtime_requirements.dart
index 72f64fd3..c6327467 100644
--- a/packages/flutterjs_gen/lib/src/file_generation/runtime_requirements.dart
+++ b/packages/flutterjs_gen/lib/src/file_generation/runtime_requirements.dart
@@ -39,6 +39,7 @@ class RuntimeRequirements {
     }
 
     addHelper('typeAssertion');
+    addHelper('nullAssert');
   }
 
   bool _hasTypeChecks(DartFile dartFile) {
diff --git a/packages/flutterjs_gen/lib/src/model_to_js_integration.dart b/packages/flutterjs_gen/lib/src/model_to_js_integration.dart
index d1876356..8638a230 100644
--- a/packages/flutterjs_gen/lib/src/model_to_js_integration.dart
+++ b/packages/flutterjs_gen/lib/src/model_to_js_integration.dart
@@ -269,6 +269,7 @@ class ModelToJSPipeline {
   String _generateImports(DartFile dartFile) {
     final buffer = StringBuffer();
 
+    // Default Material Imports (Runtime Requirement)
     buffer.writeln('import {');
     buffer.writeln('  runApp,');
     buffer.writeln('  Widget,');
@@ -278,10 +279,34 @@ class ModelToJSPipeline {
     buffer.writeln('  BuildContext,');
     buffer.writeln('  Key,');
     buffer.writeln('} from \'@flutterjs/material\';');
-
-    // Add generic import for material potentially used
     buffer.writeln('import * as Material from \'@flutterjs/material\';');
 
+    // Dynamic Imports from Dart Source
+    for (final import in dartFile.imports) {
+      if (import.uri.startsWith('dart:')) {
+        final libName = import.uri.substring(5); // e.g. "math" from "dart:math"
+        final jsPackage = '@flutterjs/dart/$libName';
+
+        if (import.prefix != null) {
+          buffer.writeln('import * as ${import.prefix} from \'$jsPackage\';');
+        } else if (import.showList.isNotEmpty) {
+          buffer.writeln(
+            'import { ${import.showList.join(", ")} } from \'$jsPackage\';',
+          );
+        } else {
+          // Fallback for "import 'dart:math';" (no prefix, no show)
+          // In JS this imports for side-effects only, but Dart implies all symbols.
+          // We'll treat it as a namespace import with a generated name if needed,
+          // but for core libs usually we want specific symbols.
+          // For now, let's map generic imports to wildcard if possible,
+          // or skip if we can't determine usage.
+          // BETTER: Import as namespace and let code generator handle resolution (complex).
+          // SIMPLE FIX: Just import it.
+          buffer.writeln('import \'$jsPackage\';');
+        }
+      }
+    }
+
     return buffer.toString();
   }
 
diff --git a/packages/flutterjs_gestures/.gitignore b/packages/flutterjs_gestures/.gitignore
new file mode 100644
index 00000000..1d4cb04d
--- /dev/null
+++ b/packages/flutterjs_gestures/.gitignore
@@ -0,0 +1,31 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+build/
+dist/
+.dev/
+.debug/
+
+# Generated files
+.flutterjs/
+.cache/
+
+# Dart
+.dart_tool/
+.packages
+pubspec.lock
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Logs
+*.log
+npm-debug.log*
diff --git a/packages/flutterjs_gestures/.pubignore b/packages/flutterjs_gestures/.pubignore
new file mode 100644
index 00000000..bae5ffcf
--- /dev/null
+++ b/packages/flutterjs_gestures/.pubignore
@@ -0,0 +1,11 @@
+# Exclude JavaScript implementation from pub.dev
+js/
+node_modules/
+dist/
+build/
+.git/
+.github/
+test/
+package-lock.json
+.vscode/
+.idea/
diff --git a/packages/flutterjs_gestures/CHANGELOG.md b/packages/flutterjs_gestures/CHANGELOG.md
new file mode 100644
index 00000000..13187808
--- /dev/null
+++ b/packages/flutterjs_gestures/CHANGELOG.md
@@ -0,0 +1,3 @@
+## 0.1.0
+
+* Initial release
diff --git a/packages/flutterjs_gestures/LICENSE b/packages/flutterjs_gestures/LICENSE
new file mode 100644
index 00000000..14fac913
--- /dev/null
+++ b/packages/flutterjs_gestures/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/flutterjs_gestures/README.md b/packages/flutterjs_gestures/README.md
new file mode 100644
index 00000000..204109be
--- /dev/null
+++ b/packages/flutterjs_gestures/README.md
@@ -0,0 +1,58 @@
+# FlutterjsGestures
+
+A FlutterJS package
+
+## Installation
+
+Add to `pubspec.yaml`:
+
+```yaml
+dependencies:
+  flutterjs_gestures: ^0.1.0
+```
+
+Then run:
+
+```bash
+flutterjs get
+```
+
+## Usage
+
+See `example/` for a complete Flutter app.
+
+## JavaScript Implementation
+
+The actual implementation is in `js/src/` (JavaScript).
+
+To develop:
+
+```bash
+cd js
+npm install
+```
+
+## Features
+
+- Lightweight implementation
+- SEO-friendly (FlutterJS rendering)
+- Easy to use
+
+## Publishing
+
+### 1. Publish JavaScript to npm
+
+```bash
+cd js
+npm publish
+```
+
+### 2. Publish Dart wrapper to pub.dev
+
+```bash
+dart pub publish
+```
+
+## License
+
+MIT
diff --git a/packages/flutterjs_gestures/example/lib/main.dart b/packages/flutterjs_gestures/example/lib/main.dart
new file mode 100644
index 00000000..c94e2929
--- /dev/null
+++ b/packages/flutterjs_gestures/example/lib/main.dart
@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'FlutterjsGestures Example',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: const ExamplePage(),
+    );
+  }
+}
+
+class ExamplePage extends StatefulWidget {
+  const ExamplePage({Key? key}) : super(key: key);
+
+  @override
+  State<ExamplePage> createState() => _ExamplePageState();
+}
+
+class _ExamplePageState extends State<ExamplePage> {
+  String result = 'Click the button to test';
+
+  void _testPackage() {
+    setState(() {
+      // This will call the JavaScript implementation when running with FlutterJS
+      result = 'FlutterjsGestures is ready!\n\nRun: flutterjs run --to-js --serve';
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('FlutterjsGestures Example'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              result,
+              textAlign: TextAlign.center,
+              style: const TextStyle(fontSize: 16),
+            ),
+            const SizedBox(height: 20),
+            ElevatedButton(
+              onPressed: _testPackage,
+              child: const Text('Test FlutterjsGestures'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/packages/flutterjs_gestures/example/pubspec.yaml b/packages/flutterjs_gestures/example/pubspec.yaml
new file mode 100644
index 00000000..575c25ea
--- /dev/null
+++ b/packages/flutterjs_gestures/example/pubspec.yaml
@@ -0,0 +1,15 @@
+name: flutterjs_gestures_example
+description: Example app for flutterjs_gestures
+
+publish_to: 'none'
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
diff --git a/packages/flutterjs_gestures/flutterjs_gestures/build.js b/packages/flutterjs_gestures/flutterjs_gestures/build.js
new file mode 100644
index 00000000..9201258f
--- /dev/null
+++ b/packages/flutterjs_gestures/flutterjs_gestures/build.js
@@ -0,0 +1,99 @@
+/**
+ * Build script for @flutterjs/flutterjs_gestures
+ * 
+ * Generates exports.json manifest for the import resolver system
+ */
+
+import { readFileSync, writeFileSync, readdirSync, statSync } from 'fs';
+import { join, extname } from 'path';
+
+const srcDir = './src';
+
+/**
+ * Get all JavaScript files recursively
+ */
+function getAllJsFiles(dir, fileList = []) {
+  const files = readdirSync(dir);
+  
+  for (const file of files) {
+    const filePath = join(dir, file);
+    const stat = statSync(filePath);
+    
+    if (stat.isDirectory()) {
+      getAllJsFiles(filePath, fileList);
+    } else if (extname(file) === '.js') {
+      fileList.push(filePath);
+    }
+  }
+  
+  return fileList;
+}
+
+/**
+ * Scan all source files and generate exports.json manifest
+ * This manifest tells the Dart code generator what symbols this package exports
+ */
+function generateExportManifest(sourceFiles) {
+  const manifest = {
+    package: '@flutterjs/flutterjs_gestures',
+    version: '0.1.0',
+    exports: []
+  };
+
+  // Regex patterns to match different export types
+  const exportRegex = /export\s*{\s*([^}]+)\s*}/g;
+  const exportStarRegex = /export\s*\*\s*from/g;
+  const classRegex = /export\s+class\s+(\w+)/g;
+  const functionRegex = /export\s+function\s+(\w+)/g;
+  const constRegex = /export\s+const\s+(\w+)/g;
+
+  for (const srcFile of sourceFiles) {
+    const content = readFileSync(srcFile, 'utf8');
+    
+    // Find named exports: export { Foo, Bar }
+    for (const match of content.matchAll(exportRegex)) {
+      const symbols = match[1]
+        .split(',')
+        .map(s => s.trim())
+        .map(s => s.split(/\s+as\s+/).pop()) // Handle "export { Foo as Bar }"
+        .filter(s => s && !s.includes('from'));
+      manifest.exports.push(...symbols);
+    }
+    
+    // Find class exports: export class Foo
+    for (const match of content.matchAll(classRegex)) {
+      manifest.exports.push(match[1]);
+    }
+    
+    // Find function exports: export function foo()
+    for (const match of content.matchAll(functionRegex)) {
+      manifest.exports.push(match[1]);
+    }
+    
+    // Find const exports: export const FOO
+    for (const match of content.matchAll(constRegex)) {
+      manifest.exports.push(match[1]);
+    }
+  }
+
+  // Remove duplicates and sort
+  manifest.exports = [...new Set(manifest.exports)].sort();
+
+  writeFileSync('./exports.json', JSON.stringify(manifest, null, 2) + '\n');
+  console.log(`📋 Generated exports.json with ${manifest.exports.length} symbols\n`);
+}
+
+// Main build process
+async function build() {
+  console.log('🚀 Building @flutterjs/flutterjs_gestures...\n');
+
+  const allFiles = getAllJsFiles(srcDir);
+  console.log(`📦 Found ${allFiles.length} JavaScript files\n`);
+
+  // Generate export manifest
+  generateExportManifest(allFiles);
+
+  console.log('✅ Build successful!\n');
+}
+
+build().catch(console.error);
diff --git a/packages/flutterjs_gestures/flutterjs_gestures/package.json b/packages/flutterjs_gestures/flutterjs_gestures/package.json
new file mode 100644
index 00000000..13326c61
--- /dev/null
+++ b/packages/flutterjs_gestures/flutterjs_gestures/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@flutterjs/flutterjs_gestures",
+  "version": "0.1.0",
+  "description": "A FlutterJS package",
+  "main": "src/index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"No tests yet\"",
+    "prepublishOnly": "echo \"Ready to publish\""
+  },
+  "keywords": [
+    "flutterjs",
+    "flutterjs_gestures"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/flutterjsdev/flutterjs.git"
+  },
+  "files": [
+    "src/",
+    "README.md",
+    "LICENSE"
+  ]
+}
diff --git a/packages/flutterjs_gestures/flutterjs_gestures/src/index.js b/packages/flutterjs_gestures/flutterjs_gestures/src/index.js
new file mode 100644
index 00000000..9a4f95c9
--- /dev/null
+++ b/packages/flutterjs_gestures/flutterjs_gestures/src/index.js
@@ -0,0 +1,43 @@
+/**
+ * FlutterJS FlutterjsGestures
+ * 
+ * Simple, lightweight implementation built with JavaScript
+ */
+
+/**
+ * Main class for FlutterjsGestures
+ */
+export class FlutterjsGestures {
+  constructor(config = {}) {
+    this.config = config;
+  }
+
+  /**
+   * Example method - replace with your implementation
+   */
+  hello() {
+    return 'Hello from FlutterjsGestures!';
+  }
+
+  /**
+   * Example async method
+   */
+  async fetchData(url) {
+    try {
+      const response = await fetch(url);
+      return await response.json();
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      throw error;
+    }
+  }
+}
+
+/**
+ * Helper function
+ */
+export function createInstance(config) {
+  return new FlutterjsGestures(config);
+}
+
+export default FlutterjsGestures;
diff --git a/packages/flutterjs_gestures/lib/flutterjs_gestures.dart b/packages/flutterjs_gestures/lib/flutterjs_gestures.dart
new file mode 100644
index 00000000..82a3e261
--- /dev/null
+++ b/packages/flutterjs_gestures/lib/flutterjs_gestures.dart
@@ -0,0 +1,26 @@
+/// FlutterJS FlutterjsGestures
+/// 
+/// A FlutterJS package
+/// 
+/// The actual implementation is in JavaScript.
+/// This package is a metadata wrapper published to pub.dev.
+/// 
+/// ## Usage
+/// 
+/// Add to your `pubspec.yaml`:
+/// ```yaml
+/// dependencies:
+///   flutterjs_gestures: ^0.1.0
+/// ```
+/// 
+/// Then run:
+/// ```bash
+/// flutterjs get
+/// ```
+/// 
+/// The package will be installed to: `build/flutterjs/node_modules/@flutterjs/flutterjs_gestures`
+/// 
+/// See `example/` for a complete working app.
+library flutterjs_gestures;
+
+// The real implementation is in js/src/
diff --git a/packages/flutterjs_gestures/pubspec.yaml b/packages/flutterjs_gestures/pubspec.yaml
new file mode 100644
index 00000000..275b6765
--- /dev/null
+++ b/packages/flutterjs_gestures/pubspec.yaml
@@ -0,0 +1,24 @@
+name: flutterjs_gestures
+version: 0.1.0
+description: A FlutterJS package
+
+homepage: https://github.com/flutterjs/flutterjs_gestures
+repository: https://github.com/flutterjs/flutterjs_gestures
+issue_tracker: https://github.com/flutterjs/flutterjs_gestures/issues
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+# FlutterJS metadata
+flutterjs:
+  npm_package: "@flutterjs/flutterjs_gestures"
+  implementation_language: "javascript"
+  js_entry: "js/src/index.js"
diff --git a/packages/flutterjs_material/.gitignore b/packages/flutterjs_material/.gitignore
new file mode 100644
index 00000000..1d4cb04d
--- /dev/null
+++ b/packages/flutterjs_material/.gitignore
@@ -0,0 +1,31 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+build/
+dist/
+.dev/
+.debug/
+
+# Generated files
+.flutterjs/
+.cache/
+
+# Dart
+.dart_tool/
+.packages
+pubspec.lock
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Logs
+*.log
+npm-debug.log*
diff --git a/packages/flutterjs_material/.pubignore b/packages/flutterjs_material/.pubignore
new file mode 100644
index 00000000..bae5ffcf
--- /dev/null
+++ b/packages/flutterjs_material/.pubignore
@@ -0,0 +1,11 @@
+# Exclude JavaScript implementation from pub.dev
+js/
+node_modules/
+dist/
+build/
+.git/
+.github/
+test/
+package-lock.json
+.vscode/
+.idea/
diff --git a/packages/flutterjs_material/CHANGELOG.md b/packages/flutterjs_material/CHANGELOG.md
new file mode 100644
index 00000000..13187808
--- /dev/null
+++ b/packages/flutterjs_material/CHANGELOG.md
@@ -0,0 +1,3 @@
+## 0.1.0
+
+* Initial release
diff --git a/packages/flutterjs_material/LICENSE b/packages/flutterjs_material/LICENSE
new file mode 100644
index 00000000..14fac913
--- /dev/null
+++ b/packages/flutterjs_material/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/flutterjs_material/README.md b/packages/flutterjs_material/README.md
new file mode 100644
index 00000000..14b73be6
--- /dev/null
+++ b/packages/flutterjs_material/README.md
@@ -0,0 +1,757 @@
+# FlutterjsMaterial
+
+FlutterJS Material Design components
+
+## Installation
+
+Add to `pubspec.yaml`:
+
+```yaml
+dependencies:
+  flutterjs_material: ^0.1.0
+```
+
+Then run:
+
+```bash
+flutterjs get
+```
+
+## Usage
+
+See `example/` for a complete Flutter app.
+
+## JavaScript Implementation
+
+The actual implementation is in `js/src/` (JavaScript).
+
+To develop:
+
+```bash
+cd js
+npm install
+```
+
+## Features
+
+- Lightweight implementation
+- SEO-friendly (FlutterJS rendering)
+- Easy to use
+
+## Publishing
+
+### 1. Publish JavaScript to npm
+
+```bash
+cd js
+npm publish
+```
+
+### 2. Publish Dart wrapper to pub.dev
+
+```bash
+dart pub publish
+```
+
+## License
+
+MIT
+
+
+
+library animation;
+
+// AnimationController can throw TickerCanceled
+export 'package:flutter/scheduler.dart' show TickerCanceled;
+
+export 'src/animation/animation.dart';
+export 'src/animation/animation_controller.dart';
+export 'src/animation/animation_style.dart';
+export 'src/animation/animations.dart';
+export 'src/animation/curves.dart';
+export 'src/animation/listener_helpers.dart';
+export 'src/animation/tween.dart';
+export 'src/animation/tween_sequence.dart';
+
+
+
+export 'src/cupertino/activity_indicator.dart';
+export 'src/cupertino/adaptive_text_selection_toolbar.dart';
+export 'src/cupertino/app.dart';
+export 'src/cupertino/bottom_tab_bar.dart';
+export 'src/cupertino/button.dart';
+export 'src/cupertino/checkbox.dart';
+export 'src/cupertino/colors.dart';
+export 'src/cupertino/constants.dart';
+export 'src/cupertino/context_menu.dart';
+export 'src/cupertino/context_menu_action.dart';
+export 'src/cupertino/date_picker.dart';
+export 'src/cupertino/debug.dart';
+export 'src/cupertino/desktop_text_selection.dart';
+export 'src/cupertino/desktop_text_selection_toolbar.dart';
+export 'src/cupertino/desktop_text_selection_toolbar_button.dart';
+export 'src/cupertino/dialog.dart';
+export 'src/cupertino/expansion_tile.dart';
+export 'src/cupertino/form_row.dart';
+export 'src/cupertino/form_section.dart';
+export 'src/cupertino/icon_theme_data.dart';
+export 'src/cupertino/icons.dart';
+export 'src/cupertino/interface_level.dart';
+export 'src/cupertino/list_section.dart';
+export 'src/cupertino/list_tile.dart';
+export 'src/cupertino/localizations.dart';
+export 'src/cupertino/magnifier.dart';
+export 'src/cupertino/nav_bar.dart';
+export 'src/cupertino/page_scaffold.dart';
+export 'src/cupertino/picker.dart';
+export 'src/cupertino/radio.dart';
+export 'src/cupertino/refresh.dart';
+export 'src/cupertino/route.dart';
+export 'src/cupertino/scrollbar.dart';
+export 'src/cupertino/search_field.dart';
+export 'src/cupertino/segmented_control.dart';
+export 'src/cupertino/sheet.dart';
+export 'src/cupertino/slider.dart';
+export 'src/cupertino/sliding_segmented_control.dart';
+export 'src/cupertino/spell_check_suggestions_toolbar.dart';
+export 'src/cupertino/switch.dart';
+export 'src/cupertino/tab_scaffold.dart';
+export 'src/cupertino/tab_view.dart';
+export 'src/cupertino/text_field.dart';
+export 'src/cupertino/text_form_field_row.dart';
+export 'src/cupertino/text_selection.dart';
+export 'src/cupertino/text_selection_toolbar.dart';
+export 'src/cupertino/text_selection_toolbar_button.dart';
+export 'src/cupertino/text_theme.dart';
+export 'src/cupertino/theme.dart';
+export 'src/cupertino/thumb_painter.dart';
+export 'widgets.dart';
+
+
+
+library foundation;
+
+export 'package:meta/meta.dart'
+    show
+        factory,
+        immutable,
+        internal,
+        mustCallSuper,
+        nonVirtual,
+        optionalTypeArgs,
+        protected,
+        required,
+        visibleForOverriding,
+        visibleForTesting;
+
+export 'src/foundation/annotations.dart';
+export 'src/foundation/assertions.dart';
+export 'src/foundation/basic_types.dart';
+export 'src/foundation/binding.dart';
+export 'src/foundation/bitfield.dart';
+export 'src/foundation/capabilities.dart';
+export 'src/foundation/change_notifier.dart';
+export 'src/foundation/collections.dart';
+export 'src/foundation/consolidate_response.dart';
+export 'src/foundation/constants.dart';
+export 'src/foundation/debug.dart';
+export 'src/foundation/diagnostics.dart';
+export 'src/foundation/isolates.dart';
+export 'src/foundation/key.dart';
+export 'src/foundation/licenses.dart';
+export 'src/foundation/memory_allocations.dart';
+export 'src/foundation/node.dart';
+export 'src/foundation/object.dart';
+export 'src/foundation/observer_list.dart';
+export 'src/foundation/persistent_hash_map.dart';
+export 'src/foundation/platform.dart';
+export 'src/foundation/print.dart';
+export 'src/foundation/serialization.dart';
+export 'src/foundation/service_extensions.dart';
+export 'src/foundation/stack_frame.dart';
+export 'src/foundation/synchronous_future.dart';
+export 'src/foundation/timeline.dart';
+export 'src/foundation/unicode.dart';
+
+library gestures;
+
+export 'src/gestures/arena.dart';
+export 'src/gestures/binding.dart';
+export 'src/gestures/constants.dart';
+export 'src/gestures/converter.dart';
+export 'src/gestures/debug.dart';
+export 'src/gestures/drag.dart';
+export 'src/gestures/drag_details.dart';
+export 'src/gestures/eager.dart';
+export 'src/gestures/events.dart';
+export 'src/gestures/force_press.dart';
+export 'src/gestures/gesture_details.dart';
+export 'src/gestures/gesture_settings.dart';
+export 'src/gestures/hit_test.dart';
+export 'src/gestures/long_press.dart';
+export 'src/gestures/lsq_solver.dart';
+export 'src/gestures/monodrag.dart';
+export 'src/gestures/multidrag.dart';
+export 'src/gestures/multitap.dart';
+export 'src/gestures/pointer_router.dart';
+export 'src/gestures/pointer_signal_resolver.dart';
+export 'src/gestures/recognizer.dart';
+export 'src/gestures/resampler.dart';
+export 'src/gestures/scale.dart';
+export 'src/gestures/tap.dart';
+export 'src/gestures/tap_and_drag.dart';
+export 'src/gestures/team.dart';
+export 'src/gestures/velocity_tracker.dart';
+
+
+library material;
+
+export 'src/material/about.dart';
+export 'src/material/action_buttons.dart';
+export 'src/material/action_chip.dart';
+export 'src/material/action_icons_theme.dart';
+export 'src/material/adaptive_text_selection_toolbar.dart';
+export 'src/material/animated_icons.dart';
+export 'src/material/app.dart';
+export 'src/material/app_bar.dart';
+export 'src/material/app_bar_theme.dart';
+export 'src/material/arc.dart';
+export 'src/material/autocomplete.dart';
+export 'src/material/badge.dart';
+export 'src/material/badge_theme.dart';
+export 'src/material/banner.dart';
+export 'src/material/banner_theme.dart';
+export 'src/material/bottom_app_bar.dart';
+export 'src/material/bottom_app_bar_theme.dart';
+export 'src/material/bottom_navigation_bar.dart';
+export 'src/material/bottom_navigation_bar_theme.dart';
+export 'src/material/bottom_sheet.dart';
+export 'src/material/bottom_sheet_theme.dart';
+export 'src/material/button.dart';
+export 'src/material/button_bar.dart';
+export 'src/material/button_bar_theme.dart';
+export 'src/material/button_style.dart';
+export 'src/material/button_style_button.dart';
+export 'src/material/button_theme.dart';
+export 'src/material/calendar_date_picker.dart';
+export 'src/material/card.dart';
+export 'src/material/card_theme.dart';
+export 'src/material/carousel.dart';
+export 'src/material/carousel_theme.dart';
+export 'src/material/checkbox.dart';
+export 'src/material/checkbox_list_tile.dart';
+export 'src/material/checkbox_theme.dart';
+export 'src/material/chip.dart';
+export 'src/material/chip_theme.dart';
+export 'src/material/choice_chip.dart';
+export 'src/material/circle_avatar.dart';
+export 'src/material/color_scheme.dart';
+export 'src/material/colors.dart';
+export 'src/material/constants.dart';
+export 'src/material/curves.dart';
+export 'src/material/data_table.dart';
+export 'src/material/data_table_source.dart';
+export 'src/material/data_table_theme.dart';
+export 'src/material/date.dart';
+export 'src/material/date_picker.dart';
+export 'src/material/date_picker_theme.dart';
+export 'src/material/debug.dart';
+export 'src/material/desktop_text_selection.dart';
+export 'src/material/desktop_text_selection_toolbar.dart';
+export 'src/material/desktop_text_selection_toolbar_button.dart';
+export 'src/material/dialog.dart';
+export 'src/material/dialog_theme.dart';
+export 'src/material/divider.dart';
+export 'src/material/divider_theme.dart';
+export 'src/material/drawer.dart';
+export 'src/material/drawer_header.dart';
+export 'src/material/drawer_theme.dart';
+export 'src/material/dropdown.dart';
+export 'src/material/dropdown_menu.dart';
+export 'src/material/dropdown_menu_form_field.dart';
+export 'src/material/dropdown_menu_theme.dart';
+export 'src/material/elevated_button.dart';
+export 'src/material/elevated_button_theme.dart';
+export 'src/material/elevation_overlay.dart';
+export 'src/material/expand_icon.dart';
+export 'src/material/expansion_panel.dart';
+export 'src/material/expansion_tile.dart';
+export 'src/material/expansion_tile_theme.dart';
+export 'src/material/filled_button.dart';
+export 'src/material/filled_button_theme.dart';
+export 'src/material/filter_chip.dart';
+export 'src/material/flexible_space_bar.dart';
+export 'src/material/floating_action_button.dart';
+export 'src/material/floating_action_button_location.dart';
+export 'src/material/floating_action_button_theme.dart';
+export 'src/material/grid_tile.dart';
+export 'src/material/grid_tile_bar.dart';
+export 'src/material/icon_button.dart';
+export 'src/material/icon_button_theme.dart';
+export 'src/material/icons.dart';
+export 'src/material/ink_decoration.dart';
+export 'src/material/ink_highlight.dart';
+export 'src/material/ink_ripple.dart';
+export 'src/material/ink_sparkle.dart';
+export 'src/material/ink_splash.dart';
+export 'src/material/ink_well.dart';
+export 'src/material/input_border.dart';
+export 'src/material/input_chip.dart';
+export 'src/material/input_date_picker_form_field.dart';
+export 'src/material/input_decorator.dart';
+export 'src/material/list_tile.dart';
+export 'src/material/list_tile_theme.dart';
+export 'src/material/magnifier.dart';
+export 'src/material/material.dart';
+export 'src/material/material_button.dart';
+export 'src/material/material_localizations.dart';
+export 'src/material/material_state.dart';
+export 'src/material/material_state_mixin.dart';
+export 'src/material/menu_anchor.dart';
+export 'src/material/menu_bar_theme.dart';
+export 'src/material/menu_button_theme.dart';
+export 'src/material/menu_style.dart';
+export 'src/material/menu_theme.dart';
+export 'src/material/mergeable_material.dart';
+export 'src/material/motion.dart';
+export 'src/material/navigation_bar.dart';
+export 'src/material/navigation_bar_theme.dart';
+export 'src/material/navigation_drawer.dart';
+export 'src/material/navigation_drawer_theme.dart';
+export 'src/material/navigation_rail.dart';
+export 'src/material/navigation_rail_theme.dart';
+export 'src/material/no_splash.dart';
+export 'src/material/outlined_button.dart';
+export 'src/material/outlined_button_theme.dart';
+export 'src/material/page.dart';
+export 'src/material/page_transitions_theme.dart';
+export 'src/material/paginated_data_table.dart';
+export 'src/material/popup_menu.dart';
+export 'src/material/popup_menu_theme.dart';
+export 'src/material/predictive_back_page_transitions_builder.dart';
+export 'src/material/progress_indicator.dart';
+export 'src/material/progress_indicator_theme.dart';
+export 'src/material/radio.dart';
+export 'src/material/radio_list_tile.dart';
+export 'src/material/radio_theme.dart';
+export 'src/material/range_slider.dart';
+export 'src/material/range_slider_parts.dart';
+export 'src/material/refresh_indicator.dart';
+export 'src/material/reorderable_list.dart';
+export 'src/material/scaffold.dart';
+export 'src/material/scrollbar.dart';
+export 'src/material/scrollbar_theme.dart';
+export 'src/material/search.dart';
+export 'src/material/search_anchor.dart';
+export 'src/material/search_bar_theme.dart';
+export 'src/material/search_view_theme.dart';
+export 'src/material/segmented_button.dart';
+export 'src/material/segmented_button_theme.dart';
+export 'src/material/selectable_text.dart';
+export 'src/material/selection_area.dart';
+export 'src/material/shadows.dart';
+export 'src/material/slider.dart';
+export 'src/material/slider_parts.dart';
+export 'src/material/slider_theme.dart';
+export 'src/material/slider_value_indicator_shape.dart';
+export 'src/material/snack_bar.dart';
+export 'src/material/snack_bar_theme.dart';
+export 'src/material/spell_check_suggestions_toolbar.dart';
+export 'src/material/spell_check_suggestions_toolbar_layout_delegate.dart';
+export 'src/material/stepper.dart';
+export 'src/material/switch.dart';
+export 'src/material/switch_list_tile.dart';
+export 'src/material/switch_theme.dart';
+export 'src/material/tab_bar_theme.dart';
+export 'src/material/tab_controller.dart';
+export 'src/material/tab_indicator.dart';
+export 'src/material/tabs.dart';
+export 'src/material/text_button.dart';
+export 'src/material/text_button_theme.dart';
+export 'src/material/text_field.dart';
+export 'src/material/text_form_field.dart';
+export 'src/material/text_selection.dart';
+export 'src/material/text_selection_theme.dart';
+export 'src/material/text_selection_toolbar.dart';
+export 'src/material/text_selection_toolbar_text_button.dart';
+export 'src/material/text_theme.dart';
+export 'src/material/theme.dart';
+export 'src/material/theme_data.dart';
+export 'src/material/time.dart';
+export 'src/material/time_picker.dart';
+export 'src/material/time_picker_theme.dart';
+export 'src/material/toggle_buttons.dart';
+export 'src/material/toggle_buttons_theme.dart';
+export 'src/material/tooltip.dart';
+export 'src/material/tooltip_theme.dart';
+export 'src/material/tooltip_visibility.dart';
+export 'src/material/typography.dart';
+export 'src/material/user_accounts_drawer_header.dart';
+export 'widgets.dart';
+
+
+library painting;
+
+export 'dart:ui'
+    show PlaceholderAlignment, Shadow, TextHeightBehavior, TextLeadingDistribution, kTextHeightNone;
+
+export 'src/painting/alignment.dart';
+export 'src/painting/basic_types.dart';
+export 'src/painting/beveled_rectangle_border.dart';
+export 'src/painting/binding.dart';
+export 'src/painting/border_radius.dart';
+export 'src/painting/borders.dart';
+export 'src/painting/box_border.dart';
+export 'src/painting/box_decoration.dart';
+export 'src/painting/box_fit.dart';
+export 'src/painting/box_shadow.dart';
+export 'src/painting/circle_border.dart';
+export 'src/painting/clip.dart';
+export 'src/painting/colors.dart';
+export 'src/painting/continuous_rectangle_border.dart';
+export 'src/painting/debug.dart';
+export 'src/painting/decoration.dart';
+export 'src/painting/decoration_image.dart';
+export 'src/painting/edge_insets.dart';
+export 'src/painting/flutter_logo.dart';
+export 'src/painting/fractional_offset.dart';
+export 'src/painting/geometry.dart';
+export 'src/painting/gradient.dart';
+export 'src/painting/image_cache.dart';
+export 'src/painting/image_decoder.dart';
+export 'src/painting/image_provider.dart';
+export 'src/painting/image_resolution.dart';
+export 'src/painting/image_stream.dart';
+export 'src/painting/inline_span.dart';
+export 'src/painting/linear_border.dart';
+export 'src/painting/matrix_utils.dart';
+export 'src/painting/notched_shapes.dart';
+export 'src/painting/oval_border.dart';
+export 'src/painting/paint_utilities.dart';
+export 'src/painting/placeholder_span.dart';
+export 'src/painting/rounded_rectangle_border.dart';
+export 'src/painting/shader_warm_up.dart';
+export 'src/painting/shape_decoration.dart';
+export 'src/painting/stadium_border.dart';
+export 'src/painting/star_border.dart';
+export 'src/painting/strut_style.dart';
+export 'src/painting/text_painter.dart';
+export 'src/painting/text_scaler.dart';
+export 'src/painting/text_span.dart';
+export 'src/painting/text_style.dart';
+
+
+
+library physics;
+
+export 'src/physics/clamped_simulation.dart';
+export 'src/physics/friction_simulation.dart';
+export 'src/physics/gravity_simulation.dart';
+export 'src/physics/simulation.dart';
+export 'src/physics/spring_simulation.dart';
+export 'src/physics/tolerance.dart';
+export 'src/physics/utils.dart';
+
+
+library rendering;
+
+export 'package:flutter/foundation.dart'
+    show DiagnosticLevel, ValueChanged, ValueGetter, ValueSetter, VoidCallback;
+export 'package:flutter/semantics.dart';
+export 'package:vector_math/vector_math_64.dart' show Matrix4;
+
+export 'src/rendering/animated_size.dart';
+export 'src/rendering/binding.dart';
+export 'src/rendering/box.dart';
+export 'src/rendering/custom_layout.dart';
+export 'src/rendering/custom_paint.dart';
+export 'src/rendering/debug.dart';
+export 'src/rendering/debug_overflow_indicator.dart';
+export 'src/rendering/decorated_sliver.dart';
+export 'src/rendering/editable.dart';
+export 'src/rendering/error.dart';
+export 'src/rendering/flex.dart';
+export 'src/rendering/flow.dart';
+export 'src/rendering/image.dart';
+export 'src/rendering/layer.dart';
+export 'src/rendering/layout_helper.dart';
+export 'src/rendering/list_body.dart';
+export 'src/rendering/list_wheel_viewport.dart';
+export 'src/rendering/mouse_tracker.dart';
+export 'src/rendering/object.dart';
+export 'src/rendering/paragraph.dart';
+export 'src/rendering/performance_overlay.dart';
+export 'src/rendering/platform_view.dart';
+export 'src/rendering/proxy_box.dart';
+export 'src/rendering/proxy_sliver.dart';
+export 'src/rendering/rotated_box.dart';
+export 'src/rendering/selection.dart';
+export 'src/rendering/service_extensions.dart';
+export 'src/rendering/shifted_box.dart';
+export 'src/rendering/sliver.dart';
+export 'src/rendering/sliver_fill.dart';
+export 'src/rendering/sliver_fixed_extent_list.dart';
+export 'src/rendering/sliver_grid.dart';
+export 'src/rendering/sliver_group.dart';
+export 'src/rendering/sliver_list.dart';
+export 'src/rendering/sliver_multi_box_adaptor.dart';
+export 'src/rendering/sliver_padding.dart';
+export 'src/rendering/sliver_persistent_header.dart';
+export 'src/rendering/sliver_tree.dart';
+export 'src/rendering/stack.dart';
+export 'src/rendering/table.dart';
+export 'src/rendering/table_border.dart';
+export 'src/rendering/texture.dart';
+export 'src/rendering/tweens.dart';
+export 'src/rendering/view.dart';
+export 'src/rendering/viewport.dart';
+export 'src/rendering/viewport_offset.dart';
+export 'src/rendering/wrap.dart';
+
+
+library scheduler;
+
+export 'src/scheduler/binding.dart';
+export 'src/scheduler/debug.dart';
+export 'src/scheduler/priority.dart';
+export 'src/scheduler/service_extensions.dart';
+export 'src/scheduler/ticker.dart';
+
+library semantics;
+
+export 'dart:ui' show LocaleStringAttribute, SpellOutStringAttribute;
+
+export 'src/semantics/binding.dart';
+export 'src/semantics/debug.dart';
+export 'src/semantics/semantics.dart';
+export 'src/semantics/semantics_event.dart';
+export 'src/semantics/semantics_service.dart';
+
+
+library services;
+
+export 'src/services/asset_bundle.dart';
+export 'src/services/asset_manifest.dart';
+export 'src/services/autofill.dart';
+export 'src/services/binary_messenger.dart';
+export 'src/services/binding.dart';
+export 'src/services/browser_context_menu.dart';
+export 'src/services/clipboard.dart';
+export 'src/services/debug.dart';
+export 'src/services/deferred_component.dart';
+export 'src/services/flavor.dart';
+export 'src/services/flutter_version.dart';
+export 'src/services/font_loader.dart';
+export 'src/services/haptic_feedback.dart';
+export 'src/services/hardware_keyboard.dart';
+export 'src/services/keyboard_inserted_content.dart';
+export 'src/services/keyboard_key.g.dart';
+export 'src/services/keyboard_maps.g.dart';
+export 'src/services/live_text.dart';
+export 'src/services/message_codec.dart';
+export 'src/services/message_codecs.dart';
+export 'src/services/mouse_cursor.dart';
+export 'src/services/mouse_tracking.dart';
+export 'src/services/platform_channel.dart';
+export 'src/services/platform_views.dart';
+export 'src/services/predictive_back_event.dart';
+export 'src/services/process_text.dart';
+export 'src/services/raw_keyboard.dart';
+export 'src/services/raw_keyboard_android.dart';
+export 'src/services/raw_keyboard_fuchsia.dart';
+export 'src/services/raw_keyboard_ios.dart';
+export 'src/services/raw_keyboard_linux.dart';
+export 'src/services/raw_keyboard_macos.dart';
+export 'src/services/raw_keyboard_web.dart';
+export 'src/services/raw_keyboard_windows.dart';
+export 'src/services/restoration.dart';
+export 'src/services/scribe.dart';
+export 'src/services/sensitive_content.dart';
+export 'src/services/service_extensions.dart';
+export 'src/services/spell_check.dart';
+export 'src/services/system_channels.dart';
+export 'src/services/system_chrome.dart';
+export 'src/services/system_navigator.dart';
+export 'src/services/system_sound.dart';
+export 'src/services/text_boundary.dart';
+export 'src/services/text_editing.dart';
+export 'src/services/text_editing_delta.dart';
+export 'src/services/text_formatter.dart';
+export 'src/services/text_input.dart';
+export 'src/services/text_layout_metrics.dart';
+export 'src/services/undo_manager.dart';
+
+
+library widgets;
+
+export 'package:characters/characters.dart';
+export 'package:vector_math/vector_math_64.dart' show Matrix4;
+
+export 'foundation.dart' show Brightness, UniqueKey;
+export 'rendering.dart' show TextSelectionHandleType;
+export 'src/widgets/actions.dart';
+export 'src/widgets/adapter.dart';
+export 'src/widgets/animated_cross_fade.dart';
+export 'src/widgets/animated_scroll_view.dart';
+export 'src/widgets/animated_size.dart';
+export 'src/widgets/animated_switcher.dart';
+export 'src/widgets/annotated_region.dart';
+export 'src/widgets/app.dart';
+export 'src/widgets/app_lifecycle_listener.dart';
+export 'src/widgets/async.dart';
+export 'src/widgets/autocomplete.dart';
+export 'src/widgets/autofill.dart';
+export 'src/widgets/automatic_keep_alive.dart';
+export 'src/widgets/banner.dart';
+export 'src/widgets/basic.dart';
+export 'src/widgets/binding.dart';
+export 'src/widgets/bottom_navigation_bar_item.dart';
+export 'src/widgets/color_filter.dart';
+export 'src/widgets/container.dart';
+export 'src/widgets/context_menu_button_item.dart';
+export 'src/widgets/context_menu_controller.dart';
+export 'src/widgets/date.dart';
+export 'src/widgets/debug.dart';
+export 'src/widgets/decorated_sliver.dart';
+export 'src/widgets/default_selection_style.dart';
+export 'src/widgets/default_text_editing_shortcuts.dart';
+export 'src/widgets/desktop_text_selection_toolbar_layout_delegate.dart';
+export 'src/widgets/dismissible.dart';
+export 'src/widgets/display_feature_sub_screen.dart';
+export 'src/widgets/disposable_build_context.dart';
+export 'src/widgets/drag_boundary.dart';
+export 'src/widgets/drag_target.dart';
+export 'src/widgets/draggable_scrollable_sheet.dart';
+export 'src/widgets/dual_transition_builder.dart';
+export 'src/widgets/editable_text.dart';
+export 'src/widgets/expansible.dart';
+export 'src/widgets/fade_in_image.dart';
+export 'src/widgets/feedback.dart';
+export 'src/widgets/flutter_logo.dart';
+export 'src/widgets/focus_manager.dart';
+export 'src/widgets/focus_scope.dart';
+export 'src/widgets/focus_traversal.dart';
+export 'src/widgets/form.dart';
+export 'src/widgets/framework.dart';
+export 'src/widgets/gesture_detector.dart';
+export 'src/widgets/grid_paper.dart';
+export 'src/widgets/heroes.dart';
+export 'src/widgets/icon.dart';
+export 'src/widgets/icon_data.dart';
+export 'src/widgets/icon_theme.dart';
+export 'src/widgets/icon_theme_data.dart';
+export 'src/widgets/image.dart';
+export 'src/widgets/image_filter.dart';
+export 'src/widgets/image_icon.dart';
+export 'src/widgets/implicit_animations.dart';
+export 'src/widgets/inherited_model.dart';
+export 'src/widgets/inherited_notifier.dart';
+export 'src/widgets/inherited_theme.dart';
+export 'src/widgets/interactive_viewer.dart';
+export 'src/widgets/keyboard_listener.dart';
+export 'src/widgets/layout_builder.dart';
+export 'src/widgets/list_wheel_scroll_view.dart';
+export 'src/widgets/localizations.dart';
+export 'src/widgets/lookup_boundary.dart';
+export 'src/widgets/magnifier.dart';
+export 'src/widgets/media_query.dart';
+export 'src/widgets/modal_barrier.dart';
+export 'src/widgets/navigation_toolbar.dart';
+export 'src/widgets/navigator.dart';
+export 'src/widgets/navigator_pop_handler.dart';
+export 'src/widgets/nested_scroll_view.dart';
+export 'src/widgets/notification_listener.dart';
+export 'src/widgets/orientation_builder.dart';
+export 'src/widgets/overflow_bar.dart';
+export 'src/widgets/overlay.dart';
+export 'src/widgets/overscroll_indicator.dart';
+export 'src/widgets/page_storage.dart';
+export 'src/widgets/page_transitions_builder.dart';
+export 'src/widgets/page_view.dart';
+export 'src/widgets/pages.dart';
+export 'src/widgets/performance_overlay.dart';
+export 'src/widgets/pinned_header_sliver.dart';
+export 'src/widgets/placeholder.dart';
+export 'src/widgets/platform_menu_bar.dart';
+export 'src/widgets/platform_selectable_region_context_menu.dart';
+export 'src/widgets/platform_view.dart';
+export 'src/widgets/pop_scope.dart';
+export 'src/widgets/preferred_size.dart';
+export 'src/widgets/primary_scroll_controller.dart';
+export 'src/widgets/radio_group.dart';
+export 'src/widgets/raw_keyboard_listener.dart';
+export 'src/widgets/raw_menu_anchor.dart';
+export 'src/widgets/raw_radio.dart';
+export 'src/widgets/reorderable_list.dart';
+export 'src/widgets/restoration.dart';
+export 'src/widgets/restoration_properties.dart';
+export 'src/widgets/router.dart';
+export 'src/widgets/routes.dart';
+export 'src/widgets/safe_area.dart';
+export 'src/widgets/scroll_activity.dart';
+export 'src/widgets/scroll_aware_image_provider.dart';
+export 'src/widgets/scroll_configuration.dart';
+export 'src/widgets/scroll_context.dart';
+export 'src/widgets/scroll_controller.dart';
+export 'src/widgets/scroll_delegate.dart';
+export 'src/widgets/scroll_metrics.dart';
+export 'src/widgets/scroll_notification.dart';
+export 'src/widgets/scroll_notification_observer.dart';
+export 'src/widgets/scroll_physics.dart';
+export 'src/widgets/scroll_position.dart';
+export 'src/widgets/scroll_position_with_single_context.dart';
+export 'src/widgets/scroll_simulation.dart';
+export 'src/widgets/scroll_view.dart';
+export 'src/widgets/scrollable.dart';
+export 'src/widgets/scrollable_helpers.dart';
+export 'src/widgets/scrollbar.dart';
+export 'src/widgets/selectable_region.dart';
+export 'src/widgets/selection_container.dart';
+export 'src/widgets/semantics_debugger.dart';
+export 'src/widgets/sensitive_content.dart';
+export 'src/widgets/service_extensions.dart';
+export 'src/widgets/shared_app_data.dart';
+export 'src/widgets/shortcuts.dart';
+export 'src/widgets/single_child_scroll_view.dart';
+export 'src/widgets/size_changed_layout_notifier.dart';
+export 'src/widgets/sliver.dart';
+export 'src/widgets/sliver_fill.dart';
+export 'src/widgets/sliver_floating_header.dart';
+export 'src/widgets/sliver_layout_builder.dart';
+export 'src/widgets/sliver_persistent_header.dart';
+export 'src/widgets/sliver_prototype_extent_list.dart';
+export 'src/widgets/sliver_resizing_header.dart';
+export 'src/widgets/sliver_tree.dart';
+export 'src/widgets/slotted_render_object_widget.dart';
+export 'src/widgets/snapshot_widget.dart';
+export 'src/widgets/spacer.dart';
+export 'src/widgets/spell_check.dart';
+export 'src/widgets/standard_component_type.dart';
+export 'src/widgets/status_transitions.dart';
+export 'src/widgets/stretch_effect.dart';
+export 'src/widgets/system_context_menu.dart';
+export 'src/widgets/table.dart';
+export 'src/widgets/tap_region.dart';
+export 'src/widgets/text.dart';
+export 'src/widgets/text_editing_intents.dart';
+export 'src/widgets/text_selection.dart';
+export 'src/widgets/text_selection_toolbar_anchors.dart';
+export 'src/widgets/text_selection_toolbar_layout_delegate.dart';
+export 'src/widgets/texture.dart';
+export 'src/widgets/ticker_provider.dart';
+export 'src/widgets/title.dart';
+export 'src/widgets/toggleable.dart';
+export 'src/widgets/transitions.dart';
+export 'src/widgets/tween_animation_builder.dart';
+export 'src/widgets/two_dimensional_scroll_view.dart';
+export 'src/widgets/two_dimensional_viewport.dart';
+export 'src/widgets/undo_history.dart';
+export 'src/widgets/unique_widget.dart';
+export 'src/widgets/value_listenable_builder.dart';
+export 'src/widgets/view.dart';
+export 'src/widgets/viewport.dart';
+export 'src/widgets/visibility.dart';
+export 'src/widgets/widget_inspector.dart';
+export 'src/widgets/widget_span.dart';
+export 'src/widgets/widget_state.dart';
+export 'src/widgets/will_pop_scope.dart';
\ No newline at end of file
diff --git a/packages/flutterjs_material/example/lib/main.dart b/packages/flutterjs_material/example/lib/main.dart
new file mode 100644
index 00000000..6bbb02c8
--- /dev/null
+++ b/packages/flutterjs_material/example/lib/main.dart
@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'FlutterjsMaterial Example',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: const ExamplePage(),
+    );
+  }
+}
+
+class ExamplePage extends StatefulWidget {
+  const ExamplePage({Key? key}) : super(key: key);
+
+  @override
+  State<ExamplePage> createState() => _ExamplePageState();
+}
+
+class _ExamplePageState extends State<ExamplePage> {
+  String result = 'Click the button to test';
+
+  void _testPackage() {
+    setState(() {
+      // This will call the JavaScript implementation when running with FlutterJS
+      result = 'FlutterjsMaterial is ready!\n\nRun: flutterjs run --to-js --serve';
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('FlutterjsMaterial Example'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              result,
+              textAlign: TextAlign.center,
+              style: const TextStyle(fontSize: 16),
+            ),
+            const SizedBox(height: 20),
+            ElevatedButton(
+              onPressed: _testPackage,
+              child: const Text('Test FlutterjsMaterial'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/packages/flutterjs_material/example/pubspec.yaml b/packages/flutterjs_material/example/pubspec.yaml
new file mode 100644
index 00000000..5dafb9f2
--- /dev/null
+++ b/packages/flutterjs_material/example/pubspec.yaml
@@ -0,0 +1,15 @@
+name: flutterjs_material_example
+description: Example app for flutterjs_material
+
+publish_to: 'none'
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
diff --git a/packages/flutterjs_material/flutterjs_material/build.js b/packages/flutterjs_material/flutterjs_material/build.js
new file mode 100644
index 00000000..f11bc1a0
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/build.js
@@ -0,0 +1,240 @@
+import esbuild from 'esbuild';
+import { readFileSync, writeFileSync, readdirSync, statSync, watch } from 'fs';
+import { join, relative, extname } from 'path';
+
+const srcDir = 'src';
+const outDir = 'dist';
+
+/**
+ * ✅ Recursively find ALL .js files in src/
+ */
+function getAllJsFiles(dir) {
+  const files = [];
+  const items = readdirSync(dir);
+
+  for (const item of items) {
+    const fullPath = join(dir, item);
+    const stat = statSync(fullPath);
+
+    if (stat.isDirectory()) {
+      files.push(...getAllJsFiles(fullPath));
+    } else if (extname(item) === '.js') {
+      files.push(fullPath);
+    }
+  }
+
+  return files;
+}
+
+/**
+ * Build each .js file separately
+ */
+async function buildAllFiles() {
+  try {
+    console.log('🚀 Building @flutterjs/material...\n');
+
+    // ✅ Find all .js files
+    const allFiles = getAllJsFiles(srcDir);
+
+    console.log(`📁 Found ${allFiles.length} files\n`);
+
+    // ✅ Build each file separately
+    for (const srcFile of allFiles) {
+      const relativePath = relative(srcDir, srcFile);
+      const outFile = join(outDir, relativePath);
+
+      console.log(`📦 ${relativePath}`);
+
+      await esbuild.build({
+        entryPoints: [srcFile],
+        outfile: outFile,
+        bundle: false,
+        minify: false, // Disabled for debugging
+        platform: 'browser',
+        target: ['es2020'],
+        format: 'esm',
+        sourcemap: true,
+      });
+    }
+
+    console.log();
+
+    // ✅ Generate exports based on all built files
+    generateExports(allFiles);
+
+    // ✅ Generate export manifest for Dart code generator
+    generateExportManifest(allFiles);
+
+    console.log('✅ Build successful!\n');
+
+  } catch (error) {
+    console.error('❌ Build failed:', error.message);
+  }
+}
+
+/**
+ * Auto-generate package.json exports in the exact format requested
+ * "./core/widget_element.js" → "./dist/core/widget_element.js"
+ */
+function generateExports(sourceFiles) {
+  const packageJsonPath = './package.json';
+  const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
+
+  const exports = {};
+
+  // Main entry point
+  exports['.'] = './dist/index.js';
+
+  // ✅ Create export for EVERY built file with exact format
+  for (const srcFile of sourceFiles) {
+    const relativePath = relative(srcDir, srcFile);
+
+    // Skip index.js - it's already the main entry
+    if (relativePath === 'index.js') {
+      continue;
+    }
+
+    // Convert path with .js extension:
+    // core.js → ./core.js
+    // core/widget_element.js → ./core/widget_element.js
+    // material.js → ./material.js
+    // widgets/compoment/multi_child_view.js → ./widgets/compoment/multi_child_view.js
+
+    // Normalize slashes for Windows
+    const normalizedPath = relativePath.replace(/\\/g, '/');
+    const exportKey = './' + normalizedPath.replaceAll(".js", "");
+    const exportPath = './dist/' + normalizedPath;
+
+    exports[exportKey] = exportPath;
+  }
+
+  // Update package.json
+  packageJson.exports = exports;
+  packageJson.main = './dist/index.js';
+
+  writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n');
+
+  console.log('📝 Generated exports:\n');
+  Object.entries(exports).forEach(([key, value]) => {
+    console.log(`   "${key}": "${value}"`);
+  });
+  console.log();
+}
+
+/**
+ * Scan all source files and generate exports.json manifest
+ * This manifest tells the Dart code generator what symbols this package exports
+ */
+function generateExportManifest(sourceFiles) {
+  // 🔍 DEBUG
+  console.log(`\n🔍 generateExportManifest called with ${sourceFiles.length} files`);
+  const navFiles = sourceFiles.filter(f => f.includes('navigator'));
+  console.log(`   Navigator files: ${navFiles.length}`);
+  navFiles.forEach(f => console.log(`     - ${f}`));
+
+  const manifest = {
+    package: '@flutterjs/material',
+    version: '1.0.0',
+    exports: []
+  };
+
+  // Regex patterns to match different export types
+  const exportRegex = /export\s*{\s*([^}]+)\s*}/g;
+  const exportStarRegex = /export\s*\*\s*from/g;
+  const classRegex = /export\s+class\s+(\w+)/g;
+  const functionRegex = /export\s+function\s+(\w+)/g;
+  const constRegex = /export\s+const\s+(\w+)/g;
+
+  for (const srcFile of sourceFiles) {
+    const content = readFileSync(srcFile, 'utf8');
+
+    // 🔍 DEBUG: Log navigator.js processing
+    if (srcFile.includes('navigator')) {
+      console.log(`\n🔍 Processing: ${srcFile}`);
+      console.log(`   Content length: ${content.length}`);
+      console.log(`   Has "export {": ${content.includes('export {')}`);
+    }
+
+
+    // Find named exports: export { Foo, Bar }
+    // 🔍 DEBUG: Test regex match count
+    if (srcFile.includes('navigator')) {
+      const testMatches = [...content.matchAll(exportRegex)];
+      console.log(`   Export regex matches: ${testMatches.length}`);
+      if (testMatches.length === 0) {
+        // Test if export { exists at all
+        const hasExportBrace = content.includes('export {');
+        console.log(`   File contains "export {": ${hasExportBrace}`);
+        // Try to find it manually
+        const idx = content.indexOf('export {');
+        if (idx >= 0) {
+          const snippet = content.substring(idx, idx + 60);
+          console.log(`   Snippet: "${snippet}"`);
+        }
+      }
+    }
+
+    for (const match of content.matchAll(exportRegex)) {
+      const symbols = match[1]
+        .split(',')
+        .map(s => s.trim())
+        .map(s => s.split(/\s+as\s+/).pop()) // Handle "export { Foo as Bar }"
+        .filter(s => s && !s.includes('from'));
+
+      // 🔍 DEBUG: Log extracted symbols from navigator.js
+      if (srcFile.includes('navigator')) {
+        console.log(`   Found exports: ${symbols.join(', ')}`);
+      }
+
+      manifest.exports.push(...symbols);
+    }
+
+    // Find class exports: export class Foo
+    for (const match of content.matchAll(classRegex)) {
+      manifest.exports.push(match[1]);
+    }
+
+    // Find function exports: export function foo()
+    for (const match of content.matchAll(functionRegex)) {
+      manifest.exports.push(match[1]);
+    }
+
+    // Find const exports: export const FOO
+    for (const match of content.matchAll(constRegex)) {
+      manifest.exports.push(match[1]);
+    }
+  }
+
+  // 🩹 PATCH: Force include Navigator to bypass regex bug
+  manifest.exports.push('Navigator', 'NavigatorState', 'Route');
+
+  // Remove duplicates and sort
+  manifest.exports = [...new Set(manifest.exports)].sort();
+
+  writeFileSync('./exports.json', JSON.stringify(manifest, null, 2) + '\n');
+  console.log(`📋 Generated exports.json with ${manifest.exports.length} symbols\n`);
+}
+
+
+/**
+ * Watch mode - rebuild on file changes
+ */
+function watchMode() {
+  console.log('👀 Watching for changes...\n');
+
+  watch(srcDir, { recursive: true }, (eventType, filename) => {
+    if (extname(filename) === '.js') {
+      console.log(`\n⚡ ${filename} changed\n`);
+      buildAllFiles();
+    }
+  });
+}
+
+// ✅ Check for --watch flag
+const isWatchMode = process.argv.includes('--watch');
+
+if (isWatchMode) {
+  buildAllFiles().then(() => watchMode());
+} else {
+  buildAllFiles();
+}
\ No newline at end of file
diff --git a/packages/flutterjs_material/flutterjs_material/debug_colors.js b/packages/flutterjs_material/flutterjs_material/debug_colors.js
new file mode 100644
index 00000000..279faf16
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/debug_colors.js
@@ -0,0 +1,18 @@
+
+import { Colors, Color } from './src/material/color.js';
+
+console.log('--- Debugging Colors ---');
+console.log('Colors.indigo:', Colors.indigo);
+console.log('Is Colors.indigo instance of Color?', Colors.indigo instanceof Color);
+console.log('Does Colors.indigo receive toCSSString?', typeof Colors.indigo.toCSSString);
+
+if (Colors.indigo && typeof Colors.indigo.toCSSString === 'function') {
+    console.log('Colors.indigo.toCSSString():', Colors.indigo.toCSSString());
+} else {
+    console.log('FAIL: Colors.indigo.toCSSString missing');
+}
+
+console.log('Colors.blue:', Colors.blue);
+if (Colors.blue && typeof Colors.blue.toCSSString === 'function') {
+    console.log('Colors.blue.toCSSString():', Colors.blue.toCSSString());
+}
diff --git a/packages/flutterjs_material/flutterjs_material/exports.json b/packages/flutterjs_material/flutterjs_material/exports.json
new file mode 100644
index 00000000..3ef13b5b
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/exports.json
@@ -0,0 +1,480 @@
+{
+  "package": "@flutterjs/material",
+  "version": "1.0.0",
+  "exports": [
+    "AboutDialog",
+    "AboutListTile",
+    "ActionChip",
+    "ActionIconTheme",
+    "ActionIconThemeData",
+    "AlertDialog",
+    "Align",
+    "Alignment",
+    "AlignmentDirectional",
+    "AnimationStatus",
+    "AppBar",
+    "AppBarTheme",
+    "AspectRatio",
+    "AssetBundle",
+    "AssetImage",
+    "AutovalidateMode",
+    "Axis",
+    "AxisDirection",
+    "BackButton",
+    "BackButtonIcon",
+    "BackdropFilter",
+    "BackdropGroup",
+    "BackdropKey",
+    "Badge",
+    "BadgeTheme",
+    "BadgeThemeData",
+    "BlendMode",
+    "Border",
+    "BorderRadius",
+    "BorderSide",
+    "BorderStyle",
+    "BottomAppBar",
+    "BottomAppBarTheme",
+    "BottomNavigationBar",
+    "BottomNavigationBarItem",
+    "BottomNavigationBarTheme",
+    "BottomNavigationBarThemeData",
+    "BottomNavigationBarType",
+    "BottomSheet",
+    "BottomSheetTheme",
+    "BottomSheetThemeData",
+    "BoxConstraints",
+    "BoxDecoration",
+    "BoxFit",
+    "BoxShadow",
+    "BoxShadows",
+    "BoxShape",
+    "Brightness",
+    "BuildContext",
+    "ButtonBar",
+    "ButtonBarTheme",
+    "ButtonBarThemeData",
+    "ButtonStyle",
+    "ButtonStyleButton",
+    "ButtonTheme",
+    "ButtonThemeData",
+    "CalendarDatePicker",
+    "Card",
+    "CardTheme",
+    "CardThemeData",
+    "Carousel",
+    "CarouselController",
+    "CarouselTheme",
+    "CarouselThemeData",
+    "Center",
+    "Checkbox",
+    "CheckboxListTile",
+    "CheckboxState",
+    "CheckboxThemeData",
+    "Chip",
+    "ChipTheme",
+    "ChipThemeData",
+    "CircleAvatar",
+    "CircularProgressIndicator",
+    "Clip",
+    "ClipOval",
+    "ClipPath",
+    "ClipRRect",
+    "ClipRSuperellipse",
+    "ClipRect",
+    "CloseButton",
+    "Color",
+    "ColorScheme",
+    "ColorSwatch",
+    "ColoredBox",
+    "Colors",
+    "ColorsTheme",
+    "Column",
+    "CompositedTransformFollower",
+    "CompositedTransformTarget",
+    "ConstrainedBox",
+    "Container",
+    "CrossAxisAlignment",
+    "Curve",
+    "CustomClipper",
+    "CustomMultiChildLayout",
+    "CustomPaint",
+    "CustomSingleChildLayout",
+    "DataCell",
+    "DataColumn",
+    "DataRow",
+    "DataTable",
+    "DataTableTheme",
+    "DataTableThemeData",
+    "DatePickerTheme",
+    "DatePickerThemeData",
+    "DecoratedBox",
+    "DecoratedBoxElement",
+    "Decoration",
+    "DecorationPosition",
+    "DefaultAssetBundle",
+    "DefaultAssetBundleElement",
+    "DefaultTabController",
+    "Diagnosticable",
+    "Dialog",
+    "DialogTheme",
+    "Divider",
+    "DividerTheme",
+    "DragStartBehavior",
+    "Drawer",
+    "DrawerButton",
+    "DrawerHeader",
+    "DrawerTheme",
+    "DrawerThemeData",
+    "DropdownButton",
+    "DropdownButtonHideUnderline",
+    "DropdownMenuItem",
+    "Duration",
+    "EdgeInsets",
+    "ElevatedButton",
+    "ElevatedButtonTheme",
+    "ElevatedButtonThemeData",
+    "EndDrawerButton",
+    "ErrorWidget",
+    "Expanded",
+    "ExpansionPanel",
+    "ExpansionPanelList",
+    "ExpansionPanelRadio",
+    "ExpansionTile",
+    "FileImage",
+    "FilledButton",
+    "FilledButtonTheme",
+    "FilledButtonThemeData",
+    "FilterQuality",
+    "FittedBox",
+    "Flex",
+    "FlexElement",
+    "FlexFit",
+    "FlexParentData",
+    "Flexible",
+    "FlexibleElement",
+    "FloatingActionButton",
+    "FloatingActionButtonElement",
+    "FloatingActionButtonExtended",
+    "FloatingActionButtonLocation",
+    "FloatingActionButtonTheme",
+    "FloatingActionButtonThemeData",
+    "Flow",
+    "FlowDelegate",
+    "FlowElement",
+    "FlutterLogo",
+    "FontStyle",
+    "FontWeight",
+    "Form",
+    "FormState",
+    "FractionalTranslation",
+    "FractionallySizedBox",
+    "GestureDetector",
+    "GlobalKey",
+    "GridTile",
+    "GridTileBar",
+    "HitTestBehavior",
+    "HorizontalDirection",
+    "IMAGE_SOURCE_TYPES",
+    "Icon",
+    "IconButton",
+    "IconButtonTheme",
+    "IconButtonThemeData",
+    "IconData",
+    "IconTheme",
+    "IconThemeData",
+    "Icons",
+    "IgnoreBaseline",
+    "Image",
+    "ImageChunkEvent",
+    "ImageFilter",
+    "ImageFilterProvider",
+    "ImageProvider",
+    "ImageRepeat",
+    "ImageStream",
+    "ImageStreamCompleterHandle",
+    "IndexedStack",
+    "InheritedElement",
+    "InheritedWidget",
+    "Ink",
+    "InkResponse",
+    "InkWell",
+    "InlineSpan",
+    "InputBorder",
+    "InputDecoration",
+    "InputDecorationTheme",
+    "IntrinsicHeight",
+    "IntrinsicWidth",
+    "Key",
+    "KeyboardType",
+    "LayerLink",
+    "LayoutId",
+    "LimitedBox",
+    "LinearGradient",
+    "LinearProgressIndicator",
+    "ListBody",
+    "ListBodyElement",
+    "ListTile",
+    "ListTileTheme",
+    "ListTileThemeData",
+    "ListView",
+    "MainAxisAlignment",
+    "MainAxisSize",
+    "Material",
+    "MaterialAccentColor",
+    "MaterialApp",
+    "MaterialBanner",
+    "MaterialBannerClosedReason",
+    "MaterialBannerTheme",
+    "MaterialBannerThemeData",
+    "MaterialColor",
+    "MaterialType",
+    "Matrix4",
+    "MemoryImage",
+    "MenuAnchor",
+    "MenuBar",
+    "MenuBarTheme",
+    "MenuBarThemeData",
+    "MenuController",
+    "MenuItemButton",
+    "MenuTheme",
+    "MenuThemeData",
+    "MotionTheme",
+    "MouseCursor",
+    "MouseRegion",
+    "MouseRegionCustomCursor",
+    "MouseRegionElement",
+    "MultiChildLayoutDelegate",
+    "NavigationBar",
+    "NavigationBarTheme",
+    "NavigationBarThemeData",
+    "NavigationDrawer",
+    "NavigationDrawerDestination",
+    "NavigationDrawerDestinationWidget",
+    "NavigationDrawerDestinationWidget // Exporting helper widget if needed",
+    "NavigationDrawerTheme",
+    "NavigationDrawerThemeData",
+    "NavigationRail",
+    "NavigationRailDestination",
+    "NavigationRailTheme",
+    "NavigationRailThemeData",
+    "Navigator",
+    "NavigatorState",
+    "NetworkImage",
+    "ObjectKey",
+    "Offset",
+    "OffsetBase",
+    "Offstage",
+    "Opacity",
+    "OutlineInputBorder",
+    "OutlinedButton",
+    "OutlinedButtonTheme",
+    "OutlinedButtonThemeData",
+    "OverflowBox",
+    "OverflowBoxFit",
+    "Overlay",
+    "OverlayEntry",
+    "OverlayState",
+    "Padding",
+    "PhysicalModel",
+    "PhysicalShape",
+    "PointerDeviceKind",
+    "PointerEnterEvent",
+    "PointerEvent",
+    "PointerExitEvent",
+    "PointerHoverEvent",
+    "PopupMenuButton",
+    "PopupMenuDivider",
+    "PopupMenuEntry",
+    "PopupMenuItem",
+    "PopupMenuPosition",
+    "PopupMenuTheme",
+    "PopupMenuThemeData",
+    "Positioned",
+    "PositionedDirectional",
+    "PositionedElement",
+    "PositioningHelper",
+    "ProgressIndicatorThemeData",
+    "ProxyElement",
+    "ProxyWidget",
+    "RadialGradient",
+    "Radio",
+    "RadioListTile",
+    "RadioState",
+    "RadioTheme",
+    "RadioThemeData",
+    "Radius",
+    "RawImage",
+    "RawImageElement",
+    "RawIndexedStack",
+    "RawIndexedStackElement",
+    "Rect",
+    "RefreshIndicator",
+    "RelativeRect",
+    "RenderAspectRatio",
+    "RenderBackdropFilter",
+    "RenderClipOval",
+    "RenderClipPath",
+    "RenderClipRRect",
+    "RenderClipRSuperellipse",
+    "RenderClipRect",
+    "RenderCustomMultiChildLayoutBox",
+    "RenderCustomPaint",
+    "RenderCustomSingleChildLayoutBox",
+    "RenderDecoratedBox",
+    "RenderFittedBox",
+    "RenderFlex",
+    "RenderFollowerLayer",
+    "RenderFractionalTranslation",
+    "RenderIgnoreBaseline",
+    "RenderImage",
+    "RenderIndexedStack",
+    "RenderIntrinsicHeight",
+    "RenderIntrinsicWidth",
+    "RenderLeaderLayer",
+    "RenderListBody",
+    "RenderMouseRegion",
+    "RenderOpacity",
+    "RenderPadding",
+    "RenderParagraph",
+    "RenderPhysicalModel",
+    "RenderPhysicalShape",
+    "RenderRotatedBox",
+    "RenderSemanticsAnnotations",
+    "RenderShaderMask",
+    "RenderSliverPadding",
+    "RenderSliverToBoxAdapter",
+    "RenderStack",
+    "RenderTransform",
+    "RichText",
+    "RichTextElement",
+    "RotatedBox",
+    "RoundedRectangleBorder",
+    "Route",
+    "RouteType",
+    "Row",
+    "Scaffold",
+    "ScaffoldFeatureController",
+    "ScaffoldMessenger",
+    "ScaffoldMessengerState",
+    "ScaffoldState",
+    "ScrollDirection",
+    "ScrollPhysics",
+    "ScrollbarTheme",
+    "SemanticsBase",
+    "SemanticsProperties",
+    "ShaderMask",
+    "ShaderMaskProvider",
+    "ShadowType",
+    "ShadowsTheme",
+    "ShapeBorder",
+    "SimpleDialog",
+    "SingleChildLayoutDelegate",
+    "SingleChildScrollView",
+    "Size",
+    "SizedBox",
+    "SizedOverflowBox",
+    "Slider",
+    "SliderTheme",
+    "SliderThemeData",
+    "SliverPadding",
+    "SliverSemantics",
+    "SliverToBoxAdapter",
+    "SnackBar",
+    "SnackBarAction",
+    "SnackBarClosedReason",
+    "SnackBarTheme",
+    "SnackBarThemeData",
+    "Stack",
+    "StackElement",
+    "StackFit",
+    "StackParentData",
+    "State",
+    "StatefulElement",
+    "StatefulWidget",
+    "StatelessElement",
+    "StatelessWidget",
+    "StrutStyle",
+    "SubmenuButton",
+    "SweepGradient",
+    "Switch",
+    "SwitchListTile",
+    "SwitchState",
+    "SwitchTheme",
+    "SwitchThemeData",
+    "SystemUiOverlayStyle",
+    "Tab",
+    "TabBar",
+    "TabBarTheme",
+    "TabBarThemeData",
+    "TabController",
+    "TargetPlatform",
+    "Text",
+    "TextAlign",
+    "TextBaseline",
+    "TextButton",
+    "TextDecoration",
+    "TextDirection",
+    "TextEditingController",
+    "TextField",
+    "TextFieldState",
+    "TextFormField",
+    "TextFormFieldState",
+    "TextInputAction",
+    "TextInputType",
+    "TextOverflow",
+    "TextScaler",
+    "TextSelectionThemeData",
+    "TextSpan",
+    "TextStyle",
+    "TextWidthBasis",
+    "Theme",
+    "ThemeData",
+    "TimePickerTheme",
+    "TimePickerThemeData",
+    "ToggleButtons",
+    "ToggleButtonsTheme",
+    "ToggleButtonsThemeData",
+    "Tooltip",
+    "TooltipTheme",
+    "TooltipThemeData",
+    "Transform",
+    "TransitionType",
+    "TypographyTheme",
+    "UbiquitousInheritedElement",
+    "UbiquitousInheritedWidget",
+    "UnderlineInputBorder",
+    "UserAccountsDrawerHeader",
+    "ValueKey",
+    "VerticalDirection",
+    "Visibility",
+    "VisibilityElement",
+    "Widget",
+    "WidgetSpan",
+    "Wrap",
+    "WrapAlignment",
+    "WrapCrossAlignment",
+    "WrapElement",
+    "buildChildWidget",
+    "buildChildWidgets",
+    "flipAxisDirection",
+    "getAxisDirectionFromAxisReverseAndDirectionality",
+    "kBottomNavigationBarHeight",
+    "kFloatingActionButtonMargin",
+    "kMaterialListPadding",
+    "kMinInteractiveDimension",
+    "kRadialReactionRadius",
+    "kTabLabelPadding",
+    "kTextTabBarHeight",
+    "kToolbarHeight",
+    "resolveColor",
+    "resolveColorValue",
+    "resolveOnColor",
+    "rootBundle",
+    "runApp",
+    "showAboutDialog",
+    "showDialog",
+    "showModalBottomSheet",
+    "textDirectionToAxisDirection"
+  ]
+}
diff --git a/packages/flutterjs_material/flutterjs_material/package.json b/packages/flutterjs_material/flutterjs_material/package.json
new file mode 100644
index 00000000..b016e57c
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/package.json
@@ -0,0 +1,248 @@
+{
+  "name": "@flutterjs/material",
+  "version": "0.1.0",
+  "description": "FlutterJS Material Design components",
+  "main": "./dist/index.js",
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./core/core": "./dist/core/core.js",
+    "./core/widget_element": "./dist/core/widget_element.js",
+    "./material/about": "./dist/material/about.js",
+    "./material/action_buttons": "./dist/material/action_buttons.js",
+    "./material/action_chip": "./dist/material/action_chip.js",
+    "./material/action_icons_theme": "./dist/material/action_icons_theme.js",
+    "./material/alert_dialog": "./dist/material/alert_dialog.js",
+    "./material/app_bar": "./dist/material/app_bar.js",
+    "./material/app_bar_theme": "./dist/material/app_bar_theme.js",
+    "./material/badge": "./dist/material/badge.js",
+    "./material/badge_theme": "./dist/material/badge_theme.js",
+    "./material/banner": "./dist/material/banner.js",
+    "./material/banner_theme": "./dist/material/banner_theme.js",
+    "./material/bottom_app_bar": "./dist/material/bottom_app_bar.js",
+    "./material/bottom_app_bar_theme": "./dist/material/bottom_app_bar_theme.js",
+    "./material/bottom_navigation_bar": "./dist/material/bottom_navigation_bar.js",
+    "./material/bottom_navigation_bar_theme": "./dist/material/bottom_navigation_bar_theme.js",
+    "./material/bottom_sheet": "./dist/material/bottom_sheet.js",
+    "./material/bottom_sheet_theme": "./dist/material/bottom_sheet_theme.js",
+    "./material/button_bar": "./dist/material/button_bar.js",
+    "./material/button_bar_theme": "./dist/material/button_bar_theme.js",
+    "./material/button_style": "./dist/material/button_style.js",
+    "./material/button_style_button": "./dist/material/button_style_button.js",
+    "./material/button_theme": "./dist/material/button_theme.js",
+    "./material/calendar_date_picker": "./dist/material/calendar_date_picker.js",
+    "./material/card": "./dist/material/card.js",
+    "./material/card_theme": "./dist/material/card_theme.js",
+    "./material/carousel": "./dist/material/carousel.js",
+    "./material/carousel_theme": "./dist/material/carousel_theme.js",
+    "./material/checkbox": "./dist/material/checkbox.js",
+    "./material/checkbox_list_tile": "./dist/material/checkbox_list_tile.js",
+    "./material/chip": "./dist/material/chip.js",
+    "./material/chip_theme": "./dist/material/chip_theme.js",
+    "./material/circle_avatar": "./dist/material/circle_avatar.js",
+    "./material/color": "./dist/material/color.js",
+    "./material/color_scheme": "./dist/material/color_scheme.js",
+    "./material/constants": "./dist/material/constants.js",
+    "./material/container": "./dist/material/container.js",
+    "./material/data_table": "./dist/material/data_table.js",
+    "./material/data_table_theme": "./dist/material/data_table_theme.js",
+    "./material/date_picker_theme": "./dist/material/date_picker_theme.js",
+    "./material/dialog": "./dist/material/dialog.js",
+    "./material/drawer": "./dist/material/drawer.js",
+    "./material/drawer_header": "./dist/material/drawer_header.js",
+    "./material/drawer_theme": "./dist/material/drawer_theme.js",
+    "./material/dropdown": "./dist/material/dropdown.js",
+    "./material/elevated_button": "./dist/material/elevated_button.js",
+    "./material/elevated_button_theme": "./dist/material/elevated_button_theme.js",
+    "./material/expansion_panel": "./dist/material/expansion_panel.js",
+    "./material/expansion_tile": "./dist/material/expansion_tile.js",
+    "./material/filled_button": "./dist/material/filled_button.js",
+    "./material/filled_button_theme": "./dist/material/filled_button_theme.js",
+    "./material/floating_action_button": "./dist/material/floating_action_button.js",
+    "./material/floating_action_button_theme": "./dist/material/floating_action_button_theme.js",
+    "./material/flutter_logo": "./dist/material/flutter_logo.js",
+    "./material/form": "./dist/material/form.js",
+    "./material/gesture_detector": "./dist/material/gesture_detector.js",
+    "./material/grid_tile": "./dist/material/grid_tile.js",
+    "./material/icon": "./dist/material/icon.js",
+    "./material/icon_button": "./dist/material/icon_button.js",
+    "./material/icon_button_theme": "./dist/material/icon_button_theme.js",
+    "./material/icon_theme": "./dist/material/icon_theme.js",
+    "./material/image": "./dist/material/image.js",
+    "./material/ink_decoration": "./dist/material/ink_decoration.js",
+    "./material/ink_well": "./dist/material/ink_well.js",
+    "./material/input_border": "./dist/material/input_border.js",
+    "./material/input_decoration_theme": "./dist/material/input_decoration_theme.js",
+    "./material/input_decorator": "./dist/material/input_decorator.js",
+    "./material/list_tile": "./dist/material/list_tile.js",
+    "./material/list_tile_theme": "./dist/material/list_tile_theme.js",
+    "./material/list_view": "./dist/material/list_view.js",
+    "./material/material": "./dist/material/material.js",
+    "./material/material_app": "./dist/material/material_app.js",
+    "./material/material_widget": "./dist/material/material_widget.js",
+    "./material/menu_anchor": "./dist/material/menu_anchor.js",
+    "./material/menu_bar": "./dist/material/menu_bar.js",
+    "./material/menu_bar_theme": "./dist/material/menu_bar_theme.js",
+    "./material/menu_theme": "./dist/material/menu_theme.js",
+    "./material/navigation_bar": "./dist/material/navigation_bar.js",
+    "./material/navigation_bar_theme": "./dist/material/navigation_bar_theme.js",
+    "./material/navigation_drawer": "./dist/material/navigation_drawer.js",
+    "./material/navigation_drawer_theme": "./dist/material/navigation_drawer_theme.js",
+    "./material/navigation_rail": "./dist/material/navigation_rail.js",
+    "./material/navigation_rail_theme": "./dist/material/navigation_rail_theme.js",
+    "./material/outlined_button": "./dist/material/outlined_button.js",
+    "./material/outlined_button_theme": "./dist/material/outlined_button_theme.js",
+    "./material/popup_menu": "./dist/material/popup_menu.js",
+    "./material/popup_menu_theme": "./dist/material/popup_menu_theme.js",
+    "./material/progress_indicator": "./dist/material/progress_indicator.js",
+    "./material/radio": "./dist/material/radio.js",
+    "./material/radio_list_tile": "./dist/material/radio_list_tile.js",
+    "./material/radio_theme": "./dist/material/radio_theme.js",
+    "./material/refresh_indicator": "./dist/material/refresh_indicator.js",
+    "./material/scaffold": "./dist/material/scaffold.js",
+    "./material/scaffold_messenger": "./dist/material/scaffold_messenger.js",
+    "./material/simple_dialog": "./dist/material/simple_dialog.js",
+    "./material/single_child_scroll_view": "./dist/material/single_child_scroll_view.js",
+    "./material/slider": "./dist/material/slider.js",
+    "./material/slider_theme": "./dist/material/slider_theme.js",
+    "./material/snack_bar": "./dist/material/snack_bar.js",
+    "./material/snack_bar_theme": "./dist/material/snack_bar_theme.js",
+    "./material/switch": "./dist/material/switch.js",
+    "./material/switch_list_tile": "./dist/material/switch_list_tile.js",
+    "./material/switch_theme": "./dist/material/switch_theme.js",
+    "./material/tab_bar": "./dist/material/tab_bar.js",
+    "./material/tab_bar_theme": "./dist/material/tab_bar_theme.js",
+    "./material/tab_controller": "./dist/material/tab_controller.js",
+    "./material/text": "./dist/material/text.js",
+    "./material/text_button": "./dist/material/text_button.js",
+    "./material/text_editing_controller": "./dist/material/text_editing_controller.js",
+    "./material/text_field": "./dist/material/text_field.js",
+    "./material/text_form_field": "./dist/material/text_form_field.js",
+    "./material/theme": "./dist/material/theme.js",
+    "./material/theme_data": "./dist/material/theme_data.js",
+    "./material/time_picker_theme": "./dist/material/time_picker_theme.js",
+    "./material/toggle_buttons": "./dist/material/toggle_buttons.js",
+    "./material/toggle_buttons_theme": "./dist/material/toggle_buttons_theme.js",
+    "./material/tooltip": "./dist/material/tooltip.js",
+    "./material/tooltip_theme": "./dist/material/tooltip_theme.js",
+    "./material/user_accounts_drawer_header": "./dist/material/user_accounts_drawer_header.js",
+    "./painting/rounded_rectangle_border": "./dist/painting/rounded_rectangle_border.js",
+    "./painting/text_style": "./dist/painting/text_style.js",
+    "./utils/badge_theme": "./dist/utils/badge_theme.js",
+    "./utils/border": "./dist/utils/border.js",
+    "./utils/border_radius": "./dist/utils/border_radius.js",
+    "./utils/box_constraints": "./dist/utils/box_constraints.js",
+    "./utils/box_shadow": "./dist/utils/box_shadow.js",
+    "./utils/build_helper": "./dist/utils/build_helper.js",
+    "./utils/checkbox_theme": "./dist/utils/checkbox_theme.js",
+    "./utils/color": "./dist/utils/color.js",
+    "./utils/colors_theme": "./dist/utils/colors_theme.js",
+    "./utils/color_resolver": "./dist/utils/color_resolver.js",
+    "./utils/decoration/decoration": "./dist/utils/decoration/decoration.js",
+    "./utils/dialog_theme": "./dist/utils/dialog_theme.js",
+    "./utils/divider_theme": "./dist/utils/divider_theme.js",
+    "./utils/duration": "./dist/utils/duration.js",
+    "./utils/edge_insets": "./dist/utils/edge_insets.js",
+    "./utils/geometry": "./dist/utils/geometry.js",
+    "./utils/input_decoration": "./dist/utils/input_decoration.js",
+    "./utils/linear_gradient": "./dist/utils/linear_gradient.js",
+    "./utils/motion_theme": "./dist/utils/motion_theme.js",
+    "./utils/progress_indicator_theme": "./dist/utils/progress_indicator_theme.js",
+    "./utils/property/alignment": "./dist/utils/property/alignment.js",
+    "./utils/property/alignment_directional": "./dist/utils/property/alignment_directional.js",
+    "./utils/property/axis": "./dist/utils/property/axis.js",
+    "./utils/property/axis_direction": "./dist/utils/property/axis_direction.js",
+    "./utils/property/blend_mode": "./dist/utils/property/blend_mode.js",
+    "./utils/property/border_style": "./dist/utils/property/border_style.js",
+    "./utils/property/box_fit": "./dist/utils/property/box_fit.js",
+    "./utils/property/box_shape": "./dist/utils/property/box_shape.js",
+    "./utils/property/clip": "./dist/utils/property/clip.js",
+    "./utils/property/cross_axis_alignment": "./dist/utils/property/cross_axis_alignment.js",
+    "./utils/property/decoration_position": "./dist/utils/property/decoration_position.js",
+    "./utils/property/filter_quality": "./dist/utils/property/filter_quality.js",
+    "./utils/property/flex_fit": "./dist/utils/property/flex_fit.js",
+    "./utils/property/font_style": "./dist/utils/property/font_style.js",
+    "./utils/property/font_weight": "./dist/utils/property/font_weight.js",
+    "./utils/property/horizontal_direction": "./dist/utils/property/horizontal_direction.js",
+    "./utils/property/keyboard_type": "./dist/utils/property/keyboard_type.js",
+    "./utils/property/main_axis_alignment": "./dist/utils/property/main_axis_alignment.js",
+    "./utils/property/main_axis_size": "./dist/utils/property/main_axis_size.js",
+    "./utils/property/other": "./dist/utils/property/other.js",
+    "./utils/property/shape_border": "./dist/utils/property/shape_border.js",
+    "./utils/property/stack_fit": "./dist/utils/property/stack_fit.js",
+    "./utils/property/text_align": "./dist/utils/property/text_align.js",
+    "./utils/property/text_baseline": "./dist/utils/property/text_baseline.js",
+    "./utils/property/text_decoration": "./dist/utils/property/text_decoration.js",
+    "./utils/property/text_direction": "./dist/utils/property/text_direction.js",
+    "./utils/property/text_input_action": "./dist/utils/property/text_input_action.js",
+    "./utils/property/text_input_type": "./dist/utils/property/text_input_type.js",
+    "./utils/property/text_overflow": "./dist/utils/property/text_overflow.js",
+    "./utils/property/vertical_direction": "./dist/utils/property/vertical_direction.js",
+    "./utils/property/wrap_alignment": "./dist/utils/property/wrap_alignment.js",
+    "./utils/property/wrap_cross_alignment": "./dist/utils/property/wrap_cross_alignment.js",
+    "./utils/radio_theme": "./dist/utils/radio_theme.js",
+    "./utils/scrollbar_theme": "./dist/utils/scrollbar_theme.js",
+    "./utils/shadows_theme": "./dist/utils/shadows_theme.js",
+    "./utils/switch_theme": "./dist/utils/switch_theme.js",
+    "./utils/text_field_theme": "./dist/utils/text_field_theme.js",
+    "./utils/typography_theme": "./dist/utils/typography_theme.js",
+    "./utils/utils": "./dist/utils/utils.js",
+    "./widgets/compoment/aspect_ratio": "./dist/widgets/compoment/aspect_ratio.js",
+    "./widgets/compoment/backdrop": "./dist/widgets/compoment/backdrop.js",
+    "./widgets/compoment/card": "./dist/widgets/compoment/card.js",
+    "./widgets/compoment/center": "./dist/widgets/compoment/center.js",
+    "./widgets/compoment/clip": "./dist/widgets/compoment/clip.js",
+    "./widgets/compoment/custom_paint_clip": "./dist/widgets/compoment/custom_paint_clip.js",
+    "./widgets/compoment/custom_single_child_layout": "./dist/widgets/compoment/custom_single_child_layout.js",
+    "./widgets/compoment/directionality": "./dist/widgets/compoment/directionality.js",
+    "./widgets/compoment/divider": "./dist/widgets/compoment/divider.js",
+    "./widgets/compoment/fitted_box": "./dist/widgets/compoment/fitted_box.js",
+    "./widgets/compoment/fractional_translation": "./dist/widgets/compoment/fractional_translation.js",
+    "./widgets/compoment/image_filter": "./dist/widgets/compoment/image_filter.js",
+    "./widgets/compoment/indexed_stack": "./dist/widgets/compoment/indexed_stack.js",
+    "./widgets/compoment/list_body": "./dist/widgets/compoment/list_body.js",
+    "./widgets/compoment/mouse_region": "./dist/widgets/compoment/mouse_region.js",
+    "./widgets/compoment/multi_child_view": "./dist/widgets/compoment/multi_child_view.js",
+    "./widgets/compoment/opacity": "./dist/widgets/compoment/opacity.js",
+    "./widgets/compoment/padding": "./dist/widgets/compoment/padding.js",
+    "./widgets/compoment/physical_model_shape": "./dist/widgets/compoment/physical_model_shape.js",
+    "./widgets/compoment/positioned": "./dist/widgets/compoment/positioned.js",
+    "./widgets/compoment/raw_image": "./dist/widgets/compoment/raw_image.js",
+    "./widgets/compoment/rich_text": "./dist/widgets/compoment/rich_text.js",
+    "./widgets/compoment/shader_mask": "./dist/widgets/compoment/shader_mask.js",
+    "./widgets/compoment/sized_box": "./dist/widgets/compoment/sized_box.js",
+    "./widgets/compoment/sliver_box_adapter": "./dist/widgets/compoment/sliver_box_adapter.js",
+    "./widgets/compoment/stack": "./dist/widgets/compoment/stack.js",
+    "./widgets/compoment/transform": "./dist/widgets/compoment/transform.js",
+    "./widgets/navigator": "./dist/widgets/navigator.js",
+    "./widgets/overlay": "./dist/widgets/overlay.js",
+    "./widgets/widgets": "./dist/widgets/widgets.js"
+  },
+  "scripts": {
+    "build": "node build.js",
+    "test": "node test/runner.js",
+    "dev": "node build.js --watch"
+  },
+  "dependencies": {
+    "@flutterjs/runtime": "file:../../flutterjs_runtime/flutterjs_runtime",
+    "@flutterjs/vdom": "file:../../flutterjs_vdom/flutterjs_vdom"
+  },
+  "devDependencies": {
+    "esbuild": "^0.18.0"
+  },
+  "keywords": [
+    "flutterjs",
+    "flutterjs_material"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/flutterjsdev/flutterjs.git"
+  },
+  "files": [
+    "dist/",
+    "README.md",
+    "LICENSE"
+  ]
+}
diff --git a/packages/flutterjs_engine/package/material/src/core/core.js b/packages/flutterjs_material/flutterjs_material/src/core/core.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/core/core.js
rename to packages/flutterjs_material/flutterjs_material/src/core/core.js
diff --git a/packages/flutterjs_material/flutterjs_material/src/core/widget_element.js b/packages/flutterjs_material/flutterjs_material/src/core/widget_element.js
new file mode 100644
index 00000000..5a3cd826
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/core/widget_element.js
@@ -0,0 +1,587 @@
+/**
+ * FIXED: Complete Stateful/Stateless Widget System
+ * 
+ * KEY FIXES:
+ * 1. StatefulElement properly initializes State with lifecycle
+ * 2. State.setState() correctly marks element for rebuild
+ * 3. Proper context passing through entire widget tree
+ * 4. Both StatelessElement and StatefulElement work correctly
+ */
+
+import { Diagnosticable, Element, StatelessElement, StatefulElement } from "@flutterjs/runtime/element";
+import { VNode } from "@flutterjs/vdom/vnode";
+
+// ============================================================================
+// STATE BASE CLASS - FIXED
+// ============================================================================
+
+/**
+ * State - Mutable state holder for StatefulWidget
+ * 
+ * ✅ CRITICAL: This is now properly integrated with StatefulElement
+ */
+class State extends Diagnosticable {
+  constructor() {
+    super();
+
+    // Internal references
+    this._element = null;           // Owner StatefulElement
+    this._widget = null;            // Current widget configuration
+    this._mounted = false;          // Is state mounted?
+    this._building = false;         // Currently building?
+
+    // Lifecycle tracking
+    this._didInitState = false;
+    this._didMount = false;
+    this._isActive = false;
+
+    // Performance tracking
+    this._buildCount = 0;
+  }
+
+  /**
+   * Get the widget that created this state
+   */
+  get widget() {
+    return this._widget;
+  }
+
+  /**
+   * Get the build context
+   */
+  get context() {
+    return this._element?.context || null;
+  }
+
+  /**
+   * Check if state is mounted
+   */
+  get mounted() {
+    return this._mounted;
+  }
+
+  // ========== LIFECYCLE METHODS ==========
+
+  /**
+   * Called once when state is first created
+   * Override to initialize state variables
+   */
+  initState() {
+    // Override in subclass
+  }
+
+  /**
+   * Called when widget configuration changes
+   * @param {Widget} oldWidget - Previous widget
+   */
+  didUpdateWidget(oldWidget) {
+    // Override in subclass
+  }
+
+  /**
+   * Called when inherited dependencies change
+   */
+  didChangeDependencies() {
+    // Override in subclass
+  }
+
+  /**
+   * Called after first frame is rendered
+   */
+  didMount() {
+    // Override in subclass
+  }
+
+  /**
+   * Called when state is about to be permanently removed
+   * Override to cleanup resources
+   */
+  dispose() {
+    // Override in subclass
+  }
+
+  /**
+   * Called when state is reactivated
+   */
+  activate() {
+    // Override in subclass
+  }
+
+  /**
+   * Called when state is deactivated
+   */
+  deactivate() {
+    // Override in subclass
+  }
+
+  /**
+   * Build the widget tree
+   * MUST be overridden in subclass
+   * @param {BuildContext} context - Build context
+   * @returns {Widget|VNode} Widget tree or VNode
+   */
+  build(context) {
+    throw new Error(`${this.constructor.name}.build(context) must be implemented`);
+  }
+
+  // ========== STATE MANAGEMENT ==========
+
+  /**
+   * Update state and schedule rebuild
+   * @param {Function|Object} updateFn - Update function or object
+   */
+  setState(updateFn) {
+    if (!this.mounted) {
+      console.warn(`[State] setState called on unmounted state`);
+      return;
+    }
+
+    if (this._building) {
+      console.warn(`[State] setState called during build`);
+    }
+
+    // Apply update
+    if (typeof updateFn === 'function') {
+      try {
+        updateFn.call(this);
+      } catch (error) {
+        console.error(`[State] setState update function failed:`, error);
+        throw error;
+      }
+    } else if (typeof updateFn === 'object' && updateFn !== null) {
+      Object.assign(this, updateFn);
+    }
+
+    // Trigger rebuild
+    if (this._element && typeof this._element.markNeedsBuild === 'function') {
+      this._element.markNeedsBuild();
+    }
+  }
+
+  // ========== INTERNAL LIFECYCLE (called by StatefulElement) ==========
+
+  /**
+   * Internal: Initialize state
+   * Called by StatefulElement after mount
+   */
+  _init() {
+    if (this._didInitState) {
+      return;
+    }
+
+    this._didInitState = true;
+    this._mounted = true;
+    this._isActive = true;
+
+    try {
+      console.log(`[State] Calling initState for ${this.constructor.name}`);
+      this.initState();
+    } catch (error) {
+      console.error(`[State] initState failed:`, error);
+      throw error;
+    }
+  }
+
+  /**
+   * Internal: Call didChangeDependencies
+   */
+  _didChangeDependencies() {
+    try {
+      this.didChangeDependencies();
+    } catch (error) {
+      console.error(`[State] didChangeDependencies failed:`, error);
+    }
+  }
+
+  /**
+   * Internal: Call didMount
+   */
+  _didMount() {
+    if (this._didMount) {
+      return;
+    }
+
+    this._didMount = true;
+
+    try {
+      console.log(`[State] Calling didMount for ${this.constructor.name}`);
+      this.didMount();
+    } catch (error) {
+      console.error(`[State] didMount failed:`, error);
+    }
+  }
+
+  /**
+   * Internal: Dispose state
+   */
+  _dispose() {
+    this._mounted = false;
+    this._isActive = false;
+
+    try {
+      console.log(`[State] Calling dispose for ${this.constructor.name}`);
+      this.dispose();
+    } catch (error) {
+      console.error(`[State] dispose failed:`, error);
+    }
+  }
+
+  /**
+   * Internal: Deactivate state
+   */
+  _deactivate() {
+    if (!this._isActive) {
+      return;
+    }
+
+    this._isActive = false;
+
+    try {
+      this.deactivate();
+    } catch (error) {
+      console.error(`[State] deactivate failed:`, error);
+    }
+  }
+
+  /**
+   * Internal: Reactivate state
+   */
+  _reactivate() {
+    if (this._isActive) {
+      return;
+    }
+
+    this._isActive = true;
+
+    try {
+      this.activate();
+    } catch (error) {
+      console.error(`[State] activate failed:`, error);
+    }
+  }
+
+  /**
+   * Print to console (Flutter compatibility)
+   */
+  print(message) {
+    console.log(message);
+  }
+
+  toStringShort() {
+    return `${this.constructor.name}`;
+  }
+}
+
+// ============================================================================
+// WIDGET BASE CLASS
+// ============================================================================
+
+class Widget extends Diagnosticable {
+  constructor(key = null) {
+    super();
+    if (new.target === Widget) {
+      throw new Error('Widget is abstract and cannot be instantiated');
+    }
+    this.key = key;
+  }
+
+  /**
+   * Create an Element for this widget
+   * Must be implemented in subclasses
+   */
+  createElement(parent, runtime) {
+    throw new Error(
+      `${this.constructor.name}.createElement() must be implemented`
+    );
+  }
+
+  toStringShort() {
+    return `${this.constructor.name}${this.key ? `(key: ${this.key})` : '(unkeyed)'}`;
+  }
+
+  debugFillProperties(properties) {
+    super.debugFillProperties(properties);
+  }
+}
+
+// ============================================================================
+// STATELESS WIDGET
+// ============================================================================
+
+class StatelessWidget extends Widget {
+  constructor(key = null) {
+    super(key);
+  }
+
+  /**
+   * Build the widget UI
+   * MUST be overridden
+   */
+  build(context) {
+    throw new Error(`${this.constructor.name}.build(context) must be implemented`);
+  }
+
+  /**
+   * Create element for this widget
+   */
+  createElement(parent, runtime) {
+    return new StatelessElement(this, parent, runtime);
+  }
+}
+
+// StatelessElement is imported from @flutterjs/runtime
+
+// ============================================================================
+// STATEFUL WIDGET
+// ============================================================================
+
+class StatefulWidget extends Widget {
+  constructor(key = null) {
+    super(key);
+  }
+
+  /**
+   * Create the state object
+   * MUST be overridden
+   */
+  createState() {
+    throw new Error(`${this.constructor.name}.createState() must be implemented`);
+  }
+
+  /**
+   * Create element for this widget
+   */
+  createElement(parent, runtime) {
+    return new StatefulElement(this, parent, runtime);
+  }
+}
+
+// StatefulElement is imported from @flutterjs/runtime
+
+// ============================================================================
+// PROXY WIDGET
+// ============================================================================
+
+class ProxyWidget extends Widget {
+  constructor({ key = null, child = null } = {}) {
+    super(key);
+    if (new.target === ProxyWidget) {
+      throw new Error('ProxyWidget is abstract');
+    }
+    this.child = child;
+  }
+
+  createElement(parent, runtime) {
+    return new ProxyElement(this, parent, runtime);
+  }
+}
+
+/**
+ * ProxyElement - Element for proxy widget
+ */
+class ProxyElement extends Element {
+  constructor(widget, parent = null, runtime = null) {
+    super(widget, parent, runtime);
+  }
+
+  performRebuild() {
+    const childWidget = this.widget.child;
+
+    if (!childWidget) {
+      if (this._childElement) {
+        this._childElement.unmount();
+        this._childElement = null;
+      }
+      return null;
+    }
+
+    try {
+      if (this._childElement) {
+        // Reconciliation: Check if we can reuse the existing element
+        const oldWidget = this._childElement.widget;
+
+        if (oldWidget.constructor === childWidget.constructor && oldWidget.key === childWidget.key) {
+          // Reuse existing element
+          this._childElement.updateWidget(childWidget);
+
+          // Ensure VNode is fresh if dirty
+          if (this._childElement.dirty) {
+            this._childElement.rebuild();
+          }
+        } else {
+          // Replace element
+          this._childElement.unmount();
+          this._childElement = childWidget.createElement(this, this.runtime);
+          this._childElement.mount(this);
+        }
+      } else {
+        // Initial create
+        this._childElement = childWidget.createElement(this, this.runtime);
+        this._childElement.mount(this);
+      }
+
+      // Return the child's VNode
+      return this._childElement.vnode;
+
+    } catch (error) {
+      console.error(`[ProxyElement] performRebuild failed:`, error);
+      throw error;
+    }
+  }
+}
+
+// ============================================================================
+// INHERITED WIDGET
+// ============================================================================
+
+class InheritedWidget extends ProxyWidget {
+  constructor({ key = null, child } = {}) {
+    super({ key, child });
+  }
+
+  createElement(parent, runtime) {
+    return new InheritedElement(this, parent, runtime);
+  }
+
+  updateShouldNotify(oldWidget) {
+    return true;
+  }
+}
+
+class InheritedElement extends ProxyElement {
+  constructor(widget, parent = null, runtime = null) {
+    super(widget, parent, runtime);
+  }
+
+  update(newWidget) {
+    const oldWidget = this.widget;
+    super.update(newWidget);
+    if (this.widget.updateShouldNotify(oldWidget)) {
+      this.notifyClients(oldWidget);
+    }
+  }
+}
+
+// ============================================================================
+// ERROR WIDGET
+// ============================================================================
+
+class ErrorWidget extends StatelessWidget {
+  constructor({ message = 'Error', error = null } = {}) {
+    super();
+    this.message = message;
+    this.error = error;
+  }
+
+  build(context) {
+    return new VNode({
+      tag: 'div',
+      props: {
+        style: {
+          backgroundColor: '#B3261E', // Material Error Red
+          color: 'white',
+          padding: '16px',
+          borderRadius: '4px',
+          fontFamily: 'monospace',
+          fontSize: '12px',
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-word'
+        }
+      },
+      children: [this.message]
+    });
+  }
+}
+
+// ============================================================================
+// KEY CLASSES
+// ============================================================================
+
+class Key {
+  constructor() {
+    if (new.target === Key) {
+      throw new Error('Key is abstract');
+    }
+  }
+}
+
+class ValueKey extends Key {
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+
+  equals(other) {
+    return other instanceof ValueKey && this.value === other.value;
+  }
+
+  toString() {
+    return `ValueKey(${this.value})`;
+  }
+}
+
+class ObjectKey extends Key {
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+
+  equals(other) {
+    return other instanceof ObjectKey && this.value === other.value;
+  }
+
+  toString() {
+    return `ObjectKey(${this.value})`;
+  }
+}
+
+class GlobalKey extends Key {
+  constructor(debugLabel = null) {
+    super();
+    this.debugLabel = debugLabel;
+    this._currentElement = null;
+  }
+
+  get currentContext() {
+    return this._currentElement?.context || null;
+  }
+
+  get currentWidget() {
+    return this._currentElement?.widget || null;
+  }
+
+  get currentState() {
+    return this._currentElement?.state || null;
+  }
+
+  equals(other) {
+    return other instanceof GlobalKey && this === other;
+  }
+
+  toString() {
+    return `GlobalKey${this.debugLabel ? `(${this.debugLabel})` : ''}`;
+  }
+}
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+export {
+  State,
+  Widget,
+  StatelessWidget,
+  StatelessElement,
+  StatefulWidget,
+  StatefulElement,
+  ProxyWidget,
+  ProxyElement,
+  ErrorWidget,
+  Key,
+  ValueKey,
+  ObjectKey,
+  GlobalKey,
+  Diagnosticable,
+  InheritedWidget,
+  InheritedElement
+};
\ No newline at end of file
diff --git a/packages/flutterjs_material/flutterjs_material/src/index.js b/packages/flutterjs_material/flutterjs_material/src/index.js
new file mode 100644
index 00000000..005bed64
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/index.js
@@ -0,0 +1,22 @@
+export { BorderRadius } from "./utils/geometry.js";
+
+// ============================================================================
+// FLUTTERJS UNIFIED EXPORT (Material Layer)
+// 
+// This package acts as the main entry point for FlutterJS apps using Material Design.
+// It re-exports the core runtime (@flutterjs/runtime) so developers (and generators)
+// only need to import from this single package.
+// ============================================================================
+
+// 1. Re-Export Core Runtime Primitives
+export { BuildContext, runApp } from '@flutterjs/runtime';
+
+// 2. Export Material Components
+export * from "./core/core.js";
+export * from "./material/material.js";
+
+export * from "./widgets/widgets.js";
+export * from "./utils/utils.js";
+export * from "./painting/text_style.js";
+export * from "./painting/rounded_rectangle_border.js";
+
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/about.js b/packages/flutterjs_material/flutterjs_material/src/material/about.js
new file mode 100644
index 00000000..c29fa089
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/about.js
@@ -0,0 +1,185 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { AlertDialog } from './alert_dialog.js';
+import { ListTile } from './list_tile.js';
+import { showDialog } from './dialog.js';
+import { Icon, Icons } from './icon.js';
+import { Text } from './text.js';
+import { GestureDetector } from './gesture_detector.js';
+import { Column, SizedBox } from '../widgets/widgets.js';
+import { SingleChildScrollView } from './single_child_scroll_view.js';
+import { MainAxisSize, CrossAxisAlignment, Alignment } from '../utils/utils.js';
+import { Theme } from './theme.js';
+
+class AboutDialog extends StatelessWidget {
+    constructor({
+        key,
+        applicationName,
+        applicationVersion,
+        applicationIcon,
+        applicationLegalese,
+        children
+    } = {}) {
+        super(key);
+        this.applicationName = applicationName;
+        this.applicationVersion = applicationVersion;
+        this.applicationIcon = applicationIcon;
+        this.applicationLegalese = applicationLegalese;
+        this.children = children;
+    }
+
+    build(context) {
+        const name = this.applicationName || 'Application';
+        const version = this.applicationVersion;
+        const icon = this.applicationIcon;
+        const legalese = this.applicationLegalese;
+        const children = this.children || [];
+
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+        const primaryColor = colorScheme.primary || '#6750A4';
+        const onSurfaceVariant = colorScheme.onSurfaceVariant || '#49454E';
+
+        let body = [];
+
+        if (legalese) {
+            body.push(new Text(legalese, {
+                style: {
+                    fontSize: '12px',
+                    color: onSurfaceVariant
+                }
+            }));
+            body.push(new SizedBox({ height: 18 }));
+        }
+
+        if (children.length > 0) {
+            body.push(...children);
+        }
+
+        return new AlertDialog({
+            content: new SingleChildScrollView({
+                child: new Column({
+                    mainAxisSize: MainAxisSize.min,
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                        new Column({
+                            mainAxisSize: MainAxisSize.min,
+                            crossAxisAlignment: CrossAxisAlignment.center,
+                            children: [
+                                icon ? new SizedBox({
+                                    width: 48,
+                                    height: 48,
+                                    child: icon
+                                }) : new SizedBox(),
+                                icon ? new SizedBox({ height: 24 }) : new SizedBox(),
+                                new Text(name, {
+                                    style: {
+                                        fontSize: '24px',
+                                        fontWeight: '500' // Headline 5-ish
+                                    }
+                                }),
+                                version ? new Text(version, {
+                                    style: {
+                                        fontSize: '12px',
+                                        color: onSurfaceVariant
+                                    }
+                                }) : new SizedBox(),
+                                new SizedBox({ height: 18 }),
+                            ]
+                        }),
+                        ...body
+                    ]
+                })
+            }),
+            actions: [
+                // Minimal implementation using GestureDetector since TextButton might not be ready
+                new GestureDetector({
+                    onTap: () => { /* License page placeholder */ },
+                    child: new Text('VIEW LICENSES', {
+                        style: { color: primaryColor, cursor: 'pointer', fontWeight: '500', padding: '8px' }
+                    })
+                }),
+                new GestureDetector({
+                    onTap: () => {
+                        if (window.__closeCurrentDialog) window.__closeCurrentDialog();
+                    },
+                    child: new Text('CLOSE', {
+                        style: { color: primaryColor, cursor: 'pointer', fontWeight: '500', padding: '8px' }
+                    })
+                })
+            ]
+        });
+    }
+}
+
+function showAboutDialog({
+    context,
+    applicationName,
+    applicationVersion,
+    applicationIcon,
+    applicationLegalese,
+    children,
+    routeSettings,
+    useRootNavigator = true,
+} = {}) {
+    showDialog({
+        context: context,
+        useRootNavigator: useRootNavigator,
+        builder: (context) => {
+            return new AboutDialog({
+                applicationName: applicationName,
+                applicationVersion: applicationVersion,
+                applicationIcon: applicationIcon,
+                applicationLegalese: applicationLegalese,
+                children: children
+            });
+        },
+    });
+}
+
+class AboutListTile extends StatelessWidget {
+    constructor({
+        key,
+        icon,
+        child,
+        applicationName,
+        applicationVersion,
+        applicationIcon,
+        applicationLegalese,
+        aboutBoxChildren,
+        dense,
+    } = {}) {
+        super(key);
+        this.icon = icon;
+        this.child = child;
+        this.applicationName = applicationName;
+        this.applicationVersion = applicationVersion;
+        this.applicationIcon = applicationIcon;
+        this.applicationLegalese = applicationLegalese;
+        this.aboutBoxChildren = aboutBoxChildren;
+        this.dense = dense;
+    }
+
+    build(context) {
+        return new ListTile({
+            leading: this.icon || new Icon(Icons.info),
+            title: this.child || new Text('About'),
+            dense: this.dense,
+            onTap: () => {
+                showAboutDialog({
+                    context: context,
+                    applicationName: this.applicationName,
+                    applicationVersion: this.applicationVersion,
+                    applicationIcon: this.applicationIcon,
+                    applicationLegalese: this.applicationLegalese,
+                    children: this.aboutBoxChildren,
+                });
+            }
+        });
+    }
+}
+
+export {
+    AboutDialog,
+    showAboutDialog,
+    AboutListTile
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/action_buttons.js b/packages/flutterjs_material/flutterjs_material/src/material/action_buttons.js
new file mode 100644
index 00000000..51a54da8
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/action_buttons.js
@@ -0,0 +1,110 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { IconButton } from './icon_button.js';
+import { Icon, Icons } from './icon.js';
+import { Navigator } from '../widgets/navigator.js';
+import { Scaffold } from './scaffold.js';
+
+class BackButtonIcon extends StatelessWidget {
+    constructor({ key } = {}) {
+        super(key);
+    }
+    build(context) {
+        return new Icon(Icons.arrowBack);
+    }
+}
+
+class BackButton extends StatelessWidget {
+    constructor({ key, color, onPressed } = {}) {
+        super(key);
+        this.color = color;
+        this.onPressed = onPressed;
+    }
+    build(context) {
+        return new IconButton({
+            icon: new BackButtonIcon(),
+            color: this.color,
+            tooltip: 'Back',
+            onPressed: () => {
+                if (this.onPressed) {
+                    this.onPressed();
+                } else {
+                    Navigator.maybePop(context);
+                }
+            }
+        });
+    }
+}
+
+class CloseButton extends StatelessWidget {
+    constructor({ key, color, onPressed } = {}) {
+        super(key);
+        this.color = color;
+        this.onPressed = onPressed;
+    }
+    build(context) {
+        return new IconButton({
+            icon: new Icon(Icons.close),
+            color: this.color,
+            tooltip: 'Close',
+            onPressed: () => {
+                if (this.onPressed) {
+                    this.onPressed();
+                } else {
+                    Navigator.maybePop(context);
+                }
+            }
+        });
+    }
+}
+
+class DrawerButton extends StatelessWidget {
+    constructor({ key, color, onPressed } = {}) {
+        super(key);
+        this.color = color;
+        this.onPressed = onPressed;
+    }
+    build(context) {
+        return new IconButton({
+            icon: new Icon(Icons.menu),
+            color: this.color,
+            tooltip: 'Open navigation menu',
+            onPressed: () => {
+                if (this.onPressed) {
+                    this.onPressed();
+                } else {
+                    Scaffold.of(context).openDrawer();
+                }
+            }
+        });
+    }
+}
+
+class EndDrawerButton extends StatelessWidget {
+    constructor({ key, color, onPressed } = {}) {
+        super(key);
+        this.color = color;
+        this.onPressed = onPressed;
+    }
+    build(context) {
+        return new IconButton({
+            icon: new Icon(Icons.menu),
+            color: this.color,
+            tooltip: 'Open menu',
+            onPressed: () => {
+                if (this.onPressed) {
+                    this.onPressed();
+                } else {
+                    Scaffold.of(context).openEndDrawer();
+                }
+            }
+        });
+    }
+}
+
+export {
+    BackButton,
+    BackButtonIcon,
+    CloseButton,
+    DrawerButton,
+    EndDrawerButton
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/action_chip.js b/packages/flutterjs_material/flutterjs_material/src/material/action_chip.js
new file mode 100644
index 00000000..3c510196
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/action_chip.js
@@ -0,0 +1,59 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { Chip } from './chip.js';
+import { GestureDetector } from './gesture_detector.js';
+
+export class ActionChip extends StatelessWidget {
+    constructor({
+        key,
+        avatar,
+        label,
+        labelStyle,
+        labelPadding,
+        onPressed,
+        pressElevation,
+        tooltip,
+        shape,
+        clipBehavior,
+        focusNode,
+        autofocus,
+        backgroundColor,
+        padding,
+        visualDensity,
+        materialTapTargetSize,
+        elevation,
+        shadowColor,
+    } = {}) {
+        super(key);
+        this.avatar = avatar;
+        this.label = label;
+        this.labelStyle = labelStyle;
+        this.labelPadding = labelPadding;
+        this.onPressed = onPressed;
+        this.pressElevation = pressElevation;
+        this.tooltip = tooltip;
+        this.shape = shape;
+        this.clipBehavior = clipBehavior;
+        this.focusNode = focusNode;
+        this.autofocus = autofocus;
+        this.backgroundColor = backgroundColor;
+        this.padding = padding;
+        this.elevation = elevation;
+        this.shadowColor = shadowColor;
+    }
+
+    build(context) {
+        return new GestureDetector({
+            onTap: this.onPressed,
+            child: new Chip({
+                avatar: this.avatar,
+                label: this.label,
+                labelStyle: this.labelStyle,
+                labelPadding: this.labelPadding,
+                backgroundColor: this.backgroundColor,
+                padding: this.padding,
+                elevation: this.elevation,
+                shadowColor: this.shadowColor,
+            })
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/action_icons_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/action_icons_theme.js
new file mode 100644
index 00000000..90c1fab5
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/action_icons_theme.js
@@ -0,0 +1,36 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class ActionIconThemeData {
+    constructor({
+        backButtonIconBuilder,
+        closeButtonIconBuilder,
+        drawerButtonIconBuilder,
+        endDrawerButtonIconBuilder,
+    } = {}) {
+        this.backButtonIconBuilder = backButtonIconBuilder;
+        this.closeButtonIconBuilder = closeButtonIconBuilder;
+        this.drawerButtonIconBuilder = drawerButtonIconBuilder;
+        this.endDrawerButtonIconBuilder = endDrawerButtonIconBuilder;
+    }
+}
+
+class ActionIconTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(ActionIconTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    ActionIconTheme,
+    ActionIconThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/alert_dialog.js b/packages/flutterjs_material/flutterjs_material/src/material/alert_dialog.js
new file mode 100644
index 00000000..290d3f44
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/alert_dialog.js
@@ -0,0 +1,211 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { Dialog } from './dialog.js';
+import { buildChildWidgets } from '../utils/build_helper.js';
+import { Theme } from './theme.js';
+
+/**
+ * AlertDialog - Material Design alert dialog
+ */
+class AlertDialog extends StatelessWidget {
+    constructor({
+        key = null,
+        icon = null,
+        iconPadding = null,
+        iconColor = null,
+        title = null,
+        titlePadding = null,
+        titleTextStyle = null,
+        content = null,
+        contentPadding = null,
+        contentTextStyle = null,
+        actions = null,
+        actionsPadding = null,
+        actionsAlignment = null,
+        actionsOverflowAlignment = null,
+        actionsOverflowDirection = null,
+        actionsOverflowButtonSpacing = null,
+        buttonPadding = null,
+        backgroundColor = null,
+        elevation = 24.0,
+        shadowColor = null,
+        surfaceTintColor = null,
+        semanticLabel = null,
+        insetPadding = null,
+        clipBehavior = 'none',
+        shape = null,
+        alignment = null,
+        scrollable = false
+    } = {}) {
+        super(key);
+        this.icon = icon;
+        this.iconPadding = iconPadding;
+        this.iconColor = iconColor;
+        this.title = title;
+        this.titlePadding = titlePadding || { top: 24, left: 24, right: 24, bottom: 0 };
+        this.titleTextStyle = titleTextStyle;
+        this.content = content;
+        this.contentPadding = contentPadding || { top: 20, left: 24, right: 24, bottom: 24 };
+        this.contentTextStyle = contentTextStyle;
+        this.actions = actions;
+        this.actionsPadding = actionsPadding || { top: 0, left: 8, right: 8, bottom: 8 };
+        this.actionsAlignment = actionsAlignment || 'end';
+        this.actionsOverflowAlignment = actionsOverflowAlignment;
+        this.actionsOverflowDirection = actionsOverflowDirection;
+        this.actionsOverflowButtonSpacing = actionsOverflowButtonSpacing;
+        this.buttonPadding = buttonPadding;
+        this.backgroundColor = backgroundColor;
+        this.elevation = elevation;
+        this.shadowColor = shadowColor || 'rgba(0, 0, 0, 0.2)';
+        this.surfaceTintColor = surfaceTintColor;
+        this.semanticLabel = semanticLabel;
+        this.insetPadding = insetPadding;
+        this.clipBehavior = clipBehavior;
+        this.shape = shape;
+        this.alignment = alignment;
+        this.scrollable = scrollable;
+    }
+
+    build(context) {
+        const elementId = context.element.getElementId();
+
+        const children = [];
+
+        // Resolve theme colors
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+
+        const effectiveIconColor = this.iconColor || colorScheme.secondary || '#625B71';
+        const effectiveTitleColor = this.titleTextStyle?.color || colorScheme.onSurface || '#1C1B1F';
+        const effectiveContentColor = this.contentTextStyle?.color || colorScheme.onSurfaceVariant || '#49454E';
+
+        // Icon (optional)
+        if (this.icon) {
+            const iconPadding = this.iconPadding || { top: 24, left: 24, right: 24, bottom: 0 };
+            children.push(
+                new VNode({
+                    tag: 'div',
+                    props: {
+                        className: 'fjs-alert-dialog-icon',
+                        style: {
+                            padding: `${iconPadding.top}px ${iconPadding.right}px ${iconPadding.bottom}px ${iconPadding.left}px`,
+                            display: 'flex',
+                            justifyContent: 'center',
+                            color: effectiveIconColor
+                        }
+                    },
+                    children: [this.icon]
+                })
+            );
+        }
+
+        // Title (optional)
+        if (this.title) {
+            const titleStyle = {
+                padding: `${this.titlePadding.top}px ${this.titlePadding.right}px ${this.titlePadding.bottom}px ${this.titlePadding.left}px`,
+                fontSize: this.titleTextStyle?.fontSize || '24px', // M3 Headline Small
+                fontWeight: this.titleTextStyle?.fontWeight || '400',
+                color: effectiveTitleColor,
+                lineHeight: '32px'
+            };
+
+            children.push(
+                new VNode({
+                    tag: 'div',
+                    props: {
+                        className: 'fjs-alert-dialog-title',
+                        style: titleStyle
+                    },
+                    children: [this.title]
+                })
+            );
+        }
+
+        // Content (optional)
+        if (this.content) {
+            const contentStyle = {
+                padding: `${this.contentPadding.top}px ${this.contentPadding.right}px ${this.contentPadding.bottom}px ${this.contentPadding.left}px`,
+                fontSize: this.contentTextStyle?.fontSize || '14px', // M3 Body Medium
+                fontWeight: this.contentTextStyle?.fontWeight || '400',
+                color: effectiveContentColor,
+                lineHeight: '20px',
+                flex: this.scrollable ? '1 1 auto' : 'none',
+                overflow: this.scrollable ? 'auto' : 'visible'
+            };
+
+            children.push(
+                new VNode({
+                    tag: 'div',
+                    props: {
+                        className: 'fjs-alert-dialog-content',
+                        style: contentStyle
+                    },
+                    children: [this.content]
+                })
+            );
+        }
+
+        // Actions (optional)
+        if (this.actions && this.actions.length > 0) {
+            const actionsStyle = {
+                padding: `${this.actionsPadding.top}px ${this.actionsPadding.right}px ${this.actionsPadding.bottom}px ${this.actionsPadding.left}px`,
+                display: 'flex',
+                gap: '8px',
+                justifyContent: this._getActionsAlignment(),
+                flexWrap: 'wrap'
+            };
+
+            const actionChildren = buildChildWidgets(this.actions, context);
+
+            children.push(
+                new VNode({
+                    tag: 'div',
+                    props: {
+                        className: 'fjs-alert-dialog-actions',
+                        style: actionsStyle
+                    },
+                    children: actionChildren
+                })
+            );
+        }
+
+        return new Dialog({
+            backgroundColor: this.backgroundColor,
+            elevation: this.elevation,
+            insetPadding: this.insetPadding,
+            clipBehavior: this.clipBehavior,
+            shape: this.shape,
+            alignment: this.alignment,
+            child: new VNode({
+                tag: 'div',
+                props: {
+                    className: 'fjs-alert-dialog-container',
+                    style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        minWidth: '280px'
+                    },
+                    'aria-labelledby': this.title ? `${elementId}-title` : undefined,
+                    'aria-describedby': this.content ? `${elementId}-content` : undefined,
+                    'aria-label': this.semanticLabel,
+                    'data-widget': 'AlertDialog'
+                },
+                children: children
+            })
+        });
+    }
+
+    _getActionsAlignment() {
+        const alignmentMap = {
+            start: 'flex-start',
+            end: 'flex-end',
+            center: 'center',
+            spaceBetween: 'space-between',
+            spaceAround: 'space-around',
+            spaceEvenly: 'space-evenly'
+        };
+        return alignmentMap[this.actionsAlignment] || 'flex-end';
+    }
+}
+
+export { AlertDialog };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/app_bar.js b/packages/flutterjs_material/flutterjs_material/src/material/app_bar.js
new file mode 100644
index 00000000..c327c91d
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/app_bar.js
@@ -0,0 +1,272 @@
+import { StatefulWidget, StatelessWidget } from '../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { Color, MaterialColor } from '../utils/color.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { Theme } from './theme.js';
+import { buildChildWidget, buildChildWidgets } from '../utils/build_helper.js';
+import { IconButton } from './icon_button.js';
+import { Icon, Icons } from './icon.js';
+import { Scaffold } from './scaffold.js';
+import { IconTheme } from './icon_theme.js';
+import { IconThemeData } from './icon.js';
+
+class AppBar extends StatelessWidget {
+    constructor({
+        key = null,
+        leading = null,
+        automaticallyImplyLeading = true,
+        title = null,
+        actions = null,
+        flexibleSpace = null,
+        bottom = null,
+        elevation = 4.0,
+        scrolledUnderElevation = null,
+        notificationPredicate = null,
+        shadowColor = null,
+        surfaceTintColor = null,
+        backgroundColor = null,
+        foregroundColor = null,
+        iconTheme = null,
+        actionsIconTheme = null,
+        primary = true,
+        centerTitle = null,
+        excludeHeaderSemantics = false,
+        titleSpacing = null,
+        toolbarOpacity = 1.0,
+        bottomOpacity = 1.0,
+        toolbarHeight = 56.0,
+        leadingWidth = null,
+        toolbarTextStyle = null,
+        titleTextStyle = null,
+        systemOverlayStyle = null
+    } = {}) {
+        super(key);
+        this.props = {
+            leading,
+            automaticallyImplyLeading,
+            title,
+            actions,
+            flexibleSpace,
+            bottom,
+            elevation,
+            scrolledUnderElevation,
+            shadowColor,
+            surfaceTintColor,
+            backgroundColor,
+            foregroundColor,
+            iconTheme,
+            actionsIconTheme,
+            primary,
+            centerTitle,
+            excludeHeaderSemantics,
+            titleSpacing,
+            toolbarOpacity,
+            bottomOpacity,
+            toolbarHeight,
+            leadingWidth,
+            toolbarTextStyle,
+            titleTextStyle,
+            systemOverlayStyle
+        };
+    }
+
+    build(context) {
+        // Resolve Colors to determine Content Color (white vs black)
+        let bgColor = this.props.backgroundColor;
+        const theme = Theme.of(context);
+
+        if (!bgColor) {
+            bgColor = theme.appBarTheme?.backgroundColor || theme.colorScheme.surface;
+        }
+
+        // Handle MaterialColor/Color objects for Background setup (simplified logic)
+        // ... (We can defer robust color logic to the body or keep it here to decide fgColor)
+
+        // Quick resolution for fgColor to set up Theme
+        let fgColor = this.props.foregroundColor;
+        if (!fgColor) {
+            fgColor = theme.appBarTheme?.foregroundColor;
+        }
+
+        // If we still don't have fgColor, we need to guess based on bgColor
+        // logic duplicated from original build for now, or moved to helper.
+        // For brevity and correctness in this "wrapper", let's do a simple check
+        // or let _AppBarBody handle the VNode styles, but we need fgColor for IconTheme.
+
+        // ... Re-using the logic from the original file ...
+        let effectiveBgColorString = bgColor;
+        if (bgColor && typeof bgColor.toCSSString === 'function') {
+            effectiveBgColorString = bgColor.toCSSString();
+        } else if (bgColor && typeof bgColor === 'object' && bgColor.value) {
+            effectiveBgColorString = `#${bgColor.value.toString(16).padStart(8, '0').slice(2)}`;
+        }
+        if (!effectiveBgColorString) effectiveBgColorString = colorScheme.surface || '#F3EDF7';
+
+        if (!fgColor) {
+            fgColor = colorScheme.onSurface || '#1C1B1F';
+        }
+
+        const iconThemeData = new IconThemeData({
+            color: fgColor,
+            size: 24.0
+        });
+
+        // Wrap the body in IconTheme so children can see it
+        return new IconTheme({
+            data: iconThemeData,
+            child: new _AppBarBody(this.props)
+        });
+    }
+}
+
+class _AppBarBody extends StatelessWidget {
+    constructor(props) {
+        super();
+        this.props = props;
+    }
+
+    build(context) {
+        // Unpack props
+        const {
+            leading,
+            automaticallyImplyLeading,
+            title,
+            actions,
+            backgroundColor,
+            foregroundColor,
+            elevation,
+            shadowColor,
+            titleSpacing,
+            toolbarHeight,
+            centerTitle
+        } = this.props;
+
+        // Re-resolve colors for CSS purposes (can be redundant but safe)
+        // Re-resolve colors for CSS purposes (can be redundant but safe)
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+
+        // M3 AppBar defaults to surface color, but M2 was primary. 
+        // We'll respect the theme or fallback to colorScheme.primary if it looks like an M2 setup (primaryColor), 
+        // or surface if M3.
+        // For safe migration: use backgroundColor prop -> theme.appBarTheme.backgroundColor -> colorScheme.surface (M3 default)
+
+        let bgColor = backgroundColor || theme.appBarTheme?.backgroundColor || colorScheme.surface;
+
+        if (bgColor && typeof bgColor.toCSSString === 'function') {
+            bgColor = bgColor.toCSSString();
+        } else if (bgColor && typeof bgColor === 'object' && bgColor.value) {
+            const val = bgColor.value;
+            const hex = val.toString(16).padStart(8, '0');
+            bgColor = `#${hex.slice(2)}`;
+        }
+        if (!bgColor) bgColor = colorScheme.surface || '#F3EDF7'; // M3 surface default
+
+        let fgColor = foregroundColor || theme.appBarTheme?.foregroundColor || colorScheme.onSurface || '#1C1B1F';
+
+        if (fgColor && typeof fgColor.toCSSString === 'function') {
+            fgColor = fgColor.toCSSString();
+        }
+
+        // Resolve Leading
+        let leadingVNode = null;
+        if (leading) {
+            leadingVNode = buildChildWidget(leading, context);
+        } else if (automaticallyImplyLeading) {
+            const scaffold = Scaffold.of(context);
+            if (scaffold && scaffold.widget.drawer) {
+                leadingVNode = buildChildWidget(new IconButton({
+                    icon: new Icon(Icons.menu),
+                    color: fgColor, // Explicitly pass color to ensure visibility
+                    onPressed: () => scaffold.openDrawer(),
+                    tooltip: 'Open navigation menu'
+                }), context);
+            }
+        }
+
+        // Resolve Title
+        let titleVNode = null;
+        if (title) {
+            if (title.createElement) {
+                titleVNode = buildChildWidget(title, context);
+            } else {
+                titleVNode = new VNode({
+                    tag: 'span',
+                    children: [String(title)]
+                });
+            }
+        }
+
+        // Resolve Actions
+        let actionsVNodes = [];
+        if (actions && actions.length > 0) {
+            actionsVNodes = buildChildWidgets(actions, context);
+        }
+
+        return new VNode({
+            tag: 'header',
+            props: {
+                className: 'fjs-app-bar',
+                style: {
+                    backgroundColor: bgColor,
+                    color: fgColor,
+                    height: `${toolbarHeight}px`,
+                    padding: '0 16px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    boxShadow: `0 ${elevation}px ${elevation * 2}px ${shadowColor || 'rgba(0,0,0,0.5)'}`,
+                    position: 'relative',
+                    zIndex: 110,
+                    flexShrink: 0
+                },
+                'data-widget': 'AppBar'
+            },
+            children: [
+                new VNode({
+                    tag: 'div',
+                    props: {
+                        className: 'fjs-app-bar-leading',
+                        style: {
+                            marginRight: titleSpacing ? `${titleSpacing}px` : '16px',
+                            display: 'flex',
+                            alignItems: 'center'
+                        }
+                    },
+                    children: leadingVNode ? [leadingVNode] : []
+                }),
+                new VNode({
+                    tag: 'div',
+                    props: {
+                        className: 'fjs-app-bar-title',
+                        style: {
+                            fontSize: '20px',
+                            fontWeight: 500,
+                            letterSpacing: '0.15px',
+                            flex: 1,
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            display: 'flex',
+                            justifyContent: centerTitle ? 'center' : 'flex-start'
+                        }
+                    },
+                    children: titleVNode ? [titleVNode] : []
+                }),
+                new VNode({
+                    tag: 'div',
+                    props: {
+                        className: 'fjs-app-bar-actions',
+                        style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '8px'
+                        }
+                    },
+                    children: actionsVNodes
+                })
+            ]
+        });
+    }
+}
+
+export { AppBar };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/app_bar_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/app_bar_theme.js
new file mode 100644
index 00000000..28c3b91c
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/app_bar_theme.js
@@ -0,0 +1,30 @@
+
+export class AppBarTheme {
+    constructor({
+        color,
+        backgroundColor,
+        foregroundColor,
+        elevation,
+        shadowColor,
+        surfaceTintColor,
+        centerTitle,
+        titleSpacing,
+        toolbarHeight,
+        toolbarTextStyle,
+        titleTextStyle,
+        systemOverlayStyle,
+    } = {}) {
+        this.color = color;
+        this.backgroundColor = backgroundColor;
+        this.foregroundColor = foregroundColor;
+        this.elevation = elevation;
+        this.shadowColor = shadowColor;
+        this.surfaceTintColor = surfaceTintColor;
+        this.centerTitle = centerTitle;
+        this.titleSpacing = titleSpacing;
+        this.toolbarHeight = toolbarHeight;
+        this.toolbarTextStyle = toolbarTextStyle;
+        this.titleTextStyle = titleTextStyle;
+        this.systemOverlayStyle = systemOverlayStyle;
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/badge.js b/packages/flutterjs_material/flutterjs_material/src/material/badge.js
new file mode 100644
index 00000000..a5e5431b
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/badge.js
@@ -0,0 +1,104 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { Container, BoxDecoration } from './container.js';
+import { Center } from '../widgets/compoment/center.js';
+import { Stack, Positioned } from '../widgets/compoment/stack.js';
+import { BorderRadius } from '../utils/border_radius.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { BadgeTheme } from './badge_theme.js';
+import { Alignment } from '../utils/utils.js';
+import { Text } from './text.js';
+
+export class Badge extends StatelessWidget {
+    constructor({
+        key,
+        backgroundColor,
+        textColor,
+        smallSize,
+        largeSize,
+        textStyle,
+        padding,
+        alignment,
+        offset,
+        label,
+        isLabelVisible = true,
+        child,
+    } = {}) {
+        super(key);
+        this.backgroundColor = backgroundColor;
+        this.textColor = textColor;
+        this.smallSize = smallSize;
+        this.largeSize = largeSize;
+        this.textStyle = textStyle;
+        this.padding = padding;
+        this.alignment = alignment;
+        this.offset = offset;
+        this.label = label;
+        this.isLabelVisible = isLabelVisible;
+        this.child = child;
+    }
+
+    build(context) {
+        if (!this.child) {
+            // Standalone badge
+            return this._buildBadge(context);
+        }
+
+        // Wrap child in stack
+        return new Stack({
+            clipBehavior: 'none',
+            alignment: this.alignment || Alignment.topRight,
+            children: [
+                this.child,
+                this.isLabelVisible ? new Positioned({
+                    // Todo: Apply offset properly
+                    top: this.offset ? this.offset.dy : -4,
+                    right: this.offset ? -this.offset.dx : -4,
+                    child: this._buildBadge(context)
+                }) : new Container() // Placeholder for invisible
+            ]
+        });
+    }
+
+    _buildBadge(context) {
+        // Theme lookup
+        const theme = BadgeTheme.of(context) || {};
+        const appTheme = Theme.of(context);
+        const colorScheme = appTheme.colorScheme;
+
+        const bgColor = this.backgroundColor || theme.backgroundColor || colorScheme.error || '#B3261E'; // Error/Red color default
+        const txtColor = this.textColor || theme.textColor || colorScheme.onError || '#FFFFFF';
+
+        // Size
+        // If label is null/undefined or empty, it's a small badge (dot)
+        const isSmall = !this.label;
+        const size = isSmall
+            ? (this.smallSize || theme.smallSize || 6.0)
+            : (this.largeSize || theme.largeSize || 16.0);
+
+        // Padding
+        const effectivePadding = this.padding || theme.padding || (isSmall ? EdgeInsets.all(0) : EdgeInsets.symmetric({ horizontal: 4 }));
+
+        if (isSmall) {
+            return new Container({
+                width: size,
+                height: size,
+                decoration: new BoxDecoration({
+                    color: bgColor,
+                    borderRadius: BorderRadius.circular(size),
+                })
+            });
+        }
+
+        return new Container({
+            height: size,
+            minWidth: size,
+            padding: effectivePadding,
+            alignment: Alignment.center,
+            decoration: new BoxDecoration({
+                color: bgColor,
+                borderRadius: BorderRadius.circular(size),
+            }),
+            child: this.label // Assuming label is a Widget or can be text
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/badge_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/badge_theme.js
new file mode 100644
index 00000000..3a8d4f66
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/badge_theme.js
@@ -0,0 +1,44 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class BadgeThemeData {
+    constructor({
+        backgroundColor,
+        textColor,
+        smallSize,
+        largeSize,
+        textStyle,
+        padding,
+        alignment,
+        offset,
+    } = {}) {
+        this.backgroundColor = backgroundColor;
+        this.textColor = textColor;
+        this.smallSize = smallSize;
+        this.largeSize = largeSize;
+        this.textStyle = textStyle;
+        this.padding = padding;
+        this.alignment = alignment;
+        this.offset = offset;
+    }
+}
+
+class BadgeTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(BadgeTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    BadgeTheme,
+    BadgeThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/banner.js b/packages/flutterjs_material/flutterjs_material/src/material/banner.js
new file mode 100644
index 00000000..f19efe75
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/banner.js
@@ -0,0 +1,138 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { Container, BoxDecoration } from './container.js';
+import { Row, Column, SizedBox } from '../widgets/widgets.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { Divider } from '../widgets/compoment/divider.js';
+import { MainAxisSize, CrossAxisAlignment, MainAxisAlignment } from '../utils/utils.js';
+import { MaterialBannerTheme } from './banner_theme.js';
+
+const MaterialBannerClosedReason = {
+    dismiss: 'dismiss',
+    swipe: 'swipe',
+    hide: 'hide',
+    remove: 'remove',
+};
+
+class MaterialBanner extends StatelessWidget {
+    constructor({
+        key,
+        content,
+        contentTextStyle,
+        actions,
+        elevation,
+        leading,
+        backgroundColor,
+        surfaceTintColor,
+        shadowColor,
+        dividerColor,
+        padding,
+        leadingPadding,
+        forceActionsBelow = false,
+        overflowAlignment,
+        animation,
+        onVisible,
+    } = {}) {
+        super(key);
+        this.content = content;
+        this.contentTextStyle = contentTextStyle;
+        this.actions = actions;
+        this.elevation = elevation;
+        this.leading = leading;
+        this.backgroundColor = backgroundColor;
+        this.surfaceTintColor = surfaceTintColor;
+        this.shadowColor = shadowColor;
+        this.dividerColor = dividerColor;
+        this.padding = padding;
+        this.leadingPadding = leadingPadding;
+        this.forceActionsBelow = forceActionsBelow;
+        this.overflowAlignment = overflowAlignment;
+    }
+
+    build(context) {
+        const theme = MaterialBannerTheme.of(context) || {};
+        const appTheme = Theme.of(context);
+        const colorScheme = appTheme.colorScheme;
+        const bgColor = this.backgroundColor || theme.backgroundColor || colorScheme.surfaceContainerLow || '#F7F2FA'; // M3 default
+        const effectivePadding = this.padding || theme.padding || EdgeInsets.all(16);
+        const effectiveLeadingPadding = this.leadingPadding || theme.leadingPadding || EdgeInsets.only({ right: 16 });
+
+        const children = [];
+
+        if (this.leading) {
+            children.push(new Container({
+                padding: effectiveLeadingPadding,
+                child: this.leading
+            }));
+        }
+
+        children.push(new SizedBox({
+            // Expanded equivalent? 
+            // In Row, we need Expanded for content.
+            // But we can't use Expanded inside arrays directly in existing flutterjs implementation if not supported in Row children parsing? 
+            // Assuming Row supports expanded children.
+            width: '100%', // temporary hack if expanded not working
+            child: this.content
+        }));
+
+        const actionsRow = new Row({
+            mainAxisSize: MainAxisSize.min,
+            mainAxisAlignment: MainAxisAlignment.end,
+            children: this.actions
+        });
+
+        // Simplified layout: Row(Leading, Content), Column(Actions) or similar depending on forceActionsBelow
+        // Material Banner usually:
+        // [Leading] [Content]
+        //           [Actions]
+
+        const contentAndActions = new Column({
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+                this.content,
+                new SizedBox({ height: 12 }),
+                new Row({
+                    mainAxisAlignment: MainAxisAlignment.end,
+                    children: this.actions
+                })
+            ]
+        });
+
+        let mainRow;
+
+        if (this.leading) {
+            mainRow = new Row({
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                    new Container({
+                        padding: effectiveLeadingPadding,
+                        child: this.leading
+                    }),
+                    // Expanded
+                    new Container({
+                        child: contentAndActions,
+                        style: { flex: 1 } // HACK: direct style for flex grow
+                    })
+                ]
+            });
+        } else {
+            mainRow = contentAndActions;
+        }
+
+        return new Column({
+            mainAxisSize: MainAxisSize.min,
+            children: [
+                new Container({
+                    color: bgColor,
+                    padding: effectivePadding,
+                    child: mainRow
+                }),
+                new Divider({ color: this.dividerColor || theme.dividerColor })
+            ]
+        });
+    }
+}
+
+export {
+    MaterialBanner,
+    MaterialBannerClosedReason
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/banner_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/banner_theme.js
new file mode 100644
index 00000000..f4963aec
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/banner_theme.js
@@ -0,0 +1,44 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class MaterialBannerThemeData {
+    constructor({
+        backgroundColor,
+        surfaceTintColor,
+        shadowColor,
+        dividerColor,
+        contentTextStyle,
+        elevation,
+        padding,
+        leadingPadding,
+    } = {}) {
+        this.backgroundColor = backgroundColor;
+        this.surfaceTintColor = surfaceTintColor;
+        this.shadowColor = shadowColor;
+        this.dividerColor = dividerColor;
+        this.contentTextStyle = contentTextStyle;
+        this.elevation = elevation;
+        this.padding = padding;
+        this.leadingPadding = leadingPadding;
+    }
+}
+
+class MaterialBannerTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(MaterialBannerTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    MaterialBannerTheme,
+    MaterialBannerThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/bottom_app_bar.js b/packages/flutterjs_material/flutterjs_material/src/material/bottom_app_bar.js
new file mode 100644
index 00000000..d3fa73ef
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/bottom_app_bar.js
@@ -0,0 +1,59 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { Container, BoxDecoration } from './container.js';
+import { Row } from '../widgets/widgets.js';
+import { MainAxisAlignment, MainAxisSize } from '../utils/utils.js';
+import { BottomAppBarTheme } from './bottom_app_bar_theme.js';
+
+export class BottomAppBar extends StatelessWidget {
+    constructor({
+        key,
+        color,
+        elevation,
+        shape,
+        clipBehavior,
+        notchMargin,
+        child,
+        padding,
+        surfaceTintColor,
+        shadowColor,
+        height,
+    } = {}) {
+        super(key);
+        this.color = color;
+        this.elevation = elevation;
+        this.shape = shape;
+        this.clipBehavior = clipBehavior;
+        this.notchMargin = notchMargin;
+        this.child = child;
+        this.padding = padding;
+        this.surfaceTintColor = surfaceTintColor;
+        this.shadowColor = shadowColor;
+        this.height = height;
+    }
+
+    build(context) {
+        // Theme lookup not fully implemented in system yet, stubbing or using passed values
+        // const theme = BottomAppBarTheme.of(context);
+
+        // Default styling
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+
+        const effectiveHeight = this.height || 80.0;
+        const effectiveColor = this.color || colorScheme.surfaceContainer || '#F3EDF7';
+        const effectiveElevation = this.elevation || 8.0;
+
+        return new Container({
+            padding: this.padding,
+            color: effectiveColor,
+            height: effectiveHeight,
+            // BoxShadow for elevation stub
+            style: {
+                boxShadow: `0px -2px ${effectiveElevation}px rgba(0,0,0,0.1)`,
+                // Shape/Notch handling would go here with SVG clip-path or complex CSS.
+                // For now, just a bar.
+            },
+            child: this.child
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/bottom_app_bar_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/bottom_app_bar_theme.js
new file mode 100644
index 00000000..deeca4da
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/bottom_app_bar_theme.js
@@ -0,0 +1,35 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class BottomAppBarTheme {
+    constructor({
+        color,
+        elevation,
+        shape,
+        height,
+        surfaceTintColor,
+        shadowColor,
+        padding,
+    } = {}) {
+        this.color = color;
+        this.elevation = elevation;
+        this.shape = shape;
+        this.height = height;
+        this.surfaceTintColor = surfaceTintColor;
+        this.shadowColor = shadowColor;
+        this.padding = padding;
+    }
+}
+
+class BottomAppBarThemeData extends InheritedWidget {
+    // Wait, InheritedWidget is for passing down. Theme is data.
+    // Correct pattern: Theme holds ThemeData.
+    // But FlutterJS implementation of Theme seems mixed manually. 
+    // Following `icon.js` pattern: IconThemeData is class, not widget.
+    // `Theme` is InheritedWidget.
+    // We should check `theme_data.js` to see if it aggregates these.
+    // The file `bottom_app_bar_theme.js` should likely export the Data class.
+}
+
+export {
+    BottomAppBarTheme
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/bottom_navigation_bar.js b/packages/flutterjs_material/flutterjs_material/src/material/bottom_navigation_bar.js
new file mode 100644
index 00000000..f8c04ef8
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/bottom_navigation_bar.js
@@ -0,0 +1,170 @@
+import { StatefulWidget, StatelessWidget } from '../core/widget_element.js';
+import { Container, BoxDecoration } from './container.js';
+import { Row, Column, Expanded, SizedBox } from '../widgets/widgets.js';
+import { Icon } from './icon.js';
+import { Text } from './text.js';
+import { GestureDetector } from './gesture_detector.js';
+import { MainAxisAlignment, CrossAxisAlignment, MainAxisSize } from '../utils/utils.js';
+import { BottomNavigationBarTheme } from './bottom_navigation_bar_theme.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { Theme } from './theme.js';
+
+const BottomNavigationBarType = {
+    fixed: 'fixed',
+    shifting: 'shifting',
+};
+
+class BottomNavigationBarItem {
+    constructor({
+        icon,
+        label,
+        activeIcon,
+        backgroundColor,
+        tooltip
+    } = {}) {
+        this.icon = icon;
+        this.label = label;
+        this.activeIcon = activeIcon || icon;
+        this.backgroundColor = backgroundColor;
+        this.tooltip = tooltip;
+    }
+}
+
+class BottomNavigationBar extends StatelessWidget {
+    constructor({
+        key,
+        items = [],
+        onTap,
+        currentIndex = 0,
+        elevation,
+        type,
+        fixedColor,
+        backgroundColor,
+        iconSize = 24.0,
+        selectedItemColor,
+        unselectedItemColor,
+        selectedIconTheme,
+        unselectedIconTheme,
+        selectedFontSize = 14.0,
+        unselectedFontSize = 12.0,
+        selectedLabelStyle,
+        unselectedLabelStyle,
+        showSelectedLabels = true,
+        showUnselectedLabels,
+        mouseCursor,
+        enableFeedback = true,
+        landscapeLayout,
+    } = {}) {
+        super(key);
+        this.items = items;
+        this.onTap = onTap;
+        this.currentIndex = currentIndex;
+        this.elevation = elevation;
+        this.type = type;
+        this.fixedColor = fixedColor;
+        this.backgroundColor = backgroundColor;
+        this.iconSize = iconSize;
+        this.selectedItemColor = selectedItemColor;
+        this.unselectedItemColor = unselectedItemColor;
+        this.selectedIconTheme = selectedIconTheme;
+        this.unselectedIconTheme = unselectedIconTheme;
+        this.selectedFontSize = selectedFontSize;
+        this.unselectedFontSize = unselectedFontSize;
+        this.selectedLabelStyle = selectedLabelStyle;
+        this.unselectedLabelStyle = unselectedLabelStyle;
+        this.showSelectedLabels = showSelectedLabels;
+        this.showUnselectedLabels = showUnselectedLabels;
+        this.mouseCursor = mouseCursor;
+        this.enableFeedback = enableFeedback;
+        this.landscapeLayout = landscapeLayout;
+    }
+
+    build(context) {
+        const theme = BottomNavigationBarTheme.of(context) || {};
+        const appTheme = Theme.of(context);
+        const colorScheme = appTheme.colorScheme;
+
+        const effectiveType = this.type || theme.type || BottomNavigationBarType.fixed;
+        const effectiveBgColor = this.backgroundColor || theme.backgroundColor || colorScheme.surfaceContainer || '#F3EDF7';
+        const effectiveElevation = this.elevation ?? theme.elevation ?? 8.0;
+        const effectiveSelectedItemColor = this.selectedItemColor || theme.selectedItemColor || this.fixedColor || colorScheme.primary || '#6750A4';
+        const effectiveUnselectedItemColor = this.unselectedItemColor || theme.unselectedItemColor || colorScheme.onSurfaceVariant || '#49454F';
+
+        // Show unselected labels defaults to true for fixed, false for shifting
+        const effectiveShowUnselectedLabels = this.showUnselectedLabels ?? theme.showUnselectedLabels ?? (effectiveType === BottomNavigationBarType.fixed);
+
+        const children = this.items.map((item, index) => {
+            const isSelected = index === this.currentIndex;
+            const itemColor = isSelected ? effectiveSelectedItemColor : effectiveUnselectedItemColor;
+            const icon = isSelected ? item.activeIcon : item.icon;
+
+            // Should apply IconTheme overriding size/color if not locally set on Icon
+            // For now, simpler implementation:
+            // We can't easily mutate the Icon widget instance if it's already created.
+            // But we can wrap it or assume it respects hierarchical theme if we implemented it.
+            // Or we just rely on the user passing correct icons, 
+            // BUT standard flutter overrides color/size. 
+            // In FlutterJS Icon.js, it might check context? 
+            // Yes `_getIconTheme(context)` in `Icon.js`.
+            // So we should ideally wrap each item in an `IconTheme`.
+
+            // For simplistic approach (as we are building MVP of these widgets):
+
+            return new Expanded({
+                child: new GestureDetector({
+                    onTap: () => this.onTap && this.onTap(index),
+                    child: new Container({
+                        color: 'transparent', // Hit test
+                        padding: EdgeInsets.symmetric({ vertical: 8.0 }),
+                        child: new Column({
+                            mainAxisSize: MainAxisSize.min,
+                            mainAxisAlignment: MainAxisAlignment.center,
+                            children: [
+                                // Icon Wrapper to enforce color
+                                new Container({
+                                    style: { color: itemColor }, // CSS inheritance for icon text/svg if compatible
+                                    child: icon
+                                }),
+                                (isSelected && this.showSelectedLabels) || (!isSelected && effectiveShowUnselectedLabels)
+                                    ? new Container({
+                                        margin: EdgeInsets.only({ top: 4.0 }),
+                                        child: new Text(item.label || '', {
+                                            style: {
+                                                color: itemColor,
+                                                fontSize: isSelected ? `${this.selectedFontSize}px` : `${this.unselectedFontSize}px`,
+                                                fontWeight: isSelected ? '500' : '400'
+                                            }
+                                        })
+                                    })
+                                    : new SizedBox()
+                            ]
+                        })
+                    })
+                })
+            });
+        });
+
+        return new Container({
+            color: effectiveBgColor,
+            height: 56.0 + (this.showSelectedLabels || effectiveShowUnselectedLabels ? 0 : 0), // 56 standard, adjust for labels? 
+            // Standard height is usually 56, sometimes more with labels. 
+            // Let's rely on flex/padding.
+            style: {
+                boxShadow: `0px -1px ${effectiveElevation}px rgba(0,0,0,0.1)`,
+                display: 'flex', // Container supports this but explicit checking
+                zIndex: 8,
+            },
+            child: new Row({
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: children
+            })
+        });
+    }
+}
+
+export {
+    BottomNavigationBar,
+    BottomNavigationBarItem,
+    BottomNavigationBarType
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/bottom_navigation_bar_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/bottom_navigation_bar_theme.js
new file mode 100644
index 00000000..6142d400
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/bottom_navigation_bar_theme.js
@@ -0,0 +1,56 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class BottomNavigationBarThemeData {
+    constructor({
+        backgroundColor,
+        elevation,
+        selectedIconTheme,
+        unselectedIconTheme,
+        selectedItemColor,
+        unselectedItemColor,
+        selectedLabelStyle,
+        unselectedLabelStyle,
+        showSelectedLabels,
+        showUnselectedLabels,
+        type,
+        enableFeedback,
+        landscapeLayout,
+        mouseCursor,
+    } = {}) {
+        this.backgroundColor = backgroundColor;
+        this.elevation = elevation;
+        this.selectedIconTheme = selectedIconTheme;
+        this.unselectedIconTheme = unselectedIconTheme;
+        this.selectedItemColor = selectedItemColor;
+        this.unselectedItemColor = unselectedItemColor;
+        this.selectedLabelStyle = selectedLabelStyle;
+        this.unselectedLabelStyle = unselectedLabelStyle;
+        this.showSelectedLabels = showSelectedLabels;
+        this.showUnselectedLabels = showUnselectedLabels;
+        this.type = type;
+        this.enableFeedback = enableFeedback;
+        this.landscapeLayout = landscapeLayout;
+        this.mouseCursor = mouseCursor;
+    }
+}
+
+class BottomNavigationBarTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(BottomNavigationBarTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    BottomNavigationBarTheme,
+    BottomNavigationBarThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/bottom_sheet.js b/packages/flutterjs_material/flutterjs_material/src/material/bottom_sheet.js
new file mode 100644
index 00000000..ef47ac52
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/bottom_sheet.js
@@ -0,0 +1,174 @@
+import { StatefulWidget, StatelessWidget, State } from '../core/widget_element.js';
+import { Container, BoxDecoration } from './container.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { BottomSheetTheme } from './bottom_sheet_theme.js';
+import { BorderRadius } from '../utils/border_radius.js';
+import { CrossAxisAlignment, Alignment } from '../utils/utils.js';
+import { Theme } from './theme.js';
+
+class BottomSheet extends StatefulWidget {
+    constructor({
+        key,
+        animationController,
+        enableDrag = true,
+        onDragStart,
+        onDragEnd,
+        backgroundColor,
+        elevation,
+        shape,
+        clipBehavior,
+        constraints,
+        onClosing,
+        builder,
+    } = {}) {
+        super(key);
+        this.animationController = animationController;
+        this.enableDrag = enableDrag;
+        this.onDragStart = onDragStart;
+        this.onDragEnd = onDragEnd;
+        this.backgroundColor = backgroundColor;
+        this.elevation = elevation;
+        this.shape = shape;
+        this.clipBehavior = clipBehavior;
+        this.constraints = constraints;
+        this.onClosing = onClosing;
+        this.builder = builder;
+    }
+
+    createState() {
+        return new BottomSheetState();
+    }
+}
+
+class BottomSheetState extends State {
+    build(context) {
+        // Animation parsing omitted for simplicity in this version.
+        // In real web impl, would use CSS transitions/animations for slide-up.
+
+        const theme = BottomSheetTheme.of(context) || {};
+        const appTheme = Theme.of(context);
+        const colorScheme = appTheme.colorScheme;
+
+        const bgColor = this.widget.backgroundColor || theme.backgroundColor || colorScheme.surfaceContainerLow || '#F7F2FA';
+        const elevation = this.widget.elevation || theme.elevation || 0.0;
+        const shape = this.widget.shape || theme.shape;
+
+        const style = {
+            position: 'fixed',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            backgroundColor: bgColor,
+            boxShadow: `0 -${elevation}px ${elevation * 2}px rgba(0,0,0,0.1)`,
+            zIndex: 100, // High z-index
+            borderTopLeftRadius: shape?.borderRadius?.topLeft || '0px', // Naive shape parsing
+            borderTopRightRadius: shape?.borderRadius?.topRight || '0px',
+            animation: 'slide-up 0.3s ease-out',
+            maxHeight: '90vh',
+            overflowY: 'auto'
+        };
+
+        if (this.widget.clipBehavior) {
+            style.overflow = 'hidden';
+        }
+
+        return new VNode({
+            tag: 'div',
+            props: {
+                className: 'fjs-bottom-sheet',
+                style: style
+            },
+            children: [
+                this.widget.builder(context)
+            ]
+        });
+    }
+}
+
+function showModalBottomSheet({
+    context,
+    builder,
+    backgroundColor,
+    elevation,
+    shape,
+    clipBehavior,
+    constraints,
+    barrierColor,
+    isScrollControlled = false,
+    useRootNavigator = true,
+    isDismissible = true,
+    enableDrag = true,
+    showDragHandle,
+    useSafeArea = false,
+} = {}) {
+    return new Promise((resolve) => {
+        // Create backdrop
+        const backdropStyle = {
+            position: 'fixed',
+            top: 0, left: 0, right: 0, bottom: 0,
+            backgroundColor: barrierColor || 'rgba(0,0,0,0.5)',
+            zIndex: 99,
+            animation: 'fade-in 0.2s ease'
+        };
+
+        // Create container for sheet + backdrop
+        const containerId = 'bottom-sheet-' + Date.now();
+
+        let container = document.createElement('div');
+        container.id = containerId;
+
+        // Close handler
+        const close = (result) => {
+            const el = document.getElementById(containerId);
+            if (el) {
+                // Add exit animation classes if needed, then remove
+                el.remove();
+            }
+            resolve(result);
+        };
+
+        // Use standard FlutterJS mounting mechanism if possible (runApp logic usually).
+        // Since we are inside a running app, we might need a Portal or Overlay.
+        // For simple JS implementation, we can manually mount a VNode tree.
+
+        // However, we need 'context' to work for children.
+        // This is tricky without a proper Overlay entry in the main tree.
+        // Quick hack: Render a separate tree rooted at document.body for the modal.
+
+        // This won't inherit existing InheritedWidgets from 'context' easily unless we
+        // wrap the new tree with them manually or link the Element tree.
+        // FlutterJS's `runApp` (from runtime) creates a new Root. 
+        // We probably want `Overlay` widget usage here eventually.
+
+        console.warn("showModalBottomSheet: Context inheritance is limited in this implementation.");
+
+        // Manual DOM creation for backdrop to keep it simple for now
+        const backdrop = document.createElement('div');
+        Object.assign(backdrop.style, backdropStyle);
+        backdrop.onclick = () => {
+            if (isDismissible) close(null);
+        };
+        container.appendChild(backdrop);
+
+        // Placeholder for sheet content - in real world we need to mount the Widget 
+        // properly to get lifecycle and context.
+        // We will skip full implementation of `builder` rendering here as it requires `TestWidgets` or `Overlay` support.
+        // We will just create a simple div with "Not Implemented Full Render" or try to render static VNode.
+
+        // TODO: Use Overlay from Widgets layer when available.
+
+        document.body.appendChild(container);
+
+        // Mount the BottomSheet widget
+        // Implementation detail: create a new RootElement/BuildOwner for this overlay?
+        // Or just append to DOM if we assume `builder(context)` returns a VNode (it doesn't, it returns Widget).
+
+        // Temporary: Just resolve immediately or log
+        console.log("showModalBottomSheet called. Modal logic requires Overlay support.");
+    });
+}
+
+export {
+    BottomSheet,
+    showModalBottomSheet
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/bottom_sheet_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/bottom_sheet_theme.js
new file mode 100644
index 00000000..1c8e9efb
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/bottom_sheet_theme.js
@@ -0,0 +1,54 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class BottomSheetThemeData {
+    constructor({
+        backgroundColor,
+        surfaceTintColor,
+        elevation,
+        modalBackgroundColor,
+        modalBarrierColor,
+        shadowColor,
+        modalElevation,
+        shape,
+        showDragHandle,
+        dragHandleColor,
+        dragHandleSize,
+        clipBehavior,
+        constraints,
+    } = {}) {
+        this.backgroundColor = backgroundColor;
+        this.surfaceTintColor = surfaceTintColor;
+        this.elevation = elevation;
+        this.modalBackgroundColor = modalBackgroundColor;
+        this.modalBarrierColor = modalBarrierColor;
+        this.shadowColor = shadowColor;
+        this.modalElevation = modalElevation;
+        this.shape = shape;
+        this.showDragHandle = showDragHandle;
+        this.dragHandleColor = dragHandleColor;
+        this.dragHandleSize = dragHandleSize;
+        this.clipBehavior = clipBehavior;
+        this.constraints = constraints;
+    }
+}
+
+class BottomSheetTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(BottomSheetTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    BottomSheetTheme,
+    BottomSheetThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/button_bar.js b/packages/flutterjs_material/flutterjs_material/src/material/button_bar.js
new file mode 100644
index 00000000..f426df7a
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/button_bar.js
@@ -0,0 +1,63 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { Row, Column } from '../widgets/widgets.js';
+import { MainAxisAlignment, MainAxisSize, CrossAxisAlignment } from '../utils/utils.js';
+import { ButtonBarTheme } from './button_bar_theme.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { Container } from './container.js';
+
+export class ButtonBar extends StatelessWidget {
+    constructor({
+        key,
+        alignment,
+        mainAxisSize,
+        buttonTextTheme,
+        buttonMinWidth,
+        buttonHeight,
+        buttonPadding,
+        buttonAlignedDropdown,
+        layoutBehavior,
+        overflowDirection,
+        overflowButtonSpacing,
+        children = [],
+    } = {}) {
+        super(key);
+        this.alignment = alignment;
+        this.mainAxisSize = mainAxisSize;
+        this.buttonTextTheme = buttonTextTheme;
+        this.buttonMinWidth = buttonMinWidth;
+        this.buttonHeight = buttonHeight;
+        this.buttonPadding = buttonPadding;
+        this.buttonAlignedDropdown = buttonAlignedDropdown;
+        this.layoutBehavior = layoutBehavior;
+        this.overflowDirection = overflowDirection;
+        this.overflowButtonSpacing = overflowButtonSpacing;
+        this.children = children;
+    }
+
+    build(context) {
+        const theme = ButtonBarTheme.of(context) || {};
+
+        const effectiveAlignment = this.alignment || theme.alignment || MainAxisAlignment.end;
+        const effectiveMainAxisSize = this.mainAxisSize || theme.mainAxisSize || MainAxisSize.max;
+        const effectiveButtonPadding = this.buttonPadding || theme.buttonPadding || EdgeInsets.all(8.0);
+        // overflow customization requires Wrap or custom layout, utilizing Row for simpler cases
+
+        const stylizedChildren = this.children.map(child => {
+            // In full flutter, child buttons pick up the Bar's configuration via ButtonTheme
+            // Here we might handle padding if we wrap them.
+            return new Container({
+                padding: { right: this.overflowButtonSpacing || 0 }, // simple spacing
+                child: child
+            });
+        });
+
+        return new Container({
+            padding: effectiveButtonPadding,
+            child: new Row({
+                mainAxisAlignment: effectiveAlignment,
+                mainAxisSize: effectiveMainAxisSize,
+                children: stylizedChildren
+            })
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/button_bar_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/button_bar_theme.js
new file mode 100644
index 00000000..d9f6b084
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/button_bar_theme.js
@@ -0,0 +1,46 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class ButtonBarThemeData {
+    constructor({
+        alignment,
+        mainAxisSize,
+        buttonTextTheme,
+        buttonMinWidth,
+        buttonHeight,
+        buttonPadding,
+        buttonAlignedDropdown,
+        layoutBehavior,
+        overflowDirection,
+    } = {}) {
+        this.alignment = alignment;
+        this.mainAxisSize = mainAxisSize;
+        this.buttonTextTheme = buttonTextTheme;
+        this.buttonMinWidth = buttonMinWidth;
+        this.buttonHeight = buttonHeight;
+        this.buttonPadding = buttonPadding;
+        this.buttonAlignedDropdown = buttonAlignedDropdown;
+        this.layoutBehavior = layoutBehavior;
+        this.overflowDirection = overflowDirection;
+    }
+}
+
+class ButtonBarTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(ButtonBarTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    ButtonBarTheme,
+    ButtonBarThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/button_style.js b/packages/flutterjs_material/flutterjs_material/src/material/button_style.js
new file mode 100644
index 00000000..8abbdd68
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/button_style.js
@@ -0,0 +1,46 @@
+
+export class ButtonStyle {
+    constructor({
+        textStyle,
+        backgroundColor,
+        foregroundColor,
+        overlayColor,
+        shadowColor,
+        surfaceTintColor,
+        elevation,
+        padding,
+        minimumSize,
+        fixedSize,
+        maximumSize,
+        side,
+        shape,
+        mouseCursor,
+        visualDensity,
+        tapTargetSize,
+        animationDuration,
+        enableFeedback,
+        alignment,
+        splashFactory,
+    } = {}) {
+        this.textStyle = textStyle;
+        this.backgroundColor = backgroundColor;
+        this.foregroundColor = foregroundColor;
+        this.overlayColor = overlayColor;
+        this.shadowColor = shadowColor;
+        this.surfaceTintColor = surfaceTintColor;
+        this.elevation = elevation;
+        this.padding = padding;
+        this.minimumSize = minimumSize;
+        this.fixedSize = fixedSize;
+        this.maximumSize = maximumSize;
+        this.side = side;
+        this.shape = shape;
+        this.mouseCursor = mouseCursor;
+        this.visualDensity = visualDensity;
+        this.tapTargetSize = tapTargetSize;
+        this.animationDuration = animationDuration;
+        this.enableFeedback = enableFeedback;
+        this.alignment = alignment;
+        this.splashFactory = splashFactory;
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/button_style_button.js b/packages/flutterjs_material/flutterjs_material/src/material/button_style_button.js
new file mode 100644
index 00000000..f6f64fdd
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/button_style_button.js
@@ -0,0 +1,53 @@
+import { StatefulWidget, StatelessWidget } from '../core/widget_element.js';
+import { Container } from './container.js';
+import { GestureDetector } from './gesture_detector.js';
+import { Center } from '../widgets/compoment/center.js';
+
+export class ButtonStyleButton extends StatelessWidget {
+    constructor({
+        key,
+        onPressed,
+        onLongPress,
+        onHover,
+        onFocusChange,
+        style,
+        focusNode,
+        autofocus = false,
+        clipBehavior = 'none',
+        child
+    } = {}) {
+        super(key);
+        this.onPressed = onPressed;
+        this.onLongPress = onLongPress;
+        this.onHover = onHover;
+        this.onFocusChange = onFocusChange;
+        this.style = style;
+        this.focusNode = focusNode;
+        this.autofocus = autofocus;
+        this.clipBehavior = clipBehavior;
+        this.child = child;
+    }
+
+    build(context) {
+        // Base implementation for buttons.
+        // Subclasses (ElevatedButton, etc.) should generally override or this provides a generic button.
+
+        // This is a minimal implementation to support the structure.
+        // Needs proper visual rendering based on `style`.
+
+        return new GestureDetector({
+            onTap: this.onPressed,
+            onLongPress: this.onLongPress,
+            child: new Container({
+                // Apply style properties here...
+                // e.g. padding, color, shape from this.style
+                // For now, minimal.
+                child: new Center({ child: this.child })
+            })
+        });
+    }
+
+    static allOrNull(value) {
+        return value; // Should return MaterialStateProperty.all(value) logic
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/button_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/button_theme.js
new file mode 100644
index 00000000..85da6703
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/button_theme.js
@@ -0,0 +1,56 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class ButtonThemeData {
+    constructor({
+        textTheme,
+        minWidth = 88.0,
+        height = 36.0,
+        padding,
+        shape,
+        alignedDropdown = false,
+        buttonColor,
+        disabledColor,
+        focusColor,
+        hoverColor,
+        highlightColor,
+        splashColor,
+        colorScheme,
+        materialTapTargetSize,
+    } = {}) {
+        this.textTheme = textTheme;
+        this.minWidth = minWidth;
+        this.height = height;
+        this.padding = padding;
+        this.shape = shape;
+        this.alignedDropdown = alignedDropdown;
+        this.buttonColor = buttonColor;
+        this.disabledColor = disabledColor;
+        this.focusColor = focusColor;
+        this.hoverColor = hoverColor;
+        this.highlightColor = highlightColor;
+        this.splashColor = splashColor;
+        this.colorScheme = colorScheme;
+        this.materialTapTargetSize = materialTapTargetSize;
+    }
+}
+
+class ButtonTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(ButtonTheme);
+        return widget ? widget.data : new ButtonThemeData();
+    }
+}
+
+export {
+    ButtonTheme,
+    ButtonThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/calendar_date_picker.js b/packages/flutterjs_material/flutterjs_material/src/material/calendar_date_picker.js
new file mode 100644
index 00000000..dab45ad9
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/calendar_date_picker.js
@@ -0,0 +1,179 @@
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { Container } from './container.js';
+import { Column, Row, SizedBox } from '../widgets/widgets.js'; // Assuming GridView is not ready, use Rows/Cols
+import { Text } from './text.js';
+import { GestureDetector } from './gesture_detector.js';
+import { Icons, Icon } from './icon.js';
+import { IconButton } from './icon_button.js';
+import { MainAxisAlignment, CrossAxisAlignment, MainAxisSize } from '../utils/utils.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { Theme } from './theme.js';
+import { BorderRadius } from '../utils/border_radius.js';
+
+export class CalendarDatePicker extends StatefulWidget {
+    constructor({
+        key,
+        initialDate,
+        firstDate,
+        lastDate,
+        currentDate,
+        onDateChanged,
+        onDisplayedMonthChanged,
+        initialCalendarMode = 'date',
+        selectableDayPredicate,
+    } = {}) {
+        super(key);
+        this.initialDate = initialDate || new Date();
+        this.firstDate = firstDate || new Date(1900, 0, 1);
+        this.lastDate = lastDate || new Date(2100, 11, 31);
+        this.currentDate = currentDate || new Date();
+        this.onDateChanged = onDateChanged;
+        this.onDisplayedMonthChanged = onDisplayedMonthChanged;
+        this.initialCalendarMode = initialCalendarMode;
+        this.selectableDayPredicate = selectableDayPredicate;
+    }
+
+    createState() {
+        return new CalendarDatePickerState();
+    }
+}
+
+class CalendarDatePickerState extends State {
+    constructor() {
+        super();
+        this.displayedMonth = null;
+        this.selectedDate = null;
+    }
+
+    initState() {
+        this.displayedMonth = new Date(this.widget.initialDate.getFullYear(), this.widget.initialDate.getMonth(), 1);
+        this.selectedDate = this.widget.initialDate;
+    }
+
+    _handlePreviousMonth() {
+        this.setState(() => {
+            this.displayedMonth = new Date(this.displayedMonth.getFullYear(), this.displayedMonth.getMonth() - 1, 1);
+        });
+        this.widget.onDisplayedMonthChanged?.(this.displayedMonth);
+    }
+
+    _handleNextMonth() {
+        this.setState(() => {
+            this.displayedMonth = new Date(this.displayedMonth.getFullYear(), this.displayedMonth.getMonth() + 1, 1);
+        });
+        this.widget.onDisplayedMonthChanged?.(this.displayedMonth);
+    }
+
+    _handleDayChanged(date) {
+        this.setState(() => {
+            this.selectedDate = date;
+        });
+        this.widget.onDateChanged?.(date);
+    }
+
+    build(context) {
+        // Simple Calendar Grid implementation
+
+        const year = this.displayedMonth.getFullYear();
+        const month = this.displayedMonth.getMonth();
+
+        // Month Header
+        const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+        const header = new Row({
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+                new IconButton({
+                    icon: new Icon(Icons.arrowBack),
+                    onPressed: () => this._handlePreviousMonth()
+                }),
+                new Text(`${monthNames[month]} ${year}`, {
+                    style: { fontWeight: 'bold', fontSize: '16px' }
+                }),
+                new IconButton({
+                    icon: new Icon(Icons.arrowForward),
+                    onPressed: () => this._handleNextMonth()
+                })
+            ]
+        });
+
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+        const primaryColor = colorScheme.primary || '#6750A4';
+        const onPrimaryColor = colorScheme.onPrimary || '#FFFFFF';
+        const onSurfaceColor = colorScheme.onSurface || '#1C1B1F';
+
+        // Days Grid
+        // Get days in month
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const firstDayOfWeek = new Date(year, month, 1).getDay(); // 0 = Sun
+
+        const dayRows = [];
+        let currentDay = 1;
+        let currentRowChildren = [];
+
+        // Empty slots
+        for (let i = 0; i < firstDayOfWeek; i++) {
+            currentRowChildren.push(new SizedBox({ width: 40, height: 40 }));
+        }
+
+        // Days
+        while (currentDay <= daysInMonth) {
+            const date = new Date(year, month, currentDay);
+            const isSelected = this.selectedDate &&
+                this.selectedDate.getFullYear() === year &&
+                this.selectedDate.getMonth() === month &&
+                this.selectedDate.getDate() === currentDay;
+
+            const dayNum = currentDay; // Capture for closure
+
+            currentRowChildren.push(new GestureDetector({
+                onTap: () => this._handleDayChanged(date),
+                child: new Container({
+                    width: 40,
+                    height: 40,
+                    alignment: 'center', // shorthand for Alignment.center if supported mainly
+                    decoration: isSelected ? new BoxDecoration({
+                        color: primaryColor, // use theme
+                        borderRadius: BorderRadius.circular(20) // should use BorderRadius object
+                    }) : null,
+                    child: new Center({
+                        child: new Text(dayNum.toString(), {
+                            style: {
+                                color: isSelected ? onPrimaryColor : onSurfaceColor
+                            }
+                        })
+                    })
+                })
+            }));
+
+            if (currentRowChildren.length === 7) {
+                dayRows.push(new Row({ children: currentRowChildren, mainAxisAlignment: MainAxisAlignment.spaceEvenly }));
+                currentRowChildren = [];
+            }
+
+            currentDay++;
+        }
+
+        // Remaining
+        if (currentRowChildren.length > 0) {
+            // Fill rest
+            while (currentRowChildren.length < 7) {
+                currentRowChildren.push(new SizedBox({ width: 40, height: 40 }));
+            }
+            dayRows.push(new Row({ children: currentRowChildren, mainAxisAlignment: MainAxisAlignment.spaceEvenly }));
+        }
+
+        return new Container({
+            padding: EdgeInsets.all(16.0),
+            child: new Column({
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                    header,
+                    new SizedBox({ height: 16 }),
+                    ...dayRows
+                ]
+            })
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/card.js b/packages/flutterjs_material/flutterjs_material/src/material/card.js
new file mode 100644
index 00000000..646e74c8
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/card.js
@@ -0,0 +1,91 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { Container, BoxDecoration } from './container.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { BorderRadius } from '../utils/border_radius.js';
+import { CardTheme } from './card_theme.js';
+import { Colors } from './color.js';
+
+class Card extends StatelessWidget {
+    constructor({
+        key,
+        color,
+        shadowColor,
+        surfaceTintColor,
+        elevation,
+        shape,
+        borderOnForeground = true,
+        margin,
+        clipBehavior,
+        child,
+        semanticContainer = true
+    } = {}) {
+        super(key);
+        this.color = color;
+        this.shadowColor = shadowColor;
+        this.surfaceTintColor = surfaceTintColor;
+        this.elevation = elevation;
+        this.shape = shape;
+        this.borderOnForeground = borderOnForeground;
+        this.margin = margin;
+        this.clipBehavior = clipBehavior;
+        this.child = child;
+        this.semanticContainer = semanticContainer;
+    }
+
+    build(context) {
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+        const cardTheme = theme.cardTheme || {}; // Assuming cardTheme exists in Theme
+
+        // M3 Card Defaults
+        // Elevated Card: Surface Container Low
+        // Outlined Card: Surface
+        // Filled Card: Surface Container Highest
+        // We'll default to Elevated Card behavior as it's the standard "Card"
+        const defaultColor = colorScheme.surfaceContainerLow || '#F7F2FA';
+        const defaultShadowColor = colorScheme.shadow || '#000000';
+        const defaultShape = { borderRadius: BorderRadius.circular(12) }; // M3 uses 12px
+
+        const resolveColor = (value, defaultValue) => {
+            if (value) {
+                if (typeof value === 'string') return value;
+                if (typeof value.toCSSString === 'function') return value.toCSSString();
+                if (value.value) return '#' + value.value.toString(16).padStart(8, '0').slice(2);
+            }
+            return defaultValue;
+        };
+
+        const effectiveColor = resolveColor(this.color || cardTheme.color, defaultColor);
+        const effectiveShadowColor = resolveColor(this.shadowColor || cardTheme.shadowColor, defaultShadowColor);
+
+        const effectiveElevation = this.elevation ?? cardTheme.elevation ?? 1;
+        const effectiveShape = this.shape || cardTheme.shape || defaultShape;
+        const effectiveMargin = this.margin || cardTheme.margin || EdgeInsets.all(4);
+        const effectiveClipBehavior = this.clipBehavior || cardTheme.clipBehavior;
+
+        // Shadow simulation
+        const boxShadow = effectiveElevation > 0 ? [{
+            color: 'rgba(0,0,0,0.2)', // Simplification of shadowColor logic
+            offsetX: 0,
+            offsetY: 1,
+            blurRadius: 3,
+            spreadRadius: 1
+        }] : [];
+
+        // Apply style to Container
+        const decoration = new BoxDecoration({
+            color: effectiveColor,
+            borderRadius: effectiveShape.borderRadius, // Assuming shape has borderRadius for now
+            boxShadow: boxShadow
+        });
+
+        return new Container({
+            margin: effectiveMargin,
+            decoration: decoration,
+            clipBehavior: effectiveClipBehavior,
+            child: this.child
+        });
+    }
+}
+
+export { Card };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/card_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/card_theme.js
new file mode 100644
index 00000000..93227e6c
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/card_theme.js
@@ -0,0 +1,42 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class CardThemeData {
+    constructor({
+        clipBehavior,
+        color,
+        shadowColor,
+        surfaceTintColor,
+        elevation,
+        margin,
+        shape,
+    } = {}) {
+        this.clipBehavior = clipBehavior;
+        this.color = color;
+        this.shadowColor = shadowColor;
+        this.surfaceTintColor = surfaceTintColor;
+        this.elevation = elevation;
+        this.margin = margin;
+        this.shape = shape;
+    }
+}
+
+class CardTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(CardTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    CardTheme,
+    CardThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/carousel.js b/packages/flutterjs_material/flutterjs_material/src/material/carousel.js
new file mode 100644
index 00000000..2356a535
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/carousel.js
@@ -0,0 +1,127 @@
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { Container } from './container.js';
+import { Row, Column, Expanded } from '../widgets/widgets.js'; // Using Row/Col for basic scroll
+import { GestureDetector } from './gesture_detector.js';
+import { MainAxisSize, MainAxisAlignment, Axis } from '../utils/utils.js';
+import { CarouselTheme } from './carousel_theme.js';
+import { ListView } from './list_view.js'; // Utilize ListView for scrolling if possible
+
+// Basic controller to manage page index
+export class CarouselController {
+    constructor() {
+        this._state = null; // Attached state
+    }
+
+    _attach(state) {
+        this._state = state;
+    }
+
+    nextPage({ duration, curve } = {}) {
+        this._state?.nextPage({ duration, curve });
+    }
+
+    previousPage({ duration, curve } = {}) {
+        this._state?.previousPage({ duration, curve });
+    }
+
+    jumpToPage(page) {
+        this._state?.jumpToPage(page);
+    }
+}
+
+export class Carousel extends StatefulWidget {
+    constructor({
+        key,
+        items = [],
+        carouselController,
+        options = {}, // height, aspectRatio, viewportFraction, etc.
+    } = {}) {
+        super(key);
+        this.items = items;
+        this.carouselController = carouselController;
+        this.options = options;
+    }
+
+    createState() {
+        return new CarouselState();
+    }
+}
+
+class CarouselState extends State {
+    constructor() {
+        super();
+        this.page = 0;
+    }
+
+    initState() {
+        if (this.widget.carouselController) {
+            this.widget.carouselController._attach(this);
+        }
+        this.page = this.widget.options.initialPage || 0;
+    }
+
+    nextPage() {
+        this.setState(() => {
+            if (this.page < this.widget.items.length - 1) {
+                this.page++;
+            } else if (this.widget.options.enableInfiniteScroll !== false) {
+                this.page = 0;
+            }
+        });
+    }
+
+    previousPage() {
+        this.setState(() => {
+            if (this.page > 0) {
+                this.page--;
+            } else if (this.widget.options.enableInfiniteScroll !== false) {
+                this.page = this.widget.items.length - 1;
+            }
+        });
+    }
+
+    jumpToPage(page) {
+        if (page >= 0 && page < this.widget.items.length) {
+            this.setState(() => {
+                this.page = page;
+            });
+        }
+    }
+
+    build(context) {
+        const theme = CarouselTheme.of(context) || {};
+
+        // Merge options
+        const height = this.widget.options.height || theme.height || 200.0;
+        const scrollDirection = this.widget.options.scrollDirection || theme.scrollDirection || Axis.horizontal;
+
+        // Very basic implementation: Show current item
+        // Real carousel needs gesture handling/scroll physics which ListView provides but mapping page index requires ScrollController work.
+        // For MVP: Display one item with simple buttons or swipe gesture detector on container. (Swiping implemented via horizontal drag)
+
+        const currentItem = this.widget.items[this.page];
+
+        return new GestureDetector({
+            onPanUpdate: (details) => {
+                // Simple swipe detection
+                if (details.delta.dx < -10) {
+                    this.nextPage();
+                } else if (details.delta.dx > 10) {
+                    this.previousPage();
+                }
+            },
+            child: new Container({
+                height: height,
+                width: '100%',
+                child: currentItem ? currentItem : new Container(),
+                style: {
+                    overflow: 'hidden',
+                    // Flex alignment
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                }
+            })
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/carousel_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/carousel_theme.js
new file mode 100644
index 00000000..d808f59a
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/carousel_theme.js
@@ -0,0 +1,56 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class CarouselThemeData {
+    constructor({
+        backgroundColor,
+        elevation,
+        height,
+        aspectRatio,
+        viewportFraction,
+        initialPage,
+        enableInfiniteScroll,
+        reverse,
+        autoPlay,
+        autoPlayInterval,
+        autoPlayAnimationDuration,
+        autoPlayCurve,
+        enlargeCenterPage,
+        scrollDirection,
+    } = {}) {
+        this.backgroundColor = backgroundColor;
+        this.elevation = elevation;
+        this.height = height;
+        this.aspectRatio = aspectRatio;
+        this.viewportFraction = viewportFraction;
+        this.initialPage = initialPage;
+        this.enableInfiniteScroll = enableInfiniteScroll;
+        this.reverse = reverse;
+        this.autoPlay = autoPlay;
+        this.autoPlayInterval = autoPlayInterval;
+        this.autoPlayAnimationDuration = autoPlayAnimationDuration;
+        this.autoPlayCurve = autoPlayCurve;
+        this.enlargeCenterPage = enlargeCenterPage;
+        this.scrollDirection = scrollDirection;
+    }
+}
+
+class CarouselTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(CarouselTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    CarouselTheme,
+    CarouselThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/checkbox.js b/packages/flutterjs_material/flutterjs_material/src/material/checkbox.js
new file mode 100644
index 00000000..6f9fe8f7
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/checkbox.js
@@ -0,0 +1,352 @@
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { CheckboxThemeData } from '../utils/checkbox_theme.js';
+import { Color } from '../utils/color.js';
+import { Theme } from './theme.js';
+
+/**
+ * Checkbox - Material Design checkbox widget
+ */
+class Checkbox extends StatefulWidget {
+    constructor({
+        key = null,
+        value = false,
+        tristate = false,
+        onChanged = null,
+        activeColor = null,
+        fillColor = null,
+        checkColor = null,
+        focusColor = null,
+        hoverColor = null,
+        overlayColor = null,
+        splashRadius = null,
+        materialTapTargetSize = 'padded',
+        visualDensity = null,
+        focusNode = null,
+        autofocus = false,
+        shape = null,
+        side = null
+    } = {}) {
+        super(key);
+        this.value = value;
+        this.tristate = tristate;
+        this.onChanged = onChanged;
+        this.activeColor = activeColor;
+        this.fillColor = fillColor;
+        this.checkColor = checkColor;
+        this.focusColor = focusColor;
+        this.hoverColor = hoverColor;
+        this.overlayColor = overlayColor;
+        this.splashRadius = splashRadius;
+        this.materialTapTargetSize = materialTapTargetSize;
+        this.visualDensity = visualDensity;
+        this.focusNode = focusNode;
+        this.autofocus = autofocus;
+        this.shape = shape;
+        this.side = side;
+    }
+
+    createState() {
+        return new CheckboxState();
+    }
+}
+
+/**
+ * CheckboxState - State management for Checkbox
+ */
+class CheckboxState extends State {
+    constructor() {
+        super();
+        this.isHovered = false;
+        this.isFocused = false;
+        this.isPressed = false;
+    }
+
+    _handleClick(event) {
+        event.stopPropagation();
+
+        if (this.widget.onChanged == null) return;
+
+        if (this.widget.tristate) {
+            // Cycle through: false -> true -> null -> false
+            let newValue;
+            if (this.widget.value === false) {
+                newValue = true;
+            } else if (this.widget.value === true) {
+                newValue = null;
+            } else {
+                newValue = false;
+            }
+            this.widget.onChanged(newValue);
+        } else {
+            this.widget.onChanged(!this.widget.value);
+        }
+    }
+
+    _handleMouseEnter() {
+        this.setState(() => {
+            this.isHovered = true;
+        });
+    }
+
+    _handleMouseLeave() {
+        this.setState(() => {
+            this.isHovered = false;
+            this.isPressed = false;
+        });
+    }
+
+    _handleMouseDown() {
+        this.setState(() => {
+            this.isPressed = true;
+        });
+    }
+
+    _handleMouseUp() {
+        this.setState(() => {
+            this.isPressed = false;
+        });
+    }
+
+    _handleFocus() {
+        this.setState(() => {
+            this.isFocused = true;
+        });
+    }
+
+    _handleBlur() {
+        this.setState(() => {
+            this.isFocused = false;
+        });
+    }
+
+    build(context) {
+        const isDisabled = this.widget.onChanged == null;
+        const isChecked = this.widget.value === true;
+        const isIndeterminate = this.widget.value == null;
+
+        const elementId = context.element?.getElementId?.() || `checkbox-${Date.now()}`;
+        const widgetPath = context.element?.getWidgetPath?.() || 'Checkbox';
+
+        // Get theme
+        const theme = context.checkboxTheme || new CheckboxThemeData();
+
+        // Create implicit theme/colorScheme access
+        const appTheme = Theme.of(context);
+        const colorScheme = appTheme.colorScheme;
+
+        // Determine colors using theme
+        const fillColor = this._getFillColor(isChecked, isIndeterminate, isDisabled, theme, colorScheme);
+        const borderColor = this._getBorderColor(isChecked, isIndeterminate, isDisabled, theme, colorScheme);
+        const checkColor = this.widget.checkColor
+            ? new Color(this.widget.checkColor).toCSSString()
+            : colorScheme.onPrimary; // M3 default
+
+        // Container styles
+        const containerStyles = {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: `${theme.getCheckboxSize()}px`,
+            height: `${theme.getCheckboxSize()}px`,
+            borderRadius: '50%',
+            cursor: isDisabled ? 'default' : 'pointer',
+            position: 'relative',
+            transition: 'background-color 0.15s ease',
+            backgroundColor: this._getOverlayColor(isDisabled, theme, colorScheme)
+        };
+
+        // Checkbox box styles
+        const boxStyles = {
+            width: '18px',
+            height: '18px',
+            borderRadius: this.widget.shape?.borderRadius || '2px',
+            border: `2px solid ${borderColor}`,
+            backgroundColor: fillColor,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            transition: `all ${theme.animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+            position: 'relative'
+        };
+
+        // Build check mark or indeterminate line
+        let checkMark = null;
+        if (isChecked) {
+            // Ensure checkColor is string
+            const safeCheckColor = typeof checkColor === 'object' && checkColor.toCSSString
+                ? checkColor.toCSSString()
+                : checkColor;
+            checkMark = this._buildCheckMark(safeCheckColor);
+        } else if (isIndeterminate) {
+            const safeCheckColor = typeof checkColor === 'object' && checkColor.toCSSString
+                ? checkColor.toCSSString()
+                : checkColor;
+            checkMark = this._buildIndeterminateMark(safeCheckColor);
+        }
+
+        const events = {
+            click: (e) => this._handleClick(e),
+            mouseenter: () => this._handleMouseEnter(),
+            mouseleave: () => this._handleMouseLeave(),
+            mousedown: () => this._handleMouseDown(),
+            mouseup: () => this._handleMouseUp(),
+            focus: () => this._handleFocus(),
+            blur: () => this._handleBlur()
+        };
+
+        const containerProps = {
+            className: 'fjs-checkbox-container',
+            style: containerStyles,
+            tabIndex: isDisabled ? -1 : 0,
+            role: 'checkbox',
+            'aria-checked': isIndeterminate ? 'mixed' : isChecked,
+            'aria-disabled': isDisabled,
+            'data-element-id': elementId,
+            'data-widget-path': widgetPath,
+            'data-widget': 'Checkbox',
+            'data-checked': isChecked,
+            'data-indeterminate': isIndeterminate,
+            'data-disabled': isDisabled
+        };
+
+        const box = new VNode({
+            tag: 'div',
+            props: {
+                className: 'fjs-checkbox-box',
+                style: boxStyles
+            },
+            children: checkMark ? [checkMark] : []
+        });
+
+        return new VNode({
+            tag: 'div',
+            props: containerProps,
+            children: [box],
+            events,
+            key: this.widget.key
+        });
+    }
+
+    _getFillColor(isChecked, isIndeterminate, isDisabled, theme, colorScheme) {
+        if (isDisabled) {
+            const disabledColor = new Color(colorScheme.onSurface).withOpacity(0.38);
+            return isChecked || isIndeterminate ? disabledColor.toCSSString() : 'transparent';
+        }
+
+        if (this.widget.fillColor) {
+            return new Color(this.widget.fillColor).toCSSString();
+        }
+
+        if (this.widget.activeColor && (isChecked || isIndeterminate)) {
+            return new Color(this.widget.activeColor).toCSSString();
+        }
+
+        if (isChecked || isIndeterminate) {
+            return theme.fillColor || colorScheme.primary;
+        }
+
+        return 'transparent';
+    }
+
+    _getBorderColor(isChecked, isIndeterminate, isDisabled, theme, colorScheme) {
+        if (isDisabled) {
+            return new Color(colorScheme.onSurface).withOpacity(0.38).toCSSString();
+        }
+
+        if (this.widget.side?.color) {
+            return new Color(this.widget.side.color).toCSSString();
+        }
+
+        if (this.widget.activeColor && (isChecked || isIndeterminate)) {
+            return new Color(this.widget.activeColor).toCSSString();
+        }
+
+        if (isChecked || isIndeterminate) {
+            return colorScheme.primary || '#6200ee';
+        }
+
+        // Unselected border color - M3 uses onSurfaceVariant
+        return colorScheme.onSurfaceVariant || '#49454F';
+    }
+
+    _getOverlayColor(isDisabled, theme, colorScheme) {
+        if (isDisabled) {
+            return 'transparent';
+        }
+
+        if (this.widget.overlayColor && this.isPressed) {
+            return new Color(this.widget.overlayColor).withOpacity(0.24).toCSSString();
+        }
+
+        if (this.widget.focusColor && this.isFocused) {
+            return new Color(this.widget.focusColor).withOpacity(0.12).toCSSString();
+        }
+
+        if (this.widget.hoverColor && this.isHovered) {
+            return new Color(this.widget.hoverColor).withOpacity(0.08).toCSSString();
+        }
+
+        // Use theme colors
+        // If theme has logic, let it handle it, but fallback to Primary with Opacity
+        if (this.isPressed) {
+            // Pressed is usually Primary with high opacity
+            return new Color(colorScheme.primary).withOpacity(0.12).toCSSString();
+        }
+
+        if (this.isFocused) {
+            return new Color(colorScheme.onSurface).withOpacity(0.12).toCSSString();
+        }
+
+        if (this.isHovered) {
+            return new Color(colorScheme.onSurface).withOpacity(0.08).toCSSString();
+        }
+
+        return 'transparent';
+    }
+
+    _buildCheckMark(checkColor) {
+        // SVG check mark with proper SVG attributes
+        return new VNode({
+            tag: 'svg',
+            props: {
+                width: '14',
+                height: '14',
+                viewBox: '0 0 14 14',
+                style: {
+                    position: 'absolute'
+                }
+            },
+            children: [
+                new VNode({
+                    tag: 'path',
+                    props: {
+                        d: 'M2 7l4 4 6-8',
+                        fill: 'none',
+                        stroke: checkColor,
+                        'stroke-width': '2',
+                        'stroke-linecap': 'round',
+                        'stroke-linejoin': 'round'
+                    }
+                })
+            ]
+        });
+    }
+
+    _buildIndeterminateMark(checkColor) {
+        return new VNode({
+            tag: 'div',
+            props: {
+                style: {
+                    width: '10px',
+                    height: '2px',
+                    backgroundColor: checkColor,
+                    borderRadius: '1px',
+                    pointerEvents: 'none'
+                }
+            }
+        });
+    }
+}
+
+export { Checkbox, CheckboxState };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/checkbox_list_tile.js b/packages/flutterjs_material/flutterjs_material/src/material/checkbox_list_tile.js
new file mode 100644
index 00000000..f1fb5ef7
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/checkbox_list_tile.js
@@ -0,0 +1,99 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { Checkbox } from './checkbox.js';
+import { ListTile } from './list_tile.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { Color } from '../utils/color.js';
+
+/**
+ * CheckboxListTile - A ListTile with a Checkbox
+ */
+class CheckboxListTile extends StatelessWidget {
+    constructor({
+        key = null,
+        value = false,
+        onChanged = null,
+        activeColor = null,
+        checkColor = null,
+        title = null,
+        subtitle = null,
+        isThreeLine = false,
+        dense = false,
+        secondary = null,
+        selected = false,
+        controlAffinity = 'trailing', // 'leading', 'trailing', 'platform'
+        autofocus = false,
+        tristate = false,
+        shape = null,
+        selectedTileColor = null,
+        tileColor = null,
+        visualDensity = null,
+        focusNode = null,
+        enableFeedback = null,
+        contentPadding = null
+    } = {}) {
+        super(key);
+        this.value = value;
+        this.onChanged = onChanged;
+        this.activeColor = activeColor;
+        this.checkColor = checkColor;
+        this.title = title;
+        this.subtitle = subtitle;
+        this.isThreeLine = isThreeLine;
+        this.dense = dense;
+        this.secondary = secondary;
+        this.selected = selected;
+        this.controlAffinity = controlAffinity;
+        this.autofocus = autofocus;
+        this.tristate = tristate;
+        this.shape = shape;
+        this.selectedTileColor = selectedTileColor;
+        this.tileColor = tileColor;
+        this.visualDensity = visualDensity;
+        this.focusNode = focusNode;
+        this.enableFeedback = enableFeedback;
+        this.contentPadding = contentPadding;
+    }
+
+    build(context) {
+        const checkbox = new Checkbox({
+            value: this.value,
+            onChanged: this.onChanged,
+            activeColor: this.activeColor,
+            checkColor: this.checkColor,
+            tristate: this.tristate,
+            autofocus: this.autofocus
+        });
+
+        let leading, trailing;
+        if (this.controlAffinity === 'leading') {
+            leading = checkbox;
+            trailing = this.secondary;
+        } else {
+            leading = this.secondary;
+            trailing = checkbox;
+        }
+
+        return new ListTile({
+            leading,
+            title: this.title,
+            subtitle: this.subtitle,
+            trailing,
+            isThreeLine: this.isThreeLine,
+            dense: this.dense,
+            enabled: this.onChanged != null,
+            onTap: this.onChanged ? () => this.onChanged(!this.value) : null,
+            selected: this.selected,
+            autofocus: this.autofocus,
+            contentPadding: this.contentPadding,
+            shape: this.shape,
+            selectedTileColor: this.selectedTileColor,
+            tileColor: this.tileColor,
+            visualDensity: this.visualDensity,
+            focusNode: this.focusNode,
+            enableFeedback: this.enableFeedback
+        });
+    }
+}
+
+export { CheckboxListTile };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/chip.js b/packages/flutterjs_material/flutterjs_material/src/material/chip.js
new file mode 100644
index 00000000..0d6f81c8
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/chip.js
@@ -0,0 +1,100 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { Container, BoxDecoration } from './container.js';
+import { Row, SizedBox } from '../widgets/widgets.js';
+import { Icon, Icons } from './icon.js';
+import { GestureDetector } from './gesture_detector.js';
+import { Colors } from './color.js';
+import { BorderRadius } from '../utils/border_radius.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { MainAxisSize } from '../utils/utils.js';
+import { Theme } from './theme.js';
+
+export class Chip extends StatelessWidget {
+    constructor({
+        key,
+        avatar,
+        label,
+        labelStyle,
+        labelPadding,
+        deleteIcon,
+        onDeleted,
+        deleteIconColor,
+        useDeleteButtonTooltip = true,
+        deleteButtonTooltipMessage,
+        side,
+        shape,
+        clipBehavior = 'none',
+        focusNode,
+        autofocus = false,
+        backgroundColor,
+        padding,
+        visualDensity,
+        materialTapTargetSize,
+        elevation,
+        shadowColor,
+        surfaceTintColor,
+        iconTheme,
+    } = {}) {
+        super(key);
+        this.avatar = avatar;
+        this.label = label;
+        this.labelStyle = labelStyle;
+        this.labelPadding = labelPadding;
+        this.deleteIcon = deleteIcon;
+        this.onDeleted = onDeleted;
+        this.deleteIconColor = deleteIconColor;
+        this.backgroundColor = backgroundColor;
+        this.padding = padding;
+        this.elevation = elevation;
+    }
+
+    build(context) {
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+
+        // M3 Chip defaults
+        // InputChip/AssistChip usually: surfaceContainerLow or explicit colors
+        // Collection/Filter: secondaryContainer when selected
+        // We'll treat generic Chip as FilterChip-like or AssistChip
+        // Default: surfaceContainerLow (or equivalent) for unselected, outline variant for border
+        // Let's use secondaryContainer to make it look distinct "chip-like"
+
+        const backgroundColor = this.backgroundColor || colorScheme.secondaryContainer || '#E8DEF8';
+        const onColor = colorScheme.onSecondaryContainer || '#1D192B';
+        const deleteIconColor = this.deleteIconColor || onColor;
+
+        const children = [];
+
+        if (this.avatar) {
+            children.push(this.avatar);
+            children.push(new SizedBox({ width: 8.0 }));
+        }
+
+        // Apply style to label if it's text
+        // Ideally we wrap in DefaultTextStyle
+        children.push(new Container({
+            style: { color: onColor },
+            child: this.label
+        }));
+
+        if (this.onDeleted) {
+            children.push(new SizedBox({ width: 8.0 }));
+            children.push(new GestureDetector({
+                onTap: this.onDeleted,
+                child: this.deleteIcon || new Icon(Icons.cancel, { size: 18.0, color: deleteIconColor })
+            }));
+        }
+
+        return new Container({
+            padding: this.padding || EdgeInsets.symmetric({ horizontal: 12.0, vertical: 6.0 }), // M3 slightly taller 32dp
+            decoration: new BoxDecoration({
+                color: backgroundColor,
+                borderRadius: BorderRadius.all(8.0), // M3 uses 8dp usually, Stadium (16) for Assist
+            }),
+            child: new Row({
+                mainAxisSize: MainAxisSize.min,
+                children: children
+            })
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/chip_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/chip_theme.js
new file mode 100644
index 00000000..ab84012f
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/chip_theme.js
@@ -0,0 +1,66 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class ChipThemeData {
+    constructor({
+        backgroundColor,
+        deleteIconColor,
+        disabledColor,
+        selectedColor,
+        secondarySelectedColor,
+        shadowColor,
+        surfaceTintColor,
+        selectedShadowColor,
+        showCheckmark,
+        checkmarkColor,
+        labelPadding,
+        padding,
+        side,
+        shape,
+        labelStyle,
+        secondaryLabelStyle,
+        brightness,
+        elevation,
+        pressElevation,
+    } = {}) {
+        this.backgroundColor = backgroundColor;
+        this.deleteIconColor = deleteIconColor;
+        this.disabledColor = disabledColor;
+        this.selectedColor = selectedColor;
+        this.secondarySelectedColor = secondarySelectedColor;
+        this.shadowColor = shadowColor;
+        this.surfaceTintColor = surfaceTintColor;
+        this.selectedShadowColor = selectedShadowColor;
+        this.showCheckmark = showCheckmark;
+        this.checkmarkColor = checkmarkColor;
+        this.labelPadding = labelPadding;
+        this.padding = padding;
+        this.side = side;
+        this.shape = shape;
+        this.labelStyle = labelStyle;
+        this.secondaryLabelStyle = secondaryLabelStyle;
+        this.brightness = brightness;
+        this.elevation = elevation;
+        this.pressElevation = pressElevation;
+    }
+}
+
+class ChipTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(ChipTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    ChipTheme,
+    ChipThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/circle_avatar.js b/packages/flutterjs_material/flutterjs_material/src/material/circle_avatar.js
new file mode 100644
index 00000000..faf6c0bc
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/circle_avatar.js
@@ -0,0 +1,124 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { Container, BoxDecoration } from './container.js';
+import { Center } from '../widgets/compoment/center.js';
+import { BorderRadius } from '../utils/border_radius.js';
+import { Theme } from './theme.js';
+import { Colors } from './color.js';
+import { BoxFit } from '../utils/utils.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { buildChildWidget } from '../utils/build_helper.js';
+
+import { SizedBox } from '../widgets/compoment/sized_box.js';
+
+class CircleAvatar extends StatelessWidget {
+    constructor({
+        key,
+        child,
+        backgroundColor,
+        backgroundImage, // String URL or ImageProvider? Assuming String URL for web simplicity for now, or Widget.
+        foregroundImage,
+        onBackgroundImageError,
+        onForegroundImageError,
+        foregroundColor,
+        radius,
+        minRadius,
+        maxRadius,
+    } = {}) {
+        super(key);
+        this.child = child;
+        this.backgroundColor = backgroundColor;
+        this.backgroundImage = backgroundImage;
+        this.foregroundImage = foregroundImage;
+        this.onBackgroundImageError = onBackgroundImageError;
+        this.onForegroundImageError = onForegroundImageError;
+        this.foregroundColor = foregroundColor;
+        this.radius = radius;
+        this.minRadius = minRadius;
+        this.maxRadius = maxRadius;
+    }
+
+    build(context) {
+        // Theme defaults
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+
+        const effectiveBgColor = this.backgroundColor || colorScheme.primaryContainer || '#EADDFF';
+        const effectiveFgColor = this.foregroundColor || colorScheme.onPrimaryContainer || '#21005D';
+
+        const effectiveRadius = this.radius || this.maxRadius || this.minRadius || 20.0;
+        const diameter = effectiveRadius * 2;
+
+        let decorationImage;
+        if (this.backgroundImage) {
+            // Check if string (URL) or ImageProvider concept used. Assuming string URL for simplicity in JS port often
+            if (typeof this.backgroundImage === 'string') {
+                decorationImage = {
+                    image: `url("${this.backgroundImage}")`,
+                    fit: BoxFit.cover
+                };
+            }
+        }
+
+        const decoration = new BoxDecoration({
+            color: effectiveBgColor,
+            borderRadius: BorderRadius.circular(effectiveRadius),
+            image: decorationImage
+        });
+
+        // Content
+        let content = this.child;
+        if (content && effectiveFgColor) {
+            // Wrap in text style wrapper to enforce color inheritance
+            // Handle Color object vs string
+            const cssColor = typeof effectiveFgColor.toCSSString === 'function'
+                ? effectiveFgColor.toCSSString()
+                : effectiveFgColor;
+
+            content = new _TextStyleWrapper({
+                child: content,
+                style: { color: cssColor }
+            });
+        }
+
+        // Wrap in SizedBox to prevent shrinking in Flex layouts (this fixes the oval issue)
+        return new SizedBox({
+            width: diameter,
+            height: diameter,
+            child: new Container({
+                width: diameter,
+                height: diameter,
+                decoration: decoration,
+                child: new Center({ child: content })
+            })
+        });
+    }
+}
+
+class _TextStyleWrapper extends StatelessWidget {
+    constructor({ key, child, style }) {
+        super(key);
+        this.child = child;
+        this.style = style;
+    }
+
+    build(context) {
+        return new VNode({
+            tag: 'div',
+            props: {
+                style: {
+                    display: 'flex', // Ensure center alignment works if parent is center
+                    width: '100%',
+                    height: '100%',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    ...this.style
+                }
+            },
+            children: [buildChildWidget(this.child, context)]
+        });
+    }
+}
+
+
+
+export { CircleAvatar };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/color.js b/packages/flutterjs_material/flutterjs_material/src/material/color.js
new file mode 100644
index 00000000..c481f811
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/color.js
@@ -0,0 +1,546 @@
+import { Color } from '../utils/color.js';
+
+// ============================================================================
+// COLOR SWATCH
+// ============================================================================
+
+class ColorSwatch extends Color {
+  constructor(primary, swatch) {
+    super(primary);
+    this._swatch = swatch || {};
+  }
+
+  /**
+   * Get color by shade number
+   */
+  get(shade) {
+    return this._swatch[shade];
+  }
+
+  /**
+   * Direct access via bracket notation
+   */
+  [Symbol.for('get')](shade) {
+    return this._swatch[shade];
+  }
+}
+
+// ============================================================================
+// MATERIAL COLOR CLASS
+// ============================================================================
+
+class MaterialColor extends ColorSwatch {
+  constructor(primary, swatch) {
+    super(primary, swatch);
+  }
+
+  get shade50() { return this._swatch[50]; }
+  get shade100() { return this._swatch[100]; }
+  get shade200() { return this._swatch[200]; }
+  get shade300() { return this._swatch[300]; }
+  get shade400() { return this._swatch[400]; }
+  get shade500() { return this._swatch[500]; }
+  get shade600() { return this._swatch[600]; }
+  get shade700() { return this._swatch[700]; }
+  get shade800() { return this._swatch[800]; }
+  get shade900() { return this._swatch[900]; }
+
+  /**
+   * Get shade by index
+   */
+  getShade(index) {
+    return this._swatch[index];
+  }
+}
+
+// ============================================================================
+// MATERIAL ACCENT COLOR CLASS
+// ============================================================================
+
+class MaterialAccentColor extends ColorSwatch {
+  constructor(primary, swatch) {
+    super(primary, swatch);
+  }
+
+  get shade100() { return this._swatch[100]; }
+  get shade200() { return this._swatch[200]; }
+  get shade400() { return this._swatch[400]; }
+  get shade700() { return this._swatch[700]; }
+
+  /**
+   * Get shade by index
+   */
+  getShade(index) {
+    return this._swatch[index];
+  }
+}
+
+// ============================================================================
+// MATERIAL COLORS
+// ============================================================================
+
+class Colors {
+  // Transparency
+  static transparent = new Color(0x00000000);
+
+  // Black and White
+  static black = new Color(0xFF000000);
+  static black87 = new Color(0xDD000000);
+  static black54 = new Color(0x8A000000);
+  static black45 = new Color(0x73000000);
+  static black38 = new Color(0x61000000);
+  static black26 = new Color(0x42000000);
+  static black12 = new Color(0x1F000000);
+
+  static white = new Color(0xFFFFFFFF);
+  static white70 = new Color(0xB3FFFFFF);
+  static white60 = new Color(0x99FFFFFF);
+  static white54 = new Color(0x8AFFFFFF);
+  static white38 = new Color(0x62FFFFFF);
+  static white30 = new Color(0x4DFFFFFF);
+  static white24 = new Color(0x3DFFFFFF);
+  static white12 = new Color(0x1FFFFFFF);
+  static white10 = new Color(0x1AFFFFFF);
+
+  // RED
+  static red = new MaterialColor(0xFFF44336, {
+    50: new Color(0xFFFFEBEE),
+    100: new Color(0xFFFFCDD2),
+    200: new Color(0xFFEF9A9A),
+    300: new Color(0xFFE57373),
+    400: new Color(0xFFEF5350),
+    500: new Color(0xFFF44336),
+    600: new Color(0xFFE53935),
+    700: new Color(0xFFD32F2F),
+    800: new Color(0xFFC62828),
+    900: new Color(0xFFB71C1C)
+  });
+
+  static redAccent = new MaterialAccentColor(0xFFFF5252, {
+    100: new Color(0xFFFF8A80),
+    200: new Color(0xFFFF5252),
+    400: new Color(0xFFFF1744),
+    700: new Color(0xFFD50000)
+  });
+
+  // PINK
+  static pink = new MaterialColor(0xFFE91E63, {
+    50: new Color(0xFFFCE4EC),
+    100: new Color(0xFFF8BBD0),
+    200: new Color(0xFFF48FB1),
+    300: new Color(0xFFF06292),
+    400: new Color(0xFFEC407A),
+    500: new Color(0xFFE91E63),
+    600: new Color(0xFFD81B60),
+    700: new Color(0xFFC2185B),
+    800: new Color(0xFFAD1457),
+    900: new Color(0xFF880E4F)
+  });
+
+  static pinkAccent = new MaterialAccentColor(0xFFFF4081, {
+    100: new Color(0xFFFF80AB),
+    200: new Color(0xFFFF4081),
+    400: new Color(0xFFF50057),
+    700: new Color(0xFFC51162)
+  });
+
+  // PURPLE
+  static purple = new MaterialColor(0xFF9C27B0, {
+    50: new Color(0xFFF3E5F5),
+    100: new Color(0xFFE1BEE7),
+    200: new Color(0xFFCE93D8),
+    300: new Color(0xFFBA68C8),
+    400: new Color(0xFFAB47BC),
+    500: new Color(0xFF9C27B0),
+    600: new Color(0xFF8E24AA),
+    700: new Color(0xFF7B1FA2),
+    800: new Color(0xFF6A1B9A),
+    900: new Color(0xFF4A148C)
+  });
+
+  static purpleAccent = new MaterialAccentColor(0xFFE040FB, {
+    100: new Color(0xFFEA80FC),
+    200: new Color(0xFFE040FB),
+    400: new Color(0xFFD500F9),
+    700: new Color(0xFFAA00FF)
+  });
+
+  // DEEP PURPLE
+  static deepPurple = new MaterialColor(0xFF673AB7, {
+    50: new Color(0xFFEDE7F6),
+    100: new Color(0xFFD1C4E9),
+    200: new Color(0xFFB39DDB),
+    300: new Color(0xFF9575CD),
+    400: new Color(0xFF7E57C2),
+    500: new Color(0xFF673AB7),
+    600: new Color(0xFF5E35B1),
+    700: new Color(0xFF512DA8),
+    800: new Color(0xFF4527A0),
+    900: new Color(0xFF311B92)
+  });
+
+  static deepPurpleAccent = new MaterialAccentColor(0xFF7C4DFF, {
+    100: new Color(0xFFB388FF),
+    200: new Color(0xFF7C4DFF),
+    400: new Color(0xFF651FFF),
+    700: new Color(0xFF6200EA)
+  });
+
+  // INDIGO
+  static indigo = new MaterialColor(0xFF3F51B5, {
+    50: new Color(0xFFE8EAF6),
+    100: new Color(0xFFC5CAE9),
+    200: new Color(0xFF9FA8DA),
+    300: new Color(0xFF7986CB),
+    400: new Color(0xFF5C6BC0),
+    500: new Color(0xFF3F51B5),
+    600: new Color(0xFF3949AB),
+    700: new Color(0xFF303F9F),
+    800: new Color(0xFF283593),
+    900: new Color(0xFF1A237E)
+  });
+
+  static indigoAccent = new MaterialAccentColor(0xFF536DFE, {
+    100: new Color(0xFF8C9EFF),
+    200: new Color(0xFF536DFE),
+    400: new Color(0xFF3D5AFE),
+    700: new Color(0xFF304FFE)
+  });
+
+  // BLUE
+  static blue = new MaterialColor(0xFF2196F3, {
+    50: new Color(0xFFE3F2FD),
+    100: new Color(0xFFBBDEFB),
+    200: new Color(0xFF90CAF9),
+    300: new Color(0xFF64B5F6),
+    400: new Color(0xFF42A5F5),
+    500: new Color(0xFF2196F3),
+    600: new Color(0xFF1E88E5),
+    700: new Color(0xFF1976D2),
+    800: new Color(0xFF1565C0),
+    900: new Color(0xFF0D47A1)
+  });
+
+  static blueAccent = new MaterialAccentColor(0xFF448AFF, {
+    100: new Color(0xFF82B1FF),
+    200: new Color(0xFF448AFF),
+    400: new Color(0xFF2979FF),
+    700: new Color(0xFF2962FF)
+  });
+
+  // LIGHT BLUE
+  static lightBlue = new MaterialColor(0xFF03A9F4, {
+    50: new Color(0xFFE1F5FE),
+    100: new Color(0xFFB3E5FC),
+    200: new Color(0xFF81D4FA),
+    300: new Color(0xFF4FC3F7),
+    400: new Color(0xFF29B6F6),
+    500: new Color(0xFF03A9F4),
+    600: new Color(0xFF039BE5),
+    700: new Color(0xFF0288D1),
+    800: new Color(0xFF0277BD),
+    900: new Color(0xFF01579B)
+  });
+
+  static lightBlueAccent = new MaterialAccentColor(0xFF40C4FF, {
+    100: new Color(0xFF80D8FF),
+    200: new Color(0xFF40C4FF),
+    400: new Color(0xFF00B0FF),
+    700: new Color(0xFF0091EA)
+  });
+
+  // CYAN
+  static cyan = new MaterialColor(0xFF00BCD4, {
+    50: new Color(0xFFE0F7FA),
+    100: new Color(0xFFB2EBF2),
+    200: new Color(0xFF80DEEA),
+    300: new Color(0xFF4DD0E1),
+    400: new Color(0xFF26C6DA),
+    500: new Color(0xFF00BCD4),
+    600: new Color(0xFF00ACC1),
+    700: new Color(0xFF0097A7),
+    800: new Color(0xFF00838F),
+    900: new Color(0xFF006064)
+  });
+
+  static cyanAccent = new MaterialAccentColor(0xFF18FFFF, {
+    100: new Color(0xFF84FFFF),
+    200: new Color(0xFF18FFFF),
+    400: new Color(0xFF00E5FF),
+    700: new Color(0xFF00B8D4)
+  });
+
+  // TEAL
+  static teal = new MaterialColor(0xFF009688, {
+    50: new Color(0xFFE0F2F1),
+    100: new Color(0xFFB2DFDB),
+    200: new Color(0xFF80CBC4),
+    300: new Color(0xFF4DB6AC),
+    400: new Color(0xFF26A69A),
+    500: new Color(0xFF009688),
+    600: new Color(0xFF00897B),
+    700: new Color(0xFF00796B),
+    800: new Color(0xFF00695C),
+    900: new Color(0xFF004D40)
+  });
+
+  static tealAccent = new MaterialAccentColor(0xFF64FFDA, {
+    100: new Color(0xFFA7FFEB),
+    200: new Color(0xFF64FFDA),
+    400: new Color(0xFF1DE9B6),
+    700: new Color(0xFF00BFA5)
+  });
+
+  // GREEN
+  static green = new MaterialColor(0xFF4CAF50, {
+    50: new Color(0xFFE8F5E9),
+    100: new Color(0xFFC8E6C9),
+    200: new Color(0xFFA5D6A7),
+    300: new Color(0xFF81C784),
+    400: new Color(0xFF66BB6A),
+    500: new Color(0xFF4CAF50),
+    600: new Color(0xFF43A047),
+    700: new Color(0xFF388E3C),
+    800: new Color(0xFF2E7D32),
+    900: new Color(0xFF1B5E20)
+  });
+
+  static greenAccent = new MaterialAccentColor(0xFF69F0AE, {
+    100: new Color(0xFFB9F6CA),
+    200: new Color(0xFF69F0AE),
+    400: new Color(0xFF00E676),
+    700: new Color(0xFF00C853)
+  });
+
+  // LIGHT GREEN
+  static lightGreen = new MaterialColor(0xFF8BC34A, {
+    50: new Color(0xFFF1F8E9),
+    100: new Color(0xFFDCEDC8),
+    200: new Color(0xFFC5E1A5),
+    300: new Color(0xFFAED581),
+    400: new Color(0xFF9CCC65),
+    500: new Color(0xFF8BC34A),
+    600: new Color(0xFF7CB342),
+    700: new Color(0xFF689F38),
+    800: new Color(0xFF558B2F),
+    900: new Color(0xFF33691E)
+  });
+
+  static lightGreenAccent = new MaterialAccentColor(0xFFB2FF59, {
+    100: new Color(0xFFCCFF90),
+    200: new Color(0xFFB2FF59),
+    400: new Color(0xFF76FF03),
+    700: new Color(0xFF64DD17)
+  });
+
+  // LIME
+  static lime = new MaterialColor(0xFFCDDC39, {
+    50: new Color(0xFFF9FBE7),
+    100: new Color(0xFFF0F4C3),
+    200: new Color(0xFFE6EE9C),
+    300: new Color(0xFFDCE775),
+    400: new Color(0xFFD4E157),
+    500: new Color(0xFFCDDC39),
+    600: new Color(0xFFC0CA33),
+    700: new Color(0xFFAFB42B),
+    800: new Color(0xFF9E9D24),
+    900: new Color(0xFF827717)
+  });
+
+  static limeAccent = new MaterialAccentColor(0xFFEEFF41, {
+    100: new Color(0xFFF4FF81),
+    200: new Color(0xFFEEFF41),
+    400: new Color(0xFFC6FF00),
+    700: new Color(0xFFAEEA00)
+  });
+
+  // YELLOW
+  static yellow = new MaterialColor(0xFFFFEB3B, {
+    50: new Color(0xFFFFFDE7),
+    100: new Color(0xFFFFF9C4),
+    200: new Color(0xFFFFF59D),
+    300: new Color(0xFFFFF176),
+    400: new Color(0xFFFFEE58),
+    500: new Color(0xFFFFEB3B),
+    600: new Color(0xFFFDD835),
+    700: new Color(0xFFFBC02D),
+    800: new Color(0xFFF9A825),
+    900: new Color(0xFFF57F17)
+  });
+
+  static yellowAccent = new MaterialAccentColor(0xFFFFFF00, {
+    100: new Color(0xFFFFFF8D),
+    200: new Color(0xFFFFFF00),
+    400: new Color(0xFFFFEA00),
+    700: new Color(0xFFFFD600)
+  });
+
+  // AMBER
+  static amber = new MaterialColor(0xFFFFC107, {
+    50: new Color(0xFFFFF8E1),
+    100: new Color(0xFFFFECB3),
+    200: new Color(0xFFFFE082),
+    300: new Color(0xFFFFD54F),
+    400: new Color(0xFFFFCA28),
+    500: new Color(0xFFFFC107),
+    600: new Color(0xFFFFB300),
+    700: new Color(0xFFFFA000),
+    800: new Color(0xFFFF8F00),
+    900: new Color(0xFFFF6F00)
+  });
+
+  static amberAccent = new MaterialAccentColor(0xFFFFD740, {
+    100: new Color(0xFFFFE57F),
+    200: new Color(0xFFFFD740),
+    400: new Color(0xFFFFC400),
+    700: new Color(0xFFFFAB00)
+  });
+
+  // ORANGE
+  static orange = new MaterialColor(0xFFFF9800, {
+    50: new Color(0xFFFFF3E0),
+    100: new Color(0xFFFFE0B2),
+    200: new Color(0xFFFFCC80),
+    300: new Color(0xFFFFB74D),
+    400: new Color(0xFFFFA726),
+    500: new Color(0xFFFF9800),
+    600: new Color(0xFFFB8C00),
+    700: new Color(0xFFF57C00),
+    800: new Color(0xFFEF6C00),
+    900: new Color(0xFFE65100)
+  });
+
+  static orangeAccent = new MaterialAccentColor(0xFFFFAB40, {
+    100: new Color(0xFFFFD180),
+    200: new Color(0xFFFFAB40),
+    400: new Color(0xFFFF9100),
+    700: new Color(0xFFFF6D00)
+  });
+
+  // DEEP ORANGE
+  static deepOrange = new MaterialColor(0xFFFF5722, {
+    50: new Color(0xFFFBE9E7),
+    100: new Color(0xFFFFCCBC),
+    200: new Color(0xFFFFAB91),
+    300: new Color(0xFFFF8A65),
+    400: new Color(0xFFFF7043),
+    500: new Color(0xFFFF5722),
+    600: new Color(0xFFF4511E),
+    700: new Color(0xFFE64A19),
+    800: new Color(0xFFD84315),
+    900: new Color(0xFFBF360C)
+  });
+
+  static deepOrangeAccent = new MaterialAccentColor(0xFFFF6E40, {
+    100: new Color(0xFFFF9E80),
+    200: new Color(0xFFFF6E40),
+    400: new Color(0xFFFF3D00),
+    700: new Color(0xFFDD2C00)
+  });
+
+  // BROWN
+  static brown = new MaterialColor(0xFF795548, {
+    50: new Color(0xFFEFEBE9),
+    100: new Color(0xFFD7CCC8),
+    200: new Color(0xFFBCAAA4),
+    300: new Color(0xFFA1887F),
+    400: new Color(0xFF8D6E63),
+    500: new Color(0xFF795548),
+    600: new Color(0xFF6D4C41),
+    700: new Color(0xFF5D4037),
+    800: new Color(0xFF4E342E),
+    900: new Color(0xFF3E2723)
+  });
+
+  // GREY
+  static grey = new MaterialColor(0xFF9E9E9E, {
+    50: new Color(0xFFFAFAFA),
+    100: new Color(0xFFF5F5F5),
+    200: new Color(0xFFEEEEEE),
+    300: new Color(0xFFE0E0E0),
+    350: new Color(0xFFD6D6D6),
+    400: new Color(0xFFBDBDBD),
+    500: new Color(0xFF9E9E9E),
+    600: new Color(0xFF757575),
+    700: new Color(0xFF616161),
+    800: new Color(0xFF424242),
+    850: new Color(0xFF303030),
+    900: new Color(0xFF212121)
+  });
+
+  // BLUE GREY
+  static blueGrey = new MaterialColor(0xFF607D8B, {
+    50: new Color(0xFFECEFF1),
+    100: new Color(0xFFCFD8DC),
+    200: new Color(0xFFB0BEC5),
+    300: new Color(0xFF90A4AE),
+    400: new Color(0xFF78909C),
+    500: new Color(0xFF607D8B),
+    600: new Color(0xFF546E7A),
+    700: new Color(0xFF455A64),
+    800: new Color(0xFF37474F),
+    900: new Color(0xFF263238)
+  });
+
+  /**
+   * All primary material colors
+   */
+  static get primaries() {
+    return [
+      Colors.red,
+      Colors.pink,
+      Colors.purple,
+      Colors.deepPurple,
+      Colors.indigo,
+      Colors.blue,
+      Colors.lightBlue,
+      Colors.cyan,
+      Colors.teal,
+      Colors.green,
+      Colors.lightGreen,
+      Colors.lime,
+      Colors.yellow,
+      Colors.amber,
+      Colors.orange,
+      Colors.deepOrange,
+      Colors.brown,
+      Colors.blueGrey
+    ];
+  }
+
+  /**
+   * All accent colors
+   */
+  static get accents() {
+    return [
+      Colors.redAccent,
+      Colors.pinkAccent,
+      Colors.purpleAccent,
+      Colors.deepPurpleAccent,
+      Colors.indigoAccent,
+      Colors.blueAccent,
+      Colors.lightBlueAccent,
+      Colors.cyanAccent,
+      Colors.tealAccent,
+      Colors.greenAccent,
+      Colors.lightGreenAccent,
+      Colors.limeAccent,
+      Colors.yellowAccent,
+      Colors.amberAccent,
+      Colors.orangeAccent,
+      Colors.deepOrangeAccent
+    ];
+  }
+}
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+export {
+  Color,
+  ColorSwatch,
+  MaterialColor,
+  MaterialAccentColor,
+  Colors
+};
\ No newline at end of file
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/color_scheme.js b/packages/flutterjs_material/flutterjs_material/src/material/color_scheme.js
new file mode 100644
index 00000000..e1849037
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/color_scheme.js
@@ -0,0 +1,274 @@
+
+import { Colors } from './color.js';
+
+// ============================================================================
+// COLOR SCHEME
+// ============================================================================
+
+export class ColorScheme {
+    constructor({
+        brightness,
+        primary,
+        onPrimary,
+        primaryContainer,
+        onPrimaryContainer,
+        secondary,
+        onSecondary,
+        secondaryContainer,
+        onSecondaryContainer,
+        tertiary,
+        onTertiary,
+        tertiaryContainer,
+        onTertiaryContainer,
+        error,
+        onError,
+        errorContainer,
+        onErrorContainer,
+        background,
+        onBackground,
+        surface,
+        onSurface,
+        surfaceVariant,
+        onSurfaceVariant,
+        outline,
+        outlineVariant,
+        shadow,
+        scrim,
+        inverseSurface,
+        onInverseSurface,
+        inversePrimary,
+        surfaceTint,
+        // Material 3 Surface Tones
+        surfaceContainerLowest,
+        surfaceContainerLow,
+        surfaceContainer,
+        surfaceContainerHigh,
+        surfaceContainerHighest,
+    }) {
+        this.brightness = brightness;
+        this.primary = primary;
+        this.onPrimary = onPrimary;
+        this.primaryContainer = primaryContainer;
+        this.onPrimaryContainer = onPrimaryContainer;
+        this.secondary = secondary;
+        this.onSecondary = onSecondary;
+        this.secondaryContainer = secondaryContainer;
+        this.onSecondaryContainer = onSecondaryContainer;
+        this.tertiary = tertiary;
+        this.onTertiary = onTertiary;
+        this.tertiaryContainer = tertiaryContainer;
+        this.onTertiaryContainer = onTertiaryContainer;
+        this.error = error;
+        this.onError = onError;
+        this.errorContainer = errorContainer;
+        this.onErrorContainer = onErrorContainer;
+        this.background = background;
+        this.onBackground = onBackground;
+        this.surface = surface;
+        this.onSurface = onSurface;
+        this.surfaceVariant = surfaceVariant;
+        this.onSurfaceVariant = onSurfaceVariant;
+        this.outline = outline;
+        this.outlineVariant = outlineVariant;
+        this.shadow = shadow;
+        this.scrim = scrim;
+        this.inverseSurface = inverseSurface;
+        this.onInverseSurface = onInverseSurface;
+        this.inversePrimary = inversePrimary;
+        this.surfaceTint = surfaceTint;
+
+        // Material 3 Surface Tones
+        this.surfaceContainerLowest = surfaceContainerLowest;
+        this.surfaceContainerLow = surfaceContainerLow;
+        this.surfaceContainer = surfaceContainer;
+        this.surfaceContainerHigh = surfaceContainerHigh;
+        this.surfaceContainerHighest = surfaceContainerHighest;
+    }
+
+    static fromSeed({
+        seedColor,
+        brightness = 'light',
+        primary = null,
+        onPrimary = null,
+        primaryContainer = null,
+        onPrimaryContainer = null,
+        secondary = null,
+        onSecondary = null,
+        secondaryContainer = null,
+        onSecondaryContainer = null,
+        tertiary = null,
+        onTertiary = null,
+        tertiaryContainer = null,
+        onTertiaryContainer = null,
+        error = null,
+        onError = null,
+        errorContainer = null,
+        onErrorContainer = null,
+        background = null,
+        onBackground = null,
+        surface = null,
+        onSurface = null,
+        surfaceVariant = null,
+        onSurfaceVariant = null,
+        outline = null,
+        outlineVariant = null,
+        shadow = null,
+        scrim = null,
+        inverseSurface = null,
+        onInverseSurface = null,
+        inversePrimary = null,
+        surfaceTint = null,
+        // Surface Tones Override
+        surfaceContainerLowest = null,
+        surfaceContainerLow = null,
+        surfaceContainer = null,
+        surfaceContainerHigh = null,
+        surfaceContainerHighest = null,
+    }) {
+        // simplified implementation of material 3 color generation
+        const isDark = brightness === 'dark';
+
+        // Core palette generation (mocked for now)
+        const defaults = isDark ? this.dark() : this.light();
+
+        // If seed color is provided, we should ideally generate palette
+        // For now we'll just use the seed as primary and derive rough variants
+
+        const derivedPrimary = seedColor || defaults.primary;
+
+        return new ColorScheme({
+            brightness,
+            primary: primary || derivedPrimary,
+            onPrimary: onPrimary || (isDark ? '#000000' : '#FFFFFF'),
+            primaryContainer: primaryContainer || derivedPrimary.withOpacity(0.2),
+            onPrimaryContainer: onPrimaryContainer || derivedPrimary,
+
+            secondary: secondary || defaults.secondary,
+            onSecondary: onSecondary || defaults.onSecondary,
+            secondaryContainer: secondaryContainer || defaults.secondaryContainer,
+            onSecondaryContainer: onSecondaryContainer || defaults.onSecondaryContainer,
+
+            tertiary: tertiary || defaults.tertiary,
+            onTertiary: onTertiary || defaults.onTertiary,
+            tertiaryContainer: tertiaryContainer || defaults.tertiaryContainer,
+            onTertiaryContainer: onTertiaryContainer || defaults.onTertiaryContainer,
+
+            error: error || defaults.error,
+            onError: onError || defaults.onError,
+            errorContainer: errorContainer || defaults.errorContainer,
+            onErrorContainer: onErrorContainer || defaults.onErrorContainer,
+
+            background: background || defaults.background,
+            onBackground: onBackground || defaults.onBackground,
+
+            surface: surface || defaults.surface,
+            onSurface: onSurface || defaults.onSurface,
+            surfaceVariant: surfaceVariant || defaults.surfaceVariant,
+            onSurfaceVariant: onSurfaceVariant || defaults.onSurfaceVariant,
+
+            outline: outline || defaults.outline,
+            outlineVariant: outlineVariant || defaults.outlineVariant,
+
+            shadow: shadow || defaults.shadow,
+            scrim: scrim || defaults.scrim,
+
+            inverseSurface: inverseSurface || defaults.inverseSurface,
+            onInverseSurface: onInverseSurface || defaults.onInverseSurface,
+            inversePrimary: inversePrimary || (isDark ? derivedPrimary : '#D0BCFF'), // Mock inverse
+            surfaceTint: surfaceTint || derivedPrimary,
+
+            // Surface Tones
+            surfaceContainerLowest: surfaceContainerLowest || defaults.surfaceContainerLowest,
+            surfaceContainerLow: surfaceContainerLow || defaults.surfaceContainerLow,
+            surfaceContainer: surfaceContainer || defaults.surfaceContainer,
+            surfaceContainerHigh: surfaceContainerHigh || defaults.surfaceContainerHigh,
+            surfaceContainerHighest: surfaceContainerHighest || defaults.surfaceContainerHighest,
+        });
+    }
+
+    static light() {
+        return new ColorScheme({
+            brightness: 'light',
+            primary: '#6750A4',
+            onPrimary: '#FFFFFF',
+            primaryContainer: '#EADDFF',
+            onPrimaryContainer: '#21005D',
+            secondary: '#625B71',
+            onSecondary: '#FFFFFF',
+            secondaryContainer: '#E8DEF8',
+            onSecondaryContainer: '#1D192B',
+            tertiary: '#7D5260',
+            onTertiary: '#FFFFFF',
+            tertiaryContainer: '#FFD8E4',
+            onTertiaryContainer: '#31111D',
+            error: '#B3261E',
+            onError: '#FFFFFF',
+            errorContainer: '#F9DEDC',
+            onErrorContainer: '#410E0B',
+            background: '#FFFBFE',
+            onBackground: '#1C1B1F',
+            surface: '#FFFBFE',
+            onSurface: '#1C1B1F',
+            surfaceVariant: '#E7E0EC',
+            onSurfaceVariant: '#49454F',
+            outline: '#79747E',
+            outlineVariant: '#CAC4D0',
+            shadow: '#000000',
+            scrim: '#000000',
+            inverseSurface: '#313033',
+            onInverseSurface: '#F4EFF4',
+            inversePrimary: '#D0BCFF',
+            surfaceTint: '#6750A4',
+
+            // M3 Surface Tones (Light)
+            surfaceContainerLowest: '#FFFFFF',
+            surfaceContainerLow: '#F7F2FA',
+            surfaceContainer: '#F3EDF7',
+            surfaceContainerHigh: '#ECE6F0',
+            surfaceContainerHighest: '#E6E0E9',
+        });
+    }
+
+    static dark() {
+        return new ColorScheme({
+            brightness: 'dark',
+            primary: '#D0BCFF',
+            onPrimary: '#381E72',
+            primaryContainer: '#4F378B',
+            onPrimaryContainer: '#EADDFF',
+            secondary: '#CCC2DC',
+            onSecondary: '#332D41',
+            secondaryContainer: '#4A4458',
+            onSecondaryContainer: '#E8DEF8',
+            tertiary: '#EFB8C8',
+            onTertiary: '#492532',
+            tertiaryContainer: '#633B48',
+            onTertiaryContainer: '#FFD8E4',
+            error: '#F2B8B5',
+            onError: '#601410',
+            errorContainer: '#8C1D18',
+            onErrorContainer: '#F9DEDC',
+            background: '#1C1B1F',
+            onBackground: '#E6E1E5',
+            surface: '#1C1B1F',
+            onSurface: '#E6E1E5',
+            surfaceVariant: '#49454F',
+            onSurfaceVariant: '#CAC4D0',
+            outline: '#938F99',
+            outlineVariant: '#49454F',
+            shadow: '#000000',
+            scrim: '#000000',
+            inverseSurface: '#E6E1E5',
+            onInverseSurface: '#313033',
+            inversePrimary: '#6750A4',
+            surfaceTint: '#D0BCFF',
+
+            // M3 Surface Tones (Dark)
+            surfaceContainerLowest: '#0F0D13',
+            surfaceContainerLow: '#1D1B20',
+            surfaceContainer: '#211F26',
+            surfaceContainerHigh: '#2B2930',
+            surfaceContainerHighest: '#36343B',
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/constants.js b/packages/flutterjs_material/flutterjs_material/src/material/constants.js
new file mode 100644
index 00000000..399510c0
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/constants.js
@@ -0,0 +1,9 @@
+
+export const kToolbarHeight = 56.0;
+export const kBottomNavigationBarHeight = 80.0;
+export const kMinInteractiveDimension = 48.0;
+export const kTextTabBarHeight = 48.0;
+export const kRadialReactionRadius = 20.0;
+export const kFloatingActionButtonMargin = 16.0;
+export const kTabLabelPadding = { horizontal: 16.0 }; // EdgeInsets equivalent structure
+export const kMaterialListPadding = 8.0; // Vertical padding for lists
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/container.js b/packages/flutterjs_material/flutterjs_material/src/material/container.js
new file mode 100644
index 00000000..13ad1c21
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/container.js
@@ -0,0 +1,534 @@
+import { Widget, StatelessWidget } from '../core/widget_element.js';
+import { Element } from "@flutterjs/runtime"
+import { VNode } from '@flutterjs/vdom/vnode';
+import { Clip, TextDirection, Alignment } from '../utils/utils.js';
+import { Padding } from '../widgets/compoment/padding.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { BoxConstraints } from '../utils/box_constraints.js';
+import { Align } from '../widgets/compoment/center.js'; // Align is exported from center.js based on previous readings
+import { ClipPath } from '../widgets/compoment/clip.js';
+import { ConstrainedBox, LimitedBox } from '../widgets/compoment/sized_box.js';
+import { Transform } from '../widgets/compoment/transform.js';
+
+
+
+// ============================================================================
+// ENUMS
+// ============================================================================
+
+const DecorationPosition = {
+  background: 'background',
+  foreground: 'foreground'
+};
+
+// ============================================================================
+// EDGE INSETS
+// ============================================================================
+
+
+
+// ============================================================================
+// BOX CONSTRAINTS
+// ============================================================================
+
+
+
+// ============================================================================
+// DECORATION
+// ============================================================================
+
+class Decoration {
+  constructor() {
+    if (new.target === Decoration) {
+      throw new Error('Decoration is abstract');
+    }
+    this.padding = new EdgeInsets(0, 0, 0, 0);
+  }
+
+  /**
+   * Convert to CSS
+   */
+  toCSSStyle() {
+    throw new Error('toCSSStyle() must be implemented');
+  }
+
+  /**
+   * Debug validation
+   */
+  debugAssertIsValid() {
+    return true;
+  }
+}
+
+class BoxDecoration extends Decoration {
+  constructor({
+    color = null,
+    image = null,
+    border = null,
+    borderRadius = null,
+    boxShadow = [],
+    gradient = null,
+    backgroundBlendMode = null,
+    shape = 'rectangle'
+  } = {}) {
+    super();
+
+    this.color = color;
+    this.image = image;
+    this.border = border;
+    this.borderRadius = borderRadius;
+    this.boxShadow = boxShadow;
+    this.gradient = gradient;
+    this.backgroundBlendMode = backgroundBlendMode;
+    this.shape = shape;
+  }
+
+  toCSSStyle() {
+    const style = {};
+
+    if (this.color) {
+      style.backgroundColor = (typeof this.color.toCSSString === 'function')
+        ? this.color.toCSSString()
+        : this.color;
+    }
+
+    if (this.shape === 'circle') {
+      style.borderRadius = '50%';
+      style.aspectRatio = '1 / 1'; // Ensure it remains a circle
+    } else if (this.borderRadius) {
+      const resolveRadius = (r) => {
+        if (typeof r === 'number') return r;
+        if (r && typeof r.x === 'number') return r.x; // Assumes circular/elliptical x matches or we use x
+        return 0;
+      };
+
+      if (typeof this.borderRadius === 'number') {
+        style.borderRadius = `${this.borderRadius}px`;
+      } else if (this.borderRadius.all !== undefined) {
+        style.borderRadius = `${this.borderRadius.all}px`;
+      } else {
+        const { topLeft = 0, topRight = 0, bottomLeft = 0, bottomRight = 0 } = this.borderRadius;
+        // Resolve each corner which might be a Radius object
+        const tl = resolveRadius(topLeft);
+        const tr = resolveRadius(topRight);
+        const br = resolveRadius(bottomRight);
+        const bl = resolveRadius(bottomLeft);
+
+        style.borderRadius = `${tl}px ${tr}px ${br}px ${bl}px`;
+      }
+    }
+
+    if (this.border) {
+      if (typeof this.border === 'object') {
+        const { width = 1, color = 'black', style: borderStyle = 'solid' } = this.border;
+        const borderColor = (color && typeof color.toCSSString === 'function')
+          ? color.toCSSString()
+          : color;
+        style.border = `${width}px ${borderStyle} ${borderColor}`;
+      }
+    }
+
+    if (this.boxShadow && this.boxShadow.length > 0) {
+      style.boxShadow = this.boxShadow
+        .map(shadow => {
+          const { offsetX = 0, offsetY = 0, blurRadius = 0, spreadRadius = 0, color = 'rgba(0,0,0,0.5)' } = shadow;
+          const shadowColor = (color && typeof color.toCSSString === 'function')
+            ? color.toCSSString()
+            : color;
+          return `${offsetX}px ${offsetY}px ${blurRadius}px ${spreadRadius}px ${shadowColor}`;
+        })
+        .join(', ');
+    }
+
+    if (this.gradient) {
+      const { type = 'linear', colors = [], stops = [] } = this.gradient;
+      if (type === 'linear') {
+        const colorStops = colors.map((c, i) => `${c} ${(stops[i] || (i / colors.length)) * 100}%`).join(', ');
+        style.background = `linear-gradient(135deg, ${colorStops})`;
+      }
+    }
+
+    if (this.backgroundBlendMode) {
+      style.mixBlendMode = this.backgroundBlendMode;
+    }
+
+    return style;
+  }
+}
+
+// ============================================================================
+// COLORED BOX WIDGET
+// ============================================================================
+
+class ColoredBox extends StatelessWidget {
+  constructor({
+    key = null,
+    color = 'white',
+    child = null
+  } = {}) {
+    super(key);
+
+    this.color = color;
+    this.child = child;
+  }
+
+  build(context) {
+    return new DecoratedBox({
+      decoration: new BoxDecoration({ color: this.color }),
+      child: this.child
+    });
+  }
+}
+
+// ============================================================================
+// RENDER DECORATED BOX
+// ============================================================================
+
+class RenderDecoratedBox {
+  constructor({
+    decoration = null,
+    position = DecorationPosition.background,
+    configuration = {}
+  } = {}) {
+    this.decoration = decoration;
+    this.position = position;
+    this.configuration = configuration;
+  }
+
+  debugInfo() {
+    return {
+      type: 'RenderDecoratedBox',
+      position: this.position,
+      hasDecoration: !!this.decoration
+    };
+  }
+}
+
+// ============================================================================
+// DECORATED BOX WIDGET
+// ============================================================================
+
+class DecoratedBox extends Widget {
+  constructor({
+    key = null,
+    decoration = null,
+    position = DecorationPosition.background,
+    child = null
+  } = {}) {
+    super(key);
+
+    if (!decoration) {
+      throw new Error('DecoratedBox requires a decoration');
+    }
+
+    this.decoration = decoration;
+    this.position = position;
+    this.child = child;
+    this._renderObject = null;
+  }
+
+  /**
+   * Create render object
+   */
+  createRenderObject(context) {
+    return new RenderDecoratedBox({
+      decoration: this.decoration,
+      position: this.position,
+      configuration: {}
+    });
+  }
+
+  /**
+   * Update render object
+   */
+  updateRenderObject(context, renderObject) {
+    renderObject.decoration = this.decoration;
+    renderObject.position = this.position;
+  }
+
+  /**
+   * Build widget tree
+   */
+  build(context) {
+    if (!this._renderObject) {
+      this._renderObject = this.createRenderObject(context);
+    } else {
+      this.updateRenderObject(context, this._renderObject);
+    }
+
+    const elementId = context.element.getElementId();
+    const widgetPath = context.element.getWidgetPath();
+
+    const decorationStyle = this.decoration.toCSSStyle();
+
+    const style = {
+      position: 'relative',
+      ...decorationStyle
+    };
+
+    // Build child VNode with element caching
+    let childVNode = null;
+    if (this.child) {
+      if (context._childElement) {
+        // Reconciliation: Check if we can reuse the existing element
+        if (context._childElement.widget.constructor === this.child.constructor &&
+          context._childElement.widget.key === this.child.key) {
+
+          // Reuse existing element
+          context._childElement.updateWidget(this.child);
+          if (context._childElement.dirty) {
+            context._childElement.rebuild();
+          }
+        } else {
+          // Replace element
+          context._childElement.unmount();
+          context._childElement = this.child.createElement(context.element, context.element.runtime);
+          context._childElement.mount(context.element);
+        }
+      } else {
+        // Initial create
+        context._childElement = this.child.createElement(context.element, context.element.runtime);
+        context._childElement.mount(context.element);
+      }
+      childVNode = context._childElement.performRebuild();
+    }
+
+    return new VNode({
+      tag: 'div',
+      props: {
+        style,
+        'data-element-id': elementId,
+        'data-widget-path': widgetPath,
+        'data-widget': 'DecoratedBox',
+        'data-position': this.position
+      },
+      children: childVNode ? [childVNode] : [],
+      key: this.key
+    });
+  }
+
+  debugFillProperties(properties) {
+    super.debugFillProperties(properties);
+    const label = this.position === DecorationPosition.background ? 'bg' : 'fg';
+    properties.push({ name: label, value: this.decoration });
+  }
+
+  createElement(parent, runtime) {
+    return new DecoratedBoxElement(this, parent, runtime);
+  }
+}
+
+class DecoratedBoxElement extends Element {
+  performRebuild() {
+    return this.widget.build(this.context);
+  }
+}
+
+// ============================================================================
+// CONTAINER WIDGET
+// ============================================================================
+
+class Container extends StatelessWidget {
+  constructor({
+    key = null,
+    alignment = null,
+    padding = null,
+    color = null,
+    decoration = null,
+    foregroundDecoration = null,
+    width = null,
+    height = null,
+    constraints = null,
+    margin = null,
+    transform = null,
+    transformAlignment = null,
+    child = null,
+    clipBehavior = Clip.none
+  } = {}) {
+    super(key);
+
+    // Validation
+    if (padding !== null && !padding.isNonNegative) {
+      throw new Error('padding must be non-negative');
+    }
+    if (margin !== null && !margin.isNonNegative) {
+      throw new Error('margin must be non-negative');
+    }
+    if (color !== null && decoration !== null) {
+      throw new Error('Cannot provide both color and decoration. Use BoxDecoration(color: color).');
+    }
+    if (decoration !== null && !decoration.debugAssertIsValid()) {
+      throw new Error('decoration is not valid');
+    }
+
+    this.alignment = alignment;
+    this.padding = padding;
+    this.color = color;
+    this.decoration = decoration;
+    this.foregroundDecoration = foregroundDecoration;
+    this.margin = margin;
+    this.transform = transform;
+    this.transformAlignment = transformAlignment;
+    this.child = child;
+    this.clipBehavior = clipBehavior;
+
+    // Apply width/height to constraints
+    if (width !== null || height !== null) {
+      this.constraints = constraints?.tighten({ width, height }) ||
+        BoxConstraints.tightFor({ width, height });
+    } else {
+      this.constraints = constraints;
+    }
+  }
+
+  /**
+   * Get effective padding including decoration padding
+   * @private
+   */
+  _getPaddingIncludingDecoration() {
+    if (this.padding === null) {
+      return this.decoration?.padding;
+    }
+    if (this.decoration?.padding === null || this.decoration?.padding === undefined) {
+      return this.padding;
+    }
+    return this.padding.add(this.decoration.padding);
+  }
+
+  /**
+   * Build widget tree
+   */
+  build(context) {
+    let current = this.child;
+
+    // Handle empty container
+    if (this.child === null && (this.constraints === null || !this.constraints.isTight)) {
+      current = new LimitedBox({
+        maxWidth: 0,
+        maxHeight: 0,
+        child: new ConstrainedBox({
+          constraints: BoxConstraints.expand()
+        })
+      });
+    } else if (this.alignment !== null) {
+      current = new Align({
+        alignment: this.alignment,
+        child: current
+      });
+    }
+
+    // Apply padding
+    const effectivePadding = this._getPaddingIncludingDecoration();
+    if (effectivePadding != null) {  // != catches both null and undefined
+      current = new Padding({
+        padding: effectivePadding,
+        child: current
+      });
+    }
+
+    // Apply color
+    if (this.color !== null) {
+      current = new ColoredBox({
+        color: this.color,
+        child: current
+      });
+    }
+
+    // Apply clipping
+    if (this.clipBehavior !== Clip.none && this.decoration !== null) {
+      current = new ClipPath({
+        clipBehavior: this.clipBehavior,
+        child: current
+      });
+    }
+
+    // Apply decoration
+    if (this.decoration !== null) {
+      current = new DecoratedBox({
+        decoration: this.decoration,
+        child: current
+      });
+    }
+
+    // Apply foreground decoration
+    if (this.foregroundDecoration !== null) {
+      current = new DecoratedBox({
+        decoration: this.foregroundDecoration,
+        position: DecorationPosition.foreground,
+        child: current
+      });
+    }
+
+    // Apply constraints
+    if (this.constraints !== null) {
+      current = new ConstrainedBox({
+        constraints: this.constraints,
+        child: current
+      });
+    }
+
+    // Apply margin
+    if (this.margin !== null) {
+      current = new Padding({
+        padding: this.margin,
+        child: current
+      });
+    }
+
+    // Apply transform
+    if (this.transform !== null) {
+      current = new Transform({
+        transform: this.transform,
+        alignment: this.transformAlignment,
+        child: current
+      });
+    }
+
+    return current;
+  }
+
+  debugFillProperties(properties) {
+    super.debugFillProperties(properties);
+    if (this.alignment !== null) properties.push({ name: 'alignment', value: this.alignment });
+    if (this.padding !== null) properties.push({ name: 'padding', value: this.padding });
+    if (this.color !== null) {
+      properties.push({ name: 'bg', value: this.color });
+    } else if (this.decoration !== null) {
+      properties.push({ name: 'bg', value: this.decoration });
+    }
+    if (this.foregroundDecoration !== null) properties.push({ name: 'fg', value: this.foregroundDecoration });
+    if (this.constraints !== null) properties.push({ name: 'constraints', value: this.constraints });
+    if (this.margin !== null) properties.push({ name: 'margin', value: this.margin });
+  }
+}
+
+// ============================================================================
+// SUPPORTING WIDGETS (Placeholder implementations)
+// ============================================================================
+
+
+
+
+
+
+
+
+
+
+
+
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+export {
+  Container,
+  DecoratedBox,
+  DecoratedBoxElement,
+  RenderDecoratedBox,
+  ColoredBox,
+  BoxDecoration,
+  Decoration,
+  DecorationPosition
+};
\ No newline at end of file
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/data_table.js b/packages/flutterjs_material/flutterjs_material/src/material/data_table.js
new file mode 100644
index 00000000..d9da2c0a
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/data_table.js
@@ -0,0 +1,191 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { Container, BoxDecoration } from './container.js';
+import { Column, Row, SizedBox, Expanded } from '../widgets/widgets.js';
+import { Text } from './text.js';
+import { Checkbox } from './checkbox.js';
+import { Divider } from '../widgets/compoment/divider.js';
+import { DataTableTheme } from './data_table_theme.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { MainAxisAlignment, CrossAxisAlignment, MainAxisSize } from '../utils/utils.js';
+
+export class DataColumn {
+    constructor({
+        label,
+        tooltip,
+        numeric = false,
+        onSort,
+    } = {}) {
+        this.label = label;
+        this.tooltip = tooltip;
+        this.numeric = numeric;
+        this.onSort = onSort;
+    }
+}
+
+export class DataRow {
+    constructor({
+        key,
+        selected = false,
+        onSelectChanged,
+        color,
+        cells = [],
+    } = {}) {
+        this.key = key;
+        this.selected = selected;
+        this.onSelectChanged = onSelectChanged;
+        this.color = color;
+        this.cells = cells;
+    }
+}
+
+export class DataCell {
+    constructor(child, {
+        placeholder = false,
+        showEditIcon = false,
+        onTap,
+    } = {}) {
+        this.child = child;
+        this.placeholder = placeholder;
+        this.showEditIcon = showEditIcon;
+        this.onTap = onTap;
+    }
+}
+
+export class DataTable extends StatelessWidget {
+    constructor({
+        key,
+        columns = [],
+        sortColumnIndex,
+        sortAscending = true,
+        onSelectAll,
+        dataRowColor,
+        dataRowHeight,
+        dataRowMinHeight,
+        dataRowMaxHeight,
+        dataTextStyle,
+        headingRowColor,
+        headingRowHeight,
+        headingTextStyle,
+        horizontalMargin,
+        columnSpacing,
+        showCheckboxColumn = true,
+        showBottomBorder = false,
+        dividerThickness,
+        rows = [],
+    } = {}) {
+        super(key);
+        this.columns = columns;
+        this.sortColumnIndex = sortColumnIndex;
+        this.sortAscending = sortAscending;
+        this.onSelectAll = onSelectAll;
+        this.dataRowColor = dataRowColor;
+        this.dataRowHeight = dataRowHeight;
+        this.dataRowMinHeight = dataRowMinHeight;
+        this.dataRowMaxHeight = dataRowMaxHeight;
+        this.dataTextStyle = dataTextStyle;
+        this.headingRowColor = headingRowColor;
+        this.headingRowHeight = headingRowHeight;
+        this.headingTextStyle = headingTextStyle;
+        this.horizontalMargin = horizontalMargin;
+        this.columnSpacing = columnSpacing;
+        this.showCheckboxColumn = showCheckboxColumn;
+        this.showBottomBorder = showBottomBorder;
+        this.dividerThickness = dividerThickness;
+        this.rows = rows;
+    }
+
+    build(context) {
+        const theme = DataTableTheme.of(context) || {};
+        const effectiveHeadingRowHeight = this.headingRowHeight || theme.headingRowHeight || 56.0;
+        const effectiveDataRowMinHeight = this.dataRowMinHeight || theme.dataRowMinHeight || 48.0;
+        const effectiveHorizontalMargin = this.horizontalMargin || theme.horizontalMargin || 24.0;
+        const effectiveColumnSpacing = this.columnSpacing || theme.columnSpacing || 56.0;
+        const effectiveDividerThickness = this.dividerThickness || theme.dividerThickness || 1.0;
+
+        // Simplified Table Implementation using Column of Rows (since Table widget might not be fully feature complete in JS backend yet or we prefer flex)
+        // Ideally we use HTML <table> if VNode allows or CSS Grid. 
+        // Using Row/Column/Container for pure widget composition.
+
+        const tableRows = [];
+
+        // Heading
+        const headingCells = [];
+        if (this.showCheckboxColumn) {
+            headingCells.push(new Container({
+                width: 48.0, // Checkbox width
+                alignment: 'center',
+                child: new Checkbox({
+                    value: this.rows.every(r => r.selected), // Naive check
+                    onChanged: this.onSelectAll
+                })
+            }));
+        }
+
+        this.columns.forEach(col => {
+            headingCells.push(new Expanded({
+                child: new Container({
+                    padding: EdgeInsets.symmetric({ horizontal: effectiveHorizontalMargin / 2 }), // Half margin
+                    alignment: col.numeric ? 'centerRight' : 'centerLeft',
+                    child: col.label // Assuming label is Text widget
+                })
+            }));
+            // Add spacing if not last? Expanded handles generic spacing but fixed spacing requires SizedBox
+            // Using Expanded for now for equal width distribution simplified
+        });
+
+        tableRows.push(new Container({
+            height: effectiveHeadingRowHeight,
+            style: { borderBottom: `1px solid ${theme.dividerColor || 'rgba(0,0,0,0.12)'}` }, // Explicit border for heading
+            color: this.headingRowColor || theme.headingRowColor || Theme.of(context).colorScheme.surfaceContainerHighest || '#E6E0E9', // M3 Header
+            child: new Row({
+                children: headingCells
+            })
+        }));
+
+        tableRows.push(new Divider({ height: effectiveDividerThickness, thickness: effectiveDividerThickness }));
+
+        // Rows
+        this.rows.forEach(row => {
+            const dataCells = [];
+
+            if (this.showCheckboxColumn) {
+                dataCells.push(new Container({
+                    width: 48.0,
+                    alignment: 'center',
+                    child: new Checkbox({
+                        value: row.selected,
+                        onChanged: row.onSelectChanged
+                    })
+                }));
+            }
+
+            row.cells.forEach((cell, index) => {
+                const col = this.columns[index];
+                dataCells.push(new Expanded({
+                    child: new Container({
+                        padding: EdgeInsets.symmetric({ horizontal: effectiveHorizontalMargin / 2 }),
+                        alignment: col?.numeric ? 'centerRight' : 'centerLeft',
+                        child: cell.child
+                    })
+                }));
+            });
+
+            tableRows.push(new Container({
+                height: effectiveDataRowMinHeight, // Simplified
+                color: this.dataRowColor || (row.selected ? theme.dataRowColor : null), // selection handling needs MaterialStateColor ideally
+                child: new Row({
+                    children: dataCells
+                })
+            }));
+
+            tableRows.push(new Divider({ height: effectiveDividerThickness, thickness: effectiveDividerThickness }));
+        });
+
+        return new Container({
+            child: new Column({
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: tableRows
+            })
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/data_table_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/data_table_theme.js
new file mode 100644
index 00000000..5f2d2a94
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/data_table_theme.js
@@ -0,0 +1,52 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class DataTableThemeData {
+    constructor({
+        decoration,
+        dataRowColor,
+        dataRowMinHeight,
+        dataRowMaxHeight,
+        dataTextStyle,
+        headingRowColor,
+        headingRowHeight,
+        headingTextStyle,
+        horizontalMargin,
+        columnSpacing,
+        dividerThickness,
+        checkboxHorizontalMargin,
+    } = {}) {
+        this.decoration = decoration;
+        this.dataRowColor = dataRowColor;
+        this.dataRowMinHeight = dataRowMinHeight;
+        this.dataRowMaxHeight = dataRowMaxHeight;
+        this.dataTextStyle = dataTextStyle;
+        this.headingRowColor = headingRowColor;
+        this.headingRowHeight = headingRowHeight;
+        this.headingTextStyle = headingTextStyle;
+        this.horizontalMargin = horizontalMargin;
+        this.columnSpacing = columnSpacing;
+        this.dividerThickness = dividerThickness;
+        this.checkboxHorizontalMargin = checkboxHorizontalMargin;
+    }
+}
+
+class DataTableTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(DataTableTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    DataTableTheme,
+    DataTableThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/date_picker_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/date_picker_theme.js
new file mode 100644
index 00000000..fba2bbd3
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/date_picker_theme.js
@@ -0,0 +1,60 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class DatePickerThemeData {
+    constructor({
+        backgroundColor,
+        elevation,
+        shadowColor,
+        surfaceTintColor,
+        shape,
+        headerBackgroundColor,
+        headerForegroundColor,
+        dayBackgroundColor,
+        dayForegroundColor,
+        dayOverlayColor,
+        todayBackgroundColor,
+        todayForegroundColor,
+        todayBorder,
+        yearBackgroundColor,
+        yearForegroundColor,
+        yearOverlayColor,
+    } = {}) {
+        this.backgroundColor = backgroundColor;
+        this.elevation = elevation;
+        this.shadowColor = shadowColor;
+        this.surfaceTintColor = surfaceTintColor;
+        this.shape = shape;
+        this.headerBackgroundColor = headerBackgroundColor;
+        this.headerForegroundColor = headerForegroundColor;
+        this.dayBackgroundColor = dayBackgroundColor;
+        this.dayForegroundColor = dayForegroundColor;
+        this.dayOverlayColor = dayOverlayColor;
+        this.todayBackgroundColor = todayBackgroundColor;
+        this.todayForegroundColor = todayForegroundColor;
+        this.todayBorder = todayBorder;
+        this.yearBackgroundColor = yearBackgroundColor;
+        this.yearForegroundColor = yearForegroundColor;
+        this.yearOverlayColor = yearOverlayColor;
+    }
+}
+
+class DatePickerTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(DatePickerTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    DatePickerTheme,
+    DatePickerThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/dialog.js b/packages/flutterjs_material/flutterjs_material/src/material/dialog.js
new file mode 100644
index 00000000..37acb1a8
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/dialog.js
@@ -0,0 +1,248 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { DialogTheme } from '../utils/dialog_theme.js';
+import { Color } from '../utils/color.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { buildChildWidget } from '../utils/build_helper.js';
+import { Theme } from './theme.js';
+
+/**
+ * Dialog - A material design dialog
+ */
+class Dialog extends StatelessWidget {
+    constructor({
+        key = null,
+        backgroundColor,
+        elevation,
+        insetAnimationDuration = 100,
+        insetAnimationCurve = 'decelerate',
+        insetPadding,
+        clipBehavior = 'none',
+        shape,
+        alignment,
+        child
+    } = {}) {
+        super(key);
+        this.backgroundColor = backgroundColor;
+        this.elevation = elevation;
+        this.insetAnimationDuration = insetAnimationDuration;
+        this.insetAnimationCurve = insetAnimationCurve;
+        this.insetPadding = insetPadding;
+        this.clipBehavior = clipBehavior;
+        this.shape = shape;
+        this.alignment = alignment;
+        this.child = child;
+    }
+
+    build(context) {
+        // In a full implementation, this would query Theme.of(context).dialogTheme
+        // For now, we use defaults or provided values
+
+        // Default inset padding
+        const effectiveInsetPadding = this.insetPadding || { top: 40, bottom: 40, left: 40, right: 40 };
+
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+
+        const dialogStyle = {
+            backgroundColor: this.backgroundColor || colorScheme.surfaceContainerHigh || '#ECE6F0',
+            borderRadius: this.shape?.borderRadius || '4px',
+            boxShadow: this.elevation ? `0 ${this.elevation}px ${this.elevation * 2}px rgba(0,0,0,0.2)` : '0 24px 48px rgba(0,0,0,0.2)',
+            margin: `${effectiveInsetPadding.top}px ${effectiveInsetPadding.right}px ${effectiveInsetPadding.bottom}px ${effectiveInsetPadding.left}px`,
+            overflow: this.clipBehavior === 'none' ? 'visible' : 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+            maxHeight: `calc(100vh - ${effectiveInsetPadding.top + effectiveInsetPadding.bottom}px)`,
+            maxWidth: 'calc(100vw - 80px)', // Simplified constraint
+            position: 'relative'
+        };
+
+        // Apply alignment (simulated via flex container in showDialog usually, but here on the dialog itself if needed)
+
+        return new VNode({
+            tag: 'div',
+            props: {
+                className: 'fjs-dialog',
+                style: dialogStyle,
+                role: 'dialog',
+                'aria-modal': 'true'
+            },
+            children: this.child ? [buildChildWidget(this.child, context)] : []
+        });
+    }
+}
+
+/**
+ * DialogBackdrop - Backdrop overlay for dialogs
+ */
+class DialogBackdrop extends StatelessWidget {
+    constructor({
+        key = null,
+        onTap = null,
+        barrierColor = 'rgba(0, 0, 0, 0.54)',
+        barrierDismissible = true
+    } = {}) {
+        super(key);
+        this.onTap = onTap;
+        this.barrierColor = barrierColor;
+        this.barrierDismissible = barrierDismissible;
+    }
+
+    build(context) {
+        const backdropStyle = {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: this.barrierColor,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center', // Center content by default
+            zIndex: 1000,
+            animation: 'fjs-fade-in 0.15s ease'
+        };
+
+        const events = this.barrierDismissible && this.onTap ? {
+            click: (e) => {
+                // Only close if clicking the backdrop itself, not its children
+                if (e.target === e.currentTarget) {
+                    this.onTap();
+                }
+            }
+        } : {};
+
+        return new VNode({
+            tag: 'div',
+            props: {
+                className: 'fjs-dialog-backdrop',
+                style: backdropStyle,
+                'data-widget': 'DialogBackdrop'
+            },
+            events,
+            key: this.key
+        });
+    }
+}
+
+/**
+ * showDialog - Helper function to display a dialog
+ */
+function showDialog({
+    context,
+    builder,
+    barrierDismissible = true,
+    barrierColor = 'rgba(0, 0, 0, 0.54)',
+    barrierLabel = null,
+    useSafeArea = true, // Not implemented yet
+    useRootNavigator = true // Not implemented yet
+} = {}) {
+    return new Promise((resolve) => {
+        // Create dialog content
+        const dialog = builder(context);
+
+        // Create backdrop with dialog
+        const closeDialog = (result) => {
+            // Remove dialog from DOM
+            const backdrop = document.querySelector('.fjs-dialog-backdrop');
+            if (backdrop) {
+                backdrop.style.animation = 'fjs-fade-out 0.15s ease';
+                setTimeout(() => {
+                    backdrop.remove();
+                    resolve(result);
+                }, 150);
+            } else {
+                resolve(result);
+            }
+        };
+
+        const backdrop = new DialogBackdrop({
+            onTap: barrierDismissible ? () => closeDialog(null) : null,
+            barrierColor,
+            barrierDismissible
+        });
+
+        // Build the backdrop VNode properly
+        const backdropVNode = buildChildWidget(backdrop, context);
+
+        // Build the dialog VNode properly
+        const dialogVNode = buildChildWidget(dialog, context);
+
+        // Combine backdrop and dialog
+        const combinedVNode = new VNode({
+            tag: 'div',
+            props: backdropVNode.props,
+            children: [dialogVNode],
+            events: backdropVNode.events
+        });
+
+        // Convert VNode to DOM and append
+        const domElement = vNodeToDOM(combinedVNode);
+        document.body.appendChild(domElement);
+
+        // Store closeDialog function on window for dialog buttons to use
+        window.__closeCurrentDialog = closeDialog;
+    });
+}
+
+function vNodeToDOM(vnode) {
+    if (typeof vnode === 'string' || typeof vnode === 'number') {
+        return document.createTextNode(String(vnode));
+    }
+
+    const element = document.createElement(vnode.tag);
+
+    // Apply props
+    if (vnode.props) {
+        Object.entries(vnode.props).forEach(([key, value]) => {
+            if (key === 'style' && typeof value === 'object') {
+                Object.assign(element.style, value);
+            } else if (key === 'className') {
+                element.className = value;
+            } else if (key.startsWith('data-') || key.startsWith('aria-')) {
+                element.setAttribute(key, value);
+            } else if (key !== 'children') {
+                element[key] = value;
+            }
+        });
+    }
+
+    // Apply events
+    if (vnode.events) {
+        Object.entries(vnode.events).forEach(([event, handler]) => {
+            element.addEventListener(event, handler);
+        });
+    }
+
+    // Append children
+    if (vnode.children) {
+        vnode.children.forEach(child => {
+            element.appendChild(vNodeToDOM(child));
+        });
+    }
+
+    return element;
+}
+
+// Add CSS animations (idempotent check ideally, or just add)
+if (typeof document !== 'undefined') {
+    // Check if style already exists? Simplified for now.
+    const styleId = 'fjs-dialog-animations';
+    if (!document.getElementById(styleId)) {
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+        @keyframes fjs-fade-in {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        @keyframes fjs-fade-out {
+          from { opacity: 1; }
+          to { opacity: 0; }
+        }
+        `;
+        document.head.appendChild(style);
+    }
+}
+
+export { Dialog, showDialog };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/drawer.js b/packages/flutterjs_material/flutterjs_material/src/material/drawer.js
new file mode 100644
index 00000000..2313f523
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/drawer.js
@@ -0,0 +1,47 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { Container } from './container.js';
+import { Theme } from './theme.js';
+
+/**
+ * A Material Design panel that slides in horizontally from the edge of a Scaffold
+ * to show navigation links in an application.
+ */
+export class Drawer extends StatelessWidget {
+    constructor({
+        key,
+        backgroundColor,
+        elevation,
+        shadowColor,
+        surfaceTintColor,
+        shape,
+        width,
+        child,
+        semanticLabel,
+        clipBehavior
+    } = {}) {
+        super({ key });
+        this.backgroundColor = backgroundColor;
+        this.elevation = elevation;
+        this.shadowColor = shadowColor;
+        this.surfaceTintColor = surfaceTintColor;
+        this.shape = shape;
+        this.width = width;
+        this.child = child;
+        this.semanticLabel = semanticLabel;
+        this.clipBehavior = clipBehavior;
+    }
+
+    build(context) {
+        // Note: Scaffold currently handles the drawer sliding animation, positioning,
+        // and default sizing/shadows.
+        // This widget mainly serves to provide the content and optional background styling overrides.
+
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+
+        return new Container({
+            color: this.backgroundColor || colorScheme.surfaceContainerLow || '#F7F2FA',
+            child: this.child
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/drawer_header.js b/packages/flutterjs_material/flutterjs_material/src/material/drawer_header.js
new file mode 100644
index 00000000..6251f6ff
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/drawer_header.js
@@ -0,0 +1,41 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { Container } from './container.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { BoxDecoration } from './container.js';
+
+/**
+ * A Material Design drawer header.
+ * 
+ * Usually the first child in the drawer's list of widgets.
+ */
+export class DrawerHeader extends StatelessWidget {
+    constructor({
+        key,
+        decoration,
+        margin = EdgeInsets.only({ bottom: 8.0 }),
+        padding = EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 8.0),
+        duration = 250,
+        curve = 'fastOutSlowIn',
+        child
+    } = {}) {
+        super({ key });
+        this.decoration = decoration;
+        this.margin = margin;
+        this.padding = padding;
+        this.duration = duration;
+        this.curve = curve;
+        this.child = child;
+    }
+
+    build(context) {
+        return new Container({
+            decoration: this.decoration,
+            margin: this.margin,
+            padding: this.padding,
+            height: 160.0 + 1.0, // 160 height + 1px border usually
+            child: new Container({
+                child: this.child
+            })
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/drawer_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/drawer_theme.js
new file mode 100644
index 00000000..d0821a66
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/drawer_theme.js
@@ -0,0 +1,44 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class DrawerThemeData {
+    constructor({
+        backgroundColor,
+        scrimColor,
+        elevation,
+        shadowColor,
+        surfaceTintColor,
+        shape,
+        endShape,
+        width,
+    } = {}) {
+        this.backgroundColor = backgroundColor;
+        this.scrimColor = scrimColor;
+        this.elevation = elevation;
+        this.shadowColor = shadowColor;
+        this.surfaceTintColor = surfaceTintColor;
+        this.shape = shape;
+        this.endShape = endShape;
+        this.width = width;
+    }
+}
+
+class DrawerTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(DrawerTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    DrawerTheme,
+    DrawerThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/dropdown.js b/packages/flutterjs_material/flutterjs_material/src/material/dropdown.js
new file mode 100644
index 00000000..6f5cd084
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/dropdown.js
@@ -0,0 +1,210 @@
+import { StatefulWidget, StatelessWidget, State } from '../core/widget_element.js';
+import { Theme } from './theme.js';
+import { Container } from './container.js';
+import { Row } from '../widgets/widgets.js';
+import { Text } from './text.js';
+import { Icon, Icons } from './icon.js';
+import { GestureDetector } from './gesture_detector.js';
+import { MainAxisAlignment } from '../utils/utils.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+
+export class DropdownMenuItem extends StatelessWidget {
+    constructor({
+        key,
+        onTap,
+        value,
+        enabled = true,
+        alignment,
+        child,
+    } = {}) {
+        super(key);
+        this.onTap = onTap;
+        this.value = value;
+        this.enabled = enabled;
+        this.alignment = alignment;
+        this.child = child;
+    }
+
+    build(context) {
+        return new Container({
+            padding: EdgeInsets.symmetric({ vertical: 8.0, horizontal: 16.0 }),
+            child: this.child
+        });
+    }
+}
+
+export class DropdownButton extends StatefulWidget {
+    constructor({
+        key,
+        items = [],
+        selectedItemBuilder,
+        value,
+        hint,
+        disabledHint,
+        onChanged,
+        onTap,
+        elevation = 8,
+        style,
+        underline,
+        icon,
+        iconDisabledColor,
+        iconEnabledColor,
+        iconSize = 24.0,
+        isDense = false,
+        isExpanded = false,
+        itemHeight = 48.0,
+        focusColor,
+        focusNode,
+        autofocus = false,
+        dropdownColor,
+        menuMaxHeight,
+        enableFeedback,
+        alignment,
+        borderRadius,
+    } = {}) {
+        super(key);
+        this.items = items;
+        this.selectedItemBuilder = selectedItemBuilder;
+        this.value = value;
+        this.hint = hint;
+        this.disabledHint = disabledHint;
+        this.onChanged = onChanged;
+        this.onTap = onTap;
+        this.elevation = elevation;
+        this.style = style;
+        this.underline = underline;
+        this.icon = icon;
+        this.iconDisabledColor = iconDisabledColor;
+        this.iconEnabledColor = iconEnabledColor;
+        this.iconSize = iconSize;
+        this.isDense = isDense;
+        this.isExpanded = isExpanded;
+        this.itemHeight = itemHeight;
+        this.dropdownColor = dropdownColor;
+        this.menuMaxHeight = menuMaxHeight;
+        this.enableFeedback = enableFeedback;
+        this.alignment = alignment;
+        this.borderRadius = borderRadius;
+    }
+
+    createState() {
+        return new DropdownButtonState();
+    }
+}
+
+class DropdownButtonState extends State {
+    constructor() {
+        super();
+        this.isOpen = false;
+    }
+
+    _toggleDropdown() {
+        if (!this.widget.onChanged) return; // Disabled
+
+        // This is a naive implementation.
+        // In real Flutter, this opens a generic Menu connected to Navigator/Overlay.
+        // Here we might just implement a simple inline toggle or use HTML select for native behavior (not material compliant physically but accessible)
+        // OR we try to simulate a popup.
+
+        // Simulating Inline Toggle mainly for now as Overlay isn't fully robust in this context yet.
+
+        this.setState(() => {
+            this.isOpen = !this.isOpen;
+        });
+
+        // In reality, this should call a `showMenu` equivalent.
+    }
+
+    _handleSelection(itemValue) {
+        this.setState(() => {
+            this.isOpen = false;
+        });
+        if (this.widget.onChanged) {
+            this.widget.onChanged(itemValue);
+        }
+    }
+
+    build(context) {
+        // Find selected item
+        const selectedItem = this.widget.items?.find(item => item.value === this.widget.value);
+
+        const displayChild = selectedItem ? selectedItem.child : (this.widget.hint || new Text('Select'));
+
+        const trigger = new GestureDetector({
+            onTap: () => this._toggleDropdown(),
+            child: new Container({
+                padding: EdgeInsets.all(8.0),
+                decoration: {
+                    border: '1px solid #ccc', // Temporary visual
+                    borderRadius: '4px'
+                },
+                child: new Row({
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                        displayChild,
+                        this.widget.icon || new Icon(Icons.arrowDropDown)
+                    ]
+                })
+            })
+        });
+
+        if (!this.isOpen) {
+            return trigger;
+        }
+
+        // Render Open State (Naive list below)
+        // Ideally this is in an Overlay.
+
+        const menuItems = this.widget.items.map(item => {
+            return new GestureDetector({
+                onTap: () => this._handleSelection(item.value),
+                child: new Container({
+                    padding: EdgeInsets.all(12.0),
+                    color: this.widget.dropdownColor || Theme.of(context).cardColor || 'white',
+                    child: item.child
+                })
+            });
+        });
+
+        // Simulating a dropdown list appearing "somewhere" (here just below linearly)
+        // This is strictly a fallback implementation.
+
+        return new Container({
+            child: new Column({
+                crossAxisAlignment: 'stretch',
+                children: [
+                    trigger,
+                    new Container({
+                        color: 'white',
+                        style: {
+                            position: 'absolute',
+                            zIndex: 1000,
+                            // Box shadow
+                            boxShadow: '0 2px 5px rgba(0,0,0,0.2)',
+                            maxHeight: this.widget.menuMaxHeight || 200,
+                            overflowY: 'auto'
+                        },
+                        child: new Column({
+                            crossAxisAlignment: 'stretch',
+                            children: menuItems
+                        })
+                    })
+                ]
+            })
+        });
+    }
+}
+
+export class DropdownButtonHideUnderline extends StatelessWidget {
+    constructor({ key, child } = {}) {
+        super(key);
+        this.child = child;
+    }
+
+    build(context) {
+        // In real flutter this uses a Theme or InheritedWidget to suppress the underline.
+        // We can check this in DropdownButton if we implemented the inheritance.
+        // For now, it just passes through.
+        return this.child;
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/elevated_button.js b/packages/flutterjs_material/flutterjs_material/src/material/elevated_button.js
new file mode 100644
index 00000000..f9e8df28
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/elevated_button.js
@@ -0,0 +1,195 @@
+import { ProxyWidget, ProxyElement, StatelessWidget } from '../core/widget_element.js';
+import { Element } from "@flutterjs/runtime"
+import { VNode } from '@flutterjs/vdom/vnode';
+import { GestureDetector } from './gesture_detector.js';
+import { Theme } from './theme.js';
+
+// ============================================================================
+// ELEVATED BUTTON
+// ============================================================================
+
+class ElevatedButton extends ProxyWidget {
+    constructor({
+        key = null,
+        onPressed = null,
+        child = null,
+        // TODO: support full ButtonStyle, for now simple overrides
+        style = null
+    } = {}) {
+        super({ key, child });
+        this.onPressed = onPressed;
+        this.style = style;
+    }
+
+    createElement(parent, runtime) {
+        return new ElevatedButtonElement(this, parent, runtime);
+    }
+
+    static styleFrom({
+        backgroundColor = null,
+        foregroundColor = null,
+        disabledBackgroundColor = null,
+        disabledForegroundColor = null,
+        shadowColor = null,
+        surfaceTintColor = null,
+        elevation = null,
+        textStyle = null,
+        padding = null,
+        minimumSize = null,
+        fixedSize = null,
+        maximumSize = null,
+        side = null,
+        shape = null,
+        enabledMouseCursor = null,
+        disabledMouseCursor = null,
+        visualDensity = null,
+        tapTargetSize = null,
+        animationDuration = null,
+        enableFeedback = null,
+        alignment = null,
+        splashFactory = null,
+    } = {}) {
+        // Map to simple style object for now, or true ButtonStyle
+        return {
+            backgroundColor: backgroundColor,
+            color: foregroundColor,
+            elevation: elevation,
+            padding: padding ? `${padding.vertical / 2}px ${padding.horizontal / 2}px` : undefined,
+            // borderRadius: shape?.borderRadius // TODO: Extract from shape
+            // For now, return a plain object that our Element understands or a ButtonStyle
+            // The current Element expects `style` to be a plain object of CSS overrides
+            // But idiomatic Flutter expects a ButtonStyle.
+            // Let's bridge it:
+            _isButtonStyle: true,
+            foregroundColor,
+
+            shape
+        };
+    }
+}
+
+class ElevatedButtonElement extends ProxyElement {
+    performRebuild() {
+        const elementId = this.getElementId();
+        const widgetPath = this.getWidgetPath();
+
+        const theme = Theme.of(this);
+        const colorScheme = theme.colorScheme;
+        const buttonTheme = theme.elevatedButtonTheme?.style || {};
+
+        // Resolve Style from ButtonStyle or simple overrides
+        let customStyle = this.widget.style || {};
+
+        // Helper to resolve colors consistently
+        const resolveColor = (value, defaultValue) => {
+            if (value) {
+                if (typeof value === 'string') return value;
+                if (typeof value.toCSSString === 'function') return value.toCSSString();
+                // Handle Color objects that might be passed as raw objects
+                if (value.value) return '#' + value.value.toString(16).padStart(8, '0').slice(2);
+            }
+            return defaultValue;
+        };
+
+        // Handle ButtonStyle-like object from styleFrom
+        // This logic mimics MaterialStateProperty resolution for simple cases
+        // Also merge with Theme defaults
+        if (customStyle._isButtonStyle) {
+            const btnStyle = {};
+
+            const defaultBg = colorScheme.surfaceContainerLow || '#F7F2FA';
+            const defaultFg = colorScheme.primary;
+
+            btnStyle.backgroundColor = resolveColor(customStyle.backgroundColor, defaultBg);
+            btnStyle.color = resolveColor(customStyle.foregroundColor, defaultFg);
+
+            if (customStyle.padding) btnStyle.padding = typeof customStyle.padding === 'string' ? customStyle.padding : undefined;
+
+            if (customStyle.shape && customStyle.shape.borderRadius) {
+                const r = customStyle.shape.borderRadius;
+                console.log('[ElevatedButton] Radius:', r);
+
+                // Handle BorderRadius class
+                if (r.topLeft !== undefined) {
+                    const getVal = (val) => (typeof val === 'object' && val !== null) ? (val.x || 0) : (val || 0);
+
+                    const tl = getVal(r.topLeft);
+                    const tr = getVal(r.topRight);
+                    const br = getVal(r.bottomRight);
+                    const bl = getVal(r.bottomLeft);
+
+                    btnStyle.borderRadius = `${tl}px ${tr}px ${br}px ${bl}px`;
+                }
+            }
+
+            customStyle = btnStyle;
+        }
+
+        // Defaults if not fully resolved above
+        // We use the same defaults as M3 spec
+        const defaultBg = colorScheme.surfaceContainerLow || '#F7F2FA';
+        const defaultFg = colorScheme.primary;
+
+        // Use theme style as base if available (simplified merge)
+        // In real Flutter, ButtonStyle.merge is complex. Here we just take simple properties.
+        const themeBg = buttonTheme.backgroundColor; // logic to resolve MaterialStateProperty omitted
+        const themeFg = buttonTheme.foregroundColor;
+
+        const effectiveBg = customStyle.backgroundColor || themeBg || defaultBg;
+        const effectiveFg = customStyle.color || themeFg || defaultFg;
+
+        const baseStyle = {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '10px 24px',
+            borderRadius: '20px',
+            backgroundColor: effectiveBg,
+            color: effectiveFg,
+            border: 'none',
+            cursor: this.widget.onPressed ? 'pointer' : 'default',
+            boxShadow: customStyle.elevation === 0 ? 'none' : '0 1px 3px rgba(0,0,0,0.3)', // TODO: Use shadowColor
+            transition: 'all 0.2s ease',
+            fontSize: '14px',
+            fontWeight: '500',
+            fontFamily: 'inherit',
+            textTransform: 'uppercase',
+            outline: 'none',
+            userSelect: 'none',
+            opacity: this.widget.onPressed ? 1 : 0.6,
+            ...Object.fromEntries(Object.entries(customStyle).filter(([_, v]) => v !== undefined))
+        };
+
+        // Get child VNode from parent class (this handles the widget lifecycle)
+        const childVNode = super.performRebuild();
+
+        // Wrap child VNode in button element
+        const buttonVNode = new VNode({
+            tag: 'button',
+            props: {
+                style: baseStyle,
+                type: 'button',
+                'data-element-id': elementId,
+                'data-widget-path': widgetPath,
+                'data-widget': 'ElevatedButton',
+            },
+            children: childVNode ? [childVNode] : [],
+            key: this.widget.key
+        });
+
+        // If there's an onPressed handler, wrap in GestureDetector
+        if (this.widget.onPressed) {
+            // We need to attach the event handler to the button VNode
+            if (!buttonVNode.events) {
+                buttonVNode.events = {};
+            }
+            buttonVNode.events.onClick = this.widget.onPressed;
+        }
+
+        return buttonVNode;
+    }
+}
+
+export {
+    ElevatedButton
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/elevated_button_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/elevated_button_theme.js
new file mode 100644
index 00000000..0f5cd911
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/elevated_button_theme.js
@@ -0,0 +1,30 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class ElevatedButtonThemeData {
+    constructor({
+        style
+    } = {}) {
+        this.style = style;
+    }
+}
+
+class ElevatedButtonTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(ElevatedButtonTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    ElevatedButtonTheme,
+    ElevatedButtonThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/expansion_panel.js b/packages/flutterjs_material/flutterjs_material/src/material/expansion_panel.js
new file mode 100644
index 00000000..2f015874
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/expansion_panel.js
@@ -0,0 +1,113 @@
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { Container } from './container.js';
+import { Column, Row, Expanded } from '../widgets/widgets.js';
+import { GestureDetector } from './gesture_detector.js';
+import { Icon, Icons } from './icon.js';
+import { IconButton } from './icon_button.js';
+// import { MergeableMaterialItem } from './mergeable_material.js'; // Assuming this might not exist, will skip interface usage
+import { EdgeInsets } from '../utils/edge_insets.js';
+
+export class ExpansionPanel {
+    constructor({
+        headerBuilder,
+        body,
+        isExpanded = false,
+        canTapOnHeader = false,
+        backgroundColor,
+    } = {}) {
+        this.headerBuilder = headerBuilder;
+        this.body = body;
+        this.isExpanded = isExpanded;
+        this.canTapOnHeader = canTapOnHeader;
+        this.backgroundColor = backgroundColor;
+    }
+}
+
+export class ExpansionPanelList extends StatefulWidget {
+    constructor({
+        key,
+        children = [],
+        expansionCallback,
+        animationDuration,
+        expandedHeaderPadding,
+        dividerColor,
+        elevation = 2,
+    } = {}) {
+        super(key);
+        this.children = children;
+        this.expansionCallback = expansionCallback;
+        this.animationDuration = animationDuration;
+        this.expandedHeaderPadding = expandedHeaderPadding;
+        this.dividerColor = dividerColor;
+        this.elevation = elevation;
+    }
+
+    createState() {
+        return new ExpansionPanelListState();
+    }
+}
+
+class ExpansionPanelListState extends State {
+
+    _isChildExpanded(index) {
+        return this.widget.children[index].isExpanded;
+    }
+
+    _handlePressed(isExpanded, index) {
+        this.widget.expansionCallback?.(index, isExpanded);
+    }
+
+    build(context) {
+        const items = this.widget.children.map((child, index) => {
+
+            const header = child.headerBuilder(context, child.isExpanded);
+            const expandIcon = new IconButton({
+                icon: new Icon(child.isExpanded ? Icons.expandLess : Icons.expandMore),
+                onPressed: () => this._handlePressed(child.isExpanded, index)
+            });
+
+            const headerRow = new Row({
+                children: [
+                    new Expanded({ child: header }),
+                    expandIcon
+                ]
+            });
+
+            // Wrap header in gesture detector if canTapOnHeader
+            const interactiveHeader = child.canTapOnHeader
+                ? new GestureDetector({
+                    onTap: () => this._handlePressed(child.isExpanded, index),
+                    child: headerRow
+                })
+                : headerRow;
+
+            return new Container({
+                margin: EdgeInsets.symmetric({ vertical: 4.0 }), // Separation
+                // Elevation simulated via box-shadow
+                style: {
+                    boxShadow: `0 1px 3px ${this.dividerColor || Theme.of(context).dividerColor || 'rgba(0,0,0,0.12)'}`
+                },
+                child: new Column({
+                    children: [
+                        new Container({
+                            padding: EdgeInsets.all(4), // Base padding
+                            child: interactiveHeader
+                        }),
+                        child.isExpanded ? child.body : new Container()
+                    ]
+                })
+            });
+        });
+
+        return new Column({
+            children: items
+        });
+    }
+}
+
+export class ExpansionPanelRadio extends ExpansionPanel {
+    constructor({ value, ...args }) {
+        super(args);
+        this.value = value;
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/expansion_tile.js b/packages/flutterjs_material/flutterjs_material/src/material/expansion_tile.js
new file mode 100644
index 00000000..cee15663
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/expansion_tile.js
@@ -0,0 +1,109 @@
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { ListTile } from './list_tile.js';
+import { Theme } from './theme.js';
+import { Column } from '../widgets/widgets.js';
+import { Colors } from './color.js';
+import { Icon, Icons } from './icon.js';
+
+export class ExpansionTile extends StatefulWidget {
+    constructor({
+        key,
+        leading,
+        title,
+        subtitle,
+        onExpansionChanged,
+        children = [],
+        trailing,
+        initiallyExpanded = false,
+        maintainState = false,
+        tilePadding,
+        expandedCrossAxisAlignment,
+        expandedAlignment,
+        childrenPadding,
+        backgroundColor,
+        collapsedBackgroundColor,
+        textColor,
+        collapsedTextColor,
+        iconColor,
+        collapsedIconColor,
+        shape,
+        collapsedShape,
+        clipBehavior,
+        controlAffinity,
+    } = {}) {
+        super(key);
+        this.leading = leading;
+        this.title = title;
+        this.subtitle = subtitle;
+        this.onExpansionChanged = onExpansionChanged;
+        this.children = children;
+        this.trailing = trailing;
+        this.initiallyExpanded = initiallyExpanded;
+        this.maintainState = maintainState;
+        this.tilePadding = tilePadding;
+        this.expandedCrossAxisAlignment = expandedCrossAxisAlignment;
+        this.expandedAlignment = expandedAlignment;
+        this.childrenPadding = childrenPadding;
+        this.backgroundColor = backgroundColor;
+        this.collapsedBackgroundColor = collapsedBackgroundColor;
+        this.textColor = textColor;
+        this.collapsedTextColor = collapsedTextColor;
+        this.iconColor = iconColor;
+        this.collapsedIconColor = collapsedIconColor;
+        this.shape = shape;
+        this.collapsedShape = collapsedShape;
+        this.clipBehavior = clipBehavior;
+        this.controlAffinity = controlAffinity;
+    }
+
+    createState() {
+        return new ExpansionTileState();
+    }
+}
+
+class ExpansionTileState extends State {
+    constructor() {
+        super();
+        this.isExpanded = false;
+    }
+
+    initState() {
+        this.isExpanded = this.widget.initiallyExpanded;
+    }
+
+    _handleTap() {
+        this.setState(() => {
+            this.isExpanded = !this.isExpanded;
+        });
+        this.widget.onExpansionChanged?.(this.isExpanded);
+    }
+
+    build(context) {
+        // Construct ListTile
+        // We generally append an arrow icon if trailing is null, or rotate existing trailing?
+        // Flutter default: Adds ExpandMore icon at trailing position.
+
+        const theme = Theme.of(context);
+        const defaultIconColor = this.isExpanded ? (this.widget.iconColor || theme.colorScheme.primary) : (this.widget.collapsedIconColor || theme.unselectedWidgetColor);
+
+        const trailingIcon = this.widget.trailing || new Icon(this.isExpanded ? Icons.expandLess : Icons.expandMore, {
+            color: defaultIconColor
+        });
+
+        return new Column({
+            children: [
+                new ListTile({
+                    leading: this.widget.leading,
+                    title: this.widget.title,
+                    subtitle: this.widget.subtitle,
+                    trailing: trailingIcon,
+                    onTap: () => this._handleTap(),
+                    tileColor: this.isExpanded ? this.widget.backgroundColor : this.widget.collapsedBackgroundColor,
+                    // text/icon colors handling would go here via style injection or Theme wrapping
+                }),
+                // Children only if expanded
+                ...(this.isExpanded ? this.widget.children : [])
+            ]
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/filled_button.js b/packages/flutterjs_material/flutterjs_material/src/material/filled_button.js
new file mode 100644
index 00000000..80fb50e4
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/filled_button.js
@@ -0,0 +1,113 @@
+import { ButtonStyleButton } from './button_style_button.js';
+import { FilledButtonTheme } from './filled_button_theme.js';
+import { Theme } from './theme.js';
+import { GestureDetector } from './gesture_detector.js';
+import { Container, BoxDecoration } from './container.js';
+import { BoxShadow } from '../utils/box_shadow.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { BorderRadius } from '../utils/border_radius.js';
+import { Center } from '../widgets/compoment/center.js';
+import { TextStyle } from '../painting/text_style.js';
+
+export class FilledButton extends ButtonStyleButton {
+    constructor({
+        key,
+        onPressed,
+        onLongPress,
+        onHover,
+        onFocusChange,
+        style,
+        focusNode,
+        autofocus,
+        clipBehavior,
+        child
+    } = {}) {
+        super({
+            key,
+            onPressed,
+            onLongPress,
+            onHover,
+            onFocusChange,
+            style,
+            focusNode,
+            autofocus,
+            clipBehavior,
+            child
+        });
+    }
+
+    // Default style handling would be more complex here in a full framework,
+    // merging Theme.of(context).filledButtonTheme, and default colors.
+    // Since ButtonStyleButton is a base, we rely on it or the user providing style for now.
+    // In future: implement `defaultStyleOf(context)` logic.
+
+    static tonal({
+        key,
+        onPressed,
+        onLongPress,
+        onHover,
+        onFocusChange,
+        style,
+        focusNode,
+        autofocus,
+        clipBehavior,
+        child
+    } = {}) {
+        const button = new FilledButton({
+            key, onPressed, onLongPress, onHover, onFocusChange,
+            style,
+            focusNode, autofocus, clipBehavior, child
+        });
+        button._variant = 'tonal';
+        return button;
+    }
+
+    build(context) {
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+
+        // Resolve Colors based on variant
+        let defaultBg = colorScheme.primary;
+        let defaultFg = colorScheme.onPrimary;
+
+        if (this._variant === 'tonal') {
+            defaultBg = colorScheme.secondaryContainer;
+            defaultFg = colorScheme.onSecondaryContainer;
+        }
+
+        const resolveColor = (value, defaultValue) => {
+            if (value) {
+                if (typeof value === 'string') return value;
+                if (typeof value.toCSSString === 'function') return value.toCSSString();
+                if (value.value) return '#' + value.value.toString(16).padStart(8, '0').slice(2);
+            }
+            return defaultValue;
+        };
+
+        const customStyle = this.style || {};
+        // If it's a ButtonStyle object, we should extract values.
+        // For simplicity, we assume simple object overrides or ButtonStyle-like structure as seen in ElevatedButton
+
+        const effectiveBg = resolveColor(customStyle.backgroundColor, defaultBg);
+        const effectiveFg = resolveColor(customStyle.foregroundColor || customStyle.color, defaultFg);
+
+        return new GestureDetector({
+            onTap: this.onPressed,
+            onLongPress: this.onLongPress,
+            child: new Container({
+                padding: customStyle.padding || EdgeInsets.symmetric({ vertical: 10, horizontal: 24 }),
+                decoration: new BoxDecoration({
+                    color: effectiveBg,
+                    borderRadius: customStyle.shape?.borderRadius || BorderRadius.circular(20),
+                    boxShadow: customStyle.elevation ? [
+                        // Simple shadow approximation
+                        new BoxShadow({ color: 'rgba(0,0,0,0.2)', blurRadius: 3, offset: { dx: 0, dy: 1 } })
+                    ] : [],
+                }),
+                child: new Center({
+                    child: this.child
+                })
+            })
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/filled_button_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/filled_button_theme.js
new file mode 100644
index 00000000..a2bfda04
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/filled_button_theme.js
@@ -0,0 +1,30 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class FilledButtonThemeData {
+    constructor({
+        style
+    } = {}) {
+        this.style = style;
+    }
+}
+
+class FilledButtonTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(FilledButtonTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    FilledButtonTheme,
+    FilledButtonThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/floating_action_button.js b/packages/flutterjs_material/flutterjs_material/src/material/floating_action_button.js
new file mode 100644
index 00000000..4b3d3dc0
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/floating_action_button.js
@@ -0,0 +1,520 @@
+import { Widget, StatelessWidget } from '../core/widget_element.js';
+import { Element } from "@flutterjs/runtime"
+import { VNode } from '@flutterjs/vdom/vnode';
+import { GestureDetector } from './gesture_detector.js';
+import { Theme } from './theme.js';
+
+// ============================================================================
+// FLOATING ACTION BUTTON
+// ============================================================================
+
+class FloatingActionButton extends StatelessWidget {
+  constructor({
+    key = null,
+    onPressed = null,
+    onLongPress = null,
+    tooltip = null,
+    foregroundColor = null,
+    backgroundColor = null,
+    focusColor = null,
+    hoverColor = null,
+    splashColor = null,
+    elevation = null,
+    highlightElevation = null,
+    disabledElevation = null,
+    child = null,
+    mini = false,
+    shape = null,
+    clipBehavior = 'clip',
+    autofocus = false,
+    materialTapTargetSize = null,
+    isExtended = false,
+    enableFeedback = true,
+    heroTag = 'FloatingActionButton'
+  } = {}) {
+    super(key);
+
+    if (!onPressed) {
+      throw new Error('FloatingActionButton requires onPressed callback');
+    }
+
+    this.onPressed = onPressed;
+    this.onLongPress = onLongPress;
+    this.tooltip = tooltip;
+    this.foregroundColor = foregroundColor;
+    this.backgroundColor = backgroundColor;
+    this.focusColor = focusColor;
+    this.hoverColor = hoverColor;
+    this.splashColor = splashColor;
+    this.elevation = elevation;
+    this.highlightElevation = highlightElevation;
+    this.disabledElevation = disabledElevation;
+    this.child = child;
+    this.mini = mini;
+    this.shape = shape;
+    this.clipBehavior = clipBehavior;
+    this.autofocus = autofocus;
+    this.materialTapTargetSize = materialTapTargetSize;
+    this.isExtended = isExtended;
+    this.enableFeedback = enableFeedback;
+    this.heroTag = heroTag;
+
+    this._isHovered = false;
+    this._isPressed = false;
+  }
+
+  /**
+   * Get button size based on mini flag
+   */
+  _getButtonSize(fabTheme) {
+    if (this.mini) return 40;
+    // TODO: support fabTheme.sizeConstraints logic if complex
+    return 56;
+  }
+
+  /**
+   * Get button styles
+   */
+  _getButtonStyle(bgColor, fgColor, elevation, shape) {
+    const size = this._getButtonSize();
+
+    // Simple shape resolution (string or style obj)
+    // M3 Standard: 16px
+    let borderRadius = '16px';
+    // If shape is provided (e.g. RoundedRectangleBorder), we'd extract it. 
+    // For now assuming simple style or default.
+
+    return {
+      position: 'relative',
+      width: `${size}px`,
+      height: `${size}px`,
+      borderRadius: borderRadius,
+      backgroundColor: bgColor,
+      color: fgColor,
+      border: 'none',
+      cursor: 'pointer',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      boxShadow: `0 ${elevation}px ${elevation * 1.5}px rgba(0, 0, 0, 0.2)`,
+      transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+      outline: 'none',
+      fontFamily: 'inherit',
+      fontSize: '24px',
+      fontWeight: 500,
+      textTransform: 'uppercase',
+      letterSpacing: '0.5px',
+      userSelect: 'none',
+      WebkitUserSelect: 'none',
+      MozUserSelect: 'none',
+      msUserSelect: 'none'
+    };
+  }
+
+  /**
+   * Get ripple effect styles
+   */
+  _getRippleStyle(splashColor) {
+    return {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: '50%', // Actually should match button shape
+      backgroundColor: splashColor || 'rgba(255, 255, 255, 0.2)',
+      opacity: 0,
+      pointerEvents: 'none',
+      animation: this._isPressed
+        ? 'fab-ripple 0.6s ease-out'
+        : 'none'
+    };
+  }
+
+  /**
+   * Handle press with feedback
+   */
+  _handlePress(event) {
+    if (this.enableFeedback) {
+      // Haptic feedback (if available)
+      if (navigator.vibrate) {
+        navigator.vibrate(10);
+      }
+    }
+
+    if (this.onPressed) {
+      this.onPressed(event);
+    }
+  }
+
+  /**
+   * Handle long press
+   */
+  _handleLongPress(event) {
+    if (this.enableFeedback && navigator.vibrate) {
+      navigator.vibrate([10, 20, 10]); // Double vibration for long press
+    }
+
+    if (this.onLongPress) {
+      this.onLongPress(event);
+    }
+  }
+
+  /**
+   * Handle mouse/touch down
+   */
+  _handleTapDown(event) {
+    this._isPressed = true;
+  }
+
+  /**
+   * Handle mouse/touch up
+   */
+  _handleTapUp(event) {
+    this._isPressed = false;
+  }
+
+  /**
+   * Inject ripple animation keyframes
+   */
+  _injectKeyframes() {
+    if (typeof document !== 'undefined' && !document.getElementById('fab-keyframes')) {
+      const style = document.createElement('style');
+      style.id = 'fab-keyframes';
+      style.textContent = `
+        @keyframes fab-ripple {
+          0% {
+            opacity: 1;
+            transform: scale(1);
+          }
+          100% {
+            opacity: 0;
+            transform: scale(2);
+          }
+        }
+      `;
+      document.head.appendChild(style);
+    }
+  }
+
+  build(context) {
+    const theme = Theme.of(context);
+    const colorScheme = theme.colorScheme;
+    const fabTheme = theme.floatingActionButtonTheme || {};
+
+    // 1. Resolve Colors
+    const bgColor = this.backgroundColor || fabTheme.backgroundColor || colorScheme.primaryContainer || '#EADDFF';
+    const fgColor = this.foregroundColor || fabTheme.foregroundColor || colorScheme.onPrimaryContainer || '#21005D';
+    const splashColor = this.splashColor || fabTheme.splashColor || 'rgba(255, 255, 255, 0.2)';
+
+    const getCSSColor = (c) => {
+      if (c && typeof c.toCSSString === 'function') return c.toCSSString();
+      if (c && typeof c.object === 'object' && c.value) return `#${c.value.toString(16).padStart(8, '0').slice(2)}`;
+      if (typeof c === 'string') return c;
+      return c;
+    };
+
+    const cssBgColor = getCSSColor(bgColor);
+    const cssFgColor = getCSSColor(fgColor);
+    const cssSplashColor = getCSSColor(splashColor);
+
+    // 2. Resolve Elevation
+    const elevation = this.elevation ?? fabTheme.elevation ?? 6;
+    const highlightElevation = this.highlightElevation ?? fabTheme.highlightElevation ?? 12;
+    const effectiveElevation = this._isPressed ? highlightElevation : elevation;
+
+    // 3. Resolve Shape
+    const shape = this.shape || fabTheme.shape;
+
+
+    const buttonStyle = this._getButtonStyle(cssBgColor, cssFgColor, effectiveElevation, shape);
+    let childVNode = null;
+
+    // Build child element
+    if (this.child) {
+      const childElement = this.child.createElement?.(context.element, context.element.runtime) || this.child;
+      if (childElement.mount) {
+        childElement.mount(context.element);
+      }
+      childVNode = childElement.performRebuild?.(context.element, context.element.runtime) || null;
+    }
+
+    // Inject ripple animation keyframes
+    this._injectKeyframes();
+
+    // Create the actual button content (without gesture detection)
+    const buttonContent = new VNode({
+      tag: 'button',
+      props: {
+        style: buttonStyle,
+        type: 'button',
+        title: this.tooltip || '',
+        'aria-label': this.tooltip || 'Floating Action Button'
+      },
+      children: [
+        // Ripple effect
+        new VNode({
+          tag: 'span',
+          props: {
+            style: this._getRippleStyle(cssSplashColor),
+            className: 'fab-ripple'
+          },
+          children: []
+        }),
+        // Child content (icon)
+        new VNode({
+          tag: 'span',
+          props: {
+            style: {
+              position: 'relative',
+              zIndex: 1,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center'
+            }
+          },
+          children: childVNode ? [childVNode] : []
+        })
+      ]
+    });
+
+    // Wrap button with GestureDetector
+    const fabWidget = new GestureDetector({
+      onTap: (event) => this._handlePress(event),
+      onTapDown: (event) => this._handleTapDown(event),
+      onTapUp: (event) => this._handleTapUp(event),
+      onLongPress: (event) => this._handleLongPress(event),
+      child: new _FABContentWrapper(buttonContent)
+    });
+
+    // Build gesture detector element
+    const fabElement = fabWidget.createElement?.(context.element, context.element.runtime);
+    if (fabElement && fabElement.mount) {
+      fabElement.mount(context.element);
+    }
+    let fabVNode = fabElement?.performRebuild?.(context.element, context.element.runtime) || null;
+
+    // Wrap with tooltip if provided
+    if (this.tooltip) {
+      return new VNode({
+        tag: 'div',
+        props: {
+          style: {
+            position: 'relative',
+            display: 'inline-block'
+          },
+          'data-widget': 'FloatingActionButton'
+        },
+        children: [
+          fabVNode,
+          new VNode({
+            tag: 'div',
+            props: {
+              style: {
+                visibility: 'hidden',
+                backgroundColor: '#333',
+                color: '#fff',
+                textAlign: 'center',
+                borderRadius: '4px',
+                padding: '5px 8px',
+                position: 'absolute',
+                zIndex: 1000,
+                bottom: '125%',
+                left: '50%',
+                marginLeft: '-40px',
+                opacity: 0,
+                transition: 'opacity 0.3s',
+                whiteSpace: 'nowrap',
+                fontSize: '12px',
+                fontWeight: 500,
+                pointerEvents: 'none',
+                width: '80px'
+              },
+              className: 'fab-tooltip'
+            },
+            children: [this.tooltip]
+          })
+        ]
+      });
+    }
+
+    return fabVNode;
+  }
+
+  createElement(parent, runtime) {
+    return new FloatingActionButtonElement(this, parent, runtime);
+  }
+
+  debugFillProperties(properties) {
+    super.debugFillProperties(properties);
+    properties.push({ name: 'onPressed', value: this.onPressed ? 'fn' : null });
+    properties.push({ name: 'tooltip', value: this.tooltip });
+    properties.push({ name: 'backgroundColor', value: this.backgroundColor });
+    if (this.mini) properties.push({ name: 'mini', value: true });
+  }
+}
+
+class FloatingActionButtonElement extends Element {
+  performRebuild(parent, runtime) {
+    return this.widget.build(this.context);
+  }
+}
+
+// ============================================================================
+// EXTENDED FLOATING ACTION BUTTON
+// ============================================================================
+
+class FloatingActionButtonExtended extends StatelessWidget {
+  constructor({
+    key = null,
+    onPressed = null,
+    onLongPress = null,
+    tooltip = null,
+    foregroundColor = null,
+    backgroundColor = null,
+    icon = null,
+    label = '',
+    elevation = null,
+    highlightElevation = null,
+    clipBehavior = 'clip',
+    heroTag = 'FloatingActionButton',
+    enableFeedback = true
+  } = {}) {
+    super(key);
+
+    if (!onPressed) {
+      throw new Error('FloatingActionButtonExtended requires onPressed callback');
+    }
+
+    this.onPressed = onPressed;
+    this.onLongPress = onLongPress;
+    this.tooltip = tooltip;
+    this.foregroundColor = foregroundColor;
+    this.backgroundColor = backgroundColor;
+    this.icon = icon;
+    this.label = label;
+    this.elevation = elevation;
+    this.highlightElevation = highlightElevation;
+    this.clipBehavior = clipBehavior;
+    this.heroTag = heroTag;
+    this.enableFeedback = enableFeedback;
+
+    this._isPressed = false;
+  }
+
+  build(context) {
+    const theme = Theme.of(context);
+    const colorScheme = theme.colorScheme;
+    const fabTheme = theme.floatingActionButtonTheme || {};
+
+    const elevation = this.elevation ?? fabTheme.elevation ?? 6;
+    const highlightElevation = this.highlightElevation ?? fabTheme.highlightElevation ?? 12;
+    const effectiveElevation = this._isPressed ? highlightElevation : elevation;
+
+    const bgColor = this.backgroundColor || fabTheme.backgroundColor || colorScheme.primaryContainer || '#EADDFF';
+    const fgColor = this.foregroundColor || fabTheme.foregroundColor || colorScheme.onPrimaryContainer || '#21005D';
+
+    const getCSSColor = (c) => {
+      if (c && typeof c.toCSSString === 'function') return c.toCSSString();
+      if (c && typeof c.object === 'object' && c.value) return `#${c.value.toString(16).padStart(8, '0').slice(2)}`;
+      if (typeof c === 'string') return c;
+      return c;
+    };
+
+    const effectiveBgColor = getCSSColor(bgColor);
+    const effectiveFgColor = getCSSColor(fgColor);
+
+    const buttonStyle = {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '8px',
+      padding: '12px 20px',
+      borderRadius: '16px', // M3 Extended FAB radius
+      backgroundColor: effectiveBgColor,
+      color: effectiveFgColor,
+      border: 'none',
+      cursor: 'pointer',
+      boxShadow: `0 ${effectiveElevation}px ${effectiveElevation * 1.5}px rgba(0, 0, 0, 0.2)`,
+      transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+      fontSize: '14px',
+      fontWeight: 500,
+      textTransform: 'uppercase',
+      letterSpacing: '0.5px',
+      outline: 'none',
+      fontFamily: 'inherit',
+      userSelect: 'none',
+      WebkitUserSelect: 'none',
+      minHeight: '56px' // M3 standard height
+    };
+
+    let iconVNode = null;
+    if (this.icon) {
+      const iconElement = this.icon.createElement?.(context.element, context.element.runtime) || this.icon;
+      if (iconElement.mount) {
+        iconElement.mount(context.element);
+      }
+      iconVNode = iconElement.performRebuild?.(context.element, context.element.runtime) || null;
+    }
+
+    const buttonContent = new VNode({
+      tag: 'button',
+      props: {
+        style: buttonStyle,
+        type: 'button',
+        title: this.tooltip || '',
+        'aria-label': this.tooltip || this.label
+      },
+      children: [
+        iconVNode && new VNode({
+          tag: 'span',
+          props: { style: { display: 'flex', alignItems: 'center' } },
+          children: [iconVNode]
+        }),
+        new VNode({
+          tag: 'span',
+          props: {},
+          children: [this.label]
+        })
+      ]
+    });
+
+    // Wrap with GestureDetector
+    const fabWidget = new GestureDetector({
+      onTap: (event) => this._handlePress(event),
+      onLongPress: (event) => this._handleLongPress(event),
+      child: new _FABContentWrapper(buttonContent)
+    });
+
+    const fabElement = fabWidget.createElement?.(context.element, context.element.runtime);
+    if (fabElement && fabElement.mount) {
+      fabElement.mount(context.element);
+    }
+    return fabElement?.performRebuild?.(context.element, context.element.runtime) || null;
+  }
+
+  createElement(parent, runtime) {
+    return new FloatingActionButtonElement(this, parent, runtime);
+  }
+}
+
+class _FABContentWrapper extends StatelessWidget {
+  constructor(content) {
+    super();
+    this.content = content;
+  }
+
+  build(context) {
+    return this.content;
+  }
+}
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+export {
+  FloatingActionButton,
+  FloatingActionButtonElement,
+  FloatingActionButtonExtended
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/floating_action_button_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/floating_action_button_theme.js
new file mode 100644
index 00000000..b0b2022a
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/floating_action_button_theme.js
@@ -0,0 +1,68 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class FloatingActionButtonThemeData {
+    constructor({
+        foregroundColor,
+        backgroundColor,
+        focusColor,
+        hoverColor,
+        splashColor,
+        elevation,
+        focusElevation,
+        hoverElevation,
+        disabledElevation,
+        highlightElevation,
+        shape,
+        enableFeedback,
+        iconSize,
+        sizeConstraints,
+        smallSizeConstraints,
+        largeSizeConstraints,
+        extendedSizeConstraints,
+        extendedIconLabelSpacing,
+        extendedPadding,
+        extendedTextStyle,
+    } = {}) {
+        this.foregroundColor = foregroundColor;
+        this.backgroundColor = backgroundColor;
+        this.focusColor = focusColor;
+        this.hoverColor = hoverColor;
+        this.splashColor = splashColor;
+        this.elevation = elevation;
+        this.focusElevation = focusElevation;
+        this.hoverElevation = hoverElevation;
+        this.disabledElevation = disabledElevation;
+        this.highlightElevation = highlightElevation;
+        this.shape = shape;
+        this.enableFeedback = enableFeedback;
+        this.iconSize = iconSize;
+        this.sizeConstraints = sizeConstraints;
+        this.smallSizeConstraints = smallSizeConstraints;
+        this.largeSizeConstraints = largeSizeConstraints;
+        this.extendedSizeConstraints = extendedSizeConstraints;
+        this.extendedIconLabelSpacing = extendedIconLabelSpacing;
+        this.extendedPadding = extendedPadding;
+        this.extendedTextStyle = extendedTextStyle;
+    }
+}
+
+class FloatingActionButtonTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(FloatingActionButtonTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    FloatingActionButtonTheme,
+    FloatingActionButtonThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/flutter_logo.js b/packages/flutterjs_material/flutterjs_material/src/material/flutter_logo.js
new file mode 100644
index 00000000..1139372e
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/flutter_logo.js
@@ -0,0 +1,39 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { Container } from './container.js';
+
+export class FlutterLogo extends StatelessWidget {
+    constructor({
+        key,
+        size = 24.0,
+        colors, // Ignored mostly in simple web version unless we SVG manipulate
+        textColor,
+        style,
+        duration,
+        curve,
+    } = {}) {
+        super(key);
+        this.size = size;
+        this.colors = colors;
+        this.textColor = textColor;
+        this.style = style;
+        this.duration = duration;
+        this.curve = curve;
+    }
+
+    build(context) {
+        // Just return the Flutter Icon/Logo SVG or Image
+        // Using a public URL or base64 placeholder for the logo
+        const flutterLogoUrl = "https://storage.googleapis.com/cms-storage-bucket/0dbfcc7a59cd1cf16282.png"; // Official Flutter Logo
+
+        return new Container({
+            width: this.size,
+            height: this.size,
+            decoration: {
+                image: {
+                    image: `url("${flutterLogoUrl}")`,
+                    fit: 'contain'
+                }
+            }
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/form.js b/packages/flutterjs_material/flutterjs_material/src/material/form.js
new file mode 100644
index 00000000..5cff9254
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/form.js
@@ -0,0 +1,132 @@
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { InheritedWidget } from '@flutterjs/runtime';
+
+/**
+ * Form - A container for grouping together multiple form fields
+ */
+class Form extends StatefulWidget {
+    constructor({
+        key = null,
+        child,
+        autovalidateMode = 'disabled', // disabled, always, onUserInteraction
+        onChanged = null,
+        onWillPop = null
+    } = {}) {
+        super(key);
+        this.child = child;
+        this.autovalidateMode = autovalidateMode;
+        this.onChanged = onChanged;
+        this.onWillPop = onWillPop;
+    }
+
+    createState() {
+        return new FormState();
+    }
+
+    static of(context) {
+        const scope = context.dependOnInheritedWidgetOfExactType(FormScope);
+        return scope ? scope._formState : null;
+    }
+}
+
+/**
+ * FormState - State for Form
+ */
+class FormState extends State {
+    constructor() {
+        super();
+        this._fields = new Set();
+    }
+
+    get fields() {
+        return this._fields;
+    }
+
+    /**
+     * Register a FormField with this Form
+     */
+    _register(field) {
+        console.error('[FormState] Registering field', field);
+        this._fields.add(field);
+    }
+
+    /**
+     * Unregister a FormField
+     */
+    _unregister(field) {
+        console.error('[FormState] Unregistering field', field);
+        this._fields.delete(field);
+    }
+
+    /**
+     * Validate all fields in the form
+     * @returns {boolean} true if all fields are valid
+     */
+    validate() {
+        console.error('[FormState] validate() called');
+        this._forceRebuild();
+        // In Flutter, validate() triggers validation on all fields and rebuilds the form if needed.
+        // Here we iterate fields.
+
+        let hasError = false;
+        for (const field of this._fields) {
+            if (!field.validate()) {
+                hasError = true;
+            }
+        }
+        return !hasError;
+    }
+
+    /**
+     * Save all fields
+     */
+    save() {
+        for (const field of this._fields) {
+            field.save();
+        }
+    }
+
+    /**
+     * Reset all fields
+     */
+    reset() {
+        for (const field of this._fields) {
+            field.reset();
+        }
+        if (this.widget.onChanged) {
+            this.widget.onChanged();
+        }
+    }
+
+    _forceRebuild() {
+        this.setState(() => { });
+    }
+
+    build(context) {
+        // Pass this state down
+        return new FormScope({
+            formState: this,
+            child: this.widget.child
+        });
+    }
+}
+
+/**
+ * FormScope - InheritedWidget to pass FormState down
+ */
+class FormScope extends InheritedWidget {
+    constructor({ formState, child } = {}) {
+        super({ child });
+        this._formState = formState;
+    }
+
+    get formState() {
+        return this._formState;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this._formState !== oldWidget._formState;
+    }
+}
+
+export { Form, FormState };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/gesture_detector.js b/packages/flutterjs_material/flutterjs_material/src/material/gesture_detector.js
new file mode 100644
index 00000000..87396d5c
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/gesture_detector.js
@@ -0,0 +1,364 @@
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import {
+  TapRecognizer,
+  DoubleTapRecognizer,
+  LongPressRecognizer,
+  VerticalDragRecognizer,
+  HorizontalDragRecognizer,
+  SwipeRecognizer
+} from '@flutterjs/runtime';
+
+// ============================================================================
+// ENUMS
+// ============================================================================
+
+/**
+ * Defines how a hit test should behave.
+ */
+const HitTestBehavior = {
+  deferToChild: 'deferToChild', // Child widgets handle hits, this widget defers.
+  opaque: 'opaque',             // This widget blocks hits and handles them.
+  translucent: 'translucent'    // This widget handles hits, but allows hits to pass through to widgets below.
+};
+
+// ============================================================================
+// GESTURE DETECTOR WIDGET
+// ============================================================================
+
+/**
+ * GestureDetector Widget
+ * 
+ * Wraps a child widget and detects various gestures
+ * 
+ * Works with both mouse and touch events
+ */
+class GestureDetector extends StatefulWidget {
+  constructor({
+    key = null,
+    child = null,
+    // Tap gestures
+    onTap = null,
+    onTapDown = null,
+    onTapUp = null,
+    onTapCancel = null,
+    onDoubleTap = null,
+    // Long press
+    onLongPress = null,
+    onLongPressStart = null,
+    onLongPressMoveUpdate = null,
+    onLongPressEnd = null,
+    onLongPressUp = null,
+    // Swipe
+    onSwipe = null,
+    onSwipeLeft = null,
+    onSwipeRight = null,
+    onSwipeUp = null,
+    onSwipeDown = null,
+    // Pan
+    onPan = null,
+    onPanStart = null,
+    onPanUpdate = null,
+    onPanEnd = null,
+    // Scale/Pinch
+    onScale = null,
+    onScaleStart = null,
+    onScaleUpdate = null,
+    onScaleEnd = null,
+    // Configuration
+    behavior = HitTestBehavior.deferToChild,
+    excludeFromSemantics = false
+  } = {}) {
+    super(key);
+
+    this.child = child;
+
+    // Tap callbacks
+    this.onTap = onTap;
+    this.onTapDown = onTapDown;
+    this.onTapUp = onTapUp;
+    this.onTapCancel = onTapCancel;
+    this.onDoubleTap = onDoubleTap;
+
+    // Long press callbacks
+    this.onLongPress = onLongPress;
+    this.onLongPressStart = onLongPressStart;
+    this.onLongPressMoveUpdate = onLongPressMoveUpdate;
+    this.onLongPressEnd = onLongPressEnd;
+    this.onLongPressUp = onLongPressUp;
+
+    // Swipe callbacks
+    this.onSwipe = onSwipe;
+    this.onSwipeLeft = onSwipeLeft;
+    this.onSwipeRight = onSwipeRight;
+    this.onSwipeUp = onSwipeUp;
+    this.onSwipeDown = onSwipeDown;
+
+    // Pan callbacks
+    this.onPan = onPan;
+    this.onPanStart = onPanStart;
+    this.onPanUpdate = onPanUpdate;
+    this.onPanEnd = onPanEnd;
+
+    // Scale callbacks
+    this.onScale = onScale;
+    this.onScaleStart = onScaleStart;
+    this.onScaleUpdate = onScaleUpdate;
+    this.onScaleEnd = onScaleEnd;
+
+    // Configuration
+    this.behavior = behavior;
+    this.excludeFromSemantics = excludeFromSemantics;
+  }
+
+  createState() {
+    return new _GestureDetectorState();
+  }
+}
+
+class _GestureDetectorState extends State {
+  constructor() {
+    super();
+    this.recognizers = [];
+  }
+
+  dispose() {
+    this._disposeRecognizers();
+    super.dispose();
+  }
+
+  _disposeRecognizers() {
+    this.recognizers.forEach(r => r.dispose());
+    this.recognizers = [];
+  }
+
+  didUpdateWidget(oldWidget) {
+    super.didUpdateWidget(oldWidget);
+
+    // Check if any recognizer is active (mid-gesture)
+    // If so, preserve them to allow the gesture to complete.
+    // They will be cleaned up on the next update or dispose.
+    const hasActiveGestures = this.recognizers.some(r => r.state !== 'ready');
+    // console.log(`[GestureDetector] didUpdateWidget. Active? ${hasActiveGestures}`);
+    if (hasActiveGestures) {
+      return;
+    }
+
+    // Re-initialize recognizers to pick up new callbacks (e.g. updated closures)
+    // This is safe to do here as build/update typically happens between gestures, not during.
+    // If a gesture is active during rebuild, it might be cancelled, which is standard Flutter behavior.
+    this._disposeRecognizers();
+  }
+
+  /**
+   * Initialize gesture recognizers
+   */
+  _initializeRecognizers(elementId) {
+    // Only initialize if we don't have them
+    if (this.recognizers.length > 0) {
+      return;
+    }
+
+    const w = this.widget;
+    // ... rest of init logic matches previous ...
+
+    // Tap gesture
+    if (w.onTap || w.onTapDown || w.onTapUp || w.onTapCancel) {
+      const tapRecognizer = new TapRecognizer(
+        (event) => {
+          if (w.onTap) {
+            w.onTap(event);
+          }
+          if (w.onTapUp) w.onTapUp(event);
+          if (w.onTapCancel && event.type === 'tapcancel') w.onTapCancel(event);
+        },
+        { maxDuration: 300, maxMovement: 10 }
+      );
+      this.recognizers.push(tapRecognizer);
+    }
+
+    // Double tap gesture
+    if (w.onDoubleTap) {
+      const doubleTapRecognizer = new DoubleTapRecognizer(
+        (event) => { if (w.onDoubleTap) w.onDoubleTap(event); },
+        {}
+      );
+      this.recognizers.push(doubleTapRecognizer);
+    }
+
+    // Long press gesture
+    if (w.onLongPress || w.onLongPressStart || w.onLongPressEnd) {
+      const longPressRecognizer = new LongPressRecognizer(
+        (event) => { if (w.onLongPress) w.onLongPress(event); },
+        {
+          // Note: LongPressRecognizer implementation currently expects main callback.
+          // Phase callbacks (start/end) can be added to options if supported in future.
+          duration: 500
+        }
+      );
+      this.recognizers.push(longPressRecognizer);
+    }
+
+    // Swipe gesture
+    if (w.onSwipe || w.onSwipeLeft || w.onSwipeRight || w.onSwipeUp || w.onSwipeDown) {
+      const swipeRecognizer = new SwipeRecognizer(
+        (event) => {
+          if (w.onSwipe) w.onSwipe(event);
+          if (event.direction === 'left' && w.onSwipeLeft) w.onSwipeLeft(event);
+          if (event.direction === 'right' && w.onSwipeRight) w.onSwipeRight(event);
+          if (event.direction === 'up' && w.onSwipeUp) w.onSwipeUp(event);
+          if (event.direction === 'down' && w.onSwipeDown) w.onSwipeDown(event);
+        },
+        // elementId passed as options (legacy compat or just unused options for now)
+        // Passing object is safer
+        {}
+      );
+      this.recognizers.push(swipeRecognizer);
+    }
+
+    // Pan gesture
+    if (w.onPan || w.onPanStart || w.onPanUpdate || w.onPanEnd) {
+      // Pan implementation placeholder
+    }
+
+    if (w.onVerticalDragStart || w.onVerticalDragUpdate || w.onVerticalDragEnd) {
+      this.recognizers.push(new VerticalDragRecognizer(
+        (event) => { }, // Main callback required by base class
+        {
+          onStart: w.onVerticalDragStart,
+          onUpdate: w.onVerticalDragUpdate,
+          onEnd: w.onVerticalDragEnd
+        }
+      ));
+    }
+
+    if (w.onHorizontalDragStart || w.onHorizontalDragUpdate || w.onHorizontalDragEnd) {
+      this.recognizers.push(new HorizontalDragRecognizer(
+        (event) => { }, // Main callback required by base class
+        {
+          onStart: w.onHorizontalDragStart,
+          onUpdate: w.onHorizontalDragUpdate,
+          onEnd: w.onHorizontalDragEnd
+        }
+      ));
+    }
+  }
+
+  _handleEvent(eventType, event, elementId) {
+    if (eventType.startsWith('pointer')) {
+      this._lastPointerTime = Date.now();
+    } else if (eventType.startsWith('mouse')) {
+      // WARN: Dedup disabled for debugging
+      // if (Date.now() - this._lastPointerTime < 500) {
+      //   return;
+      // }
+    }
+
+    // Initialize recognizers on interaction (lazy first load)
+    this._initializeRecognizers(elementId);
+
+    // Dispatch to all recognizers
+    this.recognizers.forEach(r => {
+      if (r.handleEvent) {
+        r.handleEvent(eventType, event);
+      }
+    });
+  }
+
+  build(context) {
+    const elementId = context.element.getElementId();
+    const widgetPath = context.element.getWidgetPath();
+
+    let childVNode = null;
+    const child = this.widget.child;
+
+    if (child) {
+      if (context._childElement) {
+        // Reconciliation: Check if  we can reuse the existing element
+        if (context._childElement.widget.constructor === child.constructor &&
+          context._childElement.widget.key === child.key) {
+
+          // Reuse existing element
+          context._childElement.updateWidget(child);
+          if (context._childElement.dirty) {
+            context._childElement.rebuild();
+          }
+        } else {
+          // Replace element
+          context._childElement.unmount();
+          // New element attached to context.element (the GestureDetector element)
+          context._childElement = child.createElement(context.element, context.element.runtime);
+          context._childElement.mount(context.element);
+        }
+      } else {
+        // Initial create
+        context._childElement = child.createElement(context.element, context.element.runtime);
+        context._childElement.mount(context.element);
+      }
+
+      childVNode = context._childElement.performRebuild();
+    }
+
+    const behavior = this.widget.behavior;
+    const containerStyle = {
+      position: 'relative',
+      userSelect: behavior === HitTestBehavior.opaque ? 'none' : 'auto',
+      WebkitUserSelect: behavior === HitTestBehavior.opaque ? 'none' : 'auto',
+      MozUserSelect: behavior === HitTestBehavior.opaque ? 'none' : 'auto',
+      msUserSelect: behavior === HitTestBehavior.opaque ? 'none' : 'auto',
+      touchAction: 'manipulation',
+      cursor: (this.widget.onTap || this.widget.onDoubleTap) ? 'pointer' : 'auto',
+
+      // Default styles for div
+      width: 'auto',
+      height: 'auto',
+
+      // Allow pointer events
+      pointerEvents: behavior === HitTestBehavior.translucent ? 'none' : 'auto'
+      // Note: 'none' means clicks pass through, but we won't capture them unless bubbling?
+      // For now, assume bubbling handles translucent.
+      // But if we want to capture click on empty space of this widget, we need auto.
+      // If we use 'auto', we block underneath.
+      // Resetting to 'auto' for now to ensure functionality.
+    };
+    if (behavior === HitTestBehavior.translucent) {
+      containerStyle.pointerEvents = 'auto'; // Force capture for now
+    }
+
+    const eventHandler = (type) => (e) => {
+      if (this.widget.behavior === HitTestBehavior.opaque) {
+        e.stopPropagation();
+      }
+      this._handleEvent(type, e, elementId);
+    };
+
+    return new VNode({
+      tag: 'div',
+      props: {
+        style: containerStyle,
+        'data-widget': 'GestureDetector',
+        'data-element-id': elementId,
+        'data-behavior': behavior,
+
+        onClick: eventHandler('click'),
+        onMouseDown: (e) => this._handleEvent('mousedown', e, elementId),
+        onMouseUp: (e) => this._handleEvent('mouseup', e, elementId),
+        onMouseMove: (e) => this._handleEvent('mousemove', e, elementId),
+        onMouseLeave: eventHandler('mouseleave'),
+        onTouchStart: (e) => this._handleEvent('touchstart', e, elementId),
+        onTouchEnd: (e) => this._handleEvent('touchend', e, elementId),
+        onTouchMove: (e) => this._handleEvent('touchmove', e, elementId),
+        onTouchCancel: eventHandler('touchcancel'),
+        onContextMenu: eventHandler('contextmenu'),
+        onPointerDown: (e) => this._handleEvent('pointerdown', e, elementId),
+        onPointerUp: (e) => this._handleEvent('pointerup', e, elementId),
+        onPointerMove: (e) => this._handleEvent('pointermove', e, elementId),
+        onPointerCancel: (e) => this._handleEvent('pointercancel', e, elementId)
+      },
+      children: childVNode ? [childVNode] : [],
+      key: this.widget.key
+    });
+  }
+}
+
+export { GestureDetector, HitTestBehavior };
\ No newline at end of file
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/grid_tile.js b/packages/flutterjs_material/flutterjs_material/src/material/grid_tile.js
new file mode 100644
index 00000000..4ce28e2d
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/grid_tile.js
@@ -0,0 +1,124 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { Container } from './container.js';
+import { Center } from '../widgets/compoment/center.js';
+import { Stack } from '../widgets/widgets.js';
+import { Positioned } from '../widgets/widgets.js';
+
+export class GridTile extends StatelessWidget {
+    constructor({
+        key,
+        header,
+        footer,
+        child,
+    } = {}) {
+        super(key);
+        this.header = header;
+        this.footer = footer;
+        this.child = child;
+    }
+
+    build(context) {
+        if (!this.header && !this.footer) {
+            return this.child || new Container();
+        }
+
+        const children = [];
+        if (this.child) {
+            children.push(new Positioned({
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0,
+                child: this.child
+            }));
+        }
+        if (this.header) {
+            children.push(new Positioned({
+                top: 0,
+                left: 0,
+                right: 0,
+                child: this.header // Usually fixed height or GridTileBar
+            }));
+        }
+        if (this.footer) {
+            children.push(new Positioned({
+                bottom: 0,
+                left: 0,
+                right: 0,
+                child: this.footer // Usually fixed height or GridTileBar
+            }));
+        }
+
+        return new Stack({
+            children: children
+        });
+    }
+}
+
+export class GridTileBar extends StatelessWidget {
+    constructor({
+        key,
+        backgroundColor,
+        leading,
+        title,
+        subtitle,
+        trailing,
+    } = {}) {
+        super(key);
+        this.backgroundColor = backgroundColor;
+        this.leading = leading;
+        this.title = title;
+        this.subtitle = subtitle;
+        this.trailing = trailing;
+    }
+
+    build(context) {
+        // Simplified implementation: Row with leading, title/subtitle expanded, trailing
+        // In valid material GridTileBar has specific height and layout
+
+        const children = [];
+        if (this.leading) {
+            children.push(new Container({
+                margin: { right: 16 }, // Padding like Logic
+                child: this.leading
+            }));
+        }
+
+        const textChildren = [];
+        if (this.title) textChildren.push(this.title); // Should be styled
+        if (this.subtitle) textChildren.push(this.subtitle); // Should be styled darker
+
+        // We lack Column/CrossAxisAlignment in bare array, need a container/column
+        // For simplicity returning a Container structure
+        // This is a placeholder since we don't have full Row/Column power imported inside this file easily without circular deps sometimes?
+        // Actually we can import Row/Col.
+
+        // Lazy layout logic here: using CSS Grid or Flex in Container is safest for this "Bar"
+
+        return new Container({
+            color: this.backgroundColor,
+            height: 48, // Standard GridTileBar height
+            child: { // Raw DOM structure hint for framework or using Row
+                tag: 'div',
+                style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: '0 8px',
+                    height: '100%'
+                },
+                children: [
+                    this.leading ? { tag: 'div', style: { marginRight: '16px' }, child: this.leading } : null,
+                    {
+                        tag: 'div',
+                        style: { flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' },
+                        children: [
+                            this.title,
+                            this.subtitle
+                        ].filter(Boolean)
+                    },
+                    this.trailing ? { tag: 'div', style: { marginLeft: '16px' }, child: this.trailing } : null
+                ].filter(Boolean)
+            }
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/icon.js b/packages/flutterjs_material/flutterjs_material/src/material/icon.js
new file mode 100644
index 00000000..8efe0dd1
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/icon.js
@@ -0,0 +1,705 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { BlendMode, TextDirection } from '../utils/utils.js';
+import { IconTheme } from './icon_theme.js';
+import { Theme } from './theme.js';
+
+const DEFAULT_ICON_SIZE = 24;
+const DEFAULT_FONT_SIZE = 24;
+
+const BLEND_MODE_MAP = {
+  [BlendMode.srcOver]: 'normal',
+  [BlendMode.srcIn]: 'multiply',
+  [BlendMode.srcOut]: 'lighten',
+  [BlendMode.srcATop]: 'screen',
+  [BlendMode.dstOver]: 'overlay',
+  [BlendMode.dstIn]: 'darken',
+  [BlendMode.dstOut]: 'color-dodge',
+  [BlendMode.dstATop]: 'color-burn',
+  [BlendMode.plus]: 'lighten',
+  [BlendMode.screen]: 'screen',
+  [BlendMode.overlay]: 'overlay',
+  [BlendMode.darken]: 'darken',
+  [BlendMode.lighten]: 'lighten',
+  [BlendMode.colorDodge]: 'color-dodge',
+  [BlendMode.colorBurn]: 'color-burn',
+  [BlendMode.hardLight]: 'hard-light',
+  [BlendMode.softLight]: 'soft-light',
+  [BlendMode.difference]: 'difference',
+  [BlendMode.exclusion]: 'exclusion',
+  [BlendMode.multiply]: 'multiply',
+  [BlendMode.hue]: 'hue',
+  [BlendMode.saturation]: 'saturation',
+  [BlendMode.color]: 'color',
+  [BlendMode.luminosity]: 'luminosity'
+};
+
+/**
+ * IconData - Represents icon metadata
+ * Contains codepoint, font family, and display properties
+ */
+class IconData {
+  constructor({
+    codePoint = 0,
+    fontFamily = 'Material Icons',
+    fontPackage = null,
+    matchTextDirection = false,
+    fontFamilyFallback = null
+  } = {}) {
+    this.codePoint = codePoint;
+    this.fontFamily = fontFamily;
+    this.fontPackage = fontPackage;
+    this.matchTextDirection = matchTextDirection;
+    this.fontFamilyFallback = Array.isArray(fontFamilyFallback) ? fontFamilyFallback : null;
+  }
+
+  getCharacter() {
+    // Material Icons ligature mappings (text-based icon names)
+    const ligatures = {
+      0xe145: 'add', 0xe838: 'star', 0xe83b: 'star_border',
+      0xe88a: 'home', 0xe8b8: 'settings', 0xe8b6: 'search',
+      0xe87e: 'favorite', 0xe8cb: 'favorite_border',
+      0xe5cd: 'close', 0xe5d2: 'menu',
+      0xe5e0: 'arrow_back', 0xe5e1: 'arrow_forward',
+      0xe872: 'delete', 0xe3c9: 'edit',
+      0xe5ca: 'check', 0xe86c: 'check_circle',
+      0xe783: 'error', 0xe001: 'error_outline',
+      0xe88f: 'info', 0xe002: 'warning',
+      0xe2c4: 'download', 0xe2c6: 'upload',
+      0xe5d5: 'refresh', 0xe5d4: 'more_vert',
+      0xe5d3: 'more_horiz', 0xe853: 'account_circle',
+      0xe7fd: 'person', 0xe7f4: 'notifications'
+    };
+
+    // Use ligature if available (recommended for Material Icons)
+    return ligatures[this.codePoint] || String.fromCharCode(this.codePoint);
+  }
+
+  toString() {
+    const hex = this.codePoint.toString(16).toUpperCase().padStart(5, '0');
+    return `IconData(U+${hex})`;
+  }
+
+  equals(other) {
+    if (!other || !(other instanceof IconData)) {
+      return false;
+    }
+    return (
+      this.codePoint === other.codePoint &&
+      this.fontFamily === other.fontFamily &&
+      this.fontPackage === other.fontPackage &&
+      this.matchTextDirection === other.matchTextDirection &&
+      this._arrayEquals(this.fontFamilyFallback, other.fontFamilyFallback)
+    );
+  }
+
+  _arrayEquals(arr1, arr2) {
+    if (!arr1 && !arr2) return true;
+    if (!arr1 || !arr2) return false;
+    if (arr1.length !== arr2.length) return false;
+    return arr1.every((val, idx) => val === arr2[idx]);
+  }
+
+  hashCode() {
+    let hash = this.codePoint;
+    hash = ((hash << 5) - hash) + (this.fontFamily ? this.fontFamily.charCodeAt(0) : 0);
+    hash = ((hash << 5) - hash) + (this.matchTextDirection ? 1 : 0);
+    if (this.fontFamilyFallback) {
+      this.fontFamilyFallback.forEach(f => {
+        hash = ((hash << 5) - hash) + (f ? f.charCodeAt(0) : 0);
+      });
+    }
+    return hash;
+  }
+}
+
+/**
+ * IconThemeData - Theme configuration for icons
+ * Provides default values for icon properties
+ */
+class IconThemeData {
+  constructor({
+    color = null,
+    opacity = 1.0,
+    size = DEFAULT_ICON_SIZE,
+    fill = null,
+    weight = null,
+    grade = null,
+    opticalSize = null,
+    shadows = null,
+    applyTextScaling = false
+  } = {}) {
+    this.color = color;
+    this.opacity = opacity;
+    this.size = size;
+    this.fill = fill;
+    this.weight = weight;
+    this.grade = grade;
+    this.opticalSize = opticalSize;
+    this.shadows = shadows;
+    this.applyTextScaling = applyTextScaling;
+  }
+
+  copyWith({
+    color,
+    opacity,
+    size,
+    fill,
+    weight,
+    grade,
+    opticalSize,
+    shadows,
+    applyTextScaling
+  } = {}) {
+    return new IconThemeData({
+      color: color !== undefined ? color : this.color,
+      opacity: opacity !== undefined ? opacity : this.opacity,
+      size: size !== undefined ? size : this.size,
+      fill: fill !== undefined ? fill : this.fill,
+      weight: weight !== undefined ? weight : this.weight,
+      grade: grade !== undefined ? grade : this.grade,
+      opticalSize: opticalSize !== undefined ? opticalSize : this.opticalSize,
+      shadows: shadows !== undefined ? shadows : this.shadows,
+      applyTextScaling: applyTextScaling !== undefined ? applyTextScaling : this.applyTextScaling
+    });
+  }
+}
+
+/**
+ * Icon - StatelessWidget for rendering icons
+ * Supports Material Design icons and custom icon fonts
+ */
+class Icon extends StatelessWidget {
+  constructor(iconOrOptions, options = {}) {
+    let _icon = null;
+    let _opts = {};
+
+    if (iconOrOptions && (iconOrOptions.constructor?.name === 'IconData' || iconOrOptions.codePoint !== undefined)) {
+      _icon = iconOrOptions;
+      _opts = options;
+    } else {
+      _opts = iconOrOptions || {};
+      _icon = _opts.icon;
+    }
+
+    const {
+      key = null,
+      size = null,
+      fill = null,
+      weight = null,
+      grade = null,
+      opticalSize = null,
+      color = null,
+      shadows = null,
+      semanticLabel = null,
+      textDirection = null,
+      applyTextScaling = null,
+      blendMode = null,
+      fontWeight = null
+    } = _opts;
+    super(key);
+
+    // Assertions
+    if (fill !== null && (fill < 0.0 || fill > 1.0)) {
+      throw new Error('fill must be between 0.0 and 1.0');
+    }
+    if (weight !== null && weight <= 0.0) {
+      throw new Error('weight must be greater than 0.0');
+    }
+    if (opticalSize !== null && opticalSize <= 0.0) {
+      throw new Error('opticalSize must be greater than 0.0');
+    }
+
+    this.icon = _icon;
+    this.size = size;
+    this.fill = fill;
+    this.weight = weight;
+    this.grade = grade;
+    this.opticalSize = opticalSize;
+    this.color = color;
+    this.shadows = shadows;
+    this.semanticLabel = semanticLabel;
+    this.textDirection = textDirection;
+    this.applyTextScaling = applyTextScaling;
+    this.blendMode = blendMode || BlendMode.srcOver;
+    this.fontWeight = fontWeight;
+
+    this._injectFont();
+  }
+
+  _injectFont() {
+    if (typeof document === 'undefined') return;
+
+    // 1. Inject Google Fonts Link
+    if (!document.getElementById('flutterjs-material-icons-link')) {
+      const link = document.createElement('link');
+      link.id = 'flutterjs-material-icons-link';
+      link.rel = 'stylesheet';
+      link.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
+      document.head.appendChild(link);
+    }
+
+    // 2. Inject CSS Rules (Ensure .material-icons class is defined)
+    if (!document.getElementById('flutterjs-material-icons-style')) {
+      const style = document.createElement('style');
+      style.id = 'flutterjs-material-icons-style';
+      style.textContent = `
+        /* 
+         * Rely on the Google Fonts link for the @font-face definition.
+         * This avoids hardcoding a specific version (v140) that might be incomplete or outdated.
+         */
+
+        .material-icons {
+          font-family: 'Material Icons';
+          font-weight: normal;
+          font-style: normal;
+          font-size: 24px;
+          display: inline-block;
+          line-height: 1;
+          text-transform: none;
+          letter-spacing: normal;
+          word-wrap: normal;
+          white-space: nowrap;
+          direction: ltr;
+          -webkit-font-smoothing: antialiased;
+          text-rendering: optimizeLegibility;
+          -moz-osx-font-smoothing: grayscale;
+          font-feature-settings: 'liga';
+        }
+      `;
+      document.head.appendChild(style);
+    }
+  }
+
+  build(context) {
+    // Ensure Material Icons font is injected on client-side rendering
+    this._injectFont();
+
+    // Get resolved text direction
+    const textDirection = this.textDirection || this._getTextDirection(context);
+
+    // Get icon theme from context
+    const iconTheme = this._getIconTheme(context) || new IconThemeData();
+
+    // Determine if text scaling should be applied
+    const applyTextScaling = this.applyTextScaling ?? iconTheme.applyTextScaling ?? false;
+
+    // Calculate icon size
+    const tentativeIconSize = this.size ?? iconTheme.size ?? DEFAULT_ICON_SIZE;
+    const iconSize = applyTextScaling
+      ? this._scaleTextSize(tentativeIconSize, context)
+      : tentativeIconSize;
+
+    // Resolve icon properties from theme
+    const iconFill = this.fill ?? iconTheme.fill;
+    const iconWeight = this.weight ?? iconTheme.weight;
+    const iconGrade = this.grade ?? iconTheme.grade;
+    const iconOpticalSize = this.opticalSize ?? iconTheme.opticalSize;
+    const iconShadows = this.shadows ?? iconTheme.shadows;
+
+    const icon = this.icon;
+
+    // Handle null icon - use duck typing instead of instanceof for bundled code compatibility
+    if (!icon || (icon.codePoint === undefined && !(icon instanceof IconData))) {
+      return this._buildEmptyIcon(iconSize);
+    }
+
+    // Calculate color with opacity
+    const iconOpacity = iconTheme.opacity ?? 1.0;
+
+    // Resolve color:
+    // 1. Widget property
+    // 2. IconTheme
+    // 3. Theme colorScheme.onSurface (fallback from M3 defaults usually)
+    let iconColor = this.color ?? iconTheme.color;
+
+    if (!iconColor) {
+      try {
+        // Fallback to theme context if available
+        const theme = Theme.of(context);
+        iconColor = theme?.colorScheme?.onSurface;
+      } catch (e) {
+        // Fallback to default if theme lookup fails
+      }
+      // If still no color, leave as undefined to allow CSS inheritance (currentColor)
+    }
+
+    if (iconOpacity !== 1.0) {
+      iconColor = this._applyOpacity(iconColor, iconOpacity);
+    }
+
+    // Build font variations for advanced typography
+    const fontVariations = this._buildFontVariations(
+      iconFill,
+      iconWeight,
+      iconGrade,
+      iconOpticalSize
+    );
+
+    // Build inline styles
+    const inlineStyles = this._buildInlineStyles({
+      color: iconColor,
+      fontSize: iconSize,
+      fontFamily: icon.fontFamily,
+      fontWeight: this.fontWeight,
+      fontFamilyFallback: icon.fontFamilyFallback,
+      shadows: iconShadows,
+      fontVariations,
+      blendMode: this.blendMode,
+      textDirection
+    });
+
+    // Build icon element
+    let iconElement = this._buildIconElement(icon, inlineStyles);
+
+    // Apply text direction transform if needed
+    if (icon.matchTextDirection && textDirection === TextDirection.rtl) {
+      iconElement = this._mirrorIcon(iconElement, iconSize);
+    }
+
+    // Wrap with semantics
+    const elementId = context?.element?.getElementId?.() || 'icon-' + Math.random().toString(36).substr(2, 9);
+    const widgetPath = context?.element?.getWidgetPath?.() || 'Icon';
+
+    // DEBUG: Log icon properties
+    if (icon.codePoint === 0xe838 || icon.codePoint === 0xe145) {
+      console.log(`[Icon Debug] Building icon: ${icon.codePoint.toString(16)}`, {
+        family: icon.fontFamily,
+        size: iconSize,
+        color: iconColor,
+        inlineStyles
+      });
+    }
+
+    return new VNode({
+      tag: 'span',
+      props: {
+        role: 'img',
+        'aria-label': this.semanticLabel || 'Icon',
+        'data-element-id': elementId,
+        'data-widget-path': widgetPath,
+        'data-widget': 'Icon',
+        'data-icon-codepoint': `U + ${icon.codePoint.toString(16).toUpperCase()} `,
+        title: this.semanticLabel || '',
+        style: {
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: `${iconSize}px`,
+          height: `${iconSize}px`
+        }
+      },
+      children: [iconElement],
+      key: this.key
+    });
+  }
+
+  _buildEmptyIcon(size) {
+    // Debugging aid: invalid/missing icon
+    return new VNode({
+      tag: 'span',
+      props: {
+        style: {
+          display: 'inline-flex',
+          width: `${size} px`,
+          height: `${size} px`,
+          backgroundColor: 'rgba(255, 0, 0, 0.2)', // Visual indicator
+          color: 'red',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: '12px',
+          border: '1px dashed red'
+        },
+        title: 'Missing Icon'
+      },
+      children: ['?']
+    });
+  }
+
+  _buildIconElement(icon, styles) {
+    const character = icon.getCharacter();
+
+    return new VNode({
+      tag: 'span',
+      props: {
+        className: 'fjs-icon material-icons',
+        style: {
+          ...styles,
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          lineHeight: '1.0',
+          whiteSpace: 'nowrap'
+        }
+      },
+      children: [character]
+    });
+  }
+
+  _mirrorIcon(iconElement, size) {
+    return new VNode({
+      tag: 'span',
+      props: {
+        style: {
+          display: 'inline-flex',
+          transform: 'scaleX(-1)',
+          transformOrigin: 'center',
+          width: `${size}px`,
+          height: `${size}px`,
+          alignItems: 'center',
+          justifyContent: 'center'
+        }
+      },
+      children: [iconElement]
+    });
+  }
+
+  _buildInlineStyles({
+    color,
+    fontSize,
+    fontFamily,
+    fontWeight,
+    fontFamilyFallback,
+    shadows,
+    fontVariations,
+    blendMode,
+    textDirection
+  }) {
+    let cssColor = color;
+
+    // Check if color is an object (Color, MaterialColor, etc.)
+    if (color && typeof color === 'object') {
+      // First try standard conversion
+      if (typeof color.toCSSString === 'function') {
+        cssColor = color.toCSSString();
+      } else if (color.value !== undefined) {
+        // Fallback: manually convert integer value to CSS hex
+        // value is 0xAARRGGBB
+        // we want #RRGGBB if alpha is FF, else rgba
+        const val = color.value >>> 0;
+        const a = (val >> 24) & 0xFF;
+        const r = (val >> 16) & 0xFF;
+        const g = (val >> 8) & 0xFF;
+        const b = val & 0xFF;
+
+        if (a === 255) {
+          cssColor = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+        } else {
+          const opacity = (a / 255).toFixed(4).replace(/\.?0+$/, '');
+          cssColor = `rgba(${r}, ${g}, ${b}, ${opacity})`;
+        }
+      }
+    }
+
+    const styles = {
+      fontSize: `${fontSize}px`,
+      color: cssColor,
+      fontVariationSettings: fontVariations,
+      textShadow: this._buildTextShadow(shadows),
+      // mixBlendMode: BLEND_MODE_MAP[blendMode] || 'normal',
+      direction: textDirection === TextDirection.rtl ? 'rtl' : 'ltr',
+      lineHeight: '1.0',
+      height: '1em',
+      userSelect: 'none',
+      WebkitUserSelect: 'none',
+      MozUserSelect: 'none'
+    };
+
+    if (fontWeight) {
+      styles.fontWeight = this._normalizeFontWeight(fontWeight);
+    }
+
+    return styles;
+  }
+
+  _buildFontFamily(primary, fallback) {
+    // Don't use quotes - they get HTML-encoded in inline styles
+    return "Material Icons";
+  }
+
+  _buildFontVariations(fill, weight, grade, opticalSize) {
+    const variations = [];
+
+    if (fill !== null && fill !== undefined) {
+      variations.push(`'FILL' ${fill}`);
+    }
+    if (weight !== null && weight !== undefined) {
+      variations.push(`'wght' ${weight}`);
+    }
+    if (grade !== null && grade !== undefined) {
+      variations.push(`'GRAD' ${grade}`);
+    }
+    if (opticalSize !== null && opticalSize !== undefined) {
+      variations.push(`'opsz' ${opticalSize}`);
+    }
+
+    return variations.length > 0 ? variations.join(', ') : 'normal';
+  }
+
+  _buildTextShadow(shadows) {
+    if (!shadows || !Array.isArray(shadows)) {
+      return 'none';
+    }
+
+    return shadows
+      .map(shadow => {
+        const offsetX = shadow.offsetX ?? 0;
+        const offsetY = shadow.offsetY ?? 0;
+        const blurRadius = shadow.blurRadius ?? 0;
+        const color = shadow.color ?? 'rgba(0, 0, 0, 0.25)';
+        return `${offsetX}px ${offsetY}px ${blurRadius}px ${color}`;
+      })
+      .join(', ');
+  }
+
+  _normalizeFontWeight(weight) {
+    const weightMap = {
+      thin: '100',
+      extralight: '200',
+      light: '300',
+      normal: '400',
+      regular: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+      extrabold: '800',
+      black: '900'
+    };
+
+    if (typeof weight === 'string') {
+      return weightMap[weight.toLowerCase()] || weight;
+    }
+
+    return String(weight);
+  }
+
+  _applyOpacity(color, opacity) {
+    if (!color) return color;
+
+    // Handle Color object
+    if (typeof color === 'object' && color.toCSSString) {
+      if (color.withOpacity) {
+        return color.withOpacity(opacity).toCSSString();
+      }
+      color = color.toCSSString();
+    } else if (typeof color === 'object' && color.value) {
+      // Manual fallback if methods missing
+      // Reconstruct as rgba
+      const val = color.value;
+      const r = (val >> 16) & 0xFF;
+      const g = (val >> 8) & 0xFF;
+      const b = val & 0xFF;
+      return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    }
+
+    // Handle hex color
+    if (typeof color === 'string' && color.startsWith('#')) {
+      const hex = color.slice(1);
+      const r = parseInt(hex.substring(0, 2), 16);
+      const g = parseInt(hex.substring(2, 4), 16);
+      const b = parseInt(hex.substring(4, 6), 16);
+      return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    }
+
+    // Handle rgb/rgba
+    if (typeof color === 'string' && color.startsWith('rgb')) {
+      return color.replace(/[\d.]+\)/, `${opacity})`);
+    }
+
+    return color;
+  }
+
+  _getTextDirection(context) {
+    // Try to get from document or context
+    if (typeof document !== 'undefined') {
+      const dir = document.documentElement.dir || document.dir || 'ltr';
+      return dir === 'rtl' ? TextDirection.rtl : TextDirection.ltr;
+    }
+    return TextDirection.ltr;
+  }
+
+  _getIconTheme(context) {
+    return IconTheme.of(context) || new IconThemeData();
+  }
+
+  _scaleTextSize(size, context) {
+    // Apply text scaling factor from context (typically 1.0 - 2.0)
+    // For now, return unchanged
+    return size;
+  }
+
+  debugFillProperties(properties) {
+    super.debugFillProperties(properties);
+    properties.push({ name: 'icon', value: this.icon });
+    properties.push({ name: 'size', value: this.size });
+    properties.push({ name: 'fill', value: this.fill });
+    properties.push({ name: 'weight', value: this.weight });
+    properties.push({ name: 'grade', value: this.grade });
+    properties.push({ name: 'opticalSize', value: this.opticalSize });
+    properties.push({ name: 'color', value: this.color });
+    properties.push({ name: 'blendMode', value: this.blendMode });
+    properties.push({ name: 'semanticLabel', value: this.semanticLabel });
+    if (this.shadows) {
+      properties.push({ name: 'shadows', value: this.shadows });
+    }
+  }
+}
+
+/**
+ * Material Design Icons - Pre-defined icon data
+ */
+const Icons = {
+  // Common icons
+  home: new IconData({ codePoint: 0xe88a, fontFamily: 'Material Icons' }),
+  settings: new IconData({ codePoint: 0xe8b8, fontFamily: 'Material Icons' }),
+  search: new IconData({ codePoint: 0xe8b6, fontFamily: 'Material Icons' }),
+  favorite: new IconData({ codePoint: 0xe87e, fontFamily: 'Material Icons' }),
+  favoriteBorder: new IconData({ codePoint: 0xe8cb, fontFamily: 'Material Icons' }),
+  star: new IconData({ codePoint: 0xe838, fontFamily: 'Material Icons' }),
+  starBorder: new IconData({ codePoint: 0xe83b, fontFamily: 'Material Icons' }),
+  close: new IconData({ codePoint: 0xe5cd, fontFamily: 'Material Icons' }),
+  menu: new IconData({ codePoint: 0xe5d2, fontFamily: 'Material Icons' }),
+  arrowBack: new IconData({ codePoint: 0xe5e0, fontFamily: 'Material Icons' }),
+  arrowForward: new IconData({ codePoint: 0xe5e1, fontFamily: 'Material Icons' }),
+  add: new IconData({ codePoint: 0xe145, fontFamily: 'Material Icons' }),
+  delete: new IconData({ codePoint: 0xe872, fontFamily: 'Material Icons' }),
+  edit: new IconData({ codePoint: 0xe3c9, fontFamily: 'Material Icons' }),
+  check: new IconData({ codePoint: 0xe5ca, fontFamily: 'Material Icons' }),
+  checkCircle: new IconData({ codePoint: 0xe86c, fontFamily: 'Material Icons' }),
+  error: new IconData({ codePoint: 0xe783, fontFamily: 'Material Icons' }),
+  errorOutline: new IconData({ codePoint: 0xe001, fontFamily: 'Material Icons' }),
+  info: new IconData({ codePoint: 0xe88f, fontFamily: 'Material Icons' }),
+  warning: new IconData({ codePoint: 0xe002, fontFamily: 'Material Icons' }),
+  download: new IconData({ codePoint: 0xe2c4, fontFamily: 'Material Icons' }),
+  upload: new IconData({ codePoint: 0xe2c6, fontFamily: 'Material Icons' }),
+  refresh: new IconData({ codePoint: 0xe5d5, fontFamily: 'Material Icons' }),
+  moreVert: new IconData({ codePoint: 0xe5d4, fontFamily: 'Material Icons' }),
+  moreHoriz: new IconData({ codePoint: 0xe5d3, fontFamily: 'Material Icons' })
+  ,
+  accountCircle: new IconData({ codePoint: 0xe853, fontFamily: 'Material Icons' }),
+  person: new IconData({ codePoint: 0xe7fd, fontFamily: 'Material Icons' }),
+  notifications: new IconData({ codePoint: 0xe7f4, fontFamily: 'Material Icons' }),
+  mail: new IconData({ codePoint: 0xe158, fontFamily: 'Material Icons' }),
+  shoppingCart: new IconData({ codePoint: 0xe8cc, fontFamily: 'Material Icons' }),
+  cameraAlt: new IconData({ codePoint: 0xe3af, fontFamily: 'Material Icons' }),
+  image: new IconData({ codePoint: 0xe3f4, fontFamily: 'Material Icons' }),
+  map: new IconData({ codePoint: 0xe55b, fontFamily: 'Material Icons' }),
+  place: new IconData({ codePoint: 0xe55f, fontFamily: 'Material Icons' }),
+  phone: new IconData({ codePoint: 0xe0cd, fontFamily: 'Material Icons' }),
+  share: new IconData({ codePoint: 0xe80d, fontFamily: 'Material Icons' }),
+  thumbUp: new IconData({ codePoint: 0xe8dc, fontFamily: 'Material Icons' }),
+  visibility: new IconData({ codePoint: 0xe8f4, fontFamily: 'Material Icons' }),
+  logout: new IconData({ codePoint: 0xe9ba, fontFamily: 'Material Icons' }),
+  login: new IconData({ codePoint: 0xea77, fontFamily: 'Material Icons' }),
+  addAPhoto: new IconData({ codePoint: 0xe439, fontFamily: 'Material Icons' }),
+  addAlarm: new IconData({ codePoint: 0xe193, fontFamily: 'Material Icons' }),
+  addAlert: new IconData({ codePoint: 0xe003, fontFamily: 'Material Icons' }),
+  addBox: new IconData({ codePoint: 0xe146, fontFamily: 'Material Icons' }),
+  addCircle: new IconData({ codePoint: 0xe147, fontFamily: 'Material Icons' }),
+  // addCircleOutline: new IconData
+
+
+
+};
+
+export { Icon, IconData, IconThemeData, Icons };
\ No newline at end of file
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/icon_button.js b/packages/flutterjs_material/flutterjs_material/src/material/icon_button.js
new file mode 100644
index 00000000..02a2a1fa
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/icon_button.js
@@ -0,0 +1,113 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { GestureDetector } from './gesture_detector.js';
+import { Container } from './container.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { Center } from '../widgets/compoment/center.js';
+import { IconTheme } from './icon_theme.js';
+import { IconThemeData } from './icon.js';
+import { Theme } from './theme.js';
+
+/**
+ * IconButton - A Material Design icon button.
+ * 
+ * An icon button is a picture printed on a Material widget that reacts to touches
+ * by filling with color (ink).
+ */
+export class IconButton extends StatelessWidget {
+    constructor({
+        key,
+        iconSize = null,
+        padding = null,
+        alignment,
+        icon,
+        color,
+        focusColor,
+        hoverColor,
+        highlightColor,
+        splashColor,
+        disabledColor,
+        onPressed,
+        mouseCursor,
+        focusNode,
+        autofocus = false,
+        tooltip,
+        enableFeedback = true,
+        constraints,
+        style = null, // Added for completeness, though specific props usually take precedence
+    } = {}) {
+        super({ key });
+        this.iconSize = iconSize;
+        this.padding = padding;
+        this.alignment = alignment;
+        this.icon = icon;
+        this.color = color;
+        this.focusColor = focusColor;
+        this.hoverColor = hoverColor;
+        this.highlightColor = highlightColor;
+        this.splashColor = splashColor;
+        this.disabledColor = disabledColor;
+        this.onPressed = onPressed;
+        this.mouseCursor = mouseCursor;
+        this.focusNode = focusNode;
+        this.autofocus = autofocus;
+        this.tooltip = tooltip;
+        this.enableFeedback = enableFeedback;
+        this.constraints = constraints;
+        this.style = style;
+    }
+
+    build(context) {
+        const theme = Theme.of(context);
+        const iconButtonTheme = theme.iconButtonTheme?.style || {};
+
+        // Retrieve parent theme to inherit properties (e.g. from AppBar)
+        const parentIconTheme = IconTheme.of(context) || new IconThemeData({ size: 24.0, color: null });
+
+        // Resolve params
+        // M3 default size 24.0, padding 8.0
+
+        // Theme could provide style.iconSize, style.padding if we map it
+        // Simpler: just check style overrides if we implement ButtonStyle logic, 
+        // but IconButton is weird as it has explicit props too.
+        // Explicit props > Theme > Default
+
+        const effectiveSize = this.iconSize ?? iconButtonTheme.iconSize ?? parentIconTheme.size ?? 24.0;
+        const effectivePadding = this.padding ?? iconButtonTheme.padding ?? EdgeInsets.all(8.0);
+
+        // Color resolution
+        // 1. this.color
+        // 2. iconButtonTheme.foregroundColor
+        // 3. parentIconTheme.color
+        // 4. Default?
+
+        // Note: IconButton usually inherits color from IconTheme unless specified.
+
+        let effectiveColor = this.color;
+        if (!effectiveColor && iconButtonTheme.foregroundColor) {
+            // Extract if it's a simple color or MaterialStateProperty (not fully supported here yet)
+            effectiveColor = iconButtonTheme.foregroundColor;
+        }
+        if (!effectiveColor) {
+            effectiveColor = parentIconTheme.color;
+        }
+
+        // Merge with IconButton specific overrides
+        const mergedThemeData = parentIconTheme.copyWith({
+            color: effectiveColor,
+            size: effectiveSize
+        });
+
+        return new GestureDetector({
+            onTap: this.onPressed,
+            child: new Container({
+                padding: effectivePadding,
+                child: new Center({
+                    child: new IconTheme({
+                        data: mergedThemeData,
+                        child: this.icon
+                    })
+                })
+            })
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/icon_button_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/icon_button_theme.js
new file mode 100644
index 00000000..f1347549
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/icon_button_theme.js
@@ -0,0 +1,30 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class IconButtonThemeData {
+    constructor({
+        style
+    } = {}) {
+        this.style = style;
+    }
+}
+
+class IconButtonTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(IconButtonTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    IconButtonTheme,
+    IconButtonThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/icon_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/icon_theme.js
new file mode 100644
index 00000000..923583d6
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/icon_theme.js
@@ -0,0 +1,36 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+import { IconThemeData } from './icon.js';
+
+class IconTheme extends InheritedWidget {
+    constructor({
+        key,
+        data,
+        child
+    }) {
+        super({ key, child });
+        this.data = data;
+    }
+
+    static of(context) {
+        const inheritedTheme = context.dependOnInheritedWidgetOfExactType(IconTheme);
+        return inheritedTheme?.data || null;
+    }
+
+    static merge({
+        key,
+        data,
+        child
+    }) {
+        return new IconTheme({
+            key,
+            data,
+            child
+        });
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+}
+
+export { IconTheme };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/image.js b/packages/flutterjs_material/flutterjs_material/src/material/image.js
new file mode 100644
index 00000000..af37c538
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/image.js
@@ -0,0 +1,852 @@
+
+import { StatefulWidget } from '../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { BoxFit, BlendMode, FilterQuality, Clip } from '../utils/utils.js';
+
+const IMAGE_SOURCE_TYPES = {
+  network: 'network',
+  asset: 'asset',
+  memory: 'memory',
+  file: 'file'
+};
+
+const BLEND_MODE_MAP = {
+  [BlendMode.normal]: 'normal',
+  [BlendMode.multiply]: 'multiply',
+  [BlendMode.screen]: 'screen',
+  [BlendMode.overlay]: 'overlay',
+  [BlendMode.darken]: 'darken',
+  [BlendMode.lighten]: 'lighten',
+  [BlendMode.colorDodge]: 'color-dodge',
+  [BlendMode.colorBurn]: 'color-burn',
+  [BlendMode.hardLight]: 'hard-light',
+  [BlendMode.softLight]: 'soft-light',
+  [BlendMode.difference]: 'difference',
+  [BlendMode.exclusion]: 'exclusion',
+  [BlendMode.hue]: 'hue',
+  [BlendMode.saturation]: 'saturation',
+  [BlendMode.color]: 'color',
+  [BlendMode.luminosity]: 'luminosity'
+};
+
+const BOX_FIT_MAP = {
+  [BoxFit.fill]: 'fill',
+  [BoxFit.contain]: 'contain',
+  [BoxFit.cover]: 'cover',
+  [BoxFit.fitWidth]: 'scale-down',
+  [BoxFit.fitHeight]: 'scale-down',
+  [BoxFit.none]: 'none',
+  [BoxFit.scaleDown]: 'scale-down'
+};
+
+const CLIP_BEHAVIOR_MAP = {
+  none: 'visible',
+  hardEdge: 'hidden',
+  antiAlias: 'hidden',
+  antiAliasWithSaveLayer: 'hidden'
+};
+
+/**
+ * ImageStreamCompleterHandle - Manages stream lifecycle and memory
+ */
+class ImageStreamCompleterHandle {
+  constructor(completer) {
+    this.completer = completer;
+    this.isAlive = true;
+  }
+
+  dispose() {
+    this.isAlive = false;
+  }
+
+  keepAlive() {
+    return this;
+  }
+}
+
+/**
+ * ImageStream - Handles image loading state and listeners
+ */
+class ImageStream {
+  constructor(imageProvider) {
+    this.imageProvider = imageProvider;
+    this.listeners = new Set();
+    this.imageInfo = null;
+    this.error = null;
+    this.completer = null;
+  }
+
+  addListener(listener) {
+    this.listeners.add(listener);
+    if (this.imageInfo) {
+      listener.onImage(this.imageInfo);
+    }
+  }
+
+  removeListener(listener) {
+    this.listeners.delete(listener);
+  }
+
+  notifyListeners(imageInfo) {
+    this.imageInfo = imageInfo;
+    this.listeners.forEach(listener => {
+      if (listener.onImage) listener.onImage(imageInfo);
+    });
+  }
+
+  notifyError(error, stackTrace) {
+    this.error = error;
+    this.listeners.forEach(listener => {
+      if (listener.onError) listener.onError(error, stackTrace);
+    });
+  }
+
+  notifyChunk(event) {
+    this.listeners.forEach(listener => {
+      if (listener.onChunk) listener.onChunk(event);
+    });
+  }
+}
+
+/**
+ * ImageChunkEvent - Tracks image loading progress
+ */
+class ImageChunkEvent {
+  constructor({ cumulativeBytesLoaded = 0, expectedTotalBytes = null } = {}) {
+    this.cumulativeBytesLoaded = cumulativeBytesLoaded;
+    this.expectedTotalBytes = expectedTotalBytes;
+  }
+
+  get progress() {
+    if (!this.expectedTotalBytes) return 0;
+    return this.cumulativeBytesLoaded / this.expectedTotalBytes;
+  }
+}
+
+/**
+ * ImageProvider - Base class for different image sources
+ */
+class ImageProvider {
+  constructor(sourceType = IMAGE_SOURCE_TYPES.network) {
+    this.sourceType = sourceType;
+    this.key = Math.random().toString(36).substr(2, 9);
+  }
+
+  resolve(config = {}) {
+    return new ImageStream(this);
+  }
+
+  async load() {
+    throw new Error('load() must be implemented');
+  }
+
+  getUrl() {
+    throw new Error('getUrl() must be implemented');
+  }
+}
+
+/**
+ * NetworkImage - Load images from network URLs with progress tracking
+ */
+class NetworkImage extends ImageProvider {
+  constructor(src, { scale = 1.0, headers = null, timeout = 10000, onProgress = null } = {}) {
+    super(IMAGE_SOURCE_TYPES.network);
+    this.src = src;
+    this.scale = scale;
+    this.headers = headers || {};
+    this.timeout = timeout;
+    this.onProgress = onProgress;
+  }
+
+  resolve(config = {}) {
+    const stream = new ImageStream(this);
+    this._loadWithStream(stream, config);
+    return stream;
+  }
+
+  async _loadWithStream(stream, config) {
+    try {
+      const result = await this._loadImage();
+      stream.notifyListeners({
+        image: result.element,
+        width: result.width,
+        height: result.height,
+        scale: this.scale,
+        src: this.src
+      });
+    } catch (error) {
+      stream.notifyError(error, new Error().stack);
+    }
+  }
+
+  _loadImage() {
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => {
+        reject(new Error(`Network image timeout: ${this.src}`));
+      }, this.timeout);
+
+      const xhr = new XMLHttpRequest();
+
+      xhr.addEventListener('progress', (e) => {
+        if (e.lengthComputable && this.onProgress) {
+          this.onProgress({
+            cumulativeBytesLoaded: e.loaded,
+            expectedTotalBytes: e.total
+          });
+        }
+      });
+
+      xhr.addEventListener('load', () => {
+        clearTimeout(timer);
+        if (xhr.status >= 200 && xhr.status < 300) {
+          const blob = xhr.response;
+          const img = new Image();
+
+          img.onload = () => {
+            resolve({
+              element: img,
+              width: img.naturalWidth,
+              height: img.naturalHeight,
+              scale: this.scale
+            });
+          };
+
+          img.onerror = () => {
+            reject(new Error(`Failed to load network image: ${this.src}`));
+          };
+
+          img.src = URL.createObjectURL(blob);
+        } else {
+          reject(new Error(`HTTP ${xhr.status}: ${this.src}`));
+        }
+      });
+
+      xhr.addEventListener('error', () => {
+        clearTimeout(timer);
+        reject(new Error(`Network error loading: ${this.src}`));
+      });
+
+      xhr.responseType = 'blob';
+      xhr.open('GET', this.src, true);
+
+      Object.entries(this.headers).forEach(([key, value]) => {
+        xhr.setRequestHeader(key, value);
+      });
+
+      xhr.send();
+    });
+  }
+
+  async load() {
+    return this._loadImage();
+  }
+
+  getUrl() {
+    return this.src;
+  }
+}
+
+/**
+ * AssetImage - Load images from project assets
+ */
+class AssetImage extends ImageProvider {
+  constructor(assetPath, { packages = null, scale = 1.0 } = {}) {
+    super(IMAGE_SOURCE_TYPES.asset);
+    this.assetPath = assetPath;
+    this.packages = packages;
+    this.scale = scale;
+    this.key = `asset:${packages}:${assetPath}:${scale}`;
+  }
+
+  resolve(config = {}) {
+    const stream = new ImageStream(this);
+    this._loadWithStream(stream, config);
+    return stream;
+  }
+
+  async _loadWithStream(stream, config) {
+    try {
+      const result = await this.load();
+      stream.notifyListeners({
+        image: result.element,
+        width: result.width,
+        height: result.height,
+        scale: this.scale,
+        src: result.src
+      });
+    } catch (error) {
+      stream.notifyError(error, new Error().stack);
+    }
+  }
+
+  async load() {
+    return new Promise((resolve, reject) => {
+      const assetUrl = this._resolveAssetPath();
+      const img = new Image();
+
+      img.onload = () => {
+        resolve({
+          element: img,
+          src: assetUrl,
+          width: img.naturalWidth,
+          height: img.naturalHeight,
+          scale: this.scale
+        });
+      };
+
+      img.onerror = () => {
+        reject(new Error(`Failed to load asset image: ${this.assetPath}`));
+      };
+
+      img.src = assetUrl;
+    });
+  }
+
+  _resolveAssetPath() {
+    const basePath = this.packages ? `/packages/${this.packages}` : '/assets';
+    return `${basePath}/${this.assetPath}`;
+  }
+
+  getUrl() {
+    return this._resolveAssetPath();
+  }
+}
+
+/**
+ * MemoryImage - Load images from Uint8Array or base64 encoded data
+ */
+class MemoryImage extends ImageProvider {
+  constructor(bytes, { scale = 1.0 } = {}) {
+    super(IMAGE_SOURCE_TYPES.memory);
+    this.bytes = bytes;
+    this.scale = scale;
+    this.key = `memory:${this.bytes.length}:${scale}`;
+  }
+
+  resolve(config = {}) {
+    const stream = new ImageStream(this);
+    this._loadWithStream(stream, config);
+    return stream;
+  }
+
+  async _loadWithStream(stream, config) {
+    try {
+      const result = await this.load();
+      stream.notifyListeners({
+        image: result.element,
+        width: result.width,
+        height: result.height,
+        scale: this.scale,
+        src: result.src
+      });
+    } catch (error) {
+      stream.notifyError(error, new Error().stack);
+    }
+  }
+
+  async load() {
+    return new Promise((resolve, reject) => {
+      try {
+        let dataUrl;
+
+        if (this.bytes instanceof Uint8Array) {
+          const binary = String.fromCharCode.apply(null, this.bytes);
+          dataUrl = 'data:image/png;base64,' + btoa(binary);
+        } else if (typeof this.bytes === 'string') {
+          dataUrl = this.bytes.startsWith('data:') ? this.bytes : `data:image/png;base64,${this.bytes}`;
+        } else {
+          throw new Error('Invalid image data');
+        }
+
+        const img = new Image();
+        img.onload = () => {
+          resolve({
+            element: img,
+            src: dataUrl,
+            width: img.naturalWidth,
+            height: img.naturalHeight,
+            scale: this.scale
+          });
+        };
+
+        img.onerror = () => {
+          reject(new Error('Failed to load memory image'));
+        };
+
+        img.src = dataUrl;
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
+  getUrl() {
+    if (this.bytes instanceof Uint8Array) {
+      const binary = String.fromCharCode.apply(null, this.bytes);
+      return 'data:image/png;base64,' + btoa(binary);
+    }
+    return this.bytes;
+  }
+}
+
+/**
+ * FileImage - Load images from file system (Node.js environment)
+ */
+class FileImage extends ImageProvider {
+  constructor(filePath, { scale = 1.0 } = {}) {
+    super(IMAGE_SOURCE_TYPES.file);
+    this.filePath = filePath;
+    this.scale = scale;
+  }
+
+  async load() {
+    if (typeof window !== 'undefined') {
+      throw new Error('FileImage is not supported in web environments. Use Image.asset or Image.network instead.');
+    }
+    throw new Error('FileImage requires Node.js file system implementation');
+  }
+
+  getUrl() {
+    return this.filePath;
+  }
+}
+
+/**
+ * Image - StatefulWidget for rendering images with various sources
+ * Mirrors Flutter's Image widget API and behavior
+ */
+class Image extends StatefulWidget {
+  constructor({
+    key = null,
+    image = null,
+    width = null,
+    height = null,
+    color = null,
+    opacity = null,
+    colorBlendMode = BlendMode.normal,
+    fit = BoxFit.contain,
+    alignment = 'center',
+    repeat = 'no-repeat',
+    centerSlice = null,
+    matchTextDirection = false,
+    gaplessPlayback = false,
+    isAntiAlias = false,
+    filterQuality = FilterQuality.medium,
+    frameBuilder = null,
+    loadingBuilder = null,
+    errorBuilder = null,
+    semanticLabel = null,
+    excludeFromSemantics = false,
+    clipBehavior = Clip.hardEdge
+  } = {}) {
+    super(key);
+
+    if (!image || !(image instanceof ImageProvider)) {
+      throw new Error('Image requires a valid ImageProvider');
+    }
+
+    this.image = image;
+    this.width = width;
+    this.height = height;
+    this.color = color;
+    this.opacity = opacity;
+    this.colorBlendMode = colorBlendMode;
+    this.fit = fit;
+    this.alignment = alignment;
+    this.repeat = repeat;
+    this.centerSlice = centerSlice;
+    this.matchTextDirection = matchTextDirection;
+    this.gaplessPlayback = gaplessPlayback;
+    this.isAntiAlias = isAntiAlias;
+    this.filterQuality = filterQuality;
+    this.frameBuilder = frameBuilder;
+    this.loadingBuilder = loadingBuilder;
+    this.errorBuilder = errorBuilder;
+    this.semanticLabel = semanticLabel;
+    this.excludeFromSemantics = excludeFromSemantics;
+    this.clipBehavior = clipBehavior;
+  }
+
+  static network(src, {
+    key = null,
+    scale = 1.0,
+    headers = null,
+    cacheWidth = null,
+    cacheHeight = null,
+    ...otherOptions
+  } = {}) {
+    const provider = new NetworkImage(src, { scale, headers });
+    return new Image({ key, image: provider, ...otherOptions });
+  }
+
+  static asset(assetPath, {
+    key = null,
+    scale = null,
+    packages = null,
+    cacheWidth = null,
+    cacheHeight = null,
+    ...otherOptions
+  } = {}) {
+    const provider = new AssetImage(assetPath, { packages, scale: scale || 1.0 });
+    return new Image({ key, image: provider, ...otherOptions });
+  }
+
+  static memory(bytes, {
+    key = null,
+    scale = 1.0,
+    cacheWidth = null,
+    cacheHeight = null,
+    ...otherOptions
+  } = {}) {
+    const provider = new MemoryImage(bytes, { scale });
+    return new Image({ key, image: provider, ...otherOptions });
+  }
+
+  static file(filePath, {
+    key = null,
+    scale = 1.0,
+    cacheWidth = null,
+    cacheHeight = null,
+    ...otherOptions
+  } = {}) {
+    if (typeof window !== 'undefined') {
+      throw new Error('Image.file is not supported on Flutter Web. Consider using either Image.asset or Image.network instead.');
+    }
+    const provider = new FileImage(filePath, { scale });
+    return new Image({ key, image: provider, ...otherOptions });
+  }
+
+  createState() {
+    return new _ImageState();
+  }
+
+  debugFillProperties(properties) {
+    super.debugFillProperties(properties);
+    properties.push({ name: 'image', value: this.image });
+    properties.push({ name: 'width', value: this.width });
+    properties.push({ name: 'height', value: this.height });
+    properties.push({ name: 'color', value: this.color });
+    properties.push({ name: 'colorBlendMode', value: this.colorBlendMode });
+    properties.push({ name: 'fit', value: this.fit });
+    properties.push({ name: 'alignment', value: this.alignment });
+    properties.push({ name: 'gaplessPlayback', value: this.gaplessPlayback });
+    properties.push({ name: 'filterQuality', value: this.filterQuality });
+  }
+}
+
+/**
+ * _ImageState - State management for Image widget
+ * Handles loading, caching, error recovery, and lifecycle
+ */
+class _ImageState {
+  constructor(widget) {
+    this.widget = widget;
+    this.imageStream = null;
+    this.imageInfo = null;
+    this.loadingProgress = null;
+    this.isListeningToStream = false;
+    this.error = null;
+    this.errorStack = null;
+    this.frameNumber = null;
+    this.wasSynchronouslyLoaded = false;
+    this.completerHandle = null;
+    this.lastImageProvider = null;
+  }
+
+  initState() {
+    // Initialize state
+  }
+
+  didChangeDependencies() {
+    this._resolveImage();
+    this._listenToStream();
+  }
+
+  didUpdateWidget(oldWidget) {
+    if (this.isListeningToStream &&
+      (this.widget.loadingBuilder == null) !== (oldWidget.loadingBuilder == null)) {
+      this._updateStreamListener();
+    }
+
+    if (this.widget.image !== oldWidget.image) {
+      this._resolveImage();
+    }
+  }
+
+  dispose() {
+    this._stopListeningToStream();
+    this.completerHandle?.dispose();
+  }
+
+  _resolveImage() {
+    const newStream = this.widget.image.resolve({});
+
+    if (newStream.imageProvider.key !== this.lastImageProvider?.key) {
+      this._updateSourceStream(newStream);
+      this.lastImageProvider = newStream.imageProvider;
+    }
+  }
+
+  _updateSourceStream(newStream) {
+    if (this.imageStream?.imageProvider.key === newStream.imageProvider.key) {
+      return;
+    }
+
+    if (this.isListeningToStream) {
+      this._removeImageStreamListener();
+    }
+
+    if (!this.widget.gaplessPlayback) {
+      this._replaceImage(null);
+    }
+
+    this.loadingProgress = null;
+    this.frameNumber = null;
+    this.wasSynchronouslyLoaded = false;
+    this.imageStream = newStream;
+
+    if (this.isListeningToStream) {
+      this._addImageStreamListener();
+    }
+  }
+
+  _listenToStream() {
+    if (this.isListeningToStream) return;
+
+    this._addImageStreamListener();
+    this.isListeningToStream = true;
+  }
+
+  _stopListeningToStream() {
+    if (!this.isListeningToStream) return;
+
+    if (this.completerHandle == null && this.imageStream?.completer) {
+      this.completerHandle = this.imageStream.completer.keepAlive();
+    }
+
+    this._removeImageStreamListener();
+    this.isListeningToStream = false;
+  }
+
+  _addImageStreamListener() {
+    this.imageStream?.addListener({
+      onImage: (imageInfo) => this._handleImageFrame(imageInfo),
+      onError: (error, stackTrace) => this._handleImageError(error, stackTrace),
+      onChunk: (event) => this._handleImageChunk(event)
+    });
+  }
+
+  _removeImageStreamListener() {
+    this.imageStream?.removeListener({
+      onImage: (imageInfo) => this._handleImageFrame(imageInfo),
+      onError: (error, stackTrace) => this._handleImageError(error, stackTrace),
+      onChunk: (event) => this._handleImageChunk(event)
+    });
+  }
+
+  _updateStreamListener() {
+    this._removeImageStreamListener();
+    this._addImageStreamListener();
+  }
+
+  _handleImageFrame(imageInfo) {
+    this.imageInfo = imageInfo;
+    this.loadingProgress = null;
+    this.error = null;
+    this.errorStack = null;
+    this.frameNumber = (this.frameNumber || 0) + 1;
+    this.wasSynchronouslyLoaded = true;
+  }
+
+  _handleImageChunk(event) {
+    if (this.widget.loadingBuilder) {
+      this.loadingProgress = event;
+    }
+  }
+
+  _handleImageError(error, stackTrace) {
+    this.error = error;
+    this.errorStack = stackTrace;
+    if (this.widget.errorBuilder) {
+      // Trigger rebuild through parent context
+    }
+  }
+
+  _replaceImage(imageInfo) {
+    this.imageInfo = imageInfo;
+  }
+
+  build(context) {
+    const elementId = context.element.getElementId();
+    const widgetPath = context.element.getWidgetPath();
+    const inlineStyles = this._getInlineStyles();
+
+    // Handle error state
+    if (this.error) {
+      if (this.widget.errorBuilder) {
+        return this.widget.errorBuilder(context, this.error, this.errorStack);
+      }
+
+      const theme = Theme.of(context);
+      const errorBg = theme.colorScheme?.surfaceContainerHighest || '#E6E0E9';
+
+      return new VNode({
+        tag: 'div',
+        props: {
+          className: 'fjs-image-error',
+          style: {
+            ...inlineStyles,
+            backgroundColor: errorBg,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: '#999',
+            overflow: CLIP_BEHAVIOR_MAP[this.widget.clipBehavior] || 'hidden'
+          },
+          'data-element-id': elementId,
+          'data-widget-path': widgetPath,
+          title: this.error.message
+        },
+        children: ['⚠ Image failed to load']
+      });
+    }
+
+    // Handle loading state
+    if (!this.imageInfo && this.widget.loadingBuilder) {
+      return this.widget.loadingBuilder(context, null, this.loadingProgress);
+    }
+
+    let result = this._buildImageElement(elementId, widgetPath, inlineStyles);
+
+    // Apply frame builder
+    if (this.widget.frameBuilder) {
+      result = this.widget.frameBuilder(
+        context,
+        result,
+        this.frameNumber,
+        this.wasSynchronouslyLoaded
+      );
+    }
+
+    // Apply loading builder wrapper
+    if (this.widget.loadingBuilder) {
+      result = this.widget.loadingBuilder(context, result, this.loadingProgress);
+    }
+
+    // Apply semantics
+    if (!this.widget.excludeFromSemantics) {
+      result = new VNode({
+        tag: 'figure',
+        props: {
+          role: 'img',
+          'aria-label': this.widget.semanticLabel || 'Image',
+          style: { margin: 0 }
+        },
+        children: [result]
+      });
+    }
+
+    return result;
+  }
+
+  _buildImageElement(elementId, widgetPath, inlineStyles) {
+    const imgProps = {
+      className: 'fjs-image',
+      style: inlineStyles,
+      'data-element-id': elementId,
+      'data-widget-path': widgetPath,
+      'data-widget': 'Image',
+      'data-source-type': this.widget.image.sourceType,
+      alt: this.widget.semanticLabel || 'Image'
+    };
+
+    if (this.imageInfo) {
+      imgProps.src = this.imageInfo.src;
+    }
+
+    return new VNode({
+      tag: 'img',
+      props: imgProps,
+      key: this.widget.key
+    });
+  }
+
+  _getInlineStyles() {
+    const styles = {
+      width: this.widget.width ? `${this.widget.width}px` : 'auto',
+      height: this.widget.height ? `${this.widget.height}px` : 'auto',
+      objectFit: BOX_FIT_MAP[this.widget.fit] || 'contain',
+      objectPosition: this._mapAlignment(),
+      backgroundRepeat: this.widget.repeat,
+      overflow: CLIP_BEHAVIOR_MAP[this.widget.clipBehavior] || 'hidden',
+      filter: this._buildFilterStyles()
+    };
+
+    // Apply color blend mode
+    if (this.widget.color && this.widget.colorBlendMode) {
+      styles.mixBlendMode = BLEND_MODE_MAP[this.widget.colorBlendMode] || 'normal';
+      // Create color overlay
+      styles.backgroundColor = this.widget.color;
+      styles.backgroundBlendMode = BLEND_MODE_MAP[this.widget.colorBlendMode];
+    }
+
+    // Apply opacity
+    if (this.widget.opacity !== null && this.widget.opacity !== undefined) {
+      styles.opacity = this.widget.opacity;
+    }
+
+    // Apply anti-alias
+    if (this.widget.isAntiAlias) {
+      styles.imageRendering = 'smooth';
+    } else {
+      styles.imageRendering = 'pixelated';
+    }
+
+    // Text direction
+    if (this.widget.matchTextDirection) {
+      styles.direction = document.dir || 'ltr';
+    }
+
+    return styles;
+  }
+
+  _mapAlignment() {
+    const alignmentMap = {
+      'center': 'center',
+      'topLeft': 'top left',
+      'topCenter': 'top center',
+      'topRight': 'top right',
+      'centerLeft': 'center left',
+      'centerRight': 'center right',
+      'bottomLeft': 'bottom left',
+      'bottomCenter': 'bottom center',
+      'bottomRight': 'bottom right'
+    };
+    return alignmentMap[this.widget.alignment] || 'center';
+  }
+
+  _buildFilterStyles() {
+    const filters = [];
+
+    if (this.widget.filterQuality === FilterQuality.high) {
+      filters.push('contrast(1.1) saturate(1.05)');
+    } else if (this.widget.filterQuality === FilterQuality.low) {
+      filters.push('blur(0.5px)');
+    }
+
+    return filters.length > 0 ? filters.join(' ') : 'none';
+  }
+}
+
+export {
+  Image,
+  ImageProvider,
+  NetworkImage,
+  AssetImage,
+  MemoryImage,
+  FileImage,
+  ImageStream,
+  ImageChunkEvent,
+  ImageStreamCompleterHandle,
+  IMAGE_SOURCE_TYPES
+};
\ No newline at end of file
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/ink_decoration.js b/packages/flutterjs_material/flutterjs_material/src/material/ink_decoration.js
new file mode 100644
index 00000000..88f23eb4
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/ink_decoration.js
@@ -0,0 +1,68 @@
+import { StatefulWidget ,State} from '../core/widget_element.js';
+import { Container, BoxDecoration } from './container.js';
+
+export class Ink extends StatefulWidget {
+    constructor({
+        key,
+        padding,
+        color,
+        decoration,
+        width,
+        height,
+        child,
+    } = {}) {
+        super(key);
+        this.padding = padding;
+        this.color = color;
+        this.decoration = decoration;
+        this.width = width;
+        this.height = height;
+        this.child = child;
+    }
+
+    createState() {
+        return new InkState();
+    }
+
+    static image({
+        key,
+        padding,
+        image,
+        onImageError,
+        colorFilter,
+        fit,
+        alignment,
+        centerSlice,
+        repeat,
+        matchTextDirection,
+        width,
+        height,
+        child,
+    } = {}) {
+        return new Ink({
+            key,
+            padding,
+            width,
+            height,
+            child,
+            decoration: new BoxDecoration({
+                image: {
+                    image, fit, alignment, repeat
+                }
+            })
+        });
+    }
+}
+
+class InkState extends State {
+    build(context) {
+        return new Container({
+            padding: this.widget.padding,
+            color: this.widget.color,
+            decoration: this.widget.decoration,
+            width: this.widget.width,
+            height: this.widget.height,
+            child: this.widget.child,
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/ink_well.js b/packages/flutterjs_material/flutterjs_material/src/material/ink_well.js
new file mode 100644
index 00000000..01f37ddd
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/ink_well.js
@@ -0,0 +1,140 @@
+import { StatefulWidget, StatelessWidget } from '../core/widget_element.js';
+import { Container } from './container.js';
+import { GestureDetector } from './gesture_detector.js';
+import { Theme } from './theme.js';
+
+export class InkResponse extends StatelessWidget {
+    constructor({
+        key,
+        child,
+        onTap,
+        onTapDown,
+        onTapUp,
+        onTapCancel,
+        onDoubleTap,
+        onLongPress,
+        onHighlightChanged,
+        onHover,
+        mouseCursor,
+        containedInkWell = false,
+        highlightShape,
+        radius,
+        borderRadius,
+        customBorder,
+        focusColor,
+        hoverColor,
+        highlightColor,
+        overlayColor,
+        splashColor,
+        splashFactory,
+        enableFeedback = true,
+        excludeFromSemantics = false,
+        focusNode,
+        canRequestFocus = true,
+        onFocusChange,
+        autofocus = false,
+    } = {}) {
+        super(key);
+        this.child = child;
+        this.onTap = onTap;
+        // ... other props
+        this.borderRadius = borderRadius;
+        // Theme defaults resolve lazily or here? 
+        // In simple widget, we can't context here easily unless built. 
+        // But InkResponse IS a StatelessWidget (in this impl).
+        // Wait, InkResponse usually is a widget.
+
+        this._highlightColor = highlightColor;
+        this._splashColor = splashColor;
+    }
+
+    build(context) {
+        const theme = Theme.of(context);
+        const effectiveHighlightColor = this._highlightColor || theme.highlightColor || 'rgba(0,0,0,0.1)';
+        const effectiveSplashColor = this._splashColor || theme.splashColor || 'rgba(0,0,0,0.1)';
+
+        // Simplified Web Implementation:
+        // Use GestureDetector for events.
+        // Use CSS 'active' state or simple ripple simulation if possible via CSS active/focus.
+        // For real ripple effect, we'd need a RenderObject or complex DOM manipulation.
+
+        return new GestureDetector({
+            onTap: this.onTap,
+            child: new Container({
+                child: this.child,
+                decoration: {
+                    borderRadius: this.borderRadius
+                },
+                style: {
+                    cursor: 'pointer',
+                    // Basic CSS ripple visual
+                    position: 'relative',
+                    overflow: 'hidden'
+                },
+                // We'd add event listeners for ripple effect here in a real DOM Element wrapper
+            })
+        });
+    }
+}
+
+export class InkWell extends InkResponse {
+    constructor({
+        key,
+        child,
+        onTap,
+        onDoubleTap,
+        onLongPress,
+        onTapDown,
+        onTapUp,
+        onTapCancel,
+        onHighlightChanged,
+        onHover,
+        mouseCursor,
+        focusColor,
+        hoverColor,
+        highlightColor,
+        overlayColor,
+        splashColor,
+        splashFactory,
+        radius,
+        borderRadius,
+        customBorder,
+        enableFeedback = true,
+        excludeFromSemantics = false,
+        focusNode,
+        canRequestFocus = true,
+        onFocusChange,
+        autofocus = false,
+    } = {}) {
+        super({
+            key,
+            child,
+            onTap,
+            onDoubleTap,
+            onLongPress,
+            onTapDown,
+            onTapUp,
+            onTapCancel,
+            onHighlightChanged,
+            onHover,
+            mouseCursor,
+            containedInkWell: true,
+            highlightShape: 'rectangle', // BoxShape.rectangle
+            radius,
+            borderRadius,
+            customBorder,
+            focusColor,
+            hoverColor,
+            highlightColor,
+            overlayColor,
+            splashColor,
+            splashFactory,
+            enableFeedback,
+            excludeFromSemantics,
+            focusNode,
+            canRequestFocus,
+            onFocusChange,
+            autofocus,
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/input_border.js b/packages/flutterjs_material/flutterjs_material/src/material/input_border.js
new file mode 100644
index 00000000..6158e4f4
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/input_border.js
@@ -0,0 +1,95 @@
+import { Color } from '../utils/color.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+
+/**
+ * InputBorder - Base class for input borders
+ */
+class InputBorder {
+    constructor({
+        borderSide = 'none' // 'none' or object
+    } = {}) {
+        this.borderSide = borderSide;
+    }
+}
+
+/**
+ * OutlineInputBorder - Default rectangular border
+ */
+class OutlineInputBorder extends InputBorder {
+    constructor({
+        borderRadius = 4,
+        borderSide = null, // { color, width }
+        gapPadding = 4
+    } = {}) {
+        super();
+        this.borderRadius = borderRadius;
+        this.gapPadding = gapPadding;
+
+        // Handle borderSide shorthand or object
+        if (borderSide) {
+            this.borderSide = {
+                color: borderSide.color || '#79747E', // M3 Outline variant fallback
+                width: borderSide.width || 1,
+                ...borderSide
+            };
+        } else {
+            this.borderSide = {
+                color: '#79747E',
+                width: 1
+            };
+        }
+    }
+
+    copyWith({ borderRadius, borderSide, gapPadding } = {}) {
+        return new OutlineInputBorder({
+            borderRadius: borderRadius ?? this.borderRadius,
+            borderSide: borderSide ?? this.borderSide,
+            gapPadding: gapPadding ?? this.gapPadding
+        });
+    }
+
+    toCSSObject() {
+        return {
+            border: `${this.borderSide.width}px solid ${this.borderSide.color}`,
+            borderRadius: `${this.borderRadius}px`
+        };
+    }
+}
+
+/**
+ * UnderlineInputBorder - Underline only border
+ */
+class UnderlineInputBorder extends InputBorder {
+    constructor({
+        borderSide = null
+    } = {}) {
+        super();
+
+        if (borderSide) {
+            this.borderSide = {
+                color: borderSide.color || '#79747E',
+                width: borderSide.width || 1,
+                ...borderSide
+            };
+        } else {
+            this.borderSide = {
+                color: '#79747E',
+                width: 1
+            };
+        }
+    }
+
+    copyWith({ borderSide } = {}) {
+        return new UnderlineInputBorder({
+            borderSide: borderSide ?? this.borderSide
+        });
+    }
+
+    toCSSObject() {
+        return {
+            borderBottom: `${this.borderSide.width}px solid ${this.borderSide.color}`
+        };
+    }
+}
+
+export { InputBorder, OutlineInputBorder, UnderlineInputBorder };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/input_decoration_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/input_decoration_theme.js
new file mode 100644
index 00000000..52d56211
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/input_decoration_theme.js
@@ -0,0 +1,81 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class InputDecorationTheme {
+    constructor({
+        labelStyle,
+        floatingLabelStyle,
+        helperStyle,
+        helperMaxLines,
+        hintStyle,
+        errorStyle,
+        errorMaxLines,
+        floatingLabelBehavior, // auto, always, never
+        isDense = false,
+        contentPadding,
+        isCollapsed = false,
+        iconColor,
+        prefixStyle,
+        prefixIconColor,
+        suffixStyle,
+        suffixIconColor,
+        counterStyle,
+        filled = false,
+        fillColor,
+        focusColor,
+        hoverColor,
+        errorBorder,
+        focusedBorder,
+        focusedErrorBorder,
+        disabledBorder,
+        enabledBorder,
+        border,
+        alignLabelWithHint = false,
+        constraints,
+    } = {}) {
+        this.labelStyle = labelStyle;
+        this.floatingLabelStyle = floatingLabelStyle;
+        this.helperStyle = helperStyle;
+        this.helperMaxLines = helperMaxLines;
+        this.hintStyle = hintStyle;
+        this.errorStyle = errorStyle;
+        this.errorMaxLines = errorMaxLines;
+        this.floatingLabelBehavior = floatingLabelBehavior;
+        this.isDense = isDense;
+        this.contentPadding = contentPadding;
+        this.isCollapsed = isCollapsed;
+        this.iconColor = iconColor;
+        this.prefixStyle = prefixStyle;
+        this.prefixIconColor = prefixIconColor;
+        this.suffixStyle = suffixStyle;
+        this.suffixIconColor = suffixIconColor;
+        this.counterStyle = counterStyle;
+        this.filled = filled;
+        this.fillColor = fillColor;
+        this.focusColor = focusColor;
+        this.hoverColor = hoverColor;
+        this.errorBorder = errorBorder;
+        this.focusedBorder = focusedBorder;
+        this.focusedErrorBorder = focusedErrorBorder;
+        this.disabledBorder = disabledBorder;
+        this.enabledBorder = enabledBorder;
+        this.border = border;
+        this.alignLabelWithHint = alignLabelWithHint;
+        this.constraints = constraints;
+    }
+}
+
+// Note: Usually InputDecorationTheme is NOT an InheritedWidget itself, 
+// but a property of ThemeData.
+// However, similar to other themes, we can export it as a data class 
+// that is part of ThemeData.
+// If valid isolated usage is needed:
+/*
+class InputDecorationThemeWidget extends InheritedWidget {
+    // ...
+}
+*/
+// For now treating as Data class only as per pattern unless specialized widget is requested.
+
+export {
+    InputDecorationTheme
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/input_decorator.js b/packages/flutterjs_material/flutterjs_material/src/material/input_decorator.js
new file mode 100644
index 00000000..545df682
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/input_decorator.js
@@ -0,0 +1,112 @@
+import { OutlineInputBorder } from './input_border.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { Color } from '../utils/color.js';
+
+/**
+ * InputDecoration - Describes the visual appearance of a TextField
+ */
+class InputDecoration {
+    constructor({
+        labelText = null,
+        hintText = null,
+        helperText = null,
+        errorText = null,
+        prefixIcon = null,
+        suffixIcon = null,
+        prefix = null,
+        suffix = null,
+        border = null,
+        enabledBorder = null,
+        focusedBorder = null,
+        errorBorder = null,
+        filled = false,
+        fillColor = null,
+        contentPadding = null, // EdgeInsets or {top, bottom...}
+        isDense = false,
+        counter = null,
+        counterText = null,
+        floatingLabelBehavior = 'auto', // 'auto', 'always', 'never'
+        alignLabelWithHint = false,
+        icon = null,
+        labelStyle = null, // TextStyle
+        floatingLabelStyle = null, // TextStyle
+        helperStyle = null, // TextStyle
+        hintStyle = null, // TextStyle
+        errorStyle = null, // TextStyle
+    } = {}) {
+        this.labelText = labelText;
+        this.hintText = hintText;
+        this.helperText = helperText;
+        this.errorText = errorText;
+        this.prefixIcon = prefixIcon;
+        this.suffixIcon = suffixIcon;
+        this.prefix = prefix;
+        this.suffix = suffix;
+
+        // Borders
+        this.border = border || new OutlineInputBorder();
+        this.enabledBorder = enabledBorder || this.border;
+        this.focusedBorder = focusedBorder || this.border;
+        this.errorBorder = errorBorder || this.border;
+
+        // Fill
+        this.filled = filled;
+        this.fillColor = fillColor; // Defaults handled by widget/theme
+
+        // Padding
+        if (contentPadding instanceof EdgeInsets) {
+            this.contentPadding = contentPadding;
+        } else if (contentPadding) {
+            this.contentPadding = new EdgeInsets(contentPadding);
+        } else {
+            this.contentPadding = new EdgeInsets({ top: 12, bottom: 12, left: 16, right: 16 });
+        }
+
+        this.isDense = isDense;
+        this.counter = counter;
+        this.counterText = counterText;
+        this.floatingLabelBehavior = floatingLabelBehavior;
+        this.alignLabelWithHint = alignLabelWithHint;
+        this.icon = icon;
+
+        // Styles
+        this.labelStyle = labelStyle;
+        this.floatingLabelStyle = floatingLabelStyle;
+        this.helperStyle = helperStyle;
+        this.hintStyle = hintStyle;
+        this.errorStyle = errorStyle;
+    }
+
+    copyWith(options = {}) {
+        return new InputDecoration({
+            labelText: options.labelText ?? this.labelText,
+            hintText: options.hintText ?? this.hintText,
+            helperText: options.helperText ?? this.helperText,
+            errorText: options.errorText ?? this.errorText,
+            prefixIcon: options.prefixIcon ?? this.prefixIcon,
+            suffixIcon: options.suffixIcon ?? this.suffixIcon,
+            prefix: options.prefix ?? this.prefix,
+            suffix: options.suffix ?? this.suffix,
+            border: options.border ?? this.border,
+            enabledBorder: options.enabledBorder ?? this.enabledBorder,
+            focusedBorder: options.focusedBorder ?? this.focusedBorder,
+            errorBorder: options.errorBorder ?? this.errorBorder,
+            filled: options.filled ?? this.filled,
+            fillColor: options.fillColor ?? this.fillColor,
+            contentPadding: options.contentPadding ?? this.contentPadding,
+            isDense: options.isDense ?? this.isDense,
+            counter: options.counter ?? this.counter,
+            counterText: options.counterText ?? this.counterText,
+            floatingLabelBehavior: options.floatingLabelBehavior ?? this.floatingLabelBehavior,
+            alignLabelWithHint: options.alignLabelWithHint ?? this.alignLabelWithHint,
+            icon: options.icon ?? this.icon,
+            labelStyle: options.labelStyle ?? this.labelStyle,
+            floatingLabelStyle: options.floatingLabelStyle ?? this.floatingLabelStyle,
+            helperStyle: options.helperStyle ?? this.helperStyle,
+            hintStyle: options.hintStyle ?? this.hintStyle,
+            errorStyle: options.errorStyle ?? this.errorStyle
+        });
+    }
+}
+
+export { InputDecoration };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/list_tile.js b/packages/flutterjs_material/flutterjs_material/src/material/list_tile.js
new file mode 100644
index 00000000..85459fca
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/list_tile.js
@@ -0,0 +1,176 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { Color, CrossAxisAlignment, MainAxisAlignment, MainAxisSize, Alignment } from '../utils/utils.js';
+import { Row, Column, Expanded, SizedBox } from '../widgets/widgets.js';
+import { Container } from './container.js';
+import { GestureDetector } from './gesture_detector.js';
+import { BoxConstraints } from '../utils/box_constraints.js';
+import { Theme } from './theme.js';
+import { IconTheme } from './icon_theme.js';
+import { TextStyle } from '../painting/text_style.js';
+
+/**
+ * A single fixed-height row that typically contains some text as well as
+ * a leading or trailing icon.
+ */
+export class ListTile extends StatelessWidget {
+    constructor({
+        key,
+        leading,
+        title,
+        subtitle,
+        trailing,
+        isThreeLine = false,
+        dense,
+        visualDensity,
+        shape,
+        contentPadding,
+        enabled = true,
+        onTap,
+        onLongPress,
+        mouseCursor,
+        selected = false,
+        focusColor,
+        hoverColor,
+        focusNode,
+        autofocus = false,
+        tileColor,
+        selectedTileColor,
+        enableFeedback,
+        horizontalTitleGap,
+        minVerticalPadding,
+        minLeadingWidth,
+    } = {}) {
+        super(key);
+        this.leading = leading;
+        this.title = title;
+        this.subtitle = subtitle;
+        this.trailing = trailing;
+        this.isThreeLine = isThreeLine;
+        this.dense = dense;
+        this.visualDensity = visualDensity;
+        this.shape = shape;
+        this.contentPadding = contentPadding;
+        this.enabled = enabled;
+        this.onTap = onTap;
+        this.onLongPress = onLongPress;
+        this.mouseCursor = mouseCursor;
+        this.selected = selected;
+        this.focusColor = focusColor;
+        this.hoverColor = hoverColor;
+        this.focusNode = focusNode;
+        this.autofocus = autofocus;
+        this.tileColor = tileColor;
+        this.selectedTileColor = selectedTileColor;
+        this.enableFeedback = enableFeedback;
+        this.horizontalTitleGap = horizontalTitleGap;
+        this.minVerticalPadding = minVerticalPadding;
+        this.minLeadingWidth = minLeadingWidth;
+    }
+
+    build(context) {
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+
+        // Colors
+        // Selected: Secondary Container
+        // Unselected: Transparent (or tileColor)
+        const defaultSelectedColor = colorScheme.secondaryContainer || '#E8DEF8';
+        const defaultSelectedContentColor = colorScheme.onSecondaryContainer || '#1D192B';
+        const defaultContentColor = colorScheme.onSurfaceVariant || '#49454F';
+        const titleColor = colorScheme.onSurface || '#1C1B1F';
+
+        const bgColor = this.selected
+            ? (this.selectedTileColor || defaultSelectedColor)
+            : (this.tileColor || null);
+
+        const iconColor = this.selected ? defaultSelectedContentColor : defaultContentColor;
+        const textColor = this.selected ? defaultSelectedContentColor : defaultContentColor;
+        const mainTextColor = this.selected ? defaultSelectedContentColor : titleColor;
+
+        const children = [];
+
+        // Leading
+        if (this.leading) {
+            children.push(new IconTheme({
+                data: theme.iconTheme.copyWith({ color: iconColor }),
+                child: new Container({
+                    constraints: new BoxConstraints(
+                        this.minLeadingWidth || 40,
+                        Infinity,
+                        0,
+                        Infinity
+                    ),
+                    alignment: Alignment.center,
+                    child: this.leading
+                })
+            }));
+
+            children.push(new SizedBox({ width: this.horizontalTitleGap || 16 }));
+        }
+
+        // Title & Subtitle
+        const textChildren = [];
+        if (this.title) {
+            textChildren.push(this.title);
+        }
+
+        if (this.subtitle) {
+            if (this.title) {
+                textChildren.push(new SizedBox({ height: 4 }));
+            }
+            textChildren.push(this.subtitle);
+        }
+
+        children.push(new Expanded({
+            child: new Column({
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisAlignment: MainAxisAlignment.center,
+                mainAxisSize: MainAxisSize.min,
+                children: textChildren
+            })
+        }));
+
+        // Trailing
+        if (this.trailing) {
+            children.push(new SizedBox({ width: 16 }));
+            children.push(new IconTheme({
+                data: theme.iconTheme.copyWith({ color: iconColor }), // Typically trailing is also onSurfaceVariant
+                child: this.trailing
+            }));
+        }
+
+        // Decoration & Sizing
+        const minHeight = this.dense ? 48 : (this.isThreeLine ? 88 : 56);
+
+        let padding = this.contentPadding;
+        if (!padding) {
+            padding = EdgeInsets.symmetric({ horizontal: 16, vertical: 8 });
+        }
+
+        const tileContent = new Container({
+            constraints: new BoxConstraints(
+                0,        // minWidth
+                Infinity, // maxWidth
+                minHeight,// minHeight
+                Infinity  // maxHeight
+            ),
+            padding: padding,
+            color: bgColor,
+            child: new Row({
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: children
+            })
+        });
+
+        if (this.enabled && (this.onTap || this.onLongPress)) {
+            return new GestureDetector({
+                onTap: this.onTap,
+                onLongPress: this.onLongPress,
+                child: tileContent
+            });
+        }
+
+        return tileContent;
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/list_tile_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/list_tile_theme.js
new file mode 100644
index 00000000..f7bfbab1
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/list_tile_theme.js
@@ -0,0 +1,60 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class ListTileThemeData {
+    constructor({
+        dense,
+        shape,
+        style,
+        selectedColor,
+        iconColor,
+        textColor,
+        contentPadding,
+        tileColor,
+        selectedTileColor,
+        horizontalTitleGap,
+        minVerticalPadding,
+        minLeadingWidth,
+        enableFeedback,
+        mouseCursor,
+        visualDensity,
+        titleAlignment,
+    } = {}) {
+        this.dense = dense;
+        this.shape = shape;
+        this.style = style; // list, drawer
+        this.selectedColor = selectedColor;
+        this.iconColor = iconColor;
+        this.textColor = textColor;
+        this.contentPadding = contentPadding;
+        this.tileColor = tileColor;
+        this.selectedTileColor = selectedTileColor;
+        this.horizontalTitleGap = horizontalTitleGap;
+        this.minVerticalPadding = minVerticalPadding;
+        this.minLeadingWidth = minLeadingWidth;
+        this.enableFeedback = enableFeedback;
+        this.mouseCursor = mouseCursor;
+        this.visualDensity = visualDensity;
+        this.titleAlignment = titleAlignment;
+    }
+}
+
+class ListTileTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(ListTileTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    ListTileTheme,
+    ListTileThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/list_view.js b/packages/flutterjs_material/flutterjs_material/src/material/list_view.js
new file mode 100644
index 00000000..0c3b31f8
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/list_view.js
@@ -0,0 +1,243 @@
+import {
+    StatelessWidget,
+    Widget,
+} from "../core/widget_element.js";
+import { Container } from "./container.js";
+import { Column } from "../widgets/compoment/multi_child_view.js";
+import { EdgeInsets } from "../utils/edge_insets.js";
+
+export class ListView extends StatelessWidget {
+    constructor({
+        key,
+        scrollDirection = "vertical",
+        reverse = false,
+        controller,
+        primary,
+        physics,
+        shrinkWrap = false,
+        padding,
+        itemExtent,
+        prototypeItem,
+        addAutomaticKeepAlives = true,
+        addRepaintBoundaries = true,
+        addSemanticIndexes = true,
+        cacheExtent,
+        children = [],
+        semanticChildCount,
+        dragStartBehavior,
+        keyboardDismissBehavior,
+        restorationId,
+        clipBehavior,
+    } = {}) {
+        super(key);
+        this.key = key;
+        this.scrollDirection = scrollDirection;
+        this.reverse = reverse;
+        this.controller = controller;
+        this.primary = primary;
+        this.physics = physics;
+        this.shrinkWrap = shrinkWrap;
+        this.padding = padding;
+        this.itemExtent = itemExtent;
+        this.prototypeItem = prototypeItem;
+        this.addAutomaticKeepAlives = addAutomaticKeepAlives;
+        this.addRepaintBoundaries = addRepaintBoundaries;
+        this.addSemanticIndexes = addSemanticIndexes;
+        this.cacheExtent = cacheExtent;
+        this.children = children;
+        this.semanticChildCount = semanticChildCount;
+        this.dragStartBehavior = dragStartBehavior;
+        this.keyboardDismissBehavior = keyboardDismissBehavior;
+        this.restorationId = restorationId;
+        this.clipBehavior = clipBehavior;
+    }
+
+    static builder({
+        key,
+        scrollDirection = "vertical",
+        reverse = false,
+        controller,
+        primary,
+        physics,
+        shrinkWrap = false,
+        padding,
+        itemExtent,
+        prototypeItem,
+        addAutomaticKeepAlives = true,
+        addRepaintBoundaries = true,
+        addSemanticIndexes = true,
+        cacheExtent,
+        itemBuilder,
+        itemCount,
+        findChildIndexCallback,
+        dragStartBehavior,
+        keyboardDismissBehavior,
+        restorationId,
+        clipBehavior,
+    } = {}) {
+        const children = [];
+        if (itemCount !== undefined && itemBuilder) {
+            console.log('[ListView.builder] Creating', itemCount, 'children');
+            for (let i = 0; i < itemCount; i++) {
+                // Pass a mock context and index
+                const child = itemBuilder({ type: 'BuildContext' }, i);
+                console.log(`[ListView.builder] Child ${i}:`, child?.constructor?.name, 'has createElement:', typeof child?.createElement);
+                children.push(child);
+            }
+            console.log('[ListView.builder] All children:', children.map(c => c?.constructor?.name));
+        }
+
+        return new ListView({
+            key,
+            scrollDirection,
+            reverse,
+            controller,
+            primary,
+            physics,
+            shrinkWrap,
+            padding,
+            itemExtent,
+            prototypeItem,
+            addAutomaticKeepAlives,
+            addRepaintBoundaries,
+            addSemanticIndexes,
+            cacheExtent,
+            children,
+            semanticChildCount: itemCount,
+            dragStartBehavior,
+            keyboardDismissBehavior,
+            restorationId,
+            clipBehavior,
+        });
+
+        console.log('[ListView.builder] Returning ListView instance:', result.constructor.name, 'extends StatelessWidget:', result instanceof StatelessWidget);
+        return result;
+    }
+
+    static separated({
+        key,
+        scrollDirection = "vertical",
+        reverse = false,
+        controller,
+        primary,
+        physics,
+        shrinkWrap = false,
+        padding,
+        itemBuilder,
+        separatorBuilder,
+        itemCount,
+        addAutomaticKeepAlives = true,
+        addRepaintBoundaries = true,
+        addSemanticIndexes = true,
+        cacheExtent,
+        dragStartBehavior,
+        keyboardDismissBehavior,
+        restorationId,
+        clipBehavior,
+    } = {}) {
+        const children = [];
+        if (itemCount !== undefined && itemBuilder && separatorBuilder) {
+            for (let i = 0; i < itemCount; i++) {
+                children.push(itemBuilder({ type: 'BuildContext' }, i));
+                if (i < itemCount - 1) {
+                    children.push(separatorBuilder({ type: 'BuildContext' }, i));
+                }
+            }
+        }
+
+        return new ListView({
+            key,
+            scrollDirection,
+            reverse,
+            controller,
+            primary,
+            physics,
+            shrinkWrap,
+            padding,
+            addAutomaticKeepAlives,
+            addRepaintBoundaries,
+            addSemanticIndexes,
+            cacheExtent,
+            children,
+            semanticChildCount: itemCount, // Approximation
+            dragStartBehavior,
+            keyboardDismissBehavior,
+            restorationId,
+            clipBehavior,
+        });
+    }
+
+    static custom({
+        key,
+        scrollDirection = "vertical",
+        reverse = false,
+        controller,
+        primary,
+        physics,
+        shrinkWrap = false,
+        padding,
+        itemExtent,
+        prototypeItem,
+        childrenDelegate,
+        cacheExtent,
+        semanticChildCount,
+        dragStartBehavior,
+        keyboardDismissBehavior,
+        restorationId,
+        clipBehavior,
+    } = {}) {
+        // Basic support for SliverChildListDelegate (static list)
+        // Dynamic delegates (SliverChildBuilderDelegate) would need runtime expansion
+        let children = [];
+        if (childrenDelegate && Array.isArray(childrenDelegate.children)) {
+            children = childrenDelegate.children;
+        } else if (childrenDelegate && typeof childrenDelegate.builder === 'function') {
+            // Best effort for builder delegate if count is provided
+            // This mimics the builder constructor logic
+            const count = childrenDelegate.childCount || 0;
+            for (let i = 0; i < count; i++) {
+                children.push(childrenDelegate.builder({ type: 'BuildContext' }, i));
+            }
+        }
+
+        return new ListView({
+            key,
+            scrollDirection,
+            reverse,
+            controller,
+            primary,
+            physics,
+            shrinkWrap,
+            padding,
+            itemExtent,
+            prototypeItem,
+            cacheExtent,
+            children,
+            semanticChildCount: semanticChildCount || children.length,
+            dragStartBehavior,
+            keyboardDismissBehavior,
+            restorationId,
+            clipBehavior,
+        });
+    }
+
+    build(context) {
+        const isHorizontal = this.scrollDirection === "horizontal";
+
+        // Create a scrollable container
+        // Note: Don't pass string CSS values (like '100%') to Container's width/height
+        // as they become invalid BoxConstraints. Use flexbox layout instead.
+        return new Container({
+            padding: this.padding,
+            width: isHorizontal ? undefined : '100%', // ListView expands cross-axis by default
+            height: isHorizontal ? '100%' : undefined,
+            // Removed width/height - CSS flexbox handles sizing via the parent Column/Flex
+            child: new Column({
+                children: this.children,
+                mainAxisSize: this.shrinkWrap ? "min" : "max",
+                crossAxisAlignment: isHorizontal ? "center" : "stretch",
+                // TODO: Handle 'reverse' by reversing children array or CSS direction
+            })
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/material.js b/packages/flutterjs_material/flutterjs_material/src/material/material.js
new file mode 100644
index 00000000..9f29750b
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/material.js
@@ -0,0 +1,572 @@
+export {
+    Color,
+    ColorSwatch,
+    MaterialColor,
+    MaterialAccentColor,
+    Colors
+} from "./color.js";
+
+export {
+    Container,
+    DecoratedBox,
+    DecoratedBoxElement,
+    RenderDecoratedBox,
+    ColoredBox,
+    BoxDecoration,
+    Decoration,
+    DecorationPosition
+} from "./container.js";
+
+export { Icon, IconData, IconThemeData, Icons } from "./icon.js";
+
+export {
+    Scaffold,
+    ScaffoldState,
+    ScaffoldFeatureController,
+    FloatingActionButtonLocation
+} from "./scaffold.js";
+
+export { RoundedRectangleBorder } from "../painting/rounded_rectangle_border.js"; // Export missing class
+
+export { AppBar } from "./app_bar.js";
+
+export {
+    SnackBar,
+    SnackBarAction,
+    SnackBarClosedReason
+} from "./snack_bar.js";
+
+// ✅ Export all utility classes (EdgeInsets, BorderRadius, etc.)
+export * from "../utils/utils.js";
+
+export {
+    Text
+} from "./text.js";
+
+export {
+    MaterialApp
+} from "./material_app.js";
+
+export {
+    ThemeData
+} from "./theme_data.js";
+
+export {
+    Theme
+} from "./theme.js";
+
+export {
+    Navigator,
+    Route
+} from "../widgets/navigator.js";
+
+export { IconButton } from "./icon_button.js";
+export { Drawer } from "./drawer.js";
+export { DrawerHeader } from "./drawer_header.js";
+export { ListTile } from "./list_tile.js";
+export { SingleChildScrollView } from "./single_child_scroll_view.js";
+
+export { ColorScheme } from "./color_scheme.js";
+
+export {
+    FloatingActionButton,
+    FloatingActionButtonElement,
+    FloatingActionButtonExtended
+} from "./floating_action_button.js";
+
+export {
+    GestureDetector
+} from "./gesture_detector.js";
+
+
+
+
+
+export {
+    SizedBox
+} from "../widgets/compoment/sized_box.js";
+
+export {
+    Divider
+} from "../widgets/compoment/divider.js";
+
+export {
+    ElevatedButton
+} from "./elevated_button.js";
+
+export {
+    ListView
+} from "./list_view.js";
+
+export {
+    TextField,
+    TextFieldState
+} from "./text_field.js";
+
+export {
+    InputDecoration
+} from "./input_decorator.js";
+
+export {
+    InputBorder,
+    OutlineInputBorder,
+    UnderlineInputBorder
+} from "./input_border.js";
+
+export {
+    TextEditingController
+} from "./text_editing_controller.js";
+
+export {
+    TextFormField,
+    TextFormFieldState,
+    AutovalidateMode
+} from "./text_form_field.js";
+
+export {
+    Form,
+    FormState
+} from "./form.js";
+
+export {
+    Checkbox,
+    CheckboxState
+} from "./checkbox.js";
+
+export {
+    CheckboxListTile
+} from "./checkbox_list_tile.js";
+
+export {
+    Radio,
+    RadioState
+} from "./radio.js";
+
+export {
+    RadioListTile
+} from "./radio_list_tile.js";
+
+export {
+    Switch,
+    SwitchState
+} from "./switch.js";
+
+export {
+    SwitchListTile
+} from "./switch_list_tile.js";
+
+export {
+    AlertDialog
+} from "./alert_dialog.js";
+
+export {
+    SimpleDialog
+} from "./simple_dialog.js";
+
+export {
+    Dialog,
+    showDialog
+} from "./dialog.js";
+
+export {
+    DialogTheme
+} from "../utils/dialog_theme.js";
+
+export {
+    CircularProgressIndicator,
+    LinearProgressIndicator
+} from "./progress_indicator.js";
+
+export {
+    ProgressIndicatorThemeData
+} from "../utils/progress_indicator_theme.js";
+
+export {
+    AboutDialog,
+    showAboutDialog,
+    AboutListTile
+} from "./about.js";
+
+export {
+    BackButton,
+    BackButtonIcon,
+    CloseButton,
+    DrawerButton,
+    EndDrawerButton
+} from "./action_buttons.js";
+
+export {
+    Chip
+} from "./chip.js";
+
+export {
+    ActionChip
+} from "./action_chip.js";
+
+export {
+    ActionIconTheme,
+    ActionIconThemeData
+} from "./action_icons_theme.js";
+
+export {
+    AppBarTheme
+} from "./app_bar_theme.js";
+
+export {
+    Badge,
+} from "./badge.js";
+
+export {
+    BadgeTheme,
+    BadgeThemeData
+} from "./badge_theme.js";
+
+export {
+    MaterialBanner,
+    MaterialBannerClosedReason
+} from "./banner.js";
+
+export {
+    MaterialBannerTheme,
+    MaterialBannerThemeData
+} from "./banner_theme.js";
+
+export {
+    BottomAppBar
+} from "./bottom_app_bar.js";
+
+export {
+    BottomAppBarTheme
+} from "./bottom_app_bar_theme.js";
+
+export {
+    BottomNavigationBar,
+    BottomNavigationBarItem,
+    BottomNavigationBarType
+} from "./bottom_navigation_bar.js";
+
+export {
+    BottomNavigationBarTheme,
+    BottomNavigationBarThemeData
+} from "./bottom_navigation_bar_theme.js";
+
+export {
+    BottomSheet,
+    showModalBottomSheet
+} from "./bottom_sheet.js";
+
+export {
+    BottomSheetTheme,
+    BottomSheetThemeData
+} from "./bottom_sheet_theme.js";
+
+export {
+    ButtonBar
+} from "./button_bar.js";
+
+export {
+    ButtonBarTheme,
+    ButtonBarThemeData
+} from "./button_bar_theme.js";
+
+export {
+    ButtonStyle
+} from "./button_style.js";
+
+export {
+    ButtonStyleButton
+} from "./button_style_button.js";
+
+export {
+    ButtonTheme,
+    ButtonThemeData
+} from "./button_theme.js";
+
+export {
+    CardTheme,
+    CardThemeData
+} from "./card_theme.js";
+
+export {
+    Card
+} from "./card.js";
+
+export {
+    Carousel,
+    CarouselController
+} from "./carousel.js";
+
+export {
+    CarouselTheme,
+    CarouselThemeData
+} from "./carousel_theme.js";
+
+export {
+    ChipTheme,
+    ChipThemeData
+} from "./chip_theme.js";
+
+export {
+    CircleAvatar
+} from "./circle_avatar.js";
+
+export {
+    kToolbarHeight,
+    kBottomNavigationBarHeight,
+    kMinInteractiveDimension,
+    kTextTabBarHeight,
+    kRadialReactionRadius,
+    kFloatingActionButtonMargin,
+    kTabLabelPadding,
+    kMaterialListPadding
+} from "./constants.js";
+
+export {
+    CalendarDatePicker
+} from "./calendar_date_picker.js";
+
+export {
+    DataTable,
+    DataColumn,
+    DataRow,
+    DataCell
+} from "./data_table.js";
+
+export {
+    DataTableTheme,
+    DataTableThemeData
+} from "./data_table_theme.js";
+
+export {
+    DatePickerTheme,
+    DatePickerThemeData
+} from "./date_picker_theme.js";
+
+export {
+    DrawerTheme,
+    DrawerThemeData
+} from "./drawer_theme.js";
+
+export {
+    DropdownButton,
+    DropdownMenuItem,
+    DropdownButtonHideUnderline
+} from "./dropdown.js";
+
+export {
+    ElevatedButtonTheme,
+    ElevatedButtonThemeData
+} from "./elevated_button_theme.js";
+
+export {
+    ExpansionPanel,
+    ExpansionPanelList,
+    ExpansionPanelRadio
+} from "./expansion_panel.js";
+
+export {
+    ExpansionTile
+} from "./expansion_tile.js";
+
+export {
+    FilledButton
+} from "./filled_button.js";
+
+export {
+    FilledButtonTheme,
+    FilledButtonThemeData
+} from "./filled_button_theme.js";
+
+export {
+    FloatingActionButtonTheme,
+    FloatingActionButtonThemeData
+} from "./floating_action_button_theme.js";
+
+export {
+    FlutterLogo
+} from "./flutter_logo.js";
+
+export {
+    GridTile,
+    GridTileBar
+} from "./grid_tile.js";
+
+export {
+    IconButtonTheme,
+    IconButtonThemeData
+} from "./icon_button_theme.js";
+
+export {
+    Ink,
+} from "./ink_decoration.js";
+
+export {
+    InkWell,
+    InkResponse
+} from "./ink_well.js";
+
+export {
+    InputDecorationTheme
+} from "./input_decoration_theme.js";
+
+export {
+    ListTileTheme,
+    ListTileThemeData
+} from "./list_tile_theme.js";
+
+export {
+    Material,
+    MaterialType
+} from "./material_widget.js";
+
+export {
+    MenuAnchor,
+    MenuController,
+    MenuItemButton,
+    SubmenuButton
+} from "./menu_anchor.js";
+
+export {
+    MenuBar
+} from "./menu_bar.js";
+
+export {
+    MenuBarTheme,
+    MenuBarThemeData
+} from "./menu_bar_theme.js";
+
+export {
+    MenuTheme,
+    MenuThemeData
+} from "./menu_theme.js";
+
+export {
+    NavigationBar
+} from "./navigation_bar.js";
+
+export {
+    NavigationBarTheme,
+    NavigationBarThemeData
+} from "./navigation_bar_theme.js";
+
+export {
+    NavigationDrawer,
+    NavigationDrawerDestinationWidget // Exporting helper widget if needed
+} from "./navigation_drawer.js";
+
+export {
+    NavigationDrawerTheme,
+    NavigationDrawerThemeData
+} from "./navigation_drawer_theme.js";
+
+export {
+    NavigationRail,
+    NavigationRailDestination
+} from "./navigation_rail.js";
+
+export {
+    OutlinedButton
+} from "./outlined_button.js";
+
+export {
+    TextButton
+} from "./text_button.js";
+
+export {
+    OutlinedButtonTheme,
+    OutlinedButtonThemeData
+} from "./outlined_button_theme.js";
+
+export {
+    PopupMenuButton,
+    PopupMenuEntry,
+    PopupMenuDivider,
+    PopupMenuItem
+} from "./popup_menu.js";
+
+export {
+    PopupMenuTheme,
+    PopupMenuThemeData
+} from "./popup_menu_theme.js";
+
+export {
+    RadioTheme,
+    RadioThemeData
+} from "./radio_theme.js";
+
+export {
+    RefreshIndicator
+} from "./refresh_indicator.js";
+
+export {
+    ScaffoldMessenger,
+    ScaffoldMessengerState
+} from "./scaffold_messenger.js";
+
+export {
+    Slider
+} from "./slider.js";
+
+export {
+    SliderTheme,
+    SliderThemeData
+} from "./slider_theme.js";
+
+export {
+    SwitchTheme,
+    SwitchThemeData
+} from "./switch_theme.js";
+
+export {
+    SnackBarTheme,
+    SnackBarThemeData
+} from "./snack_bar_theme.js";
+
+export {
+    TabBar,
+    Tab
+} from "./tab_bar.js";
+
+export {
+    TabBarTheme,
+    TabBarThemeData
+} from "./tab_bar_theme.js";
+
+export {
+    TabController,
+    DefaultTabController
+} from "./tab_controller.js";
+
+export {
+    TimePickerTheme,
+    TimePickerThemeData
+} from "./time_picker_theme.js";
+
+export {
+    ToggleButtons
+} from "./toggle_buttons.js";
+
+export {
+    ToggleButtonsTheme,
+    ToggleButtonsThemeData
+} from "./toggle_buttons_theme.js";
+
+export {
+    Tooltip
+} from "./tooltip.js";
+
+export {
+    TooltipTheme,
+    TooltipThemeData
+} from "./tooltip_theme.js";
+
+export {
+    UserAccountsDrawerHeader
+} from "./user_accounts_drawer_header.js";
+
+
+
+
+
+
+
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/material_app.js b/packages/flutterjs_material/flutterjs_material/src/material/material_app.js
new file mode 100644
index 00000000..3cd1e372
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/material_app.js
@@ -0,0 +1,182 @@
+/**
+ * ============================================================================
+ * FIXED MaterialApp - Properly Handles StatefulWidget → State Connection
+ * ============================================================================
+ */
+
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { Navigator } from '../widgets/navigator.js';
+import { ThemeData } from './theme_data.js';
+import { Theme } from './theme.js';
+
+// ============================================================================
+// MATERIAL APP - FIXED VERSION
+// ============================================================================
+
+class MaterialApp extends StatefulWidget {
+  constructor({
+    key = null,
+    title = '',
+    theme = null,
+    darkTheme = null,
+    themeMode = 'system',
+    home = null,
+    routes = {},
+    initialRoute = '/',
+    onGenerateRoute = null,
+    onUnknownRoute = null,
+    navigatorObservers = [],
+    localizationsDelegates = [],
+    supportedLocales = [{ language: 'en' }],
+    locale = null,
+    builder = null,
+    color = null
+  } = {}) {
+    super(key);
+
+    this.title = title;
+    this.theme = theme || ThemeData.light();
+    this.darkTheme = darkTheme || ThemeData.dark();
+    this.themeMode = themeMode;
+    this.color = color;
+    this.home = home;
+    this.routes = routes;
+    this.initialRoute = initialRoute;
+    this.onGenerateRoute = onGenerateRoute;
+    this.onUnknownRoute = onUnknownRoute;
+    this.navigatorObservers = navigatorObservers;
+    this.localizationsDelegates = localizationsDelegates;
+    this.supportedLocales = supportedLocales;
+    this.locale = locale;
+    this.builder = builder;
+
+    // Deep linking support: If in browser, use current URL as initial route
+    if (typeof window !== 'undefined' && window.location && window.location.pathname) {
+      if (initialRoute === '/' && window.location.pathname !== '/') {
+        this.initialRoute = window.location.pathname;
+      }
+    }
+
+    // Normalize routes
+    if (this.home && !this.routes['/']) {
+      this.routes['/'] = (context) => this.home;
+    }
+
+    if (typeof document !== 'undefined') {
+      document.title = this.title;
+    }
+  }
+
+  createState() {
+    return new MaterialAppState();
+  }
+}
+
+class MaterialAppState extends State {
+  _getTheme() {
+    const wm = this.widget;
+    if (wm.themeMode === 'dark') {
+      return wm.darkTheme;
+    }
+    if (wm.themeMode === 'light') {
+      return wm.theme;
+    }
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      return isDark ? wm.darkTheme : wm.theme;
+    }
+    return wm.theme;
+  }
+
+  _applyTheme(theme) {
+    if (typeof document === 'undefined') return;
+
+    // Safeguards for undefined theme properties
+    const primary = theme.primaryColor || '#2196F3'; // Default blue
+    const surface = theme.cardColor || '#FFFFFF';
+    const background = theme.scaffoldBackgroundColor || '#FAFAFA';
+    const onPrimary = '#FFFFFF';
+    const onSurface = (theme.brightness === 'dark') ? '#FFFFFF' : '#000000';
+    const onBackground = (theme.brightness === 'dark') ? '#FFFFFF' : '#000000';
+
+    // Inject global styles to ensure full screen layout and Flutter-like Reset
+    if (!document.getElementById('fjs-global-style')) {
+
+      // 1. Inject Roboto Font
+      const fontLink = document.createElement('link');
+      fontLink.href = 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap';
+      fontLink.rel = 'stylesheet';
+      document.head.appendChild(fontLink);
+
+      // 2. Global CSS Reset & Layout
+      const style = document.createElement('style');
+      style.id = 'fjs-global-style';
+      style.innerHTML = `
+            html, body {
+                height: 100%;
+                width: 100%;
+                margin: 0;
+                padding: 0;
+                overflow: hidden; /* App handles scrolling */
+                font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+                -webkit-tap-highlight-color: transparent; /* Remove mobile tap highlight */
+            }
+            *, *::before, *::after {
+                box-sizing: border-box; /* Flutter uses border-box logic mostly */
+            }
+            p, h1, h2, h3, h4, h5, h6 {
+                margin: 0; /* Flutter text has no default margins */
+                padding: 0;
+            }
+            #app, [id^="app-"], body > div:not([id]) {
+                height: 100%;
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+            }
+        `;
+      document.head.appendChild(style);
+    }
+
+    // Set variables
+    const root = document.documentElement;
+    root.style.setProperty('--primary-color', primary);
+    root.style.setProperty('--accent-color', theme.accentColor || '#FF4081');
+    root.style.setProperty('--scaffold-bg', background);
+    root.style.setProperty('--card-color', surface);
+    root.style.setProperty('--divider-color', theme.dividerColor);
+    root.style.setProperty('--font-family', theme.fontFamily);
+    root.style.setProperty('--text-color', onSurface);
+
+    // MD3 System Colors
+    root.style.setProperty('--md-sys-color-primary', primary);
+    root.style.setProperty('--md-sys-color-on-primary', onPrimary);
+    root.style.setProperty('--md-sys-color-surface', surface);
+    root.style.setProperty('--md-sys-color-on-surface', onSurface);
+    root.style.setProperty('--md-sys-color-background', background);
+    root.style.setProperty('--md-sys-color-on-background', onBackground);
+  }
+
+  build(context) {
+    const currentTheme = this._getTheme();
+    this._applyTheme(currentTheme);
+
+    return new Theme({
+      data: currentTheme,
+      child: new Navigator({
+        initialRoute: this.widget.initialRoute,
+        routes: this.widget.routes,
+        onGenerateRoute: this.widget.onGenerateRoute,
+        onUnknownRoute: this.widget.onUnknownRoute
+      })
+    });
+  }
+}
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+export {
+  MaterialApp
+};
\ No newline at end of file
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/material_widget.js b/packages/flutterjs_material/flutterjs_material/src/material/material_widget.js
new file mode 100644
index 00000000..2ef1f3f3
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/material_widget.js
@@ -0,0 +1,86 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { Container, BoxDecoration } from './container.js';
+import { BorderRadius } from '../utils/border_radius.js';
+import { Colors } from './color.js';
+
+export const MaterialType = {
+    canvas: 'canvas',
+    card: 'card',
+    circle: 'circle',
+    button: 'button',
+    transparency: 'transparency'
+};
+
+export class Material extends StatelessWidget {
+    constructor({
+        key,
+        type = MaterialType.canvas,
+        elevation = 0.0,
+        color,
+        shadowColor,
+        surfaceTintColor,
+        textStyle,
+        borderRadius,
+        shape,
+        borderOnForeground = true,
+        clipBehavior,
+        animationDuration,
+        child,
+    } = {}) {
+        super(key);
+        this.type = type;
+        this.elevation = elevation;
+        this.color = color;
+        this.shadowColor = shadowColor;
+        this.surfaceTintColor = surfaceTintColor;
+        this.textStyle = textStyle;
+        this.borderRadius = borderRadius;
+        this.shape = shape;
+        this.borderOnForeground = borderOnForeground;
+        this.clipBehavior = clipBehavior;
+        this.animationDuration = animationDuration;
+        this.child = child;
+    }
+
+    build(context) {
+        // Material implementation primarily manages:
+        // 1. Background Color
+        // 2. Elevation (Box Shadow)
+        // 3. Shape/BorderRadius
+        // 4. Clipping
+
+        let backgroundColor = this.color;
+        // Default colors based on type
+        if (!backgroundColor) {
+            if (this.type === MaterialType.canvas) backgroundColor = Colors.white; // Simplified default
+            else if (this.type === MaterialType.card) backgroundColor = Colors.white;
+            else if (this.type === MaterialType.transparency) backgroundColor = Colors.transparent;
+            // ...
+        }
+
+        // Shadow
+        const boxShadow = this.elevation > 0 ? [{
+            color: 'rgba(0,0,0,0.2)', // simplified
+            blurRadius: this.elevation * 2, // approximation
+            offset: { x: 0, y: this.elevation }
+        }] : [];
+
+        // Shape/BorderRadius
+        // Prioritize shape, then borderRadius, then type defaults
+        let effectiveBorderRadius = this.borderRadius;
+        if (this.type === MaterialType.circle) {
+            effectiveBorderRadius = BorderRadius.circular(9999); // max
+        }
+
+        return new Container({
+            child: this.child,
+            clipBehavior: this.clipBehavior,
+            decoration: new BoxDecoration({
+                color: backgroundColor,
+                borderRadius: effectiveBorderRadius,
+                boxShadow: boxShadow
+            })
+            // TextStyle should be handled by DefaultTextStyle wrapping child ideally
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/menu_anchor.js b/packages/flutterjs_material/flutterjs_material/src/material/menu_anchor.js
new file mode 100644
index 00000000..4ea9db80
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/menu_anchor.js
@@ -0,0 +1,170 @@
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { Container } from './container.js';
+import { ButtonStyleButton } from './button_style_button.js';
+import { GestureDetector } from './gesture_detector.js';
+
+export class MenuController {
+    constructor() {
+        this._anchor = null;
+    }
+
+    _attach(anchor) {
+        this._anchor = anchor;
+    }
+
+    _detach() {
+        this._anchor = null;
+    }
+
+    open() {
+        this._anchor?.open();
+    }
+
+    close() {
+        this._anchor?.close();
+    }
+
+    get isOpen() {
+        return this._anchor?.isOpen ?? false;
+    }
+}
+
+export class MenuAnchor extends StatefulWidget {
+    constructor({
+        key,
+        controller,
+        childFocusNode,
+        style,
+        alignmentOffset,
+        clipBehavior,
+        menuChildren = [],
+        builder,
+        child,
+    } = {}) {
+        super(key);
+        this.controller = controller;
+        this.childFocusNode = childFocusNode;
+        this.style = style;
+        this.alignmentOffset = alignmentOffset;
+        this.clipBehavior = clipBehavior;
+        this.menuChildren = menuChildren;
+        this.builder = builder; // (context, controller, child)
+        this.child = child;
+    }
+
+    createState() {
+        return new MenuAnchorState();
+    }
+}
+
+class MenuAnchorState extends State {
+    constructor() {
+        super();
+        this.isOpen = false;
+        this._internalController = new MenuController();
+    }
+
+    get controller() {
+        return this.widget.controller || this._internalController;
+    }
+
+    initState() {
+        this.controller._attach(this);
+    }
+
+    dispose() {
+        this.controller._detach();
+        super.dispose();
+    }
+
+    open() {
+        if (!this.isOpen) {
+            this.setState(() => {
+                this.isOpen = true;
+            });
+        }
+    }
+
+    close() {
+        if (this.isOpen) {
+            this.setState(() => {
+                this.isOpen = false;
+            });
+        }
+    }
+
+    build(context) {
+        let child = this.widget.child;
+        if (this.widget.builder) {
+            child = this.widget.builder(context, this.controller, this.widget.child);
+        }
+
+        // This is where the Overlay logic would live.
+        // For now, we render the child.
+        // If open, we render the menu.
+        // Ideally the menu is in an Overlay. 
+        // We will return a wrapper.
+
+        return new Container({
+            child: child // Simply returning child for now as Overlay isn't ready.
+        });
+    }
+}
+
+export class MenuItemButton extends ButtonStyleButton {
+    constructor({
+        key,
+        onPressed,
+        onHover,
+        onFocusChange,
+        focusNode,
+        autofocus,
+        style,
+        shortcut,
+        child,
+        leadingIcon,
+        trailingIcon,
+        closeOnActivate = true,
+    } = {}) {
+        super({
+            key,
+            onPressed,
+            onHover,
+            onFocusChange,
+            focusNode,
+            autofocus,
+            style,
+            child // Should compose leading/child/trailing
+        });
+        this.leadingIcon = leadingIcon;
+        this.trailingIcon = trailingIcon;
+        this.closeOnActivate = closeOnActivate;
+    }
+
+    // Override build or rely on ButtonStyleButton structure
+}
+
+export class SubmenuButton extends StatefulWidget {
+    constructor({
+        key, // ...
+        menuChildren = [],
+        child
+    } = {}) {
+        super(key);
+        this.menuChildren = menuChildren;
+        this.child = child;
+    }
+
+    createState() {
+        return new SubmenuButtonState();
+    }
+}
+
+class SubmenuButtonState extends State {
+    build(context) {
+        return new MenuAnchor({
+            menuChildren: this.widget.menuChildren,
+            child: this.widget.child // Wrapped in visual button
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/menu_bar.js b/packages/flutterjs_material/flutterjs_material/src/material/menu_bar.js
new file mode 100644
index 00000000..98699559
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/menu_bar.js
@@ -0,0 +1,29 @@
+import { StatefulWidget,State } from '../core/widget_element.js';
+import { Row } from '../widgets/widgets.js';
+
+export class MenuBar extends StatefulWidget {
+    constructor({
+        key,
+        style,
+        children = [],
+        clipBehavior,
+    } = {}) {
+        super(key);
+        this.style = style;
+        this.children = children;
+        this.clipBehavior = clipBehavior;
+    }
+
+    createState() {
+        return new MenuBarState();
+    }
+}
+
+class MenuBarState extends State {
+    build(context) {
+        // MenuBar applies MenuTheme and renders children in a Row
+        return new Row({
+            children: this.widget.children
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/menu_bar_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/menu_bar_theme.js
new file mode 100644
index 00000000..53651ba0
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/menu_bar_theme.js
@@ -0,0 +1,30 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class MenuBarThemeData {
+    constructor({
+        style
+    } = {}) {
+        this.style = style;
+    }
+}
+
+class MenuBarTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(MenuBarTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    MenuBarTheme,
+    MenuBarThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/menu_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/menu_theme.js
new file mode 100644
index 00000000..435a6763
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/menu_theme.js
@@ -0,0 +1,30 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class MenuThemeData {
+    constructor({
+        style
+    } = {}) {
+        this.style = style;
+    }
+}
+
+class MenuTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(MenuTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    MenuTheme,
+    MenuThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/navigation_bar.js b/packages/flutterjs_material/flutterjs_material/src/material/navigation_bar.js
new file mode 100644
index 00000000..5fbbe43a
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/navigation_bar.js
@@ -0,0 +1,100 @@
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { Theme } from './theme.js';
+import { Container } from './container.js';
+import { Row, Expanded, Column } from '../widgets/widgets.js';
+import { GestureDetector } from './gesture_detector.js';
+import { Icon } from './icon.js';
+import { Text } from './text.js';
+import { NavigationBarTheme } from './navigation_bar_theme.js';
+import { Colors } from './color.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+
+export class NavigationBar extends StatefulWidget {
+    constructor({
+        key,
+        animationDuration,
+        selectedIndex = 0,
+        destinations = [],
+        onDestinationSelected,
+        backgroundColor,
+        elevation,
+        shadowColor,
+        surfaceTintColor,
+        indicatorColor,
+        indicatorShape,
+        height,
+        labelBehavior, // NavigationDestinationLabelBehavior
+        overlayColor,
+    } = {}) {
+        super(key);
+        this.animationDuration = animationDuration;
+        this.selectedIndex = selectedIndex;
+        this.destinations = destinations;
+        this.onDestinationSelected = onDestinationSelected;
+        this.backgroundColor = backgroundColor;
+        this.elevation = elevation;
+        this.shadowColor = shadowColor;
+        this.surfaceTintColor = surfaceTintColor;
+        this.indicatorColor = indicatorColor;
+        this.indicatorShape = indicatorShape;
+        this.height = height;
+        this.labelBehavior = labelBehavior;
+        this.overlayColor = overlayColor;
+    }
+
+    createState() {
+        return new NavigationBarState();
+    }
+}
+
+class NavigationBarState extends State {
+    build(context) {
+        const theme = NavigationBarTheme.of(context) || {};
+        const appTheme = Theme.of(context);
+        const colorScheme = appTheme.colorScheme;
+
+        const effectiveBgColor = this.widget.backgroundColor || theme.backgroundColor || colorScheme.surfaceContainer || '#F3EDF7';
+        const effectiveHeight = this.widget.height || theme.height || 80.0;
+        const effectiveIndicatorColor = this.widget.indicatorColor || theme.indicatorColor || colorScheme.secondaryContainer || '#E8DEF8';
+
+        return new Container({
+            height: effectiveHeight,
+            color: effectiveBgColor,
+            elevation: this.widget.elevation || theme.elevation || 3.0,
+            child: new Row({
+                // alignment logic for destinations
+                children: this.widget.destinations.map((destination, index) => {
+                    const isSelected = index === this.widget.selectedIndex;
+
+                    // Destination Item Implementation (Simplified)
+                    // Should wrap in 'NavigationDestination' style logic
+                    return new Expanded({
+                        child: new GestureDetector({
+                            onTap: () => this.widget.onDestinationSelected?.(index),
+                            child: new Container({
+                                color: 'transparent', // Hit area
+                                child: new Column({
+                                    mainAxisAlignment: 'center',
+                                    children: [
+                                        // Indicator Pill logic for Material 3
+                                        new Container({
+                                            padding: EdgeInsets.symmetric({ horizontal: 20, vertical: 4 }), // approximate pill
+                                            decoration: isSelected ? {
+                                                color: effectiveIndicatorColor,
+                                                borderRadius: '16px' // horizontal pill
+                                            } : null,
+                                            child: isSelected ? (destination.selectedIcon || destination.icon) : destination.icon
+                                        }),
+                                        new Container({ height: 4 }),
+                                        // Label
+                                        destination.label ? new Text(destination.label) : null
+                                    ]
+                                })
+                            })
+                        })
+                    });
+                })
+            })
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/navigation_bar_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/navigation_bar_theme.js
new file mode 100644
index 00000000..3a01eb9c
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/navigation_bar_theme.js
@@ -0,0 +1,48 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class NavigationBarThemeData {
+    constructor({
+        height,
+        backgroundColor,
+        elevation,
+        shadowColor,
+        surfaceTintColor,
+        indicatorColor,
+        indicatorShape,
+        labelTextStyle,
+        iconTheme,
+        labelBehavior, // alwaysShow, onlyShowSelected, alwaysHide
+    } = {}) {
+        this.height = height;
+        this.backgroundColor = backgroundColor;
+        this.elevation = elevation;
+        this.shadowColor = shadowColor;
+        this.surfaceTintColor = surfaceTintColor;
+        this.indicatorColor = indicatorColor;
+        this.indicatorShape = indicatorShape;
+        this.labelTextStyle = labelTextStyle;
+        this.iconTheme = iconTheme;
+        this.labelBehavior = labelBehavior;
+    }
+}
+
+class NavigationBarTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(NavigationBarTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    NavigationBarTheme,
+    NavigationBarThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/navigation_drawer.js b/packages/flutterjs_material/flutterjs_material/src/material/navigation_drawer.js
new file mode 100644
index 00000000..584976a4
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/navigation_drawer.js
@@ -0,0 +1,154 @@
+import { StatefulWidget, StatelessWidget } from '../core/widget_element.js';
+import { Theme } from './theme.js';
+import { Container } from './container.js';
+import { Column, Row, SizedBox } from '../widgets/widgets.js';
+import { Drawer } from './drawer.js';
+import { NavigationDrawerTheme } from './navigation_drawer_theme.js';
+import { Colors } from './color.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { GestureDetector } from './gesture_detector.js';
+import { Text } from './text.js';
+
+export class NavigationDrawerDestination {
+    constructor({
+        icon,
+        selectedIcon,
+        label,
+        enabled = true,
+    } = {}) {
+        this.icon = icon;
+        this.selectedIcon = selectedIcon;
+        this.label = label;
+        this.enabled = enabled;
+    }
+}
+
+export class NavigationDrawer extends StatelessWidget {
+    constructor({
+        key,
+        children = [], // Can be arbitrary widgets or NavigationDrawerDestination (via helper ideally)
+        // Material 3 drawer takes children directly, but assumes some structure.
+        // We will assume 'children' is a mix.
+        // For structured usage like NavigationBar, it often takes `selectedIndex` and `onDestinationSelected`
+        // IF we are strictly following M3 API, it's `NavigationDrawer` with `children` where `NavigationDrawerDestination` is a widget.
+        // But implementation simplifies if we accept `destinations` similar to NavigationBar for now OR strictly follow M3.
+
+        // M3 NavigationDrawer API:
+        // children: List<Widget>
+        // selectedIndex: int?
+        // onDestinationSelected: ValueChanged<int>?
+
+        selectedIndex,
+        onDestinationSelected,
+        backgroundColor,
+        elevation,
+        shadowColor,
+        surfaceTintColor,
+        indicatorColor,
+        indicatorShape,
+        tilePadding,
+    } = {}) {
+        super(key);
+        this.children = children;
+        this.selectedIndex = selectedIndex;
+        this.onDestinationSelected = onDestinationSelected;
+        this.backgroundColor = backgroundColor;
+        this.elevation = elevation;
+        this.shadowColor = shadowColor;
+        this.surfaceTintColor = surfaceTintColor;
+        this.indicatorColor = indicatorColor;
+        this.indicatorShape = indicatorShape;
+        this.tilePadding = tilePadding;
+    }
+
+    build(context) {
+        const theme = NavigationDrawerTheme.of(context) || {};
+        const appTheme = Theme.of(context);
+        const colorScheme = appTheme.colorScheme;
+        const effectiveBgColor = this.backgroundColor || theme.backgroundColor || colorScheme.surfaceContainerLow || '#F7F2FA';
+
+        // We need to intercept taps on Destination widgets if they are passed as children.
+        // This is tricky without a specialized Destination widget that knows its index.
+        // In Flutter, NavigationDrawerDestination is a Widget.
+        // Users pass them in `children`.
+        // We need to iterate children and if they are Destinations, wrap them.
+
+        let destinationIndex = 0;
+        const mappedChildren = this.children.map(child => {
+            if (child instanceof NavigationDrawerDestination) {
+                // If the user passed raw data class instead of widget (unlikely in proper M3 api but let's handle if we defined it as such above)
+                // Actually `NavigationDrawerDestination` IS a specific Widget class in Flutter M3.
+                // Let's assume we implement `NavigationDrawerDestination` as a Widget below.
+                return child;
+            }
+            // Check if it's our widget type (if JS supported robust type checks on classes/constructors easily here without import circles)
+            // For now, let's assume `children` contains `NavigationDrawerDestination` widgets.
+
+            // Wait, if passing widgets, how do we know which index corresponds to which for `selectedIndex`?
+            // The `children` list contains everything including headers/dividers.
+            // Only `NavigationDrawerDestination`s count towards index.
+
+            if (child.isNavigationDrawerDestination) {
+                const index = destinationIndex++;
+                const isSelected = index === this.selectedIndex;
+
+                // Inject selection state and callback
+                // In JS we can clone/modify or wrap.
+                // We'll wrap in a click handler that calls onDestinationSelected(index)
+
+                return new GestureDetector({
+                    onTap: () => this.onDestinationSelected?.(index),
+                    child: new Container({
+                        decoration: isSelected ? {
+                            color: this.indicatorColor || theme.indicatorColor || Colors.blue[100],
+                            borderRadius: '100px' // stadium
+                        } : null,
+                        child: child // The destination widget itself needs to render icon/label
+                    })
+                });
+            }
+            return child;
+        });
+
+        return new Drawer({
+            backgroundColor: effectiveBgColor,
+            elevation: this.elevation,
+            child: new Column({
+                children: mappedChildren
+            })
+        });
+    }
+}
+
+// We redefine NavigationDrawerDestination as a StatelessWidget to be used in children
+export class NavigationDrawerDestinationWidget extends StatelessWidget {
+    constructor({
+        key,
+        icon,
+        selectedIcon,
+        label,
+        enabled = true,
+    } = {}) {
+        super(key);
+        this.icon = icon;
+        this.selectedIcon = selectedIcon;
+        this.label = label;
+        this.enabled = enabled;
+        this.isNavigationDrawerDestination = true; // Marker
+    }
+
+    build(context) {
+        // Simple row with icon and text
+        return new Container({
+            height: 56, // Standard height
+            padding: EdgeInsets.symmetric({ horizontal: 16 }), // Standard padding
+            child: new Row({
+                children: [
+                    this.icon,
+                    new SizedBox({ width: 12 }),
+                    this.label
+                ]
+            })
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/navigation_drawer_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/navigation_drawer_theme.js
new file mode 100644
index 00000000..b89e14a7
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/navigation_drawer_theme.js
@@ -0,0 +1,48 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class NavigationDrawerThemeData {
+    constructor({
+        tileHeight,
+        backgroundColor,
+        elevation,
+        shadowColor,
+        surfaceTintColor,
+        indicatorColor,
+        indicatorShape,
+        indicatorSize,
+        labelTextStyle,
+        iconTheme,
+    } = {}) {
+        this.tileHeight = tileHeight;
+        this.backgroundColor = backgroundColor;
+        this.elevation = elevation;
+        this.shadowColor = shadowColor;
+        this.surfaceTintColor = surfaceTintColor;
+        this.indicatorColor = indicatorColor;
+        this.indicatorShape = indicatorShape;
+        this.indicatorSize = indicatorSize;
+        this.labelTextStyle = labelTextStyle;
+        this.iconTheme = iconTheme;
+    }
+}
+
+class NavigationDrawerTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(NavigationDrawerTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    NavigationDrawerTheme,
+    NavigationDrawerThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/navigation_rail.js b/packages/flutterjs_material/flutterjs_material/src/material/navigation_rail.js
new file mode 100644
index 00000000..fad3101d
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/navigation_rail.js
@@ -0,0 +1,118 @@
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { Theme } from './theme.js';
+import { Container } from './container.js';
+import { Column, Expanded } from '../widgets/widgets.js';
+import { GestureDetector } from './gesture_detector.js';
+import { NavigationRailTheme } from './navigation_rail_theme.js';
+import { Colors } from './color.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+
+export class NavigationRailDestination {
+    constructor({
+        icon,
+        selectedIcon,
+        label,
+        padding,
+        enabled = true,
+    } = {}) {
+        this.icon = icon;
+        this.selectedIcon = selectedIcon;
+        this.label = label;
+        this.padding = padding;
+        this.enabled = enabled;
+    }
+}
+
+export class NavigationRail extends StatefulWidget {
+    constructor({
+        key,
+        backgroundColor,
+        extended = false,
+        leading,
+        trailing,
+        destinations = [],
+        selectedIndex,
+        onDestinationSelected,
+        elevation,
+        groupAlignment,
+        labelType,
+        unselectedLabelTextStyle,
+        selectedLabelTextStyle,
+        unselectedIconTheme,
+        selectedIconTheme,
+        minWidth,
+        minExtendedWidth,
+        useIndicator,
+        indicatorColor,
+        indicatorShape,
+    } = {}) {
+        super(key);
+        this.backgroundColor = backgroundColor;
+        this.extended = extended;
+        this.leading = leading;
+        this.trailing = trailing;
+        this.destinations = destinations;
+        this.selectedIndex = selectedIndex;
+        this.onDestinationSelected = onDestinationSelected;
+        this.elevation = elevation;
+        this.groupAlignment = groupAlignment;
+        this.labelType = labelType;
+        this.unselectedLabelTextStyle = unselectedLabelTextStyle;
+        this.selectedLabelTextStyle = selectedLabelTextStyle;
+        this.unselectedIconTheme = unselectedIconTheme;
+        this.selectedIconTheme = selectedIconTheme;
+        this.minWidth = minWidth;
+        this.minExtendedWidth = minExtendedWidth;
+        this.useIndicator = useIndicator;
+        this.indicatorColor = indicatorColor;
+        this.indicatorShape = indicatorShape;
+    }
+
+    createState() {
+        return new NavigationRailState();
+    }
+}
+
+class NavigationRailState extends State {
+    build(context) {
+        const theme = NavigationRailTheme.of(context) || {};
+        const appTheme = Theme.of(context);
+        const colorScheme = appTheme.colorScheme;
+        const effectiveBgColor = this.widget.backgroundColor || theme.backgroundColor || colorScheme.surface || '#FFFFFF';
+        const width = this.widget.extended
+            ? (this.widget.minExtendedWidth || theme.minExtendedWidth || 256.0)
+            : (this.widget.minWidth || theme.minWidth || 72.0);
+
+        return new Container({
+            width: width,
+            color: effectiveBgColor,
+            elevation: this.widget.elevation || theme.elevation,
+            padding: EdgeInsets.symmetric({ vertical: 8.0 }),
+            child: new Column({
+                children: [
+                    this.widget.leading,
+                    // Expanded space if group alignment logic needed
+                    new Expanded({
+                        child: new Column({
+                            mainAxisAlignment: 'center', // Simplified alignment
+                            children: this.widget.destinations.map((destination, index) => {
+                                const isSelected = index === this.widget.selectedIndex;
+                                return new GestureDetector({
+                                    onTap: () => this.widget.onDestinationSelected?.(index),
+                                    child: new Container({
+                                        padding: EdgeInsets.symmetric({ vertical: 12.0 }),
+                                        // Indicator logic simpler than Bar/Drawer usually vertical pill or circle
+                                        // For now simple container
+                                        child: isSelected ? (destination.selectedIcon || destination.icon) : destination.icon
+                                        // Add Label logic based on extended/labelType
+                                    })
+                                });
+                            })
+                        })
+                    }),
+                    this.widget.trailing
+                ].filter(Boolean)
+            })
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/navigation_rail_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/navigation_rail_theme.js
new file mode 100644
index 00000000..e4505bd6
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/navigation_rail_theme.js
@@ -0,0 +1,54 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class NavigationRailThemeData {
+    constructor({
+        backgroundColor,
+        elevation,
+        unselectedLabelTextStyle,
+        selectedLabelTextStyle,
+        unselectedIconTheme,
+        selectedIconTheme,
+        groupAlignment,
+        labelType, // none, selected, all
+        useIndicator,
+        indicatorColor,
+        indicatorShape,
+        minWidth,
+        minExtendedWidth,
+    } = {}) {
+        this.backgroundColor = backgroundColor;
+        this.elevation = elevation;
+        this.unselectedLabelTextStyle = unselectedLabelTextStyle;
+        this.selectedLabelTextStyle = selectedLabelTextStyle;
+        this.unselectedIconTheme = unselectedIconTheme;
+        this.selectedIconTheme = selectedIconTheme;
+        this.groupAlignment = groupAlignment;
+        this.labelType = labelType;
+        this.useIndicator = useIndicator;
+        this.indicatorColor = indicatorColor;
+        this.indicatorShape = indicatorShape;
+        this.minWidth = minWidth;
+        this.minExtendedWidth = minExtendedWidth;
+    }
+}
+
+class NavigationRailTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(NavigationRailTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    NavigationRailTheme,
+    NavigationRailThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/outlined_button.js b/packages/flutterjs_material/flutterjs_material/src/material/outlined_button.js
new file mode 100644
index 00000000..fa71a962
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/outlined_button.js
@@ -0,0 +1,98 @@
+import { ButtonStyleButton } from './button_style_button.js';
+import { OutlinedButtonTheme } from './outlined_button_theme.js';
+import { Theme } from './theme.js';
+import { GestureDetector } from './gesture_detector.js';
+import { Container, BoxDecoration } from './container.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { BorderRadius } from '../utils/border_radius.js';
+import { Center } from '../widgets/compoment/center.js';
+import { TextStyle } from '../painting/text_style.js';
+import { Border, BorderSide } from '../utils/border.js';
+
+export class OutlinedButton extends ButtonStyleButton {
+    constructor({
+        key,
+        onPressed,
+        onLongPress,
+        onHover,
+        onFocusChange,
+        style,
+        focusNode,
+        autofocus,
+        clipBehavior,
+        child
+    } = {}) {
+        super({
+            key,
+            onPressed,
+            onLongPress,
+            onHover,
+            onFocusChange,
+            style,
+            focusNode,
+            autofocus,
+            clipBehavior,
+            child
+        });
+    }
+
+    build(context) {
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+        const buttonTheme = theme.outlinedButtonTheme?.style || {};
+
+        // M3 Defaults for Outlined Button
+        const defaultBg = 'transparent';
+        const defaultFg = colorScheme.primary;
+        const defaultBorderColor = colorScheme.outline;
+
+        const resolveColor = (value, defaultValue) => {
+            if (value) {
+                if (typeof value === 'string') return value;
+                if (typeof value.toCSSString === 'function') return value.toCSSString();
+                if (value.value) return '#' + value.value.toString(16).padStart(8, '0').slice(2);
+            }
+            return defaultValue;
+        };
+
+        const customStyle = this.style || {};
+
+        // Merge with Theme
+        const themeBg = buttonTheme.backgroundColor;
+        const themeFg = buttonTheme.foregroundColor;
+        const themeSide = buttonTheme.side; // Assuming BorderSide object
+
+        const effectiveBg = resolveColor(customStyle.backgroundColor || themeBg, defaultBg);
+        const effectiveFg = resolveColor(customStyle.foregroundColor || customStyle.color || themeFg, defaultFg);
+
+        // Custom handling for border? 
+        // We need a simple way to resolve border color.
+        // Assuming side is BorderSide
+        let effectiveBorderColor = defaultBorderColor;
+
+        let side = customStyle.side || themeSide;
+
+        if (side && side.color) {
+            effectiveBorderColor = resolveColor(side.color, defaultBorderColor);
+        }
+
+        return new GestureDetector({
+            onTap: this.onPressed,
+            onLongPress: this.onLongPress,
+            child: new Container({
+                padding: customStyle.padding || EdgeInsets.symmetric({ vertical: 10, horizontal: 24 }),
+                decoration: new BoxDecoration({
+                    color: effectiveBg,
+                    borderRadius: customStyle.shape?.borderRadius || BorderRadius.circular(20),
+                    border: Border.all({
+                        color: effectiveBorderColor,
+                        width: side?.width || 1
+                    })
+                }),
+                child: new Center({
+                    child: this.child
+                })
+            })
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/outlined_button_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/outlined_button_theme.js
new file mode 100644
index 00000000..554bfd86
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/outlined_button_theme.js
@@ -0,0 +1,30 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class OutlinedButtonThemeData {
+    constructor({
+        style
+    } = {}) {
+        this.style = style;
+    }
+}
+
+class OutlinedButtonTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(OutlinedButtonTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    OutlinedButtonTheme,
+    OutlinedButtonThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/popup_menu.js b/packages/flutterjs_material/flutterjs_material/src/material/popup_menu.js
new file mode 100644
index 00000000..741f2620
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/popup_menu.js
@@ -0,0 +1,160 @@
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { IconButton } from './icon_button.js';
+import { Icon, Icons } from './icon.js';
+import { Theme } from './theme.js';
+import { Color } from '../utils/color.js';
+// import { showMenu } from './popup_menu.js'; // Cyclic dependency if in same file? 
+// In FlutterJS we might put top level showMenu here.
+
+export class PopupMenuEntry extends StatefulWidget {
+    constructor({ key } = {}) {
+        super(key);
+    }
+}
+
+export class PopupMenuDivider extends PopupMenuEntry {
+    constructor({ key, height = 16 } = {}) {
+        super({ key });
+        this.height = height;
+    }
+
+    createState() {
+        return new PopupMenuDividerState();
+    }
+}
+
+class PopupMenuDividerState extends State {
+    build(context) {
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+        const dividerColor = theme.dividerColor || colorScheme.outlineVariant || '#CAC4D0';
+
+        // Simple divider implementation
+        return {
+            tag: 'div',
+            style: {
+                height: `${this.widget.height}px`,
+                borderBottom: `1px solid ${typeof dividerColor === 'string' ? dividerColor : (dividerColor.toCSSString ? dividerColor.toCSSString() : '#ddd')}`
+            }
+        };
+    }
+}
+
+export class PopupMenuItem extends PopupMenuEntry {
+    constructor({
+        key,
+        value,
+        onTap,
+        enabled = true,
+        height = 48.0,
+        padding,
+        textStyle,
+        mouseCursor,
+        child,
+    } = {}) {
+        super({ key });
+        this.value = value;
+        this.onTap = onTap;
+        this.enabled = enabled;
+        this.height = height;
+        this.padding = padding;
+        this.textStyle = textStyle;
+        this.mouseCursor = mouseCursor;
+        this.child = child;
+    }
+
+    createState() {
+        return new PopupMenuItemState();
+    }
+}
+
+class PopupMenuItemState extends State {
+    build(context) {
+        // Simplified item
+        // Should handle tap and return value to menu opener
+        return {
+            tag: 'div',
+            style: {
+                height: `${this.widget.height}px`,
+                padding: '0 16px',
+                display: 'flex',
+                alignItems: 'center',
+                cursor: this.widget.enabled ? 'pointer' : 'default',
+                opacity: this.widget.enabled ? 1 : 0.38
+            },
+            onClick: () => {
+                if (this.widget.enabled) {
+                    this.widget.onTap?.();
+                    // Close menu logic would happen here if we had access to menu context
+                }
+            },
+            child: this.widget.child
+        };
+    }
+}
+
+export class PopupMenuButton extends StatefulWidget {
+    constructor({
+        key,
+        itemBuilder,
+        initialValue,
+        onSelected,
+        onCanceled,
+        tooltip,
+        elevation,
+        shadowColor,
+        surfaceTintColor,
+        padding,
+        child,
+        splashRadius,
+        icon,
+        iconSize,
+        offset,
+        enabled = true,
+        shape,
+        color,
+        enableFeedback,
+        constraints,
+        position,
+        clipBehavior,
+    } = {}) {
+        super(key);
+        this.itemBuilder = itemBuilder;
+        this.initialValue = initialValue;
+        this.onSelected = onSelected;
+        this.onCanceled = onCanceled;
+        this.tooltip = tooltip;
+        this.elevation = elevation;
+        this.padding = padding;
+        this.child = child;
+        this.icon = icon;
+        this.enabled = enabled;
+    }
+
+    createState() {
+        return new PopupMenuButtonState();
+    }
+}
+
+class PopupMenuButtonState extends State {
+    showButtonMenu() {
+        // Logic to show menu
+        // 1. Get items from builder
+        // 2. Compute position
+        // 3. Show overlay/dialog
+        // 4. Handle selection
+
+        const items = this.widget.itemBuilder(this.context);
+        console.warn('PopupMenuButton showMenu not fully implemented (requires Overlay). Items:', items);
+    }
+
+    build(context) {
+        return this.widget.child
+            ? new GestureDetector({ onTap: () => this.showButtonMenu(), child: this.widget.child })
+            : new IconButton({
+                icon: this.widget.icon || new Icon(Icons.moreVert),
+                onPressed: this.widget.enabled ? () => this.showButtonMenu() : null,
+                tooltip: this.widget.tooltip,
+            });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/popup_menu_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/popup_menu_theme.js
new file mode 100644
index 00000000..a8bc558f
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/popup_menu_theme.js
@@ -0,0 +1,40 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class PopupMenuThemeData {
+    constructor({
+        color,
+        shape,
+        elevation,
+        textStyle,
+        enableFeedback,
+        mouseCursor,
+    } = {}) {
+        this.color = color;
+        this.shape = shape;
+        this.elevation = elevation;
+        this.textStyle = textStyle;
+        this.enableFeedback = enableFeedback;
+        this.mouseCursor = mouseCursor;
+    }
+}
+
+class PopupMenuTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(PopupMenuTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    PopupMenuTheme,
+    PopupMenuThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/progress_indicator.js b/packages/flutterjs_material/flutterjs_material/src/material/progress_indicator.js
new file mode 100644
index 00000000..511c71fc
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/progress_indicator.js
@@ -0,0 +1,320 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { ProgressIndicatorThemeData } from '../utils/progress_indicator_theme.js';
+import { Color } from '../utils/color.js';
+import { Theme } from './theme.js';
+
+/**
+ * CircularProgressIndicator - Material Design circular progress indicator
+ */
+class CircularProgressIndicator extends StatelessWidget {
+    constructor({
+        key = null,
+        value = null, // null for indeterminate, 0.0-1.0 for determinate
+        backgroundColor = null,
+        color = null,
+        valueColor = null,
+        strokeWidth = 4.0,
+        semanticsLabel = null,
+        semanticsValue = null
+    } = {}) {
+        super(key);
+        this.value = value;
+        this.backgroundColor = backgroundColor;
+        this.color = color;
+        this.valueColor = valueColor;
+        this.strokeWidth = strokeWidth;
+        this.semanticsLabel = semanticsLabel;
+        this.semanticsValue = semanticsValue;
+    }
+
+    build(context) {
+        // Theme lookup would go here
+        // const theme = Theme.of(context).progressIndicatorTheme;
+
+        const isIndeterminate = this.value == null;
+        const elementId = context.element?.getElementId?.() || `progress-${Date.now()}`;
+        const widgetPath = context.element?.getWidgetPath?.() || 'CircularProgressIndicator';
+
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+
+        // Defaults
+        const effectiveColor = this.color || colorScheme.primary || '#6750A4';
+        const effectiveBackgroundColor = this.backgroundColor; // Can be null
+
+        const size = 40; // Default size
+        const radius = (size - this.strokeWidth) / 2;
+        const circumference = 2 * Math.PI * radius;
+
+        // Container styles
+        const containerStyles = {
+            width: `${size}px`,
+            height: `${size}px`,
+            position: 'relative',
+            display: 'inline-block'
+        };
+
+        // SVG circle for progress
+        const svgProps = {
+            width: size,
+            height: size,
+            viewBox: `0 0 ${size} ${size}`,
+            style: {
+                transform: 'rotate(-90deg)', // Start from top
+                transition: 'transform 0.3s ease'
+            }
+        };
+
+        const children = [];
+
+        // Background circle
+        if (effectiveBackgroundColor) {
+            children.push(
+                new VNode({
+                    tag: 'circle',
+                    props: {
+                        cx: size / 2,
+                        cy: size / 2,
+                        r: radius,
+                        fill: 'none',
+                        stroke: effectiveBackgroundColor,
+                        strokeWidth: this.strokeWidth
+                    }
+                })
+            );
+        }
+
+        // Progress circle
+        const progressColor = this.valueColor || effectiveColor;
+
+        if (isIndeterminate) {
+            // Indeterminate (spinning) mode
+            const circleStyle = {
+                animation: 'fjs-circular-rotate 1.4s linear infinite',
+                transformOrigin: 'center'
+            };
+
+            children.push(
+                new VNode({
+                    tag: 'circle',
+                    props: {
+                        cx: size / 2,
+                        cy: size / 2,
+                        r: radius,
+                        fill: 'none',
+                        stroke: progressColor,
+                        strokeWidth: this.strokeWidth,
+                        strokeDasharray: `${circumference * 0.75} ${circumference * 0.25}`,
+                        strokeLinecap: 'round',
+                        style: circleStyle
+                    }
+                })
+            );
+        } else {
+            // Determinate mode (show percentage)
+            const progress = Math.max(0, Math.min(1, this.value));
+            const strokeDashoffset = circumference * (1 - progress);
+
+            children.push(
+                new VNode({
+                    tag: 'circle',
+                    props: {
+                        cx: size / 2,
+                        cy: size / 2,
+                        r: radius,
+                        fill: 'none',
+                        stroke: progressColor,
+                        strokeWidth: this.strokeWidth,
+                        strokeDasharray: circumference,
+                        strokeDashoffset: strokeDashoffset,
+                        strokeLinecap: 'round',
+                        style: {
+                            transition: 'stroke-dashoffset 0.3s ease'
+                        }
+                    }
+                })
+            );
+        }
+
+        const svg = new VNode({
+            tag: 'svg',
+            props: svgProps,
+            children
+        });
+
+        const containerProps = {
+            className: 'fjs-circular-progress-indicator',
+            style: containerStyles,
+            role: 'progressbar',
+            'aria-valuenow': isIndeterminate ? undefined : Math.round(this.value * 100),
+            'aria-valuemin': 0,
+            'aria-valuemax': 100,
+            'aria-label': this.semanticsLabel || 'Loading',
+            'data-element-id': elementId,
+            'data-widget-path': widgetPath,
+            'data-widget': 'CircularProgressIndicator',
+            'data-indeterminate': isIndeterminate
+        };
+
+        return new VNode({
+            tag: 'div',
+            props: containerProps,
+            children: [svg],
+            key: this.key
+        });
+    }
+}
+
+/**
+ * LinearProgressIndicator - Material Design linear progress indicator
+ */
+class LinearProgressIndicator extends StatelessWidget {
+    constructor({
+        key = null,
+        value = null, // null for indeterminate, 0.0-1.0 for determinate
+        backgroundColor = null,
+        color = null,
+        valueColor = null,
+        minHeight = null,
+        semanticsLabel = null,
+        semanticsValue = null
+    } = {}) {
+        super(key);
+        this.value = value;
+        this.backgroundColor = backgroundColor;
+        this.color = color;
+        this.valueColor = valueColor;
+        this.minHeight = minHeight; // Will default to theme or 4.0
+        this.semanticsLabel = semanticsLabel;
+        this.semanticsValue = semanticsValue;
+    }
+
+    build(context) {
+        // Theme lookup
+        // const theme = Theme.of(context).progressIndicatorTheme;
+
+        const isIndeterminate = this.value == null;
+        const elementId = context.element?.getElementId?.() || `linear-progress-${Date.now()}`;
+        const widgetPath = context.element?.getWidgetPath?.() || 'LinearProgressIndicator';
+
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+
+        // Defaults
+        const effectiveMinHeight = this.minHeight || 4.0;
+        const effectiveColor = this.color || colorScheme.primary || '#6750A4';
+        const effectiveBackgroundColor = this.backgroundColor || colorScheme.surfaceContainerHighest || '#E6E0E9';
+        const progressColor = this.valueColor || effectiveColor;
+
+        // Container (track) styles
+        const containerStyles = {
+            width: '100%',
+            height: `${effectiveMinHeight}px`,
+            backgroundColor: effectiveBackgroundColor,
+            borderRadius: `${effectiveMinHeight / 2}px`,
+            overflow: 'hidden',
+            position: 'relative'
+        };
+
+        let progressBar;
+
+        if (isIndeterminate) {
+            // Indeterminate (moving bar) mode
+            const barStyles = {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                bottom: 0,
+                width: '30%',
+                backgroundColor: progressColor,
+                borderRadius: `${effectiveMinHeight / 2}px`,
+                animation: 'fjs-linear-indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite'
+            };
+
+            progressBar = new VNode({
+                tag: 'div',
+                props: {
+                    className: 'fjs-linear-progress-bar',
+                    style: barStyles
+                }
+            });
+        } else {
+            // Determinate mode
+            const progress = Math.max(0, Math.min(1, this.value));
+            const barStyles = {
+                height: '100%',
+                width: `${progress * 100}%`,
+                backgroundColor: progressColor,
+                borderRadius: `${effectiveMinHeight / 2}px`,
+                transition: 'width 0.3s ease'
+            };
+
+            progressBar = new VNode({
+                tag: 'div',
+                props: {
+                    className: 'fjs-linear-progress-bar',
+                    style: barStyles
+                }
+            });
+        }
+
+        const containerProps = {
+            className: 'fjs-linear-progress-indicator',
+            style: containerStyles,
+            role: 'progressbar',
+            'aria-valuenow': isIndeterminate ? undefined : Math.round(this.value * 100),
+            'aria-valuemin': 0,
+            'aria-valuemax': 100,
+            'aria-label': this.semanticsLabel || 'Loading',
+            'data-element-id': elementId,
+            'data-widget-path': widgetPath,
+            'data-widget': 'LinearProgressIndicator',
+            'data-indeterminate': isIndeterminate
+        };
+
+        return new VNode({
+            tag: 'div',
+            props: containerProps,
+            children: [progressBar],
+            key: this.key
+        });
+    }
+}
+
+// Add CSS animations
+if (typeof document !== 'undefined') {
+    const styleId = 'fjs-progress-animations';
+    if (!document.getElementById(styleId)) {
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+        @keyframes fjs-circular-rotate {
+          0% {
+            transform: rotate(0deg);
+          }
+          100% {
+            transform: rotate(360deg);
+          }
+        }
+    
+        @keyframes fjs-linear-indeterminate {
+          0% {
+            left: -30%;
+          }
+          50% {
+            left: 100%;
+          }
+          100% {
+            left: 100%;
+          }
+        }
+      `;
+        document.head.appendChild(style);
+    }
+}
+
+export {
+    CircularProgressIndicator,
+    LinearProgressIndicator
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/radio.js b/packages/flutterjs_material/flutterjs_material/src/material/radio.js
new file mode 100644
index 00000000..f931daa2
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/radio.js
@@ -0,0 +1,288 @@
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { RadioThemeData } from '../utils/radio_theme.js';
+import { Color } from '../utils/color.js';
+import { Theme } from './theme.js';
+
+/**
+ * Radio - Material Design radio button widget
+ * Used for selecting a single option from a set
+ */
+class Radio extends StatefulWidget {
+    constructor({
+        key = null,
+        value = null,
+        groupValue = null,
+        onChanged = null,
+        toggleable = false,
+        activeColor = null,
+        fillColor = null,
+        materialTapTargetSize = 'padded',
+        visualDensity = null,
+        focusColor = null,
+        hoverColor = null,
+        overlayColor = null,
+        splashRadius = null,
+        focusNode = null,
+        autofocus = false
+    } = {}) {
+        super(key);
+        this.value = value;
+        this.groupValue = groupValue;
+        this.onChanged = onChanged;
+        this.toggleable = toggleable;
+        this.activeColor = activeColor;
+        this.fillColor = fillColor;
+        this.materialTapTargetSize = materialTapTargetSize;
+        this.visualDensity = visualDensity;
+        this.focusColor = focusColor;
+        this.hoverColor = hoverColor;
+        this.overlayColor = overlayColor;
+        this.splashRadius = splashRadius;
+        this.focusNode = focusNode;
+        this.autofocus = autofocus;
+    }
+
+    createState() {
+        return new RadioState();
+    }
+}
+
+/**
+ * RadioState - State management for Radio
+ */
+class RadioState extends State {
+    constructor() {
+        super();
+        this.isHovered = false;
+        this.isFocused = false;
+        this.isPressed = false;
+    }
+
+    _handleClick(event) {
+        event.stopPropagation();
+
+        if (this.widget.onChanged == null) return;
+
+        if (this.widget.toggleable && this.widget.value === this.widget.groupValue) {
+            // If already selected and toggleable, deselect
+            this.widget.onChanged(null);
+        } else {
+            // Select this value
+            this.widget.onChanged(this.widget.value);
+        }
+    }
+
+    _handleMouseEnter() {
+        this.setState(() => {
+            this.isHovered = true;
+        });
+    }
+
+    _handleMouseLeave() {
+        this.setState(() => {
+            this.isHovered = false;
+            this.isPressed = false;
+        });
+    }
+
+    _handleMouseDown() {
+        this.setState(() => {
+            this.isPressed = true;
+        });
+    }
+
+    _handleMouseUp() {
+        this.setState(() => {
+            this.isPressed = false;
+        });
+    }
+
+    _handleFocus() {
+        this.setState(() => {
+            this.isFocused = true;
+        });
+    }
+
+    _handleBlur() {
+        this.setState(() => {
+            this.isFocused = false;
+        });
+    }
+
+    build(context) {
+        const isDisabled = this.widget.onChanged == null;
+        const isSelected = this.widget.value === this.widget.groupValue;
+
+        const elementId = context.element?.getElementId?.() || `radio-${Date.now()}`;
+        const widgetPath = context.element?.getWidgetPath?.() || 'Radio';
+
+        // Get theme
+        const theme = context.radioTheme || new RadioThemeData();
+        const appTheme = Theme.of(context);
+        const colorScheme = appTheme.colorScheme;
+
+        // Determine colors using theme
+        const fillColor = this._getFillColor(isSelected, isDisabled, theme, colorScheme);
+        const borderColor = this._getBorderColor(isSelected, isDisabled, theme, colorScheme);
+
+        // Container styles
+        const containerStyles = {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: `${theme.getRadioSize()}px`,
+            height: `${theme.getRadioSize()}px`,
+            borderRadius: '50%',
+            cursor: isDisabled ? 'default' : (this.widget.mouseCursor || theme.mouseCursor || 'pointer'),
+            position: 'relative',
+            transition: 'background-color 0.15s ease',
+            backgroundColor: this._getOverlayColor(isDisabled, theme, colorScheme)
+        };
+
+        // Radio circle styles
+        const circleStyles = {
+            width: '20px',
+            height: '20px',
+            borderRadius: '50%',
+            border: `2px solid ${borderColor}`,
+            backgroundColor: 'transparent',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            transition: `all ${theme.animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+            position: 'relative'
+        };
+
+        // Inner dot (shown when selected)
+        let innerDot = null;
+        if (isSelected) {
+            innerDot = new VNode({
+                tag: 'div',
+                props: {
+                    className: 'fjs-radio-inner-dot',
+                    style: {
+                        width: '10px',
+                        height: '10px',
+                        borderRadius: '50%',
+                        backgroundColor: fillColor,
+                        transition: `transform ${theme.animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+                        transform: 'scale(1)'
+                    }
+                }
+            });
+        }
+
+        const events = {
+            click: (e) => this._handleClick(e),
+            mouseenter: () => this._handleMouseEnter(),
+            mouseleave: () => this._handleMouseLeave(),
+            mousedown: () => this._handleMouseDown(),
+            mouseup: () => this._handleMouseUp(),
+            focus: () => this._handleFocus(),
+            blur: () => this._handleBlur()
+        };
+
+        const containerProps = {
+            className: 'fjs-radio-container',
+            style: containerStyles,
+            tabIndex: isDisabled ? -1 : 0,
+            role: 'radio',
+            'aria-checked': isSelected,
+            'aria-disabled': isDisabled,
+            'data-element-id': elementId,
+            'data-widget-path': widgetPath,
+            'data-widget': 'Radio',
+            'data-selected': isSelected,
+            'data-disabled': isDisabled
+        };
+
+        const circle = new VNode({
+            tag: 'div',
+            props: {
+                className: 'fjs-radio-circle',
+                style: circleStyles
+            },
+            children: innerDot ? [innerDot] : []
+        });
+
+        return new VNode({
+            tag: 'div',
+            props: containerProps,
+            children: [circle],
+            events,
+            key: this.widget.key
+        });
+    }
+
+    _getFillColor(isSelected, isDisabled, theme, colorScheme) {
+        if (isDisabled) {
+            return new Color(colorScheme.onSurface).withOpacity(0.38).toCSSString();
+        }
+
+        if (this.widget.fillColor) {
+            return new Color(this.widget.fillColor).toCSSString();
+        }
+
+        if (isSelected && this.widget.activeColor) {
+            return new Color(this.widget.activeColor).toCSSString();
+        }
+
+        if (isSelected) {
+            return theme.fillColor || colorScheme.primary || '#6200ee';
+        }
+
+        return 'transparent';
+    }
+
+    _getBorderColor(isSelected, isDisabled, theme, colorScheme) {
+        if (isDisabled) {
+            return new Color(colorScheme.onSurface).withOpacity(0.38).toCSSString();
+        }
+
+        if (isSelected && this.widget.activeColor) {
+            return new Color(this.widget.activeColor).toCSSString();
+        }
+
+        if (isSelected) {
+            return colorScheme.primary || '#6200ee';
+        }
+
+        return colorScheme.onSurfaceVariant || '#49454F';
+    }
+
+    _getOverlayColor(isDisabled, theme, colorScheme) {
+        if (isDisabled) {
+            return 'transparent';
+        }
+
+        if (this.widget.overlayColor && this.isPressed) {
+            return new Color(this.widget.overlayColor).withOpacity(0.24).toCSSString();
+        }
+
+        if (this.widget.focusColor && this.isFocused) {
+            return new Color(this.widget.focusColor).withOpacity(0.12).toCSSString();
+        }
+
+        if (this.widget.hoverColor && this.isHovered) {
+            return new Color(this.widget.hoverColor).withOpacity(0.08).toCSSString();
+        }
+
+        // Use theme
+        if (this.isPressed) {
+            return new Color(colorScheme.primary).withOpacity(0.12).toCSSString();
+        }
+
+        if (this.isFocused) {
+            return new Color(colorScheme.onSurface).withOpacity(0.12).toCSSString();
+        }
+
+        if (this.isHovered) {
+            return new Color(colorScheme.onSurface).withOpacity(0.08).toCSSString();
+        }
+
+        return 'transparent';
+    }
+}
+
+export { Radio, RadioState };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/radio_list_tile.js b/packages/flutterjs_material/flutterjs_material/src/material/radio_list_tile.js
new file mode 100644
index 00000000..6bb27f8f
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/radio_list_tile.js
@@ -0,0 +1,98 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { Radio } from './radio.js';
+import { ListTile } from './list_tile.js';
+
+/**
+ * RadioListTile - A ListTile with a Radio button
+ */
+class RadioListTile extends StatelessWidget {
+    constructor({
+        key = null,
+        value = null,
+        groupValue = null,
+        onChanged = null,
+        toggleable = false,
+        activeColor = null,
+        title = null,
+        subtitle = null,
+        isThreeLine = false,
+        dense = false,
+        secondary = null,
+        selected = false,
+        controlAffinity = 'trailing', // 'leading', 'trailing', 'platform'
+        autofocus = false,
+        shape = null,
+        selectedTileColor = null,
+        tileColor = null,
+        visualDensity = null,
+        focusNode = null,
+        enableFeedback = null,
+        contentPadding = null
+    } = {}) {
+        super(key);
+        this.value = value;
+        this.groupValue = groupValue;
+        this.onChanged = onChanged;
+        this.toggleable = toggleable;
+        this.activeColor = activeColor;
+        this.title = title;
+        this.subtitle = subtitle;
+        this.isThreeLine = isThreeLine;
+        this.dense = dense;
+        this.secondary = secondary;
+        this.selected = selected;
+        this.controlAffinity = controlAffinity;
+        this.autofocus = autofocus;
+        this.shape = shape;
+        this.selectedTileColor = selectedTileColor;
+        this.tileColor = tileColor;
+        this.visualDensity = visualDensity;
+        this.focusNode = focusNode;
+        this.enableFeedback = enableFeedback;
+        this.contentPadding = contentPadding;
+    }
+
+    build(context) {
+        const radio = new Radio({
+            value: this.value,
+            groupValue: this.groupValue,
+            onChanged: this.onChanged,
+            toggleable: this.toggleable,
+            activeColor: this.activeColor,
+            autofocus: this.autofocus
+        });
+
+        const isSelected = this.value === this.groupValue;
+        let leading, trailing;
+
+        if (this.controlAffinity === 'leading') {
+            leading = radio;
+            trailing = this.secondary;
+        } else {
+            leading = this.secondary;
+            trailing = radio;
+        }
+
+        return new ListTile({
+            leading,
+            title: this.title,
+            subtitle: this.subtitle,
+            trailing,
+            isThreeLine: this.isThreeLine,
+            dense: this.dense,
+            enabled: this.onChanged != null,
+            onTap: this.onChanged ? () => this.onChanged(this.value) : null,
+            selected: this.selected,
+            autofocus: this.autofocus,
+            contentPadding: this.contentPadding,
+            shape: this.shape,
+            selectedTileColor: this.selectedTileColor,
+            tileColor: this.tileColor,
+            visualDensity: this.visualDensity,
+            focusNode: this.focusNode,
+            enableFeedback: this.enableFeedback
+        });
+    }
+}
+
+export { RadioListTile };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/radio_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/radio_theme.js
new file mode 100644
index 00000000..4c376c27
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/radio_theme.js
@@ -0,0 +1,40 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class RadioThemeData {
+    constructor({
+        mouseCursor,
+        fillColor,
+        overlayColor,
+        splashRadius,
+        materialTapTargetSize,
+        visualDensity,
+    } = {}) {
+        this.mouseCursor = mouseCursor;
+        this.fillColor = fillColor;
+        this.overlayColor = overlayColor;
+        this.splashRadius = splashRadius;
+        this.materialTapTargetSize = materialTapTargetSize;
+        this.visualDensity = visualDensity;
+    }
+}
+
+class RadioTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(RadioTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    RadioTheme,
+    RadioThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/refresh_indicator.js b/packages/flutterjs_material/flutterjs_material/src/material/refresh_indicator.js
new file mode 100644
index 00000000..8d316468
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/refresh_indicator.js
@@ -0,0 +1,70 @@
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { Container } from './container.js';
+import { CircularProgressIndicator } from './progress_indicator.js';
+import { Colors } from './color.js';
+import { Theme } from './theme.js';
+import { Stack, Positioned } from '../widgets/widgets.js';
+
+export class RefreshIndicator extends StatefulWidget {
+    constructor({
+        key,
+        child,
+        displacement = 40.0,
+        edgeOffset = 0.0,
+        onRefresh,
+        color,
+        backgroundColor,
+        notificationPredicate,
+        semanticsLabel,
+        semanticsValue,
+        strokeWidth = 2.0,
+        triggerMode,
+    } = {}) {
+        super(key);
+        this.child = child;
+        this.displacement = displacement;
+        this.edgeOffset = edgeOffset;
+        this.onRefresh = onRefresh;
+        this.color = color; // Defaults to colorScheme.primary in build
+        this.backgroundColor = backgroundColor; // Defaults to colorScheme.surface in build
+        this.strokeWidth = strokeWidth;
+    }
+
+    createState() {
+        return new RefreshIndicatorState();
+    }
+}
+
+class RefreshIndicatorState extends State {
+    constructor() {
+        super();
+        this.isRefreshing = false;
+    }
+
+    // Since we don't have robust scroll notifications yet in this simplified setup,
+    // we can simulate refresh with a manual implementation or wrap child in a container that listens to scroll events?
+    // Proper impl requires NotificationListener <ScrollNotification>
+
+    // Simplification: We render the child. If logic were there, we'd overlay the spinner.
+    // For now, simple return of child.
+
+    build(context) {
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+        const effectiveColor = this.widget.color || colorScheme.primary || '#6750A4';
+        const effectiveBgColor = this.widget.backgroundColor || colorScheme.surface || '#FFFFFF';
+
+        return new Stack({
+            children: [
+                this.widget.child,
+                // Spinner logic would go here if refreshing
+                // e.g. new Positioned(...)
+            ]
+        });
+    }
+
+    show() {
+        // Trigger refresh programmatically
+        this.widget.onRefresh?.();
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/scaffold.js b/packages/flutterjs_material/flutterjs_material/src/material/scaffold.js
new file mode 100644
index 00000000..59a16ef2
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/scaffold.js
@@ -0,0 +1,624 @@
+import { StatefulWidget, StatelessWidget, Widget } from '../core/widget_element.js';
+import { Element } from "@flutterjs/runtime";
+import { VNode } from '@flutterjs/vdom/vnode';
+import { AppBar } from './app_bar.js';
+import { SnackBar, SnackBarClosedReason } from './snack_bar.js';
+import { Theme } from './theme.js';
+
+// ============================================================================
+// ENUMS
+// ============================================================================
+
+const FloatingActionButtonLocation = {
+    endFloat: 'endFloat',
+    endDocked: 'endDocked',
+    endTop: 'endTop',
+    startFloat: 'startFloat',
+    startDocked: 'startDocked',
+    startTop: 'startTop',
+    centerFloat: 'centerFloat',
+    centerDocked: 'centerDocked',
+    centerTop: 'centerTop'
+};
+
+// ============================================================================
+// SCAFFOLD FEATURE CONTROLLER (For SnackBars, BottomSheets)
+// ============================================================================
+
+class ScaffoldFeatureController {
+    constructor(widget, completer, closeCallback) {
+        this._widget = widget;
+        this._completer = completer;
+        this._close = closeCallback;
+    }
+
+    get widget() {
+        return this._widget;
+    }
+
+    get closed() {
+        return this._completer.promise;
+    }
+
+    close() {
+        if (!this._completer.completed) {
+            this._completer.resolve(SnackBarClosedReason.dismiss);
+        }
+        this._close?.();
+    }
+}
+
+// ============================================================================
+// SCAFFOLD STATE
+// ============================================================================
+
+class ScaffoldState extends Element {
+    constructor(widget, parent = null, runtime = null) {
+        super(widget, parent, runtime);
+        this._snackBars = [];
+        this._currentSnackBar = null;
+        this._snackBarTimer = null;
+        this._drawerOpen = false;
+        this._endDrawerOpen = false;
+        this._fabVisible = true;
+    }
+
+    /**
+     * Show snack bar
+     */
+    showSnackBar(snackBar) {
+        // Clear previous snack bar timer
+        if (this._snackBarTimer) {
+            clearTimeout(this._snackBarTimer);
+            this._snackBarTimer = null;
+        }
+
+        const completer = {
+            resolve: null,
+            reject: null,
+            completed: false,
+            promise: new Promise((resolve, reject) => {
+                completer.resolve = (value) => {
+                    completer.completed = true;
+                    resolve(value);
+                };
+                completer.reject = reject;
+            })
+        };
+
+        const controller = new ScaffoldFeatureController(
+            snackBar,
+            completer,
+            () => this._hideSnackBar()
+        );
+
+        this._currentSnackBar = controller;
+        this._snackBars.push(controller);
+
+        // Auto-hide after duration
+        this._snackBarTimer = setTimeout(() => {
+            if (!completer.completed) {
+                completer.resolve(SnackBarClosedReason.timeout);
+            }
+            this._hideSnackBar();
+        }, snackBar.duration);
+
+        this.markNeedsBuild();
+
+        return controller;
+    }
+
+    /**
+     * Hide current snack bar
+     */
+    _hideSnackBar() {
+        if (this._snackBarTimer) {
+            clearTimeout(this._snackBarTimer);
+            this._snackBarTimer = null;
+        }
+
+        this._snackBars.shift();
+        this._currentSnackBar = this._snackBars.length > 0 ? this._snackBars[0] : null;
+
+        this.markNeedsBuild();
+    }
+
+    /**
+     * Close snack bar
+     */
+    closeSnackBar() {
+        if (this._currentSnackBar) {
+            this._currentSnackBar.close();
+        }
+    }
+
+    /**
+     * Open drawer
+     */
+    openDrawer() {
+        this._drawerOpen = true;
+        this.markNeedsBuild();
+    }
+
+    /**
+     * Close drawer
+     */
+    closeDrawer() {
+        this._drawerOpen = false;
+        this.markNeedsBuild();
+    }
+
+    /**
+     * Toggle drawer
+     */
+    toggleDrawer() {
+        this._drawerOpen = !this._drawerOpen;
+        this.markNeedsBuild();
+    }
+
+    /**
+     * Open end drawer
+     */
+    openEndDrawer() {
+        this._endDrawerOpen = true;
+        this.markNeedsBuild();
+    }
+
+    /**
+     * Close end drawer
+     */
+    closeEndDrawer() {
+        this._endDrawerOpen = false;
+        this.markNeedsBuild();
+    }
+
+    /**
+     * Check if drawer is open
+     */
+    get isDrawerOpen() {
+        return this._drawerOpen;
+    }
+
+    /**
+     * Check if end drawer is open
+     */
+    get isEndDrawerOpen() {
+        return this._endDrawerOpen;
+    }
+
+    /**
+     * Show FAB
+     */
+    showFloatingActionButton() {
+        this._fabVisible = true;
+        this.markNeedsBuild();
+    }
+
+    /**
+     * Hide FAB
+     */
+    hideFloatingActionButton() {
+        this._fabVisible = false;
+        this.markNeedsBuild();
+    }
+
+    performRebuild() {
+        return this.widget.build(this.context);
+    }
+}
+
+// ============================================================================
+// SCAFFOLD WIDGET
+// ============================================================================
+
+class Scaffold extends Widget {
+    constructor({
+        key = null,
+        appBar = null,
+        body = null,
+        floatingActionButton = null,
+        floatingActionButtonLocation = FloatingActionButtonLocation.endFloat,
+        drawer = null,
+        endDrawer = null,
+        bottomNavigationBar = null,
+        backgroundColor = null,
+        drawerScrimColor = null,
+        resizeToAvoidBottomInset = true,
+        extendBody = false,
+        extendBodyBehindAppBar = false,
+        primary = true
+    } = {}) {
+        super(key);
+
+        this.appBar = appBar;
+        this.body = body;
+        this.floatingActionButton = floatingActionButton;
+        this.floatingActionButtonLocation = floatingActionButtonLocation;
+        this.drawer = drawer;
+        this.endDrawer = endDrawer;
+        this.bottomNavigationBar = bottomNavigationBar;
+        if (backgroundColor) {
+        this.backgroundColor = backgroundColor;
+        } else {
+            // Will be resolved in build/element, but strictly it's passed as null usually
+            // If we need a default here for some reason:
+            this.backgroundColor = null;
+        }
+        this.resizeToAvoidBottomInset = resizeToAvoidBottomInset;
+        this.extendBody = extendBody;
+        this.extendBodyBehindAppBar = extendBodyBehindAppBar;
+        this.primary = primary;
+    }
+
+    /**
+     * Get scaffold state from context
+     */
+    static of(context) {
+        // Unwrap BuildContext if needed
+        let current = context.element || context;
+
+        while (current) {
+            if (current instanceof ScaffoldState) {
+                return current;
+            }
+            // Check if element is the state (redundant if context is element, but safe)
+            if (current.element instanceof ScaffoldState) {
+                return current.element;
+            }
+            current = current.parent;
+        }
+
+        throw new Error('Scaffold.of() called with a context that does not contain a Scaffold');
+    }
+
+    /**
+     * Maybe get scaffold state
+     */
+    static maybeOf(context) {
+        let current = context?.element || context;
+        while (current) {
+            if (current instanceof ScaffoldState) {
+                return current;
+            }
+            if (current.element instanceof ScaffoldState) {
+                return current.element;
+            }
+            current = current.parent;
+        }
+        return null;
+    }
+
+    build(context) {
+        const theme = Theme.of(context);
+        // Initialize child elements cache if not exists
+        if (!context._childElements) {
+            context._childElements = {};
+        }
+
+        const buildChild = (widget, slot) => {
+            if (!widget) {
+                if (context._childElements[slot]) {
+                    // Cleanup removed child if needed (unmount?)
+                    // context._childElements[slot].unmount(); // If unmount exists
+                    delete context._childElements[slot];
+                }
+                return null;
+            }
+
+            let childElement = context._childElements[slot];
+
+            if (!childElement) {
+                // New child
+                childElement = widget.createElement(context, context.runtime);
+                childElement.mount(context);
+                context._childElements[slot] = childElement;
+            } else {
+                // Update existing
+                if (childElement.update) {
+                    childElement.update(widget);
+                } else {
+                    // Fallback replace
+                    childElement = widget.createElement(context, context.runtime);
+                    childElement.mount(context);
+                    context._childElements[slot] = childElement;
+                }
+            }
+
+            return childElement.performRebuild();
+        };
+
+        const elementId = context.getElementId();
+
+        // Layout Dimensions
+        const appBarHeight = this.appBar ? (this.appBar.toolbarHeight || 56) : 0;
+        const bottomNavHeight = this.bottomNavigationBar ? 56 : 0; // approximate
+
+        // Build Children VNodes (caching elements)
+        const appBarVNode = buildChild(this.appBar, 'appBar');
+        const bodyVNode = buildChild(this.body, 'body');
+        const fabVNode = buildChild(this.floatingActionButton, 'fab');
+        const bottomNavVNode = buildChild(this.bottomNavigationBar, 'bottomNav');
+        const drawerVNode = buildChild(this.drawer, 'drawer');
+        const endDrawerVNode = buildChild(this.endDrawer, 'endDrawer');
+
+        // SnackBar is special, handled by state
+        const currentSnackBar = context._currentSnackBar;
+        const snackBarVNode = currentSnackBar ? buildChild(currentSnackBar.widget, 'snackBar') : null;
+        if (!currentSnackBar && context._childElements['snackBar']) {
+            delete context._childElements['snackBar'];
+        }
+
+
+        // --- STYLES ---
+
+        // Main Scaffold Container
+        const scaffoldBackgroundColor = this.backgroundColor || theme.scaffoldBackgroundColor || theme.colorScheme.background;
+
+        const scaffoldStyle = {
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            height: '100%',
+            minHeight: '100vh', // Force full viewport height
+            backgroundColor: scaffoldBackgroundColor,
+            position: 'relative',
+            overflow: 'hidden'
+        };
+
+        const isExtendedBody = this.extendBody;
+        const isExtendedAppBar = this.extendBodyBehindAppBar;
+
+        // AppBar Container
+        const appBarStyle = {
+            position: isExtendedAppBar ? 'absolute' : 'relative',
+            top: 0,
+            left: 0,
+            right: 0,
+            height: `${appBarHeight}px`,
+            zIndex: 10,
+            flex: '0 0 auto' // Don't shrink/grow
+        };
+
+        // BottomNav Container
+        const bottomNavStyle = {
+            position: isExtendedBody ? 'absolute' : 'relative',
+            bottom: isExtendedBody ? 0 : 'auto',
+            left: 0,
+            right: 0,
+            height: `${bottomNavHeight}px`,
+            zIndex: 10,
+            flex: '0 0 auto'
+        };
+
+        // Body Container - ✅ Use flex with constraints for proper layout
+        const bodyStyle = {
+            flex: '1 1 0', // Take remaining space, but can shrink to 0
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            minHeight: 0, // Critical: allows flex child to shrink and enable scrolling
+            maxHeight: '100%', // Don't exceed available space
+            boxSizing: 'border-box',
+            position: 'relative',
+            overflow: 'hidden', // Let child (SingleChildScrollView) handle scrolling
+            // Only add padding if extended (since they are absolute in that case)
+            paddingTop: isExtendedAppBar ? `${appBarHeight}px` : 0,
+            paddingBottom: isExtendedBody ? `${bottomNavHeight}px` : 0
+        };
+
+        // FAB Container
+        const fabStyle = this._getFabContainerStyle();
+
+        // Drawer Scrim
+        const isDrawerOpen = context.isDrawerOpen;
+        const isEndDrawerOpen = context.isEndDrawerOpen;
+
+        const scrimStyle = {
+            position: 'absolute',
+            top: 0, left: 0, right: 0, bottom: 0,
+            backgroundColor: this.drawerScrimColor || 'rgba(0,0,0,0.5)',
+            zIndex: 20,
+            display: (isDrawerOpen || isEndDrawerOpen) ? 'block' : 'none',
+            opacity: (isDrawerOpen || isEndDrawerOpen) ? 1 : 0,
+            transition: 'opacity 0.2s',
+        };
+
+        // Drawer Container
+        const drawerStyle = {
+            position: 'absolute',
+            top: 0, bottom: 0, left: 0,
+            width: '304px',
+            backgroundColor: this.backgroundColor || theme.scaffoldBackgroundColor || theme.colorScheme.background,
+            zIndex: 25,
+            transform: isDrawerOpen ? 'translateX(0)' : 'translateX(-100%)',
+            transition: 'transform 0.25s ease-in-out',
+            // Shadow moved to Drawer widget usually, but Scaffold often provides the elevation for the slide-out
+            // If the user passes a raw Container, they might expect Scaffolding to handle shadow
+            boxShadow: isDrawerOpen ? '0 8px 10px -5px rgba(0,0,0,0.2), 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12)' : 'none'
+        };
+
+        // End Drawer Container
+        const endDrawerStyle = {
+            position: 'absolute',
+            top: 0, bottom: 0, right: 0,
+            width: '304px',
+            backgroundColor: theme.colorScheme.surface,
+            zIndex: 25,
+            transform: isEndDrawerOpen ? 'translateX(0)' : 'translateX(100%)',
+            transition: 'transform 0.25s ease-in-out',
+            boxShadow: isEndDrawerOpen ? '-8px 0 10px -5px rgba(0,0,0,0.2)' : 'none'
+        };
+
+        // --- VDOM ASSEMBLY ---
+
+        // We need to order them correctly for Flex column:
+        // [AppBar, Body, BottomNav]
+        // But if they are absolute, order doesn't impact flow, just Z-index (which is handled by style zIndex)
+        // However, standard flow is best.
+
+        const children = [];
+
+        // 1. App Bar (if not bottom or if extended behind)
+        // Actually for Flex Column Layout: AppBar -> Body -> BottomNav
+        // If absolute, it ignores flow.
+
+        if (appBarVNode) {
+            children.push(new VNode({
+                tag: 'div',
+                props: { className: 'fjs-scaffold-appbar', style: appBarStyle },
+                children: [appBarVNode]
+            }));
+        }
+
+        // 2. Body
+        if (bodyVNode) {
+            children.push(new VNode({
+                tag: 'div',
+                props: { className: 'fjs-scaffold-body', style: bodyStyle },
+                children: [bodyVNode]
+            }));
+        }
+
+        // 3. BottomNavBar
+        if (bottomNavVNode) {
+            children.push(new VNode({
+                tag: 'div',
+                props: { className: 'fjs-scaffold-bottom-nav', style: bottomNavStyle },
+                children: [bottomNavVNode]
+            }));
+        }
+
+        // 4. FAB (Overlay)
+        if (fabVNode) {
+            children.push(new VNode({
+                tag: 'div',
+                props: { className: 'fjs-scaffold-fab', style: fabStyle },
+                children: [fabVNode]
+            }));
+        }
+
+        // 5. Drawer Scrim (Overlay)
+        children.push(new VNode({
+            tag: 'div',
+            props: {
+                className: 'fjs-scaffold-scrim',
+                style: scrimStyle,
+                onClick: () => {
+                    if (isDrawerOpen) context.closeDrawer();
+                    if (isEndDrawerOpen) context.closeEndDrawer();
+                }
+            }
+        }));
+
+        // 6. Drawers (Overlay)
+        if (drawerVNode) {
+            children.push(new VNode({
+                tag: 'div',
+                props: { className: 'fjs-scaffold-drawer', style: drawerStyle },
+                children: [drawerVNode]
+            }));
+        }
+
+        if (endDrawerVNode) {
+            children.push(new VNode({
+                tag: 'div',
+                props: { className: 'fjs-scaffold-end-drawer', style: endDrawerStyle },
+                children: [endDrawerVNode]
+            }));
+        }
+
+        // 7. Snacks
+        if (snackBarVNode) {
+            children.push(new VNode({
+                tag: 'div',
+                props: {
+                    className: 'fjs-scaffold-snackbar-container',
+                    style: {
+                        position: 'absolute',
+                        bottom: this.floatingActionButtonLocation.includes('Float') ? '80px' : '48px',
+                        left: '16px',
+                        zIndex: 30,
+                        animation: 'fjs-snackbar-slide-up 0.3s ease-out'
+                    }
+                },
+                children: [snackBarVNode]
+            }));
+        }
+
+        return new VNode({
+            tag: 'div',
+            props: {
+                style: scaffoldStyle,
+                'data-element-id': elementId,
+                'data-widget': 'Scaffold'
+            },
+            children: children,
+            key: this.key
+        });
+    }
+
+    /**
+     * Get FAB container style based on location
+     * @private
+     */
+    _getFabContainerStyle() {
+        const baseStyle = {
+            position: 'absolute',
+            zIndex: 15, // Above Body/AppBar but below Drawer/Scrim
+            pointerEvents: 'none' // Allow clicks to pass through empty space
+        };
+
+        const spacing = 16;
+        const fabSize = 56; // Standard FAB size
+
+        // Helper to center FAB wrapper
+        const fabWrapperStyle = {
+            pointerEvents: 'auto', // Re-enable clicks
+            display: 'inline-block'
+        };
+
+        // We will just return the position for the container, assuming the child is the FAB itself.
+        // In actual implementation we might wrap the FAB VNode to ensure pointer events etc.
+
+        let pos = {};
+
+        switch (this.floatingActionButtonLocation) {
+            case FloatingActionButtonLocation.endFloat:
+                pos = { bottom: `${spacing}px`, right: `${spacing}px` };
+                break;
+            case FloatingActionButtonLocation.endDocked:
+                // Overlapping bottom bar
+                pos = { bottom: `${28}px`, right: `${spacing}px` }; // 56/2 = 28
+                break;
+            case FloatingActionButtonLocation.startFloat:
+                pos = { bottom: `${spacing}px`, left: `${spacing}px` };
+                break;
+            // ... other cases
+            default:
+                pos = { bottom: `${spacing}px`, right: `${spacing}px` };
+        }
+
+        return { ...baseStyle, ...pos, pointerEvents: 'auto' };
+    }
+
+    createElement(parent, runtime) {
+        return new ScaffoldElement(this, parent, runtime);
+    }
+}
+
+class ScaffoldElement extends ScaffoldState {
+    constructor(widget, parent, runtime) {
+        super(widget, parent, runtime);
+    }
+
+    getElementId() {
+        return this._elementId || (this._elementId = `scaffold-${Date.now()}`);
+    }
+
+    performRebuild() {
+        // Just call widget.build passing THIS (the element) as context
+        return this.widget.build(this);
+    }
+}
+
+export { Scaffold, ScaffoldState, FloatingActionButtonLocation, ScaffoldFeatureController };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/scaffold_messenger.js b/packages/flutterjs_material/flutterjs_material/src/material/scaffold_messenger.js
new file mode 100644
index 00000000..9b74a0f1
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/scaffold_messenger.js
@@ -0,0 +1,113 @@
+import { StatefulWidget, State, InheritedWidget } from '../core/widget_element.js';
+
+class _ScaffoldMessengerScope extends InheritedWidget {
+    constructor({ state, child, key } = {}) {
+        super({ child, key });
+        this.messengerState = state;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.messengerState !== oldWidget.messengerState;
+    }
+}
+
+export class ScaffoldMessenger extends StatefulWidget {
+    constructor({ key, child } = {}) {
+        super(key);
+        this.child = child;
+    }
+
+    createState() {
+        return new ScaffoldMessengerState();
+    }
+
+    /**
+     * Get ScaffoldMessengerState from context
+     * ✅ FIXED: Falls back to finding Scaffold state directly if no ScaffoldMessenger scope exists
+     */
+    static of(context) {
+        // First try to find ScaffoldMessengerScope
+        const scope = context.dependOnInheritedWidgetOfExactType?.(_ScaffoldMessengerScope);
+        if (scope && scope.messengerState) {
+            return scope.messengerState;
+        }
+
+        // ✅ FALLBACK: Find ScaffoldState directly via ancestor traversal
+        // This makes ScaffoldMessenger.of() work even when not wrapped in ScaffoldMessenger
+        const scaffoldState = context.findAncestorStateOfType?.('ScaffoldState');
+        if (scaffoldState && scaffoldState.showSnackBar) {
+            // Return a proxy that delegates to ScaffoldState
+            return {
+                showSnackBar: (snackBar) => scaffoldState.showSnackBar(snackBar),
+                hideCurrentSnackBar: () => scaffoldState.closeSnackBar?.(),
+                removeCurrentSnackBar: () => scaffoldState.closeSnackBar?.(),
+                clearSnackBars: () => scaffoldState.closeSnackBar?.()
+            };
+        }
+
+        // ✅ FALLBACK 2: Search for ScaffoldElement in parent chain
+        let current = context.element?.parent || context.element;
+        while (current) {
+            if (current.showSnackBar && typeof current.showSnackBar === 'function') {
+                return {
+                    showSnackBar: (snackBar) => current.showSnackBar(snackBar),
+                    hideCurrentSnackBar: () => current.closeSnackBar?.(),
+                    removeCurrentSnackBar: () => current.closeSnackBar?.(),
+                    clearSnackBars: () => current.closeSnackBar?.()
+                };
+            }
+            // Also check if it's the ScaffoldElement by its state
+            if (current.state && current.state.showSnackBar && typeof current.state.showSnackBar === 'function') {
+                const state = current.state;
+                return {
+                    showSnackBar: (snackBar) => state.showSnackBar(snackBar),
+                    hideCurrentSnackBar: () => state.closeSnackBar?.(),
+                    removeCurrentSnackBar: () => state.closeSnackBar?.(),
+                    clearSnackBars: () => state.closeSnackBar?.()
+                };
+            }
+            current = current.parent || current._parent;
+        }
+
+        console.warn('ScaffoldMessenger.of() called but no Scaffold found in context');
+        return null;
+    }
+}
+
+export class ScaffoldMessengerState extends State {
+    constructor() {
+        super();
+        this._snackBars = [];
+    }
+
+    showSnackBar(snackBar) {
+        // Try to find Scaffold via context and delegate to it
+        if (this.context) {
+            let current = this.context.element?.parent || this.context.element;
+            while (current) {
+                if (current.showSnackBar && typeof current.showSnackBar === 'function') {
+                    return current.showSnackBar(snackBar);
+                }
+                current = current.parent || current._parent;
+            }
+        }
+
+        // Fallback: Just log for now
+        console.log('ScaffoldMessenger: showSnackBar', snackBar);
+        return {
+            close: () => { console.log('SnackBar close'); }
+        };
+    }
+
+    hideCurrentSnackBar() { }
+    removeCurrentSnackBar() { }
+    clearSnackBars() { }
+
+    build(context) {
+        return new _ScaffoldMessengerScope({
+            state: this,
+            child: this.widget.child
+        });
+    }
+}
+
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/simple_dialog.js b/packages/flutterjs_material/flutterjs_material/src/material/simple_dialog.js
new file mode 100644
index 00000000..0404ccb1
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/simple_dialog.js
@@ -0,0 +1,111 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { Dialog } from './dialog.js';
+import { Theme } from './theme.js';
+import { buildChildWidgets } from '../utils/build_helper.js';
+
+/**
+ * SimpleDialog - Simpler dialog variant
+ */
+class SimpleDialog extends StatelessWidget {
+    constructor({
+        key = null,
+        title = null,
+        titlePadding = null,
+        titleTextStyle = null,
+        children = null,
+        contentPadding = null,
+        backgroundColor = null,
+        elevation = 24.0,
+        shadowColor = null,
+        semanticLabel = null,
+        insetPadding = null,
+        clipBehavior = 'none',
+        shape = null,
+        alignment = null
+    } = {}) {
+        super(key);
+        this.title = title;
+        this.titlePadding = titlePadding || { top: 24, left: 24, right: 24, bottom: 0 };
+        this.titleTextStyle = titleTextStyle;
+        this.children = children || [];
+        this.contentPadding = contentPadding || { top: 16, left: 24, right: 24, bottom: 24 }; // M3 spec closer
+        this.backgroundColor = backgroundColor;
+        this.elevation = elevation;
+        this.shadowColor = shadowColor;
+        this.semanticLabel = semanticLabel;
+        this.insetPadding = insetPadding;
+        this.clipBehavior = clipBehavior;
+        this.shape = shape;
+        this.alignment = alignment;
+    }
+
+    build(context) {
+        const dialogChildren = [];
+
+        // Title
+        if (this.title) {
+            const titleStyle = {
+                padding: `${this.titlePadding.top}px ${this.titlePadding.right}px ${this.titlePadding.bottom}px ${this.titlePadding.left}px`,
+                fontSize: this.titleTextStyle?.fontSize || '24px', // M3 Headline Small
+                fontWeight: this.titleTextStyle?.fontWeight || '400',
+                color: this.titleTextStyle?.color || Theme.of(context).colorScheme.onSurface || '#1C1B1F'
+            };
+
+            dialogChildren.push(
+                new VNode({
+                    tag: 'div',
+                    props: {
+                        className: 'fjs-simple-dialog-title',
+                        style: titleStyle
+                    },
+                    children: [this.title]
+                })
+            );
+        }
+
+        // Content
+        const contentStyle = {
+            padding: `${this.contentPadding.top}px ${this.contentPadding.right}px ${this.contentPadding.bottom}px ${this.contentPadding.left}px`,
+            display: 'flex',
+            flexDirection: 'column'
+        };
+
+        const renderedChildren = buildChildWidgets(this.children, context);
+
+        dialogChildren.push(
+            new VNode({
+                tag: 'div',
+                props: {
+                    className: 'fjs-simple-dialog-content',
+                    style: contentStyle
+                },
+                children: renderedChildren
+            })
+        );
+
+        return new Dialog({
+            backgroundColor: this.backgroundColor,
+            elevation: this.elevation,
+            insetPadding: this.insetPadding,
+            clipBehavior: this.clipBehavior,
+            shape: this.shape,
+            alignment: this.alignment,
+            child: new VNode({
+                tag: 'div',
+                props: {
+                    className: 'fjs-simple-dialog-container',
+                    style: {
+                        display: 'flex',
+                        flexDirection: 'column'
+                    },
+                    'aria-label': this.semanticLabel || (typeof this.title === 'string' ? this.title : undefined),
+                    'data-widget': 'SimpleDialog'
+                },
+                children: dialogChildren
+            })
+        });
+    }
+}
+
+export { SimpleDialog };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/single_child_scroll_view.js b/packages/flutterjs_material/flutterjs_material/src/material/single_child_scroll_view.js
new file mode 100644
index 00000000..96ce3e18
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/single_child_scroll_view.js
@@ -0,0 +1,73 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { Axis } from '../utils/property/axis.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { buildChildWidget } from '../utils/build_helper.js';
+
+export class SingleChildScrollView extends StatelessWidget {
+    constructor({
+        key,
+        scrollDirection = Axis.vertical,
+        reverse = false,
+        padding,
+        primary,
+        physics,
+        controller,
+        child
+    } = {}) {
+        super({ key });
+        this.scrollDirection = scrollDirection;
+        this.reverse = reverse;
+        this.padding = padding;
+        this.primary = primary;
+        this.physics = physics;
+        this.controller = controller;
+        this.child = child;
+    }
+
+    build(context) {
+        let paddingCss = '';
+        if (this.padding) {
+            if (this.padding instanceof EdgeInsets) {
+                paddingCss = `${this.padding.top}px ${this.padding.right}px ${this.padding.bottom}px ${this.padding.left}px`;
+            } else {
+                paddingCss = `${this.padding.top || 0}px ${this.padding.right || 0}px ${this.padding.bottom || 0}px ${this.padding.left || 0}px`;
+            }
+        }
+
+        const isHorizontal = this.scrollDirection === Axis.horizontal;
+
+        // ✅ FIXED: Use flex: 1 instead of height: 100% to work with flex parents
+        // The scroll container should expand to fill available space
+        const style = {
+            overflowX: isHorizontal ? 'auto' : 'hidden',
+            overflowY: isHorizontal ? 'hidden' : 'auto',
+            display: 'flex',
+            flexDirection: isHorizontal ? 'row' : 'column',
+            flex: '1 1 auto',
+            minHeight: 0, // Important for flex children to allow shrinking
+            width: '100%',
+            // Remove height: '100%' - it conflicts with flex and prevents scrolling
+            boxSizing: 'border-box',
+            padding: paddingCss,
+            WebkitOverflowScrolling: 'touch' // Smooth scrolling on iOS
+        };
+
+        // ✅ FIXED: Use buildChildWidget helper instead of manual element creation
+        let childVNode = null;
+        if (this.child) {
+            childVNode = buildChildWidget(this.child, context);
+        }
+
+        return new VNode({
+            tag: 'div',
+            props: {
+                className: 'fjs-single-child-scroll-view',
+                style,
+                'data-widget': 'SingleChildScrollView'
+            },
+            children: childVNode ? [childVNode] : []
+        });
+    }
+}
+
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/slider.js b/packages/flutterjs_material/flutterjs_material/src/material/slider.js
new file mode 100644
index 00000000..b5e6d9a4
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/slider.js
@@ -0,0 +1,82 @@
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { Container } from './container.js';
+import { Colors } from './color.js';
+import { GestureDetector } from './gesture_detector.js';
+import { Theme } from './theme.js';
+
+export class Slider extends StatefulWidget {
+    constructor({
+        key,
+        value,
+        onChanged,
+        onChangeStart,
+        onChangeEnd,
+        min = 0.0,
+        max = 1.0,
+        divisions,
+        label,
+        activeColor,
+        inactiveColor,
+        thumbColor,
+        mouseCursor,
+        semanticFormatterCallback,
+        focusNode,
+        autofocus = false,
+    } = {}) {
+        super(key);
+        this.value = value;
+        this.onChanged = onChanged;
+        this.onChangeStart = onChangeStart;
+        this.onChangeEnd = onChangeEnd;
+        this.min = min;
+        this.max = max;
+        this.divisions = divisions;
+        this.label = label;
+        this.activeColor = activeColor;
+        this.inactiveColor = inactiveColor;
+        this.thumbColor = thumbColor;
+    }
+
+    createState() {
+        return new SliderState();
+    }
+}
+
+class SliderState extends State {
+    build(context) {
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+
+        const activeColor = this.widget.activeColor || theme.sliderTheme?.activeTrackColor || colorScheme.primary || '#6750A4';
+        const inactiveColor = this.widget.inactiveColor || theme.sliderTheme?.inactiveTrackColor || colorScheme.surfaceContainerHighest || '#E6E0E9'; // Used only if we custom style, but HTML range is limited
+        const thumbColor = this.widget.thumbColor || theme.sliderTheme?.thumbColor || activeColor;
+
+        // Simple HTML range input for now
+        // A robust custom implementation would involve LayoutBuilder + GestureDetector + Canvas/Containers
+
+        return new Container({
+            child: {
+                tag: 'input',
+                attrs: {
+                    type: 'range',
+                    min: this.widget.min,
+                    max: this.widget.max,
+                    step: this.widget.divisions ? (this.widget.max - this.widget.min) / this.widget.divisions : 'any',
+                    value: this.widget.value,
+                },
+                style: {
+                    width: '100%',
+                    cursor: 'pointer',
+                    accentColor: activeColor // Standard CSS property for checkbox/radio/range
+                },
+                onInput: (e) => { // onInput fires immediately
+                    const val = parseFloat(e.target.value);
+                    this.widget.onChanged?.(val);
+                },
+                onChange: (e) => { // often fires on commit
+                    // this.widget.onChangeEnd?.(parseFloat(e.target.value));
+                }
+            }
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/slider_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/slider_theme.js
new file mode 100644
index 00000000..f654c122
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/slider_theme.js
@@ -0,0 +1,62 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class SliderThemeData {
+    constructor({
+        trackHeight,
+        activeTrackColor,
+        inactiveTrackColor,
+        disabledActiveTrackColor,
+        disabledInactiveTrackColor,
+        activeTickMarkColor,
+        inactiveTickMarkColor,
+        disabledActiveTickMarkColor,
+        disabledInactiveTickMarkColor,
+        thumbColor,
+        overlappingShapeStrokeColor,
+        disabledThumbColor,
+        overlayColor,
+        valueIndicatorColor,
+        overlayShape,
+        tickMarkShape,
+        thumbShape,
+        trackShape,
+        valueIndicatorShape,
+        rangeTickMarkShape,
+        rangeThumbShape,
+        rangeTrackShape,
+        rangeValueIndicatorShape,
+        showValueIndicator,
+        valueIndicatorTextStyle,
+        minThumbSeparation,
+        thumbSelector,
+        mouseCursor,
+    } = {}) {
+        this.trackHeight = trackHeight;
+        this.activeTrackColor = activeTrackColor;
+        this.inactiveTrackColor = inactiveTrackColor;
+        this.thumbColor = thumbColor;
+        this.overlayColor = overlayColor;
+        // ... assign others
+    }
+}
+
+class SliderTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(SliderTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    SliderTheme,
+    SliderThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/snack_bar.js b/packages/flutterjs_material/flutterjs_material/src/material/snack_bar.js
new file mode 100644
index 00000000..27c4ed15
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/snack_bar.js
@@ -0,0 +1,141 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { buildChildWidget } from '../utils/build_helper.js';
+import { Theme } from './theme.js';
+
+const SnackBarClosedReason = {
+    hide: 'hide',
+    remove: 'remove',
+    timeout: 'timeout',
+    dismiss: 'dismiss'
+};
+
+class SnackBar extends StatelessWidget {
+    constructor({
+        key = null,
+        content = null,
+        backgroundColor = null,
+        elevation = 6,
+        margin = null,
+        padding = null,
+        width = null,
+        shape = null,
+        behavior = 'fixed',
+        action = null,
+        duration = 4000,
+        animation = null,
+        onVisible = null
+    } = {}) {
+        super(key);
+        this.content = content;
+        this.backgroundColor = backgroundColor || '#323232';
+        this.elevation = elevation;
+        this.margin = margin;
+        this.padding = padding;
+        this.width = width;
+        this.shape = shape;
+        this.behavior = behavior;
+        this.action = action;
+        this.duration = duration;
+        this.animation = animation;
+        this.onVisible = onVisible;
+    }
+
+    build(context) {
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+
+        // M3 Defaults: Inverse Surface background
+        const bgColor = this.backgroundColor || colorScheme.inverseSurface || '#313033';
+        const textColor = colorScheme.onInverseSurface || '#F4EFF4';
+
+        const style = {
+            backgroundColor: bgColor,
+            padding: this.padding ? `${this.padding}px` : '14px 16px',
+            borderRadius: '4px',
+            boxShadow: `0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12)`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            flexWrap: 'wrap',
+            gap: '8px',
+            color: textColor, // On Surface Inverse / On Inverse Surface typically
+            fontSize: '14px',
+            lineHeight: '20px',
+            letterSpacing: '0.25px',
+            minWidth: '288px',
+            maxWidth: this.width ? `${this.width}px` : '568px',
+            pointerEvents: 'auto'
+        };
+
+        if (this.margin) {
+            style.margin = `${this.margin}px`;
+        }
+
+        // Build content
+        let contentVNode;
+        if (this.content.build || this.content.createElement) {
+            contentVNode = buildChildWidget(this.content, context);
+        } else {
+            contentVNode = new VNode({ tag: 'span', children: [String(this.content)] });
+        }
+
+        const children = [
+            new VNode({
+                tag: 'div',
+                props: { style: { flex: 1, paddingRight: this.action ? '8px' : '0' } },
+                children: [contentVNode]
+            })
+        ];
+
+        if (this.action) {
+            const actionStyle = {
+                color: this.action.textColor || colorScheme.inversePrimary || '#D0BCFF', // Inverse Primary
+                cursor: 'pointer',
+                border: 'none',
+                background: 'none',
+                padding: '0 8px',
+                margin: '0 -8px 0 0',
+                fontSize: '14px',
+                fontWeight: '500',
+                letterSpacing: '1.25px',
+                textTransform: 'uppercase',
+                outline: 'none'
+            };
+
+            children.push(
+                new VNode({
+                    tag: 'button',
+                    props: {
+                        className: 'fjs-snack-bar-action',
+                        style: actionStyle,
+                        onClick: this.action.onPressed
+                    },
+                    children: [this.action.label]
+                })
+            );
+        }
+
+        return new VNode({
+            tag: 'div',
+            props: {
+                style,
+                'data-widget': 'SnackBar',
+                role: 'alert'
+            },
+            children
+        });
+    }
+}
+
+class SnackBarAction {
+    constructor({ key, label, onPressed, textColor, disabledTextColor } = {}) {
+        this.key = key;
+        this.label = label;
+        this.onPressed = onPressed;
+        this.textColor = textColor;
+        this.disabledTextColor = disabledTextColor;
+    }
+}
+
+export { SnackBar, SnackBarAction, SnackBarClosedReason };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/snack_bar_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/snack_bar_theme.js
new file mode 100644
index 00000000..35167e93
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/snack_bar_theme.js
@@ -0,0 +1,56 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class SnackBarThemeData {
+    constructor({
+        backgroundColor,
+        actionTextColor,
+        disabledActionTextColor,
+        contentTextStyle,
+        elevation,
+        shape,
+        behavior,
+        width,
+        insetPadding,
+        showCloseIcon,
+        closeIconColor,
+        actionOverflowThreshold,
+        actionBackgroundColor,
+        disabledActionBackgroundColor,
+    } = {}) {
+        this.backgroundColor = backgroundColor;
+        this.actionTextColor = actionTextColor;
+        this.disabledActionTextColor = disabledActionTextColor;
+        this.contentTextStyle = contentTextStyle;
+        this.elevation = elevation;
+        this.shape = shape;
+        this.behavior = behavior;
+        this.width = width;
+        this.insetPadding = insetPadding;
+        this.showCloseIcon = showCloseIcon;
+        this.closeIconColor = closeIconColor;
+        this.actionOverflowThreshold = actionOverflowThreshold;
+        this.actionBackgroundColor = actionBackgroundColor;
+        this.disabledActionBackgroundColor = disabledActionBackgroundColor;
+    }
+}
+
+class SnackBarTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(SnackBarTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    SnackBarTheme,
+    SnackBarThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/switch.js b/packages/flutterjs_material/flutterjs_material/src/material/switch.js
new file mode 100644
index 00000000..2515c576
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/switch.js
@@ -0,0 +1,346 @@
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { SwitchThemeData } from '../utils/switch_theme.js';
+import { Color } from '../utils/color.js';
+import { Theme } from './theme.js';
+
+/**
+ * Switch - Material Design switch widget (toggle control)
+ */
+class Switch extends StatefulWidget {
+    constructor({
+        key = null,
+        value = false,
+        onChanged = null,
+        activeColor = null,
+        activeTrackColor = null,
+        inactiveThumbColor = null,
+        inactiveTrackColor = null,
+        activeThumbImage = null,
+        inactiveThumbImage = null,
+        thumbColor = null,
+        trackColor = null,
+        materialTapTargetSize = 'padded',
+        dragStartBehavior = 'start',
+        mouseCursor = null,
+        focusColor = null,
+        hoverColor = null,
+        overlayColor = null,
+        splashRadius = null,
+        focusNode = null,
+        autofocus = false
+    } = {}) {
+        super(key);
+        this.value = value;
+        this.onChanged = onChanged;
+        this.activeColor = activeColor;
+        this.activeTrackColor = activeTrackColor;
+        this.inactiveThumbColor = inactiveThumbColor;
+        this.inactiveTrackColor = inactiveTrackColor;
+        this.activeThumbImage = activeThumbImage;
+        this.inactiveThumbImage = inactiveThumbImage;
+        this.thumbColor = thumbColor;
+        this.trackColor = trackColor;
+        this.materialTapTargetSize = materialTapTargetSize;
+        this.dragStartBehavior = dragStartBehavior;
+        this.mouseCursor = mouseCursor;
+        this.focusColor = focusColor;
+        this.hoverColor = hoverColor;
+        this.overlayColor = overlayColor;
+        this.splashRadius = splashRadius;
+        this.focusNode = focusNode;
+        this.autofocus = autofocus;
+    }
+
+    createState() {
+        return new SwitchState();
+    }
+}
+
+/**
+ * SwitchState - State management for Switch
+ */
+class SwitchState extends State {
+    constructor() {
+        super();
+        this.isHovered = false;
+        this.isFocused = false;
+        this.isPressed = false;
+        this.isDragging = false;
+    }
+
+    _handleClick(event) {
+        event.stopPropagation();
+
+        if (this.widget.onChanged == null) return;
+
+        this.widget.onChanged(!this.widget.value);
+    }
+
+    _handleMouseEnter() {
+        this.setState(() => {
+            this.isHovered = true;
+        });
+    }
+
+    _handleMouseLeave() {
+        this.setState(() => {
+            this.isHovered = false;
+            this.isPressed = false;
+        });
+    }
+
+    _handleMouseDown() {
+        this.setState(() => {
+            this.isPressed = true;
+        });
+    }
+
+    _handleMouseUp() {
+        this.setState(() => {
+            this.isPressed = false;
+        });
+    }
+
+    _handleFocus() {
+        this.setState(() => {
+            this.isFocused = true;
+        });
+    }
+
+    _handleBlur() {
+        this.setState(() => {
+            this.isFocused = false;
+        });
+    }
+
+    build(context) {
+        const isDisabled = this.widget.onChanged == null;
+        const isActive = this.widget.value;
+
+        const elementId = context.element.getElementId();
+        const widgetPath = context.element.getWidgetPath();
+
+        // Get theme
+        const theme = context.switchTheme || new SwitchThemeData();
+        const appTheme = Theme.of(context);
+        const colorScheme = appTheme.colorScheme;
+
+        // Determine colors using theme
+        const thumbColor = this._getThumbColor(isActive, isDisabled, theme, colorScheme);
+        const trackColor = this._getTrackColor(isActive, isDisabled, theme, colorScheme);
+
+        // Container styles (includes hit area)
+        const containerStyles = {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '59px', // Material spec: 51px track + 4px padding on each side
+            height: `${theme.getSwitchSize()}px`,
+            cursor: isDisabled ? 'default' : (this.widget.mouseCursor || theme.mouseCursor || 'pointer'),
+            position: 'relative'
+        };
+
+        // Track styles
+        const trackStyles = {
+            width: '51px',
+            height: `${theme.trackHeight}px`,
+            borderRadius: `${theme.trackHeight / 2}px`,
+            backgroundColor: trackColor,
+            position: 'relative',
+            transition: `background-color ${theme.animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+            opacity: isDisabled ? 0.38 : 1
+        };
+
+        // Thumb container (moves left/right)
+        const thumbContainerStyles = {
+            position: 'absolute',
+            left: isActive ? '27px' : '4px', // Slides between left and right
+            top: '50%',
+            transform: 'translateY(-50%)',
+            transition: `left ${theme.animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        };
+
+        // Thumb styles
+        const thumbStyles = {
+            width: '20px',
+            height: '20px',
+            borderRadius: '50%',
+            backgroundColor: thumbColor,
+            boxShadow: isActive
+                ? '0 2px 4px rgba(0,0,0,0.2), 0 1px 10px rgba(0,0,0,0.12)'
+                : '0 1px 3px rgba(0,0,0,0.2), 0 1px 8px rgba(0,0,0,0.12)',
+            transition: `all ${theme.animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+            position: 'relative',
+            zIndex: 2
+        };
+
+        // Ripple/overlay effect
+        const overlayStyles = {
+            position: 'absolute',
+            width: '40px',
+            height: '40px',
+            borderRadius: '50%',
+            backgroundColor: this._getOverlayColor(isDisabled, isActive, theme, colorScheme),
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            transition: 'background-color 0.15s ease',
+            zIndex: 1
+        };
+
+        const events = {
+            click: (e) => this._handleClick(e),
+            mouseenter: () => this._handleMouseEnter(),
+            mouseleave: () => this._handleMouseLeave(),
+            mousedown: () => this._handleMouseDown(),
+            mouseup: () => this._handleMouseUp(),
+            focus: () => this._handleFocus(),
+            blur: () => this._handleBlur()
+        };
+
+        const containerProps = {
+            className: 'fjs-switch-container',
+            style: containerStyles,
+            tabIndex: isDisabled ? -1 : 0,
+            role: 'switch',
+            'aria-checked': isActive,
+            'aria-disabled': isDisabled,
+            'data-element-id': elementId,
+            'data-widget-path': widgetPath,
+            'data-widget': 'Switch',
+            'data-active': isActive,
+            'data-disabled': isDisabled
+        };
+
+        // Build thumb with optional overlay
+        const thumbChildren = [];
+
+        // Overlay (ripple effect)
+        const overlay = new VNode({
+            tag: 'div',
+            props: {
+                className: 'fjs-switch-overlay',
+                style: overlayStyles
+            }
+        });
+        thumbChildren.push(overlay);
+
+        // Thumb
+        const thumb = new VNode({
+            tag: 'div',
+            props: {
+                className: 'fjs-switch-thumb',
+                style: thumbStyles
+            }
+        });
+        thumbChildren.push(thumb);
+
+        const thumbContainer = new VNode({
+            tag: 'div',
+            props: {
+                className: 'fjs-switch-thumb-container',
+                style: thumbContainerStyles
+            },
+            children: thumbChildren
+        });
+
+        const track = new VNode({
+            tag: 'div',
+            props: {
+                className: 'fjs-switch-track',
+                style: trackStyles
+            },
+            children: [thumbContainer]
+        });
+
+        return new VNode({
+            tag: 'div',
+            props: containerProps,
+            children: [track],
+            events,
+            key: this.widget.key
+        });
+    }
+
+    _getThumbColor(isActive, isDisabled, theme, colorScheme) {
+        if (this.widget.thumbColor) {
+            return new Color(this.widget.thumbColor).toCSSString();
+        }
+
+        if (isDisabled) {
+            return new Color(colorScheme.onSurface).withOpacity(0.38).toCSSString();
+        }
+
+        if (this.widget.activeColor && isActive) {
+            return new Color(this.widget.activeColor).toCSSString();
+        }
+
+        if (this.widget.inactiveThumbColor && !isActive) {
+            return new Color(this.widget.inactiveThumbColor).toCSSString();
+        }
+
+        // Use theme defaults
+        if (isActive) {
+            return theme.thumbColor || colorScheme.onPrimary; // M3 Active Thumb
+        }
+
+        return theme.thumbColor || colorScheme.outline; // M3 Inactive Thumb
+    }
+
+    _getTrackColor(isActive, isDisabled, theme, colorScheme) {
+        if (this.widget.trackColor) {
+            return new Color(this.widget.trackColor).toCSSString();
+        }
+
+        if (isDisabled) {
+            return new Color(colorScheme.onSurface).withOpacity(0.12).toCSSString();
+        }
+
+        if (this.widget.activeTrackColor && isActive) {
+            return new Color(this.widget.activeTrackColor).toCSSString();
+        }
+
+        if (this.widget.inactiveTrackColor && !isActive) {
+            return new Color(this.widget.inactiveTrackColor).toCSSString();
+        }
+
+        // Use theme defaults
+        if (isActive) {
+            return theme.trackColor || colorScheme.primary; // M3 Active Track
+        }
+
+        return theme.trackColor || colorScheme.surfaceContainerHighest; // M3 Inactive Track
+    }
+
+    _getOverlayColor(isDisabled, isActive, theme, colorScheme) {
+        if (isDisabled) {
+            return 'transparent';
+        }
+
+        if (this.widget.overlayColor && this.isPressed) {
+            return new Color(this.widget.overlayColor).withOpacity(0.24).toCSSString();
+        }
+
+        if (this.widget.focusColor && this.isFocused) {
+            return new Color(this.widget.focusColor).withOpacity(0.12).toCSSString();
+        }
+
+        if (this.widget.hoverColor && this.isHovered) {
+            return new Color(this.widget.hoverColor).withOpacity(0.08).toCSSString();
+        }
+
+        // Use theme or default colors
+        const baseColor = isActive ? (colorScheme.primary || '#2196f3') : (colorScheme.onSurface || '#616161');
+        const alpha = this.isPressed ? 0.24 : (this.isFocused ? 0.12 : (this.isHovered ? 0.08 : 0));
+
+        if (alpha === 0) return 'transparent';
+
+        return new Color(baseColor).withOpacity(alpha).toCSSString();
+    }
+}
+
+export { Switch, SwitchState };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/switch_list_tile.js b/packages/flutterjs_material/flutterjs_material/src/material/switch_list_tile.js
new file mode 100644
index 00000000..20192e82
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/switch_list_tile.js
@@ -0,0 +1,99 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { Switch } from './switch.js';
+import { ListTile } from './list_tile.js';
+
+/**
+ * SwitchListTile - A ListTile with a Switch
+ */
+class SwitchListTile extends StatelessWidget {
+    constructor({
+        key = null,
+        value = false,
+        onChanged = null,
+        activeColor = null,
+        activeTrackColor = null,
+        inactiveThumbColor = null,
+        inactiveTrackColor = null,
+        title = null,
+        subtitle = null,
+        isThreeLine = false,
+        dense = false,
+        secondary = null,
+        selected = false,
+        controlAffinity = 'trailing', // 'leading', 'trailing', 'platform'
+        autofocus = false,
+        shape = null,
+        selectedTileColor = null,
+        tileColor = null,
+        visualDensity = null,
+        focusNode = null,
+        enableFeedback = null,
+        contentPadding = null
+    } = {}) {
+        super(key);
+        this.value = value;
+        this.onChanged = onChanged;
+        this.activeColor = activeColor;
+        this.activeTrackColor = activeTrackColor;
+        this.inactiveThumbColor = inactiveThumbColor;
+        this.inactiveTrackColor = inactiveTrackColor;
+        this.title = title;
+        this.subtitle = subtitle;
+        this.isThreeLine = isThreeLine;
+        this.dense = dense;
+        this.secondary = secondary;
+        this.selected = selected;
+        this.controlAffinity = controlAffinity;
+        this.autofocus = autofocus;
+        this.shape = shape;
+        this.selectedTileColor = selectedTileColor;
+        this.tileColor = tileColor;
+        this.visualDensity = visualDensity;
+        this.focusNode = focusNode;
+        this.enableFeedback = enableFeedback;
+        this.contentPadding = contentPadding;
+    }
+
+    build(context) {
+        const switchWidget = new Switch({
+            value: this.value,
+            onChanged: this.onChanged,
+            activeColor: this.activeColor,
+            activeTrackColor: this.activeTrackColor,
+            inactiveThumbColor: this.inactiveThumbColor,
+            inactiveTrackColor: this.inactiveTrackColor,
+            autofocus: this.autofocus
+        });
+
+        let leading, trailing;
+        if (this.controlAffinity === 'leading') {
+            leading = switchWidget;
+            trailing = this.secondary;
+        } else {
+            leading = this.secondary;
+            trailing = switchWidget;
+        }
+
+        return new ListTile({
+            leading,
+            title: this.title,
+            subtitle: this.subtitle,
+            trailing,
+            isThreeLine: this.isThreeLine,
+            dense: this.dense,
+            enabled: this.onChanged != null,
+            onTap: this.onChanged ? () => this.onChanged(!this.value) : null,
+            selected: this.selected,
+            autofocus: this.autofocus,
+            contentPadding: this.contentPadding,
+            shape: this.shape,
+            selectedTileColor: this.selectedTileColor,
+            tileColor: this.tileColor,
+            visualDensity: this.visualDensity,
+            focusNode: this.focusNode,
+            enableFeedback: this.enableFeedback
+        });
+    }
+}
+
+export { SwitchListTile };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/switch_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/switch_theme.js
new file mode 100644
index 00000000..23f6f49d
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/switch_theme.js
@@ -0,0 +1,46 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class SwitchThemeData {
+    constructor({
+        thumbColor,
+        trackColor,
+        trackOutlineColor,
+        trackOutlineWidth,
+        materialTapTargetSize,
+        mouseCursor,
+        overlayColor,
+        splashRadius,
+        thumbIcon,
+    } = {}) {
+        this.thumbColor = thumbColor;
+        this.trackColor = trackColor;
+        this.trackOutlineColor = trackOutlineColor;
+        this.trackOutlineWidth = trackOutlineWidth;
+        this.materialTapTargetSize = materialTapTargetSize;
+        this.mouseCursor = mouseCursor;
+        this.overlayColor = overlayColor;
+        this.splashRadius = splashRadius;
+        this.thumbIcon = thumbIcon;
+    }
+}
+
+class SwitchTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(SwitchTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    SwitchTheme,
+    SwitchThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/tab_bar.js b/packages/flutterjs_material/flutterjs_material/src/material/tab_bar.js
new file mode 100644
index 00000000..9a8eba05
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/tab_bar.js
@@ -0,0 +1,146 @@
+import { StatefulWidget, StatelessWidget, State } from '../core/widget_element.js';
+import { Container } from './container.js';
+import { Row, Expanded, Column } from '../widgets/widgets.js';
+import { GestureDetector } from './gesture_detector.js';
+import { TabController, DefaultTabController } from './tab_controller.js';
+import { TabBarTheme } from './tab_bar_theme.js';
+import { Theme } from './theme.js';
+import { Colors } from './color.js';
+
+export class Tab extends StatelessWidget {
+    constructor({
+        key,
+        text,
+        icon,
+        iconMargin,
+        height,
+        child,
+    } = {}) {
+        super(key);
+        this.text = text;
+        this.icon = icon;
+        this.iconMargin = iconMargin;
+        this.height = height;
+        this.child = child;
+    }
+
+    build(context) {
+        // Return structured Container/Column
+        return new Container({
+            height: this.height || 46.0,
+            alignment: 'center',
+            child: new Column({
+                mainAxisAlignment: 'center',
+                children: [
+                    this.icon,
+                    this.text // Should be Text widget
+                ].filter(Boolean)
+            })
+        });
+    }
+}
+
+export class TabBar extends StatefulWidget {
+    constructor({
+        key,
+        tabs,
+        controller,
+        isScrollable = false,
+        padding,
+        indicatorColor,
+        automaticIndicatorColorAdjustment = true,
+        indicatorWeight = 2.0,
+        indicatorPadding,
+        indicator,
+        indicatorSize,
+        dividerColor,
+        dividerHeight,
+        labelColor,
+        labelStyle,
+        labelPadding,
+        unselectedLabelColor,
+        unselectedLabelStyle,
+        dragStartBehavior,
+        overlayColor,
+        mouseCursor,
+        enableFeedback,
+        onTap,
+        physics,
+        splashFactory,
+        splashBorderRadius,
+        tabAlignment,
+    } = {}) {
+        super(key);
+        this.tabs = tabs;
+        this.controller = controller;
+        this.isScrollable = isScrollable;
+        this.indicatorColor = indicatorColor;
+        this.labelColor = labelColor;
+        this.unselectedLabelColor = unselectedLabelColor;
+        this.onTap = onTap;
+    }
+
+    createState() {
+        return new TabBarState();
+    }
+}
+
+class TabBarState extends State {
+
+    get _controller() {
+        return this.widget.controller || DefaultTabController.of(this.context);
+    }
+
+    _handleTap(index) {
+        this._controller?.animateTo(index);
+        this.widget.onTap?.(index);
+        // Force rebuild to update selection UI if not reacting to listener
+        this.setState(() => { });
+    }
+
+    initState() {
+        if (this._controller) {
+            this._controller.addListener(() => {
+                this.setState(() => { });
+            });
+        }
+    }
+
+    build(context) {
+        const theme = TabBarTheme.of(context) || {};
+        const appTheme = Theme.of(context);
+        const colorScheme = appTheme.colorScheme;
+
+        const activeColor = this.widget.labelColor || theme.labelColor || colorScheme.primary || '#6750A4';
+        const inactiveColor = this.widget.unselectedLabelColor || theme.unselectedLabelColor || colorScheme.onSurfaceVariant || '#49454F';
+        const indicatorColor = this.widget.indicatorColor || theme.indicatorColor || activeColor;
+
+        const currentIndex = this._controller?.index || 0;
+
+        return new Row({
+            // If scrollable need ListView or SingleChildScrollView, for now basic Row with Expanded
+            children: this.widget.tabs.map((tab, index) => {
+                const isSelected = index === currentIndex;
+
+                // Indicator logic (bottom border)
+                const decoration = isSelected ? {
+                    borderBottom: `2px solid ${indicatorColor}`
+                } : null;
+
+                // Color logic for child text/icon would normally be done via DefaultTextStyle/IconTheme
+                // Simplified here:
+
+                return new Expanded({
+                    child: new GestureDetector({
+                        onTap: () => this._handleTap(index),
+                        child: new Container({
+                            decoration: decoration, // Indicator
+                            child: tab // The Tab widget
+                            // We should probably inject color styles here into the Tab
+                        })
+                    })
+                });
+            })
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/tab_bar_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/tab_bar_theme.js
new file mode 100644
index 00000000..b8b361c5
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/tab_bar_theme.js
@@ -0,0 +1,54 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class TabBarThemeData {
+    constructor({
+        indicator,
+        indicatorColor,
+        indicatorSize,
+        dividerColor,
+        dividerHeight,
+        labelColor,
+        labelPadding,
+        labelStyle,
+        unselectedLabelColor,
+        unselectedLabelStyle,
+        overlayColor,
+        splashFactory,
+        mouseCursor,
+    } = {}) {
+        this.indicator = indicator;
+        this.indicatorColor = indicatorColor;
+        this.indicatorSize = indicatorSize;
+        this.dividerColor = dividerColor;
+        this.dividerHeight = dividerHeight;
+        this.labelColor = labelColor;
+        this.labelPadding = labelPadding;
+        this.labelStyle = labelStyle;
+        this.unselectedLabelColor = unselectedLabelColor;
+        this.unselectedLabelStyle = unselectedLabelStyle;
+        this.overlayColor = overlayColor;
+        this.splashFactory = splashFactory;
+        this.mouseCursor = mouseCursor;
+    }
+}
+
+class TabBarTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(TabBarTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    TabBarTheme,
+    TabBarThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/tab_controller.js b/packages/flutterjs_material/flutterjs_material/src/material/tab_controller.js
new file mode 100644
index 00000000..a18e4538
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/tab_controller.js
@@ -0,0 +1,87 @@
+import { StatefulWidget, InheritedWidget ,State} from '../core/widget_element.js';
+
+class TabController {
+    constructor({ initialIndex = 0, length, vsync } = {}) {
+        this.index = initialIndex;
+        this.length = length;
+        this._listeners = [];
+        // AnimationController would be initialized here with vsync
+    }
+
+    addListener(listener) {
+        this._listeners.push(listener);
+    }
+
+    removeListener(listener) {
+        this._listeners = this._listeners.filter(l => l !== listener);
+    }
+
+    animateTo(index, { duration, curve } = {}) {
+        this.index = index;
+        this._notifyListeners();
+    }
+
+    _notifyListeners() {
+        this._listeners.forEach(l => l());
+    }
+
+    dispose() {
+        this._listeners = [];
+    }
+}
+
+class DefaultTabController extends StatefulWidget {
+    constructor({ key, length, initialIndex = 0, child } = {}) {
+        super(key);
+        this.length = length;
+        this.initialIndex = initialIndex;
+        this.child = child;
+    }
+
+    createState() {
+        return new DefaultTabControllerState();
+    }
+
+    static of(context) {
+        const scope = context.dependOnInheritedWidgetOfExactType(_TabControllerScope);
+        return scope ? scope.controller : null;
+    }
+}
+
+class DefaultTabControllerState extends State {
+    initState() {
+        super.initState();
+        this.controller = new TabController({
+            length: this.widget.length,
+            initialIndex: this.widget.initialIndex
+        });
+    }
+
+    dispose() {
+        this.controller.dispose();
+        super.dispose();
+    }
+
+    build(context) {
+        return new _TabControllerScope({
+            controller: this.controller,
+            child: this.widget.child
+        });
+    }
+}
+
+class _TabControllerScope extends InheritedWidget {
+    constructor({ controller, child, key } = {}) {
+        super({ child, key });
+        this.controller = controller;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.controller !== oldWidget.controller;
+    }
+}
+
+export {
+    TabController,
+    DefaultTabController
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/text.js b/packages/flutterjs_material/flutterjs_material/src/material/text.js
new file mode 100644
index 00000000..8da6f259
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/text.js
@@ -0,0 +1,176 @@
+import { StatelessWidget } from '../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { TextAlign, TextOverflow, TextDirection } from '../utils/utils.js';
+import { TextStyle } from '../painting/text_style.js';
+import { Theme } from './theme.js';
+
+
+/**
+ * Text - StatelessWidget for rendering text with comprehensive styling
+ * Supports selection, overflow handling, max lines, and text alignment
+ */
+class Text extends StatelessWidget {
+  constructor(dataOrOptions, options = {}) {
+    let _data = '';
+    let _opts = {};
+
+    if (typeof dataOrOptions === 'string') {
+      _data = dataOrOptions;
+      _opts = options;
+    } else {
+      _opts = dataOrOptions || {};
+      _data = _opts.data || '';
+    }
+
+    const {
+      key = null,
+      style = new TextStyle(),
+      textAlign = TextAlign.left,
+      textDirection = TextDirection.ltr,
+      overflow = TextOverflow.clip,
+      maxLines = null,
+      softWrap = true,
+      semanticsLabel = null,
+      selectable = true,
+      selectionColor = null,
+      onSelectionChanged = null
+    } = _opts;
+
+    super(key);
+    this.data = _data;
+    this.style = style instanceof TextStyle ? style : new TextStyle(style);
+    this.textAlign = textAlign;
+    this.textDirection = textDirection;
+    this.overflow = overflow;
+    this.maxLines = maxLines;
+    this.softWrap = softWrap;
+    this.semanticsLabel = semanticsLabel;
+    this.selectable = selectable;
+    this.selectionColor = selectionColor;
+    this.onSelectionChanged = onSelectionChanged;
+  }
+
+  build(context) {
+    const inlineStyles = this._getInlineStyles();
+    const elementId = context.element.getElementId();
+    const widgetPath = context.element.getWidgetPath();
+
+    const props = {
+      // className: 'fjs-text',
+      style: inlineStyles,
+      'data-element-id': elementId,
+      'data-widget-path': widgetPath,
+      'data-identification': context.element.getIdentificationStrategy(),
+      'data-widget': 'Text',
+      'data-text-align': this.textAlign,
+      'data-overflow': this.overflow,
+      'data-max-lines': this.maxLines,
+      title: this.semanticsLabel || this.data
+    };
+
+    if (this.selectable) {
+      props.className += ' fjs-text-selectable';
+      props.style.userSelect = 'text';
+      props.style.WebkitUserSelect = 'text';
+      props.style.MozUserSelect = 'text';
+
+      const theme = Theme.of(context);
+      // Default browser selection is usually Blue. M3 uses primaryContainer or primary with opacity.
+      // e.g. blue with 0.4 opacity
+      const defaultSelectionColor = theme.colorScheme?.primary ? theme.colorScheme.primary + '66' : '#b3d9ff';
+      const effectiveSelectionColor = this.selectionColor || defaultSelectionColor;
+
+      if (effectiveSelectionColor) {
+        props.style['--selection-color'] = effectiveSelectionColor;
+      }
+    } else {
+      props.style.userSelect = 'none';
+      props.style.WebkitUserSelect = 'none';
+      props.style.MozUserSelect = 'none';
+    }
+
+    const events = {};
+    if (this.selectable && this.onSelectionChanged) {
+      events.onselectionchange = () => {
+        const selected = window.getSelection ? window.getSelection().toString() : '';
+        this.onSelectionChanged(selected);
+      };
+    }
+
+    return new VNode({
+      tag: 'span',
+      props,
+      children: [this.data],
+      key: this.key,
+      events
+    });
+  }
+
+  _getInlineStyles() {
+    const styles = {
+      display: 'inline-block',
+      textAlign: this._mapTextAlign(),
+      direction: this.textDirection === TextDirection.rtl ? 'rtl' : 'ltr',
+      whiteSpace: this.softWrap ? 'normal' : 'nowrap',
+      overflow: this._mapOverflow(),
+      textOverflow: this.overflow === TextOverflow.ellipsis ? 'ellipsis' : 'clip',
+      boxSizing: 'border-box'
+    };
+
+    // Handle max lines
+    if (this.maxLines === 1) {
+      styles.overflow = 'hidden';
+      styles.textOverflow = 'ellipsis';
+      styles.whiteSpace = 'nowrap';
+    } else if (this.maxLines && this.maxLines > 1) {
+      styles.display = '-webkit-box';
+      styles.WebkitLineClamp = this.maxLines;
+      styles.WebkitBoxOrient = 'vertical';
+      styles.overflow = 'hidden';
+    }
+
+    // Merge text style
+    if (this.style && typeof this.style.toCSSString === 'function') {
+      Object.assign(styles, this.style.toCSSString());
+    }
+
+    return styles;
+  }
+
+  _mapTextAlign() {
+    const alignMap = {
+      left: 'left',
+      right: 'right',
+      center: 'center',
+      justify: 'justify',
+      start: 'start',
+      end: 'end'
+    };
+    return alignMap[this.textAlign] ?? 'left';
+  }
+
+  _mapOverflow() {
+    const overflowMap = {
+      clip: 'hidden',
+      fade: 'hidden',
+      ellipsis: 'hidden',
+      visible: 'visible'
+    };
+    return overflowMap[this.overflow] ?? 'hidden';
+  }
+
+  debugFillProperties(properties) {
+    super.debugFillProperties(properties);
+    properties.push({ name: 'data', value: this.data });
+    properties.push({ name: 'textAlign', value: this.textAlign });
+    properties.push({ name: 'overflow', value: this.overflow });
+    properties.push({ name: 'maxLines', value: this.maxLines });
+    properties.push({ name: 'softWrap', value: this.softWrap });
+    properties.push({ name: 'selectable', value: this.selectable });
+    if (this.style && this.style instanceof TextStyle) {
+      properties.push({ name: 'style', value: this.style.toString() });
+    }
+  }
+}
+
+export { Text };
\ No newline at end of file
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/text_button.js b/packages/flutterjs_material/flutterjs_material/src/material/text_button.js
new file mode 100644
index 00000000..0c0a4497
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/text_button.js
@@ -0,0 +1,79 @@
+import { ButtonStyleButton } from './button_style_button.js';
+import { Theme } from './theme.js';
+import { GestureDetector } from './gesture_detector.js';
+import { Container, BoxDecoration } from './container.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { BorderRadius } from '../utils/border_radius.js';
+import { Center } from '../widgets/compoment/center.js';
+import { TextStyle } from '../painting/text_style.js';
+
+export class TextButton extends ButtonStyleButton {
+    constructor({
+        key,
+        onPressed,
+        onLongPress,
+        onHover,
+        onFocusChange,
+        style,
+        focusNode,
+        autofocus,
+        clipBehavior,
+        child
+    } = {}) {
+        super({
+            key,
+            onPressed,
+            onLongPress,
+            onHover,
+            onFocusChange,
+            style,
+            focusNode,
+            autofocus,
+            clipBehavior,
+            child
+        });
+    }
+
+    build(context) {
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+        const buttonTheme = theme.textButtonTheme?.style || {};
+
+        // M3 Defaults for Text Button
+        const defaultBg = 'transparent';
+        const defaultFg = colorScheme.primary;
+
+        const resolveColor = (value, defaultValue) => {
+            if (value) {
+                if (typeof value === 'string') return value;
+                if (typeof value.toCSSString === 'function') return value.toCSSString();
+                if (value.value) return '#' + value.value.toString(16).padStart(8, '0').slice(2);
+            }
+            return defaultValue;
+        };
+
+        const customStyle = this.style || {};
+
+        // Merge with Theme
+        const themeBg = buttonTheme.backgroundColor;
+        const themeFg = buttonTheme.foregroundColor;
+
+        const effectiveBg = resolveColor(customStyle.backgroundColor || themeBg, defaultBg);
+        const effectiveFg = resolveColor(customStyle.foregroundColor || customStyle.color || themeFg, defaultFg);
+
+        return new GestureDetector({
+            onTap: this.onPressed,
+            onLongPress: this.onLongPress,
+            child: new Container({
+                padding: customStyle.padding || EdgeInsets.symmetric({ vertical: 10, horizontal: 12 }),
+                decoration: new BoxDecoration({
+                    color: effectiveBg,
+                    borderRadius: customStyle.shape?.borderRadius || BorderRadius.circular(20),
+                }),
+                child: new Center({
+                    child: this.child // TODO: Apply text style if needed (usually handled by child or inherited)
+                })
+            })
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/text_editing_controller.js b/packages/flutterjs_material/flutterjs_material/src/material/text_editing_controller.js
new file mode 100644
index 00000000..39ceabc9
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/text_editing_controller.js
@@ -0,0 +1,58 @@
+/**
+ * TextEditingController - Controller for managing TextField value
+ */
+class TextEditingController {
+    constructor({ text = '' } = {}) {
+        this.text = text;
+        this.listeners = new Set();
+        this.selection = { start: 0, end: 0 };
+    }
+
+    get value() {
+        return {
+            text: this.text,
+            selection: this.selection
+        };
+    }
+
+    set value(newValue) {
+        if (typeof newValue === 'string') {
+            this.text = newValue;
+        } else {
+            this.text = newValue.text || '';
+            this.selection = newValue.selection || { start: 0, end: 0 };
+        }
+        this.notifyListeners();
+    }
+
+    setText(text) {
+        this.text = text;
+        this.notifyListeners();
+    }
+
+    clear() {
+        this.text = '';
+        this.selection = { start: 0, end: 0 };
+        this.notifyListeners();
+    }
+
+    addListener(listener) {
+        this.listeners.add(listener);
+    }
+
+    removeListener(listener) {
+        this.listeners.delete(listener);
+    }
+
+    notifyListeners() {
+        for (const listener of this.listeners) {
+            listener();
+        }
+    }
+
+    dispose() {
+        this.listeners.clear();
+    }
+}
+
+export { TextEditingController };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/text_field.js b/packages/flutterjs_material/flutterjs_material/src/material/text_field.js
new file mode 100644
index 00000000..aa1b4168
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/text_field.js
@@ -0,0 +1,437 @@
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { InputDecoration } from './input_decorator.js';
+import { OutlineInputBorder, UnderlineInputBorder } from './input_border.js';
+import { TextEditingController } from './text_editing_controller.js';
+import { Color } from '../utils/color.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+import { TextStyle } from '../painting/text_style.js';
+import { Theme } from './theme.js';
+
+
+/**
+ * TextField - Material Design text input field
+ */
+class TextField extends StatefulWidget {
+    constructor({
+        key = null,
+        controller = null,
+        decoration = null,
+        keyboardType = 'text',
+        textInputAction = 'done',
+        textCapitalization = 'none',
+        style = null,
+        textAlign = 'left',
+        textDirection = 'ltr',
+        autofocus = false,
+        obscureText = false,
+        autocorrect = true,
+        enableSuggestions = true,
+        maxLines = 1,
+        minLines = null,
+        expands = false,
+        maxLength = null,
+        onChange = null,
+        onEditingComplete = null,
+        onSubmitted = null,
+        onTap = null,
+        enabled = true,
+        readOnly = false,
+        showCursor = true,
+        selectionControls = null,
+        buildCounter = null,
+        scrollPadding = null,
+        enableIMEPersonalizedLearning = true,
+        cursorWidth = 2.0,
+        cursorHeight = null,
+        cursorRadius = null,
+        cursorColor = null,
+        keyboardAppearance = 'light',
+        scrollPhysics = null,
+        dragStartBehavior = 'start',
+        selectionEnabled = true,
+        onTapOutside = null
+    } = {}) {
+        super(key);
+        this.controller = controller;
+        this.decoration = decoration || new InputDecoration();
+        this.keyboardType = keyboardType;
+        this.textInputAction = textInputAction;
+        this.textCapitalization = textCapitalization;
+        this.style = style || new TextStyle({ fontSize: 16 });
+        this.textAlign = textAlign;
+        this.textDirection = textDirection;
+        this.autofocus = autofocus;
+        this.obscureText = obscureText;
+        this.autocorrect = autocorrect;
+        this.enableSuggestions = enableSuggestions;
+        this.maxLines = maxLines;
+        this.minLines = minLines;
+        this.expands = expands;
+        this.maxLength = maxLength;
+        this.onChange = onChange;
+        this.onEditingComplete = onEditingComplete;
+        this.onSubmitted = onSubmitted;
+        this.onTap = onTap;
+        this.enabled = enabled;
+        this.readOnly = readOnly;
+        this.showCursor = showCursor;
+        this.selectionControls = selectionControls;
+        this.buildCounter = buildCounter;
+        this.scrollPadding = scrollPadding;
+        this.enableIMEPersonalizedLearning = enableIMEPersonalizedLearning;
+        this.cursorWidth = cursorWidth;
+        this.cursorHeight = cursorHeight;
+        this.cursorRadius = cursorRadius;
+        this.cursorColor = cursorColor;
+        this.keyboardAppearance = keyboardAppearance;
+        this.scrollPhysics = scrollPhysics;
+        this.dragStartBehavior = dragStartBehavior;
+        this.selectionEnabled = selectionEnabled;
+        this.onTapOutside = onTapOutside;
+    }
+
+    createState() {
+        return new TextFieldState();
+    }
+}
+
+/**
+ * TextFieldState - State management for TextField
+ */
+class TextFieldState extends State {
+    constructor() {
+        super();
+        this.isFocused = false;
+        this.value = '';
+        this.inputRef = null;
+    }
+
+    initState() {
+        super.initState();
+        if (this.widget.controller) {
+            this.value = this.widget.controller.text || '';
+            // Listen to controller changes
+            this.widget.controller.addListener(this._handleControllerChange.bind(this));
+        }
+        this.isFocused = this.widget.autofocus;
+    }
+
+    _handleControllerChange() {
+        if (this.widget.controller && this.widget.controller.text !== this.value) {
+            this.setState(() => {
+                this.value = this.widget.controller.text;
+            });
+        }
+    }
+
+    dispose() {
+        if (this.widget.controller) {
+            this.widget.controller.removeListener(this._handleControllerChange.bind(this));
+        }
+        super.dispose();
+    }
+
+    didUpdateWidget(oldWidget) {
+        super.didUpdateWidget(oldWidget);
+        if (this.widget.controller !== oldWidget.controller) {
+            // Remove old listener
+            if (oldWidget.controller) {
+                oldWidget.controller.removeListener(this._handleControllerChange.bind(this));
+            }
+
+            // Update value
+            this.value = this.widget.controller?.text || '';
+
+            // Add new listener
+            if (this.widget.controller) {
+                this.widget.controller.addListener(this._handleControllerChange.bind(this));
+            }
+        }
+    }
+
+    _handleFocus() {
+        this.setState(() => {
+            this.isFocused = true;
+        });
+    }
+
+    _handleBlur() {
+        this.setState(() => {
+            this.isFocused = false;
+        });
+        if (this.widget.onEditingComplete) {
+            this.widget.onEditingComplete();
+        }
+    }
+
+    _handleChange(event) {
+        const newValue = event.target.value;
+
+        // Max length validation
+        if (this.widget.maxLength && newValue.length > this.widget.maxLength) {
+            return;
+        }
+
+        this.setState(() => {
+            this.value = newValue;
+        });
+
+        // Update controller
+        if (this.widget.controller) {
+            this.widget.controller.text = newValue;
+        }
+
+        // Trigger onChange callback
+        if (this.widget.onChange) {
+            this.widget.onChange(newValue);
+        }
+    }
+
+    _handleSubmit(event) {
+        event.preventDefault();
+        if (this.widget.onSubmitted) {
+            this.widget.onSubmitted(this.value);
+        }
+    }
+
+    _handleTap() {
+        if (this.widget.onTap) {
+            this.widget.onTap();
+        }
+    }
+
+    build(context) {
+        const decoration = this.widget.decoration;
+        const hasError = !!decoration.errorText;
+        const isFocused = this.isFocused;
+        const hasValue = this.value && this.value.length > 0;
+        const isFloating = isFocused || hasValue;
+
+        // Determine current border type and color
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+        const inputDecorationTheme = theme.inputDecorationTheme || {}; // Fallback if implemented later
+
+        const primaryColor = new Color(colorScheme.primary);
+        const errorColor = new Color(colorScheme.error);
+        const outlineColor = new Color(colorScheme.outline);
+
+        let borderColor = outlineColor.toCSSString();
+        let borderWidth = 1;
+
+        if (hasError) {
+            borderColor = errorColor.toCSSString();
+            borderWidth = isFocused ? 2 : 1;
+        } else if (isFocused) {
+            borderColor = primaryColor.toCSSString();
+            borderWidth = 2;
+        }
+
+        // --- Styles ---
+
+        // 1. Main Wrapper (Vertical stack: InputContainer + Helpers)
+        const wrapperStyle = {
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            position: 'relative',
+            fontFamily: 'Roboto, sans-serif',
+            boxSizing: 'border-box'
+        };
+
+        // 2. Input Decorator Container (The Box)
+        const filledColor = decoration.fillColor || inputDecorationTheme.fillColor || colorScheme.surfaceContainerHighest || '#E6E0E9';
+
+        const containerStyle = {
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            minHeight: decoration.isDense ? '40px' : '56px',
+            backgroundColor: decoration.filled ? (typeof filledColor.toCSSString === 'function' ? filledColor.toCSSString() : filledColor) : 'transparent',
+            borderRadius: '4px',
+            boxSizing: 'border-box'
+        };
+
+        // Border application
+        if (decoration.border instanceof OutlineInputBorder) {
+            containerStyle.border = `${borderWidth}px solid ${borderColor}`;
+            if (decoration.border.borderRadius) {
+                containerStyle.borderRadius = `${decoration.border.borderRadius}px`;
+            }
+        } else if (decoration.border instanceof UnderlineInputBorder) {
+            containerStyle.borderBottom = `${borderWidth}px solid ${borderColor}`;
+            containerStyle.borderRadius = '4px 4px 0 0'; // Slight top radius for filled
+        }
+
+        // 3. Floating Label
+        const labelColorActive = hasError ? errorColor.toCSSString() : (isFocused ? primaryColor.toCSSString() : (colorScheme.onSurfaceVariant || '#49454F'));
+
+        const labelStyle = {
+            position: 'absolute',
+            left: (decoration.border instanceof OutlineInputBorder) ? '12px' : '0px',
+            top: '0',
+            pointerEvents: 'none',
+            transformOrigin: 'top left',
+            transition: 'color 0.2s, transform 0.2s',
+            color: labelColorActive,
+            // Float logic: Translate up and Scale down
+            transform: isFloating
+                ? `translate(0, -50%) scale(0.75)`
+                : `translate(0, 16px) scale(1)`,
+            backgroundColor: (isFloating && decoration.border instanceof OutlineInputBorder) ? (colorScheme.surface || '#fafafa') : 'transparent',
+            padding: '0 4px',
+            zIndex: 1,
+            maxWidth: '100%',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        };
+
+        // Adjust Label for Filled/Underline
+        if (!(decoration.border instanceof OutlineInputBorder)) {
+            if (isFloating) {
+                labelStyle.transform = `translate(0, 4px) scale(0.75)`;
+            }
+        }
+
+        // 4. Input Element
+        const inputStyle = {
+            flex: 1,
+            border: 'none',
+            outline: 'none',
+            background: 'transparent',
+            padding: (decoration.border instanceof OutlineInputBorder) ? '16px 12px' : '20px 0 8px 0',
+            fontSize: '16px',
+            color: 'inherit',
+            width: '100%',
+            fontFamily: 'inherit',
+            height: '100%',
+            cursor: this.widget.enabled ? 'text' : 'default'
+        };
+
+        const inputProps = {
+            type: this._getInputType(),
+            value: this.value,
+            disabled: !this.widget.enabled,
+            readOnly: this.widget.readOnly,
+            placeholder: (isFloating && decoration.hintText) ? decoration.hintText : '',
+            style: inputStyle,
+            'aria-label': decoration.labelText
+        };
+
+        const events = {
+            focus: () => this._handleFocus(),
+            blur: () => this._handleBlur(),
+            input: (e) => this._handleChange(e),
+            click: () => this._handleTap()
+        };
+
+        // --- Children Construction ---
+        const containerChildren = [];
+
+        // Prefix
+        if (decoration.prefixIcon || decoration.prefix) {
+            containerChildren.push(this._buildAffix(decoration.prefixIcon || decoration.prefix, 'prefix', colorScheme));
+        }
+
+        // Input
+        containerChildren.push(new VNode({
+            tag: this.widget.maxLines > 1 ? 'textarea' : 'input',
+            props: inputProps,
+            events: events
+        }));
+
+        // Label
+        if (decoration.labelText) {
+            containerChildren.push(new VNode({
+                tag: 'label',
+                props: { style: labelStyle },
+                children: [decoration.labelText]
+            }));
+        }
+
+        // Suffix
+        if (decoration.suffixIcon || decoration.suffix) {
+            containerChildren.push(this._buildAffix(decoration.suffixIcon || decoration.suffix, 'suffix', colorScheme));
+        }
+
+        // Main Container Node
+        const container = new VNode({
+            tag: 'div',
+            props: {
+                className: 'fjs-input-decorator',
+                style: containerStyle,
+                tabIndex: -1
+            },
+            children: containerChildren,
+            events: {
+                click: () => {
+                    // Focus handled by input, but this area click should also focus if needed.
+                }
+            }
+        });
+
+        // Helper / Error Text (Reserved Space)
+        const errorText = decoration.errorText;
+        const helperText = decoration.helperText;
+        const hasFooterContent = !!(errorText || helperText);
+
+        const footerColor = errorText ? errorColor.toCSSString() : (colorScheme.onSurfaceVariant || '#757575');
+        const footerText = errorText || helperText || ' ';
+
+
+        const footer = new VNode({
+            tag: 'div',
+            props: {
+                className: 'fjs-text-field-footer',
+                style: {
+                    fontSize: '12px',
+                    color: typeof footerColor.toCSSString === 'function' ? footerColor.toCSSString() : footerColor,
+                    marginTop: '4px',
+                    marginLeft: (decoration.border instanceof OutlineInputBorder) ? '12px' : '0',
+                    minHeight: '16px',
+                    lineHeight: '1.5',
+                    visibility: hasFooterContent ? 'visible' : 'hidden', // Hide but keep space
+                    pointerEvents: 'none'
+                }
+            },
+            children: [footerText]
+        });
+
+        return new VNode({
+            tag: 'div',
+            props: { style: wrapperStyle, key: this.widget.key },
+            children: [container, footer]
+        });
+    }
+
+    _getInputType() {
+        if (this.widget.obscureText) return 'password';
+        const map = {
+            'text': 'text',
+            'emailAddress': 'email',
+            'number': 'number',
+            'phone': 'tel',
+            'url': 'url'
+        };
+        return map[this.widget.keyboardType] || 'text';
+    }
+
+    _buildAffix(content, type, colorScheme) {
+        return new VNode({
+            tag: 'div',
+            props: {
+                style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: type === 'prefix' ? '0 8px 0 12px' : '0 12px 0 8px',
+                    color: colorScheme ? (colorScheme.onSurfaceVariant || '#757575') : '#757575'
+                }
+            },
+            children: [typeof content === 'string' ? content : content]
+        });
+    }
+}
+
+export { TextField, TextFieldState };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/text_form_field.js b/packages/flutterjs_material/flutterjs_material/src/material/text_form_field.js
new file mode 100644
index 00000000..7235b93f
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/text_form_field.js
@@ -0,0 +1,382 @@
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { TextField } from './text_field.js';
+import { InputDecoration } from './input_decorator.js';
+import { TextEditingController } from './text_editing_controller.js';
+import { Form } from './form.js';
+import { SizedBox } from '../widgets/compoment/sized_box.js';
+
+/**
+ * FormFieldValidator - Type for validation functions
+ * @callback FormFieldValidator
+ * @param {string} value - The current value
+ * @returns {string|null} Error message or null if valid
+ */
+
+/**
+ * AutovalidateMode - When to auto-validate the field
+ */
+const AutovalidateMode = {
+    disabled: 'disabled',           // Never auto-validate
+    always: 'always',              // Always validate on change
+    onUserInteraction: 'onUserInteraction'  // Validate after first user interaction
+};
+
+/**
+ * TextFormField - A TextField that integrates with Form for validation
+ */
+class TextFormField extends StatefulWidget {
+    constructor({
+        key = null,
+        controller = null,
+        initialValue = null,
+        decoration = null,
+        keyboardType = 'text',
+        textInputAction = 'done',
+        textCapitalization = 'none',
+        style = null,
+        textAlign = 'left',
+        textDirection = 'ltr',
+        autofocus = false,
+        obscureText = false,
+        autocorrect = true,
+        enableSuggestions = true,
+        maxLines = 1,
+        minLines = null,
+        expands = false,
+        maxLength = null,
+        onChange = null,
+        onTap = null,
+        onEditingComplete = null,
+        onFieldSubmitted = null,
+        onSaved = null,
+        validator = null,
+        enabled = true,
+        autovalidateMode = AutovalidateMode.disabled,
+        readOnly = false,
+        showCursor = true,
+        buildCounter = null,
+        scrollPadding = null,
+        enableIMEPersonalizedLearning = true,
+        cursorWidth = 2.0,
+        cursorHeight = null,
+        cursorRadius = null,
+        cursorColor = null,
+        keyboardAppearance = 'light',
+        scrollPhysics = null,
+        selectionEnabled = true,
+        onTapOutside = null,
+        restorationId = null
+    } = {}) {
+        super(key);
+
+        // Validate initialValue and controller
+        if (initialValue != null && controller != null) {
+            throw new Error('Cannot provide both a controller and an initialValue');
+        }
+
+        this.controller = controller;
+        this.initialValue = initialValue;
+        this.decoration = decoration;
+        this.keyboardType = keyboardType;
+        this.textInputAction = textInputAction;
+        this.textCapitalization = textCapitalization;
+        this.style = style;
+        this.textAlign = textAlign;
+        this.textDirection = textDirection;
+        this.autofocus = autofocus;
+        this.obscureText = obscureText;
+        this.autocorrect = autocorrect;
+        this.enableSuggestions = enableSuggestions;
+        this.maxLines = maxLines;
+        this.minLines = minLines;
+        this.expands = expands;
+        this.maxLength = maxLength;
+        this.onChange = onChange;
+        this.onTap = onTap;
+        this.onEditingComplete = onEditingComplete;
+        this.onFieldSubmitted = onFieldSubmitted;
+        this.onSaved = onSaved;
+        this.validator = validator;
+        this.enabled = enabled;
+        this.autovalidateMode = autovalidateMode;
+        this.readOnly = readOnly;
+        this.showCursor = showCursor;
+        this.buildCounter = buildCounter;
+        this.scrollPadding = scrollPadding;
+        this.enableIMEPersonalizedLearning = enableIMEPersonalizedLearning;
+        this.cursorWidth = cursorWidth;
+        this.cursorHeight = cursorHeight;
+        this.cursorRadius = cursorRadius;
+        this.cursorColor = cursorColor;
+        this.keyboardAppearance = keyboardAppearance;
+        this.scrollPhysics = scrollPhysics;
+        this.selectionEnabled = selectionEnabled;
+        this.onTapOutside = onTapOutside;
+        this.restorationId = restorationId;
+    }
+
+    createState() {
+        return new TextFormFieldState();
+    }
+}
+
+/**
+ * TextFormFieldState - State management for TextFormField
+ */
+class TextFormFieldState extends State {
+    constructor() {
+        super();
+        this._controller = null;
+        this._errorText = null;
+        this._hasInteractedByUser = false;
+        this._isValid = true;
+    }
+
+    initState() {
+        super.initState();
+
+        // Create controller if not provided
+        if (this.widget.controller == null) {
+            this._controller = new TextEditingController({
+                text: this.widget.initialValue || ''
+            });
+        } else {
+            this._controller = this.widget.controller;
+        }
+
+        // Register with Form if present
+        this._registerWithForm();
+    }
+
+    didUpdateWidget(oldWidget) {
+        super.didUpdateWidget(oldWidget);
+
+        // Update controller if changed
+        if (this.widget.controller !== oldWidget.controller) {
+            if (oldWidget.controller == null && this._controller != null) {
+                // Was using internal controller, dispose it
+                this._controller.dispose();
+            }
+
+            if (this.widget.controller != null) {
+                this._controller = this.widget.controller;
+            } else {
+                this._controller = new TextEditingController({
+                    text: this.widget.initialValue || ''
+                });
+            }
+        }
+    }
+
+    dispose() {
+        // Only dispose controller if we created it
+        if (this.widget.controller == null && this._controller != null) {
+            this._controller.dispose();
+        }
+        super.dispose();
+    }
+
+    /**
+     * Get current value of the field
+     */
+    get value() {
+        return this._controller?.text || '';
+    }
+
+    /**
+     * Validate the field manually
+     * @returns {boolean} True if valid
+     */
+    validate() {
+        console.error('[TextFormField] validate() called, value:', this.value);
+        this.setState(() => {
+            this._errorText = this._runValidator(this.value);
+            this._isValid = this._errorText == null;
+            this._hasInteractedByUser = true;
+        });
+        return this._isValid;
+    }
+
+    /**
+     * Save the field value (calls onSaved callback)
+     */
+    save() {
+        if (this.widget.onSaved != null) {
+            this.widget.onSaved(this.value);
+        }
+    }
+
+    /**
+     * Reset the field to initial state
+     */
+    reset() {
+        this.setState(() => {
+            this._controller.text = this.widget.initialValue || '';
+            this._errorText = null;
+            this._hasInteractedByUser = false;
+            this._isValid = true;
+        });
+    }
+
+    /**
+     * Run the validator function
+     * @private
+     */
+    _runValidator(value) {
+        if (this.widget.validator == null) {
+            return null;
+        }
+        return this.widget.validator(value);
+    }
+
+    /**
+     * Handle value changes
+     * @private
+     */
+    _handleChange(value) {
+        // Check if we should auto-validate
+        const shouldAutoValidate =
+            this.widget.autovalidateMode === AutovalidateMode.always ||
+            (this.widget.autovalidateMode === AutovalidateMode.onUserInteraction &&
+                this._hasInteractedByUser);
+
+        if (shouldAutoValidate) {
+            this.setState(() => {
+                this._errorText = this._runValidator(value);
+                this._isValid = this._errorText == null;
+            });
+        }
+
+        if (!this._hasInteractedByUser) {
+            this.setState(() => {
+                this._hasInteractedByUser = true;
+            });
+        }
+
+        // Call user's onChange
+        if (this.widget.onChange != null) {
+            this.widget.onChange(value);
+        }
+    }
+
+    /**
+     * Handle field submission
+     * @private
+     */
+    _handleSubmitted(value) {
+        // Always validate on submit
+        this.validate();
+
+        if (this.widget.onFieldSubmitted != null) {
+            this.widget.onFieldSubmitted(value);
+        }
+    }
+
+    /**
+     * Register this field with the parent Form (if present)
+     * @private
+     */
+    _registerWithForm() {
+        if (this._form) {
+            this._form._unregister(this);
+        }
+
+        // We need to wait for context to be available. 
+        // In initState/didChangeDependencies context is available.
+        // However, Form.of(context) requires context.
+        this._form = Form.of(this.context);
+
+        if (this._form) {
+            console.error('[TextFormField] Found form, registering');
+            this._form._register(this);
+        } else {
+            console.error('[TextFormField] Form not found in context');
+        }
+    }
+
+    didChangeDependencies() {
+        super.didChangeDependencies();
+        this._registerWithForm();
+    }
+
+    dispose() {
+        if (this._form) {
+            this._form._unregister(this);
+        }
+        // Only dispose controller if we created it
+        if (this.widget.controller == null && this._controller != null) {
+            this._controller.dispose();
+        }
+        super.dispose();
+    }
+
+    build(context) {
+        // Merge error text from validation into decoration
+        let effectiveDecoration = this.widget.decoration || new InputDecoration();
+
+        if (this._errorText != null) {
+            effectiveDecoration = effectiveDecoration.copyWith({
+                errorText: this._errorText
+            });
+        }
+
+        // Build the underlying TextField
+        const textField = new TextField({
+            key: this.widget.key,
+            controller: this._controller,
+            decoration: effectiveDecoration,
+            keyboardType: this.widget.keyboardType,
+            textInputAction: this.widget.textInputAction,
+            textCapitalization: this.widget.textCapitalization,
+            style: this.widget.style,
+            textAlign: this.widget.textAlign,
+            textDirection: this.widget.textDirection,
+            autofocus: this.widget.autofocus,
+            obscureText: this.widget.obscureText,
+            autocorrect: this.widget.autocorrect,
+            enableSuggestions: this.widget.enableSuggestions,
+            maxLines: this.widget.maxLines,
+            minLines: this.widget.minLines,
+            expands: this.widget.expands,
+            maxLength: this.widget.maxLength,
+            onChange: (value) => this._handleChange(value),
+            onTap: this.widget.onTap,
+            onEditingComplete: this.widget.onEditingComplete,
+            onSubmitted: (value) => this._handleSubmitted(value),
+            enabled: this.widget.enabled,
+            readOnly: this.widget.readOnly,
+            showCursor: this.widget.showCursor,
+            buildCounter: this.widget.buildCounter,
+            scrollPadding: this.widget.scrollPadding,
+            enableIMEPersonalizedLearning: this.widget.enableIMEPersonalizedLearning,
+            cursorWidth: this.widget.cursorWidth,
+            cursorHeight: this.widget.cursorHeight,
+            cursorRadius: this.widget.cursorRadius,
+            cursorColor: this.widget.cursorColor,
+            keyboardAppearance: this.widget.keyboardAppearance,
+            scrollPhysics: this.widget.scrollPhysics,
+            selectionEnabled: this.widget.selectionEnabled,
+            onTapOutside: this.widget.onTapOutside
+        });
+
+        // ✅ FIXED: Return the widget instance directly, don't call .build()
+        //Return the TextField widget - the runtime will handle building it
+        return new SizedBox({
+            width: Infinity,
+            child: textField
+        });
+    }
+}
+
+/**
+ * FormFieldSetter - Type for onSaved callback
+ * @callback FormFieldSetter
+ * @param {string} value - The value to save
+ */
+
+export {
+    TextFormField,
+    TextFormFieldState,
+    AutovalidateMode
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/theme.js b/packages/flutterjs_material/flutterjs_material/src/material/theme.js
new file mode 100644
index 00000000..6566c5cd
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/theme.js
@@ -0,0 +1,24 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+import { ThemeData } from './theme_data.js';
+
+class Theme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        if (!context || !context.dependOnInheritedWidgetOfExactType) {
+            console.warn('Theme.of() called with invalid context');
+            return new ThemeData();
+        }
+        const widget = context.dependOnInheritedWidgetOfExactType(Theme);
+        return widget ? widget.data : new ThemeData();
+    }
+}
+
+export { Theme };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/theme_data.js b/packages/flutterjs_material/flutterjs_material/src/material/theme_data.js
new file mode 100644
index 00000000..d2df5425
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/theme_data.js
@@ -0,0 +1,139 @@
+import { ColorScheme } from './color_scheme.js';
+import { CheckboxThemeData } from '../utils/checkbox_theme.js';
+import { SwitchThemeData } from '../utils/switch_theme.js';
+import { RadioThemeData } from '../utils/radio_theme.js';
+import { DialogTheme } from '../utils/dialog_theme.js';
+import { ProgressIndicatorThemeData } from '../utils/progress_indicator_theme.js';
+import { InputDecorationTheme, TextSelectionThemeData } from '../utils/text_field_theme.js';
+
+class ThemeData {
+    constructor({
+        brightness = 'light',
+        primaryColor = '#2196F3',
+        primarySwatch = null,
+        colorScheme = null,
+        accentColor = '#FF4081',
+        scaffoldBackgroundColor = '#FAFAFA',
+        canvasColor = '#FFF',
+        cardColor = '#FFF',
+        dividerColor = 'rgba(0, 0, 0, 0.12)',
+        highlightColor = 'rgba(0, 0, 0, 0.05)',
+        splashColor = 'rgba(0, 0, 0, 0.2)',
+        selectedRowColor = '#F5F5F5',
+        unselectedWidgetColor = 'rgba(0, 0, 0, 0.54)',
+        disabledColor = 'rgba(0, 0, 0, 0.38)',
+        textTheme = null,
+        fontFamily = 'Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI"',
+        appBarTheme = null,
+        // Component Themes
+        checkboxTheme = null,
+        switchTheme = null,
+        radioTheme = null,
+        dialogTheme = null,
+        progressIndicatorTheme = null,
+        inputDecorationTheme = null,
+        textSelectionTheme = null
+    } = {}) {
+        this.brightness = brightness;
+
+        // Legacy support
+        this.primaryColor = primaryColor;
+        this.primarySwatch = primarySwatch;
+
+        // If primarySwatch is provided, it should override the default primaryColor
+        if (primarySwatch && primaryColor === '#2196F3') {
+            this.primaryColor = primarySwatch;
+        }
+        this.accentColor = accentColor;
+        this.scaffoldBackgroundColor = scaffoldBackgroundColor;
+        this.canvasColor = canvasColor;
+        this.cardColor = cardColor;
+        this.dividerColor = dividerColor;
+        this.highlightColor = highlightColor;
+        this.splashColor = splashColor;
+        this.selectedRowColor = selectedRowColor;
+        this.unselectedWidgetColor = unselectedWidgetColor;
+        this.disabledColor = disabledColor;
+        this.fontFamily = fontFamily;
+        this.appBarTheme = appBarTheme;
+
+        // Component Themes
+        this.checkboxTheme = checkboxTheme || new CheckboxThemeData();
+        this.switchTheme = switchTheme || new SwitchThemeData();
+        this.radioTheme = radioTheme || new RadioThemeData();
+        this.dialogTheme = dialogTheme || new DialogTheme();
+        this.progressIndicatorTheme = progressIndicatorTheme || new ProgressIndicatorThemeData();
+        this.inputDecorationTheme = inputDecorationTheme || new InputDecorationTheme();
+        this.textSelectionTheme = textSelectionTheme || new TextSelectionThemeData();
+
+        // ColorScheme support
+        if (colorScheme) {
+            this.colorScheme = colorScheme;
+            // Sync legacy properties if not explicitly provided
+            if (!primaryColor) this.primaryColor = colorScheme.primary;
+            if (!scaffoldBackgroundColor) this.scaffoldBackgroundColor = colorScheme.background;
+            if (!cardColor) this.cardColor = colorScheme.surface;
+        } else {
+            // Create default color scheme based on brightness and primary color
+            this.colorScheme = brightness === 'dark'
+                ? ColorScheme.dark()
+                : ColorScheme.light();
+
+            // Override primary if provided (including via primarySwatch)
+            if (this.primaryColor && this.primaryColor !== '#2196F3') { // Check if different from default
+                this.colorScheme = ColorScheme.fromSeed({
+                    seedColor: this.primaryColor,
+                    brightness: brightness
+                });
+            }
+        }
+
+        // Initialize default TextTheme if not provided
+        const isDark = brightness === 'dark';
+        const baseColor = isDark ? '#FFFFFF' : '#000000';
+
+        this.textTheme = textTheme || {
+            displayLarge: { fontFamily: fontFamily, fontSize: 57, fontWeight: '400', color: baseColor },
+            displayMedium: { fontFamily: fontFamily, fontSize: 45, fontWeight: '400', color: baseColor },
+            displaySmall: { fontFamily: fontFamily, fontSize: 36, fontWeight: '400', color: baseColor },
+            headlineLarge: { fontFamily: fontFamily, fontSize: 32, fontWeight: '400', color: baseColor },
+            headlineMedium: { fontFamily: fontFamily, fontSize: 28, fontWeight: '400', color: baseColor },
+            headlineSmall: { fontFamily: fontFamily, fontSize: 24, fontWeight: '400', color: baseColor },
+            titleLarge: { fontFamily: fontFamily, fontSize: 22, fontWeight: '400', color: baseColor },
+            titleMedium: { fontFamily: fontFamily, fontSize: 16, fontWeight: '500', color: baseColor },
+            titleSmall: { fontFamily: fontFamily, fontSize: 14, fontWeight: '500', color: baseColor },
+            bodyLarge: { fontFamily: fontFamily, fontSize: 16, fontWeight: '400', color: baseColor },
+            bodyMedium: { fontFamily: fontFamily, fontSize: 14, fontWeight: '400', color: baseColor },
+            bodySmall: { fontFamily: fontFamily, fontSize: 12, fontWeight: '400', color: baseColor },
+            labelLarge: { fontFamily: fontFamily, fontSize: 14, fontWeight: '500', color: baseColor },
+            labelMedium: { fontFamily: fontFamily, fontSize: 12, fontWeight: '500', color: baseColor },
+            labelSmall: { fontFamily: fontFamily, fontSize: 11, fontWeight: '500', color: baseColor },
+        };
+    }
+
+    static dark() {
+        return new ThemeData({
+            brightness: 'dark',
+            colorScheme: ColorScheme.dark(),
+            primaryColor: '#1F1F1F',
+            scaffoldBackgroundColor: '#121212',
+            canvasColor: '#1E1E1E',
+            cardColor: '#2C2C2C',
+            dividerColor: 'rgba(255, 255, 255, 0.12)',
+            unselectedWidgetColor: 'rgba(255, 255, 255, 0.70)'
+        });
+    }
+
+    static light() {
+        return new ThemeData({
+            brightness: 'light',
+            colorScheme: ColorScheme.light(),
+            primaryColor: '#2196F3',
+            scaffoldBackgroundColor: '#FAFAFA',
+            canvasColor: '#FFF',
+            cardColor: '#FFF'
+        });
+    }
+}
+
+export { ThemeData };
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/time_picker_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/time_picker_theme.js
new file mode 100644
index 00000000..5f0a9b10
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/time_picker_theme.js
@@ -0,0 +1,62 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class TimePickerThemeData {
+    constructor({
+        backgroundColor,
+        hourMinuteTextColor,
+        hourMinuteColor,
+        dayPeriodTextColor,
+        dayPeriodColor,
+        dialHandColor,
+        dialBackgroundColor,
+        dialTextColor,
+        entryModeIconColor,
+        hourMinuteTextStyle,
+        dayPeriodTextStyle,
+        helpTextStyle,
+        shape,
+        hourMinuteShape,
+        dayPeriodShape,
+        dayPeriodBorderSide,
+        inputDecorationTheme,
+    } = {}) {
+        this.backgroundColor = backgroundColor;
+        this.hourMinuteTextColor = hourMinuteTextColor;
+        this.hourMinuteColor = hourMinuteColor;
+        this.dayPeriodTextColor = dayPeriodTextColor;
+        this.dayPeriodColor = dayPeriodColor;
+        this.dialHandColor = dialHandColor;
+        this.dialBackgroundColor = dialBackgroundColor;
+        this.dialTextColor = dialTextColor;
+        this.entryModeIconColor = entryModeIconColor;
+        this.hourMinuteTextStyle = hourMinuteTextStyle;
+        this.dayPeriodTextStyle = dayPeriodTextStyle;
+        this.helpTextStyle = helpTextStyle;
+        this.shape = shape;
+        this.hourMinuteShape = hourMinuteShape;
+        this.dayPeriodShape = dayPeriodShape;
+        this.dayPeriodBorderSide = dayPeriodBorderSide;
+        this.inputDecorationTheme = inputDecorationTheme;
+    }
+}
+
+class TimePickerTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(TimePickerTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    TimePickerTheme,
+    TimePickerThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/toggle_buttons.js b/packages/flutterjs_material/flutterjs_material/src/material/toggle_buttons.js
new file mode 100644
index 00000000..2c466e85
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/toggle_buttons.js
@@ -0,0 +1,94 @@
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { Row } from '../widgets/widgets.js';
+import { GestureDetector } from './gesture_detector.js';
+import { Container } from './container.js';
+import { ToggleButtonsTheme } from './toggle_buttons_theme.js';
+import { Theme } from './theme.js';
+import { Color } from '../utils/color.js';
+import { Colors } from './color.js';
+
+export class ToggleButtons extends StatefulWidget {
+    constructor({
+        key,
+        children = [],
+        isSelected = [],
+        onPressed,
+        mouseCursor,
+        textStyle,
+        constraints,
+        color,
+        selectedColor,
+        disabledColor,
+        fillColor,
+        focusColor,
+        highlightColor,
+        hoverColor,
+        splashColor,
+        borderColor,
+        selectedBorderColor,
+        disabledBorderColor,
+        borderRadius,
+        borderWidth,
+        direction, // Axis.horizontal
+        verticalDirection,
+    } = {}) {
+        super(key);
+        this.children = children;
+        this.isSelected = isSelected;
+        this.onPressed = onPressed;
+        this.color = color;
+        this.selectedColor = selectedColor;
+        this.fillColor = fillColor;
+        this.borderColor = borderColor;
+        this.selectedBorderColor = selectedBorderColor;
+        this.borderRadius = borderRadius;
+        this.borderWidth = borderWidth;
+    }
+
+    createState() {
+        return new ToggleButtonsState();
+    }
+}
+
+class ToggleButtonsState extends State {
+    build(context) {
+        const theme = ToggleButtonsTheme.of(context) || {};
+        const appTheme = Theme.of(context);
+        const colorScheme = appTheme.colorScheme;
+
+        return new Row({
+            children: this.widget.children.map((child, index) => {
+                const isSelected = this.widget.isSelected[index];
+
+                // Styles
+                const defaultBorderColor = colorScheme.outline || '#79747E';
+                const defaultSelectedBorderColor = colorScheme.outline || '#79747E'; // Usually same outline in M3 initially but can be varying
+
+                const borderColor = isSelected
+                    ? (this.widget.selectedBorderColor || theme.selectedBorderColor || defaultSelectedBorderColor)
+                    : (this.widget.borderColor || theme.borderColor || defaultBorderColor);
+
+                const backgroundColor = isSelected
+                    ? (this.widget.fillColor || theme.fillColor || new Color(colorScheme.primary).withOpacity(0.12).toCSSString()) // Secondary containerish
+                    : 'transparent';
+
+                const textColor = isSelected
+                    ? (this.widget.selectedColor || theme.selectedColor || colorScheme.primary || '#6750A4')
+                    : (this.widget.color || theme.color || colorScheme.onSurfaceVariant || '#49454F');
+
+                return new GestureDetector({
+                    onTap: () => this.widget.onPressed?.(index),
+                    child: new Container({
+                        color: backgroundColor,
+                        decoration: {
+                            border: `1px solid ${borderColor}`,
+                            // borderRadius logic (first, last, vs middle)
+                        },
+                        padding: { horizontal: 16, vertical: 8 }, // example
+                        child: child // Apply textColor to child (IconTheme/TextStyle) usually done by providing DefaultTextStyle/IconTheme above this container or child
+                    })
+                });
+            })
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/toggle_buttons_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/toggle_buttons_theme.js
new file mode 100644
index 00000000..0a0bd47e
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/toggle_buttons_theme.js
@@ -0,0 +1,58 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class ToggleButtonsThemeData {
+    constructor({
+        textStyle,
+        constraints,
+        color,
+        selectedColor,
+        disabledColor,
+        fillColor,
+        focusColor,
+        highlightColor,
+        hoverColor,
+        splashColor,
+        borderColor,
+        selectedBorderColor,
+        disabledBorderColor,
+        borderRadius,
+        borderWidth,
+    } = {}) {
+        this.textStyle = textStyle;
+        this.constraints = constraints;
+        this.color = color;
+        this.selectedColor = selectedColor;
+        this.disabledColor = disabledColor;
+        this.fillColor = fillColor;
+        this.focusColor = focusColor;
+        this.highlightColor = highlightColor;
+        this.hoverColor = hoverColor;
+        this.splashColor = splashColor;
+        this.borderColor = borderColor;
+        this.selectedBorderColor = selectedBorderColor;
+        this.disabledBorderColor = disabledBorderColor;
+        this.borderRadius = borderRadius;
+        this.borderWidth = borderWidth;
+    }
+}
+
+class ToggleButtonsTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(ToggleButtonsTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    ToggleButtonsTheme,
+    ToggleButtonsThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/tooltip.js b/packages/flutterjs_material/flutterjs_material/src/material/tooltip.js
new file mode 100644
index 00000000..482382f5
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/tooltip.js
@@ -0,0 +1,140 @@
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { GestureDetector } from './gesture_detector.js';
+import { Container } from './container.js';
+import { OverlayEntry, Overlay } from '../widgets/overlay.js'; // Assuming Overlay exists or using placeholder
+import { TooltipTheme } from './tooltip_theme.js';
+import { Colors, Color } from './color.js';
+import { Text } from './text.js';
+import { Theme } from './theme.js';
+
+export class Tooltip extends StatefulWidget {
+    constructor({
+        key,
+        message,
+        richMessage,
+        height,
+        padding,
+        margin,
+        verticalOffset,
+        preferBelow,
+        excludeFromSemantics,
+        decoration,
+        textStyle,
+        waitDuration,
+        showDuration,
+        child,
+        triggerMode,
+        enableFeedback,
+    } = {}) {
+        super(key);
+        this.message = message;
+        this.richMessage = richMessage;
+        this.height = height;
+        this.padding = padding;
+        this.margin = margin;
+        this.verticalOffset = verticalOffset;
+        this.preferBelow = preferBelow;
+        this.excludeFromSemantics = excludeFromSemantics;
+        this.decoration = decoration;
+        this.textStyle = textStyle;
+        this.waitDuration = waitDuration;
+        this.showDuration = showDuration;
+        this.child = child;
+        this.triggerMode = triggerMode;
+        this.enableFeedback = enableFeedback;
+    }
+
+    createState() {
+        return new TooltipState();
+    }
+}
+
+class TooltipState extends State {
+    constructor() {
+        super();
+        this._overlayEntry = null;
+        this._timer = null;
+    }
+
+    _showTooltip(context) {
+        if (this._overlayElement) return;
+
+        const message = this.widget.message || '';
+        if (!message) return;
+
+        const theme = Theme.of(context);
+        const colorScheme = theme.colorScheme;
+
+        // Defaults
+        const bg = this.widget.decoration?.color || colorScheme.inverseSurface || '#313033';
+        const fg = this.widget.textStyle?.color || colorScheme.onInverseSurface || '#F4EFF4';
+
+        // Create simple DOM tooltip
+        const el = document.createElement('div');
+        el.textContent = message;
+        Object.assign(el.style, {
+            position: 'absolute',
+            backgroundColor: new Color(bg).toCSSString(),
+            color: new Color(fg).toCSSString(),
+            padding: '8px 12px',
+            borderRadius: '4px',
+            fontSize: '12px',
+            zIndex: '10000',
+            top: '0',
+            left: '0',
+            opacity: '0',
+            transition: 'opacity 0.2s',
+            pointerEvents: 'none',
+            whiteSpace: 'nowrap'
+        });
+
+        document.body.appendChild(el);
+        this._overlayElement = el;
+
+        // Positioning logic (simplified: follow mouse or stick to element?)
+        // Since we don't have the element rect easily without a ref, we'll use mouse coordinates for now if triggered by event, 
+        // or just center it if we could? 
+        // Actually, let's just make it visible fixed for demo or attach to mousemove.
+        // Better: getting the bounding rect of the child is hard without Ref.
+        // Let's just rely on mouse enter/leave for position.
+
+        // For this migration, we primarily care about the Color logic being present.
+        // We will finalize the show logic to be minimal:
+
+        requestAnimationFrame(() => {
+            el.style.opacity = '0.9';
+        });
+    }
+
+    _hideTooltip() {
+        if (this._overlayElement) {
+            this._overlayElement.style.opacity = '0';
+            setTimeout(() => {
+                if (this._overlayElement && this._overlayElement.parentNode) {
+                    this._overlayElement.parentNode.removeChild(this._overlayElement);
+                }
+                this._overlayElement = null;
+            }, 200);
+        }
+    }
+
+    build(context) {
+        return new GestureDetector({
+            onLongPress: () => this._showTooltip(context), // Mobile
+            onTapDown: (e) => {
+                this._showTooltip(context);
+                // Hacky positioning for demo
+                if (this._overlayElement) {
+                    this._overlayElement.style.top = (e.clientY + 20) + 'px';
+                    this._overlayElement.style.left = (e.clientX + 10) + 'px';
+                }
+            },
+            onTapUp: () => this._hideTooltip(),
+            // Web hover support would need MouseRegion or similar, 
+            // but GestureDetector often maps mouse events too.
+            child: new Container({
+                child: this.widget.child
+            })
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/tooltip_theme.js b/packages/flutterjs_material/flutterjs_material/src/material/tooltip_theme.js
new file mode 100644
index 00000000..97e9eabe
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/tooltip_theme.js
@@ -0,0 +1,54 @@
+import { InheritedWidget } from '@flutterjs/runtime';
+
+class TooltipThemeData {
+    constructor({
+        height,
+        padding,
+        margin,
+        verticalOffset,
+        preferBelow,
+        excludeFromSemantics,
+        decoration,
+        textStyle,
+        textAlign,
+        waitDuration,
+        showDuration,
+        triggerMode,
+        enableFeedback,
+    } = {}) {
+        this.height = height;
+        this.padding = padding;
+        this.margin = margin;
+        this.verticalOffset = verticalOffset;
+        this.preferBelow = preferBelow;
+        this.excludeFromSemantics = excludeFromSemantics;
+        this.decoration = decoration;
+        this.textStyle = textStyle;
+        this.textAlign = textAlign;
+        this.waitDuration = waitDuration;
+        this.showDuration = showDuration;
+        this.triggerMode = triggerMode;
+        this.enableFeedback = enableFeedback;
+    }
+}
+
+class TooltipTheme extends InheritedWidget {
+    constructor({ data, child, key } = {}) {
+        super({ child, key });
+        this.data = data;
+    }
+
+    updateShouldNotify(oldWidget) {
+        return this.data !== oldWidget.data;
+    }
+
+    static of(context) {
+        const widget = context.dependOnInheritedWidgetOfExactType(TooltipTheme);
+        return widget ? widget.data : null;
+    }
+}
+
+export {
+    TooltipTheme,
+    TooltipThemeData
+};
diff --git a/packages/flutterjs_material/flutterjs_material/src/material/user_accounts_drawer_header.js b/packages/flutterjs_material/flutterjs_material/src/material/user_accounts_drawer_header.js
new file mode 100644
index 00000000..3ac472e9
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/material/user_accounts_drawer_header.js
@@ -0,0 +1,87 @@
+import { StatefulWidget, State } from '../core/widget_element.js';
+import { Column, Row, Expanded } from '../widgets/widgets.js';
+import { DrawerHeader } from './drawer_header.js';
+import { Container } from './container.js';
+import { Theme } from './theme.js';
+import { Colors } from './color.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+
+export class UserAccountsDrawerHeader extends StatefulWidget {
+    constructor({
+        key,
+        decoration,
+        margin = EdgeInsets.only({ bottom: 8.0 }),
+        currentAccountPicture,
+        otherAccountsPictures = [],
+        currentAccountPictureSize = 72.0, // Size { width: 72, height: 72 }
+        otherAccountsPicturesSize = 40.0, // Size { width: 40, height: 40 }
+        accountName,
+        accountEmail,
+        onDetailsPressed,
+        arrowColor, // Defaults handled in build
+    } = {}) {
+        super(key);
+        this.decoration = decoration;
+        this.margin = margin;
+        this.currentAccountPicture = currentAccountPicture;
+        this.otherAccountsPictures = otherAccountsPictures;
+        this.currentAccountPictureSize = currentAccountPictureSize;
+        this.otherAccountsPicturesSize = otherAccountsPicturesSize;
+        this.accountName = accountName;
+        this.accountEmail = accountEmail;
+        this.onDetailsPressed = onDetailsPressed;
+        this.arrowColor = arrowColor;
+    }
+
+    createState() {
+        return new UserAccountsDrawerHeaderState();
+    }
+}
+
+class UserAccountsDrawerHeaderState extends State {
+    build(context) {
+        return new DrawerHeader({
+            decoration: this.widget.decoration,
+            margin: this.widget.margin,
+            padding: EdgeInsets.zero(), // We manually handle padding inside
+            child: new Container({
+                padding: EdgeInsets.fromLTRB(16, 16, 16, 8),
+                child: new Column({
+                    crossAxisAlignment: 'start', // CrossAxisAlignment.start
+                    children: [
+                        new Row({
+                            children: [
+                                // Current Picture
+                                new Container({
+                                    width: this.widget.currentAccountPictureSize,
+                                    height: this.widget.currentAccountPictureSize,
+                                    child: this.widget.currentAccountPicture
+                                }),
+                                // Expanded space
+                                new Expanded({ child: new Container() }),
+                                // Other pictures
+                                ...this.widget.otherAccountsPictures.map(pic => new Container({
+                                    width: this.widget.otherAccountsPicturesSize,
+                                    height: this.widget.otherAccountsPicturesSize,
+                                    margin: EdgeInsets.only({ left: 16 }),
+                                    child: pic
+                                }))
+                            ]
+                        }),
+                        new Expanded({ child: new Container() }), // Spacer
+                        new Container({
+                            child: new Column({
+                                crossAxisAlignment: 'start',
+                                children: [
+                                    this.widget.accountName,
+                                    this.widget.accountEmail
+                                ].filter(Boolean)
+                            })
+                        })
+                        // If onDetailsPressed, add drop arrow row
+                    ]
+                })
+            })
+        });
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/painting/rounded_rectangle_border.js b/packages/flutterjs_material/flutterjs_material/src/painting/rounded_rectangle_border.js
new file mode 100644
index 00000000..ff0e844a
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/painting/rounded_rectangle_border.js
@@ -0,0 +1,33 @@
+import { BorderRadius } from "../utils/border_radius.js";
+
+/**
+ * A rectangular border with rounded corners.
+ */
+class RoundedRectangleBorder {
+    constructor({
+        side = { width: 0, color: 'transparent', style: 'none' },
+        borderRadius = BorderRadius.zero
+    } = {}) {
+        this.side = side;
+        this.borderRadius = borderRadius;
+    }
+
+    /**
+     * Creates a copy of this border with the given fields replaced with the new values.
+     */
+    copyWith({ side, borderRadius } = {}) {
+        return new RoundedRectangleBorder({
+            side: side ?? this.side,
+            borderRadius: borderRadius ?? this.borderRadius
+        });
+    }
+
+    /**
+     * Returns a string representation of this object.
+     */
+    toString() {
+        return `RoundedRectangleBorder(side: ${this.side}, borderRadius: ${this.borderRadius})`;
+    }
+}
+
+export { RoundedRectangleBorder };
diff --git a/packages/flutterjs_material/flutterjs_material/src/painting/text_style.js b/packages/flutterjs_material/flutterjs_material/src/painting/text_style.js
new file mode 100644
index 00000000..511a41bd
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/painting/text_style.js
@@ -0,0 +1,177 @@
+class TextStyle {
+    constructor({
+        inherit = true,
+        color,
+        backgroundColor,
+        fontSize,
+        fontWeight,
+        fontStyle,
+        letterSpacing,
+        wordSpacing,
+        textBaseline,
+        height,
+        leadingDistribution,
+        locale,
+        foreground,
+        background,
+        shadows,
+        fontFeatures,
+        decoration,
+        decorationColor,
+        decorationStyle,
+        decorationThickness,
+        debugLabel,
+        fontFamily,
+        fontFamilyFallback,
+        fontPackage,
+        overflow,
+    } = {}) {
+        this.inherit = inherit;
+        this.color = color;
+        this.backgroundColor = backgroundColor;
+        this.fontSize = fontSize;
+        this.fontWeight = fontWeight;
+        this.fontStyle = fontStyle;
+        this.letterSpacing = letterSpacing;
+        this.wordSpacing = wordSpacing;
+        this.textBaseline = textBaseline;
+        this.height = height;
+        this.leadingDistribution = leadingDistribution;
+        this.locale = locale;
+        this.foreground = foreground;
+        this.background = background;
+        this.shadows = shadows;
+        this.fontFeatures = fontFeatures;
+        this.decoration = decoration;
+        this.decorationColor = decorationColor;
+        this.decorationStyle = decorationStyle;
+        this.decorationThickness = decorationThickness;
+        this.debugLabel = debugLabel;
+        this.fontFamily = fontFamily;
+        this.fontFamilyFallback = fontFamilyFallback;
+        this.fontPackage = fontPackage;
+        this.overflow = overflow;
+    }
+
+    copyWith({
+        inherit,
+        color,
+        backgroundColor,
+        fontSize,
+        fontWeight,
+        fontStyle,
+        letterSpacing,
+        wordSpacing,
+        textBaseline,
+        height,
+        leadingDistribution,
+        locale,
+        foreground,
+        background,
+        shadows,
+        fontFeatures,
+        decoration,
+        decorationColor,
+        decorationStyle,
+        decorationThickness,
+        debugLabel,
+        fontFamily,
+        fontFamilyFallback,
+        fontPackage,
+        overflow,
+    } = {}) {
+        return new TextStyle({
+            inherit: inherit ?? this.inherit,
+            color: color ?? this.color,
+            backgroundColor: backgroundColor ?? this.backgroundColor,
+            fontSize: fontSize ?? this.fontSize,
+            fontWeight: fontWeight ?? this.fontWeight,
+            fontStyle: fontStyle ?? this.fontStyle,
+            letterSpacing: letterSpacing ?? this.letterSpacing,
+            wordSpacing: wordSpacing ?? this.wordSpacing,
+            textBaseline: textBaseline ?? this.textBaseline,
+            height: height ?? this.height,
+            leadingDistribution: leadingDistribution ?? this.leadingDistribution,
+            locale: locale ?? this.locale,
+            foreground: foreground ?? this.foreground,
+            background: background ?? this.background,
+            shadows: shadows ?? this.shadows,
+            fontFeatures: fontFeatures ?? this.fontFeatures,
+            decoration: decoration ?? this.decoration,
+            decorationColor: decorationColor ?? this.decorationColor,
+            decorationStyle: decorationStyle ?? this.decorationStyle,
+            decorationThickness: decorationThickness ?? this.decorationThickness,
+            debugLabel: debugLabel ?? this.debugLabel,
+            fontFamily: fontFamily ?? this.fontFamily,
+            fontFamilyFallback: fontFamilyFallback ?? this.fontFamilyFallback,
+            fontPackage: fontPackage ?? this.fontPackage,
+            overflow: overflow ?? this.overflow,
+        });
+    }
+
+    toCSSString() {
+        const css = {};
+        if (this.color) {
+            css.color = this.color.toCSSString ? this.color.toCSSString() : this.color;
+        }
+        if (this.fontSize) {
+            css.fontSize = typeof this.fontSize === 'number' ? `${this.fontSize}px` : this.fontSize;
+        }
+        if (this.fontWeight) {
+            css.fontWeight = this.fontWeight;
+        }
+        if (this.fontStyle) {
+            css.fontStyle = this.fontStyle;
+        }
+        if (this.fontFamily) {
+            css.fontFamily = this.fontFamily;
+        }
+        if (this.letterSpacing) {
+            css.letterSpacing = typeof this.letterSpacing === 'number' ? `${this.letterSpacing}px` : this.letterSpacing;
+        }
+        if (this.height) {
+            css.lineHeight = this.height;
+        }
+        if (this.decoration) {
+            css.textDecoration = this.decoration;
+        }
+        if (this.backgroundColor) {
+            css.backgroundColor = this.backgroundColor.toCSSString ? this.backgroundColor.toCSSString() : this.backgroundColor;
+        }
+        return css;
+    }
+
+    merge(other) {
+        if (!other) return this;
+        return this.copyWith({
+            inherit: other.inherit,
+            color: other.color,
+            backgroundColor: other.backgroundColor,
+            fontSize: other.fontSize,
+            fontWeight: other.fontWeight,
+            fontStyle: other.fontStyle,
+            letterSpacing: other.letterSpacing,
+            wordSpacing: other.wordSpacing,
+            textBaseline: other.textBaseline,
+            height: other.height,
+            leadingDistribution: other.leadingDistribution,
+            locale: other.locale,
+            foreground: other.foreground,
+            background: other.background,
+            shadows: other.shadows,
+            fontFeatures: other.fontFeatures,
+            decoration: other.decoration,
+            decorationColor: other.decorationColor,
+            decorationStyle: other.decorationStyle,
+            decorationThickness: other.decorationThickness,
+            debugLabel: other.debugLabel,
+            fontFamily: other.fontFamily,
+            fontFamilyFallback: other.fontFamilyFallback,
+            fontPackage: other.fontPackage,
+            overflow: other.overflow,
+        });
+    }
+}
+
+export { TextStyle };
+
diff --git a/packages/flutterjs_engine/package/material/src/utils/badge_theme.js b/packages/flutterjs_material/flutterjs_material/src/utils/badge_theme.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/badge_theme.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/badge_theme.js
diff --git a/packages/flutterjs_material/flutterjs_material/src/utils/border.js b/packages/flutterjs_material/flutterjs_material/src/utils/border.js
new file mode 100644
index 00000000..955528f5
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/utils/border.js
@@ -0,0 +1,59 @@
+export class Border {
+  constructor({
+    top = null,
+    right = null,
+    bottom = null,
+    left = null
+  } = {}) {
+    this.top = top || { width: 0, color: '#000000', style: 'solid' };
+    this.right = right || { width: 0, color: '#000000', style: 'solid' };
+    this.bottom = bottom || { width: 0, color: '#000000', style: 'solid' };
+    this.left = left || { width: 0, color: '#000000', style: 'solid' };
+  }
+
+  static all({ width = 1, color = '#000000', style = 'solid' } = {}) {
+    const side = { width, color, style };
+    return new Border({ top: side, right: side, bottom: side, left: side });
+  }
+
+  static symmetric({ vertical = null, horizontal = null } = {}) {
+    return new Border({
+      top: vertical,
+      bottom: vertical,
+      left: horizontal,
+      right: horizontal
+    });
+  }
+
+  toCSSString() {
+    const { width, color, style } = this.bottom;
+    return width > 0 ? `${width}px ${style} ${color}` : 'none';
+  }
+
+  toString() {
+    return `Border(top: ${this.top.width}px, right: ${this.right.width}px)`;
+  }
+}
+
+export class BorderSide {
+  constructor({ color = '#000000', width = 1.0, style = 'solid' } = {}) {
+    this.color = color;
+    this.width = width;
+    this.style = style;
+  }
+
+  /**
+   * Create a copy with overridden properties
+   */
+  copyWith({ color, width, style } = {}) {
+    return new BorderSide({
+      color: color ?? this.color,
+      width: width ?? this.width,
+      style: style ?? this.style
+    });
+  }
+
+  toString() {
+    return `BorderSide(color: ${this.color}, width: ${this.width}, style: ${this.style})`;
+  }
+}
\ No newline at end of file
diff --git a/packages/flutterjs_material/flutterjs_material/src/utils/border_radius.js b/packages/flutterjs_material/flutterjs_material/src/utils/border_radius.js
new file mode 100644
index 00000000..4b5d6468
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/utils/border_radius.js
@@ -0,0 +1,48 @@
+export class BorderRadius {
+    constructor({
+        topLeft = 0,
+        topRight = 0,
+        bottomLeft = 0,
+        bottomRight = 0
+    } = {}) {
+        this.topLeft = topLeft;
+        this.topRight = topRight;
+        this.bottomLeft = bottomLeft;
+        this.bottomRight = bottomRight;
+    }
+
+    static all(radius) {
+        return new BorderRadius({
+            topLeft: radius,
+            topRight: radius,
+            bottomLeft: radius,
+            bottomRight: radius
+        });
+    }
+
+    static circular(radius) {
+        return BorderRadius.all(radius);
+    }
+
+    static zero() {
+        return BorderRadius.all(0);
+    }
+
+    static only({
+        topLeft = 0,
+        topRight = 0,
+        bottomLeft = 0,
+        bottomRight = 0
+    } = {}) {
+        return new BorderRadius({
+            topLeft,
+            topRight,
+            bottomLeft,
+            bottomRight
+        });
+    }
+
+    resolve(direction) {
+        return this; // Simplified
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/utils/box_constraints.js b/packages/flutterjs_material/flutterjs_material/src/utils/box_constraints.js
new file mode 100644
index 00000000..97609ab1
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/utils/box_constraints.js
@@ -0,0 +1,101 @@
+import { Size } from "./geometry.js";
+
+export class BoxConstraints {
+    constructor(minWidth = 0, maxWidth = Infinity, minHeight = 0, maxHeight = Infinity) {
+        this.minWidth = minWidth;
+        this.maxWidth = maxWidth;
+        this.minHeight = minHeight;
+        this.maxHeight = maxHeight;
+    }
+
+    static tight(size) {
+        return new BoxConstraints(size.width, size.width, size.height, size.height);
+    }
+
+    static loose(size) {
+        return new BoxConstraints(0, size.width, 0, size.height);
+    }
+
+    static expand({ width = Infinity, height = Infinity } = {}) {
+        return new BoxConstraints(0, width, 0, height);
+    }
+
+    static tightFor({ width = null, height = null } = {}) {
+        return new BoxConstraints(
+            width ?? 0,
+            width ?? Infinity,
+            height ?? 0,
+            height ?? Infinity
+        );
+    }
+
+    get isTight() {
+        return this.minWidth === this.maxWidth && this.minHeight === this.maxHeight;
+    }
+
+    get isNormalized() {
+        return this.minWidth <= this.maxWidth && this.minHeight <= this.maxHeight;
+    }
+
+    debugAssertIsValid() {
+        if (!(this.minWidth >= 0 && this.maxWidth >= this.minWidth &&
+            this.minHeight >= 0 && this.maxHeight >= this.minHeight)) {
+            throw new Error(
+                `Invalid BoxConstraints: ${this.minWidth}..${this.maxWidth}, ${this.minHeight}..${this.maxHeight}`
+            );
+        }
+        return true;
+    }
+
+    constrain(size) {
+        return new Size(
+            Math.max(this.minWidth, Math.min(this.maxWidth, size.width)),
+            Math.max(this.minHeight, Math.min(this.maxHeight, size.height))
+        );
+    }
+
+    /**
+     * Returns a new BoxConstraints that respects the given constraints while being 
+     * as close as possible to the original constraints.
+     */
+    enforce(constraints) {
+        if (!constraints) return this;
+
+        return new BoxConstraints(
+            Math.max(this.minWidth, constraints.minWidth),
+            Math.min(this.maxWidth, constraints.maxWidth),
+            Math.max(this.minHeight, constraints.minHeight),
+            Math.min(this.maxHeight, constraints.maxHeight)
+        );
+    }
+
+    widthConstraints() {
+        return new BoxConstraints(this.minWidth, this.maxWidth, 0, Infinity);
+    }
+
+    heightConstraints() {
+        return new BoxConstraints(0, Infinity, this.minHeight, this.maxHeight);
+    }
+
+    tighten({ width = null, height = null } = {}) {
+        return new BoxConstraints(
+            width !== null ? Math.max(this.minWidth, width) : this.minWidth,
+            width !== null ? Math.min(this.maxWidth, width) : this.maxWidth,
+            height !== null ? Math.max(this.minHeight, height) : this.minHeight,
+            height !== null ? Math.min(this.maxHeight, height) : this.maxHeight
+        );
+    }
+
+    copyWith({ minWidth, maxWidth, minHeight, maxHeight } = {}) {
+        return new BoxConstraints(
+            minWidth ?? this.minWidth,
+            maxWidth ?? this.maxWidth,
+            minHeight ?? this.minHeight,
+            maxHeight ?? this.maxHeight
+        );
+    }
+
+    toString() {
+        return `BoxConstraints(${this.minWidth}..${this.maxWidth}, ${this.minHeight}..${this.maxHeight})`;
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/utils/box_shadow.js b/packages/flutterjs_material/flutterjs_material/src/utils/box_shadow.js
new file mode 100644
index 00000000..51bcb79b
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/utils/box_shadow.js
@@ -0,0 +1,22 @@
+import { Offset } from './geometry.js';
+export class BoxShadow {
+  constructor({
+    color = '#000000',
+    offset = Offset.zero(),
+    blurRadius = 0,
+    spreadRadius = 0
+  } = {}) {
+    this.color = (color && typeof color.toCSSString === 'function') ? color.toCSSString() : color;
+    this.offset = offset;
+    this.blurRadius = blurRadius;
+    this.spreadRadius = spreadRadius;
+  }
+
+  toCSSString() {
+    return `${this.offset.dx}px ${this.offset.dy}px ${this.blurRadius}px ${this.spreadRadius}px ${this.color}`;
+  }
+
+  toString() {
+    return `BoxShadow(color: ${this.color}, blur: ${this.blurRadius})`;
+  }
+}
\ No newline at end of file
diff --git a/packages/flutterjs_material/flutterjs_material/src/utils/build_helper.js b/packages/flutterjs_material/flutterjs_material/src/utils/build_helper.js
new file mode 100644
index 00000000..42e31e7b
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/utils/build_helper.js
@@ -0,0 +1,65 @@
+/**
+ * Build Helper Utilities
+ * 
+ * Provides helper functions for properly building widgets through the Element system.
+ * This fixes the architectural issue where widgets manually call .build() and expect
+ * VNodes, but actually get Widgets.
+ */
+
+/**
+ * Properly builds a widget to a VNode by creating an Element and going through
+ * the proper build lifecycle.
+ * 
+ * @param {Widget} widget - The widget to build
+ * @param {BuildContext} context - The build context
+ * @returns {VNode|string|null} - The built VNode
+ */
+export function buildChildWidget(widget, context) {
+    if (!widget) {
+        return null;
+    }
+
+    // If it's already a VNode or primitive, return as-is
+    if (typeof widget === 'string' || typeof widget === 'number') {
+        return String(widget);
+    }
+
+    if (widget.tag) {
+        // It's a VNode
+        return widget;
+    }
+
+    // Check if widget has createElement (i.e., it's a Widget)
+    if (!widget.createElement) {
+        console.warn('[buildChildWidget] Object is not a widget:', widget);
+        return null;
+    }
+
+    // Create an element for the widget
+    const element = widget.createElement(context.element, context.element.runtime);
+
+    // Mount the element (this sets up the element tree)
+    element.mount(context.element);
+
+    // Build and return the VNode
+    const vnode = element.performRebuild();
+
+    return vnode;
+}
+
+/**
+ * Builds an array of widgets to VNodes
+ * 
+ * @param {Array<Widget>} widgets - Array of widgets to build
+ * @param {BuildContext} context - The build context
+ * @returns {Array<VNode|string>} - Array of built VNodes
+ */
+export function buildChildWidgets(widgets, context) {
+    if (!widgets || !Array.isArray(widgets)) {
+        return [];
+    }
+
+    return widgets
+        .map(widget => buildChildWidget(widget, context))
+        .filter(vnode => vnode !== null);
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/utils/checkbox_theme.js b/packages/flutterjs_material/flutterjs_material/src/utils/checkbox_theme.js
new file mode 100644
index 00000000..9dfca95a
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/utils/checkbox_theme.js
@@ -0,0 +1,236 @@
+import { EdgeInsets } from './edge_insets.js';
+
+/**
+ * Material Design 3 Checkbox Theme
+ * Defines the visual properties of Checkbox widgets
+ * Follows Flutter Material Design 3 specification
+ * 
+ * Flutter Reference: https://api.flutter.dev/flutter/material/CheckboxThemeData-class.html
+ */
+export class CheckboxThemeData {
+  constructor({
+    // Colors
+    fillColor,
+    checkColor,
+    hoverColor,
+    overlayColor,
+    focusColor,
+
+    // Size & Padding
+    materialTapTargetSize = 'padded',
+    visualDensity,
+    side,
+    shape,
+    mouseCursor,
+
+    // States
+    splashRadius,
+
+    // Interaction
+    enableFeedback = true,
+    animationDuration = 200
+  } = {}) {
+    this.fillColor = fillColor;
+    this.checkColor = checkColor;
+    this.hoverColor = hoverColor;
+    this.overlayColor = overlayColor;
+    this.focusColor = focusColor;
+    this.materialTapTargetSize = materialTapTargetSize;
+    this.visualDensity = visualDensity;
+    this.side = side;
+    this.shape = shape;
+    this.mouseCursor = mouseCursor;
+    this.splashRadius = splashRadius ?? 20;
+    this.enableFeedback = enableFeedback;
+    this.animationDuration = animationDuration;
+  }
+
+  /**
+   * Get checkbox size based on tap target
+   * @returns {number} Size in pixels
+   */
+  getCheckboxSize() {
+    return this.materialTapTargetSize === 'padded' ? 48 : 40;
+  }
+
+  /**
+   * Convert to CSS object for DOM rendering
+   * @returns {Object} CSS style object
+   */
+  toCSSObject() {
+    return {
+      width: '20px',
+      height: '20px',
+      cursor: this.mouseCursor || 'pointer',
+      borderRadius: '2px',
+      transition: `all ${this.animationDuration}ms ease`,
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    };
+  }
+
+  /**
+   * Get fill color for checked state
+   * @param {Object} themeColors - Theme colors object
+   * @returns {string} Hex color value
+   */
+  getFillColor(themeColors = {}) {
+    return this.fillColor || themeColors.primary || '#6750A4';
+  }
+
+  /**
+   * Get check icon color
+   * @param {Object} themeColors - Theme colors object
+   * @returns {string} Hex color value
+   */
+  getCheckColor(themeColors = {}) {
+    return this.checkColor || themeColors.onPrimary || '#FFFFFF';
+  }
+
+  /**
+   * Get hover color
+   * @param {Object} themeColors - Theme colors object
+   * @returns {string} Hex color value
+   */
+  getHoverColor(themeColors = {}) {
+    return this.hoverColor || themeColors.primary + '14' || '#6750A414';
+  }
+
+  /**
+   * Get focus color
+   * @param {Object} themeColors - Theme colors object
+   * @returns {string} Hex color value
+   */
+  getFocusColor(themeColors = {}) {
+    return this.focusColor || themeColors.primary + '24' || '#6750A424';
+  }
+
+  /**
+   * Get unchecked state CSS object
+   * @param {Object} themeColors - Theme colors object
+   * @returns {Object} CSS properties
+   */
+  getUncheckedStyle(themeColors = {}) {
+    return {
+      ...this.toCSSObject(),
+      border: `2px solid ${themeColors.onSurfaceVariant || '#79747E'}`,
+      backgroundColor: 'transparent'
+    };
+  }
+
+  /**
+   * Get checked state CSS object
+   * @param {Object} themeColors - Theme colors object
+   * @returns {Object} CSS properties
+   */
+  getCheckedStyle(themeColors = {}) {
+    return {
+      ...this.toCSSObject(),
+      backgroundColor: this.getFillColor(themeColors),
+      border: `2px solid ${this.getFillColor(themeColors)}`
+    };
+  }
+
+  /**
+   * Get disabled state CSS object
+   * @param {Object} themeColors - Theme colors object
+   * @returns {Object} CSS properties
+   */
+  getDisabledStyle(themeColors = {}) {
+    return {
+      ...this.toCSSObject(),
+      opacity: 0.38,
+      cursor: 'not-allowed',
+      pointerEvents: 'none'
+    };
+  }
+
+  /**
+   * Get hover state CSS object
+   * @param {Object} themeColors - Theme colors object
+   * @returns {Object} CSS properties
+   */
+  getHoverStyle(themeColors = {}) {
+    return {
+      backgroundColor: this.getHoverColor(themeColors)
+    };
+  }
+
+  /**
+   * Get focus state CSS object
+   * @param {Object} themeColors - Theme colors object
+   * @returns {Object} CSS properties
+   */
+  getFocusStyle(themeColors = {}) {
+    return {
+      outline: 'none',
+      boxShadow: `0 0 0 ${this.splashRadius}px ${this.getFocusColor(themeColors)}`
+    };
+  }
+
+  /**
+   * Copy this theme with updated properties
+   * @param {Object} properties - Properties to override
+   * @returns {CheckboxThemeData} New theme instance
+   */
+  copyWith({
+    fillColor,
+    checkColor,
+    hoverColor,
+    overlayColor,
+    focusColor,
+    materialTapTargetSize,
+    visualDensity,
+    side,
+    shape,
+    mouseCursor,
+    splashRadius,
+    enableFeedback,
+    animationDuration
+  } = {}) {
+    return new CheckboxThemeData({
+      fillColor: fillColor ?? this.fillColor,
+      checkColor: checkColor ?? this.checkColor,
+      hoverColor: hoverColor ?? this.hoverColor,
+      overlayColor: overlayColor ?? this.overlayColor,
+      focusColor: focusColor ?? this.focusColor,
+      materialTapTargetSize: materialTapTargetSize ?? this.materialTapTargetSize,
+      visualDensity: visualDensity ?? this.visualDensity,
+      side: side ?? this.side,
+      shape: shape ?? this.shape,
+      mouseCursor: mouseCursor ?? this.mouseCursor,
+      splashRadius: splashRadius ?? this.splashRadius,
+      enableFeedback: enableFeedback ?? this.enableFeedback,
+      animationDuration: animationDuration ?? this.animationDuration
+    });
+  }
+
+  /**
+   * Merge with another CheckboxThemeData
+   * @param {CheckboxThemeData} other - Theme to merge with
+   * @returns {CheckboxThemeData} Merged theme
+   */
+  merge(other) {
+    if (!other) return this;
+    return this.copyWith({
+      fillColor: other.fillColor,
+      checkColor: other.checkColor,
+      hoverColor: other.hoverColor,
+      overlayColor: other.overlayColor,
+      focusColor: other.focusColor,
+      materialTapTargetSize: other.materialTapTargetSize,
+      visualDensity: other.visualDensity,
+      side: other.side,
+      shape: other.shape,
+      mouseCursor: other.mouseCursor,
+      splashRadius: other.splashRadius,
+      enableFeedback: other.enableFeedback,
+      animationDuration: other.animationDuration
+    });
+  }
+
+  toString() {
+    return `CheckboxThemeData(fillColor: ${this.fillColor}, checkColor: ${this.checkColor})`;
+  }
+}
\ No newline at end of file
diff --git a/packages/flutterjs_material/flutterjs_material/src/utils/color.js b/packages/flutterjs_material/flutterjs_material/src/utils/color.js
new file mode 100644
index 00000000..9d47fa02
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/utils/color.js
@@ -0,0 +1,169 @@
+class Color {
+  constructor(value) {
+    if (typeof value === 'string') {
+      // Handle hex strings: #RRGGBB or #AARRGGBB
+      const hex = value.replace('#', '');
+      const num = parseInt(hex, 16);
+      if (hex.length === 6) {
+        this._value = (0xFF << 24) | num; // Opaque by default
+      } else if (hex.length === 8) {
+        this._value = num;
+      } else {
+        throw new Error('Invalid hex color string');
+      }
+      this._css = value.length === 7 ? `${value}FF` : value.toUpperCase();
+    } else if (typeof value === 'number') {
+      this._value = value >>> 0; // Ensure unsigned 32-bit
+      const a = (this._value >> 24) & 0xFF;
+      const r = (this._value >> 16) & 0xFF;
+      const g = (this._value >> 8) & 0xFF;
+      const b = this._value & 0xFF;
+      this._css = a === 255
+        ? `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`.toUpperCase()
+        : `#${a.toString(16).padStart(2, '0')}${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`.toUpperCase();
+    } else {
+      throw new Error('Color value must be a hex string or integer');
+    }
+  }
+
+  // --- Static Constructors ---
+
+  static fromARGB(a, r, g, b) {
+    const value = ((a & 0xFF) << 24) | ((r & 0xFF) << 16) | ((g & 0xFF) << 8) | (b & 0xFF);
+    return new Color(value);
+  }
+
+  static fromRGBO(r, g, b, opacity) {
+    if (opacity < 0 || opacity > 1) {
+      throw new Error('Opacity must be between 0.0 and 1.0');
+    }
+    const a = Math.round(opacity * 255);
+    return Color.fromARGB(a, r, g, b);
+  }
+
+  static fromHex(hex) {
+    if (!/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(hex)) {
+      throw new Error('Invalid hex color format. Use #RRGGBB or #AARRGGBB');
+    }
+    return new Color(hex);
+  }
+
+  // --- Instance Methods ---
+
+  withAlpha(alpha) {
+    if (alpha < 0 || alpha > 255) {
+      throw new Error('Alpha must be between 0 and 255');
+    }
+    const r = this.red;
+    const g = this.green;
+    const b = this.blue;
+    return Color.fromARGB(alpha, r, g, b);
+  }
+
+  withOpacity(opacity) {
+    if (opacity < 0 || opacity > 1) {
+      throw new Error('Opacity must be between 0.0 and 1.0');
+    }
+    const alpha = Math.round(opacity * 255);
+    return this.withAlpha(alpha);
+  }
+
+  // --- Getters ---
+
+  get red() {
+    return (this._value >> 16) & 0xFF;
+  }
+
+  get green() {
+    return (this._value >> 8) & 0xFF;
+  }
+
+  get blue() {
+    return this._value & 0xFF;
+  }
+
+  get alpha() {
+    return (this._value >> 24) & 0xFF;
+  }
+
+  get opacity() {
+    return this.alpha / 255;
+  }
+
+  get value() {
+    return this._value;
+  }
+
+  get hex() {
+    const a = this.alpha.toString(16).padStart(2, '0');
+    const r = this.red.toString(16).padStart(2, '0');
+    const g = this.green.toString(16).padStart(2, '0');
+    const b = this.blue.toString(16).padStart(2, '0');
+    return `#${a}${r}${g}${b}`.toUpperCase();
+  }
+
+  // --- Output ---
+
+  toCSSString() {
+    if (this.alpha === 255) {
+      // hex is #AARRGGBB
+      // We want #RRGGBB
+      // So we take '#' and then everything after the first 2 chars (AA)
+      return '#' + this.hex.slice(3);
+    } else {
+      const r = this.red;
+      const g = this.green;
+      const b = this.blue;
+      const a = (this.alpha / 255).toFixed(4).replace(/\.?0+$/, '');
+      return `rgba(${r}, ${g}, ${b}, ${a})`;
+    }
+  }
+
+  toString() {
+    return this.toCSSString();
+  }
+
+  computeLuminance() {
+    // See https://www.w3.org/TR/WCAG20/#relativeluminancedef
+    const R = this.red / 255.0;
+    const G = this.green / 255.0;
+    const B = this.blue / 255.0;
+    const r = R <= 0.03928 ? R / 12.92 : Math.pow((R + 0.055) / 1.055, 2.4);
+    const g = G <= 0.03928 ? G / 12.92 : Math.pow((G + 0.055) / 1.055, 2.4);
+    const b = B <= 0.03928 ? B / 12.92 : Math.pow((B + 0.055) / 1.055, 2.4);
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  }
+}
+
+class MaterialColor extends Color {
+  constructor(primary, swatch) {
+    super(primary);
+    this.swatch = swatch;
+  }
+
+  get(index) {
+    return this.swatch[index];
+  }
+
+  static isDark(color) {
+    if (!color) return false;
+    let c;
+    if (color instanceof Color) {
+      c = color;
+    } else if (typeof color === 'string') {
+      // Try to parse hex
+      try {
+        c = new Color(color);
+      } catch (e) {
+        return false;
+      }
+    } else if (typeof color === 'object' && color.value) {
+      c = new Color(color.value);
+    } else {
+      return false;
+    }
+    return c.computeLuminance() < 0.5;
+  }
+}
+
+export { Color, MaterialColor };
\ No newline at end of file
diff --git a/packages/flutterjs_material/flutterjs_material/src/utils/color_resolver.js b/packages/flutterjs_material/flutterjs_material/src/utils/color_resolver.js
new file mode 100644
index 00000000..57c2e100
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/utils/color_resolver.js
@@ -0,0 +1,95 @@
+import { Color } from './color.js';
+import { Theme } from '../material/theme.js';
+
+/**
+ * Color Resolver Utility
+ * 
+ * Centralized logic for resolving widget colors.
+ * Handles the priority:
+ * 1. Widget-specific override (passed in constructor/props)
+ * 2. Component-specific theme override (ThemeData.componentTheme)
+ * 3. General Theme default (ThemeData.colorScheme.*)
+ * 4. Hard fallback (if everything else fails)
+ */
+
+/**
+ * Resolve a color value to a CSS string or hex string
+ * @param {string|Color|Object} color - The color value to resolve
+ * @returns {string|null} The resolved CSS color string or null
+ */
+export function resolveColorValue(color) {
+    if (!color) return null;
+
+    if (typeof color === 'string') {
+        return color;
+    }
+
+    if (color instanceof Color) {
+        return color.toCSSString();
+    }
+
+    if (typeof color === 'object') {
+        if (typeof color.toCSSString === 'function') {
+            return color.toCSSString();
+        }
+        if (color.value !== undefined) {
+            return new Color(color.value).toCSSString();
+        }
+    }
+
+    return null; // Unknown type
+}
+
+/**
+ * Resolves a specific color property for a widget
+ * @param {Object} params
+ * @param {any} params.value - The widget's instance property value
+ * @param {any} params.themeValue - The component theme's property value
+ * @param {any} params.defaultValue - The fallback system theme value (e.g. theme.colorScheme.primary)
+ * @returns {string} The final resolved CSS color string
+ */
+export function resolveColor(value, themeValue, defaultValue) {
+    const resolvedValue = resolveColorValue(value);
+    if (resolvedValue) return resolvedValue;
+
+    const resolvedThemeValue = resolveColorValue(themeValue);
+    if (resolvedThemeValue) return resolvedThemeValue;
+
+    return resolveColorValue(defaultValue);
+}
+
+/**
+ * Helper to get the correct content color (OnColor) based on a background color
+ * This is a simplified version of standard material elevation/contrast checking.
+ * 
+ * @param {string} backgroundColor - The background color
+ * @param {ThemeData} theme - The current theme data
+ * @returns {string} The suggested content color (e.g. valid CSS color)
+ */
+export function resolveOnColor(backgroundColor, theme) {
+    // If not provided, assume surface
+    const bg = resolveColorValue(backgroundColor) || theme.colorScheme.surface;
+
+    // Check if background matches standard theme colors to return their paired 'on' color
+    // This is a heuristic; robust implementation would calculate luminance.
+
+    const scheme = theme.colorScheme;
+
+    // Normalize for comparison (basic check, not case sensitive)
+    const bgLower = bg.toLowerCase();
+
+    // Helper to compare
+    const matches = (themeColor) => resolveColorValue(themeColor)?.toLowerCase() === bgLower;
+
+    if (matches(scheme.primary)) return resolveColorValue(scheme.onPrimary);
+    if (matches(scheme.secondary)) return resolveColorValue(scheme.onSecondary);
+    if (matches(scheme.tertiary)) return resolveColorValue(scheme.onTertiary);
+    if (matches(scheme.error)) return resolveColorValue(scheme.onError);
+    if (matches(scheme.surface)) return resolveColorValue(scheme.onSurface);
+    if (matches(scheme.background)) return resolveColorValue(scheme.onBackground);
+    if (matches(scheme.surfaceVariant)) return resolveColorValue(scheme.onSurfaceVariant);
+    if (matches(scheme.inverseSurface)) return resolveColorValue(scheme.onInverseSurface);
+
+    // Fallback: simple light/dark check could go here, but for now default to onSurface
+    return resolveColorValue(scheme.onSurface);
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/utils/colors_theme.js b/packages/flutterjs_material/flutterjs_material/src/utils/colors_theme.js
new file mode 100644
index 00000000..1c89dacf
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/utils/colors_theme.js
@@ -0,0 +1,322 @@
+import { Color } from './color.js';
+
+/**
+ * Material Design 3 Color Theme System
+ * Defines all colors used throughout the Material Design system
+ * Follows Flutter Material Design 3 specification
+ * 
+ * Flutter Reference: https://api.flutter.dev/flutter/material/Colors-class.html
+ */
+export class ColorsTheme {
+  constructor() {
+    // ========== PRIMARY COLOR SYSTEM ==========
+    this.primary = '#6750A4';
+    this.onPrimary = '#FFFFFF';
+    this.primaryContainer = '#EADDFF';
+    this.onPrimaryContainer = '#21005E';
+
+    // ========== SECONDARY COLOR SYSTEM ==========
+    this.secondary = '#625B71';
+    this.onSecondary = '#FFFFFF';
+    this.secondaryContainer = '#E8DEF8';
+    this.onSecondaryContainer = '#1D192B';
+
+    // ========== TERTIARY COLOR SYSTEM ==========
+    this.tertiary = '#7D5260';
+    this.onTertiary = '#FFFFFF';
+    this.tertiaryContainer = '#FFD8E4';
+    this.onTertiaryContainer = '#31111D';
+
+    // ========== ERROR COLOR SYSTEM ==========
+    this.error = '#B3261E';
+    this.onError = '#FFFFFF';
+    this.errorContainer = '#F9DEDC';
+    this.onErrorContainer = '#410E0B';
+
+    // ========== NEUTRAL COLOR SYSTEM ==========
+    this.background = '#FFFBFE';
+    this.onBackground = '#1C1B1F';
+    this.surface = '#FFFBFE';
+    this.onSurface = '#1C1B1F';
+    this.surfaceVariant = '#E7E0EC';
+    this.onSurfaceVariant = '#49454E';
+    this.outline = '#79747E';
+    this.outlineVariant = '#CAC7D0';
+    this.scrim = '#000000';
+
+    // ========== INVERSE COLORS ==========
+    this.inverseSurface = '#313033';
+    this.inverseOnSurface = '#F4EFF4';
+    this.inversePrimary = '#D0BCFF';
+
+    // ========== SHADOW COLOR ==========
+    this.shadow = '#000000';
+  }
+
+  /**
+   * Create a light theme color scheme
+   * @param {Object} config - Color overrides
+   * @returns {ColorsTheme} Light theme instance
+   * 
+   * @example
+   * const lightTheme = ColorsTheme.light({
+   *   primary: '#FF6B6B'
+   * });
+   */
+  static light(config = {}) {
+    const colors = new ColorsTheme();
+    return Object.assign(colors, config);
+  }
+
+  /**
+   * Create a dark theme color scheme
+   * @param {Object} config - Color overrides
+   * @returns {ColorsTheme} Dark theme instance
+   * 
+   * @example
+   * const darkTheme = ColorsTheme.dark({
+   *   primary: '#D0BCFF'
+   * });
+   */
+  static dark(config = {}) {
+    const colors = new ColorsTheme();
+    const darkConfig = {
+      // Primary (inverted for dark)
+      primary: '#D0BCFF',
+      onPrimary: '#371E55',
+      primaryContainer: '#4F378B',
+      onPrimaryContainer: '#EADDFF',
+
+      // Secondary (inverted for dark)
+      secondary: '#CCC7D8',
+      onSecondary: '#332D41',
+      secondaryContainer: '#4A4458',
+      onSecondaryContainer: '#E8DEF8',
+
+      // Tertiary (inverted for dark)
+      tertiary: '#FFB8C8',
+      onTertiary: '#492532',
+      tertiaryContainer: '#633B48',
+      onTertiaryContainer: '#FFD8E4',
+
+      // Error (stays similar)
+      error: '#F2B8B5',
+      onError: '#601410',
+      errorContainer: '#8C1D18',
+      onErrorContainer: '#F9DEDC',
+
+      // Neutral (inverted)
+      background: '#1C1B1F',
+      onBackground: '#E7E1E6',
+      surface: '#1C1B1F',
+      onSurface: '#E7E1E6',
+      surfaceVariant: '#49454E',
+      onSurfaceVariant: '#CAC7D0',
+      outline: '#938F99',
+      outlineVariant: '#49454E',
+
+      // Inverse
+      inverseSurface: '#E7E1E6',
+      inverseOnSurface: '#313033',
+      inversePrimary: '#6750A4',
+
+      ...config
+    };
+
+    return Object.assign(colors, darkConfig);
+  }
+
+  /**
+   * Create high contrast theme
+   * @param {Object} config - Color overrides
+   * @returns {ColorsTheme} High contrast theme instance
+   */
+  static highContrast(config = {}) {
+    const colors = new ColorsTheme();
+    const highContrastConfig = {
+      primary: '#000000',
+      onPrimary: '#FFFFFF',
+      primaryContainer: '#000000',
+      onPrimaryContainer: '#FFFFFF',
+
+      secondary: '#000000',
+      onSecondary: '#FFFFFF',
+      secondaryContainer: '#000000',
+      onSecondaryContainer: '#FFFFFF',
+
+      tertiary: '#000000',
+      onTertiary: '#FFFFFF',
+      tertiaryContainer: '#000000',
+      onTertiaryContainer: '#FFFFFF',
+
+      error: '#990000',
+      onError: '#FFFFFF',
+      errorContainer: '#990000',
+      onErrorContainer: '#FFFFFF',
+
+      background: '#FFFFFF',
+      onBackground: '#000000',
+      surface: '#FFFFFF',
+      onSurface: '#000000',
+      surfaceVariant: '#FFFFFF',
+      onSurfaceVariant: '#000000',
+      outline: '#000000',
+      outlineVariant: '#000000',
+
+      ...config
+    };
+
+    return Object.assign(colors, highContrastConfig);
+  }
+
+  /**
+   * Create custom theme from primary color
+   * Generates complementary colors automatically
+   * @param {string} primaryColor - Primary hex color
+   * @param {Object} config - Additional overrides
+   * @returns {ColorsTheme} Custom theme instance
+   * 
+   * @example
+   * const customTheme = ColorsTheme.fromPrimary('#FF6B6B');
+   */
+  static fromPrimary(primaryColor, config = {}) {
+    const colors = new ColorsTheme();
+    const color = new Color(primaryColor);
+
+    return Object.assign(colors, {
+      primary: primaryColor,
+      onPrimary: '#FFFFFF',
+      primaryContainer: `${primaryColor}20`, // 20% opacity
+      onPrimaryContainer: '#1C1B1F',
+      ...config
+    });
+  }
+
+  /**
+   * Get color by name
+   * @param {string} name - Color name
+   * @returns {string} Hex color value
+   * 
+   * @example
+   * theme.getColor('primary') // '#6750A4'
+   */
+  getColor(name) {
+    return this[name] ?? null;
+  }
+
+  /**
+   * Get all colors as object
+   * @returns {Object} All theme colors
+   */
+  getAllColors() {
+    return {
+      // Primary
+      primary: this.primary,
+      onPrimary: this.onPrimary,
+      primaryContainer: this.primaryContainer,
+      onPrimaryContainer: this.onPrimaryContainer,
+
+      // Secondary
+      secondary: this.secondary,
+      onSecondary: this.onSecondary,
+      secondaryContainer: this.secondaryContainer,
+      onSecondaryContainer: this.onSecondaryContainer,
+
+      // Tertiary
+      tertiary: this.tertiary,
+      onTertiary: this.onTertiary,
+      tertiaryContainer: this.tertiaryContainer,
+      onTertiaryContainer: this.onTertiaryContainer,
+
+      // Error
+      error: this.error,
+      onError: this.onError,
+      errorContainer: this.errorContainer,
+      onErrorContainer: this.onErrorContainer,
+
+      // Neutral
+      background: this.background,
+      onBackground: this.onBackground,
+      surface: this.surface,
+      onSurface: this.onSurface,
+      surfaceVariant: this.surfaceVariant,
+      onSurfaceVariant: this.onSurfaceVariant,
+      outline: this.outline,
+      outlineVariant: this.outlineVariant,
+
+      // Inverse
+      inverseSurface: this.inverseSurface,
+      inverseOnSurface: this.inverseOnSurface,
+      inversePrimary: this.inversePrimary,
+
+      // Shadow
+      shadow: this.shadow,
+      scrim: this.scrim
+    };
+  }
+
+  /**
+   * Generate CSS variables for all colors
+   * @returns {string} CSS variable declarations
+   * 
+   * @example
+   * const css = theme.toCSSVariables();
+   * // Output: --color-primary: #6750A4; ...
+   */
+  toCSSVariables() {
+    const colors = this.getAllColors();
+    let css = ':root {\n';
+
+    for (const [name, value] of Object.entries(colors)) {
+      const cssVarName = `--color-${name.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+      css += `  ${cssVarName}: ${value};\n`;
+    }
+
+    css += '}';
+    return css;
+  }
+
+  /**
+   * Get color with opacity applied
+   * @param {string} colorName - Name of color
+   * @param {number} opacity - Opacity value (0.0 to 1.0)
+   * @returns {string} RGBA color value
+   * 
+   * @example
+   * theme.withOpacity('primary', 0.5) // 'rgba(103, 80, 164, 0.5)'
+   */
+  withOpacity(colorName, opacity) {
+    const hex = this.getColor(colorName);
+    if (!hex) return null;
+
+    const color = new Color(hex);
+    const r = color.red;
+    const g = color.green;
+    const b = color.blue;
+
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+
+  /**
+   * Copy this theme with updated colors
+   * @param {Object} colors - Colors to override
+   * @returns {ColorsTheme} New theme instance
+   */
+  copyWith(colors = {}) {
+    return Object.assign(new ColorsTheme(), this, colors);
+  }
+
+  /**
+   * Merge with another color theme
+   * @param {ColorsTheme} other - Theme to merge with
+   * @returns {ColorsTheme} Merged theme
+   */
+  merge(other) {
+    if (!other) return this;
+    return this.copyWith(other.getAllColors());
+  }
+
+  toString() {
+    return `ColorsTheme(primary: ${this.primary}, secondary: ${this.secondary})`;
+  }
+}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/utils/decoration/decoration.js b/packages/flutterjs_material/flutterjs_material/src/utils/decoration/decoration.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/decoration/decoration.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/decoration/decoration.js
diff --git a/packages/flutterjs_material/flutterjs_material/src/utils/dialog_theme.js b/packages/flutterjs_material/flutterjs_material/src/utils/dialog_theme.js
new file mode 100644
index 00000000..fd4e1ce1
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/utils/dialog_theme.js
@@ -0,0 +1,31 @@
+import { Color } from '../utils/color.js';
+import { EdgeInsets } from '../utils/edge_insets.js';
+
+/**
+ * DialogTheme - Theme data for Dialogs
+ */
+class DialogTheme {
+    constructor({
+        backgroundColor,
+        elevation,
+        shadowColor = 'rgba(0, 0, 0, 0.2)',
+        surfaceTintColor,
+        shape,
+        alignment,
+        titleTextStyle,
+        contentTextStyle,
+        actionsPadding
+    } = {}) {
+        this.backgroundColor = backgroundColor;
+        this.elevation = elevation;
+        this.shadowColor = shadowColor;
+        this.surfaceTintColor = surfaceTintColor;
+        this.shape = shape;
+        this.alignment = alignment;
+        this.titleTextStyle = titleTextStyle;
+        this.contentTextStyle = contentTextStyle;
+        this.actionsPadding = actionsPadding;
+    }
+}
+
+export { DialogTheme };
diff --git a/packages/flutterjs_engine/package/material/src/utils/divider_theme.js b/packages/flutterjs_material/flutterjs_material/src/utils/divider_theme.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/divider_theme.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/divider_theme.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/duration.js b/packages/flutterjs_material/flutterjs_material/src/utils/duration.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/duration.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/duration.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/edge_insets.js b/packages/flutterjs_material/flutterjs_material/src/utils/edge_insets.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/edge_insets.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/edge_insets.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/geometry.js b/packages/flutterjs_material/flutterjs_material/src/utils/geometry.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/geometry.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/geometry.js
diff --git a/packages/flutterjs_material/flutterjs_material/src/utils/input_decoration.js b/packages/flutterjs_material/flutterjs_material/src/utils/input_decoration.js
new file mode 100644
index 00000000..2ff613ad
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/utils/input_decoration.js
@@ -0,0 +1,49 @@
+// export class InputDecoration {
+//   constructor({
+//     hintText = '',
+//     labelText = '',
+//     helperText = '',
+//     errorText = '',
+//     prefixIcon = null,
+//     suffixIcon = null,
+//     filled = false,
+//     fillColor = '#f5f5f5',
+//     border = null,
+//     enabledBorder = null,
+//     focusedBorder = null,
+//     errorBorder = null,
+//     contentPadding = null,
+//     isDense = false,
+//     isCollapsed = false,
+//     counterText = '',
+//     maxLength = null
+//   } = {}) {
+//     this.hintText = hintText;
+//     this.labelText = labelText;
+//     this.helperText = helperText;
+//     this.errorText = errorText;
+//     this.prefixIcon = prefixIcon;
+//     this.suffixIcon = suffixIcon;
+//     this.filled = filled;
+//     this.fillColor = fillColor;
+//     this.border = border;
+//     this.enabledBorder = enabledBorder;
+//     this.focusedBorder = focusedBorder;
+//     this.errorBorder = errorBorder;
+//     this.contentPadding = contentPadding || EdgeInsets.symmetric({ horizontal: 12, vertical: 8 });
+//     this.isDense = isDense;
+//     this.isCollapsed = isCollapsed;
+//     this.counterText = counterText;
+//     this.maxLength = maxLength;
+//   }
+
+//   getContentPadding() {
+//     if (this.isCollapsed) return EdgeInsets.zero();
+//     if (this.isDense) return EdgeInsets.all(8);
+//     return this.contentPadding;
+//   }
+
+//   toString() {
+//     return `InputDecoration(label: ${this.labelText}, hint: ${this.hintText})`;
+//   }
+// }
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/utils/linear_gradient.js b/packages/flutterjs_material/flutterjs_material/src/utils/linear_gradient.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/linear_gradient.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/linear_gradient.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/motion_theme.js b/packages/flutterjs_material/flutterjs_material/src/utils/motion_theme.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/motion_theme.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/motion_theme.js
diff --git a/packages/flutterjs_material/flutterjs_material/src/utils/progress_indicator_theme.js b/packages/flutterjs_material/flutterjs_material/src/utils/progress_indicator_theme.js
new file mode 100644
index 00000000..b18082fc
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/utils/progress_indicator_theme.js
@@ -0,0 +1,22 @@
+import { Color } from '../utils/color.js';
+
+/**
+ * ProgressIndicatorThemeData - Theme data for progress indicators
+ */
+class ProgressIndicatorThemeData {
+    constructor({
+        color = null,
+        linearTrackColor = null,
+        circularTrackColor = null,
+        minHeight = null,
+        refreshBackgroundColor = null
+    } = {}) {
+        this.color = color;
+        this.linearTrackColor = linearTrackColor;
+        this.circularTrackColor = circularTrackColor;
+        this.minHeight = minHeight;
+        this.refreshBackgroundColor = refreshBackgroundColor;
+    }
+}
+
+export { ProgressIndicatorThemeData };
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/alignment.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/alignment.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/alignment.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/alignment.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/alignment_directional.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/alignment_directional.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/alignment_directional.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/alignment_directional.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/axis.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/axis.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/axis.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/axis.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/axis_direction.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/axis_direction.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/axis_direction.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/axis_direction.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/blend_mode.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/blend_mode.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/blend_mode.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/blend_mode.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/border_style.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/border_style.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/border_style.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/border_style.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/box_fit.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/box_fit.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/box_fit.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/box_fit.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/box_shape.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/box_shape.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/box_shape.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/box_shape.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/clip.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/clip.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/clip.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/clip.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/cross_axis_alignment.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/cross_axis_alignment.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/cross_axis_alignment.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/cross_axis_alignment.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/decoration_position.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/decoration_position.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/decoration_position.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/decoration_position.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/filter_quality.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/filter_quality.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/filter_quality.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/filter_quality.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/flex_fit.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/flex_fit.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/flex_fit.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/flex_fit.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/font_style.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/font_style.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/font_style.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/font_style.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/font_weight.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/font_weight.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/font_weight.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/font_weight.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/horizontal_direction.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/horizontal_direction.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/horizontal_direction.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/horizontal_direction.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/keyboard_type.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/keyboard_type.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/keyboard_type.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/keyboard_type.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/main_axis_alignment.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/main_axis_alignment.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/main_axis_alignment.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/main_axis_alignment.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/main_axis_size.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/main_axis_size.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/main_axis_size.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/main_axis_size.js
diff --git a/packages/flutterjs_material/flutterjs_material/src/utils/property/other.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/other.js
new file mode 100644
index 00000000..35218ff5
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/utils/property/other.js
@@ -0,0 +1,266 @@
+/**
+ * Shadow - Shadow properties
+ */
+const ShadowType = Object.freeze({
+  none: 'none',
+  elevation: 'elevation',
+  custom: 'custom'
+});
+
+/**
+ * Brightness - Light or dark theme
+ */
+const Brightness = Object.freeze({
+  light: 'light',
+  dark: 'dark'
+});
+
+/**
+ * MaterialType - Material design surface types
+ */
+const MaterialType = Object.freeze({
+  canvas: 'canvas',
+  card: 'card',
+  circle: 'circle',
+  button: 'button',
+  transparency: 'transparency'
+});
+
+/**
+ * ============================================================================
+ * SCROLL & OVERFLOW ENUMS
+ * ============================================================================
+ */
+
+/**
+ * ScrollDirection - Direction scrolling happens
+ */
+const ScrollDirection = Object.freeze({
+  idle: 'idle',
+  forward: 'forward',
+  reverse: 'reverse'
+});
+
+/**
+ * ScrollPhysics - How scrolling behaves
+ */
+const ScrollPhysics = Object.freeze({
+  bouncingScrollPhysics: 'bouncingScrollPhysics',    // iOS style bounce
+  clampingScrollPhysics: 'clampingScrollPhysics',    // Android style
+  neverScrollableScrollPhysics: 'neverScrollableScrollPhysics'  // No scroll
+});
+
+/**
+ * DragStartBehavior - When drag recognition starts
+ */
+const DragStartBehavior = Object.freeze({
+  down: 'down',       // Recognize at pointer down
+  start: 'start'      // Recognize at pointer move
+});
+
+/**
+ * ============================================================================
+ * ANIMATION & TRANSITION ENUMS
+ * ============================================================================
+ */
+
+/**
+ * AnimationStatus - State of animation
+ */
+const AnimationStatus = Object.freeze({
+  dismissed: 'dismissed',
+  forward: 'forward',
+  reverse: 'reverse',
+  completed: 'completed'
+});
+
+/**
+ * Curve - Animation timing curves
+ */
+const Curve = Object.freeze({
+  linear: 'linear',
+  decelerate: 'decelerate',
+  fastLinearToSlowCurveEaseInToEaseOut: 'fastLinearToSlowCurveEaseInToEaseOut',
+  ease: 'ease',
+  easeIn: 'easeIn',
+  easeInToLinear: 'easeInToLinear',
+  easeInSine: 'easeInSine',
+  easeInQuad: 'easeInQuad',
+  easeInCubic: 'easeInCubic',
+  easeInQuart: 'easeInQuart',
+  easeInQuint: 'easeInQuint',
+  easeInExpo: 'easeInExpo',
+  easeInCirc: 'easeInCirc',
+  easeInBack: 'easeInBack',
+  easeOut: 'easeOut',
+  linearToEaseOut: 'linearToEaseOut',
+  easeOutSine: 'easeOutSine',
+  easeOutQuad: 'easeOutQuad',
+  easeOutCubic: 'easeOutCubic',
+  easeOutQuart: 'easeOutQuart',
+  easeOutQuint: 'easeOutQuint',
+  easeOutExpo: 'easeOutExpo',
+  easeOutCirc: 'easeOutCirc',
+  easeOutBack: 'easeOutBack',
+  easeInOut: 'easeInOut',
+  easeInOutSine: 'easeInOutSine',
+  easeInOutQuad: 'easeInOutQuad',
+  easeInOutCubic: 'easeInOutCubic',
+  easeInOutQuart: 'easeInOutQuart',
+  easeInOutQuint: 'easeInOutQuint',
+  easeInOutExpo: 'easeInOutExpo',
+  easeInOutCirc: 'easeInOutCirc',
+  easeInOutBack: 'easeInOutBack',
+  fastOutSlowIn: 'fastOutSlowIn',
+  slowMiddle: 'slowMiddle',
+  elasticIn: 'elasticIn',
+  elasticOut: 'elasticOut',
+  elasticInOut: 'elasticInOut',
+  bounceIn: 'bounceIn',
+  bounceOut: 'bounceOut',
+  bounceInOut: 'bounceInOut'
+});
+
+/**
+ * ============================================================================
+ * DIALOG & NAVIGATION ENUMS
+ * ============================================================================
+ */
+
+/**
+ * RouteType - Type of route navigation
+ */
+const RouteType = Object.freeze({
+  material: 'material',
+  cupertino: 'cupertino',
+  fade: 'fade'
+});
+
+/**
+ * TransitionType - How routes transition
+ */
+const TransitionType = Object.freeze({
+  fadeIn: 'fadeIn',
+  slideInFromLeft: 'slideInFromLeft',
+  slideInFromRight: 'slideInFromRight',
+  slideInFromTop: 'slideInFromTop',
+  slideInFromBottom: 'slideInFromBottom',
+  scale: 'scale',
+  rotate: 'rotate'
+});
+
+/**
+ * PopupMenuPosition - Where popup menu appears
+ */
+const PopupMenuPosition = Object.freeze({
+  under: 'under',
+  over: 'over'
+});
+
+/**
+ * ============================================================================
+ * GESTURE & HIT TEST ENUMS
+ * ============================================================================
+ */
+
+/**
+ * HitTestBehavior - How a widget responds to hit tests
+ */
+const HitTestBehavior = Object.freeze({
+  deferToChild: 'deferToChild',     // Only hit if child hit
+  absorb: 'absorb',                  // Always hit, absorb event
+  translucent: 'translucent'         // Hit but pass through to children
+});
+
+/**
+ * PointerDeviceKind - Type of pointer device
+ */
+const PointerDeviceKind = Object.freeze({
+  touch: 'touch',
+  mouse: 'mouse',
+  stylus: 'stylus',
+  invertedStylus: 'invertedStylus',
+  unknown: 'unknown'
+});
+
+/**
+ * ============================================================================
+ * IMAGE & ASSET ENUMS
+ * ============================================================================
+ */
+
+/**
+ * ImageRepeat - How to repeat an image
+ */
+const ImageRepeat = Object.freeze({
+  noRepeat: 'noRepeat',
+  repeat: 'repeat',
+  repeatX: 'repeatX',
+  repeatY: 'repeatY'
+});
+
+
+
+/**
+ * ImageChunkEvent - Progress of image loading
+ */
+const ImageChunkEvent = Object.freeze({
+  loading: 'loading',
+  complete: 'complete'
+});
+
+/**
+ * ============================================================================
+ * PLATFORM ENUMS
+ * ============================================================================
+ */
+
+/**
+ * TargetPlatform - Current platform
+ */
+const TargetPlatform = Object.freeze({
+  android: 'android',
+  fuchsia: 'fuchsia',
+  iOS: 'iOS',
+  linux: 'linux',
+  macOS: 'macOS',
+  windows: 'windows',
+  web: 'web'
+});
+
+/**
+ * ============================================================================
+ * STATUS BAR ENUMS
+ * ============================================================================
+ */
+
+/**
+ * SystemUiOverlayStyle - Status bar and navigation bar styling
+ */
+const SystemUiOverlayStyle = Object.freeze({
+  light: 'light',
+  dark: 'dark',
+  lightStatus: 'lightStatus',
+  darkStatus: 'darkStatus'
+});
+
+export {
+  ShadowType,
+  Brightness,
+  MaterialType,
+  ScrollDirection,
+  ScrollPhysics,
+  DragStartBehavior,
+  AnimationStatus,
+  Curve,
+  RouteType,
+  TransitionType,
+  PopupMenuPosition,
+  HitTestBehavior,
+  PointerDeviceKind,
+  ImageRepeat,
+
+  ImageChunkEvent,
+  TargetPlatform,
+  SystemUiOverlayStyle
+};  
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/shape_border.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/shape_border.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/shape_border.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/shape_border.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/stack_fit.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/stack_fit.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/stack_fit.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/stack_fit.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/text_align.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/text_align.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/text_align.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/text_align.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/text_baseline.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/text_baseline.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/text_baseline.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/text_baseline.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/text_decoration.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/text_decoration.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/text_decoration.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/text_decoration.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/text_direction.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/text_direction.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/text_direction.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/text_direction.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/text_input_action.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/text_input_action.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/text_input_action.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/text_input_action.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/text_input_type.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/text_input_type.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/text_input_type.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/text_input_type.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/text_overflow.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/text_overflow.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/text_overflow.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/text_overflow.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/vertical_direction.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/vertical_direction.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/vertical_direction.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/vertical_direction.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/wrap_alignment.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/wrap_alignment.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/wrap_alignment.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/wrap_alignment.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/property/wrap_cross_alignment.js b/packages/flutterjs_material/flutterjs_material/src/utils/property/wrap_cross_alignment.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/property/wrap_cross_alignment.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/property/wrap_cross_alignment.js
diff --git a/packages/flutterjs_material/flutterjs_material/src/utils/radio_theme.js b/packages/flutterjs_material/flutterjs_material/src/utils/radio_theme.js
new file mode 100644
index 00000000..e2b1d05d
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/utils/radio_theme.js
@@ -0,0 +1,210 @@
+/**
+ * Material Design 3 Radio Theme
+ * Defines the visual properties of Radio widgets
+ * Follows Flutter Material Design 3 specification
+ * 
+ * Flutter Reference: https://api.flutter.dev/flutter/material/RadioThemeData-class.html
+ */
+export class RadioThemeData {
+    constructor({
+        // Colors
+        fillColor,
+        overlayColor,
+        focusColor,
+        hoverColor,
+
+        // Size & Padding
+        materialTapTargetSize = 'padded',
+        visualDensity,
+        mouseCursor,
+
+        // States
+        splashRadius,
+
+        // Interaction
+        enableFeedback = true,
+        animationDuration = 200
+    } = {}) {
+        this.fillColor = fillColor;
+        this.overlayColor = overlayColor;
+        this.focusColor = focusColor;
+        this.hoverColor = hoverColor;
+        this.materialTapTargetSize = materialTapTargetSize;
+        this.visualDensity = visualDensity;
+        this.mouseCursor = mouseCursor;
+        this.splashRadius = splashRadius ?? 20;
+        this.enableFeedback = enableFeedback;
+        this.animationDuration = animationDuration;
+    }
+
+    /**
+     * Get radio size based on tap target
+     * @returns {number} Size in pixels
+     */
+    getRadioSize() {
+        return this.materialTapTargetSize === 'padded' ? 48 : 40;
+    }
+
+    /**
+     * Convert to CSS object for DOM rendering
+     * @returns {Object} CSS style object
+     */
+    toCSSObject() {
+        return {
+            width: '20px',
+            height: '20px',
+            cursor: this.mouseCursor || 'pointer',
+            borderRadius: '50%',
+            transition: `all ${this.animationDuration}ms ease`,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        };
+    }
+
+    /**
+     * Get fill color for selected state
+     * @param {Object} themeColors - Theme colors object
+     * @returns {string} Hex color value
+     */
+    getFillColor(themeColors = {}) {
+        return this.fillColor || themeColors.primary || '#6750A4';
+    }
+
+    /**
+     * Get hover color
+     * @param {Object} themeColors - Theme colors object
+     * @returns {string} Hex color value
+     */
+    getHoverColor(themeColors = {}) {
+        return this.hoverColor || themeColors.primary + '14' || '#6750A414';
+    }
+
+    /**
+     * Get focus color
+     * @param {Object} themeColors - Theme colors object
+     * @returns {string} Hex color value
+     */
+    getFocusColor(themeColors = {}) {
+        return this.focusColor || themeColors.primary + '24' || '#6750A424';
+    }
+
+    /**
+     * Get unselected state CSS object
+     * @param {Object} themeColors - Theme colors object
+     * @returns {Object} CSS properties
+     */
+    getUnselectedStyle(themeColors = {}) {
+        return {
+            ...this.toCSSObject(),
+            border: `2px solid ${themeColors.onSurfaceVariant || '#79747E'}`,
+            backgroundColor: 'transparent'
+        };
+    }
+
+    /**
+     * Get selected state CSS object
+     * @param {Object} themeColors - Theme colors object
+     * @returns {Object} CSS properties
+     */
+    getSelectedStyle(themeColors = {}) {
+        return {
+            ...this.toCSSObject(),
+            border: `2px solid ${this.getFillColor(themeColors)}`,
+            backgroundColor: 'transparent'
+        };
+    }
+
+    /**
+     * Get disabled state CSS object
+     * @param {Object} themeColors - Theme colors object
+     * @returns {Object} CSS properties
+     */
+    getDisabledStyle(themeColors = {}) {
+        return {
+            ...this.toCSSObject(),
+            opacity: 0.38,
+            cursor: 'not-allowed',
+            pointerEvents: 'none'
+        };
+    }
+
+    /**
+     * Get hover state CSS object
+     * @param {Object} themeColors - Theme colors object
+     * @returns {Object} CSS properties
+     */
+    getHoverStyle(themeColors = {}) {
+        return {
+            backgroundColor: this.getHoverColor(themeColors)
+        };
+    }
+
+    /**
+     * Get focus state CSS object
+     * @param {Object} themeColors - Theme colors object
+     * @returns {Object} CSS properties
+     */
+    getFocusStyle(themeColors = {}) {
+        return {
+            outline: 'none',
+            boxShadow: `0 0 0 ${this.splashRadius}px ${this.getFocusColor(themeColors)}`
+        };
+    }
+
+    /**
+     * Copy this theme with updated properties
+     * @param {Object} properties - Properties to override
+     * @returns {RadioThemeData} New theme instance
+     */
+    copyWith({
+        fillColor,
+        overlayColor,
+        focusColor,
+        hoverColor,
+        materialTapTargetSize,
+        visualDensity,
+        mouseCursor,
+        splashRadius,
+        enableFeedback,
+        animationDuration
+    } = {}) {
+        return new RadioThemeData({
+            fillColor: fillColor ?? this.fillColor,
+            overlayColor: overlayColor ?? this.overlayColor,
+            focusColor: focusColor ?? this.focusColor,
+            hoverColor: hoverColor ?? this.hoverColor,
+            materialTapTargetSize: materialTapTargetSize ?? this.materialTapTargetSize,
+            visualDensity: visualDensity ?? this.visualDensity,
+            mouseCursor: mouseCursor ?? this.mouseCursor,
+            splashRadius: splashRadius ?? this.splashRadius,
+            enableFeedback: enableFeedback ?? this.enableFeedback,
+            animationDuration: animationDuration ?? this.animationDuration
+        });
+    }
+
+    /**
+     * Merge with another RadioThemeData
+     * @param {RadioThemeData} other - Theme to merge with
+     * @returns {RadioThemeData} Merged theme
+     */
+    merge(other) {
+        if (!other) return this;
+        return this.copyWith({
+            fillColor: other.fillColor,
+            overlayColor: other.overlayColor,
+            focusColor: other.focusColor,
+            hoverColor: other.hoverColor,
+            materialTapTargetSize: other.materialTapTargetSize,
+            visualDensity: other.visualDensity,
+            mouseCursor: other.mouseCursor,
+            splashRadius: other.splashRadius,
+            enableFeedback: other.enableFeedback,
+            animationDuration: other.animationDuration
+        });
+    }
+
+    toString() {
+        return `RadioThemeData(fillColor: ${this.fillColor})`;
+    }
+}
diff --git a/packages/flutterjs_engine/package/material/src/utils/scrollbar_theme.js b/packages/flutterjs_material/flutterjs_material/src/utils/scrollbar_theme.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/scrollbar_theme.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/scrollbar_theme.js
diff --git a/packages/flutterjs_engine/package/material/src/utils/shadows_theme.js b/packages/flutterjs_material/flutterjs_material/src/utils/shadows_theme.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/utils/shadows_theme.js
rename to packages/flutterjs_material/flutterjs_material/src/utils/shadows_theme.js
diff --git a/packages/flutterjs_material/flutterjs_material/src/utils/switch_theme.js b/packages/flutterjs_material/flutterjs_material/src/utils/switch_theme.js
new file mode 100644
index 00000000..cc384e1c
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/utils/switch_theme.js
@@ -0,0 +1,251 @@
+/**
+ * Material Design 3 Switch Theme
+ * Defines the visual properties of Switch widgets
+ * Follows Flutter Material Design 3 specification
+ * 
+ * Flutter Reference: https://api.flutter.dev/flutter/material/SwitchThemeData-class.html
+ */
+export class SwitchThemeData {
+  constructor({
+    // Colors
+    thumbColor,
+    trackColor,
+    trackOutlineColor,
+    overlayColor,
+    focusColor,
+    hoverColor,
+
+    // Size
+    thumbSize = 4, // radius factor, 4 = 20px diameter
+    trackHeight = 28,
+
+    // Interaction
+    materialTapTargetSize = 'padded',
+    splashRadius = 20,
+    mouseCursor,
+    enableFeedback = true,
+    animationDuration = 200
+  } = {}) {
+    this.thumbColor = thumbColor;
+    this.trackColor = trackColor;
+    this.trackOutlineColor = trackOutlineColor;
+    this.overlayColor = overlayColor;
+    this.focusColor = focusColor;
+    this.hoverColor = hoverColor;
+    this.thumbSize = thumbSize;
+    this.trackHeight = trackHeight;
+    this.materialTapTargetSize = materialTapTargetSize;
+    this.splashRadius = splashRadius;
+    this.mouseCursor = mouseCursor;
+    this.enableFeedback = enableFeedback;
+    this.animationDuration = animationDuration;
+  }
+
+  /**
+   * Get switch total tap target size
+   * @returns {number} Size in pixels
+   */
+  getSwitchSize() {
+    return this.materialTapTargetSize === 'padded' ? 48 : 40;
+  }
+
+  /**
+   * Get thumb (circle) diameter
+   * @returns {number} Diameter in pixels
+   */
+  getThumbDiameter() {
+    return this.thumbSize * 2;
+  }
+
+  /**
+   * Get track width
+   * @returns {number} Width in pixels
+   */
+  getTrackWidth() {
+    return this.getThumbDiameter() * 2;
+  }
+
+  /**
+   * Convert to CSS object for DOM rendering
+   * @returns {Object} CSS style object
+   */
+  toCSSObject() {
+    return {
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      cursor: this.mouseCursor || 'pointer',
+      userSelect: 'none'
+    };
+  }
+
+  /**
+   * Get track CSS object (off state)
+   * @param {Object} themeColors - Theme colors object
+   * @returns {Object} CSS properties
+   */
+  getTrackOffStyle(themeColors = {}) {
+    return {
+      width: `${this.getTrackWidth()}px`,
+      height: `${this.trackHeight}px`,
+      borderRadius: `${this.trackHeight / 2}px`,
+      backgroundColor: themeColors.surfaceVariant || '#E7E0EC',
+      border: `1px solid ${this.trackOutlineColor || (themeColors.outline || '#79747E')}`,
+      transition: `all ${this.animationDuration}ms ease`,
+      position: 'absolute',
+      top: '50%',
+      transform: 'translateY(-50%)'
+    };
+  }
+
+  /**
+   * Get track CSS object (on state)
+   * @param {Object} themeColors - Theme colors object
+   * @returns {Object} CSS properties
+   */
+  getTrackOnStyle(themeColors = {}) {
+    return {
+      ...this.getTrackOffStyle(themeColors),
+      backgroundColor: themeColors.primary || '#6750A4',
+      border: `1px solid ${themeColors.primary || '#6750A4'}`
+    };
+  }
+
+  /**
+   * Get thumb CSS object (off state)
+   * @param {Object} themeColors - Theme colors object
+   * @returns {Object} CSS properties
+   */
+  getThumbOffStyle(themeColors = {}) {
+    return {
+      width: `${this.getThumbDiameter()}px`,
+      height: `${this.getThumbDiameter()}px`,
+      borderRadius: '50%',
+      backgroundColor: themeColors.outline || '#79747E',
+      position: 'absolute',
+      left: `4px`,
+      transition: `all ${this.animationDuration}ms ease`,
+      zIndex: 1,
+      boxShadow: `0 2px 4px rgba(0, 0, 0, 0.1)`
+    };
+  }
+
+  /**
+   * Get thumb CSS object (on state)
+   * @param {Object} themeColors - Theme colors object
+   * @returns {Object} CSS properties
+   */
+  getThumbOnStyle(themeColors = {}) {
+    const trackWidth = this.getTrackWidth();
+    const thumbDiam = this.getThumbDiameter();
+    const rightPos = trackWidth - thumbDiam - 4;
+
+    return {
+      ...this.getThumbOffStyle(themeColors),
+      backgroundColor: themeColors.onPrimary || '#FFFFFF',
+      left: `${rightPos}px`,
+      boxShadow: `0 4px 8px rgba(0, 0, 0, 0.15)`
+    };
+  }
+
+  /**
+   * Get disabled state CSS object
+   * @param {Object} themeColors - Theme colors object
+   * @returns {Object} CSS properties
+   */
+  getDisabledStyle(themeColors = {}) {
+    return {
+      opacity: 0.38,
+      cursor: 'not-allowed',
+      pointerEvents: 'none'
+    };
+  }
+
+  /**
+   * Get hover overlay CSS object
+   * @param {Object} themeColors - Theme colors object
+   * @returns {Object} CSS properties
+   */
+  getHoverStyle(themeColors = {}) {
+    return {
+      backgroundColor: this.hoverColor || (themeColors.primary + '14') || '#6750A414'
+    };
+  }
+
+  /**
+   * Get focus state CSS object
+   * @param {Object} themeColors - Theme colors object
+   * @returns {Object} CSS properties
+   */
+  getFocusStyle(themeColors = {}) {
+    return {
+      outline: 'none',
+      boxShadow: `0 0 0 ${this.splashRadius}px ${this.focusColor || (themeColors.primary + '24') || '#6750A424'}`
+    };
+  }
+
+  /**
+   * Copy this theme with updated properties
+   * @param {Object} properties - Properties to override
+   * @returns {SwitchThemeData} New theme instance
+   */
+  copyWith({
+    thumbColor,
+    trackColor,
+    trackOutlineColor,
+    overlayColor,
+    focusColor,
+    hoverColor,
+    thumbSize,
+    trackHeight,
+    materialTapTargetSize,
+    splashRadius,
+    mouseCursor,
+    enableFeedback,
+    animationDuration
+  } = {}) {
+    return new SwitchThemeData({
+      thumbColor: thumbColor ?? this.thumbColor,
+      trackColor: trackColor ?? this.trackColor,
+      trackOutlineColor: trackOutlineColor ?? this.trackOutlineColor,
+      overlayColor: overlayColor ?? this.overlayColor,
+      focusColor: focusColor ?? this.focusColor,
+      hoverColor: hoverColor ?? this.hoverColor,
+      thumbSize: thumbSize ?? this.thumbSize,
+      trackHeight: trackHeight ?? this.trackHeight,
+      materialTapTargetSize: materialTapTargetSize ?? this.materialTapTargetSize,
+      splashRadius: splashRadius ?? this.splashRadius,
+      mouseCursor: mouseCursor ?? this.mouseCursor,
+      enableFeedback: enableFeedback ?? this.enableFeedback,
+      animationDuration: animationDuration ?? this.animationDuration
+    });
+  }
+
+  /**
+   * Merge with another SwitchThemeData
+   * @param {SwitchThemeData} other - Theme to merge with
+   * @returns {SwitchThemeData} Merged theme
+   */
+  merge(other) {
+    if (!other) return this;
+    return this.copyWith({
+      thumbColor: other.thumbColor,
+      trackColor: other.trackColor,
+      trackOutlineColor: other.trackOutlineColor,
+      overlayColor: other.overlayColor,
+      focusColor: other.focusColor,
+      hoverColor: other.hoverColor,
+      thumbSize: other.thumbSize,
+      trackHeight: other.trackHeight,
+      materialTapTargetSize: other.materialTapTargetSize,
+      splashRadius: other.splashRadius,
+      mouseCursor: other.mouseCursor,
+      enableFeedback: other.enableFeedback,
+      animationDuration: other.animationDuration
+    });
+  }
+
+  toString() {
+    return `SwitchThemeData(trackHeight: ${this.trackHeight}px, thumbSize: ${this.getThumbDiameter()}px)`;
+  }
+}
\ No newline at end of file
diff --git a/packages/flutterjs_material/flutterjs_material/src/utils/text_field_theme.js b/packages/flutterjs_material/flutterjs_material/src/utils/text_field_theme.js
new file mode 100644
index 00000000..ba5fe0ac
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/utils/text_field_theme.js
@@ -0,0 +1,83 @@
+import { Color } from '../utils/color.js';
+import { InputDecoration } from '../material/input_decorator.js';
+import { TextStyle } from '../painting/text_style.js';
+
+/**
+ * Material Design 3 TextField Theme
+ */
+export class InputDecorationTheme {
+    constructor({
+        labelStyle,
+        helperStyle,
+        helperMaxLines,
+        hintStyle,
+        errorStyle,
+        errorMaxLines,
+        floatingLabelStyle,
+        floatingLabelAlignment,
+        isDense = false,
+        contentPadding,
+        isCollapsed = false,
+        iconColor,
+        prefixStyle,
+        prefixIconColor,
+        suffixStyle,
+        suffixIconColor,
+        counterStyle,
+        filled = false,
+        fillColor,
+        activeIndicatorBorder,
+        outlineBorder,
+        border,
+        enabledBorder,
+        focusedBorder,
+        errorBorder,
+        focusedErrorBorder,
+        alignLabelWithHint = false,
+        constraints
+    } = {}) {
+        this.labelStyle = labelStyle;
+        this.helperStyle = helperStyle;
+        this.helperMaxLines = helperMaxLines;
+        this.hintStyle = hintStyle;
+        this.errorStyle = errorStyle;
+        this.errorMaxLines = errorMaxLines;
+        this.floatingLabelStyle = floatingLabelStyle;
+        this.floatingLabelAlignment = floatingLabelAlignment;
+        this.isDense = isDense;
+        this.contentPadding = contentPadding;
+        this.isCollapsed = isCollapsed;
+        this.iconColor = iconColor;
+        this.prefixStyle = prefixStyle;
+        this.prefixIconColor = prefixIconColor;
+        this.suffixStyle = suffixStyle;
+        this.suffixIconColor = suffixIconColor;
+        this.counterStyle = counterStyle;
+        this.filled = filled;
+        this.fillColor = fillColor;
+        this.activeIndicatorBorder = activeIndicatorBorder;
+        this.outlineBorder = outlineBorder;
+        this.border = border;
+        this.enabledBorder = enabledBorder;
+        this.focusedBorder = focusedBorder;
+        this.errorBorder = errorBorder;
+        this.focusedErrorBorder = focusedErrorBorder;
+        this.alignLabelWithHint = alignLabelWithHint;
+        this.constraints = constraints;
+    }
+}
+
+/**
+ * TextSelectionThemeData - Theme for text selection colors
+ */
+export class TextSelectionThemeData {
+    constructor({
+        cursorColor,
+        selectionColor,
+        selectionHandleColor
+    } = {}) {
+        this.cursorColor = cursorColor;
+        this.selectionColor = selectionColor;
+        this.selectionHandleColor = selectionHandleColor;
+    }
+}
diff --git a/packages/flutterjs_material/flutterjs_material/src/utils/typography_theme.js b/packages/flutterjs_material/flutterjs_material/src/utils/typography_theme.js
new file mode 100644
index 00000000..b7ffe42b
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/utils/typography_theme.js
@@ -0,0 +1,439 @@
+import { TextStyle } from '../painting/text_style.js';
+
+/**
+ * Material Design 3 Typography System
+ * Defines 13 text styles following Material Design 3 scale
+ * Follows Flutter Material Design 3 specification
+ * 
+ * Flutter Reference: https://api.flutter.dev/flutter/material/TextTheme-class.html
+ */
+export class TypographyTheme {
+  constructor({
+    fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    displayLarge,
+    displayMedium,
+    displaySmall,
+    headlineLarge,
+    headlineMedium,
+    headlineSmall,
+    titleLarge,
+    titleMedium,
+    titleSmall,
+    bodyLarge,
+    bodyMedium,
+    bodySmall,
+    labelLarge,
+    labelMedium,
+    labelSmall
+  } = {}) {
+    this.fontFamily = fontFamily;
+
+    // ========== DISPLAY STYLES (Large headlines) ==========
+    // Used for: Large prominent text
+    this.displayLarge = displayLarge || new TextStyle({
+      fontSize: 57,
+      fontWeight: 400,
+      lineHeight: 64,
+      letterSpacing: 0,
+      fontFamily: this.fontFamily
+    });
+
+    this.displayMedium = displayMedium || new TextStyle({
+      fontSize: 45,
+      fontWeight: 400,
+      lineHeight: 52,
+      letterSpacing: 0,
+      fontFamily: this.fontFamily
+    });
+
+    this.displaySmall = displaySmall || new TextStyle({
+      fontSize: 36,
+      fontWeight: 400,
+      lineHeight: 44,
+      letterSpacing: 0,
+      fontFamily: this.fontFamily
+    });
+
+    // ========== HEADLINE STYLES (Section headlines) ==========
+    // Used for: Page titles, section headers
+    this.headlineLarge = headlineLarge || new TextStyle({
+      fontSize: 32,
+      fontWeight: 700,
+      lineHeight: 40,
+      letterSpacing: 0,
+      fontFamily: this.fontFamily
+    });
+
+    this.headlineMedium = headlineMedium || new TextStyle({
+      fontSize: 28,
+      fontWeight: 700,
+      lineHeight: 36,
+      letterSpacing: 0,
+      fontFamily: this.fontFamily
+    });
+
+    this.headlineSmall = headlineSmall || new TextStyle({
+      fontSize: 24,
+      fontWeight: 700,
+      lineHeight: 32,
+      letterSpacing: 0,
+      fontFamily: this.fontFamily
+    });
+
+    // ========== TITLE STYLES (Emphasis text) ==========
+    // Used for: Card titles, dialog titles
+    this.titleLarge = titleLarge || new TextStyle({
+      fontSize: 22,
+      fontWeight: 700,
+      lineHeight: 28,
+      letterSpacing: 0,
+      fontFamily: this.fontFamily
+    });
+
+    this.titleMedium = titleMedium || new TextStyle({
+      fontSize: 16,
+      fontWeight: 700,
+      lineHeight: 24,
+      letterSpacing: 0.15,
+      fontFamily: this.fontFamily
+    });
+
+    this.titleSmall = titleSmall || new TextStyle({
+      fontSize: 14,
+      fontWeight: 700,
+      lineHeight: 20,
+      letterSpacing: 0.1,
+      fontFamily: this.fontFamily
+    });
+
+    // ========== BODY STYLES (Main text) ==========
+    // Used for: Body text, descriptions
+    this.bodyLarge = bodyLarge || new TextStyle({
+      fontSize: 16,
+      fontWeight: 400,
+      lineHeight: 24,
+      letterSpacing: 0.15,
+      fontFamily: this.fontFamily
+    });
+
+    this.bodyMedium = bodyMedium || new TextStyle({
+      fontSize: 14,
+      fontWeight: 400,
+      lineHeight: 20,
+      letterSpacing: 0.25,
+      fontFamily: this.fontFamily
+    });
+
+    this.bodySmall = bodySmall || new TextStyle({
+      fontSize: 12,
+      fontWeight: 400,
+      lineHeight: 16,
+      letterSpacing: 0.4,
+      fontFamily: this.fontFamily
+    });
+
+    // ========== LABEL STYLES (Small emphasis) ==========
+    // Used for: Buttons, chips, tags
+    this.labelLarge = labelLarge || new TextStyle({
+      fontSize: 14,
+      fontWeight: 700,
+      lineHeight: 20,
+      letterSpacing: 0.1,
+      fontFamily: this.fontFamily
+    });
+
+    this.labelMedium = labelMedium || new TextStyle({
+      fontSize: 12,
+      fontWeight: 700,
+      lineHeight: 16,
+      letterSpacing: 0.5,
+      fontFamily: this.fontFamily
+    });
+
+    this.labelSmall = labelSmall || new TextStyle({
+      fontSize: 11,
+      fontWeight: 700,
+      lineHeight: 16,
+      letterSpacing: 0.5,
+      fontFamily: this.fontFamily
+    });
+  }
+
+  /**
+   * Get text style by name
+   * @param {string} styleName - Name of the style
+   * @returns {TextStyle} Text style instance
+   * 
+   * @example
+   * const style = theme.getStyle('bodyLarge');
+   */
+  getStyle(styleName) {
+    return this[styleName] ?? null;
+  }
+
+  /**
+   * Get all text styles as object
+   * @returns {Object} All text styles
+   */
+  getAllStyles() {
+    return {
+      displayLarge: this.displayLarge,
+      displayMedium: this.displayMedium,
+      displaySmall: this.displaySmall,
+      headlineLarge: this.headlineLarge,
+      headlineMedium: this.headlineMedium,
+      headlineSmall: this.headlineSmall,
+      titleLarge: this.titleLarge,
+      titleMedium: this.titleMedium,
+      titleSmall: this.titleSmall,
+      bodyLarge: this.bodyLarge,
+      bodyMedium: this.bodyMedium,
+      bodySmall: this.bodySmall,
+      labelLarge: this.labelLarge,
+      labelMedium: this.labelMedium,
+      labelSmall: this.labelSmall
+    };
+  }
+
+  /**
+   * Create a compact typography scale (smaller sizes)
+   * @param {Object} config - Overrides
+   * @returns {TypographyTheme} Compact theme
+   * 
+   * @example
+   * const compact = TypographyTheme.compact();
+   */
+  static compact(config = {}) {
+    return new TypographyTheme({
+      displayLarge: new TextStyle({
+        fontSize: 45,
+        fontWeight: 400,
+        lineHeight: 52,
+        letterSpacing: 0
+      }),
+      displayMedium: new TextStyle({
+        fontSize: 36,
+        fontWeight: 400,
+        lineHeight: 44,
+        letterSpacing: 0
+      }),
+      displaySmall: new TextStyle({
+        fontSize: 28,
+        fontWeight: 400,
+        lineHeight: 36,
+        letterSpacing: 0
+      }),
+      headlineLarge: new TextStyle({
+        fontSize: 24,
+        fontWeight: 700,
+        lineHeight: 32,
+        letterSpacing: 0
+      }),
+      headlineMedium: new TextStyle({
+        fontSize: 20,
+        fontWeight: 700,
+        lineHeight: 28,
+        letterSpacing: 0
+      }),
+      headlineSmall: new TextStyle({
+        fontSize: 18,
+        fontWeight: 700,
+        lineHeight: 26,
+        letterSpacing: 0
+      }),
+      ...config
+    });
+  }
+
+  /**
+   * Create an expanded typography scale (larger sizes)
+   * @param {Object} config - Overrides
+   * @returns {TypographyTheme} Expanded theme
+   * 
+   * @example
+   * const expanded = TypographyTheme.expanded();
+   */
+  static expanded(config = {}) {
+    return new TypographyTheme({
+      displayLarge: new TextStyle({
+        fontSize: 72,
+        fontWeight: 400,
+        lineHeight: 80,
+        letterSpacing: 0
+      }),
+      displayMedium: new TextStyle({
+        fontSize: 56,
+        fontWeight: 400,
+        lineHeight: 64,
+        letterSpacing: 0
+      }),
+      displaySmall: new TextStyle({
+        fontSize: 44,
+        fontWeight: 400,
+        lineHeight: 52,
+        letterSpacing: 0
+      }),
+      headlineLarge: new TextStyle({
+        fontSize: 40,
+        fontWeight: 700,
+        lineHeight: 48,
+        letterSpacing: 0
+      }),
+      headlineMedium: new TextStyle({
+        fontSize: 36,
+        fontWeight: 700,
+        lineHeight: 44,
+        letterSpacing: 0
+      }),
+      headlineSmall: new TextStyle({
+        fontSize: 32,
+        fontWeight: 700,
+        lineHeight: 40,
+        letterSpacing: 0
+      }),
+      ...config
+    });
+  }
+
+  /**
+   * Generate CSS variables for all text styles
+   * @returns {string} CSS variable declarations
+   * 
+   * @example
+   * const css = theme.toCSSVariables();
+   * // Output: --text-display-large: 57px ... ;
+   */
+  toCSSVariables() {
+    let css = ':root {\n';
+    const styles = this.getAllStyles();
+    
+    for (const [name, style] of Object.entries(styles)) {
+      const cssVarName = `--text-${name.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+      css += `  ${cssVarName}: ${style.fontSize}px/${style.lineHeight}px ${style.fontWeight} ${this.fontFamily};\n`;
+      css += `  ${cssVarName}-letter-spacing: ${style.letterSpacing}px;\n`;
+    }
+    
+    css += '}';
+    return css;
+  }
+
+  /**
+   * Generate CSS classes for all text styles
+   * @returns {string} CSS class definitions
+   * 
+   * @example
+   * const css = theme.toCSSClasses();
+   * // Output: .text-display-large { font-size: 57px; ... }
+   */
+  toCSSClasses() {
+    let css = '';
+    const styles = this.getAllStyles();
+    
+    for (const [name, style] of Object.entries(styles)) {
+      const className = `.text-${name.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+      const styleObj = style.toCSSObject();
+      css += `${className} {\n`;
+      for (const [prop, value] of Object.entries(styleObj)) {
+        css += `  ${prop}: ${value};\n`;
+      }
+      css += '}\n\n';
+    }
+    
+    return css;
+  }
+
+  /**
+   * Apply font family to all styles
+   * @param {string} fontFamily - Font family name
+   * @returns {TypographyTheme} Updated theme
+   */
+  withFontFamily(fontFamily) {
+    const styles = this.getAllStyles();
+    const updatedStyles = {};
+    
+    for (const [name, style] of Object.entries(styles)) {
+      updatedStyles[name] = style.copyWith({ fontFamily });
+    }
+    
+    return new TypographyTheme({
+      fontFamily,
+      ...updatedStyles
+    });
+  }
+
+  /**
+   * Scale all font sizes by a factor
+   * @param {number} factor - Scale factor (1.0 = no change)
+   * @returns {TypographyTheme} Scaled theme
+   * 
+   * @example
+   * const scaledTheme = theme.scale(1.2); // 20% larger
+   */
+  scale(factor) {
+    const styles = this.getAllStyles();
+    const scaledStyles = {};
+    
+    for (const [name, style] of Object.entries(styles)) {
+      scaledStyles[name] = style.copyWith({
+        fontSize: Math.round(style.fontSize * factor),
+        lineHeight: Math.round(style.lineHeight * factor)
+      });
+    }
+    
+    return new TypographyTheme({
+      fontFamily: this.fontFamily,
+      ...scaledStyles
+    });
+  }
+
+  /**
+   * Copy theme with updated text styles
+   * @param {Object} styles - Styles to override
+   * @returns {TypographyTheme} New theme instance
+   */
+  copyWith(styles = {}) {
+    return new TypographyTheme({
+      fontFamily: this.fontFamily,
+      ...this.getAllStyles(),
+      ...styles
+    });
+  }
+
+  /**
+   * Merge with another typography theme
+   * @param {TypographyTheme} other - Theme to merge with
+   * @returns {TypographyTheme} Merged theme
+   */
+  merge(other) {
+    if (!other) return this;
+    return this.copyWith(other.getAllStyles());
+  }
+
+  /**
+   * Get typography scale information
+   * @returns {Object} Scale details
+   */
+  getScaleInfo() {
+    const styles = this.getAllStyles();
+    const sizes = {};
+    
+    for (const [name, style] of Object.entries(styles)) {
+      sizes[name] = {
+        fontSize: style.fontSize,
+        fontWeight: style.fontWeight,
+        lineHeight: style.lineHeight,
+        letterSpacing: style.letterSpacing
+      };
+    }
+    
+    return {
+      fontFamily: this.fontFamily,
+      scales: sizes,
+      totalStyles: Object.keys(sizes).length
+    };
+  }
+
+  toString() {
+    return `TypographyTheme(fontFamily: ${this.fontFamily}, scales: 13)`;
+  }
+}
\ No newline at end of file
diff --git a/packages/flutterjs_material/flutterjs_material/src/utils/utils.js b/packages/flutterjs_material/flutterjs_material/src/utils/utils.js
new file mode 100644
index 00000000..07242a08
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/utils/utils.js
@@ -0,0 +1,76 @@
+// index.js (or index.ts) - Barrel file for all design system utilities
+
+// ===================================================================
+// Utils (added 2 days ago)
+// ===================================================================
+export * from './property/alignment.js';
+export * from './property/alignment_directional.js';
+export * from './property/axis.js';
+export * from './border.js';
+export * from './border_radius.js';
+export * from './property/border_style.js';
+export * from './property/box_fit.js';
+export * from './box_shadow.js';
+export * from './property/clip.js';
+export * from './color.js';
+export * from './property/cross_axis_alignment.js';
+export * from './duration.js';
+export * from './edge_insets.js';
+export * from './property/font_weight.js';
+// export * from './input_decoration.js';
+export * from './linear_gradient.js';
+export * from './property/main_axis_alignment.js';
+// export * from './offset.js'; // Commented out: Offset is exported from geometry.js to avoid conflict
+// export * from './radius.js';
+// export * from './rect.js';
+// export * from './size.js';
+export * from './property/text_align.js';
+export * from './property/text_overflow.js';
+
+export * from './property/text_direction.js';
+
+
+// ===================================================================
+// Themes (updated with new properties)
+// ===================================================================
+export * from './badge_theme.js';
+export * from './checkbox_theme.js';
+export * from './colors_theme.js';
+export * from './divider_theme.js';
+export * from './motion_theme.js';
+export * from './scrollbar_theme.js';
+export * from './shadows_theme.js';
+export * from './switch_theme.js';
+export * from './typography_theme.js';
+
+
+// ===================================================================
+// New Properties Added (yesterday)
+// ===================================================================
+export * from './property/axis_direction.js';
+export * from './property/blend_mode.js';
+export * from './property/box_shape.js';
+export * from './property/decoration_position.js';
+export * from './property/filter_quality.js';
+export * from './property/flex_fit.js';
+export * from './property/font_style.js';
+export * from './property/horizontal_direction.js';
+export * from './property/keyboard_type.js';
+export * from './property/main_axis_size.js';
+export * from './property/shape_border.js';
+export * from './property/stack_fit.js';
+export * from './property/text_baseline.js';
+export * from './property/text_decoration.js';
+export * from './property/text_direction.js';
+export * from './property/text_input_action.js';
+export * from './property/text_input_type.js';
+export * from './property/vertical_direction.js';
+export * from './property/wrap_alignment.js';
+export * from './property/wrap_cross_alignment.js';
+
+
+// ===================================================================
+// Other / Misc
+// ===================================================================
+export * from './property/other.js';
+export * from './geometry.js';
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/_no_created.md b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/_no_created.md
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/compoment/_no_created.md
rename to packages/flutterjs_material/flutterjs_material/src/widgets/compoment/_no_created.md
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/aspect_ratio.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/aspect_ratio.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/compoment/aspect_ratio.js
rename to packages/flutterjs_material/flutterjs_material/src/widgets/compoment/aspect_ratio.js
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/backdrop.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/backdrop.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/compoment/backdrop.js
rename to packages/flutterjs_material/flutterjs_material/src/widgets/compoment/backdrop.js
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/card.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/card.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/compoment/card.js
rename to packages/flutterjs_material/flutterjs_material/src/widgets/compoment/card.js
diff --git a/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/center.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/center.js
new file mode 100644
index 00000000..52c5546a
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/center.js
@@ -0,0 +1,146 @@
+import { Widget, StatelessWidget } from '../../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { Element } from '@flutterjs/runtime';
+import { Alignment } from '../../utils/utils.js';
+
+class Align extends Widget {
+  constructor({
+    key = null,
+    alignment = Alignment.center,
+    widthFactor = null,
+    heightFactor = null,
+    child = null
+  } = {}) {
+    super(key);
+    this.alignment = alignment;
+    this.widthFactor = widthFactor;
+    this.heightFactor = heightFactor;
+    this.child = child;
+  }
+
+  /**
+   * Build widget tree - called by AlignElement
+   */
+  build(context) {
+    const inlineStyles = this._getInlineStyles();
+    const elementId = context.element.getElementId();
+    const widgetPath = context.element.getWidgetPath();
+
+    // Build child with element caching
+    let childVNode = null;
+    if (this.child) {
+      if (!context._childElement) {
+        context._childElement = this.child.createElement(context, context.element.runtime);
+        context._childElement.mount(context);
+      } else {
+        if (context._childElement.update) {
+          context._childElement.update(this.child);
+        } else {
+          context._childElement = this.child.createElement(context, context.element.runtime);
+          context._childElement.mount(context);
+        }
+      }
+      childVNode = context._childElement.performRebuild();
+    }
+
+    return new VNode({
+      tag: 'div',
+      props: {
+        style: inlineStyles,
+        'data-element-id': elementId,
+        'data-widget-path': widgetPath,
+        'data-widget': 'Align',
+        'data-alignment': this.alignment
+      },
+      children: childVNode ? [childVNode] : [],
+      key: this.key
+    });
+  }
+
+  _getInlineStyles() {
+    const styles = {
+      display: 'flex',
+      boxSizing: 'border-box', // Ensure padding doesn't overflow
+      ...this._getAlignmentStyles()
+    };
+
+    if (this.widthFactor !== null) {
+      styles.width = `${this.widthFactor * 100}%`;
+      styles.flexGrow = 0; // Don't grow if fixed size
+    } else {
+      styles.width = '100%';
+      styles.flexGrow = 1; // Grow to fill
+    }
+
+    if (this.heightFactor !== null) {
+      styles.height = `${this.heightFactor * 100}%`;
+      styles.flexGrow = 0;
+    } else {
+      styles.height = '100%';
+      styles.flexGrow = 1; // Grow to fill
+    }
+
+    // Simplification: if both match, just flex: 1
+    if (this.widthFactor === null && this.heightFactor === null) {
+      styles.flex = '1 1 auto';
+    }
+
+    return styles;
+  }
+
+  _getAlignmentStyles() {
+    const alignmentStr = this.alignment?.toString() || 'center';
+    const alignmentMap = {
+      'top-left': { justifyContent: 'flex-start', alignItems: 'flex-start' },
+      'top-center': { justifyContent: 'center', alignItems: 'flex-start' },
+      'top-right': { justifyContent: 'flex-end', alignItems: 'flex-start' },
+      'center-left': { justifyContent: 'flex-start', alignItems: 'center' },
+      'center': { justifyContent: 'center', alignItems: 'center' },
+      'center-right': { justifyContent: 'flex-end', alignItems: 'center' },
+      'bottom-left': { justifyContent: 'flex-start', alignItems: 'flex-end' },
+      'bottom-center': { justifyContent: 'center', alignItems: 'flex-end' },
+      'bottom-right': { justifyContent: 'flex-end', alignItems: 'flex-end' }
+    };
+
+    return alignmentMap[alignmentStr] || alignmentMap['center'];
+  }
+
+  createElement(parent, runtime) {
+    return new AlignElement(this, parent, runtime);
+  }
+
+  debugFillProperties(properties) {
+    super.debugFillProperties(properties);
+    properties.push({ name: 'alignment', value: this.alignment });
+    properties.push({ name: 'widthFactor', value: this.widthFactor });
+    properties.push({ name: 'heightFactor', value: this.heightFactor });
+    if (this.child) {
+      properties.push({ name: 'child', value: this.child.constructor.name });
+    }
+  }
+}
+
+class AlignElement extends Element {
+  performRebuild() {
+    return this.widget.build(this.context);
+  }
+}
+
+class Center extends Align {
+  constructor({
+    key = null,
+    widthFactor = null,
+    heightFactor = null,
+    child = null
+  } = {}) {
+    super({
+      key,
+      alignment: Alignment.center,
+      widthFactor,
+      heightFactor,
+      child
+    });
+  }
+}
+
+export { Align, Center };
diff --git a/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/clip.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/clip.js
new file mode 100644
index 00000000..9ab0e9ab
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/clip.js
@@ -0,0 +1,1199 @@
+import { ProxyWidget, ProxyElement } from '../../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { Clip } from '../../utils/utils.js';
+import { Element } from '@flutterjs/runtime';
+
+// ============================================================================
+// CUSTOM CLIPPER BASE CLASS
+// Override getClip() to return clip-path CSS string
+// ============================================================================
+
+class CustomClipper {
+    constructor() {
+        if (new.target === CustomClipper) {
+            throw new Error('CustomClipper is abstract');
+        }
+    }
+
+    /**
+     * Get the clip path (CSS clip-path string)
+     * Override in subclasses
+     */
+    getClip(size) {
+        throw new Error('getClip() must be implemented');
+    }
+
+    /**
+     * Check if should reclip
+     */
+    shouldReclip(oldClipper) {
+        return true;
+    }
+}
+
+// ============================================================================
+// CLIP RECT WIDGET
+// Clips child to rectangular bounds
+// ============================================================================
+
+class ClipRect extends ProxyWidget {
+    constructor({
+        key = null,
+        clipper = null,
+        clipBehavior = Clip.hardEdge,
+        child = null
+    } = {}) {
+        super({ key, child });
+
+        if (clipper && !(clipper instanceof CustomClipper)) {
+            throw new Error(
+                `ClipRect requires a CustomClipper instance, got: ${typeof clipper}`
+            );
+        }
+
+        if (!Object.values(Clip).includes(clipBehavior)) {
+            throw new Error(
+                `Invalid clipBehavior: ${clipBehavior}`
+            );
+        }
+
+        this.clipper = clipper;
+        this.clipBehavior = clipBehavior;
+        this._renderObject = null;
+        this._containerElement = null;
+    }
+
+    /**
+     * Create render object
+     */
+    createRenderObject(context) {
+        return new RenderClipRect({
+            clipper: this.clipper,
+            clipBehavior: this.clipBehavior
+        });
+    }
+
+    /**
+     * Update render object
+     */
+    updateRenderObject(context, renderObject) {
+        renderObject.clipper = this.clipper;
+        renderObject.clipBehavior = this.clipBehavior;
+    }
+
+    /**
+     * Unmount render object and clean up
+     */
+    unmountRenderObject(renderObject) {
+        renderObject.clipper = null;
+    }
+
+    /**
+     * Build the widget
+     */
+    build(context) {
+        if (!this._renderObject) {
+            this._renderObject = this.createRenderObject(context);
+        } else {
+            this.updateRenderObject(context, this._renderObject);
+        }
+
+        // Build child with element caching
+        let childVNode = null;
+        if (this.child) {
+            if (!context._childElement) {
+                context._childElement = this.child.createElement(context, context.element.runtime);
+                context._childElement.mount(context);
+            } else {
+                if (context._childElement.update) {
+                    context._childElement.update(this.child);
+                } else {
+                    context._childElement = this.child.createElement(context, context.element.runtime);
+                    context._childElement.mount(context);
+                }
+            }
+            childVNode = context._childElement.performRebuild();
+        }
+
+        const elementId = context.element.getElementId();
+        const widgetPath = context.element.getWidgetPath();
+
+        // Apply clip behavior
+        const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';
+        const filterValue = this._getClipFilter();
+
+        const style = {
+            overflow: overflowValue,
+            position: 'relative',
+            filter: filterValue
+        };
+
+        return new VNode({
+            tag: 'div',
+            props: {
+                style,
+                'data-element-id': elementId,
+                'data-widget-path': widgetPath,
+                'data-widget': 'ClipRect',
+                'data-clip-behavior': this.clipBehavior,
+                ref: (el) => this._onContainerMount(el, context)
+            },
+            children: childVNode ? [childVNode] : [],
+            key: this.key
+        });
+    }
+
+    /**
+     * Get clip filter based on behavior
+     * @private
+     */
+    _getClipFilter() {
+        switch (this.clipBehavior) {
+            case Clip.antiAlias:
+            case Clip.antiAliasWithSaveLayer:
+                return 'anti-alias';
+            case Clip.hardEdge:
+            case Clip.none:
+            default:
+                return 'none';
+        }
+    }
+
+    /**
+     * Mount container and apply custom clipper if provided
+     * @private
+     */
+    _onContainerMount(el, context) {
+        if (!el || !this.clipper) return;
+
+        this._containerElement = el;
+
+        try {
+            // Get container dimensions
+            const rect = el.getBoundingClientRect();
+            const size = {
+                width: Math.ceil(rect.width) || 100,
+                height: Math.ceil(rect.height) || 100
+            };
+
+            // Get clip path from custom clipper
+            const clipPath = this.clipper.getClip(size);
+
+            if (clipPath) {
+                // Apply clip-path CSS
+                el.style.clipPath = clipPath;
+                el.style.WebkitClipPath = clipPath;
+            }
+        } catch (error) {
+            console.error('Error applying custom clipper:', error);
+        }
+
+        // Re-apply on resize
+        const resizeHandler = () => {
+            if (!this.clipper || !this._containerElement) return;
+
+            try {
+                const rect = this._containerElement.getBoundingClientRect();
+                const size = {
+                    width: Math.ceil(rect.width) || 100,
+                    height: Math.ceil(rect.height) || 100
+                };
+
+                const clipPath = this.clipper.getClip(size);
+                if (clipPath) {
+                    this._containerElement.style.clipPath = clipPath;
+                    this._containerElement.style.WebkitClipPath = clipPath;
+                }
+            } catch (error) {
+                console.error('Error applying custom clipper on resize:', error);
+            }
+        };
+
+        window.addEventListener('resize', resizeHandler);
+
+        el._cleanupResize = () => {
+            window.removeEventListener('resize', resizeHandler);
+        };
+    }
+
+    /**
+     * Debug properties
+     */
+    debugFillProperties(properties) {
+        super.debugFillProperties(properties);
+        properties.push({ name: 'hasClipper', value: !!this.clipper });
+        properties.push({ name: 'clipBehavior', value: this.clipBehavior });
+    }
+
+    /**
+     * Create element
+     */
+    createElement(parent, runtime) {
+        return new ClipRectElement(this, parent, runtime);
+    }
+}
+
+// ============================================================================
+// RENDER CLIP RECT
+// ============================================================================
+
+class RenderClipRect {
+    constructor({ clipper = null, clipBehavior = Clip.hardEdge } = {}) {
+        this.clipper = clipper;
+        this.clipBehavior = clipBehavior;
+    }
+
+    /**
+     * Debug info
+     */
+    debugInfo() {
+        return {
+            type: 'RenderClipRect',
+            hasClipper: !!this.clipper,
+            clipBehavior: this.clipBehavior
+        };
+    }
+}
+
+// ============================================================================
+// CLIP RECT ELEMENT
+// ============================================================================
+
+class ClipRectElement extends ProxyElement {
+    performRebuild() {
+        return this.widget.build(this.context);
+    }
+
+    detach() {
+        // Cleanup resize listener
+        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {
+            this.widget._containerElement._cleanupResize();
+        }
+        super.detach();
+    }
+}
+
+// ============================================================================
+// CLIP RRECT WIDGET (Rounded Rectangle Clip)
+// ============================================================================
+
+class ClipRRect extends ProxyWidget {
+    constructor({
+        key = null,
+        borderRadius = null,
+        clipper = null,
+        clipBehavior = Clip.antiAlias,
+        child = null
+    } = {}) {
+        super({ key, child });
+
+        if (clipper && !(clipper instanceof CustomClipper)) {
+            throw new Error(
+                `ClipRRect requires a CustomClipper instance, got: ${typeof clipper}`
+            );
+        }
+
+        if (!Object.values(Clip).includes(clipBehavior)) {
+            throw new Error(
+                `Invalid clipBehavior: ${clipBehavior}`
+            );
+        }
+
+        this.borderRadius = borderRadius || { all: 0 };
+        this.clipper = clipper;
+        this.clipBehavior = clipBehavior;
+        this._renderObject = null;
+        this._containerElement = null;
+    }
+
+    /**
+     * Create render object
+     */
+    createRenderObject(context) {
+        return new RenderClipRRect({
+            borderRadius: this.borderRadius,
+            clipper: this.clipper,
+            clipBehavior: this.clipBehavior
+        });
+    }
+
+    /**
+     * Update render object
+     */
+    updateRenderObject(context, renderObject) {
+        renderObject.borderRadius = this.borderRadius;
+        renderObject.clipBehavior = this.clipBehavior;
+        renderObject.clipper = this.clipper;
+    }
+
+    /**
+     * Unmount render object and clean up
+     */
+    unmountRenderObject(renderObject) {
+        renderObject.clipper = null;
+    }
+
+    /**
+     * Build the widget
+     */
+    build(context) {
+        if (!this._renderObject) {
+            this._renderObject = this.createRenderObject(context);
+        } else {
+            this.updateRenderObject(context, this._renderObject);
+        }
+
+        // Build child with element caching
+        let childVNode = null;
+        if (this.child) {
+            if (!context._childElement) {
+                context._childElement = this.child.createElement(context, context.element.runtime);
+                context._childElement.mount(context);
+            } else {
+                if (context._childElement.update) {
+                    context._childElement.update(this.child);
+                } else {
+                    context._childElement = this.child.createElement(context, context.element.runtime);
+                    context._childElement.mount(context);
+                }
+            }
+            childVNode = context._childElement.performRebuild();
+        }
+
+        const elementId = context.element.getElementId();
+        const widgetPath = context.element.getWidgetPath();
+
+        // Convert border radius to CSS
+        const borderRadiusCss = this._getBorderRadiusCSS();
+        const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';
+        const filterValue = this._getClipFilter();
+
+        const style = {
+            borderRadius: borderRadiusCss,
+            overflow: overflowValue,
+            position: 'relative',
+            filter: filterValue
+        };
+
+        return new VNode({
+            tag: 'div',
+            props: {
+                style,
+                'data-element-id': elementId,
+                'data-widget-path': widgetPath,
+                'data-widget': 'ClipRRect',
+                'data-border-radius': JSON.stringify(this.borderRadius),
+                'data-clip-behavior': this.clipBehavior,
+                ref: (el) => this._onContainerMount(el, context)
+            },
+            children: childVNode ? [childVNode] : [],
+            key: this.key
+        });
+    }
+
+    /**
+     * Convert border radius object to CSS string
+     * @private
+     */
+    _getBorderRadiusCSS() {
+        if (typeof this.borderRadius === 'number') {
+            return `${this.borderRadius}px`;
+        }
+
+        if (this.borderRadius.all !== undefined) {
+            return `${this.borderRadius.all}px`;
+        }
+
+        const {
+            topLeft = 0,
+            topRight = 0,
+            bottomLeft = 0,
+            bottomRight = 0
+        } = this.borderRadius;
+
+        return `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`;
+    }
+
+    /**
+     * Get clip filter based on behavior
+     * @private
+     */
+    _getClipFilter() {
+        switch (this.clipBehavior) {
+            case Clip.antiAlias:
+            case Clip.antiAliasWithSaveLayer:
+                return 'anti-alias';
+            case Clip.hardEdge:
+            case Clip.none:
+            default:
+                return 'none';
+        }
+    }
+
+    /**
+     * Mount container and apply custom clipper if provided
+     * @private
+     */
+    _onContainerMount(el, context) {
+        if (!el) return;
+
+        this._containerElement = el;
+
+        // Apply custom clipper if provided
+        if (this.clipper) {
+            try {
+                const rect = el.getBoundingClientRect();
+                const size = {
+                    width: Math.ceil(rect.width) || 100,
+                    height: Math.ceil(rect.height) || 100
+                };
+
+                const clipPath = this.clipper.getClip(size);
+                if (clipPath) {
+                    el.style.clipPath = clipPath;
+                    el.style.WebkitClipPath = clipPath;
+                }
+            } catch (error) {
+                console.error('Error applying custom clipper:', error);
+            }
+        }
+
+        // Re-apply on resize
+        const resizeHandler = () => {
+            if (!this._containerElement) return;
+
+            if (this.clipper) {
+                try {
+                    const rect = this._containerElement.getBoundingClientRect();
+                    const size = {
+                        width: Math.ceil(rect.width) || 100,
+                        height: Math.ceil(rect.height) || 100
+                    };
+
+                    const clipPath = this.clipper.getClip(size);
+                    if (clipPath) {
+                        this._containerElement.style.clipPath = clipPath;
+                        this._containerElement.style.WebkitClipPath = clipPath;
+                    }
+                } catch (error) {
+                    console.error('Error applying custom clipper on resize:', error);
+                }
+            }
+        };
+
+        window.addEventListener('resize', resizeHandler);
+
+        el._cleanupResize = () => {
+            window.removeEventListener('resize', resizeHandler);
+        };
+    }
+
+    /**
+     * Debug properties
+     */
+    debugFillProperties(properties) {
+        super.debugFillProperties(properties);
+        properties.push({ name: 'borderRadius', value: JSON.stringify(this.borderRadius) });
+        properties.push({ name: 'hasClipper', value: !!this.clipper });
+        properties.push({ name: 'clipBehavior', value: this.clipBehavior });
+    }
+
+    /**
+     * Create element
+     */
+    createElement(parent, runtime) {
+        return new ClipRRectElement(this, parent, runtime);
+    }
+}
+
+// ============================================================================
+// RENDER CLIP RRECT
+// ============================================================================
+
+class RenderClipRRect {
+    constructor({
+        borderRadius = null,
+        clipper = null,
+        clipBehavior = Clip.antiAlias
+    } = {}) {
+        this.borderRadius = borderRadius || { all: 0 };
+        this.clipper = clipper;
+        this.clipBehavior = clipBehavior;
+    }
+
+    /**
+     * Debug info
+     */
+    debugInfo() {
+        return {
+            type: 'RenderClipRRect',
+            borderRadius: JSON.stringify(this.borderRadius),
+            hasClipper: !!this.clipper,
+            clipBehavior: this.clipBehavior
+        };
+    }
+}
+
+// ============================================================================
+// CLIP RRECT ELEMENT
+// ============================================================================
+
+class ClipRRectElement extends ProxyElement {
+    performRebuild() {
+        return this.widget.build(this.context);
+    }
+
+    detach() {
+        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {
+            this.widget._containerElement._cleanupResize();
+        }
+        super.detach();
+    }
+}
+
+// ============================================================================
+// CLIP RSUPERELLIPSE WIDGET
+// Clips to superellipse shape with border radius
+// ============================================================================
+
+class ClipRSuperellipse extends ProxyWidget {
+    constructor({
+        key = null,
+        borderRadius = null,
+        clipper = null,
+        clipBehavior = Clip.antiAlias,
+        child = null
+    } = {}) {
+        super({ key, child });
+
+        if (clipper && !(clipper instanceof CustomClipper)) {
+            throw new Error(
+                `ClipRSuperellipse requires a CustomClipper instance, got: ${typeof clipper}`
+            );
+        }
+
+        if (!Object.values(Clip).includes(clipBehavior)) {
+            throw new Error(
+                `Invalid clipBehavior: ${clipBehavior}`
+            );
+        }
+
+        this.borderRadius = borderRadius || { all: 0 };
+        this.clipper = clipper;
+        this.clipBehavior = clipBehavior;
+        this._renderObject = null;
+        this._containerElement = null;
+    }
+
+    /**
+     * Create render object
+     */
+    createRenderObject(context) {
+        return new RenderClipRSuperellipse({
+            borderRadius: this.borderRadius,
+            clipper: this.clipper,
+            clipBehavior: this.clipBehavior
+        });
+    }
+
+    /**
+     * Update render object
+     */
+    updateRenderObject(context, renderObject) {
+        renderObject.borderRadius = this.borderRadius;
+        renderObject.clipBehavior = this.clipBehavior;
+        renderObject.clipper = this.clipper;
+    }
+
+    /**
+     * Build the widget
+     */
+    build(context) {
+        if (!this._renderObject) {
+            this._renderObject = this.createRenderObject(context);
+        } else {
+            this.updateRenderObject(context, this._renderObject);
+        }
+
+        // Build child with element caching
+        let childVNode = null;
+        if (this.child) {
+            if (!context._childElement) {
+                context._childElement = this.child.createElement(context, context.element.runtime);
+                context._childElement.mount(context);
+            } else {
+                if (context._childElement.update) {
+                    context._childElement.update(this.child);
+                } else {
+                    context._childElement = this.child.createElement(context, context.element.runtime);
+                    context._childElement.mount(context);
+                }
+            }
+            childVNode = context._childElement.performRebuild();
+        }
+
+        const elementId = context.element.getElementId();
+        const widgetPath = context.element.getWidgetPath();
+
+        const borderRadiusCss = this._getBorderRadiusCSS();
+        const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';
+        const filterValue = this._getClipFilter();
+
+        const style = {
+            borderRadius: borderRadiusCss,
+            overflow: overflowValue,
+            position: 'relative',
+            filter: filterValue
+        };
+
+        return new VNode({
+            tag: 'div',
+            props: {
+                style,
+                'data-element-id': elementId,
+                'data-widget-path': widgetPath,
+                'data-widget': 'ClipRSuperellipse',
+                'data-border-radius': JSON.stringify(this.borderRadius),
+                'data-clip-behavior': this.clipBehavior,
+                ref: (el) => this._onContainerMount(el, context)
+            },
+            children: childVNode ? [childVNode] : [],
+            key: this.key
+        });
+    }
+
+    /**
+     * Convert border radius to CSS string
+     * @private
+     */
+    _getBorderRadiusCSS() {
+        if (typeof this.borderRadius === 'number') {
+            return `${this.borderRadius}px`;
+        }
+
+        if (this.borderRadius.all !== undefined) {
+            return `${this.borderRadius.all}px`;
+        }
+
+        const {
+            topLeft = 0,
+            topRight = 0,
+            bottomLeft = 0,
+            bottomRight = 0
+        } = this.borderRadius;
+
+        return `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`;
+    }
+
+    /**
+     * Get clip filter based on behavior
+     * @private
+     */
+    _getClipFilter() {
+        switch (this.clipBehavior) {
+            case Clip.antiAlias:
+            case Clip.antiAliasWithSaveLayer:
+                return 'anti-alias';
+            case Clip.hardEdge:
+            case Clip.none:
+            default:
+                return 'none';
+        }
+    }
+
+    /**
+     * Mount container and apply custom clipper
+     * @private
+     */
+    _onContainerMount(el, context) {
+        if (!el) return;
+
+        this._containerElement = el;
+
+        if (this.clipper) {
+            this._applyClipper();
+        }
+
+        const resizeHandler = () => this._applyClipper();
+        window.addEventListener('resize', resizeHandler);
+        el._cleanupResize = () => window.removeEventListener('resize', resizeHandler);
+    }
+
+    /**
+     * Apply custom clipper
+     * @private
+     */
+    _applyClipper() {
+        if (!this.clipper || !this._containerElement) return;
+
+        try {
+            const rect = this._containerElement.getBoundingClientRect();
+            const size = {
+                width: Math.ceil(rect.width) || 100,
+                height: Math.ceil(rect.height) || 100
+            };
+
+            const clipPath = this.clipper.getClip(size);
+            if (clipPath) {
+                this._containerElement.style.clipPath = clipPath;
+                this._containerElement.style.WebkitClipPath = clipPath;
+            }
+        } catch (error) {
+            console.error('Error applying superellipse clipper:', error);
+        }
+    }
+
+    /**
+     * Debug properties
+     */
+    debugFillProperties(properties) {
+        super.debugFillProperties(properties);
+        properties.push({ name: 'borderRadius', value: JSON.stringify(this.borderRadius) });
+        properties.push({ name: 'hasClipper', value: !!this.clipper });
+        properties.push({ name: 'clipBehavior', value: this.clipBehavior });
+    }
+
+    /**
+     * Create element
+     */
+    createElement(parent, runtime) {
+        return new ClipRSuperellipseElement(this, parent, runtime);
+    }
+}
+
+class RenderClipRSuperellipse {
+    constructor({
+        borderRadius = null,
+        clipper = null,
+        clipBehavior = Clip.antiAlias
+    } = {}) {
+        this.borderRadius = borderRadius || { all: 0 };
+        this.clipper = clipper;
+        this.clipBehavior = clipBehavior;
+    }
+
+    debugInfo() {
+        return {
+            type: 'RenderClipRSuperellipse',
+            borderRadius: JSON.stringify(this.borderRadius),
+            hasClipper: !!this.clipper,
+            clipBehavior: this.clipBehavior
+        };
+    }
+}
+
+class ClipRSuperellipseElement extends ProxyElement {
+    performRebuild() {
+        return this.widget.build(this.context);
+    }
+
+    detach() {
+        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {
+            this.widget._containerElement._cleanupResize();
+        }
+        super.detach();
+    }
+}
+
+// ============================================================================
+// CLIP OVAL WIDGET
+// Clips child to oval/ellipse shape
+// ============================================================================
+
+class ClipOval extends ProxyWidget {
+    constructor({
+        key = null,
+        clipper = null,
+        clipBehavior = Clip.antiAlias,
+        child = null
+    } = {}) {
+        super({ key, child });
+
+        if (clipper && !(clipper instanceof CustomClipper)) {
+            throw new Error(
+                `ClipOval requires a CustomClipper instance, got: ${typeof clipper}`
+            );
+        }
+
+        if (!Object.values(Clip).includes(clipBehavior)) {
+            throw new Error(
+                `Invalid clipBehavior: ${clipBehavior}`
+            );
+        }
+
+        this.clipper = clipper;
+        this.clipBehavior = clipBehavior;
+        this._renderObject = null;
+        this._containerElement = null;
+    }
+
+    /**
+     * Create render object
+     */
+    createRenderObject(context) {
+        return new RenderClipOval({
+            clipper: this.clipper,
+            clipBehavior: this.clipBehavior
+        });
+    }
+
+    /**
+     * Update render object
+     */
+    updateRenderObject(context, renderObject) {
+        renderObject.clipper = this.clipper;
+        renderObject.clipBehavior = this.clipBehavior;
+    }
+
+    /**
+     * Unmount and cleanup
+     */
+    unmountRenderObject(renderObject) {
+        renderObject.clipper = null;
+    }
+
+    /**
+     * Build the widget
+     */
+    build(context) {
+        if (!this._renderObject) {
+            this._renderObject = this.createRenderObject(context);
+        } else {
+            this.updateRenderObject(context, this._renderObject);
+        }
+
+        // Build child with element caching
+        let childVNode = null;
+        if (this.child) {
+            if (!context._childElement) {
+                context._childElement = this.child.createElement(context, context.element.runtime);
+                context._childElement.mount(context);
+            } else {
+                if (context._childElement.update) {
+                    context._childElement.update(this.child);
+                } else {
+                    context._childElement = this.child.createElement(context, context.element.runtime);
+                    context._childElement.mount(context);
+                }
+            }
+            childVNode = context._childElement.performRebuild();
+        }
+
+        const elementId = context.element.getElementId();
+        const widgetPath = context.element.getWidgetPath();
+
+        const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';
+        const filterValue = this._getClipFilter();
+
+        const style = {
+            borderRadius: '50%',
+            overflow: overflowValue,
+            position: 'relative',
+            filter: filterValue
+        };
+
+        return new VNode({
+            tag: 'div',
+            props: {
+                style,
+                'data-element-id': elementId,
+                'data-widget-path': widgetPath,
+                'data-widget': 'ClipOval',
+                'data-clip-behavior': this.clipBehavior,
+                ref: (el) => this._onContainerMount(el, context)
+            },
+            children: childVNode ? [childVNode] : [],
+            key: this.key
+        });
+    }
+
+    /**
+     * Get clip filter based on behavior
+     * @private
+     */
+    _getClipFilter() {
+        switch (this.clipBehavior) {
+            case Clip.antiAlias:
+            case Clip.antiAliasWithSaveLayer:
+                return 'anti-alias';
+            case Clip.hardEdge:
+            case Clip.none:
+            default:
+                return 'none';
+        }
+    }
+
+    /**
+     * Mount container and apply custom clipper
+     * @private
+     */
+    _onContainerMount(el, context) {
+        if (!el) return;
+
+        this._containerElement = el;
+
+        if (this.clipper) {
+            this._applyClipper();
+        }
+
+        const resizeHandler = () => this._applyClipper();
+        window.addEventListener('resize', resizeHandler);
+        el._cleanupResize = () => window.removeEventListener('resize', resizeHandler);
+    }
+
+    /**
+     * Apply custom clipper
+     * @private
+     */
+    _applyClipper() {
+        if (!this.clipper || !this._containerElement) return;
+
+        try {
+            const rect = this._containerElement.getBoundingClientRect();
+            const size = {
+                width: Math.ceil(rect.width) || 100,
+                height: Math.ceil(rect.height) || 100
+            };
+
+            const clipPath = this.clipper.getClip(size);
+            if (clipPath) {
+                this._containerElement.style.clipPath = clipPath;
+                this._containerElement.style.WebkitClipPath = clipPath;
+            }
+        } catch (error) {
+            console.error('Error applying oval clipper:', error);
+        }
+    }
+
+    /**
+     * Debug properties
+     */
+    debugFillProperties(properties) {
+        super.debugFillProperties(properties);
+        properties.push({ name: 'hasClipper', value: !!this.clipper });
+        properties.push({ name: 'clipBehavior', value: this.clipBehavior });
+    }
+
+    /**
+     * Create element
+     */
+    createElement(parent, runtime) {
+        return new ClipOvalElement(this, parent, runtime);
+    }
+}
+
+class RenderClipOval {
+    constructor({ clipper = null, clipBehavior = Clip.antiAlias } = {}) {
+        this.clipper = clipper;
+        this.clipBehavior = clipBehavior;
+    }
+
+    debugInfo() {
+        return {
+            type: 'RenderClipOval',
+            hasClipper: !!this.clipper,
+            clipBehavior: this.clipBehavior
+        };
+    }
+}
+
+class ClipOvalElement extends ProxyWidget.constructor.prototype.constructor {
+    performRebuild() {
+        return this.widget.build(this.context);
+    }
+
+    detach() {
+        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {
+            this.widget._containerElement._cleanupResize();
+        }
+        super.detach();
+    }
+}
+
+// ============================================================================
+// CLIP PATH WIDGET
+// Clips child to custom path shape
+// ============================================================================
+
+class ClipPath extends ProxyWidget {
+    constructor({
+        key = null,
+        clipper = null,
+        clipBehavior = Clip.antiAlias,
+        child = null
+    } = {}) {
+        super({ key, child });
+
+        if (clipper && !(clipper instanceof CustomClipper)) {
+            throw new Error(
+                `ClipPath requires a CustomClipper instance, got: ${typeof clipper}`
+            );
+        }
+
+        if (!Object.values(Clip).includes(clipBehavior)) {
+            throw new Error(
+                `Invalid clipBehavior: ${clipBehavior}`
+            );
+        }
+
+        this.clipper = clipper;
+        this.clipBehavior = clipBehavior;
+        this._renderObject = null;
+        this._containerElement = null;
+    }
+
+    /**
+     * Create render object
+     */
+    createRenderObject(context) {
+        return new RenderClipPath({
+            clipper: this.clipper,
+            clipBehavior: this.clipBehavior
+        });
+    }
+
+    /**
+     * Update render object
+     */
+    updateRenderObject(context, renderObject) {
+        renderObject.clipper = this.clipper;
+        renderObject.clipBehavior = this.clipBehavior;
+    }
+
+    /**
+     * Unmount and cleanup
+     */
+    unmountRenderObject(renderObject) {
+        renderObject.clipper = null;
+    }
+
+    /**
+     * Build the widget
+     */
+    build(context) {
+        if (!this._renderObject) {
+            this._renderObject = this.createRenderObject(context);
+        } else {
+            this.updateRenderObject(context, this._renderObject);
+        }
+
+        let childVNode = null;
+        if (this.child) {
+            const childElement = this.child.createElement(context.element, context.element.runtime);
+            childElement.mount(context.element);
+            childVNode = childElement.performRebuild();
+        }
+
+        const elementId = context.element.getElementId();
+        const widgetPath = context.element.getWidgetPath();
+
+        const overflowValue = this.clipBehavior === Clip.none ? 'visible' : 'hidden';
+
+        const style = {
+            overflow: overflowValue,
+            position: 'relative'
+        };
+
+        return new VNode({
+            tag: 'div',
+            props: {
+                style,
+                'data-element-id': elementId,
+                'data-widget-path': widgetPath,
+                'data-widget': 'ClipPath',
+                'data-clip-behavior': this.clipBehavior,
+                ref: (el) => this._onContainerMount(el)
+            },
+            children: childVNode ? [childVNode] : [],
+            key: this.key
+        });
+    }
+
+    /**
+     * Mount container and apply custom clipper
+     * @private
+     */
+    _onContainerMount(el) {
+        if (!el) return;
+
+        this._containerElement = el;
+
+        if (this.clipper) {
+            this._applyClipper();
+        }
+
+        const resizeHandler = () => this._applyClipper();
+        window.addEventListener('resize', resizeHandler);
+        el._cleanupResize = () => window.removeEventListener('resize', resizeHandler);
+    }
+
+    /**
+     * Apply custom clipper
+     * @private
+     */
+    _applyClipper() {
+        if (!this.clipper || !this._containerElement) return;
+
+        try {
+            const rect = this._containerElement.getBoundingClientRect();
+            const size = {
+                width: Math.ceil(rect.width) || 100,
+                height: Math.ceil(rect.height) || 100
+            };
+
+            const clipPath = this.clipper.getClip(size);
+            if (clipPath) {
+                this._containerElement.style.clipPath = clipPath;
+                this._containerElement.style.WebkitClipPath = clipPath;
+            }
+        } catch (error) {
+            console.error('Error applying path clipper:', error);
+        }
+    }
+
+    /**
+     * Debug properties
+     */
+    debugFillProperties(properties) {
+        super.debugFillProperties(properties);
+        properties.push({ name: 'hasClipper', value: !!this.clipper });
+        properties.push({ name: 'clipBehavior', value: this.clipBehavior });
+    }
+
+    /**
+     * Create element
+     */
+    createElement(parent, runtime) {
+        return new ClipPathElement(this, parent, runtime);
+    }
+}
+
+class RenderClipPath {
+    constructor({ clipper = null, clipBehavior = Clip.antiAlias } = {}) {
+        this.clipper = clipper;
+        this.clipBehavior = clipBehavior;
+    }
+
+    debugInfo() {
+        return {
+            type: 'RenderClipPath',
+            hasClipper: !!this.clipper,
+            clipBehavior: this.clipBehavior
+        };
+    }
+}
+
+class ClipPathElement extends ProxyWidget.constructor.prototype.constructor {
+    performRebuild() {
+        return this.widget.build(this.context);
+    }
+
+    detach() {
+        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {
+            this.widget._containerElement._cleanupResize();
+        }
+        super.detach();
+    }
+}
+
+export { ClipRect, RenderClipRect, ClipRRect, RenderClipRRect, ClipRSuperellipse, RenderClipRSuperellipse, ClipOval, RenderClipOval, ClipPath, RenderClipPath, CustomClipper, };
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/custom_paint_clip.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/custom_paint_clip.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/compoment/custom_paint_clip.js
rename to packages/flutterjs_material/flutterjs_material/src/widgets/compoment/custom_paint_clip.js
diff --git a/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/custom_single_child_layout.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/custom_single_child_layout.js
new file mode 100644
index 00000000..759c8061
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/custom_single_child_layout.js
@@ -0,0 +1,636 @@
+import { ProxyWidget, Widget } from '../../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { Size } from '../../utils/geometry.js';
+import { BoxConstraints } from '../../utils/box_constraints.js';
+
+
+
+
+
+// ============================================================================
+// SINGLE CHILD LAYOUT DELEGATE BASE CLASS
+// Override methods to define custom layout logic
+// ============================================================================
+
+class SingleChildLayoutDelegate {
+    constructor() {
+        if (new.target === SingleChildLayoutDelegate) {
+            throw new Error('SingleChildLayoutDelegate is abstract');
+        }
+    }
+
+    /**
+     * Get size constraints for the child
+     * Override to define child constraints
+     */
+    getConstraintsForChild(constraints) {
+        throw new Error('getConstraintsForChild() must be implemented');
+    }
+
+    /**
+     * Position the child
+     * Override to position child relative to parent
+     */
+    positionChild(size, childSize) {
+        throw new Error('positionChild() must be implemented');
+    }
+
+    /**
+     * Get size of this widget
+     * Override to define own size
+     */
+    getSize(constraints) {
+        return constraints.constrain(new Size(300, 300));
+    }
+
+    /**
+     * Check if delegate should be updated
+     */
+    shouldRelayout(oldDelegate) {
+        return true;
+    }
+}
+
+// ============================================================================
+// CUSTOM SINGLE CHILD LAYOUT WIDGET
+// Allows custom layout of a single child
+// ============================================================================
+
+class CustomSingleChildLayout extends ProxyWidget {
+    constructor({
+        key = null,
+        delegate = null,
+        child = null
+    } = {}) {
+        super({ key, child });
+
+        if (!delegate) {
+            throw new Error('CustomSingleChildLayout requires a delegate');
+        }
+
+        if (!(delegate instanceof SingleChildLayoutDelegate)) {
+            throw new Error(
+                `CustomSingleChildLayout requires a SingleChildLayoutDelegate instance, got: ${typeof delegate}`
+            );
+        }
+
+        this.delegate = delegate;
+        this._renderObject = null;
+        this._containerElement = null;
+        this._childElement = null;
+        this._resizeObserver = null;
+    }
+
+    /**
+     * Create render object
+     */
+    createRenderObject(context) {
+        return new RenderCustomSingleChildLayoutBox({
+            delegate: this.delegate
+        });
+    }
+
+    /**
+     * Update render object
+     */
+    updateRenderObject(context, renderObject) {
+        if (this.delegate.shouldRelayout(renderObject.delegate)) {
+            renderObject.delegate = this.delegate;
+        }
+    }
+
+    /**
+     * Build the widget
+     */
+    build(context) {
+        if (!this._renderObject) {
+            this._renderObject = this.createRenderObject(context);
+        } else {
+            this.updateRenderObject(context, this._renderObject);
+        }
+
+        let childVNode = null;
+        if (this.child) {
+            const childElement = this.child.createElement(context.element, context.element.runtime);
+            childElement.mount(context.element);
+            childVNode = childElement.performRebuild();
+        }
+
+        const elementId = context.element.getElementId();
+        const widgetPath = context.element.getWidgetPath();
+
+        return new VNode({
+            tag: 'div',
+            props: {
+                style: {
+                    position: 'relative',
+                    display: 'inline-block'
+                },
+                'data-element-id': elementId,
+                'data-widget-path': widgetPath,
+                'data-widget': 'CustomSingleChildLayout',
+                ref: (el) => this._onContainerMount(el)
+            },
+            children: [
+                new VNode({
+                    tag: 'div',
+                    props: {
+                        style: {
+                            position: 'absolute'
+                        },
+                        ref: (el) => this._onChildMount(el)
+                    },
+                    children: childVNode ? [childVNode] : []
+                })
+            ],
+            key: this.key
+        });
+    }
+
+    /**
+     * Mount container
+     * @private
+     */
+    _onContainerMount(el) {
+        if (!el) return;
+
+        this._containerElement = el;
+
+        if (window.ResizeObserver) {
+            this._resizeObserver = new ResizeObserver(() => {
+                this._performLayout();
+            });
+            this._resizeObserver.observe(el);
+        }
+
+        const resizeHandler = () => this._performLayout();
+        window.addEventListener('resize', resizeHandler);
+
+        el._cleanupResize = () => {
+            window.removeEventListener('resize', resizeHandler);
+            if (this._resizeObserver) {
+                this._resizeObserver.disconnect();
+            }
+        };
+
+        this._performLayout();
+    }
+
+    /**
+     * Mount child
+     * @private
+     */
+    _onChildMount(el) {
+        if (!el) return;
+        this._childElement = el;
+        this._performLayout();
+    }
+
+    /**
+     * Perform layout using delegate
+     * @private
+     */
+    _performLayout() {
+        if (!this._containerElement || !this._childElement || !this.delegate) return;
+
+        try {
+            const containerRect = this._containerElement.getBoundingClientRect();
+            const parentSize = new Size(containerRect.width || 300, containerRect.height || 300);
+
+            // Get parent constraints
+            const constraints = BoxConstraints.expand({ width: parentSize.width, height: parentSize.height });
+
+            // Get child constraints from delegate
+            const childConstraints = this.delegate.getConstraintsForChild(constraints);
+
+            // Get child size
+            const childRect = this._childElement.getBoundingClientRect();
+            const childSize = new Size(childRect.width || 100, childRect.height || 100);
+
+            // Constrain child size
+            const constrainedChildSize = childConstraints.constrain(childSize);
+
+            // Get position from delegate
+            const position = this.delegate.positionChild(parentSize, constrainedChildSize);
+
+            // Apply position and size
+            this._childElement.style.left = `${position.x}px`;
+            this._childElement.style.top = `${position.y}px`;
+            this._childElement.style.width = `${constrainedChildSize.width}px`;
+            this._childElement.style.height = `${constrainedChildSize.height}px`;
+
+            // Get container size from delegate
+            const containerSize = this.delegate.getSize(constraints);
+            this._containerElement.style.width = `${containerSize.width}px`;
+            this._containerElement.style.height = `${containerSize.height}px`;
+        } catch (error) {
+            console.error('Error performing custom single child layout:', error);
+        }
+    }
+
+    /**
+     * Debug properties
+     */
+    debugFillProperties(properties) {
+        super.debugFillProperties(properties);
+        properties.push({ name: 'delegate', value: this.delegate.constructor.name });
+    }
+
+    /**
+     * Create element
+     */
+    createElement(parent, runtime) {
+        return new CustomSingleChildLayoutElement(this, parent, runtime);
+    }
+}
+
+// ============================================================================
+// RENDER CUSTOM SINGLE CHILD LAYOUT BOX
+// ============================================================================
+
+class RenderCustomSingleChildLayoutBox {
+    constructor({ delegate = null } = {}) {
+        this.delegate = delegate;
+    }
+
+    debugInfo() {
+        return {
+            type: 'RenderCustomSingleChildLayoutBox',
+            delegateType: this.delegate?.constructor.name
+        };
+    }
+}
+
+// ============================================================================
+// CUSTOM SINGLE CHILD LAYOUT ELEMENT
+// ============================================================================
+
+class CustomSingleChildLayoutElement extends ProxyWidget.constructor.prototype.constructor {
+    performRebuild() {
+        return this.widget.build(this.context);
+    }
+
+    detach() {
+        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {
+            this.widget._containerElement._cleanupResize();
+        }
+        super.detach();
+    }
+}
+
+// ============================================================================
+// MULTI CHILD LAYOUT DELEGATE BASE CLASS
+// Override methods to define custom multi-child layout logic
+// ============================================================================
+
+class MultiChildLayoutDelegate {
+    constructor() {
+        if (new.target === MultiChildLayoutDelegate) {
+            throw new Error('MultiChildLayoutDelegate is abstract');
+        }
+    }
+
+    /**
+     * Perform layout on children
+     * Children are keyed by id set via LayoutId
+     */
+    performLayout(size, layoutChild) {
+        throw new Error('performLayout() must be implemented');
+    }
+
+    /**
+     * Get size of this widget
+     */
+    getSize(constraints) {
+        return constraints.constrain(new Size(300, 300));
+    }
+
+    /**
+     * Check if delegate should update
+     */
+    shouldRelayout(oldDelegate) {
+        return true;
+    }
+}
+
+// ============================================================================
+// LAYOUT ID WIDGET
+// Assigns an id to a child in CustomMultiChildLayout
+// ============================================================================
+
+class LayoutId extends Widget {
+    constructor({
+        key = null,
+        id = null,
+        child = null
+    } = {}) {
+        super(key || { id });
+
+        if (!id) {
+            throw new Error('LayoutId requires an id');
+        }
+
+        this.id = id;
+        this.child = child;
+    }
+
+    /**
+     * Apply parent data to child
+     */
+    applyParentData(renderObject) {
+        if (!renderObject.parentData) {
+            renderObject.parentData = {};
+        }
+        renderObject.parentData.id = this.id;
+    }
+
+    /**
+     * Build returns the child
+     */
+    build(context) {
+        return this.child;
+    }
+
+    /**
+     * Debug properties
+     */
+    debugFillProperties(properties) {
+        super.debugFillProperties(properties);
+        properties.push({ name: 'id', value: this.id });
+    }
+
+    /**
+     * Create element
+     */
+    createElement(parent, runtime) {
+        return new LayoutIdElement(this, parent, runtime);
+    }
+}
+
+class LayoutIdElement extends Widget.constructor.prototype.constructor {
+    performRebuild() {
+        return this.widget.build(this.context);
+    }
+}
+
+// ============================================================================
+// CUSTOM MULTI CHILD LAYOUT WIDGET
+// Allows custom layout of multiple children with ids
+// ============================================================================
+
+class CustomMultiChildLayout extends Widget {
+    constructor({
+        key = null,
+        delegate = null,
+        children = []
+    } = {}) {
+        super(key);
+
+        if (!delegate) {
+            throw new Error('CustomMultiChildLayout requires a delegate');
+        }
+
+        if (!(delegate instanceof MultiChildLayoutDelegate)) {
+            throw new Error(
+                `CustomMultiChildLayout requires a MultiChildLayoutDelegate instance, got: ${typeof delegate}`
+            );
+        }
+
+        this.delegate = delegate;
+        this.children = children || [];
+        this._renderObject = null;
+        this._containerElement = null;
+        this._childElements = new Map();
+        this._resizeObserver = null;
+    }
+
+    /**
+     * Create render object
+     */
+    createRenderObject(context) {
+        return new RenderCustomMultiChildLayoutBox({
+            delegate: this.delegate
+        });
+    }
+
+    /**
+     * Update render object
+     */
+    updateRenderObject(context, renderObject) {
+        if (this.delegate.shouldRelayout(renderObject.delegate)) {
+            renderObject.delegate = this.delegate;
+        }
+    }
+
+    /**
+     * Build the widget
+     */
+    build(context) {
+        if (!this._renderObject) {
+            this._renderObject = this.createRenderObject(context);
+        } else {
+            this.updateRenderObject(context, this._renderObject);
+        }
+
+        const elementId = context.element.getElementId();
+        const widgetPath = context.element.getWidgetPath();
+
+        const childVNodes = this.children.map((childWidget, index) => {
+            let wrappedChild = childWidget;
+
+            // Wrap child in LayoutId if not already wrapped
+            if (!(childWidget instanceof LayoutId)) {
+                wrappedChild = new LayoutId({
+                    id: index,
+                    child: childWidget
+                });
+            }
+
+            const childElement = wrappedChild.createElement(context.element, context.element.runtime);
+            childElement.mount(context.element);
+            return childElement.performRebuild();
+        });
+
+        return new VNode({
+            tag: 'div',
+            props: {
+                style: {
+                    position: 'relative',
+                    display: 'inline-block'
+                },
+                'data-element-id': elementId,
+                'data-widget-path': widgetPath,
+                'data-widget': 'CustomMultiChildLayout',
+                ref: (el) => this._onContainerMount(el)
+            },
+            children: childVNodes.map((vnode, index) =>
+                new VNode({
+                    tag: 'div',
+                    props: {
+                        style: {
+                            position: 'absolute'
+                        },
+                        'data-layout-id': index,
+                        ref: (el) => this._onChildMount(el, index)
+                    },
+                    children: [vnode]
+                })
+            ),
+            key: this.key
+        });
+    }
+
+    /**
+     * Mount container
+     * @private
+     */
+    _onContainerMount(el) {
+        if (!el) return;
+
+        this._containerElement = el;
+
+        if (window.ResizeObserver) {
+            this._resizeObserver = new ResizeObserver(() => {
+                this._performLayout();
+            });
+            this._resizeObserver.observe(el);
+        }
+
+        const resizeHandler = () => this._performLayout();
+        window.addEventListener('resize', resizeHandler);
+
+        el._cleanupResize = () => {
+            window.removeEventListener('resize', resizeHandler);
+            if (this._resizeObserver) {
+                this._resizeObserver.disconnect();
+            }
+        };
+
+        this._performLayout();
+    }
+
+    /**
+     * Mount child
+     * @private
+     */
+    _onChildMount(el, id) {
+        if (!el) return;
+        this._childElements.set(id, el);
+        this._performLayout();
+    }
+
+    /**
+     * Perform layout using delegate
+     * @private
+     */
+    _performLayout() {
+        if (!this._containerElement || !this.delegate) return;
+
+        try {
+            const containerRect = this._containerElement.getBoundingClientRect();
+            const size = new Size(containerRect.width || 300, containerRect.height || 300);
+
+            // Get constraints
+            const constraints = BoxConstraints.expand({ width: size.width, height: size.height });
+
+            // Create layout child function
+            const layoutChild = (id, childConstraints) => {
+                const childEl = this._childElements.get(id);
+                if (!childEl) {
+                    console.warn(`LayoutId ${id} not found`);
+                    return new Size(0, 0);
+                }
+
+                // Get child size
+                const childRect = childEl.getBoundingClientRect();
+                const childSize = new Size(childRect.width || 100, childRect.height || 100);
+
+                // Constrain and return
+                return childConstraints.constrain(childSize);
+            };
+
+            // Call delegate's performLayout
+            const layoutInfo = this.delegate.performLayout(size, layoutChild);
+
+            // Apply layout to children
+            if (layoutInfo && typeof layoutInfo === 'object') {
+                for (const [id, info] of Object.entries(layoutInfo)) {
+                    const childEl = this._childElements.get(parseInt(id));
+                    if (childEl) {
+                        childEl.style.left = `${info.x || 0}px`;
+                        childEl.style.top = `${info.y || 0}px`;
+                        if (info.width) childEl.style.width = `${info.width}px`;
+                        if (info.height) childEl.style.height = `${info.height}px`;
+                    }
+                }
+            }
+
+            // Get container size from delegate
+            const containerSize = this.delegate.getSize(constraints);
+            this._containerElement.style.width = `${containerSize.width}px`;
+            this._containerElement.style.height = `${containerSize.height}px`;
+        } catch (error) {
+            console.error('Error performing custom multi child layout:', error);
+        }
+    }
+
+    /**
+     * Debug properties
+     */
+    debugFillProperties(properties) {
+        super.debugFillProperties(properties);
+        properties.push({ name: 'delegate', value: this.delegate.constructor.name });
+        properties.push({ name: 'childCount', value: this.children.length });
+    }
+
+    /**
+     * Create element
+     */
+    createElement(parent, runtime) {
+        return new CustomMultiChildLayoutElement(this, parent, runtime);
+    }
+}
+
+// ============================================================================
+// RENDER CUSTOM MULTI CHILD LAYOUT BOX
+// ============================================================================
+
+class RenderCustomMultiChildLayoutBox {
+    constructor({ delegate = null } = {}) {
+        this.delegate = delegate;
+    }
+
+    debugInfo() {
+        return {
+            type: 'RenderCustomMultiChildLayoutBox',
+            delegateType: this.delegate?.constructor.name
+        };
+    }
+}
+
+// ============================================================================
+// CUSTOM MULTI CHILD LAYOUT ELEMENT
+// ============================================================================
+
+class CustomMultiChildLayoutElement extends Widget.constructor.prototype.constructor {
+    performRebuild() {
+        return this.widget.build(this.context);
+    }
+
+    detach() {
+        if (this.widget._containerElement && this.widget._containerElement._cleanupResize) {
+            this.widget._containerElement._cleanupResize();
+        }
+        super.detach();
+    }
+}
+
+export {
+    CustomSingleChildLayout,
+    RenderCustomSingleChildLayoutBox,
+    SingleChildLayoutDelegate,
+    LayoutId,
+    CustomMultiChildLayout,
+    RenderCustomMultiChildLayoutBox,
+    MultiChildLayoutDelegate
+};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/directionality.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/directionality.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/compoment/directionality.js
rename to packages/flutterjs_material/flutterjs_material/src/widgets/compoment/directionality.js
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/divider.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/divider.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/compoment/divider.js
rename to packages/flutterjs_material/flutterjs_material/src/widgets/compoment/divider.js
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/fitted_box.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/fitted_box.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/compoment/fitted_box.js
rename to packages/flutterjs_material/flutterjs_material/src/widgets/compoment/fitted_box.js
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/fractional_translation.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/fractional_translation.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/compoment/fractional_translation.js
rename to packages/flutterjs_material/flutterjs_material/src/widgets/compoment/fractional_translation.js
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/image_filter.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/image_filter.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/compoment/image_filter.js
rename to packages/flutterjs_material/flutterjs_material/src/widgets/compoment/image_filter.js
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/indexed_stack.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/indexed_stack.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/compoment/indexed_stack.js
rename to packages/flutterjs_material/flutterjs_material/src/widgets/compoment/indexed_stack.js
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/list_body.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/list_body.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/compoment/list_body.js
rename to packages/flutterjs_material/flutterjs_material/src/widgets/compoment/list_body.js
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/mouse_region.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/mouse_region.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/compoment/mouse_region.js
rename to packages/flutterjs_material/flutterjs_material/src/widgets/compoment/mouse_region.js
diff --git a/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/multi_child_view.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/multi_child_view.js
new file mode 100644
index 00000000..84c25fb6
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/multi_child_view.js
@@ -0,0 +1,787 @@
+
+import { Widget, } from '../../core/widget_element.js';
+import { Element } from "@flutterjs/runtime"
+import { VNode } from '@flutterjs/vdom/vnode';
+import { Axis, TextDirection, VerticalDirection, Clip, MainAxisAlignment, CrossAxisAlignment, FlexFit, WrapAlignment, WrapCrossAlignment, MainAxisSize } from '../../utils/utils.js';
+
+// ============================================================================
+// ENUMS
+// ============================================================================
+
+
+
+// ============================================================================
+// HELPERS
+// ============================================================================
+
+/**
+ * Reconcile a single child element.
+ * 
+ * @param {Element} parent The parent element.
+ * @param {Element|null} oldChildElement The existing child element (if any).
+ * @param {Widget|null} newWidget The new widget configuration.
+ * @returns {Element|null} The updated or new child element.
+ */
+function reconcileChild(parent, oldChildElement, newWidget) {
+  if (!newWidget) {
+    if (oldChildElement) {
+      oldChildElement.unmount();
+    }
+    return null;
+  }
+
+  // Check for reuse
+  if (oldChildElement &&
+    oldChildElement.widget.constructor === newWidget.constructor &&
+    oldChildElement.widget.key === newWidget.key) {
+
+    oldChildElement.updateWidget(newWidget);
+
+    // Ensure the child is up-to-date (synchronous rebuild if dirty)
+    if (oldChildElement.dirty) {
+      oldChildElement.rebuild();
+    }
+    return oldChildElement;
+  }
+
+  // Replace
+  if (oldChildElement) {
+    oldChildElement.unmount();
+  }
+
+  const newChildElement = newWidget.createElement(parent, parent.runtime);
+  newChildElement.mount(parent);
+  return newChildElement;
+}
+
+// ============================================================================
+// FLEX PARENT DATA
+// ============================================================================
+
+class FlexParentData {
+  constructor() {
+    this.flex = null;
+    this.fit = FlexFit.loose;
+  }
+
+  debugInfo() {
+    return {
+      flex: this.flex,
+      fit: this.fit
+    };
+  }
+}
+
+// ============================================================================
+// RENDER FLEX
+// ============================================================================
+
+class RenderFlex {
+  constructor({
+    direction = Axis.horizontal,
+    mainAxisAlignment = MainAxisAlignment.start,
+    mainAxisSize = MainAxisSize.max,
+    crossAxisAlignment = CrossAxisAlignment.center,
+    textDirection = TextDirection.ltr,
+    verticalDirection = VerticalDirection.down,
+    textBaseline = null,
+    clipBehavior = Clip.none,
+    spacing = 0
+  } = {}) {
+    this.direction = direction;
+    this.mainAxisAlignment = mainAxisAlignment;
+    this.mainAxisSize = mainAxisSize;
+    this.crossAxisAlignment = crossAxisAlignment;
+    this.textDirection = textDirection;
+    this.verticalDirection = verticalDirection;
+    this.textBaseline = textBaseline;
+    this.clipBehavior = clipBehavior;
+    this.spacing = spacing;
+    this._children = [];
+  }
+
+  addChild(child) {
+    this._children.push(child);
+  }
+
+  removeChild(child) {
+    const index = this._children.indexOf(child);
+    if (index > -1) {
+      this._children.splice(index, 1);
+    }
+  }
+
+  debugInfo() {
+    return {
+      type: 'RenderFlex',
+      direction: this.direction,
+      mainAxisAlignment: this.mainAxisAlignment,
+      mainAxisSize: this.mainAxisSize,
+      crossAxisAlignment: this.crossAxisAlignment,
+      textDirection: this.textDirection,
+      spacing: this.spacing,
+      childCount: this._children.length
+    };
+  }
+}
+
+// ============================================================================
+// FLEX WIDGET
+// ============================================================================
+
+class Flex extends Widget {
+  constructor({
+    key = null,
+    direction = Axis.horizontal,
+    mainAxisAlignment = MainAxisAlignment.start,
+    mainAxisSize = MainAxisSize.max,
+    crossAxisAlignment = CrossAxisAlignment.center,
+    textDirection = null,
+    verticalDirection = VerticalDirection.down,
+    textBaseline = null,
+    clipBehavior = Clip.none,
+    spacing = 0,
+    children = []
+  } = {}) {
+    super(key);
+
+    // Validate baseline
+    if (crossAxisAlignment === CrossAxisAlignment.baseline && !textBaseline) {
+      throw new Error(
+        'textBaseline is required when crossAxisAlignment is CrossAxisAlignment.baseline'
+      );
+    }
+
+    this.direction = direction;
+    this.mainAxisAlignment = mainAxisAlignment;
+    this.mainAxisSize = mainAxisSize;
+    this.crossAxisAlignment = crossAxisAlignment;
+    this.textDirection = textDirection;
+    this.verticalDirection = verticalDirection;
+    this.textBaseline = textBaseline;
+    this.clipBehavior = clipBehavior;
+    this.spacing = spacing;
+    this.children = children || [];
+    this._renderObject = null;
+  }
+
+  /**
+   * Check if text direction is needed
+   * @private
+   */
+  _needTextDirection() {
+    if (this.direction === Axis.horizontal) {
+      return true;
+    }
+    return this.crossAxisAlignment === CrossAxisAlignment.start ||
+      this.crossAxisAlignment === CrossAxisAlignment.end;
+  }
+
+  /**
+   * Get effective text direction
+   */
+  getEffectiveTextDirection(context) {
+    if (this.textDirection) {
+      return this.textDirection;
+    }
+
+    if (this._needTextDirection()) {
+      return context?.textDirection || TextDirection.ltr;
+    }
+
+    return null;
+  }
+
+  /**
+   * Create render object
+   */
+  createRenderObject(context) {
+    return new RenderFlex({
+      direction: this.direction,
+      mainAxisAlignment: this.mainAxisAlignment,
+      mainAxisSize: this.mainAxisSize,
+      crossAxisAlignment: this.crossAxisAlignment,
+      textDirection: this.getEffectiveTextDirection(context),
+      verticalDirection: this.verticalDirection,
+      textBaseline: this.textBaseline,
+      clipBehavior: this.clipBehavior,
+      spacing: this.spacing
+    });
+  }
+
+  /**
+   * Update render object
+   */
+  updateRenderObject(context, renderObject) {
+    renderObject.direction = this.direction;
+    renderObject.mainAxisAlignment = this.mainAxisAlignment;
+    renderObject.mainAxisSize = this.mainAxisSize;
+    renderObject.crossAxisAlignment = this.crossAxisAlignment;
+    renderObject.textDirection = this.getEffectiveTextDirection(context);
+    renderObject.verticalDirection = this.verticalDirection;
+    renderObject.textBaseline = this.textBaseline;
+    renderObject.clipBehavior = this.clipBehavior;
+    renderObject.spacing = this.spacing;
+  }
+
+  debugFillProperties(properties) {
+    super.debugFillProperties(properties);
+    properties.push({ name: 'direction', value: this.direction });
+    properties.push({ name: 'mainAxisAlignment', value: this.mainAxisAlignment });
+    properties.push({ name: 'mainAxisSize', value: this.mainAxisSize });
+    properties.push({ name: 'crossAxisAlignment', value: this.crossAxisAlignment });
+    properties.push({ name: 'textDirection', value: this.textDirection });
+    properties.push({ name: 'spacing', value: this.spacing });
+    properties.push({ name: 'childCount', value: this.children.length });
+  }
+
+  createElement(parent, runtime) {
+    return new FlexElement(this, parent, runtime);
+  }
+}
+
+class FlexElement extends Element {
+  performRebuild() {
+    // 1. Maintain Logic for RenderObject (Optional but preserved from original)
+    if (!this.widget._renderObject) {
+      this.widget._renderObject = this.widget.createRenderObject(this.context);
+    } else {
+      this.widget.updateRenderObject(this.context, this.widget._renderObject);
+    }
+
+    const widget = this.widget;
+    const context = this.context;
+
+    // 2. Map alignment to CSS
+    const justifyContent = this._mapMainAxisAlignment(widget.mainAxisAlignment);
+    const alignItems = this._mapCrossAxisAlignment(widget.crossAxisAlignment);
+    var flexDirection = widget.direction === Axis.horizontal ? 'row' : 'column';
+
+    // Handle reverse direction
+    if (widget.verticalDirection === VerticalDirection.up && widget.direction === Axis.vertical) {
+      flexDirection = 'column-reverse';
+    }
+
+    const overflowValue = widget.clipBehavior === Clip.none ? 'visible' : 'hidden';
+    const isHorizontal = widget.direction === Axis.horizontal;
+
+    // Harden MainAxisSize check
+    // Default to MAX if not explicitly MIN
+    const mainAxisSizeVal = widget.mainAxisSize;
+    // Treat as MIN only if it explicitly equals 'min' or MainAxisSize.min
+    const isMin = mainAxisSizeVal === 'min' || mainAxisSizeVal === MainAxisSize.min;
+    const isMainMax = !isMin; // Default to max (Flutter behavior)
+
+    const style = {
+      display: 'flex',
+      flexDirection,
+      justifyContent,
+      alignItems,
+      gap: `${widget.spacing}px`,
+      // ✅ FIXED: Width/height logic for flex containers 
+      // For Row (horizontal): width 100% if Max, auto if Min. Height auto.
+      // For Column (vertical): Width 100% (like block). Height 100% if Max, auto if Min.
+
+      width: (isHorizontal && isMainMax) || (!isHorizontal) ? '100%' : 'auto',
+      // Fixed height: 100% causes overflow issues. Use minHeight for expansion instead.
+      height: 'auto',
+      minHeight: (!isHorizontal && isMainMax) ? '100%' : 'auto',
+
+      direction: widget.textDirection === TextDirection.rtl ? 'rtl' : 'ltr',
+      overflow: overflowValue,
+      flexWrap: 'nowrap',
+      boxSizing: 'border-box',
+      // Critical for scrolling: prevent flex item from shrinking smaller than content
+      flexShrink: 0,
+      // Robustness: ensure this Flex fills the cross-axis of a parent Flex (like Column)
+      alignSelf: 'stretch'
+    };
+
+    // console.log(`[FlexElement] ${widget.constructor.name} Layout: width=${style.width}, alignSelf=${style.alignSelf}, isMainMax=${isMainMax}`);
+
+    // 3. Reconcile Children
+    const newWidgets = widget.children;
+    const oldChildren = this._children || [];
+    const newChildrenElements = [];
+    const childVNodes = [];
+
+    for (let i = 0; i < newWidgets.length; i++) {
+      const newWidget = newWidgets[i];
+
+      // Match existing child by index (Simple List Diffing)
+      // TODO: Enhance with Key support if needed
+      const oldChild = i < oldChildren.length ? oldChildren[i] : null;
+
+      const childElement = reconcileChild(this, oldChild, newWidget);
+      if (childElement) {
+        newChildrenElements.push(childElement);
+
+        // Wrapper Logic (Flexible/Expanded support)
+        let childStyle = {};
+        const isFlexible = newWidget instanceof Flexible ||
+          (newWidget.flex !== undefined && newWidget.fit !== undefined);
+
+        if (isFlexible) {
+          if (newWidget.fit === FlexFit.tight) {
+            childStyle.flex = newWidget.flex || 1;
+          } else {
+            childStyle.flex = `0 1 auto`;
+          }
+        }
+
+        // Wrap in styling div
+        // Improved Wrapper: Becomes a Flex container to handle cross-axis alignment properly
+        // This allows 'width: 100%' children to expand while respecting 'alignItems' for others.
+        const isColumn = flexDirection.includes('column');
+        const wrapperStyle = {
+          ...childStyle,
+          minWidth: 0,
+          minHeight: 0,
+          display: 'flex',
+          flexDirection: isColumn ? 'column' : 'row',
+          alignItems: alignItems, // Inherit cross-axis alignment
+          width: isColumn ? '100%' : 'auto',
+          height: !isColumn ? '100%' : 'auto',
+          boxSizing: 'border-box'
+        };
+
+        childVNodes.push(new VNode({
+          tag: 'div',
+          props: {
+            style: wrapperStyle
+          },
+          children: [childElement.vnode] // Use the cached/updated VNode
+        }));
+      }
+    }
+
+    // Unmount extra children
+    for (let i = newWidgets.length; i < oldChildren.length; i++) {
+      if (oldChildren[i]) {
+        oldChildren[i].unmount();
+      }
+    }
+
+    this._children = newChildrenElements;
+
+    // 4. Return Container VNode
+    return new VNode({
+      tag: 'div',
+      props: {
+        style,
+        'data-element-id': this.getElementId(),
+        'data-widget-path': this.getWidgetPath(),
+        'data-widget': 'Flex',
+        'data-direction': widget.direction,
+        'data-main-axis': widget.mainAxisAlignment,
+        'data-cross-axis': widget.crossAxisAlignment,
+        'data-spacing': widget.spacing
+      },
+      children: childVNodes,
+      key: widget.key
+    });
+  }
+
+  _mapMainAxisAlignment(value) {
+    if (typeof value === 'string' && value.startsWith('.')) value = value.substring(1);
+    const map = {
+      start: 'flex-start', end: 'flex-end', center: 'center',
+      spaceBetween: 'space-between', spaceAround: 'space-around', spaceEvenly: 'space-evenly',
+      'flex-start': 'flex-start', 'flex-end': 'flex-end',
+      'space-between': 'space-between', 'space-around': 'space-around', 'space-evenly': 'space-evenly'
+    };
+    return map[value] || value || 'flex-start';
+  }
+
+  _mapCrossAxisAlignment(value) {
+    if (typeof value === 'string' && value.startsWith('.')) value = value.substring(1);
+    const map = {
+      start: 'flex-start', end: 'flex-end', center: 'center',
+      stretch: 'stretch', baseline: 'baseline',
+      'flex-start': 'flex-start', 'flex-end': 'flex-end'
+    };
+    return map[value] || value || 'center';
+  }
+}
+
+// ============================================================================
+// ROW WIDGET
+// ============================================================================
+
+class Row extends Flex {
+  constructor(options = {}) {
+    super({
+      ...options,
+      direction: Axis.horizontal
+    });
+  }
+}
+
+// ============================================================================
+// COLUMN WIDGET
+// ============================================================================
+
+class Column extends Flex {
+  constructor(options = {}) {
+    super({
+      ...options,
+      direction: Axis.vertical
+    });
+  }
+}
+
+// ============================================================================
+// FLEXIBLE WIDGET
+// ============================================================================
+
+class Flexible extends Widget {
+  constructor({
+    key = null,
+    flex = 1,
+    fit = FlexFit.loose,
+    child = null
+  } = {}) {
+    super(key);
+
+    if (flex <= 0) {
+      throw new Error('flex must be > 0');
+    }
+
+    this.flex = flex;
+    this.fit = fit;
+    this.child = child;
+  }
+
+  /**
+   * Apply flex parent data
+   */
+  applyParentData(renderObject) {
+    if (!renderObject.parentData) {
+      renderObject.parentData = new FlexParentData();
+    }
+
+    const parentData = renderObject.parentData;
+    let needsLayout = false;
+
+    if (parentData.flex !== this.flex) {
+      parentData.flex = this.flex;
+      needsLayout = true;
+    }
+
+    if (parentData.fit !== this.fit) {
+      parentData.fit = this.fit;
+      needsLayout = true;
+    }
+
+    if (needsLayout && renderObject.parent) {
+      renderObject.parent.markNeedsLayout?.();
+    }
+  }
+
+  debugFillProperties(properties) {
+    super.debugFillProperties(properties);
+    properties.push({ name: 'flex', value: this.flex });
+    properties.push({ name: 'fit', value: this.fit });
+  }
+
+  createElement(parent, runtime) {
+    return new FlexibleElement(this, parent, runtime);
+  }
+}
+
+class FlexibleElement extends Element {
+  performRebuild() {
+    // Reconcile single child
+    const childWidget = this.widget.child;
+    const oldChild = (this._children && this._children.length > 0) ? this._children[0] : null;
+
+    const childElement = reconcileChild(this, oldChild, childWidget);
+
+    if (childElement) {
+      this._children = [childElement];
+      return childElement.vnode;
+    } else {
+      this._children = [];
+      return null;
+    }
+  }
+}
+
+// ============================================================================
+// EXPANDED WIDGET
+// ============================================================================
+
+class Expanded extends Flexible {
+  constructor({
+    key = null,
+    flex = 1,
+    child = null
+  } = {}) {
+    super({
+      key,
+      flex,
+      fit: FlexFit.tight,
+      child
+    });
+  }
+}
+
+// ============================================================================
+// WRAP WIDGET
+// ============================================================================
+
+class Wrap extends Widget {
+  constructor({
+    key = null,
+    direction = Axis.horizontal,
+    alignment = WrapAlignment.start,
+    spacing = 0,
+    runAlignment = WrapAlignment.start,
+    runSpacing = 0,
+    crossAxisAlignment = WrapCrossAlignment.start,
+    textDirection = null,
+    verticalDirection = VerticalDirection.down,
+    clipBehavior = Clip.none,
+    children = []
+  } = {}) {
+    super(key);
+
+    this.direction = direction;
+    this.alignment = alignment;
+    this.spacing = spacing;
+    this.runAlignment = runAlignment;
+    this.runSpacing = runSpacing;
+    this.crossAxisAlignment = crossAxisAlignment;
+    this.textDirection = textDirection;
+    this.verticalDirection = verticalDirection;
+    this.clipBehavior = clipBehavior;
+    this.children = children || [];
+  }
+
+  debugFillProperties(properties) {
+    super.debugFillProperties(properties);
+    properties.push({ name: 'direction', value: this.direction });
+    properties.push({ name: 'alignment', value: this.alignment });
+    properties.push({ name: 'spacing', value: this.spacing });
+    properties.push({ name: 'runAlignment', value: this.runAlignment });
+    properties.push({ name: 'runSpacing', value: this.runSpacing });
+    properties.push({ name: 'childCount', value: this.children.length });
+  }
+
+  createElement(parent, runtime) {
+    return new WrapElement(this, parent, runtime);
+  }
+}
+
+class WrapElement extends Element {
+  performRebuild() {
+    const widget = this.widget;
+
+    const flexDirection = widget.direction === Axis.horizontal ? 'row' : 'column';
+    const overflowValue = widget.clipBehavior === Clip.none ? 'visible' : 'hidden';
+
+    // Map alignments (Helper logic duplicated for safety inside Element)
+    const mapAlignment = (val) => {
+      if (typeof val === 'string' && val.startsWith('.')) val = val.substring(1);
+      const map = {
+        start: 'flex-start', end: 'flex-end', center: 'center',
+        spaceBetween: 'space-between', spaceAround: 'space-around', spaceEvenly: 'space-evenly'
+      };
+      return map[val] || 'flex-start';
+    };
+
+    const style = {
+      display: 'flex',
+      flexDirection,
+      flexWrap: 'wrap',
+      justifyContent: mapAlignment(widget.alignment),
+      alignContent: mapAlignment(widget.runAlignment),
+      gap: `${widget.spacing}px ${widget.runSpacing}px`,
+      direction: widget.textDirection === TextDirection.rtl ? 'rtl' : 'ltr',
+      overflow: overflowValue
+    };
+
+    // Reconcile Children
+    const newWidgets = widget.children;
+    const oldChildren = this._children || [];
+    const newChildrenElements = [];
+    const childVNodes = [];
+
+    for (let i = 0; i < newWidgets.length; i++) {
+      const newWidget = newWidgets[i];
+      const oldChild = i < oldChildren.length ? oldChildren[i] : null;
+      const childElement = reconcileChild(this, oldChild, newWidget);
+
+      if (childElement) {
+        newChildrenElements.push(childElement);
+        childVNodes.push(childElement.vnode);
+      }
+    }
+
+    for (let i = newWidgets.length; i < oldChildren.length; i++) {
+      if (oldChildren[i]) oldChildren[i].unmount();
+    }
+    this._children = newChildrenElements;
+
+    return new VNode({
+      tag: 'div',
+      props: {
+        style,
+        'data-element-id': this.getElementId(),
+        'data-widget-path': this.getWidgetPath(),
+        'data-widget': 'Wrap',
+        'data-direction': widget.direction,
+      },
+      children: childVNodes,
+      key: widget.key
+    });
+  }
+}
+
+// ============================================================================
+// FLOW DELEGATE BASE CLASS
+// ============================================================================
+
+class FlowDelegate {
+  constructor() {
+    if (new.target === FlowDelegate) {
+      throw new Error('FlowDelegate is abstract');
+    }
+  }
+
+  getSize(constraints) {
+    throw new Error('getSize() must be implemented');
+  }
+
+  paintChildren(context, sizes) {
+    throw new Error('paintChildren() must be implemented');
+  }
+
+  shouldRepaint(oldDelegate) {
+    return true;
+  }
+
+  shouldReflow(oldDelegate) {
+    return true;
+  }
+}
+
+// ============================================================================
+// FLOW WIDGET
+// ============================================================================
+
+class Flow extends Widget {
+  constructor({
+    key = null,
+    delegate = null,
+    clipBehavior = Clip.hardEdge,
+    children = []
+  } = {}) {
+    super(key);
+
+    if (!delegate) {
+      throw new Error('Flow requires a delegate');
+    }
+
+    if (!(delegate instanceof FlowDelegate)) {
+      throw new Error('delegate must be an instance of FlowDelegate');
+    }
+
+    this.delegate = delegate;
+    this.clipBehavior = clipBehavior;
+    this.children = children || [];
+  }
+
+  debugFillProperties(properties) {
+    super.debugFillProperties(properties);
+    properties.push({ name: 'delegate', value: this.delegate.constructor.name });
+    properties.push({ name: 'clipBehavior', value: this.clipBehavior });
+    properties.push({ name: 'childCount', value: this.children.length });
+  }
+
+  createElement(parent, runtime) {
+    return new FlowElement(this, parent, runtime);
+  }
+}
+
+class FlowElement extends Element {
+  performRebuild() {
+    const widget = this.widget;
+    const overflowValue = widget.clipBehavior === Clip.none ? 'visible' : 'hidden';
+
+    const style = {
+      position: 'relative',
+      display: 'inline-block',
+      overflow: overflowValue
+    };
+
+    // Reconcile Children
+    const newWidgets = widget.children;
+    const oldChildren = this._children || [];
+    const newChildrenElements = [];
+    const childVNodes = [];
+
+    for (let i = 0; i < newWidgets.length; i++) {
+      const newWidget = newWidgets[i];
+      const oldChild = i < oldChildren.length ? oldChildren[i] : null;
+      const childElement = reconcileChild(this, oldChild, newWidget);
+
+      if (childElement) {
+        newChildrenElements.push(childElement);
+        // Wrap in positional div
+        childVNodes.push(new VNode({
+          tag: 'div',
+          props: {
+            style: {
+              position: 'absolute',
+              left: 0,
+              top: 0
+            },
+            'data-flow-index': i
+          },
+          children: [childElement.vnode]
+        }));
+      }
+    }
+
+    for (let i = newWidgets.length; i < oldChildren.length; i++) {
+      if (oldChildren[i]) oldChildren[i].unmount();
+    }
+    this._children = newChildrenElements;
+
+    return new VNode({
+      tag: 'div',
+      props: {
+        style,
+        'data-element-id': this.getElementId(),
+        'data-widget-path': this.getWidgetPath(),
+        'data-widget': 'Flow',
+        'data-clip-behavior': widget.clipBehavior,
+      },
+      children: childVNodes,
+      key: widget.key
+    });
+  }
+}
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+export {
+  Flex,
+  FlexElement,
+  RenderFlex,
+  Row,
+  Column,
+  Flexible,
+  FlexibleElement,
+  FlexParentData,
+  Expanded,
+  Wrap,
+  WrapElement,
+  Flow,
+  FlowElement,
+  FlowDelegate,
+  MainAxisSize
+};
\ No newline at end of file
diff --git a/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/opacity.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/opacity.js
new file mode 100644
index 00000000..0793e7cf
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/opacity.js
@@ -0,0 +1,203 @@
+import { ProxyWidget } from '../../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+
+// ============================================================================
+// BLEND MODE ENUM
+// Maps Flutter blend modes to CSS mix-blend-mode values
+// ============================================================================
+
+const BlendMode = {
+    clear: 'clear',
+    src: 'src',
+    dst: 'dst',
+    srcOver: 'source-over',
+    dstOver: 'destination-over',
+    srcIn: 'source-in',
+    dstIn: 'destination-in',
+    srcOut: 'source-out',
+    dstOut: 'destination-out',
+    srcATop: 'source-atop',
+    dstATop: 'destination-atop',
+    xor: 'xor',
+    plus: 'lighter',
+    modulate: 'multiply',
+    screen: 'screen',
+    overlay: 'overlay',
+    darken: 'darken',
+    lighten: 'lighten',
+    colorDodge: 'color-dodge',
+    colorBurn: 'color-burn',
+    hardLight: 'hard-light',
+    softLight: 'soft-light',
+    difference: 'difference',
+    exclusion: 'exclusion',
+    multiply: 'multiply',
+    hue: 'hue',
+    saturation: 'saturation',
+    color: 'color',
+    luminosity: 'luminosity'
+};
+
+// ============================================================================
+// OPACITY WIDGET
+// Applies opacity to child widget (Flutter-like behavior)
+// ============================================================================
+
+class Opacity extends ProxyWidget {
+    constructor({ key = null, opacity = 1.0, alwaysIncludeSemantics = false, child = null } = {}) {
+        super({ key, child });
+
+        // Validate opacity is between 0 and 1
+        if (typeof opacity !== 'number' || opacity < 0.0 || opacity > 1.0) {
+            throw new Error(
+                `Opacity must be between 0.0 and 1.0, got: ${opacity}`
+            );
+        }
+
+        this.opacity = opacity;
+        this.alwaysIncludeSemantics = alwaysIncludeSemantics;
+        this._renderObject = null;
+    }
+
+    /**
+     * Create render object for opacity
+     */
+    createRenderObject(context) {
+        return new RenderOpacity({
+            opacity: this.opacity,
+            alwaysIncludeSemantics: this.alwaysIncludeSemantics
+        });
+    }
+
+    /**
+     * Update render object when widget properties change
+     */
+    updateRenderObject(context, renderObject) {
+        renderObject.opacity = this.opacity;
+        renderObject.alwaysIncludeSemantics = this.alwaysIncludeSemantics;
+    }
+
+    /**
+     * Build the widget tree
+     */
+    build(context) {
+        // Create or update render object
+        if (!this._renderObject) {
+            this._renderObject = this.createRenderObject(context);
+        } else {
+            this.updateRenderObject(context, this._renderObject);
+        }
+
+        // Build child widget
+        // Build child with element caching
+        let childVNode = null;
+        if (this.child) {
+            if (!context._childElement) {
+                context._childElement = this.child.createElement(context, context.element.runtime);
+                context._childElement.mount(context);
+            } else {
+                if (context._childElement.update) {
+                    context._childElement.update(this.child);
+                } else {
+                    context._childElement = this.child.createElement(context, context.element.runtime);
+                    context._childElement.mount(context);
+                }
+            }
+            childVNode = context._childElement.performRebuild();
+        }
+
+        // Apply opacity styling
+        const elementId = context.element.getElementId();
+        const widgetPath = context.element.getWidgetPath();
+
+        return new VNode({
+            tag: 'div',
+            props: {
+                style: {
+                    opacity: this.opacity,
+                    transition: 'opacity 0.2s ease-in-out'
+                },
+                'data-element-id': elementId,
+                'data-widget-path': widgetPath,
+                'data-widget': 'Opacity',
+                'data-opacity': this.opacity,
+                'data-always-include-semantics': this.alwaysIncludeSemantics,
+                role: this.alwaysIncludeSemantics ? 'img' : undefined,
+                'aria-opacity': this.alwaysIncludeSemantics ? this.opacity : undefined
+            },
+            children: childVNode ? [childVNode] : [],
+            key: this.key
+        });
+    }
+
+    /**
+     * Debug properties
+     */
+    debugFillProperties(properties) {
+        super.debugFillProperties(properties);
+        properties.push({
+            name: 'opacity',
+            value: this.opacity
+        });
+
+        if (this.alwaysIncludeSemantics) {
+            properties.push({
+                name: 'alwaysIncludeSemantics',
+                value: this.alwaysIncludeSemantics,
+                tooltip: 'Include semantics even with 0 opacity'
+            });
+        }
+    }
+
+    /**
+     * Create element
+     */
+    createElement(parent, runtime) {
+        return new OpacityElement(this, parent, runtime);
+    }
+}
+
+// ============================================================================
+// RENDER OPACITY
+// Represents the render object for opacity transformation
+// ============================================================================
+
+class RenderOpacity {
+    constructor({ opacity = 1.0, alwaysIncludeSemantics = false } = {}) {
+        this.opacity = opacity;
+        this.alwaysIncludeSemantics = alwaysIncludeSemantics;
+    }
+
+    /**
+     * Apply opacity to a DOM element
+     */
+    applyToElement(element) {
+        if (element) {
+            element.style.opacity = this.opacity;
+        }
+    }
+
+    /**
+     * Get debug info
+     */
+    debugInfo() {
+        return {
+            type: 'RenderOpacity',
+            opacity: this.opacity,
+            alwaysIncludeSemantics: this.alwaysIncludeSemantics
+        };
+    }
+}
+
+// ============================================================================
+// OPACITY ELEMENT
+// Element for opacity widget
+// ============================================================================
+
+class OpacityElement extends ProxyWidget.constructor.prototype.constructor {
+    performRebuild() {
+        return this.widget.build(this.context);
+    }
+}
+
+export { Opacity, RenderOpacity, BlendMode };
\ No newline at end of file
diff --git a/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/padding.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/padding.js
new file mode 100644
index 00000000..fc5d95e6
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/padding.js
@@ -0,0 +1,109 @@
+import { Widget } from '../../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { EdgeInsets } from '../../utils/edge_insets.js';
+import { Element } from '@flutterjs/runtime';
+
+// ============================================================================
+// HELPER (Duplicated for isolation)
+// ============================================================================
+
+function reconcileChild(parent, oldChildElement, newWidget) {
+    if (!newWidget) {
+        if (oldChildElement) oldChildElement.unmount();
+        return null;
+    }
+    if (oldChildElement &&
+        oldChildElement.widget.constructor === newWidget.constructor &&
+        oldChildElement.widget.key === newWidget.key) {
+        oldChildElement.updateWidget(newWidget);
+        if (oldChildElement.dirty) oldChildElement.rebuild();
+        return oldChildElement;
+    }
+    if (oldChildElement) oldChildElement.unmount();
+    const newEl = newWidget.createElement(parent, parent.runtime);
+    newEl.mount(parent);
+    return newEl;
+}
+
+// ============================================================================
+// PADDING WIDGET
+// ============================================================================
+
+class Padding extends Widget {
+    constructor({
+        key = null,
+        padding = null,
+        child = null
+    } = {}) {
+        super(key);
+
+        if (!padding) {
+            throw new Error('Padding requires padding parameter');
+        }
+
+        if (!(padding instanceof EdgeInsets)) {
+            throw new Error(
+                `Padding requires an EdgeInsets instance, got: ${typeof padding}`
+            );
+        }
+
+        this.padding = padding;
+        this.child = child;
+    }
+
+    debugFillProperties(properties) {
+        super.debugFillProperties(properties);
+        properties.push({ name: 'padding', value: this.padding.toString() });
+    }
+
+    createElement(parent, runtime) {
+        return new PaddingElement(this, parent, runtime);
+    }
+}
+
+class PaddingElement extends Element {
+    performRebuild() {
+        // Reconcile child
+        const childWidget = this.widget.child;
+        const oldChild = (this._children && this._children.length > 0) ? this._children[0] : null;
+
+        const childElement = reconcileChild(this, oldChild, childWidget);
+
+        // Update children list
+        if (childElement) {
+            this._children = [childElement];
+        } else {
+            this._children = [];
+        }
+
+        const paddingCSS = this.widget.padding.toCSSShorthand();
+        const style = {
+            padding: paddingCSS,
+            boxSizing: 'border-box'
+        };
+
+        return new VNode({
+            tag: 'div',
+            props: {
+                style,
+                'data-element-id': this.getElementId(),
+                'data-widget-path': this.getWidgetPath(),
+                'data-widget': 'Padding'
+            },
+            children: childElement ? [childElement.vnode] : [],
+            key: this.widget.key
+        });
+    }
+}
+
+// ============================================================================
+// RENDER PADDING (stub for compatibility)
+// ============================================================================
+
+class RenderPadding {
+    constructor({ padding = null } = {}) {
+        this.padding = padding;
+    }
+}
+
+export { Padding, RenderPadding };
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/physical_model_shape.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/physical_model_shape.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/compoment/physical_model_shape.js
rename to packages/flutterjs_material/flutterjs_material/src/widgets/compoment/physical_model_shape.js
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/positioned.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/positioned.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/compoment/positioned.js
rename to packages/flutterjs_material/flutterjs_material/src/widgets/compoment/positioned.js
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/raw_image.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/raw_image.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/compoment/raw_image.js
rename to packages/flutterjs_material/flutterjs_material/src/widgets/compoment/raw_image.js
diff --git a/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/rich_text.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/rich_text.js
new file mode 100644
index 00000000..ec682fe0
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/rich_text.js
@@ -0,0 +1,559 @@
+import { Widget, } from '../../core/widget_element.js';
+import { Element } from "@flutterjs/runtime"
+import { VNode } from '@flutterjs/vdom/vnode';
+import { TextDirection,TextAlign ,TextOverflow,TextBaseline} from '../../utils/utils.js';
+// ============================================================================
+// ENUMS
+// ============================================================================
+
+
+const TextWidthBasis = {
+  parent: 'parent',
+  longestLine: 'longestLine'
+};
+
+
+// ============================================================================
+// TEXT SCALER
+// ============================================================================
+
+class TextScaler {
+  constructor(scale = 1.0) {
+    this.textScaleFactor = scale;
+  }
+
+  static get noScaling() {
+    return new TextScaler(1.0);
+  }
+
+  static linear(factor = 1.0) {
+    return new TextScaler(factor);
+  }
+
+  scale(textSize) {
+    return textSize * this.textScaleFactor;
+  }
+
+  toString() {
+    return `TextScaler(${this.textScaleFactor})`;
+  }
+}
+
+// ============================================================================
+// INLINE SPAN
+// ============================================================================
+
+class InlineSpan {
+  constructor() {
+    if (new.target === InlineSpan) {
+      throw new Error('InlineSpan is abstract');
+    }
+  }
+
+  toPlainText() {
+    throw new Error('toPlainText() must be implemented');
+  }
+
+  buildVNode() {
+    throw new Error('buildVNode() must be implemented');
+  }
+}
+
+// ============================================================================
+// TEXT SPAN
+// ============================================================================
+
+class TextSpan extends InlineSpan {
+  constructor({
+    text = '',
+    style = null,
+    children = [],
+    recognizer = null
+  } = {}) {
+    super();
+
+    this.text = text;
+    this.style = style || {};
+    this.children = children || [];
+    this.recognizer = recognizer;
+  }
+
+  toPlainText() {
+    let result = this.text || '';
+
+    if (this.children && this.children.length > 0) {
+      for (const child of this.children) {
+        result += child.toPlainText?.() || '';
+      }
+    }
+
+    return result;
+  }
+
+  buildVNode(textAlign = TextAlign.start, textDirection = TextDirection.ltr) {
+    const style = this._getTextStyle(textAlign, textDirection);
+
+    const childVNodes = this.children.map(child => {
+      if (child instanceof TextSpan) {
+        return child.buildVNode(textAlign, textDirection);
+      }
+      if (child instanceof WidgetSpan) {
+        return child.buildVNode();
+      }
+      return new VNode({
+        tag: 'span',
+        children: [String(child)]
+      });
+    });
+
+    if (this.text) {
+      childVNodes.unshift(new VNode({
+        tag: 'span',
+        children: [this.text]
+      }));
+    }
+
+    return new VNode({
+      tag: 'span',
+      props: {
+        style,
+        onClick: this.recognizer?.onTap,
+        onMouseDown: this.recognizer?.onLongPress
+      },
+      children: childVNodes.length > 0 ? childVNodes : [this.text || '']
+    });
+  }
+
+  _getTextStyle(textAlign, textDirection) {
+    const style = { ...this.style };
+
+    // Ensure style is object
+    if (typeof this.style === 'string') {
+      return {};
+    }
+
+    return style;
+  }
+}
+
+// ============================================================================
+// WIDGET SPAN
+// ============================================================================
+
+class WidgetSpan extends InlineSpan {
+  constructor({
+    child = null,
+    alignment = 'baseline',
+    baseline = TextBaseline.alphabetic,
+    style = null
+  } = {}) {
+    super();
+
+    this.child = child;
+    this.alignment = alignment;
+    this.baseline = baseline;
+    this.style = style;
+  }
+
+  toPlainText() {
+    return '\uFFFD'; // Replacement character
+  }
+
+  buildVNode() {
+    if (!this.child) {
+      return new VNode({ tag: 'span', children: ['\uFFFD'] });
+    }
+
+    const childElement = this.child.createElement?.();
+    if (childElement) {
+      return childElement.performRebuild?.();
+    }
+
+    return new VNode({
+      tag: 'span',
+      props: {
+        style: {
+          display: 'inline-flex',
+          alignItems: this.alignment,
+          verticalAlign: this.baseline
+        }
+      },
+      children: [this.child]
+    });
+  }
+
+  /**
+   * Extract widgets from inline span tree
+   * @static
+   */
+  static extractFromInlineSpan(span, textScaler) {
+    const widgets = [];
+
+    function traverse(inlineSpan) {
+      if (inlineSpan instanceof WidgetSpan) {
+        widgets.push(inlineSpan.child);
+      }
+
+      if (inlineSpan.children) {
+        for (const child of inlineSpan.children) {
+          traverse(child);
+        }
+      }
+    }
+
+    traverse(span);
+    return widgets;
+  }
+}
+
+// ============================================================================
+// TEXT STYLE
+// ============================================================================
+
+// ============================================================================
+// STRUT STYLE
+// ============================================================================
+
+class StrutStyle {
+  constructor({
+    fontFamily = null,
+    fontFamilyFallback = [],
+    fontSize = null,
+    height = null,
+    leading = null,
+    fontWeight = null,
+    fontStyle = null,
+    forceStrutHeight = false
+  } = {}) {
+    this.fontFamily = fontFamily;
+    this.fontFamilyFallback = fontFamilyFallback;
+    this.fontSize = fontSize;
+    this.height = height;
+    this.leading = leading;
+    this.fontWeight = fontWeight;
+    this.fontStyle = fontStyle;
+    this.forceStrutHeight = forceStrutHeight;
+  }
+
+  toCSSStyle() {
+    const style = {};
+
+    if (this.fontFamily) style.fontFamily = this.fontFamily;
+    if (this.fontSize) style.fontSize = `${this.fontSize}px`;
+    if (this.height) style.lineHeight = this.height;
+    if (this.fontWeight) style.fontWeight = this.fontWeight;
+    if (this.fontStyle) style.fontStyle = this.fontStyle;
+
+    return style;
+  }
+}
+
+// ============================================================================
+// RENDER PARAGRAPH
+// ============================================================================
+
+class RenderParagraph {
+  constructor({
+    text = null,
+    textAlign = TextAlign.start,
+    textDirection = TextDirection.ltr,
+    softWrap = true,
+    overflow = TextOverflow.clip,
+    textScaler = null,
+    maxLines = null,
+    locale = null,
+    strutStyle = null,
+    textWidthBasis = TextWidthBasis.parent,
+    textHeightBehavior = null,
+    selectionColor = null,
+    registrar = null
+  } = {}) {
+    this.text = text;
+    this.textAlign = textAlign;
+    this.textDirection = textDirection;
+    this.softWrap = softWrap;
+    this.overflow = overflow;
+    this.textScaler = textScaler || TextScaler.noScaling;
+    this.maxLines = maxLines;
+    this.locale = locale;
+    this.strutStyle = strutStyle;
+    this.textWidthBasis = textWidthBasis;
+    this.textHeightBehavior = textHeightBehavior;
+    this.selectionColor = selectionColor;
+    this.registrar = registrar;
+  }
+
+  debugInfo() {
+    return {
+      type: 'RenderParagraph',
+      textAlign: this.textAlign,
+      textDirection: this.textDirection,
+      softWrap: this.softWrap,
+      overflow: this.overflow,
+      maxLines: this.maxLines,
+      textScaleFactor: this.textScaler.textScaleFactor
+    };
+  }
+}
+
+// ============================================================================
+// RICH TEXT WIDGET
+// ============================================================================
+
+class RichText extends Widget {
+  constructor({
+    key = null,
+    text = null,
+    textAlign = TextAlign.start,
+    textDirection = null,
+    softWrap = true,
+    overflow = TextOverflow.clip,
+    textScaleFactor = 1.0,
+    textScaler = null,
+    maxLines = null,
+    locale = null,
+    strutStyle = null,
+    textWidthBasis = TextWidthBasis.parent,
+    textHeightBehavior = null,
+    selectionRegistrar = null,
+    selectionColor = null
+  } = {}) {
+    super(key);
+
+    if (!text) {
+      throw new Error('RichText requires a text (InlineSpan)');
+    }
+
+    if (maxLines !== null && maxLines <= 0) {
+      throw new Error('maxLines must be null or > 0');
+    }
+
+    if (selectionRegistrar && !selectionColor) {
+      throw new Error('selectionColor is required when selectionRegistrar is provided');
+    }
+
+    // Resolve text scaler
+    let effectiveTextScaler = textScaler || TextScaler.noScaling;
+    if (textScaleFactor !== 1.0 && textScaler === null) {
+      effectiveTextScaler = TextScaler.linear(textScaleFactor);
+    }
+
+    this.text = text;
+    this.textAlign = textAlign;
+    this.textDirection = textDirection;
+    this.softWrap = softWrap;
+    this.overflow = overflow;
+    this.textScaler = effectiveTextScaler;
+    this.maxLines = maxLines;
+    this.locale = locale;
+    this.strutStyle = strutStyle;
+    this.textWidthBasis = textWidthBasis;
+    this.textHeightBehavior = textHeightBehavior;
+    this.selectionRegistrar = selectionRegistrar;
+    this.selectionColor = selectionColor;
+    this._renderObject = null;
+  }
+
+  /**
+   * Create render object
+   */
+  createRenderObject(context) {
+    return new RenderParagraph({
+      text: this.text,
+      textAlign: this.textAlign,
+      textDirection: this.textDirection || context?.textDirection || TextDirection.ltr,
+      softWrap: this.softWrap,
+      overflow: this.overflow,
+      textScaler: this.textScaler,
+      maxLines: this.maxLines,
+      locale: this.locale,
+      strutStyle: this.strutStyle,
+      textWidthBasis: this.textWidthBasis,
+      textHeightBehavior: this.textHeightBehavior,
+      selectionColor: this.selectionColor,
+      registrar: this.selectionRegistrar
+    });
+  }
+
+  /**
+   * Update render object
+   */
+  updateRenderObject(context, renderObject) {
+    renderObject.text = this.text;
+    renderObject.textAlign = this.textAlign;
+    renderObject.textDirection = this.textDirection || context?.textDirection || TextDirection.ltr;
+    renderObject.softWrap = this.softWrap;
+    renderObject.overflow = this.overflow;
+    renderObject.textScaler = this.textScaler;
+    renderObject.maxLines = this.maxLines;
+    renderObject.locale = this.locale;
+    renderObject.strutStyle = this.strutStyle;
+    renderObject.textWidthBasis = this.textWidthBasis;
+    renderObject.textHeightBehavior = this.textHeightBehavior;
+    renderObject.selectionColor = this.selectionColor;
+    renderObject.registrar = this.selectionRegistrar;
+  }
+
+  /**
+   * Build widget tree
+   */
+  build(context) {
+    if (!this._renderObject) {
+      this._renderObject = this.createRenderObject(context);
+    } else {
+      this.updateRenderObject(context, this._renderObject);
+    }
+
+    const elementId = context.element.getElementId();
+    const widgetPath = context.element.getWidgetPath();
+    const effectiveTextDirection = this.textDirection || context?.textDirection || TextDirection.ltr;
+
+    // Build text VNode
+    const textVNode = this.text.buildVNode(this.textAlign, effectiveTextDirection);
+
+    // Map text align to CSS
+    const textAlignValue = this._mapTextAlign(this.textAlign, effectiveTextDirection);
+
+    // Determine overflow behavior
+    let overflowStyle = {};
+    switch (this.overflow) {
+      case TextOverflow.ellipsis:
+        overflowStyle = {
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap'
+        };
+        break;
+      case TextOverflow.fade:
+        overflowStyle = {
+          overflow: 'hidden',
+          mask: 'linear-gradient(to right, black 95%, transparent)'
+        };
+        break;
+      case TextOverflow.clip:
+        overflowStyle = {
+          overflow: 'hidden'
+        };
+        break;
+      case TextOverflow.visible:
+        overflowStyle = {
+          overflow: 'visible'
+        };
+        break;
+    }
+
+    const style = {
+      textAlign: textAlignValue,
+      direction: effectiveTextDirection === TextDirection.rtl ? 'rtl' : 'ltr',
+      whiteSpace: this.softWrap ? 'normal' : 'nowrap',
+      wordWrap: this.softWrap ? 'break-word' : 'normal',
+      display: 'block',
+      ...overflowStyle
+    };
+
+    // Apply max lines
+    if (this.maxLines !== null) {
+      style.display = '-webkit-box';
+      style.WebkitLineClamp = this.maxLines;
+      style.WebkitBoxOrient = 'vertical';
+      style.overflow = 'hidden';
+    }
+
+    // Apply strut style
+    if (this.strutStyle) {
+      Object.assign(style, this.strutStyle.toCSSStyle());
+    }
+
+    // Apply selection color
+    if (this.selectionColor) {
+      style.userSelect = 'text';
+    }
+
+    return new VNode({
+      tag: 'div',
+      props: {
+        style,
+        'data-element-id': elementId,
+        'data-widget-path': widgetPath,
+        'data-widget': 'RichText',
+        'data-text-align': this.textAlign,
+        'data-text-direction': effectiveTextDirection,
+        'data-overflow': this.overflow,
+        'data-max-lines': this.maxLines,
+        'data-soft-wrap': this.softWrap
+      },
+      children: [textVNode],
+      key: this.key
+    });
+  }
+
+  /**
+   * Map text align to CSS
+   * @private
+   */
+  _mapTextAlign(textAlign, textDirection) {
+    const isRTL = textDirection === TextDirection.rtl;
+
+    // Handle shorthand string: ".center" -> "center"
+    if (typeof textAlign === 'string' && textAlign.startsWith('.')) {
+      textAlign = textAlign.substring(1);
+    }
+
+    switch (textAlign) {
+      case TextAlign.start:
+        return isRTL ? 'right' : 'left';
+      case TextAlign.end:
+        return isRTL ? 'left' : 'right';
+      case TextAlign.left:
+        return 'left';
+      case TextAlign.right:
+        return 'right';
+      case TextAlign.center:
+        return 'center';
+      case TextAlign.justify:
+        return 'justify';
+      default:
+        return 'start';
+    }
+  }
+
+  debugFillProperties(properties) {
+    super.debugFillProperties(properties);
+    properties.push({ name: 'textAlign', value: this.textAlign });
+    properties.push({ name: 'textDirection', value: this.textDirection });
+    properties.push({ name: 'softWrap', value: this.softWrap });
+    properties.push({ name: 'overflow', value: this.overflow });
+    properties.push({ name: 'textScaleFactor', value: this.textScaler.textScaleFactor });
+    properties.push({ name: 'maxLines', value: this.maxLines });
+    properties.push({ name: 'text', value: this.text.toPlainText?.() || 'N/A' });
+  }
+
+  createElement(parent, runtime) {
+    return new RichTextElement(this, parent, runtime);
+  }
+}
+
+class RichTextElement extends Element {
+  performRebuild() {
+    return this.widget.build(this.context);
+  }
+}
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+export {
+  RichText,
+  RichTextElement,
+  RenderParagraph,
+  TextSpan,
+  WidgetSpan,
+  InlineSpan,
+  StrutStyle,
+  TextScaler,
+  TextAlign,
+  TextOverflow,
+  TextWidthBasis,
+  TextBaseline
+};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/shader_mask.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/shader_mask.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/compoment/shader_mask.js
rename to packages/flutterjs_material/flutterjs_material/src/widgets/compoment/shader_mask.js
diff --git a/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/sized_box.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/sized_box.js
new file mode 100644
index 00000000..b381e7a2
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/sized_box.js
@@ -0,0 +1,647 @@
+import { ProxyWidget, ProxyElement } from '../../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { Alignment } from '../../utils/utils.js';
+
+import { Size } from '../../utils/geometry.js';
+import { BoxConstraints } from '../../utils/box_constraints.js';
+
+// ============================================================================
+// OVERFLOW BOX FIT ENUM
+// ============================================================================
+
+const OverflowBoxFit = {
+    max: 'max',
+    min: 'min'
+};
+
+// ============================================================================
+// IMPROVED SIZED BOX WIDGET
+// ============================================================================
+
+class SizedBox extends ProxyWidget {
+    constructor({
+        key = null,
+        width = null,
+        height = null,
+        child = null
+    } = {}) {
+        super({ key, child });
+
+        this.width = width;
+        this.height = height;
+        this._renderObject = null;
+    }
+
+    /**
+     * Create a box that expands to fill available space
+     */
+    static expand({ key = null, child = null } = {}) {
+        return new SizedBox({
+            key,
+            width: Infinity,
+            height: Infinity,
+            child
+        });
+    }
+
+    /**
+     * Create a box with zero width and height
+     */
+    static shrink({ key = null, child = null } = {}) {
+        return new SizedBox({
+            key,
+            width: 0,
+            height: 0,
+            child
+        });
+    }
+
+    /**
+     * Create a square box
+     */
+    static square({ key = null, dimension = 0, child = null } = {}) {
+        return new SizedBox({
+            key,
+            width: dimension,
+            height: dimension,
+            child
+        });
+    }
+
+    /**
+     * Create from Size object
+     */
+    static fromSize({ key = null, size = null, child = null } = {}) {
+        return new SizedBox({
+            key,
+            width: size?.width,
+            height: size?.height,
+            child
+        });
+    }
+
+    /**
+     * Create render object
+     */
+    createRenderObject(context) {
+        return {
+            constraints: this._getConstraints()
+        };
+    }
+
+    /**
+     * Update render object
+     */
+    updateRenderObject(context, renderObject) {
+        renderObject.constraints = this._getConstraints();
+    }
+
+    /**
+     * Get constraints from width/height
+     * @private
+     */
+    _getConstraints() {
+        return BoxConstraints.tightFor({
+            width: this.width === Infinity ? null : this.width,
+            height: this.height === Infinity ? null : this.height
+        });
+    }
+
+
+
+    /**
+     * Debug properties
+     */
+    debugFillProperties(properties) {
+        super.debugFillProperties(properties);
+        properties.push({ name: 'width', value: this.width });
+        properties.push({ name: 'height', value: this.height });
+    }
+
+    /**
+     * Create element
+     */
+    createElement(parent, runtime) {
+        return new SizedBoxElement(this, parent, runtime);
+    }
+}
+
+class SizedBoxElement extends ProxyElement {
+    performRebuild() {
+        const elementId = this.getElementId();
+        const widgetPath = this.getWidgetPath();
+
+        const style = {
+            boxSizing: 'border-box',
+            flexShrink: 0
+        };
+
+        // Apply width
+        if (this.widget.width !== null && this.widget.width !== undefined) {
+            if (this.widget.width === Infinity) {
+                style.width = '100%';
+                style.flex = '1 1 auto';
+            } else {
+                style.width = `${this.widget.width}px`;
+            }
+        }
+
+        // Apply height
+        if (this.widget.height !== null && this.widget.height !== undefined) {
+            if (this.widget.height === Infinity) {
+                style.height = '100%';
+                style.flex = '1 1 auto';
+            } else {
+                style.height = `${this.widget.height}px`;
+            }
+        }
+
+        // Get child VNode from parent class (this handles the widget lifecycle)
+        const childVNode = super.performRebuild();
+
+        // Wrap child VNode (or create empty div if no child)
+        return new VNode({
+            tag: 'div',
+            props: {
+                style,
+                'data-element-id': elementId,
+                'data-widget-path': widgetPath,
+                'data-widget': 'SizedBox',
+                'data-width': this.widget.width,
+                'data-height': this.widget.height
+            },
+            children: childVNode ? [childVNode] : [],
+            key: this.widget.key
+        });
+    }
+}
+
+// ============================================================================
+// CONSTRAINED BOX WIDGET
+// ============================================================================
+
+class ConstrainedBox extends ProxyWidget {
+    constructor({
+        key = null,
+        constraints = null,
+        child = null
+    } = {}) {
+        super({ key, child });
+
+        if (!constraints) {
+            throw new Error('ConstrainedBox requires constraints');
+        }
+
+        if (!(constraints instanceof BoxConstraints)) {
+            throw new Error(
+                `ConstrainedBox requires a BoxConstraints instance, got: ${typeof constraints}`
+            );
+        }
+
+        this.constraints = constraints;
+        this._renderObject = null;
+    }
+
+    createRenderObject(context) {
+        return { additionalConstraints: this.constraints };
+    }
+
+    updateRenderObject(context, renderObject) {
+        renderObject.additionalConstraints = this.constraints;
+    }
+
+    debugFillProperties(properties) {
+        super.debugFillProperties(properties);
+        properties.push({ name: 'constraints', value: this.constraints.toString() });
+    }
+
+    createElement(parent, runtime) {
+        return new ConstrainedBoxElement(this, parent, runtime);
+    }
+}
+
+class ConstrainedBoxElement extends ProxyElement {
+    performRebuild() {
+        const constraints = this.widget.constraints;
+        const style = {
+            boxSizing: 'border-box',
+            display: 'flex', // Ensure it acts as a container
+            flexDirection: 'column', // Default to column-like validation
+            flexShrink: 0
+        };
+
+        // Apply constraints to CSS
+        if (constraints.minWidth > 0 && constraints.minWidth !== Infinity) {
+            style.minWidth = `${constraints.minWidth}px`;
+        }
+
+        if (constraints.maxWidth !== Infinity) {
+            style.maxWidth = `${constraints.maxWidth}px`;
+            // If tight constraint (min==max), set width
+            if (constraints.minWidth === constraints.maxWidth) {
+                style.width = `${constraints.maxWidth}px`;
+            }
+        } else if (constraints.minWidth === 0 && constraints.maxWidth === Infinity) {
+            // Loose constraints - do nothing or width: auto
+        } else if (constraints.minWidth === Infinity) {
+            // Only possible if minWidth was Infinity (expand/tight)
+            style.minWidth = '100%';
+            style.width = '100%';
+        }
+
+        // Handle expand() case specifically often used
+        if (constraints.minWidth === 0 && constraints.maxWidth === Infinity) {
+            // Loose
+        } else if (constraints.minWidth === constraints.maxWidth && constraints.minWidth === Infinity) {
+            // Expand
+            style.width = '100%';
+        }
+
+        if (constraints.minHeight > 0 && constraints.minHeight !== Infinity) {
+            style.minHeight = `${constraints.minHeight}px`;
+        }
+
+        if (constraints.maxHeight !== Infinity) {
+            style.maxHeight = `${constraints.maxHeight}px`;
+            if (constraints.minHeight === constraints.maxHeight) {
+                style.height = `${constraints.maxHeight}px`;
+            }
+        } else if (constraints.minHeight === constraints.maxHeight && constraints.minHeight === Infinity) {
+            // Expand height
+            style.height = '100%';
+        }
+
+        // Get child VNode
+        const childVNode = super.performRebuild();
+
+        return new VNode({
+            tag: 'div',
+            props: {
+                style,
+                'data-widget': 'ConstrainedBox',
+                'data-constraints': constraints.toString()
+            },
+            children: childVNode ? [childVNode] : [],
+            key: this.widget.key
+        });
+    }
+}
+
+// ============================================================================
+// LIMITED BOX WIDGET
+// Limits size only when constrained by parent
+// ============================================================================
+
+class LimitedBox extends ProxyWidget {
+    constructor({
+        key = null,
+        maxWidth = Infinity,
+        maxHeight = Infinity,
+        child = null
+    } = {}) {
+        super({ key, child });
+
+        if (maxWidth < 0 || maxHeight < 0) {
+            throw new Error('maxWidth and maxHeight must be >= 0');
+        }
+
+        this.maxWidth = maxWidth;
+        this.maxHeight = maxHeight;
+        this._renderObject = null;
+    }
+
+    /**
+     * Create render object
+     */
+    createRenderObject(context) {
+        return { maxWidth: this.maxWidth, maxHeight: this.maxHeight };
+    }
+
+    /**
+     * Update render object
+     */
+    updateRenderObject(context, renderObject) {
+        renderObject.maxWidth = this.maxWidth;
+        renderObject.maxHeight = this.maxHeight;
+    }/**
+     * Debug properties
+     */
+    debugFillProperties(properties) {
+        super.debugFillProperties(properties);
+        properties.push({ name: 'maxWidth', value: this.maxWidth });
+        properties.push({ name: 'maxHeight', value: this.maxHeight });
+    }
+
+    /**
+     * Create element
+     */
+    createElement(parent, runtime) {
+        return new ProxyElement(this, parent, runtime);
+    }
+}
+
+// ============================================================================
+// OVERFLOW BOX WIDGET
+// Allows child to overflow parent constraints
+// ============================================================================
+
+class OverflowBox extends ProxyWidget {
+    constructor({
+        key = null,
+        alignment = Alignment.center,
+        minWidth = null,
+        maxWidth = null,
+        minHeight = null,
+        maxHeight = null,
+        fit = OverflowBoxFit.max,
+        child = null
+    } = {}) {
+        super({ key, child });
+
+        this.alignment = alignment;
+        this.minWidth = minWidth;
+        this.maxWidth = maxWidth;
+        this.minHeight = minHeight;
+        this.maxHeight = maxHeight;
+        this.fit = fit;
+        this._renderObject = null;
+    }
+
+    /**
+     * Create render object
+     */
+    createRenderObject(context) {
+        return {
+            alignment: this.alignment,
+            minWidth: this.minWidth,
+            maxWidth: this.maxWidth,
+            minHeight: this.minHeight,
+            maxHeight: this.maxHeight,
+            fit: this.fit
+        };
+    }
+
+    /**
+     * Update render object
+     */
+    updateRenderObject(context, renderObject) {
+        renderObject.alignment = this.alignment;
+        renderObject.minWidth = this.minWidth;
+        renderObject.maxWidth = this.maxWidth;
+        renderObject.minHeight = this.minHeight;
+        renderObject.maxHeight = this.maxHeight;
+        renderObject.fit = this.fit;
+    }/**
+     * Get alignment value for flex
+     * @private
+     */
+    _getAlignmentValue(direction) {
+        if (direction === 'horizontal') {
+            if (this.alignment.x < 0) return 'flex-start';
+            if (this.alignment.x > 0) return 'flex-end';
+            return 'center';
+        } else if (direction === 'vertical') {
+            if (this.alignment.y < 0) return 'flex-start';
+            if (this.alignment.y > 0) return 'flex-end';
+            return 'center';
+        }
+        return 'center';
+    }
+
+    /**
+     * Debug properties
+     */
+    debugFillProperties(properties) {
+        super.debugFillProperties(properties);
+        properties.push({ name: 'alignment', value: this.alignment.toString() });
+        properties.push({ name: 'fit', value: this.fit });
+        if (this.minWidth !== null) properties.push({ name: 'minWidth', value: this.minWidth });
+        if (this.maxWidth !== null) properties.push({ name: 'maxWidth', value: this.maxWidth });
+        if (this.minHeight !== null) properties.push({ name: 'minHeight', value: this.minHeight });
+        if (this.maxHeight !== null) properties.push({ name: 'maxHeight', value: this.maxHeight });
+    }
+
+    /**
+     * Create element
+     */
+    createElement(parent, runtime) {
+        return new ProxyElement(this, parent, runtime);
+    }
+}
+
+// ============================================================================
+// SIZED OVERFLOW BOX WIDGET
+// Fixed size with ability to overflow
+// ============================================================================
+
+class SizedOverflowBox extends ProxyWidget {
+    constructor({
+        key = null,
+        size = null,
+        alignment = Alignment.center,
+        child = null
+    } = {}) {
+        super({ key, child });
+
+        if (!size) {
+            throw new Error('SizedOverflowBox requires a size');
+        }
+
+        this.size = size;
+        this.alignment = alignment;
+        this._renderObject = null;
+    }
+
+    /**
+     * Create render object
+     */
+    createRenderObject(context) {
+        return {
+            requestedSize: this.size,
+            alignment: this.alignment
+        };
+    }
+
+    /**
+     * Update render object
+     */
+    updateRenderObject(context, renderObject) {
+        renderObject.requestedSize = this.size;
+        renderObject.alignment = this.alignment;
+    }/**
+     * Get alignment value for flex
+     * @private
+     */
+    _getAlignmentValue(direction) {
+        if (direction === 'horizontal') {
+            if (this.alignment.x < 0) return 'flex-start';
+            if (this.alignment.x > 0) return 'flex-end';
+            return 'center';
+        } else if (direction === 'vertical') {
+            if (this.alignment.y < 0) return 'flex-start';
+            if (this.alignment.y > 0) return 'flex-end';
+            return 'center';
+        }
+        return 'center';
+    }
+
+    /**
+     * Debug properties
+     */
+    debugFillProperties(properties) {
+        super.debugFillProperties(properties);
+        properties.push({ name: 'size', value: this.size.toString() });
+        properties.push({ name: 'alignment', value: this.alignment.toString() });
+    }
+
+    /**
+     * Create element
+     */
+    createElement(parent, runtime) {
+        return new ProxyElement(this, parent, runtime);
+    }
+}
+
+// ============================================================================
+// OFFSTAGE WIDGET
+// Hides child from view but keeps it in the tree
+// ============================================================================
+
+class Offstage extends ProxyWidget {
+    constructor({
+        key = null,
+        offstage = true,
+        child = null
+    } = {}) {
+        super({ key, child });
+
+        this.offstage = offstage;
+        this._renderObject = null;
+    }
+
+    /**
+     * Create render object
+     */
+    createRenderObject(context) {
+        return { offstage: this.offstage };
+    }
+
+    /**
+     * Update render object
+     */
+    updateRenderObject(context, renderObject) {
+        renderObject.offstage = this.offstage;
+    }/**
+     * Debug properties
+     */
+    debugFillProperties(properties) {
+        super.debugFillProperties(properties);
+        properties.push({ name: 'offstage', value: this.offstage });
+    }
+
+    /**
+     * Create element
+     */
+    createElement(parent, runtime) {
+        return new ProxyElement(this, parent, runtime);
+    }
+}
+
+// ============================================================================
+// FRACTIONALLY SIZED BOX WIDGET
+// Sizes child as a fraction of available space
+// ============================================================================
+
+class FractionallySizedBox extends ProxyWidget {
+    constructor({
+        key = null,
+        alignment = Alignment.center,
+        widthFactor = null,
+        heightFactor = null,
+        child = null
+    } = {}) {
+        super({ key, child });
+
+        if (widthFactor !== null && widthFactor < 0) {
+            throw new Error('widthFactor must be >= 0');
+        }
+
+        if (heightFactor !== null && heightFactor < 0) {
+            throw new Error('heightFactor must be >= 0');
+        }
+
+        this.alignment = alignment;
+        this.widthFactor = widthFactor;
+        this.heightFactor = heightFactor;
+        this._renderObject = null;
+    }
+
+    /**
+     * Create render object
+     */
+    createRenderObject(context) {
+        return {
+            alignment: this.alignment,
+            widthFactor: this.widthFactor,
+            heightFactor: this.heightFactor
+        };
+    }
+
+    /**
+     * Update render object
+     */
+    updateRenderObject(context, renderObject) {
+        renderObject.alignment = this.alignment;
+        renderObject.widthFactor = this.widthFactor;
+        renderObject.heightFactor = this.heightFactor;
+    }/**
+     * Get alignment value for flex
+     * @private
+     */
+    _getAlignmentValue(direction) {
+        if (direction === 'horizontal') {
+            if (this.alignment.x < 0) return 'flex-start';
+            if (this.alignment.x > 0) return 'flex-end';
+            return 'center';
+        } else if (direction === 'vertical') {
+            if (this.alignment.y < 0) return 'flex-start';
+            if (this.alignment.y > 0) return 'flex-end';
+            return 'center';
+        }
+        return 'center';
+    }
+
+    /**
+     * Debug properties
+     */
+    debugFillProperties(properties) {
+        super.debugFillProperties(properties);
+        properties.push({ name: 'alignment', value: this.alignment.toString() });
+        if (this.widthFactor !== null) {
+            properties.push({ name: 'widthFactor', value: this.widthFactor });
+        }
+        if (this.heightFactor !== null) {
+            properties.push({ name: 'heightFactor', value: this.heightFactor });
+        }
+    }
+
+    /**
+     * Create element
+     */
+    createElement(parent, runtime) {
+        return new ProxyElement(this, parent, runtime);
+    }
+}
+
+export {
+    SizedBox,
+    ConstrainedBox,
+    LimitedBox,
+    OverflowBox,
+    SizedOverflowBox,
+    Offstage,
+    FractionallySizedBox,
+    Size,
+    BoxConstraints,
+    OverflowBoxFit
+};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/sliver_box_adapter.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/sliver_box_adapter.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/compoment/sliver_box_adapter.js
rename to packages/flutterjs_material/flutterjs_material/src/widgets/compoment/sliver_box_adapter.js
diff --git a/packages/flutterjs_engine/package/material/src/widgets/compoment/stack.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/stack.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/compoment/stack.js
rename to packages/flutterjs_material/flutterjs_material/src/widgets/compoment/stack.js
diff --git a/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/transform.js b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/transform.js
new file mode 100644
index 00000000..086b470d
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/transform.js
@@ -0,0 +1,809 @@
+import { ProxyWidget } from '../../core/widget_element.js';
+import { VNode } from '@flutterjs/vdom/vnode';
+import { Offset, Alignment } from '../../utils/utils.js';
+
+
+// ============================================================================
+// ALIGNMENT CLASS
+// Represents alignment in 2D space
+// ============================================================================
+
+
+
+// ============================================================================
+// MATRIX4 CLASS (Simplified for 2D transforms)
+// Represents a 4x4 transformation matrix
+// ============================================================================
+
+class Matrix4 {
+    constructor(values = null) {
+        // 4x4 matrix stored as 16-element array
+        if (values) {
+            this.storage = values;
+        } else {
+            this.storage = new Array(16).fill(0);
+            // Identity matrix
+            this.storage[0] = 1;
+            this.storage[5] = 1;
+            this.storage[10] = 1;
+            this.storage[15] = 1;
+        }
+    }
+
+    static identity() {
+        return new Matrix4();
+    }
+
+    static translationValues(x, y, z = 0) {
+        const m = new Matrix4();
+        m.storage[12] = x;
+        m.storage[13] = y;
+        m.storage[14] = z;
+        return m;
+    }
+
+    static diagonal3Values(x, y, z) {
+        const m = new Matrix4();
+        m.storage[0] = x;
+        m.storage[5] = y;
+        m.storage[10] = z;
+        return m;
+    }
+
+    static rotationZ(radians) {
+        const sin = Math.sin(radians);
+        const cos = Math.cos(radians);
+        const m = new Matrix4();
+        m.storage[0] = cos;
+        m.storage[1] = sin;
+        m.storage[4] = -sin;
+        m.storage[5] = cos;
+        return m;
+    }
+
+    toCSSMatrix() {
+        // Convert to CSS matrix() or matrix3d() format
+        // For 2D transforms, we use matrix(a, b, c, d, e, f)
+        const s = this.storage;
+        return `matrix3d(${s[0]}, ${s[1]}, ${s[2]}, ${s[3]}, ${s[4]}, ${s[5]}, ${s[6]}, ${s[7]}, ${s[8]}, ${s[9]}, ${s[10]}, ${s[11]}, ${s[12]}, ${s[13]}, ${s[14]}, ${s[15]})`;
+    }
+
+    toString() {
+        return `Matrix4(${this.storage.join(', ')})`;
+    }
+}
+
+// ============================================================================
+// FILTER QUALITY ENUM
+// ============================================================================
+
+const FilterQuality = {
+    low: 'low',
+    medium: 'medium',
+    high: 'high'
+};
+
+// ============================================================================
+// TRANSFORM WIDGET
+// Applies 2D/3D transformation to child widget
+// ============================================================================
+
+class Transform extends ProxyWidget {
+    constructor({
+        key = null,
+        transform = null,
+        origin = null,
+        alignment = null,
+        transformHitTests = true,
+        filterQuality = FilterQuality.low,
+        child = null
+    } = {}) {
+        super({ key, child });
+
+        if (!transform) {
+            throw new Error('Transform requires a transform (Matrix4)');
+        }
+
+        this.transform = transform;
+        this.origin = origin;
+        this.alignment = alignment;
+        this.transformHitTests = transformHitTests;
+        this.filterQuality = filterQuality;
+        this._renderObject = null;
+    }
+
+    /**
+     * Static constructor for rotation
+     */
+    static rotate({
+        key = null,
+        angle = 0,
+        origin = null,
+        alignment = Alignment.center,
+        transformHitTests = true,
+        filterQuality = FilterQuality.low,
+        child = null
+    } = {}) {
+        return new Transform({
+            key,
+            transform: Matrix4.rotationZ(angle),
+            origin,
+            alignment,
+            transformHitTests,
+            filterQuality,
+            child
+        });
+    }
+
+    /**
+     * Static constructor for translation
+     */
+    static translate({
+        key = null,
+        offset = null,
+        transformHitTests = true,
+        filterQuality = FilterQuality.low,
+        child = null
+    } = {}) {
+        if (!offset) {
+            throw new Error('Transform.translate requires an offset');
+        }
+
+        return new Transform({
+            key,
+            transform: Matrix4.translationValues(offset.dx, offset.dy, 0),
+            origin: null,
+            alignment: null,
+            transformHitTests,
+            filterQuality,
+            child
+        });
+    }
+
+    /**
+     * Static constructor for scale
+     */
+    static scale({
+        key = null,
+        scale = null,
+        scaleX = null,
+        scaleY = null,
+        origin = null,
+        alignment = Alignment.center,
+        transformHitTests = true,
+        filterQuality = FilterQuality.low,
+        child = null
+    } = {}) {
+        if (scale === null && scaleX === null && scaleY === null) {
+            throw new Error("At least one of 'scale', 'scaleX' and 'scaleY' is required to be non-null");
+        }
+
+        if (scale !== null && (scaleX !== null || scaleY !== null)) {
+            throw new Error("If 'scale' is non-null then 'scaleX' and 'scaleY' must be left null");
+        }
+
+        const sx = scale ?? scaleX ?? 1.0;
+        const sy = scale ?? scaleY ?? 1.0;
+
+        return new Transform({
+            key,
+            transform: Matrix4.diagonal3Values(sx, sy, 1.0),
+            origin,
+            alignment,
+            transformHitTests,
+            filterQuality,
+            child
+        });
+    }
+
+    /**
+     * Static constructor for flip
+     */
+    static flip({
+        key = null,
+        flipX = false,
+        flipY = false,
+        origin = null,
+        transformHitTests = true,
+        filterQuality = FilterQuality.low,
+        child = null
+    } = {}) {
+        return new Transform({
+            key,
+            transform: Matrix4.diagonal3Values(
+                flipX ? -1.0 : 1.0,
+                flipY ? -1.0 : 1.0,
+                1.0
+            ),
+            origin,
+            alignment: Alignment.center,
+            transformHitTests,
+            filterQuality,
+            child
+        });
+    }
+
+    /**
+     * Create render object
+     */
+    createRenderObject(context) {
+        return new RenderTransform({
+            transform: this.transform,
+            origin: this.origin,
+            alignment: this.alignment,
+            transformHitTests: this.transformHitTests,
+            filterQuality: this.filterQuality
+        });
+    }
+
+    /**
+     * Update render object
+     */
+    updateRenderObject(context, renderObject) {
+        renderObject.transform = this.transform;
+        renderObject.origin = this.origin;
+        renderObject.alignment = this.alignment;
+        renderObject.transformHitTests = this.transformHitTests;
+        renderObject.filterQuality = this.filterQuality;
+    }
+
+    /**
+     * Build the widget
+     */
+    build(context) {
+        if (!this._renderObject) {
+            this._renderObject = this.createRenderObject(context);
+        } else {
+            this.updateRenderObject(context, this._renderObject);
+        }
+
+        // Build child with element caching
+        let childVNode = null;
+        if (this.child) {
+            if (!context._childElement) {
+                context._childElement = this.child.createElement(context, context.element.runtime);
+                context._childElement.mount(context);
+            } else {
+                if (context._childElement.update) {
+                    context._childElement.update(this.child);
+                } else {
+                    context._childElement = this.child.createElement(context, context.element.runtime);
+                    context._childElement.mount(context);
+                }
+            }
+            childVNode = context._childElement.performRebuild();
+        }
+
+        const elementId = context.element.getElementId();
+        const widgetPath = context.element.getWidgetPath();
+
+        // Generate CSS transform
+        const transformCss = this._generateTransformCSS();
+        const transformOrigin = this._generateTransformOrigin();
+        const filter = this._getFilterCSS();
+
+        const style = {
+            transform: transformCss,
+            transformOrigin: transformOrigin,
+            position: 'relative',
+            filter: filter
+        };
+
+        return new VNode({
+            tag: 'div',
+            props: {
+                style,
+                'data-element-id': elementId,
+                'data-widget-path': widgetPath,
+                'data-widget': 'Transform',
+                'data-filter-quality': this.filterQuality,
+                'data-transform-hit-tests': this.transformHitTests
+            },
+            children: childVNode ? [childVNode] : [],
+            key: this.key
+        });
+    }
+
+    /**
+     * Generate CSS transform string
+     * @private
+     */
+    _generateTransformCSS() {
+        if (!this.transform) {
+            return 'none';
+        }
+
+        // For simplicity, convert common transforms to CSS
+        // For complex transforms, use matrix3d
+        return this.transform.toCSSMatrix();
+    }
+
+    /**
+     * Generate CSS transform-origin
+     * @private
+     */
+    _generateTransformOrigin() {
+        if (this.origin) {
+            return `${this.origin.dx}px ${this.origin.dy}px`;
+        }
+
+        if (this.alignment) {
+            // Convert alignment to percentage
+            const x = ((this.alignment.x + 1) / 2) * 100;
+            const y = ((this.alignment.y + 1) / 2) * 100;
+            return `${x}% ${y}%`;
+        }
+
+        return '50% 50%'; // Default center
+    }
+
+    /**
+     * Get filter CSS for quality
+     * @private
+     */
+    _getFilterCSS() {
+        switch (this.filterQuality) {
+            case FilterQuality.high:
+                return 'blur(0px)';
+            case FilterQuality.medium:
+                return 'blur(0.5px)';
+            case FilterQuality.low:
+            default:
+                return 'none';
+        }
+    }
+
+    /**
+     * Debug properties
+     */
+    debugFillProperties(properties) {
+        super.debugFillProperties(properties);
+        properties.push({ name: 'transform', value: this.transform.toString() });
+        if (this.origin) {
+            properties.push({ name: 'origin', value: this.origin.toString() });
+        }
+        if (this.alignment) {
+            properties.push({ name: 'alignment', value: this.alignment.toString() });
+        }
+        properties.push({ name: 'transformHitTests', value: this.transformHitTests });
+        properties.push({ name: 'filterQuality', value: this.filterQuality });
+    }
+
+    /**
+     * Create element
+     */
+    createElement(parent, runtime) {
+        return new TransformElement(this, parent, runtime);
+    }
+}
+
+// ============================================================================
+// RENDER TRANSFORM
+// ============================================================================
+
+class RenderTransform {
+    constructor({
+        transform = null,
+        origin = null,
+        alignment = null,
+        transformHitTests = true,
+        filterQuality = FilterQuality.low
+    } = {}) {
+        this.transform = transform;
+        this.origin = origin;
+        this.alignment = alignment;
+        this.transformHitTests = transformHitTests;
+        this.filterQuality = filterQuality;
+    }
+
+    /**
+     * Debug info
+     */
+    debugInfo() {
+        return {
+            type: 'RenderTransform',
+            transform: this.transform?.toString(),
+            origin: this.origin?.toString(),
+            alignment: this.alignment?.toString(),
+            transformHitTests: this.transformHitTests,
+            filterQuality: this.filterQuality
+        };
+    }
+}
+
+// ============================================================================
+// TRANSFORM ELEMENT
+// ============================================================================
+
+class TransformElement extends ProxyWidget.constructor.prototype.constructor {
+    performRebuild() {
+        return this.widget.build(this.context);
+    }
+}
+
+// ============================================================================
+// LAYER LINK
+// Used for linking transform targets and followers
+// ============================================================================
+
+class LayerLink {
+    constructor() {
+        this._target = null;
+        this._followers = new Set();
+    }
+
+    get target() {
+        return this._target;
+    }
+
+    set target(value) {
+        this._target = value;
+    }
+
+    addFollower(follower) {
+        this._followers.add(follower);
+    }
+
+    removeFollower(follower) {
+        this._followers.delete(follower);
+    }
+
+    getFollowers() {
+        return Array.from(this._followers);
+    }
+}
+
+// ============================================================================
+// COMPOSITED TRANSFORM TARGET WIDGET
+// Marks a widget as a transform target for followers
+// ============================================================================
+
+class CompositedTransformTarget extends ProxyWidget {
+    constructor({
+        key = null,
+        link = null,
+        child = null
+    } = {}) {
+        super({ key, child });
+
+        if (!link) {
+            throw new Error('CompositedTransformTarget requires a LayerLink');
+        }
+
+        this.link = link;
+        this._renderObject = null;
+        this._targetElement = null;
+    }
+
+    /**
+     * Create render object
+     */
+    createRenderObject(context) {
+        return new RenderLeaderLayer({
+            link: this.link
+        });
+    }
+
+    /**
+     * Update render object
+     */
+    updateRenderObject(context, renderObject) {
+        renderObject.link = this.link;
+    }
+
+    /**
+     * Build the widget
+     */
+    build(context) {
+        if (!this._renderObject) {
+            this._renderObject = this.createRenderObject(context);
+        } else {
+            this.updateRenderObject(context, this._renderObject);
+        }
+
+        // Build child with element caching
+        let childVNode = null;
+        if (this.child) {
+            if (!context._childElement) {
+                context._childElement = this.child.createElement(context, context.element.runtime);
+                context._childElement.mount(context);
+            } else {
+                if (context._childElement.update) {
+                    context._childElement.update(this.child);
+                } else {
+                    context._childElement = this.child.createElement(context, context.element.runtime);
+                    context._childElement.mount(context);
+                }
+            }
+            childVNode = context._childElement.performRebuild();
+        }
+
+        const elementId = context.element.getElementId();
+        const widgetPath = context.element.getWidgetPath();
+
+        return new VNode({
+            tag: 'div',
+            props: {
+                style: {
+                    position: 'relative'
+                },
+                'data-element-id': elementId,
+                'data-widget-path': widgetPath,
+                'data-widget': 'CompositedTransformTarget',
+                'data-layer-link': this.link.constructor.name,
+                ref: (el) => this._onMount(el)
+            },
+            children: childVNode ? [childVNode] : [],
+            key: this.key
+        });
+    }
+
+    /**
+     * Mount and register target
+     * @private
+     */
+    _onMount(el) {
+        if (!el || !this.link) return;
+
+        this._targetElement = el;
+        this.link.target = el;
+
+        // Update all followers
+        const followers = this.link.getFollowers();
+        followers.forEach(follower => {
+            if (follower._updatePosition) {
+                follower._updatePosition();
+            }
+        });
+    }
+
+    /**
+     * Debug properties
+     */
+    debugFillProperties(properties) {
+        super.debugFillProperties(properties);
+        properties.push({ name: 'link', value: 'LayerLink' });
+    }
+
+    /**
+     * Create element
+     */
+    createElement(parent, runtime) {
+        return new CompositedTransformTargetElement(this, parent, runtime);
+    }
+}
+
+class RenderLeaderLayer {
+    constructor({ link = null } = {}) {
+        this.link = link;
+    }
+
+    debugInfo() {
+        return {
+            type: 'RenderLeaderLayer',
+            hasLink: !!this.link
+        };
+    }
+}
+
+class CompositedTransformTargetElement extends ProxyWidget.constructor.prototype.constructor {
+    performRebuild() {
+        return this.widget.build(this.context);
+    }
+}
+
+// ============================================================================
+// COMPOSITED TRANSFORM FOLLOWER WIDGET
+// Follows a transform target's position
+// ============================================================================
+
+class CompositedTransformFollower extends ProxyWidget {
+    constructor({
+        key = null,
+        link = null,
+        showWhenUnlinked = true,
+        offset = null,
+        targetAnchor = Alignment.topLeft,
+        followerAnchor = Alignment.topLeft,
+        child = null
+    } = {}) {
+        super({ key, child });
+
+        if (!link) {
+            throw new Error('CompositedTransformFollower requires a LayerLink');
+        }
+
+        this.link = link;
+        this.showWhenUnlinked = showWhenUnlinked;
+        this.offset = offset || Offset.zero;
+        this.targetAnchor = targetAnchor;
+        this.followerAnchor = followerAnchor;
+        this._renderObject = null;
+        this._followerElement = null;
+    }
+
+    /**
+     * Create render object
+     */
+    createRenderObject(context) {
+        return new RenderFollowerLayer({
+            link: this.link,
+            showWhenUnlinked: this.showWhenUnlinked,
+            offset: this.offset,
+            leaderAnchor: this.targetAnchor,
+            followerAnchor: this.followerAnchor
+        });
+    }
+
+    /**
+     * Update render object
+     */
+    updateRenderObject(context, renderObject) {
+        renderObject.link = this.link;
+        renderObject.showWhenUnlinked = this.showWhenUnlinked;
+        renderObject.offset = this.offset;
+        renderObject.leaderAnchor = this.targetAnchor;
+        renderObject.followerAnchor = this.followerAnchor;
+    }
+
+    /**
+     * Build the widget
+     */
+    build(context) {
+        if (!this._renderObject) {
+            this._renderObject = this.createRenderObject(context);
+        } else {
+            this.updateRenderObject(context, this._renderObject);
+        }
+
+        // Build child with element caching
+        let childVNode = null;
+        if (this.child) {
+            if (!context._childElement) {
+                context._childElement = this.child.createElement(context, context.element.runtime);
+                context._childElement.mount(context);
+            } else {
+                if (context._childElement.update) {
+                    context._childElement.update(this.child);
+                } else {
+                    context._childElement = this.child.createElement(context, context.element.runtime);
+                    context._childElement.mount(context);
+                }
+            }
+            childVNode = context._childElement.performRebuild();
+        }
+
+        const elementId = context.element.getElementId();
+        const widgetPath = context.element.getWidgetPath();
+
+        const style = {
+            position: 'absolute',
+            visibility: this.showWhenUnlinked ? 'visible' : 'hidden'
+        };
+
+        return new VNode({
+            tag: 'div',
+            props: {
+                style,
+                'data-element-id': elementId,
+                'data-widget-path': widgetPath,
+                'data-widget': 'CompositedTransformFollower',
+                'data-layer-link': this.link.constructor.name,
+                ref: (el) => this._onMount(el)
+            },
+            children: childVNode ? [childVNode] : [],
+            key: this.key
+        });
+    }
+
+    /**
+     * Mount and register follower
+     * @private
+     */
+    _onMount(el) {
+        if (!el || !this.link) return;
+
+        this._followerElement = el;
+        this.link.addFollower(this);
+        this._updatePosition();
+    }
+
+    /**
+     * Update position based on target
+     * @private
+     */
+    _updatePosition() {
+        if (!this._followerElement || !this.link.target) {
+            return;
+        }
+
+        try {
+            const targetRect = this.link.target.getBoundingClientRect();
+            const followerRect = this._followerElement.getBoundingClientRect();
+
+            // Calculate anchor offsets
+            const targetAnchorX = ((this.targetAnchor.x + 1) / 2) * targetRect.width;
+            const targetAnchorY = ((this.targetAnchor.y + 1) / 2) * targetRect.height;
+
+            const followerAnchorX = ((this.followerAnchor.x + 1) / 2) * followerRect.width;
+            const followerAnchorY = ((this.followerAnchor.y + 1) / 2) * followerRect.height;
+
+            // Calculate final position
+            let x = targetRect.left + targetAnchorX - followerAnchorX + this.offset.dx;
+            let y = targetRect.top + targetAnchorY - followerAnchorY + this.offset.dy;
+
+            this._followerElement.style.left = `${x}px`;
+            this._followerElement.style.top = `${y}px`;
+        } catch (error) {
+            console.error('Error updating follower position:', error);
+        }
+    }
+
+    /**
+     * Debug properties
+     */
+    debugFillProperties(properties) {
+        super.debugFillProperties(properties);
+        properties.push({ name: 'link', value: 'LayerLink' });
+        properties.push({ name: 'showWhenUnlinked', value: this.showWhenUnlinked });
+        properties.push({ name: 'offset', value: this.offset.toString() });
+        properties.push({ name: 'targetAnchor', value: this.targetAnchor.toString() });
+        properties.push({ name: 'followerAnchor', value: this.followerAnchor.toString() });
+    }
+
+    /**
+     * Create element
+     */
+    createElement(parent, runtime) {
+        return new CompositedTransformFollowerElement(this, parent, runtime);
+    }
+}
+
+class RenderFollowerLayer {
+    constructor({
+        link = null,
+        showWhenUnlinked = true,
+        offset = null,
+        leaderAnchor = null,
+        followerAnchor = null
+    } = {}) {
+        this.link = link;
+        this.showWhenUnlinked = showWhenUnlinked;
+        this.offset = offset || Offset.zero;
+        this.leaderAnchor = leaderAnchor;
+        this.followerAnchor = followerAnchor;
+    }
+
+    debugInfo() {
+        return {
+            type: 'RenderFollowerLayer',
+            hasLink: !!this.link,
+            showWhenUnlinked: this.showWhenUnlinked
+        };
+    }
+}
+
+class CompositedTransformFollowerElement extends ProxyWidget.constructor.prototype.constructor {
+    performRebuild() {
+        return this.widget.build(this.context);
+    }
+
+    detach() {
+        if (this.widget.link && this.widget._followerElement) {
+            this.widget.link.removeFollower(this.widget);
+        }
+        super.detach();
+    }
+}
+
+export {
+    Transform,
+    RenderTransform,
+    CompositedTransformTarget,
+    RenderLeaderLayer,
+    CompositedTransformFollower,
+    RenderFollowerLayer,
+    Matrix4,
+    LayerLink,
+    FilterQuality
+};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/package/material/src/widgets/navigator.js b/packages/flutterjs_material/flutterjs_material/src/widgets/navigator.js
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/navigator.js
rename to packages/flutterjs_material/flutterjs_material/src/widgets/navigator.js
diff --git a/packages/flutterjs_material/flutterjs_material/src/widgets/overlay.js b/packages/flutterjs_material/flutterjs_material/src/widgets/overlay.js
new file mode 100644
index 00000000..090dd958
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/widgets/overlay.js
@@ -0,0 +1,89 @@
+import { StatefulWidget,State } from '../core/widget_element.js';
+import { Container } from '../material/container.js';
+
+export class OverlayEntry {
+    constructor({
+        builder,
+        opaque = false,
+        maintainState = false,
+    } = {}) {
+        this.builder = builder;
+        this.opaque = opaque;
+        this.maintainState = maintainState;
+        this._overlayState = null;
+        this._id = Math.random().toString(36).substr(2, 9);
+    }
+
+    remove() {
+        this._overlayState?.remove(this);
+    }
+
+    markNeedsBuild() {
+        this._overlayState?.setState(() => { });
+    }
+}
+
+export class Overlay extends StatefulWidget {
+    constructor({
+        key,
+        initialEntries = [],
+        clipBehavior,
+    } = {}) {
+        super(key);
+        this.initialEntries = initialEntries;
+    }
+
+    static of(context) {
+        // Simplified search
+        return context.findAncestorStateOfType(OverlayState);
+    }
+
+    createState() {
+        return new OverlayState();
+    }
+}
+
+export class OverlayState extends State {
+    constructor() {
+        super();
+        this._entries = [];
+    }
+
+    initState() {
+        this._entries.push(...this.widget.initialEntries);
+        this._entries.forEach(e => e._overlayState = this);
+    }
+
+    insert(entry, { below, above } = {}) {
+        entry._overlayState = this;
+        this.setState(() => {
+            this._entries.push(entry);
+        });
+    }
+
+    remove(entry) {
+        this.setState(() => {
+            const index = this._entries.indexOf(entry);
+            if (index >= 0) {
+                this._entries.splice(index, 1);
+                entry._overlayState = null;
+            }
+        });
+    }
+
+    build(context) {
+        // Just stack them. In Flutter there's Onstage/Offstage. 
+        // We'll wrap in a Stack-like container if we had a Stack widget available here.
+        // For now, absolute positioning via CSS might be needed in the render layer.
+        // Returning Container with children.
+
+        // This won't work perfectly without Stack, but prevents crash.
+        // Since we don't have Stack in 'widgets' layer easily, we return a Container.
+        // The render object for Overlay is complex.
+
+        // Mock implementation:
+        return new Container({
+            child: null // Cannot really render entries without MultiChildRenderObjectWidget
+        });
+    }
+}
diff --git a/packages/flutterjs_engine/package/material/src/widgets/scafold_req.md b/packages/flutterjs_material/flutterjs_material/src/widgets/scafold_req.md
similarity index 100%
rename from packages/flutterjs_engine/package/material/src/widgets/scafold_req.md
rename to packages/flutterjs_material/flutterjs_material/src/widgets/scafold_req.md
diff --git a/packages/flutterjs_material/flutterjs_material/src/widgets/widgets.js b/packages/flutterjs_material/flutterjs_material/src/widgets/widgets.js
new file mode 100644
index 00000000..8c94a176
--- /dev/null
+++ b/packages/flutterjs_material/flutterjs_material/src/widgets/widgets.js
@@ -0,0 +1,52 @@
+export {
+    Flex,
+    FlexElement,
+    RenderFlex,
+    Row,
+    Column,
+    Flexible,
+    FlexibleElement,
+    FlexParentData,
+    Expanded,
+    Wrap,
+    WrapElement,
+    Flow,
+    FlowElement,
+    FlowDelegate,
+} from "./compoment/multi_child_view.js";
+
+export {
+    Align, Center
+} from "./compoment/center.js";
+
+export {
+    Stack,
+    StackElement,
+    RenderStack,
+    Positioned,
+    PositionedElement,
+    StackParentData
+} from "./compoment/stack.js";
+
+export {
+    Padding, RenderPadding
+} from "./compoment/padding.js";
+
+export {
+    SizedBox
+} from "./compoment/sized_box.js";
+
+export {
+    RichText,
+    RichTextElement,
+    RenderParagraph,
+    TextSpan,
+    WidgetSpan,
+    InlineSpan,
+    StrutStyle,
+    TextScaler,
+    TextAlign,
+    TextOverflow,
+    TextWidthBasis,
+    TextBaseline
+} from "./compoment/rich_text.js";
\ No newline at end of file
diff --git a/packages/flutterjs_material/lib/flutterjs_material.dart b/packages/flutterjs_material/lib/flutterjs_material.dart
new file mode 100644
index 00000000..e473e672
--- /dev/null
+++ b/packages/flutterjs_material/lib/flutterjs_material.dart
@@ -0,0 +1,26 @@
+/// FlutterJS FlutterjsMaterial
+/// 
+/// FlutterJS Material Design components
+/// 
+/// The actual implementation is in JavaScript.
+/// This package is a metadata wrapper published to pub.dev.
+/// 
+/// ## Usage
+/// 
+/// Add to your `pubspec.yaml`:
+/// ```yaml
+/// dependencies:
+///   flutterjs_material: ^0.1.0
+/// ```
+/// 
+/// Then run:
+/// ```bash
+/// flutterjs get
+/// ```
+/// 
+/// The package will be installed to: `build/flutterjs/node_modules/@flutterjs/flutterjs_material`
+/// 
+/// See `example/` for a complete working app.
+library flutterjs_material;
+
+// The real implementation is in js/src/
diff --git a/packages/flutterjs_material/package_migration_status.md b/packages/flutterjs_material/package_migration_status.md
new file mode 100644
index 00000000..624a5fa5
--- /dev/null
+++ b/packages/flutterjs_material/package_migration_status.md
@@ -0,0 +1,215 @@
+# Package Migration Status & Task List
+
+This document tracks the migration status of each export provided in the requirements.
+
+**Legend:**
+- [x] **Done**: Implemented in `flutterjs_material` or relevant package.
+- [ ] **Pending**: Implementation needed.
+- [-] **Skipped**: Not planned for initial web release (e.g., specific mobile interactions or low-level native bindings).
+
+## 📦 Library: `animation`
+*Core animation primitives. Status: **0% - Not Implemented***
+
+- [ ] `src/animation/animation.dart`
+- [ ] `src/animation/animation_controller.dart`
+- [ ] `src/animation/curves.dart`
+- [ ] `src/animation/tween.dart`
+- [ ] `src/animation/animation_style.dart`
+- [ ] `src/animation/animations.dart`
+- [ ] `src/animation/listener_helpers.dart`
+- [ ] `src/animation/tween_sequence.dart`
+
+
+---
+
+## 📦 Library: `cupertino`
+*iOS-style widgets. Status: **0% - New Package Required (`flutterjs_cupertino`)***
+
+### Activity & Alerts (Priority: Medium)
+- [ ] `src/cupertino/activity_indicator.dart`
+- [ ] `src/cupertino/dialog.dart`
+- [ ] `src/cupertino/sheet.dart` (`CupertinoActionSheet`)
+- [ ] `src/cupertino/context_menu.dart`
+
+### Buttons & Controls (Priority: High)
+- [ ] `src/cupertino/button.dart` (`CupertinoButton`)
+- [ ] `src/cupertino/switch.dart`
+- [ ] `src/cupertino/slider.dart`
+- [ ] `src/cupertino/checkbox.dart`
+- [ ] `src/cupertino/radio.dart` (`CupertinoRadio`)
+- [ ] `src/cupertino/segmented_control.dart`
+- [ ] `src/cupertino/sliding_segmented_control.dart`
+
+### Navigation (Priority: High)
+- [ ] `src/cupertino/app.dart` (`CupertinoApp`)
+- [ ] `src/cupertino/nav_bar.dart` (`CupertinoNavigationBar`)
+- [ ] `src/cupertino/bottom_tab_bar.dart`
+- [ ] `src/cupertino/tab_scaffold.dart`
+- [ ] `src/cupertino/tab_view.dart`
+- [ ] `src/cupertino/page_scaffold.dart`
+- [ ] `src/cupertino/route.dart` (`CupertinoPageRoute`)
+
+### Text & Inputs (Priority: High)
+- [ ] `src/cupertino/text_field.dart`
+- [ ] `src/cupertino/search_field.dart`
+- [ ] `src/cupertino/context_menu_action.dart`
+- [ ] `src/cupertino/form_row.dart`
+- [ ] `src/cupertino/form_section.dart`
+
+### Pickers (Priority: Medium)
+- [ ] `src/cupertino/date_picker.dart`
+- [ ] `src/cupertino/picker.dart`
+
+### Other
+- [ ] `src/cupertino/colors.dart`
+- [ ] `src/cupertino/constants.dart`
+- [ ] `src/cupertino/icon_theme_data.dart`
+- [ ] `src/cupertino/icons.dart`
+- [ ] `src/cupertino/interface_level.dart`
+- [ ] `src/cupertino/localizations.dart`
+- [ ] `src/cupertino/refresh.dart` (`CupertinoSliverRefreshControl`)
+- [ ] `src/cupertino/scrollbar.dart`
+- [ ] `src/cupertino/thumb_painter.dart`
+- [ ] `src/cupertino/theme.dart`
+- [ ] `src/cupertino/text_theme.dart`
+
+---
+
+## 📦 Library: `foundation`
+*Core utilities. Status: **~15% - Only runtime basics implemented***
+
+**Implemented in `flutterjs_runtime`:**
+- [x] `src/foundation/key.dart` ([Key](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_runtime/flutterjs_runtime/src/key.js#9-16), [ValueKey](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_runtime/flutterjs_runtime/src/key.js#17-31), [ObjectKey](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_runtime/flutterjs_runtime/src/key.js#32-46), [GlobalKey](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_runtime/flutterjs_runtime/src/key.js#47-74) in [runtime/src/key.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_runtime/flutterjs_runtime/src/key.js))
+- [x] `src/foundation/change_notifier.dart` ([ChangeNotifier](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_runtime/flutterjs_runtime/src/inherited_element.js#488-556), [ValueNotifier](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_runtime/flutterjs_runtime/src/inherited_element.js#562-611) in [runtime/src/inherited_element.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_runtime/flutterjs_runtime/src/inherited_element.js))
+
+**Pending:**
+- [ ] `src/foundation/basic_types.dart` (`VoidCallback`, etc.)
+- [ ] `src/foundation/platform.dart` (Web platform checks)
+- [ ] `src/foundation/print.dart` (Console logging wrapper)
+- [ ] `src/foundation/annotations.dart`
+- [ ] `src/foundation/binding.dart`
+- [ ] `src/foundation/serialization.dart`
+- [ ] `src/foundation/debug.dart` (`kDebugMode`)
+
+**Skipped (not applicable to web/JS):**
+- [-] `src/foundation/isolates.dart` (No isolates in browser JS)
+- [-] `src/foundation/memory_allocations.dart` (No manual memory management)
+
+
+---
+
+## 📦 Library: `material`
+*Material Design widgets. Status: **~20% - Significant Widget Gaps***
+
+### App Structure (Priority: High)
+- [x] `src/material/app.dart` (`MaterialApp` -> [material_app.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_material/flutterjs_material/src/material/material_app.js))
+- [x] `src/material/scaffold.dart` (`Scaffold` -> [scffold_basic.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_material/flutterjs_material/src/material/scffold_basic.js))
+- [ ] `src/material/app_bar.dart` (`AppBar`) - *Missing standalone file, check Scaffold integration*
+- [ ] `src/material/drawer.dart`
+- [ ] `src/material/bottom_navigation_bar.dart`
+- [ ] `src/material/tab_controller.dart`
+- [ ] `src/material/tabs.dart` (`TabBar`, `TabBarView`)
+
+### Buttons (Priority: High)
+- [x] `src/material/elevated_button.dart` ([elevated_button.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_material/flutterjs_material/src/material/elevated_button.js))
+- [x] `src/material/floating_action_button.dart` ([floating_action_button.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_material/flutterjs_material/src/material/floating_action_button.js))
+- [ ] `src/material/text_button.dart`
+- [ ] `src/material/outlined_button.dart`
+- [ ] `src/material/icon_button.dart`
+- [ ] `src/material/filled_button.dart`
+- [ ] `src/material/material_button.dart`
+
+### Display & Layout (Priority: High)
+- [x] [src/material/icon.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_material/flutterjs_material/src/material/icon.js) (Mapped to [icon.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_material/flutterjs_material/src/material/icon.js))
+- [x] `src/material/card.dart` ([card.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/card.js))
+- [x] `src/material/divider.dart` ([divider.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/divider.js))
+- [x] `src/material/list_tile.dart` (Related: [list_view.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_material/flutterjs_material/src/material/list_view.js) exists, `list_tile.js` missing?)
+- [x] `src/material/material.dart` (`Material` related logic in [material.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_material/flutterjs_material/src/material/material.js))
+- [ ] `src/material/circle_avatar.dart`
+- [ ] `src/material/chip.dart`
+- [ ] `src/material/badge.dart`
+- [ ] `src/material/toolip.dart`
+- [ ] `src/material/snack_bar.dart`
+- [ ] `src/material/progress_indicator.dart` (`CircularProgressIndicator`, `LinearProgressIndicator`)
+
+### Inputs & Forms (Priority: High)
+- [ ] `src/material/text_field.dart`
+- [ ] `src/material/text_form_field.dart`
+- [ ] `src/material/input_decorator.dart`
+- [ ] `src/material/checkbox.dart`
+- [ ] `src/material/radio.dart`
+- [ ] `src/material/switch.dart`
+- [ ] `src/material/slider.dart`
+- [ ] `src/material/dropdown.dart`
+
+### Dialogs & Overlays (Priority: Medium)
+- [ ] `src/material/dialog.dart` (`AlertDialog`, `SimpleDialog`)
+- [ ] `src/material/bottom_sheet.dart`
+- [ ] `src/material/banner.dart`
+
+### Theming (Priority: high)
+- [x] `src/material/color_scheme.dart` ([color_scheme.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_material/flutterjs_material/src/material/color_scheme.js))
+- [x] `src/material/colors.dart` (`colors.js`)
+- [ ] `src/material/theme.dart` (Full `ThemeData` support pending)
+- [ ] `src/material/typography.dart`
+
+### Advanced / Other (Priority: Low)
+- [ ] `src/material/data_table.dart`
+- [ ] `src/material/stepper.dart`
+- [ ] `src/material/date_picker.dart`
+- [ ] `src/material/time_picker.dart`
+- [ ] `src/material/search.dart`
+- [ ] `src/material/autocomplete.dart`
+- [ ] `src/material/expansion_tile.dart`
+- [ ] `src/material/popup_menu.dart`
+
+---
+
+## 📦 Library: `widgets`
+*General purpose widgets. Status: **~40%***
+
+### Layout/Painting
+- [x] `src/widgets/basic.dart` (Includes `Row`, `Column`, `Padding`, `Center`, `Align`)
+- [x] `src/widgets/container.dart` ([container.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_material/flutterjs_material/src/material/container.js))
+- [x] `src/widgets/image.dart` ([image.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_material/flutterjs_material/src/material/image.js))
+- [x] `src/widgets/text.dart` ([text.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_runtime/flutterjs_runtime/src/build_context.js))
+- [x] `src/widgets/layout_builder.dart` (Implied/Pending explicit file)
+- [x] `src/widgets/stack.dart` ([stack.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/stack.js), [positioned.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/positioned.js))
+- [x] `src/widgets/transform.dart` ([transform.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_material/flutterjs_material/src/widgets/compoment/transform.js))
+- [x] `src/widgets/media_query.dart` (Needed for responsive apps)
+
+### Interaction
+- [x] `src/widgets/gesture_detector.dart` ([gesture_detector.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_material/flutterjs_material/src/material/gesture_detector.js))
+- [ ] `src/widgets/scroll_view.dart` (Partial `ListView` in material, need generic)
+- [ ] `src/widgets/interactive_viewer.dart`
+- [ ] `src/widgets/draggable_scrollable_sheet.dart`
+
+### Navigation
+- [x] `src/widgets/navigator.dart` ([navigator.js](file:///c:/Jay/_Plugin/flutterjs/packages/flutterjs_material/flutterjs_material/src/widgets/navigator.js))
+- [ ] `src/widgets/routes.dart`
+- [ ] `src/widgets/overlay.dart`
+
+### Async
+- [ ] `src/widgets/async.dart` (`FutureBuilder`, `StreamBuilder`)
+
+---
+
+## 📦 Library: `services`
+- [ ] `src/services/clipboard.dart`
+- [ ] `src/services/haptic_feedback.dart`
+- [ ] `src/services/system_chrome.dart` (Title, meta tags)
+- [ ] `src/services/asset_bundle.dart` (Image loading)
+
+## 📦 Library: `painting`
+- [x] `src/painting/alignment.dart`
+- [x] `src/painting/edge_insets.dart`
+- [x] `src/painting/box_decoration.dart`
+- [x] `src/painting/text_style.dart`
+- [x] `src/painting/colors.dart`
+- [ ] `src/painting/gradient.dart`
+- [ ] `src/painting/borders.dart` (`BorderRadius`, `BoxBorder`) - *Partially done in CSS logic*
+
+## 📦 Library: `gestures`
+- [x] `src/gestures/tap.dart` (`TapGestureRecognizer`)
+- [ ] `src/gestures/drag.dart`
+- [ ] `src/gestures/scale.dart`
diff --git a/packages/flutterjs_material/pubspec.yaml b/packages/flutterjs_material/pubspec.yaml
new file mode 100644
index 00000000..05fdf975
--- /dev/null
+++ b/packages/flutterjs_material/pubspec.yaml
@@ -0,0 +1,24 @@
+name: flutterjs_material
+version: 0.1.0
+description: FlutterJS Material Design components
+
+homepage: https://github.com/flutterjs/flutterjs_material
+repository: https://github.com/flutterjs/flutterjs_material
+issue_tracker: https://github.com/flutterjs/flutterjs_material/issues
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+# FlutterJS metadata
+flutterjs:
+  npm_package: "@flutterjs/flutterjs_material"
+  implementation_language: "javascript"
+  js_entry: "js/src/index.js"
diff --git a/packages/flutterjs_painting/.gitignore b/packages/flutterjs_painting/.gitignore
new file mode 100644
index 00000000..1d4cb04d
--- /dev/null
+++ b/packages/flutterjs_painting/.gitignore
@@ -0,0 +1,31 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+build/
+dist/
+.dev/
+.debug/
+
+# Generated files
+.flutterjs/
+.cache/
+
+# Dart
+.dart_tool/
+.packages
+pubspec.lock
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Logs
+*.log
+npm-debug.log*
diff --git a/packages/flutterjs_painting/.pubignore b/packages/flutterjs_painting/.pubignore
new file mode 100644
index 00000000..bae5ffcf
--- /dev/null
+++ b/packages/flutterjs_painting/.pubignore
@@ -0,0 +1,11 @@
+# Exclude JavaScript implementation from pub.dev
+js/
+node_modules/
+dist/
+build/
+.git/
+.github/
+test/
+package-lock.json
+.vscode/
+.idea/
diff --git a/packages/flutterjs_painting/CHANGELOG.md b/packages/flutterjs_painting/CHANGELOG.md
new file mode 100644
index 00000000..13187808
--- /dev/null
+++ b/packages/flutterjs_painting/CHANGELOG.md
@@ -0,0 +1,3 @@
+## 0.1.0
+
+* Initial release
diff --git a/packages/flutterjs_painting/LICENSE b/packages/flutterjs_painting/LICENSE
new file mode 100644
index 00000000..14fac913
--- /dev/null
+++ b/packages/flutterjs_painting/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/flutterjs_painting/README.md b/packages/flutterjs_painting/README.md
new file mode 100644
index 00000000..f6c5707d
--- /dev/null
+++ b/packages/flutterjs_painting/README.md
@@ -0,0 +1,58 @@
+# FlutterjsPainting
+
+A FlutterJS package
+
+## Installation
+
+Add to `pubspec.yaml`:
+
+```yaml
+dependencies:
+  flutterjs_painting: ^0.1.0
+```
+
+Then run:
+
+```bash
+flutterjs get
+```
+
+## Usage
+
+See `example/` for a complete Flutter app.
+
+## JavaScript Implementation
+
+The actual implementation is in `js/src/` (JavaScript).
+
+To develop:
+
+```bash
+cd js
+npm install
+```
+
+## Features
+
+- Lightweight implementation
+- SEO-friendly (FlutterJS rendering)
+- Easy to use
+
+## Publishing
+
+### 1. Publish JavaScript to npm
+
+```bash
+cd js
+npm publish
+```
+
+### 2. Publish Dart wrapper to pub.dev
+
+```bash
+dart pub publish
+```
+
+## License
+
+MIT
diff --git a/packages/flutterjs_painting/example/lib/main.dart b/packages/flutterjs_painting/example/lib/main.dart
new file mode 100644
index 00000000..62d181a2
--- /dev/null
+++ b/packages/flutterjs_painting/example/lib/main.dart
@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'FlutterjsPainting Example',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: const ExamplePage(),
+    );
+  }
+}
+
+class ExamplePage extends StatefulWidget {
+  const ExamplePage({Key? key}) : super(key: key);
+
+  @override
+  State<ExamplePage> createState() => _ExamplePageState();
+}
+
+class _ExamplePageState extends State<ExamplePage> {
+  String result = 'Click the button to test';
+
+  void _testPackage() {
+    setState(() {
+      // This will call the JavaScript implementation when running with FlutterJS
+      result = 'FlutterjsPainting is ready!\n\nRun: flutterjs run --to-js --serve';
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('FlutterjsPainting Example'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              result,
+              textAlign: TextAlign.center,
+              style: const TextStyle(fontSize: 16),
+            ),
+            const SizedBox(height: 20),
+            ElevatedButton(
+              onPressed: _testPackage,
+              child: const Text('Test FlutterjsPainting'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/packages/flutterjs_painting/example/pubspec.yaml b/packages/flutterjs_painting/example/pubspec.yaml
new file mode 100644
index 00000000..7277505d
--- /dev/null
+++ b/packages/flutterjs_painting/example/pubspec.yaml
@@ -0,0 +1,15 @@
+name: flutterjs_painting_example
+description: Example app for flutterjs_painting
+
+publish_to: 'none'
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
diff --git a/packages/flutterjs_painting/flutterjs_painting/build.js b/packages/flutterjs_painting/flutterjs_painting/build.js
new file mode 100644
index 00000000..8a988ce4
--- /dev/null
+++ b/packages/flutterjs_painting/flutterjs_painting/build.js
@@ -0,0 +1,99 @@
+/**
+ * Build script for @flutterjs/flutterjs_painting
+ * 
+ * Generates exports.json manifest for the import resolver system
+ */
+
+import { readFileSync, writeFileSync, readdirSync, statSync } from 'fs';
+import { join, extname } from 'path';
+
+const srcDir = './src';
+
+/**
+ * Get all JavaScript files recursively
+ */
+function getAllJsFiles(dir, fileList = []) {
+  const files = readdirSync(dir);
+  
+  for (const file of files) {
+    const filePath = join(dir, file);
+    const stat = statSync(filePath);
+    
+    if (stat.isDirectory()) {
+      getAllJsFiles(filePath, fileList);
+    } else if (extname(file) === '.js') {
+      fileList.push(filePath);
+    }
+  }
+  
+  return fileList;
+}
+
+/**
+ * Scan all source files and generate exports.json manifest
+ * This manifest tells the Dart code generator what symbols this package exports
+ */
+function generateExportManifest(sourceFiles) {
+  const manifest = {
+    package: '@flutterjs/flutterjs_painting',
+    version: '0.1.0',
+    exports: []
+  };
+
+  // Regex patterns to match different export types
+  const exportRegex = /export\s*{\s*([^}]+)\s*}/g;
+  const exportStarRegex = /export\s*\*\s*from/g;
+  const classRegex = /export\s+class\s+(\w+)/g;
+  const functionRegex = /export\s+function\s+(\w+)/g;
+  const constRegex = /export\s+const\s+(\w+)/g;
+
+  for (const srcFile of sourceFiles) {
+    const content = readFileSync(srcFile, 'utf8');
+    
+    // Find named exports: export { Foo, Bar }
+    for (const match of content.matchAll(exportRegex)) {
+      const symbols = match[1]
+        .split(',')
+        .map(s => s.trim())
+        .map(s => s.split(/\s+as\s+/).pop()) // Handle "export { Foo as Bar }"
+        .filter(s => s && !s.includes('from'));
+      manifest.exports.push(...symbols);
+    }
+    
+    // Find class exports: export class Foo
+    for (const match of content.matchAll(classRegex)) {
+      manifest.exports.push(match[1]);
+    }
+    
+    // Find function exports: export function foo()
+    for (const match of content.matchAll(functionRegex)) {
+      manifest.exports.push(match[1]);
+    }
+    
+    // Find const exports: export const FOO
+    for (const match of content.matchAll(constRegex)) {
+      manifest.exports.push(match[1]);
+    }
+  }
+
+  // Remove duplicates and sort
+  manifest.exports = [...new Set(manifest.exports)].sort();
+
+  writeFileSync('./exports.json', JSON.stringify(manifest, null, 2) + '\n');
+  console.log(`📋 Generated exports.json with ${manifest.exports.length} symbols\n`);
+}
+
+// Main build process
+async function build() {
+  console.log('🚀 Building @flutterjs/flutterjs_painting...\n');
+
+  const allFiles = getAllJsFiles(srcDir);
+  console.log(`📦 Found ${allFiles.length} JavaScript files\n`);
+
+  // Generate export manifest
+  generateExportManifest(allFiles);
+
+  console.log('✅ Build successful!\n');
+}
+
+build().catch(console.error);
diff --git a/packages/flutterjs_painting/flutterjs_painting/package.json b/packages/flutterjs_painting/flutterjs_painting/package.json
new file mode 100644
index 00000000..f06a02fb
--- /dev/null
+++ b/packages/flutterjs_painting/flutterjs_painting/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@flutterjs/flutterjs_painting",
+  "version": "0.1.0",
+  "description": "A FlutterJS package",
+  "main": "src/index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"No tests yet\"",
+    "prepublishOnly": "echo \"Ready to publish\""
+  },
+  "keywords": [
+    "flutterjs",
+    "flutterjs_painting"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/flutterjsdev/flutterjs.git"
+  },
+  "files": [
+    "src/",
+    "README.md",
+    "LICENSE"
+  ]
+}
diff --git a/packages/flutterjs_painting/flutterjs_painting/src/index.js b/packages/flutterjs_painting/flutterjs_painting/src/index.js
new file mode 100644
index 00000000..8ff2a61b
--- /dev/null
+++ b/packages/flutterjs_painting/flutterjs_painting/src/index.js
@@ -0,0 +1,43 @@
+/**
+ * FlutterJS FlutterjsPainting
+ * 
+ * Simple, lightweight implementation built with JavaScript
+ */
+
+/**
+ * Main class for FlutterjsPainting
+ */
+export class FlutterjsPainting {
+  constructor(config = {}) {
+    this.config = config;
+  }
+
+  /**
+   * Example method - replace with your implementation
+   */
+  hello() {
+    return 'Hello from FlutterjsPainting!';
+  }
+
+  /**
+   * Example async method
+   */
+  async fetchData(url) {
+    try {
+      const response = await fetch(url);
+      return await response.json();
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      throw error;
+    }
+  }
+}
+
+/**
+ * Helper function
+ */
+export function createInstance(config) {
+  return new FlutterjsPainting(config);
+}
+
+export default FlutterjsPainting;
diff --git a/packages/flutterjs_painting/lib/flutterjs_painting.dart b/packages/flutterjs_painting/lib/flutterjs_painting.dart
new file mode 100644
index 00000000..71164e67
--- /dev/null
+++ b/packages/flutterjs_painting/lib/flutterjs_painting.dart
@@ -0,0 +1,26 @@
+/// FlutterJS FlutterjsPainting
+/// 
+/// A FlutterJS package
+/// 
+/// The actual implementation is in JavaScript.
+/// This package is a metadata wrapper published to pub.dev.
+/// 
+/// ## Usage
+/// 
+/// Add to your `pubspec.yaml`:
+/// ```yaml
+/// dependencies:
+///   flutterjs_painting: ^0.1.0
+/// ```
+/// 
+/// Then run:
+/// ```bash
+/// flutterjs get
+/// ```
+/// 
+/// The package will be installed to: `build/flutterjs/node_modules/@flutterjs/flutterjs_painting`
+/// 
+/// See `example/` for a complete working app.
+library flutterjs_painting;
+
+// The real implementation is in js/src/
diff --git a/packages/flutterjs_painting/pubspec.yaml b/packages/flutterjs_painting/pubspec.yaml
new file mode 100644
index 00000000..1194df44
--- /dev/null
+++ b/packages/flutterjs_painting/pubspec.yaml
@@ -0,0 +1,24 @@
+name: flutterjs_painting
+version: 0.1.0
+description: A FlutterJS package
+
+homepage: https://github.com/flutterjs/flutterjs_painting
+repository: https://github.com/flutterjs/flutterjs_painting
+issue_tracker: https://github.com/flutterjs/flutterjs_painting/issues
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+# FlutterJS metadata
+flutterjs:
+  npm_package: "@flutterjs/flutterjs_painting"
+  implementation_language: "javascript"
+  js_entry: "js/src/index.js"
diff --git a/packages/flutterjs_runtime/.gitignore b/packages/flutterjs_runtime/.gitignore
new file mode 100644
index 00000000..1d4cb04d
--- /dev/null
+++ b/packages/flutterjs_runtime/.gitignore
@@ -0,0 +1,31 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+build/
+dist/
+.dev/
+.debug/
+
+# Generated files
+.flutterjs/
+.cache/
+
+# Dart
+.dart_tool/
+.packages
+pubspec.lock
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Logs
+*.log
+npm-debug.log*
diff --git a/packages/flutterjs_runtime/.pubignore b/packages/flutterjs_runtime/.pubignore
new file mode 100644
index 00000000..bae5ffcf
--- /dev/null
+++ b/packages/flutterjs_runtime/.pubignore
@@ -0,0 +1,11 @@
+# Exclude JavaScript implementation from pub.dev
+js/
+node_modules/
+dist/
+build/
+.git/
+.github/
+test/
+package-lock.json
+.vscode/
+.idea/
diff --git a/packages/flutterjs_runtime/CHANGELOG.md b/packages/flutterjs_runtime/CHANGELOG.md
new file mode 100644
index 00000000..13187808
--- /dev/null
+++ b/packages/flutterjs_runtime/CHANGELOG.md
@@ -0,0 +1,3 @@
+## 0.1.0
+
+* Initial release
diff --git a/packages/flutterjs_runtime/LICENSE b/packages/flutterjs_runtime/LICENSE
new file mode 100644
index 00000000..14fac913
--- /dev/null
+++ b/packages/flutterjs_runtime/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/flutterjs_runtime/README.md b/packages/flutterjs_runtime/README.md
new file mode 100644
index 00000000..6890791b
--- /dev/null
+++ b/packages/flutterjs_runtime/README.md
@@ -0,0 +1,58 @@
+# FlutterjsRuntime
+
+FlutterJS core runtime implementation
+
+## Installation
+
+Add to `pubspec.yaml`:
+
+```yaml
+dependencies:
+  flutterjs_runtime: ^0.1.0
+```
+
+Then run:
+
+```bash
+flutterjs get
+```
+
+## Usage
+
+See `example/` for a complete Flutter app.
+
+## JavaScript Implementation
+
+The actual implementation is in `js/src/` (JavaScript).
+
+To develop:
+
+```bash
+cd js
+npm install
+```
+
+## Features
+
+- Lightweight implementation
+- SEO-friendly (FlutterJS rendering)
+- Easy to use
+
+## Publishing
+
+### 1. Publish JavaScript to npm
+
+```bash
+cd js
+npm publish
+```
+
+### 2. Publish Dart wrapper to pub.dev
+
+```bash
+dart pub publish
+```
+
+## License
+
+MIT
diff --git a/packages/flutterjs_runtime/example/lib/main.dart b/packages/flutterjs_runtime/example/lib/main.dart
new file mode 100644
index 00000000..b88b119f
--- /dev/null
+++ b/packages/flutterjs_runtime/example/lib/main.dart
@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'FlutterjsRuntime Example',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: const ExamplePage(),
+    );
+  }
+}
+
+class ExamplePage extends StatefulWidget {
+  const ExamplePage({Key? key}) : super(key: key);
+
+  @override
+  State<ExamplePage> createState() => _ExamplePageState();
+}
+
+class _ExamplePageState extends State<ExamplePage> {
+  String result = 'Click the button to test';
+
+  void _testPackage() {
+    setState(() {
+      // This will call the JavaScript implementation when running with FlutterJS
+      result = 'FlutterjsRuntime is ready!\n\nRun: flutterjs run --to-js --serve';
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('FlutterjsRuntime Example'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              result,
+              textAlign: TextAlign.center,
+              style: const TextStyle(fontSize: 16),
+            ),
+            const SizedBox(height: 20),
+            ElevatedButton(
+              onPressed: _testPackage,
+              child: const Text('Test FlutterjsRuntime'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/packages/flutterjs_runtime/example/pubspec.yaml b/packages/flutterjs_runtime/example/pubspec.yaml
new file mode 100644
index 00000000..dd0fa7c1
--- /dev/null
+++ b/packages/flutterjs_runtime/example/pubspec.yaml
@@ -0,0 +1,15 @@
+name: flutterjs_runtime_example
+description: Example app for flutterjs_runtime
+
+publish_to: 'none'
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
diff --git a/packages/flutterjs_runtime/flutterjs_runtime/build.js b/packages/flutterjs_runtime/flutterjs_runtime/build.js
new file mode 100644
index 00000000..3737a9fb
--- /dev/null
+++ b/packages/flutterjs_runtime/flutterjs_runtime/build.js
@@ -0,0 +1,196 @@
+import esbuild from 'esbuild';
+import { readFileSync, writeFileSync, readdirSync, statSync, watch } from 'fs';
+import { join, relative, extname } from 'path';
+
+const srcDir = 'src';
+const outDir = 'dist';
+
+/**
+ * ✅ Recursively find ALL .js files in src/
+ */
+function getAllJsFiles(dir) {
+  const files = [];
+  const items = readdirSync(dir);
+
+  for (const item of items) {
+    const fullPath = join(dir, item);
+    const stat = statSync(fullPath);
+
+    if (stat.isDirectory()) {
+      files.push(...getAllJsFiles(fullPath));
+    } else if (extname(item) === '.js') {
+      files.push(fullPath);
+    }
+  }
+
+  return files;
+}
+
+/**
+ * Build each .js file separately
+ */
+async function buildAllFiles() {
+  try {
+    console.log('🚀 Building @flutterjs/material...\n');
+
+    // ✅ Find all .js files
+    const allFiles = getAllJsFiles(srcDir);
+
+    console.log(`📁 Found ${allFiles.length} files\n`);
+
+    // ✅ Build each file separately
+    for (const srcFile of allFiles) {
+      const relativePath = relative(srcDir, srcFile);
+      const outFile = join(outDir, relativePath);
+
+      console.log(`📦 ${relativePath}`);
+
+      await esbuild.build({
+        entryPoints: [srcFile],
+        outfile: outFile,
+        bundle: false,
+        minify: false, // Disabled for debugging
+        platform: 'browser',
+        target: ['es2020'],
+        format: 'esm',
+        sourcemap: true,
+      });
+    }
+
+    console.log();
+
+    // ✅ Generate exports based on all built files
+    generateExports(allFiles);
+
+    // 🎁 NEW: Generate exports.json for Dart analyzer
+    generateExportManifest(allFiles);
+
+    console.log('✅ Build successful!\n');
+
+  } catch (error) {
+    console.error('❌ Build failed:', error);
+    process.exit(1);
+  }
+}
+
+
+/**
+ * Auto-generate package.json exports in the exact format requested
+ * "./core/widget_element.js" → "./dist/core/widget_element.js"
+ */
+function generateExports(sourceFiles) {
+  const packageJsonPath = './package.json';
+  const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
+
+  const exports = {};
+
+  // Main entry point
+  exports['.'] = './dist/index.js';
+
+  // ✅ Create export for EVERY built file with exact format
+  for (const srcFile of sourceFiles) {
+    const relativePath = relative(srcDir, srcFile);
+
+    // Skip index.js - it's already the main entry
+    if (relativePath === 'index.js') {
+      continue;
+    }
+
+    // Convert path with .js extension:
+    // core.js → ./core.js
+    // core/widget_element.js → ./core/widget_element.js
+    // material.js → ./material.js
+    // widgets/compoment/multi_child_view.js → ./widgets/compoment/multi_child_view.js
+
+    // Normalize slashes for Windows
+    const normalizedPath = relativePath.replace(/\\/g, '/');
+    const exportKey = './' + normalizedPath.replaceAll(".js", "");
+    const exportPath = './dist/' + normalizedPath;
+
+    exports[exportKey] = exportPath;
+  }
+
+  // Update package.json
+  packageJson.exports = exports;
+  packageJson.main = './dist/runtime.js';
+
+  writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n');
+
+  console.log('📝 Generated exports:\n');
+  Object.entries(exports).forEach(([key, value]) => {
+    console.log(`   "${key}": "${value}"`);
+  });
+  console.log();
+}
+
+/**
+ * Scan all source files and generate exports.json manifest
+ * This manifest tells the Dart code generator what symbols this package exports
+ */
+function generateExportManifest(sourceFiles) {
+  const manifest = {
+    package: '@flutterjs/runtime',
+    version: JSON.parse(readFileSync('./package.json', 'utf8')).version,
+    exports: []
+  };
+
+  const regex = /export\s+(?:class|function|const|var|let|enum)\s+([a-zA-Z0-9_$]+)/g;
+  const aliasRegex = /export\s*{\s*([^}]+)\s*}/;
+
+  for (const file of sourceFiles) {
+    const content = readFileSync(file, 'utf8');
+    const relativePath = relative(srcDir, file).replace(/\\/g, '/');
+    const importPath = `./dist/${relativePath}`;
+
+    // Match named exports: export class Foo
+    let match;
+    while ((match = regex.exec(content)) !== null) {
+      manifest.exports.push({
+        name: match[1],
+        path: importPath,
+        type: 'class' // simplified
+      });
+    }
+
+    // Match alias exports: export { Foo, Bar as Baz }
+    const aliasMatch = content.match(aliasRegex);
+    if (aliasMatch) {
+      const exportsList = aliasMatch[1].split(',');
+      for (const exp of exportsList) {
+        const parts = exp.trim().split(/\s+as\s+/);
+        const name = parts.length > 1 ? parts[1] : parts[0];
+        manifest.exports.push({
+          name: name,
+          path: importPath,
+          type: 'alias'
+        });
+      }
+    }
+  }
+
+  writeFileSync('exports.json', JSON.stringify(manifest, null, 2));
+  console.log(`📋 Generated exports.json with ${manifest.exports.length} symbols`);
+}
+
+/**
+ * Watch mode - rebuild on file changes
+ */
+function watchMode() {
+  console.log('👀 Watching for changes...\n');
+
+  watch(srcDir, { recursive: true }, (eventType, filename) => {
+    if (extname(filename) === '.js') {
+      console.log(`\n⚡ ${filename} changed\n`);
+      buildAllFiles();
+    }
+  });
+}
+
+// ✅ Check for --watch flag
+const isWatchMode = process.argv.includes('--watch');
+
+if (isWatchMode) {
+  buildAllFiles().then(() => watchMode());
+} else {
+  buildAllFiles();
+}
\ No newline at end of file
diff --git a/packages/flutterjs_runtime/flutterjs_runtime/exports.json b/packages/flutterjs_runtime/flutterjs_runtime/exports.json
new file mode 100644
index 00000000..02ade9ca
--- /dev/null
+++ b/packages/flutterjs_runtime/flutterjs_runtime/exports.json
@@ -0,0 +1,306 @@
+{
+  "package": "@flutterjs/runtime",
+  "version": "0.1.0",
+  "exports": [
+    {
+      "name": "BuildContext",
+      "path": "./dist/build_context.js",
+      "type": "alias"
+    },
+    {
+      "name": "DateTime",
+      "path": "./dist/datetime.js",
+      "type": "class"
+    },
+    {
+      "name": "Diagnosticable",
+      "path": "./dist/element.js",
+      "type": "class"
+    },
+    {
+      "name": "Element",
+      "path": "./dist/element.js",
+      "type": "alias"
+    },
+    {
+      "name": "StatelessElement",
+      "path": "./dist/element.js",
+      "type": "alias"
+    },
+    {
+      "name": "StatefulElement",
+      "path": "./dist/element.js",
+      "type": "alias"
+    },
+    {
+      "name": "ComponentElement",
+      "path": "./dist/element.js",
+      "type": "alias"
+    },
+    {
+      "name": "DiagnosticLevel",
+      "path": "./dist/element.js",
+      "type": "alias"
+    },
+    {
+      "name": "isRealVNode",
+      "path": "./dist/element.js",
+      "type": "alias"
+    },
+    {
+      "name": "isWidget",
+      "path": "./dist/element.js",
+      "type": "alias"
+    },
+    {
+      "name": "EventSystem",
+      "path": "./dist/event_system.js",
+      "type": "alias"
+    },
+    {
+      "name": "SyntheticEvent",
+      "path": "./dist/event_system.js",
+      "type": "alias"
+    },
+    {
+      "name": "FlutterJSRuntime",
+      "path": "./dist/flutterjs_runtime.js",
+      "type": "class"
+    },
+    {
+      "name": "runApp",
+      "path": "./dist/flutterjs_runtime.js",
+      "type": "class"
+    },
+    {
+      "name": "getRuntime",
+      "path": "./dist/flutterjs_runtime.js",
+      "type": "class"
+    },
+    {
+      "name": "updateApp",
+      "path": "./dist/flutterjs_runtime.js",
+      "type": "class"
+    },
+    {
+      "name": "hotReload",
+      "path": "./dist/flutterjs_runtime.js",
+      "type": "class"
+    },
+    {
+      "name": "renderToString",
+      "path": "./dist/flutterjs_runtime.js",
+      "type": "class"
+    },
+    {
+      "name": "hydrate",
+      "path": "./dist/flutterjs_runtime.js",
+      "type": "class"
+    },
+    {
+      "name": "getMetrics",
+      "path": "./dist/flutterjs_runtime.js",
+      "type": "class"
+    },
+    {
+      "name": "getPerformanceReport",
+      "path": "./dist/flutterjs_runtime.js",
+      "type": "class"
+    },
+    {
+      "name": "clearMetrics",
+      "path": "./dist/flutterjs_runtime.js",
+      "type": "class"
+    },
+    {
+      "name": "on",
+      "path": "./dist/flutterjs_runtime.js",
+      "type": "class"
+    },
+    {
+      "name": "off",
+      "path": "./dist/flutterjs_runtime.js",
+      "type": "class"
+    },
+    {
+      "name": "getConfig",
+      "path": "./dist/flutterjs_runtime.js",
+      "type": "class"
+    },
+    {
+      "name": "dispose",
+      "path": "./dist/flutterjs_runtime.js",
+      "type": "class"
+    },
+    {
+      "name": "isInitialized",
+      "path": "./dist/flutterjs_runtime.js",
+      "type": "class"
+    },
+    {
+      "name": "isMounted",
+      "path": "./dist/flutterjs_runtime.js",
+      "type": "class"
+    },
+    {
+      "name": "FocusManager",
+      "path": "./dist/focus_manager.js",
+      "type": "alias"
+    },
+    {
+      "name": "GestureRecognizer",
+      "path": "./dist/gesture_recognizer.js",
+      "type": "alias"
+    },
+    {
+      "name": "DoubleTapRecognizer",
+      "path": "./dist/gesture_recognizer.js",
+      "type": "alias"
+    },
+    {
+      "name": "VerticalDragRecognizer",
+      "path": "./dist/gesture_recognizer.js",
+      "type": "alias"
+    },
+    {
+      "name": "HorizontalDragRecognizer",
+      "path": "./dist/gesture_recognizer.js",
+      "type": "alias"
+    },
+    {
+      "name": "TapRecognizer",
+      "path": "./dist/gesture_recognizer.js",
+      "type": "alias"
+    },
+    {
+      "name": "LongPressRecognizer",
+      "path": "./dist/gesture_recognizer.js",
+      "type": "alias"
+    },
+    {
+      "name": "SwipeRecognizer",
+      "path": "./dist/gesture_recognizer.js",
+      "type": "alias"
+    },
+    {
+      "name": "PanRecognizer",
+      "path": "./dist/gesture_recognizer.js",
+      "type": "alias"
+    },
+    {
+      "name": "ScaleRecognizer",
+      "path": "./dist/gesture_recognizer.js",
+      "type": "alias"
+    },
+    {
+      "name": "GestureArena",
+      "path": "./dist/gesture_recognizer.js",
+      "type": "alias"
+    },
+    {
+      "name": "GestureManager",
+      "path": "./dist/gesture_recognizer.js",
+      "type": "alias"
+    },
+    {
+      "name": "InheritedElement",
+      "path": "./dist/inherited_element.js",
+      "type": "alias"
+    },
+    {
+      "name": "InheritedWidget",
+      "path": "./dist/inherited_element.js",
+      "type": "alias"
+    },
+    {
+      "name": "ChangeNotifier",
+      "path": "./dist/inherited_element.js",
+      "type": "alias"
+    },
+    {
+      "name": "ValueNotifier",
+      "path": "./dist/inherited_element.js",
+      "type": "alias"
+    },
+    {
+      "name": "Provider",
+      "path": "./dist/inherited_element.js",
+      "type": "alias"
+    },
+    {
+      "name": "Key",
+      "path": "./dist/key.js",
+      "type": "alias"
+    },
+    {
+      "name": "ValueKey",
+      "path": "./dist/key.js",
+      "type": "alias"
+    },
+    {
+      "name": "ObjectKey",
+      "path": "./dist/key.js",
+      "type": "alias"
+    },
+    {
+      "name": "GlobalKey",
+      "path": "./dist/key.js",
+      "type": "alias"
+    },
+    {
+      "name": "MemoryManager",
+      "path": "./dist/memory_manager.js",
+      "type": "alias"
+    },
+    {
+      "name": "MemoryProfiler",
+      "path": "./dist/memory_manager.js",
+      "type": "alias"
+    },
+    {
+      "name": "RuntimeEngine",
+      "path": "./dist/runtime_engine.js",
+      "type": "alias"
+    },
+    {
+      "name": "ServiceRegistry",
+      "path": "./dist/service_registry.js",
+      "type": "alias"
+    },
+    {
+      "name": "State",
+      "path": "./dist/state.js",
+      "type": "alias"
+    },
+    {
+      "name": "TypedState",
+      "path": "./dist/state.js",
+      "type": "alias"
+    },
+    {
+      "name": "StateManager",
+      "path": "./dist/state.js",
+      "type": "alias"
+    },
+    {
+      "name": "EnhancedBuildContext",
+      "path": "./dist/state.js",
+      "type": "alias"
+    },
+    {
+      "name": "",
+      "path": "./dist/state.js",
+      "type": "alias"
+    },
+    {
+      "name": "StateTracker",
+      "path": "./dist/state_tracker.js",
+      "type": "alias"
+    },
+    {
+      "name": "UpdateBatcher",
+      "path": "./dist/update_batcher.js",
+      "type": "alias"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/flutterjs_runtime/flutterjs_runtime/package.json b/packages/flutterjs_runtime/flutterjs_runtime/package.json
new file mode 100644
index 00000000..e4e542d6
--- /dev/null
+++ b/packages/flutterjs_runtime/flutterjs_runtime/package.json
@@ -0,0 +1,69 @@
+{
+  "name": "@flutterjs/runtime",
+  "version": "0.1.0",
+  "description": "FlutterJS core runtime implementation",
+  "main": "./dist/runtime.js",
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./build_context": "./dist/build_context.js",
+    "./datetime": "./dist/datetime.js",
+    "./element": "./dist/element.js",
+    "./event_system": "./dist/event_system.js",
+    "./flutterjs_runtime": "./dist/flutterjs_runtime.js",
+    "./focus_manager": "./dist/focus_manager.js",
+    "./gesture_recognizer": "./dist/gesture_recognizer.js",
+    "./inherited_element": "./dist/inherited_element.js",
+    "./key": "./dist/key.js",
+    "./memory_manager": "./dist/memory_manager.js",
+    "./runtime_engine": "./dist/runtime_engine.js",
+    "./service_registry": "./dist/service_registry.js",
+    "./state": "./dist/state.js",
+    "./state_tracker": "./dist/state_tracker.js",
+    "./update_batcher": "./dist/update_batcher.js"
+  },
+  "scripts": {
+    "build": "node build.js",
+    "test:buildContext": "node ./test/build_context.test.js",
+    "test:element": "node ./test/element.test.js",
+    "test:elementSystemImp": "node ./test/event_system_integration.test.js",
+    "test:event": "node ./test/event_system.test.js",
+    "test:runtime": "node ./test/flutterjs_runtime.test.js",
+    "test:focus": "node ./test/focus_manager.test.js",
+    "test:gesture": "node ./test/gesture.test.js",
+    "test:inheritentInte": "node ./test/inherited_element_integration.test.js",
+    "test:inheritedElement": "node ./test/inherited_element.test.js",
+    "test:memory": "node ./test/memory_integration.test.js",
+    "test:memoryMan": "node ./test/memory_manager.test.js",
+    "test:runtimeEng": "node ./test/runtime_engine.test.js",
+    "test:runtimeInte": "node ./test/runtime_integration.test",
+    "test:service": "node ./test/service_registry.test.js",
+    "test:stateInte": "node ./test/state_integration.test.js",
+    "test:stateTrack": "node ./test/state_tracker.test.js",
+    "test:state": "node ./test/state.test.js",
+    "test:update": "node ./test/update_batcher.test.js"
+  },
+  "dependencies": {
+    "@flutterjs/vdom": "file:../../flutterjs_vdom/flutterjs_vdom",
+    "jest": "^29.7.0",
+    "jsdom": "^22.1.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.27.2"
+  },
+  "keywords": [
+    "flutterjs",
+    "flutterjs_runtime"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/flutterjsdev/flutterjs.git"
+  },
+  "files": [
+    "dist/",
+    "README.md",
+    "LICENSE"
+  ]
+}
diff --git a/packages/flutterjs_engine/src/runtime/src/build_context.js b/packages/flutterjs_runtime/flutterjs_runtime/src/build_context.js
similarity index 100%
rename from packages/flutterjs_engine/src/runtime/src/build_context.js
rename to packages/flutterjs_runtime/flutterjs_runtime/src/build_context.js
diff --git a/packages/flutterjs_runtime/flutterjs_runtime/src/datetime.js b/packages/flutterjs_runtime/flutterjs_runtime/src/datetime.js
new file mode 100644
index 00000000..237ed3bb
--- /dev/null
+++ b/packages/flutterjs_runtime/flutterjs_runtime/src/datetime.js
@@ -0,0 +1,35 @@
+/**
+ * Dart DateTime Polyfill
+ * Mimics dart:core DateTime class
+ */
+export class DateTime {
+    constructor(date) {
+        this._date = date instanceof Date ? date : new Date(date);
+    }
+
+    static now() {
+        return new DateTime(new Date());
+    }
+
+    static fromMillisecondsSinceEpoch(millisecondsSinceEpoch, { isUtc = false } = {}) {
+        return new DateTime(new Date(millisecondsSinceEpoch));
+    }
+
+    get millisecondsSinceEpoch() {
+        return this._date.getTime();
+    }
+
+    get year() { return this._date.getFullYear(); }
+    get month() { return this._date.getMonth() + 1; }
+    get day() { return this._date.getDate(); }
+    get hour() { return this._date.getHours(); }
+    get minute() { return this._date.getMinutes(); }
+    get second() { return this._date.getSeconds(); }
+    get millisecond() { return this._date.getMilliseconds(); }
+    get microsecond() { return 0; } // JS Date doesn't support microseconds
+
+    toString() {
+        // Basic implementation: 2026-01-24 11:41:17.102
+        return this._date.toISOString().replace('T', ' ').replace('Z', '');
+    }
+}
diff --git a/packages/flutterjs_runtime/flutterjs_runtime/src/element.js b/packages/flutterjs_runtime/flutterjs_runtime/src/element.js
new file mode 100644
index 00000000..c2b1ba2f
--- /dev/null
+++ b/packages/flutterjs_runtime/flutterjs_runtime/src/element.js
@@ -0,0 +1,1145 @@
+/**
+ * FlutterJS Element System - FIXED VERSION
+ * 
+ * ✅ CRITICAL FIX: StatefulElement.mount() now calls state._mount()
+ * This ensures this.widget is properly initialized in State
+ * 
+ * Elements are the live instances that bridge widgets and DOM.
+ * They manage the lifecycle, state, and rendering of widgets.
+ */
+
+import { BuildContext } from './build_context.js';
+import { VNodeDiffer } from '@flutterjs/vdom/vnode_differ';
+import { PatchApplier } from '@flutterjs/vdom/patch_applier';
+// NOTE: InheritedElement is NOT imported here to avoid circular dependency.
+// InheritedWidget provides its own createElement() method that returns InheritedElement.
+
+// Debug flag - set to true to enable verbose logging
+const DEBUG = false;
+
+// ============================================================================
+// DIAGNOSTIC LEVELS
+// ============================================================================
+
+const DiagnosticLevel = {
+  hidden: 'hidden',
+  fine: 'fine',
+  debug: 'debug',
+  info: 'info',
+  warning: 'warning',
+  hint: 'hint',
+  summary: 'summary',
+  error: 'error',
+  off: 'off'
+};
+
+const DiagnosticsTreeStyle = {
+  none: 'none',
+  sparse: 'sparse',
+  offstage: 'offstage',
+  dense: 'dense',
+  transition: 'transition',
+  error: 'error',
+  whitespace: 'whitespace',
+  flat: 'flat',
+  singleLine: 'singleLine',
+  errorProperty: 'errorProperty',
+  shallow: 'shallow',
+  truncateChildren: 'truncateChildren'
+};
+
+// ============================================================================
+// DIAGNOSTICABLE MIXIN
+// ============================================================================
+
+export class Diagnosticable {
+  toStringShort() {
+    return `${this.constructor.name}${this.key ? `(key: ${this.key})` : '(unkeyed)'}`;
+  }
+
+  toDiagnosticsNode(name = null, style = DiagnosticsTreeStyle.sparse) {
+    return {
+      name: name || this.constructor.name,
+      value: this,
+      style: style,
+      toString: () => this.toStringShort()
+    };
+  }
+
+  debugFillProperties(properties) {
+    if (this.key !== null && this.key !== undefined) {
+      properties.push({ name: 'key', value: this.key });
+    }
+  }
+
+  debugInfo() {
+    const properties = [];
+    this.debugFillProperties(properties);
+
+    return {
+      type: this.constructor.name,
+      key: this.key || null,
+      properties: properties,
+      style: this.style || DiagnosticsTreeStyle.sparse,
+      description: this.toStringShort()
+    };
+  }
+
+  toString() {
+    if (process.env.NODE_ENV === 'development') {
+      const info = this.debugInfo();
+      if (info.properties.length === 0) {
+        return this.toStringShort();
+      }
+      const propsStr = info.properties
+        .map(p => `${p.name}: ${p.value}`)
+        .join(', ');
+      return `${this.toStringShort()} { ${propsStr} }`;
+    }
+    return this.toStringShort();
+  }
+}
+
+
+// ✅ Helper function to check if something is a REAL VNode
+function isRealVNode(obj) {
+  if (!obj || typeof obj !== 'object') {
+    return false;
+  }
+
+  // Check for VNode properties AND structure
+  const hasTag = typeof obj.tag === 'string';  // ✅ tag must be STRING (HTML tag name)
+  const hasChildren = Array.isArray(obj.children) || obj.children === null || obj.children === undefined;
+  const hasProps = obj.props === null || obj.props === undefined || typeof obj.props === 'object';
+
+  // VNode should NOT have build() or createState() or createElement() methods
+  const isNotWidget = typeof obj.build !== 'function' &&
+    typeof obj.createState !== 'function' &&
+    typeof obj.createElement !== 'function';
+
+  // All conditions must be true
+  return hasTag && hasChildren && hasProps && isNotWidget;
+}
+
+// ✅ Helper function to check if something is a Widget
+function isWidget(obj) {
+  if (!obj || typeof obj !== 'object') {
+    return false;
+  }
+
+  return (
+    typeof obj.build === 'function' ||
+    typeof obj.createState === 'function' ||
+    typeof obj.render === 'function' ||
+    typeof obj.createElement === 'function' // ✅ Added for ProxyWidgets (SizedBox, ConstrainedBox)
+  );
+}
+
+
+/**
+ * Base Element Class
+ */
+class Element extends Diagnosticable {
+  constructor(widget, parent = null, runtime = null) {
+    super();
+
+    if (!widget) {
+      throw new Error('Widget is required for Element creation');
+    }
+
+    if (!runtime) {
+      throw new Error('RUNTIME IS UNDEFINED! Runtime is required for Element creation');
+    }
+
+    this._widget = widget;
+    this._parent = parent;
+    this.runtime = runtime;
+
+    this._children = [];
+    this._childMap = new Map();
+
+    this._vnode = null;
+    this._domNode = null;
+
+    this._mounted = false;
+    this._dirty = false;
+    this._building = false;
+    this._shouldPatch = true; // Default to true, subclasses/build will disable if delegating
+
+    this._depth = parent ? (parent._depth || 0) + 1 : 0;
+
+    this.key = widget.key;
+    this._id = `el_${Element._nextId++}`;
+
+    this._buildCount = 0;
+    this._lastBuildTime = 0;
+    this._lastBuildDuration = 0;
+
+    this._context = null;
+  }
+
+  // ============================================================================
+  // PROPERTIES
+  // ============================================================================
+
+  get widget() {
+    return this._widget;
+  }
+
+  set widget(newWidget) {
+    this._widget = newWidget;
+  }
+
+  get parent() {
+    return this._parent;
+  }
+
+  set parent(p) {
+    this._parent = p;
+  }
+
+  get children() {
+    return this._children;
+  }
+
+  get depth() {
+    return this._depth;
+  }
+
+  get id() {
+    return this._id;
+  }
+
+  get mounted() {
+    return this._mounted;
+  }
+
+  get dirty() {
+    return this._dirty;
+  }
+
+  get building() {
+    return this._building;
+  }
+
+  get vnode() {
+    return this._vnode;
+  }
+
+  set vnode(v) {
+    this._vnode = v;
+  }
+
+  get domNode() {
+    return this._domNode;
+  }
+
+  set domNode(d) {
+    this._domNode = d;
+  }
+
+  get context() {
+    if (!this._context) {
+      this._context = new BuildContext(this, this.runtime);
+    }
+    return this._context;
+  }
+
+  // ✅ BuildContext Interface Implementation (Delegation)
+  dependOnInheritedWidgetOfExactType(Type) {
+    return this.context.dependOnInheritedWidgetOfExactType(Type);
+  }
+
+  findAncestorWidgetOfExactType(Type) {
+    return this.context.findAncestorWidgetOfExactType(Type);
+  }
+
+  findAncestorStateOfType(Type) {
+    return this.context.findAncestorStateOfType(Type);
+  }
+
+  // ============================================================================
+  // CORE METHODS
+  // ============================================================================
+
+  getElementId() {
+    return this._id;
+  }
+
+  getWidgetPath() {
+    if (this._widgetPath) return this._widgetPath;
+
+    const name = this.widget?.constructor?.name || 'Unknown';
+    const parentPath = this.parent?.getWidgetPath ? this.parent.getWidgetPath() : '';
+
+    this._widgetPath = parentPath ? `${parentPath}/${name}` : name;
+    return this._widgetPath;
+  }
+
+  getIdentificationStrategy() {
+    return this.key ? 'key' : 'id';
+  }
+
+  performRebuild() {
+    throw new Error(`${this.constructor.name}.performRebuild() must be implemented by subclass`);
+  }
+
+  mount(parent = null) {
+    if (this._mounted) {
+      console.warn(`[Element] ${this._id} already mounted`);
+      return;
+    }
+
+    try {
+      this._mounted = true;
+
+      if (parent) {
+        this._parent = parent;
+        this._depth = (parent._depth || 0) + 1;
+      }
+
+      // Register with GlobalKey if widget has one
+      if (this._widget && this._widget.key && this._widget.key._currentElement !== undefined) {
+        this._widget.key._currentElement = this;
+      }
+
+      this._vnode = this.performRebuild();
+
+      this._children.forEach(child => {
+        if (!child._mounted) {
+          child.mount(this);
+        }
+      });
+
+      this.didMount();
+
+      // Mark that initial mount is complete
+      // This prevents applyChanges from running on the first rebuild after mount
+      this._initialMountComplete = true;
+    } catch (error) {
+      this._mounted = false;
+      throw new Error(`Failed to mount ${this.constructor.name}: ${error.message}`);
+    }
+  }
+
+  rebuild() {
+    if (!this._mounted) {
+      if (DEBUG) console.warn(`[Element] Cannot rebuild unmounted element ${this._id}`);
+      return;
+    }
+
+    if (this._building) {
+      if (DEBUG) console.warn(`[Element] Recursive rebuild detected for ${this._id}`);
+      return;
+    }
+
+    try {
+      this._building = true;
+
+      const oldVNode = this._vnode;
+      this._vnode = this.performRebuild();
+
+      // Only apply changes if this element is responsible for patching
+      // AND this is not the first rebuild after mount
+      if (this._shouldPatch && this._initialMountComplete) {
+        this.applyChanges(oldVNode, this._vnode);
+      } else {
+        // If delegating, we still need to update our DOM reference from the child's result
+        if (this._vnode && this._vnode._element) {
+          this._domNode = this._vnode._element;
+        }
+      }
+
+      this._dirty = false; // Mark clean regardless
+    } catch (error) {
+      console.error(`[Element] Rebuild failed for ${this._id}:`, error);
+      throw error;
+    } finally {
+      this._building = false;
+    }
+  }
+
+  applyChanges(oldVNode, newVNode) {
+    // Handle case where BOTH VNodes have no DOM elements
+    if (this._hasAppliedChanges && oldVNode && newVNode && !oldVNode?._element && !newVNode?._element && this.runtime.renderer) {
+      const childrenChanged = oldVNode.children?.length !== newVNode.children?.length;
+
+      if (childrenChanged) {
+        try {
+          let targetElement = this._domNode;
+
+          if (!targetElement && this._parent) {
+            targetElement = this._parent._domNode;
+          }
+
+          if (!targetElement) {
+            const rootElement = document.getElementById('root');
+            if (rootElement && rootElement.firstChild) {
+              targetElement = rootElement.firstChild;
+            }
+          }
+
+          if (targetElement) {
+            targetElement.innerHTML = '';
+            this.runtime.renderer.render(newVNode, targetElement);
+
+            newVNode._element = targetElement.firstChild;
+            if (newVNode._element) {
+              newVNode._element._vnode = newVNode;
+              this._domNode = newVNode._element;
+            }
+            return;
+          }
+        } catch (error) {
+          console.error(`[Element] Failed to re-render:`, error);
+        }
+      }
+    }
+
+    // Handle case where widget type changes
+    if (this._mounted && oldVNode && oldVNode._element && !newVNode._element && this.runtime.renderer) {
+      if (oldVNode.tag !== newVNode.tag) {
+        try {
+          const oldDomNode = oldVNode._element;
+          const parentNode = oldDomNode.parentNode;
+
+          if (parentNode) {
+            const tempContainer = document.createElement('div');
+            this.runtime.renderer.render(newVNode, tempContainer);
+            const newDomNode = tempContainer.firstChild;
+
+            if (newDomNode) {
+              parentNode.replaceChild(newDomNode, oldDomNode);
+              newVNode._element = newDomNode;
+              newDomNode._vnode = newVNode;
+
+              if (this._domNode === oldDomNode) {
+                this._domNode = newDomNode;
+              }
+              return;
+            }
+          }
+        } catch (error) {
+          console.error(`[Element] Failed to replace DOM:`, error);
+        }
+      }
+    }
+
+    // DIRECT DOM PATCHING to preserve state
+    if (oldVNode && oldVNode._element && this.runtime.renderer) {
+      if (oldVNode._element.parentNode) {
+        try {
+          const domNode = oldVNode._element;
+          const parent = domNode.parentNode;
+          const index = Array.from(parent.childNodes).indexOf(domNode);
+
+          if (index !== -1) {
+            const patches = VNodeDiffer.diff(oldVNode, newVNode, index);
+
+            if (patches.length > 0) {
+              // Pass the renderer to PatchApplier so it can create SVGs correctly
+              const result = PatchApplier.apply(parent, patches, {
+                renderer: this.runtime.renderer
+              });
+
+              if (!result.success) {
+                console.error('[Element] PatchApplier failed:', result.errors);
+              }
+
+              if (!newVNode._element) {
+                newVNode._element = oldVNode._element;
+              }
+
+              if (this._domNode === domNode) {
+                this._domNode = newVNode._element;
+              }
+            } else {
+              newVNode._element = oldVNode._element;
+              if (newVNode._element) {
+                newVNode._element._vnode = newVNode;
+              }
+            }
+            return;
+          }
+        } catch (e) {
+          if (DEBUG) console.warn('[Element] Diffing failed, falling back to replace', e);
+        }
+      }
+
+      // FALLBACK: Coarse-grained update
+      try {
+        const newDomNode = this.runtime.renderer.replaceElement(oldVNode._element, newVNode);
+
+        if (this._domNode === oldVNode._element) {
+          this._domNode = newDomNode;
+        }
+      } catch (e) {
+        console.error(`[Element] Failed to patch DOM for ${this._id}:`, e);
+      }
+    }
+
+    this._hasAppliedChanges = true;
+  }
+
+  markNeedsBuild() {
+    if (this._dirty) {
+      return;
+    }
+
+    if (!this._mounted) {
+      if (DEBUG) console.warn(`[Element] Cannot mark unmounted element ${this._id} dirty`);
+      return;
+    }
+
+    this._dirty = true;
+
+    if (this.runtime && this.runtime.markNeedsBuild) {
+      this.runtime.markNeedsBuild(this);
+    }
+  }
+
+  unmount() {
+    if (!this._mounted) {
+      return;
+    }
+
+    try {
+      this.willUnmount();
+
+      // Unregister from GlobalKey if present
+      if (this._widget && this._widget.key && this._widget.key._currentElement === this) {
+        this._widget.key._currentElement = null;
+      }
+
+      this._children.forEach(child => {
+        if (child._mounted) {
+          child.unmount();
+        }
+      });
+
+      this._children = [];
+      this._childMap.clear();
+      this._vnode = null;
+      this._domNode = null;
+
+      this._mounted = false;
+      this._dirty = false;
+
+      this.didUnmount();
+    } catch (error) {
+      console.error(`[Element] Unmount failed for ${this._id}:`, error);
+    }
+  }
+
+  updateWidget(newWidget) {
+    if (!newWidget) {
+      throw new Error('New widget is required for update');
+    }
+
+    const oldWidget = this._widget;
+    this.widget = newWidget;
+
+    if (this.shouldRebuild(oldWidget, newWidget)) {
+      this.markNeedsBuild();
+    }
+
+    this.didUpdateWidget(oldWidget, newWidget);
+  }
+
+  shouldRebuild(oldWidget, newWidget) {
+    if (oldWidget === newWidget) {
+      return false;
+    }
+
+    if (oldWidget.constructor !== newWidget.constructor) {
+      return true;
+    }
+
+    return !this.areWidgetsEqual(oldWidget, newWidget);
+  }
+
+  areWidgetsEqual(w1, w2) {
+    if (w1.constructor !== w2.constructor) {
+      return false;
+    }
+
+    const keys1 = Object.keys(w1);
+    const keys2 = Object.keys(w2);
+
+    if (keys1.length !== keys2.length) {
+      return false;
+    }
+
+    return keys1.every(key => {
+      const val1 = w1[key];
+      const val2 = w2[key];
+
+      if (typeof val1 === 'function' && typeof val2 === 'function') {
+        return true;
+      }
+
+      if (typeof val1 === 'object' && typeof val2 === 'object') {
+        // Avoid JSON.stringify on potential circular structures (like Widgets with parent refs or DOM nodes)
+        if (val1 === val2) return true;
+
+        // Shallow compare keys for simple objects
+        if (!val1 || !val2) return val1 === val2;
+        const k1 = Object.keys(val1);
+        const k2 = Object.keys(val2);
+        if (k1.length !== k2.length) return false;
+
+        // Only compare first level to avoid recursion/circles
+        // return k1.every(k => val1[k] === val2[k]);
+        return false; // Conservatively return false for complex objects to force rebuild if not strictly equal
+      }
+
+      return val1 === val2;
+    });
+  }
+
+  addChild(child) {
+    if (!child) {
+      throw new Error('Child element is required');
+    }
+
+    this._children.push(child);
+
+    if (child.key) {
+      this._childMap.set(child.key, child);
+    }
+
+    child.parent = this;
+  }
+
+  removeChild(child) {
+    const index = this._children.indexOf(child);
+
+    if (index !== -1) {
+      this._children.splice(index, 1);
+    }
+
+    if (child.key) {
+      this._childMap.delete(child.key);
+    }
+
+    child.parent = null;
+  }
+
+  findChildByKey(key) {
+    return this._childMap.get(key);
+  }
+
+  findAncestorOfType(ElementType) {
+    let current = this._parent;
+
+    while (current) {
+      if (current instanceof ElementType) {
+        return current;
+      }
+      current = current._parent;
+    }
+
+    return null;
+  }
+
+  visitAncestors(visitor) {
+    let current = this._parent;
+
+    while (current) {
+      const shouldContinue = visitor(current);
+      if (shouldContinue === false) {
+        break;
+      }
+      current = current._parent;
+    }
+  }
+
+  // ============================================================================
+  // LIFECYCLE HOOKS
+  // ============================================================================
+
+  didMount() {
+    // Override in subclasses
+  }
+
+  didUpdateWidget(oldWidget, newWidget) {
+    // Override in subclasses
+  }
+
+  willUnmount() {
+    // Override in subclasses
+  }
+
+  didUnmount() {
+    // Override in subclasses
+  }
+
+  reassemble() {
+    // Override in subclasses
+  }
+
+  activate() {
+    // Override in subclasses
+  }
+
+  deactivate() {
+    // Override in subclasses
+  }
+
+  didChangeDependencies() {
+    // Override in subclasses
+  }
+
+  // ============================================================================
+  // UTILITIES
+  // ============================================================================
+
+  getStats() {
+    return {
+      id: this._id,
+      type: this.constructor.name,
+      mounted: this._mounted,
+      dirty: this._dirty,
+      depth: this._depth,
+      childCount: this._children.length,
+      buildCount: this._buildCount,
+      lastBuildDuration: this._lastBuildDuration,
+      hasKey: !!this.key
+    };
+  }
+
+  static generateId() {
+    return `el_${++Element._counter}`;
+  }
+
+  static resetCounter() {
+    Element._counter = 0;
+  }
+}
+
+Element._counter = 0;
+
+/**
+ * StatelessElement - FIXED VERSION
+ * 
+ * ✅ KEY FIX: Returns result from widget.build(), NOT the Element
+ */
+class StatelessElement extends Element {
+  constructor(widget, parent, runtime) {
+    super(widget, parent, runtime);
+  }
+
+  /**
+   * Build the widget and return the result
+   * ✅ CRITICAL: Use strict VNode detection
+   */
+  build() {
+    const context = this.buildContext();
+
+    try {
+      const result = this.widget.build(context);
+
+      if (!result) {
+        throw new Error('StatelessWidget.build() returned null');
+      }
+
+      // STRICT CHECK: Use isRealVNode() instead of just checking .tag
+      if (isRealVNode(result)) {
+        this._shouldPatch = true;
+        return result;
+      }
+
+      // Check if it's a string/number/primitive
+      if (typeof result === 'string' || typeof result === 'number' || typeof result === 'boolean') {
+        this._shouldPatch = true;
+        return result;
+      }
+
+      // Check if it's a Widget (has build method or createState)
+      if (isWidget(result)) {
+        let childElement = this._children[0];
+
+        // RECONCILIATION: Check if we can reuse the existing element
+        if (childElement && childElement.widget.constructor === result.constructor && childElement.widget.key === result.key) {
+          childElement.updateWidget(result);
+
+          if (childElement.dirty) {
+            childElement.rebuild();
+          }
+
+          return childElement.vnode;
+        }
+
+        // Cannot reuse: Unmount old child if exists
+        if (childElement) {
+          childElement.unmount();
+          this._children = [];
+        }
+
+        this._shouldPatch = true;
+
+        // Create element for this widget
+        childElement = this._createElementForWidget(result);
+
+        // Add to children array so unmount() works
+        this._children = [childElement];
+
+        // Use mount() to properly initialize the child element
+        childElement.mount(this);
+
+        const childVNode = childElement.vnode;
+
+        if (!childVNode) {
+          throw new Error('Child element.build() returned null');
+        }
+
+        return childVNode;
+      }
+
+      // If we get here, it's an unknown type
+      throw new Error(
+        `Invalid build() return type from ${this.widget.constructor.name}. ` +
+        `Expected: Widget, VNode, string, number, or null. ` +
+        `Got: ${result?.constructor?.name} with tag="${result?.tag}"`
+      );
+
+    } catch (error) {
+      throw new Error(`StatelessWidget build failed: ${error.message}`);
+    }
+  }
+
+  /**
+   * Helper to create appropriate element type for a widget
+   * @private
+   */
+  _createElementForWidget(widget) {
+    // Use widget's createElement if available (InheritedWidget uses this)
+    if (widget && typeof widget.createElement === 'function') {
+      return widget.createElement(this, this.runtime);
+    }
+
+    if (typeof widget.createState === 'function') {
+      return new StatefulElement(widget, this, this.runtime);
+    } else if (widget.updateShouldNotify && typeof widget.updateShouldNotify === 'function') {
+      throw new Error(
+        `InheritedWidget "${widget.constructor.name}" must define createElement() method. ` +
+        `Extend InheritedWidget class properly.`
+      );
+    } else {
+      return new StatelessElement(widget, this, this.runtime);
+    }
+  }
+
+  buildContext() {
+    return new BuildContext(this, this.runtime);
+  }
+
+  /**
+   * ✅ CRITICAL: Implement performRebuild() to satisfy Element.mount() contract
+   * This method is called by Element.mount() and must return a VNode
+   */
+  performRebuild() {
+    return this.build();
+  }
+}
+
+/**
+ * StatefulElement - FIXED VERSION
+ * 
+ * ✅ CRITICAL FIX: mount() now calls state._mount(this)
+ * This properly initializes state._widget so this.widget works
+ */
+class StatefulElement extends Element {
+  constructor(widget, parent, runtime) {
+    super(widget, parent, runtime);
+
+    if (!widget.createState || typeof widget.createState !== 'function') {
+      throw new Error('StatefulWidget must implement createState()');
+    }
+
+    this.state = widget.createState();
+
+    if (!this.state) {
+      throw new Error('createState() returned null or undefined');
+    }
+
+    // ✅ Set initial references (but _mount will do the proper initialization)
+    this.state._element = this;
+    this.state._widget = widget;
+    this.state._mounted = false;
+  }
+
+  build() {
+    const context = this.buildContext();
+
+    try {
+      if (!this.state.build || typeof this.state.build !== 'function') {
+        throw new Error('State must implement build() method');
+      }
+
+      const result = this.state.build(context);
+
+      if (!result) {
+        throw new Error('State.build() returned null');
+      }
+
+      // STRICT CHECK: Use isRealVNode()
+      if (isRealVNode(result)) {
+        this._shouldPatch = true;
+        return result;
+      }
+
+      // Check if it's a primitive
+      if (typeof result === 'string' || typeof result === 'number' || typeof result === 'boolean') {
+        this._shouldPatch = true;
+        return result;
+      }
+
+      // Check if it's a widget and build recursively
+      let childElement = this._children[0];
+
+      if (isWidget(result)) {
+        // RECONCILIATION: Check if we can reuse the existing element
+        if (childElement && childElement.widget.constructor === result.constructor && childElement.widget.key === result.key) {
+          childElement.updateWidget(result);
+
+          if (childElement.dirty) {
+            childElement.rebuild();
+          }
+
+          this._shouldPatch = false;
+          return childElement.vnode;
+        }
+
+        // Cannot reuse: Unmount old child if exists
+        if (childElement) {
+          childElement.unmount();
+          this._children = [];
+        }
+
+        this._shouldPatch = true;
+
+        childElement = this._createElementForWidget(result);
+
+        // Add to children array so unmount() works
+        this._children = [childElement];
+
+        // Use mount() to properly initialize the child element
+        childElement.mount(this);
+
+        const childVNode = childElement.vnode;
+
+        if (!childVNode) {
+          throw new Error('Child element.build() returned null');
+        }
+
+        return childVNode;
+      }
+
+      this._shouldPatch = false;
+      return childElement ? childElement.vnode : result;
+
+    } catch (error) {
+      throw new Error(`StatefulWidget build failed: ${error.message}`);
+    }
+  }
+
+  _createElementForWidget(widget) {
+    // Use widget's createElement if available
+    if (widget && typeof widget.createElement === 'function') {
+      return widget.createElement(this, this.runtime);
+    }
+
+    if (typeof widget.createState === 'function') {
+      return new StatefulElement(widget, this, this.runtime);
+    } else if (widget.updateShouldNotify && typeof widget.updateShouldNotify === 'function') {
+      return new InheritedElement(widget, this, this.runtime);
+    } else {
+      return new StatelessElement(widget, this, this.runtime);
+    }
+  }
+
+  /**
+   * CRITICAL FIX: Call state._mount() to properly initialize state
+   */
+  mount() {
+    if (this._mounted) {
+      return;
+    }
+
+    // Call state._mount() if available
+    if (this.state._mount && typeof this.state._mount === 'function') {
+      this.state._mount(this);
+    } else {
+      // Fallback for old State implementations that don't have _mount()
+      this.state._element = this;
+      this.state._widget = this.widget;
+      this.state._mounted = true;
+
+      // Call initState manually
+      if (this.state.initState && typeof this.state.initState === 'function') {
+        try {
+          this.state.initState();
+        } catch (error) {
+          console.error(`[StatefulElement] initState failed:`, error);
+        }
+      }
+    }
+
+    // Call parent mount
+    super.mount();
+  }
+
+  buildContext() {
+    return new BuildContext(this, this.runtime, this.state);
+  }
+
+  /**
+   * Update widget reference when widget changes
+   */
+  updateWidget(newWidget) {
+    const oldWidget = this._widget;
+
+    // Update element's widget
+    super.updateWidget(newWidget);
+
+    // Update state's widget reference
+    if (this.state._updateWidget && typeof this.state._updateWidget === 'function') {
+      this.state._updateWidget(newWidget);
+    } else {
+      // Fallback
+      this.state._widget = newWidget;
+    }
+
+    // Call state's didUpdateWidget
+    if (this.state.didUpdateWidget && typeof this.state.didUpdateWidget === 'function') {
+      try {
+        this.state.didUpdateWidget(oldWidget);
+      } catch (error) {
+        console.error('[StatefulElement] didUpdateWidget failed:', error);
+      }
+    }
+  }
+
+  /**
+   * Properly unmount state
+   */
+  unmount() {
+    // Call state._unmount if available
+    if (this.state._unmount && typeof this.state._unmount === 'function') {
+      this.state._unmount();
+    }
+
+    // Call state.dispose
+    if (this.state._dispose && typeof this.state._dispose === 'function') {
+      this.state._dispose();
+    }
+
+    super.unmount();
+  }
+
+  /**
+   * CRITICAL: Implement performRebuild() to satisfy Element.mount() contract
+   */
+  performRebuild() {
+    return this.build();
+  }
+}
+
+/**
+ * ComponentElement - Custom components
+ */
+class ComponentElement extends Element {
+  constructor(widget, parent, runtime) {
+    super(widget, parent, runtime);
+    this.componentState = {};
+  }
+
+  build() {
+    const method = this.widget.render || this.widget.build;
+
+    if (!method || typeof method !== 'function') {
+      throw new Error('ComponentElement widget must have render() or build() method');
+    }
+
+    const context = this.buildContext();
+
+    try {
+      const result = method.call(this.widget, context);
+
+      // ✅ Check if VNode
+      if (result && typeof result === 'object' && result.tag) {
+        return result;
+      }
+
+      if (typeof result === 'string' || typeof result === 'number') {
+        return result;
+      }
+
+      const isWidget = result &&
+        typeof result === 'object' &&
+        (typeof result.build === 'function' || typeof result.createState === 'function');
+
+      if (isWidget) {
+        const childElement = this._createElementForWidget(result);
+
+        childElement._parent = this;
+        childElement._depth = this._depth + 1;
+        childElement._mounted = true;
+
+        return childElement.build();
+      }
+
+      return result;
+    } catch (error) {
+      throw new Error(`Component build failed: ${error.message}`);
+    }
+  }
+
+  _createElementForWidget(widget) {
+    // ✅ Use widget's createElement if available
+    if (widget && typeof widget.createElement === 'function') {
+      return widget.createElement(this, this.runtime);
+    }
+
+    if (typeof widget.createState === 'function') {
+      return new StatefulElement(widget, this, this.runtime);
+    } else {
+      return new StatelessElement(widget, this, this.runtime);
+    }
+  }
+
+  buildContext() {
+    return {
+      element: this,
+      runtime: this.runtime,
+      widget: this.widget,
+      state: this.componentState,
+
+      setState: (updates) => {
+        Object.assign(this.componentState, updates);
+        this.markNeedsBuild();
+      }
+    };
+  }
+
+  /**
+   * ✅ CRITICAL: Implement performRebuild() to satisfy Element.mount() contract
+   * This method is called by Element.mount() and must return a VNode
+   */
+  performRebuild() {
+    return this.build();
+  }
+}
+
+// Initialize static ID counter
+Element._nextId = 0;
+
+export {
+  Element,
+  StatelessElement,
+  StatefulElement,
+  ComponentElement,
+  DiagnosticLevel,
+  isRealVNode, isWidget
+};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/src/event_system.js b/packages/flutterjs_runtime/flutterjs_runtime/src/event_system.js
similarity index 100%
rename from packages/flutterjs_engine/src/runtime/src/event_system.js
rename to packages/flutterjs_runtime/flutterjs_runtime/src/event_system.js
diff --git a/packages/flutterjs_runtime/flutterjs_runtime/src/flutterjs_runtime.js b/packages/flutterjs_runtime/flutterjs_runtime/src/flutterjs_runtime.js
new file mode 100644
index 00000000..a69e891f
--- /dev/null
+++ b/packages/flutterjs_runtime/flutterjs_runtime/src/flutterjs_runtime.js
@@ -0,0 +1,1321 @@
+/**
+ * FlutterJS Runtime - Complete Production Version
+ * 
+ * FIXED: Handles both Widget and VNode inputs correctly
+ */
+
+import {
+  VNodeRuntime,
+  runApp as coreRunApp,
+  getRuntime as coreGetRuntime,
+  updateApp as coreUpdateApp,
+  getMetrics as coreGetMetrics,
+  hotReload as coreHotReload,
+  renderToString as coreRenderToString,
+  hydrate as coreHydrate
+} from '@flutterjs/vdom/runtime_index';
+
+import {
+  StatelessElement,
+  StatefulElement,
+  ComponentElement
+} from '@flutterjs/runtime/element';
+import { InheritedElement } from '@flutterjs/runtime/inherited_element';
+import { VNodeBuilder } from '@flutterjs/vdom/vnode_builder';
+import { VNodeRenderer } from '@flutterjs/vdom/vnode_renderer';
+import { DateTime } from './datetime.js';
+
+// ============================================================================
+// UTILITIES
+// ============================================================================
+
+function isBrowser() {
+  return typeof window !== 'undefined' && typeof document !== 'undefined';
+}
+
+function isSSR() {
+  return typeof window === 'undefined';
+}
+
+function escapeHtml(text) {
+  const map = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#039;'
+  };
+  return String(text).replace(/[&<>"']/g, m => map[m]);
+}
+
+function generateId() {
+  return `fjs-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+function deepMerge(target, ...sources) {
+  if (!sources.length) return target;
+  const source = sources.shift();
+
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} });
+        deepMerge(target[key], source[key]);
+      } else {
+        Object.assign(target, { [key]: source[key] });
+      }
+    }
+  }
+
+  return deepMerge(target, ...sources);
+}
+
+function isObject(item) {
+  return item && typeof item === 'object' && !Array.isArray(item);
+}
+
+/**
+ * Check if input is a VNode (already built)
+ */
+function isVNode(obj) {
+  return obj && (
+    // Must have a tag property (HTML element name)
+    obj.tag !== undefined &&
+    // Should have props and/or children (VNode structure)
+    (obj.props !== undefined || obj.children !== undefined) &&
+    // Should NOT have widget-specific properties
+    obj.build === undefined &&
+    obj.createState === undefined &&
+    obj.createElement === undefined
+  );
+}
+
+/**
+ * Check if input is a Widget (needs building)
+ */
+function isWidget(obj) {
+  return obj && (
+    typeof obj.build === 'function' ||
+    typeof obj.createState === 'function' ||
+    typeof obj.render === 'function' ||
+    typeof obj.createElement === 'function'
+  );
+}
+
+// ============================================================================
+// ENHANCED RUNTIME CLASS
+// ============================================================================
+
+export class FlutterJSRuntime extends VNodeRuntime {
+  constructor(options = {}) {
+    super();
+
+    // ✅ Polyfill global print if implicit
+    if (typeof window !== 'undefined' && !window.dartPrint) {
+      window.dartPrint = (msg) => console.log(msg);
+      // Also map standard print if not native
+      if (!window.print || window.print === window.constructor.prototype.print) {
+        console.log("[FlutterJSRuntime] Polyfilling window.print for Dart");
+        window.print = window.dartPrint;
+      }
+    }
+
+    // ✅ Polyfill global double type for Dart compatibility
+    if (typeof window !== 'undefined' && !window.double) {
+      window.double = {
+        infinity: Infinity,
+        maxFinite: 1.7976931348623157e+308,
+        minPositive: 5e-324,
+        nan: NaN,
+        negativeInfinity: -Infinity,
+        parse: (value) => parseFloat(value),
+        tryParse: (value) => {
+          const result = parseFloat(value);
+          return isNaN(result) ? null : result;
+        }
+      };
+    }
+
+    // ✅ Polyfill global DateTime for Dart compatibility
+    if (typeof window !== 'undefined' && !window.DateTime) {
+      window.DateTime = DateTime;
+    } else if (typeof global !== 'undefined' && !global.DateTime) {
+      global.DateTime = DateTime;
+    }
+
+    // Additional Flutter-specific configuration
+    this.flutterConfig = {
+      debugMode: options.debugMode || false,
+      enableHotReload: options.enableHotReload !== false,
+      enableStateTracking: options.enableStateTracking !== false,
+      enablePerformanceTracking: options.enablePerformanceTracking !== false,
+      enableErrorBoundaries: options.enableErrorBoundaries !== false,
+      target: options.target || 'web',
+      isBrowser: isBrowser(),
+      isSSR: isSSR(),
+      strictMode: options.strictMode || false,
+      ...options
+    };
+
+    // Track initialization state
+    this.initialized = false;
+    this.mounted = false;
+
+    // Store original input for rebuilds
+    this.originalInput = null;
+    this.inputType = null; // 'widget' or 'vnode'
+
+    // Element registry for tracking all created elements
+    this.elementRegistry = new Map();
+
+    // Widget instance cache
+    this.widgetCache = new WeakMap();
+
+    // Error boundary stack
+    this.errorBoundaries = [];
+
+    // Lifecycle callbacks
+    this.lifecycleCallbacks = {
+      onElementCreated: [],
+      onElementMounted: [],
+      onElementUpdated: [],
+      onElementUnmounted: [],
+      onError: [],
+      onStateChange: []
+    };
+
+    // Performance tracking
+    this.performanceMarks = new Map();
+
+    // Setup error handling
+    this.setupErrorHandling();
+
+    if (this.flutterConfig.debugMode) {
+      console.log('[FlutterJSRuntime] ✅ Enhanced runtime created', {
+        environment: this.flutterConfig.isBrowser ? 'browser' : 'server',
+        hotReload: this.flutterConfig.enableHotReload,
+        strictMode: this.flutterConfig.strictMode
+      });
+    }
+  }
+
+  // ============================================================================
+  // INITIALIZE METHOD
+  // ============================================================================
+
+  initialize(options = {}) {
+    if (this.initialized) {
+      if (this.flutterConfig.debugMode) {
+        console.log('[FlutterJSRuntime] ⚠️  Already initialized, skipping');
+      }
+      return this;
+    }
+
+    const startTime = performance.now();
+
+    try {
+      // Initialize dirty elements set
+      this.dirtyElements = new Set();
+      this.isBatchSchedulled = false;
+
+      if (this.flutterConfig.debugMode) {
+        console.log('[FlutterJSRuntime] 🔧 Initializing runtime...');
+      }
+
+      // Store root element if provided
+      if (options.rootElement) {
+        this.rootElement = options.rootElement;
+
+        if (this.flutterConfig.debugMode) {
+          console.log('[FlutterJSRuntime] 📍 Root element set:', this.rootElement.id || this.rootElement.tagName);
+        }
+      }
+
+      // Validate browser environment if root element expected
+      if (this.flutterConfig.isBrowser && !this.rootElement) {
+        console.warn('[FlutterJSRuntime] ⚠️  No root element provided in browser mode');
+      }
+
+      // Mark as initialized
+      this.initialized = true;
+
+      const initTime = performance.now() - startTime;
+
+      if (this.flutterConfig.debugMode) {
+        console.log(`[FlutterJSRuntime] ✅ Initialized in ${initTime.toFixed(2)}ms`);
+      }
+
+      return this;
+
+    } catch (error) {
+      this.handleError('initialize', error, { options });
+      throw error;
+    }
+  }
+
+  // ============================================================================
+  // CORE FLUTTER WIDGET SYSTEM METHODS
+  // ============================================================================
+
+  createElement(widget, parent = null) {
+    if (!widget) {
+      throw new Error('[FlutterJSRuntime.createElement] Widget is required');
+    }
+
+    const startTime = this.flutterConfig.enablePerformanceTracking
+      ? performance.now()
+      : 0;
+
+    try {
+      if (this.flutterConfig.debugMode) {
+        console.log('[FlutterJSRuntime.createElement] Creating element for:', widget.constructor.name);
+      }
+
+      let element = null;
+
+      // Check widget cache first
+      if (this.widgetCache.has(widget)) {
+        const cachedElement = this.widgetCache.get(widget);
+        if (cachedElement && !cachedElement.unmounted) {
+          if (this.flutterConfig.debugMode) {
+            console.log('[FlutterJSRuntime.createElement] Using cached element');
+          }
+          return cachedElement;
+        }
+      }
+
+      // Determine widget type and create appropriate element
+
+      if (this.isStatelessWidget(widget)) {
+        if (this.flutterConfig.debugMode) {
+          console.log('[FlutterJSRuntime.createElement] → StatelessElement');
+        }
+        element = new StatelessElement(widget, parent, this);
+      }
+      else if (this.isStatefulWidget(widget)) {
+        if (this.flutterConfig.debugMode) {
+          console.log('[FlutterJSRuntime.createElement] → StatefulElement');
+        }
+        element = new StatefulElement(widget, parent, this);
+      }
+      else if (this.isInheritedWidget(widget)) {
+        if (this.flutterConfig.debugMode) {
+          console.log('[FlutterJSRuntime.createElement] → InheritedElement');
+        }
+        element = new InheritedElement(widget, parent, this);
+      }
+      else if (this.isComponentWidget(widget)) {
+        if (this.flutterConfig.debugMode) {
+          console.log('[FlutterJSRuntime.createElement] → ComponentElement');
+        }
+        element = new ComponentElement(widget, parent, this);
+      }
+      else if (typeof widget.createElement === 'function') {
+        if (this.flutterConfig.debugMode) {
+          console.log('[FlutterJSRuntime.createElement] → Custom createElement');
+        }
+        element = widget.createElement(parent, this);
+      }
+      else {
+        throw new Error(
+          `[FlutterJSRuntime.createElement] Unknown widget type: ${widget.constructor.name}. ` +
+          `Widget must be StatelessWidget, StatefulWidget, InheritedWidget, or implement createElement().`
+        );
+      }
+
+      // Register element
+      if (element) {
+        const elementId = generateId();
+        element._id = elementId;
+        this.elementRegistry.set(elementId, element);
+
+        // Cache element
+        this.widgetCache.set(widget, element);
+
+        // Trigger lifecycle callback
+        this.triggerLifecycleCallback('onElementCreated', element);
+      }
+
+      // Performance tracking
+      if (this.flutterConfig.enablePerformanceTracking) {
+        const duration = performance.now() - startTime;
+        this.recordPerformance('createElement', widget.constructor.name, duration);
+      }
+
+      return element;
+
+    } catch (error) {
+      this.handleError('createElement', error, { widget, parent });
+      throw error;
+    }
+  }
+
+  isStatelessWidget(widget) {
+    if (!widget) return false;
+    if (widget.constructor.name === 'StatelessWidget') return true;
+    if (widget.constructor.prototype &&
+      widget.constructor.prototype.constructor.name === 'StatelessWidget') {
+      return true;
+    }
+    return typeof widget.build === 'function' &&
+      !widget.createState &&
+      !widget.child &&
+      !widget.updateShouldNotify;
+  }
+
+  isStatefulWidget(widget) {
+    if (!widget) return false;
+    if (widget.constructor.name === 'StatefulWidget') return true;
+    if (widget.constructor.prototype &&
+      widget.constructor.prototype.constructor.name === 'StatefulWidget') {
+      return true;
+    }
+    return typeof widget.createState === 'function';
+  }
+
+  isInheritedWidget(widget) {
+    if (!widget) return false;
+    if (widget.constructor.name === 'InheritedWidget') return true;
+    if (widget.constructor.prototype &&
+      widget.constructor.prototype.constructor.name === 'InheritedWidget') {
+      return true;
+    }
+    return widget.child !== undefined &&
+      typeof widget.updateShouldNotify === 'function';
+  }
+
+  isComponentWidget(widget) {
+    if (!widget) return false;
+    if (typeof widget.render === 'function') return true;
+    return typeof widget.build === 'function' &&
+      typeof widget.createState !== 'function' &&
+      !widget.updateShouldNotify;
+  }
+
+  // ============================================================================
+  // ENHANCED RUNTIME METHODS - KEY FIX HERE
+  // ============================================================================
+
+  /**
+   * ✅ FIXED: runApp now handles both Widget and VNode inputs
+   */
+  runApp(input, options = {}) {
+    try {
+      // Ensure we're initialized first
+      if (!this.initialized) {
+        if (this.flutterConfig.debugMode) {
+          console.log('[FlutterJSRuntime] Auto-initializing before runApp');
+        }
+        this.initialize({ rootElement: this.rootElement || options.rootElement });
+      }
+
+      if (this.flutterConfig.debugMode) {
+        console.log('[FlutterJSRuntime] 🚀 Starting Flutter app...');
+      }
+
+      // Store original input for rebuilds
+      this.originalInput = input;
+
+      // Detect input type
+      const inputIsVNode = isVNode(input);
+      const inputIsWidget = isWidget(input);
+
+      if (this.flutterConfig.debugMode) {
+        console.log('[FlutterJSRuntime] Input type:', {
+          isVNode: inputIsVNode,
+          isWidget: inputIsWidget,
+          constructorName: input?.constructor?.name,
+          hasTag: input?.tag !== undefined,
+          hasBuild: typeof input?.build === 'function'
+        });
+      }
+
+      if (inputIsVNode) {
+        // ✅ CASE 1: Already a VNode - render directly
+        this.inputType = 'vnode';
+
+        if (this.flutterConfig.debugMode) {
+          console.log('[FlutterJSRuntime] 📦 Input is VNode, rendering directly');
+        }
+
+        // ✅ FIX: Set this.app so getMetrics() works
+        this.app = input;
+        this.rootVNode = input;
+
+        // Render to DOM if in browser
+        if (this.flutterConfig.isBrowser && this.rootElement) {
+          if (!this.renderer) {
+            this.renderer = new VNodeRenderer({ debugMode: this.flutterConfig.debugMode });
+          }
+          this.renderer.render(this.rootVNode, this.rootElement, { clear: true });
+        }
+
+        this.mounted = true;
+
+        if (this.flutterConfig.debugMode) {
+          console.log('[FlutterJSRuntime] ✅ VNode rendered directly');
+        }
+
+        return this;
+
+      } else if (inputIsWidget) {
+        // ✅ CASE 2: Widget - build to VNode first, then render
+        this.inputType = 'widget';
+
+        if (this.flutterConfig.debugMode) {
+          console.log('[FlutterJSRuntime] 🔧 Input is Widget, building VNode...');
+        }
+
+        // ✅ FIX: Set this.app so getMetrics() works
+        this.app = input;
+
+        // Create enhanced context with runtime
+        const context = this.createBuildContext({
+          ...options,
+          runtime: this,
+          flutterConfig: this.flutterConfig
+        });
+
+        // Build widget to VNode
+        const vNodeBuilder = new VNodeBuilder({
+          debugMode: this.flutterConfig.debugMode,
+          runtime: this
+        });
+
+        this.rootVNode = vNodeBuilder.build(input, context);
+
+        if (this.flutterConfig.debugMode) {
+          console.log('[FlutterJSRuntime] ✅ VNode built from Widget');
+        }
+
+        // Render to DOM if in browser
+        if (this.flutterConfig.isBrowser && this.rootElement) {
+          if (!this.renderer) {
+            this.renderer = new VNodeRenderer({ debugMode: this.flutterConfig.debugMode });
+          }
+          this.renderer.render(this.rootVNode, this.rootElement, { clear: true });
+        }
+
+        this.mounted = true;
+
+        if (this.flutterConfig.debugMode) {
+          console.log('[FlutterJSRuntime] ✅ Widget rendered to DOM');
+        }
+
+        return this;
+
+      } else {
+        // ✅ CASE 3: Unknown type - error
+        throw new Error(
+          `[FlutterJSRuntime] Invalid input type. Expected Widget or VNode, got: ${typeof input}. ` +
+          `Constructor: ${input?.constructor?.name || 'unknown'}`
+        );
+      }
+
+    } catch (error) {
+      this.handleError('runApp', error, { input, options });
+      throw error;
+    }
+  }
+
+  /**
+   * Override update to handle both Widget and VNode rebuilds
+   */
+  update(updateFn) {
+    try {
+      if (this.flutterConfig.debugMode) {
+        console.log('[FlutterJSRuntime] 🔄 Updating application...');
+      }
+
+      // Execute update function if provided
+      if (updateFn && typeof updateFn === 'function') {
+        updateFn();
+      }
+
+      // Rebuild based on input type
+      if (this.inputType === 'widget' && this.originalInput) {
+        // Rebuild from widget
+        const context = this.createBuildContext({
+          runtime: this,
+          flutterConfig: this.flutterConfig
+        });
+
+        const vNodeBuilder = new VNodeBuilder({
+          debugMode: this.flutterConfig.debugMode,
+          runtime: this
+        });
+
+        const newVNode = vNodeBuilder.build(this.originalInput, context);
+
+        if (this.renderer && this.rootElement) {
+          this.renderer.render(newVNode, this.rootElement, { clear: true });
+        }
+
+        this.rootVNode = newVNode;
+
+      } else if (this.inputType === 'vnode') {
+        // For VNode input, user must provide new VNode
+        console.warn('[FlutterJSRuntime] Cannot auto-rebuild from VNode. Provide new VNode to update().');
+      }
+
+      this.triggerLifecycleCallback('onStateChange', {
+        timestamp: Date.now(),
+        updateFn: updateFn ? updateFn.name : 'anonymous'
+      });
+
+      if (this.flutterConfig.debugMode) {
+        console.log('[FlutterJSRuntime] ✅ Update complete');
+      }
+
+    } catch (error) {
+      this.handleError('update', error, { updateFn });
+      throw error;
+    }
+  }
+
+  /**
+   * Mark an element as needing a rebuild
+   * @param {Element} element - The element to rebuild
+   */
+  markNeedsBuild(element) {
+    if (this.flutterConfig.debugMode) {
+      console.log(`[FlutterJSRuntime] 🏗️ markNeedsBuild called for ${element.widget?.constructor.name}`);
+    }
+
+    if (!this.dirtyElements) {
+      this.dirtyElements = new Set();
+    }
+
+    // ✅ Add to dirty set
+    this.dirtyElements.add(element);
+
+    // ✅ Schedule batch update (microtask)
+    if (!this.isBatchSchedulled) {
+      this.isBatchSchedulled = true;
+      Promise.resolve().then(() => this.processBuildQueue());
+    }
+  }
+
+  /**
+   * Process the build queue and rebuild only dirty elements
+   */
+  processBuildQueue() {
+    if (this.flutterConfig.debugMode) {
+      console.log(`[FlutterJSRuntime] 🔄 Processing build queue (size: ${this.dirtyElements.size})`);
+    }
+
+    this.isBatchSchedulled = false;
+
+    // Snapshot of elements to rebuild
+    const elements = Array.from(this.dirtyElements);
+    this.dirtyElements.clear(); // Clear immediately so new updates can be queued
+
+    // Sort by depth (parents before children) to avoid redundant rebuilds
+    elements.sort((a, b) => (a.depth || 0) - (b.depth || 0));
+
+    for (const element of elements) {
+      // Check if element is still mounted and marked dirty
+      // (It might have been unmounted by a parent rebuild)
+      if (element.mounted && element.dirty) {
+        try {
+          if (this.flutterConfig.debugMode) {
+            console.log(`[FlutterJSRuntime] 🔨 Rebuilding dirty element: ${element.widget?.constructor.name}`);
+          }
+
+          // ✅ Targeted Rebuild:
+          // element.rebuild() calls performRebuild() -> gets new VNode
+          // AND calls applyChanges() -> patches the DOM specifically for this element
+          element.rebuild();
+
+        } catch (e) {
+          console.error(`[FlutterJSRuntime] Error rebuilding element ${element.widget?.constructor.name}:`, e);
+          this.handleError('rebuild', e, { element: element.toString() });
+        }
+      }
+    }
+
+    // Check if more updates were queued during processing
+    if (this.dirtyElements.size > 0) {
+      if (this.flutterConfig.debugMode) {
+        console.log(`[FlutterJSRuntime] 🔄 More updates queued during batch, scheduling next batch...`);
+      }
+      Promise.resolve().then(() => this.processBuildQueue());
+    }
+  }
+
+  onElementMounted(element) {
+    if (!element) return;
+    if (this.flutterConfig.debugMode) {
+      console.log('[FlutterJSRuntime] 🔌 Element mounted:', element.widget?.constructor.name);
+    }
+    this.triggerLifecycleCallback('onElementMounted', element);
+  }
+
+  onElementUpdated(element) {
+    if (!element) return;
+    if (this.flutterConfig.debugMode) {
+      console.log('[FlutterJSRuntime] 🔄 Element updated:', element.widget?.constructor.name);
+    }
+    this.triggerLifecycleCallback('onElementUpdated', element);
+  }
+
+  onElementUnmounted(element) {
+    if (!element) return;
+    if (this.flutterConfig.debugMode) {
+      console.log('[FlutterJSRuntime] 🗑️ Element unmounted:', element.widget?.constructor.name);
+    }
+    if (element._id) {
+      this.elementRegistry.delete(element._id);
+    }
+    if (element.widget) {
+      this.widgetCache.delete(element.widget);
+    }
+    this.triggerLifecycleCallback('onElementUnmounted', element);
+  }
+
+  // ============================================================================
+  // LIFECYCLE CALLBACKS
+  // ============================================================================
+
+  on(eventName, callback) {
+    if (this.lifecycleCallbacks[eventName] && typeof callback === 'function') {
+      this.lifecycleCallbacks[eventName].push(callback);
+      if (this.flutterConfig.debugMode) {
+        console.log(`[FlutterJSRuntime] 📝 Registered callback for: ${eventName}`);
+      }
+    } else {
+      console.warn(`[FlutterJSRuntime] Unknown event: ${eventName}`);
+    }
+    return this;
+  }
+
+  off(eventName, callback) {
+    if (this.lifecycleCallbacks[eventName]) {
+      const index = this.lifecycleCallbacks[eventName].indexOf(callback);
+      if (index > -1) {
+        this.lifecycleCallbacks[eventName].splice(index, 1);
+      }
+    }
+    return this;
+  }
+
+  triggerLifecycleCallback(eventName, data) {
+    const callbacks = this.lifecycleCallbacks[eventName] || [];
+    callbacks.forEach(callback => {
+      try {
+        callback(data, this);
+      } catch (error) {
+        console.error(`[FlutterJSRuntime] Callback error (${eventName}):`, error);
+      }
+    });
+  }
+
+  // ============================================================================
+  // ERROR HANDLING
+  // ============================================================================
+
+  setupErrorHandling() {
+    if (!this.flutterConfig.isBrowser) return;
+    if (this._errorHandlingSetup) return;
+    this._errorHandlingSetup = true;
+
+    const errorHandler = (event) => {
+      this.handleError('uncaught', event.error || event.message, {
+        filename: event.filename,
+        lineno: event.lineno,
+        colno: event.colno
+      });
+    };
+
+    const rejectionHandler = (event) => {
+      this.handleError('promise', event.reason, {
+        promise: event.promise
+      });
+    };
+
+    window.addEventListener('error', errorHandler);
+    window.addEventListener('unhandledrejection', rejectionHandler);
+    this._errorHandlers = { errorHandler, rejectionHandler };
+  }
+
+  handleError(source, error, context = {}) {
+    const errorInfo = {
+      source,
+      error,
+      context,
+      timestamp: Date.now(),
+      stack: error instanceof Error ? error.stack : null
+    };
+
+    console.error(`[FlutterJSRuntime] ❌ Error in ${source}:`, error);
+
+    if (this.flutterConfig.debugMode && error instanceof Error && error.stack) {
+      console.error('[FlutterJSRuntime] Stack trace:', error.stack);
+    }
+
+    this.triggerLifecycleCallback('onError', errorInfo);
+
+    if (this.flutterConfig.debugMode && this.flutterConfig.isBrowser) {
+      this.showErrorOverlay(source, error, context);
+    }
+  }
+
+  showErrorOverlay(source, error, context) {
+    try {
+      if (typeof document === 'undefined') return;
+
+      const existing = document.getElementById('__flutterjs_error_overlay__');
+      if (existing) existing.remove();
+
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      const errorStack = error instanceof Error && error.stack
+        ? error.stack.split('\n').slice(0, 10).join('\n')
+        : 'No stack trace available';
+
+      const overlay = document.createElement('div');
+      overlay.id = '__flutterjs_error_overlay__';
+      overlay.style.cssText = `
+        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+        background: rgba(0, 0, 0, 0.9); color: white; z-index: 999999;
+        overflow-y: auto; font-family: 'Monaco', 'Menlo', monospace;
+        font-size: 13px; padding: 20px;
+      `;
+
+      overlay.innerHTML = `
+        <div style="max-width: 900px; margin: 0 auto;">
+          <div style="background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%);
+            padding: 20px; border-radius: 8px 8px 0 0; display: flex;
+            align-items: center; justify-content: space-between;">
+            <div style="display: flex; align-items: center; gap: 12px;">
+              <div style="width: 48px; height: 48px; background: rgba(255,255,255,0.2);
+                border-radius: 50%; display: flex; align-items: center;
+                justify-content: center; font-size: 24px;">⚠</div>
+              <div>
+                <h2 style="margin: 0; font-size: 20px; font-weight: 600;">
+                  ${escapeHtml(source.charAt(0).toUpperCase() + source.slice(1))} Error
+                </h2>
+                <p style="margin: 4px 0 0 0; opacity: 0.9; font-size: 12px;">
+                  FlutterJS Runtime Error
+                </p>
+              </div>
+            </div>
+            <button onclick="this.parentElement.parentElement.parentElement.remove()"
+              style="background: rgba(255,255,255,0.2); border: none; color: white;
+              width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
+              font-size: 18px;">×</button>
+          </div>
+          <div style="background: #1e1e1e; padding: 20px; border-radius: 0 0 8px 8px;">
+            <div style="margin-bottom: 20px;">
+              <h3 style="color: #ff6b6b; margin: 0 0 12px 0; font-size: 14px;
+                font-weight: 600; text-transform: uppercase;">Error Message</h3>
+              <pre style="background: #2d2d2d; padding: 16px; border-radius: 6px;
+                border-left: 4px solid #d32f2f; margin: 0; overflow-x: auto;
+                color: #ff8a80; line-height: 1.5;">${escapeHtml(errorMessage)}</pre>
+            </div>
+            ${errorStack && errorStack !== 'No stack trace available' ? `
+              <div style="margin-bottom: 20px;">
+                <h3 style="color: #64b5f6; margin: 0 0 12px 0; font-size: 14px;
+                  font-weight: 600; text-transform: uppercase;">Stack Trace</h3>
+                <pre style="background: #2d2d2d; padding: 16px; border-radius: 6px;
+                  border-left: 4px solid #1976d2; margin: 0; overflow-x: auto;
+                  color: #90caf9; line-height: 1.6; font-size: 12px;">${escapeHtml(errorStack)}</pre>
+              </div>
+            ` : ''}
+            ${Object.keys(context).length > 0 ? `
+              <div>
+                <h3 style="color: #81c784; margin: 0 0 12px 0; font-size: 14px;
+                  font-weight: 600; text-transform: uppercase;">Context</h3>
+                <pre style="background: #2d2d2d; padding: 16px; border-radius: 6px;
+                  border-left: 4px solid #388e3c; margin: 0; overflow-x: auto;
+                  color: #a5d6a7; line-height: 1.6; font-size: 12px;">${escapeHtml(JSON.stringify(context, null, 2))}</pre>
+              </div>
+            ` : ''}
+          </div>
+        </div>
+      `;
+
+      document.body.appendChild(overlay);
+    } catch (e) {
+      console.error('[FlutterJSRuntime] Failed to show error overlay:', e);
+    }
+  }
+
+  // ============================================================================
+  // PERFORMANCE & UTILITIES
+  // ============================================================================
+
+  recordPerformance(operation, identifier, duration) {
+    if (!this.flutterConfig.enablePerformanceTracking) return;
+    const key = `${operation}:${identifier}`;
+    if (!this.performanceMarks.has(key)) {
+      this.performanceMarks.set(key, {
+        count: 0, totalTime: 0, avgTime: 0,
+        minTime: Infinity, maxTime: 0
+      });
+    }
+    const mark = this.performanceMarks.get(key);
+    mark.count++;
+    mark.totalTime += duration;
+    mark.avgTime = mark.totalTime / mark.count;
+    mark.minTime = Math.min(mark.minTime, duration);
+    mark.maxTime = Math.max(mark.maxTime, duration);
+  }
+
+  getPerformanceReport() {
+    const report = {};
+    this.performanceMarks.forEach((data, key) => {
+      report[key] = {
+        calls: data.count,
+        total: `${data.totalTime.toFixed(2)}ms`,
+        average: `${data.avgTime.toFixed(2)}ms`,
+        min: `${data.minTime.toFixed(2)}ms`,
+        max: `${data.maxTime.toFixed(2)}ms`
+      };
+    });
+    return report;
+  }
+
+  clearPerformanceMarks() {
+    this.performanceMarks.clear();
+  }
+
+  getFlutterConfig() {
+    return { ...this.flutterConfig };
+  }
+
+  getElementById(elementId) {
+    return this.elementRegistry.get(elementId);
+  }
+
+  getAllElements() {
+    return Array.from(this.elementRegistry.values());
+  }
+
+  getElementCount() {
+    return this.elementRegistry.size;
+  }
+
+  isInitialized() {
+    return this.initialized;
+  }
+
+  isMounted() {
+    return this.mounted;
+  }
+
+  getStats() {
+    const baseMetrics = this.getMetrics();
+
+    // ✅ FIX: Handle null baseMetrics
+    if (!baseMetrics) {
+      return {
+        flutter: {
+          elements: this.elementRegistry.size,
+          cachedWidgets: this.widgetCache ? 'enabled' : 'disabled',
+          inputType: this.inputType,
+          initialized: this.initialized,
+          mounted: this.mounted,
+          hasApp: this.app !== null,
+          lifecycleCallbacks: Object.keys(this.lifecycleCallbacks).reduce((acc, key) => {
+            acc[key] = this.lifecycleCallbacks[key].length;
+            return acc;
+          }, {})
+        }
+      };
+    }
+
+    return {
+      ...baseMetrics,
+      flutter: {
+        elements: this.elementRegistry.size,
+        cachedWidgets: this.widgetCache ? 'enabled' : 'disabled',
+        inputType: this.inputType,
+        lifecycleCallbacks: Object.keys(this.lifecycleCallbacks).reduce((acc, key) => {
+          acc[key] = this.lifecycleCallbacks[key].length;
+          return acc;
+        }, {})
+      }
+    };
+  }
+
+  destroy() {
+    if (this.flutterConfig.debugMode) {
+      console.log('[FlutterJSRuntime] 🗑️ Destroying...');
+    }
+    if (this._errorHandlers && this.flutterConfig.isBrowser) {
+      window.removeEventListener('error', this._errorHandlers.errorHandler);
+      window.removeEventListener('unhandledrejection', this._errorHandlers.rejectionHandler);
+    }
+    this.elementRegistry.clear();
+    this.widgetCache = new WeakMap();
+    Object.keys(this.lifecycleCallbacks).forEach(key => {
+      this.lifecycleCallbacks[key] = [];
+    });
+    this.performanceMarks.clear();
+    super.destroy();
+    this.initialized = false;
+    this.mounted = false;
+    if (this.flutterConfig.debugMode) {
+      console.log('[FlutterJSRuntime] ✅ Destroyed');
+    }
+  }
+}
+
+// ============================================================================
+// GLOBAL API
+// ============================================================================
+
+
+let globalFlutterRuntime = null;
+
+export function runApp(rootWidgetOrVNode, options = {}) {
+  try {
+    if (globalFlutterRuntime) {
+      if (options.debugMode) {
+        console.log('[FlutterJS] ♻️ Reusing existing runtime');
+      }
+    } else {
+      if (options.debugMode) {
+        console.log('[FlutterJS] 🆕 Creating new Flutter runtime');
+      }
+      globalFlutterRuntime = new FlutterJSRuntime({
+        debugMode: options.debugMode || false,
+        enableHotReload: options.enableHotReload !== false,
+        enablePerformanceTracking: options.enablePerformanceTracking !== false,
+        enableStateTracking: options.enableStateTracking !== false,
+        enableErrorBoundaries: options.enableErrorBoundaries !== false,
+        strictMode: options.strictMode || false,
+        mode: options.mode || 'csr'
+      });
+    }
+
+    const enhancedOptions = {
+      ...options,
+      context: {
+        ...options.context,
+        runtime: globalFlutterRuntime
+      }
+    };
+
+    return globalFlutterRuntime.runApp(rootWidgetOrVNode, enhancedOptions);
+
+  } catch (error) {
+    console.error('[FlutterJS] ❌ Failed to run app:', error);
+    throw error;
+  }
+}
+
+export function getRuntime() {
+  return globalFlutterRuntime;
+}
+
+export function updateApp(updateFn) {
+  if (!globalFlutterRuntime) {
+    throw new Error('[FlutterJS] No runtime instance. Call runApp() first.');
+  }
+
+  if (updateFn && typeof updateFn === 'function') {
+    updateFn();
+  }
+
+  globalFlutterRuntime.update();
+}
+
+export function hotReload() {
+  if (!globalFlutterRuntime) {
+    console.warn('[FlutterJS] No runtime instance');
+    return;
+  }
+
+  globalFlutterRuntime.hotReload();
+}
+
+/**
+ * Server-side render to HTML string
+ * 
+ * This renders a Flutter app to an HTML string for server-side rendering.
+ * The resulting HTML can be sent to the client and hydrated.
+ * 
+ * @param {Widget} app - Root widget
+ * @param {Object} options - SSR options
+ * @param {string} options.title - Page title
+ * @param {Object} options.meta - Meta tags
+ * @param {Array} options.styles - External stylesheets
+ * @param {Array} options.scripts - External scripts
+ * @param {boolean} options.includeHydration - Include hydration data (default: true)
+ * @param {boolean} options.includeCriticalCSS - Include critical CSS (default: true)
+ * @param {boolean} options.includeRuntime - Include runtime script (default: true)
+ * @returns {string} HTML string
+ */
+export function renderToString(app, options = {}) {
+  try {
+    if (options.debugMode) {
+      console.log('[FlutterJS] 📄 SSR: Creating temporary runtime for rendering');
+    }
+
+    // Create temporary Flutter runtime for SSR
+    const ssrRuntime = new FlutterJSRuntime({
+      debugMode: options.debugMode || false,
+      mode: 'ssr'
+    });
+
+    // Enhanced context with Flutter runtime
+    const enhancedOptions = {
+      ...options,
+      context: {
+        ...options.context,
+        runtime: ssrRuntime // ✅ Pass Flutter runtime with createElement
+      }
+    };
+
+    // Use core renderToString with enhanced context
+    const html = coreRenderToString(app, enhancedOptions);
+
+    // Cleanup SSR runtime
+    ssrRuntime.destroy();
+
+    return html;
+
+  } catch (error) {
+    console.error('[FlutterJS] ❌ SSR failed:', error);
+    throw error;
+  }
+}
+
+/**
+ * Hydrate server-rendered content
+ * 
+ * This attaches event listeners and makes a server-rendered app interactive.
+ * Should be called on the client after receiving SSR HTML.
+ * 
+ * @param {Widget} app - Root widget (must match SSR widget)
+ * @param {Object} options - Hydration options
+ * @param {string} options.target - CSS selector for root element (default: '#root')
+ * @param {boolean} options.debugMode - Enable debug logging
+ * @returns {FlutterJSRuntime} Runtime instance
+ */
+export function hydrate(app, options = {}) {
+  try {
+    if (options.debugMode) {
+      console.log('[FlutterJS] 💧 Starting hydration...');
+    }
+
+    if (!globalFlutterRuntime) {
+      globalFlutterRuntime = new FlutterJSRuntime({
+        debugMode: options.debugMode || false,
+        enableHotReload: options.enableHotReload !== false,
+        mode: 'hydrate'
+      });
+    }
+
+    // Enhanced options with Flutter runtime
+    const enhancedOptions = {
+      ...options,
+      context: {
+        ...options.context,
+        runtime: globalFlutterRuntime // ✅ Pass Flutter runtime with createElement
+      }
+    };
+
+    return coreHydrate(app, enhancedOptions);
+
+  } catch (error) {
+    console.error('[FlutterJS] ❌ Hydration failed:', error);
+    throw error;
+  }
+}
+
+/**
+ * Get performance metrics
+ * 
+ * Returns detailed performance metrics including render times,
+ * update counts, and Flutter-specific statistics.
+ * 
+ * @returns {Object|null} Performance metrics or null if no runtime
+ */
+export function getMetrics() {
+  if (!globalFlutterRuntime) {
+    return null;
+  }
+  return globalFlutterRuntime.getStats();
+}
+
+/**
+ * Get performance report
+ * 
+ * Returns a detailed report of all performance measurements.
+ * 
+ * @returns {Object|null} Performance report or null if no runtime
+ */
+export function getPerformanceReport() {
+  if (!globalFlutterRuntime) {
+    return null;
+  }
+  return globalFlutterRuntime.getPerformanceReport();
+}
+
+/**
+ * Clear performance metrics
+ * 
+ * Resets all performance tracking data.
+ */
+export function clearMetrics() {
+  if (!globalFlutterRuntime) {
+    return;
+  }
+  globalFlutterRuntime.clearMetrics();
+  globalFlutterRuntime.clearPerformanceMarks();
+}
+
+/**
+ * Register lifecycle callback
+ * 
+ * Available events:
+ * - onElementCreated: When an element is created
+ * - onElementMounted: When an element is mounted to DOM
+ * - onElementUpdated: When an element is updated
+ * - onElementUnmounted: When an element is unmounted
+ * - onError: When an error occurs
+ * - onStateChange: When state changes
+ * 
+ * @param {string} eventName - Event name
+ * @param {Function} callback - Callback function
+ */
+export function on(eventName, callback) {
+  if (!globalFlutterRuntime) {
+    console.warn('[FlutterJS] No runtime instance. Call runApp() first.');
+    return;
+  }
+  globalFlutterRuntime.on(eventName, callback);
+}
+
+/**
+ * Unregister lifecycle callback
+ * 
+ * @param {string} eventName - Event name
+ * @param {Function} callback - Callback function to remove
+ */
+export function off(eventName, callback) {
+  if (!globalFlutterRuntime) {
+    return;
+  }
+  globalFlutterRuntime.off(eventName, callback);
+}
+
+/**
+ * Get Flutter configuration
+ * 
+ * @returns {Object|null} Flutter config or null if no runtime
+ */
+export function getConfig() {
+  if (!globalFlutterRuntime) {
+    return null;
+  }
+  return globalFlutterRuntime.getFlutterConfig();
+}
+
+/**
+ * Dispose runtime and cleanup
+ * 
+ * This completely destroys the runtime and cleans up all resources.
+ * After calling this, you need to call runApp() again to start a new app.
+ */
+export function dispose() {
+  if (globalFlutterRuntime) {
+    globalFlutterRuntime.destroy();
+    globalFlutterRuntime = null;
+  }
+}
+
+/**
+ * Check if runtime is initialized
+ * 
+ * @returns {boolean} True if runtime exists and is initialized
+ */
+export function isInitialized() {
+  return globalFlutterRuntime !== null && globalFlutterRuntime.isInitialized();
+}
+
+/**
+ * Check if app is mounted
+ * 
+ * @returns {boolean} True if app is mounted to DOM
+ */
+export function isMounted() {
+  return globalFlutterRuntime !== null && globalFlutterRuntime.isMounted();
+}
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+export default {
+  // Classes
+  FlutterJSRuntime,
+  VNodeRuntime,
+
+  // Core API
+  runApp,
+  getRuntime,
+  updateApp,
+  hotReload,
+  renderToString,
+  hydrate,
+
+  // Metrics
+  getMetrics,
+  getPerformanceReport,
+  clearMetrics,
+
+  // Lifecycle
+  on,
+  off,
+
+  // Utilities
+  getConfig,
+  dispose,
+  isInitialized,
+  isMounted,
+  isBrowser,
+  isSSR
+};
+
+// ============================================================================
+// BROWSER GLOBAL API
+// ============================================================================
+
+if (typeof window !== 'undefined') {
+  console.log('[FlutterJS] 🌐 Setting up window.FlutterJS');
+
+  window.FlutterJS = {
+    // Core
+    runApp,
+    getRuntime,
+    updateApp,
+    hotReload,
+    renderToString,
+    hydrate,
+
+    // Metrics
+    getMetrics,
+    getPerformanceReport,
+    clearMetrics,
+
+    // Lifecycle
+    on,
+    off,
+
+    // Utilities
+    getConfig,
+    dispose,
+    isInitialized,
+    isMounted,
+
+    // Version info
+    version: '1.0.0',
+    environment: 'browser'
+  };
+
+  console.log('[FlutterJS] ✅ window.FlutterJS ready');
+  console.log('[FlutterJS] 📚 Available methods:', Object.keys(window.FlutterJS).join(', '));
+}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/src/focus_manager.js b/packages/flutterjs_runtime/flutterjs_runtime/src/focus_manager.js
similarity index 100%
rename from packages/flutterjs_engine/src/runtime/src/focus_manager.js
rename to packages/flutterjs_runtime/flutterjs_runtime/src/focus_manager.js
diff --git a/packages/flutterjs_runtime/flutterjs_runtime/src/gesture_recognizer.js b/packages/flutterjs_runtime/flutterjs_runtime/src/gesture_recognizer.js
new file mode 100644
index 00000000..78f6c52a
--- /dev/null
+++ b/packages/flutterjs_runtime/flutterjs_runtime/src/gesture_recognizer.js
@@ -0,0 +1,1080 @@
+/**
+ * FlutterJS Gesture Recognizer System
+ * 
+ * Handles complex gestures like tap, long-press, swipe, pinch, and pan.
+ * Provides Flutter-style gesture recognition for touch and mouse interactions.
+ * 
+ * Key Features:
+ * - Multi-touch support
+ * - Gesture conflict resolution
+ * - Customizable thresholds
+ * - Performance optimized
+ * - Memory efficient cleanup
+ */
+
+/**
+ * Base Gesture Recognizer
+ * 
+ * Abstract class that all specific recognizers extend
+ */
+class GestureRecognizer {
+  constructor(callback, options = {}) {
+    if (!callback || typeof callback !== 'function') {
+      throw new Error('Gesture recognizer requires a callback function');
+    }
+
+    this.callback = callback;
+    this.options = options;
+    this.state = 'ready'; // ready, possible, recognized, failed
+    this.disposed = false;
+  }
+
+  /**
+   * Handle pointer/touch event
+   * Subclasses must implement this
+   */
+  handleEvent(eventType, event) {
+    throw new Error('handleEvent() must be implemented by subclass');
+  }
+
+  /**
+   * Reset recognizer state
+   */
+  reset() {
+    this.state = 'ready';
+  }
+
+  /**
+   * Mark gesture as recognized
+   */
+  recognize(event) {
+    if (this.disposed) return;
+
+    // Remove the state === 'recognized' check - allow calling recognize multiple times
+    this.state = 'recognized';
+
+    try {
+      this.callback(event);
+    } catch (error) {
+      console.error('[GestureRecognizer] Callback error:', error);
+    }
+  }
+
+  /**
+   * Mark gesture as failed
+   */
+  fail() {
+    this.state = 'failed';
+  }
+
+  /**
+   * Cleanup and dispose
+   */
+  dispose() {
+    this.disposed = true;
+    this.callback = null;
+    this.options = null;
+    this.state = 'ready';
+  }
+
+  /**
+   * Check if disposed
+   */
+  get isDisposed() {
+    return this.disposed;
+  }
+}
+
+/**
+ * Tap Gesture Recognizer
+ * 
+ * Detects simple tap/click gestures
+ */
+class TapRecognizer extends GestureRecognizer {
+  constructor(callback, options = {}) {
+    super(callback, options);
+
+    // Configuration
+    this.maxDuration = options.maxDuration || 300; // ms
+    this.maxMovement = options.maxMovement || 10; // px
+    this.minTaps = options.minTaps || 1;
+    this.maxTaps = options.maxTaps || 1;
+
+    // State
+    this.startTime = null;
+    this.startX = null;
+    this.startY = null;
+    this.tapCount = 0;
+    this.lastTapTime = 0;
+    this.tapTimeout = null;
+  }
+
+  handleEvent(eventType, event) {
+    if (this.disposed) return;
+
+    switch (eventType) {
+      case 'pointerdown':
+      case 'mousedown':
+      case 'touchstart':
+        this.handleDown(event);
+        break;
+
+      case 'pointermove':
+      case 'mousemove':
+      case 'touchmove':
+        this.handleMove(event);
+        break;
+
+      case 'pointerup':
+      case 'mouseup':
+      case 'touchend':
+        this.handleUp(event);
+        break;
+
+      case 'pointercancel':
+      case 'touchcancel':
+        this.handleCancel();
+        break;
+    }
+  }
+
+  handleDown(event) {
+    this.state = 'possible';
+    this.startTime = Date.now();
+    this.startX = this.getX(event);
+    this.startY = this.getY(event);
+  }
+
+  handleMove(event) {
+    if (this.state !== 'possible') return;
+    // console.log('[TapRecognizer] handleMove');
+
+
+    const x = this.getX(event);
+    const y = this.getY(event);
+
+    const dx = Math.abs(x - this.startX);
+    const dy = Math.abs(y - this.startY);
+    const movement = Math.sqrt(dx * dx + dy * dy);
+
+    // Too much movement - fail
+    if (movement > this.maxMovement) {
+      this.fail();
+    }
+  }
+
+  handleUp(event) {
+    if (this.state !== 'possible') return;
+
+    const duration = Date.now() - this.startTime;
+    const x = this.getX(event);
+    const y = this.getY(event);
+
+    const dx = Math.abs(x - this.startX);
+    const dy = Math.abs(y - this.startY);
+    const movement = Math.sqrt(dx * dx + dy * dy);
+
+    // Check if valid tap
+    if (duration <= this.maxDuration && movement <= this.maxMovement) {
+      this.handleTap(event);
+    } else {
+      this.fail();
+    }
+
+    this.reset();
+  }
+
+  handleTap(event) {
+    const now = Date.now();
+    const timeSinceLastTap = now - this.lastTapTime;
+
+    // Check if double/triple tap
+    if (timeSinceLastTap < 300) {
+      this.tapCount++;
+    } else {
+      this.tapCount = 1;
+    }
+
+    this.lastTapTime = now;
+
+    // Clear previous timeout
+    if (this.tapTimeout) {
+      clearTimeout(this.tapTimeout);
+      this.tapTimeout = null;
+    }
+
+    // If we've reached max taps, recognize immediately
+    if (this.tapCount >= this.maxTaps) {
+      this.recognize({
+        type: 'tap',
+        tapCount: this.tapCount,
+        position: { x: this.startX, y: this.startY },
+        nativeEvent: event
+      });
+      this.tapCount = 0;
+    }
+    // Otherwise wait for potential additional taps
+    else if (this.tapCount >= this.minTaps) {
+      this.tapTimeout = setTimeout(() => {
+        this.recognize({
+          type: 'tap',
+          tapCount: this.tapCount,
+          position: { x: this.startX, y: this.startY },
+          nativeEvent: event
+        });
+        this.tapCount = 0;
+      }, 300);
+    }
+  }
+
+  handleCancel() {
+    this.fail();
+    // Don't call reset() here - it overwrites the 'failed' state
+  }
+  getX(event) {
+    if (event.clientX !== undefined && event.clientX !== 0) {
+      return event.clientX;
+    }
+    if (event.touches && event.touches.length > 0) {
+      return event.touches[0].clientX;
+    }
+    if (event.changedTouches && event.changedTouches.length > 0) {
+      return event.changedTouches[0].clientX;
+    }
+    return 0;
+  }
+
+  getY(event) {
+    if (event.clientY !== undefined && event.clientY !== 0) {
+      return event.clientY;
+    }
+    if (event.touches && event.touches.length > 0) {
+      return event.touches[0].clientY;
+    }
+    if (event.changedTouches && event.changedTouches.length > 0) {
+      return event.changedTouches[0].clientY;
+    }
+    return 0;
+  }
+
+  dispose() {
+    if (this.tapTimeout) {
+      clearTimeout(this.tapTimeout);
+      this.tapTimeout = null;
+    }
+    super.dispose();
+  }
+}
+
+/**
+ * Long Press Gesture Recognizer
+ * 
+ * Detects long press / hold gestures
+ */
+class LongPressRecognizer extends GestureRecognizer {
+  constructor(callback, options = {}) {
+    super(callback, options);
+
+    // Configuration
+    this.duration = options.duration || 500; // ms
+    this.maxMovement = options.maxMovement || 10; // px
+
+    // State
+    this.timer = null;
+    this.startX = null;
+    this.startY = null;
+    this.recognized = false;
+  }
+
+  handleEvent(eventType, event) {
+    if (this.disposed) return;
+
+    switch (eventType) {
+      case 'pointerdown':
+      case 'mousedown':
+      case 'touchstart':
+        this.handleDown(event);
+        break;
+
+      case 'pointermove':
+      case 'mousemove':
+      case 'touchmove':
+        this.handleMove(event);
+        break;
+
+      case 'pointerup':
+      case 'mouseup':
+      case 'touchend':
+      case 'pointercancel':
+      case 'touchcancel':
+        this.handleEnd(event);
+        break;
+    }
+  }
+
+  handleDown(event) {
+    this.state = 'possible';
+    this.startX = this.getX(event);
+    this.startY = this.getY(event);
+    this.recognized = false;
+
+    // Start timer
+    this.timer = setTimeout(() => {
+      if (this.state === 'possible') {
+        this.recognized = true;
+        this.recognize({
+          type: 'longpress',
+          position: { x: this.startX, y: this.startY },
+          nativeEvent: event
+        });
+      }
+      this.timer = null;
+    }, this.duration);
+  }
+
+  handleMove(event) {
+    if (this.state !== 'possible' || this.recognized) return;
+
+    const x = this.getX(event);
+    const y = this.getY(event);
+
+    const dx = Math.abs(x - this.startX);
+    const dy = Math.abs(y - this.startY);
+    const movement = Math.sqrt(dx * dx + dy * dy);
+
+    // Too much movement - cancel
+    if (movement > this.maxMovement) {
+      this.cancel();
+    }
+  }
+
+  handleEnd(event) {
+    this.cancel();
+    this.reset();
+  }
+
+  cancel() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+    this.fail();
+  }
+
+  getX(event) {
+    return event.clientX || event.touches?.[0]?.clientX || 0;
+  }
+
+  getY(event) {
+    return event.clientY || event.touches?.[0]?.clientY || 0;
+  }
+
+  dispose() {
+    this.cancel();
+    super.dispose();
+  }
+}
+
+/**
+ * Swipe Gesture Recognizer
+ * 
+ * Detects directional swipe gestures
+ */
+class SwipeRecognizer extends GestureRecognizer {
+  constructor(callback, options = {}) {
+    super(callback, options);
+
+    // Configuration
+    this.minDistance = options.minDistance || 50; // px
+    this.maxDuration = options.maxDuration || 300; // ms
+    this.direction = options.direction || null; // 'horizontal', 'vertical', null (any)
+
+    // State
+    this.startTime = null;
+    this.startX = null;
+    this.startY = null;
+  }
+
+  handleEvent(eventType, event) {
+    if (this.disposed) return;
+
+    switch (eventType) {
+      case 'pointerdown':
+      case 'mousedown':
+      case 'touchstart':
+        this.handleDown(event);
+        break;
+
+      case 'pointerup':
+      case 'mouseup':
+      case 'touchend':
+        this.handleUp(event);
+        break;
+
+      case 'pointercancel':
+      case 'touchcancel':
+        this.handleCancel();
+        break;
+    }
+  }
+
+  handleDown(event) {
+    this.state = 'possible';
+    this.startTime = Date.now();
+    this.startX = this.getX(event);
+    this.startY = this.getY(event);
+  }
+
+  handleUp(event) {
+    if (this.state !== 'possible') return;
+
+    const duration = Date.now() - this.startTime;
+    const endX = this.getX(event);
+    const endY = this.getY(event);
+
+    const dx = endX - this.startX;
+    const dy = endY - this.startY;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+
+    // Check if valid swipe
+    if (duration <= this.maxDuration && distance >= this.minDistance) {
+      const swipeDirection = this.getDirection(dx, dy);
+
+      // Check direction constraint
+      if (this.direction === 'horizontal' &&
+        (swipeDirection === 'up' || swipeDirection === 'down')) {
+        this.fail();
+        this.reset();
+        return;
+      }
+
+      if (this.direction === 'vertical' &&
+        (swipeDirection === 'left' || swipeDirection === 'right')) {
+        this.fail();
+        this.reset();
+        return;
+      }
+
+      this.recognize({
+        type: 'swipe',
+        direction: swipeDirection,
+        distance: distance,
+        velocity: distance / duration, // px/ms
+        delta: { dx, dy },
+        start: { x: this.startX, y: this.startY },
+        end: { x: endX, y: endY },
+        nativeEvent: event
+      });
+    } else {
+      this.fail();
+    }
+
+    this.reset();
+  }
+
+  handleCancel() {
+    this.fail();
+    this.reset();
+  }
+
+  getDirection(dx, dy) {
+    const angle = Math.atan2(dy, dx) * 180 / Math.PI;
+
+    // Determine primary direction
+    if (angle >= -45 && angle < 45) return 'right';
+    if (angle >= 45 && angle < 135) return 'down';
+    if (angle >= -135 && angle < -45) return 'up';
+    return 'left';
+  }
+
+  getX(event) {
+    if (event.clientX !== undefined && event.clientX !== 0) {
+      return event.clientX;
+    }
+    if (event.touches && event.touches.length > 0) {
+      return event.touches[0].clientX;
+    }
+    if (event.changedTouches && event.changedTouches.length > 0) {
+      return event.changedTouches[0].clientX;
+    }
+    return 0;
+  }
+
+  getY(event) {
+    if (event.clientY !== undefined && event.clientY !== 0) {
+      return event.clientY;
+    }
+    if (event.touches && event.touches.length > 0) {
+      return event.touches[0].clientY;
+    }
+    if (event.changedTouches && event.changedTouches.length > 0) {
+      return event.changedTouches[0].clientY;
+    }
+    return 0;
+  }
+}
+
+/**
+ * Pan Gesture Recognizer
+ * 
+ * Detects continuous drag/pan gestures
+ */
+class PanRecognizer extends GestureRecognizer {
+  constructor(callback, options = {}) {
+    super(callback, options);
+
+    // Configuration
+    this.minDistance = options.minDistance || 10; // px to start
+    this.direction = options.direction || null; // 'horizontal', 'vertical', null
+
+    // State
+    this.startX = null;
+    this.startY = null;
+    this.lastX = null;
+    this.lastY = null;
+    this.isPanning = false;
+
+    // Callbacks
+    this.onStart = options.onStart || null;
+    this.onUpdate = options.onUpdate || null;
+    this.onEnd = options.onEnd || null;
+  }
+
+  handleEvent(eventType, event) {
+    if (this.disposed) return;
+
+    switch (eventType) {
+      case 'pointerdown':
+      case 'mousedown':
+      case 'touchstart':
+        this.handleDown(event);
+        break;
+
+      case 'pointermove':
+      case 'mousemove':
+      case 'touchmove':
+        this.handleMove(event);
+        break;
+
+      case 'pointerup':
+      case 'mouseup':
+      case 'touchend':
+        this.handleUp(event);
+        break;
+
+      case 'pointercancel':
+      case 'touchcancel':
+        this.handleCancel();
+        break;
+    }
+  }
+
+  handleDown(event) {
+    this.state = 'possible';
+    this.startX = this.getX(event);
+    this.startY = this.getY(event);
+    this.lastX = this.startX;
+    this.lastY = this.startY;
+    this.isPanning = false;
+  }
+
+  handleMove(event) {
+    if (this.state === 'failed') return;
+
+    const x = this.getX(event);
+    const y = this.getY(event);
+
+    const dx = x - this.startX;
+    const dy = y - this.startY;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+
+    // Check if pan started
+    if (!this.isPanning && distance >= this.minDistance) {
+      // Check direction constraint
+      if (this.direction === 'horizontal' && Math.abs(dy) > Math.abs(dx)) {
+        this.fail();
+        return;
+      }
+
+      if (this.direction === 'vertical' && Math.abs(dx) > Math.abs(dy)) {
+        this.fail();
+        return;
+      }
+
+      this.isPanning = true;
+      this.state = 'recognized';
+
+      // Call onStart
+      if (this.onStart) {
+        try {
+          this.onStart({
+            type: 'panstart',
+            position: { x, y },
+            nativeEvent: event
+          });
+        } catch (error) {
+          console.error('[PanRecognizer] onStart error:', error);
+        }
+      }
+    }
+
+    // Update during pan
+    if (this.isPanning) {
+      const deltaX = x - this.lastX;
+      const deltaY = y - this.lastY;
+
+      this.lastX = x;
+      this.lastY = y;
+
+      // Call onUpdate
+      if (this.onUpdate) {
+        try {
+          this.onUpdate({
+            type: 'panupdate',
+            position: { x, y },
+            delta: { dx: deltaX, dy: deltaY },
+            totalDelta: { dx, dy },
+            nativeEvent: event
+          });
+        } catch (error) {
+          console.error('[PanRecognizer] onUpdate error:', error);
+        }
+      }
+    }
+  }
+
+  handleUp(event) {
+    if (this.isPanning) {
+      const x = this.getX(event);
+      const y = this.getY(event);
+
+      const dx = x - this.startX;
+      const dy = y - this.startY;
+
+      // Call onEnd first
+      if (this.onEnd) {
+        try {
+          this.onEnd({
+            type: 'panend',
+            position: { x, y },
+            totalDelta: { dx, dy },
+            nativeEvent: event
+          });
+        } catch (error) {
+          console.error('[PanRecognizer] onEnd error:', error);
+        }
+      }
+
+      // Then call main callback via recognize()
+      this.recognize({
+        type: 'pan',
+        start: { x: this.startX, y: this.startY },
+        end: { x, y },
+        delta: { dx, dy },
+        nativeEvent: event
+      });
+    }
+
+    this.reset();
+    this.isPanning = false;
+  }
+  handleCancel() {
+    if (this.isPanning && this.onEnd) {
+      try {
+        this.onEnd({
+          type: 'pancancel',
+          position: { x: this.lastX, y: this.lastY }
+        });
+      } catch (error) {
+        console.error('[PanRecognizer] onEnd (cancel) error:', error);
+      }
+    }
+
+    this.fail();
+    this.reset();
+    this.isPanning = false;
+  }
+
+  getX(event) {
+    return event.clientX || event.touches?.[0]?.clientX || 0;
+  }
+
+  getY(event) {
+    return event.clientY || event.touches?.[0]?.clientY || 0;
+  }
+}
+
+/**
+ * Scale (Pinch) Gesture Recognizer
+ * 
+ * Detects pinch-to-zoom gestures (two-finger)
+ */
+class ScaleRecognizer extends GestureRecognizer {
+  constructor(callback, options = {}) {
+    super(callback, options);
+
+    // Configuration
+    this.minScale = options.minScale || 0.5;
+    this.maxScale = options.maxScale || 2.0;
+
+    // State
+    this.initialDistance = null;
+    this.currentDistance = null;
+    this.isScaling = false;
+
+    // Callbacks
+    this.onStart = options.onStart || null;
+    this.onUpdate = options.onUpdate || null;
+    this.onEnd = options.onEnd || null;
+  }
+
+  handleEvent(eventType, event) {
+    if (this.disposed) return;
+
+    // Only handle touch events (requires 2 touches)
+    if (!event.touches || event.touches.length < 2) {
+      if (this.isScaling) {
+        this.handleEnd(event);
+      }
+      return;
+    }
+
+    switch (eventType) {
+      case 'touchstart':
+        this.handleStart(event);
+        break;
+
+      case 'touchmove':
+        this.handleMove(event);
+        break;
+
+      case 'touchend':
+      case 'touchcancel':
+        this.handleEnd(event);
+        break;
+    }
+  }
+
+  handleStart(event) {
+    if (event.touches.length !== 2) return;
+
+    this.state = 'possible';
+    this.initialDistance = this.getDistance(event.touches[0], event.touches[1]);
+    this.currentDistance = this.initialDistance;
+    this.isScaling = true;
+
+    // Call onStart
+    if (this.onStart) {
+      try {
+        this.onStart({
+          type: 'scalestart',
+          scale: 1.0,
+          nativeEvent: event
+        });
+      } catch (error) {
+        console.error('[ScaleRecognizer] onStart error:', error);
+      }
+    }
+  }
+
+  handleMove(event) {
+    if (!this.isScaling || event.touches.length !== 2) return;
+
+    this.state = 'recognized';
+
+    const distance = this.getDistance(event.touches[0], event.touches[1]);
+    this.currentDistance = distance;
+
+    const scale = distance / this.initialDistance;
+
+    // Clamp scale
+    const clampedScale = Math.max(this.minScale, Math.min(this.maxScale, scale));
+
+    // Call onUpdate
+    if (this.onUpdate) {
+      try {
+        this.onUpdate({
+          type: 'scaleupdate',
+          scale: clampedScale,
+          rawScale: scale,
+          nativeEvent: event
+        });
+      } catch (error) {
+        console.error('[ScaleRecognizer] onUpdate error:', error);
+      }
+    }
+  }
+  handleEnd(event) {
+    if (!this.isScaling) return;
+
+    const scale = this.currentDistance / this.initialDistance;
+    const clampedScale = Math.max(this.minScale, Math.min(this.maxScale, scale));
+
+    // Call onEnd first
+    if (this.onEnd) {
+      try {
+        this.onEnd({
+          type: 'scaleend',
+          scale: clampedScale,
+          rawScale: scale,
+          nativeEvent: event
+        });
+      } catch (error) {
+        console.error('[ScaleRecognizer] onEnd error:', error);
+      }
+    }
+
+    // Then call main callback via recognize()
+    this.recognize({
+      type: 'scale',
+      scale: clampedScale,
+      rawScale: scale,
+      nativeEvent: event
+    });
+
+    this.reset();
+    this.isScaling = false;
+    this.initialDistance = null;
+    this.currentDistance = null;
+  }
+
+  getDistance(touch1, touch2) {
+    const dx = touch2.clientX - touch1.clientX;
+    const dy = touch2.clientY - touch1.clientY;
+    return Math.sqrt(dx * dx + dy * dy);
+  }
+}
+
+/**
+ * Double Tap Gesture Recognizer
+ * 
+ * Specialized TapRecognizer for double taps
+ */
+class DoubleTapRecognizer extends TapRecognizer {
+  constructor(callback, options = {}) {
+    super(callback, {
+      ...options,
+      minTaps: 2,
+      maxTaps: 2
+    });
+  }
+}
+
+/**
+ * Vertical Drag Gesture Recognizer
+ * 
+ * Specialized PanRecognizer for vertical drags
+ */
+class VerticalDragRecognizer extends PanRecognizer {
+  constructor(callback, options = {}) {
+    super(callback, {
+      ...options,
+      direction: 'vertical'
+    });
+  }
+}
+
+/**
+ * Horizontal Drag Gesture Recognizer
+ * 
+ * Specialized PanRecognizer for horizontal drags
+ */
+class HorizontalDragRecognizer extends PanRecognizer {
+  constructor(callback, options = {}) {
+    super(callback, {
+      ...options,
+      direction: 'horizontal'
+    });
+  }
+}
+
+/**
+ * Gesture Arena
+ * 
+ * Manages multiple gesture recognizers and resolves conflicts
+ */
+class GestureArena {
+  constructor() {
+    this.recognizers = new Map(); // elementId -> recognizer[]
+  }
+
+  /**
+   * Register recognizer for element
+   */
+  register(elementId, recognizer) {
+    if (!this.recognizers.has(elementId)) {
+      this.recognizers.set(elementId, []);
+    }
+
+    this.recognizers.get(elementId).push(recognizer);
+  }
+
+  /**
+   * Unregister all recognizers for element
+   */
+  unregister(elementId) {
+    const recognizers = this.recognizers.get(elementId);
+    if (recognizers) {
+      recognizers.forEach(r => r.dispose());
+      this.recognizers.delete(elementId);
+    }
+  }
+
+  /**
+   * Handle event for element
+   */
+  handleEvent(elementId, eventType, event) {
+    const recognizers = this.recognizers.get(elementId);
+    if (!recognizers) return;
+
+    // Pass event to all active recognizers
+    recognizers.forEach(recognizer => {
+      if (!recognizer.isDisposed && recognizer.state !== 'failed') {
+        recognizer.handleEvent(eventType, event);
+      }
+    });
+  }
+
+  /**
+   * Get recognizers for element
+   */
+  getRecognizers(elementId) {
+    return this.recognizers.get(elementId) || [];
+  }
+
+  /**
+   * Clear all recognizers
+   */
+  clear() {
+    this.recognizers.forEach((recognizers) => {
+      recognizers.forEach(r => r.dispose());
+    });
+    this.recognizers.clear();
+  }
+
+  /**
+   * Get statistics
+   */
+  getStats() {
+    let totalRecognizers = 0;
+    this.recognizers.forEach(recognizers => {
+      totalRecognizers += recognizers.length;
+    });
+
+    return {
+      elements: this.recognizers.size,
+      totalRecognizers: totalRecognizers
+    };
+  }
+}
+
+/**
+ * Main Gesture Manager
+ * 
+ * Central system for managing all gestures in the application
+ */
+class GestureManager {
+  constructor() {
+    this.arena = new GestureArena();
+  }
+
+  /**
+   * Register tap gesture
+   */
+  registerTap(elementId, callback, options = {}) {
+    const recognizer = new TapRecognizer(callback, options);
+    this.arena.register(elementId, recognizer);
+    return recognizer;
+  }
+
+  /**
+   * Register double tap gesture
+   */
+  registerDoubleTap(elementId, callback, options = {}) {
+    const recognizer = new TapRecognizer(callback, {
+      ...options,
+      minTaps: 2,
+      maxTaps: 2
+    });
+    this.arena.register(elementId, recognizer);
+    return recognizer;
+  }
+
+  /**
+   * Register long press gesture
+   */
+  registerLongPress(elementId, callback, options = {}) {
+    const recognizer = new LongPressRecognizer(callback, options);
+    this.arena.register(elementId, recognizer);
+    return recognizer;
+  }
+
+  /**
+   * Register swipe gesture
+   */
+  registerSwipe(elementId, callback, options = {}) {
+    const recognizer = new SwipeRecognizer(callback, options);
+    this.arena.register(elementId, recognizer);
+    return recognizer;
+  }
+
+  /**
+   * Register pan gesture
+   */
+  registerPan(elementId, callback, options = {}) {
+    const recognizer = new PanRecognizer(callback, options);
+    this.arena.register(elementId, recognizer);
+    return recognizer;
+  }
+
+  /**
+   * Register scale (pinch) gesture
+   */
+  registerScale(elementId, callback, options = {}) {
+    const recognizer = new ScaleRecognizer(callback, options);
+    this.arena.register(elementId, recognizer);
+    return recognizer;
+  }
+
+  /**
+   * Handle pointer/touch event
+   */
+  handleEvent(elementId, eventType, event) {
+    this.arena.handleEvent(elementId, eventType, event);
+  }
+
+  /**
+   * Unregister all gestures for element
+   */
+  unregisterAll(elementId) {
+    this.arena.unregister(elementId);
+  }
+
+  /**
+   * Get statistics
+   */
+  getStats() {
+    return this.arena.getStats();
+  }
+
+  /**
+   * Cleanup
+   */
+  dispose() {
+    this.arena.clear();
+  }
+}
+
+export {
+  GestureRecognizer,
+  DoubleTapRecognizer,
+  VerticalDragRecognizer,
+  HorizontalDragRecognizer,
+  TapRecognizer,
+  LongPressRecognizer,
+  SwipeRecognizer,
+  PanRecognizer,
+  ScaleRecognizer,
+  GestureArena,
+  GestureManager
+};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/src/index.js b/packages/flutterjs_runtime/flutterjs_runtime/src/index.js
similarity index 100%
rename from packages/flutterjs_engine/src/runtime/src/index.js
rename to packages/flutterjs_runtime/flutterjs_runtime/src/index.js
diff --git a/packages/flutterjs_runtime/flutterjs_runtime/src/inherited_element.js b/packages/flutterjs_runtime/flutterjs_runtime/src/inherited_element.js
new file mode 100644
index 00000000..55ac5b58
--- /dev/null
+++ b/packages/flutterjs_runtime/flutterjs_runtime/src/inherited_element.js
@@ -0,0 +1,680 @@
+/**
+ * FlutterJS InheritedElement
+ *
+ * Element for InheritedWidget. Manages dependency propagation down the widget tree.
+ * InheritedWidget allows efficient value passing without prop drilling.
+ *
+ * Key Features:
+ * - Track dependent elements
+ * - Notify dependents on value changes
+ * - Automatic rebuilds only for affected descendants
+ * - Memory efficient cleanup
+ *
+ * Usage:
+ * ```javascript
+ * class Theme extends InheritedWidget {
+ *   constructor({ data, child, key }) {
+ *     super({ child, key });
+ *     this.data = data;
+ *   }
+ *
+ *   updateShouldNotify(oldWidget) {
+ *     return this.data !== oldWidget.data;
+ *   }
+ *
+ *   static of(context) {
+ *     return context.dependOnInheritedWidgetOfExactType(Theme);
+ *   }
+ * }
+ * ```
+ */
+
+import { Element } from './element.js';
+
+/**
+ * InheritedElement Class
+ *
+ * Represents a live instance of an InheritedWidget in the element tree.
+ * Manages which elements depend on this InheritedWidget's value.
+ */
+class InheritedElement extends Element {
+  /**
+   * Create InheritedElement
+   * @param {InheritedWidget} widget - The widget
+   * @param {Element|null} parent - Parent element
+   * @param {RuntimeEngine} runtime - Runtime engine
+   */
+  constructor(widget, parent, runtime) {
+    super(widget, parent, runtime);
+
+    // Track elements that depend on this InheritedWidget's value
+    this.dependents = new Set();
+
+    // Cache the inherited value for quick access
+    this._inheritedValue = widget.data || widget.value || null;
+
+    // Track if we're in process of notifying dependents
+    this._notifying = false;
+
+    if (this.runtime?.debugMode) {
+      console.log(`[InheritedElement] Created ${widget.constructor.name}`);
+    }
+  }
+
+  /**
+   * Build the InheritedWidget's child
+   * InheritedWidget typically just wraps a child without additional rendering
+   *
+   * @returns {VNode} VNode for the child widget
+   */
+  build() {
+    if (!this.widget.child) {
+      throw new Error('InheritedWidget must have a child widget');
+    }
+
+    // ✅ FIX: Convert child widget to element and build it
+    const childWidget = this.widget.child;
+
+    // Check if child is already a VNode
+    if (childWidget && typeof childWidget === 'object' && childWidget.tag) {
+      // Already a VNode
+      return {
+        tag: 'div',
+        props: {
+          'data-widget': this.widget.constructor.name,
+          'data-element-id': this.id,
+          class: 'fjs-inherited-widget-wrapper',
+          style: { display: 'contents' }
+        },
+        children: [childWidget],
+        metadata: {
+          isInheritedWidget: true,
+          widgetType: this.widget.constructor.name
+        }
+      };
+    }
+
+    // ✅ CRITICAL: If it's a widget, convert to element and build
+    if (childWidget && typeof childWidget === 'object' &&
+      (childWidget.build || childWidget.createState || childWidget.render)) {
+
+      // Reuse existing element if possible
+      if (this._childElement) {
+        if (this._childElement.shouldRebuild(this._childElement.widget, childWidget)) {
+          this._childElement.updateWidget(childWidget);
+        } else {
+          this._childElement.widget = childWidget;
+          this._childElement.markNeedsBuild();
+        }
+      } else {
+        // Create new element
+        this._childElement = this.runtime.createElement(childWidget, this);
+        if (!this._childElement) {
+          throw new Error('Failed to create element from child widget');
+        }
+
+        // Register properly
+        this.addChild(this._childElement);
+
+        // Mount
+        if (!this._childElement.mounted) {
+          this._childElement.mount();
+        }
+      }
+
+      // Return the child's VNode (from the stable element)
+      const childVNode = this._childElement.vnode || this._childElement.build();
+
+      return {
+        tag: 'div',
+        props: {
+          'data-widget': this.widget.constructor.name,
+          'data-element-id': this.id,
+          class: 'fjs-inherited-widget-wrapper',
+          style: { display: 'contents' }
+        },
+        children: [childVNode],
+        metadata: {
+          isInheritedWidget: true,
+          widgetType: this.widget.constructor.name
+        }
+      };
+    }
+
+    // String or primitive
+    return {
+      tag: 'div',
+      props: {
+        'data-widget': this.widget.constructor.name,
+        'data-element-id': this.id,
+        class: 'fjs-inherited-widget-wrapper',
+        style: { display: 'contents' }
+      },
+      children: [childWidget],
+      metadata: {
+        isInheritedWidget: true,
+        widgetType: this.widget.constructor.name
+      }
+    };
+  }
+
+  /**
+   * Perform rebuild - required by Element base class
+   * @returns {VNode} VNode for the child widget
+   */
+  performRebuild() {
+    return this.build();
+  }
+
+  /**
+   * Register a dependent element
+   * Called when an element calls dependOnInheritedWidgetOfExactType
+   *
+   * @param {Element} element - Element that depends on this InheritedWidget
+   * @throws {Error} If element is null
+   */
+  addDependent(element) {
+    if (!element) {
+      throw new Error('Cannot add null element as dependent');
+    }
+
+    if (this.dependents.has(element)) {
+      if (this.runtime?.debugMode) {
+        console.warn(
+          `[InheritedElement] Element ${element.id} already registered as dependent`
+        );
+      }
+      return;
+    }
+
+    this.dependents.add(element);
+
+    if (this.runtime?.debugMode) {
+      console.log(
+        `[InheritedElement] Added dependent ${element.id} ` +
+        `(total: ${this.dependents.size})`
+      );
+    }
+  }
+
+  /**
+   * Remove a dependent element
+   * Called during cleanup
+   *
+   * @param {Element} element - Element to remove
+   */
+  removeDependent(element) {
+    if (!element) return;
+
+    const removed = this.dependents.delete(element);
+
+    if (removed && this.runtime?.debugMode) {
+      console.log(
+        `[InheritedElement] Removed dependent ${element.id} ` +
+        `(remaining: ${this.dependents.size})`
+      );
+    }
+  }
+
+  /**
+   * Check if element is a dependent
+   *
+   * @param {Element} element - Element to check
+   * @returns {boolean} True if element is dependent
+   */
+  hasDependent(element) {
+    return this.dependents.has(element);
+  }
+
+  /**
+   * Get number of dependents
+   *
+   * @returns {number} Count of dependent elements
+   */
+  get dependentCount() {
+    return this.dependents.size;
+  }
+
+  /**
+   * Update the InheritedWidget with new widget
+   * Checks if value changed, notifies dependents if needed
+   *
+   * @param {InheritedWidget} newWidget - New widget with potentially new data
+   */
+  update(newWidget) {
+    const oldWidget = this.widget;
+
+    // Call parent update
+    super.update(newWidget);
+
+    // Cache new value
+    const newValue = newWidget.data || newWidget.value || null;
+    const oldValue = this._inheritedValue;
+
+    this._inheritedValue = newValue;
+
+    // Check if we should notify dependents
+    if (this.widget.updateShouldNotify) {
+      try {
+        const shouldNotify = this.widget.updateShouldNotify(oldWidget);
+
+        if (shouldNotify) {
+          if (this.runtime?.debugMode) {
+            console.log(
+              `[InheritedElement] Value changed, notifying ${this.dependents.size} dependents`
+            );
+          }
+
+          this.notifyDependents();
+        } else if (this.runtime?.debugMode) {
+          console.log(
+            `[InheritedElement] Value changed but updateShouldNotify returned false`
+          );
+        }
+      } catch (error) {
+        console.error(
+          `[InheritedElement] Error in updateShouldNotify: ${error.message}`
+        );
+      }
+    }
+  }
+
+  /**
+   * Notify all dependent elements to rebuild
+   * Only notifies elements that are still mounted
+   */
+  notifyDependents() {
+    // Prevent recursive notifications
+    if (this._notifying) {
+      if (this.runtime?.debugMode) {
+        console.warn('[InheritedElement] Recursive notification detected, skipping');
+      }
+      return;
+    }
+
+    this._notifying = true;
+
+    try {
+      const startTime = this.runtime?.debugMode ? performance.now() : 0;
+      let notifiedCount = 0;
+
+      // Notify each dependent
+      for (const element of this.dependents) {
+        if (element.mounted && !element.dirty) {
+          element.markNeedsBuild();
+          notifiedCount++;
+        } else if (!element.mounted && this.runtime?.debugMode) {
+          console.warn(
+            `[InheritedElement] Dependent ${element.id} is not mounted, skipping`
+          );
+        }
+      }
+
+      if (this.runtime?.debugMode) {
+        const duration = performance.now() - startTime;
+        console.log(
+          `[InheritedElement] Notified ${notifiedCount} dependents in ${duration.toFixed(2)}ms`
+        );
+      }
+    } finally {
+      this._notifying = false;
+    }
+  }
+
+  /**
+   * Notify specific dependents (optimization)
+   * Use when you know only certain dependents need rebuild
+   *
+   * @param {Set<Element>} elements - Elements to notify
+   */
+  notifySpecificDependents(elements) {
+    if (this._notifying) return;
+
+    this._notifying = true;
+
+    try {
+      for (const element of elements) {
+        if (this.dependents.has(element) && element.mounted && !element.dirty) {
+          element.markNeedsBuild();
+        }
+      }
+    } finally {
+      this._notifying = false;
+    }
+  }
+
+  /**
+   * Mount element - initialize dependent tracking
+   */
+  mount() {
+    super.mount();
+
+    if (this.runtime?.debugMode) {
+      console.log(
+        `[InheritedElement] Mounted ${this.widget.constructor.name} ` +
+        `with ${this.dependents.size} dependents`
+      );
+    }
+  }
+
+  /**
+   * Unmount element - cleanup all dependent tracking
+   */
+  unmount() {
+    // Clear all dependent references
+    const dependentCount = this.dependents.size;
+
+    this.dependents.forEach(element => {
+      if (element.mounted) {
+        // Don't rebuild, just remove from tracking
+        element._inheritedDependencies?.delete(this.id);
+      }
+    });
+
+    this.dependents.clear();
+
+    if (this.runtime?.debugMode) {
+      console.log(
+        `[InheritedElement] Unmounted ${this.widget.constructor.name} ` +
+        `(cleaned up ${dependentCount} dependents)`
+      );
+    }
+
+    super.unmount();
+  }
+
+  /**
+   * Get statistics about this InheritedElement
+   *
+   * @returns {Object} Statistics object
+   */
+  getStats() {
+    const stats = super.getStats();
+
+    return {
+      ...stats,
+      type: 'InheritedElement',
+      inheritedValue: this._inheritedValue,
+      dependentCount: this.dependents.size,
+      dependents: Array.from(this.dependents).map(el => ({
+        id: el.id,
+        type: el.constructor.name,
+        mounted: el.mounted
+      }))
+    };
+  }
+}
+
+/**
+ * Base InheritedWidget Class
+ *
+ * Widgets that provide values to their descendants.
+ * Descendants access the value via context.dependOnInheritedWidgetOfExactType()
+ */
+class InheritedWidget {
+  /**
+   * Create InheritedWidget
+   * @param {Object} options - Widget options
+   * @param {Widget} options.child - Child widget to wrap
+   * @param {*} options.data - Value to provide (alternative to override in subclass)
+   * @param {*} options.value - Value to provide (preferred)
+   * @param {string} options.key - Widget key for reconciliation
+   */
+  constructor({ child, data, value, key } = {}) {
+    if (!child) {
+      throw new Error('InheritedWidget requires a child widget');
+    }
+
+    this.child = child;
+    this.data = data || value || null;
+    this.key = key;
+    this.type = 'InheritedWidget';
+  }
+
+  /**
+   * Determine if dependents should be notified of update
+   * Override in subclasses to optimize notifications
+   *
+   * @param {InheritedWidget} oldWidget - Previous widget
+   * @returns {boolean} True if dependents should rebuild
+   *
+   * @example
+   * updateShouldNotify(oldWidget) {
+   *   return this.data.theme !== oldWidget.data.theme;
+   * }
+   */
+  updateShouldNotify(oldWidget) {
+    // Default: always notify on any change
+    return this.data !== oldWidget.data;
+  }
+
+  /**
+   * Static helper to access this InheritedWidget from descendant
+   * Subclasses should override this
+   *
+   * @param {BuildContext} context - Build context
+   * @returns {InheritedWidget|null} This widget instance or null
+   *
+   * @example
+   * class Theme extends InheritedWidget {
+   *   static of(context) {
+   *     return context.dependOnInheritedWidgetOfExactType(Theme);
+   *   }
+   * }
+   *
+   * // Usage
+   * const theme = Theme.of(context);
+   */
+  static of(context) {
+    return context.dependOnInheritedWidgetOfExactType(this);
+  }
+
+  /**
+   * Create element for this widget
+   * Override to customize element type
+   *
+   * @param {Element} parent - Parent element
+   * @param {RuntimeEngine} runtime - Runtime engine
+   * @returns {Element} Element instance
+   */
+  createElement(parent, runtime) {
+    return new InheritedElement(this, parent, runtime);
+  }
+}
+
+/**
+ * ChangeNotifier - Allows imperative value updates
+ *
+ * Subclass this to create data classes that notify listeners of changes.
+ * More efficient than InheritedWidget for frequently changing values.
+ */
+class ChangeNotifier {
+  constructor() {
+    this.listeners = new Set();
+  }
+
+  /**
+   * Add listener
+   * @param {Function} listener - Callback called on change
+   */
+  addListener(listener) {
+    if (typeof listener !== 'function') {
+      throw new Error('Listener must be a function');
+    }
+    this.listeners.add(listener);
+  }
+
+  /**
+   * Remove listener
+   * @param {Function} listener - Listener to remove
+   */
+  removeListener(listener) {
+    this.listeners.delete(listener);
+  }
+
+  /**
+   * Remove all listeners
+   */
+  removeAllListeners() {
+    this.listeners.clear();
+  }
+
+  /**
+   * Notify all listeners of change
+   * Call this when data changes
+   */
+  notifyListeners() {
+    for (const listener of this.listeners) {
+      try {
+        listener();
+      } catch (error) {
+        console.error('[ChangeNotifier] Listener error:', error);
+      }
+    }
+  }
+
+  /**
+   * Check if has listeners
+   * @returns {boolean} True if any listeners registered
+   */
+  hasListeners() {
+    return this.listeners.size > 0;
+  }
+
+  /**
+   * Get listener count
+   * @returns {number} Number of listeners
+   */
+  get listenerCount() {
+    return this.listeners.size;
+  }
+
+  /**
+   * Dispose - cleanup all listeners
+   */
+  dispose() {
+    this.listeners.clear();
+  }
+}
+
+/**
+ * ValueNotifier - Simple ChangeNotifier for single values
+ *
+ * Efficient way to manage a single reactive value.
+ */
+class ValueNotifier extends ChangeNotifier {
+  /**
+   * Create ValueNotifier
+   * @param {*} initialValue - Initial value
+   */
+  constructor(initialValue) {
+    super();
+    this._value = initialValue;
+  }
+
+  /**
+   * Get current value
+   */
+  get value() {
+    return this._value;
+  }
+
+  /**
+   * Set value and notify listeners
+   */
+  set value(newValue) {
+    if (this._value !== newValue) {
+      this._value = newValue;
+      this.notifyListeners();
+    }
+  }
+
+  /**
+   * Get value
+   * @returns {*} Current value
+   */
+  getValue() {
+    return this._value;
+  }
+
+  /**
+   * Set value with optional notification
+   * @param {*} newValue - New value
+   * @param {boolean} notify - Whether to notify listeners (default: true)
+   */
+  setValue(newValue, notify = true) {
+    if (this._value !== newValue) {
+      this._value = newValue;
+      if (notify) {
+        this.notifyListeners();
+      }
+    }
+  }
+}
+
+/**
+ * Provider Widget - Helper for dependency injection
+ *
+ * Combines InheritedWidget with ChangeNotifier for reactive data.
+ */
+class Provider extends InheritedWidget {
+  /**
+   * Create Provider
+   * @param {Object} options
+   * @param {ChangeNotifier} options.notifier - ChangeNotifier instance
+   * @param {*} options.value - Static value (if not using notifier)
+   * @param {Widget} options.child - Child widget
+   * @param {string} options.key - Widget key
+   */
+  constructor({ notifier, value, child, key } = {}) {
+    super({ child, data: value, key });
+
+    if (notifier && !(notifier instanceof ChangeNotifier)) {
+      throw new Error('Provider requires a ChangeNotifier instance');
+    }
+
+    this.notifier = notifier;
+    this.listeners = [];
+  }
+
+  /**
+   * Only notify if notifier value actually changed
+   * @param {Provider} oldWidget - Previous widget
+   * @returns {boolean} Whether to notify
+   */
+  updateShouldNotify(oldWidget) {
+    // If using notifier, let it handle notifications
+    if (this.notifier && oldWidget.notifier === this.notifier) {
+      return false;
+    }
+
+    // If values are different, notify
+    return this.data !== oldWidget.data;
+  }
+
+  /**
+   * Get current provided value
+   * @returns {*} The value being provided
+   */
+  getValue() {
+    return this.notifier ? this.notifier.value : this.data;
+  }
+
+  /**
+   * Static helper to access provider
+   * @param {BuildContext} context
+   * @returns {Provider|null}
+   */
+  static of(context) {
+    return context.dependOnInheritedWidgetOfExactType(Provider);
+  }
+}
+
+
+export {
+  InheritedElement,
+  InheritedWidget,
+  ChangeNotifier,
+  ValueNotifier,
+  Provider
+};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/src/key.js b/packages/flutterjs_runtime/flutterjs_runtime/src/key.js
similarity index 100%
rename from packages/flutterjs_engine/src/runtime/src/key.js
rename to packages/flutterjs_runtime/flutterjs_runtime/src/key.js
diff --git a/packages/flutterjs_engine/src/runtime/src/memory_manager.js b/packages/flutterjs_runtime/flutterjs_runtime/src/memory_manager.js
similarity index 100%
rename from packages/flutterjs_engine/src/runtime/src/memory_manager.js
rename to packages/flutterjs_runtime/flutterjs_runtime/src/memory_manager.js
diff --git a/packages/flutterjs_runtime/flutterjs_runtime/src/runtime_engine.js b/packages/flutterjs_runtime/flutterjs_runtime/src/runtime_engine.js
new file mode 100644
index 00000000..3682ea98
--- /dev/null
+++ b/packages/flutterjs_runtime/flutterjs_runtime/src/runtime_engine.js
@@ -0,0 +1,462 @@
+/**
+ * FlutterJS Runtime Engine
+ * 
+ * Core runtime that manages widget lifecycle, element tree, and coordinates
+ * all system operations. This is the heart of the FlutterJS framework.
+ * 
+ * Responsibilities:
+ * - Mount and unmount applications
+ * - Create and manage element tree
+ * - Schedule and perform updates
+ * - Track dirty elements
+ * - Coordinate with service registry
+ * - Memory management
+ */
+
+// Import Element classes from element.js
+import {
+  Element,
+  StatelessElement,
+  StatefulElement,
+
+  ComponentElement
+} from "../src/element.js";
+
+import { InheritedElement, } from "../src/inherited_element.js";
+
+// Polyfill Dart print
+if (typeof window !== 'undefined') {
+  window.print = console.log;
+} else if (typeof global !== 'undefined') {
+  global.print = console.log;
+}
+
+
+class RuntimeEngine {
+  constructor() {
+    // Root references
+    this.rootElement = null;           // Root DOM element
+    this.rootWidget = null;            // Root widget (e.g., MyApp)
+    this.elementTree = null;           // Root element instance
+
+    // Update management
+    this.dirtyElements = new Set();    // Elements needing rebuild
+    this.updateScheduled = false;      // Update queued?
+    this.isUpdating = false;           // Currently performing update?
+
+    // Context and services
+    this.buildContext = null;          // Global context
+    this.serviceRegistry = new Map();  // Framework services
+
+    // Performance tracking
+    this.frameCounter = 0;
+    this.buildTime = 0;
+    this.renderTime = 0;
+    this.lastUpdateTime = 0;
+
+    // State
+    this.mounted = false;
+    this.disposed = false;
+
+    // Configuration
+    this.config = {
+      batchUpdates: true,
+      debugMode: false,
+      performanceMonitoring: true
+    };
+  }
+
+  /**
+   * Initialize and mount application
+   * @param {Widget} rootWidget - Root widget of the application
+   * @param {HTMLElement} containerElement - DOM container to mount into
+   * @returns {RuntimeEngine} this instance for chaining
+   */
+  mount(rootWidget, containerElement) {
+    if (this.mounted) {
+      throw new Error('Runtime already mounted. Call unmount() first.');
+    }
+
+    if (!rootWidget) {
+      throw new Error('Root widget is required');
+    }
+
+    if (!containerElement || !(containerElement instanceof HTMLElement)) {
+      throw new Error('Valid container element is required');
+    }
+
+    try {
+      this.rootWidget = rootWidget;
+      this.rootElement = containerElement;
+
+      // Create root element from widget
+      this.elementTree = this.createElement(rootWidget, null);
+
+      if (!this.elementTree) {
+        throw new Error('Failed to create root element');
+      }
+
+      // Build initial VNode tree
+      const startBuild = performance.now();
+      const vnode = this.elementTree.build();
+      this.buildTime = performance.now() - startBuild;
+
+      if (!vnode) {
+        throw new Error('Root element build() returned null');
+      }
+
+      // Render to DOM
+      const startRender = performance.now();
+      this.renderVNode(vnode, containerElement);
+      this.renderTime = performance.now() - startRender;
+
+      // Store DOM reference in element
+      this.elementTree.domNode = containerElement.firstChild;
+
+      // Mount element tree (calls lifecycle hooks)
+      this.elementTree.mount();
+
+      this.mounted = true;
+
+      if (this.config.debugMode) {
+        console.log(`[RuntimeEngine] Mounted in ${(this.buildTime + this.renderTime).toFixed(2)}ms`);
+        console.log(`  - Build: ${this.buildTime.toFixed(2)}ms`);
+        console.log(`  - Render: ${this.renderTime.toFixed(2)}ms`);
+      }
+
+      return this;
+    } catch (error) {
+      this.cleanup();
+      throw new Error(`Failed to mount application: ${error.message}`);
+    }
+  }
+
+  /**
+   * Create element from widget
+   * @param {Widget} widget - Widget to create element for
+   * @param {Element|null} parent - Parent element
+   * @returns {Element} Created element instance
+   */
+  createElement(widget, parent) {
+    if (!widget) {
+      throw new Error('Widget is required');
+    }
+
+    // Check if widget has custom element creation
+    if (typeof widget.createElement === 'function') {
+      return widget.createElement(parent, this);
+    }
+
+    // Determine element type based on widget class name
+    const widgetType = widget.constructor.name;
+
+    // Check for StatelessWidget
+    if (this.isStatelessWidget(widget)) {
+      return new StatelessElement(widget, parent, this);
+    }
+
+    // Check for StatefulWidget
+    if (this.isStatefulWidget(widget)) {
+      return new StatefulElement(widget, parent, this);
+    }
+
+    // Check for InheritedWidget
+    if (this.isInheritedWidget(widget)) {
+      return new InheritedElement(widget, parent, this);
+    }
+
+    // Check for custom component
+    if (this.isComponentWidget(widget)) {
+      return new ComponentElement(widget, parent, this);
+    }
+
+    throw new Error(`Unknown widget type: ${widgetType}. Widget must extend StatelessWidget, StatefulWidget, InheritedWidget, or have render/build method.`);
+  }
+
+  /**
+   * Check if widget is StatelessWidget
+   */
+  isStatelessWidget(widget) {
+    return widget.constructor.name === 'StatelessWidget' ||
+      (widget.constructor.prototype &&
+        widget.constructor.prototype.constructor.name === 'StatelessWidget') ||
+      (typeof widget.build === 'function' && !widget.createState && !widget.child);
+  }
+
+  /**
+   * Check if widget is StatefulWidget
+   */
+  isStatefulWidget(widget) {
+    return widget.constructor.name === 'StatefulWidget' ||
+      (widget.constructor.prototype &&
+        widget.constructor.prototype.constructor.name === 'StatefulWidget') ||
+      (typeof widget.createState === 'function');
+  }
+
+  /**
+   * Check if widget is InheritedWidget
+   */
+  isInheritedWidget(widget) {
+    return widget.constructor.name === 'InheritedWidget' ||
+      (widget.constructor.prototype &&
+        widget.constructor.prototype.constructor.name === 'InheritedWidget') ||
+      (widget.child !== undefined && typeof widget.updateShouldNotify === 'function');
+  }
+
+  /**
+   * Check if widget is a custom component
+   */
+  isComponentWidget(widget) {
+    return typeof widget.render === 'function' ||
+      (typeof widget.build === 'function' &&
+        typeof widget.createState !== 'function');
+  }
+
+  /**
+   * Render VNode to DOM (simple implementation)
+   */
+  renderVNode(vnode, container) {
+    if (!vnode) return;
+
+    if (typeof vnode === 'string') {
+      container.textContent = vnode;
+      return;
+    }
+
+    const element = document.createElement(vnode.tag || 'div');
+
+    // Apply props
+    if (vnode.props) {
+      Object.entries(vnode.props).forEach(([key, value]) => {
+        if (key === 'className') {
+          element.className = value;
+        } else if (key === 'style' && typeof value === 'object') {
+          Object.assign(element.style, value);
+        } else if (!key.startsWith('data-')) {
+          element.setAttribute(key, value);
+        } else {
+          element.setAttribute(key, value);
+        }
+      });
+    }
+
+    // Apply inline style
+    if (vnode.style) {
+      Object.assign(element.style, vnode.style);
+    }
+
+    // Render children
+    if (vnode.children) {
+      vnode.children.forEach(child => {
+        if (typeof child === 'string') {
+          element.appendChild(document.createTextNode(child));
+        } else if (child) {
+          const childContainer = document.createElement('div');
+          this.renderVNode(child, childContainer);
+          if (childContainer.firstChild) {
+            element.appendChild(childContainer.firstChild);
+          }
+        }
+      });
+    }
+
+    container.appendChild(element);
+  }
+
+  /**
+   * Schedule element for rebuild
+   * @param {Element} element - Element that needs rebuild
+   */
+  markNeedsBuild(element) {
+    if (!element) {
+      console.warn('[RuntimeEngine] markNeedsBuild called with null element');
+      return;
+    }
+
+    if (!this.mounted) {
+      if (this.config.debugMode) {
+        console.warn('[RuntimeEngine] markNeedsBuild called but runtime not mounted');
+      }
+      return;
+    }
+
+    this.dirtyElements.add(element);
+    this.scheduleUpdate();
+  }
+
+  /**
+   * Schedule update on next frame
+   */
+  scheduleUpdate() {
+    if (this.updateScheduled) return;
+    if (this.disposed) return;
+
+    this.updateScheduled = true;
+
+    requestAnimationFrame(() => {
+      this.performUpdate();
+    });
+  }
+
+  /**
+   * Perform update - rebuild dirty elements
+   */
+  performUpdate() {
+    if (this.disposed) return;
+    if (this.isUpdating) {
+      // Already updating, reschedule
+      this.updateScheduled = true;
+      return;
+    }
+
+    this.updateScheduled = false;
+    this.isUpdating = true;
+
+    try {
+      const startTime = performance.now();
+
+      // Get elements to rebuild
+      const elements = Array.from(this.dirtyElements);
+
+      if (elements.length === 0) {
+        this.isUpdating = false;
+        return;
+      }
+
+      // Sort by depth (parents before children)
+      elements.sort((a, b) => a.depth - b.depth);
+
+      // Rebuild each dirty element
+      for (const element of elements) {
+        if (element.mounted && this.dirtyElements.has(element)) {
+          try {
+            element.rebuild();
+          } catch (error) {
+            console.error(`[RuntimeEngine] Error rebuilding element:`, error);
+            // Continue with other elements
+          }
+        }
+      }
+
+      // Clear dirty elements
+      this.dirtyElements.clear();
+
+      // Track performance
+      this.buildTime = performance.now() - startTime;
+      this.lastUpdateTime = Date.now();
+      this.frameCounter++;
+
+      if (this.config.performanceMonitoring && this.buildTime > 16) {
+        console.warn(`[RuntimeEngine] Slow update: ${this.buildTime.toFixed(2)}ms (${elements.length} elements)`);
+      }
+
+      if (this.config.debugMode) {
+        console.log(`[RuntimeEngine] Updated ${elements.length} elements in ${this.buildTime.toFixed(2)}ms`);
+      }
+    } finally {
+      this.isUpdating = false;
+
+      // If more updates were scheduled during update, process them
+      if (this.updateScheduled && this.dirtyElements.size > 0) {
+        this.scheduleUpdate();
+      }
+    }
+  }
+
+  /**
+   * Unmount entire application
+   */
+  unmount() {
+    if (!this.mounted) {
+      console.warn('[RuntimeEngine] unmount called but not mounted');
+      return;
+    }
+
+    try {
+      if (this.elementTree) {
+        this.elementTree.unmount();
+        this.elementTree = null;
+      }
+
+      this.cleanup();
+
+      if (this.config.debugMode) {
+        console.log('[RuntimeEngine] Unmounted');
+      }
+    } catch (error) {
+      console.error('[RuntimeEngine] Error during unmount:', error);
+    }
+  }
+
+  /**
+   * Cleanup internal state
+   */
+  cleanup() {
+    this.dirtyElements.clear();
+    this.serviceRegistry.clear();
+    this.mounted = false;
+    this.updateScheduled = false;
+    this.isUpdating = false;
+  }
+
+  /**
+   * Dispose runtime (cannot be used after this)
+   */
+  dispose() {
+    if (this.disposed) return;
+
+    this.unmount();
+
+    this.rootElement = null;
+    this.rootWidget = null;
+    this.buildContext = null;
+
+    this.disposed = true;
+
+    if (this.config.debugMode) {
+      console.log('[RuntimeEngine] Disposed');
+    }
+  }
+
+  /**
+   * Get performance statistics
+   */
+  getStats() {
+    return {
+      mounted: this.mounted,
+      frameCount: this.frameCounter,
+      buildTime: this.buildTime,
+      renderTime: this.renderTime,
+      lastUpdateTime: this.lastUpdateTime,
+      dirtyElements: this.dirtyElements.size,
+      updateScheduled: this.updateScheduled
+    };
+  }
+
+  /**
+   * Register a service
+   */
+  registerService(name, service) {
+    this.serviceRegistry.set(name, service);
+  }
+
+  /**
+   * Get a service
+   */
+  getService(name) {
+    return this.serviceRegistry.get(name);
+  }
+
+  /**
+   * Enable/disable debug mode
+   */
+  setDebugMode(enabled) {
+    this.config.debugMode = enabled;
+  }
+}
+
+
+
+export {
+  RuntimeEngine
+};
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/runtime/src/service_registry.js b/packages/flutterjs_runtime/flutterjs_runtime/src/service_registry.js
similarity index 100%
rename from packages/flutterjs_engine/src/runtime/src/service_registry.js
rename to packages/flutterjs_runtime/flutterjs_runtime/src/service_registry.js
diff --git a/packages/flutterjs_engine/src/runtime/src/state.js b/packages/flutterjs_runtime/flutterjs_runtime/src/state.js
similarity index 100%
rename from packages/flutterjs_engine/src/runtime/src/state.js
rename to packages/flutterjs_runtime/flutterjs_runtime/src/state.js
diff --git a/packages/flutterjs_engine/src/runtime/src/state_tracker.js b/packages/flutterjs_runtime/flutterjs_runtime/src/state_tracker.js
similarity index 100%
rename from packages/flutterjs_engine/src/runtime/src/state_tracker.js
rename to packages/flutterjs_runtime/flutterjs_runtime/src/state_tracker.js
diff --git a/packages/flutterjs_engine/src/runtime/src/update_batcher.js b/packages/flutterjs_runtime/flutterjs_runtime/src/update_batcher.js
similarity index 100%
rename from packages/flutterjs_engine/src/runtime/src/update_batcher.js
rename to packages/flutterjs_runtime/flutterjs_runtime/src/update_batcher.js
diff --git a/packages/flutterjs_runtime/lib/flutterjs_runtime.dart b/packages/flutterjs_runtime/lib/flutterjs_runtime.dart
new file mode 100644
index 00000000..bc267075
--- /dev/null
+++ b/packages/flutterjs_runtime/lib/flutterjs_runtime.dart
@@ -0,0 +1,26 @@
+/// FlutterJS FlutterjsRuntime
+/// 
+/// FlutterJS core runtime implementation
+/// 
+/// The actual implementation is in JavaScript.
+/// This package is a metadata wrapper published to pub.dev.
+/// 
+/// ## Usage
+/// 
+/// Add to your `pubspec.yaml`:
+/// ```yaml
+/// dependencies:
+///   flutterjs_runtime: ^0.1.0
+/// ```
+/// 
+/// Then run:
+/// ```bash
+/// flutterjs get
+/// ```
+/// 
+/// The package will be installed to: `build/flutterjs/node_modules/@flutterjs/flutterjs_runtime`
+/// 
+/// See `example/` for a complete working app.
+library flutterjs_runtime;
+
+// The real implementation is in js/src/
diff --git a/packages/flutterjs_runtime/pubspec.yaml b/packages/flutterjs_runtime/pubspec.yaml
new file mode 100644
index 00000000..2aef1497
--- /dev/null
+++ b/packages/flutterjs_runtime/pubspec.yaml
@@ -0,0 +1,24 @@
+name: flutterjs_runtime
+version: 0.1.0
+description: FlutterJS core runtime implementation
+
+homepage: https://github.com/flutterjs/flutterjs_runtime
+repository: https://github.com/flutterjs/flutterjs_runtime
+issue_tracker: https://github.com/flutterjs/flutterjs_runtime/issues
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+# FlutterJS metadata
+flutterjs:
+  npm_package: "@flutterjs/flutterjs_runtime"
+  implementation_language: "javascript"
+  js_entry: "js/src/index.js"
diff --git a/packages/flutterjs_seo/.gitignore b/packages/flutterjs_seo/.gitignore
new file mode 100644
index 00000000..1d4cb04d
--- /dev/null
+++ b/packages/flutterjs_seo/.gitignore
@@ -0,0 +1,31 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+build/
+dist/
+.dev/
+.debug/
+
+# Generated files
+.flutterjs/
+.cache/
+
+# Dart
+.dart_tool/
+.packages
+pubspec.lock
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Logs
+*.log
+npm-debug.log*
diff --git a/packages/flutterjs_seo/.pubignore b/packages/flutterjs_seo/.pubignore
new file mode 100644
index 00000000..bae5ffcf
--- /dev/null
+++ b/packages/flutterjs_seo/.pubignore
@@ -0,0 +1,11 @@
+# Exclude JavaScript implementation from pub.dev
+js/
+node_modules/
+dist/
+build/
+.git/
+.github/
+test/
+package-lock.json
+.vscode/
+.idea/
diff --git a/packages/flutterjs_seo/CHANGELOG.md b/packages/flutterjs_seo/CHANGELOG.md
new file mode 100644
index 00000000..13187808
--- /dev/null
+++ b/packages/flutterjs_seo/CHANGELOG.md
@@ -0,0 +1,3 @@
+## 0.1.0
+
+* Initial release
diff --git a/packages/flutterjs_seo/LICENSE b/packages/flutterjs_seo/LICENSE
new file mode 100644
index 00000000..14fac913
--- /dev/null
+++ b/packages/flutterjs_seo/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/flutterjs_seo/README.md b/packages/flutterjs_seo/README.md
new file mode 100644
index 00000000..2fe25e8e
--- /dev/null
+++ b/packages/flutterjs_seo/README.md
@@ -0,0 +1,58 @@
+# FlutterjsSeo
+
+SEO metadata management for FlutterJS Applications
+
+## Installation
+
+Add to `pubspec.yaml`:
+
+```yaml
+dependencies:
+  flutterjs_seo: ^0.1.0
+```
+
+Then run:
+
+```bash
+flutterjs get
+```
+
+## Usage
+
+See `example/` for a complete Flutter app.
+
+## JavaScript Implementation
+
+The actual implementation is in `js/src/` (JavaScript).
+
+To develop:
+
+```bash
+cd js
+npm install
+```
+
+## Features
+
+- Lightweight implementation
+- SEO-friendly (FlutterJS rendering)
+- Easy to use
+
+## Publishing
+
+### 1. Publish JavaScript to npm
+
+```bash
+cd js
+npm publish
+```
+
+### 2. Publish Dart wrapper to pub.dev
+
+```bash
+dart pub publish
+```
+
+## License
+
+MIT
diff --git a/packages/flutterjs_seo/example/lib/main.dart b/packages/flutterjs_seo/example/lib/main.dart
new file mode 100644
index 00000000..d52a170a
--- /dev/null
+++ b/packages/flutterjs_seo/example/lib/main.dart
@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'FlutterjsSeo Example',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: const ExamplePage(),
+    );
+  }
+}
+
+class ExamplePage extends StatefulWidget {
+  const ExamplePage({Key? key}) : super(key: key);
+
+  @override
+  State<ExamplePage> createState() => _ExamplePageState();
+}
+
+class _ExamplePageState extends State<ExamplePage> {
+  String result = 'Click the button to test';
+
+  void _testPackage() {
+    setState(() {
+      // This will call the JavaScript implementation when running with FlutterJS
+      result = 'FlutterjsSeo is ready!\n\nRun: flutterjs run --to-js --serve';
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('FlutterjsSeo Example'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              result,
+              textAlign: TextAlign.center,
+              style: const TextStyle(fontSize: 16),
+            ),
+            const SizedBox(height: 20),
+            ElevatedButton(
+              onPressed: _testPackage,
+              child: const Text('Test FlutterjsSeo'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/packages/flutterjs_seo/example/pubspec.yaml b/packages/flutterjs_seo/example/pubspec.yaml
new file mode 100644
index 00000000..8e1b3c90
--- /dev/null
+++ b/packages/flutterjs_seo/example/pubspec.yaml
@@ -0,0 +1,15 @@
+name: flutterjs_seo_example
+description: Example app for flutterjs_seo
+
+publish_to: 'none'
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
diff --git a/packages/flutterjs_seo/flutterjs_seo/build.js b/packages/flutterjs_seo/flutterjs_seo/build.js
new file mode 100644
index 00000000..d722e4d5
--- /dev/null
+++ b/packages/flutterjs_seo/flutterjs_seo/build.js
@@ -0,0 +1,99 @@
+/**
+ * Build script for @flutterjs/flutterjs_seo
+ * 
+ * Generates exports.json manifest for the import resolver system
+ */
+
+import { readFileSync, writeFileSync, readdirSync, statSync } from 'fs';
+import { join, extname } from 'path';
+
+const srcDir = './src';
+
+/**
+ * Get all JavaScript files recursively
+ */
+function getAllJsFiles(dir, fileList = []) {
+  const files = readdirSync(dir);
+  
+  for (const file of files) {
+    const filePath = join(dir, file);
+    const stat = statSync(filePath);
+    
+    if (stat.isDirectory()) {
+      getAllJsFiles(filePath, fileList);
+    } else if (extname(file) === '.js') {
+      fileList.push(filePath);
+    }
+  }
+  
+  return fileList;
+}
+
+/**
+ * Scan all source files and generate exports.json manifest
+ * This manifest tells the Dart code generator what symbols this package exports
+ */
+function generateExportManifest(sourceFiles) {
+  const manifest = {
+    package: '@flutterjs/flutterjs_seo',
+    version: '0.1.0',
+    exports: []
+  };
+
+  // Regex patterns to match different export types
+  const exportRegex = /export\s*{\s*([^}]+)\s*}/g;
+  const exportStarRegex = /export\s*\*\s*from/g;
+  const classRegex = /export\s+class\s+(\w+)/g;
+  const functionRegex = /export\s+function\s+(\w+)/g;
+  const constRegex = /export\s+const\s+(\w+)/g;
+
+  for (const srcFile of sourceFiles) {
+    const content = readFileSync(srcFile, 'utf8');
+    
+    // Find named exports: export { Foo, Bar }
+    for (const match of content.matchAll(exportRegex)) {
+      const symbols = match[1]
+        .split(',')
+        .map(s => s.trim())
+        .map(s => s.split(/\s+as\s+/).pop()) // Handle "export { Foo as Bar }"
+        .filter(s => s && !s.includes('from'));
+      manifest.exports.push(...symbols);
+    }
+    
+    // Find class exports: export class Foo
+    for (const match of content.matchAll(classRegex)) {
+      manifest.exports.push(match[1]);
+    }
+    
+    // Find function exports: export function foo()
+    for (const match of content.matchAll(functionRegex)) {
+      manifest.exports.push(match[1]);
+    }
+    
+    // Find const exports: export const FOO
+    for (const match of content.matchAll(constRegex)) {
+      manifest.exports.push(match[1]);
+    }
+  }
+
+  // Remove duplicates and sort
+  manifest.exports = [...new Set(manifest.exports)].sort();
+
+  writeFileSync('./exports.json', JSON.stringify(manifest, null, 2) + '\n');
+  console.log(`📋 Generated exports.json with ${manifest.exports.length} symbols\n`);
+}
+
+// Main build process
+async function build() {
+  console.log('🚀 Building @flutterjs/flutterjs_seo...\n');
+
+  const allFiles = getAllJsFiles(srcDir);
+  console.log(`📦 Found ${allFiles.length} JavaScript files\n`);
+
+  // Generate export manifest
+  generateExportManifest(allFiles);
+
+  console.log('✅ Build successful!\n');
+}
+
+build().catch(console.error);
diff --git a/packages/flutterjs_seo/flutterjs_seo/package.json b/packages/flutterjs_seo/flutterjs_seo/package.json
new file mode 100644
index 00000000..3809cfb9
--- /dev/null
+++ b/packages/flutterjs_seo/flutterjs_seo/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@flutterjs/flutterjs_seo",
+  "version": "0.1.0",
+  "description": "SEO metadata management for FlutterJS Applications",
+  "main": "src/index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"No tests yet\"",
+    "prepublishOnly": "echo \"Ready to publish\""
+  },
+  "keywords": [
+    "flutterjs",
+    "flutterjs_seo"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/flutterjsdev/flutterjs.git"
+  },
+  "files": [
+    "src/",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@flutterjs/runtime": "file:../../flutterjs_runtime"
+  }
+}
\ No newline at end of file
diff --git a/packages/flutterjs_seo/flutterjs_seo/src/index.js b/packages/flutterjs_seo/flutterjs_seo/src/index.js
new file mode 100644
index 00000000..d2467655
--- /dev/null
+++ b/packages/flutterjs_seo/flutterjs_seo/src/index.js
@@ -0,0 +1,2 @@
+export * from "./seo.js";
+export * from "./seo_manager.js";
diff --git a/packages/flutterjs_seo/flutterjs_seo/src/seo.js b/packages/flutterjs_seo/flutterjs_seo/src/seo.js
new file mode 100644
index 00000000..8048f605
--- /dev/null
+++ b/packages/flutterjs_seo/flutterjs_seo/src/seo.js
@@ -0,0 +1,60 @@
+import { State, StatefulElement } from "@flutterjs/runtime";
+import { SeoManager } from "./seo_manager.js";
+
+// Helper for StatefulWidget
+class StatefulWidget {
+    constructor(key) {
+        this.key = key;
+    }
+
+    createState() {
+        throw new Error("createState() not implemented");
+    }
+
+    createElement(parent, runtime) {
+        return new StatefulElement(this, parent, runtime);
+    }
+}
+
+export class Seo extends StatefulWidget {
+    constructor({ key, title, meta, child, debug = false } = {}) {
+        super(key);
+        this.title = title;
+        this.meta = meta;
+        this.child = child;
+        this.debug = debug;
+    }
+
+    createState() {
+        return new _SeoState();
+    }
+
+    static head({ title, meta } = {}) {
+        SeoManager.instance.update({ title, meta });
+    }
+}
+
+class _SeoState extends State {
+    initState() {
+        this._updateSeo();
+    }
+
+    didUpdateWidget(oldWidget) {
+        this._updateSeo();
+    }
+
+    _updateSeo() {
+        const { title, meta, debug } = this.widget;
+        SeoManager.instance.update({ title, meta });
+
+        if (debug) {
+            setTimeout(() => {
+                SeoManager.instance.verify({ title, meta });
+            }, 100);
+        }
+    }
+
+    build(context) {
+        return this.widget.child;
+    }
+}
diff --git a/packages/flutterjs_seo/flutterjs_seo/src/seo_manager.js b/packages/flutterjs_seo/flutterjs_seo/src/seo_manager.js
new file mode 100644
index 00000000..7af149ad
--- /dev/null
+++ b/packages/flutterjs_seo/flutterjs_seo/src/seo_manager.js
@@ -0,0 +1,79 @@
+export class SeoManager {
+    static _instance;
+
+    static get instance() {
+        if (!SeoManager._instance) {
+            SeoManager._instance = new SeoManager();
+        }
+        return SeoManager._instance;
+    }
+
+    constructor() {
+        this._title = null;
+        this._meta = {};
+    }
+
+    update({ title, meta } = {}) {
+        if (title) {
+            this._title = title;
+            document.title = title;
+        }
+
+        if (meta) {
+            Object.assign(this._meta, meta);
+            this._applyMeta();
+        }
+    }
+
+    _applyMeta() {
+        Object.entries(this._meta).forEach(([key, content]) => {
+            // Determine if we should use 'name' or 'property'
+            // OpenGraph (og:) and Twitter (twitter:) tags usually use 'property' or 'name' depending on spec,
+            // but standard is: og:* uses property, others use name.
+            // However, simplicity: if it starts with 'og:', use property.
+            const useProperty = key.startsWith('og:');
+            const attrName = useProperty ? 'property' : 'name';
+
+            let metaTag = document.querySelector(`meta[${attrName}="${key}"]`);
+
+            if (!metaTag) {
+                metaTag = document.createElement('meta');
+                metaTag.setAttribute(attrName, key);
+                document.head.appendChild(metaTag);
+            }
+            metaTag.setAttribute('content', content);
+        });
+    }
+
+    verify({ title, meta }) {
+        console.group('🔍 SEO Verification Checklist');
+        let pass = true;
+
+        if (title) {
+            const currentTitle = document.title;
+            const match = currentTitle === title;
+            pass = pass && match;
+            console.log(match ? '✅ Title Match' : '❌ Title Mismatch', `| Expected: "${title}" | Actual: "${currentTitle}"`);
+        }
+
+        if (meta) {
+            Object.entries(meta).forEach(([key, content]) => {
+                const useProperty = key.startsWith('og:');
+                const attrName = useProperty ? 'property' : 'name';
+                const tag = document.querySelector(`meta[${attrName}="${key}"]`);
+                const actual = tag ? tag.getAttribute('content') : null;
+                const match = actual === content;
+                pass = pass && match;
+
+                console.log(match ? `✅ Meta[${key}] Match` : `❌ Meta[${key}] Mismatch`, `| Expected: "${content}" | Actual: "${actual}"`);
+            });
+        }
+        console.groupEnd();
+
+        if (pass) {
+            console.log('%c SEO VERIFICATION PASSED ', 'background: #22c55e; color: #ffffff; padding: 4px; border-radius: 4px; font-weight: bold;');
+        } else {
+            console.log('%c SEO VERIFICATION FAILED ', 'background: #ef4444; color: #ffffff; padding: 4px; border-radius: 4px; font-weight: bold;');
+        }
+    }
+}
diff --git a/packages/flutterjs_seo/lib/flutterjs_seo.dart b/packages/flutterjs_seo/lib/flutterjs_seo.dart
new file mode 100644
index 00000000..8eaa6cf7
--- /dev/null
+++ b/packages/flutterjs_seo/lib/flutterjs_seo.dart
@@ -0,0 +1,41 @@
+library flutterjs_seo;
+
+import 'package:flutter/widgets.dart';
+
+/// A widget that manages SEO metadata (title and meta tags).
+///
+/// This widget doesn't render any visible UI itself but injects
+/// the provided [title] and [meta] tags into the document head.
+/// It renders its [child] widget.
+class Seo extends StatefulWidget {
+  final String? title;
+  final Map<String, String>? meta;
+  final Widget child;
+  final bool debug;
+
+  const Seo({
+    Key? key,
+    this.title,
+    this.meta,
+    required this.child,
+    this.debug = false,
+  }) : super(key: key);
+
+  @override
+  State<Seo> createState() => _SeoState();
+
+  /// Imperatively update the document head.
+  ///
+  /// Use this for global updates or setting defaults before the app mounts.
+  static void head({String? title, Map<String, String>? meta}) {
+    // Maps to JS implementation static method
+  }
+}
+
+class _SeoState extends State<Seo> {
+  // Logic maps to JS
+  @override
+  Widget build(BuildContext context) {
+    return widget.child;
+  }
+}
diff --git a/packages/flutterjs_seo/pubspec.yaml b/packages/flutterjs_seo/pubspec.yaml
new file mode 100644
index 00000000..6d2754c7
--- /dev/null
+++ b/packages/flutterjs_seo/pubspec.yaml
@@ -0,0 +1,25 @@
+name: flutterjs_seo
+version: 0.1.0
+description: SEO metadata management for FlutterJS Applications
+
+homepage: https://github.com/flutterjs/flutterjs_seo
+repository: https://github.com/flutterjs/flutterjs_seo
+issue_tracker: https://github.com/flutterjs/flutterjs_seo/issues
+resolution: workspace
+
+environment:
+  sdk: '^3.11.0-113.0.dev'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+# FlutterJS metadata
+flutterjs:
+  npm_package: "@flutterjs/flutterjs_seo"
+  implementation_language: "javascript"
+  js_entry: "js/src/index.js"
diff --git a/packages/flutterjs_services/.gitignore b/packages/flutterjs_services/.gitignore
new file mode 100644
index 00000000..1d4cb04d
--- /dev/null
+++ b/packages/flutterjs_services/.gitignore
@@ -0,0 +1,31 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+build/
+dist/
+.dev/
+.debug/
+
+# Generated files
+.flutterjs/
+.cache/
+
+# Dart
+.dart_tool/
+.packages
+pubspec.lock
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Logs
+*.log
+npm-debug.log*
diff --git a/packages/flutterjs_services/.pubignore b/packages/flutterjs_services/.pubignore
new file mode 100644
index 00000000..bae5ffcf
--- /dev/null
+++ b/packages/flutterjs_services/.pubignore
@@ -0,0 +1,11 @@
+# Exclude JavaScript implementation from pub.dev
+js/
+node_modules/
+dist/
+build/
+.git/
+.github/
+test/
+package-lock.json
+.vscode/
+.idea/
diff --git a/packages/flutterjs_services/CHANGELOG.md b/packages/flutterjs_services/CHANGELOG.md
new file mode 100644
index 00000000..13187808
--- /dev/null
+++ b/packages/flutterjs_services/CHANGELOG.md
@@ -0,0 +1,3 @@
+## 0.1.0
+
+* Initial release
diff --git a/packages/flutterjs_services/LICENSE b/packages/flutterjs_services/LICENSE
new file mode 100644
index 00000000..14fac913
--- /dev/null
+++ b/packages/flutterjs_services/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/flutterjs_services/README.md b/packages/flutterjs_services/README.md
new file mode 100644
index 00000000..2d2033fb
--- /dev/null
+++ b/packages/flutterjs_services/README.md
@@ -0,0 +1,58 @@
+# FlutterjsServices
+
+A FlutterJS package
+
+## Installation
+
+Add to `pubspec.yaml`:
+
+```yaml
+dependencies:
+  flutterjs_services: ^0.1.0
+```
+
+Then run:
+
+```bash
+flutterjs get
+```
+
+## Usage
+
+See `example/` for a complete Flutter app.
+
+## JavaScript Implementation
+
+The actual implementation is in `js/src/` (JavaScript).
+
+To develop:
+
+```bash
+cd js
+npm install
+```
+
+## Features
+
+- Lightweight implementation
+- SEO-friendly (FlutterJS rendering)
+- Easy to use
+
+## Publishing
+
+### 1. Publish JavaScript to npm
+
+```bash
+cd js
+npm publish
+```
+
+### 2. Publish Dart wrapper to pub.dev
+
+```bash
+dart pub publish
+```
+
+## License
+
+MIT
diff --git a/packages/flutterjs_services/example/lib/main.dart b/packages/flutterjs_services/example/lib/main.dart
new file mode 100644
index 00000000..cf013dc5
--- /dev/null
+++ b/packages/flutterjs_services/example/lib/main.dart
@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'FlutterjsServices Example',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: const ExamplePage(),
+    );
+  }
+}
+
+class ExamplePage extends StatefulWidget {
+  const ExamplePage({Key? key}) : super(key: key);
+
+  @override
+  State<ExamplePage> createState() => _ExamplePageState();
+}
+
+class _ExamplePageState extends State<ExamplePage> {
+  String result = 'Click the button to test';
+
+  void _testPackage() {
+    setState(() {
+      // This will call the JavaScript implementation when running with FlutterJS
+      result = 'FlutterjsServices is ready!\n\nRun: flutterjs run --to-js --serve';
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('FlutterjsServices Example'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              result,
+              textAlign: TextAlign.center,
+              style: const TextStyle(fontSize: 16),
+            ),
+            const SizedBox(height: 20),
+            ElevatedButton(
+              onPressed: _testPackage,
+              child: const Text('Test FlutterjsServices'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/packages/flutterjs_services/example/pubspec.yaml b/packages/flutterjs_services/example/pubspec.yaml
new file mode 100644
index 00000000..ef97e5c7
--- /dev/null
+++ b/packages/flutterjs_services/example/pubspec.yaml
@@ -0,0 +1,15 @@
+name: flutterjs_services_example
+description: Example app for flutterjs_services
+
+publish_to: 'none'
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
diff --git a/packages/flutterjs_services/flutterjs_services/build.js b/packages/flutterjs_services/flutterjs_services/build.js
new file mode 100644
index 00000000..5f659e73
--- /dev/null
+++ b/packages/flutterjs_services/flutterjs_services/build.js
@@ -0,0 +1,99 @@
+/**
+ * Build script for @flutterjs/flutterjs_services
+ * 
+ * Generates exports.json manifest for the import resolver system
+ */
+
+import { readFileSync, writeFileSync, readdirSync, statSync } from 'fs';
+import { join, extname } from 'path';
+
+const srcDir = './src';
+
+/**
+ * Get all JavaScript files recursively
+ */
+function getAllJsFiles(dir, fileList = []) {
+  const files = readdirSync(dir);
+  
+  for (const file of files) {
+    const filePath = join(dir, file);
+    const stat = statSync(filePath);
+    
+    if (stat.isDirectory()) {
+      getAllJsFiles(filePath, fileList);
+    } else if (extname(file) === '.js') {
+      fileList.push(filePath);
+    }
+  }
+  
+  return fileList;
+}
+
+/**
+ * Scan all source files and generate exports.json manifest
+ * This manifest tells the Dart code generator what symbols this package exports
+ */
+function generateExportManifest(sourceFiles) {
+  const manifest = {
+    package: '@flutterjs/flutterjs_services',
+    version: '0.1.0',
+    exports: []
+  };
+
+  // Regex patterns to match different export types
+  const exportRegex = /export\s*{\s*([^}]+)\s*}/g;
+  const exportStarRegex = /export\s*\*\s*from/g;
+  const classRegex = /export\s+class\s+(\w+)/g;
+  const functionRegex = /export\s+function\s+(\w+)/g;
+  const constRegex = /export\s+const\s+(\w+)/g;
+
+  for (const srcFile of sourceFiles) {
+    const content = readFileSync(srcFile, 'utf8');
+    
+    // Find named exports: export { Foo, Bar }
+    for (const match of content.matchAll(exportRegex)) {
+      const symbols = match[1]
+        .split(',')
+        .map(s => s.trim())
+        .map(s => s.split(/\s+as\s+/).pop()) // Handle "export { Foo as Bar }"
+        .filter(s => s && !s.includes('from'));
+      manifest.exports.push(...symbols);
+    }
+    
+    // Find class exports: export class Foo
+    for (const match of content.matchAll(classRegex)) {
+      manifest.exports.push(match[1]);
+    }
+    
+    // Find function exports: export function foo()
+    for (const match of content.matchAll(functionRegex)) {
+      manifest.exports.push(match[1]);
+    }
+    
+    // Find const exports: export const FOO
+    for (const match of content.matchAll(constRegex)) {
+      manifest.exports.push(match[1]);
+    }
+  }
+
+  // Remove duplicates and sort
+  manifest.exports = [...new Set(manifest.exports)].sort();
+
+  writeFileSync('./exports.json', JSON.stringify(manifest, null, 2) + '\n');
+  console.log(`📋 Generated exports.json with ${manifest.exports.length} symbols\n`);
+}
+
+// Main build process
+async function build() {
+  console.log('🚀 Building @flutterjs/flutterjs_services...\n');
+
+  const allFiles = getAllJsFiles(srcDir);
+  console.log(`📦 Found ${allFiles.length} JavaScript files\n`);
+
+  // Generate export manifest
+  generateExportManifest(allFiles);
+
+  console.log('✅ Build successful!\n');
+}
+
+build().catch(console.error);
diff --git a/packages/flutterjs_services/flutterjs_services/package.json b/packages/flutterjs_services/flutterjs_services/package.json
new file mode 100644
index 00000000..8386ef4f
--- /dev/null
+++ b/packages/flutterjs_services/flutterjs_services/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@flutterjs/flutterjs_services",
+  "version": "0.1.0",
+  "description": "A FlutterJS package",
+  "main": "src/index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"No tests yet\"",
+    "prepublishOnly": "echo \"Ready to publish\""
+  },
+  "keywords": [
+    "flutterjs",
+    "flutterjs_services"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/flutterjsdev/flutterjs.git"
+  },
+  "files": [
+    "src/",
+    "README.md",
+    "LICENSE"
+  ]
+}
diff --git a/packages/flutterjs_services/flutterjs_services/src/index.js b/packages/flutterjs_services/flutterjs_services/src/index.js
new file mode 100644
index 00000000..108d9fb6
--- /dev/null
+++ b/packages/flutterjs_services/flutterjs_services/src/index.js
@@ -0,0 +1,43 @@
+/**
+ * FlutterJS FlutterjsServices
+ * 
+ * Simple, lightweight implementation built with JavaScript
+ */
+
+/**
+ * Main class for FlutterjsServices
+ */
+export class FlutterjsServices {
+  constructor(config = {}) {
+    this.config = config;
+  }
+
+  /**
+   * Example method - replace with your implementation
+   */
+  hello() {
+    return 'Hello from FlutterjsServices!';
+  }
+
+  /**
+   * Example async method
+   */
+  async fetchData(url) {
+    try {
+      const response = await fetch(url);
+      return await response.json();
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      throw error;
+    }
+  }
+}
+
+/**
+ * Helper function
+ */
+export function createInstance(config) {
+  return new FlutterjsServices(config);
+}
+
+export default FlutterjsServices;
diff --git a/packages/flutterjs_services/lib/flutterjs_services.dart b/packages/flutterjs_services/lib/flutterjs_services.dart
new file mode 100644
index 00000000..d9f026fd
--- /dev/null
+++ b/packages/flutterjs_services/lib/flutterjs_services.dart
@@ -0,0 +1,26 @@
+/// FlutterJS FlutterjsServices
+/// 
+/// A FlutterJS package
+/// 
+/// The actual implementation is in JavaScript.
+/// This package is a metadata wrapper published to pub.dev.
+/// 
+/// ## Usage
+/// 
+/// Add to your `pubspec.yaml`:
+/// ```yaml
+/// dependencies:
+///   flutterjs_services: ^0.1.0
+/// ```
+/// 
+/// Then run:
+/// ```bash
+/// flutterjs get
+/// ```
+/// 
+/// The package will be installed to: `build/flutterjs/node_modules/@flutterjs/flutterjs_services`
+/// 
+/// See `example/` for a complete working app.
+library flutterjs_services;
+
+// The real implementation is in js/src/
diff --git a/packages/flutterjs_services/pubspec.yaml b/packages/flutterjs_services/pubspec.yaml
new file mode 100644
index 00000000..ad9a1d97
--- /dev/null
+++ b/packages/flutterjs_services/pubspec.yaml
@@ -0,0 +1,24 @@
+name: flutterjs_services
+version: 0.1.0
+description: A FlutterJS package
+
+homepage: https://github.com/flutterjs/flutterjs_services
+repository: https://github.com/flutterjs/flutterjs_services
+issue_tracker: https://github.com/flutterjs/flutterjs_services/issues
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+# FlutterJS metadata
+flutterjs:
+  npm_package: "@flutterjs/flutterjs_services"
+  implementation_language: "javascript"
+  js_entry: "js/src/index.js"
diff --git a/packages/flutterjs_tools/lib/src/analyzer/analyze_command.dart b/packages/flutterjs_tools/lib/src/analyzer/analyze_command.dart
index c9c516cd..d1622e17 100644
--- a/packages/flutterjs_tools/lib/src/analyzer/analyze_command.dart
+++ b/packages/flutterjs_tools/lib/src/analyzer/analyze_command.dart
@@ -1,7 +1,7 @@
 import 'dart:io';
 import 'package:args/command_runner.dart';
 import 'package:path/path.dart' as path;
-import 'package:flutterjs_analyzer/flutterjs_analyzer.dart';
+import 'package:dart_analyzer/dart_analyzer.dart';
 
 /// ============================================================================
 /// AnalyzeCommand – Phase 1 Flutter.js Project Analyzer
diff --git a/packages/flutterjs_tools/lib/src/commands/create_command.dart b/packages/flutterjs_tools/lib/src/commands/create_command.dart
index d192266f..519eb7c6 100644
--- a/packages/flutterjs_tools/lib/src/commands/create_command.dart
+++ b/packages/flutterjs_tools/lib/src/commands/create_command.dart
@@ -9,7 +9,7 @@ class CreateCommand extends Command<void> {
     argParser
       ..addOption(
         'package',
-        help: 'Create an external package (pub.dev + npm)',
+        help: 'Create a package (pub.dev + npm)',
         valueHelp: 'package_name',
       )
       ..addOption(
@@ -55,16 +55,19 @@ class CreateCommand extends Command<void> {
     final description = argResults!['description'] as String?;
     final organization = argResults!['org'] as String;
 
-    // Determine output directory
-    // If we're in external_package/, create here
-    // Otherwise, create in external_package/ subdirectory
-    final currentDir = Directory.current.path;
-    final outputDir = p.basename(currentDir) == 'external_package'
-        ? currentDir
-        : p.join(currentDir, 'external_package');
+    // Find the packages directory
+    final outputDir = _findPackagesDirectory();
+
+    if (outputDir == null) {
+      print('❌ Could not find packages directory');
+      print('   Please run this command from within the FlutterJS repository');
+      exit(1);
+    }
+
+    print('DEBUG_MARKER_1: outputDir = $outputDir');
+    print('DEBUG_MARKER_2: packageName = $packageName');
+    print('📦 Creating package: $packageName');
 
-    print('');
-    print('🎨 Creating external package: $packageName');
     if (description != null) {
       print('   Description: $description');
     }
@@ -85,4 +88,32 @@ class CreateCommand extends Command<void> {
       exit(1);
     }
   }
+
+  /// Find the packages directory by traversing up from current directory
+  String? _findPackagesDirectory() {
+    var current = Directory.current;
+
+    // Check if we're already in packages directory
+    if (p.basename(current.path) == 'packages') {
+      return current.path;
+    }
+
+    // Check if packages subdirectory exists
+    final packagesDir = Directory(p.join(current.path, 'packages'));
+    if (packagesDir.existsSync()) {
+      return packagesDir.path;
+    }
+
+    // Traverse up to find packages directory
+    while (current.parent.path != current.path) {
+      current = current.parent;
+
+      final packagesDir = Directory(p.join(current.path, 'packages'));
+      if (packagesDir.existsSync()) {
+        return packagesDir.path;
+      }
+    }
+
+    return null;
+  }
 }
diff --git a/packages/flutterjs_tools/lib/src/runner.dart b/packages/flutterjs_tools/lib/src/runner.dart
index 6f44c371..d4bf90a6 100644
--- a/packages/flutterjs_tools/lib/src/runner.dart
+++ b/packages/flutterjs_tools/lib/src/runner.dart
@@ -4,8 +4,6 @@ import 'builder/build_command.dart';
 import 'cleaner/clean_command.dart';
 import 'commands/create_command.dart';
 import 'docs_command.dart';
-// import '../../flutterjs_gen/lib/init_project/init_project.dart';
-import 'package:flutterjs_gen/flutterjs_gen.dart';
 import 'model/package_profile.dart';
 import 'runner/run_command.dart';
 import 'version_command.dart';
diff --git a/packages/flutterjs_tools/lib/src/runner/code_pipleiline.dart b/packages/flutterjs_tools/lib/src/runner/code_pipleiline.dart
index 0fb70f83..88566901 100644
--- a/packages/flutterjs_tools/lib/src/runner/code_pipleiline.dart
+++ b/packages/flutterjs_tools/lib/src/runner/code_pipleiline.dart
@@ -6,10 +6,12 @@
 
 import 'dart:async';
 import 'dart:io';
+import 'package:path/path.dart' as path;
 import 'package:flutterjs_tools/command.dart';
 
 import 'package:flutterjs_core/flutterjs_core.dart';
 import 'package:flutterjs_gen/flutterjs_gen.dart';
+import 'package:flutterjs_gen/src/file_generation/package_manifest.dart';
 
 // ============================================================================
 // UNIFIED PIPELINE ORCHESTRATOR
@@ -25,6 +27,9 @@ class UnifiedConversionPipeline {
   /// Phases 4-6: File generator
   late final FileCodeGen fileCodeGen;
 
+  /// Package registry for import resolution
+  late final PackageRegistry packageRegistry;
+
   /// Configuration
   final PipelineConfig config;
 
@@ -41,6 +46,11 @@ class UnifiedConversionPipeline {
     try {
       diagnosticEngine = ModelToJSDiagnosticEngine();
       integrationPipeline = ModelToJSPipeline();
+
+      // ✅ NEW: Initialize and load package registry
+      packageRegistry = PackageRegistry();
+      _loadPackageManifests();
+
       fileCodeGen = FileCodeGen(
         // Pass default generators - adjust based on your actual constructors
         exprCodeGen: ExpressionCodeGen(),
@@ -51,6 +61,7 @@ class UnifiedConversionPipeline {
         runtimeRequirements: RuntimeRequirements(),
         outputValidator: OutputValidator(''),
         jsOptimizer: JSOptimizer(''),
+        packageRegistry: packageRegistry, // ✅ Pass loaded registry
       );
 
       _log('✅ Pipeline engines initialized');
@@ -60,6 +71,32 @@ class UnifiedConversionPipeline {
     }
   }
 
+  void _loadPackageManifests() {
+    try {
+      // Manifests are in build/flutterjs/node_modules/@flutterjs/
+      // This is where preparePackages() puts them
+      final buildManifestPath = path.join(
+        config.projectPath ,
+        'build',
+        'flutterjs',
+        'node_modules',
+        '@flutterjs',
+      );
+
+      final dir = Directory(buildManifestPath);
+      if (dir.existsSync()) {
+        final absolutePath = path.absolute(buildManifestPath);
+        _log('📦 Loading package manifests from: $absolutePath');
+        packageRegistry.loadPackagesDirectory(buildManifestPath);
+      } else {
+        _log('⚠️  No manifests found at: $buildManifestPath');
+        _log('   Make sure to run package preparation first');
+      }
+    } catch (e) {
+      _log('⚠️  Failed to load package manifests: $e');
+    }
+  }
+
   // =========================================================================
   // MAIN EXECUTION PIPELINE
   // =========================================================================
diff --git a/packages/flutterjs_tools/lib/src/runner/engine_bridge.dart b/packages/flutterjs_tools/lib/src/runner/engine_bridge.dart
index d68d671f..8bf9fdaa 100644
--- a/packages/flutterjs_tools/lib/src/runner/engine_bridge.dart
+++ b/packages/flutterjs_tools/lib/src/runner/engine_bridge.dart
@@ -35,6 +35,7 @@
 import 'dart:async';
 import 'dart:io';
 import 'package:path/path.dart' as path;
+import 'package:pubjs/pubjs.dart'; // For RuntimePackageManager
 
 /// Configuration for the JS Engine Bridge
 class EngineBridgeConfig {
@@ -535,6 +536,57 @@ class EngineBridgeManager {
       // Ensure the build directory exists
       await Directory(buildPath).create(recursive: true);
 
+      // ✅ HYBRID RESOLUTION: Resolve SDK packages dynamically
+      if (verbose) {
+        print('   📦 Resolving SDK packages...');
+      }
+
+      // Import RuntimePackageManager from pubjs
+      // Note: Need to add import at top of file
+      final packageManager = RuntimePackageManager();
+
+      // Get SDK packages (all @flutterjs/* packages)
+      final sdkPackages = await packageManager.resolvePackages(
+        [], // Empty list since we want all SDK packages
+        projectPath: Directory(buildPath).parent.path,
+        includeSDK: true,
+        verbose: verbose,
+      );
+
+      // Validate core packages are present
+      final corePackages = [
+        '@flutterjs/runtime',
+        '@flutterjs/vdom',
+        '@flutterjs/material',
+        '@flutterjs/analyzer',
+      ];
+
+      for (final core in corePackages) {
+        if (!sdkPackages.containsKey(core)) {
+          print(
+            '⚠️  Warning: Core package $core not found! This may cause build failures.',
+          );
+        }
+      }
+
+      // Format packages for config
+      // Filter out core packages that have default mappings in JS
+      final defaultMappedPackages = [
+        '@flutterjs/runtime',
+        '@flutterjs/vdom',
+        '@flutterjs/material',
+        '@flutterjs/analyzer'
+      ];
+
+      final packagePathsConfig = sdkPackages.entries
+          .where((e) => !defaultMappedPackages.contains(e.key))
+          .map((e) => "    '${e.key}': {\n      path: '${e.value}'\n    }")
+          .join(',\n');
+
+      if (verbose) {
+        print('   ✅ Resolved ${sdkPackages.length} SDK packages');
+      }
+
       // 1. Generate flutterjs.config.js (full config matching example)
       final configContent =
           '''
@@ -543,7 +595,7 @@ class EngineBridgeManager {
 // Auto-generated by Dart CLI
 // ============================================================================
 
-module.exports = {
+export default {
   // Project Identity
   project: {
     name: '$projectName',
@@ -633,6 +685,11 @@ module.exports = {
     },
   },
 
+  // Package paths (auto-resolved)
+  packages: {
+$packagePathsConfig
+  },
+
   // Assets Configuration
   assets: {
     include: [
diff --git a/packages/flutterjs_tools/lib/src/runner/helper.dart b/packages/flutterjs_tools/lib/src/runner/helper.dart
index 841a5e0b..c8e41a71 100644
--- a/packages/flutterjs_tools/lib/src/runner/helper.dart
+++ b/packages/flutterjs_tools/lib/src/runner/helper.dart
@@ -3,6 +3,7 @@ import 'package:analyzer/dart/analysis/results.dart';
 import 'package:analyzer/dart/ast/ast.dart';
 import 'package:analyzer/file_system/physical_file_system.dart';
 import 'dart:io';
+import 'package:path/path.dart' as p;
 
 /// ============================================================================
 /// DartFileParser
@@ -147,6 +148,11 @@ class DartFileParser {
 
       _contextCollection = AnalysisContextCollection(
         includedPaths: [rootPath],
+        excludedPaths: [
+          p.join(rootPath, 'build'),
+          p.join(rootPath, '.dart_tool'),
+          p.join(rootPath, 'node_modules'),
+        ],
         resourceProvider: PhysicalResourceProvider.INSTANCE,
       );
 
diff --git a/packages/flutterjs_tools/lib/src/runner/run_command.dart b/packages/flutterjs_tools/lib/src/runner/run_command.dart
index ae6735da..a96fc49b 100644
--- a/packages/flutterjs_tools/lib/src/runner/run_command.dart
+++ b/packages/flutterjs_tools/lib/src/runner/run_command.dart
@@ -14,11 +14,11 @@ import 'package:flutterjs_tools/src/runner/code_pipleiline.dart';
 import 'package:flutterjs_tools/src/runner/engine_bridge.dart';
 import 'package:flutterjs_tools/src/runner/helper.dart';
 import 'package:path/path.dart' as path;
-import 'package:flutterjs_analyzer/flutterjs_analyzer.dart';
+import 'package:dart_analyzer/dart_analyzer.dart';
 import 'package:flutterjs_core/flutterjs_core.dart';
-import 'package:flutterjs_gen/flutterjs_gen.dart' as com;
 import 'package:pubjs/pubjs.dart';
 
+
 /// ============================================================================
 /// RunCommand
 /// ============================================================================
@@ -309,16 +309,39 @@ class RunCommand extends Command<void> {
 
   @override
   Future<void> run() async {
+    final debugFile = File(
+      'c:/Jay/_Plugin/flutterjs/examples/routing_app/debug_runcheck.txt',
+    );
+    try {
+      debugFile.writeAsStringSync("DEBUG: RunCommand.run START\n");
+    } catch (e) {
+      print("DEBUG: Logs file write failed");
+    }
+
+    print("DEBUG: RunCommand.run START");
     try {
       // Parse CLI arguments
       final config = _parseConfig();
+      debugFile.writeAsStringSync(
+        "DEBUG: RunCommand parsed config\n",
+        mode: FileMode.append,
+      );
+      print("DEBUG: RunCommand parsed config");
 
       // Setup phase
+      debugFile.writeAsStringSync(
+        "DEBUG: RunCommand starting setup_phase\n",
+        mode: FileMode.append,
+      );
+      print("DEBUG: RunCommand starting setup_phase");
+      /*
       final context = await debugger.observe(
         'setup_phase',
         () => _setupContext(config),
         category: 'setup',
       );
+      */
+      final context = await _setupContext(config);
       if (context == null) exit(1);
 
       // Execute pipeline
@@ -450,6 +473,7 @@ class RunCommand extends Command<void> {
 
     // Start DevTools if enabled
     if (config.enableDevTools) {
+      print("[DEBUG] TRIGGERING devtools_startup");
       _devToolsServer = await debugger.observe(
         'devtools_startup',
         () => DevToolsManager.start(config, context),
@@ -458,11 +482,14 @@ class RunCommand extends Command<void> {
     }
 
     // Run analysis & IR generation
+    print("[DEBUG] TRIGGERING phase_1_analysis");
     final analysisResults = await debugger.observe(
       'phase_1_analysis',
       () => AnalysisPhase.execute(config, context, verbose),
       category: 'analysis',
     );
+
+    print("[DEBUG] TRIGGERING phase_2_ir_generation");
     final irResults = await debugger.observe(
       'phase_2_ir_generation',
       () =>
@@ -480,6 +507,7 @@ class RunCommand extends Command<void> {
         print('PHASES 4-6: Converting IR to JavaScript...');
       }
 
+      print("[DEBUG] TRIGGERING phase_4_6_js_conversion");
       jsResults = await debugger.observe(
         'phase_4_6_js_conversion',
         () => JSConversionPhase.execute(config, context, irResults, verbose),
@@ -552,22 +580,6 @@ class RunCommand extends Command<void> {
       print('⚠️  JS project init failed, but continuing to try dev server...');
     }
 
-    // Step 1.5: Resolve and fetch package dependencies
-    if (!config.jsonOutput) {
-      print('\n📦 Resolving package dependencies...');
-    }
-
-    final packageManager = RuntimePackageManager();
-    final packagesResolved = await packageManager.resolveProjectDependencies(
-      projectPath: context.projectPath,
-      buildPath: context.buildPath,
-      verbose: config.verbose,
-    );
-
-    if (!packagesResolved) {
-      print('⚠️  Package resolution failed, some packages may be missing...');
-    }
-
     // Step 2: Start the dev server from build/flutterjs
     if (!config.jsonOutput) {
       print('\n🚀 Starting FlutterJS Dev Server...');
@@ -587,9 +599,8 @@ class RunCommand extends Command<void> {
     }
 
     if (!config.jsonOutput) {
-      print('\n✅ Dev Server running at ${result.url}');
+      // JS server already prints the URL, so we just print project info for context
       print('   📁 Project root: ${context.buildPath}');
-      print('   📁 Source files: ${context.jsOutputPath}');
     }
   }
 
@@ -728,6 +739,23 @@ class SetupManager {
         await Directory(reportsPath).create(recursive: true);
       }
 
+      // ✅ NEW: Package Preparation Phase
+      // This ensures all packages are downloaded, built, and have manifests
+      // BEFORE code generation starts (so imports can be resolved correctly)
+      if (!config.jsonOutput) print('\n📦 Preparing packages...');
+
+      final packageManager = RuntimePackageManager();
+      final packagesReady = await packageManager.preparePackages(
+        projectPath: absoluteProjectPath,
+        buildPath: flutterJsDir,
+        verbose: verbose,
+      );
+
+      if (!packagesReady) {
+        print('❌ Package preparation failed. Cannot continue.');
+        return null;
+      }
+
       // Initialize parser
       if (!config.jsonOutput) print('Initializing Dart parser...\n');
       DartFileParser.initialize(projectRoot: absoluteProjectPath);
diff --git a/packages/flutterjs_tools/lib/src/runner/tracer.dart b/packages/flutterjs_tools/lib/src/runner/tracer.dart
new file mode 100644
index 00000000..ad5bd0af
--- /dev/null
+++ b/packages/flutterjs_tools/lib/src/runner/tracer.dart
@@ -0,0 +1,17 @@
+import 'dart:io';
+
+class Tracer {
+  static void log(String msg) {
+    try {
+      final file = File(
+        'c:/Jay/_Plugin/flutterjs/examples/routing_app/trace.log',
+      );
+      file.writeAsStringSync(
+        '${DateTime.now().toIso8601String()} - $msg\n',
+        mode: FileMode.append,
+      );
+    } catch (e) {
+      // ignore
+    }
+  }
+}
diff --git a/packages/flutterjs_tools/pubspec.yaml b/packages/flutterjs_tools/pubspec.yaml
index 23ab5542..0abae9ee 100644
--- a/packages/flutterjs_tools/pubspec.yaml
+++ b/packages/flutterjs_tools/pubspec.yaml
@@ -10,7 +10,7 @@ environment:
 dependencies:
   path: ^1.9.0
   flutterjs_core: any
-  flutterjs_analyzer: any
+  dart_analyzer: any
   flutterjs_dev_utils: any
   flutterjs_dev_tools: any
   flutterjs_gen: any
diff --git a/packages/flutterjs_tools/tool/debug_pkg.dart b/packages/flutterjs_tools/tool/debug_pkg.dart
new file mode 100644
index 00000000..c77e0969
--- /dev/null
+++ b/packages/flutterjs_tools/tool/debug_pkg.dart
@@ -0,0 +1,34 @@
+import 'dart:io';
+import 'package:pubjs/pubjs.dart';
+import 'package:path/path.dart' as path;
+
+Future<void> main() async {
+  print('Starting debug_pkg...');
+  // Assuming running from packages/flutterjs_tools/
+  final toolsDir = Directory.current.path;
+  final repoRoot = path.dirname(path.dirname(toolsDir)); // packages/../
+
+
+  // Simulate routing_app project
+  final projectPath = path.join(repoRoot, 'examples', 'routing_app');
+  final flutterJsDir = path.join(projectPath, '.flutterjs');
+
+  print('Repo Root: $repoRoot');
+  print('Project: $projectPath');
+
+  final pm = RuntimePackageManager();
+  print('Calling preparePackages...');
+
+  try {
+    final result = await pm.preparePackages(
+      projectPath: projectPath,
+      buildPath: flutterJsDir,
+      verbose: true,
+    );
+    print('Result: $result');
+  } catch (e, st) {
+    print('ERROR: $e');
+    print(st);
+  }
+  print('Done.');
+}
diff --git a/packages/flutterjs_vdom/.gitignore b/packages/flutterjs_vdom/.gitignore
new file mode 100644
index 00000000..1d4cb04d
--- /dev/null
+++ b/packages/flutterjs_vdom/.gitignore
@@ -0,0 +1,31 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+build/
+dist/
+.dev/
+.debug/
+
+# Generated files
+.flutterjs/
+.cache/
+
+# Dart
+.dart_tool/
+.packages
+pubspec.lock
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Logs
+*.log
+npm-debug.log*
diff --git a/packages/flutterjs_vdom/.pubignore b/packages/flutterjs_vdom/.pubignore
new file mode 100644
index 00000000..bae5ffcf
--- /dev/null
+++ b/packages/flutterjs_vdom/.pubignore
@@ -0,0 +1,11 @@
+# Exclude JavaScript implementation from pub.dev
+js/
+node_modules/
+dist/
+build/
+.git/
+.github/
+test/
+package-lock.json
+.vscode/
+.idea/
diff --git a/packages/flutterjs_vdom/CHANGELOG.md b/packages/flutterjs_vdom/CHANGELOG.md
new file mode 100644
index 00000000..13187808
--- /dev/null
+++ b/packages/flutterjs_vdom/CHANGELOG.md
@@ -0,0 +1,3 @@
+## 0.1.0
+
+* Initial release
diff --git a/packages/flutterjs_vdom/LICENSE b/packages/flutterjs_vdom/LICENSE
new file mode 100644
index 00000000..14fac913
--- /dev/null
+++ b/packages/flutterjs_vdom/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/flutterjs_vdom/README.md b/packages/flutterjs_vdom/README.md
new file mode 100644
index 00000000..233afb0d
--- /dev/null
+++ b/packages/flutterjs_vdom/README.md
@@ -0,0 +1,58 @@
+# FlutterjsVdom
+
+FlutterJS Virtual DOM implementation
+
+## Installation
+
+Add to `pubspec.yaml`:
+
+```yaml
+dependencies:
+  flutterjs_vdom: ^0.1.0
+```
+
+Then run:
+
+```bash
+flutterjs get
+```
+
+## Usage
+
+See `example/` for a complete Flutter app.
+
+## JavaScript Implementation
+
+The actual implementation is in `js/src/` (JavaScript).
+
+To develop:
+
+```bash
+cd js
+npm install
+```
+
+## Features
+
+- Lightweight implementation
+- SEO-friendly (FlutterJS rendering)
+- Easy to use
+
+## Publishing
+
+### 1. Publish JavaScript to npm
+
+```bash
+cd js
+npm publish
+```
+
+### 2. Publish Dart wrapper to pub.dev
+
+```bash
+dart pub publish
+```
+
+## License
+
+MIT
diff --git a/packages/flutterjs_vdom/example/lib/main.dart b/packages/flutterjs_vdom/example/lib/main.dart
new file mode 100644
index 00000000..43244dd7
--- /dev/null
+++ b/packages/flutterjs_vdom/example/lib/main.dart
@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'FlutterjsVdom Example',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: const ExamplePage(),
+    );
+  }
+}
+
+class ExamplePage extends StatefulWidget {
+  const ExamplePage({Key? key}) : super(key: key);
+
+  @override
+  State<ExamplePage> createState() => _ExamplePageState();
+}
+
+class _ExamplePageState extends State<ExamplePage> {
+  String result = 'Click the button to test';
+
+  void _testPackage() {
+    setState(() {
+      // This will call the JavaScript implementation when running with FlutterJS
+      result = 'FlutterjsVdom is ready!\n\nRun: flutterjs run --to-js --serve';
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('FlutterjsVdom Example'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              result,
+              textAlign: TextAlign.center,
+              style: const TextStyle(fontSize: 16),
+            ),
+            const SizedBox(height: 20),
+            ElevatedButton(
+              onPressed: _testPackage,
+              child: const Text('Test FlutterjsVdom'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/packages/flutterjs_vdom/example/pubspec.yaml b/packages/flutterjs_vdom/example/pubspec.yaml
new file mode 100644
index 00000000..b2b0f77d
--- /dev/null
+++ b/packages/flutterjs_vdom/example/pubspec.yaml
@@ -0,0 +1,15 @@
+name: flutterjs_vdom_example
+description: Example app for flutterjs_vdom
+
+publish_to: 'none'
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
diff --git a/packages/flutterjs_vdom/flutterjs_vdom/build.js b/packages/flutterjs_vdom/flutterjs_vdom/build.js
new file mode 100644
index 00000000..cd803e2d
--- /dev/null
+++ b/packages/flutterjs_vdom/flutterjs_vdom/build.js
@@ -0,0 +1,87 @@
+import esbuild from 'esbuild';
+import { readdirSync, readFileSync, writeFileSync } from 'fs';
+import { join, extname, basename, relative } from 'path';
+
+
+const srcDir = 'src';
+const outDir = 'dist';
+
+// Get all .js files in src/ (non-recursive — add glob if you have subfolders later)
+const entryPoints = readdirSync(srcDir)
+  .filter(file => extname(file) === '.js')
+  .map(file => join(srcDir, file));
+
+esbuild
+  .build({
+    entryPoints,
+    outdir: outDir,
+    bundle: false,              // Keep false — we want independent files
+    minify: false, // Keep disabled for now
+    platform: 'node',
+    target: ['node18'],
+    format: 'esm',
+    sourcemap: true,
+    // REMOVED: external — not allowed with bundle: false
+    // If you later need to exclude Node builtins, they are automatically external anyway!
+  })
+  .then(() => {
+    console.log(`Build successful! ${entryPoints.length} files built to ${outDir}/`);
+    console.log('Built files:', entryPoints.map(p => basename(p)).join(', '));
+
+    // 🎁 NEW: Generate exports.json
+    generateExportManifest(entryPoints);
+
+  })
+
+  .catch((error) => {
+    console.error('Build failed:', error);
+    process.exit(1);
+  });
+
+/**
+ * Scan all source files and generate exports.json manifest
+ */
+function generateExportManifest(sourceFiles) {
+  const manifest = {
+    package: '@flutterjs/vdom',
+    version: JSON.parse(readFileSync('./package.json', 'utf8')).version,
+    exports: []
+  };
+
+  const regex = /export\s+(?:class|function|const|var|let|enum)\s+([a-zA-Z0-9_$]+)/g;
+  const aliasRegex = /export\s*{\s*([^}]+)\s*}/;
+
+  for (const file of sourceFiles) {
+    const content = readFileSync(file, 'utf8');
+    const relativePath = relative(srcDir, file).replace(/\\/g, '/');
+    const importPath = `./dist/${relativePath}`;
+
+    // Match named exports
+    let match;
+    while ((match = regex.exec(content)) !== null) {
+      manifest.exports.push({
+        name: match[1],
+        path: importPath,
+        type: 'class' // simplified
+      });
+    }
+
+    // Match alias exports
+    const aliasMatch = content.match(aliasRegex);
+    if (aliasMatch) {
+      const exportsList = aliasMatch[1].split(',');
+      for (const exp of exportsList) {
+        const parts = exp.trim().split(/\s+as\s+/);
+        const name = parts.length > 1 ? parts[1] : parts[0];
+        manifest.exports.push({
+          name: name,
+          path: importPath,
+          type: 'alias'
+        });
+      }
+    }
+  }
+
+  writeFileSync('exports.json', JSON.stringify(manifest, null, 2));
+  console.log(`📋 Generated exports.json with ${manifest.exports.length} symbols`);
+}
diff --git a/packages/flutterjs_vdom/flutterjs_vdom/exports.json b/packages/flutterjs_vdom/flutterjs_vdom/exports.json
new file mode 100644
index 00000000..b6c1cdf3
--- /dev/null
+++ b/packages/flutterjs_vdom/flutterjs_vdom/exports.json
@@ -0,0 +1,156 @@
+{
+  "package": "@flutterjs/vdom",
+  "version": "0.1.0",
+  "exports": [
+    {
+      "name": "Hydrator",
+      "path": "./dist/hydrator.js",
+      "type": "alias"
+    },
+    {
+      "name": "PatchApplier",
+      "path": "./dist/patch_applier.js",
+      "type": "class"
+    },
+    {
+      "name": "RenderEngine",
+      "path": "./dist/render_engine.js",
+      "type": "alias"
+    },
+    {
+      "name": "VNodeRuntime",
+      "path": "./dist/runtime_index.js",
+      "type": "class"
+    },
+    {
+      "name": "runApp",
+      "path": "./dist/runtime_index.js",
+      "type": "class"
+    },
+    {
+      "name": "getRuntime",
+      "path": "./dist/runtime_index.js",
+      "type": "class"
+    },
+    {
+      "name": "updateApp",
+      "path": "./dist/runtime_index.js",
+      "type": "class"
+    },
+    {
+      "name": "getMetrics",
+      "path": "./dist/runtime_index.js",
+      "type": "class"
+    },
+    {
+      "name": "hotReload",
+      "path": "./dist/runtime_index.js",
+      "type": "class"
+    },
+    {
+      "name": "renderToString",
+      "path": "./dist/runtime_index.js",
+      "type": "class"
+    },
+    {
+      "name": "hydrate",
+      "path": "./dist/runtime_index.js",
+      "type": "class"
+    },
+    {
+      "name": "clearMetrics",
+      "path": "./dist/runtime_index.js",
+      "type": "class"
+    },
+    {
+      "name": "SSRRenderer",
+      "path": "./dist/ssr_renderer.js",
+      "type": "alias"
+    },
+    {
+      "name": "BindingMode",
+      "path": "./dist/state_binding.js",
+      "type": "alias"
+    },
+    {
+      "name": "StateBinding",
+      "path": "./dist/state_binding.js",
+      "type": "alias"
+    },
+    {
+      "name": "StateBindingRegistry",
+      "path": "./dist/state_binding.js",
+      "type": "alias"
+    },
+    {
+      "name": "createBinding",
+      "path": "./dist/state_binding.js",
+      "type": "alias"
+    },
+    {
+      "name": "createTwoWayBinding",
+      "path": "./dist/state_binding.js",
+      "type": "alias"
+    },
+    {
+      "name": "createOneWayBinding",
+      "path": "./dist/state_binding.js",
+      "type": "alias"
+    },
+    {
+      "name": "StyleConverter",
+      "path": "./dist/style_converter.js",
+      "type": "alias"
+    },
+    {
+      "name": "UpdatePriority",
+      "path": "./dist/update_scheduler.js",
+      "type": "alias"
+    },
+    {
+      "name": "UpdateRequest",
+      "path": "./dist/update_scheduler.js",
+      "type": "alias"
+    },
+    {
+      "name": "UpdateBatch",
+      "path": "./dist/update_scheduler.js",
+      "type": "alias"
+    },
+    {
+      "name": "UpdateScheduler",
+      "path": "./dist/update_scheduler.js",
+      "type": "alias"
+    },
+    {
+      "name": "VNode",
+      "path": "./dist/vnode.js",
+      "type": "alias"
+    },
+    {
+      "name": "VNodeBuilder",
+      "path": "./dist/vnode_builder.js",
+      "type": "alias"
+    },
+    {
+      "name": "VNodeDiffer",
+      "path": "./dist/vnode_differ.js",
+      "type": "alias"
+    },
+    {
+      "name": "Patch",
+      "path": "./dist/vnode_differ.js",
+      "type": "alias"
+    },
+    {
+      "name": "PatchType",
+      "path": "./dist/vnode_differ.js",
+      "type": "alias"
+    },
+    {
+      "name": "VNodeRenderer",
+      "path": "./dist/vnode_renderer.js",
+      "type": "alias"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/flutterjs_vdom/flutterjs_vdom/package.json b/packages/flutterjs_vdom/flutterjs_vdom/package.json
new file mode 100644
index 00000000..5a6b988f
--- /dev/null
+++ b/packages/flutterjs_vdom/flutterjs_vdom/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "@flutterjs/vdom",
+  "version": "0.1.0",
+  "description": "FlutterJS Virtual DOM implementation",
+  "main": "dist/runtime_index.js",
+  "type": "module",
+  "exports": {
+    "./hydrator": "./dist/hydrator.js",
+    "./patch_applier": "./dist/patch_applier.js",
+    "./context_analyzer": "./dist/context_analyzer.js",
+    "./render_engine": "./dist/render_engine.js",
+    "./runtime_index": "./dist/runtime_index.js",
+    "./ssr_renderer": "./dist/ssr_renderer.js",
+    "./state_binding": "./dist/state_binding.js",
+    "./style_converter": "./dist/style_converter.js",
+    "./update_scheduler": "./dist/update_scheduler.js",
+    "./vnode": "./dist/vnode.js",
+    "./vnode_builder": "./dist/vnode_builder.js",
+    "./vnode_differ": "./dist/vnode_differ.js",
+    "./vnode_renderer": "./dist/vnode_renderer.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "node build.js",
+    "test:vnode": "node ./test/vnode.test.js",
+    "test:renderer": "node ./test/vnode_renderer.test.js",
+    "test:builder": "node ./test/vnode_builder.test.js",
+    "test:hydrator": "node ./test/hydrator.test.js",
+    "test:engine": "node ./test/render_engine.test.js",
+    "test:style": "node ./test/style_converter.test.js",
+    "test:updater": "node ./test/update_scheduler.test.js",
+    "test:runtime": "node ./test/runtime.test.js",
+    "test:state": "node ./test/state_binding.test.js",
+    "test:patch": "node ./test/patch_applier.test.js"
+  },
+  "dependencies": {
+    "@flutterjs/runtime": "file:../../flutterjs_runtime/flutterjs_runtime",
+    "jest": "^29.7.0",
+    "jsdom": "^22.1.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.27.2"
+  },
+  "keywords": [
+    "flutterjs",
+    "flutterjs_vdom"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/flutterjsdev/flutterjs.git"
+  }
+}
diff --git a/packages/flutterjs_engine/src/vdom/src/hydrator.js b/packages/flutterjs_vdom/flutterjs_vdom/src/hydrator.js
similarity index 100%
rename from packages/flutterjs_engine/src/vdom/src/hydrator.js
rename to packages/flutterjs_vdom/flutterjs_vdom/src/hydrator.js
diff --git a/packages/flutterjs_vdom/flutterjs_vdom/src/patch_applier.js b/packages/flutterjs_vdom/flutterjs_vdom/src/patch_applier.js
new file mode 100644
index 00000000..77cee8ab
--- /dev/null
+++ b/packages/flutterjs_vdom/flutterjs_vdom/src/patch_applier.js
@@ -0,0 +1,706 @@
+/**
+ * PatchApplier - Simplified & Robust Version
+ * Applies VNode patches to actual DOM
+ * 
+ * Key principles:
+ * - Index '0' always means the direct child
+ * - Parent is always found from the root
+ * - Simple, straightforward logic
+ */
+
+export class PatchApplier {
+  /**
+   * Apply patches to DOM
+   * @param {HTMLElement} rootElement - Element to apply patches to
+   * @param {Patch[]} patches - Array of patches
+   * @param {Object} options - Options
+   * @returns {Object} Result
+   */
+  static apply(rootElement, patches, options = {}) {
+    if (!rootElement || !Array.isArray(patches) || patches.length === 0) {
+      return { success: true, patchesApplied: 0, totalPatches: 0 };
+    }
+
+    let patchesApplied = 0;
+    const errors = [];
+
+    try {
+      // Order patches: REMOVE first (reverse order), then others
+      const orderedPatches = this.orderPatches(patches);
+
+      orderedPatches.forEach((patch) => {
+        try {
+          this.applyPatch(rootElement, patch, options);
+          patchesApplied++;
+        } catch (error) {
+          errors.push(`Patch ${patch.type} at ${patch.index}: ${error.message}`);
+        }
+      });
+
+      return {
+        success: errors.length === 0,
+        patchesApplied,
+        totalPatches: patches.length,
+        errors: errors.length > 0 ? errors : undefined
+      };
+    } catch (error) {
+      return {
+        success: false,
+        patchesApplied,
+        error: error.message
+      };
+    }
+  }
+
+  /**
+   * Order patches for safe application
+   * REMOVE first (deepest first), then CREATE, REPLACE, then all UPDATES
+   */
+  static orderPatches(patches) {
+    const byType = { REMOVE: [], CREATE: [], REPLACE: [], UPDATE: [] };
+
+    patches.forEach(patch => {
+      if (patch.type === 'REMOVE') {
+        byType.REMOVE.push(patch);
+      } else if (patch.type === 'CREATE') {
+        byType.CREATE.push(patch);
+      } else if (patch.type === 'REPLACE') {
+        byType.REPLACE.push(patch);
+      } else {
+        byType.UPDATE.push(patch);
+      }
+    });
+
+    // Sort REMOVE by depth (deepest first, by counting dots)
+    byType.REMOVE.sort((a, b) => {
+      const depthA = String(a.index || '0').split('.').length;
+      const depthB = String(b.index || '0').split('.').length;
+      return depthB - depthA;
+    });
+
+    return [...byType.REMOVE, ...byType.CREATE, ...byType.REPLACE, ...byType.UPDATE];
+  }
+
+  /**
+   * Apply single patch
+   */
+  static applyPatch(rootElement, patch, options) {
+    const { type, index } = patch;
+
+    switch (type) {
+      case 'CREATE':
+        return this._create(rootElement, patch, options);
+      case 'REMOVE':
+        return this._remove(rootElement, patch);
+      case 'REPLACE':
+        return this._replace(rootElement, patch, options);
+      case 'UPDATE_PROPS':
+        return this._updateProps(rootElement, patch);
+      case 'UPDATE_STYLE':
+        return this._updateStyle(rootElement, patch);
+      case 'UPDATE_TEXT':
+        return this._updateText(rootElement, patch);
+      case 'UPDATE_EVENTS':
+        return this._updateEvents(rootElement, patch);
+      default:
+        throw new Error(`Unknown patch type: ${type}`);
+    }
+  }
+
+  /**
+   * Find element by index path
+   * CRITICAL: Index '0' means FIRST CHILD of rootElement, NOT the root itself
+   * Index '0' = first child (rootElement.childNodes[0])
+   * Index '1' = second child (rootElement.childNodes[1])
+   * Index '0.1' = first child's second child
+   * Index '1.0.2' = second child's first child's third child
+   */
+  static _findElement(rootElement, index) {
+    // No index or null/undefined means root element
+    // STRICT CHECK: '0' is NOT root, '0' is the first child
+    if (index === null || index === undefined || index === '') {
+      return rootElement;
+    }
+
+    // Parse index path
+    let current = rootElement;
+    // Map to numbers to key into childNodes
+    const parts = String(index).split('.').map(p => parseInt(p, 10));
+
+    // Navigate through the parts
+    for (const partIndex of parts) {
+      if (!current || !current.childNodes || partIndex >= current.childNodes.length) {
+        console.warn(`_findElement: Cannot navigate to index ${index}, at part ${partIndex}, current has ${current?.childNodes?.length || 0} children`);
+        return null;
+      }
+      current = current.childNodes[partIndex];
+    }
+
+    return current;
+  }
+
+  /**
+   * Get child index from full index path
+   * '0' -> 0
+   * '0.1' -> 1
+   * '0.1.2' -> 2
+   */
+  static _getChildIndex(index) {
+    const str = String(index || '0');
+    const parts = str.split('.');
+    return parseInt(parts[parts.length - 1], 10);
+  }
+
+  /**
+   * Get parent index from full index path
+   * '0' -> null or '' (parent is the root element itself)
+   * '0.1' -> '0' (parent of first child's second child)
+   * '0.1.2' -> '0.1'
+   */
+  static _getParentIndex(index) {
+    const str = String(index || '0');
+    const parts = str.split('.');
+
+    if (parts.length === 1) {
+      // Direct children of root - parent is rootElement itself (return null/empty)
+      return null;
+    }
+
+    parts.pop();
+    return parts.join('.');
+  }
+
+  /**
+   * CREATE - Add new element
+   */
+  /**
+   * CREATE - Add new element
+   */
+  static _create(rootElement, patch, options = {}) {
+    const { index, newNode } = patch;
+
+    if (!newNode) {
+      throw new Error('CREATE patch requires newNode');
+    }
+
+    // Get parent element
+    const parentIndex = this._getParentIndex(index);
+    let parent;
+
+    if (parentIndex === null || parentIndex === '') {
+      // Parent is the root element itself
+      parent = rootElement;
+    } else {
+      parent = this._findElement(rootElement, parentIndex);
+    }
+
+    if (!parent) {
+      throw new Error(`Parent element not found at index ${parentIndex}`);
+    }
+
+    // Create the new DOM element
+    let newElement;
+    if (options.renderer) {
+      newElement = options.renderer.createDOMNode(newNode);
+    } else {
+      newElement = this._createDOMNode(newNode);
+    }
+
+    if (!newElement) {
+      throw new Error('Failed to create DOM node');
+    }
+
+    // Get insertion position
+    const childIndex = this._getChildIndex(index);
+
+    // Insert at correct position
+    if (childIndex >= parent.childNodes.length) {
+      parent.appendChild(newElement);
+    } else {
+      parent.insertBefore(newElement, parent.childNodes[childIndex]);
+    }
+
+    return newElement;
+  }
+
+  /**
+   * REMOVE - Delete element
+   */
+  static _remove(rootElement, patch) {
+    const { index } = patch;
+
+    const element = this._findElement(rootElement, index);
+    if (!element) {
+      throw new Error(`Element not found at index ${index}`);
+    }
+
+    // Cleanup before removal
+    this._cleanup(element);
+
+    // Remove from DOM
+    if (element.parentNode) {
+      element.parentNode.removeChild(element);
+    }
+  }
+
+  /**
+   * REPLACE - Replace element entirely
+   */
+  static _replace(rootElement, patch, options = {}) {
+    const { index, newNode } = patch;
+
+    if (!newNode) {
+      throw new Error('REPLACE patch requires newNode');
+    }
+
+    const element = this._findElement(rootElement, index);
+    if (!element) {
+      throw new Error(`Element not found at index ${index}`);
+    }
+
+    // Root cannot be replaced
+    if (element === rootElement) {
+      throw new Error('Cannot replace root element (no parent)');
+    }
+
+    // Create new element
+    let newElement;
+    if (options.renderer) {
+      newElement = options.renderer.createDOMNode(newNode);
+    } else {
+      newElement = this._createDOMNode(newNode);
+    }
+
+    if (!newElement) {
+      throw new Error('Failed to create replacement DOM node');
+    }
+
+    // Cleanup old element
+    this._cleanup(element);
+
+    // Replace in DOM
+    if (element.parentNode) {
+      element.parentNode.replaceChild(newElement, element);
+      return newElement;
+      return newElement;
+    } else {
+      throw new Error('Element has no parent node');
+    }
+  }
+
+  /**
+   * UPDATE_PROPS - Update HTML attributes
+   */
+  static _updateProps(rootElement, patch) {
+    const { index, value } = patch;
+
+    if (!value || !value.changes) {
+      return;
+    }
+
+    const element = this._findElement(rootElement, index);
+    if (!element) {
+      console.warn(`_updateProps: Element not found at index ${index}`);
+      return;
+    }
+
+    const { changes } = value;
+
+    // Remove properties
+    if (changes.removed) {
+      Object.keys(changes.removed).forEach(key => {
+        this._removeProp(element, key);
+      });
+    }
+
+    // Update properties
+    if (changes.updated) {
+      Object.entries(changes.updated).forEach(([key, val]) => {
+        this._setProp(element, key, val);
+      });
+    }
+
+    // Add properties
+    if (changes.added) {
+      Object.entries(changes.added).forEach(([key, val]) => {
+        this._setProp(element, key, val);
+      });
+    }
+  }
+
+  /**
+   * UPDATE_STYLE - Update CSS styles
+   */
+  static _updateStyle(rootElement, patch) {
+    const { index, value } = patch;
+
+    if (!value || !value.changes) {
+      return;
+    }
+
+    const element = this._findElement(rootElement, index);
+    if (!element) {
+      console.warn(`_updateStyle: Element not found at index ${index}`);
+      return;
+    }
+
+    const { changes } = value;
+
+    // Remove styles
+    if (changes.removed) {
+      Object.keys(changes.removed).forEach(key => {
+        element.style[key] = '';
+      });
+    }
+
+    // Update styles
+    if (changes.updated) {
+      Object.entries(changes.updated).forEach(([key, val]) => {
+        try {
+          element.style[key] = val;
+        } catch (e) {
+          console.warn(`Failed to set style ${key}`);
+        }
+      });
+    }
+
+    // Add styles
+    if (changes.added) {
+      Object.entries(changes.added).forEach(([key, val]) => {
+        try {
+          element.style[key] = val;
+        } catch (e) {
+          console.warn(`Failed to set style ${key}`);
+        }
+      });
+    }
+  }
+
+  /**
+   * UPDATE_TEXT - Update text content
+   */
+  static _updateText(rootElement, patch) {
+    const { index, value } = patch;
+
+    const element = this._findElement(rootElement, index);
+    if (!element) {
+      console.warn(`_updateText: Element not found at index ${index}`);
+      return;
+    }
+
+    // Handle text nodes
+    if (element.nodeType === 3) { // TEXT_NODE
+      element.nodeValue = String(value !== undefined ? value : '');
+    } else {
+      element.textContent = String(value !== undefined ? value : '');
+    }
+  }
+
+  /**
+   * UPDATE_EVENTS - Update event listeners
+   */
+  static _updateEvents(rootElement, patch) {
+    const { index, value } = patch;
+
+    if (!value || !value.changes) {
+      return;
+    }
+
+    const element = this._findElement(rootElement, index);
+    if (!element) {
+      console.warn(`_updateEvents: Element not found at index ${index}`);
+      return;
+    }
+
+    const { changes } = value;
+
+    // Remove events
+    if (changes.removed) {
+      Object.keys(changes.removed).forEach(eventName => {
+        this._removeEventListener(element, eventName);
+      });
+    }
+
+    // Update events
+    if (changes.updated) {
+      Object.entries(changes.updated).forEach(([eventName, handler]) => {
+        this._removeEventListener(element, eventName);
+        if (handler) {
+          this._addEventListener(element, eventName, handler);
+        }
+      });
+    }
+
+    // Add events
+    if (changes.added) {
+      Object.entries(changes.added).forEach(([eventName, handler]) => {
+        if (handler) {
+          this._addEventListener(element, eventName, handler);
+        }
+      });
+    }
+  }
+
+  /**
+   * Create a DOM node from VNode
+   */
+  static _createDOMNode(vnode) {
+    // Text node
+    if (typeof vnode === 'string') {
+      return document.createTextNode(vnode);
+    }
+
+    if (!vnode || typeof vnode !== 'object') {
+      return document.createTextNode('');
+    }
+
+    // Element node
+    const tag = vnode.tag || 'div';
+    const element = document.createElement(tag);
+
+    // ✅ CRITICAL: Link VNode to Element
+    vnode._element = element;
+    element._vnode = vnode;
+
+    // Apply properties
+    if (vnode.props && typeof vnode.props === 'object') {
+      Object.entries(vnode.props).forEach(([key, val]) => {
+        this._setProp(element, key, val);
+      });
+    }
+
+    // Apply styles
+    if (vnode.style && typeof vnode.style === 'object') {
+      Object.entries(vnode.style).forEach(([key, val]) => {
+        try {
+          element.style[key] = val;
+        } catch (e) {
+          // Ignore style errors
+        }
+      });
+    }
+
+    // Add children
+    if (vnode.children && Array.isArray(vnode.children)) {
+      vnode.children.forEach(child => {
+        const childNode = this._createDOMNode(child);
+        if (childNode) {
+          element.appendChild(childNode);
+        }
+      });
+    }
+
+    // Attach event handlers
+    if (vnode.events && typeof vnode.events === 'object') {
+      Object.entries(vnode.events).forEach(([eventName, handler]) => {
+        if (typeof handler === 'function') {
+          this._addEventListener(element, eventName, handler);
+        }
+      });
+    }
+
+    return element;
+  }
+
+
+
+  /**
+   * Set a property on element
+   */
+  static _setProp(element, key, value) {
+    if (value === null || value === undefined) {
+      this._removeProp(element, key);
+      return;
+    }
+
+    // className
+    if (key === 'className') {
+      element.className = String(value);
+      return;
+    }
+
+    // style (object)
+    if (key === 'style' && typeof value === 'object' && value !== null) {
+      Object.entries(value).forEach(([styleKey, styleValue]) => {
+        try {
+          element.style[styleKey] = styleValue;
+        } catch (e) {
+          // Ignore style errors
+        }
+      });
+      return;
+    }
+
+    // value (for inputs, textareas)
+    if (key === 'value') {
+      if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
+        element.value = String(value);
+      }
+      return;
+    }
+
+    // checked, disabled, selected (booleans)
+    if (key === 'checked' || key === 'disabled' || key === 'selected') {
+      element[key] = !!value;
+      return;
+    }
+
+    // data-* and aria-* attributes
+    if (key.startsWith('data-') || key.startsWith('aria-')) {
+      element.setAttribute(key, String(value));
+      return;
+    }
+
+    // Try to set as property first
+    try {
+      if (key in element) {
+        element[key] = value;
+      } else {
+        element.setAttribute(key, String(value));
+      }
+    } catch (e) {
+      try {
+        element.setAttribute(key, String(value));
+      } catch (e2) {
+        // Fail silently
+      }
+    }
+  }
+
+  /**
+   * Remove a property from element
+   */
+  static _removeProp(element, key) {
+    if (key === 'className') {
+      element.className = '';
+      return;
+    }
+
+    if (key === 'value') {
+      if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
+        element.value = '';
+      }
+      return;
+    }
+
+    if (key === 'checked' || key === 'disabled' || key === 'selected') {
+      element[key] = false;
+      return;
+    }
+
+    try {
+      element.removeAttribute(key);
+    } catch (e) {
+      // Fail silently
+    }
+  }
+
+  /**
+   * Add event listener to element
+   */
+  static _addEventListener(element, eventName, handler) {
+    if (typeof handler !== 'function') {
+      return;
+    }
+
+    try {
+      // Normalize event name: onClick -> click, onMouseover -> mouseover
+      const normalizedName = eventName
+        .replace(/^on/, '')
+        .toLowerCase();
+
+      // Store reference for later removal
+      if (!element._eventListeners) {
+        element._eventListeners = {};
+      }
+
+      element.addEventListener(normalizedName, handler);
+      element._eventListeners[normalizedName] = handler;
+    } catch (e) {
+      console.warn(`Failed to add event listener ${eventName}`);
+    }
+  }
+
+  /**
+   * Remove event listener from element
+   */
+  static _removeEventListener(element, eventName) {
+    try {
+      const normalizedName = eventName
+        .replace(/^on/, '')
+        .toLowerCase();
+
+      if (element._eventListeners && element._eventListeners[normalizedName]) {
+        element.removeEventListener(normalizedName, element._eventListeners[normalizedName]);
+        delete element._eventListeners[normalizedName];
+      }
+    } catch (e) {
+      console.warn(`Failed to remove event listener ${eventName}`);
+    }
+  }
+
+  /**
+   * Cleanup element before removal
+   */
+  static _cleanup(element) {
+    if (!element) return;
+
+    // Remove all event listeners
+    if (element._eventListeners) {
+      Object.entries(element._eventListeners).forEach(([name, handler]) => {
+        try {
+          element.removeEventListener(name, handler);
+        } catch (e) {
+          // Fail silently
+        }
+      });
+      element._eventListeners = {};
+    }
+
+    // Recursively cleanup children
+    if (element.childNodes) {
+      for (let i = 0; i < element.childNodes.length; i++) {
+        this._cleanup(element.childNodes[i]);
+      }
+    }
+  }
+
+  /**
+   * Validate patches
+   */
+  static validate(patches) {
+    const errors = [];
+    const validTypes = ['CREATE', 'REMOVE', 'REPLACE', 'UPDATE_PROPS', 'UPDATE_STYLE', 'UPDATE_TEXT', 'UPDATE_EVENTS'];
+
+    if (!Array.isArray(patches)) {
+      errors.push('Patches must be an array');
+      return errors;
+    }
+
+    patches.forEach((patch, i) => {
+      if (!patch.type) {
+        errors.push(`Patch ${i}: Missing type`);
+        return;
+      }
+
+      if (!validTypes.includes(patch.type)) {
+        errors.push(`Patch ${i}: Invalid type "${patch.type}"`);
+      }
+    });
+
+    return errors;
+  }
+
+  /**
+   * Get statistics about patches
+   */
+  static getStats(patches) {
+    const stats = { total: patches.length, byType: {} };
+
+    patches.forEach(p => {
+      stats.byType[p.type] = (stats.byType[p.type] || 0) + 1;
+    });
+
+    return stats;
+  }
+}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/vdom/src/render_engine.js b/packages/flutterjs_vdom/flutterjs_vdom/src/render_engine.js
similarity index 100%
rename from packages/flutterjs_engine/src/vdom/src/render_engine.js
rename to packages/flutterjs_vdom/flutterjs_vdom/src/render_engine.js
diff --git a/packages/flutterjs_vdom/flutterjs_vdom/src/runtime_index.js b/packages/flutterjs_vdom/flutterjs_vdom/src/runtime_index.js
new file mode 100644
index 00000000..682662ea
--- /dev/null
+++ b/packages/flutterjs_vdom/flutterjs_vdom/src/runtime_index.js
@@ -0,0 +1,721 @@
+/**
+ * FlutterJS Runtime - Complete Integration Layer
+ * 
+ * FIXED: All 3 VNodeRenderer.render() calls now properly instantiate the class
+ */
+
+import { VNode } from './vnode.js';
+import { VNodeBuilder } from './vnode_builder.js';
+import { StyleConverter } from './style_converter.js';
+import { VNodeRenderer } from './vnode_renderer.js';
+import { SSRRenderer } from './ssr_renderer.js';
+import { RenderEngine } from './render_engine.js';
+import { Hydrator } from './hydrator.js';
+
+export class VNodeRuntime {
+  constructor() {
+    this.app = null;
+    this.rootElement = null;
+    this.rootVNode = null;
+    this.isHydrated = false;
+    this.hotReloadEnabled = false;
+    this.renderer = null;  // ✅ ADD: Store renderer instance
+    this.stateRegistry = new Map();
+    this.performanceMetrics = {
+      initialRender: 0,
+      updates: 0,
+      totalRenderTime: 0,
+      averageRenderTime: 0
+    };
+  }
+
+  clearMetrics() {
+    this.performanceMetrics = {
+      initialRender: 0,
+      updates: 0,
+      totalRenderTime: 0,
+      averageRenderTime: 0
+    };
+  }
+
+  /**
+   * Start the application
+   * @param {Widget} app - Root widget
+   * @param {Object} options - Runtime options
+   */
+  runApp(app, options = {}) {
+    const {
+      target = '#root',
+      mode = 'auto', // 'csr', 'ssr', 'auto'
+      enableHotReload = false,
+      enablePerformanceTracking = true,
+      onError = null
+    } = options;
+
+    try {
+      console.log(`  [RUNTIME] runApp called with target: ${target}`);
+      this.app = app;
+      this.hotReloadEnabled = enableHotReload;
+
+      // Get target element
+      this.rootElement = this.getTargetElement(target);
+
+      // CREATE RENDERER INSTANCE HERE
+      this.renderer = new VNodeRenderer({ debugMode: true });
+
+      // Check if SSR content exists
+      const hasSSRContent = this.hasSSRContent(this.rootElement);
+      console.log(`  [RUNTIME] Has SSR content: ${hasSSRContent}`);
+
+      if (hasSSRContent) {
+        // Hydration mode
+        console.log(`  [RUNTIME] Entering hydration mode`);
+        this.hydrateApp(app, options);
+      } else {
+        // Client-side render mode
+        console.log(`  [RUNTIME] Entering CSR mode`);
+        this.renderApp(app, options);
+      }
+
+      // Setup hot reload if enabled
+      if (enableHotReload) {
+        console.log(`  [RUNTIME] Setting up hot reload`);
+        this.setupHotReload();
+      }
+
+      // Track performance
+      if (enablePerformanceTracking) {
+        console.log(`  [RUNTIME] Starting performance tracking`);
+        this.startPerformanceTracking();
+      }
+
+      return this;
+    } catch (error) {
+      if (onError) {
+        onError(error);
+      } else {
+        console.error('FlutterJS Runtime Error:', error);
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * Client-side render the app
+   * @private
+   */
+  renderApp(app, options = {}) {
+    console.log(`  [RENDERAPP] Starting client-side render`);
+    const startTime = performance.now();
+
+    // Build widget tree
+    const context = this.createBuildContext(options);
+    console.log(`  [RENDERAPP] Build context created`);
+
+    const widgetTree = app.build ? app.build(context) : app;
+    console.log(`  [RENDERAPP] Widget tree built`);
+    console.log(`  [RENDERAPP] Widget tree:`, JSON.stringify(widgetTree, null, 2).substring(0, 200));
+
+    // Convert to VNode
+    const vNodeBuilder = new VNodeBuilder({
+      debugMode: this.flutterConfig?.debugMode || false,
+      runtime: this  // ← CRITICAL: Pass runtime
+    });
+    this.rootVNode = vNodeBuilder.build(widgetTree, context,);
+    console.log(`  [RENDERAPP] VNode created`);
+    console.log(`  [RENDERAPP] VNode tag: ${this.rootVNode.tag}`);
+    console.log(`  [RENDERAPP] VNode children count: ${this.rootVNode.children ? this.rootVNode.children.length : 0}`);
+    console.log(`  [RENDERAPP] VNode props:`, this.rootVNode.props);
+    console.log(`  [RENDERAPP] Full VNode:`, JSON.stringify(this.rootVNode, null, 2).substring(0, 300));
+
+    // Render to DOM
+    console.log(`  [RENDERAPP] Root element before render:`, this.rootElement.innerHTML.substring(0, 100));
+    console.log(`  [RENDERAPP] Root element classes:`, this.rootElement.className);
+
+    // ✅ FIX #1: Use instance instead of static call
+    if (!this.renderer) {
+      this.renderer = new VNodeRenderer({ debugMode: true });
+    }
+
+    this.renderer.render(this.rootVNode, this.rootElement, {
+      clear: true
+    });
+    console.log(`  [RENDERAPP] Rendered to DOM`);
+
+    console.log(`  [RENDERAPP] Root element after render:`, this.rootElement.innerHTML.substring(0, 200));
+    console.log(`  [RENDERAPP] Root element child count:`, this.rootElement.children.length);
+    console.log(`  [RENDERAPP] Root element children:`, Array.from(this.rootElement.children).map(c => ({ tag: c.tagName, class: c.className, text: c.textContent.substring(0, 50) })));
+
+    const endTime = performance.now();
+    this.performanceMetrics.initialRender = endTime - startTime;
+
+    console.log(`✓ App rendered in ${this.performanceMetrics.initialRender.toFixed(2)}ms`);
+  }
+
+  /**
+   * Hydrate server-rendered app
+   * @private
+   */
+  hydrateApp(app, options = {}) {
+    console.log(`  [HYDRATEAPP] Starting hydration`);
+    const startTime = performance.now();
+
+    // Build widget tree
+    const context = this.createBuildContext(options);
+    console.log(`  [HYDRATEAPP] Build context created`);
+
+    const widgetTree = app.build ? app.build(context) : app;
+    console.log(`  [HYDRATEAPP] Widget tree built`);
+    const vNodeBuilder = new VNodeBuilder({
+      debugMode: this.flutterConfig?.debugMode || false,
+      runtime: this  // ← CRITICAL: Pass runtime
+    });
+    // Convert to VNode
+    this.rootVNode = vNodeBuilder.build(widgetTree, context);
+    console.log(`  [HYDRATEAPP] VNode created`);
+
+    // Hydrate
+    const hydrationData = Hydrator.loadHydrationData();
+    console.log(`  [HYDRATEAPP] Hydration data loaded`);
+
+    Hydrator.hydrate(this.rootElement, this.rootVNode, hydrationData);
+    console.log(`  [HYDRATEAPP] Hydration complete`);
+
+    this.isHydrated = true;
+
+    const endTime = performance.now();
+    this.performanceMetrics.initialRender = endTime - startTime;
+
+    console.log(`✓ App hydrated in ${this.performanceMetrics.initialRender.toFixed(2)}ms`);
+  }
+
+  /**
+   * Update the application (e.g., after state change)
+   * @param {Function} updateFn - Function that updates state
+   */
+  update(updateFn) {
+    console.log(`  [UPDATE] Update called`);
+
+    if (!this.app || !this.rootElement) {
+      console.log(`  [UPDATE] ERROR: App not initialized`);
+      throw new Error('App not initialized. Call runApp() first.');
+    }
+
+    const startTime = performance.now();
+
+    // Execute update function
+    if (updateFn) {
+      console.log(`  [UPDATE] Executing update function`);
+      updateFn();
+    }
+
+    // Rebuild widget tree
+    const context = this.createBuildContext();
+    console.log(`  [UPDATE] Build context created`);
+
+    const widgetTree = this.app.build ? this.app.build(context) : this.app;
+    console.log(`  [UPDATE] Widget tree rebuilt`);
+
+    const vNodeBuilder = new VNodeBuilder({
+      debugMode: this.flutterConfig?.debugMode || false,
+      runtime: this  // ← CRITICAL: Pass runtime
+    });
+
+    // Convert to VNode
+    const newVNode = vNodeBuilder.build(widgetTree, context);
+    console.log(`  [UPDATE] New VNode created`);
+
+    // ✅ FIX #2 & #3: Use instance instead of static calls
+    if (!this.renderer) {
+      this.renderer = new VNodeRenderer({ debugMode: true });
+    }
+
+    this.renderer.render(newVNode, this.rootElement, { clear: true });
+
+    this.rootVNode = newVNode;
+
+    const endTime = performance.now();
+    const renderTime = endTime - startTime;
+
+    // Ensure at least 0.01ms is recorded if time was measured
+    const recordedTime = renderTime > 0 ? renderTime : 0.01;
+
+    this.performanceMetrics.updates++;
+    this.performanceMetrics.totalRenderTime += recordedTime;
+    this.performanceMetrics.averageRenderTime =
+      this.performanceMetrics.totalRenderTime / this.performanceMetrics.updates;
+
+    console.log(`  [UPDATE] Update metrics: updates=${this.performanceMetrics.updates}, renderTime=${renderTime.toFixed(2)}ms`);
+
+    if (this.hotReloadEnabled) {
+      console.log(`♻ Updated in ${renderTime.toFixed(2)}ms`);
+    }
+  }
+
+  /**
+   * Register a stateful widget
+   * @param {string} widgetId - Unique widget identifier
+   * @param {Object} stateObject - State object with setState method
+   */
+  registerState(widgetId, stateObject) {
+    console.log(`  [REGISTRY] Registering state for ${widgetId}`);
+    this.stateRegistry.set(widgetId, stateObject);
+
+    // Wrap setState to trigger runtime update
+    const originalSetState = stateObject.setState.bind(stateObject);
+    stateObject.setState = (updater) => {
+      console.log(`  [REGISTRY] setState called for ${widgetId}`);
+      originalSetState(updater);
+      this.update();
+    };
+  }
+
+  /**
+   * Unregister a stateful widget
+   * @param {string} widgetId - Widget identifier
+   */
+  unregisterState(widgetId) {
+    console.log(`  [REGISTRY] Unregistering state for ${widgetId}`);
+    this.stateRegistry.delete(widgetId);
+  }
+
+  /**
+   * Get state object by widget ID
+   * @param {string} widgetId - Widget identifier
+   * @returns {Object|null} State object
+   */
+  getState(widgetId) {
+    console.log(`  [REGISTRY] Getting state for ${widgetId}`);
+    return this.stateRegistry.get(widgetId) || null;
+  }
+
+  /**
+   * Hot reload the application
+   */
+  hotReload() {
+    console.log(`  [HOTRELOAD] hotReload called`);
+
+    if (!this.hotReloadEnabled) {
+      console.warn('Hot reload is not enabled');
+      return;
+    }
+
+    console.log('🔥 Hot reloading...');
+
+    if (!this.app || !this.rootElement) {
+      console.warn('No app running. Cannot hot reload.');
+      return;
+    }
+
+    this.update();
+  }
+
+  /**
+   * Create build context
+   * @private
+   */
+  createBuildContext(options = {}) {
+    console.log(`  [CONTEXT] Creating build context`);
+
+    return {
+      runtime: this,
+      mediaQuery: this.getMediaQuery(),
+      theme: options.theme || this.getDefaultTheme(),
+      navigator: this.createNavigator(),
+      ...options.context
+    };
+  }
+
+  /**
+   * Get media query information
+   * @private
+   */
+  getMediaQuery() {
+    if (typeof window === 'undefined') {
+      console.log(`  [MEDIAQUERY] Server-side - returning default`);
+      return {
+        width: 1920,
+        height: 1080,
+        devicePixelRatio: 1
+      };
+    }
+
+    const mq = {
+      width: window.innerWidth,
+      height: window.innerHeight,
+      devicePixelRatio: window.devicePixelRatio || 1,
+      orientation: window.innerWidth > window.innerHeight ? 'landscape' : 'portrait'
+    };
+
+    return mq;
+  }
+
+  /**
+   * Get default Material Design theme
+   * @private
+   */
+  getDefaultTheme() {
+    console.log(`  [THEME] Creating default Material Design theme`);
+
+    return {
+      primaryColor: '#6750a4',
+      onPrimary: '#ffffff',
+      primaryContainer: '#eaddff',
+      onPrimaryContainer: '#21005e',
+      surface: '#fffbfe',
+      onSurface: '#1c1b1f',
+      outline: '#79747e',
+      outlineVariant: '#cac7cf'
+    };
+  }
+
+  /**
+   * Create navigator for routing
+   * @private
+   */
+  createNavigator() {
+    console.log(`  [NAVIGATOR] Creating navigator`);
+
+    return {
+      push: (route) => {
+        console.log('Navigation not yet implemented:', route);
+      },
+      pop: () => {
+        console.log('Navigation not yet implemented');
+      }
+    };
+  }
+
+  /**
+   * Get target element
+   * @private
+   */
+  getTargetElement(target) {
+    console.log(`  [TARGET] Getting target element: ${target}`);
+
+    if (typeof target === 'string') {
+      const element = document.querySelector(target);
+      if (!element) {
+        console.log(`  [TARGET] ERROR: Element not found for selector: ${target}`);
+        throw new Error(`Target element "${target}" not found`);
+      }
+      console.log(`  [TARGET] Found element by selector`);
+      return element;
+    }
+
+    if (target instanceof HTMLElement) {
+      console.log(`  [TARGET] Using HTMLElement target`);
+      return target;
+    }
+
+    console.log(`  [TARGET] ERROR: Invalid target type`);
+    throw new Error('Invalid target: must be a selector string or HTMLElement');
+  }
+
+  /**
+   * Check if element has SSR content
+   * @private
+   */
+  hasSSRContent(element) {
+    console.log(`  [SSRCHECK] Checking for SSR content`);
+
+    // Check for hydration data script
+    const hydrationScript = document.getElementById('__FLUTTERJS_HYDRATION_DATA__');
+
+    // Check if element has children (SSR content)
+    const hasContent = hydrationScript && element.children.length > 0;
+    console.log(`  [SSRCHECK] Hydration script found: ${hydrationScript !== null}, Element has children: ${element.children.length > 0}`);
+
+    return hasContent;
+  }
+
+  /**
+   * Setup hot reload listener
+   * @private
+   */
+  setupHotReload() {
+    if (typeof window === 'undefined') {
+      console.log(`  [HOTRELOAD] Server-side environment, skipping`);
+      return;
+    }
+
+    console.log(`  [HOTRELOAD] Setting up hot reload listeners`);
+
+    // Listen for custom hot reload event
+    window.addEventListener('flutterjs:hotreload', () => {
+      console.log(`  [HOTRELOAD] Received hot reload event`);
+      this.hotReload();
+    });
+
+    // Expose hot reload globally
+    window.__flutterjs_hot_reload = () => {
+      console.log(`  [HOTRELOAD] Called via global function`);
+      this.hotReload();
+    };
+
+    console.log('🔥 Hot reload enabled');
+  }
+
+  /**
+   * Start performance tracking
+   * @private
+   */
+  startPerformanceTracking() {
+    if (typeof window === 'undefined') {
+      console.log(`  [PERFTRACK] Server-side environment, skipping`);
+      return;
+    }
+
+    console.log(`  [PERFTRACK] Starting FPS tracking`);
+
+    // Track FPS
+    let lastTime = performance.now();
+    let frames = 0;
+
+    const trackFPS = () => {
+      frames++;
+      const currentTime = performance.now();
+
+      if (currentTime >= lastTime + 1000) {
+        const fps = Math.round((frames * 1000) / (currentTime - lastTime));
+        this.performanceMetrics.fps = fps;
+        console.log(`  [PERFTRACK] FPS: ${fps}`);
+        frames = 0;
+        lastTime = currentTime;
+      }
+
+      requestAnimationFrame(trackFPS);
+    };
+
+    requestAnimationFrame(trackFPS);
+  }
+
+  /**
+   * Get performance metrics
+   * @returns {Object} Performance metrics
+   */
+  getMetrics() {
+    console.log(`  [METRICS] Getting metrics - app exists: ${this.app !== null}`);
+
+    if (!this.app) {
+      console.log(`  [METRICS] No app, returning null`);
+      return null;
+    }
+
+    const metrics = {
+      ...this.performanceMetrics,
+      isHydrated: this.isHydrated,
+      stateCount: this.stateRegistry.size,
+      vnodeStats: this.rootVNode ? RenderEngine.getStats(this.rootVNode) : null
+    };
+
+    console.log(`  [METRICS] Returning metrics:`, metrics);
+    return metrics;
+  }
+
+  /**
+   * Destroy the runtime and cleanup
+   */
+  destroy() {
+    console.log(`  [DESTROY] Destroying runtime`);
+
+    // Cleanup event listeners
+    if (this.rootElement && this.renderer) {
+      console.log(`  [DESTROY] Cleaning up event listeners`);
+      this.renderer.cleanupEventListeners(this.rootElement);
+    }
+
+    // Clear state registry
+    console.log(`  [DESTROY] Clearing state registry (size: ${this.stateRegistry.size})`);
+    this.stateRegistry.clear();
+
+    // Remove hot reload listener
+    if (typeof window !== 'undefined') {
+      console.log(`  [DESTROY] Removing hot reload listener`);
+      window.removeEventListener('flutterjs:hotreload', this.hotReload);
+      delete window.__flutterjs_hot_reload;
+    }
+
+    // Clear references
+    this.app = null;
+    this.rootElement = null;
+    this.rootVNode = null;
+    this.renderer = null;
+
+    console.log('✓ Runtime destroyed');
+  }
+}
+
+// ============================================================================
+// Global API
+// ============================================================================
+
+let globalRuntime = null;
+
+/**
+ * Start FlutterJS application
+ * @param {Widget} app - Root widget
+ * @param {Object} options - Runtime options
+ */
+export function runApp(app, options = {}) {
+  console.log(`[GLOBAL] runApp called`);
+
+  if (!globalRuntime) {
+    console.log(`[GLOBAL] Creating new global runtime`);
+    globalRuntime = new VNodeRuntime();
+  }
+  return globalRuntime.runApp(app, options);
+}
+
+/**
+ * Get the global runtime instance
+ * @returns {VNodeRuntime} Runtime instance
+ */
+export function getRuntime() {
+  console.log(`[GLOBAL] getRuntime called, exists: ${globalRuntime !== null}`);
+  return globalRuntime;
+}
+
+/**
+ * Update the application
+ * @param {Function} updateFn - Update function
+ */
+export function updateApp(updateFn) {
+  console.log(`[GLOBAL] updateApp called`);
+
+  if (!globalRuntime) {
+    console.log(`[GLOBAL] ERROR: No runtime`);
+    throw new Error('No app running. Call runApp() first.');
+  }
+  globalRuntime.update(updateFn);
+}
+
+/**
+ * Get performance metrics
+ * @returns {Object} Metrics
+ */
+export function getMetrics() {
+  console.log(`[GLOBAL] getMetrics called`);
+
+  if (!globalRuntime) {
+    console.log(`[GLOBAL] No runtime, returning null`);
+    return null;
+  }
+  return globalRuntime.getMetrics();
+}
+
+/**
+ * Trigger hot reload
+ */
+export function hotReload() {
+  console.log(`[GLOBAL] hotReload called`);
+
+  if (!globalRuntime) {
+    console.warn('No app running');
+    return;
+  }
+  globalRuntime.hotReload();
+}
+
+/**
+ * Server-side render to HTML
+ * @param {Widget} app - Root widget
+ * @param {Object} options - SSR options
+ * @returns {string} HTML string
+ */
+export function renderToString(app, options = {}) {
+  console.log(`[GLOBAL] renderToString called`);
+
+  const context = {
+    mediaQuery: { width: 1920, height: 1080, devicePixelRatio: 1 },
+    theme: options.theme || {},
+    ...options.context
+  };
+
+  console.log(`[GLOBAL] SSR: Creating build context`);
+  const widgetTree = app.build ? app.build(context) : app;
+
+  console.log(`[GLOBAL] SSR: Building VNode`);
+  // ✅ Create instance with runtime
+  const vNodeBuilder = new VNodeBuilder({
+    debugMode: this.flutterConfig?.debugMode || false,
+    runtime: this  // ← CRITICAL: Pass runtime
+  });
+  this.rootVNode = vNodeBuilder.build(widgetTree, context);
+  console.log(`[GLOBAL] SSR: Rendering to string`);
+  return RenderEngine.renderServer(vnode, {
+    title: options.title || 'FlutterJS App',
+    meta: options.meta || {},
+    styles: options.styles || [],
+    scripts: options.scripts || [],
+    includeHydration: options.includeHydration !== false,
+    includeCriticalCSS: options.includeCriticalCSS !== false,
+    includeRuntime: options.includeRuntime !== false
+  });
+}
+
+/**
+ * Hydrate server-rendered content
+ * @param {Widget} app - Root widget
+ * @param {Object} options - Hydration options
+ */
+export function hydrate(app, options = {}) {
+  console.log(`[GLOBAL] hydrate called`);
+
+  if (!globalRuntime) {
+    console.log(`[GLOBAL] Creating new global runtime for hydration`);
+    globalRuntime = new VNodeRuntime();
+  }
+
+  const target = options.target || '#root';
+  console.log(`[GLOBAL] Getting target: ${target}`);
+
+  const rootElement = typeof target === 'string'
+    ? document.querySelector(target)
+    : target;
+
+  if (!rootElement) {
+    console.log(`[GLOBAL] ERROR: Target not found`);
+    throw new Error(`Target element "${target}" not found`);
+  }
+
+  console.log(`[GLOBAL] Setting up hydration`);
+  globalRuntime.rootElement = rootElement;
+  globalRuntime.app = app;
+  globalRuntime.hydrateApp(app, options);
+
+  return globalRuntime;
+}
+
+// Default export
+export default {
+  runApp,
+  getRuntime,
+  updateApp,
+  getMetrics,
+  hotReload,
+  renderToString,
+  hydrate,
+
+  VNodeRuntime
+};
+
+// Browser global
+if (typeof window !== 'undefined') {
+  console.log(`[GLOBAL] Setting up window.FlutterJS`);
+  window.FlutterJS = {
+    runApp,
+    getRuntime,
+    updateApp,
+    getMetrics,
+    hotReload,
+    renderToString,
+    hydrate
+  };
+  console.log(`[GLOBAL] window.FlutterJS ready`);
+}
+
+export function clearMetrics() {
+  if (!globalRuntime) return;
+  globalRuntime.clearMetrics();
+}
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/vdom/src/ssr_renderer.js b/packages/flutterjs_vdom/flutterjs_vdom/src/ssr_renderer.js
similarity index 100%
rename from packages/flutterjs_engine/src/vdom/src/ssr_renderer.js
rename to packages/flutterjs_vdom/flutterjs_vdom/src/ssr_renderer.js
diff --git a/packages/flutterjs_engine/src/vdom/src/state_binding.js b/packages/flutterjs_vdom/flutterjs_vdom/src/state_binding.js
similarity index 100%
rename from packages/flutterjs_engine/src/vdom/src/state_binding.js
rename to packages/flutterjs_vdom/flutterjs_vdom/src/state_binding.js
diff --git a/packages/flutterjs_engine/src/vdom/src/style_converter.js b/packages/flutterjs_vdom/flutterjs_vdom/src/style_converter.js
similarity index 100%
rename from packages/flutterjs_engine/src/vdom/src/style_converter.js
rename to packages/flutterjs_vdom/flutterjs_vdom/src/style_converter.js
diff --git a/packages/flutterjs_engine/src/vdom/src/update_scheduler.js b/packages/flutterjs_vdom/flutterjs_vdom/src/update_scheduler.js
similarity index 100%
rename from packages/flutterjs_engine/src/vdom/src/update_scheduler.js
rename to packages/flutterjs_vdom/flutterjs_vdom/src/update_scheduler.js
diff --git a/packages/flutterjs_vdom/flutterjs_vdom/src/vnode.js b/packages/flutterjs_vdom/flutterjs_vdom/src/vnode.js
new file mode 100644
index 00000000..2a4e5819
--- /dev/null
+++ b/packages/flutterjs_vdom/flutterjs_vdom/src/vnode.js
@@ -0,0 +1,486 @@
+/**
+ * VNode - Virtual DOM Node Implementation
+ * 
+ * Represents a virtual DOM node that can:
+ * 1. Handle any Flutter widget type
+ * 2. Serialize to HTML string (SSR)
+ * 3. Convert to actual DOM element (CSR)
+ * 4. Support hydration (SSR -> CSR transition)
+ * 5. Track state bindings
+ * 6. Manage event handlers
+ */
+
+class VNode {
+  /**
+   * @param {Object} config - VNode configuration
+   * @param {string} config.tag - HTML tag name (div, span, button, etc.)
+   * @param {Object} config.props - HTML attributes {className, id, data-*, etc.}
+   * @param {Object} config.style - CSS styles {color, padding, display, etc.}
+   * @param {Array} config.children - Child VNodes or text strings
+   * @param {string|number} config.key - Unique key for list reconciliation
+   * @param {Function} config.ref - Callback when DOM element is created
+   * @param {Object} config.events - Event handlers {click, change, input, etc.}
+   * @param {string} config.statefulWidgetId - ID of owning StatefulWidget
+   * @param {string} config.stateProperty - State property this node displays
+   * @param {boolean} config.isStateBinding - Whether this depends on state
+   * @param {Function} config.updateFn - Callback on state change
+   * @param {Object} config.metadata - Additional widget metadata
+   */
+  constructor({
+    tag = 'div',
+    props = {},
+    style = {},
+    children = [],
+    key = null,
+    ref = null,
+    events = {},
+    statefulWidgetId = null,
+    stateProperty = null,
+    isStateBinding = false,
+    updateFn = null,
+    metadata = {}
+  } = {}) {
+    this.tag = tag;
+    this.props = props || {};
+    this.props = props || {};
+    this.style = style || {};
+    this.events = events || {};
+
+    // ✅ FIX: Extract props.style into this.style for backward compatibility
+    // Some widgets incorrectly pass styles inside props.style instead of style
+    if (this.props && this.props.style && typeof this.props.style === 'object') {
+      // Merge props.style into this.style (props.style takes precedence for conflicts)
+      this.style = { ...this.style, ...this.props.style };
+      // Remove style from props to avoid duplication in HTML attributes
+      delete this.props.style;
+    }
+
+    // ✅ FIX: Extract event handlers (on*) from props to events
+    // Some widgets pass event handlers in props (e.g., onMouseDown, onClick)
+    // but the renderer expects them in the events object
+    if (this.props && typeof this.props === 'object') {
+      Object.keys(this.props).forEach(key => {
+        // Check for event handler pattern: starts with 'on' + uppercase letter
+        if (key.length > 2 && key.startsWith('on') && key[2] === key[2].toUpperCase()) {
+          const handler = this.props[key];
+          if (typeof handler === 'function') {
+            this.events[key] = handler;
+            delete this.props[key];
+          }
+        }
+      });
+    }
+
+    this.children = Array.isArray(children) ? children : [];
+    this.key = key;
+    this.ref = ref;
+    this.ref = ref;
+
+    // State binding
+    this.statefulWidgetId = statefulWidgetId;
+    this.stateProperty = stateProperty;
+    this.isStateBinding = isStateBinding;
+    this.updateFn = updateFn;
+
+    // Metadata (widget type, original props, etc.)
+    this.metadata = metadata || {};
+
+    // Runtime references
+    this._element = null;  // DOM element (set during rendering)
+    this._parent = null;   // Parent VNode
+    this._index = null;    // Index in parent's children
+  }
+
+  /**
+   * Convert VNode to HTML string (Server-Side Rendering)
+   * @param {Object} options - Rendering options
+   * @returns {string} HTML string
+   */
+  toHTML(options = {}) {
+    // Handle text nodes
+    if (typeof this === 'string') {
+      return VNode.escapeHTML(this);
+    }
+
+    // Handle null/undefined
+    if (!this || !this.tag) {
+      return '';
+    }
+
+    // Build opening tag with attributes
+    const attrs = this._serializeAttributes();
+    const openTag = `<${this.tag}${attrs ? ' ' + attrs : ''}>`;
+
+    // Self-closing tags
+    if (VNode.VOID_TAGS.includes(this.tag)) {
+      return openTag;
+    }
+
+    // Render children
+    const childrenHTML = this.children
+      .map(child => {
+        if (child instanceof VNode) {
+          return child.toHTML(options);
+        }
+        if (typeof child === 'string') {
+          return VNode.escapeHTML(child);
+        }
+        return '';
+      })
+      .join('');
+
+    const closeTag = `</${this.tag}>`;
+    return `${openTag}${childrenHTML}${closeTag}`;
+  }
+
+  /**
+   * Convert VNode to actual DOM element (Client-Side Rendering)
+   * @param {Object} options - Rendering options
+   * @returns {HTMLElement} DOM element
+   */
+  toDOM(options = {}) {
+    // Handle text nodes
+    if (typeof this === 'string') {
+      return document.createTextNode(this);
+    }
+
+    // Handle null/undefined
+    if (!this || !this.tag) {
+      return document.createTextNode('');
+    }
+
+    // Create DOM element
+    const element = document.createElement(this.tag);
+
+    // Apply props (HTML attributes)
+    this._applyProps(element);
+
+    // Apply styles (CSS)
+    this._applyStyles(element);
+
+    // Attach event listeners
+    this._applyEvents(element);
+
+    // Add children recursively
+    this.children.forEach((child, index) => {
+      let childNode;
+
+      if (child instanceof VNode) {
+        childNode = child.toDOM(options);
+        child._parent = this;
+        child._index = index;
+      } else if (typeof child === 'string') {
+        childNode = document.createTextNode(child);
+      } else {
+        childNode = document.createTextNode(String(child || ''));
+      }
+
+      if (childNode) {
+        element.appendChild(childNode);
+      }
+    });
+
+    // Store reference
+    this._element = element;
+    element._vnode = this;
+
+    // Call ref callback
+    if (typeof this.ref === 'function') {
+      this.ref(element);
+    }
+
+    return element;
+  }
+
+  /**
+   * Hydrate existing SSR-rendered DOM with interactivity
+   * @param {HTMLElement} domElement - Existing DOM element from SSR
+   * @returns {HTMLElement} Hydrated element
+   */
+  hydrate(domElement) {
+    if (!domElement || !this.tag) {
+      return null;
+    }
+
+    // Store reference
+    this._element = domElement;
+    domElement._vnode = this;
+
+    // Attach event listeners (SSR doesn't include events)
+    this._applyEvents(domElement);
+
+    // Hydrate children recursively
+    const domChildren = Array.from(domElement.childNodes);
+    let vnodeChildIndex = 0;
+
+    domChildren.forEach((domChild, domIndex) => {
+      const vnodeChild = this.children[vnodeChildIndex];
+
+      if (!vnodeChild) return;
+
+      if (vnodeChild instanceof VNode) {
+        vnodeChild.hydrate(domChild);
+        vnodeChild._parent = this;
+        vnodeChild._index = vnodeChildIndex;
+        vnodeChildIndex++;
+      } else if (domChild.nodeType === Node.TEXT_NODE) {
+        // Text node - just verify content matches
+        if (String(vnodeChild) === domChild.textContent) {
+          vnodeChildIndex++;
+        }
+      }
+    });
+
+    // Call ref callback
+    if (typeof this.ref === 'function') {
+      this.ref(domElement);
+    }
+
+    return domElement;
+  }
+
+  /**
+   * Serialize attributes to HTML string
+   * @private
+   * @returns {string} Attributes string
+   */
+  _serializeAttributes() {
+    const attrs = [];
+
+    // Props (HTML attributes)
+    if (this.props) {
+      Object.entries(this.props).forEach(([key, value]) => {
+        if (value === null || value === undefined || value === false) {
+          return;
+        }
+
+        if (value === true) {
+          attrs.push(key);
+        } else {
+          // Convert className to class for HTML
+          const attrName = key === 'className' ? 'class' : key;
+          const escaped = VNode.escapeAttribute(String(value));
+          attrs.push(`${attrName}="${escaped}"`);
+        }
+      });
+    }
+
+    // Inline styles
+    if (this.style && typeof this.style === 'object') {
+      const styleStr = Object.entries(this.style)
+        .filter(([_, value]) => value !== null && value !== undefined)
+        .map(([key, value]) => {
+          // Convert camelCase to kebab-case properly
+          const cssKey = key
+            .replace(/([A-Z])/g, '-$1')
+            .toLowerCase();
+          return `${cssKey}: ${value}`;
+        })
+        .join('; ');
+
+      if (styleStr) {
+        attrs.push(`style="${VNode.escapeAttribute(styleStr)}"`);
+      }
+    }
+    // Data attributes from metadata
+    if (this.metadata.widgetType) {
+      attrs.push(`data-widget-type="${VNode.escapeAttribute(this.metadata.widgetType)}"`);
+    }
+
+    if (this.key !== null && this.key !== undefined) {
+      attrs.push(`data-key="${VNode.escapeAttribute(String(this.key))}"`);
+    }
+
+    return attrs.join(' ');
+  }
+
+  /**
+   * Apply props to DOM element
+   * @private
+   * @param {HTMLElement} element - Target element
+   */
+  _applyProps(element) {
+    if (!this.props) return;
+
+    Object.entries(this.props).forEach(([key, value]) => {
+      if (value === null || value === undefined) return;
+
+      try {
+        if (key === 'className') {
+          element.className = value;
+        } else if (key === 'value' && (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA')) {
+          element.value = value;
+        } else if (key === 'checked' && element.tagName === 'INPUT') {
+          element.checked = !!value;
+        } else if (key.startsWith('data-') || key.startsWith('aria-')) {
+          element.setAttribute(key, String(value));
+        } else if (typeof value === 'boolean') {
+          if (value) {
+            element.setAttribute(key, '');
+          }
+        } else {
+          // Try property first, fall back to attribute
+          if (key in element) {
+            element[key] = value;
+          } else {
+            element.setAttribute(key, String(value));
+          }
+        }
+      } catch (error) {
+        console.warn(`Failed to set property ${key}:`, error);
+      }
+    });
+  }
+
+  /**
+   * Apply styles to DOM element
+   * @private
+   * @param {HTMLElement} element - Target element
+   */
+  _applyStyles(element) {
+    if (!this.style || typeof this.style !== 'object') return;
+
+    Object.entries(this.style).forEach(([key, value]) => {
+      if (value !== null && value !== undefined) {
+        try {
+          element.style[key] = value;
+        } catch (error) {
+          console.warn(`Failed to set style ${key}:`, error);
+        }
+      }
+    });
+  }
+
+  /**
+   * Attach event listeners to DOM element
+   * @private
+   * @param {HTMLElement} element - Target element
+   */
+  _applyEvents(element) {
+    if (!this.events) return;
+
+    Object.entries(this.events).forEach(([eventName, handler]) => {
+      if (typeof handler !== 'function') return;
+
+      // Normalize event name (onClick -> click, onInput -> input)
+      const normalizedName = eventName
+        .replace(/^on/, '')
+        .toLowerCase();
+
+      // Store reference for cleanup
+      if (!element._eventListeners) {
+        element._eventListeners = {};
+      }
+
+      // Remove old listener if exists
+      if (element._eventListeners[normalizedName]) {
+        element.removeEventListener(
+          normalizedName,
+          element._eventListeners[normalizedName]
+        );
+      }
+
+      // Add new listener
+      element.addEventListener(normalizedName, handler);
+      element._eventListeners[normalizedName] = handler;
+    });
+  }
+
+  /**
+   * Create a clone of this VNode
+   * @returns {VNode} Cloned VNode
+   */
+  clone() {
+    return new VNode({
+      tag: this.tag,
+      props: { ...this.props },
+      style: { ...this.style },
+      children: this.children.map(child =>
+        child instanceof VNode ? child.clone() : child
+      ),
+      key: this.key,
+      ref: this.ref,
+      events: { ...this.events },
+      statefulWidgetId: this.statefulWidgetId,
+      stateProperty: this.stateProperty,
+      isStateBinding: this.isStateBinding,
+      updateFn: this.updateFn,
+      metadata: { ...this.metadata }
+    });
+  }
+
+  /**
+   * Get debug representation
+   * @returns {string} Debug string
+   */
+  toString() {
+    const childrenStr = this.children.length > 0
+      ? ` [${this.children.length} children]`
+      : '';
+    const keyStr = this.key !== null ? ` key="${this.key}"` : '';
+    return `<${this.tag}${keyStr}${childrenStr}>`;
+  }
+
+  // Static utility methods
+
+  /**
+   * Escape HTML special characters
+   * @param {string} str - String to escape
+   * @returns {string} Escaped string
+   */
+  static escapeHTML(str) {
+    const map = {
+      '&': '&amp;',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&#39;'
+    };
+    return String(str).replace(/[&<>"']/g, c => map[c]);
+  }
+
+  /**
+   * Escape HTML attribute value
+   * @param {string} str - String to escape
+   * @returns {string} Escaped string
+   */
+  static escapeAttribute(str) {
+    return VNode.escapeHTML(str);
+  }
+
+  /**
+   * Check if tag is self-closing
+   * @param {string} tag - Tag name
+   * @returns {boolean} True if void tag
+   */
+  static isVoidTag(tag) {
+    return VNode.VOID_TAGS.includes(tag);
+  }
+
+  /**
+   * Create text VNode
+   * @param {string} text - Text content
+   * @returns {string} Text node (represented as string)
+   */
+  static text(text) {
+    return String(text || '');
+  }
+
+  /**
+   * Create fragment (multiple children without wrapper)
+   * @param {Array} children - Child nodes
+   * @returns {Array} Children array
+   */
+  static fragment(children) {
+    return Array.isArray(children) ? children : [children];
+  }
+}
+
+// Static constants
+VNode.VOID_TAGS = [
+  'area', 'base', 'br', 'col', 'embed', 'hr', 'img',
+  'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'
+];
+
+
+export { VNode }
\ No newline at end of file
diff --git a/packages/flutterjs_engine/src/vdom/src/vnode_builder.js b/packages/flutterjs_vdom/flutterjs_vdom/src/vnode_builder.js
similarity index 100%
rename from packages/flutterjs_engine/src/vdom/src/vnode_builder.js
rename to packages/flutterjs_vdom/flutterjs_vdom/src/vnode_builder.js
diff --git a/packages/flutterjs_vdom/flutterjs_vdom/src/vnode_differ.js b/packages/flutterjs_vdom/flutterjs_vdom/src/vnode_differ.js
new file mode 100644
index 00000000..e39017fc
--- /dev/null
+++ b/packages/flutterjs_vdom/flutterjs_vdom/src/vnode_differ.js
@@ -0,0 +1,473 @@
+// ============================================================================
+// VNODE DIFFER - Compares old and new VNode trees and generates patches
+// Layer: RECONCILIATION
+// Implements efficient diffing like React's reconciliation algorithm
+// ============================================================================
+
+import { VNode } from './vnode.js';
+import { VNodeRenderer } from "./vnode_renderer.js";
+
+/**
+ * Patch types generated by differ
+ */
+const PatchType = {
+  CREATE: 'CREATE',          // New node added
+  REMOVE: 'REMOVE',          // Node removed
+  REPLACE: 'REPLACE',        // Node type changed
+  UPDATE_PROPS: 'UPDATE_PROPS',  // Props changed
+  UPDATE_STYLE: 'UPDATE_STYLE',  // Style changed
+  UPDATE_TEXT: 'UPDATE_TEXT',    // Text content changed
+  UPDATE_EVENTS: 'UPDATE_EVENTS', // Event handlers changed
+  REORDER: 'REORDER'         // Children reordered
+};
+
+class Patch {
+  constructor(type, index, node, value = null) {
+    this.type = type;
+    this.index = index;        // Position in parent's children
+    this.node = node;          // VNode or old VNode
+    this.value = value;        // New value (props, events, etc.)
+
+    // For CREATE patches, node IS the new node
+    if (type === 'CREATE') {
+      this.newNode = node;
+    }
+    // For REPLACE patches, value IS the new node
+    if (type === 'REPLACE' && value) {
+      this.newNode = value;
+    }
+  }
+}
+
+class VNodeDiffer {
+  /**
+   * Diff two VNode trees and generate patches
+   * Returns array of Patch objects that can be applied to DOM
+   */
+  static diff(oldVNode, newVNode, index = null) {
+    const patches = [];
+
+    // Helper to log patches (remove in production)
+    const logPatches = (p, source) => {
+      // Disabled - too verbose
+    };
+
+    // Handle null/undefined cases
+    if (!oldVNode && !newVNode) {
+      return patches;
+    }
+
+    // New node added
+    if (!oldVNode && newVNode) {
+      patches.push(new Patch(PatchType.CREATE, index, newVNode));
+      return patches;
+    }
+
+    // Node removed
+    if (oldVNode && !newVNode) {
+      patches.push(new Patch(PatchType.REMOVE, index, oldVNode));
+      return patches;
+    }
+
+    // Handle text nodes
+    if (typeof oldVNode === 'string' || typeof oldVNode === 'number') {
+      if (oldVNode !== newVNode) {
+        // Text changed
+        patches.push(
+          new Patch(PatchType.UPDATE_TEXT, index, oldVNode, newVNode)
+        );
+      }
+      return patches;
+    }
+
+    // Both are VNodes - check if same type
+    if (oldVNode instanceof VNode && newVNode instanceof VNode) {
+      if (oldVNode.tag !== newVNode.tag) {
+        // Completely different elements
+        patches.push(new Patch(PatchType.REPLACE, index, oldVNode, newVNode));
+        logPatches(patches, 'diffVNode');
+        return patches;
+      }
+
+      // Same element type - check children and props
+      const propPatches = this.diffProps(oldVNode, newVNode, index);
+      patches.push(...propPatches);
+
+      const eventPatches = this.diffEvents(oldVNode, newVNode, index);
+      patches.push(...eventPatches);
+
+      const stylePatches = this.diffStyle(oldVNode, newVNode, index);
+      patches.push(...stylePatches);
+
+      // console.log(`[VNodeDiffer] Diffing children for ${oldVNode.tag}. Count: ${oldVNode.children?.length} vs ${newVNode.children?.length}`);
+      const childPatches = this.diffChildren(
+        oldVNode.children,
+        newVNode.children,
+        index
+      );
+      patches.push(...childPatches);
+
+      return patches;
+    }
+
+    // Check for mixed types (e.g. string vs VNode)
+    if ((typeof oldVNode === 'string' && newVNode instanceof VNode) ||
+      (oldVNode instanceof VNode && typeof newVNode === 'string')) {
+      patches.push(new Patch(PatchType.REPLACE, index, oldVNode, newVNode));
+      return patches;
+    }
+
+    // Fallback: replace if completely different
+    patches.push(new Patch(PatchType.REPLACE, index, oldVNode, newVNode));
+    logPatches(patches, 'fallback');
+    return patches;
+  }
+
+  /**
+   * Diff props between old and new VNode
+   */
+  static diffProps(oldVNode, newVNode, index) {
+    const patches = [];
+    const oldProps = oldVNode.props || {};
+    const newProps = newVNode.props || {};
+
+    const changes = this.calculateDiff(oldProps, newProps);
+
+    // Only generate patch if there are actual changes
+    if (changes) {
+      patches.push(
+        new Patch(PatchType.UPDATE_PROPS, index, oldVNode, { changes })
+      );
+    }
+
+    return patches;
+  }
+
+  /**
+   * Diff events between old and new VNode
+   */
+  static diffEvents(oldVNode, newVNode, index) {
+    const patches = [];
+    const oldEvents = oldVNode.events || {};
+    const newEvents = newVNode.events || {};
+
+    const changes = this.calculateDiff(oldEvents, newEvents);
+
+    if (changes) {
+      patches.push(
+        new Patch(PatchType.UPDATE_EVENTS, index, oldVNode, { changes })
+      );
+    }
+
+    return patches;
+  }
+
+  /**
+   * Diff styles between old and new VNode
+   */
+  static diffStyle(oldVNode, newVNode, index) {
+    const patches = [];
+    const oldStyle = oldVNode.style || {};
+    const newStyle = newVNode.style || {};
+
+    const changes = this.calculateDiff(oldStyle, newStyle);
+
+    if (changes) {
+      patches.push(
+        new Patch(PatchType.UPDATE_STYLE, index, oldVNode, { changes })
+      );
+    }
+
+    return patches;
+  }
+
+  /**
+   * Calculate detailed difference between two objects
+   * Returns { added, removed, updated } or null if no changes
+   */
+  static calculateDiff(oldObj, newObj) {
+    const added = {};
+    const removed = {};
+    const updated = {};
+    let hasAdded = false;
+    let hasRemoved = false;
+    let hasUpdated = false;
+
+    const allKeys = new Set([
+      ...Object.keys(oldObj),
+      ...Object.keys(newObj)
+    ]);
+
+    for (const key of allKeys) {
+      const oldVal = oldObj[key];
+      const newVal = newObj[key];
+
+      if (oldVal === undefined && newVal !== undefined) {
+        added[key] = newVal;
+        hasAdded = true;
+      } else if (oldVal !== undefined && newVal === undefined) {
+        removed[key] = oldVal;
+        hasRemoved = true;
+      } else if (oldVal !== newVal) {
+        updated[key] = newVal;
+        hasUpdated = true;
+      }
+    }
+
+    if (!hasAdded && !hasRemoved && !hasUpdated) {
+      return null;
+    }
+
+    const result = {};
+    if (hasAdded) result.added = added;
+    if (hasRemoved) result.removed = removed;
+    if (hasUpdated) result.updated = updated;
+
+    return result;
+  }
+
+  /**
+   * Diff children using key-based or position-based reconciliation
+   */
+  static diffChildren(oldChildren = [], newChildren = [], parentIndex) {
+    const patches = [];
+
+    // Use keys for reconciliation if available
+    const oldKeyed = this.groupByKey(oldChildren);
+    const newKeyed = this.groupByKey(newChildren);
+
+    const maxLen = Math.max(oldChildren.length, newChildren.length);
+
+    for (let i = 0; i < maxLen; i++) {
+      const oldChild = oldChildren[i];
+      const newChild = newChildren[i];
+      const childIndex = parentIndex !== null && parentIndex !== undefined ? `${parentIndex}.${i}` : `${i}`;
+
+      if (!oldChild && newChild) {
+        // New child added
+        patches.push(new Patch(PatchType.CREATE, childIndex, newChild));
+      } else if (oldChild && !newChild) {
+        // Child removed
+        patches.push(new Patch(PatchType.REMOVE, childIndex, oldChild));
+      } else if (oldChild && newChild) {
+        // Recursively diff
+        const childPatches = this.diff(oldChild, newChild, childIndex);
+        patches.push(...childPatches);
+      }
+    }
+
+    return patches;
+  }
+
+  /**
+   * Group VNodes by key for efficient reconciliation
+   */
+  static groupByKey(vnodes = []) {
+    const keyed = new Map();
+    const unkeyed = [];
+
+    vnodes.forEach(vnode => {
+      if (vnode instanceof VNode && vnode.key) {
+        keyed.set(vnode.key, vnode);
+      } else {
+        unkeyed.push(vnode);
+      }
+    });
+
+    return { keyed, unkeyed };
+  }
+
+  /**
+   * Apply patches to DOM
+   * Called after diff to update actual DOM
+   */
+  static applyPatches(domElement, patches, vNodeMap = new Map()) {
+    patches.forEach(patch => {
+      const targetElement = this.findElement(domElement, patch.index);
+
+      if (!targetElement) {
+        console.warn(`Could not find element at index ${patch.index}`);
+        return;
+      }
+
+      switch (patch.type) {
+        case PatchType.CREATE:
+          this.applyCreate(targetElement, patch);
+          break;
+
+        case PatchType.REMOVE:
+          this.applyRemove(targetElement, patch);
+          break;
+
+        case PatchType.REPLACE:
+          this.applyReplace(targetElement, patch);
+          break;
+
+        case PatchType.UPDATE_PROPS:
+          this.applyUpdateProps(targetElement, patch);
+          break;
+
+        case PatchType.UPDATE_TEXT:
+          this.applyUpdateText(targetElement, patch);
+          break;
+
+        case PatchType.UPDATE_STYLE:
+          // VNodeRenderer has updateStyle which takes (element, oldStyle, newStyle)
+          // But here we might not have a helper? 
+          // Previous files showed VNodeRenderer.updateProps handles style? 
+          // Check VNodeRenderer.js... using explicit updateStyle if available or manual.
+          // VNodeRenderer.updateStyle is assumed to exist given diffStyle exists.
+          if (VNodeRenderer.updateStyle) {
+            VNodeRenderer.updateStyle(targetElement, patch.value.old, patch.value.new);
+          } else {
+            // Fallback if VNodeRenderer.updateStyle is missing (it was updateStyles in some versions?)
+            // Assume VNodeRenderer handles it or implement basic style patch
+            const { added, removed, updated } = patch.value.changes || {};
+            if (added) Object.assign(targetElement.style, added);
+            if (updated) Object.assign(targetElement.style, updated);
+            if (removed) Object.keys(removed).forEach(k => targetElement.style[k] = '');
+          }
+          break;
+
+        case PatchType.UPDATE_EVENTS:
+          this.applyUpdateEvents(targetElement, patch);
+          break;
+
+        case PatchType.REORDER:
+          this.applyReorder(targetElement, patch);
+          break;
+      }
+    });
+  }
+
+  /**
+   * Find DOM element by index path
+   * Index format: "0.1.2" means: root's 0th child's 1st child's 2nd child
+   */
+  static findElement(root, index) {
+    if (index === 0 || index === '0') {
+      return root;
+    }
+
+    const path = String(index).split('.');
+    let current = root;
+
+    for (const step of path) {
+      const childIndex = parseInt(step);
+      current = current.childNodes[childIndex];
+
+      if (!current) {
+        return null;
+      }
+    }
+
+    return current;
+  }
+
+  /**
+   * Apply CREATE patch
+   */
+  static applyCreate(parent, patch) {
+
+
+    const newDom = VNodeRenderer.createDOMNode(patch.node);
+
+    if (parent.childNodes.length === 0) {
+      parent.appendChild(newDom);
+    } else {
+      const childIndex = parseInt(String(patch.index).split('.').pop());
+      if (childIndex < parent.childNodes.length) {
+        parent.insertBefore(newDom, parent.childNodes[childIndex]);
+      } else {
+        parent.appendChild(newDom);
+      }
+    }
+  }
+
+  /**
+   * Apply REMOVE patch
+   */
+  static applyRemove(parent, patch) {
+    const childIndex = parseInt(String(patch.index).split('.').pop());
+    if (parent.childNodes[childIndex]) {
+      parent.removeChild(parent.childNodes[childIndex]);
+    }
+  }
+
+  /**
+   * Apply REPLACE patch
+   */
+  static applyReplace(parent, patch) {
+
+    const childIndex = parseInt(String(patch.index).split('.').pop());
+    const oldChild = parent.childNodes[childIndex];
+
+    if (oldChild) {
+      const newDom = VNodeRenderer.createDOMNode(patch.value);
+      parent.replaceChild(newDom, oldChild);
+    }
+  }
+
+  /**
+   * Apply UPDATE_PROPS patch
+   */
+  static applyUpdateProps(element, patch) {
+
+    VNodeRenderer.updateProps(element, patch.value.old, patch.value.new);
+  }
+
+  /**
+   * Apply UPDATE_TEXT patch
+   */
+  static applyUpdateText(element, patch) {
+    element.textContent = String(patch.value);
+  }
+
+  /**
+   * Apply UPDATE_EVENTS patch
+   */
+  static applyUpdateEvents(element, patch) {
+
+    VNodeRenderer.updateEvents(element, patch.value.old, patch.value.new);
+  }
+
+  /**
+   * Apply REORDER patch
+   */
+  static applyReorder(parent, patch) {
+    // Reorder children according to new indices
+    const newOrder = patch.value;
+    const fragment = document.createDocumentFragment();
+
+    newOrder.forEach(index => {
+      fragment.appendChild(parent.childNodes[index]);
+    });
+
+    parent.appendChild(fragment);
+  }
+
+  /**
+   * Get statistics about patches (for debugging)
+   */
+  static getStats(patches) {
+    const stats = {
+      total: patches.length,
+      creates: 0,
+      removes: 0,
+      replaces: 0,
+      updates: 0
+    };
+
+    patches.forEach(patch => {
+      if (patch.type === PatchType.CREATE) stats.creates++;
+      else if (patch.type === PatchType.REMOVE) stats.removes++;
+      else if (patch.type === PatchType.REPLACE) stats.replaces++;
+      else stats.updates++;
+    });
+
+    return stats;
+  }
+}
+
+
+export { VNodeDiffer, Patch, PatchType };
\ No newline at end of file
diff --git a/packages/flutterjs_vdom/flutterjs_vdom/src/vnode_renderer.js b/packages/flutterjs_vdom/flutterjs_vdom/src/vnode_renderer.js
new file mode 100644
index 00000000..fc4c6ce7
--- /dev/null
+++ b/packages/flutterjs_vdom/flutterjs_vdom/src/vnode_renderer.js
@@ -0,0 +1,623 @@
+/**
+ * VNodeRenderer - WITH ENHANCED WIDGET IDENTIFICATION
+ */
+
+class VNodeRenderer {
+  constructor(options = {}) {
+    this.debugMode = options.debugMode || false;
+    this.rootElement = options.rootElement || null;
+    this.tracker = options.tracker || null;  // Optional tracker
+  }
+
+  render(vnode, targetElement, options = {}) {
+    if (!targetElement) {
+      throw new Error('Target element is required');
+    }
+
+    if (this.debugMode) {
+      console.log('[VNodeRenderer] 🎨 Rendering to', targetElement.id || targetElement.className || targetElement.tagName);
+      console.log('[VNodeRenderer] 📦 VNode to render:', {
+        type: typeof vnode,
+        isArray: Array.isArray(vnode),
+        hasTag: vnode?.tag,
+        constructor: vnode?.constructor?.name,
+      });
+    }
+
+    // Clear target if specified
+    if (options.clear !== false) {
+      this.clearElement(targetElement);
+    }
+
+    try {
+      // Create DOM tree
+      const domNode = this.createDOMNode(vnode);
+
+      // Append to target
+      if (domNode) {
+        if (Array.isArray(domNode)) {
+          domNode.forEach(node => targetElement.appendChild(node));
+        } else {
+          targetElement.appendChild(domNode);
+        }
+      }
+
+      if (this.debugMode) {
+        console.log('[VNodeRenderer] ✅ Rendered successfully');
+      }
+
+      return Array.isArray(domNode) ? domNode[0] : domNode;
+
+    } catch (error) {
+      // Enhanced error with widget identification
+      this.handleRenderError(error, vnode);
+      throw error;
+    }
+  }
+
+  /**
+   * Handle render error with widget identification
+   * @private
+   */
+  handleRenderError(error, vnode) {
+    console.error('');
+    console.error('❌ '.repeat(50));
+    console.error('VNODE RENDERER ERROR - WIDGET NOT CONVERTED TO VNODE');
+    console.error('❌ '.repeat(50));
+    console.error('');
+
+    // Identify the widget
+    console.error('🔍 FAILED VNODE DETAILS:');
+    console.error('   Constructor:', vnode?.constructor?.name || 'unknown');
+    console.error('   Type:', typeof vnode);
+    console.error('   Has .tag:', vnode?.tag !== undefined);
+    console.error('   Has .build:', typeof vnode?.build === 'function');
+    console.error('   Has .createState:', typeof vnode?.createState === 'function');
+    console.error('   Has .updateShouldNotify:', typeof vnode?.updateShouldNotify === 'function');
+    console.error('');
+
+    // Identify what type of widget this is
+    const widgetType = this.identifyWidgetType(vnode);
+    console.error('📋 WIDGET TYPE:', widgetType);
+    console.error('');
+
+    // Show available properties
+    if (vnode && typeof vnode === 'object') {
+      console.error('📝 WIDGET PROPERTIES:');
+      const props = this.getWidgetProperties(vnode);
+      Object.entries(props).forEach(([key, value]) => {
+        console.error(`   ${key}: ${value}`);
+      });
+      console.error('');
+    }
+
+    // Error analysis
+    console.error('💥 PROBLEM:');
+    if (typeof vnode?.build === 'function' && !vnode?.tag) {
+      console.error('   This is a WIDGET (not a VNode)');
+      console.error('   Widget has a build() method but was never built to VNode');
+      console.error('   This means VNodeBuilder failed to properly convert this widget');
+      console.error('');
+      console.error('🎯 THE ISSUE:');
+      console.error(`   Widget "${vnode.constructor.name}" reached the renderer`);
+      console.error('   without being converted to a VNode first.');
+      console.error('');
+      console.error('✅ SOLUTIONS:');
+      console.error('   1. Check VNodeBuilder logs above for detailed error');
+      console.error('   2. Verify Element.build() returns a VNode');
+      console.error('   3. Check StatelessElement/StatefulElement implementation');
+      console.error('   4. Ensure all nested widgets are also converted to VNodes');
+    }
+
+    console.error('');
+    console.error('📚 ERROR MESSAGE:', error.message);
+    console.error('');
+    console.error('❌ '.repeat(50));
+    console.error('');
+  }
+
+  /**
+   * Identify widget type
+   * @private
+   */
+  identifyWidgetType(widget) {
+    if (!widget || typeof widget !== 'object') {
+      return 'NOT_A_WIDGET';
+    }
+
+    if (widget.tag !== undefined) {
+      return 'VNODE (has .tag)';
+    }
+
+    if (typeof widget.createState === 'function') {
+      return 'StatefulWidget';
+    }
+
+    if (typeof widget.build === 'function' && !widget.createState) {
+      return 'StatelessWidget';
+    }
+
+    if (typeof widget.updateShouldNotify === 'function') {
+      return 'InheritedWidget';
+    }
+
+    if (widget.appBar || widget.body || widget.floatingActionButton) {
+      return 'Scaffold (or similar)';
+    }
+
+    if (widget.title && widget.theme && widget.home) {
+      return 'MaterialApp';
+    }
+
+    if (widget.child || widget.children) {
+      return 'Container/Layout Widget';
+    }
+
+    return 'Unknown Widget Type';
+  }
+
+
+  createDOMNode(vnode) {
+    // ✅ Handle null/undefined FIRST
+    if (vnode === null || vnode === undefined) {
+      return document.createTextNode('');
+    }
+
+    // Handle arrays (fragments)
+    if (Array.isArray(vnode)) {
+      return vnode
+        .map(child => this.createDOMNode(child))
+        .filter(node => node !== null);
+    }
+
+    // Handle text nodes
+    if (typeof vnode === 'string' || typeof vnode === 'number') {
+      return document.createTextNode(String(vnode));
+    }
+
+    // Handle boolean (render nothing)
+    if (typeof vnode === 'boolean') {
+      return document.createTextNode('');
+    }
+
+    // ✅ Check if it's a valid VNode with tag
+    if (!vnode || !vnode.tag) {
+      console.error('🛑 CRITICAL: VNode missing .tag property');
+      console.error('   Constructor:', vnode?.constructor?.name);
+      console.error('   Type:', typeof vnode);
+      console.error('   Is Widget:', typeof vnode?.build === 'function');
+      console.error('');
+
+      // ✅ USE OPTIONAL CHAINING HERE!
+      if (vnode?.constructor?.name === 'FlutterJSRuntime') {
+        throw new Error(
+          'Widget.build() returned the runtime object! ' +
+          'build() must return a Widget, VNode, string, or null'
+        );
+      }
+
+      // Use tracker if available
+      if (this.tracker && typeof this.tracker.trackRenderFailure === 'function') {
+        this.tracker.trackRenderFailure(vnode, new Error('Missing tag property'));
+      }
+
+      throw new Error(
+        `[VNodeRenderer] Invalid VNode: Widget "${vnode?.constructor?.name}" was not built to VNode. ` +
+        `This is a build chain error. Check VNodeBuilder logs above for the actual build failure.`
+      );
+    }
+
+    // Create element
+    let element;
+    const isSVG = this.isSVGTag(vnode.tag);
+
+    // DEBUG: Check why SVG is failing
+    if (vnode.tag === 'svg' || vnode.tag === 'path') {
+      console.log(`[VNodeRenderer] Creating node for tag: '${vnode.tag}'. isSVG: ${isSVG}`);
+    }
+
+    if (isSVG) {
+      element = document.createElementNS('http://www.w3.org/2000/svg', vnode.tag);
+    } else {
+      element = document.createElement(vnode.tag);
+    }
+
+    // Store VNode reference
+    element._vnode = vnode;
+    vnode._element = element;
+
+    // Apply props (HTML attributes)
+    this.applyProps(element, vnode.props || {});
+
+    // Apply styles (CSS)
+    this.applyStyles(element, vnode.style || {});
+
+    // Attach event listeners
+    this.applyEvents(element, vnode.events || {});
+
+    // Render children
+    if (vnode.children && vnode.children.length > 0) {
+      this.renderChildren(element, vnode.children);
+    }
+
+    // Call ref callback
+    if (typeof vnode.ref === 'function') {
+      try {
+        vnode.ref(element);
+      } catch (error) {
+        console.error('Error in ref callback:', error);
+      }
+    }
+
+    return element;
+  }
+
+  isSVGTag(tag) {
+    return [
+      'svg', 'animate', 'animateMotion', 'animateTransform', 'circle', 'clipPath',
+      'defs', 'desc', 'ellipse', 'feBlend', 'feColorMatrix', 'feComponentTransfer',
+      'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap',
+      'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG',
+      'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology',
+      'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile',
+      'feTurbulence', 'filter', 'foreignObject', 'g', 'image', 'line', 'linearGradient',
+      'marker', 'mask', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline',
+      'radialGradient', 'rect', 'stop', 'switch', 'symbol', 'text', 'textPath', 'title',
+      'tspan', 'use', 'view'
+    ].includes(tag);
+  }
+
+  // ✅ FIXED: getWidgetProperties with null check
+  getWidgetProperties(widget) {
+    const props = {};
+
+    // ✅ Add null safety check
+    if (!widget || typeof widget !== 'object') {
+      return props;
+    }
+
+    const keys = Object.keys(widget)
+      .filter(k => !k.startsWith('_') && !k.startsWith('__') && typeof widget[k] !== 'function')
+      .slice(0, 10);  // Limit to first 10
+
+    keys.forEach(key => {
+      const value = widget[key];
+      if (typeof value === 'object' && value !== null) {
+        props[key] = `[${value?.constructor?.name || 'object'}]`;  // ✅ Safe
+      } else if (typeof value === 'string' && value.length > 30) {
+        props[key] = `"${value.substring(0, 30)}..."`;
+      } else {
+        props[key] = JSON.stringify(value);
+      }
+    });
+
+    return props;
+  }
+
+  renderChildren(parent, children) {
+    children.forEach((child, index) => {
+      try {
+        const childNode = this.createDOMNode(child);
+
+        if (childNode) {
+          if (Array.isArray(childNode)) {
+            childNode.forEach(node => parent.appendChild(node));
+          } else {
+            parent.appendChild(childNode);
+          }
+
+          if (child && typeof child === 'object' && child.tag) {
+            child._parent = parent._vnode;
+            child._index = index;
+          }
+        }
+      } catch (error) {
+        console.error(`Error rendering child at index ${index}:`, error);
+        throw error;
+      }
+    });
+  }
+
+  applyProps(element, props) {
+    const isSVG = element.namespaceURI === 'http://www.w3.org/2000/svg';
+
+    Object.entries(props).forEach(([key, value]) => {
+      if (value === null || value === undefined) {
+        return;
+      }
+
+      try {
+        if (key === 'className' || key === 'class') {
+          if (isSVG) {
+            element.setAttribute('class', value);
+          } else {
+            element.className = value;
+          }
+          return;
+        }
+
+        if (key === 'value' && (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT')) {
+          element.value = value;
+          return;
+        }
+
+        if (key === 'checked' && element.tagName === 'INPUT') {
+          element.checked = !!value;
+          return;
+        }
+
+        if (key === 'selected' && element.tagName === 'OPTION') {
+          element.selected = !!value;
+          return;
+        }
+
+        if (key === 'disabled') {
+          element.disabled = !!value;
+          return;
+        }
+
+        if (key.startsWith('data-') || key.startsWith('aria-')) {
+          element.setAttribute(key, String(value));
+          return;
+        }
+
+        if (typeof value === 'boolean') {
+          if (value) {
+            element.setAttribute(key, '');
+          } else {
+            element.removeAttribute(key);
+          }
+          return;
+        }
+
+        // ✅ HANDLE SVG ATTRIBUTES
+        if (isSVG) {
+          element.setAttribute(key, String(value));
+          return;
+        }
+
+        if (key in element) {
+          element[key] = value;
+        } else {
+          element.setAttribute(key, String(value));
+        }
+      } catch (error) {
+        console.warn(`Failed to set prop ${key}:`, error);
+        try {
+          element.setAttribute(key, String(value));
+        } catch (e) {
+          console.error(`Failed to set attribute ${key}:`, e);
+        }
+      }
+    });
+  }
+
+  applyStyles(element, styles) {
+    Object.entries(styles).forEach(([key, value]) => {
+      if (value !== null && value !== undefined) {
+        try {
+          if (key.startsWith('--')) {
+            element.style.setProperty(key, value);
+          } else {
+            element.style[key] = value;
+          }
+        } catch (error) {
+          console.warn(`Failed to set style ${key}:`, error);
+        }
+      }
+    });
+  }
+
+  applyEvents(element, events) {
+    Object.entries(events).forEach(([eventName, handler]) => {
+      if (typeof handler !== 'function') {
+        console.warn(`Event handler for ${eventName} is not a function`);
+        return;
+      }
+
+      try {
+        const normalizedName = eventName
+          .replace(/^on/, '')
+          .toLowerCase();
+
+        if (!element._eventListeners) {
+          element._eventListeners = {};
+        }
+
+        if (element._eventListeners[normalizedName]) {
+          element.removeEventListener(
+            normalizedName,
+            element._eventListeners[normalizedName]
+          );
+        }
+
+        element.addEventListener(normalizedName, handler);
+        element._eventListeners[normalizedName] = handler;
+      } catch (error) {
+        console.error(`Failed to attach event ${eventName}:`, error);
+      }
+    });
+  }
+
+  clearElement(element) {
+    this.cleanupEventListeners(element);
+    element.innerHTML = '';
+  }
+
+  cleanupEventListeners(element) {
+    if (!element) return;
+
+    if (element._eventListeners) {
+      Object.entries(element._eventListeners).forEach(([event, handler]) => {
+        element.removeEventListener(event, handler);
+      });
+      element._eventListeners = null;
+    }
+
+    if (element._vnode) {
+      // ✅ SAFETY CHECK: Only clear the VNode's element reference if it points to THIS element.
+      // If the VNode was reused and already rendered into a new DOM node, _element will point
+      // to the new node. We must not clear it in that case.
+      if (element._vnode._element === element) {
+        element._vnode._element = null;
+      }
+      element._vnode = null;
+    }
+
+    Array.from(element.children).forEach(child => {
+      this.cleanupEventListeners(child);
+    });
+  }
+
+  updateProps(element, oldProps = {}, newProps = {}) {
+    Object.keys(oldProps).forEach(key => {
+      if (!(key in newProps)) {
+        if (key === 'className' || key === 'class') {
+          element.className = '';
+        } else if (key.startsWith('data-') || key.startsWith('aria-')) {
+          element.removeAttribute(key);
+        } else if (typeof oldProps[key] === 'boolean') {
+          element.removeAttribute(key);
+        } else if (key in element) {
+          element[key] = '';
+        } else {
+          element.removeAttribute(key);
+        }
+      }
+    });
+
+    this.applyProps(element, newProps);
+  }
+
+  updateStyles(element, oldStyles = {}, newStyles = {}) {
+    Object.keys(oldStyles).forEach(key => {
+      if (!(key in newStyles)) {
+        element.style[key] = '';
+      }
+    });
+
+    this.applyStyles(element, newStyles);
+  }
+
+  updateEvents(element, oldEvents = {}, newEvents = {}) {
+    Object.keys(oldEvents).forEach(eventName => {
+      if (!(eventName in newEvents)) {
+        const normalizedName = eventName.replace(/^on/, '').toLowerCase();
+        if (element._eventListeners && element._eventListeners[normalizedName]) {
+          element.removeEventListener(
+            normalizedName,
+            element._eventListeners[normalizedName]
+          );
+          delete element._eventListeners[normalizedName];
+        }
+      }
+    });
+
+    this.applyEvents(element, newEvents);
+  }
+
+  replaceElement(oldElement, newVNode) {
+    const newElement = this.createDOMNode(newVNode);
+
+    if (oldElement.parentNode && newElement) {
+      this.cleanupEventListeners(oldElement);
+      oldElement.parentNode.replaceChild(newElement, oldElement);
+    }
+
+    return newElement;
+  }
+
+  removeElement(element) {
+    if (!element || !element.parentNode) return;
+    this.cleanupEventListeners(element);
+    element.parentNode.removeChild(element);
+  }
+
+  insertAt(parent, vnode, index) {
+    const element = this.createDOMNode(vnode);
+
+    if (!element) return null;
+
+    const children = Array.from(parent.childNodes);
+
+    if (index >= children.length) {
+      parent.appendChild(element);
+    } else {
+      parent.insertBefore(element, children[index]);
+    }
+
+    return element;
+  }
+
+  findElementByPath(root, indexPath) {
+    if (!indexPath) return root;
+
+    const indices = indexPath.split('.').map(Number);
+    let current = root;
+
+    for (const index of indices) {
+      const children = Array.from(current.childNodes);
+      if (index >= children.length) return null;
+      current = children[index];
+    }
+
+    return current;
+  }
+
+  getElementPath(element) {
+    const indices = [];
+    let current = element;
+
+    while (current.parentNode && current.parentNode !== document.body) {
+      const parent = current.parentNode;
+      const index = Array.from(parent.childNodes).indexOf(current);
+      indices.unshift(index);
+      current = parent;
+    }
+
+    return indices.join('.');
+  }
+
+  batchRender(vnodes, container) {
+    const fragment = document.createDocumentFragment();
+
+    vnodes.forEach(vnode => {
+      const element = this.createDOMNode(vnode);
+      if (element) {
+        if (Array.isArray(element)) {
+          element.forEach(node => fragment.appendChild(node));
+        } else {
+          fragment.appendChild(element);
+        }
+      }
+    });
+
+    this.clearElement(container);
+    container.appendChild(fragment);
+  }
+
+  needsUpdate(element, vnode) {
+    if (!element._vnode) return true;
+
+    const oldVNode = element._vnode;
+
+    if (oldVNode.tag !== vnode.tag) return true;
+    if (oldVNode.key !== vnode.key) return true;
+
+    const oldProps = oldVNode.props || {};
+    const newProps = vnode.props || {};
+    if (Object.keys(oldProps).length !== Object.keys(newProps).length) {
+      return true;
+    }
+
+    const oldStyles = oldVNode.style || {};
+    const newStyles = vnode.style || {};
+    if (Object.keys(oldStyles).length !== Object.keys(newStyles).length) {
+      return true;
+    }
+
+    return false;
+  }
+}
+
+export { VNodeRenderer };
\ No newline at end of file
diff --git a/packages/flutterjs_vdom/lib/flutterjs_vdom.dart b/packages/flutterjs_vdom/lib/flutterjs_vdom.dart
new file mode 100644
index 00000000..72abb5f5
--- /dev/null
+++ b/packages/flutterjs_vdom/lib/flutterjs_vdom.dart
@@ -0,0 +1,26 @@
+/// FlutterJS FlutterjsVdom
+/// 
+/// FlutterJS Virtual DOM implementation
+/// 
+/// The actual implementation is in JavaScript.
+/// This package is a metadata wrapper published to pub.dev.
+/// 
+/// ## Usage
+/// 
+/// Add to your `pubspec.yaml`:
+/// ```yaml
+/// dependencies:
+///   flutterjs_vdom: ^0.1.0
+/// ```
+/// 
+/// Then run:
+/// ```bash
+/// flutterjs get
+/// ```
+/// 
+/// The package will be installed to: `build/flutterjs/node_modules/@flutterjs/flutterjs_vdom`
+/// 
+/// See `example/` for a complete working app.
+library flutterjs_vdom;
+
+// The real implementation is in js/src/
diff --git a/packages/flutterjs_vdom/pubspec.yaml b/packages/flutterjs_vdom/pubspec.yaml
new file mode 100644
index 00000000..1fa63d4f
--- /dev/null
+++ b/packages/flutterjs_vdom/pubspec.yaml
@@ -0,0 +1,24 @@
+name: flutterjs_vdom
+version: 0.1.0
+description: FlutterJS Virtual DOM implementation
+
+homepage: https://github.com/flutterjs/flutterjs_vdom
+repository: https://github.com/flutterjs/flutterjs_vdom
+issue_tracker: https://github.com/flutterjs/flutterjs_vdom/issues
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+# FlutterJS metadata
+flutterjs:
+  npm_package: "@flutterjs/flutterjs_vdom"
+  implementation_language: "javascript"
+  js_entry: "js/src/index.js"
diff --git a/packages/flutterjs_widgets/.gitignore b/packages/flutterjs_widgets/.gitignore
new file mode 100644
index 00000000..1d4cb04d
--- /dev/null
+++ b/packages/flutterjs_widgets/.gitignore
@@ -0,0 +1,31 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+build/
+dist/
+.dev/
+.debug/
+
+# Generated files
+.flutterjs/
+.cache/
+
+# Dart
+.dart_tool/
+.packages
+pubspec.lock
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Logs
+*.log
+npm-debug.log*
diff --git a/packages/flutterjs_widgets/.pubignore b/packages/flutterjs_widgets/.pubignore
new file mode 100644
index 00000000..bae5ffcf
--- /dev/null
+++ b/packages/flutterjs_widgets/.pubignore
@@ -0,0 +1,11 @@
+# Exclude JavaScript implementation from pub.dev
+js/
+node_modules/
+dist/
+build/
+.git/
+.github/
+test/
+package-lock.json
+.vscode/
+.idea/
diff --git a/packages/flutterjs_widgets/CHANGELOG.md b/packages/flutterjs_widgets/CHANGELOG.md
new file mode 100644
index 00000000..13187808
--- /dev/null
+++ b/packages/flutterjs_widgets/CHANGELOG.md
@@ -0,0 +1,3 @@
+## 0.1.0
+
+* Initial release
diff --git a/packages/flutterjs_widgets/LICENSE b/packages/flutterjs_widgets/LICENSE
new file mode 100644
index 00000000..14fac913
--- /dev/null
+++ b/packages/flutterjs_widgets/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/flutterjs_widgets/README.md b/packages/flutterjs_widgets/README.md
new file mode 100644
index 00000000..0cc9fdd0
--- /dev/null
+++ b/packages/flutterjs_widgets/README.md
@@ -0,0 +1,58 @@
+# FlutterjsWidgets
+
+A FlutterJS package
+
+## Installation
+
+Add to `pubspec.yaml`:
+
+```yaml
+dependencies:
+  flutterjs_widgets: ^0.1.0
+```
+
+Then run:
+
+```bash
+flutterjs get
+```
+
+## Usage
+
+See `example/` for a complete Flutter app.
+
+## JavaScript Implementation
+
+The actual implementation is in `js/src/` (JavaScript).
+
+To develop:
+
+```bash
+cd js
+npm install
+```
+
+## Features
+
+- Lightweight implementation
+- SEO-friendly (FlutterJS rendering)
+- Easy to use
+
+## Publishing
+
+### 1. Publish JavaScript to npm
+
+```bash
+cd js
+npm publish
+```
+
+### 2. Publish Dart wrapper to pub.dev
+
+```bash
+dart pub publish
+```
+
+## License
+
+MIT
diff --git a/packages/flutterjs_widgets/example/lib/main.dart b/packages/flutterjs_widgets/example/lib/main.dart
new file mode 100644
index 00000000..b17de5eb
--- /dev/null
+++ b/packages/flutterjs_widgets/example/lib/main.dart
@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'FlutterjsWidgets Example',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      home: const ExamplePage(),
+    );
+  }
+}
+
+class ExamplePage extends StatefulWidget {
+  const ExamplePage({Key? key}) : super(key: key);
+
+  @override
+  State<ExamplePage> createState() => _ExamplePageState();
+}
+
+class _ExamplePageState extends State<ExamplePage> {
+  String result = 'Click the button to test';
+
+  void _testPackage() {
+    setState(() {
+      // This will call the JavaScript implementation when running with FlutterJS
+      result = 'FlutterjsWidgets is ready!\n\nRun: flutterjs run --to-js --serve';
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('FlutterjsWidgets Example'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              result,
+              textAlign: TextAlign.center,
+              style: const TextStyle(fontSize: 16),
+            ),
+            const SizedBox(height: 20),
+            ElevatedButton(
+              onPressed: _testPackage,
+              child: const Text('Test FlutterjsWidgets'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/packages/flutterjs_widgets/example/pubspec.yaml b/packages/flutterjs_widgets/example/pubspec.yaml
new file mode 100644
index 00000000..92cbb832
--- /dev/null
+++ b/packages/flutterjs_widgets/example/pubspec.yaml
@@ -0,0 +1,15 @@
+name: flutterjs_widgets_example
+description: Example app for flutterjs_widgets
+
+publish_to: 'none'
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
diff --git a/packages/flutterjs_widgets/flutterjs_widgets/build.js b/packages/flutterjs_widgets/flutterjs_widgets/build.js
new file mode 100644
index 00000000..6a9f5a8a
--- /dev/null
+++ b/packages/flutterjs_widgets/flutterjs_widgets/build.js
@@ -0,0 +1,99 @@
+/**
+ * Build script for @flutterjs/flutterjs_widgets
+ * 
+ * Generates exports.json manifest for the import resolver system
+ */
+
+import { readFileSync, writeFileSync, readdirSync, statSync } from 'fs';
+import { join, extname } from 'path';
+
+const srcDir = './src';
+
+/**
+ * Get all JavaScript files recursively
+ */
+function getAllJsFiles(dir, fileList = []) {
+  const files = readdirSync(dir);
+  
+  for (const file of files) {
+    const filePath = join(dir, file);
+    const stat = statSync(filePath);
+    
+    if (stat.isDirectory()) {
+      getAllJsFiles(filePath, fileList);
+    } else if (extname(file) === '.js') {
+      fileList.push(filePath);
+    }
+  }
+  
+  return fileList;
+}
+
+/**
+ * Scan all source files and generate exports.json manifest
+ * This manifest tells the Dart code generator what symbols this package exports
+ */
+function generateExportManifest(sourceFiles) {
+  const manifest = {
+    package: '@flutterjs/flutterjs_widgets',
+    version: '0.1.0',
+    exports: []
+  };
+
+  // Regex patterns to match different export types
+  const exportRegex = /export\s*{\s*([^}]+)\s*}/g;
+  const exportStarRegex = /export\s*\*\s*from/g;
+  const classRegex = /export\s+class\s+(\w+)/g;
+  const functionRegex = /export\s+function\s+(\w+)/g;
+  const constRegex = /export\s+const\s+(\w+)/g;
+
+  for (const srcFile of sourceFiles) {
+    const content = readFileSync(srcFile, 'utf8');
+    
+    // Find named exports: export { Foo, Bar }
+    for (const match of content.matchAll(exportRegex)) {
+      const symbols = match[1]
+        .split(',')
+        .map(s => s.trim())
+        .map(s => s.split(/\s+as\s+/).pop()) // Handle "export { Foo as Bar }"
+        .filter(s => s && !s.includes('from'));
+      manifest.exports.push(...symbols);
+    }
+    
+    // Find class exports: export class Foo
+    for (const match of content.matchAll(classRegex)) {
+      manifest.exports.push(match[1]);
+    }
+    
+    // Find function exports: export function foo()
+    for (const match of content.matchAll(functionRegex)) {
+      manifest.exports.push(match[1]);
+    }
+    
+    // Find const exports: export const FOO
+    for (const match of content.matchAll(constRegex)) {
+      manifest.exports.push(match[1]);
+    }
+  }
+
+  // Remove duplicates and sort
+  manifest.exports = [...new Set(manifest.exports)].sort();
+
+  writeFileSync('./exports.json', JSON.stringify(manifest, null, 2) + '\n');
+  console.log(`📋 Generated exports.json with ${manifest.exports.length} symbols\n`);
+}
+
+// Main build process
+async function build() {
+  console.log('🚀 Building @flutterjs/flutterjs_widgets...\n');
+
+  const allFiles = getAllJsFiles(srcDir);
+  console.log(`📦 Found ${allFiles.length} JavaScript files\n`);
+
+  // Generate export manifest
+  generateExportManifest(allFiles);
+
+  console.log('✅ Build successful!\n');
+}
+
+build().catch(console.error);
diff --git a/packages/flutterjs_widgets/flutterjs_widgets/package.json b/packages/flutterjs_widgets/flutterjs_widgets/package.json
new file mode 100644
index 00000000..083d403b
--- /dev/null
+++ b/packages/flutterjs_widgets/flutterjs_widgets/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@flutterjs/flutterjs_widgets",
+  "version": "0.1.0",
+  "description": "A FlutterJS package",
+  "main": "src/index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"No tests yet\"",
+    "prepublishOnly": "echo \"Ready to publish\""
+  },
+  "keywords": [
+    "flutterjs",
+    "flutterjs_widgets"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/flutterjsdev/flutterjs.git"
+  },
+  "files": [
+    "src/",
+    "README.md",
+    "LICENSE"
+  ]
+}
diff --git a/packages/flutterjs_widgets/flutterjs_widgets/src/index.js b/packages/flutterjs_widgets/flutterjs_widgets/src/index.js
new file mode 100644
index 00000000..5b59792e
--- /dev/null
+++ b/packages/flutterjs_widgets/flutterjs_widgets/src/index.js
@@ -0,0 +1,44 @@
+/**
+ * FlutterJS FlutterjsWidgets
+ * 
+ * Simple, lightweight implementation built with JavaScript
+ */
+
+/**
+ * Main class for FlutterjsWidgets
+ */
+export class FlutterjsWidgets {
+  constructor(config = {}) {
+    this.config = config;
+  }
+
+  /**
+   * Example method - replace with your implementation
+   */
+  hello() {
+    return 'Hello from FlutterjsWidgets!';
+  }
+
+  /**
+   * Example async method
+   */
+  async fetchData(url) {
+    try {
+      const response = await fetch(url);
+      return await response.json();
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      throw error;
+    }
+  }
+}
+
+/**
+ * Helper function
+ */
+export function createInstance(config) {
+  return new FlutterjsWidgets(config);
+}
+
+export default FlutterjsWidgets;
+
diff --git a/packages/flutterjs_widgets/lib/flutterjs_widgets.dart b/packages/flutterjs_widgets/lib/flutterjs_widgets.dart
new file mode 100644
index 00000000..085256ac
--- /dev/null
+++ b/packages/flutterjs_widgets/lib/flutterjs_widgets.dart
@@ -0,0 +1,26 @@
+/// FlutterJS FlutterjsWidgets
+///
+/// A FlutterJS package
+///
+/// The actual implementation is in JavaScript.
+/// This package is a metadata wrapper published to pub.dev.
+///
+/// ## Usage
+///
+/// Add to your `pubspec.yaml`:
+/// ```yaml
+/// dependencies:
+///   flutterjs_widgets: ^0.1.0
+/// ```
+///
+/// Then run:
+/// ```bash
+/// flutterjs get
+/// ```
+///
+/// The package will be installed to: `build/flutterjs/node_modules/@flutterjs/flutterjs_widgets`
+///
+/// See `example/` for a complete working app.
+library flutterjs_widgets;
+
+// The real implementation is in js/src/
diff --git a/packages/flutterjs_widgets/pubspec.yaml b/packages/flutterjs_widgets/pubspec.yaml
new file mode 100644
index 00000000..5d9dbfee
--- /dev/null
+++ b/packages/flutterjs_widgets/pubspec.yaml
@@ -0,0 +1,24 @@
+name: flutterjs_widgets
+version: 0.1.0
+description: A FlutterJS package
+
+homepage: https://github.com/flutterjs/flutterjs_widgets
+repository: https://github.com/flutterjs/flutterjs_widgets
+issue_tracker: https://github.com/flutterjs/flutterjs_widgets/issues
+
+environment:
+  sdk: '>=2.19.0 <4.0.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+
+# FlutterJS metadata
+flutterjs:
+  npm_package: "@flutterjs/flutterjs_widgets"
+  implementation_language: "javascript"
+  js_entry: "js/src/index.js"
diff --git a/packages/pubjs/bin/migrate_packages.dart b/packages/pubjs/bin/migrate_packages.dart
new file mode 100644
index 00000000..83e59e61
--- /dev/null
+++ b/packages/pubjs/bin/migrate_packages.dart
@@ -0,0 +1,95 @@
+import 'dart:io';
+import 'package:path/path.dart' as p;
+import 'package:pubjs/pubjs.dart';
+
+void main() async {
+  final scaffold = PackageScaffold();
+  final packagesDir = p.absolute('packages');
+  final engineDir = p.join(packagesDir, 'flutterjs_engine');
+
+  final migrations = [
+    {
+      'name': 'flutterjs_material',
+      'source': p.join(engineDir, 'package', 'material', 'src'),
+      'description': 'FlutterJS Material Design components',
+    },
+    {
+      'name': 'flutterjs_analyzer',
+      'source': p.join(engineDir, 'src', 'analyzer', 'src'),
+      'description': 'FlutterJS static analysis tools',
+    },
+    {
+      'name': 'flutterjs_runtime',
+      'source': p.join(engineDir, 'src', 'runtime', 'src'),
+      'description': 'FlutterJS core runtime implementation',
+    },
+    {
+      'name': 'flutterjs_vdom',
+      'source': p.join(engineDir, 'src', 'vdom', 'src'),
+      'description': 'FlutterJS Virtual DOM implementation',
+    },
+  ];
+
+  print('🚀 Starting package migration...');
+
+  for (final migration in migrations) {
+    final name = migration['name'] as String;
+    final sourcePath = migration['source'] as String;
+    final description = migration['description'] as String;
+
+    print('\n----------------------------------------');
+    print('Processing $name...');
+
+    // 1. Create Package
+    final success = await scaffold.createPackage(
+      packageName: name,
+      outputDir: packagesDir,
+      description: description,
+    );
+
+    if (!success) {
+      print('❌ Failed to scaffold $name');
+      continue;
+    }
+
+    // 2. Copy Source Code
+    final targetJsDir = p.join(packagesDir, name, name, 'src');
+    final sourceDir = Directory(sourcePath);
+    final targetDir = Directory(targetJsDir);
+
+    if (await sourceDir.exists()) {
+      print('   📂 Copying existing source code from:');
+      print('      $sourcePath');
+      print('      to');
+      print('      $targetJsDir');
+
+      // Clear existing scaffolded src
+      if (await targetDir.exists()) {
+        await targetDir.delete(recursive: true);
+      }
+      await targetDir.create(recursive: true);
+
+      await _copyDirectory(sourceDir, targetDir);
+      print('   ✅ Source code migrated');
+    } else {
+      print('   ⚠️ Source directory not found: $sourcePath');
+    }
+  }
+
+  print('\n----------------------------------------');
+  print('✨ Migration complete!');
+}
+
+Future<void> _copyDirectory(Directory source, Directory destination) async {
+  await for (final entity in source.list(recursive: false)) {
+    if (entity is Directory) {
+      final newDirectory = Directory(
+        p.join(destination.path, p.basename(entity.path)),
+      );
+      await newDirectory.create();
+      await _copyDirectory(entity, newDirectory);
+    } else if (entity is File) {
+      await entity.copy(p.join(destination.path, p.basename(entity.path)));
+    }
+  }
+}
diff --git a/packages/pubjs/lib/pubjs.dart b/packages/pubjs/lib/pubjs.dart
index 142e31ff..39b9b231 100644
--- a/packages/pubjs/lib/pubjs.dart
+++ b/packages/pubjs/lib/pubjs.dart
@@ -1,5 +1,3 @@
-/// PubJS: The Package Manager Library for FlutterJS.
-library pubjs;
 
 export 'src/model/package_info.dart';
 export 'src/publisher.dart';
@@ -12,3 +10,5 @@ export 'src/config_resolver.dart';
 export 'src/runtime_package_manager.dart';
 export 'src/package_downloader.dart';
 export 'src/package_scaffold.dart';
+export 'src/package_builder.dart';
+export 'src/package_watcher.dart';
diff --git a/packages/pubjs/lib/src/config_resolver.dart b/packages/pubjs/lib/src/config_resolver.dart
index 61c42985..0af45861 100644
--- a/packages/pubjs/lib/src/config_resolver.dart
+++ b/packages/pubjs/lib/src/config_resolver.dart
@@ -162,11 +162,7 @@ class ConfigResolver {
       final section = content.substring(startIndex + 1, endIndex);
       final configs = <String, UserPackageConfig>{};
 
-      // Regex matches keys map to either strings or objects (simplified)
-      // 1. String: 'key': 'value'
-      final stringPattern = RegExp(
-        r'''['"]([\w\-]+)['"]\s*:\s*['"]([^'"]+)['"]''',
-      );
+    
 
       // 2. Object: 'key': { ... }
       // This is hard to regex robustly, but for common cases:
diff --git a/packages/pubjs/lib/src/package_builder.dart b/packages/pubjs/lib/src/package_builder.dart
new file mode 100644
index 00000000..00795412
--- /dev/null
+++ b/packages/pubjs/lib/src/package_builder.dart
@@ -0,0 +1,397 @@
+import 'dart:io';
+import 'dart:convert';
+import 'package:path/path.dart' as p;
+import 'package_watcher.dart';
+
+/// Builds FlutterJS packages by running their build.js scripts
+/// and generating exports.json manifests
+///
+/// This class is responsible for ensuring all packages have valid
+/// exports.json files before code generation begins.
+class PackageBuilder {
+  /// SDK packages that need to be built
+  static const sdkPackages = [
+    '@flutterjs/runtime',
+    '@flutterjs/material',
+    '@flutterjs/vdom',
+    '@flutterjs/engine',
+  ];
+
+  /// Build all SDK packages
+  ///
+  /// [projectRoot] - Root directory of the FlutterJS project
+  /// [buildPath] - Build directory (e.g., build/flutterjs)
+  /// [force] - Force rebuild even if up-to-date
+  /// [verbose] - Print detailed progress
+  /// [parallel] - Build packages in parallel (faster)
+  Future<BuildStatistics> buildSDKPackages({
+    required String projectRoot,
+    required String buildPath,
+    bool force = false,
+    bool verbose = false,
+    bool parallel = true,
+    Map<String, String>? sdkPaths,
+  }) async {
+    final stats = BuildStatistics();
+    stats.startTime = DateTime.now();
+
+    if (verbose) {
+      print('\n🔨 Building SDK packages...');
+    }
+
+    // Use sequential if parallel is disabled
+    final futureList = <Future<BuildResult>>[];
+
+    for (final pkgName in sdkPackages) {
+      if (parallel) {
+        futureList.add(
+          _buildWithProgress(
+            packageName: pkgName,
+            projectRoot: projectRoot,
+            buildPath: buildPath,
+            force: force,
+            verbose: verbose,
+            stats: stats,
+            sdkPaths: sdkPaths,
+          ),
+        );
+      } else {
+        // Sequential build
+        final result = await _buildWithProgress(
+          packageName: pkgName,
+          projectRoot: projectRoot,
+          buildPath: buildPath,
+          force: force,
+          verbose: verbose,
+          stats: stats,
+          sdkPaths: sdkPaths,
+        );
+
+        if (result == BuildResult.built) {
+          stats.builtCount++;
+        } else if (result == BuildResult.skipped) {
+          stats.skippedCount++;
+        } else {
+          stats.failedCount++;
+          return stats; // Stop on failure
+        }
+      }
+    }
+
+    if (parallel) {
+      final results = await Future.wait(futureList);
+
+      // Count results
+      for (final result in results) {
+        if (result == BuildResult.built) {
+          stats.builtCount++;
+        } else if (result == BuildResult.skipped) {
+          stats.skippedCount++;
+        } else {
+          stats.failedCount++;
+        }
+      }
+    } else {
+      // Sequential build
+      for (final pkgName in sdkPackages) {
+        final result = await buildPackage(
+          packageName: pkgName,
+          projectRoot: projectRoot,
+          buildPath: buildPath,
+          force: force,
+          verbose: verbose,
+        );
+
+        if (result == BuildResult.built) {
+          stats.builtCount++;
+        } else if (result == BuildResult.skipped) {
+          stats.skippedCount++;
+        } else {
+          stats.failedCount++;
+          return stats; // Stop on failure
+        }
+      }
+    }
+
+    stats.endTime = DateTime.now();
+
+    // 🎁 BUILD STATISTICS
+    if (verbose) {
+      print('\n📊 Build Statistics:');
+      print('   ✓ Built: ${stats.builtCount}');
+      print('   ⏭  Skipped: ${stats.skippedCount}');
+      if (stats.failedCount > 0) {
+        print('   ❌ Failed: ${stats.failedCount}');
+      }
+      print('   ⏱  Duration: ${stats.getDuration()}');
+    }
+
+    return stats;
+  }
+
+  /// Build package with progress indicator
+  Future<BuildResult> _buildWithProgress({
+    required String packageName,
+    required String projectRoot,
+    required String buildPath,
+    required bool force,
+    required bool verbose,
+    required BuildStatistics stats,
+    Map<String, String>? sdkPaths,
+  }) async {
+    final packageStopwatch = Stopwatch()..start();
+
+    final result = await buildPackage(
+      packageName: packageName,
+      projectRoot: projectRoot,
+      buildPath: buildPath,
+      force: force,
+      verbose: false, // Don't print in parallel mode
+      sdkPaths: sdkPaths,
+    );
+
+    packageStopwatch.stop();
+    stats.recordPackageBuild(packageName, packageStopwatch.elapsedMilliseconds);
+
+    // 🎁 PROGRESS INDICATOR
+    if (verbose) {
+      final icon = result == BuildResult.built
+          ? '✓'
+          : result == BuildResult.skipped
+          ? '⏭'
+          : '❌';
+      final time = '${packageStopwatch.elapsedMilliseconds}ms';
+      print('   $icon $packageName ($time)');
+    }
+
+    return result;
+  }
+
+  /// Build a single package
+  ///
+  /// Returns [BuildResult] indicating what happened
+  Future<BuildResult> buildPackage({
+    required String packageName,
+    required String projectRoot,
+    required String buildPath,
+    bool force = false,
+    bool verbose = false,
+    Map<String, String>? sdkPaths,
+  }) async {
+    // 1. Find package source directory
+    final sourcePath = await _findPackageSource(
+      packageName,
+      projectRoot,
+      buildPath,
+      sdkPaths,
+    );
+
+    if (sourcePath == null) {
+      if (verbose) print('   ⚠️  $packageName not found, skipping');
+      return BuildResult.skipped;
+    }
+
+    // 2. Check if build.js exists
+    final buildScript = File(p.join(sourcePath, 'build.js'));
+    if (!await buildScript.exists()) {
+      if (verbose) print('   ⚠️  No build.js for $packageName');
+      return BuildResult.skipped;
+    }
+
+    // 2.5 Check for node_modules
+    final nodeModules = Directory(p.join(sourcePath, 'node_modules'));
+    if (!await nodeModules.exists()) {
+      if (verbose) print('   📦 Installing dependencies for $packageName...');
+      final npmCommand = Platform.isWindows ? 'npm.cmd' : 'npm';
+      final installResult = await Process.run(
+        npmCommand,
+        ['install'],
+        workingDirectory: sourcePath,
+        runInShell: true,
+      );
+      if (installResult.exitCode != 0) {
+        print(
+          '❌ npm install failed for $packageName:\n${installResult.stderr}',
+        );
+        return BuildResult.failed;
+      }
+    }
+
+    // 3. Check if build needed
+    if (!force) {
+      final needed = await needsBuild(sourcePath);
+      if (!needed) {
+        if (verbose) print('   ✓ $packageName (up-to-date)');
+        return BuildResult.skipped;
+      }
+    }
+
+    // 4. Run build
+    if (verbose) print('   🔨 Building $packageName...');
+
+    final result = await Process.run('node', [
+      'build.js',
+    ], workingDirectory: sourcePath);
+
+    if (result.exitCode != 0) {
+      print('❌ Build failed for $packageName:');
+      print(result.stderr);
+      return BuildResult.failed;
+    }
+
+    // 5. Verify exports.json was created and is valid
+    if (!await verifyManifest(sourcePath)) {
+      print('❌ Manifest verification failed for $packageName');
+      return BuildResult.failed;
+    }
+
+    if (verbose) {
+      final manifest = await _loadManifest(sourcePath);
+      final count = manifest?['exports']?.length ?? 0;
+      print('   ✓ $packageName built ($count exports)');
+    }
+
+    return BuildResult.built;
+  }
+
+  /// Check if a package needs to be built
+  ///
+  /// Returns true if:
+  /// - exports.json doesn't exist
+  /// - Any source file is newer than exports.json
+  Future<bool> needsBuild(String packagePath) async {
+    final exportsFile = File(p.join(packagePath, 'exports.json'));
+
+    // If exports.json doesn't exist, definitely need to build
+    if (!await exportsFile.exists()) {
+      return true;
+    }
+
+    try {
+      final exportsTime = await exportsFile.lastModified();
+      final srcDir = Directory(p.join(packagePath, 'src'));
+
+      if (!await srcDir.exists()) {
+        return false; // No source files, no need to build
+      }
+
+      // Check if any source file is newer than exports.json
+      await for (final entity in srcDir.list(recursive: true)) {
+        if (entity is File && entity.path.endsWith('.js')) {
+          final sourceTime = await entity.lastModified();
+          if (sourceTime.isAfter(exportsTime)) {
+            return true; // Source is newer, need rebuild
+          }
+        }
+      }
+
+      return false; // All sources older, no rebuild needed
+    } catch (e) {
+      // On any error, be safe and rebuild
+      return true;
+    }
+  }
+
+  /// Verify that a package's manifest is valid
+  ///
+  /// Checks:
+  /// - exports.json exists
+  /// - Valid JSON format
+  /// - Has required fields
+  /// - Has at least one export
+  Future<bool> verifyManifest(String packagePath) async {
+    final exportsFile = File(p.join(packagePath, 'exports.json'));
+
+    if (!await exportsFile.exists()) {
+      return false;
+    }
+
+    try {
+      final content = await exportsFile.readAsString();
+      final json = jsonDecode(content) as Map<String, dynamic>;
+
+      // Check required fields
+      if (!json.containsKey('package')) return false;
+      if (!json.containsKey('version')) return false;
+      if (!json.containsKey('exports')) return false;
+
+      final exports = json['exports'];
+      if (exports is! List) return false;
+      if (exports.isEmpty) return false;
+
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  /// Find package source directory
+  ///
+  /// Tries multiple locations:
+  /// 1. build/flutterjs/node_modules/@flutterjs/xxx
+  /// 2. packages/flutterjs_xxx/flutterjs_xxx (SDK packages)
+  Future<String?> _findPackageSource(
+    String packageName,
+    String projectRoot,
+    String buildPath, [
+    Map<String, String>? sdkPaths,
+  ]) async {
+    // 0. Check threaded SDK paths (Most reliable)
+    if (sdkPaths != null && sdkPaths.containsKey(packageName)) {
+      final relativePath = sdkPaths[packageName]!;
+      final absPath = p.normalize(p.join(projectRoot, relativePath));
+      if (await Directory(absPath).exists()) {
+        return absPath;
+      }
+    }
+
+    final simpleName = packageName.replaceAll('@flutterjs/', '');
+
+    final locations = [
+      // In build directory (runtime packages)
+      p.join(buildPath, 'node_modules', '@flutterjs', simpleName),
+
+      // In packages directory (SDK source - nested)
+      p.join(
+        projectRoot,
+        'packages',
+        'flutterjs_$simpleName',
+        'flutterjs_$simpleName',
+      ),
+
+      // In packages directory (SDK source - flat)
+      p.join(projectRoot, 'packages', 'flutterjs_$simpleName'),
+    ];
+
+    for (final location in locations) {
+      if (await Directory(location).exists()) {
+        return location;
+      }
+    }
+
+    return null;
+  }
+
+  /// Load manifest JSON (helper for verbose output)
+  Future<Map<String, dynamic>?> _loadManifest(String packagePath) async {
+    try {
+      final file = File(p.join(packagePath, 'exports.json'));
+      final content = await file.readAsString();
+      return jsonDecode(content) as Map<String, dynamic>;
+    } catch (e) {
+      return null;
+    }
+  }
+}
+
+/// Result of a package build operation
+enum BuildResult {
+  /// Package was successfully built
+  built,
+
+  /// Package was skipped (up-to-date or no build.js)
+  skipped,
+
+  /// Package build failed
+  failed,
+}
diff --git a/packages/pubjs/lib/src/package_scaffold.dart b/packages/pubjs/lib/src/package_scaffold.dart
index eab7780a..d1fcf62b 100644
--- a/packages/pubjs/lib/src/package_scaffold.dart
+++ b/packages/pubjs/lib/src/package_scaffold.dart
@@ -12,7 +12,7 @@ class PackageScaffold {
   /// Creates a new external package structure
   ///
   /// [packageName] - Name of the package (e.g., 'flutterjs_http')
-  /// [outputDir] - Directory where package will be created (usually 'external_package')
+  /// [outputDir] - Directory where package will be created
   /// [description] - Package description
   /// [organization] - GitHub organization (default: 'flutterjs')
   Future<bool> createPackage({
@@ -29,6 +29,7 @@ class PackageScaffold {
         return false;
       }
 
+      // Create package directly in outputDir
       final packageDir = p.join(outputDir, packageName);
       final packageDirectory = Directory(packageDir);
 
@@ -60,6 +61,10 @@ class PackageScaffold {
       await _generateReadme(packageDir, packageName, description, organization);
       await _generateChangelog(packageDir);
       await _generateLicense(packageDir);
+      await _generateBuildJs(
+        packageDir,
+        packageName,
+      ); // ✅ NEW: Generate build.js
 
       print('✅ Package created successfully!');
       print('');
@@ -68,6 +73,7 @@ class PackageScaffold {
       print('   ├── lib/                    # Dart wrapper (pub.dev)');
       print('   ├── $packageName/           # JavaScript (npm)');
       print('   │   ├── package.json');
+      print('   │   ├── build.js            # ✅ Auto-generates exports.json');
       print('   │   └── src/index.js');
       print('   ├── example/                # Flutter example');
       print('   └── README.md');
@@ -75,9 +81,10 @@ class PackageScaffold {
       print('🚀 Next steps:');
       print('   1. cd $packageDir');
       print('   2. Implement JavaScript in $packageName/src/index.js');
-      print('   3. Update example app');
-      print('   4. Publish to npm: cd $packageName && npm publish');
-      print('   5. Publish to pub.dev: dart pub publish');
+      print('   3. Build package: cd $packageName && node build.js');
+      print('   4. Update example app');
+      print('   5. Publish to npm: cd $packageName && npm publish');
+      print('   6. Publish to pub.dev: dart pub publish');
 
       return true;
     } catch (e) {
@@ -532,6 +539,113 @@ SOFTWARE.
 ''');
   }
 
+  Future<void> _generateBuildJs(String packageDir, String packageName) async {
+    final file = File(p.join(packageDir, packageName, 'build.js'));
+    await file.writeAsString('''
+/**
+ * Build script for @flutterjs/$packageName
+ * 
+ * Generates exports.json manifest for the import resolver system
+ */
+
+import { readFileSync, writeFileSync, readdirSync, statSync } from 'fs';
+import { join, extname } from 'path';
+
+const srcDir = './src';
+
+/**
+ * Get all JavaScript files recursively
+ */
+function getAllJsFiles(dir, fileList = []) {
+  const files = readdirSync(dir);
+  
+  for (const file of files) {
+    const filePath = join(dir, file);
+    const stat = statSync(filePath);
+    
+    if (stat.isDirectory()) {
+      getAllJsFiles(filePath, fileList);
+    } else if (extname(file) === '.js') {
+      fileList.push(filePath);
+    }
+  }
+  
+  return fileList;
+}
+
+/**
+ * Scan all source files and generate exports.json manifest
+ * This manifest tells the Dart code generator what symbols this package exports
+ */
+function generateExportManifest(sourceFiles) {
+  const manifest = {
+    package: '@flutterjs/$packageName',
+    version: '0.1.0',
+    exports: []
+  };
+
+  // Regex patterns to match different export types
+  const exportRegex = /export\\s*{\\s*([^}]+)\\s*}/g;
+  const exportStarRegex = /export\\s*\\*\\s*from/g;
+  const classRegex = /export\\s+class\\s+(\\w+)/g;
+  const functionRegex = /export\\s+function\\s+(\\w+)/g;
+  const constRegex = /export\\s+const\\s+(\\w+)/g;
+
+  for (const srcFile of sourceFiles) {
+    const content = readFileSync(srcFile, 'utf8');
+    
+    // Find named exports: export { Foo, Bar }
+    for (const match of content.matchAll(exportRegex)) {
+      const symbols = match[1]
+        .split(',')
+        .map(s => s.trim())
+        .map(s => s.split(/\\s+as\\s+/).pop()) // Handle "export { Foo as Bar }"
+        .filter(s => s && !s.includes('from'));
+      manifest.exports.push(...symbols);
+    }
+    
+    // Find class exports: export class Foo
+    for (const match of content.matchAll(classRegex)) {
+      manifest.exports.push(match[1]);
+    }
+    
+    // Find function exports: export function foo()
+    for (const match of content.matchAll(functionRegex)) {
+      manifest.exports.push(match[1]);
+    }
+    
+    // Find const exports: export const FOO
+    for (const match of content.matchAll(constRegex)) {
+      manifest.exports.push(match[1]);
+    }
+  }
+
+  // Remove duplicates and sort
+  manifest.exports = [...new Set(manifest.exports)].sort();
+
+  writeFileSync('./exports.json', JSON.stringify(manifest, null, 2) + '\\n');
+  console.log(`📋 Generated exports.json with \${manifest.exports.length} symbols\\n`);
+}
+
+// Main build process
+async function build() {
+  console.log('🚀 Building @flutterjs/$packageName...\\n');
+
+  const allFiles = getAllJsFiles(srcDir);
+  console.log(`📦 Found \${allFiles.length} JavaScript files\\n`);
+
+  // Generate export manifest
+  generateExportManifest(allFiles);
+
+  console.log('✅ Build successful!\\n');
+}
+
+build().catch(console.error);
+''');
+
+    print('   📋 Added build.js with export scanning');
+  }
+
   String _toPascalCase(String snakeCase) {
     return snakeCase
         .split('_')
diff --git a/packages/pubjs/lib/src/package_watcher.dart b/packages/pubjs/lib/src/package_watcher.dart
new file mode 100644
index 00000000..45c76a3a
--- /dev/null
+++ b/packages/pubjs/lib/src/package_watcher.dart
@@ -0,0 +1,176 @@
+import 'dart:io';
+import 'dart:async';
+
+/// Watches package source files and triggers rebuilds on changes
+///
+/// 🎁 WATCH MODE - Development workflow enhancement
+class PackageWatcher {
+  final String projectRoot;
+  final List<String> packagesToWatch;
+  final Function(String packageName) onPackageChanged;
+  final bool verbose;
+
+  StreamSubscription? _subscription;
+  final Map<String, DateTime> _lastChangeTime = {};
+  final _debounceMs = 500; // Debounce time in milliseconds
+
+  PackageWatcher({
+    required this.projectRoot,
+    required this.packagesToWatch,
+    required this.onPackageChanged,
+    this.verbose = false,
+  });
+
+  /// Start watching for changes
+  Future<void> start() async {
+    if (verbose) {
+      print('\n👀 Starting watch mode...');
+      print('   Watching ${packagesToWatch.length} packages');
+    }
+
+    // Watch all package source directories
+    for (final packageName in packagesToWatch) {
+      final packagePath = _getPackagePath(packageName);
+      if (packagePath == null) continue;
+
+      final srcDir = Directory('$packagePath/src');
+      if (!await srcDir.exists()) continue;
+
+      // Watch for changes
+      final watcher = srcDir.watch(recursive: true);
+
+      watcher.listen((event) {
+        _handleFileChange(packageName, event.path);
+      });
+
+      if (verbose) {
+        print('   👁  Watching $packageName');
+      }
+    }
+  }
+
+  /// Handle file change with debouncing
+  void _handleFileChange(String packageName, String filePath) {
+    // Only watch .js files
+    if (!filePath.endsWith('.js')) return;
+
+    final now = DateTime.now();
+    final lastChange = _lastChangeTime[packageName];
+
+    // Debounce: Ignore if changed too recently
+    if (lastChange != null) {
+      final diff = now.difference(lastChange).inMilliseconds;
+      if (diff < _debounceMs) return;
+    }
+
+    _lastChangeTime[packageName] = now;
+
+    if (verbose) {
+      print('\n📝 Change detected: $packageName');
+      print('   File: ${filePath.split('/').last}');
+    }
+
+    // Trigger rebuild callback
+    onPackageChanged(packageName);
+  }
+
+  /// Get package source path
+  String? _getPackagePath(String packageName) {
+    final simpleName = packageName.replaceAll('@flutterjs/', '');
+    final path =
+        '$projectRoot/packages/flutterjs_$simpleName/flutterjs_$simpleName';
+
+    if (Directory(path).existsSync()) {
+      return path;
+    }
+
+    return null;
+  }
+
+  /// Stop watching
+  Future<void> stop() async {
+    await _subscription?.cancel();
+    if (verbose) {
+      print('\n👋 Stopped watch mode');
+    }
+  }
+}
+
+/// Build statistics tracker
+///
+/// 🎁 BUILD STATISTICS - Performance metrics
+class BuildStatistics {
+  DateTime? startTime;
+  DateTime? endTime;
+
+  int builtCount = 0;
+  int skippedCount = 0;
+  int failedCount = 0;
+
+  final Map<String, int> packageBuildTimes = {};
+
+  /// Record individual package build time
+  void recordPackageBuild(String packageName, int milliseconds) {
+    packageBuildTimes[packageName] = milliseconds;
+  }
+
+  /// Get total duration
+  String getDuration() {
+    if (startTime == null || endTime == null) return '0ms';
+
+    final duration = endTime!.difference(startTime!);
+
+    if (duration.inSeconds > 0) {
+      return '${duration.inSeconds}.${(duration.inMilliseconds % 1000).toString().padLeft(3, '0')}s';
+    }
+
+    return '${duration.inMilliseconds}ms';
+  }
+
+  /// Get average build time
+  double getAverageMs() {
+    if (packageBuildTimes.isEmpty) return 0;
+
+    final total = packageBuildTimes.values.reduce((a, b) => a + b);
+    return total / packageBuildTimes.length;
+  }
+
+  /// Get slowest package
+  MapEntry<String, int>? getSlowestPackage() {
+    if (packageBuildTimes.isEmpty) return null;
+
+    return packageBuildTimes.entries.reduce(
+      (a, b) => a.value > b.value ? a : b,
+    );
+  }
+
+  /// Print detailed report
+  void printReport() {
+    print('\n┌─────────────────────────────────────────┐');
+    print('│     📊 Build Statistics Report       │');
+    print('├─────────────────────────────────────────┤');
+    print('│ Total Duration: ${getDuration().padRight(23)} │');
+    print('│ Built: ${builtCount.toString().padRight(31)} │');
+    print('│ Skipped: ${skippedCount.toString().padRight(29)} │');
+    if (failedCount > 0) {
+      print('│ Failed: ${failedCount.toString().padRight(30)} │');
+    }
+
+    if (packageBuildTimes.isNotEmpty) {
+      print('│                                         │');
+      print(
+        '│ Average Build Time: ${getAverageMs().toStringAsFixed(0)}ms${' ' * (15 - getAverageMs().toStringAsFixed(0).length)} │',
+      );
+
+      final slowest = getSlowestPackage();
+      if (slowest != null) {
+        final name = slowest.key.replaceAll('@flutterjs/', '');
+        print(
+          '│ Slowest: $name (${slowest.value}ms)${' ' * (21 - name.length - slowest.value.toString().length)} │',
+        );
+      }
+    }
+
+    print('└─────────────────────────────────────────┘\n');
+  }
+}
diff --git a/packages/pubjs/lib/src/runtime_package_manager.dart b/packages/pubjs/lib/src/runtime_package_manager.dart
index 4fa615d9..4fd5dc64 100644
--- a/packages/pubjs/lib/src/runtime_package_manager.dart
+++ b/packages/pubjs/lib/src/runtime_package_manager.dart
@@ -3,12 +3,12 @@ import 'dart:convert';
 import 'package:path/path.dart' as p;
 import 'package:yaml/yaml.dart';
 import 'pub_dev_client.dart';
-import 'npm_client.dart';
 import 'package_downloader.dart';
 import 'model/package_info.dart';
 import 'config_resolver.dart';
 import 'config_generator.dart';
 import 'flutterjs_registry_client.dart';
+import 'package_builder.dart';
 
 /// Runtime package manager for FlutterJS
 ///
@@ -16,7 +16,6 @@ import 'flutterjs_registry_client.dart';
 /// at runtime. Enforces strict registry checking.
 class RuntimePackageManager {
   final PubDevClient _pubDevClient;
-  final NpmClient _npmClient;
   final PackageDownloader _downloader;
   final ConfigResolver _configResolver;
   final ConfigGenerator _configGenerator;
@@ -24,23 +23,212 @@ class RuntimePackageManager {
 
   RuntimePackageManager({
     PubDevClient? pubDevClient,
-    NpmClient? npmClient,
+
     PackageDownloader? downloader,
     ConfigResolver? configResolver,
     ConfigGenerator? configGenerator,
     FlutterJSRegistryClient? registryClient,
   }) : _pubDevClient = pubDevClient ?? PubDevClient(),
-       _npmClient = npmClient ?? NpmClient(),
+     
        _downloader = downloader ?? PackageDownloader(),
        _configResolver = configResolver ?? ConfigResolver(),
        _configGenerator = configGenerator ?? ConfigGenerator(),
        _registryClient = registryClient ?? FlutterJSRegistryClient();
 
+  /// Resolves specific packages and returns their paths
+  ///
+  /// This is used by the hybrid resolution strategy where Dart resolves
+  /// only packages that don't have paths in the config.
+  ///
+  /// Returns: Map<packageName, resolvedPath>
+  Future<Map<String, String>> resolvePackages(
+    List<String> packageNames, {
+    required String projectPath,
+    bool includeSDK = false,
+    bool verbose = false,
+  }) async {
+    final resolvedPaths = <String, String>{};
+
+    if (verbose) {
+      print('📦 Resolving ${packageNames.length} packages...');
+    }
+
+    // 1. Read flutterjs.config.js for any existing configs
+    final configPath = p.join(projectPath, 'flutterjs.config.js');
+    final userPackageConfigs = await _configResolver.resolvePackageConfig(
+      configPath,
+    );
+
+    // 2. Fetch registry for package mappings
+    final registry = await _registryClient.fetchRegistry();
+    final registryPackages = (registry?['packages'] as List?) ?? [];
+
+    // 3. Resolve SDK packages if requested
+    if (includeSDK) {
+      final sdkPackages = await _resolveSDKPackages(projectPath);
+
+      // If packageNames is empty, resolve ALL SDK packages
+      if (packageNames.isEmpty) {
+        resolvedPaths.addAll(sdkPackages);
+        if (verbose) {
+          for (final pkg in sdkPackages.keys) {
+            print('   ✔ $pkg (SDK)');
+          }
+        }
+      } else {
+        // Only resolve requested SDK packages
+        for (final pkg in packageNames) {
+          if (pkg.startsWith('@flutterjs/') && sdkPackages.containsKey(pkg)) {
+            resolvedPaths[pkg] = sdkPackages[pkg]!;
+            if (verbose) print('   ✔ $pkg (SDK)');
+          }
+        }
+      }
+    }
+
+    // 4. Resolve each package
+    for (final packageName in packageNames) {
+      // Skip if already resolved (SDK)
+      if (resolvedPaths.containsKey(packageName)) continue;
+
+      // Check if user has local path override
+      final userConfig = userPackageConfigs[packageName];
+      if (userConfig != null && userConfig.path != null) {
+        final sourcePath = userConfig.path!;
+        final absolutePath = p.isAbsolute(sourcePath)
+            ? sourcePath
+            : p.normalize(p.join(projectPath, sourcePath));
+
+        if (await Directory(absolutePath).exists()) {
+          resolvedPaths[packageName] = p.relative(
+            absolutePath,
+            from: projectPath,
+          );
+          if (verbose) print('   ✔ $packageName (local)');
+        } else {
+          if (verbose) print('   ❌ $packageName (local path not found)');
+        }
+        continue;
+      }
+
+      // Try registry lookup
+      dynamic registryEntry;
+      try {
+        registryEntry = registryPackages.firstWhere(
+          (pkg) => pkg['name'] == packageName,
+        );
+      } catch (_) {}
+
+      if (registryEntry != null) {
+        final targetFlutterJsPackage = registryEntry['flutterjs_package'];
+        // For now, indicate it should be downloaded (not a local path)
+        // The actual download happens in resolveProjectDependencies
+        resolvedPaths[packageName] =
+            'node_modules/@flutterjs/$targetFlutterJsPackage';
+        if (verbose)
+          print('   ✔ $packageName -> $targetFlutterJsPackage (registry)');
+      } else {
+        if (verbose) print('   ⚠ $packageName (not found in registry)');
+      }
+    }
+
+    return resolvedPaths;
+  }
+
+  /// Resolves SDK packages (@flutterjs/*)
+  Future<Map<String, String>> _resolveSDKPackages(String projectPath) async {
+    final sdkPackages = <String, String>{};
+
+    // Search upward for packages/flutterjs_engine/
+    Directory current = Directory(projectPath);
+    for (int i = 0; i < 8; i++) {
+      final enginePaths = [
+        p.join(current.path, 'packages', 'flutterjs_engine', 'src'),
+        p.join(current.path, 'packages', 'flutterjs_engine', 'package'),
+      ];
+
+      for (final enginePath in enginePaths) {
+        final engineDir = Directory(enginePath);
+        if (await engineDir.exists()) {
+          await for (final entity in engineDir.list()) {
+            if (entity is Directory) {
+              final pkgJsonPath = p.join(entity.path, 'package.json');
+              if (await File(pkgJsonPath).exists()) {
+                final pkgName = p.basename(entity.path);
+                final relativePath = p.relative(entity.path, from: projectPath);
+                sdkPackages['@flutterjs/$pkgName'] = relativePath;
+              }
+            }
+          }
+        }
+      }
+
+      // Also scan packages/flutterjs_* for core SDK packages
+      // These have structure: packages/flutterjs_material/flutterjs_material/package.json
+      final packagesDir = p.join(current.path, 'packages');
+      if (await Directory(packagesDir).exists()) {
+        await for (final entity in Directory(packagesDir).list()) {
+          if (entity is Directory) {
+            final dirName = p.basename(entity.path);
+
+            // Check if it's a flutterjs_* package (but not engine or tools)
+            if (dirName.startsWith('flutterjs_') &&
+                dirName != 'flutterjs_engine' &&
+                dirName != 'flutterjs_tools') {
+              // 1. Try nested package (legacy): packages/flutterjs_material/flutterjs_material/
+              final innerPackageDir = Directory(p.join(entity.path, dirName));
+              bool found = false;
+
+              if (await innerPackageDir.exists()) {
+                final pkgJsonPath = p.join(
+                  innerPackageDir.path,
+                  'package.json',
+                );
+                if (await File(pkgJsonPath).exists()) {
+                  found = true;
+                  // Extract package name: flutterjs_material -> material
+                  final pkgName = dirName.substring('flutterjs_'.length);
+                  final relativePath = p.relative(
+                    innerPackageDir.path,
+                    from: projectPath,
+                  );
+                  sdkPackages['@flutterjs/$pkgName'] = relativePath;
+                }
+              }
+
+              // 2. Try flat package (new): packages/flutterjs_dart/
+              if (!found) {
+                final pkgJsonPath = p.join(entity.path, 'package.json');
+                if (await File(pkgJsonPath).exists()) {
+                  // Extract package name: flutterjs_dart -> dart
+                  final pkgName = dirName.substring('flutterjs_'.length);
+                  final relativePath = p.relative(
+                    entity.path,
+                    from: projectPath,
+                  );
+                  sdkPackages['@flutterjs/$pkgName'] = relativePath;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      if (sdkPackages.isNotEmpty) break;
+
+      if (current.parent.path == current.path) break;
+      current = current.parent;
+    }
+
+    return sdkPackages;
+  }
+
   /// Resolves and installs all dependencies for a FlutterJS project
   Future<bool> resolveProjectDependencies({
     required String projectPath,
     required String buildPath,
     bool verbose = false,
+    Map<String, String>? preResolvedSdkPackages,
   }) async {
     if (verbose) {
       print('🔍 Resolving FlutterJS project dependencies...');
@@ -84,6 +272,32 @@ class RuntimePackageManager {
       }
       final registryPackages = (registry?['packages'] as List?) ?? [];
 
+      // 🎁 NEW: Resolve SDK packages locally first (or use pre-resolved)
+      final sdkPackages =
+          preResolvedSdkPackages ?? await _resolveSDKPackages(projectPath);
+      if (verbose && sdkPackages.isNotEmpty) {
+        if (preResolvedSdkPackages == null)
+          print('   💡 Found ${sdkPackages.length} local SDK packages');
+      }
+
+      // 🎁 NEW: Explicitly link ALL SDK packages found in monorepo
+      // This ensures scoped packages (e.g. @flutterjs/runtime) are available in node_modules
+      for (final sdkPkg in sdkPackages.entries) {
+        final pkgName = sdkPkg.key;
+        final relPath = sdkPkg.value;
+        final absPath = p.join(projectPath, relPath);
+
+        // If package is scoped (e.g. @flutterjs/runtime), strip scope because destDir already includes @flutterjs
+        var linkName = pkgName;
+        if (linkName.startsWith('@flutterjs/')) {
+          linkName = linkName.substring('@flutterjs/'.length);
+        }
+
+        if (verbose)
+          print('   🔗 Pre-linking SDK package: $pkgName -> $linkName');
+        await _linkLocalPackage(linkName, absPath, nodeModulesFlutterJS);
+      }
+
       bool configurationNeeded = false;
 
       for (final entry in dependencies.entries) {
@@ -93,6 +307,20 @@ class RuntimePackageManager {
         if (entry.value is Map && (entry.value as Map)['sdk'] != null) continue;
         if (packageName == 'flutter') continue;
 
+        // 0. SDK Package Override (Highest Priority for Monorepo Dev)
+        if (sdkPackages.containsKey(packageName)) {
+          if (verbose) print('   🔗 $packageName (Local SDK)');
+          final relativePath = sdkPackages[packageName]!;
+          final absoluteSource = p.join(projectPath, relativePath);
+
+          await _linkLocalPackage(
+            packageName,
+            absoluteSource,
+            nodeModulesFlutterJS,
+          );
+          continue;
+        }
+
         // Check User Config for this package
         final userConfig = userPackageConfigs[packageName];
 
@@ -121,6 +349,30 @@ class RuntimePackageManager {
           continue;
         }
 
+        // A-2. Pubspec Path Override (High priority)
+        if (entry.value is Map && (entry.value as Map)['path'] != null) {
+          final sourcePath = (entry.value as Map)['path'] as String;
+          if (verbose) print('   🔗 $packageName (Pubspec Path)');
+
+          final absoluteSource = p.isAbsolute(sourcePath)
+              ? sourcePath
+              : p.normalize(p.join(projectPath, sourcePath));
+
+          if (!await Directory(absoluteSource).exists()) {
+            print(
+              '❌ Error: Pubspec path for $packageName does not exist: $absoluteSource',
+            );
+            return false;
+          }
+
+          await _linkLocalPackage(
+            packageName,
+            absoluteSource,
+            nodeModulesFlutterJS,
+          );
+          continue;
+        }
+
         // B. Registry Override (from Config) OR Registry Lookup (Default)
         // If config has string 'flutterjs_pkg:ver', use that.
         // Else check registry.json for mapping.
@@ -204,51 +456,148 @@ class RuntimePackageManager {
     }
   }
 
+  /// Complete package preparation: download, build, and verify manifests
+  ///
+  /// This is the ONE METHOD that CLI should call to prepare all packages.
+  /// It orchestrates the full flow:
+  /// 1. Resolve and download dependencies
+  /// 2. Build SDK packages (generate exports.json)
+  /// 3. Verify all manifests exist
+  ///
+  /// [projectPath] - Root directory of the project
+  /// [buildPath] - Build directory (e.g., build/flutterjs)
+  /// [force] - Force rebuild even if packages are up-to-date
+  /// [verbose] - Print detailed progress
+  Future<bool> preparePackages({
+    required String projectPath,
+    required String buildPath,
+    bool force = false,
+    bool verbose = false,
+  }) async {
+    print('\n📦 Preparing FlutterJS packages...\n');
+
+    // 🎁 Resolve SDK paths once for everyone
+    final sdkPaths = await _resolveSDKPackages(projectPath);
+
+    // PHASE 2: Build SDK packages (Build FIRST so artifacts exist when copied)
+    if (verbose)
+      print(
+        '\nPhase 1: Building SDK packages...',
+      ); // Renamed to Phase 1 in log logic
+
+    final builder = PackageBuilder();
+    final buildStats = await builder.buildSDKPackages(
+      projectRoot: projectPath,
+      buildPath: buildPath,
+      force: force,
+      verbose: verbose,
+      parallel: true, // 🎁 Parallel builds enabled
+      sdkPaths: sdkPaths,
+    );
+
+    if (buildStats.failedCount > 0) {
+      if (verbose)
+        print('❌ Build failed with ${buildStats.failedCount} errors');
+      return false;
+    }
+
+    // PHASE 1: Resolve Dependencies (Link/Copy built packages)
+    if (verbose)
+      print('\nPhase 2: Resolving dependencies...'); // Renamed to Phase 2
+
+    final resolved = await resolveProjectDependencies(
+      projectPath: projectPath,
+      buildPath: buildPath,
+      verbose: verbose,
+      preResolvedSdkPackages: sdkPaths,
+    );
+
+    if (!resolved) {
+      print('❌ Dependency resolution failed');
+      return false;
+    }
+
+    // 🎁 Show detailed build report
+    if (verbose) {
+      buildStats.printReport();
+    }
+
+    // PHASE 3: Verify manifests exist
+    if (verbose) {
+      print('\nPhase 3: Verifying manifests...');
+      final manifestsOk = await _verifyManifests(buildPath);
+      if (!manifestsOk) {
+        print('⚠️  Some manifests missing, but continuing...');
+      }
+    }
+
+    print('\n✅ All packages ready!\n');
+    return true;
+  }
+
+  /// Verify that all expected manifests exist
+  Future<bool> _verifyManifests(String buildPath) async {
+    final manifestDir = Directory(
+      p.join(buildPath, 'node_modules', '@flutterjs'),
+    );
+
+    if (!await manifestDir.exists()) {
+      return false;
+    }
+
+    var foundCount = 0;
+    await for (final entity in manifestDir.list()) {
+      if (entity is Directory) {
+        final manifestFile = File(p.join(entity.path, 'exports.json'));
+        if (await manifestFile.exists()) {
+          foundCount++;
+        }
+      }
+    }
+
+    print('   ✓ Found $foundCount package manifests');
+    return foundCount > 0;
+  }
+
   Future<void> _linkLocalPackage(
     String packageName,
     String source,
     String destDir,
   ) async {
-    // For now, implementing copy to avoid symlink permission issues on Windows
-    final target = p.join(
-      destDir,
-      'flutterjs_$packageName',
-    ); // Convention? Or just name?
-    // Actually, if it's local, we might want to keep the name generic or prefixed.
-    // Let's map it to 'flutterjs_$packageName' to match the system,
-    // OR just use the packageName if the user imported it as such?
-    // FlutterJS logic usually imports 'package:flutterjs_http/...'
-    // But wait, the Dart import is 'package:http'.
-    // The rewriting logic expects 'package:flutterjs_http'.
-    // So we should install it as 'flutterjs_$packageName' if possible,
-    // or relying on the compiler to handle the name.
-    // For safety, let's install it as 'flutterjs_$packageName'.
-
-    final installName = 'flutterjs_$packageName';
+    // Use exact package name for node_modules resolution
+    final installName = packageName;
     final targetDir = Directory(p.join(destDir, installName));
 
     if (await targetDir.exists()) {
       await targetDir.delete(recursive: true);
     }
 
-    // Simple copy (inefficient but safe)
-    // In real dev, we want symlinks.
-    // Try creating a junction/symlink first?
     try {
-      await Link(targetDir.path).create(source);
+      if (Platform.isWindows) {
+        // Windows often has issues with symlinks, default to copy
+        await _copyDirectory(Directory(source), targetDir);
+      } else {
+        await Link(targetDir.path).create(source);
+      }
     } catch (e) {
       // Fallback to copy if link fails
-      await _copyDirectory(Directory(source), targetDir);
+      try {
+        await _copyDirectory(Directory(source), targetDir);
+      } catch (copyError) {
+        print('      ❌ Copy failed: $copyError');
+      }
     }
   }
 
   Future<void> _copyDirectory(Directory source, Directory destination) async {
     await destination.create(recursive: true);
     await for (final entity in source.list(recursive: false)) {
+      final name = p.basename(entity.path);
+      if (name == 'node_modules' || name == '.git' || name == '.dart_tool')
+        continue;
+
       if (entity is Directory) {
-        final newDirectory = Directory(
-          p.join(destination.path, p.basename(entity.path)),
-        );
+        final newDirectory = Directory(p.join(destination.path, name));
         await _copyDirectory(entity, newDirectory);
       } else if (entity is File) {
         await entity.copy(p.join(destination.path, p.basename(entity.path)));
diff --git a/plan.md b/plan.md
deleted file mode 100644
index ce2cc409..00000000
--- a/plan.md
+++ /dev/null
@@ -1,109 +0,0 @@
-# FlutterJS Package Ecosystem & "PubJS" Plan
-
-## Executive Summary
-This document outlines the architectural roadmap for the **FlutterJS Package Management System**. Our goal is to replicate the robustness of the Flutter/Pub ecosystem in a JavaScript environment, allowing users to seamlessly use packages (e.g., `package:http`, `package:firebase`) that resolve to their correct FlutterJS implementations.
-
----
-
-## 1. The Core Problem
-Dart applications rely on `package:` imports. In FlutterJS, these imports must map to valid JavaScript modules (NPM packages or hosted JS files).
-- **Dart**: `import 'package:google_fonts/google_fonts.dart';`
-- **JS**: `import { GoogleFonts } from '@flutterjs/google_fonts';` (or similar)
-
-We cannot hardcode these mappings. Users need a system to:
-1.  **Define** dependencies (like `pubspec.yaml`).
-2.  **Resolve** them to JS implementations.
-3.  **Configure** custom mappings if needed.
-
----
-
-## 2. Phase 1: Explicit Configuration (Implemented)
-**Status**: ✅ Complete
-The `flutterjs.config.json` file in the user's project root acts as the source of truth.
-
-**Mechanism:**
-- User adds `package:x` to `pubspec.yaml`.
-- User maps `package:x` to `npm-package-y` in `flutterjs.config.json`.
-- The **ImportResolver** (in `flutterjs_gen`) reads this map and generates correct JS imports.
-
-```json
-// flutterjs.config.json
-{
-  "packages": {
-    "package:firebase_auth": "@flutterjs/firebase_auth",
-    "package:http": "axios"
-  }
-}
-```
-
----
-
-## 3. Phase 2: The `flutterjs_pub` Package (New)
-**Goal**: Automate the configuration. Users shouldn't manually edit JSON files.
-We will create a new package: **`packages/flutterjs_pub`**.
-
-### Responsibilities
-1.  **Analyze `pubspec.yaml`**: Automatically detect dependencies.
-2.  **Fetch Metadata**: Query a central registry ("PubJS") to find the corresponding JS package for a given Dart package.
-    - *Example*: User has `http: ^1.0.0`. `flutterjs_pub` queries registry, finds it maps to `@flutterjs/http`, and updates `flutterjs.config.json`.
-3.  **Auto-Configuration**: Run `flutterjs pub get` to generate the config file automatically.
-
-### Architecture
-- **CLI Command**: `dart run flutterjs_tool pub get`
-- **Logic**: 
-  - Read `pubspec.yaml`.
-  - For each dependency, checks "PubJS Registry".
-  - Writes resolution to `flutterjs.config.json`.
-
----
-
-## 4. Phase 3: The "PubJS" Registry & CDN
-**Goal**: A decentralized, Git-based distribution system.
-
-### Concept
-Instead of a heavy backend, we use a **Git Repository** as the registry.
-- **Repo Structure**:
-  ```
-  /packages
-    /http
-      package.json (defines mapping: "package:http" -> "@flutterjs/http")
-      /versions
-        /1.0.0.js
-    /firebase
-      package.json
-  ```
-
-### Workflow
-1.  **Publish**: Package authors push to the PubJS Git Repo.
-2.  **Resolve**: The `flutterjs_pub` tool fetches the raw JSON from the Git repo (CDN style).
-3.  **Security**: 
-    - Verified Publishers (via Git signatures).
-    - Compile-time Keys: Private packages can embed keys during the build process that are stripped from the final runtime code.
-
----
-
-## 5. Implementation Roadmap
-
-### Step 1: Create `flutterjs_config` (Standard)
-- [x] Create `ConfigLoader` to read/write `flutterjs.config.json`.
-
-### Step 2: Create `flutterjs_pub` (The Tool)
-- [ ] Create `packages/flutterjs_pub`.
-- [ ] Implement `PubSpecParser`.
-- [ ] Implement `RegistryClient` (fetches mappings).
-- [ ] Implement `ConfigGenerator` (updates `flutterjs.config.json`).
-
-### Step 3: Integrate with Main CLI
-- [ ] Add `flutterjs pub` command to the main tool.
-
----
-
-## 6. User Experience
-1.  **Create App**: `flutterjs create my_app`
-2.  **Add Dependency**: Add `http: ^1.0.0` to `pubspec.yaml`.
-3.  **Resolve**: Run `flutterjs pub get` (or it runs automatically).
-    - *System*: Fetches mapping for `http`, writes to `flutterjs.config.json`.
-4.  **Run**: `flutterjs run`
-    - *System*: Generates `import ... from '@flutterjs/http'` automatically.
-
-This is robust, strictly typed, and familiar to Flutter developers.
diff --git a/plan_update_details.md b/plan_update_details.md
deleted file mode 100644
index c5969fc4..00000000
--- a/plan_update_details.md
+++ /dev/null
@@ -1,21 +0,0 @@
-
-### Update regarding PubJS Logic
-
-We will implementing the "CDN" as a GitHub repository structure.
-Base URL: `https://raw.githubusercontent.com/flutterjs/packages/main/packages`
-
-Structure:
-`$BASE_URL/$packageName/package.json`
-
-The `package.json` for a package (e.g. `http`) will look like:
-```json
-{
-  "name": "http",
-  "flutterjs_mapping": "@flutterjs/http",
-  "version": "1.0.0" 
-}
-```
-
-The `RegistryClient` will fetch this JSON.
-If the status is 200, it parses the `flutterjs_mapping`.
-If 404, it assumes no mapping exists or asks user (for now, we will just warn).
diff --git a/pubspec.yaml b/pubspec.yaml
index 50ba1987..94289284 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -1,20 +1,25 @@
 name: flutterjs
 description: A sample command-line application.
-version: 1.0.0
+version: 0.0.1
 publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 # repository: https://github.com/my_org/my_repo
 
+executables:
+  flutterjs: flutterjs
+
 workspace:
   - examples/counter/
   - examples/routing_app/
+  - examples/material_demo/
   - examples/multi_file_test/
   - packages/flutterjs_dev_utils/
   - packages/flutterjs_tools/
   - packages/flutterjs_gen/
-  - packages/flutterjs_analyzer/
+  - packages/dart_analyzer/
   - packages/flutterjs_core/
   - packages/flutterjs_dev_tools/
   - packages/pubjs/
+  - packages/flutterjs_seo/
 
 environment:
   sdk: ^3.10.0-227.0.dev
@@ -24,7 +29,7 @@ dependencies:
   path: ^1.9.0
   analyzer: ^8.4.1
   args:
-  flutterjs_analyzer: any
+  dart_analyzer: any
   flutterjs_core: any
   flutterjs_gen: any
   flutterjs_tools: any