update metrics

* chore(main): release 1.70.1

* Apply automatic changes

---------

Co-authored-by: rubenfiszel <rubenfiszel@users.noreply.github.com>

.github/workflows/docker-image.yml

@@ -182,7 +182,7 @@ jobs:
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Build and push privately
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v3
         if: github.event_name != 'pull_request'
         with:
           context: .
@@ -222,7 +222,7 @@ jobs:
           password: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           
       - name: Build and push privately
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v3
         if: github.event_name != 'pull_request'
         with:
           context: .

.github/workflows/pypi_on_release.yml

@@ -65,7 +65,7 @@ jobs:
           password: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
 
       - name: Build and push publicly
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v3
         with:
           context: "{{defaultContext}}:lsp"
           push: true

.github/workflows/uffizzi-build.yml

@@ -25,12 +25,12 @@ jobs:
         run: echo "UUID_TAG_APP=$(uuidgen)" >> $GITHUB_ENV
       - name: Docker metadata
         id: meta
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v3
         with:
           images: registry.uffizzi.com/${{ env.UUID_TAG_APP }}
           tags: type=raw,value=60d
       - name: Build and Push Image to registry.uffizzi.com ephemeral registry
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v2
         with:
           push: true
           context: ./

CHANGELOG.md

@@ -1,25 +1,6 @@
 # Changelog
 
 
