@octane-xplat/macos-renderer 0.11.1 → 0.13.0

package/README.md

@@ -9,12 +9,13 @@ Your application owns startup, windows, menus, host services, and custom font
 assets. The renderer owns views, layout, events, accessibility, and its hosted
 popups and sheets. It does not load web stylesheets or implement every
 NativeScript widget. See the [macOS harness](../../apps/macos/README.md) for
-the current component and service limits. The image-crop integration test compiles and mounts the public UI barrel.
-The full application harness has not been reverified by that test. Registered
-action selectors match the assigned target/action strings, and the maintained
-consumer checks direct handler dispatch — but OS-level input delivery (a live
+the current component and service limits.
+
+Verification status: the image-crop integration test compiles and mounts the
+public UI barrel, and registered action selectors match their target/action
+strings through direct handler dispatch. OS-level input delivery (a live
 AppKit `performClick`, control edits, gestures) has not been verified end to
-end.
+end, and the full application harness has not been reverified by that test.
 
 ## Configure an app
 
@@ -373,5 +374,4 @@ The packed check uses the renderer and CLI tarballs in a temporary app outside
 the checkout. It checks declarations and production compilation on every
 host; on Apple Silicon macOS it also packages and launches the app and verifies
 retained-root HMR. Programmatic action dispatch establishes handler behavior,
-not OS input or hit-testing. Publication requires the repository's normal
-[npm bootstrap and trusted-publisher setup](../../.agents/docs/releases.md).
+not OS input or hit-testing.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octane-xplat/macos-renderer",
-  "version": "0.11.1",
+  "version": "0.13.0",
   "description": "Experimental AppKit renderer for Octane on macOS",
   "license": "MIT",
   "repository": {

package/src/index.ts

@@ -381,7 +381,7 @@ class GridLayoutView extends NSView {
 }
 
 // Absolute's host — children position via their own left/top/right/bottom
-// layout-child props; the layout() pass sets frames directly.
+// layout-child props; the layout() pass updates parent-anchored constraints.
 class AbsoluteLayoutView extends NSView {
 	static {
 		NativeClass(this)
@@ -637,30 +637,24 @@ function syncMarginHost(node: ElementNode) {
 	}
 
 	const insets = marginInsetsOf(node)
-	const gravity = stackGravity(parent, node)
-	const index = gravityInsertIndex(parent, node, gravity)
 	if (insets && !node.marginHost) {
+		const gravity = stackGravity(parent, node)
+		const index = gravityInsertIndex(parent, node, gravity)
 		stack.removeArrangedSubview(node.view)
 		node.view.removeFromSuperview()
 		const host = makeMarginHost(node)
 		stack.insertViewAtIndexInGravity(host, index, gravity)
 		queueLayoutReconcile(node.container, parent)
 		setLayoutAction(node, node.props?.onLayoutChanged)
-	} else if (!insets && node.marginHost) {
-		stack.removeArrangedSubview(node.marginHost)
-		node.view.removeFromSuperview()
-		node.marginHost.removeFromSuperview()
-		node.marginHost = null
-		node.marginConstraints = null
-		stack.insertViewAtIndexInGravity(node.view, index, gravity)
-		queueLayoutReconcile(node.container, parent)
-		setLayoutAction(node, node.props?.onLayoutChanged)
-	} else if (insets && node.marginHost) {
+	} else if (node.marginHost) {
+		// Once wrapped, the host stays arranged for the node's lifetime —
+		// unwrapping would detach a first-responder ancestor and end live
+		// editing. Zeroed constants collapse it to the child's frame.
 		const [leading, trailing, top, bottom] = node.marginConstraints
-		leading.constant = insets.left
-		trailing.constant = -insets.right
-		top.constant = insets.top
-		bottom.constant = -insets.bottom
+		leading.constant = insets?.left ?? 0
+		trailing.constant = 0 - (insets?.right ?? 0)
+		top.constant = insets?.top ?? 0
+		bottom.constant = 0 - (insets?.bottom ?? 0)
 	}
 }
 
@@ -744,21 +738,86 @@ function gravityInsertIndex(parent: ElementNode, node: ElementNode, gravity: num
 	return index
 }
 
+/** Snapshot one gravity area's arranged views. The bridge returns an
+ *  NSArray; `count` may be a method or a property depending on interop. */
+function stackViewsInGravity(stack: any, gravity: number) {
+	const views = typeof stack?.viewsInGravity === 'function' ? stack.viewsInGravity(gravity) : null
+	const count = typeof views?.count === 'function' ? views.count() : (views?.count ?? 0)
+	const arrangedViews: any[] = []
+	for (let index = 0; index < count; index++) {
+		arrangedViews.push(views.objectAtIndex(index))
+	}
+
+	return arrangedViews
+}
+
+/** Reconcile one gravity area with the children's desired views. Only
+ *  re-parented children land in `moved` — detaching a view that is (or
+ *  contains) the first responder ends the active editing session. */
+function syncStackGravityArea(
+	parent: ElementNode,
+	stack: any,
+	gravity: number,
+	moved: Set<ElementNode>,
+) {
+	const desired: ElementNode[] = []
+	for (const child of parent.children) {
+		if (child.view && stackGravity(parent, child) === gravity) {
+			desired.push(child)
+		}
+	}
+
+	const keep = new Set(desired.map((child) => arrangedView(child)))
+	const arrangedViews = stackViewsInGravity(stack, gravity)
+	for (let index = arrangedViews.length - 1; index >= 0; index--) {
+		if (!keep.has(arrangedViews[index])) {
+			stack.removeArrangedSubview(arrangedViews[index])
+			arrangedViews[index].removeFromSuperview()
+			arrangedViews.splice(index, 1)
+		}
+	}
+
+	for (let index = 0; index < desired.length; index++) {
+		const child = desired[index]
+		const view = arrangedView(child)
+		if (arrangedViews[index] === view) {
+			continue
+		}
+
+		const from = arrangedViews.indexOf(view)
+		if (from >= 0) {
+			stack.removeArrangedSubview(view)
+			view.removeFromSuperview()
+			arrangedViews.splice(from, 1)
+		}
+
+		stack.insertViewAtIndexInGravity(view, index, gravity)
+		arrangedViews.splice(index, 0, view)
+		moved.add(child)
+	}
+}
+
 function moveStackChildren(parent: ElementNode) {
 	const stack = parent.childHost ?? parent.view
 	if (typeof stack?.addViewInGravity !== 'function') {
 		return
 	}
 
-	for (const child of parent.children) {
-		if (!child.view) {
-			continue
-		}
+	// Diff each gravity area against the live arrangement so unchanged
+	// children are never re-parented — AppKit's endEditingFor: fires when a
+	// first-responder ancestor leaves its superview. Orientation flips keep
+	// identical gravity values (Leading == Top, Trailing == Bottom), so a
+	// pure orientation change is a no-op here.
+	const moved = new Set<ElementNode>()
+	for (const gravity of [
+		NSStackViewGravity.Leading,
+		NSStackViewGravity.Center,
+		NSStackViewGravity.Trailing,
+	]) {
+		syncStackGravityArea(parent, stack, gravity, moved)
+	}
 
-		const arranged = arrangedView(child)
-		stack.removeArrangedSubview(arranged)
-		arranged.removeFromSuperview()
-		stack.addViewInGravity(arranged, stackGravity(parent, child))
+	for (const child of moved) {
 		// Removing a view drops constraints to its old superview, including
 		// percentage dimensions. Reinstall them after reattaching.
 		applySizeConstraints(child)
@@ -1402,10 +1461,35 @@ function pinLayoutChild(
 		}
 	}
 
+	const same = (a: number, b: number) => a === b || (Number.isNaN(a) && Number.isNaN(b))
+	if (
+		same(Number(pins.leading.constant), x) &&
+		same(Number(pins.top.constant), top) &&
+		same(Number(pins.width.constant), width) &&
+		same(Number(pins.height.constant), height)
+	) {
+		return
+	}
+
 	pins.leading.constant = x
 	pins.top.constant = top
 	pins.width.constant = width
 	pins.height.constant = height
+	// Constant writes inside a layout() pass apply only on the next solve, and
+	// a needsLayout mark made now is cleared when that pass ends. Defer the
+	// mark so the next layoutSubtreeIfNeeded/display cycle applies the pins —
+	// without it, real-window resizes leave children at stale frames. The bare
+	// vm slices in tests have no microtask queue, so fall back to a direct
+	// mark there.
+	const mark = () => {
+		parentView.needsLayout = true
+	}
+
+	if (typeof queueMicrotask === 'function') {
+		queueMicrotask(mark)
+	} else {
+		mark()
+	}
 }
 
 /** Drop the pins a grid/absolute parent installed — a constraint that keeps
@@ -2414,10 +2498,47 @@ function applyStyle(node: ElementNode, style: PropBag) {
 	syncStackLayout(node)
 }
 
+// `className` composes clsx-style on the DOM renderer and the NativeScript
+// driver; this mirrors octane's `normalizeClass` (native dist must not import
+// bare `octane`, and peers older than 0.11 predate the export) so a
+// declarative array or object reaches the tokenizer instead of String(value)'s
+// comma-join.
+function normalizeClass(value: any): string {
+	if (typeof value === 'string') {
+		return value
+	}
+
+	if (typeof value !== 'object') {
+		return typeof value === 'number' && value ? '' + value : ''
+	}
+
+	if (value === null) {
+		return ''
+	}
+
+	let str = ''
+	if (Array.isArray(value)) {
+		for (const item of value) {
+			if (item) {
+				const inner = normalizeClass(item)
+				if (inner) {
+					str = str ? str + ' ' + inner : inner
+				}
+			}
+		}
+	} else {
+		for (const key in value) {
+			if (value[key]) {
+				str = str ? str + ' ' + key : key
+			}
+		}
+	}
+
+	return str
+}
+
 function applyClassName(node: ElementNode, value: any) {
-	const classes = String(value ?? '')
-		.split(/\s+/)
-		.filter(Boolean)
+	const classes = normalizeClass(value).split(/\s+/).filter(Boolean)
 
 	// Class effects re-derive from scratch on every apply: the class-owned
 	// fields reset here and re-populate below, so removing a class drops the
@@ -3378,7 +3499,7 @@ function insert(
 				deactivateSizeConstraints(node)
 				queueLayoutReconcile(container, parent)
 			} else {
-				if (marginInsetsOf(node)) {
+				if (marginInsetsOf(node) && !node.marginHost) {
 					makeMarginHost(node)
 					setLayoutAction(node, node.props?.onLayoutChanged)
 				}
@@ -3719,9 +3840,7 @@ const macOSDriver: UniversalHostDriver<RootContainer, any> = {
 const round = (value: number) => Math.round(value * 100) / 100
 
 function nodeClasses(node: ElementNode) {
-	return String(node.props?.className ?? '')
-		.split(/\s+/)
-		.filter(Boolean)
+	return normalizeClass(node.props?.className).split(/\s+/).filter(Boolean)
 }
 
 function descendants(node: ElementNode, out: ElementNode[] = []) {