Better mobile slider handling

pnpm-lock.yaml

@@ -141,7 +141,18 @@ importers:
         specifier: ^0.25.8
         version: 0.25.8(sass@1.61.0)
 
-  gradio/client/js: {}
+  gradio/client/js:
+    dependencies:
+      ws:
+        specifier: ^8.13.0
+        version: 8.13.0
+    devDependencies:
+      '@types/ws':
+        specifier: ^8.5.4
+        version: 8.5.4
+      esbuild:
+        specifier: ^0.17.14
+        version: 0.17.18
 
   gradio/js/_cdn-test:
     devDependencies:
@@ -246,12 +257,6 @@ importers:
       postcss-prefix-selector:
         specifier: ^1.16.0
         version: 1.16.0(postcss@8.4.21)
-      svelte:
-        specifier: ^3.25.1
-        version: 3.58.0
-      svelte-i18n:
-        specifier: ^3.3.13
-        version: 3.3.13(svelte@3.58.0)
 
   gradio/js/atoms:
     dependencies:
@@ -311,7 +316,7 @@ importers:
         version: 4.0.2
       d3-shape:
         specifier: ^3.1.0
-        version: 3.1.0
+        version: 3.2.0
     devDependencies:
       '@types/d3-dsv':
         specifier: ^3.0.0
@@ -339,46 +344,46 @@ importers:
     dependencies:
       '@codemirror/autocomplete':
         specifier: ^6.3.0
-        version: 6.3.0(@codemirror/language@6.6.0)(@codemirror/state@6.1.2)(@codemirror/view@6.4.1)(@lezer/common@1.0.2)
+        version: 6.6.1(@codemirror/language@6.6.0)(@codemirror/state@6.2.0)(@codemirror/view@6.11.0)(@lezer/common@1.0.2)
       '@codemirror/commands':
         specifier: ^6.1.2
-        version: 6.1.2
+        version: 6.2.4
       '@codemirror/lang-css':
         specifier: ^6.1.0
-        version: 6.1.0(@codemirror/view@6.4.1)(@lezer/common@1.0.2)
+        version: 6.2.0(@codemirror/view@6.11.0)
       '@codemirror/lang-html':
         specifier: ^6.4.2
-        version: 6.4.2
+        version: 6.4.3
       '@codemirror/lang-javascript':
         specifier: ^6.1.4
-        version: 6.1.4
+        version: 6.1.7
       '@codemirror/lang-json':
         specifier: ^6.0.1
         version: 6.0.1
       '@codemirror/lang-markdown':
         specifier: ^6.1.0
-        version: 6.1.0
+        version: 6.1.1
       '@codemirror/lang-python':
         specifier: ^6.0.4
-        version: 6.0.4
+        version: 6.1.2(@codemirror/state@6.2.0)(@codemirror/view@6.11.0)(@lezer/common@1.0.2)
       '@codemirror/language':
         specifier: ^6.6.0
         version: 6.6.0
       '@codemirror/legacy-modes':
         specifier: ^6.3.1
-        version: 6.3.1
+        version: 6.3.2
       '@codemirror/lint':
         specifier: ^6.0.0
-        version: 6.0.0
+        version: 6.2.1
       '@codemirror/search':
         specifier: ^6.2.2
-        version: 6.2.2
+        version: 6.4.0
       '@codemirror/state':
         specifier: ^6.1.2
-        version: 6.1.2
+        version: 6.2.0
       '@codemirror/view':
         specifier: ^6.4.1
-        version: 6.4.1
+        version: 6.11.0
       '@gradio/atoms':
         specifier: workspace:^0.0.1
         version: link:../atoms
@@ -393,16 +398,16 @@ importers:
         version: 1.0.2
       '@lezer/highlight':
         specifier: ^1.1.3
-        version: 1.1.3
+        version: 1.1.4
       '@lezer/markdown':
         specifier: ^1.0.2
         version: 1.0.2
       cm6-theme-basic-dark:
         specifier: ^0.2.0
-        version: 0.2.0(@codemirror/language@6.6.0)(@codemirror/state@6.1.2)(@codemirror/view@6.4.1)(@lezer/highlight@1.1.3)
+        version: 0.2.0(@codemirror/language@6.6.0)(@codemirror/state@6.2.0)(@codemirror/view@6.11.0)(@lezer/highlight@1.1.4)
       cm6-theme-basic-light:
         specifier: ^0.2.0
-        version: 0.2.0(@codemirror/language@6.6.0)(@codemirror/state@6.1.2)(@codemirror/view@6.4.1)(@lezer/highlight@1.1.3)
+        version: 0.2.0(@codemirror/language@6.6.0)(@codemirror/state@6.2.0)(@codemirror/view@6.11.0)(@lezer/highlight@1.1.4)
       codemirror:
         specifier: ^6.0.1
         version: 6.0.1(@lezer/common@1.0.2)
@@ -721,19 +726,19 @@ importers:
         version: 8.4.21
       postcss-load-config:
         specifier: ^3.1.1
-        version: 3.1.1
+        version: 3.1.4(postcss@8.4.21)
       svelte-check:
         specifier: ^2.2.6
-        version: 2.2.6(postcss-load-config@3.1.1)(postcss@8.4.21)(svelte@3.58.0)
+        version: 2.2.6(postcss-load-config@3.1.4)(postcss@8.4.21)(svelte@3.58.0)
       svelte-preprocess:
         specifier: ^4.10.1
-        version: 4.10.1(postcss-load-config@3.1.1)(postcss@8.4.21)(svelte@3.58.0)(typescript@4.5.4)
+        version: 4.10.1(postcss-load-config@3.1.4)(postcss@8.4.21)(svelte@3.58.0)(typescript@4.5.4)
       tailwindcss:
         specifier: ^3.0.12
         version: 3.3.1
       tslib:
         specifier: ^2.3.1
-        version: 2.3.1
+        version: 2.5.0
       typescript:
         specifier: ~4.5.4
         version: 4.5.4
@@ -1181,8 +1186,8 @@ packages:
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
     dev: true
 
-  /@codemirror/autocomplete@6.3.0(@codemirror/language@6.6.0)(@codemirror/state@6.1.2)(@codemirror/view@6.4.1)(@lezer/common@1.0.2):
+  /@codemirror/autocomplete@6.6.1(@codemirror/language@6.6.0)(@codemirror/state@6.2.0)(@codemirror/view@6.11.0)(@lezer/common@1.0.2):
-    resolution: {integrity: sha512-4jEvh3AjJZTDKazd10J6ZsCIqaYxDMCeua5ouQxY8hlFIml+nr7le0SgBhT3SIytFBmdzPK3AUhXGuW3T79nVg==}
+    resolution: {integrity: sha512-RpsvnYOopnyNbZg487qoRD5bKg63KMMUVP5d8MQ4Luc7Mb6JBWTORovLi6cTvWaKlbmLW8Zd2dAJkIdrhBsXug==}
     peerDependencies:
       '@codemirror/language': ^6.0.0
       '@codemirror/state': ^6.0.0
