@swiftbrowser/native 0.11.0 → 0.12.0

package/README.md

@@ -138,7 +138,9 @@ this: the iOS app's own views, in a page. `--base /path/` when the site is
 served under a path of another site, `--module <file>` for a module built
 from a checkout (`swift build --swift-sdk <wasm sdk> -c release --product
 NativeRoundTrip`), `--name <App>` for the site's app name (the folder
-holding `js/` by default).
+holding `js/` by default), `--catalog <dir.xcassets>` (repeatable) for the
+app's named images and colors (the Xcode target's catalog, or one kept for
+the site: a `.symbolset` holding any SVG draws as a symbol there).
 
 ## The escape hatch
 

package/bin/swiftbrowser-native.mjs

@@ -6,23 +6,25 @@
 // rebuild on save for `NativeApp.watch(url:)`; `swiftbrowser-native site
 // <entry> --out <dir>` writes the app as a static site the web renderer runs
 // (the native views built for WebAssembly, `--module <file>` for one other
-// than the package's; `--base /path/` when the site is not a host's root).
+// than the package's; `--base /path/` when the site is not a host's root;
+// `--catalog <dir.xcassets>`, repeatable, for the app's named images).
 
 import { basename, resolve } from 'node:path';
 import { buildApp, serve } from '../dist/build.js';
 
 const [command, entry, ...rest] = process.argv.slice(2);
-const flags = {};
+const flags = { catalog: [] };
 for (let i = 0; i < rest.length; i++) {
   const arg = rest[i];
-  if (arg === '--out' || arg === '--port' || arg === '--module' || arg === '--base' || arg === '--name') flags[arg.slice(2)] = rest[++i];
+  if (arg === '--catalog') flags.catalog.push(rest[++i]);
+  else if (arg === '--out' || arg === '--port' || arg === '--module' || arg === '--base' || arg === '--name') flags[arg.slice(2)] = rest[++i];
   else if (arg.startsWith('--')) flags[arg.slice(2)] = true;
 }
 
 if (!command || !entry || !flags.out || !['build', 'dev', 'site'].includes(command)) {
   console.error('usage: swiftbrowser-native build <entry.tsx> --out <App/app.js> [--minify] [--sourcemap]');
   console.error('       swiftbrowser-native dev <entry.tsx> --out <App/app.js> [--port 5173] [--sourcemap]');
-  console.error('       swiftbrowser-native site <entry.tsx> --out <dir> [--name <App>] [--module <file.wasm>] [--base /path/] [--minify]');
+  console.error('       swiftbrowser-native site <entry.tsx> --out <dir> [--name <App>] [--module <file.wasm>] [--base /path/] [--catalog <dir.xcassets>]... [--minify]');
   process.exit(2);
 }
 
@@ -48,6 +50,7 @@ if (command === 'build') {
     ...(flags.name ? { name: flags.name } : {}),
     ...(flags.module ? { module: resolve(flags.module) } : {}),
     ...(flags.base ? { base: flags.base } : {}),
+    ...(flags.catalog.length ? { catalogs: flags.catalog.map((dir) => resolve(dir)) } : {}),
   });
   for (const warning of result.warnings) console.warn(warning);
   console.log(`${result.name}: app.js ${kb(result.bundleBytes)}, ${basename(result.module)} ${kb(result.moduleBytes)}`);

package/dist/site.d.ts

@@ -28,6 +28,12 @@ export interface SiteOptions extends Omit<BuildOptions, 'outfile'> {
     module?: string;
     /** The path the site is served under when it is not a host's root (`/native/`); `/` by default. */
     base?: string;
+    /**
+     * Asset catalogs (`*.xcassets` directories) the app's named images and
+     * colors come from, served as the site's catalog; the Xcode target's, or
+     * one kept for the site (a `.symbolset` holding any SVG draws as a symbol).
+     */
+    catalogs?: string[];
     /** Vite's log level while building the site; `warn` by default. */
     logLevel?: 'info' | 'warn' | 'error' | 'silent';
 }

package/dist/site.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"site.d.ts","sourceRoot":"","sources":["../src/site.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAOH,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAEvD,2GAA2G;AAC3G,eAAO,MAAM,eAAe,QAA6E,CAAC;AAE1G,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC;IAChE,4DAA4D;IAC5D,MAAM,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mGAAmG;IACnG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;CACjD;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpB;AAID,yGAAyG;AACzG,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOjD;AAED,6DAA6D;AAC7D,wBAAsB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,UAAU,CAAC,CAqC/E"}
+{"version":3,"file":"site.d.ts","sourceRoot":"","sources":["../src/site.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAOH,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAEvD,2GAA2G;AAC3G,eAAO,MAAM,eAAe,QAA6E,CAAC;AAE1G,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC;IAChE,4DAA4D;IAC5D,MAAM,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mGAAmG;IACnG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;CACjD;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpB;AAID,yGAAyG;AACzG,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOjD;AAED,6DAA6D;AAC7D,wBAAsB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,UAAU,CAAC,CAwC/E"}

package/dist/site.js

@@ -40,7 +40,11 @@ export async function buildNativeSite(options) {
     }
     if (options.base !== undefined && !/^\/([^/].*\/)?$/.test(options.base))
         throw new Error(`site: --base must start and end with "/": ${options.base}`);
-    const { outDir, name: _name, displayName, module: _module, base, logLevel, ...bundleOptions } = options;
+    const { outDir, name: _name, displayName, module: _module, base, logLevel, catalogs, ...bundleOptions } = options;
+    for (const catalog of catalogs ?? []) {
+        if (!existsSync(catalog))
+            throw new Error(`site: no asset catalog at ${catalog}`);
+    }
     // The bundle is the app's one resource: published at `/bundle/<name>/app.js`
     // and mounted at `/bundle/app.js`, where the module's launch reads it.
     const resources = mkdtempSync(path.join(tmpdir(), 'swiftbrowser-native-site-'));
@@ -53,7 +57,7 @@ export async function buildNativeSite(options) {
                     displayName: displayName ?? name,
                     description: 'A SwiftBrowser Native app in the browser',
                     wasm: module,
-                    catalogs: [],
+                    catalogs: (catalogs ?? []).map((catalog) => path.resolve(catalog)),
                     resources: [path.join(resources, 'app.js')],
                 }],
             layout: 'app',

