@swiftbrowser/swift 0.0.0-stage → 0.2.0

package/Sources/SwiftUI/API/Gestures.swift

@@ -0,0 +1,342 @@
+/// Gestures: `DragGesture`, `LongPressGesture` and `TapGesture`, attached with
+/// `.gesture` (and its `highPriority` / `simultaneous` twins, which the shim
+/// treats identically). A drag or long press becomes a `gesture` element
+/// whose child is the content; the renderer tracks pointers on it and sends
+/// `drag` / `longpress` events (see docs/ops-protocol.md, Phase 8). A plain
+/// tap gesture is the Phase 6 `tapgesture` element.
+
+/// Which gestures of a subtree a `.gesture` modifier competes with. Accepted
+/// for source compatibility; the renderer resolves the innermost control.
+public struct GestureMask: OptionSet, Sendable {
+    public let rawValue: UInt
+    public init(rawValue: UInt) { self.rawValue = rawValue }
+    public static let none = GestureMask([])
+    public static let gesture = GestureMask(rawValue: 1)
+    public static let subviews = GestureMask(rawValue: 2)
+    public static let all: GestureMask = [.gesture, .subviews]
+}
+
+/// What the renderer must track for a gesture and what to do with its events.
+/// Combined gestures (`sequenced`, `simultaneously`) merge their configurations.
+public struct _GestureConfig: Sendable {
+    var drag = false
+    var longPress = false
+    var minimumDistance: CGFloat = 10
+    var minimumDuration: Double = 0.5
+    var onDragChanged: [@MainActor (DragGesture.Value) -> Void] = []
+    var onDragEnded: [@MainActor (DragGesture.Value) -> Void] = []
+    var onLongPressChanged: [@MainActor (Bool) -> Void] = []
+    var onLongPressEnded: [@MainActor (Bool) -> Void] = []
+    var onTap: [@MainActor () -> Void] = []
+
+    func merged(with other: _GestureConfig) -> _GestureConfig {
+        var result = self
+        result.drag = drag || other.drag
+        result.longPress = longPress || other.longPress
+        result.minimumDistance = drag && other.drag ? min(minimumDistance, other.minimumDistance)
+            : (other.drag ? other.minimumDistance : minimumDistance)
+        result.minimumDuration = longPress && other.longPress ? min(minimumDuration, other.minimumDuration)
+            : (other.longPress ? other.minimumDuration : minimumDuration)
+        result.onDragChanged += other.onDragChanged
+        result.onDragEnded += other.onDragEnded
+        result.onLongPressChanged += other.onLongPressChanged
+        result.onLongPressEnded += other.onLongPressEnded
+        result.onTap += other.onTap
+        return result
+    }
+}
+
+/// A gesture the renderer recognizes. `Value` is what the callbacks receive.
+public protocol Gesture {
+    associatedtype Value
+    var _config: _GestureConfig { get }
+    /// Adds callbacks for the gesture's changed / ended phases to a config
+    /// (each gesture type knows which lists its `Value` belongs in).
+    static func _adding(to config: _GestureConfig,
+                        changed: (@MainActor (Value) -> Void)?,
+                        ended: (@MainActor (Value) -> Void)?) -> _GestureConfig
+}
+
+extension Gesture {
+    public func onChanged(_ action: @escaping @MainActor (Value) -> Void) -> _ModifiedGesture<Self> {
+        _ModifiedGesture(_config: Self._adding(to: _config, changed: action, ended: nil))
+    }
+
+    public func onEnded(_ action: @escaping @MainActor (Value) -> Void) -> _ModifiedGesture<Self> {
+        _ModifiedGesture(_config: Self._adding(to: _config, changed: nil, ended: action))
+    }
+
+    /// Both gestures are recognized; the shim does not order them.
+    public func sequenced<Other: Gesture>(before other: Other) -> _CombinedGesture<Self, Other> {
+        _CombinedGesture(_config: _config.merged(with: other._config))
+    }
+
+    public func simultaneously<Other: Gesture>(with other: Other) -> _CombinedGesture<Self, Other> {
+        _CombinedGesture(_config: _config.merged(with: other._config))
+    }
+
+    public func exclusively<Other: Gesture>(before other: Other) -> _CombinedGesture<Self, Other> {
+        _CombinedGesture(_config: _config.merged(with: other._config))
+    }
+}
+
+/// A gesture with `onChanged` / `onEnded` callbacks attached; keeps the base
+/// gesture's `Value` so further callbacks can be chained.
+public struct _ModifiedGesture<Base: Gesture>: Gesture {
+    public typealias Value = Base.Value
+    public let _config: _GestureConfig
+
+    public static func _adding(to config: _GestureConfig,
+                               changed: (@MainActor (Value) -> Void)?,
+                               ended: (@MainActor (Value) -> Void)?) -> _GestureConfig {
+        Base._adding(to: config, changed: changed, ended: ended)
+    }
+}
+
+/// Two gestures combined. Its `Value` is never produced: attach callbacks to
+/// the parts before combining them.
+public struct _CombinedGesture<First: Gesture, Second: Gesture>: Gesture {
+    public typealias Value = Void
+    public let _config: _GestureConfig
+
+    public static func _adding(to config: _GestureConfig,
+                               changed: (@MainActor (Value) -> Void)?,
+                               ended: (@MainActor (Value) -> Void)?) -> _GestureConfig {
+        config
+    }
+}
+
+// MARK: - DragGesture
+
+public struct DragGesture: Gesture {
+    /// The drag so far. Coordinates are in the gesture element's own box
+    /// (`coordinateSpace` is accepted and ignored). `predictedEnd…` project
+    /// the velocity a quarter second ahead.
+    public struct Value: Equatable, Sendable {
+        public var location: CGPoint
+        public var startLocation: CGPoint
+        public var translation: CGSize
+        public var velocity: CGSize
+
+        public init(location: CGPoint = .zero, startLocation: CGPoint = .zero,
+                    translation: CGSize = .zero, velocity: CGSize = .zero) {
+            self.location = location
+            self.startLocation = startLocation
+            self.translation = translation
+            self.velocity = velocity
+        }
+
+        public var predictedEndLocation: CGPoint {
+            CGPoint(x: location.x + velocity.width / 4, y: location.y + velocity.height / 4)
+        }
+
+        public var predictedEndTranslation: CGSize {
+            CGSize(width: translation.width + velocity.width / 4, height: translation.height + velocity.height / 4)
+        }
+    }
+
+    public var minimumDistance: CGFloat
+    public var coordinateSpace: CoordinateSpace
+
+    public init(minimumDistance: CGFloat = 10, coordinateSpace: CoordinateSpace = .local) {
+        self.minimumDistance = minimumDistance
+        self.coordinateSpace = coordinateSpace
+    }
+
+    public var _config: _GestureConfig {
+        var config = _GestureConfig()
+        config.drag = true
+        config.minimumDistance = minimumDistance
+        return config
+    }
+
+    public static func _adding(to config: _GestureConfig,
+                               changed: (@MainActor (Value) -> Void)?,
+                               ended: (@MainActor (Value) -> Void)?) -> _GestureConfig {
+        var config = config
+        if let changed { config.onDragChanged.append(changed) }
+        if let ended { config.onDragEnded.append(ended) }
+        return config
+    }
+}
+
+// MARK: - LongPressGesture
+
+/// `Value` is `true` once the press is recognized. The renderer reports only
+/// the recognition, so `onChanged(true)` and `onEnded(true)` fire together.
+public struct LongPressGesture: Gesture {
+    public typealias Value = Bool
+    public var minimumDuration: Double
+    public var maximumDistance: CGFloat
+
+    public init(minimumDuration: Double = 0.5, maximumDistance: CGFloat = 10) {
+        self.minimumDuration = minimumDuration
+        self.maximumDistance = maximumDistance
+    }
+
+    public var _config: _GestureConfig {
+        var config = _GestureConfig()
+        config.longPress = true
+        config.minimumDuration = minimumDuration
+        return config
+    }
+
+    public static func _adding(to config: _GestureConfig,
+                               changed: (@MainActor (Value) -> Void)?,
+                               ended: (@MainActor (Value) -> Void)?) -> _GestureConfig {
+        var config = config
+        if let changed { config.onLongPressChanged.append(changed) }
+        if let ended { config.onLongPressEnded.append(ended) }
+        return config
+    }
+}
+
+// MARK: - TapGesture
+
+/// A tap; `count` is accepted and ignored (every tap is reported).
+public struct TapGesture: Gesture {
+    public typealias Value = Void
+    public var count: Int
+
+    public init(count: Int = 1) { self.count = count }
+
+    public var _config: _GestureConfig { _GestureConfig() }
+
+    public static func _adding(to config: _GestureConfig,
+                               changed: (@MainActor (Value) -> Void)?,
+                               ended: (@MainActor (Value) -> Void)?) -> _GestureConfig {
+        var config = config
+        if let ended { config.onTap.append { ended(()) } }
+        return config
+    }
+}
+
+// MARK: - The element
+
+/// The `gesture` element: props say what to track, the handler parses the
+/// renderer's `drag` / `longpress` events. A `cancelled` drag ends the
+/// gesture with its last value (`onEnded` runs), so state the app resets in
+/// `onEnded` is reset.
+struct _GestureHost {
+    let content: any View
+    let config: _GestureConfig
+}
+extension _GestureHost: _PrimitiveView {}
+extension _GestureHost: _HostView {
+    var _kind: String { "gesture" }
+    func _props(in environment: EnvironmentValues) -> _JSON {
+        .object([
+            "drag": .bool(config.drag),
+            "longPress": .bool(config.longPress),
+            "minimumDistance": .number(config.minimumDistance),
+            "minimumDuration": .number(config.minimumDuration),
+        ])
+    }
+    var _content: [any View] { [content] }
+    var _handler: ((_JSON) -> Void)? {
+        let config = self.config
+        return { payload in
+            guard case .object(let fields) = payload, case .string(let type)? = fields["type"] else { return }
+            MainActor.assumeIsolated {
+                switch type {
+                case "drag":
+                    let value = DragGesture.Value(fields)
+                    let phase: String = if case .string(let p)? = fields["phase"] { p } else { "changed" }
+                    switch phase {
+                    case "began", "changed":
+                        for action in config.onDragChanged { action(value) }
+                    case "ended", "cancelled":
+                        for action in config.onDragEnded { action(value) }
+                    default:
+                        break
+                    }
+                case "longpress":
+                    for action in config.onLongPressChanged { action(true) }
+                    for action in config.onLongPressEnded { action(true) }
+                default:
+                    break
+                }
+            }
+        }
+    }
+}
+
+extension DragGesture.Value {
+    /// Parses a `drag` event's fields; absent fields are zero.
+    init(_ fields: [String: _JSON]) {
+        func point(_ key: String) -> CGPoint {
+            guard case .object(let o)? = fields[key] else { return .zero }
+            return CGPoint(x: _number(o["x"]), y: _number(o["y"]))
+        }
+        func size(_ key: String) -> CGSize {
+            guard case .object(let o)? = fields[key] else { return .zero }
+            return CGSize(width: _number(o["width"]), height: _number(o["height"]))
+        }
+        self.init(location: point("location"), startLocation: point("startLocation"),
+                  translation: size("translation"), velocity: size("velocity"))
+    }
+}
+
+private func _number(_ json: _JSON?) -> Double {
+    if case .number(let n)? = json { return n }
+    return 0
+}
+
+/// `.gesture(_:)`: the content under a `gesture` element when the gesture
+/// drags or long-presses, under a `tapgesture` when it taps, both when it does
+/// both, and plain when the gesture has no callbacks.
+struct _GestureView<Content: View> {
+    let content: Content
+    let config: _GestureConfig
+}
+extension _GestureView: _PrimitiveView {}
+extension _GestureView: _GroupView {
+    var _children: [any View] {
+        var inner: any View = content
+        if !config.onTap.isEmpty {
+            let taps = config.onTap
+            inner = _TapGestureView(content: AnyView(inner)) { for action in taps { action() } }
+        }
+        if config.drag || config.longPress {
+            return [_GestureHost(content: inner, config: config)]
+        }
+        return [inner]
+    }
+}
+
+nonisolated extension View {
+    public func gesture<G: Gesture>(_ gesture: G, including mask: GestureMask = .all) -> some View {
+        _GestureView(content: self, config: gesture._config)
+    }
+
+    public func highPriorityGesture<G: Gesture>(_ gesture: G, including mask: GestureMask = .all) -> some View {
+        _GestureView(content: self, config: gesture._config)
+    }
+
+    public func simultaneousGesture<G: Gesture>(_ gesture: G, including mask: GestureMask = .all) -> some View {
+        _GestureView(content: self, config: gesture._config)
+    }
+
+    /// `onPressingChanged` is told `true` then `false` around `action`, when
+    /// the press is recognized (the renderer reports no earlier touch-down).
+    public func onLongPressGesture(minimumDuration: Double = 0.5, maximumDistance: CGFloat = 10,
+                                   perform action: @escaping @MainActor () -> Void,
+                                   onPressingChanged: (@MainActor (Bool) -> Void)? = nil) -> some View {
+        var config = _GestureConfig()
+        config.longPress = true
+        config.minimumDuration = minimumDuration
+        config.onLongPressEnded = [{ _ in
+            onPressingChanged?(true)
+            action()
+            onPressingChanged?(false)
+        }]
+        return _GestureView(content: self, config: config)
+    }
+
+    public func onLongPressGesture(minimumDuration: Double = 0.5, maximumDistance: CGFloat = 10,
+                                   pressing: (@MainActor (Bool) -> Void)?,
+                                   perform action: @escaping @MainActor () -> Void) -> some View {
+        onLongPressGesture(minimumDuration: minimumDuration, maximumDistance: maximumDistance,
+                           perform: action, onPressingChanged: pressing)
+    }
+}

