windmill-components 1.537.1 → 1.542.4

package/package/components/RunChart.svelte.d.ts

@@ -1,19 +1,6 @@
 import 'chartjs-adapter-date-fns';
 import type { CompletedJob } 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 RunChart: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     jobs?: CompletedJob[] | undefined;
     maxIsNow?: boolean;
     minTimeSet?: string | undefined;
@@ -21,12 +8,13 @@ declare const RunChart: $$__sveltets_2_IsomorphicComponent<{
     selectedIds?: string[];
     canSelect?: boolean;
     lastFetchWentToEnd?: boolean;
-}, {
-    loadExtra: CustomEvent<any>;
-    zoom: CustomEvent<any>;
-    pointClicked: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type RunChart = InstanceType<typeof RunChart>;
+    onPointClicked: (ids: string[]) => void;
+    onLoadExtra: () => void;
+    onZoom: (zoom: {
+        min: Date;
+        max: Date;
+    }) => void;
+}
+declare const RunChart: import("svelte").Component<Props, {}, "selectedIds">;
+type RunChart = ReturnType<typeof RunChart>;
 export default RunChart;

package/package/components/S3FilePicker.svelte

@@ -489,7 +489,7 @@ $effect.pre(() => {
 								>
 									{#snippet header()}{/snippet}
 									{#snippet footer()}{/snippet}
-									{#snippet children({ index, style })}
+									{#snippet item({ index, style })}
 										{@const file_info = allFilesByKey[displayedFileKeys[index]]}
 
 										<div

package/package/components/SchemaForm.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Schema } from '../common';
-import { type DynamicSelect } from '../utils';
+import { type DynamicInput } from '../utils';
 import { type Options as DndOptions } from '@windmill-labs/svelte-dnd-action';
 import type { SchemaDiff } from './schema/schemaUtils.svelte';
 import type { ComponentCustomCSS } from './apps/types';
@@ -30,7 +30,7 @@ interface Props {
         id: string;
         value: string;
     }[] | undefined;
-    helperScript?: DynamicSelect.HelperScript;
+    helperScript?: DynamicInput.HelperScript;
     lightHeader?: boolean;
     diff?: Record<string, SchemaDiff>;
     nestedParent?: {

package/package/components/ScriptBuilder.svelte

@@ -133,7 +133,7 @@ async function loadTriggers() {
 // Add triggers context store
 const triggersState = $state(new Triggers([
     { type: 'webhook', path: '', isDraft: false },
-    { type: 'email', path: '', isDraft: false },
+    { type: 'default_email', path: '', isDraft: false },
     ...(script.draft_triggers ?? [])
 ], undefined, saveSessionDraft));
 const captureOn = writable(undefined);
@@ -1571,6 +1571,7 @@ async function loadWorkerTags() {
 			bind:hasPreprocessor
 			bind:captureTable
 			bind:assets={script.assets}
+			enablePreprocessorSnippet
 		/>
 	</div>
 {:else}

package/package/components/ScriptEditor.svelte

@@ -36,7 +36,7 @@ import { triggerableByAI } from '../actions/triggerableByAI.svelte';
 import AssetsDropdownButton from './assets/AssetsDropdownButton.svelte';
 import { assetEq } from './assets/lib';
 import { editor as meditor } from 'monaco-editor';
-let { schema = $bindable(), code = $bindable(), path, lang, kind = undefined, template = 'script', tag, fixedOverflowWidgets = true, noSyncFromGithub = false, editor = $bindable(undefined), diffEditor = $bindable(undefined), collabMode = false, edit = true, noHistory = false, saveToWorkspace = false, watchChanges = false, customUi = undefined, args = $bindable(), selectedTab = $bindable('main'), hasPreprocessor = $bindable(false), captureTable = $bindable(undefined), showCaptures = true, stablePathForCaptures = '', lastSavedCode = undefined, lastDeployedCode = undefined, disableAi = false, assets = $bindable(), editor_bar_right } = $props();
+let { schema = $bindable(), code = $bindable(), path, lang, kind = undefined, template = 'script', tag, fixedOverflowWidgets = true, noSyncFromGithub = false, editor = $bindable(undefined), diffEditor = $bindable(undefined), collabMode = false, edit = true, noHistory = false, saveToWorkspace = false, watchChanges = false, customUi = undefined, args = $bindable(), selectedTab = $bindable('main'), hasPreprocessor = $bindable(false), captureTable = $bindable(undefined), showCaptures = true, stablePathForCaptures = '', lastSavedCode = undefined, lastDeployedCode = undefined, disableAi = false, assets = $bindable(), editor_bar_right, enablePreprocessorSnippet = false } = $props();
 $effect.pre(() => {
     if (schema == undefined) {
         schema = emptySchema();
@@ -297,9 +297,9 @@ $effect(() => {
     };
     untrack(() => {
         aiChatManager.scriptEditorOptions = options;
-        aiChatManager.scriptEditorApplyCode = (code, applyAll = false) => {
+        aiChatManager.scriptEditorApplyCode = async (code, opts) => {
             hideDiffMode();
-            editor?.reviewAndApplyCode(code, applyAll);
+            await editor?.reviewAndApplyCode(code, opts);
         };
         aiChatManager.scriptEditorShowDiffMode = showDiffMode;
     });
@@ -492,6 +492,7 @@ $effect(() => {
 						automaticLayout={true}
 						{fixedOverflowWidgets}
 						{args}
+						{enablePreprocessorSnippet}
 					/>
 					<DiffEditor
 						className="h-full"

package/package/components/ScriptEditor.svelte.d.ts

@@ -35,6 +35,7 @@ interface Props {
     disableAi?: boolean;
     assets?: AssetWithAltAccessType[];
     editor_bar_right?: import('svelte').Snippet;
+    enablePreprocessorSnippet?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -74,6 +75,6 @@ declare const ScriptEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     setCollaborationMode: () => Promise<void>;
     disableCollaboration: () => void;
     updateArgs: (newArgs: Record<string, any>) => Promise<void>;
-}, "args" | "code" | "assets" | "schema" | "selectedTab" | "editor" | "diffEditor" | "hasPreprocessor" | "captureTable">;
+}, "args" | "code" | "assets" | "schema" | "editor" | "selectedTab" | "diffEditor" | "hasPreprocessor" | "captureTable">;
 type ScriptEditor = InstanceType<typeof ScriptEditor>;
 export default ScriptEditor;

package/package/components/ServiceLogsInner.svelte

@@ -12,7 +12,7 @@ import { copyToClipboard, scroll_into_view_if_needed_polyfill, truncateRev } fro
 import LogSnippetViewer from './LogSnippetViewer.svelte';
 import { Button, Drawer, DrawerContent } from './common';
 import ClipboardCopy from 'lucide-svelte/icons/clipboard-copy';
-import AnsiUp from 'ansi_up';
+import { AnsiUp } from 'ansi_up';
 import SplitPanesOrColumnOnMobile from './splitPanes/SplitPanesOrColumnOnMobile.svelte';
 import Select from './select/Select.svelte';
 import { goto } from '../navigation';

package/package/components/ShareModal.svelte.d.ts

@@ -16,7 +16,7 @@ declare const ShareModal: $$__sveltets_2_IsomorphicComponent<Record<string, neve
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
-    openDrawer: (newPath: string, kind_l: "resource" | "script" | "flow" | "app" | "variable" | "schedule" | "group_" | "raw_app" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger" | "postgres_trigger" | "mqtt_trigger" | "gcp_trigger" | "sqs_trigger") => Promise<void>;
+    openDrawer: (newPath: string, kind_l: "resource" | "script" | "flow" | "app" | "variable" | "schedule" | "group_" | "raw_app" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger" | "postgres_trigger" | "mqtt_trigger" | "gcp_trigger" | "sqs_trigger" | "email_trigger") => Promise<void>;
 }, "">;
 type ShareModal = InstanceType<typeof ShareModal>;
 export default ShareModal;

package/package/components/SimpleEditor.svelte

@@ -7,51 +7,6 @@
 	import '@codingame/monaco-vscode-standalone-css-language-features'
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
 	import '@codingame/monaco-vscode-standalone-html-language-features'
-	import {
-		editor as meditor,
-		KeyCode,
-		KeyMod,
-		Uri as mUri,
-		languages,
-		type IRange,
-		type IDisposable,
-		type IPosition
-	} from 'monaco-editor'
-
-	languages.typescript.javascriptDefaults.setCompilerOptions({
-		target: languages.typescript.ScriptTarget.Latest,
-		allowNonTsExtensions: true,
-		noSemanticValidation: false,
-		noLib: true,
-		moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
-	})
-	function setDiagnosticsOptions() {
-		languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-			noSemanticValidation: false,
-			noSyntaxValidation: false,
-			noSuggestionDiagnostics: false,
-			diagnosticCodesToIgnore: [1108]
-		})
-	}
-	setDiagnosticsOptions()
-	languages.json.jsonDefaults.setDiagnosticsOptions({
-		validate: true,
-		allowComments: false,
-		schemas: [],
-		enableSchemaRequest: true
-	})
-	languages.json.jsonDefaults.setModeConfiguration({
-		documentRangeFormattingEdits: false,
-		documentFormattingEdits: true,
-		hovers: true,
-		completionItems: true,
-		documentSymbols: true,
-		tokens: true,
-		colors: true,
-		foldingRanges: true,
-		selectionRanges: true,
-		diagnostics: true
-	})
 </script>
 
 <script lang="ts">import { BROWSER } from 'esm-env';
@@ -77,6 +32,8 @@ import { initVim } from './monaco_keybindings';
 import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte';
 import { editorPositionMap } from '../utils';
 import { langToExt } from '../editorLangUtils';
+import { editor as meditor, KeyCode, KeyMod, Uri as mUri, languages } from 'monaco-editor';
+import { setMonacoJavascriptOptions, setMonacoJsonOptions } from './monacoLanguagesOptions';
 // import { createConfiguredEditor } from 'vscode/monaco'
 // import type { IStandaloneCodeEditor } from 'vscode/vscode/vs/editor/standalone/browser/standaloneCodeEditor'
 let divEl = null;
@@ -247,30 +204,10 @@ $effect(() => {
 });
 let fontSize = $derived(small ? 12 : 14);
 async function loadMonaco() {
+    setMonacoJsonOptions();
+    setMonacoJavascriptOptions();
     await initializeVscode();
     initialized = true;
-    // if (lang === 'javascript') {
-    // 	languages.typescript.javascriptDefaults.setCompilerOptions({
-    // 		target: languages.typescript.ScriptTarget.Latest,
-    // 		allowNonTsExtensions: true,
-    // 		noSemanticValidation: false,
-    // 		noLib: true,
-    // 		moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
-    // 	})
-    // 	languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-    // 		noSemanticValidation: false,
-    // 		noSyntaxValidation: false,
-    // 		noSuggestionDiagnostics: false,
-    // 		diagnosticCodesToIgnore: [1108]
-    // 	})
-    // } else if (lang === 'json') {
-    // 	languages.json.jsonDefaults.setDiagnosticsOptions({
-    // 		validate: true,
-    // 		allowComments: false,
-    // 		schemas: [],
-    // 		enableSchemaRequest: true
-    // 	})
-    // }
     try {
         model = meditor.createModel(code ?? '', lang, mUri.parse(uri));
     }

package/package/components/StringTypeNarrowing.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">import { run } from 'svelte/legacy';
-import { computeKind } from '../utils';
+<script lang="ts">import { computeKind } from '../utils';
 import Label from './Label.svelte';
 import ResourceTypePicker from './ResourceTypePicker.svelte';
 import Toggle from './Toggle.svelte';
@@ -21,6 +20,7 @@ const FORMATS = [
     'uri',
     'uuid',
     'ipv4',
+    'ipv6',
     'yaml',
     'sql',
     // 'time',
@@ -38,21 +38,16 @@ const FIELD_SETTINGS = [
     ['Format', 'format'],
     ['Pattern', 'pattern']
 ];
-run(() => {
+$effect(() => {
     format =
         kind == 'resource' ? (resource != undefined ? `resource-${resource}` : 'resource') : format;
 });
-run(() => {
+$effect(() => {
     pattern = patternStr == '' ? undefined : patternStr;
 });
-run(() => {
+$effect(() => {
     contentEncoding = kind == 'base64' ? 'base64' : undefined;
 });
-run(() => {
-    if (format == 'email') {
-        pattern = '^[\\w-+.]+@([\\w-]+\\.)+[\\w-]{2,63}$';
-    }
-});
 function add() {
     if (enumLabels === undefined) {
         enumLabels = {};

package/package/components/TemplateEditor.svelte

@@ -1,19 +1,5 @@
 <script module>
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
-
-	languages.typescript.javascriptDefaults.setCompilerOptions({
-		target: languages.typescript.ScriptTarget.Latest,
-		allowNonTsExtensions: true,
-		noSemanticValidation: false,
-		noLib: true,
-		moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
-	})
-	languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-		noSemanticValidation: false,
-		noSyntaxValidation: false,
-		noSuggestionDiagnostics: false,
-		diagnosticCodesToIgnore: [1108]
-	})
 </script>
 
 <script lang="ts">import { BROWSER } from 'esm-env';
@@ -28,6 +14,7 @@ import { writable } from 'svelte/store';
 import { initializeVscode } from './vscode';
 import EditorTheme from './EditorTheme.svelte';
 import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte';
+import { setMonacoJsonOptions } from './monacoLanguagesOptions';
 export const conf = {
     wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,
     comments: {
@@ -381,9 +368,8 @@ let initialized = false;
 let jsLoader = undefined;
 let timeoutModel = undefined;
 async function loadMonaco() {
-    console.log('init template');
+    setMonacoJsonOptions();
     await initializeVscode('templateEditor');
-    console.log('initialized');
     initialized = true;
     languages.register({ id: 'template' });
     // Register a tokens provider for the language

package/package/components/TimeAgo.svelte

@@ -4,8 +4,8 @@ import { onDestroy, onMount } from 'svelte';
 export let date;
 export let agoOnlyIfRecent = false;
 export let noDate = false;
+export let isRecent = true;
 let computedTimeAgo = undefined;
-let isRecent = true;
 let interval;
 $: date && computeDate();
 onMount(() => {

package/package/components/TimeAgo.svelte.d.ts

@@ -15,6 +15,7 @@ declare const TimeAgo: $$__sveltets_2_IsomorphicComponent<{
     date: string;
     agoOnlyIfRecent?: boolean;
     noDate?: boolean;
+    isRecent?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/package/components/Toggle.svelte

@@ -26,6 +26,7 @@ export let textDisabled = false;
 	class="{$$props.class || ''} z-auto flex flex-row items-center duration-50 {disabled
 		? 'grayscale opacity-50'
 		: 'cursor-pointer'}"
+	title={options?.title}
 >
 	{#if Boolean(options?.left)}
 		<span
@@ -92,7 +93,7 @@ export let textDisabled = false;
 			class={twMerge(
 				'ml-2 font-medium duration-50 select-none',
 				bothOptions || textDisabled ? (checked ? 'text-primary' : 'text-disabled') : 'text-primary',
-				size === 'xs' || size === '2sm' ? 'text-xs' : 'text-sm',
+				size === 'xs' || size === '2sm' ? 'text-xs' : size === '2xs' ? 'text-xs' : 'text-sm',
 				textClass
 			)}
 			style={textStyle}

package/package/components/Toggle.svelte.d.ts

@@ -19,6 +19,7 @@ declare const Toggle: $$__sveltets_2_IsomorphicComponent<{
         right?: string;
         rightTooltip?: string;
         rightDocumentationLink?: string;
+        title?: string;
     } | undefined;
     checked?: boolean | undefined;
     disabled?: boolean | undefined;
@@ -33,7 +34,7 @@ declare const Toggle: $$__sveltets_2_IsomorphicComponent<{
     size?: "sm" | "xs" | "2xs" | "2sm" | undefined;
     textDisabled?: boolean | undefined;
 }, {
-    click: MouseEvent;
+    click: PointerEvent;
     focus: FocusEvent;
     change: CustomEvent<boolean>;
 } & {

package/package/components/WorkerRepl.svelte

@@ -37,7 +37,7 @@ let homeDirectory = '~';
 let pendingsJobs = $state([]);
 let loadingPendingJobs = $state(false);
 let isCancelingJob = $state(false);
-let prompt = $derived(`$-${working_directory === '/' ? '/' : working_directory.split('/').at(-1)} `);
+let prompt = $derived(`$-${working_directory === '/' ? '/' : working_directory.split('/').pop()} `);
 let codeObj = $state(undefined);
 function getNewWorkingDirectoryPath(currentDir, newPath) {
     if (newPath.startsWith('/') || newPath.startsWith('~')) {

package/package/components/apps/components/display/AppNavbarItem.svelte

@@ -9,6 +9,7 @@ import { loadIcon } from '../icon';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import { twMerge } from 'tailwind-merge';
 import ResolveNavbarItemPath from './ResolveNavbarItemPath.svelte';
+import { urlParamsToObject } from '../../../../utils';
 let { navbarItem, id, borderColor = undefined, index, output = $bindable(), orientation = undefined } = $props();
 let icon = $state();
 async function handleIcon() {
@@ -47,7 +48,7 @@ function getButtonProps(resolvedPath) {
                 const queryParams = url.search;
                 const hash = url.hash;
                 replaceStateFn?.(`${window.location.pathname}${queryParams}${hash}`);
-                $worldStore.outputsById['ctx'].query.set(Object.fromEntries(new URLSearchParams(queryParams).entries()));
+                $worldStore.outputsById['ctx'].query.set(urlParamsToObject(new URLSearchParams(queryParams)));
                 $worldStore.outputsById['ctx'].hash.set(hash.substring(1));
                 $selected = resolvedPath === extractPathDetails() ? resolvedPath : undefined;
             },

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

@@ -17,7 +17,7 @@ import { twMerge } from 'tailwind-merge';
 import { deepCloneWithFunctions, initCss } from '../../../utils';
 import ResolveStyle from '../../helpers/ResolveStyle.svelte';
 import AppAggridTableActions from './AppAggridTableActions.svelte';
-import { cellRendererFactory, defaultCellRenderer } from './utils';
+import { cellRendererFactory, transformColumnDefs } from './utils';
 import Popover from '../../../../Popover.svelte';
 import { Button } from '../../../../common';
 import InputValue from '../../helpers/InputValue.svelte';
@@ -217,6 +217,12 @@ const tableActionsFactory = cellRendererFactory((c, p) => {
             taComponent.props.rowIndex = params.node.rowIndex ?? 0;
             taComponent.props.row = params.data;
             taComponent.props.p = params;
+            const nextActions = computedOrder
+                ? computedOrder
+                    .map((key) => actions?.find((a) => a.id === key))
+                    .filter(Boolean)
+                : actions;
+            taComponent.props.actions = nextActions;
         }
     };
 });
@@ -229,31 +235,21 @@ function mountGrid() {
     // console.log(resolvedConfig?.extraConfig)
     if (eGui) {
         try {
-            let columnDefs = Array.isArray(resolvedConfig?.columnDefs) && resolvedConfig.columnDefs.every(isObject)
-                ? [...resolvedConfig?.columnDefs] // Clone to avoid direct mutation
-                : [];
-            // Add the action column if actions are defined
-            if (actions && actions.length > 0) {
-                columnDefs.push({
-                    headerName: resolvedConfig?.customActionsHeader
-                        ? resolvedConfig?.customActionsHeader
-                        : 'Actions',
-                    cellRenderer: tableActionsFactory,
-                    autoHeight: true,
-                    cellStyle: { textAlign: 'center' },
-                    cellClass: 'grid-cell-centered',
-                    ...(!resolvedConfig?.wrapActions ? { minWidth: 130 * actions?.length } : {})
-                });
-            }
+            const agColumnDefs = transformColumnDefs({
+                columnDefs: Array.isArray(resolvedConfig?.columnDefs) && resolvedConfig.columnDefs.every(isObject)
+                    ? [...resolvedConfig?.columnDefs]
+                    : [],
+                actions,
+                customActionsHeader: resolvedConfig?.customActionsHeader,
+                wrapActions: resolvedConfig?.wrapActions,
+                tableActionsFactory,
+                onInvalidColumnDefs: (errors) => {
+                    sendUserToast(`Invalid columnDefs: ${errors.join('\n')}`, true);
+                }
+            });
             createGrid(eGui, {
                 rowData: value,
-                columnDefs: columnDefs.map((fields) => {
-                    let cr = defaultCellRenderer(fields.cellRendererType);
-                    return {
-                        ...fields,
-                        ...(cr ? { cellRenderer: cr } : {})
-                    };
-                }),
+                columnDefs: agColumnDefs,
                 pagination: resolvedConfig?.pagination,
                 paginationAutoPageSize: resolvedConfig?.pagination,
                 suppressPaginationPanel: true,
@@ -377,31 +373,21 @@ function updateValue() {
 }
 function updateOptions() {
     try {
-        const columnDefs = Array.isArray(resolvedConfig?.columnDefs) && resolvedConfig.columnDefs.every(isObject)
-            ? [...resolvedConfig?.columnDefs] // Clone to avoid direct mutation
-            : [];
-        // Add the action column if actions are defined
-        if (actions && actions.length > 0) {
-            columnDefs.push({
-                headerName: resolvedConfig?.customActionsHeader
-                    ? resolvedConfig?.customActionsHeader
-                    : 'Actions',
-                cellRenderer: tableActionsFactory,
-                autoHeight: true,
-                cellStyle: { textAlign: 'center' },
-                cellClass: 'grid-cell-centered',
-                ...(!resolvedConfig?.wrapActions ? { minWidth: 130 * actions?.length } : {})
-            });
-        }
+        const agColumnDefs = transformColumnDefs({
+            columnDefs: Array.isArray(resolvedConfig?.columnDefs) && resolvedConfig.columnDefs.every(isObject)
+                ? [...resolvedConfig?.columnDefs]
+                : [],
+            actions,
+            customActionsHeader: resolvedConfig?.customActionsHeader,
+            wrapActions: resolvedConfig?.wrapActions,
+            tableActionsFactory,
+            onInvalidColumnDefs: (errors) => {
+                sendUserToast(`Invalid columnDefs: ${errors.join('\n')}`, true);
+            }
+        });
         api?.updateGridOptions({
             rowData: value,
-            columnDefs: columnDefs.map((fields) => {
-                let cr = defaultCellRenderer(fields.cellRendererType);
-                return {
-                    ...fields,
-                    ...(cr ? { cellRenderer: cr } : {})
-                };
-            }),
+            columnDefs: agColumnDefs,
             pagination: resolvedConfig?.pagination,
             paginationAutoPageSize: resolvedConfig?.pagination,
             suppressPaginationPanel: true,
@@ -421,6 +407,10 @@ function updateOptions() {
                 ...resolvedConfig?.extraConfig?.['defaultColDef']
             }
         });
+        // Force refresh to re-render cell renderers after actions change
+        api?.refreshCells({ force: true });
+        // Force complete redraw to clear stale inline styles
+        api?.redrawRows();
     }
     catch (e) {
         console.error(e);
@@ -507,7 +497,13 @@ $effect(() => {
 	bind:loading
 	hideRefreshButton={true}
 >
-	<SyncColumnDefs {id} columnDefs={resolvedConfig.columnDefs} {result}>
+	<SyncColumnDefs
+		{id}
+		columnDefs={resolvedConfig.columnDefs}
+		{result}
+		actionsPresent={Array.isArray(actions) && actions.length > 0}
+		customActionsHeader={resolvedConfig?.customActionsHeader}
+	>
 		<div
 			class={twMerge(
 				'flex flex-col h-full component-wrapper divide-y',