windmill-components 1.82.2 → 1.82.4

package/components/apps/editor/AppEditor.svelte

@@ -27,6 +27,8 @@ import ItemPicker from '../../ItemPicker.svelte';
 import VariableEditor from '../../VariableEditor.svelte';
 import { SecondaryMenu } from './settingsPanel/secondaryMenu';
 import { Component, Paintbrush, Plus } from 'lucide-svelte';
+import { findGridItem, findGridItemParentGrid } from './appUtils';
+import { findItemsById } from '../svelte-grid/utils/matrix';
 export let app;
 export let path;
 export let initialMode = 'dnd';
@@ -62,7 +64,7 @@ setContext('AppViewerContext', {
     mode,
     connectingInput,
     breakpoint,
-    runnableComponents,
+    runnableComponents: writable({}),
     appPath: path,
     workspace: $workspaceStore ?? '',
     onchange: () => saveDraft(),
@@ -77,13 +79,14 @@ setContext('AppViewerContext', {
     parentWidth: writable(0),
     state: writable({}),
     componentControl: writable({}),
-    hoverStore: writable(undefined)
+    hoverStore: writable(undefined),
+    allIdsInPath: writable([])
 });
 setContext('AppEditorContext', {
     history,
     pickVariableCallback,
     ontextfocus: writable(undefined),
-    movingcomponent: writable(undefined),
+    movingcomponents: writable(undefined),
     selectedComponentInEditor: writable(undefined)
 });
 let timeout = undefined;
@@ -110,11 +113,36 @@ function hashchange(e) {
 $: previewing = $mode === 'preview';
 $: width = $breakpoint === 'sm' ? 'min-w-[400px] max-w-[656px]' : 'min-w-[710px] w-full';
 let selectedTab = 'insert';
-$: if ($selectedComponent) {
+let befSelected = undefined;
+$: if ($selectedComponent?.[0] != befSelected) {
+    befSelected = $selectedComponent?.[0];
     selectedTab = 'settings';
-}
-else {
-    selectedTab = 'insert';
+    if (befSelected) {
+        if (!['ctx', 'state'].includes(befSelected) && !befSelected?.startsWith('bg_')) {
+            let item = findGridItem($appStore, befSelected);
+            if (item?.data.type === 'containercomponent') {
+                $focusedGrid = {
+                    parentComponentId: befSelected,
+                    subGridIndex: 0
+                };
+            }
+            else {
+                let subgrid = findGridItemParentGrid($appStore, befSelected);
+                if (subgrid) {
+                    try {
+                        $focusedGrid = {
+                            parentComponentId: subgrid.split('-')[0],
+                            subGridIndex: parseInt(subgrid.split('-')[1])
+                        };
+                    }
+                    catch { }
+                }
+                else {
+                    $focusedGrid = undefined;
+                }
+            }
+        }
+    }
 }
 let itemPicker = undefined;
 $: if ($pickVariableCallback) {
@@ -185,7 +213,7 @@ let variableEditor = undefined;
 											{#if $appStore.grid}
 												<ComponentNavigation />
 
-												<div on:pointerdown|stopPropagation class={width}>
+												<div on:pointerdown|stopPropagation class={twMerge(width, 'mx-auto')}>
 													<GridEditor {policy} />
 												</div>
 
@@ -208,7 +236,6 @@ let variableEditor = undefined;
 								<Tab value="insert" size="xs">
 									<div class="m-1 center-center gap-1">
 										<Plus size={18} />
-										<span>Insert</span>
 									</div>
 								</Tab>
 								<Tab value="settings" size="xs">
@@ -220,7 +247,6 @@ let variableEditor = undefined;
 								<Tab value="css" size="xs">
 									<div class="m-1 center-center gap-1">
 										<Paintbrush size={18} />
-										<span>Styling</span>
 									</div>
 								</Tab>
 								<div slot="content" class="h-full overflow-y-auto">

package/components/apps/editor/AppEditorHeader.svelte

@@ -177,6 +177,11 @@ let lock = false;
 function onKeyDown(event) {
     if (lock)
         return;
+    let classes = event.target?.['className'];
+    if ((typeof classes === 'string' && classes.includes('inputarea')) ||
+        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
+        return;
+    }
     lock = true;
     switch (event.key) {
         case 'Z':

package/components/apps/editor/AppPreview.svelte

@@ -10,6 +10,8 @@ import { Component } from './component';
 import { twMerge } from 'tailwind-merge';
 import { columnConfiguration } from '../gridUtils';
 import { HiddenComponent } from '../components';
+import { deepEqual } from 'fast-equals';
+import { dfs } from './appUtils';
 export let app;
 export let appPath;
 export let breakpoint;
@@ -28,7 +30,7 @@ const connectingInput = writable({
     input: undefined,
     hoveredComponent: undefined
 });
-const runnableComponents = writable({});
+const allIdsInPath = writable([]);
 const parentWidth = writable(0);
 setContext('AppViewerContext', {
     worldStore: buildWorld(context),
@@ -38,7 +40,7 @@ setContext('AppViewerContext', {
     mode,
     connectingInput,
     breakpoint,
-    runnableComponents,
+    runnableComponents: writable({}),
     appPath,
     workspace,
     onchange: undefined,
@@ -53,13 +55,21 @@ setContext('AppViewerContext', {
     parentWidth,
     state: writable({}),
     componentControl: writable({}),
-    hoverStore: writable(undefined)
+    hoverStore: writable(undefined),
+    allIdsInPath
 });
 let ncontext = context;
 function hashchange(e) {
     ncontext.hash = e.newURL.split('#')[1];
     ncontext = ncontext;
 }
+let previousSelectedIds = undefined;
+$: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
+    previousSelectedIds = $selectedComponent;
+    $allIdsInPath = ($selectedComponent ?? [])
+        .flatMap((id) => dfs(app.grid, id, app.subgrids ?? {}))
+        .filter((x) => x != undefined);
+}
 $: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full ';
 $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : '';
 </script>
@@ -100,7 +110,7 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 		>
 			<div>
 				<GridViewer
-					onTopId={$selectedComponent}
+					allIdsInPath={$allIdsInPath}
 					items={app.grid}
 					let:dataItem
 					rowHeight={36}
@@ -110,7 +120,7 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
 						class={'h-full w-full center-center'}
-						on:pointerdown={() => ($selectedComponent = dataItem.id)}
+						on:pointerdown={() => ($selectedComponent = [dataItem.id])}
 					>
 						<Component render={true} component={dataItem.data} selected={false} locked={true} />
 					</div>
@@ -141,6 +151,8 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 				inlineScript={script.inlineScript}
 				name={script.name}
 				fields={script.fields}
+				doNotRecomputeOnInputChanged={script.doNotRecomputeOnInputChanged ?? false}
+				recomputableByRefreshButton={script.autoRefresh ?? false}
 			/>
 		{/if}
 	{/each}

package/components/apps/editor/ComponentHeader.svelte

@@ -21,6 +21,7 @@ function openDebugRuns() {
 
 {#if selected || hover}
 	<span
+		on:mousedown|stopPropagation|capture
 		draggable="false"
 		title={`Id: ${component.id}`}
 		class={twMerge(

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

@@ -8,8 +8,8 @@ declare const __propDef: {
         hover?: boolean | undefined;
     };
     events: {
-        pointerdown: PointerEvent;
         mousedown: MouseEvent;
+        pointerdown: PointerEvent;
         expand: CustomEvent<any>;
         lock: CustomEvent<any>;
     } & {

package/components/apps/editor/GridEditor.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext, afterUpdate } from 'svelte';
+<script>import { getContext } from 'svelte';
 import { classNames } from '../../../utils';
 import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
 import { twMerge } from 'tailwind-merge';
@@ -6,12 +6,20 @@ import RecomputeAllComponents from './RecomputeAllComponents.svelte';
 import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
 import Component from './component/Component.svelte';
 import { push } from '../../../history';
-import { expandGriditem, findGridItem } from './appUtils';
+import { dfs, expandGriditem, findGridItem } from './appUtils';
 import Grid from '../svelte-grid/Grid.svelte';
-import Toggle from '../../Toggle.svelte';
+import { selectId } from '../utils';
+import { deepEqual } from 'fast-equals';
 export let policy;
-const { selectedComponent, app, mode, connectingInput, runnableComponents, summary, focusedGrid, parentWidth, breakpoint } = getContext('AppViewerContext');
+const { selectedComponent, app, mode, connectingInput, runnableComponents, summary, focusedGrid, parentWidth, breakpoint, allIdsInPath } = getContext('AppViewerContext');
 const { history } = getContext('AppEditorContext');
+let previousSelectedIds = undefined;
+$: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
+    previousSelectedIds = $selectedComponent;
+    $allIdsInPath = ($selectedComponent ?? [])
+        .flatMap((id) => dfs($app.grid, id, $app.subgrids ?? {}))
+        .filter((x) => x != undefined);
+}
 function removeGridElement(component) {
     if (component) {
         $app.grid = $app.grid.filter((gridComponent) => {
@@ -37,9 +45,9 @@ function removeGridElement(component) {
         $selectedComponent = undefined;
     }
 }
-function selectComponent(id) {
+function selectComponent(e, id) {
     if (!$connectingInput.opened) {
-        $selectedComponent = id;
+        selectId(e, id, selectedComponent, $app);
         if ($focusedGrid?.parentComponentId != id) {
             $focusedGrid = undefined;
         }
@@ -81,7 +89,8 @@ function selectComponent(id) {
 	>
 		<div class={!$focusedGrid && $mode !== 'preview' ? 'border-gray-400 border border-dashed' : ''}>
 			<Grid
-				onTopId={$selectedComponent}
+				allIdsInPath={$allIdsInPath}
+				selectedIds={$selectedComponent}
 				items={$app.grid}
 				on:redraw={(e) => {
 					push(history, $app)
@@ -109,16 +118,16 @@ function selectComponent(id) {
 				{/if}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<div
-					on:pointerdown={() => selectComponent(dataItem.id)}
+					on:pointerdown={(e) => selectComponent(e, dataItem.id)}
 					class={classNames(
 						'h-full w-full center-center',
-						$selectedComponent === dataItem.id ? 'active-grid-item' : ''
+						Boolean($selectedComponent?.includes(dataItem.id)) ? 'active-grid-item' : ''
 					)}
 				>
 					<Component
 						render={true}
 						component={dataItem.data}
-						selected={$selectedComponent === dataItem.id}
+						selected={Boolean($selectedComponent?.includes(dataItem.id))}
 						locked={isFixed(dataItem)}
 						on:delete={() => removeGridElement(dataItem.data)}
 						on:lock={() => {
@@ -130,7 +139,7 @@ function selectComponent(id) {
 						}}
 						on:expand={() => {
 							push(history, $app)
-							$selectedComponent = dataItem.id
+							$selectedComponent = [dataItem.id]
 							expandGriditem($app.grid, dataItem.id, $breakpoint)
 							$app = $app
 						}}
@@ -149,7 +158,8 @@ function selectComponent(id) {
 				inlineScript={script.inlineScript}
 				name={script.name}
 				fields={script.fields}
-				doNotRecomputeOnInputChanged={script.doNotRecomputeOnInputChanged}
+				doNotRecomputeOnInputChanged={script.doNotRecomputeOnInputChanged ?? false}
+				recomputableByRefreshButton={script.autoRefresh ?? false}
 			/>
 		{/if}
 	{/each}

package/components/apps/editor/GridViewer.svelte

@@ -8,7 +8,7 @@ export let rowHeight;
 export let cols;
 export let gap = [10, 10];
 export let throttleUpdate = 100;
-export let onTopId = undefined;
+export let allIdsInPath = undefined;
 export let containerWidth = undefined;
 export let parentWidth = undefined;
 let getComputedCols;
@@ -56,7 +56,7 @@ onMount(() => {
 <div class="svlt-grid-container" style="height: {containerHeight}px" bind:this={container}>
 	{#if xPerPx}
 		{#each items as item (item.id)}
-			{@const onTop = item.id == onTopId}
+			{@const onTop = allIdsInPath?.includes(item.id)}
 			{@const width =
 				Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) * xPerPx -
 				gapX * 2}

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

@@ -7,7 +7,7 @@ declare class __sveltets_Render<T> {
         cols: [number, number][];
         gap?: number[] | undefined;
         throttleUpdate?: number | undefined;
-        onTopId?: string | undefined;
+        allIdsInPath?: string[] | undefined;
         containerWidth?: number | undefined;
         parentWidth?: number | undefined;
     };

package/components/apps/editor/RecomputeAllComponents.svelte

@@ -13,7 +13,7 @@ $: !firstLoad &&
     $worldStore.initializedOutputs ==
         allItems($app.grid, $app.subgrids).length + $app.hiddenInlineScripts.length &&
     refresh();
-$: componentNumber = Object.keys($runnableComponents).length;
+$: componentNumber = Object.values($runnableComponents).filter((x) => x.autoRefresh).length;
 function onClick(stopAfterClear = true) {
     if (timeout) {
         clearInterval(timeout);
@@ -39,13 +39,10 @@ function refresh() {
     }
     loading = true;
     Promise.all(Object.keys($runnableComponents).map((id) => {
-        if (id.startsWith('bg_')) {
-            let index = parseInt(id.split('_')[1]);
-            if (!$app.hiddenInlineScripts[index]?.autoRefresh) {
-                return;
-            }
+        if (!$runnableComponents?.[id]?.autoRefresh) {
+            return;
         }
-        return $runnableComponents?.[id]?.();
+        return $runnableComponents?.[id]?.cb?.();
     })).finally(() => {
         loading = false;
     });
@@ -74,6 +71,7 @@ onMount(() => {
 
 <div class="flex items-center">
 	<Button
+		disabled={componentNumber == 0}
 		on:click={() => onClick()}
 		color={timeout ? 'blue' : 'light'}
 		variant={timeout ? 'contained' : 'border'}

package/components/apps/editor/SettingsPanel.svelte

@@ -10,9 +10,9 @@ import BackgroundScriptTriggerList from './settingsPanel/triggerLists/Background
 const { selectedComponent, app, stateId } = getContext('AppViewerContext');
 $: hiddenInlineScript = $app?.hiddenInlineScripts
     ?.map((x, i) => ({ script: x, index: i }))
-    .find(({ script, index }) => `bg_${index}` === $selectedComponent);
-$: componentSettings = findComponentSettings($app, $selectedComponent);
-$: tableActionSettings = findTableActionSettings($app, $selectedComponent);
+    .find(({ script, index }) => $selectedComponent?.includes(`bg_${index}`));
+$: componentSettings = findComponentSettings($app, $selectedComponent?.[0]);
+$: tableActionSettings = findTableActionSettings($app, $selectedComponent?.[0]);
 function findTableActionSettings(app, id) {
     return allItems(app.grid, app.subgrids)
         .map((x) => {
@@ -29,7 +29,7 @@ function findTableActionSettings(app, id) {
 }
 function findComponentSettings(app, id) {
     if (!id)
-        return;
+        return undefined;
     if (app?.grid) {
         const gridItem = app.grid.find((x) => x.data?.id === id);
         if (gridItem) {

package/components/apps/editor/SubGridEditor.svelte

@@ -7,6 +7,7 @@ import { expandGriditem, findGridItem } from './appUtils';
 import { push } from '../../../history';
 import Grid from '../svelte-grid/Grid.svelte';
 import GridViewer from './GridViewer.svelte';
+import { selectId } from '../utils';
 export let containerHeight = undefined;
 export let containerWidth = undefined;
 let classes = '';
@@ -19,16 +20,15 @@ export let visible = true;
 export let id;
 export let shouldHighlight = true;
 const dispatch = createEventDispatcher();
-const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth, breakpoint } = getContext('AppViewerContext');
+const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth, breakpoint, allIdsInPath } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
 $: highlight = id === $focusedGrid?.parentComponentId && shouldHighlight;
 const onpointerdown = (e) => {
     dispatch('focus');
 };
-function selectComponent(id) {
+function selectComponent(e, id) {
     if (!$connectingInput.opened) {
-        dispatch('focus');
-        $selectedComponent = id;
+        selectId(e, id, selectedComponent, $app);
     }
 }
 function lock(dataItem) {
@@ -60,6 +60,7 @@ let container = undefined;
 		{#if $mode !== 'preview'}
 			<div class={highlight ? 'border-gray-400  border border-dashed min-h-full' : ''}>
 				<Grid
+					allIdsInPath={$allIdsInPath}
 					items={$app.subgrids?.[subGridId] ?? []}
 					on:redraw={(e) => {
 						push(editorContext?.history, $app)
@@ -67,7 +68,7 @@ let container = undefined;
 							$app.subgrids[subGridId] = e.detail
 						}
 					}}
-					onTopId={$selectedComponent}
+					selectedIds={$selectedComponent}
 					let:dataItem
 					rowHeight={36}
 					cols={columnConfiguration}
@@ -94,17 +95,17 @@ let container = undefined;
 
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
-						on:pointerdown={() => selectComponent(dataItem.id)}
+						on:pointerdown={(e) => selectComponent(e, dataItem.id)}
 						class={classNames(
 							'h-full w-full center-center',
-							$selectedComponent === dataItem.id ? 'active-grid-item' : '',
+							$selectedComponent?.includes(dataItem.id) ? 'active-grid-item' : '',
 							'top-0'
 						)}
 					>
 						<Component
 							render={visible}
 							component={dataItem.data}
-							selected={$selectedComponent === dataItem.id}
+							selected={Boolean($selectedComponent?.includes(dataItem.id))}
 							locked={isFixed(dataItem)}
 							on:lock={() => lock(dataItem)}
 							on:expand={() => {
@@ -113,7 +114,7 @@ let container = undefined;
 								if (!parentGridItem) {
 									return
 								}
-								$selectedComponent = dataItem.id
+								$selectedComponent = [dataItem.id]
 								push(editorContext?.history, $app)
 
 								expandGriditem(
@@ -130,7 +131,7 @@ let container = undefined;
 			</div>
 		{:else}
 			<GridViewer
-				onTopId={$selectedComponent}
+				allIdsInPath={$allIdsInPath}
 				items={$app.subgrids?.[subGridId] ?? []}
 				let:dataItem
 				rowHeight={36}
@@ -141,13 +142,13 @@ let container = undefined;
 			>
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<div
-					on:pointerdown={() => selectComponent(dataItem.id)}
+					on:pointerdown|stopPropagation={(e) => selectComponent(e, dataItem.id)}
 					class={classNames('h-full w-full center-center', 'top-0')}
 				>
 					<Component
 						render={visible}
 						component={dataItem.data}
-						selected={$selectedComponent === dataItem.id}
+						selected={Boolean($selectedComponent?.includes(dataItem.id))}
 						locked={isFixed(dataItem)}
 					/>
 				</div>

package/components/apps/editor/appUtils.d.ts

@@ -3,6 +3,7 @@ import { components, type AppComponent, type BaseComponent } from './component';
 import type { Output, World } from '../rx';
 import type { FilledItem } from '../svelte-grid/types';
 import type { EvalAppInput, StaticAppInput } from '../inputType';
+export declare function dfs(grid: GridItem[], id: string, subgrids: Record<string, GridItem[]>): string[] | undefined;
 export declare function findGridItemParentGrid(app: App, id: string): string | undefined;
 export declare function allsubIds(app: App, parentId: string): string[];
 export declare function findGridItem(app: App, id: string): GridItem | undefined;

package/components/apps/editor/appUtils.js

@@ -3,6 +3,25 @@ import { ccomponents, components, getRecommendedDimensionsByComponent } from './
 import { gridColumns } from '../gridUtils';
 import { allItems } from '../utils';
 import gridHelp from '../svelte-grid/utils/helper';
+export function dfs(grid, id, subgrids) {
+    for (const item of grid) {
+        if (item.id === id) {
+            return [id];
+        }
+        else if (item.data.type == 'tablecomponent' && item.data.actionButtons.find((x) => x.id)) {
+            return [item.id, id];
+        }
+        else {
+            for (let i = 0; i < (item.data.numberOfSubgrids ?? 0); i++) {
+                const res = dfs(subgrids[`${item.id}-${i}`], id, subgrids);
+                if (res) {
+                    return [item.id, ...res];
+                }
+            }
+        }
+    }
+    return undefined;
+}
 function findGridItemById(root, subGrids, id) {
     for (const gridItem of allItems(root, subGrids)) {
         if (gridItem.id === id) {

package/components/apps/editor/component/Component.svelte

@@ -1,8 +1,6 @@
 <script>import { getContext } from 'svelte';
-import { Loader2 } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import ComponentHeader from '../ComponentHeader.svelte';
-import { ccomponents, components } from './components';
 import { AppBarChart, AppDisplayComponent, AppTable, AppText, AppButton, AppPieChart, AppSelect, AppCheckbox, AppTextInput, AppNumberInput, AppDateInput, AppForm, AppScatterChart, AppTimeseries, AppHtml, AppSliderInputs, AppFormButton, VegaLiteHtml, PlotlyHtml, AppRangeInput, AppTabs, AppIcon, AppCurrencyInput, AppDivider, AppFileInput, AppImage, AppContainer, AppAggridTable, AppDrawer, AppMap, AppSplitpanes, AppPdf } from '../../components';
 import AppMultiSelect from '../../components/inputs/AppMultiSelect.svelte';
 export let component;
@@ -11,8 +9,9 @@ export let locked = false;
 export let render;
 const { mode, app, errorByComponent, hoverStore } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
-const movingcomponent = editorContext?.movingcomponent;
-$: ismoving = movingcomponent != undefined && $mode == 'dnd' && $movingcomponent === component.id;
+const movingcomponents = editorContext?.movingcomponents;
+$: ismoving =
+    movingcomponents != undefined && $mode == 'dnd' && $movingcomponents?.includes(component.id);
 let initializing = undefined;
 let componentContainerHeight = 0;
 $: componentWithErrors = Object.values($errorByComponent).map((e) => e.componentId);
@@ -50,9 +49,11 @@ $: hasError = componentWithErrors.includes(component.id);
 			<button
 				class="border p-0.5 text-xs"
 				on:click={() => {
-					$movingcomponent = undefined
-				}}>Cancel move</button
+					$movingcomponents = undefined
+				}}
 			>
+				Cancel move
+			</button>
 		</div>
 	{/if}
 	<div
@@ -60,7 +61,6 @@ $: hasError = componentWithErrors.includes(component.id);
 			'h-full bg-white/40 outline-1',
 			$hoverStore === component.id && $mode !== 'preview' ? 'outline outline-blue-600' : '',
 			selected && $mode !== 'preview' ? 'outline outline-indigo-600' : '',
-			ccomponents[component.type].softWrap || hasError ? '' : 'overflow-auto',
 			$mode != 'preview' ? 'cursor-pointer' : '',
 			'relative z-auto',
 			$app.css?.['app']?.['component']?.class,
@@ -114,6 +114,7 @@ $: hasError = componentWithErrors.includes(component.id);
 		{:else if component.type === 'plotlycomponent'}
 			<PlotlyHtml
 				id={component.id}
+				configuration={component.configuration}
 				bind:initializing
 				componentInput={component.componentInput}
 				{render}
@@ -143,7 +144,7 @@ $: hasError = componentWithErrors.includes(component.id);
 				customCss={component.customCss}
 				bind:initializing
 				componentInput={component.componentInput}
-				bind:actionButtons={component.actionButtons}
+				actionButtons={component.actionButtons}
 				{render}
 			/>
 		{:else if component.type === 'aggridcomponent'}
@@ -233,6 +234,16 @@ $: hasError = componentWithErrors.includes(component.id);
 				customCss={component.customCss}
 				{render}
 			/>
+		{:else if component.type === 'textareainputcomponent'}
+			<AppTextInput
+				id={component.id}
+				verticalAlignment={component.verticalAlignment}
+				configuration={component.configuration}
+				customCss={component.customCss}
+				inputType="textarea"
+				appCssKey="textareainputcomponent"
+				{render}
+			/>
 		{:else if component.type === 'emailinputcomponent'}
 			<AppTextInput
 				verticalAlignment={component.verticalAlignment}

package/components/apps/editor/component/Component.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { type AppComponent } from './components';
+import type { AppComponent } from './components';
 declare const __propDef: {
     props: {
         component: AppComponent;