@iwer/devui 0.1.0

package/lib/components/analog.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { XRController } from '../../../lib/device/XRController';
+interface AnalogButtonProps {
+    xrController: XRController;
+    buttonId: string;
+    pointerLocked: boolean;
+    mappedKey: string;
+}
+export declare const AnalogButton: React.FC<AnalogButtonProps>;
+export {};
+//# sourceMappingURL=analog.d.ts.map

package/lib/components/analog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"analog.d.ts","sourceRoot":"","sources":["../../src/components/analog.tsx"],"names":[],"mappings":"AAQA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAGhE,UAAU,iBAAiB;IAC1B,YAAY,EAAE,YAAY,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyIpD,CAAC"}

package/lib/components/analog.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ButtonContainer, ButtonGroup, FAIcon, MappedKeyBlock, RangeSelector, } from './styled.js';
+import { useEffect, useState } from 'react';
+import { GamepadIcon } from './icons.js';
+import { MappedKeyDisplay } from './keys.js';
+import { faFingerprint } from '@fortawesome/free-solid-svg-icons';
+export const AnalogButton = ({ xrController, buttonId, pointerLocked, mappedKey, }) => {
+    const [isTouched, setIsTouched] = useState(false);
+    const [isPressed, setIsPressed] = useState(false);
+    const [isKeyPressed, setIsKeyPressed] = useState(false);
+    const [analogValue, setAnalogValue] = useState(0);
+    const handedness = xrController.inputSource.handedness;
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.code === mappedKey) {
+                xrController.updateButtonValue(buttonId, 1);
+                setIsKeyPressed(true);
+            }
+        };
+        const handleKeyUp = (event) => {
+            if (event.code === mappedKey) {
+                xrController.updateButtonValue(buttonId, 0);
+                setIsKeyPressed(false);
+            }
+        };
+        const handleMouseDown = (event) => {
+            if (mappedKey === 'MouseLeft' && event.button === 0) {
+                xrController.updateButtonValue(buttonId, 1);
+                setIsKeyPressed(true);
+            }
+            else if (mappedKey === 'MouseRight' && event.button === 2) {
+                xrController.updateButtonValue(buttonId, 1);
+                setIsKeyPressed(true);
+            }
+        };
+        const handleMouseUp = (event) => {
+            if (mappedKey === 'MouseLeft' && event.button === 0) {
+                xrController.updateButtonValue(buttonId, 0);
+                setIsKeyPressed(false);
+            }
+            else if (mappedKey === 'MouseRight' && event.button === 2) {
+                xrController.updateButtonValue(buttonId, 0);
+                setIsKeyPressed(false);
+            }
+        };
+        if (pointerLocked) {
+            if (mappedKey === 'MouseLeft' || mappedKey === 'MouseRight') {
+                window.addEventListener('mousedown', handleMouseDown);
+                window.addEventListener('mouseup', handleMouseUp);
+            }
+            else {
+                window.addEventListener('keydown', handleKeyDown);
+                window.addEventListener('keyup', handleKeyUp);
+            }
+        }
+        else {
+            if (mappedKey === 'MouseLeft' || mappedKey === 'MouseRight') {
+                window.removeEventListener('mousedown', handleMouseDown);
+                window.removeEventListener('mouseup', handleMouseUp);
+            }
+            else {
+                window.removeEventListener('keydown', handleKeyDown);
+                window.removeEventListener('keyup', handleKeyUp);
+            }
+        }
+        return () => {
+            if (mappedKey === 'MouseLeft' || mappedKey === 'MouseRight') {
+                window.removeEventListener('mousedown', handleMouseDown);
+                window.removeEventListener('mouseup', handleMouseUp);
+            }
+            else {
+                window.removeEventListener('keydown', handleKeyDown);
+                window.removeEventListener('keyup', handleKeyUp);
+            }
+        };
+    }, [mappedKey, pointerLocked, buttonId, xrController]);
+    return (_jsxs(ButtonContainer, { "$reverse": handedness === 'right', children: [_jsx(GamepadIcon, { buttonName: buttonId, handedness: handedness }), _jsx(ButtonGroup, { "$reverse": handedness === 'right', children: pointerLocked ? (_jsx(MappedKeyBlock, { "$pressed": isKeyPressed, children: MappedKeyDisplay[mappedKey] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { "$reverse": handedness === 'right', style: {
+                                backgroundColor: isPressed
+                                    ? 'rgba(255, 255, 255, 0.6)'
+                                    : 'rgba(255, 255, 255, 0.3)',
+                                width: '50px',
+                            }, onClick: () => {
+                                setIsPressed(true);
+                                xrController.updateButtonValue(buttonId, 1);
+                                setTimeout(() => {
+                                    setIsPressed(false);
+                                    xrController.updateButtonValue(buttonId, 0);
+                                }, 500);
+                            }, children: "Press" }), _jsx(Button, { "$reverse": handedness === 'right', style: {
+                                backgroundColor: isTouched
+                                    ? 'rgba(255, 255, 255, 0.6)'
+                                    : 'rgba(255, 255, 255, 0.3)',
+                                width: '29px',
+                            }, onClick: () => {
+                                setIsTouched(!isTouched);
+                                xrController.updateButtonTouch(buttonId, !isTouched);
+                            }, children: _jsx(FAIcon, { icon: faFingerprint }) }), _jsx(RangeSelector, { "$reverse": handedness === 'right', value: analogValue, onChange: (e) => {
+                                const value = Number(e.target.value);
+                                setAnalogValue(value);
+                                xrController.updateButtonValue(buttonId, value / 100);
+                            }, min: "0", max: "100" })] })) })] }));
+};
+//# sourceMappingURL=analog.js.map

