@octane-xplat/macos-renderer 0.0.1 → 0.11.0

package/src/intrinsics.d.ts

@@ -0,0 +1,62 @@
+export namespace JSX {
+	export type Element = unknown
+
+	export interface IntrinsicAttributes {
+		key?: string | number
+	}
+
+	export interface HostProps {
+		id?: string
+		key?: string | number
+		ref?: unknown
+		className?: string
+		style?: Record<string, unknown>
+		children?: unknown
+		flexGrow?: number
+		textAlignment?: string
+		onTap?: (event?: any) => void
+		accessibilityLabel?: string
+		accessibilityRole?: string
+		accessibilityHint?: string
+		accessibilityValue?: string
+		accessibilityState?: Record<string, unknown>
+		accessibilityLiveRegion?: 'none' | 'polite' | 'assertive'
+	}
+
+	export interface IntrinsicElements {
+		stack: HostProps & {
+			children?: unknown
+			spacing?: number
+		}
+		label: HostProps & {
+			text?: string | number
+			fontSize?: number
+			whiteSpace?: string
+			maxLines?: number
+			textOverflow?: string
+		}
+		button: HostProps & {
+			title?: string
+			enabled?: boolean
+			onPress?: () => void
+		}
+		flexboxlayout: Record<string, unknown>
+		gridlayout: Record<string, unknown>
+		absolutelayout: Record<string, unknown>
+		stacklayout: Record<string, unknown>
+		rootlayout: Record<string, unknown>
+		scrollview: Record<string, unknown>
+		textfield: Record<string, unknown>
+		textview: Record<string, unknown>
+		image: Record<string, unknown>
+		span: Record<string, unknown>
+		formattedstring: Record<string, unknown>
+		pager: Record<string, unknown>
+		webview: Record<string, unknown>
+		cameraplus: Record<string, unknown>
+		xplatvideo: Record<string, unknown>
+		canvasview: Record<string, unknown>
+		svgview: Record<string, unknown>
+		[key: string]: any
+	}
+}

package/src/jsx-runtime.d.ts

@@ -0,0 +1,7 @@
+export { JSX } from './intrinsics.js'
+
+import type { JSX } from './intrinsics.js'
+
+export declare function jsx(type: unknown, props: unknown, key?: unknown): JSX.Element
+export declare function jsxs(type: unknown, props: unknown, key?: unknown): JSX.Element
+export declare function Fragment(props: { children?: JSX.Element }): JSX.Element

package/src/layer.d.mts

@@ -0,0 +1,17 @@
+/** Internal bridge for the self-drawn window layer; native objects are supplied
+ * by the renderer or test host. Coordinates use top-left window points. */
+export function showWindowLayer(
+	options: Record<string, any>,
+	driver: {
+		createRoot: (view: any, anchor: any) => any
+		fittingSize: (view: any) => { width: number; height: number } | null
+		View?: any
+		Event?: any
+		Center?: any
+	},
+): {
+	contentView: any
+	closed: boolean
+	update(props: Record<string, any>, positioning?: Record<string, any>): void
+	close(): void
+} | null

package/src/layer.mjs

