🪴 Adds webserial lidar support

.github/workflows/deploy.yml

@@ -1,66 +0,0 @@
-name: Deploy GitHub Pages
-
-on:
-  push:
-    branches: [main]
-  workflow_dispatch:
-
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-concurrency:
-  group: "pages"
-  cancel-in-progress: true
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: ./app
-    env:
-      BASE_PATH: /SpotMicroESP32-Leika
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 9
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: "pnpm"
-          cache-dependency-path: "./app/pnpm-lock.yaml"
-
-      - name: Install Protoc
-        uses: arduino/setup-protoc@v3
-        with:
-          version: "27.x"
-
-      - run: pnpm install
-      - run: pnpm run build
-
-      - name: Setup Pages
-        uses: actions/configure-pages@v4
-        with:
-          static_site_generator: "sveltekit"
-
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: app/build/
-
-  deploy:
-    runs-on: ubuntu-latest
-    needs: build
-    environment:
-      name: github-pages
-
-    steps:
-      - name: Deploy
-        id: deployment
-        uses: actions/deploy-pages@v4

.github/workflows/embedded-build.yml

@@ -2,24 +2,23 @@ name: PlatformIO CI
 
 on:
   push:
-    branches: [master]
+    branches: [ master ]
     paths:
-      - "esp32/**"
+        - 'esp32/**'  
-      - "platformio.ini"
   pull_request:
-    branches: [master]
+    branches: [ master ]
     paths:
-      - "esp32/**"
+        - 'esp32/**'  
-      - "platformio.ini"
 
 jobs:
   build:
     runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./esp32
 
     steps:
       - uses: actions/checkout@v3
-        with:
-          submodules: "recursive"
       - uses: actions/cache@v3
         with:
           path: |
@@ -29,22 +28,16 @@ jobs:
 
       - uses: actions/setup-python@v4
         with:
-          python-version: "3.x"
+          python-version: '3.x'
-      - run: pip install -r esp32/scripts/requirements.txt
+      - run: pip install -r ./scripts/requirements.txt
       - name: Install PlatformIO Core
         run: pip install --upgrade platformio
 
-      - name: Install Python dependencies for nanopb
-        run: pip install protobuf grpcio-tools
-
-      - name: Build Protocol Buffers (nanopb)
-        run: python ./submodules/nanopb/generator/nanopb_generator.py -I "./platform_shared/" -D esp32/src/platform_shared ./platform_shared/message.proto
-
       - name: Build PlatformIO Project
         run: pio run
 
       - name: Upload Artifacts
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v3
         with:
           name: build-artifacts
           path: esp32/build/firmware

.github/workflows/frontend-tests.yml

@@ -2,14 +2,14 @@ name: Frontend Tests
 
 on:
   push:
-    branches: [master]
+    branches: [ master ]
     paths:
-      - "app/**"
+        - 'app/**'  
   pull_request:
-    branches: [master]
+    branches: [ master ]
     paths:
-      - "app/**"
+        - 'app/**'  
-
+    
 permissions:
   contents: read
 
@@ -20,31 +20,22 @@ jobs:
       run:
         working-directory: ./app
     steps:
-      - uses: actions/checkout@v4
+    - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+    - uses: pnpm/action-setup@v2
-        with:
+      with:
-          version: 9
+        version: 8
 
-      - name: Setup Node.js
+    - name: Setup Node.js
-        uses: actions/setup-node@v4
+      uses: actions/setup-node@v4
-        with:
+      with:
-          node-version: "latest"
+        node-version: 'latest'
-          cache: "pnpm"
+        cache: 'pnpm'
-          cache-dependency-path: "./app/pnpm-lock.yaml"
+        cache-dependency-path: './app/pnpm-lock.yaml'
 
-      - name: Install Protoc
+    - name: Install dependencies
-        uses: arduino/setup-protoc@v3
+      run: pnpm install
-        with:
+    - name: Install Playwright Browsers
-          version: "27.x"
+      run: npx playwright install --with-deps
 
-      - name: Install dependencies
+    - name: Run tests
-        run: pnpm install
+      run: pnpm test
-
-      - name: Generate Proto
-        run: pnpm proto
-
-      - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
-
-      - name: Run tests
-        run: pnpm test

.github/workflows/proto-build.yml

@@ -1,59 +0,0 @@
-name: Proto Build
-
-on:
-  push:
-    branches: [master, protobuf-playground]
-  pull_request:
-    branches: [master, protobuf-playground]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: ./
-    env:
-      BASE_PATH: /SpotMicroESP32-Leika
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          submodules: "recursive"
-
-      - name: Setup Python
-        uses: actions/setup-python@v4
-        with:
-          python-version: "3.x"
-
-      - name: Install Python dependencies
-        run: pip install protobuf grpcio-tools
-
-      - name: Build Protocol Buffers (nanopb)
-        run: python ./submodules/nanopb/generator/nanopb_generator.py -I "./platform_shared/" -D esp32/src/platform_shared ./platform_shared/message.proto
-
-      - name: Setup Protocol Buffers compiler
-        uses: arduino/setup-protoc@v3
-        with:
-          version: "25.x"
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: 9
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: "pnpm"
-          cache-dependency-path: "./app/pnpm-lock.yaml"
-
-      - name: Install dependencies
-        run: pnpm install
-        working-directory: ./app
-
-      - name: Build Protocol Buffers (Typescript)
-        run: pnpm proto
-        working-directory: ./app

.gitignore

@@ -1,17 +1,4 @@
 .vscode/.browse.c_cpp.db*
 .vscode/c_cpp_properties.json
 .vscode/launch.json
-.vscode/ipch
+.vscode/ipch
-__pycache__/
-*.py[cod]
-*$py.class
-.pio
-managed_components/
-dependencies.lock
-sdkconfig
-sdkconfig.*
-!sdkconfig.defaults
-esp32/src/platform_shared/*
-!esp32/src/platform_shared/.gitkeep
-app/src/lib/platform_shared/*
-!app/src/lib/platform_shared/.gitkeep

.gitmodules

@@ -1,4 +0,0 @@
-[submodule "submodules/nanopb"]
-	path = submodules/nanopb
-	url = https://github.com/nanopb/nanopb
-	branch = master

.vscode/extensions.json

@@ -2,10 +2,10 @@
     // See http://go.microsoft.com/fwlink/?LinkId=827846
     // for the documentation about the extensions.json format
     "recommendations": [
-        "bradlc.vscode-tailwindcss",
+      "platformio.platformio-ide",
-        "esbenp.prettier-vscode",
+      "svelte.svelte-vscode",
-        "platformio.platformio-ide",
+      "bradlc.vscode-tailwindcss",
-        "svelte.svelte-vscode"
+      "esbenp.prettier-vscode"
     ],
     "unwantedRecommendations": [
         "ms-vscode.cpptools-extension-pack"

CMakeLists.txt

@@ -1,3 +0,0 @@
-cmake_minimum_required(VERSION 3.16.0)
-include($ENV{IDF_PATH}/tools/cmake/project.cmake)
-project(Spot_Micro_Leika)

app/.env

@@ -1 +0,0 @@
-PUBLIC_VITE_USE_HOST_NAME=true

app/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

app/.eslintrc.cjs

@@ -0,0 +1,31 @@
+/** @type { import("eslint").Linter.Config } */
+module.exports = {
+	root: true,
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended',
+		'prettier'
+	],
+	parser: '@typescript-eslint/parser',
+	plugins: ['@typescript-eslint'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	]
+};

app/.gitignore

@@ -3,6 +3,7 @@ node_modules
 /build
 /.svelte-kit
 /package
+.env
 .env.*
 !.env.example
 vite.config.js.timestamp-*

app/.prettierrc

@@ -1,12 +1,8 @@
 {
-    "useTabs": false,
+	"useTabs": true,
-    "singleQuote": true,
+	"singleQuote": true,
-    "tabWidth": 4,
+	"trailingComma": "none",
-    "trailingComma": "none",
+	"printWidth": 100,
-    "arrowParens": "avoid",
+	"plugins": ["prettier-plugin-svelte"],
-    "experimentalTernaries": true,
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
-    "printWidth": 100,
-    "semi": false,
-    "plugins": ["prettier-plugin-svelte"],
-    "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

app/.vscode/extensions.json

@@ -1,7 +1,3 @@
 {
-    "recommendations": [
+	"recommendations": ["svelte.svelte-vscode", "bradlc.vscode-tailwindcss", "esbenp.prettier-vscode"]
-        "svelte.svelte-vscode",
-        "bradlc.vscode-tailwindcss",
-        "esbenp.prettier-vscode"
-    ]
 }

app/README.md

@@ -8,21 +8,30 @@ If you're seeing this, you've probably already done this step. Congrats!
 
 ```bash
 # create a new project in the current directory
-npx sv create
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
 ```
 
 ## Developing
 
-Once you've created your project, follow these steps:
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
-1: Delete package-lock.json
+```bash
-2: Check `git status`. If you see any changes other than package-lock.json or favicon.ico, run the command `git restore ./` (See below)
+npm run dev
-3: Run `npm install` or `pnpm install` or `yarn` to install the dependencies
-4: Run `npm run build` to build the project
 
-Running `git status` should show:
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
 
-[![example.png](https://i.postimg.cc/yddM3hH3/example.png)](https://postimg.cc/7CFsp2bq)
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
 
 You can preview the production build with `npm run preview`.
 

app/env.d.ts

@@ -1,8 +0,0 @@
-declare module "app-env" {
-  interface ENV {
-    VITE_USE_HOST_NAME: boolean;
-  }
-
-  const appEnv: ENV;
-  export default appEnv;
-}

app/eslint.config.js

@@ -1,44 +0,0 @@
-import js from '@eslint/js'
-import ts from 'typescript-eslint'
-import svelte from 'eslint-plugin-svelte'
-import prettier from 'eslint-config-prettier'
-import globals from 'globals'
-
-export default ts.config(
-    js.configs.recommended,
-    ...ts.configs.recommended,
-    ...svelte.configs['flat/recommended'],
-    prettier,
-    ...svelte.configs['flat/prettier'],
-    {
-        languageOptions: {
-            globals: {
-                ...globals.browser,
-                ...globals.node
-            }
-        }
-    },
-    {
-        files: ['**/*.svelte'],
-        languageOptions: {
-            parserOptions: {
-                parser: ts.parser
-            }
-        }
-    },
-    {
-        ignores: [
-            '.DS_Store',
-            'node_modules/',
-            'build/',
-            '.svelte-kit/',
-            'package/',
-            '.env',
-            '.env.*',
-            '!.env.example',
-            'pnpm-lock.yaml',
-            'package-lock.json',
-            'yarn.lock'
-        ]
-    }
-)

app/package.json

@@ -1,73 +1,61 @@
 {
-    "name": "spot_micro_controller",
+	"name": "spot_micro_controller",
-    "version": "0.0.1",
+	"version": "0.0.1",
-    "private": true,
+	"private": true,
-    "scripts": {
+	"scripts": {
-        "dev": "vite dev --host",
+		"dev": "vite dev --host",
-        "build": "pnpm proto && vite build",
+		"build": "vite build",
-        "build:embedded": "cross-env VITE_USE_HOST_NAME=true vite build",
+		"preview": "vite preview",
-        "preview": "vite preview",
+		"test": "npm run test:integration && npm run test:unit",
-        "test": "pnpm run test:integration && pnpm run test:unit",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
-        "lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
-        "format": "prettier --write .",
+		"test:integration": "playwright test",
-        "test:integration": "playwright test",
+		"test:unit": "vitest"
-        "test:unit": "vitest",
+	},
-        "proto": "node scripts/compile_protos.js"
+	"devDependencies": {
-    },
+		"@iconify-json/mdi": "^1.1.64",
-    "devDependencies": {
+		"@iconify-json/tabler": "^1.1.109",
-        "@eslint/js": "^9.39.2",
+		"@playwright/test": "^1.28.1",
-        "@iconify-json/mdi": "^1.2.3",
+		"@sveltejs/adapter-auto": "^3.0.0",
-        "@iconify-json/tabler": "^1.2.23",
+		"@sveltejs/adapter-static": "^3.0.1",
-        "@playwright/test": "^1.56.0",
+		"@sveltejs/kit": "^2.5.5",
-        "@sveltejs/adapter-static": "^3.0.10",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-        "@sveltejs/kit": "^2.46.4",
+		"@types/eslint": "^8.56.0",
-        "@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@types/three": "^0.162.0",
-        "@types/eslint": "^9.6.1",
+		"@typescript-eslint/eslint-plugin": "^7.0.0",
-        "@types/three": "^0.180.0",
+		"@typescript-eslint/parser": "^7.0.0",
-        "@types/ws": "^8.18.1",
+		"autoprefixer": "^10.4.19",
-        "@typescript-eslint/eslint-plugin": "^8.46.0",
+		"eslint": "^8.56.0",
-        "@typescript-eslint/parser": "^8.46.0",
+		"eslint-config-prettier": "^9.1.0",
-        "autoprefixer": "^10.4.21",
+		"eslint-plugin-svelte": "^2.35.1",
-        "eslint": "^9.37.0",
+		"jsdom": "^24.0.0",
-        "eslint-config-prettier": "^10.1.8",
+		"postcss": "^8.4.38",
-        "eslint-plugin-svelte": "^3.12.4",
+		"prettier": "^3.1.1",
-        "globals": "^17.0.0",
+		"prettier-plugin-svelte": "^3.1.2",
-        "jsdom": "^27.0.0",
+		"svelte": "^4.2.7",
-        "prettier": "^3.6.2",
+		"svelte-check": "^3.6.0",
-        "prettier-plugin-svelte": "^3.4.0",
+		"svelte-focus-trap": "^1.2.0",
-        "svelte": "^5.39.11",
+		"tailwindcss": "^3.4.3",
-        "svelte-check": "^4.3.3",
+		"tslib": "^2.6.1",
-        "svelte-focus-trap": "^1.2.0",
+		"typescript": "^5.1.6",
-        "tailwindcss": "^4.1.14",
+		"unplugin-icons": "^0.18.5",
-        "ts-proto-descriptors": "^2.1.0",
+		"vite": "^5.0.3",
-        "tslib": "^2.8.1",
+		"vitest": "^1.2.0"
-        "typescript": "^5.9.3",
+	},
-        "typescript-eslint": "^8.51.0",
+	"type": "module",
-        "unplugin-icons": "^22.4.2",
+	"dependencies": {
-        "vite": "^7.1.9",
+		"chart.js": "^4.4.2",
-        "vitest": "^3.2.4",
+		"compare-versions": "^6.1.0",
-        "ws": "^8.18.3"
+		"daisyui": "^4.10.2",
-    },
+		"jwt-decode": "^4.0.0",
-    "type": "module",
+		"nipplejs": "^0.10.1",
-    "dependencies": {
+		"svelte-dnd-list": "^0.1.8",
-        "@bufbuild/protobuf": "^2.10.2",
+		"svelte-modals": "^1.3.0",
-        "@niku/vite-env-caster": "^1.1.2",
+		"three": "^0.162.0",
-        "@sveltejs/adapter-auto": "^6.1.1",
+		"urdf-loader": "^0.12.1",
-        "@tailwindcss/vite": "^4.1.14",
+		"uzip": "^0.20201231.0",
-        "chart.js": "^4.5.0",
+		"xacro-parser": "^0.3.9"
-        "compare-versions": "^6.1.1",
+	}
-        "cross-env": "^10.1.0",
+}
-        "daisyui": "^5.2.0",
-        "nipplejs": "^0.10.2",
-        "svelte-dnd-list": "^0.1.8",
-        "svelte-modals": "^2.0.1",
-        "three": "^0.180.0",
-        "ts-proto": "^2.10.1",
-        "urdf-loader": "^0.12.6",
-        "uzip": "^0.20201231.0",
-        "xacro-parser": "^0.3.10"
-    },
-    "packageManager": "pnpm@9.3.0"
-}

app/playwright.config.ts

@@ -1,12 +1,12 @@
-import type { PlaywrightTestConfig } from '@playwright/test'
+import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
-    webServer: {
+	webServer: {
-        command: 'pnpm run build && pnpm run preview',
+		command: 'pnpm run build && pnpm run preview',
-        port: 4173
+		port: 4173
-    },
+	},
-    testDir: 'tests/integration',
+	testDir: 'tests/integration',
-    testMatch: /(.+\.)?(test|spec)\.[jt]s/
+	testMatch: /(.+\.)?(test|spec)\.[jt]s/
-}
+};
 
-export default config
+export default config;

app/postcss.config.js

@@ -0,0 +1,5 @@
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+export default {
+	plugins: [tailwindcss(), autoprefixer()]
+};

app/scripts/compile_protos.js

@@ -1,43 +0,0 @@
-#!/usr/bin/env node
-import { execSync } from 'child_process'
-import path from 'path'
-import os from 'os'
-import { fileURLToPath } from 'url'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-
-const isWindows = os.platform() === 'win32'
-const projectRoot = path.resolve(__dirname, '..')
-const platformSharedDir = path.resolve(projectRoot, '..', 'platform_shared')
-const outputDir = path.resolve(projectRoot, 'src', 'lib', 'platform_shared')
-
-const pluginPath =
-    isWindows ?
-        path.join(projectRoot, 'node_modules', '.bin', 'protoc-gen-ts_proto.cmd')
-    :   path.join(projectRoot, 'node_modules', '.bin', 'protoc-gen-ts_proto')
-
-const protoFiles = ['filesystem.proto', 'message.proto', "api.proto"]
-
-const tsProtoOpts = ['useExactTypes=false', 'outputExtensions=true', 'outputSchema=true'].join(',')
-
-const cmd = [
-    'protoc',
-    `--plugin=protoc-gen-ts_proto=${pluginPath}`,
-    `--ts_proto_out=${outputDir}`,
-    `--ts_proto_opt=${tsProtoOpts}`,
-    `-I${platformSharedDir}`,
-    ...protoFiles.map(f => path.join(platformSharedDir, f))
-].join(' ')
-
-console.log('Compiling protos...')
-console.log(`  Platform: ${os.platform()}`)
-console.log(`  Output: ${outputDir}`)
-
-try {
-    execSync(cmd, { stdio: 'inherit', cwd: projectRoot })
-    console.log('Proto compilation complete!')
-} catch (error) {
-    console.error('Proto compilation failed!', error)
-    process.exit(1)
-}

app/src/app.css

@@ -1,39 +1,9 @@
-@import 'tailwindcss';
+@tailwind base;
-@plugin "daisyui";
+@tailwind components;
+@tailwind utilities;
 
-@plugin "daisyui" {
+#nipple_0_0, #nipple_1_1 {
-    themes:
+    z-index: 10!important;
-        light --default,
-        dark --prefersdark;
-}
-
-@plugin "daisyui/theme" {
-    name: 'light';
-    default: true;
-    --color-primary: #00bfff;
-    --color-secondary: #3c00ff;
-    --base-content: white;
-}
-
-@plugin "daisyui/theme" {
-    name: 'dark';
-    prefersdark: true;
-    --color-primary: #00bfff;
-    --color-secondary: #3c00ff;
-    --base-content: oklch(0.3 0.012 256);
-}
-
-button {
-    cursor: pointer;
-}
-
-button:disabled {
-    cursor: not-allowed;
-}
-
-#nipple_0_0,
-#nipple_1_1 {
-    z-index: 10 !important;
 }
 
 #three-gui-panel {
@@ -45,4 +15,4 @@ button:disabled {
     #three-gui-panel {
         top: 48px;
     }
-}
+}

app/src/app.d.ts

@@ -1,13 +1,13 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
-    namespace App {
+	namespace App {
-        // interface Error {}
+		// interface Error {}
-        // interface Locals {}
+		// interface Locals {}
-        // interface PageData {}
+		// interface PageData {}
-        // interface PageState {}
+		// interface PageState {}
-        // interface Platform {}
+		// interface Platform {}
-    }
+	}
 }
 
-export {}
+export {};

app/src/app.html

@@ -1,17 +1,12 @@
 <!doctype html>
 <html lang="en">
-    <head>
+	<head>
-        <meta charset="utf-8" />
+		<meta charset="utf-8" />
-        <link rel="icon" href="%sveltekit.assets%/logo512.png" />
+		<link rel="icon" href="%sveltekit.assets%/logo512.png" />
-        <meta
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
-            name="viewport"
+		%sveltekit.head%
-            content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
+	</head>
-        />
+	<body data-sveltekit-preload-data="hover">
-        <meta name="apple-mobile-web-app-capable" content="yes" />
+		<div style="display: contents">%sveltekit.body%</div>
-        <meta name="mobile-web-app-capable" content="yes" />
+	</body>
-        %sveltekit.head%
-    </head>
-    <body data-sveltekit-preload-data="hover">
-        <div style="display: contents">%sveltekit.body%</div>
-    </body>
 </html>

app/src/index.test.ts

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('sum test', () => {
+	it('adds 1 + 2 to equal 3', () => {
+		expect(1 + 2).toBe(3);
+	});
+});

app/src/lib/DaisyUiHelper.ts

@@ -0,0 +1,4 @@
+export function daisyColor(name: string, opacity: number = 100) {
+	const color = getComputedStyle(document.documentElement).getPropertyValue(name);
+	return `oklch(${color} / ${opacity}%)`;
+}

app/src/lib/api.ts

@@ -1,93 +1,73 @@
-import { get } from 'svelte/store'
+import { user } from '$lib/stores/user';
-import { Err, Ok, type Result } from './utilities'
+import { get } from 'svelte/store';
-import { apiLocation } from './stores/location-store'
+import { Err, Ok, type Result } from './utilities';
-import type { MessageFns } from './platform_shared/filesystem'
-import { Request, Response as ProtoResponse } from './platform_shared/api'
-import { BinaryWriter } from '@bufbuild/protobuf/wire'
 
-export const api = {
+export namespace api {
-    get<TResponse>(endpoint: string, params?: RequestInit) {
+	export function get<TResponse>(endpoint: string, params?: RequestInit) {
-        return sendRequest<TResponse>(endpoint, 'GET', null, params)
+		return sendRequest<TResponse>(endpoint, 'GET', null, params);
-    },
+	}
 
-    post<TResponse>(endpoint: string, data?: unknown) {
+	export function post<TResponse>(endpoint: string, data?: unknown) {
-        return sendRequest<TResponse>(endpoint, 'POST', data)
+		return sendRequest<TResponse>(endpoint, 'POST', data);
-    },
+	}
 
-    post_proto<TResponse>(endpoint: string, data: Request) {
+	export function put<TResponse>(endpoint: string, data?: unknown) {
-        return sendRequest<TResponse>(endpoint, 'POST', Request.encode(data))
+		return sendRequest<TResponse>(endpoint, 'PUT', data);
-    },
+	}
 
-    put<TResponse>(endpoint: string, data?: unknown) {
+	export function remove<TResponse>(endpoint: string) {
-        return sendRequest<TResponse>(endpoint, 'PUT', data)
+		return sendRequest<TResponse>(endpoint, 'DELETE');
-    },
+	}
-
-    remove<TResponse>(endpoint: string) {
-        return sendRequest<TResponse>(endpoint, 'DELETE')
-    }
 }
 
 async function sendRequest<TResponse>(
-    endpoint: string,
+	endpoint: string,
-    method: string,
+	method: string,
-    data?: unknown,
+	data?: unknown,
-    params?: RequestInit
+	params?: RequestInit
 ): Promise<Result<TResponse, Error>> {
-    endpoint = resolveUrl(endpoint)
+	const user_token = get(user).bearer_token;
+	const body = data !== null && typeof data !== 'undefined' ? JSON.stringify(data) : undefined;
 
-    const isProtobuf = data instanceof BinaryWriter
+	const request = {
-    const body = data !== null && typeof data !== 'undefined'
+		...params,
-        ? (isProtobuf ? data.finish() : JSON.stringify(data))
+		method,
-        : undefined
+		body,
+		headers: {
+			...params?.headers,
+			Authorization: user_token ? 'Bearer ' + user_token : 'Basic',
+			'Content-Type': 'application/json'
+		}
+	};
 
-    const request = {
+	let response;
-        ...params,
-        method,
-        body,
-        headers: {
-            ...params?.headers,
-            Authorization: 'Basic',
-            'Content-Type': isProtobuf ? 'application/x-protobuf' : 'application/json'
-        }
-    }
 
-    let response
+	try {
+		response = await fetch(endpoint, request);
+	} catch (error) {
+		return Err.new(new Error(), 'An error has occurred');
+	}
 
-    try {
+	const isResponseOk = response.status >= 200 && response.status < 400;
-        response = await fetch(endpoint, request)
+	if (!isResponseOk) {
-    } catch {
+		if (response.status === 401) {
-        return Err.new(new Error(), 'An error has occurred')
+			return Err.new(new ApiError(response), 'User was not authorized');
-    }
+		}
+		return Err.new(new ApiError(response), 'An error has occurred');
+	}
 
-    const isResponseOk = response.status >= 200 && response.status < 400
+	const contentType = response.headers.get('Content-Type') ?? response.headers.get('Content-Type');
-    if (!isResponseOk) {
+	if (contentType && contentType.includes('application/json')) {
-        if (response.status === 401) {
+		const data = await response.json();
-            return Err.new(new ApiError(response), 'User was not authorized')
+		return Ok.new(data as TResponse);
-        }
+	} else {
-        return Err.new(new ApiError(response), 'An error has occurred')
+		// Handle empty object as response
-    }
+		return Ok.new(null as TResponse);
-
+	}
-    const contentType = response.headers.get('Content-Type') ?? response.headers.get('Content-Type')
-    if (contentType && contentType.includes('application/json')) {
-        const data = await response.json()
-        return Ok.new(data as TResponse)
-    } else if (contentType && contentType.includes('application/x-protobuf')) {
-        let data: ProtoResponse = ProtoResponse.decode(await response.bytes());
-        return Ok.new(data as TResponse)
-    } else {
-        // Handle empty object as response
-        return Ok.new(null as TResponse)
-    }
-}
-
-function resolveUrl(url: string): string {
-    if (url.startsWith('http') || !get(apiLocation)) return url
-    const protocol = window.location.protocol
-    return `${protocol}//${get(apiLocation)}${url.startsWith('/') ? '' : '/'}${url}`
 }
 
 export class ApiError extends Error {
-    constructor(public readonly response: Response) {
+	constructor(public readonly response: Response) {
-        super(`${response.status}`)
+		super(`${response.status}`);
-    }
+	}
 }

