@iwer/devui 1.0.1 → 1.1.0

package/build/iwer-devui.module.js

@@ -4734,7 +4734,6 @@ const Button = dt.button `
 		border-radius: ${ControlButtonStyles.radiusSolo};
 	}
 `;
-Button.defaultProps = { $reverse: false };
 const HeaderButtonsContainer = dt.div `
 	padding: 2px;
 	display: flex;
@@ -4816,7 +4815,6 @@ const ButtonContainer = dt.div `
 		margin-bottom: 0;
 	}
 `;
-ButtonContainer.defaultProps = { $reverse: false };
 const ButtonGroup = dt.div `
 	display: flex;
 	flex-direction: ${({ $reverse }) => ($reverse ? 'row-reverse' : 'row')};
@@ -4826,7 +4824,6 @@ const ButtonGroup = dt.div `
 	margin: ${({ $reverse }) => ($reverse ? '0 5px 0 0' : '0 0 0 5px')};
 	gap: 3px;
 `;
-ButtonGroup.defaultProps = { $reverse: false };
 dt.button `
 	background-color: rgba(255, 255, 255, 0.3);
 	border: none;
@@ -4889,7 +4886,6 @@ const RangeSelector$1 = dt.input.attrs({ type: 'range' }) `
 		border-radius: ${ControlButtonStyles.radiusMiddle};
 	}
 `;
-RangeSelector$1.defaultProps = { $reverse: false };
 dt.div `
 	display: flex;
 	flex-direction: column;
@@ -4904,14 +4900,24 @@ dt.div `
 	justify-content: center;
 `;
 const FAIcon = dt(FontAwesomeIcon) `
-	height: ${({ $size }) => `${$size}px`};
-	min-height: ${({ $size }) => `${$size}px`};
-	max-height: ${({ $size }) => `${$size}px`};
-	width: ${({ $size }) => `${$size}px`};
-	min-width: ${({ $size }) => `${$size}px`};
-	max-width: ${({ $size }) => `${$size}px`};
+	height: ${({ $size = 14 }) => `${$size}px`};
+	min-height: ${({ $size = 14 }) => `${$size}px`};
+	max-height: ${({ $size = 14 }) => `${$size}px`};
+	width: ${({ $size = 14 }) => `${$size}px`};
+	min-width: ${({ $size = 14 }) => `${$size}px`};
+	max-width: ${({ $size = 14 }) => `${$size}px`};
+	transform: ${({ $reverse }) => ($reverse ? 'scaleX(-1)' : 'unset')};
+`;
+const FAControlIcon = dt(FontAwesomeIcon) `
+	height: 18px;
+	min-height: 18px;
+	max-height: 18px;
+	width: 18px;
+	min-width: 18px;
+	max-width: 18px;
+	margin: 6px;
+	transform: ${({ $reverse }) => ($reverse ? 'scaleX(-1)' : 'unset')};
 `;
-FAIcon.defaultProps = { $size: 14 };
 const ControlPanel = dt.div `
 	position: fixed;
 	padding: 5px;
@@ -4929,13 +4935,12 @@ const ControlPanel = dt.div `
 	flex-direction: column;
 `;
 const SectionBreak = dt.hr `
-	width: ${({ $horizontal }) => ($horizontal ? 'unset' : '1px')};
-	height: ${({ $horizontal }) => ($horizontal ? '1px' : 'unset')};
+	width: ${({ $horizontal = true }) => ($horizontal ? 'unset' : '1px')};
+	height: ${({ $horizontal = true }) => ($horizontal ? '1px' : 'unset')};
 	background-color: ${Colors.panelBorder};
 	margin: 5px 3px;
 	border: none;
 `;
-SectionBreak.defaultProps = { $horizontal: true };
 const PanelHeaderButton = dt.button `
 	background-color: transparent;
 	border: none;
@@ -4961,7 +4966,6 @@ const PanelHeaderButton = dt.button `
 		outline: none;
 	}
 `;
