fix

src/lib/components/flow/FitViewOnResize.svelte

@@ -64,11 +64,16 @@
 
 	function doFitView(opts?: { animate?: boolean; forceAnimate?: boolean }) {
 		if (!viewState.draggable) return;
+		const nodes = nodesStore.current;
+		if (nodes.length === 0) return;
+
 		const shouldAnimate = opts?.forceAnimate || (opts?.animate !== false && !isFirstLayout);
 		fitView({
+			maxZoom: breakpointsState.isMobile ? 1 : 1.15,
+			minZoom: breakpointsState.isMobile ? 1 : 0.7,
 			padding: 0.15,
 			...(shouldAnimate ? { interpolate: 'smooth' as const, duration: 250 } : {}),
-			nodes: nodesStore.current
+			nodes: nodes.map((n) => ({ id: n.id }))
 		});
 	}
 
@@ -381,8 +386,13 @@
 		}
 
 		if (viewState.draggable) {
-			doFitView();
-			isFirstLayout = false;
+			// Defer so layout is applied and nodes are measured before fitting
+			tick().then(() => {
+				requestAnimationFrame(() => {
+					doFitView();
+					isFirstLayout = false;
+				});
+			});
 		}
 	}
 </script>

src/lib/components/flow/actions/PanelCanvasActions.svelte

@@ -1,12 +1,21 @@
 <script lang="ts">
-	import { Maximize, Minus, Plus, Move, MousePointer } from '@lucide/svelte';
-	import { Panel, useNodes } from '@xyflow/svelte';
+	import { Maximize, Minus, Plus, MousePointer, HandGrab, Spotlight } from '@lucide/svelte';
+	import { Panel } from '@xyflow/svelte';
 
 	import { Button } from '$lib/components/ui/button';
 	import { viewState } from '$lib/state/view.svelte';
 	import { useSvelteFlow } from '@xyflow/svelte';
+	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
 
 	const { fitView, zoomIn, zoomOut, getZoom } = useSvelteFlow();
+
+	$effect(() => {
+		localStorage.setItem('hf-playground-draggable-option', viewState.draggable.toString());
+	});
+
+	function handleDraggable() {
+		viewState.draggable = !viewState.draggable;
+	}
 </script>
 
 <Panel position="bottom-center" class="flex items-center justify-start gap-2 p-1 lg:p-2">
@@ -45,19 +54,33 @@
 	<div
 		class="inline-flex w-fit flex-row gap-0.5 rounded-lg border border-border bg-background/30 p-1 backdrop-blur-sm dark:bg-gray-900/30"
 	>
-		<Button
-			variant={!viewState.draggable ? 'default' : 'ghost'}
-			size="icon-sm"
-			onclick={() => (viewState.draggable = false)}
-		>
-			<MousePointer />
-		</Button>
-		<Button
-			variant={viewState.draggable ? 'default' : 'ghost'}
-			size="icon-sm"
-			onclick={() => (viewState.draggable = true)}
-		>
-			<Move />
-		</Button>
+		<Tooltip.Root>
+			<Tooltip.Trigger>
+				<Button
+					variant={!viewState.draggable ? 'default' : 'ghost'}
+					size="icon-sm"
+					onclick={handleDraggable}
+				>
+					<MousePointer />
+				</Button>
+			</Tooltip.Trigger>
+			<Tooltip.Content>
+				<p class="flex items-center gap-1"><MousePointer class="size-3.5" /> Free mode</p>
+			</Tooltip.Content>
+		</Tooltip.Root>
+		<Tooltip.Root>
+			<Tooltip.Trigger>
+				<Button
+					variant={viewState.draggable ? 'default' : 'ghost'}
+					size="icon-sm"
+					onclick={handleDraggable}
+				>
+					<Spotlight />
+				</Button>
+			</Tooltip.Trigger>
+			<Tooltip.Content>
+				<p class="flex items-center gap-1"><Spotlight class="size-3.5" /> Spotlight mode</p>
+			</Tooltip.Content>
+		</Tooltip.Root>
 	</div>
 </Panel>

src/lib/components/model/SettingsModel.svelte

