windmill-components 1.642.0 → 1.655.0

package/package/components/DeployWorkspaceDrawer.svelte

@@ -1,7 +1,6 @@
 <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 = $state(undefined);
 let kind = $state(undefined);
@@ -20,17 +19,9 @@ 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
+				hideButton={false}
 				{initialPath}
 				{kind}
 				{additionalInformation}

package/package/components/Description.svelte

@@ -1,10 +1,10 @@
 <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" class="whitespace-nowrap"
 			>Learn more <ExternalLink size={12} class="inline-block" /></a

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 });

package/package/components/DiffEditor.svelte

@@ -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) {

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/DropdownSubmenuItem.svelte

@@ -1,10 +1,11 @@
-<script lang="ts">import MenuItem from './meltComponents/MenuItem.svelte';
+<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 } } = builders.createSubmenu();
+const { elements: { subTrigger, subMenu }, states: { subOpen } } = untrack(() => builders).createSubmenu();
 let subItems = $derived((item.submenuItems ?? []).filter((i) => !i.hide));
 </script>
 

package/package/components/DropdownV2.svelte

@@ -20,7 +20,7 @@ let { aiId = undefined, aiDescription = undefined, items = [], disabled = false,
 let buttonEl = $state(undefined);
 const { elements: { menu: menuEl, item, trigger }, builders, states, ids: { menu: dropdownId } } = createDropdownMenu({
     positioning: {
-        placement
+        placement: untrack(() => placement)
     },
     loop: true,
     onOpenChange: ({ next }) => {

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

@@ -50,6 +50,9 @@ computeItems();
 						{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()}

package/package/components/DucklakePicker.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">import { WorkspaceService } from '../gen';
-import { globalDbManagerDrawer, workspaceStore } from '../stores';
+import { workspaceStore } from '../stores';
 import Select from './select/Select.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 = $derived(globalDbManagerDrawer.val);
 </script>
 
 <div class={className}>
@@ -23,7 +22,6 @@ let dbManagerDrawer = $derived(globalDbManagerDrawer.val);
 		<ExploreAssetButton
 			class="mt-1 w-fit"
 			asset={{ kind: 'ducklake', path: value }}
-			{dbManagerDrawer}
 		/>
 	{/if}
 </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>

package/package/components/DurationMs.svelte.d.ts

@@ -1,22 +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;
-}
-declare const DurationMs: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     duration_ms: number;
     self_wait_time_ms?: number | undefined;
     aggregate_wait_time_ms?: number | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DurationMs = InstanceType<typeof DurationMs>;
+}
+declare const DurationMs: import("svelte").Component<Props, {}, "">;
+type DurationMs = ReturnType<typeof DurationMs>;
 export default DurationMs;

package/package/components/DynamicInput.svelte

@@ -90,9 +90,9 @@ $effect(() => {
         }
     }
 });
-let lastArgs = $state.snapshot(otherArgs);
+let lastArgs = $state.snapshot(untrack(() => otherArgs));
 let timeout = $state();
