chore(internal): upgrade vite (#7461)

* vite 8

* add .npmrc

* popperjs to svelte 5

* popperjs to svelte 5

* revert to rolldown-vite

* vite 7.3.0

frontend/package.json

@@ -26,9 +26,9 @@
 		"@melt-ui/svelte": "^0.86.2",
 		"@playwright/test": "^1.34.3",
 		"@sveltejs/adapter-static": "^3.0.6",
-		"@sveltejs/kit": "^2.28.0",
+		"@sveltejs/kit": "^2.49.2",
 		"@sveltejs/package": "^2.3.7",
-		"@sveltejs/vite-plugin-svelte": "^6.1.1",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
 		"@tailwindcss/forms": "^0.5.3",
 		"@tailwindcss/typography": "^0.5.8",
 		"@types/d3": "^7.4.0",
@@ -70,7 +70,7 @@
 		"tar": "^7.4.3",
 		"tslib": "^2.6.1",
 		"typescript": "^5.5.0",
-		"vite": "npm:rolldown-vite@7.2.8",
+		"vite": "npm:rolldown-vite@7.3.0",
 		"vite-plugin-mkcert": "^1.17.5",
 		"vitest": "^4.0.10",
 		"vitest-browser-svelte": "^2.0.1"

frontend/src/lib/components/CustomPopover.svelte

@@ -1,18 +1,38 @@
 <script lang="ts">
+	import { run, createBubbler } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import { createPopperActions, type PopperOptions } from 'svelte-popperjs'
 	import type { PopoverPlacement } from './Popover.model'
 	import Portal from '$lib/components/Portal.svelte'
 
-	export let placement: PopoverPlacement = 'bottom-end'
-	export let notClickable = false
-	export let disablePopup = false
-	export let disappearTimeout = 100
-	export let appearTimeout = 300
-	export let style: string | undefined = undefined
-	export let noPadding = false
-
-	export let focusEl: HTMLElement | undefined = undefined
+	interface Props {
+		placement?: PopoverPlacement
+		notClickable?: boolean
+		disablePopup?: boolean
+		disappearTimeout?: number
+		appearTimeout?: number
+		style?: string | undefined
+		noPadding?: boolean
+		focusEl?: HTMLElement | undefined
+		class?: string
+		children?: import('svelte').Snippet
+		overlay?: import('svelte').Snippet
+	}
 
+	let {
+		placement = 'bottom-end',
+		notClickable = false,
+		disablePopup = false,
+		disappearTimeout = 100,
+		appearTimeout = 300,
+		style = undefined,
+		noPadding = false,
+		focusEl = undefined,
+		class: clazz = '',
+		children,
+		overlay
+	}: Props = $props()
 	const [popperRef, popperContent] = createPopperActions({ placement })
 
 	const popperOptions: PopperOptions<{}> = {
@@ -29,7 +49,7 @@
 		]
 	}
 
-	let showTooltip = false
+	let showTooltip = $state(false)
 	let timeout: number | undefined = undefined
 	let inTimeout: number | undefined = undefined
 
@@ -47,36 +67,38 @@
 		timeout = setTimeout(() => (showTooltip = false), disappearTimeout)
 	}
 
