@nice2dev/game-engine 1.0.4 → 1.0.10

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

@@ -0,0 +1,1170 @@
+/**
+ * @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);
+        }
+    }
+    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;
+        }
+        // Normalize if magnitude > 1
+        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;
+                }
+            }
+        }
+        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;
+                }
+            }
+        }
+        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) {
+            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);
+    }
+    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();
+    }
+}
+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
+    }
+}
+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'];
+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;
+        }
+    }
+}
+class InputMapImpl {
+    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
+        this.ctx.fillText('▼', x + width - 20, dropdownY + height / 2 + this.style.fontSize / 3);
+        // 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();
+    }
+}
+// ============================================================
+// Factory Functions
+// ============================================================
+function createInputSystem() {
+    return new InputSystem();
+}
+function createUISystem(canvas) {
+    return new UISystem(canvas);
+}
+
+export { InputSystem, UISystem, createInputSystem, createUISystem };
+//# sourceMappingURL=InputSystem.js.map