From 277b97ffc36fceb7edfcda13020e5fc80af8cc20 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Wed, 27 Aug 2025 18:32:46 +0000
Subject: [PATCH] schemaToggle

---
 .../lib/components/EditableSchemaForm.svelte  |  3 +-
 .../lib/components/StringTypeNarrowing.svelte | 22 +++--
 frontend/src/lib/components/Toggle.svelte     | 92 ++++++++++++-------
 .../components/schema/PropertyEditor.svelte   | 21 +++--
 .../routes/test_dev/sdk_schema/+page.svelte   |  4 +-
 5 files changed, 90 insertions(+), 52 deletions(-)

diff --git a/frontend/src/lib/components/EditableSchemaForm.svelte b/frontend/src/lib/components/EditableSchemaForm.svelte
index a3dfc5a168..15fca52195 100644
--- a/frontend/src/lib/components/EditableSchemaForm.svelte
+++ b/frontend/src/lib/components/EditableSchemaForm.svelte
@@ -523,7 +523,6 @@
 							<div class="shrink-0">
 								<Toggle
 									bind:checked={jsonView}
-									label="JSON View"
 									size="xs"
 									options={{
 										right: 'JSON editor',
@@ -650,7 +649,7 @@
 															bind:order={schema.properties[argName].order}
 															{isFlowInput}
 															{isAppInput}
-															on:change={() => {
+															onChange={() => {
 																schema = $state.snapshot(schema)
 																dispatch('change', schema)
 															}}
diff --git a/frontend/src/lib/components/StringTypeNarrowing.svelte b/frontend/src/lib/components/StringTypeNarrowing.svelte
index 2f00431b60..7c7db0229e 100644
--- a/frontend/src/lib/components/StringTypeNarrowing.svelte
+++ b/frontend/src/lib/components/StringTypeNarrowing.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
-
 	import type { EnumType } from '$lib/common'
 	import { computeKind } from '$lib/utils'
+	import { untrack } from 'svelte'
 	import Label from './Label.svelte'
 	import ResourceTypePicker from './ResourceTypePicker.svelte'
 	import Toggle from './Toggle.svelte'
@@ -29,6 +28,7 @@
 		enumLabels?: Record<string, string> | undefined
 		overrideAllowKindChange?: boolean
 		originalType?: string | undefined
+		onChange?: () => void
 	}
 
 	let {
@@ -45,7 +45,8 @@
 		dateFormat = $bindable(),
 		enumLabels = $bindable(undefined),
 		overrideAllowKindChange = true,
-		originalType = undefined
+		originalType = undefined,
+		onChange = () => {}
 	}: Props = $props()
 
 	let kind: 'none' | 'pattern' | 'enum' | 'resource' | 'format' | 'base64' | 'date-time' = $state(
@@ -82,18 +83,22 @@
 		['Pattern', 'pattern']
 	]
 
-	run(() => {
+	$effect.pre(() => {
 		format =
-			kind == 'resource' ? (resource != undefined ? `resource-${resource}` : 'resource') : format
+			kind == 'resource'
+				? resource != undefined
+					? `resource-${resource}`
+					: 'resource'
+				: untrack(() => format)
 	})
-	run(() => {
+	$effect.pre(() => {
 		pattern = patternStr == '' ? undefined : patternStr
 	})
-	run(() => {
+	$effect.pre(() => {
 		contentEncoding = kind == 'base64' ? 'base64' : undefined
 	})
 
-	run(() => {
+	$effect.pre(() => {
 		if (format == 'email') {
 			pattern = '^[\\w-+.]+@([\\w-]+\\.)+[\\w-]{2,63}$'
 		}
@@ -369,6 +374,7 @@
 			options={{ right: 'Is Password' }}
 			checked={password}
 			on:change={(e) => {
+				onChange?.()
 				if (e.detail) {
 					password = true
 				} else {
diff --git a/frontend/src/lib/components/Toggle.svelte b/frontend/src/lib/components/Toggle.svelte
index 5d01dca491..06be02e670 100644
--- a/frontend/src/lib/components/Toggle.svelte
+++ b/frontend/src/lib/components/Toggle.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { createBubbler, stopPropagation } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import { classNames } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
@@ -6,35 +9,62 @@
 	import { AlertTriangle } from 'lucide-svelte'
 	import { triggerableByAI } from '$lib/actions/triggerableByAI.svelte'
 
-	export let options: {
-		left?: string
-		leftTooltip?: string
-		right?: string
-		rightTooltip?: string
-		rightDocumentationLink?: string
-	} = {}
-	export let checked: boolean = false
-	export let disabled = false
-	export let textClass = ''
-	export let textStyle = ''
-	export let color: 'blue' | 'red' | 'nord' = 'blue'
-	export let id = (Math.random() + 1).toString(36).substring(10)
-	export let lightMode: boolean = false
-	export let eeOnly: boolean = false
-	export let aiId: string | undefined = undefined
-	export let aiDescription: string | undefined = undefined
-
-	export let size: 'sm' | 'xs' | '2xs' | '2sm' = 'sm'
-
 	const dispatch = createEventDispatcher<{ change: boolean }>()
-	const bothOptions = Boolean(options.left) && Boolean(options.right)
 
-	export let textDisabled = false
+	interface Props {
+		options?: {
+			left?: string
+			leftTooltip?: string
+			right?: string
+			rightTooltip?: string
+			rightDocumentationLink?: string
+		}
+		checked?: boolean | undefined
+		disabled?: boolean
+		textClass?: string
+		textStyle?: string
+		color?: 'blue' | 'red' | 'nord'
+		id?: any
+		lightMode?: boolean
+		eeOnly?: boolean
+		aiId?: string | undefined
+		aiDescription?: string | undefined
+		size?: 'sm' | 'xs' | '2xs' | '2sm'
+		class?: string | undefined
+		textDisabled?: boolean
+		right?: import('svelte').Snippet
+	}
+
+	let {
+		options = {},
+		checked = $bindable(undefined),
+		disabled = false,
+		textClass = '',
+		textStyle = '',
+		color = 'blue',
+		id = (Math.random() + 1).toString(36).substring(10),
+		lightMode = false,
+		eeOnly = false,
+		aiId = undefined,
+		aiDescription = undefined,
+		size = 'sm',
+		class: clazz = undefined,
+		textDisabled = false,
+		right
+	}: Props = $props()
+
+	$effect.pre(() => {
+		if (checked == undefined) {
+			checked = false
+		}
+	})
+
+	const bothOptions = Boolean(options.left) && Boolean(options.right)
 </script>
 
 <label
 	for={id}
-	class="{$$props.class || ''} z-auto flex flex-row items-center duration-50 {disabled
+	class="{clazz || ''} z-auto flex flex-row items-center duration-50 {disabled
 		? 'grayscale opacity-50'
 		: 'cursor-pointer'}"
 >
@@ -55,11 +85,11 @@
 		</span>
 	{/if}
 
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class="relative"
-		on:click|stopPropagation
+		onclick={stopPropagation(bubble('click'))}
 		use:triggerableByAI={{
 			id: aiId,
 			description: aiDescription,
@@ -69,16 +99,16 @@
 		}}
 	>
 		<input
-			on:focus
-			on:click
+			onfocus={bubble('focus')}
+			onclick={bubble('click')}
 			{disabled}
 			type="checkbox"
 			{id}
 			class="sr-only peer"
 			bind:checked
-			on:change|stopPropagation={(e) => {
+			onchange={stopPropagation((e) => {
 				dispatch('change', checked)
-			}}
+			})}
 		/>
 		<div
 			class={classNames(
@@ -116,7 +146,7 @@
 			{/if}
 		</span>
 	{/if}
-	<slot name="right" />
+	{@render right?.()}
 </label>
 {#if eeOnly && disabled}
 	<span class="inline-flex text-xs items-center gap-1 !text-yellow-500 whitespace-nowrap ml-8">
diff --git a/frontend/src/lib/components/schema/PropertyEditor.svelte b/frontend/src/lib/components/schema/PropertyEditor.svelte
index f9435e373a..0b4bba5a4f 100644
--- a/frontend/src/lib/components/schema/PropertyEditor.svelte
+++ b/frontend/src/lib/components/schema/PropertyEditor.svelte
@@ -14,8 +14,7 @@
 	import type { SchemaProperty } from '$lib/common'
 	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
-	import { createEventDispatcher, onMount, untrack } from 'svelte'
-	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
+	import { onMount, untrack } from 'svelte'
 
 	interface Props {
 		description?: string
@@ -45,6 +44,7 @@
 			| undefined
 		typeeditor?: import('svelte').Snippet
 		children?: import('svelte').Snippet
+		onChange?: () => void
 	}
 
 	let {
@@ -66,7 +66,8 @@
 		order = $bindable(),
 		itemsType = $bindable(undefined),
 		typeeditor,
-		children
+		children,
+		onChange = undefined
 	}: Props = $props()
 
 	$effect.pre(() => {
@@ -75,8 +76,6 @@
 		}
 	})
 
-	const dispatch = createEventDispatcher()
-	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
 	let el: HTMLTextAreaElement | undefined = undefined
 
 	let oneOfSelected: string | undefined = $state(
@@ -140,7 +139,8 @@
 		if (!deepEqual(extra, initialExtra)) {
 			initialExtra = structuredClone($state.snapshot(extra))
 			console.debug('property content updated')
-			dispatchIfMounted('change')
+
+			onChange?.()
 		}
 	}
 
@@ -151,7 +151,7 @@
 				order
 			}
 			console.debug('property schema updated')
-			dispatchIfMounted('change')
+			onChange?.()
 		}
 	}
 	$effect(() => {
@@ -177,7 +177,7 @@
 				rows="2"
 				bind:value={description}
 				onkeydown={onKeyDown}
-				onchange={() => dispatch('change')}
+				onchange={onChange}
 				placeholder="Field description"
 			></textarea>
 		</Label>
@@ -188,7 +188,7 @@
 			{/snippet}
 			<input
 				bind:value={title}
-				onchange={() => dispatch('change')}
+				onchange={onChange}
 				onkeydown={onKeyDown}
 				placeholder="Field title"
 			/>
@@ -206,7 +206,7 @@
 				placeholder="Enter a placeholder"
 				rows="1"
 				bind:value={placeholder}
-				onchange={() => dispatch('change')}
+				onchange={onChange}
 				disabled={!shouldDisplayPlaceholder(type, format, enum_, contentEncoding, pattern, extra)}
 			></textarea>
 		</Label>
@@ -236,6 +236,7 @@
 								bind:enumLabels={extra['enumLabels']}
 								originalType={extra['originalType']}
 								overrideAllowKindChange={isFlowInput || isAppInput}
+								{onChange}
 							/>
 						{:else if type == 'number' || type == 'integer'}
 							<NumberTypeNarrowing
diff --git a/frontend/src/routes/test_dev/sdk_schema/+page.svelte b/frontend/src/routes/test_dev/sdk_schema/+page.svelte
index a2e3906fc8..95afe9b3c6 100644
--- a/frontend/src/routes/test_dev/sdk_schema/+page.svelte
+++ b/frontend/src/routes/test_dev/sdk_schema/+page.svelte
@@ -26,4 +26,6 @@
 
 <!-- <ScriptWrapper {script} neverShowMeta={true} {customUi} /> -->
 
-<EditableSchemaSdkWrapper {customUi} {schema} />
+<EditableSchemaSdkWrapper onSchemaChange={(schema) => console.log(schema)} {customUi} {schema} />
+
+{JSON.stringify(schema)}