package/Sources/SwiftUI/API/Glass.swift

@@ -0,0 +1,127 @@
+// iOS 26 Liquid Glass. The page has no refracting glass, so a glass effect
+// is approximated by what it looks like at rest: a translucent material
+// (`regularMaterial`, `ultraThinMaterial` for `.clear`) filling the given
+// shape behind the view, under the glass's tint when it has one. The
+// `interactive` response to touches (the glass swelling under a finger),
+// the merging of nearby glass shapes in a `GlassEffectContainer` and the
+// morphing between `glassEffectID`s are not drawn: containers lay their
+// content out as given and ids are accepted. The glass button styles draw
+// as the bordered ones (`.glass` as `.bordered`, `.glassProminent` as
+// `.borderedProminent`).
+
+/// The material of a glass effect.
+public struct Glass: Equatable, Sendable {
+    enum Variant: Equatable, Sendable {
+        case regular, clear, identity
+    }
+
+    let variant: Variant
+    let tintColor: Color?
+    let isInteractive: Bool
+
+    /// Glass over ordinary content.
+    public static let regular = Glass(variant: .regular, tintColor: nil, isInteractive: false)
+    /// More transparent glass, for media-rich backgrounds.
+    public static let clear = Glass(variant: .clear, tintColor: nil, isInteractive: false)
+    /// No glass at all: the view draws as if the effect were not applied.
+    public static let identity = Glass(variant: .identity, tintColor: nil, isInteractive: false)
+
+    /// Tinted glass: the color is laid over the material.
+    public func tint(_ color: Color?) -> Glass {
+        Glass(variant: variant, tintColor: color, isInteractive: isInteractive)
+    }
+
+    /// Accepted; the page's glass does not react to touches.
+    public func interactive(_ isEnabled: Bool = true) -> Glass {
+        Glass(variant: variant, tintColor: tintColor, isInteractive: isEnabled)
+    }
+
+    var material: Material { variant == .clear ? .ultraThinMaterial : .regularMaterial }
+}
+
+/// The glass behind a view: the material, then the tint, in the shape.
+struct _GlassEffectView<Content: View, S: Shape> {
+    let content: Content
+    let glass: Glass
+    let shape: S
+}
+extension _GlassEffectView: View {
+    var body: some View {
+        if glass.variant == .identity {
+            content
+        } else if let tint = glass.tintColor {
+            content.background(tint, in: shape).background(glass.material, in: shape)
+        } else {
+            content.background(glass.material, in: shape)
+        }
+    }
+}
+
+nonisolated extension View {
+    /// Draws Liquid Glass behind the view in `shape` (a capsule by default);
+    /// see the top of this file for the approximation.
+    public func glassEffect<S: Shape>(_ glass: Glass = .regular, in shape: S = Capsule()) -> some View {
+        _GlassEffectView(content: self, glass: glass, shape: shape)
+    }
+
+    public func glassEffect(_ glass: Glass = .regular, isEnabled: Bool) -> some View {
+        _GlassEffectView(content: self, glass: isEnabled ? glass : .identity, shape: Capsule())
+    }
+
+    /// Accepted: glass shapes keep their own outlines (no morphing between ids).
+    public func glassEffectID<ID: Hashable & Sendable>(_ id: ID?, in namespace: Namespace.ID) -> some View { self }
+
+    /// Accepted: glass shapes keep their own outlines (no union is drawn).
+    public func glassEffectUnion<ID: Hashable & Sendable>(id: ID?, namespace: Namespace.ID) -> some View { self }
+
+    /// Accepted: glass appears and disappears with the view's own transition.
+    public func glassEffectTransition(_ transition: GlassEffectTransition) -> some View { self }
+}
+
+/// How glass appears and disappears; accepted (see `glassEffectTransition`).
+public struct GlassEffectTransition: Equatable, Sendable {
+    let name: String
+    public static let matchedGeometry = GlassEffectTransition(name: "matchedGeometry")
+    public static func matchedGeometry(properties: MatchedGeometryProperties = .frame,
+                                       anchor: UnitPoint = .center) -> GlassEffectTransition { .matchedGeometry }
+    public static let materialize = GlassEffectTransition(name: "materialize")
+    public static let identity = GlassEffectTransition(name: "identity")
+}
+
+/// Groups glass shapes so they can merge on iOS; here it lays its content
+/// out as given (a group: the content's views are its parent's children).
+public struct GlassEffectContainer<Content: View> {
+    let content: Content
+
+    public init(spacing: CGFloat? = nil, @ViewBuilder content: () -> Content) {
+        self.content = content()
+    }
+}
+extension GlassEffectContainer: _PrimitiveView {}
+extension GlassEffectContainer: _GroupView {
+    var _children: [any View] { [content] }
+}
+
+// MARK: - Glass button styles
+
+/// `.buttonStyle(.glass)`: drawn as `.bordered` (a gray capsule).
+public struct GlassButtonStyle: PrimitiveButtonStyle {
+    public init() {}
+    public init(_ glass: Glass) {}
+    public var _name: String { "bordered" }
+}
+
+/// `.buttonStyle(.glassProminent)`: drawn as `.borderedProminent` (a tinted capsule).
+public struct GlassProminentButtonStyle: PrimitiveButtonStyle {
+    public init() {}
+    public var _name: String { "borderedProminent" }
+}
+
+extension PrimitiveButtonStyle where Self == GlassButtonStyle {
+    public static var glass: GlassButtonStyle { GlassButtonStyle() }
+    public static func glass(_ glass: Glass) -> GlassButtonStyle { GlassButtonStyle(glass) }
+}
+
+extension PrimitiveButtonStyle where Self == GlassProminentButtonStyle {
+    public static var glassProminent: GlassProminentButtonStyle { GlassProminentButtonStyle() }
+}