-PanelHeaderButton.defaultProps = { $isRed: false };
 const ValuesContainer = dt.div `
 	display: flex;
 	flex-direction: row;
@@ -4998,6 +5002,137 @@ const InputSuffix = dt.span `
 	font-size: 10px;
 `;
 
+const faRightFromBracket = {
+  prefix: 'fas',
+  iconName: 'right-from-bracket',
+  icon: [512, 512, ["sign-out-alt"], "f2f5", "M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z"]
+};
+const faFingerprint = {
+  prefix: 'fas',
+  iconName: 'fingerprint',
+  icon: [512, 512, [], "f577", "M48 256C48 141.1 141.1 48 256 48c63.1 0 119.6 28.1 157.8 72.5c8.6 10.1 23.8 11.2 33.8 2.6s11.2-23.8 2.6-33.8C403.3 34.6 333.7 0 256 0C114.6 0 0 114.6 0 256l0 40c0 13.3 10.7 24 24 24s24-10.7 24-24l0-40zm458.5-52.9c-2.7-13-15.5-21.3-28.4-18.5s-21.3 15.5-18.5 28.4c2.9 13.9 4.5 28.3 4.5 43.1l0 40c0 13.3 10.7 24 24 24s24-10.7 24-24l0-40c0-18.1-1.9-35.8-5.5-52.9zM256 80c-19 0-37.4 3-54.5 8.6c-15.2 5-18.7 23.7-8.3 35.9c7.1 8.3 18.8 10.8 29.4 7.9c10.6-2.9 21.8-4.4 33.4-4.4c70.7 0 128 57.3 128 128l0 24.9c0 25.2-1.5 50.3-4.4 75.3c-1.7 14.6 9.4 27.8 24.2 27.8c11.8 0 21.9-8.6 23.3-20.3c3.3-27.4 5-55 5-82.7l0-24.9c0-97.2-78.8-176-176-176zM150.7 148.7c-9.1-10.6-25.3-11.4-33.9-.4C93.7 178 80 215.4 80 256l0 24.9c0 24.2-2.6 48.4-7.8 71.9C68.8 368.4 80.1 384 96.1 384c10.5 0 19.9-7 22.2-17.3c6.4-28.1 9.7-56.8 9.7-85.8l0-24.9c0-27.2 8.5-52.4 22.9-73.1c7.2-10.4 8-24.6-.2-34.2zM256 160c-53 0-96 43-96 96l0 24.9c0 35.9-4.6 71.5-13.8 106.1c-3.8 14.3 6.7 29 21.5 29c9.5 0 17.9-6.2 20.4-15.4c10.5-39 15.9-79.2 15.9-119.7l0-24.9c0-28.7 23.3-52 52-52s52 23.3 52 52l0 24.9c0 36.3-3.5 72.4-10.4 107.9c-2.7 13.9 7.7 27.2 21.8 27.2c10.2 0 19-7 21-17c7.7-38.8 11.6-78.3 11.6-118.1l0-24.9c0-53-43-96-96-96zm24 96c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 24.9c0 59.9-11 119.3-32.5 175.2l-5.9 15.3c-4.8 12.4 1.4 26.3 13.8 31s26.3-1.4 31-13.8l5.9-15.3C267.9 411.9 280 346.7 280 280.9l0-24.9z"]
+};
+const faCaretRight = {
+  prefix: 'fas',
+  iconName: 'caret-right',
+  icon: [256, 512, [], "f0da", "M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"]
+};
+const faCaretLeft = {
+  prefix: 'fas',
+  iconName: 'caret-left',
+  icon: [256, 512, [], "f0d9", "M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6l0 256c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-128-128z"]
+};
+const faGamepad = {
+  prefix: 'fas',
+  iconName: 'gamepad',
+  icon: [640, 512, [], "f11b", "M192 64C86 64 0 150 0 256S86 448 192 448l256 0c106 0 192-86 192-192s-86-192-192-192L192 64zM496 168a40 40 0 1 1 0 80 40 40 0 1 1 0-80zM392 304a40 40 0 1 1 80 0 40 40 0 1 1 -80 0zM168 200c0-13.3 10.7-24 24-24s24 10.7 24 24l0 32 32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0 0 32c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-32-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l32 0 0-32z"]
+};
+const faHand = {
+  prefix: 'fas',
+  iconName: 'hand',
+  icon: [512, 512, [129306, 9995, "hand-paper"], "f256", "M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-176c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 272c0 1.5 0 3.1 .1 4.6L67.6 283c-16-15.2-41.3-14.6-56.6 1.4s-14.6 41.3 1.4 56.6L124.8 448c43.1 41.1 100.4 64 160 64l19.2 0c97.2 0 176-78.8 176-176l0-208c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-176c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 176c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208z"]
+};
+const faPlug = {
+  prefix: 'fas',
+  iconName: 'plug',
+  icon: [384, 512, [128268], "f1e6", "M96 0C78.3 0 64 14.3 64 32l0 96 64 0 0-96c0-17.7-14.3-32-32-32zM288 0c-17.7 0-32 14.3-32 32l0 96 64 0 0-96c0-17.7-14.3-32-32-32zM32 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l0 32c0 77.4 55 142 128 156.8l0 67.2c0 17.7 14.3 32 32 32s32-14.3 32-32l0-67.2C297 398 352 333.4 352 256l0-32c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 160z"]
+};
+const faBan = {
+  prefix: 'fas',
+  iconName: 'ban',
+  icon: [512, 512, [128683, "cancel"], "f05e", "M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"]
+};
+const faArrowRightToBracket = {
+  prefix: 'fas',
+  iconName: 'arrow-right-to-bracket',
+  icon: [512, 512, ["sign-in"], "f090", "M352 96l64 0c17.7 0 32 14.3 32 32l0 256c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0c53 0 96-43 96-96l0-256c0-53-43-96-96-96l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm-9.4 182.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L242.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l210.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z"]
+};
+const faCaretUp = {
+  prefix: 'fas',
+  iconName: 'caret-up',
+  icon: [320, 512, [], "f0d8", "M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l256 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"]
+};
+const faRotateLeft = {
+  prefix: 'fas',
+  iconName: 'rotate-left',
+  icon: [512, 512, ["rotate-back", "rotate-backward", "undo-alt"], "f2ea", "M48.5 224L40 224c-13.3 0-24-10.7-24-24L16 72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8L48.5 224z"]
+};
+const faCirclePlay = {
+  prefix: 'fas',
+  iconName: 'circle-play',
+  icon: [512, 512, [61469, "play-circle"], "f144", "M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9l0 176c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z"]
+};
+const faHandScissors = {
+  prefix: 'fas',
+  iconName: 'hand-scissors',
+  icon: [512, 512, [], "f257", "M40 208c-22.1 0-40 17.9-40 40s17.9 40 40 40l180.2 0c-7.6 8.5-12.2 19.7-12.2 32c0 25.3 19.5 46 44.3 47.9c-7.7 8.5-12.3 19.8-12.3 32.1c0 26.5 21.5 48 48 48l32 0 64 0c70.7 0 128-57.3 128-128l0-113.1c0-40.2-16-78.8-44.4-107.3C444.8 76.8 413.9 64 381.7 64L336 64c-21.3 0-39.3 13.9-45.6 33.1l74.5 23.7c8.4 2.7 13.1 11.7 10.4 20.1s-11.7 13.1-20.1 10.4L288 129.9c0 0 0 .1 0 .1L84 65.8C62.9 59.2 40.5 70.9 33.8 92s5.1 43.5 26.2 50.2L269.5 208 40 208z"]
+};
+const faStreetView = {
+  prefix: 'fas',
+  iconName: 'street-view',
+  icon: [512, 512, [], "f21d", "M320 64A64 64 0 1 0 192 64a64 64 0 1 0 128 0zm-96 96c-35.3 0-64 28.7-64 64l0 48c0 17.7 14.3 32 32 32l1.8 0 11.1 99.5c1.8 16.2 15.5 28.5 31.8 28.5l38.7 0c16.3 0 30-12.3 31.8-28.5L318.2 304l1.8 0c17.7 0 32-14.3 32-32l0-48c0-35.3-28.7-64-64-64l-64 0zM132.3 394.2c13-2.4 21.7-14.9 19.3-27.9s-14.9-21.7-27.9-19.3c-32.4 5.9-60.9 14.2-82 24.8c-10.5 5.3-20.3 11.7-27.8 19.6C6.4 399.5 0 410.5 0 424c0 21.4 15.5 36.1 29.1 45c14.7 9.6 34.3 17.3 56.4 23.4C130.2 504.7 190.4 512 256 512s125.8-7.3 170.4-19.6c22.1-6.1 41.8-13.8 56.4-23.4c13.7-8.9 29.1-23.6 29.1-45c0-13.5-6.4-24.5-14-32.6c-7.5-7.9-17.3-14.3-27.8-19.6c-21-10.6-49.5-18.9-82-24.8c-13-2.4-25.5 6.3-27.9 19.3s6.3 25.5 19.3 27.9c30.2 5.5 53.7 12.8 69 20.5c3.2 1.6 5.8 3.1 7.9 4.5c3.6 2.4 3.6 7.2 0 9.6c-8.8 5.7-23.1 11.8-43 17.3C374.3 457 318.5 464 256 464s-118.3-7-157.7-17.9c-19.9-5.5-34.2-11.6-43-17.3c-3.6-2.4-3.6-7.2 0-9.6c2.1-1.4 4.8-2.9 7.9-4.5c15.3-7.7 38.8-14.9 69-20.5z"]
+};
+const faGear = {
+  prefix: 'fas',
+  iconName: 'gear',
+  icon: [512, 512, [9881, "cog"], "f013", "M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"]
+};
+const faCaretDown = {
+  prefix: 'fas',
+  iconName: 'caret-down',
+  icon: [320, 512, [], "f0d7", "M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"]
+};
+const faDeleteLeft = {
+  prefix: 'fas',
+  iconName: 'delete-left',
+  icon: [576, 512, [9003, "backspace"], "f55a", "M576 128c0-35.3-28.7-64-64-64L205.3 64c-17 0-33.3 6.7-45.3 18.7L9.4 233.4c-6 6-9.4 14.1-9.4 22.6s3.4 16.6 9.4 22.6L160 429.3c12 12 28.3 18.7 45.3 18.7L512 448c35.3 0 64-28.7 64-64l0-256zM271 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"]
+};
+const faBug = {
+  prefix: 'fas',
+  iconName: 'bug',
+  icon: [512, 512, [], "f188", "M256 0c53 0 96 43 96 96l0 3.6c0 15.7-12.7 28.4-28.4 28.4l-135.1 0c-15.7 0-28.4-12.7-28.4-28.4l0-3.6c0-53 43-96 96-96zM41.4 105.4c12.5-12.5 32.8-12.5 45.3 0l64 64c.7 .7 1.3 1.4 1.9 2.1c14.2-7.3 30.4-11.4 47.5-11.4l112 0c17.1 0 33.2 4.1 47.5 11.4c.6-.7 1.2-1.4 1.9-2.1l64-64c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-64 64c-.7 .7-1.4 1.3-2.1 1.9c6.2 12 10.1 25.3 11.1 39.5l64.3 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c0 24.6-5.5 47.8-15.4 68.6c2.2 1.3 4.2 2.9 6 4.8l64 64c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-63.1-63.1c-24.5 21.8-55.8 36.2-90.3 39.6L272 240c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 239.2c-34.5-3.4-65.8-17.8-90.3-39.6L86.6 502.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l64-64c1.9-1.9 3.9-3.4 6-4.8C101.5 367.8 96 344.6 96 320l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64.3 0c1.1-14.1 5-27.5 11.1-39.5c-.7-.6-1.4-1.2-2.1-1.9l-64-64c-12.5-12.5-12.5-32.8 0-45.3z"]
+};
+const faAngleUp = {
+  prefix: 'fas',
+  iconName: 'angle-up',
+  icon: [448, 512, [8963], "f106", "M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"]
+};
+const faChevronLeft = {
+  prefix: 'fas',
+  iconName: 'chevron-left',
+  icon: [320, 512, [9001], "f053", "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"]
+};
+const faHandLizard = {
+  prefix: 'fas',
+  iconName: 'hand-lizard',
+  icon: [512, 512, [], "f258", "M0 112C0 85.5 21.5 64 48 64l112 0 80 0 46.5 0c36.8 0 71.2 18 92.1 48.2l113.5 164c13 18.7 19.9 41 19.9 63.8l0 12 0 16 0 48c0 17.7-14.3 32-32 32l-96 0c-17.7 0-32-14.3-32-32l0-13.8L273.9 352 240 352l-80 0-48 0c-26.5 0-48-21.5-48-48s21.5-48 48-48l48 0 80 0c26.5 0 48-21.5 48-48s-21.5-48-48-48l-80 0L48 160c-26.5 0-48-21.5-48-48z"]
+};
+const faChevronRight = {
+  prefix: 'fas',
+  iconName: 'chevron-right',
+  icon: [320, 512, [9002], "f054", "M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"]
+};
+const faVrCardboard = {
+  prefix: 'fas',
+  iconName: 'vr-cardboard',
+  icon: [640, 512, [], "f729", "M576 64L64 64C28.7 64 0 92.7 0 128L0 384c0 35.3 28.7 64 64 64l120.4 0c24.2 0 46.4-13.7 57.2-35.4l32-64c8.8-17.5 26.7-28.6 46.3-28.6s37.5 11.1 46.3 28.6l32 64c10.8 21.7 33 35.4 57.2 35.4L576 448c35.3 0 64-28.7 64-64l0-256c0-35.3-28.7-64-64-64zM96 240a64 64 0 1 1 128 0A64 64 0 1 1 96 240zm384-64a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"]
+};
+const faArrowTurnDown = {
+  prefix: 'fas',
+  iconName: 'arrow-turn-down',
+  icon: [384, 512, ["level-down"], "f149", "M32 64C14.3 64 0 49.7 0 32S14.3 0 32 0l96 0c53 0 96 43 96 96l0 306.7 73.4-73.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-128 128c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 402.7 160 96c0-17.7-14.3-32-32-32L32 64z"]
+};
+const faCircleXmark = {
+  prefix: 'fas',
+  iconName: 'circle-xmark',
+  icon: [512, 512, [61532, "times-circle", "xmark-circle"], "f057", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"]
+};
+const faVideo = {
+  prefix: 'fas',
+  iconName: 'video',
+  icon: [576, 512, ["video-camera"], "f03d", "M0 128C0 92.7 28.7 64 64 64l256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2l0 256c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1l0-17.1 0-128 0-17.1 14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z"]
+};
+
 const IconSize = ControlButtonStyles.height;
 const ButtonX = ({ scale = 1.2 }) => (jsxRuntimeExports.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: IconSize, height: IconSize, fill: "none", transform: `scale(${scale}, ${scale})`, children: [jsxRuntimeExports.jsx("path", { fill: "#fff", fillRule: "evenodd", d: "M7 13.125a7 7 0 1 0 14 0v1.75a7 7 0 0 1-14 0v-1.75Z", clipRule: "evenodd", style: {
                 fill: '#fff',
@@ -5199,6 +5334,10 @@ const ThumbrestR = ({ scale = 1.2 }) => (jsxRuntimeExports.jsxs("svg", { xmlns:
                 fill: '#fff',
                 fillOpacity: 1,
             } })] }));
+const PoseL = () => (jsxRuntimeExports.jsx(FAControlIcon, { icon: faHandScissors, "$reverse": true }));
+const PoseR = () => (jsxRuntimeExports.jsx(FAControlIcon, { icon: faHandScissors, "$reverse": false }));
+const PinchL = () => (jsxRuntimeExports.jsx(FAControlIcon, { icon: faHandLizard, "$reverse": true }));
+const PinchR = () => (jsxRuntimeExports.jsx(FAControlIcon, { icon: faHandLizard, "$reverse": false }));
 // Create a mapping of buttonId to icon component
 const buttonIdToIcon = {
     'x-button-left': ButtonX,
@@ -5210,6 +5349,8 @@ const buttonIdToIcon = {
     'thumbstick-down-left': ThumbstickLDown,
     'thumbstick-right-left': ThumbstickLRight,
     'thumbstick-left-left': ThumbstickLLeft,
+    'pose-left': PoseL,
+    'pinch-left': PinchL,
     'thumbstick-right': ThumbstickR,
     'thumbstick-up-right': ThumbstickRUp,
     'thumbstick-down-right': ThumbstickRDown,
@@ -5221,6 +5362,8 @@ const buttonIdToIcon = {
     'squeeze-right': GripR,
     'thumbrest-left': ThumbrestL,
     'thumbrest-right': ThumbrestR,
+    'pose-right': PoseR,
+    'pinch-right': PinchR,
 };
 const GamepadIcon = ({ buttonName, handedness, }) => {
     const buttonId = `${buttonName}-${handedness}`;
@@ -5270,112 +5413,6 @@ const IWERIcon = ({ size = 14, color = Colors.textWhite, }) => (jsxRuntimeExport
                 fillOpacity: 1,
             } })] }));
 
-const faRightFromBracket = {
-  prefix: 'fas',
-  iconName: 'right-from-bracket',
-  icon: [512, 512, ["sign-out-alt"], "f2f5", "M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z"]
-};
-const faFingerprint = {
-  prefix: 'fas',
-  iconName: 'fingerprint',
-  icon: [512, 512, [], "f577", "M48 256C48 141.1 141.1 48 256 48c63.1 0 119.6 28.1 157.8 72.5c8.6 10.1 23.8 11.2 33.8 2.6s11.2-23.8 2.6-33.8C403.3 34.6 333.7 0 256 0C114.6 0 0 114.6 0 256l0 40c0 13.3 10.7 24 24 24s24-10.7 24-24l0-40zm458.5-52.9c-2.7-13-15.5-21.3-28.4-18.5s-21.3 15.5-18.5 28.4c2.9 13.9 4.5 28.3 4.5 43.1l0 40c0 13.3 10.7 24 24 24s24-10.7 24-24l0-40c0-18.1-1.9-35.8-5.5-52.9zM256 80c-19 0-37.4 3-54.5 8.6c-15.2 5-18.7 23.7-8.3 35.9c7.1 8.3 18.8 10.8 29.4 7.9c10.6-2.9 21.8-4.4 33.4-4.4c70.7 0 128 57.3 128 128l0 24.9c0 25.2-1.5 50.3-4.4 75.3c-1.7 14.6 9.4 27.8 24.2 27.8c11.8 0 21.9-8.6 23.3-20.3c3.3-27.4 5-55 5-82.7l0-24.9c0-97.2-78.8-176-176-176zM150.7 148.7c-9.1-10.6-25.3-11.4-33.9-.4C93.7 178 80 215.4 80 256l0 24.9c0 24.2-2.6 48.4-7.8 71.9C68.8 368.4 80.1 384 96.1 384c10.5 0 19.9-7 22.2-17.3c6.4-28.1 9.7-56.8 9.7-85.8l0-24.9c0-27.2 8.5-52.4 22.9-73.1c7.2-10.4 8-24.6-.2-34.2zM256 160c-53 0-96 43-96 96l0 24.9c0 35.9-4.6 71.5-13.8 106.1c-3.8 14.3 6.7 29 21.5 29c9.5 0 17.9-6.2 20.4-15.4c10.5-39 15.9-79.2 15.9-119.7l0-24.9c0-28.7 23.3-52 52-52s52 23.3 52 52l0 24.9c0 36.3-3.5 72.4-10.4 107.9c-2.7 13.9 7.7 27.2 21.8 27.2c10.2 0 19-7 21-17c7.7-38.8 11.6-78.3 11.6-118.1l0-24.9c0-53-43-96-96-96zm24 96c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 24.9c0 59.9-11 119.3-32.5 175.2l-5.9 15.3c-4.8 12.4 1.4 26.3 13.8 31s26.3-1.4 31-13.8l5.9-15.3C267.9 411.9 280 346.7 280 280.9l0-24.9z"]
-};
-const faCaretRight = {
-  prefix: 'fas',
-  iconName: 'caret-right',
-  icon: [256, 512, [], "f0da", "M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"]
-};
-const faCaretLeft = {
-  prefix: 'fas',
-  iconName: 'caret-left',
-  icon: [256, 512, [], "f0d9", "M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6l0 256c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-128-128z"]
-};
-const faGamepad = {
-  prefix: 'fas',
-  iconName: 'gamepad',
-  icon: [640, 512, [], "f11b", "M192 64C86 64 0 150 0 256S86 448 192 448l256 0c106 0 192-86 192-192s-86-192-192-192L192 64zM496 168a40 40 0 1 1 0 80 40 40 0 1 1 0-80zM392 304a40 40 0 1 1 80 0 40 40 0 1 1 -80 0zM168 200c0-13.3 10.7-24 24-24s24 10.7 24 24l0 32 32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0 0 32c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-32-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l32 0 0-32z"]
-};
-const faPlug = {
-  prefix: 'fas',
-  iconName: 'plug',
-  icon: [384, 512, [128268], "f1e6", "M96 0C78.3 0 64 14.3 64 32l0 96 64 0 0-96c0-17.7-14.3-32-32-32zM288 0c-17.7 0-32 14.3-32 32l0 96 64 0 0-96c0-17.7-14.3-32-32-32zM32 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l0 32c0 77.4 55 142 128 156.8l0 67.2c0 17.7 14.3 32 32 32s32-14.3 32-32l0-67.2C297 398 352 333.4 352 256l0-32c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 160z"]
-};
-const faBan = {
-  prefix: 'fas',
-  iconName: 'ban',
-  icon: [512, 512, [128683, "cancel"], "f05e", "M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"]
-};
-const faArrowRightToBracket = {
-  prefix: 'fas',
-  iconName: 'arrow-right-to-bracket',
-  icon: [512, 512, ["sign-in"], "f090", "M352 96l64 0c17.7 0 32 14.3 32 32l0 256c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0c53 0 96-43 96-96l0-256c0-53-43-96-96-96l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm-9.4 182.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L242.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l210.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z"]
-};
-const faCaretUp = {
-  prefix: 'fas',
-  iconName: 'caret-up',
-  icon: [320, 512, [], "f0d8", "M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l256 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"]
-};
-const faRotateLeft = {
-  prefix: 'fas',
-  iconName: 'rotate-left',
-  icon: [512, 512, ["rotate-back", "rotate-backward", "undo-alt"], "f2ea", "M48.5 224L40 224c-13.3 0-24-10.7-24-24L16 72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8L48.5 224z"]
-};
-const faCirclePlay = {
-  prefix: 'fas',
-  iconName: 'circle-play',
-  icon: [512, 512, [61469, "play-circle"], "f144", "M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9l0 176c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z"]
-};
-const faStreetView = {
-  prefix: 'fas',
-  iconName: 'street-view',
-  icon: [512, 512, [], "f21d", "M320 64A64 64 0 1 0 192 64a64 64 0 1 0 128 0zm-96 96c-35.3 0-64 28.7-64 64l0 48c0 17.7 14.3 32 32 32l1.8 0 11.1 99.5c1.8 16.2 15.5 28.5 31.8 28.5l38.7 0c16.3 0 30-12.3 31.8-28.5L318.2 304l1.8 0c17.7 0 32-14.3 32-32l0-48c0-35.3-28.7-64-64-64l-64 0zM132.3 394.2c13-2.4 21.7-14.9 19.3-27.9s-14.9-21.7-27.9-19.3c-32.4 5.9-60.9 14.2-82 24.8c-10.5 5.3-20.3 11.7-27.8 19.6C6.4 399.5 0 410.5 0 424c0 21.4 15.5 36.1 29.1 45c14.7 9.6 34.3 17.3 56.4 23.4C130.2 504.7 190.4 512 256 512s125.8-7.3 170.4-19.6c22.1-6.1 41.8-13.8 56.4-23.4c13.7-8.9 29.1-23.6 29.1-45c0-13.5-6.4-24.5-14-32.6c-7.5-7.9-17.3-14.3-27.8-19.6c-21-10.6-49.5-18.9-82-24.8c-13-2.4-25.5 6.3-27.9 19.3s6.3 25.5 19.3 27.9c30.2 5.5 53.7 12.8 69 20.5c3.2 1.6 5.8 3.1 7.9 4.5c3.6 2.4 3.6 7.2 0 9.6c-8.8 5.7-23.1 11.8-43 17.3C374.3 457 318.5 464 256 464s-118.3-7-157.7-17.9c-19.9-5.5-34.2-11.6-43-17.3c-3.6-2.4-3.6-7.2 0-9.6c2.1-1.4 4.8-2.9 7.9-4.5c15.3-7.7 38.8-14.9 69-20.5z"]
-};
-const faGear = {
-  prefix: 'fas',
-  iconName: 'gear',
-  icon: [512, 512, [9881, "cog"], "f013", "M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"]
-};
-const faCaretDown = {
-  prefix: 'fas',
-  iconName: 'caret-down',
-  icon: [320, 512, [], "f0d7", "M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"]
-};
-const faDeleteLeft = {
-  prefix: 'fas',
-  iconName: 'delete-left',
-  icon: [576, 512, [9003, "backspace"], "f55a", "M576 128c0-35.3-28.7-64-64-64L205.3 64c-17 0-33.3 6.7-45.3 18.7L9.4 233.4c-6 6-9.4 14.1-9.4 22.6s3.4 16.6 9.4 22.6L160 429.3c12 12 28.3 18.7 45.3 18.7L512 448c35.3 0 64-28.7 64-64l0-256zM271 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"]
-};
-const faBug = {
-  prefix: 'fas',
-  iconName: 'bug',
-  icon: [512, 512, [], "f188", "M256 0c53 0 96 43 96 96l0 3.6c0 15.7-12.7 28.4-28.4 28.4l-135.1 0c-15.7 0-28.4-12.7-28.4-28.4l0-3.6c0-53 43-96 96-96zM41.4 105.4c12.5-12.5 32.8-12.5 45.3 0l64 64c.7 .7 1.3 1.4 1.9 2.1c14.2-7.3 30.4-11.4 47.5-11.4l112 0c17.1 0 33.2 4.1 47.5 11.4c.6-.7 1.2-1.4 1.9-2.1l64-64c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-64 64c-.7 .7-1.4 1.3-2.1 1.9c6.2 12 10.1 25.3 11.1 39.5l64.3 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c0 24.6-5.5 47.8-15.4 68.6c2.2 1.3 4.2 2.9 6 4.8l64 64c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-63.1-63.1c-24.5 21.8-55.8 36.2-90.3 39.6L272 240c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 239.2c-34.5-3.4-65.8-17.8-90.3-39.6L86.6 502.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l64-64c1.9-1.9 3.9-3.4 6-4.8C101.5 367.8 96 344.6 96 320l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64.3 0c1.1-14.1 5-27.5 11.1-39.5c-.7-.6-1.4-1.2-2.1-1.9l-64-64c-12.5-12.5-12.5-32.8 0-45.3z"]
-};
-const faAngleUp = {
-  prefix: 'fas',
-  iconName: 'angle-up',
-  icon: [448, 512, [8963], "f106", "M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"]
-};
-const faVrCardboard = {
-  prefix: 'fas',
-  iconName: 'vr-cardboard',
-  icon: [640, 512, [], "f729", "M576 64L64 64C28.7 64 0 92.7 0 128L0 384c0 35.3 28.7 64 64 64l120.4 0c24.2 0 46.4-13.7 57.2-35.4l32-64c8.8-17.5 26.7-28.6 46.3-28.6s37.5 11.1 46.3 28.6l32 64c10.8 21.7 33 35.4 57.2 35.4L576 448c35.3 0 64-28.7 64-64l0-256c0-35.3-28.7-64-64-64zM96 240a64 64 0 1 1 128 0A64 64 0 1 1 96 240zm384-64a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"]
-};
-const faArrowTurnDown = {
-  prefix: 'fas',
-  iconName: 'arrow-turn-down',
-  icon: [384, 512, ["level-down"], "f149", "M32 64C14.3 64 0 49.7 0 32S14.3 0 32 0l96 0c53 0 96 43 96 96l0 306.7 73.4-73.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-128 128c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 402.7 160 96c0-17.7-14.3-32-32-32L32 64z"]
-};
-const faCircleXmark = {
-  prefix: 'fas',
-  iconName: 'circle-xmark',
-  icon: [512, 512, [61532, "times-circle", "xmark-circle"], "f057", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"]
-};
-const faVideo = {
-  prefix: 'fas',
-  iconName: 'video',
-  icon: [576, 512, ["video-camera"], "f03d", "M0 128C0 92.7 28.7 64 64 64l256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2l0 256c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1l0-17.1 0-128 0-17.1 14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z"]
-};
-
 const MappedKeyDisplay = {
     KeyA: 'A',
     KeyB: 'B',
@@ -5716,6 +5753,8 @@ const DEFAULT_KEYMAP = {
         'y-button': 'KeyZ',
         trigger: 'KeyQ',
         squeeze: 'KeyE',
+        pinch: 'MouseLeft',
+        pose: 'KeyF',
     },
     right: {
         'thumbstick-up': 'ArrowUp',
@@ -5727,6 +5766,8 @@ const DEFAULT_KEYMAP = {
         'b-button': 'ShiftRight',
         trigger: 'MouseLeft',
         squeeze: 'MouseRight',
+        pinch: 'MouseRight',
+        pose: 'Backslash',
     },
 };
 const useKeyMapStore = create((set) => ({
@@ -5752,7 +5793,7 @@ const Row = dt.div `
 		margin-bottom: 0;
 	}
 `;
-const ControllerMapper = ({ handedness, }) => {
+const ControlsMapper = ({ handedness, actions, }) => {
     const { keyMap, bindKey } = useKeyMapStore();
     const [currentMapping, setCurrentMapping] = reactExports.useState(null);
     const startMapping = (action) => {
@@ -5790,7 +5831,9 @@ const ControllerMapper = ({ handedness, }) => {
             window.removeEventListener('contextmenu', preventDefaultContextMenu);
         };
     }, [currentMapping]);
-    return Object.keys(keyMap[handedness]).map((action) => (jsxRuntimeExports.jsxs(Row, { children: [jsxRuntimeExports.jsx(GamepadIcon, { buttonName: action === 'up' ? 'thumbstick' : action, handedness: handedness }), jsxRuntimeExports.jsxs(ButtonGroup, { "$reverse": false, children: [jsxRuntimeExports.jsx(Button, { "$reverse": false, style: {
+    return Object.keys(keyMap[handedness])
+        .filter((action) => actions.includes(action))
+        .map((action) => (jsxRuntimeExports.jsxs(Row, { children: [jsxRuntimeExports.jsx(GamepadIcon, { buttonName: action === 'up' ? 'thumbstick' : action, handedness: handedness }), jsxRuntimeExports.jsxs(ButtonGroup, { "$reverse": false, children: [jsxRuntimeExports.jsx(Button, { "$reverse": false, style: {
                             width: '100px',
                             background: currentMapping && currentMapping.action === action
                                 ? Colors.gradientLightGreyTranslucent
@@ -6293,13 +6336,25 @@ function transformGamepadConfig(gamepadConfig) {
     });
     return transformed;
 }
-const ControlsUI = ({ xrDevice, inputLayer, pointerLocked, }) => {
-    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: Object.entries(xrDevice.controllers).map(([handedness, controller]) => (jsxRuntimeExports.jsx(ControllerUI, { controller: controller, handle: inputLayer.transformHandles.get(handedness), handedness: handedness, pointerLocked: pointerLocked }, `controller-${handedness}`))) }));
-};
 const ControllerUI = ({ controller, handle, handedness, pointerLocked, }) => {
     const { keyMap } = useKeyMapStore();
     const [connected, setConnected] = React.useState(controller.connected);
     const [settingsOpen, setSettingsOpen] = React.useState(false);
+    const transformedConfig = transformGamepadConfig(controller.gamepadConfig);
+    const actions = transformedConfig.flatMap((config) => {
+        if (config.hasAxes) {
+            return [
+                `${config.id}-left`,
+                `${config.id}-right`,
+                `${config.id}-up`,
+                `${config.id}-down`,
+                config.id,
+            ];
+        }
+        else {
+            return config.id;
+        }
+    });
     React.useEffect(() => {
         if (pointerLocked) {
             setSettingsOpen(false);
@@ -6330,7 +6385,7 @@ const ControllerUI = ({ controller, handle, handedness, pointerLocked, }) => {
                                     controller.connected = true;
                                     setConnected(true);
                                 }, style: { marginLeft: '5px' }, children: jsxRuntimeExports.jsx(FAIcon, { icon: faPlug }) })) })] }) })), connected && !pointerLocked && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [!settingsOpen && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionBreak, {}), jsxRuntimeExports.jsx(Vector3Input, { vector: handle.position, label: "Position", marginBottom: ControlButtonStyles.gap }), jsxRuntimeExports.jsx(Vector3Input, { vector: handle.rotation, label: "Rotation" })] })), jsxRuntimeExports.jsx(SectionBreak, {})] })), connected &&
-                (settingsOpen ? (jsxRuntimeExports.jsx(ControllerMapper, { handedness: handedness })) : (transformGamepadConfig(controller.gamepadConfig).map((buttonConfig) => {
+                (settingsOpen ? (jsxRuntimeExports.jsx(ControlsMapper, { handedness: handedness, actions: actions })) : (transformedConfig.map((buttonConfig) => {
                     const mapping = keyMap[handedness];
                     if (buttonConfig.hasAxes) {
                         return (jsxRuntimeExports.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));
@@ -6344,6 +6399,190 @@ const ControllerUI = ({ controller, handle, handedness, pointerLocked, }) => {
                 })))] }, handedness));
 };
 
+const pinchSliderWidth = `calc(${ControlButtonStyles.widthLong} + ${ControlButtonStyles.widthShort} + ${ControlButtonStyles.gap})`;
+const PinchControl = ({ hand, pointerLocked, mappedKey, }) => {
+    const [isPressed, setIsPressed] = reactExports.useState(false);
+    const [isKeyPressed, setIsKeyPressed] = reactExports.useState(false);
+    const [analogValue, setAnalogValue] = reactExports.useState(0);
+    const handedness = hand.inputSource.handedness;
+    reactExports.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.code === mappedKey) {
+                hand.updatePinchValue(1);
+                setIsKeyPressed(true);
+            }
+        };
+        const handleKeyUp = (event) => {
+            if (event.code === mappedKey) {
+                hand.updatePinchValue(0);
+                setIsKeyPressed(false);
+            }
+        };
+        const handleMouseDown = (event) => {
+            if ((mappedKey === 'MouseLeft' && event.button === 0) ||
+                (mappedKey === 'MouseRight' && event.button === 2)) {
+                hand.updatePinchValue(1);
+                setIsKeyPressed(true);
+            }
+        };
+        const handleMouseUp = (event) => {
+            if ((mappedKey === 'MouseLeft' && event.button === 0) ||
+                (mappedKey === 'MouseRight' && event.button === 2)) {
+                hand.updatePinchValue(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, hand]);
+    return (jsxRuntimeExports.jsxs(ButtonContainer, { "$reverse": handedness === 'right', children: [jsxRuntimeExports.jsx(FAControlIcon, { icon: faHandLizard, "$reverse": handedness === 'left' }), jsxRuntimeExports.jsx(ButtonGroup, { "$reverse": handedness === 'right', children: pointerLocked ? (jsxRuntimeExports.jsx(MappedKeyBlock, { "$pressed": isKeyPressed, children: MappedKeyDisplay[mappedKey] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Button, { "$reverse": handedness === 'right', style: {
+                                background: isPressed
+                                    ? Colors.gradientLightGreyTranslucent
+                                    : Colors.gradientGreyTranslucent,
+                                width: ControlButtonStyles.widthLong,
+                            }, onClick: () => {
+                                setIsPressed(true);
+                                hand.updatePinchValue(1);
+                                setTimeout(() => {
+                                    setIsPressed(false);
+                                    hand.updatePinchValue(0);
+                                }, 250);
+                            }, children: "Pinch" }), jsxRuntimeExports.jsx(RangeSelector$1, { "$reverse": handedness === 'right', value: analogValue, onChange: (e) => {
+                                const value = Number(e.target.value);
+                                setAnalogValue(value);
+                                hand.updatePinchValue(value / 100);
+                            }, style: { width: pinchSliderWidth }, min: "0", max: "100" })] })) })] }));
+};
+
+const poses = ['default', 'point'];
+const poseButtonWidth = `calc(2 * ${ControlButtonStyles.widthLong} - ${ControlButtonStyles.widthShort})`;
+const PoseSelector = ({ hand, pointerLocked, mappedKey, }) => {
+    const [poseId, setPoseId] = reactExports.useState(hand.poseId);
+    const [isKeyPressed, setIsKeyPressed] = reactExports.useState(false);
+    const handedness = hand.inputSource.handedness;
+    const cyclePose = (delta) => {
+        const poseIdx = poses.indexOf(hand.poseId);
+        const newPoseIdx = (poseIdx + poses.length + delta) % poses.length;
+        setPoseId(poses[newPoseIdx]);
+        hand.poseId = poses[newPoseIdx];
+    };
+    const layoutReverse = handedness === 'right';
+    reactExports.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.code === mappedKey) {
+                cyclePose(1);
+                setIsKeyPressed(true);
+            }
+        };
+        const handleKeyUp = (event) => {
+            if (event.code === mappedKey) {
+                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, hand]);
+    return (jsxRuntimeExports.jsxs(ButtonContainer, { "$reverse": layoutReverse, children: [jsxRuntimeExports.jsx(FAControlIcon, { icon: faHandScissors, "$reverse": handedness === 'left' }), jsxRuntimeExports.jsx(ButtonGroup, { "$reverse": layoutReverse, children: pointerLocked ? (jsxRuntimeExports.jsx(MappedKeyBlock, { "$pressed": isKeyPressed, children: MappedKeyDisplay[mappedKey] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Button, { "$reverse": layoutReverse, style: {
+                                width: ControlButtonStyles.widthShort,
+                            }, onClick: () => {
+                                cyclePose(layoutReverse ? 1 : -1);
+                            }, children: jsxRuntimeExports.jsx(FAIcon, { icon: layoutReverse ? faChevronRight : faChevronLeft }) }), jsxRuntimeExports.jsxs(Button, { "$reverse": layoutReverse, style: {
+                                width: poseButtonWidth,
+                            }, disabled: true, children: ["Pose: ", poseId] }), jsxRuntimeExports.jsx(Button, { "$reverse": layoutReverse, style: {
+                                width: ControlButtonStyles.widthShort,
+                            }, onClick: () => {
+                                cyclePose(layoutReverse ? -1 : 1);
+                            }, children: jsxRuntimeExports.jsx(FAIcon, { icon: layoutReverse ? faChevronLeft : faChevronRight }) })] })) })] }));
+};
+
+const HandUI = ({ hand, handle, handedness, pointerLocked, }) => {
+    const { keyMap } = useKeyMapStore();
+    const [connected, setConnected] = React.useState(hand.connected);
+    const [settingsOpen, setSettingsOpen] = React.useState(false);
+    React.useEffect(() => {
+        if (pointerLocked) {
+            setSettingsOpen(false);
+        }
+    }, [pointerLocked]);
+    return (jsxRuntimeExports.jsxs(ControlPanel, { style: handedness === 'left'
+            ? { left: '8px', bottom: '8px' }
+            : { right: '8px', bottom: '8px' }, children: [!pointerLocked && (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                    }, children: [jsxRuntimeExports.jsxs("div", { style: {
+                                fontSize: '13px',
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                            }, children: [jsxRuntimeExports.jsx(FAIcon, { icon: faHand, "$reverse": handedness === 'left', style: { marginRight: '5px' } }), "Hand\u00A0", jsxRuntimeExports.jsxs("span", { style: { fontWeight: 'bold' }, children: ["[", handedness === 'left' ? 'L' : 'R', "]"] })] }), jsxRuntimeExports.jsx("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                gap: '1px',
+                            }, children: connected ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(PanelHeaderButton, { title: `Click to ${settingsOpen ? 'close' : 'change'} key bindings`, onClick: () => {
+                                            setSettingsOpen(!settingsOpen);
+                                        }, children: jsxRuntimeExports.jsx(FAIcon, { icon: faGear }) }), jsxRuntimeExports.jsx(PanelHeaderButton, { title: `Click to disconnect ${handedness} controller`, "$isRed": true, onClick: () => {
+                                            hand.connected = false;
+                                            setConnected(false);
+                                        }, children: jsxRuntimeExports.jsx(FAIcon, { icon: faCircleXmark }) })] })) : (jsxRuntimeExports.jsx(PanelHeaderButton, { title: `Click to reconnect ${handedness} controller`, onClick: () => {
+                                    hand.connected = true;
+                                    setConnected(true);
+                                }, style: { marginLeft: '5px' }, children: jsxRuntimeExports.jsx(FAIcon, { icon: faPlug }) })) })] }) })), connected && !pointerLocked && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [!settingsOpen && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionBreak, {}), jsxRuntimeExports.jsx(Vector3Input, { vector: handle.position, label: "Position", marginBottom: ControlButtonStyles.gap }), jsxRuntimeExports.jsx(Vector3Input, { vector: handle.rotation, label: "Rotation" })] })), jsxRuntimeExports.jsx(SectionBreak, {})] })), connected &&
+                (settingsOpen ? (jsxRuntimeExports.jsx(ControlsMapper, { handedness: handedness, actions: ['pose', 'pinch'] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(PoseSelector, { hand: hand, pointerLocked: pointerLocked, mappedKey: keyMap[handedness].pose }), jsxRuntimeExports.jsx(PinchControl, { hand: hand, pointerLocked: pointerLocked, mappedKey: keyMap[handedness].pinch })] })))] }, handedness));
+};
+
+const useInputModeStore = create((set) => ({
+    inputMode: 'controller',
+    setInputMode: (mode) => set(() => ({
+        inputMode: mode,
+    })),
+}));
+const ControlsUI = ({ xrDevice, inputLayer, pointerLocked, }) => {
+    const { inputMode } = useInputModeStore();
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: inputMode === 'controller'
+            ? Object.entries(xrDevice.controllers).map(([handedness, controller]) => (jsxRuntimeExports.jsx(ControllerUI, { controller: controller, handle: inputLayer.transformHandles.get(handedness), handedness: handedness, pointerLocked: pointerLocked }, `controller-${handedness}`)))
+            : Object.entries(xrDevice.hands).map(([handedness, hand]) => (jsxRuntimeExports.jsx(HandUI, { hand: hand, handle: inputLayer.transformHandles.get(handedness), handedness: handedness, pointerLocked: pointerLocked }, `hand-${handedness}`))) }));
+};
+
 const VersionTableCol1 = dt.td `
 	text-align: right;
 	color: ${Colors.textWhite};
