@fairyhunter13/opentui-core 0.1.89 → 0.1.91

package/src/Renderable.ts

@@ -0,0 +1,1698 @@
+import { EventEmitter } from "events"
+import Yoga, { Direction, Display, Edge, FlexDirection, type Config, type Node as YogaNode } from "yoga-layout"
+import { OptimizedBuffer } from "./buffer.js"
+import type { KeyEvent, PasteEvent } from "./lib/KeyHandler.js"
+import type { MouseEventType } from "./lib/parse.mouse.js"
+import type { Selection } from "./lib/selection.js"
+import {
+  parseAlign,
+  parseAlignItems,
+  parseFlexDirection,
+  parseJustify,
+  parseOverflow,
+  parsePositionType,
+  parseWrap,
+  type AlignString,
+  type FlexDirectionString,
+  type JustifyString,
+  type OverflowString,
+  type PositionTypeString,
+  type WrapString,
+} from "./lib/yoga.options.js"
+import { maybeMakeRenderable, type VNode } from "./renderables/composition/vnode.js"
+import type { MouseEvent } from "./renderer.js"
+import type { RenderContext } from "./types.js"
+import {
+  validateOptions,
+  isPositionType,
+  isDimensionType,
+  isFlexBasisType,
+  isSizeType,
+  isMarginType,
+  isPaddingType,
+  isPositionTypeType,
+  isOverflowType,
+} from "./lib/renderable.validations.js"
+
+const BrandedRenderable: unique symbol = Symbol.for("@fairyhunter13/opentui-core/Renderable")
+
+export enum LayoutEvents {
+  LAYOUT_CHANGED = "layout-changed",
+  ADDED = "added",
+  REMOVED = "removed",
+  RESIZED = "resized",
+}
+
+export enum RenderableEvents {
+  FOCUSED = "focused",
+  BLURRED = "blurred",
+}
+
+export interface Position {
+  top?: number | "auto" | `${number}%`
+  right?: number | "auto" | `${number}%`
+  bottom?: number | "auto" | `${number}%`
+  left?: number | "auto" | `${number}%`
+}
+
+export interface BaseRenderableOptions {
+  id?: string
+}
+
+export interface LayoutOptions extends BaseRenderableOptions {
+  flexGrow?: number
+  flexShrink?: number
+  flexDirection?: FlexDirectionString
+  flexWrap?: WrapString
+  alignItems?: AlignString
+  justifyContent?: JustifyString
+  alignSelf?: AlignString
+  flexBasis?: number | "auto" | undefined
+  position?: PositionTypeString
+  overflow?: OverflowString
+  top?: number | "auto" | `${number}%`
+  right?: number | "auto" | `${number}%`
+  bottom?: number | "auto" | `${number}%`
+  left?: number | "auto" | `${number}%`
+  minWidth?: number | "auto" | `${number}%`
+  minHeight?: number | "auto" | `${number}%`
+  maxWidth?: number | "auto" | `${number}%`
+  maxHeight?: number | "auto" | `${number}%`
+  margin?: number | "auto" | `${number}%`
+  marginX?: number | "auto" | `${number}%`
+  marginY?: number | "auto" | `${number}%`
+  marginTop?: number | "auto" | `${number}%`
+  marginRight?: number | "auto" | `${number}%`
+  marginBottom?: number | "auto" | `${number}%`
+  marginLeft?: number | "auto" | `${number}%`
+  padding?: number | `${number}%`
+  paddingX?: number | `${number}%`
+  paddingY?: number | `${number}%`
+  paddingTop?: number | `${number}%`
+  paddingRight?: number | `${number}%`
+  paddingBottom?: number | `${number}%`
+  paddingLeft?: number | `${number}%`
+  enableLayout?: boolean
+}
+
+export interface RenderableOptions<T extends BaseRenderable = BaseRenderable> extends Partial<LayoutOptions> {
+  width?: number | "auto" | `${number}%`
+  height?: number | "auto" | `${number}%`
+  zIndex?: number
+  visible?: boolean
+  buffered?: boolean
+  live?: boolean
+  opacity?: number
+
+  // hooks for custom render logic
+  renderBefore?: (this: T, buffer: OptimizedBuffer, deltaTime: number) => void
+  renderAfter?: (this: T, buffer: OptimizedBuffer, deltaTime: number) => void
+
+  // catch all
+  onMouse?: (this: T, event: MouseEvent) => void
+
+  onMouseDown?: (this: T, event: MouseEvent) => void
+  onMouseUp?: (this: T, event: MouseEvent) => void
+  onMouseMove?: (this: T, event: MouseEvent) => void
+  onMouseDrag?: (this: T, event: MouseEvent) => void
+  onMouseDragEnd?: (this: T, event: MouseEvent) => void
+  onMouseDrop?: (this: T, event: MouseEvent) => void
+  onMouseOver?: (this: T, event: MouseEvent) => void
+  onMouseOut?: (this: T, event: MouseEvent) => void
+  onMouseScroll?: (this: T, event: MouseEvent) => void
+
+  onPaste?: (this: T, event: PasteEvent) => void
+
+  onKeyDown?: (key: KeyEvent) => void
+
+  onSizeChange?: (this: T) => void
+}
+
+export function isRenderable(obj: any): obj is Renderable {
+  return !!obj?.[BrandedRenderable]
+}
+
+export abstract class BaseRenderable extends EventEmitter {
+  [BrandedRenderable] = true
+
+  private static renderableNumber = 1
+  protected _id: string
+  public readonly num: number
+  protected _dirty: boolean = false
+  public parent: BaseRenderable | null = null
+  protected _visible: boolean = true
+
+  constructor(options: BaseRenderableOptions) {
+    super()
+    this.num = BaseRenderable.renderableNumber++
+    this._id = options.id ?? `renderable-${this.num}`
+  }
+
+  public abstract add(obj: BaseRenderable | unknown, index?: number): number
+  public abstract remove(id: string): void
+  public abstract insertBefore(obj: BaseRenderable | unknown, anchor: BaseRenderable | unknown): void
+  public abstract getChildren(): BaseRenderable[]
+  public abstract getChildrenCount(): number
+  public abstract getRenderable(id: string): BaseRenderable | undefined
+  public abstract requestRender(): void
+  public abstract findDescendantById(id: string): BaseRenderable | undefined
+
+  public get id(): string {
+    return this._id
+  }
+
+  public set id(value: string) {
+    this._id = value
+  }
+
+  public get isDirty(): boolean {
+    return this._dirty
+  }
+
+  protected markClean(): void {
+    this._dirty = false
+  }
+
+  protected markDirty(): void {
+    this._dirty = true
+  }
+
+  public destroy(): void {
+    // Default implementation: do nothing
+    // Override this method to provide custom removal logic
+  }
+
+  public destroyRecursively(): void {
+    // Default implementation: do nothing
+    // Override this method to provide custom destruction logic
+  }
+
+  public get visible(): boolean {
+    return this._visible
+  }
+
+  public set visible(value: boolean) {
+    this._visible = value
+  }
+}
+
+const yogaConfig: Config = Yoga.Config.create()
+yogaConfig.setUseWebDefaults(false)
+yogaConfig.setPointScaleFactor(1)
+
+export abstract class Renderable extends BaseRenderable {
+  static renderablesByNumber: Map<number, Renderable> = new Map()
+
+  protected _isDestroyed: boolean = false
+  protected _ctx: RenderContext
+  protected _translateX: number = 0
+  protected _translateY: number = 0
+  protected _x: number = 0
+  protected _y: number = 0
+  protected _width: number | "auto" | `${number}%`
+  protected _height: number | "auto" | `${number}%`
+  protected _widthValue: number = 0
+  protected _heightValue: number = 0
+  private _zIndex: number
+  public selectable: boolean = false
+  protected buffered: boolean
+  protected frameBuffer: OptimizedBuffer | null = null
+
+  protected _focusable: boolean = false
+  protected _focused: boolean = false
+  protected keypressHandler: ((key: KeyEvent) => void) | null = null
+  protected pasteHandler: ((event: PasteEvent) => void) | null = null
+
+  private _live: boolean = false
+  protected _liveCount: number = 0
+
+  private _sizeChangeListener: (() => void) | undefined = undefined
+  private _mouseListener: ((event: MouseEvent) => void) | null = null
+  private _mouseListeners: Partial<Record<MouseEventType, (event: MouseEvent) => void>> = {}
+  private _pasteListener: ((event: PasteEvent) => void) | undefined = undefined
+  private _keyListeners: Partial<Record<"down", (key: KeyEvent) => void>> = {}
+
+  protected yogaNode: YogaNode
+  protected _positionType: PositionTypeString = "relative"
+  protected _overflow: OverflowString = "visible"
+  protected _position: Position = {}
+  protected _opacity: number = 1.0
+  private _flexShrink: number = 1
+
+  private renderableMapById: Map<string, Renderable> = new Map()
+  protected _childrenInLayoutOrder: Renderable[] = []
+  protected _childrenInZIndexOrder: Renderable[] = []
+  private needsZIndexSort: boolean = false
+  public override parent: Renderable | null = null
+
+  private childrenPrimarySortDirty: boolean = true
+  private childrenSortedByPrimaryAxis: Renderable[] = []
+  private _shouldUpdateBefore: Set<Renderable> = new Set()
+
+  public onLifecyclePass: (() => void) | null = null
+
+  public renderBefore?: (this: Renderable, buffer: OptimizedBuffer, deltaTime: number) => void
+  public renderAfter?: (this: Renderable, buffer: OptimizedBuffer, deltaTime: number) => void
+
+  constructor(ctx: RenderContext, options: RenderableOptions<any>) {
+    super(options)
+
+    this._ctx = ctx
+    Renderable.renderablesByNumber.set(this.num, this)
+
+    validateOptions(this.id, options)
+
+    this.renderBefore = options.renderBefore
+    this.renderAfter = options.renderAfter
+
+    this._width = options.width ?? "auto"
+    this._height = options.height ?? "auto"
+
+    if (typeof this._width === "number") {
+      this._widthValue = this._width
+    }
+    if (typeof this._height === "number") {
+      this._heightValue = this._height
+    }
+
+    this._zIndex = options.zIndex ?? 0
+    this._visible = options.visible !== false
+    this.buffered = options.buffered ?? false
+    this._live = options.live ?? false
+    this._liveCount = this._live && this._visible ? 1 : 0
+    this._opacity = options.opacity !== undefined ? Math.max(0, Math.min(1, options.opacity)) : 1.0
+
+    // TODO: use a global yoga config
+    this.yogaNode = Yoga.Node.create(yogaConfig)
+    this.yogaNode.setDisplay(this._visible ? Display.Flex : Display.None)
+    this.setupYogaProperties(options)
+
+    this.applyEventOptions(options)
+
+    if (this.buffered) {
+      this.createFrameBuffer()
+    }
+  }
+
+  public override get id() {
+    return this._id
+  }
+
+  public override set id(value: string) {
+    if (this.parent) {
+      this.parent.renderableMapById.delete(this.id)
+      this.parent.renderableMapById.set(value, this)
+    }
+    super.id = value
+  }
+
+  public get focusable(): boolean {
+    return this._focusable
+  }
+
+  public set focusable(value: boolean) {
+    this._focusable = value
+  }
+
+  public get ctx(): RenderContext {
+    return this._ctx
+  }
+
+  public override get visible(): boolean {
+    return this._visible
+  }
+
+  public get primaryAxis(): "row" | "column" {
+    const dir = this.yogaNode.getFlexDirection()
+    return dir === 2 || dir === 3 ? "row" : "column"
+  }
+
+  public override set visible(value: boolean) {
+    if (this._visible === value) return
+
+    const wasVisible = this._visible
+    this._visible = value
+    this.yogaNode.setDisplay(value ? Display.Flex : Display.None)
+
+    if (this._live) {
+      if (!wasVisible && value) {
+        this.propagateLiveCount(1)
+      } else if (wasVisible && !value) {
+        this.propagateLiveCount(-1)
+      }
+    }
+
+    if (this._focused) {
+      this.blur()
+    }
+    this.requestRender()
+  }
+
+  public get opacity(): number {
+    return this._opacity
+  }
+
+  public set opacity(value: number) {
+    const clamped = Math.max(0, Math.min(1, value))
+    if (this._opacity !== clamped) {
+      this._opacity = clamped
+      this.requestRender()
+    }
+  }
+
+  public hasSelection(): boolean {
+    return false
+  }
+
+  public onSelectionChanged(selection: Selection | null): boolean {
+    // Default implementation: do nothing
+    // Override this method to provide custom selection handling
+    return false
+  }
+
+  public getSelectedText(): string {
+    return ""
+  }
+
+  public shouldStartSelection(x: number, y: number): boolean {
+    return false
+  }
+
+  public focus(): void {
+    if (this._isDestroyed || this._focused || !this._focusable) return
+
+    this._ctx.focusRenderable(this)
+    this._focused = true
+    this.requestRender()
+
+    this.keypressHandler = (key: KeyEvent) => {
+      if (this._isDestroyed) return
+      this._keyListeners["down"]?.(key)
+      // Check again after user listener - it might have destroyed the renderable
+      if (this._isDestroyed) return
+      if (!key.defaultPrevented && this.handleKeyPress) {
+        this.handleKeyPress(key)
+      }
+    }
+
+    this.pasteHandler = (event: PasteEvent) => {
+      if (this._isDestroyed) return
+      this._pasteListener?.call(this, event)
+      // Check again after user listener - it might have destroyed the renderable
+      if (this._isDestroyed) return
+      if (!event.defaultPrevented && this.handlePaste) {
+        this.handlePaste(event)
+      }
+    }
+
+    this.ctx._internalKeyInput.onInternal("keypress", this.keypressHandler)
+    this.ctx._internalKeyInput.onInternal("paste", this.pasteHandler)
+    this.emit(RenderableEvents.FOCUSED)
+  }
+
+  public blur(): void {
+    if (!this._focused || !this._focusable) return
+
+    this._focused = false
+    this.requestRender()
+
+    if (this.keypressHandler) {
+      this.ctx._internalKeyInput.offInternal("keypress", this.keypressHandler)
+      this.keypressHandler = null
+    }
+
+    if (this.pasteHandler) {
+      this.ctx._internalKeyInput.offInternal("paste", this.pasteHandler)
+      this.pasteHandler = null
+    }
+
+    this.emit(RenderableEvents.BLURRED)
+  }
+
+  public get focused(): boolean {
+    return this._focused
+  }
+
+  public get live(): boolean {
+    return this._live
+  }
+
+  public get liveCount(): number {
+    return this._liveCount
+  }
+
+  public set live(value: boolean) {
+    if (this._live === value) return
+
+    this._live = value
+
+    if (this._visible) {
+      const delta = value ? 1 : -1
+      this.propagateLiveCount(delta)
+    }
+  }
+
+  protected propagateLiveCount(delta: number): void {
+    this._liveCount += delta
+    this.parent?.propagateLiveCount(delta)
+  }
+
+  public handleKeyPress?(key: KeyEvent): boolean
+  public handlePaste?(event: PasteEvent): void
+
+  public override findDescendantById(id: string): Renderable | undefined {
+    for (const child of this._childrenInLayoutOrder) {
+      if (child.id === id) return child
+      if (isRenderable(child)) {
+        const found = child.findDescendantById(id)
+        if (found) return found
+      }
+    }
+    return undefined
+  }
+
+  public override requestRender() {
+    this.markDirty()
+    this._ctx.requestRender()
+  }
+
+  public get translateX(): number {
+    return this._translateX
+  }
+
+  public set translateX(value: number) {
+    if (this._translateX === value) return
+    this._translateX = value
+    if (this.parent) this.parent.childrenPrimarySortDirty = true
+    this.requestRender()
+  }
+
+  public get translateY(): number {
+    return this._translateY
+  }
+
+  public set translateY(value: number) {
+    if (this._translateY === value) return
+    this._translateY = value
+    if (this.parent) this.parent.childrenPrimarySortDirty = true
+    this.requestRender()
+  }
+
+  public get x(): number {
+    if (this.parent) {
+      return this.parent.x + this._x + this._translateX
+    }
+    return this._x + this._translateX
+  }
+
+  public set x(value: number) {
+    this.left = value
+  }
+
+  public get top(): number | "auto" | `${number}%` | undefined {
+    return this._position.top
+  }
+
+  public set top(value: number | "auto" | `${number}%` | undefined) {
+    if (isPositionType(value) || value === undefined) {
+      this.setPosition({ top: value })
+    }
+  }
+
+  public get right(): number | "auto" | `${number}%` | undefined {
+    return this._position.right
+  }
+
+  public set right(value: number | "auto" | `${number}%` | undefined) {
+    if (isPositionType(value) || value === undefined) {
+      this.setPosition({ right: value })
+    }
+  }
+
+  public get bottom(): number | "auto" | `${number}%` | undefined {
+    return this._position.bottom
+  }
+
+  public set bottom(value: number | "auto" | `${number}%` | undefined) {
+    if (isPositionType(value) || value === undefined) {
+      this.setPosition({ bottom: value })
+    }
+  }
+
+  public get left(): number | "auto" | `${number}%` | undefined {
+    return this._position.left
+  }
+
+  public set left(value: number | "auto" | `${number}%` | undefined) {
+    if (isPositionType(value) || value === undefined) {
+      this.setPosition({ left: value })
+    }
+  }
+
+  public get y(): number {
+    if (this.parent) {
+      return this.parent.y + this._y + this._translateY
+    }
+    return this._y + this._translateY
+  }
+
+  public set y(value: number) {
+    this.top = value
+  }
+
+  public get width(): number {
+    return this._widthValue
+  }
+
+  public set width(value: number | "auto" | `${number}%`) {
+    if (isDimensionType(value)) {
+      this._width = value
+      this.yogaNode.setWidth(value)
+
+      if (typeof value === "number" && this._flexShrink === 1) {
+        this._flexShrink = 0
+        this.yogaNode.setFlexShrink(0)
+      }
+
+      this.requestRender()
+    }
+  }
+
+  public get height(): number {
+    return this._heightValue
+  }
+
+  public set height(value: number | "auto" | `${number}%`) {
+    if (isDimensionType(value)) {
+      this._height = value
+      this.yogaNode.setHeight(value)
+
+      if (typeof value === "number" && this._flexShrink === 1) {
+        this._flexShrink = 0
+        this.yogaNode.setFlexShrink(0)
+      }
+
+      this.requestRender()
+    }
+  }
+
+  public get zIndex(): number {
+    return this._zIndex
+  }
+
+  public set zIndex(value: number) {
+    if (this._zIndex !== value) {
+      this._zIndex = value
+      this.parent?.requestZIndexSort()
+      this.requestRender()
+    }
+  }
+
+  private requestZIndexSort(): void {
+    this.needsZIndexSort = true
+  }
+
+  private ensureZIndexSorted(): void {
+    if (this.needsZIndexSort) {
+      this._childrenInZIndexOrder.sort((a, b) => (a.zIndex > b.zIndex ? 1 : a.zIndex < b.zIndex ? -1 : 0))
+      this.needsZIndexSort = false
+    }
+  }
+
+  public getChildrenSortedByPrimaryAxis(): Renderable[] {
+    if (
+      !this.childrenPrimarySortDirty &&
+      this.childrenSortedByPrimaryAxis.length === this._childrenInLayoutOrder.length
+    ) {
+      return this.childrenSortedByPrimaryAxis
+    }
+
+    const dir = this.yogaNode.getFlexDirection()
+    const axis: "x" | "y" = dir === 2 || dir === 3 ? "x" : "y"
+
+    const sorted = [...this._childrenInLayoutOrder]
+    sorted.sort((a, b) => {
+      const va = axis === "y" ? a.y : a.x
+      const vb = axis === "y" ? b.y : b.x
+      return va - vb
+    })
+
+    this.childrenSortedByPrimaryAxis = sorted
+    this.childrenPrimarySortDirty = false
+    return this.childrenSortedByPrimaryAxis
+  }
+
+  private setupYogaProperties(options: RenderableOptions<Renderable>): void {
+    const node = this.yogaNode
+
+    if (isFlexBasisType(options.flexBasis)) {
+      node.setFlexBasis(options.flexBasis)
+    }
+
+    if (isSizeType(options.minWidth)) {
+      node.setMinWidth(options.minWidth)
+    }
+    if (isSizeType(options.minHeight)) {
+      node.setMinHeight(options.minHeight)
+    }
+
+    if (options.flexGrow !== undefined) {
+      node.setFlexGrow(options.flexGrow)
+    } else {
+      node.setFlexGrow(0)
+    }
+
+    if (options.flexShrink !== undefined) {
+      this._flexShrink = options.flexShrink
+      node.setFlexShrink(options.flexShrink)
+    } else {
+      // If explicit numeric width is set, don't shrink by default
+      // Otherwise follow web default of 1
+      const hasExplicitWidth = typeof options.width === "number"
+      const hasExplicitHeight = typeof options.height === "number"
+      this._flexShrink = hasExplicitWidth || hasExplicitHeight ? 0 : 1
+      node.setFlexShrink(this._flexShrink)
+    }
+
+    node.setFlexDirection(parseFlexDirection(options.flexDirection))
+    node.setFlexWrap(parseWrap(options.flexWrap))
+    node.setAlignItems(parseAlignItems(options.alignItems))
+    node.setJustifyContent(parseJustify(options.justifyContent))
+    node.setAlignSelf(parseAlign(options.alignSelf))
+
+    if (isDimensionType(options.width)) {
+      this._width = options.width
+      this.yogaNode.setWidth(options.width)
+    }
+    if (isDimensionType(options.height)) {
+      this._height = options.height
+      this.yogaNode.setHeight(options.height)
+    }
+
+    this._positionType = options.position === "absolute" ? "absolute" : "relative"
+    if (this._positionType !== "relative") {
+      node.setPositionType(parsePositionType(this._positionType))
+    }
+
+    this._overflow = options.overflow === "hidden" ? "hidden" : options.overflow === "scroll" ? "scroll" : "visible"
+    if (this._overflow !== "visible") {
+      node.setOverflow(parseOverflow(this._overflow))
+    }
+
+    // TODO: flatten position properties internally as well
+    const hasPositionProps =
+      options.top !== undefined ||
+      options.right !== undefined ||
+      options.bottom !== undefined ||
+      options.left !== undefined
+    if (hasPositionProps) {
+      this._position = {
+        top: options.top,
+        right: options.right,
+        bottom: options.bottom,
+        left: options.left,
+      }
+      this.updateYogaPosition(this._position)
+    }
+
+    if (isSizeType(options.maxWidth)) {
+      node.setMaxWidth(options.maxWidth)
+    }
+    if (isSizeType(options.maxHeight)) {
+      node.setMaxHeight(options.maxHeight)
+    }
+
+    this.setupMarginAndPadding(options)
+  }
+
+  private setupMarginAndPadding(options: RenderableOptions<Renderable>): void {
+    const node = this.yogaNode
+
+    if (isMarginType(options.margin)) {
+      node.setMargin(Edge.All, options.margin)
+    }
+
+    if (isMarginType(options.marginX)) {
+      node.setMargin(Edge.Horizontal, options.marginX)
+    }
+    if (isMarginType(options.marginY)) {
+      node.setMargin(Edge.Vertical, options.marginY)
+    }
+    if (isMarginType(options.marginTop)) {
+      node.setMargin(Edge.Top, options.marginTop)
+    }
+    if (isMarginType(options.marginRight)) {
+      node.setMargin(Edge.Right, options.marginRight)
+    }
+    if (isMarginType(options.marginBottom)) {
+      node.setMargin(Edge.Bottom, options.marginBottom)
+    }
+    if (isMarginType(options.marginLeft)) {
+      node.setMargin(Edge.Left, options.marginLeft)
+    }
+
+    if (isPaddingType(options.padding)) {
+      node.setPadding(Edge.All, options.padding)
+    }
+
+    if (isPaddingType(options.paddingX)) {
+      node.setPadding(Edge.Horizontal, options.paddingX)
+    }
+    if (isPaddingType(options.paddingY)) {
+      node.setPadding(Edge.Vertical, options.paddingY)
+    }
+    if (isPaddingType(options.paddingTop)) {
+      node.setPadding(Edge.Top, options.paddingTop)
+    }
+    if (isPaddingType(options.paddingRight)) {
+      node.setPadding(Edge.Right, options.paddingRight)
+    }
+    if (isPaddingType(options.paddingBottom)) {
+      node.setPadding(Edge.Bottom, options.paddingBottom)
+    }
+    if (isPaddingType(options.paddingLeft)) {
+      node.setPadding(Edge.Left, options.paddingLeft)
+    }
+  }
+
+  set position(positionType: PositionTypeString | null | undefined) {
+    if (!isPositionTypeType(positionType) || this._positionType === positionType) return
+
+    this._positionType = positionType
+    this.yogaNode.setPositionType(parsePositionType(positionType))
+    this.requestRender()
+  }
+
+  get overflow(): OverflowString {
+    return this._overflow
+  }
+
+  set overflow(overflow: OverflowString | null | undefined) {
+    if (!isOverflowType(overflow) || this._overflow === overflow) return
+
+    this._overflow = overflow
+    this.yogaNode.setOverflow(parseOverflow(overflow))
+    this.requestRender()
+  }
+
+  public setPosition(position: Position): void {
+    this._position = { ...this._position, ...position }
+    this.updateYogaPosition(position)
+  }
+
+  private updateYogaPosition(position: Position): void {
+    const node = this.yogaNode
+    const { top, right, bottom, left } = position
+
+    if (isPositionType(top)) {
+      if (top === "auto") {
+        node.setPositionAuto(Edge.Top)
+      } else {
+        node.setPosition(Edge.Top, top)
+      }
+    }
+    if (isPositionType(right)) {
+      if (right === "auto") {
+        node.setPositionAuto(Edge.Right)
+      } else {
+        node.setPosition(Edge.Right, right)
+      }
+    }
+    if (isPositionType(bottom)) {
+      if (bottom === "auto") {
+        node.setPositionAuto(Edge.Bottom)
+      } else {
+        node.setPosition(Edge.Bottom, bottom)
+      }
+    }
+    if (isPositionType(left)) {
+      if (left === "auto") {
+        node.setPositionAuto(Edge.Left)
+      } else {
+        node.setPosition(Edge.Left, left)
+      }
+    }
+    this.requestRender()
+  }
+
+  public set flexGrow(grow: number | null | undefined) {
+    if (grow == null) {
+      this.yogaNode.setFlexGrow(0)
+    } else {
+      this.yogaNode.setFlexGrow(grow)
+    }
+    this.requestRender()
+  }
+
+  public set flexShrink(shrink: number | null | undefined) {
+    const value = shrink == null ? 1 : shrink
+    this._flexShrink = value
+    this.yogaNode.setFlexShrink(value)
+    this.requestRender()
+  }
+
+  public set flexDirection(direction: FlexDirectionString | null | undefined) {
+    this.yogaNode.setFlexDirection(parseFlexDirection(direction))
+    this.requestRender()
+  }
+
+  public set flexWrap(wrap: WrapString | null | undefined) {
+    this.yogaNode.setFlexWrap(parseWrap(wrap))
+    this.requestRender()
+  }
+
+  public set alignItems(alignItems: AlignString | null | undefined) {
+    this.yogaNode.setAlignItems(parseAlignItems(alignItems))
+    this.requestRender()
+  }
+
+  public set justifyContent(justifyContent: JustifyString | null | undefined) {
+    this.yogaNode.setJustifyContent(parseJustify(justifyContent))
+    this.requestRender()
+  }
+
+  public set alignSelf(alignSelf: AlignString | null | undefined) {
+    this.yogaNode.setAlignSelf(parseAlign(alignSelf))
+    this.requestRender()
+  }
+
+  public set flexBasis(basis: number | "auto" | null | undefined) {
+    if (isFlexBasisType(basis)) {
+      this.yogaNode.setFlexBasis(basis)
+      this.requestRender()
+    }
+  }
+
+  public set minWidth(minWidth: number | `${number}%` | null | undefined) {
+    if (isSizeType(minWidth)) {
+      this.yogaNode.setMinWidth(minWidth)
+      this.requestRender()
+    }
+  }
+
+  public set maxWidth(maxWidth: number | `${number}%` | null | undefined) {
+    if (isSizeType(maxWidth)) {
+      this.yogaNode.setMaxWidth(maxWidth)
+      this.requestRender()
+    }
+  }
+
+  public set minHeight(minHeight: number | `${number}%` | null | undefined) {
+    if (isSizeType(minHeight)) {
+      this.yogaNode.setMinHeight(minHeight)
+      this.requestRender()
+    }
+  }
+
+  public set maxHeight(maxHeight: number | `${number}%` | null | undefined) {
+    if (isSizeType(maxHeight)) {
+      this.yogaNode.setMaxHeight(maxHeight)
+      this.requestRender()
+    }
+  }
+
+  public set margin(margin: number | "auto" | `${number}%` | null | undefined) {
+    if (isMarginType(margin)) {
+      this.yogaNode.setMargin(Edge.All, margin)
+      this.requestRender()
+    }
+  }
+
+  public set marginX(marginX: number | "auto" | `${number}%` | null | undefined) {
+    if (isMarginType(marginX)) {
+      this.yogaNode.setMargin(Edge.Horizontal, marginX)
+      this.requestRender()
+    }
+  }
+
+  public set marginY(marginY: number | "auto" | `${number}%` | null | undefined) {
+    if (isMarginType(marginY)) {
+      this.yogaNode.setMargin(Edge.Vertical, marginY)
+      this.requestRender()
+    }
+  }
+
+  public set marginTop(margin: number | "auto" | `${number}%` | null | undefined) {
+    if (isMarginType(margin)) {
+      this.yogaNode.setMargin(Edge.Top, margin)
+      this.requestRender()
+    }
+  }
+
+  public set marginRight(margin: number | "auto" | `${number}%` | null | undefined) {
+    if (isMarginType(margin)) {
+      this.yogaNode.setMargin(Edge.Right, margin)
+      this.requestRender()
+    }
+  }
+
+  public set marginBottom(margin: number | "auto" | `${number}%` | null | undefined) {
+    if (isMarginType(margin)) {
+      this.yogaNode.setMargin(Edge.Bottom, margin)
+      this.requestRender()
+    }
+  }
+
+  public set marginLeft(margin: number | "auto" | `${number}%` | null | undefined) {
+    if (isMarginType(margin)) {
+      this.yogaNode.setMargin(Edge.Left, margin)
+      this.requestRender()
+    }
+  }
+
+  public set padding(padding: number | `${number}%` | null | undefined) {
+    if (isPaddingType(padding)) {
+      this.yogaNode.setPadding(Edge.All, padding)
+      this.requestRender()
+    }
+  }
+
+  public set paddingX(paddingX: number | `${number}%` | null | undefined) {
+    if (isPaddingType(paddingX)) {
+      this.yogaNode.setPadding(Edge.Horizontal, paddingX)
+      this.requestRender()
+    }
+  }
+
+  public set paddingY(paddingY: number | `${number}%` | null | undefined) {
+    if (isPaddingType(paddingY)) {
+      this.yogaNode.setPadding(Edge.Vertical, paddingY)
+      this.requestRender()
+    }
+  }
+
+  public set paddingTop(padding: number | `${number}%` | null | undefined) {
+    if (isPaddingType(padding)) {
+      this.yogaNode.setPadding(Edge.Top, padding)
+      this.requestRender()
+    }
+  }
+
+  public set paddingRight(padding: number | `${number}%` | null | undefined) {
+    if (isPaddingType(padding)) {
+      this.yogaNode.setPadding(Edge.Right, padding)
+      this.requestRender()
+    }
+  }
+
+  public set paddingBottom(padding: number | `${number}%` | null | undefined) {
+    if (isPaddingType(padding)) {
+      this.yogaNode.setPadding(Edge.Bottom, padding)
+      this.requestRender()
+    }
+  }
+
+  public set paddingLeft(padding: number | `${number}%` | null | undefined) {
+    if (isPaddingType(padding)) {
+      this.yogaNode.setPadding(Edge.Left, padding)
+      this.requestRender()
+    }
+  }
+
+  public getLayoutNode(): YogaNode {
+    return this.yogaNode
+  }
+
+  public updateFromLayout(): void {
+    const layout = this.yogaNode.getComputedLayout()
+
+    const oldX = this._x
+    const oldY = this._y
+    const oldWidth = this._widthValue
+    const oldHeight = this._heightValue
+
+    this._x = layout.left
+    this._y = layout.top
+
+    const newWidth = Math.max(layout.width, 1)
+    const newHeight = Math.max(layout.height, 1)
+    const sizeChanged = oldWidth !== newWidth || oldHeight !== newHeight
+
+    this._widthValue = newWidth
+    this._heightValue = newHeight
+
+    if (sizeChanged) {
+      this.onLayoutResize(newWidth, newHeight)
+    }
+
+    const positionChanged = oldX !== this._x || oldY !== this._y
+    if (positionChanged) {
+      if (this.parent) this.parent.childrenPrimarySortDirty = true
+    }
+  }
+
+  protected onLayoutResize(width: number, height: number): void {
+    if (this._visible) {
+      // TODO: Should probably .markDirty()
+      this.handleFrameBufferResize(width, height)
+      this.onResize(width, height)
+      this.requestRender()
+    }
+  }
+
+  protected handleFrameBufferResize(width: number, height: number): void {
+    if (!this.buffered) return
+
+    if (width <= 0 || height <= 0) {
+      return
+    }
+
+    if (this.frameBuffer) {
+      this.frameBuffer.resize(width, height)
+    } else {
+      this.createFrameBuffer()
+    }
+  }
+
+  protected createFrameBuffer(): void {
+    const w = this.width
+    const h = this.height
+
+    if (w <= 0 || h <= 0) {
+      return
+    }
+
+    try {
+      const widthMethod = this._ctx.widthMethod
+      this.frameBuffer = OptimizedBuffer.create(w, h, widthMethod, { respectAlpha: true, id: `framebuffer-${this.id}` })
+    } catch (error) {
+      console.error(`Failed to create frame buffer for ${this.id}:`, error)
+      this.frameBuffer = null
+    }
+  }
+
+  /**
+   * This will be called during a render pass.
+   * Requesting a render during a render pass will drop the requested render.
+   * If you need to request a render during a render pass, use process.nextTick.
+   */
+  protected onResize(width: number, height: number): void {
+    this.onSizeChange?.()
+    this.emit("resize")
+    // Override in subclasses for additional resize logic
+  }
+
+  private replaceParent(obj: Renderable) {
+    if (obj.parent) {
+      obj.parent.remove(obj.id)
+    }
+    obj.parent = this
+  }
+
+  public override add(obj: Renderable | VNode<any, any[]> | unknown, index?: number): number {
+    if (!obj) {
+      return -1
+    }
+
+    const renderable = maybeMakeRenderable(this._ctx, obj)
+    if (!renderable) {
+      return -1
+    }
+
+    if (renderable.isDestroyed) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(`Renderable with id ${renderable.id} was already destroyed, skipping add`)
+      }
+      return -1
+    }
+
+    const anchorRenderable = index !== undefined ? this._childrenInLayoutOrder[index] : undefined
+
+    if (anchorRenderable) {
+      return this.insertBefore(renderable, anchorRenderable)
+    }
+
+    if (renderable.parent === this) {
+      this.yogaNode.removeChild(renderable.getLayoutNode())
+      this._childrenInLayoutOrder.splice(this._childrenInLayoutOrder.indexOf(renderable), 1)
+    } else {
+      this.replaceParent(renderable)
+      this.needsZIndexSort = true
+      this.renderableMapById.set(renderable.id, renderable)
+      this._childrenInZIndexOrder.push(renderable)
+
+      if (typeof renderable.onLifecyclePass === "function") {
+        this._ctx.registerLifecyclePass(renderable)
+      }
+
+      if (renderable._liveCount > 0) {
+        this.propagateLiveCount(renderable._liveCount)
+      }
+    }
+
+    const childLayoutNode = renderable.getLayoutNode()
+    const insertedIndex = this._childrenInLayoutOrder.length
+    this._childrenInLayoutOrder.push(renderable)
+    this.yogaNode.insertChild(childLayoutNode, insertedIndex)
+
+    this.childrenPrimarySortDirty = true
+    this._shouldUpdateBefore.add(renderable)
+
+    this.requestRender()
+
+    return insertedIndex
+  }
+
+  override insertBefore(obj: Renderable | VNode<any, any[]> | unknown, anchor?: Renderable | unknown): number {
+    if (!anchor) {
+      return this.add(obj)
+    }
+
+    if (!obj) {
+      return -1
+    }
+
+    const renderable = maybeMakeRenderable(this._ctx, obj)
+    if (!renderable) {
+      return -1
+    }
+
+    if (renderable.isDestroyed) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(`Renderable with id ${renderable.id} was already destroyed, skipping insertBefore`)
+      }
+      return -1
+    }
+
+    if (!isRenderable(anchor)) {
+      throw new Error("Anchor must be a Renderable")
+    }
+
+    if (anchor.isDestroyed) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(`Anchor with id ${anchor.id} was already destroyed, skipping insertBefore`)
+      }
+      return -1
+    }
+
+    if (!this.renderableMapById.has(anchor.id)) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(`Anchor with id ${anchor.id} does not exist within the parent ${this.id}, skipping insertBefore`)
+      }
+      return -1
+    }
+
+    if (renderable === anchor || renderable.id === anchor.id) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(`Anchor is the same as the node ${renderable.id} being inserted, skipping insertBefore`)
+      }
+      return -1
+    }
+
+    if (renderable.parent === this) {
+      this.yogaNode.removeChild(renderable.getLayoutNode())
+      this._childrenInLayoutOrder.splice(this._childrenInLayoutOrder.indexOf(renderable), 1)
+    } else {
+      this.replaceParent(renderable)
+      this.needsZIndexSort = true
+      this.renderableMapById.set(renderable.id, renderable)
+      this._childrenInZIndexOrder.push(renderable)
+
+      if (typeof renderable.onLifecyclePass === "function") {
+        this._ctx.registerLifecyclePass(renderable)
+      }
+
+      if (renderable._liveCount > 0) {
+        this.propagateLiveCount(renderable._liveCount)
+      }
+    }
+
+    this.childrenPrimarySortDirty = true
+
+    const anchorIndex = this._childrenInLayoutOrder.indexOf(anchor)
+    const insertedIndex = Math.max(0, Math.min(anchorIndex, this._childrenInLayoutOrder.length))
+
+    this._childrenInLayoutOrder.splice(insertedIndex, 0, renderable)
+    this.yogaNode.insertChild(renderable.getLayoutNode(), insertedIndex)
+
+    this._shouldUpdateBefore.add(renderable)
+
+    this.requestRender()
+
+    return insertedIndex
+  }
+
+  // TODO: that naming is meh
+  public override getRenderable(id: string): Renderable | undefined {
+    return this.renderableMapById.get(id)
+  }
+
+  public override remove(id: string): void {
+    if (!id) {
+      return
+    }
+
+    if (this.renderableMapById.has(id)) {
+      const obj = this.renderableMapById.get(id)
+      if (obj) {
+        if (obj._liveCount > 0) {
+          this.propagateLiveCount(-obj._liveCount)
+        }
+
+        const childLayoutNode = obj.getLayoutNode()
+        this.yogaNode.removeChild(childLayoutNode)
+        this.requestRender()
+
+        obj.onRemove()
+        obj.parent = null
+        this._ctx.unregisterLifecyclePass(obj)
+        this.renderableMapById.delete(id)
+
+        const index = this._childrenInLayoutOrder.findIndex((obj) => obj.id === id)
+        if (index !== -1) {
+          this._childrenInLayoutOrder.splice(index, 1)
+        }
+
+        const zIndexIndex = this._childrenInZIndexOrder.findIndex((obj) => obj.id === id)
+        if (zIndexIndex !== -1) {
+          this._childrenInZIndexOrder.splice(zIndexIndex, 1)
+        }
+
+        this.childrenPrimarySortDirty = true
+      }
+    }
+  }
+
+  protected onRemove(): void {
+    // Default implementation: do nothing
+    // Override this method to provide custom removal logic
+  }
+
+  public override getChildren(): Renderable[] {
+    return [...this._childrenInLayoutOrder]
+  }
+
+  public override getChildrenCount(): number {
+    return this._childrenInLayoutOrder.length
+  }
+
+  public updateLayout(deltaTime: number, renderList: RenderCommand[] = []): void {
+    if (!this.visible) return
+
+    this.onUpdate(deltaTime)
+
+    // If destroyed during onUpdate, don't add to render list
+    if (this._isDestroyed) return
+
+    // NOTE: worst case updateFromLayout is called throughout the whole tree,
+    // which currently still has yoga performance issues.
+    // This can be mitigated at some point when the layout tree moved to native,
+    // as in the native yoga tree we can use events during the calculateLayout phase,
+    // and anctually know if a child has changed or not.
+    // That would allow us to to generate optimised render commands,
+    // including the layout updates, in one pass.
+    this.updateFromLayout()
+
+    // Update newly added children before getting visible children
+    // This ensures their positions are current when culling happens
+    if (this._shouldUpdateBefore.size > 0) {
+      for (const child of this._shouldUpdateBefore) {
+        if (!child.isDestroyed) {
+          child.updateFromLayout()
+        }
+      }
+      this._shouldUpdateBefore.clear()
+    }
+
+    // Check again after updateFromLayout, which calls onResize/onSizeChange
+    if (this._isDestroyed) return
+
+    // Push opacity BEFORE rendering this element so it affects this element and all children
+    const shouldPushOpacity = this._opacity < 1.0
+    if (shouldPushOpacity) {
+      renderList.push({ action: "pushOpacity", opacity: this._opacity })
+    }
+
+    renderList.push({ action: "render", renderable: this })
+
+    this.ensureZIndexSorted()
+
+    const shouldPushScissor = this._overflow !== "visible" && this.width > 0 && this.height > 0
+    if (shouldPushScissor) {
+      const scissorRect = this.getScissorRect()
+      renderList.push({
+        action: "pushScissorRect",
+        x: scissorRect.x,
+        y: scissorRect.y,
+        width: scissorRect.width,
+        height: scissorRect.height,
+        screenX: this.x,
+        screenY: this.y,
+      })
+    }
+    const visibleChildren = this._getVisibleChildren()
+    for (const child of this._childrenInZIndexOrder) {
+      if (!visibleChildren.includes(child.num)) {
+        child.updateFromLayout()
+        continue
+      }
+      child.updateLayout(deltaTime, renderList)
+    }
+
+    if (shouldPushScissor) {
+      renderList.push({ action: "popScissorRect" })
+    }
+    if (shouldPushOpacity) {
+      renderList.push({ action: "popOpacity" })
+    }
+  }
+
+  public render(buffer: OptimizedBuffer, deltaTime: number): void {
+    let renderBuffer = buffer
+    if (this.buffered && this.frameBuffer) {
+      renderBuffer = this.frameBuffer
+    }
+
+    if (this.renderBefore) {
+      this.renderBefore.call(this, renderBuffer, deltaTime)
+    }
+
+    this.renderSelf(renderBuffer, deltaTime)
+
+    if (this.renderAfter) {
+      this.renderAfter.call(this, renderBuffer, deltaTime)
+    }
+
+    this.markClean()
+    this._ctx.addToHitGrid(this.x, this.y, this.width, this.height, this.num)
+
+    if (this.buffered && this.frameBuffer) {
+      buffer.drawFrameBuffer(this.x, this.y, this.frameBuffer)
+    }
+  }
+
+  protected _getVisibleChildren(): number[] {
+    return this._childrenInZIndexOrder.map((child) => child.num)
+  }
+
+  protected onUpdate(deltaTime: number): void {
+    // Default implementation: do nothing
+    // Override this method to provide custom rendering
+  }
+
+  protected getScissorRect(): { x: number; y: number; width: number; height: number } {
+    return {
+      x: this.buffered ? 0 : this.x,
+      y: this.buffered ? 0 : this.y,
+      width: this.width,
+      height: this.height,
+    }
+  }
+
+  protected renderSelf(buffer: OptimizedBuffer, deltaTime: number): void {
+    // Default implementation: do nothing
+    // Override this method to provide custom rendering
+  }
+
+  public get isDestroyed(): boolean {
+    return this._isDestroyed
+  }
+
+  public override destroy(): void {
+    if (this._isDestroyed) {
+      return
+    }
+
+    this._isDestroyed = true
+
+    if (this.parent) {
+      this.parent.remove(this.id)
+    }
+
+    if (this.frameBuffer) {
+      this.frameBuffer.destroy()
+      this.frameBuffer = null
+    }
+
+    for (const child of this._childrenInLayoutOrder) {
+      this.remove(child.id)
+    }
+
+    this._childrenInLayoutOrder = []
+    this.renderableMapById.clear()
+    Renderable.renderablesByNumber.delete(this.num)
+
+    this.blur()
+    this.removeAllListeners()
+
+    this.destroySelf()
+
+    try {
+      this.yogaNode.free()
+    } catch (e) {
+      // Might be already freed and will throw an error if we try to free it again
+    }
+  }
+
+  public override destroyRecursively(): void {
+    // Destroy children first to ensure removal as destroy clears child array
+    // Make a copy of the children array to avoid iteration issues when children are destroyed
+    const children = [...this._childrenInLayoutOrder]
+    for (const child of children) {
+      child.destroyRecursively()
+    }
+    this.destroy()
+  }
+
+  protected destroySelf(): void {
+    // Default implementation: do nothing else
+    // Override this method to provide custom cleanup
+  }
+
+  public processMouseEvent(event: MouseEvent): void {
+    this._mouseListener?.call(this, event)
+    this._mouseListeners[event.type]?.call(this, event)
+    this.onMouseEvent(event)
+
+    if (this.parent && !event.propagationStopped) {
+      this.parent.processMouseEvent(event)
+    }
+  }
+
+  protected onMouseEvent(event: MouseEvent): void {
+    // Default implementation: do nothing
+    // Override this method to provide custom event handling
+  }
+
+  public set onMouse(handler: ((event: MouseEvent) => void) | undefined) {
+    if (handler) this._mouseListener = handler
+    else this._mouseListener = null
+  }
+
+  public set onMouseDown(handler: ((event: MouseEvent) => void) | undefined) {
+    if (handler) this._mouseListeners["down"] = handler
+    else delete this._mouseListeners["down"]
+  }
+
+  public set onMouseUp(handler: ((event: MouseEvent) => void) | undefined) {
+    if (handler) this._mouseListeners["up"] = handler
+    else delete this._mouseListeners["up"]
+  }
+
+  public set onMouseMove(handler: ((event: MouseEvent) => void) | undefined) {
+    if (handler) this._mouseListeners["move"] = handler
+    else delete this._mouseListeners["move"]
+  }
+
+  public set onMouseDrag(handler: ((event: MouseEvent) => void) | undefined) {
+    if (handler) this._mouseListeners["drag"] = handler
+    else delete this._mouseListeners["drag"]
+  }
+
+  public set onMouseDragEnd(handler: ((event: MouseEvent) => void) | undefined) {
+    if (handler) this._mouseListeners["drag-end"] = handler
+    else delete this._mouseListeners["drag-end"]
+  }
+
+  public set onMouseDrop(handler: ((event: MouseEvent) => void) | undefined) {
+    if (handler) this._mouseListeners["drop"] = handler
+    else delete this._mouseListeners["drop"]
+  }
+
+  public set onMouseOver(handler: ((event: MouseEvent) => void) | undefined) {
+    if (handler) this._mouseListeners["over"] = handler
+    else delete this._mouseListeners["over"]
+  }
+
+  public set onMouseOut(handler: ((event: MouseEvent) => void) | undefined) {
+    if (handler) this._mouseListeners["out"] = handler
+    else delete this._mouseListeners["out"]
+  }
+
+  public set onMouseScroll(handler: ((event: MouseEvent) => void) | undefined) {
+    if (handler) this._mouseListeners["scroll"] = handler
+    else delete this._mouseListeners["scroll"]
+  }
+
+  public set onPaste(handler: ((event: PasteEvent) => void) | undefined) {
+    this._pasteListener = handler
+  }
+  public get onPaste(): ((event: PasteEvent) => void) | undefined {
+    return this._pasteListener
+  }
+
+  public set onKeyDown(handler: ((key: KeyEvent) => void) | undefined) {
+    if (handler) this._keyListeners["down"] = handler
+    else delete this._keyListeners["down"]
+  }
+  public get onKeyDown(): ((key: KeyEvent) => void) | undefined {
+    return this._keyListeners["down"]
+  }
+
+  public set onSizeChange(handler: (() => void) | undefined) {
+    this._sizeChangeListener = handler
+  }
+  public get onSizeChange(): (() => void) | undefined {
+    return this._sizeChangeListener
+  }
+
+  private applyEventOptions(options: RenderableOptions<Renderable>): void {
+    this.onMouse = options.onMouse
+    this.onMouseDown = options.onMouseDown
+    this.onMouseUp = options.onMouseUp
+    this.onMouseMove = options.onMouseMove
+    this.onMouseDrag = options.onMouseDrag
+    this.onMouseDragEnd = options.onMouseDragEnd
+    this.onMouseDrop = options.onMouseDrop
+    this.onMouseOver = options.onMouseOver
+    this.onMouseOut = options.onMouseOut
+    this.onMouseScroll = options.onMouseScroll
+    this.onPaste = options.onPaste
+    this.onKeyDown = options.onKeyDown
+    this.onSizeChange = options.onSizeChange
+  }
+}
+
+interface RenderCommandBase {
+  action: "render" | "pushScissorRect" | "popScissorRect" | "pushOpacity" | "popOpacity"
+}
+
+interface RenderCommandPushScissorRect extends RenderCommandBase {
+  action: "pushScissorRect"
+  x: number
+  y: number
+  width: number
+  height: number
+  screenX: number
+  screenY: number
+}
+
+interface RenderCommandPopScissorRect extends RenderCommandBase {
+  action: "popScissorRect"
+}
+
+interface RenderCommandRender extends RenderCommandBase {
+  action: "render"
+  renderable: Renderable
+}
+
+interface RenderCommandPushOpacity extends RenderCommandBase {
+  action: "pushOpacity"
+  opacity: number
+}
+
+interface RenderCommandPopOpacity extends RenderCommandBase {
+  action: "popOpacity"
+}
+
+export type RenderCommand =
+  | RenderCommandPushScissorRect
+  | RenderCommandPopScissorRect
+  | RenderCommandRender
+  | RenderCommandPushOpacity
+  | RenderCommandPopOpacity
+
+export class RootRenderable extends Renderable {
+  private renderList: RenderCommand[] = []
+
+  constructor(ctx: RenderContext) {
+    super(ctx, { id: "__root__", zIndex: 0, visible: true, width: ctx.width, height: ctx.height, enableLayout: true })
+
+    if (this.yogaNode) {
+      this.yogaNode.free()
+    }
+
+    this.yogaNode = Yoga.Node.create(yogaConfig)
+    this.yogaNode.setWidth(ctx.width)
+    this.yogaNode.setHeight(ctx.height)
+    this.yogaNode.setFlexDirection(FlexDirection.Column)
+
+    this.calculateLayout()
+  }
+
+  public override render(buffer: OptimizedBuffer, deltaTime: number): void {
+    if (!this.visible) return
+
+    // 0. Run lifecycle pass
+    for (const renderable of this._ctx.getLifecyclePasses()) {
+      renderable.onLifecyclePass?.call(renderable)
+    }
+
+    // NOTE: Strictly speaking, this is a 3-pass rendering process:
+    // 1. Calculate layout from root
+    // 2. Update layout throughout the tree and collect render list
+    // 3. Render all collected renderables
+    // Should be 2-pass by hooking into the calculateLayout phase,
+    // but that's only possible if we move the layout tree to native.
+
+    // 1. Calculate layout from root
+    if (this.yogaNode.isDirty()) {
+      this.calculateLayout()
+    }
+
+    // 2. Update layout throughout the tree and collect render list
+    this.renderList.length = 0
+    this.updateLayout(deltaTime, this.renderList)
+
+    // 3. Render all collected renderables
+    this._ctx.clearHitGridScissorRects()
+    for (let i = 1; i < this.renderList.length; i++) {
+      const command = this.renderList[i]
+      switch (command.action) {
+        case "render":
+          // Skip if renderable was destroyed during a previous render callback
+          if (!command.renderable.isDestroyed) {
+            command.renderable.render(buffer, deltaTime)
+          }
+          break
+        case "pushScissorRect":
+          buffer.pushScissorRect(command.x, command.y, command.width, command.height)
+          this._ctx.pushHitGridScissorRect(command.screenX, command.screenY, command.width, command.height)
+          break
+        case "popScissorRect":
+          buffer.popScissorRect()
+          this._ctx.popHitGridScissorRect()
+          break
+        case "pushOpacity":
+          buffer.pushOpacity(command.opacity)
+          break
+        case "popOpacity":
+          buffer.popOpacity()
+          break
+      }
+    }
+  }
+
+  protected override propagateLiveCount(delta: number): void {
+    const oldCount = this._liveCount
+    this._liveCount += delta
+
+    if (oldCount === 0 && this._liveCount > 0) {
+      this._ctx.requestLive()
+    } else if (oldCount > 0 && this._liveCount === 0) {
+      this._ctx.dropLive()
+    }
+  }
+
+  public calculateLayout(): void {
+    this.yogaNode.calculateLayout(this.width, this.height, Direction.LTR)
+    this.emit(LayoutEvents.LAYOUT_CHANGED)
+  }
+
+  public resize(width: number, height: number): void {
+    this.width = width
+    this.height = height
+
+    this.emit(LayoutEvents.RESIZED, { width, height })
+  }
+}