@swiftbrowser/native 0.19.0 → 0.23.0

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

@@ -59,6 +59,8 @@ extension View {
         }
         // `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))) }
+        if let columns = style.gridCellColumns { view = AnyView(view.gridCellColumns(columns)) }
+        if let anchor = style.gridCellAnchor { view = AnyView(view.gridCellAnchor(UnitPoint(spec: anchor))) }
 
         // Layout.
         if style.fixedSizeHorizontal != nil || style.fixedSizeVertical != nil {
@@ -107,6 +109,7 @@ extension View {
             view = AnyView(view.aspectRatio(ratio.map { CGFloat($0) }, contentMode: mode))
         }
         if let position = style.position { view = AnyView(view.position(x: position.x, y: position.y)) }
+        if let guide = style.alignmentGuide { view = view.alignmentGuide(spec: guide) }
 
         // Paint.
         if let background = style.background {
@@ -119,6 +122,7 @@ extension View {
         if let radius = style.cornerRadius { view = AnyView(view.clipShape(RoundedRectangle(cornerRadius: radius, style: .continuous))) }
         if style.clipped { view = AnyView(view.clipped()) }
         if let mask = style.mask { view = AnyView(view.mask { Rectangle().fill(AnyShapeStyle(spec: mask)) }) }
+        if style.compositingGroup { view = AnyView(view.compositingGroup()) }
         if let shadow = style.shadow {
             view = AnyView(view.shadow(color: shadow.color.map(Color.init(spec:)) ?? Color.black.opacity(0.33), radius: shadow.radius, x: shadow.x, y: shadow.y))
         }
@@ -137,6 +141,12 @@ extension View {
         if let rotation = style.rotation {
             view = AnyView(view.rotationEffect(.degrees(rotation), anchor: style.rotationAnchor.map(UnitPoint.init(spec:)) ?? .center))
         }
+        if let rotation = style.rotation3D {
+            view = AnyView(view.rotation3DEffect(
+                .degrees(rotation.angle), axis: (x: rotation.x, y: rotation.y, z: rotation.z),
+                anchor: rotation.anchor.map(UnitPoint.init(spec:)) ?? .center, perspective: rotation.perspective
+            ))
+        }
         if let scale = style.scale {
             view = AnyView(view.scaleEffect(x: scale.x, y: scale.y, anchor: style.scaleAnchor.map(UnitPoint.init(spec:)) ?? .center))
         }
@@ -150,6 +160,11 @@ extension View {
         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)) }
+        if let pointer = style.pointerStyle { view = view.pointerStyle(name: pointer) }
+        if let effect = style.symbolEffect { view = AnyView(view.modifier(SymbolEffectModifier(spec: effect))) }
+        // The events a box sends of its own.
+        if let id, style.hover { view = AnyView(view.modifier(HoverReport(id: id))) }
+        if let id, let threshold = style.scrollVisibilityThreshold { view = AnyView(view.modifier(ScrollVisibilityReport(id: id, threshold: threshold))) }
         // A `ScrollViewReader`'s `.id(x)`: the element's own id names it to a `scrollTo` and a scroll position.
         if style.scrollID, let id { view = AnyView(view.id(id)) }
         if let width = style.raw.double("inspectorColumnWidth") { view = AnyView(view.inspectorColumnWidth(width)) }
@@ -180,6 +195,133 @@ extension View {
     }
 }
 
+extension View {
+    /// `.alignmentGuide`: the guide by name on its axis, at `a + b·width + c·height` of the view.
+    func alignmentGuide(spec: AlignmentGuideSpec) -> AnyView {
+        let (a, b, c) = (spec.a, spec.b, spec.c)
+        if spec.axis == "vertical" {
+            return AnyView(alignmentGuide(VerticalAlignment(name: spec.name)) { d in a + b * d.width + c * d.height })
+        }
+        return AnyView(alignmentGuide(HorizontalAlignment(name: spec.name)) { d in a + b * d.width + c * d.height })
+    }
+
+    /// `.pointerStyle`: the Mac's pointer by its CSS name (macOS 15). iOS has no pointer styles of
+    /// this kind (an iPad's pointer takes the shape of what it hovers), so the view is as it was.
+    func pointerStyle(name: String) -> AnyView {
+        #if os(macOS) && !canImport(FoundationBridge)
+        if #available(macOS 15, *) {
+            let style: PointerStyle = switch name {
+            case "pointer", "link": .link
+            case "text": .horizontalText
+            case "vertical-text", "verticalText": .verticalText
+            case "grab", "grabIdle": .grabIdle
+            case "grabbing", "grabActive": .grabActive
+            case "zoom-in", "zoomIn": .zoomIn
+            case "zoom-out", "zoomOut": .zoomOut
+            case "crosshair", "rectSelection": .rectSelection
+            default: .default
+            }
+            return AnyView(self.pointerStyle(style))
+        }
+        #endif
+        return AnyView(self)
+    }
+}
+
+/// `.onHover`: the box's `hover` events, as a pointer (an iPad's, a Mac's) enters and leaves it.
+struct HoverReport: ViewModifier {
+    let id: Int
+    @Environment(\.nativeApp) private var app
+
+    func body(content: Content) -> some View {
+        content.onHover { hovering in app?.dispatch(.hover(id, hovering)) }
+    }
+}
+
+/// `.onScrollVisibilityChange(threshold:)` (iOS 18, macOS 15): the box's `scrollvisibility` as it
+/// crosses the threshold of its scroll view's visible area; earlier systems send none.
+struct ScrollVisibilityReport: ViewModifier {
+    let id: Int
+    let threshold: Double
+    @Environment(\.nativeApp) private var app
+
+    func body(content: Content) -> some View {
+        if #available(iOS 18, macOS 15, *) {
+            content.onScrollVisibilityChange(threshold: threshold) { visible in app?.dispatch(.scrollVisibility(id, visible: visible)) }
+        } else {
+            content
+        }
+    }
+}
+
+/// `.symbolEffect`: SF Symbols' own effect, on the symbols inside. With a `trigger` it plays once each
+/// time the trigger changes; without, it runs while the style has it. `rotate`, `wiggle` and `breathe`,
+/// and a `bounce` that runs on, need iOS 18 / macOS 15; before, the symbol is still.
+struct SymbolEffectModifier: ViewModifier {
+    let spec: SymbolEffectSpec
+
+    private var options: SymbolEffectOptions {
+        var options: SymbolEffectOptions = .default
+        if let speed = spec.speed { options = options.speed(speed) }
+        if let count = spec.repeatCount { options = options.repeat(count) } else if spec.forever { options = options.repeating }
+        return options
+    }
+
+    private var up: Bool { spec.direction != "down" }
+
+    func body(content: Content) -> some View {
+        if let trigger = spec.trigger {
+            discrete(content, trigger: trigger)
+        } else {
+            running(content)
+        }
+    }
+
+    @ViewBuilder
+    private func discrete(_ content: Content, trigger: Double) -> some View {
+        switch spec.effect {
+        case "bounce": content.symbolEffect(up ? .bounce.up : .bounce.down, options: options, value: trigger)
+        case "pulse": content.symbolEffect(.pulse, options: options, value: trigger)
+        case "variableColor": content.symbolEffect(.variableColor, options: options, value: trigger)
+        case "rotate", "wiggle", "breathe":
+            if #available(iOS 18, macOS 15, *) {
+                switch spec.effect {
+                case "rotate": content.symbolEffect(.rotate, options: options, value: trigger)
+                case "wiggle": content.symbolEffect(.wiggle, options: options, value: trigger)
+                default: content.symbolEffect(.breathe, options: options, value: trigger)
+                }
+            } else {
+                content
+            }
+        // Scale, appear and disappear only run on: while the style has them.
+        default: running(content)
+        }
+    }
+
+    @ViewBuilder
+    private func running(_ content: Content) -> some View {
+        switch spec.effect {
+        case "pulse": content.symbolEffect(.pulse, options: options, isActive: true)
+        case "variableColor": content.symbolEffect(.variableColor, options: options, isActive: true)
+        case "scale": content.symbolEffect(up ? .scale.up : .scale.down, options: options, isActive: true)
+        case "appear": content.symbolEffect(.appear, options: options, isActive: true)
+        case "disappear": content.symbolEffect(.disappear, options: options, isActive: true)
+        case "bounce", "rotate", "wiggle", "breathe":
+            if #available(iOS 18, macOS 15, *) {
+                switch spec.effect {
+                case "bounce": content.symbolEffect(up ? .bounce.up : .bounce.down, options: options, isActive: true)
+                case "rotate": content.symbolEffect(.rotate, options: options, isActive: true)
+                case "wiggle": content.symbolEffect(.wiggle, options: options, isActive: true)
+                default: content.symbolEffect(.breathe, options: options, isActive: true)
+                }
+            } else {
+                content
+            }
+        default: content
+        }
+    }
+}
+
 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

