@swiftbrowser/native 0.10.4 → 0.12.0

package/src/site.ts

@@ -0,0 +1,111 @@
+/**
+ * The native app as a static site (`swiftbrowser-native site`): the same
+ * bundle `build` writes for the Xcode target, run in the browser by the
+ * SwiftBrowser Native module built for WebAssembly (docs/native.md, "The
+ * round trip"): the native views compiled against the SwiftUI shim, with the
+ * page's JavaScript as the engine. The web renderer draws what the shim
+ * emits, as it draws any Swift app. The site is what `swiftbrowser build`
+ * writes for a Swift app: the page at `/`, the module, the bundle as the
+ * app's one resource (`/bundle/app.js`, which the module evaluates at
+ * launch) and the manifest. Node only.
+ */
+
+import { existsSync, mkdtempSync, rmSync, statSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { buildSite } from '@swiftbrowser/web';
+import { bundle, type BuildOptions } from './build.js';
+
+/** The module as the package ships it (publish.yml builds it; `wasm/` is gitignored in the repository). */
+export const PACKAGED_MODULE = fileURLToPath(new URL('../wasm/SwiftBrowserNative.wasm', import.meta.url));
+
+export interface SiteOptions extends Omit<BuildOptions, 'outfile'> {
+  /** The directory to write the site into (emptied first). */
+  outDir: string;
+  /**
+   * The site's app name (letters, digits, `_` and `-`): the module's file
+   * name and the document title. The entry's project folder's name by default
+   * (`js/src/index.tsx` → the folder holding `js`, as `native init` lays an
+   * app out), else `App`.
+   */
+  name?: string;
+  /** Shown as the document title and in the web manifest; `name` by default. */
+  displayName?: string;
+  /** The SwiftBrowser Native module built for WebAssembly; `PACKAGED_MODULE` by default. */
+  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';
+}
+
+export interface SiteResult {
+  name: string;
+  outDir: string;
+  module: string;
+  moduleBytes: number;
+  bundleBytes: number;
+  warnings: string[];
+}
+
+const APP_NAME = /^[A-Za-z0-9_-]+$/;
+
+/** The app name an entry suggests: the folder holding its `js/` project, else the entry's own folder. */
+export function siteNameFor(entry: string): string {
+  const dir = path.dirname(path.resolve(entry));
+  const parts = dir.split(path.sep);
+  const js = parts.lastIndexOf('js');
+  const candidate = js > 0 ? parts[js - 1] : path.basename(dir) === 'src' ? parts[parts.length - 2] : path.basename(dir);
+  const cleaned = (candidate ?? '').replace(/[^A-Za-z0-9_-]/g, '');
+  return cleaned && APP_NAME.test(cleaned) ? cleaned : 'App';
+}
+
+/** Bundles the app and writes the site around the module. */
+export async function buildNativeSite(options: SiteOptions): Promise<SiteResult> {
+  const name = options.name ?? siteNameFor(options.entry);
+  if (!APP_NAME.test(name)) throw new Error(`site: the app name must be letters, digits, "_" and "-": ${name}`);
+  const module = path.resolve(options.module ?? PACKAGED_MODULE);
+  if (!existsSync(module)) {
+    throw new Error(
+      module === PACKAGED_MODULE
+        ? `site: this @swiftbrowser/native has no module at ${module}; pass one with --module (swift build --swift-sdk <wasm sdk> -c release --product NativeRoundTrip in a SwiftBrowser checkout)`
+        : `site: no module at ${module}`,
+    );
+  }
+  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, 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-'));
+  try {
+    const built = await bundle({ ...bundleOptions, outfile: path.join(resources, 'app.js') });
+    writeFileSync(path.join(resources, 'app.js'), built.code);
+    await buildSite({
+      apps: [{
+        name,
+        displayName: displayName ?? name,
+        description: 'A SwiftBrowser Native app in the browser',
+        wasm: module,
+        catalogs: (catalogs ?? []).map((catalog) => path.resolve(catalog)),
+        resources: [path.join(resources, 'app.js')],
+      }],
+      layout: 'app',
+      outDir: path.resolve(outDir),
+      ...(base !== undefined ? { base } : {}),
+      logLevel: logLevel ?? 'warn',
+    });
+    return { name, outDir: path.resolve(outDir), module, moduleBytes: statSync(module).size, bundleBytes: built.bytes, warnings: built.warnings };
+  } finally {
+    rmSync(resources, { recursive: true, force: true });
+  }
+}

package/src/wasmHost.ts

@@ -1,147 +1,8 @@
 /**
- * The host's JavaScript as SwiftBrowser Native's engine (docs/native.md,
- * "The round trip"): for a module built with the round-trip target
- * (`Native/RoundTrip`, the native views compiled against the shim), this
- * answers its one import, `sb_native.request`, and exposes the native
- * functions Swift installs (`applyOps`, `log`, `now`, …) on `__sbNative`,
- * each a call of the module's `sb_native_invoke` export.
- *
- * Node (scripts/run-wasi.mjs) and a page use it the same way: merge
- * `imports` into the module's imports, instantiate, then `attach` the
- * instance. Strings cross linear memory as UTF-8; an answer to Swift is a
- * buffer from `sb_alloc` holding a little-endian 4-byte length and the
- * bytes, which Swift frees, and a result from Swift is the same layout,
- * freed with `sb_native_free` once read.
+ * `@swiftbrowser/native/wasm-host`: the host's JavaScript as SwiftBrowser
+ * Native's engine for a module built with the round-trip target (docs/native.md,
+ * "The round trip"). The implementation lives in the web renderer
+ * (Web/src/nativeHost.ts), which attaches it to any module that imports
+ * `sb_native`; this entry is for Node (scripts/run-wasi.mjs) and tests.
  */
-
-export interface WasmNativeHostOptions {
-  /** Runs a script at the global scope (default: an indirect `eval`). */
-  evaluate?: (script: string, name: string) => void;
-  /** The global object the bundle's globals live on (default `globalThis`). */
-  global?: Record<string, unknown>;
-}
-
-export interface WasmNativeHost {
-  /** Merge into the module's import object before instantiating. */
-  imports: {
-    sb_native: {
-      request: (kind: number, kindLength: number, a: number, aLength: number, b: number, bLength: number) => number;
-    };
-  };
-  /** The instance, once instantiated: its memory and the exports the host calls. */
-  attach(instance: WebAssembly.Instance): void;
-  /** The `__sbNative` object as it stands (replaced by a reset). */
-  readonly native: Record<string, (...args: unknown[]) => unknown>;
-}
-
-interface Exports {
-  memory: WebAssembly.Memory;
-  sb_alloc: (length: number) => number;
-  sb_native_invoke: (name: number, nameLength: number, args: number, argsLength: number) => number;
-  sb_native_free: (pointer: number) => void;
-}
-
-/** The globals a bundle defines, dropped by a reset (`JSHost.reset`). */
-const BUNDLE_GLOBALS = ['__sbDispatch', '__sbTimerFired', '__sbFetchResult', '__sbRefresh', '__sbVendor'];
-
-export function wasmNativeHost(options: WasmNativeHostOptions = {}): WasmNativeHost {
-  const g = options.global ?? (globalThis as unknown as Record<string, unknown>);
-  const evaluate = options.evaluate ?? ((script: string) => (0, eval)(script));
-  const encoder = new TextEncoder();
-  const decoder = new TextDecoder();
-  let exports: Exports | null = null;
-  let native: Record<string, (...args: unknown[]) => unknown> = {};
-
-  const need = (): Exports => {
-    if (!exports) throw new Error('wasmNativeHost: attach(instance) before the module runs');
-    return exports;
-  };
-  const read = (pointer: number, length: number): string =>
-    decoder.decode(new Uint8Array(need().memory.buffer, pointer, length));
-  /** A buffer from `sb_alloc` with the text's length and bytes; Swift frees it. */
-  const answer = (value: unknown): number => {
-    const bytes = encoder.encode(JSON.stringify(value));
-    const pointer = need().sb_alloc(bytes.length + 4);
-    // The allocation may have grown the memory: take the view after it.
-    const view = new DataView(need().memory.buffer);
-    view.setUint32(pointer, bytes.length, true);
-    new Uint8Array(need().memory.buffer, pointer + 4, bytes.length).set(bytes);
-    return pointer;
-  };
-  const describe = (error: unknown): string => (error instanceof Error ? (error.stack ?? error.message) : String(error));
-
-  /** A native function's call: into Swift and back with its JSON result. */
-  const invoke = (name: string, args: unknown[]): unknown => {
-    const nameBytes = encoder.encode(name);
-    const argsBytes = encoder.encode(JSON.stringify(args));
-    const namePointer = need().sb_alloc(nameBytes.length || 1);
-    new Uint8Array(need().memory.buffer, namePointer, nameBytes.length).set(nameBytes);
-    const argsPointer = need().sb_alloc(argsBytes.length || 1);
-    new Uint8Array(need().memory.buffer, argsPointer, argsBytes.length).set(argsBytes);
-    const result = need().sb_native_invoke(namePointer, nameBytes.length, argsPointer, argsBytes.length);
-    if (result === 0) return undefined;
-    const length = new DataView(need().memory.buffer).getUint32(result, true);
-    const text = read(result + 4, length);
-    need().sb_native_free(result);
-    const value: unknown = JSON.parse(text);
-    if (value && typeof value === 'object' && 'error' in value && Object.keys(value).length === 1) {
-      throw new Error(String((value as { error: unknown }).error));
-    }
-    return value;
-  };
-
-  const reset = (): void => {
-    for (const name of BUNDLE_GLOBALS) delete g[name];
-    native = {};
-    g['__sbNative'] = native;
-  };
-
-  const request = (kind: number, kindLength: number, a: number, aLength: number, b: number, bLength: number): number => {
-    const what = read(kind, kindLength);
-    const first = read(a, aLength);
-    const second = read(b, bLength);
-    switch (what) {
-      case 'reset':
-        reset();
-        return 0;
-      case 'install':
-        native[first] = (...args: unknown[]) => invoke(first, args);
-        return 0;
-      case 'eval':
-        try {
-          evaluate(first, second);
-          return 0;
-        } catch (error) {
-          return answer({ error: describe(error) });
-        }
-      case 'call': {
-        const fn = g[first];
-        if (typeof fn !== 'function') return answer({ error: `${first} is not defined` });
-        try {
-          const result: unknown = (fn as (...args: unknown[]) => unknown)(...(JSON.parse(second) as unknown[]));
-          return answer({ ok: result === undefined ? null : result });
-        } catch (error) {
-          return answer({ error: describe(error) });
-        }
-      }
-      case 'has':
-        return answer({ ok: first in g });
-      default:
-        return answer({ error: `unknown request ${what}` });
-    }
-  };
-
-  reset();
-  return {
-    imports: { sb_native: { request } },
-    attach(instance) {
-      for (const name of ['memory', 'sb_alloc', 'sb_native_invoke', 'sb_native_free']) {
-        if (!(name in instance.exports)) throw new Error(`wasmNativeHost: the module does not export ${name}`);
-      }
-      exports = instance.exports as unknown as Exports;
-    },
-    get native() {
-      return native;
-    },
-  };
-}
+export { wasmNativeHost, type WasmNativeHost, type WasmNativeHostOptions } from '@swiftbrowser/web';

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))
@@ -57,6 +57,14 @@ struct ElementView: View {
         case "swipeactions": return AnyView(SwipeActionsElement(node: node))
         // 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