@iwer/devui 0.2.1 → 1.0.1

package/lib/src/components/keys.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+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/src/components/keys.js.map

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

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+export type KeyMapType = Partial<Record<XRHandedness, {
+    [key: string]: string;
+}>>;
+export declare const DEFAULT_KEYMAP: KeyMapType;
+type KeyMapStore = {
+    keyMap: KeyMapType;
+    bindKey: (handedness: 'left' | 'right', action: string, keyCode?: string) => void;
+};
+export declare const useKeyMapStore: import("zustand").UseBoundStore<import("zustand").StoreApi<KeyMapStore>>;
+interface ControllerMapperProps {
+    handedness: 'left' | 'right';
+}
+export declare const ControllerMapper: React.FC<ControllerMapperProps>;
+export {};
+//# sourceMappingURL=mapper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mapper.d.ts","sourceRoot":"","sources":["../../../src/components/mapper.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAA8B,MAAM,OAAO,CAAC;AASnD,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,KAAK,WAAW,GAAG;IAClB,MAAM,EAAE,UAAU,CAAC;IACnB,OAAO,EAAE,CACR,UAAU,EAAE,MAAM,GAAG,OAAO,EAC5B,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,KACZ,IAAI,CAAC;CACV,CAAC;AAEF,eAAO,MAAM,cAAc,0EAgBxB,CAAC;AAcJ,UAAU,qBAAqB;IAC9B,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAkF5D,CAAC"}

package/lib/src/components/mapper.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Button, ButtonGroup, Colors, ControlButtonStyles } 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 { create } from 'zustand';
+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',
+    },
+};
+export const useKeyMapStore = create((set) => ({
+    keyMap: DEFAULT_KEYMAP,
+    bindKey: (handedness, action, keyCode = 'Unmapped') => set((state) => ({
+        keyMap: {
+            ...state.keyMap,
+            [handedness]: {
+                ...state.keyMap[handedness],
+                [action]: keyCode,
+            },
+        },
+    })),
+}));
+const Row = styled.div `
+	display: flex;
+	height: ${ControlButtonStyles.height};
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: ${ControlButtonStyles.gap};
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+`;
+export const ControllerMapper = ({ handedness, }) => {
+    const { keyMap, bindKey } = useKeyMapStore();
+    const [currentMapping, setCurrentMapping] = useState(null);
+    const startMapping = (action) => {
+        setCurrentMapping({ action });
+    };
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (currentMapping && MappedKeyDisplay[event.code]) {
+                bindKey(handedness, 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]) {
+                    bindKey(handedness, 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]);
+    return Object.keys(keyMap[handedness]).map((action) => (_jsxs(Row, { children: [_jsx(GamepadIcon, { buttonName: action === 'up' ? 'thumbstick' : action, handedness: handedness }), _jsxs(ButtonGroup, { "$reverse": false, children: [_jsx(Button, { "$reverse": false, style: {
+                            width: '100px',
+                            background: currentMapping && currentMapping.action === action
+                                ? Colors.gradientLightGreyTranslucent
+                                : Colors.gradientGreyTranslucent,
+                        }, onClick: () => startMapping(action), onContextMenu: (e) => e.preventDefault(), children: keyMap[handedness][action] }), _jsx(Button, { style: { width: ControlButtonStyles.widthShort }, "$reverse": false, onClick: () => bindKey(handedness, action), onContextMenu: (e) => e.preventDefault(), children: _jsx(FontAwesomeIcon, { icon: faBan }) })] })] }, action)));
+};
+//# sourceMappingURL=mapper.js.map

