Init project

.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode", "tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "svelte.enable-ts-plugin": true
+}

README.md

@@ -0,0 +1,7 @@
+# Tauri + SvelteKit + TypeScript
+
+This template should help get you started developing with Tauri, SvelteKit and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer).

components.json

@@ -0,0 +1,16 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"tailwind": {
+		"css": "src/app.css",
+		"baseColor": "gray"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks",
+		"lib": "$lib"
+	},
+	"typescript": true,
+	"registry": "https://shadcn-svelte.com/registry"
+}

package.json

@@ -0,0 +1,47 @@
+{
+  "name": "rota",
+  "version": "0.1.0",
+  "description": "",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "tauri": "tauri"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@internationalized/date": "^3.10.1",
+    "@tailwindcss/vite": "^4.1.18",
+    "@tauri-apps/api": "^2",
+    "@tauri-apps/plugin-log": "~2.7.1",
+    "@tauri-apps/plugin-opener": "^2",
+    "bits-ui": "^2.14.4",
+    "phosphor-svelte": "^3.0.1",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@lucide/svelte": "^0.561.0",
+    "@sveltejs/adapter-static": "^3.0.6",
+    "@sveltejs/kit": "^2.9.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@tauri-apps/cli": "^2",
+    "autoprefixer": "^10.4.23",
+    "clsx": "^2.1.1",
+    "postcss": "^8.5.6",
+    "prettier": "^3.7.4",
+    "prettier-plugin-svelte": "^3.4.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.2.2",
+    "tailwindcss": "^4.1.18",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.3"
+  }
+}

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+onlyBuiltDependencies:
+  - esbuild

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {}
+  }
+};

src-tauri/.gitignore

@@ -0,0 +1,7 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+
+# Generated by Tauri
+# will have schema files for capabilities auto-completion
+/gen/schemas

src-tauri/Cargo.toml

@@ -0,0 +1,29 @@
+[package]
+name = "rota"
+version = "0.1.0"
+description = "A Tauri App"
+authors = ["you"]
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[lib]
+# The `_lib` suffix may seem redundant but it is necessary
+# to make the lib name unique and wouldn't conflict with the bin name.
+# This seems to be only an issue on Windows, see https://github.com/rust-lang/cargo/issues/8519
+name = "rota_lib"
+crate-type = ["staticlib", "cdylib", "rlib"]
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+[dependencies]
+tauri = { version = "2", features = [] }
+tauri-plugin-opener = "2"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+chrono = "0.4.42"
+itertools = "0.14.0"
+rstest = "0.26.1"
+tauri-plugin-log = "2"
+log = "0.4.29"

src-tauri/build.rs

@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}

src-tauri/capabilities/default.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "default",
+  "description": "Capability for the main window",
+  "windows": [
+    "main"
+  ],
+  "permissions": [
+    "core:default",
+    "opener:default",
+    "log:default"
+  ]
+}

src-tauri/src/export.rs

@@ -0,0 +1,69 @@
+// here lies the logic for the export of the final schedule into docx/pdf formats
+
+use crate::model::{MonthlySchedule, WeeklySchedule};
+
+#[derive(Debug)]
+pub enum FileType {
+    Json,
+    Csv,
+    Doc,
+    Pdf,
+}
+
+pub trait Export {
+    fn export(&self, file_type: FileType);
+}
+
+impl Export for MonthlySchedule {
+    fn export(&self, file_type: FileType) {
+        match file_type {
+            FileType::Csv => self.export_as_csv(),
+            FileType::Json => self.export_as_json(),
+            FileType::Doc => self.export_as_doc(),
+            FileType::Pdf => self.export_as_pdf(),
+        };
+
+        // TODO: make this env var from a config file? Option to change this in-app
+        let env_path = "rota/me/";
+        println!(
+            "exported type {:?}. Saved at folder path {}",
+            file_type, env_path
+        );
+        todo!()
+    }
+}
+
+impl MonthlySchedule {
+    // return error result as string or nothing, maybe use anyhow
+    // or just return a string.. for now
+
+    pub fn export_as_csv(&self) -> String {
+        todo!()
+    }
+
+    pub fn export_as_json(&self) -> String {
+        todo!()
+    }
+
+    pub fn export_as_doc(&self) -> String {
+        todo!()
+    }
+
+    pub fn export_as_pdf(&self) -> String {
+        todo!()
+    }
+}
+
+impl Export for WeeklySchedule {
+    fn export(&self, file_type: FileType) {
+        todo!()
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use rstest::rstest;
+
+    #[rstest]
+    pub fn xxxy() {}
+}

src-tauri/src/fairness.rs

@@ -0,0 +1,36 @@
+// list of algos/methods that make sure the state of the schedule is still fair
+
+use crate::model::{Day, MonthlySchedule, Resident};
+
+// return yes if any resident has a shift in back to bacak days
+// TODO: performance: this could only check the current recursion resident otherwise we would have cut the branch earlier
+pub fn back_to_back_shifts(schedule: &MonthlySchedule) -> bool {
+    schedule.contains_any_consecutive_shifts()
+}
+
+// return yes if the same resident has a shift on a sunday and also the next saturday
+pub fn sunday_and_next_saturday_shifts(schedule: &MonthlySchedule, resident: &Resident) -> bool {
+    todo!()
+}
+
+// find if a pair exists doing a shift at the same day, if yes return true
+pub fn pair_exists(
+    schedule: &MonthlySchedule,
+    resident_a: &Resident,
+    resident_b: &Resident,
+) -> bool {
+    todo!()
+}
+
+// if day is odd then open otherwise closed
+pub fn is_closed(day: &Day) -> bool {
+    todo!()
+}
+
+// here include:
+// if total shifts are 50 and there are 5 residents BUT this resident has reduced workload, he should to 9 instead of 10
+// if resident has specific shift types then see he is not put in a wrong shift type
+// if resident has a max limit of shifts see that he is not doing more
+pub fn are_personal_restrictions_met(resident: &Resident) -> bool {
+    todo!()
+}

src-tauri/src/generator.rs

@@ -0,0 +1,46 @@
+//! Generator
+//!
+//! here lies the schedule generator which uses a simple backtracking algorithm
+
+use crate::model::{MonthlySchedule, Resident};
+
+// schedule param contains the schedule with maybe some manually input days
+// returns the complete schedule after applying all rules/restrictions/fairness
+fn generate(schedule: &MonthlySchedule) -> MonthlySchedule {
+    todo!()
+}
+
+// make part of Schedule
+// examines Schedule for validity, if no then backtrack
+fn is_state_valid() {
+    todo!()
+}
+
+// From https://en.wikipedia.org/wiki/Backtracking
+// Recursively fill a partially filled MonthlySchedule until shifts are set for all days of the month
+// Collection of Resident is immutable and only there for reference
+// TODO: we can create a struct `Generator` that contains the collection of Resident upon initialization and then call self.people inside self.backtracking
+// Returns error if there is no solution for the specific set of constaints
+fn backtracking(schedule: &mut MonthlySchedule, people: &Vec<Resident>, mut day: usize) {
+    if schedule.restrictions_violated() {
+        log::info!("restrictions_violated due to...");
+        return;
+    }
+
+    if schedule.is_filled() {
+        log::info!("..?");
+        return;
+    }
+
+    for resident in people {}
+
+    todo!()
+}
+
+#[cfg(test)]
+mod tests {
+    use rstest::rstest;
+
+    #[rstest]
+    pub fn xxxt() {}
+}

src-tauri/src/lib.rs

@@ -0,0 +1,82 @@
+use crate::{
+    export::{Export, FileType},
+    model::{MonthlySchedule, Resident},
+};
+
+mod export;
+mod fairness;
+mod generator;
+mod model;
+
+#[tauri::command]
+fn greet(name: &str) -> String {
+    format!("Hello, {}!", name)
+}
+
+#[tauri::command]
+fn set_restrictions() -> String {
+    "A new rota begins".to_string()
+}
+
+#[tauri::command]
+fn add_resident(resident: Resident) -> String {
+    log::info!("hi resident {:?}", resident);
+    format!("{:?}", resident)
+}
+
+#[tauri::command]
+fn generate() -> String {
+    "Generating new rota".to_string()
+}
+
+// takes the list of active residents and their configurations
+// providing svelte with all possible info for swapping between residents shifts
+// returns the updated resident data
+#[tauri::command]
+fn possible_swap_locations(people: Vec<Resident>) -> Vec<Resident> {
+    log::info!("Fetch possible swap locations for people: {:?}", people);
+    people
+}
+
+#[tauri::command]
+fn export() -> String {
+    // param must have filetype as string from svelte
+    // somehow get the current schedule
+    let rota = MonthlySchedule::new(10);
+    let _ = rota.export(FileType::Json);
+
+    // locally store the _?
+    todo!()
+}
+
+#[cfg_attr(mobile, tauri::mobile_entry_point)]
+pub fn run() {
+    log::info!("hi");
+
+    tauri::Builder::default()
+        .plugin(
+            tauri_plugin_log::Builder::new()
+                .level(tauri_plugin_log::log::LevelFilter::Info)
+                .build(),
+        )
+        .plugin(tauri_plugin_opener::init())
+        .plugin(tauri_plugin_log::Builder::new().build())
+        .invoke_handler(tauri::generate_handler![
+            greet,
+            set_restrictions,
+            add_resident,
+            generate,
+            possible_swap_locations,
+            export
+        ])
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}
+
+#[cfg(test)]
+mod tests {
+    use rstest::rstest;
+
+    #[rstest]
+    pub fn xxx() {}
+}

src-tauri/src/main.rs

@@ -0,0 +1,6 @@
+// Prevents additional console window on Windows in release, DO NOT REMOVE!!
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    rota_lib::run()
+}

