@swiftbrowser/swift 0.1.0 → 0.2.0

package/Sources/SwiftUI/API/ScrollModifiers.swift

@@ -0,0 +1,132 @@
+// Scroll view modifiers from iOS 16-26 that Ice Cubes uses.
+//
+// - `.scrollDismissesKeyboard(.immediately | .interactively)`: the `list` or
+//   `scrollview` carries `"dismissesKeyboard": true`; when the viewer scrolls
+//   it, the page takes the focus away from the text field being edited
+//   (`.interactively` dismisses at the start of the scroll too: the page has
+//   no keyboard to drag down). `.automatic` and `.never` add nothing.
+// - `.scrollIndicators(_:axes:)`: accepted; the page's scroll views never
+//   show scroll bars (iOS shows them only while scrolling).
+// - `.scrollEdgeEffectStyle(_:for:)` (iOS 26): accepted; the page draws no
+//   edge blur under the bars.
+// - `.safeAreaInset(edge:alignment:spacing:content:)`: approximated as a
+//   stack: the inset view takes its room above or below (before or after)
+//   the view, which gets the rest, instead of overlapping a scroll view's
+//   content that can scroll out from under it; a nil `spacing` is none.
+
+public struct ScrollDismissesKeyboardMode: Hashable, Sendable {
+    let dismisses: Bool
+    public static let automatic = ScrollDismissesKeyboardMode(dismisses: false)
+    public static let immediately = ScrollDismissesKeyboardMode(dismisses: true)
+    public static let interactively = ScrollDismissesKeyboardMode(dismisses: true)
+    public static let never = ScrollDismissesKeyboardMode(dismisses: false)
+}
+
+public struct ScrollIndicatorVisibility: Hashable, Sendable {
+    let name: String
+    public static let automatic = ScrollIndicatorVisibility(name: "automatic")
+    public static let visible = ScrollIndicatorVisibility(name: "visible")
+    public static let hidden = ScrollIndicatorVisibility(name: "hidden")
+    public static let never = ScrollIndicatorVisibility(name: "never")
+}
+
+public struct ScrollEdgeEffectStyle: Hashable, Sendable {
+    let name: String
+    public static let automatic = ScrollEdgeEffectStyle(name: "automatic")
+    public static let hard = ScrollEdgeEffectStyle(name: "hard")
+    public static let soft = ScrollEdgeEffectStyle(name: "soft")
+}
+
+enum _ScrollDismissesKeyboardKey: EnvironmentKey { static let defaultValue = false }
+
+extension EnvironmentValues {
+    /// `.scrollDismissesKeyboard(.immediately | .interactively)` above a list or scroll view.
+    var _scrollDismissesKeyboard: Bool {
+        get { self[_ScrollDismissesKeyboardKey.self] }
+        set { self[_ScrollDismissesKeyboardKey.self] = newValue }
+    }
+}
+
+nonisolated extension View {
+    public func scrollDismissesKeyboard(_ mode: ScrollDismissesKeyboardMode) -> some View {
+        environment(\._scrollDismissesKeyboard, mode.dismisses)
+    }
+
+    public func scrollIndicators(_ visibility: ScrollIndicatorVisibility, axes: Axis.Set = [.vertical, .horizontal]) -> some View {
+        self
+    }
+
+    public func scrollEdgeEffectStyle(_ style: ScrollEdgeEffectStyle?, for edges: Edge.Set) -> some View { self }
+
+    public func scrollEdgeEffectHidden(_ hidden: Bool = true, for edges: Edge.Set = .all) -> some View { self }
+
+    public func safeAreaInset<V: View>(edge: VerticalEdge, alignment: HorizontalAlignment = .center,
+                                       spacing: CGFloat? = nil, @ViewBuilder content: () -> V) -> some View {
+        let inset = content()
+        return VStack(alignment: alignment, spacing: spacing ?? 0) {
+            if edge == .top { inset }
+            self.frame(maxWidth: .infinity, maxHeight: .infinity)
+            if edge == .bottom { inset }
+        }
+    }
+
+    public func safeAreaInset<V: View>(edge: HorizontalEdge, alignment: VerticalAlignment = .center,
+                                       spacing: CGFloat? = nil, @ViewBuilder content: () -> V) -> some View {
+        let inset = content()
+        return HStack(alignment: alignment, spacing: spacing ?? 0) {
+            if edge == .leading { inset }
+            self.frame(maxWidth: .infinity, maxHeight: .infinity)
+            if edge == .trailing { inset }
+        }
+    }
+}
+
+// MARK: - Content margins (iOS 17)
+
+/// Where content margins apply: a scroll view's content, or its indicators
+/// (which the page's scroll views do not inset).
+public struct ContentMarginPlacement: Hashable, Sendable {
+    let name: String
+    public static let automatic = ContentMarginPlacement(name: "automatic")
+    public static let scrollContent = ContentMarginPlacement(name: "scrollContent")
+    public static let scrollIndicators = ContentMarginPlacement(name: "scrollIndicators")
+}
+
+enum _ContentMarginsKey: EnvironmentKey { static let defaultValue: EdgeInsets? = nil }
+
+extension EnvironmentValues {
+    /// `.contentMargins(_:_:for:)` above a scroll view: the insets around its content.
+    var _scrollContentMargins: EdgeInsets? {
+        get { self[_ContentMarginsKey.self] }
+        set { self[_ContentMarginsKey.self] = newValue }
+    }
+}
+
+nonisolated extension View {
+    /// Insets the content of the scroll views below by `insets` on `edges`
+    /// (the content scrolls under the margin's area, as in SwiftUI, since it
+    /// is padding inside the scroll view). A margin set closer to the scroll
+    /// view wins on its edges.
+    public func contentMargins(_ edges: Edge.Set = .all, _ insets: EdgeInsets,
+                               for placement: ContentMarginPlacement = .automatic) -> some View {
+        transformEnvironment(\._scrollContentMargins) { margins in
+            guard placement != .scrollIndicators else { return }
+            var value = margins ?? EdgeInsets()
+            if edges.contains(.top) { value.top = insets.top }
+            if edges.contains(.leading) { value.leading = insets.leading }
+            if edges.contains(.bottom) { value.bottom = insets.bottom }
+            if edges.contains(.trailing) { value.trailing = insets.trailing }
+            margins = value
+        }
+    }
+
+    public func contentMargins(_ edges: Edge.Set = .all, _ length: CGFloat?,
+                               for placement: ContentMarginPlacement = .automatic) -> some View {
+        let amount = length ?? 16
+        return contentMargins(edges, EdgeInsets(top: amount, leading: amount, bottom: amount, trailing: amount), for: placement)
+    }
+
+    public func contentMargins(_ length: CGFloat, for placement: ContentMarginPlacement = .automatic) -> some View {
+        contentMargins(.all, length, for: placement)
+    }
+}

