bump: v0.0.21 -> v0.0.22

fix: remove checking buf until I can figure out how to not use buf.lock
fix: add flake.lock on update
2025-05-12 12:24:09 -04:00 · 2025-05-12 12:19:03 -04:00 · 2025-05-12 11:39:06 -04:00 · 2025-05-12 11:36:17 -04:00 · 2025-05-12 11:33:24 -04:00 · 2025-05-12 11:31:54 -04:00
183 changed files with 12315 additions and 2609 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -1,6 +1,6 @@
 .env
 /docker-compose.*
-/result
+/result*
 /.direnv/
 /build/

--- a/.github/workflows/lint.yaml
+++ b/.github/workflows/lint.yaml
@ -5,8 +5,6 @@ on:
    branches:
      - main
  pull_request:
-    branches:
-      - main

 jobs:
  lint:
@ -26,29 +24,5 @@ jobs:
          name: trevstack
          authToken: '${{ secrets.CACHIX_AUTH_TOKEN }}'

-      - name: Install NPM Packages
-        working-directory: ./client
-        run: npm i && npm ci # https://github.com/npm/cli/issues/6787#issuecomment-2128344748
-
-      - uses: nicknovitski/nix-develop@v1
-        
-      - run: npx prettier --check .
-        working-directory: ./client
-
-      - run: npx eslint .
-        working-directory: ./client
-
-      - run: npx svelte-check
-        working-directory: ./client
-
-      - run: revive -config revive.toml -set_exit_status ./...
-        working-directory: ./server
-
-      - run: sqlfluff lint
-        working-directory: ./server
-
-      - run: buf lint
-
-      - run: nix fmt -- flake.nix --check
-
-      - run: nix flake check --all-systems
+      - name: Run checks
+        run: nix flake check
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@ -7,6 +7,7 @@ on:

 permissions:
  contents: write
+  packages: write

 jobs:
  release:
@ -27,17 +28,25 @@ jobs:
          authToken: '${{ secrets.CACHIX_AUTH_TOKEN }}'
        
      - name: Build
-        run: nix develop --command trevstack-build
+        run: >
+          nix build
+          .#trevstack-linux-amd64
+          .#trevstack-linux-arm64
+          .#trevstack-linux-arm
+          .#trevstack-windows-amd64
+          .#trevstack-darwin-amd64
+          .#trevstack-darwin-arm64

      - name: Create Release
        uses: softprops/action-gh-release@v2
        with:
          files: |-
-            build/**
+            result*/bin/*
  
  # https://docs.docker.com/build/ci/github-actions/manage-tags-labels/
  package:
    runs-on: ubuntu-latest
+    needs: release # Wait for binary cache to propagate
    steps:
      - name: Docker meta
        id: meta
@ -45,16 +54,12 @@ jobs:
        with:
          # list of Docker images to use as base name for tags
          images: |
-            spotdemo4/trevstack
+            ${{ github.repository }}
+            ghcr.io/${{ github.repository }}
          # generate Docker tags based on the following events/attributes
          tags: |
-            type=schedule
            type=ref,event=branch
-            type=ref,event=pr
            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=semver,pattern={{major}}
-            type=sha

      - name: Login to Docker Hub
        uses: docker/login-action@v3
@ -62,6 +67,13 @@ jobs:
          username: ${{ vars.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
      - name: Set up QEMU
        uses: docker/setup-qemu-action@v3

--- a/.github/workflows/update.yaml
+++ b/.github/workflows/update.yaml
@ -23,12 +23,14 @@ jobs:
          name: trevstack
          authToken: '${{ secrets.CACHIX_AUTH_TOKEN }}'

-      - name: Install NPM Packages
-        working-directory: ./client
-        run: npm i && npm ci # https://github.com/npm/cli/issues/6787#issuecomment-2128344748
+      # https://github.com/actions/checkout/issues/13
+      - name: Set Git Config
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
        
      - name: Update
-        run: nix develop --command trevstack-update
+        run: nix run .#update

      - name: Create Pull Request
        uses: peter-evans/create-pull-request@v7
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,5 @@
 .env
 /docker-compose.*
-/result
+/result*
 /.direnv/
 /build/
--- a/.scripts/build.sh
+++ b/.scripts/build.sh
@ -1,24 +0,0 @@
-#!/usr/bin/env bash
-
-git_root=$(git rev-parse --show-toplevel)
-url=$(git config --get remote.origin.url)
-name=$(basename -s .git "${url}")
-git_version=$(git describe --tags --abbrev=0)
-version=${git_version#v}
-
-echo "building client"
-cd "${git_root}"
-nix build .#trevstack-client
-cp -a result/. server/client
-chmod -R u+w server/client
-
-echo "building server"
-cd "${git_root}/server"
-echo "Building ${name}-windows-amd64-${version}.exe"
-GOOS=windows GOARCH=amd64 go build -o "./build/${name}-windows-amd64-${version}.exe" .
-echo "Building ${name}-linux-amd64-${version}"
-GOOS=linux GOARCH=amd64 go build -o "./build/${name}-linux-amd64-${version}" .
-echo "Building ${name}-linux-amd64-${version}"
-GOOS=linux GOARCH=arm64 go build -o "./build/${name}-linux-arm64-${version}" .
-echo "Building ${name}-linux-arm-${version}"
-GOOS=linux GOARCH=arm go build -o "./build/${name}-linux-arm-${version}" .
--- a/.scripts/bump.sh
+++ b/.scripts/bump.sh
@ -7,13 +7,13 @@ next_version=$(echo "${version}" | awk -F. -v OFS=. '{$NF += 1 ; print}')

 echo "bumping client"
 cd "${git_root}/client"
-npm version "${next_version}" && npm i
+npm version "${next_version}"
 git add package-lock.json
 git add package.json

 echo "bumping nix"
 cd "${git_root}"
-nix-update --flake --version "${next_version}" --subpackage trevstack-client trevstack
+nix-update --flake --version "${next_version}" --subpackage client default
 git add flake.nix

 git commit -m "bump: v${version} -> v${next_version}"
--- a/.scripts/lint.sh
+++ b/.scripts/lint.sh
@ -1,23 +0,0 @@
-#!/usr/bin/env bash
-
-git_root=$(git rev-parse --show-toplevel)
-
-echo "linting client"
-cd "${git_root}/client"
-npx prettier --check .
-npx eslint .
-npx svelte-check
-
-echo "linting server"
-cd "${git_root}/server"
-revive -config revive.toml -set_exit_status ./...
-sqlfluff lint
-
-echo "linting protobuf"
-cd "${git_root}"
-buf lint
-
-echo "linting nix"
-cd "${git_root}"
-nix fmt -- flake.nix --check
-nix flake check --all-systems
--- a/.scripts/update.sh
+++ b/.scripts/update.sh
@ -3,6 +3,15 @@
 git_root=$(git rev-parse --show-toplevel)
 updated=false

+echo "updating nix flake"
+cd "${git_root}"
+nix flake update
+if ! git diff --exit-code flake.nix; then
+    git add flake.nix
+    git add flake.lock
+    git commit -m "build(nix): updated nix dependencies"
+fi
+
 echo "updating client"
 cd "${git_root}/client"
 npm update --save && npm i
@ -25,11 +34,9 @@ if ! git diff --exit-code go.mod go.sum; then
 fi

 if [ "${updated}" = true ]; then
-    echo "updating nix"
+    echo "updating nix hashes"
    cd "${git_root}"
-    nix-update --flake --version=skip --subpackage trevstack-client trevstack
+    nix-update --flake --version=skip --subpackage client default
    git add flake.nix
    git commit -m "build(nix): updated nix hashes"
-else
-    echo "nothing to update"
 fi
--- a/.treli.yaml
+++ b/.treli.yaml
@ -21,15 +21,15 @@ apps:
    dir: server
    exts:
      - go
-    onstart: go build -o ./tmp/app -tags dev && ./tmp/app
-    onchange: go build -o ./tmp/app -tags dev && ./tmp/app
+    onstart: go build -o ./tmp/app -tags dev cmd/trevstack/main.go && ./tmp/app
+    onchange: go build -o ./tmp/app -tags dev cmd/trevstack/main.go && ./tmp/app

  nix:
    color: "#74c7ec"
    exts:
      - nix
-    onstart: nix fmt
-    onchange: nix fmt
+    onstart: nix fmt .
+    onchange: nix fmt .

  prettier:
    color: "#fab387"
--- a/3
+++ b/3
@ -9,6 +9,7 @@ WORKDIR /tmp/build
 RUN nix \
    --extra-experimental-features "nix-command flakes" \
    --option filter-syscalls false \
+    --accept-flake-config \
    build

 # Copy the Nix store closure into a directory. The Nix store closure is the
@ -25,4 +26,4 @@ WORKDIR /app
 # Copy /nix/store
 COPY --from=builder /tmp/nix-store-closure /nix/store
 COPY --from=builder /tmp/build/result /app
-CMD ["/app/bin/server"]
+CMD ["/app/bin/trevstack"]
--- a/buf.gen.yaml
+++ b/buf.gen.yaml
@ -5,6 +5,9 @@ managed:
  override:
    - file_option: go_package_prefix
      value: github.com/spotdemo4/trevstack/server/internal/connect
+  disable:
+    - file_option: go_package
+      module: buf.build/bufbuild/protovalidate

 plugins:
  - local: protoc-gen-go
@ -18,6 +21,7 @@ plugins:
  - local: protoc-gen-es
    out: client/src/lib/connect
    opt: target=ts
+    include_imports: true

  - local: protoc-gen-connect-openapi
    out: client/static/openapi
--- a/buf.lock
+++ b/buf.lock
@ -0,0 +1,6 @@
+# Generated by buf. DO NOT EDIT.
+version: v2
+deps:
+  - name: buf.build/bufbuild/protovalidate
+    commit: 8976f5be98c146529b1cc15cd2012b60
+    digest: b5:5d513af91a439d9e78cacac0c9455c7cb885a8737d30405d0b91974fe05276d19c07a876a51a107213a3d01b83ecc912996cdad4cddf7231f91379079cf7488d
--- a/buf.yaml
+++ b/buf.yaml
@ -2,3 +2,5 @@
 version: v2
 modules:
  - path: proto
+deps:
+  - buf.build/bufbuild/protovalidate
--- a/client/.prettierrc
+++ b/client/.prettierrc
@ -4,6 +4,7 @@
 	"trailingComma": "none",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"tailwindFunctions": ["tv", "cn", "clsx"],
 	"overrides": [
 		{
 			"files": "*.svelte",
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
@ -1,7 +1,7 @@
 {
 	"name": "trevstack",
 	"private": true,
-	"version": "0.0.13",
+	"version": "0.0.22",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@ -14,35 +14,38 @@
 		"lint": "prettier --check . && eslint ."
 	},
 	"devDependencies": {
+		"@bufbuild/protovalidate": "^0.1.1",
 		"@connectrpc/connect": "^2.0.2",
 		"@connectrpc/connect-web": "^2.0.2",
-		"@eslint/compat": "^1.2.8",
+		"@eslint/compat": "^1.2.9",
 		"@eslint/js": "^9.18.0",
 		"@lucide/svelte": "^0.479.0",
-		"@scalar/api-reference": "^1.28.19",
+		"@scalar/api-reference": "^1.28.32",
 		"@simplewebauthn/browser": "^13.1.0",
 		"@sveltejs/adapter-static": "^3.0.8",
-		"@sveltejs/kit": "^2.20.7",
+		"@sveltejs/kit": "^2.20.8",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"@tailwindcss/vite": "^4.1.4",
-		"bits-ui": "^1.3.19",
-		"cbor2": "^1.12.0",
+		"@tailwindcss/vite": "^4.1.6",
+		"bits-ui": "^1.4.8",
 		"clsx": "^2.1.1",
-		"eslint": "^9.24.0",
-		"eslint-config-prettier": "^10.1.2",
+		"eslint": "^9.26.0",
+		"eslint-config-prettier": "^10.1.5",
 		"eslint-plugin-svelte": "^3.5.1",
-		"globals": "^16.0.0",
+		"fast-deep-equal": "^3.1.3",
+		"globals": "^16.1.0",
+		"mode-watcher": "^1.0.7",
 		"prettier": "^3.5.3",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
-		"svelte": "^5.27.0",
-		"svelte-check": "^4.1.6",
+		"svelte": "^5.28.2",
+		"svelte-check": "^4.1.7",
 		"svelte-sonner": "^0.3.28",
-		"tailwind-merge": "^3.2.0",
+		"tailwind-merge": "^3.3.0",
+		"tailwind-variants": "^1.0.0",
 		"tailwindcss": "^4.0.13",
-		"tw-animate-css": "^1.2.5",
+		"tw-animate-css": "^1.2.9",
 		"typescript": "^5.8.3",
-		"typescript-eslint": "^8.30.1",
-		"vite": "^6.2.6"
+		"typescript-eslint": "^8.32.0",
+		"vite": "^6.3.5"
 	}
 }
--- a/client/src/app.css
+++ b/client/src/app.css
@ -1,24 +1,105 @@
@import 'tailwindcss';
@import 'tw-animate-css';

-@theme {
-	--color-crust: #11111b;
-	--color-mantle: #181825;
-	--color-base: #1e1e2e;
+@custom-variant dark (&:where(.dark, .dark *));

-	--color-surface-0: #313244;
-	--color-surface-1: #45475a;
-	--color-surface-2: #585b70;
+@theme inline {
+	--spacing-body: calc(100vh - 180px);

-	--color-overlay-0: #6c7086;
-	--color-overlay-1: #7f849c;
-	--color-overlay-2: #9399b2;
+	--color-accent: var(--sky);

-	--color-subtext-0: #a6adc8;
-	--color-subtext-1: #bac2de;
-
-	--color-text: #cdd6f4;
-
-	--color-sky: #89dceb;
-	--color-red: #f38ba8;
+	--color-rosewater: var(--rosewater);
+	--color-flamingo: var(--flamingo);
+	--color-pink: var(--pink);
+	--color-mauve: var(--mauve);
+	--color-red: var(--red);
+	--color-maroon: var(--maroon);
+	--color-peach: var(--peach);
+	--color-yellow: var(--yellow);
+	--color-green: var(--green);
+	--color-teal: var(--teal);
+	--color-sky: var(--sky);
+	--color-sapphire: var(--sapphire);
+	--color-blue: var(--blue);
+	--color-lavender: var(--lavender);
+	--color-text: var(--text);
+	--color-subtext-1: var(--subtext-1);
+	--color-subtext: var(--subtext);
+	--color-overlay-2: var(--overlay-2);
+	--color-overlay-1: var(--overlay-1);
+	--color-overlay: var(--overlay);
+	--color-surface-2: var(--surface-2);
+	--color-surface-1: var(--surface-1);
+	--color-surface: var(--surface);
+	--color-based: var(--based);
+	--color-mantle: var(--mantle);
+	--color-crust: var(--crust);
 }
+
+@layer base {
+	:root {
+		--rosewater: hsl(11deg, 59%, 67%);
+		--flamingo: hsl(0deg, 60%, 67%);
+		--pink: hsl(316deg, 73%, 69%);
+		--mauve: hsl(266deg, 85%, 58%);
+		--red: hsl(347deg, 87%, 44%);
+		--maroon: hsl(355deg, 76%, 59%);
+		--peach: hsl(22deg, 99%, 52%);
+		--yellow: hsl(35deg, 77%, 49%);
+		--green: hsl(109deg, 58%, 40%);
+		--teal: hsl(183deg, 74%, 35%);
+		--sky: hsl(197deg, 97%, 46%);
+		--sapphire: hsl(189deg, 70%, 42%);
+		--blue: hsl(220deg, 91%, 54%);
+		--lavender: hsl(231deg, 97%, 72%);
+		--text: hsl(234deg, 16%, 35%);
+		--subtext-1: hsl(233deg, 13%, 41%);
+		--subtext: hsl(233deg, 10%, 47%);
+		--overlay-2: hsl(232deg, 10%, 53%);
+		--overlay-1: hsl(231deg, 10%, 59%);
+		--overlay: hsl(228deg, 11%, 65%);
+		--surface-2: hsl(227deg, 12%, 71%);
+		--surface-1: hsl(225deg, 14%, 77%);
+		--surface: hsl(223deg, 16%, 83%);
+		--based: hsl(220deg, 23%, 95%);
+		--mantle: hsl(220deg, 22%, 92%);
+		--crust: hsl(220deg, 21%, 89%);
+	}
+
+	.dark {
+		--rosewater: hsl(10deg, 56%, 91%);
+		--flamingo: hsl(0deg, 59%, 88%);
+		--pink: hsl(316deg, 72%, 86%);
+		--mauve: hsl(267deg, 84%, 81%);
+		--red: hsl(343deg, 81%, 75%);
+		--maroon: hsl(350deg, 65%, 77%);
+		--peach: hsl(23deg, 92%, 75%);
+		--yellow: hsl(41deg, 86%, 83%);
+		--green: hsl(115deg, 54%, 76%);
+		--teal: hsl(170deg, 57%, 73%);
+		--sky: hsl(189deg, 71%, 73%);
+		--sapphire: hsl(199deg, 76%, 69%);
+		--blue: hsl(217deg, 92%, 76%);
+		--lavender: hsl(232deg, 97%, 85%);
+		--text: hsl(226deg, 64%, 88%);
+		--subtext-1: hsl(227deg, 35%, 80%);
+		--subtext: hsl(228deg, 24%, 72%);
+		--overlay-2: hsl(228deg, 17%, 64%);
+		--overlay-1: hsl(230deg, 13%, 55%);
+		--overlay: hsl(231deg, 11%, 47%);
+		--surface-2: hsl(233deg, 12%, 39%);
+		--surface-1: hsl(234deg, 13%, 31%);
+		--surface: hsl(237deg, 16%, 23%);
+		--based: hsl(240deg, 21%, 15%);
+		--mantle: hsl(240deg, 21%, 12%);
+		--crust: hsl(240deg, 23%, 9%);
+	}
+}
+
+/*
+-- Cheat sheet --
+
+Focus Outline: blue
+Border: surface-1
+Hover: bump color by 2 (eg crust -> based), if accent color drop opacity (eg blue -> blue/90)
+*/
--- a/client/src/app.html
+++ b/client/src/app.html
@ -8,7 +8,7 @@
 		<title>TrevStack</title>
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="tap" class="bg-base text-text min-h-screen">
+	<body data-sveltekit-preload-data="tap" class="bg-crust text-text min-h-screen">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
--- a/client/src/lib/connect/buf/validate/validate_pb.ts
+++ b/client/src/lib/connect/buf/validate/validate_pb.ts
--- a/client/src/lib/connect/item/v1/item_pb.ts
+++ b/client/src/lib/connect/item/v1/item_pb.ts
@ -1,9 +1,10 @@
-// @generated by protoc-gen-es v2.2.3 with parameter "target=ts"
+// @generated by protoc-gen-es v2.2.5 with parameter "target=ts"
 // @generated from file item/v1/item.proto (package item.v1, syntax proto3)
 /* eslint-disable */

 import type { GenFile, GenMessage, GenService } from "@bufbuild/protobuf/codegenv1";
 import { fileDesc, messageDesc, serviceDesc } from "@bufbuild/protobuf/codegenv1";
