craft-native 0.0.408 → 0.0.410

package/dist/cli.js

@@ -3047,7 +3047,7 @@ function pinCraftNativeDependency(packagePath, craftVersion) {
 `);
 }
 // package.json
-var version = "0.0.408";
+var version = "0.0.410";
 
 // bin/cli.ts
 var spawnedFrom = process6.env[CRAFT_CLI_SPAWN_MARKER];

package/dist/index.cjs

@@ -375,7 +375,7 @@ function craftBinaryNotFoundMessage(triedPath) {
 `);
 }
 // package.json
-var version = "0.0.408";
+var version = "0.0.410";
 
 // src/sdk-version.ts
 var SDK_VERSION = version;

package/dist/index.js

@@ -117,7 +117,7 @@ function craftBinaryNotFoundMessage(triedPath) {
 `);
 }
 // package.json
-var version = "0.0.408";
+var version = "0.0.410";
 
 // src/sdk-version.ts
 var SDK_VERSION = version;

package/dist/macos/src/engine.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Screens run on zig-js, and only on zig-js. zig-js exports JavaScriptCore's C
+ * API under the same names, and a host built with `webkit` sits one framework
+ * away from Apple's JavaScriptCore. So a `JS*` function zig-js does not define,
+ * or a Swift import that autolinks JavaScriptCore, would quietly bind part of
+ * the screen's engine to the system one, and fail far from the cause (a value
+ * from one engine handed to the other). The build checks the linked host.
+ */
+/** What in a host's imports would run on the system's JavaScriptCore; empty when everything is zig-js. */
+export declare function systemEngineUse(undefinedSymbols: string[], linkedLibraries: string[]): string[];
+/** Fails when the linked host would run any script on the system's JavaScriptCore. */
+export declare function assertZigJsEngine(executable: string): Promise<void>;

package/dist/macos/src/index.d.ts

@@ -1,3 +1,4 @@
+export { assertZigJsEngine, systemEngineUse } from './engine.js';
 export { macosToolchain, pantryExecutable, resolveMacOSToolchain, resolveZig, toolchainCacheDir } from './toolchain.js';
 export type { MacOSToolchain } from './toolchain.js';
 export interface MacOSNativeBuildOptions {

package/dist/macos/src/index.js

@@ -5,6 +5,36 @@ import { existsSync as existsSync2 } from "fs";
 import { join as join2, resolve } from "path";
 import process2 from "process";
 
+// ../macos/src/engine.ts
+var SYSTEM_ENGINE_SYMBOL = /^_(?:kJS[A-Z]|JS(?:Value|Object|String|BigInt|Context|GlobalContext|Class|PropertyName|EvaluateScript|CheckScriptSyntax|GarbageCollect|Script|Weak|ReportExtraMemoryCost|Synchronous)|OBJC_CLASS_\$_JS(?:Context|Value|ManagedValue|VirtualMachine)$)/;
+function systemEngineUse(undefinedSymbols, linkedLibraries) {
+  return [
+    ...linkedLibraries.filter((library) => library.includes("/JavaScriptCore.framework/")),
+    ...undefinedSymbols.filter((symbol) => SYSTEM_ENGINE_SYMBOL.test(symbol))
+  ];
+}
+async function lines(args) {
+  const child = Bun.spawn(args, { stdout: "pipe", stderr: "inherit" });
+  const text = await new Response(child.stdout).text();
+  if (await child.exited !== 0)
+    throw new Error(`Could not inspect the host: ${args.join(" ")}`);
+  return text.split(`
+`).map((line) => line.trim()).filter(Boolean);
+}
+async function assertZigJsEngine(executable) {
+  const [undefinedSymbols, linked] = await Promise.all([
+    lines(["xcrun", "nm", "-u", "-j", executable]),
+    lines(["xcrun", "otool", "-L", executable])
+  ]);
+  const leaks = systemEngineUse(undefinedSymbols, linked.slice(1).map((line) => line.split(" (")[0]));
+  if (leaks.length) {
+    throw new Error(`The host would run scripts on the system's JavaScriptCore instead of zig-js:
+  ${leaks.join(`
+  `)}
+Define the missing functions in zig-js, or keep JavaScriptCore out of the Swift imports.`);
+  }
+}
+
 // ../macos/src/toolchain.ts
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "fs";
 import { homedir } from "os";
@@ -157,16 +187,19 @@ async function buildMacOSNative(options) {
     "-o",
     executable
   ]);
+  await assertZigJsEngine(executable);
   const bundle = join2(outdir, "native-screen.js");
   if (resolve(options.nativeBundle) !== bundle)
     await cp(options.nativeBundle, bundle);
   return { executable, bundle };
 }
 export {
+  assertZigJsEngine,
   buildMacOSNative,
   macosToolchain,
   pantryExecutable,
   resolveMacOSToolchain,
   resolveZig,
+  systemEngineUse,
   toolchainCacheDir
 };

package/dist/macos/templates/CraftMacApplication.swift

@@ -16,12 +16,17 @@ final class CraftMacScene: NSObject, NSWindowDelegate {
     let window: NSWindow
     let runtime: CraftMacRuntime
     let renderer: CraftMacRenderer
+    /// Where the close button's top-left corner sits, from the window's top-left (`--traffic-lights 18,18`):
+    /// a browser lines the buttons up with its own toolbar row. Nil keeps AppKit's place.
+    let trafficLights: CGPoint?
     init(name: String, route: String, options: [String: Any], application: CraftMacApplication) {
         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 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)
         panel.runtime = runtime
         window = panel
@@ -39,8 +44,24 @@ final class CraftMacScene: NSObject, NSWindowDelegate {
         window.delegate = self; window.center()
         if name == "main" && application.testDirectory == nil { window.setFrameAutosaveName("\(application.appName)NativeMain") }
         window.makeKeyAndOrderFront(nil)
+        placeTrafficLights()
         runtime.load(application.bundle)
     }
+
+    /// AppKit lays the title bar out again on resize, full screen and appearance changes, so this runs after each.
+    func placeTrafficLights() {
+        guard let inset = trafficLights, let close = window.standardWindowButton(.closeButton), let titlebar = close.superview?.superview else { return }
+        let buttons: [NSWindow.ButtonType] = [.closeButton, .miniaturizeButton, .zoomButton]
+        let size = close.frame.size
+        let height = size.height + inset.y * 2
+        titlebar.frame = CGRect(x: titlebar.frame.minX, y: window.frame.height - height, width: titlebar.frame.width, height: height)
+        // The standard spacing: each button 6pt after the last.
+        for (index, type) in buttons.enumerated() {
+            window.standardWindowButton(type)?.setFrameOrigin(CGPoint(x: inset.x + CGFloat(index) * (size.width + 6), y: (height - size.height) / 2))
+        }
+    }
+    func windowDidResize(_ notification: Notification) { placeTrafficLights() }
+    func windowDidExitFullScreen(_ notification: Notification) { placeTrafficLights() }
     func windowShouldClose(_ sender: NSWindow) -> Bool {
         if name == "main" { sender.orderOut(nil); return false }
         return true
@@ -64,6 +85,7 @@ final class CraftMacApplication: NSObject, NSApplicationDelegate, UNUserNotifica
     var bundle = ""
     var initialRoute = "Main"
     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`.
@@ -121,6 +143,8 @@ final class CraftMacApplication: NSObject, NSApplicationDelegate, UNUserNotifica
         let scheme = CraftMacColor.isDark ? "dark" : "light"
         for scene in scenes.values {
             scene.runtime.context.evaluateScript("__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 {
                 for box in scene.renderer.boxes.values {
                     box.layer?.backgroundColor = CraftMacColor.parse(box.style["backgroundColor"], fallback: .clear).cgColor
@@ -158,10 +182,19 @@ final class CraftMacApplication: NSObject, NSApplicationDelegate, UNUserNotifica
         NSApp.mainMenu = bar; NSApp.windowsMenu = window
     }
     private func addMenu(_ menu: NSMenu, to bar: NSMenu) { let item = NSMenuItem(title: menu.title, action: nil, keyEquivalent: ""); item.submenu = menu; bar.addItem(item) }
+    /// Keys a shortcut names rather than types (`ctrl+tab`, `cmd+alt+right`), as AppKit's key equivalents spell them.
+    static let namedKeys: [String: String] = {
+        var keys = ["up": "\u{F700}", "down": "\u{F701}", "left": "\u{F702}", "right": "\u{F703}",
+            "tab": "\t", "return": "\r", "enter": "\r", "escape": "\u{1B}", "esc": "\u{1B}", "space": " ",
+            "backspace": "\u{08}", "delete": "\u{08}", "forwarddelete": "\u{F728}",
+            "home": "\u{F729}", "end": "\u{F72B}", "pageup": "\u{F72C}", "pagedown": "\u{F72D}", "plus": "+", "minus": "-"]
+        for number in 1...12 { keys["f\(number)"] = String(UnicodeScalar(0xF703 + number)!) }
+        return keys
+    }()
     private func menuItem(_ raw: [String: Any], target: AnyObject, action: Selector) -> NSMenuItem {
         if raw["separator"] as? Bool == true { return .separator() }
         let parts = (raw["shortcut"] as? String ?? "").lowercased().split(separator: "+").map(String.init)
-        let key = ["up": "\u{F700}", "down": "\u{F701}", "left": "\u{F702}", "right": "\u{F703}" ][parts.last ?? ""] ?? parts.last ?? ""
+        let key = Self.namedKeys[parts.last ?? ""] ?? parts.last ?? ""
         let item = NSMenuItem(title: raw["label"] as? String ?? raw["title"] as? String ?? "", action: action, keyEquivalent: key)
         item.target = target; item.representedObject = raw["id"]
         item.keyEquivalentModifierMask = []
@@ -302,6 +335,26 @@ final class CraftMacApplication: NSObject, NSApplicationDelegate, UNUserNotifica
             scene.renderer.root.layoutSubtreeIfNeeded()
             return ["ok": true]
         }
+        // A control by its testID, driven the way a person would: pressed, typed into, submitted, a key, the pointer over it.
+        if ["press", "type", "submit", "key", "hover"].contains(kind) {
+            guard let target = action["target"] as? String,
+                  let box = scene.renderer.boxes.values.first(where: { ($0.props["testID"] as? String ?? $0.props["testId"] as? String ?? $0.id) == target }) else { return ["ok": false, "error": "No control \(action["target"] ?? "")"] }
+            let text = action["text"] as? String ?? ""
+            switch kind {
+            case "press": if let button = box.control as? NSButton { button.performClick(nil) } else { box.fire("onPress") }
+            case "type":
+                if let field = box.control as? NSTextField { field.stringValue = text }
+                else if let view = (box.control as? NSScrollView)?.documentView as? NSTextView { view.string = text }
+                box.input(text)
+            case "submit": box.fire("onSubmitEditing", ["text": text, "value": text, "nativeEvent": ["text": text]])
+            case "key": box.fire("onKeyPress", ["key": action["key"] as? String ?? "", "shiftKey": action["shift"] as? Bool == true, "text": text])
+            default:
+                let hovered = action["value"] as? Bool ?? true
+                box.hovering = hovered; box.applyAppearance(animated: false)
+                box.fire("onHoverChange", ["hovered": hovered])
+            }
+            return ["ok": true]
+        }
         if kind == "screenshot" {
             guard let directory = testDirectory, let view = scene.window.contentView?.superview,
                   let bitmap = view.bitmapImageRepForCachingDisplay(in: view.bounds) else { return ["ok": false, "error": "Window cannot be rendered"] }
@@ -397,6 +450,9 @@ final class CraftMacApplication: NSObject, NSApplicationDelegate, UNUserNotifica
         application.appName = argument("--title", key: "title", fallback: "Craft")
         application.initialRoute = argument("--route", key: "route", fallback: "Main")
         application.titlebarStyle = argument("--titlebar-style", key: "titlebarStyle", fallback: "standard")
+        // `18,18` on the command line; `[18, 18]` in craft-app.json.
+        let lights = argument("--traffic-lights", key: "trafficLights").split(separator: ",").compactMap { Double($0.trimmingCharacters(in: CharacterSet(charactersIn: " []"))) }
+        if lights.count == 2 { application.trafficLights = lights }
         application.requiresSession = !CommandLine.arguments.contains("--no-session") && packaged["session"] as? Bool != false
         for (flag, key) in [("--width", "width"), ("--height", "height"), ("--min-width", "minWidth"), ("--min-height", "minHeight")] {
             if let value = Double(argument(flag, key: key)), value.isFinite, value > 0 { application.mainWindowOptions[key] = value }

package/dist/macos/templates/CraftMacRenderer.swift

@@ -276,6 +276,7 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate, NSDrag
     var downPoint: NSPoint?
     var lastDropPosition = ""
     var acceptsDrops = false
+    var wantedFocus = 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 }
@@ -366,8 +367,13 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate, NSDrag
             border.isHidden = (number(style["border\(edge)Width"]) ?? 0) <= 0
         }
         if let name = props["material"] as? String {
-            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
+            if material == nil { let effect = NSVisualEffectView(); effect.state = .followsWindowActiveState; addSubview(effect, positioned: .below, relativeTo: control); material = effect }
+            // Chrome shows the desktop through it; a floating surface (a command bar, a popover) blurs the window's own content.
+            let materials: [String: NSVisualEffectView.Material] = ["sidebar": .sidebar, "header": .headerView, "window": .windowBackground, "titlebar": .titlebar,
+                "popover": .popover, "menu": .menu, "hud": .hudWindow, "sheet": .sheet, "underPage": .underPageBackground]
+            material?.material = materials[name] ?? .headerView
+            material?.blendingMode = ["popover", "menu", "hud", "sheet"].contains(name) ? .withinWindow : .behindWindow
+            if name == "hud" { material?.state = .active }
         } else { material?.removeFromSuperview(); material = nil }
         let identifier = props["testID"] as? String ?? props["testId"] as? String ?? props["accessibilityIdentifier"] as? String ?? id
         control?.setAccessibilityIdentifier(identifier)
@@ -405,7 +411,19 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate, NSDrag
             if props["variant"] as? String == "primary" { button.bezelColor = .controlAccentColor }
             if props["variant"] as? String == "danger" { button.contentTintColor = .systemRed }
         }
-        if kind == "TextInput" { configureInput(font: font) }
+        if kind == "TextInput" {
+            configureInput(font: font)
+            // `autoFocus` takes the keyboard when it turns on (a command bar opening); `selectTextOnFocus` then selects it all.
+            let focus = props["autoFocus"] as? Bool == true
+            if focus && !wantedFocus {
+                DispatchQueue.main.async { [weak self] in
+                    guard let self, let window = self.window, let target = (self.control as? NSScrollView)?.documentView ?? self.control else { return }
+                    window.makeFirstResponder(target)
+                    if self.props["selectTextOnFocus"] as? Bool == true { (target as? NSTextField)?.currentEditor()?.selectAll(nil) ?? (target as? NSTextView)?.selectAll(nil) }
+                }
+            }
+            wantedFocus = focus
+        }
         if let picker = control as? NSPopUpButton {
             let rawOptions = props["options"] as? [[String: Any]] ?? (node["children"] as? [[String: Any]] ?? []).map { child in
                 ["value": (child["props"] as? [String: Any])?["value"] ?? nativeText(child), "label": nativeText(child)]
@@ -489,8 +507,16 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate, NSDrag
             text.setAccessibilityLabel(props["placeholder"] as? String ?? "Message")
         } else if let field = control as? NSTextField {
             if field.stringValue != value { field.stringValue = value }
-            field.placeholderString = props["placeholder"] as? String
             field.font = font; field.isEnabled = props["disabled"] as? Bool != true
+            // A field the style colours (a light address pill in a dark window) follows it, placeholder included.
+            if style["color"] != nil {
+                let color = CraftMacColor.parse(style["color"])
+                field.textColor = color
+                field.placeholderAttributedString = (props["placeholder"] as? String).map { NSAttributedString(string: $0, attributes: [.foregroundColor: color.withAlphaComponent(0.5), .font: font]) }
+            } else {
+                field.textColor = .labelColor
+                field.placeholderString = props["placeholder"] as? String
+            }
             if let bordered = props["bordered"] as? Bool { field.isBordered = bordered; field.drawsBackground = bordered }
             field.setAccessibilityIdentifier(props["testID"] as? String ?? props["testId"] as? String ?? id)
         }
@@ -720,6 +746,16 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate, NSDrag
             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
+        // A visual effect view ignores its layer's corner radius; a stretchable mask rounds it (as the tray popover does).
+        if let material {
+            let radius = layer?.cornerRadius ?? 0
+            if radius > 0, material.maskImage?.capInsets.top != radius {
+                let edge = radius * 2 + 1
+                let mask = NSImage(size: CGSize(width: edge, height: edge), flipped: false) { rect in NSBezierPath(roundedRect: rect, xRadius: radius, yRadius: radius).fill(); return true }
+                mask.capInsets = NSEdgeInsets(top: radius, left: radius, bottom: radius, right: radius); mask.resizingMode = .stretch
+                material.maskImage = mask
+            } else if radius == 0 { material.maskImage = nil }
+        }
         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.
@@ -782,6 +818,12 @@ final class CraftMacBox: NSView, NSTextFieldDelegate, NSTextViewDelegate, NSDrag
             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 }
+        // The keys a list driven from a field needs (a command bar, an address bar's suggestions), in the web's names.
+        let keys: [Selector: String] = [#selector(NSResponder.moveUp(_:)): "ArrowUp", #selector(NSResponder.moveDown(_:)): "ArrowDown",
+            #selector(NSResponder.insertTab(_:)): "Tab", #selector(NSResponder.insertBacktab(_:)): "Tab"]
+        if let key = keys[commandSelector], events["onKeyPress"] != nil {
+            fire("onKeyPress", ["key": key, "shiftKey": commandSelector == #selector(NSResponder.insertBacktab(_:)), "text": textView.string]); return true
+        }
         return false
     }
     func controlTextDidEndEditing(_ notification: Notification) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "craft-native",
-  "version": "0.0.408",
+  "version": "0.0.410",
   "type": "module",
   "description": "Build desktop apps with web languages - TypeScript SDK for Craft",
   "author": "Chris Breuer <chris@stacksjs.org>",