package/lib/components/analog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"analog.js","sourceRoot":"","sources":["../../src/components/analog.tsx"],"names":[],"mappings":"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"}

package/lib/components/binary.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { XRController } from '../../../lib/device/XRController';
+interface BinaryButtonProps {
+    xrController: XRController;
+    buttonId: string;
+    pointerLocked: boolean;
+    mappedKey: string;
+}
+export declare const BinaryButton: React.FC<BinaryButtonProps>;
+export {};
+//# sourceMappingURL=binary.d.ts.map

package/lib/components/binary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"binary.d.ts","sourceRoot":"","sources":["../../src/components/binary.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAGhE,UAAU,iBAAiB;IAC1B,YAAY,EAAE,YAAY,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA0GpD,CAAC"}

package/lib/components/binary.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ButtonContainer, ButtonGroup, FAIcon, MappedKeyBlock, } from './styled.js';
+import { useEffect, useState } from 'react';
+import { GamepadIcon } from './icons.js';
+import { MappedKeyDisplay } from './keys.js';
+import { faFingerprint } from '@fortawesome/free-solid-svg-icons';
+export const BinaryButton = ({ xrController, buttonId, pointerLocked, mappedKey, }) => {
+    const [isTouched, setIsTouched] = useState(false);
+    const [isOnHold, setIsOnHold] = useState(false);
+    const [isPressed, setIsPressed] = useState(false);
+    const [isKeyPressed, setIsKeyPressed] = useState(false);
+    const handedness = xrController.inputSource.handedness;
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.code === mappedKey) {
+                xrController.updateButtonValue(buttonId, 1);
+                setIsKeyPressed(true);
+            }
+        };
+        const handleKeyUp = (event) => {
+            if (event.code === mappedKey) {
+                xrController.updateButtonValue(buttonId, 0);
+                setIsKeyPressed(false);
+            }
+        };
+        if (pointerLocked) {
+            window.addEventListener('keydown', handleKeyDown);
+            window.addEventListener('keyup', handleKeyUp);
+        }
+        else {
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('keyup', handleKeyUp);
+        }
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('keyup', handleKeyUp);
+        };
+    }, [mappedKey, pointerLocked, buttonId, xrController]);
+    return (_jsxs(ButtonContainer, { "$reverse": handedness === 'right', children: [_jsx(GamepadIcon, { buttonName: buttonId, handedness: handedness }), _jsx(ButtonGroup, { "$reverse": handedness === 'right', children: pointerLocked ? (_jsx(MappedKeyBlock, { "$pressed": isKeyPressed, children: MappedKeyDisplay[mappedKey] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { "$reverse": handedness === 'right', style: {
+                                backgroundColor: isPressed
+                                    ? 'rgba(255, 255, 255, 0.6)'
+                                    : 'rgba(255, 255, 255, 0.3)',
+                                width: '50px',
+                            }, onClick: () => {
+                                setIsPressed(true);
+                                xrController.updateButtonValue(buttonId, 1);
+                                setTimeout(() => {
+                                    setIsPressed(false);
+                                    xrController.updateButtonValue(buttonId, 0);
+                                }, 500);
+                            }, children: "Press" }), _jsx(Button, { "$reverse": handedness === 'right', style: {
+                                backgroundColor: isTouched
+                                    ? 'rgba(255, 255, 255, 0.6)'
+                                    : 'rgba(255, 255, 255, 0.3)',
+                                width: '29px',
+                            }, onClick: () => {
+                                setIsTouched(!isTouched);
+                                xrController.updateButtonTouch(buttonId, !isTouched);
+                            }, children: _jsx(FAIcon, { icon: faFingerprint }) }), _jsx(Button, { "$reverse": handedness === 'right', style: {
+                                backgroundColor: isOnHold
+                                    ? 'rgba(255, 255, 255, 0.6)'
+                                    : 'rgba(255, 255, 255, 0.3)',
+                                width: '49px',
+                            }, onClick: () => {
+                                setIsOnHold(!isOnHold);
+                                xrController.updateButtonValue(buttonId, isOnHold ? 0 : 1);
+                            }, children: "Hold" })] })) })] }));
+};
+//# sourceMappingURL=binary.js.map

