chore: upgrade to SvelteKit 3

2026-10-03 16:29:03 +02:00 · 2026-10-02 20:02:29 +02:00
parent 556006074c
commit 10efd1647c
348 changed files with 1705 additions and 2474 deletions
@@ -8,7 +8,7 @@ on:
      - ".github/svelte-check-matcher.json"
      - "frontend/package.json"
      - "frontend/tsconfig.json"
-      - "frontend/svelte.config.js"
+      - "frontend/vite.config.ts"
  pull_request:
    branches: [main, breaking/**]
    paths:
@@ -16,7 +16,7 @@ on:
      - ".github/svelte-check-matcher.json"
      - "frontend/package.json"
      - "frontend/tsconfig.json"
-      - "frontend/svelte.config.js"
+      - "frontend/vite.config.ts"
  workflow_dispatch:

 permissions:
@@ -54,10 +54,9 @@ cd ../.. && pnpm test                            # = playwright test in tests/
 ## Frontend (SvelteKit)

 - **Svelte 5 runes only:** `$state`, `$derived`, `$props`, `$bindable`. No `export let`. Event
-  modifiers are gone — use `preventDefault` from `$lib/utils/event-util` (`onsubmit={preventDefault(fn)}`).
- **Forms:** use the custom `createForm(schema, initial)` from `$lib/utils/form-util.ts` with
-  `form-input.svelte`. The vendored shadcn formsnap/superforms wrappers exist but app forms don't
-  use them — match the surrounding file. Import zod as `import { z } from 'zod/v4'`.
+  modifiers are gone — use `preventDefault` from `#lib/utils/event-util.ts` (`onsubmit={preventDefault(fn)}`).
+- **Forms:** use the custom `createForm(schema, initial)` from `#lib/utils/form-util.ts` with
+  `form-input.svelte` — match the surrounding file. Import zod as `import { z } from 'zod/v4'`.

 ## Coding Style Guidelines

@@ -5,11 +5,11 @@
 		"baseColor": "neutral"
 	},
 	"aliases": {
-		"components": "$lib/components",
-		"utils": "$lib/utils/style",
-		"ui": "$lib/components/ui",
-		"hooks": "$lib/hooks",
-		"lib": "$lib"
+		"components": "#lib/components",
+		"utils": "#lib/utils/style.ts",
+		"ui": "#lib/components/ui",
+		"hooks": "#lib/hooks",
+		"lib": "#lib"
 	},
 	"typescript": true,
 	"registry": "https://shadcn-svelte.com/registry",
@@ -27,7 +27,6 @@
 		"date-fns": "^4.2.1",
 		"qrcode": "^1.5.4",
 		"runed": "^0.37.1",
-		"sveltekit-superforms": "^2.30.1",
 		"tailwind-merge": "^3.6.0",
 		"zod": "^4.4.3"
 	},
@@ -38,8 +37,8 @@
 		"@inlang/plugin-message-format": "^4.4.0",
 		"@internationalized/date": "^3.12.1",
 		"@lucide/svelte": "^1.16.0",
-		"@sveltejs/adapter-static": "^3.0.10",
-		"@sveltejs/kit": "^2.60.1",
+		"@sveltejs/adapter-static": "^4.0.0",
+		"@sveltejs/kit": "^3.0.0",
 		"@sveltejs/vite-plugin-svelte": "^7.1.2",
 		"@types/node": "^25.9.0",
 		"@types/qrcode": "^1.5.6",
@@ -47,7 +46,6 @@
 		"eslint": "^10.4.0",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.17.1",
-		"formsnap": "^2.0.1",
 		"globals": "^17.6.0",
 		"mode-watcher": "^1.1.0",
 		"prettier": "^3.8.3",
@@ -56,8 +54,8 @@
 		"rollup": "^4.63.3",
 		"rollup-plugin-sbom": "4.0.0",
 		"shadcn-svelte": "^1.3.0",
-		"svelte": "^5.55.8",
-		"svelte-check": "^4.4.8",
+		"svelte": "^5.57.1",
+		"svelte-check": "^4.7.6",
 		"svelte-sonner": "^1.1.1",
 		"tailwind-variants": "^3.2.2",
 		"tailwindcss": "^4.3.0",
@@ -65,5 +63,8 @@
 		"typescript": "^6.0.3",
 		"typescript-eslint": "^8.59.4",
 		"vite": "^8.0.16"
+	},
+	"imports": {
+		"#lib/*": "./src/lib/*"
 	}
 }
@@ -4,7 +4,6 @@ declare global {
 	namespace App {
 		interface Error {
 			message: string;
-			status?: number;
 		}
 		// interface Locals {}
 		// interface PageData {}
@@ -1,21 +1,22 @@
-import type { HandleClientError } from '@sveltejs/kit';
+import type { HandleClientError } from '@sveltejs/kit/hooks';
 import { isAxiosError } from 'axios';
-import { getAxiosErrorMessage, getAxiosErrorRequestId } from '$lib/utils/error-util';
+import { getAxiosErrorMessage, getAxiosErrorRequestId } from '#lib/utils/error-util.ts';

-export const handleError: HandleClientError = async ({ error, message, status }) => {
+export const handleError: HandleClientError = ({ kind, error }) => {
+	// Preserve safe application and framework errors, including their status codes
+	if (kind !== 'unknown') return error;
+
+	// Retain API error messages and request IDs for failed backend requests
 	if (isAxiosError(error)) {
-		message = getAxiosErrorMessage(error, message);
-		status = error.response?.status || status;
+		const message = getAxiosErrorMessage(error);
+		const status = error.response?.status || 500;
 		console.error(
 			`Axios error: ${error.request?.path ?? 'unknown path'} - ${getAxiosErrorMessage(error, error.message)}`,
 			{ requestId: getAxiosErrorRequestId(error) }
 		);
-	} else {
-		console.error(error);
+		return { message, status };
 	}

-	return {
-		message,
-		status
-	};
+	// Keep SvelteKit's generic response for unexpected errors while logging the cause
+	console.error(error);
 };
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { m } from '$lib/paraglide/messages';
+	import { m } from '#lib/paraglide/messages.js';

 	let {
 		hasAccess,
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import SwitchWithLabel from '$lib/components/form/switch-with-label.svelte';
-	import AdvancedTable from '$lib/components/table/advanced-table.svelte';
-	import { Button } from '$lib/components/ui/button';
-	import Checkbox from '$lib/components/ui/checkbox/checkbox.svelte';
-	import * as Dialog from '$lib/components/ui/dialog';
-	import { m } from '$lib/paraglide/messages';
-	import type { AdvancedTableColumn } from '$lib/types/advanced-table.type';
-	import type { Api, ApiClientGrant, ApiPermission } from '$lib/types/api.type';
-	import type { ListRequestOptions, Paginated } from '$lib/types/list-request.type';
-	import { axiosErrorToast } from '$lib/utils/error-util';
+	import SwitchWithLabel from '#lib/components/form/switch-with-label.svelte';
+	import AdvancedTable from '#lib/components/table/advanced-table.svelte';
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import Checkbox from '#lib/components/ui/checkbox/checkbox.svelte';
+	import * as Dialog from '#lib/components/ui/dialog/index.ts';
+	import { m } from '#lib/paraglide/messages.js';
+	import type { AdvancedTableColumn } from '#lib/types/advanced-table.type.ts';
+	import type { Api, ApiClientGrant, ApiPermission } from '#lib/types/api.type.ts';
+	import type { ListRequestOptions, Paginated } from '#lib/types/list-request.type.ts';
+	import { axiosErrorToast } from '#lib/utils/error-util.ts';

 	let {
 		open = $bindable(),
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import AdvancedTable from '$lib/components/table/advanced-table.svelte';
-	import { Badge } from '$lib/components/ui/badge';
-	import { m } from '$lib/paraglide/messages';
-	import AuditLogService from '$lib/services/audit-log-service';
-	import type { AdvancedTableColumn } from '$lib/types/advanced-table.type';
-	import type { AuditLog, AuditLogFilter } from '$lib/types/audit-log.type';
-	import { translateAuditLogEvent } from '$lib/utils/audit-log-translator';
+	import AdvancedTable from '#lib/components/table/advanced-table.svelte';
+	import { Badge } from '#lib/components/ui/badge/index.ts';
+	import { m } from '#lib/paraglide/messages.js';
+	import AuditLogService from '#lib/services/audit-log-service.ts';
+	import type { AdvancedTableColumn } from '#lib/types/advanced-table.type.ts';
+	import type { AuditLog, AuditLogFilter } from '#lib/types/audit-log.type.ts';
+	import { translateAuditLogEvent } from '#lib/utils/audit-log-translator.ts';
 	import { untrack } from 'svelte';

 	let {
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { m } from '$lib/paraglide/messages';
-	import { cn } from '$lib/utils/style';
+	import { m } from '#lib/paraglide/messages.js';
+	import { cn } from '#lib/utils/style.ts';
 	import { LucideChevronDown, type LucideIcon } from '@lucide/svelte';
 	import { onMount, type Snippet } from 'svelte';
 	import { slide } from 'svelte/transition';
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import * as AlertDialog from '#lib/components/ui/alert-dialog/index.ts';
 	import { confirmDialogStore } from '.';
 	import FormattedMessage from '../formatted-message.svelte';
 	import Button from '../ui/button/button.svelte';
@@ -1,4 +1,4 @@
-import { m } from '$lib/paraglide/messages';
+import { m } from '#lib/paraglide/messages.js';
 import { writable } from 'svelte/store';
 import type { AnyFormattedMessage, AnyMessage, FormattedMessageProps } from '../formatted-message';
 import ConfirmDialog from './confirm-dialog.svelte';
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import * as Tooltip from '$lib/components/ui/tooltip';
-	import { m } from '$lib/paraglide/messages';
+	import * as Tooltip from '#lib/components/ui/tooltip/index.ts';
+	import { m } from '#lib/paraglide/messages.js';
 	import { LucideCheck } from '@lucide/svelte';
 	import type { Snippet } from 'svelte';

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { replaceState } from '$app/navigation';
+	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
-	import * as Alert from '$lib/components/ui/alert';
-	import { Button } from '$lib/components/ui/button';
-	import { m } from '$lib/paraglide/messages';
-	import UserService from '$lib/services/user-service';
-	import appConfigStore from '$lib/stores/application-configuration-store';
-	import userStore from '$lib/stores/user-store';
-	import { axiosErrorToast } from '$lib/utils/error-util';
+	import * as Alert from '#lib/components/ui/alert/index.ts';
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import { m } from '#lib/paraglide/messages.js';
+	import UserService from '#lib/services/user-service.ts';
+	import appConfigStore from '#lib/stores/application-configuration-store.ts';
+	import userStore from '#lib/stores/user-store.ts';
+	import { axiosErrorToast } from '#lib/utils/error-util.ts';
 	import { LucideAlertTriangle, LucideCheckCircle2, LucideCircleX } from '@lucide/svelte';
 	import { onMount } from 'svelte';
 	import { toast } from 'svelte-sonner';
@@ -26,10 +26,10 @@
 			.catch(axiosErrorToast);
 	}

-	function onDismiss() {
-		const url = new URL(page.url);
+	async function onDismiss() {
+		const url = new URL(page.url.href);
 		url.searchParams.delete('emailVerificationState');
-		replaceState(url, page.state);
+		await goto(url, { shallow: true, replace: true, state: page.state });
 		emailVerificationState = null;
 	}

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
-	import { m } from '$lib/paraglide/messages';
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import { m } from '#lib/paraglide/messages.js';
 	import { LucideXCircle } from '@lucide/svelte';

 	let { message, showButton = true }: { message: string; showButton?: boolean } = $props();
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Input from '$lib/components/ui/input/input.svelte';
-	import * as Popover from '$lib/components/ui/popover/index.js';
+	import Input from '#lib/components/ui/input/input.svelte';
+	import * as Popover from '#lib/components/ui/popover/index.js';

 	let {
 		value = $bindable(''),
@@ -1,14 +1,14 @@
 <script lang="ts">
-	import FormInput from '$lib/components/form/form-input.svelte';
-	import { Button } from '$lib/components/ui/button';
-	import { Input } from '$lib/components/ui/input';
-	import CustomClaimService from '$lib/services/custom-claim-service';
-	import type { CustomClaim } from '$lib/types/custom-claim.type';
+	import FormInput from '#lib/components/form/form-input.svelte';
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import { Input } from '#lib/components/ui/input/index.ts';
+	import CustomClaimService from '#lib/services/custom-claim-service.ts';
+	import type { CustomClaim } from '#lib/types/custom-claim.type.ts';
 	import { LucideMinus, LucidePlus } from '@lucide/svelte';
 	import { onMount, type Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import AutoCompleteInput from './auto-complete-input.svelte';
-	import { m } from '$lib/paraglide/messages';
+	import { m } from '#lib/paraglide/messages.js';

 	let {
 		customClaims = $bindable(),
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Calendar } from '$lib/components/ui/calendar';
-	import * as Popover from '$lib/components/ui/popover';
-	import { m } from '$lib/paraglide/messages';
-	import { getLocale } from '$lib/paraglide/runtime';
-	import { cn } from '$lib/utils/style';
+	import { Calendar } from '#lib/components/ui/calendar/index.ts';
+	import * as Popover from '#lib/components/ui/popover/index.ts';
+	import { m } from '#lib/paraglide/messages.js';
+	import { getLocale } from '#lib/paraglide/runtime.js';
+	import { cn } from '#lib/utils/style.ts';
 	import {
 		CalendarDate,
 		DateFormatter,
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import * as ButtonGroup from '$lib/components/ui/button-group';
-	import * as Field from '$lib/components/ui/field';
-	import { Input } from '$lib/components/ui/input';
-	import * as Select from '$lib/components/ui/select';
-	import { m } from '$lib/paraglide/messages';
-	import type { FormInput } from '$lib/utils/form-util';
+	import * as ButtonGroup from '#lib/components/ui/button-group/index.ts';
+	import * as Field from '#lib/components/ui/field/index.ts';
+	import { Input } from '#lib/components/ui/input/index.ts';
+	import * as Select from '#lib/components/ui/select/index.ts';
+	import { m } from '#lib/paraglide/messages.js';
+	import type { FormInput } from '#lib/utils/form-util.ts';

 	type DurationUnit = 'minutes' | 'hours' | 'days';

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { cn } from '$lib/utils/style';
+	import { cn } from '#lib/utils/style.ts';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import type { VariantProps } from 'tailwind-variants';
-	import type { buttonVariants } from '$lib/components/ui/button';
-	import { m } from '$lib/paraglide/messages';
+	import type { buttonVariants } from '#lib/components/ui/button/index.ts';
+	import { m } from '#lib/paraglide/messages.js';

 	let {
 		id,
@@ -1,13 +1,13 @@
 <script lang="ts">
-	import DatePicker from '$lib/components/form/date-picker.svelte';
-	import * as Field from '$lib/components/ui/field';
-	import { Input, type FormInputEvent } from '$lib/components/ui/input';
-	import { m } from '$lib/paraglide/messages';
-	import type { FormInput } from '$lib/utils/form-util';
+	import DatePicker from '#lib/components/form/date-picker.svelte';
+	import * as Field from '#lib/components/ui/field/index.ts';
+	import { Input, type FormInputEvent } from '#lib/components/ui/input/index.ts';
+	import { m } from '#lib/paraglide/messages.js';
+	import type { FormInput } from '#lib/utils/form-util.ts';
 	import { LucideExternalLink } from '@lucide/svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from '$lib/utils/style';
+	import { cn } from '#lib/utils/style.ts';

 	type WithoutChildren = {
 		children?: undefined;
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
-	import { m } from '$lib/paraglide/messages';
-	import { cn } from '$lib/utils/style';
+	import * as DropdownMenu from '#lib/components/ui/dropdown-menu/index.ts';
+	import { m } from '#lib/paraglide/messages.js';
+	import { cn } from '#lib/utils/style.ts';
 	import { LucideChevronDown } from '@lucide/svelte';
 	import { Badge } from '../ui/badge';
 	import { Button } from '../ui/button';
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import FileInput from '$lib/components/form/file-input.svelte';
-	import * as Avatar from '$lib/components/ui/avatar';
-	import Button from '$lib/components/ui/button/button.svelte';
-	import { m } from '$lib/paraglide/messages';
-	import appConfigStore from '$lib/stores/application-configuration-store';
-	import { cachedProfilePicture } from '$lib/utils/cached-image-util';
+	import FileInput from '#lib/components/form/file-input.svelte';
+	import * as Avatar from '#lib/components/ui/avatar/index.ts';
+	import Button from '#lib/components/ui/button/button.svelte';
+	import { m } from '#lib/paraglide/messages.js';
+	import appConfigStore from '#lib/stores/application-configuration-store.ts';
+	import { cachedProfilePicture } from '#lib/utils/cached-image-util.ts';
 	import { LucideRefreshCw, LucideUpload } from '@lucide/svelte';
-	import { Spinner } from '$lib/components/ui/spinner';
+	import { Spinner } from '#lib/components/ui/spinner/index.ts';
 	import { onMount } from 'svelte';
 	import { openConfirmDialog } from '../confirm-dialog';

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Badge } from '$lib/components/ui/badge';
-	import { Button } from '$lib/components/ui/button';
-	import * as Command from '$lib/components/ui/command';
-	import * as Popover from '$lib/components/ui/popover';
-	import { Spinner } from '$lib/components/ui/spinner';
-	import { m } from '$lib/paraglide/messages';
-	import { cn } from '$lib/utils/style';
+	import { Badge } from '#lib/components/ui/badge/index.ts';
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import * as Command from '#lib/components/ui/command/index.ts';
+	import * as Popover from '#lib/components/ui/popover/index.ts';
+	import { Spinner } from '#lib/components/ui/spinner/index.ts';
+	import { m } from '#lib/paraglide/messages.js';
+	import { cn } from '#lib/utils/style.ts';
 	import { LucideCheck, LucideChevronDown } from '@lucide/svelte';
 	import type { FormEventHandler } from 'svelte/elements';

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
-	import * as Command from '$lib/components/ui/command';
-	import * as Popover from '$lib/components/ui/popover';
-	import { Spinner } from '$lib/components/ui/spinner';
-	import { m } from '$lib/paraglide/messages';
-	import { cn } from '$lib/utils/style';
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import * as Command from '#lib/components/ui/command/index.ts';
+	import * as Popover from '#lib/components/ui/popover/index.ts';
+	import { Spinner } from '#lib/components/ui/spinner/index.ts';
+	import { m } from '#lib/paraglide/messages.js';
+	import { cn } from '#lib/utils/style.ts';
 	import { LucideCheck, LucideChevronDown } from '@lucide/svelte';
 	import { tick } from 'svelte';
 	import type { FormEventHandler, HTMLAttributes } from 'svelte/elements';
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Label } from '$lib/components/ui/label';
-	import { Switch } from '$lib/components/ui/switch/index.js';
-	import { cn } from '$lib/utils/style';
+	import { Label } from '#lib/components/ui/label/index.ts';
+	import { Switch } from '#lib/components/ui/switch/index.js';
+	import { cn } from '#lib/utils/style.ts';

 	let {
 		id,
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
-	import { Input } from '$lib/components/ui/input';
-	import { m } from '$lib/paraglide/messages';
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import { Input } from '#lib/components/ui/input/index.ts';
+	import { m } from '#lib/paraglide/messages.js';
 	import { LucidePlus, LucideX } from '@lucide/svelte';

 	let {
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import SearchableMultiSelect from '$lib/components/form/searchable-multi-select.svelte';
-	import UserGroupService from '$lib/services/user-group-service';
-	import { debounced } from '$lib/utils/debounce-util';
+	import SearchableMultiSelect from '#lib/components/form/searchable-multi-select.svelte';
+	import UserGroupService from '#lib/services/user-group-service.ts';
+	import { debounced } from '#lib/utils/debounce-util.ts';
 	import { onMount } from 'svelte';

 	let {
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import * as Avatar from '$lib/components/ui/avatar';
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
-	import { m } from '$lib/paraglide/messages';
-	import WebAuthnService from '$lib/services/webauthn-service';
-	import unsavedChangesStoreSvelte from '$lib/stores/unsaved-changes-store.svelte';
-	import userStore from '$lib/stores/user-store';
-	import { cachedProfilePicture } from '$lib/utils/cached-image-util';
+	import * as Avatar from '#lib/components/ui/avatar/index.ts';
+	import * as DropdownMenu from '#lib/components/ui/dropdown-menu/index.ts';
+	import { m } from '#lib/paraglide/messages.js';
+	import WebAuthnService from '#lib/services/webauthn-service.ts';
+	import unsavedChangesStoreSvelte from '#lib/stores/unsaved-changes-store.svelte.ts';
+	import userStore from '#lib/stores/user-store.ts';
+	import { cachedProfilePicture } from '#lib/utils/cached-image-util.ts';
 	import { LucideLogOut, LucideUser } from '@lucide/svelte';

 	const webauthnService = new WebAuthnService();
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import { m } from '$lib/paraglide/messages';
-	import userStore from '$lib/stores/user-store';
+	import { m } from '#lib/paraglide/messages.js';
+	import userStore from '#lib/stores/user-store.ts';
 	import Logo from '../logo.svelte';
 	import Separator from '../ui/separator/separator.svelte';
 	import HeaderAvatar from './header-avatar.svelte';
@@ -2,9 +2,9 @@
 	import MoonIcon from '@lucide/svelte/icons/moon';
 	import SunIcon from '@lucide/svelte/icons/sun';

-	import { buttonVariants } from '$lib/components/ui/button/index.js';
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
-	import { m } from '$lib/paraglide/messages';
+	import { buttonVariants } from '#lib/components/ui/button/index.js';
+	import * as DropdownMenu from '#lib/components/ui/dropdown-menu/index.js';
+	import { m } from '#lib/paraglide/messages.js';
 	import { mode, resetMode, setMode } from 'mode-watcher';

 	const isDark = $derived(mode.current === 'dark');
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from '$lib/utils/style';
+	import { cn } from '#lib/utils/style.ts';
 	import { LucideImageOff } from '@lucide/svelte';
 	import type { HTMLImgAttributes } from 'svelte/elements';

@@ -5,10 +5,10 @@
 <script lang="ts">
 	import { afterNavigate } from '$app/navigation';
 	import { page } from '$app/state';
-	import { m } from '$lib/paraglide/messages';
-	import appConfigStore from '$lib/stores/application-configuration-store';
-	import { cachedBackgroundImage } from '$lib/utils/cached-image-util';
-	import { cn } from '$lib/utils/style';
+	import { m } from '#lib/paraglide/messages.js';
+	import appConfigStore from '#lib/stores/application-configuration-store.ts';
+	import { cachedBackgroundImage } from '#lib/utils/cached-image-util.ts';
+	import { cn } from '#lib/utils/style.ts';
 	import { onMount, type Snippet } from 'svelte';
 	import { MediaQuery } from 'svelte/reactivity';
 	import { fade } from 'svelte/transition';
@@ -34,6 +34,7 @@
 	});

 	afterNavigate((e) => {
+		if (e.shallow) return;
 		isInitialLoad = !e?.from?.url;
 	});

@@ -32,10 +32,10 @@
 </script>

 <script lang="ts">
-	import { m } from '$lib/paraglide/messages';
-	import appConfigStore from '$lib/stores/application-configuration-store';
-	import { cachedApplicationLogo } from '$lib/utils/cached-image-util';
-	import { cn } from '$lib/utils/style';
+	import { m } from '#lib/paraglide/messages.js';
+	import appConfigStore from '#lib/stores/application-configuration-store.ts';
+	import { cachedApplicationLogo } from '#lib/utils/cached-image-util.ts';
+	import { cn } from '#lib/utils/style.ts';
 	import { mode } from 'mode-watcher';

 	let {
@@ -9,7 +9,7 @@
 	}
 </script>

-{#if navigating.to}
+{#if navigating.to && !navigating.shallow}
 	<div class="nav-progress" aria-hidden="true" out:fadeIfVisible></div>
 {/if}

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import ImageBox from '$lib/components/image-box.svelte';
-	import { m } from '$lib/paraglide/messages';
-	import { cachedOidcClientLogo } from '$lib/utils/cached-image-util';
-	import { cn } from '$lib/utils/style';
+	import ImageBox from '#lib/components/image-box.svelte';
+	import { m } from '#lib/paraglide/messages.js';
+	import { cachedOidcClientLogo } from '#lib/utils/cached-image-util.ts';
+	import { cn } from '#lib/utils/style.ts';
 	import { mode } from 'mode-watcher';

 	let {
@@ -1,16 +1,16 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import CopyToClipboard from '$lib/components/copy-to-clipboard.svelte';
-	import Qrcode from '$lib/components/qrcode/qrcode.svelte';
-	import { Button } from '$lib/components/ui/button';
-	import * as Dialog from '$lib/components/ui/dialog';
-	import * as Field from '$lib/components/ui/field';
-	import * as Select from '$lib/components/ui/select/index.js';
-	import { Separator } from '$lib/components/ui/separator';
-	import { m } from '$lib/paraglide/messages';
-	import UserService from '$lib/services/user-service';
-	import appConfigStore from '$lib/stores/application-configuration-store';
-	import { axiosErrorToast } from '$lib/utils/error-util';
+	import CopyToClipboard from '#lib/components/copy-to-clipboard.svelte';
+	import Qrcode from '#lib/components/qrcode/qrcode.svelte';
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import * as Dialog from '#lib/components/ui/dialog/index.ts';
+	import * as Field from '#lib/components/ui/field/index.ts';
+	import * as Select from '#lib/components/ui/select/index.js';
+	import { Separator } from '#lib/components/ui/separator/index.ts';
+	import { m } from '#lib/paraglide/messages.js';
+	import UserService from '#lib/services/user-service.ts';
+	import appConfigStore from '#lib/stores/application-configuration-store.ts';
+	import { axiosErrorToast } from '#lib/utils/error-util.ts';
 	import { mode } from 'mode-watcher';
 	import { toast } from 'svelte-sonner';

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button';
-	import * as Item from '$lib/components/ui/item/index.js';
-	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
-	import { m } from '$lib/paraglide/messages';
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import * as Item from '#lib/components/ui/item/index.js';
+	import * as Tooltip from '#lib/components/ui/tooltip/index.js';
+	import { m } from '#lib/paraglide/messages.js';
 	import { LucideCalendar, LucidePencil, LucideTrash, type LucideIcon } from '@lucide/svelte';

 	let {
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from '$lib/utils/style';
+	import { cn } from '#lib/utils/style.ts';
 	import QRCode from 'qrcode';
 	import { onMount } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Item from '$lib/components/ui/item/index.js';
+	import * as Item from '#lib/components/ui/item/index.js';
 	import type { LucideIcon } from '@lucide/svelte';

 	interface Props {
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import * as Item from '$lib/components/ui/item/index.js';
-	import { m } from '$lib/paraglide/messages';
-	import type { InteractionScopeInfo } from '$lib/types/oidc.type';
+	import * as Item from '#lib/components/ui/item/index.js';
+	import { m } from '#lib/paraglide/messages.js';
+	import type { InteractionScopeInfo } from '#lib/types/oidc.type.ts';
 	import { LucideKeyRound, LucideMail, LucideUser, LucideUsers } from '@lucide/svelte';
 	import ScopeItem from './scope-item.svelte';

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import { m } from '$lib/paraglide/messages';
-	import appConfigStore from '$lib/stores/application-configuration-store';
-	import { cn } from '$lib/utils/style';
+	import { m } from '#lib/paraglide/messages.js';
+	import appConfigStore from '#lib/stores/application-configuration-store.ts';
+	import { cn } from '#lib/utils/style.ts';
 	import { LucideChevronDown, LucideExternalLink } from '@lucide/svelte';
 	import { PersistedState } from 'runed';
 	import { slide } from 'svelte/transition';
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import FormInput from '$lib/components/form/form-input.svelte';
-	import { m } from '$lib/paraglide/messages';
-	import appConfigStore from '$lib/stores/application-configuration-store';
-	import type { UserSignUp } from '$lib/types/user.type';
-	import { preventDefault } from '$lib/utils/event-util';
-	import { createForm } from '$lib/utils/form-util';
-	import { emptyToUndefined, usernameSchema } from '$lib/utils/zod-util';
+	import FormInput from '#lib/components/form/form-input.svelte';
+	import { m } from '#lib/paraglide/messages.js';
+	import appConfigStore from '#lib/stores/application-configuration-store.ts';
+	import type { UserSignUp } from '#lib/types/user.type.ts';
+	import { preventDefault } from '#lib/utils/event-util.ts';
+	import { createForm } from '#lib/utils/form-util.ts';
+	import { emptyToUndefined, usernameSchema } from '#lib/utils/zod-util.ts';
 	import { get } from 'svelte/store';
 	import { z } from 'zod/v4';

@@ -1,18 +1,18 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import { openConfirmDialog } from '$lib/components/confirm-dialog/';
-	import AdvancedTable from '$lib/components/table/advanced-table.svelte';
-	import { Badge, type BadgeVariant } from '$lib/components/ui/badge';
-	import { Button } from '$lib/components/ui/button';
-	import * as Dialog from '$lib/components/ui/dialog';
-	import { m } from '$lib/paraglide/messages';
-	import UserService from '$lib/services/user-service';
+	import { openConfirmDialog } from '#lib/components/confirm-dialog/index.ts';
+	import AdvancedTable from '#lib/components/table/advanced-table.svelte';
+	import { Badge, type BadgeVariant } from '#lib/components/ui/badge/index.ts';
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import * as Dialog from '#lib/components/ui/dialog/index.ts';
+	import { m } from '#lib/paraglide/messages.js';
+	import UserService from '#lib/services/user-service.ts';
 	import type {
 		AdvancedTableColumn,
 		CreateAdvancedTableActions
-	} from '$lib/types/advanced-table.type';
-	import type { SignupToken } from '$lib/types/signup-token.type';
-	import { axiosErrorToast } from '$lib/utils/error-util';
+	} from '#lib/types/advanced-table.type.ts';
+	import type { SignupToken } from '#lib/types/signup-token.type.ts';
+	import { axiosErrorToast } from '#lib/utils/error-util.ts';
 	import { Copy, Trash2 } from '@lucide/svelte';
 	import { toast } from 'svelte-sonner';

@@ -1,19 +1,19 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import CopyToClipboard from '$lib/components/copy-to-clipboard.svelte';
-	import FormInput from '$lib/components/form/form-input.svelte';
-	import UserGroupInput from '$lib/components/form/user-group-input.svelte';
-	import Qrcode from '$lib/components/qrcode/qrcode.svelte';
-	import { Button } from '$lib/components/ui/button';
-	import * as Dialog from '$lib/components/ui/dialog';
-	import { Input } from '$lib/components/ui/input';
-	import * as Select from '$lib/components/ui/select/index.js';
-	import { m } from '$lib/paraglide/messages';
-	import AppConfigService from '$lib/services/app-config-service';
-	import UserService from '$lib/services/user-service';
-	import { axiosErrorToast } from '$lib/utils/error-util';
-	import { preventDefault } from '$lib/utils/event-util';
-	import { createForm } from '$lib/utils/form-util';
+	import CopyToClipboard from '#lib/components/copy-to-clipboard.svelte';
+	import FormInput from '#lib/components/form/form-input.svelte';
+	import UserGroupInput from '#lib/components/form/user-group-input.svelte';
+	import Qrcode from '#lib/components/qrcode/qrcode.svelte';
+	import { Button } from '#lib/components/ui/button/index.ts';
+	import * as Dialog from '#lib/components/ui/dialog/index.ts';
+	import { Input } from '#lib/components/ui/input/index.ts';
+	import * as Select from '#lib/components/ui/select/index.js';
+	import { m } from '#lib/paraglide/messages.js';
+	import AppConfigService from '#lib/services/app-config-service.ts';
+	import UserService from '#lib/services/user-service.ts';
+	import { axiosErrorToast } from '#lib/utils/error-util.ts';
+	import { preventDefault } from '#lib/utils/event-util.ts';
+	import { createForm } from '#lib/utils/form-util.ts';
 	import { mode } from 'mode-watcher';
 	import { onMount } from 'svelte';
 	import { z } from 'zod/v4';
@@ -1,8 +1,8 @@
 <script lang="ts" generics="TData extends Record<string, any>">
-	import { buttonVariants } from '$lib/components/ui/button/index.js';
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
-	import { m } from '$lib/paraglide/messages';
-	import type { AdvancedTableColumn } from '$lib/types/advanced-table.type';
+	import { buttonVariants } from '#lib/components/ui/button/index.js';
+	import * as DropdownMenu from '#lib/components/ui/dropdown-menu/index.js';
+	import { m } from '#lib/paraglide/messages.js';
+	import type { AdvancedTableColumn } from '#lib/types/advanced-table.type.ts';
 	import Settings2Icon from '@lucide/svelte/icons/settings-2';

 	let {
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Badge } from '$lib/components/ui/badge/index.js';
-	import { Button } from '$lib/components/ui/button/index.js';
-	import * as Command from '$lib/components/ui/command/index.js';
-	import * as Popover from '$lib/components/ui/popover/index.js';
-	import { Separator } from '$lib/components/ui/separator/index.js';
-	import { m } from '$lib/paraglide/messages';
-	import { cn } from '$lib/utils/style';
+	import { Badge } from '#lib/components/ui/badge/index.js';
+	import { Button } from '#lib/components/ui/button/index.js';
+	import * as Command from '#lib/components/ui/command/index.js';
+	import * as Popover from '#lib/components/ui/popover/index.js';
+	import { Separator } from '#lib/components/ui/separator/index.js';
+	import { m } from '#lib/paraglide/messages.js';
+	import { cn } from '#lib/utils/style.ts';
 	import CheckIcon from '@lucide/svelte/icons/check';
 	import ListFilterIcon from '@lucide/svelte/icons/list-filter';
 	import type { Component } from 'svelte';
@@ -1,9 +1,9 @@
 <script lang="ts" generics="TData extends Record<string, any>">
-	import { Input } from '$lib/components/ui/input/index.js';
-	import { m } from '$lib/paraglide/messages';
-	import type { AdvancedTableColumn } from '$lib/types/advanced-table.type';
-	import type { ListRequestOptions } from '$lib/types/list-request.type';
-	import { debounced } from '$lib/utils/debounce-util';
+	import { Input } from '#lib/components/ui/input/index.js';
+	import { m } from '#lib/paraglide/messages.js';
+	import type { AdvancedTableColumn } from '#lib/types/advanced-table.type.ts';
+	import type { ListRequestOptions } from '#lib/types/list-request.type.ts';
+	import { debounced } from '#lib/utils/debounce-util.ts';
 	import AdvancedTableColumnSelection from './advanced-table-column-selection.svelte';
 	import AdvancedTableFilter from './advanced-table-filter.svelte';

@@ -1,18 +1,18 @@
 <script lang="ts" generics="T extends {id:string}">
-	import { replaceState } from '$app/navigation';
+	import { goto } from '$app/navigation';
 	import { page as currentPage } from '$app/state';
-	import Checkbox from '$lib/components/ui/checkbox/checkbox.svelte';
-	import * as Pagination from '$lib/components/ui/pagination';
-	import * as Select from '$lib/components/ui/select';
-	import * as Table from '$lib/components/ui/table/index.js';
-	import Empty from '$lib/icons/empty.svelte';
-	import { m } from '$lib/paraglide/messages';
+	import Checkbox from '#lib/components/ui/checkbox/checkbox.svelte';
+	import * as Pagination from '#lib/components/ui/pagination/index.ts';
+	import * as Select from '#lib/components/ui/select/index.ts';
+	import * as Table from '#lib/components/ui/table/index.js';
+	import Empty from '#lib/icons/empty.svelte';
+	import { m } from '#lib/paraglide/messages.js';
 	import type {
 		AdvancedTableColumn,
 		CreateAdvancedTableActions
-	} from '$lib/types/advanced-table.type';
-	import type { ListRequestOptions, Paginated, SortRequest } from '$lib/types/list-request.type';
-	import { cn } from '$lib/utils/style';
+	} from '#lib/types/advanced-table.type.ts';
+	import type { ListRequestOptions, Paginated, SortRequest } from '#lib/types/list-request.type.ts';
+	import { cn } from '#lib/utils/style.ts';
 	import { ChevronDown, LucideEllipsis } from '@lucide/svelte';
 	import { PersistedState } from 'runed';
 	import { onMount } from 'svelte';
@@ -119,7 +119,7 @@
 	}

 	async function onPageChange(page: number) {
-		changePageState(page);
+		await changePageState(page);
 		await refresh();
 	}

@@ -150,10 +150,10 @@
 		await refresh();
 	}

-	function changePageState(page: number) {
+	async function changePageState(page: number) {
 		const url = new URL(window.location.href);
 		url.searchParams.set(`${id}-page`, page.toString());
-		replaceState(url, currentPage.state);
+		await goto(url, { shallow: true, replace: true, state: currentPage.state });
 		requestOptions.pagination!.page = page;
 	}

@@ -182,7 +182,7 @@

 	export async function refresh() {
 		items = await fetchCallback(requestOptions);
-		changePageState(items.pagination.currentPage);
+		await changePageState(items.pagination.currentPage);
 		updateListLength(items.pagination.totalItems);
 	}
 </script>
@@ -4,8 +4,8 @@
 		buttonVariants,
 		type ButtonVariant,
 		type ButtonSize
-	} from '$lib/components/ui/button/index.js';
-	import { cn } from '$lib/utils/style.js';
+	} from '#lib/components/ui/button/index.js';
+	import { cn } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -4,8 +4,8 @@
 		buttonVariants,
 		type ButtonVariant,
 		type ButtonSize
-	} from '$lib/components/ui/button/index.js';
-	import { cn } from '$lib/utils/style.js';
+	} from '#lib/components/ui/button/index.js';
+	import { cn } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -2,7 +2,7 @@
 	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
 	import AlertDialogPortal from './alert-dialog-portal.svelte';
 	import AlertDialogOverlay from './alert-dialog-overlay.svelte';
-	import { cn, type WithoutChild, type WithoutChildrenOrChild } from '$lib/utils/style.js';
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from '#lib/utils/style.js';
 	import type { ComponentProps } from 'svelte';

 	let {
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/style.js';
+	import { cn } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';
 	import type { HTMLAttributes } from 'svelte/elements';

 	let {
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/style.js';
+	import { cn } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/style.js';
+	import { cn } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -23,7 +23,7 @@
 </script>

 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';
 	import { LucideX } from '@lucide/svelte';
 	import { onMount } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Avatar as AvatarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/style.js';
+	import { cn } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Avatar as AvatarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/style.js';
+	import { cn } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Avatar as AvatarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/style.js';
+	import { cn } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -24,7 +24,7 @@

 <script lang="ts">
 	import type { HTMLAnchorAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { cn } from '$lib/utils/style.js';
+	import { cn } from '#lib/utils/style.js';
 	import type { ComponentProps } from 'svelte';
-	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { Separator } from '#lib/components/ui/separator/index.js';

 	let {
 		ref = $bindable(null),
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import type { Snippet } from 'svelte';

@@ -20,7 +20,7 @@
 </script>

 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';
 	import type { HTMLAttributes } from 'svelte/elements';

 	let {
@@ -1,5 +1,5 @@
 <script lang="ts" module>
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 	import { type VariantProps, tv } from 'tailwind-variants';

@@ -49,7 +49,7 @@
 </script>

 <script lang="ts">
-	import { Spinner } from '$lib/components/ui/spinner';
+	import { Spinner } from '#lib/components/ui/spinner/index.ts';
 	import { onMount } from 'svelte';

 	let {
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/style.js';
+	import { cn } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from '$lib/utils/style.js';
+	import { cn } from '#lib/utils/style.js';
 	import { Calendar as CalendarPrimitive } from 'bits-ui';

 	let {
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/style.js';
+	import { cn } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/style.js';
+	import { cn } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/style.js';
+	import { cn } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/style.js';
+	import { cn } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/style.js';
+	import { cn } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/style.js';
+	import { cn } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/style.js';
+	import { cn } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/style.js';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils/style.js';
 	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';

 	let {
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type WithElementRef, cn } from '$lib/utils/style.js';
+	import { type WithElementRef, cn } from '#lib/utils/style.js';
 	import type { HTMLAttributes } from 'svelte/elements';

 	let {
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';
 	import type { HTMLAttributes } from 'svelte/elements';

 	let {
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from 'bits-ui';
 	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
-	import { buttonVariants, type ButtonVariant } from '$lib/components/ui/button/index.js';
-	import { cn } from '$lib/utils/style.js';
+	import { buttonVariants, type ButtonVariant } from '#lib/components/ui/button/index.js';
+	import { cn } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from 'bits-ui';
 	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
-	import { buttonVariants, type ButtonVariant } from '$lib/components/ui/button/index.js';
-	import { cn } from '$lib/utils/style.js';
+	import { buttonVariants, type ButtonVariant } from '#lib/components/ui/button/index.js';
+	import { cn } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from 'bits-ui';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/style.js';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils/style.js';
 	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';

 	let {
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from 'bits-ui';
 	import * as Calendar from './index.js';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/style.js';
-	import { getLocale } from '$lib/paraglide/runtime';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils/style.js';
+	import { getLocale } from '#lib/paraglide/runtime.js';
 	import type { ButtonVariant } from '../button/button.svelte';
 	import { isEqualMonth, type DateValue } from '@internationalized/date';
 	import type { Snippet } from 'svelte';
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';
 	import type { HTMLAttributes } from 'svelte/elements';

 	let {
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';
 	import type { HTMLAttributes } from 'svelte/elements';

 	let {
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';
 	import type { HTMLAttributes } from 'svelte/elements';

 	let {
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';
 	import type { HTMLAttributes } from 'svelte/elements';

 	let {
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/style.js';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils/style.js';
 	import CheckIcon from '@lucide/svelte/icons/check';
 	import MinusIcon from '@lucide/svelte/icons/minus';

@@ -2,8 +2,8 @@
 	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
 	import type { Snippet } from 'svelte';
 	import Command from './command.svelte';
-	import * as Dialog from '$lib/components/ui/dialog/index.js';
-	import { cn, type WithoutChildrenOrChild } from '$lib/utils/style.js';
+	import * as Dialog from '#lib/components/ui/dialog/index.js';
+	import { cn, type WithoutChildrenOrChild } from '#lib/utils/style.js';

 	let {
 		open = $bindable(false),
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from 'bits-ui';
-	import { cn } from '$lib/utils/style.js';
+	import { cn } from '#lib/utils/style.js';

 	let {
 		ref = $bindable(null),
--- a/Show More
+++ b/Show More