@swiftbrowser/native 0.17.7 → 0.18.0

package/swift/Sources/SwiftBrowserNative/Views/Kinds/Video.swift

@@ -125,7 +125,10 @@ final class VideoController {
         if player.isMuted != props.muted { player.isMuted = props.muted }
         let volume = Float(props.volume)
         if player.volume != volume { player.volume = volume }
-        if props.report != applied?.report { observeTime(every: props.report ?? 0.25) }
+        // The first apply installs the observer whether or not `report` is set
+        // (`applied?.report` is nil both before any apply and for an app that
+        // sends none, as @swiftbrowser/react does); a new interval replaces it.
+        if timeObserver == nil || props.report != applied?.report { observeTime(every: props.report ?? 0.25) }
         if props.seekSerial != applied?.seekSerial {
             seek(to: props.seekTime, serial: props.seekSerial)
         }
@@ -173,7 +176,8 @@ final class VideoController {
             if let url { report("error", ["url": .string(url), "code": .number(4), "message": .string("not a URL: \(url)")]) }
             return
         }
-        let item = AVPlayerItem(url: parsed)
+        // A file the app keeps (a recording) may sit under a moved container.
+        let item = AVPlayerItem(url: AppFiles.current(parsed))
         player.replaceCurrentItem(with: item)
         let center = NotificationCenter.default
         notifications.append(center.addObserver(forName: .AVPlayerItemDidPlayToEndTime, object: item, queue: .main) { [weak self] _ in
@@ -279,7 +283,8 @@ final class VideoController {
 
     private func observeTime(every interval: Double) {
         if let timeObserver { player.removeTimeObserver(timeObserver) }
-        let step = max(0.05, interval)
+        // A frame at most (`report: 1 / 60`, Voice Memos' scrubber moving with the sound).
+        let step = max(1.0 / 60.0, interval)
         timeObserver = player.addPeriodicTimeObserver(forInterval: CMTime(seconds: step, preferredTimescale: 600), queue: .main) { [weak self] time in
             Task { @MainActor in
                 guard let self, self.applied?.playing == true else { return }

package/swift/Sources/SwiftBrowserNative/Views/NativeRootView.swift

@@ -13,6 +13,9 @@ public struct NativeRootView: View {
     @Environment(\.colorScheme) private var colorScheme
     @Environment(\.dynamicTypeSize) private var dynamicTypeSize
     @Environment(\.scenePhase) private var scenePhase
+    #if !canImport(FoundationBridge)
+    @Environment(\.undoManager) private var undoManager
+    #endif
     #if os(iOS) || canImport(FoundationBridge)
     @Environment(\.horizontalSizeClass) private var horizontalSizeClass
     private var sizeClassName: String { horizontalSizeClass == .regular ? "regular" : "compact" }
@@ -52,6 +55,11 @@ public struct NativeRootView: View {
         observed = AnyView(observed.onChange(of: app.isLoaded) { _, loaded in
             if loaded { sendEnvironment() }
         })
+        #if !canImport(FoundationBridge)
+        // The window's undo manager, which mirrors the app's (UndoBridge.swift).
+        observed = AnyView(observed.onAppear { app.setUndoManager(undoManager) })
+        observed = AnyView(observed.onChange(of: undoManager) { _, manager in app.setUndoManager(manager) })
+        #endif
         return observed
     }
 

package/swift/Sources/SwiftBrowserNative/Views/StyleModifier.swift

@@ -51,6 +51,8 @@ extension View {
             view = AnyView(view.imageScale(scale == "small" ? .small : scale == "large" ? .large : .medium))
         }
         if let tint = style.tint { view = AnyView(view.tint(Color(spec: tint))) }
+        // `.scrollDisabled`: the scroll views and text editors below (a text editor then as tall as its lines).
+        if let disabled = style.raw.bool("scrollDisabled") { view = AnyView(view.scrollDisabled(disabled)) }
         // `labelIcon` marks a `Label`'s icon; HStackElement draws the label as one.
         if let alignment = style.raw.string("gridColumnAlignment") { view = AnyView(view.gridColumnAlignment(HorizontalAlignment(name: alignment))) }
 
@@ -135,11 +137,13 @@ extension View {
             view = AnyView(view.scaleEffect(x: scale.x, y: scale.y, anchor: style.scaleAnchor.map(UnitPoint.init(spec:)) ?? .center))
         }
         if let offset = style.offset { view = AnyView(view.offset(x: offset.x, y: offset.y)) }
+        if let transition = style.scrollTransition { view = AnyView(view.scrollTransition(spec: transition)) }
         if let zIndex = style.zIndex { view = AnyView(view.zIndex(zIndex)) }
 
         // Interaction and visibility.
         if style.disabled == true { view = AnyView(view.disabled(true)) }
         if style.hitTesting == false { view = AnyView(view.allowsHitTesting(false)) }
+        if style.contentShape == "rectangle" { view = AnyView(view.contentShape(Rectangle())) }
         if style.hidden { view = AnyView(view.hidden()) }
         if let help = style.help { view = AnyView(view.help(help)) }
         // A `ScrollViewReader`'s `.id(x)`: the element's own id names it to a `scrollTo` and a scroll position.
@@ -172,6 +176,43 @@ extension View {
     }
 }
 
+extension View {
+    /// `.scrollTransition`: SwiftUI's own, its closure answering each phase
+    /// with the app's effects for it (SwiftUI draws between them as the view
+    /// scrolls, for `interactive`). Every effect is applied in every phase, so
+    /// the closure's type is one and the phases interpolate field by field.
+    func scrollTransition(spec: ScrollTransitionSpec) -> some View {
+        let configuration: ScrollTransitionConfiguration = switch spec.configuration {
+        case "animated": .animated
+        case "identity": .identity
+        // Linear, as the protocol draws it (between phases by how far out the
+        // view is): SwiftUI's default curve, ease in and out, outruns the
+        // scroll mid-way, so an offset of most of the view's length (a book's
+        // page coming out from under the one turning) ran backwards.
+        default: .interactive(timingCurve: .linear)
+        }
+        let axis: Axis? = switch spec.axis {
+        case "horizontal": .horizontal
+        case "vertical": .vertical
+        default: nil
+        }
+        return scrollTransition(configuration, axis: axis) { content, phase in
+            let effect = phase.value < 0 ? spec.topLeading : phase.value > 0 ? spec.bottomTrailing : spec.identity
+            return content
+                .offset(x: effect.offset?.x ?? 0, y: effect.offset?.y ?? 0)
+                .scaleEffect(x: effect.scale?.x ?? 1, y: effect.scale?.y ?? 1, anchor: effect.scaleAnchor.map(UnitPoint.init(spec:)) ?? .center)
+                .rotationEffect(.degrees(effect.rotation ?? 0), anchor: effect.rotationAnchor.map(UnitPoint.init(spec:)) ?? .center)
+                .opacity(effect.opacity ?? 1)
+                .blur(radius: effect.blur ?? 0)
+                .brightness(effect.brightness ?? 0)
+                .contrast(effect.contrast ?? 1)
+                .saturation(effect.saturation ?? 1)
+                .grayscale(effect.grayscale ?? 0)
+                .hueRotation(.degrees(effect.hueRotation ?? 0))
+        }
+    }
+}
+
 extension BlendMode {
     init?(name: String) {
         switch name {

package/swift/Sources/SwiftBrowserProtocol/Op.swift

@@ -12,8 +12,8 @@ public enum Op: Equatable, Sendable {
     case insert(parent: Int, id: Int, index: Int)
     /// Detach and destroy the element and its subtree.
     case remove(id: Int)
-    /// End of a render pass; with `animation`, every change of the pass animates.
-    case commit(animation: AnimationSpec?)
+    /// End of a render pass; with `animation`, every change of the pass animates; with `completion`, the app hears `animationcomplete` once it has.
+    case commit(animation: AnimationSpec?, completion: CommitCompletionSpec? = nil)
     /// Any other op, by name, with the whole object.
     case other(name: String, fields: JSONObject)
 
@@ -56,7 +56,7 @@ extension Op {
         case "remove":
             self = .remove(id: try id("id"))
         case "commit":
-            self = .commit(animation: fields["animation"].flatMap(AnimationSpec.init(json:)))
+            self = .commit(animation: fields["animation"].flatMap(AnimationSpec.init(json:)), completion: CommitCompletionSpec(fields: fields))
         default:
             self = .other(name: name, fields: fields)
         }
@@ -89,12 +89,35 @@ extension Op {
             return .object(["op": "insert", "parent": .number(Double(parent)), "id": .number(Double(id)), "index": .number(Double(index))])
         case .remove(let id):
             return .object(["op": "remove", "id": .number(Double(id))])
-        case .commit(let animation):
+        case .commit(let animation, let completion):
             var fields: JSONObject = ["op": "commit"]
             if let animation { fields["animation"] = animation.json }
+            if let completion {
+                fields["completion"] = .number(Double(completion.serial))
+                if completion.criteria != "logicallyComplete" { fields["completionCriteria"] = .string(completion.criteria) }
+            }
             return .object(fields)
         case .other(_, let fields):
             return .object(fields)
         }
     }
 }
+
+/// `withAnimation(_:completionCriteria:_:completion:)` on a `commit`: the
+/// serial the app's completion waits under, and when it should run
+/// (`logicallyComplete`, the default, or `removed`).
+public struct CommitCompletionSpec: Equatable, Sendable {
+    public var serial: Int
+    public var criteria: String
+
+    public init(serial: Int, criteria: String = "logicallyComplete") {
+        self.serial = serial
+        self.criteria = criteria
+    }
+
+    /// From a `commit`'s fields; nil without a `completion`.
+    public init?(fields: JSONObject) {
+        guard let serial = fields.int("completion") else { return nil }
+        self.init(serial: serial, criteria: fields.string("completionCriteria") ?? "logicallyComplete")
+    }
+}

package/swift/Sources/SwiftBrowserProtocol/Props.swift

@@ -22,6 +22,8 @@ public struct TextRunSpec: Equatable, Sendable {
     public var image: ImageProps?
     public var font: FontSpec?
     public var foreground: ShapeStyleSpec?
+    /// `AttributedString`'s `backgroundColor`: a color behind the run's glyphs.
+    public var background: ColorSpec?
     public var italic: Bool
     public var underline: Bool
     public var underlineColor: ColorSpec?
@@ -37,6 +39,7 @@ public struct TextRunSpec: Equatable, Sendable {
         image = fields.object("image").map(ImageProps.init(props:))
         font = FontSpec(json: fields.value("font"))
         foreground = ShapeStyleSpec(json: fields.value("foreground"))
+        background = ColorSpec(json: fields.value("background"))
         italic = fields.bool("italic") ?? false
         underline = fields["underline"] != nil
         underlineColor = ColorSpec(json: fields.value("underline")["color"])
@@ -56,11 +59,14 @@ public struct StackProps: Equatable, Sendable {
 
     /// `.scrollTargetLayout()`: the stack's children are the snap points of the scroll view around it.
     public var scrollTarget: Bool
+    /// `LazyVStack(pinnedViews:)`: `sectionHeaders`, `sectionFooters`; empty for a plain stack.
+    public var pinned: [String]
 
     public init(props: JSONObject) {
         spacing = props.double("spacing")
         alignment = props.string("alignment") ?? "center"
         scrollTarget = props.bool("scrollTarget") ?? false
+        pinned = props.array("pinned")?.compactMap(\.string) ?? []
     }
 }
 
@@ -120,6 +126,12 @@ public struct ScrollViewProps: Equatable, Sendable {
     /// `.scrollPosition(id:)`: the view reports the marked element at its anchor as it settles.
     public var reportsPosition: Bool
     public var positionAnchor: UnitPointSpec?
+    /// `.onScrollGeometryChange`: the view sends `scrollgeometry` as it scrolls and lays out.
+    public var reportsGeometry: Bool
+    /// `ScrollPosition.scrollTo(x:y:)`: the content offset to scroll to, once per serial.
+    public var scrollOffset: ScrollOffsetSpec?
+    /// `.defaultScrollAnchor(_:)`: where the content starts, and where it stays as it grows.
+    public var defaultScrollAnchor: UnitPointSpec?
     public init(props: JSONObject) {
         axes = props.string("axes") ?? "vertical"
         showsIndicators = props.bool("showsIndicators") ?? true
@@ -127,6 +139,23 @@ public struct ScrollViewProps: Equatable, Sendable {
         snap = props.string("snap")
         reportsPosition = props.bool("reportsPosition") ?? false
         positionAnchor = UnitPointSpec(json: props.value("positionAnchor"))
+        reportsGeometry = props.bool("reportsGeometry") ?? false
+        scrollOffset = ScrollOffsetSpec(json: props.value("scrollOffset"))
+        defaultScrollAnchor = UnitPointSpec(json: props.value("defaultScrollAnchor"))
+    }
+}
+
+/// A `scrollview`'s `scrollOffset` command: where to scroll (an axis left out keeps its offset).
+public struct ScrollOffsetSpec: Equatable, Sendable {
+    public var x: Double?
+    public var y: Double?
+    /// Increases with every request; carried out once each.
+    public var serial: Double
+    public init?(json: JSONValue) {
+        guard let fields = json.object, let serial = fields.double("serial") else { return nil }
+        self.serial = serial
+        x = fields.double("x")
+        y = fields.double("y")
     }
 }
 
@@ -160,14 +189,55 @@ public struct SectionProps: Equatable, Sendable {
     }
 }
 
+/// `texteditor`: its text, a bound focus, and for the rich editor its runs and a bound selection.
+public struct TextEditorProps: Equatable, Sendable {
+    public var text: String
+    public var focused: Bool?
+    /// `deleteBackward`: Backspace at the start of the text sends `deletebackward`.
+    public var deleteBackward: Bool
+    /// Rich text (`runs`, an empty array included): the runs `text` is made of; nil for a plain editor.
+    public var runs: [TextRunSpec]?
+    /// `selection` in the props: the editor reports the viewer's selection (UTF-16 offsets).
+    public var selection: TextSelectionSpec?
+
+    public var rich: Bool { runs != nil }
+
+    public init(props: JSONObject) {
+        text = props.string("text") ?? ""
+        focused = props.bool("focused")
+        deleteBackward = props.bool("deleteBackward") ?? false
+        runs = props.array("runs")?.compactMap(TextRunSpec.init(json:))
+        selection = TextSelectionSpec(json: props.value("selection"))
+    }
+}
+
+/// A range of an editor's text in UTF-16 offsets; `start == end` is the caret.
+public struct TextSelectionSpec: Equatable, Sendable {
+    public var start: Int
+    public var end: Int
+
+    public init(start: Int, end: Int) {
+        self.start = start
+        self.end = end
+    }
+
+    public init?(json: JSONValue) {
+        guard let fields = json.object, let start = fields.int("start"), let end = fields.int("end") else { return nil }
+        self.init(start: start, end: end)
+    }
+}
+
 public struct TextFieldProps: Equatable, Sendable {
     public var text: String
     public var placeholder: String
     /// `plain` or `roundedBorder`.
     public var style: String
     public var secure: Bool
+    /// A bound focus; after a `submit` the value the app's pass leaves wins over Return's resign (`TextFieldElement`).
     public var focused: Bool?
     public var submit: Bool
+    /// `deleteBackward`: Backspace at the start of the text sends `deletebackward`.
+    public var deleteBackward: Bool
     public var submitLabel: String?
     public var vertical: Bool
     public init(props: JSONObject) {
@@ -177,6 +247,7 @@ public struct TextFieldProps: Equatable, Sendable {
         secure = props.bool("secure") ?? false
         focused = props.bool("focused")
         submit = props.bool("submit") ?? false
+        deleteBackward = props.bool("deleteBackward") ?? false
         submitLabel = props.string("submitLabel")
         vertical = props.string("axis") == "vertical"
     }
@@ -184,7 +255,12 @@ public struct TextFieldProps: Equatable, Sendable {
 
 public struct ToggleProps: Equatable, Sendable {
     public var isOn: Bool
-    public init(props: JSONObject) { isOn = props.bool("isOn") ?? false }
+    /// `automatic`, `switch` or `button` (`.toggleStyle`).
+    public var style: String
+    public init(props: JSONObject) {
+        isOn = props.bool("isOn") ?? false
+        style = props.string("style") ?? "automatic"
+    }
 }
 
 public struct NavScreenProps: Equatable, Sendable {
@@ -229,12 +305,22 @@ public struct StrokeSpec: Equatable, Sendable {
     public var lineWidth: Double
     public var inset: Bool
     public var dash: [Double]
+    public var dashPhase: Double
+    /// `butt`, `round` or `square`.
+    public var lineCap: String
+    /// `miter`, `round` or `bevel`.
+    public var lineJoin: String
+    public var miterLimit: Double
     public init?(json: JSONValue) {
         guard let fields = json.object else { return nil }
         style = ShapeStyleSpec(json: fields.value("color"))
         lineWidth = fields.double("lineWidth") ?? 1
         inset = fields.bool("inset") ?? false
         dash = (fields.array("dash") ?? []).compactMap(\.double)
+        dashPhase = fields.double("dashPhase") ?? 0
+        lineCap = fields.string("lineCap") ?? "butt"
+        lineJoin = fields.string("lineJoin") ?? "miter"
+        miterLimit = fields.double("miterLimit") ?? 10
     }
 }
 
@@ -332,7 +418,7 @@ public struct ListRowProps: Equatable, Sendable {
 }
 
 public struct ToolbarProps: Equatable, Sendable {
-    /// `trailing`, `leading`, `principal`, `bottom`, `secondary`, `largeTitle`.
+    /// `trailing`, `leading`, `principal`, `bottom`, `secondary`, `largeTitle`, `keyboard`.
     public var placement: String
     /// A `ToolbarSpacer`: `fixed` or `flexible`; the element has no items.
     public var spacer: String?
@@ -443,7 +529,12 @@ public struct SliderProps: Equatable, Sendable {
 
 public struct TapGestureProps: Equatable, Sendable {
     public var location: Bool
-    public init(props: JSONObject) { location = props.bool("location") ?? false }
+    /// `.onTapGesture(count:)`: the taps it takes, 1 by default.
+    public var count: Int
+    public init(props: JSONObject) {
+        location = props.bool("location") ?? false
+        count = max(1, Int(props.double("count") ?? 1))
+    }
 }
 
 /// The producer-only `native` kind (docs/native.md, "The native escape hatch").
@@ -500,13 +591,29 @@ public struct DatePickerProps: Equatable, Sendable {
 public struct GestureProps: Equatable, Sendable {
     public var drag: Bool
     public var longPress: Bool
+    /// Two fingers spreading or pinching (`MagnifyGesture`), and turning (`RotateGesture`): `pinch` events.
+    public var magnify: Bool
+    public var rotate: Bool
     public var minimumDistance: Double
     public var minimumDuration: Double
+    public var minimumScaleDelta: Double
+    /// Degrees.
+    public var minimumAngleDelta: Double
+    /// The space of a drag's `location` and `startLocation`: `local` (the element's own) or `global`.
+    public var coordinateSpace: String
+    /// `simultaneous` (`.simultaneousGesture`), `highPriority` (`.highPriorityGesture`), or nil for `.gesture`.
+    public var mode: String?
     public init(props: JSONObject) {
         drag = props.bool("drag") ?? false
         longPress = props.bool("longPress") ?? false
+        magnify = props.bool("magnify") ?? false
+        rotate = props.bool("rotate") ?? false
         minimumDistance = props.double("minimumDistance") ?? 10
         minimumDuration = props.double("minimumDuration") ?? 0.5
+        minimumScaleDelta = props.double("minimumScaleDelta") ?? 0.01
+        minimumAngleDelta = props.double("minimumAngleDelta") ?? 1
+        coordinateSpace = props.string("coordinateSpace") ?? "local"
+        mode = props.string("mode")
     }
 }
 

package/swift/Sources/SwiftBrowserProtocol/RendererEvent.swift

@@ -75,6 +75,14 @@ public struct RendererEvent: Equatable, Sendable {
     public static func focus(_ id: Int, _ focused: Bool) -> RendererEvent { with("focus", id: id, ["value": .bool(focused)]) }
     /// The Return key in a `textfield` with `submit`.
     public static func submit(_ id: Int) -> RendererEvent { with("submit", id: id) }
+    /// Backspace at the start of a `textfield` or `texteditor` with `deleteBackward`, nothing selected.
+    public static func deleteBackward(_ id: Int) -> RendererEvent { with("deletebackward", id: id) }
+    /// The viewer's selection in a `texteditor` with `selection`, in UTF-16 offsets.
+    public static func selection(_ id: Int, start: Int, end: Int) -> RendererEvent {
+        with("selection", id: id, ["value": .object(["start": .number(Double(start)), "end": .number(Double(end))])])
+    }
+    /// A rich `texteditor`'s runs after the editor's own formatting changed their attributes alone (docs/ops-protocol.md, "Rich text editors"): the text unchanged, `runs` as the editor shows it.
+    public static func runs(_ id: Int, _ runs: [JSONValue]) -> RendererEvent { with("runs", id: id, ["value": .array(runs)]) }
     /// A `listrow` was deleted by a swipe or in edit mode.
     public static func delete(_ id: Int) -> RendererEvent { with("delete", id: id) }
     /// A `listrow` was moved to index `to` among its siblings.
@@ -92,6 +100,28 @@ public struct RendererEvent: Equatable, Sendable {
             "velocity": .object(["width": .number(velocity.width), "height": .number(velocity.height)]),
         ])
     }
+    /// A `gesture` with `magnify` or `rotate`: two fingers since `began`. `scale`
+    /// is the magnification (1 at the start), `rotation` the turn in degrees,
+    /// clockwise positive, the velocities per second; `startLocation` where the
+    /// fingers began, in the element's coordinates, `startAnchor` the same as a
+    /// fraction of its size, `location` where their midpoint is now (left out
+    /// when the renderer cannot tell).
+    public static func pinch(
+        _ id: Int, phase: String, scale: Double, rotation: Double, scaleVelocity: Double, rotationVelocity: Double,
+        startLocation: (x: Double, y: Double), startAnchor: (x: Double, y: Double), location: (x: Double, y: Double)? = nil
+    ) -> RendererEvent {
+        var fields: JSONObject = [
+            "phase": .string(phase),
+            "scale": .number(scale),
+            "rotation": .number(rotation),
+            "scaleVelocity": .number(scaleVelocity),
+            "rotationVelocity": .number(rotationVelocity),
+            "startLocation": .object(["x": .number(startLocation.x), "y": .number(startLocation.y)]),
+            "startAnchor": .object(["x": .number(startAnchor.x), "y": .number(startAnchor.y)]),
+        ]
+        if let location { fields["location"] = .object(["x": .number(location.x), "y": .number(location.y)]) }
+        return with("pinch", id: id, fields)
+    }
     /// A `lazyspacer` came into view: the app mounts the next batch of rows.
     public static func lazy(_ id: Int) -> RendererEvent { with("lazy", id: id) }
     /// A `gesture` long press.
@@ -100,6 +130,23 @@ public struct RendererEvent: Equatable, Sendable {
     public static func refresh(_ id: Int) -> RendererEvent { with("refresh", id: id) }
     /// `.scrollPosition(id:)`: the marked element at the scroll view's anchor once it settled.
     public static func scrollPosition(_ id: Int) -> RendererEvent { with("scrollposition", id: id) }
+    /// `.onScrollGeometryChange`: a `scrollview` with `reportsGeometry` scrolled or laid out (points, 2 decimals).
+    public static func scrollGeometry(
+        _ id: Int, offset: (x: Double, y: Double), contentSize: (width: Double, height: Double),
+        containerSize: (width: Double, height: Double), contentInsets: (top: Double, leading: Double, bottom: Double, trailing: Double)
+    ) -> RendererEvent {
+        let r = { (value: Double) in JSONValue.number((value * 100).rounded() / 100) }
+        return with("scrollgeometry", id: id, [
+            "offset": .object(["x": r(offset.x), "y": r(offset.y)]),
+            "contentSize": .object(["width": r(contentSize.width), "height": r(contentSize.height)]),
+            "containerSize": .object(["width": r(containerSize.width), "height": r(containerSize.height)]),
+            "contentInsets": .object(["top": r(contentInsets.top), "leading": r(contentInsets.leading), "bottom": r(contentInsets.bottom), "trailing": r(contentInsets.trailing)]),
+        ])
+    }
+    /// The pass whose `commit` carried this `completion` serial has finished animating (`withAnimation`'s completion).
+    public static func animationComplete(serial: Int) -> RendererEvent {
+        RendererEvent(type: "animationcomplete", fields: ["serial": .number(Double(serial))])
+    }
     /// A `menu` opened or closed (lazy menus build their items on `open`).
     public static func menu(_ id: Int, open: Bool) -> RendererEvent { with("menu", id: id, ["open": .bool(open)]) }
     /// The host's answer to a `native` element's own event (docs/native.md, the escape hatch).