windmill-components 1.642.0 → 1.655.0

package/dist/sharedUtils/svelte5Utils.svelte.d.ts

@@ -1,6 +1,4 @@
-import { type StateStore } from './utils';
-import * as runed from 'runed/kit';
-import type z from 'zod';
+import type { StateStore } from './utils';
 export declare function withProps<Component, Props>(component: Component, props: Props): {
     component: Component;
     props: Props;
@@ -32,9 +30,6 @@ export type UsePromiseOptions = {
     loadInit?: boolean;
     clearValueOnRefresh?: boolean;
 };
-/**
- * @deprecated Use `resource` from `runed` instead
- */
 export declare function usePromise<T>(createPromise: () => Promise<T>, { loadInit, clearValueOnRefresh }?: UsePromiseOptions): UsePromiseResult<T>;
 /**
  * Generic change tracker class that monitors changes in state using deep equality comparison
@@ -52,29 +47,3 @@ export declare class ChangeTracker<T> {
      */
     track(value: T): boolean;
 }
-/**
- * This allows using async resources that only fetch missing data based on a set of keys.
- * It maintains a Record of the fetched data and only calls the fetcher for keys that
- * are not already present in the map.
- * The fetcher takes a record of keys to allow fetching multiple items in a single call.
- */
-export declare class MapResource<U, T> {
-    private _cached;
-    private _fetcherResource;
-    constructor(getValues: () => Record<string, U>, fetcher: (toFetch: Record<string, U>) => Promise<Record<string, T>>);
-    get current(): Record<string, T> | undefined;
-    get loading(): boolean;
-    get error(): Error | undefined;
-}
-export declare class ChangeOnDeepInequality<T> {
-    private _cached;
-    constructor(compute: () => T);
-    get value(): T;
-}
-export declare function useSearchParams<S extends z.ZodType>(schema: S, options?: runed.SearchParamsOptions): runed.ReturnUseSearchParams<S>;
-export declare class StaleWhileLoading<T> {
-    private _current;
-    private _currentTimeout;
-    constructor(getter: () => T, timeout?: number);
-    get current(): T | undefined;
-}

package/dist/sharedUtils/utils.d.ts

@@ -38,7 +38,7 @@ export declare function validateUsername(username: string): string;
 export declare function parseQueryParams(url: string | undefined): Record<string, string>;
 export declare function displayDateOnly(dateString: string | Date | undefined): string;
 export declare function retrieveCommonWorkerPrefix(workerName: string): string;
-export declare function subtractDaysFromDateString(dateString: string | null, days: number): string | undefined;
+export declare function subtractDaysFromDateString(dateString: string | undefined, days: number): string | undefined;
 export declare function displayDate(dateString: string | Date | undefined, displaySecond?: boolean, displayDate?: boolean): string;
 export declare function displayTime(dateString: string | Date | undefined): string;
 export declare function displaySize(sizeInBytes: number | undefined): string | undefined;
@@ -63,7 +63,6 @@ export declare function clickOutside(node: Node, options?: ClickOutsideOptions |
     destroy(): void;
     update(newOptions: ClickOutsideOptions | boolean): void;
 };