package/dist/site.js.map

@@ -1 +1 @@
-{"version":3,"file":"site.js","sourceRoot":"","sources":["../src/site.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"site.js","sourceRoot":"","sources":["../src/site.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/native",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "type": "module",
   "description": "Run a @swiftbrowser/react app natively: the runtime a JavaScriptCore-hosted app needs (timers, console, fetch and the other web globals over the SwiftBrowser Native bridge), the `run` entry that renders into the native SwiftUI renderer, and the bundler that builds app.js for the Xcode target.",
   "repository": {
@@ -59,8 +59,8 @@
   },
   "dependencies": {
     "@babel/core": "^7.29.7",
-    "@swiftbrowser/react": "0.11.0",
-    "@swiftbrowser/web": "0.11.0",
+    "@swiftbrowser/react": "0.12.0",
+    "@swiftbrowser/web": "0.12.0",
     "esbuild": "^0.28.2",
     "react-refresh": "^0.17.0"
   },

package/src/site.ts

@@ -36,6 +36,12 @@ export interface SiteOptions extends Omit<BuildOptions, 'outfile'> {
   module?: string;
   /** The path the site is served under when it is not a host's root (`/native/`); `/` by default. */
   base?: string;
+  /**
+   * Asset catalogs (`*.xcassets` directories) the app's named images and
+   * colors come from, served as the site's catalog; the Xcode target's, or
+   * one kept for the site (a `.symbolset` holding any SVG draws as a symbol).
+   */
+  catalogs?: string[];
   /** Vite's log level while building the site; `warn` by default. */
   logLevel?: 'info' | 'warn' | 'error' | 'silent';
 }
@@ -74,7 +80,10 @@ export async function buildNativeSite(options: SiteOptions): Promise<SiteResult>
     );
   }
   if (options.base !== undefined && !/^\/([^/].*\/)?$/.test(options.base)) throw new Error(`site: --base must start and end with "/": ${options.base}`);
-  const { outDir, name: _name, displayName, module: _module, base, logLevel, ...bundleOptions } = options;
+  const { outDir, name: _name, displayName, module: _module, base, logLevel, catalogs, ...bundleOptions } = options;
+  for (const catalog of catalogs ?? []) {
+    if (!existsSync(catalog)) throw new Error(`site: no asset catalog at ${catalog}`);
+  }
   // The bundle is the app's one resource: published at `/bundle/<name>/app.js`
   // and mounted at `/bundle/app.js`, where the module's launch reads it.
   const resources = mkdtempSync(path.join(tmpdir(), 'swiftbrowser-native-site-'));
@@ -87,7 +96,7 @@ export async function buildNativeSite(options: SiteOptions): Promise<SiteResult>
         displayName: displayName ?? name,
         description: 'A SwiftBrowser Native app in the browser',
         wasm: module,
-        catalogs: [],
+        catalogs: (catalogs ?? []).map((catalog) => path.resolve(catalog)),
         resources: [path.join(resources, 'app.js')],
       }],
       layout: 'app',

package/swift/Sources/SwiftBrowserNative/Views/ElementView.swift

