@swiftbrowser/swift 0.1.0 → 0.3.0

package/Sources/SwiftUI/API/Bitmaps.swift

@@ -0,0 +1,254 @@
+import Foundation
+
+// `UIImage` and `CGImage`, as far as SwiftUI apps use them: made from an
+// image file's bytes, from Core Image (Sources/CoreImage), from an SF Symbol
+// or a catalog name, and shown with `Image(uiImage:)`. On iOS SwiftUI
+// re-exports UIKit's `UIImage` and Core Graphics' `CGImage`, so a file that
+// imports SwiftUI alone uses both; here they live in the shim for the same
+// reason. Neither holds pixels: each is a recipe the page draws
+// (Runtime/ImageSource.swift, docs/ops-protocol.md, "Bitmaps and Core Image").
+
+/// A bitmap: `width` × `height` pixels the page produces from a recipe.
+public final class CGImage: @unchecked Sendable {
+    public let width: Int
+    public let height: Int
+    /// The recipe, ending at this image's pixel grid (extent `(0, 0, width, height)`).
+    public let _recipe: _ImageRecipe
+
+    /// Made by Core Image (`CIContext.createCGImage`) from a rendered recipe.
+    public init(_recipe recipe: _ImageRecipe) {
+        _recipe = recipe
+        let extent = recipe.extent.isNull || recipe.extent.isInfinite ? CGRect.zero : recipe.extent
+        width = Int(extent.width)
+        height = Int(extent.height)
+    }
+
+    public var bitsPerComponent: Int { 8 }
+    public var bitsPerPixel: Int { 32 }
+    public var bytesPerRow: Int { width * 4 }
+
+    /// The part of the image inside `rect` (pixels, origin at the top left),
+    /// clipped to the image; nil when they do not overlap.
+    public func cropping(to rect: CGRect) -> CGImage? {
+        let bounds = CGRect(x: 0, y: 0, width: Double(width), height: Double(height))
+        let box = rect.integral.intersection(bounds)
+        guard !box.isNull, box.width >= 1, box.height >= 1 else { return nil }
+        // Core Image's origin is at the bottom left.
+        let flipped = CGRect(x: box.minX, y: Double(height) - box.maxY, width: box.width, height: box.height)
+        return _recipe.rendered(in: flipped).map(CGImage.init(_recipe:))
+    }
+}
+
+/// UIKit's image: a bitmap with a scale (pixels per point), or an SF Symbol
+/// or asset-catalog image the page draws by name.
+public final class UIImage: Hashable, @unchecked Sendable {
+    public enum Orientation: Int, Sendable {
+        case up, down, left, right, upMirrored, downMirrored, leftMirrored, rightMirrored
+    }
+
+    enum Content {
+        case bitmap(_ImageRecipe)
+        case system(String)
+        case named(String)
+    }
+
+    let content: Content
+    /// The size in points: pixels ÷ `scale`.
+    public let size: CGSize
+    public let scale: CGFloat
+    /// Always `.up` for decoded files: the page draws them with their EXIF
+    /// rotation applied, and their size already accounts for it.
+    public let imageOrientation: Orientation
+    /// The `CIImage` a Core Image-backed image was made from (`UIImage(ciImage:)`).
+    public let _ciImage: AnyObject?
+    /// UIKit's `renderingMode`: 0 automatic, 1 always original, 2 always template.
+    public private(set) var _renderingMode = 0
+
+    private init(content: Content, size: CGSize, scale: CGFloat, orientation: Orientation, ciImage: AnyObject?) {
+        self.content = content
+        self.size = size
+        self.scale = scale
+        imageOrientation = orientation
+        _ciImage = ciImage
+    }
+
+    /// The same image with another rendering mode (UIKit's `withRenderingMode`),
+    /// or another bitmap of the same size (`withTintColor`).
+    public func _copy(recipe: _ImageRecipe? = nil, renderingMode: Int) -> UIImage {
+        let copy = UIImage(content: recipe.map(Content.bitmap) ?? content, size: size, scale: scale, orientation: imageOrientation,
+                           ciImage: recipe == nil ? _ciImage : nil)
+        copy._renderingMode = renderingMode
+        return copy
+    }
+
+    /// Whether the image is an SF Symbol (drawn by the page by name).
+    public var _isSymbol: Bool {
+        if case .system = content { return true }
+        return false
+    }
+
+    /// An empty image, 0 × 0.
+    public init() {
+        content = .bitmap(.empty)
+        size = .zero
+        scale = 1
+        imageOrientation = .up
+        _ciImage = nil
+    }
+
+    /// The image in a PNG, JPEG, GIF, WebP, BMP, HEIC or AVIF file; nil when
+    /// the data is not one. Only the header is read here; the page decodes
+    /// the file when it draws it. (Chromium and Firefox draw no HEIC.)
+    public convenience init?(data: Data) {
+        self.init(data: data, scale: 1)
+    }
+
+    public init?(data: Data, scale: CGFloat) {
+        guard let source = _ImageSource(encoded: [UInt8](data)) else { return nil }
+        let factor = scale > 0 ? scale : 1
+        content = .bitmap(_ImageRecipe(source: source))
+        size = CGSize(width: Double(source.width) / factor, height: Double(source.height) / factor)
+        self.scale = factor
+        imageOrientation = .up
+        _ciImage = nil
+    }
+
+    public convenience init(cgImage: CGImage) {
+        self.init(cgImage: cgImage, scale: 1, orientation: .up)
+    }
+
+    /// `orientation` is recorded, not applied: the page draws the bitmap upright.
+    public init(cgImage: CGImage, scale: CGFloat, orientation: Orientation) {
+        let factor = scale > 0 ? scale : 1
+        content = .bitmap(cgImage._recipe)
+        size = CGSize(width: Double(cgImage.width) / factor, height: Double(cgImage.height) / factor)
+        self.scale = factor
+        imageOrientation = orientation
+        _ciImage = nil
+    }
+
+    /// A bitmap from a recipe whose extent is its pixel grid, `(0, 0, w, h)`
+    /// (Core Image's `UIImage(ciImage:)`).
+    public init(_recipe recipe: _ImageRecipe, scale: CGFloat, ciImage: AnyObject?) {
+        let factor = scale > 0 ? scale : 1
+        let extent = recipe.extent.isNull || recipe.extent.isInfinite ? CGRect.zero : recipe.extent
+        content = .bitmap(recipe)
+        size = CGSize(width: extent.width / factor, height: extent.height / factor)
+        self.scale = factor
+        imageOrientation = .up
+        _ciImage = ciImage
+    }
+
+    /// An SF Symbol. Never nil: the shim cannot tell which names exist, and
+    /// the page draws a placeholder for one it does not know. The size is
+    /// that of a symbol at the body text style.
+    public init?(systemName: String) {
+        content = .system(systemName)
+        size = CGSize(width: 20, height: 20)
+        scale = 1
+        imageOrientation = .up
+        _ciImage = nil
+    }
+
+    /// An asset-catalog image. Never nil, and its size is zero: the catalog
+    /// is the page's (docs/ops-protocol.md, "Phase 5"), so only the page knows it.
+    public init?(named name: String) {
+        content = .named(name)
+        size = .zero
+        scale = 1
+        imageOrientation = .up
+        _ciImage = nil
+    }
+
+    /// The bitmap, for an image made from data or a `CGImage`; nil for a
+    /// symbol, a catalog image, an empty image or one backed by a `CIImage`
+    /// (as on iOS).
+    public var cgImage: CGImage? {
+        guard _ciImage == nil, case .bitmap(let recipe) = content, recipe.source != nil else { return nil }
+        return CGImage(_recipe: recipe)
+    }
+
+    /// The recipe the page draws; nil for a symbol or a catalog image.
+    public var _recipe: _ImageRecipe? {
+        if case .bitmap(let recipe) = content { return recipe }
+        return nil
+    }
+
+    public static func == (lhs: UIImage, rhs: UIImage) -> Bool { lhs === rhs }
+    public func hash(into hasher: inout Hasher) { hasher.combine(ObjectIdentifier(self)) }
+}
+
+extension Image {
+    /// The way `Image(_:scale:orientation:label:)` takes a `CGImage`.
+    /// Recorded, not applied: the page draws the bitmap upright.
+    public enum Orientation: UInt8, CaseIterable, Hashable, Sendable {
+        case up, upMirrored, down, downMirrored, left, leftMirrored, right, rightMirrored
+    }
+
+    /// A `UIImage`: its bitmap (drawn by the page from its recipe), or the
+    /// symbol or catalog image it names. The intrinsic size is the image's
+    /// size in points.
+    public init(uiImage: UIImage) {
+        switch uiImage.content {
+        case .system(let name): self.init(source: .system(name), isResizable: false)
+        case .named(let name): self.init(source: .named(name), isResizable: false)
+        case .bitmap(let recipe):
+            self.init(source: .bitmap(recipe, width: uiImage.size.width, height: uiImage.size.height), isResizable: false)
+        }
+    }
+
+    public init(_ cgImage: CGImage, scale: CGFloat, orientation: Orientation = .up, label: Text) {
+        let factor = scale > 0 ? scale : 1
+        self.init(source: .bitmap(cgImage._recipe, width: Double(cgImage.width) / factor, height: Double(cgImage.height) / factor),
+                  isResizable: false)
+    }
+
+    public init(decorative cgImage: CGImage, scale: CGFloat, orientation: Orientation = .up) {
+        self.init(cgImage, scale: scale, orientation: orientation, label: Text(""))
+    }
+
+    /// Sends the bitmap's source to the page once (an `imagedata` op), before
+    /// the element that draws it.
+    @MainActor func _sendBitmapSource(through runtime: _Runtime) {
+        if case .bitmap(let recipe, _, _) = source, let source = recipe.source { runtime._sendImageSource(source) }
+    }
+}
+
+// Core Graphics' rectangle helpers that Core Image's extents need.
+extension CGRect {
+    /// A rectangle covering the whole plane (a `clampedToExtent()` image's extent).
+    public static let infinite = CGRect(x: -Double.greatestFiniteMagnitude / 2, y: -Double.greatestFiniteMagnitude / 2,
+                                        width: Double.greatestFiniteMagnitude, height: Double.greatestFiniteMagnitude)
+    /// No rectangle at all (the intersection of two that do not meet).
+    public static let null = CGRect(x: Double.infinity, y: Double.infinity, width: 0, height: 0)
+
+    public var isInfinite: Bool { size.width >= Double.greatestFiniteMagnitude || size.height >= Double.greatestFiniteMagnitude }
+    public var isNull: Bool { origin.x == .infinity || origin.y == .infinity }
+
+    /// The overlap of two rectangles; `.null` when they do not overlap.
+    public func intersection(_ other: CGRect) -> CGRect {
+        if isNull || other.isNull { return .null }
+        if isInfinite { return other }
+        if other.isInfinite { return self }
+        let x0 = max(minX, other.minX), y0 = max(minY, other.minY)
+        let x1 = min(maxX, other.maxX), y1 = min(maxY, other.maxY)
+        guard x1 > x0, y1 > y0 else { return .null }
+        return CGRect(x: x0, y: y0, width: x1 - x0, height: y1 - y0)
+    }
+
+    /// The smallest rectangle containing both.
+    public func union(_ other: CGRect) -> CGRect {
+        if isNull { return other }
+        if other.isNull { return self }
+        if isInfinite || other.isInfinite { return .infinite }
+        let x0 = min(minX, other.minX), y0 = min(minY, other.minY)
+        return CGRect(x: x0, y: y0, width: max(maxX, other.maxX) - x0, height: max(maxY, other.maxY) - y0)
+    }
+
+    /// The smallest rectangle with integer coordinates containing this one.
+    public var integral: CGRect {
+        if isNull || isInfinite { return self }
+        let x0 = minX.rounded(.down), y0 = minY.rounded(.down)
+        return CGRect(x: x0, y: y0, width: maxX.rounded(.up) - x0, height: maxY.rounded(.up) - y0)
+    }
+}

