@iwer/devui 1.0.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/build/iwer-devui.js +384 -132
  2. package/build/iwer-devui.min.js +69 -59
  3. package/build/iwer-devui.module.js +384 -132
  4. package/build/iwer-devui.module.min.js +63 -53
  5. package/lib/components/controller.d.ts +18 -0
  6. package/lib/components/controller.d.ts.map +1 -0
  7. package/lib/components/controller.js +104 -0
  8. package/lib/components/controller.js.map +1 -0
  9. package/lib/components/controls.d.ts +5 -9
  10. package/lib/components/controls.d.ts.map +1 -1
  11. package/lib/components/controls.js +14 -83
  12. package/lib/components/controls.js.map +1 -1
  13. package/lib/components/hand.d.ts +18 -0
  14. package/lib/components/hand.d.ts.map +1 -0
  15. package/lib/components/hand.js +51 -0
  16. package/lib/components/hand.js.map +1 -0
  17. package/lib/components/header.d.ts.map +1 -1
  18. package/lib/components/header.js +13 -2
  19. package/lib/components/header.js.map +1 -1
  20. package/lib/components/icons.d.ts +4 -0
  21. package/lib/components/icons.d.ts.map +1 -1
  22. package/lib/components/icons.js +10 -1
  23. package/lib/components/icons.js.map +1 -1
  24. package/lib/components/mapper.d.ts +3 -2
  25. package/lib/components/mapper.d.ts.map +1 -1
  26. package/lib/components/mapper.js +8 -2
  27. package/lib/components/mapper.js.map +1 -1
  28. package/lib/components/pinch.d.ts +16 -0
  29. package/lib/components/pinch.d.ts.map +1 -0
  30. package/lib/components/pinch.js +94 -0
  31. package/lib/components/pinch.js.map +1 -0
  32. package/lib/components/pose.d.ts +16 -0
  33. package/lib/components/pose.d.ts.map +1 -0
  34. package/lib/components/pose.js +62 -0
  35. package/lib/components/pose.js.map +1 -0
  36. package/lib/components/styled.d.ts +6 -0
  37. package/lib/components/styled.d.ts.map +1 -1
  38. package/lib/components/styled.js +19 -15
  39. package/lib/components/styled.js.map +1 -1
  40. package/lib/index.d.ts +1 -1
  41. package/lib/index.d.ts.map +1 -1
  42. package/lib/index.js +2 -1
  43. package/lib/index.js.map +1 -1
  44. package/lib/scene.d.ts.map +1 -1
  45. package/lib/scene.js +5 -3
  46. package/lib/scene.js.map +1 -1
  47. package/lib/version.d.ts +1 -1
  48. package/lib/version.js +1 -1
  49. package/package.json +1 -2
@@ -4740,7 +4740,6 @@
4740
4740
  border-radius: ${ControlButtonStyles.radiusSolo};
4741
4741
  }
4742
4742
  `;
4743
- Button.defaultProps = { $reverse: false };
4744
4743
  const HeaderButtonsContainer = dt.div `
4745
4744
  padding: 2px;
4746
4745
  display: flex;
@@ -4822,7 +4821,6 @@
4822
4821
  margin-bottom: 0;
4823
4822
  }
4824
4823
  `;
4825
- ButtonContainer.defaultProps = { $reverse: false };
4826
4824
  const ButtonGroup = dt.div `
4827
4825
  display: flex;
4828
4826
  flex-direction: ${({ $reverse }) => ($reverse ? 'row-reverse' : 'row')};
@@ -4832,7 +4830,6 @@
4832
4830
  margin: ${({ $reverse }) => ($reverse ? '0 5px 0 0' : '0 0 0 5px')};
4833
4831
  gap: 3px;
4834
4832
  `;
4835
- ButtonGroup.defaultProps = { $reverse: false };
4836
4833
  dt.button `
4837
4834
  background-color: rgba(255, 255, 255, 0.3);
4838
4835
  border: none;
@@ -4895,7 +4892,6 @@
4895
4892
  border-radius: ${ControlButtonStyles.radiusMiddle};
4896
4893
  }
4897
4894
  `;
4898
- RangeSelector$1.defaultProps = { $reverse: false };
4899
4895
  dt.div `
4900
4896
  display: flex;
4901
4897
  flex-direction: column;
@@ -4910,14 +4906,24 @@
4910
4906
  justify-content: center;
4911
4907
  `;
4912
4908
  const FAIcon = dt(FontAwesomeIcon) `
