windmill-components 1.642.0 → 1.655.0

package/package/components/schema/AddProperty.svelte

@@ -3,7 +3,7 @@ import { emptySchema, sendUserToast } from '../../utils';
 import { createEventDispatcher } from 'svelte';
 import SimpleEditor from '../SimpleEditor.svelte';
 import AddPropertyForm from './AddPropertyForm.svelte';
-export let schema = emptySchema();
+let { schema = $bindable(emptySchema()) } = $props();
 export const DEFAULT_PROPERTY = {
     selectedType: 'string',
     description: '',

package/package/components/schema/AddProperty.svelte.d.ts

@@ -1,4 +1,7 @@
 import { type Schema, type ModalSchemaProperty } from '../../common';
+interface Props {
+    schema?: Schema | any;
+}
 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;
@@ -12,17 +15,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const AddProperty: $$__sveltets_2_IsomorphicComponent<{
-    schema?: Schema | any;
-    DEFAULT_PROPERTY?: ModalSchemaProperty;
-    handleDeleteArgument?: (argPath: string[], nschema?: Schema) => void;
-}, {
+declare const AddProperty: $$__sveltets_2_IsomorphicComponent<Props, {
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     DEFAULT_PROPERTY: ModalSchemaProperty;
     handleDeleteArgument: (argPath: string[], nschema?: Schema) => void;
-}, string>;
+}, "schema">;
 type AddProperty = InstanceType<typeof AddProperty>;
 export default AddProperty;

package/package/components/schema/AddPropertyForm.svelte

@@ -2,7 +2,7 @@
 import { Button } from '../common';
 import { Plus } from 'lucide-svelte';
 import TextInput from '../text_input/TextInput.svelte';
-let name = '';
+let name = $state('');
 const dispatch = createEventDispatcher();
 function addField() {
     dispatch('add', { name });

package/package/components/schema/AddPropertyForm.svelte.d.ts

@@ -15,6 +15,6 @@ declare const AddPropertyForm: $$__sveltets_2_IsomorphicComponent<Record<string,
     add: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type AddPropertyForm = InstanceType<typeof AddPropertyForm>;
 export default AddPropertyForm;

package/package/components/schema/EditableSchemaSdkWrapper.svelte

@@ -1,8 +1,9 @@
-<script lang="ts">import { readFieldsRecursively } from '../../utils';
+<script lang="ts">import { untrack } from 'svelte';
+import { readFieldsRecursively } from '../../utils';
 import { deepEqual } from 'fast-equals';
 import EditableSchemaWrapper from './EditableSchemaWrapper.svelte';
 let { schema: oldSchema, onSchemaChange, ...props } = $props();
-let schema = $state(oldSchema);
+let schema = $state(untrack(() => oldSchema));
 let lastSchema = $state(undefined);
 $effect(() => {
     if (onSchemaChange && schema) {

package/package/components/schema/FlowPropertyEditor.svelte

@@ -123,11 +123,7 @@ let customObjectSelected = $state(format?.startsWith('jsonschema-') ? 'json-sche
 			<div class="flex flex-row gap-2 items-center ml-1 mt-4 mb-2">
 				<span class="font-semibold text-sm">{oneOfSelected}</span>
 
-				<Popover
-					floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-					containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
-					closeButton
-				>
+				<Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }} closeButton>
 					{#snippet trigger()}
 						<Button
 							size="xs2"

package/package/components/schema/RunningJobSchemaPicker.svelte

@@ -2,18 +2,15 @@
 import Skeleton from '../common/skeleton/Skeleton.svelte';
 import { JobService } from '../../gen/index.js';
 import { workspaceStore } from '../../stores';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import { ExternalLink } from 'lucide-svelte';
 import { base } from '../../base';
 import { Cell, Row } from '../table';
 import { twMerge } from 'tailwind-merge';
-export let job;
-export let selected = false;
-export let payloadData = undefined;
 const dispatch = createEventDispatcher();
-export let hovering = false;
-let loadingArgs = true;
-loadArgsFromRunningJob(job.id);
+let { job, selected = false, payloadData = $bindable(undefined), hovering = $bindable(false) } = $props();
+let loadingArgs = $state(true);
+loadArgsFromRunningJob(untrack(() => job).id);
 async function loadArgsFromRunningJob(id) {
     if (!id)
         return;
@@ -45,29 +42,33 @@ async function loadArgsFromRunningJob(id) {
 		on:hover={(e) => (hovering = e.detail ? true : false)}
 	>
 		<SchemaPickerRow {payloadData} date={job.started_at} {hovering}>
-			<svelte:fragment slot="start">
-				<div class="center-center">
-					<div
-						class={twMerge(
-							'rounded-full w-2 h-2 animate-pulse',
-							job.suspend ? 'bg-violet-400' : 'bg-orange-400'
-						)}
-						title="Running"
-					></div>
-				</div>
-			</svelte:fragment>
-			<svelte:fragment slot="extra">
-				<div class="center-center {hovering ? '' : '!hidden'}">
-					<a
-						target="_blank"
-						href="{base}/run/{job.id}?workspace={$workspaceStore}"
-						class="text-right float-right text-secondary"
-						title="See run detail in a new tab"
-					>
-						<ExternalLink size={16} />
-					</a>
-				</div>
-			</svelte:fragment>
+			{#snippet start()}
+					
+					<div class="center-center">
+						<div
+							class={twMerge(
+								'rounded-full w-2 h-2 animate-pulse',
+								job.suspend ? 'bg-violet-400' : 'bg-orange-400'
+							)}
+							title="Running"
+						></div>
+					</div>
+				
+					{/snippet}
+			{#snippet extra()}
+					
+					<div class="center-center {hovering ? '' : '!hidden'}">
+						<a
+							target="_blank"
+							href="{base}/run/{job.id}?workspace={$workspaceStore}"
+							class="text-right float-right text-secondary"
+							title="See run detail in a new tab"
+						>
+							<ExternalLink size={16} />
+						</a>
+					</div>
+				
+					{/snippet}
 		</SchemaPickerRow>
 	</Row>
 {/if}

package/package/components/schema/RunningJobSchemaPicker.svelte.d.ts

@@ -1,3 +1,9 @@
+interface Props {
+    job: any;
+    selected?: boolean;
+    payloadData?: any | undefined;
+    hovering?: 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,15 +17,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const RunningJobSchemaPicker: $$__sveltets_2_IsomorphicComponent<{
-    job: any;
-    selected?: boolean;
-    payloadData?: any | undefined;
-    hovering?: boolean;
-}, {
+declare const RunningJobSchemaPicker: $$__sveltets_2_IsomorphicComponent<Props, {
     select: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "hovering" | "payloadData">;
 type RunningJobSchemaPicker = InstanceType<typeof RunningJobSchemaPicker>;
 export default RunningJobSchemaPicker;

package/package/components/schema/SchemaPickerRow.svelte

@@ -16,10 +16,10 @@ let objectViewerLoaded = $state(false);
 let popoverFullyOpened = $state(false);
 let popoverOpenTimeout = null;
 const dispatch = createEventDispatcher();
-const payloadTooBigForPreview = payloadData != 'WINDMILL_TOO_BIG' && isObjectTooBig(payloadData);
-const isTooBig = payloadData === 'WINDMILL_TOO_BIG' || payloadTooBigForPreview;
+const payloadTooBigForPreview = untrack(() => payloadData) != 'WINDMILL_TOO_BIG' && isObjectTooBig(untrack(() => payloadData));
+const isTooBig = untrack(() => payloadData) === 'WINDMILL_TOO_BIG' || payloadTooBigForPreview;
 const floatingConfig = {
-    placement,
+    placement: untrack(() => placement),
     strategy: 'fixed',
     offset: { mainAxis: 4 },
     gutter: 0,

package/package/components/scriptEditor/LogPanel.svelte

@@ -36,7 +36,14 @@ function closeDrawer() {
     drawerOpen = false;
 }
 function asWorkflowStatus(x) {
-    return x;
+    if (!x || typeof x !== 'object')
+        return {};
+    const result = {};
+    for (const [k, v] of Object.entries(x)) {
+        if (!k.startsWith('_'))
+            result[k] = v;
+    }
+    return result;
 }
 let forceJson = $state(false);
 </script>
@@ -71,7 +78,9 @@ let forceJson = $state(false);
 		{#if showCaptures && customUi?.disableTriggerCaptures !== true}
 			<Tab value="captures" label="Trigger captures" />
 		{/if}
-		<Tab value="tracing" label="Tracing" />
+		{#if customUi?.disableTracing !== true}
+			<Tab value="tracing" label="Tracing" />
+		{/if}
 
 		{#snippet content()}
 			<div class="grow min-h-0">

package/package/components/script_builder.d.ts

@@ -13,7 +13,7 @@ export interface ScriptBuilderProps {
     disableAi?: boolean;
     fullyLoaded?: boolean;
     initialPath?: string;
-    template?: 'docker' | 'bunnative' | 'script';
+    template?: 'docker' | 'bunnative' | 'claudesandbox' | 'script';
     initialArgs?: Record<string, any>;
     lockedLanguage?: boolean;
     showMeta?: boolean;

package/package/components/search/QuickMenuItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { isMac } from '../../utils';
-import { onDestroy, onMount } from 'svelte';
+import { onDestroy, onMount, untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 // const dispatch = createEventDispatcher()
 onMount(() => {
@@ -20,7 +20,7 @@ async function handleKeydown(event) {
     }
 }
 let { hovered = false, id, label = '', icon = undefined, shortcutKey = undefined, containerClass = undefined, mouseMoved = $bindable(false), kbdClass = $bindable(''), small = true, itemReplacement, onselect = () => { }, onhover = () => { }, onkeyboardSpecificSelect } = $props();
-if (small) {
+if (untrack(() => small)) {
     kbdClass = twMerge(kbdClass, '!text-[10px]  px-1', false && isMac() ? '!text-lg ' : 'text-xs', 'leading-none');
 }
 else {

package/package/components/search/RunsSearch.svelte

@@ -211,7 +211,11 @@ async function loadMoreJobs(s, paginationOffset) {
 					<div class="text-sm">There were no completed runs that match your query</div>
 				{/if}
 				<div class="text-sm">
-					Note that new runs might take a while to become searchable (by default ~5min)
+					Note that new runs might take a while to become searchable (by default ~5min).
+					{#if indexMetadata?.max_index_time_window_secs}
+						Search only covers the last {Math.round(indexMetadata.max_index_time_window_secs / 86400)} day(s),
+						configurable in instance settings under Indexer.
+					{/if}
 				</div>
 				{#if !$enterpriseLicense}
 					<div class="py-6"></div>

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;