-let nargs = $state($state.snapshot(otherArgs));
+let nargs = $state($state.snapshot(untrack(() => otherArgs)));
 $effect(() => {
     otherArgs;
     untrack(() => clearTimeout(timeout));

package/package/components/EditableSchemaForm.svelte

@@ -174,7 +174,7 @@ function renameProperty(oldName, key) {
         sendUserToast('Argument renamed');
     }
 }
-let jsonView = $state(customUi?.jsonOnly == true);
+let jsonView = $state(untrack(() => customUi)?.jsonOnly == true);
 let schemaString = $state(JSON.stringify(schema, null, '\t'));
 let error = $state(undefined);
 let editor = $state(undefined);
@@ -183,8 +183,8 @@ export function updateJson() {
     schemaString = JSON.stringify(schema, null, '\t');
     editor?.setCode(schemaString);
 }
-const editTabDefaultSize = noPreview ? 100 : 50;
-editPanelSize = editTab ? (editPanelInitialSize ?? editTabDefaultSize) : 0;
+const editTabDefaultSize = untrack(() => noPreview) ? 100 : 50;
+editPanelSize = untrack(() => editTab) ? (untrack(() => editPanelInitialSize) ?? editTabDefaultSize) : 0;
 let inputPanelSize = $state(100 - editPanelSize);
 let editPanelSizeSmooth = tweened(editPanelSize, {
     duration: 150
@@ -462,7 +462,7 @@ let dndType = $state(generateRandomString());
 												{argName}
 												{#if !uiOnly}
 													<div onclick={stopPropagation(preventDefault(bubble('click')))}>
-														<Popover placement="bottom-end" containerClasses="p-4" closeButton>
+														<Popover placement="bottom-end" closeButton>
 															{#snippet trigger()}
 																<Button
 																	variant="subtle"

package/package/components/Editor.svelte

@@ -69,9 +69,9 @@ $effect.pre(() => {
         };
     }
 });
-let lang = $state(scriptLangToEditorLang(scriptLang));
-let filePath = $state(computePath(path));
-let initialPath = $state(path);
+let lang = $state(scriptLangToEditorLang(untrack(() => scriptLang)));
+let filePath = $state(computePath(untrack(() => path)));
+let initialPath = $state(untrack(() => path));
 let websockets = [];
 let languageClients = [];
 let websocketInterval;
@@ -82,7 +82,7 @@ const dispatch = createEventDispatcher();
 // let graphqlService: MonacoGraphQLAPI | undefined = undefined
 let dbSchema = $state(undefined);
 let destroyed = false;
-const uri = computeUri(untrack(() => filePath), scriptLang);
+const uri = computeUri(untrack(() => filePath), untrack(() => scriptLang));
 console.log('uri', uri);
 function computeUri(filePath, scriptLang) {
     let file;
@@ -1571,12 +1571,11 @@ $effect(() => {
         lineNumbers: $relativeLineNumbers ? 'relative' : 'on'
     });
 });
-let isTsWorkerInitialized = resource([() => lang, () => initialized, () => filePath], async () => {
+let isTsWorkerInitialized = resource([() => lang, () => initialized], async () => {
     if (lang !== 'typescript' || !initialized)
         return false;
-    console.log('[Editor.isTsWorkerInitialized] Waiting for TS Worker...');
-    await waitForWorkerInitialization(filePath);
-    console.log('[Editor.isTsWorkerInitialized] TS Worker initialized successfully');
+    // Use the stable model URI (computed once at mount), not filePath which changes on rename
+    await waitForWorkerInitialization(uri);
     return true;
 });
 // Update SQL query type information in the TypeScript worker
@@ -1586,18 +1585,17 @@ let handleSqlTypingInTs = useDebounce(function handleSqlTypingInTs() {
         return;
     if (!preparedAssetsSqlQueries || preparedAssetsSqlQueries.length === 0) {
         // Clear SQL queries if none exist
-        updateSqlQueriesInWorker(filePath, []);
+        updateSqlQueriesInWorker(uri, []);
         return;
     }
     // Send SQL query information to the custom TypeScript worker
     // The worker will inject type parameters into the code that TypeScript analyzes
     // Worker async function call freezes if we pass a Proxy, $state.snapshot() is very important here
-    updateSqlQueriesInWorker(filePath, $state.snapshot(preparedAssetsSqlQueries));
+    updateSqlQueriesInWorker(uri, $state.snapshot(preparedAssetsSqlQueries));
 }, 250);
 watch([
     () => preparedAssetsSqlQueries,
     () => lang,
-    () => filePath,
     () => isTsWorkerInitialized.current
 ], () => {
     handleSqlTypingInTs();

package/package/components/EditorBar.svelte

@@ -992,7 +992,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 
 	<div class="flex flex-row items-center gap-2 whitespace-nowrap">
 		{@render right?.()}
-		{#if scriptPath && !noHistory}
+		{#if scriptPath && !noHistory && customUi?.history != false}
 			<Button
 				unifiedSize="sm"
 				variant="subtle"
@@ -1016,7 +1016,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 				Library
 			</Button>
 		{/if}
-		{#if saveToWorkspace}
+		{#if saveToWorkspace && customUi?.saveToWorkspace != false}
 			<Button
 				unifiedSize="sm"
 				variant="subtle"

package/package/components/EditorBar.svelte.d.ts

@@ -15,7 +15,7 @@ interface Props {
     iconOnly?: boolean;
     validCode?: boolean;
     kind?: 'script' | 'trigger' | 'approval';
-    template?: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' | 'bunnative';
+    template?: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' | 'bunnative' | 'claudesandbox';
     collabMode?: boolean;
     collabLive?: boolean;
     collabUsers?: {

package/package/components/ExecutionDuration.svelte

@@ -1,27 +1,11 @@
-<script lang="ts">import {} from '../gen';
+<script lang="ts">import { run } from 'svelte/legacy';
+import {} from '../gen';
 import { isScriptPreview } from '../utils';
 import { onDestroy } from 'svelte';
-export let job = undefined;
-/** Execution duration of current active job (in ms) */
-export let executionDuration = 0;
-/** Is current job running more than specified value in `longDefinition` seconds */
-export let longRunning = false;
-/** What do we count as "long" (in ms)*/
-export let longDefinition = 30_000;
-/** How often component updates execution duration (in ms)
- *   Higher value -> more efficient component is, less accuracy it has
- *   Lower value -> less efficient component is, more accuracy it has
- */
-export let updateResolution = 5_000;
+let { job = undefined, executionDuration = $bindable(0), longRunning = $bindable(false), longDefinition = 30_000, updateResolution = 5_000 } = $props();
 let startedAt = undefined;
-let busy = false;
+let busy = $state(false);
 let interval;
-// Detect when execution of job started
-$: if (!busy &&
-    job &&
-    'running' in job &&
-    (job.job_kind == 'script' || isScriptPreview(job?.job_kind)))
-    start(job);
 function start(job) {
     busy = true;
     startedAt = new Date(job?.started_at ?? '').getTime();
@@ -42,4 +26,12 @@ onDestroy(() => {
     // Clear the interval when the component is destroyed
     clearInterval(interval);
 });
+// Detect when execution of job started
+run(() => {
+    if (!busy &&
+        job &&
+        'running' in job &&
+        (job.job_kind == 'script' || isScriptPreview(job?.job_kind)))
+        start(job);
+});
 </script>

package/package/components/ExecutionDuration.svelte.d.ts

@@ -1,28 +1,18 @@
 import { type Job } from '../gen';
-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 ExecutionDuration: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     job?: Job | undefined;
-    /** Execution duration of current active job (in ms) */ executionDuration?: number;
-    /** Is current job running more than specified value in `longDefinition` seconds */ longRunning?: boolean;
-    /** What do we count as "long" (in ms)*/ longDefinition?: number;
+    /** Execution duration of current active job (in ms) */
+    executionDuration?: number;
+    /** Is current job running more than specified value in `longDefinition` seconds */
+    longRunning?: boolean;
+    /** What do we count as "long" (in ms)*/
+    longDefinition?: number;
     /** How often component updates execution duration (in ms)
-         *   Higher value -> more efficient component is, less accuracy it has
-         *   Lower value -> less efficient component is, more accuracy it has
-         */ updateResolution?: number;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ExecutionDuration = InstanceType<typeof ExecutionDuration>;
+ *   Higher value -> more efficient component is, less accuracy it has
+ *   Lower value -> less efficient component is, more accuracy it has
+ */
+    updateResolution?: number;
+}
+declare const ExecutionDuration: import("svelte").Component<Props, {}, "executionDuration" | "longRunning">;
+type ExecutionDuration = ReturnType<typeof ExecutionDuration>;
 export default ExecutionDuration;

package/package/components/ExploreAssetButton.svelte

@@ -2,6 +2,7 @@
     return (asset.kind === 'ducklake' ||
         asset.kind === 'datatable' ||
         asset.kind === 's3object' ||
+        asset.kind === 'volume' ||
         (asset.kind === 'resource' && isDbType(_resourceMetadata?.resource_type)));
 }
 </script>
@@ -9,13 +10,14 @@
 <script lang="ts">import { isDbType } from './dbTypes';
 import { formatAsset } from './assets/lib';
 import { Button, ButtonType } from './common';
-import DbManagerDrawer from './DBManagerDrawer.svelte';
 import S3FilePicker from './S3FilePicker.svelte';
-import { userStore } from '../stores';
+import { VolumeService } from '../gen';
+import { globalDbManagerDrawer, userStore, workspaceStore } from '../stores';
 import { isS3Uri } from '../utils';
-import { Database, File } from 'lucide-svelte';
+import { Database, File, HardDriveIcon } from 'lucide-svelte';
 import DucklakeIcon from './icons/DucklakeIcon.svelte';
-const { asset, _resourceMetadata, s3FilePicker, dbManagerDrawer, onClick, class: className = '', noText = false, buttonVariant = 'default', btnClasses = '', disabled = false } = $props();
+const { asset, _resourceMetadata, s3FilePicker, onClick, class: className = '', noText = false, buttonVariant = 'default', btnClasses = '', disabled = false } = $props();
+let dbManagerDrawer = $derived(globalDbManagerDrawer.val);
 const assetUri = $derived(formatAsset(asset));
 </script>
 
@@ -37,6 +39,9 @@ const assetUri = $derived(formatAsset(asset));
 			})
 		} else if (asset.kind === 's3object' && isS3Uri(assetUri)) {
 			s3FilePicker?.open(assetUri)
+		} else if (asset.kind === 'volume') {
+			const storage = (await VolumeService.getVolumeStorage({ workspace: $workspaceStore! })) ?? undefined
+			s3FilePicker?.open({ s3: `volumes/${$workspaceStore}/${asset.path}/`, storage })
 		} else if (asset.kind === 'ducklake') {
 			let ducklake = asset.path.split('/')[0]
 			let specificTable = asset.path.split('/')[1] as string | undefined
@@ -64,9 +69,11 @@ const assetUri = $derived(formatAsset(asset));
 			? { icon: Database }
 			: asset.kind === 'ducklake'
 				? { icon: DucklakeIcon }
-				: undefined}
+				: asset.kind === 'volume'
+					? { icon: HardDriveIcon }
+					: undefined}
 >
-	{#if asset.kind === 's3object'}
+	{#if asset.kind === 's3object' || asset.kind === 'volume'}
 		<span class:hidden={noText}>Explore</span>
 	{:else if asset.kind === 'resource' || asset.kind === 'ducklake' || asset.kind === 'datatable'}
 		<span class:hidden={noText}>Manage</span>

package/package/components/ExploreAssetButton.svelte.d.ts

@@ -3,7 +3,6 @@ export declare function assetCanBeExplored(asset: Asset, _resourceMetadata?: {
 }): boolean;
 import { type Asset } from './assets/lib';
 import { ButtonType } from './common';
-import DbManagerDrawer from './DBManagerDrawer.svelte';
 import S3FilePicker from './S3FilePicker.svelte';
 type $$ComponentProps = {
     asset: Asset;
@@ -11,7 +10,6 @@ type $$ComponentProps = {
         resource_type?: string;
     };
     s3FilePicker?: S3FilePicker;
-    dbManagerDrawer?: DbManagerDrawer;
     onClick?: () => void;
     class?: string;
     noText?: boolean;

package/package/components/FakeMonacoPlaceHolder.svelte

@@ -1,6 +1,7 @@
 <!-- Used to avoid height jitter when loading monaco asynchronously -->
 
-<script lang="ts">import { getOS } from '../utils';
+<script lang="ts">import { untrack } from 'svelte';
+import { getOS } from '../utils';
 import { MONACO_Y_PADDING } from './vscode';
 let { code, autoheight = false, lineNumbersWidth = 0, lineNumbersOffset = 0, class: className = '', showNumbers = true, fontSize = 13.5 } = $props();
 let yPadding = MONACO_Y_PADDING;
@@ -18,7 +19,7 @@ const CHAR_LIMIT = 5000;
 const GOLDEN_LINE_HEIGHT_RATIO = getOS() == 'macOS' ? 1.5 : 1.35;
 let lines = $derived(code?.substring(0, CHAR_LIMIT)?.split('\n') ?? []);
 const charWidth = 9; // try to match as closely as possible to monaco editor
-const lineHeight = fontSize * GOLDEN_LINE_HEIGHT_RATIO;
+const lineHeight = untrack(() => fontSize) * GOLDEN_LINE_HEIGHT_RATIO;
 let [clientWidth, clientHeight] = $state([0, 0]);
 let showHorizontalScrollbar = $derived(lines.some((line) => line.length * charWidth > clientWidth - 40));
 let [editorWidth, editorHeight] = $derived([

package/package/components/FieldHeader.svelte

@@ -3,19 +3,7 @@ import Required from './Required.svelte';
 import { capitalize, emptyString } from '../utils';
 import Tooltip from './meltComponents/Tooltip.svelte';
 import { InfoIcon } from 'lucide-svelte';
-export let label;
-export let format = '';
-export let contentEncoding = '';
-export let type = undefined;
-export let disabled = false;
-export let required = false;
-export let displayType = true;
-export let labelClass = '';
-export let prettify = false;
-export let simpleTooltip = undefined;
-export let lightHeader = false;
-export let SimpleTooltipIcon = InfoIcon;
-export let simpleTooltipIconClass = '';
+let { label, format = '', contentEncoding = '', type = undefined, disabled = false, required = false, displayType = true, labelClass = '', prettify = false, simpleTooltip = undefined, lightHeader = false, SimpleTooltipIcon = InfoIcon, simpleTooltipIconClass = '' } = $props();
 </script>
 
 <div class="inline-flex flex-row items-baseline truncated">
@@ -52,9 +40,11 @@ export let simpleTooltipIconClass = '';
 	{#if !emptyString(simpleTooltip)}
 		<Tooltip class="ml-2" placement="bottom">
 			<SimpleTooltipIcon size="14" class={'-mb-0.5 ' + simpleTooltipIconClass} />
-			<span class="text-xs" slot="text">
-				{simpleTooltip}
-			</span>
+			{#snippet text()}
+						<span class="text-xs" >
+					{simpleTooltip}
+				</span>
+					{/snippet}
 		</Tooltip>
 	{/if}
 </div>