@@ -1190,54 +1195,54 @@ packages:
       '@lezer/common': ^1.0.0
     dependencies:
       '@codemirror/language': 6.6.0
-      '@codemirror/state': 6.1.2
+      '@codemirror/state': 6.2.0
-      '@codemirror/view': 6.4.1
+      '@codemirror/view': 6.11.0
       '@lezer/common': 1.0.2
     dev: false
 
-  /@codemirror/commands@6.1.2:
+  /@codemirror/commands@6.2.4:
-    resolution: {integrity: sha512-sO3jdX1s0pam6lIdeSJLMN3DQ6mPEbM4yLvyKkdqtmd/UDwhXA5+AwFJ89rRXm6vTeOXBsE5cAmlos/t7MJdgg==}
+    resolution: {integrity: sha512-42lmDqVH0ttfilLShReLXsDfASKLXzfyC36bzwcqzox9PlHulMcsUOfHXNo2X2aFMVNUoQ7j+d4q5bnfseYoOA==}
     dependencies:
       '@codemirror/language': 6.6.0
-      '@codemirror/state': 6.1.2
+      '@codemirror/state': 6.2.0
-      '@codemirror/view': 6.4.1
+      '@codemirror/view': 6.11.0
       '@lezer/common': 1.0.2
     dev: false
 
-  /@codemirror/lang-css@6.1.0(@codemirror/view@6.4.1)(@lezer/common@1.0.2):
+  /@codemirror/lang-css@6.2.0(@codemirror/view@6.11.0):
-    resolution: {integrity: sha512-GYn4TyMvQLrkrhdisFh8HCTDAjPY/9pzwN12hG9UdrTUxRUMicF+8GS24sFEYaleaG1KZClIFLCj0Rol/WO24w==}
+    resolution: {integrity: sha512-oyIdJM29AyRPM3+PPq1I2oIk8NpUfEN3kAM05XWDDs6o3gSneIKaVJifT2P+fqONLou2uIgXynFyMUDQvo/szA==}
     dependencies:
-      '@codemirror/autocomplete': 6.3.0(@codemirror/language@6.6.0)(@codemirror/state@6.1.2)(@codemirror/view@6.4.1)(@lezer/common@1.0.2)
+      '@codemirror/autocomplete': 6.6.1(@codemirror/language@6.6.0)(@codemirror/state@6.2.0)(@codemirror/view@6.11.0)(@lezer/common@1.0.2)
       '@codemirror/language': 6.6.0
-      '@codemirror/state': 6.1.2
+      '@codemirror/state': 6.2.0
+      '@lezer/common': 1.0.2
       '@lezer/css': 1.1.1
     transitivePeerDependencies:
       - '@codemirror/view'
-      - '@lezer/common'
     dev: false
 
-  /@codemirror/lang-html@6.4.2:
+  /@codemirror/lang-html@6.4.3:
-    resolution: {integrity: sha512-bqCBASkteKySwtIbiV/WCtGnn/khLRbbiV5TE+d9S9eQJD7BA4c5dTRm2b3bVmSpilff5EYxvB4PQaZzM/7cNw==}
+    resolution: {integrity: sha512-VKzQXEC8nL69Jg2hvAFPBwOdZNvL8tMFOrdFwWpU+wc6a6KEkndJ/19R5xSaglNX6v2bttm8uIEFYxdQDcIZVQ==}
     dependencies:
-      '@codemirror/autocomplete': 6.3.0(@codemirror/language@6.6.0)(@codemirror/state@6.1.2)(@codemirror/view@6.4.1)(@lezer/common@1.0.2)
+      '@codemirror/autocomplete': 6.6.1(@codemirror/language@6.6.0)(@codemirror/state@6.2.0)(@codemirror/view@6.11.0)(@lezer/common@1.0.2)
-      '@codemirror/lang-css': 6.1.0(@codemirror/view@6.4.1)(@lezer/common@1.0.2)
+      '@codemirror/lang-css': 6.2.0(@codemirror/view@6.11.0)
-      '@codemirror/lang-javascript': 6.1.4
+      '@codemirror/lang-javascript': 6.1.7
       '@codemirror/language': 6.6.0
-      '@codemirror/state': 6.1.2
+      '@codemirror/state': 6.2.0
-      '@codemirror/view': 6.4.1
+      '@codemirror/view': 6.11.0
       '@lezer/common': 1.0.2
       '@lezer/css': 1.1.1
       '@lezer/html': 1.3.4
     dev: false
 
-  /@codemirror/lang-javascript@6.1.4:
+  /@codemirror/lang-javascript@6.1.7:
-    resolution: {integrity: sha512-OxLf7OfOZBTMRMi6BO/F72MNGmgOd9B0vetOLvHsDACFXayBzW8fm8aWnDM0yuy68wTK03MBf4HbjSBNRG5q7A==}
+    resolution: {integrity: sha512-KXKqxlZ4W6t5I7i2ScmITUD3f/F5Cllk3kj0De9P9mFeYVfhOVOWuDLgYiLpk357u7Xh4dhqjJAnsNPPoTLghQ==}
     dependencies:
-      '@codemirror/autocomplete': 6.3.0(@codemirror/language@6.6.0)(@codemirror/state@6.1.2)(@codemirror/view@6.4.1)(@lezer/common@1.0.2)
+      '@codemirror/autocomplete': 6.6.1(@codemirror/language@6.6.0)(@codemirror/state@6.2.0)(@codemirror/view@6.11.0)(@lezer/common@1.0.2)
       '@codemirror/language': 6.6.0
-      '@codemirror/lint': 6.0.0
+      '@codemirror/lint': 6.2.1
-      '@codemirror/state': 6.1.2
+      '@codemirror/state': 6.2.0
-      '@codemirror/view': 6.4.1
+      '@codemirror/view': 6.11.0
       '@lezer/common': 1.0.2
       '@lezer/javascript': 1.4.3
     dev: false
@@ -1249,65 +1254,70 @@ packages:
       '@lezer/json': 1.0.0
     dev: false
 
