windmill-components 1.82.10 → 1.82.12

package/components/apps/editor/AppPreview.svelte

@@ -28,7 +28,6 @@ const connectingInput = writable({
     input: undefined,
     hoveredComponent: undefined
 });
-const runnableComponents = writable({});
 const parentWidth = writable(0);
 setContext('AppViewerContext', {
     worldStore: buildWorld(context),
@@ -38,7 +37,7 @@ setContext('AppViewerContext', {
     mode,
     connectingInput,
     breakpoint,
-    runnableComponents,
+    runnableComponents: writable({}),
     appPath,
     workspace,
     onchange: undefined,
@@ -100,7 +99,7 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 		>
 			<div>
 				<GridViewer
-					onTopId={$selectedComponent}
+					onTopId={$selectedComponent?.[0]}
 					items={app.grid}
 					let:dataItem
 					rowHeight={36}
@@ -110,7 +109,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 +140,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

@@ -8,7 +8,7 @@ import Component from './component/Component.svelte';
 import { push } from '../../../history';
 import { expandGriditem, findGridItem } from './appUtils';
 import Grid from '../svelte-grid/Grid.svelte';
-import Toggle from '../../Toggle.svelte';
+import { selectId } from '../utils';
 export let policy;
 const { selectedComponent, app, mode, connectingInput, runnableComponents, summary, focusedGrid, parentWidth, breakpoint } = getContext('AppViewerContext');
 const { history } = getContext('AppEditorContext');
@@ -37,9 +37,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 +81,7 @@ function selectComponent(id) {
 	>
 		<div class={!$focusedGrid && $mode !== 'preview' ? 'border-gray-400 border border-dashed' : ''}>
 			<Grid
-				onTopId={$selectedComponent}
+				selectedIds={$selectedComponent}
 				items={$app.grid}
 				on:redraw={(e) => {
 					push(history, $app)
@@ -109,16 +109,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 +130,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 +149,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/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) => {

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 = '';
@@ -25,10 +26,9 @@ $: 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) {
@@ -67,7 +67,7 @@ let container = undefined;
 							$app.subgrids[subGridId] = e.detail
 						}
 					}}
-					onTopId={$selectedComponent}
+					selectedIds={$selectedComponent}
 					let:dataItem
 					rowHeight={36}
 					cols={columnConfiguration}
@@ -94,17 +94,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 +113,7 @@ let container = undefined;
 								if (!parentGridItem) {
 									return
 								}
-								$selectedComponent = dataItem.id
+								$selectedComponent = [dataItem.id]
 								push(editorContext?.history, $app)
 
 								expandGriditem(
@@ -130,7 +130,7 @@ let container = undefined;
 			</div>
 		{:else}
 			<GridViewer
-				onTopId={$selectedComponent}
+				onTopId={$selectedComponent?.[0]}
 				items={$app.subgrids?.[subGridId] ?? []}
 				let:dataItem
 				rowHeight={36}
@@ -141,13 +141,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/component/Component.svelte

@@ -11,8 +11,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,7 +51,7 @@ $: hasError = componentWithErrors.includes(component.id);
 			<button
 				class="border p-0.5 text-xs"
 				on:click={() => {
-					$movingcomponent = undefined
+					$movingcomponents = undefined
 				}}>Cancel move</button
 			>
 		</div>

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

@@ -4,9 +4,9 @@ import { push } from '../../../../history';
 import { sendUserToast } from '../../../../utils';
 import { gridColumns } from '../../gridUtils';
 const { app, selectedComponent, worldStore, focusedGrid, componentControl } = getContext('AppViewerContext');
-const { history, movingcomponent } = getContext('AppEditorContext');
-let tempGridItem = undefined;
-let copiedGridItem = undefined;
+const { history, movingcomponents } = getContext('AppEditorContext');
+let tempGridItems = undefined;
+let copiedGridItems = undefined;
 function getSortedGridItemsOfChildren() {
     if (!$focusedGrid) {
         return $app.grid;
@@ -17,48 +17,48 @@ function getSortedGridItemsOfChildren() {
     return $app.subgrids[`${$focusedGrid.parentComponentId}-${$focusedGrid.subGridIndex}`] ?? [];
 }
 function getGridItems() {
-    if ($app.grid.find((item) => item.id === $selectedComponent)) {
+    if ($app.grid.find((item) => item.id === $selectedComponent?.[0])) {
         return $app.grid;
     }
     if (!$app.subgrids) {
         return [];
     }
-    return (Object.values($app.subgrids ?? {}).find((grid) => grid.find((item) => item.id === $selectedComponent)) ?? []);
+    return (Object.values($app.subgrids ?? {}).find((grid) => grid.find((item) => item.id === $selectedComponent?.[0])) ?? []);
 }
 function left(event) {
-    if (!$componentControl[$selectedComponent]?.left?.()) {
+    if (!$componentControl[$selectedComponent?.[0] ?? '']?.left?.()) {
         const sortedGridItems = getGridItems();
-        const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent);
+        const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent?.[0] ?? '');
         if (currentIndex !== -1 && currentIndex > 0) {
             const left = sortedGridItems[currentIndex - 1];
             if (left.data.type === 'tablecomponent' && left.data.actionButtons.length >= 1) {
-                $selectedComponent = left.data.actionButtons[left.data.actionButtons.length - 1].id;
+                $selectedComponent = [left.data.actionButtons[left.data.actionButtons.length - 1].id];
             }
             else {
-                $selectedComponent = left.id;
+                $selectedComponent = [left.id];
             }
         }
     }
     event.preventDefault();
 }
 function right(event) {
-    let r = $componentControl[$selectedComponent]?.right?.();
+    let r = $componentControl[$selectedComponent?.[0] ?? '']?.right?.();
     if (typeof r === 'string') {
-        $selectedComponent = r;
+        $selectedComponent = [r];
         r = $componentControl[r]?.right?.(true);
     }
     if (!r) {
         const sortedGridItems = getGridItems();
-        const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent);
+        const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent?.[0] ?? '');
         if (currentIndex !== -1 && currentIndex < sortedGridItems.length - 1) {
-            $selectedComponent = sortedGridItems[currentIndex + 1].id;
+            $selectedComponent = [sortedGridItems[currentIndex + 1].id];
         }
     }
     event.preventDefault();
 }
 function down(event) {
     if (!$focusedGrid) {
-        $selectedComponent = getSortedGridItemsOfChildren()[0]?.id;
+        $selectedComponent = [getSortedGridItemsOfChildren()[0]?.id];
         event.preventDefault();
     }
     else if ($app.subgrids) {
@@ -68,7 +68,7 @@ function down(event) {
             return;
         }
         if (subgrid) {
-            $selectedComponent = subgrid[0].id;
+            $selectedComponent = [subgrid[0].id];
         }
         event.preventDefault();
     }
@@ -81,9 +81,9 @@ function handleEscape(event) {
 function handleArrowUp(event) {
     if (!$selectedComponent)
         return;
-    let parentId = findGridItemParentGrid($app, $selectedComponent)?.split('-')[0];
+    let parentId = findGridItemParentGrid($app, $selectedComponent?.[0])?.split('-')[0];
     if (parentId) {
-        $selectedComponent = parentId;
+        $selectedComponent = [parentId];
     }
     else {
         $selectedComponent = undefined;
@@ -94,49 +94,58 @@ function handleCopy(event) {
     if (!$selectedComponent) {
         return;
     }
-    tempGridItem = undefined;
-    copiedGridItem = findGridItem($app, $selectedComponent);
+    tempGridItems = undefined;
+    copiedGridItems = $selectedComponent
+        .map((x) => findGridItem($app, x))
+        .filter((x) => x != undefined);
 }
 function handleCut(event) {
     if (!$selectedComponent) {
         return;
     }
-    $movingcomponent = $selectedComponent;
+    $movingcomponents = JSON.parse(JSON.stringify($selectedComponent));
     push(history, $app);
-    const gridItem = findGridItem($app, $selectedComponent);
-    copiedGridItem = gridItem;
-    if (!gridItem) {
+    let gridItems = $selectedComponent
+        .map((x) => findGridItem($app, x))
+        .filter((x) => x != undefined);
+    copiedGridItems = gridItems;
+    if (!gridItems) {
         return;
     }
     // Store the grid item in a temp variable so we can paste it later
-    tempGridItem = gridItem;
+    tempGridItems = gridItems;
 }
 function handlePaste(event) {
     push(history, $app);
-    $movingcomponent = undefined;
-    if (tempGridItem != undefined) {
-        if ($focusedGrid &&
-            getAllSubgridsAndComponentIds($app, tempGridItem.data)[0].includes(`${$focusedGrid.parentComponentId}-${$focusedGrid.subGridIndex}`)) {
-            sendUserToast('Cannot paste a component into itself', true);
-            return;
-        }
-        let parentGrid = findGridItemParentGrid($app, tempGridItem.id);
-        if (parentGrid) {
-            $app.subgrids &&
-                ($app.subgrids[parentGrid] = $app.subgrids[parentGrid].filter((item) => item.id !== tempGridItem?.id));
+    $movingcomponents = undefined;
+    if (tempGridItems != undefined) {
+        for (let tempGridItem of tempGridItems) {
+            if ($focusedGrid &&
+                getAllSubgridsAndComponentIds($app, tempGridItem.data)[0].includes(`${$focusedGrid.parentComponentId}-${$focusedGrid.subGridIndex}`)) {
+                sendUserToast('Cannot paste a component into itself', true);
+                return;
+            }
+            let parentGrid = findGridItemParentGrid($app, tempGridItem.id);
+            if (parentGrid) {
+                $app.subgrids &&
+                    ($app.subgrids[parentGrid] = $app.subgrids[parentGrid].filter((item) => item.id !== tempGridItem?.id));
+            }
+            else {
+                $app.grid = $app.grid.filter((item) => item.id !== tempGridItem?.id);
+            }
+            const gridItem = tempGridItem;
+            insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), $focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), tempGridItem.id);
         }
-        else {
-            $app.grid = $app.grid.filter((item) => item.id !== tempGridItem?.id);
+        copiedGridItems = tempGridItems;
+        $selectedComponent = tempGridItems.map((x) => x.id);
+        tempGridItems = undefined;
+    }
+    else if (copiedGridItems) {
+        let nitems = [];
+        for (let copiedGridItem of copiedGridItems) {
+            nitems.push(insertNewGridItem($app, (id) => ({ ...copiedGridItem.data, id }), $focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, copiedGridItem[column]]))));
         }
-        const gridItem = tempGridItem;
-        insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), $focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), tempGridItem.id);
-        copiedGridItem = tempGridItem;
-        $selectedComponent = tempGridItem.id;
-        tempGridItem = undefined;
-    }
-    else if (copiedGridItem) {
-        const gridItem = copiedGridItem;
-        $selectedComponent = insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), $focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])));
+        $selectedComponent = nitems.map((x) => x);
     }
     $worldStore = $worldStore;
     $app = $app;

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

