@swiftbrowser/swift 0.1.0 → 0.2.0

package/Sources/SwiftUI/API/Color.swift

@@ -13,7 +13,7 @@ public struct Color: Hashable, Sendable {
     }
 
     /// A color from the asset catalog, possibly namespaced (`"dough/plain-bg"`).
-    /// SwiftUI's `bundle:` parameter is not offered (see `Image.init(_:)`).
+    /// `Color(_:bundle:)` is FoundationBridge's (see `Image.init(_:)`).
     public init(_ name: String) {
         storage = .named(name: name, opacity: 1)
     }
@@ -26,20 +26,45 @@ public struct Color: Hashable, Sendable {
         storage = .semantic(name: name, opacity: 1)
     }
 
-    // iOS system palette, light appearance.
-    public static let red = Color(red: 1.0, green: 0.231, blue: 0.188)
-    public static let orange = Color(red: 1.0, green: 0.584, blue: 0.0)
-    public static let yellow = Color(red: 1.0, green: 0.8, blue: 0.0)
-    public static let green = Color(red: 0.204, green: 0.78, blue: 0.349)
-    public static let mint = Color(red: 0.0, green: 0.78, blue: 0.745)
-    public static let teal = Color(red: 0.188, green: 0.69, blue: 0.78)
-    public static let cyan = Color(red: 0.196, green: 0.678, blue: 0.902)
-    public static let blue = Color(red: 0.0, green: 0.478, blue: 1.0)
-    public static let indigo = Color(red: 0.345, green: 0.337, blue: 0.839)
-    public static let purple = Color(red: 0.686, green: 0.322, blue: 0.871)
-    public static let pink = Color(red: 1.0, green: 0.176, blue: 0.333)
-    public static let brown = Color(red: 0.635, green: 0.518, blue: 0.368)
-    public static let gray = Color(red: 0.557, green: 0.557, blue: 0.576)
+    /// 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)
 
@@ -74,17 +99,32 @@ public struct Color: Hashable, Sendable {
     }
 }
 
-// MARK: - Shapes (clipping only, for now)
-
-public protocol Shape: Sendable {
+// 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 }
 }
 
-public struct Rectangle: Shape {
+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.
@@ -92,7 +132,7 @@ public enum RoundedCornerStyle: Hashable, Sendable {
     case circular, continuous
 }
 
-public struct RoundedRectangle: Shape {
+nonisolated public struct RoundedRectangle: Shape {
     public var cornerRadius: CGFloat
     public var style: RoundedCornerStyle
     public init(cornerRadius: CGFloat, style: RoundedCornerStyle = .continuous) {
@@ -105,32 +145,68 @@ public struct RoundedRectangle: Shape {
     }
     public var _name: String { "roundedRectangle" }
     public var _cornerRadius: CGFloat { cornerRadius }
+    public func path(in rect: CGRect) -> Path { Path(roundedRect: rect, cornerRadius: cornerRadius, style: style) }
 }
 
-public struct Circle: Shape {
+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))
+    }
 }
 
-public struct Capsule: Shape {
-    public init() {}
+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)
+    }
 }
 
