From 2a572d2c970ded2fe2cc7f94378a607eb9d62f81 Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Sun, 27 Apr 2025 17:08:08 +0200
Subject: [PATCH] feat: Allow custom applet in output storage configurator

---
 deno.lock                                     |   1 +
 package-lock.json                             | 421 +++++++++++++++++-
 package.json                                  |   1 +
 .../configurator/storage/output/applet.astro  | 249 +++++++++--
 src/applets/orchestrator/storage/applet.astro |   1 +
 src/layouts/applet.astro                      |   1 +
 src/pages/index.astro                         |   5 +-
 src/scripts/theme.ts                          |   2 +-
 src/styles/configurator.css                   |   2 -
 9 files changed, 637 insertions(+), 46 deletions(-)

diff --git a/deno.lock b/deno.lock
index cad3f8e..510b553 100644
--- a/deno.lock
+++ b/deno.lock
@@ -27,6 +27,7 @@
         "npm:iconoir@^7.11.0",
         "npm:idb-keyval@^6.2.1",
         "npm:native-file-system-adapter@^3.0.1",
+        "npm:sass@^1.87.0",
         "npm:throttle-debounce@^5.0.2",
         "npm:xxh32@^2.0.5"
       ]
diff --git a/package-lock.json b/package-lock.json
index d99341f..4ad95fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
         "iconoir": "^7.11.0",
         "idb-keyval": "^6.2.1",
         "native-file-system-adapter": "^3.0.1",
+        "sass": "^1.87.0",
         "spellcaster": "icidasset/spellcaster#fix/hyper-data",
         "throttle-debounce": "^5.0.2",
         "xxh32": "^2.0.5"
@@ -941,6 +942,300 @@
       "integrity": "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==",
       "dev": true
     },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher/node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/@picocss/pico": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/@picocss/pico/-/pico-2.1.1.tgz",
@@ -1688,6 +1983,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "optional": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/brotli": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz",
@@ -1765,7 +2072,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
       "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
       "dependencies": {
         "readdirp": "^4.0.1"
       },
@@ -2208,6 +2514,18 @@
         "node": "^12.20 || >= 14.13"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "optional": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/flattie": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/flattie/-/flattie-1.1.1.tgz",
@@ -2506,6 +2824,11 @@
       "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.1.tgz",
       "integrity": "sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg=="
     },
+    "node_modules/immutable": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.1.tgz",
+      "integrity": "sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg=="
+    },
     "node_modules/import-meta-resolve": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz",
@@ -2547,6 +2870,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -2556,6 +2888,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "optional": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-inside-container": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
@@ -2574,6 +2918,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-plain-obj": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
@@ -3462,6 +3815,31 @@
         }
       ]
     },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "optional": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "optional": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/mrmime": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@@ -3538,6 +3916,12 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "optional": true
+    },
     "node_modules/node-domexception": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
@@ -3816,7 +4200,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
       "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
       "engines": {
         "node": ">= 14.18.0"
       },
