windmill-components 1.408.1 → 1.430.2

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

@@ -0,0 +1,13 @@
+import type { App } from '../types';
+export declare function computeWorkspaceS3FileInputPolicy(): {
+    allow_workspace_resource: boolean;
+    allowed_resources: never[];
+    allow_user_resources: boolean;
+    file_key_regex: string;
+};
+export declare function computeS3FileInputPolicy(s3Config: any, app: App): {
+    allow_workspace_resource: boolean;
+    allowed_resources: string[];
+    allow_user_resources: boolean;
+    file_key_regex: string;
+};

package/package/components/apps/editor/appUtilsS3.js

@@ -0,0 +1,65 @@
+import { collectOneOfFields } from './appUtils';
+function filenameExprToRegex(template) {
+    const filenameEscaped = template.replaceAll('${file.name}', '<file_name>'); // replace filename with placeholder
+    const escapedTemplate = filenameEscaped
+        .slice(1, -1) // remove quotes
+        .replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // escape regex special characters
+    const regexPattern = escapedTemplate.replaceAll('<file_name>', '[^/]+'); // replace filename placeholder with regex pattern
+    return `^${regexPattern}$`;
+}
+function staticToRegex(str) {
+    return `^${str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`;
+}
+function checkIfExprIsString(input) {
+    return /^(['"`])[^'"`]*\1$/g.test(input);
+}
+function checkIfEvalIsStringWithFilename(input) {
+    if (input.connections.length > 0) {
+        return false;
+    }
+    else {
+        return checkIfExprIsString(input.expr.replaceAll('${file.name}', ''));
+    }
+}
+function removeResourcePrefix(resource) {
+    return resource.replace(/^\$res:/, '');
+}
+export function computeWorkspaceS3FileInputPolicy() {
+    return {
+        allow_workspace_resource: true,
+        allowed_resources: [],
+        allow_user_resources: false,
+        file_key_regex: ''
+    };
+}
+export function computeS3FileInputPolicy(s3Config, app) {
+    const resourceInput = s3Config?.resource;
+    const pathTemplateInput = s3Config?.pathTemplate;
+    const allow_workspace_resource = !resourceInput || (resourceInput.type === 'static' && !resourceInput.value);
+    const allowed_resources = resourceInput
+        ? resourceInput.type === 'static'
+            ? resourceInput.value
+                ? [removeResourcePrefix(resourceInput.value)]
+                : []
+            : collectOneOfFields({
+                s3_resource: resourceInput
+            }, app).s3_resource?.map((s) => removeResourcePrefix(s)) ?? []
+        : [];
+    const allow_user_resources = (resourceInput?.type === 'evalv2' && resourceInput?.allowUserResources) ?? false;
+    let file_key_regex = '^.*$';
+    if (pathTemplateInput) {
+        if (pathTemplateInput.type === 'static') {
+            file_key_regex = staticToRegex(pathTemplateInput.value);
+        }
+        else if (pathTemplateInput.type === 'evalv2' &&
+            checkIfEvalIsStringWithFilename(pathTemplateInput)) {
+            file_key_regex = filenameExprToRegex(pathTemplateInput.expr);
+        }
+    }
+    return {
+        allow_workspace_resource,
+        allowed_resources,
+        allow_user_resources,
+        file_key_regex
+    };
+}

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

@@ -148,6 +148,7 @@ $: updateCache(componentDraggedId);
 		initializing ? 'overflow-hidden h-0' : '',
 		hidden && $mode === 'preview' ? 'hidden' : ''
 	)}
