windmill-components 1.542.5 → 1.555.0

package/package/components/common/layout/List.svelte

@@ -1,9 +1,5 @@
 <script lang="ts">import { twMerge } from 'tailwind-merge';
-export let horizontal = false;
-export let gap = 'sm';
-export let justify = 'start';
-export let wFull = true;
-export let hFull = true;
+let { horizontal = false, gap = 'sm', justify = 'start', wFull = true, hFull = true, children } = $props();
 const gapMap = {
     none: '',
     sm: 'gap-2',
@@ -24,7 +20,7 @@ const justifyMap = {
 			justify
 		]}"
 	>
-		<slot />
+		{@render children?.()}
 	</div>
 {:else}
 	<div
@@ -36,6 +32,6 @@ const justifyMap = {
 			justifyMap[justify]
 		)}
 	>
-		<slot />
+		{@render children?.()}
 	</div>
 {/if}

package/package/components/common/layout/List.svelte.d.ts

@@ -1,33 +1,11 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const List: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     horizontal?: boolean;
-    gap?: "none" | "sm" | "md" | "lg";
-    justify?: "start" | "center" | "end" | "between";
+    gap?: 'none' | 'sm' | 'md' | 'lg';
+    justify?: 'start' | 'center' | 'end' | 'between';
     wFull?: boolean;
     hFull?: boolean;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type List = InstanceType<typeof List>;
+    children?: import('svelte').Snippet;
+}
+declare const List: import("svelte").Component<Props, {}, "">;
+type List = ReturnType<typeof List>;
 export default List;

package/package/components/common/popup/PopupV2.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import Portal from '../../Portal.svelte';
 import { clickOutside } from '../../../utils';
 import { createFloatingActions } from 'svelte-floating-ui';