@@ -26,7 +26,7 @@ struct ElementView: View {
         case "zstack": return ZStackElement(node: node).reportingSize(of: node)
         case "spacer": return AnyView(Spacer(minLength: SpacerProps(props: node.props).minLength.map { CGFloat($0) }))
         case "divider": return AnyView(Divider())
-        case "styled": return node.isSpinner ? AnyView(ProgressView()) : ChildrenView(node: node).styled(node.style)
+        case "styled": return node.isSpinner ? AnyView(ProgressView()) : ChildrenView(node: node).styled(node.style, id: node.id)
         case "decorated": return AnyView(DecoratedElement(node: node))
         case "geometry": return AnyView(GeometryElement(node: node))
         case "scrollview": return AnyView(ScrollViewElement(node: node))
@@ -58,6 +58,13 @@ struct ElementView: View {
         // Navigation and presentation
         case "navstack": return AnyView(NavigationStackElement(node: node))
         case "navsplit": return AnyView(NavigationSplitElement(node: node))
+        case "inspector": return AnyView(InspectorElement(node: node))
+        case "inspectorpanel": return AnyView(ChildrenView(node: node))
+        // Charts
+        case "chart": return AnyView(ChartElement(node: node))
+        case "chartitem":
+            // Placed by the chart; in place it draws nothing.
+            return AnyView(EmptyView())
         case "navscreen": return AnyView(NavigationScreenElement(node: node))
         case "navlink": return AnyView(NavigationLinkElement(node: node))
         case "tabview": return AnyView(TabViewElement(node: node))

package/swift/Sources/SwiftBrowserNative/Views/Kinds/Charts.swift

@@ -0,0 +1,340 @@
+#if canImport(SwiftUI)
+import Foundation
+import SwiftBrowserProtocol
+import SwiftBrowserTree
+import SwiftUI
+
+/// `chart`: Swift Charts as the protocol carries it, already resolved (the
+/// marks in unit coordinates of the plot, the axes' grid lines, ticks and
+/// formatted labels, the legend), drawn with paths and texts, following the
+/// web renderer's layout rules (docs/ops-protocol.md, "Layout rules: chart"):
+/// the legend row, the axis bands as wide as their labels, and the plot in
+/// what remains. `chartitem` children are annotations against their mark's
+/// rect, or axis label views at their tick.
+struct ChartElement: View {
+    let node: ElementNode
+
+    var body: some View {
+        let props = ChartProps(props: node.props)
+        let items = node.children.filter { $0.kind == "chartitem" }
+        GeometryReader { geometry in
+            ChartCanvas(props: props, items: items, size: geometry.size)
+        }
+    }
+}
+
+/// The chart's boxes in points.
+struct ChartLayout {
+    var plot: CGRect
+    var xBand: CGRect?
+    var yBand: CGRect?
+    var legend: CGRect?
+
+    static let axisFontSize: CGFloat = 12
+    /// A caption glyph's average width, for the y band's width (the labels are not measured).
+    static let glyphWidth: CGFloat = 6.6
+    static let labelGap: CGFloat = 6
+    static let legendHeight: CGFloat = 16
+    static let legendGap: CGFloat = 8
+
+    init(props: ChartProps, size: CGSize) {
+        var plot = CGRect(origin: .zero, size: size)
+        if let legend = props.legend, !legend.items.isEmpty {
+            switch legend.position {
+            case "top":
+                self.legend = CGRect(x: 0, y: 0, width: size.width, height: Self.legendHeight)
+                plot.origin.y += Self.legendHeight + Self.legendGap
+                plot.size.height -= Self.legendHeight + Self.legendGap
+            case "leading", "trailing":
+                let width = legend.items.map { CGFloat($0.label.count) * Self.glyphWidth + 14 }.max() ?? 0
+                if legend.position == "leading" {
+                    self.legend = CGRect(x: 0, y: 0, width: width, height: size.height)
+                    plot.origin.x += width + Self.legendGap
+                } else {
+                    self.legend = CGRect(x: size.width - width, y: 0, width: width, height: size.height)
+                }
+                plot.size.width -= width + Self.legendGap
+            default:
+                self.legend = CGRect(x: 0, y: size.height - Self.legendHeight, width: size.width, height: Self.legendHeight)
+                plot.size.height -= Self.legendHeight + Self.legendGap
+            }
+        }
+        if let axis = props.yAxis, !axis.labels.isEmpty {
+            let width = (axis.labels.map { CGFloat($0.text.count) }.max() ?? 0) * Self.glyphWidth + Self.labelGap
+            if axis.position == "leading" {
+                yBand = CGRect(x: plot.minX, y: plot.minY, width: width, height: plot.height)
+                plot.origin.x += width
+            } else {
+                yBand = CGRect(x: plot.maxX - width, y: plot.minY, width: width, height: plot.height)
+            }
+            plot.size.width -= width
+        }
+        if let axis = props.xAxis, !axis.labels.isEmpty {
+            let height = Self.axisFontSize * 4 / 3 + Self.labelGap
+            if axis.position == "top" {
+                xBand = CGRect(x: plot.minX, y: plot.minY, width: plot.width, height: height)
+                plot.origin.y += height
+            } else {
+                xBand = CGRect(x: plot.minX, y: plot.maxY - height, width: plot.width, height: height)
+            }
+            plot.size.height -= height
+        }
+        self.plot = CGRect(x: plot.minX, y: plot.minY, width: max(plot.width, 0), height: max(plot.height, 0))
+    }
+
+    func point(x: Double, y: Double) -> CGPoint {
+        CGPoint(x: plot.minX + plot.width * x, y: plot.minY + plot.height * y)
+    }
+
+    func rect(x0: Double, x1: Double, y0: Double, y1: Double) -> CGRect {
+        let a = point(x: min(x0, x1), y: min(y0, y1)), b = point(x: max(x0, x1), y: max(y0, y1))
+        return CGRect(x: a.x, y: a.y, width: b.x - a.x, height: b.y - a.y)
+    }
+}
+
+struct ChartCanvas: View {
+    let props: ChartProps
+    let items: [ElementNode]
+    let size: CGSize
+
+    var body: some View {
+        let layout = ChartLayout(props: props, size: size)
+        ZStack(alignment: .topLeading) {
+            axisLines(props.xAxis, layout: layout, horizontal: true)
+            axisLines(props.yAxis, layout: layout, horizontal: false)
+            ForEach(Array(props.marks.enumerated()), id: \.offset) { _, mark in
+                ChartMarkView(mark: mark, layout: layout)
+            }
+            axisLabels(props.xAxis, layout: layout, horizontal: true)
+            axisLabels(props.yAxis, layout: layout, horizontal: false)
+            if let legend = props.legend, let box = layout.legend {
+                ChartLegendView(legend: legend)
+                    .frame(width: box.width, height: box.height)
+                    .position(x: box.midX, y: box.midY)
+            }
+            ForEach(items) { item in
+                ChartItemView(item: item, layout: layout)
+            }
+        }
+        .frame(width: size.width, height: size.height, alignment: .topLeading)
+        .clipped()
+    }
+
+    /// The grid lines across the plot and the ticks outside it.
+    @ViewBuilder
+    private func axisLines(_ axis: ChartAxisSpec?, layout: ChartLayout, horizontal: Bool) -> some View {
+        if let axis {
+            let plot = layout.plot
+            let grid = Path { path in
+                for line in axis.gridLines {
+                    if horizontal {
+                        let x = plot.minX + plot.width * line
+                        path.move(to: CGPoint(x: x, y: plot.minY))
+                        path.addLine(to: CGPoint(x: x, y: plot.maxY))
+                    } else {
+                        let y = plot.minY + plot.height * line
+                        path.move(to: CGPoint(x: plot.minX, y: y))
+                        path.addLine(to: CGPoint(x: plot.maxX, y: y))
+                    }
+                }
+            }
+            let ticks = Path { path in
+                for tick in axis.ticks {
+                    if horizontal {
+                        let x = plot.minX + plot.width * tick
+                        let y = axis.position == "top" ? plot.minY : plot.maxY
+                        path.move(to: CGPoint(x: x, y: y))
+                        path.addLine(to: CGPoint(x: x, y: axis.position == "top" ? y - 4 : y + 4))
+                    } else {
+                        let y = plot.minY + plot.height * tick
+                        let x = axis.position == "leading" ? plot.minX : plot.maxX
+                        path.move(to: CGPoint(x: x, y: y))
+                        path.addLine(to: CGPoint(x: axis.position == "leading" ? x - 4 : x + 4, y: y))
+                    }
+                }
+            }
+            let separator = Color.secondary.opacity(0.3)
+            grid.stroke(separator, style: StrokeStyle(lineWidth: 1, dash: axis.dashed ? [2, 2] : []))
+            ticks.stroke(separator, lineWidth: 1)
+        }
+    }
+
+    /// The default text labels, centered on their ticks in the band.
+    @ViewBuilder
+    private func axisLabels(_ axis: ChartAxisSpec?, layout: ChartLayout, horizontal: Bool) -> some View {
+        if let axis {
+            ForEach(Array(axis.labels.enumerated()), id: \.offset) { _, label in
+                let text = Text(verbatim: label.text)
+                    .font(.system(size: ChartLayout.axisFontSize))
+                    .foregroundStyle(.secondary)
+                    .lineLimit(1)
+                    .fixedSize()
+                if horizontal, let band = layout.xBand {
+                    let x = layout.plot.minX + layout.plot.width * label.at
+                    if label.anchor == "leading" {
+                        text.frame(width: max(band.width, 1), alignment: .leading).position(x: x + band.width / 2, y: band.midY)
+                    } else {
+                        text.position(x: min(max(x, layout.plot.minX), layout.plot.maxX), y: band.midY)
+                    }
+                } else if !horizontal, let band = layout.yBand {
+                    let y = layout.plot.minY + layout.plot.height * label.at
+                    text.frame(width: max(band.width - ChartLayout.labelGap, 1), alignment: axis.position == "leading" ? .trailing : .leading)
+                        .position(x: band.midX + (axis.position == "leading" ? -ChartLayout.labelGap / 2 : ChartLayout.labelGap / 2), y: min(max(y, layout.plot.minY), layout.plot.maxY))
+                }
+            }
+        }
+    }
+}
+
+/// One mark, in the plot's points.
+struct ChartMarkView: View {
+    let mark: ChartMarkSpec
+    let layout: ChartLayout
+
+    var body: some View {
+        let style = mark.style.map(AnyShapeStyle.init(spec:)) ?? AnyShapeStyle(Color.accentColor)
+        Group {
+            switch mark.kind {
+            case "rect":
+                let unit = layout.rect(x0: mark.x0, x1: mark.x1, y0: mark.y0, y1: mark.y1)
+                let width = mark.fixedWidth.map { CGFloat($0) } ?? unit.width
+                RoundedRectangle(cornerRadius: mark.cornerRadius, style: .continuous)
+                    .fill(style)
+                    .frame(width: max(width, 0), height: max(unit.height, 0))
+                    .position(x: unit.midX, y: unit.midY)
+            case "line":
+                let points = mark.points.map { layout.point(x: $0.x, y: $0.y) }
+                Path { path in
+                    if let first = points.first {
+                        path.move(to: first)
+                        path.addLines(Array(points.dropFirst()))
+                    }
+                }
+                .stroke(style, style: StrokeStyle(lineWidth: mark.lineWidth, lineCap: .round, lineJoin: .round))
+                if let symbol = mark.symbol {
+                    ForEach(Array(points.enumerated()), id: \.offset) { _, point in
+                        ChartSymbolView(symbol: symbol, size: mark.symbolSize, style: style).position(point)
+                    }
+                }
+            case "area":
+                let upper = mark.points.map { layout.point(x: $0.x, y: $0.y0) }
+                let lower = mark.points.reversed().map { layout.point(x: $0.x, y: $0.y1) }
+                Path { path in
+                    if let first = upper.first {
+                        path.move(to: first)
+                        path.addLines(Array(upper.dropFirst()))
+                        path.addLines(lower)
+                        path.closeSubpath()
+                    }
+                }
+                .fill(style)
+            case "point":
+                ChartSymbolView(symbol: mark.symbol ?? "circle", size: mark.symbolSize, style: style)
+                    .position(layout.point(x: mark.x0, y: mark.y0))
+            case "rule":
+                Path { path in
+                    path.move(to: layout.point(x: mark.x0, y: mark.y0))
+                    path.addLine(to: layout.point(x: mark.x1, y: mark.y1))
+                }
+                .stroke(style, lineWidth: mark.lineWidth)
+            default:
+                EmptyView()
+            }
+        }
+        .opacity(mark.opacity)
+    }
+}
+
+/// A mark's symbol glyph: a circle, a square, or a diamond for the rest.
+struct ChartSymbolView: View {
+    let symbol: String
+    let size: Double
+    let style: AnyShapeStyle
+
+    var body: some View {
+        switch symbol {
+        case "square":
+            Rectangle().fill(style).frame(width: size, height: size)
+        case "circle":
+            Circle().fill(style).frame(width: size, height: size)
+        default:
+            Rectangle().fill(style).frame(width: size * 0.8, height: size * 0.8).rotationEffect(.degrees(45))
+        }
+    }
+}
+
+/// The legend's items: a symbol (or a short line) and the label, flowing in a row.
+struct ChartLegendView: View {
+    let legend: ChartLegendSpec
+
+    var body: some View {
+        let items = Array(legend.items.enumerated())
+        if legend.position == "leading" || legend.position == "trailing" {
+            VStack(alignment: .leading, spacing: 4) {
+                ForEach(items, id: \.offset) { _, item in row(item) }
+            }
+        } else {
+            HStack(spacing: 12) {
+                ForEach(items, id: \.offset) { _, item in row(item) }
+            }
+        }
+    }
+
+    private func row(_ item: ChartLegendItemSpec) -> some View {
+        let style = item.style.map(AnyShapeStyle.init(spec:)) ?? AnyShapeStyle(Color.accentColor)
+        return HStack(spacing: 4) {
+            if let symbol = item.symbol {
+                ChartSymbolView(symbol: symbol, size: 10, style: style)
+            } else {
+                Rectangle().fill(style).frame(width: 18, height: 3)
+            }
+            Text(verbatim: item.label).font(.system(size: ChartLayout.axisFontSize)).foregroundStyle(.secondary).lineLimit(1)
+        }
+    }
+}
+
+/// A `chartitem`: its one child against its mark's rect (an annotation) or
+/// at its tick in the band (an axis label view). An annotation beside the
+/// rect sits in a frame the rect's size, aligned to the edge it leaves from,
+/// so it overflows outward by its own size plus the spacing.
+struct ChartItemView: View {
+    let item: ElementNode
+    let layout: ChartLayout
+
+    var body: some View {
+        let props = ChartItemProps(props: item.props)
+        let content = ZStack { ChildrenView(node: item) }
+        switch props.role {
+        case "xLabel":
+            let band = layout.xBand ?? CGRect(x: layout.plot.minX, y: layout.plot.maxY, width: layout.plot.width, height: 0)
+            content.position(x: layout.plot.minX + layout.plot.width * props.x0, y: band.midY)
+        case "yLabel":
+            let band = layout.yBand ?? CGRect(x: layout.plot.maxX, y: layout.plot.minY, width: 0, height: layout.plot.height)
+            content.position(x: band.midX, y: layout.plot.minY + layout.plot.height * props.y0)
+        default:
+            let rect = layout.rect(x0: props.x0, x1: props.x1, y0: props.y0, y1: props.y1)
+            let spacing = CGFloat(props.spacing)
+            let across = Alignment(name: props.alignment)
+            Group {
+                switch props.position {
+                case "top":
+                    VStack(spacing: spacing) { content; Color.clear.frame(width: rect.width, height: rect.height) }
+                        .frame(width: rect.width, height: rect.height, alignment: Alignment(horizontal: across.horizontal, vertical: .bottom))
+                case "bottom":
+                    VStack(spacing: spacing) { Color.clear.frame(width: rect.width, height: rect.height); content }
+                        .frame(width: rect.width, height: rect.height, alignment: Alignment(horizontal: across.horizontal, vertical: .top))
+                case "leading":
+                    HStack(spacing: spacing) { content; Color.clear.frame(width: rect.width, height: rect.height) }
+                        .frame(width: rect.width, height: rect.height, alignment: Alignment(horizontal: .trailing, vertical: across.vertical))
+                case "trailing":
+                    HStack(spacing: spacing) { Color.clear.frame(width: rect.width, height: rect.height); content }
+                        .frame(width: rect.width, height: rect.height, alignment: Alignment(horizontal: .leading, vertical: across.vertical))
+                default:
+                    content.frame(width: rect.width, height: rect.height, alignment: across)
+                }
+            }
+            .position(x: rect.midX, y: rect.midY)
+        }
+    }
+}
+#endif

package/swift/Sources/SwiftBrowserNative/Views/Kinds/Inspector.swift

@@ -0,0 +1,29 @@
+#if canImport(SwiftUI)
+import Foundation
+import SwiftBrowserProtocol
+import SwiftBrowserTree
+import SwiftUI
+
+/// `inspector`: `.inspector(isPresented:)` in a regular width. The children
+/// are the modified view's elements and, last, an `inspectorpanel` holding
+/// the inspector's content (its `inspectorColumnWidth` hint rides the
+/// panel content's style). The app owns the binding: `presented` is what it
+/// holds, and the protocol has no dismiss from this side (in a compact width
+/// the app presents a sheet instead and the element never appears).
+struct InspectorElement: View {
+    let node: ElementNode
+
+    var body: some View {
+        let props = InspectorProps(props: node.props)
+        let panel = node.children.last { $0.kind == "inspectorpanel" }
+        ZStack {
+            ForEach(node.children.filter { $0.kind != "inspectorpanel" }) { ElementView(node: $0) }
+        }
+        .inspector(isPresented: Binding(get: { props.presented }, set: { _ in })) {
+            if let panel {
+                ZStack { ChildrenView(node: panel) }
+            }
+        }
+    }
+}
+#endif

package/swift/Sources/SwiftBrowserNative/Views/Kinds/Navigation.swift

@@ -155,7 +155,14 @@ struct NavigationScreenElement: View {
         case "principal": return .principal
         case "secondary": return .secondaryAction
         case "bottom": return bottomPlacement
-        default: return trailingPlacement // `trailing`, and `largeTitle` beside it
+        case "largeTitle":
+            // Beside the large title: the shim's own placement; SwiftUI has none, so the bar's trailing edge.
+            #if canImport(FoundationBridge)
+            return .largeTitle
+            #else
+            return trailingPlacement
+            #endif
+        default: return trailingPlacement
         }
     }
 }