+import { file_buf_validate_validate } from "../../buf/validate/validate_pb";
 import type { Timestamp } from "@bufbuild/protobuf/wkt";
 import { file_google_protobuf_timestamp } from "@bufbuild/protobuf/wkt";
 import type { Message } from "@bufbuild/protobuf";
@ -12,7 +13,7 @@ import type { Message } from "@bufbuild/protobuf";
 * Describes the file item/v1/item.proto.
 */
 export const file_item_v1_item: GenFile = /*@__PURE__*/
-  fileDesc("ChJpdGVtL3YxL2l0ZW0ucHJvdG8SB2l0ZW0udjEigQEKBEl0ZW0SCgoCaWQYASABKAMSDAoEbmFtZRgCIAEoCRIpCgVhZGRlZBgDIAEoCzIaLmdvb2dsZS5wcm90b2J1Zi5UaW1lc3RhbXASEwoLZGVzY3JpcHRpb24YBCABKAkSDQoFcHJpY2UYBSABKAISEAoIcXVhbnRpdHkYBiABKAUiHAoOR2V0SXRlbVJlcXVlc3QSCgoCaWQYASABKAMiLgoPR2V0SXRlbVJlc3BvbnNlEhsKBGl0ZW0YASABKAsyDS5pdGVtLnYxLkl0ZW0i3wEKD0dldEl0ZW1zUmVxdWVzdBIuCgVzdGFydBgBIAEoCzIaLmdvb2dsZS5wcm90b2J1Zi5UaW1lc3RhbXBIAIgBARIsCgNlbmQYAiABKAsyGi5nb29nbGUucHJvdG9idWYuVGltZXN0YW1wSAGIAQESEwoGZmlsdGVyGAMgASgJSAKIAQESEgoFbGltaXQYBCABKAVIA4gBARITCgZvZmZzZXQYBSABKAVIBIgBAUIICgZfc3RhcnRCBgoEX2VuZEIJCgdfZmlsdGVyQggKBl9saW1pdEIJCgdfb2Zmc2V0Ij8KEEdldEl0ZW1zUmVzcG9uc2USHAoFaXRlbXMYASADKAsyDS5pdGVtLnYxLkl0ZW0SDQoFY291bnQYAiABKAMiVwoRQ3JlYXRlSXRlbVJlcXVlc3QSDAoEbmFtZRgBIAEoCRITCgtkZXNjcmlwdGlvbhgCIAEoCRINCgVwcmljZRgDIAEoAhIQCghxdWFudGl0eRgEIAEoBSJLChJDcmVhdGVJdGVtUmVzcG9uc2USCgoCaWQYASABKAMSKQoFYWRkZWQYAiABKAsyGi5nb29nbGUucHJvdG9idWYuVGltZXN0YW1wIqcBChFVcGRhdGVJdGVtUmVxdWVzdBIKCgJpZBgBIAEoAxIRCgRuYW1lGAIgASgJSACIAQESGAoLZGVzY3JpcHRpb24YAyABKAlIAYgBARISCgVwcmljZRgEIAEoAkgCiAEBEhUKCHF1YW50aXR5GAUgASgFSAOIAQFCBwoFX25hbWVCDgoMX2Rlc2NyaXB0aW9uQggKBl9wcmljZUILCglfcXVhbnRpdHkiFAoSVXBkYXRlSXRlbVJlc3BvbnNlIh8KEURlbGV0ZUl0ZW1SZXF1ZXN0EgoKAmlkGAEgASgDIhQKEkRlbGV0ZUl0ZW1SZXNwb25zZTLrAgoLSXRlbVNlcnZpY2USPgoHR2V0SXRlbRIXLml0ZW0udjEuR2V0SXRlbVJlcXVlc3QaGC5pdGVtLnYxLkdldEl0ZW1SZXNwb25zZSIAEkEKCEdldEl0ZW1zEhguaXRlbS52MS5HZXRJdGVtc1JlcXVlc3QaGS5pdGVtLnYxLkdldEl0ZW1zUmVzcG9uc2UiABJHCgpDcmVhdGVJdGVtEhouaXRlbS52MS5DcmVhdGVJdGVtUmVxdWVzdBobLml0ZW0udjEuQ3JlYXRlSXRlbVJlc3BvbnNlIgASRwoKVXBkYXRlSXRlbRIaLml0ZW0udjEuVXBkYXRlSXRlbVJlcXVlc3QaGy5pdGVtLnYxLlVwZGF0ZUl0ZW1SZXNwb25zZSIAEkcKCkRlbGV0ZUl0ZW0SGi5pdGVtLnYxLkRlbGV0ZUl0ZW1SZXF1ZXN0GhsuaXRlbS52MS5EZWxldGVJdGVtUmVzcG9uc2UiAEKcAQoLY29tLml0ZW0udjFCCUl0ZW1Qcm90b1ABWkVnaXRodWIuY29tL3Nwb3RkZW1vNC90cmV2c3RhY2svc2VydmVyL2ludGVybmFsL2Nvbm5lY3QvaXRlbS92MTtpdGVtdjGiAgNJWFiqAgdJdGVtLlYxygIHSXRlbVxWMeICE0l0ZW1cVjFcR1BCTWV0YWRhdGHqAghJdGVtOjpWMWIGcHJvdG8z", [file_google_protobuf_timestamp]);
+  fileDesc("ChJpdGVtL3YxL2l0ZW0ucHJvdG8SB2l0ZW0udjEiigEKBEl0ZW0SCgoCaWQYASABKAMSFQoEbmFtZRgCIAEoCUIHukgEcgIQAxIpCgVhZGRlZBgDIAEoCzIaLmdvb2dsZS5wcm90b2J1Zi5UaW1lc3RhbXASEwoLZGVzY3JpcHRpb24YBCABKAkSDQoFcHJpY2UYBSABKAISEAoIcXVhbnRpdHkYBiABKAUiHAoOR2V0SXRlbVJlcXVlc3QSCgoCaWQYASABKAMiLgoPR2V0SXRlbVJlc3BvbnNlEhsKBGl0ZW0YASABKAsyDS5pdGVtLnYxLkl0ZW0i3wEKD0dldEl0ZW1zUmVxdWVzdBIuCgVzdGFydBgBIAEoCzIaLmdvb2dsZS5wcm90b2J1Zi5UaW1lc3RhbXBIAIgBARIsCgNlbmQYAiABKAsyGi5nb29nbGUucHJvdG9idWYuVGltZXN0YW1wSAGIAQESEwoGZmlsdGVyGAMgASgJSAKIAQESEgoFbGltaXQYBCABKAVIA4gBARITCgZvZmZzZXQYBSABKAVIBIgBAUIICgZfc3RhcnRCBgoEX2VuZEIJCgdfZmlsdGVyQggKBl9saW1pdEIJCgdfb2Zmc2V0Ij8KEEdldEl0ZW1zUmVzcG9uc2USHAoFaXRlbXMYASADKAsyDS5pdGVtLnYxLkl0ZW0SDQoFY291bnQYAiABKAMiVwoRQ3JlYXRlSXRlbVJlcXVlc3QSDAoEbmFtZRgBIAEoCRITCgtkZXNjcmlwdGlvbhgCIAEoCRINCgVwcmljZRgDIAEoAhIQCghxdWFudGl0eRgEIAEoBSJLChJDcmVhdGVJdGVtUmVzcG9uc2USCgoCaWQYASABKAMSKQoFYWRkZWQYAiABKAsyGi5nb29nbGUucHJvdG9idWYuVGltZXN0YW1wIqcBChFVcGRhdGVJdGVtUmVxdWVzdBIKCgJpZBgBIAEoAxIRCgRuYW1lGAIgASgJSACIAQESGAoLZGVzY3JpcHRpb24YAyABKAlIAYgBARISCgVwcmljZRgEIAEoAkgCiAEBEhUKCHF1YW50aXR5GAUgASgFSAOIAQFCBwoFX25hbWVCDgoMX2Rlc2NyaXB0aW9uQggKBl9wcmljZUILCglfcXVhbnRpdHkiFAoSVXBkYXRlSXRlbVJlc3BvbnNlIh8KEURlbGV0ZUl0ZW1SZXF1ZXN0EgoKAmlkGAEgASgDIhQKEkRlbGV0ZUl0ZW1SZXNwb25zZTLrAgoLSXRlbVNlcnZpY2USPgoHR2V0SXRlbRIXLml0ZW0udjEuR2V0SXRlbVJlcXVlc3QaGC5pdGVtLnYxLkdldEl0ZW1SZXNwb25zZSIAEkEKCEdldEl0ZW1zEhguaXRlbS52MS5HZXRJdGVtc1JlcXVlc3QaGS5pdGVtLnYxLkdldEl0ZW1zUmVzcG9uc2UiABJHCgpDcmVhdGVJdGVtEhouaXRlbS52MS5DcmVhdGVJdGVtUmVxdWVzdBobLml0ZW0udjEuQ3JlYXRlSXRlbVJlc3BvbnNlIgASRwoKVXBkYXRlSXRlbRIaLml0ZW0udjEuVXBkYXRlSXRlbVJlcXVlc3QaGy5pdGVtLnYxLlVwZGF0ZUl0ZW1SZXNwb25zZSIAEkcKCkRlbGV0ZUl0ZW0SGi5pdGVtLnYxLkRlbGV0ZUl0ZW1SZXF1ZXN0GhsuaXRlbS52MS5EZWxldGVJdGVtUmVzcG9uc2UiAEKcAQoLY29tLml0ZW0udjFCCUl0ZW1Qcm90b1ABWkVnaXRodWIuY29tL3Nwb3RkZW1vNC90cmV2c3RhY2svc2VydmVyL2ludGVybmFsL2Nvbm5lY3QvaXRlbS92MTtpdGVtdjGiAgNJWFiqAgdJdGVtLlYxygIHSXRlbVxWMeICE0l0ZW1cVjFcR1BCTWV0YWRhdGHqAghJdGVtOjpWMWIGcHJvdG8z", [file_buf_validate_validate, file_google_protobuf_timestamp]);

 /**
 * @generated from message item.v1.Item
--- a/client/src/lib/connect/user/v1/auth_pb.ts
+++ b/client/src/lib/connect/user/v1/auth_pb.ts
@ -1,16 +1,17 @@
-// @generated by protoc-gen-es v2.2.3 with parameter "target=ts"
+// @generated by protoc-gen-es v2.2.5 with parameter "target=ts"
 // @generated from file user/v1/auth.proto (package user.v1, syntax proto3)
 /* eslint-disable */

 import type { GenFile, GenMessage, GenService } from "@bufbuild/protobuf/codegenv1";
 import { fileDesc, messageDesc, serviceDesc } from "@bufbuild/protobuf/codegenv1";
+import { file_buf_validate_validate } from "../../buf/validate/validate_pb";
 import type { Message } from "@bufbuild/protobuf";

 /**
 * Describes the file user/v1/auth.proto.
 */
 export const file_user_v1_auth: GenFile = /*@__PURE__*/
