windmill-components 1.309.7 → 1.339.2

package/package/components/common/button/Button.svelte

@@ -51,22 +51,27 @@ const colorVariants = {
     },
     blue: {
         border: 'border-frost-500 dark:border-frost-300 hover:border-frost-700 dark:hover:border-frost-400 focus-visible:border-frost-700 bg-surface hover:bg-frost-100 dark:hover:bg-frost-900 focus-visible:bg-frost-100 focus-visible:dark:text-frost-100 dark:focus-visible:bg-frost-900 text-frost-500 dark:text-frost-300 dark:hover:text-frost-400 hover:text-frost-700 focus-visible:text-frost-700 focus-visible:ring-frost-300',
-        contained: 'bg-frost-500 hover:bg-frost-700 focus-visible:bg-frost-700 text-white focus-visible:ring-frost-300',
+        contained: 'bg-frost-500 hover:bg-frost-700 focus-visible:bg-frost-700 text-white focus-visible:ring-frost-300 dark:bg-frost-500/90 dark:hover:bg-frost-600/90',
         divider: 'divide-x divide-frost-600'
     },
+    marine: {
+        border: 'border-marine-300 dark:border-marine-200 hover:border-marine-500 dark:hover:border-marine-400 focus-visible:border-marine-500 bg-surface hover:bg-marine-500 dark:hover:bg-marine-400 focus-visible:bg-marine-100 focus-visible:dark:text-marine-50 dark:focus-visible:bg-marine-500 text-marine-50 dark:text-marine-50 dark:hover:text-marine-50 hover:text-marine-50 focus-visible:text-marine-300 focus-visible:ring-marine-200',
+        contained: 'bg-marine-300 hover:bg-marine-500 focus-visible:bg-marine-500 text-gray-50 focus-visible:ring-marine-200 dark:bg-marine-200 dark:hover:bg-marine-400',
+        divider: 'divide-x divide-marine-500'
+    },
     red: {
-        border: 'border-red-600/60 hover:border-red-600 bg-surface hover:bg-red-100 text-red-600 hover:text-red-700 focus-visible:ring-red-300 ',
-        contained: 'bg-red-600 hover:bg-red-600 text-white focus-visible:ring-red-300',
+        border: 'border-red-600/60 hover:border-red-600 bg-surface hover:bg-red-100 text-red-600 hover:text-red-700 focus-visible:ring-red-300 dark:border-red-400/90 dark:text-red-400 dark:hover:border-red-400 dark:hover:bg-red-500/60 dark:hover:text-red-100',
+        contained: 'bg-red-600 hover:bg-red-600 text-white focus-visible:ring-red-300  dark:border-red-400/70 dark:bg-red-700/90 dark:hover:bg-red-900 dark:hover:border-red-300 dark:text-primary',
         divider: 'divide-x divide-red-700'
     },
     green: {
-        border: 'border-green-600 hover:border-green-700 bg-surface hover:bg-green-100 text-green-600 hover:text-green-700 focus-visible:ring-green-300',
-        contained: 'bg-green-600 hover:bg-green-700 text-white focus-visible:ring-green-300',
+        border: 'border-green-600 hover:border-green-700 bg-surface hover:bg-green-100 text-green-600 hover:text-green-700 focus-visible:ring-green-300 dark:hover:bg-green-800 dark:border-green-400/90',
+        contained: 'bg-green-600 hover:bg-green-700 text-white focus-visible:ring-green-300 dark:bg-green-700/90 dark:hover:bg-green-800',
         divider: 'divide-x divide-green-700'
     },
     dark: {
-        border: 'border-surface-inverse bg-surface hover:bg-surface-hover focus-visible:bg-surface-hover text-primary hover:text-secondary focus-visible:text-secondary focus-visible:ring-surface-selected-inverse',
-        contained: 'bg-surface-inverse hover:bg-surface-inverse-hover focus-visible:bg-surface-hover-inverse text-primary-inverse focus-visible:ring-surface-selected-inverse',
+        border: 'border-marine-300 bg-surface hover:bg-surface-hover focus-visible:bg-surface-hover text-primary hover:text-secondary focus-visible:text-secondary focus-visible:ring-surface-selected-inverse dark:border-marine-200',
+        contained: 'bg-marine-400 hover:bg-marine-200 focus-visible:bg-surface-hover-inverse text-primary-inverse focus-visible:ring-surface-selected-inverse dark:bg-marine-50 dark:hover:bg-marine-50/70 dark:text-primary-inverse',
         divider: 'divide-x divide-gray-800 dark:divide-gray-200'
     },
     gray: {
@@ -108,16 +113,19 @@ const iconMap = {
     xl: 18
 };
 const iconOnlyPadding = {
-    xs2: 'm-[1px]',
-    xs: 'm-[1px]',
-    sm: 'm-[2px]',
-    md: 'm-[2px]',
-    lg: 'm-[5px]',
-    xl: 'm-[5px]'
+    xs2: 'm-[1px] qhd:m-[1.125px]',
+    xs: 'm-[1px] qhd:m-[1.125px]',
+    sm: 'm-[2px] qhd:m-[2.25px]',
+    md: 'm-[2px] qhd:m-[2.25px]',
+    lg: 'm-[5px] qhd:m-[5.625px]',
+    xl: 'm-[5px] qhd:m-[5.625px]'
 };
-$: lucideIconSize = iconMap[size] ?? 12;
+let innerWidth = 0;
+$: lucideIconSize = (iconMap[size] ?? 12) * (innerWidth > 2500 ? 1.125 : 1);
 </script>
 
+<svelte:window bind:innerWidth />
+
 <div
 	class="{dropdownItems && dropdownItems.length > 0 && variant === 'contained'
 		? colorVariants[color].divider

package/package/components/common/calendarPicker/CalendarPicker.svelte

@@ -4,6 +4,7 @@ import { Popup } from '..';
 import DateTimeInput from '../../DateTimeInput.svelte';
 export let date;
 export let label;
+export let useDropdown = false;
 const dispatch = createEventDispatcher();
 let input;
 export let placement = 'top-end';
@@ -28,6 +29,7 @@ export let placement = 'top-end';
 		<div class="pb-1 text-sm text-secondary">{label}</div>
 		<div class="flex w-full">
 			<DateTimeInput
+				{useDropdown}
 				value={date}
 				on:change={(e) => {
 					date = e.detail

package/package/components/common/calendarPicker/CalendarPicker.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         date: string | undefined;
         label: string;
+        useDropdown?: boolean | undefined;
         placement?: Placement | undefined;
     };
     events: {

package/package/components/common/drawer/ConditionalPortal.svelte

@@ -0,0 +1,9 @@
+<script>import Portal from 'svelte-portal';
+export let condition = false;
+</script>
+
+{#if condition}
+	<Portal><slot /></Portal>
+{:else}
+	<slot />
+{/if}

package/package/components/common/drawer/ConditionalPortal.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        condition?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ConditionalPortalProps = typeof __propDef.props;
+export type ConditionalPortalEvents = typeof __propDef.events;
+export type ConditionalPortalSlots = typeof __propDef.slots;
+export default class ConditionalPortal extends SvelteComponent<ConditionalPortalProps, ConditionalPortalEvents, ConditionalPortalSlots> {
+}
+export {};

package/package/components/common/drawer/Disposable.svelte

@@ -0,0 +1,66 @@
+<script context="module">export let openedDrawers = [];
+</script>
+
+<script>import { zIndexes } from '../../../zIndexes';
+import { createEventDispatcher } from 'svelte';
+export let open = false;
+export let id = (Math.random() + 1).toString(36).substring(10);
+if (open) {
+    openedDrawers.push(id);
+}
+let offset = 0;
+export function toggleDrawer() {
+    if (!open) {
+        openDrawer();
+    }
+    else {
+        closeDrawer();
+    }
+}
+export function openDrawer() {
+    open = true;
+    offset = openedDrawers.length - 1;
+    if (openedDrawers.includes(id)) {
+        return;
+    }
+    openedDrawers.push(id);
+}
+export function closeDrawer() {
+    open = false;
+    offset = 0;
+    // remove the last opened drawer
+    openedDrawers = openedDrawers.filter((drawer) => drawer !== id);
+}
+export function isOpen() {
+    return open;
+}
+const dispatch = createEventDispatcher();
+function handleClickAway(e) {
+    const last = openedDrawers[openedDrawers.length - 1];
+    if (last === id) {
+        e.stopPropagation();
+        closeDrawer();
+    }
+}
+function onKeyDown(event) {
+    if (open) {
+        switch (event.key) {
+            case 'Escape':
+                if (id == openedDrawers[openedDrawers.length - 1] || openedDrawers.length == 0) {
+                    openedDrawers.pop();
+                    event.preventDefault();
+                    event.stopPropagation();
+                    event.stopImmediatePropagation();
+                    closeDrawer();
+                    break;
+                }
+        }
+    }
+}
+$: zIndex = zIndexes.disposables + offset;
+$: open ? dispatch('open') : dispatch('close');
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+<slot {handleClickAway} {zIndex} {closeDrawer} {open} />

package/package/components/common/drawer/Disposable.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponent } from "svelte";
+export declare let openedDrawers: string[];
+declare const __propDef: {
+    props: {
+        open?: boolean | undefined;
+        id?: string | undefined;
+        toggleDrawer?: (() => void) | undefined;
+        openDrawer?: (() => void) | undefined;
+        closeDrawer?: (() => void) | undefined;
+        isOpen?: (() => boolean) | undefined;
+    };
+    events: {
+        open: CustomEvent<any>;
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            handleClickAway: (e: any) => void;
+            zIndex: number;
+            closeDrawer: () => void;
+            open: boolean;
+        };
+    };
+};
+export type DisposableProps = typeof __propDef.props;
+export type DisposableEvents = typeof __propDef.events;
+export type DisposableSlots = typeof __propDef.slots;
+export default class Disposable extends SvelteComponent<DisposableProps, DisposableEvents, DisposableSlots> {
+    get toggleDrawer(): () => void;
+    get openDrawer(): () => void;
+    get closeDrawer(): () => void;
+    get isOpen(): () => boolean;
+}
+export {};

package/package/components/common/drawer/Drawer.svelte

@@ -1,33 +1,23 @@
-<script context="module">"use strict";
-let openedDrawers = [];
-</script>
-
-<script>import { onMount } from 'svelte';
-import { createEventDispatcher } from 'svelte';
+<script>import { onMount, createEventDispatcher } from 'svelte';
 import { BROWSER } from 'esm-env';
+import Disposable from './Disposable.svelte';
+import ConditionalPortal from './ConditionalPortal.svelte';
 export let open = false;
 export let duration = 0.3;
 export let placement = 'right';
 export let size = '600px';
 export let alwaysOpen = false;
-let id = (Math.random() + 1).toString(36).substring(10);
+export let shouldUsePortal = true;
+let disposable = undefined;
 $: durationMs = duration * 1000;
 export function toggleDrawer() {
-    open = !open;
-    if (open) {
-        openedDrawers.push(id);
-    }
-    else {
-        openedDrawers = openedDrawers.filter((x) => x != id);
-    }
+    disposable?.toggleDrawer();
 }
 export function openDrawer() {
-    openedDrawers.push(id);
-    open = true;
+    disposable?.openDrawer();
 }
 export function closeDrawer() {
-    open = false;
-    openedDrawers = openedDrawers.filter((x) => x != id);
+    disposable?.closeDrawer();
     setTimeout(() => {
         dispatch('afterClose');
     }, durationMs);
@@ -47,26 +37,7 @@ function scrollLock(open) {
     }
 }
 $: scrollLock(open);
-function handleClickAway() {
-    dispatch('clickAway');
-    open = false;
-}
-function onKeyDown(event) {
-    if (open) {
-        switch (event.key) {
-            case 'Escape':
-                if (id == openedDrawers[openedDrawers.length - 1] || openedDrawers.length == 0) {
-                    openedDrawers.pop();
-                    event.preventDefault();
-                    event.stopPropagation();
-                    event.stopImmediatePropagation();
-                    open = false;
-                    break;
-                }
-        }
-    }
-}
-$: open ? dispatch('open') : dispatch('close');
+$: open ? openDrawer() : closeDrawer();
 let timeout = true;
 $: !open ? setTimeout(() => (timeout = true), durationMs) : (timeout = false);
 onMount(() => {
@@ -74,22 +45,25 @@ onMount(() => {
 });
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
-
-<aside
-	class="drawer {$$props.class ?? ''} {$$props.positionClass ?? ''}"
-	class:open
-	class:close={!open && timeout}
-	{style}
->
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<div class="overlay {$$props.positionClass ?? ''}" on:click={handleClickAway} />
-	<div class="panel {placement} {$$props.positionClass}" class:size>
-		{#if open || !timeout || alwaysOpen}
-			<slot {open} />
-		{/if}
-	</div>
-</aside>
+<ConditionalPortal condition={shouldUsePortal}>
+	<Disposable let:handleClickAway let:zIndex bind:open bind:this={disposable} on:open on:close>
+		<aside
+			class="drawer {$$props.class ?? ''} {$$props.positionClass ?? ''}"
+			class:open
+			class:close={!open && timeout}
+			style={`${style}; --zIndex: ${zIndex};`}
+		>
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div class="overlay {$$props.positionClass ?? ''}" on:click={handleClickAway} />
+			<div class="panel {placement} {$$props.positionClass}" class:size>
+				{#if open || !timeout || alwaysOpen}
+					<slot {open} />
+				{/if}
+			</div>
+		</aside>
+	</Disposable>
+</ConditionalPortal>
 
 <style>
 	.drawer {
@@ -107,7 +81,7 @@ onMount(() => {
 	.drawer.open {
 		height: 100%;
 		width: 100%;
-		z-index: var(--zIndex, 1002);
+		z-index: var(--zIndex);
 		transition: z-index var(--duration) step-start;
 		pointer-events: auto;
 	}

package/package/components/common/drawer/Drawer.svelte.d.ts

@@ -7,13 +7,13 @@ declare const __propDef: {
         placement?: string | undefined;
         size?: string | undefined;
         alwaysOpen?: boolean | undefined;
+        shouldUsePortal?: boolean | undefined;
         toggleDrawer?: (() => void) | undefined;
         openDrawer?: (() => void) | undefined;
         closeDrawer?: (() => void) | undefined;
         isOpen?: (() => boolean) | undefined;
     };
     events: {
-        clickAway: CustomEvent<any>;
         open: CustomEvent<any>;
         close: CustomEvent<any>;
     } & {

package/package/components/common/fileInput/FileInput.svelte

@@ -15,7 +15,7 @@ export let submittedText = undefined;
 export let defaultFile = undefined;
 const dispatch = createEventDispatcher();
 let input;
-let files = undefined;
+export let files = undefined;
 async function onChange(fileList) {
     if (!fileList || !fileList.length) {
         files = undefined;
@@ -109,8 +109,8 @@ export function clearFiles() {
 	class={twMerge(
 		`relative center-center flex-col text-center font-medium text-tertiary 
 		border border-dashed border-gray-400 hover:border-blue-500 
-		focus-within:border-blue-500 hover:bg-blue-50 dark:hover:bg-frost-900 focus-within:bg-blue-50 
-		duration-200 rounded-lg p-1`,
+		focus-within:border-blue-300 hover:bg-blue-50 dark:hover:bg-frost-900  
+		duration-200 rounded-component p-1`,
 		c
 	)}
 	on:dragover={handleDragOver}

package/package/components/common/fileInput/FileInput.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         returnFileNames?: boolean | undefined;
         submittedText?: string | undefined;
         defaultFile?: string | undefined;
+        files?: File[] | undefined;
         clearFiles?: (() => void) | undefined;
     };
     events: {

package/package/components/common/fileUpload/FileUpload.svelte

@@ -182,7 +182,7 @@ onDestroy(() => {
 });
 </script>
 
-<div class="w-full h-full p-2 flex flex-col">
+<div class="w-full h-full p-0 flex flex-col">
 	{#if $fileUploads.length > 0 && !forceDisplayUploads}
 		<div class="border rounded-md flex flex-col gap-1 divide-y h-full w-full p-1">
 			<div class="flex h-full overflow-y-auto flex-col">

package/package/components/common/languageIcons/LanguageIcon.svelte

@@ -12,6 +12,7 @@ import GraphqlIcon from '../../icons/GraphqlIcon.svelte';
 import MSSqlServerIcon from '../../icons/MSSqlServerIcon.svelte';
 import BunIcon from '../../icons/BunIcon.svelte';
 import DenoIcon from '../../icons/DenoIcon.svelte';
+import PHPIcon from '../../icons/PHPIcon.svelte';
 export let lang;
 export let width = 30;
 export let height = 30;
@@ -29,7 +30,8 @@ const languageLabel = {
     snowflake: 'Snowflake',
     mysql: 'MySQL',
     mssql: 'MS SQL Server',
-    bun: 'TypeScript'
+    bun: 'TypeScript',
+    php: 'PHP'
 };
 const langToComponent = {
     go: GoIcon,
@@ -49,7 +51,8 @@ const langToComponent = {
     powershell: PowershellIcon,
     postgresql: PostgresIcon,
     nativets: RestIcon,
-    graphql: GraphqlIcon
+    graphql: GraphqlIcon,
+    php: PHPIcon
 };
 let subIconScale = width === 30 ? 0.6 : 0.8;
 </script>

package/package/components/common/table/RowIcon.svelte

@@ -4,10 +4,10 @@ import { Code2, LayoutDashboard } from 'lucide-svelte';
 export let kind;
 export let href = '#';
 const color = {
-    script: 'bg-blue-50 border-blue-200 dark:bg-transparent dark:border-blue-900',
-    flow: 'bg-[#f0fdfa] border-[#99f6e4] dark:bg-transparent dark:border-teal-900',
-    app: 'bg-[#fff7ed] border-orange-300 dark:bg-transparent dark:border-orange-900',
-    raw_app: 'bg-[#fff7ed] border-orange-300 dark:bg-transparent dark:border-orange-900'
+    script: 'bg-blue-50 border-blue-200 dark:bg-blue-800/20 dark:border-blue-500/70',
+    flow: 'bg-[#f0fdfa] border-[#99f6e4] dark:bg-teal-800/20 dark:border-teal-600/70',
+    app: 'bg-[#fff7ed] border-orange-300 dark:bg-orange-800/20 dark:border-orange-400/70',
+    raw_app: 'bg-[#fff7ed] border-orange-300 dark:bg-orange-800/20 dark:border-orange-400/70'
 }[kind];
 const iconColor = {
     script: '#60A5FA',

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

@@ -15,6 +15,8 @@ import { LanguageIcon } from '../languageIcons';
 import { Archive, Calendar, Code, Copy, Eye, FileUp, GitFork, List, Pen, Share, Trash, History } from 'lucide-svelte';
 import ScriptVersionHistory from '../../ScriptVersionHistory.svelte';
 import { Drawer, DrawerContent } from '..';
+import NoMainFuncBadge from '../../NoMainFuncBadge.svelte';
+import Tooltip from '../../Tooltip.svelte';
 export let script;
 export let marked;
 export let starred;
@@ -83,6 +85,9 @@ let versionsDrawerOpen = false;
 			<Badge color="red" baseClass="border">archived</Badge>
 		{/if}
 
+		{#if script.no_main_func}
+			<NoMainFuncBadge />
+		{/if}
 		<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">
@@ -93,7 +98,13 @@ let versionsDrawerOpen = false;
 	<svelte:fragment slot="actions">
 		<span class="hidden md:inline-flex gap-x-1">
 			{#if !$userStore?.operator}
-				{#if script.canWrite && !script.archived}
+				{#if script.use_codebase}
+					<Badge
+						>bundle<Tooltip
+							>This script is deployed as a bundle and can only be deployed from the CLI for now</Tooltip
+						></Badge
+					>
+				{:else if script.canWrite && !script.archived}
 					<div>
 						<Button
 							color="light"

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

@@ -7,6 +7,7 @@ declare const __propDef: {
     props: {
         script: Script & {
             canWrite: boolean;
+            use_codebase: boolean;
         };
         marked: string | undefined;
         starred: boolean;

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

@@ -0,0 +1,45 @@
+<script>import { getContext } from 'svelte';
+import { Tab } from '@rgossiaux/svelte-headlessui';
+import { twMerge } from 'tailwind-merge';
+import Popover from '../../Popover.svelte';
+import DropdownV2 from '../../DropdownV2.svelte';
+export let disabled = false;
+export let small = false;
+export let light = false;
+export let id = undefined;
+export let togglableItems;
+const { select, selected } = getContext('ToggleButtonGroup');
+let items = togglableItems.map((i) => ({ displayName: i.label, action: () => select(i.value) }));
+function isAnOptionSelected(selected) {
+    return togglableItems.some((i) => i.value === selected);
+}
+</script>
+
+<Popover
+	disablePopup={true}
+	notClickable
+	class={twMerge('flex', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}
+	disappearTimeout={0}
+>
+	<div {id} class="flex">
+		{#if isAnOptionSelected($selected)}
+			<Tab
+				{disabled}
+				class={twMerge(
+					' rounded-md transition-all text-xs flex gap-1 flex-row items-center',
+					small ? 'px-1.5 py-0.5 text-2xs' : 'px-2 py-1',
+					light ? 'font-medium' : '',
+					isAnOptionSelected($selected)
+						? 'bg-surface shadow-md'
+						: 'bg-surface-secondary hover:bg-surface-hover',
+					$$props.class
+				)}
+			>
+				{togglableItems.find((i) => i.value === $selected)?.label}
+			</Tab>
+		{/if}
+		<div class="flex items-center">
+			<DropdownV2 {items} />
+		</div>
+	</div>
+</Popover>

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

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        disabled?: boolean | undefined;
+        small?: boolean | undefined;
+        light?: boolean | undefined;
+        id?: string | undefined;
+        togglableItems: {
+            label: string;
+            value: string;
+        }[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToggleButtonMoreProps = typeof __propDef.props;
+export type ToggleButtonMoreEvents = typeof __propDef.events;
+export type ToggleButtonMoreSlots = typeof __propDef.slots;
+export default class ToggleButtonMore extends SvelteComponent<ToggleButtonMoreProps, ToggleButtonMoreEvents, ToggleButtonMoreSlots> {
+}
+export {};

package/package/components/copilot/CronGen.svelte

@@ -55,7 +55,7 @@ async function generateCron() {
 			startIcon={{ icon: Wand2 }}
 			iconOnly
 			title="AI Assistant"
-			btnClasses="min-h-[30px] text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+			btnClasses="text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
 			loading={genLoading}
 			clickableWhileLoading
 			on:click={genLoading ? () => abortController?.abort() : undefined}
@@ -80,7 +80,7 @@ async function generateCron() {
 				color="light"
 				variant="contained"
 				buttonType="button"
-				btnClasses="!p-1 !w-[38px] !ml-2 text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
+				btnClasses="!ml-2 text-violet-800 dark:text-violet-400 bg-violet-100 dark:bg-gray-700"
 				title="Generate CRON schedule from prompt"
 				aria-label="Generate"
 				iconOnly

package/package/components/copilot/FlowCopilotStatus.svelte

@@ -114,7 +114,7 @@ $: copilotStatus && copilotPopover?.refresh();
 				startIcon={{
 					icon: Wand2
 				}}
-				btnClasses="text-violet-800 dark:text-violet-500"
+				btnClasses="text-violet-800 dark:text-violet-400"
 				color={'light'}
 				variant={'border'}
 				nonCaptureEvent