Kotlin DOM API Compatibility

// Core DOM manipulation utilities
import kotlinx.dom.*
import kotlinx.browser.*

// W3C DOM APIs
import org.w3c.dom.*
import org.w3c.dom.events.*

// Media APIs
import org.w3c.dom.mediacapture.*
import org.w3c.files.*

// Graphics APIs  
import org.w3c.dom.svg.*
import org.khronos.webgl.*

// Networking APIs
import org.w3c.fetch.*
import org.w3c.xhr.*

import kotlinx.browser.document
import kotlinx.browser.window
import kotlinx.dom.*
import org.w3c.dom.HTMLButtonElement
import org.w3c.dom.events.Event

// Create and manipulate DOM elements
val button = document.createElement("button") {
    textContent = "Click me!"
    addClass("btn", "btn-primary")
}

// Add event handling
button.addEventListener("click") { event ->
    window.alert("Button clicked!")
}

// Append to document
document.body?.appendChild(button)

// DOM query and manipulation
val elements = document.querySelectorAll(".item")
elements.forEach { element ->
    element.addClass("processed")
    element.appendText("✓")
}

// DOM access
val document: Document
val window: Window

// Element creation and manipulation
fun Document.createElement(name: String, init: Element.() -> Unit): Element
fun Element.appendElement(name: String, init: Element.() -> Unit): Element

// HTML element interfaces
interface HTMLElement : Element, GlobalEventHandlers, ElementContentEditable
interface HTMLButtonElement : HTMLElement
interface HTMLInputElement : HTMLElement

interface Event {
    val type: String
    val target: EventTarget?
    val currentTarget: EventTarget?
    fun preventDefault()
    fun stopPropagation()
}

interface EventTarget {
    fun addEventListener(type: String, callback: EventListener?, options: dynamic = definedExternally)
    fun removeEventListener(type: String, callback: EventListener?, options: dynamic = definedExternally)
    fun dispatchEvent(event: Event): Boolean
}

class MouseEvent : UIEvent
class KeyboardEvent : UIEvent
class TouchEvent : UIEvent

interface MediaStream : EventTarget, MediaProvider {
    val active: Boolean
    val id: String
    fun getAudioTracks(): Array<MediaStreamTrack>
    fun getVideoTracks(): Array<MediaStreamTrack>
    fun addTrack(track: MediaStreamTrack)
    fun removeTrack(track: MediaStreamTrack)
}

interface MediaDevices : EventTarget {
    fun getUserMedia(constraints: MediaStreamConstraints = definedExternally): Promise<MediaStream>
    fun getDisplayMedia(constraints: MediaStreamConstraints = definedExternally): Promise<MediaStream>
    fun enumerateDevices(): Promise<Array<MediaDeviceInfo>>
}

class Request(input: dynamic, init: RequestInit = definedExternally) : Body {
    val method: String
    val url: String
    val headers: Headers
    fun clone(): Request
}

class Response(body: dynamic = definedExternally, init: ResponseInit = definedExternally) : Body {
    val status: Short
    val statusText: String
    val ok: Boolean
    fun clone(): Response
}

class Headers(init: dynamic = definedExternally) {
    fun get(name: String): String?
    fun set(name: String, value: String)
    fun append(name: String, value: String)
    fun delete(name: String)
}

// Media Capture
interface MediaStream : EventTarget, MediaProvider {
    val active: Boolean
    val id: String
    fun getAudioTracks(): Array<MediaStreamTrack>
    fun getVideoTracks(): Array<MediaStreamTrack>
}

// File API
class Blob(blobParts: Array<dynamic> = definedExternally, options: BlobPropertyBag = definedExternally) : MediaProvider
class File(fileBits: Array<dynamic>, fileName: String) : Blob

// SVG Graphics
interface SVGSVGElement : SVGGraphicsElement, SVGFitToViewBox
interface SVGPathElement : SVGGeometryElement

// WebGL
interface WebGLRenderingContext : WebGLRenderingContextBase
class Float32Array : ArrayBufferView

// Service Workers
interface ServiceWorker : EventTarget, AbstractWorker
interface Cache
class Notification : EventTarget

// Extension properties
val Node.isText: Boolean
val Node.isElement: Boolean

// DOM manipulation
fun Node.clear()
fun Element.appendText(text: String): Element

// CSS class management  
fun Element.hasClass(cssClass: String): Boolean
fun Element.addClass(vararg cssClasses: String): Boolean
fun Element.removeClass(vararg cssClasses: String): Boolean

// Element builders
fun Document.createElement(name: String, init: Element.() -> Unit): Element
fun Element.appendElement(name: String, init: Element.() -> Unit): Element

// Browser globals
val window: Window
val document: Document
val localStorage: Storage
val sessionStorage: Storage

external interface Window : EventTarget, GlobalEventHandlers, WindowEventHandlers {
    val document: Document
    val location: Location
    val history: History
    val localStorage: Storage
    val sessionStorage: Storage
    fun alert(message: String)
    fun confirm(message: String): Boolean
    fun prompt(message: String, defaultText: String = definedExternally): String?
}

external interface Document : Node, DocumentOrShadowRoot, GlobalEventHandlers {
    val documentElement: Element?
    val head: HTMLHeadElement?
    val body: HTMLElement?
    fun createElement(localName: String): Element
    fun createTextNode(data: String): Text
    fun getElementById(elementId: String): Element?
    fun querySelector(selectors: String): Element?
    fun querySelectorAll(selectors: String): NodeList
}

external interface Element : Node, ChildNode, ParentNode, Slotable {
    val tagName: String
    val id: String
    val className: String
    val classList: DOMTokenList
    fun getAttribute(qualifiedName: String): String?
    fun setAttribute(qualifiedName: String, value: String)
    fun removeAttribute(qualifiedName: String)
    fun querySelector(selectors: String): Element?
    fun querySelectorAll(selectors: String): NodeList
}

external interface EventInit {
    var bubbles: Boolean?
    var cancelable: Boolean?
    var composed: Boolean?
}

external interface MouseEventInit : EventModifierInit {
    var screenX: Int?
    var screenY: Int?
    var clientX: Int?
    var clientY: Int?
    var button: Short?
    var buttons: Short?
    var relatedTarget: EventTarget?
}

external interface KeyboardEventInit : EventModifierInit {
    var key: String?
    var code: String?
    var location: Int?
    var repeat: Boolean?
    var isComposing: Boolean?
}

external interface MediaStreamConstraints {
    var video: dynamic
    var audio: dynamic
}

external interface MediaTrackConstraints {
    var width: dynamic
    var height: dynamic
    var aspectRatio: dynamic
    var frameRate: dynamic
    var facingMode: dynamic
    var deviceId: dynamic
}

external interface MediaDeviceInfo {
    val deviceId: String
    val kind: MediaDeviceKind
    val label: String
    val groupId: String
}