windmill-components 1.79.0 → 1.82.0

package/components/ArgInput.svelte

@@ -164,6 +164,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								use:autosize
 								rows="1"
 								bind:value={description}
+								on:keydown|stopPropagation 
 								placeholder="Field description"
 							/>
 							{#if type == 'string' && format != 'date-time'}
@@ -315,6 +316,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						{autofocus}
 						{disabled}
 						use:autosize
+						on:keydown|stopPropagation 
 						style="max-height: {maxHeight}"
 						on:input={() => {
 							dispatch('input', { rawValue: value, isRaw: false })
@@ -390,6 +392,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								}}
 								on:blur={() => dispatch('blur')}
 								use:autosize
+								on:keydown|stopPropagation 
 								type="text"
 								{disabled}
 								class="col-span-10 {valid

package/components/ArgInput.svelte.d.ts

@@ -40,6 +40,7 @@ declare const __propDef: {
         focus?: (() => void) | undefined;
     };
     events: {
+        keydown: KeyboardEvent;
         focus: CustomEvent<any>;
         input: CustomEvent<any>;
         blur: CustomEvent<any>;

package/components/DisplayResult.svelte

@@ -5,6 +5,7 @@ import { copyToClipboard, truncate } from '../utils';
 import { Button, Drawer, DrawerContent } from './common';
 import autosize from 'svelte-autosize';
 import { ClipboardCopy } from 'lucide-svelte';
+import Portal from 'svelte-portal';
 export let result;
 export let requireHtmlApproval = false;
 let resultKind;
@@ -74,20 +75,22 @@ let payload = '';
 let jsonViewer;
 </script>
 
-<Drawer bind:this={jsonViewer} size="900px">
-	<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
-		<svelte:fragment slot="actions">
-			<Button
-				on:click={() => copyToClipboard(JSON.stringify(result, null, 4))}
-				color="light"
-				size="xs"
-			>
-				<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
-			</Button>
-		</svelte:fragment>
-		<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
-	</DrawerContent>
-</Drawer>
+<Portal>
+	<Drawer bind:this={jsonViewer} size="900px">
+		<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
+			<svelte:fragment slot="actions">
+				<Button
+					on:click={() => copyToClipboard(JSON.stringify(result, null, 4))}
+					color="light"
+					size="xs"
+				>
+					<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
+				</Button>
+			</svelte:fragment>
+			<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+		</DrawerContent>
+	</Drawer>
+</Portal>
 
 <div class="inline-highlight">
 	{#if result != undefined}
@@ -95,7 +98,7 @@ let jsonViewer;
 			<div class="mb-2 text-gray-500 text-sm bg-gray-50/20">
 				as JSON&nbsp;<input class="windmillapp" type="checkbox" bind:checked={forceJson} /></div
 			>{/if}{#if typeof result == 'object' && Object.keys(result).length > 0}<div
-				class="mb-2 min-w-[400px] text-sm text-gray-700 relative"
+				class="mb-2 min-w-[360px] text-sm text-gray-700 relative"
 				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
 				<div class="text-gray-500 text-sm  absolute top-0 right-2">
 					<button on:click={jsonViewer.openDrawer}>Expand JSON</button>

package/components/SchemaEditor.svelte

@@ -9,6 +9,7 @@ import TableCustom from './TableCustom.svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
 import { flip } from 'svelte/animate';
+import Portal from 'svelte-portal';
 const dispatch = createEventDispatcher();
 export let schema = emptySchema();
 if (!schema) {
@@ -166,8 +167,10 @@ let error = '';
 			/>
 			<div class="ml-2">
 				<Tooltip>
-					Arguments can be edited either using the wizard, or by editing their JSON Schema, 
-					<a href="https://docs.windmill.dev/docs/reference/#script-parameters-to-json-schema">see docs</a>
+					Arguments can be edited either using the wizard, or by editing their JSON Schema,
+					<a href="https://docs.windmill.dev/docs/reference/#script-parameters-to-json-schema"
+						>see docs</a
+					>
 				</Tooltip>
 			</div>
 		</div>
@@ -269,11 +272,13 @@ let error = '';
 	</div>
 </div>
 
-<SchemaModal
-	bind:this={schemaModal}
-	bind:property={modalProperty}
-	bind:error={argError}
-	on:save={handleAddOrEditArgument}
-	bind:editing
-	bind:oldArgName
-/>
+<Portal>
+	<SchemaModal
+		bind:this={schemaModal}
+		bind:property={modalProperty}
+		bind:error={argError}
+		on:save={handleAddOrEditArgument}
+		bind:editing
+		bind:oldArgName
+	/>
+</Portal>

package/components/SettingSection.svelte

@@ -38,7 +38,7 @@ let showContent = !accordion;
 	{/if}
 </div>
 {#if showContent}
-	<div transition:slide={{ duration: 300 }}>
+	<div transition:slide|local={{ duration: 300 }}>
 		<slot />
 	</div>
 {/if}

package/components/Toggle.svelte

@@ -5,6 +5,7 @@ export let checked = false;
 export let disabled = false;
 export let textClass = '';
 export let textStyle = '';
+export let color = 'blue';
 export let size = 'sm';
 const id = (Math.random() + 1).toString(36).substring(10);
 const dispatch = createEventDispatcher();
@@ -20,7 +21,7 @@ const dispatch = createEventDispatcher();
 		{#if Boolean(options?.left)}
 			<span
 				class={twMerge(
-					'ml-2 font-medium duration-200',
+					'mr-2 font-medium duration-200',
 					disabled ? 'text-gray-500' : 'text-gray-900',
 					size === 'xs' ? 'text-xs' : 'text-sm',
 					textClass
@@ -49,7 +50,9 @@ const dispatch = createEventDispatcher();
 				class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 
 				peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] 
 				after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 
-				after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
+				after:border after:rounded-full after:h-5 after:w-5 after:transition-all {color == 'red'
+					? 'peer-checked:bg-red-600'
+					: 'peer-checked:bg-blue-600'}"
 			/>
 		</div>
 		{#if Boolean(options?.right)}

package/components/Toggle.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         textClass?: string | undefined;
         textStyle?: string | undefined;
+        color?: "blue" | "red" | undefined;
         size?: "xs" | "sm" | undefined;
     };
     events: {

package/components/apps/components/buttons/AppButton.svelte

@@ -1,13 +1,12 @@
 <script>import { Button } from '../../../common';
 import { getContext } from 'svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { loadIcon } from '../icon';
 import { twMerge } from 'tailwind-merge';
-import { goto } from '$app/navigation';
-import { initOutput } from '../../editor/appUtils';
-import { configurationKeys } from '../../editor/component';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
 export let id;
 export let componentInput;
 export let configuration;
@@ -19,26 +18,22 @@ export let noWFull = false;
 export let preclickAction = undefined;
 export let customCss = undefined;
 export let render;
-export let initializing = true;
+export let initializing = false;
+export let extraKey = undefined;
 export let controls = undefined;
-const { worldStore, app, componentControl } = getContext('AppViewerContext');
+const { worldStore, app, componentControl, selectedComponent } = getContext('AppViewerContext');
+let resolvedConfig = initConfig(components['buttoncomponent'].initialData.configuration, configuration);
+$: initializing = resolvedConfig?.label == undefined;
+let outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
 if (controls) {
     $componentControl[id] = controls;
 }
 let runnableComponent;
-// let labelValue: string
-// let color: ButtonType.Color
-// let size: ButtonType.Size
-// let disabled: boolean | undefined = undefined
-// let fillContainer: boolean | undefined = undefined
-// let gotoUrl: string | undefined = undefined
-// let gotoNewTab: boolean | undefined = undefined
 let isLoading = false;
 let ownClick = false;
-// let beforeIcon: undefined | string = undefined
-// let afterIcon: undefined | string = undefined
-let resolvedConfig = {};
-$: initializing = resolvedConfig?.label == undefined;
 let beforeIconComponent;
 let afterIconComponent;
 $: resolvedConfig.beforeIcon && handleBeforeIcon();
@@ -53,11 +48,7 @@ async function handleAfterIcon() {
         afterIconComponent = await loadIcon(resolvedConfig.afterIcon);
     }
 }
-let outputs = initOutput($worldStore, id, {
-    result: undefined,
-    loading: false
-});
-$: resolvedConfig.triggerOnAppLoad && runnableComponent?.runComponent();
+$: resolvedConfig?.triggerOnAppLoad && runnableComponent?.runComponent();
 $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
@@ -75,22 +66,17 @@ let errors = {};
 $: errorsMessage = Object.values(errors)
     .filter((x) => x != '')
     .join('\n');
+let runnableWrapper;
 async function handleClick(event) {
     event?.stopPropagation();
     event?.preventDefault();
+    $selectedComponent = id;
     if (preclickAction) {
         await preclickAction();
     }
     ownClick = true;
     if (!runnableComponent) {
-        if (resolvedConfig.gotoUrl) {
-            if (resolvedConfig.gotoNewTab) {
-                window.open(resolvedConfig.gotoUrl, '_blank');
-            }
-            else {
-                goto(resolvedConfig.gotoUrl);
-            }
-        }
+        runnableWrapper.onSuccess();
     }
     else {
         await runnableComponent?.runComponent();
@@ -98,37 +84,44 @@ async function handleClick(event) {
 }
 </script>
 
-{#each configurationKeys['buttoncomponent'] as key (key)}
-	<InputValue {key} {id} input={configuration[key]} bind:value={resolvedConfig[key]} />
+{#each Object.keys(components['buttoncomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{extraKey}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
 {/each}
 
+<!-- gotoNewTab={resolvedConfig.onSuccess.selected == 'goto'} -->
+
 <RunnableWrapper
+	bind:this={runnableWrapper}
 	{recomputeIds}
 	bind:runnableComponent
 	{componentInput}
+	doOnSuccess={resolvedConfig.onSuccess}
 	{id}
 	{extraQueryParams}
 	autoRefresh={false}
-	goto={resolvedConfig.gotoUrl}
-	gotoNewTab={resolvedConfig.gotoNewTab}
 	{render}
+	{outputs}
+	{extraKey}
 >
 	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
 		{#if errorsMessage}
 			<div class="text-red-500 text-xs">{errorsMessage}</div>
 		{/if}
 		<Button
+			on:pointerdown={(e) => e.stopPropagation()}
 			btnClasses={twMerge(
 				$app.css?.['buttoncomponent']?.['button']?.class,
-				customCss?.button.class,
+				customCss?.button?.class,
 				resolvedConfig.fillContainer ? 'w-full h-full' : ''
 			)}
-			style={[$app.css?.['buttoncomponent']?.['button']?.style, customCss?.button.style].join(';')}
+			style={[$app.css?.['buttoncomponent']?.['button']?.style, customCss?.button?.style].join(';')}
 			disabled={resolvedConfig.disabled}
-			on:pointerdown={(e) => {
-				e?.stopPropagation()
-				window.dispatchEvent(new Event('pointerup'))
-			}}
 			on:click={handleClick}
 			size={resolvedConfig.size}
 			color={resolvedConfig.color}

package/components/apps/components/buttons/AppButton.svelte.d.ts

@@ -12,9 +12,10 @@ declare const __propDef: {
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         noWFull?: boolean | undefined;
         preclickAction?: (() => Promise<void>) | undefined;
-        customCss?: ComponentCustomCSS<'button'> | undefined;
+        customCss?: ComponentCustomCSS<'buttoncomponent'> | undefined;
         render: boolean;
         initializing?: boolean | undefined;
+        extraKey?: string | undefined;
         controls?: {
             left: () => boolean;
             right: () => boolean | string;

package/components/apps/components/buttons/AppForm.svelte

@@ -2,9 +2,11 @@
 import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components } from '../../editor/component';
 import { concatCustomCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
 export let componentInput;
@@ -16,16 +18,16 @@ export let customCss = undefined;
 export let render;
 export const staticOutputs = ['loading', 'result'];
 const { app, worldStore, stateId } = getContext('AppViewerContext');
-let labelValue = 'Default label';
-let color;
-let size;
+let outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
+let resolvedConfig = initConfig(components['formcomponent'].initialData.configuration, configuration);
 let runnableComponent;
-let goto = undefined;
 let isLoading = false;
 $: noInputs =
     $stateId != undefined &&
         (componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0);
-$: outputs = $worldStore?.outputsById[id];
 $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
@@ -38,10 +40,14 @@ $: outputs?.loading.subscribe({
 $: css = concatCustomCss($app.css?.formcomponent, customCss);
 </script>
 
-<InputValue {id} input={configuration.goto} bind:value={goto} />
-<InputValue {id} input={configuration.label} bind:value={labelValue} />
-<InputValue {id} input={configuration.color} bind:value={color} />
-<InputValue {id} input={configuration.size} bind:value={size} />
+{#each Object.keys(components['formcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
 <RunnableWrapper
 	{recomputeIds}
@@ -49,12 +55,13 @@ $: css = concatCustomCss($app.css?.formcomponent, customCss);
 	bind:runnableComponent
 	{componentInput}
 	{id}
-	{goto}
+	doOnSuccess={resolvedConfig.onSuccess}
 	{extraQueryParams}
 	autoRefresh={false}
 	forceSchemaDisplay={true}
 	runnableClass="!block"
-	runnableStyle={css?.container.style}
+	runnableStyle={css?.container?.style}
+	{outputs}
 >
 	<AlignWrapper {horizontalAlignment}>
 		<div
@@ -87,10 +94,10 @@ $: css = concatCustomCss($app.css?.formcomponent, customCss);
 						on:click={() => {
 							runnableComponent?.runComponent()
 						}}
-						{size}
-						{color}
+						size={resolvedConfig.size}
+						color={resolvedConfig.color}
 					>
-						{labelValue}
+						{resolvedConfig.label}
 					</Button>
 				{/if}
 			</div>

package/components/apps/components/buttons/AppForm.svelte.d.ts

@@ -9,7 +9,7 @@ declare const __propDef: {
         recomputeIds?: string[] | undefined;
         extraQueryParams?: Record<string, any> | undefined;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
-        customCss?: ComponentCustomCSS<'container' | 'button'> | undefined;
+        customCss?: ComponentCustomCSS<'formcomponent'> | undefined;
         render: boolean;
         staticOutputs?: string[] | undefined;
     };

package/components/apps/components/buttons/AppFormButton.svelte

@@ -8,6 +8,9 @@ import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import Portal from 'svelte-portal';
 import Modal from '../../../common/modal/Modal.svelte';
 import { concatCustomCss } from '../../utils';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
 export let id;
 export let componentInput;
 export let configuration;
@@ -17,13 +20,13 @@ export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
 export let customCss = undefined;
 export let render;
-export const staticOutputs = ['loading', 'result'];
 const { app, worldStore } = getContext('AppViewerContext');
-let labelValue = 'Default label';
-let color;
-let size;
+let outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
+let resolvedConfig = initConfig(components['formbuttoncomponent'].initialData.configuration, configuration);
 let runnableComponent;
-let disabled = undefined;
 let isLoading = false;
 let ownClick = false;
 let errors = {};
@@ -33,7 +36,6 @@ $: errorsMessage = Object.values(errors)
     .join('\n');
 $: noInputs =
     componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0;
-$: outputs = $worldStore?.outputsById[id];
 $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
@@ -48,24 +50,24 @@ $: outputs?.loading.subscribe({
 });
 $: loading = isLoading && ownClick;
 $: css = concatCustomCss($app?.css?.formbuttoncomponent, customCss);
+let runnableWrapper;
 </script>
 
-<InputValue {id} input={configuration.label} bind:value={labelValue} />
-<InputValue {id} input={configuration.color} bind:value={color} />
-<InputValue {id} input={configuration.size} bind:value={size} />
-<InputValue
-	{id}
-	input={configuration.disabled}
-	bind:value={disabled}
-	bind:error={errors.disabled}
-/>
+{#each Object.keys(components['formbuttoncomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
 <Portal>
 	<Modal
 		{open}
-		title={labelValue}
-		class={css?.popup.class}
-		style={css?.popup.style}
+		title={resolvedConfig.label ?? ''}
+		class={css?.popup?.class}
+		style={css?.popup?.style}
 		on:canceled={() => {
 			open = false
 		}}
@@ -74,6 +76,7 @@ $: css = concatCustomCss($app?.css?.formbuttoncomponent, customCss);
 		}}
 	>
 		<RunnableWrapper
+			bind:this={runnableWrapper}
 			{recomputeIds}
 			{render}
 			bind:runnableComponent
@@ -83,6 +86,8 @@ $: css = concatCustomCss($app?.css?.formbuttoncomponent, customCss);
 			autoRefresh={false}
 			forceSchemaDisplay={true}
 			runnableClass="!block"
+			{outputs}
+			doOnSuccess={resolvedConfig.onSuccess}
 		>
 			<div class="flex flex-col gap-2 px-4 w-full">
 				<div>
@@ -107,8 +112,11 @@ $: css = concatCustomCss($app?.css?.formbuttoncomponent, customCss);
 							window.dispatchEvent(new Event('pointerup'))
 						}}
 						on:click={async () => {
-							await runnableComponent?.runComponent()
-
+							if (!runnableComponent) {
+								runnableWrapper.onSuccess()
+							} else {
+								await runnableComponent?.runComponent()
+							}
 							open = false
 						}}
 						size="xs"
@@ -127,15 +135,15 @@ $: css = concatCustomCss($app?.css?.formbuttoncomponent, customCss);
 		<div class="text-red-500 text-xs">{errorsMessage}</div>
 	{/if}
 	<Button
-		{disabled}
-		{size}
-		{color}
+		disabled={resolvedConfig.disabled ?? false}
+		size={resolvedConfig.size ?? 'md'}
+		color={resolvedConfig.color}
 		btnClasses={css?.button?.class ?? ''}
 		style={css?.button?.style ?? ''}
 		on:click={(e) => {
 			open = true
 		}}
 	>
-		{labelValue}
+		{resolvedConfig.label}
 	</Button>
 </AlignWrapper>

package/components/apps/components/buttons/AppFormButton.svelte.d.ts

@@ -10,9 +10,8 @@ declare const __propDef: {
         extraQueryParams?: Record<string, any> | undefined;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        customCss?: ComponentCustomCSS<'button' | 'popup'> | undefined;
+        customCss?: ComponentCustomCSS<'formbuttoncomponent'> | undefined;
         render: boolean;
-        staticOutputs?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -23,6 +22,5 @@ export type AppFormButtonProps = typeof __propDef.props;
 export type AppFormButtonEvents = typeof __propDef.events;
 export type AppFormButtonSlots = typeof __propDef.slots;
 export default class AppFormButton extends SvelteComponentTyped<AppFormButtonProps, AppFormButtonEvents, AppFormButtonSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/display/AppBarChart.svelte

@@ -12,7 +12,7 @@ export let initializing = undefined;
 export let customCss = undefined;
 export let render;
 const { app, worldStore } = getContext('AppViewerContext');
-initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
@@ -62,7 +62,7 @@ $: css = concatCustomCss($app.css?.barchartcomponent, customCss);
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.line} bind:value={lineChart} />
 
-<RunnableWrapper {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
 	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
 		{#if result}
 			{#if lineChart}

package/components/apps/components/display/AppBarChart.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         componentInput: AppInput | undefined;
         configuration: RichConfigurations;
         initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'container'> | undefined;
+        customCss?: ComponentCustomCSS<'barchartcomponent'> | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/display/AppDisplayComponent.svelte

@@ -12,13 +12,13 @@ export let render;
 const requireHtmlApproval = getContext(IS_APP_PUBLIC_CONTEXT_KEY);
 const { app, worldStore } = getContext('AppViewerContext');
 let result = undefined;
-initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
 </script>
 
-<RunnableWrapper {render} {componentInput} {id} bind:initializing bind:result>
+<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
 	<div
 		class={twMerge(
 			'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',

package/components/apps/components/display/AppDisplayComponent.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         id: string;
         componentInput: AppInput | undefined;
         initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'header' | 'container'> | undefined;
+        customCss?: ComponentCustomCSS<'displaycomponent'> | undefined;
         render: boolean;
     };
     events: {

package/components/apps/components/display/AppHtml.svelte

@@ -8,7 +8,7 @@ export let initializing = undefined;
 export let customCss = undefined;
 export let render;
 const { app, worldStore } = getContext('AppViewerContext');
-initOutput($worldStore, id, {
+const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
 });
@@ -26,7 +26,15 @@ $: css = concatCustomCss($app.css?.htmlcomponent, customCss);
 	bind:clientHeight={h}
 	bind:clientWidth={w}
 >
-	<RunnableWrapper {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
+	<RunnableWrapper
+		{outputs}
+		{render}
+		autoRefresh
+		{componentInput}
+		{id}
+		bind:initializing
+		bind:result
+	>
 		{#key result}
 			<iframe
 				frameborder="0"

package/components/apps/components/display/AppHtml.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         id: string;
         componentInput: AppInput | undefined;
         initializing?: boolean | undefined;
-        customCss?: ComponentCustomCSS<'container'> | undefined;
+        customCss?: ComponentCustomCSS<'htmlcomponent'> | undefined;
         render: boolean;
     };
     events: {