@iwer/devui 0.1.0

package/lib/components/keys.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MouseLeft, MouseRight } from './icons.js';
+import { faAngleUp, faArrowRightToBracket, faArrowTurnDown, faCaretDown, faCaretLeft, faCaretRight, faCaretUp, faDeleteLeft, } from '@fortawesome/free-solid-svg-icons';
+import { FAIcon } from './styled.js';
+export const MappedKeyDisplay = {
+    KeyA: 'A',
+    KeyB: 'B',
+    KeyC: 'C',
+    KeyD: 'D',
+    KeyE: 'E',
+    KeyF: 'F',
+    KeyG: 'G',
+    KeyH: 'H',
+    KeyI: 'I',
+    KeyJ: 'J',
+    KeyK: 'K',
+    KeyL: 'L',
+    KeyM: 'M',
+    KeyN: 'N',
+    KeyO: 'O',
+    KeyP: 'P',
+    KeyQ: 'Q',
+    KeyR: 'R',
+    KeyS: 'S',
+    KeyT: 'T',
+    KeyU: 'U',
+    KeyV: 'V',
+    KeyW: 'W',
+    KeyX: 'X',
+    KeyY: 'Y',
+    KeyZ: 'Z',
+    Digit0: '0',
+    Digit1: '1',
+    Digit2: '2',
+    Digit3: '3',
+    Digit4: '4',
+    Digit5: '5',
+    Digit6: '6',
+    Digit7: '7',
+    Digit8: '8',
+    Digit9: '9',
+    Tab: _jsx(FAIcon, { icon: faArrowRightToBracket }),
+    Backspace: _jsx(FAIcon, { icon: faDeleteLeft }),
+    Enter: (_jsx(FAIcon, { style: {
+            transform: 'rotate(90deg)',
+        }, icon: faArrowTurnDown })),
+    ShiftLeft: _jsx(FAIcon, { icon: faAngleUp }),
+    ShiftRight: _jsx(FAIcon, { icon: faAngleUp }),
+    Space: ' ',
+    ArrowUp: _jsx(FAIcon, { icon: faCaretUp }),
+    ArrowDown: _jsx(FAIcon, { icon: faCaretDown }),
+    ArrowLeft: _jsx(FAIcon, { icon: faCaretLeft }),
+    ArrowRight: _jsx(FAIcon, { icon: faCaretRight }),
+    Semicolon: ';',
+    Equal: '=',
+    Comma: ',',
+    Minus: '-',
+    Period: '.',
+    Slash: '/',
+    Backquote: '`',
+    BracketLeft: '[',
+    Backslash: '\\',
+    BracketRight: ']',
+    Quote: "'",
+    MouseLeft: _jsx(MouseLeft, {}),
+    MouseRight: _jsx(MouseRight, {}),
+};
+//# sourceMappingURL=keys.js.map

package/lib/components/keys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keys.js","sourceRoot":"","sources":["../../src/components/keys.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EACN,SAAS,EACT,qBAAqB,EACrB,eAAe,EACf,WAAW,EACX,WAAW,EACX,YAAY,EACZ,SAAS,EACT,YAAY,GACZ,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,CAAC,MAAM,gBAAgB,GAEzB;IACH,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,IAAI,EAAE,GAAG;IACT,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,GAAG;IACX,GAAG,EAAE,KAAC,MAAM,IAAC,IAAI,EAAE,qBAAqB,GAAI;IAC5C,SAAS,EAAE,KAAC,MAAM,IAAC,IAAI,EAAE,YAAY,GAAI;IACzC,KAAK,EAAE,CACN,KAAC,MAAM,IACN,KAAK,EAAE;YACN,SAAS,EAAE,eAAe;SAC1B,EACD,IAAI,EAAE,eAAe,GACpB,CACF;IACD,SAAS,EAAE,KAAC,MAAM,IAAC,IAAI,EAAE,SAAS,GAAI;IACtC,UAAU,EAAE,KAAC,MAAM,IAAC,IAAI,EAAE,SAAS,GAAI;IACvC,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,KAAC,MAAM,IAAC,IAAI,EAAE,SAAS,GAAI;IACpC,SAAS,EAAE,KAAC,MAAM,IAAC,IAAI,EAAE,WAAW,GAAI;IACxC,SAAS,EAAE,KAAC,MAAM,IAAC,IAAI,EAAE,WAAW,GAAI;IACxC,UAAU,EAAE,KAAC,MAAM,IAAC,IAAI,EAAE,YAAY,GAAI;IAC1C,SAAS,EAAE,GAAG;IACd,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;IACV,SAAS,EAAE,GAAG;IACd,WAAW,EAAE,GAAG;IAChB,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,GAAG;IACjB,KAAK,EAAE,GAAG;IACV,SAAS,EAAE,KAAC,SAAS,KAAG;IACxB,UAAU,EAAE,KAAC,UAAU,KAAG;CAC1B,CAAC"}