@@ -6361,6 +6600,7 @@ const HeaderUI = ({ xrDevice, inputLayer }) => {
     const [boxesVisible, setBoxesVisible] = React.useState(Boolean((_b = xrDevice.sem) === null || _b === void 0 ? void 0 : _b.boundingBoxesVisible));
     const [meshesVisible, setMeshesVisible] = React.useState(Boolean((_c = xrDevice.sem) === null || _c === void 0 ? void 0 : _c.meshesVisible));
     const [infoPanelOpen, setInfoPanelOpen] = React.useState(false);
+    const { inputMode, setInputMode } = useInputModeStore();
     return (jsxRuntimeExports.jsxs("div", { style: {
             display: 'flex',
             justifyContent: 'center',
@@ -6376,7 +6616,16 @@ const HeaderUI = ({ xrDevice, inputLayer }) => {
                                 inputLayer.resetDeviceTransforms();
                             }, children: jsxRuntimeExports.jsx(FAIcon, { icon: faRotateLeft, "$size": 16 }) }), jsxRuntimeExports.jsx(HeaderButton, { title: "Click to activate play mode", onClick: () => {
                                 inputLayer.lockPointer();
-                            }, children: jsxRuntimeExports.jsx(FAIcon, { icon: faCirclePlay, "$size": 16 }) }), xrDevice.sem && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionBreak, { "$horizontal": false }), jsxRuntimeExports.jsx(HeaderButton, { title: "Click to toggle visibility of planes", onClick: () => {
+                            }, children: jsxRuntimeExports.jsx(FAIcon, { icon: faCirclePlay, "$size": 16 }) }), jsxRuntimeExports.jsx(HeaderButton, { title: "Click to toggle input mode", onClick: () => {
+                                if (inputMode === 'controller') {
+                                    setInputMode('hand');
+                                    xrDevice.primaryInputMode = 'hand';
+                                }
+                                else {
+                                    setInputMode('controller');
+                                    xrDevice.primaryInputMode = 'controller';
+                                }
+                            }, children: jsxRuntimeExports.jsx(FAIcon, { icon: inputMode === 'controller' ? faGamepad : faHand, "$size": 16 }) }), xrDevice.sem && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionBreak, { "$horizontal": false }), jsxRuntimeExports.jsx(HeaderButton, { title: "Click to toggle visibility of planes", onClick: () => {
                                         xrDevice.sem.planesVisible = !planesVisible;
                                         setPlanesVisible(!planesVisible);
                                     }, children: jsxRuntimeExports.jsx(PlaneIcon, { size: 16, color: planesVisible ? Colors.textWhite : Colors.textGrey }) }), jsxRuntimeExports.jsx(HeaderButton, { title: "Click to toggle visibility of bounding boxes", onClick: () => {
@@ -42191,7 +42440,6 @@ class InputLayer {
             transformHandle.space = 'local';
             this.transformHandles.set(handedness, transformHandle);
             transformHandle.addEventListener('click', () => {
-                console.log('click');
                 if (transformHandle.userData.mode === 'translate') {
                     transformHandle.userData.setMode('rotate');
                 }
@@ -42299,8 +42547,11 @@ class InputLayer {
         xrDevice.position.copy(cameraRig.getWorldPosition(this.vec3));
         xrDevice.quaternion.copy(cameraRig.getWorldQuaternion(this.quat));
         transformHandles.forEach((transformHandle, handedness) => {
-            xrDevice.controllers[handedness].position.copy(transformHandle.getWorldPosition(this.vec3));
-            xrDevice.controllers[handedness].quaternion.copy(transformHandle.getWorldQuaternion(this.quat));
+            const emulatedInput = xrDevice.primaryInputMode === 'controller'
+                ? xrDevice.controllers[handedness]
+                : xrDevice.hands[handedness];
+            emulatedInput.position.copy(transformHandle.getWorldPosition(this.vec3));
+            emulatedInput.quaternion.copy(transformHandle.getWorldQuaternion(this.quat));
         });
     }
     renderScene(time) {
@@ -42362,7 +42613,7 @@ class InputLayer {
     }
 }
 
-const VERSION = "1.0.1";
+const VERSION = "1.1.0";
 
 var client = {};
 
@@ -42796,6 +43047,7 @@ class DevUI {
     constructor(xrDevice) {
         this.version = VERSION;
         xrDevice.ipd = 0;
+        useInputModeStore.getState().setInputMode(xrDevice.primaryInputMode);
         this.devUIContainer = document.createElement('div');
         this.devUIContainer.style.position = 'fixed';
         this.devUIContainer.style.width = '100vw';