@@ -0,0 +1,221 @@
+const notificationOwners = new WeakMap()
+
+function ownNotifications(view) {
+	let record = notificationOwners.get(view)
+	if (!record) {
+		record = {
+			count: 0,
+			frame: view.postsFrameChangedNotifications,
+			bounds: view.postsBoundsChangedNotifications,
+		}
+
+		notificationOwners.set(view, record)
+		view.postsFrameChangedNotifications = true
+		view.postsBoundsChangedNotifications = true
+	}
+
+	record.count++
+	return () => {
+		if (--record.count) {
+			return
+		}
+
+		notificationOwners.delete(view)
+		if (view.postsFrameChangedNotifications === true) {
+			view.postsFrameChangedNotifications = record.frame
+		}
+
+		if (view.postsBoundsChangedNotifications === true) {
+			view.postsBoundsChangedNotifications = record.bounds
+		}
+	}
+}
+
+/** A self-drawn in-window layer. Position callback uses top-left window points.
+ * AppKit popovers remain available for platform-authentic consumers. */
+export function showWindowLayer(
+	options,
+	{
+		createRoot,
+		fittingSize,
+		View = globalThis.NSView,
+		Event = globalThis.NSEvent,
+		Center = globalThis.NSNotificationCenter,
+	},
+) {
+	const anchor = options.anchor
+	const container = anchor?.window?.contentView
+	if (
+		!container ||
+		!View ||
+		!anchor.convertRectToView ||
+		(options.lightDismiss &&
+			typeof Event?.addLocalMonitorForEventsMatchingMaskHandler !== 'function')
+	) {
+		return null
+	}
+
+	const contentView = View.alloc().initWithFrame({
+		origin: { x: 0, y: 0 },
+		size: { width: 1, height: 1 },
+	})
+
+	const root = createRoot(contentView, anchor)
+	let surface = options.props ?? {}
+	let positioning = options
+	let monitor = null
+	const observers = []
+	const releases = []
+	const updatePosition = () => {
+		if (layer.closed) {
+			return
+		}
+
+		const viewport = container.bounds
+		const height = viewport.size.height
+		const rect = anchor.convertRectToView(anchor.bounds, container)
+		const flipped = !!container.isFlipped
+		const bounds = {
+			left: rect.origin.x - viewport.origin.x,
+			top: flipped
+				? rect.origin.y - viewport.origin.y
+				: height - (rect.origin.y - viewport.origin.y) - rect.size.height,
+			width: rect.size.width,
+			height: rect.size.height,
+		}
+
+		const size = fittingSize(contentView) ?? { width: 1, height: 1 }
+		const point = positioning.position(bounds, size, {
+			left: 0,
+			top: 0,
+			width: viewport.size.width,
+			height,
+		})
+
+		contentView.frame = {
+			origin: {
+				x: viewport.origin.x + point.left,
+				y: viewport.origin.y + (flipped ? point.top : height - point.top - size.height),
+			},
+			size,
+		}
+	}
+
+	const layer = {
+		contentView,
+		closed: false,
+		update(props, nextPositioning) {
+			if (layer.closed) {
+				return
+			}
+
+			surface = props
+			if (
+				nextPositioning?.lightDismiss &&
+				typeof Event?.addLocalMonitorForEventsMatchingMaskHandler !== 'function'
+			) {
+				throw new TypeError('AppKit lightDismiss requires a local mouse monitor')
+			}
+
+			if (nextPositioning) {
+				positioning = { ...positioning, ...nextPositioning }
+			}
+
+			root.render(options.component, surface)
+			updatePosition()
+		},
+		close() {
+			if (layer.closed) {
+				return
+			}
+
+			layer.closed = true
+			if (monitor) {
+				Event.removeMonitor(monitor)
+			}
+
+			for (const observer of observers) {
+				Center.defaultCenter.removeObserver(observer)
+			}
+
+			for (const release of releases) {
+				release()
+			}
+
+			try {
+				root.unmount()
+			} finally {
+				contentView.removeFromSuperview()
+			}
+		},
+	}
+
+	try {
+		container.addSubview(contentView)
+		layer.update(surface)
+		// Reposition for window resize, anchor movement and enclosing scroll views.
+		for (let view = anchor; view; view = view.superview) {
+			releases.push(ownNotifications(view))
+			for (const name of [
+				'NSViewFrameDidChangeNotification',
+				'NSViewBoundsDidChangeNotification',
+			]) {
+				observers.push(
+					Center.defaultCenter.addObserverForNameObjectQueueUsingBlock(
+						name,
+						view,
+						null,
+						updatePosition,
+					),
+				)
+			}
+		}
+
+		observers.push(
+			Center.defaultCenter.addObserverForNameObjectQueueUsingBlock(
+				'NSWindowWillCloseNotification',
+				anchor.window,
+				null,
+				() => layer.close(),
+			),
+		)
+
+		observers.push(
+			Center.defaultCenter.addObserverForNameObjectQueueUsingBlock(
+				'NSWindowDidResizeNotification',
+				anchor.window,
+				null,
+				updatePosition,
+			),
+		)
+
+		if (Event?.addLocalMonitorForEventsMatchingMaskHandler) {
+			monitor = Event.addLocalMonitorForEventsMatchingMaskHandler(
+				(1 << 1) | (1 << 3) | (1 << 25),
+				(event) => {
+					if (layer.closed || !positioning.lightDismiss || event.window !== anchor.window) {
+						return event
+					}
+
+					const point = container.convertPointFromView(event.locationInWindow, null)
+					const frame = contentView.frame
+					if (
+						point.x < frame.origin.x ||
+						point.y < frame.origin.y ||
+						point.x > frame.origin.x + frame.size.width ||
+						point.y > frame.origin.y + frame.size.height
+					) {
+						options.onClose?.()
+					}
+
+					return event
+				},
+			)
+		}
+
+		return layer
+	} catch (error) {
+		layer.close()
+		throw error
+	}
+}

package/src/native-core-shim.ts

@@ -0,0 +1,47 @@
+// The shared pan leaf imports Utils eagerly, but this spike doesn't implement
+// NativeScript gestures. Fail explicitly if pan velocity is ever requested.
+export const Utils = {
+	layout: {
+		getDisplayDensity() {
+			throw new Error('NativeScript display density is unavailable in the AppKit spike')
+		},
+	},
+}
+
+// The AppKit build may resolve a shared native leaf before tree-shaking it.
+// These values keep import-time platform checks safe; components that need
+// NativeScript application services have explicit AppKit leaves or render
+// an unsupported state.
+export const Application = { ios: null, android: null, on() {}, off() {} }
+export const isAndroid = false
+export const isIOS = false
+export const AccessibilityRole = {
+	button: 'button',
+	link: 'link',
+	heading: 'heading',
+	image: 'image',
+	text: 'text',
+}
+
+// Octane's universal entry may evaluate the NativeScript driver module
+// while the AppKit renderer is selected. The AppKit host never instantiates
+// these NativeScript node classes.
+export class ActionBar {}
+export class ContentView {}
+export class FormattedString {}
+export class LayoutBase {}
+export class ListView {}
+export class Span {}
+export class TextBase {}
+export class View {}
+export const unsetValue = Symbol('unsetValue')
+
+// The AppKit spike has no display-link driver — motion's clock just needs a
+// frame-shaped timer; the host's pump runs setTimeout on the main run loop.
+export function requestAnimationFrame(callback: (time: number) => void): unknown {
+	return setTimeout(() => callback(Date.now()), 16)
+}
+
+export function cancelAnimationFrame(id: unknown) {
+	clearTimeout(id)
+}

package/src/native-escape-props.ts

@@ -0,0 +1,30 @@
+// AppKit has no NativeScript Core device globals or iOS/Android escape bags.
+export function applyEscapeProps() {}
+
+export function nativeAccessibilityRole(role: string) {
+	return role
+}
+
+export function nativeAccessibilityState(state?: {
+	disabled?: boolean
+	selected?: boolean
+	checked?: boolean
+}) {
+	if (state?.disabled) {
+		return 'disabled'
+	}
+
+	if (state?.selected) {
+		return 'selected'
+	}
+
+	if (state?.checked === true) {
+		return 'checked'
+	}
+
+	if (state?.checked === false) {
+		return 'unchecked'
+	}
+
+	return undefined
+}