ResizeTransitionWrapper

frontend/src/lib/components/InputTransformSchemaForm.svelte

@@ -11,6 +11,7 @@
 	import ItemPicker from './ItemPicker.svelte'
 	import VariableEditor from './VariableEditor.svelte'
 	import { Plus } from 'lucide-svelte'
+	import ResizeTransitionWrapper from './common/ResizeTransitionWrapper.svelte'
 
 	interface Props {
 		schema: Schema | { properties?: Record<string, any> }
@@ -99,7 +100,7 @@
 	{#if keys.length > 0}
 		{#each keys as argName, index (argName)}
 			{#if (!filter || filter.includes(argName)) && Object.keys(schema.properties ?? {}).includes(argName)}
-				<div class="mt-2 relative">
+				<ResizeTransitionWrapper class="mt-2 relative" innerClass="w-full" vertical>
 					<InputTransformForm
 						{previousModuleId}
 						bind:arg={args[argName]}
@@ -116,7 +117,7 @@
 						{pickableProperties}
 						{enableAi}
 					/>
-				</div>
+				</ResizeTransitionWrapper>
 			{/if}
 		{/each}
 	{:else}

frontend/src/lib/components/common/ResizeTransitionWrapper.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { twMerge } from 'tailwind-merge'
+
+	type Props = {
+		children: import('svelte').Snippet
+		innerClass?: string
+		class?: string
+		horizontal?: boolean
+		vertical?: boolean
+	}
+	let { children, innerClass, class: className = '', horizontal, vertical }: Props = $props()
+
+	let innerContainer: HTMLElement | null = $state(null)
+	let outerContainer: HTMLElement | null = $state(null)
+
+	let width: number | null = $state(null)
+	let height: number | null = $state(null)
+
+	let style = $derived.by(() => {
+		let s = 'transition: width 0.2s, height 0.2s; overflow: clip;'
+		if (width !== null) s += `width: ${width}px;`
+		if (height !== null) s += `height: ${height}px;`
+		return s
+	})
+
+	$effect(() => {
+		if (!innerContainer || !outerContainer) return
+		let observer = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				if (horizontal) width = entry.contentRect.width
+				if (vertical) height = entry.contentRect.height
+			}
+		})
+		observer.observe(innerContainer)
+		return () => {
+			if (innerContainer) observer.unobserve(innerContainer)
+			observer.disconnect()
+		}
+	})
+</script>
+
+<div bind:this={outerContainer} class={className} {style}>
+	<div class={twMerge('absolute', innerClass)} bind:this={innerContainer}>
+		{@render children()}
+	</div>
+</div>