From cde21e9286a585aa50e039aa48ecb81c521c5e05 Mon Sep 17 00:00:00 2001
From: Shaheed Azaad <4594-shaheedazaad@users.noreply.gitlab.pavlovia.org>
Date: Mon, 14 Jul 2025 00:24:44 +0200
Subject: [PATCH] fixed psychoJS serving

---
 components.json                               |  16 ++
 drizzle/0000_stiff_miracleman.sql             |   4 +
 drizzle/meta/0000_snapshot.json               | 252 +++++++++++++++++
 drizzle/meta/_journal.json                    |  13 +
 e2e/s3-upload-download.test.ts                |  46 +++
 env.example                                   |   8 +
 src/lib/components/ui/button/button.svelte    |  82 ++++++
 src/lib/components/ui/button/index.ts         |  17 ++
 src/lib/components/ui/card/card-action.svelte |  20 ++
 .../components/ui/card/card-content.svelte    |  15 +
 .../ui/card/card-description.svelte           |  20 ++
 src/lib/components/ui/card/card-footer.svelte |  20 ++
 src/lib/components/ui/card/card-header.svelte |  23 ++
 src/lib/components/ui/card/card-title.svelte  |  20 ++
 src/lib/components/ui/card/card.svelte        |  23 ++
 src/lib/components/ui/card/index.ts           |  25 ++
 .../components/ui/checkbox/checkbox.svelte    |  36 +++
 src/lib/components/ui/checkbox/index.ts       |   6 +
 src/lib/components/ui/form/form-button.svelte |   7 +
 .../ui/form/form-description.svelte           |  17 ++
 .../ui/form/form-element-field.svelte         |  24 ++
 .../ui/form/form-field-errors.svelte          |  30 ++
 src/lib/components/ui/form/form-field.svelte  |  29 ++
 .../components/ui/form/form-fieldset.svelte   |  15 +
 src/lib/components/ui/form/form-label.svelte  |  24 ++
 src/lib/components/ui/form/form-legend.svelte |  16 ++
 src/lib/components/ui/form/index.ts           |  33 +++
 src/lib/components/ui/input/index.ts          |   7 +
 src/lib/components/ui/input/input.svelte      |  51 ++++
 src/lib/components/ui/label/index.ts          |   7 +
 src/lib/components/ui/label/label.svelte      |  20 ++
 src/lib/components/ui/select/index.ts         |  37 +++
 .../ui/select/select-content.svelte           |  40 +++
 .../ui/select/select-group-heading.svelte     |  21 ++
 .../components/ui/select/select-group.svelte  |   7 +
 .../components/ui/select/select-item.svelte   |  38 +++
 .../components/ui/select/select-label.svelte  |  20 ++
 .../select/select-scroll-down-button.svelte   |  20 ++
 .../ui/select/select-scroll-up-button.svelte  |  20 ++
 .../ui/select/select-separator.svelte         |  18 ++
 .../ui/select/select-trigger.svelte           |  29 ++
 .../components/ui/select/select-value.svelte  |  14 +
 src/lib/components/ui/separator/index.ts      |   7 +
 .../components/ui/separator/separator.svelte  |  20 ++
 src/lib/components/ui/sheet/index.ts          |  36 +++
 .../components/ui/sheet/sheet-close.svelte    |   7 +
 .../components/ui/sheet/sheet-content.svelte  |  58 ++++
 .../ui/sheet/sheet-description.svelte         |  17 ++
 .../components/ui/sheet/sheet-footer.svelte   |  20 ++
 .../components/ui/sheet/sheet-header.svelte   |  20 ++
 .../components/ui/sheet/sheet-overlay.svelte  |  20 ++
 .../components/ui/sheet/sheet-title.svelte    |  17 ++
 .../components/ui/sheet/sheet-trigger.svelte  |   7 +
 src/lib/components/ui/sidebar/constants.ts    |   6 +
 .../components/ui/sidebar/context.svelte.ts   |  81 ++++++
 src/lib/components/ui/sidebar/index.ts        |  75 +++++
 .../ui/sidebar/sidebar-content.svelte         |  24 ++
 .../ui/sidebar/sidebar-footer.svelte          |  21 ++
 .../ui/sidebar/sidebar-group-action.svelte    |  36 +++
 .../ui/sidebar/sidebar-group-content.svelte   |  21 ++
 .../ui/sidebar/sidebar-group-label.svelte     |  34 +++
 .../ui/sidebar/sidebar-group.svelte           |  21 ++
 .../ui/sidebar/sidebar-header.svelte          |  21 ++
 .../ui/sidebar/sidebar-input.svelte           |  21 ++
 .../ui/sidebar/sidebar-inset.svelte           |  24 ++
 .../ui/sidebar/sidebar-menu-action.svelte     |  43 +++
 .../ui/sidebar/sidebar-menu-badge.svelte      |  29 ++
 .../ui/sidebar/sidebar-menu-button.svelte     | 103 +++++++
 .../ui/sidebar/sidebar-menu-item.svelte       |  21 ++
 .../ui/sidebar/sidebar-menu-skeleton.svelte   |  36 +++
 .../ui/sidebar/sidebar-menu-sub-button.svelte |  43 +++
 .../ui/sidebar/sidebar-menu-sub-item.svelte   |  21 ++
 .../ui/sidebar/sidebar-menu-sub.svelte        |  25 ++
 .../components/ui/sidebar/sidebar-menu.svelte |  21 ++
 .../ui/sidebar/sidebar-provider.svelte        |  53 ++++
 .../components/ui/sidebar/sidebar-rail.svelte |  36 +++
 .../ui/sidebar/sidebar-separator.svelte       |  19 ++
 .../ui/sidebar/sidebar-trigger.svelte         |  35 +++
 src/lib/components/ui/sidebar/sidebar.svelte  | 104 +++++++
 src/lib/components/ui/skeleton/index.ts       |   7 +
 .../components/ui/skeleton/skeleton.svelte    |  17 ++
 src/lib/components/ui/table/index.ts          |  28 ++
 src/lib/components/ui/table/table-body.svelte |  20 ++
 .../components/ui/table/table-caption.svelte  |  20 ++
 src/lib/components/ui/table/table-cell.svelte |  23 ++
 .../components/ui/table/table-footer.svelte   |  20 ++
 src/lib/components/ui/table/table-head.svelte |  23 ++
 .../components/ui/table/table-header.svelte   |  20 ++
 src/lib/components/ui/table/table-row.svelte  |  23 ++
 src/lib/components/ui/table/table.svelte      |  22 ++
 src/lib/components/ui/tooltip/index.ts        |  21 ++
 .../ui/tooltip/tooltip-content.svelte         |  47 ++++
 .../ui/tooltip/tooltip-trigger.svelte         |   7 +
 src/lib/hooks/is-mobile.svelte.ts             |   9 +
 src/lib/server/s3.ts                          |  18 ++
 src/lib/utils.ts                              |  13 +
 src/routes/api/experiment/+server.ts          |  71 +++++
 .../api/experiment/[id]/files/+server.ts      |  70 +++++
 src/routes/api/login/+server.ts               |  25 ++
 src/routes/api/register/+server.ts            |  25 ++
 src/routes/experiment/[id]/+page.svelte       | 262 ++++++++++++++++++
 src/routes/experiment/[id]/FileBrowser.svelte |  56 ++++
 src/routes/experiment/create/+page.svelte     | 102 +++++++
 src/routes/images/[...path]/+server.ts        |  53 ++++
 .../run/[experimentId]/[...path]/+server.ts   | 256 +++++++++++++++++
 .../psychoJS/surveyJS/survey.grey_style.css   | 116 ++++++++
 .../lib/psychoJS/surveyJS/survey.widgets.css  | 207 ++++++++++++++
 107 files changed, 3974 insertions(+)
 create mode 100644 components.json
 create mode 100644 drizzle/0000_stiff_miracleman.sql
 create mode 100644 drizzle/meta/0000_snapshot.json
 create mode 100644 drizzle/meta/_journal.json
 create mode 100644 e2e/s3-upload-download.test.ts
 create mode 100644 env.example
 create mode 100644 src/lib/components/ui/button/button.svelte
 create mode 100644 src/lib/components/ui/button/index.ts
 create mode 100644 src/lib/components/ui/card/card-action.svelte
 create mode 100644 src/lib/components/ui/card/card-content.svelte
 create mode 100644 src/lib/components/ui/card/card-description.svelte
 create mode 100644 src/lib/components/ui/card/card-footer.svelte
 create mode 100644 src/lib/components/ui/card/card-header.svelte
 create mode 100644 src/lib/components/ui/card/card-title.svelte
 create mode 100644 src/lib/components/ui/card/card.svelte
 create mode 100644 src/lib/components/ui/card/index.ts
 create mode 100644 src/lib/components/ui/checkbox/checkbox.svelte
 create mode 100644 src/lib/components/ui/checkbox/index.ts
 create mode 100644 src/lib/components/ui/form/form-button.svelte
 create mode 100644 src/lib/components/ui/form/form-description.svelte
 create mode 100644 src/lib/components/ui/form/form-element-field.svelte
 create mode 100644 src/lib/components/ui/form/form-field-errors.svelte
 create mode 100644 src/lib/components/ui/form/form-field.svelte
 create mode 100644 src/lib/components/ui/form/form-fieldset.svelte
 create mode 100644 src/lib/components/ui/form/form-label.svelte
 create mode 100644 src/lib/components/ui/form/form-legend.svelte
 create mode 100644 src/lib/components/ui/form/index.ts
 create mode 100644 src/lib/components/ui/input/index.ts
 create mode 100644 src/lib/components/ui/input/input.svelte
 create mode 100644 src/lib/components/ui/label/index.ts
 create mode 100644 src/lib/components/ui/label/label.svelte
 create mode 100644 src/lib/components/ui/select/index.ts
 create mode 100644 src/lib/components/ui/select/select-content.svelte
 create mode 100644 src/lib/components/ui/select/select-group-heading.svelte
 create mode 100644 src/lib/components/ui/select/select-group.svelte
 create mode 100644 src/lib/components/ui/select/select-item.svelte
 create mode 100644 src/lib/components/ui/select/select-label.svelte
 create mode 100644 src/lib/components/ui/select/select-scroll-down-button.svelte
 create mode 100644 src/lib/components/ui/select/select-scroll-up-button.svelte
 create mode 100644 src/lib/components/ui/select/select-separator.svelte
 create mode 100644 src/lib/components/ui/select/select-trigger.svelte
 create mode 100644 src/lib/components/ui/select/select-value.svelte
 create mode 100644 src/lib/components/ui/separator/index.ts
 create mode 100644 src/lib/components/ui/separator/separator.svelte
 create mode 100644 src/lib/components/ui/sheet/index.ts
 create mode 100644 src/lib/components/ui/sheet/sheet-close.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-content.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-description.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-footer.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-header.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-overlay.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-title.svelte
 create mode 100644 src/lib/components/ui/sheet/sheet-trigger.svelte
 create mode 100644 src/lib/components/ui/sidebar/constants.ts
 create mode 100644 src/lib/components/ui/sidebar/context.svelte.ts
 create mode 100644 src/lib/components/ui/sidebar/index.ts
 create mode 100644 src/lib/components/ui/sidebar/sidebar-content.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-footer.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-group-action.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-group-content.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-group-label.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-group.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-header.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-input.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-inset.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-menu-action.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-menu-button.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-menu-item.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-menu.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-provider.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-rail.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-separator.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar-trigger.svelte
 create mode 100644 src/lib/components/ui/sidebar/sidebar.svelte
 create mode 100644 src/lib/components/ui/skeleton/index.ts
 create mode 100644 src/lib/components/ui/skeleton/skeleton.svelte
 create mode 100644 src/lib/components/ui/table/index.ts
 create mode 100644 src/lib/components/ui/table/table-body.svelte
 create mode 100644 src/lib/components/ui/table/table-caption.svelte
 create mode 100644 src/lib/components/ui/table/table-cell.svelte
 create mode 100644 src/lib/components/ui/table/table-footer.svelte
 create mode 100644 src/lib/components/ui/table/table-head.svelte
 create mode 100644 src/lib/components/ui/table/table-header.svelte
 create mode 100644 src/lib/components/ui/table/table-row.svelte
 create mode 100644 src/lib/components/ui/table/table.svelte
 create mode 100644 src/lib/components/ui/tooltip/index.ts
 create mode 100644 src/lib/components/ui/tooltip/tooltip-content.svelte
 create mode 100644 src/lib/components/ui/tooltip/tooltip-trigger.svelte
 create mode 100644 src/lib/hooks/is-mobile.svelte.ts
 create mode 100644 src/lib/server/s3.ts
 create mode 100644 src/lib/utils.ts
 create mode 100644 src/routes/api/experiment/+server.ts
 create mode 100644 src/routes/api/experiment/[id]/files/+server.ts
 create mode 100644 src/routes/api/login/+server.ts
 create mode 100644 src/routes/api/register/+server.ts
 create mode 100644 src/routes/experiment/[id]/+page.svelte
 create mode 100644 src/routes/experiment/[id]/FileBrowser.svelte
 create mode 100644 src/routes/experiment/create/+page.svelte
 create mode 100644 src/routes/images/[...path]/+server.ts
 create mode 100644 src/routes/public/run/[experimentId]/[...path]/+server.ts
 create mode 100644 static/lib/psychoJS/surveyJS/survey.grey_style.css
 create mode 100644 static/lib/psychoJS/surveyJS/survey.widgets.css

