windmill-components 1.82.10 → 1.82.12

package/components/ArgInput.svelte

@@ -211,7 +211,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					<input
 						{autofocus}
 						on:focus={(e) => {
-							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
 						{disabled}
@@ -230,7 +229,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				<Toggle
 					on:pointerdown={(e) => {
 						e?.stopPropagation()
-						window.dispatchEvent(new Event('pointerup'))
 					}}
 					{disabled}
 					class={valid
@@ -310,7 +308,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					<textarea
 						bind:this={el}
 						on:focus={(e) => {
-							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
 						{autofocus}
@@ -331,7 +328,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 			{:else if inputCat == 'enum'}
 				<select
 					on:focus={(e) => {
-						window.dispatchEvent(new Event('pointerup'))
 						dispatch('focus')
 					}}
 					{disabled}
@@ -348,7 +344,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				<div class="border my-1 mb-4 w-full border-gray-400">
 					<SimpleEditor
 						on:focus={(e) => {
-							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
 						on:blur={() => dispatch('blur')}
@@ -387,7 +382,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								rows="1"
 								bind:this={el}
 								on:focus={(e) => {
-									window.dispatchEvent(new Event('pointerup'))
 									dispatch('focus')
 								}}
 								on:blur={() => dispatch('blur')}

package/components/FlowBuilder.svelte

@@ -175,6 +175,11 @@ $: selectedId && select(selectedId);
 $: initialPath && $workspaceStore && loadSchedule();
 loadHubScripts();
 function onKeyDown(event) {
+    let classes = event.target?.['className'];
+    if ((typeof classes === 'string' && classes.includes('inputarea')) ||
+        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
+        return;
+    }
     switch (event.key) {
         case 'Z':
             if (event.ctrlKey) {

package/components/LightweightArgInput.svelte

@@ -145,7 +145,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				{:else}
 					<input
 						on:focus={(e) => {
-							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
 						type="number"
@@ -163,7 +162,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				<Toggle
 					on:pointerdown={(e) => {
 						e?.stopPropagation()
-						window.dispatchEvent(new Event('pointerup'))
 					}}
 					class={valid
 						? ''
@@ -240,7 +238,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					<textarea
 						bind:this={el}
 						on:focus={(e) => {
-							window.dispatchEvent(new Event('pointerup'))
 							dispatch('focus')
 						}}
 						use:autosize
@@ -258,7 +255,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 			{:else if inputCat == 'enum'}
 				<select
 					on:focus={(e) => {
-						window.dispatchEvent(new Event('pointerup'))
 						dispatch('focus')
 					}}
 					class="px-6"
@@ -291,7 +287,6 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 							rows="1"
 							bind:this={el}
 							on:focus={(e) => {
-								window.dispatchEvent(new Event('pointerup'))
 								dispatch('focus')
 							}}
 							on:blur={() => dispatch('blur')}

package/components/Toggle.svelte

@@ -32,7 +32,7 @@ const dispatch = createEventDispatcher();
 			</span>
 		{/if}
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<div class="relative" on:pointerdown on:click|stopPropagation>
+		<div class="relative" on:click|stopPropagation>
 			<input
 				on:focus
 				on:click

package/components/Toggle.svelte.d.ts

@@ -14,7 +14,6 @@ declare const __propDef: {
         size?: "xs" | "sm" | undefined;
     };
     events: {
-        pointerdown: PointerEvent;
         click: MouseEvent;
         focus: FocusEvent;
         change: CustomEvent<any>;

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

@@ -55,7 +55,7 @@ let runnableWrapper;
 async function handleClick(event) {
     event?.stopPropagation();
     event?.preventDefault();
-    $selectedComponent = id;
+    $selectedComponent = [id];
     if (preclickAction) {
         await preclickAction();
     }

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

@@ -82,7 +82,6 @@ let loading = false;
 						style={css?.button?.style ?? ''}
 						on:pointerdown={(e) => {
 							e?.stopPropagation()
-							window.dispatchEvent(new Event('pointerup'))
 						}}
 						on:click={() => {
 							runnableComponent?.runComponent()

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

@@ -87,7 +87,6 @@ let loading = false;
 					btnClasses="my-1"
 					on:pointerdown={(e) => {
 						e?.stopPropagation()
-						window.dispatchEvent(new Event('pointerup'))
 					}}
 					on:click={async () => {
 						if (!runnableComponent) {

package/components/apps/components/display/AppMap.svelte

@@ -41,7 +41,7 @@ $: if (map && markers) {
 }
 function selectComponent() {
     if (!$connectingInput.opened) {
-        $selectedComponent = id;
+        $selectedComponent = [id];
         $focusedGrid = undefined;
     }
 }

package/components/apps/components/display/AppPdf.svelte

@@ -289,7 +289,7 @@ $: css = concatCustomCss($app.css?.pdfcomponent, customCss);
 				style="padding-top: {controlsHeight ?? 0}px; {css?.container?.style ?? ''}"
 			/>
 		{/if}
-		{#if $mode !== 'preview' && $selectedComponent === id}
+		{#if $mode !== 'preview' && $selectedComponent?.includes(id)}
 			<button
 				class="fixed z-10 bottom-0 left-0 px-2 py-0.5 bg-indigo-500/90 
 			hover:bg-indigo-500 focus:bg-indigo-500 duration-200 text-white text-2xs"

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

@@ -72,7 +72,7 @@ function onCellValueChanged(event) {
 		>
 			<div
 				on:pointerdown|stopPropagation={() => {
-					$selectedComponent = id
+					$selectedComponent = [id]
 				}}
 				style:height="{clientHeight}px"
 				style:width="{clientWidth}px"

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

@@ -112,7 +112,7 @@ $componentControl[id] = {
         }
         const hasActions = actionButtons.length >= 1;
         if (hasActions) {
-            $selectedComponent = actionButtons[0].id;
+            $selectedComponent = [actionButtons[0].id];
             return true;
         }
         return false;
@@ -234,13 +234,13 @@ $componentControl[id] = {
 															$hoverStore = undefined
 														}
 													}}
-													class={(actionButton.id === $selectedComponent ||
+													class={($selectedComponent?.includes(actionButton.id) ||
 														$hoverStore === actionButton.id) &&
 													$mode !== 'preview'
 														? 'outline outline-indigo-500 outline-1 outline-offset-1 relative '
 														: ''}
 												>
-													{#if actionButton.id === $selectedComponent || $hoverStore === actionButton.id}
+													{#if $selectedComponent?.includes(actionButton.id) || $hoverStore === actionButton.id}
 														<span
 															title={`Id: ${actionButton.id}`}
 															class={classNames(
@@ -268,10 +268,10 @@ $componentControl[id] = {
 															controls={{
 																left: () => {
 																	if (actionIndex === 0) {
-																		$selectedComponent = id
+																		$selectedComponent = [id]
 																		return true
 																	} else if (actionIndex > 0) {
-																		$selectedComponent = actionButtons[actionIndex - 1].id
+																		$selectedComponent = [actionButtons[actionIndex - 1].id]
 																		return true
 																	}
 																	return false
@@ -280,7 +280,7 @@ $componentControl[id] = {
 																	if (actionIndex === actionButtons.length - 1) {
 																		return id
 																	} else if (actionIndex < actionButtons.length - 1) {
-																		$selectedComponent = actionButtons[actionIndex + 1].id
+																		$selectedComponent = [actionButtons[actionIndex + 1].id]
 																		return true
 																	}
 																	return false

package/components/apps/components/helpers/HiddenComponent.svelte

@@ -5,7 +5,8 @@ export let id;
 export let name;
 export let inlineScript;
 export let fields;
-export let doNotRecomputeOnInputChanged = false;
+export let doNotRecomputeOnInputChanged;
+export let recomputableByRefreshButton;
 let result = undefined;
 const { worldStore } = getContext('AppViewerContext');
 let outputs = initOutput($worldStore, id, {
@@ -28,8 +29,8 @@ let outputs = initOutput($worldStore, id, {
 		type: 'runnableByName'
 	}}
 	wrapperClass="hidden"
-	recomputable
 	{outputs}
+	{recomputableByRefreshButton}
 >
 	<slot />
 </RunnableComponent>

package/components/apps/components/helpers/HiddenComponent.svelte.d.ts

@@ -7,7 +7,8 @@ declare const __propDef: {
         name: string;
         inlineScript: InlineScript | undefined;
         fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
-        doNotRecomputeOnInputChanged?: boolean | undefined;
+        doNotRecomputeOnInputChanged: boolean;
+        recomputableByRefreshButton: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/helpers/RefreshButton.svelte

@@ -1,18 +1,11 @@
 <script>import { RefreshCw } from 'lucide-svelte';
 import { getContext } from 'svelte';
 export let componentId;
-const { runnableComponents, worldStore } = getContext('AppViewerContext');
+export let loading;
+const { runnableComponents } = getContext('AppViewerContext');
 async function refresh() {
-    window.dispatchEvent(new Event('pointerup'));
-    await $runnableComponents[componentId]?.();
+    await $runnableComponents[componentId]?.cb?.();
 }
-let loading = false;
-$: $worldStore?.outputsById[componentId]?.['loading']?.subscribe({
-    id: 'refresh-' + componentId,
-    next: (value) => {
-        loading = value;
-    }
-});
 </script>
 
 <button

package/components/apps/components/helpers/RefreshButton.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         componentId: string;
+        loading: boolean;
     };
     events: {
         pointerdown: PointerEvent;

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

@@ -23,19 +23,20 @@ export let wrapperClass = '';
 export let wrapperStyle = '';
 export let initializing = undefined;
 export let render;
-export let recomputable = false;
 export let outputs;
 export let extraKey = '';
 export let doNotRecomputeOnInputChanged = false;
 export let loading = false;
+export let recomputableByRefreshButton = true;
 const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode, stateId, state, componentControl } = getContext('AppViewerContext');
 const dispatch = createEventDispatcher();
-if (recomputable || autoRefresh) {
-    $runnableComponents[id] = async (inlineScript) => {
+$runnableComponents[id] = {
+    autoRefresh: autoRefresh && recomputableByRefreshButton,
+    cb: async (inlineScript) => {
         await executeComponent(true, inlineScript);
-    };
-    $runnableComponents = $runnableComponents;
-}
+    }
+};
+$runnableComponents = $runnableComponents;
 let args = undefined;
 let testIsLoading = false;
 let runnableInputValues = {};
@@ -310,7 +311,7 @@ async function setResult(res) {
 		{/if}
 		{#if !initializing && autoRefresh === true}
 			<div class="flex absolute top-1 right-1 z-50">
-				<RefreshButton componentId={id} />
+				<RefreshButton {loading} componentId={id} />
 			</div>
 		{/if}
 	</div>

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

@@ -18,7 +18,6 @@ declare const __propDef: {
         wrapperStyle?: string | undefined;
         initializing?: boolean | undefined;
         render: boolean;
-        recomputable?: boolean | undefined;
         outputs: {
             result: Output<any>;
             loading: Output<boolean>;
@@ -26,6 +25,7 @@ declare const __propDef: {
         extraKey?: string | undefined;
         doNotRecomputeOnInputChanged?: boolean | undefined;
         loading?: boolean | undefined;
+        recomputableByRefreshButton?: boolean | undefined;
         runComponent?: (() => Promise<void>) | undefined;
     };
     events: {

package/components/apps/components/helpers/RunnableWrapper.svelte

@@ -35,7 +35,7 @@ function isRunnableDefined(componentInput) {
 }
 export function onSuccess() {
     if (recomputeIds) {
-        recomputeIds.map((id) => $runnableComponents?.[id]?.());
+        recomputeIds.map((id) => $runnableComponents?.cb?.[id]?.());
     }
     if (!doOnSuccess)
         return;

package/components/apps/components/inputs/AppCheckbox.svelte

@@ -27,10 +27,6 @@ $: css = concatCustomCss($app.css?.checkboxcomponent, customCss);
 
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
 	<Toggle
-		on:pointerdown={(e) => {
-			e?.stopPropagation()
-			window.dispatchEvent(new Event('pointerup'))
-		}}
 		checked={defaultValue}
 		options={{ right: labelValue }}
 		textClass={css?.text?.class ?? ''}

package/components/apps/components/inputs/AppDateInput.svelte

@@ -35,14 +35,14 @@ $: css = concatCustomCss($app.css?.dateinputcomponent, customCss);
 <AlignWrapper {render} {verticalAlignment}>
 	{#if inputType === 'date'}
 		<input
-			on:focus={() => ($selectedComponent = id)}
+			on:focus={() => ($selectedComponent = [id])}
 			on:pointerdown|stopPropagation
 			type="date"
 			bind:value
 			min={minValue}
 			max={maxValue}
 			placeholder="Type..."
-			class={twMerge('mx-0.5', css?.input?.class ?? '')}
+			class={twMerge(css?.input?.class ?? '')}
 			style={css?.input?.style ?? ''}
 		/>
 	{/if}

package/components/apps/components/inputs/AppMultiSelect.svelte

@@ -42,7 +42,7 @@ $: css = concatCustomCss($app.css?.selectcomponent, customCss);
 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
 
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
-	<div class="app-select w-full mx-0.5" style="height: 34px" on:pointerdown|stopPropagation>
+	<div class="app-select w-full" style="height: 34px" on:pointerdown|stopPropagation>
 		{#if !value || Array.isArray(value)}
 			<Select
 				--border-radius="0"
@@ -58,11 +58,11 @@ $: css = concatCustomCss($app.css?.selectcomponent, customCss);
 				{placeholder}
 				on:click={() => {
 					if (!$connectingInput.opened) {
-						$selectedComponent = id
+						$selectedComponent = [id]
 					}
 				}}
 				on:focus={() => {
-					$selectedComponent = id
+					$selectedComponent = [id]
 				}}
 				floatingConfig={{
 					strategy: 'fixed'

package/components/apps/components/inputs/AppNumberInput.svelte

@@ -35,10 +35,10 @@ $: css = concatCustomCss($app.css?.numberinputcomponent, customCss);
 
 <AlignWrapper {render} {verticalAlignment}>
 	<input
-		on:pointerdown|stopPropagation={() => ($selectedComponent = id)}
-		on:focus={() => ($selectedComponent = id)}
+		on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
+		on:focus={() => ($selectedComponent = [id])}
 		class={twMerge(
-			'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
+			'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2',
 			css?.input?.class ?? ''
 		)}
 		style={css?.input?.style ?? ''}

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

@@ -43,7 +43,6 @@ function handleItems() {
 }
 function onChange(e) {
     e?.stopPropagation();
-    window.dispatchEvent(new Event('pointerup'));
     if (create) {
         listItems = listItems.map((i) => {
             delete i.created;
@@ -88,7 +87,7 @@ let filterText = '';
 <InputValue {id} input={configuration.create} bind:value={create} />
 
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
-	<div class="app-select w-full mx-0.5" style="height: 34px;" on:pointerdown|stopPropagation>
+	<div class="app-select w-full" style="height: 34px;" on:pointerdown|stopPropagation>
 		<Select
 			--border-radius="0"
 			--border-color="#999"
@@ -105,11 +104,11 @@ let filterText = '';
 			{placeholder}
 			on:click={() => {
 				if (!$connectingInput.opened) {
-					$selectedComponent = id
+					$selectedComponent = [id]
 				}
 			}}
 			on:focus={() => {
-				$selectedComponent = id
+				$selectedComponent = [id]
 			}}
 			floatingConfig={{
 				strategy: 'fixed'

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

@@ -59,7 +59,7 @@ $: if (css && slider && lastStyle !== css?.handle?.style) {
 			class="grow"
 			style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; {css?.bar?.style ??
 				''}"
-			on:pointerdown|stopPropagation={() => ($selectedComponent = id)}
+			on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
 		>
 			<RangeSlider bind:slider bind:values {step} min={+min} max={+max} />
 		</div>

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

@@ -1,7 +1,7 @@
 <script>import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { initOutput } from '../../editor/appUtils';
-import { concatCustomCss } from '../../utils';
+import { concatCustomCss, selectId } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 export let id;
@@ -33,12 +33,11 @@ $: css = concatCustomCss($app.css?.[appCssKey], customCss);
 	{#if inputType === 'password'}
 		<input
 			class={twMerge(
-				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
+				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 ',
 				css?.input?.class ?? ''
 			)}
 			style={css?.input?.style ?? ''}
-			on:focus|stopPropagation={() => ($selectedComponent = id)}
-			on:pointerdown|stopPropagation={() => ($selectedComponent = id)}
+			on:pointerdown|stopPropagation={(e) => selectId(e, id, selectedComponent, $app)}
 			type="password"
 			bind:value
 			{placeholder}
@@ -46,12 +45,11 @@ $: css = concatCustomCss($app.css?.[appCssKey], customCss);
 	{:else if inputType === 'text'}
 		<input
 			class={twMerge(
-				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
+				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 ',
 				css?.input?.class ?? ''
 			)}
 			style={css?.input?.style ?? ''}
-			on:focus={() => ($selectedComponent = id)}
-			on:pointerdown|stopPropagation={() => ($selectedComponent = id)}
+			on:pointerdown|stopPropagation={(e) => selectId(e, id, selectedComponent, $app)}
 			type="text"
 			bind:value
 			{placeholder}
@@ -59,12 +57,11 @@ $: css = concatCustomCss($app.css?.[appCssKey], customCss);
 	{:else if inputType === 'email'}
 		<input
 			class={twMerge(
-				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
+				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 ',
 				css?.input?.class ?? ''
 			)}
 			style={css?.input?.style ?? ''}
-			on:focus={() => ($selectedComponent = id)}
-			on:pointerdown|stopPropagation={() => ($selectedComponent = id)}
+			on:pointerdown|stopPropagation={(e) => selectId(e, id, selectedComponent, $app)}
 			type="email"
 			bind:value
 			{placeholder}

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

@@ -40,7 +40,7 @@ $: css = concatCustomCss($app.css?.currencycomponent, customCss);
 	{#key isNegativeAllowed}
 		{#key locale}
 			{#key currency}
-				<div class="w-full" on:pointerdown|stopPropagation={() => ($selectedComponent = id)}>
+				<div class="w-full" on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}>
 					<CurrencyInput
 						inputClasses={{
 							formatted: twMerge('px-2 w-full py-1.5 windmillapp', css?.input?.class),

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

@@ -15,7 +15,7 @@ function onFocus() {
         subGridIndex: 0
     };
 }
-$: $selectedComponent === id && onFocus();
+$: $selectedComponent?.includes(id) && onFocus();
 $: css = concatCustomCss($app.css?.containercomponent, customCss);
 </script>
 
@@ -29,7 +29,7 @@ $: css = concatCustomCss($app.css?.containercomponent, customCss);
 			subGridId={`${id}-0`}
 			containerHeight={componentContainerHeight}
 			on:focus={() => {
-				$selectedComponent = id
+				$selectedComponent = [id]
 			}}
 		/>
 	{/if}

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

@@ -38,7 +38,6 @@ $: css = concatCustomCss($app.css?.containercomponent, customCss);
 			{disabled}
 			on:pointerdown={(e) => {
 				e?.stopPropagation()
-				window.dispatchEvent(new Event('pointerup'))
 			}}
 			on:click={async (e) => {
 				$focusedGrid = {
@@ -80,7 +79,7 @@ $: css = concatCustomCss($app.css?.containercomponent, customCss);
 					subGridId={`${id}-0`}
 					containerHeight={1200}
 					on:focus={() => {
-						$selectedComponent = id
+						$selectedComponent = [id]
 					}}
 				/>
 			{/if}

package/components/apps/components/layout/AppSplitpanes.svelte

@@ -19,7 +19,7 @@ function onFocus() {
         subGridIndex: 0
     };
 }
-$: $selectedComponent === id && onFocus();
+$: $selectedComponent?.includes(id) && onFocus();
 $: css = concatCustomCss($app.css?.containercomponent, customCss);
 $componentControl[id] = {
     left: () => {
@@ -60,7 +60,7 @@ $: {
 				<div
 					class="w-full h-full"
 					on:pointerdown|stopPropagation={() => {
-						$selectedComponent = id
+						$selectedComponent = [id]
 						$focusedGrid = {
 							parentComponentId: id,
 							subGridIndex: index
@@ -77,7 +77,7 @@ $: {
 							subGridId={`${id}-${index}`}
 							containerHeight={horizontal ? undefined : componentContainerHeight - 8}
 							on:focus={() => {
-								$selectedComponent = id
+								$selectedComponent = [id]
 								$focusedGrid = {
 									parentComponentId: id,
 									subGridIndex: index

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

@@ -103,7 +103,7 @@ $: css = concatCustomCss($app.css?.tabscomponent, customCss);
 						? componentContainerHeight - tabHeight
 						: componentContainerHeight}
 					on:focus={() => {
-						$selectedComponent = id
+						$selectedComponent = [id]
 					}}
 				/>
 			{/each}

package/components/apps/editor/AppEditor.svelte

@@ -62,7 +62,7 @@ setContext('AppViewerContext', {
     mode,
     connectingInput,
     breakpoint,
-    runnableComponents,
+    runnableComponents: writable({}),
     appPath: path,
     workspace: $workspaceStore ?? '',
     onchange: () => saveDraft(),
@@ -83,7 +83,7 @@ setContext('AppEditorContext', {
     history,
     pickVariableCallback,
     ontextfocus: writable(undefined),
-    movingcomponent: writable(undefined),
+    movingcomponents: writable(undefined),
     selectedComponentInEditor: writable(undefined)
 });
 let timeout = undefined;
@@ -110,12 +110,11 @@ function hashchange(e) {
 $: previewing = $mode === 'preview';
 $: width = $breakpoint === 'sm' ? 'min-w-[400px] max-w-[656px]' : 'min-w-[710px] w-full';
 let selectedTab = 'insert';
-$: if ($selectedComponent) {
+let befSelected = undefined;
+$: if ($selectedComponent?.[0] != befSelected) {
+    befSelected = $selectedComponent?.[0];
     selectedTab = 'settings';
 }
-else {
-    selectedTab = 'insert';
-}
 let itemPicker = undefined;
 $: if ($pickVariableCallback) {
     itemPicker?.openDrawer();

package/components/apps/editor/AppEditorHeader.svelte

@@ -177,6 +177,11 @@ let lock = false;
 function onKeyDown(event) {
     if (lock)
         return;
+    let classes = event.target?.['className'];
+    if ((typeof classes === 'string' && classes.includes('inputarea')) ||
+        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
+        return;
+    }
     lock = true;
     switch (event.key) {
         case 'Z':