craft-native 0.0.436 → 0.0.442

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 }