@craft-native/ios 0.0.113 → 0.0.115

package/README.md

@@ -106,7 +106,7 @@ In Xcode:
 
 ### Experimental WebView-free screen
 
-The opt-in `native` renderer hosts compiled `.stx` screens in JavaScriptCore and renders their `View`, `Text`, `Button`, and `TextInput` nodes as UIKit controls. The default remains `web`; existing iOS apps are unchanged. This is a vertical slice, not yet a replacement for the WebView renderer: the native bridge supports device info, haptics, clipboard read/write, and multi-screen navigation. Lists and the rest of Craft's device APIs still need native adapters. Enable `enableHaptics` and `enableClipboard` in `craft.config.json` before using those two capabilities; disabled calls preserve Craft's `CAPABILITY_DISABLED` rejection code.
+The opt-in `native` renderer hosts compiled `.stx` screens in JavaScriptCore and renders their `View`, `SafeAreaView`, `Text`, `Button`, `TextInput`, `Image`, `ScrollView`, and recycling `FlatList` nodes as UIKit controls. `FlatList` uses `UICollectionView` with stable keyed rows, incremental diffs, grids, horizontal and inverted layouts, list chrome, and end-reached pagination. The default remains `web`; existing iOS apps are unchanged. Most Craft device APIs still need native adapters. Enable `enableHaptics` and `enableClipboard` in `craft.config.json` before using those two capabilities; disabled calls preserve Craft's `CAPABILITY_DISABLED` rejection code. The portable component, list, style, image-source, event, accessibility, and reconciliation behavior is specified in the [Native STX guide](../../docs/guides/native-stx.md).
 
 ```bash
 craft ios init NativeDemo --renderer native --output ./ios-native
@@ -117,7 +117,15 @@ craft ios run --output ./ios-native --simulator
 
 `stx-native` is currently a private package in the sibling [stx repository](https://github.com/stacksjs/stx). Run its source CLI with Bun until it is published or linked locally. A runnable screen is in [`fixtures/native-screen/Screen.stx`](./fixtures/native-screen/Screen.stx). In native mode, the app never instantiates `WKWebView`; a missing `dist/native-screen.js` fails the build rather than silently opening the web placeholder.
 
-Native screen updates reconcile the UIKit tree by sibling-scoped `key` (or `testID` for existing screens); unkeyed children reuse their position. `TextInput` objects therefore keep focus and selection while unrelated labels and buttons change. On macOS, `bun packages/ios/scripts/test-native-render.ts` runs the renderer's unit and simulator UI tests.
+Native screen updates use the versioned mutation protocol when the bundle
+supports it and fall back to whole-document rendering for older bundles.
+Updates reconcile the UIKit tree by sibling-scoped `key` (or `testID` for
+existing screens); unkeyed children reuse their position. `TextInput` objects
+therefore keep focus and selection while unrelated labels and buttons change.
+The protocol wire format, atomic validation, revisions, and error codes are in
+the [Native STX guide](../../docs/guides/native-stx.md). On macOS,
+`bun packages/ios/scripts/test-native-render.ts` runs the renderer's unit and
+simulator UI tests.
 
 For multiple native screens, configure named `.stx` routes and an initial screen in `stx-native.config.json` (see [`fixtures/native-navigation`](./fixtures/native-navigation)). Compile without a positional file: `stx-native compile --format bundle --output ./screen.js`. A screen can call `craft.navigation.push('details', { id: 7 })`, `.replace('home')`, or `.back()`; the destination reads `craft.route.params`. Craft uses a native navigation stack, so the back button and edge-swipe reveal the existing controller and retain its JavaScript and input state. `bun packages/ios/scripts/test-native-navigation.ts` compiles the fixture and runs its simulator test; the default WebView renderer is unchanged.
 

package/dist/cli.js

@@ -411,7 +411,9 @@ async function init(options) {
   const swiftSource = swiftTemplate.replace(/CraftApp/g, `${name}App`).replace(/\{\{BUNDLE_ID\}\}/g, finalBundleId);
   writeFileSync(join(output, "Sources", `${name}App.swift`), swiftSource);
   cpSync(join(TEMPLATES_DIR, "CraftNativeScreen.swift"), join(output, "Sources", "CraftNativeScreen.swift"));
+  cpSync(join(TEMPLATES_DIR, "CraftNativeFlatList.swift"), join(output, "Sources", "CraftNativeFlatList.swift"));
   cpSync(join(TEMPLATES_DIR, "CraftNativeActions.swift"), join(output, "Sources", "CraftNativeActions.swift"));
+  cpSync(join(TEMPLATES_DIR, "CraftNativeMutation.swift"), join(output, "Sources", "CraftNativeMutation.swift"));
   const infoPlistTemplate = readFileSync(join(TEMPLATES_DIR, "Info.plist.template"), "utf-8");
   const infoPlist = infoPlistTemplate.replace(/\{\{APP_NAME\}\}/g, xmlEscape(displayName)).replace(/\{\{BUNDLE_ID\}\}/g, finalBundleId).replace(/\{\{VERSION\}\}/g, config.version || "1.0.0").replace(/\{\{BUILD_NUMBER\}\}/g, config.buildNumber || "1").replace(/\{\{UI_STYLE\}\}/g, renderAppearance(config).interfaceStyle).replace(/\{\{STATUS_BAR_STYLE\}\}/g, renderAppearance(config).statusBarStyle).replace(/\{\{ORIENTATIONS\}\}/g, renderOrientations(config)).replace(/\{\{USAGE_DESCRIPTIONS\}\}/g, renderUsageDescriptions(config)).replace(/\{\{URL_TYPES\}\}/g, renderUrlTypes(config)).replace(/\{\{BACKGROUND_MODES\}\}/g, renderBackgroundModes(config)).replace(/\{\{LIVE_ACTIVITY_SUPPORT\}\}/g, config.enableLiveActivities ? `    <key>NSSupportsLiveActivities</key>
     <true/>