4913
- height: ${({ $size }) => `${$size}px`};
4914
- min-height: ${({ $size }) => `${$size}px`};
4915
- max-height: ${({ $size }) => `${$size}px`};
4916
- width: ${({ $size }) => `${$size}px`};
4917
- min-width: ${({ $size }) => `${$size}px`};
4918
- max-width: ${({ $size }) => `${$size}px`};
4909
+ height: ${({ $size = 14 }) => `${$size}px`};
4910
+ min-height: ${({ $size = 14 }) => `${$size}px`};
4911
+ max-height: ${({ $size = 14 }) => `${$size}px`};
4912
+ width: ${({ $size = 14 }) => `${$size}px`};
4913
+ min-width: ${({ $size = 14 }) => `${$size}px`};
4914
+ max-width: ${({ $size = 14 }) => `${$size}px`};
4915
+ transform: ${({ $reverse }) => ($reverse ? 'scaleX(-1)' : 'unset')};
4916
+ `;
4917
+ const FAControlIcon = dt(FontAwesomeIcon) `
4918
+ height: 18px;
4919
+ min-height: 18px;
4920
+ max-height: 18px;
4921
+ width: 18px;
4922
+ min-width: 18px;
4923
+ max-width: 18px;
4924
+ margin: 6px;
4925
+ transform: ${({ $reverse }) => ($reverse ? 'scaleX(-1)' : 'unset')};
4919
4926
  `;
4920
- FAIcon.defaultProps = { $size: 14 };
4921
4927
  const ControlPanel = dt.div `
4922
4928
  position: fixed;
4923
4929
  padding: 5px;
@@ -4935,13 +4941,12 @@
4935
4941
  flex-direction: column;
4936
4942
  `;
4937
4943
  const SectionBreak = dt.hr `
4938
- width: ${({ $horizontal }) => ($horizontal ? 'unset' : '1px')};
4939
- height: ${({ $horizontal }) => ($horizontal ? '1px' : 'unset')};
4944
+ width: ${({ $horizontal = true }) => ($horizontal ? 'unset' : '1px')};
4945
+ height: ${({ $horizontal = true }) => ($horizontal ? '1px' : 'unset')};
4940
4946
  background-color: ${Colors.panelBorder};
4941
4947
  margin: 5px 3px;
4942
4948
  border: none;
4943
4949
  `;
4944
- SectionBreak.defaultProps = { $horizontal: true };
4945
4950
  const PanelHeaderButton = dt.button `
4946
4951
  background-color: transparent;
4947
4952
  border: none;
@@ -4967,7 +4972,6 @@
4967
4972
  outline: none;
4968
4973
  }
4969
4974
  `;
4970
- PanelHeaderButton.defaultProps = { $isRed: false };
4971
4975
  const ValuesContainer = dt.div `
4972
4976
  display: flex;
4973
4977
  flex-direction: row;
@@ -5004,6 +5008,137 @@
5004
5008
  font-size: 10px;