-  /@codemirror/lang-markdown@6.1.0:
+  /@codemirror/lang-markdown@6.1.1:
-    resolution: {integrity: sha512-HQDJg1Js19fPKKsI3Rp1X0J6mxyrRy2NX6+Evh0+/jGm6IZHL5ygMGKBYNWKXodoDQFvgdofNRG33gWOwV59Ag==}
+    resolution: {integrity: sha512-n87Ms6Y5UYb1UkFu8sRzTLfq/yyF1y2AYiWvaVdbBQi5WDj1tFk5N+AKA+WC0Jcjc1VxvrCCM0iizjdYYi9sFQ==}
     dependencies:
-      '@codemirror/lang-html': 6.4.2
+      '@codemirror/lang-html': 6.4.3
       '@codemirror/language': 6.6.0
-      '@codemirror/state': 6.1.2
+      '@codemirror/state': 6.2.0
-      '@codemirror/view': 6.4.1
+      '@codemirror/view': 6.11.0
       '@lezer/common': 1.0.2
       '@lezer/markdown': 1.0.2
     dev: false
 
-  /@codemirror/lang-python@6.0.4:
+  /@codemirror/lang-python@6.1.2(@codemirror/state@6.2.0)(@codemirror/view@6.11.0)(@lezer/common@1.0.2):
-    resolution: {integrity: sha512-CuC7V6MVw4HshQuFaB1SMXHOSbKLnBnBXMzm9Zjb+uvkggyY8fXp79T9eYFzMn7fuadoPJcXyTcT/q/SRT7lvQ==}
+    resolution: {integrity: sha512-nbQfifLBZstpt6Oo4XxA2LOzlSp4b/7Bc5cmodG1R+Cs5PLLCTUvsMNWDnziiCfTOG/SW1rVzXq/GbIr6WXlcw==}
     dependencies:
+      '@codemirror/autocomplete': 6.6.1(@codemirror/language@6.6.0)(@codemirror/state@6.2.0)(@codemirror/view@6.11.0)(@lezer/common@1.0.2)
       '@codemirror/language': 6.6.0
-      '@lezer/python': 1.1.4
+      '@lezer/python': 1.1.5
+    transitivePeerDependencies:
+      - '@codemirror/state'
+      - '@codemirror/view'
+      - '@lezer/common'
     dev: false
 
   /@codemirror/language@6.6.0:
     resolution: {integrity: sha512-cwUd6lzt3MfNYOobdjf14ZkLbJcnv4WtndYaoBkbor/vF+rCNguMPK0IRtvZJG4dsWiaWPcK8x1VijhvSxnstg==}
     dependencies:
-      '@codemirror/state': 6.1.2
+      '@codemirror/state': 6.2.0
-      '@codemirror/view': 6.4.1
+      '@codemirror/view': 6.11.0
       '@lezer/common': 1.0.2
-      '@lezer/highlight': 1.1.3
+      '@lezer/highlight': 1.1.4
       '@lezer/lr': 1.3.4
       style-mod: 4.0.3
     dev: false
 
-  /@codemirror/legacy-modes@6.3.1:
+  /@codemirror/legacy-modes@6.3.2:
-    resolution: {integrity: sha512-icXmCs4Mhst2F8mE0TNpmG6l7YTj1uxam3AbZaFaabINH5oWAdg2CfR/PVi+d/rqxJ+TuTnvkKK5GILHrNThtw==}
+    resolution: {integrity: sha512-ki5sqNKWzKi5AKvpVE6Cna4Q+SgxYuYVLAZFSsMjGBWx5qSVa+D+xipix65GS3f2syTfAD9pXKMX4i4p49eneQ==}
     dependencies:
       '@codemirror/language': 6.6.0
     dev: false
 
-  /@codemirror/lint@6.0.0:
+  /@codemirror/lint@6.2.1:
-    resolution: {integrity: sha512-nUUXcJW1Xp54kNs+a1ToPLK8MadO0rMTnJB8Zk4Z8gBdrN0kqV7uvUraU/T2yqg+grDNR38Vmy/MrhQN/RgwiA==}
+    resolution: {integrity: sha512-y1muai5U/uUPAGRyHMx9mHuHLypPcHWxzlZGknp/U5Mdb5Ol8Q5ZLp67UqyTbNFJJ3unVxZ8iX3g1fMN79S1JQ==}
     dependencies:
-      '@codemirror/state': 6.1.2
+      '@codemirror/state': 6.2.0
-      '@codemirror/view': 6.4.1
+      '@codemirror/view': 6.11.0
       crelt: 1.0.5
     dev: false
 
-  /@codemirror/search@6.2.2:
+  /@codemirror/search@6.4.0:
-    resolution: {integrity: sha512-2pWY599zXk+lSoJ2iv9EuTO4gB7lhgBPLPwFb/zTbimFH4NmZSaKzJSV51okjABZ7/Rj0DYy5klWbIgaJh2LoQ==}
+    resolution: {integrity: sha512-zMDgaBXah+nMLK2dHz9GdCnGbQu+oaGRXS1qviqNZkvOCv/whp5XZFyoikLp/23PM9RBcbuKUUISUmQHM1eRHw==}
     dependencies:
-      '@codemirror/state': 6.1.2
+      '@codemirror/state': 6.2.0
-      '@codemirror/view': 6.4.1
+      '@codemirror/view': 6.11.0
       crelt: 1.0.5
     dev: false
 
-  /@codemirror/state@6.1.2:
+  /@codemirror/state@6.2.0:
-    resolution: {integrity: sha512-Mxff85Hp5va+zuj+H748KbubXjrinX/k28lj43H14T2D0+4kuvEFIEIO7hCEcvBT8ubZyIelt9yGOjj2MWOEQA==}
+    resolution: {integrity: sha512-69QXtcrsc3RYtOtd+GsvczJ319udtBf1PTrr2KbLWM/e2CXUPnh0Nz9AUo8WfhSQ7GeL8dPVNUmhQVgpmuaNGA==}
     dev: false
 
-  /@codemirror/view@6.4.1:
+  /@codemirror/view@6.11.0:
-    resolution: {integrity: sha512-QdBpD6E5HYx6YFXXhqwrRyQ83w7CxWZnchM4QpWBVkkmV7/oJT8N+yz2KAi2iRaLObc/aOf7C2RCQTO2yswF8A==}
+    resolution: {integrity: sha512-PRpPRkqMkAKKxEuiUBxapE0YR+wqs9At92ujbJo93PwTZ0jEJDzx9wahrDcXEhQ43Pe0RK9DdZMLWrt+QN80DA==}
     dependencies:
-      '@codemirror/state': 6.1.2
+      '@codemirror/state': 6.2.0
       style-mod: 4.0.3
       w3c-keyname: 2.2.6
     dev: false
@@ -1544,40 +1554,6 @@ packages:
       '@floating-ui/core': 1.2.6
     dev: false
 