-## [1.71.0](https://github.com/windmill-labs/windmill/compare/v1.70.1...v1.71.0) (2023-02-28)
-
-
-### Features
-
-* **backend:** use counter for sleep/execution/pull durations ([e568690](https://github.com/windmill-labs/windmill/commit/e56869092a03fec4703ddd9ef65c89edb8122962))
-* **cli:** add autocompletions ([287b2db](https://github.com/windmill-labs/windmill/commit/287b2db22f7b56e90bcd0c4727c00096695c2e0d))
-* **frontend:** App drawer ([#1246](https://github.com/windmill-labs/windmill/issues/1246)) ([8a0d115](https://github.com/windmill-labs/windmill/commit/8a0d1158c4d7e970cb91e1adf4838e5efdbb39ff))
-* **frontend:** drawer for editing workspace scripts in flows ([6adc875](https://github.com/windmill-labs/windmill/commit/6adc87561070d8aceaba1838008cd7e6be2e2660))
-
-
-### Bug Fixes
-
-* **frontend:** Add more app custom css ([#1229](https://github.com/windmill-labs/windmill/issues/1229)) ([a4e4d18](https://github.com/windmill-labs/windmill/commit/a4e4d188ad10443dd0b7f104389594efc768dc59))
-* **frontend:** Add more app custom css ([#1247](https://github.com/windmill-labs/windmill/issues/1247)) ([1bb5ed9](https://github.com/windmill-labs/windmill/commit/1bb5ed9ae01fd7998b06833b6222e5dd5d774d35))
-* **frontend:** display currently selected filter even if not in list ([42d1cd6](https://github.com/windmill-labs/windmill/commit/42d1cd6456620ba917c560c87d736dc93634adff))
-* **frontend:** Fix deeply nested move ([#1245](https://github.com/windmill-labs/windmill/issues/1245)) ([a67f10e](https://github.com/windmill-labs/windmill/commit/a67f10eeb6fdb44bbb3a510badcc5ad0ae187a2b))
-* **frontend:** invisible subgrids have h-0 + app policies fix ([2244e83](https://github.com/windmill-labs/windmill/commit/2244e83b9da803a4cf46ab0825d7cb6cb0e24872))
-
 ## [1.70.1](https://github.com/windmill-labs/windmill/compare/v1.70.0...v1.70.1) (2023-02-27)
 
 

backend/Cargo.lock

@@ -525,9 +525,9 @@ dependencies = [
 
 [[package]]
 name = "clap"
-version = "4.1.8"
+version = "4.1.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c3d7ae14b20b94cb02149ed21a86c423859cbe18dc7ed69845cace50e52b40a5"
+checksum = "ec0b0588d44d4d63a87dbd75c136c166bbfd9a86a31cb89e09906521c7d3f5e3"
 dependencies = [
  "bitflags",
  "clap_derive",
@@ -540,9 +540,9 @@ dependencies = [
 
 [[package]]
 name = "clap_derive"
-version = "4.1.8"
+version = "4.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "44bec8e5c9d09e439c4335b1af0abaab56dcf3b94999a936e1bb47b9134288f0"
+checksum = "684a277d672e91966334af371f1a7b5833f9aa00b07c84e92fbce95e00208ce8"
 dependencies = [
  "heck",
  "proc-macro-error",
@@ -704,9 +704,9 @@ dependencies = [
 
 [[package]]
 name = "crossbeam-utils"
-version = "0.8.15"
+version = "0.8.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3c063cd8cc95f5c377ed0d4b49a4b21f632396ff690e8470c29b3359b346984b"
+checksum = "4fb766fa798726286dbbb842f174001dab8abc7b627a1dd86e0b7222a95d929f"
 dependencies = [
  "cfg-if",
 ]
@@ -966,9 +966,9 @@ checksum = "03d8c417d7a8cb362e0c37e5d815f5eb7c37f79ff93707329d5a194e42e54ca0"
 
 [[package]]
 name = "dyn-clone"
-version = "1.0.11"
+version = "1.0.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "68b0cf012f1230e43cd00ebb729c6bb58707ecfa8ad08b52ef3a4ccd2697fc30"
+checksum = "c9b0705efd4599c15a38151f4721f7bc388306f61084d3bfd50bd07fbca5cb60"
 
 [[package]]
 name = "dyn-iter"
@@ -1324,9 +1324,9 @@ dependencies = [
 
 [[package]]
 name = "h2"
-version = "0.3.16"
+version = "0.3.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5be7b54589b581f624f566bf5d8eb2bab1db736c51528720b6bd36b96b55924d"
+checksum = "5f9f29bc9dda355256b2916cf526ab02ce0aeaaaf2bad60d65ef3f12f11dd0f4"
 dependencies = [
  "bytes",
  "fnv",
@@ -1678,9 +1678,9 @@ checksum = "fad582f4b9e86b6caa621cabeb0963332d92eea04729ab12892c2533951e6440"
 
 [[package]]
 name = "jobserver"
-version = "0.1.26"
+version = "0.1.25"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "936cfd212a0155903bcbc060e316fb6cc7cbf2e1907329391ebadc1fe0ce77c2"
+checksum = "068b1ee6743e4d11fb9c6a1e6064b3693a1b600e7f5f5988047d98b3dc9fb90b"
 dependencies = [
  "libc",
 ]
@@ -2048,6 +2048,15 @@ dependencies = [
  "minimal-lexical",
 ]
 
+[[package]]
+name = "nom8"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ae01545c9c7fc4486ab7debaf2aad7003ac19431791868fb2e8066df97fad2f8"
+dependencies = [
+ "memchr",
+]
+
 [[package]]
 name = "nu-ansi-term"
 version = "0.46.0"
@@ -2507,9 +2516,9 @@ checksum = "925383efa346730478fb4838dbe9137d2a47675ad789c546d150a6e1dd4ab31c"
 
 [[package]]
 name = "proc-macro-crate"
-version = "1.3.1"
+version = "1.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7f4c021e1093a56626774e81216a4ce732a735e5bad4868a03f3ed65ca0c3919"
+checksum = "66618389e4ec1c7afe67d51a9bf34ff9236480f8d51e7489b7d5ab0303c13f34"
 dependencies = [
  "once_cell",
  "toml_edit",
@@ -2985,7 +2994,7 @@ dependencies = [
 [[package]]
 name = "rustpython-ast"
 version = "0.2.0"
-source = "git+https://github.com/RustPython/RustPython#f2515405b59f8fe3b9be59d4454783c2dc2d83d1"
+source = "git+https://github.com/RustPython/RustPython#351d464448607413dc12de6905f1165f8d45af54"
 dependencies = [
  "num-bigint",
  "rustpython-compiler-core",
@@ -2994,7 +3003,7 @@ dependencies = [
 [[package]]
 name = "rustpython-compiler-core"
 version = "0.2.0"
-source = "git+https://github.com/RustPython/RustPython#f2515405b59f8fe3b9be59d4454783c2dc2d83d1"
+source = "git+https://github.com/RustPython/RustPython#351d464448607413dc12de6905f1165f8d45af54"
 dependencies = [
  "bincode",
  "bitflags",
@@ -3011,7 +3020,7 @@ dependencies = [
 [[package]]
 name = "rustpython-parser"
 version = "0.2.0"
-source = "git+https://github.com/RustPython/RustPython#f2515405b59f8fe3b9be59d4454783c2dc2d83d1"
+source = "git+https://github.com/RustPython/RustPython#351d464448607413dc12de6905f1165f8d45af54"
 dependencies = [
  "ahash",
  "anyhow",
@@ -3679,9 +3688,9 @@ checksum = "6bdef32e8150c2a081110b42772ffe7d7c9032b606bc226c8260fd97e0976601"
 
 [[package]]
 name = "swc_atoms"
-version = "0.4.38"
+version = "0.4.37"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5a172f2e444ae1378286cd27ff2a5cb26eadfd7a77c98ccb0edde8992857be1e"
+checksum = "f88175a66f5a7c189e752bda520e148317776ecb22c75adc2c2f24c490834bd0"
 dependencies = [
  "once_cell",
  "rustc-hash",
@@ -3693,9 +3702,9 @@ dependencies = [
 
 [[package]]
 name = "swc_common"
-version = "0.29.33"
+version = "0.29.32"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a8a75c46065858a37cdda2c1c6fd056986e3b7752d5ec332e91ce312c6a22749"
+checksum = "1fc8e0e8109b26be70c82d9709562fc88cbcc09e03c2458221cf216c0088dea2"
 dependencies = [
  "ahash",
  "ast_node",
@@ -3720,9 +3729,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_ast"
-version = "0.98.0"
+version = "0.96.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7b1f6bc913d0f1daf0fa713a64660aed27848e0047ee671ab2206ad602730d1f"
+checksum = "621c66e27fbb6cbb6434a4e2b25e439e9a2583cc3419a4a83eba51d16ac0cd7b"
 dependencies = [
  "bitflags",
  "is-macro",
@@ -3737,9 +3746,9 @@ dependencies = [
 
 [[package]]
 name = "swc_ecma_parser"
-version = "0.127.0"
+version = "0.124.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3875db58a1515382c670679062133294e5ec88aff08776f5fb6e4f3c09c0f5f9"
+checksum = "89b3f472b3dfbfd279de364d2b014459a281824b938e243a8739037c445d6b6c"
 dependencies = [
  "either",
  "enum_kind",
@@ -4071,19 +4080,19 @@ dependencies = [
 
 [[package]]
 name = "toml_datetime"
-version = "0.6.1"
+version = "0.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3ab8ed2edee10b50132aed5f331333428b011c99402b5a534154ed15746f9622"
+checksum = "4553f467ac8e3d374bc9a177a26801e5d0f9b211aa1673fb137a403afd1c9cf5"
 
 [[package]]
 name = "toml_edit"
-version = "0.19.4"
+version = "0.18.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9a1eb0622d28f4b9c90adc4ea4b2b46b47663fde9ac5fafcb14a1369d5508825"
+checksum = "56c59d8dd7d0dcbc6428bf7aa2f0e823e26e43b3c9aca15bbc9475d23e5fa12b"
 dependencies = [
  "indexmap",
+ "nom8",
  "toml_datetime",
- "winnow",
 ]
 
 [[package]]
@@ -4456,11 +4465,9 @@ checksum = "39ec24b3121d976906ece63c9daad25b85969647682eee313cb5779fdd69e14e"
 
 [[package]]
 name = "unicode_names2"
-version = "0.6.0"
-source = "git+https://github.com/youknowone/unicode_names2.git?tag=v0.6.0+character-alias#4ce16aa85cbcdd9cc830410f1a72ef9a235f2fde"
-dependencies = [
- "phf",
-]
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "029df4cc8238cefc911704ff8fa210853a0f3bce2694d8f51181dd41ee0f3301"
 
 [[package]]
 name = "unsafe-libyaml"
@@ -4749,7 +4756,7 @@ checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f"
 
 [[package]]
 name = "windmill"
-version = "1.71.0"
+version = "1.70.1"
 dependencies = [
  "anyhow",
  "axum",
@@ -4776,7 +4783,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-api"
-version = "1.71.0"
+version = "1.70.1"
 dependencies = [
  "anyhow",
  "argon2",
@@ -4831,7 +4838,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-api-client"
-version = "1.71.0"
+version = "1.70.1"
 dependencies = [
  "base64 0.21.0",
  "chrono",
@@ -4846,7 +4853,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-audit"
-version = "1.71.0"
+version = "1.70.1"
 dependencies = [
  "chrono",
  "serde",
@@ -4859,7 +4866,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-common"
-version = "1.71.0"
+version = "1.70.1"
 dependencies = [
  "anyhow",
  "axum",
@@ -4884,7 +4891,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser"
-version = "1.71.0"
+version = "1.70.1"
 dependencies = [
  "serde",
  "serde_json",
@@ -4892,7 +4899,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-bash"
-version = "1.71.0"
+version = "1.70.1"
 dependencies = [
  "anyhow",
  "itertools",
@@ -4906,7 +4913,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-go"
-version = "1.71.0"
+version = "1.70.1"
 dependencies = [
  "anyhow",
  "itertools",
@@ -4918,7 +4925,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-py"
-version = "1.71.0"
+version = "1.70.1"
 dependencies = [
  "anyhow",
  "itertools",
@@ -4933,7 +4940,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-parser-ts"
-version = "1.71.0"
+version = "1.70.1"
 dependencies = [
  "anyhow",
  "deno_core",
@@ -4947,7 +4954,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-queue"
-version = "1.71.0"
+version = "1.70.1"
 dependencies = [
  "anyhow",
  "chrono",
@@ -4970,7 +4977,7 @@ dependencies = [
 
 [[package]]
 name = "windmill-worker"
-version = "1.71.0"
+version = "1.70.1"
 dependencies = [
  "anyhow",
  "async-recursion",
@@ -5084,15 +5091,6 @@ version = "0.42.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "447660ad36a13288b1db4d4248e857b510e8c3a225c822ba4fb748c0aafecffd"
 
-[[package]]
-name = "winnow"
-version = "0.3.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "faf09497b8f8b5ac5d3bb4d05c0a99be20f26fd3d5f2db7b0716e946d5103658"
-dependencies = [
- "memchr",
-]
-
 [[package]]
 name = "winreg"
 version = "0.10.1"

backend/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "windmill"
-version = "1.71.0"
+version = "1.70.1"
 authors.workspace = true
 edition.workspace = true
 
@@ -19,7 +19,7 @@ members = [
 ]
 
 [workspace.package]
-version = "1.71.0"
+version = "1.70.1"
 authors = ["Ruben Fiszel <ruben@windmill.dev>"]
 edition = "2021"
 

backend/migrations/20230227100232_update_included_scripts_with_deno_changes.up.sql

@@ -1165,3 +1165,18 @@ VALUES
 }') RETURNING id)
 UPDATE app SET versions = ARRAY((select id from _insert)), policy =  '{ "execution_mode": "viewer", "triggerables": {} }'
  WHERE workspace_id = 'admins' AND path = 'g/all/setup_app';
+
+UPDATE script SET content = 'import wmill from "https://deno.land/x/wmill@v1.69.3/main.ts";
+export async function main() {
+  await run(
+    "workspace", "add", "__automation", "admins", Deno.env.get("BASE_INTERNAL_URL") + "/", "--token", Deno.env.get("WM_TOKEN"));
+
+  await run("hub", "pull");
+}
+
+async function run(...cmd: string[]) {
+  console.log("Running \"" + cmd.join('' '') + "\"");
+  await wmill.parse(cmd);
+}', summary = 'Synchronize Hub Resource types with admins workspace',
+description = 'Basic administrative script to sync latest resource types from hub to share to every workspace. Recommended to run at least once. On a schedule by default.'
+WHERE hash = -28028598712388162 AND workspace_id = 'admins';

backend/migrations/20230227131521_update_included_scripts_with_deno_changes.down.sql

@@ -1 +0,0 @@
--- Add down migration script here

backend/migrations/20230227131521_update_included_scripts_with_deno_changes.up.sql

@@ -1,16 +0,0 @@
--- Add up migration script here
-
-UPDATE script SET content = 'import wmill from "https://deno.land/x/wmill@v1.70.1/main.ts";
-export async function main() {
-  await run(
-    "workspace", "add", "__automation", "admins", Deno.env.get("BASE_INTERNAL_URL") + "/", "--token", Deno.env.get("WM_TOKEN"));
-
-  await run("hub", "pull");
-}
-
-async function run(...cmd: string[]) {
-  console.log("Running \"" + cmd.join('' '') + "\"");
-  await wmill.parse(cmd);
-}', summary = 'Synchronize Hub Resource types with admins workspace',
-description = 'Basic administrative script to sync latest resource types from hub to share to every workspace. Recommended to run at least once. On a schedule by default.'
-WHERE hash = -28028598712388162 AND workspace_id = 'admins';

backend/src/main.rs

@@ -60,60 +60,6 @@ async fn main() -> anyhow::Result<()> {
     let (tx, rx) = tokio::sync::broadcast::channel::<()>(3);
     let shutdown_signal = windmill_common::shutdown_signal(tx);
 
-    #[cfg(feature = "enterprise")]
-    tracing::info!(
-        "
-##############################
-Windmill Enterprise Edition {GIT_VERSION}
-##############################"
-    );
-
-    #[cfg(not(feature = "enterprise"))]
-    tracing::info!(
-        "
-##############################
-Windmill Community Edition {GIT_VERSION}
-##############################"
-    );
-
-    display_config(vec![
-        "DISABLE_NSJAIL",
-        "DISABLE_SERVER",
-        "NUM_WORKERS",
-        "METRICS_ADDR",
-        "JSON_FMT",
-        "BASE_URL",
-        "BASE_INTERNAL_URL",
-        "TIMEOUT",
-        "SLEEP_QUEUE",
-        "MAX_LOG_SIZE",
-        "PORT",
-        "KEEP_JOB_DIR",
-        "S3_CACHE_BUCKET",
-        "TAR_CACHE_RATE",
-        "COOKIE_DOMAIN",
-        "PYTHON_PATH",
-        "DENO_PATH",
-        "GO_PATH",
-        "PIP_INDEX_URL",
-        "PIP_EXTRA_INDEX_URL",
-        "PIP_TRUSTED_HOST",
-        "PATH",
-        "HOME",
-        "DATABASE_CONNECTIONS",
-        "TIMEOUT_WAIT_RESULT",
-        "QUEUE_LIMIT_WAIT_RESULT",
-        "DENO_AUTH_TOKENS",
-        "DENO_FLAGS",
-        "PIP_LOCAL_DEPENDENCIES",
-        "ADDITIONAL_PYTHON_PATHS",
-        "INCLUDE_HEADERS",
-        "WHITELIST_WORKSPACES",
-        "BLACKLIST_WORKSPACES",
-        "NEW_USER_WEBHOOK",
-        "CLOUD_HOSTED",
-    ]);
-
     if server_mode || num_workers > 0 {
         let addr = SocketAddr::from(([0, 0, 0, 0], port));
 
@@ -126,6 +72,60 @@ Windmill Community Edition {GIT_VERSION}
 
         let workers_f = async {
             if num_workers > 0 {
+                #[cfg(feature = "enterprise")]
+                tracing::info!(
+                    "
+##############################
+Windmill Enterprise Edition {GIT_VERSION}
+##############################"
+                );
+
+                #[cfg(not(feature = "enterprise"))]
+                tracing::info!(
+                    "
+##############################
+Windmill Community Edition {GIT_VERSION}
+##############################"
+                );
+
+                display_config(vec![
+                    "DISABLE_NSJAIL",
+                    "DISABLE_SERVER",
+                    "NUM_WORKERS",
+                    "METRICS_ADDR",
+                    "JSON_FMT",
+                    "BASE_URL",
+                    "BASE_INTERNAL_URL",
+                    "TIMEOUT",
+                    "SLEEP_QUEUE",
+                    "MAX_LOG_SIZE",
+                    "PORT",
+                    "KEEP_JOB_DIR",
+                    "S3_CACHE_BUCKET",
+                    "TAR_CACHE_RATE",
+                    "COOKIE_DOMAIN",
+                    "PYTHON_PATH",
+                    "DENO_PATH",
+                    "GO_PATH",
+                    "PIP_INDEX_URL",
+                    "PIP_EXTRA_INDEX_URL",
+                    "PIP_TRUSTED_HOST",
+                    "PATH",
+                    "HOME",
+                    "DATABASE_CONNECTIONS",
+                    "TIMEOUT_WAIT_RESULT",
+                    "QUEUE_LIMIT_WAIT_RESULT",
+                    "DENO_AUTH_TOKENS",
+                    "DENO_FLAGS",
+                    "PIP_LOCAL_DEPENDENCIES",
+                    "ADDITIONAL_PYTHON_PATHS",
+                    "INCLUDE_HEADERS",
+                    "WHITELIST_WORKSPACES",
+                    "BLACKLIST_WORKSPACES",
+                    "NEW_USER_WEBHOOK",
+                    "CLOUD_HOSTED",
+                ]);
+
                 run_workers(
                     db.clone(),
                     rx.resubscribe(),

backend/windmill-api/openapi.yaml

@@ -1,7 +1,7 @@
 openapi: "3.0.3"
 
 info:
-  version: 1.71.0
+  version: 1.70.1
   title: Windmill API
 
   contact:

backend/windmill-api/src/users.rs

@@ -1311,9 +1311,7 @@ async fn create_user(
     if let Some(new_user_webhook) = NEW_USER_WEBHOOK.clone() {
         let _ = HTTP_CLIENT
             .post(&new_user_webhook)
-            .json(
-                &serde_json::json!({"email" : &nu.email, "name": &nu.name, "event": "global_add"}),
-            )
+            .json(&serde_json::json!({"email" : &nu.email, "name": &nu.name, "event": "new_user"}))
             .send()
             .await
             .map_err(|e| tracing::error!("Error sending new user webhook: {}", e.to_string()));

backend/windmill-api/src/workspaces.rs

@@ -965,7 +965,7 @@ async fn invite_user(
     if let Some(new_user_webhook) = NEW_USER_WEBHOOK.clone() {
         let _ = &HTTP_CLIENT
             .post(&new_user_webhook)
-            .json(&serde_json::json!({"email" : &nu.email, "event": "workspace_invite"}))
+            .json(&serde_json::json!({"email" : &nu.email, "event": "new_invite"}))
             .send()
             .await
             .map_err(|e| tracing::error!("Error sending new user webhook: {}", e.to_string()));
@@ -1002,15 +1002,6 @@ async fn add_user(
 
     tx.commit().await?;
 
-    if let Some(new_user_webhook) = NEW_USER_WEBHOOK.clone() {
-        let _ = HTTP_CLIENT
-            .post(&new_user_webhook)
-            .json(&serde_json::json!({"email" : &nu.email, "event": "workspace_add"}))
-            .send()
-            .await
-            .map_err(|e| tracing::error!("Error sending new user webhook: {}", e.to_string()));
-    }
-
     Ok((
         StatusCode::CREATED,
         format!("user with email {} added", nu.email),

backend/windmill-worker/src/worker.rs

@@ -478,7 +478,7 @@ pub async fn run_worker(
 
 
     let worker_sleep_duration_counter = prometheus::register_counter!(prometheus::opts!(
-        "worker_sleep_duration_counter",
+        "worker_execution_sleep_counter",
         "Total number of seconds spent sleeping between pulling jobs from the queue"
     )
         .const_label("name", &worker_name))
@@ -493,7 +493,7 @@ pub async fn run_worker(
     .expect("register prometheus metric");
 
     let worker_pull_duration_counter = prometheus::register_counter!(prometheus::opts!(
-        "worker_pull_duration_counter",
+        "worker_pull_sleep_counter",
         "Total number of seconds spent pulling jobs (if growing large the db is undersized)"
     )
         .const_label("name", &worker_name))

cli/deps.ts

@@ -14,7 +14,7 @@ export {
   DenoLandProvider,
   UpgradeCommand,
 } from "https://deno.land/x/cliffy@v0.25.7/command/upgrade/mod.ts";
-export { CompletionsCommand } from "https://deno.land/x/cliffy@v0.25.7/command/completions/mod.ts";
+
 // std
 export * as path from "https://deno.land/std@0.176.0/path/mod.ts";
 export { ensureDir } from "https://deno.land/std@0.176.0/fs/ensure_dir.ts";

cli/main.ts

@@ -1,4 +1,4 @@
-import { Command, CompletionsCommand, DenoLandProvider, UpgradeCommand } from "./deps.ts";
+import { Command, DenoLandProvider, UpgradeCommand } from "./deps.ts";
 import flow from "./flow.ts";
 import script from "./script.ts";
 import workspace from "./workspace.ts";
@@ -13,7 +13,7 @@ import sync from "./sync.ts";
 import { tryResolveVersion } from "./context.ts";
 import { GlobalOptions } from "./types.ts";
 
-const VERSION = "v1.71.0";
+const VERSION = "v1.70.1";
 
 let command: any = new Command()
   .name("wmill")
@@ -60,8 +60,7 @@ let command: any = new Command()
       ],
       provider: new DenoLandProvider({ name: "wmill" }),
     }),
-  )
-  .command("completions", new CompletionsCommand());
+  );
 
 if (Number.parseInt(VERSION.replace("v", "").replace(".", "")) > 1700) {
   command = command

cli/workspace.ts

@@ -312,9 +312,8 @@ const command = new Command()
   .description("workspace related commands")
   .action(list as any)
   .command("switch")
-  .complete("workspace", async () => (await allWorkspaces()).map((x) => x.name))
   .description("Switch to another workspace")
-  .arguments("<workspace_name:string:workspace>")
+  .arguments("<workspace_name:string>")
   .action(switchC as any)
   .command("add")
   .description("Add a workspace")

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "windmill",
-	"version": "1.71.0",
+	"version": "1.70.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "windmill",
-			"version": "1.71.0",
+			"version": "1.70.1",
 			"dependencies": {
 				"@fortawesome/free-brands-svg-icons": "^6.2.1",
 				"@fortawesome/free-solid-svg-icons": "^6.2.1",
@@ -30,12 +30,12 @@
 				"svelte-autosize": "^1.0.1",
 				"svelte-chartjs": "^3.1.0",
 				"svelte-portal": "^2.2.0",
-				"svelte-select": "^5.3.1",
+				"svelte-select": "^5.0.2",
 				"tailwind-merge": "^1.9.1",
 				"vscode-ws-jsonrpc": "^2.0.1"
 			},
 			"devDependencies": {
-				"@playwright/test": "^1.31.1",
+				"@playwright/test": "^1.29.2",
 				"@sveltejs/adapter-static": "^1.0.0",
 				"@sveltejs/kit": "^1.0.0-next.589",
 				"@sveltejs/package": "^1.0.2",
@@ -604,16 +604,16 @@
 			}
 		},
 		"node_modules/@floating-ui/core": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.1.tgz",
-			"integrity": "sha512-LSqwPZkK3rYfD7GKoIeExXOyYx6Q1O4iqZWwIehDNuv3Dv425FIAE8PRwtAx1imEolFTHgBEcoFHm9MDnYgPCg=="
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.0.5.tgz",
+			"integrity": "sha512-iDdOsaCHZH/0FM0yNBYt+cJxJF9S5jrYWNtDZOiDFMiZ7uxMJ/71h8eTwoVifEAruv9p9rlMPYCGIgMjOz95FQ=="
 		},
 		"node_modules/@floating-ui/dom": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.1.tgz",
-			"integrity": "sha512-Rt45SmRiV8eU+xXSB9t0uMYiQ/ZWGE/jumse2o3i5RGlyvcbqOF4q+1qBnzLE2kZ5JGhq0iMkcGXUKbFe7MpTA==",
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.0.tgz",
+			"integrity": "sha512-TSogMPVxbRe77QCj1dt8NmRiJasPvuc+eT5jnJ6YpLqgOD2zXc5UA3S1qwybN+GVCDNdKfpKy1oj8RpzLJvh6A==",
 			"dependencies": {
-				"@floating-ui/core": "^1.2.1"
+				"@floating-ui/core": "^1.0.5"
 			}
 		},
 		"node_modules/@fortawesome/fontawesome-common-types": {
@@ -754,22 +754,19 @@
 			}
 		},
 		"node_modules/@playwright/test": {
-			"version": "1.31.1",
-			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.31.1.tgz",
-			"integrity": "sha512-IsytVZ+0QLDh1Hj83XatGp/GsI1CDJWbyDaBGbainsh0p2zC7F4toUocqowmjS6sQff2NGT3D9WbDj/3K2CJiA==",
+			"version": "1.29.2",
+			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.29.2.tgz",
+			"integrity": "sha512-+3/GPwOgcoF0xLz/opTnahel1/y42PdcgZ4hs+BZGIUjtmEFSXGg+nFoaH3NSmuc7a6GSFwXDJ5L7VXpqzigNg==",
 			"dev": true,
 			"dependencies": {
 				"@types/node": "*",
-				"playwright-core": "1.31.1"
+				"playwright-core": "1.29.2"
 			},
 			"bin": {
 				"playwright": "cli.js"
 			},
 			"engines": {
 				"node": ">=14"
-			},
-			"optionalDependencies": {
-				"fsevents": "2.3.2"
 			}
 		},
 		"node_modules/@polka/url": {
@@ -2461,8 +2458,7 @@
 		"node_modules/dedent-js": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz",
-			"integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==",
-			"dev": true
+			"integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ=="
 		},
 		"node_modules/deep-extend": {
 			"version": "0.6.0",
@@ -3877,7 +3873,6 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
 			"integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
-			"dev": true,
 			"dependencies": {
 				"tslib": "^2.0.3"
 			}
@@ -4273,7 +4268,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
 			"integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
-			"dev": true,
 			"dependencies": {
 				"lower-case": "^2.0.2",
 				"tslib": "^2.0.3"
@@ -4508,7 +4502,6 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
 			"integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
-			"dev": true,
 			"dependencies": {
 				"no-case": "^3.0.4",
 				"tslib": "^2.0.3"
@@ -4603,9 +4596,9 @@
 			}
 		},
 		"node_modules/playwright-core": {
-			"version": "1.31.1",
-			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.31.1.tgz",
-			"integrity": "sha512-JTyX4kV3/LXsvpHkLzL2I36aCdml4zeE35x+G5aPc4bkLsiRiQshU5lWeVpHFAuC8xAcbI6FDcw/8z3q2xtJSQ==",
+			"version": "1.29.2",
+			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.29.2.tgz",
+			"integrity": "sha512-94QXm4PMgFoHAhlCuoWyaBYKb92yOcGVHdQLoxQ7Wjlc7Flg4aC/jbFW7xMR52OfXMVkWicue4WXE7QEegbIRA==",
 			"dev": true,
 			"bin": {
 				"playwright": "cli.js"
@@ -6213,12 +6206,25 @@
 			}
 		},
 		"node_modules/svelte-floating-ui": {
-			"version": "1.2.8",
-			"resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.2.8.tgz",
-			"integrity": "sha512-8Ifi5CD2Ui7FX7NjJRmutFtXjrB8T/FMNoS2H8P81t5LHK4I9G4NIs007rLWG/nRl7y+zJUXa3tWuTjYXw/O5A==",
+			"version": "1.1.6",
+			"resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.1.6.tgz",
+			"integrity": "sha512-lJfrc34+xSxKs+5AtnYj32uRIjaxGjhT92cOiNL3zEqaJ755JxUqXCf6tk+9G1wkCuqkK9A8tscVBsyY3iLmVQ==",
 			"dependencies": {
-				"@floating-ui/core": "^1.1.0",
-				"@floating-ui/dom": "^1.1.0"
+				"@floating-ui/dom": "^1.0.4",
+				"svelte2tsx": "^0.5.11"
+			}
+		},
+		"node_modules/svelte-floating-ui/node_modules/svelte2tsx": {
+			"version": "0.5.23",
+			"resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.5.23.tgz",
+			"integrity": "sha512-jYFnugTQRFmUpvLXPQrKzVYcW5ErT+0QCxg027Zx9BuvYefMZFuoBSTDYe7viPEFGrPPiLgT2m7f5n9khE7f7Q==",
+			"dependencies": {
+				"dedent-js": "^1.0.1",
+				"pascal-case": "^3.1.1"
+			},
+			"peerDependencies": {
+				"svelte": "^3.24",
+				"typescript": "^4.1.2"
 			}
 		},
 		"node_modules/svelte-highlight": {
@@ -6342,12 +6348,12 @@
 			"dev": true
 		},
 		"node_modules/svelte-select": {
-			"version": "5.3.1",
-			"resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-5.3.1.tgz",
-			"integrity": "sha512-TKlH22FEOr/KYNX4dzBJntNzeI0v0eZYU3VEo2uz/gar6xZdhQ3KT81hvD595GfSB7wiFdYc9SO42wrcgm9W4Q==",
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-5.0.2.tgz",
+			"integrity": "sha512-SsyIwcRVl38041xk7HoPCAew8D6ypTrMvoNcwOgAEWz9Yycgd/uZ58gMSubxSDtkW/ohuYmmHf5OlGCKIqn9Cw==",
 			"dependencies": {
-				"@floating-ui/dom": "^1.2.1",
-				"svelte-floating-ui": "1.2.8"
+				"@floating-ui/dom": "^1.0.10",
+				"svelte-floating-ui": "1.1.6"
 			}
 		},
 		"node_modules/svelte-splitpanes": {
@@ -6685,7 +6691,6 @@
 			"version": "4.9.4",
 			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
 			"integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
-			"dev": true,
 			"bin": {
 				"tsc": "bin/tsc",
 				"tsserver": "bin/tsserver"
@@ -7481,16 +7486,16 @@
 			}
 		},
 		"@floating-ui/core": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.1.tgz",
-			"integrity": "sha512-LSqwPZkK3rYfD7GKoIeExXOyYx6Q1O4iqZWwIehDNuv3Dv425FIAE8PRwtAx1imEolFTHgBEcoFHm9MDnYgPCg=="
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.0.5.tgz",
+			"integrity": "sha512-iDdOsaCHZH/0FM0yNBYt+cJxJF9S5jrYWNtDZOiDFMiZ7uxMJ/71h8eTwoVifEAruv9p9rlMPYCGIgMjOz95FQ=="
 		},
 		"@floating-ui/dom": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.1.tgz",
-			"integrity": "sha512-Rt45SmRiV8eU+xXSB9t0uMYiQ/ZWGE/jumse2o3i5RGlyvcbqOF4q+1qBnzLE2kZ5JGhq0iMkcGXUKbFe7MpTA==",
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.0.tgz",
+			"integrity": "sha512-TSogMPVxbRe77QCj1dt8NmRiJasPvuc+eT5jnJ6YpLqgOD2zXc5UA3S1qwybN+GVCDNdKfpKy1oj8RpzLJvh6A==",
 			"requires": {
-				"@floating-ui/core": "^1.2.1"
+				"@floating-ui/core": "^1.0.5"
 			}
 		},
 		"@fortawesome/fontawesome-common-types": {
@@ -7597,14 +7602,13 @@
 			}
 		},
 		"@playwright/test": {
-			"version": "1.31.1",
-			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.31.1.tgz",
-			"integrity": "sha512-IsytVZ+0QLDh1Hj83XatGp/GsI1CDJWbyDaBGbainsh0p2zC7F4toUocqowmjS6sQff2NGT3D9WbDj/3K2CJiA==",
+			"version": "1.29.2",
+			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.29.2.tgz",
+			"integrity": "sha512-+3/GPwOgcoF0xLz/opTnahel1/y42PdcgZ4hs+BZGIUjtmEFSXGg+nFoaH3NSmuc7a6GSFwXDJ5L7VXpqzigNg==",
 			"dev": true,
 			"requires": {
 				"@types/node": "*",
-				"fsevents": "2.3.2",
-				"playwright-core": "1.31.1"
+				"playwright-core": "1.29.2"
 			}
 		},
 		"@polka/url": {
@@ -8777,8 +8781,7 @@
 		"dedent-js": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz",
-			"integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==",
-			"dev": true
+			"integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ=="
 		},
 		"deep-extend": {
 			"version": "0.6.0",
@@ -9866,7 +9869,6 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
 			"integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
-			"dev": true,
 			"requires": {
 				"tslib": "^2.0.3"
 			}
@@ -10171,7 +10173,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
 			"integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
-			"dev": true,
 			"requires": {
 				"lower-case": "^2.0.2",
 				"tslib": "^2.0.3"
@@ -10343,7 +10344,6 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
 			"integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
-			"dev": true,
 			"requires": {
 				"no-case": "^3.0.4",
 				"tslib": "^2.0.3"
@@ -10417,9 +10417,9 @@
 			"dev": true
 		},
 		"playwright-core": {
-			"version": "1.31.1",
-			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.31.1.tgz",
-			"integrity": "sha512-JTyX4kV3/LXsvpHkLzL2I36aCdml4zeE35x+G5aPc4bkLsiRiQshU5lWeVpHFAuC8xAcbI6FDcw/8z3q2xtJSQ==",
+			"version": "1.29.2",
+			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.29.2.tgz",
+			"integrity": "sha512-94QXm4PMgFoHAhlCuoWyaBYKb92yOcGVHdQLoxQ7Wjlc7Flg4aC/jbFW7xMR52OfXMVkWicue4WXE7QEegbIRA==",
 			"dev": true
 		},
 		"postcss": {
@@ -11539,12 +11539,23 @@
 			}
 		},
 		"svelte-floating-ui": {
-			"version": "1.2.8",
-			"resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.2.8.tgz",
-			"integrity": "sha512-8Ifi5CD2Ui7FX7NjJRmutFtXjrB8T/FMNoS2H8P81t5LHK4I9G4NIs007rLWG/nRl7y+zJUXa3tWuTjYXw/O5A==",
+			"version": "1.1.6",
+			"resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.1.6.tgz",
+			"integrity": "sha512-lJfrc34+xSxKs+5AtnYj32uRIjaxGjhT92cOiNL3zEqaJ755JxUqXCf6tk+9G1wkCuqkK9A8tscVBsyY3iLmVQ==",
 			"requires": {
-				"@floating-ui/core": "^1.1.0",
-				"@floating-ui/dom": "^1.1.0"
+				"@floating-ui/dom": "^1.0.4",
+				"svelte2tsx": "^0.5.11"
+			},
+			"dependencies": {
+				"svelte2tsx": {
+					"version": "0.5.23",
+					"resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.5.23.tgz",
+					"integrity": "sha512-jYFnugTQRFmUpvLXPQrKzVYcW5ErT+0QCxg027Zx9BuvYefMZFuoBSTDYe7viPEFGrPPiLgT2m7f5n9khE7f7Q==",
+					"requires": {
+						"dedent-js": "^1.0.1",
+						"pascal-case": "^3.1.1"
+					}
+				}
 			}
 		},
 		"svelte-highlight": {
@@ -11610,12 +11621,12 @@
 			"dev": true
 		},
 		"svelte-select": {
-			"version": "5.3.1",
-			"resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-5.3.1.tgz",
-			"integrity": "sha512-TKlH22FEOr/KYNX4dzBJntNzeI0v0eZYU3VEo2uz/gar6xZdhQ3KT81hvD595GfSB7wiFdYc9SO42wrcgm9W4Q==",
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-5.0.2.tgz",
+			"integrity": "sha512-SsyIwcRVl38041xk7HoPCAew8D6ypTrMvoNcwOgAEWz9Yycgd/uZ58gMSubxSDtkW/ohuYmmHf5OlGCKIqn9Cw==",
 			"requires": {
-				"@floating-ui/dom": "^1.2.1",
-				"svelte-floating-ui": "1.2.8"
+				"@floating-ui/dom": "^1.0.10",
+				"svelte-floating-ui": "1.1.6"
 			}
 		},
 		"svelte-splitpanes": {
@@ -11866,8 +11877,7 @@
 		"typescript": {
 			"version": "4.9.4",
 			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
-			"integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
-			"dev": true
+			"integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg=="
 		},
 		"uglify-js": {
 			"version": "3.16.3",

frontend/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill",
-	"version": "1.71.0",
+	"version": "1.70.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -15,7 +15,7 @@
 		"test": "playwright test --config=tests-out/playwright.config.js"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.31.1",
+		"@playwright/test": "^1.29.2",
 		"@sveltejs/adapter-static": "^1.0.0",
 		"@sveltejs/kit": "^1.0.0-next.589",
 		"@sveltejs/package": "^1.0.2",
@@ -82,7 +82,7 @@
 		"svelte-autosize": "^1.0.1",
 		"svelte-chartjs": "^3.1.0",
 		"svelte-portal": "^2.2.0",
-		"svelte-select": "^5.3.1",
+		"svelte-select": "^5.0.2",
 		"tailwind-merge": "^1.9.1",
 		"vscode-ws-jsonrpc": "^2.0.1"
 	},

frontend/src/lib/components/DisplayResult.svelte

@@ -2,10 +2,9 @@
 	import { Highlight } from 'svelte-highlight'
 	import { json } from 'svelte-highlight/languages'
 	import TableCustom from './TableCustom.svelte'
-	import { copyToClipboard, truncate } from '$lib/utils'
-	import { Button, Drawer, DrawerContent } from './common'
+	import { truncate } from '$lib/utils'
+	import { Button } from './common'
 	import autosize from 'svelte-autosize'
-	import { ClipboardCopy } from 'lucide-svelte'
 
 	export let result: any
 	export let requireHtmlApproval = false
@@ -87,36 +86,16 @@
 		return 'json'
 	}
 	let payload = ''
-
-	let jsonViewer: Drawer
 </script>
 
-<Drawer bind:this={jsonViewer} size="900px">
-	<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
-		<svelte:fragment slot="actions">
-			<Button
-				on:click={() => copyToClipboard(JSON.stringify(result, null, 4))}
-				color="light"
-				size="xs"
-			>
-				<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
-			</Button>
-		</svelte:fragment>
-		<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
-	</DrawerContent>
-</Drawer>
-
 <div class="inline-highlight">
 	{#if result != undefined}
 		{#if resultKind && resultKind != 'json'}
 			<div class="mb-2 text-gray-500 text-sm bg-gray-50/20">
 				as JSON&nbsp;<input type="checkbox" bind:checked={forceJson} /></div
 			>{/if}{#if typeof result == 'object' && Object.keys(result).length > 0}<div
-				class="mb-2 text-sm text-gray-700 relative"
-				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
-				<div class="text-gray-500 text-sm  absolute top-0 right-2">
-					<button on:click={jsonViewer.openDrawer}>Expand JSON</button>
-				</div></div
+				class="mb-2 text-sm text-gray-700"
+				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b></div
 			>{/if}{#if !forceJson && resultKind == 'table-col'}<div
 				class="grid grid-flow-col-dense border border-gray-200 rounded-md "
 			>
@@ -244,8 +223,10 @@
 					><a rel="noreferrer" target="_blank" href={result['approvalPage']}>Approval Page</a></div
 				>
 			</div>
-		{:else}
-			<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+		{:else}<Highlight
+				language={json}
+				code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')}
+			/>
 		{/if}
 	{:else}
 		<div class="text-gray-500 text-sm">No result</div>

frontend/src/lib/components/FlowBuilder.svelte

@@ -13,7 +13,6 @@
 	import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte'
 	import { OFFSET } from './CronInput.svelte'
 	import FlowGraphViewer from './FlowGraphViewer.svelte'
-	import ScriptEditorDrawer from './flows/content/ScriptEditorDrawer.svelte'
 	import FlowEditor from './flows/FlowEditor.svelte'
 	import { flowStateStore } from './flows/flowState'
 	import { flowStore } from './flows/flowStore'
@@ -146,7 +145,6 @@
 
 	const scheduleStore = writable<Schedule>({ args: {}, cron: '', enabled: false })
 	const previewArgsStore = writable<Record<string, any>>(initialArgs)
-	const scriptEditorDrawer = writable<ScriptEditorDrawer | undefined>(undefined)
 
 	function select(selectedId: string) {
 		selectedIdStore.set(selectedId)
@@ -156,8 +154,7 @@
 		selectedId: selectedIdStore,
 		schedule: scheduleStore,
 		select,
-		previewArgs: previewArgsStore,
-		scriptEditorDrawer
+		previewArgs: previewArgsStore
 	})
 
 	async function loadSchedule() {
@@ -184,7 +181,6 @@
 </script>
 
 {#if !$userStore?.operator}
-	<ScriptEditorDrawer bind:this={$scriptEditorDrawer} />
 	<UnsavedConfirmationModal />
 
 	<Drawer bind:this={flowViewer} size="75%">

frontend/src/lib/components/FlowPreviewContent.svelte

@@ -149,7 +149,7 @@
 	</div>
 	<FlowProgressBar {job} bind:reset={jobProgressReset} />
 
-	<div class="overflow-y-auto grow  divide-y divide-gray-600 pr-4">
+	<div class="overflow-y-auto grow  divide-y divide-gray-600 ">
 		<div class="max-h-1/2 overflow-auto border-b border-gray-700">
 			<SchemaForm
 				noVariablePicker

frontend/src/lib/components/FlowStatusViewer.svelte

@@ -96,7 +96,7 @@
 				localFlowModuleStates?.[innerModules?.[i - 1]?.id ?? '']?.type ==
 					FlowStatusModule.type.SUCCESS
 			) {
-				localFlowModuleStates[mod.id ?? ''] = { type: mod.type, args: job?.args }
+				localFlowModuleStates[mod.id ?? ''] = { type: mod.type }
 			} else if (
 				mod.type === FlowStatusModule.type.WAITING_FOR_EXECUTOR &&
 				localFlowModuleStates[mod.id ?? '']?.scheduled_for == undefined
@@ -109,8 +109,7 @@
 						type: mod.type,
 						scheduled_for: 'scheduled for ' + displayDate(job?.['scheduled_for'], true),
 						job_id: job?.id,
-						parent_module: mod['parent_module'],
-						args: job?.args
+						parent_module: mod['parent_module']
 					}
 				})
 			}
@@ -330,12 +329,10 @@
 											type: FlowStatusModule.type.IN_PROGRESS,
 											logs: e.detail.logs,
 											job_id: e.detail.id,
-											args: e.detail.args,
 											iteration_total: flowJobIds?.flowJobs.length
 										}
 									} else {
 										localFlowModuleStates[flowJobIds.moduleId] = {
-											args: e.detail.args,
 											type: e.detail.success
 												? FlowStatusModule.type.SUCCESS
 												: FlowStatusModule.type.FAILURE,
@@ -400,12 +397,10 @@
 												localFlowModuleStates[mod.id] = {
 													type: FlowStatusModule.type.IN_PROGRESS,
 													logs: e.detail.logs,
-													args: e.detail.args,
 													parent_module: mod['parent_module']
 												}
 											} else {
 												localFlowModuleStates[mod.id] = {
-													args: e.detail.args,
 													type: e.detail.success
 														? FlowStatusModule.type.SUCCESS
 														: FlowStatusModule.type.FAILURE,
@@ -502,9 +497,6 @@
 									</div>
 								{/if}
 							</div>
-							<div class="px-1 border-b border-black">
-								<JobArgs args={node.args} />
-							</div>
 							<FlowJobResult
 								loading={job['running'] == true}
 								noBorder

frontend/src/lib/components/ResourcePicker.svelte

@@ -8,7 +8,6 @@
 	import Select from 'svelte-select'
 	import AppConnect from './AppConnect.svelte'
 	import ResourceEditor from './ResourceEditor.svelte'
-	import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults'
 
 	const dispatch = createEventDispatcher()
 	let resources: Resource[] = []
@@ -60,13 +59,12 @@
 <div class="flex flex-row gap-x-1 w-full">
 	<Select
 		listAutoWidth={false}
+		--height="34px"
 		value={collection.find((x) => x.value == value)}
 		bind:justValue={value}
 		items={collection}
 		class="text-clip grow min-w-0"
 		placeholder="{resourceType} resource"
-		inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-		containerStyles={SELECT_INPUT_DEFAULT_STYLE.containerStyles}
 	/>
 	{#if value && value != ''}
 		<Button variant="border" size="xs" on:click={() => resourceEditor?.initEdit?.(value ?? '')}>

frontend/src/lib/components/ScriptPicker.svelte

@@ -11,7 +11,6 @@
 	import { Button, Drawer, DrawerContent } from './common'
 	import HighlightCode from './HighlightCode.svelte'
 	import FlowPathViewer from './flows/content/FlowPathViewer.svelte'
-	import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults'
 
 	export let initialPath: string | undefined = undefined
 	export let scriptPath: string | undefined = undefined
@@ -88,8 +87,6 @@
 			bind:justValue={scriptPath}
 			{items}
 			placeholder="Pick a {itemKind}"
-			inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-			containerStyles={SELECT_INPUT_DEFAULT_STYLE.containerStyles}
 		/>
 	{/if}
 

frontend/src/lib/components/SimpleEditor.svelte

@@ -110,10 +110,6 @@
 		}
 	}
 
-	export function focus() {
-		editor?.focus()
-	}
-
 	let width = 0
 	async function loadMonaco() {
 		model = meditor.createModel(code, lang, mUri.parse(uri))

frontend/src/lib/components/Toggle.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte'
-	import { twMerge } from 'tailwind-merge'
 
 	export let options: {
 		left?: string
@@ -8,8 +7,6 @@
 	} = {}
 	export let checked: boolean = false
 	export let disabled = false
-	export let textClass = ''
-	export let textStyle = ''
 
 	export let size: 'sm' | 'xs' = 'sm'
 	const id = (Math.random() + 1).toString(36).substring(10)
@@ -25,13 +22,7 @@
 	>
 		{#if Boolean(options?.left)}
 			<span
-				class={twMerge(
-					'ml-2 font-medium duration-200',
-					disabled ? 'text-gray-500' : 'text-gray-900',
-					size === 'xs' ? 'text-xs' : 'text-sm',
-					textClass
-				)}
-				style={textStyle}
+				class="mr-2 text-sm font-medium duration-200 {disabled ? 'text-gray-600' : 'text-gray-900'}"
 			>
 				{options?.left}
 			</span>
@@ -60,13 +51,9 @@
 		</div>
 		{#if Boolean(options?.right)}
 			<span
-				class={twMerge(
-					'ml-2 font-medium duration-200',
-					disabled ? 'text-gray-500' : 'text-gray-900',
-					size === 'xs' ? 'text-xs' : 'text-sm',
-					textClass
-				)}
-				style={textStyle}
+				class="ml-2 text-sm font-medium duration-200
+				{disabled ? 'text-gray-500' : 'text-gray-900'} 
+				{size === 'xs' ? 'text-xs' : 'text-sm'}"
 			>
 				{options?.right}
 			</span>

frontend/src/lib/components/UserSettings.svelte

@@ -39,7 +39,6 @@
 	export function closeDrawer() {
 		drawer?.closeDrawer()
 		const index = $page.url.href.lastIndexOf('#')
-		if (index === -1) return
 		const hashRemoved = $page.url.href.slice(0, index)
 		goto(hashRemoved)
 	}

frontend/src/lib/components/apps/components/buttons/AppForm.svelte

@@ -5,8 +5,7 @@
 	import { Icon } from 'svelte-awesome'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
-	import { concatCustomCss } from '../../utils'
+	import type { AppEditorContext } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 	import type RunnableComponent from '../helpers/RunnableComponent.svelte'
@@ -18,11 +17,10 @@
 	export let recomputeIds: string[] | undefined = undefined
 	export let extraQueryParams: Record<string, any> = {}
 	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
-	export let customCss: ComponentCustomCSS<'container' | 'button'> | undefined = undefined
 
 	export const staticOutputs: string[] = ['loading', 'result']
 
-	const { app, runnableComponents, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { runnableComponents, worldStore } = getContext<AppEditorContext>('AppEditorContext')
 
 	let labelValue: string = 'Default label'
 	let color: ButtonType.Color
@@ -49,8 +47,6 @@
 			isLoading = value
 		}
 	})
-
-	$: css = concatCustomCss($app.css?.formcomponent, customCss)
 </script>
 
 <InputValue {id} input={configuration.goto} bind:value={goto} />
@@ -68,13 +64,9 @@
 	autoRefresh={false}
 	forceSchemaDisplay={true}
 	runnableClass="!block"
-	runnableStyle={css?.container.style}
 >
 	<AlignWrapper {horizontalAlignment}>
-		<div
-			class="flex flex-col gap-2 px-4 w-full {css?.container?.class ?? ''}"
-			style={css?.container?.style ?? ''}
-		>
+		<div class="flex flex-col gap-2 px-4 w-full">
 			<div>
 				{#if noInputs}
 					<div class="text-gray-600 italic text-sm my-4">
@@ -92,8 +84,7 @@
 				{#if !noInputs}
 					<Button
 						loading={isLoading}
-						btnClasses="my-1 {css?.button?.class ?? ''}"
-						style={css?.button?.style ?? ''}
+						btnClasses="my-1"
 						on:pointerdown={(e) => {
 							e?.stopPropagation()
 							window.dispatchEvent(new Event('pointerup'))

frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte

@@ -5,14 +5,13 @@
 	import { Icon } from 'svelte-awesome'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppEditorContext } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 	import type RunnableComponent from '../helpers/RunnableComponent.svelte'
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 	import Portal from 'svelte-portal'
 	import Modal from '$lib/components/common/modal/Modal.svelte'
-	import { concatCustomCss } from '../../utils'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
@@ -21,11 +20,10 @@
 	export let extraQueryParams: Record<string, any> = {}
 	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
-	export let customCss: ComponentCustomCSS<'button' | 'popup'> | undefined = undefined
 
 	export const staticOutputs: string[] = ['loading', 'result']
 
-	const { app, runnableComponents, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { runnableComponents, worldStore } = getContext<AppEditorContext>('AppEditorContext')
 
 	let labelValue: string = 'Default label'
 	let color: ButtonType.Color
@@ -37,8 +35,6 @@
 	let ownClick: boolean = false
 
 	let errors: Record<string, string> = {}
-	let open: boolean = false
-
 	$: errorsMessage = Object.values(errors)
 		.filter((x) => x != '')
 		.join('\n')
@@ -66,7 +62,7 @@
 
 	$: loading = isLoading && ownClick
 
-	$: css = concatCustomCss($app?.css?.formbuttoncomponent, customCss)
+	let open: boolean = false
 </script>
 
 <InputValue {id} input={configuration.label} bind:value={labelValue} />
@@ -83,8 +79,6 @@
 	<Modal
 		{open}
 		title={labelValue}
-		class={css?.popup.class}
-		style={css?.popup.style}
 		on:canceled={() => {
 			open = false
 		}}
@@ -154,8 +148,6 @@
 		{disabled}
 		{size}
 		{color}
-		btnClasses={css?.button?.class ?? ''}
-		style={css?.button?.style ?? ''}
 		on:click={(e) => {
 			open = true
 		}}

frontend/src/lib/components/apps/components/display/AppBarChart.svelte

@@ -15,18 +15,13 @@
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 	import type { AppInput } from '../../inputType'
 	import InputValue from '../helpers/InputValue.svelte'
-	import { concatCustomCss } from '../../utils'
-	import { getContext } from 'svelte'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
 	export let configuration: Record<string, AppInput>
 	export let initializing: boolean | undefined = undefined
-	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
 
 	export const staticOutputs: string[] = ['loading', 'result']
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
 
 	ChartJS.register(
 		Title,
@@ -82,21 +77,17 @@
 			}
 		]
 	}
-
-	$: css = concatCustomCss($app.css?.barchartcomponent, customCss)
 </script>
 
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.line} bind:value={lineChart} />
 
 <RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:initializing bind:result>
-	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
-		{#if result}
-			{#if lineChart}
-				<Line {data} options={lineOptions} />
-			{:else}
-				<Bar {data} options={barOptions} />
-			{/if}
+	{#if result}
+		{#if lineChart}
+			<Line {data} options={lineOptions} />
+		{:else}
+			<Bar {data} options={barOptions} />
 		{/if}
-	</div>
+	{/if}
 </RunnableWrapper>

frontend/src/lib/components/apps/components/display/AppHtml.svelte

@@ -1,23 +1,16 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
-	import { concatCustomCss } from '../../utils'
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
 	export let initializing: boolean | undefined = undefined
-	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
 
 	export const staticOutputs: string[] = ['result', 'loading']
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
 
 	let result: string | undefined = undefined
 	let h: number | undefined = undefined
 	let w: number | undefined = undefined
-
-	$: css = concatCustomCss($app.css?.htmlcomponent, customCss)
 </script>
 
 <div
@@ -32,8 +25,8 @@
 		{#key result}
 			<iframe
 				frameborder="0"
-				style="height: {h}px; width: {w}px; {css?.container?.style ?? ''}"
-				class="p-0 {css?.container?.class ?? ''}"
+				style="height: {h}px; width: {w}px"
+				class="p-0"
 				title="sandbox"
 				srcdoc={result
 					? '<scr' + `ipt type="application/javascript" src="/tailwind.js"></script>` + result

frontend/src/lib/components/apps/components/display/AppIcon.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
-	import { concatCustomCss } from '../../utils'
-	import { AlignWrapper, InputValue } from '../helpers'
+	import { AlignWrapper, InputValue, RunnableWrapper } from '../helpers'
 	import { loadIcon } from '../icon'
 
 	export let id: string
@@ -11,9 +8,6 @@
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export let configuration: Record<string, AppInput>
 	export const staticOutputs: string[] = []
-	export let customCss: ComponentCustomCSS<'container' | 'icon'> | undefined = undefined
-
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
 
 	let icon: string | undefined = undefined
 	let size: number
@@ -28,8 +22,6 @@
 			iconComponent = await loadIcon(icon)
 		}
 	}
-
-	$: css = concatCustomCss($app.css?.iconcomponent, customCss)
 </script>
 
 <InputValue {id} input={configuration.icon} bind:value={icon} />
@@ -37,20 +29,13 @@
 <InputValue {id} input={configuration.color} bind:value={color} />
 <InputValue {id} input={configuration.strokeWidth} bind:value={strokeWidth} />
 
-<AlignWrapper
-	{horizontalAlignment}
-	{verticalAlignment}
-	class={css?.container?.class ?? ''}
-	style={css?.container?.style ?? ''}
->
+<AlignWrapper {horizontalAlignment} {verticalAlignment}>
 	{#if iconComponent}
 		<svelte:component
 			this={iconComponent}
 			size={size || 24}
 			color={color || 'currentColor'}
 			strokeWidth={strokeWidth || 2}
-			class={css?.icon?.class ?? ''}
-			style={css?.icon?.style ?? ''}
 		/>
 	{/if}
 </AlignWrapper>

frontend/src/lib/components/apps/components/display/AppImage.svelte

@@ -1,10 +1,6 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
-	import { twMerge } from 'tailwind-merge'
 	import type { staticValues } from '../../editor/componentsPanel/componentStaticValues'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
-	import { concatCustomCss } from '../../utils'
 	import InputValue from '../helpers/InputValue.svelte'
 
 	type FitOption = (typeof staticValues)['objectFitOptions'][number]
@@ -12,9 +8,7 @@
 	export let id: string
 	export let configuration: Record<string, AppInput>
 	export const staticOutputs: string[] = ['loading']
-	export let customCss: ComponentCustomCSS<'image'> | undefined = undefined
 
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
 	const fit: Record<FitOption, string> = {
 		cover: 'object-cover',
 		contain: 'object-contain',
@@ -24,18 +18,18 @@
 	let source: string | undefined = undefined
 	let imageFit: FitOption | undefined = undefined
 	let altText: string | undefined = undefined
-
-	$: css = concatCustomCss($app.css?.imagecomponent, customCss)
+	let customStyles: string | undefined = undefined
 </script>
 
 <InputValue {id} input={configuration.source} bind:value={source} />
 <InputValue {id} input={configuration.imageFit} bind:value={imageFit} />
 <InputValue {id} input={configuration.altText} bind:value={altText} />
+<InputValue {id} input={configuration.customStyles} bind:value={customStyles} />
 
 <img
 	on:pointerdown|preventDefault
 	src={source}
 	alt={altText}
-	style={css?.image?.style ?? ''}
-	class={twMerge(`w-full h-full ${fit[imageFit || 'cover']}`, css?.image?.class ?? '')}
+	style={customStyles}
+	class="w-full h-full {fit[imageFit || 'cover']}"
 />

frontend/src/lib/components/apps/components/display/AppPieChart.svelte

@@ -14,18 +14,13 @@
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 	import type { AppInput } from '../../inputType'
 	import InputValue from '../helpers/InputValue.svelte'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
-	import { concatCustomCss } from '../../utils'
-	import { getContext } from 'svelte'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
 	export let configuration: Record<string, AppInput>
 	export let initializing: boolean | undefined = undefined
-	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
 
 	export const staticOutputs: string[] = ['loading', 'result']
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
 
 	ChartJS.register(
 		Title,
@@ -65,21 +60,17 @@
 			}
 		]
 	}
-
-	$: css = concatCustomCss($app.css?.piechartcomponent, customCss)
 </script>
 
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.doughnutStyle} bind:value={doughnut} />
 
 <RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:initializing bind:result>
-	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
-		{#if result}
-			{#if doughnut}
-				<Doughnut {data} {options} />
-			{:else}
-				<Pie {data} {options} />
-			{/if}
+	{#if result}
+		{#if doughnut}
+			<Doughnut {data} {options} />
+		{:else}
+			<Pie {data} {options} />
 		{/if}
-	</div>
+	{/if}
 </RunnableWrapper>

frontend/src/lib/components/apps/components/display/AppScatterChart.svelte

@@ -17,21 +17,16 @@
 	import Scatter from 'svelte-chartjs/Scatter.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 	import type { ChartOptions, ChartData } from 'chart.js'
-	import { concatCustomCss } from '../../utils'
-	import { getContext } from 'svelte'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
 	export let configuration: Record<string, AppInput>
 	export let initializing: boolean | undefined = undefined
-	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
 
 	let zoomable = false
 	let pannable = false
 
 	export const staticOutputs: string[] = ['loading', 'result']
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
 
 	ChartJS.register(
 		Title,
@@ -71,17 +66,13 @@
 	$: data = {
 		datasets: result ?? []
 	} as ChartData<'scatter', (number | Point)[], unknown>
-
-	$: css = concatCustomCss($app.css?.scatterchartcomponent, customCss)
 </script>
 
 <InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
 <InputValue {id} input={configuration.pannable} bind:value={pannable} />
 
 <RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:initializing bind:result>
-	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
-		{#if result}
-			<Scatter {data} {options} />
-		{/if}
-	</div>
+	{#if result}
+		<Scatter {data} {options} />
+	{/if}
 </RunnableWrapper>

frontend/src/lib/components/apps/components/display/AppTimeseries.svelte

@@ -20,18 +20,13 @@
 	import { Scatter } from 'svelte-chartjs'
 	import InputValue from '../helpers/InputValue.svelte'
 	import type { ChartOptions, ChartData } from 'chart.js'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
-	import { getContext } from 'svelte'
-	import { concatCustomCss } from '../../utils'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
 	export let configuration: Record<string, AppInput>
 	export let initializing: boolean | undefined = undefined
-	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
 
 	export const staticOutputs: string[] = ['loading', 'result']
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
 
 	let logarithmicScale = false
 	let zoomable = false
@@ -85,8 +80,6 @@
 	$: data = {
 		datasets: result ?? []
 	} as ChartData<'scatter', (number | Point)[], unknown>
-
-	$: css = concatCustomCss($app.css?.timeseriescomponent, customCss)
 </script>
 
 <InputValue {id} input={configuration.logarithmicScale} bind:value={logarithmicScale} />
@@ -94,9 +87,7 @@
 <InputValue {id} input={configuration.pannable} bind:value={pannable} />
 
 <RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:initializing bind:result>
-	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
-		{#if result}
-			<Scatter {data} {options} />
-		{/if}
-	</div>
+	{#if result}
+		<Scatter {data} {options} />
+	{/if}
 </RunnableWrapper>

frontend/src/lib/components/apps/components/display/PlotlyHtml.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
+	import { Loader2 } from 'lucide-svelte'
 	import { onMount } from 'svelte'
 	import type { AppInput } from '../../inputType'
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
-	// export let configuration: Record<string, AppInput>
+	export let configuration: Record<string, AppInput>
 	export let initializing: boolean | undefined = undefined
 
 	export const staticOutputs: string[] = ['result', 'loading']
@@ -41,6 +42,11 @@
 
 <div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
 	<RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
+		{#if !Plotly}
+			<div class="p-2">
+				<Loader2 class="animate-spin" />
+			</div>
+		{/if}
 		<div on:pointerdown bind:this={divEl} />
 	</RunnableWrapper>
 </div>

frontend/src/lib/components/apps/components/display/VegaLiteHtml.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Loader2 } from 'lucide-svelte'
 	import { onMount } from 'svelte'
 	import type { AppInput } from '../../inputType'
 	import InputValue from '../helpers/InputValue.svelte'
@@ -53,6 +54,11 @@
 
 <div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
 	<RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
+		{#if !vegaEmbed}
+			<div class="p-2">
+				<Loader2 class="animate-spin" />
+			</div>
+		{/if}
 		<div on:pointerdown bind:this={divEl} />
 	</RunnableWrapper>
 </div>

frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte

@@ -65,8 +65,6 @@
 	let columnDefs: any = undefined
 
 	let allEditable: boolean | undefined = undefined
-	let pagination: boolean | undefined = undefined
-	let pageSize: number | undefined = 10
 
 	function onCellValueChanged(event) {
 		if (result) {
@@ -81,8 +79,6 @@
 
 <InputValue {id} input={configuration.columnDefs} bind:value={columnDefs} />
 <InputValue {id} input={configuration.allEditable} bind:value={allEditable} />
-<InputValue {id} input={configuration.pagination} bind:value={pagination} />
-<InputValue {id} input={configuration.pageSize} bind:value={pageSize} />
 
 <RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
 	{#if Array.isArray(result) && result.every(isObject)}
@@ -99,15 +95,11 @@
 				style:width="{clientWidth}px"
 				class="ag-theme-alpine"
 			>
-				{#key pagination}
-					<AgGridSvelte
-						bind:rowData={result}
-						{columnDefs}
-						{pagination}
-						paginationPageSize={pageSize}
-						defaultColDef={{ flex: 1, editable: allEditable, onCellValueChanged }}
-					/>
-				{/key}
+				<AgGridSvelte
+					bind:rowData={result}
+					{columnDefs}
+					defaultColDef={{ flex: 1, editable: allEditable, onCellValueChanged }}
+				/>
 			</div>
 		</div>
 	{:else if result != undefined}

frontend/src/lib/components/apps/components/display/table/AppTable.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext, onMount } from 'svelte'
 	import type { Output } from '../../../rx'
-	import type { AppEditorContext, BaseAppComponent, ComponentCustomCSS } from '../../../types'
+	import type { AppEditorContext, BaseAppComponent } from '../../../types'
 	import InputValue from '../../helpers/InputValue.svelte'
 	import type { AppInput } from '../../../inputType'
 	import RunnableWrapper from '../../helpers/RunnableWrapper.svelte'
@@ -14,17 +14,12 @@
 	import { tableOptions } from './tableOptions'
 	import Alert from '$lib/components/common/alert/Alert.svelte'
 	import type { ButtonComponent } from '../../../editor/component'
-	import { concatCustomCss } from '../../../utils'
-	import { twMerge } from 'tailwind-merge'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
 	export let configuration: Record<string, AppInput>
 	export let actionButtons: (BaseAppComponent & ButtonComponent)[]
 	export let initializing: boolean | undefined = undefined
-	export let customCss:
-		| ComponentCustomCSS<'container' | 'tableHeader' | 'tableBody' | 'tableFooter'>
-		| undefined = undefined
 
 	export const staticOutputs: string[] = [
 		'selectedRow',
@@ -56,11 +51,8 @@
 
 	let table = createSvelteTable(options)
 
-	const {
-		app,
-		worldStore,
-		staticOutputs: staticOutputsStore
-	} = getContext<AppEditorContext>('AppEditorContext')
+	const { worldStore, staticOutputs: staticOutputsStore } =
+		getContext<AppEditorContext>('AppEditorContext')
 
 	let selectedRowIndex = -1
 
@@ -141,22 +133,13 @@
 	}
 
 	$: result && rerender()
-
-	$: css = concatCustomCss($app.css?.tablecomponent, customCss)
 </script>
 
 <InputValue {id} input={configuration.search} bind:value={search} />
 
 <RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
 	{#if Array.isArray(result) && result.every(isObject)}
-		<div
-			class={twMerge(
-				'border border-gray-300 shadow-sm divide-y divide-gray-300 h-full',
-				css?.container?.class ?? '',
-				'flex flex-col'
-			)}
-			style={css?.container?.style ?? ''}
-		>
+		<div class="border border-gray-300 shadow-sm divide-y divide-gray-300  flex flex-col h-full">
 			{#if search !== 'Disabled'}
 				<div class="px-2 py-1">
 					<div class="flex items-center">
@@ -169,14 +152,7 @@
 
 			<div class="overflow-x-auto flex-1 w-full">
 				<table class="relative w-full border-b border-b-gray-200">
-					<thead
-						class={twMerge(
-							'bg-gray-50 text-left',
-							css?.tableHeader?.class ?? '',
-							'sticky top-0 z-40'
-						)}
-						style={css?.tableHeader?.style ?? ''}
-					>
+					<thead class="sticky top-0 z-40 bg-gray-50 text-left">
 						{#each $table.getHeaderGroups() as headerGroup}
 							<tr class="divide-x">
 								{#each headerGroup.headers as header}
@@ -202,10 +178,7 @@
 							</tr>
 						{/each}
 					</thead>
-					<tbody
-						class={twMerge('divide-y divide-gray-200 bg-white', css?.tableBody?.class ?? '')}
-						style={css?.tableBody?.style ?? ''}
-					>
+					<tbody class="divide-y divide-gray-200 bg-white ">
 						{#each $table.getRowModel().rows as row, rowIndex (row.id)}
 							<tr
 								class={classNames(
@@ -262,13 +235,7 @@
 				</table>
 			</div>
 
-			<AppTableFooter
-				paginationEnabled={pagination}
-				{result}
-				{table}
-				class={css?.tableFooter.class}
-				style={css?.tableFooter.style}
-			/>
+			<AppTableFooter paginationEnabled={pagination} {result} {table} />
 		</div>
 	{:else if result != undefined}
 		<Alert title="Parsing issues" type="error" size="xs">

frontend/src/lib/components/apps/components/display/table/AppTableFooter.svelte

@@ -4,7 +4,6 @@
 	import type { Table } from '@tanstack/svelte-table'
 	import { ChevronLeft, ChevronRight } from 'lucide-svelte'
 	import type { Readable } from 'svelte/store'
-	import { twMerge } from 'tailwind-merge'
 	import { tableOptions } from './tableOptions'
 
 	type T = Record<string, any>
@@ -12,9 +11,6 @@
 	export let result: Array<T>
 	export let paginationEnabled: boolean = false
 	export let table: Readable<Table<T>>
-	let c = ''
-	export { c as class }
-	export let style = ''
 
 	function downloadResultAsJSON() {
 		const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(result))
@@ -27,10 +23,7 @@
 	}
 </script>
 
-<div
-	class={twMerge('px-2 py-1 text-xs gap-2 items-center justify-between', c, 'flex flex-row')}
-	{style}
->
+<div class="px-2 py-1 text-xs flex flex-row gap-2 items-center justify-between">
 	{#if paginationEnabled && result.length > (tableOptions.initialState?.pagination?.pageSize ?? 25)}
 		<div class="flex items-center gap-2 flex-row">
 			<Button

frontend/src/lib/components/apps/components/helpers/AlignWrapper.svelte

@@ -1,44 +1,41 @@
 <script lang="ts">
-	import { twMerge } from 'tailwind-merge'
+	import { classNames } from '$lib/utils'
 	import type { HorizontalAlignment, VerticalAlignment } from '../../types'
 
 	export let horizontalAlignment: HorizontalAlignment | undefined = undefined
 	export let verticalAlignment: VerticalAlignment | undefined = undefined
 	export let noWFull = false
-	let c = ''
-	export { c as class }
-	export let style = ''
 
 	function tailwindHorizontalAlignment(alignment?: HorizontalAlignment) {
-		if (!alignment) return ''
+		if(!alignment) return '';
 		const classes: Record<HorizontalAlignment, string> = {
 			left: 'justify-start',
 			center: 'justify-center',
-			right: 'justify-end'
+			right: 'justify-end',
 		}
 		return classes[alignment]
 	}
 
 	function tailwindVerticalAlignment(alignment?: VerticalAlignment) {
-		if (!alignment) return ''
+		if(!alignment) return '';
 		const classes: Record<VerticalAlignment, string> = {
 			top: 'items-start',
 			center: 'items-center',
-			bottom: 'items-end'
+			bottom: 'items-end',
 		}
 		return classes[alignment]
 	}
 
-	$: classes = twMerge(
+	$: classes = classNames(
 		'flex z-auto',
 		noWFull ? '' : 'w-full',
 		tailwindHorizontalAlignment(horizontalAlignment),
 		tailwindVerticalAlignment(verticalAlignment),
 		verticalAlignment ? 'h-full' : '',
-		c
+		$$props.class || ''
 	)
 </script>
 
-<div class={classes} {style}>
+<div class={classes}>
 	<slot />
 </div>

frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte

@@ -6,7 +6,6 @@
 	import TestJobLoader from '$lib/components/TestJobLoader.svelte'
 	import { AppService, type CompletedJob } from '$lib/gen'
 	import { defaultIfEmptyString, emptySchema, sendUserToast } from '$lib/utils'
-	import { deepEqual } from 'fast-equals'
 	import { getContext, onMount } from 'svelte'
 	import { computeFields } from '../../editor/inlineScriptsPanel/utils'
 	import type { AppInputs, Runnable } from '../../inputType'
@@ -26,7 +25,6 @@
 	export let defaultUserInput = false
 	export let flexWrap = false
 	export let wrapperClass = ''
-	export let wrapperStyle = ''
 	export let initializing: boolean | undefined = undefined
 	export let gotoUrl: string | undefined = undefined
 
@@ -39,8 +37,7 @@
 		jobs,
 		noBackend,
 		errorByComponent,
-		mode,
-		stateId
+		mode
 	} = getContext<AppEditorContext>('AppEditorContext')
 
 	onMount(() => {
@@ -115,11 +112,13 @@
 			// Inline scripts directly provide the schema
 			if (inlineScript) {
 				const newSchema = inlineScript.schema
+
 				const newFields = computeFields(newSchema, defaultUserInput, fields)
 
-				if (!deepEqual(newFields, fields)) {
-					fields = newFields
-					$stateId++
+				if (JSON.stringify(newFields) !== JSON.stringify(fields)) {
+					setTimeout(() => {
+						fields = newFields
+					}, 0)
 				}
 			}
 		}
@@ -271,7 +270,7 @@
 	bind:this={testJobLoader}
 />
 
-<div class="h-full flex relative flex-row flex-wrap {wrapperClass}" style={wrapperStyle}>
+<div class="h-full flex relative flex-row flex-wrap {wrapperClass}">
 	{#if !initializing && autoRefresh === true}
 		<div class="flex absolute top-1 right-1">
 			<RefreshButton componentId={id} />

frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte

@@ -18,7 +18,6 @@
 	export let defaultUserInput = false
 	export let flexWrap = false
 	export let runnableClass = ''
-	export let runnableStyle = ''
 	export let goto: string | undefined = undefined
 
 	const { staticExporter, noBackend } = getContext<AppEditorContext>('AppEditorContext')
@@ -56,7 +55,6 @@
 		{forceSchemaDisplay}
 		{initializing}
 		wrapperClass={runnableClass}
-		wrapperStyle={runnableStyle}
 	>
 		<slot />
 	</RunnableComponent>

frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte

@@ -3,8 +3,7 @@
 	import { getContext } from 'svelte'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
-	import { concatCustomCss } from '../../utils'
+	import type { AppEditorContext } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 
@@ -12,9 +11,8 @@
 	export let configuration: Record<string, AppInput>
 	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
-	export let customCss: ComponentCustomCSS<'text'> | undefined = undefined
 
-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
 
 	export const staticOutputs: string[] = ['result']
 
@@ -29,8 +27,6 @@
 	}
 
 	$: defaultValue != undefined && outputs?.result.set(defaultValue)
-
-	$: css = concatCustomCss($app.css?.checkboxcomponent, customCss)
 </script>
 
 <InputValue {id} input={configuration.label} bind:value={labelValue} />
@@ -44,8 +40,6 @@
 		}}
 		checked={defaultValue}
 		options={{ right: labelValue }}
-		textClass={css?.text?.class ?? ''}
-		textStyle={css?.text?.style ?? ''}
 		on:change={(e) => {
 			outputs.result.set(e.detail)
 		}}

frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
-	import { twMerge } from 'tailwind-merge'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
-	import { concatCustomCss } from '../../utils'
+	import type { AppEditorContext } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputDefaultValue from '../helpers/InputDefaultValue.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
@@ -14,9 +12,8 @@
 	export let inputType: 'date' | 'time' | 'datetime-local'
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export const staticOutputs: string[] = ['result']
-	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
 
-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
 	let input: HTMLInputElement
 	let labelValue: string = 'Title'
 	let minValue: string = ''
@@ -32,8 +29,6 @@
 	}
 
 	$: input && handleInput()
-
-	$: css = concatCustomCss($app.css?.dateinputcomponent, customCss)
 </script>
 
 <InputValue {id} input={configuration.label} bind:value={labelValue} />
@@ -51,7 +46,6 @@
 		min={minValue}
 		max={maxValue}
 		placeholder="Type..."
-		class={twMerge('mx-0.5', css?.input?.class ?? '')}
-		style={css?.input?.style ?? ''}
+		class="h-full"
 	/>
 </AlignWrapper>

frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte

@@ -1,19 +1,16 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
-	import { twMerge } from 'tailwind-merge'
 	import { FileInput } from '../../../common'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
-	import { concatCustomCss } from '../../utils'
+	import type { AppEditorContext } from '../../types'
 	import InputValue from '../helpers/InputValue.svelte'
 
 	export let id: string
 	export let configuration: Record<string, AppInput>
 	export const staticOutputs: string[] = ['result']
-	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
 
-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
 
 	let acceptedFileTypes: string[] | undefined = undefined
 	let allowMultiple: boolean | undefined = undefined
@@ -27,8 +24,6 @@
 	async function handleChange(files: string[] | undefined) {
 		outputs?.result.set(files)
 	}
-
-	$: css = concatCustomCss($app.css?.fileinputcomponent, customCss)
 </script>
 
 <InputValue {id} input={configuration.acceptedFileTypes} bind:value={acceptedFileTypes} />
@@ -43,8 +38,7 @@
 		on:change={({ detail }) => {
 			handleChange(detail)
 		}}
-		class={twMerge('w-full h-full', css?.container?.class)}
-		style={css?.container?.style}
+		class="w-full h-full"
 	>
 		{text}
 	</FileInput>

frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte

@@ -2,8 +2,7 @@
 	import { getContext } from 'svelte'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
-	import { concatCustomCss } from '../../utils'
+	import type { AppEditorContext } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputDefaultValue from '../helpers/InputDefaultValue.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
@@ -12,9 +11,8 @@
 	export let configuration: Record<string, AppInput>
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export const staticOutputs: string[] = ['result']
-	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
 
-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
 	let input: HTMLInputElement
 
 	let defaultValue: number | undefined = undefined
@@ -35,8 +33,6 @@
 	}
 
 	$: input && handleInput()
-
-	$: css = concatCustomCss($app.css?.numberinputcomponent, customCss)
 </script>
 
 <InputValue {id} input={configuration.step} bind:value={step} />
@@ -48,8 +44,6 @@
 
 <AlignWrapper {verticalAlignment}>
 	<input
-		class="mx-0.5 {css?.input?.class ?? ''}"
-		style={css?.input?.style ?? ''}
 		bind:this={input}
 		on:input={handleInput}
 		on:focus={(e) => {

frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte

@@ -3,24 +3,20 @@
 	import { getContext } from 'svelte'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppEditorContext } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
-	import { concatCustomCss } from '../../utils'
-	import { twMerge } from 'tailwind-merge'
+	import { Badge } from '$lib/components/common'
 
 	export let id: string
 	export let configuration: Record<string, AppInput>
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export const staticOutputs: string[] = ['result']
-	export let customCss: ComponentCustomCSS<'handles' | 'bar' | 'limits' | 'values'> | undefined =
-		undefined
 
-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
 	let min = 0
 	let max = 42
 	let step = 1
-	let slider: HTMLElement
 
 	let values: [number, number] = [0, 0]
 
@@ -29,17 +25,6 @@
 	}
 
 	$: outputs?.result.set(values)
-
-	$: css = concatCustomCss($app.css?.rangecomponent, customCss)
-
-	let lastStyle: string | undefined = undefined
-	$: if (css && slider && lastStyle !== css?.handles?.style) {
-		const handles = slider.querySelectorAll<HTMLSpanElement>('.rangeNub')
-		if (handles) {
-			lastStyle = css?.handles?.style
-			handles.forEach((handle) => (handle.style.cssText = css?.handles?.style ?? ''))
-		}
-	}
 </script>
 
 <InputValue {id} input={configuration.step} bind:value={step} />
@@ -51,45 +36,20 @@
 <AlignWrapper {verticalAlignment}>
 	<div class="flex flex-col w-full">
 		<div class="flex items-center w-full gap-1 px-1">
-			<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
-				{min}
-			</span>
+			<span>{min}</span>
 			<div class="grow" on:pointerdown|stopPropagation>
-				<RangeSlider
-					bind:slider
-					bind:values
-					{step}
-					min={min ?? 0}
-					max={max ?? 1}
-					range
-					pips
-					hoverable={false}
-				/>
-				<!-- <RangeSlider {step} range min={min ?? 0} max={max ?? 1} bind:values /> -->
+				<RangeSlider {step} range min={min ?? 0} max={max ?? 1} bind:values />
+				<!-- <DoubleRange bind:start bind:end /> -->
 			</div>
-			<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
-				{max}
-			</span>
+			<span>{max}</span>
 		</div>
 		<div class="flex justify-between px-1">
-			<span
-				class={twMerge(
-					'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
-					css?.values?.class ?? ''
-				)}
-				style={css?.values?.style ?? ''}
-			>
-				{values[0]}
-			</span>
-			<span
-				class={twMerge(
-					'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
-					css?.values?.class ?? ''
-				)}
-				style={css?.values?.style ?? ''}
-			>
-				{values[1]}
-			</span>
+			<div>
+				<Badge color="blue">{values[0]}</Badge>
+			</div>
+			<div>
+				<Badge color="blue">{values[1]}</Badge>
+			</div>
 		</div>
 	</div>
 </AlignWrapper>

frontend/src/lib/components/apps/components/inputs/AppSelect.svelte

@@ -3,20 +3,17 @@
 	import Select from 'svelte-select'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
-	import { concatCustomCss } from '../../utils'
+	import type { AppEditorContext } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
-	import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults'
 
 	export const staticOutputs: string[] = ['result']
 	export let id: string
 	export let configuration: Record<string, AppInput>
 	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
-	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
 
-	const { app, worldStore, connectingInput, selectedComponent } =
+	const { worldStore, connectingInput, selectedComponent } =
 		getContext<AppEditorContext>('AppEditorContext')
 	let items: { label: string; value: any }[]
 	let multiple: boolean = false
@@ -50,12 +47,12 @@
 		const valuePeak = outputs?.result.peak()
 		if (!valuePeak) {
 			const value0 = items?.[0]?.['value']
-			if (value0 != value) {
+			if (value0 != value && !items.includes(value0)) {
 				value = JSON.stringify(value0)
 				outputs?.result.set(value0)
 			}
 		} else {
-			value = JSON.stringify(valuePeak)
+			value = valuePeak
 		}
 	}
 
@@ -68,8 +65,6 @@
 		} catch (_) {}
 		outputs?.result.set(result)
 	}
-
-	$: css = concatCustomCss($app.css?.selectcomponent, customCss)
 </script>
 
 <InputValue {id} input={configuration.items} bind:value={items} />
@@ -77,15 +72,13 @@
 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
 
 <AlignWrapper {horizontalAlignment} {verticalAlignment}>
-	<div class="app-select w-full mx-0.5" style="height: 34px" on:pointerdown|stopPropagation>
+	<div class="app-select w-full" style="height: 34px" on:pointerdown|stopPropagation>
 		<Select
+			--height="34px"
 			{multiple}
 			on:clear={onChange}
 			on:change={onChange}
 			items={listItems}
-			class={css?.input?.class ?? ''}
-			inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-			containerStyles={SELECT_INPUT_DEFAULT_STYLE.containerStyles + css?.input?.style}
 			{value}
 			{placeholder}
 			on:click={() => {

frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte

@@ -1,25 +1,22 @@
 <script lang="ts">
+	import { Badge } from '$lib/components/common'
 	import RangeSlider from 'svelte-range-slider-pips'
 	import { getContext } from 'svelte'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
+	import type { AppEditorContext } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
-	import { twMerge } from 'tailwind-merge'
-	import { concatCustomCss } from '../../utils'
 
 	export let id: string
 	export let configuration: Record<string, AppInput>
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export const staticOutputs: string[] = ['result']
-	export let customCss: ComponentCustomCSS<'handle' | 'limits' | 'value'> | undefined = undefined
 
-	const { app, worldStore, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
+	const { worldStore, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
 	let min = 0
 	let max = 42
 	let step = 1
-	let slider: HTMLElement
 
 	$: outputs = $worldStore?.outputsById[id] as {
 		result: Output<number | null>
@@ -37,17 +34,6 @@
 		const num = isNaN(+values[0]) ? null : +values[0]
 		outputs?.result.set(num)
 	}
-
-	$: css = concatCustomCss($app.css?.slidercomponent, customCss)
-
-	let lastStyle: string | undefined = undefined
-	$: if (css && slider && lastStyle !== css?.handle?.style) {
-		const handle = slider.querySelector<HTMLSpanElement>('.rangeNub')
-		if (handle) {
-			lastStyle = css?.handle?.style
-			handle.style.cssText = css?.handle?.style ?? ''
-		}
-	}
 </script>
 
 <InputValue {id} input={configuration.step} bind:value={step} />
@@ -57,33 +43,11 @@
 
 <AlignWrapper {verticalAlignment}>
 	<div class="flex items-center w-full gap-1 px-1">
-		<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
-			{min}
-		</span>
+		<span>{min}</span>
 		<div class="grow" on:pointerdown|stopPropagation={() => ($selectedComponent = id)}>
-			<RangeSlider
-				bind:slider
-				bind:values
-				{step}
-				min={min ?? 0}
-				max={max ?? 1}
-				pips
-				hoverable={false}
-			/>
+			<RangeSlider {step} min={min ?? 0} max={max ?? 1} bind:values />
 		</div>
-		<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
-			{max}
-		</span>
-		<span class="mx-2">
-			<span
-				class={twMerge(
-					'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
-					css?.value?.class ?? ''
-				)}
-				style={css?.value?.style ?? ''}
-			>
-				{values[0]}
-			</span>
-		</span>
+		<span>{max}</span>
+		<span class="mx-2"><Badge large color="blue">{values[0]}</Badge></span>
 	</div>
 </AlignWrapper>

frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
-	import { twMerge } from 'tailwind-merge'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
-	import { concatCustomCss } from '../../utils'
+	import type { AppEditorContext } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputDefaultValue from '../helpers/InputDefaultValue.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
@@ -14,10 +12,8 @@
 	export let inputType = 'text'
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export const staticOutputs: string[] = ['result']
-	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
-	export let appCssKey: 'textinputcomponent' | 'passwordinputcomponent' = 'textinputcomponent'
 
-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
 	let input: HTMLInputElement
 
 	let placeholder: string | undefined = undefined
@@ -32,8 +28,6 @@
 	}
 
 	$: input && handleInput()
-
-	$: css = concatCustomCss($app.css?.[appCssKey], customCss)
 </script>
 
 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
@@ -42,8 +36,7 @@
 
 <AlignWrapper {verticalAlignment}>
 	<input
-		class={twMerge('mx-0.5', css?.input?.class ?? '')}
-		style={css?.input?.style ?? ''}
+		class="mx-0.5"
 		on:focus={(e) => {
 			e?.stopPropagation()
 			window.dispatchEvent(new Event('pointerup'))

frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte

@@ -2,8 +2,7 @@
 	import { getContext } from 'svelte'
 	import type { AppInput } from '../../../inputType'
 	import type { Output } from '../../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../../types'
-	import { concatCustomCss } from '../../../utils'
+	import type { AppEditorContext } from '../../../types'
 	import AlignWrapper from '../../helpers/AlignWrapper.svelte'
 	import InputValue from '../../helpers/InputValue.svelte'
 	import CurrencyInput from './CurrencyInput.svelte'
@@ -12,9 +11,8 @@
 	export let configuration: Record<string, AppInput>
 	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
 	export const staticOutputs: string[] = ['result']
-	export let customCss: ComponentCustomCSS<'input'> | undefined = undefined
 
-	const { app, worldStore } = getContext<AppEditorContext>('AppEditorContext')
+	const { worldStore } = getContext<AppEditorContext>('AppEditorContext')
 
 	let defaultValue: number | undefined = undefined
 
@@ -39,8 +37,6 @@
 	$: value != undefined && handleInput()
 
 	$: defaultValue != undefined && handleDefault()
-
-	$: css = concatCustomCss($app.css?.currencycomponent, customCss)
 </script>
 
 <InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
@@ -53,12 +49,7 @@
 		{#key locale}
 			{#key currency}
 				<CurrencyInput
-					inputClasses={{
-						formatted: 'p-0 ' + css?.input?.class,
-						wrapper: 'w-full',
-						formattedZero: 'text-black ' + css?.input?.class
-					}}
-					style={css?.input?.style}
+					inputClasses={{ formatted: 'p-0', wrapper: 'w-full', formattedZero: 'text-black' }}
 					bind:value
 					{currency}
 					{locale}

frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte

@@ -35,7 +35,6 @@
 	export let isNegativeAllowed: boolean = true
 	export let fractionDigits: number = DEFAULT_FRACTION_DIGITS
 	export let inputClasses: InputClasses | null = null
-	export let style: string = ''
 
 	// Formats value as: e.g. $1,523.00 | -$1,523.00
 	const formatCurrency = (
@@ -176,7 +175,6 @@
 			? inputClasses?.formattedNegative ?? DEFAULT_CLASS_FORMATTED_NEGATIVE
 			: ''}
 		"
-		{style}
 		type="text"
 		inputmode="numeric"
 		name={`formatted-${name}`}

frontend/src/lib/components/apps/components/inputs/index.ts

@@ -6,4 +6,4 @@ export { default as AppNumberInput } from './AppNumberInput.svelte'
 export { default as AppRangeInput } from './AppRangeInput.svelte'
 export { default as AppSelect } from './AppSelect.svelte'
 export { default as AppSliderInputs } from './AppSliderInputs.svelte'
-export { default as AppTextInput } from './AppTextInput.svelte'
+export { default as AppTextInput } from './AppTextInput.svelte'

frontend/src/lib/components/apps/components/layout/AppContainer.svelte

@@ -2,14 +2,12 @@
 	import { getContext } from 'svelte'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext, ComponentCustomCSS, GridItem } from '../../types'
-	import { concatCustomCss } from '../../utils'
+	import type { AppEditorContext, GridItem } from '../../types'
 	import InputValue from '../helpers/InputValue.svelte'
 
 	export let id: string
 	export let configuration: Record<string, AppInput>
 	export let componentContainerHeight: number
-	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
 
 	let noPadding: boolean | undefined = undefined
 
@@ -26,8 +24,6 @@
 	}
 
 	$: $selectedComponent === id && onFocus()
-
-	$: css = concatCustomCss($app.css?.containercomponent, customCss)
 </script>
 
 <InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
@@ -36,9 +32,6 @@
 {#if $app.subgrids?.[`${id}-0`]}
 	<SubGridEditor
 		{noPadding}
-		{id}
-		class={css?.container.class}
-		style={css?.container.style}
 		bind:subGrid={$app.subgrids[`${id}-0`]}
 		containerHeight={componentContainerHeight}
 		on:focus={() => {

frontend/src/lib/components/apps/components/layout/AppDivider.svelte

@@ -1,14 +1,6 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
-	import { twMerge } from 'tailwind-merge'
 	import type { AppInput } from '../../inputType'
-	import type {
-		AppEditorContext,
-		ComponentCustomCSS,
-		HorizontalAlignment,
-		VerticalAlignment
-	} from '../../types'
-	import { concatCustomCss } from '../../utils'
+	import type { HorizontalAlignment, VerticalAlignment } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
 
@@ -16,34 +8,17 @@
 	export let configuration: Record<string, AppInput>
 	export let horizontalAlignment: HorizontalAlignment | undefined = undefined
 	export let verticalAlignment: VerticalAlignment | undefined = undefined
-	export let customCss: ComponentCustomCSS<'container' | 'divider'> | undefined = undefined
 	export let position: 'horizontal' | 'vertical'
-
-	const { app } = getContext<AppEditorContext>('AppEditorContext')
 	let size = 2
 	let color = '#00000060'
-
-	$: css = concatCustomCss($app.css?.[position + 'dividercomponent'], customCss)
 </script>
 
 <InputValue {id} input={configuration.size} bind:value={size} />
 <InputValue {id} input={configuration.color} bind:value={color} />
 
-<AlignWrapper
-	{horizontalAlignment}
-	{verticalAlignment}
-	class={twMerge(css?.container?.class, 'h-full')}
-	style={css?.container?.style}
->
+<AlignWrapper {horizontalAlignment} {verticalAlignment} class="h-full">
 	<div
-		class={twMerge(
-			`rounded-full ${position === 'horizontal' ? 'w-full' : 'h-full'}`,
-			css?.divider?.class ?? ''
-		)}
-		style="
-			{position === 'horizontal' ? 'height' : 'width'}: {size}px;
-			background-color: {color};
-			{css?.divider?.style ?? ''}
-		"
+		class="rounded-full {position === 'horizontal' ? 'w-full' : 'h-full'}"
+		style="{position === 'horizontal' ? 'height' : 'width'}: {size}px; background-color: {color}"
 	/>
 </AlignWrapper>

frontend/src/lib/components/apps/components/layout/AppDrawer.svelte

@@ -1,89 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte'
-	import SubGridEditor from '../../editor/SubGridEditor.svelte'
-	import type { AppInput } from '../../inputType'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
-	import InputValue from '../helpers/InputValue.svelte'
-	import Portal from 'svelte-portal'
-	import { concatCustomCss } from '../../utils'
-	import { Button, ButtonType, Drawer, DrawerContent } from '$lib/components/common'
-	import { twMerge } from 'tailwind-merge'
-	import { AlignWrapper } from '../helpers'
-
-	export let customCss: ComponentCustomCSS<'container'> | undefined = undefined
-	export let id: string
-	export let configuration: Record<string, AppInput>
-	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
-	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
-	export let noWFull = false
-
-	const { app, focusedGrid, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
-
-	let gridContent: string[] | undefined = undefined
-	let noPadding: boolean | undefined = undefined
-	let drawerTitle: string | undefined = undefined
-	let appDrawer: Drawer
-
-	let labelValue: string
-	let color: ButtonType.Color
-	let size: ButtonType.Size
-	let disabled: boolean | undefined = undefined
-	let fillContainer: boolean | undefined = undefined
-
-	$: css = concatCustomCss($app.css?.containercomponent, customCss)
-</script>
-
-<div class="h-full w-full">
-	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
-		<Button
-			btnClasses={twMerge(
-				$app.css?.['buttoncomponent']?.['button']?.class,
-				fillContainer ? 'w-full h-full' : ''
-			)}
-			{disabled}
-			on:pointerdown={(e) => {
-				e?.stopPropagation()
-				window.dispatchEvent(new Event('pointerup'))
-			}}
-			on:click={async (e) => {
-				$focusedGrid = {
-					parentComponentId: id,
-					subGridIndex: 0
-				}
-				appDrawer.toggleDrawer()
-			}}
-			{size}
-			{color}
-		>
-			<div>{labelValue}</div>
-		</Button>
-	</AlignWrapper>
-</div>
-
-<InputValue {id} input={configuration.gridContent} bind:value={gridContent} />
-<InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
-<InputValue {id} input={configuration.drawerTitle} bind:value={drawerTitle} />
-<InputValue {id} input={configuration.label} bind:value={labelValue} />
-<InputValue {id} input={configuration.color} bind:value={color} />
-<InputValue {id} input={configuration.size} bind:value={size} />
-<InputValue {id} input={configuration.fillContainer} bind:value={fillContainer} />
-
-<Portal target="#app-editor-top-level-drawer">
-	<Drawer bind:this={appDrawer} size="800px" alwaysOpen positionClass="!absolute">
-		<DrawerContent title={drawerTitle} on:close={appDrawer.toggleDrawer}>
-			{#if $app.subgrids?.[`${id}-0`]}
-				<SubGridEditor
-					{noPadding}
-					{id}
-					class={css?.container.class}
-					style={css?.container.style}
-					bind:subGrid={$app.subgrids[`${id}-0`]}
-					containerHeight={1200}
-					on:focus={() => {
-						$selectedComponent = id
-					}}
-				/>
-			{/if}
-		</DrawerContent>
-	</Drawer>
-</Portal>

frontend/src/lib/components/apps/components/layout/AppTabs.svelte

@@ -4,17 +4,13 @@
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppEditorContext, ComponentCustomCSS } from '../../types'
-	import { concatCustomCss } from '../../utils'
+	import type { AppEditorContext, GridItem } from '../../types'
 	import InputValue from '../helpers/InputValue.svelte'
 
 	export let id: string
 	export let configuration: Record<string, AppInput>
 	export let componentContainerHeight: number
 	export let tabs: string[]
-	export let customCss:
-		| ComponentCustomCSS<'tabRow' | 'tabs' | 'selectedTab' | 'container'>
-		| undefined = undefined
 
 	export const staticOutputs: string[] = ['selectedTabIndex']
 	const { app, worldStore, focusedGrid, selectedComponent } =
@@ -35,15 +31,6 @@
 
 	function handleTabSelection() {
 		outputs?.selectedTabIndex.set(selectedIndex)
-		if ($selectedComponent != id) {
-			$selectedComponent = id
-		}
-		if ($focusedGrid?.parentComponentId != id || $focusedGrid?.subGridIndex != selectedIndex) {
-			$focusedGrid = {
-				parentComponentId: id,
-				subGridIndex: selectedIndex
-			}
-		}
 	}
 
 	$: selectedIndex >= 0 && handleTabSelection()
@@ -58,8 +45,6 @@
 	}
 
 	$: $selectedComponent === id && selectedIndex >= 0 && onFocus()
-
-	$: css = concatCustomCss($app.css?.tabscomponent, customCss)
 </script>
 
 <InputValue {id} input={configuration.tabs} bind:value={tabs} />
@@ -67,15 +52,9 @@
 
 <div>
 	<div bind:clientHeight={tabHeight} on:pointerdown|stopPropagation>
-		<Tabs bind:selected class={css?.tabRow?.class} style={css?.tabRow?.style}>
+		<Tabs bind:selected>
 			{#each tabs ?? [] as res}
-				<Tab
-					value={res}
-					class={css?.tabs?.class}
-					style={css?.tabs?.style}
-					selectedClass={css?.selectedTab?.class}
-					selectedStyle={css?.selectedTab?.style}
-				>
+				<Tab value={res}>
 					<span class="font-semibold">{res}</span>
 				</Tab>
 			{/each}
@@ -84,12 +63,9 @@
 	{#if $app.subgrids}
 		{#each tabs ?? [] as res, i}
 			<SubGridEditor
-				{id}
 				visible={i === selectedIndex}
 				bind:subGrid={$app.subgrids[`${id}-${i}`]}
 				{noPadding}
-				class={css?.container?.class}
-				style={css?.container?.style}
 				containerHeight={componentContainerHeight - tabHeight}
 				on:focus={() => {
 					$selectedComponent = id

frontend/src/lib/components/apps/editor/AppEditor.svelte

@@ -24,7 +24,7 @@
 	import Icon from 'svelte-awesome'
 	import { faCode, faPlus, faSliders } from '@fortawesome/free-solid-svg-icons'
 	import ContextPanel from './contextPanel/ContextPanel.svelte'
-	import { classNames, encodeState } from '$lib/utils'
+	import { encodeState } from '$lib/utils'
 	import AppPreview from './AppPreview.svelte'
 	import { userStore, workspaceStore } from '$lib/stores'
 
@@ -59,6 +59,7 @@
 
 	const runnableComponents = writable<Record<string, () => Promise<void>>>({})
 	const errorByComponent = writable<Record<string, { error: string; componentId: string }>>({})
+
 	const focusedGrid = writable<FocusedGrid | undefined>(undefined)
 
 	setContext<AppEditorContext>('AppEditorContext', {
@@ -81,8 +82,7 @@
 		noBackend: false,
 		errorByComponent,
 		openDebugRun: writable(undefined),
-		focusedGrid,
-		stateId: writable(0)
+		focusedGrid
 	})
 
 	let timeout: NodeJS.Timeout | undefined = undefined
@@ -126,7 +126,7 @@
 
 {#if $connectingInput.opened}
 	<div
-		class="absolute w-full h-screen bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
+		class="absolute  w-full h-screen bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
 	/>
 {/if}
 {#if !$userStore?.operator}
@@ -172,17 +172,14 @@
 									style={$appStore.css?.['app']?.['viewer']?.style}
 								>
 									<div
-										class={classNames(
-											'relative mx-auto w-full h-full overflow-auto',
-											app.fullscreen ? '' : 'max-w-6xl'
-										)}
+										class="relative  mx-auto w-full h-full overflow-auto {app.fullscreen
+											? ''
+											: 'max-w-6xl'}"
 									>
 										{#if $appStore.grid}
 											<div class={width}>
 												<GridEditor {policy} />
 											</div>
-
-											<div id="app-editor-top-level-drawer" />
 										{/if}
 									</div>
 								</div>

frontend/src/lib/components/apps/editor/AppEditorHeader.svelte

@@ -51,7 +51,7 @@
 		UserAppInput
 	} from '../inputType'
 	import type { AppEditorContext } from '../types'
-	import { allItems, toStatic } from '../utils'
+	import { toStatic } from '../utils'
 	import AppExportButton from './AppExportButton.svelte'
 	import AppInputs from './AppInputs.svelte'
 	import type { AppComponent } from './component/components'
@@ -124,7 +124,7 @@
 	}
 	async function computeTriggerables() {
 		const allTriggers = await Promise.all(
-			allItems($app.grid, $app.subgrids)
+			$app.grid
 				.flatMap((x) => {
 					let c = x.data as AppComponent
 					let r: (AppInput | undefined)[] = [c.componentInput]
@@ -293,7 +293,7 @@
 				</PanelSection>
 			</Pane>
 			<Pane size={75}>
-				<div class="h-full w-full overflow-auto">
+				<div class="h-full w-full overflow-hidden">
 					{#if selectedJobId}
 						{#if !job}
 							<Skeleton layout={[[40]]} />

frontend/src/lib/components/apps/editor/AppPreview.svelte

@@ -62,8 +62,7 @@
 		noBackend,
 		errorByComponent: writable({}),
 		openDebugRun: writable(undefined),
-		focusedGrid: writable(undefined),
-		stateId: writable(0)
+		focusedGrid: writable(undefined)
 	})
 
 	let mounted = false
@@ -77,8 +76,6 @@
 	$: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : ''
 </script>
 
-<div id="app-editor-top-level-drawer" />
-
 <div class="relative">
 	<div
 		class="{$$props.class} {lockedClasses} h-full 
@@ -90,7 +87,6 @@
 			</div>
 		{/if}
 	</div>
-
 	{#if isLocked}
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<div

frontend/src/lib/components/apps/editor/GridEditor.svelte

@@ -36,7 +36,7 @@
 		$app.grid.map((gridItem) => {
 			const disabledGridItem = fct(gridItem)
 
-			if (disabledGridItem?.data?.subGrids) {
+			if (disabledGridItem.data.subGrids) {
 				disabledGridItem.data.subGrids = disabledGridItem.data.subGrids.map(
 					(subgrid: GridItem[]) => subgrid?.map((subgridItem: GridItem) => fct(subgridItem)) ?? []
 				)
@@ -106,7 +106,7 @@
 			intervalId = setTimeout(() => {
 				lazyGrid.set($app.grid)
 				intervalId = undefined
-			}, 500)
+			}, 100)
 		}
 	}
 
@@ -135,7 +135,7 @@
 
 <div class="relative w-full z-20 overflow-visible">
 	<div
-		class="w-full sticky top-0 flex justify-between border-l border-r border-b {$connectingInput?.opened
+		class="w-full sticky  top-0 flex justify-between border-l border-r border-b {$connectingInput?.opened
 			? ''
 			: 'bg-gray-50 '} px-4 py-2 items-center gap-4"
 		style="z-index: 1000;"
@@ -149,10 +149,9 @@
 		</div>
 	</div>
 
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div
 		style={$app.css?.['app']?.['grid']?.style}
-		class={twMerge('px-4 pt-4 pb-2 overflow-visible', $app.css?.['app']?.['grid']?.class ?? '')}
+		class={twMerge('px-4 pt-4 pb-2  overflow-visible', $app.css?.['app']?.['grid']?.class ?? '')}
 		on:pointerdown={onpointerdown}
 		on:pointerleave={onpointerup}
 		on:pointerup={onpointerup}
@@ -198,7 +197,7 @@
 					>
 						<Component
 							{pointerdown}
-							bind:component={gridComponent.data}
+							bind:pComponent={gridComponent.data}
 							selected={$selectedComponent === dataItem.data.id}
 							locked={isFixed(gridComponent)}
 							on:delete={() => removeGridElement(gridComponent.data)}

frontend/src/lib/components/apps/editor/SubGridEditor.svelte

@@ -2,29 +2,24 @@
 	import { classNames } from '$lib/utils'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import Grid from '@windmill-labs/svelte-grid'
-	import { twMerge } from 'tailwind-merge'
 	import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils'
 	import type { AppEditorContext, GridItem } from '../types'
 	import Component from './component/Component.svelte'
 	import { findGridItem } from './appUtils'
 
 	export let containerHeight: number
-	let classes = ''
-	export { classes as class }
-	export let style = ''
 	export let noPadding = false
+	//export let id: string
 	export let subGrid: GridItem[] = []
 	export let visible: boolean = true
-	export let id: string
 
 	const dispatch = createEventDispatcher()
 
 	const { app, connectingInput, selectedComponent, focusedGrid } =
 		getContext<AppEditorContext>('AppEditorContext')
 
-	$: highlight = id === $focusedGrid?.parentComponentId && $selectedComponent !== id
-
 	let pointerdown = false
+
 	let onComponent: string | undefined = undefined
 
 	const onpointerdown = (e) => {
@@ -64,21 +59,14 @@
 	let container
 </script>
 
-<div
-	class="relative w-full subgrid {visible ? 'visible' : 'invisible h-0 overflow-hidden'} 	"
-	bind:this={container}
->
+<div class="relative w-full subgrid {visible ? 'visible' : 'invisible h-0 '}" bind:this={container}>
 	<div
-		class={twMerge(
-			'py-2 overflow-auto',
-			classes ?? '',
-			noPadding ? 'px-0' : 'px-2',
-			highlight ? 'border-indigo-500 border border-dashed' : ''
-		)}
+		class:px-2={!noPadding}
+		class="py-2 overflow-auto  {$connectingInput?.opened ? '' : ''}"
 		on:pointerdown|stopPropagation={onpointerdown}
 		on:pointerleave={onpointerup}
 		on:pointerup={onpointerup}
-		style="height: {containerHeight}px; {style ?? ''}"
+		style="height: {containerHeight}px;"
 	>
 		<div>
 			<Grid
@@ -122,7 +110,7 @@
 						>
 							<Component
 								{pointerdown}
-								bind:component={gridComponent.data}
+								bind:pComponent={gridComponent.data}
 								selected={$selectedComponent === dataItem.data.id}
 								locked={isFixed(gridComponent)}
 								on:lock={() => lock(gridComponent)}

frontend/src/lib/components/apps/editor/appUtils.ts

@@ -93,11 +93,8 @@ export function insertNewGridItem(
 		subGrid.push(createNewGridItem(subGrid, id, data))
 		app.subgrids[key] = subGrid
 	}
-	// We only want to set subgrids when we are not moving
-	if (!keepId) {
-		for (let i = 0; i < (data.numberOfSubgrids ?? 0); i++) {
-			app.subgrids[`${id}-${i}`] = []
-		}
+	for (let i = 0; i < (data.numberOfSubgrids ?? 0); i++) {
+		app.subgrids[`${id}-${i}`] = []
 	}
 
 	return id
@@ -129,11 +126,10 @@ export function getAllSubgridsAndComponentIds(
 export function deleteGridItem(
 	app: App,
 	component: AppComponent,
-	parent: string | undefined,
-	shouldKeepSubGrid: boolean
+	parent: string | undefined
 ): string[] {
 	let [subgrids, components] = getAllSubgridsAndComponentIds(app, component)
-	if (app.subgrids && !shouldKeepSubGrid) {
+	if (app.subgrids) {
 		subgrids.forEach((id) => {
 			delete app.subgrids![id]
 		})

frontend/src/lib/components/apps/editor/component/Component.svelte

@@ -5,6 +5,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import type { AppEditorContext } from '../../types'
 	import ComponentHeader from '../ComponentHeader.svelte'
+	import { deepEqual } from 'fast-equals'
 
 	import {
 		AppBarChart,
@@ -37,9 +38,8 @@
 	} from '../../components'
 	import type { AppComponent } from './components'
 	import AppAggridTable from '../../components/display/table/AppAggridTable.svelte'
-	import AppDrawer from '../../components/layout/AppDrawer.svelte'
 
-	export let component: AppComponent
+	export let pComponent: AppComponent
 	export let selected: boolean
 	export let locked: boolean = false
 	export let pointerdown: boolean = false
@@ -50,7 +50,10 @@
 	let initializing: boolean | undefined = undefined
 	let componentContainerHeight: number = 0
 
-	$: console.log('component', component)
+	let component = JSON.parse(JSON.stringify(pComponent))
+	$: if (pComponent && !deepEqual(pComponent, component)) {
+		component = JSON.parse(JSON.stringify(pComponent))
+	}
 </script>
 
 <div
@@ -189,7 +192,6 @@
 		{:else if component.type === 'passwordinputcomponent'}
 			<AppTextInput
 				inputType="password"
-				appCssKey="passwordinputcomponent"
 				{...component}
 				bind:staticOutputs={$staticOutputs[component.id]}
 			/>
@@ -229,8 +231,6 @@
 			<AppFileInput {...component} bind:staticOutputs={$staticOutputs[component.id]} />
 		{:else if component.type === 'imagecomponent'}
 			<AppImage {...component} bind:staticOutputs={$staticOutputs[component.id]} />
-		{:else if component.type === 'drawercomponent'}
-			<AppDrawer {...component} />
 		{/if}
 	</div>
 </div>

frontend/src/lib/components/apps/editor/component/components.ts

@@ -27,8 +27,7 @@ import {
 	SeparatorHorizontal,
 	SeparatorVertical,
 	Paperclip,
-	Image,
-	SidebarClose
+	Image
 } from 'lucide-svelte'
 import type { BaseAppComponent } from '../../types'
 
@@ -79,7 +78,6 @@ export type TabsComponent = BaseComponent<'tabscomponent'> & {
 	tabs: string[]
 }
 export type ContainerComponent = BaseComponent<'containercomponent'>
-export type DrawerComponent = BaseComponent<'drawercomponent'>
 
 export type AppComponent = BaseAppComponent &
 	(
@@ -114,7 +112,6 @@ export type AppComponent = BaseAppComponent &
 		| FileInputComponent
 		| ImageComponent
 		| AggridComponent
-		| DrawerComponent
 	)
 
 export type AppComponentDimensions = `${IntRange<
@@ -178,9 +175,6 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
 					onlyStatic: true
 				}
 			},
-			customCss: {
-				container: { class: '', style: '' }
-			} as const,
 			componentInput: undefined,
 			card: false,
 			numberOfSubgrids: 1
@@ -342,10 +336,7 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
 					value: ''
 				}
 			},
-			customCss: {
-				container: { class: '', style: '' },
-				button: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: true
 		}
 	},
@@ -386,10 +377,7 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
 					optionValuesKey: 'buttonSizeOptions'
 				}
 			},
-			customCss: {
-				button: { class: '', style: '' },
-				popup: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: true
 		}
 	},
@@ -420,9 +408,7 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
 				fieldType: 'object',
 				value: { data: [25, 50, 25], labels: ['Pie', 'Charts', '<3'] }
 			},
-			customCss: {
-				container: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: true
 		}
 	},
@@ -453,9 +439,7 @@ export const components: Record<AppComponent['type'], AppComponentConfig> = {
 				fieldType: 'object',
 				value: { data: [25, 50, 25], labels: ['Bar', 'Charts', '<3'] }
 			},
-			customCss: {
-				container: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: true
 		}
 	},
@@ -478,9 +462,7 @@ Hello \${ctx.username}
 </h1>`
 			},
 			configuration: {},
-			customCss: {
-				container: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: false
 		}
 	},
@@ -622,9 +604,7 @@ Hello \${ctx.username}
 					}
 				]
 			},
-			customCss: {
-				container: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: true
 		}
 	},
@@ -674,9 +654,7 @@ Hello \${ctx.username}
 					}
 				]
 			},
-			customCss: {
-				container: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: true
 		}
 	},
@@ -713,12 +691,7 @@ Hello \${ctx.username}
 					}
 				]
 			},
-			customCss: {
-				container: { class: '', style: '' },
-				tableHeader: { class: '', style: '' },
-				tableBody: { class: '', style: '' },
-				tableFooter: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: true,
 			actionButtons: []
 		}
@@ -742,18 +715,6 @@ Hello \${ctx.username}
 					fieldType: 'boolean',
 					value: false,
 					onlyStatic: true
-				},
-				pagination: {
-					type: 'static',
-					fieldType: 'boolean',
-					value: false,
-					onlyStatic: true
-				},
-				pageSize: {
-					type: 'static',
-					fieldType: 'number',
-					value: 10,
-					onlyStatic: true
 				}
 			},
 			componentInput: {
@@ -774,7 +735,7 @@ Hello \${ctx.username}
 				]
 			},
 			customCss: {},
-			card: true
+			card: true,
 		}
 	},
 	checkboxcomponent: {
@@ -799,9 +760,7 @@ Hello \${ctx.username}
 					fieldType: 'boolean'
 				}
 			},
-			customCss: {
-				text: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: false
 		}
 	},
@@ -828,9 +787,7 @@ Hello \${ctx.username}
 					fieldType: 'text'
 				}
 			},
-			customCss: {
-				input: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: false
 		}
 	},
@@ -866,9 +823,7 @@ Hello \${ctx.username}
 					onlyStatic: true
 				}
 			},
-			customCss: {
-				input: { style: '' }
-			} as const,
+			customCss: {},
 			card: false,
 			softWrap: true
 		}
@@ -898,22 +853,20 @@ Hello \${ctx.username}
 				min: {
 					type: 'static',
 					value: undefined,
-					fieldType: 'number'
+					fieldType: 'number',
 				},
 				max: {
 					type: 'static',
 					value: undefined,
-					fieldType: 'number'
+					fieldType: 'number',
 				},
 				step: {
 					type: 'static',
 					value: 1,
-					fieldType: 'number'
+					fieldType: 'number',
 				}
 			},
-			customCss: {
-				input: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: false
 		}
 	},
@@ -954,9 +907,7 @@ Hello \${ctx.username}
 					optionValuesKey: 'localeOptions'
 				}
 			},
-			customCss: {
-				input: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: false
 		}
 	},
@@ -980,24 +931,20 @@ Hello \${ctx.username}
 				max: {
 					type: 'static',
 					value: 42,
-					fieldType: 'number'
+					fieldType: 'number',
 				},
 				defaultValue: {
 					type: 'static',
 					value: 20,
-					fieldType: 'number'
+					fieldType: 'number',
 				},
 				step: {
 					type: 'static',
 					value: 1,
-					fieldType: 'number'
+					fieldType: 'number',
 				}
 			},
-			customCss: {
-				handle: { style: '' },
-				limits: { class: '', style: '' },
-				value: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: false
 		}
 	},
@@ -1015,34 +962,30 @@ Hello \${ctx.username}
 				min: {
 					type: 'static',
 					value: 0,
-					fieldType: 'number'
+					fieldType: 'number',
 				},
 				max: {
 					type: 'static',
 					value: 42,
-					fieldType: 'number'
+					fieldType: 'number',
 				},
 				defaultLow: {
 					type: 'static',
 					value: 10,
-					fieldType: 'number'
+					fieldType: 'number',
 				},
 				defaultHigh: {
 					type: 'static',
 					value: 20,
-					fieldType: 'number'
+					fieldType: 'number',
 				},
 				step: {
 					type: 'static',
 					value: 1,
-					fieldType: 'number'
+					fieldType: 'number',
 				}
 			},
-			customCss: {
-				handles: { style: '' },
-				limits: { class: '', style: '' },
-				values: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: false
 		}
 	},
@@ -1064,9 +1007,7 @@ Hello \${ctx.username}
 					onlyStatic: true
 				}
 			},
-			customCss: {
-				input: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: false
 		}
 	},
@@ -1097,9 +1038,7 @@ Hello \${ctx.username}
 					fieldType: 'date'
 				}
 			},
-			customCss: {
-				input: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: false
 		}
 	},
@@ -1119,12 +1058,6 @@ Hello \${ctx.username}
 					onlyStatic: true
 				}
 			},
-			customCss: {
-				tabRow: { class: '', style: '' },
-				allTabs: { class: '', style: '' },
-				selectedTab: { class: '', style: '' },
-				container: { class: '', style: '' }
-			} as const,
 			componentInput: undefined,
 			card: false,
 			numberOfSubgrids: 2,
@@ -1166,10 +1099,7 @@ Hello \${ctx.username}
 					onlyStatic: true
 				}
 			},
-			customCss: {
-				container: { class: '', style: '' },
-				icon: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: false
 		}
 	},
@@ -1196,10 +1126,7 @@ Hello \${ctx.username}
 					onlyStatic: true
 				}
 			},
-			customCss: {
-				container: { class: '', style: '' },
-				divider: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: false
 		}
 	},
@@ -1226,10 +1153,7 @@ Hello \${ctx.username}
 					onlyStatic: true
 				}
 			},
-			customCss: {
-				container: { class: '', style: '' },
-				divider: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: false
 		}
 	},
@@ -1262,9 +1186,7 @@ Hello \${ctx.username}
 					onlyStatic: true
 				}
 			},
-			customCss: {
-				container: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: false
 		}
 	},
@@ -1299,71 +1221,16 @@ Hello \${ctx.username}
 					fieldType: 'text',
 					onlyStatic: true,
 					tooltip: "This text will appear if the image can't be loaded for any reason"
+				},
+				customStyles: {
+					type: 'static',
+					value: '',
+					fieldType: 'textarea',
+					onlyStatic: true
 				}
 			},
-			customCss: {
-				image: { class: '', style: '' }
-			} as const,
+			customCss: {},
 			card: false
 		}
-	},
-	drawercomponent: {
-		name: 'Drawer',
-		icon: SidebarClose,
-		dims: '1:1-2:1',
-		data: {
-			softWrap: true,
-			id: '',
-			type: 'drawercomponent',
-			horizontalAlignment: 'center',
-			verticalAlignment: 'center',
-			configuration: {
-				noPadding: {
-					type: 'static',
-					fieldType: 'boolean',
-					value: false,
-					onlyStatic: true
-				},
-				drawerTitle: {
-					type: 'static',
-					fieldType: 'text',
-					value: 'Drawer title',
-					onlyStatic: true
-				},
-				label: {
-					type: 'static',
-					fieldType: 'text',
-					value: 'Press me'
-				},
-				color: {
-					fieldType: 'select',
-					type: 'static',
-					onlyStatic: true,
-					optionValuesKey: 'buttonColorOptions',
-					value: 'blue'
-				},
-				size: {
-					fieldType: 'select',
-					type: 'static',
-					onlyStatic: true,
-					optionValuesKey: 'buttonSizeOptions',
-					value: 'xs'
-				},
-				fillContainer: {
-					fieldType: 'boolean',
-					type: 'static',
-					onlyStatic: true,
-					value: false
-				},
-				disabled: {
-					fieldType: 'boolean',
-					type: 'eval',
-					expr: 'false'
-				}
-			},
-			componentInput: undefined,
-			card: false,
-			numberOfSubgrids: 1
-		}
 	}
 }

frontend/src/lib/components/apps/editor/component/sets.ts

@@ -6,8 +6,7 @@ const layout: ComponentSet = {
 		'tabscomponent',
 		'containercomponent',
 		'horizontaldividercomponent',
-		'verticaldividercomponent',
-		'drawercomponent'
+		'verticaldividercomponent'
 	]
 } as const
 
@@ -47,8 +46,8 @@ const display: ComponentSet = {
 		'plotlycomponent',
 		'scatterchartcomponent',
 		'timeseriescomponent',
-		'displaycomponent'
+		'displaycomponent',
 	]
 } as const
 
-export const COMPONENT_SETS = [layout, buttons, inputs, display] as const
+export const COMPONENT_SETS = [layout, buttons, inputs, display] as const

frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte

@@ -1,59 +1,34 @@
 <script lang="ts">
-	import { X } from 'lucide-svelte'
-	import { fade } from 'svelte/transition'
-	import { addWhitespaceBeforeCapitals } from '../../../../utils'
-	import type { ComponentCssProperty } from '../../types'
+	import type { ComponentCssProperty } from "../../types"
 
 	export let name: string
 	export let value: ComponentCssProperty | undefined
-
-	function reset(property: keyof ComponentCssProperty) {
-		if (value) {
-			value[property] = ''
-		}
-	}
 </script>
 
 <div class="text-sm font-semibold text-gray-500 capitalize pt-2">
-	{addWhitespaceBeforeCapitals(name)}
+	{name}
 </div>
 {#if value}
 	<div class="border-l border-gray-400/80 py-1 pl-3.5 mt-1 ml-0.5">
-		{#if value.style !== undefined}
-			<label class="block pb-2">
-				<div class="text-xs font-medium pb-0.5"> Style </div>
-				<div class="relative">
-					<input type="text" class="!pr-7" bind:value={value.style} on:focus />
-					{#if value?.style}
-						<button
-							transition:fade={{ duration: 100 }}
-							class="absolute z-10 top-1.5 right-1 rounded-full p-1 duration-200 hover:bg-gray-200"
-							aria-label="Remove styles"
-							on:click|preventDefault|stopPropagation={() => reset('style')}
-						>
-							<X size={14} />
-						</button>
-					{/if}
-				</div>
-			</label>
-		{/if}
-		{#if value.class !== undefined}
-			<label class="block">
-				<div class="text-xs font-medium pb-0.5"> Tailwind classes </div>
-				<div class="relative">
-					<input type="text" class="!pr-7" bind:value={value.class} on:focus />
-					{#if value?.class}
-						<button
-							transition:fade={{ duration: 100 }}
-							class="absolute z-10 top-1.5 right-1 rounded-full p-1 duration-200 hover:bg-gray-200"
-							aria-label="Remove classes"
-							on:click|preventDefault|stopPropagation={() => reset('class')}
-						>
-							<X size={14} />
-						</button>
-					{/if}
-				</div>
-			</label>
-		{/if}
+		<label class="block pb-2">
+			<div class="text-xs font-medium pb-0.5">
+				Style
+			</div>
+			<input
+				type="text"
+				bind:value={value.style}
+				on:focus
+			/>
+		</label>
+		<label class="block">
+			<div class="text-xs font-medium pb-0.5">
+				Tailwind classes
+			</div>
+			<input
+				type="text"
+				bind:value={value.class}
+				on:focus
+			/>
+		</label>
 	</div>
-{/if}
+{/if}

frontend/src/lib/components/apps/editor/componentsPanel/CssSettings.svelte

@@ -9,21 +9,15 @@
 	import { isOpenStore } from './store'
 	import CssProperty from './CssProperty.svelte'
 	import { components, type AppComponent } from '../component'
-	import { slide } from 'svelte/transition'
-
-	const STATIC_ELEMENTS = ['app'] as const
-	const TITLE_PREFIX = 'Css.' as const
-	const SHOW_UNUSED_ID = 'Setting.ShowUnused' as const
-
-	type CustomCSSType = (typeof STATIC_ELEMENTS)[number] | AppComponent['type']
 
 	interface CustomCSSEntry {
-		type: CustomCSSType
-		name: string
-		icon: any
-		ids: string[]
+		type: 'app' | AppComponent['type'];
+		name: string;
+		icon: any;
+		ids: string[];
 	}
 
+	const TITLE_PREFIX = 'Css.' as const
 	const { app } = getContext<AppEditorContext>('AppEditorContext')
 
 	let rawCode = ''
@@ -57,7 +51,7 @@
 			icon: LayoutDashboardIcon,
 			ids: ['viewer', 'grid', 'component']
 		},
-		...Object.values(components).map(({ name, icon, data: { type, customCss } }) => ({
+		...Object.values(components).map(({ name, icon, data: { type, customCss }}) => ({
 			type,
 			name,
 			icon,
@@ -76,7 +70,7 @@
 		}
 		e.ids.forEach((id) => {
 			if (!newCss[e.type][id]) {
-				newCss[e.type][id] = components?.[e.type]?.data?.customCss?.[id] ?? { class: '', style: '' }
+				newCss[e.type][id] = { style: '', class: '' }
 			}
 		})
 		e.ids
@@ -90,32 +84,20 @@
 	//@ts-ignore
 	$app.css = newCss
 
-	$: staticComponents = entries.filter(({ type }) => STATIC_ELEMENTS.includes(type as any))
-	$: usedComponents = Object.keys(
-		$app.grid.reduce((acc, { data }) => {
-			acc[data.type] = true
-			return acc
-		}, {})
-	)
-		.map((type) => entries.find((entry) => entry.type === type))
-		.filter(Boolean) as CustomCSSEntry[]
-	$: unusedComponents = entries.filter(({ type }) => {
-		return (
-			!STATIC_ELEMENTS.includes(type as any) && !usedComponents.find((entry) => entry.type === type)
-		)
-	})
-
 	onMount(() => {
 		isOpenStore.addItems(
-			[{ name: 'App' }, ...Object.values(components)].map((component) => {
+			[{ name: 'App' }, ...Object.values(components)].map(component => {
 				return { [TITLE_PREFIX + component.name]: false }
 			})
 		)
-		isOpenStore.addItems([{ [SHOW_UNUSED_ID]: false }])
 	})
 </script>
 
-<Tabs selected="ui" on:selected={(e) => switchTab(e.detail === 'json')} class="relative">
+<Tabs
+	selected="ui"
+	on:selected={(e) => switchTab(e.detail === 'json')}
+	class="relative"
+>
 	<Tab value="ui" size="xs" class="grow">
 		<div class="m-1 center-center">
 			<MousePointer2 size={16} />
@@ -130,7 +112,7 @@
 	</Tab>
 	<div slot="content" class="h-full overflow-y-auto">
 		<TabContent value="ui">
-			{#each [...staticComponents, ...usedComponents] as { type, name, icon, ids }}
+			{#each entries as { type, name, icon, ids }}
 				{#if ids.length > 0}
 					<ListItem title={name} prefix={TITLE_PREFIX}>
 						<div slot="title" class="flex items-center">
@@ -155,43 +137,6 @@
 					</ListItem>
 				{/if}
 			{/each}
-			<div class="px-1 my-4">
-				<button
-					on:click|preventDefault|stopPropagation={() => isOpenStore.toggle(SHOW_UNUSED_ID)}
-					class="w-full text-xs text-gray-500 text-center font-medium hover:underline p-2"
-				>
-					{$isOpenStore[SHOW_UNUSED_ID] ? 'Hide' : 'Show'} unused components
-				</button>
-			</div>
-			{#if $isOpenStore[SHOW_UNUSED_ID]}
-				<div transition:slide|local={{ duration: 300 }}>
-					{#each unusedComponents as { type, name, icon, ids }}
-						{#if ids.length > 0}
-							<ListItem title={name} prefix={TITLE_PREFIX}>
-								<div slot="title" class="flex items-center">
-									<svelte:component this={icon} size={18} />
-									<span class="ml-1">
-										{name}
-									</span>
-								</div>
-								<div class="pb-2">
-									{#each ids as id}
-										<div class="mb-3">
-											{#if $app?.css?.[type][id]}
-												<CssProperty
-													name={id}
-													bind:value={$app.css[type][id]}
-													on:focus={() => (isCustom[type] = true)}
-												/>
-											{/if}
-										</div>
-									{/each}
-								</div>
-							</ListItem>
-						{/if}
-					{/each}
-				</div>
-			{/if}
 		</TabContent>
 		<TabContent value="json">
 			{#if !emptyString(jsonError)}

frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte

@@ -10,7 +10,7 @@
 	$: isOpen = $isOpenStore[storeTitle]
 </script>
 
-<section class="pt-1 pb-2 px-1">
+<section class="mt-1 mb-2 px-1">
 	<button
 		on:click|preventDefault={() => isOpenStore.toggle(storeTitle)}
 		class="w-full flex justify-between items-center text-gray-700 px-2 py-1 

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import Button from '$lib/components/common/button/Button.svelte'
 	import type { Preview } from '$lib/gen'
+	import { faTrash } from '@fortawesome/free-solid-svg-icons'
 	import { createEventDispatcher, getContext, onMount } from 'svelte'
 	import type { AppEditorContext, InlineScript } from '../../types'
-	import { CheckCircle, Maximize2, Trash2, X } from 'lucide-svelte'
+	import { CheckCircle, Code2, Maximize2, Trash2, X } from 'lucide-svelte'
 	import InlineScriptEditorDrawer from './InlineScriptEditorDrawer.svelte'
 	import { inferArgs } from '$lib/infer'
 	import type { Schema } from '$lib/common'

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte

@@ -21,9 +21,7 @@
 		</Pane>
 		<Pane size={75}>
 			{#if !selectedScriptComponentId}
-				<div class="text-sm text-gray-500 text-center py-8 px-2">
-					Select a script on the left panel
-				</div>
+				<span class="p-2 text-sm text-gray-600">Select a script on the left panel</span>
 			{/if}
 
 			{#each $app.grid as gridItem (gridItem.data.id)}

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte

@@ -53,11 +53,7 @@
 	}
 </script>
 
-<div
-	class="sticky top-0 py-0.5 px-2 text-center bg-gray-200 text-gray-500 text-2xs font-bold tracking-wide border-b border-gray-300"
->
-	RUNNABLES
-</div>
+<div class="mb-0 pb-0 pl-2 sticky top-0 bg-white border-b text-xs font-semibold">Runnables</div>
 <div bind:this={list} class="grow flex flex-col gap-4">
 	<PanelSection title="Inline scripts" smallPadding>
 		<div class="flex flex-col gap-2 w-full">

frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -31,15 +31,8 @@
 	export let parent: string | undefined
 	export let noGrid = false
 
-	const {
-		app,
-		staticOutputs,
-		runnableComponents,
-		selectedComponent,
-		worldStore,
-		focusedGrid,
-		stateId
-	} = getContext<AppEditorContext>('AppEditorContext')
+	const { app, staticOutputs, runnableComponents, selectedComponent, worldStore, focusedGrid } =
+		getContext<AppEditorContext>('AppEditorContext')
 
 	function duplicateElement(id: string) {
 		$dirtyStore = true
@@ -51,7 +44,7 @@
 		$selectedComponent = undefined
 		$focusedGrid = undefined
 		if (component && !noGrid) {
-			let ids = deleteGridItem($app, component, parent, false)
+			let ids = deleteGridItem($app, component, parent)
 			for (const key of ids) {
 				delete $staticOutputs[key]
 				delete $runnableComponents[key]
@@ -117,35 +110,31 @@
 						/>
 					{/if}
 				</div>
-				{#key $stateId}
-					{#if component.componentInput?.type === 'runnable'}
-						{#if Object.keys(component.componentInput.fields ?? {}).length > 0}
-							<div class="border w-full">
-								<PanelSection
-									smallPadding
-									title={`Runnable Inputs (${
-										Object.keys(component.componentInput.fields ?? {}).length
-									})`}
-								>
-									<svelte:fragment slot="action">
-										<Tooltip>
-											The runnable inputs of a button component are not settable by the user. They
-											must be defined statically or connected.
-										</Tooltip>
-									</svelte:fragment>
+				{#if component.componentInput?.type === 'runnable' && Object.keys(component.componentInput.fields ?? {}).length > 0}
+					<div class="border w-full">
+						<PanelSection
+							smallPadding
+							title={`Runnable Inputs (${
+								Object.keys(component.componentInput.fields ?? {}).length
+							})`}
+						>
+							<svelte:fragment slot="action">
+								<Tooltip>
+									The runnable inputs of a button component are not settable by the user. They must
+									be defined statically or connected.
+								</Tooltip>
+							</svelte:fragment>
 
-									<InputsSpecsEditor
-										id={component.id}
-										shouldCapitalize={false}
-										bind:inputSpecs={component.componentInput.fields}
-										userInputEnabled={component.type !== 'buttoncomponent'}
-										{rowColumns}
-									/>
-								</PanelSection>
-							</div>
-						{/if}
-					{/if}
-				{/key}
+							<InputsSpecsEditor
+								id={component.id}
+								shouldCapitalize={false}
+								bind:inputSpecs={component.componentInput.fields}
+								userInputEnabled={component.type !== 'buttoncomponent'}
+								{rowColumns}
+							/>
+						</PanelSection>
+					</div>
+				{/if}
 			</PanelSection>
 		{/if}
 
@@ -177,7 +166,7 @@
 			<PanelSection title="Custom CSS">
 				{#each Object.keys(component.customCss ?? {}) as name}
 					{#if component?.customCss?.[name]}
-						<div class="w-full mb-2">
+						<div class="mb-2">
 							<CssProperty {name} bind:value={component.customCss[name]} />
 						</div>
 					{/if}

frontend/src/lib/components/apps/editor/settingsPanel/GridTab.svelte

@@ -28,7 +28,7 @@
 	function deleteSubgrid(index: number) {
 		let subgrid = `${component.id}-${index}`
 		for (const item of $app!.subgrids![subgrid]) {
-			const components = deleteGridItem($app, item.data, subgrid, false)
+			const components = deleteGridItem($app, item.data, subgrid)
 			console.log(components)
 			for (const key in components) {
 				delete $staticOutputs[key]

frontend/src/lib/components/apps/editor/settingsPanel/MoveToOtherGrid.svelte

@@ -15,7 +15,6 @@
 
 	export let component: AppComponent | undefined
 	export let parent: string | undefined
-
 	let selectedOption: string
 
 	const { app } = getContext<AppEditorContext>('AppEditorContext')
@@ -32,12 +31,9 @@
 		}
 
 		const data: AppComponent = JSON.parse(JSON.stringify(node.data))
-		const shouldKeepSubGrid = data.numberOfSubgrids ? data.numberOfSubgrids >= 1 : false
-
 		$dirtyStore = true
 
-		deleteGridItem($app, data, parent, shouldKeepSubGrid)
-
+		deleteGridItem($app, data, parent)
 		return data
 	}
 
@@ -46,13 +42,15 @@
 		targetId: string,
 		targetSubGridIndex: number
 	) {
-		const focusedGrid = {
-			parentComponentId: targetId,
-			subGridIndex: targetSubGridIndex
-		}
-
-		insertNewGridItem($app, data, focusedGrid, true)
-
+		insertNewGridItem(
+			$app,
+			data,
+			{
+				parentComponentId: targetId,
+				subGridIndex: targetSubGridIndex
+			},
+			true
+		)
 		$app.grid = [...$app.grid]
 	}
 

frontend/src/lib/components/apps/types.ts

@@ -30,8 +30,8 @@ export interface GeneralAppInput {
 }
 
 export type ComponentCssProperty = {
-	class?: string
-	style?: string
+	class: string
+	style: string
 }
 
 export type ComponentCustomCSS<T extends string = string> = Record<T, ComponentCssProperty>
@@ -42,14 +42,14 @@ export interface BaseAppComponent extends Partial<Aligned> {
 	configuration: Record<
 		string,
 		GeneralAppInput &
-		(
-			| StaticAppInput
-			| ConnectedAppInput
-			| UserAppInput
-			| RowAppInput
-			| EvalAppInput
-			| UploadAppInput
-		)
+			(
+				| StaticAppInput
+				| ConnectedAppInput
+				| UserAppInput
+				| RowAppInput
+				| EvalAppInput
+				| UploadAppInput
+			)
 	>
 	card: boolean | undefined
 	customCss?: ComponentCustomCSS
@@ -131,7 +131,6 @@ export type AppEditorContext = {
 	errorByComponent: Writable<Record<string, { error: string; componentId: string }>>
 	openDebugRun: Writable<((componentID: string) => void) | undefined>
 	focusedGrid: Writable<FocusedGrid | undefined>
-	stateId: Writable<number>
 }
 
 export type FocusedGrid = { parentComponentId: string; subGridIndex: number }

frontend/src/lib/components/apps/utils.ts

@@ -3,14 +3,49 @@ import { FlowService, ScriptService } from '$lib/gen'
 import { inferArgs } from '$lib/infer'
 import { emptySchema } from '$lib/utils'
 import type { AppComponent } from './editor/component'
-import type { App, ComponentCssProperty, ComponentCustomCSS, GridItem } from './types'
-import { getRecommendedDimensionsByComponent } from './editor/component'
-import { gridColumns } from './gridUtils'
-import gridHelp from '@windmill-labs/svelte-grid/src/utils/helper'
-import { twMerge } from 'tailwind-merge'
+
 import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType'
 import type { Output } from './rx'
-import { getNextId } from '../flows/flowStateUtils'
+import type { App, GridItem } from './types'
+
+/*
+export function deleteComponent(
+	subgrid: string | undefined,
+	component: AppComponent,
+	app: App,
+	staticOutputs: Record<string, any>,
+	runnableComponents: Record<string, any>
+) {
+	if (parentItems) {
+		let index = parentItems.findIndex((item) => item.data?.id === component.id)
+		if (index != -1) {
+			parentItems.splice(index, 1)
+		}
+	}
+
+	delete staticOutputs[component.id]
+	delete runnableComponents[component.id]
+
+	if (
+		component.componentInput?.type === 'runnable' &&
+		component.componentInput?.runnable?.type === 'runnableByName'
+	) {
+		const { name, inlineScript } = component.componentInput.runnable
+
+		if (inlineScript) {
+			if (!app.unusedInlineScripts) {
+				app.unusedInlineScripts = []
+			}
+
+			app.unusedInlineScripts.push({
+				name,
+				inlineScript
+			})
+		}
+	}
+}
+
+*/
 
 export function allItems(
 	grid: GridItem[],
@@ -238,128 +273,3 @@ export function toPascalCase(text: string) {
 export function toKebabCase(text: string) {
 	return text.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
 }
-
-export function findParent(root: GridItem[], id: string): GridItem | undefined {
-	for (const a of root) {
-		if (a.id === id) {
-			return a
-		}
-
-		if (a.data.subGrids) {
-			// Recursively search the sub-grids
-			for (const subGrid of a.data.subGrids) {
-				const result = findParent(subGrid, id)
-				if (result) {
-					return result
-				}
-			}
-		}
-	}
-
-	return undefined
-}
-
-export function insertNewGridItem(
-	root: GridItem[],
-	id: string,
-	subGridIndex: number,
-	newId: string,
-	data: AppComponent
-): GridItem[] {
-	const parentA = findParent(root, id)
-
-	if (!parentA) {
-		throw new Error(`Parent A object with ID ${id} not found.`)
-	}
-
-	const subGrid = parentA.data.subGrids[subGridIndex]
-
-	if (!subGrid) {
-		throw new Error(`Sub-grid with index ${subGridIndex} not found.`)
-	}
-
-	const newItem = createNewGridItem(subGrid ?? [], newId, data)
-	subGrid.push(newItem)
-	return root
-}
-
-// The grid is needed to find a space for the new component
-export function createNewGridItem(grid: GridItem[], id: string, data: AppComponent): GridItem {
-	const appComponent = data
-
-	appComponent.id = id
-
-	const newComponent = {
-		fixed: false,
-		resizable: true,
-		draggable: true,
-		customDragger: false,
-		customResizer: false,
-		x: 0,
-		y: 0
-	}
-
-	let newData: AppComponent = JSON.parse(JSON.stringify(appComponent))
-
-	const newItem: GridItem = {
-		data: newData,
-		id: id
-	}
-
-	gridColumns.forEach((column) => {
-		const rec = getRecommendedDimensionsByComponent(appComponent.type, column)
-
-		newItem[column] = {
-			...newComponent,
-			min: { w: 1, h: 1 },
-			max: { w: column, h: 100 },
-			w: rec.w,
-			h: rec.h
-		}
-		const position = gridHelp.findSpace(newItem, grid, column) as { x: number; y: number }
-		newItem[column] = { ...newItem[column], ...position }
-	})
-
-	return newItem
-}
-
-function recursiveGetIds(gridItem: GridItem): string[] {
-	const subGrids = gridItem.data.subGrids ?? []
-	const subGridIds = subGrids
-		.map((subGrid: GridItem[]) => subGrid.map(recursiveGetIds))
-		.flat(Infinity)
-	return [gridItem.data.id, ...subGridIds]
-}
-
-export function getNextGridItemId(grid: GridItem[] = []): string {
-	const gridItemIds = grid.map(recursiveGetIds).flat()
-	const id = getNextId(gridItemIds)
-	return id
-}
-
-export function concatCustomCss<T extends string = string>(
-	appCss?: ComponentCustomCSS<T>,
-	componentCss?: ComponentCustomCSS<T>
-): Record<T, ComponentCssProperty> | undefined {
-	if (!componentCss) return undefined
-
-	const customStyle = {} as Record<T, ComponentCssProperty>
-	Object.keys(componentCss).forEach((key) => {
-		const k = key as keyof typeof componentCss
-
-		// This is the general style of the component type
-		const appStyle = appCss?.[k]?.style?.trim() || ''
-		const appEnding = appStyle?.endsWith(';') || !appStyle ? ' ' : '; '
-
-		// This is the custom style of the component instance
-		const compStyle = componentCss[k]?.style?.trim() || ''
-		const compEnding = compStyle?.endsWith(';') || !compStyle ? ' ' : ';'
-
-		customStyle[k] = {
-			style: (appStyle + appEnding + compStyle + compEnding).trim(),
-			class: twMerge(appCss?.[k]?.class, componentCss[k]?.class)
-		}
-	})
-
-	return customStyle
-}

frontend/src/lib/components/common/drawer/Drawer.svelte

@@ -76,15 +76,9 @@
 
 <svelte:window on:keydown={onKeyDown} />
 
-<aside
-	class="drawer {$$props.class} {$$props.positionClass}"
-	class:open
-	class:close={!open && timeout}
-	{style}
->
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<div class="overlay {$$props.positionClass}" on:click={handleClickAway} />
-	<div class="panel {placement} {$$props.positionClass}" class:size>
+<aside class="drawer {$$props.class}" class:open class:close={!open && timeout} {style}>
+	<div class="overlay" on:click={handleClickAway} />
+	<div class="panel {placement}" class:size>
 		{#if open || !timeout || alwaysOpen}
 			<slot />
 		{/if}

frontend/src/lib/components/common/drawer/DrawerContent.svelte

@@ -3,6 +3,7 @@
 	import { faClose } from '@fortawesome/free-solid-svg-icons'
 	import { createEventDispatcher } from 'svelte'
 	import { Icon } from 'svelte-awesome'
+	import Button from '../button/Button.svelte'
 
 	export let title: string | undefined = undefined
 	export let overflow_y = true

frontend/src/lib/components/common/fileInput/FileInput.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte'
-	import { FileUp } from 'lucide-svelte'
-	import Button from '../../common/button/Button.svelte'
-	import { faTrash } from '@fortawesome/free-solid-svg-icons'
-	import { twMerge } from 'tailwind-merge'
+	import { createEventDispatcher } from "svelte"
+	import { FileUp } from "lucide-svelte"
+	import Button from "../../common/button/Button.svelte"
+	import { faTrash } from "@fortawesome/free-solid-svg-icons"
 
 	let c = ''
 	export { c as class }
-	export let style = ''
 	export let accept = '*'
 	export let multiple = false
 	export let convertToBase64 = false
@@ -18,20 +16,20 @@
 	let files: File[] | undefined = undefined
 
 	async function onChange(fileList: FileList | null) {
-		if (!fileList || !fileList.length) {
-			files = undefined
-			dispatch('change', files)
-			return
+		if(!fileList || !fileList.length) {
+			files = undefined;
+			dispatch('change', files);
+			return;
 		}
 
-		if (!multiple || !files) {
+		if(!multiple || !files) {
 			files = []
 		}
-		for (let i = 0; i < fileList.length; i++) {
-			const file = fileList.item(i)
-			if (file) files.push(file)
+		for(let i = 0; i < fileList.length; i++) {
+			const file = fileList.item(i);
+			if(file) files.push(file);
 		}
-		// Needs to be reset so the same file can be selected
+		// Needs to be reset so the same file can be selected 
 		// multiple times in a row
 		input.value = ''
 
@@ -40,16 +38,16 @@
 
 	async function fileToBase64(file: File): Promise<string> {
 		return new Promise((resolve) => {
-			const reader = new FileReader()
+			const reader = new FileReader();
 			reader.onloadend = () => {
-				resolve(reader.result as string)
-			}
-			reader.readAsDataURL(file)
+				resolve(reader.result as string);
+			};
+			reader.readAsDataURL(file);
 		})
 	}
 
 	function removeFile(index: number) {
-		if (!files) return
+		if(!files) return;
 		files.splice(index, 1)
 		files = files.length ? files : undefined
 		dispatchChange()
@@ -58,25 +56,21 @@
 	async function dispatchChange() {
 		files = files
 
-		if (convertToBase64 && files) {
-			const promises = files.map(fileToBase64)
-			const b64s = await Promise.all(promises)
-			dispatch('change', b64s)
+		if(convertToBase64 && files) {
+			const promises = files.map(fileToBase64);
+			const b64s = await Promise.all(promises);
+			dispatch('change', b64s);
 		} else {
-			dispatch('change', files)
+			dispatch('change', files);
 		}
 	}
 </script>
 
 <button
-	class={twMerge(
-		`relative center-center flex-col text-center font-medium text-gray-600 
-		border-2 border-dashed border-gray-400 hover:border-blue-500 
-		focus-within:border-blue-500 hover:bg-blue-50 focus-within:bg-blue-50 
-		duration-200 rounded-lg p-1`,
-		c
-	)}
-	{style}
+	class="relative center-center flex-col text-center font-medium text-gray-600 
+	border-2 border-dashed border-gray-400 hover:border-blue-500 
+	focus-within:border-blue-500 hover:bg-blue-50 focus-within:bg-blue-50 
+	duration-200 rounded-lg p-1 {c ?? ''}"
 >
 	{#if !hideIcon && !files}
 		<FileUp size={iconSize} class="mb-2" />
@@ -89,11 +83,9 @@
 				</div>
 			</slot>
 			<ul class="relative z-20 max-w-[250px] bg-white rounded-lg overflow-hidden mx-auto">
-				{#each files as { name }, i}
-					<li
-						class="flex justify-between items-center font-normal text-sm
-					hover:bg-gray-300/20 duration-200 py-1 px-2 cursor-default"
-					>
+				{#each files as {name}, i}
+					<li class="flex justify-between items-center font-normal text-sm
+					hover:bg-gray-300/20 duration-200 py-1 px-2 cursor-default">
 						<span class="pr-2 ellipsize">{name}</span>
 						<Button
 							size="xs"
@@ -118,11 +110,9 @@
 		type="file"
 		title={files ? `${files.length} file${files.length > 1 ? 's' : ''} chosen` : 'No file chosen'}
 		bind:this={input}
-		on:change={({ currentTarget }) => {
-			onChange(currentTarget.files)
-		}}
+		on:change={({currentTarget}) => {onChange(currentTarget.files)}}
 		{accept}
 		{multiple}
 		{...$$restProps}
 	/>
-</button>
+</button>

frontend/src/lib/components/common/modal/Modal.svelte

@@ -1,15 +1,12 @@
 <script lang="ts">
+	import { classNames } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
 	import { fade } from 'svelte/transition'
 	import Button from '../button/Button.svelte'
 	import Badge from '../badge/Badge.svelte'
-	import { twMerge } from 'tailwind-merge'
 
 	export let title: string
 	export let open: boolean = false
-	let c: string = ''
-	export { c as class }
-	export let style = ''
 
 	const dispatch = createEventDispatcher()
 
@@ -43,7 +40,7 @@
 		role="dialog"
 	>
 		<div
-			class={twMerge(
+			class={classNames(
 				'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
 				open ? 'ease-out duration-300 opacity-100' : 'ease-in duration-200 opacity-0'
 			)}
@@ -52,14 +49,12 @@
 		<div class="fixed inset-0 z-10 overflow-y-auto">
 			<div class="flex min-h-full items-center justify-center p-4">
 				<div
-					class={twMerge(
+					class={classNames(
 						'relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
-						c,
 						open
 							? 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100'
 							: 'ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
 					)}
-					{style}
 				>
 					<div class="flex">
 						<div class="ml-4 text-left flex-1">

frontend/src/lib/components/common/tabs/Tab.svelte

@@ -1,15 +1,10 @@
 <script lang="ts">
+	import { classNames } from '$lib/utils'
 	import { getContext } from 'svelte'
-	import { twMerge } from 'tailwind-merge'
 	import type { TabsContext } from './Tabs.svelte'
 
 	export let value: string
 	export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm'
-	let c = ''
-	export { c as class }
-	export let style = ''
-	export let selectedClass = ''
-	export let selectedStyle = ''
 
 	const fontSizeClasses = {
 		xs: 'text-xs',
@@ -24,16 +19,14 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-	class={twMerge(
-		'border-b-2 py-1 px-4 cursor-pointer transition-all ease-linear font-medium',
+	class={classNames(
 		$selected?.startsWith(value)
 			? 'border-gray-600 text-gray-800 '
 			: 'border-gray-300 border-opacity-0 hover:border-opacity-100 text-gray-600',
+		'border-b-2 py-1 px-4 cursor-pointer transition-all ease-linear font-medium',
 		fontSizeClasses[size],
-		c,
-		$selected?.startsWith(value) ? selectedClass : ''
+		$$props.class
 	)}
-	style={`${style} ${$selected?.startsWith(value) ? selectedStyle : ''}`}
 	on:click={() => update(value)}
 >
 	<slot />

frontend/src/lib/components/common/tabs/Tabs.svelte

@@ -9,14 +9,11 @@
 	import { setContext } from 'svelte'
 	import { writable, type Writable } from 'svelte/store'
 	import { createEventDispatcher } from 'svelte'
-	import { twMerge } from 'tailwind-merge'
+	import { classNames } from '$lib/utils'
 
 	const dispatch = createEventDispatcher()
 
 	export let selected: string
-	let c = ''
-	export { c as class }
-	export let style = ''
 
 	$: selected && updateSelected()
 
@@ -39,8 +36,10 @@
 
 <div class="overflow-x-auto">
 	<div
-		class={twMerge('border-b border-gray-200 flex flex-row whitespace-nowrap  scrollbar-hidden', c)}
-		{style}
+		class={classNames(
+			'border-b border-gray-200 flex flex-row whitespace-nowrap  scrollbar-hidden',
+			$$props.class
+		)}
 	>
 		<slot {selected} />
 	</div>

frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte

@@ -27,7 +27,8 @@
 		parentModule.id,
 		$flowStore,
 		$previewArgs,
-		false
+		false,
+		true
 	)
 </script>
 
@@ -36,7 +37,6 @@
 	pickableProperties={stepPropPicker.pickableProperties}
 	on:select={({ detail }) => {
 		editor?.insertAtCursor(detail)
-		editor?.focus()
 	}}
 >
 	<div class="border border-gray-400">

frontend/src/lib/components/flows/content/FlowLoop.svelte

@@ -33,7 +33,8 @@
 		mod.id,
 		$flowStore,
 		$previewArgs,
-		false
+		false,
+		true
 	)
 </script>
 
@@ -59,7 +60,6 @@
 								pickableProperties={stepPropPicker.pickableProperties}
 								on:select={({ detail }) => {
 									editor?.insertAtCursor(detail)
-									editor?.focus()
 								}}
 							>
 								<SimpleEditor

frontend/src/lib/components/flows/content/FlowModuleComponent.svelte

@@ -12,12 +12,7 @@
 	import FlowCard from '../common/FlowCard.svelte'
 	import FlowModuleHeader from './FlowModuleHeader.svelte'
 	import { flowStateStore } from '../flowState'
-	import {
-		getLatestHashForScript,
-		getScriptByPath,
-		schemaToObject,
-		scriptLangToEditorLang
-	} from '$lib/utils'
+	import { schemaToObject, scriptLangToEditorLang } from '$lib/utils'
 	import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte'
 	import { afterUpdate, getContext } from 'svelte'
 	import type { FlowEditorContext } from '../types'
@@ -76,7 +71,8 @@
 				flowModule.id,
 				$flowStore,
 				$previewArgs,
-				false
+				false,
+				true
 		  )
 
 	function onKeyDown(event: KeyboardEvent) {
@@ -120,8 +116,6 @@
 
 	let isScript = true
 	$: isScript != (value.type === 'script') && (isScript = value.type === 'script')
-
-	let forceReload = 0
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -141,16 +135,6 @@
 						flowModule = module
 						$flowStateStore[module.id] = state
 					}}
-					on:reload={async () => {
-						if (flowModule.value.type == 'script') {
-							console.log('reload')
-							if (flowModule.value.hash != undefined) {
-								flowModule.value.hash = await getLatestHashForScript(flowModule.value.path)
-							}
-							forceReload++
-							await reload(flowModule)
-						}
-					}}
 					on:createScriptFromInlineScript={async () => {
 						const [module, state] = await createScriptFromInlineScript(
 							flowModule,
@@ -210,9 +194,7 @@
 								/>
 							</div>
 						{:else if value.type === 'script'}
-							{#key forceReload}
-								<FlowModuleScript path={value.path} hash={value.hash} />
-							{/key}
+							<FlowModuleScript path={value.path} hash={value.hash} />
 						{:else if value.type === 'flow'}
 							<FlowPathViewer path={value.path} />
 						{/if}

frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte

@@ -57,7 +57,6 @@
 					pickableProperties={undefined}
 					on:select={({ detail }) => {
 						editor?.insertAtCursor(detail)
-						editor?.focus()
 					}}
 				>
 					<SimpleEditor

frontend/src/lib/components/flows/content/FlowModuleHeader.svelte

@@ -1,15 +1,12 @@
 <script lang="ts">
 	import Button from '$lib/components/common/button/Button.svelte'
 	import type { FlowModule } from '$lib/gen'
-	import { faCodeBranch, faPen, faSave } from '@fortawesome/free-solid-svg-icons'
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { faCodeBranch, faSave } from '@fortawesome/free-solid-svg-icons'
+	import { createEventDispatcher } from 'svelte'
 	import { Bed, PhoneIncoming, Repeat, Square } from 'lucide-svelte'
 	import Popover from '../../Popover.svelte'
-	import type { FlowEditorContext } from '../types'
-	import { getLatestHashForScript, sendUserToast } from '$lib/utils'
 
 	export let module: FlowModule
-	const { scriptEditorDrawer } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	const dispatch = createEventDispatcher()
 
@@ -65,27 +62,6 @@
 	{/if}
 	{#if module.value.type === 'script'}
 		<div class="w-2" />
-		{#if !module.value.path.startsWith('hub/')}
-			<Button
-				size="xs"
-				color="light"
-				variant="border"
-				on:click={async () => {
-					if (module.value.type == 'script') {
-						const hash = module.value.hash ?? (await getLatestHashForScript(module.value.path))
-						$scriptEditorDrawer?.openDrawer(hash, () => {
-							dispatch('reload')
-							sendUserToast('Script has been updated')
-						})
-					}
-				}}
-				startIcon={{ icon: faPen }}
-				iconOnly={false}
-				disabled={module.value.hash != undefined}
-			>
-				Edit {#if module.value.hash != undefined} (locked hash){/if}
-			</Button>
-		{/if}
 		<Button
 			size="xs"
 			color="light"

frontend/src/lib/components/flows/content/FlowModuleSleep.svelte

@@ -64,7 +64,6 @@
 				pickableProperties={undefined}
 				on:select={({ detail }) => {
 					editor?.insertAtCursor(detail)
-					editor?.focus()
 				}}
 			>
 				<InputTransformForm

frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte

@@ -1,117 +0,0 @@
-<script lang="ts">
-	import { Button, Drawer, DrawerContent } from '$lib/components/common'
-	import ScriptEditor from '$lib/components/ScriptEditor.svelte'
-	import { ScriptService, type Preview } from '$lib/gen'
-	import { inferArgs } from '$lib/infer'
-	import { workspaceStore } from '$lib/stores'
-	import { emptySchema, getScriptByPath, sendUserToast } from '$lib/utils'
-	import { faSave } from '@fortawesome/free-solid-svg-icons'
-	import { Loader2 } from 'lucide-svelte'
-	import { createEventDispatcher } from 'svelte'
-	import { fade } from 'svelte/transition'
-
-	let scriptEditorDrawer: Drawer
-
-	const dispatch = createEventDispatcher()
-
-	export async function openDrawer(hash: string, cb: () => void): Promise<void> {
-		script = undefined
-		scriptEditorDrawer.openDrawer?.()
-		script = await ScriptService.getScriptByHash({
-			workspace: $workspaceStore!,
-			hash
-		})
-		callback = cb
-	}
-
-	let callback: (() => void) | undefined = undefined
-	let script:
-		| {
-				path: string
-				description: string
-				summary: string
-				hash: string
-				language: Preview.language
-				content: string
-				schema?: any
-				kind: 'script' | 'failure' | 'trigger' | 'command' | 'approval' | undefined
-		  }
-		| undefined = undefined
-
-	async function saveScript(): Promise<void> {
-		if (script) {
-			try {
-				script.schema = script.schema ?? emptySchema()
-				try {
-					await inferArgs(script.language, script.content, script.schema)
-				} catch (error) {
-					sendUserToast(
-						`Impossible to infer the schema. Assuming this is a script without main function`,
-						true
-					)
-				}
-
-				await ScriptService.createScript({
-					workspace: $workspaceStore!,
-					requestBody: {
-						path: script.path,
-						summary: script.summary,
-						description: script.description ?? '',
-						content: script.content,
-						parent_hash: script.hash != '' ? script.hash : undefined,
-						schema: script.schema,
-						is_template: false,
-						language: script.language,
-						kind: script.kind
-					}
-				})
-				callback?.()
-			} catch (error) {
-				sendUserToast(`Impossible to save the script: ${error.body}`, true)
-			}
-		}
-	}
-</script>
-
-<Drawer bind:this={scriptEditorDrawer} size="1200px">
-	<DrawerContent
-		title="Script Editor"
-		noPadding
-		forceOverflowVisible
-		on:close={() => {
-			scriptEditorDrawer.closeDrawer()
-		}}
-	>
-		{#if script}
-			{#key script.hash}
-				<ScriptEditor
-					noSyncFromGithub
-					lang={script.language}
-					path={script.path}
-					fixedOverflowWidgets={false}
-					bind:code={script.content}
-					bind:schema={script.schema}
-				/>
-			{/key}
-		{:else}
-			<div
-				out:fade={{ duration: 200 }}
-				class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
-			>
-				<Loader2 class="animate-spin" size={16} />
-				<span class="text-xs mt-1">Loading</span>
-			</div>
-		{/if}
-		<svelte:fragment slot="actions">
-			<Button
-				on:click={async () => {
-					await saveScript()
-					dispatch('save')
-					scriptEditorDrawer.closeDrawer()
-				}}
-				disabled={!script}
-				startIcon={{ icon: faSave }}>Save</Button
-			>
-		</svelte:fragment>
-	</DrawerContent>
-</Drawer>

frontend/src/lib/components/flows/pickers/WorkspaceScriptPicker.svelte

@@ -85,7 +85,7 @@
 			</div>
 		{/if}
 		{#if displayLock}
-			<div class="flex flex-row-reverse mb-1">
+			<div class="flex flex-row-reverse">
 				<Toggle
 					bind:checked={lockHash}
 					options={{ left: 'Latest version', right: 'Lock current hash permanently' }}

frontend/src/lib/components/flows/previousResults.ts

@@ -103,6 +103,7 @@ export function getStepPropPicker(
 	flow: Flow,
 	args: any,
 	include_node: boolean,
+	approvers: boolean = false
 ): StepPropPicker {
 	const flowInput = getFlowInput(dfs(parentModule?.id, flow), flowState, args, flow.schema)
 

frontend/src/lib/components/flows/types.ts

@@ -1,5 +1,4 @@
 import type { Writable } from 'svelte/store'
-import type ScriptEditorDrawer from './content/ScriptEditorDrawer.svelte'
 import type { Schedule } from './scheduleUtils'
 
 export type FlowEditorContext = {
@@ -7,5 +6,4 @@ export type FlowEditorContext = {
 	select: (id: string) => void
 	schedule: Writable<Schedule>,
 	previewArgs: Writable<Record<string, any>>,
-	scriptEditorDrawer: Writable<ScriptEditorDrawer | undefined>
 }

frontend/src/lib/components/flows/utils.ts

@@ -73,7 +73,7 @@ export async function loadSchemaFromModule(module: FlowModule): Promise<{
 			schema = emptySchema()
 			await inferArgs(mod.language!, mod.content ?? '', schema)
 		} else if (mod.type == 'script' && mod.path && mod.path != '') {
-			schema = await loadSchema(mod.path!, mod.hash)
+			schema = await loadSchema(mod.path!)
 		} else if (mod.type == 'flow' && mod.path && mod.path != '') {
 			schema = await loadSchemaFlow(mod.path!)
 		} else {

frontend/src/lib/components/graph/model.ts

@@ -51,7 +51,6 @@ export type GraphItem = Node | Loop | Branch
 
 export type GraphModuleState = {
 	type: FlowStatusModule.type
-	args: any
 	logs?: string
 	result?: any
 	scheduled_for?: string

frontend/src/lib/components/home/ListFilters.svelte

@@ -13,17 +13,11 @@
 	function getIconComponent(name: string) {
 		return APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]]
 	}
-
-	$: filtersAndSelected = selectedFilter
-		? filters.includes(selectedFilter)
-			? filters
-			: [selectedFilter, ...filters]
-		: filters
 </script>
 
-{#if Array.isArray(filtersAndSelected) && filtersAndSelected.length > 0}
+{#if Array.isArray(filters) && filters.length > 0}
 	<div class="gap-2 w-full flex flex-wrap my-4">
-		{#each filtersAndSelected as filter (filter)}
+		{#each filters as filter (filter)}
 			<div in:fade={{ duration: 50 }} animate:flip={{ duration: 100 }}>
 				<Badge
 					class={classNames(

frontend/src/lib/defaults.ts

@@ -1,5 +0,0 @@
-export const SELECT_INPUT_DEFAULT_STYLE = {
-	inputStyles: 'border-radius: 0;',
-	containerStyles:
-		'--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem; --border: 1px solid #d1d5db;'
-} as const