src-tauri/src/model.rs

@@ -0,0 +1,159 @@
+use std::collections::HashMap;
+
+use chrono::Month;
+use itertools::Itertools;
+use serde::{Deserialize, Serialize};
+
+// We're always talking about entities that are created for the single month of the rota generation
+
+const YEAR: i32 = 2026;
+
+pub struct Configurations {
+    month: Month,
+}
+
+impl Configurations {
+    pub fn new(month: usize) -> Self {
+        Self {
+            month: Month::try_from(month as u8).unwrap(),
+        }
+    }
+
+    pub fn total_days(&self) -> u8 {
+        self.month.num_days(YEAR).unwrap()
+    }
+
+    // open shfits -> 2 people per night
+    pub fn total_open_shifts(&self) -> u8 {
+        let mut total_open_shifts = 0;
+        for i in 1..=self.total_days() {
+            if i % 2 != 0 {
+                total_open_shifts += 1;
+            }
+        }
+        total_open_shifts
+    }
+
+    // closed shifts -> 1 resident per night
+    pub fn total_closed_shifts(&self) -> u8 {
+        self.total_days() - self.total_open_shifts()
+    }
+}
+
+pub struct MonthlySchedule {
+    rotation: Vec<Shift>,
+}
+
+impl MonthlySchedule {
+    pub fn new(days_of_month: usize) -> Self {
+        Self { rotation: vec![] }
+    }
+
+    pub fn restrictions_violated(&self) -> bool {
+        todo!()
+    }
+
+    pub fn is_filled(&self) -> bool {
+        todo!()
+    }
+
+    pub fn contains_any_consecutive_shifts(&self) -> bool {
+        // self.rotation
+        //     .into_iter()
+        //     .sorted_unstable_by_key(|shift| shift.day)
+        //     .tuple_windows()
+        //     .any(|((_, (p1, p1_opt)), (_, (p2, p2_opt)))| {
+        //         let p1_name = &p1.name;
+        //         let p1_opt_name = p1_opt
+        //             .as_ref()
+        //             .unwrap_or(&Resident::new(".", "-p1"))
+        //             .name
+        //             .clone();
+        //         let p2_name = &p2.name;
+        //         let p2_opt_name = p2_opt
+        //             .as_ref()
+        //             .unwrap_or(&Resident::new(".", "-p2"))
+        //             .name
+        //             .clone();
+
+        //         p1_name == p2_name
+        //             || p1_name == &p2_opt_name
+        //             || p2_name == &p1_opt_name
+        //             || p1_opt_name == p2_opt_name
+        //     });
+        todo!()
+    }
+
+    // pub fn
+}
+
+#[derive(Serialize, Deserialize, PartialEq, PartialOrd, Ord, Eq, Debug)]
+#[serde(rename_all = "camelCase")]
+
+pub struct Day(usize);
+
+impl Day {
+    pub fn is_open_shift(&self) -> bool {
+        self.0.is_multiple_of(2)
+    }
+}
+
+#[derive(Serialize, Deserialize, Debug)]
+#[serde(rename_all = "camelCase")]
+pub struct Resident {
+    id: String,
+    name: String,
+    negative_shifts: Vec<Day>,
+    // manual days on
+    manual_shifts: Vec<Day>,
+    max_shifts: Option<usize>,
+    allowed_types: Vec<ShiftType>,
+    reduced_load: bool,
+}
+
+impl Resident {
+    pub fn new(id: &str, name: &str) -> Self {
+        Self {
+            id: id.to_string(),
+            name: name.to_string(),
+            negative_shifts: Vec::new(),
+            manual_shifts: Vec::new(),
+            max_shifts: None,
+            allowed_types: vec![
+                ShiftType::OpenFirst,
+                ShiftType::OpenSecond,
+                ShiftType::Closed,
+            ],
+            reduced_load: false,
+        }
+    }
+}
+
+pub struct WeeklySchedule {
+    // todo
+}
+
+impl WeeklySchedule {
+    // todo
+}
+
+pub struct Shift {
+    day: Day,
+    resident_a: Resident,
+    resident_b: Option<Resident>,
+}
+
+#[derive(Serialize, Deserialize, Debug)]
+pub enum ShiftType {
+    Closed,
+    OpenFirst,
+    OpenSecond,
+}
+
+#[cfg(test)]
+mod tests {
+    use rstest::rstest;
+
+    #[rstest]
+    pub fn xxx() {}
+}

src-tauri/tauri.conf.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "productName": "rota",
+  "version": "0.1.0",
+  "identifier": "com.stef.rota",
+  "build": {
+    "beforeDevCommand": "pnpm dev",
+    "devUrl": "http://localhost:1420",
+    "beforeBuildCommand": "pnpm build",
+    "frontendDist": "../build"
+  },
+  "app": {
+    "windows": [
+      {
+        "title": "rota",
+        "width": 1280,
+        "height": 800,
+        "minWidth": 1024,
+        "minHeight": 768,
+        "center": true,
+        "fullscreen": false
+      }
+    ],
+    "security": {
+      "csp": null
+    }
+  },
+  "bundle": {
+    "active": true,
+    "targets": "all",
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ]
+  }
+}

src/app.css

@@ -0,0 +1,121 @@
+@import "tailwindcss";
+
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.13 0.028 261.692);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.13 0.028 261.692);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.13 0.028 261.692);
+  --primary: oklch(0.21 0.034 264.665);
+  --primary-foreground: oklch(0.985 0.002 247.839);
+  --secondary: oklch(0.967 0.003 264.542);
+  --secondary-foreground: oklch(0.21 0.034 264.665);
+  --muted: oklch(0.967 0.003 264.542);
+  --muted-foreground: oklch(0.551 0.027 264.364);
+  --accent: oklch(0.967 0.003 264.542);
+  --accent-foreground: oklch(0.21 0.034 264.665);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.928 0.006 264.531);
+  --input: oklch(0.928 0.006 264.531);
+  --ring: oklch(0.707 0.022 261.325);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0.002 247.839);
+  --sidebar-foreground: oklch(0.13 0.028 261.692);
+  --sidebar-primary: oklch(0.21 0.034 264.665);
+  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-accent: oklch(0.967 0.003 264.542);
+  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
+  --sidebar-border: oklch(0.928 0.006 264.531);
+  --sidebar-ring: oklch(0.707 0.022 261.325);
+}
+
+.dark {
+  --background: oklch(0.13 0.028 261.692);
+  --foreground: oklch(0.985 0.002 247.839);
+  --card: oklch(0.21 0.034 264.665);
+  --card-foreground: oklch(0.985 0.002 247.839);
+  --popover: oklch(0.21 0.034 264.665);
+  --popover-foreground: oklch(0.985 0.002 247.839);
+  --primary: oklch(0.928 0.006 264.531);
+  --primary-foreground: oklch(0.21 0.034 264.665);
+  --secondary: oklch(0.278 0.033 256.848);
+  --secondary-foreground: oklch(0.985 0.002 247.839);
+  --muted: oklch(0.278 0.033 256.848);
+  --muted-foreground: oklch(0.707 0.022 261.325);
+  --accent: oklch(0.278 0.033 256.848);
+  --accent-foreground: oklch(0.985 0.002 247.839);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.034 264.665);
+  --sidebar-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-accent: oklch(0.278 0.033 256.848);
+  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

src/app.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Tauri + SvelteKit + Typescript App</title>
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

src/lib/components/ui/button/button.svelte

