windmill-components 1.623.2 → 1.655.0

package/package/components/InstanceSettings.svelte.d.ts

@@ -1,8 +1,12 @@
 interface Props {
     tab?: string;
     hideTabs?: boolean;
-    hideSave?: boolean;
     closeDrawer?: (() => void) | undefined;
+    authSubTab?: 'sso' | 'oauth' | 'scim';
+    onNavigateToTab?: (category: string) => void;
+    quickSetup?: boolean;
+    yamlMode?: boolean;
+    hasUnsavedChanges?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -22,7 +26,18 @@ declare const InstanceSettings: $$__sveltets_2_IsomorphicComponent<Props, {
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
+    getVersion: () => string;
+    getLicenseKey: () => string;
     saveSettings: () => Promise<void>;
-}, "tab">;
+    isDirty: (category: string) => boolean;
+    discardCategory: (category: string) => void;
+    discardAll: () => void;
+    saveCategorySettings: (category: string) => Promise<void>;
+    syncBeforeDiff: () => boolean;
+    buildFullDiff: () => {
+        original: string;
+        modified: string;
+    };
+}, "tab" | "hasUnsavedChanges" | "authSubTab" | "yamlMode">;
 type InstanceSettings = InstanceType<typeof InstanceSettings>;
 export default InstanceSettings;

package/package/components/IntegerInput.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">import TextInput from './text_input/TextInput.svelte';
+import { untrack } from 'svelte';
+let { value, oninput, placeholder, id, disabled, error = '', class: className = '', size } = $props();
+let displayValue = $state('');
+$effect(() => {
+    const incoming = value;
+    const current = String(untrack(() => displayValue));
+    const currentNum = current === '' ? undefined : Number(current);
+    if (incoming !== currentNum) {
+        displayValue = incoming != null ? String(incoming) : '';
+    }
+});
+function handleKeydown(e) {
+    if (e.ctrlKey || e.metaKey)
+        return;
+    if (!/[0-9]/.test(e.key) &&
+        ![
+            'Backspace',
+            'Delete',
+            'ArrowLeft',
+            'ArrowRight',
+            'ArrowUp',
+            'ArrowDown',
+            'Tab',
+            'Enter'
+        ].includes(e.key)) {
+        e.preventDefault();
+    }
+}
+function handleInput(e) {
+    if (e.target instanceof HTMLInputElement) {
+        const raw = e.target.value.replace(/[^0-9]/g, '');
+        e.target.value = raw;
+        displayValue = raw;
+        if (raw === '') {
+            oninput?.(undefined);
+            return;
+        }
+        oninput?.(Number(raw));
+    }
+}
+</script>
+
+<TextInput
+	{size}
+	class={className}
+	{error}
+	value={displayValue}
+	inputProps={{
+		type: 'number',
+		inputmode: 'numeric',
+		placeholder,
+		id,
+		disabled,
+		onkeydown: handleKeydown,
+		oninput: handleInput
+	}}
+/>

package/package/components/IntegerInput.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ButtonType } from './common/button/model';
+interface Props {
+    value?: number;
+    oninput?: (value: number | undefined) => void;
+    placeholder?: string;
+    id?: string;
+    disabled?: boolean;
+    error?: string;
+    class?: string;
+    size?: ButtonType.UnifiedSize;
+}
+declare const IntegerInput: import("svelte").Component<Props, {}, "">;
+type IntegerInput = ReturnType<typeof IntegerInput>;
+export default IntegerInput;

package/package/components/InviteGlobalUser.svelte

@@ -2,13 +2,15 @@
 import { createEventDispatcher } from 'svelte';
 import { UserService } from '../gen';
 import { Button } from './common';
+import TextInput from './text_input/TextInput.svelte';
 import Toggle from './Toggle.svelte';
 import { generateRandomString } from '../utils';
 import { globalEmailInvite } from '../stores';
+let { close = undefined } = $props();
 const dispatch = createEventDispatcher();