-public struct Ellipse: Shape {
+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 container's shape (`.containerShape`), rendered as a 12pt rounded
-/// rectangle, the corner radius the Food Truck cards use.
-public struct ContainerRelativeShape: Shape {
+/// 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 { 12 }
+    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))`).

package/Sources/SwiftUI/API/ColorEffects.swift

@@ -0,0 +1,52 @@
+/// Color adjustments of a rendered view: `.brightness`, `.saturation`,
+/// `.contrast`, `.grayscale`, `.hueRotation`, `.colorInvert` and `.colorMultiply`. Each is a
+/// style key the page draws as a CSS filter on the view's box (Web/src/
+/// styles.ts `effectsCSS`), so nested modifiers apply innermost first, as
+/// in SwiftUI. Saturation, contrast, grayscale, hue rotation and inversion
+/// are CSS's own filters. SwiftUI's brightness adds `amount` to each color
+/// component, which CSS has no filter for: it is drawn as CSS
+/// `brightness(1 + amount)`, which scales them (the same for mid-gray, darker
+/// for dark colors, and black stays black).
+
+nonisolated extension View {
+    /// Brightens (positive) or darkens (negative) the view; `amount` is in -1…1.
+    public func brightness(_ amount: Double) -> some View {
+        _styled { $0.extras["brightness"] = .number(amount) }
+    }
+
+    /// Scales the colors' saturation: 0 is gray, 1 unchanged.
+    public func saturation(_ amount: Double) -> some View {
+        _styled { $0.extras["saturation"] = .number(amount) }
+    }
+
+    /// Scales the contrast: 0 is mid-gray, 1 unchanged.
+    public func contrast(_ amount: Double) -> some View {
+        _styled { $0.extras["contrast"] = .number(amount) }
+    }
+
+    /// Removes `amount` (0…1) of the colors' saturation.
+    public func grayscale(_ amount: Double) -> some View {
+        _styled { $0.extras["grayscale"] = .number(amount) }
+    }
+
+    /// Turns the colors' hue by `angle`.
+    public func hueRotation(_ angle: Angle) -> some View {
+        _styled { $0.extras["hueRotation"] = .number(angle.degrees) }
+    }
+
+    /// Inverts the colors.
+    public func colorInvert() -> some View {
+        _styled { $0.extras["colorInvert"] = .bool(true) }
+    }
+
+    /// Multiplies each color component (and the alpha) by `color`'s: a white
+    /// shape takes the color, a black one stays black. The page draws it with
+    /// an SVG `feColorMatrix` filter.
+    public func colorMultiply(_ color: Color) -> some View {
+        _styled { $0.extras["colorMultiply"] = color._json }
+    }
+
+    /// Mirrors the view in a right-to-left layout. The page lays out left to
+    /// right, so the view draws as it is.
+    public func flipsForRightToLeftLayoutDirection(_ enabled: Bool) -> some View { self }
+}

package/Sources/SwiftUI/API/ColorPickerAndLabeledContent.swift

@@ -0,0 +1,138 @@
+import Foundation
+
+/// `ColorPicker` and `LabeledContent`.
+///
+/// - `ColorPicker` is a row with its label and a swatch of the color, as on
+///   iOS. Tapping it opens the browser's color chooser through a `pickColor`
+///   host request (`{ "color": "#rrggbb" }`, answered with the chosen color,
+///   or `{}` when the viewer closes it; Web/src/colorPicker.ts), sent within
+///   the tap as a browser requires. The chooser has no opacity: a picked
+///   color is opaque, whatever `supportsOpacity` says. A catalog color starts
+///   the chooser at mid gray (`Color.resolve(in:)`'s answer for it).
+///   Headless runs answer `{}`.
+/// - `LabeledContent` is its label and, after a spacer, its content in the
+///   secondary style: the row a form shows. `.labeledContentStyle` is accepted.
+
+public struct ColorPicker<Label: View>: View {
+    let selection: Binding<Color>
+    let label: Label
+
+    public init(selection: Binding<Color>, supportsOpacity: Bool = true, @ViewBuilder label: () -> Label) {
+        self.selection = selection
+        self.label = label()
+    }
+
+    public var body: some View {
+        let selection = selection
+        return Button {
+            let hex = Self.hex(selection.wrappedValue)
+            Task { @MainActor in
+                let answer = try? await _Runtime.shared._hostRequest(kind: "pickColor", params: .object(["color": .string(hex)]),
+                                                                     headless: .object([:]))
+                guard case .object(let fields)? = answer, case .string(let chosen)? = fields["color"],
+                      let color = Self.color(hex: chosen) else { return }
+                selection.wrappedValue = color
+            }
+        } label: {
+            HStack {
+                label
+                Spacer()
+                Circle()
+                    .fill(selection.wrappedValue)
+                    .frame(width: 28, height: 28)
+                    .overlay(Circle().strokeBorder(Color.secondary.opacity(0.3), lineWidth: 1))
+            }
+        }
+        .buttonStyle(.plain)
+    }
+
+    /// `#rrggbb` of the color's sRGB components.
+    static func hex(_ color: Color) -> String {
+        let resolved = color.resolve(in: EnvironmentValues())
+        func byte(_ value: Float) -> String {
+            let n = Int((min(1, max(0, value)) * 255).rounded())
+            let digits = String(n, radix: 16)
+            return n < 16 ? "0" + digits : digits
+        }
+        return "#" + byte(resolved.red) + byte(resolved.green) + byte(resolved.blue)
+    }
+
+    /// The color of `#rrggbb`, or nil.
+    static func color(hex: String) -> Color? {
+        let digits = hex.hasPrefix("#") ? String(hex.dropFirst()) : hex
+        guard digits.count == 6, let value = Int(digits, radix: 16) else { return nil }
+        return Color(red: Double((value >> 16) & 0xFF) / 255, green: Double((value >> 8) & 0xFF) / 255,
+                     blue: Double(value & 0xFF) / 255)
+    }
+}
+
+extension ColorPicker where Label == Text {
+    public init(_ titleKey: LocalizedStringKey, selection: Binding<Color>, supportsOpacity: Bool = true) {
+        self.init(selection: selection, supportsOpacity: supportsOpacity) { Text(titleKey) }
+    }
+
+    @_disfavoredOverload
+    public init<S: StringProtocol>(_ title: S, selection: Binding<Color>, supportsOpacity: Bool = true) {
+        self.init(selection: selection, supportsOpacity: supportsOpacity) { Text(title) }
+    }
+}
+
+public struct LabeledContent<Label: View, Content: View>: View {
+    let label: Label
+    let content: Content
+
+    public init(@ViewBuilder content: () -> Content, @ViewBuilder label: () -> Label) {
+        self.content = content()
+        self.label = label()
+    }
+
+    public var body: some View {
+        HStack {
+            label
+            Spacer()
+            content.foregroundStyle(.secondary)
+        }
+    }
+}
+
+extension LabeledContent where Label == Text, Content == Text {
+    public init<S: StringProtocol>(_ titleKey: LocalizedStringKey, value: S) {
+        self.init(content: { Text(value) }, label: { Text(titleKey) })
+    }
+
+    @_disfavoredOverload
+    public init<S1: StringProtocol, S2: StringProtocol>(_ title: S1, value: S2) {
+        self.init(content: { Text(value) }, label: { Text(title) })
+    }
+
+    public init<F: FormatStyle>(_ titleKey: LocalizedStringKey, value: F.FormatInput, format: F) where F.FormatOutput == String {
+        self.init(content: { Text(format.format(value)) }, label: { Text(titleKey) })
+    }
+
+    @_disfavoredOverload
+    public init<S: StringProtocol, F: FormatStyle>(_ title: S, value: F.FormatInput, format: F) where F.FormatOutput == String {
+        self.init(content: { Text(format.format(value)) }, label: { Text(title) })
+    }
+}
+
+extension LabeledContent where Label == Text {
+    public init(_ titleKey: LocalizedStringKey, @ViewBuilder content: () -> Content) {
+        self.init(content: content, label: { Text(titleKey) })
+    }
+
+    @_disfavoredOverload
+    public init<S: StringProtocol>(_ title: S, @ViewBuilder content: () -> Content) {
+        self.init(content: content, label: { Text(title) })
+    }
+}
+
+/// How labeled content is drawn; accepted.
+public protocol LabeledContentStyle {}
+public struct AutomaticLabeledContentStyle: LabeledContentStyle { public init() {} }
+extension LabeledContentStyle where Self == AutomaticLabeledContentStyle {
+    public static var automatic: AutomaticLabeledContentStyle { AutomaticLabeledContentStyle() }
+}
+
+nonisolated extension View {
+    public func labeledContentStyle<S: LabeledContentStyle>(_ style: S) -> some View { self }
+}

