@swiftbrowser/swift 0.0.0-stage → 0.2.0

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))
+    }
+}

package/Sources/SwiftUI/API/Color.swift

@@ -0,0 +1,237 @@
+public struct Color: Hashable, Sendable {
+    enum Storage: Hashable, Sendable {
+        case rgba(red: Double, green: Double, blue: Double, opacity: Double)
+        case semantic(name: String, opacity: Double)
+        /// A `.colorset` from the asset catalog (light/dark resolved by the renderer).
+        case named(name: String, opacity: Double)
+    }
+
+    let storage: Storage
+
+    public init(red: Double, green: Double, blue: Double, opacity: Double = 1) {
+        storage = .rgba(red: red, green: green, blue: blue, opacity: opacity)
+    }
+
+    /// A color from the asset catalog, possibly namespaced (`"dough/plain-bg"`).
+    /// `Color(_:bundle:)` is FoundationBridge's (see `Image.init(_:)`).
+    public init(_ name: String) {
+        storage = .named(name: name, opacity: 1)
+    }
+
+    public init(white: Double, opacity: Double = 1) {
+        storage = .rgba(red: white, green: white, blue: white, opacity: opacity)
+    }
+
+    init(semantic name: String) {
+        storage = .semantic(name: name, opacity: 1)
+    }
+
+    /// A color from hue, saturation and brightness (each 0…1; a hue of 1 is red again).
+    public init(hue: Double, saturation: Double, brightness: Double, opacity: Double = 1) {
+        let h = (hue - hue.rounded(.down)) * 6
+        let s = max(0, min(1, saturation)), v = max(0, min(1, brightness))
+        let sector = Int(h) % 6
+        let f = h - Double(Int(h))
+        let (p, q, t) = (v * (1 - s), v * (1 - s * f), v * (1 - s * (1 - f)))
+        let (r, g, b): (Double, Double, Double) = switch sector {
+        case 0: (v, t, p)
+        case 1: (q, v, p)
+        case 2: (p, v, t)
+        case 3: (p, q, v)
+        case 4: (t, p, v)
+        default: (v, p, q)
+        }
+        storage = .rgba(red: r, green: g, blue: b, opacity: opacity)
+    }
+
+    /// A semantic color the page resolves per color scheme, by its iOS name
+    /// (`label`, `systemGroupedBackground`…): UIKit's `Color(uiColor:)`.
+    public init(_semantic name: String, opacity: Double = 1) {
+        storage = .semantic(name: name, opacity: opacity)
+    }
+
+    // iOS system palette: semantic, so the page draws each in the color
+    // scheme's appearance (`--sb-color-<name>`), as iOS does.
+    public static let red = Color(semantic: "red")
+    public static let orange = Color(semantic: "orange")
+    public static let yellow = Color(semantic: "yellow")
+    public static let green = Color(semantic: "green")
+    public static let mint = Color(semantic: "mint")
+    public static let teal = Color(semantic: "teal")
+    public static let cyan = Color(semantic: "cyan")
+    public static let blue = Color(semantic: "blue")
+    public static let indigo = Color(semantic: "indigo")
+    public static let purple = Color(semantic: "purple")
+    public static let pink = Color(semantic: "pink")
+    public static let brown = Color(semantic: "brown")
+    public static let gray = Color(semantic: "gray")
+    public static let black = Color(red: 0, green: 0, blue: 0)
+    public static let white = Color(red: 1, green: 1, blue: 1)
+
+    // Semantic colors the renderer resolves per color scheme.
+    public static let clear = Color(semantic: "clear")
+    public static let primary = Color(semantic: "primary")
+    public static let secondary = Color(semantic: "secondary")
+    public static let accentColor = Color(semantic: "accent")
+
+    public func opacity(_ opacity: Double) -> Color {
+        switch storage {
+        case .rgba(let r, let g, let b, let a):
+            Color(red: r, green: g, blue: b, opacity: a * opacity)
+        case .semantic(let name, let a):
+            Color(storage: .semantic(name: name, opacity: a * opacity))
+        case .named(let name, let a):
+            Color(storage: .named(name: name, opacity: a * opacity))
+        }
+    }
+
+    init(storage: Storage) { self.storage = storage }
+
+    public var _json: _JSON {
+        switch storage {
+        case .rgba(let r, let g, let b, let a):
+            .object(["r": .number(r), "g": .number(g), "b": .number(b), "a": .number(a)])
+        case .semantic(let name, let a):
+            a == 1 ? .object(["name": .string(name)]) : .object(["name": .string(name), "a": .number(a)])
+        case .named(let name, let a):
+            .object(["named": .string(name), "opacity": .number(a)])
+        }
+    }
+}
+
+// MARK: - Shapes
+
+/// A 2D shape: its outline for a rectangle, drawn as a view (filled with the
+/// foreground style unless `fill` or `stroke` say otherwise).
+///
+/// The built-in shapes (`_name` other than `"path"`) are drawn by the page
+/// from their name and corner radius. Any other shape is drawn from its
+/// `path(in:)` (Shape.swift): the page reports the size it laid the shape out
+/// at, and the path for that size comes back as SVG, one render later.
+public protocol Shape: Sendable, Animatable, View {
+    func path(in rect: CGRect) -> Path
+    /// The built-in shape the page draws by name, or `"path"`.
+    var _name: String { get }
+    var _cornerRadius: CGFloat { get }
+}
+
+nonisolated extension Shape {
+    public var _name: String { "path" }
+    public var _cornerRadius: CGFloat { 0 }
+}
+
+nonisolated public struct Rectangle: Shape {
+    public init() {}
+    public var _name: String { "rectangle" }
+    public var _cornerRadius: CGFloat { 0 }
+    public func path(in rect: CGRect) -> Path { Path(rect) }
+}
+
+/// Accepted for source compatibility; corners render continuous either way.
+public enum RoundedCornerStyle: Hashable, Sendable {
+    case circular, continuous
+}
+
+nonisolated public struct RoundedRectangle: Shape {
+    public var cornerRadius: CGFloat
+    public var style: RoundedCornerStyle
+    public init(cornerRadius: CGFloat, style: RoundedCornerStyle = .continuous) {
+        self.cornerRadius = cornerRadius
+        self.style = style
+    }
+    public init(cornerSize: CGSize, style: RoundedCornerStyle = .continuous) {
+        cornerRadius = min(cornerSize.width, cornerSize.height)
+        self.style = style
+    }
+    public var _name: String { "roundedRectangle" }
+    public var _cornerRadius: CGFloat { cornerRadius }
+    public func path(in rect: CGRect) -> Path { Path(roundedRect: rect, cornerRadius: cornerRadius, style: style) }
+}
+
+nonisolated public struct Circle: Shape {
+    public init() {}
+    public var _name: String { "circle" }
+    public var _cornerRadius: CGFloat { 9999 }
+    /// The largest circle centered in `rect`.
+    public func path(in rect: CGRect) -> Path {
+        let side = min(rect.width, rect.height)
+        return Path(ellipseIn: CGRect(x: rect.midX - side / 2, y: rect.midY - side / 2, width: side, height: side))
+    }
+}
+
+nonisolated public struct Capsule: Shape {
+    public var style: RoundedCornerStyle
+    public init(style: RoundedCornerStyle = .continuous) { self.style = style }
+    public var _name: String { "capsule" }
+    public var _cornerRadius: CGFloat { 9999 }
+    public func path(in rect: CGRect) -> Path {
+        Path(roundedRect: rect, cornerRadius: min(rect.width, rect.height) / 2, style: style)
+    }
+}
+
+nonisolated public struct Ellipse: Shape {
+    public init() {}
+    public var _name: String { "ellipse" }
+    public var _cornerRadius: CGFloat { 9999 }
+    public func path(in rect: CGRect) -> Path { Path(ellipseIn: rect) }
+}
+
+/// The shape of the nearest container (`.containerShape(_:)`): its corner
+/// radius, read from the environment where the shape is drawn
+/// (`_resolvedCornerRadius`); a rectangle when no container sets one, as in
+/// SwiftUI. Its own path (a custom shape's use) is a rectangle.
+nonisolated public struct ContainerRelativeShape: Shape {
+    public init() {}
+    public var _name: String { "containerRelative" }
+    public var _cornerRadius: CGFloat { 0 }
+    public func path(in rect: CGRect) -> Path { Path(rect) }
+}
+
+/// The corner radius `shape` is drawn with in `environment`: a
+/// `ContainerRelativeShape` takes its container's.
+func _resolvedCornerRadius(_ shape: some Shape, in environment: EnvironmentValues) -> CGFloat {
+    if shape is ContainerRelativeShape { return environment._containerShapeRadius ?? 0 }
+    if let inset = shape as? _InsetShape<ContainerRelativeShape> {
+        return max(0, (environment._containerShapeRadius ?? 0) - inset.amount)
+    }
+    return shape._cornerRadius
+}
+
+private struct _ContainerShapeRadiusKey: EnvironmentKey {
+    static var defaultValue: CGFloat? { nil }
+}
+
+extension EnvironmentValues {
+    /// The corner radius of the shape `.containerShape(_:)` set above (nil: none).
+    var _containerShapeRadius: CGFloat? {
+        get { self[_ContainerShapeRadiusKey.self] }
+        set { self[_ContainerShapeRadiusKey.self] = newValue }
+    }
+}
+
+// Shapes as static members (`.clipShape(.capsule)`, `.background(.red, in: .rect(cornerRadius: 8))`).
+extension Shape where Self == Capsule {
+    public static var capsule: Capsule { Capsule() }
+    /// The shape of a button's border; drawn as a capsule.
+    public static var buttonBorder: Capsule { Capsule() }
+}
+extension Shape where Self == Circle {
+    public static var circle: Circle { Circle() }
+}
+extension Shape where Self == Ellipse {
+    public static var ellipse: Ellipse { Ellipse() }
+}
+extension Shape where Self == Rectangle {
+    public static var rect: Rectangle { Rectangle() }
+}
+extension Shape where Self == RoundedRectangle {
+    public static func rect(cornerRadius: CGFloat, style: RoundedCornerStyle = .continuous) -> RoundedRectangle {
+        RoundedRectangle(cornerRadius: cornerRadius, style: style)
+    }
+    public static func rect(cornerSize: CGSize, style: RoundedCornerStyle = .continuous) -> RoundedRectangle {
+        RoundedRectangle(cornerSize: cornerSize, style: style)
+    }
+}
+extension Shape where Self == ContainerRelativeShape {
+    public static var containerRelative: ContainerRelativeShape { ContainerRelativeShape() }
+}