-  fileDesc("ChJ1c2VyL3YxL2F1dGgucHJvdG8SB3VzZXIudjEiMgoMTG9naW5SZXF1ZXN0EhAKCHVzZXJuYW1lGAEgASgJEhAKCHBhc3N3b3JkGAIgASgJIh4KDUxvZ2luUmVzcG9uc2USDQoFdG9rZW4YASABKAkiTQoNU2lnblVwUmVxdWVzdBIQCgh1c2VybmFtZRgBIAEoCRIQCghwYXNzd29yZBgCIAEoCRIYChBjb25maXJtX3Bhc3N3b3JkGAMgASgJIhAKDlNpZ25VcFJlc3BvbnNlIg8KDUxvZ291dFJlcXVlc3QiEAoOTG9nb3V0UmVzcG9uc2UywQEKC0F1dGhTZXJ2aWNlEjgKBUxvZ2luEhUudXNlci52MS5Mb2dpblJlcXVlc3QaFi51c2VyLnYxLkxvZ2luUmVzcG9uc2UiABI7CgZTaWduVXASFi51c2VyLnYxLlNpZ25VcFJlcXVlc3QaFy51c2VyLnYxLlNpZ25VcFJlc3BvbnNlIgASOwoGTG9nb3V0EhYudXNlci52MS5Mb2dvdXRSZXF1ZXN0GhcudXNlci52MS5Mb2dvdXRSZXNwb25zZSIAQpwBCgtjb20udXNlci52MUIJQXV0aFByb3RvUAFaRWdpdGh1Yi5jb20vc3BvdGRlbW80L3RyZXZzdGFjay9zZXJ2ZXIvaW50ZXJuYWwvY29ubmVjdC91c2VyL3YxO3VzZXJ2MaICA1VYWKoCB1VzZXIuVjHKAgdVc2VyXFYx4gITVXNlclxWMVxHUEJNZXRhZGF0YeoCCFVzZXI6OlYxYgZwcm90bzM");
+  fileDesc("ChJ1c2VyL3YxL2F1dGgucHJvdG8SB3VzZXIudjEiOwoMTG9naW5SZXF1ZXN0EhkKCHVzZXJuYW1lGAEgASgJQge6SARyAhADEhAKCHBhc3N3b3JkGAIgASgJIh4KDUxvZ2luUmVzcG9uc2USDQoFdG9rZW4YASABKAkiVgoNU2lnblVwUmVxdWVzdBIZCgh1c2VybmFtZRgBIAEoCUIHukgEcgIQAxIQCghwYXNzd29yZBgCIAEoCRIYChBjb25maXJtX3Bhc3N3b3JkGAMgASgJIhAKDlNpZ25VcFJlc3BvbnNlIg8KDUxvZ291dFJlcXVlc3QiEAoOTG9nb3V0UmVzcG9uc2UiLAoYQmVnaW5QYXNza2V5TG9naW5SZXF1ZXN0EhAKCHVzZXJuYW1lGAEgASgJIjEKGUJlZ2luUGFzc2tleUxvZ2luUmVzcG9uc2USFAoMb3B0aW9uc19qc29uGAEgASgJIkIKGUZpbmlzaFBhc3NrZXlMb2dpblJlcXVlc3QSEAoIdXNlcm5hbWUYASABKAkSEwoLYXR0ZXN0YXRpb24YAiABKAkiKwoaRmluaXNoUGFzc2tleUxvZ2luUmVzcG9uc2USDQoFdG9rZW4YASABKAkygAMKC0F1dGhTZXJ2aWNlEjgKBUxvZ2luEhUudXNlci52MS5Mb2dpblJlcXVlc3QaFi51c2VyLnYxLkxvZ2luUmVzcG9uc2UiABI7CgZTaWduVXASFi51c2VyLnYxLlNpZ25VcFJlcXVlc3QaFy51c2VyLnYxLlNpZ25VcFJlc3BvbnNlIgASOwoGTG9nb3V0EhYudXNlci52MS5Mb2dvdXRSZXF1ZXN0GhcudXNlci52MS5Mb2dvdXRSZXNwb25zZSIAElwKEUJlZ2luUGFzc2tleUxvZ2luEiEudXNlci52MS5CZWdpblBhc3NrZXlMb2dpblJlcXVlc3QaIi51c2VyLnYxLkJlZ2luUGFzc2tleUxvZ2luUmVzcG9uc2UiABJfChJGaW5pc2hQYXNza2V5TG9naW4SIi51c2VyLnYxLkZpbmlzaFBhc3NrZXlMb2dpblJlcXVlc3QaIy51c2VyLnYxLkZpbmlzaFBhc3NrZXlMb2dpblJlc3BvbnNlIgBCnAEKC2NvbS51c2VyLnYxQglBdXRoUHJvdG9QAVpFZ2l0aHViLmNvbS9zcG90ZGVtbzQvdHJldnN0YWNrL3NlcnZlci9pbnRlcm5hbC9jb25uZWN0L3VzZXIvdjE7dXNlcnYxogIDVVhYqgIHVXNlci5WMcoCB1VzZXJcVjHiAhNVc2VyXFYxXEdQQk1ldGFkYXRh6gIIVXNlcjo6VjFiBnByb3RvMw", [file_buf_validate_validate]);

 /**
 * @generated from message user.v1.LoginRequest
@ -117,6 +118,79 @@ export type LogoutResponse = Message<"user.v1.LogoutResponse"> & {
 export const LogoutResponseSchema: GenMessage<LogoutResponse> = /*@__PURE__*/
  messageDesc(file_user_v1_auth, 5);

+/**
+ * @generated from message user.v1.BeginPasskeyLoginRequest
+ */
+export type BeginPasskeyLoginRequest = Message<"user.v1.BeginPasskeyLoginRequest"> & {
+  /**
+   * @generated from field: string username = 1;
+   */
+  username: string;
+};
+
+/**
+ * Describes the message user.v1.BeginPasskeyLoginRequest.
+ * Use `create(BeginPasskeyLoginRequestSchema)` to create a new message.
+ */
+export const BeginPasskeyLoginRequestSchema: GenMessage<BeginPasskeyLoginRequest> = /*@__PURE__*/
+  messageDesc(file_user_v1_auth, 6);
+
+/**
+ * @generated from message user.v1.BeginPasskeyLoginResponse
+ */
+export type BeginPasskeyLoginResponse = Message<"user.v1.BeginPasskeyLoginResponse"> & {
+  /**
+   * @generated from field: string options_json = 1;
+   */
+  optionsJson: string;
+};
+
+/**
+ * Describes the message user.v1.BeginPasskeyLoginResponse.
+ * Use `create(BeginPasskeyLoginResponseSchema)` to create a new message.
+ */
+export const BeginPasskeyLoginResponseSchema: GenMessage<BeginPasskeyLoginResponse> = /*@__PURE__*/
+  messageDesc(file_user_v1_auth, 7);
+
+/**
+ * @generated from message user.v1.FinishPasskeyLoginRequest
+ */
+export type FinishPasskeyLoginRequest = Message<"user.v1.FinishPasskeyLoginRequest"> & {
+  /**
+   * @generated from field: string username = 1;
+   */
+  username: string;
+
+  /**
+   * @generated from field: string attestation = 2;
+   */
+  attestation: string;
+};
+
+/**
+ * Describes the message user.v1.FinishPasskeyLoginRequest.
+ * Use `create(FinishPasskeyLoginRequestSchema)` to create a new message.
+ */
+export const FinishPasskeyLoginRequestSchema: GenMessage<FinishPasskeyLoginRequest> = /*@__PURE__*/
+  messageDesc(file_user_v1_auth, 8);
+
+/**
+ * @generated from message user.v1.FinishPasskeyLoginResponse
+ */
+export type FinishPasskeyLoginResponse = Message<"user.v1.FinishPasskeyLoginResponse"> & {
+  /**
+   * @generated from field: string token = 1;
+   */
+  token: string;
+};
+
+/**
+ * Describes the message user.v1.FinishPasskeyLoginResponse.
+ * Use `create(FinishPasskeyLoginResponseSchema)` to create a new message.
+ */
+export const FinishPasskeyLoginResponseSchema: GenMessage<FinishPasskeyLoginResponse> = /*@__PURE__*/
+  messageDesc(file_user_v1_auth, 9);
+
 /**
 * @generated from service user.v1.AuthService
 */
@ -145,6 +219,22 @@ export const AuthService: GenService<{
    input: typeof LogoutRequestSchema;
    output: typeof LogoutResponseSchema;
  },
+  /**
+   * @generated from rpc user.v1.AuthService.BeginPasskeyLogin
+   */
+  beginPasskeyLogin: {
+    methodKind: "unary";
+    input: typeof BeginPasskeyLoginRequestSchema;
+    output: typeof BeginPasskeyLoginResponseSchema;
+  },
+  /**
+   * @generated from rpc user.v1.AuthService.FinishPasskeyLogin
+   */
+  finishPasskeyLogin: {
+    methodKind: "unary";
+    input: typeof FinishPasskeyLoginRequestSchema;
+    output: typeof FinishPasskeyLoginResponseSchema;
+  },
 }> = /*@__PURE__*/
  serviceDesc(file_user_v1_auth, 0);

--- a/client/src/lib/connect/user/v1/user_pb.ts
+++ b/client/src/lib/connect/user/v1/user_pb.ts
@ -1,4 +1,4 @@
-// @generated by protoc-gen-es v2.2.3 with parameter "target=ts"
+// @generated by protoc-gen-es v2.2.5 with parameter "target=ts"
 // @generated from file user/v1/user.proto (package user.v1, syntax proto3)
 /* eslint-disable */

@ -10,7 +10,7 @@ import type { Message } from "@bufbuild/protobuf";
 * Describes the file user/v1/user.proto.
 */
 export const file_user_v1_user: GenFile = /*@__PURE__*/
-  fileDesc("ChJ1c2VyL3YxL3VzZXIucHJvdG8SB3VzZXIudjEiXAoEVXNlchIKCgJpZBgBIAEoAxIQCgh1c2VybmFtZRgCIAEoCRIfChJwcm9maWxlX3BpY3R1cmVfaWQYAyABKANIAIgBAUIVChNfcHJvZmlsZV9waWN0dXJlX2lkIhAKDkdldFVzZXJSZXF1ZXN0Ii4KD0dldFVzZXJSZXNwb25zZRIbCgR1c2VyGAEgASgLMg0udXNlci52MS5Vc2VyIl0KFVVwZGF0ZVBhc3N3b3JkUmVxdWVzdBIUCgxvbGRfcGFzc3dvcmQYASABKAkSFAoMbmV3X3Bhc3N3b3JkGAIgASgJEhgKEGNvbmZpcm1fcGFzc3dvcmQYAyABKAkiNQoWVXBkYXRlUGFzc3dvcmRSZXNwb25zZRIbCgR1c2VyGAEgASgLMg0udXNlci52MS5Vc2VyIj4KEEdldEFQSUtleVJlcXVlc3QSEAoIcGFzc3dvcmQYASABKAkSGAoQY29uZmlybV9wYXNzd29yZBgCIAEoCSIgChFHZXRBUElLZXlSZXNwb25zZRILCgNrZXkYASABKAkiPgobVXBkYXRlUHJvZmlsZVBpY3R1cmVSZXF1ZXN0EhEKCWZpbGVfbmFtZRgBIAEoCRIMCgRkYXRhGAIgASgMIjsKHFVwZGF0ZVByb2ZpbGVQaWN0dXJlUmVzcG9uc2USGwoEdXNlchgBIAEoCzINLnVzZXIudjEuVXNlcjLPAgoLVXNlclNlcnZpY2USPgoHR2V0VXNlchIXLnVzZXIudjEuR2V0VXNlclJlcXVlc3QaGC51c2VyLnYxLkdldFVzZXJSZXNwb25zZSIAElMKDlVwZGF0ZVBhc3N3b3JkEh4udXNlci52MS5VcGRhdGVQYXNzd29yZFJlcXVlc3QaHy51c2VyLnYxLlVwZGF0ZVBhc3N3b3JkUmVzcG9uc2UiABJECglHZXRBUElLZXkSGS51c2VyLnYxLkdldEFQSUtleVJlcXVlc3QaGi51c2VyLnYxLkdldEFQSUtleVJlc3BvbnNlIgASZQoUVXBkYXRlUHJvZmlsZVBpY3R1cmUSJC51c2VyLnYxLlVwZGF0ZVByb2ZpbGVQaWN0dXJlUmVxdWVzdBolLnVzZXIudjEuVXBkYXRlUHJvZmlsZVBpY3R1cmVSZXNwb25zZSIAQpwBCgtjb20udXNlci52MUIJVXNlclByb3RvUAFaRWdpdGh1Yi5jb20vc3BvdGRlbW80L3RyZXZzdGFjay9zZXJ2ZXIvaW50ZXJuYWwvY29ubmVjdC91c2VyL3YxO3VzZXJ2MaICA1VYWKoCB1VzZXIuVjHKAgdVc2VyXFYx4gITVXNlclxWMVxHUEJNZXRhZGF0YeoCCFVzZXI6OlYxYgZwcm90bzM");
+  fileDesc("ChJ1c2VyL3YxL3VzZXIucHJvdG8SB3VzZXIudjEiXAoEVXNlchIKCgJpZBgBIAEoAxIQCgh1c2VybmFtZRgCIAEoCRIfChJwcm9maWxlX3BpY3R1cmVfaWQYAyABKANIAIgBAUIVChNfcHJvZmlsZV9waWN0dXJlX2lkIhAKDkdldFVzZXJSZXF1ZXN0Ii4KD0dldFVzZXJSZXNwb25zZRIbCgR1c2VyGAEgASgLMg0udXNlci52MS5Vc2VyIl0KFVVwZGF0ZVBhc3N3b3JkUmVxdWVzdBIUCgxvbGRfcGFzc3dvcmQYASABKAkSFAoMbmV3X3Bhc3N3b3JkGAIgASgJEhgKEGNvbmZpcm1fcGFzc3dvcmQYAyABKAkiNQoWVXBkYXRlUGFzc3dvcmRSZXNwb25zZRIbCgR1c2VyGAEgASgLMg0udXNlci52MS5Vc2VyIj4KEEdldEFQSUtleVJlcXVlc3QSEAoIcGFzc3dvcmQYASABKAkSGAoQY29uZmlybV9wYXNzd29yZBgCIAEoCSIgChFHZXRBUElLZXlSZXNwb25zZRILCgNrZXkYASABKAkiPgobVXBkYXRlUHJvZmlsZVBpY3R1cmVSZXF1ZXN0EhEKCWZpbGVfbmFtZRgBIAEoCRIMCgRkYXRhGAIgASgMIjsKHFVwZGF0ZVByb2ZpbGVQaWN0dXJlUmVzcG9uc2USGwoEdXNlchgBIAEoCzINLnVzZXIudjEuVXNlciIhCh9CZWdpblBhc3NrZXlSZWdpc3RyYXRpb25SZXF1ZXN0IjgKIEJlZ2luUGFzc2tleVJlZ2lzdHJhdGlvblJlc3BvbnNlEhQKDG9wdGlvbnNfanNvbhgBIAEoCSI3CiBGaW5pc2hQYXNza2V5UmVnaXN0cmF0aW9uUmVxdWVzdBITCgthdHRlc3RhdGlvbhgBIAEoCSIjCiFGaW5pc2hQYXNza2V5UmVnaXN0cmF0aW9uUmVzcG9uc2UyuAQKC1VzZXJTZXJ2aWNlEj4KB0dldFVzZXISFy51c2VyLnYxLkdldFVzZXJSZXF1ZXN0GhgudXNlci52MS5HZXRVc2VyUmVzcG9uc2UiABJTCg5VcGRhdGVQYXNzd29yZBIeLnVzZXIudjEuVXBkYXRlUGFzc3dvcmRSZXF1ZXN0Gh8udXNlci52MS5VcGRhdGVQYXNzd29yZFJlc3BvbnNlIgASRAoJR2V0QVBJS2V5EhkudXNlci52MS5HZXRBUElLZXlSZXF1ZXN0GhoudXNlci52MS5HZXRBUElLZXlSZXNwb25zZSIAEmUKFFVwZGF0ZVByb2ZpbGVQaWN0dXJlEiQudXNlci52MS5VcGRhdGVQcm9maWxlUGljdHVyZVJlcXVlc3QaJS51c2VyLnYxLlVwZGF0ZVByb2ZpbGVQaWN0dXJlUmVzcG9uc2UiABJxChhCZWdpblBhc3NrZXlSZWdpc3RyYXRpb24SKC51c2VyLnYxLkJlZ2luUGFzc2tleVJlZ2lzdHJhdGlvblJlcXVlc3QaKS51c2VyLnYxLkJlZ2luUGFzc2tleVJlZ2lzdHJhdGlvblJlc3BvbnNlIgASdAoZRmluaXNoUGFzc2tleVJlZ2lzdHJhdGlvbhIpLnVzZXIudjEuRmluaXNoUGFzc2tleVJlZ2lzdHJhdGlvblJlcXVlc3QaKi51c2VyLnYxLkZpbmlzaFBhc3NrZXlSZWdpc3RyYXRpb25SZXNwb25zZSIAQpwBCgtjb20udXNlci52MUIJVXNlclByb3RvUAFaRWdpdGh1Yi5jb20vc3BvdGRlbW80L3RyZXZzdGFjay9zZXJ2ZXIvaW50ZXJuYWwvY29ubmVjdC91c2VyL3YxO3VzZXJ2MaICA1VYWKoCB1VzZXIuVjHKAgdVc2VyXFYx4gITVXNlclxWMVxHUEJNZXRhZGF0YeoCCFVzZXI6OlYxYgZwcm90bzM");

 /**
 * @generated from message user.v1.User
@ -191,6 +191,66 @@ export type UpdateProfilePictureResponse = Message<"user.v1.UpdateProfilePicture
 export const UpdateProfilePictureResponseSchema: GenMessage<UpdateProfilePictureResponse> = /*@__PURE__*/
  messageDesc(file_user_v1_user, 8);

