windmill-components 1.623.2 → 1.655.0

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/inlineScriptsPanel/CacheTtlPopup.svelte

@@ -46,7 +46,7 @@ let { cache_ttl = $bindable(), btnProps } = $props();
 				right: 'Cache the results for each possible inputs'
 			}}
 		/>
-		<div class="mb-4">
+		<div class="mt-6">
 			<span class="text-xs font-bold">How long to keep cache valid</span>
 
 			{#if cache_ttl}

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

@@ -278,7 +278,7 @@ const rnd = generateRandomString();
 					}}
 					checked={items.some((x) => typeof x.value != 'string')}
 				/>
-			{:else if subFieldType === 'ag-grid' || subFieldType === 'table-column'}
+			{:else if subFieldType === 'ag-grid' || subFieldType === 'table-column' || subFieldType === 'db-explorer'}
 				<Toggle
 					options={{
 						right: 'Raw'

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

@@ -31,7 +31,7 @@ $effect.pre(() => {
         oneOf = {
             ...oneOf,
             configuration: {
-                [oneOf.selected]: cleanseOneOfConfiguration(inputSpecsConfiguration)?.[oneOf.selected]
+                [oneOf.selected]: oneOf.configuration[oneOf.selected]
             }
         };
     }

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

@@ -1,6 +1,6 @@
 <script lang="ts">import { Tab, TabContent } from '../../../common';
 import { sendUserToast } from '../../../../toast';
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import { ccomponents, components } from '../component';
 import CssProperty from '../componentsPanel/CssProperty.svelte';
 import { quickStyleProperties } from '../componentsPanel/quickStyleProperties';
@@ -14,28 +14,52 @@ import { customisationByComponent, hasStyleValue } from '../componentsPanel/cssU
 import CssMigrationModal from './CSSMigrationModal.svelte';
 import CssPropertyWrapper from './CssPropertyWrapper.svelte';
 import { onMount } from 'svelte';
-import { findComponentSettings } from '../appUtils';
+import { findGridItemWithLocation } from '../appUtils';
 const { app, cssEditorOpen, selectedComponent } = getContext('AppViewerContext');
-let component;
-$: {
-    const newComponent = findComponentSettings($app, $selectedComponent?.[0])?.item?.data;
-    if (component != newComponent) {
-        component = newComponent;
+let tab = $state('local');
+let overrideGlobalCSS = $state(undefined);
+let overrideLocalCSS = $state(undefined);
+let componentWithLocation = $derived(findGridItemWithLocation($app, $selectedComponent?.[0] ?? ''));
+let component = $derived(componentWithLocation?.item.data);
+let type = $derived(component?.type);
+function updateComponentData(loc, updater) {
+    const { location } = loc;
+    if (location.type === 'subgrid') {
+        const item = $app.subgrids?.[location.subgridKey]?.[location.subgridItemIndex];
+        if (item) {
+            item.data = updater(item.data);
+        }
+    }
+    else {
+        const item = $app.grid[location.gridItemIndex];
+        if (item) {
+            item.data = updater(item.data);
+        }
     }
+    app.set($app);
 }
-let tab = 'local';
-let overrideGlobalCSS = undefined;
-let overrideLocalCSS = undefined;
-$: type = component?.type;
-let migrationModal = undefined;
-$: customCssByComponentType =
-    component?.type && $app.css
-        ? Object.entries($app.css[component.type] || {}).map(([id, v]) => ({
-            id,
-            forceStyle: v?.style != undefined,
-            forceClass: v?.['class'] != undefined
-        }))
-        : undefined;
+$effect.pre(() => {
+    if ((componentWithLocation && component?.customCss === undefined) ||
+        (Object.keys(component?.customCss ?? {}).length === 0 &&
+            Object.keys(ccomponents[component?.type ?? '']?.customCss ?? {}).length > 0)) {
+        untrack(() => {
+            if (componentWithLocation) {
+                updateComponentData(componentWithLocation, (data) => ({
+                    ...data,
+                    customCss: structuredClone(ccomponents[component?.type ?? '']?.customCss ?? {})
+                }));
+            }
+        });
+    }
+});
+let migrationModal = $state(undefined);
+let customCssByComponentType = $derived(component?.type && $app.css
+    ? Object.entries($app.css[component.type] || {}).map(([id, v]) => ({
+        id,
+        forceStyle: v?.style != undefined,
+        forceClass: v?.['class'] != undefined
+    }))
+    : undefined);
 function copyLocalToGlobal(name, value) {
     if (!value) {
         sendUserToast('No local CSS to copy');
@@ -46,7 +70,7 @@ function copyLocalToGlobal(name, value) {
             return;
         if (hasStyleValue($app.css?.[type]?.[name])) {
             overrideGlobalCSS = () => {
-                $app.css[type][name] = JSON.parse(JSON.stringify(value));
+                $app.css[type][name] = structuredClone(value);
                 app.set($app);
             };
         }
@@ -54,7 +78,7 @@ function copyLocalToGlobal(name, value) {
             if (!$app.css[type]) {
                 initGlobalCss();
             }
-            $app.css[type][name] = JSON.parse(JSON.stringify(value));
+            $app.css[type][name] = structuredClone(value);
             app.set($app);
             sendUserToast('Global CSS copied');
         }
@@ -67,13 +91,11 @@ function copyGlobalToLocal(id, value) {
     else {
         if (hasStyleValue(value)) {
             overrideLocalCSS = () => {
-                component.customCss[id] = JSON.parse(JSON.stringify(value));
-                app.set($app);
+                updateCssProperty(id, structuredClone(value));
             };
         }
         else {
-            component.customCss[id] = JSON.parse(JSON.stringify(value));
-            app.set($app);
+            updateCssProperty(id, structuredClone(value));
             sendUserToast('Local CSS copied');
         }
     }
@@ -91,10 +113,21 @@ function initGlobalCss() {
         !$app.css[component.type]?.style &&
         components[component.type] &&
         $app.css[component.type] === undefined) {
-        $app.css[component.type] = JSON.parse(JSON.stringify(components[component.type].customCss));
+        $app.css[component.type] = structuredClone(components[component.type].customCss);
         app.set($app);
     }
 }
+function updateCssProperty(name, cssValue) {
+    if (!componentWithLocation || !cssValue)
+        return;
+    updateComponentData(componentWithLocation, (data) => ({
+        ...data,
+        customCss: {
+            ...(data?.customCss ?? {}),
+            [name]: cssValue
+        }
+    }));
+}
 function getSelector(key) {
     return customisationByComponent
         .find((c) => c.components.includes(component?.type ?? ''))
@@ -185,8 +218,10 @@ onMount(() => {
 										{name}
 										wmClass={getSelector(name)}
 										componentType={component.type}
-										bind:value={component.customCss[name]}
-										on:change={() => app.set($app)}
+										value={component.customCss[name]}
+										on:change={(e) => {
+											updateCssProperty(name, e.detail)
+										}}
 										shouldDisplayRight={hasStyleValue(component.customCss[name])}
 										on:right={() => {
 											copyLocalToGlobal(name, component?.customCss?.[name])
@@ -198,6 +233,8 @@ onMount(() => {
 								</div>
 							{/each}
 						</div>
+					{:else}
+						<div class="text-sm text-secondary mx-2">No local CSS to display</div>
 					{/if}
 				</TabContent>
 				<TabContent value="global">

package/package/components/apps/editor/settingsPanel/StylePanel.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 StylePanel: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type StylePanel = InstanceType<typeof StylePanel>;
+declare const StylePanel: import("svelte").Component<Record<string, never>, {}, "">;
+type StylePanel = ReturnType<typeof StylePanel>;
 export default StylePanel;

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

@@ -25,6 +25,7 @@ import JsonEditor from '../../../../JsonEditor.svelte';
 import S3FilePicker from '../../../../S3FilePicker.svelte';
 import FileUpload from '../../../../common/fileUpload/FileUpload.svelte';
 import DucklakePicker from '../../../../DucklakePicker.svelte';
+import DatatablePicker from '../../../../DatatablePicker.svelte';
 let { componentInput = $bindable(), fieldType = undefined, subFieldType = undefined, selectOptions = undefined, placeholder = undefined, format = undefined, id } = $props();
 const appContext = getContext('AppViewerContext');
 $effect(() => {
@@ -130,6 +131,15 @@ let s3JsonEditor = $state();
 				}
 				showSchemaExplorer
 			/>
+		{:else if fieldType === 'datatable'}
+			<DatatablePicker
+				class="w-full"
+				bind:value={
+					() => componentInput?.value?.split('datatable://')?.[1],
+					(v) => componentInput && (componentInput.value = v ? `datatable://${v}` : undefined)
+				}
+				showSchemaExplorer
+			/>
 		{:else if fieldType === 'labeledresource'}
 			{#if componentInput?.value && typeof componentInput?.value == 'object' && 'label' in componentInput?.value && (componentInput.value?.['value'] == undefined || typeof componentInput.value?.['value'] == 'string')}
 				<div class="flex flex-col gap-1 w-full">

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>