package/lib/src/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/src/components/styled.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+export declare const Colors: {
+    textWhite: string;
+    dangerRed: string;
+    dangerRedPressed: string;
+    panelBackground: string;
+    panelBorder: string;
+    buttonBackground: string;
+    buttonHovered: string;
+    buttonPressed: string;
+    gradientGrey: string;
+    gradientGreyTranslucent: string;
+    gradientLightGreyTranslucent: string;
+};
+export declare const ControlButtonStyles: {
+    height: string;
+    minWidth: string;
+    fontSize: string;
+    radiusMiddle: string;
+    radiusSolo: string;
+    radiusFirst: string;
+    radiusLast: string;
+    widthLong: string;
+    widthShort: string;
+    gap: string;
+};
+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 HeaderButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & 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>>;
+export declare const ControlPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SectionBreak: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, {
+    $horizontal?: boolean;
+}>> & string;
+export declare const PanelHeaderButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $isRed?: boolean;
+}>> & string;
+//# sourceMappingURL=styled.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/components/styled.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAGjE,eAAO,MAAM,MAAM;;;;;;;;;;;;CAclB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;;;;;CAW/B,CAAC;AAEF,eAAO,MAAM,MAAM;cAA6B,OAAO;YA+BtD,CAAC;AAEF,eAAO,MAAM,YAAY,yOAoCxB,CAAC;AAEF,eAAO,MAAM,cAAc;cAA0B,OAAO;YAc3D,CAAC;AAEF,eAAO,MAAM,eAAe;cAA0B,OAAO;YAW5D,CAAC;AAEF,eAAO,MAAM,WAAW;cAA0B,OAAO;YAQxD,CAAC;AAEF,eAAO,MAAM,cAAc,yOAe1B,CAAC;AAEF,eAAO,MAAM,aAAa,6NAQzB,CAAC;AAEF,eAAO,MAAM,aAAa;;;cACf,OAAO;YAsCjB,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;AAEF,eAAO,MAAM,YAAY,6NAaxB,CAAC;AAEF,eAAO,MAAM,YAAY;kBAA6B,OAAO;YAK5D,CAAC;AAGF,eAAO,MAAM,iBAAiB;aAA4B,OAAO;YAwBhE,CAAC"}

package/lib/src/components/styled.js