package/lib/components/binary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"binary.js","sourceRoot":"","sources":["../../src/components/binary.tsx"],"names":[],"mappings":"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"}

package/lib/components/controls.d.ts

@@ -0,0 +1,11 @@
+import { KeyMapType } from './mapper.js';
+import React from 'react';
+import { XRDevice } from 'iwer';
+interface ControlsProps {
+    xrDevice: XRDevice;
+    keyMap: KeyMapType;
+    pointerLocked: boolean;
+}
+export declare const ControlsUI: React.FC<ControlsProps>;
+export {};
+//# sourceMappingURL=controls.d.ts.map

package/lib/components/controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../src/components/controls.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAahC,UAAU,aAAa;IACtB,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,EAAE,UAAU,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;CACvB;AAuCD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+D9C,CAAC"}

package/lib/components/controls.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AnalogButton } from './analog.js';
+import { BinaryButton } from './binary.js';
+import { Joystick } from './joystick.js';
+import styled from 'styled-components';
+const ControlsContainer = styled.div `
+	padding: ${({ $reverse }) => $reverse ? '6px 2px 3px 5px' : '6px 5px 3px 2px'};
+	pointer-events: all;
+	background-color: rgba(43, 43, 43, 0.5);
+	backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
+	border-radius: ${({ $reverse }) => ($reverse ? '12px 0 0 0' : '0 12px 0 0')};
+`;
+function transformGamepadConfig(gamepadConfig) {
+    const axesSet = new Set();
+    // Add all axis ids to the set
+    for (const axis of gamepadConfig.axes) {
+        if (axis && axis.id) {
+            axesSet.add(axis.id);
+        }
+    }
+    // Transform buttons to the desired format
+    const transformed = gamepadConfig.buttons
+        .filter((button) => button !== null) // Filter out null values
+        .map((button) => ({
+        id: button.id,
+        type: button.type,
+        hasAxes: axesSet.has(button.id),
+    }));
+    // Sort the array by hasAxes
+    transformed.sort((a, b) => {
+        if (a.hasAxes && !b.hasAxes)
+            return -1;
+        if (!a.hasAxes && b.hasAxes)
+            return 1;
+        return 0;
+    });
+    return transformed;
+}
+export const ControlsUI = ({ xrDevice, keyMap, pointerLocked, }) => {
+    return (_jsx("div", { style: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            flexDirection: 'row',
+        }, children: Object.entries(xrDevice.controllers).map(([handedness, controller]) => (_jsx(ControlsContainer, { "$reverse": handedness !== 'left', children: transformGamepadConfig(controller.gamepadConfig).map((buttonConfig) => {
+                const mapping = keyMap[handedness];
+                if (buttonConfig.hasAxes) {
+                    return (_jsx(Joystick, { xrController: controller, pointerLocked: pointerLocked, buttonId: buttonConfig.id, mappedKeyUp: keyMap[handedness][`${buttonConfig.id}-up`], mappedKeyDown: mapping[`${buttonConfig.id}-down`], mappedKeyLeft: mapping[`${buttonConfig.id}-left`], mappedKeyRight: mapping[`${buttonConfig.id}-right`], mappedKeyPressed: mapping[buttonConfig.id] }, buttonConfig.id));
+                }
+                else if (buttonConfig.type === 'analog') {
+                    return (_jsx(AnalogButton, { xrController: controller, buttonId: buttonConfig.id, mappedKey: mapping[buttonConfig.id], pointerLocked: pointerLocked }, buttonConfig.id));
+                }
+                else {
+                    return (_jsx(BinaryButton, { xrController: controller, buttonId: buttonConfig.id, mappedKey: mapping[buttonConfig.id], pointerLocked: pointerLocked }, buttonConfig.id));
+                }
+            }) }, handedness))) }));
+};
+//# sourceMappingURL=controls.js.map