package/Sources/SwiftUI/API/ButtonStyles.swift

@@ -0,0 +1,96 @@
+/// Custom button styles: `ButtonStyle` and `.buttonStyle(_:)` with one.
+///
+/// A button under a custom style draws what the style's
+/// `makeBody(configuration:)` returns in place of its label, inside the same
+/// `button` element (the page's `plain` style: no tint and no chrome of its
+/// own), so taps still run the action. The style's `@Environment` properties
+/// are resolved like a view's. `isPressed` is always false: the page does not
+/// report a press in progress, so a style's pressed look is never drawn.
+/// A nearer `.buttonStyle` wins, custom or built in.
+
+/// The view a style gets as `configuration.label`: the button's label.
+public struct ButtonStyleConfiguration {
+    public struct Label {
+        let view: AnyView
+    }
+
+    /// The button's role (`.destructive`, `.cancel`), if any.
+    public let role: ButtonRole?
+    public let label: Label
+    /// Always false in the browser (see the file comment).
+    public let isPressed: Bool
+}
+
+extension ButtonStyleConfiguration.Label: View {
+    public typealias Body = Never
+    public var body: Never { fatalError("ButtonStyleConfiguration.Label is a primitive view") }
+}
+extension ButtonStyleConfiguration.Label: _PrimitiveView {}
+extension ButtonStyleConfiguration.Label: _GroupView {
+    var _children: [any View] { [view] }
+}
+
+/// A style that draws a button from its label.
+@MainActor @preconcurrency
+public protocol ButtonStyle {
+    associatedtype Body: View
+    typealias Configuration = ButtonStyleConfiguration
+    @ViewBuilder func makeBody(configuration: Configuration) -> Body
+}
+
+/// The style a `.buttonStyle(_:)` put in the environment.
+struct _CustomButtonStyle {
+    /// `_buttonStyle`'s value under a custom style; the page gets `plain`.
+    static let marker = "\u{1}custom"
+    let makeBody: @MainActor (ButtonStyleConfiguration) -> any View
+}
+
+struct _CustomButtonStyleKey: EnvironmentKey {
+    static var defaultValue: _CustomButtonStyle? { nil }
+}
+
+extension EnvironmentValues {
+    var _customButtonStyle: _CustomButtonStyle? {
+        get { self[_CustomButtonStyleKey.self] }
+        set { self[_CustomButtonStyleKey.self] = newValue }
+    }
+}
+
+/// Runs a style's `makeBody` as a view's body, so that the runtime resolves
+/// the style's `@Environment` and `@State` properties (it reflects into a
+/// stored `ButtonStyle` as into a `ViewModifier`).
+struct _ButtonStyleBody<Style: ButtonStyle>: View {
+    let style: Style
+    let configuration: ButtonStyleConfiguration
+    var body: Style.Body { style.makeBody(configuration: configuration) }
+}
+
+extension _ButtonStyleBody: _HoldsModifier {}
+
+nonisolated extension View {
+    /// Draws the buttons inside with `style` (see the file comment).
+    public func buttonStyle<S: ButtonStyle>(_ style: S) -> some View {
+        // Read on the main actor only, when a button's body is made.
+        nonisolated(unsafe) let style = style
+        return environment(\._buttonStyle, _CustomButtonStyle.marker)
+            .environment(\._customButtonStyle, _CustomButtonStyle { configuration in
+                _ButtonStyleBody(style: style, configuration: configuration)
+            })
+    }
+}
+
+/// A host view whose children depend on the environment (a button under a
+/// custom style); checked by the runtime ahead of `_HostView._content`.
+protocol _EnvironmentContent {
+    func _content(in environment: EnvironmentValues) -> [any View]
+}
+
+extension Button: _EnvironmentContent {
+    func _content(in environment: EnvironmentValues) -> [any View] {
+        guard environment._buttonStyle == _CustomButtonStyle.marker, let style = environment._customButtonStyle else {
+            return [label]
+        }
+        let configuration = ButtonStyleConfiguration(role: role, label: .init(view: AnyView(label)), isPressed: false)
+        return [MainActor.assumeIsolated { style.makeBody(configuration) }]
+    }
+}