-  /@formatjs/ecma402-abstract@1.11.4:
-    resolution: {integrity: sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==}
-    dependencies:
-      '@formatjs/intl-localematcher': 0.2.25
-      tslib: 2.5.0
-    dev: false
-
-  /@formatjs/fast-memoize@1.2.1:
-    resolution: {integrity: sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==}
-    dependencies:
-      tslib: 2.5.0
-    dev: false
-
-  /@formatjs/icu-messageformat-parser@2.1.0:
-    resolution: {integrity: sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==}
-    dependencies:
-      '@formatjs/ecma402-abstract': 1.11.4
-      '@formatjs/icu-skeleton-parser': 1.3.6
-      tslib: 2.5.0
-    dev: false
-
-  /@formatjs/icu-skeleton-parser@1.3.6:
-    resolution: {integrity: sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==}
-    dependencies:
-      '@formatjs/ecma402-abstract': 1.11.4
-      tslib: 2.5.0
-    dev: false
-
-  /@formatjs/intl-localematcher@0.2.25:
-    resolution: {integrity: sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==}
-    dependencies:
-      tslib: 2.5.0
-    dev: false
-
   /@humanwhocodes/config-array@0.11.8:
     resolution: {integrity: sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==}
     engines: {node: '>=10.10.0'}
@@ -1862,12 +1838,12 @@ packages:
   /@lezer/css@1.1.1:
     resolution: {integrity: sha512-mSjx+unLLapEqdOYDejnGBokB5+AiJKZVclmud0MKQOKx3DLJ5b5VTCstgDDknR6iIV4gVrN6euzsCnj0A2gQA==}
     dependencies:
-      '@lezer/highlight': 1.1.3
+      '@lezer/highlight': 1.1.4
       '@lezer/lr': 1.3.4
     dev: false
 