@@ -0,0 +1,272 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { styled } from 'styled-components';
+export const Colors = {
+    textWhite: 'rgba(223, 223, 223, 1)',
+    dangerRed: 'rgba(243, 151, 143, 1)',
+    dangerRedPressed: 'rgba(240, 97, 84,1)',
+    panelBackground: 'rgba(38, 38, 38, 0.7)',
+    panelBorder: 'rgba(61, 61, 63, 0.7)',
+    buttonBackground: 'rgba(61, 61, 63, 0.6)',
+    buttonHovered: 'rgba(61, 61, 63, 0.8)',
+    buttonPressed: 'rgba(61, 61, 63, 1)',
+    gradientGrey: 'linear-gradient(to bottom, #343434, #393939)',
+    gradientGreyTranslucent: 'linear-gradient(to bottom, rgba(52, 52, 52, 0.75), rgba(57, 57, 57, 0.75))',
+    gradientLightGreyTranslucent: 'linear-gradient(to bottom, rgba(75, 75, 75, 0.75), rgba(80, 80, 80, 0.75))',
+};
+export const ControlButtonStyles = {
+    height: '30px',
+    minWidth: '30px',
+    fontSize: '14px',
+    radiusMiddle: '3px',
+    radiusSolo: '10px',
+    radiusFirst: '10px 3px 3px 10px',
+    radiusLast: '3px 10px 10px 3px',
+    widthLong: '70px',
+    widthShort: '30px',
+    gap: '3px',
+};
+export const Button = styled.button `
+	background: ${Colors.gradientGreyTranslucent};
+	border: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	color: ${Colors.textWhite};
+	border: 1px solid transparent;
+	border-radius: ${ControlButtonStyles.radiusMiddle};
+	font-size: ${ControlButtonStyles.fontSize};
+	height: ${ControlButtonStyles.height};
+	min-width: ${ControlButtonStyles.minWidth};
+	transition: all 0.2s ease-in-out;
+	text-transform: none;
+	box-shadow: none;
+	font-family: Arial, sans-serif;
+
+	&:first-child {
+		border-radius: ${({ $reverse }) => $reverse
+    ? ControlButtonStyles.radiusLast
+    : ControlButtonStyles.radiusFirst};
+	}
+
+	&:last-child {
+		border-radius: ${({ $reverse }) => $reverse
+    ? ControlButtonStyles.radiusFirst
+    : ControlButtonStyles.radiusLast};
+	}
+`;
+export const HeaderButton = styled.button `
+	background-color: transparent;
+	border: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	color: ${Colors.textWhite};
+	border-radius: 4px;
+	font-size: 16px;
+	height: 24px;
+	min-width: 24px;
+	transition: all 0.2s ease-in-out;
+	text-transform: none;
+	box-shadow: none;
+	font-family: Arial, sans-serif;
+
+	&:hover {
+		background-color: ${Colors.buttonPressed};
+	}
+
+	&:active {
+		background-color: ${Colors.buttonPressed};
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:first-child {
+		border-radius: 12px 4px 4px 12px;
+	}
+
+	&:last-child {
+		border-radius: 4px 12px 12px 4px;
+	}
+`;
+export const MappedKeyBlock = styled.div `
+	background-color: ${({ $pressed }) => $pressed ? Colors.buttonPressed : Colors.buttonBackground};
+	border: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: ${Colors.textWhite};
+	border-radius: 8px;
+	font-size: 14px;
+	font-family: Arial, sans-serif;
+	height: 30px;
+	width: 30px;
+	transition: all 0.2s ease-in-out;
+`;
+export const ButtonContainer = styled.div `
+	display: flex;
+	align-items: center;
+	height: 30px;
+	margin-bottom: 3px;
+	justify-content: flex-start;
+	flex-direction: ${({ $reverse }) => ($reverse ? 'row-reverse' : 'row')};
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+`;
+export const ButtonGroup = styled.div `
+	display: flex;
+	flex-direction: ${({ $reverse }) => ($reverse ? 'row-reverse' : 'row')};
+	height: 100%;
+	justify-content: space-between;
+	align-items: center;
+	margin: ${({ $reverse }) => ($reverse ? '0 5px 0 0' : '0 0 0 5px')};
+	gap: 3px;
+`;
+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: ${Colors.textWhite};
+	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: ${Colors.gradientGreyTranslucent};
+	border: none;
+	height: 100%;
+	width: ${ControlButtonStyles.widthLong};
+	cursor: pointer;
+	margin: 0;
+	transition: all 0.2s ease-in-out;
+	border-radius: ${({ $reverse }) => $reverse
+    ? ControlButtonStyles.radiusFirst
+    : ControlButtonStyles.radiusLast};
+
+	&::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 8px;
+		height: 30px;
+		background-color: ${Colors.textWhite};
+		border-radius: ${ControlButtonStyles.radiusMiddle};
+	}
+
+	&::-moz-range-thumb {
+		width: 10px;
+		height: 30px;
+		background-color: ${Colors.textWhite};
+		border-radius: ${ControlButtonStyles.radiusMiddle};
+	}
+
+	&::-ms-thumb {
+		width: 8px;
+		height: 24px;
+		background-color: ${Colors.textWhite};
+		border-radius: ${ControlButtonStyles.radiusMiddle};
+	}
+`;
+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;
+`;
+export const ControlPanel = styled.div `
+	position: fixed;
+	padding: 5px;
+	font-family: Arial, sans-serif;
+	color: ${Colors.textWhite};
+	pointer-events: all;
+	background-color: ${Colors.panelBackground};
+	border: 1px solid ${Colors.panelBorder};
+	backdrop-filter: blur(40px);
+	-webkit-backdrop-filter: blur(40px);
+	border-radius: 12px;
+	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+	overflow: hidden;
+`;
+export const SectionBreak = styled.hr `
+	width: ${({ $horizontal }) => ($horizontal ? '100%' : '1px')};
+	height: ${({ $horizontal }) => ($horizontal ? '1px' : '100%')};
+	background-color: ${Colors.panelBorder};
+	border: none;
+`;
+SectionBreak.defaultProps = { $horizontal: true };
+export const PanelHeaderButton = styled.button `
+	background-color: transparent;
+	border: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	color: ${({ $isRed }) => ($isRed ? Colors.dangerRed : Colors.textWhite)};
+	font-size: 12px;
+	padding: 3px;
+	text-transform: none;
+	box-shadow: none;
+
+	&:hover {
+		color: ${({ $isRed }) => ($isRed ? Colors.dangerRedPressed : '#ffffff')};
+	}
+
+	&:active {
+		color: ${({ $isRed }) => ($isRed ? Colors.dangerRedPressed : '#ffffff')};
+	}
+
+	&:focus {
+		outline: none;
+	}
+`;
+PanelHeaderButton.defaultProps = { $isRed: false };
+//# sourceMappingURL=styled.js.map

