windmill-components 1.558.3 → 1.596.0

package/package/components/common/table/ScriptRow.svelte

@@ -58,7 +58,7 @@ let versionsDrawerOpen = $state(false);
 <Row
 	aiId={`script-run-button-${script.path}`}
 	aiDescription={`Button to access the form to run the script ${script.summary ?? script.path}`}
-	href={script.draft_only || script.kind !== 'script' || script.no_main_func
+	href={script.draft_only || (script.no_main_func && script.kind !== 'preprocessor')
 		? `${base}/scripts/edit/${script.path}`
 		: `${base}/scripts/get/${script.hash}?workspace=${$workspaceStore}`}
 	kind="script"
@@ -92,7 +92,7 @@ let versionsDrawerOpen = $state(false);
 		<SharedBadge canWrite={script.canWrite} extraPerms={script.extra_perms} />
 		<DraftBadge has_draft={script.has_draft} draft_only={script.draft_only} />
 		<div class="w-8 center-center">
-			<LanguageIcon lang={script.language} width={12} height={12} />
+			<LanguageIcon lang={script.language} width={16} height={16} />
 		</div>
 	{/snippet}
 
@@ -110,9 +110,9 @@ let versionsDrawerOpen = $state(false);
 						<Button
 							aiId={`edit-script-button-${script.summary?.length > 0 ? script.summary : script.path}`}
 							aiDescription={`Edits the script ${script.summary?.length > 0 ? script.summary : script.path}`}
-							color="light"
-							size="xs"
-							variant="border"
+							variant="subtle"
+							wrapperClasses="w-20"
+							unifiedSize="md"
 							startIcon={{ icon: Pen }}
 							href="{base}/scripts/edit/{script.path}"
 						>
@@ -124,9 +124,9 @@ let versionsDrawerOpen = $state(false);
 						<Button
 							aiId={`fork-script-button-${script.summary ?? script.path}`}
 							aiDescription={`Fork the script ${script.summary ?? script.path}`}
-							color="light"
-							size="xs"
-							variant="border"
+							variant="subtle"
+							wrapperClasses="w-20"
+							unifiedSize="md"
 							startIcon={{ icon: GitFork }}
 							href="{base}/scripts/add?template={script.path}"
 						>
@@ -251,16 +251,20 @@ let versionsDrawerOpen = $state(false);
 					{
 						displayName: 'Publish to Hub',
 						icon: Globe2,
-						action: () => {
+						action: async () => {
+							const scriptData = await ScriptService.getScriptByPath({
+								workspace: $workspaceStore!,
+								path: script.path
+							})
 							window.open(
 								scriptToHubUrl(
-									script.content,
-									script.summary,
-									script.description ?? '',
-									script.kind,
-									script.language,
-									script.schema,
-									script.lock ?? '',
+									scriptData.content,
+									scriptData.summary,
+									scriptData.description ?? '',
+									scriptData.kind,
+									scriptData.language,
+									scriptData.schema,
+									scriptData.lock ?? '',
 									$hubBaseUrlStore
 								).toString(),
 								'_blank'

package/package/components/common/tabs/Tab.svelte

@@ -2,7 +2,7 @@
 import { twMerge } from 'tailwind-merge';
 import { triggerableByAI } from '../../../actions/triggerableByAI.svelte';
 const dispatch = createEventDispatcher();
-let { aiId = undefined, aiDescription = undefined, value, size = 'sm', class: c = '', style = '', selectedClass = '', selectedStyle = '', id = undefined, active = false, exact = false, otherValues = [], disabled = false, children } = $props();
+let { aiId = undefined, aiDescription = undefined, value, label, icon = undefined, class: c = '', style = '', selectedClass = '', selectedStyle = '', id = undefined, active = false, exact = false, otherValues = [], disabled = false, small = false, extra = undefined } = $props();
 const { selected, update, hashNavigation } = getContext('Tabs');
 function getIsSelectedFn(exact, otherValues) {
     if (otherValues.length > 0) {
@@ -17,13 +17,6 @@ function getIsSelectedFn(exact, otherValues) {
 }
 let isSelectedFn = $derived(getIsSelectedFn(exact, otherValues));
 let isSelected = $derived(isSelectedFn($selected));
-const fontSizeClasses = {
-    xs: 'text-xs',
-    sm: 'text-sm',
-    md: 'text-md',
-    lg: 'text-lg',
-    xl: 'text-xl'
-};
 </script>
 
 <button
@@ -39,14 +32,14 @@ const fontSizeClasses = {
 		}
 	}}
 	class={twMerge(
-		'border-b-2 py-1 px-2 cursor-pointer transition-all z-10 ease-linear font-normal text-tertiary',
+		'border-b-2 border-border-light py-1 cursor-pointer transition-all z-10 ease-linear text-primary font-normal text-xs',
 		isSelected
-			? 'wm-tab-active font-main'
-			: 'border-gray-300 dark:border-gray-600 border-opacity-0 hover:border-opacity-100 ',
-		fontSizeClasses[size],
+			? 'text-emphasis font-semibold border-border-normal'
+			: 'border-opacity-0 hover:border-opacity-100',
+		small ? 'px-1' : 'px-2',
 		c,
 		isSelected ? selectedClass : '',
-		disabled ? 'cursor-not-allowed text-tertiary' : ''
+		disabled ? 'cursor-not-allowed text-disabled' : ''
 	)}
 	style={`${style} ${isSelected ? selectedStyle : ''}`}
 	onclick={() => {
@@ -63,7 +56,19 @@ const fontSizeClasses = {
 	{disabled}
 	{id}
 >
-	<div class={twMerge(active ? 'bg-blue-50 text-blue-800 rounded-md ' : '', 'px-2 ')}>
-		{@render children?.()}
+	<div
+		class={twMerge(
+			active ? 'bg-surface-accent-selected text-accent rounded-md' : '',
+			'flex gap-2 items-center my-1 px-2'
+		)}
+	>
+		{#if icon}
+			{@const IconComponent = icon}
+			<IconComponent size={14} />
+		{/if}
+		{#if label}
+			{label}
+		{/if}
+		{@render extra?.()}
 	</div>
 </button>

package/package/components/common/tabs/Tab.svelte.d.ts

@@ -2,7 +2,8 @@ interface Props {
     aiId?: string | undefined;
     aiDescription?: string | undefined;
     value: string;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    label?: string;
+    icon?: any | undefined;
     class?: string;
     style?: string;
     selectedClass?: string;
@@ -12,7 +13,11 @@ interface Props {
     exact?: boolean;
     otherValues?: string[];
     disabled?: boolean;
-    children?: import('svelte').Snippet;
+    /**
+     * @deprecated TODO : Re-organize workspace settings so we don't have so many tabs
+     */
+    small?: boolean;
+    extra?: import('svelte').Snippet;
 }
 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> & {

package/package/components/common/tabs/Tabs.svelte

@@ -1,42 +1,36 @@
-<script lang="ts">import { setContext, untrack } from 'svelte';
+<script lang="ts">import { setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import { createEventDispatcher } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 const dispatch = createEventDispatcher();
-let { selected = $bindable(), hideTabs = false, class: c = '', wrapperClass = '', style = '', hashNavigation = false, values = undefined, children, content } = $props();
+let { selected = $bindable(), hideTabs = false, class: c = '', wrapperClass = '', style = '', hashNavigation = false, values = undefined, children, content, deferSelectedUpdate = false } = $props();
+// Single source of truth for tab state
 const selectedStore = writable(selected);
+function update(value) {
+    if (!deferSelectedUpdate) {
+        selected = value;
+    }
+    dispatch('selected', value);
+}
 setContext('Tabs', {
     selected: selectedStore,
-    update: (value) => {
-        selectedStore.set(value);
-        selected = value;
-    },
+    update,
     hashNavigation
 });
-function updateSelected() {
+// Sync external prop changes to store (single direction: prop → store)
+$effect(() => {
     selectedStore.set(selected);
-}
+});
 let hashValues = $derived(values ? values.map((x) => '#' + x) : undefined);
 function hashChange() {
     if (hashNavigation) {
         const hash = window.location.hash;
         if (hash && hashValues?.includes(hash)) {
             const id = hash.replace('#', '');
-            selectedStore.set(id);
-            selected = id;
+            update(id);
         }
     }
 }
-$effect(() => {
-    selected && untrack(() => updateSelected());
-});
-let lastSelected = $state(selected);
-$effect(() => {
-    if ($selectedStore !== untrack(() => lastSelected)) {
-        lastSelected = $selectedStore;
-        $selectedStore && dispatch('selected', $selectedStore);
-    }
-});
 </script>
 
 <svelte:window onhashchange={hashChange} />

package/package/components/common/tabs/Tabs.svelte.d.ts

@@ -8,6 +8,13 @@ interface Props {
     values?: string[] | undefined;
     children?: import('svelte').Snippet<[any]>;
     content?: import('svelte').Snippet;
+    /**
+     * If true, the tab component will only update the internal store when a tab is clicked,
+     * but will NOT immediately update the bindable 'selected' prop. This allows the parent
+     * component to control when the tab actually changes (e.g., after navigation completes).
+     * Use this when you want to prevent navigation before checking for unsaved changes.
+     */
+    deferSelectedUpdate?: 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> & {

package/package/components/common/teams/TeamsConnectionStatus.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">import { Badge, Button } from '..';
+import { Plug, RotateCw, Unplug } from 'lucide-svelte';
+import { base } from '../../../base';
+let { isConnected, teamsTeamName, mode, onRefresh, onDisconnect } = $props();
+// Connection URLs based on mode
+let connectUrl = $derived(mode === 'instance' ? `${base}/#superadmin-settings` : `${base}/workspace_settings?tab=teams`);
+</script>
+
+<div class="flex items-center gap-2">
+	{#if isConnected === undefined}
+		<!-- Loading State -->
+		<RotateCw size={14} class="animate-spin text-secondary" />
+		{#if onRefresh}
+			<Button
+				variant="default"
+				unifiedSize="sm"
+				onclick={onRefresh}
+				startIcon={{ icon: RotateCw }}
+			/>
+		{/if}
+	{:else if isConnected}
+		<!-- Connected State - Show status indicator -->
+		<Badge color="green">
+			<Plug size={14} />
+			<span class="text-xs text-primary">
+				{#if teamsTeamName}
+					Connected to the Teams workspace '{teamsTeamName}'
+				{:else}
+					Connected to Teams workspace
+				{/if}
+			</span>
+		</Badge>
+
+		<!-- Disconnect Button -->
+		{#if onDisconnect}
+			<Button
+				variant="default"
+				unifiedSize="sm"
+				onclick={onDisconnect}
+				startIcon={{ icon: Unplug }}
+				destructive
+			>
+				Disconnect teams
+			</Button>
+		{/if}
+	{:else}
+		<Badge color="red">
+			<Unplug size={14} />
+			<span class="text-xs text-primary"
+				>{mode === 'instance' ? 'Instance' : 'Workspace'} not connected to Teams</span
+			>
+		</Badge>
+
+		{#if mode === 'instance'}
+			<span class="text-xs text-secondary">
+				Configure Teams OAuth connection in instance settings
+			</span>
+		{:else}
+			<a href={connectUrl} class="text-xs">Open workspace teams settings</a>
+		{/if}
+	{/if}
+</div>

package/package/components/common/teams/TeamsConnectionStatus.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    isConnected: boolean | undefined;
+    teamsTeamName?: string;
+    mode: 'instance' | 'workspace';
+    onRefresh?: () => void;
+    onDisconnect?: () => void;
+}
+declare const TeamsConnectionStatus: import("svelte").Component<Props, {}, "">;
+type TeamsConnectionStatus = ReturnType<typeof TeamsConnectionStatus>;
+export default TeamsConnectionStatus;

package/package/components/common/toggleButton-v2/ToggleButton.svelte

@@ -2,7 +2,16 @@
 import Tooltip from '../../meltComponents/Tooltip.svelte';
 import { melt } from '@melt-ui/svelte';
 import { Info } from 'lucide-svelte';
-let { label = undefined, iconOnly = false, tooltip = undefined, icon = undefined, disabled = false, selectedColor = undefined, small = false, light = false, iconProps = {}, showTooltipIcon = false, documentationLink = undefined, id = undefined, item, value, class: className = '' } = $props();
+import { ButtonType } from '../button/model';
+let { label = undefined, iconOnly = false, tooltip = undefined, icon = undefined, disabled = false, selectedColor = undefined, small = false, size = undefined, iconProps = {}, showTooltipIcon = false, documentationLink = undefined, id = undefined, item, value, class: className = '' } = $props();
+// Handle backward compatibility: small prop maps to size="sm"
+const actualSize = $derived(size ?? (small ? 'sm' : 'md'));
+// Direct access to unified sizing
+const horizontalPadding = $derived(iconOnly
+    ? ButtonType.UnifiedIconOnlySizingClasses[actualSize]
+    : ButtonType.UnifiedSizingClasses[actualSize]);
+const height = $derived(ButtonType.UnifiedHeightClasses[actualSize]);
+const iconSize = $derived(ButtonType.UnifiedIconSizes[actualSize]);
 </script>
 
 <Tooltip
@@ -16,13 +25,12 @@ let { label = undefined, iconOnly = false, tooltip = undefined, icon = undefined
 		{id}
 		{disabled}
 		class={twMerge(
-			'group rounded-md transition-all font-normal flex gap-1 flex-row items-center border',
-			small ? 'px-1.5 py-0.5 text-2xs' : 'px-2 py-1 text-sm',
-			light
-				? 'hover:text-secondary data-[state=on]:text-secondary text-tertiary'
-				: 'hover:text-primary data-[state=on]:text-primary text-secondary',
-			'data-[state=on]:bg-surface data-[state=off]:border-transparent data-[state=on]:border-gray-300 dark:data-[state=on]:border-gray-500',
-			'bg-surface-secondary hover:bg-surface-hover',
+			'group rounded-md transition-all font-normal flex gap-1 flex-row items-center justify-center border text-xs',
+			horizontalPadding,
+			height,
+			'text-primary data-[state=on]:text-primary',
+			'data-[state=on]:bg-surface-tertiary data-[state=off]:border-transparent data-[state=on]:border-border-normal/30',
+			'bg-surface-transparent hover:bg-surface-hover',
 			disabled ? '!shadow-none' : '',
 			className
 		)}
@@ -32,10 +40,10 @@ let { label = undefined, iconOnly = false, tooltip = undefined, icon = undefined
 		{#if icon}
 			{@const SvelteComponent = icon}
 			<SvelteComponent
-				size={small ? 12 : 14}
+				size={iconSize}
 				{...iconProps}
 				class={twMerge(
-					light ? 'text-tertiary' : 'text-secondary',
+					'text-primary',
 					selectedColor
 						? 'group-data-[state=on]:text-[var(--selected-color)]'
 						: 'group-data-[state=on]:text-blue-500 dark:group-data-[state=on]:text-nord-800',
@@ -47,7 +55,7 @@ let { label = undefined, iconOnly = false, tooltip = undefined, icon = undefined
 			{label}
 		{/if}
 		{#if showTooltipIcon}
-			<Info size={14} class="text-gray-400" />
+			<Info size={iconSize} class="text-gray-400" />
 		{/if}
 	</button>
 

package/package/components/common/toggleButton-v2/ToggleButton.svelte.d.ts

@@ -7,7 +7,7 @@ interface Props {
     disabled?: boolean;
     selectedColor?: string | undefined;
     small?: boolean;
-    light?: boolean;
+    size?: 'sm' | 'md' | 'lg';
     iconProps?: Record<string, any>;
     showTooltipIcon?: boolean;
     documentationLink?: string | undefined;

package/package/components/common/toggleButton-v2/ToggleButtonGroup.svelte

@@ -38,7 +38,7 @@ $effect(() => {
 >
 	<div
 		class={twMerge(
-			'flex bg-surface-secondary rounded-md h-full',
+			'flex bg-surface-sunken dark:bg-surface-sunken/60 rounded-md h-full',
 			wrap ? 'flex-wrap' : '',
 			tabListClass
 		)}

package/package/components/common/toggleButton-v2/ToggleButtonMore.svelte

@@ -2,7 +2,7 @@
 import Popover from '../../Popover.svelte';
 import DropdownV2 from '../../DropdownV2.svelte';
 import ToggleButton from './ToggleButton.svelte';
-let { disabled = false, small = false, light = false, id = undefined, item = undefined, selected = $bindable(undefined), togglableItems, class: className = '' } = $props();
+let { disabled = false, small = false, id = undefined, item = undefined, selected = $bindable(undefined), togglableItems, btnText, class: className = '' } = $props();
 let items = togglableItems.map((i) => ({
     displayName: i.label,
     action: () => (selected = i.value),
@@ -27,7 +27,6 @@ function isAnOptionSelected(selected) {
 				value={selected ?? ''}
 				{item}
 				{small}
-				{light}
 				{id}
 				label={togglableItems.find((i) => i.value === selected)?.label}
 				{tooltip}
@@ -35,7 +34,7 @@ function isAnOptionSelected(selected) {
 			/>
 		{/if}
 		<div class="flex items-center">
-			<DropdownV2 enableFlyTransition {items} />
+			<DropdownV2 {btnText} enableFlyTransition {items} size={small ? 'sm' : 'md'} />
 		</div>
 	</div>
 </Popover>

package/package/components/common/toggleButton-v2/ToggleButtonMore.svelte.d.ts

@@ -6,11 +6,11 @@ type TogglableItem = {
 interface Props {
     disabled?: boolean;
     small?: boolean;
-    light?: boolean;
     id?: string | undefined;
     item?: any | undefined;
     selected?: string | undefined;
     togglableItems: TogglableItem[];
+    btnText?: string;
     class?: string;
 }
 declare const ToggleButtonMore: import("svelte").Component<Props, {}, "selected">;

package/package/components/copilot/AIFormAssistant.svelte

@@ -15,7 +15,7 @@ async function fillFormWithAI() {
 		<AskAiButton label="Fill with AI" onClick={fillFormWithAI} />
 	</div>
 	<div class="flex flex-row gap-2 items-center">
-		<p class="text-sm text-tertiary">
+		<p class="text-sm text-primary">
 			{instructions
 				? 'Instructions: ' + instructions
 				: 'No AI instructions provided. Click edit to add guidance for AI form filling.'}

package/package/components/copilot/AIFormSettings.svelte

@@ -1,12 +1,14 @@
-<script lang="ts">import Label from '../Label.svelte';
+<script lang="ts">import { slide } from 'svelte/transition';
+import Label from '../Label.svelte';
 import Toggle from '../Toggle.svelte';
 import Tooltip from '../Tooltip.svelte';
 let { prompt = $bindable(undefined), type = 'script' } = $props();
 </script>
 
-<div class="flex flex-col gap-2">
+<div>
 	<Toggle
-		size="sm"
+		textClass="font-medium"
+		size="xs"
 		checked={prompt !== undefined}
 		on:change={() => {
 			if (prompt !== undefined) {
@@ -15,21 +17,23 @@ let { prompt = $bindable(undefined), type = 'script' } = $props();
 				prompt = ''
 			}
 		}}
-		options={{
-			right: `Enable filling ${type} inputs with AI`
-		}}
+		options={{ right: `Enable filling ${type} inputs with AI` }}
 	/>
 	{#if prompt !== undefined}
-		<Label label="Additional prompt for AI">
-			{#snippet header()}
-				<Tooltip>
-					AI will use script description and each field description to fill the inputs form. In
-					addition, any prompt passed here will be used by AI to guide it. You can mention specific
-					fields and interaction between fields here.
-				</Tooltip>
-			{/snippet}
-			<textarea bind:value={prompt} placeholder="Instructions for the AI about how to fill the form"
-			></textarea>
-		</Label>
+		<div transition:slide={{ duration: 120 }} class="mt-6">
+			<Label label="Additional prompt for AI">
+				{#snippet header()}
+					<Tooltip>
+						AI will use script description and each field description to fill the inputs form. In
+						addition, any prompt passed here will be used by AI to guide it. You can mention
+						specific fields and interaction between fields here.
+					</Tooltip>
+				{/snippet}
+				<textarea
+					bind:value={prompt}
+					placeholder="Instructions for the AI about how to fill the form"
+				></textarea>
+			</Label>
+		</div>
 	{/if}
 </div>

package/package/components/copilot/AskAiButton.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { Button } from '../common';
 import { WandSparkles } from 'lucide-svelte';
 import { aiChatManager } from './chat/AIChatManager.svelte';
+import { AIBtnClasses } from './chat/AIButtonStyle';
 const { label, initialInput, onClick: onClickProp } = $props();
 export function onClick() {
     aiChatManager.openChat();
@@ -19,8 +20,8 @@ export function onClick() {
 	startIcon={{
 		icon: WandSparkles
 	}}
-	size="xs2"
-	btnClasses="!text-violet-800 dark:!text-violet-400 border border-gray-200 dark:border-gray-600 !bg-surface"
+	unifiedSize="md"
+	btnClasses={AIBtnClasses('default')}
 	on:click={onClick}
 >
 	{label}

package/package/components/copilot/CronGen.svelte

@@ -5,16 +5,14 @@ import Popover from '../meltComponents/Popover.svelte';
 import { sendUserToast } from '../../toast';
 import { base } from '../../base';
 import { copilotInfo } from '../../aiStore';
-export let schedule;
-export let cronVersion;
-let instructions = '';
-let instructionsField = undefined;
-let genLoading = false;
-let abortController = new AbortController();
-$: instructionsField && setTimeout(() => instructionsField?.focus(), 100);
+import { untrack } from 'svelte';
+let { schedule = $bindable(), cronVersion = $bindable('v2') } = $props();
+let instructions = $state('');
+let instructionsField = $state(undefined);
+let genLoading = $state(false);
+let abortController = $state(new AbortController());
 const SYSTEM_V2 = "You are a helpful assistant for creating CRON schedules using both standard and extended Croner patterns. The structure is 'second minute hour dayOfMonth month dayOfWeek'. Supported modifiers: ? (wildcard), L (last day/weekday), # (nth occurrence of a weekday), and W (closest weekday). Weekdays are Sunday (0 or 7), Monday (1), Tuesday (2), Wednesday (3), Thursday (4), Friday (5), Saturday (6). Ensure syntax is valid, including optional seconds and special modifiers. You only return either the CRON string without any leading/closing quotes or an error message prefixed with 'ERROR:'.";
 const SYSTEM_V1 = "You are a helpful assistant for creating CRON schedules. The structure is 'second minute hour dayOfMonth month dayOfWeek'. Weekdays are Sunday (1), Monday (2), Tuesday (3), Wednesday (4), Thursday (5), Friday (6), Saturday (7). You only return the CRON string without any wrapping characters. If it is invalid, you will return an error message preceded by 'ERROR:'.";
-$: updateSystemPrompt(cronVersion);
 function updateSystemPrompt(version) {
     if (version === 'v2') {
         SYSTEM = SYSTEM_V2;
@@ -54,10 +52,19 @@ async function generateCron() {
         genLoading = false;
     }
 }
+$effect(() => {
+    instructionsField && setTimeout(() => instructionsField?.focus(), 100);
+});
+$effect(() => {
+    cronVersion;
+    untrack(() => {
+        updateSystemPrompt(cronVersion);
+    });
+});
 </script>
 
 <Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}>
-	<svelte:fragment slot="trigger">
+	{#snippet trigger()}
 		<Button
 			color={genLoading ? 'red' : 'light'}
 			size="xs"
@@ -65,13 +72,13 @@ async function generateCron() {
 			startIcon={{ icon: Wand2 }}
 			iconOnly
 			title="AI Assistant"
-			btnClasses="text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+			btnClasses="text-ai bg-violet-100 dark:bg-gray-700"
 			loading={genLoading}
 			clickableWhileLoading
 			on:click={genLoading ? () => abortController?.abort() : () => {}}
 		/>
-	</svelte:fragment>
-	<svelte:fragment slot="content" let:close>
+	{/snippet}
+	{#snippet content({ close })}
 		<div class="border rounded-lg shadow-lg p-4 bg-surface">
 			{#if $copilotInfo.enabled}
 				<div class="flex w-96">
@@ -80,7 +87,7 @@ async function generateCron() {
 						type="text"
 						placeholder="CRON schedule description"
 						bind:value={instructions}
-						on:keypress={({ key }) => {
+						onkeypress={({ key }) => {
 							if (key === 'Enter' && instructions.length > 0) {
 								close()
 								generateCron()
@@ -92,7 +99,7 @@ async function generateCron() {
 						color="light"
 						variant="contained"
 						buttonType="button"
-						btnClasses="!ml-2 text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+						btnClasses="!ml-2 text-ai bg-violet-100 dark:bg-gray-700"
 						title="Generate CRON schedule from prompt"
 						aria-label="Generate"
 						iconOnly
@@ -117,5 +124,5 @@ async function generateCron() {
 				</div>
 			{/if}
 		</div>
-	</svelte:fragment>
+	{/snippet}
 </Popover>

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