-export declare function undefinedIfEmpty(obj: any): any;
 export declare function pointerDownOutside(node: Node, options?: ClickOutsideOptions): {
     destroy(): void;
     update(newOptions: ClickOutsideOptions): void;
@@ -137,12 +136,6 @@ export declare function throttle<T>(func: (...args: any[]) => T, wait: number):
 export declare function isMac(): boolean;
 export declare function getModifierKey(): string;
 export declare function isValidHexColor(color: string): boolean;
-/**
- * Generates a text color with the same hue as the background but adjusted lightness for good contrast
- * @param backgroundColor Hex color string (e.g., "#FF0000" or "#F00")
- * @returns Hex color string with same hue but good contrast, or undefined if invalid
- */
-export declare function getContrastTextColor(backgroundColor: string | null | undefined): string | undefined;
 export declare function sortObject<T>(o: T & object): T;
 export declare function sortArray<T>(array: T[], compareFn?: (a: T, b: T) => number): T[];
 export declare function generateRandomString(len?: number): string;
@@ -187,7 +180,7 @@ export declare function getSchemaFromProperties(properties: {
 }): Schema;
 export declare function validateFileExtension(ext: string): boolean;
 export declare function isFlowPreview(job_kind: Job['job_kind'] | undefined): job_kind is "flowpreview" | "flownode";
-export declare function isNotFlow(job_kind: Job['job_kind'] | undefined): job_kind is "script" | "aiagent" | "identity" | "preview" | "dependencies" | "flowdependencies" | "appdependencies" | "script_hub" | "deploymentcallback" | "flowscript" | "appscript" | "unassigned_script" | "unassigned_flow" | "unassigned_singlestepflow" | undefined;
+export declare function isNotFlow(job_kind: Job['job_kind'] | undefined): job_kind is "script" | "aiagent" | "identity" | "preview" | "dependencies" | "flowdependencies" | "appdependencies" | "script_hub" | "deploymentcallback" | "flowscript" | "appscript" | undefined;
 export declare function isScriptPreview(job_kind: Job['job_kind'] | undefined): job_kind is "preview" | "flowscript" | "appscript";
 export declare function conditionalMelt(node: HTMLElement, meltItem: AnyMeltElement | undefined): void | import("svelte/action").ActionReturn<undefined, Record<never, any>>;
 export type Item = {
@@ -202,7 +195,6 @@ export type Item = {
     hide?: boolean | undefined;
     extra?: Snippet;
     id?: string;
-    tooltip?: string;
 };
 export declare function isObjectTooBig(obj: any): boolean;
 export declare function localeConcatAnd(items: string[]): string;
@@ -210,9 +202,11 @@ export declare function formatDate(dateString: string | undefined): string;
 export declare function formatDateShort(dateString: string | undefined): string;
 export declare function toJsonStr(result: any): string;
 export declare function getOS(): "Windows" | "macOS" | "iOS" | "Android" | "Linux" | "Unknown OS";
+import { type ClassValue } from 'clsx';
 import type { Component, Snippet } from 'svelte';
 import { OpenAPIV2, type OpenAPI, type OpenAPIV3, type OpenAPIV3_1 } from 'openapi-types';
 import type { IPosition } from 'monaco-editor';
+export declare function cn(...inputs: ClassValue[]): string;
 export type StateStore<T> = {
     val: T;
 };
@@ -247,7 +241,6 @@ export declare function wait(ms: number): Promise<unknown>;
 export declare function validateRetryConfig(retry: Retry | undefined): string | null;
 export type CssColor = keyof (typeof tokensFile)['tokens']['light'];
 import tokensFile from './assets/tokens/tokens.json';
-import { Package } from 'lucide-svelte';
 export declare function getCssColor(color: CssColor, { alpha, format }: {
     alpha?: number;
     format?: 'css-var' | 'hex-dark' | 'hex-light';
@@ -255,11 +248,3 @@ export declare function getCssColor(color: CssColor, { alpha, format }: {
 export type IconType = Component<{
     size?: number;
 }> | typeof import('lucide-svelte').Dot;
-export declare function getJobKindIcon(jobKind: Job['job_kind']): import("svelte/legacy").LegacyComponentType | typeof Package | undefined;
-export declare function chunkBy<T>(array: T[], getKey: (key: T) => string): T[][];
-export declare function getQueryStmtCountHeuristic(query: string): number;
-export declare function countChars(str: string, char: string): number;
-export declare function buildReactiveObj<T extends object>(fields: {
-    [name in keyof T]: [() => T[name], (v: T[name]) => void];
-}): T;
-export declare function pick<T extends object, K extends keyof T>(obj: T, keys: readonly K[]): Pick<T, K>;

package/package/aiStore.d.ts

@@ -11,5 +11,6 @@ export declare const copilotInfo: import("svelte/store").Writable<{
 export declare function loadCopilot(workspace: string): Promise<void>;
 export declare function setCopilotInfo(aiConfig: AIConfig): void;
 export declare function getCurrentModel(): AIProviderModel;
+export declare function tryGetCurrentModel(): AIProviderModel | undefined;
 export declare function getUserCustomPrompts(): Record<string, string>;
 export declare function getCombinedCustomPrompt(mode: string): string | undefined;

package/package/aiStore.js

@@ -69,6 +69,9 @@ export function getCurrentModel() {
     }
     return model;
 }
+export function tryGetCurrentModel() {
+    return get(copilotSessionModel) ?? get(copilotInfo).defaultModel ?? get(copilotInfo).aiModels[0];
+}
 export function getUserCustomPrompts() {
     const stored = getLocalSetting(USER_CUSTOM_PROMPTS_KEY);
     if (stored) {

package/package/components/ApiConnectForm.svelte

@@ -14,6 +14,7 @@ import { base } from '../base';
 import GitHubAppIntegration from './GitHubAppIntegration.svelte';
 import BedrockCredentialsCheck from './BedrockCredentialsCheck.svelte';
 import { isCloudHosted } from '../cloud';
+import ResourceGen from './copilot/ResourceGen.svelte';
 let { resourceType, resourceTypeInfo, args = $bindable({}), linkedSecret = $bindable(undefined), isValid = $bindable(true), linkedSecretCandidates = undefined, description = $bindable(undefined) } = $props();
 let schema = $state(emptySchema());
 let notFound = $state(false);
@@ -122,6 +123,12 @@ $effect(() => {
 			}}
 			class="as-json-toggle"
 		/>
+		<ResourceGen
+			bind:args
+			resourceType={resourceType}
+			resourceSchema={notFound ? undefined : schema}
+			isFileset={resourceTypeInfo?.is_fileset ?? false}
+		/>
 		<TestConnection {resourceType} {args} />
 		{#if resourceType == 'postgresql'}
 			<Popover

package/package/components/ApiConnectForm.svelte.d.ts

@@ -8,6 +8,6 @@ interface Props {
     linkedSecretCandidates?: string[] | undefined;
     description?: string | undefined;
 }
-declare const ApiConnectForm: import("svelte").Component<Props, {}, "description" | "args" | "isValid" | "linkedSecret">;
+declare const ApiConnectForm: import("svelte").Component<Props, {}, "description" | "args" | "linkedSecret" | "isValid">;
 type ApiConnectForm = ReturnType<typeof ApiConnectForm>;
 export default ApiConnectForm;

package/package/components/AppConnectDrawer.svelte

@@ -1,27 +1,30 @@
-<script lang="ts">import { createEventDispatcher } from 'svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { createEventDispatcher } from 'svelte';
 import { Button, Drawer } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import AppConnectInner from './AppConnectInner.svelte';
 import DarkModeObserver from './DarkModeObserver.svelte';
-export let expressOAuthSetup = false;
-let drawer;
-let resourceType = '';
-let step = 1;
-let disabled = false;
-let isGoogleSignin = false;
-let manual = true;
-let appConnectInner = undefined;
-let rtToLoad = '';
+let { expressOAuthSetup = false } = $props();
+let drawer = $state();
+let resourceType = $state('');
+let step = $state(1);
+let disabled = $state(false);
+let isGoogleSignin = $state(false);
+let manual = $state(true);
+let appConnectInner = $state(undefined);
+let rtToLoad = $state('');
 export async function open(rt) {
     rtToLoad = rt;
-    drawer.openDrawer?.();
+    drawer?.openDrawer?.();
 }
-$: appConnectInner && onRtToLoadChange(rtToLoad);
 function onRtToLoadChange(rtToLoad) {
     appConnectInner?.open(rtToLoad);
 }
 const dispatch = createEventDispatcher();
-let darkMode = false;
+let darkMode = $state(false);
+run(() => {
+    appConnectInner && onRtToLoadChange(rtToLoad);
+});
 </script>
 
 <DarkModeObserver bind:darkMode />
@@ -37,7 +40,7 @@ let darkMode = false;
 	<DrawerContent
 		title="Add a resource"
 		id="add-resource-drawer"
-		on:close={drawer.closeDrawer}
+		on:close={drawer?.closeDrawer}
 		tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
 		documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"
 	>
@@ -58,7 +61,7 @@ let darkMode = false;
 					<Button variant="default" on:click={appConnectInner?.back ?? (() => {})}>Back</Button>
 				{/if}
 				{#if isGoogleSignin}
-					<button {disabled} on:click={appConnectInner?.next}>
+					<button {disabled} onclick={appConnectInner?.next}>
 						<img
 							class="h-10 w-auto object-contain"
 							src={darkMode ? '/google_signin_dark.png' : '/google_signin_light.png'}

package/package/components/AppConnectDrawer.svelte.d.ts

@@ -1,3 +1,6 @@
+interface Props {
+    expressOAuthSetup?: 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> & {
         $$bindings?: Bindings;
@@ -11,16 +14,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const AppConnectDrawer: $$__sveltets_2_IsomorphicComponent<{
-    expressOAuthSetup?: boolean;
-    open?: (rt?: string) => Promise<void>;
-}, {
+declare const AppConnectDrawer: $$__sveltets_2_IsomorphicComponent<Props, {
     refresh: CustomEvent<string>;
     close: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     open: (rt?: string) => Promise<void>;
-}, string>;
+}, "">;
 type AppConnectDrawer = InstanceType<typeof AppConnectDrawer>;
 export default AppConnectDrawer;

package/package/components/AppConnectInner.svelte

@@ -330,6 +330,8 @@ export async function next() {
     }
     else {
         if (!path) {
+            if (step == 2)
+                return;
             throw Error('Path is not set');
         }
         let exists = await VariableService.existsVariable({

package/package/components/AppConnectLightweightResourcePicker.svelte

@@ -2,15 +2,15 @@
 import DarkModeObserver from './DarkModeObserver.svelte';
 import { Button } from './common';
 import { workspaceStore } from '../stores';
-import { onMount } from 'svelte';
+import { onMount, untrack } from 'svelte';
 let { resourceType = $bindable(undefined), workspace, express = false } = $props();
 let step = $state(1);
 let disabled = $state(false);
 let manual = $state(true);
 let appConnect = $state(undefined);
 let darkMode = $state(false);
-if (workspace) {
-    $workspaceStore = workspace;
+if (untrack(() => workspace)) {
+    $workspaceStore = untrack(() => workspace);
 }
 onMount(async () => {
     if (resourceType) {

package/package/components/AppWrapper.svelte

@@ -1,6 +1,7 @@
-<script lang="ts">import AppEditor from './apps/editor/AppEditor.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import AppEditor from './apps/editor/AppEditor.svelte';
 let { app: oldApp, ...props } = $props();
-let app = $state(oldApp);
+let app = $state(untrack(() => oldApp));
 </script>
 
 <AppEditor {app} {...props} />

package/package/components/ArgInput.svelte

@@ -878,6 +878,7 @@ onDestroy(() => {
 		{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format && format?.split('-').length > 1 && resourceTypes.includes(format?.substring('resource-'.length))))}
 			<!-- {JSON.stringify(value)} -->
 			<ObjectResourceInput
+				datatableAsPgResource={label === 'database'}
 				{disabled}
 				{defaultValue}
 				selectFirst={!noDefaultOnSelectFirst && required}

package/package/components/AutheliaSetting.svelte

@@ -1,11 +1,10 @@
-<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';
 import SettingCard from './instanceSettings/SettingCard.svelte';
-export let value;
-$: enabled = value != undefined;
-let org = '';
-$: changeOrg(org);
+let { value = $bindable() } = $props();
+let org = $state('');
 function changeOrg(org) {
     if (value) {
         value = {
@@ -24,10 +23,14 @@ function changeOrg(org) {
         };
     }
 }
+let enabled = $derived(value != undefined);
+run(() => {
+    changeOrg(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={'authelia'} after={true} /></div><Toggle
 			checked={enabled}

package/package/components/AutheliaSetting.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 AutheliaSetting: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     value: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AutheliaSetting = InstanceType<typeof AutheliaSetting>;
+}
+declare const AutheliaSetting: import("svelte").Component<Props, {}, "value">;
+type AutheliaSetting = ReturnType<typeof AutheliaSetting>;
 export default AutheliaSetting;

package/package/components/AuthentikSetting.svelte

@@ -1,11 +1,8 @@
-<script lang="ts">import IconedResourceType from './IconedResourceType.svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import IconedResourceType from './IconedResourceType.svelte';
 import Toggle from './Toggle.svelte';
 import SettingCard from './instanceSettings/SettingCard.svelte';
-export let value;
-$: enabled = value != undefined;
-// Initialize org from existing auth_url
-$: org = value?.connect_config?.auth_url?.replace('/application/o/authorize/', '') ?? '';
-$: changeOrg(org);
+let { value = $bindable() } = $props();
 function changeOrg(org) {
     if (value && org) {
         value = {
@@ -24,10 +21,16 @@ function changeOrg(org) {
         };
     }
 }
+let enabled = $derived(value != undefined);
+// Initialize org from existing auth_url
+let org = $derived(value?.connect_config?.auth_url?.replace('/application/o/authorize/', '') ?? '');
+run(() => {
+    changeOrg(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={'authentik'} after={true} /></div><Toggle
 			checked={enabled}

package/package/components/AuthentikSetting.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 AuthentikSetting: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     value: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AuthentikSetting = InstanceType<typeof AuthentikSetting>;
+}
+declare const AuthentikSetting: import("svelte").Component<Props, {}, "value">;
+type AuthentikSetting = ReturnType<typeof AuthentikSetting>;
 export default AuthentikSetting;

package/package/components/AzureOauthSettings.svelte

@@ -1,29 +1,28 @@
-<script lang="ts">import { ExternalLink } from 'lucide-svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { ExternalLink } from 'lucide-svelte';
 import OauthScopes from './OauthScopes.svelte';
-export let connect_config = {
-    scopes: ['offline_access'],
-    auth_url: '',
-    token_url: '',
-    req_body_auth: true,
-    extra_params: { tenant_id: '' },
-    extra_params_callback: {}
-};
-$: if (!connect_config) {
-    connect_config = {
-        scopes: ['offline_access'],
-        auth_url: '',
-        token_url: '',
-        req_body_auth: true,
-        extra_params: { tenant_id: '' },
-        extra_params_callback: {}
-    };
-}
-$: if (connect_config.extra_params.tenant_id) {
-    connect_config.auth_url = `https://login.microsoftonline.com/${connect_config.extra_params.tenant_id}/oauth2/v2.0/authorize`;
-    connect_config.token_url = `https://login.microsoftonline.com/${connect_config.extra_params.tenant_id}/oauth2/v2.0/token`;
-}
+let { connect_config = $bindable() } = $props();
+run(() => {
+    if (!connect_config) {
+        connect_config = {
+            scopes: ['offline_access'],
+            auth_url: '',
+            token_url: '',
+            req_body_auth: true,
+            extra_params: { tenant_id: '' },
+            extra_params_callback: {}
+        };
+    }
+});
+run(() => {
+    if (connect_config?.extra_params?.tenant_id) {
+        connect_config.auth_url = `https://login.microsoftonline.com/${connect_config.extra_params.tenant_id}/oauth2/v2.0/authorize`;
+        connect_config.token_url = `https://login.microsoftonline.com/${connect_config.extra_params.tenant_id}/oauth2/v2.0/token`;
+    }
+});
 </script>
 
+{#if connect_config}
 <label class="flex flex-col gap-1" for="tenant-id">
 	<span class="text-primary font-semibold text-xs flex gap-2 items-center"> Azure tenant id </span>
 	<span class="text-secondary font-normal text-xs">
@@ -52,3 +51,4 @@ $: if (connect_config.extra_params.tenant_id) {
 		<OauthScopes bind:scopes={connect_config.scopes} />
 	</div>
 </label>
+{/if}

package/package/components/AzureOauthSettings.svelte.d.ts

@@ -1,17 +1,4 @@
-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 AzureOauthSettings: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     connect_config?: {
         scopes: string[];
         auth_url: string;
@@ -22,8 +9,7 @@ declare const AzureOauthSettings: $$__sveltets_2_IsomorphicComponent<{
         };
         extra_params_callback: Record<string, any>;
     };
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AzureOauthSettings = InstanceType<typeof AzureOauthSettings>;
+}
+declare const AzureOauthSettings: import("svelte").Component<Props, {}, "connect_config">;
+type AzureOauthSettings = ReturnType<typeof AzureOauthSettings>;
 export default AzureOauthSettings;

package/package/components/Badge.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">import Tooltip from './Tooltip.svelte';
-export let twBgColor = 'bg-blue-200';
-export let twTextColor = 'text-secondary';
-export let tooltip = undefined;
+let { twBgColor = 'bg-blue-200', twTextColor = 'text-secondary', tooltip = undefined, children } = $props();
 </script>
 
 <span class="{twBgColor} {twTextColor} text-2xs rounded px-1 whitespace-nowrap">
-	<slot />
+	{@render children?.()}
 	{#if tooltip && tooltip != ''}
 		<Tooltip>{tooltip}</Tooltip>
 	{/if}

package/package/components/Badge.svelte.d.ts

@@ -1,31 +1,9 @@
-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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Badge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     twBgColor?: string;
     twTextColor?: string;
     tooltip?: string | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Badge = InstanceType<typeof Badge>;
+    children?: import('svelte').Snippet;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
 export default Badge;

package/package/components/ChangeInstanceUsernameInner.svelte

@@ -3,12 +3,9 @@ import { Button } from './common';
 import { sendUserToast } from '../toast';
 import Alert from './common/alert/Alert.svelte';
 import { createEventDispatcher } from 'svelte';
-export let email;
-export let username;
-export let isConflict = false;
-export let noPadding = false;
-let loading = false;
-let usernameInfo = undefined;
+let { email, username = $bindable(), isConflict = false, noPadding = false } = $props();
+let loading = $state(false);
+let usernameInfo = $state(undefined);
 function handleKeyUp(event) {
     const key = event.key;
     if (key === 'Enter') {
@@ -60,7 +57,7 @@ async function renameUser() {
 	<input
 		type="text"
 		class="mb-4"
-		on:keyup={handleKeyUp}
+		onkeyup={handleKeyUp}
 		bind:value={username}
 		disabled={isConflict}
 	/>

package/package/components/ChangeInstanceUsernameInner.svelte.d.ts

@@ -1,3 +1,9 @@
+interface Props {
+    email: string;
+    username: string;
+    isConflict?: boolean;
+    noPadding?: 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> & {
         $$bindings?: Bindings;
@@ -11,16 +17,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ChangeInstanceUsernameInner: $$__sveltets_2_IsomorphicComponent<{
-    email: string;
-    username: string;
-    isConflict?: boolean;
-    noPadding?: boolean;
-}, {
+declare const ChangeInstanceUsernameInner: $$__sveltets_2_IsomorphicComponent<Props, {
     close: CustomEvent<any>;
     renamed: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "username">;
 type ChangeInstanceUsernameInner = InstanceType<typeof ChangeInstanceUsernameInner>;
 export default ChangeInstanceUsernameInner;