package/Sources/SwiftUI/API/ColorSpaces.swift

@@ -0,0 +1,161 @@
+import Foundation
+
+// `Color(.sRGB, red:green:blue:opacity:)` and friends. The page paints in
+// sRGB: sRGB components pass through, linear sRGB components are gamma
+// encoded first, and Display P3 components are taken as sRGB (an
+// approximation: a P3 color outside the sRGB gamut is clipped to its edge,
+// and one inside shifts slightly).
+
+extension Color {
+    public enum RGBColorSpace: Hashable, Sendable {
+        case sRGB
+        case sRGBLinear
+        case displayP3
+    }
+
+    public init(_ colorSpace: RGBColorSpace, red: Double, green: Double, blue: Double, opacity: Double = 1) {
+        if colorSpace == .sRGBLinear {
+            self.init(red: Color._sRGBEncoded(red), green: Color._sRGBEncoded(green), blue: Color._sRGBEncoded(blue),
+                      opacity: opacity)
+        } else {
+            self.init(red: red, green: green, blue: blue, opacity: opacity)
+        }
+    }
+
+    public init(_ colorSpace: RGBColorSpace, white: Double, opacity: Double = 1) {
+        let value = colorSpace == .sRGBLinear ? Color._sRGBEncoded(white) : white
+        self.init(white: value, opacity: opacity)
+    }
+
+    /// The sRGB transfer function: a linear component to its encoded form.
+    static func _sRGBEncoded(_ linear: Double) -> Double {
+        let value = min(max(linear, 0), 1)
+        return value <= 0.0031308 ? 12.92 * value : 1.055 * pow(value, 1 / 2.4) - 0.055
+    }
+}
+
+// MARK: - Resolved colors
+
+// `Color.resolve(in:)` (iOS 17): the color's sRGB components. Explicit
+// colors resolve exactly. The semantic colors resolve to their iOS values
+// for the environment's color scheme (primary black or white, secondary the
+// label gray at 60 %, the accent system blue). An asset catalog color is
+// only known to the page, so it resolves to a mid gray (an approximation).
+
+extension Color {
+    public struct Resolved: Hashable, Sendable {
+        public var red: Float
+        public var green: Float
+        public var blue: Float
+        public var opacity: Float
+
+        public init(red: Float, green: Float, blue: Float, opacity: Float = 1) {
+            self.red = red
+            self.green = green
+            self.blue = blue
+            self.opacity = opacity
+        }
+
+        public init(colorSpace: RGBColorSpace = .sRGB, red: Float, green: Float, blue: Float, opacity: Float = 1) {
+            if colorSpace == .sRGBLinear {
+                self.init(red: Float(Color._sRGBEncoded(Double(red))), green: Float(Color._sRGBEncoded(Double(green))),
+                          blue: Float(Color._sRGBEncoded(Double(blue))), opacity: opacity)
+            } else {
+                self.init(red: red, green: green, blue: blue, opacity: opacity)
+            }
+        }
+
+        /// The components without the sRGB transfer function.
+        public var linearRed: Float { Self.linear(red) }
+        public var linearGreen: Float { Self.linear(green) }
+        public var linearBlue: Float { Self.linear(blue) }
+
+        static func linear(_ encoded: Float) -> Float {
+            encoded <= 0.04045 ? encoded / 12.92 : powf((encoded + 0.055) / 1.055, 2.4)
+        }
+    }
+
+    public init(_ resolved: Resolved) {
+        self.init(red: Double(resolved.red), green: Double(resolved.green), blue: Double(resolved.blue),
+                  opacity: Double(resolved.opacity))
+    }
+
+    public func resolve(in environment: EnvironmentValues) -> Resolved {
+        let dark = environment.colorScheme == .dark
+        func resolved(_ r: Double, _ g: Double, _ b: Double, _ a: Double) -> Resolved {
+            Resolved(red: Float(r), green: Float(g), blue: Float(b), opacity: Float(a))
+        }
+        switch storage {
+        case .rgba(let r, let g, let b, let a):
+            return resolved(r, g, b, a)
+        case .semantic(let name, let a):
+            switch name {
+            case "primary": return dark ? resolved(1, 1, 1, a) : resolved(0, 0, 0, a)
+            case "secondary":
+                return dark ? resolved(0.922, 0.922, 0.961, 0.6 * a) : resolved(0.235, 0.235, 0.263, 0.6 * a)
+            case "accent": return dark ? resolved(0.039, 0.518, 1, a) : resolved(0, 0.478, 1, a)
+            case "clear": return resolved(0, 0, 0, 0)
+            default:
+                guard let (light, darkValue) = Color.semanticValues[name] else { return resolved(0.5, 0.5, 0.5, a) }
+                let c = dark ? darkValue : light
+                return resolved(c.0, c.1, c.2, c.3 * a)
+            }
+        case .named(_, let a):
+            return resolved(0.5, 0.5, 0.5, a)
+        }
+    }
+}
+
+extension Color {
+    /// The system palette and UIKit's semantic colors (`Color(uiColor:)`),
+    /// light and dark, as iOS defines them; the page's tokens for them
+    /// (styles.css) match.
+    static let semanticValues: [String: (light: (Double, Double, Double, Double), dark: (Double, Double, Double, Double))] = {
+        func rgb(_ r: Double, _ g: Double, _ b: Double, _ a: Double = 1) -> (Double, Double, Double, Double) { (r / 255, g / 255, b / 255, a) }
+        return [
+            "red": (rgb(255, 59, 48), rgb(255, 69, 58)),
+            "orange": (rgb(255, 149, 0), rgb(255, 159, 10)),
+            "yellow": (rgb(255, 204, 0), rgb(255, 214, 10)),
+            "green": (rgb(52, 199, 89), rgb(48, 209, 88)),
+            "mint": (rgb(0, 199, 190), rgb(99, 230, 226)),
+            "teal": (rgb(48, 176, 199), rgb(64, 200, 224)),
+            "cyan": (rgb(50, 173, 230), rgb(100, 210, 255)),
+            "blue": (rgb(0, 122, 255), rgb(10, 132, 255)),
+            "indigo": (rgb(88, 86, 214), rgb(94, 92, 230)),
+            "purple": (rgb(175, 82, 222), rgb(191, 90, 242)),
+            "pink": (rgb(255, 45, 85), rgb(255, 55, 95)),
+            "brown": (rgb(162, 132, 94), rgb(172, 142, 104)),
+            "gray": (rgb(142, 142, 147), rgb(142, 142, 147)),
+            "systemBackground": (rgb(255, 255, 255), rgb(0, 0, 0)),
+            "secondarySystemBackground": (rgb(242, 242, 247), rgb(28, 28, 30)),
+            "tertiarySystemBackground": (rgb(255, 255, 255), rgb(44, 44, 46)),
+            "systemGroupedBackground": (rgb(242, 242, 247), rgb(0, 0, 0)),
+            "secondarySystemGroupedBackground": (rgb(255, 255, 255), rgb(28, 28, 30)),
+            "tertiarySystemGroupedBackground": (rgb(242, 242, 247), rgb(44, 44, 46)),
+            "label": (rgb(0, 0, 0), rgb(255, 255, 255)),
+            "secondaryLabel": (rgb(60, 60, 67, 0.6), rgb(235, 235, 245, 0.6)),
+            "tertiaryLabel": (rgb(60, 60, 67, 0.3), rgb(235, 235, 245, 0.3)),
+            "quaternaryLabel": (rgb(60, 60, 67, 0.18), rgb(235, 235, 245, 0.16)),
+            "placeholderText": (rgb(60, 60, 67, 0.3), rgb(235, 235, 245, 0.3)),
+            "separator": (rgb(60, 60, 67, 0.29), rgb(84, 84, 88, 0.6)),
+            "opaqueSeparator": (rgb(198, 198, 200), rgb(56, 56, 58)),
+            "systemFill": (rgb(120, 120, 128, 0.2), rgb(120, 120, 128, 0.36)),
+            "secondarySystemFill": (rgb(120, 120, 128, 0.16), rgb(120, 120, 128, 0.32)),
+            "tertiarySystemFill": (rgb(118, 118, 128, 0.12), rgb(118, 118, 128, 0.24)),
+            "quaternarySystemFill": (rgb(116, 116, 128, 0.08), rgb(118, 118, 128, 0.18)),
+            "systemGray2": (rgb(174, 174, 178), rgb(99, 99, 102)),
+            "systemGray3": (rgb(199, 199, 204), rgb(72, 72, 74)),
+            "systemGray4": (rgb(209, 209, 214), rgb(58, 58, 60)),
+            "systemGray5": (rgb(229, 229, 234), rgb(44, 44, 46)),
+            "systemGray6": (rgb(242, 242, 247), rgb(28, 28, 30)),
+        ]
+    }()
+}
+
+/// A resolved color paints as its components, as in SwiftUI (iOS 17), and is
+/// what `Color` resolves to as a `ShapeStyle`.
+extension Color.Resolved: ShapeStyle {
+    public var _json: _JSON {
+        .object(["r": .number(Double(red)), "g": .number(Double(green)), "b": .number(Double(blue)), "a": .number(Double(opacity))])
+    }
+}

