@thelacanians/vue-native-cli 0.4.15 → 0.6.2

package/dist/cli.js

@@ -59,15 +59,16 @@ function ensureOutputDir(outputPath) {
     mkdirSync(outputPath, { recursive: true });
   }
 }
-var buildCommand = new Command("build").description("Create a release build of the app").argument("<platform>", "platform to build for (ios, android)").option("--mode <mode>", "build mode", "release").option("--output <path>", "output directory for the build artifact", "./build").option("--scheme <scheme>", "Xcode scheme to build (iOS only)").option("--aab", "build Android App Bundle (.aab) instead of APK").action(async (platform, options) => {
-  if (platform !== "ios" && platform !== "android") {
-    console.error(pc.red('Platform must be "ios" or "android"'));
+var buildCommand = new Command("build").description("Create a release build of the app").argument("<platform>", "platform to build for (ios, android, macos)").option("--mode <mode>", "build mode", "release").option("--output <path>", "output directory for the build artifact", "./build").option("--scheme <scheme>", "Xcode scheme to build (iOS only)").option("--aab", "build Android App Bundle (.aab) instead of APK").action(async (platform, options) => {
+  if (platform !== "ios" && platform !== "android" && platform !== "macos") {
+    console.error(pc.red('Platform must be "ios", "android", or "macos"'));
     process.exit(1);
   }
   const cwd = process.cwd();
   const outputDir = join(cwd, options.output);
+  const platformLabel = platform === "ios" ? "iOS" : platform === "android" ? "Android" : "macOS";
   console.log(pc.cyan(`
-  Vue Native \u2014 ${options.mode.charAt(0).toUpperCase() + options.mode.slice(1)} Build (${platform === "ios" ? "iOS" : "Android"})
+  Vue Native \u2014 ${options.mode.charAt(0).toUpperCase() + options.mode.slice(1)} Build (${platformLabel})
 `));
   console.log(pc.white("  Building JS bundle for production..."));
   try {
@@ -79,8 +80,10 @@ var buildCommand = new Command("build").description("Create a release build of t
   }
   if (platform === "ios") {
     buildIOS(cwd, outputDir, options);
-  } else {
+  } else if (platform === "android") {
     buildAndroid(cwd, outputDir, options);
+  } else {
+    buildMacOS(cwd, outputDir, options);
   }
 });
 function buildIOS(cwd, outputDir, options) {
@@ -244,6 +247,85 @@ function buildAndroid(cwd, outputDir, options) {
     }
   });
 }
+function buildMacOS(cwd, outputDir, options) {
+  const macosDir = join(cwd, "macos");
+  const project = findXcodeProject(macosDir);
+  if (!project) {
+    console.log(pc.yellow("  No Xcode project found in ./macos/"));
+    console.log(pc.dim("  To add macOS support, create an Xcode project in the macos/ directory."));
+    console.log(pc.dim("  Bundle has been built to dist/vue-native-bundle.js\n"));
+    return;
+  }
+  const projectFlag = project.isWorkspace ? "-workspace" : "-project";
+  const scheme = options.scheme || project.path.split("/").pop()?.replace(/\.(xcworkspace|xcodeproj)$/, "") || "App";
+  const configuration = options.mode === "release" ? "Release" : "Debug";
+  const archivePath = join(outputDir, `${scheme}.xcarchive`);
+  ensureOutputDir(outputDir);
+  console.log(pc.white(`  Archiving ${scheme} (${configuration}) for macOS...`));
+  console.log(pc.dim(`  Archive path: ${archivePath}`));
+  const xcodebuild = spawn(
+    "xcodebuild",
+    [
+      projectFlag,
+      project.path,
+      "-scheme",
+      scheme,
+      "-configuration",
+      configuration,
+      "-destination",
+      "generic/platform=macOS",
+      "-archivePath",
+      archivePath,
+      "archive"
+    ],
+    {
+      cwd,
+      stdio: "pipe",
+      env: { ...process.env, DEVELOPER_DIR: "/Applications/Xcode.app/Contents/Developer" }
+    }
+  );
+  const cleanup = () => {
+    if (xcodebuild && !xcodebuild.killed) {
+      xcodebuild.kill();
+    }
+  };
+  process.on("exit", cleanup);
+  process.on("SIGINT", cleanup);
+  process.on("SIGTERM", cleanup);
+  xcodebuild.stdout?.on("data", (data) => {
+    const text = data.toString().trim();
+    if (text.includes("Compiling") || text.includes("Linking") || text.includes("Signing")) {
+      console.log(pc.dim(`  ${text.split("\n").pop()}`));
+    }
+  });
+  xcodebuild.stderr?.on("data", (data) => {
+    const text = data.toString().trim();
+    if (text.includes("error:")) {
+      console.log(pc.red(`  ${text}`));
+    } else if (text.includes("warning:")) {
+      console.log(pc.yellow(`  ${text}`));
+    }
+  });
+  xcodebuild.on("error", (err) => {
+    console.error(pc.red(`  xcodebuild process error: ${err.message}`));
+    cleanup();
+  });
+  xcodebuild.on("close", (code) => {
+    if (code !== 0) {
+      console.error(pc.red(`  \u2717 Archive failed (exit code ${code})`));
+      process.exit(1);
+    }
+    console.log(pc.green("  \u2713 Archive successful\n"));
+    if (existsSync(archivePath)) {
+      console.log(pc.green(`  Archive: ${archivePath}`));
+      console.log(pc.dim("  To export a .app or .pkg, open the archive in Xcode Organizer or run:"));
+      console.log(pc.dim(`  xcodebuild -exportArchive -archivePath "${archivePath}" -exportOptionsPlist ExportOptions.plist -exportPath "${outputDir}"
+`));
+    } else {
+      console.log(pc.yellow("  Archive path not found. Check Xcode build settings.\n"));
+    }
+  });
+}
 
 // src/commands/create.ts
 import { Command as Command2 } from "commander";
@@ -253,6 +335,9 @@ import { fileURLToPath } from "url";
 import { existsSync as existsSync2 } from "fs";
 import pc2 from "picocolors";
 var VERSION = "0.4.14";
+var JS_PACKAGE_VERSION = "^0.5.0";
+var VITE_PLUGIN_VUE_VERSION = "^6.0.5";
+var VITE_VERSION = "^8.0.0";
 var createCommand = new Command2("create").description("Create a new Vue Native project").argument("<name>", "project name").option("-t, --template <template>", "project template (blank, tabs, drawer)", "blank").action(async (name, options) => {
   const template = options.template;
   if (!["blank", "tabs", "drawer"].includes(template)) {
@@ -278,14 +363,14 @@ Creating Vue Native project: ${pc2.bold(name)} (template: ${template})
         typecheck: "tsc --noEmit"
       },
       dependencies: {
-        "@thelacanians/vue-native-runtime": "^0.4.0",
-        "@thelacanians/vue-native-navigation": "^0.4.0",
+        "@thelacanians/vue-native-runtime": JS_PACKAGE_VERSION,
+        "@thelacanians/vue-native-navigation": JS_PACKAGE_VERSION,
         "vue": "^3.5.0"
       },
       devDependencies: {
-        "@thelacanians/vue-native-vite-plugin": "^0.4.0",
-        "@vitejs/plugin-vue": "^5.0.0",
-        "vite": "^6.1.0",
+        "@thelacanians/vue-native-vite-plugin": JS_PACKAGE_VERSION,
+        "@vitejs/plugin-vue": VITE_PLUGIN_VUE_VERSION,
+        "vite": VITE_VERSION,
         "typescript": "^5.7.0"
       }
     }, null, 2));
@@ -1337,14 +1422,15 @@ function findApkPath(androidDir) {
   }
   return null;
 }