-  /@lezer/highlight@1.1.3:
+  /@lezer/highlight@1.1.4:
-    resolution: {integrity: sha512-3vLKLPThO4td43lYRBygmMY18JN3CPh9w+XS2j8WC30vR4yZeFG4z1iFe4jXE43NtGqe//zHW5q8ENLlHvz9gw==}
+    resolution: {integrity: sha512-IECkFmw2l7sFcYXrV8iT9GeY4W0fU4CxX0WMwhmhMIVjoDdD1Hr6q3G2NqVtLg/yVe5n7i4menG3tJ2r4eCrPQ==}
     dependencies:
       '@lezer/common': 1.0.2
     dev: false
@@ -1876,21 +1852,21 @@ packages:
     resolution: {integrity: sha512-HdJYMVZcT4YsMo7lW3ipL4NoyS2T67kMPuSVS5TgLGqmaCjEU/D6xv7zsa1ktvTK5lwk7zzF1e3eU6gBZIPm5g==}
     dependencies:
       '@lezer/common': 1.0.2
-      '@lezer/highlight': 1.1.3
+      '@lezer/highlight': 1.1.4
       '@lezer/lr': 1.3.4
     dev: false
 
   /@lezer/javascript@1.4.3:
     resolution: {integrity: sha512-k7Eo9z9B1supZ5cCD4ilQv/RZVN30eUQL+gGbr6ybrEY3avBAL5MDiYi2aa23Aj0A79ry4rJRvPAwE2TM8bd+A==}
     dependencies:
-      '@lezer/highlight': 1.1.3
+      '@lezer/highlight': 1.1.4
       '@lezer/lr': 1.3.4
     dev: false
 
   /@lezer/json@1.0.0:
     resolution: {integrity: sha512-zbAuUY09RBzCoCA3lJ1+ypKw5WSNvLqGMtasdW6HvVOqZoCpPr8eWrsGnOVWGKGn8Rh21FnrKRVlJXrGAVUqRw==}
     dependencies:
-      '@lezer/highlight': 1.1.3
+      '@lezer/highlight': 1.1.4
       '@lezer/lr': 1.3.4
     dev: false
 
@@ -1904,13 +1880,13 @@ packages:
     resolution: {integrity: sha512-8CY0OoZ6V5EzPjSPeJ4KLVbtXdLBd8V6sRCooN5kHnO28ytreEGTyrtU/zUwo/XLRzGr/e1g44KlzKi3yWGB5A==}
     dependencies:
       '@lezer/common': 1.0.2
-      '@lezer/highlight': 1.1.3
+      '@lezer/highlight': 1.1.4
     dev: false
 
-  /@lezer/python@1.1.4:
+  /@lezer/python@1.1.5:
-    resolution: {integrity: sha512-x82XgYxqqX0Yiw7uIemQJ3z2QyQme5BYpectkPfNg99OQrakqfwqVolqEVIrsj4QO9rVDLFZZ49J0Vbne7UbAA==}
+    resolution: {integrity: sha512-h0DVr6IfrmKUbTc5PeetaC87IZYoHyn5JogsVYW5mRDpVRyEsvaLBMLyEN4Ufc2BKp1c9y2Pkr8ZNLxS8dTLsQ==}
     dependencies:
-      '@lezer/highlight': 1.1.3
+      '@lezer/highlight': 1.1.4
       '@lezer/lr': 1.3.4
     dev: false
 
@@ -2186,7 +2162,7 @@ packages:
   /@types/concat-stream@1.6.1:
     resolution: {integrity: sha512-eHE4cQPoj6ngxBZMvVf6Hw7Mh4jMW4U9lpGmS5GBPB9RYxlFg+CHaVN7ErNY4W9XfLIEn20b4VDYaIrbq0q4uA==}
     dependencies:
-      '@types/node': 8.10.66
+      '@types/node': 18.16.0
     dev: false
 
   /@types/cookie@0.5.1:
@@ -2223,7 +2199,7 @@ packages:
   /@types/form-data@0.0.33:
     resolution: {integrity: sha512-8BSvG1kGm83cyJITQMZSulnl6QV8jqAGreJsc5tPu1Jq0vTSOiY/k24Wx82JRpWwZSqrala6sd5rWi6aNXvqcw==}
     dependencies:
-      '@types/node': 8.10.66
+      '@types/node': 18.16.0
     dev: false
 
   /@types/graceful-fs@4.1.6:
@@ -2265,7 +2241,6 @@ packages:
 
   /@types/node@18.16.0:
     resolution: {integrity: sha512-BsAaKhB+7X+H4GnSjGhJG9Qi8Tw+inU9nJDwmD5CgOmBLEI6ArdhikpLX7DjbjDRDTbqZzU2LSQNZg8WGPiSZQ==}
-    dev: true
 
   /@types/node@8.10.66:
     resolution: {integrity: sha512-tktOkFUA4kXx2hhhrB8bIFb5TbwzS4uOhKEmwiD+NoiL0qtP2OQ9mFldbgD4dV1djrlBYP6eBuQZiWjuHUpqFw==}
@@ -2297,6 +2272,12 @@ packages:
     resolution: {integrity: sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==}
     dev: true
 
+  /@types/ws@8.5.4:
+    resolution: {integrity: sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==}
+    dependencies:
+      '@types/node': 18.16.0
+    dev: true
+
   /@types/yargs-parser@21.0.0:
     resolution: {integrity: sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==}
     dev: true
@@ -2784,7 +2765,7 @@ packages:
       wrap-ansi: 7.0.0
     dev: true
 
-  /cm6-theme-basic-dark@0.2.0(@codemirror/language@6.6.0)(@codemirror/state@6.1.2)(@codemirror/view@6.4.1)(@lezer/highlight@1.1.3):
+  /cm6-theme-basic-dark@0.2.0(@codemirror/language@6.6.0)(@codemirror/state@6.2.0)(@codemirror/view@6.11.0)(@lezer/highlight@1.1.4):
     resolution: {integrity: sha512-+mNNJecRtxS/KkloMDCQF0oTrT6aFGRZTjnBcdT5UG1pcDO4Brq8l1+0KR/8dZ7hub2gOGOzoi3rGFD8GzlH7Q==}
     peerDependencies:
       '@codemirror/language': ^6.0.0
@@ -2793,12 +2774,12 @@ packages:
       '@lezer/highlight': ^1.0.0
     dependencies:
       '@codemirror/language': 6.6.0
-      '@codemirror/state': 6.1.2
+      '@codemirror/state': 6.2.0
-      '@codemirror/view': 6.4.1
+      '@codemirror/view': 6.11.0
-      '@lezer/highlight': 1.1.3
+      '@lezer/highlight': 1.1.4
     dev: false
 
-  /cm6-theme-basic-light@0.2.0(@codemirror/language@6.6.0)(@codemirror/state@6.1.2)(@codemirror/view@6.4.1)(@lezer/highlight@1.1.3):
+  /cm6-theme-basic-light@0.2.0(@codemirror/language@6.6.0)(@codemirror/state@6.2.0)(@codemirror/view@6.11.0)(@lezer/highlight@1.1.4):
     resolution: {integrity: sha512-1prg2gv44sYfpHscP26uLT/ePrh0mlmVwMSoSd3zYKQ92Ab3jPRLzyCnpyOCQLJbK+YdNs4HvMRqMNYdy4pMhA==}
     peerDependencies:
       '@codemirror/language': ^6.0.0
@@ -2807,9 +2788,9 @@ packages:
       '@lezer/highlight': ^1.0.0
     dependencies:
       '@codemirror/language': 6.6.0
-      '@codemirror/state': 6.1.2
+      '@codemirror/state': 6.2.0
-      '@codemirror/view': 6.4.1
+      '@codemirror/view': 6.11.0
-      '@lezer/highlight': 1.1.3
+      '@lezer/highlight': 1.1.4
     dev: false
 
   /co@4.6.0:
@@ -2824,13 +2805,13 @@ packages:
   /codemirror@6.0.1(@lezer/common@1.0.2):
     resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
     dependencies:
-      '@codemirror/autocomplete': 6.3.0(@codemirror/language@6.6.0)(@codemirror/state@6.1.2)(@codemirror/view@6.4.1)(@lezer/common@1.0.2)
+      '@codemirror/autocomplete': 6.6.1(@codemirror/language@6.6.0)(@codemirror/state@6.2.0)(@codemirror/view@6.11.0)(@lezer/common@1.0.2)
-      '@codemirror/commands': 6.1.2
+      '@codemirror/commands': 6.2.4
       '@codemirror/language': 6.6.0
-      '@codemirror/lint': 6.0.0
+      '@codemirror/lint': 6.2.1
-      '@codemirror/search': 6.2.2
+      '@codemirror/search': 6.4.0
-      '@codemirror/state': 6.1.2
+      '@codemirror/state': 6.2.0
-      '@codemirror/view': 6.4.1
+      '@codemirror/view': 6.11.0
     transitivePeerDependencies:
       - '@lezer/common'
     dev: false
@@ -3091,13 +3072,6 @@ packages:
       d3-time-format: 4.1.0
     dev: false
 
-  /d3-shape@3.1.0:
-    resolution: {integrity: sha512-tGDh1Muf8kWjEDT/LswZJ8WF85yDZLvVJpYU9Nq+8+yW1Z5enxrmXOhTArlkaElU+CTn0OTVNli+/i+HP45QEQ==}
-    engines: {node: '>=12'}
-    dependencies:
-      d3-path: 3.1.0
-    dev: false
-
   /d3-shape@3.2.0:
     resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
     engines: {node: '>=12'}
@@ -4051,6 +4025,7 @@ packages:
 
   /globalyzer@0.1.0:
     resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
+    dev: true
 
   /globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
@@ -4066,6 +4041,7 @@ packages:
 
   /globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+    dev: true
 
   /graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
@@ -4211,15 +4187,6 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
-  /intl-messageformat@9.13.0:
-    resolution: {integrity: sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==}
-    dependencies:
-      '@formatjs/ecma402-abstract': 1.11.4
-      '@formatjs/fast-memoize': 1.2.1
-      '@formatjs/icu-messageformat-parser': 2.1.0
-      tslib: 2.5.0
-    dev: false
-
   /is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
     dev: true
@@ -5116,6 +5083,7 @@ packages:
   /mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
+    dev: true
 
   /mrmime@1.0.1:
     resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==}
@@ -5377,19 +5345,6 @@ packages:
       camelcase-css: 2.0.1
       postcss: 8.4.21
 
-  /postcss-load-config@3.1.1:
-    resolution: {integrity: sha512-c/9XYboIbSEUZpiD1UQD0IKiUe8n9WHYV7YFe7X7J+ZwCsEKkUJSFWjS9hBU1RR9THR7jMXst8sxiqP0jjo2mg==}
-    engines: {node: '>= 10'}
-    peerDependencies:
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      ts-node:
-        optional: true
-    dependencies:
-      lilconfig: 2.1.0
-      yaml: 1.10.2
-    dev: true
-
   /postcss-load-config@3.1.4(postcss@8.4.21):
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
     engines: {node: '>= 10'}
@@ -5709,6 +5664,7 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       mri: 1.2.0
+    dev: true
 
   /safe-buffer@5.1.2:
     resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