package/Sources/SwiftUI/API/Commands.swift

@@ -0,0 +1,106 @@
+/// The menu bar's commands (iPad and Mac): `Commands`, `CommandGroup`,
+/// `CommandMenu` and `.commands { }`. The page shows an iPhone, which has no
+/// menu bar, so the commands are built and not shown; their buttons'
+/// keyboard shortcuts do nothing either (PointerAndKeyboard.swift).
+
+@MainActor @preconcurrency
+public protocol Commands {
+    associatedtype Body: Commands
+    @CommandsBuilder var body: Body { get }
+}
+
+extension Never: Commands {}
+
+extension Commands where Body == Never {
+    public var body: Never { fatalError("\(Self.self) is a primitive command") }
+}
+
+/// No commands.
+public struct EmptyCommands: Commands {
+    public typealias Body = Never
+    public init() {}
+}
+
+/// Several commands in order.
+public struct _CommandsList: Commands {
+    public typealias Body = Never
+    let parts: [any Commands]
+}
+
+@resultBuilder @MainActor
+public enum CommandsBuilder {
+    public static func buildBlock() -> EmptyCommands { EmptyCommands() }
+    public static func buildBlock<C: Commands>(_ content: C) -> C { content }
+    public static func buildBlock<each C: Commands>(_ content: repeat each C) -> _CommandsList {
+        var parts: [any Commands] = []
+        for part in repeat each content { parts.append(part) }
+        return _CommandsList(parts: parts)
+    }
+    public static func buildExpression<C: Commands>(_ content: C) -> C { content }
+    public static func buildOptional<C: Commands>(_ content: C?) -> _CommandsList { _CommandsList(parts: content.map { [$0] } ?? []) }
+    public static func buildEither<C: Commands>(first content: C) -> _CommandsList { _CommandsList(parts: [content]) }
+    public static func buildEither<C: Commands>(second content: C) -> _CommandsList { _CommandsList(parts: [content]) }
+    public static func buildLimitedAvailability<C: Commands>(_ content: C) -> _CommandsList { _CommandsList(parts: [content]) }
+}
+
+/// Where a command group goes among the standard menus' items.
+public struct CommandGroupPlacement: Sendable {
+    let name: String
+    public static let appInfo = CommandGroupPlacement(name: "appInfo")
+    public static let appSettings = CommandGroupPlacement(name: "appSettings")
+    public static let systemServices = CommandGroupPlacement(name: "systemServices")
+    public static let appVisibility = CommandGroupPlacement(name: "appVisibility")
+    public static let appTermination = CommandGroupPlacement(name: "appTermination")
+    public static let newItem = CommandGroupPlacement(name: "newItem")
+    public static let saveItem = CommandGroupPlacement(name: "saveItem")
+    public static let importExport = CommandGroupPlacement(name: "importExport")
+    public static let printItem = CommandGroupPlacement(name: "printItem")
+    public static let undoRedo = CommandGroupPlacement(name: "undoRedo")
+    public static let pasteboard = CommandGroupPlacement(name: "pasteboard")
+    public static let textEditing = CommandGroupPlacement(name: "textEditing")
+    public static let textFormatting = CommandGroupPlacement(name: "textFormatting")
+    public static let toolbar = CommandGroupPlacement(name: "toolbar")
+    public static let sidebar = CommandGroupPlacement(name: "sidebar")
+    public static let windowSize = CommandGroupPlacement(name: "windowSize")
+    public static let windowList = CommandGroupPlacement(name: "windowList")
+    public static let singleWindowList = CommandGroupPlacement(name: "singleWindowList")
+    public static let windowArrangement = CommandGroupPlacement(name: "windowArrangement")
+    public static let help = CommandGroupPlacement(name: "help")
+}
+
+/// Items added to, or replacing, a standard menu's group.
+public struct CommandGroup<Content: View>: Commands {
+    public typealias Body = Never
+    let content: Content
+
+    public init(before group: CommandGroupPlacement, @ViewBuilder addition: () -> Content) { content = addition() }
+    public init(after group: CommandGroupPlacement, @ViewBuilder addition: () -> Content) { content = addition() }
+    public init(replacing group: CommandGroupPlacement, @ViewBuilder addition: () -> Content) { content = addition() }
+}
+
+/// A menu of the app's own in the menu bar.
+public struct CommandMenu<Content: View>: Commands {
+    public typealias Body = Never
+    let content: Content
+
+    public init(_ nameKey: LocalizedStringKey, @ViewBuilder content: () -> Content) { self.content = content() }
+    public init(_ name: Text, @ViewBuilder content: () -> Content) { self.content = content() }
+    @_disfavoredOverload
+    public init<S: StringProtocol>(_ name: S, @ViewBuilder content: () -> Content) { self.content = content() }
+}
+
+/// The standard command sets.
+public struct SidebarCommands: Commands { public typealias Body = Never; public init() {} }
+public struct ToolbarCommands: Commands { public typealias Body = Never; public init() {} }
+public struct TextEditingCommands: Commands { public typealias Body = Never; public init() {} }
+public struct TextFormattingCommands: Commands { public typealias Body = Never; public init() {} }
+public struct InspectorCommands: Commands { public typealias Body = Never; public init() {} }
+public struct ImportFromDevicesCommands: Commands { public typealias Body = Never; public init() {} }
+
+extension Scene {
+    /// Accepted: there is no menu bar (see the file comment).
+    public func commands<C: Commands>(@CommandsBuilder content: () -> C) -> some Scene {
+        _ = content()
+        return self
+    }
+}