5005
5009
  `;
5006
5010
 
5011
+ const faRightFromBracket = {
5012
+ prefix: 'fas',
5013
+ iconName: 'right-from-bracket',
5014
+ 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"]
5015
+ };
5016
+ const faFingerprint = {
5017
+ prefix: 'fas',
5018
+ iconName: 'fingerprint',
5019
+ 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"]
5020
+ };
5021
+ const faCaretRight = {
5022
+ prefix: 'fas',
5023
+ iconName: 'caret-right',
5024
+ 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"]
5025
+ };
5026
+ const faCaretLeft = {
5027
+ prefix: 'fas',
5028
+ iconName: 'caret-left',
5029
+ 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"]
5030
+ };
5031
+ const faGamepad = {
5032
+ prefix: 'fas',
5033
+ iconName: 'gamepad',
5034
+ 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"]
5035
+ };
5036
+ const faHand = {
5037
+ prefix: 'fas',
5038
+ iconName: 'hand',
5039
+ 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"]
5040
+ };
5041
+ const faPlug = {
5042
+ prefix: 'fas',
5043
+ iconName: 'plug',
5044
+ 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"]
5045
+ };
5046
+ const faBan = {
5047
+ prefix: 'fas',
5048
+ iconName: 'ban',
5049
+ 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"]
5050
+ };
5051
+ const faArrowRightToBracket = {
5052
+ prefix: 'fas',
5053
+ iconName: 'arrow-right-to-bracket',
5054
+ 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"]
5055
+ };
5056
+ const faCaretUp = {
5057
+ prefix: 'fas',
5058
+ iconName: 'caret-up',
5059
+ 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"]
5060
+ };
5061
+ const faRotateLeft = {
5062
+ prefix: 'fas',
5063
+ iconName: 'rotate-left',
5064
+ 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"]
5065
+ };
5066
+ const faCirclePlay = {
5067
+ prefix: 'fas',
5068
+ iconName: 'circle-play',
5069
+ 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"]
5070
+ };
5071
+ const faHandScissors = {
5072
+ prefix: 'fas',
5073
+ iconName: 'hand-scissors',
5074
+ 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"]
5075
+ };
5076
+ const faStreetView = {
5077
+ prefix: 'fas',
5078
+ iconName: 'street-view',
5079
+ 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"]
5080
+ };
5081
+ const faGear = {
5082
+ prefix: 'fas',
5083
+ iconName: 'gear',
5084
+ 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"]
5085
+ };
5086
+ const faCaretDown = {
5087
+ prefix: 'fas',
5088
+ iconName: 'caret-down',
5089
+ 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"]
5090
+ };
5091
+ const faDeleteLeft = {
5092
+ prefix: 'fas',
5093
+ iconName: 'delete-left',
5094
+ 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"]
5095
+ };
5096
+ const faBug = {
5097
+ prefix: 'fas',
5098
+ iconName: 'bug',
5099
+ 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"]
5100
+ };
5101
+ const faAngleUp = {
5102
+ prefix: 'fas',
5103
+ iconName: 'angle-up',
5104
+ 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"]
5105
+ };
5106
+ const faChevronLeft = {
5107
+ prefix: 'fas',
5108
+ iconName: 'chevron-left',
5109
+ 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"]
5110
+ };
5111
+ const faHandLizard = {
5112
+ prefix: 'fas',
5113
+ iconName: 'hand-lizard',
5114
+ 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"]
5115
+ };
5116
+ const faChevronRight = {
5117
+ prefix: 'fas',
5118
+ iconName: 'chevron-right',
5119
+ 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"]
5120
+ };
5121
+ const faVrCardboard = {
5122
+ prefix: 'fas',
5123
+ iconName: 'vr-cardboard',
5124
+ 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"]
5125
+ };
5126
+ const faArrowTurnDown = {
5127
+ prefix: 'fas',
5128
+ iconName: 'arrow-turn-down',
5129
+ 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"]
5130
+ };
5131
+ const faCircleXmark = {
5132
+ prefix: 'fas',
5133
+ iconName: 'circle-xmark',
5134
+ 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"]
5135
+ };
5136
+ const faVideo = {
5137
+ prefix: 'fas',
5138
+ iconName: 'video',
5139
+ 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"]
5140
+ };
5141
+
5007
5142
  const IconSize = ControlButtonStyles.height;
5008
5143
  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: {
5009
5144
  fill: '#fff',
@@ -5205,6 +5340,10 @@
5205
5340
  fill: '#fff',
5206
5341
  fillOpacity: 1,
5207
5342
  } })] }));
5343
+ const PoseL = () => (jsxRuntimeExports.jsx(FAControlIcon, { icon: faHandScissors, "$reverse": true }));
5344
+ const PoseR = () => (jsxRuntimeExports.jsx(FAControlIcon, { icon: faHandScissors, "$reverse": false }));
5345
+ const PinchL = () => (jsxRuntimeExports.jsx(FAControlIcon, { icon: faHandLizard, "$reverse": true }));
5346
+ const PinchR = () => (jsxRuntimeExports.jsx(FAControlIcon, { icon: faHandLizard, "$reverse": false }));
5208
5347
  // Create a mapping of buttonId to icon component
5209
5348
  const buttonIdToIcon = {
5210
5349
  'x-button-left': ButtonX,
@@ -5216,6 +5355,8 @@
5216
5355
  'thumbstick-down-left': ThumbstickLDown,
5217
5356
  'thumbstick-right-left': ThumbstickLRight,
5218
5357
  'thumbstick-left-left': ThumbstickLLeft,
5358
+ 'pose-left': PoseL,
5359
+ 'pinch-left': PinchL,
5219
5360
  'thumbstick-right': ThumbstickR,
5220
5361
  'thumbstick-up-right': ThumbstickRUp,
5221
5362
  'thumbstick-down-right': ThumbstickRDown,
@@ -5227,6 +5368,8 @@
5227
5368
  'squeeze-right': GripR,
5228
5369
  'thumbrest-left': ThumbrestL,
5229
5370
  'thumbrest-right': ThumbrestR,
5371
+ 'pose-right': PoseR,
5372
+ 'pinch-right': PinchR,
5230
5373
  };
5231
5374
  const GamepadIcon = ({ buttonName, handedness, }) => {
5232
5375
  const buttonId = `${buttonName}-${handedness}`;
@@ -5276,112 +5419,6 @@
5276
5419
  fillOpacity: 1,
5277
5420
  } })] }));
5278
5421
 
5279
- const faRightFromBracket = {
5280
- prefix: 'fas',
5281
- iconName: 'right-from-bracket',
5282
- 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"]
5283
- };
5284
- const faFingerprint = {
5285
- prefix: 'fas',
5286
- iconName: 'fingerprint',
5287
- 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"]
5288
- };
5289
- const faCaretRight = {
5290
- prefix: 'fas',
5291
- iconName: 'caret-right',
5292
- 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"]
5293
- };
5294
- const faCaretLeft = {
5295
- prefix: 'fas',
5296
- iconName: 'caret-left',
5297
- 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"]
5298
- };
5299
- const faGamepad = {
5300
- prefix: 'fas',
5301
- iconName: 'gamepad',
5302
- 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"]
5303
- };
5304
- const faPlug = {
5305
- prefix: 'fas',
5306
- iconName: 'plug',
5307
- 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"]
5308
- };
5309
- const faBan = {
5310
- prefix: 'fas',
5311
- iconName: 'ban',
5312
- 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"]
5313
- };
5314
- const faArrowRightToBracket = {
5315
- prefix: 'fas',
5316
- iconName: 'arrow-right-to-bracket',
5317
- 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"]
5318
- };
5319
- const faCaretUp = {
5320
- prefix: 'fas',
5321
- iconName: 'caret-up',
5322
- 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"]
5323
- };
5324
- const faRotateLeft = {
5325
- prefix: 'fas',
5326
- iconName: 'rotate-left',
5327
- 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"]
5328
- };
5329
- const faCirclePlay = {
5330
- prefix: 'fas',
5331
- iconName: 'circle-play',
5332
- 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"]
5333
- };
5334
- const faStreetView = {
5335
- prefix: 'fas',
5336
- iconName: 'street-view',
5337
- 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"]
5338
- };
5339
- const faGear = {
5340
- prefix: 'fas',
5341
- iconName: 'gear',
5342
- 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"]
5343
- };
5344
- const faCaretDown = {
5345
- prefix: 'fas',
5346
- iconName: 'caret-down',
5347
- 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"]
5348
- };
5349
- const faDeleteLeft = {
5350
- prefix: 'fas',
5351
- iconName: 'delete-left',
5352
- 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"]
5353
- };
5354
- const faBug = {
5355
- prefix: 'fas',
5356
- iconName: 'bug',
5357
- 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"]
5358
- };
5359
- const faAngleUp = {
5360
- prefix: 'fas',
5361
- iconName: 'angle-up',
5362
- 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"]
5363
- };
5364
- const faVrCardboard = {
5365
- prefix: 'fas',
5366
- iconName: 'vr-cardboard',
5367
- 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"]
5368
- };
5369
- const faArrowTurnDown = {
5370
- prefix: 'fas',
5371
- iconName: 'arrow-turn-down',
5372
- 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"]
5373
- };
5374
- const faCircleXmark = {
5375
- prefix: 'fas',
5376
- iconName: 'circle-xmark',
5377
- 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"]
5378
- };
5379
- const faVideo = {
5380
- prefix: 'fas',
5381
- iconName: 'video',
5382
- 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"]
5383
- };
5384
-
5385
5422
  const MappedKeyDisplay = {
5386
5423
  KeyA: 'A',
5387
5424
  KeyB: 'B',
@@ -5722,6 +5759,8 @@
5722
5759
  'y-button': 'KeyZ',
5723
5760
  trigger: 'KeyQ',
5724
5761
  squeeze: 'KeyE',
5762
+ pinch: 'MouseLeft',
5763
+ pose: 'KeyF',
5725
5764
  },
5726
5765
  right: {
5727
5766
  'thumbstick-up': 'ArrowUp',
@@ -5733,6 +5772,8 @@
5733
5772
  'b-button': 'ShiftRight',
5734
5773
  trigger: 'MouseLeft',
5735
5774
  squeeze: 'MouseRight',
5775
+ pinch: 'MouseRight',
5776
+ pose: 'Backslash',
5736
5777
  },
5737
5778
  };
5738
5779
  const useKeyMapStore = create((set) => ({
@@ -5758,7 +5799,7 @@
5758
5799
  margin-bottom: 0;
5759
5800
  }
5760
5801
  `;
