windmill-components 1.493.9 → 1.501.4

package/package/components/auditLogs/AuditLogsFilters.svelte

@@ -1,28 +1,49 @@
+<script lang="ts" module>"use strict";
+async function loadResources(workspace) {
+    const r = await ResourceService.listResource({ workspace });
+    const sPaths = await ScriptService.listScriptPaths({ workspace });
+    const fPaths = await FlowService.listFlowPaths({ workspace });
+    const a = await AppService.listApps({ workspace });
+    return r
+        .map((r) => r.path)
+        .concat(sPaths)
+        .concat(fPaths)
+        .concat(a.map((a) => a.path))
+        .sort();
+}
+</script>
+
 <script lang="ts">import { goto } from '../../navigation';
 import Button from '../common/button/Button.svelte';
 import CalendarPicker from '../common/calendarPicker/CalendarPicker.svelte';
 import { AuditService, ResourceService, UserService, ScriptService, FlowService, AppService } from '../../gen';
 import { userStore, workspaceStore } from '../../stores';
-import { Loader2, RefreshCcw } from 'lucide-svelte';
-import { onDestroy, tick } from 'svelte';
-import AutoComplete from 'simple-svelte-autocomplete';
+import { ChevronDown, Loader2, RefreshCcw } from 'lucide-svelte';
+import { onDestroy, tick, untrack } from 'svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
-let usernames;
-let resources;
-let loading = false;
+import Select from '../select/Select.svelte';
+import { usePromise } from '../../svelte5Utils.svelte';
+import { safeSelectItems } from '../select/utils.svelte';
+let usernames = $state();
+let resources = usePromise(() => loadResources($workspaceStore), { loadInit: false });
+let loading = $state(false);
 let page = undefined;
