run prettier

src/lib/chat/triggerAiCall.ts

@@ -11,11 +11,7 @@ export interface TriggerAiCallContext {
 	authToken: string;
 	billingOption: string;
 	abortSignal: AbortSignal | undefined;
-	updateNodeData: (
-		id: string,
-		data: Record<string, unknown>,
-		opts?: { replace?: boolean }
-	) => void;
+	updateNodeData: (id: string, data: Record<string, unknown>, opts?: { replace?: boolean }) => void;
 	updateNodes: (fn: (nodes: Node[]) => Node[]) => void;
 	updateEdges: (fn: (edges: Edge[]) => Edge[]) => void;
 	onLoadingChange: (loading: boolean) => void;
@@ -32,8 +28,7 @@ function formatMessagesForModel(messages: ChatMessage[], modelId: string) {
 			typeof modelData === 'object' && modelData && 'content' in modelData
 				? modelData.content
 				: (Object.values(message).find(
-						(m): m is { content: string } =>
-							typeof m === 'object' && m !== null && 'content' in m
+						(m): m is { content: string } => typeof m === 'object' && m !== null && 'content' in m
 					)?.content ?? '');
 		return { role: 'assistant' as const, content };
 	});
@@ -114,14 +109,18 @@ export async function triggerAiCall(ctx: TriggerAiCallContext): Promise<void> {
 							}
 						}
 						const end = Date.now();
-						updateNodeData(node.id, {
-							...node.data,
-							content,
-							timestamp: end - start,
-							loading: false,
-							messages,
-							usage
-						} as Record<string, unknown>, { replace: true });
+						updateNodeData(
+							node.id,
+							{
+								...node.data,
+								content,
+								timestamp: end - start,
+								loading: false,
+								messages,
+								usage
+							} as Record<string, unknown>,
+							{ replace: true }
+						);
 						return { [model.id]: { content, timestamp: String(end - start) } };
 					}
 					content += decoder.decode(value, { stream: true });

src/lib/components/chat/Assistant.svelte

@@ -148,10 +148,7 @@
 			<div class="mt-3 flex items-center justify-between gap-2 border-t border-border pt-3">
 				<p class="text-xs text-muted-foreground">
 					{usage.total_tokens} tokens
