styling in js mode

frontend/src/lib/components/InputTransformForm.svelte

@@ -38,6 +38,7 @@
 	import FlowPlugConnect from './FlowPlugConnect.svelte'
 	import { deepEqual } from 'fast-equals'
 	import S3ArrayHelperButton from './S3ArrayHelperButton.svelte'
+	import { inputBorderClass } from './text_input/TextInput.svelte'
 
 	interface Props {
 		schema: Schema | { properties?: Record<string, any>; required?: string[] }
@@ -676,7 +677,7 @@
 			<div class="relative flex flex-row items-top gap-2 justify-between">
 				<div class="min-w-0 grow">
 					{#if isStaticTemplate(inputCat) && propertyType == 'static' && !noDynamicToggle}
-						<div class="mt-2 min-h-[28px]">
+						<div class="min-h-[28px]">
 							{#if arg}
 								<TemplateEditor
 									bind:this={monacoTemplate}
@@ -749,13 +750,17 @@
 							/>
 						{/if}
 					{:else if arg.expr != undefined}
-						<div class="border mt-2">
+						<div
+							class={`bg-surface-secondary rounded-md min-h-[18px] pl-4 ${inputBorderClass({ forceFocus: focused })}`}
+						>
 							<SimpleEditor
 								bind:this={monaco}
 								bind:code={arg.expr}
 								{extraLib}
 								lang="javascript"
 								shouldBindKey={false}
+								renderLineHighlight="none"
+								hideLineNumbers
 								on:focus={() => {
 									focused = true
 									focusProp?.(argName, 'insert', (path) => {

frontend/src/lib/components/SimpleEditor.svelte

@@ -88,7 +88,8 @@
 		loadAsync = false,
 		key,
 		disabled = false,
-		minHeight = 1000
+		minHeight = 1000,
+		renderLineHighlight = 'line'
 	}: {
 		lang: string
 		code?: string
@@ -115,6 +116,7 @@
 		key?: string
 		disabled?: boolean
 		minHeight?: number
+		renderLineHighlight?: 'all' | 'line' | 'gutter' | 'none'
 	} = $props()
 
 	const dispatch = createEventDispatcher()
@@ -332,6 +334,11 @@
 					$relativeLineNumbers
 				),
 				model,
+				padding: {
+					bottom: 8,
+					top: 8
+				},
+				renderLineHighlight,
 				lineDecorationsWidth: 6,
 				lineNumbersMinChars: 2,
 				fontSize: fontSize,

frontend/src/lib/components/TemplateEditor.svelte

@@ -665,14 +665,14 @@
 		{code}
 		lineNumbersWidth={14}
 		lineNumbersOffset={-20}
-		class="template nonmain-editor rounded min-h-4 bg-surface-secondary !py-[8px] mx-0.5 overflow-clip"
+		class="template nonmain-editor rounded-md min-h-4 bg-surface-secondary !py-[8px] mx-0.5 overflow-clip"
 	/>
 {/if}
 <div
 	bind:this={divEl}
 	style="height: 18px; padding-left: 8px;"
 	class="{inputBorderClass({ forceFocus: isFocus })} {$$props.class ??
-		''} template nonmain-editor rounded min-h-4 mx-0.5 overflow-clip {!editor ? 'hidden' : ''}"
+		''} template nonmain-editor rounded-md min-h-4 mx-0.5 overflow-clip {!editor ? 'hidden' : ''}"
 	bind:clientWidth={width}
 ></div>
 

frontend/src/lib/components/text_input/TextInput.svelte

@@ -7,13 +7,13 @@
 		forceFocus?: boolean
 	} = {}) {
 		return twMerge(
-			'transition-colors  border',
+			'transition-colors border',
 			forceFocus
 				? '!border-nord-900 dark:!border-nord-900'
 				: '!border-transparent focus:!border-nord-900 dark:focus:!border-nord-900 hover:!border-nord-400 dark:hover:!border-nord-300',
 			error
 				? '!border-red-300 focus:!border-red-400 hover:!border-red-500 dark:!border-red-400/40 dark:hover:!border-red-600/40'
-				: '!border-transparent'
+				: ''
 		)
 	}
 </script>

frontend/src/lib/components/vscode.ts

@@ -245,7 +245,8 @@ export async function initializeVscode(caller?: string, htmlContainer?: HTMLElem
 				rules: [],
 				colors: {
 					'editor.background': '#FFFFFF00',
-					'editorLineNumber.foreground': '#999',
+					'editorLineNumber.foreground': '#C2C9D1',
+					'editorLineNumber.activeForeground': '#989DA5',
 					'editorGutter.background': '#FFFFFF00'
 				}
 			})