package/lib/components/mapper.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type KeyMapType = Partial<Record<XRHandedness, {
+    [key: string]: string;
+}>>;
+export declare const DEFAULT_KEYMAP: KeyMapType;
+interface KeyMapMenuProps {
+    keyMap: KeyMapType;
+    setKeyMap: React.Dispatch<React.SetStateAction<KeyMapType>>;
+}
+export declare const KeyMapMenu: React.FC<KeyMapMenuProps>;
+export {};
+//# sourceMappingURL=mapper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mapper.d.ts","sourceRoot":"","sources":["../../src/components/mapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAQnD,MAAM,MAAM,UAAU,GAAG,OAAO,CAC/B,MAAM,CAAC,YAAY,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC,CAC/C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,UAuB5B,CAAC;AAEF,UAAU,eAAe;IACxB,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;CAC5D;AA0BD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqJhD,CAAC"}

package/lib/components/mapper.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ButtonGroup } from './styled.js';
+import { useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { GamepadIcon } from './icons.js';
+import { MappedKeyDisplay } from './keys.js';
+import { faBan } from '@fortawesome/free-solid-svg-icons';
+import styled from 'styled-components';
+export const DEFAULT_KEYMAP = {
+    left: {
+        'thumbstick-up': 'KeyW',
+        'thumbstick-down': 'KeyS',
+        'thumbstick-left': 'KeyA',
+        'thumbstick-right': 'KeyD',
+        thumbstick: 'KeyR',
+        'x-button': 'KeyX',
+        'y-button': 'KeyZ',
+        trigger: 'KeyQ',
+        squeeze: 'KeyE',
+    },
+    right: {
+        'thumbstick-up': 'ArrowUp',
+        'thumbstick-down': 'ArrowDown',
+        'thumbstick-left': 'ArrowLeft',
+        'thumbstick-right': 'ArrowRight',
+        thumbstick: 'Slash',
+        'a-button': 'Enter',
+        'b-button': 'ShiftRight',
+        trigger: 'MouseLeft',
+        squeeze: 'MouseRight',
+    },
+};
+const KeyMapContainer = styled.div `
+	display: flex;
+	justify-content: space-between;
+	pointer-events: all;
+	position: fixed;
+	display: flex;
+	top: 40px;
+	left: calc(50vw - 156px);
+	width: 312px;
+`;
+const Column = styled.div `
+	display: flex;
+	flex-direction: column;
+	width: 50%;
+`;
+const Row = styled.div `
+	display: flex;
+	height: 24px;
+	align-items: center;
+	margin-bottom: 2px;
+`;
+export const KeyMapMenu = ({ keyMap, setKeyMap, }) => {
+    const [currentMapping, setCurrentMapping] = useState(null);
+    const startMapping = (controller, action) => {
+        setCurrentMapping({ controller, action });
+    };
+    const unmapKey = (controller, action) => {
+        setKeyMap((prevKeyMap) => ({
+            ...prevKeyMap,
+            [controller]: {
+                ...prevKeyMap[controller],
+                [action]: 'Unmapped',
+            },
+        }));
+    };
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (currentMapping && MappedKeyDisplay[event.code]) {
+                setKeyMap((prevKeyMap) => ({
+                    ...prevKeyMap,
+                    [currentMapping.controller]: {
+                        ...prevKeyMap[currentMapping.controller],
+                        [currentMapping.action]: event.code,
+                    },
+                }));
+                setCurrentMapping(null);
+            }
+        };
+        const handleMouseDown = (event) => {
+            if (currentMapping) {
+                const mouseButton = event.button === 0
+                    ? 'MouseLeft'
+                    : event.button === 2
+                        ? 'MouseRight'
+                        : null;
+                if (mouseButton && MappedKeyDisplay[mouseButton]) {
+                    setKeyMap((prevKeyMap) => ({
+                        ...prevKeyMap,
+                        [currentMapping.controller]: {
+                            ...prevKeyMap[currentMapping.controller],
+                            [currentMapping.action]: mouseButton,
+                        },
+                    }));
+                    setCurrentMapping(null);
+                }
+            }
+        };
+        const preventDefaultContextMenu = (event) => {
+            event.preventDefault();
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('mousedown', handleMouseDown);
+        window.addEventListener('contextmenu', preventDefaultContextMenu);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('mousedown', handleMouseDown);
+            window.removeEventListener('contextmenu', preventDefaultContextMenu);
+        };
+    }, [currentMapping, setKeyMap]);
+    return (_jsxs(KeyMapContainer, { children: [_jsx(Column, { children: Object.keys(keyMap.left).map((action) => (_jsxs(Row, { children: [_jsx(GamepadIcon, { buttonName: action === 'up' ? 'thumbstick' : action, handedness: "left" }), _jsxs(ButtonGroup, { "$reverse": false, children: [_jsx(Button, { "$reverse": false, style: {
+                                        width: '100px',
+                                        backgroundColor: currentMapping &&
+                                            currentMapping.controller === 'left' &&
+                                            currentMapping.action === action
+                                            ? 'rgba(255, 255, 255, 0.6)'
+                                            : 'rgba(255, 255, 255, 0.3)',
+                                    }, onClick: () => startMapping('left', action), onContextMenu: (e) => e.preventDefault(), children: keyMap.left[action] }), _jsx(Button, { style: { width: '24px' }, "$reverse": false, onClick: () => unmapKey('left', action), onContextMenu: (e) => e.preventDefault(), children: _jsx(FontAwesomeIcon, { icon: faBan }) })] })] }, action))) }), _jsx(Column, { children: Object.keys(keyMap.right).map((action) => (_jsxs(Row, { children: [_jsx(GamepadIcon, { buttonName: action === 'up' ? 'thumbstick' : action, handedness: "right" }), _jsxs(ButtonGroup, { "$reverse": false, children: [_jsx(Button, { "$reverse": false, style: {
+                                        width: '100px',
+                                        backgroundColor: currentMapping &&
+                                            currentMapping.controller === 'right' &&
+                                            currentMapping.action === action
+                                            ? 'rgba(255, 255, 255, 0.6)'
+                                            : 'rgba(255, 255, 255, 0.3)',
+                                    }, onClick: () => startMapping('right', action), onContextMenu: (e) => e.preventDefault(), children: keyMap.right[action] }), _jsx(Button, { "$reverse": false, style: { width: '24px' }, onClick: () => unmapKey('right', action), onContextMenu: (e) => e.preventDefault(), children: _jsx(FontAwesomeIcon, { icon: faBan }) })] })] }, action))) })] }));
+};
+//# sourceMappingURL=mapper.js.map

