windmill-components 1.309.7 → 1.352.0

package/package/components/apps/components/inputs/AppSelect.svelte

@@ -41,12 +41,24 @@ let resolvedConfig = initConfig(components['selectcomponent'].initialData.config
 let outputs = initOutput($worldStore, id, {
     result: undefined
 });
-let value = noDefault ? undefined : outputs?.result.peak();
+// The library expects double quotes around the value
+let value = noDefault
+    ? undefined
+    : outputs?.result.peak()
+        ? JSON.stringify(outputs?.result.peak())
+        : undefined;
 $: resolvedConfig.items && handleItems();
 let listItems = [];
 function handleItems() {
     listItems = Array.isArray(resolvedConfig.items)
         ? resolvedConfig.items.map((item) => {
+            if (!item || typeof item !== 'object') {
+                console.error('Select component items should be an array of objects');
+                return {
+                    label: 'not object',
+                    value: 'not object'
+                };
+            }
             return {
                 label: item?.label ?? 'undefined',
                 value: item?.value != undefined ? JSON.stringify(item.value) : 'undefined'
@@ -60,7 +72,7 @@ function handleItems() {
     else if (listItems.length > 0 && resolvedConfig?.preselectFirst) {
         rawValue = resolvedConfig.items[0].value;
     }
-    if (rawValue !== undefined) {
+    if (rawValue !== undefined && rawValue !== null) {
         value = JSON.stringify(rawValue);
         outputs?.result.set(rawValue);
     }
@@ -170,11 +182,12 @@ let filterText = '';
 			}
 		}}
 	>
-		{#if Array.isArray(listItems) && listItems.every((x) => typeof x == 'object' && typeof x['label'] == 'string' && `value` in x)}
+		{#if Array.isArray(listItems) && listItems.every((x) => x && typeof x == 'object' && typeof x['label'] == 'string' && `value` in x)}
 			<Select
 				inAppEditor={true}
-				--border-radius="0"
-				--border-color="#999"
+				--border-radius="0.250rem"
+				--clear-icon-color="#6b7280"
+				--border={$darkMode ? '1px solid #6b7280' : '1px solid #d1d5db'}
 				bind:filterText
 				on:filter={handleFilter}
 				on:clear={onClear}
@@ -182,11 +195,9 @@ let filterText = '';
 				items={listItems}
 				listAutoWidth={resolvedConfig.fullWidth}
 				inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-				containerStyles={'border-color: #999;' +
-					($darkMode
-						? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-						: SELECT_INPUT_DEFAULT_STYLE.containerStyles) +
-					css?.input?.style}
+				containerStyles={($darkMode
+					? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
+					: SELECT_INPUT_DEFAULT_STYLE.containerStyles) + css?.input?.style}
 				{value}
 				class={css?.input?.class}
 				placeholder={resolvedConfig.placeholder}

package/package/components/apps/components/inputs/AppSliderInputs.svelte

@@ -55,7 +55,6 @@ $: if (css && slider && lastStyle !== css?.handle?.style) {
         handle.style.cssText = css?.handle?.style ?? '';
     }
 }
-let width = 0;
 const spanClass = 'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5';
 function computeWidth() {
     let maxValue = resolvedConfig.max ?? 0 + (resolvedConfig.step ?? 0);
@@ -67,7 +66,6 @@ function computeWidth() {
         span.className = spanClass;
         span.textContent = maxValue.toString();
         document.body.appendChild(span);
-        width = span?.offsetWidth;
         document.body.removeChild(span);
     }
 }
@@ -98,15 +96,7 @@ $: if (resolvedConfig.max != undefined && resolvedConfig.step && render) {
 <InitializeComponent {id} />
 
 <AlignWrapper {render} hFull {verticalAlignment}>
-	<div
-		class="flex {resolvedConfig.vertical ? 'flex-col' : ''} items-center w-full h-full gap-1 px-1"
-	>
-		<span
-			class={twMerge(css?.limits?.class, 'font-mono wm-slider-limits')}
-			style={css?.limits?.style ?? ''}
-		>
-			{resolvedConfig.vertical ? +(resolvedConfig?.max ?? 0) : +(resolvedConfig?.min ?? 0)}
-		</span>
+	<div class="flex {resolvedConfig.vertical ? 'flex-col' : ''} items-center w-full h-full gap-1">
 		<div
 			class={twMerge(
 				'grow',
@@ -114,39 +104,44 @@ $: if (resolvedConfig.max != undefined && resolvedConfig.step && render) {
 				'font-mono wm-slider-bar',
 				resolvedConfig?.vertical ? 'h-full' : 'w-full'
 			)}
-			style={css?.bar?.style}
+			style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; {css?.bar?.style ??
+				''}"
 			on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
 		>
 			<RangeSlider
+				id="slider-input"
 				springValues={{ stiffness: 1, damping: 1 }}
 				vertical={resolvedConfig.vertical}
 				bind:slider
 				bind:values
-				step={resolvedConfig.step}
+				step={resolvedConfig.step ?? 1}
+				pipstep={(resolvedConfig.axisStep ?? 1) / (resolvedConfig.step ?? 1)}
 				min={+(resolvedConfig?.min ?? 0)}
 				max={+(resolvedConfig?.max ?? 0)}
 				disabled={resolvedConfig.disabled}
+				pips
+				float
+				first="label"
+				last="label"
 			/>
 		</div>
-		<span
-			class={twMerge(css?.limits?.class, 'font-mono wm-slider-limits')}
-			style={css?.limits?.style ?? ''}
-		>
-			{resolvedConfig.vertical ? +(resolvedConfig?.min ?? 0) : +(resolvedConfig?.max ?? 1)}
-		</span>
-		<span class="mx-2">
-			<span
-				class={twMerge(spanClass, css?.value?.class ?? '', 'font-mono wm-slider-value')}
-				style={`${css?.value?.style ?? ''} ${width ? `width: ${width}px;` : ''}`}
-			>
-				{values[0]}
-			</span>
-		</span>
 	</div>
 </AlignWrapper>
 
-<style global>
-	:global(.rangeSlider.vertical) {
-		height: 80%;
-		min-height: 10px !important;
+<style>
+	:global(#slider-input.rangeSlider) {
+		font-size: 12px;
+		text-transform: uppercase;
+	}
+
+	:global(#slider-input.rangeSlider .rangeHandle) {
+		width: 2em;
+		height: 2em;
+	}
+
+	:global(#slider-input.rangeSlider .rangeFloat) {
+		opacity: 1;
+		background: transparent;
+		top: 50%;
+		transform: translate(-50%, -50%);
 	}</style>

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

@@ -43,7 +43,7 @@ function handleDefault(defaultValue) {
     value = defaultValue;
 }
 let css = initCss($app.css?.[appCssKey], customCss);
-$: classInput = twMerge('windmillapp w-full  py-1.5 text-sm focus:ring-indigo-100 px-2', css?.input?.class ?? '', resolvedConfig.disabled ? 'placeholder:text-gray-400 dark:placeholder:text-gray-600' : '', 'wm-text-input');
+$: classInput = twMerge('windmillapp w-full py-1.5 px-2 text-sm', 'app-editor-input', css?.input?.class ?? '', resolvedConfig.disabled ? 'placeholder:text-gray-400 dark:placeholder:text-gray-600' : '', 'wm-input', 'wm-text-input');
 let beforeIconComponent;
 let afterIconComponent;
 $: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon();

package/package/components/apps/components/inputs/currency/AppCurrencyInput.svelte

@@ -73,7 +73,7 @@ let css = initCss($app.css?.currencycomponent, customCss);
 					<CurrencyInput
 						inputClasses={{
 							formatted: twMerge(
-								'px-2 w-full py-1.5 windmillapp',
+								'px-2 text-sm w-full py-1.5 windmillapp app-editor-input',
 								css?.input?.class,
 								'wm-currency-input'
 							),

package/package/components/apps/components/layout/AppConditionalWrapper.svelte

@@ -3,15 +3,16 @@ import { initOutput } from '../../editor/appUtils';
 import SubGridEditor from '../../editor/SubGridEditor.svelte';
 import { initCss } from '../../utils';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
-import { InputValue } from '../helpers';
 import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let componentContainerHeight;
 export let customCss = undefined;
 export let render;
 export let conditions;
-const { app, focusedGrid, selectedComponent, worldStore, connectingInput, componentControl } = getContext('AppViewerContext');
+export let onTabChange = undefined;
+const { app, focusedGrid, selectedComponent, worldStore, connectingInput, componentControl, runnableComponents } = getContext('AppViewerContext');
 const outputs = initOutput($worldStore, id, {
     conditions: [],
     selectedTabIndex: 0
@@ -38,6 +39,7 @@ function setSelectedIndex(index) {
     };
     selectedConditionIndex = index;
     outputs.selectedTabIndex.set(index);
+    onTabChange?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()));
 }
 $: resolvedConditions && handleResolvedConditions();
 $componentControl[id] = {
@@ -53,7 +55,12 @@ $componentControl[id] = {
 </script>
 
 {#each conditions ?? [] as condition, index}
-	<InputValue key="conditions" {id} input={condition} bind:value={resolvedConditions[index]} />
+	<InputValue
+		key="condition{index + 1}"
+		{id}
+		input={condition}
+		bind:value={resolvedConditions[index]}
+	/>
 {/each}
 
 {#each Object.keys(css ?? {}) as key (key)}

package/package/components/apps/components/layout/AppConditionalWrapper.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         customCss?: ComponentCustomCSS<'conditionalwrapper'> | undefined;
         render: boolean;
         conditions: RichConfiguration[];
+        onTabChange?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -7,8 +7,8 @@ import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 // import type { EvalV2AppInput, StaticAppInput } from '../../inputType'
 import { writable } from 'svelte/store';
-import { InputValue } from '../helpers';
 import GroupWrapper from '../GroupWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let componentContainerHeight;
 export let customCss = undefined;

package/package/components/apps/components/layout/AppDecisionTree.svelte

@@ -2,7 +2,6 @@
 import SubGridEditor from '../../editor/SubGridEditor.svelte';
 import { initCss } from '../../utils';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
-import { InputValue } from '../helpers';
 import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import Button from '../../../common/button/Button.svelte';
@@ -10,6 +9,7 @@ import { ArrowLeft, ArrowRight } from 'lucide-svelte';
 import { initOutput } from '../../editor/appUtils';
 import Badge from '../../../common/badge/Badge.svelte';
 import { getFirstNode, isDebugging } from '../../editor/settingsPanel/decisionTree/utils';
+import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let componentContainerHeight;
 export let customCss = undefined;

package/package/components/apps/components/layout/AppDrawer.svelte

@@ -4,12 +4,12 @@ import Portal from 'svelte-portal';
 import { initCss } from '../../utils';
 import { Button, Drawer, DrawerContent } from '../../../common';
 import { twMerge } from 'tailwind-merge';
-import { AlignWrapper } from '../helpers';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
 export let customCss = undefined;
 export let id;
 export let configuration;
@@ -17,9 +17,13 @@ export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
 export let noWFull = false;
 export let render;
-const { app, focusedGrid, selectedComponent, worldStore, connectingInput, mode, componentControl } = getContext('AppViewerContext');
+export let onOpenRecomputeIds = undefined;
+export let onCloseRecomputeIds = undefined;
+const { app, focusedGrid, selectedComponent, worldStore, connectingInput, mode, componentControl, runnableComponents } = getContext('AppViewerContext');
 const resolvedConfig = initConfig(components['drawercomponent'].initialData.configuration, configuration);
-initOutput($worldStore, id, {});
+const outputs = initOutput($worldStore, id, {
+    open: false
+});
 let appDrawer;
 $componentControl[id] = {
     open: () => {
@@ -95,6 +99,15 @@ let css = initCss($app.css?.drawercomponent, customCss);
 		size="800px"
 		alwaysOpen
 		positionClass={$mode == 'dnd' ? '!absolute' : '!fixed'}
+		shouldUsePortal={false}
+		on:open={() => {
+			outputs?.open.set(true)
+			onOpenRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.()))
+		}}
+		on:close={() => {
+			outputs?.open.set(false)
+			onCloseRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.()))
+		}}
 	>
 		<DrawerContent
 			title={resolvedConfig.drawerTitle}

package/package/components/apps/components/layout/AppDrawer.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         noWFull?: boolean | undefined;
         render: boolean;
+        onOpenRecomputeIds?: string[] | undefined;
+        onCloseRecomputeIds?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/components/layout/AppModal.svelte

@@ -3,7 +3,6 @@ import SubGridEditor from '../../editor/SubGridEditor.svelte';
 import { initCss } from '../../utils';
 import { Button } from '../../../common';
 import { twMerge } from 'tailwind-merge';
-import { AlignWrapper } from '../helpers';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import Portal from 'svelte-portal';
@@ -12,6 +11,8 @@ import { X } from 'lucide-svelte';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import Disposable from '../../../common/drawer/Disposable.svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
 export let customCss = undefined;
 export let id;
 export let configuration;
@@ -19,24 +20,15 @@ export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
 export let noWFull = false;
 export let render;
-const { app, focusedGrid, selectedComponent, worldStore, connectingInput, mode, componentControl } = getContext('AppViewerContext');
+export let onOpenRecomputeIds = undefined;
+export let onCloseRecomputeIds = undefined;
+const { app, focusedGrid, selectedComponent, worldStore, connectingInput, mode, componentControl, runnableComponents } = getContext('AppViewerContext');
 //used so that we can count number of outputs setup for first refresh
-initOutput($worldStore, id, {});
+const outputs = initOutput($worldStore, id, {
+    open: false
+});
 let css = initCss($app.css?.modalcomponent, customCss);
-let open = false;
-function handleKeyUp(event) {
-    const key = event.key;
-    if (key === 'Escape' || key === 'Esc') {
-        if (open) {
-            event.preventDefault();
-            closeDrawer();
-        }
-    }
-}
-function closeDrawer() {
-    console.log('Close drawer');
-    open = false;
-}
+let disposable = undefined;
 let resolvedConfig = initConfig(components['modalcomponent'].initialData.configuration, configuration);
 let unclickableOutside = false;
 function unclosableModal() {
@@ -48,23 +40,21 @@ function unclosableModal() {
 $componentControl[id] = {
     openModal: () => {
         unclosableModal();
-        open = true;
+        disposable?.openDrawer();
     },
     closeModal: () => {
-        open = false;
+        disposable?.closeDrawer();
     },
     open: () => {
         unclosableModal();
-        open = true;
+        disposable?.openDrawer();
     },
     close: () => {
-        open = false;
+        disposable?.closeDrawer();
     }
 };
 </script>
 
-<svelte:window on:keyup={handleKeyUp} />
-
 <InitializeComponent {id} />
 
 {#each Object.keys(components['modalcomponent'].initialData.configuration) as key (key)}
@@ -111,7 +101,7 @@ $componentControl[id] = {
 						parentComponentId: id,
 						subGridIndex: 0
 					}
-					open = true
+					disposable?.openDrawer()
 				}}
 				size={resolvedConfig.buttonSize}
 				color={resolvedConfig.buttonColor}
@@ -123,69 +113,85 @@ $componentControl[id] = {
 {/if}
 
 <Portal target="#app-editor-top-level-drawer">
-	<div
-		class={twMerge(
-			`${
-				$mode == 'dnd' ? 'absolute' : 'fixed'
-			} top-0 bottom-0 left-0 right-0 transition-all duration-50`,
-			open ? ' bg-black bg-opacity-60' : 'h-0 overflow-hidden invisible',
-			$mode === 'dnd' ? 'z-[1000]' : 'z-[1100]'
-		)}
+	<Disposable
+		{id}
+		let:handleClickAway
+		let:zIndex
+		let:open
+		bind:this={disposable}
+		on:open={() => {
+			outputs?.open.set(true)
+			onOpenRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.()))
+		}}
+		on:close={() => {
+			outputs?.open.set(false)
+			onCloseRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.()))
+		}}
 	>
 		<div
-			style={css?.popup?.style}
-			class={twMerge('mx-24 mt-8 bg-surface rounded-lg relative', css?.popup?.class)}
-			use:clickOutside={false}
-			on:click_outside={(e) => {
-				if ($mode !== 'dnd' && !unclickableOutside) {
-					closeDrawer()
-				}
-			}}
+			class={twMerge(
+				`${
+					$mode == 'dnd' ? 'absolute' : 'fixed'
+				} top-0 bottom-0 left-0 right-0 transition-all duration-50`,
+				open ? ' bg-black bg-opacity-60' : 'h-0 overflow-hidden invisible'
+			)}
+			style="z-index: {zIndex}"
 		>
-			<div class="px-4 py-2 border-b flex justify-between items-center">
-				<div>{resolvedConfig.modalTitle}</div>
-				<div class="w-8">
-					<button
-						on:click|stopPropagation={() => {
-							open = false
-						}}
-						class="hover:bg-surface-hover bg-surface-secondary rounded-full w-8 h-8 flex items-center justify-center transition-all"
-					>
-						<X class="text-tertiary" />
-					</button>
-				</div>
-			</div>
 			<div
-				class="wm-modal"
-				on:pointerdown={(e) => {
-					e?.stopPropagation()
-					if (!$connectingInput.opened) {
-						$selectedComponent = [id]
-						$focusedGrid = {
-							parentComponentId: id,
-							subGridIndex: 0
-						}
+				style={css?.popup?.style}
+				class={twMerge('mx-24 mt-8 bg-surface rounded-lg relative', css?.popup?.class)}
+				use:clickOutside={false}
+				on:click_outside={(e) => {
+					if ($mode !== 'dnd' && !unclickableOutside) {
+						handleClickAway(e)
 					}
 				}}
 			>
-				{#if $app.subgrids?.[`${id}-0`]}
-					<SubGridEditor
-						visible={open && render}
-						{id}
-						noPadding
-						subGridId={`${id}-0`}
-						on:focus={() => {
-							if (!$connectingInput.opened) {
-								$selectedComponent = [id]
-								$focusedGrid = {
-									parentComponentId: id,
-									subGridIndex: 0
-								}
+				<div class="px-4 py-2 border-b flex justify-between items-center">
+					<div>{resolvedConfig.modalTitle}</div>
+					<div class="w-8">
+						<button
+							on:click|stopPropagation={() => {
+								disposable?.closeDrawer()
+							}}
+							class="hover:bg-surface-hover bg-surface-secondary rounded-full w-8 h-8 flex items-center justify-center transition-all"
+						>
+							<X class="text-tertiary" />
+						</button>
+					</div>
+				</div>
+				<div
+					class="wm-modal"
+					on:pointerdown={(e) => {
+						e?.stopPropagation()
+						if (!$connectingInput.opened) {
+							$selectedComponent = [id]
+							$focusedGrid = {
+								parentComponentId: id,
+								subGridIndex: 0
 							}
-						}}
-					/>
-				{/if}
+						}
+					}}
+				>
+					{#if $app.subgrids?.[`${id}-0`]}
+						<SubGridEditor
+							visible={open && render}
+							{id}
+							noPadding
+							subGridId={`${id}-0`}
+							on:focus={() => {
+								if (!$connectingInput.opened) {
+									$selectedComponent = [id]
+									$focusedGrid = {
+										parentComponentId: id,
+										subGridIndex: 0
+									}
+								}
+							}}
+						/>
+					{/if}
+				</div>
 			</div>
 		</div>
-	</div>
+	</Disposable>
 </Portal>

package/package/components/apps/components/layout/AppModal.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         noWFull?: boolean | undefined;
         render: boolean;
+        onOpenRecomputeIds?: string[] | undefined;
+        onCloseRecomputeIds?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/components/layout/AppStepper.svelte

@@ -4,11 +4,12 @@ import SubGridEditor from '../../editor/SubGridEditor.svelte';
 import { initCss } from '../../utils';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import Button from '../../../common/button/Button.svelte';
-import { RunnableComponent, RunnableWrapper } from '../helpers';
 import { ArrowLeftIcon, ArrowRightIcon, Loader2 } from 'lucide-svelte';
 import Stepper from '../../../common/stepper/Stepper.svelte';
 import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import RunnableComponent from '../helpers/RunnableComponent.svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
 export let componentContainerHeight;
 export let tabs;
@@ -17,7 +18,9 @@ export let render;
 export let recomputeIds = undefined;
 export let extraQueryParams = {};
 export let componentInput;
-const { app, worldStore, focusedGrid, selectedComponent, componentControl, connectingInput, mode } = getContext('AppViewerContext');
+export let onNext = undefined;
+export let onPrevious = undefined;
+const { app, worldStore, focusedGrid, selectedComponent, componentControl, connectingInput, mode, runnableComponents } = getContext('AppViewerContext');
 let selected = tabs[0];
 let tabHeight = 0;
 let footerHeight = 0;
@@ -178,6 +181,7 @@ let directionClicked = undefined;
 						on:click={(e) => {
 							e.preventDefault()
 							directionClicked = 'left'
+							onPrevious?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()))
 							runStep(selectedIndex - 1)
 						}}
 					>
@@ -199,6 +203,7 @@ let directionClicked = undefined;
 						on:click={(e) => {
 							e.preventDefault()
 							directionClicked = 'right'
+							onNext?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()))
 							runStep(selectedIndex + 1)
 						}}
 					>

package/package/components/apps/components/layout/AppStepper.svelte.d.ts

@@ -11,6 +11,8 @@ declare const __propDef: {
         recomputeIds?: string[] | undefined;
         extraQueryParams?: Record<string, any> | undefined;
         componentInput: AppInput | undefined;
+        onNext?: string[] | undefined;
+        onPrevious?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/components/layout/AppTabs.svelte

@@ -15,8 +15,9 @@ export let tabs;
 export let customCss = undefined;
 export let render;
 export let disabledTabs;
+export let onTabChange = undefined;
 let resolvedConfig = initConfig(components['tabscomponent'].initialData.configuration, configuration);
-const { app, worldStore, focusedGrid, selectedComponent, mode, componentControl, connectingInput } = getContext('AppViewerContext');
+const { app, worldStore, focusedGrid, selectedComponent, mode, componentControl, connectingInput, runnableComponents } = getContext('AppViewerContext');
 let selected = tabs[0];
 let tabHeight = 0;
 let outputs = initOutput($worldStore, id, {
@@ -25,6 +26,7 @@ let outputs = initOutput($worldStore, id, {
 function handleTabSelection() {
     selectedIndex = tabs?.indexOf(selected);
     outputs?.selectedTabIndex.set(selectedIndex);
+    onTabChange?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()));
     if ($focusedGrid?.parentComponentId != id || $focusedGrid?.subGridIndex != selectedIndex) {
         $focusedGrid = {
             parentComponentId: id,
@@ -76,7 +78,7 @@ let resolvedDisabledTabs = [];
 
 {#each disabledTabs ?? [] as disableTab, index}
 	<InputValue
-		key="disable-{index}"
+		key="tabDisabled {index}"
 		{id}
 		input={disableTab}
 		bind:value={resolvedDisabledTabs[index]}

package/package/components/apps/components/layout/AppTabs.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         customCss?: ComponentCustomCSS<'tabscomponent'> | undefined;
         render: boolean;
         disabledTabs: RichConfiguration[];
+        onTabChange?: string[] | undefined;
     };
     events: {
         pointerdown: PointerEvent;

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

@@ -121,7 +121,8 @@ setContext('AppEditorContext', {
     movingcomponents: writable(undefined),
     selectedComponentInEditor: writable(undefined),
     jobsDrawerOpen: writable(false),
-    scale
+    scale,
+    stylePanel: () => StylePanel
 });
 let timeout = undefined;
 $: $appStore && saveFrontendDraft();
@@ -499,7 +500,7 @@ let runnableJobEnterTimeout = undefined;
 										class={classNames(
 											'mx-auto w-full h-full z-50',
 											$appStore.fullscreen ? '' : 'max-w-7xl',
-											$componentActive ? 'absolute' : 'overflow-auto'
+											$componentActive ? 'absolute right-0 left-0' : 'overflow-auto'
 										)}
 										style={$componentActive ? `top: -${$yTop}px;` : ''}
 									>