windmill-components 1.537.1 → 1.542.4

package/package/components/apps/components/display/table/SyncColumnDefs.svelte

@@ -5,37 +5,119 @@ import { RefreshCw } from 'lucide-svelte';
 import Badge from '../../../../common/badge/Badge.svelte';
 import Alert from '../../../../common/alert/Alert.svelte';
 import { isObject } from '../../../../../utils';
-let { id, columnDefs = [], result = [], allowColumnDefsActions = true, children } = $props();
+let { id, columnDefs = [], result = [], allowColumnDefsActions = true, children, actionsPresent = false, customActionsHeader = undefined } = $props();
 const { app, mode, selectedComponent } = getContext('AppViewerContext');
+let syncInProgress = false;
+function hasActionsPlaceholder(cols) {
+    if (!Array.isArray(cols))
+        return false;
+    return cols.findIndex((c) => c?._isActionsColumn === true) > -1;
+}
+function addActionsPlaceholder(cols) {
+    const hdr = customActionsHeader ?? 'Actions';
+    const placeholder = {
+        field: '__actions__',
+        _isActionsColumn: true,
+        headerName: hdr,
+        flex: 1
+    };
+    if (!Array.isArray(cols))
+        return [placeholder];
+    return [...cols, placeholder];
+}
+function removeActionsPlaceholder(cols) {
+    if (!Array.isArray(cols))
+        return [];
+    return cols.filter((c) => c?._isActionsColumn !== true);
+}
+async function ensureActionsColumn() {
+    // Only act in editor (DND) mode
+    if ($mode !== 'dnd')
+        return;
+    const gridItem = findGridItem($app, id);
+    if (!gridItem)
+        return;
+    // Type the configuration more safely
+    const rawConf = gridItem.data.configuration?.columnDefs;
+    if (!rawConf)
+        return;
+    // Type guard for configuration structure
+    const conf = rawConf;
+    if (!conf.type || (conf.type !== 'static' && conf.type !== 'evalv2'))
+        return;
+    let currentColumns;
+    if (conf.type === 'static') {
+        currentColumns = Array.isArray(conf.value) ? conf.value : [];
+    }
+    else if (conf.type === 'evalv2') {
+        try {
+            const parsed = JSON.parse(conf.expr ?? '[]');
+            currentColumns = Array.isArray(parsed) ? parsed : [];
+        }
+        catch (e) {
+            console.warn('Failed to parse columnDefs expression:', e);
+            currentColumns = [];
+        }
+    }
+    const hasPlaceholder = hasActionsPlaceholder(currentColumns);
+    // Auto-sync logic: add missing actions column, remove when actions gone
+    const needsAdd = actionsPresent && !hasPlaceholder;
+    const needsRemove = !actionsPresent && hasPlaceholder;
+    if (!needsAdd && !needsRemove)
+        return;
+    let nextColumns = currentColumns || [];
+    if (needsAdd)
+        nextColumns = addActionsPlaceholder(nextColumns);
+    if (needsRemove)
+        nextColumns = removeActionsPlaceholder(nextColumns);
+    // Update configuration with proper typing
+    if (conf.type === 'static') {
+        conf.value = nextColumns;
+    }
+    else if (conf.type === 'evalv2') {
+        conf.expr = JSON.stringify(nextColumns);
+    }
+    await updateConfiguration();
+}
+$effect(() => {
+    const shouldSync = actionsPresent !== undefined || columnDefs?.length !== undefined;
+    if (shouldSync && !syncInProgress) {
+        syncInProgress = true;
+        ensureActionsColumn().finally(() => {
+            syncInProgress = false;
+        });
+    }
+});
 async function syncColumns() {
-    let gridItem = findGridItem($app, id);
+    const gridItem = findGridItem($app, id);
     if (gridItem && result) {
         const keys = Object.keys(result[0] ?? {}) ?? [];
-        if (gridItem.data.configuration.columnDefs.type === 'static') {
-            gridItem.data.configuration.columnDefs.value = keys.map((key) => ({
-                field: key,
-                headerName: key,
-                flex: 1
-            }));
+        const conf = gridItem.data.configuration.columnDefs;
+        const newColumns = keys.map((key) => ({
+            field: key,
+            headerName: key,
+            flex: 1
+        }));
+        if (conf.type === 'static') {
+            conf.value = newColumns;
         }
-        else if (gridItem.data.configuration.columnDefs.type === 'evalv2') {
-            gridItem.data.configuration.columnDefs.expr = JSON.stringify(keys.map((key, index) => ({
-                field: key,
-                headerName: key,
-                flex: 1
-            })));
+        else if (conf.type === 'evalv2') {
+            conf.expr = JSON.stringify(newColumns);
         }
         await updateConfiguration();
     }
 }
 async function setEmptyColumns() {
-    let gridItem = findGridItem($app, id);
-    if (gridItem && gridItem.data.configuration.columnDefs.type === 'static') {
-        gridItem.data.configuration.columnDefs.value = [];
+    const gridItem = findGridItem($app, id);
+    if (!gridItem)
+        return;
+    const conf = gridItem.data.configuration.columnDefs;
+    if (conf.type === 'static') {
+        conf.value = [];
         await updateConfiguration();
     }
-    else if (gridItem && gridItem.data.configuration.columnDefs.type === 'evalv2') {
-        gridItem.data.configuration.columnDefs.expr = '[]';
+    else if (conf.type === 'evalv2') {
+        conf.expr = '[]';
         await updateConfiguration();
     }
 }

package/package/components/apps/components/display/table/SyncColumnDefs.svelte.d.ts

@@ -1,9 +1,12 @@
+import type { WindmillColumnDef } from './utils';
 interface Props {
     id: string;
-    columnDefs?: Array<any>;
-    result?: Array<any> | undefined;
+    columnDefs?: WindmillColumnDef[];
+    result?: Array<Record<string, any>> | undefined;
     allowColumnDefsActions?: boolean;
     children?: import('svelte').Snippet;
+    actionsPresent?: boolean;
+    customActionsHeader?: string | undefined;
 }
 declare const SyncColumnDefs: import("svelte").Component<Props, {}, "">;
 type SyncColumnDefs = ReturnType<typeof SyncColumnDefs>;

package/package/components/apps/components/display/table/utils.js

@@ -76,6 +76,12 @@ export function transformColumnDefs({ columnDefs, actions, customActionsHeader,
         return [];
     }
     let r = columnDefs?.filter((x) => x && !x.ignored) ?? [];
+    // Allow an explicit "actions" placeholder in columnDefs so users can manage it like any column.
+    // When present, replace it with the computed actions colDef. When not present but actions exist,
+    // we will append the actions column after validation below.
+    const actionsIndex = r.findIndex((c) => {
+        return c?._isActionsColumn === true;
+    });
     if (onDelete) {
         r.push({
             field: 'delete',
@@ -118,15 +124,40 @@ export function transformColumnDefs({ columnDefs, actions, customActionsHeader,
         });
     }
     if (actions?.length) {
-        r.push({
-            headerName: customActionsHeader ?? 'Actions',
+        const computedActionsCol = {
+            field: '__actions__',
+            _isActionsColumn: true,
+            headerName: 'Actions',
             cellRenderer: tableActionsFactory,
             autoHeight: true,
             cellStyle: { textAlign: 'center' },
             cellClass: 'grid-cell-centered',
-            lockPosition: 'right',
-            ...(!wrapActions ? { minWidth: 130 * actions?.length } : {})
-        });
+            // Only lock position to right if user hasn't explicitly positioned the actions column
+            ...(actionsIndex === -1 ? { lockPosition: 'right' } : {}),
+            // Set default minWidth based on number of actions (if not wrapping)
+            ...(!wrapActions ? { minWidth: 130 * actions?.length } : {}),
+            // Respect user-specified overrides when placeholder present (these should override defaults)
+            ...(actionsIndex > -1
+                ? {
+                    // keep width/pin/flex/align/hide from placeholder when provided
+                    ...(['width', 'minWidth', 'maxWidth', 'flex', 'pinned', 'headerName', 'cellStyle', 'cellClass', 'autoHeight', 'hide']
+                        .reduce((acc, key) => {
+                        if (r[actionsIndex] && r[actionsIndex][key] !== undefined)
+                            acc[key] = r[actionsIndex][key];
+                        return acc;
+                    }, {}))
+                }
+                : {}),
+            ...(customActionsHeader?.trim() ? { headerName: customActionsHeader } : {})
+        };
+        if (actionsIndex > -1) {
+            // Replace the placeholder with computed column
+            r.splice(actionsIndex, 1, computedActionsCol);
+        }
+        else {
+            // Backward compatible: append if not explicitly placed
+            r.push(computedActionsCol);
+        }
     }
     return r.map((fields) => {
         let cr = defaultCellRenderer(fields.cellRendererType);

package/package/components/apps/components/inputs/currency/CurrencyInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import DarkModeObserver from '../../../../DarkModeObserver.svelte';
-import { untrack } from 'svelte';
+import { onMount, untrack } from 'svelte';
 /* Forked from MIT LICENSE
 https://raw.githubusercontent.com/Canutin/svelte-currency-input/main/src/lib/CurrencyInput.svelte
 */
@@ -14,7 +14,12 @@ const DEFAULT_CLASS_FORMATTED = 'currencyInput__formatted';
 const DEFAULT_CLASS_FORMATTED_POSITIVE = 'currencyInput__formatted--positive';
 const DEFAULT_CLASS_FORMATTED_NEGATIVE = 'currencyInput__formatted--negative';
 const DEFAULT_CLASS_FORMATTED_ZERO = 'currencyInput__formatted--zero';
-let { value = $bindable(DEFAULT_VALUE), locale = DEFAULT_LOCALE, currency = DEFAULT_CURRENCY, name = DEFAULT_NAME, required = false, disabled = false, placeholder = DEFAULT_VALUE, isNegativeAllowed = true, fractionDigits = DEFAULT_FRACTION_DIGITS, inputClasses = null, noColor = false, style = '' } = $props();
+let { value = $bindable(), locale = DEFAULT_LOCALE, currency = DEFAULT_CURRENCY, name = DEFAULT_NAME, required = false, disabled = false, placeholder = DEFAULT_VALUE, isNegativeAllowed = true, fractionDigits = DEFAULT_FRACTION_DIGITS, inputClasses = null, noColor = false, style = '' } = $props();
+onMount(() => {
+    if (value == undefined) {
+        value = DEFAULT_VALUE;
+    }
+});
 // Formats value as: e.g. $1,523.00 | -$1,523.00
 const formatCurrency = (value, maximumFractionDigits, minimumFractionDigits) => {
     try {
@@ -67,7 +72,7 @@ const setUnformattedValue = (event) => {
         inputTarget = event.target;
         // Reverse the value when minus is pressed
         if (isNegativeAllowed && event.key === '-')
-            value = value * -1;
+            value = (value ?? DEFAULT_VALUE) * -1;
     }
     // Remove all characters that arent: numbers, commas, periods (or minus signs if `isNegativeAllowed`)
     let unformattedValue = isNegativeAllowed
@@ -101,7 +106,7 @@ const setFormattedValue = () => {
     const startCaretPosition = inputTarget?.selectionStart || 0;
     const previousFormattedValueLength = formattedValue.length;
     // Apply formatting to input
-    formattedValue = formatCurrency(value, fractionDigits, 0);
+    formattedValue = formatCurrency(value ?? DEFAULT_VALUE, fractionDigits, 0);
     // Update `value` after formatting
     setUnformattedValue();
     // New caret position
@@ -115,7 +120,7 @@ const setFormattedValue = () => {
 let formattedValue = $state('');
 let formattedPlaceholder = placeholder !== null ? formatCurrency(placeholder, fractionDigits, fractionDigits) : '';
 let isZero = $derived(value === 0);
-let isNegative = $derived(value < 0);
+let isNegative = $derived((value ?? DEFAULT_VALUE) < 0);
 $effect(() => {
     value;
     untrack(() => {

package/package/components/apps/editor/AppEditor.svelte

@@ -12,7 +12,7 @@ import { Alert, Button, Tab } from '../../common';
 import TabContent from '../../common/tabs/TabContent.svelte';
 import Tabs from '../../common/tabs/TabsV2.svelte';
 import { userStore, workspaceStore } from '../../../stores';
-import { classNames, encodeState, getModifierKey, sendUserToast } from '../../../utils';
+import { classNames, encodeState, getModifierKey, sendUserToast, urlParamsToObject } from '../../../utils';
 import AppPreview from './AppPreview.svelte';
 import ComponentList from './componentsPanel/ComponentList.svelte';
 import ContextPanel from './contextPanel/ContextPanel.svelte';
@@ -60,7 +60,7 @@ let context = $state({
     groups: $userStore?.groups,
     username: $userStore?.username,
     name: $userStore?.name,
-    query: Object.fromEntries(new URL(window.location.href).searchParams.entries()),
+    query: urlParamsToObject(new URL(window.location.href).searchParams),
     hash: window.location.hash.substring(1),
     workspace: $workspaceStore,
     mode: 'editor',
@@ -643,7 +643,8 @@ $effect(() => {
     untrack(() => setGridPanelSize($componentActive));
 });
 $effect(() => {
-    $connectingInput.opened, untrack(() => updatePannelInConnecting());
+    ;
+    ($connectingInput.opened, untrack(() => updatePannelInConnecting()));
 });
 $effect(() => {
     forceDeactivatePanzoom = isModifierKeyPressed && handMode;

package/package/components/apps/editor/AppEditorHeader.svelte

@@ -91,7 +91,6 @@ function closeDraftDrawer() {
 }
 async function computeTriggerables() {
     const items = allItems($app.grid, $app.subgrids);
-    console.debug('items', items);
     const allTriggers = (await Promise.all(items
         .flatMap((x) => {
         let c = x.data;

package/package/components/apps/editor/GridViewer.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { EditorBreakpoint } from '../types';
 import type { FilledItem } from '../svelte-grid/types';
-declare class __sveltets_Render<T> {
-    props(): {
+declare function $$render<T>(): {
+    props: {
         items: FilledItem<T>[];
         rowHeight?: number;
         gap?: any;
@@ -13,11 +13,18 @@ declare class __sveltets_Render<T> {
         parentWidth?: number | undefined;
         children?: import("svelte").Snippet<[any]>;
     };
-    events(): {
+    exports: {};
+    bindings: "items" | "containerWidth";
+    slots: {};
+    events: {
         resize: CustomEvent<any>;
         mount: CustomEvent<any>;
     };
-    slots(): {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "items" | "containerWidth";
     exports(): {};
 }

package/package/components/apps/editor/SettingsPanel.svelte

@@ -92,7 +92,7 @@ let menuItemsSettings = $derived(findMenuItemsSettings($app, firstComponent));
 
 {#if gridItemWithLocation}
 	{#if gridItemWithLocation.location.type === 'grid'}
-		{#each $app.grid as gridItem, gridItemIndex}
+		{#each $app.grid as gridItem, gridItemIndex (gridItem.data.id)}
 			{#if gridItem.data.id === gridItemWithLocation.item.id}
 				<ComponentPanel
 					bind:item={$app.grid[gridItemIndex]}
@@ -104,7 +104,7 @@ let menuItemsSettings = $derived(findMenuItemsSettings($app, firstComponent));
 			{/if}
 		{/each}
 	{:else if gridItemWithLocation.location.type === 'subgrid' && $app.subgrids}
-		{#each $app.subgrids[gridItemWithLocation.location.subgridKey] as subgridItem, subgridItemIndex}
+		{#each $app.subgrids[gridItemWithLocation.location.subgridKey] as subgridItem, subgridItemIndex (subgridItem.data.id)}
 			{#if subgridItem.data.id === gridItemWithLocation.item.id}
 				<ComponentPanel
 					bind:item={$app.subgrids[gridItemWithLocation.location.subgridKey][subgridItemIndex]}

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

@@ -4,14 +4,14 @@ import { ChevronDown } from 'lucide-svelte';
 import { isOpenStore } from './store';
 import { createEventDispatcher, onMount } from 'svelte';
 import Tooltip from '../../../Tooltip.svelte';
-let { title, prefix = undefined, openByDefault = false, wrapperClasses = '', toggleClasses = '', contentWrapperClasses = '', isOpen = $bindable(false), tooltip = undefined, documentationLink = undefined, subtitle = undefined, titleSlot, children } = $props();
+let { title, prefix = undefined, openByDefault = false, wrapperClasses = '', toggleClasses = '', contentWrapperClasses = '', isOpen = $bindable(), tooltip = undefined, documentationLink = undefined, subtitle = undefined, titleSlot, children } = $props();
 const dispatch = createEventDispatcher();
 let storeTitle = $derived(prefix + title);
 $effect(() => {
     isOpen = prefix ? $isOpenStore[storeTitle] : true;
 });
 $effect(() => {
-    dispatch('open', isOpen);
+    dispatch('open', isOpen ?? false);
 });
 onMount(() => {
     if (prefix !== undefined && !(prefix + title in $isOpenStore)) {

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte.d.ts

@@ -30,6 +30,6 @@ declare const InlineScriptEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     delete: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "name" | "fields" | "inlineScript" | "editor">;
+}, {}, {}, "name" | "fields" | "editor" | "inlineScript">;
 type InlineScriptEditor = InstanceType<typeof InlineScriptEditor>;
 export default InlineScriptEditor;

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte.d.ts

@@ -26,6 +26,6 @@ declare const InlineScriptEditorDrawer: $$__sveltets_2_IsomorphicComponent<Props
     [evt: string]: CustomEvent<any>;
 }, {}, {
     openDrawer: () => void;
-}, "inlineScript" | "isOpen">;
+}, "isOpen" | "inlineScript">;
 type InlineScriptEditorDrawer = InstanceType<typeof InlineScriptEditorDrawer>;
 export default InlineScriptEditorDrawer;

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte.d.ts

@@ -26,6 +26,6 @@ declare const InlineScriptRunnableByPath: $$__sveltets_2_IsomorphicComponent<Pro
     fork: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "runnable" | "fields">;
+}, {}, {}, "fields" | "runnable">;
 type InlineScriptRunnableByPath = InstanceType<typeof InlineScriptRunnableByPath>;
 export default InlineScriptRunnableByPath;

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

@@ -1,14 +1,17 @@
 <script lang="ts">import { preventDefault, stopPropagation } from 'svelte/legacy';
 import { Button } from '../../../common';
 import { GripVertical, Loader2, Plus, X } from 'lucide-svelte';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, getContext, tick } from 'svelte';
 import SubTypeEditor from './SubTypeEditor.svelte';
 import { dragHandle, dragHandleZone } from '@windmill-labs/svelte-dnd-action';
 import { generateRandomString, pluralize } from '../../../../utils';
 import Toggle from '../../../Toggle.svelte';
 import QuickAddColumn from './QuickAddColumn.svelte';
 import RefreshDatabaseStudioTable from './RefreshDatabaseStudioTable.svelte';
+import { findGridItem } from '../appUtils';
 let { componentInput = $bindable(), subFieldType = undefined, selectOptions = undefined, id } = $props();
+const appContext = getContext('AppViewerContext');
+const { app, selectedComponent } = appContext || {};
 let items = $state([]);
 items = getItems(componentInput);
 const dispatch = createEventDispatcher();
@@ -175,10 +178,30 @@ function addElementByType() {
     componentInput = componentInput;
     items = getItems(componentInput);
 }
-function deleteElementByType(index) {
+async function updateConfiguration() {
+    if (selectedComponent && id) {
+        $selectedComponent = undefined;
+        await tick();
+        $selectedComponent = [id];
+    }
+}
+async function deleteElementByType(index) {
     if (componentInput.value) {
+        const item = componentInput.value[index];
+        // If deleting actions column, clear all table actions
+        if (subFieldType === 'ag-grid' && item && item._isActionsColumn === true) {
+            const gridItem = id ? findGridItem($app, id) : null;
+            if (gridItem && (gridItem.data.type === 'aggridcomponent' ||
+                gridItem.data.type === 'aggridcomponentee' ||
+                gridItem.data.type === 'aggridinfinitecomponent' ||
+                gridItem.data.type === 'aggridinfinitecomponentee') && Array.isArray(gridItem.data.actions)) {
+                gridItem.data.actions.length = 0;
+            }
+            await updateConfiguration();
+            return;
+        }
         componentInput.value.splice(index, 1);
-        items.splice(index, 1); // Add this
+        items.splice(index, 1);
         items = items;
         componentInput.value = componentInput.value;
         dispatch('deleteArrayItem', { index });

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

@@ -117,7 +117,7 @@ function openConnection() {
 								componentInput['value'] != undefined &&
 								(componentInput['expr'] == '' || componentInput['expr'] == undefined)
 							) {
-								componentInput['expr'] = JSON.stringify(componentInput['value'])
+								componentInput['expr'] = JSON.stringify(componentInput['value'], null, 2)
 							} else if (fileUploadS3 && fieldType === 'text' && e.detail != 'uploadS3') {
 								componentInput['value'] = ''
 							} else if (e.detail == 'uploadS3') {

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

@@ -273,11 +273,19 @@ let s3FilePicker = $state(undefined);
 		{:else if fieldType === 'ag-grid'}
 			<div class="flex flex-row rounded-md bg-surface items-center h-full">
 				<div class="relative w-full">
-					<input
-						class="text-xs px-2 border-y w-full flex flex-row items-center border-r rounded-r-md h-8"
-						bind:value={componentInput.value.field}
-						placeholder="Field"
-					/>
+					{#if componentInput.value._isActionsColumn === true}
+						<div
+							class="text-xs px-2 border w-full flex flex-row items-center rounded-r-md h-8 text-primary"
+						>
+							Actions Column
+						</div>
+					{:else}
+						<input
+							class="text-xs px-2 border-y w-full flex flex-row items-center border-r rounded-r-md h-8"
+							bind:value={componentInput.value.field}
+							placeholder="Field"
+						/>
+					{/if}
 					<div class="absolute top-1 right-1">
 						<AgGridWizard bind:value={componentInput.value}>
 							{#snippet trigger()}

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

@@ -1,7 +1,7 @@
 import type { FilledItem } from './types';
 import { type GridShadow } from '../editor/appUtils';
-declare class __sveltets_Render<T> {
-    props(): {
+declare function $$render<T>(): {
+    props: {
         items: FilledItem<T>[];
         rowHeight?: number;
         gap?: any;
@@ -16,28 +16,47 @@ declare class __sveltets_Render<T> {
         parentWidth?: number | undefined;
         disableMove?: boolean;
         children?: import("svelte").Snippet<[any]>;
-        onDropped?: ((e: {
+        onDropped?: (e: {
             id: string;
             overlapped: string | undefined;
             x: number;
             y: number;
-        }) => void) | undefined;
-        onRedraw?: ((grid: FilledItem<T>[]) => void) | undefined;
-        onResize?: ((e: {
+        }) => void;
+        onRedraw?: (grid: FilledItem<T>[]) => void;
+        onResize?: (e: {
             cols: number;
             xPerPx: number;
             yPerPx: number;
             width: number | undefined;
-        }) => void) | undefined;
-        onMounted?: ((e: {
+        }) => void;
+        onMounted?: (e: {
             cols: number;
             xPerPx: number;
             yPerPx: number;
             width: number | undefined;
-        }) => void) | undefined;
+        }) => void;
     };
-    events(): {};
-    slots(): {};
+    exports: {
+        handleMove: (detail: {
+            cordDiff: {
+                x: number;
+                y: number;
+            };
+            clientY: number;
+            intersectingElement?: string | undefined;
+            shadow?: GridShadow | undefined;
+            overlapped?: string | undefined;
+        }) => void;
+        handleInitMove: (id: string) => void;
+    };
+    bindings: "containerWidth";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "containerWidth";
     exports(): {
         handleMove: (detail: {

package/package/components/assets/JobAssetsViewer.svelte

@@ -49,30 +49,34 @@ let dbManagerDrawer = $state();
 let resourceEditorDrawer = $state();
 </script>
 
-<ul class="flex flex-col divide-y mt-1">
-	{#each assets.value ?? [] as asset}
-		<li class="flex justify-between py-3 leading-4 text-sm pl-4">
-			<div class="flex flex-col flex-1 truncate">
-				{asset.path}
-				<span class="text-2xs text-tertiary">
-					{formatAssetKind({
-						...asset,
-						...(asset.kind === 'resource'
-							? { metadata: { resource_type: resourceDataCache[asset.path] } }
-							: {})
-					})}
-				</span>
-			</div>
-			<AssetButtons
-				{asset}
-				{resourceDataCache}
-				{dbManagerDrawer}
-				{resourceEditorDrawer}
-				{s3FilePicker}
-			/>
-		</li>
-	{/each}
-</ul>
+{#if assets.value && assets.value.length > 0}
+	<ul class="flex flex-col divide-y mt-1">
+		{#each assets.value ?? [] as asset}
+			<li class="flex justify-between py-3 leading-4 text-sm pl-4">
+				<div class="flex flex-col flex-1 truncate">
+					{asset.path}
+					<span class="text-2xs text-tertiary">
+						{formatAssetKind({
+							...asset,
+							...(asset.kind === 'resource'
+								? { metadata: { resource_type: resourceDataCache[asset.path] } }
+								: {})
+						})}
+					</span>
+				</div>
+				<AssetButtons
+					{asset}
+					{resourceDataCache}
+					{dbManagerDrawer}
+					{resourceEditorDrawer}
+					{s3FilePicker}
+				/>
+			</li>
+		{/each}
+	</ul>
+{:else}
+	<div class="text-sm text-tertiary">No assets found</div>
+{/if}
 
 <S3FilePicker bind:this={s3FilePicker} readOnlyMode />
 <DbManagerDrawer bind:this={dbManagerDrawer} />

package/package/components/auditLogs/AuditLogsTable.svelte

@@ -76,11 +76,7 @@ function kindToBadgeColor(kind) {
 
 <svelte:window onresize={() => computeHeight()} />
 
-<div
-	class="divide-y min-w-[640px] h-full"
-	id="audit-logs-table-wrapper"
->
-
+<div class="divide-y min-w-[640px] h-full" id="audit-logs-table-wrapper">
 	<div bind:clientHeight={headerHeight}>
 		<div
 			class="flex flex-row bg-surface-secondary sticky top-0 w-full p-2 pr-4 text-xs font-semibold"
@@ -105,7 +101,7 @@ function kindToBadgeColor(kind) {
 			scrollToAlignment="center"
 		>
 			{#snippet header()}{/snippet}
-			{#snippet children({ index, style })}
+			{#snippet item({ index, style })}
 				<div {style} class="w-full">
 					{#if flatLogs}
 						{@const logOrDate = flatLogs[index]}