craft-native 0.0.436 → 0.0.443

package/dist/macos/templates/CraftMacApplication.swift

@@ -1,5 +1,6 @@
 import AppKit
 import AVKit
+import ZigJS
 import CoreImage
 import UserNotifications
 import UniformTypeIdentifiers
@@ -23,19 +24,31 @@ final class CraftMacScene: NSObject, NSWindowDelegate {
     var holdsQuit = false
     /// The content width the screen last heard, so a resize that changes nothing sends nothing.
     var reportedViewportWidth: CGFloat = -1
-    init(name: String, route: String, options: [String: Any], application: CraftMacApplication) {
+    /// The content size the screen started with, which the window corrects once it shows.
+    let startedViewport: CGSize
+    private var shown = false
+    /// How long a window waits for its screen's first tree before it opens without it.
+    static let firstTreeGrace: TimeInterval = 0.5
+    /// `runtime` is the screen already started for this window (the main one starts before AppKit has
+    /// launched); without one the screen starts here, and evaluates its bundle while the window is made.
+    init(name: String, route: String, options: [String: Any], application: CraftMacApplication, runtime prepared: CraftMacRuntime? = nil) {
+        CraftTrace.mark("scene \(name)")
         self.name = name
-        runtime = CraftMacRuntime(route: route, params: options["params"] as? [String: Any] ?? [:], network: application.network)
-        renderer = CraftMacRenderer(runtime: runtime)
         let width = number(options["width"]) ?? 1120, height = number(options["height"]) ?? 740
         let transparent = (options["titlebarStyle"] as? String ?? application.titlebarStyle) == "transparent"
+        let viewport = Self.contentSize(options: options, application: application, name: name)
+        runtime = prepared ?? application.startScreen(route: route, options: options, viewport: viewport, colorScheme: CraftMacColor.isDark ? "dark" : "light")
+        reportedViewportWidth = viewport.width
+        startedViewport = viewport
+        renderer = CraftMacRenderer(runtime: runtime)
         let lights = options["trafficLights"] as? [Any] ?? (name == "main" ? application.trafficLights : nil)
         trafficLights = lights.flatMap { values in values.count == 2 ? number(values[0]).flatMap { x in number(values[1]).map { CGPoint(x: x, y: $0) } } : nil }
-        let panel = CraftMacWindow(contentRect: CGRect(x: 0, y: 0, width: width, height: height), styleMask: transparent ? [.titled, .closable, .resizable, .miniaturizable, .fullSizeContentView] : [.titled, .closable, .resizable, .miniaturizable], backing: .buffered, defer: false)
+        let panel = CraftMacWindow(contentRect: CGRect(x: 0, y: 0, width: width, height: height), styleMask: transparent ? [.titled, .closable, .resizable, .miniaturizable, .fullSizeContentView] : [.titled, .closable, .resizable, .miniaturizable], backing: .buffered, defer: true)
         panel.runtime = runtime
         window = panel
+        CraftTrace.mark("window created")
         super.init()
-        runtime.scene = self; renderer.window = window
+        renderer.window = window
         window.title = options["title"] as? String ?? application.appName
         if (options["titlebarStyle"] as? String ?? application.titlebarStyle) == "transparent" {
             window.titlebarAppearsTransparent = true
@@ -48,14 +61,54 @@ final class CraftMacScene: NSObject, NSWindowDelegate {
         renderer.root.autoresizingMask = [.width, .height]
         window.contentView = renderer.root
         window.delegate = self; window.center()
-        if name == "main" && application.testDirectory == nil { window.setFrameAutosaveName("\(application.appName)NativeMain") }
-        window.makeKeyAndOrderFront(nil)
+        if let autosave = Self.autosaveName(name: name, application: application) { window.setFrameAutosaveName(autosave) }
+        // Whatever the screen drew while the window was made is in it before it shows. A screen that has not
+        // drawn yet gets a moment to, so the window opens with its content rather than blank.
+        runtime.attach(self)
+        if runtime.hasDrawn { show() } else {
+            runtime.whenDrawn { [weak self] in self?.show() }
+            DispatchQueue.main.asyncAfter(deadline: .now() + Self.firstTreeGrace) { [weak self] in self?.show() }
+        }
+    }
+
+    /// Orders the window front the first time. The window is made deferred, so the window server's side
+    /// of it is made here, once, rather than updated for each property set while it was configured; and
+    /// it opens without the zoom AppKit plays for a new window, which runs a display link and draws it in
+    /// over several frames. Later showings animate as usual.
+    func show() {
+        guard !shown else { return }
+        shown = true
+        let behavior = window.animationBehavior
+        window.animationBehavior = .none
+        CraftTrace.span("window ordered front") { window.makeKeyAndOrderFront(nil) }
+        window.animationBehavior = behavior
         placeTrafficLights()
-        // The screen starts knowing its width, so `md:`/`lg:` classes and `matchMedia` are right on the first frame.
+        // The screen started with the size this window was expected to open at; a saved frame the
+        // screen cannot fit, or a smaller display, makes it another, which the screen now hears.
         let size = window.contentLayoutRect.size
-        reportedViewportWidth = size.width
-        runtime.context.evaluateScript("__stxNativeBridge.viewportWidth = \(Double(size.width)); __stxNativeBridge.viewportHeight = \(Double(size.height));")
-        runtime.load(application.bundle)
+        if abs(size.width - startedViewport.width) >= 0.5 || abs(size.height - startedViewport.height) >= 0.5 {
+            reportedViewportWidth = size.width
+            runtime.send("VIEWPORT", ["width": Double(size.width), "height": Double(size.height)])
+        }
+    }
+
+    static func autosaveName(name: String, application: CraftMacApplication) -> String? {
+        name == "main" && application.testDirectory == nil ? "\(application.appName)NativeMain" : nil
+    }
+
+    /// The content size (below the title bar) the window will open at, known before it exists: the size
+    /// asked for, or the frame AppKit saved for it last time. Its screen starts with it.
+    static func contentSize(options: [String: Any], application: CraftMacApplication, name: String) -> CGSize {
+        let transparent = (options["titlebarStyle"] as? String ?? application.titlebarStyle) == "transparent"
+        let titlebar = NSWindow.frameRect(forContentRect: CGRect(x: 0, y: 0, width: 100, height: 100), styleMask: [.titled]).height - 100
+        let width = number(options["width"]) ?? 1120, height = number(options["height"]) ?? 740
+        // `x y width height` of the frame, then the screen's.
+        if let autosave = autosaveName(name: name, application: application),
+           let saved = UserDefaults.standard.string(forKey: "NSWindow Frame \(autosave)")?.split(separator: " ").compactMap({ Double($0) }), saved.count >= 4 {
+            return CGSize(width: saved[2], height: max(0, saved[3] - titlebar))
+        }
+        // A full-size content view runs under the title bar, which its layout rect leaves out.
+        return CGSize(width: width, height: transparent ? max(0, height - titlebar) : height)
     }
 
     /// Tells the screen its new width (VIEWPORT, as a phone does on rotation): only when the width changed,
@@ -109,8 +162,8 @@ final class CraftMacApplication: NSObject, NSApplicationDelegate, UNUserNotifica
     var titlebarStyle = "standard"
     var trafficLights: [Any]?
     /// Apps that ship their own agent (Attic) hand out a session cookie at
-    /// `/native/session`. An app that talks to a hosted API has no such
-    /// endpoint and starts with `--no-session`.
+    /// `/native/session` (`authorize`). An app that talks to a hosted API has
+    /// no such endpoint and starts with `--no-session`.
     var requiresSession = true
     var mainWindowOptions: [String: Any] = [:]
     /// The Dock icon's menu (`craft-app.json` `dockMenu`): each item sends its action as a desktop command.
@@ -128,34 +181,46 @@ final class CraftMacApplication: NSObject, NSApplicationDelegate, UNUserNotifica
     var testMenu: [[String: Any]] = []
     var testMenuChoice: String?
     var appearanceObservation: NSKeyValueObservation?
+    /// The main window's screen, started before AppKit launched, waiting for its window.
+    var preparedMain: CraftMacRuntime?
+    /// The appearance it started with, which AppKit could not be asked yet.
+    var preparedColorScheme = ""
+    var mainOptions: [String: Any] { mainWindowOptions.merging(["title": appName]) { _, new in new } }
+    /// Launch finished, and why the agent issued no session, if it did not (shown once both are known).
+    var launched = false
+    var sessionFailure: String?
     /// A quit waiting for screens to finish (`craft.desktop.onQuit`), for at most `quitGrace` seconds.
     private var pendingQuit: (token: String, waiting: Set<String>, timeout: Timer)?
     static let quitGrace: TimeInterval = 3
 
+    func applicationWillFinishLaunching(_ notification: Notification) { CraftTrace.mark("will finish launching") }
     func applicationDidFinishLaunching(_ notification: Notification) {
-        installMenus()
+        CraftTrace.mark("did finish launching")
+        CraftTrace.span("menus installed") { installMenus() }
         appearanceObservation = NSApp.observe(\.effectiveAppearance, options: [.new]) { [weak self] _, _ in
             DispatchQueue.main.async { self?.appearanceChanged() }
         }
         NSApp.activate(ignoringOtherApps: true)
-        if !requiresSession {
-            open(name: "main", route: initialRoute, options: mainWindowOptions.merging(["title": appName]) { _, new in new })
-            startTestDriver()
-            return
-        }
-        // The agent issues an HttpOnly cookie. It stays in URLSession, shared
-        // by native windows, and is never handed to the JavaScript context.
-        let request = URLRequest(url: network.base.appendingPathComponent("native/session"))
-        network.session.dataTask(with: request) { [weak self] _, response, error in
+        open(name: "main", route: initialRoute, options: mainOptions)
+        if preparedColorScheme != (CraftMacColor.isDark ? "dark" : "light") { appearanceChanged() }
+        startTestDriver()
+        launched = true
+        if let failure = sessionFailure { sessionFailed(failure) }
+    }
+    /// Asks the agent for the session cookie (`CraftMacNetwork.authorize`) as the app starts, before
+    /// AppKit has launched; the screen's requests wait for it. Without one the app says so and quits.
+    func authorize() {
+        network.authorize { failure in
             DispatchQueue.main.async {
-                guard let self else { return }
-                guard error == nil, (response as? HTTPURLResponse)?.statusCode == 200 else {
-                    let alert = NSAlert(); alert.messageText = "Could not connect to the app"; alert.informativeText = error?.localizedDescription ?? "The local agent did not issue a native session."; alert.runModal(); NSApp.terminate(nil); return
-                }
-                self.open(name: "main", route: self.initialRoute, options: self.mainWindowOptions.merging(["title": self.appName]) { _, new in new })
-                self.startTestDriver()
+                CraftTrace.mark("native session answered")
+                guard let failure else { return }
+                self.sessionFailure = failure
+                if self.launched { self.sessionFailed(failure) }
             }
-        }.resume()
+        }
+    }
+    private func sessionFailed(_ message: String) {
+        let alert = NSAlert(); alert.messageText = "Could not connect to the app"; alert.informativeText = message; alert.runModal(); NSApp.terminate(nil)
     }
     func applicationShouldHandleReopen(_ sender: NSApplication, hasVisibleWindows flag: Bool) -> Bool { scenes["main"]?.window.makeKeyAndOrderFront(nil); return true }
     /// Links from other apps (this app as the default browser) and files dropped on the Dock icon.
@@ -212,7 +277,24 @@ final class CraftMacApplication: NSObject, NSApplicationDelegate, UNUserNotifica
     }
     func open(name: String, route: String, options: [String: Any]) {
         if let scene = scenes[name] { scene.window.makeKeyAndOrderFront(nil); return }
-        scenes[name] = CraftMacScene(name: name, route: route, options: options, application: self)
+        let prepared = name == "main" ? preparedMain : nil
+        if prepared != nil { preparedMain = nil }
+        scenes[name] = CraftMacScene(name: name, route: route, options: options, application: self, runtime: prepared)
+    }
+    /// A screen's thread and context, its bundle evaluated as soon as the thread can.
+    func startScreen(route: String, options: [String: Any], viewport: CGSize, colorScheme: String) -> CraftMacRuntime {
+        let runtime = CraftMacRuntime(route: route, params: options["params"] as? [String: Any] ?? [:], network: network, colorScheme: colorScheme)
+        runtime.load(bundle, viewport: viewport)
+        return runtime
+    }
+    /// Starts the main window's screen before AppKit launches: connecting to the window server and
+    /// launching take a few hundred milliseconds, most of them waiting, and the screen evaluates its
+    /// bundle, mounts and sends its first requests meanwhile. Its tree is drawn when the window opens.
+    func prepareMainScreen() {
+        // NSApp does not exist yet, so the system's setting stands in for AppKit's appearance;
+        // launching checks it against AppKit's.
+        preparedColorScheme = UserDefaults.standard.string(forKey: "AppleInterfaceStyle") == "Dark" ? "dark" : "light"
+        preparedMain = startScreen(route: initialRoute, options: mainOptions, viewport: CraftMacScene.contentSize(options: mainOptions, application: self, name: "main"), colorScheme: preparedColorScheme)
     }
     /// A menu command goes to the window it was chosen in (the key window), else the main one: with
     /// two windows of the same screen open, cmd-T opens one tab, not one in each.
@@ -231,7 +313,7 @@ final class CraftMacApplication: NSObject, NSApplicationDelegate, UNUserNotifica
             // AppKit lays the title bar out again for the new appearance, after this returns.
             scene.placeTrafficLights()
             DispatchQueue.main.async { [weak scene] in scene?.placeTrafficLights() }
-            scene.runtime.context.evaluateScript("__stxNativeBridge.colorScheme = '\(scheme)';")
+            scene.runtime.evaluate("__stxNativeBridge.colorScheme = '\(scheme)';")
             // The protocol's own message: the screen restyles its `dark:` classes and tells `craft.appearance.onChange`.
             scene.runtime.send("APPEARANCE", ["colorScheme": scheme])
             scene.window.effectiveAppearance.performAsCurrentDrawingAppearance {
@@ -293,7 +375,7 @@ final class CraftMacApplication: NSObject, NSApplicationDelegate, UNUserNotifica
         if parts.contains("alt") { item.keyEquivalentModifierMask.insert(.option) }
         item.isEnabled = raw["disabled"] as? Bool != true
         item.state = raw["checked"] as? Bool == true ? .on : .off
-        if let symbol = raw["icon"] as? String { item.image = NSImage(systemSymbolName: symbol, accessibilityDescription: nil) }
+        if let symbol = raw["icon"] as? String { item.image = CraftMacSymbols.image(symbol) }
         return item
     }
     func perform(_ method: String, args: [Any], scene: CraftMacScene?, reply: @escaping (Any) -> Void) {
@@ -373,10 +455,10 @@ final class CraftMacApplication: NSObject, NSApplicationDelegate, UNUserNotifica
             guard let path = file["path"], chosenFiles.contains(path), let data = try? Data(contentsOf: URL(fileURLWithPath: path)), data.count <= 256 * 1024 * 1024,
                   var request = network.request(["url": endpoint, "method": "POST", "headers": ["x-filename": file["name"] ?? "Attachment", "content-type": file["type"] ?? "application/octet-stream"]]) else { reply(["error": "Could not read a picked attachment"]); return }
             request.httpBody = data
-            network.session.dataTask(with: request) { data, response, error in DispatchQueue.main.async {
+            network.resume(network.session.dataTask(with: request) { data, response, error in DispatchQueue.main.async {
                 guard error == nil, (response as? HTTPURLResponse)?.statusCode == 200, let data, let value = try? JSONSerialization.jsonObject(with: data) else { reply(["error": error?.localizedDescription ?? "Attachment upload failed"]); return }
                 results.append(value); next(index + 1)
-            } }.resume()
+            } })
         }; next(0)
     }
     private func preview(_ options: [String: Any], scene: CraftMacScene?) {
@@ -390,18 +472,18 @@ final class CraftMacApplication: NSObject, NSApplicationDelegate, UNUserNotifica
             player.player?.play()
         } else {
             let image = NSImageView(); image.imageScaling = .scaleProportionallyUpOrDown; panel.contentView = image
-            network.session.dataTask(with: request) { data, _, _ in DispatchQueue.main.async { image.image = data.flatMap(NSImage.init(data:)) } }.resume()
+            network.resume(network.session.dataTask(with: request) { data, _, _ in DispatchQueue.main.async { image.image = data.flatMap(NSImage.init(data:)) } })
         }
         panel.center(); panel.makeKeyAndOrderFront(nil)
     }
     private func export(_ options: [String: Any], reply: @escaping (Any) -> Void) {
         let panel = NSSavePanel(); panel.nameFieldStringValue = options["name"] as? String ?? "Attachment"
         guard panel.runModal() == .OK, let destination = panel.url, let request = network.request(["url": options["url"] ?? ""]) else { reply(false); return }
-        network.session.downloadTask(with: request) { location, response, error in
+        network.resume(network.session.downloadTask(with: request) { location, response, error in
             var saved = false
             if error == nil, (response as? HTTPURLResponse)?.statusCode == 200, let location { do { if FileManager.default.fileExists(atPath: destination.path) { try FileManager.default.removeItem(at: destination) }; try FileManager.default.moveItem(at: location, to: destination); saved = true } catch {} }
             DispatchQueue.main.async { reply(saved) }
-        }.resume()
+        })
     }
     func notification(_ method: String, options: [String: Any], reply: @escaping (Any) -> Void) {
         guard method == "schedule" else { reply(false); return }
@@ -554,7 +636,7 @@ final class CraftMacApplication: NSObject, NSApplicationDelegate, UNUserNotifica
                 return node
             }
             func classes(_ view: NSView) -> [String] { [String(describing: type(of: view))] + view.subviews.flatMap(classes) }
-            return ["name": scene.name, "title": scene.window.title, "route": scene.runtime.route, "contextClass": String(describing: type(of: scene.runtime.context)), "nodes": nodes, "viewClasses": classes(scene.renderer.root), "viewportWidth": Double(scene.reportedViewportWidth), "errors": scene.runtime.errors]
+            return ["name": scene.name, "title": scene.window.title, "route": scene.runtime.route, "contextClass": String(describing: ZigJSContext.self), "nodes": nodes, "viewClasses": classes(scene.renderer.root), "viewportWidth": Double(scene.reportedViewportWidth), "errors": scene.runtime.errors]
         }
         let webViews = windows.reduce(0) { count, window in count + ((window["viewClasses"] as? [String] ?? []).filter { $0.contains("WKWebView") || $0 == "WebView" }.count) }
         return ["renderer": "appkit", "scriptEngine": "zig-js", "appearance": CraftMacColor.isDark ? "dark" : "light", "windows": windows, "webViews": webViews, "menu": testMenu]
