Controll Stuff

package.json

@@ -33,6 +33,7 @@
 	"dependencies": {
 		"@types/three": "^0.153.0",
 		"postcss": "^8.4.25",
+		"postcss-nesting": "^12.0.0",
 		"sass": "^1.63.6",
 		"svelte-cubed": "^0.2.1",
 		"three": "^0.154.0"

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   postcss:
     specifier: ^8.4.25
     version: 8.4.25
+  postcss-nesting:
+    specifier: ^12.0.0
+    version: 12.0.0(postcss@8.4.25)
   sass:
     specifier: ^1.63.6
     version: 1.63.6
@@ -89,6 +92,15 @@ packages:
       '@jridgewell/trace-mapping': 0.3.18
     dev: true
 
+  /@csstools/selector-specificity@3.0.0(postcss-selector-parser@6.0.13):
+    resolution: {integrity: sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      postcss-selector-parser: ^6.0.13
+    dependencies:
+      postcss-selector-parser: 6.0.13
+    dev: false
+
   /@esbuild/android-arm64@0.18.11:
     resolution: {integrity: sha512-snieiq75Z1z5LJX9cduSAjUr7vEI1OdlzFPMw0HH5YI7qQHDd3qs+WZoMrWYDsfRJSq36lIA6mfZBkvL46KoIw==}
     engines: {node: '>=12'}
@@ -842,7 +854,6 @@ packages:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /debug@4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
@@ -1540,6 +1551,17 @@ packages:
       yaml: 1.10.2
     dev: true
 
+  /postcss-nesting@12.0.0(postcss@8.4.25):
+    resolution: {integrity: sha512-knqwW65kxssmyIFadRSimaiRyLVRd0MdwfabesKw6XvGLwSOCJ+4zfvNQQCOOYij5obwpZzDpODuGRv2PCyiUw==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      '@csstools/selector-specificity': 3.0.0(postcss-selector-parser@6.0.13)
+      postcss: 8.4.25
+      postcss-selector-parser: 6.0.13
+    dev: false
+
   /postcss-safe-parser@6.0.0(postcss@8.4.25):
     resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
     engines: {node: '>=12.0'}
@@ -1564,7 +1586,6 @@ packages:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
-    dev: true
 
   /postcss@8.4.25:
     resolution: {integrity: sha512-7taJ/8t2av0Z+sQEvNzCkpDynl0tX3uJMCODi6nT3PfASC7dYCWV9aQ+uiCf+KBD4SEFcu+GvJdGdwzQ6OSjCw==}
@@ -1976,7 +1997,6 @@ packages:
 
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-    dev: true
 
   /vite@4.4.2(sass@1.63.6):
     resolution: {integrity: sha512-zUcsJN+UvdSyHhYa277UHhiJ3iq4hUBwHavOpsNUGsTgjBeoBlK8eDt+iT09pBq0h9/knhG/SPrZiM7cGmg7NA==}

src/lib/Gyro.svelte

@@ -1,26 +1,13 @@
 <script lang="ts">
     import * as Three from 'three';
     import * as SC from 'svelte-cubed';
+    import {apply_direction, type Directions} from './Utils';
 
-    export let config: Config;
+    export let config: Directions;
 
-    type Config = {
+    $: vec = apply_direction(config);
-        directionX: number,
-        directionY: number,
-        directionZ: number,
-    }
-
-    function to_rad(degree: number): number {
-        return (Math.PI / 180) * degree;
-    }
-
-    $: vec = new Three.Vector3(1,0,0)
-    .applyAxisAngle(new Three.Vector3(1, 0, 0), to_rad(config.directionX))
-    .applyAxisAngle(new Three.Vector3(0, 1, 0), to_rad(config.directionY))
-    .applyAxisAngle(new Three.Vector3(0, 0, 1), to_rad(config.directionZ));
 
     const origin = new Three.Vector3(0,0,0);
-
 </script>
 
 <div class="gyro">

src/lib/Requests.ts

@@ -23,7 +23,11 @@ class RequestsClass {
 
     animations = {
         list: (): Promise<AnimationBase[]> => this._get("animations"),
-        toggle: (name: string): Promise<void> => this._get(`toggle/${name}`)
+        toggle: (name: string): Promise<void> => this._get(`toggle/${name}`),
+        //TODO cahnge any
+        add: (data: any): Promise<void> => this._post('animation', data),
+        remove: (name: string): Promise<void> => this._get(`delete/${name}`),
+        get: (name: string): Promise<any> => this._get(`get/${name}`),
     }
     
     active(): Promise<ActiveAnimations> {

src/lib/Utils.ts

@@ -0,0 +1,18 @@
+import * as Three from 'three';
+
+export type Directions = {
+    directionX: number,
+    directionY: number,
+    directionZ: number,
+};
+
+function to_rad(degree: number): number {
+    return (Math.PI / 180) * degree;
+}
+export function apply_direction(direction: Directions, _vector?: Three.Vector3): Three.Vector3 {
+    const vector = _vector ?? new Three.Vector3(1,0,0);
+    return vector
+    .applyAxisAngle(new Three.Vector3(1, 0, 0), to_rad(direction.directionX))
+    .applyAxisAngle(new Three.Vector3(0, 1, 0), to_rad(direction.directionY))
+    .applyAxisAngle(new Three.Vector3(0, 0, 1), to_rad(direction.directionZ));
+}

src/routes/+page.svelte

@@ -1,19 +1,34 @@
 <script lang="ts">
-    import { onMount } from "svelte";
+    import { onDestroy, onMount } from "svelte";
     import { Requests, type AnimationBase } from '$lib/Requests';
 
     let animations = new Promise<AnimationBase[]>(() => {});
     let active = new Promise<string[]>(() => {});
 
+    let interval: number;
+
     onMount(async () => {
         active = Promise.resolve((await Requests.active()).active_animations);
         animations = Requests.animations.list();
+        interval = setInterval(async () => {
+            active = Promise.resolve((await Requests.active()).active_animations);
+        }, 5000);
+    });
+
+    onDestroy(async () => {
+        clearInterval(interval);
     });
 
     async function toggle(name: string) {
         await Requests.animations.toggle(name)
         active = Promise.resolve((await Requests.active()).active_animations);
     }
+    async function remove(name: string) {
+        animations = new Promise(() => {});
+        await Requests.animations.remove(name)
+        active = Promise.resolve((await Requests.active()).active_animations);
+        animations = Requests.animations.list();
+    }
 </script>
 
 {#await animations}
@@ -22,21 +37,62 @@
     {#await active then activeList }
         <ul>
             {#each data as item }
-                <li>
+                <li class:active={activeList.includes(item.name)}>
-                    <span style={`color: ${activeList.includes(item.name) ? 'green' : 'red'};`}>
+                    <button on:click={() => toggle(item.name)} class="name">
-                        {item.name}
+                        <span>
-                    </span>
+                            {item.name}
-                    <button on:click={() => toggle(item.name)}>
+                        </span>
-                        toggle
                     </button>
-                    <a href="/ani/edit?id={item.id}">
+                    <a href="/ani/edit?name={item.name}">
                         Edit
                     </a>
+                    <button on:click={() => remove(item.name)} class="red">
+                        Remove
+                    </button>
                 </li>
             {/each}
         </ul>
     {/await}
-    <a href="/ani/new">
-        new
-    </a>
 {/await}
+
+<style lang="post">
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    ul li.active {
+        box-shadow: 0 0 8px 2px #00ff00;
+    }
+    ul li {
+        margin: 20px;
+        padding: 20px;
+        border-radius: 20px;
+        box-shadow: 0 0 8px 2px #2222;
+    }
+    ul li span {
+        display: block;
+    }
+    ul li button {
+        border: none;
+        background: none;
+        cursor: pointer;
+    }
+    ul li button.name {
+        display: block;
+        width: 100%;
+        font-size: 2em;
+        height: 2em;
+    }
+    ul li a {
+        text-decoration: none;
+        color: black;
+    }
+    .red {
+        color: red;
+    }
+
+</style>

src/routes/Header.svelte

@@ -13,11 +13,32 @@
                 Configuration
             </a>
         </li>
+        <li>
+            <a href="/ani/new">
+                New
+            </a>
+        </li>
     </ul>
 </header>
 
 <style lang="post">
     header {
-
+        margin: 0;
+        margin-bottom: 20px;
+        background: white;
+        box-shadow: 0 5px 8px 2px #2222;
+    }
+    header ul {
+        margin: 0;
+        padding: 10px;
+        list-style: none;
+    }
+    header ul li {
+        display: inline;
+    }
+    header ul li a {
+        text-decoration: none;
+        color: black;
+        font-size: 20px;
     }
 </style>

src/routes/ani/DisplayData.svelte

@@ -0,0 +1,112 @@
+<script lang="ts" context="module">
+    export type LigthSetting = {
+        start?: number,
+        end?: number,
+        tags?: string,
+        r: number,
+        b: number,
+        g: number,
+    }
+</script>
+<script lang="ts">
+    import * as Three from 'three';
+    import * as SC from 'svelte-cubed';
+    import { onMount } from 'svelte';
+    import { setStore } from '$lib/store';
+	import { apply_direction } from '$lib/Utils';
+
+    export let frames: LigthSetting[];
+
+    type Led = {
+        tags: string[]
+        pos: Three.Vector3,
+    }
+
+    let leds: Led[] = [];
+    let avg: Three.Vector3;
+    let cam: Three.Vector3;
+
+    onMount(async () => {
+        await setStore.getData();
+        let set = await $setStore;
+
+        let pos = new Three.Vector3(0, 0, 0);
+        avg = new Three.Vector3(0, 0, 0);
+        cam = new Three.Vector3(0, 0, 0);
+        let avgdir = new Three.Vector3(0, 0, 0);
+        for (let config of set) {
+            let direction = apply_direction(config);
+            for (let i = 0; i < config.ledcount; i++) {
+                leds.push({
+                    tags: config.tags === "" ? [] : config.tags.split(','),
+                    pos: new Three.Vector3(pos.x, pos.y, pos.z),
+                });
+                pos.add(direction);
+                avg.add(pos);
+                avgdir.add(direction);
+            }
+        }
+        avg = avg.multiplyScalar(1/leds.length);
+        avgdir = avgdir.multiplyScalar(1/leds.length);
+        let temp = avgdir.cross(new Three.Vector3(-1, -1, -1)).normalize().multiplyScalar(50);
+        cam = avg.clone().add(temp);
+        leds = leds;
+    });
+
+    function apply(leds: Led[], settings: LigthSetting[]): Three.MeshStandardMaterial[] {
+        let colors: Three.MeshStandardMaterial[] = new Array(leds.length);
+        
+        for (let i = 0; i < leds.length; i++) {
+            colors[i] = new Three.MeshStandardMaterial({color: 0x000000});
+        }
+
+        for (let set of settings) {
+            let mat = new Three.MeshStandardMaterial({color: new Three.Color(set.r, set.g, set.b) })
+            let tags = set.tags ? set.tags === "" ? [] : set.tags.split(',') : [];
+            if (tags.length > 0) {
+                for (let i = 0; i < leds.length; i++) {
+                    for (let tag of tags) {
+                        if (leds[i].tags.includes(tag)) {
+                            colors[i] = mat;
+                        }
+                    }
+                }
+            } else {
+                if (set.start !== undefined && set.end !== undefined) {
+                    for (let i = set.start; i < set.end; i++) {
+                        colors[i] = mat;
+                    }
+                }
+            }
+        }
+        return colors;
+    }
+
+    $: colors = apply(leds, frames);
+
+</script>
+
+{#if leds.length > 0}
+    <div>
+        <SC.Canvas antialias background={new Three.Color('papayawhip')}>
+            {#each colors as color,i }
+                <SC.Mesh 
+                    scale={0.8}
+                    geometry={new Three.BoxGeometry()} 
+                    position={[leds[i].pos.x, leds[i].pos.y, leds[i].pos.z]} 
+                    material={color} />
+            {/each}
+            <SC.PerspectiveCamera position={[cam.x, cam.y, cam.z]} target={[avg.x, avg.y, avg.z]} />
+            <SC.OrbitControls target={[avg.x, avg.y, avg.z]} />
+            <SC.AmbientLight intensity={1} />
+        </SC.Canvas>
+    </div>
+{/if}
+
+<style lang="post">
+    div {
+        width: 400px;
+        height: 400px;
+        position: relative;
+    }
+</style>

src/routes/ani/edit/+page.svelte

@@ -0,0 +1,252 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { Requests } from '$lib/Requests';
+	import { onMount } from 'svelte';
+	import DisplayData from '../DisplayData.svelte';
+
+	type LigthSetting = {
+		start?: number;
+		end?: number;
+		tags?: string;
+		r: number;
+		b: number;
+		g: number;
+	};
+	type KeyFrame = {
+		duration: number;
+		settings: LigthSetting[];
+	};
+	type Animation = {
+		keyFrames: KeyFrame[];
+		priority?: number;
+		name: string;
+		repeat: boolean;
+	};
+
+	let animation: Animation = {
+		keyFrames: [],
+		priority: undefined,
+		name: '',
+		repeat: false
+	};
+
+	let data = new Promise<void>(() => {});
+
+	async function save() {
+		let remove = await Requests.animations.remove(animation.name);
+		console.log(remove);
+		let add = await Requests.animations.add(animation);
+		console.log(add);
+		goto('/');
+	}
+
+	onMount(async () => {
+		let url = new URLSearchParams(window.location.search);
+
+		let name = url.get('name');
+
+		if (name === null) {
+			goto('/');
+			return;
+		}
+
+		let d = await Requests.animations.get(name);
+		console.log(d);
+		if (d.code) {
+			goto('/');
+			return;
+		}
+		animation = d;
+		data = Promise.resolve();
+	});
+</script>
+
+<main>
+	{#await data}
+		Loading...
+	{:then}
+		Name: <input bind:value={animation.name} /><br />
+		Priority: <input bind:value={animation.priority} type="number" /><br />
+		Repeat: <input bind:checked={animation.repeat} type="checkbox" /><br />
+
+		<div class="list">
+			{#each animation.keyFrames as frame, i}
+				<div class="frame">
+					<div class="canvas">
+						<DisplayData frames={frame.settings} />
+					</div>
+					<div class="data">
+						Frame: {i}<br />
+						Duration: <input bind:value={frame.duration} type="number" /><br />
+						Settings:
+						<div class="settings">
+							{#each frame.settings as setting, j}
+								<div class="setting">
+									Tags: <input bind:value={setting.tags} />
+									Start: <input bind:value={setting.start} type="number" />
+									End: <input bind:value={setting.end} type="number" />
+									<br />
+									<div class="color">
+										<div
+											class="color-picker"
+											style="background-color: rgb({setting.r}, {setting.g}, {setting.b});"
+										/>
+										r:<input bind:value={setting.r} type="number" />
+										g: <input bind:value={setting.g} type="number" />
+										b: <input bind:value={setting.b} type="number" />
+									</div>
+									<button
+										on:click={() => {
+											frame.settings.splice(j, 1);
+											animation = animation;
+										}}
+									>
+										Remove
+									</button>
+								</div>
+							{/each}
+						</div>
+					</div>
+					<div class="btt">
+						<button
+							on:click={() => {
+								frame.settings.push({
+									tags: undefined,
+									end: undefined,
+									start: undefined,
+									b: 0,
+									g: 0,
+									r: 0
+								});
+								animation = animation;
+							}}
+						>
+							Add new setting
+						</button>
+						<button
+							on:click={() => {
+								animation.keyFrames.splice(i, 1);
+								animation = animation;
+							}}
+						>
+							Remove
+						</button>
+						<button
+							on:click={() => {
+								animation.keyFrames.splice(i, 0, {
+									...frame,
+									settings: frame.settings.map((a) => ({ ...a }))
+								});
+								animation = animation;
+							}}
+						>
+							Clone
+						</button><br />
+						{#if i > 0}
+							<button
+								on:click={() => {
+									let temp = animation.keyFrames[i - 1];
+									animation.keyFrames[i - 1] = animation.keyFrames[i];
+									animation.keyFrames[i] = temp;
+									animation.keyFrames = animation.keyFrames;
+								}}
+							>
+								Up
+							</button>
+						{/if}
+						{#if i < animation.keyFrames.length - 1}
+							<button
+								on:click={() => {
+									let temp = animation.keyFrames[i + 1];
+									animation.keyFrames[i + 1] = animation.keyFrames[i];
+									animation.keyFrames[i] = temp;
+									animation.keyFrames = animation.keyFrames;
+								}}
+							>
+								Down
+							</button>
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+		<button
+			on:click={() => {
+				animation.keyFrames.push({
+					duration: 0,
+					settings: []
+				});
+				animation = animation;
+			}}
+		>
+			Add new frame
+		</button>
+		<button on:click={save}> Save </button>
+	{/await}
+</main>
+
+<style lang="scss">
+	main {
+		margin: 20px;
+
+		input {
+			padding: 5px 10px;
+			border: 0;
+			box-shadow: 0 0 8px 2px #2222;
+			margin: 2px;
+			border-radius: 20px;
+		}
+
+		.list {
+			margin: 20px 0;
+			.frame {
+				box-shadow: 0 0 8px 2px #2222;
+				padding: 20px;
+				border-radius: 20px;
+				margin-left: 10px;
+				display: flex;
+				flex-wrap: wrap;
+
+				.canvas {
+					display: inline-block;
+					border-radius: 20px;
+					overflow: hidden;
+				}
+
+				.settings {
+					margin: 10px 0;
+					.setting {
+						margin: 10px 0;
+
+						.color {
+							margin: 5px 0;
+							display: flex;
+							align-items: center;
+							gap: 10px;
+
+							.color-picker {
+								height: 1.5em;
+								width: 1.5em;
+								display: inline-block;
+								border: black 1px solid;
+							}
+						}
+					}
+				}
+
+				.data {
+					margin-left: 10px;
+					margin-top: 10px;
+					.settings {
+						margin-left: 10px;
+					}
+				}
+
+				.btt {
+					width: 100%;
+					margin-top: 20px;
+				}
+			}
+		}
+	}
+</style>

src/routes/ani/new/+page.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
-	import DisplayData from "./DisplayData.svelte";
+	import { goto } from "$app/navigation";
+	import { navigating } from "$app/stores";
+	import { Requests } from "$lib/Requests";
+	import DisplayData from "../DisplayData.svelte";
 
     type LigthSetting = {
-        start: number,
+        start?: number,
-        end: number,
+        end?: number,
-        tags: string,
+        tags?: string,
         r: number,
         b: number,
         g: number,
@@ -14,26 +17,31 @@
         settings: LigthSetting[],
     }
     type Animation = {
-        key_frames: KeyFrame[],
+        keyFrames: KeyFrame[],
         priority?: number,
         name: string,
         repeat: boolean,
     }
     
     let animation: Animation = {
-        key_frames: [],
+        keyFrames: [],
         priority: undefined,
         name: "",
         repeat: false,
     }
 
+    async function save() {
+        let add = await Requests.animations.add(animation);
+        goto('/');
+    }
+
 </script>
 
 Name: <input bind:value={animation.name} /><br/>
 Priority: <input bind:value={animation.priority} type="number"><br/>
 Repeat: <input bind:checked={animation.repeat} type="checkbox"><br/>
 
-{#each animation.key_frames as frame, i}
+{#each animation.keyFrames as frame, i}
     <div class="frame">
         <DisplayData frames={frame.settings} />
         Frame: {i}<br/>
@@ -45,9 +53,9 @@ Repeat: <input bind:checked={animation.repeat} type="checkbox"><br/>
                     Tags: <input bind:value={setting.tags} />
                     Start: <input bind:value={setting.start} type="number" />
                     End: <input bind:value={setting.end} type="number" />
-                    r: <input bind:value={setting.tags} type="number" />
+                    r: <input bind:value={setting.r} type="number" />
-                    g: <input bind:value={setting.tags} type="number" />
+                    g: <input bind:value={setting.g} type="number" />
-                    b: <input bind:value={setting.tags} type="number" />
+                    b: <input bind:value={setting.b} type="number" />
                     <button on:click={() => {
                         frame.settings.splice(j, 1);
                         animation = animation;
@@ -59,9 +67,9 @@ Repeat: <input bind:checked={animation.repeat} type="checkbox"><br/>
         </div>
         <button on:click={() => {
             frame.settings.push({
-                tags: "",
+                tags: undefined,
-                end: 0,
+                end: undefined,
-                start: 0,
+                start: undefined,
                 b: 0,
                 g: 0,
                 r: 0,
@@ -71,7 +79,7 @@ Repeat: <input bind:checked={animation.repeat} type="checkbox"><br/>
             Add new setting
         </button>
         <button on:click={() => {
-            animation.key_frames.splice(i, 1);
+            animation.keyFrames.splice(i, 1);
             animation = animation;
         }}>
             Remove
@@ -79,7 +87,7 @@ Repeat: <input bind:checked={animation.repeat} type="checkbox"><br/>
     </div>
 {/each}
 <button on:click={() => {
-    animation.key_frames.push({
+    animation.keyFrames.push({
         duration: 0,
         settings: [],
     });
@@ -87,6 +95,9 @@ Repeat: <input bind:checked={animation.repeat} type="checkbox"><br/>
 }}>
     Add new frame
 </button>
+<button on:click={save}>
+    Save
+</button>
 
 <style lang="post">
     .frame {

src/routes/ani/new/DisplayData.svelte

@@ -1,30 +0,0 @@
-<script lang="ts" context="module">
-    export type LigthSetting = {
-        start: number,
-        end: number,
-        tags: string,
-        r: number,
-        b: number,
-        g: number,
-    }
-</script>
-<script lang="ts">
-    import * as Three from 'three';
-    import * as SC from 'svelte-cubed';
-    import { onMount } from 'svelte';
-    import { setStore } from '$lib/store';
-
-    export let frames: LigthSetting[];
-
-    onMount(async () => {
-        await setStore.getData();
-        let set = await $setStore;
-        
-        const leds = [];
-        for (let config of set) {
-            console.log(config);
-        }
-    });
-
-</script>
-

src/routes/configuration/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from "svelte";
 	import Gyro from "$lib/Gyro.svelte";
+	import { setStore } from "$lib/store";
 
     type Configuration = {
         directionX: number,
@@ -44,6 +45,7 @@
         console.log(await request.json());
  
         getData();
+        setStore.getData(true);
     }
 
     onMount(async () => {

src/routes/styles.css

@@ -0,0 +1,9 @@
+body {
+    margin: 0;
+    padding: 0;
+}
+
+button {
+    border: none;
+    background: none;
+}

svelte.config.js

@@ -5,7 +5,7 @@ import { vitePreprocess } from '@sveltejs/kit/vite';
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: vitePreprocess({}),
 
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.