package/lib/components/mapper.js.map

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

package/lib/components/settings.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+interface SettingsMenuProps {
+    keyMap: {
+        left: {
+            up: string;
+            down: string;
+            left: string;
+            right: string;
+            'x-button': string;
+            'y-button': string;
+            trigger: string;
+            squeeze: string;
+        };
+        right: {
+            up: string;
+            down: string;
+            left: string;
+            right: string;
+            'a-button': string;
+            'b-button': string;
+            trigger: string;
+            squeeze: string;
+        };
+    };
+    setKeyMap: React.Dispatch<React.SetStateAction<{
+        left: {
+            up: string;
+            down: string;
+            left: string;
+            right: string;
+            'x-button': string;
+            'y-button': string;
+            trigger: string;
+            squeeze: string;
+        };
+        right: {
+            up: string;
+            down: string;
+            left: string;
+            right: string;
+            'a-button': string;
+            'b-button': string;
+            trigger: string;
+            squeeze: string;
+        };
+    }>>;
+}
+export declare const SettingsMenu: React.FC<SettingsMenuProps>;
+export {};
+//# sourceMappingURL=settings.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../src/components/settings.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAOnD,UAAU,iBAAiB;IAC1B,MAAM,EAAE;QACP,IAAI,EAAE;YACL,EAAE,EAAE,MAAM,CAAC;YACX,IAAI,EAAE,MAAM,CAAC;YACb,IAAI,EAAE,MAAM,CAAC;YACb,KAAK,EAAE,MAAM,CAAC;YACd,UAAU,EAAE,MAAM,CAAC;YACnB,UAAU,EAAE,MAAM,CAAC;YACnB,OAAO,EAAE,MAAM,CAAC;YAChB,OAAO,EAAE,MAAM,CAAC;SAChB,CAAC;QACF,KAAK,EAAE;YACN,EAAE,EAAE,MAAM,CAAC;YACX,IAAI,EAAE,MAAM,CAAC;YACb,IAAI,EAAE,MAAM,CAAC;YACb,KAAK,EAAE,MAAM,CAAC;YACd,UAAU,EAAE,MAAM,CAAC;YACnB,UAAU,EAAE,MAAM,CAAC;YACnB,OAAO,EAAE,MAAM,CAAC;YAChB,OAAO,EAAE,MAAM,CAAC;SAChB,CAAC;KACF,CAAC;IACF,SAAS,EAAE,KAAK,CAAC,QAAQ,CACxB,KAAK,CAAC,cAAc,CAAC;QACpB,IAAI,EAAE;YACL,EAAE,EAAE,MAAM,CAAC;YACX,IAAI,EAAE,MAAM,CAAC;YACb,IAAI,EAAE,MAAM,CAAC;YACb,KAAK,EAAE,MAAM,CAAC;YACd,UAAU,EAAE,MAAM,CAAC;YACnB,UAAU,EAAE,MAAM,CAAC;YACnB,OAAO,EAAE,MAAM,CAAC;YAChB,OAAO,EAAE,MAAM,CAAC;SAChB,CAAC;QACF,KAAK,EAAE;YACN,EAAE,EAAE,MAAM,CAAC;YACX,IAAI,EAAE,MAAM,CAAC;YACb,IAAI,EAAE,MAAM,CAAC;YACb,KAAK,EAAE,MAAM,CAAC;YACd,UAAU,EAAE,MAAM,CAAC;YACnB,UAAU,EAAE,MAAM,CAAC;YACnB,OAAO,EAAE,MAAM,CAAC;YAChB,OAAO,EAAE,MAAM,CAAC;SAChB,CAAC;KACF,CAAC,CACF,CAAC;CACF;AA0BD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqJpD,CAAC"}