+import { fly } from 'svelte/transition';
 let { floatingConfig = {
     strategy: 'absolute',
     //@ts-ignore
@@ -9,28 +10,13 @@ let { floatingConfig = {
 // export let containerClasses: string = 'rounded-lg shadow-md border p-4 bg-surface'
 // export let floatingClasses: string = ''
 const [floatingRef, floatingContent] = createFloatingActions(floatingConfig);
-function close(div) {
+function close() {
     open = false;
 }
-let acceptClickoutside = $state(false);
-function pointerup() {
-    setTimeout(() => {
-        acceptClickoutside = true;
-    }, 100);
-}
-function pointerdown() {
-    if (acceptClickoutside && open) {
-        open = false;
-    }
-    else {
-        acceptClickoutside = false;
-        open = true;
-    }
-}
 </script>
 
 <div use:floatingRef>
-	{@render button?.({ pointerup, pointerdown })}
+	{@render button?.()}
 </div>
 
 <Portal name="popup-v2" {target}>
@@ -39,18 +25,21 @@ function pointerdown() {
 			class="border rounded-lg shadow-lg bg-surface z5000"
 			style="position:absolute"
 			use:floatingContent
+			transition:fly={{ duration: 100, y: -16 }}
 		>
-			<!-- svelte-ignore event_directive_deprecated -->
 			<div
-				use:clickOutside
-				on:click_outside={() => {
-					if (acceptClickoutside) {
-						acceptClickoutside = false
-						open = false
-					}
+				use:clickOutside={{
+					eventToListenName: 'pointerdown',
+					stopPropagation: true,
+					exclude: async () => {
+						const tutorial = document.querySelector('#driver-popover-content') as HTMLElement | null
+						if (tutorial) return [tutorial]
+						return []
+					},
+					onClickOutside: () => (open = false)
 				}}
 			>
-				{@render children?.({ close })}
+				{@render children?.({ close: () => close() })}
 			</div>
 		</div>
 	{/if}

package/package/components/common/popup/PopupV2.svelte.d.ts

@@ -3,8 +3,10 @@ interface Props {
     floatingConfig?: ComputeConfig;
     open?: boolean;
     target?: string | undefined;
-    button?: import('svelte').Snippet<[any]>;
-    children?: import('svelte').Snippet<[any]>;
+    button?: import('svelte').Snippet;
+    children?: import('svelte').Snippet<[{
+        close: () => void;
+    }]>;
 }
 declare const PopupV2: import("svelte").Component<Props, {}, "open">;
 type PopupV2 = ReturnType<typeof PopupV2>;

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

@@ -4,7 +4,7 @@ import Dropdown from '../../DropdownV2.svelte';
 import ScheduleEditor from '../../triggers/schedules/ScheduleEditor.svelte';
 import SharedBadge from '../../SharedBadge.svelte';
 import { ScriptService, DraftService } from '../../../gen';
-import { userStore, workspaceStore } from '../../../stores';
+import { hubBaseUrlStore, userStore, workspaceStore } from '../../../stores';
 import { createEventDispatcher } from 'svelte';
 import Badge from '../badge/Badge.svelte';
 import Button from '../button/Button.svelte';
@@ -14,12 +14,13 @@ import { sendUserToast } from '../../../toast';
 import { capitalize, copyToClipboard, DELETE, isOwner } from '../../../utils';
 import { isDeployable } from '../../../utils_deployable';
 import { LanguageIcon } from '../languageIcons';
-import { Archive, Calendar, Code, Copy, Eye, FolderOpen, ChevronUpSquare, GitFork, List, Pen, Share, Trash, History } from 'lucide-svelte';
+import { Archive, Calendar, Code, Copy, Eye, FolderOpen, ChevronUpSquare, GitFork, List, Pen, Share, Trash, History, Globe2 } from 'lucide-svelte';
 import ScriptVersionHistory from '../../ScriptVersionHistory.svelte';
 import { Drawer, DrawerContent } from '..';
 import NoMainFuncBadge from '../../NoMainFuncBadge.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { getDeployUiSettings } from '../../home/deploy_ui';
+import { scriptToHubUrl } from '../../../hub';
 let { script, marked, starred, shareModal, moveDrawer, deploymentDrawer, deleteConfirmedCallback = $bindable(), errorHandlerMuted, showCode, depth = 0, menuOpen = $bindable(false) } = $props();
 const dispatch = createEventDispatcher();
 async function archiveScript(path) {
@@ -247,6 +248,25 @@ let versionsDrawerOpen = $state(false);
 							copyToClipboard(script.path)
 						}
 					},
+					{
+						displayName: 'Publish to Hub',
+						icon: Globe2,
+						action: () => {
+							window.open(
+								scriptToHubUrl(
+									script.content,
+									script.summary,
+									script.description ?? '',
+									script.kind,
+									script.language,
+									script.schema,
+									script.lock ?? '',
+									$hubBaseUrlStore
+								).toString(),
+								'_blank'
+							)
+						}
+					},
 					{
 						displayName: script.archived ? 'Unarchive' : 'Archive',
 						icon: Archive,

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

@@ -2,20 +2,7 @@
 import Tooltip from '../../meltComponents/Tooltip.svelte';
 import { melt } from '@melt-ui/svelte';
 import { Info } from 'lucide-svelte';
-export let label = undefined;
-export let iconOnly = false;
-export let tooltip = undefined;
-export let icon = undefined;
-export let disabled = false;
-export let selectedColor = '#3b82f6';
-export let small = false;
-export let light = false;
-export let iconProps = {};
-export let showTooltipIcon = false;
-export let documentationLink = undefined;
-export let id = undefined;
-export let item;
-export let value;
+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();
 </script>
 
 <Tooltip
@@ -29,25 +16,29 @@ export let value;
 		{id}
 		{disabled}
 		class={twMerge(
-			'group 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' : '',
-			'data-[state=on]:bg-surface data-[state=on]:shadow-md',
+			'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',
 			disabled ? '!shadow-none' : '',
-			$$props.class
+			className
 		)}
 		{...__MELTUI_BUILDER_0__} use:__MELTUI_BUILDER_0__.action
-		style={`--selected-color: ${selectedColor}`}
+		style={selectedColor ? `--selected-color: ${selectedColor}` : ''}
 	>
 		{#if icon}
-			<svelte:component
-				this={icon}
+			{@const SvelteComponent = icon}
+			<SvelteComponent
 				size={small ? 12 : 14}
 				{...iconProps}
 				class={twMerge(
-					'text-gray-400',
-					'group-data-[state=on]:text-[var(--selected-color)]',
+					light ? 'text-tertiary' : 'text-secondary',
+					selectedColor
+						? 'group-data-[state=on]:text-[var(--selected-color)]'
+						: 'group-data-[state=on]:text-blue-500 dark:group-data-[state=on]:text-nord-800',
 					iconProps.class
 				)}
 			/>
@@ -60,7 +51,7 @@ export let value;
 		{/if}
 	</button>
 
-	<svelte:fragment slot="text">
+	{#snippet text()}
 		{tooltip}
-	</svelte:fragment>
+	{/snippet}
 </Tooltip>

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

@@ -1,35 +1,21 @@
 import { type ToggleGroupElements, type ToggleGroupItemProps } from '@melt-ui/svelte';
-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 ToggleButton: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    label?: string | undefined | undefined;
-    iconOnly?: boolean | undefined;
-    tooltip?: string | undefined | undefined;
+interface Props {
+    label?: string | undefined;
+    iconOnly?: boolean;
+    tooltip?: string | undefined;
     icon?: any | undefined;
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     selectedColor?: string | undefined;
-    small?: boolean | undefined;
-    light?: boolean | undefined;
-    iconProps?: Record<string, any> | undefined;
-    showTooltipIcon?: boolean | undefined;
-    documentationLink?: string | undefined | undefined;
-    id?: string | undefined | undefined;
-    item: ToggleGroupElements["item"];
+    small?: boolean;
+    light?: boolean;
+    iconProps?: Record<string, any>;
+    showTooltipIcon?: boolean;
+    documentationLink?: string | undefined;
+    id?: string | undefined;
+    item: ToggleGroupElements['item'];
     value: ToggleGroupItemProps;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ToggleButton = InstanceType<typeof ToggleButton>;
+    class?: string;
+}
+declare const ToggleButton: import("svelte").Component<Props, {}, "">;
+type ToggleButton = ReturnType<typeof ToggleButton>;
 export default ToggleButton;

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

@@ -38,7 +38,7 @@ $effect(() => {
 >
 	<div
 		class={twMerge(
-			'flex bg-surface-secondary rounded-md p-0.5 gap-1 h-full',
+			'flex bg-surface-secondary 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 } = $props();
+let { disabled = false, small = false, light = false, id = undefined, item = undefined, selected = $bindable(undefined), togglableItems, class: className = '' } = $props();
 let items = togglableItems.map((i) => ({
     displayName: i.label,
     action: () => (selected = i.value),
@@ -16,7 +16,7 @@ function isAnOptionSelected(selected) {
 <Popover
 	disablePopup={true}
 	notClickable
-	class={twMerge('flex', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}
+	class={twMerge('flex', disabled ? 'cursor-not-allowed' : 'cursor-pointer', className)}
 	disappearTimeout={0}
 >
 	<div {id} class="flex">
@@ -35,7 +35,7 @@ function isAnOptionSelected(selected) {
 			/>
 		{/if}
 		<div class="flex items-center">
-			<DropdownV2 {items} />
+			<DropdownV2 enableFlyTransition {items} />
 		</div>
 	</div>
 </Popover>

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

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

package/package/components/copilot/CodeCompletionStatus.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { codeCompletionSessionEnabled, copilotInfo, CODE_COMPLETION_SETTING_NAME } from '../../stores';
+<script lang="ts">import { copilotInfo } from '../../aiStore';
+import { codeCompletionSessionEnabled, CODE_COMPLETION_SETTING_NAME } from '../../stores';
 import { storeLocalSetting } from '../../utils';
 import Toggle from '../Toggle.svelte';
 function storeSetting() {

package/package/components/copilot/CronGen.svelte

@@ -3,8 +3,8 @@ import Button from '../common/button/Button.svelte';
 import { getNonStreamingCompletion } from './lib';
 import Popover from '../meltComponents/Popover.svelte';
 import { sendUserToast } from '../../toast';
-import { copilotInfo } from '../../stores';
 import { base } from '../../base';
+import { copilotInfo } from '../../aiStore';
 export let schedule;
 export let cronVersion;
 let instructions = '';

package/package/components/copilot/FlowCopilotInputsModal.svelte

@@ -1,35 +1,38 @@
 <script lang="ts">import { createEventDispatcher } from 'svelte';
 import { Button, Badge } from '../common';
 import Modal from '../common/modal/Modal.svelte';
+import Portal from '../Portal.svelte';
 export let open = false;
 export let inputs = [];
 const dispatch = createEventDispatcher();
 </script>
 
-<Modal
-	bind:open
-	on:confirmed={() => {
-		open = false
-		dispatch('confirmed')
-	}}
-	on:canceled
-	title="Windmill AI wants to add the following inputs to the flow:"
->
-	<ul class=" list-disc pl-5">
-		{#each inputs as input}
-			<li>{input}</li>
-		{/each}
-	</ul>
-
-	<Button
-		slot="actions"
-		on:click={() => {
+<Portal>
+	<Modal
+		bind:open
+		on:confirmed={() => {
 			open = false
 			dispatch('confirmed')
 		}}
-		color="light"
-		size="sm"
+		on:canceled
+		title="Windmill AI wants to add the following inputs to the flow:"
 	>
-		<span class="inline-flex gap-2">Add <Badge color="dark-green">Enter</Badge></span>
-	</Button>
-</Modal>
+		<ul class=" list-disc pl-5">
+			{#each inputs as input}
+				<li>{input}</li>
+			{/each}
+		</ul>
+
+		<Button
+			slot="actions"
+			on:click={() => {
+				open = false
+				dispatch('confirmed')
+			}}
+			color="light"
+			size="sm"
+		>
+			<span class="inline-flex gap-2">Add <Badge color="dark-green">Enter</Badge></span>
+		</Button>
+	</Modal>
+</Portal>

package/package/components/copilot/FlowInlineScriptAIButton.svelte

@@ -1,11 +1,11 @@
-<script lang="ts">import { copilotInfo } from '../../stores';
-import { autoPlacement } from '@floating-ui/core';
+<script lang="ts">import { autoPlacement } from '@floating-ui/core';
 import Popover from '../meltComponents/Popover.svelte';
 import Button from '../common/button/Button.svelte';
 import { ExternalLink, WandSparkles } from 'lucide-svelte';
 import { base } from '../../base';
 import { twMerge } from 'tailwind-merge';
 import { aiChatManager, AIMode } from './chat/AIChatManager.svelte';
+import { copilotInfo } from '../../aiStore';
 const { moduleId } = $props();
 const aiChatScriptModeClasses = $derived(aiChatManager.mode === AIMode.SCRIPT && aiChatManager.isOpen
     ? 'dark:bg-violet-900 bg-violet-100'

package/package/components/copilot/IteratorGen.svelte

@@ -3,25 +3,21 @@ import Button from '../common/button/Button.svelte';
 import { getNonStreamingCompletion } from './lib';
 import { sendUserToast } from '../../toast';
 import ManualPopover from '../ManualPopover.svelte';
-import { createEventDispatcher, getContext } from 'svelte';
+import { createEventDispatcher, getContext, untrack } from 'svelte';
 import YAML from 'yaml';
 import { sliceModules } from '../flows/flowStateUtils.svelte';
 import { dfs } from '../flows/dfs';
 import { yamlStringifyExceptKeys } from './utils';
-import { copilotInfo, stepInputCompletionEnabled } from '../../stores';
+import { stepInputCompletionEnabled } from '../../stores';
+import { copilotInfo } from '../../aiStore';
 import { twMerge } from 'tailwind-merge';
-import { createDispatcherIfMounted } from '../../createDispatcherIfMounted';
-let generatedContent = '';
-let loading = false;
-export let focused = false;
-export let arg;
-export let pickableProperties = undefined;
-let btnFocused = false;
-let empty = false;
-$: empty =
-    Object.keys(arg ?? {}).length === 0 ||
-        (arg.type === 'static' && !arg.value) ||
-        (arg.type === 'javascript' && !arg.expr);
+let generatedContent = $state('');
+let loading = $state(false);
+let { focused = false, arg, pickableProperties = undefined } = $props();
+let btnFocused = $state(false);
+let empty = $derived(Object.keys(arg ?? {}).length === 0 ||
+    (arg.type === 'static' && !arg.value) ||
+    (arg.type === 'javascript' && !arg.expr));
 let abortController = new AbortController();
 const { flowStore, selectedId } = getContext('FlowEditorContext');
 async function generateIteratorExpr() {
@@ -85,7 +81,6 @@ export function onKeyUp(event) {
     }
 }
 const dispatch = createEventDispatcher();
-const dispatchIfMounted = createDispatcherIfMounted(dispatch);
 function automaticGeneration() {
     if (empty) {
         generateIteratorExpr();
@@ -99,18 +94,28 @@ function cancelOnOutOfFocus() {
         }
     }, 150);
 }
-$: if (!focused) {
-    cancelOnOutOfFocus();
-}
-$: if ($copilotInfo.enabled && $stepInputCompletionEnabled && focused) {
-    automaticGeneration();
-}
+$effect(() => {
+    if (!focused) {
+        untrack(() => {
+            cancelOnOutOfFocus();
+        });
+    }
+});
+$effect(() => {
+    if ($copilotInfo.enabled && $stepInputCompletionEnabled && focused) {
+        untrack(() => {
+            automaticGeneration();
+        });
+    }
+});
 function cancel() {
     abortController.abort();
     generatedContent = '';
 }
-$: dispatchIfMounted('showExpr', generatedContent);
-let out = true; // hack to prevent regenerating answer when accepting the answer due to mouseenter on new icon
+$effect(() => {
+    dispatch('showExpr', generatedContent);
+});
+let out = $state(true); // hack to prevent regenerating answer when accepting the answer due to mouseenter on new icon
 </script>
 
 {#if $copilotInfo.enabled && $stepInputCompletionEnabled}
@@ -159,10 +164,10 @@ let out = true; // hack to prevent regenerating answer when accepting the answer
 				{/if}
 			{/if}
 		</Button>
-		<svelte:fragment slot="content">
+		{#snippet content()}
 			<div class="text-sm text-tertiary">
 				{generatedContent}
 			</div>
-		</svelte:fragment>
+		{/snippet}
 	</ManualPopover>
 {/if}

package/package/components/copilot/IteratorGen.svelte.d.ts

@@ -1,5 +1,10 @@
 import type { InputTransform } from '../../gen';
 import type { PickableProperties } from '../flows/previousResults';
+interface Props {
+    focused?: boolean;
+    arg: InputTransform | any;
+    pickableProperties?: PickableProperties | undefined;
+}
 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;
@@ -13,17 +18,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const IteratorGen: $$__sveltets_2_IsomorphicComponent<{
-    focused?: boolean;
-    arg: InputTransform | any;
-    pickableProperties?: PickableProperties | undefined;
-    onKeyUp?: (event: KeyboardEvent) => void;
-}, {
+declare const IteratorGen: $$__sveltets_2_IsomorphicComponent<Props, {
     setExpr: CustomEvent<any>;
+    showExpr: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     onKeyUp: (event: KeyboardEvent) => void;
-}, string>;
+}, "">;
 type IteratorGen = InstanceType<typeof IteratorGen>;
 export default IteratorGen;

package/package/components/copilot/MetadataGen.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">import { getCompletion, getResponseFromEvent } from './lib';
 import { isInitialCode } from '../../script_helpers';
 import { Check, Loader2, Wand2 } from 'lucide-svelte';
-import { copilotInfo, metadataCompletionEnabled } from '../../stores';
+import { metadataCompletionEnabled } from '../../stores';
+import { copilotInfo } from '../../aiStore';
 import { createEventDispatcher, onDestroy } from 'svelte';
 import { sendUserToast } from '../../toast';
 import { twMerge } from 'tailwind-merge';
@@ -297,9 +298,9 @@ onDestroy(() => {
 			on:blur={() => (focused = false)}
 		/>
 		{#if promptConfigName === 'agentToolFunctionName' && !validateToolName(content ?? '')}
-			<div class="text-3xs text-red-400 -mt-0.5">
+			<p class="text-3xs text-red-400 leading-tight mt-0.5">
 				Invalid tool name, should only contain letters, numbers and underscores
-			</div>
+			</p>
 		{/if}
 	{/if}
 	<!-- <slot {updateFocus} {active} {generatedContent} classNames={active ? '!indent-[8.8rem]' : ''} /> -->