package/swift/Sources/SwiftBrowserProtocol/Drawing.swift

@@ -0,0 +1,306 @@
+import Foundation
+
+// The props and event values of the kinds that draw or lay out on the app's
+// say (docs/ops-protocol.md): a custom `layout`, a `canvas`'s commands, and
+// the drag and drop pair.
+
+// MARK: - layout (a custom `Layout`)
+
+/// One axis of a proposal: points, unbounded (`"infinity"`), or unspecified (nil).
+public enum LayoutDimensionSpec: Equatable, Sendable {
+    case points(Double)
+    case infinity
+
+    public init?(json: JSONValue) {
+        if let value = json.double { self = .points(value) } else if json.string == "infinity" { self = .infinity } else { return nil }
+    }
+
+    /// From a length: unbounded when not finite, else to two decimals as the protocol carries it.
+    public init(_ value: Double) {
+        self = value.isFinite ? .points((value * 100).rounded() / 100) : .infinity
+    }
+
+    public var value: Double {
+        switch self {
+        case .points(let points): points
+        case .infinity: .infinity
+        }
+    }
+
+    public var json: JSONValue {
+        switch self {
+        case .points(let points): .number(points)
+        case .infinity: .string("infinity")
+        }
+    }
+}
+
+/// A proposal as Swift's `ProposedViewSize`: nil for an unspecified axis.
+public struct LayoutProposalSpec: Equatable, Sendable {
+    public var width: LayoutDimensionSpec?
+    public var height: LayoutDimensionSpec?
+
+    public init(width: LayoutDimensionSpec?, height: LayoutDimensionSpec?) {
+        self.width = width
+        self.height = height
+    }
+
+    public init?(json: JSONValue) {
+        guard let fields = json.object else { return nil }
+        width = LayoutDimensionSpec(json: fields.value("width"))
+        height = LayoutDimensionSpec(json: fields.value("height"))
+    }
+
+    public var json: JSONValue {
+        .object(["width": width?.json ?? .null, "height": height?.json ?? .null])
+    }
+}
+
+/// A size whose axes may be unbounded.
+public struct LayoutSizeSpec: Equatable, Sendable {
+    public var width: LayoutDimensionSpec
+    public var height: LayoutDimensionSpec
+
+    public init(width: Double, height: Double) {
+        self.width = LayoutDimensionSpec(width)
+        self.height = LayoutDimensionSpec(height)
+    }
+
+    public init?(json: JSONValue) {
+        guard let width = LayoutDimensionSpec(json: json["width"]), let height = LayoutDimensionSpec(json: json["height"]) else { return nil }
+        self.width = width
+        self.height = height
+    }
+
+    public var json: JSONValue { .object(["width": width.json, "height": height.json]) }
+}
+
+/// A subview's sizes for a zero, unspecified and unbounded proposal: what the app's layout measures it by.
+public struct LayoutMeasurementSpec: Equatable, Sendable {
+    public var min: LayoutSizeSpec
+    public var ideal: LayoutSizeSpec
+    public var max: LayoutSizeSpec
+
+    public init(min: LayoutSizeSpec, ideal: LayoutSizeSpec, max: LayoutSizeSpec) {
+        self.min = min
+        self.ideal = ideal
+        self.max = max
+    }
+
+    public var json: JSONValue { .object(["min": min.json, "ideal": ideal.json, "max": max.json]) }
+}
+
+/// `layout`: the app's answer for `proposal` (nil until its first): its size, and one frame per child
+/// relative to its origin; `sizes`, its own size for a zero, unspecified and unbounded proposal.
+public struct LayoutProps: Equatable, Sendable {
+    public struct Frame: Equatable, Sendable {
+        public var x: Double
+        public var y: Double
+        public var width: Double
+        public var height: Double
+    }
+
+    public var proposal: LayoutProposalSpec?
+    public var size: SizeSpec?
+    public var frames: [Frame]?
+    public var min: LayoutSizeSpec?
+    public var ideal: LayoutSizeSpec?
+    public var max: LayoutSizeSpec?
+
+    public init(props: JSONObject) {
+        proposal = LayoutProposalSpec(json: props.value("proposal"))
+        size = SizeSpec(json: props.value("size"))
+        frames = props.array("frames")?.compactMap { json -> Frame? in
+            guard let fields = json.object else { return nil }
+            return Frame(x: fields.double("x") ?? 0, y: fields.double("y") ?? 0, width: fields.double("width") ?? 0, height: fields.double("height") ?? 0)
+        }
+        let sizes = props.object("sizes")
+        min = sizes.flatMap { LayoutSizeSpec(json: $0.value("min")) }
+        ideal = sizes.flatMap { LayoutSizeSpec(json: $0.value("ideal")) }
+        max = sizes.flatMap { LayoutSizeSpec(json: $0.value("max")) }
+    }
+}
+
+// MARK: - canvas
+
+/// What a `canvas` command paints with: a view's shape style, or a gradient in the drawing's own points.
+public enum CanvasShadingSpec: Equatable, Sendable {
+    case style(ShapeStyleSpec)
+    case linearGradient(stops: [GradientStopSpec], start: PointSpec, end: PointSpec)
+    case radialGradient(stops: [GradientStopSpec], center: PointSpec, startRadius: Double, endRadius: Double)
+
+    public init?(json: JSONValue) {
+        if let gradient = json["canvasLinearGradient"].object,
+           let start = PointSpec(json: gradient.value("start")), let end = PointSpec(json: gradient.value("end"))
+        {
+            self = .linearGradient(stops: (gradient.array("stops") ?? []).compactMap(GradientStopSpec.init(json:)), start: start, end: end)
+        } else if let gradient = json["canvasRadialGradient"].object, let center = PointSpec(json: gradient.value("center")) {
+            self = .radialGradient(
+                stops: (gradient.array("stops") ?? []).compactMap(GradientStopSpec.init(json:)), center: center,
+                startRadius: gradient.double("startRadius") ?? 0, endRadius: gradient.double("endRadius") ?? 0
+            )
+        } else if let style = ShapeStyleSpec(json: json) {
+            self = .style(style)
+        } else {
+            return nil
+        }
+    }
+}
+
+/// A `GraphicsContext.Filter`.
+public enum CanvasFilterSpec: Equatable, Sendable {
+    case blur(Double)
+    case shadow(color: ColorSpec?, radius: Double, x: Double, y: Double)
+    case grayscale(Double)
+    case saturation(Double)
+    case brightness(Double)
+    case contrast(Double)
+    case hueRotation(Double)
+    case invert(Double)
+
+    public init?(json: JSONValue) {
+        guard let fields = json.object else { return nil }
+        if let radius = fields.double("blur") {
+            self = .blur(radius)
+        } else if let shadow = fields.object("shadow") {
+            self = .shadow(color: ColorSpec(json: shadow.value("color")), radius: shadow.double("radius") ?? 0, x: shadow.double("x") ?? 0, y: shadow.double("y") ?? 0)
+        } else if let amount = fields.double("grayscale") {
+            self = .grayscale(amount)
+        } else if let amount = fields.double("saturation") {
+            self = .saturation(amount)
+        } else if let amount = fields.double("brightness") {
+            self = .brightness(amount)
+        } else if let amount = fields.double("contrast") {
+            self = .contrast(amount)
+        } else if let degrees = fields.double("hueRotation") {
+            self = .hueRotation(degrees)
+        } else if let amount = fields.double("invert") {
+            self = .invert(amount)
+        } else {
+            return nil
+        }
+    }
+}
+
+/// One thing a `canvas` drew, with the context's state at the time: paths are SVG path data in the drawing's
+/// coordinates (before `transform`), clips in the canvas's own.
+public struct CanvasCommand: Equatable, Sendable {
+    public enum Operation: Equatable, Sendable {
+        case fill(path: String, shading: CanvasShadingSpec, evenOdd: Bool)
+        case stroke(path: String, shading: CanvasShadingSpec, style: StrokeStyleSpec)
+        case image(ImageProps, x: Double, y: Double, anchor: UnitPointSpec, width: Double?, height: Double?, shading: CanvasShadingSpec?)
+        case text(String, x: Double, y: Double, anchor: UnitPointSpec, shading: CanvasShadingSpec, font: FontSpec?)
+    }
+
+    /// `lineWidth`, the caps and joins by name, the dash pattern.
+    public struct StrokeStyleSpec: Equatable, Sendable {
+        public var lineWidth: Double
+        public var lineCap: String?
+        public var lineJoin: String?
+        public var miterLimit: Double?
+        public var dash: [Double]
+        public var dashPhase: Double
+    }
+
+    public var operation: Operation
+    /// `[a, b, c, d, tx, ty]`; nil for the identity.
+    public var transform: [Double]?
+    public var opacity: Double
+    public var blendMode: String?
+    public var clips: [String]
+    public var filters: [CanvasFilterSpec]
+
+    public init?(json: JSONValue) {
+        guard let fields = json.object, let op = fields.string("op") else { return nil }
+        let anchor = UnitPointSpec(json: fields.value("anchor")) ?? UnitPointSpec(x: 0.5, y: 0.5)
+        switch op {
+        case "fill":
+            guard let path = fields.string("path"), let shading = CanvasShadingSpec(json: fields.value("shading")) else { return nil }
+            operation = .fill(path: path, shading: shading, evenOdd: fields.bool("evenOdd") ?? false)
+        case "stroke":
+            guard let path = fields.string("path"), let shading = CanvasShadingSpec(json: fields.value("shading")) else { return nil }
+            operation = .stroke(path: path, shading: shading, style: StrokeStyleSpec(
+                lineWidth: fields.double("lineWidth") ?? 1, lineCap: fields.string("lineCap"), lineJoin: fields.string("lineJoin"),
+                miterLimit: fields.double("miterLimit"), dash: (fields.array("dash") ?? []).compactMap(\.double), dashPhase: fields.double("dashPhase") ?? 0
+            ))
+        case "image":
+            operation = .image(
+                ImageProps(props: fields.object("image") ?? [:]), x: fields.double("x") ?? 0, y: fields.double("y") ?? 0, anchor: anchor,
+                width: fields.double("width"), height: fields.double("height"), shading: CanvasShadingSpec(json: fields.value("shading"))
+            )
+        case "text":
+            guard let text = fields.string("text") else { return nil }
+            operation = .text(
+                text, x: fields.double("x") ?? 0, y: fields.double("y") ?? 0, anchor: anchor,
+                shading: CanvasShadingSpec(json: fields.value("shading")) ?? .style(.hierarchical(level: 1, opacity: 1)), font: FontSpec(json: fields.value("font"))
+            )
+        default:
+            return nil
+        }
+        let matrix = (fields.array("transform") ?? []).compactMap(\.double)
+        transform = matrix.count == 6 ? matrix : nil
+        opacity = fields.double("opacity") ?? 1
+        blendMode = fields.string("blendMode")
+        clips = (fields.array("clips") ?? []).compactMap(\.string)
+        filters = (fields.array("filters") ?? []).compactMap(CanvasFilterSpec.init(json:))
+    }
+}
+
+/// `canvas`: the commands the app's renderer drew for `width` × `height`, the size it was told.
+public struct CanvasProps: Equatable, Sendable {
+    public var width: Double
+    public var height: Double
+    public var commands: [CanvasCommand]
+
+    public init(props: JSONObject) {
+        width = props.double("width") ?? 0
+        height = props.double("height") ?? 0
+        commands = (props.array("commands") ?? []).compactMap(CanvasCommand.init(json:))
+    }
+}
+
+// MARK: - drag and drop
+
+/// `dropdestination`: the MIME patterns (`text/plain`, `image/*`, `*/*`) it takes from outside the app.
+public struct DropDestinationProps: Equatable, Sendable {
+    public var accepts: [String]
+
+    public init(props: JSONObject) {
+        accepts = (props.array("accepts") ?? []).compactMap(\.string)
+    }
+
+    /// Whether text dragged in from outside the app is taken.
+    public var acceptsText: Bool {
+        accepts.contains { $0 == "*/*" || $0.hasPrefix("text/") }
+    }
+
+    /// Whether files (or folders) dragged in from another app may be taken: any pattern beyond text.
+    public var acceptsFiles: Bool {
+        accepts.contains { $0 == "*/*" || !$0.hasPrefix("text/") }
+    }
+
+    /// Whether a file of the MIME type is taken, as the page's `acceptsType` decides (src/dragDrop.ts).
+    public func accepts(mimeType: String) -> Bool {
+        let mime = mimeType.split(separator: ";").first.map { $0.trimmingCharacters(in: .whitespaces).lowercased() } ?? ""
+        let type = mime.isEmpty ? "application/octet-stream" : mime
+        return accepts.contains { pattern in
+            let p = pattern.lowercased()
+            if p == "*/*" { return true }
+            if p.hasSuffix("/*") { return type.hasPrefix(String(p.dropLast())) }
+            return type == p
+        }
+    }
+}
+
+/// What a `draggable` carries natively: a marker and the element's id, as text, so a drop names its source.
+public enum DragPayload {
+    private static let prefix = "\u{2063}swiftbrowser-drag:"
+
+    public static func text(for source: Int) -> String { prefix + String(source) }
+
+    /// The `draggable` a dropped text names, if it is one of these.
+    public static func source(of text: String) -> Int? {
+        guard text.hasPrefix(prefix) else { return nil }
+        return Int(text.dropFirst(prefix.count))
+    }
+}

