windmill-components 1.377.7 → 1.379.2

package/package/components/apps/components/buttons/AppSchemaForm.svelte

@@ -94,20 +94,23 @@ function onDefaultChange() {
 		<div
 			class={twMerge('p-2 overflow-auto h-full', css?.container?.class, 'wm-schema-form')}
 			style={css?.container?.style}
-			on:pointerdown|stopPropagation={(e) =>
-				!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
 		>
-			<LightweightSchemaForm
-				defaultValues={resolvedConfig.defaultValues}
-				dynamicEnums={resolvedConfig.dynamicEnums}
-				schema={result}
-				bind:isValid={valid}
-				bind:args
-				bind:this={schemaForm}
-				displayType={Boolean(resolvedConfig.displayType)}
-				largeGap={Boolean(resolvedConfig.largeGap)}
-				{css}
-			/>
+			<div
+				on:pointerdown|stopPropagation={(e) =>
+					!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
+			>
+				<LightweightSchemaForm
+					defaultValues={resolvedConfig.defaultValues}
+					dynamicEnums={resolvedConfig.dynamicEnums}
+					schema={result}
+					bind:isValid={valid}
+					bind:args
+					bind:this={schemaForm}
+					displayType={Boolean(resolvedConfig.displayType)}
+					largeGap={Boolean(resolvedConfig.largeGap)}
+					{css}
+				/>
+			</div>
 		</div>
 	{:else}
 		<p class="m-2 italic">Empty form (no property)</p>

package/package/components/apps/components/display/AppJobIdLogComponent.svelte

@@ -84,7 +84,7 @@ $: if (resolvedConfig.jobId) {
 				duration={testJob?.['duration_ms']}
 				mem={testJob?.['mem_peak']}
 				content={testJob?.logs}
-				isLoading={testIsLoading}
+				isLoading={testIsLoading && testJob?.['running'] == false}
 				tag={testJob?.tag}
 			/>
 		</div>

package/package/components/apps/components/display/AppRecomputeAll.svelte

@@ -14,7 +14,7 @@ export let customCss = undefined;
 export let configuration;
 export let render;
 export let horizontalAlignment = undefined;
-const { app, worldStore } = getContext('AppViewerContext');
+const { app, worldStore, policy } = getContext('AppViewerContext');
 let resolvedConfig = initConfig(components['recomputeallcomponent'].initialData.configuration, configuration);
 initOutput($worldStore, id, {
     loading: undefined
@@ -45,7 +45,7 @@ let css = initCss($app.css?.recomputeallcomponent, customCss);
 <InitializeComponent {id} />
 
 <AlignWrapper {horizontalAlignment}>
-	{#if render}
+	{#if render && policy}
 		<RecomputeAllWrapper
 			containerClass={css?.container?.class}
 			containerStyle={css?.container?.style}

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

@@ -69,7 +69,11 @@ function saveEdit() {
 	{:else}
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div on:dblclick={toggleEdit}>
-			{value}
+			{#if typeof value == 'object'}
+				{JSON.stringify(value)}
+			{:else}
+				{value}
+			{/if}
 		</div>
 	{/if}
 </td>

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

@@ -18,8 +18,11 @@ function convertJSONToCSV(objArray) {
     for (let i = 0; i < objArray.length; i++) {
         let line = '';
         for (let j = 0; j < headers.length; j++) {
-            const value = objArray[i][headers[j]];
+            let value = objArray[i][headers[j]];
             line += j ? ',' : '';
+            if (typeof value != 'string') {
+                value = JSON.stringify(value);
+            }
             line += /[\",\n]/.test(value) ? '"' + value.replace(/"/g, '""') + '"' : value;
         }
         str += line + '\r\n';

package/package/components/apps/components/helpers/InputValue.svelte

@@ -20,10 +20,11 @@ const rowContext = getContext('RowWrapperContext');
 const groupContext = getContext('GroupContext');
 let previousConnectedValue = undefined;
 let previousConnectedValues = {};
+let groupStore = groupContext?.context;
 $: fullContext = {
     iter: iterContext ? $iterContext : undefined,
     row: rowContext ? $rowContext : undefined,
-    group: groupContext ? $groupContext : undefined
+    group: groupStore ? $groupStore : undefined
 };
 $: lastInput?.type == 'evalv2' &&
     !onDemandOnly &&
@@ -190,7 +191,7 @@ async function evalExpr(input, args) {
         return;
     try {
         const context = computeGlobalContext($worldStore, deepMergeWithPriority(fullContext, args ?? {}));
-        const r = await eval_like(input.expr, context, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents, false);
+        const r = await eval_like(input.expr, context, $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents, false, groupContext?.id);
         error = '';
         return r;
     }
@@ -207,7 +208,7 @@ async function getValue(input) {
         return;
     if ((input.type === 'template' || input.type == 'templatev2') && isCodeInjection(input.eval)) {
         try {
-            const r = await eval_like('`' + input.eval + '`', computeGlobalContext($worldStore, fullContext), $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents, false);
+            const r = await eval_like('`' + input.eval + '`', computeGlobalContext($worldStore, fullContext), $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents, false, groupContext?.id);
             error = '';
             return r;
         }

package/package/components/apps/components/helpers/RunnableComponent.svelte

@@ -196,8 +196,8 @@ async function executeComponent(noToast = false, inlineScriptOverride, setRunnab
             r = await eval_like(runnable.inlineScript?.content, computeGlobalContext($worldStore, {
                 iter: iterContext ? $iterContext : undefined,
                 row: rowContext ? $rowContext : undefined,
-                group: groupContext ? $groupContext : undefined
-            }), $state, isEditor, $componentControl, $worldStore, $runnableComponents, true);
+                group: groupContext ? get(groupContext.context) : undefined
+            }), $state, isEditor, $componentControl, $worldStore, $runnableComponents, true, groupContext?.id);
             await setResult(r, job);
             $state = $state;
         }
@@ -385,8 +385,9 @@ async function runTransformer(res) {
             const transformerResult = await eval_like(transformer.content, computeGlobalContext($worldStore, {
                 iter: iterContext ? $iterContext : undefined,
                 row: rowContext ? $rowContext : undefined,
+                group: groupContext ? get(groupContext.context) : undefined,
                 result: res
-            }), $state, isEditor, $componentControl, $worldStore, $runnableComponents, true);
+            }), $state, isEditor, $componentControl, $worldStore, $runnableComponents, true, groupContext?.id);
             return transformerResult;
         }
         catch (err) {

package/package/components/apps/components/helpers/eval.d.ts

@@ -19,6 +19,7 @@ export declare function eval_like(text: string, context: {} | undefined, state:
     showToast?: (message: string, error?: boolean) => void;
     waitJob?: (jobId: string) => void;
     askNewResource?: () => void;
+    setGroupValue?: (key: string, value: any) => void;
 }>, worldStore: World | undefined, runnableComponents: Record<string, {
     cb?: (() => void)[];
-}>, noReturn: boolean): Promise<any>;
+}>, noReturn: boolean, groupContextId: string | undefined): Promise<any>;

package/package/components/apps/components/helpers/eval.js

@@ -16,10 +16,10 @@ export function computeGlobalContext(world, extraContext = {}) {
 function create_context_function_template(eval_string, contextKeys, noReturn) {
     let hasReturnAsLastLine = noReturn || eval_string.split('\n').some((x) => x.startsWith('return '));
     return `
-return async function (context, state, goto, setTab, recompute, getAgGrid, setValue, setSelectedIndex, openModal, closeModal, open, close, validate, invalidate, validateAll, clearFiles, showToast, waitJob, askNewResource) {
+return async function (context, state, createProxy, goto, setTab, recompute, getAgGrid, setValue, setSelectedIndex, openModal, closeModal, open, close, validate, invalidate, validateAll, clearFiles, showToast, waitJob, askNewResource) {
 "use strict";
 ${contextKeys && contextKeys.length > 0
-        ? `let ${contextKeys.map((key) => ` ${key} = context['${key}']`)};`
+        ? `let ${contextKeys.map((key) => ` ${key} = createProxy('${key}', context['${key}'] ?? {})`)};`
         : ``}
 ${hasReturnAsLastLine
         ? eval_string
@@ -52,21 +52,52 @@ function hashCode(s) {
     }
     return hash;
 }
-export async function eval_like(text, context = {}, state, editor, controlComponents, worldStore, runnableComponents, noReturn) {
-    const proxiedState = new Proxy(state, {
-        set(target, key, value) {
-            if (typeof key !== 'string') {
-                throw new Error('Invalid key');
-            }
-            target[key] = value;
-            let o = worldStore?.newOutput('state', key, value);
-            o?.set(value, true);
-            return true;
+export async function eval_like(text, context = {}, state, editor, controlComponents, worldStore, runnableComponents, noReturn, groupContextId) {
+    const createProxy = (name, obj) => {
+        if (name == 'group' && groupContextId) {
+            return createGroupProxy(groupContextId, obj);
         }
-    });
+        return new Proxy(obj, {
+            set(target, key, value) {
+                if (name != 'state') {
+                    throw new Error('Cannot set value on objects that are neither the global state or a container group field');
+                }
+                if (typeof key !== 'string') {
+                    throw new Error('Invalid key');
+                }
+                target[key] = value;
+                let o = worldStore?.newOutput(name, key, value);
+                o?.set(value, true);
+                return true;
+            },
+            get(obj, prop) {
+                if (name != 'state' && prop == 'group') {
+                    return createGroupProxy(name, obj[prop]);
+                }
+                else {
+                    return obj[prop];
+                }
+            }
+        });
+    };
+    const createGroupProxy = (name, obj) => {
+        return new Proxy(obj, {
+            set(target, key, value) {
+                target[key] = value;
+                let o = worldStore?.newOutput(name, 'group', target);
+                o?.set(target, true);
+                if (typeof key !== 'string') {
+                    throw new Error('Invalid key');
+                }
+                controlComponents[name]?.setGroupValue?.(key, value);
+                return true;
+            }
+        });
+    };
+    const proxiedState = createProxy('state', state);
     let evaluator = make_context_evaluator(text, Object.keys(context ?? {}), noReturn);
     // console.log(i, j)
-    return await evaluator(context, proxiedState, async (x, newTab) => {
+    return await evaluator(context, proxiedState, createProxy, async (x, newTab) => {
         if (newTab || editor) {
             if (!newTab) {
                 sendUserToast('In editor mode, `goto` opens a new tab to prevent losing your work. To test the redirection , use the preview mode.');

package/package/components/apps/components/inputs/AppTextInput.svelte

@@ -122,6 +122,7 @@ async function handleAfterIcon() {
 							!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
 						on:keydown|stopPropagation
 						type="password"
+						autocomplete="new-password"
 						bind:value
 						placeholder={resolvedConfig.placeholder}
 						disabled={resolvedConfig.disabled}

package/package/components/apps/components/layout/AppContainer.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext } from 'svelte';
+<script>import { getContext, onMount } from 'svelte';
 import { initOutput } from '../../editor/appUtils';
 import SubGridEditor from '../../editor/SubGridEditor.svelte';
 import { initCss } from '../../utils';
@@ -14,7 +14,7 @@ export let componentContainerHeight;
 export let customCss = undefined;
 export let render;
 export let groupFields = undefined;
-const { app, focusedGrid, selectedComponent, worldStore, connectingInput } = getContext('AppViewerContext');
+const { app, focusedGrid, selectedComponent, worldStore, connectingInput, componentControl } = getContext('AppViewerContext');
 let groupContext = writable({});
 let outputs = initOutput($worldStore, id, { group: $groupContext });
 $: outputs.group.set($groupContext, true);
@@ -24,6 +24,16 @@ function onFocus() {
         subGridIndex: 0
     };
 }
+onMount(() => {
+    $componentControl[id] = {
+        setGroupValue: (field, value) => {
+            groupContext.update((group) => {
+                group[field] = value;
+                return group;
+            });
+        }
+    };
+});
 let css = initCss($app.css?.containercomponent, customCss);
 </script>
 
@@ -47,7 +57,7 @@ let css = initCss($app.css?.containercomponent, customCss);
 
 <div class="w-full h-full">
 	{#if $app.subgrids?.[`${id}-0`]}
-		<GroupWrapper {groupContext}>
+		<GroupWrapper {id} context={groupContext}>
 			<SubGridEditor
 				visible={render}
 				{id}

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

@@ -68,8 +68,8 @@ let context = {
     email: $userStore?.email,
     groups: $userStore?.groups,
     username: $userStore?.username,
-    query: Object.fromEntries(new URLSearchParams(window.location.search).entries()),
-    hash: window.location.hash,
+    query: Object.fromEntries($page.url.searchParams.entries()),
+    hash: $page.url.hash,
     workspace: $workspaceStore,
     mode: 'editor',
     summary: $summaryStore,
@@ -114,6 +114,7 @@ setContext('AppViewerContext', {
     previewTheme,
     debuggingComponents: writable({}),
     replaceStateFn: (path) => replaceState(path, $page.state),
+    policy: policy,
     recomputeAllContext: writable({
         loading: false,
         componentNumber: 0,
@@ -156,10 +157,6 @@ function saveFrontendDraft() {
 function hashchange(e) {
     context.hash = e.newURL.split('#')[1];
     context = context;
-    worldStore.update((x) => {
-        x.outputsById?.['ctx']?.['hash'].set(context.hash, true);
-        return x;
-    });
 }
 $: context.mode = $mode == 'dnd' ? 'editor' : 'viewer';
 $: width = $breakpoint === 'sm' ? 'min-w-[400px] max-w-[656px]' : 'min-w-[710px] w-full';
@@ -440,7 +437,7 @@ let stillInJobEnter = false;
 						app={$appStore}
 						appPath={path}
 						{breakpoint}
-						author={policy.on_behalf_of_email ?? ''}
+						{policy}
 						isEditor
 						{context}
 						noBackend={false}

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

@@ -811,17 +811,19 @@ export function openTroubleshootPanel() {
 			<h2>Public URL</h2>
 			<div class="mt-4" />
 
-			<Toggle
-				options={{
-					left: `Require login and read-access`,
-					right: `No login required`
-				}}
-				checked={policy.execution_mode == 'anonymous'}
-				on:change={(e) => {
-					policy.execution_mode = e.detail ? 'anonymous' : 'publisher'
-					setPublishState()
-				}}
-			/>
+			<div class="flex gap-2 items-center">
+				<Toggle
+					options={{
+						left: `Require login and read-access`,
+						right: `No login required`
+					}}
+					checked={policy.execution_mode == 'anonymous'}
+					on:change={(e) => {
+						policy.execution_mode = e.detail ? 'anonymous' : 'publisher'
+						setPublishState()
+					}}
+				/>
+			</div>
 
 			<div class="my-6 box">
 				Public url:
@@ -848,10 +850,14 @@ export function openTroubleshootPanel() {
 					of embedding app must be the same as the one of Windmill)</div
 				>
 			</div>
-
 			<Alert type="info" title="Only latest deployed app is publicly available">
 				You will still need to deploy the app to make visible the latest changes
 			</Alert>
+
+			<a
+				href="https://www.windmill.dev/docs/advanced/external_auth_with_jwt#embed-public-apps-using-your-own-authentification"
+				class="mt-4 text-2xs">Embed this app in your own product to be used by your own users</a
+			>
 		{/if}
 	</DrawerContent>
 </Drawer>
@@ -1020,14 +1026,14 @@ export function openTroubleshootPanel() {
 														duration={job?.['duration_ms']}
 														jobId={job?.id}
 														content={job?.logs}
-														isLoading={testIsLoading}
+														isLoading={testIsLoading && job?.['running'] == false}
 														tag={job?.tag}
 													/>
 												</Pane>
 												<Pane size={50} minSize={10} class="text-sm text-secondary">
-													{#if job != undefined && 'result' in job && job.result != undefined}
-														<div class="relative h-full px-2">
-															<DisplayResult
+													{#if job != undefined && 'result' in job && job.result != undefined}<div
+															class="relative h-full px-2"
+															><DisplayResult
 																workspaceId={$workspaceStore}
 																jobId={selectedJobId}
 																result={job.result}

package/package/components/apps/editor/AppPreview.svelte

@@ -10,7 +10,7 @@ import { columnConfiguration } from '../gridUtils';
 import { deepEqual } from 'fast-equals';
 import { dfs, maxHeight } from './appUtils';
 import { BG_PREFIX, migrateApp } from '../utils';
-import { workspaceStore, enterpriseLicense, userStore } from '../../../stores';
+import { workspaceStore, enterpriseLicense } from '../../../stores';
 import DarkModeObserver from '../../DarkModeObserver.svelte';
 import { getTheme } from './componentsPanel/themeUtils';
 import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
@@ -18,19 +18,17 @@ import RecomputeAllComponents from './RecomputeAllComponents.svelte';
 export let app;
 export let appPath = '';
 export let breakpoint = writable('lg');
-export let author;
+export let policy = {};
 export let summary = '';
 export let workspace = $workspaceStore;
 export let isEditor = false;
+export let context;
 export let noBackend = false;
 export let isLocked = false;
 export let hideRefreshBar = false;
 export let replaceStateFn = (path) => window.history.replaceState(null, '', path);
 export let gotoFn = (path, opt) => window.history.pushState(null, '', path);
 migrateApp(app);
-let email = $userStore?.email ?? 'anonymous';
-let groups = $userStore?.groups ?? [];
-let username = $userStore?.username ?? 'anonymous';
 const appStore = writable(app);
 const selectedComponent = writable(undefined);
 const mode = writable('preview');
@@ -41,15 +39,11 @@ const connectingInput = writable({
 });
 const allIdsInPath = writable([]);
 let ncontext = {
-    email,
-    groups,
-    username,
-    query: Object.fromEntries(new URLSearchParams(window.location.search).entries()),
-    hash: window.location.hash,
+    ...context,
     workspace,
     mode: 'viewer',
     summary: summary,
-    author
+    author: policy.on_behalf_of_email
 };
 function resizeWindow() {
     !isEditor && ($breakpoint = window.innerWidth < 769 ? 'sm' : 'lg');
@@ -60,14 +54,7 @@ const darkMode = writable(document.documentElement.classList.contains('dark'));
 const state = writable({});
 let parentContext = getContext('AppViewerContext');
 let worldStore = buildWorld(ncontext);
-$: onContextChange({
-    email,
-    groups,
-    username,
-    workspace,
-    summary: summary,
-    author
-});
+$: onContextChange(context);
 function onContextChange(context) {
     Object.assign(ncontext, context);
     ncontext = ncontext;
@@ -120,6 +107,7 @@ setContext('AppViewerContext', {
     debuggingComponents: writable({}),
     replaceStateFn,
     gotoFn,
+    policy,
     recomputeAllContext: writable({
         loading: false,
         componentNumber: 0,
@@ -215,7 +203,7 @@ $: maxRow = maxHeight($appStore.grid, appHeight, $breakpoint);
 					<h2 class="truncate">{summary}</h2>
 					<RecomputeAllComponents />
 					<div class="text-2xs text-secondary">
-						{author != '' ? `on behalf of ${author}` : ''}
+						{policy.on_behalf_of ? `on behalf of ${policy.on_behalf_of_email}` : ''}
 					</div>
 				</div>
 			</div>

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

@@ -1,16 +1,18 @@
 import { SvelteComponent } from "svelte";
 import { type Writable } from 'svelte/store';
 import type { App, EditorBreakpoint } from '../types';
+import type { Policy } from '../../../gen';
 declare const __propDef: {
     props: {
         [x: string]: any;
         app: App;
         appPath?: string | undefined;
         breakpoint?: Writable<EditorBreakpoint> | undefined;
-        author: string;
+        policy?: Policy | undefined;
         summary?: string | undefined;
         workspace?: string | undefined;
         isEditor?: boolean | undefined;
+        context: Record<string, any>;
         noBackend?: boolean | undefined;
         isLocked?: boolean | undefined;
         hideRefreshBar?: boolean | undefined;

package/package/components/apps/editor/DeploymentHistory.svelte

@@ -165,7 +165,7 @@ loadVersions();
 							</Button>
 						</div>
 					</div>
-					<AppPreview author="" noBackend app={selected.value} />
+					<AppPreview noBackend app={selected.value} context={{}} />
 				{:else}
 					<Skeleton layout={[[40]]} />
 				{/if}

package/package/components/apps/editor/RunnableJobPanel.svelte

@@ -61,27 +61,27 @@ let resultDrawerOpen = false;
 						duration={testJob?.['duration_ms']}
 						mem={testJob?.['mem_peak']}
 						content={testJob?.logs}
-						isLoading={testIsLoading}
+						isLoading={testIsLoading && testJob?.['running'] == false}
 						tag={testJob?.tag}
 					/>
 				{/if}
 			</Pane>
 			<Pane size={frontendJob ? 70 : 50} minSize={10} class="text-sm text-tertiary">
 				{#if frontendJob}
-					<pre class="overflow-x-auto break-words relative h-full px-2 pt-2"
-						><DisplayResult bind:drawerOpen={resultDrawerOpen} result={frontendJob} /></pre
-					>
+					<div class="break-words relative h-full px-1">
+						<DisplayResult bind:drawerOpen={resultDrawerOpen} result={frontendJob} />
+					</div>
 				{:else if testJob != undefined && 'result' in testJob && testJob.result != undefined}
-					<pre class="overflow-x-auto break-words relative h-full px-2 pt-2"
-						><DisplayResult
+					<div class="break-words relative h-full px-1">
+						<DisplayResult
 							bind:drawerOpen={resultDrawerOpen}
 							workspaceId={testJob?.workspace_id}
 							jobId={testJob?.id}
 							result={testJob.result}
-						/></pre
+						/></div
 					>
 				{:else}
-					<div class="p-2">
+					<div class="px-1 pt-1">
 						{#if testIsLoading}
 							<Loader2 class="animate-spin" />
 						{:else}

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

@@ -255,7 +255,7 @@ async function inferSuggestions(code) {
 
 		<!-- {inlineScript.content} -->
 
-		<div class="border-y h-full">
+		<div class="border-y h-full w-full">
 			{#if !drawerIsOpen}
 				{#if inlineScript.language != 'frontend'}
 					<Editor
@@ -304,7 +304,7 @@ async function inferSuggestions(code) {
 				{:else}
 					<SimpleEditor
 						bind:this={simpleEditor}
-						class="h-full"
+						class="h-full max-w-full"
 						small
 						{extraLib}
 						bind:code={inlineScript.content}

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

@@ -14,6 +14,7 @@ $: if (componentInput.fieldType == 'template' && componentInput.type == 'static'
     componentInput['connections'] = [{ componentId: 'ctx', id: 'email' }];
 }
 function applyConnection(connection) {
+    console.log(connection);
     const expr = `${connection.componentId}.${connection.path}`;
     //@ts-ignore
     componentInput = {
@@ -21,7 +22,10 @@ function applyConnection(connection) {
         type: 'evalv2',
         expr: expr,
         connections: [
-            { componentId: connection.componentId, id: connection.path.split('.')[0].split('[')[0] }
+            {
+                componentId: connection.componentId,
+                id: connection?.path?.split('.')?.[0]?.split('[')?.[0]
+            }
         ]
     };
     evalV2editor?.setCode(expr);

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

@@ -4,6 +4,7 @@ import Toggle from '../../../Toggle.svelte';
 import InputsSpecsEditor from './InputsSpecsEditor.svelte';
 import GroupManagementDrawer from '../componentsPanel/GroupManagementDrawer.svelte';
 import { Plus } from 'lucide-svelte';
+import { Alert } from '../../../common';
 export let groupFields;
 export let item;
 let groupManagementDrawer = undefined;
@@ -39,7 +40,10 @@ function addField(name) {
 			right: 'container is a component group',
 			rightTooltip: `Group fields allow inner components to depend on the group fields which make the container a
 		group of component that is encapsulated. Inside the group, it is possible to retrieve the values
-		using \`group.<x />\` where x is the group field name`
+		using \`group.x\` where x is the group field name.
+
+		Group fields are mutable by frontend scripts, so  \`group.x = 42\` can be used to set the value inside the group and
+			 \`a.group.x = 42\` outside of it.`
 		}}
 	/>
 </div>
@@ -106,6 +110,14 @@ function addField(name) {
 				/>
 			</div>
 		</div>
+
+		<div class="mt-2" />
+		<Alert size="xs" title="Group fields are mutable" type="info">
+			You may set the value of a group field in a frontend script within the group using: <code
+				>group.x = 42</code
+			>
+			and externally using <code>{item.id}.group.x = 42</code>
+		</Alert>
 	</PanelSection>
 {/if}
 

package/package/components/apps/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="svelte" />
 import type { Schema } from '../../common';
-import type { Preview } from '../../gen';
+import type { Policy, Preview } from '../../gen';
 import type { History } from '../../history';
 import type { Writable } from 'svelte/store';
 import type { AppComponent, PresetComponentConfig, RecomputeOthersSource, components } from './editor/component/components';
@@ -127,7 +127,10 @@ export type ListInputs = {
     set: (id: string, value: any) => void;
     remove: (id: string) => void;
 };
-export type GroupContext = Writable<Record<string, any>>;
+export type GroupContext = {
+    id: string;
+    context: Writable<Record<string, any>>;
+};
 export type AppViewerContext = {
     worldStore: Writable<World>;
     app: Writable<App>;
@@ -198,6 +201,7 @@ export type AppViewerContext = {
         showToast?: (message: string, error?: boolean) => void;
         recompute?: () => void;
         askNewResource?: () => void;
+        setGroupValue?: (key: string, value: any) => void;
     }>>;
     hoverStore: Writable<string | undefined>;
     allIdsInPath: Writable<string[]>;
@@ -207,6 +211,7 @@ export type AppViewerContext = {
     debuggingComponents: Writable<Record<string, number>>;
     replaceStateFn?: ((url: string) => void) | undefined;
     gotoFn?: ((url: string, opt?: Record<string, any> | undefined) => void) | undefined;
+    policy: Policy;
     recomputeAllContext: Writable<{
         onClick?: () => void;
         componentNumber?: number | undefined;