-	$: focusEl && focusEl?.focus()
+	run(() => {
+		focusEl && focusEl?.focus()
+	})
 </script>
 
 {#if notClickable}
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<span {style} use:popperRef on:mouseenter={open} on:mouseleave={close} class={$$props.class}>
-		<slot />
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<span {style} use:popperRef onmouseenter={open} onmouseleave={close} class={clazz}>
+		{@render children?.()}
 	</span>
 {:else}
 	<button
 		{style}
 		use:popperRef
-		on:mouseenter={open}
-		on:mouseleave={close}
-		on:click
-		class={$$props.class}
+		onmouseenter={open}
+		onmouseleave={close}
+		onclick={bubble('click')}
+		class={clazz}
 	>
-		<slot />
+		{@render children?.()}
 	</button>
 {/if}
 {#if showTooltip && !disablePopup}
 	<Portal name="custom-popover">
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
 			use:popperContent={popperOptions}
-			on:mouseenter={open}
-			on:mouseleave={close}
+			onmouseenter={open}
+			onmouseleave={close}
 			class="z-[5001] border rounded-lg shadow-lg {noPadding ? '' : 'p-4'} bg-surface"
 		>
-			<slot name="overlay" />
+			{@render overlay?.()}
 		</div>
 	</Portal>
 {/if}

frontend/src/lib/components/ManualPopover.svelte

@@ -6,15 +6,28 @@
 	import { fade } from 'svelte/transition'
 	import { twMerge } from 'tailwind-merge'
 
-	export let placement: PopoverPlacement = 'bottom'
-
-	const [popperRef, popperContent, getInstance] = createPopperActions({ placement })
-
 	export async function refresh() {
 		await getInstance()?.update()
 	}
 
-	export let showTooltip = false
+	interface Props {
+		placement?: PopoverPlacement
+		class?: string
+		showTooltip?: boolean
+		children?: import('svelte').Snippet
+		content?: import('svelte').Snippet
+	}
+
+	let {
+		placement = 'bottom',
+		class: clazz = '',
+		showTooltip = $bindable(false),
+		children,
+		content
+	}: Props = $props()
+
+	const [popperRef, popperContent, getInstance] = createPopperActions({ placement })
+
 	export function open() {
 		showTooltip = true
 	}
@@ -24,16 +37,16 @@
 </script>
 
 <fragment use:popperRef>
-	<slot />
+	{@render children?.()}
 </fragment>
 {#if showTooltip}
 	<Portal name="manual-popover">
 		<div
 			use:popperContent
-			class={twMerge('z-[901] rounded-lg shadow-md border p-4 bg-surface', $$props.class)}
+			class={twMerge('z-[901] rounded-lg shadow-md border p-4 bg-surface', clazz)}
 			transition:fade={{ duration: 200 }}
 		>
-			<slot name="content" />
+			{@render content?.()}
 		</div>
 	</Portal>
 {/if}

frontend/src/lib/components/schema/SchemaPicker.svelte

@@ -1,96 +0,0 @@
-<script lang="ts">
-	import CustomPopover from '$lib/components/CustomPopover.svelte'
-	import { copyToClipboard } from '$lib/utils'
-	import { createEventDispatcher } from 'svelte'
-	import ObjectViewer from '$lib/components/propertyPicker/ObjectViewer.svelte'
-	import { twMerge } from 'tailwind-merge'
-
-	export let payloadData: Record<string, any>
-	export let date: string | undefined
-	export let selected = false
-
-	const dispatch = createEventDispatcher()
-
-	let hovering = false
-	function formatDate(dateString: string | undefined): string {
-		if (!dateString) return ''
-		const date = new Date(dateString)
-		return new Intl.DateTimeFormat('en-US', {
-			year: 'numeric',
-			month: 'short',
-			day: 'numeric',
-			hour: '2-digit',
-			minute: '2-digit'
-		}).format(date)
-	}
-</script>
-
-<button
-	class={twMerge(
-		'w-full rounded-sm px-2',
-		hovering ? 'bg-surface-hover' : '',
-		selected ? 'bg-surface-selected' : ''
-	)}
-	on:click={() => {
-		dispatch('select')
-	}}
-	on:mouseenter={() => {
-		hovering = true
-	}}
-	on:mouseleave={() => {
-		hovering = false
-	}}
->
-	<div class="flex flex-row gap-2">
-		<slot name="start" />
-
-		<div
-			class="text-2xs font-normal text-left p-2 rounded-md overflow-auto grow-0 text-ellipsis whitespace-nowrap scrollbar-none"
-			title={formatDate(date)}
-		>
-			{formatDate(date)}
-		</div>
-
-		<CustomPopover class="grow min-w-12 ">
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div
-				class={twMerge(
-					'text-xs border font-normal text-left p-1 rounded-md overflow-auto grow whitespace-nowrap scrollbar-none',
-					hovering && 'border-surface'
-				)}
-				on:click={() => {
-					if (selected) {
-						copyToClipboard(JSON.stringify(payloadData))
-					}
-				}}
-				on:mouseenter={() => {
-					hovering = true
-				}}
-				on:mouseleave={() => {
-					hovering = false
-				}}
-			>
-				{JSON.stringify(payloadData)}
-			</div>
-			<svelte:fragment slot="overlay">
-				<ObjectViewer json={payloadData} />
-			</svelte:fragment>
-		</CustomPopover>
-
-		{#if hovering}
-			<slot name="extra" />
-		{/if}
-	</div>
-</button>
-
-<style>
-	.scrollbar-none {
-		-ms-overflow-style: none; /* IE and Edge */
-		scrollbar-width: none; /* Firefox */
-	}
-
-	.scrollbar-none::-webkit-scrollbar {
-		display: none; /* Chrome, Safari and Opera */
-	}
-</style>

frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte

@@ -63,7 +63,7 @@
 	import ResourcePicker from '../ResourcePicker.svelte'
 	import { usePromise } from '$lib/svelte5Utils.svelte'
 	import { SettingService, WorkspaceService } from '$lib/gen'
-	import { type GetSettingsResponse } from '$lib/gen'
+	import type { GetSettingsResponse } from '$lib/gen'
 
 	import { workspaceStore } from '$lib/stores'
 	import { sendUserToast } from '$lib/toast'