-let is_super_admin = false;
-let password = generateRandomString(10);
-let name;
+let is_super_admin = $state(false);
+let password = $state(generateRandomString(10));
+let name = $state();
 let company;
 async function addUser() {
     await UserService.createUserGlobally({
@@ -24,37 +26,35 @@ async function addUser() {
     $globalEmailInvite = '';
     password = generateRandomString(10);
     dispatch('new');
+    close?.();
 }
 </script>
 
-<h3 class="text-sm font-semibold text-emphasis">Add new user to instance</h3>
-<div class="flex flex-row flex-wrap gap-2 mb-2 items-end">
-	<label class="block shrink min-w-0">
+<div class="p-4 flex flex-col gap-3 w-80">
+	<h3 class="text-sm font-semibold text-emphasis">Add new user to instance</h3>
+	<label class="block">
 		<span class="text-xs font-semibold text-emphasis">Email</span>
-		<input type="email" placeholder="email" bind:value={$globalEmailInvite} />
+		<TextInput
+			inputProps={{ type: 'email', placeholder: 'email' }}
+			bind:value={$globalEmailInvite}
+		/>
 	</label>
-	<label class="block shrink min-w-0">
+	<label class="block">
 		<span class="text-xs font-semibold text-emphasis">Password</span>
-		<input bind:value={password} />
+		<TextInput bind:value={password} />
 	</label>
-	<div>
+	<label class="block">
 		<span class="text-xs font-semibold text-emphasis">Name (optional)</span>
-		<input type="text" placeholder="name (optional)" bind:value={name} />
-	</div>
-	<Toggle class="mx-2 mb-1" bind:checked={is_super_admin} options={{ right: 'Superadmin' }} />
-	<div class="flex flex-row-reverse grow">
-		<div class="flex">
-			<Button
-				variant="accent"
-				size="sm"
-				on:click={addUser}
-				disabled={$globalEmailInvite == '' || password == undefined}
-			>
-				Add user to instance
-			</Button>
-		</div>
-	</div>
-</div>
-<div class="flex gap-2 items-end">
-	<div class="text-2xs text-secondary grow text-right"> Email will be sent if SMTP configured </div>
+		<TextInput inputProps={{ type: 'text', placeholder: 'name (optional)' }} bind:value={name} />
+	</label>
+	<Toggle bind:checked={is_super_admin} options={{ right: 'Superadmin' }} />
+	<Button
+		variant="accent"
+		size="sm"
+		on:click={addUser}
+		disabled={$globalEmailInvite == '' || password == undefined}
+	>
+		Add user to instance
+	</Button>
+	<div class="text-2xs text-secondary text-right">Email will be sent if SMTP configured</div>
 </div>

package/package/components/InviteGlobalUser.svelte.d.ts

@@ -1,8 +1,11 @@
+interface Props {
+    close?: (() => void) | undefined;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,10 +14,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const InviteGlobalUser: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const InviteGlobalUser: $$__sveltets_2_IsomorphicComponent<Props, {
     new: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type InviteGlobalUser = InstanceType<typeof InviteGlobalUser>;
 export default InviteGlobalUser;

package/package/components/JobArgs.svelte

@@ -53,21 +53,25 @@ ${Object.entries(args)
 	>.
 {:else}
 	<div class="relative">
-		<DataTable size="sm">
+		<DataTable size="sm" containerClass="bg-surface-tertiary">
 			<Head>
 				<tr class="w-full">
-					<Cell head first>{argLabel ?? 'Arg'}</Cell>
+					<Cell head first>{argLabel ?? 'Input'}</Cell>
 					<Cell head last>Value</Cell>
 				</tr>
 				{#snippet headerAction()}
-					<button
-						onclick={() => {
-							jsonStr = JSON.stringify(args, null, 4)
-							jsonViewer?.openDrawer()
-						}}
-					>
-						<Expand size={18} />
-					</button>
+					<div class="center-center -m-1">
+						<Button
+							unifiedSize="md"
+							variant="subtle"
+							onClick={() => {
+								jsonStr = JSON.stringify(args, null, 4)
+								jsonViewer?.openDrawer()
+							}}
+							iconOnly
+							startIcon={{ icon: Expand }}
+						></Button>
+					</div>
 				{/snippet}
 			</Head>
 

package/package/components/JobLoader.svelte

@@ -7,6 +7,7 @@ import { workspaceStore } from '../stores';
 import { getContext, onDestroy, tick, untrack } from 'svelte';
 import { sendUserToast } from '../toast';
 import { DynamicInput, isScriptPreview } from '../utils';
+import { getActiveRecording, getActiveReplay, getReplayStartTime } from './recording/flowRecording.svelte';
 let { isLoading = $bindable(false), job = $bindable(undefined), noCode = false, allowConcurentRequests = false, workspaceOverride = undefined, notfound = $bindable(false), jobUpdateLastFetch = $bindable(undefined), toastError = false, onlyResult = false, loadPlaceholderJobOnStart = undefined, scriptProgress = $bindable(undefined), noLogs = false, children } = $props();
 let workspace = $derived(workspaceOverride ?? $workspaceStore);
 let syncIteration = 0;
@@ -20,7 +21,7 @@ let ITERATIONS_BEFORE_SUPER_SLOW_REFRESH = 100;
 let lastStartedAt = Date.now();
 let currentId = $state(undefined);
 let noPingTimeout = undefined;
-let lastNoLogs = $state(noLogs);
+let lastNoLogs = $state(untrack(() => noLogs));
 let lastCompletedJobId = $state(undefined);
 let token = getContext('AuthToken');
 $effect(() => {
@@ -126,13 +127,14 @@ export async function runFlowByPath(path, args, callbacks) {
         skipPreprocessor: true
     }), callbacks);
 }
-export async function runFlowPreview(args, flow, callbacks) {
+export async function runFlowPreview(args, flow, callbacks, path) {
     return abstractRun(() => JobService.runFlowPreview({
         workspace: $workspaceStore,
         requestBody: {
             args,
             value: flow.value,
-            tag: flow.tag
+            tag: flow.tag,
+            path
         }
     }), callbacks);
 }
@@ -162,7 +164,7 @@ export async function runDynamicInputScript(entrypoint_function, runnable_ref, a
         requestBody: { entrypoint_function, args, runnable_ref }
     }), callbacks);
 }
-export async function runPreview(path, code, lang, args, tag, lock, hash, callbacks) {
+export async function runPreview(path, code, lang, args, tag, lock, hash, callbacks, flowPath) {
     return abstractRun(() => JobService.runScriptPreview({
         workspace: $workspaceStore,
         requestBody: {
@@ -172,7 +174,8 @@ export async function runPreview(path, code, lang, args, tag, lock, hash, callba
             language: lang,
             tag,
             lock,
-            script_hash: hash
+            script_hash: hash,
+            flow_path: flowPath
         }
     }), callbacks);
 }
@@ -210,6 +213,7 @@ function supportsSSE() {
     }
     return sseSupported;
 }
+let replayTimeouts = [];
 let startedWatchingJob = undefined;
 export async function watchJob(testId, callbacks) {
     logOffset = 0;
@@ -218,6 +222,50 @@ export async function watchJob(testId, callbacks) {
     errorIteration = 0;
     currentId = testId;
     scriptProgress = undefined;
+    // Replay mode: feed recorded events instead of real SSE
+    const replay = getActiveReplay();
+    if (replay) {
+        const recorded = replay.jobs[testId];
+        if (recorded) {
+            job = JSON.parse(JSON.stringify(recorded.initial_job));
+            callbacks?.change?.(job);
+            // Compute delays relative to replay start so sub-jobs (discovered
+            // later by FlowStatusViewerInner) stay in sync with the root job.
+            const elapsed = Date.now() - getReplayStartTime();
+            for (const event of recorded.events) {
+                const delay = Math.max(0, event.t - elapsed);
+                const timeout = setTimeout(() => {
+                    if (job) {
+                        updateJobFromProgress(event.data, job, callbacks);
+                    }
+                    if (event.data.completed) {
+                        const njob = event.data.job;
+                        if (njob) {
+                            // Use whichever logs are more complete (longer)
+                            const streamedLogs = job?.logs ?? '';
+                            const completedLogs = njob.logs ?? '';
+                            njob.logs =
+                                streamedLogs.length >= completedLogs.length ? streamedLogs : completedLogs;
+                            const streamedResult = job?.result_stream ?? '';
+                            const completedResult = njob.result_stream ?? '';
+                            njob.result_stream =
+                                streamedResult.length >= completedResult.length ? streamedResult : completedResult;
+                            job = njob;
+                            onJobCompleted(testId, job, callbacks);
+                        }
+                    }
+                }, delay);
+                replayTimeouts.push(timeout);
+            }
+            return;
+        }
+        // Job not in recording — stub it to prevent API calls
+        const stubJob = { id: testId, type: 'CompletedJob', success: true };
+        job = stubJob;
+        callbacks?.change?.(stubJob);
+        clearCurrentId();
+        return;
+    }
     if (loadPlaceholderJobOnStart) {
         job = structuredClone(loadPlaceholderJobOnStart);
     }
@@ -415,6 +463,7 @@ async function loadTestJobWithSSE(id, attempt, callbacks) {
                     noCode
                 });
                 callbacks?.change?.(job);
+                getActiveRecording()?.recordInitialJob(id, job);
             }
             if (!onlyResult) {
                 callbacks?.resultStreamUpdate?.({
@@ -507,6 +556,7 @@ async function loadTestJobWithSSE(id, attempt, callbacks) {
                             throw new Error('Not found');
                         }
                         jobUpdateLastFetch = new Date();
+                        getActiveRecording()?.recordEvent(id, previewJobUpdates);
                         if (job) {
                             updateJobFromProgress(previewJobUpdates, job, callbacks);
                         }
@@ -627,6 +677,8 @@ onDestroy(async () => {
     clearCurrentId();
     currentEventSource?.close();
     currentEventSource = undefined;
+    replayTimeouts.forEach(clearTimeout);
+    replayTimeouts = [];
 });
 </script>
 

package/package/components/JobLoader.svelte.d.ts

@@ -56,10 +56,10 @@ declare const JobLoader: import("svelte").Component<Props, {
     runFlowByPath: (path: string, args: Record<string, any>, callbacks?: Callbacks) => Promise<string>;
     runFlowPreview: (args: Record<string, any>, flow: OpenFlow & {
         tag?: string;
-    }, callbacks?: Callbacks) => Promise<string>;
+    }, callbacks?: Callbacks, path?: string) => Promise<string>;
     getLogs: () => Promise<void>;
     runDynamicInputScript: (entrypoint_function: string, runnable_ref: DynamicInput.HelperScript, args: Record<string, any>, callbacks?: Callbacks) => Promise<string>;
-    runPreview: (path: string | undefined, code: string, lang: SupportedLanguage | undefined, args: Record<string, any>, tag: string | undefined, lock?: string, hash?: string, callbacks?: Callbacks) => Promise<string>;
+    runPreview: (path: string | undefined, code: string, lang: SupportedLanguage | undefined, args: Record<string, any>, tag: string | undefined, lock?: string, hash?: string, callbacks?: Callbacks, flowPath?: string) => Promise<string>;
     cancelJob: () => Promise<void>;
     clearCurrentJob: () => Promise<void>;
     watchJob: (testId: string, callbacks?: Callbacks) => Promise<void>;

package/package/components/JobStatus.svelte

@@ -1,37 +1,40 @@
-<script lang="ts">import { displayDate } from '../utils';
+<script lang="ts">import { displayDate, msToReadableTime } from '../utils';
 import Badge from './common/badge/Badge.svelte';
 import { forLater } from '../forLater';
-import DurationMs from './DurationMs.svelte';
-import { Calendar, CheckCircle2, Circle, Clock, Hourglass, Play, XCircle } from 'lucide-svelte';
+import { Circle } from 'lucide-svelte';
 import NoWorkerWithTagWarning from './runs/NoWorkerWithTagWarning.svelte';
 import QueuePosition from './QueuePosition.svelte';
+import WaitTimeWarning from './common/waitTimeWarning/WaitTimeWarning.svelte';
 const SMALL_ICON_SIZE = 12;
-let { job } = $props();
+let { job, large = false } = $props();
 </script>
 
 {#if job && 'success' in job && job.success}
-	<div class="flex flex-row flex-wrap gap-y-1 mb-1 gap-x-2">
-		<Badge large color="green" icon={{ icon: CheckCircle2, position: 'left' }}>
-			Success {job.is_skipped ? '(Skipped)' : ''}
-		</Badge>
-		<DurationMs
-			duration_ms={job.duration_ms}
-			self_wait_time_ms={job?.self_wait_time_ms}
-			aggregate_wait_time_ms={job?.aggregate_wait_time_ms}
-		/>
-	</div>
+	<Badge {large} color="green">
+		Successfully ran in {msToReadableTime(job.duration_ms)}
+		{job.is_skipped ? '(Skipped)' : ''}
+		{#if job.self_wait_time_ms || job.aggregate_wait_time_ms}
+			<WaitTimeWarning
+				self_wait_time_ms={job.self_wait_time_ms}
+				aggregate_wait_time_ms={job.aggregate_wait_time_ms}
+				variant="alert"
+			/>
+		{/if}
+	</Badge>
 {:else if job && 'success' in job}
-	<div class="flex flex-row flex-wrap gap-y-1 mb-1 gap-x-2">
-		<Badge large color="red" icon={{ icon: XCircle, position: 'left' }}>Failed</Badge>
-		<DurationMs
-			duration_ms={job.duration_ms}
-			self_wait_time_ms={job?.self_wait_time_ms}
-			aggregate_wait_time_ms={job?.aggregate_wait_time_ms}
-		/>
-	</div>
+	<Badge {large} color="red">
+		Failed after {msToReadableTime(job.duration_ms)}
+		{#if job.self_wait_time_ms || job.aggregate_wait_time_ms}
+			<WaitTimeWarning
+				self_wait_time_ms={job.self_wait_time_ms}
+				aggregate_wait_time_ms={job.aggregate_wait_time_ms}
+				variant="alert"
+			/>
+		{/if}
+	</Badge>
 {:else if job && 'running' in job && job.running && job.suspend}
 	<div>
-		<Badge large color="violet" icon={{ icon: Hourglass, position: 'left' }}>
+		<Badge {large} color="violet">
 			Suspended
 			{#if job.flow_status}
 				({(job.flow_status?.step ?? 0) + 1} of {job.raw_flow?.modules?.length ?? '?'})
@@ -40,7 +43,7 @@ let { job } = $props();
 	</div>
 {:else if job && 'running' in job && job.running}
 	<div>
-		<Badge large color="yellow" icon={{ icon: Play, position: 'left' }}>
+		<Badge {large} color="yellow">
 			Running
 			{#if job.flow_status}
 				({(job.flow_status?.step ?? 0) + 1} of {job.raw_flow?.modules?.length ?? '?'})
@@ -49,13 +52,13 @@ let { job } = $props();
 	</div>
 {:else if job && 'running' in job && 'scheduled_for' in job && job.scheduled_for && forLater(job.scheduled_for)}
 	<div>
-		<Badge color="blue" icon={{ icon: Calendar, position: 'left' }}>
+		<Badge color="blue" {large}>
 			Scheduled for {displayDate(job.scheduled_for)}
 		</Badge>
 	</div>
 {:else if job && 'running' in job}
 	<div class="flex flex-row gap-1 items-center">
-		<Badge color="orange" icon={{ icon: Clock, position: 'left' }}>Queued</Badge>
+		<Badge color="orange" {large}>Queued</Badge>
 		<NoWorkerWithTagWarning tag={job.tag} />
 		<QueuePosition jobId={job.id} workspaceId={job.workspace_id} minimal />
 	</div>

package/package/components/JobStatus.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { CompletedJob, QueuedJob } from '../gen';
 interface Props {
     job: QueuedJob | CompletedJob | undefined;
+    large?: boolean;
 }
 declare const JobStatus: import("svelte").Component<Props, {}, "">;
 type JobStatus = ReturnType<typeof JobStatus>;

package/package/components/KanidmSetting.svelte

@@ -1,17 +1,11 @@
-<script lang="ts">import IconedResourceType from './IconedResourceType.svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
 import Toggle from './Toggle.svelte';
-export let value;
+import SettingCard from './instanceSettings/SettingCard.svelte';
+let { value = $bindable() } = $props();
 const AUTH_URL_SUFFIX = '/ui/oauth2';
-$: enabled = value != undefined;
-// If `baseUrl` is not already set in the form, try to parse it from the `auth_url` value
-//
-// The binding dance here allows us to avoid rendering the string 'undefined' in the input, and
-// also allow lazy/async binding of the `value` prop.
-$: derivedBaseUrl = value?.connect_config?.auth_url?.replace(AUTH_URL_SUFFIX, '');
-let proxyUrlValue = undefined;
-$: baseUrl = proxyUrlValue ?? derivedBaseUrl ?? '';
-$: changeValues({ baseUrl, id: value?.id ?? '' });
+let proxyUrlValue = $state(undefined);
 function changeValues({ baseUrl, id }) {
     if (value) {
         value = {
@@ -31,10 +25,20 @@ function changeValues({ baseUrl, id }) {
         proxyUrlValue = baseUrl;
     }
 }
+let enabled = $derived(value != undefined);
+// If `baseUrl` is not already set in the form, try to parse it from the `auth_url` value
+//
+// The binding dance here allows us to avoid rendering the string 'undefined' in the input, and
+// also allow lazy/async binding of the `value` prop.
+let derivedBaseUrl = $derived(value?.connect_config?.auth_url?.replace(AUTH_URL_SUFFIX, ''));
+let baseUrl = $derived(proxyUrlValue ?? derivedBaseUrl ?? '');
+run(() => {
+    changeValues({ baseUrl, id: value?.id ?? '' });
+});
 </script>
 
 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name={'kanidm'} after={true} /></div><Toggle
 			checked={enabled}
@@ -48,7 +52,7 @@ function changeValues({ baseUrl, id }) {
 		/></label
 	>
 	{#if enabled}
-		<div class="border rounded p-4 flex flex-col gap-6">
+		<SettingCard class="flex flex-col gap-6">
 			<label class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Kanidm Url</span>
 				<span class="text-secondary font-normal text-xs">{'KANIDM_URL/ui/oauth2'}</span>
@@ -75,6 +79,6 @@ function changeValues({ baseUrl, id }) {
 					bind:value={value['secret']}
 				/>
 			</label>
-		</div>
+		</SettingCard>
 	{/if}
 </div>

package/package/components/KanidmSetting.svelte.d.ts

@@ -1,20 +1,6 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const KanidmSetting: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     value: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type KanidmSetting = InstanceType<typeof KanidmSetting>;
+}
+declare const KanidmSetting: import("svelte").Component<Props, {}, "value">;
+type KanidmSetting = ReturnType<typeof KanidmSetting>;
 export default KanidmSetting;

package/package/components/KeycloakSetting.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">import IconedResourceType from './IconedResourceType.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
 import Toggle from './Toggle.svelte';
-export let value;
-$: enabled = value != undefined;
-let org = '';
-$: changeOrg(org);
+import SettingCard from './instanceSettings/SettingCard.svelte';
+let { value = $bindable() } = $props();
+let lastOrg = undefined;
 function changeOrg(org) {
-    if (value) {
+    if (value && org) {
         value = {
             ...value,
             connect_config: {
@@ -23,16 +23,23 @@ function changeOrg(org) {
         };
     }
 }
+let enabled = $derived(value != undefined);
+$effect.pre(() => {
+    if (value?.['org'] != lastOrg) {
+        lastOrg = value?.['org'];
+        untrack(() => changeOrg(value?.['org']));
+    }
+});
 </script>
 
 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name={'keycloak'} after={true} /></div><Toggle
 			checked={enabled}
 			on:change={(e) => {
 				if (e.detail) {
-					value = { id: '', secret: '' }
+					value = { id: '', secret: '', org: '' }
 				} else {
 					value = undefined
 				}
@@ -40,13 +47,16 @@ function changeOrg(org) {
 		/></label
 	>
 	{#if enabled}
-		<div class="border rounded p-4 flex flex-col gap-6">
+		<SettingCard class="flex flex-col gap-6">
 			<label class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Realm Url </span>
 				<span class="text-secondary font-normal text-xs"
 					>{'REALM_URL/protocol/openid-connect/auth'}</span
 				>
-				<TextInput inputProps={{ type: 'text', placeholder: 'yourorg' }} bind:value={org} />
+				<TextInput
+					inputProps={{ type: 'text', placeholder: 'yourorg' }}
+					bind:value={value['org']}
+				/>
 			</label>
 			<label class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Custom Name</span>
@@ -69,6 +79,6 @@ function changeOrg(org) {
 					bind:value={value['secret']}
 				/>
 			</label>
-		</div>
+		</SettingCard>
 	{/if}
 </div>