package/lib/src/components/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/components/styled.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG;IACrB,SAAS,EAAE,wBAAwB;IACnC,SAAS,EAAE,wBAAwB;IACnC,gBAAgB,EAAE,qBAAqB;IACvC,eAAe,EAAE,uBAAuB;IACxC,WAAW,EAAE,uBAAuB;IACpC,gBAAgB,EAAE,uBAAuB;IACzC,aAAa,EAAE,uBAAuB;IACtC,aAAa,EAAE,qBAAqB;IACpC,YAAY,EAAE,8CAA8C;IAC5D,uBAAuB,EACtB,4EAA4E;IAC7E,4BAA4B,EAC3B,4EAA4E;CAC7E,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;IAClC,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,MAAM;IAChB,QAAQ,EAAE,MAAM;IAChB,YAAY,EAAE,KAAK;IACnB,UAAU,EAAE,MAAM;IAClB,WAAW,EAAE,mBAAmB;IAChC,UAAU,EAAE,mBAAmB;IAC/B,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE,MAAM;IAClB,GAAG,EAAE,KAAK;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAuB;eAC3C,MAAM,CAAC,uBAAuB;;;;;;UAMnC,MAAM,CAAC,SAAS;;kBAER,mBAAmB,CAAC,YAAY;cACpC,mBAAmB,CAAC,QAAQ;WAC/B,mBAAmB,CAAC,MAAM;cACvB,mBAAmB,CAAC,QAAQ;;;;;;;mBAOvB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjC,QAAQ;IACP,CAAC,CAAC,mBAAmB,CAAC,UAAU;IAChC,CAAC,CAAC,mBAAmB,CAAC,WAAW;;;;mBAIlB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjC,QAAQ;IACP,CAAC,CAAC,mBAAmB,CAAC,WAAW;IACjC,CAAC,CAAC,mBAAmB,CAAC,UAAU;;CAEnC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;UAO/B,MAAM,CAAC,SAAS;;;;;;;;;;;sBAWJ,MAAM,CAAC,aAAa;;;;sBAIpB,MAAM,CAAC,aAAa;;;;;;;;;;;;;;CAczC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAuB;qBAC1C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACpC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB;;;;;UAKjD,MAAM,CAAC,SAAS;;;;;;;CAOzB,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;;;;;CAKtE,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;;;;WAI5D,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC;;CAElE,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;;;;;;;CAe1C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;qBAElB,MAAM,CAAC,SAAS;;;;;;CAMpC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAEhE;;;eAGa,MAAM,CAAC,uBAAuB;;;UAGnC,mBAAmB,CAAC,SAAS;;;;kBAIrB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjC,QAAQ;IACP,CAAC,CAAC,mBAAmB,CAAC,WAAW;IACjC,CAAC,CAAC,mBAAmB,CAAC,UAAU;;;;;;;sBAOb,MAAM,CAAC,SAAS;mBACnB,mBAAmB,CAAC,YAAY;;;;;;sBAM7B,MAAM,CAAC,SAAS;mBACnB,mBAAmB,CAAC,YAAY;;;;;;sBAM7B,MAAM,CAAC,SAAS;mBACnB,mBAAmB,CAAC,YAAY;;CAElD,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;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;UAI5B,MAAM,CAAC,SAAS;;qBAEL,MAAM,CAAC,eAAe;qBACtB,MAAM,CAAC,WAAW;;;;;;CAMtC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,EAAE,CAA2B;UACtD,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;WAClD,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;qBACzC,MAAM,CAAC,WAAW;;CAEtC,CAAC;AACF,YAAY,CAAC,YAAY,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;AAElD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAsB;;;;;;;UAO1D,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC;;;;;;;WAO7D,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;;;;WAI9D,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;;;;;;CAMxE,CAAC;AACF,iBAAiB,CAAC,YAAY,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC"}

package/lib/src/components/vec3.d.ts

@@ -0,0 +1,22 @@
+export declare function round(number: number, decimalPlaces: number): number;
+type Vector3Like = {
+    x: number;
+    y: number;
+    z: number;
+};
+interface Vector3InputProps {
+    vector: Vector3Like;
+    label: string;
+    multiplier?: number;
+    precision?: number;
+    onValidInput?: () => void;
+}
+export declare const Vector3Input: ({ vector, label, multiplier, precision, onValidInput, }: Vector3InputProps) => import("react/jsx-runtime").JSX.Element;
+interface Vector3ReadOnlyProps {
+    vector: Vector3Like;
+    label: string;
+    precision?: number;
+}
+export declare const Vector3ReadOnly: ({ label, vector, precision, }: Vector3ReadOnlyProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=vec3.d.ts.map

package/lib/src/components/vec3.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vec3.d.ts","sourceRoot":"","sources":["../../../src/components/vec3.tsx"],"names":[],"mappings":"AAKA,wBAAgB,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,UAG1D;AAID,KAAK,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACV,CAAC;AAEF,UAAU,iBAAiB;IAC1B,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAiDD,eAAO,MAAM,YAAY,4DAMtB,iBAAiB,4CAoGnB,CAAC;AAEF,UAAU,oBAAoB;IAC7B,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,eAAe,kCAIzB,oBAAoB,4CAyBtB,CAAC"}