windmill-components 1.642.0 → 1.655.1

package/package/components/select/GenericDropdown.svelte

@@ -13,7 +13,10 @@ function computeDropdownPos() {
         return { width: 0, height: 0, x: 0, y: 0, isBelow: true };
     let inputR = getInputRect();
     const listR = listEl.getBoundingClientRect();
-    const isBelow = inputR.y + inputR.height + listR.height <= window.innerHeight;
+    const fitsBelow = inputR.y + inputR.height + listR.height <= window.innerHeight;
+    const spaceBelow = window.innerHeight - (inputR.y + inputR.height);
+    const spaceAbove = inputR.y;
+    const isBelow = fitsBelow || spaceBelow >= spaceAbove;
     let [x, y] = disablePortal ? [0, 0] : [inputR.x, inputR.y];
     if (isBelow)
         return { width: inputR.width, height: listR.height, x: x, y: y + inputR.height, isBelow };
@@ -38,7 +41,7 @@ $effect(() => {
 // We do not use Svelte transitions because they can not animate in the opposite direction
 // when the dropdown is opens above the input
 // Also CSS transitions are smoother because they do not rely on JS / animation frames
-let uiState = $state({ domExists: open, visible: open, timeout: null });
+let uiState = $state({ domExists: untrack(() => open), visible: untrack(() => open), timeout: null });
 let initial = true;
 watch(() => open && !disabled, (isOpen) => {
     untrack(() => {

package/package/components/select/MultiSelect.svelte

@@ -45,6 +45,7 @@ export function getFilteredInputText() {
 }
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	bind:this={wrapperEl}
 	class={twMerge(

package/package/components/select/Select.svelte

@@ -52,6 +52,7 @@ let inputText = $derived.by(() => {
 });
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class={`relative h-fit ${className}`}
 	use:clickOutside={{ onClickOutside: () => (open = false) }}

package/package/components/select/SelectDropdown.svelte

@@ -22,7 +22,7 @@ let enableOverflowYAuto = new Debounced(() => isVisible, 15);
 </script>
 
 <svelte:window
-	on:keydown={(e) => {
+	onkeydown={(e) => {
 		if (!isVisible || !processedItems?.length) return
 		if (e.key === 'ArrowUp' && keyArrowPos !== undefined && processedItems.length > 0) {
 			keyArrowPos = keyArrowPos <= 0 ? undefined : keyArrowPos - 1

package/package/components/settings/ChangeWorkspaceId.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { workspaceStore, superadmin } from '../../stores';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { workspaceStore, superadmin } from '../../stores';
 import Alert from '../common/alert/Alert.svelte';
 import Button from '../common/button/Button.svelte';
 import { sendUserToast } from '../../toast';
@@ -6,12 +7,10 @@ import { WorkspaceService } from '../../gen';
 import Modal from '../common/modal/Modal.svelte';
 import { Pen } from 'lucide-svelte';
 import { isCloudHosted } from '../../cloud';
-let newName = '';
-let newId = '';
-let checking = false;
-let errorId = '';
-$: newId = newName.toLowerCase().replace(/\s/gi, '-');
-$: validateName(newId);
+let newName = $state('');
+let newId = $state('');
+let checking = $state(false);
+let errorId = $state('');
 async function validateName(id) {
     checking = true;
     let exists = await WorkspaceService.existsWorkspace({ requestBody: { id } });
@@ -26,7 +25,7 @@ async function validateName(id) {
     }
     checking = false;
 }
-let loading = false;
+let loading = $state(false);
 async function renameWorkspace() {
     try {
         loading = true;
@@ -49,7 +48,13 @@ async function renameWorkspace() {
         loading = false;
     }
 }
-export let open = false;
+let { open = $bindable(false) } = $props();
+run(() => {
+    newId = newName.toLowerCase().replace(/\s/gi, '-');
+});
+run(() => {
+    validateName(newId);
+});
 </script>
 
 <div class="flex flex-col gap-1">

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

package/package/components/settings/CreateToken.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { userWorkspaces, workspaceStore } from '../../stores';
+<script lang="ts">import { untrack } from 'svelte';
+import { userWorkspaces, workspaceStore } from '../../stores';
 import { Badge, Button } from '../common';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
@@ -10,19 +11,16 @@ import MultiSelect from '../select/MultiSelect.svelte';
 import { safeSelectItems } from '../select/utils.svelte';
 import TokenDisplay from './TokenDisplay.svelte';
 import ScopeSelector from './ScopeSelector.svelte';
-import Alert from '../common/alert/Alert.svelte';
 import FolderPicker from '../FolderPicker.svelte';
 import TextInput from '../text_input/TextInput.svelte';
 import Select from '../select/Select.svelte';
 import { mcpEndpointTools } from '../../mcpEndpointTools';
 import InfoIcon from 'lucide-svelte/icons/info';
 let { showMcpMode = false, defaultNewTokenWorkspace, scopes, onTokenCreated, newTokenLabel = $bindable(undefined), displayCreateToken = true } = $props();
-// MCP clients do not allow names longer than 60 characters, here we use 55 because final tool name server side will add ~5 characters
-const MAX_PATH_LENGTH = 55;
 let newToken = $state(undefined);
 let newMcpToken = $state(undefined);
 let newTokenExpiration = $state(undefined);
-let newTokenWorkspace = $state(defaultNewTokenWorkspace);
+let newTokenWorkspace = $state(untrack(() => defaultNewTokenWorkspace));
 let newMcpApps = $state([]);
 let mcpCreationMode = $state(false);
 let newMcpScope = $state('favorites');
@@ -141,11 +139,6 @@ const warning = $derived(newMcpScope === 'all'
     : newMcpScope === 'favorites'
         ? `You do not have any favorite scripts or flows. You can favorite some scripts and flows to include them, or change the scope to "All scripts/flows" to include all your scripts and flows.`
         : `You do not have any scripts or flows in the selected folder.`);
-const longPathRunnables = $derived(includedRunnables.filter((path) => path.length > MAX_PATH_LENGTH));
-const validRunnables = $derived(includedRunnables.filter((path) => path.length <= MAX_PATH_LENGTH));
-const longPathWarning = $derived(longPathRunnables.length > 0
-    ? `${longPathRunnables.length} script(s)/flow(s) have paths longer than 60 characters and will be excluded from MCP tools. Consider shortening the paths: ${longPathRunnables.slice(0, 3).join(', ')}${longPathRunnables.length > 3 ? ` and ${longPathRunnables.length - 3} more` : ''}`
-    : '');
 $effect(() => {
     if (mcpCreationMode) {
         getAllApps();
@@ -553,23 +546,18 @@ function clearAllEndpoints() {
 					</div>
 				{:else}
 					<div class="flex flex-col gap-2 col-span-2 pr-4">
-						{#if longPathWarning}
-							<Alert type="warning" title="Some paths are too long" size="xs">
-								{longPathWarning}
-							</Alert>
-						{/if}
 						<span class="block text-xs">Scripts & Flows that will be available via MCP</span>
 						<div class="flex flex-wrap gap-1">
-							{#if validRunnables.length > 0 && validRunnables.length <= 5}
-								{#each validRunnables as scriptOrFlow}
+							{#if includedRunnables.length > 0 && includedRunnables.length <= 5}
+								{#each includedRunnables as scriptOrFlow}
 									<Badge rounded small color="blue">{scriptOrFlow}</Badge>
 								{/each}
-							{:else if validRunnables.length > 0}
-								{#each validRunnables.slice(0, 3) as scriptOrFlow}
+							{:else if includedRunnables.length > 0}
+								{#each includedRunnables.slice(0, 3) as scriptOrFlow}
 									<Badge rounded small color="blue">{scriptOrFlow}</Badge>
 								{/each}
 								<Badge rounded small color="dark-gray">
-									+{validRunnables.length - 3} more
+									+{includedRunnables.length - 3} more
 								</Badge>
 							{:else}
 								<p class="text-xs text-primary">

package/package/components/settings/PremiumInfo.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { base } from '../../base';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { base } from '../../base';
 import { capitalize, pluralize, sendUserToast } from '../../utils';
 import DataTable from '../table/DataTable.svelte';
 import Cell from '../table/Cell.svelte';
@@ -12,10 +13,9 @@ import Section from '../Section.svelte';
 import Range from '../Range.svelte';
 import Modal from '../common/modal/Modal.svelte';
 import { slide } from 'svelte/transition';
-export let plan;
-export let customer_id;
+let { plan, customer_id } = $props();
 let users = undefined;
-let premiumInfo = undefined;
+let premiumInfo = $state(undefined);
 const plans = {
     Free: [
         'Users use their individual global free-tier quotas when doing executions in this workspace',
@@ -36,13 +36,6 @@ const plans = {
         `<div class="mt-4">Self-hosted licenses also available</div>`
     ]
 };
-$: {
-    if ($workspaceStore) {
-        loadPremiumInfo();
-        listUsers();
-        getThresholdAlert();
-    }
-}
 async function listUsers() {
     users = await UserService.listUsers({ workspace: $workspaceStore });
 }
@@ -65,9 +58,9 @@ async function loadPremiumInfo() {
         usedSeats
     };
 }
-let thresholdAlert = undefined;
-let newThresholdAlertAmount = undefined;
-let thresholdAlertOpen = false;
+let thresholdAlert = $state(undefined);
+let newThresholdAlertAmount = $state(undefined);
+let thresholdAlertOpen = $state(false);
 async function getThresholdAlert() {
     thresholdAlert = await WorkspaceService.getThresholdAlert({ workspace: $workspaceStore });
 }
@@ -83,18 +76,27 @@ async function setThresholdAlert() {
         sendUserToast('Threshold alert updated');
     }
 }
-let estimatedDevsRaw = 1;
-let estimatedOps = 0;
-$: estimatedDevs = Math.max(1, estimatedDevsRaw);
-$: estimatedSeats = estimatedDevs + Math.ceil(estimatedOps / 2);
-let estimatedExecs = 1;
+let estimatedDevsRaw = $state(1);
+let estimatedOps = $state(0);
+let estimatedExecs = $state(1);
 function updateExecs() {
     if (estimatedExecs < estimatedSeats) {
         estimatedExecs = estimatedSeats;
     }
 }
-$: estimatedSeats && updateExecs();
 const formatNumber = (value) => value.toLocaleString('en-US');
+run(() => {
+    if ($workspaceStore) {
+        loadPremiumInfo();
+        listUsers();
+        getThresholdAlert();
+    }
+});
+let estimatedDevs = $derived(Math.max(1, estimatedDevsRaw));
+let estimatedSeats = $derived(estimatedDevs + Math.ceil(estimatedOps / 2));
+run(() => {
+    estimatedSeats && updateExecs();
+});
 </script>
 
 <Modal bind:open={thresholdAlertOpen} title="Threshold alert">
@@ -105,17 +107,19 @@ const formatNumber = (value) => value.toLocaleString('en-US');
 		</label>
 	</div>
 
-	<svelte:fragment slot="actions">
-		<Button
-			size="sm"
-			on:click={() => {
-				setThresholdAlert()
-				thresholdAlertOpen = false
-			}}
-		>
-			Save
-		</Button>
-	</svelte:fragment>
+	{#snippet actions()}
+	
+			<Button
+				size="sm"
+				on:click={() => {
+					setThresholdAlert()
+					thresholdAlertOpen = false
+				}}
+			>
+				Save
+			</Button>
+		
+	{/snippet}
 </Modal>
 
 <div class="flex flex-col gap-4 mt-8">
@@ -462,7 +466,7 @@ const formatNumber = (value) => value.toLocaleString('en-US');
 					{#if premiumInfo?.premium && plan === 'team'}
 						<button
 							class="mt-1 text-[11px] text-blue-500 underline self-start"
-							on:click={() => {
+							onclick={() => {
 								newThresholdAlertAmount = (estimatedSeats + (estimatedExecs - estimatedSeats)) * 10
 								thresholdAlertOpen = true
 							}}

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

package/package/components/settings/TokensTable.svelte

@@ -1,18 +1,65 @@
-<script lang="ts">import TableCustom from '../TableCustom.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import TableCustom from '../TableCustom.svelte';
 import { displayDate } from '../../utils';
 import { UserService } from '../../gen';
 import { sendUserToast } from '../../toast';
 import CreateToken from './CreateToken.svelte';
 import Button from '../common/button/Button.svelte';
+import Badge from '../common/badge/Badge.svelte';
+import Alert from '../common/alert/Alert.svelte';
 import { Trash } from 'lucide-svelte';
 let { showMcpMode = false, openWithMcpMode = false, defaultNewTokenLabel, defaultNewTokenWorkspace, scopes, onTokenCreated } = $props();
 // --- Local State ---
 let tokens = $state([]);
 let tokenPage = $state(1);
-let newTokenLabel = $state(defaultNewTokenLabel);
+let newTokenLabel = $state(untrack(() => defaultNewTokenLabel));
 $effect(() => {
     listTokens();
 });
+// When updating this filter, also update:
+// - `is_user_token` in backend/src/monitor.rs
+// - `register_token_expiry_notification` in backend/windmill-api-auth/src/lib.rs
+function isUserToken(label) {
+    if (!label)
+        return true;
+    return (label !== 'session' &&
+        !label.toLowerCase().startsWith('ephemeral') &&
+        label !== 'debugger-token' &&
+        !label.startsWith('mcp-oauth-'));
+}
+function daysUntilExpiration(expiration) {
+    if (!expiration)
+        return null;
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const exp = new Date(expiration);
+    exp.setHours(0, 0, 0, 0);
+    return Math.round((exp.getTime() - today.getTime()) / 86400000);
+}
+function expirationBadge(expiration, label) {
+    if (!isUserToken(label))
+        return null;
+    const days = daysUntilExpiration(expiration);
+    if (days === null)
+        return null;
+    if (days < 0)
+        return { color: 'red', text: 'Expired' };
+    if (days === 0)
+        return { color: 'red', text: 'Expires today' };
+    if (days === 1)
+        return { color: 'orange', text: 'Expires tomorrow' };
+    if (days <= 7)
+        return { color: 'orange', text: `Expires in ${days}d` };
+    if (days <= 30)
+        return { color: 'yellow', text: `Expires in ${days}d` };
+    return null;
+}
+let expiringSoonCount = $derived(tokens.filter((t) => {
+    if (!isUserToken(t.label))
+        return false;
+    const days = daysUntilExpiration(t.expiration);
+    return days !== null && days >= 0 && days <= 7;
+}).length);
 function handleTokenCreated(token) {
     onTokenCreated(token);
     listTokens();
@@ -44,6 +91,11 @@ function handlePreviousPage() {
 	<div class="text-xs text-secondary mb-2">
 		Authenticate to the Windmill API with access tokens.
 	</div>
+	{#if expiringSoonCount > 0}
+		<div class="mb-2">
+			<Alert type="warning" title="{expiringSoonCount} token{expiringSoonCount > 1 ? 's' : ''} expiring within 7 days" size="xs" />
+		</div>
+	{/if}
 	<CreateToken
 		{showMcpMode}
 		{openWithMcpMode}
@@ -54,24 +106,32 @@ function handlePreviousPage() {
 	/>
 	<div class="overflow-auto grow min-h-64 max-h-2/3">
 		<TableCustom>
-			<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-			<tr slot="header-row">
-				<th>Prefix</th>
-				<th>Label</th>
-				<th>Expiration</th>
-				<th>Scopes</th>
-				<th></th>
-			</tr>
+
+			{#snippet headerRow()}
+						<tr >
+					<th>Prefix</th>
+					<th>Label</th>
+					<th>Expiration</th>
+					<th>Scopes</th>
+					<th></th>
+				</tr>
+					{/snippet}
 			{#snippet body()}
 				<tbody>
 					{#if tokens && tokens.length > 0}
-						{#each tokens as { token_prefix, expiration, label, scopes }}
+						{#each tokens as { token_prefix, expiration, label, scopes } (token_prefix)}
+							{@const badge = expirationBadge(expiration, label)}
 							<tr>
 								<td class="w-32 text-xs text-primary">{token_prefix}****</td>
 								<td class="min-w-0 max-w-32 truncate text-xs text-primary">{label ?? ''}</td>
-								<td class="w-24 whitespace-nowrap text-xs text-secondary"
-									>{displayDate(expiration ?? '')}</td
-								>
+								<td class="w-40 whitespace-nowrap text-xs text-secondary">
+									<div class="flex items-center gap-1.5">
+										{displayDate(expiration ?? '')}
+										{#if badge}
+											<Badge color={badge.color} small>{badge.text}</Badge>
+										{/if}
+									</div>
+								</td>
 								<td
 									class="min-w-0 max-w-48 truncate text-xs text-secondary"
 									title={scopes?.join(', ') ?? ''}>{scopes?.join(', ') ?? ''}</td

package/package/components/settings/WorkspaceUserSettings.svelte

@@ -485,7 +485,6 @@ const displayMode = $derived.by(() => {
 				<Popover
 					floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
 					usePointerDownOutside
-					floatingClass="!z-20"
 				>
 					{#snippet trigger()}
 						<Button

package/package/components/sidebar/CriticalAlertModal.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { onMount, onDestroy } from 'svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { onMount, onDestroy } from 'svelte';
 import CriticalAlertModalInner from './CriticalAlertModalInner.svelte';
 import { SettingService } from '../../gen';
 import { sendUserToast } from '../../toast';
@@ -11,22 +12,14 @@ import Toggle from '../Toggle.svelte';
 import { BellOff, Bell, ExternalLink, Settings } from 'lucide-svelte';
 import { base } from '../../base';
 import Notification from '../common/alert/Notification.svelte';
-export let open = false;
-export let numUnacknowledgedCriticalAlerts = 0;
-export let muteSettings;
-let workspaceContext = false;
-let childRef;
-$: {
-    setupApiFunctions(workspaceContext);
-}
+let { open = $bindable(false), numUnacknowledgedCriticalAlerts = $bindable(0), muteSettings = $bindable() } = $props();
+let workspaceContext = $state(false);
+let childRef = $state();
 function setupApiFunctions(_ctx) {
     getCriticalAlerts = withSuperadminLogic(SettingService.getCriticalAlerts, SettingService.workspaceGetCriticalAlerts);
     acknowledgeCriticalAlert = withSuperadminLogic(SettingService.acknowledgeCriticalAlert, SettingService.workspaceAcknowledgeCriticalAlert);
     acknowledgeAllCriticalAlerts = withSuperadminLogic(SettingService.acknowledgeAllCriticalAlerts, SettingService.workspaceAcknowledgeAllCriticalAlerts);
 }
-$: isCriticalAlertsUIOpen.set(open);
-$: if ($isCriticalAlertsUIOpen)
-    open = $isCriticalAlertsUIOpen;
 let checkForNewAlertsInterval;
 let checkingForNewAlerts = false;
 const withSuperadminLogic = (superadminFunction, workspaceFunction) => {
@@ -42,9 +35,9 @@ const withSuperadminLogic = (superadminFunction, workspaceFunction) => {
         }
     };
 };
-let getCriticalAlerts;
-let acknowledgeCriticalAlert;
-let acknowledgeAllCriticalAlerts;
+let getCriticalAlerts = $state();
+let acknowledgeCriticalAlert = $state();
+let acknowledgeAllCriticalAlerts = $state();
 setupApiFunctions();
 onMount(async () => {
     await updateHasUnacknowledgedCriticalAlerts(false);
@@ -63,7 +56,7 @@ async function saveWorkSpaceMuteSetting() {
         }
     });
     sendUserToast(`Critical alert UI mute settings changed.\nPlease reload page for UI changes to take effect.`);
-    childRef.refreshAlerts();
+    childRef?.refreshAlerts();
 }
 async function saveGlobalMuteSetting() {
     await SettingService.setGlobal({
@@ -71,7 +64,7 @@ async function saveGlobalMuteSetting() {
         requestBody: { value: muteSettings.global }
     });
     sendUserToast(`Critical alert UI mute settings changed.\nPlease reload page for UI changes to take effect.`);
-    childRef.refreshAlerts();
+    childRef?.refreshAlerts();
 }
 async function updateHasUnacknowledgedCriticalAlerts(sendToast = false) {
     if (typeof document !== 'undefined' && document.visibilityState !== 'visible') {
@@ -129,9 +122,19 @@ async function updateHasUnacknowledgedCriticalAlerts(sendToast = false) {
     }
 }
 async function acknowledgeAlert(id) {
-    await acknowledgeCriticalAlert({ id });
+    await acknowledgeCriticalAlert?.({ id });
     updateHasUnacknowledgedCriticalAlerts();
 }
+run(() => {
+    setupApiFunctions(workspaceContext);
+});
+run(() => {
+    if ($isCriticalAlertsUIOpen)
+        open = $isCriticalAlertsUIOpen;
+});
+run(() => {
+    isCriticalAlertsUIOpen.set(open);
+});
 </script>
 
 <Modal2
@@ -141,10 +144,10 @@ async function acknowledgeAlert(id) {
 	fixedHeight="lg"
 	fixedWidth="lg"
 >
-	<svelte:fragment slot="header-left">
+	{#snippet headerLeft()}
 		<Notification notificationCount={numUnacknowledgedCriticalAlerts} notificationLimit={9999} />
-	</svelte:fragment>
-	<svelte:fragment slot="header-right">
+	{/snippet}
+	{#snippet headerRight()}
 		<List horizontal>
 			{#if $superadmin || $userStore?.is_admin}
 				<Popover
@@ -152,7 +155,7 @@ async function acknowledgeAlert(id) {
 					portal="#mute-settings-button"
 					contentClasses="p-4"
 				>
-					<svelte:fragment slot="trigger">
+					{#snippet trigger()}
 						<div id="mute-settings-button">
 							<Button variant="default" nonCaptureEvent>
 								{#if muteSettings.global || muteSettings.workspace}
@@ -162,8 +165,8 @@ async function acknowledgeAlert(id) {
 								{/if}
 							</Button>
 						</div>
-					</svelte:fragment>
-					<svelte:fragment slot="content">
+					{/snippet}
+					{#snippet content()}
 						<List justify="start">
 							<div class="w-full">
 								{#if $superadmin}
@@ -189,7 +192,7 @@ async function acknowledgeAlert(id) {
 								/>
 							</div>
 						</List>
-					</svelte:fragment>
+					{/snippet}
 				</Popover>
 			{/if}
 
@@ -199,14 +202,14 @@ async function acknowledgeAlert(id) {
 					portal="#settings-button"
 					contentClasses="p-4"
 				>
-					<svelte:fragment slot="trigger">
+					{#snippet trigger()}
 						<div id="settings-button">
 							<Button variant="default" nonCaptureEvent>
 								<Settings size="16" />
 							</Button>
 						</div>
-					</svelte:fragment>
-					<svelte:fragment slot="content">
+					{/snippet}
+					{#snippet content()}
 						<List justify="start" gap="none">
 							<div class="w-full">
 								<Button
@@ -234,7 +237,7 @@ async function acknowledgeAlert(id) {
 								</Button>
 							</div>
 						</List>
-					</svelte:fragment>
+					{/snippet}
 				</Popover>
 			{:else}
 				<Button
@@ -250,7 +253,7 @@ async function acknowledgeAlert(id) {
 				</Button>
 			{/if}
 		</List>
-	</svelte:fragment>
+	{/snippet}
 
 	<CriticalAlertModalInner
 		bind:workspaceContext

package/package/components/sidebar/CriticalAlertModal.svelte.d.ts

@@ -1,22 +1,8 @@
-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 CriticalAlertModal: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     open?: boolean;
     numUnacknowledgedCriticalAlerts?: number;
     muteSettings: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CriticalAlertModal = InstanceType<typeof CriticalAlertModal>;
+}
+declare const CriticalAlertModal: import("svelte").Component<Props, {}, "open" | "numUnacknowledgedCriticalAlerts" | "muteSettings">;
+type CriticalAlertModal = ReturnType<typeof CriticalAlertModal>;
 export default CriticalAlertModal;