@uno.build/runtime 0.0.0-stage → 0.2.0

package/README.md

@@ -1,3 +1,3 @@
-# Temporary Holding Version
+# @uno.build/runtime
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+JavaScript APIs of the uno runtime. The documentation is at [uno.build](https://uno.build).

package/base/base.native.ts

@@ -0,0 +1,7 @@
+import { getUnoModuleNative } from '../utils'
+
+const { PLATFORM } = getUnoModuleNative('base')
+
+export const Platform = {
+    OS: PLATFORM,
+}

package/base/base.web.ts

@@ -0,0 +1,3 @@
+export const Platform = {
+    OS: 'web',
+}

package/canvas/canvas.native.ts

@@ -0,0 +1,12 @@
+import { getUnoModuleNative } from '../utils'
+
+// The native HTMLCanvasElement, which fills the app window.
+const canvas: HTMLCanvasElement = getUnoModuleNative('canvas').element
+
+function init(): any {
+    return canvas
+}
+
+export const Canvas = {
+    init,
+}

package/canvas/canvas.web.ts

@@ -0,0 +1,20 @@
+function init(canvasElement?: any): any {
+    if (canvasElement === undefined) {
+        canvasElement = document.querySelector('canvas')
+        if (canvasElement === null) {
+            throw new Error(
+                'No canvas element found. Please provide a canvas element to initialize.',
+            )
+        }
+    }
+
+    const getContext = canvasElement.getContext.bind(canvasElement)
+    canvasElement.getContext = (context_type: string, context_attributes?: any) =>
+        getContext('webgpu', context_attributes)
+
+    return canvasElement
+}
+
+export const Canvas = {
+    init,
+}

package/index.ts

@@ -0,0 +1,5 @@
+export * from './base/base'
+export * from './memory/memory'
+export * from './canvas/canvas'
+export * from './screen/screen'
+export * from './virtualkeyboard/virtualkeyboard'

package/memory/memory.native.ts

@@ -0,0 +1,8 @@
+import { getUnoModuleNative } from '../utils'
+
+const { usage, gc } = getUnoModuleNative('memory')
+
+export const Memory = {
+    usage,
+    gc,
+}

package/memory/memory.web.ts

@@ -0,0 +1,15 @@
+function usage() {
+    return {
+        footprint: null,
+        rss: null,
+        virtual: null,
+        js: null,
+    }
+}
+
+function gc(..._args: unknown[]) {}
+
+export const Memory = {
+    usage,
+    gc,
+}

package/package.json

@@ -1,6 +1,31 @@
 {
-  "name": "@uno.build/runtime",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "@uno.build/runtime",
+    "version": "0.2.0",
+    "type": "module",
+    "license": "Apache-2.0",
+    "description": "JavaScript APIs of the uno runtime",
+    "homepage": "https://uno.build",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/uno-build/runtime"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "main": "./index.ts",
+    "exports": {
+        ".": "./index.ts",
+        "./ui": "./ui/index.ts"
+    },
+    "dependencies": {
+        "yoga-layout": "^3.2.1"
+    },
+    "peerDependencies": {
+        "@uno.build/ui": "^0.4.0"
+    },
+    "peerDependenciesMeta": {
+        "@uno.build/ui": {
+            "optional": true
+        }
+    }
+}

package/screen/README.md

@@ -0,0 +1,39 @@
+# Screen
+
+Read the current screen orientation and subscribe to orientation changes:
+
+```ts
+import { Screen } from 'uno'
+
+console.log(Screen.getOrientation())
+
+function onChange(orientation) {
+    console.log(orientation)
+}
+
+Screen.addEventListener('orientation', onChange)
+
+// Stop listening when the consumer is disposed.
+Screen.removeEventListener('orientation', onChange)
+```
+
+Orientation values are `portrait-primary`, `portrait-secondary`,
+`landscape-primary`, and `landscape-secondary`. Listeners receive the orientation
+string directly. Registering the same callback twice does not duplicate it.
+Registration does not emit the initial value; use `getOrientation()` to read it.
+
+## Web limitations
+
+- `setOrientation()` is a no-op. It does not rotate or lock the screen, and it
+  does not throw an error.
+- Reading and observing orientation depend on the browser's
+  [Screen Orientation API](https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation).
+  The module reads `screen.orientation.type` and listens for its `change` event.
+- If `screen` or `screen.orientation` is unavailable, `getOrientation()` returns
+  `undefined`. Listeners can still be added and removed, but receive no events.
+  There is no fallback to sensors, legacy orientation events, or viewport dimensions.
+- The reported value describes screen orientation, not physical device movement.
+  The module does not use `deviceorientation` or request sensor permissions.
+- Resizing the browser window or canvas is not an orientation change. Use the window's
+  `resize` event, `addEventListener('resize', callback)`, to react to size changes.
+

package/screen/screen.native.ts

@@ -0,0 +1,33 @@
+import { getUnoModuleNative } from '../utils'
+import type { ScreenOrientation, ScreenEffectiveOrientation } from './types'
+
+export type { ScreenOrientation, ScreenEffectiveOrientation } from './types'
+
+const module_ref = getUnoModuleNative<{
+    getOrientation: () => ScreenEffectiveOrientation
+    onChangeOrientation: (callback: ((orientation: ScreenEffectiveOrientation) => void) | null) => void
+    setOrientation: (orientation: ScreenOrientation) => void
+}>('screen')
+
+const event_listeners = {
+    orientation: new Set<(orientation: ScreenEffectiveOrientation) => void>(),
+}
+
+module_ref.onChangeOrientation((orientation) => {
+    event_listeners.orientation.forEach((callback) => callback(orientation))
+})
+
+function addEventListener(name: 'orientation', callback: (orientation: ScreenEffectiveOrientation) => void): void {
+    event_listeners[name].add(callback)
+}
+
+function removeEventListener(name: 'orientation', callback: (orientation: ScreenEffectiveOrientation) => void): void {
+    event_listeners[name].delete(callback)
+}
+
+export const Screen = {
+    getOrientation: module_ref.getOrientation,
+    setOrientation: module_ref.setOrientation,
+    addEventListener,
+    removeEventListener,
+}

package/screen/screen.web.ts

@@ -0,0 +1,35 @@
+import { getGlobalScope } from '../utils'
+import type { ScreenOrientation, ScreenEffectiveOrientation } from './types'
+
+export type { ScreenOrientation, ScreenEffectiveOrientation } from './types'
+
+const scope = getGlobalScope()
+const screen_orientation = scope.screen?.orientation
+const event_listeners = {
+    orientation: new Set<(orientation: ScreenEffectiveOrientation) => void>(),
+}
+
+screen_orientation?.addEventListener('change', () => {
+    event_listeners.orientation.forEach((callback) => callback(screen_orientation.type))
+})
+
+function getOrientation(): ScreenEffectiveOrientation | undefined {
+    return screen_orientation?.type
+}
+
+function addEventListener(name: 'orientation', callback: (orientation: ScreenEffectiveOrientation) => void): void {
+    event_listeners[name].add(callback)
+}
+
+function removeEventListener(name: 'orientation', callback: (orientation: ScreenEffectiveOrientation) => void): void {
+    event_listeners[name].delete(callback)
+}
+
+export const Screen = {
+    getOrientation,
+    addEventListener,
+    removeEventListener,
+    setOrientation(_orientation: ScreenOrientation): void {
+        // throw new Error('Screen.setOrientation is only supported on iOS')
+    },
+}

package/screen/types.ts

@@ -0,0 +1,10 @@
+export type ScreenOrientation =
+    | 'any'
+    | 'portrait'
+    | 'portrait-primary'
+    | 'portrait-secondary'
+    | 'landscape'
+    | 'landscape-primary'
+    | 'landscape-secondary'
+
+export type ScreenEffectiveOrientation = Exclude<ScreenOrientation, 'any' | 'portrait' | 'landscape'>

package/ui/index.ts

@@ -0,0 +1 @@
+export * from './ui'

package/ui/ui.native.ts

@@ -0,0 +1,22 @@
+import type { EventOptions, UIWebGPUOptions } from '@uno.build/ui/UIWebGPU'
+import ResourcesWebGPU from '@uno.build/ui/ResourcesWebGPU'
+import UIWebGPU from '@uno.build/ui/UIWebGPU'
+import { Yoga } from '../yoga/yoga'
+
+export type { DefinedEvent } from '@uno.build/ui/UIWebGPU'
+export type UIOptions = Omit<UIWebGPUOptions, 'loadYoga' | 'defined_events'> &
+    EventOptions<UI> & {
+        register_platform_events?: boolean
+        yoga?: boolean
+    }
+
+export default class UI extends UIWebGPU {
+    static override async create({ register_platform_events = true, yoga = true, ...options }: UIOptions) {
+        const ui = new UI({ ...options, loadYoga: yoga ? Yoga.loadYoga : undefined } as UIWebGPUOptions)
+        await ui.initialize()
+        if (register_platform_events) ui.registerPlatformEvents()
+        return { ui }
+    }
+}
+
+export { ResourcesWebGPU as ResourcesUI, UI }

package/ui/ui.web.ts

@@ -0,0 +1,11 @@
+import type { EventOptions, UIWebGPUOptions } from '@uno.build/ui/UIWebGPU'
+import ResourcesWebGPU from '@uno.build/ui/ResourcesWebGPU'
+import UI from '@uno.build/ui/UI'
+
+export type { DefinedEvent } from '@uno.build/ui/UIWebGPU'
+export type UIOptions = Omit<UIWebGPUOptions, 'loadYoga' | 'defined_events'> &
+    EventOptions<UI> & {
+        register_platform_events?: boolean
+    }
+
+export { ResourcesWebGPU as ResourcesUI, UI }

package/utils.ts

@@ -0,0 +1,24 @@
+export function getGlobalScope(): any {
+    if (typeof globalThis !== 'undefined') {
+        return globalThis as any
+    }
+
+    if (typeof self !== 'undefined') {
+        return self as any
+    }
+
+    if (typeof window !== 'undefined') {
+        return window as any
+    }
+
+    if (typeof global !== 'undefined') {
+        return global as any
+    }
+
+    return {}
+}
+
+export function getUnoModuleNative<T = any>(moduleName: string): T {
+    const uno = getGlobalScope().__unoNative
+    return uno[moduleName] as T
+}

package/virtualkeyboard/README.md

@@ -0,0 +1,122 @@
+# VirtualKeyboard
+
+`VirtualKeyboard.open(options)` accepts the following input and keyboard options:
+
+| Option | Category | Behavior |
+| --- | --- | --- |
+| `input_value` | Input | Required initial text. |
+| `appearance` | Input / Keyboard | `dark`, `light`, or `default` (default). On iOS, sets the keyboard and input bar appearance; `default` inherits the app appearance. On web, sets the input's CSS `color-scheme`; `default` inherits the page scheme. Applies to custom inputs too, but does not guarantee the system keyboard appearance or override explicit CSS colors. |
+| `input_visible` | Input | Shows the native iOS input bar. Defaults to `true`. Setting it to `false` keeps keyboard input and callbacks active without displaying the bar. Ignored on web. |
+| `input_placeholder` | Input | Hint text for an empty input. Defaults to an empty string. |
+| `input_secure` | Input | Enables password entry. Defaults to `false`. |
+| `input_max_length` | Input | Optional non-negative integer limiting the input length. Does not truncate the initial value. |
+| `getInputElement` | Input | Optional web-only function returning `{ element, getStatus }`. See below. |
+| `onInputChange` | Input | Receives the updated text when the input value changes. |
+| `onInputSelectionChange` | Input | Receives `{ start, end }` when the input selection changes, including cursor movement without text changes. Offsets are zero-based UTF-16 code units; equal offsets indicate the cursor position. On iOS, also reports the selection when opening a session. Custom web inputs must support the DOM selection APIs. |
+| `onInputSubmit` | Input | Receives the current text when the keyboard's return action confirms the input. |
+| `onInputBlur` | Input | Receives the current text when the input loses focus. Submitting, calling `VirtualKeyboard.close()`, or replacing a session does not emit this callback. |
+| `keyboard_mode` | Keyboard | `text`, `numeric`, `decimal`, or `email`. Defaults to `text`. |
+| `keyboard_enter_key_hint` | Keyboard | `enter`, `done`, `go`, `next`, `search`, or `send`. Defaults to `done`. On iOS, `enter` uses the standard Return key; numeric and decimal keyboards do not use this hint. |
+| `onKeyboardChange` | Keyboard | Receives the complete `VirtualKeyboardStatus` when keyboard visibility or geometry changes. On web, requires `navigator.virtualKeyboard`. |
+
+On iOS, calling `open` while editing replaces the session's value, options, and
+callbacks while keeping the native input focused. The keyboard configuration is
+refreshed without closing it first. When transferring focus between app inputs,
+call `open` for the next input without calling `close` from the previous input's
+blur handler. Call `close` when focus leaves the inputs.
+
+macOS has no on-screen keyboard, as in desktop browsers: `keyboard_visible` stays `false`,
+`onKeyboardChange` is never called, and `keyboard_mode` and `keyboard_enter_key_hint` do not
+apply. Return submits the input. With `input_visible`, the native input bar spans the bottom of
+the window, where the iOS bar rests while its keyboard is hidden; `appearance` sets its appearance.
+Moving the focus to another control emits `onInputBlur`.
+
+## Status
+
+`VirtualKeyboard.status()` always returns a new `VirtualKeyboardStatus` object with all ten fields,
+including before the first `open` and after both elements are hidden:
+
+```ts
+{
+    keyboard_visible: false,
+    keyboard_screen_x: 0,
+    keyboard_screen_y: 0,
+    keyboard_width: 0,
+    keyboard_height: 0,
+    input_visible: false,
+    input_screen_x: 0,
+    input_screen_y: 0,
+    input_width: 0,
+    input_height: 0,
+}
+```
+
+Each hidden element has `visible: false` and zero coordinates and dimensions.
+The two visibility flags are independent. The keyboard rectangle excludes the
+input. On iOS, the input rectangle covers the complete native input bar, including
+its padding, in window points. On macOS, it uses the points of the window's content
+area with a top-left origin, matching the canvas coordinates. With `input_visible: false`,
+all input fields stay zero. On web, keyboard coordinates use viewport CSS pixels; without
+`navigator.virtualKeyboard`, the keyboard fields stay at their hidden values.
+
+For a layout with the input bar directly above the keyboard, the app can compute
+its available height without checking for missing metrics:
+
+```ts
+const status = VirtualKeyboard.status()
+const available_height = viewport_height - status.keyboard_height - status.input_height
+```
+
+`onKeyboardChange` receives the same complete status, including the input state at
+the time of the keyboard change. Input-only changes do not emit this event. Calling
+`status()` does not emit events. Closing an editing session does not mark the
+keyboard hidden until the platform reports that it is hidden.
+
+`VirtualKeyboard` replaces `Keyboard`, and the `VirtualKeyboard*` types replace the `Keyboard*` types.
+`VirtualKeyboard.status()` replaces `Keyboard.metrics()` and `Keyboard.isVisible()`;
+`VirtualKeyboardStatus` replaces `KeyboardMetrics`.
+
+## Custom web input
+
+`getInputElement(options)` is an optional, synchronous web-only function called on
+every `open` with the complete options object. It returns:
+
+```ts
+{
+    element: HTMLInputElement,
+    getStatus: () => VirtualKeyboardInputStatus,
+}
+```
+
+`element` must be attached to the DOM and ready to focus. The consumer owns its
+creation, reuse, replacement, styles, configuration (including the element's
+`value` and keyboard attributes), and removal. `VirtualKeyboard` manages focus and session
+events without replacing existing event handlers. Closing a session leaves the
+element in the DOM.
+
+`getStatus()` must synchronously return all five input fields:
+
+```ts
+{
+    input_visible: true,
+    input_screen_x: 0,
+    input_screen_y: 448,
+    input_width: 400,
+    input_height: 52,
+}
+```
+
+It measures the area the app wants to reserve for the input, which may include a
+surrounding container. Use viewport CSS pixels, matching the keyboard fields. The
+function must read the current state without side effects. The runtime calls it on
+every `status()` query and when preparing an `onKeyboardChange` payload. When
+`input_visible` is `false`, the runtime reports zero input coordinates and dimensions.
+
+The latest provider remains available to `status()` after editing ends, because a
+consumer-owned input may still be visible. The next `open` replaces it. The
+consumer should update the state read by `getStatus()` when hiding or removing its
+input. No input polling or extra change notifications are used.
+
+Without `getInputElement`, `VirtualKeyboard` creates, configures, and reuses its hidden
+input, whose status always has `input_visible: false` and zero geometry. Native
+iOS ignores `getInputElement` and measures its own input bar.

package/virtualkeyboard/types.ts

@@ -0,0 +1,36 @@
+export type VirtualKeyboardInputStatus = Readonly<{
+    input_visible: boolean
+    input_screen_x: number
+    input_screen_y: number
+    input_width: number
+    input_height: number
+}>
+
+export type VirtualKeyboardStatus = Readonly<{
+    keyboard_visible: boolean
+    keyboard_screen_x: number
+    keyboard_screen_y: number
+    keyboard_width: number
+    keyboard_height: number
+}> &
+    VirtualKeyboardInputStatus
+
+export type VirtualKeyboardOptions = {
+    appearance?: 'dark' | 'light' | 'default'
+    input_value: string
+    input_visible?: boolean
+    input_placeholder?: string
+    input_secure?: boolean
+    input_max_length?: number
+    onInputChange?: (value: string) => void
+    onInputSelectionChange?: (selection: { start: number; end: number }) => void
+    onInputSubmit?: (value: string) => void
+    onInputBlur?: (value: string) => void
+    keyboard_mode?: 'text' | 'numeric' | 'decimal' | 'email'
+    keyboard_enter_key_hint?: 'enter' | 'done' | 'go' | 'next' | 'search' | 'send'
+    onKeyboardChange?: (status: VirtualKeyboardStatus) => void
+    getInputElement?: (options: VirtualKeyboardOptions) => {
+        element: HTMLInputElement
+        getStatus: () => VirtualKeyboardInputStatus
+    }
+}

package/virtualkeyboard/virtualkeyboard.native.ts

@@ -0,0 +1,10 @@
+import { getUnoModuleNative } from '../utils'
+import type { VirtualKeyboardStatus, VirtualKeyboardOptions } from './types'
+
+export type { VirtualKeyboardInputStatus, VirtualKeyboardStatus, VirtualKeyboardOptions } from './types'
+
+export const VirtualKeyboard = getUnoModuleNative<{
+    open: (options: VirtualKeyboardOptions) => void
+    close: () => void
+    status: () => VirtualKeyboardStatus
+}>('virtualkeyboard')

package/virtualkeyboard/virtualkeyboard.web.ts

@@ -0,0 +1,197 @@
+import { getGlobalScope } from '../utils'
+import type { VirtualKeyboardInputStatus, VirtualKeyboardStatus, VirtualKeyboardOptions } from './types'
+
+export type { VirtualKeyboardInputStatus, VirtualKeyboardStatus, VirtualKeyboardOptions } from './types'
+
+const scope = getGlobalScope()
+const HIDDEN_INPUT_STATUS: VirtualKeyboardInputStatus = {
+    input_visible: false,
+    input_screen_x: 0,
+    input_screen_y: 0,
+    input_width: 0,
+    input_height: 0,
+}
+const HIDDEN_KEYBOARD_STATUS = {
+    keyboard_visible: false,
+    keyboard_screen_x: 0,
+    keyboard_screen_y: 0,
+    keyboard_width: 0,
+    keyboard_height: 0,
+}
+const state = {
+    default_input: null as HTMLInputElement | null,
+    closeInput: undefined as (() => void) | undefined,
+    editing: false,
+    keyboard_status: HIDDEN_KEYBOARD_STATUS,
+    getInputStatus: (): VirtualKeyboardInputStatus => HIDDEN_INPUT_STATUS,
+    onKeyboardChange: undefined as VirtualKeyboardOptions['onKeyboardChange'],
+}
+
+const virtual_keyboard = scope.navigator?.virtualKeyboard
+
+function readKeyboardStatus() {
+    const rect = virtual_keyboard.boundingRect
+    if (rect.width === 0 || rect.height === 0) {
+        return HIDDEN_KEYBOARD_STATUS
+    }
+    return {
+        keyboard_visible: true,
+        keyboard_screen_x: rect.x,
+        keyboard_screen_y: rect.y,
+        keyboard_width: rect.width,
+        keyboard_height: rect.height,
+    }
+}
+
+function onGeometryChange() {
+    const previous_status = state.keyboard_status
+    const next_status = readKeyboardStatus()
+    if (
+        previous_status.keyboard_visible === next_status.keyboard_visible &&
+        previous_status.keyboard_screen_x === next_status.keyboard_screen_x &&
+        previous_status.keyboard_screen_y === next_status.keyboard_screen_y &&
+        previous_status.keyboard_width === next_status.keyboard_width &&
+        previous_status.keyboard_height === next_status.keyboard_height
+    ) {
+        return
+    }
+
+    state.keyboard_status = next_status
+    const { onKeyboardChange } = state
+    if (!next_status.keyboard_visible && !state.editing) {
+        state.onKeyboardChange = undefined
+    }
+    onKeyboardChange?.(status())
+}
+
+if (virtual_keyboard !== undefined) {
+    virtual_keyboard.overlaysContent = true
+    state.keyboard_status = readKeyboardStatus()
+    virtual_keyboard.addEventListener('geometrychange', onGeometryChange)
+}
+
+function status(): VirtualKeyboardStatus {
+    const input_status = state.getInputStatus()
+    return {
+        ...state.keyboard_status,
+        ...(input_status.input_visible ? input_status : HIDDEN_INPUT_STATUS),
+    }
+}
+
+function createInput(): HTMLInputElement {
+    const element = scope.document.createElement('input')
+    element.style.position = 'fixed'
+    element.style.width = '1px'
+    element.style.height = '1px'
+    element.style.opacity = '0'
+    element.style.pointerEvents = 'none'
+    element.style.left = '0'
+    element.style.bottom = '0'
+    element.tabIndex = -1
+    scope.document.body.appendChild(element)
+    return element
+}
+
+function getDefaultInputElement({
+    input_value,
+    input_placeholder = '',
+    input_secure = false,
+    keyboard_mode = 'text',
+    keyboard_enter_key_hint = 'done',
+    input_max_length,
+}: VirtualKeyboardOptions) {
+    const type = input_secure ? 'password' : 'text'
+    if (
+        state.default_input !== null &&
+        (state.default_input.type !== type ||
+            state.default_input.inputMode !== keyboard_mode ||
+            state.default_input.enterKeyHint !== keyboard_enter_key_hint)
+    ) {
+        state.default_input.remove()
+        state.default_input = null
+    }
+    if (state.default_input === null) {
+        state.default_input = createInput()
+    }
+    const input = state.default_input
+    input.value = input_value
+    input.placeholder = input_placeholder
+    input.type = type
+    input.inputMode = keyboard_mode
+    input.enterKeyHint = keyboard_enter_key_hint
+    if (input_max_length === undefined) {
+        input.removeAttribute('maxlength')
+    } else {
+        input.maxLength = input_max_length
+    }
+    return { element: input, getStatus: () => HIDDEN_INPUT_STATUS }
+}
+
+function open(options: VirtualKeyboardOptions) {
+    close()
+    const {
+        getInputElement = getDefaultInputElement,
+        appearance = 'default',
+        onInputChange,
+        onInputSelectionChange,
+        onInputSubmit,
+        onInputBlur,
+        onKeyboardChange,
+    } = options
+    const { element: input, getStatus } = getInputElement(options)
+    input.style.colorScheme = appearance === 'default' ? 'inherit' : appearance
+    state.getInputStatus = getStatus
+    state.onKeyboardChange = onKeyboardChange
+    state.editing = true
+    function onBlur() {
+        const value = input.value
+        close()
+        onInputBlur?.(value)
+    }
+    function onInput() {
+        onInputChange?.(input.value)
+    }
+    function onSelectionChange() {
+        const start = input.selectionStart
+        const end = input.selectionEnd
+        if (start !== null && end !== null) {
+            onInputSelectionChange?.({ start, end })
+        }
+    }
+    function onKeyDown(event: KeyboardEvent) {
+        if (event.key === 'Enter' && !event.isComposing) {
+            event.preventDefault()
+            const submitted_value = input.value
+            close()
+            onInputSubmit?.(submitted_value)
+        }
+    }
+    input.addEventListener('blur', onBlur)
+    input.addEventListener('input', onInput)
+    input.addEventListener('selectionchange', onSelectionChange)
+    input.addEventListener('keydown', onKeyDown)
+    input.focus({ preventScroll: true })
+    state.closeInput = () => {
+        input.removeEventListener('blur', onBlur)
+        input.removeEventListener('input', onInput)
+        input.removeEventListener('selectionchange', onSelectionChange)
+        input.removeEventListener('keydown', onKeyDown)
+        input.blur()
+    }
+}
+
+function close() {
+    state.editing = false
+    if (!state.keyboard_status.keyboard_visible) {
+        state.onKeyboardChange = undefined
+    }
+    const { closeInput } = state
+    state.closeInput = undefined
+    closeInput?.()
+}
+
+export const VirtualKeyboard = {
+    open,
+    close,
+    status,
+}

package/yoga/yoga.native.ts

@@ -0,0 +1,16 @@
+import { getUnoModuleNative } from '../utils'
+
+const moduleRef = getUnoModuleNative('yoga')
+
+async function loadYoga() {
+    return {
+        Config: moduleRef.Config,
+        Node: moduleRef.Node,
+        ...moduleRef.Constants,
+    }
+}
+
+export const Yoga = {
+    loadYoga,
+    ...moduleRef.Enums,
+}

package/yoga/yoga.web.ts

@@ -0,0 +1 @@
+export * as Yoga from 'yoga-layout/load'