5761
- const ControllerMapper = ({ handedness, }) => {
5802
+ const ControlsMapper = ({ handedness, actions, }) => {
5762
5803
  const { keyMap, bindKey } = useKeyMapStore();
5763
5804
  const [currentMapping, setCurrentMapping] = reactExports.useState(null);
5764
5805
  const startMapping = (action) => {
@@ -5796,7 +5837,9 @@
5796
5837
  window.removeEventListener('contextmenu', preventDefaultContextMenu);
5797
5838
  };
5798
5839
  }, [currentMapping]);
5799
- 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: {
5840
+ return Object.keys(keyMap[handedness])
5841
+ .filter((action) => actions.includes(action))
5842
+ .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: {
5800
5843
  width: '100px',
5801
5844
  background: currentMapping && currentMapping.action === action
5802
5845
  ? Colors.gradientLightGreyTranslucent
@@ -6299,13 +6342,25 @@
6299
6342
  });
6300
6343
  return transformed;
6301
6344
  }
6302
- const ControlsUI = ({ xrDevice, inputLayer, pointerLocked, }) => {
6303
- 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}`))) }));
6304
- };
6305
6345
  const ControllerUI = ({ controller, handle, handedness, pointerLocked, }) => {
6306
6346
  const { keyMap } = useKeyMapStore();
6307
6347
  const [connected, setConnected] = React.useState(controller.connected);
6308
6348
  const [settingsOpen, setSettingsOpen] = React.useState(false);
6349
+ const transformedConfig = transformGamepadConfig(controller.gamepadConfig);
6350
+ const actions = transformedConfig.flatMap((config) => {
6351
+ if (config.hasAxes) {
6352
+ return [
6353
+ `${config.id}-left`,
6354
+ `${config.id}-right`,
6355
+ `${config.id}-up`,
6356
+ `${config.id}-down`,
6357
+ config.id,
6358
+ ];
6359
+ }
6360
+ else {
6361
+ return config.id;
6362
+ }
6363
+ });
6309
6364
  React.useEffect(() => {
6310
6365
  if (pointerLocked) {
6311
6366
  setSettingsOpen(false);
@@ -6336,7 +6391,7 @@
6336
6391
  controller.connected = true;
6337
6392
  setConnected(true);
6338
6393
  }, 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 &&
6339
- (settingsOpen ? (jsxRuntimeExports.jsx(ControllerMapper, { handedness: handedness })) : (transformGamepadConfig(controller.gamepadConfig).map((buttonConfig) => {
6394
+ (settingsOpen ? (jsxRuntimeExports.jsx(ControlsMapper, { handedness: handedness, actions: actions })) : (transformedConfig.map((buttonConfig) => {
6340
6395
  const mapping = keyMap[handedness];
6341
6396
  if (buttonConfig.hasAxes) {
6342
6397
  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));
@@ -6350,6 +6405,190 @@
6350
6405
  })))] }, handedness));
6351
6406
  };
6352
6407
 
6408
+ const pinchSliderWidth = `calc(${ControlButtonStyles.widthLong} + ${ControlButtonStyles.widthShort} + ${ControlButtonStyles.gap})`;
6409
+ const PinchControl = ({ hand, pointerLocked, mappedKey, }) => {
6410
+ const [isPressed, setIsPressed] = reactExports.useState(false);
6411
+ const [isKeyPressed, setIsKeyPressed] = reactExports.useState(false);
6412
+ const [analogValue, setAnalogValue] = reactExports.useState(0);
6413
+ const handedness = hand.inputSource.handedness;
6414
+ reactExports.useEffect(() => {
6415
+ const handleKeyDown = (event) => {
6416
+ if (event.code === mappedKey) {
6417
+ hand.updatePinchValue(1);
6418
+ setIsKeyPressed(true);
6419
+ }
6420
+ };
6421
+ const handleKeyUp = (event) => {
6422
+ if (event.code === mappedKey) {
6423
+ hand.updatePinchValue(0);
6424
+ setIsKeyPressed(false);
6425
+ }
6426
+ };
6427
+ const handleMouseDown = (event) => {
6428
+ if ((mappedKey === 'MouseLeft' && event.button === 0) ||
6429
+ (mappedKey === 'MouseRight' && event.button === 2)) {
6430
+ hand.updatePinchValue(1);
6431
+ setIsKeyPressed(true);
6432
+ }
6433
+ };
6434
+ const handleMouseUp = (event) => {
6435
+ if ((mappedKey === 'MouseLeft' && event.button === 0) ||
6436
+ (mappedKey === 'MouseRight' && event.button === 2)) {
6437
+ hand.updatePinchValue(0);
6438
+ setIsKeyPressed(false);
6439
+ }
6440
+ };
6441
+ if (pointerLocked) {
6442
+ if (mappedKey === 'MouseLeft' || mappedKey === 'MouseRight') {
6443
+ window.addEventListener('mousedown', handleMouseDown);
6444
+ window.addEventListener('mouseup', handleMouseUp);
6445
+ }
6446
+ else {
6447
+ window.addEventListener('keydown', handleKeyDown);
6448
+ window.addEventListener('keyup', handleKeyUp);
6449
+ }
6450
+ }
6451
+ else {
6452
+ if (mappedKey === 'MouseLeft' || mappedKey === 'MouseRight') {
6453
+ window.removeEventListener('mousedown', handleMouseDown);
6454
+ window.removeEventListener('mouseup', handleMouseUp);
6455
+ }
6456
+ else {
6457
+ window.removeEventListener('keydown', handleKeyDown);
6458
+ window.removeEventListener('keyup', handleKeyUp);
6459
+ }
6460
+ }
6461
+ return () => {
6462
+ if (mappedKey === 'MouseLeft' || mappedKey === 'MouseRight') {
6463
+ window.removeEventListener('mousedown', handleMouseDown);
6464
+ window.removeEventListener('mouseup', handleMouseUp);
6465
+ }
6466
+ else {
6467
+ window.removeEventListener('keydown', handleKeyDown);
6468
+ window.removeEventListener('keyup', handleKeyUp);
6469
+ }
6470
+ };
6471
+ }, [mappedKey, pointerLocked, hand]);
6472
+ 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: {
6473
+ background: isPressed
6474
+ ? Colors.gradientLightGreyTranslucent
6475
+ : Colors.gradientGreyTranslucent,
6476
+ width: ControlButtonStyles.widthLong,
6477
+ }, onClick: () => {
6478
+ setIsPressed(true);
6479
+ hand.updatePinchValue(1);
6480
+ setTimeout(() => {
6481
+ setIsPressed(false);
6482
+ hand.updatePinchValue(0);
6483
+ }, 250);
6484
+ }, children: "Pinch" }), jsxRuntimeExports.jsx(RangeSelector$1, { "$reverse": handedness === 'right', value: analogValue, onChange: (e) => {
6485
+ const value = Number(e.target.value);
6486
+ setAnalogValue(value);
6487
+ hand.updatePinchValue(value / 100);
6488
+ }, style: { width: pinchSliderWidth }, min: "0", max: "100" })] })) })] }));
6489
+ };
6490
+
6491
+ const poses = ['default', 'point'];
6492
+ const poseButtonWidth = `calc(2 * ${ControlButtonStyles.widthLong} - ${ControlButtonStyles.widthShort})`;
6493
+ const PoseSelector = ({ hand, pointerLocked, mappedKey, }) => {
6494
+ const [poseId, setPoseId] = reactExports.useState(hand.poseId);
6495
+ const [isKeyPressed, setIsKeyPressed] = reactExports.useState(false);
6496
+ const handedness = hand.inputSource.handedness;
6497
+ const cyclePose = (delta) => {
6498
+ const poseIdx = poses.indexOf(hand.poseId);
6499
+ const newPoseIdx = (poseIdx + poses.length + delta) % poses.length;
6500
+ setPoseId(poses[newPoseIdx]);
6501
+ hand.poseId = poses[newPoseIdx];
6502
+ };
6503
+ const layoutReverse = handedness === 'right';
6504
+ reactExports.useEffect(() => {
6505
+ const handleKeyDown = (event) => {
6506
+ if (event.code === mappedKey) {
6507
+ cyclePose(1);
6508
+ setIsKeyPressed(true);
6509
+ }
6510
+ };
6511
+ const handleKeyUp = (event) => {
6512
+ if (event.code === mappedKey) {
6513
+ setIsKeyPressed(false);
6514
+ }
6515
+ };
6516
+ if (pointerLocked) {
6517
+ window.addEventListener('keydown', handleKeyDown);
6518
+ window.addEventListener('keyup', handleKeyUp);
6519
+ }
6520
+ else {
6521
+ window.removeEventListener('keydown', handleKeyDown);
6522
+ window.removeEventListener('keyup', handleKeyUp);
6523
+ }
6524
+ return () => {
6525
+ window.removeEventListener('keydown', handleKeyDown);
6526
+ window.removeEventListener('keyup', handleKeyUp);
6527
+ };
6528
+ }, [mappedKey, pointerLocked, hand]);
6529
+ 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: {
6530
+ width: ControlButtonStyles.widthShort,
6531
+ }, onClick: () => {
6532
+ cyclePose(layoutReverse ? 1 : -1);
6533
+ }, children: jsxRuntimeExports.jsx(FAIcon, { icon: layoutReverse ? faChevronRight : faChevronLeft }) }), jsxRuntimeExports.jsxs(Button, { "$reverse": layoutReverse, style: {
6534
+ width: poseButtonWidth,
6535
+ }, disabled: true, children: ["Pose: ", poseId] }), jsxRuntimeExports.jsx(Button, { "$reverse": layoutReverse, style: {
6536
+ width: ControlButtonStyles.widthShort,
6537
+ }, onClick: () => {
6538
+ cyclePose(layoutReverse ? -1 : 1);
6539
+ }, children: jsxRuntimeExports.jsx(FAIcon, { icon: layoutReverse ? faChevronLeft : faChevronRight }) })] })) })] }));
6540
+ };
6541
+
6542
+ const HandUI = ({ hand, handle, handedness, pointerLocked, }) => {
6543
+ const { keyMap } = useKeyMapStore();
6544
+ const [connected, setConnected] = React.useState(hand.connected);
6545
+ const [settingsOpen, setSettingsOpen] = React.useState(false);
6546
+ React.useEffect(() => {
6547
+ if (pointerLocked) {
6548
+ setSettingsOpen(false);
6549
+ }
6550
+ }, [pointerLocked]);
6551
+ return (jsxRuntimeExports.jsxs(ControlPanel, { style: handedness === 'left'
6552
+ ? { left: '8px', bottom: '8px' }
6553
+ : { right: '8px', bottom: '8px' }, children: [!pointerLocked && (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs("div", { style: {
6554
+ display: 'flex',
6555
+ flexDirection: 'row',
6556
+ justifyContent: 'space-between',
6557
+ alignItems: 'center',
6558
+ }, children: [jsxRuntimeExports.jsxs("div", { style: {
6559
+ fontSize: '13px',
6560
+ display: 'flex',
6561
+ flexDirection: 'row',
6562
+ alignItems: 'center',
6563
+ }, 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: {
6564
+ display: 'flex',
6565
+ flexDirection: 'row',
6566
+ gap: '1px',
6567
+ }, children: connected ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(PanelHeaderButton, { title: `Click to ${settingsOpen ? 'close' : 'change'} key bindings`, onClick: () => {
6568
+ setSettingsOpen(!settingsOpen);
6569
+ }, children: jsxRuntimeExports.jsx(FAIcon, { icon: faGear }) }), jsxRuntimeExports.jsx(PanelHeaderButton, { title: `Click to disconnect ${handedness} controller`, "$isRed": true, onClick: () => {
6570
+ hand.connected = false;
6571
+ setConnected(false);
6572
+ }, children: jsxRuntimeExports.jsx(FAIcon, { icon: faCircleXmark }) })] })) : (jsxRuntimeExports.jsx(PanelHeaderButton, { title: `Click to reconnect ${handedness} controller`, onClick: () => {
6573
+ hand.connected = true;
6574
+ setConnected(true);
6575
+ }, 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 &&
6576
+ (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));
6577
+ };
6578
+
6579
+ const useInputModeStore = create((set) => ({
6580
+ inputMode: 'controller',
6581
+ setInputMode: (mode) => set(() => ({
6582
+ inputMode: mode,
6583
+ })),
6584
+ }));
6585
+ const ControlsUI = ({ xrDevice, inputLayer, pointerLocked, }) => {
6586
+ const { inputMode } = useInputModeStore();
6587
+ return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: inputMode === 'controller'
6588
+ ? Object.entries(xrDevice.controllers).map(([handedness, controller]) => (jsxRuntimeExports.jsx(ControllerUI, { controller: controller, handle: inputLayer.transformHandles.get(handedness), handedness: handedness, pointerLocked: pointerLocked }, `controller-${handedness}`)))
6589
+ : Object.entries(xrDevice.hands).map(([handedness, hand]) => (jsxRuntimeExports.jsx(HandUI, { hand: hand, handle: inputLayer.transformHandles.get(handedness), handedness: handedness, pointerLocked: pointerLocked }, `hand-${handedness}`))) }));
6590
+ };
6591
+
6353
6592
  const VersionTableCol1 = dt.td `
