elit 3.6.9 → 3.7.0

package/dist/native.js

@@ -7971,8 +7971,12 @@ ${varDeclarations}
     }
     return args.join(", ");
   }
-  function buildComposeChunkedTrackModifier(baseModifier, row) {
+  function buildComposeChunkedTrackModifier(baseModifier, row, options = {}) {
+    const fillWidth = options.fillWidth ?? true;
     let modifier = baseModifier;
+    if (row.trackWeight !== void 0) {
+      modifier = appendComposeModifierCall(modifier, `weight(${formatFloat(row.trackWeight)}f, fill = true)`);
+    }
     if (row.height !== void 0) {
       modifier = appendComposeModifierCall(modifier, `height(${formatFloat(row.height)}.dp)`);
     } else if (row.minHeight !== void 0 || row.maxHeight !== void 0) {
@@ -7985,7 +7989,7 @@ ${varDeclarations}
       }
       modifier = appendComposeModifierCall(modifier, `heightIn(${heightInArgs.join(", ")})`);
     }
-    return row.trackWeight !== void 0 ? appendComposeModifierCall(modifier, `weight(${formatFloat(row.trackWeight)}f, fill = true)`) : modifier;
+    return fillWidth ? appendComposeModifierCall(modifier, "fillMaxWidth()") : modifier;
   }
   function buildComposeChunkedColumnArrangement(layout) {
     const contentAlignment = resolveEffectiveChunkedContentAlignment(layout);
@@ -9734,7 +9738,7 @@ ${varDeclarations}
     const usesSingleRowGridStackAlignment = layout.kind === "grid" && layout.rows.length === 1 && effectiveContentAlignment !== void 0 && effectiveContentAlignment !== "start";
     if (layout.kind === "grid" && layout.rows.length === 1 && !usesSingleRowGridStackAlignment) {
       const [row] = layout.rows;
-      const lines2 = [`${indent4(level)}Row(${buildComposeChunkedRowArguments(style, buildComposeChunkedTrackModifier(modifier, row), layout.columnGap, context.styleResolveOptions)}) {`];
+      const lines2 = [`${indent4(level)}Row(${buildComposeChunkedRowArguments(style, buildComposeChunkedTrackModifier(modifier, row, { fillWidth: false }), layout.columnGap, context.styleResolveOptions)}) {`];
       const totalWeight = row.weights ? row.weights.reduce((sum, entry) => sum + (entry ?? 0), 0) : void 0;
       row.items.forEach((child, index) => {
         const weight = row.weights?.[index];
@@ -9766,7 +9770,7 @@ ${varDeclarations}
     const lines = [`${indent4(level)}Column(modifier = ${modifier}${outerGap ? `, verticalArrangement = ${outerGap}` : ""}) {`];
     for (const row of layout.rows) {
       const totalWeight = row.weights ? row.weights.reduce((sum, entry) => sum + (entry ?? 0), 0) : void 0;
-      lines.push(`${indent4(level + 1)}Row(${buildComposeChunkedRowArguments(style, buildComposeChunkedTrackModifier("Modifier.fillMaxWidth()", row), layout.columnGap, context.styleResolveOptions)}) {`);
+      lines.push(`${indent4(level + 1)}Row(${buildComposeChunkedRowArguments(style, buildComposeChunkedTrackModifier("Modifier", row), layout.columnGap, context.styleResolveOptions)}) {`);
       row.items.forEach((child, index) => {
         const weight = row.weights?.[index];
         const columnSize = row.columnSizes?.[index];
@@ -10204,7 +10208,7 @@ ${varDeclarations}
     }
     const lines = [
       ...baseLines,
-      `${indent7(level)}Box {`,
+      `${indent7(level)}Box(modifier = Modifier.matchParentSize()) {`,
       ...renderComposeContainerBody(flowNode, level + 1, context, modifier, hints, renderComposeNode)
     ];
     absoluteChildren.forEach((child) => {
@@ -10221,6 +10225,18 @@ ${varDeclarations}
     lines.push(`${indent7(level)}}`);
     return lines;
   }
+  function renderComposeUnsupportedFallback(node, level, context, modifier, baseLines, label) {
+    context.helperFlags.add("unsupportedPlaceholder");
+    const sourceTag = node.sourceTag ?? node.component.toLowerCase();
+    const args = [`label = ${quoteKotlinString(label)}`, `sourceTag = ${quoteKotlinString(sourceTag)}`];
+    if (modifier !== "Modifier") {
+      args.push(`modifier = ${modifier}`);
+    }
+    return [
+      ...baseLines,
+      `${indent7(level)}ElitUnsupported(${args.join(", ")})`
+    ];
+  }
   function renderComposeNode(node, level, context, hints = {}) {
     if (node.kind === "text") {
       return renderTextComposable(node, level, context);
@@ -10293,8 +10309,11 @@ ${varDeclarations}
       ];
     }
     if (node.component === "WebView") {
+      const source = resolveNativeSurfaceSource(node);
+      if (!source) {
+        return renderComposeUnsupportedFallback(node, level, context, modifier, baseLines, "WebView");
+      }
       context.helperFlags.add("webViewSurface");
-      const source = resolveNativeSurfaceSource(node) ?? "";
       const label2 = resolveNativeAccessibilityLabel(node) ?? "Web content";
       return [
         ...baseLines,
@@ -10302,8 +10321,11 @@ ${varDeclarations}
       ];
     }
     if (node.component === "Media") {
+      const source = resolveNativeSurfaceSource(node);
+      if (!source) {
+        return renderComposeUnsupportedFallback(node, level, context, modifier, baseLines, "Media");
+      }
       context.helperFlags.add("mediaSurface");
-      const source = resolveNativeSurfaceSource(node) ?? "";
       const label2 = resolveNativeMediaLabel(node);
       const style = getStyleObject(node, context.resolvedStyles, context.styleResolveOptions);
       const objectFit = resolveNativeObjectFitStyle(style);
@@ -10320,19 +10342,44 @@ ${varDeclarations}
       const poster = resolveNativeVideoPoster(node);
       const controls = shouldNativeShowVideoControls(node);
       const playsInline = shouldNativePlayInline(node);
+      const videoArgs = [
+        `source = ${quoteKotlinString(source)}`,
+        `label = ${quoteKotlinString(label2)}`,
+        `autoPlay = ${autoPlay ? "true" : "false"}`,
+        `loop = ${loop ? "true" : "false"}`,
+        `muted = ${muted ? "true" : "false"}`,
+        `controls = ${controls ? "true" : "false"}`,
+        `poster = ${poster ? quoteKotlinString(poster) : "null"}`,
+        `playsInline = ${playsInline ? "true" : "false"}`
+      ];
+      if (objectFit !== "cover") {
+        videoArgs.push(`posterFit = ${quoteKotlinString(objectFit)}`);
+      }
+      if (objectPosition !== "center") {
+        videoArgs.push(`posterPosition = ${quoteKotlinString(objectPosition)}`);
+      }
+      videoArgs.push(`modifier = ${modifier}`);
       return [
         ...baseLines,
-        `${indent7(level)}ElitVideoSurface(source = ${quoteKotlinString(source)}, label = ${quoteKotlinString(label2)}, autoPlay = ${autoPlay ? "true" : "false"}, loop = ${loop ? "true" : "false"}, muted = ${muted ? "true" : "false"}, controls = ${controls ? "true" : "false"}, playsInline = ${playsInline ? "true" : "false"}${poster ? `, poster = ${quoteKotlinString(poster)}` : ""}${objectFit !== "cover" ? `, posterFit = ${quoteKotlinString(objectFit)}` : ""}${objectPosition !== "center" ? `, posterPosition = ${quoteKotlinString(objectPosition)}` : ""}, modifier = ${modifier})`
+        `${indent7(level)}ElitVideoSurface(${videoArgs.join(", ")})`
       ];
     }
+    if (node.component === "Math") {
+      return renderComposeUnsupportedFallback(node, level, context, modifier, baseLines, "Math");
+    }
     if (node.component === "Cell") {
       const style = getStyleObject(node, context.resolvedStyles, context.styleResolveOptions);
+      const hasExplicitWidth = hasExplicitNativeWidthStyle(style);
       const cellHints = {
         ...hints,
-        ...!hasExplicitNativeWidthStyle(style) ? { fillWidth: true } : {},
+        ...!hasExplicitWidth ? { fillWidth: true } : {},
         ...!hasExplicitNativeHeightStyle(style) && hints.fillHeight ? { fillHeight: true } : {}
       };
-      return renderComposeContainerNode(node, level, context, cellHints, modifier, baseLines);
+      let cellModifier = modifier;
+      if (hints.parentFlexLayout === "Row" && !hasExplicitWidth) {
+        cellModifier = cellModifier === "Modifier" ? "Modifier.weight(1f, fill = true)" : cellModifier.replace(/^Modifier\./, "Modifier.weight(1f, fill = true).");
+      }
+      return renderComposeContainerNode(node, level, context, cellHints, cellModifier, baseLines);
     }
     if (node.children.length > 0 || node.component === "Screen") {
       return renderComposeContainerNode(node, level, context, hints, modifier, baseLines);
@@ -10349,11 +10396,13 @@ ${varDeclarations}
     if (context.helperFlags.has("bridge")) {
       helpers.push("");
       helpers.push("private object ElitNativeBridge {");
+      helpers.push("    var onAction: ((String, String?, String?) -> Unit)? = null");
+      helpers.push("    var onNavigate: ((String) -> Unit)? = null");
       helpers.push("    fun dispatch(action: String? = null, route: String? = null, payloadJson: String? = null) {");
       helpers.push('        android.util.Log.d("ElitNativeBridge", listOfNotNull(action, route, payloadJson).joinToString(" | "))');
       helpers.push("    }");
       helpers.push("");
-      helpers.push("    fun controlEventPayload(event: String, sourceTag: String, inputType: String? = null, value: String? = null, values: List<String>? = null, checked: Boolean? = null, detailJson: String? = null): String {");
+      helpers.push("    fun controlEventPayload(event: String, sourceTag: String, inputType: String? = null, value: String? = null, values: Iterable<String>? = null, checked: Boolean? = null, detailJson: String? = null): String {");
       helpers.push("        val parts = mutableListOf<String>()");
       helpers.push('        parts += ""event":"$event""');
       helpers.push('        parts += ""sourceTag":"$sourceTag""');
@@ -10377,33 +10426,50 @@ ${varDeclarations}
       helpers.push("}");
     }
     if (context.helperFlags.has("backgroundImage") || context.helperFlags.has("imagePlaceholder")) {
+      helpers.push("");
+      helpers.push("private fun elitLoadBackgroundBitmap(view: android.widget.ImageView, source: String, repeatMode: String, backgroundSize: String, backgroundPosition: String) {");
+      helpers.push("    if (source.isBlank()) return");
+      helpers.push('    val tileModeX = if (repeatMode == "repeat-y") android.graphics.Shader.TileMode.CLAMP else android.graphics.Shader.TileMode.REPEAT');
+      helpers.push('    val tileModeY = if (repeatMode == "repeat-x") android.graphics.Shader.TileMode.CLAMP else android.graphics.Shader.TileMode.REPEAT');
+      helpers.push("    view.scaleType = android.widget.ImageView.ScaleType.CENTER_CROP");
+      helpers.push('    if (repeatMode == "no-repeat" || repeatMode == "round") {');
+      helpers.push("        view.setImageURI(android.net.Uri.parse(source))");
+      helpers.push("    } else {");
+      helpers.push("        val bitmap = android.graphics.BitmapFactory.decodeStream(android.net.Uri.parse(source).let { runCatching { view.context.contentResolver.openInputStream(it) }.getOrNull() })");
+      helpers.push("        if (bitmap != null) view.setImageDrawable(android.graphics.drawable.BitmapDrawable(view.resources, bitmap).apply { tileModeX = tileModeX; tileModeY = tileModeY })");
+      helpers.push("    }");
+      helpers.push("}");
       helpers.push("");
       helpers.push("@Composable");
       helpers.push('private fun ElitBackgroundImage(source: String, backgroundSize: String = "cover", backgroundPosition: String = "center", backgroundRepeat: String = "no-repeat", modifier: Modifier = Modifier) {');
       helpers.push("    androidx.compose.ui.viewinterop.AndroidView(");
       helpers.push("        factory = { context -> android.widget.ImageView(context).apply {");
-      helpers.push("            scaleType = android.widget.ImageView.ScaleType.CENTER_CROP");
-      helpers.push("            if (source.isNotBlank()) setImageURI(android.net.Uri.parse(source))");
+      helpers.push("            elitLoadBackgroundBitmap(this, source, backgroundRepeat, backgroundSize, backgroundPosition)");
       helpers.push("        } },");
       helpers.push("        modifier = modifier,");
       helpers.push("    )");
       helpers.push("}");
       helpers.push("");
       helpers.push("@Composable");
-      helpers.push('private fun ElitImageSurface(source: String, label: String, alt: String? = null, modifier: Modifier = Modifier, objectFit: String = "cover", objectPosition: String = "center") {');
+      helpers.push('private fun ElitImageSurface(source: String, label: String, contentDescription: String?, objectFit: String = "cover", objectPosition: String = "center", modifier: Modifier = Modifier) {');
       helpers.push("    if (source.isBlank()) {");
       helpers.push("        Box(modifier = modifier, contentAlignment = Alignment.Center) {");
-      helpers.push("            Text(text = alt ?: label)");
+      helpers.push("            Text(text = contentDescription ?: label)");
       helpers.push("        }");
       helpers.push("        return");
       helpers.push("    }");
-      helpers.push("    ElitBackgroundImage(source = source, backgroundSize = objectFit, backgroundPosition = objectPosition, modifier = modifier)");
+      helpers.push("    androidx.compose.ui.viewinterop.AndroidView(");
+      helpers.push("        factory = { context -> android.widget.ImageView(context).apply {");
+      helpers.push('            elitLoadBackgroundBitmap(this, source, "no-repeat", objectFit, objectPosition)');
+      helpers.push("        } },");
+      helpers.push("        modifier = modifier,");
+      helpers.push("    )");
       helpers.push("}");
     }
     if (context.helperFlags.has("webViewSurface")) {
       helpers.push("");
       helpers.push("@Composable");
-      helpers.push("private fun ElitWebViewSurface(source: String, label: String, modifier: Modifier = Modifier) {");
+      helpers.push("private fun ElitWebViewSurface(source: String, label: String?, modifier: Modifier = Modifier) {");
       helpers.push("    androidx.compose.ui.viewinterop.AndroidView(");
       helpers.push("        factory = { context -> android.webkit.WebView(context).apply {");
       helpers.push("            contentDescription = label");
@@ -10415,18 +10481,58 @@ ${varDeclarations}
       helpers.push("}");
     }
     if (context.helperFlags.has("mediaSurface")) {
+      helpers.push("");
+      helpers.push("private fun elitVideoPosterScaleType(posterFit: String, posterPosition: String): android.widget.ImageView.ScaleType = when (posterFit.trim().lowercase()) {");
+      helpers.push('    "contain", "scale-down" -> when (posterPosition.trim().lowercase()) {');
+      helpers.push('        "top", "leading", "top-leading", "bottom-leading" -> android.widget.ImageView.ScaleType.FIT_START');
+      helpers.push('        "bottom", "trailing", "bottom-trailing" -> android.widget.ImageView.ScaleType.FIT_END');
+      helpers.push("        else -> android.widget.ImageView.ScaleType.FIT_CENTER");
+      helpers.push("    }");
+      helpers.push("    else -> android.widget.ImageView.ScaleType.CENTER_CROP");
+      helpers.push("}");
       helpers.push("");
       helpers.push("@Composable");
-      helpers.push('private fun ElitVideoSurface(source: String, label: String, autoPlay: Boolean, loop: Boolean, muted: Boolean, controls: Boolean, playsInline: Boolean, poster: String? = null, posterFit: String = "cover", posterPosition: String = "center", modifier: Modifier = Modifier) {');
+      helpers.push('private fun ElitVideoSurface(source: String, label: String, autoPlay: Boolean, loop: Boolean, muted: Boolean, controls: Boolean, poster: String?, playsInline: Boolean, posterFit: String = "cover", posterPosition: String = "center", modifier: Modifier = Modifier) {');
+      helpers.push("    // Android VideoView already renders inline; playsInline is retained for parity with iOS generation.");
       helpers.push("    Box(modifier = modifier, contentAlignment = Alignment.Center) {");
-      helpers.push('        Text(text = if (autoPlay) "Playing $label" else label)');
+      helpers.push("        androidx.compose.ui.viewinterop.AndroidView(");
+      helpers.push("            factory = { context ->");
+      helpers.push("                android.widget.ImageView(context).apply {");
+      helpers.push("                    val posterView = this");
+      helpers.push("                    posterView.contentDescription = label");
+      helpers.push("                    posterView.scaleType = elitVideoPosterScaleType(posterFit, posterPosition)");
+      helpers.push("                    if (poster != null) posterView.setImageURI(android.net.Uri.parse(poster))");
+      helpers.push("                }");
+      helpers.push("            },");
+      helpers.push("        )");
+      helpers.push("        if (controls) {");
+      helpers.push("            // Hand off to platform chrome; ElitVideoSurface exposes controls for parity only.");
+      helpers.push("        }");
       helpers.push("    }");
       helpers.push("}");
       helpers.push("");
       helpers.push("@Composable");
       helpers.push("private fun ElitAudioSurface(source: String, label: String, autoPlay: Boolean, loop: Boolean, muted: Boolean, modifier: Modifier = Modifier) {");
-      helpers.push("    Button(onClick = {}, modifier = modifier) {");
-      helpers.push("        Text(text = label)");
+      helpers.push("    androidx.compose.ui.viewinterop.AndroidView(");
+      helpers.push("        factory = { context ->");
+      helpers.push("            android.media.MediaPlayer().apply {");
+      helpers.push("                val mediaPlayer = this");
+      helpers.push("                mediaPlayer.isLooping = loop");
+      helpers.push("                mediaPlayer.setVolume(if (muted) 0f else 1f, if (muted) 0f else 1f)");
+      helpers.push("                if (source.isNotBlank()) setDataSource(source)");
+      helpers.push("                if (autoPlay) start()");
+      helpers.push("            }");
+      helpers.push("        },");
+      helpers.push("        modifier = modifier,");
+      helpers.push("    )");
+      helpers.push("}");
+    }
+    if (context.helperFlags.has("unsupportedPlaceholder")) {
+      helpers.push("");
+      helpers.push("@Composable");
+      helpers.push("private fun ElitUnsupported(label: String, sourceTag: String, modifier: Modifier = Modifier) {");
+      helpers.push("    Box(modifier = modifier, contentAlignment = Alignment.Center) {");
+      helpers.push('        Text(text = "$label ($sourceTag)")');
       helpers.push("    }");
       helpers.push("}");
     }
@@ -10457,11 +10563,27 @@ ${varDeclarations}
       resolvedStyles: styleData.resolvedStyles,
       styleContexts: styleData.styleContexts
     };
-    const bodyLines = tree.roots.length === 1 ? renderComposeNode(tree.roots[0], 1, context, { availableWidth: styleResolveOptions.viewportWidth, availableHeight: styleResolveOptions.viewportHeight }) : [
-      "    Column(modifier = Modifier.fillMaxSize()) {",
-      ...renderComposeChildren(tree.roots, 2, context, renderComposeNode, "Column", void 0, { availableWidth: styleResolveOptions.viewportWidth, availableHeight: styleResolveOptions.viewportHeight }),
-      "    }"
-    ];
+    const singleRoot = tree.roots.length === 1 ? tree.roots[0] : null;
+    const isSingleScreenRoot = singleRoot !== null && singleRoot.kind === "element" && singleRoot.component === "Screen";
+    if (isSingleScreenRoot) {
+      context.helperFlags.add("screenRoot");
+    }
+    let bodyLines;
+    if (isSingleScreenRoot) {
+      bodyLines = [
+        "    Column(modifier = Modifier.fillMaxSize().verticalScroll(rememberScrollState())) {",
+        ...renderComposeNode(tree.roots[0], 2, context, { availableWidth: styleResolveOptions.viewportWidth, availableHeight: styleResolveOptions.viewportHeight }),
+        "    }"
+      ];
+    } else if (tree.roots.length === 1) {
+      bodyLines = renderComposeNode(tree.roots[0], 1, context, { availableWidth: styleResolveOptions.viewportWidth, availableHeight: styleResolveOptions.viewportHeight });
+    } else {
+      bodyLines = [
+        "    Column(modifier = Modifier.fillMaxSize()) {",
+        ...renderComposeChildren(tree.roots, 2, context, renderComposeNode, "Column", void 0, { availableWidth: styleResolveOptions.viewportWidth, availableHeight: styleResolveOptions.viewportHeight }),
+        "    }"
+      ];
+    }
     const lines = [];
     if (resolvedOptions.includePackage) {
       lines.push(`package ${resolvedOptions.packageName}`);
@@ -11361,6 +11483,18 @@ ${varDeclarations}
     ];
     return [...baseLines, ...appendSwiftUIOverlays(contentLines, overlays, level)];
   }
+  function renderSwiftUnsupportedFallback(node, level, context, baseLines, modifiers, label) {
+    context.helperFlags.add("unsupportedPlaceholder");
+    const sourceTag = node.sourceTag ?? node.component.toLowerCase();
+    return appendSwiftUIModifiers(
+      [
+        ...baseLines,
+        `${indent11(level)}elitUnsupportedPlaceholder(label: ${quoteSwiftString(label)}, sourceTag: ${quoteSwiftString(sourceTag)})`
+      ],
+      modifiers,
+      level
+    );
+  }
   function renderSwiftUINode(node, level, context, hints = {}) {
     if (node.kind === "text") {
       return renderTextView(node, level, context);
@@ -11394,10 +11528,21 @@ ${varDeclarations}
       const imageStyle = getStyleObject(node, context.resolvedStyles, context.styleResolveOptions);
       const objectFit = resolveNativeObjectFitStyle(imageStyle);
       const objectPosition = resolveNativeObjectPositionStyle(imageStyle);
+      const imageArgs = [
+        `source: ${quoteSwiftString(source)}`,
+        `label: ${quoteSwiftString(fallbackLabel)}`,
+        `alt: ${alt ? quoteSwiftString(alt) : "nil"}`
+      ];
+      if (objectFit !== "cover") {
+        imageArgs.push(`objectFit: ${quoteSwiftString(objectFit)}`);
+      }
+      if (objectPosition !== "center") {
+        imageArgs.push(`objectPosition: ${quoteSwiftString(objectPosition)}`);
+      }
       return appendSwiftUIModifiers(
         [
           ...baseLines,
-          `${indent11(level)}elitImageSurface(source: ${quoteSwiftString(source)}, label: ${quoteSwiftString(fallbackLabel)}, alt: ${alt ? quoteSwiftString(alt) : "nil"}, objectFit: ${quoteSwiftString(objectFit)}, objectPosition: ${quoteSwiftString(objectPosition)})`
+          `${indent11(level)}elitImageSurface(${imageArgs.join(", ")})`
         ],
         modifiers,
         level
@@ -11432,33 +11577,38 @@ ${varDeclarations}
       return [...baseLines, ...appendSwiftUIModifiers(canvas.lines, canvas.modifiers, level)];
     }
     if (node.component === "WebView") {
+      const source = resolveNativeSurfaceSource(node);
+      if (!source) {
+        return renderSwiftUnsupportedFallback(node, level, context, baseLines, modifiers, "WebView");
+      }
       context.helperFlags.add("webViewSurface");
-      const source = resolveNativeSurfaceSource(node) ?? "";
       const label2 = resolveNativeAccessibilityLabel(node) ?? "Web content";
       return appendSwiftUIModifiers(
         [
           ...baseLines,
-          `${indent11(level)}elitWebViewSurface(source: ${quoteSwiftString(source)}, label: ${quoteSwiftString(label2)})`
+          `${indent11(level)}ElitWebViewSurface(source: ${quoteSwiftString(source)}, label: ${quoteSwiftString(label2)})`
         ],
         modifiers,
         level
       );
     }
     if (node.component === "Media") {
+      const source = resolveNativeSurfaceSource(node);
+      if (!source) {
+        return renderSwiftUnsupportedFallback(node, level, context, baseLines, modifiers, "Media");
+      }
       context.helperFlags.add("mediaSurface");
-      const source = resolveNativeSurfaceSource(node) ?? "";
       const label2 = resolveNativeMediaLabel(node);
       const style = getStyleObject(node, context.resolvedStyles, context.styleResolveOptions);
       const objectFit = resolveNativeObjectFitStyle(style);
       const objectPosition = resolveNativeObjectPositionStyle(style);
       const autoPlay = toNativeBoolean(node.props.autoPlay ?? node.props.autoplay);
-      const loop = toNativeBoolean(node.props.loop);
       const muted = isNativeMuted(node);
       if (node.sourceTag === "audio") {
         return appendSwiftUIModifiers(
           [
             ...baseLines,
-            `${indent11(level)}ElitAudioSurface(source: ${quoteSwiftString(source)}, label: ${quoteSwiftString(label2)}, autoPlay: ${autoPlay ? "true" : "false"}, loop: ${loop ? "true" : "false"}, muted: ${muted ? "true" : "false"})`
+            `${indent11(level)}ElitAudioSurface(source: ${quoteSwiftString(source)}, label: ${quoteSwiftString(label2)}, autoPlay: ${autoPlay ? "true" : "false"}, muted: ${muted ? "true" : "false"})`
           ],
           modifiers,
           level
@@ -11467,15 +11617,33 @@ ${varDeclarations}
       const poster = resolveNativeVideoPoster(node);
       const controls = shouldNativeShowVideoControls(node);
       const playsInline = shouldNativePlayInline(node);
+      const videoArgs = [
+        `source: ${quoteSwiftString(source)}`,
+        `label: ${quoteSwiftString(label2)}`,
+        `autoPlay: ${autoPlay ? "true" : "false"}`,
+        `muted: ${muted ? "true" : "false"}`,
+        `controls: ${controls ? "true" : "false"}`,
+        `poster: ${poster ? quoteSwiftString(poster) : "nil"}`,
+        `playsInline: ${playsInline ? "true" : "false"}`
+      ];
+      if (objectFit !== "cover") {
+        videoArgs.push(`posterFit: ${quoteSwiftString(objectFit)}`);
+      }
+      if (objectPosition !== "center") {
+        videoArgs.push(`posterPosition: ${quoteSwiftString(objectPosition)}`);
+      }
       return appendSwiftUIModifiers(
         [
           ...baseLines,
-          `${indent11(level)}ElitVideoSurface(source: ${quoteSwiftString(source)}, label: ${quoteSwiftString(label2)}, autoPlay: ${autoPlay ? "true" : "false"}, loop: ${loop ? "true" : "false"}, muted: ${muted ? "true" : "false"}, controls: ${controls ? "true" : "false"}, playsInline: ${playsInline ? "true" : "false"}${poster ? `, poster: ${quoteSwiftString(poster)}` : ""}, posterFit: ${quoteSwiftString(objectFit)}, posterPosition: ${quoteSwiftString(objectPosition)})`
+          `${indent11(level)}ElitVideoSurface(${videoArgs.join(", ")})`
         ],
         modifiers,
         level
       );
     }
+    if (node.component === "Math") {
+      return renderSwiftUnsupportedFallback(node, level, context, baseLines, modifiers, "Math");
+    }
     if (node.component === "Cell") {
       const style = getStyleObject(node, context.resolvedStyles, context.styleResolveOptions);
       const cellHints = {
@@ -11501,6 +11669,8 @@ ${varDeclarations}
     if (context.helperFlags.has("bridge")) {
       helpers.push("");
       helpers.push("private enum ElitNativeBridge {");
+      helpers.push("    static var onAction: ((String, String?, String?) -> Void)?");
+      helpers.push("    static var onNavigate: ((String) -> Void)?");
       helpers.push("    static func dispatch(action: String? = nil, route: String? = nil, payloadJson: String? = nil) {");
       helpers.push('        print("ElitNativeBridge", action ?? "", route ?? "", payloadJson ?? "")');
       helpers.push("    }");
@@ -11525,6 +11695,13 @@ ${varDeclarations}
       helpers.push("}");
     }
     if (context.helperFlags.has("backgroundImage") || context.helperFlags.has("imagePlaceholder")) {
+      helpers.push("");
+      helpers.push("@ViewBuilder");
+      helpers.push('private func elitBackgroundImage(_ image: Image, backgroundSize: String = "cover", backgroundPosition: String = "center", backgroundRepeat: String = "no-repeat") -> some View {');
+      helpers.push("    image");
+      helpers.push("        .resizable()");
+      helpers.push("        .scaledToFill()");
+      helpers.push("}");
       helpers.push("");
       helpers.push("@ViewBuilder");
       helpers.push('private func elitBackgroundImageSurface(source: String, objectFit: String = "cover", objectPosition: String = "center") -> some View {');
@@ -11532,9 +11709,7 @@ ${varDeclarations}
       helpers.push("        AsyncImage(url: url) { phase in");
       helpers.push("            switch phase {");
       helpers.push("            case .success(let image):");
-      helpers.push("                image");
-      helpers.push("                    .resizable()");
-      helpers.push("                    .scaledToFill()");
+      helpers.push('                elitBackgroundImage(image, backgroundSize: objectFit, backgroundPosition: objectPosition, backgroundRepeat: "no-repeat")');
       helpers.push("            default:");
       helpers.push("                Color.clear");
       helpers.push("            }");
@@ -11545,7 +11720,7 @@ ${varDeclarations}
       helpers.push("}");
       helpers.push("");
       helpers.push("@ViewBuilder");
-      helpers.push('private func elitImageSurface(source: String, label: String, alt: String? = nil, objectFit: String = "cover", objectPosition: String = "center") -> some View {');
+      helpers.push('private func elitImageSurface(source: String, label: String, alt: String?, objectFit: String = "cover", objectPosition: String = "center") -> some View {');
       helpers.push("    if source.isEmpty {");
       helpers.push("        Text(alt ?? label)");
       helpers.push("            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)");
@@ -11556,31 +11731,131 @@ ${varDeclarations}
     }
     if (context.helperFlags.has("webViewSurface")) {
       helpers.push("");
-      helpers.push("@ViewBuilder");
-      helpers.push("private func elitWebViewSurface(source: String, label: String) -> some View {");
-      helpers.push("    VStack(alignment: .leading, spacing: 8) {");
-      helpers.push("        Text(label)");
-      helpers.push("        Text(source)");
-      helpers.push("            .font(.caption)");
-      helpers.push("            .foregroundStyle(.secondary)");
+      helpers.push("struct ElitWebViewSurface: UIViewRepresentable {");
+      helpers.push("    let source: String");
+      helpers.push("    let label: String?");
+      helpers.push("");
+      helpers.push("    func makeUIView(context: Context) -> WKWebView {");
+      helpers.push("        let webView = WKWebView()");
+      helpers.push("        webView.accessibilityLabel = label");
+      helpers.push("        if let url = URL(string: source), !source.isEmpty { webView.load(URLRequest(url: url)) }");
+      helpers.push("        return webView");
       helpers.push("    }");
+      helpers.push("");
+      helpers.push("    func updateUIView(_ uiView: WKWebView, context: Context) {}");
       helpers.push("}");
     }
     if (context.helperFlags.has("mediaSurface")) {
+      helpers.push("");
+      helpers.push("private func elitPosterAlignment(_ posterPosition: String) -> Alignment {");
+      helpers.push("    switch posterPosition.lowercased() {");
+      helpers.push('    case "top", "leading", "top-leading":');
+      helpers.push("        return .topLeading");
+      helpers.push('    case "bottom", "trailing", "bottom-trailing":');
+      helpers.push("        return .bottomTrailing");
+      helpers.push('    case "center":');
+      helpers.push("        return .center");
+      helpers.push("    default:");
+      helpers.push("        return .center");
+      helpers.push("    }");
+      helpers.push("}");
       helpers.push("");
       helpers.push("@ViewBuilder");
-      helpers.push('private func ElitVideoSurface(source: String, label: String, autoPlay: Bool, loop: Bool, muted: Bool, controls: Bool, playsInline: Bool, poster: String? = nil, posterFit: String = "cover", posterPosition: String = "center") -> some View {');
-      helpers.push("    VStack(alignment: .leading, spacing: 8) {");
-      helpers.push("        if let poster, !poster.isEmpty {");
-      helpers.push("            elitBackgroundImageSurface(source: poster, objectFit: posterFit, objectPosition: posterPosition)");
+      helpers.push("private func elitPosterImage(_ image: Image, posterFit: String, posterPosition: String) -> some View {");
+      helpers.push("    let resizable = image.resizable()");
+      helpers.push("    switch posterFit.lowercased() {");
+      helpers.push('    case "contain":');
+      helpers.push("        return AnyView(resizable.scaledToFit().frame(maxWidth: .infinity, maxHeight: .infinity, alignment: elitPosterAlignment(posterPosition)))");
+      helpers.push('    case "fill", "cover":');
+      helpers.push("        return AnyView(resizable.scaledToFill().frame(maxWidth: .infinity, maxHeight: .infinity, alignment: elitPosterAlignment(posterPosition)))");
+      helpers.push("    default:");
+      helpers.push("        return AnyView(resizable.scaledToFill())");
+      helpers.push("    }");
+      helpers.push("}");
+      helpers.push("");
+      helpers.push("struct ElitVideoPlayerController: UIViewControllerRepresentable {");
+      helpers.push("    let source: String");
+      helpers.push("    let autoPlay: Bool");
+      helpers.push("    let muted: Bool");
+      helpers.push("    let controls: Bool");
+      helpers.push("    let playsInline: Bool");
+      helpers.push("");
+      helpers.push("    func makeUIViewController(context: Context) -> AVPlayerViewController {");
+      helpers.push("        let controller = AVPlayerViewController()");
+      helpers.push("        if let url = URL(string: source) {");
+      helpers.push("            let player = AVPlayer(url: url)");
+      helpers.push("            let resolvedPlayer = player");
+      helpers.push("            resolvedPlayer.isMuted = muted");
+      helpers.push("            controller.player = resolvedPlayer");
+      helpers.push("            if autoPlay { resolvedPlayer.play() }");
       helpers.push("        }");
-      helpers.push("        Text(label)");
+      helpers.push("        controller.showsPlaybackControls = controls");
+      helpers.push("        controller.entersFullScreenWhenPlaybackBegins = !playsInline");
+      helpers.push("        return controller");
       helpers.push("    }");
+      helpers.push("");
+      helpers.push("    func updateUIViewController(_ controller: AVPlayerViewController, context: Context) {}");
       helpers.push("}");
+      helpers.push("");
+      helpers.push("struct ElitVideoSurface: View {");
+      helpers.push("    let source: String");
+      helpers.push("    let label: String");
+      helpers.push("    let autoPlay: Bool");
+      helpers.push("    let muted: Bool");
+      helpers.push("    let controls: Bool");
+      helpers.push("    let poster: String?");
+      helpers.push("    let playsInline: Bool");
+      helpers.push("    let posterFit: String");
+      helpers.push("    let posterPosition: String");
+      helpers.push("");
+      helpers.push("    var body: some View {");
+      helpers.push("        ZStack {");
+      helpers.push("            if let poster, !poster.isEmpty, let posterURL = URL(string: poster) {");
+      helpers.push("                AsyncImage(url: posterURL) { phase in");
+      helpers.push("                    switch phase {");
+      helpers.push("                    case .success(let image):");
+      helpers.push("                        elitPosterImage(image, posterFit: posterFit, posterPosition: posterPosition)");
+      helpers.push("                    default:");
+      helpers.push("                        Color.clear");
+      helpers.push("                    }");
+      helpers.push("                }");
+      helpers.push("            }");
+      helpers.push("            ElitVideoPlayerController(source: source, autoPlay: autoPlay, muted: muted, controls: controls, playsInline: playsInline)");
+      helpers.push("                .accessibilityLabel(label)");
+      helpers.push("        }");
+      helpers.push("    }");
+      helpers.push("}");
+      helpers.push("");
+      helpers.push("struct ElitAudioSurface: View {");
+      helpers.push("    let source: String");
+      helpers.push("    let label: String");
+      helpers.push("    let autoPlay: Bool");
+      helpers.push("    let muted: Bool");
+      helpers.push("");
+      helpers.push("    var body: some View {");
+      helpers.push("        VStack {");
+      helpers.push("            if let url = URL(string: source), !source.isEmpty {");
+      helpers.push("                AVPlayer(url: url).let { resolvedPlayer in");
+      helpers.push("                    resolvedPlayer.isMuted = muted");
+      helpers.push("                    if autoPlay { resolvedPlayer.play() }");
+      helpers.push("                }");
+      helpers.push("            }");
+      helpers.push('            Label(label, systemImage: "waveform")');
+      helpers.push("                .accessibilityLabel(label)");
+      helpers.push("        }");
+      helpers.push("    }");
+      helpers.push("}");
+    }
+    if (context.helperFlags.has("unsupportedPlaceholder")) {
       helpers.push("");
       helpers.push("@ViewBuilder");
-      helpers.push("private func ElitAudioSurface(source: String, label: String, autoPlay: Bool, loop: Bool, muted: Bool) -> some View {");
-      helpers.push('    Label(label, systemImage: "waveform")');
+      helpers.push("private func elitUnsupportedPlaceholder(label: String, sourceTag: String) -> some View {");
+      helpers.push("    VStack(spacing: 8) {");
+      helpers.push("        Text(label)");
+      helpers.push("        Text(sourceTag)");
+      helpers.push("            .font(.caption)");
+      helpers.push("            .foregroundStyle(.secondary)");
+      helpers.push("    }");
       helpers.push("}");
     }
     return helpers;
@@ -11608,17 +11883,30 @@ ${varDeclarations}
       resolvedStyles: styleData.resolvedStyles,
       styleContexts: styleData.styleContexts
     };
-    const bodyLines = tree.roots.length === 1 ? renderSwiftUINode(tree.roots[0], 2, context, { availableWidth: styleResolveOptions.viewportWidth, availableHeight: styleResolveOptions.viewportHeight }) : [
+    const singleRoot = tree.roots.length === 1 ? tree.roots[0] : null;
+    const isSingleScreenRoot = singleRoot !== null && singleRoot.kind === "element" && singleRoot.component === "Screen";
+    const innerLines = tree.roots.length === 1 ? renderSwiftUINode(tree.roots[0], 2, context, { availableWidth: styleResolveOptions.viewportWidth, availableHeight: styleResolveOptions.viewportHeight }) : [
       "        VStack(alignment: .leading, spacing: 0) {",
       ...renderSwiftUIChildren(tree.roots, 3, context, renderSwiftUINode, "VStack", void 0, { availableWidth: styleResolveOptions.viewportWidth, availableHeight: styleResolveOptions.viewportHeight }),
       "        }"
     ];
+    const bodyLines = isSingleScreenRoot ? [
+      "        ScrollView {",
+      ...innerLines.map((line) => "    " + line),
+      "        }"
+    ] : innerLines;
     const lines = [];
     if (resolvedOptions.includeImports) {
       lines.push("import SwiftUI");
       if (context.helperFlags.has("backgroundImage") || context.helperFlags.has("imagePlaceholder") || context.helperFlags.has("openUrlHandler")) {
         lines.push("import Foundation");
       }
+      if (context.helperFlags.has("webViewSurface")) {
+        lines.push("import WebKit");
+      }
+      if (context.helperFlags.has("mediaSurface")) {
+        lines.push("import AVKit");
+      }
       lines.push("");
     }
     lines.push(`struct ${resolvedOptions.structName}: View {`);