save global css panel cursor position

frontend/src/lib/components/SimpleEditor.svelte

@@ -14,7 +14,8 @@
 		Uri as mUri,
 		languages,
 		type IRange,
-		type IDisposable
+		type IDisposable,
+		Position
 	} from 'monaco-editor'
 
 	languages.typescript.javascriptDefaults.setCompilerOptions({
@@ -235,6 +236,13 @@
 		suggestion = value
 	}
 
+	export function setCursorPosition(position: Position): void {
+		if (editor) {
+			editor.setPosition(position)
+			editor.revealPositionInCenterIfOutsideViewport(position)
+		}
+	}
+
 	let disableTabCond: meditor.IContextKey<boolean> | undefined
 
 	$effect(() => {
@@ -394,6 +402,9 @@
 				updateCode()
 			}, 200)
 		})
+		editor.onDidChangeCursorPosition((event) => {
+			dispatch('cursorPositionChange', { position: event.position })
+		})
 
 		editor.onDidFocusEditorText(() => {
 			if (!editor) return

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

@@ -201,6 +201,7 @@
 		allIdsInPath: writable([]),
 		darkMode,
 		cssEditorOpen,
+		globalCssEditorSavedPosition: { val: undefined },
 		previewTheme,
 		debuggingComponents: writable({}),
 		replaceStateFn: replaceStateFn,

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

@@ -14,12 +14,20 @@
 	import ThemeCodePreview from './ThemeCodePreview.svelte'
 	import { sendUserToast } from '$lib/toast'
 
-	const { app } = getContext<AppViewerContext>('AppViewerContext')
+	const { app, globalCssEditorSavedPosition } = getContext<AppViewerContext>('AppViewerContext')
 
-	let cssEditor: SimpleEditor | undefined = undefined
-	let alertHeight: number | undefined = undefined
-	let themeViewer: any = undefined
-	let selectedTab: 'css' | 'theme' = 'css'
+	let cssEditor: SimpleEditor | undefined = $state(undefined)
+	let alertHeight: number | undefined = $state(undefined)
+	let themeViewer: any = $state(undefined)
+	let selectedTab: 'css' | 'theme' = $state('css')
+
+	$effect(() => {
+		if (!cssEditor) return
+		setTimeout(() => {
+			if (globalCssEditorSavedPosition.val)
+				cssEditor?.setCursorPosition(globalCssEditorSavedPosition.val)
+		}, 0)
+	})
 
 	function insertSelector(selector: string) {
 		if ($app?.theme?.type === 'path') {
@@ -80,6 +88,9 @@
 									small
 									automaticLayout
 									bind:this={cssEditor}
+									on:cursorPositionChange={(e) => {
+										globalCssEditorSavedPosition.val = e.detail.position
+									}}
 								/>
 							{:else}
 								<ThemeCodePreview theme={$app.theme}>

frontend/src/lib/components/apps/types.ts

@@ -23,10 +23,11 @@ import type {
 	TemplateV2AppInput,
 	UploadAppInput,
 	UploadS3AppInput,
-	UserAppInput,
+	UserAppInput
 } from './inputType'
 import type { World } from './rx'
 import type { FilledItem } from './svelte-grid/types'
+import type { Position } from 'monaco-editor'
 
 export type HorizontalAlignment = 'left' | 'center' | 'right'
 export type VerticalAlignment = 'top' | 'center' | 'bottom'
@@ -141,13 +142,13 @@ export type HiddenRunnable = {
 
 export type AppTheme =
 	| {
-		type: 'path'
-		path: string
-	}
+			type: 'path'
+			path: string
+	  }
 	| {
-		type: 'inlined'
-		css: string
-	}
+			type: 'inlined'
+			css: string
+	  }
 
 export type App = {
 	grid: GridItem[]
@@ -277,6 +278,7 @@ export type AppViewerContext = {
 	allIdsInPath: Writable<string[]>
 	darkMode: Writable<boolean>
 	cssEditorOpen: Writable<boolean>
+	globalCssEditorSavedPosition: { val: Position | undefined } // Not reactive
 	previewTheme: Writable<string | undefined>
 	debuggingComponents: Writable<Record<string, number>>
 	replaceStateFn?: ((url: string) => void) | undefined