craft-native 0.0.183 → 0.0.185

package/dist/cli.js

@@ -3303,7 +3303,7 @@ function pinCraftNativeDependency(packagePath, craftVersion) {
 `);
 }
 // package.json
-var version = "0.0.183";
+var version = "0.0.185";
 
 // bin/cli.ts
 var spawnedFrom = process6.env[CRAFT_CLI_SPAWN_MARKER];

package/dist/index.cjs

@@ -310,7 +310,7 @@ function craftBinaryNotFoundMessage(triedPath) {
 `);
 }
 // package.json
-var version = "0.0.183";
+var version = "0.0.185";
 
 // src/sdk-version.ts
 var SDK_VERSION = version;

package/dist/index.js

@@ -58,7 +58,7 @@ function craftBinaryNotFoundMessage(triedPath) {
 `);
 }
 // package.json
-var version = "0.0.183";
+var version = "0.0.185";
 
 // src/sdk-version.ts
 var SDK_VERSION = version;

package/dist/ios/templates/CraftNativeScreen.swift

@@ -6332,9 +6332,17 @@ final class CraftNativeScreenController: UIViewController, UIScrollViewDelegate,
             view.accessibilityValue = nil
         }
         let role = props["accessibilityRole"] as? String
-        view.isAccessibilityElement = role != "none" && (view.accessibilityLabel != nil || role != nil || ["Text", "Button", "Link", "Checkbox", "Image", "ImageBackground", "Video", "TextInput", "Picker", "DatePicker", "Switch", "Slider"].contains(type))
+        // A scroll view, a list or a group of controls holds what VoiceOver
+        // reads: its label names the group, as a tab strip or a pager's
+        // name, and never stands in for its content. As an element of its
+        // own, a labelled pager hid every page from VoiceOver.
+        let container = ["ScrollView", "FlatList", "SectionList"].contains(type)
+            || ["tablist", "radiogroup", "list", "menu", "menubar", "toolbar"].contains(role ?? "")
+        view.isAccessibilityElement = !container && role != "none" && (view.accessibilityLabel != nil || role != nil || ["Text", "Button", "Link", "Checkbox", "Image", "ImageBackground", "Video", "TextInput", "Picker", "DatePicker", "Switch", "Slider"].contains(type))
+        view.accessibilityContainerType = container && view.accessibilityLabel != nil ? .semanticGroup : .none
         var traits: UIAccessibilityTraits = []
         switch role ?? type.lowercased() {
+        case "tablist": traits.insert(.tabBar)
         case "button", "checkbox": traits.insert(.button)
         case "image": traits.insert(.image)
         case "header": traits.insert(.header)
@@ -6917,10 +6925,15 @@ final class CraftNativeAnimationRecord {
     let fontSize: CGFloat?
     let textColor: UIColor?
     let transitionID: String?
+    /// Where it sat in its parent, to be put back after it faded elsewhere.
+    let index: Int?
+    let arrangedIndex: Int?
 
     init(view: UIView, screen: UIView, transitionID: String?) {
         self.view = view
         superview = view.superview
+        index = view.superview?.subviews.firstIndex(of: view)
+        arrangedIndex = (view.superview as? UIStackView)?.arrangedSubviews.firstIndex(of: view)
         frame = view.frame
         frameOnScreen = view.superview?.convert(view.frame, to: screen) ?? view.frame
         alpha = view.alpha
@@ -6939,6 +6952,10 @@ final class CraftNativeAnimationTransaction {
     var screenBackground: UIColor?
     /// Reduce Motion: the screen as it was, crossfaded into the new one.
     var picture: UIView?
+    /// Commits the change as the run loop finishes the pass it came in.
+    var observer: CFRunLoopObserver?
+    /// The screen as it was, drawn over it until the animation is set up.
+    var cover: UIView?
 
     init(spec: CraftNativeAnimationSpec, reduceMotion: Bool) {
         self.spec = spec
@@ -6948,7 +6965,11 @@ final class CraftNativeAnimationTransaction {
 
 /// An animation under way: finished at once if another change comes first.
 final class CraftNativeRunningAnimation {
+    /// The Core Animation key every animation of a change goes under.
+    static let key = "craft.change"
     var animators: [UIViewPropertyAnimator] = []
+    /// Live layers carrying an animation of the change, under `key` + a suffix.
+    var layers: [(CALayer, String)] = []
     var cleanup: [() -> Void] = []
     private var done = false
 
@@ -6959,6 +6980,10 @@ final class CraftNativeRunningAnimation {
             animator.stopAnimation(false)
             animator.finishAnimation(at: .end)
         }
+        // A live view's own values were never touched: taking the animation
+        // off leaves it exactly as the screen last drew it.
+        for (layer, key) in layers { layer.removeAnimation(forKey: key) }
+        layers.removeAll()
         cleanup.forEach { $0() }
         cleanup.removeAll()
     }
@@ -6983,16 +7008,40 @@ extension CraftNativeScreenController {
         let transaction = CraftNativeAnimationTransaction(spec: CraftNativeAnimationSpec(payload), reduceMotion: UIAccessibility.isReduceMotionEnabled)
         transaction.screenBackground = view.backgroundColor
         if transaction.reduceMotion {
-            transaction.picture = view.window == nil ? nil : view.snapshotView(afterScreenUpdates: false)
+            // Held over the screen until the change is in, then faded away.
+            if view.window != nil, let picture = view.snapshotView(afterScreenUpdates: false) {
+                picture.frame = view.bounds
+                picture.isUserInteractionEnabled = false
+                view.addSubview(picture)
+                transaction.picture = picture
+            }
         } else {
             view.layoutIfNeeded()
             recordAnimationState(renderedRoot, into: transaction)
+            // The screen as it is, held over it until the change's animation
+            // is set up: UIKit can draw the new screen before the run loop's
+            // pass ends, which showed it for a frame before it animated.
+            if view.window != nil, let cover = view.snapshotView(afterScreenUpdates: false) {
+                cover.frame = view.bounds
+                cover.isUserInteractionEnabled = false
+                view.addSubview(cover)
+                transaction.cover = cover
+            }
         }
         animationTransaction = transaction
         CraftNativeAnimationClock.duration = transaction.spec.duration
         // The change comes from the same turn of the script (the state it
-        // changed renders in a microtask); a slow one still animates.
-        DispatchQueue.main.async { [weak self] in self?.commitAnimatedChange() }
+        // changed renders in a microtask), so it is set up as the run loop
+        // finishes this pass, before Core Animation draws it: drawn first, the
+        // new screen showed for a frame and then jumped back to animate. A
+        // change that comes later still animates.
+        let observer = CFRunLoopObserverCreateWithHandler(kCFAllocatorDefault, CFRunLoopActivity.beforeWaiting.rawValue, false, 0) { [weak self] _, _ in
+            self?.commitAnimatedChange()
+        }
+        if let observer {
+            CFRunLoopAddObserver(CFRunLoopGetMain(), observer, .commonModes)
+            transaction.observer = observer
+        }
         DispatchQueue.main.asyncAfter(deadline: .now() + 0.15) { [weak self] in self?.commitAnimatedChange() }
     }
 
@@ -7012,6 +7061,13 @@ extension CraftNativeScreenController {
     private func commitAnimatedChange() {
         guard let transaction = animationTransaction else { return }
         animationTransaction = nil
+        if let observer = transaction.observer {
+            CFRunLoopRemoveObserver(CFRunLoopGetMain(), observer, .commonModes)
+            transaction.observer = nil
+        }
+        // Taken off in the same transaction the animations start in.
+        transaction.cover?.removeFromSuperview()
+        transaction.cover = nil
         let spec = transaction.spec
         let running = CraftNativeRunningAnimation()
         runningAnimation = running
@@ -7019,9 +7075,6 @@ extension CraftNativeScreenController {
 
         if transaction.reduceMotion {
             guard let picture = transaction.picture else { running.finish(); return }
-            picture.frame = view.bounds
-            picture.isUserInteractionEnabled = false
-            view.addSubview(picture)
             let fade = UIViewPropertyAnimator(duration: 0.3, curve: .easeInOut) { picture.alpha = 0 }
             fade.addCompletion { _ in running.finish() }
             running.animators.append(fade)
@@ -7065,26 +7118,69 @@ extension CraftNativeScreenController {
         view.addSubview(overlay)
         running.cleanup.append { overlay.removeFromSuperview() }
 
-        let main = UIViewPropertyAnimator(duration: spec.duration, timingParameters: spec.timing)
-        // Fades take the first part, so nothing is half there for long.
+        // Views that are going are the change's own now: they move into the
+        // overlay where they were and fade there. Put back as they were
+        // afterwards, in case the screen shows them again.
         let fadeOut = UIViewPropertyAnimator(duration: spec.duration * 0.5, curve: .easeOut)
-        let fadeIn = UIViewPropertyAnimator(duration: spec.duration * 0.6, curve: .easeInOut)
-        running.animators = [main, fadeOut, fadeIn]
-
-        // Removed views fade where they were, over what replaced them.
-        for record in removedRoots {
+        let quickFade = UIViewPropertyAnimator(duration: spec.duration * 0.35, curve: .easeOut)
+        let travel = UIViewPropertyAnimator(duration: spec.duration, timingParameters: spec.timing)
+        running.animators = [fadeOut, quickFade, travel]
+        func adopt(_ record: CraftNativeAnimationRecord, fading fade: UIViewPropertyAnimator) {
             let going = record.view
+            let resizes = going.translatesAutoresizingMaskIntoConstraints
+            let base = going.transform
             going.translatesAutoresizingMaskIntoConstraints = true
             going.transform = .identity
             going.frame = record.frameOnScreen
+            going.alpha = record.alpha
             overlay.addSubview(going)
-            fadeOut.addAnimations { going.alpha = 0 }
+            fade.addAnimations { going.alpha = 0 }
+            running.cleanup.append {
+                going.removeFromSuperview()
+                going.transform = base
+                going.alpha = record.alpha
+                going.translatesAutoresizingMaskIntoConstraints = resizes
+                going.frame = record.frame
+                // Back in a parent that went with it, as it was: a screen
+                // that shows that subtree again finds it whole.
+                if let parent = record.superview, parent.window == nil {
+                    if let stack = parent as? UIStackView, let at = record.arrangedIndex {
+                        stack.insertArrangedSubview(going, at: min(at, stack.arrangedSubviews.count))
+                    } else if let at = record.index {
+                        parent.insertSubview(going, at: min(at, parent.subviews.count))
+                    }
+                }
+            }
+        }
+        for record in removedRoots { adopt(record, fading: fadeOut) }
+
+        // Live views are animated on their layers only, from how they were to
+        // how the screen draws them now: nothing the screen sets on them
+        // meanwhile (the next second on a timer, a style patch) is undone.
+        let fades = spec.duration * 0.6
+        func animate(_ layer: CALayer, _ keyPath: String, from: Any, duration: TimeInterval? = nil, spring: Bool = true) {
+            let animation: CABasicAnimation
+            if spring, duration == nil, spec.curve == "spring" {
+                let bouncy = CASpringAnimation(keyPath: keyPath)
+                bouncy.mass = 1
+                bouncy.stiffness = pow(2 * .pi / spec.duration, 2)
+                bouncy.damping = 2 * sqrt(bouncy.stiffness) * (1 - spec.bounce)
+                bouncy.duration = bouncy.settlingDuration
+                animation = bouncy
+            } else {
+                animation = CABasicAnimation(keyPath: keyPath)
+                animation.duration = duration ?? spec.duration
+                animation.timingFunction = CAMediaTimingFunction(name: spec.curve == "linear" ? .linear : .easeInEaseOut)
+            }
+            animation.fromValue = from
+            let key = "\(CraftNativeRunningAnimation.key).\(keyPath)"
+            layer.add(animation, forKey: key)
+            running.layers.append((layer, key))
         }
 
-        // The background, the screen's own included, goes from the old colour.
+        // The background, the screen's own included, comes from the old colour.
         if let before = transaction.screenBackground, let now = view.backgroundColor, !before.isEqual(now) {
-            view.backgroundColor = before
-            main.addAnimations { self.view.backgroundColor = now }
+            animate(view.layer, "backgroundColor", from: before.cgColor, spring: false)
         }
 
         // Shared elements: the new view starts where the old one was, at its
@@ -7092,58 +7188,56 @@ extension CraftNativeScreenController {
         for (old, new) in pairs {
             let target = new.superview?.convert(new.frame, to: view) ?? new.frame
             let move = morph(from: old.frameOnScreen, to: target, uniform: true)
-            let finalAlpha = new.alpha
-            let base = new.transform
-            new.transform = base.concatenating(move)
-            new.alpha = 0
-            main.addAnimations { new.transform = base }
-            fadeIn.addAnimations { new.alpha = finalAlpha }
+            animate(new.layer, "transform", from: CATransform3DMakeAffineTransform(new.transform.concatenating(move)))
+            // Crossed quickly, so the two are never both half there for long.
+            animate(new.layer, "opacity", from: 0, duration: spec.duration * 0.35)
+            adopt(old, fading: quickFade)
             let going = old.view
-            going.translatesAutoresizingMaskIntoConstraints = true
-            going.transform = .identity
-            going.frame = old.frameOnScreen
-            going.alpha = old.alpha
-            overlay.addSubview(going)
-            main.addAnimations { going.transform = move.inverted() }
-            fadeOut.addAnimations { going.alpha = 0 }
-            running.cleanup.append { new.transform = base; new.alpha = finalAlpha }
+            travel.addAnimations { going.transform = move.inverted() }
         }
 
         // New views fade in. A new container holding a shared element keeps it
         // in sight: only the rest of it fades, and its colour comes up.
+        func fadeIn(_ added: UIView) {
+            if pairedNew.contains(ObjectIdentifier(added)) { return }
+            guard containsShared(added, pairedNew: pairedNew) else {
+                animate(added.layer, "opacity", from: 0, duration: fades)
+                return
+            }
+            if let colour = added.backgroundColor, colour != .clear {
+                animate(added.layer, "backgroundColor", from: colour.withAlphaComponent(0).cgColor, duration: fades)
+            }
+            added.subviews.forEach(fadeIn)
+        }
         for added in inserted where !(added.superview.map { insertedIds.contains(ObjectIdentifier($0)) } ?? false) {
-            fadeInInserted(added, pairedNew: pairedNew, animator: fadeIn, running: running)
+            fadeIn(added)
         }
 
         // Views that stay go to their new places and sizes.
         for record in records.values where present.contains(ObjectIdentifier(record.view)) {
             let stays = record.view
             if let label = stays as? UILabel, let before = record.fontSize, abs(before - label.font.pointSize) > 0.5 {
-                let base = label.transform
                 let target = label.superview?.convert(label.frame, to: view) ?? label.frame
-                label.transform = base.concatenating(morph(from: record.frameOnScreen, to: target, uniform: true))
-                main.addAnimations { label.transform = base }
-                running.cleanup.append { label.transform = base }
-            } else if record.superview === stays.superview, record.frame != stays.frame {
-                let final = stays.frame
-                stays.frame = record.frame
-                main.addAnimations { stays.frame = final }
+                let move = morph(from: record.frameOnScreen, to: target, uniform: true)
+                animate(label.layer, "transform", from: CATransform3DMakeAffineTransform(label.transform.concatenating(move)))
+            } else if record.superview === stays.superview, record.frame != stays.frame, stays.transform.isIdentity {
+                animate(stays.layer, "position", from: CGPoint(x: record.frame.midX, y: record.frame.midY))
+                if record.frame.size != stays.frame.size {
+                    animate(stays.layer, "bounds.size", from: record.frame.size)
+                }
             }
             if let before = record.backgroundColor, let now = stays.backgroundColor, !before.isEqual(now) {
-                stays.backgroundColor = before
-                main.addAnimations { stays.backgroundColor = now }
-            }
-            if let label = stays as? UILabel, let before = record.textColor, !before.isEqual(label.textColor) {
-                let now = label.textColor
-                label.textColor = before
-                UIView.transition(with: label, duration: spec.duration * 0.6, options: [.transitionCrossDissolve, .allowAnimatedContent]) { label.textColor = now }
+                animate(stays.layer, "backgroundColor", from: before.cgColor, spring: false)
             }
         }
 
-        main.addCompletion { _ in running.finish() }
+        travel.addCompletion { _ in running.finish() }
         fadeOut.startAnimation()
-        fadeIn.startAnimation()
-        main.startAnimation()
+        quickFade.startAnimation()
+        travel.startAnimation()
+        // The springs settle a little after `duration`; the views are already
+        // where the screen draws them, so finishing then changes nothing.
+        DispatchQueue.main.asyncAfter(deadline: .now() + spec.duration * 2) { running.finish() }
     }
 
     /// The transform that puts a view at `final` where `start` was: moved
@@ -7158,23 +7252,6 @@ extension CraftNativeScreenController {
         return CGAffineTransform(translationX: dx, y: dy).scaledBy(x: sx, y: sy)
     }
 
-    private func fadeInInserted(_ view: UIView, pairedNew: Set<ObjectIdentifier>, animator: UIViewPropertyAnimator, running: CraftNativeRunningAnimation) {
-        if pairedNew.contains(ObjectIdentifier(view)) { return }
-        guard containsShared(view, pairedNew: pairedNew) else {
-            let finalAlpha = view.alpha
-            view.alpha = 0
-            animator.addAnimations { view.alpha = finalAlpha }
-            running.cleanup.append { view.alpha = finalAlpha }
-            return
-        }
-        if let colour = view.backgroundColor, colour != .clear {
-            view.backgroundColor = colour.withAlphaComponent(0)
-            animator.addAnimations { view.backgroundColor = colour }
-            running.cleanup.append { view.backgroundColor = colour }
-        }
-        for child in view.subviews { fadeInInserted(child, pairedNew: pairedNew, animator: animator, running: running) }
-    }
-
     private func containsShared(_ view: UIView, pairedNew: Set<ObjectIdentifier>) -> Bool {
         if pairedNew.contains(ObjectIdentifier(view)) { return true }
         return view.subviews.contains { containsShared($0, pairedNew: pairedNew) }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "craft-native",
-  "version": "0.0.183",
+  "version": "0.0.185",
   "type": "module",
   "description": "Build desktop apps with web languages - TypeScript SDK for Craft",
   "author": "Chris Breuer <chris@stacksjs.org>",