windmill-components 1.642.0 → 1.655.1

package/package/components/apps/editor/componentsPanel/NameEditor.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import Button from '../../../common/button/Button.svelte';
 import Popover from '../../../meltComponents/Popover.svelte';
 import { Pen } from 'lucide-svelte';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 let { kind, row } = $props();
-let editedName = $state(row.name);
+let editedName = $state(untrack(() => row).name);
 const dispatch = createEventDispatcher();
 function onkeydown(e) {
     if (e.key === 'Enter') {

package/package/components/apps/editor/componentsPanel/QuickStyleMenu.svelte

@@ -6,7 +6,7 @@ import QuickStyleProperty from './QuickStyleProperty.svelte';
 import ListItem from './ListItem.svelte';
 let { value = $bindable(''), properties, componentType = undefined, componentProperty = undefined } = $props();
 const { app } = getContext('AppViewerContext');
-const styleStore = createStyleStore(properties);
+const styleStore = createStyleStore(untrack(() => properties));
 setContext(STYLE_STORE_KEY, styleStore);
 let multiValues = $state(initiateMultiValues());
 let mounted = $state(false);
@@ -181,12 +181,11 @@ $effect(() => {
 				toggleClasses=" !rounded-b-none !py-0
 				{isOpen[prefix] ? '!bg-surface-secondary hover:!bg-surface-hover' : ''}"
 			>
-				<!-- @migration-task: migrate this slot by hand, `title` would shadow a prop on the parent component -->
-				<svelte:fragment slot="titleSlot">
+				{#snippet titleSlot()}
 					<span class="font-normal text-xs">
 						{group}
 					</span>
-				</svelte:fragment>
+				{/snippet}
 				<div class="flex justify-start items-center flex-wrap gap-x-4 gap-y-1 pt-3">
 					{#each property[group] as p}
 						{@const {

package/package/components/apps/editor/componentsPanel/QuickStyleProperty.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">import { getContext } from 'svelte';
+<script lang="ts">import { getContext, untrack } from 'svelte';
 import { Button, ClearableInput, Menu } from '../../../common';
 import Popover from '../../../Popover.svelte';
 import ColorInput from '../settingsPanel/inputEditor/ColorInput.svelte';
 import { StylePropertyType, StylePropertyUnits, STYLE_STORE_KEY } from './quickStyleProperties';
 let { prop, value = $bindable(), inline = false, onChange } = $props();
 const styleStore = getContext(STYLE_STORE_KEY);
-const key = prop.key;
-const type = prop.value?.['type'];
+const key = untrack(() => prop).key;
+const type = untrack(() => prop).value?.['type'];
 let unit = $state(StylePropertyUnits[0]);
 let internalValue = $derived(getInteralValue(value, prop.value));
 function getInteralValue(value, propValue) {

package/package/components/apps/editor/componentsPanel/ThemeList.svelte

@@ -14,9 +14,9 @@ import { onDestroy } from 'svelte';
 import Skeleton from '../../../common/skeleton/Skeleton.svelte';
 const { previewTheme, app } = getContext('AppViewerContext');
 let cssString = $app?.theme?.type === 'inlined' ? $app.theme.css : undefined;
-$: type = $app?.theme?.type;
-let themes = [];
-let loading = false;
+let type = $derived($app?.theme?.type);
+let themes = $state([]);
+let loading = $state(false);
 async function getThemes() {
     loading = true;
     themes = await listThemes($workspaceStore);
@@ -43,8 +43,8 @@ async function addTheme(nameField) {
         path: theme.path
     };
 }
-let nameField = '';
-let previewThemePath = undefined;
+let nameField = $state('');
+let previewThemePath = $state(undefined);
 onMount(() => {
     getThemes();
 });

package/package/components/apps/editor/componentsPanel/ThemeList.svelte.d.ts

@@ -15,6 +15,6 @@ declare const ThemeList: $$__sveltets_2_IsomorphicComponent<Record<string, never
     setCodeTab: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type ThemeList = InstanceType<typeof ThemeList>;
 export default ThemeList;

package/package/components/apps/editor/componentsPanel/ThemeNameEditor.svelte

@@ -3,10 +3,10 @@ import { workspaceStore } from '../../../../stores';
 import Button from '../../../common/button/Button.svelte';
 import Popover from '../../../meltComponents/Popover.svelte';
 import { Pen } from 'lucide-svelte';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import { sendUserToast } from '../../../../toast';
 let { row } = $props();
-let editedName = $state(row.name);
+let editedName = $state(untrack(() => row).name);
 const dispatch = createEventDispatcher();
 </script>
 

package/package/components/apps/editor/contextPanel/ComponentOutput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { components } from '../component';
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import ComponentOutputViewer from './ComponentOutputViewer.svelte';
 import { connectOutput } from '../appUtils';
 import SubGridOutput from './SubGridOutput.svelte';
@@ -10,7 +10,7 @@ import MenuItemsOutput from './components/MenuItemsOutput.svelte';
 import { BG_PREFIX } from '../appUtilsCore';
 let { gridItem, first = false, nested = false, expanded = false, renderRec = true } = $props();
 const { connectingInput } = getContext('AppViewerContext');
-const name = getComponentNameById(gridItem.id);
+const name = getComponentNameById(untrack(() => gridItem).id);
 let nameOverrides = $derived(gridItem?.data?.type === 'decisiontreecomponent'
     ? gridItem.data.nodes.map((n, i) => `${n.label} (Tab index ${i})`)
     : undefined);

package/package/components/apps/editor/contextPanel/DebugPanel.svelte

@@ -8,11 +8,11 @@ import { Trash } from 'lucide-svelte';
 import Alert from '../../../common/alert/Alert.svelte';
 import { allItems, findGridItem } from '../appUtilsCore';
 const { app, initialized } = getContext('AppViewerContext');
-$: unintitializedComponents = allItems($app.grid, $app.subgrids)
+let unintitializedComponents = $derived(allItems($app.grid, $app.subgrids)
     .map((x) => x.id)
     .filter((x) => !$initialized.initializedComponents?.includes(x))
-    .sort();
-$: subgridsErrors = Object.keys($app.subgrids ?? {})
+    .sort());
+let subgridsErrors = $derived(Object.keys($app.subgrids ?? {})
     .map((x) => {
     const parentId = x.split('-')[0];
     const parent = findGridItem($app, parentId);
@@ -36,7 +36,7 @@ $: subgridsErrors = Object.keys($app.subgrids ?? {})
         };
     }
 })
-    .filter(Boolean);
+    .filter(Boolean));
 </script>
 
 <div class="flex flex-col gap-8" style="all:none;">

package/package/components/apps/editor/contextPanel/DebugPanel.svelte.d.ts

@@ -1,18 +1,3 @@
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const DebugPanel: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DebugPanel = InstanceType<typeof DebugPanel>;
+declare const DebugPanel: import("svelte").Component<Record<string, never>, {}, "">;
+type DebugPanel = ReturnType<typeof DebugPanel>;
 export default DebugPanel;

package/package/components/apps/editor/contextPanel/components/Output.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">import { getContext } from 'svelte';
 import { connectInput } from '../../appUtils';
 import ComponentOutputViewer from '../ComponentOutputViewer.svelte';
+import SubGridOutput from '../SubGridOutput.svelte';
 import OutputHeader from './OutputHeader.svelte';
 const { connectingInput } = getContext('AppViewerContext');
-let { id, first = false, label, renderRec } = $props();
+let { id, first = false, label, renderRec, numberOfSubgrids = 0 } = $props();
+let subGrids = $derived(Array.from({ length: numberOfSubgrids }).map((_, i) => `${id}-${i}`));
 </script>
 
 <OutputHeader render={renderRec} renamable={false} {id} name={label} {first}>
@@ -15,5 +17,8 @@ let { id, first = false, label, renderRec } = $props();
 				$connectingInput = connectInput($connectingInput, id, detail)
 			}}
 		/>
+		{#if subGrids.length > 0}
+			<SubGridOutput {render} parentId={id} {subGrids} />
+		{/if}
 	{/snippet}
 </OutputHeader>

package/package/components/apps/editor/contextPanel/components/Output.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     first?: boolean;
     label: string;
     renderRec: boolean;
+    numberOfSubgrids?: number;
 }
 declare const Output: import("svelte").Component<Props, {}, "">;
 type Output = ReturnType<typeof Output>;

package/package/components/apps/editor/contextPanel/components/TableActionsOutput.svelte

@@ -6,14 +6,26 @@ let { gridItem, render } = $props();
 	{#if gridItem.data.type === 'tablecomponent' && gridItem.data.actionButtons.length > 0}
 		<div class="ml-2 border-l">
 			{#each gridItem.data.actionButtons as action, index}
-				<Output renderRec={render} id={action.id} first={index === 0} label="Table action" />
+				<Output
+					renderRec={render}
+					id={action.id}
+					first={index === 0}
+					label="Table action"
+					numberOfSubgrids={action.numberOfSubgrids ?? 0}
+				/>
 			{/each}
 		</div>
 	{/if}
 	{#if (gridItem.data.type === 'aggridcomponent' || gridItem.data.type === 'aggridcomponentee' || gridItem.data.type === 'dbexplorercomponent' || gridItem.data.type === 'aggridinfinitecomponent' || gridItem.data.type === 'aggridinfinitecomponentee') && gridItem.data.actions?.length > 0}
 		<div class="ml-2 border-l">
 			{#each gridItem.data.actions as action, index}
-				<Output renderRec={render} id={action.id} first={index === 0} label="Table action" />
+				<Output
+					renderRec={render}
+					id={action.id}
+					first={index === 0}
+					label="Table action"
+					numberOfSubgrids={action.numberOfSubgrids ?? 0}
+				/>
 			{/each}
 		</div>
 	{/if}

package/package/components/apps/editor/settingsPanel/ComponentControl.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { ExternalLink } from 'lucide-svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import { ExternalLink } from 'lucide-svelte';
 import PanelSection from './common/PanelSection.svelte';
 import { getComponentControl } from '../componentsPanel/componentControlUtils';
 import { Highlight } from 'svelte-highlight';
@@ -6,7 +7,7 @@ import typescript from 'svelte-highlight/languages/typescript';
 import { Button } from '../../../common';
 import HighlightTheme from '../../../HighlightTheme.svelte';
 let { type } = $props();
-const componentControls = getComponentControl(type);
+const componentControls = getComponentControl(untrack(() => type));
 let collapsed = $state(true);
 </script>
 

package/package/components/apps/editor/settingsPanel/ContextVariables.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import Popover from '../../../Popover.svelte';
 import Tooltip from '../../../Tooltip.svelte';
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import { dfs } from '../appUtils';
 import { findGridItem } from '../appUtilsCore';
 let { type, id } = $props();
@@ -18,16 +18,16 @@ function addContextVariable(label, description) {
         contextVariables.push({ label, description });
     }
 }
-if (tables.includes(type)) {
+if (tables.includes(untrack(() => type))) {
     addContextVariable('row', 'The current row of a table. Row is an object with keys index and value.');
 }
-else if (type === 's3fileinputcomponent' || type === 'fileinputcomponent') {
+else if (untrack(() => type) === 's3fileinputcomponent' || untrack(() => type) === 'fileinputcomponent') {
     addContextVariable('file', 'The current file being processed.');
 }
-else if (type === 'containercomponent') {
+else if (untrack(() => type) === 'containercomponent') {
     addContextVariable('group', 'The group name of the container.');
 }
-else if (type === 'listcomponent') {
+else if (untrack(() => type) === 'listcomponent') {
     addContextVariable('iter', 'The current iteration of the list. Iter is an object with keys index and value.');
 }
 function addGridItemContext(parentId) {
@@ -54,7 +54,7 @@ function findParentsContextVariables(id) {
     allParents.pop();
     processParents(allParents);
 }
-findParentsContextVariables(id);
+findParentsContextVariables(untrack(() => id));
 function addParentContextVariable(parent) {
     if (parent?.data?.type === 'containercomponent') {
         addContextVariable('group', 'The group name of the container.');

package/package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -15,7 +15,7 @@ import { fieldTypeToTsType } from '../../utils';
 import EvalV2InputEditor from './inputEditor/EvalV2InputEditor.svelte';
 import ConnectionButton from '../../../common/button/ConnectionButton.svelte';
 import Toggle from '../../../Toggle.svelte';
-let { id, componentInput = $bindable(), key, userInputEnabled = false, shouldCapitalize = true, resourceOnly = false, tooltip = undefined, fieldType, subFieldType, format, selectOptions, fileUpload = undefined, fileUploadS3 = undefined, placeholder, customTitle = undefined, displayType = false, allowTypeChange = true, disabled = false, shouldFormatExpression = false, fixedOverflowWidgets = true, loading = false, acceptSelf = false, recomputeOnInputChanged = true, showOnDemandOnlyToggle = true, documentationLink = undefined, markdownTooltip = undefined, securedContext = false } = $props();
+let { id, componentInput = $bindable(), key, userInputEnabled = false, shouldCapitalize = true, resourceOnly = false, tooltip = undefined, fieldType, subFieldType, format, selectOptions, fileUpload = undefined, fileUploadS3 = undefined, placeholder, customTitle = undefined, displayType = false, allowTypeChange = true, disabled = false, shouldFormatExpression = false, fixedOverflowWidgets = true, loading = false, acceptSelf = false, recomputeOnInputChanged = true, showOnDemandOnlyToggle = true, documentationLink = undefined, securedContext = false } = $props();
 $effect.pre(() => {
     if (componentInput == undefined) {
         //@ts-ignore
@@ -93,9 +93,9 @@ function openConnection() {
 					{#if loading}
 						<Loader2 size={14} class="animate-spin ml-2" />
 					{/if}
-					{#if tooltip || markdownTooltip}
-						<Tooltip small {documentationLink} {markdownTooltip}>
-							{tooltip}
+					{#if tooltip}
+						<Tooltip small {documentationLink}>
+							{@html tooltip}
 						</Tooltip>
 					{/if}
 				</div>

package/package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte.d.ts

@@ -25,7 +25,6 @@ interface Props {
     recomputeOnInputChanged?: boolean;
     showOnDemandOnlyToggle?: boolean;
     documentationLink?: string | undefined;
-    markdownTooltip?: string | undefined;
     securedContext?: boolean;
     disabled?: boolean;
 }

package/package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte

@@ -58,8 +58,7 @@ const mapping = {
 					customTitle={meta?.['customTitle']}
 					loading={meta?.['loading']}
 					documentationLink={meta?.['documentationLink']}
-					markdownTooltip={meta?.['markdownTooltip']}
-					allowTypeChange={meta?.['allowTypeChange']}
+		allowTypeChange={meta?.['allowTypeChange']}
 					{displayType}
 					{recomputeOnInputChanged}
 					{showOnDemandOnlyToggle}

package/package/components/apps/editor/settingsPanel/common/PanelSection.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { classNames } from '../../../../../utils';
+<script lang="ts">import { untrack } from 'svelte';
+import { classNames } from '../../../../../utils';
 import { ChevronDown, ChevronRight } from 'lucide-svelte';
 import Tooltip from '../../../../Tooltip.svelte';
 let { title, noPadding = false, fullHeight = true, titlePadding = '', tooltip = '', documentationLink = undefined, id = undefined, class: clazz = undefined, action, children, size = 'xs', collapsible = false, initiallyCollapsed = false } = $props();
@@ -15,7 +16,7 @@ function textSize() {
             return 'text-xs';
     }
 }
-let collapsed = $state(initiallyCollapsed);
+let collapsed = $state(untrack(() => initiallyCollapsed));
 </script>
 
 <div

package/package/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte

@@ -47,10 +47,11 @@ function hasConvertTo(upload) {
 			}
 		}}
 	>
-		<!-- @migration-task: migrate this slot by hand, `selected-title` is an invalid identifier -->
-		<svelte:fragment slot="selected-title">
-			<!-- Removing the title when there is a selected file -->
-			<span></span>
-		</svelte:fragment>
+		{#snippet selectedTitle()}
+			
+				<!-- Removing the title when there is a selected file -->
+				<span></span>
+			
+			{/snippet}
 	</FileInput>
 {/if}

package/package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte

@@ -4,14 +4,14 @@ import { Building, Globe2, MousePointer, Plus } from 'lucide-svelte';
 import InlineScriptList from './InlineScriptList.svelte';
 import WorkspaceScriptList from './WorkspaceScriptList.svelte';
 import WorkspaceFlowList from './WorkspaceFlowList.svelte';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import { schemaToInputsSpec } from '../../../utils';
 import { defaultIfEmptyString, emptySchema } from '../../../../../utils';
 import { loadSchema } from '../../../../../infer';
 import { workspaceStore } from '../../../../../stores';
 let { defaultUserInput = false, hideCreateScript = false, onlyFlow = false, rawApps = false, unusedInlineScripts = $bindable() } = $props();
 // const { app, workspace } = getContext<AppViewerContext>('AppViewerContext')
-let tab = $state(onlyFlow
+let tab = $state(untrack(() => onlyFlow)
     ? 'workspaceflows'
     : unusedInlineScripts?.length > 0
         ? 'inlinescripts'

package/package/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte

@@ -1,10 +1,11 @@
-<script lang="ts">import { fly } from 'svelte/transition';
+<script lang="ts">import { untrack } from 'svelte';
+import { fly } from 'svelte/transition';
 import { secondaryMenuLeft, secondaryMenuRight } from './';
 import CloseButton from '../../../../common/CloseButton.svelte';
 import { zIndexes } from '../../../../../zIndexes';
 import DocLink from '../DocLink.svelte';
 let { right } = $props();
-let secondaryMenu = right ? secondaryMenuRight : secondaryMenuLeft;
+let secondaryMenu = untrack(() => right) ? secondaryMenuRight : secondaryMenuLeft;
 let width = $state();
 </script>
 

package/package/components/apps/svelte-grid/Grid.svelte

@@ -10,7 +10,7 @@ import gridHelp from './utils/helper';
 import { twMerge } from 'tailwind-merge';
 import { getContainerHeight } from './utils/container';
 import { moveItem, getItemById, specifyUndefinedColumns } from './utils/item';
-import { onMount, getContext } from 'svelte';
+import { onMount, getContext, untrack } from 'svelte';
 import { getColumn, throttle } from './utils/other';
 import MoveResize from './MoveResize.svelte';
 import { areShadowsTheSame, findGridItemParentGrid, getDeltaXByComponent, getDeltaYByComponent, isContainer, ROW_GAP_X, ROW_GAP_Y, ROW_HEIGHT, sortGridItemsPosition, subGridIndexKey } from '../editor/appUtils';
@@ -20,7 +20,7 @@ const cols = columnConfiguration;
 let getComputedCols = $state($app.mobileViewOnSmallerScreens == false ? WIDE_GRID_COLUMNS : undefined);
 let container = $state();
 let xPerPx = $state(0);
-let yPerPx = rowHeight;
+let yPerPx = untrack(() => rowHeight);
 const onResizeThrottled = throttle(() => {
     if (!getComputedCols)
         return;
@@ -31,7 +31,7 @@ const onResizeThrottled = throttle(() => {
         yPerPx,
         width: containerWidth
     });
-}, throttleUpdate);
+}, untrack(() => throttleUpdate));
 let mounted = $state(false);
 onMount(() => {
     const sizeObserver = new ResizeObserver((entries) => {
@@ -162,7 +162,7 @@ const updateMatrix = ({ isPointerUp, id, activate }) => {
         onRedraw?.(sortGridItemsPosition(smartCopy(sortedItems), getComputedCols));
     }
 };
-const throttleMatrix = throttle(updateMatrix, throttleResize);
+const throttleMatrix = throttle(updateMatrix, untrack(() => throttleResize));
 //let hiddenComponents = writable({})
 let lastDetail = $state(undefined);
 const handleRepaint = ({ isPointerUp, id, activate }) => {

package/package/components/apps/svelte-grid/MoveResize.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { getContext, onMount } from 'svelte';
+<script lang="ts">import { getContext, onMount, untrack } from 'svelte';
 import { writable } from 'svelte/store';
 import { twMerge } from 'tailwind-merge';
 import { computePosition, findGridItemParentGrid, isContainer } from '../editor/appUtils';
@@ -8,7 +8,7 @@ let { sensor, width, height, left, top, id, container, xPerPx, yPerPx, gapX, gap
 const ctx = getContext('AppEditorContext');
 const { mode, app } = getContext('AppViewerContext');
 const scale = ctx ? ctx.scale : writable(100);
-const divId = `wm-component-${id}`;
+const divId = `wm-component-${untrack(() => id)}`;
 let shadowElement = $state();
 let active = $state(false);
 let initX, initY;
@@ -17,7 +17,7 @@ let capturePos = {
     y: 0
 };
 let cordDiff = $state({ x: 0, y: 0 });
-let newSize = $state({ width, height });
+let newSize = $state({ width: untrack(() => width), height: untrack(() => height) });
 let trans = $state(false);
 let anima;
 onMount(() => {
@@ -115,7 +115,7 @@ let dragClosure = undefined;
 const pointerdown = ({ clientX, clientY }) => {
     dragClosure = () => {
         dragClosure = undefined;
-        ctx.componentActive.set(true);
+        ctx?.componentActive.set(true);
         initX = (clientX / $scale) * 100;
         initY = (clientY / $scale) * 100;
         onInitMove?.();
@@ -256,7 +256,7 @@ const throttledComputeShadow = throttle((clientX, clientY) => {
     computeShadow(clientX, clientY);
 }, 50);
 const pointerup = (e) => {
-    ctx.componentActive.set(false);
+    ctx?.componentActive.set(false);
     stopAutoscroll();
     window.removeEventListener('pointerdown', pointerdown);
     window.removeEventListener('pointermove', pointermove);

package/package/components/assets/AssetButtons.svelte

@@ -1,10 +1,11 @@
-<script lang="ts">import { AlertTriangle, Edit2 } from 'lucide-svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import { AlertTriangle, Edit2 } from 'lucide-svelte';
 import { Button } from '../common';
 import ExploreAssetButton, { assetCanBeExplored } from '../ExploreAssetButton.svelte';
 import ResourceEditorDrawer from '../ResourceEditorDrawer.svelte';
 import Popover from '../meltComponents/Popover.svelte';
-let { s3FilePicker, dbManagerDrawer, resourceEditorDrawer, resourceDataCache, asset, ducklakeNotFound = false, datatableNotFound = false, onClick } = $props();
-let truncatedPath = asset.path.split('?table=')[0];
+let { s3FilePicker, resourceEditorDrawer, resourceDataCache, asset, ducklakeNotFound = false, datatableNotFound = false, onClick } = $props();
+let truncatedPath = untrack(() => asset).path.split('?table=')[0];
 let resourceDataCacheValue = $derived(resourceDataCache[truncatedPath]);
 </script>
 
@@ -20,35 +21,38 @@ let resourceDataCacheValue = $derived(resourceDataCache[truncatedPath]);
 	{/if}
 	{#if (asset.kind === 'resource' && resourceDataCacheValue === undefined) || ducklakeNotFound || datatableNotFound}
 		<Popover contentClasses="px-3 py-2">
-			<svelte:fragment slot="trigger">
-				<Button
-					startIcon={{ icon: AlertTriangle }}
-					variant="default"
-					unifiedSize="md"
-					btnClasses="text-red-500"
-					iconOnly
-				/>
-			</svelte:fragment>
-			<svelte:fragment slot="content">
-				<span class="text-sm">Not found</span>
-				{#if ducklakeNotFound}
-					<Button wrapperClasses="mt-1" href="/workspace_settings?tab=windmill_lfs">
-						Go to Ducklake settings
-					</Button>
-				{:else if datatableNotFound}
-					<Button wrapperClasses="mt-1" href="/workspace_settings?tab=windmill_data_tables">
-						Go to Data Table settings
-					</Button>
-				{:else if asset.kind === 'resource' && resourceDataCacheValue === undefined}
-					<Button wrapperClasses="mt-1" href="/resources">Go to Resources</Button>
-				{/if}
-			</svelte:fragment>
+			{#snippet trigger()}
+					
+					<Button
+						startIcon={{ icon: AlertTriangle }}
+						variant="default"
+						unifiedSize="md"
+						btnClasses="text-red-500"
+						iconOnly
+					/>
+				
+					{/snippet}
+			{#snippet content()}
+					
+					<span class="text-sm">Not found</span>
+					{#if ducklakeNotFound}
+						<Button wrapperClasses="mt-1" href="/workspace_settings?tab=windmill_lfs">
+							Go to Ducklake settings
+						</Button>
+					{:else if datatableNotFound}
+						<Button wrapperClasses="mt-1" href="/workspace_settings?tab=windmill_data_tables">
+							Go to Data Table settings
+						</Button>
+					{:else if asset.kind === 'resource' && resourceDataCacheValue === undefined}
+						<Button wrapperClasses="mt-1" href="/resources">Go to Resources</Button>
+					{/if}
+				
+					{/snippet}
 		</Popover>
 	{:else if assetCanBeExplored(asset, { resource_type: resourceDataCacheValue })}
 		<ExploreAssetButton
 			{asset}
 			{s3FilePicker}
-			{dbManagerDrawer}
 			onClick={() => onClick?.()}
 			noText
 			_resourceMetadata={{ resource_type: resourceDataCacheValue }}

package/package/components/assets/AssetButtons.svelte.d.ts

@@ -2,7 +2,6 @@ import ResourceEditorDrawer from '../ResourceEditorDrawer.svelte';
 import type { Asset } from '../../gen';
 type Props = {
     s3FilePicker?: any | undefined;
-    dbManagerDrawer?: any | undefined;
     resourceEditorDrawer?: ResourceEditorDrawer | undefined;
     resourceDataCache: Record<string, string | undefined>;
     asset: Asset;

package/package/components/assets/AssetColumnBadges.svelte

@@ -25,9 +25,11 @@ let entries = $derived(columns && Object.entries(columns));
 			{:else}
 				<Tooltip>
 					{@render badge()}
-					<svelte:fragment slot="text">
-						{accessType2} access to column "{columnName}"
-					</svelte:fragment>
+					{#snippet text()}
+									
+							{accessType2} access to column "{columnName}"
+						
+									{/snippet}
 				</Tooltip>
 			{/if}
 		{/each}