@@ -6016,7 +5972,7 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  /svelte-check@2.2.6(postcss-load-config@3.1.1)(postcss@8.4.21)(svelte@3.58.0):
+  /svelte-check@2.2.6(postcss-load-config@3.1.4)(postcss@8.4.21)(svelte@3.58.0):
     resolution: {integrity: sha512-oJux/afbmcZO+N+ADXB88h6XANLie8Y2rh2qBlhgfkpr2c3t/q/T0w2JWrHqagaDL8zeNwO8a8RVFBkrRox8gg==}
     hasBin: true
     peerDependencies:
@@ -6030,7 +5986,7 @@ packages:
       sade: 1.8.1
       source-map: 0.7.4
       svelte: 3.58.0
-      svelte-preprocess: 4.10.1(postcss-load-config@3.1.1)(postcss@8.4.21)(svelte@3.58.0)(typescript@5.0.3)
+      svelte-preprocess: 4.10.1(postcss-load-config@3.1.4)(postcss@8.4.21)(svelte@3.58.0)(typescript@5.0.3)
       typescript: 5.0.3
     transitivePeerDependencies:
       - '@babel/core'
@@ -6095,22 +6051,7 @@ packages:
     dependencies:
       svelte: 3.58.0
 
-  /svelte-i18n@3.3.13(svelte@3.58.0):
+  /svelte-preprocess@4.10.1(postcss-load-config@3.1.4)(postcss@8.4.21)(svelte@3.58.0)(typescript@4.5.4):
-    resolution: {integrity: sha512-RQM+ys4+Y9ztH//tX22H1UL2cniLNmIR+N4xmYygV6QpQ6EyQvloZiENRew8XrVzfvJ8HaE8NU6/yurLkl7z3g==}
-    engines: {node: '>= 11.15.0'}
-    hasBin: true
-    peerDependencies:
-      svelte: ^3.25.1
-    dependencies:
-      deepmerge: 4.3.1
-      estree-walker: 2.0.2
-      intl-messageformat: 9.13.0
-      sade: 1.8.1
-      svelte: 3.58.0
-      tiny-glob: 0.2.9
-    dev: false
-
-  /svelte-preprocess@4.10.1(postcss-load-config@3.1.1)(postcss@8.4.21)(svelte@3.58.0)(typescript@4.5.4):
     resolution: {integrity: sha512-NSNloaylf+o9UeyUR2KvpdxrAyMdHl3U7rMnoP06/sG0iwJvlUM4TpMno13RaNqovh4AAoGsx1jeYcIyuGUXMw==}
     engines: {node: '>= 9.11.2'}
     requiresBuild: true
@@ -6156,14 +6097,14 @@ packages:
       detect-indent: 6.1.0
       magic-string: 0.25.9
       postcss: 8.4.21
-      postcss-load-config: 3.1.1
+      postcss-load-config: 3.1.4(postcss@8.4.21)
       sorcery: 0.10.0
       strip-indent: 3.0.0
       svelte: 3.58.0
       typescript: 4.5.4
     dev: true
 
-  /svelte-preprocess@4.10.1(postcss-load-config@3.1.1)(postcss@8.4.21)(svelte@3.58.0)(typescript@5.0.3):
+  /svelte-preprocess@4.10.1(postcss-load-config@3.1.4)(postcss@8.4.21)(svelte@3.58.0)(typescript@5.0.3):
     resolution: {integrity: sha512-NSNloaylf+o9UeyUR2KvpdxrAyMdHl3U7rMnoP06/sG0iwJvlUM4TpMno13RaNqovh4AAoGsx1jeYcIyuGUXMw==}
     engines: {node: '>= 9.11.2'}
     requiresBuild: true
@@ -6209,7 +6150,7 @@ packages:
       detect-indent: 6.1.0
       magic-string: 0.25.9
       postcss: 8.4.21
-      postcss-load-config: 3.1.1
+      postcss-load-config: 3.1.4(postcss@8.4.21)
       sorcery: 0.10.0
       strip-indent: 3.0.0
       svelte: 3.58.0
@@ -6399,6 +6340,7 @@ packages:
     dependencies:
       globalyzer: 0.1.0
       globrex: 0.1.2
+    dev: true
 
   /tiny-invariant@1.3.1:
     resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==}
@@ -6483,13 +6425,8 @@ packages:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
     dev: true
 
-  /tslib@2.3.1:
-    resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
-    dev: true
-
   /tslib@2.5.0:
     resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==}
-    dev: false
 
   /tsutils@3.21.0(typescript@5.0.3):
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
@@ -7454,6 +7391,19 @@ packages:
       signal-exit: 3.0.7
     dev: true
 
+  /ws@8.13.0:
+    resolution: {integrity: sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dev: false
+
   /y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}

src/AppMobile.svelte

@@ -26,6 +26,7 @@
  import GraphPage from './mobile/routes/graph.svelte';
  import ListSubWorkflowsPage from './mobile/routes/list-subworkflows.svelte';
  import SubWorkflowPage from './mobile/routes/subworkflow.svelte';
