craft-native 0.0.396 → 0.0.408

package/dist/macos/templates/CraftMacRenderer.swift

@@ -68,9 +68,17 @@ final class CraftMacFlow: NSView {
         let inner = CGSize(width: max(0, size.width - left - right), height: max(0, size.height - top - bottom))
         let visible = boxes.filter { !$0.isHidden && $0.kind != "Modal" && $0.layoutStyle["position"] as? String != "absolute" }
         let gap = dimension(style["gap"], base: inner.width) ?? 0
+        // Margins on the cross axis (left and right in a column, top and bottom in a row) shrink what a child may fill and offset it.
+        func crossMargins(_ box: CraftMacBox) -> (start: CGFloat, end: CGFloat) {
+            let layout = box.layoutStyle
+            let margin = number(layout["margin"]) ?? 0
+            let axis = number(layout[horizontal ? "marginVertical" : "marginHorizontal"]) ?? margin
+            return (number(layout[horizontal ? "marginTop" : "marginLeft"]) ?? axis, number(layout[horizontal ? "marginBottom" : "marginRight"]) ?? axis)
+        }
         let sizes = visible.map { box in
             let alignment = box.layoutStyle["alignSelf"] as? String ?? style["alignItems"] as? String ?? "stretch"
-            return box.measure(width: inner.width, stretch: !horizontal && alignment == "stretch")
+            let margins = crossMargins(box)
+            return box.measure(width: horizontal ? inner.width : max(0, inner.width - margins.start - margins.end), stretch: !horizontal && alignment == "stretch")
         }
         let items = visible.enumerated().map { index, box -> CraftMacFlex.Item in
             let main = horizontal ? sizes[index].width : sizes[index].height
@@ -87,12 +95,13 @@ final class CraftMacFlow: NSView {
         }
         let frames = CraftMacFlex.layout(items, available: horizontal ? inner.width : inner.height, gap: gap, justify: style["justifyContent"] as? String ?? "flex-start")
         for (index, box) in visible.enumerated() {
-            let crossAvailable = horizontal ? inner.height : inner.width
+            let margins = crossMargins(box)
+            let crossAvailable = max(0, (horizontal ? inner.height : inner.width) - margins.start - margins.end)
             let crossExplicit = dimension(box.layoutStyle[horizontal ? "height" : "width"], base: crossAvailable)
             let alignment = box.layoutStyle["alignSelf"] as? String ?? style["alignItems"] as? String ?? "stretch"
             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 = alignment == "center" ? (crossAvailable - cross) / 2 : alignment == "flex-end" ? crossAvailable - cross : 0
+            let offset = margins.start + (alignment == "center" ? (crossAvailable - cross) / 2 : alignment == "flex-end" ? crossAvailable - cross : 0)
             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()
@@ -134,7 +143,12 @@ final class CraftMacFlow: NSView {
             let margin = number(layout["marginVertical"]) ?? number(layout["margin"]) ?? 0
             return total + (number(layout["marginTop"]) ?? margin) + (number(layout["marginBottom"]) ?? margin)
         }
-        return CGSize(width: (sizes.map(\.width).max() ?? 0) + horizontalPadding, height: sizes.reduce(0) { $0 + $1.height } + verticalPadding + gaps + margins)
+        let crossMargins = zip(visible, sizes).map { box, size -> CGFloat in
+            let layout = box.layoutStyle
+            let margin = number(layout["marginHorizontal"]) ?? number(layout["margin"]) ?? 0
+            return size.width + (number(layout["marginLeft"]) ?? margin) + (number(layout["marginRight"]) ?? margin)
+        }
+        return CGSize(width: (crossMargins.max() ?? 0) + horizontalPadding, height: sizes.reduce(0) { $0 + $1.height } + verticalPadding + gaps + margins)
     }
 }
 
@@ -156,8 +170,81 @@ func nativeText(_ node: [String: Any]) -> String {
 /// selection, and scroll position survive updates instead of being recreated.
 final class CraftMacTextView: NSTextView {
     var placeholder = ""
+    /// An inline completion drawn after the caret in the placeholder color
+    /// (`ghostText`); Tab accepts it (`onAcceptCompletion`), any edit drops it.
+    var ghost = ""
+    /// `markdown` prop: the text stays plain markdown, drawn the way Notes would show it (headings, bold, italic,
+    /// code, quotes, checklists with the done ones struck through), restyled after every edit.
+    var markdown = false
+    var lastStyled = ""
+    /// The font the markdown styling is built from. NSTextView's own `font` answers the font at the caret, which a heading changes.
+    var baseFont: NSFont?
+    override func didChangeText() { ghost = ""; super.didChangeText(); restyle() }
+    func restyle() {
+        guard markdown, let storage = textStorage else { return }
+        let base = baseFont ?? font ?? NSFont.systemFont(ofSize: 13)
+        let text = string as NSString
+        let full = NSRange(location: 0, length: text.length)
+        // The dynamic system font does not answer NSFontManager's trait conversion, so weight and slant are built directly.
+        enum Trait { case bold, italic }
+        func traits(_ font: NSFont, _ trait: Trait) -> NSFont {
+            switch trait {
+            case .bold:
+                let heavier = NSFont.systemFont(ofSize: font.pointSize, weight: .bold)
+                return font.fontDescriptor.symbolicTraits.contains(.italic) ? (NSFont(descriptor: heavier.fontDescriptor.withSymbolicTraits(.italic), size: font.pointSize) ?? heavier) : heavier
+            case .italic:
+                return NSFont(descriptor: font.fontDescriptor.withSymbolicTraits([.italic]), size: font.pointSize) ?? font
+            }
+        }
+        let dim: [NSAttributedString.Key: Any] = [.foregroundColor: NSColor.tertiaryLabelColor]
+        storage.beginEditing()
+        storage.setAttributes([.font: base, .foregroundColor: NSColor.labelColor], range: full)
+        text.enumerateSubstrings(in: full, options: [.byLines, .substringNotRequired]) { _, range, _, _ in
+            let line = text.substring(with: range)
+            if let hashes = line.prefix(while: { $0 == "#" }) as Substring?, (1...3).contains(hashes.count), line.dropFirst(hashes.count).hasPrefix(" ") {
+                let size: CGFloat = [1: base.pointSize + 11, 2: base.pointSize + 6, 3: base.pointSize + 3][hashes.count]!
+                storage.addAttribute(.font, value: traits(NSFont.systemFont(ofSize: size), .bold), range: range)
+                storage.addAttributes(dim, range: NSRange(location: range.location, length: hashes.count + 1))
+            }
+            else if line.hasPrefix("- [x] ") || line.hasPrefix("- [X] ") {
+                storage.addAttributes(dim, range: NSRange(location: range.location, length: 6))
+                storage.addAttributes([.strikethroughStyle: NSUnderlineStyle.single.rawValue, .foregroundColor: NSColor.secondaryLabelColor], range: NSRange(location: range.location + 6, length: range.length - 6))
+            }
+            else if line.hasPrefix("- [ ] ") { storage.addAttributes([.foregroundColor: NSColor.controlAccentColor], range: NSRange(location: range.location, length: 5)) }
+            else if line.hasPrefix("> ") {
+                storage.addAttributes(dim, range: NSRange(location: range.location, length: 2))
+                storage.addAttribute(.foregroundColor, value: NSColor.secondaryLabelColor, range: NSRange(location: range.location + 2, length: range.length - 2))
+            }
+            else if line.hasPrefix("- ") || line.hasPrefix("* ") { storage.addAttributes([.foregroundColor: NSColor.secondaryLabelColor], range: NSRange(location: range.location, length: 2)) }
+        }
+        func inline(_ pattern: String, _ apply: (NSRange, NSRange) -> Void) {
+            guard let expression = try? NSRegularExpression(pattern: pattern) else { return }
+            for match in expression.matches(in: string, range: full) where match.numberOfRanges > 1 { apply(match.range, match.range(at: 1)) }
+        }
+        inline("\\*\\*(?!\\s)(.+?)(?<!\\s)\\*\\*") { whole, inner in
+            storage.enumerateAttribute(.font, in: inner) { value, range, _ in storage.addAttribute(.font, value: traits(value as? NSFont ?? base, .bold), range: range) }
+            storage.addAttributes(dim, range: NSRange(location: whole.location, length: 2)); storage.addAttributes(dim, range: NSRange(location: whole.location + whole.length - 2, length: 2))
+        }
+        inline("(?<![\\*\\w])\\*(?![\\*\\s])(.+?)(?<![\\*\\s])\\*(?![\\*\\w])") { whole, inner in
+            storage.enumerateAttribute(.font, in: inner) { value, range, _ in storage.addAttribute(.font, value: traits(value as? NSFont ?? base, .italic), range: range) }
+            storage.addAttributes(dim, range: NSRange(location: whole.location, length: 1)); storage.addAttributes(dim, range: NSRange(location: whole.location + whole.length - 1, length: 1))
+        }
+        inline("`([^`\\n]+)`") { whole, inner in
+            storage.addAttributes([.font: NSFont.monospacedSystemFont(ofSize: base.pointSize - 1, weight: .regular), .backgroundColor: NSColor.quaternaryLabelColor], range: inner)
+            storage.addAttributes(dim, range: NSRange(location: whole.location, length: 1)); storage.addAttributes(dim, range: NSRange(location: whole.location + whole.length - 1, length: 1))
+        }
+        storage.endEditing()
+        typingAttributes = [.font: base, .foregroundColor: NSColor.labelColor]
+    }
     override func draw(_ dirtyRect: NSRect) {
         super.draw(dirtyRect)
+        if !ghost.isEmpty, selectedRange().length == 0, let window {
+            let screen = firstRect(forCharacterRange: NSRange(location: selectedRange().location, length: 0), actualRange: nil)
+            let point = convert(window.convertFromScreen(screen), from: nil)
+            let left = textContainerInset.width + (textContainer?.lineFragmentPadding ?? 5)
+            (ghost as NSString).draw(with: CGRect(x: point.minX, y: point.minY, width: max(20, bounds.width - point.minX - left), height: 100_000), options: [.usesLineFragmentOrigin],
+                attributes: [.font: font ?? NSFont.systemFont(ofSize: 13), .foregroundColor: NSColor.tertiaryLabelColor])
+        }
         if string.isEmpty && !placeholder.isEmpty {
             (placeholder as NSString).draw(at: CGPoint(x: textContainerInset.width + (textContainer?.lineFragmentPadding ?? 5), y: textContainerInset.height),
                 withAttributes: [.font: font ?? NSFont.systemFont(ofSize: 13), .foregroundColor: NSColor.placeholderTextColor])
@@ -165,7 +252,7 @@ final class CraftMacTextView: NSTextView {
     }
 }
 
-final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate {
+final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate, NSDraggingSource {
     let id: String
     let kind: String
     weak var renderer: CraftMacRenderer?
@@ -178,6 +265,17 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate {
     var modal: NSPanel?
     var material: NSVisualEffectView?
     var edgeBorders: [String: CALayer] = [:]
+    var lastSelection = ""
+    /// The pointer is over the box, or pressing it: `hoverStyle` and `pressStyle` apply on top of `style`.
+    var hovering = false, pressing = false
+    var hoverArea: NSTrackingArea?
+    var gradient: CAGradientLayer?
+    var configuredOnce = false
+    /// Drag and drop: where a press started (a drag begins 3pt away), and the last position reported to a drop target.
+    static let dragType = NSPasteboard.PasteboardType("org.craft-native.drag")
+    var downPoint: NSPoint?
+    var lastDropPosition = ""
+    var acceptsDrops = false
     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 }
@@ -218,6 +316,9 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate {
             let content = CraftMacFlow(); content.style = ["flexDirection": "column"]
             scroll.documentView = content; flow = content; control = scroll
         case "Sidebar": control = CraftMacSidebar(box: self)
+        #if CRAFT_WEBKIT
+        case "WebView": control = CraftMacWebHost(box: self)
+        #endif
         case "View", "SafeAreaView", "Pressable", "TouchableOpacity", "TouchableHighlight", "KeyboardAvoidingView", "Modal", "SplitView":
             let container = CraftMacFlow(); flow = container; control = container
         default:
@@ -234,10 +335,6 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate {
         style = node["style"] as? [String: Any] ?? [:]
         events = node["events"] as? [String: String] ?? [:]
         isHidden = style["display"] as? String == "none" || props["hidden"] as? Bool == true
-        NSApp.effectiveAppearance.performAsCurrentDrawingAppearance {
-            layer?.backgroundColor = CraftMacColor.parse(style["backgroundColor"], fallback: .clear).cgColor
-            layer?.borderColor = CraftMacColor.parse(style["borderColor"], fallback: .separatorColor).cgColor
-        }
         layer?.cornerRadius = number(style["borderRadius"]) ?? 0
         layer?.borderWidth = number(style["borderWidth"]) ?? 0
         // AppKit views may draw their entire visibleRect, which can extend
@@ -246,6 +343,22 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate {
         clipsToBounds = style["overflow"] as? String != "visible"
         if let container = control as? CraftMacFlow { container.clipsToBounds = clipsToBounds }
         layer?.masksToBounds = clipsToBounds || (number(style["borderRadius"]) ?? 0) > 0
+        // `shadow-*` classes: a box with a shadow cannot clip its own layer, or the shadow is cut off.
+        if let opacity = number(style["shadowOpacity"]), opacity > 0 {
+            let offset = style["shadowOffset"] as? [String: Any] ?? [:]
+            // The shadow needs the box's own layer unclipped, so a rounded box that also clips
+            // (`rounded-xl overflow-hidden shadow-lg`, a card holding a web page) clips one level in.
+            let clipsContent = style["overflow"] as? String != "visible" && (number(style["borderRadius"]) ?? 0) > 0
+            layer?.masksToBounds = false; clipsToBounds = false
+            if let inner = control, clipsContent {
+                inner.wantsLayer = true; inner.layer?.masksToBounds = true; inner.layer?.cornerCurve = .continuous
+                inner.layer?.cornerRadius = number(style["borderRadius"]) ?? 0
+            }
+            layer?.shadowOpacity = Float(opacity); layer?.shadowRadius = number(style["shadowRadius"]) ?? 3
+            layer?.shadowOffset = CGSize(width: number(offset["width"]) ?? 0, height: -(number(offset["height"]) ?? 1))
+            layer?.shadowColor = CraftMacColor.parse(style["shadowColor"], fallback: .black).cgColor
+        } else { layer?.shadowOpacity = 0; layer?.shadowPath = nil; control?.layer?.cornerRadius = 0 }
+        layer?.cornerCurve = .continuous
         for edge in ["Top", "Right", "Bottom", "Left"] {
             let border = edgeBorders[edge] ?? CALayer()
             if edgeBorders[edge] == nil { edgeBorders[edge] = border; layer?.addSublayer(border) }
@@ -256,7 +369,6 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate {
             if material == nil { let effect = NSVisualEffectView(); effect.blendingMode = .behindWindow; effect.state = .followsWindowActiveState; addSubview(effect, positioned: .below, relativeTo: control); material = effect }
             material?.material = name == "sidebar" ? .sidebar : .headerView
         } else { material?.removeFromSuperview(); material = nil }
-        alphaValue = number(style["opacity"]) ?? 1
         let identifier = props["testID"] as? String ?? props["testId"] as? String ?? props["accessibilityIdentifier"] as? String ?? id
         control?.setAccessibilityIdentifier(identifier)
         let label = props["accessibilityLabel"] as? String ?? props["aria-label"] as? String ?? props["title"] as? String
@@ -269,6 +381,10 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate {
         if let text = control as? NSTextField, kind == "Text" {
             text.stringValue = props["text"] as? String ?? nativeText(node)
             text.font = font; text.textColor = CraftMacColor.parse(style["color"])
+            if let line = style["textDecorationLine"] as? String, line == "line-through" || line == "underline" {
+                let attributed = NSMutableAttributedString(string: text.stringValue, attributes: [.font: font, .foregroundColor: CraftMacColor.parse(style["color"]), line == "underline" ? .underlineStyle : .strikethroughStyle: NSUnderlineStyle.single.rawValue])
+                text.attributedStringValue = attributed
+            }
             text.alignment = style["textAlign"] as? String == "center" ? .center : style["textAlign"] as? String == "right" ? .right : .left
             text.maximumNumberOfLines = (props["numberOfLines"] as? NSNumber)?.intValue ?? 0
             text.lineBreakMode = text.maximumNumberOfLines == 1 ? .byTruncatingTail : .byWordWrapping
@@ -312,6 +428,17 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate {
             }
         }
         if let sidebar = control as? CraftMacSidebar { sidebar.configure(props) }
+        let dropTarget = events["onDrop"] != nil || events["onDragOver"] != nil
+        if dropTarget != acceptsDrops {
+            acceptsDrops = dropTarget
+            if dropTarget { registerForDraggedTypes([Self.dragType, .URL, .fileURL]) } else { unregisterDraggedTypes() }
+        }
+        updateTrackingAreas()
+        applyAppearance(animated: configuredOnce)
+        configuredOnce = true
+        #if CRAFT_WEBKIT
+        if let web = control as? CraftMacWebHost { web.show(props["tab"] as? String) }
+        #endif
         flow?.style = style
         needsLayout = true
     }
@@ -344,8 +471,20 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate {
                 text.drawsBackground = bordered
             }
             if text.string != value { text.string = value }
-            text.isEditable = props["disabled"] as? Bool != true; text.font = font
-            if let editor = text as? CraftMacTextView { editor.placeholder = props["placeholder"] as? String ?? ""; editor.needsDisplay = true }
+            // `selection` ({ start, end }) moves the caret, e.g. after a formatting action changed the text.
+            if let want = props["selection"] as? [String: Any], let start = number(want["start"]), let end = number(want["end"]) {
+                let length = (text.string as NSString).length
+                let range = NSRange(location: min(Int(start), length), length: max(0, min(Int(end), length) - min(Int(start), length)))
+                if text.selectedRange() != range { lastSelection = "\(range.location):\(range.length)"; text.setSelectedRange(range) }
+            }
+            text.isEditable = props["disabled"] as? Bool != true
+            // Assigning `font` restyles the whole text, so a markdown editor only does it when the base font changes.
+            if let editor = text as? CraftMacTextView, props["markdown"] as? Bool == true {
+                if editor.baseFont != font { editor.baseFont = font; editor.font = font; editor.lastStyled = "\u{0}" }
+            } else { (text as? CraftMacTextView)?.baseFont = nil; text.font = font }
+            if let editor = text as? CraftMacTextView { let markdown = props["markdown"] as? Bool == true
+                if editor.markdown != markdown || (markdown && editor.string != editor.lastStyled) { editor.markdown = markdown; editor.restyle(); editor.lastStyled = editor.string }
+                editor.placeholder = props["placeholder"] as? String ?? ""; editor.ghost = props["ghostText"] as? String ?? ""; editor.needsDisplay = true }
             text.setAccessibilityIdentifier(props["testID"] as? String ?? props["testId"] as? String ?? id)
             text.setAccessibilityLabel(props["placeholder"] as? String ?? "Message")
         } else if let field = control as? NSTextField {
@@ -372,6 +511,167 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate {
         }; imageTask?.resume()
     }
 
+    /// `style` with the pointer's layers on top: `hoverStyle` while hovered, `pressStyle` while pressed.
+    var appearanceStyle: [String: Any] {
+        var look = style
+        if hovering, let hover = style["hoverStyle"] as? [String: Any] { hover.forEach { look[$0.key] = $0.value } }
+        if pressing, let press = style["pressStyle"] as? [String: Any] { press.forEach { look[$0.key] = $0.value } }
+        return look
+    }
+
+    /// Background, border, opacity, gradient and text colour, eased over `transitionDuration` (ms) when it changes.
+    func applyAppearance(animated: Bool) {
+        let look = appearanceStyle
+        let duration = animated && !NSWorkspace.shared.accessibilityDisplayShouldReduceMotion ? (number(style["transitionDuration"]) ?? 0) / 1000 : 0
+        NSApp.effectiveAppearance.performAsCurrentDrawingAppearance {
+            ease("backgroundColor", to: CraftMacColor.parse(look["backgroundColor"], fallback: .clear).cgColor, duration)
+            ease("borderColor", to: CraftMacColor.parse(look["borderColor"], fallback: .separatorColor).cgColor, duration)
+            applyGradient(look, duration)
+            if kind == "Text", let text = control as? NSTextField, style["hoverStyle"] != nil || style["pressStyle"] != nil {
+                text.textColor = CraftMacColor.parse(look["color"])
+            }
+        }
+        let opacity = number(look["opacity"]) ?? 1
+        if duration > 0, abs(alphaValue - opacity) > 0.001 {
+            NSAnimationContext.runAnimationGroup { context in context.duration = duration; animator().alphaValue = opacity }
+        } else { alphaValue = opacity }
+    }
+
+    private func ease(_ key: String, to value: CGColor, _ duration: CFTimeInterval) {
+        guard let layer else { return }
+        if duration > 0, let from = (layer.presentation() ?? layer).value(forKey: key) {
+            let animation = CABasicAnimation(keyPath: key)
+            animation.fromValue = from; animation.toValue = value; animation.duration = duration
+            animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
+            layer.add(animation, forKey: key)
+        }
+        layer.setValue(value, forKey: key)
+    }
+
+    /// `bg-gradient-to-*` with `from-`, `via-` and `to-` colours, under the box's content as on the phone hosts.
+    private func applyGradient(_ look: [String: Any], _ duration: CFTimeInterval) {
+        guard let direction = look["gradientDirection"] as? String, look["gradientFrom"] != nil, look["gradientTo"] != nil else {
+            gradient?.removeFromSuperlayer(); gradient = nil; return
+        }
+        let layer = gradient ?? CAGradientLayer()
+        if gradient == nil { self.layer?.insertSublayer(layer, at: 0); gradient = layer; layer.frame = bounds }
+        let colors = [look["gradientFrom"], look["gradientVia"], look["gradientTo"]].compactMap { $0 }.map { CraftMacColor.parse($0, fallback: .clear).cgColor }
+        if duration > 0, let from = (layer.presentation() ?? layer).colors {
+            let animation = CABasicAnimation(keyPath: "colors")
+            animation.fromValue = from; animation.toValue = colors; animation.duration = duration
+            layer.add(animation, forKey: "colors")
+        }
+        layer.colors = colors
+        // The box is flipped (y grows downward), as UIKit is, so the phone hosts' points carry over.
+        let points: (CGPoint, CGPoint)
+        switch direction {
+        case "to-t": points = (CGPoint(x: 0.5, y: 1), CGPoint(x: 0.5, y: 0))
+        case "to-tr": points = (CGPoint(x: 0, y: 1), CGPoint(x: 1, y: 0))
+        case "to-r": points = (CGPoint(x: 0, y: 0.5), CGPoint(x: 1, y: 0.5))
+        case "to-br": points = (CGPoint(x: 0, y: 0), CGPoint(x: 1, y: 1))
+        case "to-bl": points = (CGPoint(x: 1, y: 0), CGPoint(x: 0, y: 1))
+        case "to-l": points = (CGPoint(x: 1, y: 0.5), CGPoint(x: 0, y: 0.5))
+        case "to-tl": points = (CGPoint(x: 1, y: 1), CGPoint(x: 0, y: 0))
+        default: points = (CGPoint(x: 0.5, y: 0), CGPoint(x: 0.5, y: 1))
+        }
+        layer.startPoint = points.0; layer.endPoint = points.1
+    }
+
+    override func updateTrackingAreas() {
+        super.updateTrackingAreas()
+        let wanted = style["hoverStyle"] is [String: Any] || style["pressStyle"] is [String: Any] || events["onHoverChange"] != nil
+        if !wanted, let area = hoverArea { removeTrackingArea(area); hoverArea = nil; hovering = false; pressing = false }
+        if wanted, hoverArea == nil {
+            let area = NSTrackingArea(rect: .zero, options: [.mouseEnteredAndExited, .activeInActiveApp, .inVisibleRect], owner: self)
+            addTrackingArea(area); hoverArea = area
+        }
+    }
+    override func mouseEntered(with event: NSEvent) {
+        guard hoverArea != nil, !hovering else { return }
+        hovering = true; applyAppearance(animated: true)
+        fire("onHoverChange", ["hovered": true])
+    }
+    override func mouseExited(with event: NSEvent) {
+        guard hovering || pressing else { return }
+        let was = hovering
+        hovering = false; pressing = false; applyAppearance(animated: true)
+        if was { fire("onHoverChange", ["hovered": false]) }
+    }
+
+    // MARK: drag and drop
+    // A `draggable` box starts a drag 3pt from where it was pressed, carrying `dragData` (and `dragURL`
+    // for other apps). A box with `onDrop`/`onDragOver` hears drags pass over it as `before`/`after`
+    // (or `inside`, with `dropInside`), with the data, links or files they carry.
+
+    override func mouseDragged(with event: NSEvent) {
+        guard props["draggable"] as? Bool == true, let start = downPoint,
+              hypot(event.locationInWindow.x - start.x, event.locationInWindow.y - start.y) > 3 else { super.mouseDragged(with: event); return }
+        downPoint = nil
+        if pressing { pressing = false; applyAppearance(animated: false) }
+        let item = NSPasteboardItem()
+        let data = props["dragData"] ?? NSNull()
+        if let encoded = try? JSONSerialization.data(withJSONObject: ["data": data], options: [.fragmentsAllowed]) { item.setData(encoded, forType: Self.dragType) }
+        if let url = props["dragURL"] as? String, !url.isEmpty { item.setString(url, forType: .URL); item.setString(url, forType: .string) }
+        let dragging = NSDraggingItem(pasteboardWriter: item)
+        dragging.setDraggingFrame(bounds, contents: snapshot())
+        beginDraggingSession(with: [dragging], event: event, source: self)
+        fire("onDragStart", ["data": data])
+    }
+
+    private func snapshot() -> NSImage {
+        guard bounds.width > 0, bounds.height > 0, let rep = bitmapImageRepForCachingDisplay(in: bounds) else { return NSImage() }
+        cacheDisplay(in: bounds, to: rep)
+        let image = NSImage(size: bounds.size); image.addRepresentation(rep)
+        return image
+    }
+
+    func draggingSession(_ session: NSDraggingSession, sourceOperationMaskFor context: NSDraggingContext) -> NSDragOperation {
+        context == .withinApplication ? .move : .copy
+    }
+    func draggingSession(_ session: NSDraggingSession, endedAt screenPoint: NSPoint, operation: NSDragOperation) {
+        fire("onDragEnd", ["dropped": operation != []])
+    }
+
+    override func draggingEntered(_ sender: NSDraggingInfo) -> NSDragOperation { dragMoved(sender) }
+    override func draggingUpdated(_ sender: NSDraggingInfo) -> NSDragOperation { dragMoved(sender) }
+    override func draggingExited(_ sender: NSDraggingInfo?) { lastDropPosition = ""; fire("onDragLeave") }
+    override func performDragOperation(_ sender: NSDraggingInfo) -> Bool {
+        let position = dropPosition(at: convert(sender.draggingLocation, from: nil))
+        lastDropPosition = ""
+        fire("onDrop", dropPayload(sender.draggingPasteboard, position: position))
+        return true
+    }
+
+    /// Reported once per change of position, not on every pointer move.
+    private func dragMoved(_ sender: NSDraggingInfo) -> NSDragOperation {
+        let position = dropPosition(at: convert(sender.draggingLocation, from: nil))
+        if position != lastDropPosition { lastDropPosition = position; fire("onDragOver", dropPayload(sender.draggingPasteboard, position: position)) }
+        return sender.draggingPasteboard.types?.contains(Self.dragType) == true ? .move : .copy
+    }
+
+    /// The box is flipped, so y runs down: the top half is `before`; with `dropInside`, the middle half is `inside`.
+    func dropPosition(at point: NSPoint) -> String {
+        let fraction = bounds.height > 0 ? point.y / bounds.height : 0.5
+        if props["dropInside"] as? Bool == true { return fraction < 0.25 ? "before" : fraction > 0.75 ? "after" : "inside" }
+        return fraction < 0.5 ? "before" : "after"
+    }
+
+    func dropPayload(_ board: NSPasteboard, position: String) -> [String: Any] {
+        var payload: [String: Any] = ["position": position]
+        if let raw = board.data(forType: Self.dragType), let object = try? JSONSerialization.jsonObject(with: raw, options: [.fragmentsAllowed]) as? [String: Any] {
+            payload["data"] = object["data"] ?? NSNull(); payload["internal"] = true
+        }
+        let urls = board.readObjects(forClasses: [NSURL.self], options: nil) as? [URL] ?? []
+        let files = urls.filter(\.isFileURL).map(\.path), links = urls.filter { !$0.isFileURL }.map(\.absoluteString)
+        if !files.isEmpty { payload["files"] = files }
+        if !links.isEmpty { payload["urls"] = links }
+        return payload
+    }
+    override func mouseUp(with event: NSEvent) {
+        if pressing { pressing = false; applyAppearance(animated: true) }
+        super.mouseUp(with: event)
+    }
+
     var textPadding: NSEdgeInsets {
         let all = number(style["padding"]) ?? 0
         let horizontal = number(style["paddingHorizontal"]) ?? all
@@ -386,11 +686,12 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate {
         var size = CGSize(width: limit, height: 0)
         if let text = control as? NSTextField, kind == "Text" {
             let rect = (text.stringValue as NSString).boundingRect(with: CGSize(width: max(1, limit - 6 - textPadding.left - textPadding.right), height: 1_000_000), options: [.usesLineFragmentOrigin, .usesFontLeading], attributes: [.font: text.font ?? NSFont.systemFont(ofSize: 13)])
-            size = CGSize(width: min(limit, ceil(rect.width) + 6 + textPadding.left + textPadding.right), height: max(18, ceil(rect.height) + 2))
+            size = CGSize(width: min(limit, ceil(rect.width) + 9 + textPadding.left + textPadding.right), height: max(18, ceil(rect.height) + 2))
             if text.maximumNumberOfLines > 0 { size.height = min(size.height, ceil((text.font?.ascender ?? 13) - (text.font?.descender ?? -3) + (text.font?.leading ?? 0)) * CGFloat(text.maximumNumberOfLines) + 2) }
             if text.maximumNumberOfLines == 1 { size.height = max(18, (text.font?.pointSize ?? 13) + 5) }
             size.height += textPadding.top + textPadding.bottom
         } else if kind == "ScrollView" || kind == "FlatList" || kind == "Sidebar" { size = CGSize(width: limit, height: 100) }
+        else if kind == "WebView" { size = CGSize(width: limit, height: 300) }
         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) }
@@ -419,6 +720,13 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate {
             control?.frame = CGRect(x: padding.left, y: padding.top, width: max(0, bounds.width - padding.left - padding.right), height: max(0, bounds.height - padding.top - padding.bottom))
         } else { control?.frame = bounds }
         material?.frame = bounds
+        gradient?.frame = bounds
+        gradient?.cornerRadius = layer?.cornerRadius ?? 0
+        // An explicit path spares Core Animation an offscreen pass to find the shadow's shape, every frame.
+        if let layer, layer.shadowOpacity > 0 {
+            layer.shadowPath = CGPath(roundedRect: bounds, cornerWidth: layer.cornerRadius, cornerHeight: layer.cornerRadius, transform: nil)
+            if let inner = control?.layer, inner.masksToBounds { inner.cornerRadius = layer.cornerRadius }
+        }
         for (edge, border) in edgeBorders {
             let thickness = number(style["border\(edge)Width"]) ?? 0
             switch edge {
@@ -447,18 +755,56 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate {
     }
     func controlTextDidChange(_ notification: Notification) { if let field = notification.object as? NSTextField { input(field.stringValue) } }
     func textDidChange(_ notification: Notification) { if let text = notification.object as? NSTextView { input(text.string) } }
+    /// The caret and selection, as UTF-16 offsets (JavaScript string indices): `onSelectionChange`.
+    func textViewDidChangeSelection(_ notification: Notification) {
+        guard let text = notification.object as? NSTextView, events["onSelectionChange"] != nil else { return }
+        let range = text.selectedRange()
+        let key = "\(range.location):\(range.length)"
+        guard key != lastSelection else { return }
+        lastSelection = key
+        fire("onSelectionChange", ["start": range.location, "end": range.location + range.length, "selection": ["start": range.location, "end": range.location + range.length], "nativeEvent": ["selection": ["start": range.location, "end": range.location + range.length]]])
+    }
     func input(_ value: String) { fire("onChangeText", ["text": value, "value": value, "nativeEvent": ["text": value, "value": value]]) }
     func textView(_ textView: NSTextView, doCommandBy commandSelector: Selector) -> Bool {
+        if commandSelector == #selector(NSResponder.cancelOperation(_:)), (textView as? CraftMacTextView)?.ghost.isEmpty ?? true {
+            // Escape in an editor is the screen's too (it closes the open to-do), unless a completion is showing.
+            renderer?.runtime.send("CRAFT_EVENT", ["event": "craftDesktopCommand", "detail": ["id": "escape"]]); return true
+        }
+        if commandSelector == #selector(NSResponder.insertTab(_:)), let editor = textView as? CraftMacTextView, !editor.ghost.isEmpty, events["onAcceptCompletion"] != nil {
+            let accepted = editor.ghost; editor.ghost = ""; fire("onAcceptCompletion", ["text": accepted, "value": accepted]); return true
+        }
         if commandSelector == #selector(NSResponder.insertNewline(_:)), !NSEvent.modifierFlags.contains(.shift), events["onSubmitEditing"] != nil { fire("onSubmitEditing", ["text": textView.string]); return true }
         return false
     }
-    override func mouseDown(with event: NSEvent) { if events["onPress"] != nil { fire("onPress") } else { super.mouseDown(with: event) } }
+    /// Single-line fields: Return submits, and leaving the field blurs it, as on the web.
+    func control(_ control: NSControl, textView: NSTextView, doCommandBy commandSelector: Selector) -> Bool {
+        if commandSelector == #selector(NSResponder.cancelOperation(_:)) {
+            renderer?.runtime.send("CRAFT_EVENT", ["event": "craftDesktopCommand", "detail": ["id": "escape"]]); return true
+        }
+        if commandSelector == #selector(NSResponder.insertNewline(_:)), events["onSubmitEditing"] != nil { fire("onSubmitEditing", ["text": textView.string, "value": textView.string, "nativeEvent": ["text": textView.string]]); return true }
+        return false
+    }
+    func controlTextDidEndEditing(_ notification: Notification) {
+        guard let field = notification.object as? NSTextField else { return }
+        fire("onEndEditing", ["text": field.stringValue, "value": field.stringValue]); fire("onBlur", ["text": field.stringValue, "value": field.stringValue])
+    }
+    func textDidEndEditing(_ notification: Notification) {
+        guard let text = notification.object as? NSTextView else { return }
+        fire("onEndEditing", ["text": text.string, "value": text.string]); fire("onBlur", ["text": text.string, "value": text.string])
+    }
+    override func mouseDown(with event: NSEvent) {
+        downPoint = event.locationInWindow
+        if style["pressStyle"] is [String: Any] { pressing = true; applyAppearance(animated: false) }
+        if events["onPress"] != nil { fire("onPress") } else { super.mouseDown(with: event) }
+    }
     override func rightMouseDown(with event: NSEvent) { fire("onLongPress", ["x": event.locationInWindow.x, "y": event.locationInWindow.y]) }
     override func hitTest(_ point: NSPoint) -> NSView? {
         guard !isHidden, bounds.contains(convert(point, from: superview)) else { return nil }
         // Rows handle the whole click. Transcript text keeps AppKit selection,
         // while a right click is routed to the STX conversation/message menu.
         if kind == "Pressable", events["onPress"] != nil || (events["onLongPress"] != nil && NSApp.currentEvent?.type == .rightMouseDown) { return self }
+        // A draggable row takes the whole press, or its label would start a text selection instead of a drag.
+        if props["draggable"] as? Bool == true, NSApp.currentEvent?.type == .leftMouseDown { return self }
         return super.hitTest(point)
     }
 }
@@ -481,6 +827,9 @@ final class CraftMacSidebar: NSScrollView, NSOutlineViewDataSource, NSOutlineVie
     let outline = NSOutlineView()
     var sections: [Item] = []
     var fingerprint = ""
+    /// `rowHeight` and `labelFontSize` props: a Things-like sidebar is 24 points tall at 15.
+    var rowHeight: CGFloat = 32
+    var labelSize: CGFloat = 13
     init(box: CraftMacBox) {
         self.box = box; super.init(frame: .zero)
         hasVerticalScroller = true; drawsBackground = false
@@ -493,7 +842,11 @@ final class CraftMacSidebar: NSScrollView, NSOutlineViewDataSource, NSOutlineVie
     func configure(_ props: [String: Any]) {
         let raw = props["sections"] as? [[String: Any]] ?? []
         let data = (try? JSONSerialization.data(withJSONObject: raw, options: .sortedKeys)) ?? Data()
-        let next = String(decoding: data, as: UTF8.self)
+        // Written as attributes (`rowHeight="24"`) they arrive as text.
+        func size(_ key: String) -> CGFloat? { number(props[key]) ?? (props[key] as? String).flatMap(Double.init).map { CGFloat($0) } }
+        rowHeight = size("rowHeight") ?? 32
+        labelSize = size("labelFontSize") ?? 13
+        let next = String(decoding: data, as: UTF8.self) + "|\(rowHeight)|\(labelSize)"
         if next != fingerprint { fingerprint = next; sections = raw.map(Item.init); outline.reloadData(); outline.expandItem(nil, expandChildren: true) }
         if let selected = props["selected"] as? String { for index in 0..<outline.numberOfRows { if (outline.item(atRow: index) as? Item)?.id == selected { outline.selectRowIndexes(IndexSet(integer: index), byExtendingSelection: false); break } } }
     }
@@ -505,7 +858,7 @@ final class CraftMacSidebar: NSScrollView, NSOutlineViewDataSource, NSOutlineVie
     func outlineView(_ outlineView: NSOutlineView, shouldShowOutlineCellForItem item: Any) -> Bool { false }
     func outlineView(_ outlineView: NSOutlineView, heightOfRowByItem item: Any) -> CGFloat {
         let item = item as! Item
-        return item.children.isEmpty ? 32 : item.label.isEmpty ? 12 : 28
+        return item.children.isEmpty ? rowHeight : item.label.isEmpty ? 12 : max(24, rowHeight - 4)
     }
     func outlineView(_ outlineView: NSOutlineView, rowViewForItem item: Any) -> NSTableRowView? {
         let row = CraftMacSidebarRow(); row.isEmphasized = false; return row
@@ -513,13 +866,13 @@ final class CraftMacSidebar: NSScrollView, NSOutlineViewDataSource, NSOutlineVie
     func outlineView(_ outlineView: NSOutlineView, viewFor tableColumn: NSTableColumn?, item: Any) -> NSView? {
         let item = item as! Item
         let cell = NSTableCellView(); let label = NSTextField(labelWithString: item.label)
-        label.font = NSFont.systemFont(ofSize: 13); label.lineBreakMode = .byTruncatingTail; cell.textField = label; cell.addSubview(label)
+        label.font = NSFont.systemFont(ofSize: labelSize); label.lineBreakMode = .byTruncatingTail; cell.textField = label; cell.addSubview(label)
         if !item.children.isEmpty { label.font = NSFont.systemFont(ofSize: 11, weight: .semibold); label.textColor = .secondaryLabelColor }
         label.translatesAutoresizingMaskIntoConstraints = false
         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: 8, width: 16, height: 16); cell.imageView = image; cell.addSubview(image) }
+        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) }
         cell.setAccessibilityIdentifier(item.id); cell.setAccessibilityLabel(item.label)
         return cell
     }
@@ -581,6 +934,11 @@ final class CraftMacRenderer {
                 modal.removeFromSuperview(); panel.contentView = modal; sheets[modal.id] = panel
                 window.beginSheet(panel)
             }
+            if let panel = sheets[modal.id] {
+                // A sheet follows its content: rows loaded after it opened grow it, up to the screen's comfort.
+                let wanted = min(650, max(200, modal.measure(width: 480).height))
+                if abs(panel.contentRect(forFrameRect: panel.frame).height - wanted) > 1 { panel.setContentSize(CGSize(width: 480, height: wanted)) }
+            }
             modal.frame = sheets[modal.id]!.contentView!.bounds; modal.needsLayout = true; modal.layoutSubtreeIfNeeded()
         }
         for (box, origin, bottom) in scrolls {