package/swift/Sources/SwiftBrowserProtocol/Props.swift

@@ -325,9 +325,12 @@ public struct NavSplitProps: Equatable, Sendable {
 public struct NavLinkProps: Equatable, Sendable {
     public var selected: Bool
     public var plain: Bool
+    /// A split view sidebar's link: its row's selection takes the tap.
+    public var selects: Bool
     public init(props: JSONObject) {
         selected = props.bool("selected") ?? false
         plain = props.string("style") == "plain"
+        selects = props.bool("selects") ?? false
     }
 }
 
@@ -576,8 +579,8 @@ public struct TapGestureProps: Equatable, Sendable {
     }
 }
 
-/// The producer-only `native` kind (docs/native.md, "The native escape hatch").
-public struct NativeProps: Equatable, Sendable {
+/// The `registered` kind: a view registered under `name` (docs/native.md, "Registered views").
+public struct RegisteredProps: Equatable, Sendable {
     public var name: String
     public var props: JSONValue
     public init(props: JSONObject) {

package/swift/Sources/SwiftBrowserProtocol/RendererEvent.swift

@@ -158,9 +158,9 @@ public struct RendererEvent: Equatable, Sendable {
     }
     /// 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).
-    public static func native(_ id: Int, name: String, value: JSONValue) -> RendererEvent {
-        with("native", id: id, ["name": .string(name), "value": value])
+    /// What a `registered` element's view sent (docs/native.md, `ViewRegistry`).
+    public static func registered(_ id: Int, name: String, value: JSONValue) -> RendererEvent {
+        with("registered", id: id, ["name": .string(name), "value": value])
     }
 
     /// The device appearance, text size or size class (sent once at launch and on change).
@@ -178,6 +178,27 @@ public struct RendererEvent: Equatable, Sendable {
         return RendererEvent(type: "environment", fields: fields)
     }
 
+    /// A styled box with `hover` was entered (`true`) or left by the pointer (`.onHover`).
+    public static func hover(_ id: Int, _ hovering: Bool) -> RendererEvent { with("hover", id: id, ["value": .bool(hovering)]) }
+    /// A styled box with `scrollVisibility` crossed its threshold of the scroll view's visible area.
+    public static func scrollVisibility(_ id: Int, visible: Bool) -> RendererEvent { with("scrollvisibility", id: id, ["visible": .bool(visible)]) }
+    /// A `draggable` was lifted: the app makes its payload now and keeps it until `dragend`.
+    public static func dragStart(_ id: Int) -> RendererEvent { with("dragstart", id: id) }
+    /// The lifted `draggable` was dropped.
+    public static func dragEnd(_ id: Int) -> RendererEvent { with("dragend", id: id) }
+    /// A drag over a `dropdestination`: `entered`, `exited` or `performed`, with the lifted `draggable`
+    /// (`source`) or what came from outside the app (`items`); the point in the destination's own box.
+    public static func drop(_ id: Int, phase: String, source: Int? = nil, items: [JSONValue]? = nil, x: Double = 0, y: Double = 0) -> RendererEvent {
+        var fields: JSONObject = ["phase": .string(phase), "x": .number(x), "y": .number(y)]
+        if let source { fields["source"] = .number(Double(source)) }
+        if let items { fields["items"] = .array(items) }
+        return with("drop", id: id, fields)
+    }
+    /// A `layout` element's record: the proposal it was placed with and each child's min, ideal and max sizes.
+    public static func layout(_ id: Int, proposal: LayoutProposalSpec, children: [LayoutMeasurementSpec]) -> RendererEvent {
+        with("layout", id: id, ["proposal": proposal.json, "children": .array(children.map(\.json))])
+    }
+
     /// Several events delivered at once; the app renders once for all of them.
     public static func batch(_ events: [RendererEvent]) -> RendererEvent {
         RendererEvent(type: "batch", fields: ["events": .array(events.map(\.json))])

package/swift/Sources/SwiftBrowserProtocol/Style.swift

@@ -38,6 +38,7 @@ public struct Style: Equatable, Sendable {
     public var scale: PointSpec?
     public var scaleAnchor: UnitPointSpec?
     public var shadow: ShadowSpec?
+    public var compositingGroup: Bool
     public var clipped: Bool
     public var tint: ColorSpec?
     public var position: PointSpec?
@@ -77,6 +78,22 @@ public struct Style: Equatable, Sendable {
     public var scrollTo: ScrollToSpec?
     /// `.scrollTransition`: the effects in its three phases.
     public var scrollTransition: ScrollTransitionSpec?
+    /// `.gridCellColumns(_:)`: the `grid` columns the cell spans.
+    public var gridCellColumns: Int?
+    /// `.gridCellAnchor(_:)`: the unit point the cell aligns by in its cell.
+    public var gridCellAnchor: UnitPointSpec?
+    /// `.onScrollVisibilityChange(threshold:)`: the share of the box that counts as visible; the box sends `scrollvisibility`.
+    public var scrollVisibilityThreshold: Double?
+    /// `.alignmentGuide(_:computeValue:)`, as `a + b·width + c·height`.
+    public var alignmentGuide: AlignmentGuideSpec?
+    /// `.rotation3DEffect(_:axis:anchor:perspective:)`.
+    public var rotation3D: Rotation3DSpec?
+    /// `.onHover`: the box sends `hover` as a pointer enters and leaves it.
+    public var hover: Bool
+    /// `.pointerStyle(_:)`: the pointer over the box, by its CSS name (`pointer`, `text`, `grab`…).
+    public var pointerStyle: String?
+    /// `.symbolEffect(_:options:isActive:)` / `.symbolEffect(_:options:value:)`.
+    public var symbolEffect: SymbolEffectSpec?
 
     public init(json: JSONValue) {
         let fields = json.object ?? [:]
@@ -115,6 +132,7 @@ public struct Style: Equatable, Sendable {
         scale = PointSpec(json: fields.value("scale"))
         scaleAnchor = UnitPointSpec(json: fields.value("scaleAnchor"))
         shadow = ShadowSpec(json: fields.value("shadow"))
+        compositingGroup = fields.bool("compositingGroup") ?? false
         clipped = fields.bool("clipped") ?? false
         tint = ColorSpec(json: fields.value("tint"))
         position = PointSpec(json: fields.value("position"))
@@ -152,6 +170,14 @@ public struct Style: Equatable, Sendable {
         scrollID = fields.bool("scrollID") ?? false
         scrollTo = ScrollToSpec(json: fields.value("scrollTo"))
         scrollTransition = ScrollTransitionSpec(json: fields.value("scrollTransition"))
+        gridCellColumns = fields.int("gridCellColumns")
+        gridCellAnchor = UnitPointSpec(json: fields.value("gridCellAnchor"))
+        scrollVisibilityThreshold = fields.object("scrollVisibility")?.double("threshold")
+        alignmentGuide = AlignmentGuideSpec(json: fields.value("alignmentGuide"))
+        rotation3D = Rotation3DSpec(json: fields.value("rotation3D"))
+        hover = fields.bool("hover") ?? false
+        pointerStyle = fields.string("pointerStyle")
+        symbolEffect = SymbolEffectSpec(json: fields.value("symbolEffect"))
     }
 
     public init() {
@@ -162,6 +188,67 @@ public struct Style: Equatable, Sendable {
     public var fieldNames: [String] { raw.keys.sorted() }
 }
 
+/// `.alignmentGuide(_:computeValue:)`: the box's guide `name` on `axis` is `a + b·width + c·height`.
+public struct AlignmentGuideSpec: Equatable, Sendable {
+    /// `horizontal` (a `HorizontalAlignment`: leading, center, trailing…) or `vertical`.
+    public var axis: String
+    public var name: String
+    public var a: Double
+    public var b: Double
+    public var c: Double
+    public init?(json: JSONValue) {
+        guard let fields = json.object, let axis = fields.string("axis"), let name = fields.string("name") else { return nil }
+        let value = (fields.array("value") ?? []).compactMap(\.double)
+        self.axis = axis
+        self.name = name
+        a = value.count > 0 ? value[0] : 0
+        b = value.count > 1 ? value[1] : 0
+        c = value.count > 2 ? value[2] : 0
+    }
+}
+
+/// `.rotation3DEffect`: degrees about `axis`, around `anchor`, with SwiftUI's perspective factor.
+public struct Rotation3DSpec: Equatable, Sendable {
+    public var angle: Double
+    public var x: Double
+    public var y: Double
+    public var z: Double
+    public var anchor: UnitPointSpec?
+    public var perspective: Double
+    public init?(json: JSONValue) {
+        guard let fields = json.object, let angle = fields.double("angle") else { return nil }
+        self.angle = angle
+        let axis = fields.object("axis") ?? [:]
+        x = axis.double("x") ?? 0
+        y = axis.double("y") ?? 0
+        z = axis.double("z") ?? 0
+        anchor = UnitPointSpec(json: fields.value("anchor"))
+        perspective = fields.double("perspective") ?? 1
+    }
+}
+
+/// An SF Symbols effect: `effect` by name (`bounce`, `pulse`, `variableColor`, `scale`, `rotate`, `wiggle`,
+/// `breathe`, `appear`, `disappear`), run while the style has it, or once each time `trigger` changes.
+public struct SymbolEffectSpec: Equatable, Sendable {
+    public var effect: String
+    /// `up` or `down`.
+    public var direction: String?
+    public var speed: Double?
+    /// How many times a run repeats; nil with `forever` false for the effect's own.
+    public var repeatCount: Int?
+    public var forever: Bool
+    public var trigger: Double?
+    public init?(json: JSONValue) {
+        guard let fields = json.object, let effect = fields.string("effect") else { return nil }
+        self.effect = effect
+        direction = fields.string("direction")
+        speed = fields.double("speed")
+        repeatCount = fields.int("repeat")
+        forever = fields.string("repeat") == "forever"
+        trigger = fields.double("trigger")
+    }
+}
+
 /// `.containerRelativeFrame(axes)` as the style hint carries it: `length = a × container + b`.
 public struct ContainerRelativeFrameSpec: Equatable, Sendable {
     public var horizontal: Bool