package/lib/components/controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.js","sourceRoot":"","sources":["../../src/components/controls.tsx"],"names":[],"mappings":"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"}

package/lib/components/fov.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { InputLayer } from '../scene.js';
+import { XRDevice } from 'iwer';
+interface FOVMenuProps {
+    xrDevice: XRDevice;
+    inputLayer: InputLayer;
+}
+export declare const FOVMenu: React.FC<FOVMenuProps>;
+export {};
+//# sourceMappingURL=fov.d.ts.map

package/lib/components/fov.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fov.d.ts","sourceRoot":"","sources":["../../src/components/fov.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAGhC,UAAU,YAAY;IACrB,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,UAAU,CAAC;CACvB;AAaD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA6B1C,CAAC"}

package/lib/components/fov.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ButtonGroup, RangeSelector } from './styled.js';
+import { useState } from 'react';
+import styled from 'styled-components';
+const FovSettingContainer = styled.div `
+	display: flex;
+	justify-content: center;
+	pointer-events: all;
+	position: fixed;
+	display: flex;
+	top: 40px;
+	left: calc(50vw - 156px);
+	width: 312px;
+`;
+export const FOVMenu = ({ xrDevice, inputLayer }) => {
+    const [fovy, setFovy] = useState(xrDevice.fovy);
+    return (_jsx(FovSettingContainer, { children: _jsxs(ButtonGroup, { "$reverse": false, children: [_jsx(Button, { "$reverse": false, disabled: true, children: "FOV-Y" }), _jsx(RangeSelector, { "$reverse": false, value: fovy, style: { width: '100px', borderRadius: '2px' }, onChange: (e) => {
+                        const value = Number(e.target.value);
+                        setFovy(value);
+                        xrDevice.fovy = value;
+                        inputLayer.syncFovy();
+                        inputLayer.renderScene();
+                    }, min: Math.PI / 6, max: Math.PI / 1.5, step: Math.PI / 48 }), _jsxs(Button, { "$reverse": false, disabled: true, children: [((fovy / Math.PI) * 180).toFixed(2), "\u00B0"] })] }) }));
+};
+//# sourceMappingURL=fov.js.map