diff --git a/components.json b/components.json
new file mode 100644
index 0000000..c5d91b4
--- /dev/null
+++ b/components.json
@@ -0,0 +1,16 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"tailwind": {
+		"css": "src/app.css",
+		"baseColor": "slate"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks",
+		"lib": "$lib"
+	},
+	"typescript": true,
+	"registry": "https://shadcn-svelte.com/registry"
+}
diff --git a/drizzle/0000_stiff_miracleman.sql b/drizzle/0000_stiff_miracleman.sql
new file mode 100644
index 0000000..e7d1362
--- /dev/null
+++ b/drizzle/0000_stiff_miracleman.sql
@@ -0,0 +1,4 @@
+DROP TYPE IF EXISTS "public"."experiment_type";
+CREATE TYPE "public"."experiment_type" AS ENUM('jsPsych', 'PsychoJS');
+ALTER TABLE "experiment" ADD COLUMN "multiplayer" boolean DEFAULT false NOT NULL;
+ALTER TABLE "experiment" ADD COLUMN "type" "experiment_type" NOT NULL;
\ No newline at end of file
diff --git a/drizzle/meta/0000_snapshot.json b/drizzle/meta/0000_snapshot.json
new file mode 100644
index 0000000..98044b2
--- /dev/null
+++ b/drizzle/meta/0000_snapshot.json
@@ -0,0 +1,252 @@
+{
+  "id": "0d17b791-c2c5-4f27-885d-20386dae844f",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.experiment": {
+      "name": "experiment",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "dummy": {
+          "name": "dummy",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_by": {
+          "name": "created_by",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "multiplayer": {
+          "name": "multiplayer",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "type": {
+          "name": "type",
+          "type": "experiment_type",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "experiment_created_by_user_id_fk": {
+          "name": "experiment_created_by_user_id_fk",
+          "tableFrom": "experiment",
+          "tableTo": "user",
+          "columnsFrom": [
+            "created_by"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.participant_session": {
+      "name": "participant_session",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "experiment_id": {
+          "name": "experiment_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "ip_address": {
+          "name": "ip_address",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "user_agent": {
+          "name": "user_agent",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "participant_session_experiment_id_experiment_id_fk": {
+          "name": "participant_session_experiment_id_experiment_id_fk",
+          "tableFrom": "participant_session",
+          "tableTo": "experiment",
+          "columnsFrom": [
+            "experiment_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.session": {
+      "name": "session",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "session_user_id_user_id_fk": {
+          "name": "session_user_id_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.user": {
+      "name": "user",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "age": {
+          "name": "age",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "password_hash": {
+          "name": "password_hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "user_username_unique": {
+          "name": "user_username_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "username"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {
+    "public.experiment_type": {
+      "name": "experiment_type",
+      "schema": "public",
+      "values": [
+        "jsPsych",
+        "PsychoJS"
+      ]
+    }
+  },
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}
\ No newline at end of file
diff --git a/drizzle/meta/_journal.json b/drizzle/meta/_journal.json
new file mode 100644
index 0000000..90d97b5
--- /dev/null
+++ b/drizzle/meta/_journal.json
@@ -0,0 +1,13 @@
+{
+  "version": "7",
+  "dialect": "postgresql",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "7",
+      "when": 1752388656434,
+      "tag": "0000_grey_domino",
+      "breakpoints": true
+    }
+  ]
+}
\ No newline at end of file
diff --git a/e2e/s3-upload-download.test.ts b/e2e/s3-upload-download.test.ts
new file mode 100644
index 0000000..01a6df3
--- /dev/null
+++ b/e2e/s3-upload-download.test.ts
@@ -0,0 +1,46 @@
+import { S3Client, PutObjectCommand, GetObjectCommand } from '@aws-sdk/client-s3';
+import { randomUUID } from 'crypto';
+import { expect, test } from 'vitest';
+import 'dotenv/config';
+
+const s3 = new S3Client({
+  region: 'us-east-1',
+  endpoint: process.env.S3_ENDPOINT,
+  credentials: {
+    accessKeyId: process.env.S3_ACCESS_KEY!,
+    secretAccessKey: process.env.S3_SECRET_KEY!,
+  },
+  forcePathStyle: true,
+});
+
+const BUCKET = process.env.S3_BUCKET!;
+
+test('can upload and download a file from S3', async () => {
+  const key = `test-file-${randomUUID()}.txt`;
+  const content = 'hello s3 world!';
+
+  // Upload
+  await s3.send(new PutObjectCommand({
+    Bucket: BUCKET,
+    Key: key,
+    Body: content,
+  }));
+
+  // Download
+  const getObj = await s3.send(new GetObjectCommand({
+    Bucket: BUCKET,
+    Key: key,
+  }));
+  const downloaded = await streamToString(getObj.Body);
+
+  expect(downloaded).toBe(content);
+});
+
+function streamToString(stream: any): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const chunks: any[] = [];
+    stream.on('data', (chunk: any) => chunks.push(chunk));
+    stream.on('error', reject);
+    stream.on('end', () => resolve(Buffer.concat(chunks).toString('utf-8')));
+  });
+} 
\ No newline at end of file
diff --git a/env.example b/env.example
new file mode 100644
index 0000000..37965ad
--- /dev/null
+++ b/env.example
@@ -0,0 +1,8 @@
+DATABASE_URL="postgres://root:mysecretpassword@localhost:5432/local"
+ENVIRONMENT=development
+PUBLIC_APP_NAME="cog-socket"
+S3_ENDPOINT="http://localhost:9000"
+S3_ACCESS_KEY="minioadmin"
+S3_SECRET_KEY="minioadmin"
+S3_BUCKET="cog-socket"
+BASE_URL="http://localhost:5173"
\ No newline at end of file
diff --git a/src/lib/components/ui/button/button.svelte b/src/lib/components/ui/button/button.svelte
new file mode 100644
index 0000000..8c96a0c
--- /dev/null
+++ b/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 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+				destructive:
+					"bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
+				outline:
+					"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
+				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+				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",
+			},
+		},
+		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}
+		on:click
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		on:click
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts
new file mode 100644
index 0000000..fb585d7
--- /dev/null
+++ b/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,
+};
diff --git a/src/lib/components/ui/card/card-action.svelte b/src/lib/components/ui/card/card-action.svelte
new file mode 100644
index 0000000..cc36c56
--- /dev/null
+++ b/src/lib/components/ui/card/card-action.svelte
@@ -0,0 +1,20 @@
+<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<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card-content.svelte b/src/lib/components/ui/card/card-content.svelte
new file mode 100644
index 0000000..bc90b83
--- /dev/null
+++ b/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,15 @@
+<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} data-slot="card-content" class={cn("px-6", className)} {...restProps}>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card-description.svelte b/src/lib/components/ui/card/card-description.svelte
new file mode 100644
index 0000000..9b20ac7
--- /dev/null
+++ b/src/lib/components/ui/card/card-description.svelte
@@ -0,0 +1,20 @@
+<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<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="card-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>
diff --git a/src/lib/components/ui/card/card-footer.svelte b/src/lib/components/ui/card/card-footer.svelte
new file mode 100644
index 0000000..cf43353
--- /dev/null
+++ b/src/lib/components/ui/card/card-footer.svelte
@@ -0,0 +1,20 @@
+<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<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn("[.border-t]:pt-6 flex items-center px-6", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card-header.svelte b/src/lib/components/ui/card/card-header.svelte
new file mode 100644
index 0000000..8a91abb
--- /dev/null
+++ b/src/lib/components/ui/card/card-header.svelte
@@ -0,0 +1,23 @@
+<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<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={cn(
+		"@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card-title.svelte b/src/lib/components/ui/card/card-title.svelte
new file mode 100644
index 0000000..22586e6
--- /dev/null
+++ b/src/lib/components/ui/card/card-title.svelte
@@ -0,0 +1,20 @@
+<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}
+	data-slot="card-title"
+	class={cn("font-semibold leading-none", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card.svelte b/src/lib/components/ui/card/card.svelte
new file mode 100644
index 0000000..99448cc
--- /dev/null
+++ b/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,23 @@
+<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}
+	data-slot="card"
+	class={cn(
+		"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/index.ts b/src/lib/components/ui/card/index.ts
new file mode 100644
index 0000000..4d3fce4
--- /dev/null
+++ b/src/lib/components/ui/card/index.ts
@@ -0,0 +1,25 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+import Action from "./card-action.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	Action,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+	Action as CardAction,
+};
diff --git a/src/lib/components/ui/checkbox/checkbox.svelte b/src/lib/components/ui/checkbox/checkbox.svelte
new file mode 100644
index 0000000..1622e05
--- /dev/null
+++ b/src/lib/components/ui/checkbox/checkbox.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import MinusIcon from "@lucide/svelte/icons/minus";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+	bind:ref
+	data-slot="checkbox"
+	class={cn(
+		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:checked
+	bind:indeterminate
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<div data-slot="checkbox-indicator" class="text-current transition-none">
+			{#if checked}
+				<CheckIcon class="size-3.5" />
+			{:else if indeterminate}
+				<MinusIcon class="size-3.5" />
+			{/if}
+		</div>
+	{/snippet}
+</CheckboxPrimitive.Root>
diff --git a/src/lib/components/ui/checkbox/index.ts b/src/lib/components/ui/checkbox/index.ts
new file mode 100644
index 0000000..6d92d94
--- /dev/null
+++ b/src/lib/components/ui/checkbox/index.ts
@@ -0,0 +1,6 @@
+import Root from "./checkbox.svelte";
+export {
+	Root,
+	//
+	Root as Checkbox,
+};
diff --git a/src/lib/components/ui/form/form-button.svelte b/src/lib/components/ui/form/form-button.svelte
new file mode 100644
index 0000000..cc0c590
--- /dev/null
+++ b/src/lib/components/ui/form/form-button.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import * as Button from "$lib/components/ui/button/index.js";
+
+	let { ref = $bindable(null), ...restProps }: Button.Props = $props();
+</script>
+
+<Button.Root bind:ref type="submit" {...restProps} />
diff --git a/src/lib/components/ui/form/form-description.svelte b/src/lib/components/ui/form/form-description.svelte
new file mode 100644
index 0000000..a5f42be
--- /dev/null
+++ b/src/lib/components/ui/form/form-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import * as FormPrimitive from "formsnap";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChild<FormPrimitive.DescriptionProps> = $props();
+</script>
+
+<FormPrimitive.Description
+	bind:ref
+	data-slot="form-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/form/form-element-field.svelte b/src/lib/components/ui/form/form-element-field.svelte
new file mode 100644
index 0000000..c3ba111
--- /dev/null
+++ b/src/lib/components/ui/form/form-element-field.svelte
@@ -0,0 +1,24 @@
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
+	import * as FormPrimitive from "formsnap";
+	import type { FormPathLeaves } from "sveltekit-superforms";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		form,
+		name,
+		children: childrenProp,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> &
+		FormPrimitive.ElementFieldProps<T, U> = $props();
+</script>
+
+<FormPrimitive.ElementField {form} {name}>
+	{#snippet children({ constraints, errors, tainted, value })}
+		<div bind:this={ref} class={cn("space-y-2", className)} {...restProps}>
+			{@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })}
+		</div>
+	{/snippet}
+</FormPrimitive.ElementField>
diff --git a/src/lib/components/ui/form/form-field-errors.svelte b/src/lib/components/ui/form/form-field-errors.svelte
new file mode 100644
index 0000000..b4c6fba
--- /dev/null
+++ b/src/lib/components/ui/form/form-field-errors.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import * as FormPrimitive from "formsnap";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		errorClasses,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<FormPrimitive.FieldErrorsProps> & {
+		errorClasses?: string | undefined | null;
+	} = $props();
+</script>
+
+<FormPrimitive.FieldErrors
+	bind:ref
+	class={cn("text-destructive text-sm font-medium", className)}
+	{...restProps}
+>
+	{#snippet children({ errors, errorProps })}
+		{#if childrenProp}
+			{@render childrenProp({ errors, errorProps })}
+		{:else}
+			{#each errors as error (error)}
+				<div {...errorProps} class={cn(errorClasses)}>{error}</div>
+			{/each}
+		{/if}
+	{/snippet}
+</FormPrimitive.FieldErrors>
diff --git a/src/lib/components/ui/form/form-field.svelte b/src/lib/components/ui/form/form-field.svelte
new file mode 100644
index 0000000..7481fda
--- /dev/null
+++ b/src/lib/components/ui/form/form-field.svelte
@@ -0,0 +1,29 @@
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
+	import * as FormPrimitive from "formsnap";
+	import type { FormPath } from "sveltekit-superforms";
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		form,
+		name,
+		children: childrenProp,
+		...restProps
+	}: FormPrimitive.FieldProps<T, U> &
+		WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+</script>
+
+<FormPrimitive.Field {form} {name}>
+	{#snippet children({ constraints, errors, tainted, value })}
+		<div
+			bind:this={ref}
+			data-slot="form-item"
+			class={cn("space-y-2", className)}
+			{...restProps}
+		>
+			{@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })}
+		</div>
+	{/snippet}
+</FormPrimitive.Field>
diff --git a/src/lib/components/ui/form/form-fieldset.svelte b/src/lib/components/ui/form/form-fieldset.svelte
new file mode 100644
index 0000000..2c85857
--- /dev/null
+++ b/src/lib/components/ui/form/form-fieldset.svelte
@@ -0,0 +1,15 @@
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
+	import * as FormPrimitive from "formsnap";
+	import type { FormPath } from "sveltekit-superforms";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		form,
+		name,
+		...restProps
+	}: WithoutChild<FormPrimitive.FieldsetProps<T, U>> = $props();
+</script>
+
+<FormPrimitive.Fieldset bind:ref {form} {name} class={cn("space-y-2", className)} {...restProps} />
diff --git a/src/lib/components/ui/form/form-label.svelte b/src/lib/components/ui/form/form-label.svelte
new file mode 100644
index 0000000..8749360
--- /dev/null
+++ b/src/lib/components/ui/form/form-label.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import * as FormPrimitive from "formsnap";
+	import { Label } from "$lib/components/ui/label/index.js";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: WithoutChild<FormPrimitive.LabelProps> = $props();
+</script>
+
+<FormPrimitive.Label {...restProps} bind:ref>
+	{#snippet child({ props })}
+		<Label
+			{...props}
+			data-slot="form-label"
+			class={cn("data-[fs-error]:text-destructive", className)}
+		>
+			{@render children?.()}
+		</Label>
+	{/snippet}
+</FormPrimitive.Label>
diff --git a/src/lib/components/ui/form/form-legend.svelte b/src/lib/components/ui/form/form-legend.svelte
new file mode 100644
index 0000000..9d52f6a
--- /dev/null
+++ b/src/lib/components/ui/form/form-legend.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import * as FormPrimitive from "formsnap";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChild<FormPrimitive.LegendProps> = $props();
+</script>
+
+<FormPrimitive.Legend
+	bind:ref
+	class={cn("data-[fs-error]:text-destructive text-sm font-medium leading-none", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/form/index.ts b/src/lib/components/ui/form/index.ts
new file mode 100644
index 0000000..0713927
--- /dev/null
+++ b/src/lib/components/ui/form/index.ts
@@ -0,0 +1,33 @@
+import * as FormPrimitive from "formsnap";
+import Description from "./form-description.svelte";
+import Label from "./form-label.svelte";
+import FieldErrors from "./form-field-errors.svelte";
+import Field from "./form-field.svelte";
+import Fieldset from "./form-fieldset.svelte";
+import Legend from "./form-legend.svelte";
+import ElementField from "./form-element-field.svelte";
+import Button from "./form-button.svelte";
+
+const Control = FormPrimitive.Control;
+
+export {
+	Field,
+	Control,
+	Label,
+	Button,
+	FieldErrors,
+	Description,
+	Fieldset,
+	Legend,
+	ElementField,
+	//
+	Field as FormField,
+	Control as FormControl,
+	Description as FormDescription,
+	Label as FormLabel,
+	FieldErrors as FormFieldErrors,
+	Fieldset as FormFieldset,
+	Legend as FormLegend,
+	ElementField as FormElementField,
+	Button as FormButton,
+};
diff --git a/src/lib/components/ui/input/index.ts b/src/lib/components/ui/input/index.ts
new file mode 100644
index 0000000..f47b6d3
--- /dev/null
+++ b/src/lib/components/ui/input/index.ts
@@ -0,0 +1,7 @@
+import Root from "./input.svelte";
+
+export {
+	Root,
+	//
+	Root as Input,
+};
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
new file mode 100644
index 0000000..19c6dae
--- /dev/null
+++ b/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+
+	type Props = WithElementRef<
+		Omit<HTMLInputAttributes, "type"> &
+			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+	>;
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		files = $bindable(),
+		class: className,
+		...restProps
+	}: Props = $props();
+</script>
+
+{#if type === "file"}
+	<input
+		bind:this={ref}
+		data-slot="input"
+		class={cn(
+			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+			className
+		)}
+		type="file"
+		bind:files
+		bind:value
+		{...restProps}
+	/>
+{:else}
+	<input
+		bind:this={ref}
+		data-slot="input"
+		class={cn(
+			"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+			className
+		)}
+		{type}
+		bind:value
+		{...restProps}
+	/>
+{/if}
diff --git a/src/lib/components/ui/label/index.ts b/src/lib/components/ui/label/index.ts
new file mode 100644
index 0000000..8bfca0b
--- /dev/null
+++ b/src/lib/components/ui/label/index.ts
@@ -0,0 +1,7 @@
+import Root from "./label.svelte";
+
+export {
+	Root,
+	//
+	Root as Label,
+};
diff --git a/src/lib/components/ui/label/label.svelte b/src/lib/components/ui/label/label.svelte
new file mode 100644
index 0000000..d0afda3
--- /dev/null
+++ b/src/lib/components/ui/label/label.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: LabelPrimitive.RootProps = $props();
+</script>
+
+<LabelPrimitive.Root
+	bind:ref
+	data-slot="label"
+	class={cn(
+		"flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/select/index.ts b/src/lib/components/ui/select/index.ts
new file mode 100644
index 0000000..9e8d3e9
--- /dev/null
+++ b/src/lib/components/ui/select/index.ts
@@ -0,0 +1,37 @@
+import { Select as SelectPrimitive } from "bits-ui";
+
+import Group from "./select-group.svelte";
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+import GroupHeading from "./select-group-heading.svelte";
+
+const Root = SelectPrimitive.Root;
+
+export {
+	Root,
+	Group,
+	Label,
+	Item,
+	Content,
+	Trigger,
+	Separator,
+	ScrollDownButton,
+	ScrollUpButton,
+	GroupHeading,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator,
+	ScrollDownButton as SelectScrollDownButton,
+	ScrollUpButton as SelectScrollUpButton,
+	GroupHeading as SelectGroupHeading,
+};
diff --git a/src/lib/components/ui/select/select-content.svelte b/src/lib/components/ui/select/select-content.svelte
new file mode 100644
index 0000000..dc16d65
--- /dev/null
+++ b/src/lib/components/ui/select/select-content.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ContentProps> & {
+		portalProps?: SelectPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<SelectPrimitive.Portal {...portalProps}>
+	<SelectPrimitive.Content
+		bind:ref
+		{sideOffset}
+		data-slot="select-content"
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--bits-select-content-available-height) origin-(--bits-select-content-transform-origin) relative z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+			className
+		)}
+		{...restProps}
+	>
+		<SelectScrollUpButton />
+		<SelectPrimitive.Viewport
+			class={cn(
+				"h-(--bits-select-anchor-height) min-w-(--bits-select-anchor-width) w-full scroll-my-1 p-1"
+			)}
+		>
+			{@render children?.()}
+		</SelectPrimitive.Viewport>
+		<SelectScrollDownButton />
+	</SelectPrimitive.Content>
+</SelectPrimitive.Portal>
diff --git a/src/lib/components/ui/select/select-group-heading.svelte b/src/lib/components/ui/select/select-group-heading.svelte
new file mode 100644
index 0000000..1fab5f0
--- /dev/null
+++ b/src/lib/components/ui/select/select-group-heading.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+	bind:ref
+	data-slot="select-group-heading"
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</SelectPrimitive.GroupHeading>
diff --git a/src/lib/components/ui/select/select-group.svelte b/src/lib/components/ui/select/select-group.svelte
new file mode 100644
index 0000000..5454fdb
--- /dev/null
+++ b/src/lib/components/ui/select/select-group.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
+</script>
+
+<SelectPrimitive.Group data-slot="select-group" {...restProps} />
diff --git a/src/lib/components/ui/select/select-item.svelte b/src/lib/components/ui/select/select-item.svelte
new file mode 100644
index 0000000..49dbbd7
--- /dev/null
+++ b/src/lib/components/ui/select/select-item.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		label,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+	bind:ref
+	{value}
+	data-slot="select-item"
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute right-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<CheckIcon class="size-4" />
+			{/if}
+		</span>
+		{#if childrenProp}
+			{@render childrenProp({ selected, highlighted })}
+		{:else}
+			{label || value}
+		{/if}
+	{/snippet}
+</SelectPrimitive.Item>
diff --git a/src/lib/components/ui/select/select-label.svelte b/src/lib/components/ui/select/select-label.svelte
new file mode 100644
index 0000000..4696025
--- /dev/null
+++ b/src/lib/components/ui/select/select-label.svelte
@@ -0,0 +1,20 @@
+<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<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="select-label"
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/select/select-scroll-down-button.svelte b/src/lib/components/ui/select/select-scroll-down-button.svelte
new file mode 100644
index 0000000..3629205
--- /dev/null
+++ b/src/lib/components/ui/select/select-scroll-down-button.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	data-slot="select-scroll-down-button"
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronDownIcon class="size-4" />
+</SelectPrimitive.ScrollDownButton>
diff --git a/src/lib/components/ui/select/select-scroll-up-button.svelte b/src/lib/components/ui/select/select-scroll-up-button.svelte
new file mode 100644
index 0000000..1aa2300
--- /dev/null
+++ b/src/lib/components/ui/select/select-scroll-up-button.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	data-slot="select-scroll-up-button"
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronUpIcon class="size-4" />
+</SelectPrimitive.ScrollUpButton>
diff --git a/src/lib/components/ui/select/select-separator.svelte b/src/lib/components/ui/select/select-separator.svelte
new file mode 100644
index 0000000..0eac3eb
--- /dev/null
+++ b/src/lib/components/ui/select/select-separator.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Separator as SeparatorPrimitive } from "bits-ui";
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="select-separator"
+	class={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/select/select-trigger.svelte b/src/lib/components/ui/select/select-trigger.svelte
new file mode 100644
index 0000000..d405187
--- /dev/null
+++ b/src/lib/components/ui/select/select-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = "default",
+		...restProps
+	}: WithoutChild<SelectPrimitive.TriggerProps> & {
+		size?: "sm" | "default";
+	} = $props();
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	data-slot="select-trigger"
+	data-size={size}
+	class={cn(
+		"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 shadow-xs flex w-fit select-none items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDownIcon class="size-4 opacity-50" />
+</SelectPrimitive.Trigger>
diff --git a/src/lib/components/ui/select/select-value.svelte b/src/lib/components/ui/select/select-value.svelte
new file mode 100644
index 0000000..e7ddd9a
--- /dev/null
+++ b/src/lib/components/ui/select/select-value.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+	type $$Props = SelectPrimitive.Props;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Value
+	class={cn("flex items-center gap-2", className)}
+	{...$$restProps}
+>
+	<slot />
+</SelectPrimitive.Value> 
\ No newline at end of file
diff --git a/src/lib/components/ui/separator/index.ts b/src/lib/components/ui/separator/index.ts
new file mode 100644
index 0000000..82442d2
--- /dev/null
+++ b/src/lib/components/ui/separator/index.ts
@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};
diff --git a/src/lib/components/ui/separator/separator.svelte b/src/lib/components/ui/separator/separator.svelte
new file mode 100644
index 0000000..09d88f4
--- /dev/null
+++ b/src/lib/components/ui/separator/separator.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+	bind:ref
+	data-slot="separator"
+	class={cn(
+		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/sheet/index.ts b/src/lib/components/ui/sheet/index.ts
new file mode 100644
index 0000000..01d40c8
--- /dev/null
+++ b/src/lib/components/ui/sheet/index.ts
@@ -0,0 +1,36 @@
+import { Dialog as SheetPrimitive } from "bits-ui";
+import Trigger from "./sheet-trigger.svelte";
+import Close from "./sheet-close.svelte";
+import Overlay from "./sheet-overlay.svelte";
+import Content from "./sheet-content.svelte";
+import Header from "./sheet-header.svelte";
+import Footer from "./sheet-footer.svelte";
+import Title from "./sheet-title.svelte";
+import Description from "./sheet-description.svelte";
+
+const Root = SheetPrimitive.Root;
+const Portal = SheetPrimitive.Portal;
+
+export {
+	Root,
+	Close,
+	Trigger,
+	Portal,
+	Overlay,
+	Content,
+	Header,
+	Footer,
+	Title,
+	Description,
+	//
+	Root as Sheet,
+	Close as SheetClose,
+	Trigger as SheetTrigger,
+	Portal as SheetPortal,
+	Overlay as SheetOverlay,
+	Content as SheetContent,
+	Header as SheetHeader,
+	Footer as SheetFooter,
+	Title as SheetTitle,
+	Description as SheetDescription,
+};
diff --git a/src/lib/components/ui/sheet/sheet-close.svelte b/src/lib/components/ui/sheet/sheet-close.svelte
new file mode 100644
index 0000000..ae382c1
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props();
+</script>
+
+<SheetPrimitive.Close bind:ref data-slot="sheet-close" {...restProps} />
diff --git a/src/lib/components/ui/sheet/sheet-content.svelte b/src/lib/components/ui/sheet/sheet-content.svelte
new file mode 100644
index 0000000..856922e
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-content.svelte
@@ -0,0 +1,58 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+	export const sheetVariants = tv({
+		base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+		variants: {
+			side: {
+				top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+				bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+				left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+				right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+			},
+		},
+		defaultVariants: {
+			side: "right",
+		},
+	});
+
+	export type Side = VariantProps<typeof sheetVariants>["side"];
+</script>
+
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import XIcon from "@lucide/svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import SheetOverlay from "./sheet-overlay.svelte";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = "right",
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+		portalProps?: SheetPrimitive.PortalProps;
+		side?: Side;
+		children: Snippet;
+	} = $props();
+</script>
+
+<SheetPrimitive.Portal {...portalProps}>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		bind:ref
+		data-slot="sheet-content"
+		class={cn(sheetVariants({ side }), className)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<SheetPrimitive.Close
+			class="ring-offset-background focus-visible:ring-ring rounded-xs focus-visible:outline-hidden absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none"
+		>
+			<XIcon class="size-4" />
+			<span class="sr-only">Close</span>
+		</SheetPrimitive.Close>
+	</SheetPrimitive.Content>
+</SheetPrimitive.Portal>
diff --git a/src/lib/components/ui/sheet/sheet-description.svelte b/src/lib/components/ui/sheet/sheet-description.svelte
new file mode 100644
index 0000000..333b17a
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.DescriptionProps = $props();
+</script>
+
+<SheetPrimitive.Description
+	bind:ref
+	data-slot="sheet-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/sheet/sheet-footer.svelte b/src/lib/components/ui/sheet/sheet-footer.svelte
new file mode 100644
index 0000000..dd9ed84
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -0,0 +1,20 @@
+<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<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-footer"
+	class={cn("mt-auto flex flex-col gap-2 p-4", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/sheet/sheet-header.svelte b/src/lib/components/ui/sheet/sheet-header.svelte
new file mode 100644
index 0000000..757a6a5
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-header.svelte
@@ -0,0 +1,20 @@
+<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}
+	data-slot="sheet-header"
+	class={cn("flex flex-col gap-1.5 p-4", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/sheet/sheet-overlay.svelte b/src/lib/components/ui/sheet/sheet-overlay.svelte
new file mode 100644
index 0000000..345e197
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.OverlayProps = $props();
+</script>
+
+<SheetPrimitive.Overlay
+	bind:ref
+	data-slot="sheet-overlay"
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/sheet/sheet-title.svelte b/src/lib/components/ui/sheet/sheet-title.svelte
new file mode 100644
index 0000000..9fda327
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.TitleProps = $props();
+</script>
+
+<SheetPrimitive.Title
+	bind:ref
+	data-slot="sheet-title"
+	class={cn("text-foreground font-semibold", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/sheet/sheet-trigger.svelte b/src/lib/components/ui/sheet/sheet-trigger.svelte
new file mode 100644
index 0000000..e266975
--- /dev/null
+++ b/src/lib/components/ui/sheet/sheet-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props();
+</script>
+
+<SheetPrimitive.Trigger bind:ref data-slot="sheet-trigger" {...restProps} />
diff --git a/src/lib/components/ui/sidebar/constants.ts b/src/lib/components/ui/sidebar/constants.ts
new file mode 100644
index 0000000..4de4435
--- /dev/null
+++ b/src/lib/components/ui/sidebar/constants.ts
@@ -0,0 +1,6 @@
+export const SIDEBAR_COOKIE_NAME = "sidebar:state";
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = "16rem";
+export const SIDEBAR_WIDTH_MOBILE = "18rem";
+export const SIDEBAR_WIDTH_ICON = "3rem";
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
diff --git a/src/lib/components/ui/sidebar/context.svelte.ts b/src/lib/components/ui/sidebar/context.svelte.ts
new file mode 100644
index 0000000..15248ad
--- /dev/null
+++ b/src/lib/components/ui/sidebar/context.svelte.ts
@@ -0,0 +1,81 @@
+import { IsMobile } from "$lib/hooks/is-mobile.svelte.js";
+import { getContext, setContext } from "svelte";
+import { SIDEBAR_KEYBOARD_SHORTCUT } from "./constants.js";
+
+type Getter<T> = () => T;
+
+export type SidebarStateProps = {
+	/**
+	 * A getter function that returns the current open state of the sidebar.
+	 * We use a getter function here to support `bind:open` on the `Sidebar.Provider`
+	 * component.
+	 */
+	open: Getter<boolean>;
+
+	/**
+	 * A function that sets the open state of the sidebar. To support `bind:open`, we need
+	 * a source of truth for changing the open state to ensure it will be synced throughout
+	 * the sub-components and any `bind:` references.
+	 */
+	setOpen: (open: boolean) => void;
+};
+
+class SidebarState {
+	readonly props: SidebarStateProps;
+	open = $derived.by(() => this.props.open());
+	openMobile = $state(false);
+	setOpen: SidebarStateProps["setOpen"];
+	#isMobile: IsMobile;
+	state = $derived.by(() => (this.open ? "expanded" : "collapsed"));
+
+	constructor(props: SidebarStateProps) {
+		this.setOpen = props.setOpen;
+		this.#isMobile = new IsMobile();
+		this.props = props;
+	}
+
+	// Convenience getter for checking if the sidebar is mobile
+	// without this, we would need to use `sidebar.isMobile.current` everywhere
+	get isMobile() {
+		return this.#isMobile.current;
+	}
+
+	// Event handler to apply to the `<svelte:window>`
+	handleShortcutKeydown = (e: KeyboardEvent) => {
+		if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			this.toggle();
+		}
+	};
+
+	setOpenMobile = (value: boolean) => {
+		this.openMobile = value;
+	};
+
+	toggle = () => {
+		return this.#isMobile.current
+			? (this.openMobile = !this.openMobile)
+			: this.setOpen(!this.open);
+	};
+}
+
+const SYMBOL_KEY = "scn-sidebar";
+
+/**
+ * Instantiates a new `SidebarState` instance and sets it in the context.
+ *
+ * @param props The constructor props for the `SidebarState` class.
+ * @returns  The `SidebarState` instance.
+ */
+export function setSidebar(props: SidebarStateProps): SidebarState {
+	return setContext(Symbol.for(SYMBOL_KEY), new SidebarState(props));
+}
+
+/**
+ * Retrieves the `SidebarState` instance from the context. This is a class instance,
+ * so you cannot destructure it.
+ * @returns The `SidebarState` instance.
+ */
+export function useSidebar(): SidebarState {
+	return getContext(Symbol.for(SYMBOL_KEY));
+}
diff --git a/src/lib/components/ui/sidebar/index.ts b/src/lib/components/ui/sidebar/index.ts
new file mode 100644
index 0000000..318a341
--- /dev/null
+++ b/src/lib/components/ui/sidebar/index.ts
@@ -0,0 +1,75 @@
+import { useSidebar } from "./context.svelte.js";
+import Content from "./sidebar-content.svelte";
+import Footer from "./sidebar-footer.svelte";
+import GroupAction from "./sidebar-group-action.svelte";
+import GroupContent from "./sidebar-group-content.svelte";
+import GroupLabel from "./sidebar-group-label.svelte";
+import Group from "./sidebar-group.svelte";
+import Header from "./sidebar-header.svelte";
+import Input from "./sidebar-input.svelte";
+import Inset from "./sidebar-inset.svelte";
+import MenuAction from "./sidebar-menu-action.svelte";
+import MenuBadge from "./sidebar-menu-badge.svelte";
+import MenuButton from "./sidebar-menu-button.svelte";
+import MenuItem from "./sidebar-menu-item.svelte";
+import MenuSkeleton from "./sidebar-menu-skeleton.svelte";
+import MenuSubButton from "./sidebar-menu-sub-button.svelte";
+import MenuSubItem from "./sidebar-menu-sub-item.svelte";
+import MenuSub from "./sidebar-menu-sub.svelte";
+import Menu from "./sidebar-menu.svelte";
+import Provider from "./sidebar-provider.svelte";
+import Rail from "./sidebar-rail.svelte";
+import Separator from "./sidebar-separator.svelte";
+import Trigger from "./sidebar-trigger.svelte";
+import Root from "./sidebar.svelte";
+
+export {
+	Content,
+	Footer,
+	Group,
+	GroupAction,
+	GroupContent,
+	GroupLabel,
+	Header,
+	Input,
+	Inset,
+	Menu,
+	MenuAction,
+	MenuBadge,
+	MenuButton,
+	MenuItem,
+	MenuSkeleton,
+	MenuSub,
+	MenuSubButton,
+	MenuSubItem,
+	Provider,
+	Rail,
+	Root,
+	Separator,
+	//
+	Root as Sidebar,
+	Content as SidebarContent,
+	Footer as SidebarFooter,
+	Group as SidebarGroup,
+	GroupAction as SidebarGroupAction,
+	GroupContent as SidebarGroupContent,
+	GroupLabel as SidebarGroupLabel,
+	Header as SidebarHeader,
+	Input as SidebarInput,
+	Inset as SidebarInset,
+	Menu as SidebarMenu,
+	MenuAction as SidebarMenuAction,
+	MenuBadge as SidebarMenuBadge,
+	MenuButton as SidebarMenuButton,
+	MenuItem as SidebarMenuItem,
+	MenuSkeleton as SidebarMenuSkeleton,
+	MenuSub as SidebarMenuSub,
+	MenuSubButton as SidebarMenuSubButton,
+	MenuSubItem as SidebarMenuSubItem,
+	Provider as SidebarProvider,
+	Rail as SidebarRail,
+	Separator as SidebarSeparator,
+	Trigger as SidebarTrigger,
+	Trigger,
+	useSidebar,
+};
diff --git a/src/lib/components/ui/sidebar/sidebar-content.svelte b/src/lib/components/ui/sidebar/sidebar-content.svelte
new file mode 100644
index 0000000..f121800
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-content.svelte
@@ -0,0 +1,24 @@
+<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<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-content"
+	data-sidebar="content"
+	class={cn(
+		"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/sidebar/sidebar-footer.svelte b/src/lib/components/ui/sidebar/sidebar-footer.svelte
new file mode 100644
index 0000000..6259cb9
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-footer.svelte
@@ -0,0 +1,21 @@
+<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<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-footer"
+	data-sidebar="footer"
+	class={cn("flex flex-col gap-2 p-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/sidebar/sidebar-group-action.svelte b/src/lib/components/ui/sidebar/sidebar-group-action.svelte
new file mode 100644
index 0000000..fb84e4a
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-group-action.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		child,
+		...restProps
+	}: WithElementRef<HTMLButtonAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground outline-hidden absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+			// Increases the hit area of the button on mobile.
+			"after:absolute after:-inset-2 md:after:hidden",
+			"group-data-[collapsible=icon]:hidden",
+			className
+		),
+		"data-slot": "sidebar-group-action",
+		"data-sidebar": "group-action",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/src/lib/components/ui/sidebar/sidebar-group-content.svelte b/src/lib/components/ui/sidebar/sidebar-group-content.svelte
new file mode 100644
index 0000000..415255f
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-group-content.svelte
@@ -0,0 +1,21 @@
+<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<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-group-content"
+	data-sidebar="group-content"
+	class={cn("w-full text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/sidebar/sidebar-group-label.svelte b/src/lib/components/ui/sidebar/sidebar-group-label.svelte
new file mode 100644
index 0000000..e292945
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-group-label.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		children,
+		child,
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"text-sidebar-foreground/70 ring-sidebar-ring outline-hidden flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+			"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+			className
+		),
+		"data-slot": "sidebar-group-label",
+		"data-sidebar": "group-label",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}
diff --git a/src/lib/components/ui/sidebar/sidebar-group.svelte b/src/lib/components/ui/sidebar/sidebar-group.svelte
new file mode 100644
index 0000000..ec18a69
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-group.svelte
@@ -0,0 +1,21 @@
+<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<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-group"
+	data-sidebar="group"
+	class={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/sidebar/sidebar-header.svelte b/src/lib/components/ui/sidebar/sidebar-header.svelte
new file mode 100644
index 0000000..a1b2db1
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-header.svelte
@@ -0,0 +1,21 @@
+<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<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-header"
+	data-sidebar="header"
+	class={cn("flex flex-col gap-2 p-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/sidebar/sidebar-input.svelte b/src/lib/components/ui/sidebar/sidebar-input.svelte
new file mode 100644
index 0000000..19b3666
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-input.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import { Input } from "$lib/components/ui/input/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+	bind:ref
+	bind:value
+	data-slot="sidebar-input"
+	data-sidebar="input"
+	class={cn("bg-background h-8 w-full shadow-none", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/sidebar/sidebar-inset.svelte b/src/lib/components/ui/sidebar/sidebar-inset.svelte
new file mode 100644
index 0000000..d862761
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-inset.svelte
@@ -0,0 +1,24 @@
+<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>
+
+<main
+	bind:this={ref}
+	data-slot="sidebar-inset"
+	class={cn(
+		"bg-background relative flex w-full flex-1 flex-col",
+		"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</main>
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-action.svelte b/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
new file mode 100644
index 0000000..fa3fb0c
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		showOnHover = false,
+		children,
+		child,
+		...restProps
+	}: WithElementRef<HTMLButtonAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		showOnHover?: boolean;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground outline-hidden absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+			// Increases the hit area of the button on mobile.
+			"after:absolute after:-inset-2 md:after:hidden",
+			"peer-data-[size=sm]/menu-button:top-1",
+			"peer-data-[size=default]/menu-button:top-1.5",
+			"peer-data-[size=lg]/menu-button:top-2.5",
+			"group-data-[collapsible=icon]:hidden",
+			showOnHover &&
+				"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+			className
+		),
+		"data-slot": "sidebar-menu-action",
+		"data-sidebar": "menu-action",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte b/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
new file mode 100644
index 0000000..69e5a3c
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
@@ -0,0 +1,29 @@
+<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>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-menu-badge"
+	data-sidebar="menu-badge"
+	class={cn(
+		"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums",
+		"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+		"peer-data-[size=sm]/menu-button:top-1",
+		"peer-data-[size=default]/menu-button:top-1.5",
+		"peer-data-[size=lg]/menu-button:top-2.5",
+		"group-data-[collapsible=icon]:hidden",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-button.svelte b/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
new file mode 100644
index 0000000..4bef683
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
@@ -0,0 +1,103 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const sidebarMenuButtonVariants = tv({
+		base: "peer/menu-button outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground group-has-data-[sidebar=menu-action]/menu-item:pr-8 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+				outline:
+					"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
+			},
+			size: {
+				default: "h-8 text-sm",
+				sm: "h-7 text-xs",
+				lg: "group-data-[collapsible=icon]:p-0! h-12 text-sm",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type SidebarMenuButtonVariant = VariantProps<
+		typeof sidebarMenuButtonVariants
+	>["variant"];
+	export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>["size"];
+</script>
+
+<script lang="ts">
+	import * as Tooltip from "$lib/components/ui/tooltip/index.js";
+	import { cn, type WithElementRef, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import { mergeProps } from "bits-ui";
+	import type { ComponentProps, Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		child,
+		variant = "default",
+		size = "default",
+		isActive = false,
+		tooltipContent,
+		tooltipContentProps,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+		isActive?: boolean;
+		variant?: SidebarMenuButtonVariant;
+		size?: SidebarMenuButtonSize;
+		tooltipContent?: Snippet | string;
+		tooltipContentProps?: WithoutChildrenOrChild<ComponentProps<typeof Tooltip.Content>>;
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const sidebar = useSidebar();
+
+	const buttonProps = $derived({
+		class: cn(sidebarMenuButtonVariants({ variant, size }), className),
+		"data-slot": "sidebar-menu-button",
+		"data-sidebar": "menu-button",
+		"data-size": size,
+		"data-active": isActive,
+		...restProps,
+	});
+</script>
+
+{#snippet Button({ props }: { props?: Record<string, unknown> })}
+	{@const mergedProps = mergeProps(buttonProps, props)}
+	{#if child}
+		{@render child({ props: mergedProps })}
+	{:else}
+		<button bind:this={ref} {...mergedProps}>
+			{@render children?.()}
+		</button>
+	{/if}
+{/snippet}
+
+{#if !tooltipContent}
+	{@render Button({})}
+{:else}
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			{#snippet child({ props })}
+				{@render Button({ props })}
+			{/snippet}
+		</Tooltip.Trigger>
+		<Tooltip.Content
+			side="right"
+			align="center"
+			hidden={sidebar.state !== "collapsed" || sidebar.isMobile}
+			{...tooltipContentProps}
+		>
+			{#if typeof tooltipContent === "string"}
+				{tooltipContent}
+			{:else if tooltipContent}
+				{@render tooltipContent()}
+			{/if}
+		</Tooltip.Content>
+	</Tooltip.Root>
+{/if}
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-item.svelte b/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
new file mode 100644
index 0000000..4db4453
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
@@ -0,0 +1,21 @@
+<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<HTMLLIElement>, HTMLLIElement> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="sidebar-menu-item"
+	data-sidebar="menu-item"
+	class={cn("group/menu-item relative", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</li>
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte b/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
new file mode 100644
index 0000000..cc63b04
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import { Skeleton } from "$lib/components/ui/skeleton/index.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		showIcon = false,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		showIcon?: boolean;
+	} = $props();
+
+	// Random width between 50% and 90%
+	const width = `${Math.floor(Math.random() * 40) + 50}%`;
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sidebar-menu-skeleton"
+	data-sidebar="menu-skeleton"
+	class={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+	{...restProps}
+>
+	{#if showIcon}
+		<Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+	{/if}
+	<Skeleton
+		class="max-w-(--skeleton-width) h-4 flex-1"
+		data-sidebar="menu-skeleton-text"
+		style="--skeleton-width: {width};"
+	/>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte b/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
new file mode 100644
index 0000000..987f104
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		children,
+		child,
+		class: className,
+		size = "md",
+		isActive = false,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		size?: "sm" | "md";
+		isActive?: boolean;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground outline-hidden flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+			"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+			size === "sm" && "text-xs",
+			size === "md" && "text-sm",
+			"group-data-[collapsible=icon]:hidden",
+			className
+		),
+		"data-slot": "sidebar-menu-sub-button",
+		"data-sidebar": "menu-sub-button",
+		"data-size": size,
+		"data-active": isActive,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<a bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</a>
+{/if}
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte b/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte
new file mode 100644
index 0000000..681d0f1
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLLIElement>> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="sidebar-menu-sub-item"
+	data-sidebar="menu-sub-item"
+	class={cn("group/menu-sub-item relative", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</li>
diff --git a/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte b/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
new file mode 100644
index 0000000..8ab1111
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
@@ -0,0 +1,25 @@
+<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<HTMLUListElement>> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-slot="sidebar-menu-sub"
+	data-sidebar="menu-sub"
+	class={cn(
+		"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+		"group-data-[collapsible=icon]:hidden",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</ul>
diff --git a/src/lib/components/ui/sidebar/sidebar-menu.svelte b/src/lib/components/ui/sidebar/sidebar-menu.svelte
new file mode 100644
index 0000000..946ccce
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-menu.svelte
@@ -0,0 +1,21 @@
+<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<HTMLUListElement>, HTMLUListElement> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-slot="sidebar-menu"
+	data-sidebar="menu"
+	class={cn("flex w-full min-w-0 flex-col gap-1", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</ul>
diff --git a/src/lib/components/ui/sidebar/sidebar-provider.svelte b/src/lib/components/ui/sidebar/sidebar-provider.svelte
new file mode 100644
index 0000000..5b0d0aa
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-provider.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import * as Tooltip from "$lib/components/ui/tooltip/index.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import {
+		SIDEBAR_COOKIE_MAX_AGE,
+		SIDEBAR_COOKIE_NAME,
+		SIDEBAR_WIDTH,
+		SIDEBAR_WIDTH_ICON,
+	} from "./constants.js";
+	import { setSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(true),
+		onOpenChange = () => {},
+		class: className,
+		style,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	} = $props();
+
+	const sidebar = setSidebar({
+		open: () => open,
+		setOpen: (value: boolean) => {
+			open = value;
+			onOpenChange(value);
+
+			// This sets the cookie to keep the sidebar state.
+			document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+		},
+	});
+</script>
+
+<svelte:window onkeydown={sidebar.handleShortcutKeydown} />
+
+<Tooltip.Provider delayDuration={0}>
+	<div
+		data-slot="sidebar-wrapper"
+		style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
+		class={cn(
+			"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+			className
+		)}
+		bind:this={ref}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+</Tooltip.Provider>
diff --git a/src/lib/components/ui/sidebar/sidebar-rail.svelte b/src/lib/components/ui/sidebar/sidebar-rail.svelte
new file mode 100644
index 0000000..c180cf5
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-rail.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<button
+	bind:this={ref}
+	data-sidebar="rail"
+	data-slot="sidebar-rail"
+	aria-label="Toggle Sidebar"
+	tabIndex={-1}
+	onclick={sidebar.toggle}
+	title="Toggle Sidebar"
+	class={cn(
+		"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-[calc(1/2*100%-1px)] after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+		"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+		"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+		"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+		"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+		"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</button>
diff --git a/src/lib/components/ui/sidebar/sidebar-separator.svelte b/src/lib/components/ui/sidebar/sidebar-separator.svelte
new file mode 100644
index 0000000..5a7deda
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-separator.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="sidebar-separator"
+	data-sidebar="separator"
+	class={cn("bg-sidebar-border", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/sidebar/sidebar-trigger.svelte b/src/lib/components/ui/sidebar/sidebar-trigger.svelte
new file mode 100644
index 0000000..1825182
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar-trigger.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Button } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+	import PanelLeftIcon from "@lucide/svelte/icons/panel-left";
+	import type { ComponentProps } from "svelte";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		onclick,
+		...restProps
+	}: ComponentProps<typeof Button> & {
+		onclick?: (e: MouseEvent) => void;
+	} = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<Button
+	data-sidebar="trigger"
+	data-slot="sidebar-trigger"
+	variant="ghost"
+	size="icon"
+	class={cn("size-7", className)}
+	type="button"
+	onclick={(e) => {
+		onclick?.(e);
+		sidebar.toggle();
+	}}
+	{...restProps}
+>
+	<PanelLeftIcon />
+	<span class="sr-only">Toggle Sidebar</span>
+</Button>
diff --git a/src/lib/components/ui/sidebar/sidebar.svelte b/src/lib/components/ui/sidebar/sidebar.svelte
new file mode 100644
index 0000000..3e9eba9
--- /dev/null
+++ b/src/lib/components/ui/sidebar/sidebar.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+	import * as Sheet from "$lib/components/ui/sheet/index.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { SIDEBAR_WIDTH_MOBILE } from "./constants.js";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		side = "left",
+		variant = "sidebar",
+		collapsible = "offcanvas",
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		side?: "left" | "right";
+		variant?: "sidebar" | "floating" | "inset";
+		collapsible?: "offcanvas" | "icon" | "none";
+	} = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+{#if collapsible === "none"}
+	<div
+		class={cn(
+			"bg-sidebar text-sidebar-foreground w-(--sidebar-width) flex h-full flex-col",
+			className
+		)}
+		bind:this={ref}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+{:else if sidebar.isMobile}
+	<Sheet.Root
+		bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)}
+		{...restProps}
+	>
+		<Sheet.Content
+			data-sidebar="sidebar"
+			data-slot="sidebar"
+			data-mobile="true"
+			class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+			style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
+			{side}
+		>
+			<Sheet.Header class="sr-only">
+				<Sheet.Title>Sidebar</Sheet.Title>
+				<Sheet.Description>Displays the mobile sidebar.</Sheet.Description>
+			</Sheet.Header>
+			<div class="flex h-full w-full flex-col">
+				{@render children?.()}
+			</div>
+		</Sheet.Content>
+	</Sheet.Root>
+{:else}
+	<div
+		bind:this={ref}
+		class="text-sidebar-foreground group peer hidden md:block"
+		data-state={sidebar.state}
+		data-collapsible={sidebar.state === "collapsed" ? collapsible : ""}
+		data-variant={variant}
+		data-side={side}
+		data-slot="sidebar"
+	>
+		<!-- This is what handles the sidebar gap on desktop -->
+		<div
+			data-slot="sidebar-gap"
+			class={cn(
+				"w-(--sidebar-width) relative bg-transparent transition-[width] duration-200 ease-linear",
+				"group-data-[collapsible=offcanvas]:w-0",
+				"group-data-[side=right]:rotate-180",
+				variant === "floating" || variant === "inset"
+					? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+					: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+			)}
+		></div>
+		<div
+			data-slot="sidebar-container"
+			class={cn(
+				"w-(--sidebar-width) fixed inset-y-0 z-10 hidden h-svh transition-[left,right,width] duration-200 ease-linear md:flex",
+				side === "left"
+					? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+					: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+				// Adjust the padding for floating and inset variants.
+				variant === "floating" || variant === "inset"
+					? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+					: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+				className
+			)}
+			{...restProps}
+		>
+			<div
+				data-sidebar="sidebar"
+				data-slot="sidebar-inner"
+				class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+			>
+				{@render children?.()}
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/src/lib/components/ui/skeleton/index.ts b/src/lib/components/ui/skeleton/index.ts
new file mode 100644
index 0000000..186db21
--- /dev/null
+++ b/src/lib/components/ui/skeleton/index.ts
@@ -0,0 +1,7 @@
+import Root from "./skeleton.svelte";
+
+export {
+	Root,
+	//
+	Root as Skeleton,
+};
diff --git a/src/lib/components/ui/skeleton/skeleton.svelte b/src/lib/components/ui/skeleton/skeleton.svelte
new file mode 100644
index 0000000..c7e3d26
--- /dev/null
+++ b/src/lib/components/ui/skeleton/skeleton.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="skeleton"
+	class={cn("bg-accent animate-pulse rounded-md", className)}
+	{...restProps}
+></div>
diff --git a/src/lib/components/ui/table/index.ts b/src/lib/components/ui/table/index.ts
new file mode 100644
index 0000000..14695c8
--- /dev/null
+++ b/src/lib/components/ui/table/index.ts
@@ -0,0 +1,28 @@
+import Root from "./table.svelte";
+import Body from "./table-body.svelte";
+import Caption from "./table-caption.svelte";
+import Cell from "./table-cell.svelte";
+import Footer from "./table-footer.svelte";
+import Head from "./table-head.svelte";
+import Header from "./table-header.svelte";
+import Row from "./table-row.svelte";
+
+export {
+	Root,
+	Body,
+	Caption,
+	Cell,
+	Footer,
+	Head,
+	Header,
+	Row,
+	//
+	Root as Table,
+	Body as TableBody,
+	Caption as TableCaption,
+	Cell as TableCell,
+	Footer as TableFooter,
+	Head as TableHead,
+	Header as TableHeader,
+	Row as TableRow,
+};
diff --git a/src/lib/components/ui/table/table-body.svelte b/src/lib/components/ui/table/table-body.svelte
new file mode 100644
index 0000000..29e9687
--- /dev/null
+++ b/src/lib/components/ui/table/table-body.svelte
@@ -0,0 +1,20 @@
+<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<HTMLTableSectionElement>> = $props();
+</script>
+
+<tbody
+	bind:this={ref}
+	data-slot="table-body"
+	class={cn("[&_tr:last-child]:border-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tbody>
diff --git a/src/lib/components/ui/table/table-caption.svelte b/src/lib/components/ui/table/table-caption.svelte
new file mode 100644
index 0000000..4696cff
--- /dev/null
+++ b/src/lib/components/ui/table/table-caption.svelte
@@ -0,0 +1,20 @@
+<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>
+
+<caption
+	bind:this={ref}
+	data-slot="table-caption"
+	class={cn("text-muted-foreground mt-4 text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</caption>
diff --git a/src/lib/components/ui/table/table-cell.svelte b/src/lib/components/ui/table/table-cell.svelte
new file mode 100644
index 0000000..1a2f033
--- /dev/null
+++ b/src/lib/components/ui/table/table-cell.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLTdAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTdAttributes> = $props();
+</script>
+
+<td
+	bind:this={ref}
+	data-slot="table-cell"
+	class={cn(
+		"whitespace-nowrap bg-clip-padding p-2 align-middle [&:has([role=checkbox])]:pr-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</td>
diff --git a/src/lib/components/ui/table/table-footer.svelte b/src/lib/components/ui/table/table-footer.svelte
new file mode 100644
index 0000000..b9b14eb
--- /dev/null
+++ b/src/lib/components/ui/table/table-footer.svelte
@@ -0,0 +1,20 @@
+<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<HTMLTableSectionElement>> = $props();
+</script>
+
+<tfoot
+	bind:this={ref}
+	data-slot="table-footer"
+	class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tfoot>
diff --git a/src/lib/components/ui/table/table-head.svelte b/src/lib/components/ui/table/table-head.svelte
new file mode 100644
index 0000000..e9dd237
--- /dev/null
+++ b/src/lib/components/ui/table/table-head.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLThAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLThAttributes> = $props();
+</script>
+
+<th
+	bind:this={ref}
+	data-slot="table-head"
+	class={cn(
+		"text-foreground h-10 whitespace-nowrap bg-clip-padding px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</th>
diff --git a/src/lib/components/ui/table/table-header.svelte b/src/lib/components/ui/table/table-header.svelte
new file mode 100644
index 0000000..f47d259
--- /dev/null
+++ b/src/lib/components/ui/table/table-header.svelte
@@ -0,0 +1,20 @@
+<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<HTMLTableSectionElement>> = $props();
+</script>
+
+<thead
+	bind:this={ref}
+	data-slot="table-header"
+	class={cn("[&_tr]:border-b", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</thead>
diff --git a/src/lib/components/ui/table/table-row.svelte b/src/lib/components/ui/table/table-row.svelte
new file mode 100644
index 0000000..0df769e
--- /dev/null
+++ b/src/lib/components/ui/table/table-row.svelte
@@ -0,0 +1,23 @@
+<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<HTMLTableRowElement>> = $props();
+</script>
+
+<tr
+	bind:this={ref}
+	data-slot="table-row"
+	class={cn(
+		"hover:[&,&>svelte-css-wrapper]:[&>th,td]:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</tr>
diff --git a/src/lib/components/ui/table/table.svelte b/src/lib/components/ui/table/table.svelte
new file mode 100644
index 0000000..a334956
--- /dev/null
+++ b/src/lib/components/ui/table/table.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { HTMLTableAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTableAttributes> = $props();
+</script>
+
+<div data-slot="table-container" class="relative w-full overflow-x-auto">
+	<table
+		bind:this={ref}
+		data-slot="table"
+		class={cn("w-full caption-bottom text-sm", className)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</table>
+</div>
diff --git a/src/lib/components/ui/tooltip/index.ts b/src/lib/components/ui/tooltip/index.ts
new file mode 100644
index 0000000..313a7f0
--- /dev/null
+++ b/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,21 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Trigger from "./tooltip-trigger.svelte";
+import Content from "./tooltip-content.svelte";
+
+const Root = TooltipPrimitive.Root;
+const Provider = TooltipPrimitive.Provider;
+const Portal = TooltipPrimitive.Portal;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	Provider,
+	Portal,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+	Provider as TooltipProvider,
+	Portal as TooltipPortal,
+};
diff --git a/src/lib/components/ui/tooltip/tooltip-content.svelte b/src/lib/components/ui/tooltip/tooltip-content.svelte
new file mode 100644
index 0000000..e495efe
--- /dev/null
+++ b/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 0,
+		side = "top",
+		children,
+		arrowClasses,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		arrowClasses?: string;
+	} = $props();
+</script>
+
+<TooltipPrimitive.Portal>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-tooltip-content-transform-origin) z-50 w-fit text-balance rounded-md px-3 py-1.5 text-xs",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<div
+					class={cn(
+						"bg-primary z-50 size-2.5 rotate-45 rounded-[2px]",
+						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]",
+						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]",
+						"data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2",
+						"data-[side=left]:-translate-y-[calc(50%_-_3px)]",
+						arrowClasses
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPrimitive.Portal>
diff --git a/src/lib/components/ui/tooltip/tooltip-trigger.svelte b/src/lib/components/ui/tooltip/tooltip-trigger.svelte
new file mode 100644
index 0000000..1acdaa4
--- /dev/null
+++ b/src/lib/components/ui/tooltip/tooltip-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />
diff --git a/src/lib/hooks/is-mobile.svelte.ts b/src/lib/hooks/is-mobile.svelte.ts
new file mode 100644
index 0000000..4829c00
--- /dev/null
+++ b/src/lib/hooks/is-mobile.svelte.ts
@@ -0,0 +1,9 @@
+import { MediaQuery } from "svelte/reactivity";
+
+const DEFAULT_MOBILE_BREAKPOINT = 768;
+
+export class IsMobile extends MediaQuery {
+	constructor(breakpoint: number = DEFAULT_MOBILE_BREAKPOINT) {
+		super(`max-width: ${breakpoint - 1}px`);
+	}
+}
diff --git a/src/lib/server/s3.ts b/src/lib/server/s3.ts
new file mode 100644
index 0000000..b2a8d8d
--- /dev/null
+++ b/src/lib/server/s3.ts
@@ -0,0 +1,18 @@
+import { S3Client } from '@aws-sdk/client-s3';
+import {
+	S3_ENDPOINT,
+	S3_ACCESS_KEY,
+	S3_SECRET_KEY
+} from '$env/static/private';
+
+const s3 = new S3Client({
+	region: 'us-east-1', // MinIO ignores region but AWS SDK requires it
+	endpoint: S3_ENDPOINT,
+	credentials: {
+		accessKeyId: S3_ACCESS_KEY,
+		secretAccessKey: S3_SECRET_KEY
+	},
+	forcePathStyle: true // needed for MinIO
+});
+
+export default s3; 
\ No newline at end of file
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..55b3a91
--- /dev/null
+++ b/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 };
diff --git a/src/routes/api/experiment/+server.ts b/src/routes/api/experiment/+server.ts
new file mode 100644
index 0000000..16a4c8b
--- /dev/null
+++ b/src/routes/api/experiment/+server.ts
@@ -0,0 +1,71 @@
+import { json } from '@sveltejs/kit';
+import { db } from '$lib/server/db';
+import * as schema from '$lib/server/db/schema';
+import { randomUUID } from 'crypto';
+import { eq, and } from 'drizzle-orm';
+
+export async function GET({ locals, url }) {
+  if (!locals.user) {
+    return json({ error: 'Unauthorized' }, { status: 401 });
+  }
+  const userId = locals.user.id;
+  const id = url.searchParams.get('id');
+  if (id) {
+    const experiment = await db.query.experiment.findFirst({
+      where: (exp, { eq }) => eq(exp.id, id)
+    });
+    if (!experiment) {
+      return json({ error: 'Not found' }, { status: 404 });
+    }
+    return json({ experiment });
+  }
+  const experiments = await db.select().from(schema.experiment).where(eq(schema.experiment.createdBy, userId));
+  return json({ experiments });
+}
+
+export async function POST({ request, locals }) {
+  if (!locals.user) {
+    return json({ error: 'Unauthorized' }, { status: 401 });
+  }
+  const { name, description, multiplayer, type } = await request.json();
+  if (!name) {
+    return json({ error: 'Name is required' }, { status: 400 });
+  }
+  if (!type || !['jsPsych', 'PsychoJS'].includes(type)) {
+    return json({ error: 'Invalid type' }, { status: 400 });
+  }
+  const experiment = {
+    id: randomUUID(),
+    name,
+    description,
+    createdBy: locals.user.id,
+    createdAt: new Date(),
+    multiplayer: multiplayer || false,
+    type
+  };
+  await db.insert(schema.experiment).values(experiment);
+  return json({ experiment });
+}
+
+export async function PUT({ request, locals, url }) {
+  if (!locals.user) {
+    return json({ error: 'Unauthorized' }, { status: 401 });
+  }
+  const id = url.searchParams.get('id');
+  if (!id) {
+    return json({ error: 'Missing id' }, { status: 400 });
+  }
+  const { name, description } = await request.json();
+  if (!name) {
+    return json({ error: 'Name is required' }, { status: 400 });
+  }
+  const [updated] = await db
+    .update(schema.experiment)
+    .set({ name, description })
+    .where(and(eq(schema.experiment.id, id), eq(schema.experiment.createdBy, locals.user.id)))
+    .returning();
+  if (!updated) {
+    return json({ error: 'Not found or not authorized' }, { status: 404 });
+  }
+  return json({ experiment: updated });
+} 
\ No newline at end of file
diff --git a/src/routes/api/experiment/[id]/files/+server.ts b/src/routes/api/experiment/[id]/files/+server.ts
new file mode 100644
index 0000000..2869bbc
--- /dev/null
+++ b/src/routes/api/experiment/[id]/files/+server.ts
@@ -0,0 +1,70 @@
+import { S3Client, ListObjectsV2Command, PutObjectCommand, DeleteObjectCommand } from '@aws-sdk/client-s3';
+import { json, error } from '@sveltejs/kit';
+import { randomUUID } from 'crypto';
+import { S3_ENDPOINT, S3_ACCESS_KEY, S3_SECRET_KEY, S3_BUCKET } from '$env/static/private';
+
+const s3 = new S3Client({
+  region: 'us-east-1',
+  endpoint: S3_ENDPOINT,
+  credentials: {
+    accessKeyId: S3_ACCESS_KEY!,
+    secretAccessKey: S3_SECRET_KEY!,
+  },
+  forcePathStyle: true,
+});
+const BUCKET = S3_BUCKET!;
+
+export async function GET({ params }) {
+  const { id } = params;
+  const prefix = `experiments/${id}/`;
+  const result = await s3.send(new ListObjectsV2Command({ Bucket: BUCKET, Prefix: prefix }));
+  const files = (result.Contents || []).map(obj => ({
+    key: obj.Key,
+    name: obj.Key?.replace(prefix, ''),
+    size: obj.Size,
+    lastModified: obj.LastModified,
+  })).filter(f => f.name);
+  return json({ files });
+}
+
+export async function POST({ params, request }) {
+  console.log(params);
+  const { id } = params;
+  const data = await request.formData();
+  const file = data.get('file');
+  const relativePath = data.get('relativePath');
+  if (!file || typeof file === 'string') throw error(400, 'No file uploaded');
+  const key = `experiments/${id}/${relativePath}`;
+  console.log(key);
+  await s3.send(new PutObjectCommand({
+    Bucket: BUCKET,
+    Key: key,
+    Body: Buffer.from(await file.arrayBuffer()),
+    ContentType: file.type,
+  }));
+  return json({ success: true, key });
+}
+
+export async function DELETE({ params, url }) {
+  const { id } = params;
+  const key = url.searchParams.get('key');
+  const prefix = url.searchParams.get('prefix');
+  if (prefix) {
+    // Delete all objects with this prefix
+    const fullPrefix = `experiments/${id}/${prefix}`;
+    const result = await s3.send(new ListObjectsV2Command({ Bucket: BUCKET, Prefix: fullPrefix }));
+    const objects = (result.Contents || []).map(obj => ({ Key: obj.Key }));
+    if (objects.length > 0) {
+      // Use DeleteObjectsCommand for batch deletion
+      const { DeleteObjectsCommand } = await import('@aws-sdk/client-s3');
+      await s3.send(new DeleteObjectsCommand({
+        Bucket: BUCKET,
+        Delete: { Objects: objects },
+      }));
+    }
+    return json({ success: true, deleted: objects.length });
+  }
+  if (!key) throw error(400, 'Missing key or prefix');
+  await s3.send(new DeleteObjectCommand({ Bucket: BUCKET, Key: key }));
+  return json({ success: true });
+} 
\ No newline at end of file
diff --git a/src/routes/api/login/+server.ts b/src/routes/api/login/+server.ts
new file mode 100644
index 0000000..17f137f
--- /dev/null
+++ b/src/routes/api/login/+server.ts
@@ -0,0 +1,25 @@
+import { json } from '@sveltejs/kit';
+import { db } from '$lib/server/db';
+import * as schema from '$lib/server/db/schema';
+import { eq } from 'drizzle-orm';
+import argon2 from '@node-rs/argon2';
+import { generateSessionToken, createSession, setSessionTokenCookie } from '$lib/server/auth';
+
+export async function POST({ request, cookies }) {
+  const { username, password } = await request.json();
+  if (!username || !password) {
+    return json({ error: 'Missing username or password' }, { status: 400 });
+  }
+  const [user] = await db.select().from(schema.user).where(eq(schema.user.username, username));
+  if (!user) {
+    return json({ error: 'Invalid username or password' }, { status: 401 });
+  }
+  const valid = await argon2.verify(user.passwordHash, password);
+  if (!valid) {
+    return json({ error: 'Invalid username or password' }, { status: 401 });
+  }
+  const token = generateSessionToken();
+  const session = await createSession(token, user.id);
+  cookies.set('auth-session', token, { expires: session.expiresAt, path: '/' });
+  return json({ success: true });
+} 
\ No newline at end of file
diff --git a/src/routes/api/register/+server.ts b/src/routes/api/register/+server.ts
new file mode 100644
index 0000000..132c435
--- /dev/null
+++ b/src/routes/api/register/+server.ts
@@ -0,0 +1,25 @@
+import { json } from '@sveltejs/kit';
+import { db } from '$lib/server/db';
+import * as schema from '$lib/server/db/schema';
+import { eq } from 'drizzle-orm';
+import argon2 from '@node-rs/argon2';
+import { generateSessionToken, createSession } from '$lib/server/auth';
+import { randomUUID } from 'crypto';
+
+export async function POST({ request, cookies }) {
+  const { username, password } = await request.json();
+  if (!username || !password) {
+    return json({ error: 'Missing username or password' }, { status: 400 });
+  }
+  const [existing] = await db.select().from(schema.user).where(eq(schema.user.username, username));
+  if (existing) {
+    return json({ error: 'User already exists' }, { status: 409 });
+  }
+  const passwordHash = await argon2.hash(password);
+  const userId = randomUUID();
+  await db.insert(schema.user).values({ id: userId, username, passwordHash });
+  const token = generateSessionToken();
+  const session = await createSession(token, userId);
+  cookies.set('auth-session', token, { expires: session.expiresAt, path: '/' });
+  return json({ success: true });
+} 
\ No newline at end of file
diff --git a/src/routes/experiment/[id]/+page.svelte b/src/routes/experiment/[id]/+page.svelte
new file mode 100644
index 0000000..2feeef9
--- /dev/null
+++ b/src/routes/experiment/[id]/+page.svelte
@@ -0,0 +1,262 @@
+<script lang="ts">
+import { onMount } from 'svelte';
+import { page } from '$app/stores';
+import { Button } from '$lib/components/ui/button';
+import { Input } from '$lib/components/ui/input';
+import { Label } from '$lib/components/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
+import { goto } from '$app/navigation';
+import { get } from 'svelte/store';
+import FileBrowser from './FileBrowser.svelte';
+
+let experimentId = '';
+let experiment: any = null;
+let name = '';
+let description = '';
+let error = '';
+let success = '';
+let files: any[] = [];
+let uploading = false;
+let uploadError = '';
+let copied = false;
+let origin = '';
+
+async function fetchFiles() {
+  if (!experimentId) return;
+  console.log('fetchFiles called for experimentId:', experimentId);
+  const res = await fetch(`/api/experiment/${experimentId}/files`);
+  if (res.ok) {
+    const data = await res.json();
+    console.log('fetchFiles response:', data);
+    files = data.files;
+  } else {
+    console.log('fetchFiles failed:', res.status);
+  }
+}
+
+async function handleFileInput(event: Event) {
+  const input = event.target as HTMLInputElement;
+  if (input.files) await uploadFiles(input.files);
+}
+
+async function uploadFiles(fileList: FileList) {
+  uploading = true;
+  uploadError = '';
+  try {
+    for (const file of Array.from(fileList)) {
+      const form = new FormData();
+      form.append('file', file);
+      // Use webkitRelativePath if present, else fallback to file.name
+      form.append('relativePath', file.webkitRelativePath || file.name);
+      const res = await fetch(`/api/experiment/${experimentId}/files`, {
+        method: 'POST',
+        body: form,
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || 'Upload failed');
+      }
+    }
+    await fetchFiles();
+  } catch (e: any) {
+    uploadError = e.message || 'Upload failed';
+  } finally {
+    uploading = false;
+  }
+}
+
+async function deleteFile(key: string) {
+  const url = `/api/experiment/${experimentId}/files?key=${encodeURIComponent(key)}`;
+  const res = await fetch(url, { method: 'DELETE' });
+  if (res.ok) await fetchFiles();
+}
+
+// Helper: Convert flat file list to tree
+function buildFileTree(files: any[]): any {
+  const root: any = {};
+  for (const file of files) {
+    const parts = file.name.split('/');
+    let node = root;
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      if (!part) continue;
+      if (i === parts.length - 1) {
+        // File
+        node[part] = { ...file, isFile: true };
+      } else {
+        // Folder
+        node[part] = node[part] || { children: {}, isFile: false };
+        node = node[part].children;
+      }
+    }
+  }
+  return root;
+}
+
+let expanded = new Set<string>();
+function toggleFolder(path: string) {
+  if (expanded.has(path)) expanded.delete(path);
+  else expanded.add(path);
+  expanded = new Set(expanded); // trigger reactivity
+}
+
+function copyLink() {
+  const link = `${origin}/public/run/${experiment.id}`;
+  navigator.clipboard.writeText(link);
+  copied = true;
+  setTimeout(() => (copied = false), 2000);
+}
+
+async function deleteFileOrFolder(key: string, isFolder: boolean) {
+  console.log('deleteFileOrFolder called:', { key, isFolder, experimentId });
+  // If folder, send a delete request with a prefix param
+  if (isFolder) {
+    const url = `/api/experiment/${experimentId}/files?prefix=${encodeURIComponent(key)}`;
+    console.log('Deleting folder with URL:', url);
+    const res = await fetch(url, { method: 'DELETE' });
+    console.log('Folder delete response:', res.status, res.ok);
+    if (res.ok) await fetchFiles();
+  } else {
+    console.log('Deleting file with key:', key);
+    await deleteFile(key);
+  }
+}
+
+onMount(async () => {
+  origin = window.location.origin;
+  const params = get(page).params;
+  experimentId = params.id;
+  const res = await fetch(`/api/experiment?id=${experimentId}`);
+  if (res.ok) {
+    const data = await res.json();
+    experiment = data.experiment;
+    console.log(experiment)
+    name = experiment.name;
+    description = experiment.description;
+  } else {
+    error = 'Failed to load experiment.';
+  }
+  await fetchFiles();
+});
+
+async function handleSave() {
+  error = '';
+  success = '';
+  const res = await fetch(`/api/experiment?id=${experimentId}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name, description })
+  });
+  if (res.ok) {
+    success = 'Experiment updated!';
+  } else {
+    error = 'Failed to update experiment.';
+  }
+}
+</script>
+
+{#if experiment}
+  <div class="flex flex-col min-h-screen bg-background py-8">
+    <Card class="mb-8 w-full max-w-xl mx-auto">
+      <CardHeader>
+        <CardTitle>Experiment Details</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div class="mb-4">
+          <Label>ID</Label>
+          <div class="text-sm text-muted-foreground mb-2">{experiment.id}</div>
+        </div>
+        <form on:submit|preventDefault={handleSave} class="space-y-4">
+          <div>
+            <Label for="name">Name</Label>
+            <Input id="name" type="text" bind:value={name} required />
+          </div>
+          <div>
+            <Label for="description">Description</Label>
+            <Input id="description" type="text" bind:value={description} />
+          </div>
+          <div>
+            <Label>Created At</Label>
+            <div class="text-sm text-muted-foreground mb-2">{new Date(experiment.createdAt).toLocaleString()}</div>
+          </div>
+          {#if error}
+            <div class="text-red-500 text-sm">{error}</div>
+          {/if}
+          {#if success}
+            <div class="text-green-600 text-sm">{success}</div>
+          {/if}
+          <Button type="submit">Save Changes</Button>
+        </form>
+      </CardContent>
+    </Card>
+
+    <Card class="mb-8 w-full max-w-xl mx-auto">
+      <CardHeader>
+        <CardTitle>Public Link</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p class="text-sm text-muted-foreground mb-2">
+          Share this link with your participants to run the experiment.
+        </p>
+        <div class="flex items-center space-x-2">
+          <Input id="public-link" type="text" readonly value="{`${origin}/public/run/${experiment.id}`}" />
+          <Button on:click={copyLink}>Copy</Button>
+        </div>
+        {#if copied}
+          <p class="text-green-600 text-sm mt-2">Copied to clipboard!</p>
+        {/if}
+      </CardContent>
+    </Card>
+    
+    <Card class="w-full max-w-xl mx-auto">
+      <CardHeader>
+        <CardTitle>Experiment Files</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div class="mt-8">
+          <Label>Experiment Files</Label>
+          <div
+            class="border-2 border-dashed rounded-md p-4 mb-4 text-center cursor-pointer bg-muted hover:bg-accent transition"
+            on:click={() => document.getElementById('file-input')?.click()}
+          >
+            <div>Click to select files or a folder to upload (folder structure will be preserved)</div>
+            <input id="file-input" type="file" multiple webkitdirectory class="hidden" on:change={handleFileInput} />
+          </div>
+          {#if uploading}
+            <div class="text-blue-600 text-sm mb-2">Uploading...</div>
+          {/if}
+          {#if uploadError}
+            <div class="text-red-500 text-sm mb-2">{uploadError}</div>
+          {/if}
+          <ul class="divide-y divide-border">
+            <FileBrowser
+              tree={buildFileTree(files)}
+              parentPath=""
+              {expanded}
+              onToggle={toggleFolder}
+              onDelete={deleteFileOrFolder}
+            />
+            {#if files.length === 0}
+              <li class="text-muted-foreground text-sm py-2">No files uploaded yet.</li>
+            {/if}
+          </ul>
+        </div>
+      </CardContent>
+    </Card>
+  </div>
+{:else if error}
+  <div class="flex justify-center items-center min-h-screen bg-background">
+    <Card class="w-full max-w-md">
+      <CardHeader>
+        <CardTitle>Error</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div class="text-red-500">{error}</div>
+      </CardContent>
+    </Card>
+  </div>
+{:else}
+  <div class="flex justify-center items-center min-h-screen bg-background">
+    <div>Loading...</div>
+  </div>
+{/if} 
\ No newline at end of file
diff --git a/src/routes/experiment/[id]/FileBrowser.svelte b/src/routes/experiment/[id]/FileBrowser.svelte
new file mode 100644
index 0000000..83cfe60
--- /dev/null
+++ b/src/routes/experiment/[id]/FileBrowser.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { Button } from '$lib/components/ui/button';
+  
+  export let tree: any;
+  export let parentPath = '';
+  export let expanded: Set<string>;
+  export let onToggle: (path: string) => void;
+  export let onDelete: (key: string, isFolder: boolean) => void;
+
+  function handleToggle(path: string) {
+    onToggle(path);
+  }
+  function handleDelete(key: string, isFolder: boolean) {
+    console.log('FileBrowser handleDelete called:', { key, isFolder });
+    onDelete(key, isFolder);
+  }
+  
+  function handleFolderClick(event: Event, path: string) {
+    event.stopPropagation();
+    handleToggle(path);
+  }
+  
+  function handleFolderDelete(event: Event, path: string) {
+    event.stopPropagation();
+    console.log('FileBrowser handleFolderDelete called:', { path });
+    handleDelete(path, true);
+  }
+</script>
+
+<ul class="ml-2">
+  {#each Object.entries(tree) as [name, node] (parentPath + '/' + name)}
+    {#if (node as any).isFile}
+      <li class="flex items-center justify-between py-1 pl-4">
+        <span>{name} <span class="text-xs text-muted-foreground">({(node as any).size} bytes)</span></span>
+        <Button size="sm" variant="destructive" on:click={() => handleDelete((node as any).key, false)}>Delete</Button>
+      </li>
+    {:else}
+      <li>
+        <div class="flex items-center cursor-pointer" on:click={(e) => handleFolderClick(e, parentPath ? `${parentPath}/${name}` : name)}>
+          <span class="mr-1">{expanded.has(parentPath ? `${parentPath}/${name}` : name) ? '▼' : '▶'}</span>
+          <span class="font-semibold">{name}</span>
+          <Button size="sm" variant="destructive" class="ml-2" on:click={(e) => handleFolderDelete(e, (parentPath ? `${parentPath}/${name}` : name))}>Delete</Button>
+        </div>
+        {#if expanded.has(parentPath ? `${parentPath}/${name}` : name)}
+          <svelte:self
+            tree={(node as any).children}
+            parentPath={parentPath ? `${parentPath}/${name}` : name}
+            {expanded}
+            {onToggle}
+            {onDelete}
+          />
+        {/if}
+      </li>
+    {/if}
+  {/each}
+</ul> 
\ No newline at end of file
diff --git a/src/routes/experiment/create/+page.svelte b/src/routes/experiment/create/+page.svelte
new file mode 100644
index 0000000..eb0b0f7
--- /dev/null
+++ b/src/routes/experiment/create/+page.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
+	import * as Form from '$lib/components/ui/form';
+	import { Input } from '$lib/components/ui/input';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import * as Select from '$lib/components/ui/select/index.js';
+	import { superForm } from 'sveltekit-superforms';
+	import { zod } from 'sveltekit-superforms/adapters';
+	import { z } from 'zod';
+	import { toast } from 'svelte-sonner';
+
+	const formSchema = z.object({
+		name: z.string().min(1, 'Name is required'),
+		description: z.string().optional(),
+		multiplayer: z.boolean().default(false),
+		type: z.enum(['jsPsych', 'PsychoJS'], {
+			required_error: 'Type is required'
+		})
+	});
+
+	const form = superForm(
+		{
+			name: '',
+			description: '',
+			multiplayer: false,
+			type: 'jsPsych'
+		},
+		{
+			validators: zod(formSchema),
+			SPA: true,
+			onUpdate: async ({ form: f }) => {
+				if (f.valid) {
+					const res = await fetch('/api/experiment', {
+						method: 'POST',
+						headers: { 'Content-Type': 'application/json' },
+						body: JSON.stringify(f.data)
+					});
+					if (res.ok) {
+						await goto('/');
+						toast.success('Experiment created successfully');
+					} else {
+						const data = await res.json().catch(() => ({}));
+						toast.error(data?.error || 'Failed to create experiment');
+					}
+				}
+			}
+		}
+	);
+	const { form: formData, enhance } = form;
+</script>
+
+<div class="flex justify-center items-center min-h-screen bg-background">
+	<Card class="w-full max-w-md">
+		<CardHeader>
+			<CardTitle>Create Experiment</CardTitle>
+		</CardHeader>
+		<CardContent>
+			<form method="POST" use:enhance class="space-y-4">
+				<Form.Field {form} name="name">
+					<Form.Control let:attrs>
+						<Form.Label>Name</Form.Label>
+						<Input {...attrs} bind:value={$formData.name} />
+					</Form.Control>
+					<Form.FieldErrors />
+				</Form.Field>
+				<Form.Field {form} name="description">
+					<Form.Control let:attrs>
+						<Form.Label>Description</Form.Label>
+						<Input {...attrs} bind:value={$formData.description} />
+					</Form.Control>
+					<Form.FieldErrors />
+				</Form.Field>
+				<Form.Field {form} name="multiplayer">
+					<Form.Control let:attrs>
+						<div class="flex items-center space-x-2">
+							<Checkbox {...attrs} bind:checked={$formData.multiplayer} />
+							<Form.Label>Multiplayer</Form.Label>
+						</div>
+					</Form.Control>
+					<Form.FieldErrors />
+				</Form.Field>
+				<Form.Field {form} name="type">
+					<Form.Control let:attrs>
+						<Form.Label>Type</Form.Label>
+						<Select.Root {...attrs} bind:value={$formData.type} type="single">
+							<Select.Trigger>
+								{$formData.type || 'Select a type'}
+							</Select.Trigger>
+							<Select.Content>
+								<Select.Item value="jsPsych">jsPsych</Select.Item>
+								<Select.Item value="PsychoJS">PsychoJS</Select.Item>
+							</Select.Content>
+						</Select.Root>
+					</Form.Control>
+					<Form.FieldErrors />
+				</Form.Field>
+				<Form.Button class="w-full">Create</Form.Button>
+			</form>
+		</CardContent>
+	</Card>
+</div>
diff --git a/src/routes/images/[...path]/+server.ts b/src/routes/images/[...path]/+server.ts
new file mode 100644
index 0000000..979f0e2
--- /dev/null
+++ b/src/routes/images/[...path]/+server.ts
@@ -0,0 +1,53 @@
+import s3 from '$lib/server/s3.js';
+import { GetObjectCommand } from '@aws-sdk/client-s3';
+import { error } from '@sveltejs/kit';
+import mime from 'mime-types';
+import { S3_BUCKET } from '$env/static/private';
+
+export async function GET({ params, request }) {
+	const referer = request.headers.get('referer');
+	if (!referer) {
+		throw error(400, 'Referer header is required');
+	}
+
+	const refererUrl = new URL(referer);
+	const match = refererUrl.pathname.match(/\/public\/run\/([^/]+)/);
+
+	if (!match || !match[1]) {
+		throw error(400, 'Could not determine experiment ID from referer');
+	}
+
+	const experimentId = match[1];
+	const imagePath = `images/${params.path}`;
+	
+	const key = `experiments/${experimentId}/${imagePath}`;
+
+	try {
+		const command = new GetObjectCommand({
+			Bucket: S3_BUCKET,
+			Key: key
+		});
+		const s3Response = await s3.send(command);
+
+		if (!s3Response.Body) {
+			throw error(404, 'Not found');
+		}
+
+		const stream = s3Response.Body;
+		const contentType = mime.lookup(imagePath) || s3Response.ContentType || 'application/octet-stream';
+		const fileBuffer = await stream.transformToByteArray();
+
+		return new Response(fileBuffer, {
+			headers: {
+				'Content-Type': contentType,
+				'Content-Length': fileBuffer.length.toString()
+			}
+		});
+	} catch (e: any) {
+		if (e.name === 'NoSuchKey') {
+			throw error(404, 'Not found');
+		}
+		console.error(e);
+		throw error(500, 'Internal server error');
+	}
+} 
\ No newline at end of file
diff --git a/src/routes/public/run/[experimentId]/[...path]/+server.ts b/src/routes/public/run/[experimentId]/[...path]/+server.ts
new file mode 100644
index 0000000..0bb6539
--- /dev/null
+++ b/src/routes/public/run/[experimentId]/[...path]/+server.ts
@@ -0,0 +1,256 @@
+import { db } from '$lib/server/db/index.js';
+import * as schema from '$lib/server/db/schema.js';
+import s3 from '$lib/server/s3.js';
+import { GetObjectCommand, ListObjectsV2Command } from '@aws-sdk/client-s3';
+import { randomUUID } from 'crypto';
+import { eq } from 'drizzle-orm';
+import { error } from '@sveltejs/kit';
+import mime from 'mime-types';
+import { S3_BUCKET } from '$env/static/private';
+import { dev } from '$app/environment';
+import { promises as fs } from 'fs';
+
+const PARTICIPANT_COOKIE_PREFIX = 'participant-session-';
+
+// Rules for proxying vendor files to a CDN using regex to extract versions
+const vendorFileRules = [
+	{
+		regex: /^lib\/vendors\/jquery-([\d.]+)\.min\.js$/,
+		url: (version: string) => `https://code.jquery.com/jquery-${version}.min.js`
+	},
+	{
+		regex: /^lib\/vendors\/surveyjs\.jquery-([\d.]+)\.min\.js$/,
+		url: (version: string) => `https://unpkg.com/survey-jquery@${version}/survey.jquery.min.js`
+	},
+	{
+		regex: /^lib\/vendors\/surveyjs\.defaultV2-([\d.]+)-OST\.min\.css$/,
+		url: (version: string) => `https://unpkg.com/survey-core@${version}/defaultV2.min.css`
+	}
+];
+
+export async function GET({ params, cookies, getClientAddress, request }) {
+	const { experimentId, path } = params;
+
+	// Map of requested CSS files to their location in the static directory.
+	const staticCssMap: Record<string, string> = {
+		'lib/vendors/survey.widgets.css': 'static/lib/psychoJS/surveyJS/survey.widgets.css',
+		'lib/vendors/survey.grey_style.css': 'static/lib/psychoJS/surveyJS/survey.grey_style.css'
+	};
+
+	if (path in staticCssMap) {
+		const filePath = staticCssMap[path];
+		try {
+			const fileContents = await fs.readFile(filePath, 'utf-8');
+			return new Response(fileContents, {
+				headers: { 'Content-Type': 'text/css' }
+			});
+		} catch (e: any) {
+			if (e.code === 'ENOENT') {
+				throw error(404, 'File not found in static directory');
+			}
+			throw error(500, 'Error reading static file');
+		}
+	}
+
+	// Check if the requested path is a vendor file and proxy to CDN
+	for (const rule of vendorFileRules) {
+		const match = path.match(rule.regex);
+		if (match) {
+			try {
+				// The first element of match is the full string, subsequent elements are capture groups.
+				const cdnUrl = (rule.url as Function).apply(null, match.slice(1));
+				const cdnResponse = await fetch(cdnUrl);
+
+				if (!cdnResponse.ok) {
+					throw error(
+						cdnResponse.status,
+						`Failed to fetch from CDN: ${cdnResponse.statusText}`
+					);
+				}
+
+				// Buffer the entire response to avoid potential streaming issues.
+				// This is less memory-efficient but more robust for debugging.
+				const body = await cdnResponse.arrayBuffer();
+				const headers = new Headers(cdnResponse.headers);
+
+				// The `fetch` API automatically decompresses content, so we need to remove
+				// the Content-Encoding header to avoid the browser trying to decompress it again.
+				// We also remove Content-Length because it's now incorrect for the decompressed body.
+				headers.delete('Content-Encoding');
+				headers.delete('Content-Length');
+
+				// Ensure the Content-Type is set correctly, as it's crucial for the browser.
+				if (!headers.has('Content-Type')) {
+					headers.set(
+						'Content-Type',
+						path.endsWith('.css') ? 'text/css' : 'application/javascript'
+					);
+				}
+
+				// Forward the response from the CDN
+				return new Response(body, {
+					status: cdnResponse.status,
+					statusText: cdnResponse.statusText,
+					headers: headers
+				});
+			} catch (e: any) {
+				throw error(500, 'Failed to proxy vendor file');
+			}
+		}
+	}
+
+	const cookieName = `${PARTICIPANT_COOKIE_PREFIX}${experimentId}`;
+	let participantSessionId = cookies.get(cookieName);
+
+	if (!participantSessionId) {
+		// First request for this experiment. Create a new participant session.
+		participantSessionId = randomUUID();
+
+		await db.insert(schema.participantSession).values({
+			id: participantSessionId,
+			experimentId,
+			createdAt: new Date(),
+			ipAddress: getClientAddress(),
+			userAgent: request.headers.get('user-agent') ?? undefined
+		});
+
+		cookies.set(cookieName, participantSessionId, {
+			path: `/public/run/${experimentId}`,
+			httpOnly: true,
+			secure: !dev,
+			maxAge: 60 * 60 * 24 * 365 // 1 year
+		});
+	} else {
+		// subsequent requests, check if cookie is valid
+		const [session] = await db
+			.select()
+			.from(schema.participantSession)
+			.where(eq(schema.participantSession.id, participantSessionId));
+		if (!session) {
+			// invalid cookie, create new session
+			const newParticipantSessionId = randomUUID();
+			await db.insert(schema.participantSession).values({
+				id: newParticipantSessionId,
+				experimentId,
+				createdAt: new Date(),
+				ipAddress: getClientAddress(),
+				userAgent: request.headers.get('user-agent') ?? undefined
+			});
+			cookies.set(cookieName, newParticipantSessionId, {
+				path: `/public/run/${experimentId}`,
+				httpOnly: true,
+				secure: !dev,
+				maxAge: 60 * 60 * 24 * 365 // 1 year
+			});
+		}
+	}
+
+	const s3Prefix = `experiments/${experimentId}/`;
+	const filePath = path === '' ? 'index.html' : path;
+	const key = `${s3Prefix}${filePath}`;
+
+	// Check if user is trying to access files outside of the experiment directory
+	if (!key.startsWith(s3Prefix)) {
+		throw error(403, 'Forbidden');
+	}
+
+	try {
+		const command = new GetObjectCommand({
+			Bucket: S3_BUCKET,
+			Key: key
+		});
+		const s3Response = await s3.send(command);
+
+		if (!s3Response.Body) {
+			throw error(404, 'Not found');
+		}
+
+		const stream = s3Response.Body;
+		const contentType =
+			mime.lookup(filePath) || s3Response.ContentType || 'application/octet-stream';
+
+		if (filePath.endsWith('index.html')) {
+			const body = await stream.transformToString();
+
+			// For PsychoJS experiments, we need to set the base href to the experiment root
+			// so that relative paths like "stimuli/image.jpg" resolve correctly
+			const basePath = `/public/run/${experimentId}/`;
+
+			// Get all files in the experiment directory to create a resource manifest
+			const listCommand = new ListObjectsV2Command({
+				Bucket: S3_BUCKET,
+				Prefix: `experiments/${experimentId}/`
+			});
+			const listResponse = await s3.send(listCommand);
+			
+			// Create resource manifest for PsychoJS
+			const resources = (listResponse.Contents || [])
+				.filter(obj => obj.Key && obj.Key !== `experiments/${experimentId}/index.html`)
+				.map(obj => {
+					const relativePath = obj.Key!.replace(`experiments/${experimentId}/`, '');
+					return {
+						name: relativePath,
+						path: relativePath
+					};
+				});
+
+			// Create the resource injection script that runs after PsychoJS loads
+			const resourceInjectionScript = `
+				<script>
+					// Wait for PsychoJS to be available and inject resources
+					function injectPsychoJSResources() {
+						const resources = ${JSON.stringify(resources)};
+						
+						// Check if PsychoJS and its components are available
+						if (typeof psychoJS !== 'undefined' && psychoJS.serverManager) {
+							
+							// Add resources to the server manager's resource list
+							resources.forEach(resource => {
+								psychoJS.serverManager._resources.set(resource.name, {
+									name: resource.name,
+									path: resource.path,
+									status: psychoJS.serverManager.constructor.ResourceStatus.NOT_DOWNLOADED
+								});
+							});
+							
+						} else {
+							// PsychoJS not ready yet, try again in 100ms
+							setTimeout(injectPsychoJSResources, 100);
+						}
+					}
+					
+					// Start trying to inject resources when DOM is ready
+					if (document.readyState === 'loading') {
+						document.addEventListener('DOMContentLoaded', injectPsychoJSResources);
+					} else {
+						injectPsychoJSResources();
+					}
+				</script>
+			`;
+
+			const injectedBody = body
+				.replace(/<head[^>]*>/, `$&<base href="${basePath}">`)
+				.replace(/<\/body>/, `${resourceInjectionScript}<script>console.log('injection')</script></body>`);
+
+			return new Response(injectedBody, {
+				headers: {
+					'Content-Type': contentType,
+					'Content-Length': Buffer.byteLength(injectedBody, 'utf8').toString()
+				}
+			});
+		}
+
+		const fileBuffer = await stream.transformToByteArray();
+		return new Response(fileBuffer, {
+			headers: {
+				'Content-Type': contentType,
+				'Content-Length': fileBuffer.length.toString()
+			}
+		});
+	} catch (e: any) {
+		if (e.name === 'NoSuchKey') {
+			throw error(404, 'Not found');
+		}
+		throw error(500, 'Internal server error');
+	}
+} 
\ No newline at end of file
diff --git a/static/lib/psychoJS/surveyJS/survey.grey_style.css b/static/lib/psychoJS/surveyJS/survey.grey_style.css
new file mode 100644
index 0000000..c330172
--- /dev/null
+++ b/static/lib/psychoJS/surveyJS/survey.grey_style.css
@@ -0,0 +1,116 @@
+/**
+ * Light-grey Survey style.
+ */
+
+ .survey {
+    position: absolute;
+    left: 1em;
+    top: 1em;
+    right: 1em;
+    bottom: 1em;
+  
+    overflow-x: hidden;
+  
+    /* title, buttons background, border around text boxes */
+    --primary: #1AB7FA;
+    /* text, e.g. Designer, Preview, Logic */
+    --foreground: #000000;
+    /* text of selected element, e.g. Complete button, selected rating*/
+    --primary-foreground: #FFFFFF;
+    /* highlight border of survey elements */
+    --secondary: #FFAA00;
+    /* top menu and side bar background, also background for survey elements */
+    --background: #FAFAFA;
+    /* background behind survey questions */
+    --background-dim: #F0F0F0;
+    /* background of survey element, e.g. text boxes */
+    --background-dim-light: #FFFFFF;
+  }
+  
+  .sd-root-modern {
+    --sd-base-padding: 2em;
+    --sd-base-vertical-padding: 1em;
+  }
+  
+  .sd-element--with-frame:not(.sd-element--collapsed) {
+    border-radius: 5px;
+    background: #FAFAFA; /*#f0f0f0;*/
+    box-shadow: 2px 2px 4px #d8d8d8 /*, -2px -2px 4px #ffffff*/;
+  }
+  
+  /* Survey title */
+  .sd-root-modern:not(.svc-tab-designer) .sd-container-modern__title {
+  
+    background: #FFFFFF;
+    /*background: linear-gradient(315deg, #F0F0F0, #ffffff);*/
+    /*border-left: 1em solid #F0F0F0;
+    border-right: 1em solid #F0F0F0;*/
+    margin: 0 24px 0 24px;
+    border-radius: 5px;
+    /*border-top-left-radius: 5px;
+    border-top-right-radius: 5px;*/
+    box-shadow: 2px 2px 4px #d8d8d8;
+  
+    /*
+      border-radius: 0;
+      background: linear-gradient(315deg, #e5e5e5, #ffffff);
+      box-shadow: -1px -1px 2px #e6e6e6,
+                  1px 1px 2px #ffffff;
+      border-bottom: 1px solid #1ab7fa;
+    */
+  }
+  
+  .sd-btn {
+    border-radius: 5px;
+    background: #1ab7fa;
+  }
+  
+  .sd-navigation__next-btn,
+  .sd-navigation__prev-btn {
+    color: #000000;
+    background: #FFFFFF !important;
+  }
+  
+  .sd-navigation__start-btn,
+  .sd-navigation__preview-btn {
+    color: #FFFFFF;
+  }
+  
+  .sd-question__header {
+    border-bottom: 2px solid #EEEEEE;
+    margin-bottom: 0.5em;
+  }
+  
+  .sv-ranking-item__content {
+    background-color: transparent !important;
+  }
+  
+  .sd-radio__decorator {
+    border: 1px solid #CCCCCC;
+  }
+  
+  
+  .sd-question--table>.sd-question__content:before {
+    /*background-color: transparent;*/
+    /*border-left: 2px dashed #DDDDDD !important;
+    border-top: 2px dashed #DDDDDD !important;
+    border-bottom: 2px dashed #DDDDDD !important;*/
+  }
+  
+  /*.sd-table, .sd-matrix__table, .sd-table__cell, .sd-matrix__cell */
+  .sd-table, .sd-matrix__table {
+    /*background-color: transparent !important;*/
+    /*border-top: 2px dashed #DDDDDD !important;
+    border-bottom: 2px dashed #DDDDDD !important;*/
+  }
+  
+  .sd-question--table>.sd-question__content:after {
+    /*background-color: transparent;*/
+    /*border-top: 2px dashed #DDDDDD !important;
+    border-bottom: 2px dashed #DDDDDD !important;*/
+  }
+  
+  .sd-element--complex:not(.sd-element--collapsed)>.sd-element__header--location-top:after {
+    background: transparent !important;
+  }
+  
\ No newline at end of file
diff --git a/static/lib/psychoJS/surveyJS/survey.widgets.css b/static/lib/psychoJS/surveyJS/survey.widgets.css
new file mode 100644
index 0000000..c57eddc
--- /dev/null
+++ b/static/lib/psychoJS/surveyJS/survey.widgets.css
@@ -0,0 +1,207 @@
+/** ============ Slider ============ */
+
+/**
+ * Native input range styling inspired by:
+ * https://css-tricks.com/value-bubbles-for-range-inputs/
+ * https://codepen.io/ShadowShahriar/pen/zYPPYrQ
+ */
+
+ .srv-slider-container {
+	--thumb-size: 20px;
+	/*--primary: #19b394;*/
+	--slider-background: #f5f5f5;
+	--slider-background-disabled: #e5e5e5;
+	--slider-thumb-disabled: #a5a5a5;
+	--slider-display-background: black;
+	--slider-border: #d4d4d4;
+	--survey-question-margin: 0.55em;
+	box-sizing: border-box;
+	position: relative;
+	margin: 50px 10px 10px 10px;
+}
+
+.srv-slider-container * {
+	box-sizing: border-box;
+}
+
+.srv-slider-container .srv-slider {
+	-webkit-appearance:  none;
+	appearance: none;
+	width: 100%;
+	height: calc(var(--thumb-size) - 10px);
+	background: var(--slider-background);
+	border: 0.07em solid var(--slider-border);
+	border-radius: 10px;
+	margin: 0;
+	padding: 0;
+}
+
+.srv-slider-container .srv-slider::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	appearance: none;
+	width: var(--thumb-size);
+	height: var(--thumb-size);
+	border-radius: 50%;
+	background: var(--primary, #19b394);
+}
+
+.srv-slider-container .srv-slider::-moz-range-thumb {
+	width: var(--thumb-size);
+	height: var(--thumb-size);
+	border-radius: 50%;
+	background: var(--primary, #19b394);
+}
+
+.srv-slider-container .srv-slider-display {
+	position: absolute;
+	background: var(--slider-display-background);
+	color: white;
+	border-radius: 3px;
+	padding: 5px;
+	top: -40px;
+	transform: translate(-50%, 0);
+}
+
+.srv-slider-container .srv-slider-title {
+	margin: 0 0 0 0;
+}
+
+.srv-slider-container .srv-slider-display::after {
+	content: "";
+	position: absolute;
+	width: 0;
+	height: 0;
+	border-top: 10px solid var(--slider-display-background);
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	top: 100%;
+	left: 50%;
+	margin-left: -5px;
+	margin-top: -2px;
+}
+
+.srv-slider-container.srv-slider-bar .srv-slider {
+	height: var(--thumb-size);
+	border-radius: 0;
+	overflow: hidden;
+}
+
+.srv-slider-container.srv-slider-bar .srv-slider::-webkit-slider-thumb {
+	border: none;
+	border-radius: 0;
+	box-shadow: calc(-100vmax - var(--thumb-size)) 0 0 100vmax var(--primary);
+}
+
+.srv-slider-container.srv-slider-bar .srv-slider::-moz-range-thumb {
+	border: none;
+	border-radius: 0;
+	box-shadow: calc(-100vmax - var(--thumb-size)) 0 0 100vmax var(--primary);
+}
+
+.srv-slider-container .srv-slider[disabled] {
+	background: var(--slider-background-disabled);
+}
+
+.srv-slider-container .srv-slider[disabled]::-webkit-slider-thumb {
+	background: var(--slider-thumb-disabled);
+}
+
+.srv-slider-container .srv-slider[disabled]::-moz-range-thumb {
+	background: var(--slider-thumb-disabled);
+}
+
+.srv-slider-container.srv-slider-bar .srv-slider[disabled]::-webkit-slider-thumb {
+	box-shadow: calc(-100vmax - var(--thumb-size)) 0 0 100vmax var(--slider-thumb-disabled);
+}
+
+.srv-slider-container.srv-slider-bar .srv-slider[disabled]::-moz-range-thumb {
+	box-shadow: calc(-100vmax - var(--thumb-size)) 0 0 100vmax var(--slider-thumb-disabled);
+}
+
+
+/** ============ MaxDiffMatrix ============ */
+/*Overriding SurveyJS's theme styles*/
+.matrix-maxdiff .sv-matrix__cell:first-child,
+.matrix-maxdiff .sd-matrix__cell:first-child  {
+	text-align: center;
+}
+
+/** ============ MatrixBipolar ============ */
+.matrix-bipolar tbody td:first-child {
+	text-align: right;
+}
+
+.matrix-bipolar tbody td:last-child {
+	text-align: left;
+}
+
+
+/** ============ SliderStar ============ */
+.star-slider-container {
+	--default-background: #d4d4d4;
+	--selected-background: rgb(249, 195, 0);
+	margin: 0 0 8px 0;
+}
+
+.star-slider-container .star-slider-inputs {
+	display: flex;
+	align-items: flex-end;
+}
+
+.star-slider-container .stars-container {
+	display: flex;
+}
+
+.star-slider-container .star-slider-inputs .star-slider-star-input {
+	color: var(--default-background);
+	font-size: 40px;
+	line-height: 40px;
+	cursor: pointer;
+}
+
+.star-slider-container .star-slider-inputs .slider-star-text-input {
+	margin: 0 0 0 18px;
+	font-size: 18px;
+}
+
+.star-slider-container .star-slider-inputs .star-slider-star-input.active {
+	color: var(--selected-background);
+}
+
+.star-slider-container .stars-container:hover .star-slider-star-input {
+	color: var(--selected-background);
+}
+
+.star-slider-container .stars-container .star-slider-star-input:hover ~ .star-slider-star-input {
+	color: var(--default-background);
+}
+
+
+/** ============ Multiple Select ============ */
+
+.srv-select-multiple {
+	border: 1px solid #9e9e9e;
+	border-radius: 4px;
+	box-sizing: border-box;
+	background: var(--background);
+	box-shadow: none;
+	font-size: calc(2 * var(--base-unit, 8px));
+}
+
+.srv-select-multiple option {
+	padding: calc(1.5 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
+}
+
+.srv-select-multiple:focus {
+	outline: 1px solid var(--primary);
+	border-color: var(--primary);
+}
+
+/** Change of selection color while focused still refuses to change.
+ *  Leaving it here for future. */
+.srv-select-multiple:focus option:checked,
+.srv-select-multiple option:checked {
+	background: var(--primary);
+	background-color: var(--primary);
+	color: var(--primary-foreground);
+}
\ No newline at end of file