package/dist/index.js

@@ -406,7 +406,9 @@ async function init(options) {
   const swiftSource = swiftTemplate.replace(/CraftApp/g, `${name}App`).replace(/\{\{BUNDLE_ID\}\}/g, finalBundleId);
   writeFileSync(join(output, "Sources", `${name}App.swift`), swiftSource);
   cpSync(join(TEMPLATES_DIR, "CraftNativeScreen.swift"), join(output, "Sources", "CraftNativeScreen.swift"));
+  cpSync(join(TEMPLATES_DIR, "CraftNativeFlatList.swift"), join(output, "Sources", "CraftNativeFlatList.swift"));
   cpSync(join(TEMPLATES_DIR, "CraftNativeActions.swift"), join(output, "Sources", "CraftNativeActions.swift"));
+  cpSync(join(TEMPLATES_DIR, "CraftNativeMutation.swift"), join(output, "Sources", "CraftNativeMutation.swift"));
   const infoPlistTemplate = readFileSync(join(TEMPLATES_DIR, "Info.plist.template"), "utf-8");
   const infoPlist = infoPlistTemplate.replace(/\{\{APP_NAME\}\}/g, xmlEscape(displayName)).replace(/\{\{BUNDLE_ID\}\}/g, finalBundleId).replace(/\{\{VERSION\}\}/g, config.version || "1.0.0").replace(/\{\{BUILD_NUMBER\}\}/g, config.buildNumber || "1").replace(/\{\{UI_STYLE\}\}/g, renderAppearance(config).interfaceStyle).replace(/\{\{STATUS_BAR_STYLE\}\}/g, renderAppearance(config).statusBarStyle).replace(/\{\{ORIENTATIONS\}\}/g, renderOrientations(config)).replace(/\{\{USAGE_DESCRIPTIONS\}\}/g, renderUsageDescriptions(config)).replace(/\{\{URL_TYPES\}\}/g, renderUrlTypes(config)).replace(/\{\{BACKGROUND_MODES\}\}/g, renderBackgroundModes(config)).replace(/\{\{LIVE_ACTIVITY_SUPPORT\}\}/g, config.enableLiveActivities ? `    <key>NSSupportsLiveActivities</key>
     <true/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@craft-native/ios",
-  "version": "0.0.113",
+  "version": "0.0.115",
   "homepage": "https://github.com/craft-native/craft/tree/main/packages/ios#readme",
   "repository": {
     "type": "git",

package/templates/CraftNativeFlatList.swift

@@ -0,0 +1,323 @@
+import UIKit
+
+private final class CraftNativeFlatListLayout: UICollectionViewFlowLayout {
+    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
+        guard let current = collectionView?.bounds else { return true }
+        return scrollDirection == .vertical
+            ? abs(current.width - newBounds.width) > .ulpOfOne
+            : abs(current.height - newBounds.height) > .ulpOfOne
+    }
+}
+
+/// A keyed, recycling native list used by the stx-native FlatList primitive.
+/// The screen controller owns rendered row state; this view owns collection
+/// diffs, viewport state, and UICollectionView cell reuse.
+final class CraftNativeFlatList: UICollectionView, UICollectionViewDelegateFlowLayout {
+    typealias RenderItem = (_ node: [String: Any], _ identity: String, _ previous: UIView?) -> UIView
+
+    private final class Cell: UICollectionViewCell {
+        static let reuseIdentifier = "CraftNativeFlatListCell"
+
+        private(set) var representedIdentity: String?
+        private(set) var hostedView: UIView?
+        var onRecycle: ((String) -> Void)?
+
+        override func prepareForReuse() {
+            super.prepareForReuse()
+            releaseHostedView()
+        }
+
+        func host(_ view: UIView, identity: String) {
+            if representedIdentity != identity { releaseHostedView() }
+            representedIdentity = identity
+            guard hostedView !== view else { return }
+            hostedView?.removeFromSuperview()
+            hostedView = view
+            view.translatesAutoresizingMaskIntoConstraints = false
+            contentView.addSubview(view)
+            NSLayoutConstraint.activate([
+                view.topAnchor.constraint(equalTo: contentView.topAnchor),
+                view.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
+                view.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
+                view.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
+            ])
+        }
+
+        func releaseHostedView() {
+            if let identity = representedIdentity { onRecycle?(identity) }
+            hostedView?.removeFromSuperview()
+            hostedView = nil
+            representedIdentity = nil
+            onRecycle = nil
+        }
+
+        override func preferredLayoutAttributesFitting(
+            _ layoutAttributes: UICollectionViewLayoutAttributes
+        ) -> UICollectionViewLayoutAttributes {
+            guard let hostedView = hostedView else { return layoutAttributes }
+            let attributes = layoutAttributes.copy() as! UICollectionViewLayoutAttributes
+            let target = CGSize(width: layoutAttributes.size.width, height: UIView.layoutFittingCompressedSize.height)
+            let measured = hostedView.systemLayoutSizeFitting(
+                target,
+                withHorizontalFittingPriority: .required,
+                verticalFittingPriority: .fittingSizeLevel
+            )
+            attributes.size.height = max(1, measured.height)
+            return attributes
+        }
+    }
+
+    private struct Item {
+        let identity: String
+        let node: [String: Any]
+        let signature: Data
+        let isChrome: Bool
+    }
+
+    private struct ViewportAnchor {
+        let identity: String
+        let distanceFromOrigin: CGFloat
+    }
+
+    private let flowLayout: UICollectionViewFlowLayout
+    private var diffableDataSource: UICollectionViewDiffableDataSource<Int, String>!
+    private var items: [Item] = []
+    private var itemsByIdentity: [String: Item] = [:]
+    private var renderItem: RenderItem?
+    private var recycleItem: ((String) -> Void)?
+    private var endReached: (() -> Void)?
+    private var endReachedThreshold = 0.1
+    private var endReachedSignature: String?
+    private var columns = 1
+    private var isApplyingSnapshot = false
+    private var pendingApply: (() -> Void)?
+
+    init() {
+        let layout = CraftNativeFlatListLayout()
+        layout.estimatedItemSize = CGSize(width: 320, height: 44)
+        layout.minimumLineSpacing = 0
+        layout.minimumInteritemSpacing = 0
+        flowLayout = layout
+        super.init(frame: .zero, collectionViewLayout: layout)
+        backgroundColor = .clear
+        alwaysBounceVertical = true
+        delegate = self
+        register(Cell.self, forCellWithReuseIdentifier: Cell.reuseIdentifier)
+        diffableDataSource = UICollectionViewDiffableDataSource<Int, String>(collectionView: self) {
+            [weak self] collectionView, indexPath, identity in
+            guard let self = self,
+                  let item = self.itemsByIdentity[identity],
+                  let cell = collectionView.dequeueReusableCell(
+                    withReuseIdentifier: Cell.reuseIdentifier,
+                    for: indexPath
+                  ) as? Cell,
+                  let renderItem = self.renderItem else { return UICollectionViewCell() }
+            let view = renderItem(item.node, identity, cell.hostedView)
+            cell.onRecycle = self.recycleItem
+            cell.host(view, identity: identity)
+            return cell
+        }
+    }
+
+    required init?(coder: NSCoder) { nil }
+
+    var visibleItemIdentities: [String] {
+        indexPathsForVisibleItems
+            .sorted { $0.item < $1.item }
+            .compactMap { diffableDataSource.itemIdentifier(for: $0) }
+    }
+
+    func apply(
+        nodes: [[String: Any]],
+        horizontal: Bool,
+        columns: Int,
+        inverted: Bool,
+        endReachedThreshold: Double,
+        renderItem: @escaping RenderItem,
+        recycleItem: @escaping (String) -> Void,
+        endReached: (() -> Void)?
+    ) {
+        if isApplyingSnapshot {
+            pendingApply = { [weak self] in
+                self?.apply(
+                    nodes: nodes,
+                    horizontal: horizontal,
+                    columns: columns,
+                    inverted: inverted,
+                    endReachedThreshold: endReachedThreshold,
+                    renderItem: renderItem,
+                    recycleItem: recycleItem,
+                    endReached: endReached
+                )
+            }
+            return
+        }
+        isApplyingSnapshot = true
+
+        self.renderItem = renderItem
+        self.recycleItem = recycleItem
+        self.endReached = endReached
+        self.endReachedThreshold = max(0, endReachedThreshold)
+        self.columns = max(1, columns)
+
+        layoutIfNeeded()
+        let oldItems = itemsByIdentity
+        let viewportAnchor = currentViewportAnchor()
+        var seen: [String: Int] = [:]
+        var next = nodes.enumerated().map { index, node -> Item in
+            let base = Self.identity(for: node) ?? "index:\(index)"
+            let occurrence = seen[base, default: 0]
+            seen[base] = occurrence + 1
+            let identity = occurrence == 0 ? base : "\(base)#\(occurrence)"
+            let props = node["props"] as? [String: Any] ?? [:]
+            let role = props["listRole"] as? String
+            let signature = (try? JSONSerialization.data(withJSONObject: node, options: [.sortedKeys])) ?? Data()
+            return Item(identity: identity, node: node, signature: signature, isChrome: role != nil && role != "item")
+        }
+        if inverted { next.reverse() }
+        items = next
+        itemsByIdentity = Dictionary(uniqueKeysWithValues: next.map { ($0.identity, $0) })
+
+        flowLayout.scrollDirection = horizontal ? .horizontal : .vertical
+        alwaysBounceHorizontal = horizontal
+        alwaysBounceVertical = !horizontal
+        showsHorizontalScrollIndicator = horizontal
+        showsVerticalScrollIndicator = !horizontal
+        flowLayout.invalidateLayout()
+
+        let nextIds = Set(itemsByIdentity.keys)
+        for identity in oldItems.keys where !nextIds.contains(identity) { recycleItem(identity) }
+        let changed = next.compactMap { item -> String? in
+            guard let old = oldItems[item.identity], old.signature != item.signature else { return nil }
+            return item.identity
+        }
+
+        var snapshot = NSDiffableDataSourceSnapshot<Int, String>()
+        snapshot.appendSections([0])
+        snapshot.appendItems(next.map(\.identity), toSection: 0)
+        let retainedOffset = contentOffset
+        diffableDataSource.apply(snapshot, animatingDifferences: false) { [weak self] in
+            guard let self = self else { return }
+            let live = Set(self.diffableDataSource.snapshot().itemIdentifiers)
+            let changedLive = changed.filter { live.contains($0) }
+            let restoreViewport = { [weak self] in
+                guard let self = self else { return }
+                self.layoutIfNeeded()
+                if let viewportAnchor = viewportAnchor {
+                    self.restore(viewportAnchor)
+                } else {
+                    self.setContentOffset(self.clamped(retainedOffset), animated: false)
+                }
+                self.finishApplyingSnapshot()
+            }
+            if !changedLive.isEmpty {
+                var update = self.diffableDataSource.snapshot()
+                update.reconfigureItems(changedLive)
+                self.diffableDataSource.apply(update, animatingDifferences: false, completion: restoreViewport)
+            } else {
+                restoreViewport()
+            }
+        }
+
+        let dataItems = next.filter { !$0.isChrome }
+        let contentSignature = "\(dataItems.count):\(dataItems.last?.identity ?? "empty")"
+        if contentSignature != endReachedSignature { endReachedSignature = nil }
+    }
+
+    func discardAll() {
+        visibleCells.compactMap { $0 as? Cell }.forEach { $0.releaseHostedView() }
+        itemsByIdentity.keys.forEach { recycleItem?($0) }
+        items = []
+        itemsByIdentity = [:]
+        renderItem = nil
+        recycleItem = nil
+        endReached = nil
+    }
+
+    func scrollViewDidScroll(_ scrollView: UIScrollView) { evaluateEndReached() }
+
+    func collectionView(
+        _ collectionView: UICollectionView,
+        layout collectionViewLayout: UICollectionViewLayout,
+        sizeForItemAt indexPath: IndexPath
+    ) -> CGSize {
+        guard items.indices.contains(indexPath.item) else { return CGSize(width: bounds.width, height: 44) }
+        let item = items[indexPath.item]
+        if flowLayout.scrollDirection == .horizontal {
+            return CGSize(width: max(1, bounds.width * 0.8), height: max(1, bounds.height))
+        }
+        let count = item.isChrome ? 1 : columns
+        let spacing = flowLayout.minimumInteritemSpacing * CGFloat(count - 1)
+        return CGSize(width: max(1, (bounds.width - spacing) / CGFloat(count)), height: 44)
+    }
+
+    private func evaluateEndReached() {
+        guard !isApplyingSnapshot, pendingApply == nil,
+              let endReached = endReached,
+              let lastVisible = indexPathsForVisibleItems.map(\.item).max() else { return }
+        let dataIndices = items.indices.filter { !items[$0].isChrome }
+        guard !dataIndices.isEmpty,
+              let lastDataOrdinal = dataIndices.lastIndex(where: { $0 <= lastVisible }) else { return }
+        let remaining = dataIndices.count - lastDataOrdinal - 1
+        let thresholdItems = max(1, Int(ceil(Double(dataIndices.count) * endReachedThreshold)))
+        guard remaining <= thresholdItems else { return }
+        let lastIdentity = items[dataIndices[dataIndices.count - 1]].identity
+        let signature = "\(dataIndices.count):\(lastIdentity)"
+        guard endReachedSignature != signature else { return }
+        endReachedSignature = signature
+        endReached()
+    }
+
+    private func finishApplyingSnapshot() {
+        DispatchQueue.main.async { [weak self] in
+            guard let self = self else { return }
+            self.isApplyingSnapshot = false
+            if let pendingApply = self.pendingApply {
+                self.pendingApply = nil
+                pendingApply()
+                return
+            }
+            self.evaluateEndReached()
+        }
+    }
+
+    private func clamped(_ offset: CGPoint) -> CGPoint {
+        CGPoint(
+            x: min(max(-adjustedContentInset.left, offset.x), max(-adjustedContentInset.left, contentSize.width - bounds.width + adjustedContentInset.right)),
+            y: min(max(-adjustedContentInset.top, offset.y), max(-adjustedContentInset.top, contentSize.height - bounds.height + adjustedContentInset.bottom))
+        )
+    }
+
+    private func currentViewportAnchor() -> ViewportAnchor? {
+        let horizontal = flowLayout.scrollDirection == .horizontal
+        let ordered = indexPathsForVisibleItems.sorted { lhs, rhs in
+            let left = layoutAttributesForItem(at: lhs)?.frame
+            let right = layoutAttributesForItem(at: rhs)?.frame
+            return horizontal ? (left?.minX ?? 0) < (right?.minX ?? 0) : (left?.minY ?? 0) < (right?.minY ?? 0)
+        }
+        guard let indexPath = ordered.first,
+              let identity = diffableDataSource.itemIdentifier(for: indexPath),
+              let frame = layoutAttributesForItem(at: indexPath)?.frame else { return nil }
+        let distance = horizontal ? frame.minX - contentOffset.x : frame.minY - contentOffset.y
+        return ViewportAnchor(identity: identity, distanceFromOrigin: distance)
+    }
+
+    private func restore(_ anchor: ViewportAnchor) {
+        guard let indexPath = diffableDataSource.indexPath(for: anchor.identity),
+              let frame = layoutAttributesForItem(at: indexPath)?.frame else { return }
+        var offset = contentOffset
+        if flowLayout.scrollDirection == .horizontal {
+            offset.x = frame.minX - anchor.distanceFromOrigin
+        } else {
+            offset.y = frame.minY - anchor.distanceFromOrigin
+        }
+        setContentOffset(clamped(offset), animated: false)
+    }
+
+    private static func identity(for node: [String: Any]) -> String? {
+        let props = node["props"] as? [String: Any] ?? [:]
+        return [node["id"], node["key"], props["key"], props["testID"]]
+            .compactMap { $0 as? String }
+            .first { !$0.isEmpty }
+    }
+}