@@ -563,6 +645,7 @@ final class CraftMacApplication: NSObject, NSApplicationDelegate, UNUserNotifica
 
 @main struct CraftMacMain {
     static func main() throws {
+        CraftTrace.mark("main")
         // A bundled app is launched by Finder with no arguments: its settings are
         // `Contents/Resources/craft-app.json`, written by the build. A flag on the
         // command line still wins, so a development run can point elsewhere.
@@ -595,6 +678,8 @@ final class CraftMacApplication: NSObject, NSApplicationDelegate, UNUserNotifica
         application.network = CraftMacNetwork(base: api)
         let testDirectory = argument("--test-dir")
         if !testDirectory.isEmpty { application.testDirectory = URL(fileURLWithPath: testDirectory, isDirectory: true) }
+        if application.requiresSession { application.authorize() }
+        application.prepareMainScreen()
         let app = NSApplication.shared
         app.setActivationPolicy(.regular); app.delegate = application; app.run()
     }

package/dist/macos/templates/CraftMacRenderer.swift

@@ -21,6 +21,22 @@ enum CraftMacColor {
     }
 }
 
+/// SF Symbols, one image per name and description. An image keeps what it rasterized, so views that
+/// share one draw it once rather than each looking the glyph up in the catalog and rendering it again.
+enum CraftMacSymbols {
+    private struct Key: Hashable { let name: String, description: String? }
+    private static var images: [Key: NSImage?] = [:]
+    static func image(_ name: String, description: String? = nil) -> NSImage? {
+        let key = Key(name: name, description: description)
+        if let image = images[key] { return image }
+        // Descriptions can carry changing text (a button's title), so the cache starts over rather than grow without end.
+        if images.count >= 512 { images.removeAll(keepingCapacity: true) }
+        let image = NSImage(systemSymbolName: name, accessibilityDescription: description)
+        images[key] = image
+        return image
+    }
+}
+
 /// The same C ABI used by Craft's mobile hosts. AppKit supplies text metrics;
 /// Zig supplies flex sizing and justification, without a second layout rule.
 enum CraftMacFlex {
@@ -56,7 +72,6 @@ final class CraftMacFlow: NSView {
         // scopes must preserve the root's allocation on that later pass too.
         if componentScope, boxes.count == 1, boxes[0].kind != "Modal", boxes[0].superview === self {
             boxes[0].frame = CGRect(origin: .zero, size: size)
-            boxes[0].layoutSubtreeIfNeeded()
             return
         }
         let horizontal = style["flexDirection"] as? String == "row"
@@ -102,9 +117,10 @@ final class CraftMacFlow: NSView {
             let measured = horizontal ? box.measure(width: frames[index].0, stretch: true) : sizes[index]
             let cross = min(crossAvailable, crossExplicit ?? (alignment == "stretch" ? crossAvailable : (horizontal ? measured.height : measured.width)))
             let offset = margins.start + (alignment == "center" ? (crossAvailable - cross) / 2 : alignment == "flex-end" ? crossAvailable - cross : 0)
+            // No layout pass of its own: a child whose size changed is marked for layout, and AppKit lays it out
+            // after this one returns, in the same pass. Asking here walked its subtree again for every ancestor.
             box.frame = horizontal ? CGRect(x: left + frames[index].1, y: top + offset, width: frames[index].0, height: cross)
                 : CGRect(x: left + offset, y: top + frames[index].1, width: cross, height: frames[index].0)
-            box.layoutSubtreeIfNeeded()
         }
         for box in boxes where !box.isHidden && box.layoutStyle["position"] as? String == "absolute" {
             let measured = box.measure(width: size.width)
@@ -113,7 +129,6 @@ final class CraftMacFlow: NSView {
             let width = dimension(box.layoutStyle["width"], base: size.width) ?? (leading != nil && trailing != nil ? max(0, size.width - leading! - trailing!) : measured.width)
             let height = dimension(box.layoutStyle["height"], base: size.height) ?? (above != nil && below != nil ? max(0, size.height - above! - below!) : measured.height)
             box.frame = CGRect(x: (leading ?? (trailing.map { size.width - $0 - width } ?? 0)), y: (above ?? (below.map { size.height - $0 - height } ?? 0)), width: width, height: height)
-            box.layoutSubtreeIfNeeded()
         }
     }
     func fitting(width: CGFloat, stretchChildren: Bool = true) -> CGSize {
@@ -289,8 +304,11 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate, NSDrag
     private struct MeasureKey: Hashable { let width: CGFloat, stretch: Bool }
     private var measured: [MeasureKey: CGSize] = [:]
     /// What this box measured is stale: it or something inside it changed (CraftMacRenderer.update).
-    func forgetMeasurements() { measured.removeAll(keepingCapacity: true) }
+    func forgetMeasurements() { measured.removeAll(keepingCapacity: true); controlSize = nil }
     private var measuredGeneration = -1
+    /// A control's own size (a button, a switch, a picker), asked once rather than at every width the box is
+    /// measured at: a button answers through SwiftUI's layout on current macOS. Forgotten with the measurements.
+    private var controlSize: CGSize?
     var componentRoot: CraftMacBox? { props["data-stx-component-wrapper"] != nil && flow?.boxes.count == 1 && flow?.boxes.first?.kind != "Modal" ? flow?.boxes.first : nil }
     var layoutStyle: [String: Any] {
         guard let child = componentRoot else { return style }
@@ -313,8 +331,13 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate, NSDrag
             text.isSelectable = true; text.maximumNumberOfLines = 0
             control = text
         case "Button", "Link":
-            let button = NSButton(title: "", target: self, action: #selector(pressed))
-            button.bezelStyle = .rounded; control = button
+            // What `NSButton(title:target:action:)` sets up, without the `sizeToFit` it ends with: a button's
+            // size goes through SwiftUI's layout on current macOS, and the box sets its frame anyway.
+            let button = NSButton(frame: .zero)
+            button.setButtonType(.momentaryPushIn); button.bezelStyle = .rounded
+            button.lineBreakMode = .byTruncatingTail; button.imageScaling = .scaleProportionallyDown
+            button.title = ""; button.target = self; button.action = #selector(pressed)
+            control = button
         case "TextInput":
             let input = NSTextField(); input.delegate = self; control = input
         case "Picker":
@@ -348,6 +371,7 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate, NSDrag
     required init?(coder: NSCoder) { fatalError("Native controls are created from STX") }
 
     func configure(_ node: [String: Any]) {
+        controlSize = nil
         props = node["props"] as? [String: Any] ?? [:]
         flow?.componentScope = props["data-stx-component-wrapper"] != nil
         style = node["style"] as? [String: Any] ?? [:]
@@ -378,10 +402,15 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate, NSDrag
         } else { layer?.shadowOpacity = 0; layer?.shadowPath = nil; control?.layer?.cornerRadius = 0 }
         layer?.cornerCurve = .continuous
         for edge in ["Top", "Right", "Bottom", "Left"] {
+            let hidden = (number(style["border\(edge)Width"]) ?? 0) <= 0
+            // An edge's layer is made the first time it shows: most boxes never draw one, and four hidden
+            // layers on every box still cost Core Animation a commit each. An input makes its four at once,
+            // as it always did, since swapping its control later puts the new one above layers made before.
+            if edgeBorders[edge] == nil, hidden, kind != "TextInput" { continue }
             let border = edgeBorders[edge] ?? CALayer()
             if edgeBorders[edge] == nil { edgeBorders[edge] = border; layer?.addSublayer(border) }
             border.backgroundColor = CraftMacColor.parse(style["borderColor"], fallback: .separatorColor).cgColor
-            border.isHidden = (number(style["border\(edge)Width"]) ?? 0) <= 0
+            border.isHidden = hidden
         }
         if let name = props["material"] as? String {
             if material == nil { let effect = NSVisualEffectView(); effect.state = .followsWindowActiveState; addSubview(effect, positioned: .below, relativeTo: control); material = effect }
@@ -428,7 +457,7 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate, NSDrag
             button.bezelStyle = props["variant"] as? String == "toolbar" ? .texturedRounded : .rounded
             button.isBordered = !["toolbar", "ghost"].contains(props["variant"] as? String ?? "")
             button.contentTintColor = CraftMacColor.parse(style["color"], fallback: .controlAccentColor)
-            if let symbol = props["symbol"] as? String { button.image = NSImage(systemSymbolName: symbol, accessibilityDescription: button.title); button.imagePosition = button.title.isEmpty ? .imageOnly : .imageLeading }
+            if let symbol = props["symbol"] as? String { button.image = CraftMacSymbols.image(symbol, description: button.title); button.imagePosition = button.title.isEmpty ? .imageOnly : .imageLeading }
             if button.image != nil { button.symbolConfiguration = NSImage.SymbolConfiguration(pointSize: number(style["fontSize"]) ?? 16, weight: .regular) }
             if props["variant"] as? String == "primary" { button.bezelColor = .controlAccentColor }
             if props["variant"] as? String == "danger" { button.contentTintColor = .systemRed }
@@ -457,7 +486,7 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate, NSDrag
             picker.isEnabled = props["disabled"] as? Bool != true
         }
         if let image = control as? NSImageView {
-            if kind == "Icon" { image.image = NSImage(systemSymbolName: props["symbol"] as? String ?? props["name"] as? String ?? "questionmark", accessibilityDescription: label); image.contentTintColor = CraftMacColor.parse(style["color"]) }
+            if kind == "Icon" { image.image = CraftMacSymbols.image(props["symbol"] as? String ?? props["name"] as? String ?? "questionmark", description: label); image.contentTintColor = CraftMacColor.parse(style["color"]) }
             else { configureImage(image) }
         }
         if let video = control as? AVPlayerView, let source = (props["source"] as? String ?? props["src"] as? String), source != imageSource {
@@ -556,7 +585,7 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate, NSDrag
                 image?.image = data.flatMap(NSImage.init(data:))
                 self.fire(image?.image == nil ? "onError" : "onLoad")
             }
-        }; imageTask?.resume()
+        }; imageTask.map { renderer?.runtime.network.resume($0) }
     }
 
     /// `style` with the pointer's layers on top: `hoverStyle` while hovered, `pressStyle` while pressed.
@@ -727,8 +756,9 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate, NSDrag
         return NSEdgeInsets(top: number(style["paddingTop"]) ?? vertical, left: number(style["paddingLeft"]) ?? horizontal, bottom: number(style["paddingBottom"]) ?? vertical, right: number(style["paddingRight"]) ?? horizontal)
     }
     func measure(width: CGFloat, stretch: Bool = false) -> CGSize {
-        if measuredGeneration != CraftMacBox.measureGeneration || measured.count > 64 { measured.removeAll(keepingCapacity: true); measuredGeneration = CraftMacBox.measureGeneration }
-        let key = MeasureKey(width: width, stretch: stretch)
+        if measuredGeneration != CraftMacBox.measureGeneration || measured.count > 64 { forgetMeasurements(); measuredGeneration = CraftMacBox.measureGeneration }
+        // Only a box with children can stretch to the width offered; a leaf measures the same either way.
+        let key = MeasureKey(width: width, stretch: stretch && flow != nil)
         if let size = measured[key] { return size }
         let size = measureSubtree(width: width, stretch: stretch)
         measured[key] = size
@@ -756,7 +786,15 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate, NSDrag
         else if kind == "Icon" { size = CGSize(width: 18, height: 18) }
         else if kind == "Image" || kind == "Video" { size = CGSize(width: limit, height: 160) }
         else if kind == "TextInput" { size = CGSize(width: limit, height: props["multiline"] as? Bool == true ? 48 : 28) }
-        else if let control = control as? NSControl { size = control.intrinsicContentSize; size.width = max(24, size.width); size.height = max(26, size.height) }
+        else if let control = control as? NSControl {
+            // A control its style sizes in full is not asked at all: the width and height below replace its answer.
+            if specifiedWidth != nil, dimension(style["height"], base: 1000) != nil { size = CGSize(width: 24, height: 26) }
+            else {
+                let natural = controlSize ?? control.intrinsicContentSize
+                controlSize = natural
+                size = natural; size.width = max(24, size.width); size.height = max(26, size.height)
+            }
+        }
         else if let flow { size = flow.fitting(width: limit, stretchChildren: false) }
         size.width = specifiedWidth ?? (flow != nil && stretch ? limit : min(limit, size.width))
         if let maximum = dimension(style["maxWidth"], base: width) { size.width = min(size.width, maximum) }
@@ -808,7 +846,7 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate, NSDrag
             }
         }
         if let child = componentRoot {
-            child.frame = bounds; child.layoutSubtreeIfNeeded()
+            child.frame = bounds
         } else if let scroll = control as? NSScrollView {
             if let flow {
                 let width = scroll.contentSize.width
@@ -950,7 +988,7 @@ final class CraftMacSidebar: NSScrollView, NSOutlineViewDataSource, NSOutlineVie
         let badge = NSTextField(labelWithString: item.badge); badge.font = NSFont.systemFont(ofSize: 11); badge.textColor = .secondaryLabelColor
         badge.translatesAutoresizingMaskIntoConstraints = false; badge.setContentHuggingPriority(.required, for: .horizontal); cell.addSubview(badge)
         NSLayoutConstraint.activate([label.leadingAnchor.constraint(equalTo: cell.leadingAnchor, constant: item.icon.isEmpty ? 16 : 39), label.trailingAnchor.constraint(lessThanOrEqualTo: badge.leadingAnchor, constant: -8), label.centerYAnchor.constraint(equalTo: cell.centerYAnchor), badge.trailingAnchor.constraint(equalTo: cell.trailingAnchor, constant: -16), badge.centerYAnchor.constraint(equalTo: cell.centerYAnchor)])
-        if !item.icon.isEmpty { let image = NSImageView(image: NSImage(systemSymbolName: item.icon, accessibilityDescription: nil) ?? NSImage()); image.contentTintColor = item.color; image.frame = CGRect(x: 16, y: (rowHeight - 16) / 2, width: 16, height: 16); cell.imageView = image; cell.addSubview(image) }
+        if !item.icon.isEmpty { let image = NSImageView(image: CraftMacSymbols.image(item.icon) ?? NSImage()); image.contentTintColor = item.color; image.frame = CGRect(x: 16, y: (rowHeight - 16) / 2, width: 16, height: 16); cell.imageView = image; cell.addSubview(image) }
         cell.setAccessibilityIdentifier(item.id); cell.setAccessibilityLabel(item.label)
         return cell
     }
@@ -967,28 +1005,62 @@ final class CraftMacRenderer {
     var boxes: [String: CraftMacBox] = [:]
     weak var window: NSWindow?
     var sheets: [String: NSPanel] = [:]
+    /// Boxes whose nodes went away: hidden at once, and taken out of the window once the batch is drawn.
+    /// Leaving a window walks a view's whole subtree, every control in it hearing so, and a batch that
+    /// replaced a list's rows spent most of its time on the rows it dropped, before any new row showed.
+    private var leaving: [CraftMacBox] = []
     init(runtime: CraftMacRuntime) { self.runtime = runtime }
+
+    private func discard(_ box: CraftMacBox) {
+        box.imageTask?.cancel()
+        guard box.superview != nil else { return }
+        box.isHidden = true
+        if leaving.isEmpty { DispatchQueue.main.async { [weak self] in self?.sweep() } }
+        leaving.append(box)
+    }
+    private func sweep() {
+        let gone = leaving; leaving.removeAll()
+        CATransaction.begin(); CATransaction.setDisableActions(true)
+        gone.forEach { $0.removeFromSuperview() }
+        CATransaction.commit()
+    }
     /// The box for `node`, made or reconfigured, and its children's in order; every id drawn goes into `retained`.
     func reconcile(_ node: [String: Any], retained: inout Set<String>) -> CraftMacBox {
+        let box = configured(node, retained: &retained)
+        reconcileChildren(of: box, node, retained: &retained)
+        return box
+    }
+
+    /// The box for `node`, made or reconfigured, without its children.
+    private func configured(_ node: [String: Any], retained: inout Set<String>) -> CraftMacBox {
         let id = node["id"] as? String ?? "root", kind = node["type"] as? String ?? "View"
         retained.insert(id)
         let box = boxes[id] ?? CraftMacBox(id: id, kind: kind, renderer: self)
         boxes[id] = box; box.configure(node)
-        if let flow = box.flow, kind != "Button" {
-            let children = (node["children"] as? [Any] ?? []).compactMap { $0 as? [String: Any] }.map { reconcile($0, retained: &retained) }
-            for child in flow.boxes where !children.contains(where: { $0 === child }) { child.removeFromSuperview() }
-            flow.boxes = children
-            for child in children where child.superview !== flow && sheets[child.id] == nil { flow.addSubview(child) }
-            // `zIndex` draws a child above its siblings (an overlay over a web page), highest last.
-            let raised = children.filter { (number($0.layoutStyle["zIndex"]) ?? 0) > 0 && $0.superview === flow }
-                .sorted { (number($0.layoutStyle["zIndex"]) ?? 0) < (number($1.layoutStyle["zIndex"]) ?? 0) }
-            if !raised.isEmpty, Array(flow.subviews.suffix(raised.count)) != raised {
-                for child in raised { flow.addSubview(child, positioned: .above, relativeTo: nil) }
-            }
-        }
         return box
     }
 
+    /// A box's children in order, then theirs. Each new child joins its parent before its own children are
+    /// made, so views join the window one at a time: AppKit takes about twice as long over a whole new
+    /// subtree joining at once.
+    private func reconcileChildren(of box: CraftMacBox, _ node: [String: Any], retained: inout Set<String>) {
+        guard let flow = box.flow, box.kind != "Button" else { return }
+        let nodes = (node["children"] as? [Any] ?? []).compactMap { $0 as? [String: Any] }
+        let children = nodes.map { configured($0, retained: &retained) }
+        // A child dropped here either moves to another parent in this pass (adding it there takes it from
+        // here) or is gone, and the caller discards it: it is not taken out of the window twice.
+        flow.boxes = children
+        for child in children where child.superview !== flow && sheets[child.id] == nil { flow.addSubview(child) }
+        for (child, childNode) in zip(children, nodes) { reconcileChildren(of: child, childNode, retained: &retained) }
+        // `zIndex` draws a child above its siblings (an overlay over a web page), highest last. After the
+        // children's own children: a component's zIndex is its root's.
+        let raised = children.filter { (number($0.layoutStyle["zIndex"]) ?? 0) > 0 && $0.superview === flow }
+            .sorted { (number($0.layoutStyle["zIndex"]) ?? 0) < (number($1.layoutStyle["zIndex"]) ?? 0) }
+        if !raised.isEmpty, Array(flow.subviews.suffix(raised.count)) != raised {
+            for child in raised { flow.addSubview(child, positioned: .above, relativeTo: nil) }
+        }
+    }
+
     /// A batch drawn where it happened rather than across the window: each changed node's subtree
     /// (or, for a node the batch created, its nearest drawn ancestor's) is reconciled again, and only
     /// those boxes and the boxes above them measure and lay out again. A hover on one row used to
@@ -997,10 +1069,14 @@ final class CraftMacRenderer {
     func update(_ ids: [String], parentOf: (String) -> String?, node nodeFor: (String) -> [String: Any]?) -> Bool {
         guard !boxes.isEmpty else { return false }
         var targets: [String] = []
+        let top = root.boxes.first?.id
         for id in ids {
             var current: String? = id
             while let candidate = current, boxes[candidate] == nil { current = parentOf(candidate) }
-            guard let target = current else { return false }
+            // A node the batch removed has no parent left (one it made and removed never had a box): the
+            // removal marked the parent it left, which is drawn instead, discarding its box. Declining here
+            // redrew the whole window for any batch that dropped a row it had also updated.
+            guard let target = current, target == top || parentOf(target) != nil else { continue }
             if !targets.contains(target) { targets.append(target) }
         }
         // A target inside another is drawn with it.
@@ -1019,7 +1095,7 @@ final class CraftMacRenderer {
             _ = reconcile(node, retained: &retained)
             for id in before where !retained.contains(id) {
                 guard let gone = boxes.removeValue(forKey: id) else { continue }
-                gone.imageTask?.cancel(); gone.removeFromSuperview()
+                discard(gone)
             }
             for id in retained { if let drawn = boxes[id] { drawn.forgetMeasurements(); drawn.needsLayout = true } }
             var above: NSView? = box.superview
@@ -1049,15 +1125,17 @@ final class CraftMacRenderer {
             let bottom = bounds.maxY >= (scroll.documentView?.bounds.height ?? 0) - 8
             scrolls.append((box, bounds.origin, bottom))
         } }
-        let box = reconcile(document, retained: &retained)
+        // The top box joins the window before its children are made (see reconcileChildren).
+        let box = configured(document, retained: &retained)
+        root.style = ["flexDirection": "column"]
+        root.boxes = [box]; if box.superview !== root { root.addSubview(box) }
+        reconcileChildren(of: box, document, retained: &retained)
         // Boxes were reconfigured and children replaced: nothing measured before now holds.
         CraftMacBox.measureGeneration &+= 1
         for (id, box) in boxes where !retained.contains(id) {
-            box.imageTask?.cancel(); box.removeFromSuperview(); boxes.removeValue(forKey: id)
+            discard(box); boxes.removeValue(forKey: id)
             if let sheet = sheets.removeValue(forKey: id) { window?.endSheet(sheet); sheet.close() }
         }
-        root.style = ["flexDirection": "column"]
-        root.boxes = [box]; if box.superview !== root { root.addSubview(box) }
         box.frame = root.bounds; box.layoutSubtreeIfNeeded(); root.layoutBoxes(in: root.bounds.size)
         for modal in boxes.values where modal.kind == "Modal" {
             guard let window else { continue }