+/**
+ * @generated from message user.v1.BeginPasskeyRegistrationRequest
+ */
+export type BeginPasskeyRegistrationRequest = Message<"user.v1.BeginPasskeyRegistrationRequest"> & {
+};
+
+/**
+ * Describes the message user.v1.BeginPasskeyRegistrationRequest.
+ * Use `create(BeginPasskeyRegistrationRequestSchema)` to create a new message.
+ */
+export const BeginPasskeyRegistrationRequestSchema: GenMessage<BeginPasskeyRegistrationRequest> = /*@__PURE__*/
+  messageDesc(file_user_v1_user, 9);
+
+/**
+ * @generated from message user.v1.BeginPasskeyRegistrationResponse
+ */
+export type BeginPasskeyRegistrationResponse = Message<"user.v1.BeginPasskeyRegistrationResponse"> & {
+  /**
+   * @generated from field: string options_json = 1;
+   */
+  optionsJson: string;
+};
+
+/**
+ * Describes the message user.v1.BeginPasskeyRegistrationResponse.
+ * Use `create(BeginPasskeyRegistrationResponseSchema)` to create a new message.
+ */
+export const BeginPasskeyRegistrationResponseSchema: GenMessage<BeginPasskeyRegistrationResponse> = /*@__PURE__*/
+  messageDesc(file_user_v1_user, 10);
+
+/**
+ * @generated from message user.v1.FinishPasskeyRegistrationRequest
+ */
+export type FinishPasskeyRegistrationRequest = Message<"user.v1.FinishPasskeyRegistrationRequest"> & {
+  /**
+   * @generated from field: string attestation = 1;
+   */
+  attestation: string;
+};
+
+/**
+ * Describes the message user.v1.FinishPasskeyRegistrationRequest.
+ * Use `create(FinishPasskeyRegistrationRequestSchema)` to create a new message.
+ */
+export const FinishPasskeyRegistrationRequestSchema: GenMessage<FinishPasskeyRegistrationRequest> = /*@__PURE__*/
+  messageDesc(file_user_v1_user, 11);
+
+/**
+ * @generated from message user.v1.FinishPasskeyRegistrationResponse
+ */
+export type FinishPasskeyRegistrationResponse = Message<"user.v1.FinishPasskeyRegistrationResponse"> & {
+};
+
+/**
+ * Describes the message user.v1.FinishPasskeyRegistrationResponse.
+ * Use `create(FinishPasskeyRegistrationResponseSchema)` to create a new message.
+ */
+export const FinishPasskeyRegistrationResponseSchema: GenMessage<FinishPasskeyRegistrationResponse> = /*@__PURE__*/
+  messageDesc(file_user_v1_user, 12);
+
 /**
 * @generated from service user.v1.UserService
 */
@ -227,6 +287,22 @@ export const UserService: GenService<{
    input: typeof UpdateProfilePictureRequestSchema;
    output: typeof UpdateProfilePictureResponseSchema;
  },
+  /**
+   * @generated from rpc user.v1.UserService.BeginPasskeyRegistration
+   */
+  beginPasskeyRegistration: {
+    methodKind: "unary";
+    input: typeof BeginPasskeyRegistrationRequestSchema;
+    output: typeof BeginPasskeyRegistrationResponseSchema;
+  },
+  /**
+   * @generated from rpc user.v1.UserService.FinishPasskeyRegistration
+   */
+  finishPasskeyRegistration: {
+    methodKind: "unary";
+    input: typeof FinishPasskeyRegistrationRequestSchema;
+    output: typeof FinishPasskeyRegistrationResponseSchema;
+  },
 }> = /*@__PURE__*/
  serviceDesc(file_user_v1_user, 0);

--- a/client/src/lib/coolforms/conststate.svelte.ts
+++ b/client/src/lib/coolforms/conststate.svelte.ts
@ -0,0 +1,5 @@
+export function newState<T>(s: T) {
+	const state = $state(s);
+
+	return state;
+}
--- a/client/src/lib/coolforms/coolforms.svelte.ts
+++ b/client/src/lib/coolforms/coolforms.svelte.ts
@ -0,0 +1,181 @@
+import {
+	create,
+	type DescMessage,
+	type DescService,
+	type MessageShape,
+	type MessageInitShape
+} from '@bufbuild/protobuf';
+import { ValidationError, type Violation } from '@bufbuild/protovalidate';
+import { Validator } from '../transport';
+import { ConnectError, type Client } from '@connectrpc/connect';
+import type { Action } from 'svelte/action';
+
+type Options<Input extends DescMessage, Output extends DescMessage> = {
+	init?: MessageInitShape<Input>;
+	start?: boolean;
+	reset?: boolean;
+	onSubmit?: (formData: FormData, input: MessageShape<Input>) => Promise<MessageShape<Input>>;
+	onResult?: (result: MessageShape<Output>) => void;
+	onError?: (err: Violation[] | ConnectError) => void;
+};
+
+type Violations<Field> = {
+	[field in keyof Field]?: Violation[];
+};
+
+export function coolForm<Service extends DescService, Method extends Service['methods'][number]>(
+	client: Client<Service>,
+	method: Method,
+	options?: Options<Method['input'], Method['output']>
+) {
+	const input = $state(create(method.input as Method['input'], options?.init));
+	const output = $state(create(method.output as Method['output']));
+	const errors: Violations<Method['input']['field']> & {
+		form?: ConnectError;
+	} = $state({});
+	let loading = $state(false);
+
+	const validate = () => {
+		// Delete existing errors
+		for (const key in errors) {
+			delete errors[key];
+		}
+
+		try {
+			Validator.validate(method['input'], input);
+		} catch (e) {
+			if (!(e instanceof ValidationError)) {
+				throw e;
+			}
+
+			// Map violation errors to errors rune
+			for (const violation of e.violations) {
+				for (const field of violation.field) {
+					if (!('localName' in field)) {
+						continue;
+					}
+
+					// Create localName property if it doesn't exist
+					if (!errors[field.localName]) {
+						Object.assign(errors, {
+							[field.localName]: [violation]
+						});
+					} else {
+						errors[field.localName]?.push(violation);
+					}
+				}
+			}
+
+			return e.violations;
+		}
+
+		return [];
+	};
+
+	// When a request is successful
+	const success = (response: MessageShape<Method['output']>) => {
+		loading = false;
+
+		// Send the response up
+		options?.onResult?.(response);
+
+		// Set the response
+		Object.assign(output, response);
+
+		// If we want to reset the input
+		if (options && (options.reset == undefined || options.reset)) {
+			const cleared = create(method.input as Method['input'], options?.init);
+			Object.assign(input, cleared);
+		}
+	};
+
+	// When a request fails
+	const fail = (err: Violation[] | ConnectError | Error) => {
+		loading = false;
+
+		// It's a Violation[]
+		if (Array.isArray(err)) {
+			// Send the error up
+			options?.onError?.(err);
+			return;
+		}
+
+		// It's a ConnectError
+		if (err instanceof ConnectError) {
+			// Assign it to the form
+			errors.form = err;
+
+			// Send the error up
+			options?.onError?.(err);
+			return;
+		}
+
+		throw err;
+	};
+
+	const submit = () => {
+		loading = true;
+
+		// Validate
+		const validationErrors = validate();
+		if (validationErrors.length > 0) {
+			fail(validationErrors);
+			return;
+		}
+
+		// Send response
+		if (method.methodKind == 'unary') {
+			// @ts-expect-error I can't figure out how to make this typescript compliant
+			const response = client[method.localName]($state.snapshot(input)) as Promise<
+				MessageShape<Method['output']>
+			>;
+
+			response
+				.then((resp) => {
+					success(resp);
+				})
+				.catch((err) => {
+					fail(err);
+				});
+		}
+	};
+
+	// A nice action to give to forms to run submit() on submit
+	const impair: Action<HTMLFormElement> = (form) => {
+		$effect(() => {
+			form.onsubmit = (event) => {
+				event.preventDefault();
+
+				if (options?.onSubmit) {
+					const formData = new FormData(form);
+					options.onSubmit(formData, input).then((i) => {
+						Object.assign(input, i);
+						submit();
+					});
+
+					return;
+				}
+
+				submit();
+			};
+
+			return () => {
+				form.onsubmit = () => {};
+			};
+		});
+	};
+
+	if (options?.start) {
+		submit();
+	}
+
+	return {
+		input,
+		output,
+		errors,
+		loading: () => loading,
+		submit,
+		validate,
+		impair
+	};
+}
--- a/client/src/lib/coolforms/index.ts
+++ b/client/src/lib/coolforms/index.ts
@ -0,0 +1,4 @@
+import { coolForm } from './coolforms.svelte';
+import { newState } from './conststate.svelte';
+
+export { coolForm, newState };
--- a/client/src/lib/transport.ts
+++ b/client/src/lib/transport.ts
@ -1,9 +1,11 @@
 import { createConnectTransport } from '@connectrpc/connect-web';
+import { createValidator } from '@bufbuild/protovalidate';
 import { Code, ConnectError, createClient, type Interceptor } from '@connectrpc/connect';
 import { AuthService } from '$lib/connect/user/v1/auth_pb';
 import { UserService } from '$lib/connect/user/v1/user_pb';
 import { ItemService } from '$lib/connect/item/v1/item_pb';
 import { goto } from '$app/navigation';
