@almadar/std 16.241.0 → 16.243.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 (109) hide show
  1. package/behaviors/behaviors-registry.json +4650 -535
  2. package/behaviors/lolo/agent/atoms/std-agent-memory.lolo +38 -1
  3. package/behaviors/lolo/agent/atoms/std-agent-session.lolo +1074 -47
  4. package/behaviors/lolo/agent/atoms/std-agent-tool-loop.lolo +8 -7
  5. package/behaviors/lolo/agent/organisms/std-agent-assistant.lolo +56 -37
  6. package/behaviors/lolo/infra/atoms/std-page-open.lolo +59 -0
  7. package/behaviors/lolo/infra/atoms/std-page-search.lolo +136 -0
  8. package/behaviors/lolo/infra/atoms/std-page-treat.lolo +59 -0
  9. package/behaviors/lolo/infra/atoms/std-page-watch.lolo +88 -0
  10. package/behaviors/lolo/ui/core/atoms/std-book-reader.lolo +25 -1
  11. package/behaviors/lolo/ui/core/atoms/std-card-grid.lolo +9 -0
  12. package/behaviors/lolo/ui/core/atoms/std-doc-page.lolo +153 -0
  13. package/behaviors/lolo/ui/learning/atoms/std-learn-arrangement.lolo +124 -92
  14. package/behaviors/lolo/ui/learning/atoms/std-learn-classify.lolo +114 -55
  15. package/behaviors/lolo/ui/learning/atoms/std-learn-compare.lolo +40 -14
  16. package/behaviors/lolo/ui/learning/atoms/std-learn-coupled-sim.lolo +363 -123
  17. package/behaviors/lolo/ui/learning/atoms/std-learn-derivation.lolo +93 -48
  18. package/behaviors/lolo/ui/learning/atoms/std-learn-diagram.lolo +60 -28
  19. package/behaviors/lolo/ui/learning/atoms/std-learn-doser.lolo +193 -96
  20. package/behaviors/lolo/ui/learning/atoms/std-learn-estimate.lolo +75 -32
  21. package/behaviors/lolo/ui/learning/atoms/std-learn-goal-seek.lolo +142 -86
  22. package/behaviors/lolo/ui/learning/atoms/std-learn-grid-sim.lolo +266 -98
  23. package/behaviors/lolo/ui/learning/atoms/std-learn-hotspot.lolo +103 -65
  24. package/behaviors/lolo/ui/learning/atoms/std-learn-live-sim.lolo +223 -109
  25. package/behaviors/lolo/ui/learning/atoms/std-learn-measure.lolo +232 -64
  26. package/behaviors/lolo/ui/learning/atoms/std-learn-param-explorer.lolo +69 -29
  27. package/behaviors/lolo/ui/learning/atoms/std-learn-perturb.lolo +363 -123
  28. package/behaviors/lolo/ui/learning/atoms/std-learn-predict.lolo +73 -41
  29. package/behaviors/lolo/ui/learning/atoms/std-learn-sample-accumulator.lolo +96 -38
  30. package/behaviors/lolo/ui/learning/atoms/std-learn-sandbox.lolo +65 -45
  31. package/behaviors/lolo/ui/learning/atoms/std-learn-scatter-fit.lolo +243 -117
  32. package/behaviors/lolo/ui/learning/atoms/std-learn-scenario.lolo +76 -28
  33. package/behaviors/lolo/ui/learning/atoms/std-learn-sim-3d.lolo +228 -109
  34. package/behaviors/lolo/ui/learning/atoms/std-learn-speed-drill.lolo +95 -44
  35. package/behaviors/lolo/ui/learning/atoms/std-learn-stepper.lolo +199 -125
  36. package/behaviors/lolo/ui/learning/atoms/std-learn-tour-3d.lolo +92 -48
  37. package/behaviors/lolo/ui/learning/atoms/std-learn-trace-player.lolo +239 -78
  38. package/behaviors/lolo/ui/learning/atoms/std-learn-transport.lolo +147 -38
  39. package/behaviors/lolo/ui/learning/atoms/std-learn-tree.lolo +123 -58
  40. package/behaviors/lolo/ui/learning/atoms/ui-algo-graph-canvas.lolo +22 -0
  41. package/behaviors/lolo/ui/learning/atoms/ui-algorithm-canvas.lolo +26 -0
  42. package/behaviors/lolo/ui/learning/atoms/ui-biology-canvas.lolo +26 -0
  43. package/behaviors/lolo/ui/learning/atoms/ui-chemistry-canvas.lolo +27 -1
  44. package/behaviors/lolo/ui/learning/atoms/ui-learning-canvas.lolo +27 -1
  45. package/behaviors/lolo/ui/learning/atoms/ui-math-canvas.lolo +29 -9
  46. package/behaviors/lolo/ui/learning/atoms/ui-physics-canvas.lolo +26 -0
  47. package/behaviors/lolo-behavior-contracts.json +1 -1
  48. package/behaviors/registry/agent/atoms/std-agent-memory.orb +372 -2
  49. package/behaviors/registry/agent/atoms/std-agent-session.orb +4752 -348
  50. package/behaviors/registry/agent/atoms/std-agent-tool-loop.orb +54 -42
  51. package/behaviors/registry/agent/organisms/std-agent-assistant.orb +356 -122
  52. package/behaviors/registry/factory-signatures.json +1 -1
  53. package/behaviors/registry/infra/atoms/std-page-open.orb +435 -0
  54. package/behaviors/registry/infra/atoms/std-page-search.orb +885 -0
  55. package/behaviors/registry/infra/atoms/std-page-treat.orb +494 -0
  56. package/behaviors/registry/infra/atoms/std-page-watch.orb +572 -0
  57. package/behaviors/registry/ui/core/atoms/std-book-reader.orb +119 -0
  58. package/behaviors/registry/ui/core/atoms/std-card-grid.orb +61 -0
  59. package/behaviors/registry/ui/core/atoms/std-doc-page.orb +594 -0
  60. package/behaviors/registry/ui/learning/atoms/std-learn-arrangement.orb +903 -369
  61. package/behaviors/registry/ui/learning/atoms/std-learn-classify.orb +1002 -232
  62. package/behaviors/registry/ui/learning/atoms/std-learn-compare.orb +253 -74
  63. package/behaviors/registry/ui/learning/atoms/std-learn-coupled-sim.orb +3624 -921
  64. package/behaviors/registry/ui/learning/atoms/std-learn-derivation.orb +685 -144
  65. package/behaviors/registry/ui/learning/atoms/std-learn-diagram.orb +404 -52
  66. package/behaviors/registry/ui/learning/atoms/std-learn-doser.orb +1787 -210
  67. package/behaviors/registry/ui/learning/atoms/std-learn-estimate.orb +699 -71
  68. package/behaviors/registry/ui/learning/atoms/std-learn-goal-seek.orb +1102 -578
  69. package/behaviors/registry/ui/learning/atoms/std-learn-grid-sim.orb +2760 -872
  70. package/behaviors/registry/ui/learning/atoms/std-learn-hotspot.orb +689 -152
  71. package/behaviors/registry/ui/learning/atoms/std-learn-live-sim.orb +1431 -633
  72. package/behaviors/registry/ui/learning/atoms/std-learn-measure.orb +2485 -512
  73. package/behaviors/registry/ui/learning/atoms/std-learn-param-explorer.orb +501 -197
  74. package/behaviors/registry/ui/learning/atoms/std-learn-perturb.orb +3642 -928
  75. package/behaviors/registry/ui/learning/atoms/std-learn-predict.orb +705 -125
  76. package/behaviors/registry/ui/learning/atoms/std-learn-sample-accumulator.orb +624 -114
  77. package/behaviors/registry/ui/learning/atoms/std-learn-sandbox.orb +405 -153
  78. package/behaviors/registry/ui/learning/atoms/std-learn-scatter-fit.orb +1911 -611
  79. package/behaviors/registry/ui/learning/atoms/std-learn-scenario.orb +436 -128
  80. package/behaviors/registry/ui/learning/atoms/std-learn-sim-3d.orb +2482 -485
  81. package/behaviors/registry/ui/learning/atoms/std-learn-speed-drill.orb +896 -192
  82. package/behaviors/registry/ui/learning/atoms/std-learn-stepper.orb +2001 -759
  83. package/behaviors/registry/ui/learning/atoms/std-learn-tour-3d.orb +734 -228
  84. package/behaviors/registry/ui/learning/atoms/std-learn-trace-player.orb +2501 -764
  85. package/behaviors/registry/ui/learning/atoms/std-learn-transport.orb +1591 -173
  86. package/behaviors/registry/ui/learning/atoms/std-learn-tree.orb +883 -122
  87. package/behaviors/registry/ui/learning/atoms/ui-algo-graph-canvas.orb +176 -0
  88. package/behaviors/registry/ui/learning/atoms/ui-algorithm-canvas.orb +211 -0
  89. package/behaviors/registry/ui/learning/atoms/ui-biology-canvas.orb +211 -0
  90. package/behaviors/registry/ui/learning/atoms/ui-chemistry-canvas.orb +212 -1
  91. package/behaviors/registry/ui/learning/atoms/ui-learning-canvas.orb +212 -1
  92. package/behaviors/registry/ui/learning/atoms/ui-math-canvas.orb +203 -9
  93. package/behaviors/registry/ui/learning/atoms/ui-physics-canvas.orb +211 -0
  94. package/behaviors/signatures.lolo +325 -655
  95. package/dist/behaviors/exports-reader.js +16092 -9747
  96. package/dist/behaviors/functions/index.d.ts +1052 -136
  97. package/dist/behaviors/functions/index.js +16063 -9745
  98. package/dist/behaviors/index.d.ts +1 -1
  99. package/dist/behaviors/index.js +16093 -9748
  100. package/dist/behaviors/query.js +16092 -9747
  101. package/dist/behaviors-embeddings.hash.json +3 -3
  102. package/dist/behaviors-embeddings.json +45 -25
  103. package/dist/behaviors-registry.json +4650 -535
  104. package/dist/index.d.ts +1 -1
  105. package/dist/index.js +16093 -9748
  106. package/dist/knob-embeddings.hash.json +3 -3
  107. package/dist/knob-embeddings.json +607 -263
  108. package/dist/registry/factory-signatures.json +1 -1
  109. package/package.json +3 -3