+ import HellPage from './mobile/routes/hell.svelte';
 
  function onBackKeyDown(e) {
      if(f7.view.current.router.currentRoute.path == '/'){
@@ -74,6 +75,10 @@
              path: '/subworkflows/:subworkflowID/',
              component: SubWorkflowPage,
          },
+         {
+             path: '/hell/',
+             component: HellPage,
+         },
      ],
      popup: {
          closeOnEscape: true,

src/lib/components/AccordionContainer.svelte

@@ -20,6 +20,7 @@
  export let showHandles: boolean = false;
  export let edit: boolean = false;
  export let dragDisabled: boolean = false;
+ export let isMobile: boolean = false;
 
  let attrsChanged: Writable<boolean> | null = null;
  let children: IDragItem[] | null = null;
@@ -78,7 +79,7 @@
                                  animate:flip={{duration:flipDurationMs}}
                                  style={item?.attrs?.flexGrow ? `flex-grow: ${item.attrs.flexGrow}` : ""}
                             >
-                                <WidgetContainer dragItem={item} zIndex={zIndex+1} />
+                                <WidgetContainer dragItem={item} zIndex={zIndex+1} {isMobile} />
                                 {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
                                     <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                                 {/if}
@@ -97,7 +98,7 @@
             <Block elem_classes={["gradio-accordion"]}>
                 <Accordion label={container.attrs.title} open={container.attrs.openOnStartup}>
                     {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item(item.id)}
-                        <WidgetContainer dragItem={item} zIndex={zIndex+1} />
+                        <WidgetContainer dragItem={item} zIndex={zIndex+1} {isMobile} />
                     {/each}
                 </Accordion>
             </Block>

src/lib/components/BlockContainer.svelte

@@ -19,6 +19,7 @@
  export let showHandles: boolean = false;
  export let edit: boolean = false;
  export let dragDisabled: boolean = false;
+ export let isMobile: boolean = false;
 
  let attrsChanged: Writable<boolean> | null = null;
  let children: IDragItem[] | null = null;
@@ -80,7 +81,7 @@
                          animate:flip={{duration:flipDurationMs}}
                          style={item?.attrs?.flexGrow ? `flex-grow: ${item.attrs.flexGrow}` : ""}
                     >
-                        <WidgetContainer dragItem={item} zIndex={zIndex+1} />
+                        <WidgetContainer dragItem={item} zIndex={zIndex+1} {isMobile} />
                         {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
                             <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                         {/if}

src/lib/components/Container.svelte

@@ -19,6 +19,7 @@
  export let zIndex: number = 0;
  export let classes: string[] = [];
  export let showHandles: boolean = false;
+ export let isMobile: boolean = false
  let attrsChanged: Writable<boolean> | null = null;
 
  $: if (container) {
@@ -34,11 +35,11 @@
     {@const dragDisabled = zIndex === 0 || $layoutState.currentSelection.length > 2 || !$uiState.uiUnlocked}
     {#key $attrsChanged}
         {#if container.attrs.variant === "tabs"}
-            <TabsContainer {container} {zIndex} {classes} {showHandles} {edit} {dragDisabled} />
+            <TabsContainer {container} {zIndex} {classes} {showHandles} {edit} {dragDisabled} {isMobile} />
         {:else if container.attrs.variant === "accordion"}
-            <AccordionContainer {container} {zIndex} {classes} {showHandles} {edit} {dragDisabled} />
+            <AccordionContainer {container} {zIndex} {classes} {showHandles} {edit} {dragDisabled} {isMobile} />
         {:else}
-            <BlockContainer {container} {zIndex} {classes} {showHandles} {edit} {dragDisabled} />
+            <BlockContainer {container} {zIndex} {classes} {showHandles} {edit} {dragDisabled} {isMobile} />
         {/if}
     {/key}
 {/if}

src/lib/components/TabsContainer.svelte

@@ -20,6 +20,7 @@
  export let showHandles: boolean = false;
  export let edit: boolean = false;
  export let dragDisabled: boolean = false;
+ export let isMobile: boolean = false;
 
  let attrsChanged: Writable<boolean> | null = null;
  let children: IDragItem[] | null = null;
@@ -95,7 +96,7 @@
                                 <label for={String(item.id)}>
                                     <BlockTitle><strong>Tab {i+1}:</strong> {tabName}</BlockTitle>
                                 </label>
-                                <WidgetContainer dragItem={item} zIndex={zIndex+1} />
+                                <WidgetContainer dragItem={item} zIndex={zIndex+1} {isMobile} />
                                 {#if item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
                                     <div in:fade={{duration:200, easing: cubicIn}} class='drag-item-shadow'/>
                                 {/if}
@@ -115,7 +116,7 @@
                 {#each children.filter(item => item.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item, i(item.id)}
                     {@const tabName = getTabName(container, i)}
                     <TabItem name={tabName} on:select={() => console.log("tab " + i)}>
-                        <WidgetContainer dragItem={item} zIndex={zIndex+1} />
+                        <WidgetContainer dragItem={item} zIndex={zIndex+1} {isMobile} />
                     </TabItem>
                 {/each}
             </Tabs>

src/lib/components/WidgetContainer.svelte

@@ -11,6 +11,7 @@
  export let dragItem: IDragItem | null = null;
  export let zIndex: number = 0;
  export let classes: string[] = [];
+ export let isMobile: boolean = false;
  let container: ContainerLayout | null = null;
  let attrsChanged: Writable<boolean> | null = null;
  let propsChanged: Writable<number> | null = null;
@@ -59,7 +60,7 @@
 
 {#if container}
     {#key $attrsChanged}
-        <Container {container} {classes} {zIndex} {showHandles} />
+        <Container {container} {classes} {zIndex} {showHandles} {isMobile} />
     {/key}
 {:else if widget && widget.node}
     {@const edit = $uiState.uiUnlocked && $uiState.uiEditMode === "widgets" && zIndex > 1}
@@ -71,7 +72,7 @@
                 class:is-executing={$queueState.runningNodeId && $queueState.runningNodeId == widget.node.id}
                 class:hidden={widget.attrs.hidden}
                 >
-                <svelte:component this={widget.node.svelteComponentType} {widget} />
+                <svelte:component this={widget.node.svelteComponentType} {widget} {isMobile} />
             </div>
             {#if widget.attrs.hidden && edit}
                 <div class="handle handle-hidden" class:hidden={!edit} style="z-index: {zIndex+100}"/>

src/lib/components/gradio/form/Range.svelte

@@ -0,0 +1,128 @@
+<script context="module">
+	let _id = 0;
+</script>
+
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { BlockTitle } from "@gradio/atoms";
+
+	export let value: number = 0;
+	export let minimum: number = 0;
+	export let maximum: number = 100;
+	export let step: number = 1;
+	export let disabled: boolean = false;
+	export let label: string;
+	export let info: string | undefined = undefined;
+	export let show_label: boolean;
+
+	const id = `range_id_${_id++}`;
+	const dispatch = createEventDispatcher<{ change: number; release: number }>();
+	let inputValue = value;
+
+	function handle_input(e: Event) {
+		const element = e.currentTarget as HTMLInputElement;
+		let newValue = parseFloat(element.value);
+		if (isNaN(newValue)) {
+			newValue = minimum;
+		}
+		inputValue = Math.min(Math.max(inputValue, minimum), maximum);
+		value = inputValue;
+		dispatch("release", value);
+	}
+
+	function handle_release(e: MouseEvent) {
+		dispatch("release", value);
+	}
+
+	$: {
+		inputValue = value;
+		dispatch("change", value);
+	}
+	const clamp = () => {
+		dispatch("release", value);
+		value = Math.min(Math.max(value, minimum), maximum);
+	};
+</script>
+
+<div class="wrap">
+	<div class="head">
+		<label for={id}>
+			<BlockTitle {show_label} {info}>{label}</BlockTitle>
+		</label>
+		<input
+			data-testid="number-input"
+			type="number"
+			bind:value={inputValue}
+			on:input={handle_input}
+			min={minimum}
+			max={maximum}
+			on:blur={clamp}
+			{step}
+			{disabled}
+			on:mouseup={handle_release}
+		/>
+	</div>
+</div>
+
+<input
+	type="range"
+	{id}
+	name="cowbell"
+	bind:value
+	min={minimum}
+	max={maximum}
+	{step}
+	{disabled}
+	on:mouseup={handle_release}
+/>
+
+<style lang="scss">
+	.wrap {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+	}
+
+	.head {
+		display: flex;
+		justify-content: space-between;
+	}
+	input[type="number"] {
+		display: block;
+		position: relative;
+		outline: none !important;
+		box-shadow: var(--input-shadow);
+		border: var(--input-border-width) solid var(--input-border-color);
+		border-radius: var(--input-radius);
+		background: var(--input-background-fill);
+		padding: var(--size-2) var(--size-2);
+		height: var(--size-6);
+		color: var(--body-text-color);
+		font-size: var(--input-text-size);
+		line-height: var(--line-sm);
+		text-align: center;
+	}
+	input:disabled {
+		-webkit-text-fill-color: var(--body-text-color);
+		-webkit-opacity: 1;
+		opacity: 1;
+	}
+
+	input[type="number"]:focus {
+		box-shadow: var(--input-shadow-focus);
+		border-color: var(--input-border-color-focus);
+	}
+
+	input::placeholder {
+		color: var(--input-placeholder-color);
+	}
+
+	input[type="range"] {
+		width: 100%;
+        accent-color: var(--slider-color);
+    }
+
+ input[disabled] {
+     cursor: not-allowed;
+ }
+</style>

src/lib/components/gradio/form/index.ts

@@ -0,0 +1 @@
+export { default as Range } from "./Range.svelte"

src/lib/widgets/ButtonWidget.svelte

@@ -5,6 +5,7 @@
  import { Button } from "@gradio/button";
  import { get, type Writable, writable } from "svelte/store";
  export let widget: WidgetLayout | null = null;
+ export let isMobile: boolean = false;
  let node: ComfyButtonNode | null = null;
  let nodeValue: Writable<boolean> | null = null;
  let attrsChanged: Writable<boolean> | null = null;

src/lib/widgets/CheckboxWidget.svelte

@@ -6,6 +6,7 @@
  import { get, type Writable, writable } from "svelte/store";
 
  export let widget: WidgetLayout | null = null;
+ export let isMobile: boolean = false;
  let node: ComfyCheckboxNode | null = null;
  let nodeValue: Writable<boolean> | null = null;
  let attrsChanged: Writable<boolean> | null = null;

src/lib/widgets/ComboWidget.svelte

@@ -5,6 +5,7 @@
  import { type WidgetLayout } from "$lib/stores/layoutState";
  import { get, type Writable } from "svelte/store";
  export let widget: WidgetLayout | null = null;
+ export let isMobile: boolean = false;
  let node: ComfyComboNode | null = null;
  let nodeValue: Writable<string> | null = null;
  let propsChanged: Writable<number> | null = null;

src/lib/widgets/GalleryWidget.svelte

@@ -11,6 +11,7 @@
 	import { clamp } from "$lib/utils";
 
  export let widget: WidgetLayout | null = null;
+ export let isMobile: boolean = false;
  let node: ComfyGalleryNode | null = null;
  let nodeValue: Writable<GradioFileData[]> | null = null;
  let propsChanged: Writable<number> | null = null;

src/lib/widgets/RangeWidget.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
  import type { ComfySliderNode } from "$lib/nodes/index";
  import { type WidgetLayout } from "$lib/stores/layoutState";
- import { Range } from "@gradio/form";
+ import { Range } from "$lib/components/gradio/form";
  import { get, type Writable } from "svelte/store";
  export let widget: WidgetLayout | null = null;
+ export let isMobile: boolean = false;
  let node: ComfySliderNode | null = null;
  let nodeValue: Writable<number> | null = null;
  let propsChanged: Writable<number> | null = null;
@@ -39,7 +40,6 @@
      }
  }
 
- let gradient: string = ""
  let elem: HTMLDivElement = null;
 
  $: if (elem && node !== null && option !== null && (!$propsChanged || $propsChanged)) {
@@ -53,7 +53,7 @@
  }
 </script>
 
-<div class="wrapper gradio-slider" bind:this={elem}>
+<div class="wrapper gradio-slider" class:mobile={isMobile} bind:this={elem}>
     {#if node !== null && option !== null}
         <Range
             bind:value={option}
@@ -69,9 +69,18 @@
     {/if}
 </div>
 
-<style>
+<style lang="scss">
  .wrapper {
      padding: 2px;
      width: 100%;
+
+     // Prevent swiping on the slider track from accidentally changing the value
+     &.mobile :global(input[type="range"]) {
+         pointer-events: none;
+
+         &::-webkit-slider-thumb {
+             pointer-events: all;
+         }
+     }
  }
 </style>

src/lib/widgets/TextWidget.svelte

@@ -4,6 +4,7 @@
  import { type WidgetLayout } from "$lib/stores/layoutState";
  import { get, type Writable } from "svelte/store";
  export let widget: WidgetLayout | null = null;
+ export let isMobile: boolean = false;
  let node: ComfyComboNode | null = null;
  let nodeValue: Writable<string> | null = null;
  let propsChanged: Writable<number> | null = null;

src/mobile/routes/home.svelte

@@ -19,8 +19,8 @@
  onMount(async () => {
      if (app)
          return
-     app = $uiState.app = new ComfyApp();
 
+     app = $uiState.app = new ComfyApp();
 
      app.api.addEventListener("status", (ev: CustomEvent) => {
          queueState.statusUpdated(ev.detail as ComfyAPIStatus);
@@ -48,6 +48,9 @@
         <ListItem link="/graph/" title="Show Node Graph">
             <i class="icon icon-f7" slot="media" />
         </ListItem>
+        <ListItem link="/hell/" title="🔥 HELL 🔥">
+            <i class="icon icon-f7" slot="media" />
+        </ListItem>
     </List>
 
     <div class="canvas-wrapper pane-wrapper" style="display: none">

src/mobile/routes/subworkflow.svelte

@@ -11,10 +11,16 @@
 <Page name="subworkflow">
     <Navbar title="Workflow {subworkflowID}" backLink="Back" />
 
-    <WidgetContainer bind:dragItem={$layoutState.root} classes={["root-container", "mobile"]} />
+    <div class="container">
+        <WidgetContainer bind:dragItem={$layoutState.root} isMobile={true} classes={["root-container", "mobile"]} />
+    </div>
 </Page>
 
 <style lang="scss">
+ .container {
+     overflow-x: hidden;
+ }
+
  // TODO generalize this to all properties!
  :global(.root-container.mobile > .block > .v-pane) {
      flex-direction: column !important;

src/scss/global.scss

@@ -2,4 +2,7 @@
 
 body {
     overflow: hidden;
+
+    // Disable pull to refresh
+    overscroll-behavior-y: contain;
 }