-					{#if formatUsageCost(
-						selectedModel.providers.find((p) => p.provider === provider)?.pricing,
-						usage
-					)}
+					{#if formatUsageCost(selectedModel.providers.find((p) => p.provider === provider)?.pricing, usage)}
 						<span class="mx-0.5">&middot;</span>
 						{formatUsageCost(
 							selectedModel.providers.find((p) => p.provider === provider)?.pricing,

src/lib/components/ui/checkbox/index.ts

@@ -1,6 +1,6 @@
-import Root from "./checkbox.svelte";
+import Root from './checkbox.svelte';
 export {
 	Root,
 	//
-	Root as Checkbox,
+	Root as Checkbox
 };

src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import CheckIcon from "@lucide/svelte/icons/check";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
-	import type { Snippet } from "svelte";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import type { Snippet } from 'svelte';
 
 	let {
 		ref = $bindable(null),
@@ -22,15 +22,13 @@
 	bind:indeterminate
 	data-slot="context-menu-checkbox-item"
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<span
-			class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center"
-		>
+		<span class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center">
 			{#if checked}
 				<CheckIcon class="size-4" />
 			{/if}

src/lib/components/ui/context-menu/context-menu-content.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
-	import ContextMenuPortal from "./context-menu-portal.svelte";
-	import type { ComponentProps } from "svelte";
-	import type { WithoutChildrenOrChild } from "$lib/utils.js";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+	import ContextMenuPortal from './context-menu-portal.svelte';
+	import type { ComponentProps } from 'svelte';
+	import type { WithoutChildrenOrChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -20,7 +20,7 @@
 		bind:ref
 		data-slot="context-menu-content"
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--bits-context-menu-content-available-height) min-w-[8rem] origin-(--bits-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+			'z-50 max-h-(--bits-context-menu-content-available-height) min-w-[8rem] origin-(--bits-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
 			className
 		)}
 		{...restProps}

src/lib/components/ui/context-menu/context-menu-group-heading.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -16,6 +16,6 @@
 	bind:ref
 	data-slot="context-menu-group-heading"
 	data-inset={inset}
-	class={cn("text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:ps-8", className)}
+	class={cn('px-2 py-1.5 text-sm font-medium text-foreground data-[inset]:ps-8', className)}
 	{...restProps}
 />

src/lib/components/ui/context-menu/context-menu-group.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
 
 	let { ref = $bindable(null), ...restProps }: ContextMenuPrimitive.GroupProps = $props();
 </script>

src/lib/components/ui/context-menu/context-menu-label.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -17,7 +17,7 @@
 	bind:this={ref}
 	data-slot="context-menu-label"
 	data-inset={inset}
-	class={cn("text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:ps-8", className)}
+	class={cn('px-2 py-1.5 text-sm font-medium text-foreground data-[inset]:ps-8', className)}
 	{...restProps}
 >
 	{@render children?.()}

src/lib/components/ui/context-menu/context-menu-portal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
 
 	let { ...restProps }: ContextMenuPrimitive.PortalProps = $props();
 </script>

src/lib/components/ui/context-menu/context-menu-radio-group.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
 
 	let {
 		ref = $bindable(null),
-		value = $bindable(""),
+		value = $bindable(''),
 		...restProps
 	}: ContextMenuPrimitive.RadioGroupProps = $props();
 </script>

src/lib/components/ui/context-menu/context-menu-radio-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import CircleIcon from "@lucide/svelte/icons/circle";
-	import { cn, type WithoutChild } from "$lib/utils.js";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import CircleIcon from '@lucide/svelte/icons/circle';
+	import { cn, type WithoutChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -15,15 +15,13 @@
 	bind:ref
 	data-slot="context-menu-radio-item"
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<span
-			class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center"
-		>
+		<span class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center">
 			{#if checked}
 				<CircleIcon class="size-2 fill-current" />
 			{/if}

src/lib/components/ui/context-menu/context-menu-separator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <ContextMenuPrimitive.Separator
 	bind:ref
 	data-slot="context-menu-separator"
-	class={cn("bg-border -mx-1 my-1 h-px", className)}
+	class={cn('-mx-1 my-1 h-px bg-border', className)}
 	{...restProps}
 />

src/lib/components/ui/context-menu/context-menu-shortcut.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="context-menu-shortcut"
-	class={cn("text-muted-foreground ms-auto text-xs tracking-widest", className)}
+	class={cn('ms-auto text-xs tracking-widest text-muted-foreground', className)}
 	{...restProps}
 >
 	{@render children?.()}

src/lib/components/ui/context-menu/context-menu-sub-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="context-menu-sub-content"
 	class={cn(
-		"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--bits-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+		'z-50 min-w-[8rem] origin-(--bits-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
 		className
 	)}
 	{...restProps}

src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
-	import { cn, type WithoutChild } from "$lib/utils.js";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { cn, type WithoutChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -19,7 +19,7 @@
 	data-slot="context-menu-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
 		className
 	)}
 	{...restProps}

src/lib/components/ui/context-menu/context-menu-sub.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
 
 	let { open = $bindable(false), ...restProps }: ContextMenuPrimitive.SubProps = $props();
 </script>

src/lib/components/ui/context-menu/context-menu-trigger.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
 
 	let { ref = $bindable(null), ...restProps }: ContextMenuPrimitive.TriggerProps = $props();
 </script>

src/lib/components/ui/context-menu/context-menu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
 
 	let { open = $bindable(false), ...restProps }: ContextMenuPrimitive.RootProps = $props();
 </script>

src/lib/components/ui/context-menu/index.ts

@@ -1,19 +1,19 @@
-import Root from "./context-menu.svelte";
-import Sub from "./context-menu-sub.svelte";
-import Portal from "./context-menu-portal.svelte";
-import Trigger from "./context-menu-trigger.svelte";
-import Group from "./context-menu-group.svelte";
-import RadioGroup from "./context-menu-radio-group.svelte";
-import Item from "./context-menu-item.svelte";
-import GroupHeading from "./context-menu-group-heading.svelte";
-import Content from "./context-menu-content.svelte";
-import Shortcut from "./context-menu-shortcut.svelte";
-import RadioItem from "./context-menu-radio-item.svelte";
-import Separator from "./context-menu-separator.svelte";
-import SubContent from "./context-menu-sub-content.svelte";
-import SubTrigger from "./context-menu-sub-trigger.svelte";
-import CheckboxItem from "./context-menu-checkbox-item.svelte";
-import Label from "./context-menu-label.svelte";
+import Root from './context-menu.svelte';
+import Sub from './context-menu-sub.svelte';
+import Portal from './context-menu-portal.svelte';
+import Trigger from './context-menu-trigger.svelte';
+import Group from './context-menu-group.svelte';
+import RadioGroup from './context-menu-radio-group.svelte';
+import Item from './context-menu-item.svelte';
+import GroupHeading from './context-menu-group-heading.svelte';
+import Content from './context-menu-content.svelte';
+import Shortcut from './context-menu-shortcut.svelte';
+import RadioItem from './context-menu-radio-item.svelte';
+import Separator from './context-menu-separator.svelte';
+import SubContent from './context-menu-sub-content.svelte';
+import SubTrigger from './context-menu-sub-trigger.svelte';
+import CheckboxItem from './context-menu-checkbox-item.svelte';
+import Label from './context-menu-label.svelte';
 
 export {
 	Root,
@@ -48,5 +48,5 @@ export {
 	SubContent as ContextMenuSubContent,
 	SubTrigger as ContextMenuSubTrigger,
 	CheckboxItem as ContextMenuCheckboxItem,
-	Label as ContextMenuLabel,
+	Label as ContextMenuLabel
 };

src/lib/components/ui/input/index.ts

@@ -1,7 +1,7 @@
-import Root from "./input.svelte";
+import Root from './input.svelte';
 
 export {
 	Root,
 	//
-	Root as Input,
+	Root as Input
 };

src/lib/components/ui/input/input.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
-	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
 
-	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+	type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
 
 	type Props = WithElementRef<
-		Omit<HTMLInputAttributes, "type"> &
-			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+		Omit<HTMLInputAttributes, 'type'> &
+			({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
 	>;
 
 	let {
@@ -15,19 +15,19 @@
 		type,
 		files = $bindable(),
 		class: className,
-		"data-slot": dataSlot = "input",
+		'data-slot': dataSlot = 'input',
 		...restProps
 	}: Props = $props();
 </script>
 
-{#if type === "file"}
+{#if type === 'file'}
 	<input
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50",
-			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+			'flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
+			'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
 			className
 		)}
 		type="file"
@@ -40,9 +40,9 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+			'flex h-9 w-full min-w-0 rounded-md border border-input bg-background px-3 py-1 text-base shadow-xs ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30',
+			'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
 			className
 		)}
 		{type}

src/lib/components/ui/popover/index.ts

@@ -1,8 +1,8 @@
-import Root from "./popover.svelte";
-import Close from "./popover-close.svelte";
-import Content from "./popover-content.svelte";
-import Trigger from "./popover-trigger.svelte";
-import Portal from "./popover-portal.svelte";
+import Root from './popover.svelte';
+import Close from './popover-close.svelte';
+import Content from './popover-content.svelte';
+import Trigger from './popover-trigger.svelte';
+import Portal from './popover-portal.svelte';
 
 export {
 	Root,
@@ -15,5 +15,5 @@ export {
 	Content as PopoverContent,
 	Trigger as PopoverTrigger,
 	Close as PopoverClose,
-	Portal as PopoverPortal,
+	Portal as PopoverPortal
 };

src/lib/components/ui/popover/popover-close.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from "bits-ui";
+	import { Popover as PopoverPrimitive } from 'bits-ui';
 
 	let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps = $props();
 </script>

src/lib/components/ui/popover/popover-content.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from "bits-ui";
-	import PopoverPortal from "./popover-portal.svelte";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
-	import type { ComponentProps } from "svelte";
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import PopoverPortal from './popover-portal.svelte';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+	import type { ComponentProps } from 'svelte';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		sideOffset = 4,
-		align = "center",
+		align = 'center',
 		portalProps,
 		...restProps
 	}: PopoverPrimitive.ContentProps & {
@@ -23,7 +23,7 @@
 		{sideOffset}
 		{align}
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+			'z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
 			className
 		)}
 		{...restProps}

src/lib/components/ui/popover/popover-portal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from "bits-ui";
+	import { Popover as PopoverPrimitive } from 'bits-ui';
 
 	let { ...restProps }: PopoverPrimitive.PortalProps = $props();
 </script>

src/lib/components/ui/popover/popover-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
-	import { Popover as PopoverPrimitive } from "bits-ui";
+	import { cn } from '$lib/utils.js';
+	import { Popover as PopoverPrimitive } from 'bits-ui';
 
 	let {
 		ref = $bindable(null),
@@ -12,6 +12,6 @@
 <PopoverPrimitive.Trigger
 	bind:ref
 	data-slot="popover-trigger"
-	class={cn("", className)}
+	class={cn('', className)}
 	{...restProps}
 />

src/lib/components/ui/popover/popover.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Popover as PopoverPrimitive } from "bits-ui";
+	import { Popover as PopoverPrimitive } from 'bits-ui';
 
 	let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
 </script>

src/lib/components/ui/select/index.ts

@@ -1,14 +1,14 @@
-import Root from "./select.svelte";
-import Group from "./select-group.svelte";
-import Label from "./select-label.svelte";
-import Item from "./select-item.svelte";
-import Content from "./select-content.svelte";
-import Trigger from "./select-trigger.svelte";
-import Separator from "./select-separator.svelte";
-import ScrollDownButton from "./select-scroll-down-button.svelte";
-import ScrollUpButton from "./select-scroll-up-button.svelte";
-import GroupHeading from "./select-group-heading.svelte";
-import Portal from "./select-portal.svelte";
+import Root from './select.svelte';
+import Group from './select-group.svelte';
+import Label from './select-label.svelte';
+import Item from './select-item.svelte';
+import Content from './select-content.svelte';
+import Trigger from './select-trigger.svelte';
+import Separator from './select-separator.svelte';
+import ScrollDownButton from './select-scroll-down-button.svelte';
+import ScrollUpButton from './select-scroll-up-button.svelte';
+import GroupHeading from './select-group-heading.svelte';
+import Portal from './select-portal.svelte';
 
 export {
 	Root,
@@ -33,5 +33,5 @@ export {
 	ScrollDownButton as SelectScrollDownButton,
 	ScrollUpButton as SelectScrollUpButton,
 	GroupHeading as SelectGroupHeading,
-	Portal as SelectPortal,
+	Portal as SelectPortal
 };

src/lib/components/ui/select/select-content.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import SelectPortal from "./select-portal.svelte";
-	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
-	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
-	import { cn, type WithoutChild } from "$lib/utils.js";
-	import type { ComponentProps } from "svelte";
-	import type { WithoutChildrenOrChild } from "$lib/utils.js";
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import SelectPortal from './select-portal.svelte';
+	import SelectScrollUpButton from './select-scroll-up-button.svelte';
+	import SelectScrollDownButton from './select-scroll-down-button.svelte';
+	import { cn, type WithoutChild } from '$lib/utils.js';
+	import type { ComponentProps } from 'svelte';
+	import type { WithoutChildrenOrChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -27,7 +27,7 @@
 		{preventScroll}
 		data-slot="select-content"
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+			'relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:translate-y-1 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:-translate-x-1 data-[side=left]:slide-in-from-end-2 data-[side=right]:translate-x-1 data-[side=right]:slide-in-from-start-2 data-[side=top]:-translate-y-1 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
 			className
 		)}
 		{...restProps}
@@ -35,7 +35,7 @@
 		<SelectScrollUpButton />
 		<SelectPrimitive.Viewport
 			class={cn(
-				"h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1 p-1"
+				'h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1 p-1'
 			)}
 		>
 			{@render children?.()}

src/lib/components/ui/select/select-group-heading.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
-	import type { ComponentProps } from "svelte";
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+	import type { ComponentProps } from 'svelte';
 
 	let {
 		ref = $bindable(null),
@@ -14,7 +14,7 @@
 <SelectPrimitive.GroupHeading
 	bind:ref
 	data-slot="select-group-heading"
-	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	class={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}
 	{...restProps}
 >
 	{@render children?.()}

src/lib/components/ui/select/select-group.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
+	import { Select as SelectPrimitive } from 'bits-ui';
 
 	let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
 </script>

src/lib/components/ui/select/select-label.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="select-label"
-	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	class={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}
 	{...restProps}
 >
 	{@render children?.()}

src/lib/components/ui/select/select-portal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
+	import { Select as SelectPrimitive } from 'bits-ui';
 
 	let { ...restProps }: SelectPrimitive.PortalProps = $props();
 </script>

src/lib/components/ui/select/select-scroll-down-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <SelectPrimitive.ScrollDownButton
 	bind:ref
 	data-slot="select-scroll-down-button"
-	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	class={cn('flex cursor-default items-center justify-center py-1', className)}
 	{...restProps}
 >
 	<ChevronDownIcon class="size-4" />

src/lib/components/ui/select/select-scroll-up-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
-	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <SelectPrimitive.ScrollUpButton
 	bind:ref
 	data-slot="select-scroll-up-button"
-	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	class={cn('flex cursor-default items-center justify-center py-1', className)}
 	{...restProps}
 >
 	<ChevronUpIcon class="size-4" />

src/lib/components/ui/select/select-separator.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { Separator as SeparatorPrimitive } from "bits-ui";
-	import { Separator } from "$lib/components/ui/separator/index.js";
-	import { cn } from "$lib/utils.js";
+	import type { Separator as SeparatorPrimitive } from 'bits-ui';
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -13,6 +13,6 @@
 <Separator
 	bind:ref
 	data-slot="select-separator"
-	class={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+	class={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}
 	{...restProps}
 />

src/lib/components/ui/select/select-trigger.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
-	import { cn, type WithoutChild } from "$lib/utils.js";
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { cn, type WithoutChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
-		size = "default",
+		size = 'default',
 		...restProps
 	}: WithoutChild<SelectPrimitive.TriggerProps> & {
-		size?: "sm" | "default";
+		size?: 'sm' | 'default';
 	} = $props();
 </script>
 
@@ -19,7 +19,7 @@
 	data-slot="select-trigger"
 	data-size={size}
 	class={cn(
-		"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
 		className
 	)}
 	{...restProps}

src/lib/components/ui/select/select.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Select as SelectPrimitive } from "bits-ui";
+	import { Select as SelectPrimitive } from 'bits-ui';
 
 	let {
 		open = $bindable(false),

src/lib/components/ui/separator/index.ts

@@ -1,7 +1,7 @@
-import Root from "./separator.svelte";
+import Root from './separator.svelte';
 
 export {
 	Root,
 	//
-	Root as Separator,
+	Root as Separator
 };

src/lib/components/ui/separator/separator.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Separator as SeparatorPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Separator as SeparatorPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		"data-slot": dataSlot = "separator",
+		'data-slot': dataSlot = 'separator',
 		...restProps
 	}: SeparatorPrimitive.RootProps = $props();
 </script>
@@ -14,7 +14,7 @@
 	bind:ref
 	data-slot={dataSlot}
 	class={cn(
-		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:min-h-full data-[orientation=vertical]:w-px",
+		'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:min-h-full data-[orientation=vertical]:w-px',
 		className
 	)}
 	{...restProps}

src/lib/components/ui/slider/index.ts

@@ -1,7 +1,7 @@
-import Root from "./slider.svelte";
+import Root from './slider.svelte';
 
 export {
 	Root,
 	//
-	Root as Slider,
+	Root as Slider
 };

src/lib/components/ui/slider/slider.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Slider as SliderPrimitive } from "bits-ui";
-	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import { Slider as SliderPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
-		orientation = "horizontal",
+		orientation = 'horizontal',
 		class: className,
 		...restProps
 	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
@@ -21,7 +21,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 	data-slot="slider"
 	{orientation}
 	class={cn(
-		"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+		'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
 		className
 	)}
 	{...restProps}
@@ -31,13 +31,13 @@ get along, so we shut typescript up by casting `value` to `never`.
 			data-orientation={orientation}
 			data-slot="slider-track"
 			class={cn(
-				"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+				'relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'
 			)}
 		>
 			<SliderPrimitive.Range
 				data-slot="slider-range"
 				class={cn(
-					"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+					'absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
 				)}
 			/>
 		</span>
@@ -45,7 +45,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 			<SliderPrimitive.Thumb
 				data-slot="slider-thumb"
 				index={thumb}
-				class="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+				class="block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
 			/>
 		{/each}
 	{/snippet}

src/lib/components/ui/tooltip/index.ts

@@ -1,8 +1,8 @@
-import Root from "./tooltip.svelte";
-import Trigger from "./tooltip-trigger.svelte";
-import Content from "./tooltip-content.svelte";
-import Provider from "./tooltip-provider.svelte";
-import Portal from "./tooltip-portal.svelte";
+import Root from './tooltip.svelte';
+import Trigger from './tooltip-trigger.svelte';
+import Content from './tooltip-content.svelte';
+import Provider from './tooltip-provider.svelte';
+import Portal from './tooltip-portal.svelte';
 
 export {
 	Root,
@@ -15,5 +15,5 @@ export {
 	Content as TooltipContent,
 	Trigger as TooltipTrigger,
 	Provider as TooltipProvider,
-	Portal as TooltipPortal,
+	Portal as TooltipPortal
 };

src/lib/components/ui/tooltip/tooltip-content.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Tooltip as TooltipPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
-	import TooltipPortal from "./tooltip-portal.svelte";
-	import type { ComponentProps } from "svelte";
-	import type { WithoutChildrenOrChild } from "$lib/utils.js";
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+	import TooltipPortal from './tooltip-portal.svelte';
+	import type { ComponentProps } from 'svelte';
+	import type { WithoutChildrenOrChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		sideOffset = 0,
-		side = "top",
+		side = 'top',
 		children,
 		arrowClasses,
 		portalProps,
@@ -27,7 +27,7 @@
 		{sideOffset}
 		{side}
 		class={cn(
-			"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--bits-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+			'z-50 w-fit origin-(--bits-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
 			className
 		)}
 		{...restProps}
@@ -37,11 +37,11 @@
 			{#snippet child({ props })}
 				<div
 					class={cn(
-						"bg-foreground z-50 size-2.5 rotate-45 rounded-[2px]",
-						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]",
-						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]",
-						"data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2",
-						"data-[side=left]:-translate-y-[calc(50%_-_3px)]",
+						'z-50 size-2.5 rotate-45 rounded-[2px] bg-foreground',
+						'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]',
+						'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]',
+						'data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2',
+						'data-[side=left]:-translate-y-[calc(50%_-_3px)]',
 						arrowClasses
 					)}
 					{...props}

src/lib/components/ui/tooltip/tooltip-portal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
 
 	let { ...restProps }: TooltipPrimitive.PortalProps = $props();
 </script>

src/lib/components/ui/tooltip/tooltip-provider.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
 
 	let { ...restProps }: TooltipPrimitive.ProviderProps = $props();
 </script>

src/lib/components/ui/tooltip/tooltip-trigger.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
 
 	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
 </script>

src/lib/components/ui/tooltip/tooltip.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
 
 	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
 </script>