@swiftbrowser/native 0.18.3 → 0.21.0

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

package/swift/Sources/SwiftBrowserTree/OpTree.swift

@@ -26,6 +26,13 @@ public final class OpTree {
     /// The root container, element id 0.
     public let root: ElementNode
     private var nodes: [Int: ElementNode]
+    /// Screens (`navscreen`) removed lately, with when: a navigation stack
+    /// keeps drawing one through the pop that takes it off (SwiftUI asks
+    /// the destination for it while the transition runs; the app has
+    /// removed it by then, synchronously on the pop's tap).
+    private var poppedScreens: [Int: (node: ElementNode, at: Date)] = [:]
+    /// How long a popped screen stays available: past any pop transition.
+    private static let poppedScreenLife: TimeInterval = 3
     /// The ops of the current pass, until its `commit`.
     private var pending: [Op] = []
     /// How many passes were committed.
@@ -57,6 +64,18 @@ public final class OpTree {
     /// The element with this id, when it exists (created and not removed).
     public func node(_ id: Int) -> ElementNode? { nodes[id] }
 
+    /// A `navscreen` removed within the last moments (`poppedScreenLife`),
+    /// its subtree as it was: what a stack shows while the pop that removed
+    /// it is still animating. Nil once it is forgotten or its id reused.
+    public func poppedScreen(_ id: Int) -> ElementNode? {
+        guard let entry = poppedScreens[id] else { return nil }
+        guard Date().timeIntervalSince(entry.at) < Self.poppedScreenLife else {
+            poppedScreens[id] = nil
+            return nil
+        }
+        return entry.node
+    }
+
     /// How many elements exist, the root included.
     public var count: Int { nodes.count }
 
@@ -126,6 +145,7 @@ public final class OpTree {
                 // for a live id replaces it in place (the web renderer does the same).
                 detach(existing)
             }
+            poppedScreens[id] = nil
             nodes[id] = ElementNode(id: id, kind: kind, props: props)
         case .update(let id, let props):
             guard let node = nodes[id] else { throw OpTreeError("update: no element \(id)") }
@@ -155,6 +175,11 @@ public final class OpTree {
             guard let node = nodes[id] else { throw OpTreeError("remove: no element \(id)") }
             detach(node)
             forget(node)
+            if node.kind == "navscreen" {
+                let now = Date()
+                poppedScreens = poppedScreens.filter { now.timeIntervalSince($0.value.at) < Self.poppedScreenLife }
+                poppedScreens[id] = (node, now)
+            }
         case .commit:
             break
         case .other(let name, let fields):

package/wasm/SwiftBrowserNative.wasm

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/wasm/SwiftBrowserNative.wasm
-size: 50071156 bytes
-sha256: f976d6cb271c4fe729a1e960f0ddd5105bc868d35c85a4c1eb8bf79d19ac5e93
+size: 50264748 bytes
+sha256: 7712613a6aed40822224c0e4042dab20c7de0e5708ff6ad8ce79f52013b76472

package/dist/native.d.ts

@@ -1,19 +0,0 @@
-/**
- * `<Native name props onEvent>`: the escape hatch (docs/native.md). The
- * element kind `native`, which only this producer emits, names a SwiftUI view
- * the app registered with `NativeRegistry.register(name)`; `props` reach it
- * as JSON, its children as SwiftUI views, and what it sends back arrives at
- * `onEvent`.
- */
-import { type ReactElement, type ReactNode } from 'react';
-export interface NativeProps {
-    /** The name registered on the Swift side. */
-    name: string;
-    /** JSON-serializable props for the view. */
-    props?: Record<string, unknown>;
-    /** A value the native view sent (`context.send(value)`). */
-    onEvent?: (value: unknown) => void;
-    children?: ReactNode;
-}
-export declare function Native({ name, props, onEvent, children }: NativeProps): ReactElement;
-//# sourceMappingURL=native.d.ts.map

package/dist/native.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"native.d.ts","sourceRoot":"","sources":["../src/native.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAiB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzE,MAAM,WAAW,WAAW;IAC1B,6CAA6C;IAC7C,IAAI,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,4DAA4D;IAC5D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAUD,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,WAAW,GAAG,YAAY,CAMpF"}

package/dist/native.js

@@ -1,17 +0,0 @@
-/**
- * `<Native name props onEvent>`: the escape hatch (docs/native.md). The
- * element kind `native`, which only this producer emits, names a SwiftUI view
- * the app registered with `NativeRegistry.register(name)`; `props` reach it
- * as JSON, its children as SwiftUI views, and what it sends back arrives at
- * `onEvent`.
- */
-import { createElement } from 'react';
-export function Native({ name, props, onEvent, children }) {
-    // The host element of @swiftbrowser/react: `sb` with the protocol kind and
-    // props, and the handlers by event type (packages/react/src/host/instance.ts).
-    const hostProps = { kind: 'native', props: { name, props: props ?? {} } };
-    if (onEvent)
-        hostProps['on'] = { native: (event) => onEvent(event.value) };
-    return children === undefined ? createElement('sb', hostProps) : createElement('sb', hostProps, children);
-}
-//# sourceMappingURL=native.js.map

package/dist/native.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"native.js","sourceRoot":"","sources":["../src/native.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,aAAa,EAAqC,MAAM,OAAO,CAAC;AAoBzE,MAAM,UAAU,MAAM,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAe;IACpE,2EAA2E;IAC3E,+EAA+E;IAC/E,MAAM,SAAS,GAA4B,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,EAAE,EAAE,EAAE,CAAC;IACnG,IAAI,OAAO;QAAE,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,CAAC,KAAkB,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;IACxF,OAAO,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC;AAC5G,CAAC"}

package/src/native.ts

@@ -1,35 +0,0 @@
-/**
- * `<Native name props onEvent>`: the escape hatch (docs/native.md). The
- * element kind `native`, which only this producer emits, names a SwiftUI view
- * the app registered with `NativeRegistry.register(name)`; `props` reach it
- * as JSON, its children as SwiftUI views, and what it sends back arrives at
- * `onEvent`.
- */
-
-import { createElement, type ReactElement, type ReactNode } from 'react';
-
-export interface NativeProps {
-  /** The name registered on the Swift side. */
-  name: string;
-  /** JSON-serializable props for the view. */
-  props?: Record<string, unknown>;
-  /** A value the native view sent (`context.send(value)`). */
-  onEvent?: (value: unknown) => void;
-  children?: ReactNode;
-}
-
-/** The shape of a `native` event (`RendererEvent` has no such member). */
-interface NativeEvent {
-  type: 'native';
-  id: number;
-  name: string;
-  value: unknown;
-}
-
-export function Native({ name, props, onEvent, children }: NativeProps): ReactElement {
-  // The host element of @swiftbrowser/react: `sb` with the protocol kind and
-  // props, and the handlers by event type (packages/react/src/host/instance.ts).
-  const hostProps: Record<string, unknown> = { kind: 'native', props: { name, props: props ?? {} } };
-  if (onEvent) hostProps['on'] = { native: (event: NativeEvent) => onEvent(event.value) };
-  return children === undefined ? createElement('sb', hostProps) : createElement('sb', hostProps, children);
-}

package/swift/Sources/SwiftBrowserNative/Runtime/NativeRegistry.swift

@@ -1,53 +0,0 @@
-#if canImport(SwiftUI)
-import Foundation
-import SwiftBrowserProtocol
-import SwiftBrowserTree
-import SwiftUI
-
-/// What a registered native view gets: the element's `props` as the app
-/// wrote them, its children (SwiftUI views the app put inside it) and a way
-/// to send a value back, which reaches the element's `onEvent` in JavaScript.
-public struct NativeViewContext {
-    public let id: Int
-    public let props: JSONValue
-    public let children: [ElementNode]
-    public let send: (JSONValue) -> Void
-
-    /// The children as a view (built on the main actor, as views are).
-    @MainActor public var content: some View {
-        ForEach(children) { ElementView(node: $0) }
-    }
-}
-
-/// The escape hatch (docs/native.md): the `native` element kind, which only
-/// a JavaScript producer emits, names a view the Swift app registered.
-///
-/// ```swift
-/// NativeRegistry.register("MapView") { context in
-///     MapView(region: context.props["region"]) { context.send(["tapped": true]) }
-/// }
-/// ```
-///
-/// ```tsx
-/// <Native name="MapView" props={{ region }} onEvent={(value) => …} />
-/// ```
-@MainActor
-public enum NativeRegistry {
-    public typealias Builder = (NativeViewContext) -> AnyView
-    private static var builders: [String: Builder] = [:]
-
-    public static func register<V: View>(_ name: String, @ViewBuilder _ builder: @escaping (NativeViewContext) -> V) {
-        builders[name] = { AnyView(builder($0)) }
-    }
-
-    public static func unregister(_ name: String) {
-        builders[name] = nil
-    }
-
-    public static func isRegistered(_ name: String) -> Bool { builders[name] != nil }
-
-    static func view(name: String, context: NativeViewContext) -> AnyView? {
-        builders[name]?(context)
-    }
-}
-#endif