package/swift/Sources/SwiftBrowserNative/Views/Kinds/Stacks.swift

@@ -11,6 +11,7 @@ struct VStackElement: View {
         VStack(alignment: HorizontalAlignment(name: props.alignment), spacing: props.spacing.map { CGFloat($0) }) {
             ChildrenView(node: node)
         }
+        .scrollTargetLayout(isEnabled: props.scrollTarget)
     }
 }
 
@@ -32,6 +33,7 @@ struct HStackElement: View {
             HStack(alignment: VerticalAlignment(name: props.alignment), spacing: props.spacing.map { CGFloat($0) }) {
                 ChildrenView(node: node)
             }
+            .scrollTargetLayout(isEnabled: props.scrollTarget)
         }
     }
 }
@@ -106,21 +108,71 @@ struct GeometryElement: View {
     }
 }
 
+/// `scrollview`: its axes and indicators; `refreshable` sends `refresh`;
+/// `snap` is its scroll target behavior (the stack inside marked
+/// `scrollTarget` is the layout whose children snap); `reportsPosition`
+/// is `.scrollPosition(id:)`, which sends `scrollposition` with the marked
+/// element at the anchor once the view settles. A `ScrollViewReader`'s
+/// `proxy.scrollTo(x)` arrives as a `scrollTo` hint, with a new serial each
+/// time, on the marked element it names (`scrollID`, `.id(x)`): the view
+/// finds the latest in its content and scrolls to it.
 struct ScrollViewElement: View {
     let node: ElementNode
     @Environment(\.nativeApp) private var app
+    @State private var position: Int?
+    @State private var served: Double = -1
 
     var body: some View {
         let props = ScrollViewProps(props: node.props)
         let axes: Axis.Set = props.axes == "horizontal" ? .horizontal : props.axes == "both" ? [.horizontal, .vertical] : .vertical
-        let scroll = ScrollView(axes, showsIndicators: props.showsIndicators) {
-            ChildrenView(node: node)
+        let request = Self.scrollRequest(in: node)
+        ScrollViewReader { proxy in
+            let scroll = ScrollView(axes, showsIndicators: props.showsIndicators) {
+                ChildrenView(node: node)
+            }
+            let refreshed: AnyView = props.refreshable ? AnyView(scroll.refreshable { app?.dispatch(.refresh(node.id)) }) : AnyView(scroll)
+            let snapped: AnyView = props.snap == "paging" ? AnyView(refreshed.scrollTargetBehavior(.paging))
+                : props.snap == "viewAligned" ? AnyView(refreshed.scrollTargetBehavior(.viewAligned)) : refreshed
+            let positioned: AnyView = props.reportsPosition
+                ? AnyView(snapped.scrollPosition(id: Binding(get: { position }, set: { next in
+                    guard next != position else { return }
+                    position = next
+                    if let next { app?.dispatch(.scrollPosition(next)) }
+                }), anchor: props.positionAnchor.map(UnitPoint.init(spec:))))
+                : snapped
+            positioned
+                .onAppear { perform(request, with: proxy) }
+                .onChange(of: request?.serial) { _, _ in perform(request, with: proxy) }
         }
-        if props.refreshable {
-            scroll.refreshable { app?.dispatch(.refresh(node.id)) }
-        } else {
-            scroll
+    }
+
+    private func perform(_ request: ScrollRequest?, with proxy: ScrollViewProxy) {
+        guard let request, request.serial > served else { return }
+        served = request.serial
+        position = request.id
+        proxy.scrollTo(request.id, anchor: request.anchor)
+    }
+
+    struct ScrollRequest: Equatable {
+        var serial: Double
+        var id: Int
+        var anchor: UnitPoint?
+    }
+
+    /// The newest `scrollTo` among the content's marked elements (not those of a scroll view nested inside).
+    static func scrollRequest(in node: ElementNode) -> ScrollRequest? {
+        var best: ScrollRequest?
+        func visit(_ element: ElementNode) {
+            for child in element.children {
+                if child.kind == "scrollview" || child.kind == "list" { continue }
+                if child.kind == "styled", let request = child.style.scrollTo, best == nil || request.serial > best!.serial {
+                    best = ScrollRequest(serial: request.serial, id: child.id, anchor: request.anchor.map(UnitPoint.init(spec:)))
+                }
+                visit(child)
+            }
         }
+        visit(node)
+        return best
     }
 }
 

package/swift/Sources/SwiftBrowserNative/Views/StyleModifier.swift

@@ -11,7 +11,7 @@ import SwiftUI
 /// Type-erased step by step: a chain of sixty optional modifiers would
 /// otherwise be one type the compiler has to name.
 extension View {
-    func styled(_ style: Style) -> AnyView {
+    func styled(_ style: Style, id: Int? = nil) -> AnyView {
         var view = AnyView(self)
 
         // Text attributes, which flow down the environment. A font with only a
@@ -71,16 +71,31 @@ extension View {
             }
         }
         if let frame = style.frame {
-            if frame.isFlexible {
+            // Per axis, a fixed length wins over a min/max, as the web renderer
+            // lays it out: `{ maxWidth: "infinity", height: 1 }` is
+            // `.frame(height: 1).frame(maxWidth: .infinity)`, a rule across
+            // the width.
+            let alignment = Alignment(name: frame.alignment)
+            if frame.width != nil || frame.height != nil {
+                view = AnyView(view.frame(width: frame.width.map { CGFloat($0) }, height: frame.height.map { CGFloat($0) }, alignment: alignment))
+            }
+            let flexibleWidth = frame.width == nil && (frame.minWidth != nil || frame.maxWidth != nil)
+            let flexibleHeight = frame.height == nil && (frame.minHeight != nil || frame.maxHeight != nil)
+            if flexibleWidth || flexibleHeight {
                 view = AnyView(view.frame(
-                    minWidth: CGFloat(dimension: frame.minWidth), maxWidth: CGFloat(dimension: frame.maxWidth),
-                    minHeight: CGFloat(dimension: frame.minHeight), maxHeight: CGFloat(dimension: frame.maxHeight),
-                    alignment: Alignment(name: frame.alignment)
+                    minWidth: flexibleWidth ? CGFloat(dimension: frame.minWidth) : nil, maxWidth: flexibleWidth ? CGFloat(dimension: frame.maxWidth) : nil,
+                    minHeight: flexibleHeight ? CGFloat(dimension: frame.minHeight) : nil, maxHeight: flexibleHeight ? CGFloat(dimension: frame.maxHeight) : nil,
+                    alignment: alignment
                 ))
-            } else {
-                view = AnyView(view.frame(width: frame.width.map { CGFloat($0) }, height: frame.height.map { CGFloat($0) }, alignment: Alignment(name: frame.alignment)))
             }
         }
+        if let relative = style.containerRelativeFrame {
+            var axes: Axis.Set = []
+            if relative.horizontal { axes.insert(.horizontal) }
+            if relative.vertical { axes.insert(.vertical) }
+            let a = relative.a, b = relative.b
+            view = AnyView(view.containerRelativeFrame(axes, alignment: Alignment(name: relative.alignment)) { length, _ in a * length + b })
+        }
         if let ratio = style.aspectRatio {
             let mode: ContentMode = style.aspectRatioContentMode == "fill" ? .fill : .fit
             view = AnyView(view.aspectRatio(ratio.map { CGFloat($0) }, contentMode: mode))
@@ -127,6 +142,9 @@ extension View {
         if style.hitTesting == false { view = AnyView(view.allowsHitTesting(false)) }
         if style.hidden { view = AnyView(view.hidden()) }
         if let help = style.help { view = AnyView(view.help(help)) }
+        // A `ScrollViewReader`'s `.id(x)`: the element's own id names it to a `scrollTo` and a scroll position.
+        if style.scrollID, let id { view = AnyView(view.id(id)) }
+        if let width = style.raw.double("inspectorColumnWidth") { view = AnyView(view.inspectorColumnWidth(width)) }
 
         // Lists.
         if let badge = style.badge { view = AnyView(view.badge(Text(badge))) }

package/swift/Sources/SwiftBrowserProtocol/Props.swift

@@ -54,9 +54,13 @@ public struct StackProps: Equatable, Sendable {
     /// A `VStack`'s horizontal alignment, an `HStack`'s vertical one, a `ZStack`'s frame alignment.
     public var alignment: String
 
+    /// `.scrollTargetLayout()`: the stack's children are the snap points of the scroll view around it.
+    public var scrollTarget: Bool
+
     public init(props: JSONObject) {
         spacing = props.double("spacing")
         alignment = props.string("alignment") ?? "center"
+        scrollTarget = props.bool("scrollTarget") ?? false
     }
 }
 
@@ -111,13 +115,27 @@ public struct ScrollViewProps: Equatable, Sendable {
     public var axes: String
     public var showsIndicators: Bool
     public var refreshable: Bool
+    /// `.scrollTargetBehavior`: `viewAligned` or `paging`.
+    public var snap: String?
+    /// `.scrollPosition(id:)`: the view reports the marked element at its anchor as it settles.
+    public var reportsPosition: Bool
+    public var positionAnchor: UnitPointSpec?
     public init(props: JSONObject) {
         axes = props.string("axes") ?? "vertical"
         showsIndicators = props.bool("showsIndicators") ?? true
         refreshable = props.bool("refreshable") ?? false
+        snap = props.string("snap")
+        reportsPosition = props.bool("reportsPosition") ?? false
+        positionAnchor = UnitPointSpec(json: props.value("positionAnchor"))
     }
 }
 
+/// `inspector`: the modified view's elements, then an `inspectorpanel`.
+public struct InspectorProps: Equatable, Sendable {
+    public var presented: Bool
+    public init(props: JSONObject) { presented = props.bool("presented") ?? false }
+}
+
 public struct ListProps: Equatable, Sendable {
     /// `insetGrouped` (the default), `grouped`, `plain`, `sidebar`.
     public var style: String
@@ -473,3 +491,155 @@ public struct SizeReportProps: Equatable, Sendable {
         reader = props.int("reader")
     }
 }
+
+// MARK: - Charts
+
+/// `chart`: the marks in unit coordinates of the plot (x 0…1 left to right,
+/// y 0…1 top to bottom), the axes with their grid lines, ticks and labels
+/// already placed and formatted, and the legend (docs/ops-protocol.md,
+/// "Phase 7"). A renderer measures the labels, lays the plot out and draws.
+public struct ChartProps: Equatable, Sendable {
+    public var marks: [ChartMarkSpec]
+    public var xAxis: ChartAxisSpec?
+    public var yAxis: ChartAxisSpec?
+    public var legend: ChartLegendSpec?
+    public init(props: JSONObject) {
+        marks = (props.array("marks") ?? []).compactMap(ChartMarkSpec.init(json:))
+        xAxis = ChartAxisSpec(json: props.value("xAxis"))
+        yAxis = ChartAxisSpec(json: props.value("yAxis"))
+        legend = ChartLegendSpec(json: props.value("legend"))
+    }
+}
+
+/// A point of a line (`y`) or an area (`y0 ≤ y1`) mark.
+public struct ChartPointSpec: Equatable, Sendable {
+    public var x: Double
+    public var y: Double
+    public var y0: Double
+    public var y1: Double
+    init?(json: JSONValue) {
+        guard let x = json["x"].double else { return nil }
+        self.x = x
+        y = json["y"].double ?? json["y0"].double ?? 0
+        y0 = json["y0"].double ?? y
+        y1 = json["y1"].double ?? y
+    }
+}
+
+/// One mark: `rect` (bars), `line`, `area`, `point` or `rule`.
+public struct ChartMarkSpec: Equatable, Sendable {
+    public var kind: String
+    public var style: ShapeStyleSpec?
+    public var opacity: Double
+    /// `rect` and `rule`: the unit rect (a rule's two ends); `point`: `x0`/`y0`.
+    public var x0: Double
+    public var x1: Double
+    public var y0: Double
+    public var y1: Double
+    public var cornerRadius: Double
+    /// A rect this wide in points, centered on the unit rect, instead of the unit rect's width.
+    public var fixedWidth: Double?
+    /// `line` and `area`.
+    public var points: [ChartPointSpec]
+    public var lineWidth: Double
+    public var interpolation: String
+    /// `circle`, `square`, `triangle`, `diamond`, `cross`, `plus`, `asterisk`; nil for none.
+    public var symbol: String?
+    public var symbolSize: Double
+    public init?(json: JSONValue) {
+        guard let kind = json["kind"].string else { return nil }
+        self.kind = kind
+        style = ShapeStyleSpec(json: json["style"])
+        opacity = json["opacity"].double ?? 1
+        x0 = json["x0"].double ?? json["x"].double ?? 0
+        x1 = json["x1"].double ?? x0
+        y0 = json["y0"].double ?? json["y"].double ?? 0
+        y1 = json["y1"].double ?? y0
+        cornerRadius = json["cornerRadius"].double ?? 0
+        fixedWidth = json["fixedWidth"].double
+        points = (json["points"].array ?? []).compactMap(ChartPointSpec.init(json:))
+        lineWidth = json["lineWidth"].double ?? (kind == "rule" ? 1 : 2)
+        interpolation = json["interpolation"].string ?? "linear"
+        symbol = json["symbol"].string ?? (kind == "point" ? "circle" : nil)
+        symbolSize = json["symbolSize"].double ?? 8
+    }
+}
+
+public struct ChartAxisLabelSpec: Equatable, Sendable {
+    /// Unit position along the axis (y: 0 is the top).
+    public var at: Double
+    public var text: String
+    /// `leading`: an x label that starts at its tick instead of centering on it.
+    public var anchor: String?
+    init?(json: JSONValue) {
+        guard let at = json["at"].double else { return nil }
+        self.at = at
+        text = json["text"].string ?? ""
+        anchor = json["anchor"].string
+    }
+}
+
+public struct ChartAxisSpec: Equatable, Sendable {
+    /// x: `bottom` or `top`; y: `trailing` or `leading`.
+    public var position: String
+    public var gridLines: [Double]
+    public var dashed: Bool
+    public var ticks: [Double]
+    public var labels: [ChartAxisLabelSpec]
+    public init?(json: JSONValue) {
+        guard let fields = json.object else { return nil }
+        position = fields.string("position") ?? "bottom"
+        gridLines = (fields.array("gridLines") ?? []).compactMap(\.double)
+        dashed = fields.bool("dashed") ?? false
+        ticks = (fields.array("ticks") ?? []).compactMap(\.double)
+        labels = (fields.array("labels") ?? []).compactMap(ChartAxisLabelSpec.init(json:))
+    }
+}
+
+public struct ChartLegendItemSpec: Equatable, Sendable {
+    public var label: String
+    public var style: ShapeStyleSpec?
+    /// Nil: a short line instead of a symbol.
+    public var symbol: String?
+    init(json: JSONValue) {
+        label = json["label"].string ?? ""
+        style = ShapeStyleSpec(json: json["style"])
+        symbol = json["symbol"].string
+    }
+}
+
+public struct ChartLegendSpec: Equatable, Sendable {
+    /// `top`, `bottom`, `leading` or `trailing`.
+    public var position: String
+    public var items: [ChartLegendItemSpec]
+    public init?(json: JSONValue) {
+        guard let fields = json.object else { return nil }
+        position = fields.string("position") ?? "bottom"
+        items = (fields.array("items") ?? []).map(ChartLegendItemSpec.init(json:))
+    }
+}
+
+/// `chartitem`: an annotation against its mark's unit rect, or an axis label
+/// view at its tick (`x0 == x1` for an x label, `y0 == y1` for a y label).
+public struct ChartItemProps: Equatable, Sendable {
+    /// `annotation`, `xLabel` or `yLabel`.
+    public var role: String
+    public var x0: Double
+    public var x1: Double
+    public var y0: Double
+    public var y1: Double
+    /// `top`, `bottom`, `leading`, `trailing` or `overlay`.
+    public var position: String
+    public var alignment: String
+    public var spacing: Double
+    public init(props: JSONObject) {
+        role = props.string("role") ?? "annotation"
+        x0 = props.double("x0") ?? 0
+        x1 = props.double("x1") ?? x0
+        y0 = props.double("y0") ?? 0
+        y1 = props.double("y1") ?? y0
+        position = props.string("position") ?? "overlay"
+        alignment = props.string("alignment") ?? "center"
+        spacing = props.double("spacing") ?? 0
+    }
+}

package/swift/Sources/SwiftBrowserProtocol/RendererEvent.swift

@@ -88,6 +88,8 @@ public struct RendererEvent: Equatable, Sendable {
     public static func longPress(_ id: Int) -> RendererEvent { with("longpress", id: id) }
     /// A `list` or `scrollview` with `refreshable` was pulled.
     public static func refresh(_ id: Int) -> RendererEvent { with("refresh", id: id) }
+    /// `.scrollPosition(id:)`: the marked element at the scroll view's anchor once it settled.
+    public static func scrollPosition(_ id: Int) -> RendererEvent { with("scrollposition", id: id) }
     /// A `menu` opened or closed (lazy menus build their items on `open`).
     public static func menu(_ id: Int, open: Bool) -> RendererEvent { with("menu", id: id, ["open": .bool(open)]) }
     /// The host's answer to a `native` element's own event (docs/native.md, the escape hatch).

package/swift/Sources/SwiftBrowserProtocol/Style.swift

@@ -67,6 +67,12 @@ public struct Style: Equatable, Sendable {
     public var help: String?
     public var matchedGeometry: String?
     public var contentTransition: String?
+    /// `.containerRelativeFrame`: the length along each named axis is `a × container + b`.
+    public var containerRelativeFrame: ContainerRelativeFrameSpec?
+    /// `.id(x)` inside a `ScrollViewReader`: the element a `scrollTo` or a scroll position names.
+    public var scrollID: Bool
+    /// `proxy.scrollTo(x)`: the request (its serial is new each time) on the element it names.
+    public var scrollTo: ScrollToSpec?
 
     public init(json: JSONValue) {
         let fields = json.object ?? [:]
@@ -137,6 +143,9 @@ public struct Style: Equatable, Sendable {
         help = fields.string("help")
         matchedGeometry = fields.string("matchedGeometry")
         contentTransition = fields.object("contentTransition")?.string("kind")
+        containerRelativeFrame = ContainerRelativeFrameSpec(json: fields.value("containerRelativeFrame"))
+        scrollID = fields.bool("scrollID") ?? false
+        scrollTo = ScrollToSpec(json: fields.value("scrollTo"))
     }
 
     public init() {
@@ -146,3 +155,35 @@ public struct Style: Equatable, Sendable {
     /// The style's field names, for the unsupported-field diagnostics and tests.
     public var fieldNames: [String] { raw.keys.sorted() }
 }
+
+/// `.containerRelativeFrame(axes)` as the style hint carries it: `length = a × container + b`.
+public struct ContainerRelativeFrameSpec: Equatable, Sendable {
+    public var horizontal: Bool
+    public var vertical: Bool
+    public var a: Double
+    public var b: Double
+    public var alignment: String
+    public init?(json: JSONValue) {
+        guard let fields = json.object else { return nil }
+        horizontal = fields.bool("horizontal") ?? false
+        vertical = fields.bool("vertical") ?? false
+        a = fields.double("a") ?? 1
+        b = fields.double("b") ?? 0
+        alignment = fields.string("alignment") ?? "center"
+    }
+}
+
+/// A `ScrollViewReader` proxy's `scrollTo` on the element it names.
+public struct ScrollToSpec: Equatable, Sendable {
+    /// Increases with every request, across all readers.
+    public var serial: Double
+    public var anchor: UnitPointSpec?
+    /// `horizontal`, `vertical` or `both` (the default).
+    public var axes: String
+    public init?(json: JSONValue) {
+        guard let fields = json.object, let serial = fields.double("serial") else { return nil }
+        self.serial = serial
+        anchor = UnitPointSpec(json: fields.value("anchor"))
+        axes = fields.string("axes") ?? "both"
+    }
+}

package/wasm/SwiftBrowserNative.wasm

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/wasm/SwiftBrowserNative.wasm
-size: 49193851 bytes
-sha256: 314a751e10bb902322011666194057cb533dfcdc7f31df7d4c6a7e55f1b8181d
+size: 49299172 bytes
+sha256: 4b0ae4bc428d21234784a4c806f021482aa294045f94c5fc80eeea0ad40b5405