package/Sources/SwiftUI/API/ScrollTargets.swift

@@ -35,7 +35,7 @@ extension EnvironmentValues {
     }
 }
 
-extension View {
+nonisolated extension View {
     public func scrollTargetBehavior(_ behavior: ScrollTargetBehavior) -> some View {
         _EnvironmentView(content: self) { $0._scrollTargetBehavior = behavior.name }
     }
@@ -60,13 +60,13 @@ public struct ScrollBounceBehavior: Hashable, Sendable {
 
 /// The stacks `.scrollTargetLayout()` applies to; the runtime clears the flag
 /// for their children so nested stacks do not add snap points.
-protocol _ScrollTargetContainer {}
+protocol _ScrollTargetContainer: _TraitBearing {}
 extension HStack: _ScrollTargetContainer {}
 extension VStack: _ScrollTargetContainer {}
 
 // MARK: - containerRelativeFrame
 
-extension View {
+nonisolated extension View {
     /// Sizes the view relative to its nearest container (the scroll view's
     /// viewport or the screen): the whole container along `axes`, or `span`
     /// of `count` equal columns separated by `spacing`. The renderer's layout

package/Sources/SwiftUI/API/ScrollViewReader.swift

@@ -0,0 +1,144 @@
+// `ScrollViewReader` / `ScrollViewProxy.scrollTo(_:anchor:)`, and the
+// `.id(_:)` that names what to scroll to (docs/ops-protocol.md, "Scrolling
+// to a view").
+//
+// Inside a reader, every view with `.id(x)` is wrapped in a `styled` element
+// marked `"scrollID": true`. `proxy.scrollTo(x, anchor:)` queues a request
+// with a new serial number (increasing across all readers) and re-renders
+// the reader, whose body takes the queue: in that pass the marked element
+// whose id is `x` gets `"scrollTo": {"anchor": {x, y} | null, "serial": n}`
+// in its style (it loses it the next time the reader's body runs). After
+// laying out a pass that brings a `scrollTo` with a serial above every one
+// it handled, the page scrolls the scroll views (and lists) around the
+// element so the element's anchor point meets the same point of the visible
+// area (smoothly when the pass is animated, `withAnimation {
+// proxy.scrollTo(…) }`); a nil anchor scrolls as little as makes the
+// element visible.
+//
+// Outside a reader `.id(_:)` adds nothing to the element tree, as before.
+// Not supported: a `ForEach`'s own ids (the views need `.id(_:)` to be
+// targets), and `.id` resetting the identity (and state) of its view when
+// the id changes.
+
+// MARK: - Requests
+
+/// One `scrollTo` a reader is carrying out.
+struct _ScrollRequest: Equatable {
+    let target: AnyHashable
+    let anchor: UnitPoint?
+    /// Tells the page a repeated request from an old one.
+    let serial: Int
+}
+
+/// A reader's queue of requests, taken by its next body run.
+final class _ScrollRequestQueue {
+    var pending: [_ScrollRequest] = []
+    nonisolated(unsafe) static var lastSerial = 0
+}
+
+/// What `.id(_:)` views read: the requests of every enclosing reader.
+struct _ScrollReaderContext: Equatable {
+    var requests: [_ScrollRequest] = []
+}
+
+enum _ScrollReaderKey: EnvironmentKey { static var defaultValue: _ScrollReaderContext? { nil } }
+
+extension EnvironmentValues {
+    /// Set by `ScrollViewReader`; nil outside one.
+    var _scrollReader: _ScrollReaderContext? {
+        get { self[_ScrollReaderKey.self] }
+        set { self[_ScrollReaderKey.self] = newValue }
+    }
+}
+
+// MARK: - ScrollViewReader
+
+/// Scrolls the scroll views inside its content to the views given an `.id`.
+public struct ScrollViewProxy {
+    let request: @MainActor (AnyHashable, UnitPoint?) -> Void
+
+    /// Scrolls so the view with `.id(id)` is visible, its `anchor` point at
+    /// the same point of the scroll view's visible area (nil: as little as
+    /// makes it visible). Does nothing when no such view is on screen.
+    @MainActor
+    public func scrollTo<ID: Hashable>(_ id: ID, anchor: UnitPoint? = nil) {
+        request(AnyHashable(id), anchor)
+    }
+}
+
+public struct ScrollViewReader<Content: View>: View {
+    let content: (ScrollViewProxy) -> Content
+    @State private var queue = _ScrollRequestQueue()
+    /// Bumped by `scrollTo` so the reader's body runs and takes the queue.
+    @State private var requests = 0
+    @Environment(\._scrollReader) private var outer
+
+    public init(@ViewBuilder content: @escaping (ScrollViewProxy) -> Content) {
+        self.content = content
+    }
+
+    public var body: some View {
+        let queue = self.queue
+        let bump = $requests
+        let proxy = ScrollViewProxy { target, anchor in
+            _ScrollRequestQueue.lastSerial += 1
+            queue.pending.append(_ScrollRequest(target: target, anchor: anchor, serial: _ScrollRequestQueue.lastSerial))
+            bump.wrappedValue += 1
+        }
+        var context = outer ?? _ScrollReaderContext()
+        context.requests += queue.pending
+        queue.pending.removeAll()
+        return content(proxy).environment(\._scrollReader, context)
+    }
+}
+
+// MARK: - .id(_:)
+
+/// `.id(x)`: inside a `ScrollViewReader`, a `styled` element marking a
+/// scroll target (carrying the scroll command in the pass that asks for
+/// it); elsewhere the view itself.
+struct _IdentifiedView<Content: View> {
+    let content: Content
+    let id: AnyHashable
+    @Environment(\._scrollReader) var reader
+}
+extension _IdentifiedView: View {
+    var body: some View {
+        if let reader {
+            let request = reader.requests.last { $0.target == id }
+            content._styled { style in
+                style.extras["scrollID"] = .bool(true)
+                if let request {
+                    style.extras["scrollTo"] = .object([
+                        "anchor": request.anchor.map { .object(["x": .number($0.x), "y": .number($0.y)]) } ?? .null,
+                        "serial": .number(Double(request.serial)),
+                    ])
+                }
+            }
+        } else {
+            content
+        }
+    }
+}
+
+// MARK: - scrollContentBackground
+
+enum _ScrollContentBackgroundKey: EnvironmentKey { static let defaultValue: Visibility = .automatic }
+
+extension EnvironmentValues {
+    /// `.scrollContentBackground(_:)`; a `List` hides its grouped background when `.hidden`.
+    var _scrollContentBackground: Visibility {
+        get { self[_ScrollContentBackgroundKey.self] }
+        set { self[_ScrollContentBackgroundKey.self] = newValue }
+    }
+}
+
+nonisolated extension View {
+    /// `.hidden` drops a `List`'s own background (the system grouped
+    /// background), so a `.background(…)` behind the list shows through its
+    /// gaps; the rows keep their cell background. Scroll views and text
+    /// editors draw no background of their own already.
+    public func scrollContentBackground(_ visibility: Visibility) -> some View {
+        environment(\._scrollContentBackground, visibility)
+    }
+}

package/Sources/SwiftUI/API/SectionSupplements.swift

@@ -0,0 +1,96 @@
+// `Section` headers and footers that are views, not just `Text`.
+//
+// A `Text` header or footer (or an optional one, `footer: { if x { Text(…) } }`)
+// stays the `section`'s `header` / `footer` string, as it always was. Any
+// other view becomes a child of the `section`: a `sectionheader` before the
+// rows and a `sectionfooter` after them, each with the view inside (props
+// `{}`). In a list the page lays the header view out above the section's card
+// and the footer view below it, in the content width, in the footnote font
+// and the secondary color; outside a list (a `Section` in a `LazyVStack`) they
+// stack with the rows. As for a string header, the texts in a header view
+// are upper-cased (the environment's `textCase`, which `.textCase(nil)`
+// inside the header undoes).
+
+/// A section's view header or footer: kind `sectionheader` or `sectionfooter`.
+struct _SectionSupplement {
+    let kind: String
+    let content: any View
+}
+extension _SectionSupplement: _PrimitiveView {}
+extension _SectionSupplement: _HostView {
+    var _kind: String { kind }
+    func _props(in environment: EnvironmentValues) -> _JSON { .object([:]) }
+    var _content: [any View] {
+        guard kind == "sectionheader" else { return [content] }
+        return [_withEnvironment(content) { $0.textCase = .uppercase }]
+    }
+}
+
+/// `content.environment(…)` for an existential view.
+private func _withEnvironment(_ view: any View, _ apply: @escaping (inout EnvironmentValues) -> Void) -> any View {
+    func open<V: View>(_ content: V) -> any View { _EnvironmentView(content: content, apply: apply) }
+    return open(view)
+}
+
+/// A header or footer view as the section stores it: a `Text` (or an
+/// optional `Text`) as its string, anything else as a view.
+private enum _SectionLabel {
+    case text(String?)
+    case view(any View)
+
+    init<V: View>(_ view: V) {
+        if let text = view as? Text {
+            self = .text(text.content)
+        } else if let optional = view as? Text? {
+            self = .text(optional?.content)
+        } else {
+            self = .view(view)
+        }
+    }
+
+    var string: String? {
+        if case .text(let string) = self { return string }
+        return nil
+    }
+
+    var view: (any View)? {
+        if case .view(let view) = self { return view }
+        return nil
+    }
+}
+
+extension Section {
+    private init(content: Content, header: _SectionLabel?, footer: _SectionLabel?) {
+        self.header = header?.string
+        self.footer = footer?.string
+        self.content = content
+        headerView = header?.view
+        footerView = footer?.view
+    }
+
+    public init<H: View>(@ViewBuilder content: () -> Content, @ViewBuilder header: () -> H) {
+        self.init(content: content(), header: _SectionLabel(header()), footer: nil)
+    }
+
+    public init<F: View>(@ViewBuilder content: () -> Content, @ViewBuilder footer: () -> F) {
+        self.init(content: content(), header: nil, footer: _SectionLabel(footer()))
+    }
+
+    public init<H: View, F: View>(@ViewBuilder content: () -> Content, @ViewBuilder header: () -> H,
+                                  @ViewBuilder footer: () -> F) {
+        self.init(content: content(), header: _SectionLabel(header()), footer: _SectionLabel(footer()))
+    }
+
+    /// The pre-iOS 15 spellings, with the header and footer as values.
+    public init<H: View>(header: H, @ViewBuilder content: () -> Content) {
+        self.init(content: content(), header: _SectionLabel(header), footer: nil)
+    }
+
+    public init<F: View>(footer: F, @ViewBuilder content: () -> Content) {
+        self.init(content: content(), header: nil, footer: _SectionLabel(footer))
+    }
+
+    public init<H: View, F: View>(header: H, footer: F, @ViewBuilder content: () -> Content) {
+        self.init(content: content(), header: _SectionLabel(header), footer: _SectionLabel(footer))
+    }
+}

package/Sources/SwiftUI/API/Shape.swift

@@ -0,0 +1,214 @@
+// Custom shapes: a `Shape` that is not one of the built-in shapes the page
+// draws by name (`_name` is `"path"`) is drawn from its `path(in:)`.
+//
+// The path depends on the size the shape is laid out at, which only the page
+// knows, so a shape's element reports its size (`reportsSize`, like a
+// `GeometryReader`'s) and the next render sends the path for it: SVG path
+// data in `path`, for the rectangle `size`. Until the first report the
+// shape draws nothing.
+//
+// SwiftUI animates a shape by interpolating its `animatableData` and asking
+// for the path at each step. Here, when a shape's `animatableData` changes in
+// a pass that may animate it (the transaction has an animation, or an
+// `.animation(_:value:)` above it saw its value change), the element also
+// carries the path along the way (`frames`: the paths at
+// fractions of the change, and below 0 and above 1 for a spring that
+// overshoots). The page plays them when the commit animates the shape, in the
+// commit's timing curve (src/animation.ts); otherwise it draws the end path.
+
+/// A shape that can be inset (`strokeBorder` draws inside its bounds).
+public protocol InsettableShape: Shape {
+    associatedtype InsetShape: InsettableShape
+    func inset(by amount: CGFloat) -> InsetShape
+}
+
+/// A shape inset by `amount` on every side.
+nonisolated public struct _InsetShape<Base: Shape>: InsettableShape {
+    let base: Base
+    let amount: CGFloat
+
+    public func path(in rect: CGRect) -> Path {
+        let inset = rect.insetBy(dx: amount, dy: amount)
+        guard inset.width >= 0, inset.height >= 0 else { return Path() }
+        return base.path(in: inset)
+    }
+
+    public func inset(by amount: CGFloat) -> _InsetShape<Base> {
+        _InsetShape(base: base, amount: self.amount + amount)
+    }
+
+    public var animatableData: CGFloat {
+        get { amount }
+        set { self = _InsetShape(base: base, amount: newValue) }
+    }
+}
+
+extension Rectangle: InsettableShape {
+    public func inset(by amount: CGFloat) -> _InsetShape<Rectangle> { _InsetShape(base: self, amount: amount) }
+}
+extension RoundedRectangle: InsettableShape {
+    public func inset(by amount: CGFloat) -> _InsetShape<RoundedRectangle> { _InsetShape(base: self, amount: amount) }
+}
+extension UnevenRoundedRectangle: InsettableShape {
+    public func inset(by amount: CGFloat) -> _InsetShape<UnevenRoundedRectangle> { _InsetShape(base: self, amount: amount) }
+}
+extension Circle: InsettableShape {
+    public func inset(by amount: CGFloat) -> _InsetShape<Circle> { _InsetShape(base: self, amount: amount) }
+}
+extension Capsule: InsettableShape {
+    public func inset(by amount: CGFloat) -> _InsetShape<Capsule> { _InsetShape(base: self, amount: amount) }
+}
+extension Ellipse: InsettableShape {
+    public func inset(by amount: CGFloat) -> _InsetShape<Ellipse> { _InsetShape(base: self, amount: amount) }
+}
+extension ContainerRelativeShape: InsettableShape {
+    public func inset(by amount: CGFloat) -> _InsetShape<ContainerRelativeShape> { _InsetShape(base: self, amount: amount) }
+}
+
+extension Path: Shape {
+    public func path(in rect: CGRect) -> Path { self }
+}
+
+/// A shape is a view: drawn filled with the foreground style.
+extension Shape {
+    public var body: _ShapeView<Self> { _ShapeView(shape: self, fill: nil, stroke: nil) }
+}
+
+// MARK: - Drawing from the path
+
+/// A view whose element may draw a path for its laid-out size: the runtime
+/// reports the size to it and adds the path to its props.
+@MainActor protocol _PathDrawing: _TraitBearing {
+    /// Whether this value draws a path (a built-in shape draws by name).
+    var _drawsPath: Bool { get }
+    /// `props` with the path for `size`, and the frames of a change of the
+    /// shape's `animatableData` when the pass may animate it (`animated`).
+    func _pathProps(_ props: _JSON, size: CGSize, state: _PathState, animated: Bool) -> _JSON
+}
+
+/// What a path-drawing node keeps between renders: the shape it drew last,
+/// for which size, and the path props it sent for them.
+final class _PathState {
+    var shape: Any?
+    var size = CGSize.zero
+    var inset: CGFloat = 0
+    var fields: [String: _JSON] = [:]
+}
+
+/// The paths at these fractions of an animated change are sent with it.
+let _pathFrameProgress: [Double] = [-0.3, -0.2, -0.1] + (0...60).map { Double($0) / 60 } + [1.1, 1.2, 1.3]
+
+extension _ShapeView: _PathDrawing {
+    var _drawsPath: Bool { shape._name == "path" }
+
+    /// How far inside its bounds the path is drawn: half the line of a
+    /// `strokeBorder`, so that the line lies inside.
+    private var strokeInset: CGFloat {
+        guard let stroke, stroke.inset else { return 0 }
+        return stroke.lineWidth / 2
+    }
+
+    @MainActor func _pathProps(_ props: _JSON, size: CGSize, state: _PathState, animated: Bool) -> _JSON {
+        guard case .object(var fields) = props else { return props }
+        let inset = strokeInset
+        var budget = 4096
+        let unchanged = state.size == size && state.inset == inset
+            && state.shape.map { _Sameness.same($0, shape, budget: &budget) } == true
+        if !unchanged {
+            var path: [String: _JSON] = [
+                "path": .string(size == .zero ? "" : Self.drawnPath(of: shape, inset: inset, in: size)._svg),
+                "size": .object(["width": .number(size.width), "height": .number(size.height)]),
+            ]
+            if animated, size != .zero, let previous = state.shape as? S,
+               let frames = Self.frames(from: previous, to: shape, inset: inset, in: size) {
+                path["frames"] = frames
+            }
+            state.shape = shape
+            state.size = size
+            state.inset = inset
+            state.fields = path
+        }
+        fields.merge(state.fields) { _, new in new }
+        return .object(fields)
+    }
+
+    /// The path of `shape` in a rectangle of `size`, inset by `inset` (an
+    /// insettable shape is inset as a shape, any other as a rectangle).
+    @MainActor static func drawnPath(of shape: S, inset: CGFloat, in size: CGSize) -> Path {
+        let rect = CGRect(origin: .zero, size: size)
+        guard inset != 0 else { return shape.path(in: rect) }
+        if let insettable = shape as? any InsettableShape {
+            return insettable.inset(by: inset).path(in: rect)
+        }
+        return shape.path(in: rect.insetBy(dx: inset, dy: inset))
+    }
+
+    /// The paths along a change of `animatableData`, or nil when it did not change.
+    @MainActor static func frames(from previous: S, to shape: S, inset: CGFloat, in size: CGSize) -> _JSON? {
+        let from = previous.animatableData, to = shape.animatableData
+        guard S.AnimatableData.self != EmptyAnimatableData.self, from != to else { return nil }
+        var paths: [String] = []
+        var indices: [Int: Int] = [:]
+        var index: [_JSON] = []
+        for progress in _pathFrameProgress {
+            var step = shape
+            step.animatableData = from.interpolated(towards: to, amount: progress)
+            let svg = drawnPath(of: step, inset: inset, in: size)._svg
+            let hash = svg.hashValue
+            if let known = indices[hash], paths[known] == svg {
+                index.append(.number(Double(known)))
+            } else {
+                indices[hash] = paths.count
+                index.append(.number(Double(paths.count)))
+                paths.append(svg)
+            }
+        }
+        return .object([
+            "progress": .array(_pathFrameProgress.map(_JSON.number)),
+            "index": .array(index),
+            "paths": .array(paths.map(_JSON.string)),
+        ])
+    }
+}
+
+extension _TrimmedShapeView: _PathDrawing {
+    var _drawsPath: Bool { _name == "path" }
+
+    @MainActor func _pathProps(_ props: _JSON, size: CGSize, state: _PathState, animated: Bool) -> _JSON {
+        _ShapeView(shape: self, fill: nil, stroke: nil)._pathProps(props, size: size, state: state, animated: animated)
+    }
+}
+
+// MARK: - Scaled shapes
+
+/// A shape scaled about an anchor of its bounds (`shape.scale(0.99)`), drawn from its path.
+nonisolated public struct ScaledShape<Content: Shape>: Shape {
+    public var shape: Content
+    public var scale: CGSize
+    public var anchor: UnitPoint
+
+    public init(shape: Content, scale: CGSize, anchor: UnitPoint = .center) {
+        self.shape = shape
+        self.scale = scale
+        self.anchor = anchor
+    }
+
+    public func path(in rect: CGRect) -> Path {
+        let x = rect.minX + anchor.x * rect.width
+        let y = rect.minY + anchor.y * rect.height
+        let transform = CGAffineTransform(translationX: -x, y: -y)
+            .concatenating(CGAffineTransform(scaleX: scale.width, y: scale.height))
+            .concatenating(CGAffineTransform(translationX: x, y: y))
+        return shape.path(in: rect).applying(transform)
+    }
+}
+
+nonisolated extension Shape {
+    public func scale(x: CGFloat = 1, y: CGFloat = 1, anchor: UnitPoint = .center) -> ScaledShape<Self> {
+        ScaledShape(shape: self, scale: CGSize(width: x, height: y), anchor: anchor)
+    }
+
+    public func scale(_ scale: CGFloat, anchor: UnitPoint = .center) -> ScaledShape<Self> {
+        ScaledShape(shape: self, scale: CGSize(width: scale, height: scale), anchor: anchor)
+    }
+}