package/Sources/SwiftUI/API/Grid.swift

@@ -0,0 +1,188 @@
+// Grid containers. The renderer lays them out; the Swift side sends the
+// configuration and the children. See docs/ops-protocol.md (Phase 6).
+
+// MARK: - Grid / GridRow
+
+/// A two-dimensional layout of rows (`GridRow`) and columns.
+public struct Grid<Content: View> {
+    let alignment: Alignment
+    let horizontalSpacing: CGFloat?
+    let verticalSpacing: CGFloat?
+    let content: Content
+
+    public init(alignment: Alignment = .center, horizontalSpacing: CGFloat? = nil,
+                verticalSpacing: CGFloat? = nil, @ViewBuilder content: () -> Content) {
+        self.alignment = alignment
+        self.horizontalSpacing = horizontalSpacing
+        self.verticalSpacing = verticalSpacing
+        self.content = content()
+    }
+}
+extension Grid: _PrimitiveView {}
+extension Grid: _HostView {
+    var _kind: String { "grid" }
+    func _props(in environment: EnvironmentValues) -> _JSON {
+        .object([
+            "horizontalSpacing": horizontalSpacing.map(_JSON.number) ?? .null,
+            "verticalSpacing": verticalSpacing.map(_JSON.number) ?? .null,
+            "alignment": .string(alignment._name),
+        ])
+    }
+    var _content: [any View] { [content] }
+}
+
+/// One row of a `Grid`; each child is a cell.
+public struct GridRow<Content: View> {
+    let alignment: VerticalAlignment?
+    let content: Content
+
+    public init(alignment: VerticalAlignment? = nil, @ViewBuilder content: () -> Content) {
+        self.alignment = alignment
+        self.content = content()
+    }
+}
+extension GridRow: _PrimitiveView {}
+extension GridRow: _HostView {
+    var _kind: String { "gridrow" }
+    func _props(in environment: EnvironmentValues) -> _JSON {
+        // Baseline alignments are approximated as `center` (see VerticalAlignment).
+        .object(["alignment": alignment.map { .string($0.name) } ?? .null])
+    }
+    var _content: [any View] { [content] }
+}
+
+/// A `styled` element carrying grid cell hints. `_Style` lives in
+/// Modifiers.swift; this view is protocol-identical for the host.
+struct _GridCellHintView<Content: View> {
+    let content: Content
+    let style: [String: _JSON]
+}
+extension _GridCellHintView: _PrimitiveView {}
+extension _GridCellHintView: _HostView {
+    var _kind: String { "styled" }
+    func _props(in environment: EnvironmentValues) -> _JSON { .object(["style": .object(style)]) }
+    var _content: [any View] { [content] }
+}
+
+nonisolated extension View {
+    /// Makes the cell span `count` columns of its `GridRow`.
+    public func gridCellColumns(_ count: Int) -> some View {
+        _GridCellHintView(content: self, style: ["gridCellColumns": .number(Double(count))])
+    }
+
+    /// Where the cell's content sits when the cell is larger than the content.
+    public func gridCellAnchor(_ anchor: UnitPoint) -> some View {
+        _GridCellHintView(content: self, style: ["gridCellAnchor": .object(["x": .number(anchor.x), "y": .number(anchor.y)])])
+    }
+
+    /// Accepted for source compatibility; the renderer aligns columns by the grid's alignment.
+    public func gridColumnAlignment(_ guide: HorizontalAlignment) -> some View { self }
+
+    /// Accepted for source compatibility; cells are sized by their content.
+    public func gridCellUnsizedAxes(_ axes: Axis.Set) -> some View { self }
+}
+
+// MARK: - GridItem
+
+/// A column of a `LazyVGrid` (or a row of a `LazyHGrid`).
+public struct GridItem: Sendable {
+    public enum Size: Sendable {
+        case fixed(CGFloat)
+        case flexible(minimum: CGFloat = 10, maximum: CGFloat = .infinity)
+        case adaptive(minimum: CGFloat, maximum: CGFloat = .infinity)
+    }
+
+    public var size: Size
+    public var spacing: CGFloat?
+    public var alignment: Alignment?
+
+    public init(_ size: Size = .flexible(), spacing: CGFloat? = nil, alignment: Alignment? = nil) {
+        self.size = size
+        self.spacing = spacing
+        self.alignment = alignment
+    }
+
+    var _json: _JSON {
+        func bound(_ value: CGFloat) -> _JSON { value == .infinity ? .string("infinity") : .number(value) }
+        let size: _JSON = switch self.size {
+        case .fixed(let value):
+            .object(["kind": .string("fixed"), "value": .number(value)])
+        case .flexible(let minimum, let maximum):
+            .object(["kind": .string("flexible"), "minimum": .number(minimum), "maximum": bound(maximum)])
+        case .adaptive(let minimum, let maximum):
+            .object(["kind": .string("adaptive"), "minimum": .number(minimum), "maximum": bound(maximum)])
+        }
+        return .object([
+            "size": size,
+            "spacing": spacing.map(_JSON.number) ?? .null,
+            "alignment": alignment.map { .string($0._name) } ?? .null,
+        ])
+    }
+}
+
+/// Views a lazy grid keeps pinned while scrolling. Accepted for source
+/// compatibility; the renderer does not pin.
+public struct PinnedScrollableViews: OptionSet, Sendable {
+    public let rawValue: UInt32
+    public init(rawValue: UInt32) { self.rawValue = rawValue }
+    public static let sectionHeaders = PinnedScrollableViews(rawValue: 1 << 0)
+    public static let sectionFooters = PinnedScrollableViews(rawValue: 1 << 1)
+}
+
+// MARK: - LazyVGrid / LazyHGrid
+
+/// A grid that grows vertically, filling the given columns row by row.
+public struct LazyVGrid<Content: View> {
+    let columns: [GridItem]
+    let alignment: HorizontalAlignment
+    let spacing: CGFloat?
+    let content: Content
+
+    public init(columns: [GridItem], alignment: HorizontalAlignment = .center, spacing: CGFloat? = nil,
+                pinnedViews: PinnedScrollableViews = .init(), @ViewBuilder content: () -> Content) {
+        self.columns = columns
+        self.alignment = alignment
+        self.spacing = spacing
+        self.content = content()
+    }
+}
+extension LazyVGrid: _PrimitiveView {}
+extension LazyVGrid: _HostView {
+    var _kind: String { "lazyvgrid" }
+    func _props(in environment: EnvironmentValues) -> _JSON {
+        .object([
+            "columns": .array(columns.map(\._json)),
+            "spacing": spacing.map(_JSON.number) ?? .null,
+            "alignment": .string(alignment.name),
+        ])
+    }
+    var _content: [any View] { [content] }
+}
+
+/// A grid that grows horizontally, filling the given rows column by column.
+public struct LazyHGrid<Content: View> {
+    let rows: [GridItem]
+    let alignment: VerticalAlignment
+    let spacing: CGFloat?
+    let content: Content
+
+    public init(rows: [GridItem], alignment: VerticalAlignment = .center, spacing: CGFloat? = nil,
+                pinnedViews: PinnedScrollableViews = .init(), @ViewBuilder content: () -> Content) {
+        self.rows = rows
+        self.alignment = alignment
+        self.spacing = spacing
+        self.content = content()
+    }
+}
+extension LazyHGrid: _PrimitiveView {}
+extension LazyHGrid: _HostView {
+    var _kind: String { "lazyhgrid" }
+    func _props(in environment: EnvironmentValues) -> _JSON {
+        .object([
+            "rows": .array(rows.map(\._json)),
+            "spacing": spacing.map(_JSON.number) ?? .null,
+            "alignment": .string(alignment.name),
+        ])
+    }
+    var _content: [any View] { [content] }
+}