package/behaviors/registry/ui/learning/atoms/std-learn-live-sim.orb CHANGED
@@ -91,6 +91,15 @@
91
91
  "parent": "trt_01M055GQ2YKEPWZ35KVYNSCRGC",
92
92
  "renames": []
93
93
  },
94
+ "evt_01M41KVGQQZA8MVJB3B34CH9FH": {
95
+ "bakedName": "TOGGLE_RUN",
96
+ "curName": "TOGGLE_RUN",
97
+ "id": "evt_01M41KVGQQZA8MVJB3B34CH9FH",
98
+ "kind": "event",
99
+ "owner": "workspace",
100
+ "parent": "trt_01M055GQ2YKEPWZ35KVYNSCRGC",
101
+ "renames": []
102
+ },
94
103
  "orb_01M055GQ2Y935GEHYW54KNWCS4": {
95
104
  "bakedName": "LearnLiveSimOrbital",
96
105
  "curName": "LearnLiveSimOrbital",
@@ -231,7 +240,8 @@
231
240
  "category": "interaction",
232
241
  "config": {
233
242
  "backgroundColor": {
234
- "default": "#f8fafc",
243
+ "default": "",
244
+ "description": "Canvas ground override; empty uses the theme's drawing ground.",
235
245
  "label": "Background Color",
236
246
  "tier": "presentation",
237
247
  "type": "string"
@@ -239,7 +249,7 @@
239
249
  "bodies": {
240
250
  "default": [
241
251
  {
242
- "color": "#2563eb",
252
+ "color": "series-1",
243
253
  "id": "ball-a",
244
254
  "radius": 14.0,
245
255
  "vx": 4.0,
@@ -248,7 +258,7 @@
248
258
  "y": 60.0
249
259
  },
250
260
  {
251
- "color": "#16a34a",
261
+ "color": "series-2",
252
262
  "id": "ball-b",
253
263
  "radius": 18.0,
254
264
  "vx": -3.0,
@@ -257,7 +267,7 @@
257
267
  "y": 90.0
258
268
  },
259
269
  {
260
- "color": "#f59e0b",
270
+ "color": "series-3",
261
271
  "id": "ball-c",
262
272
  "radius": 11.0,
263
273
  "vx": 2.0,
@@ -360,9 +370,16 @@
360
370
  "tier": "presentation",
361
371
  "type": "boolean"
362
372
  },
373
+ "summary": {
374
+ "default": "",
375
+ "description": "One line under the title saying what the learner is looking at (keep it under ~65 characters). Empty shows no line.",
376
+ "label": "Concept",
377
+ "tier": "presentation",
378
+ "type": "string"
379
+ },
363
380
  "title": {
364
381
  "default": "Live Sim",
365
- "description": "Title shown above the instrument.",
382
+ "description": "The instrument's name, the header's one hero.",
366
383
  "label": "Title",
367
384
  "tier": "presentation",
368
385
  "type": "string"
@@ -524,6 +541,13 @@
524
541
  ],
525
542
  "tier": "domain"
526
543
  },
544
+ {
545
+ "description": "Learner pressed the Play/Pause toggle — flips the running flag.",
546
+ "id": "evt_01M41KVGQQZA8MVJB3B34CH9FH",
547
+ "key": "TOGGLE_RUN",
548
+ "name": "Toggle Run",
549
+ "tier": "domain"
550
+ },
527
551
  {
528
552
  "description": "Learner pressed Run — the tick begins integrating gravity, damping, and wall bounce for every body.",
529
553
  "id": "evt_01M055GQ31V99AD3X5BSGZ50SQ",
@@ -657,125 +681,187 @@
657
681
  {
658
682
  "children": [
659
683
  {
660
- "content": "@entity.title",
661
- "type": "typography",
662
- "variant": "h4"
663
- },
664
- {
684
+ "align": "start",
665
685
  "children": [
666
686
  {
667
- "action": "RUN",
668
- "disabled": [
669
- "if",
670
- "@entity.running",
671
- true,
672
- false
687
+ "children": [
688
+ {
689
+ "content": "@entity.title",
690
+ "type": "typography",
691
+ "variant": "h4"
692
+ },
693
+ [
694
+ "if",
695
+ [
696
+ "==",
697
+ "@config.summary",
698
+ ""
699
+ ],
700
+ null,
701
+ {
702
+ "color": "muted",
703
+ "content": "@config.summary",
704
+ "type": "typography",
705
+ "variant": "body2"
706
+ }
707
+ ]
673
708
  ],
674
- "label": "Run",
675
- "type": "button",
676
- "variant": "primary"
709
+ "direction": "vertical",
710
+ "gap": "xs",
711
+ "type": "stack"
677
712
  },
678
713
  {
679
- "action": "PAUSE",
680
- "disabled": [
714
+ "label": [
681
715
  "if",
682
716
  "@entity.running",
683
- false,
684
- true
717
+ "Running",
718
+ "Paused"
685
719
  ],
686
- "label": "Pause",
687
- "type": "button",
688
- "variant": "secondary"
689
- },
690
- {
691
- "action": "RESET",
692
- "label": "Reset",
693
- "type": "button",
694
- "variant": "ghost"
720
+ "type": "badge",
721
+ "variant": [
722
+ "if",
723
+ "@entity.running",
724
+ "primary",
725
+ "neutral"
726
+ ]
695
727
  }
696
728
  ],
697
729
  "direction": "horizontal",
698
- "gap": "sm",
730
+ "gap": "md",
731
+ "justify": "between",
699
732
  "type": "stack"
700
733
  },
701
734
  {
735
+ "align": "center",
702
736
  "children": [
737
+ [
738
+ "if",
739
+ "@entity.running",
740
+ {
741
+ "action": "TOGGLE_RUN",
742
+ "aria-pressed": "true",
743
+ "icon": "pause",
744
+ "label": "Pause",
745
+ "type": "button",
746
+ "variant": "primary"
747
+ },
748
+ {
749
+ "action": "TOGGLE_RUN",
750
+ "aria-pressed": "false",
751
+ "icon": "play",
752
+ "label": "Play",
753
+ "type": "button",
754
+ "variant": "primary"
755
+ }
756
+ ],
703
757
  {
704
- "content": [
705
- "str/concat",
706
- "Gravity: ",
707
- [
708
- "math/round",
709
- "@entity.gravity",
710
- 2.0
711
- ]
712
- ],
713
- "type": "typography",
714
- "variant": "caption"
758
+ "action": "RESET",
759
+ "icon": "rotate-ccw",
760
+ "label": "Reset",
761
+ "type": "button",
762
+ "variant": "ghost"
715
763
  },
716
764
  {
717
- "action": "SET_GRAVITY",
718
- "max": 1.5,
719
- "min": -1.0,
720
- "showTooltip": true,
721
- "step": 0.05,
722
- "type": "range-slider",
723
- "value": "@entity.gravity"
724
- }
725
- ],
726
- "direction": "vertical",
727
- "gap": "xs",
728
- "type": "stack"
729
- },
730
- {
731
- "children": [
732
- {
765
+ "color": "muted",
733
766
  "content": [
734
767
  "str/concat",
735
- "Damping: ",
736
- [
737
- "math/round",
738
- "@entity.damping",
739
- 3.0
740
- ]
768
+ "Tick ",
769
+ "@entity.tickCount"
741
770
  ],
742
771
  "type": "typography",
743
772
  "variant": "caption"
744
- },
745
- {
746
- "action": "SET_DAMPING",
747
- "max": 1.0,
748
- "min": 0.9,
749
- "showTooltip": true,
750
- "step": 0.005,
751
- "type": "range-slider",
752
- "value": "@entity.damping"
753
773
  }
754
774
  ],
755
- "direction": "vertical",
756
- "gap": "xs",
757
- "type": "stack"
775
+ "direction": "horizontal",
776
+ "gap": "sm",
777
+ "type": "stack",
778
+ "wrap": true
758
779
  },
759
780
  {
760
781
  "backgroundColor": "@config.backgroundColor",
761
782
  "bodies": "@entity.bodies",
762
783
  "height": "@config.height",
784
+ "keyMap": {
785
+ "KeyR": "RESET",
786
+ "Space": "TOGGLE_RUN"
787
+ },
763
788
  "showForces": false,
764
789
  "showVelocity": "@config.showVelocity",
765
790
  "type": "physics-canvas",
766
791
  "velocityScale": "@config.velocityScale",
767
792
  "width": "@config.width"
768
793
  },
794
+ {
795
+ "children": [
796
+ {
797
+ "children": [
798
+ {
799
+ "color": "muted",
800
+ "content": [
801
+ "str/concat",
802
+ "Gravity: ",
803
+ [
804
+ "math/round",
805
+ "@entity.gravity",
806
+ 2.0
807
+ ]
808
+ ],
809
+ "type": "typography",
810
+ "variant": "caption"
811
+ },
812
+ {
813
+ "action": "SET_GRAVITY",
814
+ "max": 1.5,
815
+ "min": -1.0,
816
+ "showTooltip": true,
817
+ "step": 0.05,
818
+ "type": "range-slider",
819
+ "value": "@entity.gravity"
820
+ }
821
+ ],
822
+ "direction": "vertical",
823
+ "gap": "xs",
824
+ "type": "stack"
825
+ },
826
+ {
827
+ "children": [
828
+ {
829
+ "color": "muted",
830
+ "content": [
831
+ "str/concat",
832
+ "Damping: ",
833
+ [
834
+ "math/round",
835
+ "@entity.damping",
836
+ 3.0
837
+ ]
838
+ ],
839
+ "type": "typography",
840
+ "variant": "caption"
841
+ },
842
+ {
843
+ "action": "SET_DAMPING",
844
+ "max": 1.0,
845
+ "min": 0.9,
846
+ "showTooltip": true,
847
+ "step": 0.005,
848
+ "type": "range-slider",
849
+ "value": "@entity.damping"
850
+ }
851
+ ],
852
+ "direction": "vertical",
853
+ "gap": "xs",
854
+ "type": "stack"
855
+ }
856
+ ],
857
+ "direction": "vertical",
858
+ "gap": "sm",
859
+ "type": "stack"
860
+ },
769
861
  {
770
862
  "content": [
771
863
  "str/concat",
772
- "Tick ",
773
- [
774
- "str/concat",
775
- "",
776
- "@entity.tickCount"
777
- ],
778
- " · sample speed ",
864
+ "Sample body speed ",
779
865
  [
780
866
  "math/round",
781
867
  "@entity.sampleSpeed",
@@ -806,6 +892,48 @@
806
892
  ],
807
893
  "to": "idle"
808
894
  },
895
+ {
896
+ "effects": [
897
+ [
898
+ "set",
899
+ "@entity.active",
900
+ false
901
+ ],
902
+ [
903
+ "set",
904
+ "@entity.running",
905
+ false
906
+ ],
907
+ [
908
+ "render-ui",
909
+ "main",
910
+ null
911
+ ]
912
+ ],
913
+ "event": "MODE_SELECTED",
914
+ "eventId": "evt_01M055GQ31CXPPY57H8M8MZEZ1",
915
+ "from": "idle",
916
+ "guard": [
917
+ "and",
918
+ [
919
+ "not",
920
+ [
921
+ "==",
922
+ "@config.matchMode",
923
+ ""
924
+ ]
925
+ ],
926
+ [
927
+ "not",
928
+ [
929
+ "==",
930
+ "@payload.mode",
931
+ "@config.matchMode"
932
+ ]
933
+ ]
934
+ ],
935
+ "to": "idle"
936
+ },
809
937
  {
810
938
  "effects": [
811
939
  [
@@ -856,125 +984,187 @@
856
984
  {
857
985
  "children": [
858
986
  {
859
- "content": "@entity.title",
860
- "type": "typography",
861
- "variant": "h4"
862
- },
863
- {
987
+ "align": "start",
864
988
  "children": [
865
989
  {
866
- "action": "RUN",
867
- "disabled": [
868
- "if",
869
- "@entity.running",
870
- true,
871
- false
990
+ "children": [
991
+ {
992
+ "content": "@entity.title",
993
+ "type": "typography",
994
+ "variant": "h4"
995
+ },
996
+ [
997
+ "if",
998
+ [
999
+ "==",
1000
+ "@config.summary",
1001
+ ""
1002
+ ],
1003
+ null,
1004
+ {
1005
+ "color": "muted",
1006
+ "content": "@config.summary",
1007
+ "type": "typography",
1008
+ "variant": "body2"
1009
+ }
1010
+ ]
872
1011
  ],
873
- "label": "Run",
874
- "type": "button",
875
- "variant": "primary"
1012
+ "direction": "vertical",
1013
+ "gap": "xs",
1014
+ "type": "stack"
876
1015
  },
877
1016
  {
878
- "action": "PAUSE",
879
- "disabled": [
1017
+ "label": [
880
1018
  "if",
881
1019
  "@entity.running",
882
- false,
883
- true
1020
+ "Running",
1021
+ "Paused"
884
1022
  ],
885
- "label": "Pause",
886
- "type": "button",
887
- "variant": "secondary"
888
- },
889
- {
890
- "action": "RESET",
891
- "label": "Reset",
892
- "type": "button",
893
- "variant": "ghost"
1023
+ "type": "badge",
1024
+ "variant": [
1025
+ "if",
1026
+ "@entity.running",
1027
+ "primary",
1028
+ "neutral"
1029
+ ]
894
1030
  }
895
1031
  ],
896
1032
  "direction": "horizontal",
897
- "gap": "sm",
1033
+ "gap": "md",
1034
+ "justify": "between",
898
1035
  "type": "stack"
899
1036
  },
900
1037
  {
1038
+ "align": "center",
901
1039
  "children": [
1040
+ [
1041
+ "if",
1042
+ "@entity.running",
1043
+ {
1044
+ "action": "TOGGLE_RUN",
1045
+ "aria-pressed": "true",
1046
+ "icon": "pause",
1047
+ "label": "Pause",
1048
+ "type": "button",
1049
+ "variant": "primary"
1050
+ },
1051
+ {
1052
+ "action": "TOGGLE_RUN",
1053
+ "aria-pressed": "false",
1054
+ "icon": "play",
1055
+ "label": "Play",
1056
+ "type": "button",
1057
+ "variant": "primary"
1058
+ }
1059
+ ],
902
1060
  {
903
- "content": [
904
- "str/concat",
905
- "Gravity: ",
906
- [
907
- "math/round",
908
- "@entity.gravity",
909
- 2.0
910
- ]
911
- ],
912
- "type": "typography",
913
- "variant": "caption"
1061
+ "action": "RESET",
1062
+ "icon": "rotate-ccw",
1063
+ "label": "Reset",
1064
+ "type": "button",
1065
+ "variant": "ghost"
914
1066
  },
915
1067
  {
916
- "action": "SET_GRAVITY",
917
- "max": 1.5,
918
- "min": -1.0,
919
- "showTooltip": true,
920
- "step": 0.05,
921
- "type": "range-slider",
922
- "value": "@entity.gravity"
923
- }
924
- ],
925
- "direction": "vertical",
926
- "gap": "xs",
927
- "type": "stack"
928
- },
929
- {
930
- "children": [
931
- {
1068
+ "color": "muted",
932
1069
  "content": [
933
1070
  "str/concat",
934
- "Damping: ",
935
- [
936
- "math/round",
937
- "@entity.damping",
938
- 3.0
939
- ]
1071
+ "Tick ",
1072
+ "@entity.tickCount"
940
1073
  ],
941
1074
  "type": "typography",
942
1075
  "variant": "caption"
943
- },
944
- {
945
- "action": "SET_DAMPING",
946
- "max": 1.0,
947
- "min": 0.9,
948
- "showTooltip": true,
949
- "step": 0.005,
950
- "type": "range-slider",
951
- "value": "@entity.damping"
952
1076
  }
953
1077
  ],
954
- "direction": "vertical",
955
- "gap": "xs",
956
- "type": "stack"
1078
+ "direction": "horizontal",
1079
+ "gap": "sm",
1080
+ "type": "stack",
1081
+ "wrap": true
957
1082
  },
958
1083
  {
959
1084
  "backgroundColor": "@config.backgroundColor",
960
1085
  "bodies": "@entity.bodies",
961
1086
  "height": "@config.height",
1087
+ "keyMap": {
1088
+ "KeyR": "RESET",
1089
+ "Space": "TOGGLE_RUN"
1090
+ },
962
1091
  "showForces": false,
963
1092
  "showVelocity": "@config.showVelocity",
964
1093
  "type": "physics-canvas",
965
1094
  "velocityScale": "@config.velocityScale",
966
1095
  "width": "@config.width"
967
1096
  },
1097
+ {
1098
+ "children": [
1099
+ {
1100
+ "children": [
1101
+ {
1102
+ "color": "muted",
1103
+ "content": [
1104
+ "str/concat",
1105
+ "Gravity: ",
1106
+ [
1107
+ "math/round",
1108
+ "@entity.gravity",
1109
+ 2.0
1110
+ ]
1111
+ ],
1112
+ "type": "typography",
1113
+ "variant": "caption"
1114
+ },
1115
+ {
1116
+ "action": "SET_GRAVITY",
1117
+ "max": 1.5,
1118
+ "min": -1.0,
1119
+ "showTooltip": true,
1120
+ "step": 0.05,
1121
+ "type": "range-slider",
1122
+ "value": "@entity.gravity"
1123
+ }
1124
+ ],
1125
+ "direction": "vertical",
1126
+ "gap": "xs",
1127
+ "type": "stack"
1128
+ },
1129
+ {
1130
+ "children": [
1131
+ {
1132
+ "color": "muted",
1133
+ "content": [
1134
+ "str/concat",
1135
+ "Damping: ",
1136
+ [
1137
+ "math/round",
1138
+ "@entity.damping",
1139
+ 3.0
1140
+ ]
1141
+ ],
1142
+ "type": "typography",
1143
+ "variant": "caption"
1144
+ },
1145
+ {
1146
+ "action": "SET_DAMPING",
1147
+ "max": 1.0,
1148
+ "min": 0.9,
1149
+ "showTooltip": true,
1150
+ "step": 0.005,
1151
+ "type": "range-slider",
1152
+ "value": "@entity.damping"
1153
+ }
1154
+ ],
1155
+ "direction": "vertical",
1156
+ "gap": "xs",
1157
+ "type": "stack"
1158
+ }
1159
+ ],
1160
+ "direction": "vertical",
1161
+ "gap": "sm",
1162
+ "type": "stack"
1163
+ },
968
1164
  {
969
1165
  "content": [
970
1166
  "str/concat",
971
- "Tick ",
972
- [
973
- "str/concat",
974
- "",
975
- "@entity.tickCount"
976
- ],
977
- " · sample speed ",
1167
+ "Sample body speed ",
978
1168
  [
979
1169
  "math/round",
980
1170
  "@entity.sampleSpeed",
@@ -1010,7 +1200,10 @@
1010
1200
  [
1011
1201
  "set",
1012
1202
  "@entity.running",
1013
- true
1203
+ [
1204
+ "not",
1205
+ "@entity.running"
1206
+ ]
1014
1207
  ],
1015
1208
  [
1016
1209
  "render-ui",
@@ -1020,125 +1213,187 @@
1020
1213
  {
1021
1214
  "children": [
1022
1215
  {
1023
- "content": "@entity.title",
1024
- "type": "typography",
1025
- "variant": "h4"
1026
- },
1027
- {
1216
+ "align": "start",
1028
1217
  "children": [
1029
1218
  {
1030
- "action": "RUN",
1031
- "disabled": [
1032
- "if",
1033
- "@entity.running",
1034
- true,
1035
- false
1219
+ "children": [
1220
+ {
1221
+ "content": "@entity.title",
1222
+ "type": "typography",
1223
+ "variant": "h4"
1224
+ },
1225
+ [
1226
+ "if",
1227
+ [
1228
+ "==",
1229
+ "@config.summary",
1230
+ ""
1231
+ ],
1232
+ null,
1233
+ {
1234
+ "color": "muted",
1235
+ "content": "@config.summary",
1236
+ "type": "typography",
1237
+ "variant": "body2"
1238
+ }
1239
+ ]
1036
1240
  ],
1037
- "label": "Run",
1038
- "type": "button",
1039
- "variant": "primary"
1241
+ "direction": "vertical",
1242
+ "gap": "xs",
1243
+ "type": "stack"
1040
1244
  },
1041
1245
  {
1042
- "action": "PAUSE",
1043
- "disabled": [
1246
+ "label": [
1044
1247
  "if",
1045
1248
  "@entity.running",
1046
- false,
1047
- true
1249
+ "Running",
1250
+ "Paused"
1048
1251
  ],
1049
- "label": "Pause",
1050
- "type": "button",
1051
- "variant": "secondary"
1052
- },
1053
- {
1054
- "action": "RESET",
1055
- "label": "Reset",
1056
- "type": "button",
1057
- "variant": "ghost"
1252
+ "type": "badge",
1253
+ "variant": [
1254
+ "if",
1255
+ "@entity.running",
1256
+ "primary",
1257
+ "neutral"
1258
+ ]
1058
1259
  }
1059
1260
  ],
1060
1261
  "direction": "horizontal",
1061
- "gap": "sm",
1262
+ "gap": "md",
1263
+ "justify": "between",
1062
1264
  "type": "stack"
1063
1265
  },
1064
1266
  {
1267
+ "align": "center",
1065
1268
  "children": [
1269
+ [
1270
+ "if",
1271
+ "@entity.running",
1272
+ {
1273
+ "action": "TOGGLE_RUN",
1274
+ "aria-pressed": "true",
1275
+ "icon": "pause",
1276
+ "label": "Pause",
1277
+ "type": "button",
1278
+ "variant": "primary"
1279
+ },
1280
+ {
1281
+ "action": "TOGGLE_RUN",
1282
+ "aria-pressed": "false",
1283
+ "icon": "play",
1284
+ "label": "Play",
1285
+ "type": "button",
1286
+ "variant": "primary"
1287
+ }
1288
+ ],
1066
1289
  {
1067
- "content": [
1068
- "str/concat",
1069
- "Gravity: ",
1070
- [
1071
- "math/round",
1072
- "@entity.gravity",
1073
- 2.0
1074
- ]
1075
- ],
1076
- "type": "typography",
1077
- "variant": "caption"
1290
+ "action": "RESET",
1291
+ "icon": "rotate-ccw",
1292
+ "label": "Reset",
1293
+ "type": "button",
1294
+ "variant": "ghost"
1078
1295
  },
1079
1296
  {
1080
- "action": "SET_GRAVITY",
1081
- "max": 1.5,
1082
- "min": -1.0,
1083
- "showTooltip": true,
1084
- "step": 0.05,
1085
- "type": "range-slider",
1086
- "value": "@entity.gravity"
1087
- }
1088
- ],
1089
- "direction": "vertical",
1090
- "gap": "xs",
1091
- "type": "stack"
1092
- },
1093
- {
1094
- "children": [
1095
- {
1297
+ "color": "muted",
1096
1298
  "content": [
1097
1299
  "str/concat",
1098
- "Damping: ",
1099
- [
1100
- "math/round",
1101
- "@entity.damping",
1102
- 3.0
1103
- ]
1300
+ "Tick ",
1301
+ "@entity.tickCount"
1104
1302
  ],
1105
1303
  "type": "typography",
1106
1304
  "variant": "caption"
1107
- },
1108
- {
1109
- "action": "SET_DAMPING",
1110
- "max": 1.0,
1111
- "min": 0.9,
1112
- "showTooltip": true,
1113
- "step": 0.005,
1114
- "type": "range-slider",
1115
- "value": "@entity.damping"
1116
1305
  }
1117
1306
  ],
1118
- "direction": "vertical",
1119
- "gap": "xs",
1120
- "type": "stack"
1307
+ "direction": "horizontal",
1308
+ "gap": "sm",
1309
+ "type": "stack",
1310
+ "wrap": true
1121
1311
  },
1122
1312
  {
1123
1313
  "backgroundColor": "@config.backgroundColor",
1124
1314
  "bodies": "@entity.bodies",
1125
1315
  "height": "@config.height",
1316
+ "keyMap": {
1317
+ "KeyR": "RESET",
1318
+ "Space": "TOGGLE_RUN"
1319
+ },
1126
1320
  "showForces": false,
1127
1321
  "showVelocity": "@config.showVelocity",
1128
1322
  "type": "physics-canvas",
1129
1323
  "velocityScale": "@config.velocityScale",
1130
1324
  "width": "@config.width"
1131
1325
  },
1326
+ {
1327
+ "children": [
1328
+ {
1329
+ "children": [
1330
+ {
1331
+ "color": "muted",
1332
+ "content": [
1333
+ "str/concat",
1334
+ "Gravity: ",
1335
+ [
1336
+ "math/round",
1337
+ "@entity.gravity",
1338
+ 2.0
1339
+ ]
1340
+ ],
1341
+ "type": "typography",
1342
+ "variant": "caption"
1343
+ },
1344
+ {
1345
+ "action": "SET_GRAVITY",
1346
+ "max": 1.5,
1347
+ "min": -1.0,
1348
+ "showTooltip": true,
1349
+ "step": 0.05,
1350
+ "type": "range-slider",
1351
+ "value": "@entity.gravity"
1352
+ }
1353
+ ],
1354
+ "direction": "vertical",
1355
+ "gap": "xs",
1356
+ "type": "stack"
1357
+ },
1358
+ {
1359
+ "children": [
1360
+ {
1361
+ "color": "muted",
1362
+ "content": [
1363
+ "str/concat",
1364
+ "Damping: ",
1365
+ [
1366
+ "math/round",
1367
+ "@entity.damping",
1368
+ 3.0
1369
+ ]
1370
+ ],
1371
+ "type": "typography",
1372
+ "variant": "caption"
1373
+ },
1374
+ {
1375
+ "action": "SET_DAMPING",
1376
+ "max": 1.0,
1377
+ "min": 0.9,
1378
+ "showTooltip": true,
1379
+ "step": 0.005,
1380
+ "type": "range-slider",
1381
+ "value": "@entity.damping"
1382
+ }
1383
+ ],
1384
+ "direction": "vertical",
1385
+ "gap": "xs",
1386
+ "type": "stack"
1387
+ }
1388
+ ],
1389
+ "direction": "vertical",
1390
+ "gap": "sm",
1391
+ "type": "stack"
1392
+ },
1132
1393
  {
1133
1394
  "content": [
1134
1395
  "str/concat",
1135
- "Tick ",
1136
- [
1137
- "str/concat",
1138
- "",
1139
- "@entity.tickCount"
1140
- ],
1141
- " · sample speed ",
1396
+ "Sample body speed ",
1142
1397
  [
1143
1398
  "math/round",
1144
1399
  "@entity.sampleSpeed",
@@ -1166,8 +1421,8 @@
1166
1421
  }
1167
1422
  ]
1168
1423
  ],
1169
- "event": "RUN",
1170
- "eventId": "evt_01M055GQ31V99AD3X5BSGZ50SQ",
1424
+ "event": "TOGGLE_RUN",
1425
+ "eventId": "evt_01M41KVGQQZA8MVJB3B34CH9FH",
1171
1426
  "from": "idle",
1172
1427
  "guard": [
1173
1428
  "==",
@@ -1181,7 +1436,7 @@
1181
1436
  [
1182
1437
  "set",
1183
1438
  "@entity.running",
1184
- false
1439
+ true
1185
1440
  ],
1186
1441
  [
1187
1442
  "render-ui",
@@ -1191,125 +1446,420 @@
1191
1446
  {
1192
1447
  "children": [
1193
1448
  {
1194
- "content": "@entity.title",
1195
- "type": "typography",
1196
- "variant": "h4"
1197
- },
1198
- {
1449
+ "align": "start",
1199
1450
  "children": [
1200
1451
  {
1201
- "action": "RUN",
1202
- "disabled": [
1203
- "if",
1204
- "@entity.running",
1205
- true,
1206
- false
1452
+ "children": [
1453
+ {
1454
+ "content": "@entity.title",
1455
+ "type": "typography",
1456
+ "variant": "h4"
1457
+ },
1458
+ [
1459
+ "if",
1460
+ [
1461
+ "==",
1462
+ "@config.summary",
1463
+ ""
1464
+ ],
1465
+ null,
1466
+ {
1467
+ "color": "muted",
1468
+ "content": "@config.summary",
1469
+ "type": "typography",
1470
+ "variant": "body2"
1471
+ }
1472
+ ]
1207
1473
  ],
1208
- "label": "Run",
1209
- "type": "button",
1210
- "variant": "primary"
1474
+ "direction": "vertical",
1475
+ "gap": "xs",
1476
+ "type": "stack"
1211
1477
  },
1212
1478
  {
1213
- "action": "PAUSE",
1214
- "disabled": [
1479
+ "label": [
1215
1480
  "if",
1216
1481
  "@entity.running",
1217
- false,
1218
- true
1482
+ "Running",
1483
+ "Paused"
1219
1484
  ],
1220
- "label": "Pause",
1221
- "type": "button",
1222
- "variant": "secondary"
1223
- },
1485
+ "type": "badge",
1486
+ "variant": [
1487
+ "if",
1488
+ "@entity.running",
1489
+ "primary",
1490
+ "neutral"
1491
+ ]
1492
+ }
1493
+ ],
1494
+ "direction": "horizontal",
1495
+ "gap": "md",
1496
+ "justify": "between",
1497
+ "type": "stack"
1498
+ },
1499
+ {
1500
+ "align": "center",
1501
+ "children": [
1502
+ [
1503
+ "if",
1504
+ "@entity.running",
1505
+ {
1506
+ "action": "TOGGLE_RUN",
1507
+ "aria-pressed": "true",
1508
+ "icon": "pause",
1509
+ "label": "Pause",
1510
+ "type": "button",
1511
+ "variant": "primary"
1512
+ },
1513
+ {
1514
+ "action": "TOGGLE_RUN",
1515
+ "aria-pressed": "false",
1516
+ "icon": "play",
1517
+ "label": "Play",
1518
+ "type": "button",
1519
+ "variant": "primary"
1520
+ }
1521
+ ],
1224
1522
  {
1225
1523
  "action": "RESET",
1524
+ "icon": "rotate-ccw",
1226
1525
  "label": "Reset",
1227
1526
  "type": "button",
1228
1527
  "variant": "ghost"
1528
+ },
1529
+ {
1530
+ "color": "muted",
1531
+ "content": [
1532
+ "str/concat",
1533
+ "Tick ",
1534
+ "@entity.tickCount"
1535
+ ],
1536
+ "type": "typography",
1537
+ "variant": "caption"
1229
1538
  }
1230
1539
  ],
1231
1540
  "direction": "horizontal",
1232
1541
  "gap": "sm",
1542
+ "type": "stack",
1543
+ "wrap": true
1544
+ },
1545
+ {
1546
+ "backgroundColor": "@config.backgroundColor",
1547
+ "bodies": "@entity.bodies",
1548
+ "height": "@config.height",
1549
+ "keyMap": {
1550
+ "KeyR": "RESET",
1551
+ "Space": "TOGGLE_RUN"
1552
+ },
1553
+ "showForces": false,
1554
+ "showVelocity": "@config.showVelocity",
1555
+ "type": "physics-canvas",
1556
+ "velocityScale": "@config.velocityScale",
1557
+ "width": "@config.width"
1558
+ },
1559
+ {
1560
+ "children": [
1561
+ {
1562
+ "children": [
1563
+ {
1564
+ "color": "muted",
1565
+ "content": [
1566
+ "str/concat",
1567
+ "Gravity: ",
1568
+ [
1569
+ "math/round",
1570
+ "@entity.gravity",
1571
+ 2.0
1572
+ ]
1573
+ ],
1574
+ "type": "typography",
1575
+ "variant": "caption"
1576
+ },
1577
+ {
1578
+ "action": "SET_GRAVITY",
1579
+ "max": 1.5,
1580
+ "min": -1.0,
1581
+ "showTooltip": true,
1582
+ "step": 0.05,
1583
+ "type": "range-slider",
1584
+ "value": "@entity.gravity"
1585
+ }
1586
+ ],
1587
+ "direction": "vertical",
1588
+ "gap": "xs",
1589
+ "type": "stack"
1590
+ },
1591
+ {
1592
+ "children": [
1593
+ {
1594
+ "color": "muted",
1595
+ "content": [
1596
+ "str/concat",
1597
+ "Damping: ",
1598
+ [
1599
+ "math/round",
1600
+ "@entity.damping",
1601
+ 3.0
1602
+ ]
1603
+ ],
1604
+ "type": "typography",
1605
+ "variant": "caption"
1606
+ },
1607
+ {
1608
+ "action": "SET_DAMPING",
1609
+ "max": 1.0,
1610
+ "min": 0.9,
1611
+ "showTooltip": true,
1612
+ "step": 0.005,
1613
+ "type": "range-slider",
1614
+ "value": "@entity.damping"
1615
+ }
1616
+ ],
1617
+ "direction": "vertical",
1618
+ "gap": "xs",
1619
+ "type": "stack"
1620
+ }
1621
+ ],
1622
+ "direction": "vertical",
1623
+ "gap": "sm",
1233
1624
  "type": "stack"
1234
1625
  },
1235
1626
  {
1627
+ "content": [
1628
+ "str/concat",
1629
+ "Sample body speed ",
1630
+ [
1631
+ "math/round",
1632
+ "@entity.sampleSpeed",
1633
+ 2.0
1634
+ ]
1635
+ ],
1636
+ "type": "typography",
1637
+ "variant": "body"
1638
+ }
1639
+ ],
1640
+ "direction": "vertical",
1641
+ "gap": "md",
1642
+ "type": "stack"
1643
+ }
1644
+ ],
1645
+ "padding": "md",
1646
+ "type": "box"
1647
+ }
1648
+ ],
1649
+ [
1650
+ "emit",
1651
+ "RUN_TOGGLED",
1652
+ {
1653
+ "running": "@entity.running"
1654
+ }
1655
+ ]
1656
+ ],
1657
+ "event": "RUN",
1658
+ "eventId": "evt_01M055GQ31V99AD3X5BSGZ50SQ",
1659
+ "from": "idle",
1660
+ "guard": [
1661
+ "==",
1662
+ "@entity.active",
1663
+ true
1664
+ ],
1665
+ "to": "idle"
1666
+ },
1667
+ {
1668
+ "effects": [
1669
+ [
1670
+ "set",
1671
+ "@entity.running",
1672
+ false
1673
+ ],
1674
+ [
1675
+ "render-ui",
1676
+ "main",
1677
+ {
1678
+ "children": [
1679
+ {
1680
+ "children": [
1681
+ {
1682
+ "align": "start",
1236
1683
  "children": [
1237
1684
  {
1238
- "content": [
1239
- "str/concat",
1240
- "Gravity: ",
1685
+ "children": [
1686
+ {
1687
+ "content": "@entity.title",
1688
+ "type": "typography",
1689
+ "variant": "h4"
1690
+ },
1241
1691
  [
1242
- "math/round",
1243
- "@entity.gravity",
1244
- 2.0
1692
+ "if",
1693
+ [
1694
+ "==",
1695
+ "@config.summary",
1696
+ ""
1697
+ ],
1698
+ null,
1699
+ {
1700
+ "color": "muted",
1701
+ "content": "@config.summary",
1702
+ "type": "typography",
1703
+ "variant": "body2"
1704
+ }
1245
1705
  ]
1246
1706
  ],
1247
- "type": "typography",
1248
- "variant": "caption"
1707
+ "direction": "vertical",
1708
+ "gap": "xs",
1709
+ "type": "stack"
1249
1710
  },
1250
1711
  {
1251
- "action": "SET_GRAVITY",
1252
- "max": 1.5,
1253
- "min": -1.0,
1254
- "showTooltip": true,
1255
- "step": 0.05,
1256
- "type": "range-slider",
1257
- "value": "@entity.gravity"
1712
+ "label": [
1713
+ "if",
1714
+ "@entity.running",
1715
+ "Running",
1716
+ "Paused"
1717
+ ],
1718
+ "type": "badge",
1719
+ "variant": [
1720
+ "if",
1721
+ "@entity.running",
1722
+ "primary",
1723
+ "neutral"
1724
+ ]
1258
1725
  }
1259
1726
  ],
1260
- "direction": "vertical",
1261
- "gap": "xs",
1727
+ "direction": "horizontal",
1728
+ "gap": "md",
1729
+ "justify": "between",
1262
1730
  "type": "stack"
1263
1731
  },
1264
1732
  {
1733
+ "align": "center",
1265
1734
  "children": [
1735
+ [
1736
+ "if",
1737
+ "@entity.running",
1738
+ {
1739
+ "action": "TOGGLE_RUN",
1740
+ "aria-pressed": "true",
1741
+ "icon": "pause",
1742
+ "label": "Pause",
1743
+ "type": "button",
1744
+ "variant": "primary"
1745
+ },
1746
+ {
1747
+ "action": "TOGGLE_RUN",
1748
+ "aria-pressed": "false",
1749
+ "icon": "play",
1750
+ "label": "Play",
1751
+ "type": "button",
1752
+ "variant": "primary"
1753
+ }
1754
+ ],
1755
+ {
1756
+ "action": "RESET",
1757
+ "icon": "rotate-ccw",
1758
+ "label": "Reset",
1759
+ "type": "button",
1760
+ "variant": "ghost"
1761
+ },
1266
1762
  {
1763
+ "color": "muted",
1267
1764
  "content": [
1268
1765
  "str/concat",
1269
- "Damping: ",
1270
- [
1271
- "math/round",
1272
- "@entity.damping",
1273
- 3.0
1274
- ]
1766
+ "Tick ",
1767
+ "@entity.tickCount"
1275
1768
  ],
1276
1769
  "type": "typography",
1277
1770
  "variant": "caption"
1278
- },
1279
- {
1280
- "action": "SET_DAMPING",
1281
- "max": 1.0,
1282
- "min": 0.9,
1283
- "showTooltip": true,
1284
- "step": 0.005,
1285
- "type": "range-slider",
1286
- "value": "@entity.damping"
1287
1771
  }
1288
1772
  ],
1289
- "direction": "vertical",
1290
- "gap": "xs",
1291
- "type": "stack"
1773
+ "direction": "horizontal",
1774
+ "gap": "sm",
1775
+ "type": "stack",
1776
+ "wrap": true
1292
1777
  },
1293
1778
  {
1294
1779
  "backgroundColor": "@config.backgroundColor",
1295
1780
  "bodies": "@entity.bodies",
1296
1781
  "height": "@config.height",
1782
+ "keyMap": {
1783
+ "KeyR": "RESET",
1784
+ "Space": "TOGGLE_RUN"
1785
+ },
1297
1786
  "showForces": false,
1298
1787
  "showVelocity": "@config.showVelocity",
1299
1788
  "type": "physics-canvas",
1300
1789
  "velocityScale": "@config.velocityScale",
1301
1790
  "width": "@config.width"
1302
1791
  },
1792
+ {
1793
+ "children": [
1794
+ {
1795
+ "children": [
1796
+ {
1797
+ "color": "muted",
1798
+ "content": [
1799
+ "str/concat",
1800
+ "Gravity: ",
1801
+ [
1802
+ "math/round",
1803
+ "@entity.gravity",
1804
+ 2.0
1805
+ ]
1806
+ ],
1807
+ "type": "typography",
1808
+ "variant": "caption"
1809
+ },
1810
+ {
1811
+ "action": "SET_GRAVITY",
1812
+ "max": 1.5,
1813
+ "min": -1.0,
1814
+ "showTooltip": true,
1815
+ "step": 0.05,
1816
+ "type": "range-slider",
1817
+ "value": "@entity.gravity"
1818
+ }
1819
+ ],
1820
+ "direction": "vertical",
1821
+ "gap": "xs",
1822
+ "type": "stack"
1823
+ },
1824
+ {
1825
+ "children": [
1826
+ {
1827
+ "color": "muted",
1828
+ "content": [
1829
+ "str/concat",
1830
+ "Damping: ",
1831
+ [
1832
+ "math/round",
1833
+ "@entity.damping",
1834
+ 3.0
1835
+ ]
1836
+ ],
1837
+ "type": "typography",
1838
+ "variant": "caption"
1839
+ },
1840
+ {
1841
+ "action": "SET_DAMPING",
1842
+ "max": 1.0,
1843
+ "min": 0.9,
1844
+ "showTooltip": true,
1845
+ "step": 0.005,
1846
+ "type": "range-slider",
1847
+ "value": "@entity.damping"
1848
+ }
1849
+ ],
1850
+ "direction": "vertical",
1851
+ "gap": "xs",
1852
+ "type": "stack"
1853
+ }
1854
+ ],
1855
+ "direction": "vertical",
1856
+ "gap": "sm",
1857
+ "type": "stack"
1858
+ },
1303
1859
  {
1304
1860
  "content": [
1305
1861
  "str/concat",
1306
- "Tick ",
1307
- [
1308
- "str/concat",
1309
- "",
1310
- "@entity.tickCount"
1311
- ],
1312
- " · sample speed ",
1862
+ "Sample body speed ",
1313
1863
  [
1314
1864
  "math/round",
1315
1865
  "@entity.sampleSpeed",
@@ -1387,125 +1937,187 @@
1387
1937
  {
1388
1938
  "children": [
1389
1939
  {
1390
- "content": "@entity.title",
1391
- "type": "typography",
1392
- "variant": "h4"
1393
- },
1394
- {
1940
+ "align": "start",
1395
1941
  "children": [
1396
1942
  {
1397
- "action": "RUN",
1398
- "disabled": [
1399
- "if",
1400
- "@entity.running",
1401
- true,
1402
- false
1943
+ "children": [
1944
+ {
1945
+ "content": "@entity.title",
1946
+ "type": "typography",
1947
+ "variant": "h4"
1948
+ },
1949
+ [
1950
+ "if",
1951
+ [
1952
+ "==",
1953
+ "@config.summary",
1954
+ ""
1955
+ ],
1956
+ null,
1957
+ {
1958
+ "color": "muted",
1959
+ "content": "@config.summary",
1960
+ "type": "typography",
1961
+ "variant": "body2"
1962
+ }
1963
+ ]
1403
1964
  ],
1404
- "label": "Run",
1405
- "type": "button",
1406
- "variant": "primary"
1965
+ "direction": "vertical",
1966
+ "gap": "xs",
1967
+ "type": "stack"
1407
1968
  },
1408
1969
  {
1409
- "action": "PAUSE",
1410
- "disabled": [
1970
+ "label": [
1411
1971
  "if",
1412
1972
  "@entity.running",
1413
- false,
1414
- true
1973
+ "Running",
1974
+ "Paused"
1415
1975
  ],
1416
- "label": "Pause",
1417
- "type": "button",
1418
- "variant": "secondary"
1419
- },
1420
- {
1421
- "action": "RESET",
1422
- "label": "Reset",
1423
- "type": "button",
1424
- "variant": "ghost"
1976
+ "type": "badge",
1977
+ "variant": [
1978
+ "if",
1979
+ "@entity.running",
1980
+ "primary",
1981
+ "neutral"
1982
+ ]
1425
1983
  }
1426
1984
  ],
1427
1985
  "direction": "horizontal",
1428
- "gap": "sm",
1986
+ "gap": "md",
1987
+ "justify": "between",
1429
1988
  "type": "stack"
1430
1989
  },
1431
1990
  {
1991
+ "align": "center",
1432
1992
  "children": [
1993
+ [
1994
+ "if",
1995
+ "@entity.running",
1996
+ {
1997
+ "action": "TOGGLE_RUN",
1998
+ "aria-pressed": "true",
1999
+ "icon": "pause",
2000
+ "label": "Pause",
2001
+ "type": "button",
2002
+ "variant": "primary"
2003
+ },
2004
+ {
2005
+ "action": "TOGGLE_RUN",
2006
+ "aria-pressed": "false",
2007
+ "icon": "play",
2008
+ "label": "Play",
2009
+ "type": "button",
2010
+ "variant": "primary"
2011
+ }
2012
+ ],
1433
2013
  {
1434
- "content": [
1435
- "str/concat",
1436
- "Gravity: ",
1437
- [
1438
- "math/round",
1439
- "@entity.gravity",
1440
- 2.0
1441
- ]
1442
- ],
1443
- "type": "typography",
1444
- "variant": "caption"
2014
+ "action": "RESET",
2015
+ "icon": "rotate-ccw",
2016
+ "label": "Reset",
2017
+ "type": "button",
2018
+ "variant": "ghost"
1445
2019
  },
1446
2020
  {
1447
- "action": "SET_GRAVITY",
1448
- "max": 1.5,
1449
- "min": -1.0,
1450
- "showTooltip": true,
1451
- "step": 0.05,
1452
- "type": "range-slider",
1453
- "value": "@entity.gravity"
1454
- }
1455
- ],
1456
- "direction": "vertical",
1457
- "gap": "xs",
1458
- "type": "stack"
1459
- },
1460
- {
1461
- "children": [
1462
- {
2021
+ "color": "muted",
1463
2022
  "content": [
1464
2023
  "str/concat",
1465
- "Damping: ",
1466
- [
1467
- "math/round",
1468
- "@entity.damping",
1469
- 3.0
1470
- ]
2024
+ "Tick ",
2025
+ "@entity.tickCount"
1471
2026
  ],
1472
2027
  "type": "typography",
1473
2028
  "variant": "caption"
1474
- },
1475
- {
1476
- "action": "SET_DAMPING",
1477
- "max": 1.0,
1478
- "min": 0.9,
1479
- "showTooltip": true,
1480
- "step": 0.005,
1481
- "type": "range-slider",
1482
- "value": "@entity.damping"
1483
2029
  }
1484
2030
  ],
1485
- "direction": "vertical",
1486
- "gap": "xs",
1487
- "type": "stack"
2031
+ "direction": "horizontal",
2032
+ "gap": "sm",
2033
+ "type": "stack",
2034
+ "wrap": true
1488
2035
  },
1489
2036
  {
1490
2037
  "backgroundColor": "@config.backgroundColor",
1491
2038
  "bodies": "@entity.bodies",
1492
2039
  "height": "@config.height",
2040
+ "keyMap": {
2041
+ "KeyR": "RESET",
2042
+ "Space": "TOGGLE_RUN"
2043
+ },
1493
2044
  "showForces": false,
1494
2045
  "showVelocity": "@config.showVelocity",
1495
2046
  "type": "physics-canvas",
1496
2047
  "velocityScale": "@config.velocityScale",
1497
2048
  "width": "@config.width"
1498
2049
  },
2050
+ {
2051
+ "children": [
2052
+ {
2053
+ "children": [
2054
+ {
2055
+ "color": "muted",
2056
+ "content": [
2057
+ "str/concat",
2058
+ "Gravity: ",
2059
+ [
2060
+ "math/round",
2061
+ "@entity.gravity",
2062
+ 2.0
2063
+ ]
2064
+ ],
2065
+ "type": "typography",
2066
+ "variant": "caption"
2067
+ },
2068
+ {
2069
+ "action": "SET_GRAVITY",
2070
+ "max": 1.5,
2071
+ "min": -1.0,
2072
+ "showTooltip": true,
2073
+ "step": 0.05,
2074
+ "type": "range-slider",
2075
+ "value": "@entity.gravity"
2076
+ }
2077
+ ],
2078
+ "direction": "vertical",
2079
+ "gap": "xs",
2080
+ "type": "stack"
2081
+ },
2082
+ {
2083
+ "children": [
2084
+ {
2085
+ "color": "muted",
2086
+ "content": [
2087
+ "str/concat",
2088
+ "Damping: ",
2089
+ [
2090
+ "math/round",
2091
+ "@entity.damping",
2092
+ 3.0
2093
+ ]
2094
+ ],
2095
+ "type": "typography",
2096
+ "variant": "caption"
2097
+ },
2098
+ {
2099
+ "action": "SET_DAMPING",
2100
+ "max": 1.0,
2101
+ "min": 0.9,
2102
+ "showTooltip": true,
2103
+ "step": 0.005,
2104
+ "type": "range-slider",
2105
+ "value": "@entity.damping"
2106
+ }
2107
+ ],
2108
+ "direction": "vertical",
2109
+ "gap": "xs",
2110
+ "type": "stack"
2111
+ }
2112
+ ],
2113
+ "direction": "vertical",
2114
+ "gap": "sm",
2115
+ "type": "stack"
2116
+ },
1499
2117
  {
1500
2118
  "content": [
1501
2119
  "str/concat",
1502
- "Tick ",
1503
- [
1504
- "str/concat",
1505
- "",
1506
- "@entity.tickCount"
1507
- ],
1508
- " · sample speed ",
2120
+ "Sample body speed ",
1509
2121
  [
1510
2122
  "math/round",
1511
2123
  "@entity.sampleSpeed",
@@ -1566,125 +2178,187 @@
1566
2178
  {
1567
2179
  "children": [
1568
2180
  {
1569
- "content": "@entity.title",
1570
- "type": "typography",
1571
- "variant": "h4"
1572
- },
1573
- {
2181
+ "align": "start",
1574
2182
  "children": [
1575
2183
  {
1576
- "action": "RUN",
1577
- "disabled": [
1578
- "if",
1579
- "@entity.running",
1580
- true,
1581
- false
2184
+ "children": [
2185
+ {
2186
+ "content": "@entity.title",
2187
+ "type": "typography",
2188
+ "variant": "h4"
2189
+ },
2190
+ [
2191
+ "if",
2192
+ [
2193
+ "==",
2194
+ "@config.summary",
2195
+ ""
2196
+ ],
2197
+ null,
2198
+ {
2199
+ "color": "muted",
2200
+ "content": "@config.summary",
2201
+ "type": "typography",
2202
+ "variant": "body2"
2203
+ }
2204
+ ]
1582
2205
  ],
1583
- "label": "Run",
1584
- "type": "button",
1585
- "variant": "primary"
2206
+ "direction": "vertical",
2207
+ "gap": "xs",
2208
+ "type": "stack"
1586
2209
  },
1587
2210
  {
1588
- "action": "PAUSE",
1589
- "disabled": [
2211
+ "label": [
1590
2212
  "if",
1591
2213
  "@entity.running",
1592
- false,
1593
- true
2214
+ "Running",
2215
+ "Paused"
1594
2216
  ],
1595
- "label": "Pause",
1596
- "type": "button",
1597
- "variant": "secondary"
1598
- },
1599
- {
1600
- "action": "RESET",
1601
- "label": "Reset",
1602
- "type": "button",
1603
- "variant": "ghost"
2217
+ "type": "badge",
2218
+ "variant": [
2219
+ "if",
2220
+ "@entity.running",
2221
+ "primary",
2222
+ "neutral"
2223
+ ]
1604
2224
  }
1605
2225
  ],
1606
2226
  "direction": "horizontal",
1607
- "gap": "sm",
2227
+ "gap": "md",
2228
+ "justify": "between",
1608
2229
  "type": "stack"
1609
2230
  },
1610
2231
  {
2232
+ "align": "center",
1611
2233
  "children": [
2234
+ [
2235
+ "if",
2236
+ "@entity.running",
2237
+ {
2238
+ "action": "TOGGLE_RUN",
2239
+ "aria-pressed": "true",
2240
+ "icon": "pause",
2241
+ "label": "Pause",
2242
+ "type": "button",
2243
+ "variant": "primary"
2244
+ },
2245
+ {
2246
+ "action": "TOGGLE_RUN",
2247
+ "aria-pressed": "false",
2248
+ "icon": "play",
2249
+ "label": "Play",
2250
+ "type": "button",
2251
+ "variant": "primary"
2252
+ }
2253
+ ],
1612
2254
  {
1613
- "content": [
1614
- "str/concat",
1615
- "Gravity: ",
1616
- [
1617
- "math/round",
1618
- "@entity.gravity",
1619
- 2.0
1620
- ]
1621
- ],
1622
- "type": "typography",
1623
- "variant": "caption"
2255
+ "action": "RESET",
2256
+ "icon": "rotate-ccw",
2257
+ "label": "Reset",
2258
+ "type": "button",
2259
+ "variant": "ghost"
1624
2260
  },
1625
2261
  {
1626
- "action": "SET_GRAVITY",
1627
- "max": 1.5,
1628
- "min": -1.0,
1629
- "showTooltip": true,
1630
- "step": 0.05,
1631
- "type": "range-slider",
1632
- "value": "@entity.gravity"
1633
- }
1634
- ],
1635
- "direction": "vertical",
1636
- "gap": "xs",
1637
- "type": "stack"
1638
- },
1639
- {
1640
- "children": [
1641
- {
2262
+ "color": "muted",
1642
2263
  "content": [
1643
2264
  "str/concat",
1644
- "Damping: ",
1645
- [
1646
- "math/round",
1647
- "@entity.damping",
1648
- 3.0
1649
- ]
2265
+ "Tick ",
2266
+ "@entity.tickCount"
1650
2267
  ],
1651
2268
  "type": "typography",
1652
2269
  "variant": "caption"
1653
- },
1654
- {
1655
- "action": "SET_DAMPING",
1656
- "max": 1.0,
1657
- "min": 0.9,
1658
- "showTooltip": true,
1659
- "step": 0.005,
1660
- "type": "range-slider",
1661
- "value": "@entity.damping"
1662
2270
  }
1663
2271
  ],
1664
- "direction": "vertical",
1665
- "gap": "xs",
1666
- "type": "stack"
2272
+ "direction": "horizontal",
2273
+ "gap": "sm",
2274
+ "type": "stack",
2275
+ "wrap": true
1667
2276
  },
1668
2277
  {
1669
2278
  "backgroundColor": "@config.backgroundColor",
1670
2279
  "bodies": "@entity.bodies",
1671
2280
  "height": "@config.height",
2281
+ "keyMap": {
2282
+ "KeyR": "RESET",
2283
+ "Space": "TOGGLE_RUN"
2284
+ },
1672
2285
  "showForces": false,
1673
2286
  "showVelocity": "@config.showVelocity",
1674
2287
  "type": "physics-canvas",
1675
2288
  "velocityScale": "@config.velocityScale",
1676
2289
  "width": "@config.width"
1677
2290
  },
2291
+ {
2292
+ "children": [
2293
+ {
2294
+ "children": [
2295
+ {
2296
+ "color": "muted",
2297
+ "content": [
2298
+ "str/concat",
2299
+ "Gravity: ",
2300
+ [
2301
+ "math/round",
2302
+ "@entity.gravity",
2303
+ 2.0
2304
+ ]
2305
+ ],
2306
+ "type": "typography",
2307
+ "variant": "caption"
2308
+ },
2309
+ {
2310
+ "action": "SET_GRAVITY",
2311
+ "max": 1.5,
2312
+ "min": -1.0,
2313
+ "showTooltip": true,
2314
+ "step": 0.05,
2315
+ "type": "range-slider",
2316
+ "value": "@entity.gravity"
2317
+ }
2318
+ ],
2319
+ "direction": "vertical",
2320
+ "gap": "xs",
2321
+ "type": "stack"
2322
+ },
2323
+ {
2324
+ "children": [
2325
+ {
2326
+ "color": "muted",
2327
+ "content": [
2328
+ "str/concat",
2329
+ "Damping: ",
2330
+ [
2331
+ "math/round",
2332
+ "@entity.damping",
2333
+ 3.0
2334
+ ]
2335
+ ],
2336
+ "type": "typography",
2337
+ "variant": "caption"
2338
+ },
2339
+ {
2340
+ "action": "SET_DAMPING",
2341
+ "max": 1.0,
2342
+ "min": 0.9,
2343
+ "showTooltip": true,
2344
+ "step": 0.005,
2345
+ "type": "range-slider",
2346
+ "value": "@entity.damping"
2347
+ }
2348
+ ],
2349
+ "direction": "vertical",
2350
+ "gap": "xs",
2351
+ "type": "stack"
2352
+ }
2353
+ ],
2354
+ "direction": "vertical",
2355
+ "gap": "sm",
2356
+ "type": "stack"
2357
+ },
1678
2358
  {
1679
2359
  "content": [
1680
2360
  "str/concat",
1681
- "Tick ",
1682
- [
1683
- "str/concat",
1684
- "",
1685
- "@entity.tickCount"
1686
- ],
1687
- " · sample speed ",
2361
+ "Sample body speed ",
1688
2362
  [
1689
2363
  "math/round",
1690
2364
  "@entity.sampleSpeed",
@@ -1735,125 +2409,187 @@
1735
2409
  {
1736
2410
  "children": [
1737
2411
  {
1738
- "content": "@entity.title",
1739
- "type": "typography",
1740
- "variant": "h4"
1741
- },
1742
- {
2412
+ "align": "start",
1743
2413
  "children": [
1744
2414
  {
1745
- "action": "RUN",
1746
- "disabled": [
1747
- "if",
1748
- "@entity.running",
1749
- true,
1750
- false
2415
+ "children": [
2416
+ {
2417
+ "content": "@entity.title",
2418
+ "type": "typography",
2419
+ "variant": "h4"
2420
+ },
2421
+ [
2422
+ "if",
2423
+ [
2424
+ "==",
2425
+ "@config.summary",
2426
+ ""
2427
+ ],
2428
+ null,
2429
+ {
2430
+ "color": "muted",
2431
+ "content": "@config.summary",
2432
+ "type": "typography",
2433
+ "variant": "body2"
2434
+ }
2435
+ ]
1751
2436
  ],
1752
- "label": "Run",
1753
- "type": "button",
1754
- "variant": "primary"
2437
+ "direction": "vertical",
2438
+ "gap": "xs",
2439
+ "type": "stack"
1755
2440
  },
1756
2441
  {
1757
- "action": "PAUSE",
1758
- "disabled": [
2442
+ "label": [
1759
2443
  "if",
1760
2444
  "@entity.running",
1761
- false,
1762
- true
2445
+ "Running",
2446
+ "Paused"
1763
2447
  ],
1764
- "label": "Pause",
1765
- "type": "button",
1766
- "variant": "secondary"
1767
- },
1768
- {
1769
- "action": "RESET",
1770
- "label": "Reset",
1771
- "type": "button",
1772
- "variant": "ghost"
2448
+ "type": "badge",
2449
+ "variant": [
2450
+ "if",
2451
+ "@entity.running",
2452
+ "primary",
2453
+ "neutral"
2454
+ ]
1773
2455
  }
1774
2456
  ],
1775
2457
  "direction": "horizontal",
1776
- "gap": "sm",
2458
+ "gap": "md",
2459
+ "justify": "between",
1777
2460
  "type": "stack"
1778
2461
  },
1779
2462
  {
2463
+ "align": "center",
1780
2464
  "children": [
2465
+ [
2466
+ "if",
2467
+ "@entity.running",
2468
+ {
2469
+ "action": "TOGGLE_RUN",
2470
+ "aria-pressed": "true",
2471
+ "icon": "pause",
2472
+ "label": "Pause",
2473
+ "type": "button",
2474
+ "variant": "primary"
2475
+ },
2476
+ {
2477
+ "action": "TOGGLE_RUN",
2478
+ "aria-pressed": "false",
2479
+ "icon": "play",
2480
+ "label": "Play",
2481
+ "type": "button",
2482
+ "variant": "primary"
2483
+ }
2484
+ ],
1781
2485
  {
1782
- "content": [
1783
- "str/concat",
1784
- "Gravity: ",
1785
- [
1786
- "math/round",
1787
- "@entity.gravity",
1788
- 2.0
1789
- ]
1790
- ],
1791
- "type": "typography",
1792
- "variant": "caption"
2486
+ "action": "RESET",
2487
+ "icon": "rotate-ccw",
2488
+ "label": "Reset",
2489
+ "type": "button",
2490
+ "variant": "ghost"
1793
2491
  },
1794
2492
  {
1795
- "action": "SET_GRAVITY",
1796
- "max": 1.5,
1797
- "min": -1.0,
1798
- "showTooltip": true,
1799
- "step": 0.05,
1800
- "type": "range-slider",
1801
- "value": "@entity.gravity"
1802
- }
1803
- ],
1804
- "direction": "vertical",
1805
- "gap": "xs",
1806
- "type": "stack"
1807
- },
1808
- {
1809
- "children": [
1810
- {
2493
+ "color": "muted",
1811
2494
  "content": [
1812
2495
  "str/concat",
1813
- "Damping: ",
1814
- [
1815
- "math/round",
1816
- "@entity.damping",
1817
- 3.0
1818
- ]
2496
+ "Tick ",
2497
+ "@entity.tickCount"
1819
2498
  ],
1820
2499
  "type": "typography",
1821
2500
  "variant": "caption"
1822
- },
1823
- {
1824
- "action": "SET_DAMPING",
1825
- "max": 1.0,
1826
- "min": 0.9,
1827
- "showTooltip": true,
1828
- "step": 0.005,
1829
- "type": "range-slider",
1830
- "value": "@entity.damping"
1831
2501
  }
1832
2502
  ],
1833
- "direction": "vertical",
1834
- "gap": "xs",
1835
- "type": "stack"
2503
+ "direction": "horizontal",
2504
+ "gap": "sm",
2505
+ "type": "stack",
2506
+ "wrap": true
1836
2507
  },
1837
2508
  {
1838
2509
  "backgroundColor": "@config.backgroundColor",
1839
2510
  "bodies": "@entity.bodies",
1840
2511
  "height": "@config.height",
2512
+ "keyMap": {
2513
+ "KeyR": "RESET",
2514
+ "Space": "TOGGLE_RUN"
2515
+ },
1841
2516
  "showForces": false,
1842
2517
  "showVelocity": "@config.showVelocity",
1843
2518
  "type": "physics-canvas",
1844
2519
  "velocityScale": "@config.velocityScale",
1845
2520
  "width": "@config.width"
1846
2521
  },
2522
+ {
2523
+ "children": [
2524
+ {
2525
+ "children": [
2526
+ {
2527
+ "color": "muted",
2528
+ "content": [
2529
+ "str/concat",
2530
+ "Gravity: ",
2531
+ [
2532
+ "math/round",
2533
+ "@entity.gravity",
2534
+ 2.0
2535
+ ]
2536
+ ],
2537
+ "type": "typography",
2538
+ "variant": "caption"
2539
+ },
2540
+ {
2541
+ "action": "SET_GRAVITY",
2542
+ "max": 1.5,
2543
+ "min": -1.0,
2544
+ "showTooltip": true,
2545
+ "step": 0.05,
2546
+ "type": "range-slider",
2547
+ "value": "@entity.gravity"
2548
+ }
2549
+ ],
2550
+ "direction": "vertical",
2551
+ "gap": "xs",
2552
+ "type": "stack"
2553
+ },
2554
+ {
2555
+ "children": [
2556
+ {
2557
+ "color": "muted",
2558
+ "content": [
2559
+ "str/concat",
2560
+ "Damping: ",
2561
+ [
2562
+ "math/round",
2563
+ "@entity.damping",
2564
+ 3.0
2565
+ ]
2566
+ ],
2567
+ "type": "typography",
2568
+ "variant": "caption"
2569
+ },
2570
+ {
2571
+ "action": "SET_DAMPING",
2572
+ "max": 1.0,
2573
+ "min": 0.9,
2574
+ "showTooltip": true,
2575
+ "step": 0.005,
2576
+ "type": "range-slider",
2577
+ "value": "@entity.damping"
2578
+ }
2579
+ ],
2580
+ "direction": "vertical",
2581
+ "gap": "xs",
2582
+ "type": "stack"
2583
+ }
2584
+ ],
2585
+ "direction": "vertical",
2586
+ "gap": "sm",
2587
+ "type": "stack"
2588
+ },
1847
2589
  {
1848
2590
  "content": [
1849
2591
  "str/concat",
1850
- "Tick ",
1851
- [
1852
- "str/concat",
1853
- "",
1854
- "@entity.tickCount"
1855
- ],
1856
- " · sample speed ",
2592
+ "Sample body speed ",
1857
2593
  [
1858
2594
  "math/round",
1859
2595
  "@entity.sampleSpeed",
@@ -2135,125 +2871,187 @@
2135
2871
  {
2136
2872
  "children": [
2137
2873
  {
2138
- "content": "@entity.title",
2139
- "type": "typography",
2140
- "variant": "h4"
2141
- },
2142
- {
2874
+ "align": "start",
2143
2875
  "children": [
2144
2876
  {
2145
- "action": "RUN",
2146
- "disabled": [
2147
- "if",
2148
- "@entity.running",
2149
- true,
2150
- false
2877
+ "children": [
2878
+ {
2879
+ "content": "@entity.title",
2880
+ "type": "typography",
2881
+ "variant": "h4"
2882
+ },
2883
+ [
2884
+ "if",
2885
+ [
2886
+ "==",
2887
+ "@config.summary",
2888
+ ""
2889
+ ],
2890
+ null,
2891
+ {
2892
+ "color": "muted",
2893
+ "content": "@config.summary",
2894
+ "type": "typography",
2895
+ "variant": "body2"
2896
+ }
2897
+ ]
2151
2898
  ],
2152
- "label": "Run",
2153
- "type": "button",
2154
- "variant": "primary"
2899
+ "direction": "vertical",
2900
+ "gap": "xs",
2901
+ "type": "stack"
2155
2902
  },
2156
2903
  {
2157
- "action": "PAUSE",
2158
- "disabled": [
2904
+ "label": [
2159
2905
  "if",
2160
2906
  "@entity.running",
2161
- false,
2162
- true
2907
+ "Running",
2908
+ "Paused"
2163
2909
  ],
2164
- "label": "Pause",
2165
- "type": "button",
2166
- "variant": "secondary"
2167
- },
2168
- {
2169
- "action": "RESET",
2170
- "label": "Reset",
2171
- "type": "button",
2172
- "variant": "ghost"
2910
+ "type": "badge",
2911
+ "variant": [
2912
+ "if",
2913
+ "@entity.running",
2914
+ "primary",
2915
+ "neutral"
2916
+ ]
2173
2917
  }
2174
2918
  ],
2175
2919
  "direction": "horizontal",
2176
- "gap": "sm",
2920
+ "gap": "md",
2921
+ "justify": "between",
2177
2922
  "type": "stack"
2178
2923
  },
2179
2924
  {
2925
+ "align": "center",
2180
2926
  "children": [
2927
+ [
2928
+ "if",
2929
+ "@entity.running",
2930
+ {
2931
+ "action": "TOGGLE_RUN",
2932
+ "aria-pressed": "true",
2933
+ "icon": "pause",
2934
+ "label": "Pause",
2935
+ "type": "button",
2936
+ "variant": "primary"
2937
+ },
2938
+ {
2939
+ "action": "TOGGLE_RUN",
2940
+ "aria-pressed": "false",
2941
+ "icon": "play",
2942
+ "label": "Play",
2943
+ "type": "button",
2944
+ "variant": "primary"
2945
+ }
2946
+ ],
2181
2947
  {
2182
- "content": [
2183
- "str/concat",
2184
- "Gravity: ",
2185
- [
2186
- "math/round",
2187
- "@entity.gravity",
2188
- 2.0
2189
- ]
2190
- ],
2191
- "type": "typography",
2192
- "variant": "caption"
2948
+ "action": "RESET",
2949
+ "icon": "rotate-ccw",
2950
+ "label": "Reset",
2951
+ "type": "button",
2952
+ "variant": "ghost"
2193
2953
  },
2194
2954
  {
2195
- "action": "SET_GRAVITY",
2196
- "max": 1.5,
2197
- "min": -1.0,
2198
- "showTooltip": true,
2199
- "step": 0.05,
2200
- "type": "range-slider",
2201
- "value": "@entity.gravity"
2202
- }
2203
- ],
2204
- "direction": "vertical",
2205
- "gap": "xs",
2206
- "type": "stack"
2207
- },
2208
- {
2209
- "children": [
2210
- {
2955
+ "color": "muted",
2211
2956
  "content": [
2212
2957
  "str/concat",
2213
- "Damping: ",
2214
- [
2215
- "math/round",
2216
- "@entity.damping",
2217
- 3.0
2218
- ]
2958
+ "Tick ",
2959
+ "@entity.tickCount"
2219
2960
  ],
2220
2961
  "type": "typography",
2221
2962
  "variant": "caption"
2222
- },
2223
- {
2224
- "action": "SET_DAMPING",
2225
- "max": 1.0,
2226
- "min": 0.9,
2227
- "showTooltip": true,
2228
- "step": 0.005,
2229
- "type": "range-slider",
2230
- "value": "@entity.damping"
2231
2963
  }
2232
2964
  ],
2233
- "direction": "vertical",
2234
- "gap": "xs",
2235
- "type": "stack"
2965
+ "direction": "horizontal",
2966
+ "gap": "sm",
2967
+ "type": "stack",
2968
+ "wrap": true
2236
2969
  },
2237
2970
  {
2238
2971
  "backgroundColor": "@config.backgroundColor",
2239
2972
  "bodies": "@entity.bodies",
2240
2973
  "height": "@config.height",
2974
+ "keyMap": {
2975
+ "KeyR": "RESET",
2976
+ "Space": "TOGGLE_RUN"
2977
+ },
2241
2978
  "showForces": false,
2242
2979
  "showVelocity": "@config.showVelocity",
2243
2980
  "type": "physics-canvas",
2244
2981
  "velocityScale": "@config.velocityScale",
2245
2982
  "width": "@config.width"
2246
2983
  },
2984
+ {
2985
+ "children": [
2986
+ {
2987
+ "children": [
2988
+ {
2989
+ "color": "muted",
2990
+ "content": [
2991
+ "str/concat",
2992
+ "Gravity: ",
2993
+ [
2994
+ "math/round",
2995
+ "@entity.gravity",
2996
+ 2.0
2997
+ ]
2998
+ ],
2999
+ "type": "typography",
3000
+ "variant": "caption"
3001
+ },
3002
+ {
3003
+ "action": "SET_GRAVITY",
3004
+ "max": 1.5,
3005
+ "min": -1.0,
3006
+ "showTooltip": true,
3007
+ "step": 0.05,
3008
+ "type": "range-slider",
3009
+ "value": "@entity.gravity"
3010
+ }
3011
+ ],
3012
+ "direction": "vertical",
3013
+ "gap": "xs",
3014
+ "type": "stack"
3015
+ },
3016
+ {
3017
+ "children": [
3018
+ {
3019
+ "color": "muted",
3020
+ "content": [
3021
+ "str/concat",
3022
+ "Damping: ",
3023
+ [
3024
+ "math/round",
3025
+ "@entity.damping",
3026
+ 3.0
3027
+ ]
3028
+ ],
3029
+ "type": "typography",
3030
+ "variant": "caption"
3031
+ },
3032
+ {
3033
+ "action": "SET_DAMPING",
3034
+ "max": 1.0,
3035
+ "min": 0.9,
3036
+ "showTooltip": true,
3037
+ "step": 0.005,
3038
+ "type": "range-slider",
3039
+ "value": "@entity.damping"
3040
+ }
3041
+ ],
3042
+ "direction": "vertical",
3043
+ "gap": "xs",
3044
+ "type": "stack"
3045
+ }
3046
+ ],
3047
+ "direction": "vertical",
3048
+ "gap": "sm",
3049
+ "type": "stack"
3050
+ },
2247
3051
  {
2248
3052
  "content": [
2249
3053
  "str/concat",
2250
- "Tick ",
2251
- [
2252
- "str/concat",
2253
- "",
2254
- "@entity.tickCount"
2255
- ],
2256
- " · sample speed ",
3054
+ "Sample body speed ",
2257
3055
  [
2258
3056
  "math/round",
2259
3057
  "@entity.sampleSpeed",