package/Sources/SwiftUI/API/Canvas.swift

@@ -0,0 +1,337 @@
+// `Canvas` and its `GraphicsContext`. The renderer closure runs in Swift
+// against a context that records what it draws (paths filled or stroked,
+// images, text) with the context's transform, opacity, blend mode, clip and
+// filters at that moment; the page draws the list as SVG over the canvas's
+// box, clipped to it (Web/src/canvasDrawing.ts, docs/ops-protocol.md,
+// "Canvas"). A canvas fills the size it is offered, which reaches Swift as a
+// `GeometryReader`'s does: the closure runs again with the laid-out size.
+//
+// Not drawn: `resolveSymbol(id:)` views (none resolve), bitmaps
+// (`Image(uiImage:)`), and filters other than blur, shadow and the color
+// adjustments. A resolved image or text knows no size (`.zero`).
+
+public struct Canvas<Symbols: View>: View {
+    let renderer: (inout GraphicsContext, CGSize) -> Void
+    let symbols: Symbols
+    let isOpaque: Bool
+
+    public init(opaque: Bool = false, colorMode: ColorRenderingMode = .nonLinear, rendersAsynchronously: Bool = false,
+                renderer: @escaping (inout GraphicsContext, CGSize) -> Void, @ViewBuilder symbols: () -> Symbols) {
+        self.renderer = renderer
+        self.symbols = symbols()
+        self.isOpaque = opaque
+    }
+
+    public var body: some View {
+        GeometryReader { proxy in
+            _CanvasDrawing(size: proxy.size, renderer: renderer)
+        }
+    }
+}
+
+extension Canvas where Symbols == EmptyView {
+    public init(opaque: Bool = false, colorMode: ColorRenderingMode = .nonLinear, rendersAsynchronously: Bool = false,
+                renderer: @escaping (inout GraphicsContext, CGSize) -> Void) {
+        self.init(opaque: opaque, colorMode: colorMode, rendersAsynchronously: rendersAsynchronously, renderer: renderer) { EmptyView() }
+    }
+}
+
+/// The drawing of a canvas at one size: a `canvas` element whose props are the commands.
+struct _CanvasDrawing {
+    let size: CGSize
+    let renderer: (inout GraphicsContext, CGSize) -> Void
+}
+extension _CanvasDrawing: _PrimitiveView {}
+extension _CanvasDrawing: _HostView {
+    var _kind: String { "canvas" }
+    func _props(in environment: EnvironmentValues) -> _JSON {
+        let recorder = GraphicsContext._Recorder()
+        var context = GraphicsContext(recorder: recorder, environment: environment)
+        renderer(&context, size)
+        return .object([
+            "width": .number(size.width),
+            "height": .number(size.height),
+            "commands": .array(recorder.commands),
+        ])
+    }
+}
+
+/// What a `Canvas` draws with. A copy (as `drawLayer` gives) draws into the
+/// same canvas with its own transform, opacity, clip and filters.
+public struct GraphicsContext {
+    final class _Recorder {
+        var commands: [_JSON] = []
+    }
+
+    let recorder: _Recorder
+    public var environment: EnvironmentValues
+    public var transform: CGAffineTransform = .identity
+    public var opacity: Double = 1
+    public var blendMode: BlendMode = .normal
+    /// The clip paths, already in the canvas's coordinates.
+    var clips: [Path] = []
+    var filters: [_JSON] = []
+
+    init(recorder: _Recorder, environment: EnvironmentValues) {
+        self.recorder = recorder
+        self.environment = environment
+    }
+
+    // MARK: Transform
+
+    public mutating func translateBy(x: CGFloat, y: CGFloat) { transform = transform.translatedBy(x: x, y: y) }
+    public mutating func scaleBy(x: CGFloat, y: CGFloat) { transform = transform.scaledBy(x: x, y: y) }
+    public mutating func rotate(by angle: Angle) { transform = transform.rotated(by: angle.radians) }
+    public mutating func concatenate(_ matrix: CGAffineTransform) { transform = matrix.concatenating(transform) }
+
+    // MARK: Clip
+
+    public struct ClipOptions: OptionSet, Sendable {
+        public let rawValue: UInt32
+        public init(rawValue: UInt32) { self.rawValue = rawValue }
+        /// Clips to the outside of the path: not drawn here (the clip is left as is).
+        public static let inverse = ClipOptions(rawValue: 1)
+    }
+
+    public mutating func clip(to path: Path, style: FillStyle = FillStyle(), options: ClipOptions = []) {
+        guard !options.contains(.inverse) else { return }
+        clips.append(path.applying(transform))
+    }
+
+    public var clipBoundingRect: CGRect {
+        clips.last?.boundingRect ?? CGRect(x: -.greatestFiniteMagnitude / 2, y: -.greatestFiniteMagnitude / 2,
+                                           width: .greatestFiniteMagnitude, height: .greatestFiniteMagnitude)
+    }
+
+    // MARK: Layers and filters
+
+    public func drawLayer(content: (inout GraphicsContext) throws -> Void) rethrows {
+        var layer = self
+        try content(&layer)
+    }
+
+    public struct Filter: Sendable {
+        let json: _JSON
+
+        public static func blur(radius: CGFloat, options: BlurOptions = BlurOptions()) -> Filter {
+            Filter(json: .object(["blur": .number(radius)]))
+        }
+        public static func shadow(color: Color = Color(.sRGBLinear, white: 0, opacity: 0.33), radius: CGFloat,
+                                  x: CGFloat = 0, y: CGFloat = 0, blendMode: BlendMode = .normal, options: ShadowOptions = ShadowOptions()) -> Filter {
+            Filter(json: .object(["shadow": .object(["color": color._json, "radius": .number(radius), "x": .number(x), "y": .number(y)])]))
+        }
+        public static func grayscale(_ amount: Double) -> Filter { Filter(json: .object(["grayscale": .number(amount)])) }
+        public static func saturation(_ amount: Double) -> Filter { Filter(json: .object(["saturation": .number(amount)])) }
+        public static func brightness(_ amount: Double) -> Filter { Filter(json: .object(["brightness": .number(amount)])) }
+        public static func contrast(_ amount: Double) -> Filter { Filter(json: .object(["contrast": .number(amount)])) }
+        public static func hueRotation(_ angle: Angle) -> Filter { Filter(json: .object(["hueRotation": .number(angle.degrees)])) }
+        public static func colorInvert(_ amount: Double = 1) -> Filter { Filter(json: .object(["invert": .number(amount)])) }
+        /// Not drawn.
+        public static func colorMultiply(_ color: Color) -> Filter { Filter(json: .null) }
+        /// Not drawn.
+        public static var luminanceToAlpha: Filter { Filter(json: .null) }
+        /// Not drawn.
+        public static func alphaThreshold(min: Double, max: Double = 1, color: Color = .black) -> Filter { Filter(json: .null) }
+    }
+
+    public struct BlurOptions: OptionSet, Sendable {
+        public let rawValue: UInt32
+        public init(rawValue: UInt32) { self.rawValue = rawValue }
+        public static let opaque = BlurOptions(rawValue: 1)
+        public static let dithersResult = BlurOptions(rawValue: 2)
+    }
+
+    public struct ShadowOptions: OptionSet, Sendable {
+        public let rawValue: UInt32
+        public init(rawValue: UInt32) { self.rawValue = rawValue }
+        public static let shadowAbove = ShadowOptions(rawValue: 1)
+        public static let shadowOnly = ShadowOptions(rawValue: 2)
+        public static let invertsAlpha = ShadowOptions(rawValue: 4)
+        public static let disablesGroup = ShadowOptions(rawValue: 8)
+    }
+
+    public struct FilterOptions: OptionSet, Sendable {
+        public let rawValue: UInt32
+        public init(rawValue: UInt32) { self.rawValue = rawValue }
+        public static let linearColor = FilterOptions(rawValue: 1)
+    }
+
+    public mutating func addFilter(_ filter: Filter, options: FilterOptions = FilterOptions()) {
+        if filter.json != .null { filters.append(filter.json) }
+    }
+
+    // MARK: Shading
+
+    /// A paint: a color, a style, or a gradient in the context's coordinates.
+    public struct Shading: Sendable {
+        let json: _JSON
+
+        public static var foreground: Shading { Shading(json: ForegroundStyle()._json) }
+        public static func color(_ color: Color) -> Shading { Shading(json: color._json) }
+        public static func color(_ colorSpace: Color.RGBColorSpace = .sRGB, red: Double, green: Double, blue: Double, opacity: Double = 1) -> Shading {
+            .color(Color(colorSpace, red: red, green: green, blue: blue, opacity: opacity))
+        }
+        public static func color(_ colorSpace: Color.RGBColorSpace = .sRGB, white: Double, opacity: Double = 1) -> Shading {
+            .color(Color(colorSpace, white: white, opacity: opacity))
+        }
+        public static func style<S: ShapeStyle>(_ style: S) -> Shading { Shading(json: style._json) }
+        public static func palette(_ array: [Shading]) -> Shading { array.first ?? .foreground }
+
+        public static func linearGradient(_ gradient: Gradient, startPoint: CGPoint, endPoint: CGPoint, options: GradientOptions = GradientOptions()) -> Shading {
+            Shading(json: .object(["canvasLinearGradient": .object([
+                "stops": gradient._stopsJSON,
+                "start": point(startPoint), "end": point(endPoint),
+            ])]))
+        }
+        public static func radialGradient(_ gradient: Gradient, center: CGPoint, startRadius: CGFloat, endRadius: CGFloat, options: GradientOptions = GradientOptions()) -> Shading {
+            Shading(json: .object(["canvasRadialGradient": .object([
+                "stops": gradient._stopsJSON,
+                "center": point(center),
+                "startRadius": .number(startRadius), "endRadius": .number(endRadius),
+            ])]))
+        }
+        /// Drawn as its first color.
+        public static func conicGradient(_ gradient: Gradient, center: CGPoint, angle: Angle = Angle(), options: GradientOptions = GradientOptions()) -> Shading {
+            .color(gradient.stops.first?.color ?? .clear)
+        }
+
+        static func point(_ p: CGPoint) -> _JSON { .object(["x": .number(p.x), "y": .number(p.y)]) }
+    }
+
+    public struct GradientOptions: OptionSet, Sendable {
+        public let rawValue: UInt32
+        public init(rawValue: UInt32) { self.rawValue = rawValue }
+        public static let `repeat` = GradientOptions(rawValue: 1)
+        public static let mirror = GradientOptions(rawValue: 2)
+        public static let linearColor = GradientOptions(rawValue: 4)
+    }
+
+    // MARK: Drawing
+
+    public func fill(_ path: Path, with shading: Shading, style: FillStyle = FillStyle()) {
+        var command: [String: _JSON] = ["op": .string("fill"), "path": .string(path._svg), "shading": shading.json]
+        if style.isEOFilled { command["evenOdd"] = .bool(true) }
+        record(command)
+    }
+
+    public func stroke(_ path: Path, with shading: Shading, style: StrokeStyle) {
+        var command: [String: _JSON] = [
+            "op": .string("stroke"), "path": .string(path._svg), "shading": shading.json,
+            "lineWidth": .number(style.lineWidth),
+        ]
+        command["lineCap"] = .string(style.lineCap == .round ? "round" : style.lineCap == .square ? "square" : "butt")
+        command["lineJoin"] = .string(style.lineJoin == .round ? "round" : style.lineJoin == .bevel ? "bevel" : "miter")
+        command["miterLimit"] = .number(style.miterLimit)
+        if !style.dash.isEmpty {
+            command["dash"] = .array(style.dash.map { .number($0) })
+            command["dashPhase"] = .number(style.dashPhase)
+        }
+        record(command)
+    }
+
+    public func stroke(_ path: Path, with shading: Shading, lineWidth: CGFloat = 1) {
+        stroke(path, with: shading, style: StrokeStyle(lineWidth: lineWidth))
+    }
+
+    /// An image or text made ready to draw (`resolve(_:)`); its size is not known here.
+    public struct ResolvedImage {
+        let image: Image
+        public var size: CGSize { .zero }
+        public var baseline: CGFloat { 0 }
+        public var shading: Shading?
+    }
+
+    public struct ResolvedText {
+        let text: Text
+        public var shading: Shading = .foreground
+        public func measure(in size: CGSize) -> CGSize { .zero }
+        public func firstBaseline(in size: CGSize) -> CGFloat { 0 }
+        public func lastBaseline(in size: CGSize) -> CGFloat { 0 }
+    }
+
+    /// A view passed to `Canvas(renderer:symbols:)`; none resolve here.
+    public struct ResolvedSymbol {
+        public var size: CGSize { .zero }
+    }
+
+    public func resolve(_ image: Image) -> ResolvedImage { ResolvedImage(image: image) }
+    public func resolve(_ text: Text) -> ResolvedText { ResolvedText(text: text) }
+    public func resolveSymbol<ID: Hashable>(id: ID) -> ResolvedSymbol? { nil }
+
+    public func draw(_ image: ResolvedImage, at point: CGPoint, anchor: UnitPoint = .center) {
+        drawImage(image.image, at: point, anchor: anchor, shading: image.shading)
+    }
+
+    public func draw(_ image: ResolvedImage, in rect: CGRect, style: FillStyle = FillStyle()) {
+        drawImage(image.image, in: rect, shading: image.shading)
+    }
+
+    public func draw(_ image: Image, at point: CGPoint, anchor: UnitPoint = .center) {
+        drawImage(image, at: point, anchor: anchor, shading: nil)
+    }
+
+    public func draw(_ image: Image, in rect: CGRect, style: FillStyle = FillStyle()) {
+        drawImage(image, in: rect, shading: nil)
+    }
+
+    public func draw(_ text: ResolvedText, at point: CGPoint, anchor: UnitPoint = .center) {
+        drawText(text.text, at: point, anchor: anchor, shading: text.shading)
+    }
+
+    public func draw(_ text: ResolvedText, in rect: CGRect) {
+        drawText(text.text, at: CGPoint(x: rect.minX, y: rect.minY), anchor: .topLeading, shading: text.shading)
+    }
+
+    public func draw(_ text: Text, at point: CGPoint, anchor: UnitPoint = .center) {
+        drawText(text, at: point, anchor: anchor, shading: .foreground)
+    }
+
+    public func draw(_ text: Text, in rect: CGRect) {
+        drawText(text, at: CGPoint(x: rect.minX, y: rect.minY), anchor: .topLeading, shading: .foreground)
+    }
+
+    public func draw(_ symbol: ResolvedSymbol, at point: CGPoint, anchor: UnitPoint = .center) {}
+    public func draw(_ symbol: ResolvedSymbol, in rect: CGRect) {}
+
+    private func drawImage(_ image: Image, at point: CGPoint, anchor: UnitPoint, shading: Shading?) {
+        var command: [String: _JSON] = [
+            "op": .string("image"), "image": image._props(in: environment),
+            "x": .number(point.x), "y": .number(point.y), "anchor": anchor._json,
+        ]
+        if let shading { command["shading"] = shading.json }
+        record(command)
+    }
+
+    private func drawImage(_ image: Image, in rect: CGRect, shading: Shading?) {
+        var command: [String: _JSON] = [
+            "op": .string("image"), "image": image._props(in: environment),
+            "x": .number(rect.minX), "y": .number(rect.minY), "anchor": UnitPoint.topLeading._json,
+            "width": .number(rect.width), "height": .number(rect.height),
+        ]
+        if let shading { command["shading"] = shading.json }
+        record(command)
+    }
+
+    private func drawText(_ text: Text, at point: CGPoint, anchor: UnitPoint, shading: Shading) {
+        var command: [String: _JSON] = [
+            "op": .string("text"), "text": .string(text.content),
+            "x": .number(point.x), "y": .number(point.y), "anchor": anchor._json,
+            "shading": shading.json,
+        ]
+        if let font = environment.font { command["font"] = font._json }
+        record(command)
+    }
+
+    /// Adds the context's state to a command and records it.
+    private func record(_ command: [String: _JSON]) {
+        var command = command
+        if !transform.isIdentity {
+            command["transform"] = .array([transform.a, transform.b, transform.c, transform.d, transform.tx, transform.ty].map { .number($0) })
+        }
+        if opacity < 1 { command["opacity"] = .number(max(0, opacity)) }
+        if blendMode != .normal { command["blendMode"] = .string(blendMode._css) }
+        if !clips.isEmpty { command["clips"] = .array(clips.map { .string($0._svg) }) }
+        if !filters.isEmpty { command["filters"] = .array(filters) }
+        recorder.commands.append(.object(command))
+    }
+}