@nice2dev/game-engine 1.3.15 → 1.3.16

package/dist/esm/native-engine/InputSystem.js

@@ -1,1176 +1,1111 @@
-/**
- * @file InputSystem.ts
- * @description Input & UI System for Nice2Dev Game Engine
- * PRO-1.11.5: Input & UI System
- *
- * Features:
- * - Keyboard, Mouse, Gamepad, Touch input
- * - Input mapping and actions
- * - Input rebinding
- * - In-game UI system
- * - Immediate mode GUI (IMGUI-style)
- */
-// ============================================================
-// Input System
-// ============================================================
 class InputSystem {
-    constructor() {
-        this.canvas = null;
-        this.inputMaps = new Map();
-        this.activeInputMaps = new Set();
-        this.gamepads = new Map();
-        this.actionCallbacks = new Map();
-        this.keyboard = new KeyboardStateImpl();
-        this.mouse = new MouseStateImpl();
-        this.touch = new TouchStateImpl();
-    }
-    // ─── Initialization ────────────────────────────────────
-    initialize(canvas) {
-        this.canvas = canvas;
-        // Keyboard events
-        window.addEventListener('keydown', this.handleKeyDown.bind(this));
-        window.addEventListener('keyup', this.handleKeyUp.bind(this));
-        // Mouse events
-        canvas.addEventListener('mousemove', this.handleMouseMove.bind(this));
-        canvas.addEventListener('mousedown', this.handleMouseDown.bind(this));
-        canvas.addEventListener('mouseup', this.handleMouseUp.bind(this));
-        canvas.addEventListener('wheel', this.handleWheel.bind(this));
-        canvas.addEventListener('contextmenu', (e) => e.preventDefault());
-        // Pointer lock
-        document.addEventListener('pointerlockchange', this.handlePointerLockChange.bind(this));
-        // Gamepad events
-        window.addEventListener('gamepadconnected', this.handleGamepadConnected.bind(this));
-        window.addEventListener('gamepaddisconnected', this.handleGamepadDisconnected.bind(this));
-        // Touch events
-        canvas.addEventListener('touchstart', this.handleTouchStart.bind(this));
-        canvas.addEventListener('touchmove', this.handleTouchMove.bind(this));
-        canvas.addEventListener('touchend', this.handleTouchEnd.bind(this));
-        canvas.addEventListener('touchcancel', this.handleTouchCancel.bind(this));
-    }
-    dispose() {
-        // Remove all event listeners
-        if (this.canvas) ;
-    }
-    // ─── Input Maps ────────────────────────────────────────
-    createInputMap(name, actions) {
-        const map = new InputMapImpl(name, actions);
-        this.inputMaps.set(name, map);
-        return map;
-    }
-    getInputMap(name) {
-        return this.inputMaps.get(name);
-    }
-    enableInputMap(name) {
-        const map = this.inputMaps.get(name);
-        if (map) {
-            map.enabled = true;
-            this.activeInputMaps.add(name);
+  constructor() {
+    this.canvas = null;
+    this.inputMaps = /* @__PURE__ */ new Map();
+    this.activeInputMaps = /* @__PURE__ */ new Set();
+    this.gamepads = /* @__PURE__ */ new Map();
+    this.actionCallbacks = /* @__PURE__ */ new Map();
+    this.keyboard = new KeyboardStateImpl();
+    this.mouse = new MouseStateImpl();
+    this.touch = new TouchStateImpl();
+  }
+  // ─── Initialization ────────────────────────────────────
+  initialize(canvas) {
+    this.canvas = canvas;
+    window.addEventListener("keydown", this.handleKeyDown.bind(this));
+    window.addEventListener("keyup", this.handleKeyUp.bind(this));
+    canvas.addEventListener("mousemove", this.handleMouseMove.bind(this));
+    canvas.addEventListener("mousedown", this.handleMouseDown.bind(this));
+    canvas.addEventListener("mouseup", this.handleMouseUp.bind(this));
+    canvas.addEventListener("wheel", this.handleWheel.bind(this));
+    canvas.addEventListener("contextmenu", (e) => e.preventDefault());
+    document.addEventListener("pointerlockchange", this.handlePointerLockChange.bind(this));
+    window.addEventListener("gamepadconnected", this.handleGamepadConnected.bind(this));
+    window.addEventListener("gamepaddisconnected", this.handleGamepadDisconnected.bind(this));
+    canvas.addEventListener("touchstart", this.handleTouchStart.bind(this));
+    canvas.addEventListener("touchmove", this.handleTouchMove.bind(this));
+    canvas.addEventListener("touchend", this.handleTouchEnd.bind(this));
+    canvas.addEventListener("touchcancel", this.handleTouchCancel.bind(this));
+  }
+  dispose() {
+    if (this.canvas) ;
+  }
+  // ─── Input Maps ────────────────────────────────────────
+  createInputMap(name, actions) {
+    const map = new InputMapImpl(name, actions);
+    this.inputMaps.set(name, map);
+    return map;
+  }
+  getInputMap(name) {
+    return this.inputMaps.get(name);
+  }
+  enableInputMap(name) {
+    const map = this.inputMaps.get(name);
+    if (map) {
+      map.enabled = true;
+      this.activeInputMaps.add(name);
+    }
+  }
+  disableInputMap(name) {
+    const map = this.inputMaps.get(name);
+    if (map) {
+      map.enabled = false;
+      this.activeInputMaps.delete(name);
+    }
+  }
+  // ─── Action Values ─────────────────────────────────────
+  getActionValue(actionName) {
+    let value = 0;
+    for (const mapName of this.activeInputMaps) {
+      const map = this.inputMaps.get(mapName);
+      if (!map?.enabled) {
+        continue;
+      }
+      const action = map.actions.find((a) => a.name === actionName);
+      if (!action) {
+        continue;
+      }
+      value = Math.max(value, this.evaluateAction(action));
+    }
+    return value;
+  }
+  getActionVector2(actionName) {
+    let x = 0;
+    let y = 0;
+    for (const mapName of this.activeInputMaps) {
+      const map = this.inputMaps.get(mapName);
+      if (!map?.enabled) {
+        continue;
+      }
+      const action = map.actions.find((a) => a.name === actionName);
+      if (!action) {
+        continue;
+      }
+      const vec = this.evaluateActionVector2(action);
+      x += vec.x;
+      y += vec.y;
+    }
+    const mag = Math.sqrt(x * x + y * y);
+    if (mag > 1) {
+      x /= mag;
+      y /= mag;
+    }
+    return { x, y };
+  }
+  isActionPressed(actionName) {
+    return this.getActionValue(actionName) > 0.5;
+  }
+  wasActionJustPressed(actionName) {
+    for (const mapName of this.activeInputMaps) {
+      const map = this.inputMaps.get(mapName);
+      if (!map?.enabled) {
+        continue;
+      }
+      const action = map.actions.find((a) => a.name === actionName);
+      if (!action) {
+        continue;
+      }
+      for (const binding of action.bindings) {
+        if (this.wasBindingJustPressed(binding)) {
+          return true;
         }
-    }
-    disableInputMap(name) {
-        const map = this.inputMaps.get(name);
-        if (map) {
-            map.enabled = false;
-            this.activeInputMaps.delete(name);
+      }
+    }
+    return false;
+  }
+  wasActionJustReleased(actionName) {
+    for (const mapName of this.activeInputMaps) {
+      const map = this.inputMaps.get(mapName);
+      if (!map?.enabled) {
+        continue;
+      }
+      const action = map.actions.find((a) => a.name === actionName);
+      if (!action) {
+        continue;
+      }
+      for (const binding of action.bindings) {
+        if (this.wasBindingJustReleased(binding)) {
+          return true;
         }
-    }
-    // ─── Action Values ─────────────────────────────────────
-    getActionValue(actionName) {
-        let value = 0;
-        for (const mapName of this.activeInputMaps) {
-            const map = this.inputMaps.get(mapName);
-            if (!map?.enabled) {
-                continue;
-            }
-            const action = map.actions.find((a) => a.name === actionName);
-            if (!action) {
-                continue;
-            }
-            value = Math.max(value, this.evaluateAction(action));
+      }
+    }
+    return false;
+  }
+  evaluateAction(action) {
+    let maxValue = 0;
+    for (const binding of action.bindings) {
+      const value = this.evaluateBinding(binding);
+      maxValue = Math.max(maxValue, Math.abs(value));
+    }
+    return maxValue;
+  }
+  evaluateActionVector2(action) {
+    let x = 0;
+    const y = 0;
+    for (const binding of action.bindings) {
+      const value = this.evaluateBinding(binding);
+      x += value;
+    }
+    return { x, y };
+  }
+  evaluateBinding(binding) {
+    const scale = binding.scale ?? 1;
+    const deadzone = binding.deadzone ?? 0.1;
+    let value = 0;
+    switch (binding.type) {
+      case "keyboard":
+        if (binding.key && this.keyboard.isKeyDown(binding.key)) {
+          if (this.checkModifiers(binding.modifiers)) {
+            value = 1;
+          }
         }
-        return value;
-    }
-    getActionVector2(actionName) {
-        let x = 0;
-        let y = 0;
-        for (const mapName of this.activeInputMaps) {
-            const map = this.inputMaps.get(mapName);
-            if (!map?.enabled) {
-                continue;
-            }
-            const action = map.actions.find((a) => a.name === actionName);
-            if (!action) {
-                continue;
+        break;
+      case "mouse":
+        if (binding.button) {
+          value = this.mouse.isButtonDown(binding.button) ? 1 : 0;
+        }
+        break;
+      case "gamepad":
+        for (const [, gamepad] of this.gamepads) {
+          if (!gamepad.connected) {
+            continue;
+          }
+          if (binding.button) {
+            value = Math.max(value, gamepad.getButton(binding.button));
+          }
+          if (binding.axis) {
+            const axisValue = gamepad.getAxis(binding.axis);
+            if (Math.abs(axisValue) > deadzone) {
+              value = Math.max(value, Math.abs(axisValue));
             }
-            const vec = this.evaluateActionVector2(action);
-            x += vec.x;
-            y += vec.y;
+          }
         }
-        // Normalize if magnitude > 1
-        const mag = Math.sqrt(x * x + y * y);
-        if (mag > 1) {
-            x /= mag;
-            y /= mag;
+        break;
+      case "touch":
+        if (this.touch.activeTouches > 0) {
+          value = 1;
         }
-        return { x, y };
-    }
-    isActionPressed(actionName) {
-        return this.getActionValue(actionName) > 0.5;
-    }
-    wasActionJustPressed(actionName) {
-        for (const mapName of this.activeInputMaps) {
-            const map = this.inputMaps.get(mapName);
-            if (!map?.enabled) {
-                continue;
-            }
-            const action = map.actions.find((a) => a.name === actionName);
-            if (!action) {
-                continue;
-            }
-            for (const binding of action.bindings) {
-                if (this.wasBindingJustPressed(binding)) {
-                    return true;
-                }
-            }
+        break;
+    }
+    if (binding.invert) {
+      value = -value;
+    }
+    return value * scale;
+  }
+  wasBindingJustPressed(binding) {
+    switch (binding.type) {
+      case "keyboard":
+        return binding.key ? this.keyboard.wasKeyPressed(binding.key) : false;
+      case "mouse":
+        return binding.button ? this.mouse.wasButtonPressed(binding.button) : false;
+      case "gamepad":
+        for (const [, gamepad] of this.gamepads) {
+          if (binding.button && gamepad.wasButtonPressed(binding.button)) {
+            return true;
+          }
         }
         return false;
-    }
-    wasActionJustReleased(actionName) {
-        for (const mapName of this.activeInputMaps) {
-            const map = this.inputMaps.get(mapName);
-            if (!map?.enabled) {
-                continue;
-            }
-            const action = map.actions.find((a) => a.name === actionName);
-            if (!action) {
-                continue;
-            }
-            for (const binding of action.bindings) {
-                if (this.wasBindingJustReleased(binding)) {
-                    return true;
-                }
-            }
-        }
+      default:
         return false;
     }
-    evaluateAction(action) {
-        let maxValue = 0;
-        for (const binding of action.bindings) {
-            const value = this.evaluateBinding(binding);
-            maxValue = Math.max(maxValue, Math.abs(value));
-        }
-        return maxValue;
-    }
-    evaluateActionVector2(action) {
-        let x = 0;
-        const y = 0;
-        for (const binding of action.bindings) {
-            const value = this.evaluateBinding(binding);
-            // Bindings should specify which component they affect
-            // This is simplified
-            x += value;
-        }
-        return { x, y };
-    }
-    evaluateBinding(binding) {
-        const scale = binding.scale ?? 1;
-        const deadzone = binding.deadzone ?? 0.1;
-        let value = 0;
-        switch (binding.type) {
-            case 'keyboard':
-                if (binding.key && this.keyboard.isKeyDown(binding.key)) {
-                    // Check modifiers
-                    if (this.checkModifiers(binding.modifiers)) {
-                        value = 1;
-                    }
-                }
-                break;
-            case 'mouse':
-                if (binding.button) {
-                    value = this.mouse.isButtonDown(binding.button) ? 1 : 0;
-                }
-                break;
-            case 'gamepad':
-                for (const [, gamepad] of this.gamepads) {
-                    if (!gamepad.connected) {
-                        continue;
-                    }
-                    if (binding.button) {
-                        value = Math.max(value, gamepad.getButton(binding.button));
-                    }
-                    if (binding.axis) {
-                        const axisValue = gamepad.getAxis(binding.axis);
-                        if (Math.abs(axisValue) > deadzone) {
-                            value = Math.max(value, Math.abs(axisValue));
-                        }
-                    }
-                }
-                break;
-            case 'touch':
-                if (this.touch.activeTouches > 0) {
-                    value = 1;
-                }
-                break;
-        }
-        if (binding.invert) {
-            value = -value;
-        }
-        return value * scale;
-    }
-    wasBindingJustPressed(binding) {
-        switch (binding.type) {
-            case 'keyboard':
-                return binding.key ? this.keyboard.wasKeyPressed(binding.key) : false;
-            case 'mouse':
-                return binding.button ? this.mouse.wasButtonPressed(binding.button) : false;
-            case 'gamepad':
-                for (const [, gamepad] of this.gamepads) {
-                    if (binding.button && gamepad.wasButtonPressed(binding.button)) {
-                        return true;
-                    }
-                }
-                return false;
-            default:
-                return false;
-        }
-    }
-    wasBindingJustReleased(binding) {
-        switch (binding.type) {
-            case 'keyboard':
-                return binding.key ? this.keyboard.wasKeyReleased(binding.key) : false;
-            case 'mouse':
-                return binding.button ? this.mouse.wasButtonReleased(binding.button) : false;
-            case 'gamepad':
-                for (const [, gamepad] of this.gamepads) {
-                    if (binding.button && gamepad.wasButtonReleased(binding.button)) {
-                        return true;
-                    }
-                }
-                return false;
-            default:
-                return false;
-        }
-    }
-    checkModifiers(modifiers) {
-        if (!modifiers || modifiers.length === 0) {
+  }
+  wasBindingJustReleased(binding) {
+    switch (binding.type) {
+      case "keyboard":
+        return binding.key ? this.keyboard.wasKeyReleased(binding.key) : false;
+      case "mouse":
+        return binding.button ? this.mouse.wasButtonReleased(binding.button) : false;
+      case "gamepad":
+        for (const [, gamepad] of this.gamepads) {
+          if (binding.button && gamepad.wasButtonReleased(binding.button)) {
             return true;
+          }
         }
-        for (const mod of modifiers) {
-            if (!this.keyboard.isKeyDown(mod)) {
-                return false;
-            }
-        }
-        return true;
-    }
-    // ─── Action Callbacks ──────────────────────────────────
-    onAction(actionName, callback) {
-        if (!this.actionCallbacks.has(actionName)) {
-            this.actionCallbacks.set(actionName, []);
-        }
-        this.actionCallbacks.get(actionName).push(callback);
-    }
-    offAction(actionName, callback) {
-        const callbacks = this.actionCallbacks.get(actionName);
-        if (callbacks) {
-            const idx = callbacks.indexOf(callback);
-            if (idx >= 0) {
-                callbacks.splice(idx, 1);
-            }
-        }
-    }
-    // ─── Direct State Access ───────────────────────────────
-    getKeyboard() {
-        return this.keyboard;
-    }
-    getMouse() {
-        return this.mouse;
-    }
-    getGamepad(index) {
-        return this.gamepads.get(index);
-    }
-    getGamepads() {
-        return Array.from(this.gamepads.values());
-    }
-    getTouch() {
-        return this.touch;
-    }
-    // ─── Mouse Lock ────────────────────────────────────────
-    lockMouse() {
-        this.canvas?.requestPointerLock();
-    }
-    unlockMouse() {
-        document.exitPointerLock();
-    }
-    isMouseLocked() {
-        return document.pointerLockElement === this.canvas;
-    }
-    // ─── Update ────────────────────────────────────────────
-    update() {
-        // Update gamepads (they need polling)
-        this.pollGamepads();
-        // Fire action callbacks
-        for (const [actionName, callbacks] of this.actionCallbacks) {
-            const value = this.getActionValue(actionName);
-            if (value > 0) {
-                for (const cb of callbacks) {
-                    cb(value);
-                }
-            }
-        }
-    }
-    endFrame() {
-        // Clear per-frame state
-        this.keyboard.endFrame();
-        this.mouse.endFrame();
-        for (const gamepad of this.gamepads.values()) {
-            gamepad.endFrame();
-        }
-        this.touch.endFrame();
-    }
-    // ─── Event Handlers ────────────────────────────────────
-    handleKeyDown(event) {
-        this.keyboard.handleKeyDown(event.code);
-    }
-    handleKeyUp(event) {
-        this.keyboard.handleKeyUp(event.code);
-    }
-    handleMouseMove(event) {
-        this.mouse.handleMouseMove(event);
-    }
-    handleMouseDown(event) {
-        this.mouse.handleMouseDown(event);
-    }
-    handleMouseUp(event) {
-        this.mouse.handleMouseUp(event);
-    }
-    handleWheel(event) {
-        event.preventDefault();
-        this.mouse.handleWheel(event);
-    }
-    handlePointerLockChange() {
-        this.mouse.setLocked(document.pointerLockElement === this.canvas);
+        return false;
+      default:
+        return false;
     }
-    handleGamepadConnected(event) {
-        const gamepad = new GamepadStateImpl(event.gamepad);
-        this.gamepads.set(event.gamepad.index, gamepad);
+  }
+  checkModifiers(modifiers) {
+    if (!modifiers || modifiers.length === 0) {
+      return true;
     }
-    handleGamepadDisconnected(event) {
-        const gamepad = this.gamepads.get(event.gamepad.index);
-        if (gamepad) {
-            gamepad.connected = false;
-        }
-    }
-    pollGamepads() {
-        const gamepads = navigator.getGamepads();
-        for (const gp of gamepads) {
-            if (!gp) {
-                continue;
-            }
-            let state = this.gamepads.get(gp.index);
-            if (!state) {
-                state = new GamepadStateImpl(gp);
-                this.gamepads.set(gp.index, state);
-            }
-            state.update(gp);
+    for (const mod of modifiers) {
+      if (!this.keyboard.isKeyDown(mod)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  // ─── Action Callbacks ──────────────────────────────────
+  onAction(actionName, callback) {
+    if (!this.actionCallbacks.has(actionName)) {
+      this.actionCallbacks.set(actionName, []);
+    }
+    this.actionCallbacks.get(actionName).push(callback);
+  }
+  offAction(actionName, callback) {
+    const callbacks = this.actionCallbacks.get(actionName);
+    if (callbacks) {
+      const idx = callbacks.indexOf(callback);
+      if (idx >= 0) {
+        callbacks.splice(idx, 1);
+      }
+    }
+  }
+  // ─── Direct State Access ───────────────────────────────
+  getKeyboard() {
+    return this.keyboard;
+  }
+  getMouse() {
+    return this.mouse;
+  }
+  getGamepad(index) {
+    return this.gamepads.get(index);
+  }
+  getGamepads() {
+    return Array.from(this.gamepads.values());
+  }
+  getTouch() {
+    return this.touch;
+  }
+  // ─── Mouse Lock ────────────────────────────────────────
+  lockMouse() {
+    this.canvas?.requestPointerLock();
+  }
+  unlockMouse() {
+    document.exitPointerLock();
+  }
+  isMouseLocked() {
+    return document.pointerLockElement === this.canvas;
+  }
+  // ─── Update ────────────────────────────────────────────
+  update() {
+    this.pollGamepads();
+    for (const [actionName, callbacks] of this.actionCallbacks) {
+      const value = this.getActionValue(actionName);
+      if (value > 0) {
+        for (const cb of callbacks) {
+          cb(value);
         }
-    }
-    handleTouchStart(event) {
-        event.preventDefault();
-        this.touch.handleTouchStart(event);
-    }
-    handleTouchMove(event) {
-        event.preventDefault();
-        this.touch.handleTouchMove(event);
-    }
-    handleTouchEnd(event) {
-        event.preventDefault();
-        this.touch.handleTouchEnd(event);
-    }
-    handleTouchCancel(event) {
-        event.preventDefault();
-        this.touch.handleTouchCancel(event);
-    }
+      }
+    }
+  }
+  endFrame() {
+    this.keyboard.endFrame();
+    this.mouse.endFrame();
+    for (const gamepad of this.gamepads.values()) {
+      gamepad.endFrame();
+    }
+    this.touch.endFrame();
+  }
+  // ─── Event Handlers ────────────────────────────────────
+  handleKeyDown(event) {
+    this.keyboard.handleKeyDown(event.code);
+  }
+  handleKeyUp(event) {
+    this.keyboard.handleKeyUp(event.code);
+  }
+  handleMouseMove(event) {
+    this.mouse.handleMouseMove(event);
+  }
+  handleMouseDown(event) {
+    this.mouse.handleMouseDown(event);
+  }
+  handleMouseUp(event) {
+    this.mouse.handleMouseUp(event);
+  }
+  handleWheel(event) {
+    event.preventDefault();
+    this.mouse.handleWheel(event);
+  }
+  handlePointerLockChange() {
+    this.mouse.setLocked(document.pointerLockElement === this.canvas);
+  }
+  handleGamepadConnected(event) {
+    const gamepad = new GamepadStateImpl(event.gamepad);
+    this.gamepads.set(event.gamepad.index, gamepad);
+  }
+  handleGamepadDisconnected(event) {
+    const gamepad = this.gamepads.get(event.gamepad.index);
+    if (gamepad) {
+      gamepad.connected = false;
+    }
+  }
+  pollGamepads() {
+    const gamepads = navigator.getGamepads();
+    for (const gp of gamepads) {
+      if (!gp) {
+        continue;
+      }
+      let state = this.gamepads.get(gp.index);
+      if (!state) {
+        state = new GamepadStateImpl(gp);
+        this.gamepads.set(gp.index, state);
+      }
+      state.update(gp);
+    }
+  }
+  handleTouchStart(event) {
+    event.preventDefault();
+    this.touch.handleTouchStart(event);
+  }
+  handleTouchMove(event) {
+    event.preventDefault();
+    this.touch.handleTouchMove(event);
+  }
+  handleTouchEnd(event) {
+    event.preventDefault();
+    this.touch.handleTouchEnd(event);
+  }
+  handleTouchCancel(event) {
+    event.preventDefault();
+    this.touch.handleTouchCancel(event);
+  }
 }
-// ============================================================
-// Internal Implementations
-// ============================================================
 class KeyboardStateImpl {
-    constructor() {
-        this.keysDown = new Set();
-        this.keysPressed = new Set();
-        this.keysReleased = new Set();
-    }
-    isKeyDown(key) {
-        return this.keysDown.has(key);
-    }
-    isKeyUp(key) {
-        return !this.keysDown.has(key);
-    }
-    wasKeyPressed(key) {
-        return this.keysPressed.has(key);
-    }
-    wasKeyReleased(key) {
-        return this.keysReleased.has(key);
-    }
-    getKeysDown() {
-        return Array.from(this.keysDown);
-    }
-    handleKeyDown(code) {
-        if (!this.keysDown.has(code)) {
-            this.keysPressed.add(code);
-        }
-        this.keysDown.add(code);
-    }
-    handleKeyUp(code) {
-        this.keysDown.delete(code);
-        this.keysReleased.add(code);
-    }
-    endFrame() {
-        this.keysPressed.clear();
-        this.keysReleased.clear();
-    }
+  constructor() {
+    this.keysDown = /* @__PURE__ */ new Set();
+    this.keysPressed = /* @__PURE__ */ new Set();
+    this.keysReleased = /* @__PURE__ */ new Set();
+  }
+  isKeyDown(key) {
+    return this.keysDown.has(key);
+  }
+  isKeyUp(key) {
+    return !this.keysDown.has(key);
+  }
+  wasKeyPressed(key) {
+    return this.keysPressed.has(key);
+  }
+  wasKeyReleased(key) {
+    return this.keysReleased.has(key);
+  }
+  getKeysDown() {
+    return Array.from(this.keysDown);
+  }
+  handleKeyDown(code) {
+    if (!this.keysDown.has(code)) {
+      this.keysPressed.add(code);
+    }
+    this.keysDown.add(code);
+  }
+  handleKeyUp(code) {
+    this.keysDown.delete(code);
+    this.keysReleased.add(code);
+  }
+  endFrame() {
+    this.keysPressed.clear();
+    this.keysReleased.clear();
+  }
 }
 class MouseStateImpl {
-    constructor() {
-        this.position = { x: 0, y: 0 };
-        this.delta = { x: 0, y: 0 };
-        this.scroll = { x: 0, y: 0 };
-        this.buttonsDown = new Set();
-        this.buttonsPressed = new Set();
-        this.buttonsReleased = new Set();
-        this.locked = false;
-    }
-    isButtonDown(button) {
-        return this.buttonsDown.has(button);
-    }
-    isButtonUp(button) {
-        return !this.buttonsDown.has(button);
-    }
-    wasButtonPressed(button) {
-        return this.buttonsPressed.has(button);
-    }
-    wasButtonReleased(button) {
-        return this.buttonsReleased.has(button);
-    }
-    isLocked() {
-        return this.locked;
-    }
-    setLocked(locked) {
-        this.locked = locked;
-    }
-    handleMouseMove(event) {
-        if (this.locked) {
-            this.delta.x += event.movementX;
-            this.delta.y += event.movementY;
-        }
-        else {
-            this.delta.x = event.clientX - this.position.x;
-            this.delta.y = event.clientY - this.position.y;
-            this.position.x = event.clientX;
-            this.position.y = event.clientY;
-        }
-    }
-    handleMouseDown(event) {
-        const button = this.mapButton(event.button);
-        if (!this.buttonsDown.has(button)) {
-            this.buttonsPressed.add(button);
-        }
-        this.buttonsDown.add(button);
-    }
-    handleMouseUp(event) {
-        const button = this.mapButton(event.button);
-        this.buttonsDown.delete(button);
-        this.buttonsReleased.add(button);
-    }
-    handleWheel(event) {
-        this.scroll.x += event.deltaX;
-        this.scroll.y += event.deltaY;
-    }
-    mapButton(button) {
-        switch (button) {
-            case 0:
-                return 'left';
-            case 1:
-                return 'middle';
-            case 2:
-                return 'right';
-            case 3:
-                return 'back';
-            case 4:
-                return 'forward';
-            default:
-                return 'left';
-        }
-    }
-    endFrame() {
-        this.delta.x = 0;
-        this.delta.y = 0;
-        this.scroll.x = 0;
-        this.scroll.y = 0;
-        this.buttonsPressed.clear();
-        this.buttonsReleased.clear();
-    }
-}
-class GamepadStateImpl {
-    constructor(gamepad) {
-        this.connected = true;
-        this.buttons = new Map();
-        this.axes = new Map();
-        this.prevButtons = new Map();
-        this.prevAxes = new Map();
-        this.index = gamepad.index;
-        this.id = gamepad.id;
-        this.update(gamepad);
-    }
-    update(gamepad) {
-        // Store previous state
-        this.prevButtons = new Map(this.buttons);
-        this.prevAxes = new Map(this.axes);
-        // Update buttons
-        for (let i = 0; i < gamepad.buttons.length && i < GamepadStateImpl.BUTTON_MAP.length; i++) {
-            this.buttons.set(GamepadStateImpl.BUTTON_MAP[i], gamepad.buttons[i].value);
-        }
-        // Update axes
-        for (let i = 0; i < gamepad.axes.length && i < GamepadStateImpl.AXIS_MAP.length; i++) {
-            this.axes.set(GamepadStateImpl.AXIS_MAP[i], gamepad.axes[i]);
-        }
-    }
-    getButton(button) {
-        return this.buttons.get(button) ?? 0;
-    }
-    isButtonDown(button, threshold = 0.5) {
-        return (this.buttons.get(button) ?? 0) > threshold;
-    }
-    wasButtonPressed(button, threshold = 0.5) {
-        const current = this.buttons.get(button) ?? 0;
-        const previous = this.prevButtons.get(button) ?? 0;
-        return current > threshold && previous <= threshold;
-    }
-    wasButtonReleased(button, threshold = 0.5) {
-        const current = this.buttons.get(button) ?? 0;
-        const previous = this.prevButtons.get(button) ?? 0;
-        return current <= threshold && previous > threshold;
-    }
-    getAxis(axis) {
-        return this.axes.get(axis) ?? 0;
-    }
-    getLeftStick() {
-        return {
-            x: this.axes.get('left-x') ?? 0,
-            y: this.axes.get('left-y') ?? 0,
-        };
-    }
-    getRightStick() {
-        return {
-            x: this.axes.get('right-x') ?? 0,
-            y: this.axes.get('right-y') ?? 0,
-        };
-    }
-    setVibration(lowFrequency, highFrequency, duration) {
-        const gamepads = navigator.getGamepads();
-        const gamepad = gamepads[this.index];
-        if (gamepad?.vibrationActuator) {
-            gamepad.vibrationActuator.playEffect('dual-rumble', {
-                duration,
-                strongMagnitude: lowFrequency,
-                weakMagnitude: highFrequency,
-            });
-        }
-    }
-    endFrame() {
-        // Nothing to clear for gamepad
-    }
+  constructor() {
+    this.position = { x: 0, y: 0 };
+    this.delta = { x: 0, y: 0 };
+    this.scroll = { x: 0, y: 0 };
+    this.buttonsDown = /* @__PURE__ */ new Set();
+    this.buttonsPressed = /* @__PURE__ */ new Set();
+    this.buttonsReleased = /* @__PURE__ */ new Set();
+    this.locked = false;
+  }
+  isButtonDown(button) {
+    return this.buttonsDown.has(button);
+  }
+  isButtonUp(button) {
+    return !this.buttonsDown.has(button);
+  }
+  wasButtonPressed(button) {
+    return this.buttonsPressed.has(button);
+  }
+  wasButtonReleased(button) {
+    return this.buttonsReleased.has(button);
+  }
+  isLocked() {
+    return this.locked;
+  }
+  setLocked(locked) {
+    this.locked = locked;
+  }
+  handleMouseMove(event) {
+    if (this.locked) {
+      this.delta.x += event.movementX;
+      this.delta.y += event.movementY;
+    } else {
+      this.delta.x = event.clientX - this.position.x;
+      this.delta.y = event.clientY - this.position.y;
+      this.position.x = event.clientX;
+      this.position.y = event.clientY;
+    }
+  }
+  handleMouseDown(event) {
+    const button = this.mapButton(event.button);
+    if (!this.buttonsDown.has(button)) {
+      this.buttonsPressed.add(button);
+    }
+    this.buttonsDown.add(button);
+  }
+  handleMouseUp(event) {
+    const button = this.mapButton(event.button);
+    this.buttonsDown.delete(button);
+    this.buttonsReleased.add(button);
+  }
+  handleWheel(event) {
+    this.scroll.x += event.deltaX;
+    this.scroll.y += event.deltaY;
+  }
+  mapButton(button) {
+    switch (button) {
+      case 0:
+        return "left";
+      case 1:
+        return "middle";
+      case 2:
+        return "right";
+      case 3:
+        return "back";
+      case 4:
+        return "forward";
+      default:
+        return "left";
+    }
+  }
+  endFrame() {
+    this.delta.x = 0;
+    this.delta.y = 0;
+    this.scroll.x = 0;
+    this.scroll.y = 0;
+    this.buttonsPressed.clear();
+    this.buttonsReleased.clear();
+  }
 }
-GamepadStateImpl.BUTTON_MAP = [
-    'a',
-    'b',
-    'x',
-    'y',
-    'lb',
-    'rb',
-    'lt',
-    'rt',
-    'back',
-    'start',
-    'ls',
-    'rs',
-    'dpad-up',
-    'dpad-down',
-    'dpad-left',
-    'dpad-right',
+const _GamepadStateImpl = class _GamepadStateImpl {
+  constructor(gamepad) {
+    this.connected = true;
+    this.buttons = /* @__PURE__ */ new Map();
+    this.axes = /* @__PURE__ */ new Map();
+    this.prevButtons = /* @__PURE__ */ new Map();
+    this.prevAxes = /* @__PURE__ */ new Map();
+    this.index = gamepad.index;
+    this.id = gamepad.id;
+    this.update(gamepad);
+  }
+  update(gamepad) {
+    this.prevButtons = new Map(this.buttons);
+    this.prevAxes = new Map(this.axes);
+    for (let i = 0; i < gamepad.buttons.length && i < _GamepadStateImpl.BUTTON_MAP.length; i++) {
+      this.buttons.set(_GamepadStateImpl.BUTTON_MAP[i], gamepad.buttons[i].value);
+    }
+    for (let i = 0; i < gamepad.axes.length && i < _GamepadStateImpl.AXIS_MAP.length; i++) {
+      this.axes.set(_GamepadStateImpl.AXIS_MAP[i], gamepad.axes[i]);
+    }
+  }
+  getButton(button) {
+    return this.buttons.get(button) ?? 0;
+  }
+  isButtonDown(button, threshold = 0.5) {
+    return (this.buttons.get(button) ?? 0) > threshold;
+  }
+  wasButtonPressed(button, threshold = 0.5) {
+    const current = this.buttons.get(button) ?? 0;
+    const previous = this.prevButtons.get(button) ?? 0;
+    return current > threshold && previous <= threshold;
+  }
+  wasButtonReleased(button, threshold = 0.5) {
+    const current = this.buttons.get(button) ?? 0;
+    const previous = this.prevButtons.get(button) ?? 0;
+    return current <= threshold && previous > threshold;
+  }
+  getAxis(axis) {
+    return this.axes.get(axis) ?? 0;
+  }
+  getLeftStick() {
+    return {
+      x: this.axes.get("left-x") ?? 0,
+      y: this.axes.get("left-y") ?? 0
+    };
+  }
+  getRightStick() {
+    return {
+      x: this.axes.get("right-x") ?? 0,
+      y: this.axes.get("right-y") ?? 0
+    };
+  }
+  setVibration(lowFrequency, highFrequency, duration) {
+    const gamepads = navigator.getGamepads();
+    const gamepad = gamepads[this.index];
+    if (gamepad?.vibrationActuator) {
+      gamepad.vibrationActuator.playEffect("dual-rumble", {
+        duration,
+        strongMagnitude: lowFrequency,
+        weakMagnitude: highFrequency
+      });
+    }
+  }
+  endFrame() {
+  }
+};
+_GamepadStateImpl.BUTTON_MAP = [
+  "a",
+  "b",
+  "x",
+  "y",
+  "lb",
+  "rb",
+  "lt",
+  "rt",
+  "back",
+  "start",
+  "ls",
+  "rs",
+  "dpad-up",
+  "dpad-down",
+  "dpad-left",
+  "dpad-right"
 ];
-GamepadStateImpl.AXIS_MAP = ['left-x', 'left-y', 'right-x', 'right-y'];
+_GamepadStateImpl.AXIS_MAP = ["left-x", "left-y", "right-x", "right-y"];
+let GamepadStateImpl = _GamepadStateImpl;
 class TouchStateImpl {
-    constructor() {
-        this.touches = [];
-        this.activeTouches = 0;
-        this.touchMap = new Map();
-    }
-    handleTouchStart(event) {
-        for (let i = 0; i < event.changedTouches.length; i++) {
-            const t = event.changedTouches[i];
-            const touch = {
-                id: t.identifier,
-                position: { x: t.clientX, y: t.clientY },
-                startPosition: { x: t.clientX, y: t.clientY },
-                delta: { x: 0, y: 0 },
-                pressure: t.force,
-                phase: 'began',
-            };
-            this.touchMap.set(t.identifier, touch);
-        }
-        this.updateTouchList();
-    }
-    handleTouchMove(event) {
-        for (let i = 0; i < event.changedTouches.length; i++) {
-            const t = event.changedTouches[i];
-            const touch = this.touchMap.get(t.identifier);
-            if (touch) {
-                touch.delta.x = t.clientX - touch.position.x;
-                touch.delta.y = t.clientY - touch.position.y;
-                touch.position.x = t.clientX;
-                touch.position.y = t.clientY;
-                touch.pressure = t.force;
-                touch.phase = 'moved';
-            }
-        }
-    }
-    handleTouchEnd(event) {
-        for (let i = 0; i < event.changedTouches.length; i++) {
-            const t = event.changedTouches[i];
-            const touch = this.touchMap.get(t.identifier);
-            if (touch) {
-                touch.phase = 'ended';
-                this.touchMap.delete(t.identifier);
-            }
-        }
-        this.updateTouchList();
-    }
-    handleTouchCancel(event) {
-        for (let i = 0; i < event.changedTouches.length; i++) {
-            const t = event.changedTouches[i];
-            const touch = this.touchMap.get(t.identifier);
-            if (touch) {
-                touch.phase = 'cancelled';
-                this.touchMap.delete(t.identifier);
-            }
-        }
-        this.updateTouchList();
-    }
-    updateTouchList() {
-        this.touches = Array.from(this.touchMap.values());
-        this.activeTouches = this.touches.length;
-    }
-    endFrame() {
-        // Mark moved touches as stationary
-        for (const touch of this.touchMap.values()) {
-            if (touch.phase === 'moved' || touch.phase === 'began') {
-                touch.phase = 'stationary';
-            }
-            touch.delta.x = 0;
-            touch.delta.y = 0;
-        }
-    }
+  constructor() {
+    this.touches = [];
+    this.activeTouches = 0;
+    this.touchMap = /* @__PURE__ */ new Map();
+  }
+  handleTouchStart(event) {
+    for (let i = 0; i < event.changedTouches.length; i++) {
+      const t = event.changedTouches[i];
+      const touch = {
+        id: t.identifier,
+        position: { x: t.clientX, y: t.clientY },
+        startPosition: { x: t.clientX, y: t.clientY },
+        delta: { x: 0, y: 0 },
+        pressure: t.force,
+        phase: "began"
+      };
+      this.touchMap.set(t.identifier, touch);
+    }
+    this.updateTouchList();
+  }
+  handleTouchMove(event) {
+    for (let i = 0; i < event.changedTouches.length; i++) {
+      const t = event.changedTouches[i];
+      const touch = this.touchMap.get(t.identifier);
+      if (touch) {
+        touch.delta.x = t.clientX - touch.position.x;
+        touch.delta.y = t.clientY - touch.position.y;
+        touch.position.x = t.clientX;
+        touch.position.y = t.clientY;
+        touch.pressure = t.force;
+        touch.phase = "moved";
+      }
+    }
+  }
+  handleTouchEnd(event) {
+    for (let i = 0; i < event.changedTouches.length; i++) {
+      const t = event.changedTouches[i];
+      const touch = this.touchMap.get(t.identifier);
+      if (touch) {
+        touch.phase = "ended";
+        this.touchMap.delete(t.identifier);
+      }
+    }
+    this.updateTouchList();
+  }
+  handleTouchCancel(event) {
+    for (let i = 0; i < event.changedTouches.length; i++) {
+      const t = event.changedTouches[i];
+      const touch = this.touchMap.get(t.identifier);
+      if (touch) {
+        touch.phase = "cancelled";
+        this.touchMap.delete(t.identifier);
+      }
+    }
+    this.updateTouchList();
+  }
+  updateTouchList() {
+    this.touches = Array.from(this.touchMap.values());
+    this.activeTouches = this.touches.length;
+  }
+  endFrame() {
+    for (const touch of this.touchMap.values()) {
+      if (touch.phase === "moved" || touch.phase === "began") {
+        touch.phase = "stationary";
+      }
+      touch.delta.x = 0;
+      touch.delta.y = 0;
+    }
+  }
 }
 class InputMapImpl {
-    constructor(name, actions) {
-        this.name = name;
-        this.actions = actions;
-        this.enabled = false;
-    }
+  constructor(name, actions) {
+    this.name = name;
+    this.actions = actions;
+    this.enabled = false;
+  }
 }
 class UISystem {
-    constructor(canvas) {
-        this.stateStack = [];
-        this.hotWidget = null;
-        this.activeWidget = null;
-        this.mousePos = { x: 0, y: 0 };
-        this.mouseDown = false;
-        this.mouseClicked = false;
-        this.keyboardInput = '';
-        this._isHovered = false;
-        this.style = {
-            windowBg: 'rgba(30, 30, 30, 0.95)',
-            windowBorder: 'rgba(60, 60, 60, 1)',
-            panelBg: 'rgba(40, 40, 40, 0.8)',
-            buttonBg: 'rgba(60, 60, 60, 1)',
-            buttonHover: 'rgba(80, 80, 80, 1)',
-            buttonActive: 'rgba(100, 100, 100, 1)',
-            inputBg: 'rgba(20, 20, 20, 1)',
-            inputBorder: 'rgba(80, 80, 80, 1)',
-            sliderBg: 'rgba(40, 40, 40, 1)',
-            sliderFill: 'rgba(70, 130, 180, 1)',
-            textColor: 'rgba(220, 220, 220, 1)',
-            textDim: 'rgba(150, 150, 150, 1)',
-            accentColor: 'rgba(70, 130, 180, 1)',
-            fontSize: 14,
-            fontFamily: 'Arial, sans-serif',
-            padding: 8,
-            borderRadius: 4,
-            itemSpacing: 4,
-        };
-        this.canvas = canvas;
-        this.ctx = canvas.getContext('2d');
-        this.currentState = this.createState();
-        // Input handling
-        canvas.addEventListener('mousemove', (e) => {
-            const rect = canvas.getBoundingClientRect();
-            this.mousePos.x = e.clientX - rect.left;
-            this.mousePos.y = e.clientY - rect.top;
-        });
-        canvas.addEventListener('mousedown', () => {
-            this.mouseDown = true;
-            this.mouseClicked = true;
-        });
-        canvas.addEventListener('mouseup', () => {
-            this.mouseDown = false;
-        });
-        window.addEventListener('keypress', (e) => {
-            this.keyboardInput += e.key;
-        });
-    }
-    createState() {
-        return {
-            cursorX: 0,
-            cursorY: 0,
-            windowX: 0,
-            windowY: 0,
-            windowWidth: 0,
-            windowHeight: 0,
-            indentLevel: 0,
-            sameLine: false,
-            maxWidgetWidth: 0,
-            lastWidgetHeight: 0,
-        };
-    }
-    beginFrame() {
-        this._isHovered = false;
-        this.keyboardInput = '';
-    }
-    endFrame() {
-        this.mouseClicked = false;
-        this.hotWidget = null;
-    }
-    // ─── Window ────────────────────────────────────────────
-    beginWindow(title, x, y, width, height) {
-        this.stateStack.push({ ...this.currentState });
-        this.currentState.windowX = x;
-        this.currentState.windowY = y;
-        this.currentState.windowWidth = width;
-        this.currentState.windowHeight = height;
-        this.currentState.cursorX = x + this.style.padding;
-        this.currentState.cursorY = y + this.style.padding + 20; // Title bar height
-        // Draw window background
-        this.ctx.fillStyle = this.style.windowBg;
-        this.roundRect(x, y, width, height, this.style.borderRadius);
-        this.ctx.fill();
-        // Draw border
-        this.ctx.strokeStyle = this.style.windowBorder;
-        this.ctx.lineWidth = 1;
-        this.roundRect(x, y, width, height, this.style.borderRadius);
-        this.ctx.stroke();
-        // Draw title
-        this.ctx.fillStyle = this.style.textColor;
-        this.ctx.font = `bold ${this.style.fontSize}px ${this.style.fontFamily}`;
-        this.ctx.fillText(title, x + this.style.padding, y + this.style.fontSize + 4);
-        // Separator
-        this.ctx.strokeStyle = this.style.windowBorder;
-        this.ctx.beginPath();
-        this.ctx.moveTo(x, y + 24);
-        this.ctx.lineTo(x + width, y + 24);
-        this.ctx.stroke();
-        return true;
-    }
-    endWindow() {
-        if (this.stateStack.length > 0) {
-            this.currentState = this.stateStack.pop();
-        }
-    }
-    beginPanel(_id) {
-        this.stateStack.push({ ...this.currentState });
-        const x = this.currentState.cursorX;
-        const y = this.currentState.cursorY;
-        const width = this.currentState.windowWidth - this.style.padding * 2;
-        this.ctx.fillStyle = this.style.panelBg;
-        this.roundRect(x, y, width, 100, this.style.borderRadius); // Height will be adjusted
-        this.ctx.fill();
-        this.currentState.cursorX += this.style.padding;
-        this.currentState.cursorY += this.style.padding;
-    }
-    endPanel() {
-        if (this.stateStack.length > 0) {
-            const prevState = this.stateStack.pop();
-            this.currentState.cursorX = prevState.cursorX;
-            this.currentState.cursorY += this.style.padding;
-        }
-    }
-    // ─── Elements ──────────────────────────────────────────
-    text(content) {
-        const x = this.getX();
-        const y = this.getY();
-        this.ctx.fillStyle = this.style.textColor;
-        this.ctx.font = `${this.style.fontSize}px ${this.style.fontFamily}`;
-        this.ctx.fillText(content, x, y + this.style.fontSize);
-        this.advanceCursor(this.ctx.measureText(content).width, this.style.fontSize + this.style.itemSpacing);
-    }
-    button(label) {
-        const id = `button_${label}`;
-        const x = this.getX();
-        const y = this.getY();
-        const width = Math.max(100, this.ctx.measureText(label).width + this.style.padding * 2);
-        const height = this.style.fontSize + this.style.padding * 2;
-        const hovered = this.isInRect(x, y, width, height);
-        const clicked = hovered && this.mouseClicked;
-        // Background
-        if (this.mouseDown && hovered) {
-            this.ctx.fillStyle = this.style.buttonActive;
-        }
-        else if (hovered) {
-            this.ctx.fillStyle = this.style.buttonHover;
-            this.hotWidget = id;
-        }
-        else {
-            this.ctx.fillStyle = this.style.buttonBg;
-        }
-        this.roundRect(x, y, width, height, this.style.borderRadius);
-        this.ctx.fill();
-        // Label
-        this.ctx.fillStyle = this.style.textColor;
-        this.ctx.font = `${this.style.fontSize}px ${this.style.fontFamily}`;
-        const textWidth = this.ctx.measureText(label).width;
-        this.ctx.fillText(label, x + (width - textWidth) / 2, y + height / 2 + this.style.fontSize / 3);
-        this.advanceCursor(width, height + this.style.itemSpacing);
-        if (hovered) {
-            this._isHovered = true;
-        }
-        return clicked;
-    }
-    checkbox(label, checked) {
-        const id = `checkbox_${label}`;
-        const x = this.getX();
-        const y = this.getY();
-        const boxSize = this.style.fontSize + 4;
-        const hovered = this.isInRect(x, y, boxSize, boxSize);
-        const clicked = hovered && this.mouseClicked;
-        // Box
-        this.ctx.fillStyle = this.style.inputBg;
-        this.roundRect(x, y, boxSize, boxSize, 2);
-        this.ctx.fill();
-        this.ctx.strokeStyle = hovered ? this.style.accentColor : this.style.inputBorder;
-        this.ctx.lineWidth = 1;
-        this.roundRect(x, y, boxSize, boxSize, 2);
-        this.ctx.stroke();
-        // Checkmark
-        if (checked) {
-            this.ctx.fillStyle = this.style.accentColor;
-            this.roundRect(x + 3, y + 3, boxSize - 6, boxSize - 6, 2);
-            this.ctx.fill();
-        }
-        // Label
-        this.ctx.fillStyle = this.style.textColor;
-        this.ctx.font = `${this.style.fontSize}px ${this.style.fontFamily}`;
-        this.ctx.fillText(label, x + boxSize + this.style.itemSpacing, y + boxSize / 2 + this.style.fontSize / 3);
-        const width = boxSize + this.style.itemSpacing + this.ctx.measureText(label).width;
-        this.advanceCursor(width, boxSize + this.style.itemSpacing);
-        if (hovered) {
-            this._isHovered = true;
-            this.hotWidget = id;
-        }
-        return clicked ? !checked : checked;
-    }
-    slider(label, value, min, max) {
-        const id = `slider_${label}`;
-        const x = this.getX();
-        const y = this.getY();
-        const width = 200;
-        const height = this.style.fontSize + this.style.padding;
-        const trackHeight = 6;
-        // Label
-        this.ctx.fillStyle = this.style.textColor;
-        this.ctx.font = `${this.style.fontSize}px ${this.style.fontFamily}`;
-        this.ctx.fillText(label, x, y + this.style.fontSize);
-        const trackY = y + this.style.fontSize + this.style.itemSpacing;
-        const hovered = this.isInRect(x, trackY, width, trackHeight);
-        // Track
-        this.ctx.fillStyle = this.style.sliderBg;
-        this.roundRect(x, trackY, width, trackHeight, 3);
-        this.ctx.fill();
-        // Fill
-        const normalizedValue = (value - min) / (max - min);
-        const fillWidth = width * normalizedValue;
-        this.ctx.fillStyle = this.style.sliderFill;
-        this.roundRect(x, trackY, fillWidth, trackHeight, 3);
-        this.ctx.fill();
-        // Handle
-        const handleX = x + fillWidth - 6;
-        this.ctx.fillStyle = this.style.textColor;
-        this.ctx.beginPath();
-        this.ctx.arc(handleX + 6, trackY + trackHeight / 2, 8, 0, Math.PI * 2);
-        this.ctx.fill();
-        // Value text
-        const valueText = value.toFixed(2);
-        this.ctx.fillStyle = this.style.textDim;
-        this.ctx.fillText(valueText, x + width + this.style.itemSpacing, trackY + this.style.fontSize / 2);
-        // Handle drag
-        let newValue = value;
-        if (hovered && this.mouseDown) {
-            const localX = this.mousePos.x - x;
-            const t = Math.max(0, Math.min(1, localX / width));
-            newValue = min + t * (max - min);
-            this.activeWidget = id;
-        }
-        this.advanceCursor(width + 50, height + trackHeight + this.style.itemSpacing);
-        if (hovered) {
-            this._isHovered = true;
-            this.hotWidget = id;
-        }
-        return newValue;
-    }
-    textInput(label, value) {
-        const id = `input_${label}`;
-        const x = this.getX();
-        const y = this.getY();
-        const width = 200;
-        const height = this.style.fontSize + this.style.padding * 2;
-        // Label
-        this.ctx.fillStyle = this.style.textColor;
-        this.ctx.font = `${this.style.fontSize}px ${this.style.fontFamily}`;
-        this.ctx.fillText(label, x, y + this.style.fontSize);
-        const inputY = y + this.style.fontSize + this.style.itemSpacing;
-        const hovered = this.isInRect(x, inputY, width, height);
-        const isActive = this.activeWidget === id;
-        // Background
-        this.ctx.fillStyle = this.style.inputBg;
-        this.roundRect(x, inputY, width, height, this.style.borderRadius);
-        this.ctx.fill();
-        // Border
-        this.ctx.strokeStyle = isActive
-            ? this.style.accentColor
-            : hovered
-                ? this.style.textDim
-                : this.style.inputBorder;
-        this.ctx.lineWidth = 1;
-        this.roundRect(x, inputY, width, height, this.style.borderRadius);
-        this.ctx.stroke();
-        // Value text
-        this.ctx.fillStyle = this.style.textColor;
-        this.ctx.fillText(value, x + this.style.padding, inputY + height / 2 + this.style.fontSize / 3);
-        // Cursor
-        if (isActive) {
-            const cursorX = x + this.style.padding + this.ctx.measureText(value).width;
-            this.ctx.fillStyle = this.style.textColor;
-            this.ctx.fillRect(cursorX + 2, inputY + 4, 2, height - 8);
-        }
-        // Focus
-        if (hovered && this.mouseClicked) {
-            this.activeWidget = id;
-        }
-        // Input
-        let newValue = value;
-        if (isActive && this.keyboardInput) {
-            newValue = value + this.keyboardInput;
-        }
-        this.advanceCursor(width, height + this.style.fontSize + this.style.itemSpacing);
-        if (hovered) {
-            this._isHovered = true;
-            this.hotWidget = id;
-        }
-        return newValue;
-    }
-    dropdown(label, selected, options) {
-        const x = this.getX();
-        const y = this.getY();
-        const width = 200;
-        const height = this.style.fontSize + this.style.padding * 2;
-        // Label
-        this.ctx.fillStyle = this.style.textColor;
-        this.ctx.font = `${this.style.fontSize}px ${this.style.fontFamily}`;
-        this.ctx.fillText(label, x, y + this.style.fontSize);
-        const dropdownY = y + this.style.fontSize + this.style.itemSpacing;
-        const hovered = this.isInRect(x, dropdownY, width, height);
-        // Background
-        this.ctx.fillStyle = this.style.inputBg;
-        this.roundRect(x, dropdownY, width, height, this.style.borderRadius);
-        this.ctx.fill();
-        // Border
-        this.ctx.strokeStyle = hovered ? this.style.accentColor : this.style.inputBorder;
-        this.ctx.lineWidth = 1;
-        this.roundRect(x, dropdownY, width, height, this.style.borderRadius);
-        this.ctx.stroke();
-        // Selected value
-        this.ctx.fillStyle = this.style.textColor;
-        this.ctx.fillText(options[selected] ?? '', x + this.style.padding, dropdownY + height / 2 + this.style.fontSize / 3);
-        // Arrow (drawn, not a font glyph)
-        const arrowX = x + width - 16;
-        const arrowY = dropdownY + height / 2;
-        this.ctx.beginPath();
-        this.ctx.moveTo(arrowX - 5, arrowY - 3);
-        this.ctx.lineTo(arrowX + 5, arrowY - 3);
-        this.ctx.lineTo(arrowX, arrowY + 3);
-        this.ctx.closePath();
-        this.ctx.fill();
-        // Handle click - simplified, just cycle through options
-        let newSelected = selected;
-        if (hovered && this.mouseClicked) {
-            newSelected = (selected + 1) % options.length;
-        }
-        this.advanceCursor(width, height + this.style.fontSize + this.style.itemSpacing);
-        if (hovered) {
-            this._isHovered = true;
-        }
-        return newSelected;
-    }
-    colorPicker(label, color) {
-        const x = this.getX();
-        const y = this.getY();
-        const size = 24;
-        // Label
-        this.ctx.fillStyle = this.style.textColor;
-        this.ctx.font = `${this.style.fontSize}px ${this.style.fontFamily}`;
-        this.ctx.fillText(label, x, y + this.style.fontSize);
-        const colorY = y + this.style.fontSize + this.style.itemSpacing;
-        const hovered = this.isInRect(x, colorY, size, size);
-        // Color swatch
-        this.ctx.fillStyle = `rgba(${color.r * 255}, ${color.g * 255}, ${color.b * 255}, ${color.a ?? 1})`;
-        this.roundRect(x, colorY, size, size, 4);
-        this.ctx.fill();
-        // Border
-        this.ctx.strokeStyle = hovered ? this.style.accentColor : this.style.inputBorder;
-        this.ctx.lineWidth = 1;
-        this.roundRect(x, colorY, size, size, 4);
-        this.ctx.stroke();
-        this.advanceCursor(size + this.ctx.measureText(label).width + this.style.itemSpacing, size + this.style.fontSize + this.style.itemSpacing);
-        if (hovered) {
-            this._isHovered = true;
-        }
-        return { r: color.r, g: color.g, b: color.b, a: color.a ?? 1 };
-    }
-    image(_src, width, height) {
-        const x = this.getX();
-        const y = this.getY();
-        // Placeholder
-        this.ctx.fillStyle = this.style.panelBg;
-        this.roundRect(x, y, width, height, this.style.borderRadius);
-        this.ctx.fill();
-        this.advanceCursor(width, height + this.style.itemSpacing);
-    }
-    progressBar(value, max = 1) {
-        const x = this.getX();
-        const y = this.getY();
-        const width = 200;
-        const height = 8;
-        // Background
-        this.ctx.fillStyle = this.style.sliderBg;
-        this.roundRect(x, y, width, height, 4);
-        this.ctx.fill();
-        // Fill
-        const fillWidth = (value / max) * width;
-        this.ctx.fillStyle = this.style.accentColor;
-        this.roundRect(x, y, fillWidth, height, 4);
-        this.ctx.fill();
-        this.advanceCursor(width, height + this.style.itemSpacing);
-    }
-    // ─── Layout ────────────────────────────────────────────
-    sameLine() {
-        this.currentState.sameLine = true;
-        this.currentState.cursorY -= this.currentState.lastWidgetHeight;
-        this.currentState.cursorX += this.currentState.maxWidgetWidth + this.style.itemSpacing;
-    }
-    newLine() {
-        this.currentState.cursorX =
-            this.currentState.windowX + this.style.padding + this.currentState.indentLevel * 20;
-        this.currentState.cursorY += this.style.itemSpacing;
-    }
-    indent() {
-        this.currentState.indentLevel++;
-        this.currentState.cursorX += 20;
-    }
-    unindent() {
-        if (this.currentState.indentLevel > 0) {
-            this.currentState.indentLevel--;
-            this.currentState.cursorX -= 20;
-        }
-    }
-    separator() {
-        const x = this.currentState.windowX + this.style.padding;
-        const y = this.getY() + this.style.itemSpacing;
-        const width = this.currentState.windowWidth - this.style.padding * 2;
-        this.ctx.strokeStyle = this.style.windowBorder;
-        this.ctx.beginPath();
-        this.ctx.moveTo(x, y);
-        this.ctx.lineTo(x + width, y);
-        this.ctx.stroke();
-        this.currentState.cursorY = y + this.style.itemSpacing * 2;
-    }
-    spacing(amount) {
-        this.currentState.cursorY += amount;
-    }
-    tooltip(content) {
-        if (!this._isHovered) {
-            return;
-        }
-        const x = this.mousePos.x + 10;
-        const y = this.mousePos.y + 10;
-        const padding = 4;
-        this.ctx.font = `${this.style.fontSize - 2}px ${this.style.fontFamily}`;
-        const width = this.ctx.measureText(content).width + padding * 2;
-        const height = this.style.fontSize + padding * 2;
-        // Background
-        this.ctx.fillStyle = 'rgba(0, 0, 0, 0.9)';
-        this.roundRect(x, y, width, height, 2);
-        this.ctx.fill();
-        // Text
-        this.ctx.fillStyle = this.style.textColor;
-        this.ctx.fillText(content, x + padding, y + padding + this.style.fontSize - 2);
-    }
-    isHovered() {
-        return this._isHovered;
-    }
-    // ─── Helpers ───────────────────────────────────────────
-    getX() {
-        return this.currentState.cursorX;
-    }
-    getY() {
-        return this.currentState.cursorY;
-    }
-    advanceCursor(width, height) {
-        if (!this.currentState.sameLine) {
-            this.currentState.cursorX =
-                this.currentState.windowX + this.style.padding + this.currentState.indentLevel * 20;
-            this.currentState.cursorY += height;
-        }
-        this.currentState.maxWidgetWidth = Math.max(this.currentState.maxWidgetWidth, width);
-        this.currentState.lastWidgetHeight = height;
-        this.currentState.sameLine = false;
-    }
-    isInRect(x, y, width, height) {
-        return (this.mousePos.x >= x &&
-            this.mousePos.x <= x + width &&
-            this.mousePos.y >= y &&
-            this.mousePos.y <= y + height);
-    }
-    roundRect(x, y, width, height, radius) {
-        this.ctx.beginPath();
-        this.ctx.moveTo(x + radius, y);
-        this.ctx.lineTo(x + width - radius, y);
-        this.ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
-        this.ctx.lineTo(x + width, y + height - radius);
-        this.ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
-        this.ctx.lineTo(x + radius, y + height);
-        this.ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
-        this.ctx.lineTo(x, y + radius);
-        this.ctx.quadraticCurveTo(x, y, x + radius, y);
-        this.ctx.closePath();
-    }
+  constructor(canvas) {
+    this.stateStack = [];
+    this.hotWidget = null;
+    this.activeWidget = null;
+    this.mousePos = { x: 0, y: 0 };
+    this.mouseDown = false;
+    this.mouseClicked = false;
+    this.keyboardInput = "";
+    this._isHovered = false;
+    this.style = {
+      windowBg: "rgba(30, 30, 30, 0.95)",
+      windowBorder: "rgba(60, 60, 60, 1)",
+      panelBg: "rgba(40, 40, 40, 0.8)",
+      buttonBg: "rgba(60, 60, 60, 1)",
+      buttonHover: "rgba(80, 80, 80, 1)",
+      buttonActive: "rgba(100, 100, 100, 1)",
+      inputBg: "rgba(20, 20, 20, 1)",
+      inputBorder: "rgba(80, 80, 80, 1)",
+      sliderBg: "rgba(40, 40, 40, 1)",
+      sliderFill: "rgba(70, 130, 180, 1)",
+      textColor: "rgba(220, 220, 220, 1)",
+      textDim: "rgba(150, 150, 150, 1)",
+      accentColor: "rgba(70, 130, 180, 1)",
+      fontSize: 14,
+      fontFamily: "Arial, sans-serif",
+      padding: 8,
+      borderRadius: 4,
+      itemSpacing: 4
+    };
+    this.canvas = canvas;
+    this.ctx = canvas.getContext("2d");
+    this.currentState = this.createState();
+    canvas.addEventListener("mousemove", (e) => {
+      const rect = canvas.getBoundingClientRect();
+      this.mousePos.x = e.clientX - rect.left;
+      this.mousePos.y = e.clientY - rect.top;
+    });
+    canvas.addEventListener("mousedown", () => {
+      this.mouseDown = true;
+      this.mouseClicked = true;
+    });
+    canvas.addEventListener("mouseup", () => {
+      this.mouseDown = false;
+    });
+    window.addEventListener("keypress", (e) => {
+      this.keyboardInput += e.key;
+    });
+  }
+  createState() {
+    return {
+      cursorX: 0,
+      cursorY: 0,
+      windowX: 0,
+      windowY: 0,
+      windowWidth: 0,
+      windowHeight: 0,
+      indentLevel: 0,
+      sameLine: false,
+      maxWidgetWidth: 0,
+      lastWidgetHeight: 0
+    };
+  }
+  beginFrame() {
+    this._isHovered = false;
+    this.keyboardInput = "";
+  }
+  endFrame() {
+    this.mouseClicked = false;
+    this.hotWidget = null;
+  }
+  // ─── Window ────────────────────────────────────────────
+  beginWindow(title, x, y, width, height) {
+    this.stateStack.push({ ...this.currentState });
+    this.currentState.windowX = x;
+    this.currentState.windowY = y;
+    this.currentState.windowWidth = width;
+    this.currentState.windowHeight = height;
+    this.currentState.cursorX = x + this.style.padding;
+    this.currentState.cursorY = y + this.style.padding + 20;
+    this.ctx.fillStyle = this.style.windowBg;
+    this.roundRect(x, y, width, height, this.style.borderRadius);
+    this.ctx.fill();
+    this.ctx.strokeStyle = this.style.windowBorder;
+    this.ctx.lineWidth = 1;
+    this.roundRect(x, y, width, height, this.style.borderRadius);
+    this.ctx.stroke();
+    this.ctx.fillStyle = this.style.textColor;
+    this.ctx.font = `bold ${this.style.fontSize}px ${this.style.fontFamily}`;
+    this.ctx.fillText(title, x + this.style.padding, y + this.style.fontSize + 4);
+    this.ctx.strokeStyle = this.style.windowBorder;
+    this.ctx.beginPath();
+    this.ctx.moveTo(x, y + 24);
+    this.ctx.lineTo(x + width, y + 24);
+    this.ctx.stroke();
+    return true;
+  }
+  endWindow() {
+    if (this.stateStack.length > 0) {
+      this.currentState = this.stateStack.pop();
+    }
+  }
+  beginPanel(_id) {
+    this.stateStack.push({ ...this.currentState });
+    const x = this.currentState.cursorX;
+    const y = this.currentState.cursorY;
+    const width = this.currentState.windowWidth - this.style.padding * 2;
+    this.ctx.fillStyle = this.style.panelBg;
+    this.roundRect(x, y, width, 100, this.style.borderRadius);
+    this.ctx.fill();
+    this.currentState.cursorX += this.style.padding;
+    this.currentState.cursorY += this.style.padding;
+  }
+  endPanel() {
+    if (this.stateStack.length > 0) {
+      const prevState = this.stateStack.pop();
+      this.currentState.cursorX = prevState.cursorX;
+      this.currentState.cursorY += this.style.padding;
+    }
+  }
+  // ─── Elements ──────────────────────────────────────────
+  text(content) {
+    const x = this.getX();
+    const y = this.getY();
+    this.ctx.fillStyle = this.style.textColor;
+    this.ctx.font = `${this.style.fontSize}px ${this.style.fontFamily}`;
+    this.ctx.fillText(content, x, y + this.style.fontSize);
+    this.advanceCursor(
+      this.ctx.measureText(content).width,
+      this.style.fontSize + this.style.itemSpacing
+    );
+  }
+  button(label) {
+    const id = `button_${label}`;
+    const x = this.getX();
+    const y = this.getY();
+    const width = Math.max(100, this.ctx.measureText(label).width + this.style.padding * 2);
+    const height = this.style.fontSize + this.style.padding * 2;
+    const hovered = this.isInRect(x, y, width, height);
+    const clicked = hovered && this.mouseClicked;
+    if (this.mouseDown && hovered) {
+      this.ctx.fillStyle = this.style.buttonActive;
+    } else if (hovered) {
+      this.ctx.fillStyle = this.style.buttonHover;
+      this.hotWidget = id;
+    } else {
+      this.ctx.fillStyle = this.style.buttonBg;
+    }
+    this.roundRect(x, y, width, height, this.style.borderRadius);
+    this.ctx.fill();
+    this.ctx.fillStyle = this.style.textColor;
+    this.ctx.font = `${this.style.fontSize}px ${this.style.fontFamily}`;
+    const textWidth = this.ctx.measureText(label).width;
+    this.ctx.fillText(label, x + (width - textWidth) / 2, y + height / 2 + this.style.fontSize / 3);
+    this.advanceCursor(width, height + this.style.itemSpacing);
+    if (hovered) {
+      this._isHovered = true;
+    }
+    return clicked;
+  }
+  checkbox(label, checked) {
+    const id = `checkbox_${label}`;
+    const x = this.getX();
+    const y = this.getY();
+    const boxSize = this.style.fontSize + 4;
+    const hovered = this.isInRect(x, y, boxSize, boxSize);
+    const clicked = hovered && this.mouseClicked;
+    this.ctx.fillStyle = this.style.inputBg;
+    this.roundRect(x, y, boxSize, boxSize, 2);
+    this.ctx.fill();
+    this.ctx.strokeStyle = hovered ? this.style.accentColor : this.style.inputBorder;
+    this.ctx.lineWidth = 1;
+    this.roundRect(x, y, boxSize, boxSize, 2);
+    this.ctx.stroke();
+    if (checked) {
+      this.ctx.fillStyle = this.style.accentColor;
+      this.roundRect(x + 3, y + 3, boxSize - 6, boxSize - 6, 2);
+      this.ctx.fill();
+    }
+    this.ctx.fillStyle = this.style.textColor;
+    this.ctx.font = `${this.style.fontSize}px ${this.style.fontFamily}`;
+    this.ctx.fillText(
+      label,
+      x + boxSize + this.style.itemSpacing,
+      y + boxSize / 2 + this.style.fontSize / 3
+    );
+    const width = boxSize + this.style.itemSpacing + this.ctx.measureText(label).width;
+    this.advanceCursor(width, boxSize + this.style.itemSpacing);
+    if (hovered) {
+      this._isHovered = true;
+      this.hotWidget = id;
+    }
+    return clicked ? !checked : checked;
+  }
+  slider(label, value, min, max) {
+    const id = `slider_${label}`;
+    const x = this.getX();
+    const y = this.getY();
+    const width = 200;
+    const height = this.style.fontSize + this.style.padding;
+    const trackHeight = 6;
+    this.ctx.fillStyle = this.style.textColor;
+    this.ctx.font = `${this.style.fontSize}px ${this.style.fontFamily}`;
+    this.ctx.fillText(label, x, y + this.style.fontSize);
+    const trackY = y + this.style.fontSize + this.style.itemSpacing;
+    const hovered = this.isInRect(x, trackY, width, trackHeight);
+    this.ctx.fillStyle = this.style.sliderBg;
+    this.roundRect(x, trackY, width, trackHeight, 3);
+    this.ctx.fill();
+    const normalizedValue = (value - min) / (max - min);
+    const fillWidth = width * normalizedValue;
+    this.ctx.fillStyle = this.style.sliderFill;
+    this.roundRect(x, trackY, fillWidth, trackHeight, 3);
+    this.ctx.fill();
+    const handleX = x + fillWidth - 6;
+    this.ctx.fillStyle = this.style.textColor;
+    this.ctx.beginPath();
+    this.ctx.arc(handleX + 6, trackY + trackHeight / 2, 8, 0, Math.PI * 2);
+    this.ctx.fill();
+    const valueText = value.toFixed(2);
+    this.ctx.fillStyle = this.style.textDim;
+    this.ctx.fillText(
+      valueText,
+      x + width + this.style.itemSpacing,
+      trackY + this.style.fontSize / 2
+    );
+    let newValue = value;
+    if (hovered && this.mouseDown) {
+      const localX = this.mousePos.x - x;
+      const t = Math.max(0, Math.min(1, localX / width));
+      newValue = min + t * (max - min);
+      this.activeWidget = id;
+    }
+    this.advanceCursor(width + 50, height + trackHeight + this.style.itemSpacing);
+    if (hovered) {
+      this._isHovered = true;
+      this.hotWidget = id;
+    }
+    return newValue;
+  }
+  textInput(label, value) {
+    const id = `input_${label}`;
+    const x = this.getX();
+    const y = this.getY();
+    const width = 200;
+    const height = this.style.fontSize + this.style.padding * 2;
+    this.ctx.fillStyle = this.style.textColor;
+    this.ctx.font = `${this.style.fontSize}px ${this.style.fontFamily}`;
+    this.ctx.fillText(label, x, y + this.style.fontSize);
+    const inputY = y + this.style.fontSize + this.style.itemSpacing;
+    const hovered = this.isInRect(x, inputY, width, height);
+    const isActive = this.activeWidget === id;
+    this.ctx.fillStyle = this.style.inputBg;
+    this.roundRect(x, inputY, width, height, this.style.borderRadius);
+    this.ctx.fill();
+    this.ctx.strokeStyle = isActive ? this.style.accentColor : hovered ? this.style.textDim : this.style.inputBorder;
+    this.ctx.lineWidth = 1;
+    this.roundRect(x, inputY, width, height, this.style.borderRadius);
+    this.ctx.stroke();
+    this.ctx.fillStyle = this.style.textColor;
+    this.ctx.fillText(value, x + this.style.padding, inputY + height / 2 + this.style.fontSize / 3);
+    if (isActive) {
+      const cursorX = x + this.style.padding + this.ctx.measureText(value).width;
+      this.ctx.fillStyle = this.style.textColor;
+      this.ctx.fillRect(cursorX + 2, inputY + 4, 2, height - 8);
+    }
+    if (hovered && this.mouseClicked) {
+      this.activeWidget = id;
+    }
+    let newValue = value;
+    if (isActive && this.keyboardInput) {
+      newValue = value + this.keyboardInput;
+    }
+    this.advanceCursor(width, height + this.style.fontSize + this.style.itemSpacing);
+    if (hovered) {
+      this._isHovered = true;
+      this.hotWidget = id;
+    }
+    return newValue;
+  }
+  dropdown(label, selected, options) {
+    const x = this.getX();
+    const y = this.getY();
+    const width = 200;
+    const height = this.style.fontSize + this.style.padding * 2;
+    this.ctx.fillStyle = this.style.textColor;
+    this.ctx.font = `${this.style.fontSize}px ${this.style.fontFamily}`;
+    this.ctx.fillText(label, x, y + this.style.fontSize);
+    const dropdownY = y + this.style.fontSize + this.style.itemSpacing;
+    const hovered = this.isInRect(x, dropdownY, width, height);
+    this.ctx.fillStyle = this.style.inputBg;
+    this.roundRect(x, dropdownY, width, height, this.style.borderRadius);
+    this.ctx.fill();
+    this.ctx.strokeStyle = hovered ? this.style.accentColor : this.style.inputBorder;
+    this.ctx.lineWidth = 1;
+    this.roundRect(x, dropdownY, width, height, this.style.borderRadius);
+    this.ctx.stroke();
+    this.ctx.fillStyle = this.style.textColor;
+    this.ctx.fillText(
+      options[selected] ?? "",
+      x + this.style.padding,
+      dropdownY + height / 2 + this.style.fontSize / 3
+    );
+    const arrowX = x + width - 16;
+    const arrowY = dropdownY + height / 2;
+    this.ctx.beginPath();
+    this.ctx.moveTo(arrowX - 5, arrowY - 3);
+    this.ctx.lineTo(arrowX + 5, arrowY - 3);
+    this.ctx.lineTo(arrowX, arrowY + 3);
+    this.ctx.closePath();
+    this.ctx.fill();
+    let newSelected = selected;
+    if (hovered && this.mouseClicked) {
+      newSelected = (selected + 1) % options.length;
+    }
+    this.advanceCursor(width, height + this.style.fontSize + this.style.itemSpacing);
+    if (hovered) {
+      this._isHovered = true;
+    }
+    return newSelected;
+  }
+  colorPicker(label, color) {
+    const x = this.getX();
+    const y = this.getY();
+    const size = 24;
+    this.ctx.fillStyle = this.style.textColor;
+    this.ctx.font = `${this.style.fontSize}px ${this.style.fontFamily}`;
+    this.ctx.fillText(label, x, y + this.style.fontSize);
+    const colorY = y + this.style.fontSize + this.style.itemSpacing;
+    const hovered = this.isInRect(x, colorY, size, size);
+    this.ctx.fillStyle = `rgba(${color.r * 255}, ${color.g * 255}, ${color.b * 255}, ${color.a ?? 1})`;
+    this.roundRect(x, colorY, size, size, 4);
+    this.ctx.fill();
+    this.ctx.strokeStyle = hovered ? this.style.accentColor : this.style.inputBorder;
+    this.ctx.lineWidth = 1;
+    this.roundRect(x, colorY, size, size, 4);
+    this.ctx.stroke();
+    this.advanceCursor(
+      size + this.ctx.measureText(label).width + this.style.itemSpacing,
+      size + this.style.fontSize + this.style.itemSpacing
+    );
+    if (hovered) {
+      this._isHovered = true;
+    }
+    return { r: color.r, g: color.g, b: color.b, a: color.a ?? 1 };
+  }
+  image(_src, width, height) {
+    const x = this.getX();
+    const y = this.getY();
+    this.ctx.fillStyle = this.style.panelBg;
+    this.roundRect(x, y, width, height, this.style.borderRadius);
+    this.ctx.fill();
+    this.advanceCursor(width, height + this.style.itemSpacing);
+  }
+  progressBar(value, max = 1) {
+    const x = this.getX();
+    const y = this.getY();
+    const width = 200;
+    const height = 8;
+    this.ctx.fillStyle = this.style.sliderBg;
+    this.roundRect(x, y, width, height, 4);
+    this.ctx.fill();
+    const fillWidth = value / max * width;
+    this.ctx.fillStyle = this.style.accentColor;
+    this.roundRect(x, y, fillWidth, height, 4);
+    this.ctx.fill();
+    this.advanceCursor(width, height + this.style.itemSpacing);
+  }
+  // ─── Layout ────────────────────────────────────────────
+  sameLine() {
+    this.currentState.sameLine = true;
+    this.currentState.cursorY -= this.currentState.lastWidgetHeight;
+    this.currentState.cursorX += this.currentState.maxWidgetWidth + this.style.itemSpacing;
+  }
+  newLine() {
+    this.currentState.cursorX = this.currentState.windowX + this.style.padding + this.currentState.indentLevel * 20;
+    this.currentState.cursorY += this.style.itemSpacing;
+  }
+  indent() {
+    this.currentState.indentLevel++;
+    this.currentState.cursorX += 20;
+  }
+  unindent() {
+    if (this.currentState.indentLevel > 0) {
+      this.currentState.indentLevel--;
+      this.currentState.cursorX -= 20;
+    }
+  }
+  separator() {
+    const x = this.currentState.windowX + this.style.padding;
+    const y = this.getY() + this.style.itemSpacing;
+    const width = this.currentState.windowWidth - this.style.padding * 2;
+    this.ctx.strokeStyle = this.style.windowBorder;
+    this.ctx.beginPath();
+    this.ctx.moveTo(x, y);
+    this.ctx.lineTo(x + width, y);
+    this.ctx.stroke();
+    this.currentState.cursorY = y + this.style.itemSpacing * 2;
+  }
+  spacing(amount) {
+    this.currentState.cursorY += amount;
+  }
+  tooltip(content) {
+    if (!this._isHovered) {
+      return;
+    }
+    const x = this.mousePos.x + 10;
+    const y = this.mousePos.y + 10;
+    const padding = 4;
+    this.ctx.font = `${this.style.fontSize - 2}px ${this.style.fontFamily}`;
+    const width = this.ctx.measureText(content).width + padding * 2;
+    const height = this.style.fontSize + padding * 2;
+    this.ctx.fillStyle = "rgba(0, 0, 0, 0.9)";
+    this.roundRect(x, y, width, height, 2);
+    this.ctx.fill();
+    this.ctx.fillStyle = this.style.textColor;
+    this.ctx.fillText(content, x + padding, y + padding + this.style.fontSize - 2);
+  }
+  isHovered() {
+    return this._isHovered;
+  }
+  // ─── Helpers ───────────────────────────────────────────
+  getX() {
+    return this.currentState.cursorX;
+  }
+  getY() {
+    return this.currentState.cursorY;
+  }
+  advanceCursor(width, height) {
+    if (!this.currentState.sameLine) {
+      this.currentState.cursorX = this.currentState.windowX + this.style.padding + this.currentState.indentLevel * 20;
+      this.currentState.cursorY += height;
+    }
+    this.currentState.maxWidgetWidth = Math.max(this.currentState.maxWidgetWidth, width);
+    this.currentState.lastWidgetHeight = height;
+    this.currentState.sameLine = false;
+  }
+  isInRect(x, y, width, height) {
+    return this.mousePos.x >= x && this.mousePos.x <= x + width && this.mousePos.y >= y && this.mousePos.y <= y + height;
+  }
+  roundRect(x, y, width, height, radius) {
+    this.ctx.beginPath();
+    this.ctx.moveTo(x + radius, y);
+    this.ctx.lineTo(x + width - radius, y);
+    this.ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    this.ctx.lineTo(x + width, y + height - radius);
+    this.ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    this.ctx.lineTo(x + radius, y + height);
+    this.ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    this.ctx.lineTo(x, y + radius);
+    this.ctx.quadraticCurveTo(x, y, x + radius, y);
+    this.ctx.closePath();
+  }
 }
-// ============================================================
-// Factory Functions
-// ============================================================
 function createInputSystem() {
-    return new InputSystem();
+  return new InputSystem();
 }
 function createUISystem(canvas) {
-    return new UISystem(canvas);
+  return new UISystem(canvas);
 }
-
-export { InputSystem, UISystem, createInputSystem, createUISystem };
+export {
+  InputSystem,
+  UISystem,
+  createInputSystem,
+  createUISystem
+};