improve drag for apps

frontend/src/lib/components/apps/components/buttons/AppForm.svelte

@@ -30,7 +30,7 @@
 		loading: Output<boolean>
 	}
 
-	let labelValue: string = 'Default label'
+	let labelValue: string = ''
 	let color: ButtonType.Color
 	let size: ButtonType.Size
 	let runnableComponent: RunnableComponent

frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte

@@ -33,7 +33,7 @@
 		loading: Output<boolean>
 	}
 
-	let labelValue: string = 'Default label'
+	let labelValue: string = ''
 	let color: ButtonType.Color
 	let size: ButtonType.Size
 	let runnableComponent: RunnableComponent

frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte

@@ -19,7 +19,7 @@
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	let defaultValue: boolean | undefined = undefined
-	let labelValue: string = 'Default label'
+	let labelValue: string = ''
 
 	// As the checkbox is a special case and has no input
 	// we need to manually set the output

frontend/src/lib/components/apps/editor/AppEditorHeader.svelte

@@ -541,7 +541,7 @@
 		<div class="hidden lg:block">
 			<Badge color="indigo">
 				<div class="flex flex-row gap-2 justify-center items-center">
-					<div>{`Sub grid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
+					<div>{`Subgrid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
 					<button
 						on:click={() => {
 							$selectedComponent = undefined

frontend/src/lib/components/apps/editor/GridEditor.svelte

@@ -93,7 +93,7 @@
 	<div
 		style={$app.css?.['app']?.['grid']?.style}
 		class={twMerge('px-4 pt-4 pb-2 overflow-visible', $app.css?.['app']?.['grid']?.class ?? '')}
-		on:click={() => {
+		on:pointerdown={() => {
 			$selectedComponent = undefined
 			$focusedGrid = undefined
 		}}

frontend/src/lib/components/apps/editor/componentsPanel/ComponentList.svelte

@@ -14,6 +14,7 @@
 	import { X } from 'lucide-svelte'
 	import { push } from '$lib/history'
 	import { flip } from 'svelte/animate'
+	import { Badge } from '$lib/components/common'
 
 	const { app, selectedComponent, focusedGrid, worldStore } =
 		getContext<AppViewerContext>('AppViewerContext')
@@ -63,6 +64,21 @@
 			</button>
 		{/if}
 	</div>
+	<!-- {#if $focusedGrid}
+		<Badge color="indigo" baseClass="w-full">
+			<div class="flex flex-row gap-2 justify-center items-center">
+				<div>{`Subgrid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
+				<button
+					on:click={() => {
+						$selectedComponent = undefined
+						$focusedGrid = undefined
+					}}
+				>
+					<X size={14} />
+				</button>
+			</div>
+		</Badge>
+	{/if} -->
 </section>
 
 <div class="relative">

frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte

@@ -143,27 +143,28 @@
 		}
 	}
 
-	let startDrag: NodeJS.Timeout | undefined = undefined
+	let dragClosure: (() => void) | undefined = undefined
 	const pointerdown = ({ clientX, clientY, target }) => {
-		initX = clientX
-		initY = clientY
+		dragClosure = () => {
+			dragClosure = undefined
 
-		capturePos = { x: left, y: top }
-		shadow = { x: item.x, y: item.y, w: item.w, h: item.h }
-		newSize = { width, height }
+			initX = clientX
+			initY = clientY
 
-		containerFrame = getContainerFrame(container)
-		scrollElement = getScroller(container)
+			capturePos = { x: left, y: top }
+			shadow = { x: item.x, y: item.y, w: item.w, h: item.h }
+			newSize = { width, height }
 
-		cordDiff = { x: 0, y: 0 }
+			containerFrame = getContainerFrame(container)
+			scrollElement = getScroller(container)
+
+			cordDiff = { x: 0, y: 0 }
 
-		startDrag = setTimeout(() => {
 			active = true
 			trans = false
 			computeRect(target)
-		}, 200)
-		_scrollTop = scrollElement.scrollTop
-
+			_scrollTop = scrollElement.scrollTop
+		}
 		window.addEventListener('pointermove', pointermove)
 		window.addEventListener('pointerup', pointerup)
 	}
@@ -196,6 +197,7 @@
 	}
 
 	const pointermove = (event) => {
+		dragClosure && dragClosure()
 		event.preventDefault()
 		event.stopPropagation()
 		event.stopImmediatePropagation()
@@ -231,6 +233,7 @@
 	}
 
 	const pointerup = (e) => {
+		dragClosure = undefined
 		stopAutoscroll()
 
 		window.removeEventListener('pointerdown', pointerdown)
@@ -280,8 +283,6 @@
 			// Limit bound
 			newSize.width = Math.min(newSize.width, maxWidth * xPerPx - gapX * 2)
 
-			newSize.height = newSize.height
-
 			// Limit col & row
 			shadow.w = Math.round((newSize.width + gapX * 2) / xPerPx)
 			shadow.h = Math.round((newSize.height + gapY * 2) / yPerPx)
@@ -303,9 +304,6 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
 	draggable="false"
-	on:click|stopPropagation={() => {
-		startDrag && clearTimeout(startDrag)
-	}}
 	on:pointerdown|stopPropagation|preventDefault={pointerdown}
 	class="svlt-grid-item"
 	class:svlt-grid-active={active || (trans && rect)}