package/lib/components/fov.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fov.js","sourceRoot":"","sources":["../../src/components/fov.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjE,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIxC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAOvC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CASrC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE;IAC3E,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAChD,OAAO,CACN,KAAC,mBAAmB,cACnB,MAAC,WAAW,gBAAW,KAAK,aAC3B,KAAC,MAAM,gBAAW,KAAK,EAAE,QAAQ,EAAE,IAAI,sBAE9B,EACT,KAAC,aAAa,gBACH,KAAK,EACf,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,EAC9C,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;wBACf,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBACrC,OAAO,CAAC,KAAK,CAAC,CAAC;wBACf,QAAQ,CAAC,IAAI,GAAG,KAAK,CAAC;wBACtB,UAAU,CAAC,QAAQ,EAAE,CAAC;wBACtB,UAAU,CAAC,WAAW,EAAE,CAAC;oBAC1B,CAAC,EACD,GAAG,EAAE,IAAI,CAAC,EAAE,GAAG,CAAC,EAChB,GAAG,EAAE,IAAI,CAAC,EAAE,GAAG,GAAG,EAClB,IAAI,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,GACjB,EACF,MAAC,MAAM,gBAAW,KAAK,EAAE,QAAQ,EAAE,IAAI,aACrC,CAAC,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,cAC5B,IACI,GACO,CACtB,CAAC;AACH,CAAC,CAAC"}

package/lib/components/header.d.ts

@@ -0,0 +1,14 @@
+import { InputLayer } from '../scene.js';
+import React from 'react';
+import { XRDevice } from 'iwer';
+interface HeaderUIProps {
+    xrDevice: XRDevice;
+    inputLayer: InputLayer;
+    keyMapOpen: boolean;
+    setKeyMapOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    fovSettingOpen: boolean;
+    setFovSettingOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare const HeaderUI: React.FC<HeaderUIProps>;
+export {};
+//# sourceMappingURL=header.d.ts.map

package/lib/components/header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/components/header.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AA4ChC,UAAU,aAAa;IACtB,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7D,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACjE;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiH5C,CAAC"}

package/lib/components/header.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, FAIcon, MappedKeyBlock } from './styled.js';
+import { faArrowsUpDown, faCaretDown, faCaretUp, faCirclePlay, faKeyboard, faRightFromBracket, faRotateLeft, faSquareArrowUpRight, faVideo, } from '@fortawesome/free-solid-svg-icons';
+import { IWERIcon } from './icons.js';
+import styled from 'styled-components';
+const HeaderButtonsContainer = styled.div `
+	padding: 6px 5px;
+	display: flex;
+	background-color: rgba(43, 43, 43, 0.5);
+	backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
+	justify-content: center;
+	pointer-events: all;
+	border-radius: 0 0 12px 12px;
+	align-items: center;
+	height: 24px;
+`;
+const MovementInstructionsContainer = styled.div `
+	background-color: rgba(43, 43, 43, 0.5);
+	backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
+	border: none;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	justify-content: center;
+	cursor: pointer;
+	color: white;
+	white-space: nowrap;
+	font-size: 14px;
+	text-transform: none;
+	box-shadow: none;
+	font-family: Arial, sans-serif;
+	border-radius: ${({ $reverse }) => ($reverse ? '0 0 0 12px' : '0 0 12px 0')};
+	padding: 5px;
+
+	> div {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 2px;
+		margin: 2px;
+	}
+`;
+export const HeaderUI = ({ xrDevice, inputLayer, keyMapOpen, setKeyMapOpen, fovSettingOpen, setFovSettingOpen, }) => {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            justifyContent: 'center',
+        }, children: [_jsxs(HeaderButtonsContainer, { children: [_jsx(IWERIcon, {}), _jsxs("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            marginLeft: '4px',
+                        }, children: [_jsx(Button, { "$reverse": false, onClick: () => {
+                                    inputLayer.resetDeviceTransforms();
+                                }, children: _jsx(FAIcon, { icon: faRotateLeft }) }), _jsx(Button, { "$reverse": false, onClick: () => {
+                                    inputLayer.lockPointer();
+                                    setKeyMapOpen(false);
+                                    setFovSettingOpen(false);
+                                }, children: _jsx(FAIcon, { icon: faCirclePlay }) }), _jsx(Button, { "$reverse": false, onClick: () => {
+                                    setKeyMapOpen(!keyMapOpen);
+                                    setFovSettingOpen(false);
+                                }, children: _jsx(FAIcon, { icon: faKeyboard }) }), _jsx(Button, { "$reverse": false, onClick: () => {
+                                    setFovSettingOpen(!fovSettingOpen);
+                                    setKeyMapOpen(false);
+                                }, children: _jsx(FAIcon, { icon: faVideo }) }), _jsx(Button, { "$reverse": false, onClick: () => {
+                                    const xrSession = xrDevice.activeSession;
+                                    xrSession === null || xrSession === void 0 ? void 0 : xrSession.end();
+                                }, children: _jsx(FAIcon, { icon: faRightFromBracket }) })] })] }), _jsxs(MovementInstructionsContainer, { "$reverse": false, style: { position: 'fixed', left: '0', top: '0' }, children: [_jsxs("div", { children: [_jsx(FAIcon, { icon: faSquareArrowUpRight, style: { marginRight: '4px' } }), ' ', "Roomscale Movement"] }), _jsxs("div", { children: [_jsx(MappedKeyBlock, { "$pressed": false, style: { width: '50px' }, children: "L Shift" }), _jsx("span", { style: { margin: '0 4px' }, children: "+" }), _jsx(MappedKeyBlock, { "$pressed": false, children: "W" }), _jsx(MappedKeyBlock, { "$pressed": false, children: "A" }), _jsx(MappedKeyBlock, { "$pressed": false, children: "S" }), _jsx(MappedKeyBlock, { "$pressed": false, children: "D" })] })] }), _jsxs(MovementInstructionsContainer, { "$reverse": true, style: { position: 'fixed', right: '0', top: '0' }, children: [_jsxs("div", { children: [_jsx(FAIcon, { icon: faArrowsUpDown, style: { marginRight: '4px' } }), " Camera Height"] }), _jsxs("div", { children: [_jsx(MappedKeyBlock, { "$pressed": false, style: { width: '50px' }, children: "L Shift" }), _jsx("span", { style: { margin: '0 4px' }, children: "+" }), _jsx(MappedKeyBlock, { "$pressed": false, children: _jsx(FAIcon, { icon: faCaretUp }) }), _jsx(MappedKeyBlock, { "$pressed": false, children: _jsx(FAIcon, { icon: faCaretDown }) })] })] })] }));
+};
+//# sourceMappingURL=header.js.map