package/lib/components/settings.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ButtonGroup } from './styled.js';
+import { useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { GamepadIcon } from './icons.js';
+import { faBan } from '@fortawesome/free-solid-svg-icons';
+import styled from 'styled-components';
+const SettingsContainer = styled.div `
+	display: flex;
+	justify-content: space-between;
+	pointer-events: all;
+	position: fixed;
+	display: flex;
+	top: 40px;
+	left: calc(50vw - 156px);
+	width: 312px;
+`;
+const Column = styled.div `
+	display: flex;
+	flex-direction: column;
+	width: 50%;
+`;
+const Row = styled.div `
+	display: flex;
+	height: 24px;
+	align-items: center;
+	margin-bottom: 2px;
+`;
+export const SettingsMenu = ({ keyMap, setKeyMap, }) => {
+    const [currentMapping, setCurrentMapping] = useState(null);
+    const startMapping = (controller, action) => {
+        setCurrentMapping({ controller, action });
+    };
+    const unmapKey = (controller, action) => {
+        setKeyMap((prevKeyMap) => ({
+            ...prevKeyMap,
+            [controller]: {
+                ...prevKeyMap[controller],
+                [action]: 'Unmapped',
+            },
+        }));
+    };
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (currentMapping) {
+                setKeyMap((prevKeyMap) => ({
+                    ...prevKeyMap,
+                    [currentMapping.controller]: {
+                        ...prevKeyMap[currentMapping.controller],
+                        [currentMapping.action]: event.code,
+                    },
+                }));
+                setCurrentMapping(null);
+            }
+        };
+        const handleMouseDown = (event) => {
+            if (currentMapping) {
+                const mouseButton = event.button === 0
+                    ? 'MouseLeft'
+                    : event.button === 2
+                        ? 'MouseRight'
+                        : null;
+                if (mouseButton) {
+                    setKeyMap((prevKeyMap) => ({
+                        ...prevKeyMap,
+                        [currentMapping.controller]: {
+                            ...prevKeyMap[currentMapping.controller],
+                            [currentMapping.action]: mouseButton,
+                        },
+                    }));
+                    setCurrentMapping(null);
+                }
+            }
+        };
+        const preventDefaultContextMenu = (event) => {
+            event.preventDefault();
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('mousedown', handleMouseDown);
+        window.addEventListener('contextmenu', preventDefaultContextMenu);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('mousedown', handleMouseDown);
+            window.removeEventListener('contextmenu', preventDefaultContextMenu);
+        };
+    }, [currentMapping, setKeyMap]);
+    return (_jsxs(SettingsContainer, { children: [_jsx(Column, { children: Object.keys(keyMap.left).map((action) => (_jsxs(Row, { children: [_jsx(GamepadIcon, { buttonName: action === 'up' ? 'thumbstick' : action, handedness: "left" }), _jsxs(ButtonGroup, { "$reverse": false, children: [_jsx(Button, { "$reverse": false, style: {
+                                        width: '100px',
+                                        backgroundColor: currentMapping &&
+                                            currentMapping.controller === 'left' &&
+                                            currentMapping.action === action
+                                            ? 'rgba(255, 255, 255, 0.6)'
+                                            : 'rgba(255, 255, 255, 0.3)',
+                                    }, onClick: () => startMapping('left', action), onContextMenu: (e) => e.preventDefault(), children: keyMap.left[action] }), _jsx(Button, { style: { width: '24px' }, "$reverse": false, onClick: () => unmapKey('left', action), onContextMenu: (e) => e.preventDefault(), children: _jsx(FontAwesomeIcon, { icon: faBan }) })] })] }, action))) }), _jsx(Column, { children: Object.keys(keyMap.right).map((action) => (_jsxs(Row, { children: [_jsx(GamepadIcon, { buttonName: action === 'up' ? 'thumbstick' : action, handedness: "right" }), _jsxs(ButtonGroup, { "$reverse": false, children: [_jsx(Button, { "$reverse": false, style: {
+                                        width: '100px',
+                                        backgroundColor: currentMapping &&
+                                            currentMapping.controller === 'right' &&
+                                            currentMapping.action === action
+                                            ? 'rgba(255, 255, 255, 0.6)'
+                                            : 'rgba(255, 255, 255, 0.3)',
+                                    }, onClick: () => startMapping('right', action), onContextMenu: (e) => e.preventDefault(), children: keyMap.right[action] }), _jsx(Button, { "$reverse": false, style: { width: '24px' }, onClick: () => unmapKey('right', action), onContextMenu: (e) => e.preventDefault(), children: _jsx(FontAwesomeIcon, { icon: faBan }) })] })] }, action))) })] }));
+};
+//# sourceMappingURL=settings.js.map