+	data-connection-button
 >
 	{#if locked && componentActive && $componentActive && moveMode === 'move' && componentDraggedId && componentDraggedId !== component.id && cachedAreOnTheSameSubgrid}
 		<div
@@ -215,10 +216,10 @@ $: updateCache(componentDraggedId);
 			$mode === 'dnd' ? 'bg-surface/40' : '',
 			$hoverStore === component.id && $mode !== 'preview'
 				? $connectingInput.opened
-					? 'outline outline-orange-600'
-					: 'outline outline-blue-600'
+					? 'outline outline-[#f8aa4b]'
+					: 'outline outline-blue-400'
 				: '',
-			selected && $mode !== 'preview' ? 'outline outline-indigo-600' : '',
+			selected && $mode !== 'preview' ? 'outline outline-blue-600' : '',
 			$mode != 'preview' ? 'cursor-pointer' : '',
 			'relative z-auto',
 			$app.css?.['app']?.['component']?.class,

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

@@ -1,6 +1,6 @@
 import type { IntRange } from '../../../../common';
 import type { NARROW_GRID_COLUMNS, WIDE_GRID_COLUMNS } from '../../gridUtils';
-import { BarChart4, Binary, FormInput, Inspect, List, Monitor, PieChart, Table2, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2, SlidersHorizontal, PlusSquare, ListOrdered, BoxSelect, Smile, DollarSign, SeparatorHorizontal, SeparatorVertical, Paperclip, Image, SidebarClose, MapPin, FlipHorizontal, FlipVertical, FileText, AtSignIcon, Split, Download, PanelLeft, PanelTopInactive, ListIcon, Heading1, FileBarChart, Menu, Network, Database, UploadCloud, AlertTriangle, Clock, CalendarClock, AppWindow, PanelTop, RefreshCw } from 'lucide-svelte';
+import { BarChart4, Binary, FormInput, Inspect, List, Monitor, PieChart, Table2, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2, SlidersHorizontal, PlusSquare, ListOrdered, BoxSelect, Smile, DollarSign, SeparatorHorizontal, SeparatorVertical, Paperclip, Image, SidebarClose, MapPin, FlipHorizontal, FlipVertical, FileText, AtSignIcon, Split, Download, PanelLeft, PanelTopInactive, Heading1, FileBarChart, Menu, Network, Database, UploadCloud, AlertTriangle, Clock, CalendarClock, AppWindow, PanelTop, RefreshCw } from 'lucide-svelte';
 import type { Aligned, BaseAppComponent, ComponentCustomCSS, GridItem, OneOfConfiguration, RichConfiguration, RichConfigurations, StaticRichConfigurations } from '../../types';
 import type { Size } from '../../svelte-grid/types';
 import type { AppInputSpec, EvalV2AppInput, InputConnectionEval, ResultAppInput, StaticAppInput, TemplateV2AppInput } from '../../inputType';
@@ -416,7 +416,7 @@ export declare const components: {
     };
     readonly listcomponent: {
         readonly name: "List";
-        readonly icon: typeof ListIcon;
+        readonly icon: typeof List;
         readonly documentationLink: "https://www.windmill.dev/docs/apps/app_configuration_settings/list";
         readonly dims: `1:${number}-1:${number}` | `1:${number}-2:${number}` | `1:${number}-5:${number}` | `1:${number}-6:${number}` | `1:${number}-3:${number}` | `1:${number}-11:${number}` | `1:${number}-9:${number}` | `1:${number}-4:${number}` | `1:${number}-7:${number}` | `1:${number}-10:${number}` | `1:${number}-12:${number}` | `1:${number}-8:${number}` | `2:${number}-1:${number}` | `2:${number}-2:${number}` | `2:${number}-5:${number}` | `2:${number}-6:${number}` | `2:${number}-3:${number}` | `2:${number}-11:${number}` | `2:${number}-9:${number}` | `2:${number}-4:${number}` | `2:${number}-7:${number}` | `2:${number}-10:${number}` | `2:${number}-12:${number}` | `2:${number}-8:${number}` | `3:${number}-1:${number}` | `3:${number}-2:${number}` | `3:${number}-5:${number}` | `3:${number}-6:${number}` | `3:${number}-3:${number}` | `3:${number}-11:${number}` | `3:${number}-9:${number}` | `3:${number}-4:${number}` | `3:${number}-7:${number}` | `3:${number}-10:${number}` | `3:${number}-12:${number}` | `3:${number}-8:${number}`;
         readonly customCss: {
@@ -1872,6 +1872,13 @@ export declare const components: {
         readonly initialData: {
             readonly configuration: {
                 readonly columnDefs: StaticAppInput;
+                readonly rowIdCol: {
+                    readonly type: "static";
+                    readonly fieldType: "text";
+                    readonly value: "";
+                    readonly placeholder: "id";
+                    readonly tooltip: "column id to fetch the row id from (leave empty to use an auto-generated id. Recommended to be set but must be unique to each row)";
+                };
                 readonly flex: {
                     readonly type: "static";
                     readonly fieldType: "boolean";
@@ -1957,6 +1964,13 @@ export declare const components: {
         readonly initialData: {
             readonly configuration: {
                 readonly columnDefs: StaticAppInput;
+                readonly rowIdCol: {
+                    readonly type: "static";
+                    readonly fieldType: "text";
+                    readonly value: "";
+                    readonly placeholder: "id";
+                    readonly tooltip: "column id to fetch the row id from (leave empty to use an auto-generated id. Recommended to be set but must be unique to each row)";
+                };
                 readonly flex: {
                     readonly type: "static";
                     readonly fieldType: "boolean";
@@ -2042,6 +2056,13 @@ export declare const components: {
         readonly initialData: {
             readonly configuration: {
                 readonly columnDefs: StaticAppInput;
+                readonly rowIdCol: {
+                    readonly type: "static";
+                    readonly fieldType: "text";
+                    readonly value: "";
+                    readonly placeholder: "id";
+                    readonly tooltip: "column id to fetch the row id from (leave empty to use an auto-generated id. Recommended to be set but must be unique to each row)";
+                };
                 readonly flex: {
                     readonly type: "static";
                     readonly fieldType: "boolean";
@@ -2133,6 +2154,13 @@ export declare const components: {
         readonly initialData: {
             readonly configuration: {
                 readonly columnDefs: StaticAppInput;
+                readonly rowIdCol: {
+                    readonly type: "static";
+                    readonly fieldType: "text";
+                    readonly value: "";
+                    readonly placeholder: "id";
+                    readonly tooltip: "column id to fetch the row id from (leave empty to use an auto-generated id. Recommended to be set but must be unique to each row)";
+                };
                 readonly flex: {
                     readonly type: "static";
                     readonly fieldType: "boolean";
@@ -3120,7 +3148,7 @@ export declare const components: {
     };
     readonly carousellistcomponent: {
         readonly name: "Carousel List";
-        readonly icon: typeof ListIcon;
+        readonly icon: typeof List;
         readonly documentationLink: "https://www.windmill.dev/docs/apps/app_configuration_settings/carousel";
         readonly dims: `1:${number}-1:${number}` | `1:${number}-2:${number}` | `1:${number}-5:${number}` | `1:${number}-6:${number}` | `1:${number}-3:${number}` | `1:${number}-11:${number}` | `1:${number}-9:${number}` | `1:${number}-4:${number}` | `1:${number}-7:${number}` | `1:${number}-10:${number}` | `1:${number}-12:${number}` | `1:${number}-8:${number}` | `2:${number}-1:${number}` | `2:${number}-2:${number}` | `2:${number}-5:${number}` | `2:${number}-6:${number}` | `2:${number}-3:${number}` | `2:${number}-11:${number}` | `2:${number}-9:${number}` | `2:${number}-4:${number}` | `2:${number}-7:${number}` | `2:${number}-10:${number}` | `2:${number}-12:${number}` | `2:${number}-8:${number}` | `3:${number}-1:${number}` | `3:${number}-2:${number}` | `3:${number}-5:${number}` | `3:${number}-6:${number}` | `3:${number}-3:${number}` | `3:${number}-11:${number}` | `3:${number}-9:${number}` | `3:${number}-4:${number}` | `3:${number}-7:${number}` | `3:${number}-10:${number}` | `3:${number}-12:${number}` | `3:${number}-8:${number}`;
         readonly customCss: {
@@ -3718,10 +3746,7 @@ export declare const components: {
                 readonly items: StaticAppInput;
                 readonly defaultValue: {
                     readonly type: "static";
-                    readonly value: {
-                        value: string;
-                        label: string;
-                    } | undefined;
+                    readonly value: any;
                     readonly fieldType: "object";
                 };
             };
@@ -4021,6 +4046,13 @@ export declare const components: {
                     };
                 };
                 readonly columnDefs: StaticAppInput;
+                readonly rowIdCol: {
+                    readonly type: "static";
+                    readonly fieldType: "text";
+                    readonly value: "";
+                    readonly placeholder: "id";
+                    readonly tooltip: "column id to fetch the row id from (leave empty to use an auto-generated id. Recommended to be set but must be unique to each row)";
+                };
                 readonly whereClause: {
                     readonly type: "static";
                     readonly fieldType: "text";

package/package/components/apps/editor/component/components.js

@@ -271,6 +271,13 @@ const aggridcomponentconst = {
                     { field: 'age', flex: 1 }
                 ]
             },
+            rowIdCol: {
+                type: 'static',
+                fieldType: 'text',
+                value: '',
+                placeholder: 'id',
+                tooltip: 'column id to fetch the row id from (leave empty to use an auto-generated id. Recommended to be set but must be unique to each row)'
+            },
             flex: {
                 type: 'static',
                 fieldType: 'boolean',
@@ -374,6 +381,13 @@ const aggridinfinitecomponentconst = {
                 subFieldType: 'ag-grid',
                 value: []
             },
+            rowIdCol: {
+                type: 'static',
+                fieldType: 'text',
+                value: '',
+                placeholder: 'id',
+                tooltip: 'column id to fetch the row id from (leave empty to use an auto-generated id. Recommended to be set but must be unique to each row)'
+            },
             flex: {
                 type: 'static',
                 fieldType: 'boolean',
@@ -1706,13 +1720,12 @@ This is a paragraph.
                 items: {
                     type: 'static',
                     fieldType: 'array',
-                    subFieldType: 'text',
+                    subFieldType: 'labeledselect',
                     value: ['Foo', 'Bar']
                 },
                 defaultItems: {
                     type: 'static',
-                    fieldType: 'array',
-                    subFieldType: 'text',
+                    fieldType: 'object',
                     value: []
                 },
                 placeholder: {
@@ -2884,10 +2897,7 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                     type: 'static',
                     fieldType: 'array',
                     subFieldType: 'labeledselect',
-                    value: [
-                        { value: 'foo', label: 'Foo' },
-                        { value: 'bar', label: 'Bar' }
-                    ]
+                    value: ['Foo', 'Bar']
                 },
                 defaultValue: {
                     type: 'static',
@@ -3253,6 +3263,13 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                     value: [],
                     loading: false
                 },
+                rowIdCol: {
+                    type: 'static',
+                    fieldType: 'text',
+                    value: '',
+                    placeholder: 'id',
+                    tooltip: 'column id to fetch the row id from (leave empty to use an auto-generated id. Recommended to be set but must be unique to each row)'
+                },
                 whereClause: {
                     type: 'static',
                     fieldType: 'text',

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

@@ -12,6 +12,7 @@ export let gridItem;
 export let first = false;
 export let nested = false;
 export let expanded = false;
+export let renderRec = true;
 const { connectingInput } = getContext('AppViewerContext');
 const name = getComponentNameById(gridItem.id);
 $: nameOverrides =
@@ -35,14 +36,22 @@ function getComponentNameById(componentId) {
 $: subGrids = Array.from({ length: gridItem.data?.numberOfSubgrids ?? 0 }).map((_, i) => `${gridItem.id}-${i}`);
 </script>
 
-<OutputHeader id={gridItem.id} name={getComponentNameById(gridItem.id)} {first} {nested}>
+<OutputHeader
+	render={renderRec}
+	let:render
+	id={gridItem.id}
+	name={getComponentNameById(gridItem.id)}
+	{first}
+	{nested}
+>
 	<ComponentOutputViewer
+		{render}
 		componentId={gridItem.id}
 		on:select={({ detail }) => {
 			connectOutput(connectingInput, gridItem?.data?.type, gridItem.data.id, detail)
 		}}
 	/>
-	<SubGridOutput {name} {nameOverrides} {expanded} {subGrids} parentId={gridItem.id} />
-	<TableActionsOutput {gridItem} />
-	<MenuItemsOutput {gridItem} />
+	<SubGridOutput {render} {name} {nameOverrides} {expanded} {subGrids} parentId={gridItem.id} />
+	<TableActionsOutput {render} {gridItem} />
+	<MenuItemsOutput {render} {gridItem} />
 </OutputHeader>

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

@@ -6,6 +6,7 @@ declare const __propDef: {
         first?: boolean | undefined;
         nested?: boolean | undefined;
         expanded?: boolean | undefined;
+        renderRec?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -4,6 +4,7 @@ import { recursivelyFilterKeyInJSON as recursivelyFilterInJSON } from '../appUti
 export let componentId;
 export let hasContent = false;
 export let suffix = '';
+export let render = true;
 const { worldStore, connectingInput } = getContext('AppViewerContext');
 const { search, hasResult } = getContext('ContextPanel');
 let object = {};
@@ -28,14 +29,18 @@ $: filtered = recursivelyFilterInJSON(object, $search, componentId);
 $: $hasResult[componentId] = Object.keys(filtered).length > 0;
 </script>
 
-{#if object != undefined && Object.keys(object).length > 0}
+{#if render && object != undefined && Object.keys(object).length > 0}
 	{#if $hasResult[componentId] || $search == ''}
-		<ObjectViewer
-			json={filtered}
-			on:select
-			topBrackets={false}
-			pureViewer={!$connectingInput.opened}
-		/>
+		<div class="pl-2 !cursor-pointer" data-connection-button>
+			<ObjectViewer
+				json={filtered}
+				on:select
+				topBrackets={false}
+				pureViewer={!$connectingInput.opened}
+				allowCopy={!$connectingInput.opened}
+				connecting={$connectingInput.opened}
+			/>
+		</div>
 	{:else if $search.length > 0}
 		<div class="text-xs pl-2 text-tertiary">No results</div>
 	{:else}

package/package/components/apps/editor/contextPanel/ComponentOutputViewer.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         componentId: string;
         hasContent?: boolean | undefined;
         suffix?: string | undefined;
+        render?: boolean | undefined;
     };
     events: {
         select: CustomEvent<any>;

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

@@ -1,5 +1,4 @@
-<script>import { classNames } from '../../../../utils';
-import { createEventDispatcher, getContext } from 'svelte';
+<script>import { createEventDispatcher, getContext } from 'svelte';
 import { connectInput } from '../appUtils';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
 import ComponentOutput from './ComponentOutput.svelte';
@@ -9,6 +8,8 @@ import OutputHeader from './components/OutputHeader.svelte';
 import { ClearableInput } from '../../../common';
 import DocLink from '../settingsPanel/DocLink.svelte';
 import HideButton from '../settingsPanel/HideButton.svelte';
+import AnimatedButton from '../../../common/button/AnimatedButton.svelte';
+import { twMerge } from 'tailwind-merge';
 const { connectingInput, app } = getContext('AppViewerContext');
 const { search } = getContext('ContextPanel');
 const dispatch = createEventDispatcher();
@@ -27,60 +28,77 @@ let hasState = false;
 			<DocLink docLink="https://www.windmill.dev/docs/apps/outputs" />
 		</div>
 	</svelte:fragment>
-	<div
-		class={classNames(
-			'bg-surface w-full h-full z-30 overflow-auto',
-			$connectingInput.opened
-				? 'border-blue-500 border-t-2 border-r-2 bg-blue-50/50 dark:bg-frost-900/50 z-50'
-				: ''
-		)}
+	<AnimatedButton
+		animate={$connectingInput.opened}
+		baseRadius="0px"
+		wrapperClasses="h-full w-full pt-2"
+		marginWidth="4px"
+		animationDuration="2s"
 	>
-		<div class="min-w-[150px]">
-			<div class="sticky z-10 top-0 left-0 w-full p-1.5 bg-surface">
-				<ClearableInput bind:value={$search} placeholder="Search outputs..." />
-			</div>
+		<div
+			class={twMerge(
+				'bg-surface w-full h-full z-30 overflow-auto',
+				$connectingInput.opened ? 'z-50 dark:bg-frost-900' : ''
+			)}
+			data-connection-button
+		>
+			<div class="min-w-[150px]">
+				<div class="sticky z-10 top-0 left-0 w-full p-1.5 bg-surface">
+					<ClearableInput bind:value={$search} placeholder="Search outputs..." />
+				</div>
 
-			<div class="flex flex-col gap-4">
-				<div>
-					<span class="text-xs font-semibold text-secondary p-2">State & Context</span>
+				<div class="flex flex-col gap-4">
+					<div>
+						<span class="text-xs font-semibold text-secondary p-2">State & Context</span>
 
-					<OutputHeader selectable={false} id={'ctx'} name={'App Context'} first color="blue">
-						<ComponentOutputViewer
-							componentId={'ctx'}
-							on:select={({ detail }) => {
-								$connectingInput = connectInput($connectingInput, 'ctx', detail)
-							}}
-						/>
-					</OutputHeader>
+						<OutputHeader
+							let:render
+							selectable={false}
+							id={'ctx'}
+							name={'App Context'}
+							first
+							color="blue"
+						>
+							<ComponentOutputViewer
+								{render}
+								componentId={'ctx'}
+								on:select={({ detail }) => {
+									$connectingInput = connectInput($connectingInput, 'ctx', detail)
+								}}
+							/>
+						</OutputHeader>
 
-					<OutputHeader
-						selectable={false}
-						id={'state'}
-						name={'State'}
-						color="blue"
-						disabled={!hasState}
-					>
-						<ComponentOutputViewer
-							bind:hasContent={hasState}
-							componentId={'state'}
-							on:select={({ detail }) => {
-								$connectingInput = connectInput($connectingInput, 'state', detail)
-							}}
-						/>
-					</OutputHeader>
-				</div>
+						<OutputHeader
+							let:render
+							selectable={false}
+							id={'state'}
+							name={'State'}
+							color="blue"
+							disabled={!hasState}
+						>
+							<ComponentOutputViewer
+								{render}
+								bind:hasContent={hasState}
+								componentId={'state'}
+								on:select={({ detail }) => {
+									$connectingInput = connectInput($connectingInput, 'state', detail)
+								}}
+							/>
+						</OutputHeader>
+					</div>
 
-				<div>
-					<span class="text-xs font-semibold text-secondary p-2">Components</span>
-					{#each $app.grid as gridItem, index (gridItem.id)}
-						<ComponentOutput {gridItem} first={index === 0} />
-					{/each}
-				</div>
-				<div>
-					<span class="text-xs font-semibold text-secondary p-2">Background runnables</span>
-					<BackgroundScriptsOutput />
+					<div>
+						<span class="text-xs font-semibold text-secondary p-2">Components</span>
+						{#each $app.grid as gridItem, index (gridItem.id)}
+							<ComponentOutput {gridItem} first={index === 0} />
+						{/each}
+					</div>
+					<div>
+						<span class="text-xs font-semibold text-secondary p-2">Background runnables</span>
+						<BackgroundScriptsOutput />
+					</div>
 				</div>
 			</div>
 		</div>
-	</div>
+	</AnimatedButton>
 </PanelSection>

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

@@ -7,6 +7,7 @@ export let parentId;
 export let expanded = false;
 export let subGrids;
 export let nameOverrides = undefined;
+export let render;
 const { app, connectingInput, worldStore } = getContext('AppViewerContext');
 let selected = 0;
 $: outputs = $worldStore?.outputsById[parentId];
@@ -29,7 +30,7 @@ function subscribeToOutput() {
 
 {#each subgridItems as { k, items }, index (k)}
 	<div class="ml-2 my-2">
-		{#if subGrids.length > 1}
+		{#if subGrids.length > 1 && render}
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
 			<div
@@ -59,6 +60,7 @@ function subscribeToOutput() {
 				{#if items.length > 0}
 					{#each items as subGridItem, index (subGridItem.id)}
 						<ComponentOutput
+							renderRec={render}
 							gridItem={subGridItem}
 							first={index === 0}
 							{expanded}

package/package/components/apps/editor/contextPanel/SubGridOutput.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         expanded?: boolean | undefined;
         subGrids: string[];
         nameOverrides?: string[] | undefined;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -8,8 +8,9 @@ export let name;
 export let first = false;
 </script>
 
-<OutputHeader renamable={false} selectable={true} {id} {name} color="blue" {first}>
+<OutputHeader let:render renamable={false} selectable={true} {id} {name} color="blue" {first}>
 	<ComponentOutputViewer
+		{render}
 		componentId={id}
 		on:select={({ detail }) => {
 			$connectingInput = connectInput($connectingInput, id, detail)

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

@@ -1,12 +1,13 @@
 <script>import Output from './Output.svelte';
 export let gridItem;
+export let render;
 </script>
 
 <div class="my-1">
 	{#if gridItem.data.type === 'menucomponent' && gridItem.data.menuItems.length > 0}
 		<div class="ml-2 border-l">
 			{#each gridItem.data.menuItems as action, index}
-				<Output id={action.id} first={index === 0} label="Menu item" />
+				<Output renderRec={render} id={action.id} first={index === 0} label="Menu item" />
 			{/each}
 		</div>
 	{/if}

package/package/components/apps/editor/contextPanel/components/MenuItemsOutput.svelte.d.ts

@@ -3,6 +3,7 @@ import type { GridItem } from '../../../types';
 declare const __propDef: {
     props: {
         gridItem: GridItem;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -6,10 +6,12 @@ const { connectingInput } = getContext('AppViewerContext');
 export let id;
 export let first = false;
 export let label;
+export let renderRec;
 </script>
 
-<OutputHeader renamable={false} {id} name={label} {first}>
+<OutputHeader render={renderRec} let:render renamable={false} {id} name={label} {first}>
 	<ComponentOutputViewer
+		{render}
 		componentId={id}
 		on:select={({ detail }) => {
 			$connectingInput = connectInput($connectingInput, id, detail)

package/package/components/apps/editor/contextPanel/components/Output.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         id: string;
         first?: boolean | undefined;
         label: string;
+        renderRec: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;