+import { page } from '$app/state';

 const redirector: Interceptor = (next) => async (req) => {
 	try {
@ -11,7 +13,14 @@ const redirector: Interceptor = (next) => async (req) => {
 	} catch (e) {
 		const error = ConnectError.from(e);
 		if (error.code === Code.Unauthenticated) {
-			await goto('/auth');
+			const redirectURL = new URL(page.url);
+			redirectURL.pathname = '/auth';
+			redirectURL.searchParams.append(
+				'redir',
+				encodeURIComponent(page.url.pathname + page.url.search)
+			);
+
+			await goto(redirectURL);
 		}
 		throw e;
 	}
@ -25,3 +34,5 @@ const transport = createConnectTransport({
 export const AuthClient = createClient(AuthService, transport);
 export const UserClient = createClient(UserService, transport);
 export const ItemClient = createClient(ItemService, transport);
+
+export const Validator = createValidator();
--- a/client/src/lib/ui/Avatar.svelte
+++ b/client/src/lib/ui/Avatar.svelte
@ -1,15 +0,0 @@
-<script lang="ts">
-	import { userState } from '$lib/sharedState.svelte';
-	import { Avatar } from 'bits-ui';
-</script>
-
-<Avatar.Root class="flex h-full w-full items-center justify-center">
-	<Avatar.Image
-		src={userState.user?.profilePictureId ? '/file/' + userState.user.profilePictureId : null}
-		alt={`${userState.user?.username}'s avatar`}
-		class="rounded-full"
-	/>
-	<Avatar.Fallback class="font-medium uppercase"
-		>{userState.user?.username.substring(0, 2)}</Avatar.Fallback
-	>
-</Avatar.Root>
--- a/client/src/lib/ui/Button.svelte
+++ b/client/src/lib/ui/Button.svelte
@ -1,32 +0,0 @@
-<script lang="ts">
-	import { Button } from 'bits-ui';
-	import { cn } from '$lib/utils';
-	import type { Snippet } from 'svelte';
-
-	type me = MouseEvent & { currentTarget: EventTarget & HTMLButtonElement };
-
-	let {
-		className,
-		type,
-		onclick,
-		children
-	}: {
-		className?: string;
-		type?: 'submit' | 'reset' | 'button' | null;
-		onclick?: (e: me) => void;
-		children?: Snippet<[]>;
-	} = $props();
-</script>
-
-<Button.Root
-	{type}
-	class={cn(
-		'bg-sky text-crust focus:outline-sky flex w-fit cursor-pointer items-center justify-center rounded p-2 px-4 text-sm font-medium transition-all hover:brightness-120 focus:outline-2 focus:outline-offset-1',
-		className
-	)}
-	onclick={(e: me) => {
-		onclick?.(e);
-	}}
->
-	{@render children?.()}
-</Button.Root>
--- a/client/src/lib/ui/DateRangePicker.svelte
+++ b/client/src/lib/ui/DateRangePicker.svelte
@ -1,170 +0,0 @@
-<script lang="ts">
-	import { ArrowLeft, ArrowRight, Minus, Calendar, X } from '@lucide/svelte';
-	import { DateRangePicker, type DateRange } from 'bits-ui';
-	import { fade } from 'svelte/transition';
-	import { getLocalTimeZone } from '@internationalized/date';
-	import { cn } from '$lib/utils';
-
-	let {
-		className,
-		start = $bindable(),
-		end = $bindable(),
-		onchange
-	}: {
-		className?: string;
-		start?: Date;
-		end?: Date;
-		onchange?: (start?: Date, end?: Date) => void;
-	} = $props();
-
-	let daterange: DateRange = $state({
-		start: undefined,
-		end: undefined
-	});
-	let rerender = $state(false);
-</script>
-
-<!-- Need to rerender because setting to undefined doesn't work  -->
-{#key rerender}
-	<DateRangePicker.Root
-		bind:value={daterange}
-		onValueChange={(v) => {
-			if (v.start && v.end) {
-				start = v.start.toDate(getLocalTimeZone());
-				end = v.end.toDate(getLocalTimeZone());
-				if (onchange) {
-					onchange(start, end);
-				}
-			}
-		}}
-		class={cn(className)}
-	>
-		<div
-			class="bg-mantle border-surface-0 hover:border-surface-2 flex items-center rounded border pl-2 text-sm drop-shadow-md transition-all"
-		>
-			<div class="flex grow items-center justify-center">
-				{#each ['start', 'end'] as const as type (type)}
-					<DateRangePicker.Input {type}>
-						{#snippet children({ segments })}
-							{#each segments as seg (seg)}
-								<div class="inline-block select-none">
-									{#if seg.part === 'literal'}
-										<DateRangePicker.Segment part={seg.part} class="text-overlay-0 p-1">
-											{seg.value}
-										</DateRangePicker.Segment>
-									{:else}
-										<DateRangePicker.Segment
-											part={seg.part}
-											class="aria-[valuetext=Empty]:text-overlay-0 hover:bg-surface-0 focus:bg-surface-0 focus:outline-sky rounded p-0.5 transition-all focus:outline focus:outline-offset-1"
-										>
-											{seg.value}
-										</DateRangePicker.Segment>
-									{/if}
-								</div>
-							{/each}
-						{/snippet}
-					</DateRangePicker.Input>
-					{#if type === 'start'}
-						<div aria-hidden="true" class="px-1">
-							<Minus size="10" />
-						</div>
-					{/if}
-				{/each}
-			</div>
-			<DateRangePicker.Trigger
-				class="text-overlay-2 hover:bg-surface-0 focus:outline-sky ml-1 flex grow cursor-pointer items-center justify-center p-2 transition-all focus:outline focus:outline-offset-1"
-			>
-				<Calendar size="20" />
-			</DateRangePicker.Trigger>
-			<button
-				class="text-overlay-2 hover:bg-surface-0 focus:outline-sky cursor-pointer rounded-r p-2 transition-all focus:outline focus:outline-offset-1"
-				onclick={() => {
-					if (daterange) {
-						daterange.end = undefined;
-						daterange.start = undefined;
-					}
-					start = undefined;
-					end = undefined;
-					if (onchange) {
-						onchange(start, end);
-					}
-					rerender = !rerender;
-				}}
-			>
-				<X size="20" />
-			</button>
-		</div>
-		<DateRangePicker.Content forceMount>
-			{#snippet child({ props, open })}
-				{#if open}
-					<div
-						{...props}
-						class="absolute z-50"
-						transition:fade={{
-							duration: 100
-						}}
-					>
-						<DateRangePicker.Calendar
-							class="border-surface-0 bg-mantle mt-1 rounded border p-3 drop-shadow-md"
-						>
-							{#snippet children({ months, weekdays })}
-								<DateRangePicker.Header class="flex items-center justify-between">
-									<DateRangePicker.PrevButton
-										class="hover:bg-surface-0 inline-flex size-10 cursor-pointer items-center justify-center rounded transition-all active:scale-[0.98]"
-									>
-										<ArrowLeft />
-									</DateRangePicker.PrevButton>
-									<DateRangePicker.Heading class="font-medium select-none" />
-									<DateRangePicker.NextButton
-										class="hover:bg-surface-0 inline-flex size-10 cursor-pointer items-center justify-center rounded transition-all active:scale-[0.98]"
-									>
-										<ArrowRight />
-									</DateRangePicker.NextButton>
-								</DateRangePicker.Header>
-								<div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-y-0 sm:space-x-4">
-									{#each months as month, i (i)}
-										<DateRangePicker.Grid class="w-full border-collapse space-y-1 select-none">
-											<DateRangePicker.GridHead>
-												<DateRangePicker.GridRow class="mb-1 flex w-full justify-between">
-													{#each weekdays as day, i (i)}
-														<DateRangePicker.HeadCell
-															class="text-overlay-0 w-10 rounded text-xs font-normal!"
-														>
-															{day.slice(0, 2)}
-														</DateRangePicker.HeadCell>
-													{/each}
-												</DateRangePicker.GridRow>
-											</DateRangePicker.GridHead>
-											<DateRangePicker.GridBody>
-												{#each month.weeks as weekDates, i (i)}
-													<DateRangePicker.GridRow class="flex w-full">
-														{#each weekDates as date, i (i)}
-															<DateRangePicker.Cell
-																{date}
-																month={month.value}
-																class="relative m-0 size-10 overflow-visible p-0! text-center text-sm focus-within:relative focus-within:z-20"
-															>
-																<DateRangePicker.Day
-																	class="hover:border-sky focus-visible:ring-foreground! data-highlighted:bg-surface-0 data-selected:bg-surface-1 data-selection-end:bg-surface-2 data-selection-start:bg-surface-2 data-disabled:text-text/30 data-unavailable:text-overlay-0 group relative inline-flex size-10 items-center justify-center overflow-visible rounded border border-transparent bg-transparent p-0 text-sm font-normal whitespace-nowrap transition-all data-disabled:pointer-events-none data-highlighted:rounded-none data-outside-month:pointer-events-none data-selected:rounded-none data-selection-end:rounded-r data-selection-start:rounded-l data-unavailable:line-through"
-																>
-																	<div
-																		class="bg-sky group-data-selected:bg-background absolute top-[5px] hidden size-1 rounded-full transition-all group-data-today:block"
-																	></div>
-																	{date.day}
-																</DateRangePicker.Day>
-															</DateRangePicker.Cell>
-														{/each}
-													</DateRangePicker.GridRow>
-												{/each}
-											</DateRangePicker.GridBody>
-										</DateRangePicker.Grid>
-									{/each}
-								</div>
-							{/snippet}
-						</DateRangePicker.Calendar>
-					</div>
-				{/if}
-			{/snippet}
-		</DateRangePicker.Content>
-	</DateRangePicker.Root>
-{/key}
--- a/client/src/lib/ui/Input.svelte
+++ b/client/src/lib/ui/Input.svelte
@ -1,51 +0,0 @@
-<script lang="ts">
-	import { cn } from '$lib/utils';
-	import { X } from '@lucide/svelte';
-
-	let {
-		name,
-		value = $bindable(''),
-		type = 'text',
-		placeholder,
-		className,
-		onchange
-	}: {
-		name?: string;
-		value?: string | number;
-		type?: string;
-		placeholder?: string;
-		className?: string;
-		onchange?: (e: Event) => void;
-	} = $props();
-</script>
-
-<div
-	class={cn(
-		'border-surface-0 hover:border-surface-2 flex items-center justify-between gap-1 rounded border p-0 drop-shadow-md transition-all',
-		className
-	)}
->
-	<input
-		id={name}
-		{name}
-		{type}
-		{placeholder}
-		class="focus:outline-sky grow rounded-l p-2 text-sm transition-all focus:outline focus:outline-offset-1"
-		bind:value
-		{onchange}
-	/>
-	<button
-		class="text-overlay-2 hover:bg-surface-0 focus:outline-sky cursor-pointer rounded-r p-2 transition-all focus:outline focus:outline-offset-1"
-		type="button"
-		onclick={(e) => {
-			if (value) {
-				value = '';
-				if (onchange) {
-					onchange(e);
-				}
-			}
-		}}
-	>
-		<X size="20" />
-	</button>
-</div>
--- a/client/src/lib/ui/Modal.svelte
+++ b/client/src/lib/ui/Modal.svelte
@ -1,92 +0,0 @@
-<script lang="ts">
-	import { X } from '@lucide/svelte';
-	import { Dialog } from 'bits-ui';
-	import { fade } from 'svelte/transition';
-	import { type Snippet } from 'svelte';
-	import { pushState } from '$app/navigation';
-
-	let {
-		trigger,
-		title,
-		content,
-		open = $bindable(false)
-	}: {
-		trigger: Snippet<[Record<string, unknown>]>;
-		title: Snippet;
-		content: Snippet;
-		open?: boolean;
-	} = $props();
-</script>
-
-<svelte:window
-	onpopstate={() => {
-		if (open) {
-			open = false;
-		}
-	}}
-/>
-
-<Dialog.Root
-	bind:open
-	onOpenChange={(e) => {
-		if (e) {
-			pushState('', '#modal');
-		} else {
-			history.back();
-		}
-	}}
->
-	<Dialog.Trigger>
-		{#snippet child({ props })}
-			{@render trigger(props)}
-		{/snippet}
-	</Dialog.Trigger>
-	<Dialog.Portal>
-		<Dialog.Overlay forceMount>
-			{#snippet child({ props, open })}
-				{#if open}
-					<div
-						{...props}
-						transition:fade={{
-							duration: 100
-						}}
-					>
-						<div class="fixed inset-0 z-50 mt-[50px] bg-black/50 transition-all"></div>
-					</div>
-				{/if}
-			{/snippet}
-		</Dialog.Overlay>
-		<Dialog.Content forceMount>
-			{#snippet child({ props, open: propopen })}
-				{#if propopen}
-					<div
-						{...props}
-						transition:fade={{
-							duration: 100
-						}}
-					>
-						<div
-							class="bg-mantle border-surface-0 fixed inset-0 top-[50%] left-[50%] z-50 size-fit w-96 -translate-x-1/2 -translate-y-1/2 transform overflow-y-auto rounded-xl border pb-1 drop-shadow-md"
-						>
-							<div class="border-surface-0 flex justify-between border-b p-2">
-								<h1 class="grow truncate p-1 text-center text-xl font-bold">
-									{@render title()}
-								</h1>
-								<button
-									tabindex="-1"
-									class="text-overlay-2 hover:bg-surface-0 focus:outline-sky cursor-pointer rounded p-1 transition-all focus:outline focus:outline-offset-1"
-									onclick={() => {
-										open = false;
-									}}
-								>
-									<X />
-								</button>
-							</div>
-							{@render content()}
-						</div>
-					</div>
-				{/if}
-			{/snippet}
-		</Dialog.Content>
-	</Dialog.Portal>
-</Dialog.Root>
--- a/client/src/lib/ui/Pagination.svelte
+++ b/client/src/lib/ui/Pagination.svelte
@ -1,86 +0,0 @@
-<script lang="ts">
-	import { cn } from '$lib/utils';
-	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
-	import { Pagination } from 'bits-ui';
-	import { pushState, replaceState } from '$app/navigation';
-	import { onMount, tick } from 'svelte';
-
-	let {
-		count = $bindable(),
-		limit = $bindable(),
-		offset = $bindable(0),
-		className,
-		onchange
-	}: {
-		count: number;
-		limit: number;
-		offset?: number;
-		className?: string;
-		onchange?: (e: number) => void;
-	} = $props();
-
-	let page: number = $state(1);
-
-	onMount(async () => {
-		await tick();
-		replaceState('', `${page}`);
-	});
-</script>
-
-<svelte:window
-	onpopstate={(e) => {
-		const lastPage: number = Number(e.state['sveltekit:states']);
-		if (!isNaN(lastPage)) {
-			page = lastPage;
-			offset = (lastPage - 1) * limit;
-			window.scrollTo(0, 0);
-			onchange?.(lastPage);
-		}
-	}}
-/>
-
-{#key count && limit}
-	<Pagination.Root
-		{count}
-		bind:page
-		perPage={limit}
-		onPageChange={(e) => {
-			offset = (e - 1) * limit;
-			window.scrollTo(0, 0);
-			pushState('', `${e}`);
-			onchange?.(e);
-		}}
-	>
-		{#snippet children({ pages, range })}
-			<div class={cn('mb-2 flex items-center justify-center gap-2', className)}>
-				<Pagination.PrevButton
-					class="hover:bg-surface-0 disabled:text-overlay-0 inline-flex cursor-pointer items-center justify-center rounded p-2 transition-all disabled:cursor-not-allowed hover:disabled:bg-transparent"
-				>
-					<ChevronLeft />
-				</Pagination.PrevButton>
-				<div class="flex items-center gap-2">
-					{#each pages as page (page.key)}
-						{#if page.type === 'ellipsis'}
-							<div class="font-medium select-none">...</div>
-						{:else}
-							<Pagination.Page
-								{page}
-								class="hover:bg-surface-0 data-selected:bg-surface-0 data-selected:text-background inline-flex size-10 cursor-pointer items-center justify-center rounded bg-transparent font-medium transition-all select-none disabled:cursor-not-allowed disabled:opacity-50 hover:disabled:bg-transparent"
-							>
-								{page.value}
-							</Pagination.Page>
-						{/if}
-					{/each}
-				</div>
-				<Pagination.NextButton
-					class="hover:bg-surface-0 disabled:text-overlay-0 inline-flex cursor-pointer items-center justify-center rounded p-2 transition-all disabled:cursor-not-allowed hover:disabled:bg-transparent"
-				>
-					<ChevronRight />
-				</Pagination.NextButton>
-			</div>
-			<p class="text-overlay-2 text-center text-sm">
-				Showing {range.start} - {range.end}
-			</p>
-		{/snippet}
-	</Pagination.Root>
-{/key}
--- a/client/src/lib/ui/Select.svelte
+++ b/client/src/lib/ui/Select.svelte
@ -1,94 +0,0 @@
-<script lang="ts">
-	import { cn } from '$lib/utils';
-	import { Check, ChevronsDown, ChevronsUp, ChevronsUpDown, X } from '@lucide/svelte';
-	import { Select } from 'bits-ui';
-	import { fade } from 'svelte/transition';
-
-	let {
-		value = $bindable('10'),
-		placeholder = 'Select an item',
-		items = [],
-		defaultValue = '',
-		className,
-		onchange
-	}: {
-		value?: string;
-		placeholder?: string;
-		items: { value: string; label: string; disabled?: boolean }[];
-		defaultValue?: string;
-		className?: string;
-		onchange?: (e: string) => void;
-	} = $props();
-
-	const selectedLabel = $derived(value ? items.find((i) => i.value === value)?.label : placeholder);
-</script>
-
-<div
-	class={cn(
-		'border-surface-0 bg-mantle hover:border-surface-2 flex items-center justify-between rounded border p-0 drop-shadow-md transition-all',
-		className
-	)}
->
-	<Select.Root type="single" {items} bind:value onValueChange={onchange}>
-		<Select.Trigger
-			class="focus:outline-sky data-placeholder:text-overlay-0 inline-flex grow cursor-pointer items-center justify-between gap-2 rounded-l py-2 pl-2 text-sm transition-colors select-none focus:outline focus:outline-offset-1"
-			aria-label={placeholder}
-		>
-			{selectedLabel}
-			<ChevronsUpDown class="text-overlay-0" size="20" />
-		</Select.Trigger>
-		<Select.Portal>
-			<Select.Content forceMount>
-				{#snippet child({ wrapperProps, props, open })}
-					{#if open}
-						<div {...wrapperProps}>
-							<div
-								{...props}
-								class="border-surface-0 bg-mantle shadow-popover z-50 mt-1 rounded border p-1 outline-hidden select-none"
-								transition:fade={{
-									duration: 100
-								}}
-							>
-								<Select.ScrollUpButton class="flex w-full items-center justify-center">
-									<ChevronsUp size="20" />
-								</Select.ScrollUpButton>
-								<Select.Viewport class="p-1">
-									{#each items as item, i (i + item.value)}
-										<Select.Item
-											class="data-highlighted:bg-surface-0 flex h-10 w-full cursor-pointer items-center gap-4 rounded px-5 py-3 text-sm capitalize outline-hidden select-none data-disabled:cursor-not-allowed data-disabled:opacity-50"
-											value={item.value}
-											label={item.label}
-											disabled={item.disabled}
-										>
-											{#snippet children({ selected })}
-												{item.label}
-												{#if selected}
-													<div class="ml-auto">
-														<Check size="20" />
-													</div>
-												{/if}
-											{/snippet}
-										</Select.Item>
-									{/each}
-								</Select.Viewport>
-								<Select.ScrollDownButton class="flex w-full items-center justify-center">
-									<ChevronsDown size="20" />
-								</Select.ScrollDownButton>
-							</div>
-						</div>
-					{/if}
-				{/snippet}
-			</Select.Content>
-		</Select.Portal>
-	</Select.Root>
-	<button
-		class="text-overlay-2 hover:bg-surface-0 focus:outline-sky cursor-pointer rounded-r p-2 transition-all focus:outline focus:outline-offset-1"
-		type="button"
-		onclick={() => {
-			value = defaultValue;
-			onchange?.(value);
-		}}
-	>
-		<X size="20" />
-	</button>
-</div>
--- a/client/src/lib/ui/avatar/avatar-fallback.svelte
+++ b/client/src/lib/ui/avatar/avatar-fallback.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+	bind:ref
+	data-slot="avatar-fallback"
+	class={cn(
+		'bg-surface outline-surface-2 flex size-full items-center justify-center rounded-full text-sm transition-all select-none',
+		className
+	)}
+	{...restProps}
+/>
--- a/client/src/lib/ui/avatar/avatar-image.svelte
+++ b/client/src/lib/ui/avatar/avatar-image.svelte
@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.ImageProps = $props();
+</script>
+
+<AvatarPrimitive.Image
+	bind:ref
+	data-slot="avatar-image"
+	class={cn('aspect-square size-full', className)}
+	{...restProps}
+/>
--- a/client/src/lib/ui/avatar/avatar.svelte
+++ b/client/src/lib/ui/avatar/avatar.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.RootProps = $props();
+</script>
+
+<AvatarPrimitive.Root
+	bind:ref
+	data-slot="avatar"
+	class={cn(
+		'outline-surface-1 relative flex size-9 shrink-0 overflow-hidden rounded-full outline outline-offset-2',
+		className
+	)}
+	{...restProps}
+/>
--- a/client/src/lib/ui/avatar/index.ts
+++ b/client/src/lib/ui/avatar/index.ts
@ -0,0 +1,13 @@
+import Root from './avatar.svelte';
+import Image from './avatar-image.svelte';
+import Fallback from './avatar-fallback.svelte';
+
+export {
+	Root,
+	Image,
+	Fallback,
+	//
+	Root as Avatar,
+	Image as AvatarImage,
+	Fallback as AvatarFallback
+};
--- a/client/src/lib/ui/button/button.svelte
+++ b/client/src/lib/ui/button/button.svelte
@ -0,0 +1,93 @@
+<script lang="ts" module>
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { type VariantProps, tv } from 'tailwind-variants';
+	import { cn } from '$lib/utils';
+	import { LoaderCircle } from '@lucide/svelte';
+
+	export const buttonVariants = tv({
+		base: cn(
+			'inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap shadow-xs transition-all',
+
+			// Focus
+			'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2',
+
+			// Disabled
+			'disabled:pointer-events-none disabled:opacity-50',
+
+			// Images
+			"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5"
+		),
+		variants: {
+			variant: {
+				default: 'text-crust bg-accent hover:bg-accent/90 shadow-xs',
+				red: 'text-crust bg-red hover:bg-red/90 shadow-xs',
+				outline: 'text-text border-surface-1 hover:bg-surface border bg-transparent shadow-xs',
+				input: 'text-text border-surface-1 hover:border-overlay border bg-transparent shadow-xs',
+				ghost: 'text-text hover:bg-surface shadow-xs'
+			},
+			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: 'h-9 min-w-9 px-3'
+			}
+		},
+		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;
+			loading?: boolean;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = 'default',
+		size = 'default',
+		ref = $bindable(null),
+		href = undefined,
+		type = 'button',
+		loading,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{href}
+		{...restProps}
+	>
+		{#if loading}
+			<LoaderCircle class="animate-spin" />
+		{/if}
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{...restProps}
+	>
+		{#if loading}
+			<LoaderCircle class="animate-spin" />
+		{/if}
+		{@render children?.()}
+	</button>
+{/if}
--- a/client/src/lib/ui/button/index.ts
+++ b/client/src/lib/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
+};
--- a/client/src/lib/ui/card/card.svelte
+++ b/client/src/lib/ui/card/card.svelte
@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: Props = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn('bg-based border-surface-1 rounded border p-5 shadow-md', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/client/src/lib/ui/card/index.ts
+++ b/client/src/lib/ui/card/index.ts
@ -0,0 +1,7 @@
+import Root from './card.svelte';
+
+export {
+	Root,
+	//
+	Root as Card
+};
--- a/client/src/lib/ui/daterangepicker/daterangepicker.svelte
+++ b/client/src/lib/ui/daterangepicker/daterangepicker.svelte
@ -0,0 +1,76 @@
+<script lang="ts">
+	import CalendarIcon from '@lucide/svelte/icons/calendar';
+	import type { DateRange } from 'bits-ui';
+	import {
+		CalendarDate,
+		DateFormatter,
+		type DateValue,
+		getLocalTimeZone
+	} from '@internationalized/date';
+	import { cn } from '$lib/utils.js';
+	import { buttonVariants } from '$lib/ui/button';
+	import { RangeCalendar } from '$lib/ui/range-calendar';
+	import * as Popover from '$lib/ui/popover';
+
+	let {
+		className,
+		start,
+		end,
+		onchange
+	}: {
+		className?: string;
+		start?: Date;
+		end?: Date;
+		onchange?: (start: Date, end: Date) => void;
+	} = $props();
+
+	let value: DateRange = $state({
+		start: start
+			? new CalendarDate(start.getFullYear(), start.getMonth(), start.getDate())
+			: undefined,
+		end: end ? new CalendarDate(end.getFullYear(), end.getMonth(), end.getDate()) : undefined
+	});
+
+	const df = new DateFormatter('en-US', {
+		dateStyle: 'medium'
+	});
+
+	let startValue: DateValue | undefined = $state(undefined);
+</script>
+
+<div class={cn('grid gap-2', className)}>
+	<Popover.Root>
+		<Popover.Trigger
+			class={cn(buttonVariants({ variant: 'input' }), 'bg-based', !value && 'text-subtext')}
+		>
+			<CalendarIcon class="mr-2 size-4" />
+			{#if value && value.start}
+				{#if value.end}
+					{df.format(value.start.toDate(getLocalTimeZone()))} - {df.format(
+						value.end.toDate(getLocalTimeZone())
+					)}
+				{:else}
+					{df.format(value.start.toDate(getLocalTimeZone()))}
+				{/if}
+			{:else if startValue}
+				{df.format(startValue.toDate(getLocalTimeZone()))}
+			{:else}
+				Pick a date range
+			{/if}
+		</Popover.Trigger>
+		<Popover.Content class="bg-based w-auto p-0" align="start">
+			<RangeCalendar
+				bind:value
+				onStartValueChange={(v) => {
+					startValue = v;
+				}}
+				onValueChange={(v) => {
+					if (v.start && v.end) {
+						onchange?.(v.start.toDate(getLocalTimeZone()), v.end.toDate(getLocalTimeZone()));
+					}
+				}}
+				numberOfMonths={2}
+			/>
+		</Popover.Content>
+	</Popover.Root>
+</div>
--- a/client/src/lib/ui/daterangepicker/index.ts
+++ b/client/src/lib/ui/daterangepicker/index.ts
@ -0,0 +1,3 @@
+import Root from './daterangepicker.svelte';
+
+export { Root, Root as DateRangePicker };
--- a/client/src/lib/ui/dialog/dialog-close.svelte
+++ b/client/src/lib/ui/dialog/dialog-close.svelte
@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />
--- a/client/src/lib/ui/dialog/dialog-content.svelte
+++ b/client/src/lib/ui/dialog/dialog-content.svelte
@ -0,0 +1,50 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+	import X from '@lucide/svelte/icons/x';
+	import type { Snippet } from 'svelte';
+	import * as Dialog from './index.js';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: DialogPrimitive.PortalProps;
+		children: Snippet;
+	} = $props();
+</script>
+
+<Dialog.Portal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			'bg-mantle text-text border-surface-1 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg',
+
+			// Animations
+			'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 duration-200',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<DialogPrimitive.Close
+			class={cn(
+				'text-text hover:bg-crust absolute top-4 right-4 cursor-pointer rounded p-1 transition-all disabled:pointer-events-none',
+
+				// Focus
+				'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2',
+
+				// Images
+				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+			)}
+		>
+			<X />
+			<span class="sr-only">Close</span>
+		</DialogPrimitive.Close>
+	</DialogPrimitive.Content>
+</Dialog.Portal>
--- a/client/src/lib/ui/dialog/dialog-description.svelte
+++ b/client/src/lib/ui/dialog/dialog-description.svelte
@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn('text-muted-foreground text-sm', className)}
+	{...restProps}
+/>
--- a/client/src/lib/ui/dialog/dialog-footer.svelte
+++ b/client/src/lib/ui/dialog/dialog-footer.svelte
@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-footer"
+	class={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/client/src/lib/ui/dialog/dialog-header.svelte
+++ b/client/src/lib/ui/dialog/dialog-header.svelte
@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { WithElementRef } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-header"
+	class={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/client/src/lib/ui/dialog/dialog-overlay.svelte
+++ b/client/src/lib/ui/dialog/dialog-overlay.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="dialog-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}
+/>
--- a/client/src/lib/ui/dialog/dialog-title.svelte
+++ b/client/src/lib/ui/dialog/dialog-title.svelte
@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	data-slot="dialog-title"
+	class={cn('text-lg leading-none font-semibold', className)}
+	{...restProps}
+/>
--- a/client/src/lib/ui/dialog/dialog-trigger.svelte
+++ b/client/src/lib/ui/dialog/dialog-trigger.svelte
@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />
--- a/client/src/lib/ui/dialog/dialog.svelte
+++ b/client/src/lib/ui/dialog/dialog.svelte
@ -0,0 +1,28 @@
+<script lang="ts">
+	import { pushState } from '$app/navigation';
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let { open = $bindable(), onOpenChange, ...restProps }: DialogPrimitive.RootProps = $props();
+</script>
+
+<svelte:window
+	onpopstate={() => {
+		if (open) {
+			open = false;
+		}
+	}}
+/>
+
+<DialogPrimitive.Root
+	onOpenChange={(v) => {
+		if (v) {
+			pushState('', '#dialog');
+		} else {
+			history.back();
+		}
+
+		onOpenChange?.(v);
+	}}
+	bind:open
+	{...restProps}
+/>
--- a/client/src/lib/ui/dialog/index.ts
+++ b/client/src/lib/ui/dialog/index.ts
@ -0,0 +1,37 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+
+import Root from './dialog.svelte';
+import Title from './dialog-title.svelte';
+import Footer from './dialog-footer.svelte';
+import Header from './dialog-header.svelte';
+import Overlay from './dialog-overlay.svelte';
+import Content from './dialog-content.svelte';
+import Description from './dialog-description.svelte';
+import Trigger from './dialog-trigger.svelte';
+import Close from './dialog-close.svelte';
+
+const Portal = DialogPrimitive.Portal;
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose
+};
--- a/client/src/lib/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/client/src/lib/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@ -0,0 +1,47 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+	import Check from '@lucide/svelte/icons/check';
+	import Minus from '@lucide/svelte/icons/minus';
+	import { cn } from '$lib/utils.js';
+	import type { Snippet } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	data-slot="dropdown-menu-checkbox-item"
+	class={cn(
+		'focus:bg-surface relative flex cursor-pointer items-center gap-2 rounded-sm py-2 pr-2 pl-8 text-sm outline-hidden select-none',
+
+		// Disabled
+		'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+
+		// Images
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+			{#if indeterminate}
+				<Minus class="size-4" />
+			{:else}
+				<Check class={cn('size-4', !checked && 'text-transparent')} />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</DropdownMenuPrimitive.CheckboxItem>
--- a/client/src/lib/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/client/src/lib/ui/dropdown-menu/dropdown-menu-content.svelte
@ -0,0 +1,31 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		sideOffset = 4,
+		portalProps,
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.ContentProps & {
+		portalProps?: DropdownMenuPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...portalProps}>
+	<DropdownMenuPrimitive.Content
+		bind:ref
+		data-slot="dropdown-menu-content"
+		{sideOffset}
+		class={cn(
+			'bg-based text-text border-surface z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+
+			// Animations
+			'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',
+
+			className
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPrimitive.Portal>
--- a/client/src/lib/ui/dropdown-menu/dropdown-menu-group.svelte
+++ b/client/src/lib/ui/dropdown-menu/dropdown-menu-group.svelte
@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.GroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Group
+	bind:ref
+	data-slot="dropdown-menu-group"
+	class={cn('border-surface border-b first:pt-0 last:border-none last:pb-0', className)}
+	{...restProps}
+/>
--- a/client/src/lib/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/client/src/lib/ui/dropdown-menu/dropdown-menu-item.svelte
@ -0,0 +1,27 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.ItemProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+	bind:ref
+	data-slot="dropdown-menu-item"
+	class={cn(
+		'focus:bg-surface text-text relative flex cursor-pointer items-center gap-2 px-4 py-2 text-sm outline-hidden transition-all select-none',
+
+		// Disabled
+		'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+
+		// Images
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+
+		className
+	)}
+	{...restProps}
+/>
--- a/client/src/lib/ui/dropdown-menu/dropdown-menu-label.svelte
+++ b/client/src/lib/ui/dropdown-menu/dropdown-menu-label.svelte
@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { type WithElementRef } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dropdown-menu-label"
+	class={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/client/src/lib/ui/dropdown-menu/dropdown-menu-link.svelte
+++ b/client/src/lib/ui/dropdown-menu/dropdown-menu-link.svelte
@ -0,0 +1,22 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import Item from './dropdown-menu-item.svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		href,
+		children,
+		...restProps
+	}: DropdownMenuPrimitive.ItemProps & {
+		href?: string;
+	} = $props();
+</script>
+
+<Item bind:ref class={className} {...restProps}>
+	{#snippet child({ props })}
+		<a {...props} {href}>
+			{@render children?.()}
+		</a>
+	{/snippet}
+</Item>
--- a/client/src/lib/ui/dropdown-menu/dropdown-menu-radio-group.svelte
+++ b/client/src/lib/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@ -0,0 +1,16 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		...restProps
+	}: DropdownMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-radio-group"
+	{...restProps}
+/>
--- a/client/src/lib/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/client/src/lib/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@ -0,0 +1,39 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive, type WithoutChild } from 'bits-ui';
+	import Circle from '@lucide/svelte/icons/circle';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+	bind:ref
+	data-slot="dropdown-menu-radio-item"
+	class={cn(
+		'focus:bg-surface text-text relative flex cursor-pointer items-center gap-2 py-2 pr-2 pl-8 text-sm select-none',
+
+		// Disabled
+		'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+
+		// Images
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+			{#if checked}
+				<Circle class="size-2 fill-current" />
+			{:else}
+				<Circle class="size-2" />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
+</DropdownMenuPrimitive.RadioItem>
--- a/client/src/lib/ui/dropdown-menu/dropdown-menu-separator.svelte
+++ b/client/src/lib/ui/dropdown-menu/dropdown-menu-separator.svelte
@ -0,0 +1,17 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+	bind:ref
+	data-slot="dropdown-menu-separator"
+	class={cn('bg-surface-1 -mx-1 my-1 h-px', className)}
+	{...restProps}
+/>
--- a/client/src/lib/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/client/src/lib/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { type WithElementRef } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="dropdown-menu-shortcut"
+	class={cn('text-text ml-auto text-xs tracking-widest', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
--- a/client/src/lib/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/client/src/lib/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@ -0,0 +1,23 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SubContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubContent
+	bind:ref
+	data-slot="dropdown-menu-sub-content"
+	class={cn(
+		'bg-based text-text z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+
+		// Animations
+		'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',
+		className
+	)}
+	{...restProps}
+/>
--- a/client/src/lib/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/client/src/lib/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@ -0,0 +1,29 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: DropdownMenuPrimitive.SubTriggerProps & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+	bind:ref
+	data-slot="dropdown-menu-sub-trigger"
+	class={cn(
+		'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none',
+		inset && 'pl-8',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronRight class="ml-auto size-4" />
+</DropdownMenuPrimitive.SubTrigger>
--- a/client/src/lib/ui/dropdown-menu/dropdown-menu-trigger.svelte
+++ b/client/src/lib/ui/dropdown-menu/dropdown-menu-trigger.svelte
@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.TriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger
+	bind:ref
+	data-slot="dropdown-menu-trigger"
+	class={cn(
+		'flex cursor-pointer items-center gap-1 transition-all',
+
+		// Focus
+		'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2',
+		className
+	)}
+	{...restProps}
+/>
--- a/client/src/lib/ui/dropdown-menu/index.ts
+++ b/client/src/lib/ui/dropdown-menu/index.ts
@ -0,0 +1,50 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
+import Content from './dropdown-menu-content.svelte';
+import Group from './dropdown-menu-group.svelte';
+import Item from './dropdown-menu-item.svelte';
+import Link from './dropdown-menu-link.svelte';
+import Label from './dropdown-menu-label.svelte';
+import RadioGroup from './dropdown-menu-radio-group.svelte';
+import RadioItem from './dropdown-menu-radio-item.svelte';
+import Separator from './dropdown-menu-separator.svelte';
+import Shortcut from './dropdown-menu-shortcut.svelte';
+import Trigger from './dropdown-menu-trigger.svelte';
+import SubContent from './dropdown-menu-sub-content.svelte';
+import SubTrigger from './dropdown-menu-sub-trigger.svelte';
+
+const Sub = DropdownMenuPrimitive.Sub;
+const Root = DropdownMenuPrimitive.Root;
+
+export {
+	CheckboxItem,
+	Content,
+	Root as DropdownMenu,
+	CheckboxItem as DropdownMenuCheckboxItem,
+	Content as DropdownMenuContent,
+	Group as DropdownMenuGroup,
+	Item as DropdownMenuItem,
+	Link as DropdownMenuLink,
+	Label as DropdownMenuLabel,
+	RadioGroup as DropdownMenuRadioGroup,
+	RadioItem as DropdownMenuRadioItem,
+	Separator as DropdownMenuSeparator,
+	Shortcut as DropdownMenuShortcut,
+	Sub as DropdownMenuSub,
+	SubContent as DropdownMenuSubContent,
+	SubTrigger as DropdownMenuSubTrigger,
+	Trigger as DropdownMenuTrigger,
+	Group,
+	Item,
+	Link,
+	Label,
+	RadioGroup,
+	RadioItem,
+	Root,
+	Separator,
+	Shortcut,
+	Sub,
+	SubContent,
+	SubTrigger,
+	Trigger
+};
--- a/client/src/lib/ui/form/context.svelte.ts
+++ b/client/src/lib/ui/form/context.svelte.ts
@ -0,0 +1,31 @@
+import { getContext, hasContext, setContext } from 'svelte';
+
+type Item = {
+	id: string;
+	name: string;
+};
+
+const key = 'form';
+export function setFormContext(id: string, name: string) {
+	const item = getFormContext();
+	if (!item) {
+		const item: Item = $state({
+			id,
+			name
+		});
+		setContext(key, item);
+
+		return;
+	}
+
+	item.id = id;
+	item.name = name;
+}
+
+export function getFormContext() {
+	if (!hasContext(key)) {
+		return null;
+	}
+
+	return getContext(key) as Item;
+}
--- a/client/src/lib/ui/form/errors.svelte
+++ b/client/src/lib/ui/form/errors.svelte
@ -0,0 +1,30 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import { getFormContext } from './context.svelte';
+	import type { WithElementRef, WithoutChildren } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Violation } from '@bufbuild/protovalidate';
+	import type { ConnectError } from '@connectrpc/connect';
+
+	type Props = WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
+		errors?: Violation[] | ConnectError;
+	};
+	let {
+		ref = $bindable(null),
+		class: className,
+		errors = $bindable(),
+		...restProps
+	}: Props = $props();
+
+	const item = getFormContext();
+</script>
+
+<div bind:this={ref} class={cn('text-red text-sm', className)} {...restProps}>
+	{#if errors && Array.isArray(errors)}
+		{#each errors as error (error)}
+			<label for={item?.id}>{error.message}</label>
+		{/each}
+	{:else if errors}
+		<span>{errors.message}</span>
+	{/if}
+</div>
--- a/client/src/lib/ui/form/field.svelte
+++ b/client/src/lib/ui/form/field.svelte
@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import { setFormContext } from './context.svelte';
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		name?: string;
+	};
+	let { ref = $bindable(null), class: className, name, children, ...restProps }: Props = $props();
+
+	const uid = $props.id();
+
+	if (name) {
+		setFormContext(uid, name);
+	}
+</script>
+
+<div bind:this={ref} class={cn('flex flex-col gap-1', className)} {...restProps}>
+	{@render children?.()}
+</div>
--- a/client/src/lib/ui/form/index.ts
+++ b/client/src/lib/ui/form/index.ts
@ -0,0 +1,5 @@
+import Field from './field.svelte';
+import Errors from './errors.svelte';
+import Label from './label.svelte';
+
+export { Field, Errors, Label };
--- a/client/src/lib/ui/form/label.svelte
+++ b/client/src/lib/ui/form/label.svelte
@ -0,0 +1,29 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import { getFormContext } from './context.svelte';
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = WithElementRef<HTMLAttributes<HTMLLabelElement>>;
+	let { ref = $bindable(null), class: className, children, ...restProps }: Props = $props();
+
+	const item = getFormContext();
+
+	function formatName(name: string) {
+		// Replace _ with spaces
+		name = name.replace('_', ' ');
+
+		// Capitalize first letter
+		name = name.charAt(0).toUpperCase() + name.slice(1);
+
+		return name;
+	}
+</script>
+
+<label bind:this={ref} class={cn('text-sm', className)} for={item?.id} {...restProps}>
+	{#if children}
+		{@render children()}
+	{:else if item}
+		{formatName(item.name)}
+	{/if}
+</label>
--- a/client/src/lib/ui/input/index.ts
+++ b/client/src/lib/ui/input/index.ts
@ -0,0 +1,7 @@
+import Root from './input.svelte';
+
+export {
+	Root,
+	//
+	Root as Input
+};
--- a/client/src/lib/ui/input/input.svelte
+++ b/client/src/lib/ui/input/input.svelte
@ -0,0 +1,75 @@
+<script lang="ts">
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+	import type { WithElementRef } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+	import { getFormContext } from '../form/context.svelte';
+
+	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,
+		id,
+		name,
+		...restProps
+	}: Props = $props();
+
+	const item = getFormContext();
+	if (item && !id) {
+		id = item.id;
+	}
+	if (item && !name) {
+		name = item.name;
+	}
+</script>
+
+{#if type === 'file'}
+	<input
+		{id}
+		{name}
+		bind:this={ref}
+		class={cn(
+			'border-surface-1 file:bg-surface hover:border-overlay placeholder:text-subtext text-text flex h-9 w-full min-w-0 cursor-pointer rounded-md border text-sm font-medium shadow-xs transition-all file:mr-2 file:px-3 file:py-2 md:text-sm',
+
+			// Focus
+			'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2',
+
+			// Disabled
+			'disabled:cursor-not-allowed disabled:opacity-50',
+
+			className
+		)}
+		type="file"
+		bind:files
+		bind:value
+		{...restProps}
+	/>
+{:else}
+	<input
+		{id}
+		{name}
+		bind:this={ref}
+		class={cn(
+			'border-surface-1 hover:border-overlay placeholder:text-subtext text-text flex h-9 w-full min-w-0 rounded-md border px-3 py-1 shadow-xs transition-all md:text-sm',
+
+			// Focus
+			'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2',
+
+			// Disabled
+			'disabled:cursor-not-allowed disabled:opacity-50',
+
+			className
+		)}
+		{type}
+		bind:value
+		{...restProps}
+	/>
+{/if}
--- a/client/src/lib/ui/label/index.ts
+++ b/client/src/lib/ui/label/index.ts
@ -0,0 +1,7 @@
+import Root from './label.svelte';
+
+export {
+	Root,
+	//
+	Root as Label
+};
--- a/client/src/lib/ui/label/label.svelte
+++ b/client/src/lib/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(
+		'text-text flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+		className
+	)}
+	{...restProps}
+/>
--- a/client/src/lib/ui/pager/index.ts
+++ b/client/src/lib/ui/pager/index.ts
@ -0,0 +1,3 @@
+import Pager from './pager.svelte';
+
+export { Pager };
--- a/client/src/lib/ui/pager/pager.svelte
+++ b/client/src/lib/ui/pager/pager.svelte
@ -0,0 +1,49 @@
+<script lang="ts">
+	import * as Pagination from '$lib/ui/pagination';
+
+	type Props = {
+		count: number;
+		limit?: number;
+		offset?: number;
+		onsubmit?: (offset: number) => void;
+	};
+	let { count = $bindable(), limit = 10, offset = $bindable(0), onsubmit }: Props = $props();
+</script>
+
+<Pagination.Root
+	{count}
+	page={offset / limit + 1}
+	perPage={limit}
+	onPageChange={async (num) => {
+		offset = num * limit - limit;
+		scrollTo({
+			top: 0,
+			behavior: 'smooth'
+		});
+		onsubmit?.(offset);
+	}}
+>
+	{#snippet children({ pages, currentPage })}
+		<Pagination.Content>
+			<Pagination.Item>
+				<Pagination.PrevButton />
+			</Pagination.Item>
+			{#each pages as page (page.key)}
+				{#if page.type === 'ellipsis'}
+					<Pagination.Item class="hidden md:block">
+						<Pagination.Ellipsis />
+					</Pagination.Item>
+				{:else}
+					<Pagination.Item class="hidden md:block">
+						<Pagination.Link {page} isActive={currentPage === page.value}>
+							{page.value}
+						</Pagination.Link>
+					</Pagination.Item>
+				{/if}
+			{/each}
+			<Pagination.Item>
+				<Pagination.NextButton />
+			</Pagination.Item>
+		</Pagination.Content>
+	{/snippet}
+</Pagination.Root>
--- a/client/src/lib/ui/pagination/index.ts
+++ b/client/src/lib/ui/pagination/index.ts
@ -0,0 +1,25 @@
+import Root from './pagination.svelte';
+import Content from './pagination-content.svelte';
+import Item from './pagination-item.svelte';
+import Link from './pagination-link.svelte';
+import PrevButton from './pagination-prev-button.svelte';
+import NextButton from './pagination-next-button.svelte';
+import Ellipsis from './pagination-ellipsis.svelte';
+
+export {
+	Root,
+	Content,
+	Item,
+	Link,
+	PrevButton,
+	NextButton,
+	Ellipsis,
+	//
+	Root as Pagination,
+	Content as PaginationContent,
+	Item as PaginationItem,
+	Link as PaginationLink,
+	PrevButton as PaginationPrevButton,
+	NextButton as PaginationNextButton,
+	Ellipsis as PaginationEllipsis
+};
--- a/client/src/lib/ui/pagination/pagination-content.svelte
+++ b/client/src/lib/ui/pagination/pagination-content.svelte
@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { WithElementRef } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-slot="pagination-content"
+	class={cn('flex flex-row items-center gap-1', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</ul>
--- a/client/src/lib/ui/pagination/pagination-ellipsis.svelte
+++ b/client/src/lib/ui/pagination/pagination-ellipsis.svelte
@ -0,0 +1,23 @@
+<script lang="ts">
+	import Ellipsis from '@lucide/svelte/icons/ellipsis';
+	import type { WithElementRef, WithoutChildren } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	aria-hidden="true"
+	data-slot="pagination-ellipsis"
+	class={cn('text-text flex size-9 items-center justify-center', className)}
+	{...restProps}
+>
+	<Ellipsis class="size-4" />
+	<span class="sr-only">More pages</span>
+</span>
--- a/client/src/lib/ui/pagination/pagination-item.svelte
+++ b/client/src/lib/ui/pagination/pagination-item.svelte
@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from 'svelte/elements';
+	import type { WithElementRef } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li bind:this={ref} data-slot="pagination-item" {...restProps}>
+	{@render children?.()}
+</li>
--- a/client/src/lib/ui/pagination/pagination-link.svelte
+++ b/client/src/lib/ui/pagination/pagination-link.svelte
@ -0,0 +1,41 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+	import { type Props, buttonVariants } from '$lib/ui/button';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = 'icon',
+		isActive = false,
+		page,
+		children,
+		...restProps
+	}: PaginationPrimitive.PageProps &
+		Props & {
+			isActive: boolean;
+		} = $props();
+</script>
+
+{#snippet Fallback()}
+	{page.value}
+{/snippet}
+
+<PaginationPrimitive.Page
+	bind:ref
+	{page}
+	aria-current={isActive ? 'page' : undefined}
+	data-slot="pagination-link"
+	data-active={isActive}
+	class={cn(
+		buttonVariants({
+			variant: 'ghost',
+			size
+		}),
+		'text-text',
+		isActive && 'bg-surface-1',
+		className
+	)}
+	children={children || Fallback}
+	{...restProps}
+/>
--- a/client/src/lib/ui/pagination/pagination-next-button.svelte
+++ b/client/src/lib/ui/pagination/pagination-next-button.svelte
@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import { buttonVariants } from '$lib/ui/button/index.js';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: PaginationPrimitive.NextButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<span>Next</span>
+	<ChevronRight class="size-4" />
+{/snippet}
+
+<!-- TODO: Fix this error: Expression produces a union type that is too complex to represent. Note: Removing `Fallback` in children={children || Fallback} fixes, makes you wonder how/why `Fallback` is causing this. -->
+<PaginationPrimitive.NextButton
+	bind:ref
+	aria-label="Go to next page"
+	class={cn(
+		buttonVariants({
+			size: 'default',
+			variant: 'ghost',
+			class: 'gap-1 px-2.5 sm:pr-2.5'
+		}),
+		className
+	)}
+	children={children || Fallback}
+	{...restProps}
+/>
--- a/client/src/lib/ui/pagination/pagination-prev-button.svelte
+++ b/client/src/lib/ui/pagination/pagination-prev-button.svelte
@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
+	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+	import { buttonVariants } from '$lib/ui/button/index.js';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: PaginationPrimitive.PrevButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronLeft class="size-4" />
+	<span>Previous</span>
+{/snippet}
+
+<PaginationPrimitive.PrevButton
+	bind:ref
+	aria-label="Go to previous page"
+	class={cn(
+		buttonVariants({
+			size: 'default',
+			variant: 'ghost',
+			class: 'gap-1 px-2.5 sm:pl-2.5'
+		}),
+		className
+	)}
+	children={children || Fallback}
+	{...restProps}
+/>
--- a/client/src/lib/ui/pagination/pagination.svelte
+++ b/client/src/lib/ui/pagination/pagination.svelte
@ -0,0 +1,47 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from 'bits-ui';
+
+	import { cn } from '$lib/utils.js';
+	import { pushState } from '$app/navigation';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		count = 0,
+		perPage = 10,
+		page = $bindable(1),
+		siblingCount = 1,
+		onPageChange,
+		...restProps
+	}: PaginationPrimitive.RootProps = $props();
+</script>
+
+<svelte:window
+	onpopstate={(state) => {
+		const sks = state.state['sveltekit:states'] as object | string;
+		if (typeof sks === 'string' && sks.includes('#pagination-')) {
+			page = Number(sks.split('#pagination-')[1]);
+			onPageChange?.(page);
+		} else {
+			page = 1;
+			onPageChange?.(page);
+		}
+	}}
+/>
+
+<PaginationPrimitive.Root
+	bind:ref
+	bind:page
+	onPageChange={(p) => {
+		pushState('', `#pagination-${p}`);
+		onPageChange?.(p);
+	}}
+	role="navigation"
+	aria-label="pagination"
+	data-slot="pagination"
+	class={cn('mx-auto flex w-full justify-center', className)}
+	{count}
+	{perPage}
+	{siblingCount}
+	{...restProps}
+/>
--- a/client/src/lib/ui/popover/index.ts
+++ b/client/src/lib/ui/popover/index.ts
@ -0,0 +1,17 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';
+import Content from './popover-content.svelte';
+import Trigger from './popover-trigger.svelte';
+const Root = PopoverPrimitive.Root;
+const Close = PopoverPrimitive.Close;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Close,
+	//
+	Root as Popover,
+	Content as PopoverContent,
+	Trigger as PopoverTrigger,
+	Close as PopoverClose
+};
--- a/client/src/lib/ui/popover/popover-content.svelte
+++ b/client/src/lib/ui/popover/popover-content.svelte
@ -0,0 +1,32 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		align = 'center',
+		portalProps,
+		...restProps
+	}: PopoverPrimitive.ContentProps & {
+		portalProps?: PopoverPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<PopoverPrimitive.Portal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		data-slot="popover-content"
+		{sideOffset}
+		{align}
+		class={cn(
+			'bg-based text-text border-surface-1 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden',
+
+			// Animation
+			'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 origin-(--bits-popover-content-transform-origin)',
+			className
+		)}
+		{...restProps}
+	/>
+</PopoverPrimitive.Portal>
--- a/client/src/lib/ui/popover/popover-trigger.svelte
+++ b/client/src/lib/ui/popover/popover-trigger.svelte
@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PopoverPrimitive.TriggerProps = $props();
+</script>
+
+<PopoverPrimitive.Trigger
+	bind:ref
+	data-slot="popover-trigger"
+	class={cn('', className)}
+	{...restProps}
+/>
--- a/client/src/lib/ui/range-calendar/index.ts
+++ b/client/src/lib/ui/range-calendar/index.ts
@ -0,0 +1,32 @@
+import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+import Root from './range-calendar.svelte';
+import Cell from './range-calendar-cell.svelte';
+import Day from './range-calendar-day.svelte';
+import Grid from './range-calendar-grid.svelte';
+import Header from './range-calendar-header.svelte';
+import Months from './range-calendar-months.svelte';
+import GridRow from './range-calendar-grid-row.svelte';
+import Heading from './range-calendar-heading.svelte';
+import HeadCell from './range-calendar-head-cell.svelte';
+import NextButton from './range-calendar-next-button.svelte';
+import PrevButton from './range-calendar-prev-button.svelte';
+
+const GridHead = RangeCalendarPrimitive.GridHead;
+const GridBody = RangeCalendarPrimitive.GridBody;
+
+export {
+	Day,
+	Cell,
+	Grid,
+	Header,
+	Months,
+	GridRow,
+	Heading,
+	GridBody,
+	GridHead,
+	HeadCell,
+	NextButton,
+	PrevButton,
+	//
+	Root as RangeCalendar
+};
--- a/client/src/lib/ui/range-calendar/range-calendar-cell.svelte
+++ b/client/src/lib/ui/range-calendar/range-calendar-cell.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.CellProps = $props();
+</script>
+
+<RangeCalendarPrimitive.Cell
+	bind:ref
+	class={cn(
+		'[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md',
+		className
+	)}
+	{...restProps}
+/>
--- a/client/src/lib/ui/range-calendar/range-calendar-day.svelte
+++ b/client/src/lib/ui/range-calendar/range-calendar-day.svelte
@ -0,0 +1,36 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import { buttonVariants } from '$lib/ui/button/index.js';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.DayProps = $props();
+
+	export { className as class };
+</script>
+
+<RangeCalendarPrimitive.Day
+	bind:ref
+	class={cn(
+		buttonVariants({ variant: 'ghost' }),
+		'size-9 p-0 font-normal',
+		'[&[data-today]:not([data-selected])]:bg-blue [&[data-today]:not([data-selected])]:text-crust [&[data-today]:not([data-selected])]:rounded-md',
+		// Selected
+		'data-[selected]:bg-surface data-[selected]:hover:bg-surface-1 data-[selected]:rounded-none data-[selected]:opacity-100',
+		// Selection Start
+		'data-[selection-start]:bg-surface-1 data-[selection-start]:text-text data-[selection-start]:hover:bg-surface-2 data-[selection-start]:rounded-l-md',
+		// Selection End
+		'data-[selection-end]:bg-surface-1 data-[selection-end]:text-text data-[selection-end]:hover:bg-surface-2 data-[selection-end]:rounded-r-md',
+		// Outside months
+		'data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30',
+		// Disabled
+		'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+		// Unavailable
+		'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+		className
+	)}
+	{...restProps}
+/>
--- a/client/src/lib/ui/range-calendar/range-calendar-grid-row.svelte
+++ b/client/src/lib/ui/range-calendar/range-calendar-grid-row.svelte
@ -0,0 +1,12 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.GridRowProps = $props();
+</script>
+
+<RangeCalendarPrimitive.GridRow bind:ref class={cn('flex', className)} {...restProps} />
--- a/client/src/lib/ui/range-calendar/range-calendar-grid.svelte
+++ b/client/src/lib/ui/range-calendar/range-calendar-grid.svelte
@ -0,0 +1,16 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.GridProps = $props();
+</script>
+
+<RangeCalendarPrimitive.Grid
+	bind:ref
+	class={cn('w-full border-collapse space-y-1', className)}
+	{...restProps}
+/>
--- a/client/src/lib/ui/range-calendar/range-calendar-head-cell.svelte
+++ b/client/src/lib/ui/range-calendar/range-calendar-head-cell.svelte
@ -0,0 +1,16 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.HeadCellProps = $props();
+</script>
+
+<RangeCalendarPrimitive.HeadCell
+	bind:ref
+	class={cn('text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal', className)}
+	{...restProps}
+/>
--- a/client/src/lib/ui/range-calendar/range-calendar-header.svelte
+++ b/client/src/lib/ui/range-calendar/range-calendar-header.svelte
@ -0,0 +1,16 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.HeaderProps = $props();
+</script>
+
+<RangeCalendarPrimitive.Header
+	bind:ref
+	class={cn('relative flex w-full items-center justify-between pt-1', className)}
+	{...restProps}
+/>
--- a/client/src/lib/ui/range-calendar/range-calendar-heading.svelte
+++ b/client/src/lib/ui/range-calendar/range-calendar-heading.svelte
@ -0,0 +1,16 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.HeadingProps = $props();
+</script>
+
+<RangeCalendarPrimitive.Heading
+	bind:ref
+	class={cn('text-sm font-medium', className)}
+	{...restProps}
+/>
--- a/client/src/lib/ui/range-calendar/range-calendar-months.svelte
+++ b/client/src/lib/ui/range-calendar/range-calendar-months.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn('mt-4 flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/client/src/lib/ui/range-calendar/range-calendar-next-button.svelte
+++ b/client/src/lib/ui/range-calendar/range-calendar-next-button.svelte
@ -0,0 +1,28 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import { buttonVariants } from '$lib/ui/button/index.js';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: RangeCalendarPrimitive.NextButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronRight class="size-4" />
+{/snippet}
+
+<RangeCalendarPrimitive.NextButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant: 'outline' }),
+		'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+		className
+	)}
+	children={children || Fallback}
+	{...restProps}
+/>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
trev	20726c55d5	bump: v0.0.21 -> v0.0.22	2025-05-12 12:24:09 -04:00
trev	95ce559ff3	fix: remove checking buf until I can figure out how to not use buf.lock	2025-05-12 12:19:03 -04:00
trev	bfc1580218	fix: add flake.lock on update	2025-05-12 11:39:06 -04:00
trev	296d2713ad	bump: v0.0.20 -> v0.0.21	2025-05-12 11:36:17 -04:00
trev	1e2d9a7894	build(nix): updated nix hashes	2025-05-12 11:33:24 -04:00
trev	2fde1a8eba	build(client): updated npm dependencies	2025-05-12 11:31:54 -04:00
trev	07cec78aa5	feat: next	2025-05-12 11:30:33 -04:00
trev	cdeaa13d92	feat: better components	2025-05-12 11:27:33 -04:00
trev	398ddde169	bump: v0.0.19 -> v0.0.20	2025-04-17 22:23:25 -04:00
trev	74b9bb86a1	fix: don't check all	2025-04-17 22:20:52 -04:00
trev	701f80540b	fix: yaml formatting	2025-04-17 22:18:56 -04:00
trev	3926fa09ff	bump: v0.0.18 -> v0.0.19	2025-04-17 22:14:31 -04:00
Trevor Allen	e3d9b437c5	Merge pull request #2 from spotdemo4/create-pull-request/patch Bump deps	2025-04-17 22:10:25 -04:00
github-actions[bot]	deaaec2c57	build(nix): updated nix hashes	2025-04-18 02:09:57 +00:00
github-actions[bot]	bf5f07222c	build(client): updated npm dependencies	2025-04-18 02:08:28 +00:00
trev	75f89c0edf	fix: wrap writeShellApplication	2025-04-17 22:02:50 -04:00
trev	ad9ac18c18	refactor: scripts to apps	2025-04-17 22:00:23 -04:00
trev	24d3067e52	refactor: nix flake	2025-04-17 20:49:51 -04:00
trev	1c7cf7966f	feat: improved building	2025-04-17 20:30:21 -04:00
trev	7a799868fb	feat: nix checks	2025-04-17 07:33:41 -04:00
trev	0093a0879e	feat: update nix flake	2025-04-17 05:30:22 -04:00
Trevor Allen	071b719309	Merge pull request #1 from spotdemo4/create-pull-request/patch Bump deps	2025-04-17 05:23:25 -04:00
github-actions[bot]	f6c5acee8f	build(nix): updated nix hashes	2025-04-17 09:21:51 +00:00
github-actions[bot]	8fe2b57c1e	build(go): updated go dependencies	2025-04-17 09:21:10 +00:00
github-actions[bot]	d4ae79a1cd	build(client): updated npm dependencies	2025-04-17 09:21:04 +00:00
trev	d49b699e83	fix: run lint on pull requests	2025-04-17 05:15:06 -04:00
trev	2eaa9b300c	fix: set git config	2025-04-17 05:00:12 -04:00
trev	d0cf852b95	bump: v0.0.17 -> v0.0.18	2025-04-16 05:44:08 -04:00
trev	ddce48625e	feat: docker binary cache	2025-04-16 05:42:28 -04:00
trev	fbe5efdf0f	bump: v0.0.16 -> v0.0.17	2025-04-16 05:33:20 -04:00
trev	77f8362f88	fix: add package write perms	2025-04-16 05:31:33 -04:00
trev	f18107f9c4	bump: v0.0.15 -> v0.0.16	2025-04-16 05:21:56 -04:00
trev	dbcb719166	bump: v0.0.14 -> v0.0.15	2025-04-16 04:44:40 -04:00
trev	cdbb7e2c4d	fix: publish to ghcr too	2025-04-16 04:42:48 -04:00
trev	3629be7e0e	bump: v0.0.13 -> v0.0.14	2025-04-16 04:26:29 -04:00
trev	32e767757b	build(nix): updated nix hashes	2025-04-16 04:23:25 -04:00
trev	c1b14e03ac	build(client): updated npm dependencies	2025-04-16 04:22:07 -04:00