@octane-xplat/macos-renderer 0.10.0 → 0.11.1

package/src/index.ts

@@ -1,7 +1,8 @@
-import { showWindowLayer } from './layer.mjs'
+import { showWindowLayer, type WindowLayerOptions } from './layer'
 import '@nativescript/macos-node-api'
-import { loadImage } from './image'
-import { installPresentationBridge } from './presentation.mjs'
+import { disposeImage, updateImage } from './image'
+import { installPresentationBridge } from './presentation'
+import { installAppearanceBridge } from './appearance'
 import { makeWebView, updateWebView, disposeWebView } from './webview'
 import { createUniversalRoot } from 'octane/universal/native'
 import type {
@@ -43,8 +44,10 @@ export interface ElementNode {
 	scrollObserverInstalled: boolean
 	text: string
 	// Per-kind extras: placeholderView, marginHost, marginConstraints,
-	// crossAxisConstraint, sizeConstraints, styleBg, bgSlot, layoutObserver,
-	// scrollObserver, scheme, textRuns, appliedClassName, ...
+	// crossAxisConstraint, sizeConstraints, placementPins, styleBg, bgSlot,
+	// layoutObserver, scrollObserver, scheme, textRuns, appliedStyle,
+	// styleFont*/classFont*/propFontSize, stylePaddingBox/Edges, classInsets,
+	// styleRadius, classRadius, classSpacing, classOrientation, ...
 	[key: string]: any
 }
 
@@ -92,6 +95,9 @@ interface RootContainer {
 	nodes: Map<number, ElementNode>
 	children: ElementNode[]
 	root: UniversalRoot | null
+	/** Parents needing a sibling-wide layout pass; non-null only while a
+	 *  command batch is applying. */
+	layoutDirty: Set<ElementNode> | null
 }
 
 const actionHandlers = new Map<number, (() => void) | null>()
@@ -122,6 +128,8 @@ class ButtonActionTarget extends NSObject {
 		viewPressed: { params: [NSObject], returns: interop.types.void },
 		viewPanned: { params: [NSPanGestureRecognizer], returns: interop.types.void },
 		controlChanged: { params: [NSObject], returns: interop.types.void },
+		controlTextDidChange: { params: [NSNotification], returns: interop.types.void },
+		textFieldSubmitted: { params: [NSObject], returns: interop.types.void },
 		textDidChange: { params: [NSNotification], returns: interop.types.void },
 	}
 
@@ -133,14 +141,28 @@ class ButtonActionTarget extends NSObject {
 		invokeAction(sender.tag)
 	}
 
-	viewPressed(sender: NSObject) {
+	viewPressed(sender: NSClickGestureRecognizer) {
 		invokeAction(actionIdsByView.get(sender.view))
 	}
 
-	controlChanged(sender: NSObject) {
+	controlChanged(sender: NSControl) {
 		invokeAction(sender.tag ?? actionIdsByView.get(sender))
 	}
 
+	// NSControlTextEditingDelegate: fires on every edit while a single-line
+	// field is being edited — the per-edit source for onTextChange.
+	controlTextDidChange(notification: NSNotification) {
+		const node = textNodesByView.get(notification.object)
+		invokeAction(node?.actionId ?? actionIdsByView.get(notification.object))
+	}
+
+	// Single-line fields keep target/action for submission (Return). The
+	// change handler lives on controlTextDidChange, so the action never
+	// masquerades as a value-change event.
+	textFieldSubmitted(sender: NSObject) {
+		textNodesByView.get(sender)?.submitHandler?.()
+	}
+
 	viewPanned(sender: NSPanGestureRecognizer) {
 		const handler = panHandlersByView.get(sender.view)
 		if (!handler) {
@@ -190,6 +212,16 @@ class ContentAlignedTextField extends NSTextField {
 	}
 }
 
+class ContentAlignedSecureTextField extends NSSecureTextField {
+	static {
+		NativeClass(this)
+	}
+
+	alignmentRectInsets() {
+		return { top: 0, left: 0, bottom: 0, right: 0 }
+	}
+}
+
 const inputTransparentViews = new WeakSet<object>()
 
 class AccessibleStackView extends NSStackView {
@@ -400,12 +432,74 @@ function stackAlignmentAttribute(view: any, value: string) {
 	return horizontal ? NSLayoutAttribute.Top : NSLayoutAttribute.Left
 }
 
+// Container layout follows the same source order as fonts and padding. Resolve
+// whole channels so an axis-specific gap never overrides a higher-source gap.
+function syncStackLayout(node: ElementNode) {
+	if (node.type !== 'flexboxlayout' && node.type !== 'stack') {
+		return
+	}
+
+	const stack = node.view!
+	const style = node.styleLayout ?? {}
+	const previousOrientation = stack.orientation
+	stack.orientation =
+		style.flexDirection != null
+			? style.flexDirection === 'row'
+				? NSUserInterfaceLayoutOrientation.Horizontal
+				: NSUserInterfaceLayoutOrientation.Vertical
+			: (node.classOrientation ??
+				(node.props.flexDirection === 'row'
+					? NSUserInterfaceLayoutOrientation.Horizontal
+					: NSUserInterfaceLayoutOrientation.Vertical))
+
+	const gapKey =
+		stack.orientation === NSUserInterfaceLayoutOrientation.Horizontal ? 'columnGap' : 'rowGap'
+
+	stack.spacing = Number(
+		style[gapKey] ??
+			style.gap ??
+			node.classSpacing ??
+			node.props[gapKey] ??
+			node.props.gap ??
+			node.props.spacing ??
+			0,
+	)
+
+	stack.alignment = stackAlignmentAttribute(stack, stackAlignItems(node))
+	const justifyContent = stackJustifyContent(node)
+	if (stack.orientation !== previousOrientation || justifyContent !== node.appliedStackJustify) {
+		moveStackChildren(node)
+	}
+
+	node.appliedStackJustify = justifyContent
+	updateStackDistribution(node)
+	updateCrossAxisConstraints(node)
+}
+
+function isStackLayoutInput(name: string) {
+	return ['flexDirection', 'gap', 'rowGap', 'columnGap', 'alignItems', 'justifyContent'].includes(
+		name,
+	)
+}
+
 function stackAlignItems(node: ElementNode) {
+	if (node.styleLayout?.alignItems != null) {
+		return node.styleLayout.alignItems
+	}
+
 	const classes = nodeClasses(node)
 	if (classes.includes('vx-button') || classes.includes('items-center')) {
 		return 'center'
 	}
 
+	if (classes.includes('items-stretch')) {
+		return 'stretch'
+	}
+
+	if (classes.includes('items-baseline')) {
+		return 'baseline'
+	}
+
 	if (classes.includes('items-start')) {
 		return 'start'
 	}
@@ -418,6 +512,23 @@ function stackAlignItems(node: ElementNode) {
 }
 
 function stackJustifyContent(node: ElementNode) {
+	if (node.styleLayout?.justifyContent != null) {
+		return node.styleLayout.justifyContent
+	}
+
+	const classes = nodeClasses(node)
+	if (classes.includes('justify-center')) {
+		return 'center'
+	}
+
+	if (classes.includes('justify-end')) {
+		return 'end'
+	}
+
+	if (classes.includes('justify-start')) {
+		return 'start'
+	}
+
 	if (nodeClasses(node).includes('vx-button')) {
 		return 'center'
 	}
@@ -489,7 +600,7 @@ function makeMarginHost(node: ElementNode) {
 	})
 
 	host.translatesAutoresizingMaskIntoConstraints = false
-	host.addSubview(node.view)
+	host.addSubview(node.view!)
 	const insets = marginInsetsOf(node)
 	const constraints = [
 		node.view!.leadingAnchor.constraintEqualToAnchorConstant(host.leadingAnchor, insets.left),
@@ -526,23 +637,24 @@ function syncMarginHost(node: ElementNode) {
 	}
 
 	const insets = marginInsetsOf(node)
-	const index = Math.max(parent.children.indexOf(node), 0)
+	const gravity = stackGravity(parent, node)
+	const index = gravityInsertIndex(parent, node, gravity)
 	if (insets && !node.marginHost) {
-		const gravity = stackGravity(parent, node)
 		stack.removeArrangedSubview(node.view)
 		node.view.removeFromSuperview()
 		const host = makeMarginHost(node)
 		stack.insertViewAtIndexInGravity(host, index, gravity)
-		updateCrossAxisConstraints(parent)
+		queueLayoutReconcile(node.container, parent)
+		setLayoutAction(node, node.props?.onLayoutChanged)
 	} else if (!insets && node.marginHost) {
-		const gravity = stackGravity(parent, node)
 		stack.removeArrangedSubview(node.marginHost)
 		node.view.removeFromSuperview()
 		node.marginHost.removeFromSuperview()
 		node.marginHost = null
 		node.marginConstraints = null
 		stack.insertViewAtIndexInGravity(node.view, index, gravity)
-		updateCrossAxisConstraints(parent)
+		queueLayoutReconcile(node.container, parent)
+		setLayoutAction(node, node.props?.onLayoutChanged)
 	} else if (insets && node.marginHost) {
 		const [leading, trailing, top, bottom] = node.marginConstraints
 		leading.constant = insets.left
@@ -577,7 +689,7 @@ function setMarginStyle(node: ElementNode, name: string, value: any) {
 
 	if (node.parent?.type === 'gridlayout') {
 		// Grids lay out children manually from props.style — no wrapper needed.
-		layoutGridChildren(node.parent)
+		queueLayoutReconcile(node.container, node.parent)
 		return
 	}
 
@@ -614,6 +726,24 @@ function stackGravity(parent: ElementNode, child: ElementNode) {
 	return leading
 }
 
+/** AppKit insertion indices are local to a gravity area — count the
+ *  same-gravity siblings ahead of `node`, not its logical child index.
+ *  Shared by stack insertion and margin-host reinsertion. */
+function gravityInsertIndex(parent: ElementNode, node: ElementNode, gravity: number) {
+	let index = 0
+	for (const sibling of parent.children) {
+		if (sibling === node) {
+			break
+		}
+
+		if (sibling.view && stackGravity(parent, sibling) === gravity) {
+			index++
+		}
+	}
+
+	return index
+}
+
 function moveStackChildren(parent: ElementNode) {
 	const stack = parent.childHost ?? parent.view
 	if (typeof stack?.addViewInGravity !== 'function') {
@@ -629,9 +759,13 @@ function moveStackChildren(parent: ElementNode) {
 		stack.removeArrangedSubview(arranged)
 		arranged.removeFromSuperview()
 		stack.addViewInGravity(arranged, stackGravity(parent, child))
+		// Removing a view drops constraints to its old superview, including
+		// percentage dimensions. Reinstall them after reattaching.
+		applySizeConstraints(child)
 		setStackChildPriorities(parent, child)
 	}
 
+	updateStackDistribution(parent)
 	updateCrossAxisConstraints(parent)
 }
 
@@ -672,8 +806,6 @@ function setStackChildPriorities(parent: ElementNode, child: ElementNode) {
 		target.setContentHuggingPriorityForOrientation(priority, orientation)
 		target.setContentCompressionResistancePriorityForOrientation(750, orientation)
 	}
-
-	updateStackDistribution(parent)
 }
 
 function makeFlexbox(props: PropBag) {
@@ -684,11 +816,12 @@ function makeFlexbox(props: PropBag) {
 			: undefined
 
 	if (actionId !== undefined) {
-		actionIdsByView.set(stack, actionId)
-		actionHandlers.set(actionId, null)
 		stack.addGestureRecognizer(
-			NSClickGestureRecognizer.alloc().initWithTargetAction(buttonActionTarget, 'viewPressed'),
+			NSClickGestureRecognizer.alloc().initWithTargetAction(buttonActionTarget, 'viewPressed:'),
 		)
+
+		actionIdsByView.set(stack, actionId)
+		actionHandlers.set(actionId, null)
 	}
 
 	return { view: stack, actionId }
@@ -717,7 +850,7 @@ function makeButton(props: PropBag) {
 	const button = NSButton.buttonWithTitleTargetAction(
 		String(props.title ?? 'Button'),
 		buttonActionTarget,
-		'buttonPressed',
+		'buttonPressed:',
 	)
 
 	button.bezelStyle = NSBezelStyle.Rounded
@@ -810,6 +943,22 @@ function setScrollAction(node: ElementNode, handler: ((event: any) => void) | un
 
 const layoutHandlers = new WeakMap<object, () => void>()
 
+/** Margin changes swap a node's arranged view without touching the node.
+ *  Drop the observer and handler bound to the stale target — the caller
+ *  re-runs `setLayoutAction`, which rebuilds both against the current
+ *  arranged view so events keep reporting that view's bounds. */
+function syncLayoutObserver(node: ElementNode) {
+	const observed = node.layoutObservedView
+	if (!observed || observed === arrangedView(node)) {
+		return
+	}
+
+	layoutHandlers.delete(observed)
+	NSNotificationCenter.defaultCenter.removeObserver(node.layoutObserver)
+	node.layoutObserver = null
+	node.layoutObservedView = null
+}
+
 /** `onLayoutChanged` prop: NSViewFrameDidChangeNotification on the arranged
  *  view (margin host when present) — the windowed VirtualList leaf measures
  *  rows through it. */
@@ -819,6 +968,7 @@ function setLayoutAction(node: ElementNode, handler: ((event: any) => void) | un
 		return
 	}
 
+	syncLayoutObserver(node)
 	if (typeof handler !== 'function') {
 		layoutHandlers.delete(target)
 		return
@@ -835,6 +985,8 @@ function setLayoutAction(node: ElementNode, handler: ((event: any) => void) | un
 				null,
 				() => layoutHandlers.get(target)?.(),
 			)
+
+		node.layoutObservedView = target
 	}
 
 	layoutHandlers.set(target, () => {
@@ -878,10 +1030,12 @@ function setTextFieldPlaceholder(field: NSTextField, props: PropBag, scheme = 'l
 function makeTextField(props: PropBag, multiline = false) {
 	const field = multiline
 		? NSTextView.alloc().initWithFrame({ origin: { x: 0, y: 0 }, size: { width: 320, height: 72 } })
-		: ContentAlignedTextField.alloc().initWithFrame({
-				origin: { x: 0, y: 0 },
-				size: { width: 320, height: 28 },
-			})
+		: (props.secure ? ContentAlignedSecureTextField : ContentAlignedTextField)
+				.alloc()
+				.initWithFrame({
+					origin: { x: 0, y: 0 },
+					size: { width: 320, height: 28 },
+				})
 
 	field.translatesAutoresizingMaskIntoConstraints = false
 	field.font = fontForStyle(14)
@@ -892,7 +1046,7 @@ function makeTextField(props: PropBag, multiline = false) {
 		field.editable = true
 		field.selectable = true
 		field.sendsActionOnEndEditing = false
-		setTextFieldPlaceholder(field, props)
+		setTextFieldPlaceholder(field as NSTextField, props)
 	} else {
 		field.editable = true
 		field.selectable = true
@@ -911,7 +1065,7 @@ function makeTextField(props: PropBag, multiline = false) {
 }
 
 function makeSwitch(props: PropBag) {
-	const button = NSButton.buttonWithTitleTargetAction('', buttonActionTarget, 'controlChanged')
+	const button = NSButton.buttonWithTitleTargetAction('', buttonActionTarget, 'controlChanged:')
 	button.setButtonType(NSButtonType.Switch)
 	button.state = props.checked ? 1 : 0
 	button.translatesAutoresizingMaskIntoConstraints = false
@@ -931,7 +1085,7 @@ function makeSlider(props: PropBag) {
 	slider.maxValue = Number(props.maxValue ?? 1)
 	slider.doubleValue = Number(props.value ?? 0)
 	slider.target = buttonActionTarget
-	slider.action = 'controlChanged'
+	slider.action = 'controlChanged:'
 	slider.translatesAutoresizingMaskIntoConstraints = false
 	const actionId = nextActionId++
 	slider.tag = actionId
@@ -1217,6 +1371,58 @@ function trackOffset(sizes: number[], index: number) {
 	return offset
 }
 
+/** Pin a grid/absolute child to the rect its parent's layout pass computed.
+ *  Children are translates=false views, so Auto Layout owns their frames —
+ *  an imperative frame write only holds until the next solve shrinks the
+ *  child back to fitting size. Each axis gets one edge pin against the
+ *  parent plus one size pin, so parent geometry stays an input; a pin set
+ *  that also implied the parent's size would outrank the window's
+ *  500-priority WindowSizeStayPut hold and lock the window at the content's
+ *  fitting size. */
+function pinLayoutChild(
+	child: ElementNode,
+	parentView: any,
+	x: number,
+	top: number,
+	width: number,
+	height: number,
+) {
+	const pins = (child.placementPins ??= {})
+	if (!pins.leading) {
+		pins.leading = child.view!.leadingAnchor.constraintEqualToAnchorConstant(
+			parentView.leadingAnchor,
+			0,
+		)
+
+		pins.top = child.view!.topAnchor.constraintEqualToAnchorConstant(parentView.topAnchor, 0)
+		pins.width = child.view!.widthAnchor.constraintEqualToConstant(0)
+		pins.height = child.view!.heightAnchor.constraintEqualToConstant(0)
+		for (const pin of [pins.leading, pins.top, pins.width, pins.height]) {
+			pin.active = true
+		}
+	}
+
+	pins.leading.constant = x
+	pins.top.constant = top
+	pins.width.constant = width
+	pins.height.constant = height
+}
+
+/** Drop the pins a grid/absolute parent installed — a constraint that keeps
+ *  referencing the old parent view is invalid once the child reparents. */
+function releasePlacementPins(node: ElementNode) {
+	const pins = node.placementPins
+	if (!pins) {
+		return
+	}
+
+	for (const pin of Object.values(pins) as { active: boolean }[]) {
+		pin.active = false
+	}
+
+	node.placementPins = null
+}
+
 function layoutGridChildren(parent: ElementNode | undefined) {
 	if (!parent?.view) {
 		return
@@ -1302,10 +1508,7 @@ function layoutGridChildren(parent: ElementNode | undefined) {
 			}
 
 			top += layoutLength(style.top, cellHeight, 0) + Number(style.marginTop ?? 0)
-			child.view!.frame = {
-				origin: { x, y: height - top - childHeight },
-				size: { width: childWidth, height: childHeight },
-			}
+			pinLayoutChild(child, parent.view, x, top, childWidth, childHeight)
 		}
 
 		return
@@ -1346,10 +1549,7 @@ function layoutGridChildren(parent: ElementNode | undefined) {
 			y = height - childHeight - Number(style.marginTop ?? 0)
 		}
 
-		child.view!.frame = {
-			origin: { x, y },
-			size: { width: childWidth, height: childHeight },
-		}
+		pinLayoutChild(child, parent.view, x, height - y - childHeight, childWidth, childHeight)
 	}
 }
 
@@ -1394,10 +1594,7 @@ function layoutAbsoluteChildren(parent: ElementNode | undefined) {
 				? height - bottom - childHeight
 				: 0
 
-		child.view.frame = {
-			origin: { x, y: height - offsetTop - childHeight },
-			size: { width: childWidth, height: childHeight },
-		}
+		pinLayoutChild(child, parent.view, x, offsetTop, childWidth, childHeight)
 	}
 }
 
@@ -1433,140 +1630,236 @@ function makeImageView(props: PropBag) {
 	})
 
 	image.translatesAutoresizingMaskIntoConstraints = false
-	image.image = loadImage(props.src)
+	updateImage(image, props.src)
 
 	return image
 }
 
-function makeNode(container: RootContainer, id: number, type: string, props: PropBag) {
-	let view
-	let actionId
-	let childHost
-	switch (type) {
-		case 'stack':
-			view = makeStack(props)
-			break
-		case 'flexboxlayout': {
-			const flexbox = makeFlexbox(props)
-			view = flexbox.view
-			actionId = flexbox.actionId
-			break
-		}
-		case 'gridlayout':
-			view = makeGridLayout()
-			break
-		case 'absolutelayout':
-			view = makeAbsoluteLayout()
-			break
-		case 'label':
-			view = makeLabel()
-			break
-		case '#text':
-			view = null
-			break
-		case 'button': {
-			const button = makeButton(props)
-			view = button.view
-			actionId = button.actionId
-			break
+/** Types whose views arrange child views; mirrors the check in insert(). */
+const VIEW_PARENT_TYPES = new Set([
+	'stack',
+	'flexboxlayout',
+	'scrollview',
+	'gridlayout',
+	'absolutelayout',
+])
+
+/** Every type the factory switch below can build. */
+const SUPPORTED_TYPES = new Set([
+	...VIEW_PARENT_TYPES,
+	'label',
+	'#text',
+	'button',
+	'textfield',
+	'textview',
+	'switch',
+	'slider',
+	'webview',
+	'image',
+	'span',
+])
+
+function typeHasView(type: string) {
+	return type !== '#text' && type !== 'span'
+}
+
+function assertSupportedType(type: string) {
+	if (!SUPPORTED_TYPES.has(type)) {
+		throw new Error('AppKit spike does not support <' + type + '>')
+	}
+}
+
+/** Deterministic prop failures that would otherwise throw after views and
+ *  registrations exist. `baseProps` supplies already-applied props for
+ *  update commands so merged-prop rules (e.g. placeholder color) stay exact. */
+function validateNodeProps(type: string, props: PropBag | undefined, baseProps?: PropBag) {
+	if (type === '#text' || type === 'span') {
+		return
+	}
+
+	const style = props?.style
+	if (style != null) {
+		if (typeof style !== 'object') {
+			throw new Error('AppKit spike expects style to be an object')
 		}
-		case 'scrollview': {
-			const scroll = makeScrollView()
-			view = scroll.view
-			childHost = scroll.childHost
-			break
+
+		// applyStyle feeds these straight into nativeColor.
+		if (style.backgroundColor != null) {
+			nativeColor(style.backgroundColor)
 		}
-		case 'textfield':
-			view = makeTextField(props)
-			break
-		case 'textview':
-			view = makeTextField(props, true)
-			break
-		case 'switch': {
-			const control = makeSwitch(props)
-			view = control.view
-			actionId = control.actionId
-			break
+
+		if (style.borderColor != null) {
+			nativeColor(style.borderColor)
 		}
-		case 'slider': {
-			const control = makeSlider(props)
-			view = control.view
-			actionId = control.actionId
-			break
+
+		if (['label', 'textfield', 'textview'].includes(type) && style.color != null) {
+			nativeColor(style.color)
 		}
-		case 'webview':
-			view = makeWebView()
-			break
-		case 'image':
-			view = makeImageView(props)
-			break
-		case 'span':
-			view = null
-			break
-		default:
-			throw new Error('AppKit spike does not support <' + type + '>')
 	}
 
-	if (type === 'textfield' || type === 'textview') {
-		actionId = nextActionId++
-		actionIdsByView.set(view, actionId)
-		actionHandlers.set(actionId, null)
-		if (type === 'textfield') {
-			view.tag = actionId
-			view.target = buttonActionTarget
-			view.action = 'controlChanged'
-		} else {
-			view.delegate = buttonActionTarget
+	if (type === 'gridlayout') {
+		// layoutGridChildren parses the track lists on every apply.
+		parseGridTracks(props?.rows)
+		parseGridTracks(props?.columns)
+	}
+
+	if (type === 'textfield' && props?.placeholderTextColor != null) {
+		// setTextFieldPlaceholder only reaches the color when text exists.
+		const placeholder = props.placeholder ?? baseProps?.placeholder
+		if (String(placeholder ?? '') !== '') {
+			nativeColor(props.placeholderTextColor)
 		}
 	}
+}
+
+function makeNode(container: RootContainer, id: number, type: string, props: PropBag) {
+	// Reject malformed props before factories allocate views or register
+	// actions — the node only reaches container.nodes after this returns, so
+	// a throwing prop below must unwind whatever was already acquired.
+	assertSupportedType(type)
+	validateNodeProps(type, props)
 
 	const node: ElementNode = {
 		id,
 		type,
-		view,
-		childHost,
+		view: null,
 		props: {},
 		parent: null,
 		children: [],
 		container,
 		appliedFontFamily: container.fontFamily,
-		actionId,
 		scrollObserverInstalled: false,
 		text: '',
+		// The native class is fixed at creation; post-mount `secure` updates
+		// are rejected against this in applyProps.
+		secure: type === 'textfield' && !!props.secure,
 	}
 
-	if (['label', 'textfield', 'textview'].includes(type) && view.font) {
-		view.font = fontForFamilyStyle(view.font.pointSize, 400, container.fontFamily)
-	}
+	try {
+		switch (type) {
+			case 'stack':
+				node.view = makeStack(props)
+				break
+			case 'flexboxlayout': {
+				const flexbox = makeFlexbox(props)
+				node.view = flexbox.view
+				node.actionId = flexbox.actionId
+				break
+			}
+			case 'gridlayout':
+				node.view = makeGridLayout()
+				break
+			case 'absolutelayout':
+				node.view = makeAbsoluteLayout()
+				break
+			case 'label':
+				node.view = makeLabel()
+				break
+			case '#text':
+				break
+			case 'button': {
+				const button = makeButton(props)
+				node.view = button.view
+				node.actionId = button.actionId
+				break
+			}
+			case 'scrollview': {
+				const scroll = makeScrollView()
+				node.view = scroll.view
+				node.childHost = scroll.childHost
+				break
+			}
+			case 'textfield':
+				node.view = makeTextField(props)
+				break
+			case 'textview':
+				node.view = makeTextField(props, true)
+				break
+			case 'switch': {
+				const control = makeSwitch(props)
+				node.view = control.view
+				node.actionId = control.actionId
+				break
+			}
+			case 'slider': {
+				const control = makeSlider(props)
+				node.view = control.view
+				node.actionId = control.actionId
+				break
+			}
+			case 'webview':
+				node.view = makeWebView()
+				break
+			case 'image':
+				node.view = makeImageView(props)
+				break
+			case 'span':
+				break
+			default:
+				throw new Error('AppKit spike does not support <' + type + '>')
+		}
+
+		if (type === 'textfield' || type === 'textview') {
+			node.actionId = nextActionId++
+			actionIdsByView.set(node.view!, node.actionId)
+			actionHandlers.set(node.actionId, null)
+			if (type === 'textfield') {
+				// Per-edit events arrive through controlTextDidChange (delegate);
+				// the target/action is reserved for submission on Return.
+				node.view!.delegate = buttonActionTarget
+				node.view!.target = buttonActionTarget
+				node.view!.action = 'textFieldSubmitted:'
+			} else {
+				node.view!.delegate = buttonActionTarget
+			}
+		}
 
-	if (type === 'gridlayout') {
-		gridLayoutNodesByView.set(view, node)
-	}
+		if (['label', 'textfield', 'textview'].includes(type) && node.view!.font) {
+			node.view!.font = fontForFamilyStyle(node.view!.font.pointSize, 400, container.fontFamily)
+		}
 
-	if (type === 'absolutelayout') {
-		absoluteLayoutNodesByView.set(view, node)
-	}
+		if (type === 'gridlayout') {
+			gridLayoutNodesByView.set(node.view!, node)
+		}
 
-	if (type === 'textview') {
-		const placeholder = makeLabel()
-		placeholder.font = fontForFamilyStyle(14, 400, node.appliedFontFamily)
-		placeholder.textColor = nativeColor('#666666')
-		placeholder.stringValue = String(props.placeholder ?? '')
-		placeholder.translatesAutoresizingMaskIntoConstraints = false
-		placeholder.heightAnchor.constraintEqualToConstant(
-			Math.ceil(14 * DEFAULT_TEXT_LINE_HEIGHT_RATIO),
-		).active = true
+		if (type === 'absolutelayout') {
+			absoluteLayoutNodesByView.set(node.view!, node)
+		}
 
-		placeholder.hidden = String(props.value ?? '').length > 0
-		view.addSubview(placeholder)
-		placeholder.leadingAnchor.constraintEqualToAnchorConstant(view.leadingAnchor, 0).active = true
-		placeholder.topAnchor.constraintEqualToAnchor(view.topAnchor).active = true
-		node.placeholderView = placeholder
-		textNodesByView.set(view, node)
-	}
+		if (type === 'textfield') {
+			textNodesByView.set(node.view!, node)
+		}
+
+		if (type === 'textview') {
+			const placeholder = makeLabel()
+			placeholder.font = fontForFamilyStyle(14, 400, node.appliedFontFamily)
+			placeholder.textColor = nativeColor('#666666')
+			placeholder.stringValue = String(props.placeholder ?? '')
+			placeholder.translatesAutoresizingMaskIntoConstraints = false
+			placeholder.heightAnchor.constraintEqualToConstant(
+				Math.ceil(14 * DEFAULT_TEXT_LINE_HEIGHT_RATIO),
+			).active = true
+
+			placeholder.hidden = String(props.value ?? '').length > 0
+			node.view!.addSubview(placeholder)
+			placeholder.leadingAnchor.constraintEqualToAnchorConstant(
+				node.view!.leadingAnchor,
+				0,
+			).active = true
+
+			placeholder.topAnchor.constraintEqualToAnchor(node.view!.topAnchor).active = true
+			node.placeholderView = placeholder
+			textNodesByView.set(node.view!, node)
+		}
 
-	applyProps(node, props)
-	return node
+		applyProps(node, props)
+		return node
+	} catch (error) {
+		// Release whatever the failed creation registered — action slots,
+		// observers, WebView delegates — since no caller can destroy it.
+		destroy(node)
+		throw error
+	}
 }
 
 const EDGE_INSET_PROPS = new Map([
@@ -1694,16 +1987,20 @@ function applyThemeColors(node: ElementNode) {
 	}
 
 	if (node.type === 'textfield') {
-		setTextFieldPlaceholder(view, node.props, node.scheme)
+		setTextFieldPlaceholder(view as NSTextField, node.props, node.scheme)
 	}
 
 	if (node.type === 'textview' && node.placeholderView) {
 		node.placeholderView.textColor = nativeColor(colors.placeholder)
 	}
 
-	if (node.bgSlot) {
+	if (node.bgSlot || node.styleBg != null) {
+		node.bgApplied = true
 		view.wantsLayer = true
 		view.layer.backgroundColor = nativeColor(node.styleBg ?? colors[node.bgSlot]).CGColor
+	} else if (node.bgApplied) {
+		node.bgApplied = false
+		view.layer.backgroundColor = null
 	}
 }
 
@@ -1729,28 +2026,25 @@ function setSizeConstraint(node: ElementNode, name: string, value: any) {
 	const specs = (node.sizeConstraintSpecs ??= {})
 	if (!spec) {
 		delete specs[name]
-		console.warn(
-			'[macos-style] ignored unsupported style.' + name + ' value ' + JSON.stringify(value),
-		)
+		// null/undefined is an intentional clear — only malformed values warn.
+		if (value != null) {
+			console.warn(
+				'[macos-style] ignored unsupported style.' + name + ' value ' + JSON.stringify(value),
+			)
+		}
 	} else {
 		specs[name] = spec
 	}
 
-	if (node.parent?.type === 'gridlayout') {
-		deactivateSizeConstraints(node)
-		layoutGridChildren(node.parent)
-		return
-	}
-
-	if (node.parent?.type === 'absolutelayout') {
+	if (node.parent?.type === 'gridlayout' || node.parent?.type === 'absolutelayout') {
 		deactivateSizeConstraints(node)
-		layoutAbsoluteChildren(node.parent)
+		queueLayoutReconcile(node.container, node.parent)
 		return
 	}
 
 	applySizeConstraint(node, name)
 	if (node.parent) {
-		updateCrossAxisConstraints(node.parent)
+		queueLayoutReconcile(node.container, node.parent)
 	}
 }
 
@@ -1831,42 +2125,224 @@ function deactivateSizeConstraints(node: ElementNode) {
 	}
 }
 
-function applyStyle(node: ElementNode, style: PropBag) {
-	if (style == null) {
+// Style, class, and (for labels) prop sources all write one native font.
+// Each source is tracked on the node so removing one re-resolves the rest —
+// explicit style wins over classes, which win over the element defaults.
+function syncNodeFont(node: ElementNode) {
+	const size =
+		node.styleFontSize ??
+		node.propFontSize ??
+		node.classFontSize ??
+		(node.type === 'label' ? 16 : 14)
+
+	const weight = node.styleFontWeight ?? node.classFontWeight ?? 400
+	node.appliedFontWeight = String(weight)
+	node.appliedFontFamily = node.styleFontFamily ?? node.container.fontFamily
+	node.view!.font = fontForFamilyStyle(size, weight, node.appliedFontFamily)
+}
+
+// NSStackView edgeInsets blend padding styles over class padding over zero.
+// Edges a style never set fall through to the class contribution.
+function syncEdgeInsets(node: ElementNode) {
+	const view = node.view
+	if (!view) {
+		return
+	}
+
+	const edges = node.stylePaddingEdges
+	const box = node.stylePaddingBox
+	const klass = node.classInsets
+	if (!edges && !box && !klass && !node.insetsApplied) {
+		return
+	}
+
+	node.insetsApplied = true
+	view.edgeInsets = {
+		top: edges?.top ?? box?.top ?? klass?.top ?? 0,
+		right: edges?.right ?? box?.right ?? klass?.right ?? 0,
+		bottom: edges?.bottom ?? box?.bottom ?? klass?.bottom ?? 0,
+		left: edges?.left ?? box?.left ?? klass?.left ?? 0,
+	}
+}
+
+// borderRadius (style) and rounded-* (class) share cornerRadius; either source
+// keeps masksToBounds on only while a positive radius is in effect.
+function syncCornerRadius(node: ElementNode) {
+	const view = node.view
+	if (!view) {
+		return
+	}
+
+	const radius = Number(node.styleRadius ?? node.classRadius ?? 0) || 0
+	if (radius <= 0 && !node.radiusApplied) {
+		return
+	}
+
+	node.radiusApplied = radius > 0
+	view.wantsLayer = true
+	view.layer.cornerRadius = Math.max(0, radius)
+	view.layer.masksToBounds = radius > 0
+}
+
+// Zero the margin sides a removed style owned, then let the stack unwrap or
+// the grid relayout — marginInsetsOf() returns null once every side is zero.
+function clearMarginStyle(node: ElementNode, name: string) {
+	const insets = node.marginInsets
+	if (!insets) {
+		return
+	}
+
+	if (name === 'margin') {
+		insets.top = insets.right = insets.bottom = insets.left = 0
+	} else {
+		insets[MARGIN_SIDES[name]] = 0
+	}
+
+	if (node.parent?.type === 'gridlayout') {
+		layoutGridChildren(node.parent)
 		return
 	}
 
-	if (typeof style !== 'object') {
+	syncMarginHost(node)
+}
+
+// A style key present in the last bag but absent or nulled in the new one must
+// put back the native state it installed: constraints deactivate, hit-testing
+// reverts, and shared properties resolve their class/default source again.
+function resetStyle(node: ElementNode, name: string) {
+	const view = node.view
+	if (!view) {
+		return
+	}
+
+	const textControl = ['label', 'textfield', 'textview'].includes(node.type)
+	if (name === 'pointerEvents') {
+		inputTransparentViews.delete(view)
+	} else if (name === 'objectFit' && node.type === 'image') {
+		// NSImageScaleProportionallyDown — the makeImageView/AppKit default.
+		view.imageScaling = 0
+	} else if (name === 'fontSize' && textControl) {
+		node.styleFontSize = undefined
+		syncNodeFont(node)
+	} else if (name === 'fontFamily' && textControl) {
+		node.styleFontFamily = undefined
+		syncNodeFont(node)
+	} else if (name === 'fontWeight' && textControl) {
+		node.styleFontWeight = undefined
+		syncNodeFont(node)
+	} else if (name === 'color' && textControl) {
+		node.styleColor = undefined
+		applyThemeColors(node)
+	} else if (name === 'padding' && node.type === 'flexboxlayout') {
+		node.stylePaddingBox = undefined
+		syncEdgeInsets(node)
+	} else if (EDGE_INSET_PROPS.has(name) && node.type === 'flexboxlayout') {
+		for (const edge of EDGE_INSET_PROPS.get(name)!) {
+			delete node.stylePaddingEdges?.[edge]
+		}
+
+		syncEdgeInsets(node)
+	} else if (name === 'backgroundColor') {
+		node.styleBg = undefined
+		applyThemeColors(node)
+	} else if (name === 'borderRadius') {
+		node.styleRadius = undefined
+		syncCornerRadius(node)
+	} else if (name === 'width' || name === 'height') {
+		setSizeConstraint(node, name, undefined)
+	} else if (name === 'left' || name === 'top' || name === 'right' || name === 'bottom') {
+		if (node.parent?.type === 'gridlayout') {
+			layoutGridChildren(node.parent)
+		}
+
+		if (node.parent?.type === 'absolutelayout') {
+			layoutAbsoluteChildren(node.parent)
+		}
+	} else if (name === 'translateX' || name === 'translateY') {
+		if (typeof view.layer?.setValueForKeyPath === 'function') {
+			view.layer.setValueForKeyPath(
+				0,
+				name === 'translateY' ? 'transform.translation.y' : 'transform.translation.x',
+			)
+		}
+	} else if (name === 'zIndex') {
+		if (view.layer) {
+			view.layer.zPosition = 0
+		}
+	} else if (name === 'opacity') {
+		view.alphaValue = 1
+	} else if (name === 'textAlign' && node.type === 'label') {
+		view.alignment = nodeClasses(node).includes('vx-sheet-grabber')
+			? NSTextAlignment.Center
+			: NSTextAlignment.Left
+	} else if (name === 'borderWidth') {
+		if (view.layer) {
+			view.layer.borderWidth = 0
+		}
+	} else if (name === 'borderColor') {
+		if (view.layer) {
+			view.layer.borderColor = null
+		}
+	} else if (MARGIN_SIDES[name] || name === 'margin') {
+		clearMarginStyle(node, name)
+	}
+	// lineHeight folds into setLabelText from props.style — no native reset.
+}
+
+function applyStyle(node: ElementNode, style: PropBag) {
+	if (style != null && typeof style !== 'object') {
 		throw new Error('AppKit spike expects style to be an object')
 	}
 
-	for (const [name, value] of Object.entries(style)) {
+	// The style prop replaces wholesale, so keys dropped or nulled since the
+	// last apply must reset the native state they installed before the current
+	// values go on — otherwise removed styles linger on the view.
+	const next: PropBag = style ?? {}
+	if (node.type === 'flexboxlayout' || node.type === 'stack') {
+		node.styleLayout = Object.fromEntries(
+			Object.entries(next).filter(([name]) => isStackLayoutInput(name)),
+		)
+	}
+
+	const prev: PropBag = node.appliedStyle ?? {}
+	for (const name of Object.keys(prev)) {
+		if (prev[name] != null && next[name] == null) {
+			resetStyle(node, name)
+		}
+	}
+
+	for (const [name, value] of Object.entries(next)) {
 		if (value == null) {
 			continue
 		}
 
-		if (name === 'pointerEvents') {
+		if ((node.type === 'flexboxlayout' || node.type === 'stack') && isStackLayoutInput(name)) {
+			// Applied together below, after all style inputs have reconciled.
+			continue
+		} else if (name === 'pointerEvents') {
 			if (value === 'none') {
 				inputTransparentViews.add(node.view!)
 			} else {
 				inputTransparentViews.delete(node.view!)
 			}
 		} else if (name === 'objectFit' && node.type === 'image') {
-			// NSImageScaleProportionallyUpOrDown / NSImageScaleProportionallyDown.
-			node.view!.imageScaling = value === 'contain' ? 3 : 0
+			// NSImageScaling: 0 ProportionallyDown, 1 AxesIndependently,
+			// 2 None (centered, unscaled), 3 ProportionallyUpOrDown.
+			// AppKit has no cover mode — 'cover' degrades to scale-down.
+			const imageScaling: Record<string, number> = {
+				contain: 3,
+				'scale-down': 0,
+				fill: 1,
+				none: 2,
+			}
+
+			node.view!.imageScaling = imageScaling[String(value)] ?? 0
 		} else if (name === 'fontSize' && ['label', 'textfield', 'textview'].includes(node.type)) {
-			const weight = style.fontWeight ?? node.appliedFontWeight ?? 400
-			node.appliedFontWeight = String(weight)
-			node.view!.font = fontForFamilyStyle(
-				value,
-				weight,
-				style.fontFamily ?? node.appliedFontFamily,
-			)
+			node.styleFontSize = value
+			syncNodeFont(node)
 		} else if (name === 'fontFamily' && ['label', 'textfield', 'textview'].includes(node.type)) {
-			node.appliedFontFamily = String(value)
-			const size = style.fontSize ?? node.view!.font.pointSize
-			const weight = style.fontWeight ?? node.appliedFontWeight ?? 400
-			node.view!.font = fontForFamilyStyle(size, weight, value)
+			node.styleFontFamily = String(value)
+			syncNodeFont(node)
 		} else if (name === 'color' && ['label', 'textfield', 'textview'].includes(node.type)) {
 			node.styleColor = String(value)
 			node.view!.textColor = nativeColor(value)
@@ -1874,31 +2350,28 @@ function applyStyle(node: ElementNode, style: PropBag) {
 			// syncText applies this to each paragraph; it is not the label's fixed height.
 			continue
 		} else if (name === 'padding' && node.type === 'flexboxlayout') {
-			node.view!.edgeInsets = parseEdgeInsets(value)
+			node.stylePaddingBox = parseEdgeInsets(value)
+			syncEdgeInsets(node)
 		} else if (EDGE_INSET_PROPS.has(name) && node.type === 'flexboxlayout') {
-			const insets = { ...node.view!.edgeInsets }
+			const edges = (node.stylePaddingEdges ??= {})
 			for (const edge of EDGE_INSET_PROPS.get(name)!) {
-				insets[edge] = Number(value) || 0
+				edges[edge] = Number(value) || 0
 			}
 
-			node.view!.edgeInsets = insets
+			syncEdgeInsets(node)
 		} else if (name === 'backgroundColor' && node.view) {
 			node.styleBg = String(value)
+			node.bgApplied = true
 			node.view.wantsLayer = true
 			node.view.layer.backgroundColor = nativeColor(value).CGColor
 		} else if (name === 'borderRadius' && node.view) {
-			node.view.wantsLayer = true
-			node.view.layer.cornerRadius = Number(value)
-			node.view.layer.masksToBounds = true
+			node.styleRadius = value
+			syncCornerRadius(node)
 		} else if ((name === 'width' || name === 'height') && node.view) {
 			setSizeConstraint(node, name, value)
 		} else if (name === 'left' && node.view) {
-			if (node.parent?.type === 'gridlayout') {
-				layoutGridChildren(node.parent)
-			}
-
-			if (node.parent?.type === 'absolutelayout') {
-				layoutAbsoluteChildren(node.parent)
+			if (node.parent?.type === 'gridlayout' || node.parent?.type === 'absolutelayout') {
+				queueLayoutReconcile(node.container, node.parent)
 			}
 		} else if ((name === 'translateX' || name === 'translateY' || name === 'zIndex') && node.view) {
 			node.view.wantsLayer = true
@@ -1915,12 +2388,8 @@ function applyStyle(node: ElementNode, style: PropBag) {
 		} else if (name === 'opacity' && node.view) {
 			node.view.alphaValue = Number(value)
 		} else if (name === 'fontWeight' && ['label', 'textfield', 'textview'].includes(node.type)) {
-			node.appliedFontWeight = String(value)
-			node.view!.font = fontForFamilyStyle(
-				node.view!.font.pointSize,
-				value,
-				style.fontFamily ?? node.appliedFontFamily,
-			)
+			node.styleFontWeight = String(value)
+			syncNodeFont(node)
 		} else if (name === 'textAlign' && node.type === 'label') {
 			node.view!.alignment =
 				value === 'left'
@@ -1940,6 +2409,9 @@ function applyStyle(node: ElementNode, style: PropBag) {
 			console.warn('[macos-style] ignored unsupported style.' + name + ' on <' + node.type + '>')
 		}
 	}
+
+	node.appliedStyle = next
+	syncStackLayout(node)
 }
 
 function applyClassName(node: ElementNode, value: any) {
@@ -1947,11 +2419,23 @@ function applyClassName(node: ElementNode, value: any) {
 		.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
+	// native state it installed instead of leaving stale values behind.
+	node.classFontSize = undefined
+	node.classFontWeight = undefined
+	node.classInsets = undefined
+	node.classRadius = undefined
+	node.classSpacing = undefined
+	node.classOrientation = undefined
+	node.colorSlot = undefined
+	node.bgSlot = undefined
+
 	if (node.type === 'label') {
-		if (classes.includes('vx-sheet-grabber')) {
+		const grabber = classes.includes('vx-sheet-grabber')
+		if (grabber) {
 			node.classLineHeight = 24
 			setSizeConstraint(node, 'height', 24)
-			node.view!.alignment = NSTextAlignment.Center
 		}
 
 		const sizes: Record<string, number> = {
@@ -1984,18 +2468,14 @@ function applyClassName(node: ElementNode, value: any) {
 		for (const name of classes) {
 			const heading = headingMetrics[name]
 			if (heading) {
-				node.appliedFontWeight = '700'
+				node.classFontWeight = '700'
+				node.classFontSize = heading.size
 				node.headingDefaultHeight = heading.height
-				node.view!.font = fontForFamilyStyle(heading.size, 700, node.appliedFontFamily)
 			}
 
 			if (sizes[name]) {
+				node.classFontSize = sizes[name]
 				node.headingDefaultHeight = undefined
-				node.view!.font = fontForFamilyStyle(
-					sizes[name],
-					node.appliedFontWeight ?? 400,
-					node.appliedFontFamily,
-				)
 			}
 
 			if (lineHeights[name] != null) {
@@ -2003,13 +2483,11 @@ function applyClassName(node: ElementNode, value: any) {
 			}
 
 			if (name === 'font-semibold') {
-				node.appliedFontWeight = '600'
-				node.view!.font = fontForFamilyStyle(node.view!.font.pointSize, 600, node.appliedFontFamily)
+				node.classFontWeight = '600'
 			}
 
 			if (name === 'font-bold') {
-				node.appliedFontWeight = '700'
-				node.view!.font = fontForFamilyStyle(node.view!.font.pointSize, 700, node.appliedFontFamily)
+				node.classFontWeight = '700'
 			}
 
 			if (name === 'text-muted') {
@@ -2020,6 +2498,28 @@ function applyClassName(node: ElementNode, value: any) {
 				node.colorSlot = 'onprimary'
 			}
 		}
+
+		syncNodeFont(node)
+
+		if (!grabber && node.props?.style?.height != null) {
+			// The grabber's 24pt pin shares the height spec with style.height —
+			// re-assert the style value once the class is gone.
+			setSizeConstraint(node, 'height', node.props.style.height)
+		}
+
+		if (grabber) {
+			node.view!.alignment = NSTextAlignment.Center
+		} else {
+			// Without the grabber the label returns to its textAlign — or the
+			// Left default when no alignment style is in effect.
+			const textAlign = node.props?.style?.textAlign
+			node.view!.alignment =
+				textAlign == null || textAlign === 'left'
+					? NSTextAlignment.Left
+					: textAlign === 'right'
+						? NSTextAlignment.Right
+						: NSTextAlignment.Center
+		}
 	}
 
 	if (
@@ -2038,37 +2538,27 @@ function applyClassName(node: ElementNode, value: any) {
 
 		for (const name of classes) {
 			if (gaps[name] !== undefined) {
-				node.view!.spacing = gaps[name]
+				node.classSpacing = gaps[name]
 			}
 
 			if (name === 'flex-row') {
-				node.view!.orientation = NSUserInterfaceLayoutOrientation.Horizontal
+				node.classOrientation = NSUserInterfaceLayoutOrientation.Horizontal
 			}
 
 			if (name === 'flex-col') {
-				node.view!.orientation = NSUserInterfaceLayoutOrientation.Vertical
-			}
-
-			if (name === 'items-center' || name === 'items-start' || name === 'items-end') {
-				node.view!.alignment = stackAlignmentAttribute(node.view, stackAlignItems(node))
+				node.classOrientation = NSUserInterfaceLayoutOrientation.Vertical
 			}
 
 			if (name === 'vx-toast' && node.type === 'flexboxlayout') {
-				;(node.view as NSStackView).edgeInsets = { top: 12, left: 12, bottom: 12, right: 12 }
+				node.classInsets = { top: 12, right: 12, bottom: 12, left: 12 }
 			}
 
 			if (name === 'vx-toast-viewport') {
-				;(node.view as NSStackView).spacing = 8
+				node.classSpacing = 8
 			}
 
 			if (name === 'vx-button') {
-				node.view!.orientation = NSUserInterfaceLayoutOrientation.Horizontal
-				node.view!.alignment = NSLayoutAttribute.CenterY
-				node.view!.distribution = NSStackViewDistribution.GravityAreas
-			}
-
-			if (name === 'justify-between') {
-				node.view!.distribution = NSStackViewDistribution.EqualSpacing
+				node.classOrientation = NSUserInterfaceLayoutOrientation.Horizontal
 			}
 
 			if (name === 'flex-1') {
@@ -2091,37 +2581,21 @@ function applyClassName(node: ElementNode, value: any) {
 			}
 
 			if (name === 'rounded-full' || name.startsWith('rounded-')) {
-				node.view!.wantsLayer = true
-				node.view!.layer.cornerRadius = name === 'rounded-full' ? 12 : 8
-				node.view!.layer.masksToBounds = true
+				node.classRadius = name === 'rounded-full' ? 12 : 8
 			}
 
 			if (name === 'bg-primary' || name === 'btn') {
 				node.bgSlot = 'primary'
-				node.view!.wantsLayer = true
-				node.view!.layer.backgroundColor = nativeColor(
-					SCHEME_COLORS[nodeScheme(node)].primary,
-				).CGColor
-
-				node.view!.edgeInsets = { top: 6, left: 10, bottom: 6, right: 10 }
+				node.classInsets = { top: 6, right: 10, bottom: 6, left: 10 }
 			}
 
 			if (name === 'bg-danger') {
 				node.bgSlot = 'danger'
-				node.view!.wantsLayer = true
-				node.view!.layer.backgroundColor = nativeColor(
-					SCHEME_COLORS[nodeScheme(node)].danger,
-				).CGColor
 			}
 
 			if (name === 'btn-secondary' || name === 'chip' || name === 'chip-off') {
 				node.bgSlot = 'secondary'
-				node.view!.wantsLayer = true
-				node.view!.layer.backgroundColor = nativeColor(
-					SCHEME_COLORS[nodeScheme(node)].secondary,
-				).CGColor
-
-				node.view!.edgeInsets = { top: 4, left: 8, bottom: 4, right: 8 }
+				node.classInsets = { top: 4, right: 8, bottom: 4, left: 8 }
 			}
 
 			// Panels that paint the web body's --color-surface. On this host the
@@ -2134,22 +2608,18 @@ function applyClassName(node: ElementNode, value: any) {
 				name === 'modal-panel'
 			) {
 				node.bgSlot = 'surface'
-				node.view!.wantsLayer = true
-				node.view!.layer.backgroundColor = nativeColor(
-					SCHEME_COLORS[nodeScheme(node)].surface,
-				).CGColor
 			}
 		}
+
+		syncStackLayout(node)
+
+		syncEdgeInsets(node)
+		syncCornerRadius(node)
 	}
 
 	if (node.type === 'textfield' || node.type === 'textview') {
 		if (classes.includes('vx-input') || classes.includes('vx-textarea')) {
-			node.view!.font = fontForFamilyStyle(
-				14,
-				node.appliedFontWeight ?? 400,
-				node.appliedFontFamily,
-			)
-
+			node.classFontSize = 14
 			node.colorSlot = 'text'
 			node.view!.drawsBackground = false
 			if (node.type === 'textfield') {
@@ -2160,6 +2630,8 @@ function applyClassName(node: ElementNode, value: any) {
 				node.view!.textContainerInset = { width: 0, height: 0 }
 			}
 		}
+
+		syncNodeFont(node)
 	}
 
 	applyThemeColors(node)
@@ -2174,7 +2646,7 @@ function applyClassName(node: ElementNode, value: any) {
 	}
 
 	if (node.parent) {
-		setStackChildPriorities(node.parent, node)
+		queueLayoutReconcile(node.container, node.parent)
 	}
 
 	updateStackDistribution(node)
@@ -2192,6 +2664,38 @@ function textContent(node: ElementNode): string {
 	return node.children.map(textContent).join('')
 }
 
+// Keep the native value intact: AppKit truncates only when drawing in the frame.
+function syncLabelOverflow(node: ElementNode) {
+	const { maxLines, whiteSpace, textOverflow } = node.props
+	if (whiteSpace != null && !['normal', 'nowrap'].includes(whiteSpace)) {
+		throw new Error('[macos-host] label whiteSpace supports only normal and nowrap')
+	}
+
+	if (textOverflow != null && !['clip', 'ellipsis'].includes(textOverflow)) {
+		throw new Error('[macos-host] label textOverflow supports only clip and ellipsis')
+	}
+
+	if (maxLines != null && (!Number.isInteger(maxLines) || maxLines < 0)) {
+		throw new Error('[macos-host] label maxLines must be a non-negative integer')
+	}
+
+	const singleLine = whiteSpace === 'nowrap' || maxLines === 1
+	const view = node.view as NSTextField
+
+	view.maximumNumberOfLines = singleLine ? 1 : (maxLines ?? 0)
+	view.cell.wraps = !singleLine
+	view.cell.scrollable = false
+	view.cell.usesSingleLineMode = singleLine
+	view.cell.lineBreakMode = singleLine
+		? textOverflow === 'ellipsis'
+			? NSLineBreakMode.TruncatingTail
+			: NSLineBreakMode.Clipping
+		: NSLineBreakMode.WordWrapping
+
+	view.cell.truncatesLastVisibleLine = !singleLine && textOverflow === 'ellipsis'
+	view.invalidateIntrinsicContentSize()
+}
+
 function setLabelText(node: ElementNode, text: any) {
 	const lineHeight = Number(node.props?.style?.lineHeight)
 	if (!Number.isFinite(lineHeight) || lineHeight <= 0) {
@@ -2200,6 +2704,7 @@ function setLabelText(node: ElementNode, text: any) {
 	}
 
 	const paragraphStyle = NSMutableParagraphStyle.alloc().init()
+	paragraphStyle.lineBreakMode = (node.view as NSTextField).cell.lineBreakMode
 	paragraphStyle.minimumLineHeight = lineHeight
 	paragraphStyle.maximumLineHeight = lineHeight
 	node.view!.attributedStringValue = NSAttributedString.alloc().initWithStringAttributes(text, {
@@ -2233,7 +2738,7 @@ function setAction(node: ElementNode, value: any) {
 		actionIdsByView.set(node.view!, node.actionId)
 		actionHandlers.set(node.actionId, null)
 		node.view!.addGestureRecognizer(
-			NSClickGestureRecognizer.alloc().initWithTargetAction(buttonActionTarget, 'viewPressed'),
+			NSClickGestureRecognizer.alloc().initWithTargetAction(buttonActionTarget, 'viewPressed:'),
 		)
 	}
 
@@ -2255,7 +2760,7 @@ function setPanAction(node: ElementNode, value: any) {
 	if (typeof value === 'function' && !node.panGestureRecognizer) {
 		node.panGestureRecognizer = NSPanGestureRecognizer.alloc().initWithTargetAction(
 			buttonActionTarget,
-			'viewPanned',
+			'viewPanned:',
 		)
 
 		node.view!.addGestureRecognizer(node.panGestureRecognizer)
@@ -2294,6 +2799,35 @@ function setControlAction(node: ElementNode, value: any, readValue: () => any) {
 	)
 }
 
+/** Return-key submission for single-line fields, invoked by the field's
+ *  target/action — kept distinct from per-edit `onTextChange`. */
+function setTextSubmitAction(node: ElementNode, value: any) {
+	node.submitHandler =
+		typeof value === 'function'
+			? () => {
+					try {
+						node.container.root!.eventScope('discrete', value)
+					} catch (error) {
+						console.error('[macos-event] text submit handler failed', error)
+					}
+				}
+			: null
+}
+
+/** `isEnabled`/`editable` → AppKit state. Disabled fields reject edits and
+ *  selection; read-only fields stay selectable so text can be copied. */
+function syncTextControlState(node: ElementNode) {
+	const enabled = node.props.isEnabled !== false && node.props.enabled !== false
+	const editable = enabled && node.props.editable !== false
+	const view = node.view!
+	if (node.type === 'textfield') {
+		view.enabled = enabled
+	}
+
+	view.editable = editable
+	view.selectable = editable || enabled
+}
+
 function applyAccessibility(node: ElementNode, name: string, value: any) {
 	if (node.type === 'flexboxlayout' && node.actionId !== undefined) {
 		const props = stackAccessibilityPropsByView.get(node.view!) ?? {}
@@ -2310,6 +2844,20 @@ function applyAccessibility(node: ElementNode, name: string, value: any) {
 	if (node.type === 'label' && name === 'accessibilityLabel') {
 		node.view!.setAccessibilityLabel?.(String(value ?? ''))
 	}
+
+	if (node.type === 'textfield' || node.type === 'textview') {
+		if (name === 'accessibilityLabel') {
+			node.view!.setAccessibilityLabel?.(String(value ?? ''))
+		} else if (name === 'accessibilityHint') {
+			node.view!.setAccessibilityHint?.(String(value ?? ''))
+		} else if (name === 'accessible') {
+			node.view!.setAccessibilityElement?.(value !== false)
+		} else if (name === 'accessibilityState' && node.type === 'textview') {
+			// NSTextField reports AX enabled through its `enabled` flag;
+			// NSTextView has no enabled state, so it is mirrored here.
+			node.view!.setAccessibilityEnabled?.(value?.disabled !== true)
+		}
+	}
 }
 
 function applyProps(node: ElementNode, props: PropBag) {
@@ -2327,7 +2875,20 @@ function applyProps(node: ElementNode, props: PropBag) {
 		return
 	}
 
+	const layoutChildProps: Record<string, readonly string[]> = {
+		absolutelayout: ['left', 'top', 'right', 'bottom'],
+		gridlayout: ['row', 'col', 'rowSpan', 'colSpan', 'horizontalAlignment', 'verticalAlignment'],
+	}
+
 	for (const [name, value] of Object.entries(props)) {
+		if (node.parent && layoutChildProps[node.parent.type]?.includes(name)) {
+			continue
+		}
+
+		if ((node.type === 'flexboxlayout' || node.type === 'stack') && isStackLayoutInput(name)) {
+			continue
+		}
+
 		if (name === 'onLayoutChanged') {
 			setLayoutAction(node, value)
 			continue
@@ -2336,7 +2897,7 @@ function applyProps(node: ElementNode, props: PropBag) {
 		switch (node.type) {
 			case 'stack':
 				if (name === 'spacing') {
-					node.view!.spacing = Number(value ?? 0)
+					syncStackLayout(node)
 				} else if (name === 'style') {
 					applyStyle(node, value)
 				} else if (name === 'className') {
@@ -2349,33 +2910,12 @@ function applyProps(node: ElementNode, props: PropBag) {
 
 				break
 			case 'flexboxlayout':
-				if (name === 'gap') {
-					node.view!.spacing = Number(value ?? 0)
-				} else if (name === 'spacing') {
-					node.view!.spacing = Number(value ?? 0)
-				} else if (name === 'flexDirection') {
-					node.view!.orientation =
-						value === 'row'
-							? NSUserInterfaceLayoutOrientation.Horizontal
-							: NSUserInterfaceLayoutOrientation.Vertical
-
-					node.view!.distribution = NSStackViewDistribution.GravityAreas
-					node.view!.alignment = stackAlignmentAttribute(node.view, stackAlignItems(node))
-					moveStackChildren(node)
-					updateCrossAxisConstraints(node)
-				} else if (name === 'alignItems') {
-					node.view!.alignment = stackAlignmentAttribute(node.view, stackAlignItems(node))
-					updateCrossAxisConstraints(node)
-				} else if (name === 'justifyContent') {
-					node.view!.distribution = NSStackViewDistribution.GravityAreas
-					moveStackChildren(node)
+				if (name === 'spacing') {
+					syncStackLayout(node)
 				} else if (name === 'style') {
 					applyStyle(node, value)
 				} else if (name === 'className') {
 					applyClassName(node, value)
-					moveStackChildren(node)
-					node.view!.alignment = stackAlignmentAttribute(node.view, stackAlignItems(node))
-					updateCrossAxisConstraints(node)
 				} else if (name === 'id') {
 					continue
 				} else if (name === 'onTap') {
@@ -2397,18 +2937,10 @@ function applyProps(node: ElementNode, props: PropBag) {
 						'alignItems',
 						'justifyContent',
 						'flexWrap',
-						'row',
-						'col',
-						'rowSpan',
-						'colSpan',
-						'left',
-						'top',
 						'flexGrow',
 						'flexShrink',
 						'alignSelf',
 						'order',
-						'horizontalAlignment',
-						'verticalAlignment',
 					].includes(name)
 				) {
 					continue
@@ -2439,7 +2971,7 @@ function applyProps(node: ElementNode, props: PropBag) {
 				} else if (name === 'accessible' || name.startsWith('accessibility')) {
 					applyAccessibility(node, name, value)
 				} else if (['rows', 'columns'].includes(name)) {
-					layoutGridChildren(node)
+					queueLayoutReconcile(node.container, node)
 				} else {
 					console.warn('[macos-host] ignored gridlayout prop ' + name)
 				}
@@ -2465,11 +2997,8 @@ function applyProps(node: ElementNode, props: PropBag) {
 				if (name === 'text') {
 					setLabelText(node, String(value ?? ''))
 				} else if (name === 'fontSize') {
-					node.view!.font = fontForFamilyStyle(
-						Number(value ?? 16),
-						node.appliedFontWeight ?? 400,
-						node.appliedFontFamily,
-					)
+					node.propFontSize = Number(value ?? 16)
+					syncNodeFont(node)
 				} else if (name === 'style') {
 					applyStyle(node, value)
 					syncText(node)
@@ -2477,9 +3006,9 @@ function applyProps(node: ElementNode, props: PropBag) {
 					applyClassName(node, value)
 				} else if (name === 'id') {
 					continue
-				} else if (['maxLines', 'whiteSpace', 'textOverflow', 'accessible'].includes(name)) {
+				} else if (['maxLines', 'whiteSpace', 'textOverflow'].includes(name)) {
 					continue
-				} else if (name.startsWith('accessibility')) {
+				} else if (name === 'accessible' || name.startsWith('accessibility')) {
 					applyAccessibility(node, name, value)
 				} else if (name.startsWith('on') && value == null) {
 					continue
@@ -2561,6 +3090,30 @@ function applyProps(node: ElementNode, props: PropBag) {
 					setControlAction(node, value, () =>
 						String(node.type === 'textview' ? node.view!.string : (node.view!.stringValue ?? '')),
 					)
+				} else if (name === 'onSubmit') {
+					if (node.type === 'textfield') {
+						setTextSubmitAction(node, value)
+					} else if (typeof value === 'function') {
+						console.warn('[macos-host] onSubmit is unsupported on multiline textview')
+					}
+				} else if (name === 'editable' || name === 'isEnabled' || name === 'enabled') {
+					syncTextControlState(node)
+				} else if (name === 'secure') {
+					// The native class is chosen in makeTextField; a secure change
+					// would require a new view, so it is rejected rather than
+					// silently downgraded to plain text.
+					if (node.type !== 'textfield') {
+						if (value) {
+							console.warn(
+								'[macos-host] secure is unsupported on <' + node.type + '>; rendering plain text',
+							)
+						}
+					} else if (!!value !== node.secure) {
+						console.warn(
+							'[macos-host] changing "secure" after mount is unsupported; the field keeps its initial secure=' +
+								node.secure,
+						)
+					}
 				} else if (name === 'style') {
 					applyStyle(node, value)
 				} else if (name === 'className') {
@@ -2569,21 +3122,11 @@ function applyProps(node: ElementNode, props: PropBag) {
 					continue
 				} else if (name === 'rows' && node.type === 'textview') {
 					continue
-				} else if (name.startsWith('accessibility')) {
+				} else if (name === 'accessible' || name.startsWith('accessibility')) {
 					applyAccessibility(node, name, value)
 				} else if (name.startsWith('on') && value == null) {
 					continue
-				} else if (
-					[
-						'editable',
-						'enabled',
-						'secure',
-						'keyboardType',
-						'returnKeyType',
-						'autoGrow',
-						'maxRows',
-					].includes(name)
-				) {
+				} else if (['keyboardType', 'returnKeyType', 'autoGrow', 'maxRows'].includes(name)) {
 					continue
 				} else {
 					console.warn('[macos-host] ignored text control prop ' + name)
@@ -2642,7 +3185,7 @@ function applyProps(node: ElementNode, props: PropBag) {
 				break
 			case 'image':
 				if (name === 'src') {
-					node.view!.image = loadImage(value)
+					updateImage(node.view as NSImageView, value)
 				} else if (name === 'style') {
 					applyStyle(node, value)
 				} else if (name === 'className' || name === 'id' || name === 'alt') {
@@ -2658,6 +3201,13 @@ function applyProps(node: ElementNode, props: PropBag) {
 		}
 	}
 
+	if (
+		(node.type === 'flexboxlayout' || node.type === 'stack') &&
+		Object.keys(props).some(isStackLayoutInput)
+	) {
+		syncStackLayout(node)
+	}
+
 	if (node.type === 'webview') {
 		updateWebView(node, props, (height) => {
 			node.props.style = { ...node.props.style, height }
@@ -2670,8 +3220,17 @@ function applyProps(node: ElementNode, props: PropBag) {
 	}
 
 	if (node.type === 'label') {
+		syncLabelOverflow(node)
+		syncText(node)
 		const style = node.props.style ?? {}
-		if (style.lineHeight == null && style.height == null) {
+		if (
+			style.height == null &&
+			node.props.maxLines != null &&
+			node.props.maxLines !== 1 &&
+			node.props.whiteSpace !== 'nowrap'
+		) {
+			setSizeConstraint(node, 'height', undefined)
+		} else if (style.lineHeight == null && style.height == null) {
 			const size = Number(node.view!.font?.pointSize ?? 16)
 			const height =
 				style.fontSize == null && node.headingDefaultHeight != null
@@ -2698,14 +3257,10 @@ function applyProps(node: ElementNode, props: PropBag) {
 		}
 	}
 
-	if (node.type === 'gridlayout') {
-		layoutGridChildren(node)
-	} else if (node.type === 'absolutelayout') {
-		layoutAbsoluteChildren(node)
-	} else if (node.parent?.type === 'gridlayout') {
-		layoutGridChildren(node.parent)
-	} else if (node.parent?.type === 'absolutelayout') {
-		layoutAbsoluteChildren(node.parent)
+	if (node.type === 'gridlayout' || node.type === 'absolutelayout') {
+		queueLayoutReconcile(node.container, node)
+	} else if (node.parent?.type === 'gridlayout' || node.parent?.type === 'absolutelayout') {
+		queueLayoutReconcile(node.container, node.parent)
 	}
 }
 
@@ -2723,6 +3278,7 @@ function detach(container: RootContainer, node: ElementNode) {
 
 	node.crossAxisConstraint = null
 	deactivateSizeConstraints(node)
+	releasePlacementPins(node)
 	if (node.view) {
 		const parentView = previousParent?.childHost ?? previousParent?.view
 		if (parentView?.removeArrangedSubview) {
@@ -2732,20 +3288,53 @@ function detach(container: RootContainer, node: ElementNode) {
 		arrangedView(node).removeFromSuperview()
 	}
 
-	if (previousParent?.type === 'gridlayout') {
-		layoutGridChildren(previousParent)
+	queueLayoutReconcile(container, previousParent)
+	syncText(previousParent)
+	node.parent = null
+}
+
+/** Mark a parent for one sibling-wide reconcile after the batch's commands.
+ *  Insert/remove/update each used to rescan siblings, rebuild distribution,
+ *  and recreate every child's cross-axis constraint on the spot — n inserts
+ *  into one stack made that quadratic. Structural commands queue their dirty
+ *  parents here; `prepareBatch.apply` drains the set once at the end. Outside
+ *  a batch (no `layoutDirty` set) the reconcile runs immediately. */
+function queueLayoutReconcile(container: RootContainer, parent: ElementNode | null | undefined) {
+	if (!parent) {
+		return
 	}
 
-	if (previousParent?.type === 'absolutelayout') {
-		layoutAbsoluteChildren(previousParent)
+	const pending = container?.layoutDirty
+	if (pending) {
+		pending.add(parent)
+		return
 	}
 
-	if (previousParent) {
-		updateStackDistribution(previousParent)
+	reconcileLayoutParent(parent)
+}
+
+function reconcileLayoutParent(parent: ElementNode) {
+	if (parent.type === 'gridlayout') {
+		layoutGridChildren(parent)
+		return
 	}
 
-	syncText(previousParent)
-	node.parent = null
+	if (parent.type === 'absolutelayout') {
+		layoutAbsoluteChildren(parent)
+		return
+	}
+
+	const stack = parent.childHost ?? parent.view
+	if (typeof stack?.addViewInGravity !== 'function') {
+		return
+	}
+
+	for (const child of parent.children) {
+		setStackChildPriorities(parent, child)
+	}
+
+	updateStackDistribution(parent)
+	updateCrossAxisConstraints(parent)
 }
 
 function insert(
@@ -2754,62 +3343,54 @@ function insert(
 	node: ElementNode,
 	beforeId: number | null,
 ) {
-	detach(container, node)
+	// Validate before detaching — a rejected insert must not leave the node
+	// orphaned from its current parent.
 	const parent = (parentId === null ? null : container.nodes.get(parentId)) ?? null
 	if (parentId !== null && !parent) {
 		throw new Error('Unknown AppKit parent ' + parentId)
 	}
 
-	if (
-		parent &&
-		node.view &&
-		parent.type !== 'stack' &&
-		parent.type !== 'flexboxlayout' &&
-		parent.type !== 'scrollview' &&
-		parent.type !== 'gridlayout' &&
-		parent.type !== 'absolutelayout'
-	) {
+	if (parent && node.view && !VIEW_PARENT_TYPES.has(parent.type)) {
 		throw new Error('AppKit <' + parent.type + '> cannot contain child views')
 	}
 
+	const parentView = parent?.childHost ?? parent?.view ?? container.hostView
+	if (node.view && !parentView) {
+		throw new Error('AppKit host has no parent view for node ' + node.id)
+	}
+
+	detach(container, node)
 	const siblings = parent ? parent.children : container.children
 	const beforeIndex = beforeId === null ? -1 : siblings.findIndex((child) => child.id === beforeId)
 	const index = beforeIndex < 0 ? siblings.length : beforeIndex
 	siblings.splice(index, 0, node)
 	node.parent = parent
 	if (node.view) {
-		const parentView = parent?.childHost ?? parent?.view ?? container.hostView
-		if (!parentView) {
-			throw new Error('AppKit host has no parent view for node ' + node.id)
-		}
-
 		if (parent) {
 			if (parent.type === 'gridlayout') {
 				parentView.addSubview(node.view)
 				node.view.translatesAutoresizingMaskIntoConstraints = false
 				deactivateSizeConstraints(node)
-				layoutGridChildren(parent)
+				queueLayoutReconcile(container, parent)
 			} else if (parent.type === 'absolutelayout') {
 				parentView.addSubview(node.view)
 				node.view.translatesAutoresizingMaskIntoConstraints = false
 				deactivateSizeConstraints(node)
-				layoutAbsoluteChildren(parent)
+				queueLayoutReconcile(container, parent)
 			} else {
 				if (marginInsetsOf(node)) {
 					makeMarginHost(node)
+					setLayoutAction(node, node.props?.onLayoutChanged)
 				}
 
 				// AppKit insertion indices are local to a gravity area. Honor the
 				// renderer's before edge instead of appending moved keyed rows.
 				const gravity = stackGravity(parent, node)
-				const arrangedIndex = siblings
-					.slice(0, index)
-					.filter((child) => child.view && stackGravity(parent, child) === gravity).length
+				const arrangedIndex = gravityInsertIndex(parent, node, gravity)
 
 				parentView.insertViewAtIndexInGravity(arrangedView(node), arrangedIndex, gravity)
 				applySizeConstraints(node)
-				setStackChildPriorities(parent, node)
-				updateCrossAxisConstraints(parent)
+				queueLayoutReconcile(container, parent)
 			}
 		} else {
 			parentView.addSubview(node.view)
@@ -2844,6 +3425,7 @@ function remove(container: RootContainer, parentId: number | null, node: Element
 
 	node.crossAxisConstraint = null
 	deactivateSizeConstraints(node)
+	releasePlacementPins(node)
 	if (node.view) {
 		const parentView = expectedParent?.childHost ?? expectedParent?.view
 		if (parentView?.removeArrangedSubview) {
@@ -2854,31 +3436,27 @@ function remove(container: RootContainer, parentId: number | null, node: Element
 		node.marginHost?.removeFromSuperview()
 		node.marginHost = null
 		node.marginConstraints = null
+		setLayoutAction(node, node.props?.onLayoutChanged)
 	}
 
-	if (expectedParent?.type === 'gridlayout') {
-		layoutGridChildren(expectedParent)
-	}
-
-	if (expectedParent?.type === 'absolutelayout') {
-		layoutAbsoluteChildren(expectedParent)
-	}
-
-	if (expectedParent) {
-		updateStackDistribution(expectedParent)
-	}
-
+	queueLayoutReconcile(container, expectedParent)
 	node.parent = null
 	syncText(expectedParent)
 }
 
 function destroy(node: ElementNode) {
-	if (node.type === 'webview') {
-		disposeWebView(node.view!)
+	// Nodes destroyed by a failed makeNode may have a null view — every
+	// branch below must tolerate partial construction.
+	if (node.type === 'webview' && node.view) {
+		disposeWebView(node.view as WKWebView)
+	}
+
+	if (node.type === 'image' && node.view) {
+		disposeImage(node.view as NSImageView)
 	}
 
-	if (node.type === 'scrollview' && node.scrollObserverInstalled) {
-		const clipView = node.view!.contentView
+	if (node.type === 'scrollview' && node.scrollObserverInstalled && node.view) {
+		const clipView = node.view.contentView
 		scrollHandlers.delete(clipView)
 		NSNotificationCenter.defaultCenter.removeObserver(node.scrollObserver)
 		node.scrollObserver = null
@@ -2890,6 +3468,9 @@ function destroy(node: ElementNode) {
 		node.layoutObserver = null
 	}
 
+	layoutHandlers.delete(node.layoutObservedView)
+	node.layoutObservedView = null
+
 	if (node.actionId !== undefined) {
 		actionHandlers.delete(node.actionId)
 		accessibilityLabels.delete(node.actionId)
@@ -2897,18 +3478,127 @@ function destroy(node: ElementNode) {
 	}
 }
 
+/** Pre-flight a whole batch without mutating, so a deterministic failure —
+ *  bad props, unknown nodes, illegal parents, unsupported ops — rejects the
+ *  batch before any command applies. Residual mid-apply failures are then
+ *  limited to unexpected native errors, and each command unwinds itself. */
+function validateBatch(container: RootContainer, commands: readonly UniversalHostCommand[]) {
+	// Ids created by this batch are not in container.nodes yet — track them so
+	// later commands validate against the intended tree.
+	const pending = new Map<number, { type: string; props: PropBag }>()
+	const destroyed = new Set<number>()
+	const known = (id: number): { type: string; props: PropBag } | undefined =>
+		pending.get(id) ?? (destroyed.has(id) ? undefined : container.nodes.get(id))
+
+	for (const command of commands) {
+		switch (command.op) {
+			case 'create':
+				assertSupportedType(command.type)
+				validateNodeProps(command.type, command.props)
+				pending.set(command.id, { type: command.type, props: command.props })
+				destroyed.delete(command.id)
+				continue
+			case 'recreate': {
+				const entry = known(command.id)
+				if (!entry) {
+					throw new Error('Unknown AppKit node ' + command.id)
+				}
+
+				assertSupportedType(command.type)
+				validateNodeProps(command.type, command.props)
+				const existing = container.nodes.get(command.id)
+				if (
+					existing?.parent &&
+					typeHasView(command.type) &&
+					!VIEW_PARENT_TYPES.has(existing.parent.type)
+				) {
+					throw new Error('AppKit <' + existing.parent.type + '> cannot contain child views')
+				}
+
+				pending.set(command.id, { type: command.type, props: command.props })
+				continue
+			}
+			case 'update': {
+				const entry = known(command.id)
+				if (!entry) {
+					throw new Error('Unknown AppKit node ' + command.id)
+				}
+
+				validateNodeProps(entry.type, command.props, entry.props)
+				continue
+			}
+			case 'insert':
+			case 'move': {
+				const entry = known(command.id)
+				if (!entry) {
+					throw new Error('Unknown AppKit node ' + command.id)
+				}
+
+				const parentId = command.parent as number | null
+				if (parentId !== null) {
+					const parent = known(parentId)
+					if (!parent) {
+						throw new Error('Unknown AppKit parent ' + parentId)
+					}
+
+					if (typeHasView(entry.type) && !VIEW_PARENT_TYPES.has(parent.type)) {
+						throw new Error('AppKit <' + parent.type + '> cannot contain child views')
+					}
+				}
+
+				continue
+			}
+			case 'destroy':
+				pending.delete(command.id)
+				destroyed.add(command.id)
+				continue
+			case 'remove':
+			case 'visibility':
+			case 'ensure-public-instance':
+				continue
+			default:
+				throw new Error('AppKit spike does not support host command ' + command.op)
+		}
+	}
+}
+
 function applyCommand(container: RootContainer, command: UniversalHostCommand) {
 	switch (command.op) {
-		case 'create':
+		case 'create': {
+			// A retried batch can re-create an id the earlier attempt already
+			// registered — release the previous node instead of orphaning it.
+			const existing = container.nodes.get(command.id)
+			if (existing) {
+				detach(container, existing)
+				destroy(existing)
+			}
+
 			container.nodes.set(command.id, makeNode(container, command.id, command.type, command.props))
 			return
+		}
 		case 'update': {
 			const node = container.nodes.get(command.id)
 			if (!node) {
 				throw new Error('Unknown AppKit node ' + command.id)
 			}
 
-			applyProps(node, command.props)
+			// node.props records what applied — restore it when a prop throws
+			// mid-update so the bookkeeping doesn't claim unapplied props.
+			const previousProps = node.props
+			try {
+				// Host updates carry the complete current prop bag. Clear omitted
+				// label modes before merging so spread removals restore defaults.
+				applyProps(
+					node,
+					node.type === 'label'
+						? { maxLines: undefined, whiteSpace: undefined, textOverflow: undefined, ...command.props }
+						: command.props,
+				)
+			} catch (error) {
+				node.props = previousProps
+				throw error
+			}
+
 			return
 		}
 		case 'insert':
@@ -2954,8 +3644,14 @@ function applyCommand(container: RootContainer, command: UniversalHostCommand) {
 				throw new Error('Unknown AppKit node ' + command.id)
 			}
 
-			const replacement = makeNode(container, command.id, command.type, command.props)
 			const parent = node.parent
+			if (parent && typeHasView(command.type) && !VIEW_PARENT_TYPES.has(parent.type)) {
+				// insert would reject the replacement after the original was
+				// already removed and destroyed — fail while it is intact.
+				throw new Error('AppKit <' + parent.type + '> cannot contain child views')
+			}
+
+			const replacement = makeNode(container, command.id, command.type, command.props)
 			const siblings = parent ? parent.children : container.children
 			const index = siblings.indexOf(node)
 			const beforeId = index < 0 ? null : (siblings[index + 1]?.id ?? null)
@@ -2974,26 +3670,41 @@ const macOSDriver: UniversalHostDriver<RootContainer, any> = {
 	id: 'macos',
 	capabilities: { text: 'host' },
 	prepareBatch(container, batch) {
+		// Reject deterministic failures before any command mutates — a
+		// partially applied batch cannot be rolled back once commit() marks
+		// it accepted. Prepare acquires nothing, so abort() has no cleanup.
+		validateBatch(container, batch.commands)
 		return {
 			apply() {
-				for (const command of batch.commands) {
-					try {
-						applyCommand(container, command)
-					} catch (error) {
-						// The universal root can swallow a mid-batch failure when it
-						// retries or aborts the attempt — log it here so an
-						// unsupported element cannot silently stall the mount.
-						console.error(
-							'[macos-host] command ' +
-								command.op +
-								' failed for <' +
-								((command as { type?: string }).type ?? '?') +
-								'> id=' +
-								('id' in command ? command.id : '?'),
-							error,
-						)
-
-						throw error
+				container.layoutDirty = new Set()
+				try {
+					for (const command of batch.commands) {
+						try {
+							applyCommand(container, command)
+						} catch (error) {
+							// The universal root can swallow a mid-batch failure when it
+							// retries or aborts the attempt — log it here so an
+							// unsupported element cannot silently stall the mount.
+							console.error(
+								'[macos-host] command ' +
+									command.op +
+									' failed for <' +
+									((command as { type?: string }).type ?? '?') +
+									'> id=' +
+									('id' in command ? command.id : '?'),
+								error,
+							)
+
+							throw error
+						}
+					}
+				} finally {
+					const dirty = container.layoutDirty
+					container.layoutDirty = null
+					if (dirty) {
+						for (const parent of dirty) {
+							reconcileLayoutParent(parent)
+						}
 					}
 				}
 			},
@@ -3747,7 +4458,7 @@ function attachContextMenu(
 
 		const menuItem = NSMenuItem.alloc().initWithTitleActionKeyEquivalent(
 			String(item?.title ?? ''),
-			'menuItemSelected',
+			'menuItemSelected:',
 			'',
 		)
 
@@ -3880,7 +4591,7 @@ function attachDatePicker(view: NSView, options: PropBag, onChange: (event: any)
 	const actionId = nextActionId++
 	picker.tag = actionId
 	picker.target = buttonActionTarget
-	picker.action = 'controlChanged'
+	picker.action = 'controlChanged:'
 	actionHandlers.set(actionId, () => {
 		const date = picker.dateValue
 		const millis =
@@ -4086,10 +4797,11 @@ function presentSheet(view: NSView, options: PropBag) {
 }
 
 const appKitBridge = (globalThis.__xplatAppKit ??= {})
+installAppearanceBridge(appKitBridge)
 appKitBridge.observeHover = observeHover
 appKitBridge.showAnchoredPopup = showAnchoredPopup
 appKitBridge.showLayer = (options: PropBag) =>
-	showWindowLayer(options, {
+	showWindowLayer(options as WindowLayerOptions, {
 		createRoot: (view: NSView, anchor: NSView) =>
 			createMacOSRoot(view, { fontFamily: fontFamilyForView(anchor) }),
 		fittingSize: popupFittingSize,
@@ -4103,7 +4815,7 @@ installPresentationBridge(appKitBridge, createMacOSRoot, fontFamilyForView)
 const rootFontFamilies = new WeakMap<object, string | undefined>()
 
 function fontFamilyForView(view: NSView | undefined): string | undefined {
-	for (let current = view; current; current = current.superview) {
+	for (let current: NSView | null | undefined = view; current; current = current.superview) {
 		if (rootFontFamilies.has(current)) {
 			return rootFontFamilies.get(current)
 		}
@@ -4125,6 +4837,7 @@ export function createMacOSRoot(hostView: NSView, { fontFamily }: MacOSRootOptio
 		nodes: new Map(),
 		children: [],
 		root: null,
+		layoutDirty: null,
 	}
 
 	const root = createUniversalRoot(container, macOSDriver, {
@@ -4301,7 +5014,7 @@ export function createMacOSRoot(hostView: NSView, { fontFamily }: MacOSRootOptio
 					try {
 						// Row box relative to the clip's top edge, computed in doc
 						// coordinates so it stays docH-independent like `offset`.
-						const inDoc = child.view.superview.convertRectToView(child.view.frame, doc)
+						const inDoc = child.view.superview!.convertRectToView(child.view.frame, doc)
 						const h = Number(inDoc.size.height)
 						const y = Number(inDoc.origin.y)
 						const top = flipped ? y - originY : originY + clipH - y - h
@@ -4365,7 +5078,18 @@ export function createMacOSRoot(hostView: NSView, { fontFamily }: MacOSRootOptio
 					throw new Error('No AppKit node with id ' + id)
 				}
 
-				applyStyle(node, { [name]: value })
+				// Single-key writes merge into the node's style bag — applyStyle
+				// diffs against the last applied bag, so a partial object here
+				// would reset every other style.
+				const style = { ...node.props?.style }
+				if (value == null) {
+					delete style[name]
+				} else {
+					style[name] = value
+				}
+
+				node.props = { ...node.props, style }
+				applyStyle(node, style)
 				container.hostView.layoutSubtreeIfNeeded?.()
 				return this.frameInWindow(id)
 			},
@@ -4586,7 +5310,7 @@ export function createMacOSRoot(hostView: NSView, { fontFamily }: MacOSRootOptio
 					buttonActionTarget.textDidChange({ object: node.view } as NSNotification)
 				} else {
 					node.view!.stringValue = String(value)
-					buttonActionTarget.controlChanged(node.view!)
+					buttonActionTarget.controlTextDidChange({ object: node.view } as NSNotification)
 				}
 			},
 			pressAccessibilityLabel(label: string) {