windmill-components 1.642.0 → 1.655.1

package/package/components/assets/AssetsDropdownButton.svelte

@@ -6,7 +6,7 @@ import S3FilePicker from '../S3FilePicker.svelte';
 import { assetsEq, formatAssetAccessType, formatAssetKind, getAccessType } from './lib';
 import { untrack } from 'svelte';
 import { ResourceService, WorkspaceService } from '../../gen';
-import { globalDbManagerDrawer, workspaceStore } from '../../stores';
+import { workspaceStore } from '../../stores';
 import Tooltip from '../meltComponents/Tooltip.svelte';
 import Tooltip2 from '../Tooltip.svelte';
 import ResourceEditorDrawer from '../ResourceEditorDrawer.svelte';
@@ -18,7 +18,6 @@ let { assets, enableChangeAnimation = true, size = 'xs', noBtnText = false, popo
 let prevAssets = $state([]);
 let blueBgDiv = $state();
 let s3FilePicker = $state();
-let dbManagerDrawer = $derived(globalDbManagerDrawer.val);
 let resourceEditorDrawer = $state();
 let isOpen = $state(false);
 let resourceDataCache = $state({});
@@ -66,7 +65,7 @@ $effect(() => {
 	bind:isOpen
 	escapeBehavior="ignore"
 >
-	<svelte:fragment slot="trigger">
+	{#snippet trigger()}
 		<div
 			class={twMerge(
 				size === '3xs' ? 'h-[1.6rem]' : 'py-1.5',
@@ -87,8 +86,8 @@ $effect(() => {
 				{noBtnText ? assets.length : pluralize(assets.length, 'asset')}
 			</span>
 		</div>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
+	{/snippet}
+	{#snippet content()}
 		<ul class="divide-y rounded-md">
 			{#each assets as asset}
 				{@const ducklakeNotFound =
@@ -108,7 +107,7 @@ $effect(() => {
 						contentClasses="py-2 px-4 flex flex-col gap-2"
 						disablePopup={!!asset.access_type}
 					>
-						<svelte:fragment slot="trigger">
+						{#snippet trigger()}
 							<div
 								class={twMerge(
 									'text-xs font-normal border text-primary w-10 p-1 text-center rounded-md',
@@ -118,8 +117,8 @@ $effect(() => {
 							>
 								{formatAssetAccessType(getAccessType(asset)) ?? '?'}
 							</div>
-						</svelte:fragment>
-						<svelte:fragment slot="content">
+						{/snippet}
+						{#snippet content()}
 							{#if !asset.access_type}
 								<span class="text-sm text-primary leading-4">
 									Could not infer automatically <br />
@@ -144,14 +143,14 @@ $effect(() => {
 									</Tooltip2>
 								</div>
 							{/if}
-						</svelte:fragment>
+						{/snippet}
 					</Popover>
 					<div class="flex flex-col flex-1">
 						<Tooltip class="select-none w-48 truncate" disablePopup={disableLiTooltip}>
 							{asset.path}
-							<svelte:fragment slot="text">
+							{#snippet text()}
 								{asset.path}
-							</svelte:fragment>
+							{/snippet}
 						</Tooltip>
 						<span class="text-xs text-primary select-none">
 							{liSubtitle?.(asset) ??
@@ -172,7 +171,6 @@ $effect(() => {
 						onClick={() => (isOpen = false)}
 						{asset}
 						{resourceDataCache}
-						{dbManagerDrawer}
 						{resourceEditorDrawer}
 						{s3FilePicker}
 						{ducklakeNotFound}
@@ -181,7 +179,7 @@ $effect(() => {
 				</li>
 			{/each}
 		</ul>
-	</svelte:fragment>
+	{/snippet}
 </Popover>
 <S3FilePicker bind:this={s3FilePicker} readOnlyMode />
 <ResourceEditorDrawer bind:this={resourceEditorDrawer} />

package/package/components/assets/AssetsUsageDrawer.svelte

@@ -60,11 +60,13 @@ let runtimeUsages = $derived(usagesDrawerData?.usages.filter((u) => u.kind === '
 			<div class={twMerge('text-xs 	font-normal text-primary min-w-12 p-1 text-center rounded-md')}>
 				{text}
 			</div>
-			<svelte:fragment slot="text">
-				{#if tooltip}
-					{tooltip}
-				{/if}
-			</svelte:fragment>
+			{#snippet text()}
+					
+					{#if tooltip}
+						{tooltip}
+					{/if}
+				
+					{/snippet}
 		</Tooltip>
 	{/if}
 {/snippet}

package/package/components/assets/JobAssetsViewer.svelte

@@ -1,6 +1,6 @@
-<script lang="ts">import { ResourceService } from '../../gen';
+<script lang="ts">import { ResourceService, ScriptService } from '../../gen';
 import { inferAssets } from '../../infer';
-import { globalDbManagerDrawer, workspaceStore } from '../../stores';
+import { workspaceStore } from '../../stores';
 import { usePromise } from '../../svelte5Utils.svelte';
 import { pruneNullishArray, uniqueBy } from '../../utils';
 import ResourceEditorDrawer from '../ResourceEditorDrawer.svelte';
@@ -20,7 +20,15 @@ async function extractAssets(job) {
         ]), (x) => x.kind + x.path);
     }
     if (job.job_kind === 'script') {
-        let inferAssetsResult = await inferAssets(job.language, job.raw_code ?? '');
+        let code = job.raw_code;
+        if (!code && job.script_hash && $workspaceStore) {
+            const script = await ScriptService.getScriptByHash({
+                workspace: $workspaceStore,
+                hash: job.script_hash
+            });
+            code = script.content;
+        }
+        let inferAssetsResult = await inferAssets(job.language, code ?? '');
         let assets = inferAssetsResult.status === 'ok' ? inferAssetsResult.assets : [];
         return [...assets, ...parseInputArgsAssets(job.args ?? {})];
     }
@@ -47,7 +55,6 @@ $effect(() => {
     }
 });
 let s3FilePicker = $state();
-let dbManagerDrawer = $derived(globalDbManagerDrawer.val);
 let resourceEditorDrawer = $state();
 </script>
 
@@ -69,7 +76,6 @@ let resourceEditorDrawer = $state();
 				<AssetButtons
 					{asset}
 					{resourceDataCache}
-					{dbManagerDrawer}
 					{resourceEditorDrawer}
 					{s3FilePicker}
 				/>

package/package/components/assets/VolumeDetailDrawer.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">import { Drawer, DrawerContent } from '../common';
+import { VolumeService } from '../../gen';
+import { workspaceStore, userStore } from '../../stores';
+import { displayDate, displaySize, sendUserToast } from '../../utils';
+import { ExternalLink, Loader2, Trash2 } from 'lucide-svelte';
+import Button from '../common/button/Button.svelte';
+let { s3FilePicker } = $props();
+let open = $state(false);
+let volumeName = $state('');
+let loading = $state(false);
+let volume = $state(undefined);
+export function openDrawer(name) {
+    volumeName = name;
+    open = true;
+    loadVolume();
+}
+async function loadVolume() {
+    loading = true;
+    try {
+        const volumes = await VolumeService.listVolumes({ workspace: $workspaceStore });
+        volume = volumes.find((v) => v.name === volumeName);
+    }
+    finally {
+        loading = false;
+    }
+}
+async function deleteVolume() {
+    if (!confirm(`Delete volume '${volumeName}'? This cannot be undone.`))
+        return;
+    await VolumeService.deleteVolume({ workspace: $workspaceStore, name: volumeName });
+    sendUserToast(`Volume '${volumeName}' deleted`);
+    open = false;
+}
+function exploreFiles() {
+    open = false;
+    s3FilePicker?.open({ s3: `volumes/${volumeName}/` });
+}
+</script>
+
+<Drawer {open} size="600px" on:close={() => (open = false)}>
+	<DrawerContent title="Volume: {volumeName}" on:close={() => (open = false)}>
+		{#if loading}
+			<div class="flex items-center justify-center py-8">
+				<Loader2 size={24} class="animate-spin text-secondary" />
+			</div>
+		{:else if volume}
+			<div class="flex flex-col gap-4">
+				<div class="flex flex-col gap-2 border rounded-md p-4">
+					<div class="flex justify-between text-sm">
+						<span class="text-secondary">Files</span>
+						<span>{volume.file_count}</span>
+					</div>
+					<div class="flex justify-between text-sm">
+						<span class="text-secondary">Size</span>
+						<span>{displaySize(volume.size_bytes) ?? '0 B'}</span>
+					</div>
+					<div class="flex justify-between text-sm">
+						<span class="text-secondary">Created at</span>
+						<span>{displayDate(volume.created_at)}</span>
+					</div>
+					<div class="flex justify-between text-sm">
+						<span class="text-secondary">Created by</span>
+						<span>{volume.created_by}</span>
+					</div>
+					{#if volume.last_used_at}
+						<div class="flex justify-between text-sm">
+							<span class="text-secondary">Last used</span>
+							<span>{displayDate(volume.last_used_at)}</span>
+						</div>
+					{/if}
+				</div>
+
+				<div class="flex gap-2">
+					{#if s3FilePicker}
+						<Button
+							variant="border"
+							startIcon={{ icon: ExternalLink }}
+							on:click={exploreFiles}
+						>
+							Explore files
+						</Button>
+					{/if}
+					{#if $userStore?.is_admin}
+						<Button
+							variant="border"
+							btnClasses="text-red-500 hover:text-red-600"
+							startIcon={{ icon: Trash2 }}
+							on:click={deleteVolume}
+						>
+							Delete
+						</Button>
+					{/if}
+				</div>
+			</div>
+		{:else}
+			<div class="text-sm text-secondary py-8 text-center">
+				Volume '{volumeName}' not found.
+			</div>
+		{/if}
+	</DrawerContent>
+</Drawer>

package/package/components/assets/VolumeDetailDrawer.svelte.d.ts

@@ -0,0 +1,9 @@
+import type S3FilePicker from '../S3FilePicker.svelte';
+type $$ComponentProps = {
+    s3FilePicker?: S3FilePicker;
+};
+declare const VolumeDetailDrawer: import("svelte").Component<$$ComponentProps, {
+    openDrawer: (name: string) => void;
+}, "">;
+type VolumeDetailDrawer = ReturnType<typeof VolumeDetailDrawer>;
+export default VolumeDetailDrawer;

package/package/components/assets/VolumesDrawer.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">import { Alert, Drawer, DrawerContent } from '../common';
+import { VolumeService } from '../../gen';
+import { enterpriseLicense, workspaceStore, userStore } from '../../stores';
+import { displayDate, displaySize, emptyString, sendUserToast } from '../../utils';
+import { File, HardDriveIcon, Loader2, Plus, Shield, Trash2 } from 'lucide-svelte';
+import Button from '../common/button/Button.svelte';
+import SharedBadge from '../SharedBadge.svelte';
+import ShareModal from '../ShareModal.svelte';
+import Popover from '../meltComponents/Popover.svelte';
+import TextInput from '../text_input/TextInput.svelte';
+import { resource } from 'runed';
+let { onExplore } = $props();
+let open = $state(false);
+let refreshKey = $state(0);
+let shareModal = $state();
+let newVolumeName = $state('');
+let volumes = resource(() => (open ? { ws: $workspaceStore, key: refreshKey } : undefined), (params) => {
+    if (!params?.ws)
+        return Promise.resolve([]);
+    return VolumeService.listVolumes({ workspace: params.ws });
+});
+export function openDrawer() {
+    open = true;
+}
+async function createVolume(name, close) {
+    try {
+        await VolumeService.createVolume({
+            workspace: $workspaceStore,
+            requestBody: { name }
+        });
+        sendUserToast(`Volume '${name}' created`);
+        newVolumeName = '';
+        close();
+        refreshKey++;
+    }
+    catch (e) {
+        sendUserToast(`Failed to create volume: ${e}`, true);
+    }
+}
+async function deleteVolume(name) {
+    if (!confirm(`Delete volume '${name}'? This cannot be undone.`))
+        return;
+    await VolumeService.deleteVolume({ workspace: $workspaceStore, name });
+    sendUserToast(`Volume '${name}' deleted`);
+    refreshKey++;
+}
+function canReadVolume(createdBy, extraPerms) {
+    if ($userStore?.is_admin)
+        return true;
+    const username = $userStore?.username;
+    if (username === createdBy || `u/${username}` === createdBy)
+        return true;
+    const perms = extraPerms ?? {};
+    const keys = Object.keys(perms);
+    if (keys.length === 0)
+        return true; // public
+    if (`u/${username}` in perms)
+        return true;
+    const pgroups = $userStore?.pgroups ?? [];
+    return pgroups.some((g) => g in perms);
+}
+function canWriteVolume(createdBy, extraPerms) {
+    if ($userStore?.is_admin)
+        return true;
+    const username = $userStore?.username;
+    if (username === createdBy || `u/${username}` === createdBy)
+        return true;
+    if (extraPerms?.[`u/${username}`] === true)
+        return true;
+    const pgroups = $userStore?.pgroups ?? [];
+    return pgroups.some((g) => extraPerms?.[g] === true);
+}
+</script>
+
+<Drawer {open} size="700px" on:close={() => (open = false)}>
+	<DrawerContent title="Volumes" on:close={() => (open = false)}>
+		{#snippet actions()}
+			<Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}>
+				{#snippet trigger()}
+					<Button unifiedSize="sm" variant="accent" startIcon={{ icon: Plus }} nonCaptureEvent
+						>New volume</Button
+					>
+				{/snippet}
+				{#snippet content({ close })}
+					<div class="flex flex-col gap-2 p-4">
+						<TextInput
+							size="md"
+							inputProps={{
+								placeholder: 'Volume name',
+								onkeyup: (e) => {
+									if (e.key === 'Enter' && newVolumeName.trim()) {
+										createVolume(newVolumeName.trim(), close)
+									}
+								}
+							}}
+							bind:value={newVolumeName}
+						/>
+						<Button
+							unifiedSize="sm"
+							variant="accent"
+							startIcon={{ icon: Plus }}
+							disabled={!newVolumeName.trim()}
+							on:click={() => createVolume(newVolumeName.trim(), close)}
+						>
+							Create
+						</Button>
+					</div>
+				{/snippet}
+			</Popover>
+		{/snippet}
+		{#if emptyString($enterpriseLicense)}
+			<div class="mb-4">
+				<Alert type="info" title="Community Edition limits">
+					Volumes are limited to 20 per workspace and 50 MB per file. Upgrade to Enterprise Edition
+					to remove these limits.
+				</Alert>
+			</div>
+		{/if}
+		{#if volumes.loading}
+			<div class="flex items-center justify-center py-8">
+				<Loader2 size={24} class="animate-spin text-secondary" />
+			</div>
+		{:else if !volumes.current?.length}
+			<div class="text-sm text-secondary py-8 text-center">
+				No volumes yet. Create one above or they are auto-created when a job declares a volume
+				annotation.
+			</div>
+		{:else}
+			<div class="flex flex-col divide-y border rounded-md">
+				{#each volumes.current as vol (vol.name)}
+					{@const readable = canReadVolume(vol.created_by, vol.extra_perms)}
+					{@const writable = canWriteVolume(vol.created_by, vol.extra_perms)}
+					<div class="flex items-center gap-3 px-4 py-3 hover:bg-surface-hover">
+						<HardDriveIcon size={16} class="text-secondary shrink-0" />
+						<div class="flex flex-col flex-1 min-w-0">
+							<div class="flex items-center gap-1.5">
+								<span class="text-sm font-medium truncate">{vol.name}</span>
+								<SharedBadge
+									extraPerms={vol.extra_perms as Record<string, boolean>}
+									canWrite={writable}
+								/>
+							</div>
+							<span class="text-2xs text-secondary">
+								{vol.file_count}
+								{vol.file_count === 1 ? 'file' : 'files'}
+								&middot; {displaySize(vol.size_bytes) ?? '0 B'}
+								&middot; owner: {vol.created_by.replace(/^u\//, '')}
+							</span>
+						</div>
+						{#if vol.last_used_at}
+							<span class="text-2xs text-secondary shrink-0">
+								Used {displayDate(vol.last_used_at)}
+							</span>
+						{/if}
+						{#if writable}
+							<Button
+								variant="subtle"
+								iconOnly
+								unifiedSize="sm"
+								endIcon={{ icon: Shield }}
+								on:click={() => shareModal?.openDrawer(vol.name, 'volume', true)}
+							/>
+						{/if}
+						{#if onExplore && readable}
+							<Button
+								variant="default"
+								unifiedSize="sm"
+								endIcon={{ icon: File }}
+								on:click={() => onExplore(vol.name)}
+							>
+								Explore
+							</Button>
+						{/if}
+						{#if writable}
+							<Button
+								variant="subtle"
+								iconOnly
+								unifiedSize="sm"
+								btnClasses="text-red-500 hover:text-red-600"
+								endIcon={{ icon: Trash2 }}
+								on:click={() => deleteVolume(vol.name)}
+							/>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</DrawerContent>
+</Drawer>
+
+<ShareModal bind:this={shareModal} on:change={() => refreshKey++} />

package/package/components/assets/VolumesDrawer.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    onExplore?: (volumeName: string) => void;
+};
+declare const VolumesDrawer: import("svelte").Component<$$ComponentProps, {
+    openDrawer: () => void;
+}, "">;
+type VolumesDrawer = ReturnType<typeof VolumesDrawer>;
+export default VolumesDrawer;

package/package/components/assets/assetsFilter.d.ts

@@ -3,6 +3,10 @@ export declare function buildAssetsFilterSchema({ paths, assetKinds }: {
     paths: string[];
     assetKinds: string[];
 }): {
+    _default_: {
+        type: "string";
+        hidden: true;
+    };
     asset_path: {
         type: "string";
         label: string;

package/package/components/assets/assetsFilter.js

@@ -1,6 +1,10 @@
 import { FileCode, FolderIcon, Box, Braces } from 'lucide-svelte';
 export function buildAssetsFilterSchema({ paths, assetKinds }) {
     return {
+        _default_: {
+            type: 'string',
+            hidden: true
+        },
         asset_path: {
             type: 'string',
             label: 'Asset path pattern',

package/package/components/assets/lib.js

@@ -9,6 +9,8 @@ export function formatAsset(asset) {
             return `ducklake://${asset.path}`;
         case 'datatable':
             return `datatable://${asset.path}`;
+        case 'volume':
+            return `volume://${asset.path}`;
     }
     return 'unknown';
 }
@@ -76,6 +78,8 @@ export function formatAssetKind(asset) {
             return 'Ducklake';
         case 'datatable':
             return 'Data table';
+        case 'volume':
+            return 'Volume';
     }
 }
 export function formatAssetAccessType(accessType) {

package/package/components/auditLogs/AuditLogsFilters.svelte

@@ -68,7 +68,7 @@ function loadLogs() {
         loading = false;
     });
     promise = CancelablePromiseUtils.onTimeout(promise, 4000, () => {
-        sendUserToast('Loading audit logs is taking longer than expected...', true, perPage > 25
+        sendUserToast('Loading audit logs is taking longer than expected...', 'warning', perPage > 25
             ? [{ label: 'Reduce to 25 items per page', callback: () => (perPage = 25) }]
             : []);
     });
@@ -401,12 +401,9 @@ $effect(() => {
 			on:click={downloadAuditLogsAsJson}
 			unifiedSize="md"
 			title="Downloads currently displayed logs only (up to {perPage} entries)"
-		>
-			<div class="flex flex-row gap-1 items-center">
-				<Download size={14} />
-				Download JSON
-			</div>
-		</Button>
+			startIcon={{ icon: Download }}
+			iconOnly
+		/>
 		<Button
 			variant="accent"
 			on:click={() => {

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

@@ -15,8 +15,8 @@ $effect(() => {
     untrack(() => {
         chart = new Chart(canvasElem, {
             type,
-            data,
-            options
+            data: $state.snapshot(data),
+            options: $state.snapshot(options)
         });
     });
     return () => {
@@ -24,10 +24,10 @@ $effect(() => {
     };
 });
 $effect(() => {
-    chart;
+    data;
     untrack(() => {
         if (chart) {
-            chart.data = data;
+            chart.data = $state.snapshot(data);
             chart.update();
         }
     });

package/package/components/common/FileProgressBar.svelte

@@ -1,19 +1,21 @@
-<script lang="ts">import { tweened } from 'svelte/motion';
+<script lang="ts">import { untrack } from 'svelte';
+import { run } from 'svelte/legacy';
+import { tweened } from 'svelte/motion';
 import { cubicOut } from 'svelte/easing';
-export let color = 'blue';
-export let progress = 0;
-export let ended = false;
-const tweenedProgress = tweened(progress, {
+let { color = 'blue', progress = 0, ended = false, children } = $props();
+const tweenedProgress = tweened(untrack(() => progress), {
     duration: 400,
     easing: cubicOut
 });
-$: tweenedProgress.set(progress);
+run(() => {
+    tweenedProgress.set(progress);
+});
 </script>
 
 {#key color}
 	<div class="flex flex-row gap-1 items-center justify-between w-full">
 		{#if ended}
-			<slot />
+			{@render children?.()}
 		{:else}
 			<div class="progress-bar">
 				<div

package/package/components/common/FileProgressBar.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 FileProgressBar: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     color?: string;
     progress?: number;
     ended?: boolean;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type FileProgressBar = InstanceType<typeof FileProgressBar>;
+    children?: import('svelte').Snippet;
+}
+declare const FileProgressBar: import("svelte").Component<Props, {}, "">;
+type FileProgressBar = ReturnType<typeof FileProgressBar>;
 export default FileProgressBar;

package/package/components/common/InlineCalendarInput.svelte

@@ -454,7 +454,11 @@ function setYear(raw) {
 				<span
 					class={twMerge(
 						'relative z-10',
-						selected ? 'text-white dark:text-white' : isToday && !disabled ? 'text-accent' : ''
+						selected
+							? 'text-white dark:text-white'
+							: isToday && !disabled
+								? 'text-accent font-semibold'
+								: ''
 					)}
 				>
 					{cell.day}

package/package/components/common/alert/Notification.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">export let notificationCount = 0;
-export let notificationLimit = undefined;
+<script lang="ts">"use strict";
+let { notificationCount = 0, notificationLimit = undefined } = $props();
 </script>
 
 {#if notificationCount > 0}

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

@@ -1,21 +1,7 @@
-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 Notification: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     notificationCount?: number;
     notificationLimit?: number | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Notification = InstanceType<typeof Notification>;
+}
+declare const Notification: import("svelte").Component<Props, {}, "">;
+type Notification = ReturnType<typeof Notification>;
 export default Notification;