@@ -61,7 +61,9 @@
 						<h4 class="text-sm leading-none font-medium">Temperature</h4>
 						<div class="flex items-center gap-1">
 							{#if temperature === undefined}
-								<Button variant="blue" size="2xs" onclick={() => (temperature = 0.5)}>Set</Button>
+								<Button variant="outline-blue" size="2xs" onclick={() => (temperature = 0.5)}
+									>Set</Button
+								>
 							{:else}
 								<Input
 									type="number"
@@ -94,7 +96,9 @@
 						<h4 class="text-sm leading-none font-medium">Max Tokens</h4>
 						<div class="flex items-center gap-1">
 							{#if max_tokens === undefined}
-								<Button variant="blue" size="2xs" onclick={() => (max_tokens = 32000)}>Set</Button>
+								<Button variant="outline-blue" size="2xs" onclick={() => (max_tokens = 32000)}
+									>Set</Button
+								>
 							{:else}
 								<Input
 									type="number"
@@ -128,7 +132,7 @@
 						<h4 class="text-sm leading-none font-medium">Top-P</h4>
 						<div class="flex items-center gap-1">
 							{#if top_p === undefined}
-								<Button variant="blue" size="2xs" onclick={() => (top_p = 0.7)}>Set</Button>
+								<Button variant="outline-blue" size="2xs" onclick={() => (top_p = 0.7)}>Set</Button>
 							{:else}
 								<Input
 									type="number"

src/lib/components/ui/button/button.svelte

@@ -18,9 +18,11 @@
 				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs',
 				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
 				link: 'text-primary underline-offset-4 hover:underline',
-				blue: 'bg-blue-500/10 text-blue-500 border border-blue-500/20 hover:bg-blue-500/20 shadow-xs',
+				'outline-blue':
+					'bg-blue-500/10 text-blue-500 border border-blue-500/20 hover:bg-blue-500/20 shadow-xs',
 				'outline-destructive':
-					'bg-rose-500/10 hover:bg-rose-500/20 text-rose-600 border border-rose-500/20 shadow-xs'
+					'bg-rose-500/10 hover:bg-rose-500/20 text-rose-600 border border-rose-500/20 shadow-xs',
+				amber: 'bg-amber-500 text-white hover:brightness-110 shadow-xs'
 			},
 			size: {
 				default: 'h-9 px-4 py-2 has-[>svg]:px-3',

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

@@ -0,0 +1,19 @@
+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,
+	Trigger,
+	Content,
+	Provider,
+	Portal,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+	Provider as TooltipProvider,
+	Portal as TooltipPortal,
+};

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

@@ -0,0 +1,52 @@
+<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";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 0,
+		side = "top",
+		children,
+		arrowClasses,
+		portalProps,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		arrowClasses?: string;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+	} = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{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",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#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)]",
+						arrowClasses
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPortal>

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

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

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

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

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />

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

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

src/lib/state/view.svelte.ts

@@ -1,4 +1,3 @@
 export const viewState = $state({
-	freeView: false,
-	draggable: true
+	draggable: localStorage.getItem('hf-playground-draggable-option') === 'true' ? true : false
 });

src/routes/+layout.svelte

@@ -4,12 +4,11 @@
 
 	import './layout.css';
 	import HuggingFaceLogo from '$lib/assets/hf-logo.svg';
-	import { fetchModels, modelsState } from '$lib/state/models.svelte';
-	import MainLoading from '$lib/components/loading/MainLoading.svelte';
+	import { fetchModels } from '$lib/state/models.svelte';
 	import { breakpointsState } from '$lib/state/breakpoints.svelte';
-	import { initAuth, handleAuthCallback, authState } from '$lib/state/auth.svelte';
+	import { initAuth, handleAuthCallback } from '$lib/state/auth.svelte';
 	import SigninModal from '$lib/components/auth/SigninModal.svelte';
-
+	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
 	interface Props {
 		children?: import('svelte').Snippet;
 	}
@@ -47,7 +46,9 @@
 			<MainLoading />
 		{:else}
 		{/if} -->
-		{@render children?.()}
+		<Tooltip.Provider>
+			{@render children?.()}
+		</Tooltip.Provider>
 		<SigninModal />
 	</div>
 </svelte:boundary>

src/routes/+page.svelte

@@ -93,7 +93,7 @@
 			patternColor={mode.current === 'dark' ? 'rgba(255, 255, 255, 0.04)' : 'rgba(0, 0, 0, 0.04)'}
 			class="bg-background!"
 		/>
-		<PanelLeftMenu />
+		<!-- <PanelLeftMenu /> -->
 		<PanelRightActions canReset={nodes.length > 1} />
 		<PanelCanvasActions />
 	</SvelteFlow>