@@ -0,0 +1,82 @@
+<script lang="ts" module>
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+  import { type VariantProps, tv } from "tailwind-variants";
+
+  export const buttonVariants = tv({
+    base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs",
+        destructive:
+          "bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs",
+        outline:
+          "bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  });
+
+  export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+  export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+  export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+    WithElementRef<HTMLAnchorAttributes> & {
+      variant?: ButtonVariant;
+      size?: ButtonSize;
+    };
+</script>
+
+<script lang="ts">
+  let {
+    class: className,
+    variant = "default",
+    size = "default",
+    ref = $bindable(null),
+    href = undefined,
+    type = "button",
+    disabled,
+    children,
+    ...restProps
+  }: ButtonProps = $props();
+</script>
+
+{#if href}
+  <a
+    bind:this={ref}
+    data-slot="button"
+    class={cn(buttonVariants({ variant, size }), className)}
+    href={disabled ? undefined : href}
+    aria-disabled={disabled}
+    role={disabled ? "link" : undefined}
+    tabindex={disabled ? -1 : undefined}
+    {...restProps}
+  >
+    {@render children?.()}
+  </a>
+{:else}
+  <button
+    bind:this={ref}
+    data-slot="button"
+    class={cn(buttonVariants({ variant, size }), className)}
+    {type}
+    {disabled}
+    {...restProps}
+  >
+    {@render children?.()}
+  </button>
+{/if}

src/lib/components/ui/button/index.ts

@@ -0,0 +1,17 @@
+import Root, {
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+  buttonVariants
+} from "./button.svelte";
+
+export {
+  Root,
+  type ButtonProps as Props,
+  //
+  Root as Button,
+  buttonVariants,
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant
+};

src/lib/components/ui/calendar/calendar-caption.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import type { ComponentProps } from "svelte";
+  import type Calendar from "./calendar.svelte";
+  import CalendarMonthSelect from "./calendar-month-select.svelte";
+  import CalendarYearSelect from "./calendar-year-select.svelte";
+  import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
+
+  let {
+    captionLayout,
+    months,
+    monthFormat,
+    years,
+    yearFormat,
+    month,
+    locale,
+    placeholder = $bindable(),
+    monthIndex = 0
+  }: {
+    captionLayout: ComponentProps<typeof Calendar>["captionLayout"];
+    months: ComponentProps<typeof CalendarMonthSelect>["months"];
+    monthFormat: ComponentProps<typeof CalendarMonthSelect>["monthFormat"];
+    years: ComponentProps<typeof CalendarYearSelect>["years"];
+    yearFormat: ComponentProps<typeof CalendarYearSelect>["yearFormat"];
+    month: DateValue;
+    placeholder: DateValue | undefined;
+    locale: string;
+    monthIndex: number;
+  } = $props();
+
+  function formatYear(date: DateValue) {
+    const dateObj = date.toDate(getLocalTimeZone());
+    if (typeof yearFormat === "function") return yearFormat(dateObj.getFullYear());
+    return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
+  }
+
+  function formatMonth(date: DateValue) {
+    const dateObj = date.toDate(getLocalTimeZone());
+    if (typeof monthFormat === "function") return monthFormat(dateObj.getMonth() + 1);
+    return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
+  }
+</script>
+
+{#snippet MonthSelect()}
+  <CalendarMonthSelect
+    {months}
+    {monthFormat}
+    value={month.month}
+    onchange={(e) => {
+      if (!placeholder) return;
+      const v = Number.parseInt(e.currentTarget.value);
+      const newPlaceholder = placeholder.set({ month: v });
+      placeholder = newPlaceholder.subtract({ months: monthIndex });
+    }}
+  />
+{/snippet}
+
+{#snippet YearSelect()}
+  <CalendarYearSelect {years} {yearFormat} value={month.year} />
+{/snippet}
+
+{#if captionLayout === "dropdown"}
+  {@render MonthSelect()}
+  {@render YearSelect()}
+{:else if captionLayout === "dropdown-months"}
+  {@render MonthSelect()}
+  {#if placeholder}
+    {formatYear(placeholder)}
+  {/if}
+{:else if captionLayout === "dropdown-years"}
+  {#if placeholder}
+    {formatMonth(placeholder)}
+  {/if}
+  {@render YearSelect()}
+{:else}
+  {formatMonth(month)} {formatYear(month)}
+{/if}

src/lib/components/ui/calendar/calendar-cell.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.CellProps = $props();
+</script>
+
+<CalendarPrimitive.Cell
+  bind:ref
+  class={cn(
+    "relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-md [&:last-child[data-selected]_[data-bits-day]]:rounded-e-md",
+    className
+  )}
+  {...restProps}
+/>

src/lib/components/ui/calendar/calendar-day.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { buttonVariants } from "$lib/components/ui/button/index.js";
+  import { cn } from "$lib/utils.js";
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.DayProps = $props();
+</script>
+
+<CalendarPrimitive.Day
+  bind:ref
+  class={cn(
+    buttonVariants({ variant: "ghost" }),
+    "flex size-(--cell-size) flex-col items-center justify-center gap-1 p-0 leading-none font-normal whitespace-nowrap select-none",
+    "[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground",
+    "data-[selected]:bg-primary dark:data-[selected]:hover:bg-accent/50 data-[selected]:text-primary-foreground",
+    // Outside months
+    "[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground",
+    // Disabled
+    "data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    // Unavailable
+    "data-[unavailable]:text-muted-foreground data-[unavailable]:line-through",
+    // hover
+    "dark:hover:text-accent-foreground",
+    // focus
+    "focus:border-ring focus:ring-ring/50 focus:relative",
+    // inner spans
+    "[&>span]:text-xs [&>span]:opacity-70",
+    className
+  )}
+  {...restProps}
+/>

src/lib/components/ui/calendar/calendar-grid-body.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.GridBodyProps = $props();
+</script>
+
+<CalendarPrimitive.GridBody bind:ref class={cn(className)} {...restProps} />

src/lib/components/ui/calendar/calendar-grid-head.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.GridHeadProps = $props();
+</script>
+
+<CalendarPrimitive.GridHead bind:ref class={cn(className)} {...restProps} />

src/lib/components/ui/calendar/calendar-grid-row.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.GridRowProps = $props();
+</script>
+
+<CalendarPrimitive.GridRow bind:ref class={cn("flex", className)} {...restProps} />

src/lib/components/ui/calendar/calendar-grid.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.GridProps = $props();
+</script>
+
+<CalendarPrimitive.Grid
+  bind:ref
+  class={cn("mt-4 flex w-full border-collapse flex-col gap-1", className)}
+  {...restProps}
+/>

src/lib/components/ui/calendar/calendar-head-cell.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.HeadCellProps = $props();
+</script>
+
+<CalendarPrimitive.HeadCell
+  bind:ref
+  class={cn(
+    "text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal",
+    className
+  )}
+  {...restProps}
+/>

src/lib/components/ui/calendar/calendar-header.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.HeaderProps = $props();
+</script>
+
+<CalendarPrimitive.Header
+  bind:ref
+  class={cn(
+    "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+    className
+  )}
+  {...restProps}
+/>

src/lib/components/ui/calendar/calendar-heading.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: CalendarPrimitive.HeadingProps = $props();
+</script>
+
+<CalendarPrimitive.Heading
+  bind:ref
+  class={cn("px-(--cell-size) text-sm font-medium", className)}
+  {...restProps}
+/>

src/lib/components/ui/calendar/calendar-month-select.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    value,
+    onchange,
+    ...restProps
+  }: WithoutChildrenOrChild<CalendarPrimitive.MonthSelectProps> = $props();
+</script>
+
+<span
+  class={cn(
+    "has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
+    className
+  )}
+>
+  <CalendarPrimitive.MonthSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+    {#snippet child({ props, monthItems, selectedMonthItem })}
+      <select {...props} {value} {onchange}>
+        {#each monthItems as monthItem (monthItem.value)}
+          <option
+            value={monthItem.value}
+            selected={value !== undefined
+              ? monthItem.value === value
+              : monthItem.value === selectedMonthItem.value}
+          >
+            {monthItem.label}
+          </option>
+        {/each}
+      </select>
+      <span
+        class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
+        aria-hidden="true"
+      >
+        {monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
+        <ChevronDownIcon class="size-4" />
+      </span>
+    {/snippet}
+  </CalendarPrimitive.MonthSelect>
+</span>

src/lib/components/ui/calendar/calendar-month.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { type WithElementRef, cn } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div {...restProps} bind:this={ref} class={cn("flex flex-col", className)}>
+  {@render children?.()}
+</div>

src/lib/components/ui/calendar/calendar-months.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  class={cn("relative flex flex-col gap-4 md:flex-row", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

src/lib/components/ui/calendar/calendar-nav.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from "$lib/utils.js";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav
+  {...restProps}
+  bind:this={ref}
+  class={cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", className)}
+>
+  {@render children?.()}
+</nav>

src/lib/components/ui/calendar/calendar-next-button.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+  import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    variant = "ghost",
+    ...restProps
+  }: CalendarPrimitive.NextButtonProps & {
+    variant?: ButtonVariant;
+  } = $props();
+</script>
+
+{#snippet Fallback()}
+  <ChevronRightIcon class="size-4" />
+{/snippet}
+
+<CalendarPrimitive.NextButton
+  bind:ref
+  class={cn(
+    buttonVariants({ variant }),
+    "size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
+    className
+  )}
+  children={children || Fallback}
+  {...restProps}
+/>

src/lib/components/ui/calendar/calendar-prev-button.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+  import { buttonVariants, type ButtonVariant } from "$lib/components/ui/button/index.js";
+  import { cn } from "$lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    variant = "ghost",
+    ...restProps
+  }: CalendarPrimitive.PrevButtonProps & {
+    variant?: ButtonVariant;
+  } = $props();
+</script>
+
+{#snippet Fallback()}
+  <ChevronLeftIcon class="size-4" />
+{/snippet}
+
+<CalendarPrimitive.PrevButton
+  bind:ref
+  class={cn(
+    buttonVariants({ variant }),
+    "size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
+    className
+  )}
+  children={children || Fallback}
+  {...restProps}
+/>

src/lib/components/ui/calendar/calendar-year-select.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    value,
+    ...restProps
+  }: WithoutChildrenOrChild<CalendarPrimitive.YearSelectProps> = $props();
+</script>
+
+<span
+  class={cn(
+    "has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
+    className
+  )}
+>
+  <CalendarPrimitive.YearSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+    {#snippet child({ props, yearItems, selectedYearItem })}
+      <select {...props} {value}>
+        {#each yearItems as yearItem (yearItem.value)}
+          <option
+            value={yearItem.value}
+            selected={value !== undefined
+              ? yearItem.value === value
+              : yearItem.value === selectedYearItem.value}
+          >
+            {yearItem.label}
+          </option>
+        {/each}
+      </select>
+      <span
+        class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
+        aria-hidden="true"
+      >
+        {yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
+        <ChevronDownIcon class="size-4" />
+      </span>
+    {/snippet}
+  </CalendarPrimitive.YearSelect>
+</span>

src/lib/components/ui/calendar/calendar.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { Calendar as CalendarPrimitive } from "bits-ui";
+  import * as Calendar from "./index.js";
+  import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+  import type { ButtonVariant } from "../button/button.svelte";
+  import { isEqualMonth, type DateValue } from "@internationalized/date";
+  import type { Snippet } from "svelte";
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    placeholder = $bindable(),
+    class: className,
+    weekdayFormat = "short",
+    buttonVariant = "ghost",
+    captionLayout = "label",
+    locale = "en-US",
+    months: monthsProp,
+    years,
+    monthFormat: monthFormatProp,
+    yearFormat = "numeric",
+    day,
+    disableDaysOutsideMonth = false,
+    ...restProps
+  }: WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
+    buttonVariant?: ButtonVariant;
+    captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label";
+    months?: CalendarPrimitive.MonthSelectProps["months"];
+    years?: CalendarPrimitive.YearSelectProps["years"];
+    monthFormat?: CalendarPrimitive.MonthSelectProps["monthFormat"];
+    yearFormat?: CalendarPrimitive.YearSelectProps["yearFormat"];
+    day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
+  } = $props();
+
+  const monthFormat = $derived.by(() => {
+    if (monthFormatProp) return monthFormatProp;
+    if (captionLayout.startsWith("dropdown")) return "short";
+    return "long";
+  });
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<CalendarPrimitive.Root
+  bind:value={value as never}
+  bind:ref
+  bind:placeholder
+  {weekdayFormat}
+  {disableDaysOutsideMonth}
+  class={cn(
+    "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+    className
+  )}
+  {locale}
+  {monthFormat}
+  {yearFormat}
+  {...restProps}
+>
+  {#snippet children({ months, weekdays })}
+    <Calendar.Months>
+      <Calendar.Nav>
+        <Calendar.PrevButton variant={buttonVariant} />
+        <Calendar.NextButton variant={buttonVariant} />
+      </Calendar.Nav>
+      {#each months as month, monthIndex (month)}
+        <Calendar.Month>
+          <Calendar.Header>
+            <Calendar.Caption
+              {captionLayout}
+              months={monthsProp}
+              {monthFormat}
+              {years}
+              {yearFormat}
+              month={month.value}
+              bind:placeholder
+              {locale}
+              {monthIndex}
+            />
+          </Calendar.Header>
+          <Calendar.Grid>
+            <Calendar.GridHead>
+              <Calendar.GridRow class="select-none">
+                {#each weekdays as weekday (weekday)}
+                  <Calendar.HeadCell>
+                    {weekday.slice(0, 2)}
+                  </Calendar.HeadCell>
+                {/each}
+              </Calendar.GridRow>
+            </Calendar.GridHead>
+            <Calendar.GridBody>
+              {#each month.weeks as weekDates (weekDates)}
+                <Calendar.GridRow class="mt-2 w-full">
+                  {#each weekDates as date (date)}
+                    <Calendar.Cell {date} month={month.value}>
+                      {#if day}
+                        {@render day({
+                          day: date,
+                          outsideMonth: !isEqualMonth(date, month.value)
+                        })}
+                      {:else}
+                        <Calendar.Day />
+                      {/if}
+                    </Calendar.Cell>
+                  {/each}
+                </Calendar.GridRow>
+              {/each}
+            </Calendar.GridBody>
+          </Calendar.Grid>
+        </Calendar.Month>
+      {/each}
+    </Calendar.Months>
+  {/snippet}
+</CalendarPrimitive.Root>

src/lib/components/ui/calendar/index.ts

@@ -0,0 +1,40 @@
+import Root from "./calendar.svelte";
+import Cell from "./calendar-cell.svelte";
+import Day from "./calendar-day.svelte";
+import Grid from "./calendar-grid.svelte";
+import Header from "./calendar-header.svelte";
+import Months from "./calendar-months.svelte";
+import GridRow from "./calendar-grid-row.svelte";
+import Heading from "./calendar-heading.svelte";
+import GridBody from "./calendar-grid-body.svelte";
+import GridHead from "./calendar-grid-head.svelte";
+import HeadCell from "./calendar-head-cell.svelte";
+import NextButton from "./calendar-next-button.svelte";
+import PrevButton from "./calendar-prev-button.svelte";
+import MonthSelect from "./calendar-month-select.svelte";
+import YearSelect from "./calendar-year-select.svelte";
+import Month from "./calendar-month.svelte";
+import Nav from "./calendar-nav.svelte";
+import Caption from "./calendar-caption.svelte";
+
+export {
+  Day,
+  Cell,
+  Grid,
+  Header,
+  Months,
+  GridRow,
+  Heading,
+  GridBody,
+  GridHead,
+  HeadCell,
+  NextButton,
+  PrevButton,
+  Nav,
+  Month,
+  YearSelect,
+  MonthSelect,
+  Caption,
+  //
+  Root as Calendar
+};

src/lib/utils.ts

@@ -0,0 +1,13 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };

src/routes/+layout.svelte

@@ -0,0 +1,5 @@
+<script>
+  import "../app.css";
+</script>
+
+<slot />

src/routes/+layout.ts

@@ -0,0 +1,5 @@
+// Tauri doesn't have a Node.js server to do proper SSR
+// so we use adapter-static with a fallback to index.html to put the site in SPA mode
+// See: https://svelte.dev/docs/kit/single-page-apps
+// See: https://v2.tauri.app/start/frontend/sveltekit/ for more info
+export const ssr = false;

src/routes/+page.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { invoke } from "@tauri-apps/api/core";
+  import { Calendar, Popover } from "bits-ui";
+  import { CalendarDate, getDayOfWeek } from "@internationalized/date";
+  import { Button } from "$lib/components/ui/button/index.js";
+  import { warn, debug, trace, info, error } from "@tauri-apps/plugin-log";
+
+  import Basic from "./components/configurations/basic.svelte";
+  import Residents from "./components/configurations/residents.svelte";
+  import Advanced from "./components/configurations/advanced.svelte";
+  import Preview from "./components/schedule/preview.svelte";
+
+  import { rota, steps } from "./state.svelte.js";
+  import Generate from "./components/schedule/generate.svelte";
+
+  $inspect(rota.selectedMonth).with((type, value) => {
+    trace(`[Month: ${type}]: ${value}`);
+  });
+  $inspect(rota.selectedYear).with((type, value) => {
+    trace(`[Year: ${type}]: ${value}`);
+  });
+
+  $inspect(rota.holidays).with((type, value) => {
+    const readableHolidays = JSON.stringify($state.snapshot(value));
+    trace(`[Holidays: ${type}]: ${readableHolidays}`);
+  });
+</script>
+
+<main class="grid h-screen w-full grid-cols-5 overflow-hidden bg-zinc-200/50 tracking-tight">
+  <aside class="col-span-1 flex flex-col border-r bg-zinc-100">
+    <div class="border-b border-zinc-200 bg-white p-4">
+      <p class="mt-2 mb-2 text-center text-xl font-bold tracking-widest text-zinc-800 uppercase">
+        Rota
+      </p>
+    </div>
+
+    <nav class="flex flex-1 flex-col">
+      {#each steps as step}
+        <button
+          onclick={() => (rota.currentStep = step.id)}
+          class="flex flex-1 flex-col justify-center border-b border-zinc-800/20 px-8 transition-all last:border-b-0
+        {rota.currentStep === step.id
+            ? 'bg-blue-900/50 text-white'
+            : 'text-zinc-500 hover:bg-zinc-800/50'}"
+        >
+          <span class="text-xs font-bold uppercase">ΒΗΜΑ {step.id}</span>
+          <span class="font-medium">{step.title}</span>
+        </button>
+      {/each}
+      <div class="border-t border-zinc-200 bg-white p-4">
+        <p class="text-center text-[10px] font-bold tracking-widest text-zinc-500 uppercase">
+          v1.0.0-Beta
+        </p>
+      </div>
+    </nav>
+  </aside>
+
+  <section class="col-span-4 flex flex-col overflow-y-auto p-12">
+    <div class="mx-auto w-full max-w-2xl">
+      {#if rota.currentStep === 1}
+        <Basic />
+      {:else if rota.currentStep === 2}
+        <Residents />
+      {:else if rota.currentStep === 3}
+        <Advanced />
+      {:else if rota.currentStep === 4}
+        <Preview />
+      {:else if rota.currentStep === 5}
+        <Generate />
+      {/if}
+    </div>
+  </section>
+</main>

src/routes/components/configurations/advanced.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button/index.js";
+  import { rota, steps } from "../../state.svelte.js";
+</script>
+
+<div class="mb-6 flex items-center justify-between">
+  <h2 class="text-2xl font-bold text-zinc-800">{steps[rota.currentStep - 1].title}</h2>
+  <div class="justify-end">
+    <Button
+      onclick={() => (rota.currentStep -= 1)}
+      variant="outline"
+      class="border-zinc-200 bg-white text-zinc-600 shadow-sm transition-all hover:bg-zinc-50 hover:text-zinc-900 active:scale-95"
+    >
+      Προηγούμενο
+    </Button>
+
+    <Button
+      onclick={() => (rota.currentStep += 1)}
+      variant="outline"
+      class="border-zinc-200 bg-white text-zinc-600 shadow-sm transition-all hover:bg-zinc-50 hover:text-zinc-900 active:scale-95"
+    >
+      Επόμενο
+    </Button>
+  </div>
+</div>
+
+<div class="space-y-4">
+  <header class="mb-2">
+    <p class="text-sm text-zinc-500">{steps[rota.currentStep - 1].description}</p>
+  </header>
+
+  {#if rota.forbiddenPairs.length === 0}
+    <div class="rounded-3xl border-2 border-dashed border-zinc-200 bg-white/50 py-16 text-center">
+      <div class="mx-auto mb-3 flex size-12 items-center justify-center rounded-full bg-zinc-100">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="text-zinc-500"
+          ><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path
+            d="M22 21v-2a4 4 0 0 0-3-3.87"
+          /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg
+        >
+      </div>
+      <p class="text-sm font-medium text-zinc-500">Δεν έχουν οριστεί περιορισμοί.</p>
+    </div>
+  {:else}
+    <div class="space-y-3">
+      {#each rota.forbiddenPairs as pair, i (pair)}
+        <div
+          class="group flex items-center gap-4 rounded-2xl border border-zinc-200 bg-white p-4 transition-all hover:border-blue-200 hover:bg-white"
+        >
+          <div class="flex flex-1 flex-col gap-1">
+            <p class="ml-1 text-[10px] font-black tracking-widest text-zinc-500 uppercase">
+              Resident A
+            </p>
+            <select
+              bind:value={pair.id1}
+              class="w-full rounded-xl border border-zinc-100 bg-zinc-50 px-3 py-2 text-sm font-semibold text-zinc-700 outline-none focus:ring-2"
+            >
+              {#each rota.residents as r}
+                <option value={r.id}>{r.name || "Unnamed Resident"}</option>
+              {/each}
+            </select>
+          </div>
+
+          <div class="flex flex-1 flex-col gap-1">
+            <p class="ml-1 text-[10px] font-black tracking-widest text-zinc-500 uppercase">
+              Resident B
+            </p>
+            <select
+              bind:value={pair.id2}
+              class="w-full rounded-xl border border-zinc-100 bg-zinc-50 px-3 py-2 text-sm font-semibold text-zinc-700 outline-none focus:ring-2"
+            >
+              {#each rota.residents as r}
+                {#if r.id !== pair.id1}
+                  <option value={r.id}>{r.name || "Unnamed Resident"}</option>
+                {/if}
+              {/each}
+            </select>
+          </div>
+
+          <button
+            onclick={() => rota.removeForbiddenPair(i)}
+            class="mt-5 rounded-lg p-2 text-zinc-300 transition-colors"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              ><path d="M3 6h18" /><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path
+                d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
+              /><line x1="10" x2="10" y1="11" y2="17" /><line
+                x1="14"
+                x2="14"
+                y1="11"
+                y2="17"
+              /></svg
+            >
+          </button>
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  <div class="mt-8 flex justify-center">
+    <Button
+      onclick={() => rota.addForbiddenPair()}
+      variant="outline"
+      disabled={rota.residents.length < 2}
+      class="border-zinc-200 bg-white text-zinc-600 shadow-sm transition-all hover:bg-zinc-50 hover:text-zinc-900 active:scale-95"
+      >Προσθήκη Περιορισμού</Button
+    >
+  </div>
+</div>

src/routes/components/configurations/basic.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+  import type { CalendarDate } from "@internationalized/date";
+  import { trace } from "@tauri-apps/plugin-log";
+  import { Calendar, Popover } from "bits-ui";
+  import { Button } from "$lib/components/ui/button/index.js";
+  import { rota, steps } from "../../state.svelte.js";
+
+  const monthOptions = [
+    { value: 1, label: "Ιανουάριος" },
+    { value: 2, label: "Φεβρουάριος" },
+    { value: 3, label: "Μάρτιος" },
+    { value: 4, label: "Απρίλιος" },
+    { value: 5, label: "Μάιος" },
+    { value: 6, label: "Ιούνιος" },
+    { value: 7, label: "Ιούλιος" },
+    { value: 8, label: "Αύγουστος" },
+    { value: 9, label: "Σεπτέμβιος" },
+    { value: 10, label: "Οκτώβριος" },
+    { value: 11, label: "Νοέμβριος" },
+    { value: 12, label: "Δεκέμβιος" }
+  ];
+
+  const yearOptions = [2026, 2027];
+</script>
+
+<div class="mb-6 flex items-center justify-between">
+  <h2 class="text-2xl font-bold text-zinc-800">{steps[rota.currentStep - 1].title}</h2>
+  <div class="justify-end">
+    <Button
+      onclick={() => (rota.currentStep += 1)}
+      variant="outline"
+      class="border-zinc-200 bg-white text-zinc-600 shadow-sm transition-all hover:bg-zinc-50 hover:text-zinc-900 active:scale-95"
+    >
+      Επόμενο
+    </Button>
+  </div>
+</div>
+
+<header class="mb-2">
+  <p class="text-sm text-zinc-500">{steps[rota.currentStep - 1].description}</p>
+</header>
+<div class="grid grid-cols-2 gap-4 rounded-2xl border border-zinc-200 bg-white p-6">
+  <div class="space-y-2">
+    <p class="ml-1 text-[10px] font-black tracking-widest text-zinc-500 uppercase">Month</p>
+    <select
+      bind:value={rota.selectedMonth}
+      class="w-full rounded-xl border border-zinc-200 bg-zinc-50 px-2 py-2 font-semibold text-zinc-600 outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/10"
+    >
+      {#each monthOptions as month}
+        <option value={month.value}>{month.label}</option>
+      {/each}
+    </select>
+  </div>
+
+  <div class="space-y-2">
+    <p class="ml-1 text-[10px] font-black tracking-widest text-zinc-500 uppercase">Year</p>
+    <select
+      bind:value={rota.selectedYear}
+      class="w-full rounded-xl border border-zinc-200 bg-zinc-50 px-2 py-2 font-semibold text-zinc-600 outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/10"
+    >
+      {#each yearOptions as year}
+        <option value={year}>{year}</option>
+      {/each}
+    </select>
+  </div>
+</div>
+
+<div class="col-span-4 mt-8 space-y-2">
+  <p class="ml-1 text-[10px] font-black tracking-widest text-zinc-500 uppercase">Holidays</p>
+
+  <Popover.Root>
+    <Popover.Trigger>
+      {#snippet child({ props })}
+        <Button
+          {...props}
+          variant="outline"
+          class="w-full justify-start rounded-xl border-zinc-200 bg-white px-4 py-5 font-normal hover:bg-zinc-50"
+        >
+          <span class="mr-2 text-zinc-500"
+            ><svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="mr-3 text-teal-800"
+            >
+              <path d="M8 2v4" /><path d="M16 2v4" /><rect
+                width="18"
+                height="18"
+                x="3"
+                y="4"
+                rx="2"
+              /><path d="m3 10 18 18" /><path d="m21 10-18 18" />
+            </svg></span
+          >
+          {#if rota.holidays.length > 0}
+            <span class="font-bold text-teal-800">
+              Επιλέχθηκαν {rota.holidays.length}
+            </span>
+          {:else}
+            <span class="text-zinc-500">Αργίες</span>
+          {/if}
+        </Button>
+      {/snippet}
+    </Popover.Trigger>
+
+    <Popover.Content
+      class="z-50 rounded-2xl border border-zinc-200 bg-white p-4"
+      sideOffset={8}
+    >
+      <Calendar.Root
+        type="multiple"
+        placeholder={rota.projectMonth}
+        bind:value={rota.holidays}
+        numberOfMonths={1}
+        class="select-none"
+      >
+        {#snippet children({ months, weekdays })}
+          <Calendar.Heading
+            class="items-center justify-between pb-4 text-center text-sm font-bold text-zinc-800"
+          />
+
+          <div class="flex flex-col gap-4 sm:flex-row">
+            {#each months as month}
+              <Calendar.Grid>
+                <Calendar.GridHead>
+                  <Calendar.GridRow class="flex pb-2">
+                    {#each weekdays as day}
+                      <Calendar.HeadCell class="w-9 text-[10px] font-bold text-zinc-500 uppercase">
+                        {day.slice(0, 2)}
+                      </Calendar.HeadCell>
+                    {/each}
+                  </Calendar.GridRow>
+                </Calendar.GridHead>
+                <Calendar.GridBody>
+                  {#each month.weeks as week}
+                    <Calendar.GridRow class="flex">
+                      {#each week as date}
+                        <Calendar.Cell {date} month={month.value} class="p-0.5">
+                          <Calendar.Day>
+                            {#snippet child({ props })}
+                              <div
+                                {...props}
+                                class="flex size-8 items-center justify-center rounded-lg text-sm transition-all
+                hover:bg-teal-100 hover:text-teal-800
+                data-outside-month:opacity-20 data-selected:bg-teal-800 data-selected:font-bold
+              data-selected:text-white
+                data-unavailable:pointer-events-none
+                data-unavailable:cursor-not-allowed
+                data-unavailable:bg-zinc-200
+                data-unavailable:text-zinc-500
+                data-unavailable:line-through
+                data-unavailable:opacity-50"
+                              >
+                                {date.day}
+                              </div>
+                            {/snippet}
+                          </Calendar.Day>
+                        </Calendar.Cell>
+                      {/each}
+                    </Calendar.GridRow>
+                  {/each}
+                </Calendar.GridBody>
+              </Calendar.Grid>
+            {/each}
+          </div>
+        {/snippet}
+      </Calendar.Root>
+    </Popover.Content>
+  </Popover.Root>
+</div>

src/routes/components/configurations/residents.svelte

@@ -0,0 +1,378 @@
+<script lang="ts">
+  import type { DateValue } from "@internationalized/date";
+
+  import { Button } from "$lib/components/ui/button/index.js";
+  import { Calendar, Popover } from "bits-ui";
+  import { rota, steps } from "../../state.svelte.js";
+</script>
+
+<div class="mb-6 flex items-center justify-between">
+  <h2 class="text-2xl font-bold text-zinc-800">{steps[rota.currentStep - 1].title}</h2>
+  <div class="justify-end">
+    <Button
+      onclick={() => (rota.currentStep -= 1)}
+      variant="outline"
+      class="border-zinc-200 bg-white text-zinc-600 shadow-sm transition-all hover:bg-zinc-50 hover:text-zinc-900 active:scale-95"
+    >
+      Προηγούμενο
+    </Button>
+
+    <Button
+      onclick={() => (rota.currentStep += 1)}
+      variant="outline"
+      class="border-zinc-200 bg-white text-zinc-600 shadow-sm transition-all hover:bg-zinc-50 hover:text-zinc-900 active:scale-95"
+    >
+      Επόμενο
+    </Button>
+  </div>
+</div>
+
+<div class="space-y-4">
+  <header class="mb-2">
+    <p class="text-sm text-zinc-500">{steps[rota.currentStep - 1].description}</p>
+  </header>
+  {#each rota.residents as resident, residentIndex (resident.id)}
+    <div
+      class="group relative flex flex-col gap-6 rounded-2xl border border-zinc-200 bg-zinc-50 p-6 transition-all hover:border-blue-200 hover:bg-white"
+    >
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <span class="text-[10px] font-black tracking-widest text-zinc-500 uppercase">
+            Resident {residentIndex + 1}
+          </span>
+        </div>
+        <button
+          onclick={() => rota.removeResident(resident.id)}
+          class="text-zinc-500 transition-colors"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            ><path d="M3 6h18" /><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path
+              d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
+            /><line x1="10" x2="10" y1="11" y2="17" /><line x1="14" x2="14" y1="11" y2="17" /></svg
+          >
+        </button>
+      </div>
+
+      <div class="grid grid-cols-12 items-end gap-6">
+        <div class="col-span-4 space-y-2">
+          <p class="ml-1 text-xs font-bold text-zinc-500 uppercase">Full Name</p>
+          <input
+            bind:value={resident.name}
+            placeholder="π.χ. Τάκης Τσουκαλάς"
+            class="w-full rounded-xl border border-zinc-200 bg-white px-4 py-2.5 text-sm outline-none hover:border-blue-200 hover:bg-white"
+          />
+        </div>
+
+        <div class="col-span-4 space-y-2">
+          <p class="ml-1 text-xs font-bold text-zinc-500 uppercase">Negative Shifts</p>
+          <Popover.Root>
+            <Popover.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="outline"
+                  class="w-full justify-start rounded-xl border-zinc-200 bg-white px-4 py-5 font-normal hover:border-blue-200 hover:bg-white"
+                >
+                  <span class="mr-2 text-zinc-500"
+                    ><svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="18"
+                      height="18"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="mr-3 text-red-800"
+                    >
+                      <path d="M8 2v4" /><path d="M16 2v4" /><rect
+                        width="18"
+                        height="18"
+                        x="3"
+                        y="4"
+                        rx="2"
+                      /><path d="m3 10 18 18" /><path d="m21 10-18 18" />
+                    </svg></span
+                  >
+                  {#if resident.negativeShifts.length > 0}
+                    <span class="font-bold text-red-800">
+                      Επιλέχθηκαν {resident.negativeShifts.length}
+                    </span>
+                  {:else}
+                    <span class="text-zinc-500">Αρνητικές</span>
+                  {/if}
+                </Button>
+              {/snippet}
+            </Popover.Trigger>
+
+            <Popover.Content
+              class="z-50 rounded-2xl border border-zinc-200 bg-white p-4"
+              sideOffset={8}
+            >
+              <Calendar.Root
+                type="multiple"
+                isDateUnavailable={(date) => {
+                  return resident.manualShifts.some(
+                    (s: { compare: (arg0: DateValue) => number }) => s.compare(date) === 0
+                  );
+                }}
+                bind:value={resident.negativeShifts}
+                bind:placeholder={rota.projectMonth}
+                numberOfMonths={1}
+                class="select-none"
+              >
+                {#snippet children({ months, weekdays })}
+                  <Calendar.Heading
+                    class="items-center justify-between pb-4 text-center text-sm font-bold text-zinc-800"
+                  />
+
+                  <div class="flex flex-col gap-4 sm:flex-row">
+                    {#each months as month}
+                      <Calendar.Grid>
+                        <Calendar.GridHead>
+                          <Calendar.GridRow class="flex pb-2">
+                            {#each weekdays as day}
+                              <Calendar.HeadCell
+                                class="w-9 text-[10px] font-bold text-zinc-500 uppercase"
+                              >
+                                {day.slice(0, 2)}
+                              </Calendar.HeadCell>
+                            {/each}
+                          </Calendar.GridRow>
+                        </Calendar.GridHead>
+                        <Calendar.GridBody>
+                          {#each month.weeks as week}
+                            <Calendar.GridRow class="flex">
+                              {#each week as date}
+                                <Calendar.Cell {date} month={month.value} class="p-0.5">
+                                  <Calendar.Day>
+                                    {#snippet child({ props })}
+                                      <div
+                                        {...props}
+                                        class="flex size-8 items-center justify-center rounded-lg text-sm transition-all
+                hover:bg-red-100 hover:text-red-800
+                data-outside-month:opacity-20 data-selected:bg-red-800 data-selected:font-bold
+              data-selected:text-white
+                data-unavailable:pointer-events-none
+                data-unavailable:cursor-not-allowed
+                data-unavailable:bg-zinc-200
+                data-unavailable:text-zinc-500
+                data-unavailable:line-through
+                data-unavailable:opacity-50"
+                                      >
+                                        {date.day}
+                                      </div>
+                                    {/snippet}
+                                  </Calendar.Day>
+                                </Calendar.Cell>
+                              {/each}
+                            </Calendar.GridRow>
+                          {/each}
+                        </Calendar.GridBody>
+                      </Calendar.Grid>
+                    {/each}
+                  </div>
+                {/snippet}
+              </Calendar.Root>
+            </Popover.Content>
+          </Popover.Root>
+        </div>
+
+        <div class="col-span-4 space-y-2">
+          <p class="ml-1 text-xs font-bold text-zinc-500 uppercase">Manual Shifts</p>
+          <Popover.Root>
+            <Popover.Trigger>
+              {#snippet child({ props })}
+                <Button
+                  {...props}
+                  variant="outline"
+                  class="w-full justify-start rounded-xl border-zinc-200 bg-white px-4 py-5 font-normal hover:border-blue-200 hover:bg-white"
+                >
+                  <span class="mr-2 text-zinc-500"
+                    ><svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="18"
+                      height="18"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="mr-3 text-green-800"
+                    >
+                      <path d="M8 2v4" /><path d="M16 2v4" /><rect
+                        width="18"
+                        height="18"
+                        x="3"
+                        y="4"
+                        rx="2"
+                      /><path d="M3 10h18" /><path d="m9 16 2 2 4-4" />
+                    </svg></span
+                  >
+                  {#if resident.manualShifts.length > 0}
+                    <span class="font-bold text-green-800">
+                      Επιλέχθηκαν {resident.manualShifts.length}
+                    </span>
+                  {:else}
+                    <span class="text-zinc-500">Εφημερίες</span>
+                  {/if}
+                </Button>
+              {/snippet}
+            </Popover.Trigger>
+
+            <Popover.Content
+              class="z-50 rounded-2xl border border-zinc-200 bg-white p-4"
+              sideOffset={8}
+            >
+              <Calendar.Root
+                type="multiple"
+                isDateUnavailable={(date) => {
+                  return resident.negativeShifts.some((s) => s.compare(date) === 0);
+                }}
+                bind:value={resident.manualShifts}
+                bind:placeholder={rota.projectMonth}
+                numberOfMonths={1}
+                class="select-none"
+              >
+                {#snippet children({ months, weekdays })}
+                  <Calendar.Heading
+                    class="items-center justify-between pb-4 text-center text-sm font-bold text-zinc-800"
+                  />
+
+                  <div class="flex flex-col gap-4 sm:flex-row">
+                    {#each months as month}
+                      <Calendar.Grid>
+                        <Calendar.GridHead>
+                          <Calendar.GridRow class="flex pb-2">
+                            {#each weekdays as day}
+                              <Calendar.HeadCell
+                                class="w-9 text-[10px] font-bold text-zinc-500 uppercase"
+                              >
+                                {day.slice(0, 2)}
+                              </Calendar.HeadCell>
+                            {/each}
+                          </Calendar.GridRow>
+                        </Calendar.GridHead>
+                        <Calendar.GridBody>
+                          {#each month.weeks as week}
+                            <Calendar.GridRow class="flex">
+                              {#each week as date}
+                                <Calendar.Cell {date} month={month.value} class="p-0.5">
+                                  <Calendar.Day>
+                                    {#snippet child({ props })}
+                                      <div
+                                        {...props}
+                                        class="flex size-8 items-center justify-center rounded-lg text-sm transition-all
+              hover:bg-green-100 hover:text-green-800
+                data-outside-month:opacity-20 data-selected:bg-green-800 data-selected:font-bold
+                data-selected:text-white
+                data-unavailable:pointer-events-none
+                data-unavailable:cursor-not-allowed
+                data-unavailable:bg-zinc-200
+                data-unavailable:text-zinc-500
+                data-unavailable:line-through
+                data-unavailable:opacity-50"
+                                      >
+                                        {date.day}
+                                      </div>
+                                    {/snippet}
+                                  </Calendar.Day>
+                                </Calendar.Cell>
+                              {/each}
+                            </Calendar.GridRow>
+                          {/each}
+                        </Calendar.GridBody>
+                      </Calendar.Grid>
+                    {/each}
+                  </div>
+                {/snippet}
+              </Calendar.Root>
+            </Popover.Content>
+          </Popover.Root>
+        </div>
+      </div>
+
+      <div
+        class="grid grid-cols-3 divide-x divide-zinc-200 rounded-xl border border-zinc-200 bg-white py-3"
+      >
+        <div class="flex flex-col items-center space-y-2 px-4">
+          <p class="text-[10px] font-black tracking-widest text-zinc-500 uppercase">Max Shifts</p>
+          <div class="flex items-center gap-2">
+            <input
+              type="number"
+              bind:value={resident.maxShifts}
+              placeholder="-"
+              class="w-16 rounded-lg border border-zinc-100 bg-zinc-50 py-1 text-center text-sm font-bold text-zinc-700 outline-none placeholder:text-zinc-300"
+            />
+          </div>
+        </div>
+
+        <div class="flex flex-col items-center space-y-2 px-4">
+          <p class="text-[10px] font-black tracking-widest text-zinc-500 uppercase">Shift Types</p>
+          <div class="flex gap-1">
+            {#each ["OpenAsFirst", "OpenAsSecond", "Closed"] as type}
+              {@const active = resident.allowedTypes.includes(type)}
+              <button
+                type="button"
+                onclick={() => {
+                  if (active && resident.allowedTypes.length > 1) {
+                    resident.allowedTypes = resident.allowedTypes.filter((t) => t !== type);
+                  } else {
+                    resident.allowedTypes.push(type);
+                  }
+                }}
+                class="rounded-md border px-2 py-1 text-[8px] font-black transition-all
+          {active
+                  ? 'border-zinc-800 bg-zinc-800 text-white'
+                  : 'border-zinc-200 bg-white text-zinc-500 hover:bg-zinc-50 hover:text-zinc-600'}"
+              >
+                {type.replace("OpenAs", "")}
+              </button>
+            {/each}
+          </div>
+        </div>
+
+        <div class="flex flex-col items-center space-y-2 px-4">
+          <p class="text-[10px] font-black tracking-widest text-zinc-500 uppercase">
+            Reduced Workload
+          </p>
+          <button
+            onclick={() => (resident.hasReducedLoad = !resident.hasReducedLoad)}
+            class="flex items-center gap-2 rounded-lg border px-3 py-1 transition-all hover:border-blue-200 hover:bg-white
+          {resident.hasReducedLoad
+              ? 'border-green-200 bg-green-50 text-green-700'
+              : 'border-zinc-200 bg-white text-zinc-500'}"
+          >
+            <div
+              class="size-2 rounded-full {resident.hasReducedLoad
+                ? 'animate-pulse bg-green-500'
+                : 'bg-zinc-300'}"
+            ></div>
+            <span class="text-[10px] font-bold uppercase">-1</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  {/each}
+
+  <div class="mt-8 flex justify-center">
+    <Button
+      onclick={() => rota.addResident()}
+      variant="outline"
+      class="border-zinc-200 bg-white text-zinc-600 shadow-sm transition-all hover:bg-zinc-50 hover:text-zinc-900 active:scale-95"
+    >
+      Προσθήκη Ειδικευόμενου
+    </Button>
+  </div>
+</div>

src/routes/components/schedule/generate.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button/index.js";
+  import { rota, steps } from "../../state.svelte.js";
+
+  function getResidentName(day: number, slot: number) {
+    const assignedResidents = rota.residents.filter((resident) =>
+      resident.manualShifts.some(
+        (shift) =>
+          shift.day === day &&
+          shift.month === rota.selectedMonth &&
+          shift.year === rota.selectedYear
+      )
+    );
+
+    const resident = assignedResidents[slot - 1];
+    return resident ? resident.name : "-";
+  }
+
+  // 2 slots in odd days, 1 slot in even days
+  function getRequiredSlots(day: number) {
+    return day % 2 === 0 ? 1 : 2;
+  }
+
+  //TODO: invoke rust?
+  // const resident = {
+  //   id: crypto.randomUUID(),
+  //   name: "",
+  //   negativeShifts: [] as CalendarDate[],
+  //   manualShifts: [] as CalendarDate[]
+  // };
+
+  // try {
+  //   let replyFrom = await invoke("add_resident", { resident });
+  //   console.log("Result:", replyFrom);
+  //   residents = [...residents, resident];
+  // } catch (error) {
+  //   console.error("Error:", error);
+  // }
+</script>
+ 
+<div class="mb-6 flex items-center justify-between">
+  <h2 class="text-2xl font-bold text-zinc-800">{steps[rota.currentStep - 1].title}</h2>
+  <div class="justify-end">
+    <Button
+      onclick={() => (rota.currentStep -= 1)}
+      variant="outline"
+      class="border-zinc-200 bg-white text-zinc-600 shadow-sm transition-all hover:bg-zinc-50 hover:text-zinc-900 active:scale-95"
+    >
+      Προηγούμενο
+    </Button>
+  </div>
+</div>
+
+<header class="mb-2">
+  <p class="text-sm text-zinc-500">{steps[rota.currentStep - 1].description}</p>
+</header>
+
+<div class="overflow-hidden rounded-xl border border-zinc-200 bg-white">
+  <div class="grid grid-cols-7 border-b border-zinc-200 bg-zinc-50/50">
+    {#each ["ΔΕΥΤΕΡΑ", "ΤΡΙΤΗ", "ΤΕΤΑΡΤΗ", "ΠΕΜΠΤΗ", "ΠΑΡΑΣΚΕΥΗ", "ΣΑΒΒΑΤΟ", "ΚΥΡΙΑΚΗ"] as dayName}
+      <div class="py-2 text-center text-[10px] font-bold tracking-widest text-zinc-500 uppercase">
+        {dayName}
+      </div>
+    {/each}
+  </div>
+  <div class="grid auto-rows-fr grid-cols-7 gap-px bg-zinc-200">
+    {#each rota.emptySlots as _}<div class="bg-zinc-50/30"></div>{/each}
+    {#each rota.daysArray as day (day)}
+      {@const slotCount = getRequiredSlots(day)}
+      <div class="group min-h-25 bg-white p-2 transition-all hover:bg-blue-50/30">
+        <div class="mb-2 flex items-center justify-between">
+          <span class="text-xs font-black text-zinc-500">{day}</span>
+        </div>
+
+        <div class="space-y-1">
+          {#if slotCount > 0}
+            <button
+              onclick={() => "handleCellClick(day, 1)"}
+              class="w-full overflow-hidden rounded border border-pink-200 bg-pink-50 px-1.5 py-1 text-left text-[10px] font-bold text-pink-600 transition-colors hover:bg-pink-100"
+            >
+              {getResidentName(day, 1)}
+            </button>
+          {/if}
+          {#if slotCount == 2}
+            <button
+              onclick={() => "handleCellClick(day, 2)"}
+              class="w-full overflow-hidden rounded border border-emerald-200 bg-emerald-50 px-1.5 py-1 text-left text-[10px] font-bold text-emerald-600 transition-colors hover:bg-emerald-100"
+            >
+              {getResidentName(day, 2)}
+            </button>
+          {/if}
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<div class="mt-8 flex justify-center gap-4">
+  <Button
+    variant="outline"
+    class="border-zinc-200 bg-white text-zinc-600 shadow-sm transition-all hover:bg-zinc-50 hover:text-zinc-900 active:scale-95"
+  >
+    Ανακατανομή
+  </Button>
+  <Button
+    onclick={() => "export adasds"}
+    variant="outline"
+    class="border-zinc-200 bg-white text-zinc-600 shadow-sm transition-all hover:bg-zinc-50 hover:text-zinc-900 active:scale-95"
+  >
+    Εξαγωγή</Button
+  >
+</div>

src/routes/components/schedule/preview.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button/index.js";
+  import { rota, steps } from "../../state.svelte.js";
+
+  function getResidentName(day: number, slot: number) {
+    const assignedResidents = rota.residents.filter((resident) =>
+      resident.manualShifts.some(
+        (shift) =>
+          shift.day === day &&
+          shift.month === rota.selectedMonth &&
+          shift.year === rota.selectedYear
+      )
+    );
+
+    const resident = assignedResidents[slot - 1];
+    return resident ? resident.name : "-";
+  }
+
+  // 2 slots in odd days, 1 slot in even days
+  function getRequiredSlots(day: number) {
+    return day % 2 === 0 ? 1 : 2;
+  }
+</script>
+ 
+<div class="mb-6 flex items-center justify-between">
+  <h2 class="text-2xl font-bold text-zinc-800">{steps[rota.currentStep - 1].title}</h2>
+  <div class="justify-end">
+    <Button
+      onclick={() => (rota.currentStep -= 1)}
+      variant="outline"
+      class="border-zinc-200 bg-white text-zinc-600 shadow-sm transition-all hover:bg-zinc-50 hover:text-zinc-900 active:scale-95"
+    >
+      Προηγούμενο
+    </Button>
+
+    <Button
+      onclick={() => (rota.currentStep += 1)}
+      variant="outline"
+      class="border-zinc-200 bg-white text-zinc-600 shadow-sm transition-all hover:bg-zinc-50 hover:text-zinc-900 active:scale-95"
+    >
+      Επόμενο
+    </Button>
+  </div>
+</div>
+
+<header class="mb-2">
+  <p class="text-sm text-zinc-500">{steps[rota.currentStep - 1].description}</p>
+</header>
+
+<div class="overflow-hidden rounded-xl border border-zinc-200 bg-white">
+  <div class="grid grid-cols-7 border-b border-zinc-200 bg-zinc-50/50">
+    {#each ["ΔΕΥΤΕΡΑ", "ΤΡΙΤΗ", "ΤΕΤΑΡΤΗ", "ΠΕΜΠΤΗ", "ΠΑΡΑΣΚΕΥΗ", "ΣΑΒΒΑΤΟ", "ΚΥΡΙΑΚΗ"] as dayName}
+      <div class="py-2 text-center text-[10px] font-bold tracking-widest text-zinc-500 uppercase">
+        {dayName}
+      </div>
+    {/each}
+  </div>
+  <div class="grid auto-rows-fr grid-cols-7 gap-px bg-zinc-200">
+    {#each rota.emptySlots as _}<div class="bg-zinc-50/30"></div>{/each}
+    {#each rota.daysArray as day (day)}
+      {@const slotCount = getRequiredSlots(day)}
+      <div class="group min-h-25 bg-white p-2 transition-all hover:bg-blue-50/30">
+        <div class="mb-2 flex items-center justify-between">
+          <span class="text-xs font-black text-zinc-500">{day}</span>
+        </div>
+
+        <div class="space-y-1">
+          {#if slotCount > 0}
+            <button
+              onclick={() => "handleCellClick(day, 1)"}
+              class="w-full overflow-hidden rounded border border-pink-200 bg-pink-50 px-1.5 py-1 text-left text-[10px] font-bold text-pink-600 transition-colors hover:bg-pink-100"
+            >
+              {getResidentName(day, 1)}
+            </button>
+          {/if}
+          {#if slotCount == 2}
+            <button
+              onclick={() => "handleCellClick(day, 2)"}
+              class="w-full overflow-hidden rounded border border-emerald-200 bg-emerald-50 px-1.5 py-1 text-left text-[10px] font-bold text-emerald-600 transition-colors hover:bg-emerald-100"
+            >
+              {getResidentName(day, 2)}
+            </button>
+          {/if}
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>

src/routes/state.svelte.ts

@@ -0,0 +1,90 @@
+// state.svelte.ts
+import { CalendarDate, getDayOfWeek } from "@internationalized/date";
+import { trace } from "@tauri-apps/plugin-log";
+
+export interface Resident {
+  id: string;
+  name: string;
+  negativeShifts: CalendarDate[];
+  manualShifts: CalendarDate[];
+  maxShifts: number | undefined;
+  allowedTypes: string[];
+  hasReducedLoad: boolean;
+}
+
+export interface ForbiddenPair {
+  id1: string;
+  id2: string;
+}
+
+export class RotaState {
+  currentStep = $state(1);
+  residents = $state<Resident[]>([]);
+  selectedMonth = $state(2);
+  selectedYear = $state(2026);
+  holidays = $state<CalendarDate[]>([]);
+  forbiddenPairs = $state<ForbiddenPair[]>([]);
+  
+  projectMonth = $derived(new CalendarDate(this.selectedYear, this.selectedMonth, 1));
+  projectMonthDays = $derived(this.projectMonth.calendar.getDaysInMonth(this.projectMonth));
+  daysArray = $derived(Array.from({ length: this.projectMonthDays }, (_, i) => i + 1));
+  emptySlots = $derived(Array.from({ length: getDayOfWeek(this.projectMonth, "en-GB") }));
+
+  addResident() {
+    this.residents.push({
+      id: crypto.randomUUID(),
+      name: "",
+      negativeShifts: [],
+      manualShifts: [],
+      maxShifts: undefined,
+      allowedTypes: ["OpenAsFirst", "OpenAsSecond", "Closed"],
+      hasReducedLoad: false,
+    });
+  }
+
+  removeResident(id: string) {
+    this.residents = this.residents.filter((p) => p.id !== id);
+  }
+
+  addForbiddenPair() {
+    if (this.residents.length < 2) return;
+    this.forbiddenPairs.push({
+      id1: this.residents[0].id,
+      id2: this.residents[1].id
+    });
+  }
+
+  removeForbiddenPair(index: number) {
+    this.forbiddenPairs.splice(index, 1);
+  }
+}
+
+export const rota = new RotaState();
+
+export const steps = [
+  {
+    id: 1,
+    title: "Βασικές Ρυθμίσεις",
+    description: "Καθόρισε την περίοδο και τις αργίες του μήνα."
+  },
+  {
+    id: 2,
+    title: "Ρύθμιση Προσωπικού",
+    description: "Δημιούργησε νέα εγγραφή ειδικευόμενου."
+  },
+  {
+    id: 3,
+    title: "Προχωρημένες Ρυθμίσεις",
+    description: "Επίλεξε ζευγάρια ατόμων που δεν μπορούν να κάνουν μαζί εφημερία."
+  },
+  {
+    id: 4,
+    title: "Επισκόπηση Προγράμματος",
+    description: "Έλεγξε το πρόγραμμα με τις υποχρεωτικές υπάρχουσες εφημερίες."
+  },
+  {
+    id: 5,
+    title: "Δημιουργία Προγράμματος",
+    description: "Τρέξε τον αλγόριθμο ανάθεσης εφημεριών, εξήγαγε τα αποτελέσματα."
+  }
+];

static/svelte.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>

static/tauri.svg

@@ -0,0 +1,6 @@
+<svg width="206" height="231" viewBox="0 0 206 231" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M143.143 84C143.143 96.1503 133.293 106 121.143 106C108.992 106 99.1426 96.1503 99.1426 84C99.1426 71.8497 108.992 62 121.143 62C133.293 62 143.143 71.8497 143.143 84Z" fill="#FFC131"/>
+<ellipse cx="84.1426" cy="147" rx="22" ry="22" transform="rotate(180 84.1426 147)" fill="#24C8DB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M166.738 154.548C157.86 160.286 148.023 164.269 137.757 166.341C139.858 160.282 141 153.774 141 147C141 144.543 140.85 142.121 140.558 139.743C144.975 138.204 149.215 136.139 153.183 133.575C162.73 127.404 170.292 118.608 174.961 108.244C179.63 97.8797 181.207 86.3876 179.502 75.1487C177.798 63.9098 172.884 53.4021 165.352 44.8883C157.82 36.3744 147.99 30.2165 137.042 27.1546C126.095 24.0926 114.496 24.2568 103.64 27.6274C92.7839 30.998 83.1319 37.4317 75.8437 46.1553C74.9102 47.2727 74.0206 48.4216 73.176 49.5993C61.9292 50.8488 51.0363 54.0318 40.9629 58.9556C44.2417 48.4586 49.5653 38.6591 56.679 30.1442C67.0505 17.7298 80.7861 8.57426 96.2354 3.77762C111.685 -1.01901 128.19 -1.25267 143.769 3.10474C159.348 7.46215 173.337 16.2252 184.056 28.3411C194.775 40.457 201.767 55.4101 204.193 71.404C206.619 87.3978 204.374 103.752 197.73 118.501C191.086 133.25 180.324 145.767 166.738 154.548ZM41.9631 74.275L62.5557 76.8042C63.0459 72.813 63.9401 68.9018 65.2138 65.1274C57.0465 67.0016 49.2088 70.087 41.9631 74.275Z" fill="#FFC131"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M38.4045 76.4519C47.3493 70.6709 57.2677 66.6712 67.6171 64.6132C65.2774 70.9669 64 77.8343 64 85.0001C64 87.1434 64.1143 89.26 64.3371 91.3442C60.0093 92.8732 55.8533 94.9092 51.9599 97.4256C42.4128 103.596 34.8505 112.392 30.1816 122.756C25.5126 133.12 23.9357 144.612 25.6403 155.851C27.3449 167.09 32.2584 177.598 39.7906 186.112C47.3227 194.626 57.153 200.784 68.1003 203.846C79.0476 206.907 90.6462 206.743 101.502 203.373C112.359 200.002 122.011 193.568 129.299 184.845C130.237 183.722 131.131 182.567 131.979 181.383C143.235 180.114 154.132 176.91 164.205 171.962C160.929 182.49 155.596 192.319 148.464 200.856C138.092 213.27 124.357 222.426 108.907 227.222C93.458 232.019 76.9524 232.253 61.3736 227.895C45.7948 223.538 31.8055 214.775 21.0867 202.659C10.3679 190.543 3.37557 175.59 0.949823 159.596C-1.47592 143.602 0.768139 127.248 7.41237 112.499C14.0566 97.7497 24.8183 85.2327 38.4045 76.4519ZM163.062 156.711L163.062 156.711C162.954 156.773 162.846 156.835 162.738 156.897C162.846 156.835 162.954 156.773 163.062 156.711Z" fill="#24C8DB"/>
+</svg>

static/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

svelte.config.js

@@ -0,0 +1,18 @@
+// Tauri doesn't have a Node.js server to do proper SSR
+// so we use adapter-static with a fallback to index.html to put the site in SPA mode
+// See: https://svelte.dev/docs/kit/single-page-apps
+// See: https://v2.tauri.app/start/frontend/sveltekit/ for more info
+import adapter from "@sveltejs/adapter-static";
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  preprocess: vitePreprocess(),
+  kit: {
+    adapter: adapter({
+      fallback: "index.html",
+    }),
+  },
+};
+
+export default config;

tailwind.config.js

@@ -0,0 +1,7 @@
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "moduleResolution": "bundler",
+
+    "baseUrl": ".",
+    "paths": {
+      "$lib": ["./src/lib"],
+      "$lib/*": ["./src/lib/*"]
+    }
+  }
+
+  // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+  // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+  
+  //
+  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+  // from the referenced tsconfig.json - TypeScript does not merge them in
+}

vite.config.js

@@ -0,0 +1,33 @@
+import { defineConfig } from "vite";
+import { sveltekit } from "@sveltejs/kit/vite";
+import tailwindcss from "@tailwindcss/vite";
+
+// @ts-expect-error process is a nodejs global
+const host = process.env.TAURI_DEV_HOST;
+
+// https://vite.dev/config/
+export default defineConfig(async () => ({
+  plugins: [sveltekit()],
+
+  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
+  //
+  // 1. prevent Vite from obscuring rust errors
+  clearScreen: false,
+  // 2. tauri expects a fixed port, fail if that port is not available
+  server: {
+    port: 1420,
+    strictPort: true,
+    host: host || false,
+    hmr: host
+      ? {
+          protocol: "ws",
+          host,
+          port: 1421,
+        }
+      : undefined,
+    watch: {
+      // 3. tell Vite to ignore watching `src-tauri`
+      ignored: ["**/src-tauri/**"],
+    },
+  },
+}));