package/lib/components/settings.js.map

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

package/lib/components/styled.d.ts

@@ -0,0 +1,31 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+export declare const Button: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $reverse: boolean;
+}>> & string;
+export declare const MappedKeyBlock: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $pressed: boolean;
+}>> & string;
+export declare const ButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $reverse: boolean;
+}>> & string;
+export declare const ButtonGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $reverse: boolean;
+}>> & string;
+export declare const JoystickButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const JoystickInner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const RangeSelector: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}>, never>, {
+    $reverse: boolean;
+}>> & string;
+export declare const KeyBlockContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $reverse: boolean;
+}>> & string;
+export declare const KeyRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $reverse: boolean;
+}>> & string;
+export declare const ButtonGroupColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FAIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("@fortawesome/react-fontawesome").FontAwesomeIconProps, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, never>> & string & Omit<typeof FontAwesomeIcon, keyof import("react").Component<any, {}, any>>;
+//# sourceMappingURL=styled.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/components/styled.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAGjE,eAAO,MAAM,MAAM;cAA6B,OAAO;YAmCtD,CAAC;AAEF,eAAO,MAAM,cAAc;cAA0B,OAAO;YAc3D,CAAC;AAEF,eAAO,MAAM,eAAe;cAA0B,OAAO;YAO5D,CAAC;AAEF,eAAO,MAAM,WAAW;cAA0B,OAAO;YAMxD,CAAC;AAEF,eAAO,MAAM,cAAc,yOAe1B,CAAC;AAEF,eAAO,MAAM,aAAa,6NAQzB,CAAC;AAEF,eAAO,MAAM,aAAa;;;cACf,OAAO;YAoCjB,CAAC;AAEF,eAAO,MAAM,iBAAiB;cAA0B,OAAO;YAM9D,CAAC;AAEF,eAAO,MAAM,MAAM;cAA0B,OAAO;YAKnD,CAAC;AAEF,eAAO,MAAM,iBAAiB,6NAK7B,CAAC;AAEF,eAAO,MAAM,MAAM;;iGAOlB,CAAC"}

