fix: bump all svelte related dependencies (#4828)

apps/desktop/src/lib/branch/ActiveBranchStatus.svelte

@@ -61,18 +61,16 @@
 		>
 	{/if}
 	{#if !isUnapplied && !isLaneCollapsed}
-		{#await normalizedBranchName then name}
-			<Button
-				clickable={false}
-				size="tag"
-				style="neutral"
-				shrinkable
-				disabled
-				tooltip={'Branch name that will be used when pushing.\nChange it from the lane menu'}
-			>
-				{name}
-			</Button>
-		{/await}
+		<Button
+			clickable={false}
+			size="tag"
+			style="neutral"
+			shrinkable
+			disabled
+			tooltip={'Branch name that will be used when pushing.\nChange it from the lane menu'}
+		>
+			{normalizedBranchName}
+		</Button>
 	{/if}
 {:else}
 	<Button
@@ -90,7 +88,7 @@
 		style="ghost"
 		outline
 		shrinkable
-		onclick={(e) => {
+		onclick={(e: MouseEvent) => {
 			const url = gitHostBranch?.url;
 			if (url) openExternalUrl(url);
 			e.preventDefault();

apps/desktop/src/lib/branch/BranchPreviewHeader.svelte

@@ -59,7 +59,7 @@
 							style="ghost"
 							outline
 							shrinkable
-							onclick={(e) => {
+							onclick={(e: MouseEvent) => {
 								const url = gitHostBranch.url;
 								if (url) openExternalUrl(url);
 								e.preventDefault();
@@ -81,7 +81,7 @@
 						icon="pr-small"
 						style="ghost"
 						outline
-						onclick={(e) => {
+						onclick={(e: MouseEvent) => {
 							const url = pr?.htmlUrl;
 							if (url) openExternalUrl(url);
 							e.preventDefault();

apps/desktop/src/lib/commit/CommitCard.svelte

@@ -384,11 +384,12 @@
 											style="ghost"
 											outline
 											icon="undo-small"
-											onclick={(e) => {
+											onclick={(e: MouseEvent) => {
 												currentCommitMessage.set(commit.description);
 												e.stopPropagation();
 												undoCommit(commit);
-											}}>Undo</Button
+											}}
+											>Undo</Button
 										>
 									{/if}
 									<Button

apps/desktop/src/lib/components/AIPromptEdit/Content.svelte

@@ -151,7 +151,7 @@
 				{:else}
 					<Button
 						style="error"
-						onclick={(e) => {
+						onclick={(e: MouseEvent) => {
 							e.stopPropagation();
 							deletePrompt();
 						}}

apps/desktop/src/lib/components/Board.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" async="true">
+<script lang="ts">
 	import BoardEmptyState from './BoardEmptyState.svelte';
 	import FullviewLoading from './FullviewLoading.svelte';
 	import BranchDropzone from '$lib/branch/BranchDropzone.svelte';

apps/desktop/src/lib/components/BranchPreview.svelte

@@ -32,6 +32,7 @@
 	const fileIdSelection = new FileIdSelection(project.id, writable([]));
 	setContext(FileIdSelection, fileIdSelection);
 
+	// eslint-disable-next-line svelte/valid-compile
 	$: selectedFile = fileIdSelection.selectedFile;
 
 	const defaultBranchWidthRem = 30;

apps/desktop/src/lib/components/ProjectSetup.svelte

@@ -1,4 +1,4 @@
-<script async lang="ts">
+<script lang="ts">
 	import ProjectSetupTarget from './ProjectSetupTarget.svelte';
 	import newProjectSvg from '$lib/assets/illustrations/new-project.svg?raw';
 	import { Project, ProjectService } from '$lib/backend/projects';

apps/desktop/src/lib/components/ProjectSetupTarget.svelte

@@ -1,4 +1,4 @@
-<script async lang="ts">
+<script lang="ts">
 	import ProjectNameLabel from '../shared/ProjectNameLabel.svelte';
 	import { ProjectService, Project } from '$lib/backend/projects';
 	import Login from '$lib/components/Login.svelte';

apps/desktop/src/lib/components/SectionCard.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script module lang="ts">
 	export type SectionCardBackground = 'loading' | 'success' | 'error' | undefined;
 </script>
 

apps/desktop/src/lib/components/SyncButton.svelte

@@ -26,7 +26,7 @@
 	icon="update-small"
 	tooltip="Last fetch from upstream"
 	{loading}
-	onmousedown={async (e) => {
+	onmousedown={async (e: MouseEvent) => {
 		e.preventDefault();
 		e.stopPropagation();
 		loading = true;

apps/desktop/src/lib/file/BranchFilesHeader.svelte

@@ -49,7 +49,7 @@
 				small
 				{checked}
 				{indeterminate}
-				onchange={(e) => {
+				onchange={(e: Event & { currentTarget: EventTarget & HTMLInputElement; }) => {
 					const isChecked = e.currentTarget.checked;
 					if (isChecked) {
 						selectAll(files);

apps/desktop/src/lib/navigation/ChunkyList.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	// If this is not present, eslint complains that T is not defined below
 	type T = unknown;
 </script>

apps/desktop/src/lib/navigation/Navigation.svelte

@@ -28,6 +28,7 @@
 	let isResizerHovered = false;
 	let isResizerDragging = false;
 
+	// eslint-disable-next-line svelte/valid-compile
 	$: isNavCollapsed = persisted<boolean>(false, 'projectNavCollapsed_' + project.id);
 
 	function toggleNavCollapse() {

apps/desktop/src/lib/navigation/TargetCard.svelte

@@ -15,6 +15,7 @@
 	const baseBranchService = getContext(BaseBranchService);
 	const project = getContext(Project);
 
+	// eslint-disable-next-line svelte/valid-compile
 	$: base = baseBranchService.base;
 	$: selected = $page.url.href.endsWith('/base');
 </script>

apps/desktop/src/lib/pr/PullRequestButton.svelte

@@ -1,21 +1,18 @@
-<script lang="ts" context="module">
-	export enum Action {
+<script lang="ts">
+	import ContextMenuItem from '$lib/components/contextmenu/ContextMenuItem.svelte';
+	import ContextMenuSection from '$lib/components/contextmenu/ContextMenuSection.svelte';
+	import { persisted } from '$lib/persisted/persisted';
+	import DropDownButton from '$lib/shared/DropDownButton.svelte';
+
+	enum Action {
 		Create = 'createPr',
 		CreateDraft = 'createDraftPr'
 	}
-
 	const actions = Object.values(Action);
 	const labels = {
 		[Action.Create]: 'Create PR',
 		[Action.CreateDraft]: 'Create Draft PR'
 	};
-</script>
-
-<script lang="ts">
-	import ContextMenuItem from '$lib/components/contextmenu/ContextMenuItem.svelte';
-	import ContextMenuSection from '$lib/components/contextmenu/ContextMenuSection.svelte';
-	import { persisted } from '$lib/persisted/persisted';
-	import DropDownButton from '$lib/shared/DropDownButton.svelte';
 
 	type Props = {
 		loading: boolean;

apps/desktop/src/lib/pr/ViewPrButton.svelte

@@ -16,12 +16,12 @@
 	outline
 	shrinkable
 	bind:el={viewPrButton}
-	onclick={(e) => {
+	onclick={(e: MouseEvent) => {
 		openExternalUrl(url);
 		e.preventDefault();
 		e.stopPropagation();
 	}}
-	oncontextmenu={(e) => {
+	oncontextmenu={(e: MouseEvent) => {
 		e.preventDefault();
 		copyLinkContextMenu?.openByMouse(e);
 	}}

apps/desktop/src/lib/scroll/Scrollbar.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	export type ScrollbarPaddingType = {
 		top?: number;
 		right?: number;

apps/desktop/src/lib/select/Select.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	export type SelectItem = {
 		label: string;
 		value: string;

apps/desktop/src/lib/shared/InfoMessage.svelte

@@ -1,14 +1,16 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	import type { ComponentColor } from '@gitbutler/ui/utils/colorTypes';
 	export type MessageStyle = Exclude<ComponentColor, 'ghost' | 'purple'>;
 </script>
 
 <script lang="ts">
 	import Button from '@gitbutler/ui/Button.svelte';
-	import Icon, { type IconColor } from '@gitbutler/ui/Icon.svelte';
+	import Icon from '@gitbutler/ui/Icon.svelte';
 	import { createEventDispatcher } from 'svelte';
 	import type iconsJson from '@gitbutler/ui/data/icons.json';
 
+	type IconColor = ComponentColor | undefined;
+
 	export let icon: keyof typeof iconsJson | undefined = undefined;
 	export let style: MessageStyle = 'neutral';
 	export let outlined: boolean = true;

apps/desktop/src/routes/[projectId]/+layout.svelte

@@ -108,22 +108,20 @@
 	const mode = $derived(modeService.mode);
 	const head = $derived(modeService.head);
 
-	// We end up with a `state_unsafe_mutation` when switching projects if we
-	// don't use $effect.pre here.
 	// TODO: can we eliminate the need to debounce?
 	const fetch = $derived(fetchSignal.event);
 	const debouncedBaseBranchResfresh = debounce(() => baseBranchService.refresh(), 500);
-	$effect.pre(() => {
+	$effect(() => {
 		if ($fetch || $head) debouncedBaseBranchResfresh();
 	});
 
 	// TODO: can we eliminate the need to debounce?
 	const debouncedRemoteBranchRefresh = debounce(() => remoteBranchService.refresh(), 500);
-	$effect.pre(() => {
+	$effect(() => {
 		if ($baseBranch || $head || $fetch) debouncedRemoteBranchRefresh();
 	});
 
-	$effect.pre(() => {
+	$effect(() => {
 		const gitHost =
 			repoInfo && baseBranchName
 				? gitHostFactory.build(

apps/desktop/src/routes/[projectId]/base/+page.svelte

@@ -24,11 +24,13 @@
 	const fileIdSelection = new FileIdSelection(project.id, writable([]));
 	setContext(FileIdSelection, fileIdSelection);
 
+	// eslint-disable-next-line svelte/valid-compile
 	$: selectedFile = fileIdSelection.selectedFile;
 
 	let rsViewport: HTMLDivElement;
 	let laneWidth: number;
 
+	// eslint-disable-next-line svelte/valid-compile
 	$: error = baseBranchService.error;
 
 	onMount(() => {

apps/desktop/src/routes/[projectId]/board/+page.svelte

@@ -40,6 +40,7 @@
 
 	$: {
 		if ($mode?.type === 'Edit') {
+			// eslint-disable-next-line svelte/valid-compile
 			goto(`/${project.id}/edit`);
 		}
 	}

apps/desktop/svelte.config.js

@@ -3,7 +3,7 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	preprocess: vitePreprocess(),
+	preprocess: vitePreprocess({ script: true }),
 	kit: {
 		adapter: staticAdapter({
 			pages: 'build',

apps/web/src/routes/downloads/+page.svelte

@@ -89,6 +89,7 @@
 		margin-block: 0.5rem;
 		overflow: hidden;
 		display: -webkit-box;
+		line-clamp: 5;
 		-webkit-box-orient: vertical;
 		-webkit-line-clamp: 5;
 	}

package.json

@@ -44,7 +44,7 @@
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.4",
 		"svelte-eslint-parser": "^0.41.0",
-		"turbo": "2.1.1-canary.0",
+		"turbo": "2.1.1",
 		"typescript": "5.4.5",
 		"typescript-eslint": "^7.13.1"
 	}

packages/ui/src/lib/Badge.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	import type { ComponentColor, ComponentStyleKind } from '$lib/utils/colorTypes';
 
 	export interface BadgeProps {

packages/ui/src/lib/Button.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	export interface ButtonProps {
 		el?: HTMLElement;
 		// Interaction props

packages/ui/src/lib/Checkbox.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	export interface CheckboxProps {
 		name?: string;
 		small?: boolean;

packages/ui/src/lib/Icon.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	import { pxToRem } from '$lib/utils/pxToRem';
 	export type IconColor = ComponentColor | undefined;
 </script>

packages/ui/src/lib/Tooltip.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	export type TooltipPosition = 'top' | 'bottom';
 	export type TooltipAlign = 'start' | 'center' | 'end';
 </script>

packages/ui/src/lib/avatar/AvatarGroup.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script module lang="ts">
 	export interface Props {
 		avatars: {
 			srcUrl: string;

packages/ui/src/stories/button/DemoAllButtons.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { ComponentColor } from '$lib/utils/colorTypes';
 	import Button from '$lib/Button.svelte';
 
 	interface Props {
@@ -9,32 +10,43 @@
 	const { label, reversedDirection }: Props = $props();
 </script>
 
-{#snippet buttons({ label, outline, style, reversedDirection })}
+{#snippet buttons({ 
+		label, 
+		outline, 
+		style, 
+		reversedDirection 
+	}: { 
+		label: string, 
+		outline: boolean, 
+		style?: ComponentColor, 
+		reversedDirection?: boolean 
+	}
+)}
 	<div class="group">
 		<Button size="cta" {style} icon="plus-small" {reversedDirection}>{label}</Button>
-		<Button size="cta" {style} kind="solid" {outline} icon="plus-small" {reversedDirection}
-			>{label}</Button
-		>
+		<Button size="cta" {style} kind="solid" {outline} icon="plus-small" {reversedDirection}>
+			{label}
+		</Button>
 		<Button size="cta" {style} {reversedDirection}>{label}</Button>
 		<Button size="cta" {style} kind="solid" {outline} {reversedDirection}>{label}</Button>
 		<Button size="cta" {style} icon="plus-small" />
 		<Button size="cta" {style} kind="solid" {outline} icon="plus-small" />
 	</div>
 	<div class="group">
 		<Button size="button" {style} icon="plus-small" {reversedDirection}>{label}</Button>
-		<Button size="button" {style} kind="solid" {outline} icon="plus-small" {reversedDirection}
-			>{label}</Button
-		>
+		<Button size="button" {style} kind="solid" {outline} icon="plus-small" {reversedDirection}>
+			{label}
+		</Button>
 		<Button size="button" {style} {reversedDirection}>{label}</Button>
 		<Button size="button" {style} kind="solid" {outline} {reversedDirection}>{label}</Button>
 		<Button size="button" {style} icon="plus-small" />
 		<Button size="button" {style} kind="solid" {outline} icon="plus-small" />
 	</div>
 	<div class="group">
 		<Button size="tag" {style} icon="plus-small" {reversedDirection}>{label}</Button>
-		<Button size="tag" {style} kind="solid" {outline} icon="plus-small" {reversedDirection}
-			>{label}</Button
-		>
+		<Button size="tag" {style} kind="solid" {outline} icon="plus-small" {reversedDirection}>
+			{label}
+		</Button>
 		<Button size="tag" {style} {reversedDirection}>{label}</Button>
 		<Button size="tag" {style} kind="solid" {outline} {reversedDirection}>{label}</Button>
 		<Button size="tag" {style} icon="plus-small" />