-export let logs = [];
-export let username = 'all';
-export let pageIndex = 1;
-export let hasMore = false;
-export let before = undefined;
-export let after = undefined;
-export let perPage = 100;
-export let operation = 'all';
-export let resource = 'all';
-export let actionKind = 'all';
-export let scope = undefined;
+let { logs = $bindable(undefined), username = $bindable('all'), pageIndex = $bindable(1), hasMore = $bindable(false), before = $bindable(undefined), after = $bindable(undefined), perPage = $bindable(100), operation = $bindable(), resource = $bindable(), actionKind = $bindable(undefined), scope = $bindable(undefined) } = $props();
+$effect.pre(() => {
+    if (logs == undefined) {
+        logs = [];
+    }
+    if (operation == undefined) {
+        operation = 'all';
+    }
+    if (resource == undefined) {
+        resource = 'all';
+    }
+    if (actionKind == undefined) {
+        actionKind = 'all';
+    }
+});
 async function loadLogs(username, page, perPage, before, after, operation, resource, actionKind, scope) {
     loading = true;
     if (username == 'all') {
@@ -59,31 +80,10 @@ async function loadUsers() {
             ? await UserService.listUsernames({ workspace: $workspaceStore })
             : [$userStore?.username ?? ''];
 }
-async function loadResources() {
-    const r = await ResourceService.listResource({
-        workspace: $workspaceStore
-    });
-    const sPaths = await ScriptService.listScriptPaths({
-        workspace: $workspaceStore
-    });
-    const fPaths = await FlowService.listFlowPaths({
-        workspace: $workspaceStore
-    });
-    const a = await AppService.listApps({
-        workspace: $workspaceStore
-    });
-    resources = r
-        .map((r) => r.path)
-        .concat(sPaths)
-        .concat(fPaths)
-        .concat(a.map((a) => a.path))
-        .sort();
-}
-$: $workspaceStore && refresh && refreshLogs();
 let initialLoad = true;
 function refreshLogs() {
     loadUsers();
-    loadResources();
+    resources.refresh();
     loadLogs(username, page, perPage, before, after, operation, resource, actionKind, scope);
     tick().then(() => {
         initialLoad = false;
@@ -127,10 +127,6 @@ function updatePageQueryParams(pageIndex) {
     page = pageIndex;
     updateLogs();
 }
-// observe all the variables that should trigger an update
-$: username, perPage, before, after, operation, resource, actionKind, scope, updateQueryParams();
-// observe the pageIndex variable that should trigger an update
-$: updatePageQueryParams(pageIndex);
 window.addEventListener('popstate', handlePopState);
 function handlePopState() {
     const urlSearchParams = new URLSearchParams(window.location.search);
@@ -234,7 +230,20 @@ const operations = {
     WORKSPACES_UNARCHIVE: 'workspaces.unarchive',
     WORKSPACES_DELETE: 'workspaces.delete'
 };
-let refresh = 1;
+let refresh = $state(1);
+$effect(() => {
+    $workspaceStore && refresh && untrack(() => refreshLogs());
+});
+// observe all the variables that should trigger an update
+$effect(() => {
+    ;
+    [username, perPage, before, after, operation, resource, actionKind, scope];
+    updateQueryParams();
+});
+// observe the pageIndex variable that should trigger an update
+$effect(() => {
+    updatePageQueryParams(pageIndex);
+});
 </script>
 
 <div class="flex flex-col items-center gap-6 2xl:gap-1 2xl:flex-row mt-4 xl:mt-0">
@@ -246,26 +255,27 @@ let refresh = 1;
 				on:selected={({ detail }) => {
 					scope = detail === 'admins' ? undefined : detail
 				}}
-				let:item
 			>
-				<ToggleButton
-					value={'admins'}
-					label="Admins"
-					tooltip="Displays events from the admins workspace only."
-					{item}
-				/>
-				<ToggleButton
-					value="all_workspaces"
-					label="All"
-					tooltip="Displays events from all workspaces."
-					{item}
-				/>
-				<ToggleButton
-					value="instance"
-					label="Instance"
-					tooltip="Displays instance-scope events, such as user logins and registrations, instance user and group management, and worker configuration changes."
-					{item}
-				/>
+				{#snippet children({ item })}
+					<ToggleButton
+						value={'admins'}
+						label="Admins"
+						tooltip="Displays events from the admins workspace only."
+						{item}
+					/>
+					<ToggleButton
+						value="all_workspaces"
+						label="All"
+						tooltip="Displays events from all workspaces."
+						{item}
+					/>
+					<ToggleButton
+						value="instance"
+						label="Instance"
+						tooltip="Displays instance-scope events, such as user logins and registrations, instance user and group management, and worker configuration changes."
+						{item}
+					/>
+				{/snippet}
 			</ToggleButtonGroup>
 		</div>
 	{/if}
@@ -314,32 +324,25 @@ let refresh = 1;
 	<div class="flex gap-1 relative w-full">
 		<span class="text-xs absolute -top-4">Resource</span>
 
-		<AutoComplete
-			create
-			onCreate={(resource) => {
-				resources.push(resource)
-				return resource
-			}}
+		<Select
+			onCreateItem={(r) => (resources.value?.push(r), (resource = r))}
 			createText="Press enter to use this value"
-			noInputStyles
-			items={resources}
-			value={resource}
-			bind:selectedItem={resource}
-			inputClassName="!h-[34px] py-1 !text-xs !w-48"
-			hideArrow
-			dropdownClassName="!text-sm"
+			bind:value={resource}
+			items={safeSelectItems(['all', ...(resources.value ?? [])])}
+			inputClass="dark:!bg-gray-700"
+			RightIcon={ChevronDown}
 		/>
 	</div>
 
 	<div class="flex gap-1 relative w-full">
 		<span class="text-xs absolute -top-4">Operation</span>
 
-		<select bind:value={operation}>
-			<option selected value="all">all</option>
-			{#each Object.keys(operations) as e}
-				<option value={operations[e]}>{e}</option>
-			{/each}
-		</select>
+		<Select
+			bind:value={operation}
+			items={['all', ...Object.keys(operations)].map((r) => ({ value: r, label: r }))}
+			inputClass="dark:!bg-gray-700"
+			RightIcon={ChevronDown}
+		/>
 	</div>
 
 	<div class="flex gap-1 relative w-full">

package/package/components/auditLogs/AuditLogsFilters.svelte.d.ts

@@ -1,19 +1,6 @@
 import type { ActionKind } from '../../common';
 import { type AuditLog } from '../../gen';
-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 AuditLogsFilters: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     logs?: AuditLog[];
     username?: string;
     pageIndex?: number | undefined;
@@ -23,10 +10,9 @@ declare const AuditLogsFilters: $$__sveltets_2_IsomorphicComponent<{
     perPage?: number | undefined;
     operation?: string;
     resource?: string | undefined;
-    actionKind?: ActionKind | "all";
-    scope?: undefined | "all_workspaces" | "instance";
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AuditLogsFilters = InstanceType<typeof AuditLogsFilters>;
+    actionKind?: ActionKind | 'all';
+    scope?: undefined | 'all_workspaces' | 'instance';
+}
+declare const AuditLogsFilters: import("svelte").Component<Props, {}, "username" | "operation" | "resource" | "before" | "after" | "perPage" | "hasMore" | "logs" | "pageIndex" | "actionKind" | "scope">;
+type AuditLogsFilters = ReturnType<typeof AuditLogsFilters>;
 export default AuditLogsFilters;

package/package/components/chartjs-wrappers/Chart.svelte

@@ -1,29 +1,37 @@
 <!-- https://github.com/SauravKanchan/svelte-chartjs/issues/158#issuecomment-2456212827 -->
 <!-- Replaces svelte-chartjs not working with Svelte 5 because it's using svelte/internal -->
 
-<script lang="ts" generics="T extends ChartType">import { Chart, Tooltip, } from 'chart.js';
+<script lang="ts" generics="T extends ChartType">import { Chart, Tooltip } from 'chart.js';
 import 'chart.js/auto';
 import 'chartjs-adapter-date-fns';
+import { untrack } from 'svelte';
 const { type, data, options, ...rest } = $props();
 Chart.register(Tooltip);
 let canvasElem;
 let chart;
 $effect(() => {
-    chart = new Chart(canvasElem, {
-        type,
-        data,
-        options,
+    ;
+    [type, data, options];
+    untrack(() => {
+        chart = new Chart(canvasElem, {
+            type,
+            data,
+            options
+        });
     });
     return () => {
         chart.destroy();
     };
 });
 $effect(() => {
-    if (chart) {
-        chart.data = data;
-        chart.update();
-    }
+    chart;
+    untrack(() => {
+        if (chart) {
+            chart.data = data;
+            chart.update();
+        }
+    });
 });
 </script>
 
-<canvas bind:this={canvasElem} {...rest}></canvas>
+<canvas bind:this={canvasElem} {...rest}></canvas>

package/package/components/common/CloseButton.svelte

@@ -2,14 +2,13 @@
 import Button from './button/Button.svelte';
 import { X } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
-export let noBg = false;
-export let small = false;
-export let Icon = undefined;
+let { noBg = false, small = false, Icon, class: className } = $props();
 const dispatch = createEventDispatcher();
 </script>
 
 <Button
 	on:click={() => dispatch('close')}
+	on:pointerdown={(e) => e.stopPropagation()}
 	startIcon={{ icon: Icon ?? X }}
 	iconOnly
 	size="sm"
@@ -17,6 +16,7 @@ const dispatch = createEventDispatcher();
 	btnClasses={twMerge(
 		'hover:bg-surface-hover rounded-full p-0',
 		noBg ? '' : 'bg-surface-secondary',
-		small ? 'w-6 h-6' : 'w-8 h-8'
+		small ? 'w-6 h-6' : 'w-8 h-8',
+		className ?? ''
 	)}
 />

package/package/components/common/CloseButton.svelte.d.ts

@@ -1,3 +1,9 @@
+interface Props {
+    noBg?: boolean;
+    small?: boolean;
+    Icon?: any | undefined;
+    class?: string;
+}
 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,14 +17,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const CloseButton: $$__sveltets_2_IsomorphicComponent<{
-    noBg?: boolean;
-    small?: boolean;
-    Icon?: any | undefined;
-}, {
+declare const CloseButton: $$__sveltets_2_IsomorphicComponent<Props, {
     close: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type CloseButton = InstanceType<typeof CloseButton>;
 export default CloseButton;

package/package/components/common/actionRow/ActionRow.svelte

@@ -1,7 +1,7 @@
-<script lang="ts">export let applyPageWidth = false;
-export let stickToTop = false;
-$: wide = applyPageWidth ? 'max-w-7xl mx-auto px-4 sm:px-6 md:px-8' : '';
-let scrollY = 0;
+<script lang="ts">"use strict";
+let { applyPageWidth = false, stickToTop = false, class: clazz = '', left, middle, right } = $props();
+let wide = $derived(applyPageWidth ? 'max-w-7xl mx-auto px-4 sm:px-6 md:px-8' : '');
+let scrollY = $state(0);
 </script>
 
 <svelte:window bind:scrollY />
@@ -10,24 +10,24 @@ let scrollY = 0;
 	class={'bg-surface py-3 ' +
 		(stickToTop
 			? 'lg:sticky lg:top-0 z-[500] border-b border-gray-200 border-opacity-0 duration-300 ' +
-			  (scrollY >= 30 ? 'border-opacity-100 ' : '')
+				(scrollY >= 30 ? 'border-opacity-100 ' : '')
 			: '') +
-		($$props.class || '')}
+		(clazz || '')}
 >
 	<div class={'w-full flex flex-wrap justify-between items-center gap-4 ' + wide}>
 		<div class="flex flex-wrap items-center gap-2">
-			{#if $$slots.left}
-				<slot name="left" />
+			{#if left}
+				{@render left?.()}
 			{/if}
 		</div>
 		<div class="flex flex-wrap items-center gap-2">
-			{#if $$slots.middle}
-				<slot name="middle" />
+			{#if middle}
+				{@render middle?.()}
 			{/if}
 		</div>
 		<div class="flex flex-wrap items-center gap-2 lg:gap-4">
-			{#if $$slots.right}
-				<slot name="right" />
+			{#if right}
+				{@render right?.()}
 			{/if}
 		</div>
 	</div>

package/package/components/common/actionRow/ActionRow.svelte.d.ts

@@ -1,26 +1,11 @@
-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;
+interface Props {
+    applyPageWidth?: boolean;
+    stickToTop?: boolean;
+    class?: string | undefined;
+    left?: import('svelte').Snippet;
+    middle?: import('svelte').Snippet;
+    right?: import('svelte').Snippet;
 }
-declare const ActionRow: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    applyPageWidth?: boolean | undefined;
-    stickToTop?: boolean | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    left: {};
-    middle: {};
-    right: {};
-}, {}, string>;
-type ActionRow = InstanceType<typeof ActionRow>;
+declare const ActionRow: import("svelte").Component<Props, {}, "">;
+type ActionRow = ReturnType<typeof ActionRow>;
 export default ActionRow;

package/package/components/common/alert/Alert.svelte

@@ -3,22 +3,7 @@ import Tooltip from '../../Tooltip.svelte';
 import { AlertCircle, AlertTriangle, CheckCircle2, Info, ChevronDown, ChevronUp } from 'lucide-svelte';
 import { slide } from 'svelte/transition';
 import { twMerge } from 'tailwind-merge';
-export let type = 'info';
-export let title;
-export let notRounded = false;
-export let tooltip = '';
-export let documentationLink = undefined;
-export let size = 'sm';
-export let collapsible = false;
-export let bgClass = undefined;
-export let bgStyle = undefined;
-export let iconClass = undefined;
-export let iconStyle = undefined;
-export let titleClass = undefined;
-export let titleStyle = undefined;
-export let descriptionClass = undefined;
-export let descriptionStyle = undefined;
-export let isCollapsed = true;
+let { type = 'info', title, notRounded = false, tooltip = '', documentationLink = undefined, size = 'sm', collapsible = false, bgClass = undefined, bgStyle = undefined, iconClass = undefined, iconStyle = undefined, titleClass = undefined, titleStyle = undefined, descriptionClass = undefined, descriptionStyle = undefined, class: classNames = undefined, isCollapsed = $bindable(true), children } = $props();
 const icons = {
     info: Info,
     warning: AlertCircle,
@@ -30,6 +15,7 @@ function toggleCollapse() {
         isCollapsed = !isCollapsed;
     }
 }
+const SvelteComponent = $derived(icons[type]);
 </script>
 
 <div
@@ -38,14 +24,13 @@ function toggleCollapse() {
 		size === 'sm' ? 'p-4' : 'p-2',
 		classes[type].bgClass,
 		bgClass,
-		$$props.class
+		classNames
 	)}
 	style={bgStyle}
 >
 	<div class="flex">
 		<div class="flex h-8 w-8 items-center justify-center rounded-full">
-			<svelte:component
-				this={icons[type]}
+			<SvelteComponent
 				class={twMerge(classes[type].iconClass, iconClass)}
 				style={iconStyle}
 				size={16}
@@ -64,11 +49,11 @@ function toggleCollapse() {
 				>
 					{title}
 					{#if tooltip != '' || documentationLink}
-						<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
+						<Tooltip {documentationLink}>{tooltip}</Tooltip>
 					{/if}
 				</span>
 				{#if collapsible}
-					<button class="cursor-pointer" on:click={toggleCollapse}>
+					<button class="cursor-pointer" onclick={toggleCollapse}>
 						{#if isCollapsed}
 							<ChevronDown size={16} />
 						{:else}
@@ -78,7 +63,7 @@ function toggleCollapse() {
 				{/if}
 			</div>
 
-			{#if $$slots.default && !isCollapsed}
+			{#if children && !isCollapsed}
 				<div transition:slide|local={{ duration: 200 }} class="mt-2">
 					<div
 						class={twMerge(
@@ -88,10 +73,10 @@ function toggleCollapse() {
 						)}
 						style={descriptionStyle}
 					>
-						<slot />
+						{@render children?.()}
 					</div>
 				</div>
-			{:else if $$slots.default && !collapsible}
+			{:else if children && !collapsible}
 				<div class="mb-2">
 					<div
 						class={twMerge(
@@ -101,7 +86,7 @@ function toggleCollapse() {
 						)}
 						style={descriptionStyle}
 					>
-						<slot />
+						{@render children?.()}
 					</div>
 				</div>
 			{/if}

package/package/components/common/alert/Alert.svelte.d.ts

@@ -1,46 +1,24 @@
 import { type AlertType } from './model';
-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 Alert: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    type?: AlertType | undefined;
+interface Props {
+    type?: AlertType;
     title: string;
-    notRounded?: boolean | undefined;
-    tooltip?: string | undefined;
-    documentationLink?: string | undefined | undefined;
-    size?: "xs" | "sm" | undefined;
-    collapsible?: boolean | undefined;
-    bgClass?: string | undefined | undefined;
-    bgStyle?: string | undefined | undefined;
-    iconClass?: string | undefined | undefined;
-    iconStyle?: string | undefined | undefined;
-    titleClass?: string | undefined | undefined;
-    titleStyle?: string | undefined | undefined;
-    descriptionClass?: string | undefined | undefined;
-    descriptionStyle?: string | undefined | undefined;
-    isCollapsed?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Alert = InstanceType<typeof Alert>;
+    notRounded?: boolean;
+    tooltip?: string;
+    documentationLink?: string | undefined;
+    size?: 'xs' | 'sm';
+    collapsible?: boolean;
+    bgClass?: string | undefined;
+    bgStyle?: string | undefined;
+    iconClass?: string | undefined;
+    iconStyle?: string | undefined;
+    titleClass?: string | undefined;
+    titleStyle?: string | undefined;
+    descriptionClass?: string | undefined;
+    descriptionStyle?: string | undefined;
+    class?: string | undefined;
+    isCollapsed?: boolean;
+    children?: import('svelte').Snippet;
+}
+declare const Alert: import("svelte").Component<Props, {}, "isCollapsed">;
+type Alert = ReturnType<typeof Alert>;
 export default Alert;

package/package/components/common/alert/ConnectionIndicator.svelte

@@ -1,9 +1,9 @@
-<script context="module" lang="ts">export {};
+<script module lang="ts">export {};
 </script>
 
 <script lang="ts">import Popover from '../../Popover.svelte';
 import { Circle } from 'lucide-svelte';
-export let connectionInfo = undefined;
+let { connectionInfo = undefined } = $props();
 </script>
 
 {#if connectionInfo}
@@ -14,7 +14,9 @@ export let connectionInfo = undefined;
 					<Circle class="text-green-600 relative inline-flex fill-current" size={12} />
 				</span>
 
-				<div slot="text"> {connectionInfo.message ?? ''} </div>
+				{#snippet text()}
+					<div> {connectionInfo.message ?? ''} </div>
+				{/snippet}
 			</Popover>
 		{:else}
 			<Popover notClickable>
@@ -23,7 +25,9 @@ export let connectionInfo = undefined;
 					<Circle class="text-red-600 relative inline-flex fill-current" size={12} />
 				</span>
 
-				<div slot="text"> {connectionInfo.message ?? ''} </div>
+				{#snippet text()}
+					<div> {connectionInfo.message ?? ''} </div>
+				{/snippet}
 			</Popover>
 		{/if}
 	</div>

package/package/components/common/alert/ConnectionIndicator.svelte.d.ts

@@ -2,23 +2,9 @@ export type ConnectionInfo = {
     connected: boolean;
     message?: string;
 };
-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 ConnectionIndicator: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     connectionInfo?: ConnectionInfo | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ConnectionIndicator = InstanceType<typeof ConnectionIndicator>;
+}
+declare const ConnectionIndicator: import("svelte").Component<Props, {}, "">;
+type ConnectionIndicator = ReturnType<typeof ConnectionIndicator>;
 export default ConnectionIndicator;