-var runCommand = new Command4("run").description("Build and run the app").argument("<platform>", "platform to run on (ios, android)").option("--device", "run on physical device instead of simulator").option("--scheme <scheme>", "Xcode scheme to build").option("--simulator <name>", "simulator name", "iPhone 16").option("--bundle-id <id>", "app bundle identifier").option("--package <name>", "Android package name", "com.vuenative.app").option("--activity <name>", "Android activity name", ".MainActivity").action(async (platform, options) => {
-  if (platform !== "ios" && platform !== "android") {
-    console.error(pc4.red('Platform must be "ios" or "android"'));
+var runCommand = new Command4("run").description("Build and run the app").argument("<platform>", "platform to run on (ios, android, macos)").option("--device", "run on physical device instead of simulator").option("--scheme <scheme>", "Xcode scheme to build").option("--simulator <name>", "simulator name", "iPhone 16").option("--bundle-id <id>", "app bundle identifier").option("--package <name>", "Android package name", "com.vuenative.app").option("--activity <name>", "Android activity name", ".MainActivity").action(async (platform, options) => {
+  if (platform !== "ios" && platform !== "android" && platform !== "macos") {
+    console.error(pc4.red('Platform must be "ios", "android", or "macos"'));
     process.exit(1);
   }
   const cwd = process.cwd();
+  const platformLabel = platform === "ios" ? "iOS" : platform === "android" ? "Android" : "macOS";
   console.log(pc4.cyan(`
-\u{1F4F1} Vue Native \u2014 Run ${platform === "ios" ? "iOS" : "Android"}
+\u{1F4F1} Vue Native \u2014 Run ${platformLabel}
 `));
   console.log(pc4.white("  Building JS bundle..."));
   try {
@@ -1356,8 +1442,10 @@ var runCommand = new Command4("run").description("Build and run the app").argume
   }
   if (platform === "ios") {
     runIOS(cwd, options);
-  } else {
+  } else if (platform === "android") {
     runAndroid(cwd, options);
+  } else {
+    runMacOS(cwd, options);
   }
 });
 function runIOS(cwd, options) {
@@ -1529,6 +1617,231 @@ function runAndroid(cwd, options) {
     }
   });
 }
+function runMacOS(cwd, options) {
+  const macosDir = join4(cwd, "macos");
+  if (!existsSync4(macosDir)) {
+    console.log(pc4.yellow("  No macos/ directory found."));
+    console.log(pc4.dim("  To add macOS support, create an Xcode project in the macos/ directory."));
+    console.log(pc4.dim("  Bundle has been built to dist/vue-native-bundle.js\n"));
+    return;
+  }
+  let xcodeProject = null;
+  for (const ext of [".xcworkspace", ".xcodeproj"]) {
+    try {
+      const entries = readdirSync2(macosDir);
+      const match = entries.find((e) => e.endsWith(ext));
+      if (match) {
+        xcodeProject = join4(macosDir, match);
+        break;
+      }
+    } catch {
+    }
+  }
+  if (!xcodeProject) {
+    console.log(pc4.yellow("  No Xcode project found in ./macos/"));
+    return;
+  }
+  const isWorkspace = xcodeProject.endsWith(".xcworkspace");
+  const scheme = options.scheme || xcodeProject.split("/").pop()?.replace(/\.(xcworkspace|xcodeproj)$/, "") || "App";
+  const projectFlag = isWorkspace ? "-workspace" : "-project";
+  console.log(pc4.white(`  Building ${scheme} for macOS...`));
+  const xcodebuild = spawn3(
+    "xcodebuild",
+    [projectFlag, xcodeProject, "-scheme", scheme, "-destination", "platform=macOS", "build"],
+    {
+      cwd,
+      stdio: "pipe",
+      env: { ...process.env, DEVELOPER_DIR: "/Applications/Xcode.app/Contents/Developer" }
+    }
+  );
+  xcodebuild.stderr?.on("data", (data) => {
+    const text = data.toString().trim();
+    if (text.includes("error:") || text.includes("warning:")) {
+      console.log(pc4.dim(`  ${text}`));
+    }
+  });
+  xcodebuild.on("close", (code) => {
+    if (code !== 0) {
+      console.error(pc4.red(`  \u2717 Build failed (exit code ${code})`));
+      process.exit(1);
+    }
+    console.log(pc4.green("  \u2713 Build successful\n"));
+    const derivedDataBase = join4(process.env.HOME || "~", "Library/Developer/Xcode/DerivedData");
+    let appPath = null;
+    if (existsSync4(derivedDataBase)) {
+      try {
+        const projects = readdirSync2(derivedDataBase);
+        for (const project of projects.reverse()) {
+          const productsDir = join4(derivedDataBase, project, "Build/Products/Debug");
+          if (existsSync4(productsDir)) {
+            const entries = readdirSync2(productsDir);
+            const app = entries.find((e) => e.endsWith(".app"));
+            if (app) {
+              appPath = join4(productsDir, app);
+              break;
+            }
+          }
+        }
+      } catch {
+      }
+    }
+    if (appPath) {
+      console.log(pc4.white(`  Launching ${appPath}...`));
+      try {
+        execSync3(`open "${appPath}"`, { stdio: "pipe" });
+        console.log(pc4.green(`  \u2713 App launched
+`));
+      } catch (err) {
+        console.error(pc4.red(`  \u2717 Failed to launch app: ${err.message}`));
+      }
+    } else {
+      console.log(pc4.yellow("  Could not locate .app bundle in DerivedData."));
+      console.log(pc4.dim("  Try running the app from Xcode directly.\n"));
+    }
+  });
+}
+
+// src/commands/generate.ts
+import { Command as Command5 } from "commander";
+import { existsSync as existsSync5 } from "fs";
+import { join as join5 } from "path";
+import pc5 from "picocolors";
+import { parseDirectory } from "@thelacanians/vue-native-sfc-parser";
+import { generateCode, writeGeneratedFiles, cleanGeneratedFiles, validateNativeBlocks, formatValidationErrors } from "@thelacanians/vue-native-codegen";
+var generateCommand = new Command5("generate").description("Generate native code from <native> blocks in Vue SFC files").option("--root <path>", "project root directory", process.cwd()).option("--watch", "watch mode - regenerate on file changes").option("--clean", "clean generated files before generating").option("--ios-output <path>", "iOS Swift output directory").option("--android-output <path>", "Android Kotlin output directory").option("--macos-output <path>", "macOS Swift output directory").option("--ts-output <path>", "TypeScript output directory").option("--no-swift", "disable Swift generation").option("--no-kotlin", "disable Kotlin generation").option("--no-typescript", "disable TypeScript generation").option("--exclude <patterns>", "patterns to exclude (comma-separated)").action(async (options) => {
+  const cwd = options.root;
+  const appDir = join5(cwd, "app");
+  if (!existsSync5(appDir)) {
+    console.error(pc5.red(`Error: App directory not found at ${appDir}`));
+    console.error(pc5.yellow("Make sure you run this command from your project root."));
+    process.exit(1);
+  }
+  const codegenOptions = {
+    root: cwd,
+    includeHeader: true,
+    generateSwift: options.swift !== false,
+    generateKotlin: options.kotlin !== false,
+    generateTypeScript: options.typescript !== false
+  };
+  if (options.iosOutput) codegenOptions.iosOutputDir = options.iosOutput;
+  if (options.androidOutput) codegenOptions.androidOutputDir = options.androidOutput;
+  if (options.macosOutput) codegenOptions.macosOutputDir = options.macosOutput;
+  if (options.tsOutput) codegenOptions.typescriptOutputDir = options.tsOutput;
+  const exclude = options.exclude ? options.exclude.split(",").map((p) => p.trim()) : ["node_modules", "dist", ".git", ".turbo"];
+  async function runGeneration() {
+    console.log(pc5.cyan("\n\u{1F527} Vue Native Code Generator"));
+    console.log(pc5.dim("\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"));
+    try {
+      if (options.clean) {
+        console.log(pc5.yellow("\u{1F5D1}\uFE0F  Cleaning generated files..."));
+        cleanGeneratedFiles(codegenOptions, cwd);
+        console.log(pc5.green("\u2713 Cleaned\n"));
+      }
+      console.log(pc5.blue("\u{1F4C4} Scanning SFC files..."));
+      const parseResult = parseDirectory(".", {
+        root: cwd,
+        exclude
+      });
+      if (parseResult.errors.length > 0) {
+        console.log(pc5.yellow("\u26A0\uFE0F  Parse warnings:"));
+        parseResult.errors.forEach((err) => {
+          console.log(pc5.dim(`  - ${err.file}:${err.line || "?"} ${err.message}`));
+        });
+        console.log();
+      }
+      const blockCount = parseResult.allNativeBlocks.length;
+      console.log(pc5.green(`\u2713 Found ${blockCount} <native> block${blockCount !== 1 ? "s" : ""}`));
+      if (blockCount === 0) {
+        console.log(pc5.yellow("\n\u26A0\uFE0F  No <native> blocks found."));
+        console.log(pc5.dim('Add <native platform="ios"> or <native platform="android"> blocks to your SFC files.'));
+        return;
+      }
+      console.log(pc5.blue("\u{1F50D} Validating native code..."));
+      const validation = validateNativeBlocks(parseResult.allNativeBlocks);
+      if (!validation.isValid) {
+        console.log(pc5.red("\n\u274C Validation failed:"));
+        console.log(formatValidationErrors(validation));
+        process.exit(1);
+      }
+      if (validation.warnings.length > 0) {
+        console.log(pc5.yellow(`\u26A0\uFE0F  ${validation.warnings.length} warning${validation.warnings.length !== 1 ? "s" : ""}`));
+      } else {
+        console.log(pc5.green("\u2713 Validation passed"));
+      }
+      console.log();
+      const iosBlocks = parseResult.allNativeBlocks.filter((b) => b.platform === "ios" || b.platform === "macos");
+      const androidBlocks = parseResult.allNativeBlocks.filter((b) => b.platform === "android");
+      if (iosBlocks.length > 0) {
+        console.log(pc5.dim(`  - iOS/macOS: ${iosBlocks.length} block${iosBlocks.length !== 1 ? "s" : ""}`));
+      }
+      if (androidBlocks.length > 0) {
+        console.log(pc5.dim(`  - Android: ${androidBlocks.length} block${androidBlocks.length !== 1 ? "s" : ""}`));
+      }
+      console.log();
+      console.log(pc5.blue("\u2699\uFE0F  Generating code..."));
+      const codegenResult = generateCode(parseResult.allNativeBlocks, codegenOptions);
+      if (codegenResult.errors.length > 0) {
+        console.log(pc5.red("\n\u274C Generation errors:"));
+        codegenResult.errors.forEach((err) => {
+          console.log(pc5.red(`  - ${err.file} ${err.message}`));
+        });
+        process.exit(1);
+      }
+      console.log(pc5.blue("\u{1F4DD} Writing files..."));
+      const writeResult = writeGeneratedFiles(codegenResult, cwd);
+      if (writeResult.errors.length > 0) {
+        console.log(pc5.red("\n\u274C Write errors:"));
+        writeResult.errors.forEach((err) => {
+          console.log(pc5.red(`  - ${err.message}`));
+        });
+        process.exit(1);
+      }
+      console.log(pc5.green("\n\u2705 Generation complete!\n"));
+      console.log(pc5.dim("Generated files:"));
+      console.log(pc5.dim(`  - Swift:      ${codegenResult.stats.swiftFiles} file${codegenResult.stats.swiftFiles !== 1 ? "s" : ""}`));
+      console.log(pc5.dim(`  - Kotlin:     ${codegenResult.stats.kotlinFiles} file${codegenResult.stats.kotlinFiles !== 1 ? "s" : ""}`));
+      console.log(pc5.dim(`  - TypeScript: ${codegenResult.stats.typescriptFiles} file${codegenResult.stats.typescriptFiles !== 1 ? "s" : ""}`));
+      console.log();
+      if (codegenResult.warnings.length > 0) {
+        console.log(pc5.yellow("\u26A0\uFE0F  Warnings:"));
+        codegenResult.warnings.forEach((warn) => {
+          console.log(pc5.dim(`  - ${warn.message}`));
+        });
+        console.log();
+      }
+      console.log(pc5.green("\u{1F389} Ready to build!\n"));
+    } catch (error) {
+      console.error(pc5.red("\n\u274C Fatal error:"));
+      console.error(pc5.red(error.message));
+      console.error(pc5.dim(error.stack || ""));
+      process.exit(1);
+    }
+  }
+  await runGeneration();
+  if (options.watch) {
+    console.log(pc5.cyan("\n\u{1F441}\uFE0F  Watch mode enabled. Press Ctrl+C to stop.\n"));
+    const chokidar = await import("chokidar");
+    const watcher = chokidar.default.watch("app/**/*.vue", {
+      cwd,
+      ignored: exclude,
+      ignoreInitial: true
+    });
+    watcher.on("change", async (file) => {
+      console.log(pc5.dim(`[${(/* @__PURE__ */ new Date()).toLocaleTimeString()}]`) + pc5.blue(` Changed: ${file}`));
+      await runGeneration();
+    });
+    watcher.on("error", (error) => {
+      console.error(pc5.red("Watch error:"), error);
+    });
+    process.on("SIGINT", () => {
+      console.log(pc5.yellow("\n\u23F9\uFE0F  Stopping watch mode..."));
+      watcher.close();
+      process.exit(0);
+    });
+    await new Promise(() => {
+    });
+  }
+});
 
 // src/cli.ts
 program.name("vue-native").description("Vue Native \u2014 build native iOS and Android apps with Vue.js").version("0.1.0");
@@ -1536,4 +1849,5 @@ program.addCommand(buildCommand);
 program.addCommand(createCommand);
 program.addCommand(devCommand);
 program.addCommand(runCommand);
+program.addCommand(generateCommand);
 program.parse(process.argv);

package/native/android/VueNativeCore/src/main/kotlin/com/vuenative/core/Bridge/NativeBridge.kt

@@ -6,6 +6,7 @@ import android.os.Looper
 import android.util.Log
 import android.view.View
 import android.view.ViewGroup
+import android.widget.FrameLayout
 import org.json.JSONArray
 import org.json.JSONObject
 
@@ -67,6 +68,26 @@ class NativeBridge(private val context: Context) {
     /** The container view from the host Activity — where the root view is attached. */
     var hostContainer: ViewGroup? = null
 
+    // -- Teleport support --
+    /** Maps teleport marker IDs for cleanup */
+    private val teleportMarkers = mutableMapOf<Int, Pair<Int, Int>>()
+
+    /** Maps parent node IDs to their teleport containers */
+    private val teleportContainers = mutableMapOf<Int, ViewGroup>()
+
+    /** Modal container for teleporting modals */
+    private val modalContainer: FrameLayout by lazy {
+        FrameLayout(context).apply {
+            layoutParams = FrameLayout.LayoutParams(
+                FrameLayout.LayoutParams.MATCH_PARENT,
+                FrameLayout.LayoutParams.MATCH_PARENT
+            )
+            setBackgroundColor(android.graphics.Color.TRANSPARENT)
+            isClickable = true
+            isFocusable = false
+        }
+    }
+
     /** Called when native fires an event to JS (nodeId, eventName, payloadJson). */
     var onFireEvent: ((nodeId: Int, eventName: String, payloadJson: String) -> Unit)? = null
 
@@ -143,6 +164,9 @@ class NativeBridge(private val context: Context) {
             "insertBefore" -> handleInsertBefore(args)
             "removeChild" -> handleRemoveChild(args)
             "setRootView" -> handleSetRootView(args)
+            "createTeleport" -> handleCreateTeleport(args)
+            "removeTeleport" -> handleRemoveTeleport(args)
+            "teleportTo" -> handleTeleportTo(args)
             "addEventListener" -> handleAddEventListener(args)
             "removeEventListener" -> handleRemoveEventListener(args)
             "invokeNativeModule" -> handleInvokeNativeModule(args)
@@ -311,6 +335,100 @@ class NativeBridge(private val context: Context) {
                 ViewGroup.LayoutParams.MATCH_PARENT
             )
         )
+
+        // Add modal container for teleport
+        container.addView(
+            modalContainer,
+            ViewGroup.LayoutParams(
+                ViewGroup.LayoutParams.MATCH_PARENT,
+                ViewGroup.LayoutParams.MATCH_PARENT
+            )
+        )
+    }
+
+    // -- Teleport handlers --
+
+    private fun handleCreateTeleport(args: JSONArray) {
+        val parentId = args.getInt(0)
+        val startId = args.getInt(1)
+        val endId = args.getInt(2)
+
+        val parentView = nodeViews[parentId] ?: run {
+            Log.w(TAG, "Parent view not found for teleport (id: $parentId)")
+            return
+        }
+
+        // Store teleport marker IDs
+        teleportMarkers[parentId] = Pair(startId, endId)
+
+        // Create container for teleported content
+        val container = FrameLayout(context).apply {
+            id = View.generateViewId()
+            setBackgroundColor(android.graphics.Color.TRANSPARENT)
+            isClickable = true
+            isFocusable = false
+        }
+
+        if (parentView is ViewGroup) {
+            parentView.addView(container)
+            teleportContainers[parentId] = container
+        }
+
+        Log.d(TAG, "Created teleport container for parent $parentId")
+    }
+
+    private fun handleRemoveTeleport(args: JSONArray) {
+        val parentId = args.getInt(0)
+
+        // Remove teleport container
+        teleportContainers.remove(parentId)?.let { container ->
+            mainHandler.post {
+                (container.parent as? ViewGroup)?.removeView(container)
+            }
+        }
+
+        // Clean up markers
+        teleportMarkers.remove(parentId)
+
+        Log.d(TAG, "Removed teleport container for parent $parentId")
+    }
+
+    private fun handleTeleportTo(args: JSONArray) {
+        val target = args.getString(0)
+        val nodeId = args.getInt(1)
+
+        val targetView = getTeleportTarget(target) ?: run {
+            Log.w(TAG, "Teleport target '$target' not found")
+            return
+        }
+
+        val childView = nodeViews[nodeId] ?: run {
+            Log.w(TAG, "Node view not found for teleport (id: $nodeId)")
+            return
+        }
+
+        // Move view to teleport target
+        mainHandler.post {
+            (childView.parent as? ViewGroup)?.removeView(childView)
+            targetView.addView(childView)
+            childView.requestLayout()
+        }
+
+        Log.d(TAG, "Teleported node $nodeId to target '$target'")
+    }
+
+    private fun getTeleportTarget(target: String): ViewGroup? {
+        return when (target) {
+            "root" -> rootView as? ViewGroup
+            "modal" -> {
+                // Ensure modal container is added to root if not already
+                if (modalContainer.parent == null && rootView != null) {
+                    (rootView as? ViewGroup)?.addView(modalContainer)
+                }
+                modalContainer
+            }
+            else -> null
+        }
     }
 
     private fun handleAddEventListener(args: JSONArray) {