@@ -13,7 +13,7 @@ function addComponent(appComponentType) {
     push(history, $app);
     $dirtyStore = true;
     const id = insertNewGridItem($app, appComponentFromType(appComponentType), $focusedGrid);
-    $selectedComponent = id;
+    $selectedComponent = [id];
     $app = $app;
     $worldStore = $worldStore;
 }

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

@@ -30,14 +30,14 @@ $: subGrids = Array.from({ length: gridItem.data.numberOfSubgrids ?? 0 }).map((_
 function onHeaderClick(manuallyOpen) {
     if (manuallyOpen) {
         if (parentId) {
-            $selectedComponent = parentId;
+            $selectedComponent = [parentId];
         }
         else {
             $selectedComponent = undefined;
         }
     }
     else {
-        $selectedComponent = gridItem.id;
+        $selectedComponent = [gridItem.id];
     }
 }
 </script>

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

@@ -9,14 +9,14 @@ export let first = false;
 function onHeaderClick(manuallyOpen) {
     if (manuallyOpen) {
         if (id) {
-            $selectedComponent = id;
+            $selectedComponent = [id];
         }
         else {
             $selectedComponent = undefined;
         }
     }
     else {
-        $selectedComponent = id;
+        $selectedComponent = [id];
     }
 }
 </script>

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

@@ -15,7 +15,10 @@ $: inSearch =
         ($hasResult[id] ||
             Object.entries($hasResult).some(([key, value]) => value && subids.includes(key)));
 $: open =
-    $expanded || subids.includes($selectedComponent ?? '') || $manuallyOpened[id] || inSearch;
+    $expanded ||
+        subids.some((x) => $selectedComponent?.includes(x)) ||
+        $manuallyOpened[id] ||
+        inSearch;
 const dispatch = createEventDispatcher();
 const hoverColor = {
     blue: 'hover:bg-blue-300 hover:text-blue-600',
@@ -52,7 +55,7 @@ const idClass = {
 		class={classNames(
 			'flex items-center justify-between p-1 cursor-pointer border-b gap-1 truncate',
 			hoverColor[color],
-			$selectedComponent == id ? openBackground[color] : 'bg-white',
+			$selectedComponent?.includes(id) ? openBackground[color] : 'bg-white',
 			first ? 'border-t' : '',
 			nested ? 'border-l' : ''
 		)}
@@ -64,7 +67,7 @@ const idClass = {
 		<div
 			class={classNames(
 				'text-2xs ml-0.5 font-bold px-2 py-0.5 rounded-sm',
-				$selectedComponent == id ? idClass[color] : ' bg-gray-100'
+				$selectedComponent?.includes(id) ? idClass[color] : ' bg-gray-100'
 			)}
 		>
 			{id}

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

@@ -163,7 +163,7 @@ function handleRefreshOn(refreshOn) {
 						btnClasses="!px-2 !py-1 !bg-gray-700 !text-white hover:!bg-gray-900"
 						on:click={async () => {
 							runLoading = true
-							await $runnableComponents[id]?.(!transformer ? inlineScript : undefined)
+							await $runnableComponents[id]?.cb?.(!transformer ? inlineScript : undefined)
 							runLoading = false
 						}}
 					>
@@ -199,7 +199,7 @@ function handleRefreshOn(refreshOn) {
 							inlineScript.content = editor?.getCode() ?? ''
 						}
 						runLoading = true
-						await $runnableComponents[id]?.(inlineScript)
+						await $runnableComponents[id]?.cb?.(inlineScript)
 						runLoading = false
 					}}
 					on:change={async (e) => {
@@ -222,7 +222,7 @@ function handleRefreshOn(refreshOn) {
 					bind:this={simpleEditor}
 					cmdEnterAction={async () => {
 						runLoading = true
-						await $runnableComponents[id]?.(!transformer ? inlineScript : undefined)
+						await $runnableComponents[id]?.cb?.(!transformer ? inlineScript : undefined)
 						runLoading = false
 					}}
 					class="h-full"

package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte

@@ -11,14 +11,14 @@ const { selectedComponentInEditor } = getContext('AppEditorContext');
 function selectScript(id) {
     $selectedComponentInEditor = id;
     if (!id.startsWith('unused-') || !id.startsWith('bg_')) {
-        $selectedComponent = $selectedComponentInEditor.split('_transformer')[0];
+        $selectedComponent = [$selectedComponentInEditor.split('_transformer')[0]];
     }
 }
 $: runnables = getAppScripts($app.grid, $app.subgrids);
 // When selected component changes, update selectedScriptComponentId
 $: if ($selectedComponent != $selectedComponentInEditor &&
     !$selectedComponentInEditor?.includes('_transformer')) {
-    $selectedComponentInEditor = $selectedComponent;
+    $selectedComponentInEditor = $selectedComponent?.[0];
 }
 function createBackgroundScript() {
     let index = 0;

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

@@ -266,6 +266,10 @@ $: componentSettings?.item?.data && ($app = $app);
 						<Kbd>&uparrow;</Kbd><Kbd>&rightarrow;</Kbd>
 						<Kbd>ESC</Kbd>
 					</div>
+					<div>
+						<span class="text-gray-600 text-xs mr-2">Add to selection:</span>
+						<Kbd>&DoubleUpArrow;</Kbd>+<Kbd>click</Kbd>
+					</div>
 				</div>
 			</PanelSection>
 		{/if}

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

@@ -24,7 +24,7 @@ function deleteComponent(cid) {
     components = components.filter((x) => x.id !== cid);
     $errorByComponent = clearErrorByComponentId(cid, $errorByComponent);
     $jobs = clearJobsByComponentId(cid, $jobs);
-    $selectedComponent = id;
+    $selectedComponent = [id];
     $app = $app;
 }
 </script>
@@ -49,10 +49,10 @@ function deleteComponent(cid) {
 			class={classNames(
 				'w-full text-xs font-bold gap-1 truncate py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
 				'bg-white border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-gray-700',
-				$selectedComponent === component.id ? 'outline outline-blue-500 bg-red-400' : ''
+				$selectedComponent?.includes(component.id) ? 'outline outline-blue-500 bg-red-400' : ''
 			)}
 			on:click={() => {
-				$selectedComponent = component.id
+				$selectedComponent = [component.id]
 			}}
 			on:keypress
 		>

package/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte

@@ -19,6 +19,6 @@ $: onLoad =
 	bind:inlineScript={runnable.inlineScript}
 	{onLoad}
 	{doNotRecomputeOnInputChanged}
-	id={$selectedComponent}
+	id={$selectedComponent?.[0]}
 	{onClick}
 />