@@ -4097,6 +4480,25 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/sass": {
+      "version": "1.87.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.87.0.tgz",
+      "integrity": "sha512-d0NoFH4v6SjEK7BoX810Jsrhj7IQSYHAHLi/iSpgqKc7LaIDshFRlSg5LOymf9FqQhxEHs2W5ZQXlvy0KD45Uw==",
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
     "node_modules/semver": {
       "version": "7.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
@@ -4202,7 +4604,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4219,7 +4620,7 @@
     },
     "node_modules/spellcaster": {
       "version": "5.0.2",
-      "resolved": "git+ssh://git@github.com/icidasset/spellcaster.git#85038476a872463bb8ef4687418cecb1dd4807f1",
+      "resolved": "git+ssh://git@github.com/icidasset/spellcaster.git#630230c0950518a39047ea6ef34530b9d64c0c7f",
       "dependencies": {
         "signal-polyfill": "^0.2.0"
       }
@@ -4306,6 +4707,18 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "optional": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
diff --git a/package.json b/package.json
index 1340a5b..d8878ac 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
     "iconoir": "^7.11.0",
     "idb-keyval": "^6.2.1",
     "native-file-system-adapter": "^3.0.1",
+    "sass": "^1.87.0",
     "spellcaster": "icidasset/spellcaster#fix/hyper-data",
     "throttle-debounce": "^5.0.2",
     "xxh32": "^2.0.5"
diff --git a/src/applets/configurator/storage/output/applet.astro b/src/applets/configurator/storage/output/applet.astro
index 52387cd..1f8636c 100644
--- a/src/applets/configurator/storage/output/applet.astro
+++ b/src/applets/configurator/storage/output/applet.astro
@@ -8,14 +8,35 @@
     Click or tap on one to activate it.
   </p>
   <div id="options">
-    <span class="with-icon">
-      <i class="iconoir-bonfire"></i>
-      <small>Just a moment, loading storage options.</small>
-    </span>
+    <p>
+      <span class="with-icon">
+        <i class="iconoir-bonfire"></i>
+        <small>Just a moment, loading storage options.</small>
+      </span>
+    </p>
   </div>
+  <!-- Warning about cross sync -->
+  <p>
+    <small>
+      <mark style="display: inline-block">
+        <span class="with-icon">
+          <i class="iconoir-warning-triangle"></i>
+          Data is currently not synced across different storages!
+        </span>
+      </mark>
+    </small>
+  </p>
   <div id="iframes"></div>
 </main>
 
+<style lang="scss">
+  @use "@picocss/pico/scss/pico" with (
+    $enable-responsive-spacings: true
+  );
+
+  @use "@picocss/pico/scss/colors/utilities";
+</style>
+
 <style>
   @import "../../../../styles/configurator.css";
 
@@ -26,7 +47,7 @@
   .with-icon {
     align-items: center;
     display: inline-flex;
-    gap: 10px;
+    gap: 0.75em;
   }
 
   [data-storage] {
@@ -37,15 +58,14 @@
 <script>
   // @ts-ignore
   import scope from "astro:scope";
-  import * as IDB from "idb-keyval";
   import { type Signal, computed, effect, signal } from "spellcaster/spellcaster.js";
-  import { repeat, text } from "spellcaster/hyperscript.js";
+  import { type ElementConfigurator, repeat, text } from "spellcaster/hyperscript.js";
   import { applets } from "@web-applets/sdk";
 
   import { applet, hs } from "../../../../scripts/theme";
   import { OutputGetter, OutputSetter } from "../../../core/types";
 
-  const METHODS = ["browser", "device"] as const;
+  const METHODS = ["browser", "custom", "device"] as const;
 
   type Method = (typeof METHODS)[number];
   type List<M extends Method = Method> = Map<string, ListItem<M>>;
@@ -53,15 +73,26 @@
 
   const DEFAULT_METHOD: Method = "browser";
   const LOCALSTORAGE_KEY = "applets/configurator/storage/output/active-storage";
+  const CUSTOM_KEY = "applets/configurator/storage/output/custom-applet";
+
+  const h = (
+    tag: string,
+    props?: Record<string, any> | Signal<Record<string, any>>,
+    configure?: ElementConfigurator,
+  ) => hs(tag, scope, props, configure);
 
   ////////////////////////////////////////////
   // SETUP
   ////////////////////////////////////////////
   const context = applets.register();
+
   const container = document.getElementById("iframes");
   if (!container) throw new Error("Missing iframe container");
 
   // TODO: Should migrate + merge data when switching storages
+  //       Or button to do that?
+  //
+  // TODO: Pressing ESC button should hide dialog/modal?
 
   // Applet connections
   const storage = {
@@ -89,9 +120,14 @@
     switch (method) {
       case "browser":
         await storage.output.indexedDB.sendAction("mount");
+        setActive(method);
+        break;
+      case "custom":
+        setModalIsOpen(true);
         break;
       case "device":
         await storage.output.nativeFs.sendAction("mount");
+        setActive(method);
         break;
     }
   }
@@ -101,6 +137,11 @@
       case "browser":
         await storage.output.indexedDB.sendAction("unmount");
         break;
+      case "custom":
+        const applet = await connectToCustomApplet();
+        await applet.sendAction("unmount");
+        localStorage.removeItem(CUSTOM_KEY);
+        break;
       case "device":
         await storage.output.nativeFs.sendAction("unmount");
         break;
@@ -108,7 +149,7 @@
   }
 
   ////////////////////////////////////////////
-  // UI
+  // UI / LIST
   ////////////////////////////////////////////
   const list = computed<List>(() => {
     const a = active();
@@ -132,57 +173,181 @@
           activated: a === "device",
         },
       ],
+      [
+        `custom-${a === "custom"}`,
+        {
+          title: "Custom applet",
+          icon: "iconoir-globe",
+          method: "custom",
+          activated: a === "custom",
+        },
+      ],
     ]);
   });
 
   const Item = (signal: Signal<ListItem<Method>>) => {
     const item = signal();
 
-    return hs(
+    const colorClass = item.activated ? "pico-color-jade-500" : "pico-color-grey-500";
+    const icon = item.activated ? "iconoir-check-circle-solid" : "iconoir-check-circle";
+
+    return h(
       "p",
-      scope,
       {
         onclick: clickHandler(item.method),
         style: "cursor: pointer",
       },
       [
-        hs("span", scope, { className: "with-icon" }, [
-          hs("i", scope, { className: item.icon }),
-          hs("strong", scope, {}, text(item.title)),
+        h("span", { className: "with-icon" }, [
+          h("i", { className: item.icon }),
+          h("strong", {}, text(item.title)),
+        ]),
+        h("br"),
+        h("span", { className: `with-icon ${colorClass}` }, [
+          h("i", { className: icon }),
+          h("span", {}, text(item.activated ? "Active" : "Select")),
         ]),
-        hs("br", scope),
-        hs(
-          "span",
-          scope,
-          {
-            className:
-              "with-icon " + (item.activated ? "pico-color-jade-500" : "pico-color-grey-500"),
-          },
-          [
-            hs("i", scope, {
-              className: item.activated ? "iconoir-check-circle-solid" : "iconoir-xmark-circle",
-            }),
-            hs("span", scope, {}, text(item.activated ? "Activated" : "Deactivated")),
-          ],
-        ),
       ],
     );
   };
 
-  const Options = computed(() => hs("div", scope, { id: "options" }, repeat(list, Item)));
-  document.getElementById("options")?.replaceWith(Options());
-
   function clickHandler(method: Method) {
     return async () => {
       const currentlyActive = active();
-      if (currentlyActive === method) return;
+      if (currentlyActive === method && currentlyActive !== "custom") return;
       if (currentlyActive) unmountStorageMethod(currentlyActive);
-
       await mountStorageMethod(method);
-      setActive(method);
     };
   }
 
+  const Options = computed(() => {
+    return h("div", { id: "options" }, repeat(list, Item));
+  });
+
+  // Add to DOM
+  document.getElementById("options")?.replaceWith(Options());
+
+  ////////////////////////////////////////////
+  // UI / CUSTOM APPLET
+  ////////////////////////////////////////////
+  type CustomAppletState = "waiting" | "connecting" | { error: string } | "connected";
+
+  const [modalIsOpen, setModalIsOpen] = signal(false);
+  const [customState, setCustomState] = signal<CustomAppletState>("waiting");
+
+  const Modal = () => {
+    const Header = h("header", {}, [
+      h("button", {
+        ariaLabel: "Close",
+        rel: "prev",
+        onclick: close,
+      }),
+      h("p", {}, [
+        h("strong", {}, [
+          h("span", { className: "with-icon" }, [
+            h("i", { className: "iconoir-globe" }),
+            h("span", {}, text("Load a custom applet")),
+          ]),
+        ]),
+      ]),
+    ]);
+
+    const Content = h("form", { onsubmit: submit }, [
+      h("fieldset", { role: "group" }, [
+        h("input", {
+          type: "url",
+          name: "url",
+          placeholder: "https://applets.diffuse.sh/storage/output/indexed-db/",
+          required: true,
+          value: localStorage.getItem(CUSTOM_KEY) || "",
+        }),
+        h("input", { type: "submit", value: "Connect" }),
+      ]),
+      h("p", {}, [
+        h("small", { className: "with-icon" }, (element) => {
+          const comp = computed(() => {
+            const s = customState();
+
+            if (s === "connecting") {
+              return [
+                h("i", { className: "iconoir-ev-plug-charging" }),
+                h("span", {}, text("Connecting ...")),
+              ];
+            } else if (typeof s !== "string") {
+              return [
+                h("i", { className: "iconoir-warning-circle" }),
+                h("span", {}, text(`Error: ${s.error}`)),
+              ];
+            }
+
+            return [h("span", {}, text("Enter the URL to your applet."))];
+          });
+
+          effect(() => {
+            element.replaceChildren(...comp());
+          });
+        }),
+      ]),
+    ]);
+
+    return h(
+      "dialog",
+      computed(() => ({ open: modalIsOpen() })),
+      [h("article", {}, [Header, Content])],
+    );
+  };
+
+  // Events
+  function close() {
+    setModalIsOpen(false);
+  }
+
+  async function submit(event: SubmitEvent) {
+    event.preventDefault();
+
+    const input: HTMLInputElement | null = (event.target as HTMLFormElement).querySelector(
+      `input[type="url"]`,
+    );
+
+    if (!input) return;
+
+    const url = input.value;
+    setCustomState("connecting");
+
+    const apl = await applet(url, { container }).catch((err) => {
+      setCustomState({ error: "Failed to connect" });
+      throw err;
+    });
+
+    let missingAction;
+
+    ["get", "put", "mount", "unmount"].forEach((method) => {
+      if (!apl.manifest.actions[method]) missingAction = method;
+    });
+
+    if (missingAction) {
+      setCustomState({ error: `Applet is missing a required action: "${missingAction}"` });
+      return;
+    }
+
+    localStorage.setItem(CUSTOM_KEY, url);
+    await apl.sendAction("mount");
+
+    setActive("custom");
+    setModalIsOpen(false);
+    setCustomState("waiting");
+  }
+
+  // 🛠️
+  async function connectToCustomApplet() {
+    const url = localStorage.getItem(CUSTOM_KEY);
+    if (!url) throw new Error("Missing custom applet URL");
+    return await applet(url, { container });
+  }
+
+  // Add to DOM
+  document.querySelector("main")?.appendChild(Modal());
+
   ////////////////////////////////////////////
   // ACTIONS
   ////////////////////////////////////////////
@@ -191,13 +356,19 @@
 
     switch (active()) {
       case "browser": {
-        // TODO
+        // TODO: Ideally promise returns data
         await storage.output.indexedDB.sendAction("get", args);
         data = storage.output.indexedDB.data as Uint8Array | undefined;
         break;
       }
+      case "custom":
+        // TODO: Ideally promise returns data
+        const a = await connectToCustomApplet();
+        await a.sendAction("get", args);
+        data = a.data as Uint8Array | undefined;
+        break;
       case "device": {
-        // TODO
+        // TODO: Ideally promise returns data
         await storage.output.nativeFs.sendAction("get", args);
         data = storage.output.nativeFs.data as Uint8Array | undefined;
         break;
@@ -218,6 +389,10 @@
       case "browser":
         await storage.output.indexedDB.sendAction("put", args);
         break;
+      case "custom":
+        const a = await connectToCustomApplet();
+        await a.sendAction("put", args);
+        break;
       case "device":
         await storage.output.nativeFs.sendAction("put", args);
         break;
diff --git a/src/applets/orchestrator/storage/applet.astro b/src/applets/orchestrator/storage/applet.astro
index 6041a6b..e44fbe9 100644
--- a/src/applets/orchestrator/storage/applet.astro
+++ b/src/applets/orchestrator/storage/applet.astro
@@ -1,3 +1,4 @@
+<!-- TODO: Button to export all user/output data. --><!-- TODO: Button to import data? -->
 <script>
   import { applets } from "@web-applets/sdk";
 
diff --git a/src/layouts/applet.astro b/src/layouts/applet.astro
index 51584c1..fa315fa 100644
--- a/src/layouts/applet.astro
+++ b/src/layouts/applet.astro
@@ -6,6 +6,7 @@ const { title } = Astro.props;
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
     <link rel="manifest" href="manifest.json" />
 
     <title>{title}</title>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e3116c3..34dcc0d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -126,7 +126,8 @@ const themes = [{ url: "themes/pilot/", title: "Pilot" }];
       <p>
         <em
           >These applets interact with the bytes provided by the data storage applets, or provide
-          to. This processed data can then be passed on to the UI layer and engine applets.</em
+          to. This processed data can then be passed on to, for example, the UI layer and engine
+          applets.</em
         >
       </p>
 
@@ -145,7 +146,7 @@ const themes = [{ url: "themes/pilot/", title: "Pilot" }];
       <p>
         <em
           >Input and output managers of the system. Where input is audio files or streams, and
-          output is derived data such as a music playlist.</em
+          output is derived data such as a music playlist and your processed input (tracks).</em
         >
       </p>
 
diff --git a/src/scripts/theme.ts b/src/scripts/theme.ts
index 28944c4..ab0d90b 100644
--- a/src/scripts/theme.ts
+++ b/src/scripts/theme.ts
@@ -1,7 +1,7 @@
 import type { Applet, AppletEvent } from "@web-applets/sdk";
 
 import { applets } from "@web-applets/sdk";
-import { ElementConfigurator, h } from "spellcaster/hyperscript.js";
+import { type ElementConfigurator, h } from "spellcaster/hyperscript.js";
 import { effect, isSignal, sample, Signal, signal } from "spellcaster/spellcaster.js";
 import { xxh32 } from "xxh32";
 
diff --git a/src/styles/configurator.css b/src/styles/configurator.css
index e557fe3..ed3ca73 100644
--- a/src/styles/configurator.css
+++ b/src/styles/configurator.css
@@ -1,3 +1 @@
-@import "@picocss/pico/css/pico.css";
-@import "@picocss/pico/css/pico.colors.css";
 @import "./icons.css";
-- 
2.51.2