package/lib/components/styled.js

@@ -0,0 +1,153 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import styled from 'styled-components';
+export const Button = styled.button `
+	background-color: rgba(255, 255, 255, 0.3);
+	border: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	color: white;
+	border-radius: 2px;
+	font-size: 14px;
+	height: 24px;
+	min-width: 24px;
+	transition: all 0.2s ease-in-out;
+	margin: 0 1px;
+	text-transform: none;
+	box-shadow: none;
+	font-family: Arial, sans-serif;
+
+	&:hover {
+		background-color: rgba(255, 255, 255, 0.5);
+	}
+
+	&:active {
+		background-color: rgba(255, 255, 255, 0.6);
+	}
+
+	&:first-child {
+		border-radius: ${({ $reverse }) => $reverse ? '2px 8px 8px 2px' : '8px 2px 2px 8px'};
+	}
+
+	&:last-child {
+		border-radius: ${({ $reverse }) => $reverse ? '8px 2px 2px 8px' : '2px 8px 8px 2px'};
+	}
+`;
+export const MappedKeyBlock = styled.div `
+	background-color: ${({ $pressed }) => $pressed ? 'rgba(255, 255, 255, 0.6)' : 'rgba(255, 255, 255, 0.3)'};
+	border: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: white;
+	border-radius: 5px;
+	font-size: 14px;
+	font-family: Arial, sans-serif;
+	height: 20px;
+	width: 20px;
+	transition: all 0.2s ease-in-out;
+`;
+export const ButtonContainer = styled.div `
+	display: flex;
+	align-items: center;
+	height: 24px;
+	margin-bottom: 2px;
+	justify-content: flex-start;
+	flex-direction: ${({ $reverse }) => ($reverse ? 'row-reverse' : 'row')};
+`;
+export const ButtonGroup = styled.div `
+	display: flex;
+	flex-direction: ${({ $reverse }) => ($reverse ? 'row-reverse' : 'row')};
+	height: 100%;
+	justify-content: space-between;
+	align-items: center;
+`;
+export const JoystickButton = styled.button `
+	background-color: rgba(255, 255, 255, 0.3);
+	border: none;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 0;
+	pointer-events: none;
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	position: relative;
+	margin: 0 5px;
+	backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
+`;
+export const JoystickInner = styled.div `
+	position: absolute;
+	background-color: white;
+	border-radius: 50%;
+	width: 36px;
+	height: 36px;
+	cursor: pointer;
+	pointer-events: auto;
+`;
+export const RangeSelector = styled.input.attrs({ type: 'range' }) `
+	-webkit-appearance: none;
+	appearance: none;
+	background-color: rgba(255, 255, 255, 0.3);
+	border: none;
+	height: 100%;
+	width: 49px;
+	cursor: pointer;
+	margin: 0 1px;
+	transition: all 0.2s ease-in-out;
+	border-radius: ${({ $reverse }) => $reverse ? '8px 2px 2px 8px' : '2px 8px 8px 2px'};
+
+	&::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 8px;
+		height: 24px;
+		background-color: white;
+		border-radius: 3px;
+	}
+
+	&::-moz-range-thumb {
+		width: 8px;
+		height: 24px;
+		background-color: white;
+		border-radius: 3px;
+	}
+
+	&::-ms-thumb {
+		width: 8px;
+		height: 24px;
+		background-color: white;
+		border-radius: 3px;
+	}
+`;
+export const KeyBlockContainer = styled.div `
+	display: flex;
+	flex-direction: column;
+	align-items: ${({ $reverse }) => ($reverse ? 'flex-start' : 'flex-end')};
+	justify-content: center;
+	margin: ${({ $reverse }) => ($reverse ? '2px -26px 0 0' : '2px 0 0 -26px')};
+`;
+export const KeyRow = styled.div `
+	display: flex;
+	flex-direction: ${({ $reverse }) => ($reverse ? 'row-reverse' : 'row')};
+	align-items: center;
+	justify-content: center;
+`;
+export const ButtonGroupColumn = styled.div `
+	display: flex;
+	flex-direction: column;
+	height: 50px;
+	justify-content: space-between;
+`;
+export const FAIcon = styled(FontAwesomeIcon) `
+	height: 14px;
+	min-height: 14px;
+	max-height: 14px;
+	width: 14px;
+	min-width: 14px;
+	max-width: 14px;
+`;
+//# sourceMappingURL=styled.js.map

