windmill-components 1.623.2 → 1.655.0

package/package/components/DeployWorkspace.svelte.d.ts

@@ -5,6 +5,7 @@ interface Props {
     additionalInformation?: AdditionalInformation | undefined;
     workspaceToDeployTo?: string | undefined;
     hideButton?: boolean;
+    canDeployToWorkspace?: 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> & {
@@ -25,6 +26,6 @@ declare const DeployWorkspace: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     deployAll: () => void;
-}, "workspaceToDeployTo">;
+}, "workspaceToDeployTo" | "canDeployToWorkspace">;
 type DeployWorkspace = InstanceType<typeof DeployWorkspace>;
 export default DeployWorkspace;

package/package/components/DeployWorkspaceDrawer.svelte

@@ -2,12 +2,13 @@
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import DeployWorkspace from './DeployWorkspace.svelte';
 import {} from '../utils_deployable';
-let initialPath = undefined;
-let kind = undefined;
-let drawer = undefined;
-let workspaceToDeployTo = undefined;
-let deployWorkspace = undefined;
-let additionalInformation = undefined;
+let initialPath = $state(undefined);
+let kind = $state(undefined);
+let drawer = $state(undefined);
+let workspaceToDeployTo = $state(undefined);
+let deployWorkspace = $state(undefined);
+let additionalInformation = $state(undefined);
+let canDeployToWorkspace = $state(true);
 export async function openDrawer(initialPath_l, kind_l, additionalInformation_l) {
     additionalInformation = additionalInformation_l;
     initialPath = initialPath_l;
@@ -20,18 +21,19 @@ export async function openDrawer(initialPath_l, kind_l, additionalInformation_l)
 	<DrawerContent title="Deploy {initialPath}" on:close={drawer.closeDrawer}>
 		{#if (kind != 'trigger' && kind != undefined && initialPath != undefined) || (kind === 'trigger' && initialPath != undefined && additionalInformation?.triggers != undefined)}
 			<DeployWorkspace
-				hideButton
+				hideButton={false}
 				{initialPath}
 				{kind}
 				{additionalInformation}
 				bind:workspaceToDeployTo
 				bind:this={deployWorkspace}
+				bind:canDeployToWorkspace
 			/>
 		{/if}
 
 		{#snippet actions()}
 			<Button
-				disabled={workspaceToDeployTo == undefined}
+				disabled={workspaceToDeployTo == undefined || !canDeployToWorkspace}
 				on:click={() => deployWorkspace?.deployAll()}>Deploy All</Button
 			>
 		{/snippet}

package/package/components/DeployWorkspaceDrawer.svelte.d.ts

@@ -1,23 +1,6 @@
 import { type AdditionalInformation, type Kind } from '../utils_deployable';
-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 DeployWorkspaceDrawer: $$__sveltets_2_IsomorphicComponent<{
-    openDrawer?: (initialPath_l: string, kind_l: Kind, additionalInformation_l?: AdditionalInformation) => Promise<void>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+declare const DeployWorkspaceDrawer: import("svelte").Component<Record<string, never>, {
     openDrawer: (initialPath_l: string, kind_l: Kind, additionalInformation_l?: AdditionalInformation) => Promise<void>;
-}, string>;
-type DeployWorkspaceDrawer = InstanceType<typeof DeployWorkspaceDrawer>;
+}, "">;
+type DeployWorkspaceDrawer = ReturnType<typeof DeployWorkspaceDrawer>;
 export default DeployWorkspaceDrawer;

package/package/components/Description.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">import { ExternalLink } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
-export let link = undefined;
+let { link = undefined, class: className = '', children } = $props();
 </script>
 
-<div class={twMerge('text-xs text-primary font-normal', $$props.class)}>
-	<slot />
+<div class={twMerge('text-xs text-primary font-normal', className)}>
+	{@render children?.()}
 	{#if link}
-		<a href={link} target="_blank">Learn more <ExternalLink size={12} class="inline-block" /></a>
+		<a href={link} target="_blank" class="whitespace-nowrap"
+			>Learn more <ExternalLink size={12} class="inline-block" /></a
+		>
 	{/if}
 </div>

package/package/components/Description.svelte.d.ts

@@ -1,30 +1,8 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    link?: string | undefined;
+    class?: string;
+    children?: import('svelte').Snippet;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Description: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    link?: string | undefined | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Description = InstanceType<typeof Description>;
+declare const Description: import("svelte").Component<Props, {}, "">;
+type Description = ReturnType<typeof Description>;
 export default Description;

package/package/components/Dev.svelte

@@ -11,7 +11,7 @@ import { emptySchema, readFieldsRecursively, sendUserToast } from '../utils';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { onDestroy, onMount, setContext, untrack } from 'svelte';
 import DarkModeToggle from './sidebar/DarkModeToggle.svelte';
-import { page } from '$app/stores';
+import { page } from '$app/state';
 import { getUserExt } from '../user';
 import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte';
 import FlowModuleSchemaMap from './flows/map/FlowModuleSchemaMap.svelte';
@@ -64,7 +64,7 @@ async function loadUser() {
     }
 }
 let darkModeToggle = $state();
-let darkMode = $state(undefined);
+let darkMode = $state(document.documentElement.classList.contains('dark'));
 let modeInitialized = $state(false);
 function initializeMode() {
     modeInitialized = true;
@@ -104,12 +104,13 @@ let lockChanges = false;
 let timeout = undefined;
 let loadingCodebaseButton = $state(false);
 let lastCommandId = '';
-if (initial) {
-    if (initial.type == 'script') {
-        replaceScript(initial.script);
+const untrackedInitial = untrack(() => initial);
+if (untrackedInitial) {
+    if (untrackedInitial.type == 'script') {
+        replaceScript(untrackedInitial.script);
     }
-    else if (initial.type == 'flow') {
-        replaceFlow(initial.flow);
+    else if (untrackedInitial.type == 'flow') {
+        replaceFlow(untrackedInitial.flow);
     }
     modeInitialized = true;
 }
@@ -155,7 +156,7 @@ const el = (event) => {
         lockChanges = true;
         replaceFlow(event.data);
         timeout && clearTimeout(timeout);
-        timeout = setTimeout(() => {
+        timeout = window.setTimeout(() => {
             lockChanges = false;
         }, 500);
     }
@@ -396,7 +397,6 @@ async function replaceFlow(lastEdit) {
 const flowStateStore = $state({ val: {} });
 const previewArgsStore = $state({ val: {} });
 const scriptEditorDrawer = writable(undefined);
-const moving = writable(undefined);
 const history = initHistory(flowStore.val);
 const stepsInputArgs = new StepsInputArgs();
 const selectionManager = new SelectionManager();
@@ -421,7 +421,6 @@ setContext('FlowEditorContext', {
     previewArgs: previewArgsStore,
     scriptEditorDrawer,
     flowEditorDrawer: writable(undefined),
-    moving,
     history,
     pathStore: pathStore,
     flowStateStore,
@@ -441,7 +440,9 @@ setContext('FlowEditorContext', {
     }),
     currentEditor: writable(undefined),
     modulesTestStates,
-    outputPickerOpenFns
+    outputPickerOpenFns,
+    preserveOnBehalfOf: writable(false),
+    savedOnBehalfOfEmail: writable(undefined)
 });
 setContext('PropPickerContext', {
     flowPropPickerConfig: writable(undefined),
@@ -492,9 +493,9 @@ async function inferModuleArgs(selectedIdStore) {
         }
     });
 }
-let token = $derived($page.url.searchParams.get('wm_token') ?? undefined);
-let workspace = $derived($page.url.searchParams.get('workspace') ?? undefined);
-let themeDarkRaw = $derived($page.url.searchParams.get('activeColorTheme'));
+let token = $derived(page.url.searchParams.get('wm_token') ?? undefined);
+let workspace = $derived(page.url.searchParams.get('workspace') ?? undefined);
+let themeDarkRaw = $derived(page.url.searchParams.get('activeColorTheme'));
 let themeDark = $derived(themeDarkRaw == '2' || themeDarkRaw == '4');
 $effect.pre(() => {
     setContext('AuthToken', { token });
@@ -730,6 +731,7 @@ const selectedId = $derived(selectionManager.getSelectedId());
 
 				<div class="flex justify-center pt-1 z-50 absolute -translate-x-[100%] right-2 top-2 gap-2">
 					<FlowPreviewButtons
+						{suspendStatus}
 						bind:this={flowPreviewButtons}
 						{onJobDone}
 						bind:localModuleStates

package/package/components/DiffEditor.svelte

@@ -9,7 +9,7 @@ import EditorTheme from './EditorTheme.svelte';
 import Button from './common/button/Button.svelte';
 import { twMerge } from 'tailwind-merge';
 const SIDE_BY_SIDE_MIN_WIDTH = 700;
-let { open = false, className = '', automaticLayout = true, fixedOverflowWidgets = true, defaultLang, defaultModifiedLang, defaultOriginal = undefined, defaultModified = undefined, readOnly = false, buttons = [], modifiedModel } = $props();
+let { open = false, className = '', automaticLayout = true, fixedOverflowWidgets = true, defaultLang, defaultModifiedLang, defaultOriginal = undefined, defaultModified = undefined, readOnly = false, buttons = [], modifiedModel, inlineDiff = false } = $props();
 let diffEditor = $state(undefined);
 let diffDivEl = $state(null);
 let editorWidth = $state(SIDE_BY_SIDE_MIN_WIDTH);
@@ -20,7 +20,7 @@ async function loadDiffEditor() {
     }
     diffEditor = meditor.createDiffEditor(diffDivEl, {
         automaticLayout,
-        renderSideBySide: editorWidth >= SIDE_BY_SIDE_MIN_WIDTH,
+        renderSideBySide: inlineDiff ? false : editorWidth >= SIDE_BY_SIDE_MIN_WIDTH,
         originalEditable: false,
         readOnly,
         minimap: {
@@ -63,8 +63,8 @@ async function loadDiffEditor() {
             }
         });
     }
-    if (defaultLang !== undefined) {
-        setupModel(defaultLang, defaultOriginal, defaultModified, defaultModifiedLang);
+    if (defaultLang !== undefined || defaultOriginal !== undefined || defaultModified !== undefined) {
+        setupModel(defaultLang ?? 'plaintext', defaultOriginal, defaultModified, defaultModifiedLang);
     }
 }
 export function setupModel(lang, original, modified, modifiedLang) {
@@ -109,16 +109,17 @@ export function show() {
 export function hide() {
     open = false;
 }
-function onWidthChange(editorWidth) {
-    diffEditor?.updateOptions({ renderSideBySide: editorWidth >= SIDE_BY_SIDE_MIN_WIDTH });
-}
 $effect(() => {
     if (open && diffDivEl) {
         loadDiffEditor();
     }
 });
 $effect(() => {
-    onWidthChange(editorWidth);
+    if (diffEditor) {
+        diffEditor.updateOptions({
+            renderSideBySide: inlineDiff ? false : editorWidth >= SIDE_BY_SIDE_MIN_WIDTH
+        });
+    }
 });
 onMount(() => {
     if (BROWSER) {

package/package/components/DiffEditor.svelte.d.ts

@@ -2,12 +2,7 @@ import '@codingame/monaco-vscode-standalone-languages';
 import '@codingame/monaco-vscode-standalone-json-language-features';
 import '@codingame/monaco-vscode-standalone-typescript-language-features';
 import { editor as meditor } from 'monaco-editor';
-import type { ButtonType } from './common';
-export interface ButtonProp {
-    text: string;
-    color?: ButtonType.Color;
-    onClick: () => void;
-}
+import type { ButtonProp } from './diffEditorTypes';
 interface Props {
     open?: boolean;
     className?: string;
@@ -20,6 +15,7 @@ interface Props {
     readOnly?: boolean;
     buttons?: ButtonProp[];
     modifiedModel?: meditor.ITextModel | meditor.IEditorModel;
+    inlineDiff?: boolean;
 }
 declare const DiffEditor: import("svelte").Component<Props, {
     setupModel: (lang: string, original?: string, modified?: string, modifiedLang?: string) => void;

package/package/components/DisplayResult.svelte

@@ -362,8 +362,8 @@ $effect(() => {
 
 {#if result_stream && result == undefined}
 	<div class="flex flex-col w-full gap-2">
-		<div class="flex items-center gap-2 text-primary">
-			<Loader2 class="animate-spin" size={16} /> Streaming result
+		<div class="flex items-center gap-2 text-secondary text-xs">
+			<Loader2 class="animate-spin" size={14} /> Streaming result
 		</div>
 		<ResultStreamDisplay {result_stream} />
 	</div>

package/package/components/DisplayResult.svelte.d.ts

@@ -43,7 +43,7 @@ declare const DisplayResult: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     openDrawer: () => void;
-    getToolbarLocation: () => "external" | "self" | undefined;
+    getToolbarLocation: () => "self" | "external" | undefined;
 }, "forceJson" | "drawerOpen">;
 type DisplayResult = InstanceType<typeof DisplayResult>;
 export default DisplayResult;

package/package/components/DropdownMenu.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">let { items, closeCallback } = $props();
+export {};
+</script>
+
+<ul class="bg-surface-tertiary rounded-md border w-56 relative drop-shadow-base">
+	{#each items as item}
+		<li class="w-full">
+			<button
+				class="px-3 h-9 text-xs cursor-pointer hover:bg-surface-hover font-normal w-full text-left flex items-center gap-2.5"
+				onclick={() => {
+					item.onClick?.()
+					item.onHover?.(false)
+					closeCallback?.()
+				}}
+				onmouseenter={() => item.onHover?.(true)}
+				onmouseleave={() => item.onHover?.(false)}
+			>
+				{#if item.icon}
+					<item.icon size="16"></item.icon>
+				{/if}
+				<span class="flex-1">
+					{item.label}
+				</span>
+				{#if item.right}
+					<span class="text-xs text-hint">{item.right}</span>
+				{/if}
+			</button>
+		</li>
+	{/each}
+	{#if items.length === 0}
+		<li class="w-full">
+			<div
+				class="px-3 h-9 text-xs font-normal w-full text-left flex items-center gap-2.5 text-hint"
+			>
+				No actions available
+			</div>
+		</li>
+	{/if}
+</ul>

package/package/components/DropdownMenu.svelte.d.ts

@@ -0,0 +1,14 @@
+type Item = {
+    label: string;
+    icon?: any;
+    right?: string;
+    onClick?: () => void;
+    onHover?: (hover: boolean) => void;
+};
+export type Props = {
+    closeCallback?: () => void;
+    items: Item[];
+};
+declare const DropdownMenu: import("svelte").Component<Props, {}, "">;
+type DropdownMenu = ReturnType<typeof DropdownMenu>;
+export default DropdownMenu;

package/package/components/DropdownSubmenuItem.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">import { untrack } from 'svelte';
+import MenuItem from './meltComponents/MenuItem.svelte';
+import { melt } from '@melt-ui/svelte';
+import { twMerge } from 'tailwind-merge';
+import { ChevronRight } from 'lucide-svelte';
+import { Tooltip } from './meltComponents';
+let { item, builders, meltItem } = $props();
+const { elements: { subTrigger, subMenu }, states: { subOpen } } = untrack(() => builders).createSubmenu();
+let subItems = $derived((item.submenuItems ?? []).filter((i) => !i.hide));
+</script>
+
+<button
+	{...$subTrigger} use:$subTrigger.action
+	class={twMerge(
+		'px-4 py-2 text-primary font-normal hover:bg-surface-hover cursor-pointer text-xs transition-colors w-full',
+		'data-[highlighted]:bg-surface-hover',
+		'flex flex-row gap-2 items-center rounded-sm'
+	)}
+>
+	{#if item.icon}
+		<item.icon size={14} color={item.iconColor} class="shrink-0" />
+	{/if}
+	<p class="truncate grow min-w-0 whitespace-nowrap text-left">
+		{item.displayName}
+	</p>
+	{@render item.extra?.()}
+	<ChevronRight size={14} class="ml-auto shrink-0 text-tertiary" />
+</button>
+
+{#if $subOpen}
+	<div
+		{...$subMenu} use:$subMenu.action
+		class="z-[6000] bg-surface-tertiary dark:border w-48 origin-top-right rounded-lg shadow-lg focus:outline-none overflow-y-auto py-1"
+	>
+		{#each subItems as subItem}
+			{#if subItem.separatorTop}
+				<div class="my-1 border-t border-border-light"></div>
+			{/if}
+			<MenuItem
+				onClick={(e) => subItem?.action?.(e)}
+				href={subItem?.href}
+				target={subItem?.hrefTarget}
+				disabled={subItem?.disabled}
+				class={twMerge(
+					'px-4 py-2 text-primary font-normal hover:bg-surface-hover cursor-pointer text-xs transition-colors w-full',
+					'data-[highlighted]:bg-surface-hover',
+					'flex flex-row gap-2 items-center rounded-sm',
+					subItem?.disabled && 'text-disabled cursor-not-allowed'
+				)}
+				item={meltItem}
+			>
+				{#if subItem.icon}
+					<subItem.icon size={14} color={subItem.iconColor} class="shrink-0" />
+				{/if}
+				<p title={subItem.displayName} class="truncate grow min-w-0 whitespace-nowrap text-left">
+					{subItem.displayName}
+				</p>
+				{@render subItem.extra?.()}
+				{#if subItem.tooltip}
+					<Tooltip>
+						{#snippet text()}
+							{subItem.tooltip}
+						{/snippet}
+					</Tooltip>
+				{/if}
+			</MenuItem>
+		{/each}
+	</div>
+{/if}

package/package/components/DropdownSubmenuItem.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Item } from '../utils';
+import type { MenubarMenuElements, createDropdownMenu } from '@melt-ui/svelte';
+interface Props {
+    item: Item;
+    builders: ReturnType<typeof createDropdownMenu>['builders'];
+    meltItem: MenubarMenuElements['item'];
+}
+declare const DropdownSubmenuItem: import("svelte").Component<Props, {}, "">;
+type DropdownSubmenuItem = ReturnType<typeof DropdownSubmenuItem>;
+export default DropdownSubmenuItem;

package/package/components/DropdownV2.svelte

@@ -18,9 +18,9 @@ import { fly } from 'svelte/transition';
 import { ButtonType } from './common/button/model';
 let { aiId = undefined, aiDescription = undefined, items = [], disabled = false, placement = 'bottom-end', usePointerDownOutside = false, closeOnOtherDropdownOpen = true, fixedHeight = true, hidePopup = false, open = $bindable(false), customWidth = undefined, customMenu = false, class: classNames = undefined, enableFlyTransition = false, size = 'md', btnText = '', btnId = undefined, buttonReplacement, menu, maxHeight = undefined } = $props();
 let buttonEl = $state(undefined);
-const { elements: { menu: menuEl, item, trigger }, states, ids: { menu: dropdownId } } = createDropdownMenu({
+const { elements: { menu: menuEl, item, trigger }, builders, states, ids: { menu: dropdownId } } = createDropdownMenu({
     positioning: {
-        placement
+        placement: untrack(() => placement)
     },
     loop: true,
     onOpenChange: ({ next }) => {
@@ -100,7 +100,7 @@ async function getMenuElements() {
 			variant="subtle"
 			startIcon={{ icon: EllipsisVertical }}
 			btnClasses="bg-transparent"
-			iconOnly
+			iconOnly={!btnText}
 		>
 			{btnText}
 		</Button>
@@ -121,7 +121,7 @@ async function getMenuElements() {
 				class="bg-surface-tertiary dark:border w-56 origin-top-right rounded-lg shadow-lg focus:outline-none overflow-y-auto py-1"
 				style={`${customWidth ? `width: ${customWidth}px;` : ''} max-height: ${maxHeight || '50vh'};`}
 			>
-				<DropdownV2Inner {aiId} items={computeItems} meltItem={item} />
+				<DropdownV2Inner {aiId} items={computeItems} meltItem={item} {builders} />
 			</div>
 		{/if}
 	</div>

package/package/components/DropdownV2.svelte.d.ts

@@ -37,8 +37,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const DropdownV2: $$__sveltets_2_IsomorphicComponent<Props, {
-    open: CustomEvent<any>;
-    close: CustomEvent<any>;
+    open: CustomEvent<void>;
+    close: CustomEvent<void>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {

package/package/components/DropdownV2Inner.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">import MenuItem from './meltComponents/MenuItem.svelte';
+import DropdownSubmenuItem from './DropdownSubmenuItem.svelte';
 import { Loader2 } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import { Tooltip } from './meltComponents';
-let { aiId, items = [], meltItem } = $props();
+let { aiId, items = [], meltItem, builders } = $props();
 let computedItems = $state(undefined);
 async function computeItems() {
     if (typeof items === 'function') {
@@ -18,39 +19,49 @@ computeItems();
 {#if computedItems}
 	<div class="flex flex-col">
 		{#each computedItems ?? [] as item}
-			<MenuItem
-				onClick={(e) => item?.action?.(e)}
-				href={item?.href}
-				target={item?.hrefTarget}
-				disabled={item?.disabled}
-				class={twMerge(
-					'px-4 py-2 text-primary font-normal hover:bg-surface-hover cursor-pointer text-xs transition-colors w-full',
-					'data-[highlighted]:bg-surface-hover',
-					'flex flex-row gap-2 items-center rounded-sm',
-					item?.disabled && 'text-disabled cursor-not-allowed',
-					item?.type === 'delete' &&
-						!item?.disabled &&
-						'text-red-600 dark:text-red-400 data-[highlighted]:bg-red-500/10 dark:data-[highlighted]:bg-red-900/80 dark:data-[highlighted]:text-red-300 '
-				)}
-				item={meltItem}
-				aiId={`${aiId ? `${aiId}-${item.displayName}` : undefined}`}
-				aiDescription={item.displayName}
-			>
-				{#if item.icon}
-					<item.icon size={14} color={item.iconColor} class="shrink-0" />
-				{/if}
-				<p title={item.displayName} class="truncate grow min-w-0 whitespace-nowrap text-left">
-					{item.displayName}
-				</p>
-				{@render item.extra?.()}
-				{#if item.tooltip}
-					<Tooltip>
-						{#snippet text()}
-							{item.tooltip}
-						{/snippet}
-					</Tooltip>
-				{/if}
-			</MenuItem>
+			{#if item.separatorTop}
+				<div class="my-1 border-t border-border-light"></div>
+			{/if}
+			{#if item.submenuItems && builders}
+				<DropdownSubmenuItem {item} {builders} {meltItem} />
+			{:else}
+				<MenuItem
+					onClick={(e) => item?.action?.(e)}
+					href={item?.href}
+					target={item?.hrefTarget}
+					disabled={item?.disabled}
+					class={twMerge(
+						'px-4 py-2 text-primary font-normal hover:bg-surface-hover cursor-pointer text-xs transition-colors w-full',
+						'data-[highlighted]:bg-surface-hover',
+						'flex flex-row gap-2 items-center rounded-sm',
+						item?.disabled && 'text-disabled cursor-not-allowed',
+						item?.type === 'delete' &&
+							!item?.disabled &&
+							'text-red-600 dark:text-red-400 data-[highlighted]:bg-red-500/10 dark:data-[highlighted]:bg-red-900/80 dark:data-[highlighted]:text-red-300 '
+					)}
+					item={meltItem}
+					aiId={`${aiId ? `${aiId}-${item.displayName}` : undefined}`}
+					aiDescription={item.displayName}
+				>
+					{#if item.icon}
+						<item.icon size={14} color={item.iconColor} class="shrink-0" />
+					{/if}
+					<p title={item.displayName} class="truncate grow min-w-0 whitespace-nowrap text-left">
+						{item.displayName}
+					</p>
+					{@render item.extra?.()}
+					{#if item.shortcut}
+						<span class="ml-auto pl-4 text-2xs text-secondary shrink-0">{item.shortcut}</span>
+					{/if}
+					{#if item.tooltip}
+						<Tooltip>
+							{#snippet text()}
+								{item.tooltip}
+							{/snippet}
+						</Tooltip>
+					{/if}
+				</MenuItem>
+			{/if}
 		{/each}
 	</div>
 {:else}

package/package/components/DropdownV2Inner.svelte.d.ts

@@ -1,9 +1,10 @@
-import type { MenubarMenuElements } from '@melt-ui/svelte';
+import type { MenubarMenuElements, createDropdownMenu } from '@melt-ui/svelte';
 import type { Item } from '../utils';
 interface Props {
     aiId?: string;
     items?: Item[] | (() => Item[]) | (() => Promise<Item[]>);
     meltItem: MenubarMenuElements['item'];
+    builders?: ReturnType<typeof createDropdownMenu>['builders'];
 }
 declare const DropdownV2Inner: import("svelte").Component<Props, {}, "">;
 type DropdownV2Inner = ReturnType<typeof DropdownV2Inner>;

package/package/components/DucklakePicker.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">import { WorkspaceService } from '../gen';
 import { workspaceStore } from '../stores';
 import Select from './select/Select.svelte';
-import DbManagerDrawer from './DBManagerDrawer.svelte';
 import ExploreAssetButton, { assetCanBeExplored } from './ExploreAssetButton.svelte';
 import { usePromise } from '../svelte5Utils.svelte';
 let { value = $bindable(undefined), disabled = false, disablePortal = false, showSchemaExplorer = false, placeholder = undefined, selectInputClass = '', class: className = '', onClear = undefined } = $props();
 let ducklakes = usePromise(() => WorkspaceService.listDucklakes({ workspace: $workspaceStore ?? '' }));
-let dbManagerDrawer = $state();
 </script>
 
 <div class={className}>
@@ -24,9 +22,6 @@ let dbManagerDrawer = $state();
 		<ExploreAssetButton
 			class="mt-1 w-fit"
 			asset={{ kind: 'ducklake', path: value }}
-			{dbManagerDrawer}
 		/>
 	{/if}
-
-	<DbManagerDrawer bind:this={dbManagerDrawer} />
 </div>

package/package/components/DurationMs.svelte

@@ -2,9 +2,7 @@
 import { Badge } from './common';
 import { Hourglass } from 'lucide-svelte';
 import WaitTimeWarning from './common/waitTimeWarning/WaitTimeWarning.svelte';
-export let duration_ms;
-export let self_wait_time_ms = undefined;
-export let aggregate_wait_time_ms = undefined;
+let { duration_ms, self_wait_time_ms = undefined, aggregate_wait_time_ms = undefined } = $props();
 </script>
 
 <div>