package/lib/components/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/components/header.tsx"],"names":[],"mappings":"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"}

package/lib/components/icons.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export declare const ButtonX: React.FC;
+export declare const ButtonY: React.FC;
+export declare const ButtonA: React.FC;
+export declare const ButtonB: React.FC;
+export declare const ThumbstickL: React.FC;
+export declare const ThumbstickR: React.FC;
+export declare const ThumbstickLUp: React.FC;
+export declare const ThumbstickLDown: React.FC;
+export declare const ThumbstickLLeft: React.FC;
+export declare const ThumbstickLRight: React.FC;
+export declare const ThumbstickRUp: React.FC;
+export declare const ThumbstickRDown: React.FC;
+export declare const ThumbstickRLeft: React.FC;
+export declare const ThumbstickRRight: React.FC;
+export declare const GripL: React.FC;
+export declare const GripR: React.FC;
+export declare const TriggerL: React.FC;
+export declare const TriggerR: React.FC;
+export declare const ThumbrestL: React.FC;
+export declare const ThumbrestR: React.FC;
+interface GamepadIconProps {
+    buttonName: string;
+    handedness: XRHandedness;
+}
+export declare const GamepadIcon: React.FC<GamepadIconProps>;
+export declare const IWERIcon: React.FC;
+export declare const MouseLeft: React.FC;
+export declare const MouseRight: React.FC;
+export {};
+//# sourceMappingURL=icons.d.ts.map

package/lib/components/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/components/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EA8B3B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EA8B3B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EA8B3B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EA8B3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EA8B/B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EA8B/B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EA6BjC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EA6BnC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EA6BnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EA6BpC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EA6BjC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EA6BnC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EA6BnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EA6BpC,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EA8BzB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EA8BzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EA8B5B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EA8B5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EA+B9B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EA+B9B,CAAC;AAiDF,UAAU,gBAAgB;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,YAAY,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAWlD,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAa5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAiC7B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAiC9B,CAAC"}