package/lib/components/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../src/components/styled.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA2BvC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB;;;;mBAIhC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB;;CAElD,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAuB;qBAC1C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACpC,QAAQ,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,0BAA0B;;;;;;;;;;;;CAYnE,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAuB;;;;;;mBAM7C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;CACtE,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAuB;;mBAEzC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;;;;CAItE,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;;;;;;CAe1C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQtC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAEhE;;;;;;;;;;kBAUgB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;CAwBjD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAuB;;;gBAGlD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC;;WAE7D,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC;CAC1E,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAuB;;mBAEpC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;;;CAGtE,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK1C,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC,CAAA;;;;;;;CAO5C,CAAC"}

package/lib/index.d.ts

@@ -0,0 +1,12 @@
+import { InputLayer } from './scene.js';
+import { XRDevice } from 'iwer';
+declare const PRIVATE: unique symbol;
+export declare class DevUI {
+    [PRIVATE]: {
+        xrDevice: XRDevice;
+        inputLayer: InputLayer;
+    };
+    constructor(xrDevice: XRDevice);
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAGhC,QAAA,MAAM,OAAO,eAA+B,CAAC;AAE7C,qBAAa,KAAK;IACjB,CAAC,OAAO,CAAC,EAAE;QACV,QAAQ,EAAE,QAAQ,CAAC;QACnB,UAAU,EAAE,UAAU,CAAC;KACvB,CAAC;gBAEU,QAAQ,EAAE,QAAQ;CAgC9B"}