craft-native 0.0.123 → 0.0.125

package/README.md

@@ -470,6 +470,9 @@ should use the canonical spellings. A capability disabled by app configuration
 is distinct from a user denying permission, and `BUSY` is distinct from a failed
 native call.
 
+On iOS, `window.addEventListener('craftTabBarLayout', ...)` reports the native
+tab bar's current height as `{ detail: { height } }` in CSS pixels.
+
 ## Requirements
 
 - Bun >= 1.0.0 (for development)

package/dist/android/src/index.d.ts

@@ -9,10 +9,13 @@ export interface CraftAndroidConfig {
     appName: string;
     packageName: string;
     renderer?: 'web' | 'native';
+    /** "system" follows the device; light/dark pin the generated host. */
+    appearance?: 'light' | 'dark' | 'system';
     version?: string;
     versionCode?: number;
     darkMode?: boolean;
     backgroundColor?: string;
+    backgroundColorDark?: string;
     enableSpeechRecognition?: boolean;
     enableHaptics?: boolean;
     enableShare?: boolean;

package/dist/android/src/index.js

@@ -216,6 +216,9 @@ function validateAndroidConfig(config) {
   if (config.renderer !== undefined && config.renderer !== "web" && config.renderer !== "native") {
     throw new Error(`Unknown Android renderer: ${config.renderer}. Expected web or native.`);
   }
+  if (config.appearance !== undefined && !["light", "dark", "system"].includes(config.appearance)) {
+    throw new Error(`Unknown Android appearance: ${config.appearance}. Expected light, dark, or system.`);
+  }
   const packageSegments = config.packageName.split(".");
   if (packageSegments.length < 2 || packageSegments.some((segment) => !/^[A-Za-z_][A-Za-z0-9_]*$/.test(segment) || KOTLIN_KEYWORDS.has(segment))) {
     throw new Error(`Invalid Android package name: ${config.packageName}`);
@@ -223,6 +226,9 @@ function validateAndroidConfig(config) {
   if (!/^#(?:[\dA-F]{3,4}|[\dA-F]{6}|[\dA-F]{8})$/i.test(config.backgroundColor ?? "")) {
     throw new Error(`Invalid Android background color: ${config.backgroundColor}`);
   }
+  if (config.backgroundColorDark !== undefined && !config.backgroundColorDark.match(/^#[\dA-F]{3,4}$|^#[\dA-F]{6}$|^#[\dA-F]{8}$/i)) {
+    throw new Error(`Invalid Android dark background color: ${config.backgroundColorDark}`);
+  }
   for (const [name, value] of [
     ["versionCode", config.versionCode],
     ["minSdk", config.minSdk],
@@ -395,6 +401,7 @@ async function init(options) {
     join(output, "app/src/main/java", packagePath),
     join(output, "app/src/main/res/layout"),
     join(output, "app/src/main/res/values"),
+    join(output, "app/src/main/res/values-night"),
     join(output, "app/src/main/res/drawable"),
     join(output, "app/src/main/assets"),
     join(output, "gradle/wrapper")
@@ -418,10 +425,12 @@ async function init(options) {
   if (config.renderer === "native") {
     const mutationTemplate = readFileSync(join(TEMPLATES_DIR, "CraftNativeMutation.kt.template"), "utf-8");
     const flatListTemplate = readFileSync(join(TEMPLATES_DIR, "CraftNativeFlatList.kt.template"), "utf-8");
+    const refreshableFlatListTemplate = readFileSync(join(TEMPLATES_DIR, "CraftNativeRefreshableFlatList.kt.template"), "utf-8");
     const capabilityTemplate = readFileSync(join(TEMPLATES_DIR, "CraftNativeCapabilities.kt.template"), "utf-8");
     const notificationTemplate = readFileSync(join(TEMPLATES_DIR, "CraftNativeNotificationReceiver.kt.template"), "utf-8");
     writeFileSync(join(output, "app/src/main/java", packagePath, "CraftNativeMutation.kt"), mutationTemplate.replace(/\{\{PACKAGE_NAME\}\}/g, finalPackageName));
     writeFileSync(join(output, "app/src/main/java", packagePath, "CraftNativeFlatList.kt"), flatListTemplate.replace(/\{\{PACKAGE_NAME\}\}/g, finalPackageName));
+    writeFileSync(join(output, "app/src/main/java", packagePath, "CraftNativeRefreshableFlatList.kt"), refreshableFlatListTemplate.replace(/\{\{PACKAGE_NAME\}\}/g, finalPackageName));
     writeFileSync(join(output, "app/src/main/java", packagePath, "CraftNativeCapabilities.kt"), capabilityTemplate.replace(/\{\{PACKAGE_NAME\}\}/g, finalPackageName));
     writeFileSync(join(output, "app/src/main/java", packagePath, "CraftNativeNotificationReceiver.kt"), notificationTemplate.replace(/\{\{PACKAGE_NAME\}\}/g, finalPackageName));
   }
@@ -468,7 +477,7 @@ async function init(options) {
   const projectGradleTemplate = readFileSync(join(TEMPLATES_DIR, "build.gradle.kts.project.template"), "utf-8");
   writeFileSync(join(output, "build.gradle.kts"), projectGradleTemplate.replace(/\{\{GOOGLE_SERVICES_PLUGIN\}\}/g, hasGoogleServices ? '    id("com.google.gms.google-services") version "4.4.2" apply false' : ""));
   const appGradleTemplate = readFileSync(join(TEMPLATES_DIR, "build.gradle.kts.app.template"), "utf-8");
-  const appGradle = appGradleTemplate.replace(/\{\{PACKAGE_NAME\}\}/g, finalPackageName).replace(/\{\{VERSION_NAME\}\}/g, escapeKotlinString(config.version || "1.0.0")).replace(/\{\{VERSION_CODE\}\}/g, String(config.versionCode || 1)).replace(/\{\{MIN_SDK\}\}/g, String(config.minSdk ?? ANDROID_MIN_SDK)).replace(/\{\{COMPILE_SDK\}\}/g, String(config.compileSdk || 36)).replace(/\{\{TARGET_SDK\}\}/g, String(config.targetSdk || 35)).replace(/\{\{GOOGLE_SERVICES_PLUGIN\}\}/g, hasGoogleServices ? '    id("com.google.gms.google-services")' : "").replace(/\{\{FIREBASE_MESSAGING_DEPENDENCY\}\}/g, config.enablePushNotifications ? '    implementation("com.google.firebase:firebase-messaging:24.1.0")' : "").replace(/\{\{HEALTH_CONNECT_DEPENDENCIES\}\}/g, config.enableHealthConnect ? `    implementation("androidx.health.connect:connect-client:1.1.0")
+  const appGradle = appGradleTemplate.replace(/\{\{PACKAGE_NAME\}\}/g, finalPackageName).replace(/\{\{VERSION_NAME\}\}/g, escapeKotlinString(config.version || "1.0.0")).replace(/\{\{VERSION_CODE\}\}/g, String(config.versionCode || 1)).replace(/\{\{MIN_SDK\}\}/g, String(config.minSdk ?? ANDROID_MIN_SDK)).replace(/\{\{COMPILE_SDK\}\}/g, String(config.compileSdk || 36)).replace(/\{\{TARGET_SDK\}\}/g, String(config.targetSdk || 35)).replace(/\{\{GOOGLE_SERVICES_PLUGIN\}\}/g, hasGoogleServices ? '    id("com.google.gms.google-services")' : "").replace(/\{\{FIREBASE_MESSAGING_DEPENDENCY\}\}/g, config.enablePushNotifications ? '    implementation("com.google.firebase:firebase-messaging:24.1.0")' : "").replace(/\{\{REFRESH_LAYOUT_DEPENDENCY\}\}/g, config.renderer === "native" ? '    implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.1.0")' : "").replace(/\{\{HEALTH_CONNECT_DEPENDENCIES\}\}/g, config.enableHealthConnect ? `    implementation("androidx.health.connect:connect-client:1.1.0")
     implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.8.1")` : "").replace(/\{\{JAVASCRIPT_ENGINE_DEPENDENCY\}\}/g, config.renderer === "native" ? '    implementation("androidx.javascriptengine:javascriptengine:1.1.0")' : "");
   writeFileSync(join(output, "app/build.gradle.kts"), appGradle);
   const proguardTemplate = readFileSync(join(TEMPLATES_DIR, "proguard-rules.pro.template"), "utf-8");
@@ -508,6 +517,16 @@ zipStorePath=wrapper/dists
 </resources>
 `;
   writeFileSync(join(output, "app/src/main/res/values/colors.xml"), colorsXml);
+  const darkColorsPath = join(output, "app/src/main/res/values-night/colors.xml");
+  if (config.backgroundColorDark) {
+    writeFileSync(darkColorsPath, `<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="background">${config.backgroundColorDark}</color>
+</resources>
+`);
+  } else {
+    rmSync(darkColorsPath, { force: true });
+  }
   const appIconXml = `<?xml version="1.0" encoding="utf-8"?>
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="108dp"
@@ -601,7 +620,7 @@ zipStorePath=wrapper/dists
   console.log("Next steps:");
   console.log(`  1. cd ${output}`);
   if (config.renderer === "native") {
-    console.log("  2. Compile your screen: stx-native compile Screen.stx --format bundle --output screen.js");
+    console.log("  2. Compile your screen: stx native compile Screen.stx --format bundle --output screen.js");
     console.log("  3. Run: craft android build --native-bundle screen.js");
   } else {
     console.log("  2. Add your web content to app/src/main/assets/index.html");
@@ -627,7 +646,7 @@ async function build(options) {
     if (nativeBundlePath && resolve(nativeBundlePath) !== resolve(destination))
       cpSync(nativeBundlePath, destination);
     if (!existsSync(destination)) {
-      throw new Error("Native Android mode needs app/src/main/assets/native-screen.js. Compile a .stx screen with stx-native first.");
+      throw new Error("Native Android mode needs app/src/main/assets/native-screen.js. Compile a .stx screen with `stx native compile` first.");
     }
   } else if (nativeBundlePath) {
     throw new Error('--native-bundle requires renderer: "native" in craft.config.json.');

package/dist/android/templates/AndroidManifest.xml.template

@@ -33,7 +33,7 @@
         <activity
             android:name=".MainActivity"
             android:exported="true"
-            android:configChanges="orientation|screenSize|screenLayout|keyboardHidden"
+            android:configChanges="orientation|screenSize|screenLayout|keyboardHidden|uiMode"
             android:windowSoftInputMode="adjustResize"
             android:launchMode="singleTask">
             <intent-filter>

package/dist/android/templates/CraftNativeFlatList.kt.template

@@ -14,7 +14,7 @@ import kotlin.math.ceil
 
 internal typealias CraftNativeRenderItem = (node: JSONObject, identity: String, previous: View?) -> View
 
-/** A stable-key RecyclerView host for stx-native FlatList nodes. */
+/** A stable-key RecyclerView host for stx native FlatList nodes. */
 internal class CraftNativeFlatList(context: Context) : RecyclerView(context) {
     private data class Item(
         val identity: String,
@@ -37,12 +37,16 @@ internal class CraftNativeFlatList(context: Context) : RecyclerView(context) {
         override fun getItemId(position: Int): Long = stableId(getItem(position).identity)
 
         override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) = Holder(FrameLayout(parent.context).apply {
-            layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)
+            layoutParams = LayoutParams(
+                if (horizontal) LayoutParams.WRAP_CONTENT else LayoutParams.MATCH_PARENT,
+                LayoutParams.WRAP_CONTENT,
+            )
         })
 
         override fun onBindViewHolder(holder: Holder, position: Int) {
             val item = getItem(position)
             if (holder.identity != null && holder.identity != item.identity) release(holder)
+            holder.host.layoutParams = holderLayoutParams()
             val view = renderItem?.invoke(item.node, item.identity, holder.hostedView) ?: View(holder.host.context)
             val renderedLayout = view.layoutParams
             val hostedLayout = FrameLayout.LayoutParams(
@@ -83,19 +87,134 @@ internal class CraftNativeFlatList(context: Context) : RecyclerView(context) {
     private var endReached: (() -> Unit)? = null
     private var threshold = 0.1
     private var endReachedSignature: String? = null
+    private var dataContentSignature = ""
     private var horizontal = false
     private var columns = 1
+    private var keyboardShouldPersistTaps = "never"
     private var submissionGeneration = 0
     private var isSubmittingList = false
+    private var pendingThemeRefresh = false
+    var onScrollEvent: (() -> Unit)? = null
+    var onScrollBeginDrag: (() -> Unit)? = null
+    var onScrollEndDrag: (() -> Unit)? = null
+    var onMomentumScrollBegin: (() -> Unit)? = null
+    var onMomentumScrollEnd: (() -> Unit)? = null
+    var onLayoutChanged: (() -> Unit)? = null
+
+    private fun holderLayoutParams() = LayoutParams(
+        if (horizontal) LayoutParams.WRAP_CONTENT else LayoutParams.MATCH_PARENT,
+        LayoutParams.WRAP_CONTENT,
+    )
+
+    private fun updateVisibleHolderLayoutParams() {
+        for (index in 0 until childCount) {
+            (getChildViewHolder(getChildAt(index)) as? Holder)?.host?.layoutParams = holderLayoutParams()
+        }
+    }
+
+    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+        super.onLayout(changed, left, top, right, bottom)
+        onLayoutChanged?.invoke()
+    }
 
     init {
         adapter = listAdapter
         itemAnimator = null
         addOnScrollListener(object : OnScrollListener() {
-            override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) = evaluateEndReached()
+            private var dragging = false
+            private var momentum = false
+
+            override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
+                onScrollEvent?.invoke()
+                onLayoutChanged?.invoke()
+                evaluateEndReached()
+            }
+
+            override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
+                when (newState) {
+                    RecyclerView.SCROLL_STATE_DRAGGING -> if (!dragging) {
+                        dragging = true
+                        onScrollBeginDrag?.invoke()
+                    }
+                    RecyclerView.SCROLL_STATE_SETTLING -> {
+                        if (dragging) {
+                            dragging = false
+                            onScrollEndDrag?.invoke()
+                        }
+                        if (!momentum) {
+                            momentum = true
+                            onMomentumScrollBegin?.invoke()
+                        }
+                    }
+                    RecyclerView.SCROLL_STATE_IDLE -> {
+                        if (dragging) {
+                            dragging = false
+                            onScrollEndDrag?.invoke()
+                        }
+                        if (momentum) {
+                            momentum = false
+                            onMomentumScrollEnd?.invoke()
+                        }
+                    }
+                }
+            }
         })
     }
 
+    fun setKeyboardDismissMode(mode: String, dismissKeyboard: () -> Unit) {
+        if (mode !in setOf("on-drag", "interactive") && keyboardShouldPersistTaps == "always") {
+            setOnTouchListener(null)
+            return
+        }
+        var dismissed = false
+        setOnTouchListener { _, event ->
+            when (event.actionMasked) {
+                android.view.MotionEvent.ACTION_DOWN -> dismissed = false
+                android.view.MotionEvent.ACTION_MOVE -> if (!dismissed) {
+                    dismissed = true
+                    dismissKeyboard()
+                }
+                android.view.MotionEvent.ACTION_UP -> if (shouldDismissKeyboard(event)) dismissKeyboard()
+            }
+            false
+        }
+    }
+
+    fun setKeyboardShouldPersistTaps(value: String?) {
+        keyboardShouldPersistTaps = value?.takeIf { it in setOf("always", "handled", "never") } ?: "never"
+    }
+
+    private fun tapTarget(view: View, x: Float, y: Float): View? {
+        if (x < 0 || y < 0 || x >= view.width || y >= view.height || view.visibility != View.VISIBLE) return null
+        if (view is ViewGroup) {
+            for (index in view.childCount - 1 downTo 0) {
+                val child = view.getChildAt(index)
+                tapTarget(child, x - child.left, y - child.top)?.let { return it }
+            }
+        }
+        return view
+    }
+
+    private fun shouldDismissKeyboard(event: android.view.MotionEvent): Boolean {
+        if (keyboardShouldPersistTaps == "always") return false
+        if (keyboardShouldPersistTaps == "never") return true
+        return tapTarget(this, event.x, event.y)?.isClickable != true
+    }
+
+    fun setContentContainerStyle(style: JSONObject?, density: Float) {
+        val padding = (style?.optDouble("padding", 0.0) ?: 0.0) * density
+        val horizontal = (style?.optDouble("paddingHorizontal", padding / density) ?: (padding / density)) * density
+        val vertical = (style?.optDouble("paddingVertical", padding / density) ?: (padding / density)) * density
+        setPadding(
+            ((style?.optDouble("paddingLeft", horizontal / density) ?: (horizontal / density)) * density).toInt(),
+            ((style?.optDouble("paddingTop", vertical / density) ?: (vertical / density)) * density).toInt(),
+            ((style?.optDouble("paddingRight", horizontal / density) ?: (horizontal / density)) * density).toInt(),
+            ((style?.optDouble("paddingBottom", vertical / density) ?: (vertical / density)) * density).toInt(),
+        )
+        clipToPadding = true
+        requestLayout()
+    }
+
     fun apply(
         nodes: List<JSONObject>,
         horizontal: Boolean,
@@ -116,7 +235,10 @@ internal class CraftNativeFlatList(context: Context) : RecyclerView(context) {
         val retainedState = if (layoutChanged) null else layoutManager?.onSaveInstanceState()
         this.horizontal = horizontal
         this.columns = nextColumns
-        if (layoutChanged || layoutManager == null) configureLayoutManager()
+        if (layoutChanged || layoutManager == null) {
+            configureLayoutManager()
+            updateVisibleHolderLayoutParams()
+        }
 
         val seen = mutableMapOf<String, Int>()
         val next = nodes.mapIndexed { index, node ->
@@ -132,7 +254,10 @@ internal class CraftNativeFlatList(context: Context) : RecyclerView(context) {
         val nextIds = next.mapTo(mutableSetOf()) { it.identity }
         (oldIds - nextIds).forEach(recycleItem)
         val dataItems = next.filterNot { it.chrome }
-        val contentSignature = "${dataItems.size}:${dataItems.lastOrNull()?.identity.orEmpty()}"
+        val contentSignature = dataItems.joinToString("") {
+            "${it.identity.length}:${it.identity}${it.signature.length}:${it.signature}"
+        }
+        dataContentSignature = contentSignature
         if (contentSignature != endReachedSignature) endReachedSignature = null
         val generation = ++submissionGeneration
         isSubmittingList = true
@@ -140,6 +265,10 @@ internal class CraftNativeFlatList(context: Context) : RecyclerView(context) {
             if (generation != submissionGeneration) return@submitList
             retainedState?.let { layoutManager?.onRestoreInstanceState(it) }
             isSubmittingList = false
+            if (pendingThemeRefresh) {
+                pendingThemeRefresh = false
+                refreshThemeDefaults()
+            }
             evaluateEndReached()
         }
     }
@@ -148,12 +277,28 @@ internal class CraftNativeFlatList(context: Context) : RecyclerView(context) {
         listAdapter.currentList.forEach { recycleItem?.invoke(it.identity) }
         val generation = ++submissionGeneration
         isSubmittingList = true
+        pendingThemeRefresh = false
         listAdapter.submitList(emptyList()) {
             if (generation == submissionGeneration) isSubmittingList = false
         }
         renderItem = null
         recycleItem = null
         endReached = null
+        dataContentSignature = ""
+        onScrollEvent = null
+        onScrollBeginDrag = null
+        onScrollEndDrag = null
+        onMomentumScrollBegin = null
+        onMomentumScrollEnd = null
+        onLayoutChanged = null
+    }
+
+    fun refreshThemeDefaults() {
+        if (isSubmittingList) {
+            pendingThemeRefresh = true
+            return
+        }
+        if (listAdapter.itemCount > 0) listAdapter.notifyItemRangeChanged(0, listAdapter.itemCount)
     }
 
     private fun configureLayoutManager() {
@@ -179,8 +324,7 @@ internal class CraftNativeFlatList(context: Context) : RecyclerView(context) {
         val remaining = dataPositions.size - lastDataOrdinal - 1
         val thresholdItems = maxOf(1, ceil(dataPositions.size * threshold).toInt())
         if (remaining > thresholdItems) return
-        val lastIdentity = listAdapter.currentList[dataPositions.last()].identity
-        val signature = "${dataPositions.size}:$lastIdentity"
+        val signature = dataContentSignature
         if (endReachedSignature == signature) return
         endReachedSignature = signature
         endReached?.invoke()

package/dist/android/templates/CraftNativeRefreshableFlatList.kt.template

@@ -0,0 +1,29 @@
+package {{PACKAGE_NAME}}
+
+import android.content.Context
+import androidx.swiperefreshlayout.widget.SwipeRefreshLayout
+
+/** Swipe-to-refresh host for a native FlatList. */
+internal class CraftNativeRefreshableFlatList(context: Context) : SwipeRefreshLayout(context) {
+    val list = CraftNativeFlatList(context)
+    private var refreshHandler: (() -> Unit)? = null
+
+    init {
+        addView(list, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+        setOnRefreshListener { refreshHandler?.invoke() }
+        isEnabled = false
+    }
+
+    fun configureRefresh(handler: (() -> Unit)?, refreshing: Boolean) {
+        refreshHandler = handler
+        isEnabled = handler != null
+        isRefreshing = handler != null && refreshing
+        if (handler == null) isRefreshing = false
+    }
+
+    override fun onDetachedFromWindow() {
+        refreshHandler = null
+        isRefreshing = false
+        super.onDetachedFromWindow()
+    }
+}

package/dist/android/templates/MainActivity.kt.template

@@ -17,6 +17,7 @@ import android.webkit.WebSettings
 import android.webkit.WebView
 import android.webkit.WebViewClient
 import androidx.appcompat.app.AppCompatActivity
+import androidx.appcompat.app.AppCompatDelegate
 import androidx.core.view.WindowCompat
 import androidx.webkit.WebViewAssetLoader
 import org.json.JSONObject
@@ -75,6 +76,7 @@ class MainActivity : AppCompatActivity() {
 
     @SuppressLint("SetJavaScriptEnabled")
     override fun onCreate(savedInstanceState: Bundle?) {
+        applyConfiguredAppearance()
         super.onCreate(savedInstanceState)
 
         // Enable edge-to-edge
@@ -111,6 +113,21 @@ class MainActivity : AppCompatActivity() {
         setupNetworkMonitoring()
     }
 
+    private fun applyConfiguredAppearance() {
+        val configured = configJson()
+        val mode = when (configured?.optString("appearance")) {
+            "light" -> AppCompatDelegate.MODE_NIGHT_NO
+            "dark" -> AppCompatDelegate.MODE_NIGHT_YES
+            "system" -> AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM
+            else -> if (configured?.optBoolean("darkMode", true) == false) {
+                AppCompatDelegate.MODE_NIGHT_NO
+            } else {
+                AppCompatDelegate.MODE_NIGHT_YES
+            }
+        }
+        AppCompatDelegate.setDefaultNightMode(mode)
+    }
+
     @SuppressLint("SetJavaScriptEnabled")
     private fun setupWebView() {
         webView.settings.apply {