windmill-components 1.623.1 → 1.642.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

@@ -1,13 +1,15 @@
 <script lang="ts">import { Button, Drawer } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import DeployWorkspace from './DeployWorkspace.svelte';
+import ParentWorkspaceProtectionAlert from './ParentWorkspaceProtectionAlert.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;
@@ -18,6 +20,14 @@ export async function openDrawer(initialPath_l, kind_l, additionalInformation_l)
 
 <Drawer bind:this={drawer} size="900px">
 	<DrawerContent title="Deploy {initialPath}" on:close={drawer.closeDrawer}>
+		{#if workspaceToDeployTo}
+			<ParentWorkspaceProtectionAlert
+				parentWorkspaceId={workspaceToDeployTo}
+				onUpdateCanDeploy={(canDeploy) => {
+					canDeployToWorkspace = canDeploy
+				}}
+			/>
+		{/if}
 		{#if (kind != 'trigger' && kind != undefined && initialPath != undefined) || (kind === 'trigger' && initialPath != undefined && additionalInformation?.triggers != undefined)}
 			<DeployWorkspace
 				hideButton
@@ -26,12 +36,13 @@ export async function openDrawer(initialPath_l, kind_l, additionalInformation_l)
 				{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,10 +1,13 @@
-<script lang="ts">import { twMerge } from 'tailwind-merge';
+<script lang="ts">import { ExternalLink } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
 export let link = undefined;
 </script>
 
 <div class={twMerge('text-xs text-primary font-normal', $$props.class)}>
 	<slot />
 	{#if link}
-		<a href={link} target="_blank">Learn more</a>
+		<a href={link} target="_blank" class="whitespace-nowrap"
+			>Learn more <ExternalLink size={12} class="inline-block" /></a
+		>
 	{/if}
 </div>

package/package/components/Dev.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">import SchemaForm from './SchemaForm.svelte';
+import JsonInputs from './JsonInputs.svelte';
 import JobLoader from './JobLoader.svelte';
 import { Button } from './common';
 import { WindmillIcon } from './icons';
@@ -74,6 +75,9 @@ let socket = undefined;
 // Test args input
 let args = $state({});
 let isValid = $state(true);
+let jsonView = $state(false);
+let jsonEditor = $state(undefined);
+let schemaHeight = $state(0);
 // Test
 let testIsLoading = $state(false);
 let testJob = $state();
@@ -416,6 +420,7 @@ setContext('FlowEditorContext', {
     selectionManager,
     previewArgs: previewArgsStore,
     scriptEditorDrawer,
+    flowEditorDrawer: writable(undefined),
     moving,
     history,
     pathStore: pathStore,
@@ -665,9 +670,38 @@ const selectedId = $derived(selectionManager.getSelectedId());
 			<Splitpanes horizontal style="height: 1000px;">
 				<Pane size={33}>
 					<div class="px-2">
-						<div class="break-words relative font-sans">
-							<SchemaForm compact {schema} bind:args bind:isValid />
+						<div class="flex justify-end mb-2">
+							<Toggle
+								bind:checked={jsonView}
+								size="xs"
+								options={{
+									right: 'JSON',
+									rightTooltip: 'Fill args from JSON'
+								}}
+								lightMode
+								on:change={() => {
+									jsonEditor?.setCode(JSON.stringify(args ?? {}, null, '\t'))
+								}}
+							/>
 						</div>
+						{#if jsonView}
+							<div class="py-2" style="height: {Math.max(schemaHeight, 300)}px">
+								<JsonInputs
+									bind:this={jsonEditor}
+									on:select={(e) => {
+										if (e.detail) {
+											args = e.detail
+										}
+									}}
+									updateOnBlur={false}
+									placeholder={`Write args as JSON.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}`}
+								/>
+							</div>
+						{:else}
+							<div class="break-words relative font-sans" bind:clientHeight={schemaHeight}>
+								<SchemaForm compact {schema} bind:args bind:isValid />
+							</div>
+						{/if}
 					</div>
 				</Pane>
 				<Pane size={67}>
@@ -696,6 +730,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/DiffDrawer.svelte

@@ -5,7 +5,6 @@ import Tabs from './common/tabs/Tabs.svelte';
 import Tab from './common/tabs/Tab.svelte';
 import { cleanValueProperties, orderedJsonStringify, orderedYamlStringify, replaceFalseWithUndefined } from '../utils';
 let diffType = $state(undefined);
-let flowdiffMode = $state('yaml');
 let contentType = $derived.by(() => {
     if (!data || !diffType)
         return undefined;
@@ -173,34 +172,14 @@ export function setDiff(diff) {
 									{/await}
 								{:else if contentType === 'metadata'}
 									{#if isFlow}
-										<Tabs bind:selected={flowdiffMode}>
-											<Tab value="yaml" label={`YAML`} />
-											<Tab value="graph" label={`Graph`} />
-										</Tabs>
-										{#if flowdiffMode === 'yaml'}
-											{#await import('./DiffEditor.svelte')}
-												<Loader2 class="animate-spin" />
-											{:then Module}
-												<Module.default
-													open={true}
-													automaticLayout
-													className="h-full"
-													defaultLang="yaml"
-													defaultOriginal={metadata}
-													defaultModified={data.current.metadata}
-													readOnly
-												/>
-											{/await}
-										{:else if flowdiffMode === 'graph'}
-											{#await import('./FlowGraphDiffViewer.svelte')}
-												<Loader2 class="animate-spin" />
-											{:then Module}
-												<Module.default
-													beforeYaml={metadata ?? ''}
-													afterYaml={data.current.metadata}
-												/>
-											{/await}
-										{/if}
+										{#await import('./FlowDiffViewer.svelte')}
+											<Loader2 class="animate-spin" />
+										{:then Module}
+											<Module.default
+												beforeYaml={metadata ?? ''}
+												afterYaml={data.current.metadata}
+											/>
+										{/await}
 									{:else}
 										{#await import('./DiffEditor.svelte')}
 											<Loader2 class="animate-spin" />

package/package/components/DiffEditor.svelte

@@ -3,13 +3,13 @@ import { onMount } from 'svelte';
 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 { editor as meditor, KeyMod, KeyCode } from 'monaco-editor';
 import { initializeVscode } from './vscode';
 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: {
@@ -32,7 +32,37 @@ async function loadDiffEditor() {
         lineNumbersMinChars: 2,
         scrollbar: { alwaysConsumeMouseWheel: false }
     });
-    console.log('defaultModified', defaultModified);
+    // In VSCode webview (iframe), clipboard operations need special handling
+    // because the webview has restricted clipboard API access
+    if (window.parent !== window) {
+        const modifiedEditor = diffEditor.getModifiedEditor();
+        modifiedEditor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyC, function () {
+            document.execCommand('copy');
+        });
+        modifiedEditor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyX, function () {
+            document.execCommand('cut');
+        });
+        modifiedEditor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyV, async function () {
+            try {
+                const text = await navigator.clipboard.readText();
+                if (text) {
+                    const selection = modifiedEditor.getSelection();
+                    if (selection) {
+                        modifiedEditor.executeEdits('paste', [
+                            {
+                                range: selection,
+                                text: text,
+                                forceMoveMarkers: true
+                            }
+                        ]);
+                    }
+                }
+            }
+            catch (e) {
+                document.execCommand('paste');
+            }
+        });
+    }
     if (defaultLang !== undefined) {
         setupModel(defaultLang, defaultOriginal, defaultModified, defaultModifiedLang);
     }
@@ -79,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

@@ -1,7 +1,7 @@
 <script lang="ts">import DisplayResult from './DisplayResult.svelte';
 import { Highlight } from 'svelte-highlight';
 import { json } from 'svelte-highlight/languages';
-import { copyToClipboard, roughSizeOfObject } from '../utils';
+import { copyToClipboard, parseS3Object, roughSizeOfObject } from '../utils';
 import { base } from '../base';
 import { Button, Drawer, DrawerContent } from './common';
 import { ClipboardCopy, Download, PanelRightOpen, Table2, Braces, Highlighter, ArrowDownFromLine, Loader2 } from 'lucide-svelte';
@@ -33,6 +33,7 @@ const IMG_KINDS = ['png', 'svg', 'jpeg', 'gif'];
 const NO_SIZE_LIMIT_KINDS = [...IMG_KINDS, 'pdf', 'file', 'filename', 'html'];
 const dispatch = createEventDispatcher();
 let resultKind = $state();
+let length = $state(1);
 let hasBigInt = $state(false);
 let { result, requireHtmlApproval = false, filename = undefined, disableExpand = false, jobId = undefined, workspaceId = undefined, hideAsJson = false, noControls = false, drawerOpen = $bindable(false), nodeId = undefined, language = undefined, appPath = undefined, customUi = undefined, isTest = true, externalToolbarAvailable = false, forceJson = $bindable(false), result_stream = undefined, fixTableSizingToParent = false, copilot_fix, children, loading = false, growVertical = false } = $props();
 let enableHtml = $state(false);
@@ -77,6 +78,10 @@ function checkIfS3(result, keys) {
 let is_render_all = $state(false);
 let download_as_csv = $state(false);
 function inferResultKind(result) {
+    if (typeof result === 'string' && result.match(/s3:\/\/[^/]*\/.+/)) {
+        largeObject = true;
+        return 's3object';
+    }
     try {
         if (result === 'WINDMILL_TOO_BIG') {
             largeObject = true;
@@ -357,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>
@@ -651,8 +656,10 @@ $effect(() => {
 						>
 					</div>
 				{:else if !forceJson && resultKind === 's3object'}
+					{@const s3object = parseS3Object(result) as typeof result}
 					<div
-						class="h-full w-full {typeof result?.s3 === 'string' && result?.s3?.endsWith('.parquet')
+						class="h-full w-full {typeof s3object?.s3 === 'string' &&
+						s3object?.s3?.endsWith('.parquet')
 							? 'h-min-[600px]'
 							: ''}"
 					>
@@ -668,13 +675,13 @@ $effect(() => {
 								<Highlight
 									class=""
 									language={json}
-									code={toJsonStr(result).replace(/\\n/g, '\n')}
+									code={toJsonStr(s3object).replace(/\\n/g, '\n')}
 								/>
 								{#if $userStore}
 									<button
 										class="text-secondary underline text-2xs whitespace-nowrap"
 										onclick={() => {
-											s3FileViewer?.open?.(result)
+											s3FileViewer?.open?.(s3object)
 										}}
 										><span class="flex items-center gap-1"
 											><PanelRightOpen size={12} />object store explorer<Tooltip
@@ -685,13 +692,13 @@ $effect(() => {
 										>
 									</button>
 								{/if}
-							{:else if !result?.disable_download}
-								<FileDownload {workspaceId} s3object={result} {appPath} />
+							{:else if !s3object?.disable_download}
+								<FileDownload {workspaceId} {s3object} {appPath} />
 								{#if $userStore}
 									<button
 										class="text-secondary underline text-2xs whitespace-nowrap"
 										onclick={() => {
-											s3FileViewer?.open?.(result)
+											s3FileViewer?.open?.(s3object)
 										}}
 										><span class="flex items-center gap-1"
 											><PanelRightOpen size={12} />object store explorer<Tooltip
@@ -704,17 +711,17 @@ $effect(() => {
 								{/if}
 							{/if}
 						</div>
-						{#if typeof result?.s3 === 'string'}
-							{#if !appPath && (result?.s3?.endsWith('.parquet') || result?.s3?.endsWith('.csv'))}
-								{#key result.s3}
+						{#if typeof s3object?.s3 === 'string'}
+							{#if !appPath && (s3object?.s3?.endsWith('.parquet') || s3object?.s3?.endsWith('.csv'))}
+								{#key s3object.s3}
 									<ParqetTableRenderer
-										disable_download={result?.disable_download}
+										disable_download={s3object?.disable_download}
 										{workspaceId}
-										s3resource={result?.s3}
-										storage={result?.storage}
+										s3resource={s3object?.s3}
+										storage={s3object?.storage}
 									/>
 								{/key}
-							{:else if result?.s3?.endsWith('.png') || result?.s3?.endsWith('.jpeg') || result?.s3?.endsWith('.jpg') || result?.s3?.endsWith('.webp')}
+							{:else if s3object?.s3?.endsWith('.png') || s3object?.s3?.endsWith('.jpeg') || s3object?.s3?.endsWith('.jpg') || s3object?.s3?.endsWith('.webp')}
 								<div class="h-full mt-2">
 									<img
 										alt="preview rendered"
@@ -723,14 +730,14 @@ $effect(() => {
 											appPath
 												? 'apps_u/download_s3_file/' + appPath
 												: 'job_helpers/load_image_preview'
-										}?${appPath ? 's3' : 'file_key'}=${encodeURIComponent(result.s3)}` +
-											(result.storage ? `&storage=${result.storage}` : '')}{appPath &&
-										result.presigned
-											? `&${result.presigned}`
+										}?${appPath ? 's3' : 'file_key'}=${encodeURIComponent(s3object.s3)}` +
+											(s3object.storage ? `&storage=${s3object.storage}` : '')}{appPath &&
+										s3object.presigned
+											? `&${s3object.presigned}`
 											: ''}"
 									/>
 								</div>
-							{:else if result?.s3?.endsWith('.pdf')}
+							{:else if s3object?.s3?.endsWith('.pdf')}
 								<div class="h-96 mt-2 border">
 									{#await import('./display/PdfViewer.svelte')}
 										<Loader2 class="animate-spin" />
@@ -741,10 +748,10 @@ $effect(() => {
 												appPath
 													? 'apps_u/download_s3_file/' + appPath
 													: 'job_helpers/load_image_preview'
-											}?${appPath ? 's3' : 'file_key'}=${encodeURIComponent(result.s3)}` +
-												(result.storage ? `&storage=${result.storage}` : '')}{appPath &&
-											result.presigned
-												? `&${result.presigned}`
+											}?${appPath ? 's3' : 'file_key'}=${encodeURIComponent(s3object.s3)}` +
+												(s3object.storage ? `&storage=${s3object.storage}` : '')}{appPath &&
+											s3object.presigned
+												? `&${s3object.presigned}`
 												: ''}"
 										/>
 									{/await}
@@ -761,7 +768,8 @@ $effect(() => {
 								size="xs"
 								options={{ right: 'Raw S3 object' }}
 							/>
-							{#each result as s3object}
+							{#each result as _s3object}
+								{@const s3object = parseS3Object(_s3object) as typeof _s3object}
 								{#if s3FileDisplayRawMode}
 									<Highlight
 										class=""

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,68 @@
+<script lang="ts">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 } } = 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;