6354
6593
  text-align: right;
6355
6594
  color: ${Colors.textWhite};
@@ -6367,6 +6606,7 @@
6367
6606
  const [boxesVisible, setBoxesVisible] = React.useState(Boolean((_b = xrDevice.sem) === null || _b === void 0 ? void 0 : _b.boundingBoxesVisible));
6368
6607
  const [meshesVisible, setMeshesVisible] = React.useState(Boolean((_c = xrDevice.sem) === null || _c === void 0 ? void 0 : _c.meshesVisible));
6369
6608
  const [infoPanelOpen, setInfoPanelOpen] = React.useState(false);
6609
+ const { inputMode, setInputMode } = useInputModeStore();
6370
6610
  return (jsxRuntimeExports.jsxs("div", { style: {
6371
6611
  display: 'flex',
6372
6612
  justifyContent: 'center',
@@ -6382,7 +6622,16 @@
6382
6622
  inputLayer.resetDeviceTransforms();
6383
6623
  }, children: jsxRuntimeExports.jsx(FAIcon, { icon: faRotateLeft, "$size": 16 }) }), jsxRuntimeExports.jsx(HeaderButton, { title: "Click to activate play mode", onClick: () => {
6384
6624
  inputLayer.lockPointer();
6385
- }, 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: () => {
6625
+ }, children: jsxRuntimeExports.jsx(FAIcon, { icon: faCirclePlay, "$size": 16 }) }), jsxRuntimeExports.jsx(HeaderButton, { title: "Click to toggle input mode", onClick: () => {
6626
+ if (inputMode === 'controller') {
6627
+ setInputMode('hand');
6628
+ xrDevice.primaryInputMode = 'hand';
6629
+ }
6630
+ else {
6631
+ setInputMode('controller');
6632
+ xrDevice.primaryInputMode = 'controller';
6633
+ }
6634
+ }, 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: () => {
6386
6635
  xrDevice.sem.planesVisible = !planesVisible;
6387
6636
  setPlanesVisible(!planesVisible);
6388
6637
  }, children: jsxRuntimeExports.jsx(PlaneIcon, { size: 16, color: planesVisible ? Colors.textWhite : Colors.textGrey }) }), jsxRuntimeExports.jsx(HeaderButton, { title: "Click to toggle visibility of bounding boxes", onClick: () => {
@@ -42197,7 +42446,6 @@ void main() {
42197
42446
  transformHandle.space = 'local';
42198
42447
  this.transformHandles.set(handedness, transformHandle);
42199
42448
  transformHandle.addEventListener('click', () => {
42200
- console.log('click');
42201
42449
  if (transformHandle.userData.mode === 'translate') {
42202
42450
  transformHandle.userData.setMode('rotate');
42203
42451
  }
@@ -42305,8 +42553,11 @@ void main() {
42305
42553
  xrDevice.position.copy(cameraRig.getWorldPosition(this.vec3));
42306
42554
  xrDevice.quaternion.copy(cameraRig.getWorldQuaternion(this.quat));
42307
42555
  transformHandles.forEach((transformHandle, handedness) => {
42308
- xrDevice.controllers[handedness].position.copy(transformHandle.getWorldPosition(this.vec3));
42309
- xrDevice.controllers[handedness].quaternion.copy(transformHandle.getWorldQuaternion(this.quat));
42556
+ const emulatedInput = xrDevice.primaryInputMode === 'controller'
42557
+ ? xrDevice.controllers[handedness]
42558
+ : xrDevice.hands[handedness];
42559
+ emulatedInput.position.copy(transformHandle.getWorldPosition(this.vec3));
42560
+ emulatedInput.quaternion.copy(transformHandle.getWorldQuaternion(this.quat));
42310
42561
  });
42311
42562
  }
42312
42563
  renderScene(time) {
@@ -42368,7 +42619,7 @@ void main() {
42368
42619
  }
42369
42620
  }
42370
42621
 
42371
- const VERSION = "1.0.1";
42622
+ const VERSION = "1.1.0";
42372
42623
 
42373
42624
  var client = {};
42374
42625
 
@@ -42802,6 +43053,7 @@ void main() {
42802
43053
  constructor(xrDevice) {
42803
43054
  this.version = VERSION;
42804
43055
  xrDevice.ipd = 0;
43056
+ useInputModeStore.getState().setInputMode(xrDevice.primaryInputMode);
42805
43057
  this.devUIContainer = document.createElement('div');
42806
43058
  this.devUIContainer.style.position = 'fixed';
42807
43059
  this.devUIContainer.style.width = '100vw';