@octane-xplat/macos-renderer 0.11.0 → 0.12.0

package/src/intrinsics.d.ts

@@ -27,13 +27,19 @@ export namespace JSX {
 		stack: HostProps & {
 			children?: unknown
 			spacing?: number
+			flexDirection?: 'row' | 'column'
+			gap?: number
+			rowGap?: number
+			columnGap?: number
+			alignItems?: 'start' | 'flex-start' | 'end' | 'flex-end' | 'center' | 'stretch' | 'baseline'
+			justifyContent?: 'start' | 'flex-start' | 'end' | 'flex-end' | 'center' | 'space-between'
 		}
 		label: HostProps & {
 			text?: string | number
 			fontSize?: number
-			whiteSpace?: string
+			whiteSpace?: 'normal' | 'nowrap'
 			maxLines?: number
-			textOverflow?: string
+			textOverflow?: 'clip' | 'ellipsis'
 		}
 		button: HostProps & {
 			title?: string

package/src/{layer.mjs → layer.ts}

@@ -1,6 +1,58 @@
-const notificationOwners = new WeakMap()
+/** Top-left viewport-relative rectangle, in window content points. */
+export interface WindowLayerBounds {
+	left: number
+	top: number
+	width: number
+	height: number
+}
+
+/** Top-left point resolved from a bounds rect, layer size, and viewport. */
+export interface WindowLayerPoint {
+	left: number
+	top: number
+}
+
+export interface WindowLayerOptions {
+	anchor: NSView
+	component?: any
+	props?: Record<string, any>
+	position(
+		anchor: WindowLayerBounds,
+		size: NSSize,
+		viewport: WindowLayerBounds,
+	): WindowLayerPoint
+	lightDismiss?: boolean
+	onClose?: () => void
+	[key: string]: any
+}
+
+export interface WindowLayer {
+	readonly contentView: NSView
+	closed: boolean
+	update(props: Record<string, any>, nextPositioning?: Partial<WindowLayerOptions>): void
+	close(): void
+}
+
+export interface WindowLayerDeps {
+	createRoot(contentView: NSView, anchor: NSView): {
+		render(component: any, props: Record<string, any>): unknown
+		unmount(): void
+	}
+	fittingSize(view: NSView): NSSize | null | undefined
+	View?: NSClass<NSView>
+	Event?: NSEventClass
+	Center?: NSNotificationCenterClass
+}
+
+interface NotificationRecord {
+	count: number
+	frame: boolean
+	bounds: boolean
+}
+
+const notificationOwners = new WeakMap<NSView, NotificationRecord>()
 
-function ownNotifications(view) {
+function ownNotifications(view: NSView) {
 	let record = notificationOwners.get(view)
 	if (!record) {
 		record = {
@@ -16,17 +68,17 @@ function ownNotifications(view) {
 
 	record.count++
 	return () => {
-		if (--record.count) {
+		if (--record!.count) {
 			return
 		}
 
 		notificationOwners.delete(view)
 		if (view.postsFrameChangedNotifications === true) {
-			view.postsFrameChangedNotifications = record.frame
+			view.postsFrameChangedNotifications = record!.frame
 		}
 
 		if (view.postsBoundsChangedNotifications === true) {
-			view.postsBoundsChangedNotifications = record.bounds
+			view.postsBoundsChangedNotifications = record!.bounds
 		}
 	}
 }
@@ -34,15 +86,15 @@ function ownNotifications(view) {
 /** 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,
+	options: WindowLayerOptions,
 	{
 		createRoot,
 		fittingSize,
-		View = globalThis.NSView,
-		Event = globalThis.NSEvent,
-		Center = globalThis.NSNotificationCenter,
-	},
-) {
+		View = (globalThis as any).NSView,
+		Event = (globalThis as any).NSEvent,
+		Center = (globalThis as any).NSNotificationCenter,
+	}: WindowLayerDeps,
+): WindowLayer | null {
 	const anchor = options.anchor
 	const container = anchor?.window?.contentView
 	if (
@@ -62,10 +114,10 @@ export function showWindowLayer(
 
 	const root = createRoot(contentView, anchor)
 	let surface = options.props ?? {}
-	let positioning = options
-	let monitor = null
-	const observers = []
-	const releases = []
+	let positioning: WindowLayerOptions = options
+	let monitor: any = null
+	const observers: any[] = []
+	const releases: Array<() => void> = []
 	const updatePosition = () => {
 		if (layer.closed) {
 			return
@@ -101,7 +153,7 @@ export function showWindowLayer(
 		}
 	}
 
-	const layer = {
+	const layer: WindowLayer = {
 		contentView,
 		closed: false,
 		update(props, nextPositioning) {
@@ -131,11 +183,11 @@ export function showWindowLayer(
 
 			layer.closed = true
 			if (monitor) {
-				Event.removeMonitor(monitor)
+				Event!.removeMonitor(monitor)
 			}
 
 			for (const observer of observers) {
-				Center.defaultCenter.removeObserver(observer)
+				Center!.defaultCenter.removeObserver(observer)
 			}
 
 			for (const release of releases) {
@@ -154,14 +206,14 @@ export function showWindowLayer(
 		container.addSubview(contentView)
 		layer.update(surface)
 		// Reposition for window resize, anchor movement and enclosing scroll views.
-		for (let view = anchor; view; view = view.superview) {
+		for (let view: NSView | null = anchor; view; view = view.superview) {
 			releases.push(ownNotifications(view))
 			for (const name of [
 				'NSViewFrameDidChangeNotification',
 				'NSViewBoundsDidChangeNotification',
 			]) {
 				observers.push(
-					Center.defaultCenter.addObserverForNameObjectQueueUsingBlock(
+					Center!.defaultCenter.addObserverForNameObjectQueueUsingBlock(
 						name,
 						view,
 						null,
@@ -172,7 +224,7 @@ export function showWindowLayer(
 		}
 
 		observers.push(
-			Center.defaultCenter.addObserverForNameObjectQueueUsingBlock(
+			Center!.defaultCenter.addObserverForNameObjectQueueUsingBlock(
 				'NSWindowWillCloseNotification',
 				anchor.window,
 				null,
@@ -181,7 +233,7 @@ export function showWindowLayer(
 		)
 
 		observers.push(
-			Center.defaultCenter.addObserverForNameObjectQueueUsingBlock(
+			Center!.defaultCenter.addObserverForNameObjectQueueUsingBlock(
 				'NSWindowDidResizeNotification',
 				anchor.window,
 				null,

package/src/presentation.d.mts

@@ -0,0 +1,29 @@
+import type { UniversalRoot } from 'octane/universal/native'
+
+/** Handle returned by `presentSurface`. `panel` hosts the rendered subtree
+ * inside `layer`, the full-window hit-test surface that owns dismissal. */
+export interface PresentationSurface {
+	update(options: Record<string, any>): void
+	close(reason?: string): void
+	readonly closed: boolean
+	readonly closedPromise: Promise<string | undefined>
+	panel: any
+	layer: any
+}
+
+/** Members `installPresentationBridge` assigns onto `__xplatAppKit` for
+ * renderer-hosted in-window surfaces (sheets, toasts, lightboxes). */
+export interface PresentationBridge {
+	setSurfaceAppearance?: (view: any, dark: boolean) => void
+	presentSurface?: (initial: Record<string, any>) => PresentationSurface
+	[key: string]: any
+}
+
+/** Wires the shared-surface implementation into the AppKit bridge. The
+ * renderer supplies its root factory and the inherited-font lookup; native
+ * objects flow through `any` like the layer bridge. */
+export function installPresentationBridge(
+	bridge: PresentationBridge,
+	createRoot: (hostView: any, options?: { fontFamily?: string }) => UniversalRoot,
+	fontFamilyForView: (view: any) => string | undefined,
+): void

package/src/{presentation.mjs → presentation.ts}

@@ -1,8 +1,89 @@
+import type { UniversalRoot } from 'octane/universal/native'
+
 // Shared surfaces live in the declaring window, independently of its layout.
 // Kept separate from NSPopover and platform-authentic window sheets.
-export function installPresentationBridge(bridge, createRoot, fontFamilyForView) {
-	const entries = []
-	const layers = new WeakMap()
+
+/** Edge offsets accepted by surface positioning, in points or percent/vh/dip
+ *  strings resolved against the host dimension. */
+export interface SurfaceEdgeOffsets {
+	start?: number | string
+	end?: number | string
+	top?: number | string
+	bottom?: number | string
+}
+
+export interface SurfaceOptions {
+	kind?: 'dialog' | 'sheet' | 'toast' | 'lightbox' | string
+	modal?: boolean
+	fullscreen?: boolean
+	component?: any
+	props?: Record<string, any>
+	owner?: any
+	width?: number | string
+	height?: number | 'tall' | 'hug' | string
+	maxHeight?: number | string
+	snapPoints?: readonly (number | string)[]
+	position?: string | SurfaceEdgeOffsets
+	inset?: { top?: number; bottom?: number; start?: number; end?: number }
+	dark?: boolean | null
+	label?: string
+	purpose?: 'info' | 'form' | 'required' | string
+	transitionKey?: unknown
+	zoom?: boolean
+	canDismiss?: (path: string) => boolean | void
+	onDismiss?: () => void
+	onKey?: (code: number) => boolean | void
+	finalFocusRef?: { current: any }
+	[key: string]: any
+}
+
+export interface SurfaceHandle {
+	update(options: Partial<SurfaceOptions>): void
+	close(reason?: string): void
+	readonly closed: boolean
+	readonly closedPromise: Promise<unknown>
+	readonly panel: NSView
+	readonly layer: NSView
+}
+
+export interface PresentationBridge {
+	setSurfaceAppearance?: (view: NSView, dark: boolean) => void
+	presentSurface?: (options: SurfaceOptions) => SurfaceHandle
+	[key: string]: any
+}
+
+export type SurfaceRootFactory = (
+	host: NSView,
+	options?: { fontFamily?: string },
+) => UniversalRoot
+
+interface SurfaceEntry {
+	options: SurfaceOptions
+	parent: SurfaceEntry | undefined
+	panel: NSView
+	layer: NSView
+	window: NSWindow
+	closed: boolean
+	observers: any[]
+	monitor: any
+	closedPromise: Promise<unknown>
+	stops?: number[]
+	stop?: number
+	didRender?: boolean
+	drag?: { y: number; height: number } | null
+	layout(): void
+	update(options: Partial<SurfaceOptions>): void
+	close(reason?: string): void
+	requestDismiss(path: string): void
+}
+
+export function installPresentationBridge(
+	bridge: PresentationBridge,
+	createRoot: SurfaceRootFactory,
+	fontFamilyForView: (view: NSView | undefined) => string | undefined,
+) {
+	const entries: SurfaceEntry[] = []
+	const layers = new WeakMap<NSView, SurfaceEntry>()
 	class PresentationLayer extends NSView {
 		static {
 			NativeClass(this)
@@ -10,7 +91,7 @@ export function installPresentationBridge(bridge, createRoot, fontFamilyForView)
 		acceptsFirstResponder() {
 			return true
 		}
-		hitTest(point) {
+		hitTest(point: NSPoint): NSView | null {
 			const hit = super.hitTest(point)
 			const entry = layers.get(this)
 			return (hit === this || hit?.isEqual?.(this)) && !entry?.options.modal ? null : hit
@@ -21,8 +102,8 @@ export function installPresentationBridge(bridge, createRoot, fontFamilyForView)
 		}
 	}
 
-	const children = (view) => {
-		const result = []
+	const children = (view: any): NSView[] => {
+		const result: NSView[] = []
 		const list = view?.subviews
 		for (let i = 0; i < Number(list?.count ?? 0); i++) {
 			result.push(list.objectAtIndex(i))
@@ -31,8 +112,10 @@ export function installPresentationBridge(bridge, createRoot, fontFamilyForView)
 		return result
 	}
 
-	const truth = (view, key) => (typeof view?.[key] === 'function' ? view[key]() : view?.[key])
-	const focusables = (view) => {
+	const truth = (view: any, key: string) =>
+		typeof view?.[key] === 'function' ? view[key]() : view?.[key]
+
+	const focusables = (view: any): NSView[] => {
 		if (!view || truth(view, 'hidden')) {
 			return []
 		}
@@ -41,7 +124,7 @@ export function installPresentationBridge(bridge, createRoot, fontFamilyForView)
 		return [...own, ...children(view).flatMap(focusables)]
 	}
 
-	const inside = (view, panel) => {
+	const inside = (view: any, panel: NSView): boolean => {
 		for (let current = view; current; current = current.superview) {
 			if (current === panel || current.isEqual?.(panel)) {
 				return true
@@ -51,7 +134,7 @@ export function installPresentationBridge(bridge, createRoot, fontFamilyForView)
 		return false
 	}
 
-	const length = (value, budget, fallback) => {
+	const length = (value: unknown, budget: number, fallback: number): number => {
 		if (typeof value === 'number') {
 			return Math.max(0, value)
 		}
@@ -91,10 +174,10 @@ export function installPresentationBridge(bridge, createRoot, fontFamilyForView)
 		panel.wantsLayer = true
 		layer.addSubview(panel)
 		const root = createRoot(panel, { fontFamily: fontFamilyForView(owner ?? host) })
-		let resolveClosed
+		let resolveClosed: (reason?: unknown) => void = () => {}
 		const responder = nativeWindow.firstResponder
 		const previousFocus = truth(responder, 'isFieldEditor') ? responder.delegate : responder
-		const entry = {
+		const entry: SurfaceEntry = {
 			options: initial,
 			parent: [...entries]
 				.reverse()
@@ -165,7 +248,7 @@ export function installPresentationBridge(bridge, createRoot, fontFamilyForView)
 				}
 
 				if (options.kind === 'toast') {
-					const edge = options.position ?? 'bottomEnd',
+					const edge = (options.position as string | undefined) ?? 'bottomEnd',
 						inset = options.inset ?? {}
 
 					x = edge.endsWith('Start') ? 16 + (inset.start ?? 0) : w - width - 16 - (inset.end ?? 0)
@@ -173,7 +256,9 @@ export function installPresentationBridge(bridge, createRoot, fontFamilyForView)
 				}
 
 				const pos =
-					!full && options.position && typeof options.position === 'object' ? options.position : {}
+					!full && options.position && typeof options.position === 'object'
+						? options.position
+						: {}
 
 				if (pos.start != null) {
 					x = length(pos.start, w, 0)
@@ -259,7 +344,7 @@ export function installPresentationBridge(bridge, createRoot, fontFamilyForView)
 				}
 
 				if (entry.options.kind === 'lightbox') {
-					const visit = (view) => {
+					const visit = (view: any) => {
 						if ('allowsMagnification' in view) {
 							view.allowsMagnification = entry.options.zoom !== false
 							view.minMagnification = 1
@@ -280,8 +365,8 @@ export function installPresentationBridge(bridge, createRoot, fontFamilyForView)
 				}
 
 				entry.closed = true
-				const owns = (candidate) => {
-					for (let current = candidate; current; current = current.parent) {
+				const owns = (candidate: SurfaceEntry) => {
+					for (let current = candidate; current; current = current.parent!) {
 						if (current === entry) {
 							return true
 						}