app/src/lib/components/BatteryIndicator.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import Battery0 from '~icons/tabler/battery';
+	import Battery25 from '~icons/tabler/battery-1';
+	import Battery50 from '~icons/tabler/battery-2';
+	import Battery75 from '~icons/tabler/battery-3';
+	import Battery100 from '~icons/tabler/battery-4';
+	import BatteryCharging from '~icons/tabler/battery-charging-2';
+
+	export let current = 0;
+	export let voltage = 0;
+</script>
+
+<div class="tooltip tooltip-left z-10" data-tip="{voltage}V {Math.floor(current*10)/10} mA">
+	{#if voltage == 0}
+		<BatteryCharging class="{$$props.class || ''} -rotate-90 animate-pulse" />
+	{:else if voltage > 8.2}
+		<Battery100 class="{$$props.class || ''} -rotate-90" />
+	{:else if voltage > 8}
+		<Battery75 class="{$$props.class || ''} -rotate-90" />
+	{:else if voltage > 7.8}
+		<Battery50 class="{$$props.class || ''} -rotate-90" />
+	{:else if voltage > 7.6}
+		<Battery25 class="{$$props.class || ''} -rotate-90" />
+	{:else}
+		<Battery0 class="{$$props.class || ''} text-error -rotate-90 animate-pulse" />
+	{/if}
+</div>

app/src/lib/components/Collapsible.svelte

@@ -1,44 +1,43 @@
 <script lang="ts">
-    import { slide } from 'svelte/transition'
+	import { slide } from 'svelte/transition';
-    import { cubicOut } from 'svelte/easing'
+	import { cubicOut } from 'svelte/easing';
-    import { Down } from './icons'
+	import Down from '~icons/tabler/chevron-down';
+	import { createEventDispatcher } from 'svelte';
 
-    function openCollapsible() {
+	const dispatch = createEventDispatcher();
-        open = !open
-        if (open) {
-            opened()
-        } else {
-            closed()
-        }
-    }
 
-    let { icon, title, children, open, opened, closed, class: klass } = $props()
+	function openCollapsible() {
+		open = !open;
+		if (open) {
+			dispatch('opened');
+		} else {
+			dispatch('closed');
+		}
+	}
+
+	export let open = false;
 </script>
 
-<div class="{klass} relative grid w-full max-w-2xl self-center overflow-hidden">
+<div class="{$$props.class || ''} relative grid w-full max-w-2xl self-center overflow-hidden">
-    <div
+	<div class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium">
-        class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"
+		<span class="inline-flex items-baseline">
-    >
+			<slot name="icon" />
-        <span class="inline-flex items-baseline">
+			<slot name="title" />
-            {@render icon?.()}
+		</span>
-            {@render title?.()}
+		<button class="btn btn-circle btn-ghost btn-sm" on:click={() => openCollapsible()}>
-        </span>
+			<Down
-        <button class="btn btn-circle btn-ghost btn-sm" onclick={() => openCollapsible()}>
+				class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {open
-            <Down
+					? 'rotate-180'
-                class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {(
+					: ''}"
-                    open
+			/>
-                ) ?
+		</button>
-                    'rotate-180'
+	</div>
-                :   ''}"
+	{#if open}
-            />
+		<div
-        </button>
+			class="flex flex-col gap-2 p-4 pt-0"
-    </div>
+			transition:slide|local={{ duration: 300, easing: cubicOut }}
-    {#if open}
+		>
-        <div
+			<slot />
-            class="flex flex-col gap-2 p-4 pt-0"
+		</div>
-            transition:slide|local={{ duration: 300, easing: cubicOut }}
+	{/if}
-        >
-            {@render children?.()}
-        </div>
-    {/if}
 </div>

app/src/lib/components/Compass.svelte

@@ -1,81 +0,0 @@
-<script lang="ts">
-    interface Props {
-        heading?: number
-        size?: string
-    }
-
-    let { heading = 0, size = 'w-48 h-48' }: Props = $props()
-
-    const getCardinalDirection = (h: number) => {
-        if (h >= 337.5 || h < 22.5) return 'N'
-        if (h >= 22.5 && h < 67.5) return 'NE'
-        if (h >= 67.5 && h < 112.5) return 'E'
-        if (h >= 112.5 && h < 157.5) return 'SE'
-        if (h >= 157.5 && h < 202.5) return 'S'
-        if (h >= 202.5 && h < 247.5) return 'SW'
-        if (h >= 247.5 && h < 292.5) return 'W'
-        return 'NW'
-    }
-
-    const ticks = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330]
-</script>
-
-<div class="flex flex-col items-center">
-    <div class="relative {size}">
-        <svg viewBox="0 0 200 200" class="w-full h-full">
-            <circle
-                cx="100"
-                cy="100"
-                r="90"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                class="opacity-30"
-            />
-            <circle
-                cx="100"
-                cy="100"
-                r="70"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1"
-                class="opacity-20"
-            />
-            <circle
-                cx="100"
-                cy="100"
-                r="50"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1"
-                class="opacity-20"
-            />
-
-            <text x="100" y="20" text-anchor="middle" class="fill-current text-sm font-bold">N</text>
-            <text x="180" y="105" text-anchor="middle" class="fill-current text-sm font-bold">E</text>
-            <text x="100" y="190" text-anchor="middle" class="fill-current text-sm font-bold">S</text>
-            <text x="20" y="105" text-anchor="middle" class="fill-current text-sm font-bold">W</text>
-
-            {#each ticks as tick}
-                <line
-                    x1={100 + 85 * Math.sin((tick * Math.PI) / 180)}
-                    y1={100 - 85 * Math.cos((tick * Math.PI) / 180)}
-                    x2={100 + 78 * Math.sin((tick * Math.PI) / 180)}
-                    y2={100 - 78 * Math.cos((tick * Math.PI) / 180)}
-                    stroke="currentColor"
-                    stroke-width={tick % 90 === 0 ? 2 : 1}
-                    class="opacity-50"
-                />
-            {/each}
-
-            <g transform="rotate({heading}, 100, 100)">
-                <polygon points="100,25 93,100 100,90 107,100" class="fill-error" />
-                <polygon points="100,175 93,100 100,110 107,100" class="fill-base-300" />
-            </g>
-
-            <circle cx="100" cy="100" r="8" class="fill-base-content" />
-        </svg>
-    </div>
-    <div class="text-2xl font-mono font-bold mt-2">{heading.toFixed(1)}°</div>
-    <div class="text-sm opacity-70">{getCardinalDirection(heading)}</div>
-</div>

app/src/lib/components/ConfirmDialog.svelte

@@ -1,48 +1,52 @@
 <script lang="ts">
-    import { focusTrap } from 'svelte-focus-trap'
+	import { closeModal } from 'svelte-modals';
-    import { fly } from 'svelte/transition'
+	import { focusTrap } from 'svelte-focus-trap';
-    import { Cancel, Check } from '$lib/components/icons'
+	import { fly } from 'svelte/transition';
-    import { modals, exitBeforeEnter, type ModalProps } from 'svelte-modals'
+	import Cancel from '~icons/tabler/x';
+	import Check from '~icons/tabler/check';
 
-    let {
+	// provided by <Modals />
-        isOpen,
+	export let isOpen: boolean;
-        title,
+
-        message,
+	export let title: string;
-        onConfirm,
+	export let message: string;
-        labels = {
+	export let onConfirm: any;
-            cancel: { label: 'Cancel', icon: Cancel },
+	export let labels = {
-            confirm: { label: 'OK', icon: Check }
+		cancel: { label: 'Cancel', icon: Cancel },
-        }
+		confirm: { label: 'OK', icon: Check }
-    }: ModalProps = $props()
+	};
 </script>
 
 {#if isOpen}
-    {@const SvelteComponent = labels?.confirm.icon}
+	<div
-    <div
+		role="dialog"
-        role="dialog"
+		class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
-        class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
+		transition:fly={{ y: 50 }}
-        transition:fly={{ y: 50 }}
+		on:introstart
-        use:exitBeforeEnter
+		on:outroend
         use:focusTrap
-    >
+	>
-        <div
+		<div
-            class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
+			class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
-        >
+		>
-            <h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
+			<h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
-            <div class="divider my-2"></div>
+			<div class="divider my-2" />
-            <p class="text-base-content mb-1 text-start">{message}</p>
+			<p class="text-base-content mb-1 text-start">{message}</p>
-            <div class="divider my-2"></div>
+			<div class="divider my-2" />
-            <div class="flex justify-end gap-2">
+			<div class="flex justify-end gap-2">
-                <button
+				<button class="btn btn-primary inline-flex items-center" on:click={closeModal}
-                    class="btn btn-error inline-flex items-center"
+					><svelte:component this={labels.cancel.icon} class="mr-2 h-5 w-5" /><span
-                    onclick={() => modals.close()}
+						>{labels?.cancel.label}</span
-                >
+					></button
-                    <labels.cancel.icon class="mr-2 h-5 w-5" /><span>{labels?.cancel.label}</span>
+				>
-                </button>
+				<button
-                <button class="btn btn-primary inline-flex items-center" onclick={onConfirm}>
+					class="btn btn-warning text-warning-content inline-flex items-center"
-                    <SvelteComponent class="mr-2 h-5 w-5" /><span>{labels?.confirm.label}</span>
+					on:click={onConfirm}
-                </button>
+					><svelte:component this={labels?.confirm.icon} class="mr-2 h-5 w-5" /><span
-            </div>
+						>{labels?.confirm.label}</span
-        </div>
+					></button
-    </div>
+				>
+			</div>
+		</div>
+	</div>
 {/if}

app/src/lib/components/GithubUpdateDialog.svelte

@@ -1,101 +1,92 @@
 <script lang="ts">
-    import { focusTrap } from 'svelte-focus-trap'
+	import { closeAllModals, onBeforeClose } from 'svelte-modals';
-    import { fly } from 'svelte/transition'
+	import { focusTrap } from 'svelte-focus-trap';
-    import { telemetry } from '$lib/stores/telemetry'
+	import { fly } from 'svelte/transition';
-    import { Cancel } from './icons'
+	import { telemetry } from '$lib/stores/telemetry';
-    import { modals, exitBeforeEnter, onBeforeClose } from 'svelte-modals'
+	import Cancel from '~icons/tabler/x';
 
-    // provided by <Modals />
+	// provided by <Modals />
-    interface Props {
+	export let isOpen: boolean;
-        isOpen: boolean
-    }
 
-    let { isOpen }: Props = $props()
+	let updating = true;
 
-    let updating = $state(true)
+	let progress = 0;
+	$: if ($telemetry.download_ota.status == 'progress') {
+		progress = $telemetry.download_ota.progress;
+	}
 
-    let progress = $state(0)
+	$: if ($telemetry.download_ota.status == 'error') {
-    $effect(() => {
+		updating = false;
-        if ($telemetry.download_ota.status == 'progress') {
+	}
-            progress = $telemetry.download_ota.progress
-        }
-    })
 
-    $effect(() => {
+	let message = 'Preparing ...';
-        if ($telemetry.download_ota.status == 'error') {
+	let timerId: number;
-            updating = false
-        }
-    })
 
-    let message = $state('Preparing ...')
+	$: if ($telemetry.download_ota.status == 'progress') {
+		message = 'Downloading ...';
+	} else if ($telemetry.download_ota.status == 'error') {
+		message = $telemetry.download_ota.error;
+	} else if ($telemetry.download_ota.status == 'finished') {
+		message = 'Restarting ...';
+		progress = 0;
+		// Reload page after 5 sec
+		timerId = setTimeout(() => {
+			closeAllModals();
+			location.reload();
+		}, 5000);
+	}
 
-    $effect(() => {
+	onBeforeClose(() => {
-        if ($telemetry.download_ota.status == 'progress') {
+		if (updating) {
-            message = 'Downloading ...'
+			// prevents modal from closing
-        } else if ($telemetry.download_ota.status == 'error') {
+			return false;
-            message = $telemetry.download_ota.error
+		} else {
-        } else if ($telemetry.download_ota.status == 'finished') {
+			$telemetry.download_ota.status = 'idle';
-            message = 'Restarting ...'
+			$telemetry.download_ota.error = '';
-            progress = 0
+			$telemetry.download_ota.progress = 0;
-            // Reload page after 5 sec
+			return true;
-            setTimeout(() => {
+		}
-                modals.closeAll()
+	});
-                location.reload()
-            }, 5000)
-        }
-    })
-
-    onBeforeClose(() => {
-        if (updating) {
-            // prevents modal from closing
-            return false
-        } else {
-            $telemetry.download_ota.status = 'idle'
-            $telemetry.download_ota.error = ''
-            $telemetry.download_ota.progress = 0
-            return true
-        }
-    })
 </script>
 
 {#if isOpen}
-    <div
+	<div
-        role="dialog"
+		role="dialog"
-        class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
+		class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
-        transition:fly={{ y: 50 }}
+		transition:fly={{ y: 50 }}
-        use:exitBeforeEnter
+		on:introstart
-        use:focusTrap
+		on:outroend
-    >
+		use:focusTrap
-        <div
+	>
-            class="bg-base-100 rounded-box pointer-events-auto flex max-h-full min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
+		<div
-        >
+			class="bg-base-100 rounded-box pointer-events-auto flex max-h-full min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
-            <h2 class="text-base-content text-start text-2xl font-bold">Updating Firmware</h2>
+		>
-            <div class="divider my-2"></div>
+			<h2 class="text-base-content text-start text-2xl font-bold">Updating Firmware</h2>
-            <div class="overflow-y-auto">
+			<div class="divider my-2" />
-                <div class="bg-base-100 flex flex-col items-center justify-center p-6">
+			<div class="overflow-y-auto">
-                    {#if $telemetry.download_ota.status == 'progress'}
+				<div class="bg-base-100 flex flex-col items-center justify-center p-6">
-                        <progress class="progress progress-primary w-56" value={progress} max="100"
+					{#if $telemetry.download_ota.status == 'progress'}
-                        ></progress>
+						<progress class="progress progress-primary w-56" value={progress} max="100" />
-                    {:else}
+					{:else}
-                        <progress class="progress progress-primary w-56"></progress>
+						<progress class="progress progress-primary w-56" />
-                    {/if}
+					{/if}
-                    <p class="mt-8 text-2xl">{message}</p>
+					<p class="mt-8 text-2xl">{message}</p>
-                </div>
+				</div>
-            </div>
+			</div>
-            <div class="divider my-2"></div>
+			<div class="divider my-2" />
-            <div class="flex flex-wrap justify-end gap-2">
+			<div class="flex flex-wrap justify-end gap-2">
-                <div class="grow"></div>
+				<div class="flex-grow" />
-                <button
+				<button
-                    class="btn btn-warning text-warning-content inline-flex flex-none items-center"
+					class="btn btn-warning text-warning-content inline-flex flex-none items-center"
-                    disabled={updating}
+					disabled={updating}
-                    onclick={() => {
+					on:click={() => {
-                        modals.closeAll()
+						closeAllModals();
-                        location.reload()
+						location.reload();
-                    }}
+					}}
-                >
+				>
-                    <Cancel class="mr-2 h-5 w-5" /><span>Close</span></button
+					<Cancel class="mr-2 h-5 w-5" /><span>Close</span></button
-                >
+				>
-            </div>
+			</div>
-        </div>
+		</div>
-    </div>
+	</div>
 {/if}

app/src/lib/components/InfoDialog.svelte

@@ -1,43 +1,42 @@
 <script lang="ts">
-    import { focusTrap } from 'svelte-focus-trap'
+	import { closeModal } from 'svelte-modals';
-    import { fly } from 'svelte/transition'
+	import { focusTrap } from 'svelte-focus-trap';
-    import { Check } from './icons'
+	import { fly } from 'svelte/transition';
-    import { exitBeforeEnter, type ModalProps } from 'svelte-modals'
+	import Check from '~icons/tabler/check';
 
-    let {
+	// provided by <Modals />
-        isOpen,
+	export let isOpen: boolean;
-        title,
+
-        message,
+	export let title: string;
-        onDismiss,
+	export let message: string;
-        labels = {
+	export let onDismiss: any;
-            dismiss: { label: 'Dismiss', icon: Check }
+	export let dismiss = { label: 'Dismiss', icon: Check };
-        }
-    }: ModalProps = $props()
 </script>
 
 {#if isOpen}
-    <div
+	<div
-        role="dialog"
+		role="dialog"
-        class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
+		class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
-        transition:fly={{ y: 50 }}
+		transition:fly={{ y: 50 }}
-        use:exitBeforeEnter
+		on:introstart
-        use:focusTrap
+		on:outroend
-    >
+		use:focusTrap
-        <div
+	>
-            class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
+		<div
-        >
+			class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
-            <h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
+		>
-            <div class="divider my-2"></div>
+			<h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
-            <p class="text-base-content mb-1 text-start">{message}</p>
+			<div class="divider my-2" />
-            <div class="divider my-2"></div>
+			<p class="text-base-content mb-1 text-start">{message}</p>
-            <div class="flex justify-end gap-2">
+			<div class="divider my-2" />
-                <button
+			<div class="flex justify-end gap-2">
-                    class="btn btn-warning text-warning-content inline-flex items-center"
+				<button
-                    onclick={onDismiss}
+					class="btn btn-warning text-warning-content inline-flex items-center"
-                >
+					on:click={onDismiss}
-                    <labels.dismiss.icon class="mr-2 h-5 w-5" /><span>{labels.dismiss.label}</span>
+					><svelte:component this={dismiss.icon} class="mr-2 h-5 w-5" /><span>{dismiss.label}</span
-                </button>
+					></button
-            </div>
+				>
-        </div>
+			</div>
-    </div>
+		</div>
+	</div>
 {/if}

app/src/lib/components/InputPassword.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	let show = false;
+	$: type = show ? 'text' : 'password';
+
+	export let value = '';
+	export let id = '';
+	function handleInput(e: any) {
+		value = e.target.value;
+	}
+</script>
+
+<div class="relative">
+	<input {type} class="input input-bordered w-full" {value} on:input={handleInput} {id} />
+	<div class="absolute inset-y-0 right-0 flex items-center pr-1">
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="text-base-content/50 h-6 {show ? 'block' : 'hidden'}"
+			on:click={() => (show = false)}
+			width="40"
+			height="40"
+			viewBox="0 0 24 24"
+			stroke-width="2"
+			stroke="currentColor"
+			fill="none"
+            role="button"
+            tabindex="0"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+			<path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
+			<path
+				d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"
+			/>
+			<path d="M3 3l18 18" />
+		</svg>
+
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="text-base-content/50 h-6 {show ? 'hidden' : 'block'}"
+			on:click={() => (show = true)}
+			width="40"
+			height="40"
+			viewBox="0 0 24 24"
+			stroke-width="2"
+			stroke="currentColor"
+			fill="none"
+            role="button"
+            tabindex="0"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+			<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+			<path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
+		</svg>
+	</div>
+</div>

app/src/lib/components/Lidar.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+    import { lidar, type LidarPoint } from '$lib/stores/lidar'
+
+    function getIntersection(angle:number, size:number):number {
+            const sinAngle = Math.sin(angle);
+            const cosAngle = Math.cos(angle);
+
+            let x, y;
+            if (Math.abs(cosAngle) > Math.abs(sinAngle)) {
+                x = size * Math.sign(cosAngle);
+                y = x * sinAngle / cosAngle;
+            } else {
+                y = size * Math.sign(sinAngle);
+                x = y * cosAngle / sinAngle;
+            }
+
+            return Math.sqrt(x**2 + y**2);
+        }
+
+
+    let canvas:HTMLCanvasElement
+    let ctx
+
+    const DEG2RAD = 0.017453292519943;
+
+    onMount(() => {
+        ctx = canvas.getContext("2d")
+        resize()      
+        lidar.subscribe(lidar => {
+            draw(lidar.points)
+        })
+    })
+
+    const draw = (points:LidarPoint[]) => {
+        if(!points) return
+        const centerX = canvas.width / 2
+        const centerY = canvas.height / 2
+        
+        const scale = 0.01//Math.max(centerX, centerY) / Math.max(...points.map((point) => point.distance))
+
+        if (!ctx) return
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        for (let i = 0; i < points.length; i++){
+            const angle = points[i].angle
+            const distance = points[i].distance
+            const quality = points[i].quality
+
+            const endX = centerX + (distance * scale) * Math.cos(angle * DEG2RAD);
+            const endY = centerY - (distance * scale) * Math.sin(angle * DEG2RAD);
+
+            ctx.beginPath();
+            ctx.moveTo(centerX, centerY);
+            ctx.lineTo(endX, endY);
+            ctx.strokeStyle = "grey"
+            ctx.stroke();
+
+            ctx.beginPath();
+            ctx.arc(endX, endY, 3, 0, Math.PI * 2);
+            ctx.fillStyle = "#1bfc06"
+            ctx.fill();
+        }
+    }
+
+    const resize = () => {
+        const parentElement = canvas.parentElement;
+		if (parentElement) {
+			canvas.width = parentElement.clientWidth
+            canvas.height = parentElement.clientHeight
+		}
+    }
+
+</script>
+
+<svelte:window on:resize={resize}></svelte:window>
+
+<canvas bind:this={canvas} class="w-full h-full"></canvas>

app/src/lib/components/OrientationIndicator.svelte

@@ -1,78 +0,0 @@
-<script lang="ts">
-    import { onMount, onDestroy } from 'svelte'
-    import * as THREE from 'three'
-    import { imu } from '$lib/stores/imu'
-    import SceneBuilder from '$lib/sceneBuilder'
-
-    let canvas: HTMLCanvasElement
-    let sceneBuilder: SceneBuilder
-    let cube: THREE.Mesh
-    let targetRotation = new THREE.Euler()
-    let lastUpdateTime = 0
-    const LERP_SPEED = 5 // rotations per second
-
-    const initThreeJS = () => {
-        sceneBuilder = new SceneBuilder()
-            .addRenderer({ canvas: canvas, antialias: true, alpha: true })
-            .addPerspectiveCamera({ x: 2, y: 0, z: 2 })
-            .addOrbitControls(1, 10, false)
-            .addAmbientLight({ color: 0x404040, intensity: 0.5 })
-            .addDirectionalLight({ color: 0xffffff, intensity: 3, x: 10, y: 20, z: 7 })
-            .fillParent()
-
-        const geometry = new THREE.BoxGeometry(1, 1, 1)
-        const material = new THREE.MeshPhongMaterial({
-            color: 0x00ff00,
-            transparent: true,
-            opacity: 0.8
-        })
-        cube = new THREE.Mesh(geometry, material)
-        sceneBuilder.scene.add(cube)
-
-        sceneBuilder.addRenderCb(() => {
-            if (!cube) return
-            const currentTime = performance.now()
-            const deltaTime = (currentTime - lastUpdateTime) / 1000 // convert to seconds
-            lastUpdateTime = currentTime
-
-            const lerpFactor = Math.min(1, LERP_SPEED * deltaTime)
-            cube.rotation.x = THREE.MathUtils.lerp(cube.rotation.x, targetRotation.x, lerpFactor)
-            cube.rotation.y = THREE.MathUtils.lerp(cube.rotation.y, targetRotation.y, lerpFactor)
-            cube.rotation.z = THREE.MathUtils.lerp(cube.rotation.z, targetRotation.z, lerpFactor)
-        })
-
-        sceneBuilder.startRenderLoop()
-    }
-
-    const updateOrientation = () => {
-        if (!cube) return
-
-        const y = -$imu.x[$imu.x.length - 1] || 0
-        const x = $imu.y[$imu.y.length - 1] || 0
-        const z = -$imu.z[$imu.z.length - 1] || 0
-
-        targetRotation.set(
-            THREE.MathUtils.degToRad(x),
-            THREE.MathUtils.degToRad(y),
-            THREE.MathUtils.degToRad(z)
-        )
-    }
-
-    onMount(() => {
-        initThreeJS()
-    })
-
-    onDestroy(() => {
-        sceneBuilder?.renderer?.dispose()
-    })
-
-    $effect(() => {
-        if ($imu) {
-            updateOrientation()
-        }
-    })
-</script>
-
-<div class="h-60 w-60 border-2 border-base-300 rounded-md">
-    <canvas class="w-full h-full" bind:this={canvas}></canvas>
-</div>

app/src/lib/components/RSSIIndicator.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import WiFi from '~icons/tabler/wifi';
+	import WiFi0 from '~icons/tabler/wifi-0';
+	import WiFi1 from '~icons/tabler/wifi-1';
+	import WiFi2 from '~icons/tabler/wifi-2';
+    import WifiOff from '~icons/tabler/wifi-off';
+
+	export let showDBm = true;
+	export let rssi_dbm = 0;
+</script>
+
+<div class="indicator">
+	<div class="tooltip tooltip-left" data-tip={rssi_dbm + " dBm"}>
+		{#if showDBm}
+			<span class="indicator-item indicator-start badge badge-accent badge-outline badge-xs">
+				{rssi_dbm} dBm
+			</span>
+		{/if}
+		{#if rssi_dbm >= -55}
+			<WiFi class={$$props.class || ''} />
+		{:else if rssi_dbm >= -75}
+			<div class="{$$props.class || ''} relative">
+				<WiFi class="absolute inset-0 h-full w-full opacity-30" />
+				<WiFi2 class="absolute inset-0 h-full w-full" />
+			</div>
+		{:else if rssi_dbm >= -85}
+			<div class="{$$props.class || ''} relative">
+				<WiFi class="absolute inset-0 h-full w-full opacity-30" />
+				<WiFi1 class="absolute inset-0 h-full w-full" />
+			</div>
+        {:else if rssi_dbm === 0}
+            <WifiOff class={$$props.class || ''} />
+		{:else}
+			<div class="{$$props.class || ''} relative">
+				<WiFi class="absolute inset-0 h-full w-full opacity-30" />
+				<WiFi0 class="absolute inset-0 h-full w-full" />
+			</div>
+		{/if}
+	</div>
+</div>

app/src/lib/components/SettingsCard.svelte

@@ -1,76 +1,56 @@
 <script lang="ts">
-    import { slide } from 'svelte/transition'
+	import { slide } from 'svelte/transition';
-    import { cubicOut } from 'svelte/easing'
+	import { cubicOut } from 'svelte/easing';
-    import { Down } from './icons'
+	import Down from '~icons/tabler/chevron-down';
-    interface Props {
+	export let open = true;
-        open?: boolean
+	export let collapsible = true;
-        collapsible?: boolean
-        icon?: import('svelte').Snippet
-        title?: import('svelte').Snippet
-        children?: import('svelte').Snippet
-        right?: import('svelte').Snippet
-    }
-
-    let {
-        open = $bindable(true),
-        collapsible = true,
-        icon,
-        title,
-        children,
-        right
-    }: Props = $props()
 </script>
 
 {#if collapsible}
-    <div
+	<div
-        class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
+		class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
-    >
+	>
-        <div
+		<div
-            class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"
+			class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"
-        >
+		>
-            <span class="inline-flex items-baseline">
+			<span class="inline-flex items-baseline">
-                {@render icon?.()}
+				<slot name="icon" />
-                {@render title?.()}
+				<slot name="title" />
-            </span>
+			</span>
-            <button
+			<button
-                class="btn btn-circle btn-ghost btn-sm"
+				class="btn btn-circle btn-ghost btn-sm"
-                onclick={() => {
+				on:click={() => {
-                    open = !open
+					open = !open;
-                }}
+				}}
-            >
+			>
-                <Down
+				<Down
-                    class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {(
+					class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {open
-                        open
+						? 'rotate-180'
-                    ) ?
+						: ''}"
-                        'rotate-180'
+				/>
-                    :   ''}"
+			</button>
-                />
+		</div>
-            </button>
+		{#if open}
-        </div>
+			<div
-        {#if open}
+				class="flex flex-col gap-2 p-4 pt-0"
-            <div
+				transition:slide|local={{ duration: 300, easing: cubicOut }}
-                class="flex flex-col gap-2 p-4 pt-0"
+			>
-                transition:slide|local={{ duration: 300, easing: cubicOut }}
+				<slot />
-            >
+			</div>
-                {@render children?.()}
+		{/if}
-            </div>
+	</div>
-        {/if}
-    </div>
 {:else}
-    <div
+	<div
-        class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
+		class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
-    >
+	>
-        <div
+		<div class="min-h-16 w-full p-4 text-xl font-medium">
-            class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"
+			<span class="inline-flex items-baseline">
-        >
+				<slot name="icon" />
-            <span class="inline-flex items-baseline">
+				<slot name="title" />
-                {@render icon?.()}
+			</span>
-                {@render title?.()}
+		</div>
-            </span>
+		<div class="flex flex-col gap-2 p-4 pt-0">
-            {@render right?.()}
+			<slot />
-        </div>
+		</div>
-        <div class="flex flex-col gap-2 p-4 pt-0">
+	</div>
-            {@render children?.()}
-        </div>
-    </div>
 {/if}

app/src/lib/components/Spinner.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { Loader } from './icons'
+	import Loader from '~icons/tabler/loader-2';
 </script>
 
 <div class="flex h-full w-full flex-col items-center justify-center p-6">
-    <Loader class="text-primary h-14 w-auto animate-spin stroke-2" />
+	<Loader class="text-primary h-14 w-auto animate-spin stroke-2" />
-    <p class="text-xl">Loading...</p>
+	<p class="text-xl">Loading...</p>
 </div>

app/src/lib/components/StatusItem.svelte

@@ -1,47 +0,0 @@
-<script lang="ts">
-    import type { Component } from 'svelte'
-
-    type Variant = 'success' | 'error' | 'primary' | 'info' | 'warning'
-
-    const {
-        icon,
-        title,
-        description = '',
-        variant = 'primary',
-        class: klass = '',
-        children = null
-    } = $props<{
-        icon?: Component
-        title: string
-        description?: string | number
-        variant?: Variant
-        class?: string
-        children?: () => Component
-    }>()
-
-    const Icon = $derived(icon)
-
-    const variants: Record<Variant, [string, string]> = {
-        success: ['bg-success', 'text-success-content'],
-        error: ['bg-error', 'text-error-content'],
-        primary: ['bg-primary', 'text-primary-content'],
-        info: ['bg-info', 'text-info-content'],
-        warning: ['bg-warning', 'text-warning-content']
-    }
-
-    const variantKey: Variant = (variant as Variant) in variants ? (variant as Variant) : 'primary'
-    const [bgColor, textColor] = variants[variantKey]
-</script>
-
-<div class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2 {klass}">
-    {#if icon}
-        <div class="mask mask-hexagon {bgColor} h-auto w-10 flex-none">
-            <Icon class="{textColor} h-auto w-full scale-75" />
-        </div>
-    {/if}
-    <div class="grow">
-        <div class="font-bold">{title}</div>
-        <div class="text-sm opacity-75 grow">{description}</div>
-    </div>
-    {@render children?.()}
-</div>

app/src/lib/components/Stream.svelte

@@ -1,17 +1,21 @@
 <script lang="ts">
-    import { onDestroy } from 'svelte'
+	import { user } from '$lib/stores/user';
-    import { apiLocation } from '$lib/stores'
+	import { onDestroy } from 'svelte';
 
-    let source = $state(`${$apiLocation}/api/camera/stream`)
+	const ws_token = `?access_token=${$user.bearer_token}`
 
-    onDestroy(() => (source = '#'))
+    let source = "/api/camera/stream"+ ws_token;
+
+	onDestroy(() => {
+		source = '#';
+	});
 </script>
 
 <div class="w-full h-full">
-    <img
+	<img
-        src={source}
+		src={source}
-        class="absolute object-cover blur-3xl w-full h-full -z-10"
+		class="absolute object-cover blur-3xl w-full h-full -z-10"
-        alt="Live stream is down"
+		alt="Live stream is down"
-    />
+	/>
-    <img src={source} class="object-contain w-full h-full" alt="Live stream is down" />
+	<img src={source} class="object-contain w-full h-full" alt="Live stream is down" />
 </div>

app/src/lib/components/Toast.svelte

@@ -1,37 +1,37 @@
 <script>
-    import { flip } from 'svelte/animate'
+	import { flip } from 'svelte/animate';
-    import { fly } from 'svelte/transition'
+	import { fly } from 'svelte/transition';
-    import { notifications } from '$lib/components/toasts/notifications'
+	import { notifications } from '$lib/components/toasts/notifications';
-    import { error, info, success, warning } from './icons'
+	import error from '~icons/tabler/circle-x';
+	import success from '~icons/tabler/circle-check';
+	import warning from '~icons/tabler/alert-triangle';
+	import info from '~icons/tabler/info-circle';
 
-    /** @type {{theme?: any, icon?: any}} */
+	export let theme = {
-    let {
+		error: 'alert-error',
-        theme = {
+		success: 'alert-success',
-            error: 'alert-error',
+		warning: 'alert-warning',
-            success: 'alert-success',
+		info: 'alert-info'
-            warning: 'alert-warning',
+	};
-            info: 'alert-info'
+
-        },
+	export let icon = {
-        icon = {
+		error: error,
-            error: error,
+		success: success,
-            success: success,
+		warning: warning,
-            warning: warning,
+		info: info
-            info: info
+	};
-        }
-    } = $props()
 </script>
 
 <div class="toast toast-end mr-4">
-    {#each $notifications as notification (notification.id)}
+	{#each $notifications as notification (notification.id)}
-        {@const SvelteComponent = icon[notification.type]}
+		<div
-        <div
+			animate:flip={{ duration: 400 }}
-            animate:flip={{ duration: 400 }}
+			class="alert animate-none {theme[notification.type]}"
-            class="alert animate-none {theme[notification.type]}"
+			in:fly={{ y: 100, duration: 400 }}
-            in:fly={{ y: 100, duration: 400 }}
+			out:fly={{ x: 100, duration: 400 }}
-            out:fly={{ x: 100, duration: 400 }}
+		>
-        >
+			<svelte:component this={icon[notification.type]} class="h-6 w-6 flex-shrink-0" />
-            <SvelteComponent class="h-6 w-6 shrink-0" />
+			<span>{notification.message}</span>
-            <span>{notification.message}</span>
+		</div>
-        </div>
+	{/each}
-    {/each}
 </div>

app/src/lib/components/TopBar.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import MdiHamburgerMenu from '~icons/mdi/hamburger-menu';
+</script>
+
+<div class="topbar absolute left-0 top-0 w-full z-20 flex justify-between bg-zinc-800">
+	<div class="flex gap-2 p-2">
+        <a href="/">
+            <svelte:component this={MdiHamburgerMenu} class="h-8 w-8"/>
+        </a>
+    </div>
+</div>
+
+<style>
+	.topbar {
+		height: 50px;
+	}
+</style>

app/src/lib/components/UpdateIndicator.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { openModal, closeAllModals } from 'svelte-modals';
+	import { user } from '$lib/stores/user';
+	import { notifications } from '$lib/components/toasts/notifications';
+	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
+	import Firmware from '~icons/tabler/refresh-alert';
+	import Cancel from '~icons/tabler/x';
+	import CloudDown from '~icons/tabler/cloud-download';
+	import GithubUpdateDialog from '$lib/components/GithubUpdateDialog.svelte';
+	import { compareVersions } from 'compare-versions';
+	import { onMount } from 'svelte';
+	import { api } from '$lib/api';
+	import type { GithubRelease } from '$lib/models';
+
+	export let update = false;
+
+	let firmwareVersion: string;
+	let firmwareDownloadLink: string;
+
+	async function getGithubAPI() {
+        const headers = {
+            accept: 'application/vnd.github+json',
+            'X-GitHub-Api-Version': '2022-11-28'
+        }
+        const result = await api.get<GithubRelease>(`https://api.github.com/repos/${$page.data.github}/releases/latest`, {headers})
+        if (result.inner.message === "404" || result.inner.message == "Not Found") {
+            console.warn('Error: Could not find releases in the repository');
+            return
+        }
+        if (result.isErr()) {
+            console.error('Error:', result.inner);
+            return
+        }
+        
+        const results = result.inner;
+        update = false;
+        firmwareVersion = '';
+
+        if (compareVersions(results.tag_name, $page.data.features.firmware_version) === 1) {
+            // iterate over assets and find the correct one
+            for (let i = 0; i < results.assets.length; i++) {
+                // check if the asset is of type *.bin
+                if (
+                    results.assets[i].name.includes('.bin') &&
+                    results.assets[i].name.includes($page.data.features.firmware_built_target)
+                ) {
+                    update = true;
+                    firmwareVersion = results.tag_name;
+                    firmwareDownloadLink = results.assets[i].browser_download_url;
+                    notifications.info('Firmware update available.', 5000);
+                }
+            }
+        }
+	}
+
+	async function postGithubDownload(url: string) {
+        const result = await api.post('/api/downloadUpdate', { download_url: url });
+        if (result.isErr()){
+            console.error('Error:', result.inner);
+            return
+        }
+	}
+
+	onMount(async () => {
+		if ($page.data.features.download_firmware && (!$page.data.features.security || $user.admin)) {
+			await getGithubAPI();
+			const interval = setInterval(
+				async () => {
+					await getGithubAPI();
+				},
+				60 * 60 * 1000
+			); // once per hour
+		}
+	});
+
+	function confirmGithubUpdate(url: string) {
+		openModal(ConfirmDialog, {
+			title: 'Confirm flashing new firmware to the device',
+			message: 'Are you sure you want to overwrite the existing firmware with a new one?',
+			labels: {
+				cancel: { label: 'Abort', icon: Cancel },
+				confirm: { label: 'Update', icon: CloudDown }
+			},
+			onConfirm: () => {
+				postGithubDownload(url);
+				openModal(GithubUpdateDialog, {
+					onConfirm: () => closeAllModals()
+				});
+			}
+		});
+	}
+</script>
+
+{#if update}
+	<button
+		class="btn btn-square btn-ghost h-9 w-9"
+		on:click={() => confirmGithubUpdate(firmwareDownloadLink)}
+	>
+		<span
+			class="indicator-item indicator-top indicator-center badge badge-info badge-xs top-2 scale-75 lg:top-1"
+			>{firmwareVersion}</span
+		>
+		<Firmware class="h-7 w-7" />
+	</button>
+{/if}

app/src/lib/components/Visualization.svelte

@@ -1,373 +1,308 @@
 <script lang="ts">
-    import { onDestroy, onMount } from 'svelte'
+	import { onDestroy, onMount } from 'svelte';
-    import {
+	import { BufferGeometry, Line, LineBasicMaterial, Mesh, MeshBasicMaterial, Object3D, SphereGeometry, Vector3, type NormalBufferAttributes, type Object3DEventMap } from 'three';
-        Mesh,
+	import uzip from 'uzip';
-        MeshBasicMaterial,
+	import { ModesEnum, kinematicData, mode, model, outControllerData, servoAnglesOut, servoAngles, mpu, jointNames } from '$lib/stores';
-        type Object3D,
+	import { footColor, isEmbeddedApp, throttler, toeWorldPositions } from '$lib/utilities';
-        SphereGeometry,
+	import { fileService } from '$lib/services';
-        Vector3,
+	import SceneBuilder from '$lib/sceneBuilder';
-        type Object3DEventMap,
+	import { lerp, degToRad } from 'three/src/math/MathUtils';
-        Color
+    import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-    } from 'three'
+	import Kinematic, { type body_state_t } from '$lib/kinematic';
-    import {
+    import {EightPhaseWalkState, FourPhaseWalkState, IdleState, RestState, StandState} from '$lib/gait'
-        mode,
+	import { radToDeg } from 'three/src/math/MathUtils.js';
-        model,
+	import type { URDFRobot } from 'urdf-loader';
-        input,
+	import { get } from 'svelte/store';
-        servoAnglesOut,
-        servoAngles,
-        mpu,
-        jointNames,
-        currentKinematic,
-        walkGait,
-        kinematicData
-    } from '$lib/stores'
-    import { populateModelCache, getToeWorldPositions } from '$lib/utilities'
-    import SceneBuilder from '$lib/sceneBuilder'
-    import { lerp, degToRad } from 'three/src/math/MathUtils'
-    import { GUI } from 'three/addons/libs/lil-gui.module.min.js'
-    import { type body_state_t } from '$lib/kinematic'
-    import {
-        BezierState,
-        CalibrationState,
-        GaitState,
-        IdleState,
-        RestState,
-        StandState
-    } from '$lib/gait'
-    import { radToDeg } from 'three/src/math/MathUtils.js'
-    import type { URDFRobot } from 'urdf-loader'
-    import { get } from 'svelte/store'
-    import { AnglesData, KinematicData, ModesEnum } from '$lib/platform_shared/message'
 
-    interface Props {
+    export let sky = true
-        defaultColor?: string | null
+    export let orbit = false
-        orbit?: boolean
+    export let panel = true
-        panel?: boolean
+    export let debug = false
-        debug?: boolean
+    export let ground = true
-        ground?: boolean
-    }
 
-    let {
+	let sceneManager = new SceneBuilder();
-        defaultColor = '#0091ff',
+	let canvas: HTMLCanvasElement
-        orbit = false,
-        panel = true,
-        debug = false,
-        ground = true
-    }: Props = $props()
 
-    let sceneManager = $state(new SceneBuilder())
+	let currentModelAngles: number[] = new Array(12).fill(0);
-    let canvas: HTMLCanvasElement
+	let modelTargetAngles: number[] = new Array(12).fill(0)
-    const NUM_ANGLES = 12 // TODO: This number should come from the robot
-
-    let currentModelAngles: AnglesData = AnglesData.create({
-        angles: new Array(NUM_ANGLES).fill(0)
-    })
-    let modelTargetAngles: AnglesData = AnglesData.create({ angles: new Array(NUM_ANGLES).fill(0) })
     let gui_panel: GUI
-    const SMOOTH_AMOUNT = 0.2
+    let Throttler = new throttler()
 
-    let target: Object3D<Object3DEventMap>
+    let feet_trace = new Array(4).fill([]);
+    let trace_lines: BufferGeometry<NormalBufferAttributes>[] = []
+    let target: Object3D<Object3DEventMap>;
 
-    let target_position = { x: 0, z: 0, yaw: 0 }
+    let target_position = {x: 0, z: 0, yaw: 0}
 
-    let kinematic = get(currentKinematic)
+    let kinematic = new Kinematic()
 
-    const planners: Record<ModesEnum, GaitState> = {
+    let planners = {
-        [ModesEnum.DEACTIVATED]: new IdleState(),
+        [ModesEnum.Idle]: new IdleState(),
-        [ModesEnum.IDLE]: new IdleState(),
+        [ModesEnum.Rest]: new RestState(),
-        [ModesEnum.CALIBRATION]: new CalibrationState(),
+        [ModesEnum.Stand]: new StandState(),
-        [ModesEnum.REST]: new RestState(),
+        [ModesEnum.Crawl]: new EightPhaseWalkState(),
-        [ModesEnum.STAND]: new StandState(),
+        [ModesEnum.Walk]: new FourPhaseWalkState()
-        [ModesEnum.WALK]: new BezierState(),
-        [ModesEnum.UNRECOGNIZED]: new IdleState()
     }
     let lastTick = performance.now()
-    let lastRobotPosition = new Vector3()
 
     const dir = [1, -1, -1, -1, -1, -1, 1, -1, -1, -1, -1, -1]
-    const THREEJS_SCALE = 10
 
     let body_state = {
         omega: 0,
         phi: 0,
         psi: 0,
         xm: 0,
-        ym: 0.15,
+        ym: 0.5,
         zm: 0,
-        feet: kinematic.getDefaultFeetPos(),
+        feet: planners[ModesEnum.Idle].default_feet_pos
-        cumulative_x: 0,
-        cumulative_y: 0,
-        cumulative_z: 0,
-        cumulative_roll: 0,
-        cumulative_pitch: 0,
-        cumulative_yaw: 0
     }
 
     let settings = {
-        'Internal kinematic': true,
+        'Internal kinematic':false,
-        'Robot transform controls': false,
+        'Robot transform controls':false,
-        'Auto orient robot': true,
+        'Auto orient robot':true,
-        'Trace feet': debug,
+        'Trace feet':debug,
-        'Target position': false,
         'Trace points': 30,
+        'Fix camera on robot': true,
         'Smooth motion': true,
-        omega: 0,
+        'omega': 0,
-        phi: 0,
+        'phi': 0,
-        psi: 0,
+        'psi': 0,
-        xm: 0,
+        'xm': 0,
-        ym: 0.15,
+        'ym': 0.7,
-        zm: 0,
+        'zm': 0,
-        Background: defaultColor
+        'Background': "black"
     }
 
-    onMount(async () => {
+	onMount(async () => {
-        await populateModelCache()
+        await cacheModelFiles()
-        await createScene()
+        await createScene();
+        if (!isEmbeddedApp && panel) createPanel();
         servoAngles.subscribe(updateAnglesFromStore)
-        walkGait.subscribe(gait => {
+	});
-            const walkPlanner = planners[ModesEnum.WALK]
-            if (!(walkPlanner instanceof BezierState)) {
-                throw new Error(
-                    `Expected BezierState for WALK mode, got ${walkPlanner.constructor.name}`
-                )
-            }
-            walkPlanner.set_mode(gait.gait)
-        })
-        if (panel) createPanel()
-    })
 
     onDestroy(() => {
+        canvas.remove()
         gui_panel?.destroy()
-    })
+    });
-
+    
-    const updateAnglesFromStore = (angles: AnglesData) => {
+    const updateAnglesFromStore = (angles: number[]) => {
         if (sceneManager.isDragging) return
         if (settings['Internal kinematic']) return
-        modelTargetAngles = angles
+        modelTargetAngles = angles;
     }
 
     const createPanel = () => {
-        gui_panel = new GUI({ width: 310 })
+        gui_panel = new GUI({width: 310});
-        gui_panel.close()
+        gui_panel.close();
-        gui_panel.domElement.id = 'three-gui-panel'
+        gui_panel.domElement.id = 'three-gui-panel';
 
-        const general = gui_panel.addFolder('General')
+        const general = gui_panel.addFolder('General');
         general.add(settings, 'Internal kinematic')
         general.add(settings, 'Robot transform controls')
         general.add(settings, 'Auto orient robot')
 
-        const kinematic = gui_panel.addFolder('Kinematics')
+        const kinematic = gui_panel.addFolder('Kinematics');
-        kinematic.add(settings, 'omega', -20, 20).onChange(updateKinematicPosition).listen()
+        kinematic.add(settings, 'omega', -20, 20).onChange(updateKinematicPosition).listen();
-        kinematic.add(settings, 'phi', -30, 30).onChange(updateKinematicPosition).listen()
+        kinematic.add(settings, 'phi', -30, 30).onChange(updateKinematicPosition).listen();
-        kinematic.add(settings, 'psi', -20, 15).onChange(updateKinematicPosition).listen()
+        kinematic.add(settings, 'psi', -20, 15).onChange(updateKinematicPosition).listen();
         kinematic.add(settings, 'xm', -1, 1).onChange(updateKinematicPosition).listen()
         kinematic.add(settings, 'ym', 0, 1).onChange(updateKinematicPosition).listen()
         kinematic.add(settings, 'zm', -1.3, 1.3).onChange(updateKinematicPosition).listen()
-
+ 
-        const visibility = gui_panel.addFolder('Visualization')
+        const visibility = gui_panel.addFolder('Visualization');
         visibility.add(settings, 'Trace feet')
         visibility.add(settings, 'Trace points', 1, 1000, 1)
-        visibility.add(settings, 'Target position')
         visibility.add(settings, 'Smooth motion')
-        visibility.addColor(settings, 'Background').onChange(setSceneBackground).listen()
+        visibility.addColor(settings, 'Background')
     }
 
     const updateKinematicPosition = () => {
-        kinematicData.set(
+        kinematicData.set([
-            KinematicData.create({
+            settings.omega,
-                omega: settings.omega,
+            settings.phi,
-                phi: settings.phi,
+            settings.psi,
-                psi: settings.psi,
+            settings.xm,
-                xm: settings.xm,
+            settings.ym,
-                ym: settings.ym,
+            settings.zm
-                zm: settings.zm
+        ])
-            })
-        )
     }
 
-    const setSceneBackground = (c: string | null) => (sceneManager.scene.background = new Color(c!))
+	const cacheModelFiles = async () => {
+		let data = await fetch('/stl.zip').then((data) => data.arrayBuffer());
 
-    const updateAngles = (name: string, angle: number) => {
+		var files = uzip.parse(data);
-        modelTargetAngles.angles[$jointNames.indexOf(name)] = angle * (180 / Math.PI)
-        servoAnglesOut.set(
-            AnglesData.create({
-                angles: modelTargetAngles.angles.map(num => Math.round(num))
-            })
-        )
-    }
 
-    const createScene = async () => {
+		for (const [path, data] of Object.entries(files) as [path: string, data: Uint8Array][]) {
-        sceneManager
+			const url = new URL(path, window.location.href);
-            .addRenderer({ antialias: true, canvas, alpha: true })
+			fileService.saveFile(url.toString(), data);
-            .addPerspectiveCamera({ x: -0.5, y: 0.5, z: 1 })
+		}
-            .addOrbitControls(2, 20, orbit)
+	};
-            .addDirectionalLight({ x: 10, y: 20, z: 10, color: 0xffffff, intensity: 3 })
+
-            .addAmbientLight({ color: 0xffffff, intensity: 0.5 })
+	const updateAngles = (name: string, angle: number) => {
-            .addFogExp2(0xcccccc, 0.015)
+		modelTargetAngles[$jointNames.indexOf(name)] = angle * (180 / Math.PI);
-            .addModel($model as URDFRobot)
+        Throttler.throttle(() => servoAnglesOut.set(modelTargetAngles.map(num => Math.round(num))), 100)
+	};
+
+	const createScene = async () => {
+		sceneManager
+			.addRenderer({ antialias: true, canvas, alpha: true })
+			.addPerspectiveCamera({ x: -0.5, y: 0.5, z: 1 })
+			.addOrbitControls(8, 30, orbit)
+            .addDirectionalLight({ x: 10, y: 20, z: 10, color: 0xffffff, intensity: 0.9 })
+			.addAmbientLight({ color: 0xffffff, intensity: 0.6 })
+			.addFogExp2(0xcccccc, 0.015)
+			.addModel($model)
             .addTransformControls(sceneManager.model)
-            .fillParent()
+			.fillParent()
-            .addRenderCb(render)
+			.addRenderCb(render)
-            .startRenderLoop()
+			.startRenderLoop();
-
+            
-        if (ground) sceneManager.addGroundPlane()
+        if (ground) sceneManager
-
+			.addGroundPlane()
-        const geometry = new SphereGeometry(0.1, 32, 16)
+            .addGridHelper({ size: 30, divisions: 25 })
-        const material = new MeshBasicMaterial({ color: 0xffff00 })
+        
-        target = new Mesh(geometry, material)
+        
-        sceneManager.scene.add(target)
+        const geometry = new SphereGeometry(0.1, 32, 16 ); 
+        const material = new MeshBasicMaterial( { color: 0xffff00 } ); 
+        target = new Mesh(geometry, material); 
 
         if (debug) {
-            sceneManager.addDragControl(angles => {
+            sceneManager.scene.add(target);
-                Object.entries(angles).forEach(([name, angle]) => {
+            sceneManager.addDragControl(updateAngles)
-                    updateAngles(name, angle)
-                })
-            })
         }
-        if (defaultColor) setSceneBackground(settings['Background'] || defaultColor)
+        if (sky) sceneManager.addSky()
+
+        for (let i = 0; i < 4; i++) {
+			const geometry = new BufferGeometry();
+			const material = new LineBasicMaterial({ color: footColor() });
+			const line = new Line(geometry, material);
+			trace_lines.push(geometry);
+			sceneManager.scene.add(line);
+		}
+	};
+
+    const renderTraceLines = (foot_positions: Vector3[]) => {
+        if (!settings['Trace feet']) {
+            if (!feet_trace.length) return 
+            trace_lines.forEach((line, i) => line.setFromPoints(feet_trace[i].slice(-1)))
+            feet_trace = new Array(4).fill([])
+            return
+        }
+        
+        trace_lines.forEach((line, i) => {
+            feet_trace[i].push(foot_positions[i])
+            feet_trace[i] = feet_trace[i].slice(-settings['Trace points'])
+            line.setFromPoints(feet_trace[i]);
+        })
     }
 
     const calculate_kinematics = () => {
         if (sceneManager.isDragging || !settings['Internal kinematic']) return
-        const position: body_state_t = {
+        const position:body_state_t = {
             omega: settings.omega,
             phi: settings.phi,
             psi: settings.psi,
             xm: settings.xm,
             ym: settings.ym,
             zm: settings.zm,
-            feet: body_state.feet,
+            feet: body_state.feet
-            cumulative_x: body_state.cumulative_x,
-            cumulative_y: body_state.cumulative_y,
-            cumulative_z: body_state.cumulative_z,
-            cumulative_roll: body_state.cumulative_roll,
-            cumulative_pitch: body_state.cumulative_pitch,
-            cumulative_yaw: body_state.cumulative_yaw
         }
 
-        let new_angles = kinematic.calcIK(position).map((x, i) => radToDeg(x * dir[i]))
+        let new_angles = kinematic.calcIK(position).map((x, i) => radToDeg(x * dir[i]));
-        modelTargetAngles.angles = new_angles
+        modelTargetAngles = new_angles;
     }
 
-    const orient_robot = (robot: URDFRobot, toes: Vector3[]) => {
+    const orient_robot = (robot: URDFRobot, toes:Vector3[]) => {
         if (settings['Robot transform controls'] || !settings['Auto orient robot']) return
-        robot.position.y = robot.position.y - Math.min(...toes.map(toe => toe.y))
+        robot.position.y = robot.position.y - Math.min(...toes.map(toe => toe.y));
 
-        const cumulativeYaw = body_state.cumulative_yaw
+        robot.position.z = smooth(robot.position.z, -settings.xm, 0.1);
-        const headingYaw = degToRad(-settings.phi + $mpu.heading)
+        robot.position.x = smooth(robot.position.x, -settings.zm, 0.1);
-        const totalYaw = headingYaw + cumulativeYaw
 
-        const cosTotal = Math.cos(totalYaw)
+        robot.rotation.z = smooth(robot.rotation.z, degToRad(-settings.phi + $mpu.heading + 90), 0.1);
-        const sinTotal = Math.sin(totalYaw)
+        robot.rotation.y = smooth(robot.rotation.y, degToRad(settings.omega), 0.1);
-        const rotatedXm = settings.xm * cosTotal - settings.zm * sinTotal
+        robot.rotation.x = smooth(robot.rotation.x, degToRad(settings.psi - 90), 0.1);
-        const rotatedZm = settings.xm * sinTotal + settings.zm * cosTotal
-
-        const cosHead = Math.cos(headingYaw)
-        const sinHead = Math.sin(headingYaw)
-        const rotatedCumX = body_state.cumulative_x * cosHead - body_state.cumulative_z * sinHead
-        const rotatedCumZ = body_state.cumulative_x * sinHead + body_state.cumulative_z * cosHead
-
-        robot.position.x = smooth(
-            robot.position.x,
-            (-rotatedZm - rotatedCumZ) * THREEJS_SCALE,
-            SMOOTH_AMOUNT
-        )
-        robot.position.z = smooth(
-            robot.position.z,
-            (-rotatedXm - rotatedCumX) * THREEJS_SCALE,
-            SMOOTH_AMOUNT
-        )
-
-        const cosYaw = Math.cos(totalYaw)
-        const sinYaw = Math.sin(totalYaw)
-        const cmdPitch = degToRad(settings.psi)
-        const cmdRoll = degToRad(settings.omega)
-        const pitch =
-            degToRad(-90) + cmdPitch * cosYaw - cmdRoll * sinYaw + body_state.cumulative_pitch
-        const roll = cmdPitch * sinYaw + cmdRoll * cosYaw + body_state.cumulative_roll
-
-        robot.rotation.z = smooth(
-            robot.rotation.z,
-            degToRad(-settings.phi + $mpu.heading + 90) + cumulativeYaw,
-            SMOOTH_AMOUNT
-        )
-        robot.rotation.y = smooth(robot.rotation.y, roll, SMOOTH_AMOUNT)
-        robot.rotation.x = smooth(robot.rotation.x, pitch, SMOOTH_AMOUNT)
     }
 
-    const update_camera = (robot: URDFRobot) => {
+    const update_camera = (robot:URDFRobot) => {
-        const delta = robot.position.clone().sub(lastRobotPosition)
+        if (!settings['Fix camera on robot']) return
-        sceneManager.orbit.target.add(delta)
+        sceneManager.orbit.target = robot.position.clone()
-        sceneManager.camera.position.add(delta)
-        lastRobotPosition.copy(robot.position)
     }
 
-    const smooth = (start: number, end: number, amount: number) => {
+    const smooth = (start:number, end:number, amount:number) => {
         return settings['Smooth motion'] ? lerp(start, end, amount) : end
     }
 
     const update_gait = () => {
         if (sceneManager.isDragging || !settings['Internal kinematic']) return
-        const controlData = get(input)
+        const controlData = get(outControllerData)
+        const data = {
+            stop: controlData[0],
+            lx: controlData[1],
+            ly: controlData[2],
+            rx: controlData[3],
+            ry: controlData[4],
+            h: controlData[5],
+            s: controlData[6],
+        };
+        body_state.ym = ((data.h + 127) * 0.75) / 100;
 
-        let planner = planners[get(mode).mode]
+        let planner = planners[get(mode)]
         const delta = performance.now() - lastTick
         lastTick = performance.now()
-
+        
-        body_state = planner.step(body_state, controlData, delta)
+        body_state = planner.step(body_state, data, delta);
 
         settings.omega = body_state.omega
         settings.phi = body_state.phi
-        settings.psi = body_state.psi
+        settings.psi = body_state.psi 
         settings.xm = body_state.xm
         settings.ym = body_state.ym
         settings.zm = body_state.zm
     }
 
-    const update_robot_position = (robot: URDFRobot) => {
+    const update_robot_position = (robot:URDFRobot) => {
         if (!settings['Robot transform controls']) return
         settings.omega = radToDeg(robot.rotation.y)
-        settings.phi = radToDeg(robot.rotation.z) + $mpu.heading - 90
+        settings.phi = radToDeg(robot.rotation.z) + $mpu.heading -90
         settings.psi = radToDeg(robot.rotation.x) + 90
-        settings.xm = robot.position.z / THREEJS_SCALE
+        settings.xm = robot.position.z * 100
-        settings.zm = -robot.position.x / THREEJS_SCALE
+        settings.zm = -robot.position.x * 100
     }
 
     const updateTargetPosition = () => {
-        target.visible = settings['Target position']
+        target.position.x = smooth(target.position.x, target_position.x, 0.5)
-        target.position.x = smooth(target.position.x, target_position.x, SMOOTH_AMOUNT)
+        target.position.z = smooth(target.position.z, target_position.z, 0.5)
-        target.position.z = smooth(target.position.z, target_position.z, SMOOTH_AMOUNT)
     }
 
-    const render = () => {
+	const render = () => {
-        const robot = sceneManager.model
+		const robot = sceneManager.model;
-        if (!robot) return
+		if (!robot) return;
 
-        const toes = getToeWorldPositions(robot)
+        const toes = toeWorldPositions(robot)
 
+        renderTraceLines(toes)
         update_camera(robot)
         update_gait()
         calculate_kinematics()
         update_robot_position(robot)
-
+        
         sceneManager.transformControl.showX = settings['Robot transform controls']
         sceneManager.transformControl.showY = settings['Robot transform controls']
         sceneManager.transformControl.showZ = settings['Robot transform controls']
-
+        
-        for (let i = 0; i < $jointNames.length; i++) {
+		for (let i = 0; i < $jointNames.length; i++) {
-            currentModelAngles.angles[i] = smooth(
+            currentModelAngles[i] = smooth((robot.joints[$jointNames[i]].angle as number) * (180 / Math.PI), modelTargetAngles[i], 0.1);
-                (robot.joints[$jointNames[i]].angle as number) * (180 / Math.PI),
+            robot.joints[$jointNames[i]].setJointValue(degToRad(currentModelAngles[i]));
-                modelTargetAngles.angles[i],
-                SMOOTH_AMOUNT
-            )
-            robot.joints[$jointNames[i]].setJointValue(degToRad(currentModelAngles.angles[i]))
         }
 
-        orient_robot(robot, toes)
+        orient_robot(robot, toes) 
-        updateTargetPosition()
+        updateTargetPosition();
-    }
+	};
+
 </script>
 
-<svelte:window onresize={sceneManager.fillParent} />
+<svelte:window on:resize={sceneManager.fillParent} />
 
 <canvas bind:this={canvas}></canvas>

app/src/lib/components/filesystem/FileManager.svelte

@@ -1,228 +0,0 @@
-<script lang="ts">
-    import { fileSystemClient } from '$lib/filesystem/chunkedTransfer'
-    import type { TransferProgress } from '$lib/types/models'
-    import { onMount } from 'svelte'
-
-    let currentPath = '/'
-    let files: Array<{ name: string; size: number }> = []
-    let directories: Array<{ name: string }> = []
-    let loading = false
-    let error = ''
-    let uploadProgress: TransferProgress | null = null
-    let downloadProgress: TransferProgress | null = null
-
-    const joinPath = (name: string) => (currentPath === '/' ? '/' + name : currentPath + '/' + name)
-    const getError = (e: unknown, fallback: string) =>
-        e instanceof Error ? e.message : (e as { error?: string })?.error || fallback
-
-    async function loadDirectory() {
-        loading = true
-        error = ''
-        try {
-            const result = await fileSystemClient.listDirectory(currentPath)
-            if (result.success) {
-                files = result.files
-                directories = result.directories
-            } else {
-                error = result.error || 'Failed to load directory'
-            }
-        } catch (e) {
-            error = getError(e, 'Unknown error')
-        } finally {
-            loading = false
-        }
-    }
-
-    async function navigateTo(path: string) {
-        currentPath = path
-        await loadDirectory()
-    }
-
-    async function handleFileUpload(event: Event) {
-        const input = event.target as HTMLInputElement
-        const file = input.files?.[0]
-        if (!file) return
-
-        uploadProgress = null
-        error = ''
-
-        try {
-            const result = await fileSystemClient.uploadFileFromBrowser(
-                joinPath(file.name),
-                file,
-                p => (uploadProgress = p)
-            )
-            if (result.success) await loadDirectory()
-            else error = result.error || 'Upload failed'
-        } catch (e) {
-            error = getError(e, 'Upload error')
-        } finally {
-            uploadProgress = null
-            input.value = ''
-        }
-    }
-
-    async function handleDownload(filename: string) {
-        downloadProgress = null
-        error = ''
-
-        try {
-            const result = await fileSystemClient.downloadFileAndSave(
-                joinPath(filename),
-                filename,
-                p => (downloadProgress = p)
-            )
-            if (!result.success) error = result.error || 'Download failed'
-        } catch (e) {
-            error = getError(e, 'Download error')
-        } finally {
-            downloadProgress = null
-        }
-    }
-
-    async function handleDelete(name: string, isDirectory: boolean) {
-        if (!confirm(`Delete ${isDirectory ? 'directory' : 'file'} "${name}"?`)) return
-        error = ''
-
-        try {
-            const result = await fileSystemClient.deleteFile(joinPath(name))
-            if (result.success) await loadDirectory()
-            else error = result.error || 'Delete failed'
-        } catch (e) {
-            error = getError(e, 'Delete error')
-        }
-    }
-
-    async function handleCreateDirectory() {
-        const name = prompt('Enter directory name:')
-        if (!name) return
-        error = ''
-
-        try {
-            const result = await fileSystemClient.createDirectory(joinPath(name))
-            if (result.success) await loadDirectory()
-            else error = result.error || 'Failed to create directory'
-        } catch (e) {
-            error = getError(e, 'Error creating directory')
-        }
-    }
-
-    function formatBytes(bytes: number): string {
-        if (bytes === 0) return '0 B'
-        const k = 1024
-        const sizes = ['B', 'KB', 'MB', 'GB']
-        const i = Math.floor(Math.log(bytes) / Math.log(k))
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
-    }
-
-    onMount(loadDirectory)
-</script>
-
-<div class="max-w-3xl mx-auto my-8 p-4 border border-gray-300 rounded-lg bg-white">
-    <div class="mb-4">
-        <h2 class="m-0 mb-2">File Manager</h2>
-        <div class="font-mono bg-gray-100 p-2 rounded mb-2">Current: {currentPath}</div>
-        <div class="flex gap-2">
-            <button
-                class="px-4 py-2 bg-blue-600 text-white rounded cursor-pointer hover:bg-blue-700"
-                on:click={handleCreateDirectory}>New Folder</button
-            >
-            <label
-                class="px-4 py-2 bg-blue-600 text-white rounded cursor-pointer hover:bg-blue-700"
-            >
-                Upload File
-                <input type="file" on:change={handleFileUpload} class="hidden" />
-            </label>
-            <button
-                class="px-4 py-2 bg-blue-600 text-white rounded cursor-pointer hover:bg-blue-700"
-                on:click={loadDirectory}>Refresh</button
-            >
-        </div>
-    </div>
-
-    {#if error}
-        <div class="bg-red-100 text-red-800 p-3 rounded mb-4">{error}</div>
-    {/if}
-
-    {#if uploadProgress}
-        <div class="mb-4">
-            <div class="mb-2 text-sm">
-                Uploading: {uploadProgress.percentage.toFixed(1)}% ({formatBytes(
-                    uploadProgress.bytesTransferred
-                )} / {formatBytes(uploadProgress.totalBytes)})
-            </div>
-            <div class="h-5 bg-gray-200 rounded overflow-hidden">
-                <div
-                    class="h-full bg-green-600 transition-all duration-300"
-                    style="width: {uploadProgress.percentage}%"
-                ></div>
-            </div>
-        </div>
-    {/if}
-
-    {#if downloadProgress}
-        <div class="mb-4">
-            <div class="mb-2 text-sm">
-                Downloading: {downloadProgress.percentage.toFixed(1)}% ({formatBytes(
-                    downloadProgress.bytesTransferred
-                )} / {formatBytes(downloadProgress.totalBytes)})
-            </div>
-            <div class="h-5 bg-gray-200 rounded overflow-hidden">
-                <div
-                    class="h-full bg-green-600 transition-all duration-300"
-                    style="width: {downloadProgress.percentage}%"
-                ></div>
-            </div>
-        </div>
-    {/if}
-
-    <div class="border border-gray-300 rounded min-h-[200px]">
-        {#if loading}
-            <div class="text-center p-8 text-gray-500">Loading...</div>
-        {:else}
-            {#if currentPath !== '/'}
-                <div
-                    class="flex items-center p-3 border-b border-gray-100 gap-2 bg-gray-50 cursor-pointer"
-                    on:click={() => navigateTo('/')}
-                >
-                    <span class="text-2xl">📁</span>
-                    <span class="flex-1 hover:underline">..</span>
-                </div>
-            {/if}
-
-            {#each directories as dir}
-                <div class="flex items-center p-3 border-b border-gray-100 gap-2 bg-gray-50">
-                    <span class="text-2xl">📁</span>
-                    <span
-                        class="flex-1 cursor-pointer hover:underline"
-                        on:click={() => navigateTo(currentPath + '/' + dir.name)}>{dir.name}</span
-                    >
-                    <button
-                        class="px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700"
-                        on:click={() => handleDelete(dir.name, true)}>Delete</button
-                    >
-                </div>
-            {/each}
-
-            {#each files as file}
-                <div class="flex items-center p-3 border-b border-gray-100 gap-2 last:border-b-0">
-                    <span class="text-2xl">📄</span>
-                    <span class="flex-1">{file.name}</span>
-                    <span class="text-gray-500 text-sm">{formatBytes(file.size)}</span>
-                    <button
-                        class="px-3 py-1 bg-green-600 text-white rounded text-sm hover:bg-green-700"
-                        on:click={() => handleDownload(file.name)}>Download</button
-                    >
-                    <button
-                        class="px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700"
-                        on:click={() => handleDelete(file.name, false)}>Delete</button
-                    >
-                </div>
-            {/each}
-
-            {#if files.length === 0 && directories.length === 0}
-                <div class="text-center p-8 text-gray-500">Directory is empty</div>
-            {/if}
-        {/if}
-    </div>
-</div>

app/src/lib/components/icons/index.ts

@@ -1,98 +0,0 @@
-export { default as Connection } from '~icons/mdi/connection'
-export { default as Users } from '~icons/mdi/users'
-export { default as Settings } from '~icons/mdi/settings'
-export { default as MdiController } from '~icons/mdi/controller'
-export { default as Devices } from '~icons/mdi/devices'
-export { default as Camera } from '~icons/mdi/camera-outline'
-export { default as Rotate3d } from '~icons/mdi/rotate-3d'
-export { default as MotorOutline } from '~icons/mdi/motor-outline'
-export { default as Health } from '~icons/mdi/stethoscope'
-export { default as Folder } from '~icons/mdi/folder-outline'
-export { default as Update } from '~icons/mdi/reload'
-export { default as Router } from '~icons/mdi/router'
-export { default as AP } from '~icons/mdi/access-point'
-export { default as Remote } from '~icons/mdi/network'
-export { default as Copyright } from '~icons/mdi/copyright'
-export { default as NTP } from '~icons/mdi/clock-check'
-export { default as Metrics } from '~icons/mdi/report-bar'
-export { default as MdiEyeOutline } from '~icons/mdi/eye-outline'
-export { default as MdiEyeOffOutline } from '~icons/mdi/eye-off-outline'
-export { default as Github } from '~icons/mdi/github'
-export { default as Avatar } from '~icons/mdi/user-circle'
-export { default as Logout } from '~icons/mdi/logout'
-export { default as Record } from '~icons/mdi/radio-button-unchecked'
-export { default as MdiFullscreen } from '~icons/mdi/fullscreen'
-export { default as MdiFullscreenExit } from '~icons/mdi/fullscreen-exit'
-export { default as WiFi } from '~icons/tabler/wifi'
-export { default as WiFi0 } from '~icons/tabler/wifi-0'
-export { default as WiFi1 } from '~icons/tabler/wifi-1'
-export { default as WiFi2 } from '~icons/tabler/wifi-2'
-export { default as WifiOff } from '~icons/tabler/wifi-off'
-export { default as MdiWeatherSunny } from '~icons/mdi/weather-sunny'
-export { default as MdiMoonAndStars } from '~icons/mdi/moon-and-stars'
-export { default as Hamburger } from '~icons/mdi/hamburger-menu'
-
-export { default as FileIcon } from '~icons/mdi/file'
-export { default as FolderIcon } from '~icons/mdi/folder-outline'
-export { default as FolderOpenOutline } from '~icons/mdi/folder-open-outline'
-export { default as TrashIcon } from '~icons/mdi/trash'
-export { default as RotateCcw } from '~icons/mdi/rotate-left'
-export { default as RotateCw } from '~icons/mdi/rotate-right'
-export { default as UploadIcon } from '~icons/mdi/upload'
-export { default as DownloadIcon } from '~icons/mdi/download'
-
-export { default as Down } from '~icons/tabler/chevron-down'
-export { default as Cancel } from '~icons/tabler/x'
-export { default as Check } from '~icons/tabler/check'
-export { default as Login } from '~icons/tabler/login'
-export { default as Loader } from '~icons/tabler/loader-2'
-export { default as error } from '~icons/tabler/circle-x'
-export { default as success } from '~icons/tabler/circle-check'
-export { default as warning } from '~icons/tabler/alert-triangle'
-export { default as info } from '~icons/tabler/info-circle'
-export { default as Power } from '~icons/tabler/power'
-
-export { default as MAC } from '~icons/tabler/dna-2'
-export { default as Home } from '~icons/tabler/home'
-export { default as SSID } from '~icons/tabler/router'
-export { default as DNS } from '~icons/mdi/dns'
-export { default as Gateway } from '~icons/tabler/torii'
-export { default as Subnet } from '~icons/tabler/grid-dots'
-export { default as Channel } from '~icons/tabler/antenna'
-export { default as Scan } from '~icons/tabler/radar-2'
-export { default as Add } from '~icons/tabler/circle-plus'
-export { default as Edit } from '~icons/mdi/edit'
-export { default as EditOff } from '~icons/mdi/edit-off'
-export { default as Delete } from '~icons/tabler/trash'
-
-export { default as Network } from '~icons/tabler/router'
-export { default as Reload } from '~icons/tabler/reload'
-
-export { default as Firmware } from '~icons/tabler/refresh-alert'
-export { default as CloudDown } from '~icons/tabler/cloud-download'
-export { default as Server } from '~icons/tabler/server'
-export { default as Clock } from '~icons/tabler/clock'
-export { default as UTC } from '~icons/tabler/clock-pin'
-export { default as Stopwatch } from '~icons/tabler/24-hours'
-
-export { default as CPU } from '~icons/tabler/cpu'
-export { default as CPP } from '~icons/tabler/binary'
-export { default as Sleep } from '~icons/tabler/zzz'
-export { default as FactoryReset } from '~icons/tabler/refresh-dot'
-export { default as Speed } from '~icons/tabler/activity'
-export { default as Flash } from '~icons/tabler/device-sd-card'
-export { default as Pyramid } from '~icons/tabler/pyramid'
-export { default as Sketch } from '~icons/tabler/chart-pie'
-export { default as Heap } from '~icons/tabler/box-model'
-export { default as Temperature } from '~icons/tabler/temperature'
-export { default as SDK } from '~icons/tabler/sdk'
-
-export { default as Prerelease } from '~icons/tabler/test-pipe'
-export { default as Error } from '~icons/tabler/circle-x'
-
-export { default as OTA } from '~icons/tabler/file-upload'
-export { default as Warning } from '~icons/tabler/alert-triangle'
-
-export { default as AddUser } from '~icons/tabler/user-plus'
-export { default as Admin } from '~icons/tabler/key'
-export { default as Save } from '~icons/tabler/device-floppy'

app/src/lib/components/input/InputPassword.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-    import { MdiEyeOffOutline, MdiEyeOutline } from '../icons'
-
-    interface Props {
-        show?: boolean
-        value?: string
-        id?: string
-    }
-
-    let { show = $bindable(false), value = $bindable(''), id = '' }: Props = $props()
-
-    let type = $derived(show ? 'text' : 'password')
-
-    const handleInput = (e: Event) => (value = (e.target as HTMLInputElement).value)
-
-    const togglePassword = () => (show = !show)
-</script>
-
-<label class="input input-bordered flex items-center gap-2">
-    <input {type} class="grow" {value} oninput={handleInput} {id} />
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <div onclick={togglePassword} role="button" tabindex="0">
-        <MdiEyeOffOutline class="text-base-content/50 h-6 {show ? 'block' : 'hidden'}" />
-        <MdiEyeOutline class="text-base-content/50 h-6 {show ? 'hidden' : 'block'}" />
-    </div>
-</label>

app/src/lib/components/input/VerticalSlider.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-    interface Props {
-        min?: number
-        max?: number
-        step?: number
-        value?: number
-        oninput?: (value: Event) => void
-    }
-
-    let {
-        min = 0,
-        max = 100,
-        step = 1,
-        value = $bindable((max - min) / 2),
-        ...rest
-    }: Props = $props()
-</script>
-
-<input
-    type="range"
-    style="writing-mode: vertical-lr; direction: rtl"
-    class="cursor-pointer"
-    {min}
-    {max}
-    {step}
-    bind:value
-    {...rest}
-/>
-
-<style>
-    input[type='range']::-webkit-slider-runnable-track {
-        background: oklch(var(--p) / 1);
-        border-radius: var(--rounded-box, 1rem);
-    }
-</style>

app/src/lib/components/input/index.ts

@@ -1,2 +0,0 @@
-export { default as PasswordInput } from './InputPassword.svelte'
-export { default as VerticalSlider } from './VerticalSlider.svelte'

app/src/lib/components/layout/Widget.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-    interface Props {
-        children?: import('svelte').Snippet
-    }
-
-    let { children }: Props = $props()
-</script>
-
-<div class="box-border overflow-hidden flex-1">
-    {@render children?.()}
-</div>

app/src/lib/components/layout/WidgetContainer.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">
-    import WidgetContainer from './WidgetContainer.svelte'
-    import {
-        WidgetComponents,
-        type WidgetContainerConfig,
-        isWidgetConfig
-    } from '$lib/stores/application'
-    import Widget from './Widget.svelte'
-
-    interface Props {
-        container: WidgetContainerConfig
-    }
-
-    let { container }: Props = $props()
-</script>
-
-<div class="w-full h-full flex flex-col overflow-hidden">
-    <div
-        class="flex w-full h-full"
-        class:flex-row={container.layout === 'column'}
-        class:flex-col={container.layout === 'row'}
-        class:flex-wrap={container.layout === 'wrap'}
-    >
-        {#each container.widgets as widget, index (widget.id + '-' + index)}
-            <Widget>
-                {#if isWidgetConfig(widget)}
-                    {@const SvelteComponent = WidgetComponents[widget.component]}
-                    <SvelteComponent {...widget.props} />
-                {:else if widget.widgets}
-                    <WidgetContainer container={widget} />
-                {/if}
-            </Widget>
-            {#if index !== container.widgets.length - 1}
-                <div
-                    class="divider bg-base-300 m-0"
-                    class:divider-horizontal={container.layout === 'column'}
-                ></div>
-            {/if}
-        {/each}
-    </div>
-</div>

app/src/lib/components/menu/GithubButton.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-    import { Github } from '../icons'
-
-    interface Props {
-        github: { href: string; active?: boolean }
-    }
-
-    let { github }: Props = $props()
-</script>
-
-{#if github.active}
-    <!-- eslint-disable-next-line svelte/no-navigation-without-resolve -- external URL -->
-    <a href={github.href} class="btn btn-ghost" target="_blank" rel="noopener noreferrer">
-        <Github class="h-5 w-5" />
-    </a>
-{/if}

app/src/lib/components/menu/LogoButton.svelte

@@ -1,15 +0,0 @@
-<script>
-    import logo from '$lib/assets/logo512.png'
-    import { resolve } from '$app/paths'
-
-    /** @type {{appName: any}} */
-    let { appName } = $props()
-</script>
-
-<a
-    href={resolve('/')}
-    class="rounded-box mb-4 flex items-center hover:scale-[1.02] active:scale-[0.98]"
->
-    <img src={logo} alt="Logo" class="h-12 w-12" />
-    <h1 class="px-4 text-2xl font-bold">{appName}</h1>
-</a>

app/src/lib/components/menu/Menu.svelte

@@ -1,186 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/state'
-    import { resolve } from '$app/paths'
-    import { useFeatureFlags } from '$lib/stores/featureFlags'
-    import GithubButton from '../menu/GithubButton.svelte'
-    import LogoButton from '../menu/LogoButton.svelte'
-    import MenuList from '../menu/MenuList.svelte'
-    import {
-        Connection,
-        Settings,
-        MdiController,
-        Devices,
-        Camera,
-        Rotate3d,
-        MotorOutline,
-        Health,
-        Folder,
-        Update,
-        WiFi,
-        Router,
-        AP,
-        Copyright,
-        Metrics,
-        DNS
-    } from '$lib/components/icons'
-    import { PUBLIC_VITE_USE_HOST_NAME } from '$env/static/public'
-
-    const features = useFeatureFlags()
-
-    const appName = page.data.app_name
-
-    const copyright = page.data.copyright
-
-    const github = { href: 'https://github.com/' + page.data.github, active: true }
-
-    import type { Component } from 'svelte'
-
-    type menuItem = {
-        title: string
-        icon: Component
-        href?: string
-        feature: boolean
-        active?: boolean
-        submenu?: menuItem[]
-    }
-
-    function withBase(path: string) {
-        return `${resolve('/')}${path.startsWith('/') ? path.slice(1) : path}`
-    }
-
-    const { menuClicked } = $props()
-
-    const activeTitle = $derived(page.data.title)
-
-    const menuItems = $derived<menuItem[]>(
-        [
-            {
-                title: 'Connection',
-                icon: WiFi,
-                href: withBase('/connection'),
-                feature: !PUBLIC_VITE_USE_HOST_NAME
-            },
-            {
-                title: 'Controller',
-                icon: MdiController,
-                href: withBase('/controller'),
-                feature: true
-            },
-            {
-                title: 'Peripherals',
-                icon: Devices,
-                feature: true,
-                submenu: [
-                    {
-                        title: 'I2C',
-                        icon: Connection,
-                        href: withBase('/peripherals/i2c'),
-                        feature: true
-                    },
-                    {
-                        title: 'Camera',
-                        icon: Camera,
-                        href: withBase('/peripherals/camera'),
-                        feature: true
-                    },
-                    {
-                        title: 'Servo',
-                        icon: MotorOutline,
-                        href: withBase('/peripherals/servo'),
-                        feature: true
-                    },
-                    {
-                        title: 'IMU',
-                        icon: Rotate3d,
-                        href: withBase('/peripherals/imu'),
-                        feature: true
-                    }
-                ].map(sub => ({ ...sub, active: sub.title === activeTitle }))
-            },
-            {
-                title: 'WiFi',
-                icon: WiFi,
-                feature: true,
-                submenu: [
-                    {
-                        title: 'WiFi Station',
-                        icon: Router,
-                        href: withBase('/wifi/sta'),
-                        feature: true
-                    },
-                    {
-                        title: 'Access Point',
-                        icon: AP,
-                        href: withBase('/wifi/ap'),
-                        feature: true
-                    },
-                    {
-                        title: 'mDNS',
-                        icon: DNS,
-                        href: withBase('/wifi/mdns'),
-                        feature: true
-                    }
-                ].map(sub => ({ ...sub, active: sub.title === activeTitle }))
-            },
-            {
-                title: 'System',
-                icon: Settings,
-                feature: true,
-                submenu: [
-                    {
-                        title: 'System Status',
-                        icon: Health,
-                        href: withBase('/system/status'),
-                        feature: true
-                    },
-                    {
-                        title: 'File System',
-                        icon: Folder,
-                        href: withBase('/system/filesystem'),
-                        feature: true
-                    },
-                    {
-                        title: 'System Metrics',
-                        icon: Metrics,
-                        href: withBase('/system/metrics'),
-                        feature: true
-                    },
-                    {
-                        title: 'Firmware Update',
-                        icon: Update,
-                        href: withBase('/system/update'),
-                        feature: !!(
-                            $features.ota ||
-                            $features.upload_firmware ||
-                            $features.download_firmware
-                        )
-                    }
-                ].map(sub => ({ ...sub, active: sub.title === activeTitle }))
-            }
-        ].map(item => ({ ...item, active: item.title === activeTitle }))
-    )
-
-    const updateMenu = () => {
-        menuClicked()
-    }
-</script>
-
-<div class="flex h-full w-80 flex-col p-4 bg-base-200 text-base-content">
-    <LogoButton {appName} />
-
-    <MenuList
-        {menuItems}
-        select={updateMenu}
-        class="grow flex-nowrap overflow-y-auto overflow-x-hidden"
-        level="0"
-    />
-
-    <div class="divider my-0"></div>
-
-    <div class="flex items-center justify-between">
-        <GithubButton {github} />
-        <div class="flex items-center justify-end text-sm gap-2">
-            <Copyright class="h-4 w-4" />{copyright}
-        </div>
-    </div>
-</div>

app/src/lib/components/menu/MenuList.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-    import MenuList from './MenuList.svelte'
-    import type { Component } from 'svelte'
-
-    type MenuItem = {
-        title: string
-        icon: Component
-        href?: string
-        feature: boolean
-        active?: boolean
-        submenu?: MenuItem[]
-    }
-
-    let { level, menuItems, select, class: klass } = $props()
-
-    const selectMenuItem = (title: string) => {
-        select(title)
-    }
-</script>
-
-<ul class={klass + ' menu w-full'}>
-    {#each menuItems as MenuItem[] as menuItem (menuItem.title)}
-        {#if menuItem.feature}
-            <li>
-                {#if menuItem.submenu}
-                    <details open={menuItem.submenu.some(subItem => subItem.active)}>
-                        <summary class="font-bold">
-                            <menuItem.icon class="h-6 w-6" />
-                            {menuItem.title}
-                        </summary>
-                        <div class="pl-4">
-                            <MenuList
-                                menuItems={menuItem.submenu}
-                                level={level + 1}
-                                {select}
-                                class={klass}
-                            />
-                        </div>
-                    </details>
-                {:else}
-                    <!-- eslint-disable-next-line svelte/no-navigation-without-resolve --><a
-                        href={menuItem.href}
-                        class="font-bold"
-                        class:bg-base-100={menuItem.active}
-                        class:text-lg={level === 0}
-                        class:text-md={level === 1}
-                        onclick={() => selectMenuItem(menuItem.title)}
-                    >
-                        <menuItem.icon class="h-6 w-6" />
-                        {menuItem.title}
-                    </a>
-                {/if}
-            </li>
-        {/if}
-    {/each}
-</ul>

app/src/lib/components/statusbar/FullscreenButton.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-    import { isFullscreen, toggleFullscreen } from '$lib/stores'
-    import { MdiFullscreenExit, MdiFullscreen } from '../icons'
-
-    const SvelteComponent = $derived($isFullscreen ? MdiFullscreenExit : MdiFullscreen)
-</script>
-
-<button onclick={toggleFullscreen}>
-    <SvelteComponent class="h-7 w-7" />
-</button>

app/src/lib/components/statusbar/RSSIIndicator.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-    import { WiFi, WiFi0, WiFi1, WiFi2, WifiOff } from '../icons'
-
-    interface Props {
-        showDBm?: boolean
-        rssi?: number
-    }
-
-    let { showDBm = false, rssi = 0 }: Props = $props()
-
-    const getWiFiIcon = () => {
-        if (rssi === 0) return WifiOff
-        if (rssi >= -55) return WiFi
-        if (rssi >= -75) return WiFi2
-        if (rssi >= -85) return WiFi1
-        return WiFi0
-    }
-
-    const SvelteComponent = $derived(getWiFiIcon())
-</script>
-
-<div class="indicator">
-    <div class="tooltip tooltip-left" data-tip={rssi + ' dBm'}>
-        {#if showDBm}
-            <span class="indicator-item indicator-start badge badge-accent badge-outline badge-xs">
-                {rssi} dBm
-            </span>
-        {/if}
-        <div class="h-7 w-7">
-            <SvelteComponent class="absolute inset-0 h-full w-full" />
-        </div>
-    </div>
-</div>

app/src/lib/components/statusbar/SleepButton.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-    import { useFeatureFlags } from '$lib/stores'
-    import { modals } from 'svelte-modals'
-    import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
-    import { api } from '$lib/api'
-    import { Cancel, Power } from '../icons'
-
-    const features = useFeatureFlags()
-
-    const postSleep = async () => await api.post('/api/system/sleep')
-
-    const confirmSleep = () => {
-        modals.open(ConfirmDialog, {
-            title: 'Confirm Power Down',
-            message: 'Are you sure you want to switch off the device?',
-            labels: {
-                cancel: { label: 'Abort', icon: Cancel },
-                confirm: { label: 'Switch Off', icon: Power }
-            },
-            onConfirm: () => {
-                modals.close()
-                postSleep()
-            }
-        })
-    }
-</script>
-
-{#if $features.sleep}
-    <div class="flex-none">
-        <button class="btn btn-square btn-ghost h-9 w-10" onclick={confirmSleep}>
-            <Power class="text-error h-9 w-9" />
-        </button>
-    </div>
-{/if}

app/src/lib/components/statusbar/StopButton.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-    import { ModeData, ModesEnum } from '$lib/platform_shared/message'
-    import { mode } from '$lib/stores'
-
-    const deactivate = async () => {
-        mode.set(ModeData.create({ mode: ModesEnum.DEACTIVATED }))
-    }
-</script>
-
-<button onclick={deactivate} class="bg-error text-white btn rounded-none">STOP</button>

app/src/lib/components/statusbar/ThemeButton.svelte

@@ -1,9 +0,0 @@
-<script lang="ts">
-    import { MdiWeatherSunny, MdiMoonAndStars } from '../icons'
-</script>
-
-<label class="swap swap-rotate">
-    <input type="checkbox" value="light" class="theme-controller" />
-    <MdiWeatherSunny class="swap-off h-7 w-7" />
-    <MdiMoonAndStars class="swap-on h-7 w-7" />
-</label>

app/src/lib/components/statusbar/TopBar.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-    import { Hamburger } from '../icons'
-    import { resolve } from '$app/paths'
-</script>
-
-<div class="topbar absolute left-0 top-0 w-full z-20 flex justify-between bg-zinc-800">
-    <div class="flex gap-2 p-2">
-        <a href={resolve('/')}>
-            <Hamburger class="h-8 w-8" />
-        </a>
-    </div>
-</div>
-
-<style>
-    .topbar {
-        height: 50px;
-    }
-</style>

app/src/lib/components/statusbar/UpdateIndicator.svelte

@@ -1,111 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/state'
-    import { modals } from 'svelte-modals'
-    import { notifications } from '$lib/components/toasts/notifications'
-    import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
-    import GithubUpdateDialog from '$lib/components/GithubUpdateDialog.svelte'
-    import { compareVersions } from 'compare-versions'
-    import { onMount } from 'svelte'
-    import { api } from '$lib/api'
-    import type { GithubRelease } from '$lib/types/models'
-    import { useFeatureFlags } from '$lib/stores/featureFlags'
-    import { Cancel, CloudDown, Firmware } from '../icons'
-
-    const features = useFeatureFlags()
-
-    interface Props {
-        update?: boolean
-    }
-
-    let { update = $bindable(false) }: Props = $props()
-
-    let firmwareVersion: string = $state('')
-    let firmwareDownloadLink: string = $state('')
-
-    async function getGithubAPI() {
-        const headers = {
-            accept: 'application/vnd.github+json',
-            'X-GitHub-Api-Version': '2022-11-28'
-        }
-        const result = await api.get<GithubRelease>(
-            `https://api.github.com/repos/${page.data.github}/releases/latest`,
-            { headers }
-        )
-        if (result.inner.message === '404' || result.inner.message == 'Not Found') {
-            console.warn('Error: Could not find releases in the repository')
-            return
-        }
-        if (result.isErr()) {
-            console.error('Error:', result.inner)
-            return
-        }
-
-        const results = result.inner
-        update = false
-        firmwareVersion = ''
-
-        if (compareVersions(results.tag_name, $features.firmware_version as string) === 1) {
-            // iterate over assets and find the correct one
-            for (let i = 0; i < results.assets.length; i++) {
-                // check if the asset is of type *.bin
-                if (
-                    results.assets[i].name.includes('.bin') &&
-                    results.assets[i].name.includes($features.firmware_built_target as string)
-                ) {
-                    update = true
-                    firmwareVersion = results.tag_name
-                    firmwareDownloadLink = results.assets[i].browser_download_url
-                    notifications.info('Firmware update available.', 5000)
-                }
-            }
-        }
-    }
-
-    async function postGithubDownload(url: string) {
-        const result = await api.post('/api/downloadUpdate', { download_url: url })
-        if (result.isErr()) {
-            console.error('Error:', result.inner)
-            return
-        }
-    }
-
-    onMount(async () => {
-        if ($features.download_firmware) {
-            await getGithubAPI()
-            setInterval(async () => await getGithubAPI(), 60 * 60 * 1000) // once per hour
-        }
-    })
-
-    function confirmGithubUpdate(url: string) {
-        modals.open(ConfirmDialog, {
-            title: 'Confirm flashing new firmware to the device',
-            message: 'Are you sure you want to overwrite the existing firmware with a new one?',
-            labels: {
-                cancel: { label: 'Abort', icon: Cancel },
-                confirm: { label: 'Update', icon: CloudDown }
-            },
-            onConfirm: () => {
-                postGithubDownload(url)
-                modals.open(GithubUpdateDialog, {
-                    onConfirm: () => modals.closeAll()
-                })
-            }
-        })
-    }
-</script>
-
-{#if update}
-    <div class="indicator flex-none">
-        <button
-            class="btn btn-square btn-ghost h-9 w-9"
-            onclick={() => confirmGithubUpdate(firmwareDownloadLink)}
-        >
-            <span
-                class="indicator-item indicator-top indicator-center badge badge-info badge-xs top-2 scale-75 lg:top-1"
-            >
-                {firmwareVersion}
-            </span>
-            <Firmware class="h-7 w-7" />
-        </button>
-    </div>
-{/if}

app/src/lib/components/statusbar/ViewSelector.svelte

@@ -1,6 +0,0 @@
-<script lang="ts">
-    import { selectedView, views } from '$lib/stores/application'
-    import Selector from '../widget/Selector.svelte'
-</script>
-
-<Selector bind:selectedOption={$selectedView} options={$views.map(v => v.name)} />

app/src/lib/components/statusbar/statusbar.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/state'
-    import { telemetry } from '$lib/stores/telemetry'
-
-    import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte'
-    import UpdateIndicator from '$lib/components/statusbar/UpdateIndicator.svelte'
-    import SleepButton from './SleepButton.svelte'
-    import ThemeButton from './ThemeButton.svelte'
-    import FullscreenButton from './FullscreenButton.svelte'
-    import StopButton from './StopButton.svelte'
-    import ViewSelector from './ViewSelector.svelte'
-    import { Hamburger } from '../icons'
-</script>
-
-<div class="navbar bg-base-300 sticky top-0 z-10 h-12 min-h-fit drop-shadow-lg lg:h-16 gap-2 pr-0">
-    <div class="flex flex-1 gap-2">
-        <label for="main-menu" class="btn btn-ghost btn-circle btn-sm drawer-button">
-            <Hamburger class="h-6 w-auto" />
-        </label>
-        {#if page.data.title === 'Controller'}
-            <ViewSelector />
-        {:else}
-            <h1 class="px-2 text-xl font-bold lg:text-2xl">{page.data.title}</h1>
-        {/if}
-    </div>
-
-    <UpdateIndicator />
-
-    <FullscreenButton />
-
-    <ThemeButton />
-
-    <RssiIndicator rssi={$telemetry.rssi.rssi} />
-
-    <SleepButton />
-
-    <StopButton />
-</div>

app/src/lib/components/toasts/Toast.svelte

@@ -1,37 +1,37 @@
 <script>
-    import { flip } from 'svelte/animate'
+	import { flip } from 'svelte/animate';
-    import { fly } from 'svelte/transition'
+	import { fly } from 'svelte/transition';
-    import { notifications } from '$lib/components/toasts/notifications'
+	import { notifications } from '$lib/components/toasts/notifications';
-    import { error, info, success, warning } from '../icons'
+	import error from '~icons/tabler/circle-x';
+	import success from '~icons/tabler/circle-check';
+	import warning from '~icons/tabler/alert-triangle';
+	import info from '~icons/tabler/info-circle';
 
-    /** @type {{theme?: any, icon?: any}} */
+	export let theme = {
-    let {
+		error: 'alert-error',
-        theme = {
+		success: 'alert-success',
-            error: 'alert-error',
+		warning: 'alert-warning',
-            success: 'alert-success',
+		info: 'alert-info'
-            warning: 'alert-warning',
+	};
-            info: 'alert-info'
+
-        },
+	export let icon = {
-        icon = {
+		error: error,
-            error: error,
+		success: success,
-            success: success,
+		warning: warning,
-            warning: warning,
+		info: info
-            info: info
+	};
-        }
-    } = $props()
 </script>
 
 <div class="toast toast-end mr-4 z-20">
-    {#each $notifications as notification (notification.id)}
+	{#each $notifications as notification (notification.id)}
-        {@const SvelteComponent = icon[notification.type]}
+		<div
-        <div
+			animate:flip={{ duration: 400 }}
-            animate:flip={{ duration: 400 }}
+			class="alert animate-none {theme[notification.type]}"
-            class="alert animate-none {theme[notification.type]}"
+			in:fly={{ y: 100, duration: 400 }}
-            in:fly={{ y: 100, duration: 400 }}
+			out:fly={{ x: 100, duration: 400 }}
-            out:fly={{ x: 100, duration: 400 }}
+		>
-        >
+			<svelte:component this={icon[notification.type]} class="h-6 w-6 flex-shrink-0" />
-            <SvelteComponent class="h-6 w-6 shrink-0" />
+			<span>{notification.message}</span>
-            <span>{notification.message}</span>
+		</div>
-        </div>
+	{/each}
-    {/each}
 </div>

app/src/lib/components/toasts/notifications.ts

@@ -1,42 +1,42 @@
-import { writable } from 'svelte/store'
+import { writable, derived, type Writable } from 'svelte/store';
 
-type StateType = 'info' | 'success' | 'warning' | 'error'
+type StateType = 'info' | 'success' | 'warning' | 'error';
 
 type State = {
-    id: string
+	id: string;
-    type: StateType
+	type: StateType;
-    message: string
+	message: string;
-}
+};
 
 function createNotificationStore() {
-    const state: State[] = []
+	const state: State[] = [];
-    const notifications = writable(state)
+	const notifications = writable(state);
-    const { subscribe } = notifications
+	const { subscribe } = notifications;
 
-    function send(message: string, type: StateType = 'info', timeout: number) {
+	function send(message: string, type: StateType = 'info', timeout: number) {
-        const id = generateId()
+		const id = generateId();
-        setTimeout(() => {
+		setTimeout(() => {
-            notifications.update(state => {
+			notifications.update((state) => {
-                return state.filter(n => n.id !== id)
+				return state.filter((n) => n.id !== id);
-            })
+			});
-        }, timeout)
+		}, timeout);
-        notifications.update(state => {
+		notifications.update((state) => {
-            return [...state, { id, type, message }]
+			return [...state, { id, type, message }];
-        })
+		});
-    }
+	}
 
-    return {
+	return {
-        subscribe,
+		subscribe,
-        send,
+		send,
-        error: (msg: string, timeout: number = 4000) => send(msg, 'error', timeout),
+		error: (msg: string, timeout: number) => send(msg, 'error', timeout),
-        warning: (msg: string, timeout: number = 4000) => send(msg, 'warning', timeout),
+		warning: (msg: string, timeout: number) => send(msg, 'warning', timeout),
-        info: (msg: string, timeout: number = 4000) => send(msg, 'info', timeout),
+		info: (msg: string, timeout: number) => send(msg, 'info', timeout),
-        success: (msg: string, timeout: number = 4000) => send(msg, 'success', timeout)
+		success: (msg: string, timeout: number) => send(msg, 'success', timeout)
-    }
+	};
 }
 
 function generateId() {
-    return '_' + Math.random().toString(36).substr(2, 9)
+	return '_' + Math.random().toString(36).substr(2, 9);
 }
 
-export const notifications = createNotificationStore()
+export const notifications = createNotificationStore();

app/src/lib/components/widget/ChartWidget.svelte

@@ -1,102 +0,0 @@
-<script lang="ts">
-    import { daisyColor } from '$lib/utilities'
-    import { Chart, registerables } from 'chart.js'
-    import { onMount } from 'svelte'
-    import { cubicOut } from 'svelte/easing'
-    import { slide } from 'svelte/transition'
-
-    let chartElement: HTMLCanvasElement
-    let chart: Chart<'line', number[], number>
-
-    interface Props {
-        label: string
-        data: number[]
-        title: string
-    }
-
-    let { label, data, title }: Props = $props()
-
-    Chart.register(...registerables)
-
-    onMount(() => {
-        chart = new Chart(chartElement, {
-            type: 'line',
-            data: {
-                labels: data,
-                datasets: [
-                    {
-                        label,
-                        borderColor: daisyColor('--p'),
-                        backgroundColor: daisyColor('--p', 50),
-                        borderWidth: 2,
-                        data,
-                        yAxisID: 'y'
-                    }
-                ]
-            },
-            options: {
-                maintainAspectRatio: false,
-                responsive: true,
-                plugins: {
-                    legend: {
-                        display: true
-                    },
-                    tooltip: {
-                        mode: 'index',
-                        intersect: false
-                    }
-                },
-                elements: {
-                    point: {
-                        radius: 0
-                    }
-                },
-                scales: {
-                    x: {
-                        grid: {
-                            color: daisyColor('--bc', 10)
-                        },
-                        ticks: {
-                            color: daisyColor('--bc')
-                        },
-                        display: false
-                    },
-                    y: {
-                        type: 'linear',
-                        title: {
-                            display: true,
-                            text: title,
-                            color: daisyColor('--bc'),
-                            font: {
-                                size: 16,
-                                weight: 'bold'
-                            }
-                        },
-                        position: 'left',
-                        min: 0,
-                        max: 100,
-                        grid: { color: daisyColor('--bc', 10) },
-                        ticks: {
-                            color: daisyColor('--bc')
-                        },
-                        border: { color: daisyColor('--bc', 10) }
-                    }
-                }
-            }
-        })
-
-        setInterval(() => {
-            chart.data.labels = data
-            chart.data.datasets[0].data = data
-        }, 500)
-    })
-</script>
-
-<div class="w-full h-full overflow-x-auto">
-    <div
-        class="flex w-full flex-col space-y-1 h-60"
-        transition:slide|local={{ duration: 300, easing: cubicOut }}
-    >
-        <canvas bind:this={chartElement}></canvas>
-    </div>
-</div>

app/src/lib/components/widget/Selector.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-    interface Props {
-        options?: string[]
-        selectedOption?: string
-        change?: () => void
-        [key: string]: unknown
-    }
-
-    let { options = [], selectedOption = $bindable(''), ...rest }: Props = $props()
-</script>
-
-<select
-    bind:value={selectedOption}
-    {...rest}
-    class="select select-bordered select-sm lg:select-md max-w-xs {rest.class || ''}"
->
-    {#each options as option (option)}
-        <option value={option}>{option}</option>
-    {/each}
-</select>

app/src/lib/filesystem/chunkedTransfer.ts

@@ -1,470 +0,0 @@
-import { socket } from '$lib/stores/socket'
-import * as FSMessages from '$lib/platform_shared/filesystem'
-import type {
-	FSDeleteRequest,
-	FSMkdirRequest,
-	FSListRequest,
-	FSDownloadRequest,
-	FSDownloadMetadata,
-	FSDownloadData,
-	FSDownloadComplete,
-	FSUploadStart,
-	FSUploadData,
-	FSUploadComplete,
-	FSCancelTransfer
-} from '$lib/platform_shared/filesystem'
-import type { Result, DataResult, ListResult, ProgressCallback } from '$lib/types/models'
-
-const MAX_CHUNK_SIZE = 2 ** 14
-
-type TimeoutId = ReturnType<typeof setTimeout>
-type CleanupFn = (() => void) | null
-
-interface TransferBase<T extends Result> {
-	resolve: (result: T) => void
-	reject: (error: Error) => void
-	onProgress?: ProgressCallback
-	timeoutId: TimeoutId
-}
-
-interface ActiveDownload extends TransferBase<DataResult> {
-	path: string
-	buffer: Uint8Array
-	fileSize: number
-	totalChunks: number
-	chunksReceived: number
-	bytesReceived: number
-}
-
-interface ActiveUpload extends TransferBase<Result> {
-	path: string
-	transferId: number
-	totalChunks: number
-	chunksSent: number
-}
-
-export class FileSystemClient {
-	private activeDownloads = new Map<number, ActiveDownload>()
-	private activeUploads = new Map<number, ActiveUpload>()
-	private pendingDownloads = new Map<string, TransferBase<DataResult>>()
-	private metadataListenerCleanup: CleanupFn = null
-	private downloadListenerCleanup: CleanupFn = null
-	private completeListenerCleanup: CleanupFn = null
-	private uploadCompleteListenerCleanup: CleanupFn = null
-	private transferTimeout = 60000
-
-	constructor() {
-		this.setupListeners()
-	}
-
-	private setupListeners() {
-		// Listen for download metadata (sent first with file size)
-		this.metadataListenerCleanup = socket.on(
-			FSMessages.FSDownloadMetadata,
-			(metadata: FSDownloadMetadata) => {
-				this.handleDownloadMetadata(metadata)
-			}
-		)
-
-		// Listen for download data chunks
-		this.downloadListenerCleanup = socket.on(
-			FSMessages.FSDownloadData,
-			(data: FSDownloadData) => {
-				this.handleDownloadData(data)
-			}
-		)
-
-		// Listen for download completion
-		this.completeListenerCleanup = socket.on(
-			FSMessages.FSDownloadComplete,
-			(complete: FSDownloadComplete) => {
-				this.handleDownloadComplete(complete)
-			}
-		)
-
-		// Listen for upload completion
-		this.uploadCompleteListenerCleanup = socket.on(
-			FSMessages.FSUploadComplete,
-			(complete: FSUploadComplete) => {
-				this.handleUploadComplete(complete)
-			}
-		)
-	}
-
-	private handleDownloadMetadata(metadata: FSDownloadMetadata) {
-		// Find the pending download by path (we don't have transferId yet)
-		// The metadata arrives in response to a download request
-		const pending = this.pendingDownloads.values().next().value
-		if (!pending) {
-			console.warn(`Received download metadata but no pending download`)
-			return
-		}
-
-		// Clear initial timeout
-		clearTimeout(pending.timeoutId)
-
-		// Get the path from the pending downloads (first one)
-		const [path] = this.pendingDownloads.keys()
-		this.pendingDownloads.delete(path)
-
-		if (!metadata.success) {
-			pending.resolve({ success: false, error: metadata.error || 'Download failed' })
-			return
-		}
-
-		const transferId = metadata.transferId
-
-		// Now we know the exact file size - allocate properly sized buffer
-		const buffer = new Uint8Array(metadata.fileSize)
-
-		const download: ActiveDownload = {
-			path,
-			buffer,
-			fileSize: metadata.fileSize,
-			totalChunks: metadata.totalChunks,
-			chunksReceived: 0,
-			bytesReceived: 0,
-			resolve: pending.resolve,
-			reject: pending.reject,
-			onProgress: pending.onProgress,
-			timeoutId: setTimeout(() => {
-				this.activeDownloads.delete(transferId)
-				pending.reject(new Error('Download timeout'))
-			}, this.transferTimeout)
-		}
-
-		this.activeDownloads.set(transferId, download)
-	}
-
-	private handleDownloadData(data: FSDownloadData) {
-		const download = this.activeDownloads.get(data.transferId)
-		if (!download) {
-			console.warn(`Received download data for unknown transfer: ${data.transferId}`)
-			return
-		}
-
-		// Reset timeout
-		clearTimeout(download.timeoutId)
-		download.timeoutId = setTimeout(() => {
-			this.activeDownloads.delete(data.transferId)
-			download.reject(new Error('Download timeout'))
-		}, this.transferTimeout)
-
-		// Copy chunk data to buffer
-		if (data.data && data.data.length > 0) {
-			const offset = data.chunkIndex * MAX_CHUNK_SIZE
-			download.buffer.set(data.data, offset)
-			download.bytesReceived += data.data.length
-			download.chunksReceived++
-		}
-
-		// Report progress
-		if (download.onProgress) {
-			download.onProgress({
-				transferId: data.transferId,
-				bytesTransferred: download.bytesReceived,
-				totalBytes: download.fileSize,
-				chunksCompleted: download.chunksReceived,
-				totalChunks: download.totalChunks,
-				percentage: (download.chunksReceived / download.totalChunks) * 100
-			})
-		}
-	}
-
-	private handleDownloadComplete(complete: FSDownloadComplete) {
-		const download = this.activeDownloads.get(complete.transferId)
-		if (!download) {
-			// This is normal for error cases where transferId wasn't set
-			if (complete.error) {
-				console.warn(`Download failed: ${complete.error}`)
-			}
-			return
-		}
-
-		clearTimeout(download.timeoutId)
-		this.activeDownloads.delete(complete.transferId)
-
-		if (complete.success) {
-			// Trim buffer to actual file size
-			const finalData = download.buffer.slice(0, complete.fileSize)
-			download.resolve({ success: true, data: finalData })
-		} else {
-			download.resolve({ success: false, error: complete.error || 'Download failed' })
-		}
-	}
-
-	private handleUploadComplete(complete: FSUploadComplete) {
-		const upload = this.activeUploads.get(complete.transferId)
-		if (!upload) {
-			console.warn(`Received upload complete for unknown transfer: ${complete.transferId}`)
-			return
-		}
-
-		clearTimeout(upload.timeoutId)
-		this.activeUploads.delete(complete.transferId)
-
-		if (complete.success) {
-			upload.resolve({ success: true })
-		} else {
-			upload.resolve({ success: false, error: complete.error || 'Upload failed' })
-		}
-	}
-
-	/** Delete a file or directory on the ESP32 */
-	async deleteFile(path: string): Promise<Result> {
-		const request: FSDeleteRequest = { path }
-
-		const response = await socket.request({
-			fsDeleteRequest: request
-		})
-
-		if (response.fsDeleteResponse) {
-			return {
-				success: response.fsDeleteResponse.success,
-				error: response.fsDeleteResponse.error || undefined
-			}
-		}
-
-		return { success: false, error: 'No response received' }
-	}
-
-	/** Create a directory on the ESP32 */
-	async createDirectory(path: string): Promise<Result> {
-		const request: FSMkdirRequest = { path }
-
-		const response = await socket.request({
-			fsMkdirRequest: request
-		})
-
-		if (response.fsMkdirResponse) {
-			return {
-				success: response.fsMkdirResponse.success,
-				error: response.fsMkdirResponse.error || undefined
-			}
-		}
-
-		return { success: false, error: 'No response received' }
-	}
-
-	/** List files and directories at the given path */
-	async listDirectory(path = '/'): Promise<ListResult> {
-		const request: FSListRequest = { path }
-
-		const response = await socket.request({
-			fsListRequest: request
-		})
-
-		if (response.fsListResponse) {
-			const resp = response.fsListResponse
-			return {
-				success: resp.success,
-				error: resp.error || undefined,
-				files: (resp.files || []).map((f) => ({ name: f.name, size: f.size })),
-				directories: (resp.directories || []).map((d) => ({ name: d.name }))
-			}
-		}
-
-		return { success: false, error: 'No response received', files: [], directories: [] }
-	}
-
-	/** Download a file from the ESP32 using streaming transfer */
-	async downloadFile(path: string, onProgress?: ProgressCallback): Promise<DataResult> {
-		return new Promise((resolve, reject) => {
-			// Send download request - server will send metadata first, then stream chunks
-			const request: FSDownloadRequest = { path }
-
-			// Set up timeout for initial metadata response
-			const initialTimeout = setTimeout(() => {
-				this.pendingDownloads.delete(path)
-				reject(new Error('Download request timeout - no metadata received'))
-			}, this.transferTimeout)
-
-			// Track this pending download - will be converted to active when metadata arrives
-			this.pendingDownloads.set(path, {
-				resolve,
-				reject,
-				onProgress,
-				timeoutId: initialTimeout
-			})
-
-			// Send the download request (server will respond with metadata, then stream data)
-			socket.request({ fsDownloadRequest: request }).catch((err) => {
-				clearTimeout(initialTimeout)
-				this.pendingDownloads.delete(path)
-				reject(err)
-			})
-		})
-	}
-
-	/** Upload a file to the ESP32 using streaming transfer */
-	async uploadFile(path: string, data: Uint8Array, onProgress?: ProgressCallback): Promise<Result> {
-		const fileSize = data.length
-		const chunkSize = MAX_CHUNK_SIZE
-		const totalChunks = Math.ceil(fileSize / chunkSize) || 1
-
-		// Start upload - get transfer ID
-		const startRequest: FSUploadStart = {
-			path,
-			fileSize,
-			totalChunks
-		}
-
-		const startResponse = await socket.request({
-			fsUploadStart: startRequest
-		})
-
-		if (!startResponse.fsUploadStartResponse) {
-			return { success: false, error: 'Failed to start upload' }
-		}
-
-		const startResp = startResponse.fsUploadStartResponse
-
-		if (!startResp.success) {
-			return { success: false, error: startResp.error || 'Failed to start upload' }
-		}
-
-		const transferId = startResp.transferId
-
-		return new Promise((resolve, reject) => {
-			// Set up upload tracking
-			const upload: ActiveUpload = {
-				path,
-				transferId,
-				totalChunks,
-				chunksSent: 0,
-				resolve,
-				reject,
-				onProgress,
-				timeoutId: setTimeout(() => {
-					this.activeUploads.delete(transferId)
-					reject(new Error('Upload timeout - no completion received'))
-				}, this.transferTimeout)
-			}
-
-			this.activeUploads.set(transferId, upload)
-
-			// Stream all chunks without waiting for ACKs
-			for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
-				const offset = chunkIndex * chunkSize
-				const end = Math.min(offset + chunkSize, fileSize)
-				const chunkData = data.slice(offset, end)
-
-				const uploadData: FSUploadData = {
-					transferId,
-					chunkIndex,
-					data: chunkData
-				}
-
-				// Send chunk as fire-and-forget message
-				socket.emit(FSMessages.FSUploadData, uploadData)
-
-				upload.chunksSent++
-
-				// Report progress
-				if (onProgress) {
-					onProgress({
-						transferId,
-						bytesTransferred: end,
-						totalBytes: fileSize,
-						chunksCompleted: chunkIndex + 1,
-						totalChunks,
-						percentage: ((chunkIndex + 1) / totalChunks) * 100
-					})
-				}
-			}
-
-			// All chunks sent - now wait for completion message from server
-			// The timeout will handle if server doesn't respond
-		})
-	}
-
-	/** Cancel an ongoing transfer */
-	async cancelTransfer(transferId: number): Promise<Pick<Result, 'success'>> {
-		const request: FSCancelTransfer = { transferId }
-
-		// Clean up local state
-		const download = this.activeDownloads.get(transferId)
-		if (download) {
-			clearTimeout(download.timeoutId)
-			this.activeDownloads.delete(transferId)
-			download.resolve({ success: false, error: 'Transfer cancelled' })
-		}
-
-		const upload = this.activeUploads.get(transferId)
-		if (upload) {
-			clearTimeout(upload.timeoutId)
-			this.activeUploads.delete(transferId)
-			upload.resolve({ success: false, error: 'Transfer cancelled' })
-		}
-
-		const response = await socket.request({
-			fsCancelTransfer: request
-		})
-
-		if (response.fsCancelTransferResponse) {
-			return { success: response.fsCancelTransferResponse.success }
-		}
-
-		return { success: false }
-	}
-
-	/** Upload a File object from browser */
-	async uploadFileFromBrowser(
-		destinationPath: string,
-		file: File,
-		onProgress?: ProgressCallback
-	): Promise<Result> {
-		const arrayBuffer = await file.arrayBuffer()
-		const data = new Uint8Array(arrayBuffer)
-		return this.uploadFile(destinationPath, data, onProgress)
-	}
-
-	/** Download a file and save it to browser */
-	async downloadFileAndSave(
-		path: string,
-		filename: string,
-		onProgress?: ProgressCallback
-	): Promise<Result> {
-		const result = await this.downloadFile(path, onProgress)
-
-		if (!result.success || !result.data) {
-			return { success: false, error: result.error }
-		}
-
-		// Create blob and trigger download
-		const blob = new Blob([result.data.buffer as ArrayBuffer])
-		const url = URL.createObjectURL(blob)
-		const a = document.createElement('a')
-		a.href = url
-		a.download = filename
-		document.body.appendChild(a)
-		a.click()
-		document.body.removeChild(a)
-		URL.revokeObjectURL(url)
-
-		return { success: true }
-	}
-
-	/** Cleanup listeners when no longer needed */
-	destroy() {
-		this.metadataListenerCleanup?.()
-		this.downloadListenerCleanup?.()
-		this.completeListenerCleanup?.()
-		this.uploadCompleteListenerCleanup?.()
-
-		// Cancel all active transfers
-		for (const [, download] of this.activeDownloads) {
-			clearTimeout(download.timeoutId)
-			download.reject(new Error('FileSystemClient destroyed'))
-		}
-		this.activeDownloads.clear()
-
-		for (const [, upload] of this.activeUploads) {
-			clearTimeout(upload.timeoutId)
-			upload.reject(new Error('FileSystemClient destroyed'))
-		}
-		this.activeUploads.clear()
-	}
-}
-
-export const fileSystemClient = new FileSystemClient()

app/src/lib/gait.ts

@@ -1,496 +1,242 @@
-import { get } from 'svelte/store'
+import type { body_state_t } from './kinematic';
-import type { body_state_t } from './kinematic'
+import { fromInt8 } from './utilities';
-import { currentKinematic } from './stores/featureFlags'
+
-import { ControllerData, WalkGaits } from './platform_shared/message'
+const { sin } = Math;
 
 export interface gait_state_t {
-    step_height: number
+	step_height: number;
-    step_x: number
+	step_x: number;
-    step_z: number
+	step_z: number;
-    step_angle: number
+	step_angle: number;
-    step_velocity: number
+	step_velocity: number;
-    step_depth: number
+	step_depth: number;
+}
+
+export interface ControllerCommand {
+	stop: number;
+	lx: number;
+	ly: number;
+	rx: number;
+	ry: number;
+	h: number;
+	s: number;
 }
 
 export abstract class GaitState {
-    protected abstract name: string
+	protected abstract name: string;
 
-    protected dt = 0.02
+	protected static body_state: body_state_t;
-    protected body_state!: body_state_t
 
-    protected get kinematic() {
+	public get default_feet_pos() {
-        return get(currentKinematic)
+		return [
-    }
+			[1, -1, 1, 1],
+			[1, -1, -1, 1],
+			[-1, -1, 1, 1],
+			[-1, -1, -1, 1]
+		];
+	}
 
-    protected gait_state: gait_state_t = {
+	protected get default_height() {
-        step_height: 0,
+		return 0.5;
-        step_x: 0,
+	}
-        step_z: 0,
-        step_angle: 0,
-        step_velocity: 1,
-        step_depth: 0
-    }
 
-    public get default_feet_pos() {
+	begin() {
-        return this.kinematic.getDefaultFeetPos()
+		console.log('Starting', this.name);
-    }
+	}
+	end() {
+		console.log('Ending', this.name);
+	}
+	step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+		return body_state;
+	}
 
-    protected get default_height() {
+	map_command(command: ControllerCommand): gait_state_t {
-        return this.kinematic.default_body_height
+		return {
-    }
+			step_height: 0.4 + Math.abs(command.ry / 128),
-
+			step_x: (Math.floor(fromInt8(command.ly, -1, 1) * 10) / 10) * 3,
-    protected get default_step_depth() {
+			step_z: -(Math.floor(fromInt8(command.lx, -1, 1) * 10) / 10) * 3,
-        return this.kinematic.default_step_depth
+			step_velocity: command.s / 128 + 1,
-    }
+			step_angle: 0,
-
+			step_depth: 0.2
-    protected get default_step_height() {
+		};
-        return this.kinematic.default_step_height
+	}
-    }
-
-    begin() {
-        console.log('Starting', this.name)
-    }
-    end() {
-        console.log('Ending', this.name)
-    }
-    step(body_state: body_state_t, command: ControllerData, dt: number = 0.02) {
-        this.map_command(command)
-        this.body_state = body_state
-        this.dt = dt / 1000
-
-        if (body_state.cumulative_x === undefined) {
-            body_state.cumulative_x = 0
-            body_state.cumulative_y = 0
-            body_state.cumulative_z = 0
-            body_state.cumulative_roll = 0
-            body_state.cumulative_pitch = 0
-            body_state.cumulative_yaw = 0
-        }
-
-        return body_state
-    }
-
-    map_command(command: ControllerData) {
-        const kin = this.kinematic
-        this.gait_state = {
-            step_height: command.s1 * kin.max_step_height,
-            step_x: command.left!.y * kin.max_step_length,
-            step_z: -command.left!.x * kin.max_step_length,
-            step_velocity: command.speed,
-            step_angle: command.right!.x,
-            step_depth: kin.default_step_depth
-        }
-    }
 }
 
 export class IdleState extends GaitState {
-    protected name = 'Idle'
+	protected name = 'Idle';
-    step(body_state: body_state_t, command: ControllerData) {
-        super.step(body_state, command)
-        return body_state
-    }
-}
-
-export class CalibrationState extends GaitState {
-    protected name = 'Calibration'
-
-    step(body_state: body_state_t, _command: ControllerData) {
-        super.step(body_state, _command)
-        body_state.omega = 0
-        body_state.phi = 0
-        body_state.psi = 0
-        body_state.xm = 0
-        body_state.ym = this.kinematic.max_body_height
-        body_state.zm = 0
-        body_state.feet = this.default_feet_pos
-        return body_state
-    }
 }
 
 export class RestState extends GaitState {
-    protected name = 'Rest'
+	protected name = 'Rest';
 
-    step(body_state: body_state_t, _command: ControllerData) {
+	step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-        super.step(body_state, _command)
+		body_state.omega = 0;
-        body_state.omega = 0
+		body_state.phi = 0;
-        body_state.phi = 0
+		body_state.psi = 0;
-        body_state.psi = 0
+		body_state.xm = 0;
-        body_state.xm = 0
+		body_state.ym = this.default_height / 2;
-        body_state.ym = this.kinematic.min_body_height
+		body_state.zm = 0;
-        body_state.zm = 0
+		body_state.feet = this.default_feet_pos;
-        body_state.feet = this.default_feet_pos
+		return body_state;
-        return body_state
+	}
-    }
 }
 
 export class StandState extends GaitState {
-    protected name = 'Stand'
+	protected name = 'Stand';
 
-    step(body_state: body_state_t, command: ControllerData) {
+	step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-        super.step(body_state, command)
+		body_state.omega = 0;
-        const kin = this.kinematic
+		body_state.phi = command.rx / 8;
-        body_state.omega = 0
+		body_state.psi = command.ry / 8;
-        body_state.ym = kin.min_body_height + command.height * kin.body_height_range
+		body_state.xm = command.ly / 2 / 100;
-        body_state.psi = command.right!.y * kin.max_pitch
+		body_state.zm = command.lx / 2 / 100;
-        body_state.phi = command.right!.x * kin.max_roll
+		body_state.feet = this.default_feet_pos;
-        body_state.xm = command.left!.y * kin.max_body_shift_x
+		return body_state;
-        body_state.zm = command.left!.x * kin.max_body_shift_z
+	}
-        body_state.feet = this.default_feet_pos
-        return body_state
-    }
 }
 
-export class BezierState extends GaitState {
+abstract class PhaseGaitState extends GaitState {
-    protected name = 'Bezier'
+	protected tick = 0;
-    protected phase = 0
+	protected phase = 0;
-    protected phase_num = 0
+	protected phase_time = 0;
-    protected step_length = 0
+	protected abstract num_phases: number;
-    protected stand_offset = 0.75
+	protected abstract phase_speed_factor: number;
-    protected mode: WalkGaits = WalkGaits.TROT
+	protected abstract swing_stand_ratio: number;
-    protected speed_factor = 1
-    offset = [0, 0.5, 0.75, 0.25]
 
-    protected shift_start_pos = { x: 0, z: 0 }
+	protected contact_phases!: number[][];
-    protected shift_target_pos = { x: 0, z: 0 }
+	protected shifts!: number[][];
-    protected shift_start_time = 0
-    protected current_shift_leg = -1
 
-    protected last_body_state: body_state_t | null = null
+	protected body_state!: body_state_t;
-    protected cumulative_position = { x: 0, y: 0, z: 0 }
+	protected gait_state!: gait_state_t;
-    protected cumulative_orientation = { roll: 0, pitch: 0, yaw: 0 }
+	protected dt = 0.02;
 
-    constructor() {
+	step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-        super()
+		this.body_state = body_state;
-        this.set_mode(this.mode)
+		this.gait_state = this.map_command(command);
-    }
+		this.dt = dt / 1000;
+		this.update_phase();
+		this.update_body_position();
+		this.update_feet_positions();
+		return this.body_state;
+	}
 
-    begin() {
+	update_phase() {
-        super.begin()
+		this.phase_time += this.dt * this.phase_speed_factor * this.gait_state.step_velocity;
-    }
 
-    set_mode(mode: WalkGaits, duty?: number, order?: [number, number, number, number]) {
+		if (this.phase_time >= 1) {
-        this.mode = mode
+			this.phase += 1;
-        if (mode === WalkGaits.CRAWL) {
+			if (this.phase == this.num_phases) this.phase = 0;
-            this.speed_factor = 0.5
+			this.phase_time = 0;
-            this.stand_offset = duty ?? 0.85
+		}
-            const o = order ?? [3, 0, 2, 1]
+	}
-            const base = [0, 0.25, 0.5, 0.75]
-            const offsets = new Array(4).fill(0)
-            for (let i = 0; i < 4; i++) offsets[o[i]] = base[i]
-            this.offset = offsets
-        } else {
-            this.speed_factor = 2
-            this.stand_offset = duty ?? 0.6
-            this.offset = order ? (order.map(v => v % 1) as number[]) : [0, 0.5, 0.5, 0]
-        }
-    }
 
-    end() {
+	update_body_position() {
-        super.end()
+		if (this.num_phases === 4) return;
-    }
 
-    step(body_state: body_state_t, command: ControllerData, dt: number = 0.02) {
+		const shift = this.shifts[Math.floor(this.phase / 2)];
-        super.step(body_state, command, dt)
-        const kin = this.kinematic
-        this.body_state.ym = kin.min_body_height + command.height * kin.body_height_range
-        this.step_length = Math.sqrt(this.gait_state.step_x ** 2 + this.gait_state.step_z ** 2)
-        if (this.gait_state.step_x < 0) this.step_length = -this.step_length
-        this.update_phase()
-        this.update_body_position()
-        this.update_feet_positions()
-        this.update_cumulative_position()
-        return this.body_state
-    }
 
-    update_phase() {
+		this.body_state.xm += (shift[0] - this.body_state.xm) * this.dt * 4;
-        const m = this.gait_state
+		this.body_state.zm += (shift[2] - this.body_state.zm) * this.dt * 4;
-        if (m.step_x === 0 && m.step_z === 0 && m.step_angle === 0) {
+	}
-            this.phase = 0
-            return
-        }
-        this.phase += this.dt * m.step_velocity * this.speed_factor
-        if (this.phase >= 1) {
-            this.phase_num = (this.phase_num + 1) % 2
-            this.phase = 0
-        }
-    }
 
-    update_body_position() {
+	update_feet_positions() {
-        const m = this.gait_state
+		for (let i = 0; i < 4; i++) {
-        const moving = m.step_x !== 0 || m.step_z !== 0 || m.step_angle !== 0
+			this.body_state.feet[i] = this.update_foot_position(i);
-        if (!moving) return
+		}
+	}
 
-        if (this.mode !== WalkGaits.CRAWL) return
+	update_foot_position(index: number): number[] {
+		const contact = this.contact_phases[index][this.phase];
+		return contact ? this.stand(index) : this.swing(index);
+	}
 
-        const { stance, swing, next_swing, time_to_lift } = this.get_leg_states()
+	stand(index: number): number[] {
+		const delta_pos = [
+			-this.gait_state.step_x * this.dt * this.swing_stand_ratio,
+			0,
+			-this.gait_state.step_z * this.dt * this.swing_stand_ratio
+		];
 
-        if (stance.length >= 3 && swing.length === 0 && next_swing !== -1) {
+		this.body_state.feet[index][0] = this.body_state.feet[index][0] + delta_pos[0];
-            if (this.current_shift_leg !== next_swing) {
+		this.body_state.feet[index][1] = this.default_feet_pos[index][1];
-                this.current_shift_leg = next_swing
+		this.body_state.feet[index][2] = this.body_state.feet[index][2] + delta_pos[2];
-                this.shift_start_pos.x = this.body_state.xm
+		return this.body_state.feet[index];
-                this.shift_start_pos.z = this.body_state.zm
+	}
 
-                const remaining_legs = stance.filter(leg => leg !== next_swing)
+	swing(index: number): number[] {
-                const target = this.stance_centroid(remaining_legs)
+		const delta_pos = [this.gait_state.step_x * this.dt, 0, this.gait_state.step_z * this.dt];
-                this.shift_target_pos.x = target[0]
-                this.shift_target_pos.z = target[2]
 
-                this.shift_start_time = time_to_lift
+		if (this.gait_state.step_x == 0) {
-            }
+			delta_pos[0] =
+				(this.default_feet_pos[index][0] - this.body_state.feet[index][0]) * this.dt * 8;
+		}
 
-            const total_time = this.shift_start_time
+		if (this.gait_state.step_z == 0) {
-            const progress = total_time > 0 ? 1 - time_to_lift / total_time : 1
+			delta_pos[2] =
-            const smooth_progress = this.smoothstep01(Math.max(0, Math.min(1, progress)))
+				(this.default_feet_pos[index][2] - this.body_state.feet[index][2]) * this.dt * 8;
+		}
 
-            this.body_state.xm = this.lerp(
+		this.body_state.feet[index][0] = this.body_state.feet[index][0] + delta_pos[0];
-                this.shift_start_pos.x,
+		this.body_state.feet[index][1] =
-                this.shift_target_pos.x,
+			this.default_feet_pos[index][1] +
-                smooth_progress
+			sin(this.phase_time * Math.PI) * this.gait_state.step_height;
-            )
+		this.body_state.feet[index][2] = this.body_state.feet[index][2] + delta_pos[2];
-            this.body_state.zm = this.lerp(
+		return this.body_state.feet[index];
-                this.shift_start_pos.z,
+	}
-                this.shift_target_pos.z,
-                smooth_progress
-            )
-        }
-    }
-
-    protected lerp(a: number, b: number, t: number): number {
-        return a + (b - a) * t
-    }
-
-    protected stance_centroid(legs: number[]): number[] {
-        if (legs.length === 0) return [this.body_state.xm, 0, this.body_state.zm]
-
-        let sx = 0,
-            sz = 0
-        for (const i of legs) {
-            sx += this.body_state.feet[i][0]
-            sz += this.body_state.feet[i][2]
-        }
-        return [sx / legs.length, 0, sz / legs.length]
-    }
-
-    protected get_leg_states(): {
-        stance: number[]
-        swing: number[]
-        next_swing: number
-        time_to_lift: number
-    } {
-        const stance: number[] = []
-        const swing: number[] = []
-        let next_swing = -1
-        let min_time_to_swing = Infinity
-
-        for (let i = 0; i < 4; i++) {
-            let phase = this.phase + this.offset[i]
-            if (phase >= 1) phase -= 1
-
-            if (phase <= this.stand_offset) {
-                stance.push(i)
-                const time_to_swing = this.stand_offset - phase
-                if (time_to_swing < min_time_to_swing) {
-                    min_time_to_swing = time_to_swing
-                    next_swing = i
-                }
-            } else {
-                swing.push(i)
-            }
-        }
-
-        return { stance, swing, next_swing, time_to_lift: min_time_to_swing }
-    }
-
-    protected smoothstep01(t: number): number {
-        const x = Math.max(0, Math.min(1, t))
-        return x * x * (3 - 2 * x)
-    }
-
-    update_feet_positions() {
-        for (let i = 0; i < 4; i++) this.body_state.feet[i] = this.update_foot_position(i)
-    }
-
-    update_foot_position(index: number): number[] {
-        let phase = this.phase + this.offset[index]
-        if (phase >= 1) phase -= 1
-        this.body_state.feet[index][0] = this.default_feet_pos[index][0]
-        this.body_state.feet[index][1] = this.default_feet_pos[index][1]
-        this.body_state.feet[index][2] = this.default_feet_pos[index][2]
-        return phase <= this.stand_offset ?
-                this.stand_controller(index, phase / this.stand_offset)
-            :   this.swing_controller(index, (phase - this.stand_offset) / (1 - this.stand_offset))
-    }
-
-    stand_controller(index: number, phase: number) {
-        const depth = this.gait_state.step_depth
-        return this.controller(index, phase, stance_curve, depth)
-    }
-
-    swing_controller(index: number, phase: number) {
-        const height = this.gait_state.step_height
-        return this.controller(index, phase, bezier_curve, height)
-    }
-
-    controller(
-        index: number,
-        phase: number,
-        controller: (length: number, angle: number, ...args: number[]) => number[],
-        ...args: number[]
-    ) {
-        let length = this.step_length / 2
-        let angle = Math.atan2(this.gait_state.step_z, this.step_length) * 2
-        const delta_pos = controller(length, angle, ...args, phase)
-
-        const kin = this.kinematic
-        length = this.gait_state.step_angle * kin.max_step_length
-        angle = yawArc(this.default_feet_pos[index], this.body_state.feet[index])
-
-        const delta_rot = controller(length, angle, ...args, phase)
-
-        this.body_state.feet[index][0] += delta_pos[0] + delta_rot[0] * 0.2
-        this.body_state.feet[index][2] += delta_pos[2] + delta_rot[2] * 0.2
-        if (this.gait_state.step_x || this.gait_state.step_z || this.gait_state.step_angle)
-            this.body_state.feet[index][1] += delta_pos[1] + delta_rot[1] * 0.2
-
-        return this.body_state.feet[index]
-    }
-
-    update_cumulative_position() {
-        if (this.last_body_state === null) {
-            this.last_body_state = { ...this.body_state }
-            this.body_state.cumulative_x = 0
-            this.body_state.cumulative_y = 0
-            this.body_state.cumulative_z = 0
-            this.body_state.cumulative_roll = 0
-            this.body_state.cumulative_pitch = 0
-            this.body_state.cumulative_yaw = 0
-            return
-        }
-
-        const m = this.gait_state
-        const moving = m.step_x !== 0 || m.step_z !== 0 || m.step_angle !== 0
-
-        if (moving) {
-            const step_displacement_x_local =
-                m.step_x * m.step_velocity * this.dt * this.speed_factor
-            const step_displacement_z_local =
-                m.step_z * m.step_velocity * this.dt * this.speed_factor
-            const step_displacement_yaw =
-                m.step_angle * m.step_velocity * this.dt * this.speed_factor
-
-            const cos_yaw = Math.cos(this.cumulative_orientation.yaw)
-            const sin_yaw = Math.sin(this.cumulative_orientation.yaw)
-            const step_displacement_x =
-                step_displacement_x_local * cos_yaw - step_displacement_z_local * sin_yaw
-            const step_displacement_z =
-                step_displacement_x_local * sin_yaw + step_displacement_z_local * cos_yaw
-
-            this.cumulative_position.x += step_displacement_x
-            this.cumulative_position.z += step_displacement_z
-            this.cumulative_orientation.yaw += step_displacement_yaw
-        }
-
-        this.body_state.cumulative_x = this.cumulative_position.x
-        this.body_state.cumulative_y = this.cumulative_position.y
-        this.body_state.cumulative_z = this.cumulative_position.z
-        this.body_state.cumulative_roll = this.cumulative_orientation.roll
-        this.body_state.cumulative_pitch = this.cumulative_orientation.pitch
-        this.body_state.cumulative_yaw = this.cumulative_orientation.yaw
-
-        this.last_body_state = { ...this.body_state }
-    }
 }
 
-const stance_curve = (length: number, angle: number, depth: number, phase: number): number[] => {
+export class FourPhaseWalkState extends PhaseGaitState {
-    const X_POLAR = Math.cos(angle)
+	protected name = 'Four phase walk';
-    const Y_POLAR = Math.sin(angle)
+	protected num_phases = 4;
+	protected phase_speed_factor = 2.5;
+	protected contact_phases = [
+		[1, 0, 1, 1],
+		[1, 1, 1, 0],
+		[1, 1, 1, 0],
+		[1, 0, 1, 1]
+	];
+	protected swing_stand_ratio = 1 / (this.num_phases - 1);
 
-    const step = length * (1 - 2 * phase)
+	begin() {
-    const X = step * X_POLAR
+		super.begin();
-    const Z = step * Y_POLAR
+	}
-    let Y = 0
+
-    if (length !== 0) Y = -depth * Math.cos((Math.PI * (X + Y)) / (2 * length))
+	end() {
-    return [X, Y, Z]
+		super.end();
+	}
+
+	step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+		return super.step(body_state, command, dt);
+	}
 }
 
-const yawArc = (default_foot_pos: number[], current_foot_pos: number[]): number => {
+export class EightPhaseWalkState extends PhaseGaitState {
-    const foot_mag = Math.sqrt(default_foot_pos[0] ** 2 + default_foot_pos[2] ** 2)
+	protected name = 'Eight phase walk';
-    const foot_dir = Math.atan2(default_foot_pos[2], default_foot_pos[0])
+	protected num_phases = 8;
-    const offsets = [
+	protected phase_speed_factor = 1.5;
-        current_foot_pos[0] - default_foot_pos[0],
+	protected contact_phases = [
-        current_foot_pos[2] - default_foot_pos[2],
+		[1, 0, 1, 1, 1, 1, 1, 1],
-        current_foot_pos[1] - default_foot_pos[1]
+		[1, 1, 1, 0, 1, 1, 1, 1],
-    ]
+		[1, 1, 1, 1, 1, 0, 1, 1],
-    const offset_mag = Math.sqrt(offsets[0] ** 2 + offsets[2] ** 2)
+		[1, 1, 1, 1, 1, 1, 1, 0]
-    const offset_mod = Math.atan2(offset_mag, foot_mag)
+	];
+	protected shifts = [
+		[-0.3, 0, -0.2],
+		[-0.3, 0, 0.2],
+		[0.3, 0, -0.2],
+		[0.3, 0, 0.2]
+	];
+	protected swing_stand_ratio = 1 / (this.num_phases - 1);
 
-    return Math.PI / 2.0 + foot_dir + offset_mod
+	begin() {
-}
+		super.begin();
-
+	}
-const bezier_curve = (length: number, angle: number, height: number, phase: number): number[] => {
+
-    const control_points = get_control_points(length, angle, height)
+	end() {
-    const n = control_points.length - 1
+		super.end();
-
+	}
-    const point = [0, 0, 0]
+
-    for (let i = 0; i <= n; i++) {
+	step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-        const bernstein_poly = comb(n, i) * Math.pow(phase, i) * Math.pow(1 - phase, n - i)
+		return super.step(body_state, command, dt);
-        point[0] += bernstein_poly * control_points[i][0]
+	}
-        point[1] += bernstein_poly * control_points[i][1]
-        point[2] += bernstein_poly * control_points[i][2]
-    }
-    return point
-}
-
-const get_control_points = (length: number, angle: number, height: number): number[][] => {
-    const X_POLAR = Math.cos(angle)
-    const Z_POLAR = Math.sin(angle)
-
-    const STEP = [
-        -length,
-        -length * 1.4,
-        -length * 1.5,
-        -length * 1.5,
-        -length * 1.5,
-        0.0,
-        0.0,
-        0.0,
-        length * 1.5,
-        length * 1.5,
-        length * 1.4,
-        length
-    ]
-
-    const Y = [
-        0.0,
-        0.0,
-        height * 0.9,
-        height * 0.9,
-        height * 0.9,
-        height * 0.9,
-        height * 0.9,
-        height * 1.1,
-        height * 1.1,
-        height * 1.1,
-        0.0,
-        0.0
-    ]
-
-    const control_points: number[][] = []
-
-    for (let i = 0; i < STEP.length; i++) {
-        const X = STEP[i] * X_POLAR
-        const Z = STEP[i] * Z_POLAR
-        control_points.push([X, Y[i], Z])
-    }
-
-    return control_points
-}
-
-const comb = (n: number, k: number): number => {
-    if (k < 0 || k > n) return 0
-    if (k === 0 || k === n) return 1
-    k = Math.min(k, n - k)
-    let c = 1
-    for (let i = 0; i < k; i++) c = (c * (n - i)) / (i + 1)
-    return c
 }

app/src/lib/kinematic.ts

@@ -1,184 +1,320 @@
+
 export interface body_state_t {
-    omega: number
+	omega: number;
-    phi: number
+	phi: number;
-    psi: number
+	psi: number;
-    xm: number
+	xm: number;
-    ym: number
+	ym: number;
-    zm: number
+	zm: number;
-    feet: number[][]
+	feet: number[][];
-    cumulative_x: number
-    cumulative_y: number
-    cumulative_z: number
-    cumulative_roll: number
-    cumulative_pitch: number
-    cumulative_yaw: number
 }
 
 export interface position {
-    x: number
+	x: number;
-    y: number
+	y: number;
-    z: number
+	z: number;
 }
 
 export interface target_position {
-    x: number
+	x: number;
-    z: number
+	z: number;
-    yaw: number
+	yaw: number;
 }
 
-export interface KinematicParams {
+const { cos, sin, atan2, sqrt } = Math;
-    coxa: number
-    coxa_offset: number
-    femur: number
-    tibia: number
-    L: number
-    W: number
-}
 
-const { cos, sin, atan2, acos, sqrt, max, min } = Math
+const DEG2RAD = 0.017453292519943;
-
-const DEG2RAD = 0.017453292519943
 
 export default class Kinematic {
-    coxa: number
+	l1: number;
-    coxa_offset: number
+	l2: number;
-    femur: number
+	l3: number;
-    tibia: number
+	l4: number;
 
-    L: number
+	L: number;
-    W: number
+	W: number;
 
-    DEG2RAD = DEG2RAD
+	DEG2RAD = DEG2RAD;
 
-    max_roll: number
+	sHp = sin(Math.PI / 2);
-    max_pitch: number
+	cHp = cos(Math.PI / 2);
-    max_body_shift_x: number
-    max_body_shift_z: number
-    max_leg_reach: number
-    min_body_height: number
-    max_body_height: number
-    body_height_range: number
-    max_step_length: number
-    max_step_height: number
-    default_step_depth: number
-    default_body_height: number
-    default_step_height: number
 
-    mountOffsets: number[][]
+	Tlf: number[][] = [];
-    default_feet_positions: number[][]
+	Trf: number[][] = [];
+	Tlb: number[][] = [];
+	Trb: number[][] = [];
 
-    invMountRot = [
+	point_lf: number[][];
-        [0, 0, -1],
+	point_rf: number[][];
-        [0, 1, 0],
+	point_lb: number[][];
-        [1, 0, 0]
+	point_rb: number[][];
-    ]
+	Ix: number[][];
 
-    constructor(params: KinematicParams) {
+	constructor() {
-        this.coxa = params.coxa
+		this.l1 = 60.5 / 100;
-        this.coxa_offset = params.coxa_offset
+		this.l2 = 10 / 100;
-        this.femur = params.femur
+		this.l3 = 100.7 / 100;
-        this.tibia = params.tibia
+		this.l4 = 118.5 / 100;
-        this.L = params.L
-        this.W = params.W
 
-        this.max_roll = 15 * (Math.PI / 2)
+		this.L = 207.5 / 100;
-        this.max_pitch = 15 * (Math.PI / 2)
+		this.W = 78 / 100;
-        this.max_body_shift_x = this.W / 3
-        this.max_body_shift_z = this.W / 3
-        this.max_leg_reach = this.femur + this.tibia - this.coxa_offset
-        this.min_body_height = this.max_leg_reach * 0.45
-        this.max_body_height = this.max_leg_reach * 1
-        this.body_height_range = this.max_body_height - this.min_body_height
-        this.max_step_length = this.max_leg_reach * 0.8
-        this.max_step_height = this.max_leg_reach / 2
-        this.default_step_depth = 0.002
-        this.default_body_height = this.min_body_height + this.body_height_range / 2
-        this.default_step_height = this.default_body_height / 2
 
-        this.mountOffsets = [
+		this.point_lf = [
-            [this.L / 2, 0, this.W / 2],
+			[this.cHp, 0, this.sHp, this.L / 2],
-            [this.L / 2, 0, -this.W / 2],
+			[0, 1, 0, 0],
-            [-this.L / 2, 0, this.W / 2],
+			[-this.sHp, 0, this.cHp, this.W / 2],
-            [-this.L / 2, 0, -this.W / 2]
+			[0, 0, 0, 1]
-        ]
+		];
 
-        this.default_feet_positions = this.mountOffsets.map((offset, i) => {
+		this.point_rf = [
-            return [offset[0], 0, offset[2] + (i % 2 === 1 ? -this.coxa : this.coxa)]
+			[this.cHp, 0, this.sHp, this.L / 2],
-        })
+			[0, 1, 0, 0],
-    }
+			[-this.sHp, 0, this.cHp, -this.W / 2],
+			[0, 0, 0, 1]
+		];
 
-    getDefaultFeetPos(): number[][] {
+		this.point_lb = [
-        return this.default_feet_positions.map(pos => [...pos])
+			[this.cHp, 0, this.sHp, -this.L / 2],
-    }
+			[0, 1, 0, 0],
+			[-this.sHp, 0, this.cHp, this.W / 2],
+			[0, 0, 0, 1]
+		];
 
-    calcIK(p: body_state_t): number[] {
+		this.point_rb = [
-        const roll = p.omega * this.DEG2RAD
+			[this.cHp, 0, this.sHp, -this.L / 2],
-        const pitch = p.phi * this.DEG2RAD
+			[0, 1, 0, 0],
-        const yaw = p.psi * this.DEG2RAD
+			[-this.sHp, 0, this.cHp, -this.W / 2],
-        const rot = this.euler2R(roll, pitch, yaw)
+			[0, 0, 0, 1]
-        const inv_rot = [
+		];
-            [rot[0][0], rot[1][0], rot[2][0]],
+		this.Ix = [
-            [rot[0][1], rot[1][1], rot[2][1]],
+			[-1, 0, 0, 0],
-            [rot[0][2], rot[1][2], rot[2][2]]
+			[0, 1, 0, 0],
-        ]
+			[0, 0, 1, 0],
-        const inv_trans = [
+			[0, 0, 0, 1]
-            -inv_rot[0][0] * p.xm - inv_rot[0][1] * p.ym - inv_rot[0][2] * p.zm,
+		];
-            -inv_rot[1][0] * p.xm - inv_rot[1][1] * p.ym - inv_rot[1][2] * p.zm,
+	}
-            -inv_rot[2][0] * p.xm - inv_rot[2][1] * p.ym - inv_rot[2][2] * p.zm
-        ]
-        return p.feet.flatMap((foot, i) => {
-            const [wx, wy, wz] = foot
-            const bx = inv_rot[0][0] * wx + inv_rot[0][1] * wy + inv_rot[0][2] * wz + inv_trans[0]
-            const by = inv_rot[1][0] * wx + inv_rot[1][1] * wy + inv_rot[1][2] * wz + inv_trans[1]
-            const bz = inv_rot[2][0] * wx + inv_rot[2][1] * wy + inv_rot[2][2] * wz + inv_trans[2]
 
-            const [mx, my, mz] = this.mountOffsets[i]
+	public calcIK(body_state: body_state_t): number[] {
-            const px = bx - mx,
+		this.bodyIK(body_state);
-                py = by - my,
-                pz = bz - mz
 
-            const lx =
+		return [
-                this.invMountRot[0][0] * px +
+			...this.legIK(this.multiplyVector(this.inverse(this.Tlf), body_state.feet[0])),
-                this.invMountRot[0][1] * py +
+			...this.legIK(
-                this.invMountRot[0][2] * pz
+				this.multiplyVector(
-            const ly =
+					this.Ix,
-                this.invMountRot[1][0] * px +
+					this.multiplyVector(this.inverse(this.Trf), body_state.feet[1])
-                this.invMountRot[1][1] * py +
+				)
-                this.invMountRot[1][2] * pz
+			),
-            const lz =
+			...this.legIK(this.multiplyVector(this.inverse(this.Tlb), body_state.feet[2])),
-                this.invMountRot[2][0] * px +
+			...this.legIK(
-                this.invMountRot[2][1] * py +
+				this.multiplyVector(
-                this.invMountRot[2][2] * pz
+					this.Ix,
+					this.multiplyVector(this.inverse(this.Trb), body_state.feet[3])
+				)
+			)
+		];
+	}
 
-            const xLocal = i % 2 === 1 ? -lx : lx
+	bodyIK(p: body_state_t) {
-            return this.legIK(xLocal, ly, lz)
+		const cos_omega = cos(p.omega * this.DEG2RAD);
-        })
+		const sin_omega = sin(p.omega * this.DEG2RAD);
-    }
+		const cos_phi = cos(p.phi * this.DEG2RAD);
+		const sin_phi = sin(p.phi * this.DEG2RAD);
+		const cos_psi = cos(p.psi * this.DEG2RAD);
+		const sin_psi = sin(p.psi * this.DEG2RAD);
 
-    private legIK(x: number, y: number, z: number): [number, number, number] {
+		const Tm: number[][] = [
-        const F = sqrt(max(0, x * x + y * y - this.coxa * this.coxa))
+			[cos_phi * cos_psi, -sin_psi * cos_phi, sin_phi, p.xm],
-        const G = F - this.coxa_offset
+			[
-        const H = sqrt(G * G + z * z)
+				sin_omega * sin_phi * cos_psi + sin_psi * cos_omega,
-        const t1 = -atan2(y, x) - atan2(F, -this.coxa)
+				-sin_omega * sin_phi * sin_psi + cos_omega * cos_psi,
-        const D =
+				-sin_omega * cos_phi,
-            (H * H - this.femur * this.femur - this.tibia * this.tibia) /
+				p.ym
-            (2 * this.femur * this.tibia)
+			],
-        const t3 = acos(max(-1, min(1, D)))
+			[
-        const t2 = atan2(z, G) - atan2(this.tibia * sin(t3), this.femur + this.tibia * cos(t3))
+				sin_omega * sin_psi - sin_phi * cos_omega * cos_psi,
-        return [t1, t2, t3]
+				sin_omega * cos_psi + sin_phi * sin_psi * cos_omega,
-    }
+				cos_omega * cos_phi,
+				p.zm
+			],
+			[0, 0, 0, 1]
+		];
 
-    private euler2R(roll: number, pitch: number, yaw: number): number[][] {
+		this.Tlf = this.matrixMultiply(Tm, this.point_lf);
-        const cr = cos(roll),
+		this.Trf = this.matrixMultiply(Tm, this.point_rf);
-            sr = sin(roll)
+		this.Tlb = this.matrixMultiply(Tm, this.point_lb);
-        const cp = cos(pitch),
+		this.Trb = this.matrixMultiply(Tm, this.point_rb);
-            sp = sin(pitch)
+	}
-        const cy = cos(yaw),
+
-            sy = sin(yaw)
+	public legIK(point: number[]): number[] {
-        return [
+		const [x, y, z] = point;
-            [cp * cy, -cp * sy, sp],
+
-            [sr * sp * cy + sy * cr, -sr * sp * sy + cr * cy, -sr * cp],
+		let F = sqrt(x ** 2 + y ** 2 - this.l1 ** 2);
-            [sr * sy - sp * cr * cy, sr * cy + sp * sy * cr, cr * cp]
+		if (isNaN(F)) F = this.l1;
-        ]
+
-    }
+		const G = F - this.l2;
+		const H = sqrt(G ** 2 + z ** 2);
+
+		const theta1 = -atan2(y, x) - atan2(F, -this.l1);
+		const D = (H ** 2 - this.l3 ** 2 - this.l4 ** 2) / (2 * this.l3 * this.l4);
+		let theta3 = atan2(sqrt(1 - D ** 2), D);
+		if (isNaN(theta3)) theta3 = 0;
+
+		const theta2 = atan2(z, G) - atan2(this.l4 * sin(theta3), this.l3 + this.l4 * cos(theta3));
+
+		return [theta1, theta2, theta3];
+	}
+
+	matrixMultiply(a: number[][], b: number[][]): number[][] {
+		const result: number[][] = [];
+
+		for (let i = 0; i < a.length; i++) {
+			const row: number[] = [];
+
+			for (let j = 0; j < b[0].length; j++) {
+				let sum = 0;
+
+				for (let k = 0; k < a[i].length; k++) {
+					sum += a[i][k] * b[k][j];
+				}
+
+				row.push(sum);
+			}
+
+			result.push(row);
+		}
+
+		return result;
+	}
+
+	multiplyVector(matrix: number[][], vector: number[]): number[] {
+		const rows = matrix.length;
+		const cols = matrix[0].length;
+		const vectorLength = vector.length;
+
+		if (cols !== vectorLength) {
+			throw new Error('Matrix and vector dimensions do not match for multiplication.');
+		}
+
+		const result = [];
+
+		for (let i = 0; i < rows; i++) {
+			let sum = 0;
+
+			for (let j = 0; j < cols; j++) {
+				sum += matrix[i][j] * vector[j];
+			}
+
+			result.push(sum);
+		}
+
+		return result;
+	}
+
+	private inverse(matrix: number[][]): number[][] {
+		const det = this.determinant(matrix);
+		const adjugate = this.adjugate(matrix);
+		const scalar = 1 / det;
+		const inverse: number[][] = [];
+
+		for (let i = 0; i < matrix.length; i++) {
+			const row: number[] = [];
+
+			for (let j = 0; j < matrix[i].length; j++) {
+				row.push(adjugate[i][j] * scalar);
+			}
+
+			inverse.push(row);
+		}
+
+		return inverse;
+	}
+
+	private determinant(matrix: number[][]): number {
+		if (matrix.length !== matrix[0].length) {
+			throw new Error('The matrix is not square.');
+		}
+
+		if (matrix.length === 2) {
+			return matrix[0][0] * matrix[1][1] - matrix[0][1] * matrix[1][0];
+		}
+
+		let det = 0;
+
+		for (let i = 0; i < matrix.length; i++) {
+			const sign = i % 2 === 0 ? 1 : -1;
+			const subMatrix: number[][] = [];
+
+			for (let j = 1; j < matrix.length; j++) {
+				const row: number[] = [];
+
+				for (let k = 0; k < matrix.length; k++) {
+					if (k !== i) {
+						row.push(matrix[j][k]);
+					}
+				}
+
+				subMatrix.push(row);
+			}
+
+			det += sign * matrix[0][i] * this.determinant(subMatrix);
+		}
+
+		return det;
+	}
+
+	private adjugate(matrix: number[][]): number[][] {
+		if (matrix.length !== matrix[0].length) {
+			throw new Error('The matrix is not square.');
+		}
+
+		const adjugate: number[][] = [];
+
+		for (let i = 0; i < matrix.length; i++) {
+			const row: number[] = [];
+
+			for (let j = 0; j < matrix[i].length; j++) {
+				const sign = (i + j) % 2 === 0 ? 1 : -1;
+				const subMatrix: number[][] = [];
+
+				for (let k = 0; k < matrix.length; k++) {
+					if (k !== i) {
+						const subRow: number[] = [];
+
+						for (let l = 0; l < matrix.length; l++) {
+							if (l !== j) {
+								subRow.push(matrix[k][l]);
+							}
+						}
+
+						subMatrix.push(subRow);
+					}
+				}
+
+				const cofactor = sign * this.determinant(subMatrix);
+				row.push(cofactor);
+			}
+
+			adjugate.push(row);
+		}
+
+		return this.transpose(adjugate);
+	}
+
+	private transpose(matrix: number[][]): number[][] {
+		const transposed: number[][] = [];
+
+		for (let i = 0; i < matrix.length; i++) {
+			const row: number[] = [];
+
+			for (let j = 0; j < matrix[i].length; j++) {
+				row.push(matrix[j][i]);
+			}
+
+			transposed.push(row);
+		}
+
+		return transposed;
+	}
 }
+

app/src/lib/models.ts

@@ -0,0 +1,169 @@
+export type vector = { x: number; y: number };
+
+export interface ControllerInput {
+	left: vector;
+	right: vector;
+	height: number;
+	speed: number;
+	s1: number;
+}
+
+export type GithubRelease = {
+	message: string;
+	tag_name: string;
+	assets: Array<{
+		name: string;
+		browser_download_url: string;
+	}>;
+};
+
+export type JWT = { access_token: string };
+
+export type angles = number[] | Int16Array;
+
+export type WifiStatus = {
+	status: number;
+	local_ip: string;
+	mac_address: string;
+	rssi: number;
+	ssid: string;
+	bssid: string;
+	channel: number;
+	subnet_mask: string;
+	gateway_ip: string;
+	dns_ip_1: string;
+	dns_ip_2?: string;
+};
+
+export type WifiSettings = {
+	hostname: string;
+	priority_RSSI: boolean;
+	wifi_networks: NetworkItem[];
+};
+
+export type NetworkList = {
+	networks: NetworkItem[];
+};
+
+export type KnownNetworkItem = {
+	ssid: string;
+	password: string;
+	static_ip_config: boolean;
+	local_ip?: string;
+	subnet_mask?: string;
+	gateway_ip?: string;
+	dns_ip_1?: string;
+	dns_ip_2?: string;
+};
+
+export type NetworkItem = {
+	rssi: number;
+	ssid: string;
+	bssid: string;
+	channel: number;
+	encryption_type: number;
+};
+
+export type ApStatus = {
+	status: number;
+	ip_address: string;
+	mac_address: string;
+	station_num: number;
+};
+
+export type ApSettings = {
+	provision_mode: number;
+	ssid: string;
+	password: string;
+	channel: number;
+	ssid_hidden: boolean;
+	max_clients: number;
+	local_ip: string;
+	gateway_ip: string;
+	subnet_mask: string;
+};
+
+export type LightState = {
+	led_on: boolean;
+};
+
+export type NTPStatus = {
+	status: number;
+	utc_time: string;
+	local_time: string;
+	server: string;
+	uptime: number;
+};
+
+export type NTPSettings = {
+	enabled: boolean;
+	server: string;
+	tz_label: string;
+	tz_format: string;
+};
+
+export type Analytics = {
+	max_alloc_heap: number;
+	psram_size: number;
+	free_psram: number;
+	free_heap: number;
+	total_heap: number;
+	min_free_heap: number;
+	core_temp: number;
+	fs_total: number;
+	fs_used: number;
+	uptime: number;
+};
+
+export type StaticSystemInformation = {
+	esp_platform: string;
+	firmware_version: string;
+	cpu_freq_mhz: number;
+	cpu_type: string;
+	cpu_rev: number;
+	cpu_cores: number;
+	sketch_size: number;
+	free_sketch_space: number;
+	sdk_version: string;
+	arduino_version: string;
+	flash_chip_size: number;
+	flash_chip_speed: number;
+	cpu_reset_reason: string;
+};
+
+export type SystemInformation = Analytics & StaticSystemInformation;
+
+export type CameraSettings = {
+	framesize: number;
+	quality: number;
+	brightness: number;
+	contrast: number;
+	saturation: number;
+	sharpness: number;
+	denoise: number;
+	special_effect: number;
+	wb_mode: number;
+	vflip: boolean;
+	hmirror: boolean;
+};
+
+export type File = number;
+
+export interface Directory {
+	[key: string]: File | Directory;
+}
+
+export type Servo = {
+	name: string;
+	channel: number;
+	inverted: boolean;
+	angle: number;
+	center_angle: number;
+};
+
+export type ServoConfiguration = {
+	is_active: boolean;
+	servo_pwm_frequency: number;
+	servo_oscillator_frequency: number;
+	servos: Servo[];
+};

app/src/lib/sceneBuilder.ts

@@ -1,348 +1,351 @@
 import {
-    Mesh,
+	Mesh,
-    PerspectiveCamera,
+	PerspectiveCamera,
-    PlaneGeometry,
+	PlaneGeometry,
-    Scene,
+	Scene,
-    WebGLRenderer,
+	WebGLRenderer,
-    AmbientLight,
+	AmbientLight,
-    DirectionalLight,
+	DirectionalLight,
-    PCFSoftShadowMap,
+	PCFSoftShadowMap,
-    type GridHelper,
+	GridHelper,
-    ArrowHelper,
+	ArrowHelper,
-    Vector3,
+	Vector3,
-    FogExp2,
+	FogExp2,
-    CanvasTexture,
+	CanvasTexture,
-    type ColorRepresentation,
+	type ColorRepresentation,
-    type WebGLRendererParameters,
+	type WebGLRendererParameters,
-    MeshPhongMaterial,
+	MeshPhongMaterial,
-    EquirectangularReflectionMapping,
+	EquirectangularReflectionMapping,
-    ACESFilmicToneMapping,
+	ACESFilmicToneMapping,
-    Group,
+	MathUtils,
-    MeshBasicMaterial,
+	MeshStandardMaterial,
-    RepeatWrapping,
+	Group
-    type Object3D
+} from 'three';
-} from 'three'
+import { Sky } from 'three/addons/objects/Sky.js';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
-import { TransformControls } from 'three/examples/jsm/controls/TransformControls'
+import { TransformControls } from 'three/examples/jsm/controls/TransformControls';
-import { Reflector } from 'three/examples/jsm/objects/Reflector.js'
+import { type URDFJoint, type URDFMimicJoint, type URDFRobot } from 'urdf-loader';
-import { type URDFJoint, type URDFMimicJoint, type URDFRobot } from 'urdf-loader'
+import { PointerURDFDragControls } from 'urdf-loader/src/URDFDragControls';
-import { PointerURDFDragControls } from 'urdf-loader/src/URDFDragControls'
+import { sunCalculator } from './utilities/position-utilities';
 
-export const addScene = () => new Scene()
+export const addScene = () => new Scene();
 
 interface position {
-    x?: number
+	x?: number;
-    y?: number
+	y?: number;
-    z?: number
+	z?: number;
 }
 
 interface light {
-    color?: ColorRepresentation
+	color?: ColorRepresentation;
-    intensity?: number
+	intensity?: number;
+}
+
+interface gridOptions {
+	divisions?: number;
+	size?: number;
 }
 
 interface arrowOptions {
-    origin: position
+	origin: position;
-    direction: position
+	direction: position;
-    length?: number
+	length?: number;
-    color?: ColorRepresentation
+	color?: ColorRepresentation;
 }
 
-type directionalLight = position & light
+type directionalLight = position & light;
+
+type gridHelperOptions = gridOptions & position;
 
 export default class SceneBuilder {
-    public scene: Scene
+	public scene: Scene;
-    public camera!: PerspectiveCamera
+	public camera!: PerspectiveCamera;
-    public ground!: Mesh
+	public ground!: Mesh;
-    public renderer!: WebGLRenderer
+	public renderer!: WebGLRenderer;
-    public orbit: OrbitControls
+	public orbit: OrbitControls;
-    public callback: (() => void) | undefined
+	public callback: Function | undefined;
-    public gridHelper!: GridHelper
+	public gridHelper!: GridHelper;
-    public model!: URDFRobot
+	public model!: URDFRobot;
-    public liveStreamTexture!: CanvasTexture
+	public liveStreamTexture!: CanvasTexture;
-    private fog!: FogExp2
+	private fog!: FogExp2;
-    private isLoaded: boolean = false
+	private isLoaded: boolean = false;
-    public isDragging: boolean = false
+	public isDragging: boolean = false;
-    transformControl: TransformControls
+	highlightMaterial: any;
-    public modelGroup!: Group
+	sky!: Sky;
+	transformControl: TransformControls;
+	public modelGroup!: Group;
 
-    constructor() {
+	constructor() {
-        this.scene = new Scene()
+		this.scene = new Scene();
-        if (this.scene.environment?.mapping) {
+		if (this.scene.environment?.mapping) {
-            this.scene.environment.mapping = EquirectangularReflectionMapping
+			this.scene.environment.mapping = EquirectangularReflectionMapping;
-        }
+		}
-        return this
+		return this;
-    }
+	}
 
-    public addRenderer = (parameters?: WebGLRendererParameters) => {
+	public addRenderer = (parameters?: WebGLRendererParameters) => {
-        this.renderer = new WebGLRenderer(parameters)
+		this.renderer = new WebGLRenderer(parameters);
-        this.renderer.outputColorSpace = 'srgb'
+		this.renderer.outputColorSpace = 'srgb';
-        this.renderer.shadowMap.enabled = true
+		this.renderer.shadowMap.enabled = true;
-        this.renderer.shadowMap.type = PCFSoftShadowMap
+		this.renderer.shadowMap.type = PCFSoftShadowMap;
-        this.renderer.toneMapping = ACESFilmicToneMapping
+		this.renderer.toneMapping = ACESFilmicToneMapping;
-        this.renderer.toneMappingExposure = 0.85
+		this.renderer.toneMappingExposure = 0.85;
-        if (!parameters?.canvas) document.body.appendChild(this.renderer.domElement)
+		if (!parameters?.canvas) document.body.appendChild(this.renderer.domElement);
-        return this
+		return this;
-    }
+	};
 
-    public addPerspectiveCamera = (options: position) => {
+	public addSky = () => {
-        this.camera = new PerspectiveCamera()
+		this.sky = new Sky();
-        this.camera.position.set(options.x ?? 0, options.y ?? 2.7, options.z ?? 0)
+		this.sky.scale.setScalar(450000);
-        this.scene.add(this.camera)
+		this.scene.add(this.sky);
-        return this
+		const effectController = {
-    }
+			turbidity: 10,
+			rayleigh: 3,
+			mieCoefficient: 0.005,
+			mieDirectionalG: 0.7,
+			elevation: sunCalculator.calculateSunElevation(),
+			azimuth: 180,
+			exposure: this.renderer.toneMappingExposure
+		};
+		const uniforms = this.sky.material.uniforms;
+		uniforms['turbidity'].value = effectController.turbidity;
+		uniforms['rayleigh'].value = effectController.rayleigh;
+		uniforms['mieCoefficient'].value = effectController.mieCoefficient;
+		uniforms['mieDirectionalG'].value = effectController.mieDirectionalG;
+		this.renderer.toneMappingExposure = 0.5;
+		const phi = MathUtils.degToRad(90 - effectController.elevation);
+		const theta = MathUtils.degToRad(effectController.azimuth);
+		const sun = new Vector3();
 
-    public addGroundPlane = (options?: position) => {
+		sun.setFromSphericalCoords(1, phi, theta);
-        const checkerboardTexture = this.createCheckerboardTexture(1024, 2)
+		uniforms['sunPosition'].value.copy(sun);
-        checkerboardTexture.wrapS = RepeatWrapping
+		return this;
-        checkerboardTexture.wrapT = RepeatWrapping
+	};
-        checkerboardTexture.repeat.set(100, 100)
-        const checkerboardMat = new MeshBasicMaterial({
-            map: checkerboardTexture,
-            opacity: 0.1,
-            transparent: true
-        })
 
-        const plane = new PlaneGeometry(400, 400)
+	public addPerspectiveCamera = (options: position) => {
+		this.camera = new PerspectiveCamera();
+		this.camera.position.set(options.x ?? 0, options.y ?? 2.7, options.z ?? 0);
+		this.scene.add(this.camera);
+		return this;
+	};
 
-        this.ground = new Mesh(plane, checkerboardMat)
+	public addGroundPlane = (options?: position) => {
-        this.ground.rotation.x = -Math.PI / 2
+		var planeMaterial = new MeshStandardMaterial({ color: 0x808080, side: 2, opacity: 0.5 });
-        this.ground.position.set(options?.x ?? 0, options?.y ?? 0.01, options?.z ?? 0)
+		this.ground = new Mesh(new PlaneGeometry(), planeMaterial);
-        this.ground.receiveShadow = true
+		this.ground.rotation.x = -Math.PI / 2;
-        this.scene.add(this.ground)
+		this.ground.scale.setScalar(30);
+		this.ground.position.set(options?.x ?? 0, options?.y ?? 0, options?.z ?? 0);
+		this.ground.receiveShadow = true;
+		this.scene.add(this.ground);
+		return this;
+	};
 
-        const mirror = new Reflector(plane, {
+	public addOrbitControls = (minDistance: number, maxDistance: number, autoRotate = true) => {
-            clipBias: 0.003,
+		this.orbit = new OrbitControls(this.camera, this.renderer.domElement);
-            textureWidth: window.innerWidth * window.devicePixelRatio,
+		this.orbit.minDistance = minDistance;
-            textureHeight: window.innerHeight * window.devicePixelRatio,
+		this.orbit.maxDistance = maxDistance;
-            color: 0x00bfff
+		this.orbit.autoRotate = autoRotate;
-        })
+		this.orbit.update();
-        mirror.rotateX(-Math.PI / 2)
+		return this;
-        this.scene.add(mirror)
+	};
 
-        return this
+	public addAmbientLight = (options: light) => {
-    }
+		const ambientLight = new AmbientLight(options.color, options.intensity);
+		this.scene.add(ambientLight);
+		return this;
+	};
 
-    public addOrbitControls = (minDistance: number, maxDistance: number, autoRotate = true) => {
+	public addDirectionalLight = (options: directionalLight) => {
-        this.orbit = new OrbitControls(this.camera, this.renderer.domElement)
+		const directionalLight = new DirectionalLight(options.color, options.intensity);
-        this.orbit.minDistance = minDistance + (maxDistance - minDistance) / 2
+		directionalLight.castShadow = true;
-        this.orbit.maxDistance = maxDistance
+		directionalLight.shadow.camera.top = 10;
-        this.orbit.autoRotate = autoRotate
+		directionalLight.shadow.camera.bottom = -10;
-        this.orbit.update()
+		directionalLight.shadow.camera.right = 10;
-        this.orbit.minDistance = minDistance
+		directionalLight.shadow.camera.left = -10;
-        return this
+		directionalLight.shadow.mapSize.set(4096, 4096);
-    }
 
-    public addAmbientLight = (options: light) => {
+		directionalLight.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
-        const ambientLight = new AmbientLight(options.color, options.intensity)
+		this.scene.add(directionalLight);
-        this.scene.add(ambientLight)
+		return this;
-        return this
+	};
-    }
 
-    public addDirectionalLight = (options: directionalLight) => {
+	public addGridHelper = (options: gridHelperOptions) => {
-        const directionalLight = new DirectionalLight(options.color, options.intensity)
+		this.gridHelper = new GridHelper(options.size, options.divisions);
-        directionalLight.castShadow = true
+		this.gridHelper.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
-        directionalLight.shadow.camera.top = 10
+		this.gridHelper.material.opacity = 0.2;
-        directionalLight.shadow.camera.bottom = -10
+		this.gridHelper.material.depthWrite = false;
-        directionalLight.shadow.camera.right = 10
+		this.gridHelper.material.transparent = true;
-        directionalLight.shadow.camera.left = -10
+		this.scene.add(this.gridHelper);
-        directionalLight.shadow.mapSize.set(4096, 4096)
+		return this;
+	};
 
-        directionalLight.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0)
+	public addFogExp2 = (color: ColorRepresentation, density?: number) => {
-        this.scene.add(directionalLight)
+		this.scene.fog = new FogExp2(color, density);
-        return this
+		return this;
-    }
+	};
 
-    private createCheckerboardTexture = (size: number, squares: number) => {
+	public fillParent = () => {
-        const canvas = document.createElement('canvas')
+		const parentElement = this.renderer.domElement.parentElement;
-        canvas.width = size
+		if (parentElement) {
-        canvas.height = size
+			const width = parentElement.clientWidth;
-        const context = canvas.getContext('2d')
+			const height = parentElement.clientHeight;
+			this.handleResize(width, height);
+		}
+		return this;
+	};
 
-        const squareSize = size / squares
+	public handleResize = (width = window.innerWidth, height = window.innerHeight) => {
+		this.renderer.setSize(width, height);
+		this.renderer.setPixelRatio(window.devicePixelRatio);
+		this.camera.aspect = width / height;
+		this.camera.updateProjectionMatrix();
+		return this;
+	};
 
-        for (let y = 0; y < squares; y++) {
+	public addRenderCb = (callback: Function) => {
-            for (let x = 0; x < squares; x++) {
+		this.callback = callback;
-                context!.fillStyle = (x + y) % 2 === 0 ? '#ffffff' : '#000000'
+		return this;
-                context!.fillRect(x * squareSize, y * squareSize, squareSize, squareSize)
+	};
-            }
-        }
 
-        const texture = new CanvasTexture(canvas)
+	public startRenderLoop = () => {
-        texture.wrapS = texture.wrapT = RepeatWrapping
+		this.renderer.setAnimationLoop(() => {
-        texture.anisotropy = 16
+			this.renderer.render(this.scene, this.camera);
-        return texture
+			this.orbit.update();
-    }
+			this.handleRobotShadow();
+			if (this.callback) this.callback();
+			if (!this.liveStreamTexture) return;
+		});
+		return this;
+	};
 
-    public addFogExp2 = (color: ColorRepresentation, density?: number) => {
+	public addArrowHelper = (options?: arrowOptions) => {
-        this.scene.fog = new FogExp2(color, density)
+		const dir = new Vector3(
-        return this
+			options?.direction.x ?? 0,
-    }
+			options?.direction.y ?? 0,
+			options?.direction.z ?? 0
+		);
+		const origin = new Vector3(
+			options?.origin.x ?? 0,
+			options?.origin.y ?? 0,
+			options?.origin.z ?? 0
+		);
+		const arrowHelper = new ArrowHelper(
+			dir,
+			origin,
+			options?.length ?? 1.5,
+			options?.color ?? 0xff0000
+		);
+		this.scene.add(arrowHelper);
+		return this;
+	};
 
-    public fillParent = () => {
+	private setJointValue(jointName: string, angle: number) {
-        const parentElement = this.renderer.domElement.parentElement
+		if (!this.model) return;
-        if (parentElement) {
+		if (!this.model.joints[jointName]) return;
-            const width = parentElement.clientWidth
+		this.model.joints[jointName].setJointValue(angle);
-            const height = parentElement.clientHeight
+	}
-            this.handleResize(width, height)
-        }
-        return this
-    }
 
-    public handleResize = (width = window.innerWidth, height = window.innerHeight) => {
+	isJoint = (j: URDFJoint) => j.isURDFJoint && j.jointType !== 'fixed';
-        this.renderer.setSize(width, height)
-        this.renderer.setPixelRatio(window.devicePixelRatio)
-        this.camera.aspect = width / height
-        this.camera.updateProjectionMatrix()
-        return this
-    }
 
-    public addRenderCb = (callback: () => void) => {
+	highlightLinkGeometry = (m: URDFMimicJoint, revert: boolean, material: MeshPhongMaterial) => {
-        this.callback = callback
+		const traverse = (c: any) => {
-        return this
+			if (c.type === 'Mesh') {
-    }
+				if (revert) {
+					c.material = c.__origMaterial;
+					delete c.__origMaterial;
+				} else {
+					c.__origMaterial = c.material;
+					c.material = material;
+				}
+			}
 
-    public startRenderLoop = () => {
+			if (c === m || !this.isJoint(c)) {
-        this.renderer.setAnimationLoop(() => {
+				for (let i = 0; i < c.children.length; i++) {
-            this.renderer.render(this.scene, this.camera)
+					const child = c.children[i];
-            this.orbit.update()
+					if (!child.isURDFCollider) {
-            this.handleRobotShadow()
+						traverse(c.children[i]);
-            if (this.callback) this.callback()
+					}
-            if (!this.liveStreamTexture) return
+				}
-        })
+			}
-        return this
+		};
-    }
+		traverse(m);
+	};
 
-    public addArrowHelper = (options?: arrowOptions) => {
+	public addTransformControls = (model: any) => {
-        const dir = new Vector3(
+		this.transformControl = new TransformControls(this.camera, this.renderer.domElement);
-            options?.direction.x ?? 0,
+		this.transformControl.addEventListener('dragging-changed', (event: any) => {
-            options?.direction.y ?? 0,
+			this.orbit.enabled = !event.value;
-            options?.direction.z ?? 0
+			this.isDragging = !event.value;
-        )
+		});
-        const origin = new Vector3(
+		this.transformControl.attach(model);
-            options?.origin.x ?? 0,
+		this.scene.add(this.transformControl);
-            options?.origin.y ?? 0,
+		this.transformControl.setMode('rotate');
-            options?.origin.z ?? 0
+		return this;
-        )
+	};
-        const arrowHelper = new ArrowHelper(
-            dir,
-            origin,
-            options?.length ?? 1.5,
-            options?.color ?? 0xff0000
-        )
-        this.scene.add(arrowHelper)
-        return this
-    }
 
-    private setJointValue(jointName: string, angle: number) {
+	public addModel = (model: any) => {
-        if (!this.model) return
+		this.modelGroup = new Group();
-        if (!this.model.joints[jointName]) return
+		this.modelGroup.add(model);
-        this.model.joints[jointName].setJointValue(angle)
+		this.model = model;
-    }
+		this.scene.add(this.modelGroup);
+		return this;
+	};
 
-    isJoint = (j: URDFJoint) => j.isURDFJoint && j.jointType !== 'fixed'
+	public addDragControl = (updateAngle: any) => {
+		const highlightColor = '#FFFFFF';
+		const highlightMaterial = new MeshPhongMaterial({
+			shininess: 10,
+			color: highlightColor,
+			emissive: highlightColor,
+			emissiveIntensity: 0.25
+		});
 
-    highlightLinkGeometry = (m: URDFMimicJoint, revert: boolean, material: MeshPhongMaterial) => {
+		const dragControls = new PointerURDFDragControls(
-        const traverse = (c: Object3D) => {
+			this.scene,
-            if (c.type === 'Mesh') {
+			this.camera,
-                if (revert) {
+			this.renderer.domElement
-                    c.material = c.__origMaterial
+		);
-                    delete c.__origMaterial
+		dragControls.updateJoint = (joint: URDFMimicJoint, angle: number) => {
-                } else {
+			this.setJointValue(joint.name, angle);
-                    c.__origMaterial = c.material
+			updateAngle(joint.name, angle);
-                    c.material = material
+		};
-                }
+		dragControls.onDragStart = () => {
-            }
+			this.orbit.enabled = false;
+			this.isDragging = true;
+		};
+		dragControls.onDragEnd = () => {
+			this.orbit.enabled = true;
+			this.isDragging = false;
+		};
+		dragControls.onHover = (joint: URDFMimicJoint) =>
+			this.highlightLinkGeometry(joint, false, highlightMaterial);
+		dragControls.onUnhover = (joint: URDFMimicJoint) =>
+			this.highlightLinkGeometry(joint, true, highlightMaterial);
 
-            if (c === m || !this.isJoint(c)) {
+		this.renderer.domElement.addEventListener('touchstart', (data) =>
-                for (let i = 0; i < c.children.length; i++) {
+			dragControls._mouseDown(data.touches[0])
-                    const child = c.children[i]
+		);
-                    if (!child.isURDFCollider) {
+		this.renderer.domElement.addEventListener('touchmove', (data) =>
-                        traverse(c.children[i])
+			dragControls._mouseMove(data.touches[0])
-                    }
+		);
-                }
+		this.renderer.domElement.addEventListener('touchend', (data) =>
-            }
+			dragControls._mouseUp(data.touches[0])
-        }
+		);
-        traverse(m)
+		return this;
-    }
+	};
 
-    public addTransformControls = (model: Object3D) => {
+	public toggleFog = () => {
-        this.transformControl = new TransformControls(this.camera, this.renderer.domElement)
+		this.scene.fog = this.scene.fog ? null : this.fog;
-        this.transformControl.addEventListener('dragging-changed', (event: { value: boolean }) => {
+	};
-            this.orbit.enabled = !event.value
-            this.isDragging = !event.value
-        })
-        this.transformControl.attach(model)
-        this.scene.add(this.transformControl)
-        this.transformControl.setMode('rotate')
-        return this
-    }
 
-    public addModel = (model: URDFRobot) => {
+	private handleRobotShadow = () => {
-        this.modelGroup = new Group()
+		if (this.isLoaded) return;
-        this.modelGroup.add(model)
+		const intervalId = setInterval(() => {
-        this.model = model
+			this.model?.traverse((c) => (c.castShadow = true));
-        this.scene.add(this.modelGroup)
+		}, 10);
-        return this
+		setTimeout(() => {
-    }
+			clearInterval(intervalId);
-
+		}, 1000);
-    public addDragControl = (updateAngle: (angles: Record<string, number>) => void) => {
+		this.isLoaded = true;
-        const highlightColor = '#FFFFFF'
+	};
-        const highlightMaterial = new MeshPhongMaterial({
-            shininess: 10,
-            color: highlightColor,
-            emissive: highlightColor,
-            emissiveIntensity: 0.9
-        })
-
-        const dragControls = new PointerURDFDragControls(
-            this.scene,
-            this.camera,
-            this.renderer.domElement
-        )
-        dragControls.updateJoint = (joint: URDFMimicJoint, angle: number) => {
-            this.setJointValue(joint.name, angle)
-            updateAngle({ [joint.name]: angle })
-        }
-        dragControls.onDragStart = () => {
-            this.orbit.enabled = false
-            this.isDragging = true
-        }
-        dragControls.onDragEnd = () => {
-            this.orbit.enabled = true
-            this.isDragging = false
-        }
-        dragControls.onHover = (joint: URDFMimicJoint) =>
-            this.highlightLinkGeometry(joint, false, highlightMaterial)
-        dragControls.onUnhover = (joint: URDFMimicJoint) =>
-            this.highlightLinkGeometry(joint, true, highlightMaterial)
-
-        this.renderer.domElement.addEventListener(
-            'touchstart',
-            data => dragControls._mouseDown(data.touches[0]),
-            { passive: true }
-        )
-        this.renderer.domElement.addEventListener(
-            'touchmove',
-            data => dragControls._mouseMove(data.touches[0]),
-            { passive: true }
-        )
-        this.renderer.domElement.addEventListener(
-            'touchend',
-            data => dragControls._mouseUp(data.touches[0]),
-            { passive: true }
-        )
-        return this
-    }
-
-    public toggleFog = () => {
-        this.scene.fog = this.scene.fog ? null : this.fog
-    }
-
-    private handleRobotShadow = () => {
-        if (this.isLoaded) return
-        const intervalId = setInterval(() => this.model?.traverse(c => (c.castShadow = true)), 10)
-        setTimeout(() => clearInterval(intervalId), 1000)
-        this.isLoaded = true
-    }
 }

app/src/lib/services/file-service.ts

@@ -1,53 +1,71 @@
-import { Result } from '$lib/utilities/result'
+import { Result } from '$lib/utilities/result';
-import { browser } from '$app/environment'
 
 class FileService {
-    private dbPromise: Promise<Result<IDBDatabase, string>> | null =
+	private dbName = 'fileStorageDB';
-        browser ? this.openDatabase() : null
+	private dbVersion = 1;
+	private storeName = 'files';
+	private dbPromise: Promise<Result<IDBDatabase, string>>;
 
-    private async openDatabase(): Promise<Result<IDBDatabase, string>> {
+	constructor() {
-        return new Promise(resolve => {
+		this.dbPromise = this.openDatabase();
-            const request = indexedDB.open('fileStorageDB', 1)
+	}
 
-            request.onupgradeneeded = () => {
+	private async openDatabase(): Promise<Result<IDBDatabase, string>> {
-                request.result.createObjectStore('files')
+		return new Promise((resolve) => {
-            }
+			const request = indexedDB.open(this.dbName, this.dbVersion);
-            request.onsuccess = () => resolve(Result.ok(request.result))
-            request.onerror = () => resolve(Result.err('Error opening database'))
-        })
-    }
 
-    private async getStore(mode: IDBTransactionMode): Promise<Result<IDBObjectStore, string>> {
+			request.onerror = () => resolve(Result.err('Error opening database'));
-        if (!browser || !this.dbPromise)
-            return Result.err('Not running in browser or DB not initialized')
-        const dbResult = await this.dbPromise
-        if (dbResult.isErr()) return Result.err('Database not initialized')
-        const store = dbResult.inner.transaction('files', mode).objectStore('files')
-        return Result.ok(store)
-    }
 
-    public async saveFile(key: string, file: Uint8Array): Promise<Result<IDBValidKey, string>> {
+			request.onsuccess = () => resolve(Result.ok(request.result));
-        const storeResult = await this.getStore('readwrite')
-        if (storeResult.isErr()) return Result.err('Failed to access store')
 
-        return new Promise(resolve => {
+			request.onupgradeneeded = (event) => {
-            const request = storeResult.inner.put(file, key)
+				const db = request.result;
-            request.onsuccess = () => resolve(Result.ok(request.result))
+				if (!db.objectStoreNames.contains(this.storeName)) {
-            request.onerror = () => resolve(Result.err('Failed to save file'))
+					db.createObjectStore(this.storeName);
-        })
+				}
-    }
+			};
+		});
+	}
 
-    public async getFile(key: string): Promise<Result<Uint8Array | undefined, string>> {
+	private async getStore(mode: IDBTransactionMode): Promise<Result<IDBObjectStore, string>> {
-        const storeResult = await this.getStore('readonly')
+		const dbResult = await this.dbPromise;
-        if (storeResult.isErr()) return Result.err('Failed to access store')
+		if (dbResult.isErr()) {
+			return Result.err('Database not initialized properly');
+		}
+		const db = dbResult.inner;
+		const transaction = db.transaction(this.storeName, mode);
+		return Result.ok(transaction.objectStore(this.storeName));
+	}
 
-        return new Promise(resolve => {
+	public async saveFile(key: string, file: Uint8Array): Promise<Result<IDBValidKey, string>> {
-            const request = storeResult.inner.get(key)
+		const storeResult = await this.getStore('readwrite');
-            request.onsuccess = () =>
+		if (storeResult.isErr()) {
-                resolve(request.result ? Result.ok(request.result) : Result.err('File not found'))
+			return Result.err('Failed to access object store for writing');
-            request.onerror = () => resolve(Result.err('Failed to retrieve file'))
+		}
-        })
+		const store = storeResult.inner;
-    }
+
+		return new Promise((resolve) => {
+			const request = store.put(file, key);
+			request.onsuccess = () => resolve(Result.ok(request.result));
+			request.onerror = () => resolve(Result.err('Failed to save file'));
+		});
+	}
+
+	public async getFile(key: string): Promise<Result<Uint8Array | undefined, string>> {
+		const storeResult = await this.getStore('readonly');
+		if (storeResult.isErr()) {
+			return Result.err('Failed to access object store for reading');
+		}
+		const store = storeResult.inner;
+
+		return new Promise((resolve) => {
+			const request = store.get(key);
+
+			request.onsuccess = () =>
+				resolve(request.result ? Result.ok(request.result) : Result.err('File content not found'));
+			request.onerror = () => resolve(Result.err('Failed to retrieve file'));
+		});
+	}
 }
 
-export default browser ? new FileService() : null
+export default new FileService();

app/src/lib/services/index.ts

@@ -1,2 +1,2 @@
-export { default as fileService } from './file-service'
+export { default as fileService } from './file-service';
-export { default as resultService } from './result-service'
+export { default as resultService } from './result-service';

app/src/lib/services/result-service.ts

@@ -1,19 +1,19 @@
-import { errorLogs, latestErrorLog } from '$lib/stores'
+import { errorLogs, latestErrorLog } from '$lib/stores';
-import type { Result } from '$lib/utilities'
+import type { Result } from '$lib/utilities';
 
 class ResultService {
-    public handleResult(result: Result<unknown, string>, tag?: string) {
+	public handleResult(result: Result<unknown, string>, tag?: string) {
-        if (result.isErr()) {
+		if (result.isErr()) {
-            const errorLogEntry = { tag, message: result.inner, exception: result.exception }
+			const errorLogEntry = { tag, message: result.inner, exception: result.exception };
-            latestErrorLog.set(errorLogEntry)
+			latestErrorLog.set(errorLogEntry);
-            errorLogs.update(entries => {
+			errorLogs.update((entries) => {
-                entries.push(errorLogEntry)
+				entries.push(errorLogEntry);
-                return entries
+				return entries;
-            })
+			});
-        }
+		}
 
-        return result
+		return result;
-    }
+	}
 }
 
-export default new ResultService()
+export default new ResultService();

app/src/lib/stores/analytics.ts

@@ -1,36 +1,55 @@
-import { AnalyticsData } from '$lib/platform_shared/message'
+import { type Analytics } from '$lib/types/models';
-import { writable } from 'svelte/store'
+import { writable } from 'svelte/store';
-import { socket } from './socket'
 
-const maxAnalyticsData = 100
+let analytics_data = {
+	uptime: <number[]>[],
+	free_heap: <number[]>[],
+	total_heap: <number[]>[],
+	used_heap: <number[]>[],
+	min_free_heap: <number[]>[],
+	max_alloc_heap: <number[]>[],
+	fs_used: <number[]>[],
+	fs_total: <number[]>[],
+	core_temp: <number[]>[],
+	cpu0_usage: <number[]>[],
+	cpu1_usage: <number[]>[],
+	cpu_usage: <number[]>[]
+};
+
+const maxAnalyticsData = 100;
 
 function createAnalytics() {
-    const { subscribe, update } = writable<AnalyticsData[]>([])
+	const { subscribe, update } = writable(analytics_data);
 
-    let unsubscribe: (() => void) | null = null
+	return {
-    let listenerCount = 0
+		subscribe,
-
+		addData: (content: Analytics) => {
-    const addData = (content: AnalyticsData) => {
+			update((analytics_data) => ({
-        update(data => [...data, content].slice(-maxAnalyticsData))
+				...analytics_data,
-    }
+				uptime: [...analytics_data.uptime, content.uptime].slice(-maxAnalyticsData),
-
+				free_heap: [...analytics_data.free_heap, content.free_heap / 1000].slice(-maxAnalyticsData),
-    return {
+				total_heap: [...analytics_data.total_heap, content.total_heap / 1000].slice(
-        subscribe,
+					-maxAnalyticsData
-        addData,
+				),
-        listen: () => {
+				used_heap: [
-            listenerCount++
+					...analytics_data.used_heap,
-            if (!unsubscribe) {
+					(content.total_heap - content.free_heap) / 1000
-                unsubscribe = socket.on(AnalyticsData, addData)
+				].slice(-maxAnalyticsData),
-            }
+				min_free_heap: [...analytics_data.min_free_heap, content.min_free_heap / 1000].slice(
-        },
+					-maxAnalyticsData
-        stop: () => {
+				),
-            listenerCount = Math.max(0, listenerCount - 1)
+				max_alloc_heap: [...analytics_data.max_alloc_heap, content.max_alloc_heap / 1000].slice(
-            if (listenerCount === 0 && unsubscribe) {
+					-maxAnalyticsData
-                unsubscribe()
+				),
-                unsubscribe = null
+				fs_used: [...analytics_data.fs_used, content.fs_used / 1000].slice(-maxAnalyticsData),
-            }
+				fs_total: [...analytics_data.fs_total, content.fs_total / 1000].slice(-maxAnalyticsData),
-        }
+				core_temp: [...analytics_data.core_temp, content.core_temp].slice(-maxAnalyticsData),
-    }
+				cpu0_usage: [...analytics_data.cpu0_usage, content.cpu0_usage].slice(-maxAnalyticsData),
+				cpu1_usage: [...analytics_data.cpu1_usage, content.cpu1_usage].slice(-maxAnalyticsData),
+				cpu_usage: [...analytics_data.cpu_usage, content.cpu_usage].slice(-maxAnalyticsData)
+			}));
+		}
+	};
 }
 
-export const analytics = createAnalytics()
+export const analytics = createAnalytics();

app/src/lib/stores/application.ts

@@ -1,67 +0,0 @@
-import { persistentStore } from '$lib/utilities'
-import { get, type Writable } from 'svelte/store'
-
-import Visualization from '$lib/components/Visualization.svelte'
-import Stream from '$lib/components/Stream.svelte'
-import ChartWidget from '$lib/components/widget/ChartWidget.svelte'
-
-export interface WidgetConfig {
-    id: string | number
-    component: keyof typeof WidgetComponents
-    props?: Record<string, unknown>
-}
-
-export interface WidgetContainerConfig {
-    id: string | number
-    layout?: 'row' | 'column' | 'wrap'
-    header?: string
-    widgets: Array<WidgetConfig | WidgetContainerConfig>
-}
-
-export const isWidgetConfig = (
-    widget: WidgetConfig | WidgetContainerConfig
-): widget is WidgetConfig => 'component' in widget
-
-export const WidgetComponents = {
-    Visualization,
-    Stream,
-    ChartWidget
-}
-
-interface View {
-    name: string
-    content: WidgetContainerConfig
-}
-
-const defaultViews: View[] = [
-    {
-        name: '3D representation',
-        content: {
-            id: 'root',
-            layout: 'column',
-            widgets: [{ id: 2, component: 'Visualization', props: { debug: true } }]
-        }
-    },
-    {
-        name: 'Stream',
-        content: {
-            id: 'root',
-            layout: 'column',
-            widgets: [{ id: 2, component: 'Stream' }]
-        }
-    },
-    {
-        name: 'Split screen',
-        content: {
-            id: 'root',
-            widgets: [
-                { id: 2, component: 'Stream' },
-                { id: 2, component: 'Visualization', props: { debug: true } }
-            ]
-        }
-    }
-]
-
-export const views: Writable<View[]> = persistentStore('views', defaultViews)
-
-export const selectedView = persistentStore('selected_view', get(views)[0].name)

app/src/lib/stores/featureFlags.ts

@@ -1,72 +0,0 @@
-import { notifications } from '$lib/components/toasts/notifications'
-import Kinematic from '$lib/kinematic'
-import { persistentStore } from '$lib/utilities'
-import { derived, type Writable } from 'svelte/store'
-import { resolve } from '$app/paths'
-import { socket } from '$lib/stores'
-
-let featureFlagsStore: Writable<Record<string, boolean | string>>
-
-export function useFeatureFlags() {
-    if (!featureFlagsStore) {
-        featureFlagsStore = persistentStore<Record<string, boolean | string>>('FeatureFlags', {})
-
-        socket
-            .request({ featuresDataRequest: {} })
-            .then(response => {
-                if (response.featuresDataResponse) {
-                    featureFlagsStore.set(
-                        response.featuresDataResponse as unknown as Record<string, boolean | string>
-                    )
-                } else {
-                    notifications.error('Feature flags could not be fetched', 2500)
-                }
-            })
-            .catch(() => {
-                notifications.error('Feature flags could not be fetched', 2500)
-            })
-    }
-
-    return featureFlagsStore
-}
-
-const base = resolve('/')
-
-export const variants = {
-    SPOTMICRO_ESP32: {
-        model: `${base}spot_micro.urdf.xacro`,
-        stl: `${base}stl.zip`,
-        kinematics: {
-            coxa: 0.0605,
-            coxa_offset: 0.01,
-            femur: 0.1112,
-            tibia: 0.1185,
-            L: 0.2075,
-            W: 0.078
-        }
-    },
-    SPOTMICRO_YERTLE: {
-        model: `${base}yertle.URDF`,
-        stl: `${base}URDF.zip`,
-        kinematics: {
-            coxa: 0.035,
-            coxa_offset: 0.0,
-            femur: 0.13,
-            tibia: 0.13,
-            L: 0.24,
-            W: 0.078
-        }
-    }
-}
-
-export const currentVariant = derived(useFeatureFlags(), $flagStore => {
-    const variantFlag = $flagStore['variant'] as string
-    return variantFlag && variants[variantFlag as keyof typeof variants] ?
-            variants[variantFlag as keyof typeof variants]
-        :   variants.SPOTMICRO_ESP32
-})
-
-export const currentKinematic = derived(
-    currentVariant,
-    $variant => new Kinematic($variant.kinematics)
-)

app/src/lib/stores/fullscreen.ts

@@ -1,25 +0,0 @@
-import { writable } from 'svelte/store'
-
-export const isFullscreen = writable(false)
-
-export function toggleFullscreen() {
-    isFullscreen.update(state => {
-        if (!state) document.documentElement.requestFullscreen()
-        else document.exitFullscreen()
-        return !state
-    })
-}
-
-export function enterFullscreen() {
-    if (!document.fullscreenElement) {
-        document.documentElement.requestFullscreen()
-        isFullscreen.set(true)
-    }
-}
-
-export function exitFullscreen() {
-    if (document.fullscreenElement) {
-        document.exitFullscreen()
-        isFullscreen.set(false)
-    }
-}

app/src/lib/stores/gamepad.ts

@@ -1,87 +0,0 @@
-import { readable, derived } from 'svelte/store'
-
-export type GamepadState = {
-    available: boolean
-    gamepads: Gamepad[]
-}
-
-const DEADZONE = 0.15
-const dz = (x: number) => {
-    const a = Math.abs(x)
-    if (a < DEADZONE) return 0
-    return ((a - DEADZONE) / (1 - DEADZONE)) * Math.sign(x)
-}
-
-let raf = 0
-let running = false
-
-export const gamepads = readable<GamepadState>({ available: false, gamepads: [] }, set => {
-    const update = () => {
-        const pads = navigator.getGamepads?.() ?? []
-        const list = Array.from(pads)
-            .map(p => p || null)
-            .filter(Boolean) as Gamepad[]
-        set({ available: 'getGamepads' in navigator, gamepads: list })
-        raf = requestAnimationFrame(update)
-    }
-
-    const onConnect = () => update()
-    const onDisconnect = () => update()
-    const onVis = () => {
-        if (document.hidden) {
-            running = false
-            cancelAnimationFrame(raf)
-        } else if (!running) {
-            running = true
-            raf = requestAnimationFrame(update)
-        }
-    }
-
-    window.addEventListener('gamepadconnected', onConnect)
-    window.addEventListener('gamepaddisconnected', onDisconnect)
-    document.addEventListener('visibilitychange', onVis)
-
-    running = true
-    raf = requestAnimationFrame(update)
-
-    return () => {
-        running = false
-        cancelAnimationFrame(raf)
-        window.removeEventListener('gamepadconnected', onConnect)
-        window.removeEventListener('gamepaddisconnected', onDisconnect)
-        document.removeEventListener('visibilitychange', onVis)
-    }
-})
-
-export const gamepad = derived(gamepads, s =>
-    s.available && s.gamepads.length ? s.gamepads[0] : null
-)
-
-export const hasGamepad = derived(gamepads, s => s.available && s.gamepads.length > 0)
-
-export const gamepadAxes = derived(gamepad, g => (g ? g.axes.map(dz) : [0, 0, 0, 0]))
-
-type ButtonEdge = { pressed: boolean; value: number; justPressed: boolean; justReleased: boolean }
-const prev = new Map<number, { pressed: boolean; value: number }[]>()
-
-export const gamepadButtons = derived(gamepad, g => g?.buttons ?? [])
-
-export const gamepadButtonsEdges = derived(gamepad, g => {
-    if (!g) return [] as ButtonEdge[]
-    const p = prev.get(g.index) || []
-    const out = g.buttons.map((b, i): ButtonEdge => {
-        const pr = p[i] || { pressed: false, value: 0 }
-        const pressed = !!b.pressed || b.value > 0.5
-        return {
-            pressed,
-            value: b.value,
-            justPressed: pressed && !pr.pressed,
-            justReleased: !pressed && pr.pressed
-        }
-    })
-    prev.set(
-        g.index,
-        out.map(x => ({ pressed: x.pressed, value: x.value }))
-    )
-    return out
-})

app/src/lib/stores/imu.ts

@@ -1,34 +1,36 @@
-import { writable } from 'svelte/store'
+import { type IMU } from '$lib/types/models';
-import { IMUData } from '$lib/platform_shared/message'
+import { writable } from 'svelte/store';
-import { socket } from './socket'
 
-const maxIMUData = 100
+let imu_data = {
+	x: <number[]>[],
+	y: <number[]>[],
+	z: <number[]>[],
+	imu_temp: <number[]>[],
+	altitude: <number[]>[],
+	pressure: <number[]>[],
+	bmp_temp: <number[]>[]
+};
 
-export const imu = (() => {
+const maxIMUData = 100;
-    const { subscribe, update } = writable<IMUData[]>([])
 
-    let unsubscribe: (() => void) | null = null
+function createIMU() {
-    let listenerCount = 0
+	const { subscribe, update } = writable(imu_data);
 
-    const addData = (content: IMUData) => {
+	return {
-        update(data => [...data, content].slice(-maxIMUData))
+		subscribe,
-    }
+		addData: (content: IMU) => {
+			update((imu_data) => ({
+				...imu_data,
+				x: [...imu_data.x, content.x].slice(-maxIMUData),
+				y: [...imu_data.y, content.y].slice(-maxIMUData),
+				z: [...imu_data.z, content.z].slice(-maxIMUData),
+				imu_temp: [...imu_data.imu_temp, content.imu_temp].slice(-maxIMUData),
+				altitude: [...imu_data.altitude, content.altitude].slice(-maxIMUData),
+				pressure: [...imu_data.pressure, content.pressure].slice(-maxIMUData),
+				bmp_temp: [...imu_data.bmp_temp, content.bmp_temp].slice(-maxIMUData)
+			}));
+		}
+	};
+}
 
-    return {
+export const imu = createIMU();
-        subscribe,
-        addData,
-        listen: () => {
-            listenerCount++
-            if (!unsubscribe) {
-                unsubscribe = socket.on(IMUData, addData)
-            }
-        },
-        stop: () => {
-            listenerCount = Math.max(0, listenerCount - 1)
-            if (listenerCount === 0 && unsubscribe) {
-                unsubscribe()
-                unsubscribe = null
-            }
-        }
-    }
-})()

app/src/lib/stores/index.ts

@@ -1,9 +1,4 @@
-export * from './socket-store'
+export * from './socket-store';
-export * from './logging-store'
+export * from './logging-store';
-export * from './model-store'
+export * from './model-store';
-export * from './socket'
+export * from './socket';
-export * from './fullscreen'
-export * from './telemetry'
-export * from './analytics'
-export * from './featureFlags'
-export * from './location-store'

app/src/lib/stores/lidar.ts

@@ -0,0 +1,29 @@
+import { writable } from 'svelte/store';
+
+export type LidarPoint = {
+	distance: number;
+	angle: number;
+	quality: number;
+};
+
+let lidar_data = {
+	points: <LidarPoint[]>[]
+};
+
+const maxLidarData = 600;
+
+function createLidar() {
+	const { subscribe, update } = writable(lidar_data);
+
+	return {
+		subscribe,
+		addData: (lidarPoint: LidarPoint) => {
+			update((lidar_data) => ({
+				...lidar_data,
+				points: [...lidar_data.points, lidarPoint].slice(-maxLidarData)
+			}));
+		}
+	};
+}
+
+export const lidar = createLidar();

app/src/lib/stores/location-store.ts

@@ -1,6 +0,0 @@
-import { persistentStore } from '$lib/utilities'
-import { writable } from 'svelte/store'
-import { PUBLIC_VITE_USE_HOST_NAME } from '$env/static/public'
-
-export const apiLocation =
-    PUBLIC_VITE_USE_HOST_NAME ? writable('') : persistentStore('location', '')

app/src/lib/stores/logging-store.ts

@@ -1,11 +1,11 @@
-import { writable, type Writable } from 'svelte/store'
+import { writable, type Writable } from 'svelte/store';
 
 export interface errorLog {
-    message: unknown
+	message: unknown;
-    tag?: string
+	tag?: string;
-    exception?: unknown
+	exception?: unknown;
 }
 
-export const latestErrorLog: Writable<errorLog> = writable()
+export const latestErrorLog: Writable<errorLog> = writable();
 
-export const errorLogs: Writable<errorLog[]> = writable([])
+export const errorLogs: Writable<errorLog[]> = writable([]);

app/src/lib/stores/model-store.ts

@@ -1,56 +1,37 @@
-import Kinematic from '$lib/kinematic'
+import type { ControllerInput } from '$lib/models';
-import {
+import { persistentStore } from '$lib/utilities/svelte-utilities';
-    ControllerData,
+import { writable, type Writable } from 'svelte/store';
-    KinematicData,
-    ModeData,
-    ModesEnum,
-    WalkGaitData,
-    WalkGaits
-} from '$lib/platform_shared/message'
-import { persistentStore } from '$lib/utilities/svelte-utilities'
-import { writable, type Writable } from 'svelte/store'
 
-export const emulateModel = writable(true)
+export const emulateModel = writable(true);
 
-export const jointNames = persistentStore('joint_names', <string[]>[])
+export const jointNames = persistentStore('joint_names', []);
 
-export const model = writable()
+export const model = writable();
 
-export const mode: Writable<ModeData> = writable(ModeData.create({ mode: ModesEnum.DEACTIVATED }))
+export const modes = ['deactivated', 'idle', 'calibration', 'rest', 'stand', 'crawl', 'walk'] as const;
 
-export const walkGait: Writable<WalkGaitData> = writable(
+export type Modes = (typeof modes)[number];
-    WalkGaitData.create({ gait: WalkGaits.TROT })
-)
 
-export const kinematicData = writable(KinematicData.create())
+export enum ModesEnum {
-
+	Deactivated,
-export const input: Writable<ControllerData> = writable(
+	Idle,
-    ControllerData.create({
+	Calibration,
-        left: { x: 0, y: 0 },
+	Rest,
-        right: { x: 0, y: 0 },
+	Stand,
-        height: 0.7,
+	Crawl,
-        s1: 0.5,
+	Walk
-        speed: 0.5
-    })
-)
-
-function enumToValuesAndLabels<T extends number>(enumObj: Record<string, T | string>) {
-    const entries = Object.entries(enumObj).filter(
-        ([key, v]) => typeof v === 'number' && key !== 'UNRECOGNIZED'
-    ) as [string, T][]
-
-    return {
-        values: entries.map(([, v]) => v),
-        labels: Object.fromEntries(
-            entries.map(([k, v]) => [v, k.charAt(0) + k.slice(1).toLowerCase()])
-        ) as Record<T, string>
-    }
 }
 
-const modesData = enumToValuesAndLabels<ModesEnum>(ModesEnum)
+export const mode: Writable<ModesEnum> = writable(ModesEnum.Walk);
-export const modes = modesData.values
-export const modeLabels = modesData.labels
 
-const walkGaitsData = enumToValuesAndLabels<WalkGaits>(WalkGaits)
+export const outControllerData = writable([0, 0, 0, 0, 0, 1, 0]);
-export const walkGaits = walkGaitsData.values
+
-export const walkGaitLabels = walkGaitsData.labels
+export const kinematicData = writable([0, 0, 0, 0, 1, 0]);
+
+export const input: Writable<ControllerInput> = writable({
+	left: { x: 0, y: 0 },
+	right: { x: 0, y: 0 },
+	height: 50,
+	speed: 50,
+	s1: 50
+});

app/src/lib/stores/orientation.ts

@@ -0,0 +1,27 @@
+import { readable } from 'svelte/store';
+
+export const heading = readable(0, (set) => {
+	const updateHeading = (e: any) => {
+		let alpha;
+		if (e.webkitCompassHeading) alpha = e.webkitCompassHeading;
+		else if (e.alpha) alpha = e.alpha;
+		else {
+			let q = e.target.quaternion;
+			alpha =
+				Math.atan2(2 * q[0] * q[1] + 2 * q[2] * q[3], 1 - 2 * q[1] * q[1] - 2 * q[2] * q[2]) *
+				(180 / Math.PI);
+			if (alpha < 0) alpha += 360;
+		}
+		set(alpha);
+	};
+	if ('AbsoluteOrientationSensor' in window) {
+		var sensor = new window.AbsoluteOrientationSensor({ frequency: 60 }) as any;
+		sensor.addEventListener('reading', updateHeading);
+		sensor.start();
+	} else if (window.DeviceMotionEvent) window.addEventListener('deviceorientation', updateHeading);
+
+	return () => {
+		if ('AbsoluteOrientationSensor' in window) sensor.removeEventListener('reading', updateHeading);
+		window.addEventListener('deviceorientation', updateHeading);
+	};
+});

app/src/lib/stores/socket-store.ts

@@ -1,12 +1,30 @@
-import { AnglesData } from '$lib/platform_shared/message'
+import { writable, type Writable } from 'svelte/store';
-import { writable, type Writable } from 'svelte/store'
+import { type angles } from '$lib/models';
 
-export const servoAnglesOut: Writable<AnglesData> = writable(
+export const servoAnglesOut: Writable<number[]> = writable([
-    AnglesData.create({ angles: [0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90] })
+	0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
-)
+]);
-export const servoAngles: Writable<AnglesData> = writable(
+export const servoAngles: Writable<number[]> = writable([
-    AnglesData.create({ angles: [0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90] })
+	0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
-)
+]);
+export const logs = writable([] as string[]);
+export const battery = writable({});
+export const mpu = writable({ heading: 0 });
+export const sonar = writable([0, 0]);
+export const distances = writable({});
 
-export const mpu = writable({ heading: 0 })
+export interface socketDataCollection {
-export const sonar = writable([0, 0])
+	angles: Writable<angles>;
+	logs: Writable<string[]>;
+	battery: Writable<unknown>;
+	mpu: Writable<unknown>;
+	distances: Writable<unknown>;
+}
+
+export const socketData = {
+	angles: servoAngles,
+	logs,
+	battery,
+	mpu,
+	distances
+};

app/src/lib/stores/socket.ts

@@ -1,311 +1,122 @@
-import { writable } from 'svelte/store'
+import { writable } from 'svelte/store';
-import {
-    Message,
-    CorrelationRequest,
-    CorrelationResponse,
-    protoMetadata,
-    type MessageFns
-} from '$lib/platform_shared/message'
-import * as Messages from '$lib/platform_shared/message'
-import { protoMetadata as filesystemProtoMetadata } from '$lib/platform_shared/filesystem'
 
-export const MESSAGE_TYPE_TO_KEY = new Map<MessageFns<unknown>, string>()
+const socketEvents = ['open', 'close', 'error', 'message', 'unresponsive'] as const;
-export const MESSAGE_TYPE_TO_TAG = new Map<MessageFns<unknown>, number>()
+type SocketEvent = (typeof socketEvents)[number];
-export const MESSAGE_KEY_TO_TAG = new Map<string, number>()
-export const MESSAGE_TAG_TO_KEY = new Map<number, string>()
-
-type CorrelationRequestData = Omit<CorrelationRequest, 'correlationId'>
-type PendingRequest = {
-    resolve: (response: CorrelationResponse) => void
-    reject: (error: Error) => void
-    timeoutId: ReturnType<typeof setTimeout>
-}
-
-// Combine references from both message.proto and filesystem.proto
-const combinedReferences: Record<string, MessageFns<unknown>> = {
-    ...protoMetadata.references,
-    ...filesystemProtoMetadata.references
-}
-
-const MessageType = protoMetadata.fileDescriptor.messageType?.find(
-    (msg: { name: string }) => msg.name === 'Message'
-)
-
-if (MessageType?.field) {
-    for (const field of MessageType.field) {
-        if (field.typeName) {
-            const messageFns = combinedReferences[field.typeName]
-            if (messageFns && field.jsonName && field.number) {
-                MESSAGE_TYPE_TO_KEY.set(messageFns, field.jsonName)
-                MESSAGE_TYPE_TO_TAG.set(messageFns, field.number)
-                MESSAGE_KEY_TO_TAG.set(field.jsonName, field.number)
-                MESSAGE_TAG_TO_KEY.set(field.number, field.jsonName)
-            }
-        }
-    }
-}
-
-function getNameFromMessageType<T>(event_type: MessageFns<T>): string {
-    const event = MESSAGE_TYPE_TO_KEY.get(event_type as MessageFns<unknown>)
-    if (!event) {
-        throw new Error(
-            "Event type not found in 'Message'. The MessageFns you passed doesn't correspond to any Message field."
-        )
-    }
-    return event
-}
-
-function getTagFromMessageType<T>(event_type: MessageFns<T>): number {
-    const fieldNumber = MESSAGE_TYPE_TO_TAG.get(event_type as MessageFns<unknown>)
-    if (fieldNumber === undefined) {
-        throw new Error(
-            "Tag not found in 'Message'. The MessageFns you passed doesn't correspond to any Message field."
-        )
-    }
-    return fieldNumber
-}
-
-type SocketEvent = 'open' | 'close' | 'error' | 'message' | 'unresponsive'
-
-type TaggedMessage = { tag: number; msg: Message }
-
-export const decodeMessage = (data: ArrayBuffer): TaggedMessage => {
-    const decoded = Message.decode(new Uint8Array(data))
-    const values = Object.entries(decoded).filter(([, value]) => value !== undefined)
-    if (values.length != 1) {
-        throw new Error('Message included either 0 or more than 1 data point')
-    }
-    const fieldName = values[0][0]
-    const tag = MESSAGE_KEY_TO_TAG.get(fieldName)
-    if (tag === undefined) {
-        throw new Error(`Tag not found for field: ${fieldName}`)
-    }
-    return { tag: tag, msg: decoded }
-}
-
-export const encodeMessage = (data: Message): Uint8Array<ArrayBuffer> => {
-    const encoded = Message.encode(data).finish()
-    return encoded
-}
 
 function createWebSocket() {
-    const message_listeners = new Map<number, Set<(data?: unknown) => void>>()
+	let listeners = new Map<string, Set<(data?: unknown) => void>>();
-    const event_listeners = new Map<string, Set<(data?: unknown) => void>>()
+	const { subscribe, set } = writable(false);
-    const pending_requests = new Map<number, PendingRequest>()
+	const reconnectTimeoutTime = 5000;
-    const queued_requests = new Map<
+	let unresponsiveTimeoutId: number;
-        string,
+	let reconnectTimeoutId: number;
-        {
+	let ws: WebSocket;
-            data: CorrelationRequestData
+	let socketUrl: string | URL;
-            resolve: (r: CorrelationResponse) => void
-            reject: (e: Error) => void
-        }
-    >()
-    const { subscribe, set } = writable(false)
-    const reconnectTimeoutTime = 500000
-    const requestTimeoutTime = 30000
-    let correlationIdCounter = 0
-    let unresponsiveTimeoutId: ReturnType<typeof setTimeout>
-    let reconnectTimeoutId: ReturnType<typeof setTimeout>
-    let ws: WebSocket
-    let socketUrl: string | URL
 
-    function getRequestKey(data: CorrelationRequestData): string {
+	function init(url: string | URL) {
-        return (
+		socketUrl = url;
-            Object.keys(data).find(k => data[k as keyof CorrelationRequestData] !== undefined) ??
+		connect();
-            'unknown'
+	}
-        )
-    }
 
-    function init(url: string | URL) {
+	function disconnect(reason: SocketEvent, event?: Event) {
-        socketUrl = url
+		ws.close();
-        connect()
+		set(false);
-    }
+		clearTimeout(unresponsiveTimeoutId);
+		clearTimeout(reconnectTimeoutId);
+		listeners.get(reason)?.forEach((listener) => listener(event));
+		reconnectTimeoutId = setTimeout(connect, reconnectTimeoutTime);
+	}
 
-    function disconnect(reason: SocketEvent, event?: Event) {
+	function connect() {
-        ws.close()
+		ws = new WebSocket(socketUrl);
-        set(false)
+		ws.onopen = (ev) => {
-        clearTimeout(unresponsiveTimeoutId)
+			set(true);
-        clearTimeout(reconnectTimeoutId)
+			clearTimeout(reconnectTimeoutId);
-        event_listeners.get(reason)?.forEach(listener => listener(event))
+			listeners.get('open')?.forEach((listener) => listener(ev));
-        reconnectTimeoutId = setTimeout(connect, reconnectTimeoutTime)
+			for (const event of listeners.keys()) {
-    }
+				if (socketEvents.includes(event as SocketEvent)) continue;
+				subscribeToEvent(event);
+			}
+		};
+		ws.onmessage = (message) => {
+			resetUnresponsiveCheck();
+			let data = message.data;
+			if (data instanceof ArrayBuffer) {
+				listeners.get('binary')?.forEach((listener) => listener(data));
+				return;
+			}
+			data = data.substring(1);
 
-    function connect() {
+			if (!data) return;
-        ws = new WebSocket(socketUrl)
-        ws.binaryType = 'arraybuffer'
-        ws.onopen = ev => {
-            ping()
-            set(true)
-            clearTimeout(reconnectTimeoutId)
-            resubscribeAll()
-            flushQueuedRequests()
-            event_listeners.get('open')?.forEach(listener => listener(ev))
-        }
-        ws.onmessage = frame => {
-            resetUnresponsiveCheck()
 
-            for (const [correlationId, pending] of pending_requests) {
+			let event = data.substring(data.indexOf('/') + 1, data.indexOf('['));
-                clearTimeout(pending.timeoutId)
+			let payload = data.substring(data.indexOf('[') + 1, data.lastIndexOf(']'));
-                pending.timeoutId = setTimeout(() => {
-                    pending_requests.delete(correlationId)
-                    pending.reject(new Error(`Request timeout (id: ${correlationId})`))
-                }, requestTimeoutTime)
-            }
 
-            const { tag, msg } = decodeMessage(frame.data)
+			try {
-            if (msg.correlationResponse) {
+				payload = JSON.parse(payload);
-                const pending = pending_requests.get(msg.correlationResponse.correlationId)
+			} catch (error) {}
-                if (pending) {
+			if (event) listeners.get(event)?.forEach((listener) => listener(payload));
-                    clearTimeout(pending.timeoutId)
+		};
-                    pending_requests.delete(msg.correlationResponse.correlationId)
+		ws.onerror = (ev) => disconnect('error', ev);
-                    pending.resolve(msg.correlationResponse)
+		ws.onclose = (ev) => disconnect('close', ev);
-                }
+	}
-                return
-            }
-            if (tag) {
-                const key = MESSAGE_TAG_TO_KEY.get(tag)!
-                message_listeners
-                    .get(tag)
-                    ?.forEach(listener => listener(msg[key as keyof typeof msg]))
-            }
-        }
-        ws.onerror = ev => disconnect('error', ev)
-        ws.onclose = ev => disconnect('close', ev)
-    }
 
-    function unsubscribe<MT>(event_type: MessageFns<MT>, listener: (data: MT) => void) {
+	function unsubscribe(event: string, listener?: (data: any) => void) {
-        const tag = getTagFromMessageType(event_type)
+		let eventListeners = listeners.get(event);
-        const message_listeners_totag = message_listeners.get(tag)
+		if (!eventListeners) return;
-        if (!message_listeners_totag) return
 
-        message_listeners_totag?.delete(listener as (data?: unknown) => void)
+		if (!eventListeners.size) {
-        if (message_listeners_totag.size == 0) {
+			unsubscribeToEvent(event);
-            unsubscribeToMessageFromServer(event_type)
+		}
-        }
+		if (listener) {
-    }
+			eventListeners?.delete(listener);
+		} else {
+			listeners.delete(event);
+		}
+	}
 
-    function unsubscribeEvent(event_type: SocketEvent, listener: (data: unknown) => void) {
+	function resetUnresponsiveCheck() {
-        const message_listeners_totag = event_listeners.get(event_type)
+		clearTimeout(unresponsiveTimeoutId);
-        if (!message_listeners_totag) return
+		unresponsiveTimeoutId = setTimeout(() => disconnect('unresponsive'), reconnectTimeoutTime);
+	}
 
-        message_listeners_totag?.delete(listener)
+	function sendEvent(event: string, data: unknown) {
-    }
+		if (!ws || ws.readyState !== WebSocket.OPEN) return;
+		ws.send(`2/${event}[${JSON.stringify(data)}]`);
+	}
 
-    function resetUnresponsiveCheck() {
+	function unsubscribeToEvent(event: string) {
-        clearTimeout(unresponsiveTimeoutId)
+		if (!ws || ws.readyState !== WebSocket.OPEN) return;
-        unresponsiveTimeoutId = setTimeout(() => disconnect('unresponsive'), reconnectTimeoutTime)
+		ws.send('1/' + event);
-    }
+	}
 
-    function emit<T>(event: MessageFns<T>, data: T) {
+	function subscribeToEvent(event: string) {
-        if (!ws || ws.readyState !== WebSocket.OPEN) return
+		if (!ws || ws.readyState !== WebSocket.OPEN) return;
-        const type = getNameFromMessageType(event)
+		ws.send('0/' + event);
-        const wsm = Message.create() as Record<string, unknown>
+	}
-        wsm[type] = data
-        send(wsm as Message)
-    }
 
-    function unsubscribeToMessageFromServer<T>(event_type: MessageFns<T>) {
+	return {
-        if (!ws || ws.readyState !== WebSocket.OPEN) return
+		subscribe,
-        const unsub_msg = Messages.UnsubscribeNotification.create({
+		sendEvent,
-            tag: getTagFromMessageType(event_type)
+		init,
-        })
+		on: <T>(event: string, listener: (data: T) => void): (() => void) => {
-        send(Message.create({ unsubNotif: unsub_msg }))
+			let eventListeners = listeners.get(event);
-    }
+			if (!eventListeners) {
+				if (!socketEvents.includes(event as SocketEvent)) {
+					subscribeToEvent(event);
+				}
+				eventListeners = new Set();
+				listeners.set(event, eventListeners);
+			}
+			eventListeners.add(listener as (data: any) => void);
 
-    function subscribeToEvent<T>(event_type: MessageFns<T>) {
+			return () => {
-        if (!ws || ws.readyState !== WebSocket.OPEN) return
+				unsubscribe(event, listener);
-        const sub_msg = Messages.SubscribeNotification.create({
+			};
-            tag: getTagFromMessageType(event_type)
+		},
-        })
+		off: (event: string, listener?: (data: any) => void) => {
-        send(Message.create({ subNotif: sub_msg }))
+			unsubscribe(event, listener);
-    }
+		}
-
+	};
-    function resubscribeAll() {
-        for (const tag of message_listeners.keys()) {
-            const sub_msg = Messages.SubscribeNotification.create({ tag })
-            send(Message.create({ subNotif: sub_msg }))
-        }
-    }
-
-    function send(data: Message) {
-        if (!ws || ws.readyState !== WebSocket.OPEN) return
-        const encoded = encodeMessage(data)
-        ws.send(encoded)
-    }
-
-    function ping() {
-        send(Message.create({ pingmsg: {} }))
-    }
-
-    function request(
-        data: CorrelationRequestData,
-        resolve: (r: CorrelationResponse) => void,
-        reject: (e: Error) => void
-    ) {
-        const correlationId = ++correlationIdCounter
-        const timeoutId = setTimeout(() => {
-            pending_requests.delete(correlationId)
-            reject(new Error(`Request timeout (id: ${correlationId})`))
-        }, requestTimeoutTime)
-
-        pending_requests.set(correlationId, { resolve, reject, timeoutId })
-
-        const request = CorrelationRequest.create({ correlationId, ...data })
-        send(Message.create({ correlationRequest: request }))
-    }
-
-    function flushQueuedRequests() {
-        for (const [, { data, resolve, reject }] of queued_requests) {
-            request(data, resolve, reject)
-        }
-        queued_requests.clear()
-    }
-
-    return {
-        subscribe,
-        emit,
-        init,
-        on: <MT>(event_type: MessageFns<MT>, listener: (data: MT) => void): (() => void) => {
-            const tag = getTagFromMessageType(event_type)
-
-            let message_listeners_totag = message_listeners.get(tag)
-            if (!message_listeners_totag) {
-                message_listeners_totag = new Set()
-                message_listeners.set(tag, message_listeners_totag)
-                subscribeToEvent(event_type)
-            }
-            message_listeners_totag.add(listener as (data: unknown) => void)
-
-            return () => {
-                unsubscribe(event_type, listener)
-            }
-        },
-        onEvent: (event_type: SocketEvent, listener: (data: unknown) => void): (() => void) => {
-            let listeners = event_listeners.get(event_type)
-            if (!listeners) {
-                listeners = new Set()
-                event_listeners.set(event_type, listeners)
-            }
-            listeners.add(listener)
-            return () => {
-                unsubscribeEvent(event_type, listener)
-            }
-        },
-        request: (data: CorrelationRequestData): Promise<CorrelationResponse> => {
-            return new Promise((resolve, reject) => {
-                if (ws && ws.readyState === WebSocket.OPEN) {
-                    request(data, resolve, reject)
-                } else {
-                    const key = getRequestKey(data)
-                    const existing = queued_requests.get(key)
-                    if (existing) {
-                        existing.reject(new Error('Request superseded by newer request'))
-                    }
-                    queued_requests.set(key, { data, resolve, reject })
-                }
-            })
-        }
-    }
 }
 
-export const socket = createWebSocket()
+export const socket = createWebSocket();

app/src/lib/stores/telemetry.ts

@@ -1,33 +1,45 @@
-import { DownloadOTAData, RSSIData } from '$lib/platform_shared/message'
+import type { Battery, DownloadOTA } from '$lib/types/models';
-import { writable } from 'svelte/store'
+import { writable } from 'svelte/store';
 
-type telemetry_data_type = {
+let telemetry_data = {
-    rssi: RSSIData
+	rssi: {
-    download_ota: DownloadOTAData
+		rssi: 0
-}
+	},
-const telemetry_data: telemetry_data_type = {
+	battery: {
-    rssi: RSSIData.create(),
+		voltage: 100,
-    download_ota: DownloadOTAData.create()
+		current: false
-} // Note: perhaps init these as null instead of an undefined create()
+	},
+	download_ota: {
+		status: 'none',
+		progress: 0,
+		error: ''
+	}
+};
 
 function createTelemetry() {
-    const { subscribe, update } = writable(telemetry_data)
+	const { subscribe, set, update } = writable(telemetry_data);
 
-    return {
+	return {
-        subscribe,
+		subscribe,
-        setRSSI: (data: RSSIData) => {
+		setRSSI: (data: number) => {
-            update(telemetry_data => {
+			update((telemetry_data) => ({
-                telemetry_data.rssi = data
+				...telemetry_data,
-                return telemetry_data
+				rssi: { rssi: data }
-            })
+			}));
-        },
+		},
-        setDownloadOTA: (data: DownloadOTAData) => {
+		setBattery: (data: Battery) => {
-            update(telemetry_data => {
+			update((telemetry_data) => ({
-                telemetry_data.download_ota = data
+				...telemetry_data,
-                return telemetry_data
+				battery: { voltage: data.voltage, current: data.current }
-            })
+			}));
-        }
+		},
-    }
+		setDownloadOTA: (data: DownloadOTA) => {
+			update((telemetry_data) => ({
+				...telemetry_data,
+				download_ota: { status: data.status, progress: data.progress, error: data.error }
+			}));
+		}
+	};
 }
 
-export const telemetry = createTelemetry()
+export const telemetry = createTelemetry();

app/src/lib/stores/user.ts

@@ -0,0 +1,55 @@
+import { writable } from 'svelte/store';
+import { goto } from '$app/navigation';
+import { jwtDecode } from 'jwt-decode';
+
+export type userProfile = {
+	username: string;
+	admin: boolean;
+	bearer_token: string;
+};
+
+type decodedJWT = {
+	username: string;
+	admin: boolean;
+};
+
+let empty = {
+	username: '',
+	admin: false,
+	bearer_token: ''
+};
+
+function createStore() {
+	const { subscribe, set } = writable(empty);
+
+	// retrieve store from sessionStorage / localStorage if available
+	const userdata = localStorage.getItem('user');
+	if (userdata) {
+		set(JSON.parse(userdata));
+	}
+
+	return {
+		subscribe,
+		init: (access_token: string) => {
+			const decoded: decodedJWT = jwtDecode(access_token);
+			const userdata = {
+				bearer_token: access_token,
+				username: decoded.username,
+				admin: decoded.admin
+			};
+			set(userdata);
+			// persist store in sessionStorage / localStorage
+			localStorage.setItem('user', JSON.stringify(userdata));
+		},
+		invalidate: () => {
+			console.log('Log out user');
+			set(empty);
+			// remove localStorage "user"
+			localStorage.removeItem('user');
+			// redirect to login page
+			goto('/');
+		}
+	};
+}
+
+export const user = createStore();

app/src/lib/types/mathutils.d.ts

@@ -1,17 +0,0 @@
-declare module 'three/src/math/MathUtils' {
-    export function generateUUID(): string
-    export function clamp(value: number, min: number, max: number): number
-    export function euclideanModulo(n: number, m: number): number
-    export function mapLinear(x: number, a1: number, a2: number, b1: number, b2: number): number
-    export function lerp(x: number, y: number, t: number): number
-    export function smoothstep(x: number, min: number, max: number): number
-    export function smootherstep(x: number, min: number, max: number): number
-    export function randInt(low: number, high: number): number
-    export function randFloat(low: number, high: number): number
-    export function randFloatSpread(range: number): number
-    export function degToRad(degrees: number): number
-    export function radToDeg(radians: number): number
-    export function isPowerOfTwo(value: number): boolean
-    export function ceilPowerOfTwo(value: number): number
-    export function floorPowerOfTwo(value: number): number
-}

app/src/lib/types/models.ts

@@ -1,83 +1,143 @@
-export enum MessageTopic {
+export type WifiStatus = {
-    imu = 'imu',
+	status: number;
-    imuCalibrate = 'imuCalibrate',
+	local_ip: string;
-    mode = 'mode',
+	mac_address: string;
-    input = 'input',
+	rssi: number;
-    analytics = 'analytics',
+	ssid: string;
-    position = 'position',
+	bssid: string;
-    angles = 'angles',
+	channel: number;
-    i2cScan = 'i2cScan',
+	subnet_mask: string;
-    peripheralSettings = 'peripheralSettings',
+	gateway_ip: string;
-    otastatus = 'otastatus',
+	dns_ip_1: string;
-    gait = 'walk_gait',
+	dns_ip_2?: string;
-    servoState = 'servoState',
+};
-    servoPWM = 'servoPWM',
-    WiFiSettings = 'WiFiSettings',
-    sonar = 'sonar',
-    rssi = 'rssi'
-}
 
-export type vector = { x: number; y: number }
+export type WifiSettings = {
+	hostname: string;
+	priority_RSSI: boolean;
+	wifi_networks: KnownNetworkItem[];
+};
 
-export type GithubRelease = {
+export type KnownNetworkItem = {
-    message: string
+	ssid: string;
-    tag_name: string
+	password: string;
-    assets: Array<{
+	static_ip_config: boolean;
-        name: string
+	local_ip?: string;
-        browser_download_url: string
+	subnet_mask?: string;
-    }>
+	gateway_ip?: string;
-}
+	dns_ip_1?: string;
+	dns_ip_2?: string;
+};
+
+export type NetworkItem = {
+	rssi: number;
+	ssid: string;
+	bssid: string;
+	channel: number;
+	encryption_type: number;
+};
+
+export type ApStatus = {
+	status: number;
+	ip_address: string;
+	mac_address: string;
+	station_num: number;
+};
+
+export type ApSettings = {
+	provision_mode: number;
+	ssid: string;
+	password: string;
+	channel: number;
+	ssid_hidden: boolean;
+	max_clients: number;
+	local_ip: string;
+	gateway_ip: string;
+	subnet_mask: string;
+};
+
+export type NTPStatus = {
+	status: number;
+	utc_time: string;
+	local_time: string;
+	server: string;
+	uptime: number;
+};
+
+export type RSSI = {
+	rssi: number;
+	ssid: string;
+};
+
+export type Battery = {
+	voltage: number;
+	current: boolean;
+};
+
+export type DownloadOTA = {
+	status: string;
+	progress: number;
+	error: string;
+};
+
+export type NTPSettings = {
+	enabled: boolean;
+	server: string;
+	tz_label: string;
+	tz_format: string;
+};
+
+export type Analytics = {
+	max_alloc_heap: number;
+	psram_size: number;
+	free_psram: number;
+	free_heap: number;
+	total_heap: number;
+	min_free_heap: number;
+	core_temp: number;
+	fs_total: number;
+	fs_used: number;
+	uptime: number;
+	cpu0_usage: number;
+	cpu1_usage: number;
+	cpu_usage: number;
+};
 
 export type Rssi = {
-    rssi: number
+	rssi: number;
-    ssid: string
+	ssid: string;
-}
+};
 
-export type Servo = {
+export type StaticSystemInformation = {
-    name: string
+	esp_platform: string;
-    channel: number
+	firmware_version: string;
-    inverted: boolean
+	cpu_freq_mhz: number;
-    angle: number
+	cpu_type: string;
-    center_angle: number
+	cpu_rev: number;
-}
+	cpu_cores: number;
+	sketch_size: number;
+	free_sketch_space: number;
+	sdk_version: string;
+	arduino_version: string;
+	flash_chip_size: number;
+	flash_chip_speed: number;
+	cpu_reset_reason: string;
+};
 
-export type ServoConfiguration = {
+export type SystemInformation = Analytics & StaticSystemInformation;
-    is_active: boolean
-    servo_pwm_frequency: number
-    servo_oscillator_frequency: number
-    servos: Servo[]
-}
 
-export interface Result {
+export type IMU = {
-    success: boolean
+	x: number;
-    error?: string
+	y: number;
-}
+	z: number;
+	imu_temp: number;
+	altitude: number;
+	bmp_temp: number;
+	pressure: number;
+};
 
-export interface DataResult extends Result {
+export interface I2CDevice {
-    data?: Uint8Array
+    address: number;
-}
+    part_number: string;
-
+    name: string;
-export interface FileInfo {
+};
-    name: string
-    size: number
-}
-
-export interface DirectoryInfo {
-    name: string
-}
-
-export interface ListResult extends Result {
-    files: FileInfo[]
-    directories: DirectoryInfo[]
-}
-
-export interface TransferProgress {
-    transferId: number
-    bytesTransferred: number
-    totalBytes: number
-    chunksCompleted: number
-    totalChunks: number
-    percentage: number
-}
-
-export type ProgressCallback = (progress: TransferProgress) => void

app/src/lib/types/uzip.d.ts

@@ -1,14 +0,0 @@
-declare module 'uzip' {
-    interface UZIP {
-        parse(data: Uint8Array | ArrayBuffer): Record<string, Uint8Array>
-        compress(data: Record<string, Uint8Array>): Uint8Array | ArrayBuffer
-        compressRaw(data: Uint8Array | ArrayBuffer): Uint8Array | ArrayBuffer
-        decompress(data: Uint8Array | ArrayBuffer): Record<string, Uint8Array>
-        decompressRaw(data: Uint8Array | ArrayBuffer): Uint8Array | ArrayBuffer
-        encode(data: Record<string, Uint8Array>): Uint8Array | ArrayBuffer
-        decode(data: Uint8Array | ArrayBuffer): Record<string, Uint8Array>
-    }
-
-    const uzip: UZIP
-    export default uzip
-}

app/src/lib/utilities/buffer-utilities.ts

@@ -1,15 +1,15 @@
-export class Throttler {
+export class throttler {
-    private _throttlePause: boolean
+	private _throttlePause: boolean;
-    constructor() {
+	constructor() {
-        this._throttlePause = false
+		this._throttlePause = false;
-    }
+	}
-    throttle = (callback: () => void, time: number) => {
+	throttle = (callback: Function, time: number) => {
-        if (this._throttlePause) return
+		if (this._throttlePause) return;
 
-        this._throttlePause = true
+		this._throttlePause = true;
-        setTimeout(() => {
+		setTimeout(() => {
-            callback()
+			callback();
-            this._throttlePause = false
+			this._throttlePause = false;
-        }, time)
+		}, time);
-    }
+	};
 }

app/src/lib/utilities/color-utilities.ts

@@ -1,6 +0,0 @@
-export const daisyColor = (name: string, opacity: number = 100) => {
-    const color = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
-    if (opacity >= 100) return color
-    const alpha = Math.min(Math.max(opacity, 0), 100) / 100
-    return `${color.replace(/(\/\s*\d+(\.\d+)?\))|\)$/, '')} / ${alpha})`
-}