windmill-components 1.82.8 → 1.82.10

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, selectId } from '../../utils';
+import { concatCustomCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 export let id;
@@ -33,11 +33,12 @@ $: 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 ',
+				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
 				css?.input?.class ?? ''
 			)}
 			style={css?.input?.style ?? ''}
-			on:pointerdown|stopPropagation={(e) => selectId(e, id, selectedComponent, $app)}
+			on:focus|stopPropagation={() => ($selectedComponent = id)}
+			on:pointerdown|stopPropagation={() => ($selectedComponent = id)}
 			type="password"
 			bind:value
 			{placeholder}
@@ -45,11 +46,12 @@ $: 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 ',
+				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
 				css?.input?.class ?? ''
 			)}
 			style={css?.input?.style ?? ''}
-			on:pointerdown|stopPropagation={(e) => selectId(e, id, selectedComponent, $app)}
+			on:focus={() => ($selectedComponent = id)}
+			on:pointerdown|stopPropagation={() => ($selectedComponent = id)}
 			type="text"
 			bind:value
 			{placeholder}
@@ -57,11 +59,12 @@ $: 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 ',
+				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
 				css?.input?.class ?? ''
 			)}
 			style={css?.input?.style ?? ''}
-			on:pointerdown|stopPropagation={(e) => selectId(e, id, selectedComponent, $app)}
+			on:focus={() => ($selectedComponent = id)}
+			on:pointerdown|stopPropagation={() => ($selectedComponent = id)}
 			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,6 +15,7 @@ function onFocus() {
         subGridIndex: 0
     };
 }
+$: $selectedComponent === id && onFocus();
 $: css = concatCustomCss($app.css?.containercomponent, customCss);
 </script>
 
@@ -28,8 +29,7 @@ $: css = concatCustomCss($app.css?.containercomponent, customCss);
 			subGridId={`${id}-0`}
 			containerHeight={componentContainerHeight}
 			on:focus={() => {
-				$selectedComponent = [id]
-				onFocus()
+				$selectedComponent = id
 			}}
 		/>
 	{/if}

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

@@ -38,6 +38,7 @@ $: css = concatCustomCss($app.css?.containercomponent, customCss);
 			{disabled}
 			on:pointerdown={(e) => {
 				e?.stopPropagation()
+				window.dispatchEvent(new Event('pointerup'))
 			}}
 			on:click={async (e) => {
 				$focusedGrid = {
@@ -79,7 +80,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?.includes(id) && onFocus();
+$: $selectedComponent === 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

@@ -27,8 +27,6 @@ import ItemPicker from '../../ItemPicker.svelte';
 import VariableEditor from '../../VariableEditor.svelte';
 import { SecondaryMenu } from './settingsPanel/secondaryMenu';
 import { Component, Paintbrush, Plus } from 'lucide-svelte';
-import { findGridItem, findGridItemParentGrid } from './appUtils';
-import { findItemsById } from '../svelte-grid/utils/matrix';
 export let app;
 export let path;
 export let initialMode = 'dnd';
@@ -64,7 +62,7 @@ setContext('AppViewerContext', {
     mode,
     connectingInput,
     breakpoint,
-    runnableComponents: writable({}),
+    runnableComponents,
     appPath: path,
     workspace: $workspaceStore ?? '',
     onchange: () => saveDraft(),
@@ -79,14 +77,13 @@ setContext('AppViewerContext', {
     parentWidth: writable(0),
     state: writable({}),
     componentControl: writable({}),
-    hoverStore: writable(undefined),
-    allIdsInPath: writable([])
+    hoverStore: writable(undefined)
 });
 setContext('AppEditorContext', {
     history,
     pickVariableCallback,
     ontextfocus: writable(undefined),
-    movingcomponents: writable(undefined),
+    movingcomponent: writable(undefined),
     selectedComponentInEditor: writable(undefined)
 });
 let timeout = undefined;
@@ -113,36 +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';
-let befSelected = undefined;
-$: if ($selectedComponent?.[0] != befSelected) {
-    befSelected = $selectedComponent?.[0];
+$: if ($selectedComponent) {
     selectedTab = 'settings';
-    if (befSelected) {
-        if (!['ctx', 'state'].includes(befSelected) && !befSelected?.startsWith('bg_')) {
-            let item = findGridItem($appStore, befSelected);
-            if (item?.data.type === 'containercomponent') {
-                $focusedGrid = {
-                    parentComponentId: befSelected,
-                    subGridIndex: 0
-                };
-            }
-            else {
-                let subgrid = findGridItemParentGrid($appStore, befSelected);
-                if (subgrid) {
-                    try {
-                        $focusedGrid = {
-                            parentComponentId: subgrid.split('-')[0],
-                            subGridIndex: parseInt(subgrid.split('-')[1])
-                        };
-                    }
-                    catch { }
-                }
-                else {
-                    $focusedGrid = undefined;
-                }
-            }
-        }
-    }
+}
+else {
+    selectedTab = 'insert';
 }
 let itemPicker = undefined;
 $: if ($pickVariableCallback) {
@@ -236,6 +208,7 @@ let variableEditor = undefined;
 								<Tab value="insert" size="xs">
 									<div class="m-1 center-center gap-1">
 										<Plus size={18} />
+										<span>Insert</span>
 									</div>
 								</Tab>
 								<Tab value="settings" size="xs">
@@ -247,6 +220,7 @@ let variableEditor = undefined;
 								<Tab value="css" size="xs">
 									<div class="m-1 center-center gap-1">
 										<Paintbrush size={18} />
+										<span>Styling</span>
 									</div>
 								</Tab>
 								<div slot="content" class="h-full overflow-y-auto">

package/components/apps/editor/AppEditorHeader.svelte

@@ -177,11 +177,6 @@ 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':

package/components/apps/editor/AppPreview.svelte

@@ -10,8 +10,6 @@ import { Component } from './component';
 import { twMerge } from 'tailwind-merge';
 import { columnConfiguration } from '../gridUtils';
 import { HiddenComponent } from '../components';
-import { deepEqual } from 'fast-equals';
-import { dfs } from './appUtils';
 export let app;
 export let appPath;
 export let breakpoint;
@@ -30,7 +28,7 @@ const connectingInput = writable({
     input: undefined,
     hoveredComponent: undefined
 });
-const allIdsInPath = writable([]);
+const runnableComponents = writable({});
 const parentWidth = writable(0);
 setContext('AppViewerContext', {
     worldStore: buildWorld(context),
@@ -40,7 +38,7 @@ setContext('AppViewerContext', {
     mode,
     connectingInput,
     breakpoint,
-    runnableComponents: writable({}),
+    runnableComponents,
     appPath,
     workspace,
     onchange: undefined,
@@ -55,21 +53,13 @@ setContext('AppViewerContext', {
     parentWidth,
     state: writable({}),
     componentControl: writable({}),
-    hoverStore: writable(undefined),
-    allIdsInPath
+    hoverStore: writable(undefined)
 });
 let ncontext = context;
 function hashchange(e) {
     ncontext.hash = e.newURL.split('#')[1];
     ncontext = ncontext;
 }
-let previousSelectedIds = undefined;
-$: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
-    previousSelectedIds = $selectedComponent;
-    $allIdsInPath = ($selectedComponent ?? [])
-        .flatMap((id) => dfs(app.grid, id, app.subgrids ?? {}))
-        .filter((x) => x != undefined);
-}
 $: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full ';
 $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : '';
 </script>
@@ -110,7 +100,7 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 		>
 			<div>
 				<GridViewer
-					allIdsInPath={$allIdsInPath}
+					onTopId={$selectedComponent}
 					items={app.grid}
 					let:dataItem
 					rowHeight={36}
@@ -120,7 +110,7 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
 						class={'h-full w-full center-center'}
-						on:pointerdown={() => ($selectedComponent = [dataItem.id])}
+						on:pointerdown={() => ($selectedComponent = dataItem.id)}
 					>
 						<Component render={true} component={dataItem.data} selected={false} locked={true} />
 					</div>
@@ -151,8 +141,6 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 				inlineScript={script.inlineScript}
 				name={script.name}
 				fields={script.fields}
-				doNotRecomputeOnInputChanged={script.doNotRecomputeOnInputChanged ?? false}
-				recomputableByRefreshButton={script.autoRefresh ?? false}
 			/>
 		{/if}
 	{/each}

package/components/apps/editor/ComponentHeader.svelte

@@ -21,7 +21,6 @@ function openDebugRuns() {
 
 {#if selected || hover}
 	<span
-		on:mousedown|stopPropagation|capture
 		draggable="false"
 		title={`Id: ${component.id}`}
 		class={twMerge(

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

@@ -8,8 +8,8 @@ declare const __propDef: {
         hover?: boolean | undefined;
     };
     events: {
-        mousedown: MouseEvent;
         pointerdown: PointerEvent;
+        mousedown: MouseEvent;
         expand: CustomEvent<any>;
         lock: CustomEvent<any>;
     } & {

package/components/apps/editor/GridEditor.svelte

@@ -6,20 +6,12 @@ import RecomputeAllComponents from './RecomputeAllComponents.svelte';
 import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
 import Component from './component/Component.svelte';
 import { push } from '../../../history';
-import { dfs, expandGriditem, findGridItem } from './appUtils';
+import { expandGriditem, findGridItem } from './appUtils';
 import Grid from '../svelte-grid/Grid.svelte';
-import { selectId } from '../utils';
-import { deepEqual } from 'fast-equals';
+import Toggle from '../../Toggle.svelte';
 export let policy;
-const { selectedComponent, app, mode, connectingInput, runnableComponents, summary, focusedGrid, parentWidth, breakpoint, allIdsInPath } = getContext('AppViewerContext');
+const { selectedComponent, app, mode, connectingInput, runnableComponents, summary, focusedGrid, parentWidth, breakpoint } = getContext('AppViewerContext');
 const { history } = getContext('AppEditorContext');
-let previousSelectedIds = undefined;
-$: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
-    previousSelectedIds = $selectedComponent;
-    $allIdsInPath = ($selectedComponent ?? [])
-        .flatMap((id) => dfs($app.grid, id, $app.subgrids ?? {}))
-        .filter((x) => x != undefined);
-}
 function removeGridElement(component) {
     if (component) {
         $app.grid = $app.grid.filter((gridComponent) => {
@@ -45,9 +37,9 @@ function removeGridElement(component) {
         $selectedComponent = undefined;
     }
 }
-function selectComponent(e, id) {
+function selectComponent(id) {
     if (!$connectingInput.opened) {
-        selectId(e, id, selectedComponent, $app);
+        $selectedComponent = id;
         if ($focusedGrid?.parentComponentId != id) {
             $focusedGrid = undefined;
         }
@@ -89,8 +81,7 @@ function selectComponent(e, id) {
 	>
 		<div class={!$focusedGrid && $mode !== 'preview' ? 'border-gray-400 border border-dashed' : ''}>
 			<Grid
-				allIdsInPath={$allIdsInPath}
-				selectedIds={$selectedComponent}
+				onTopId={$selectedComponent}
 				items={$app.grid}
 				on:redraw={(e) => {
 					push(history, $app)
@@ -118,16 +109,16 @@ function selectComponent(e, id) {
 				{/if}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<div
-					on:pointerdown={(e) => selectComponent(e, dataItem.id)}
+					on:pointerdown={() => selectComponent(dataItem.id)}
 					class={classNames(
 						'h-full w-full center-center',
-						Boolean($selectedComponent?.includes(dataItem.id)) ? 'active-grid-item' : ''
+						$selectedComponent === dataItem.id ? 'active-grid-item' : ''
 					)}
 				>
 					<Component
 						render={true}
 						component={dataItem.data}
-						selected={Boolean($selectedComponent?.includes(dataItem.id))}
+						selected={$selectedComponent === dataItem.id}
 						locked={isFixed(dataItem)}
 						on:delete={() => removeGridElement(dataItem.data)}
 						on:lock={() => {
@@ -139,7 +130,7 @@ function selectComponent(e, id) {
 						}}
 						on:expand={() => {
 							push(history, $app)
-							$selectedComponent = [dataItem.id]
+							$selectedComponent = dataItem.id
 							expandGriditem($app.grid, dataItem.id, $breakpoint)
 							$app = $app
 						}}
@@ -158,8 +149,7 @@ function selectComponent(e, id) {
 				inlineScript={script.inlineScript}
 				name={script.name}
 				fields={script.fields}
-				doNotRecomputeOnInputChanged={script.doNotRecomputeOnInputChanged ?? false}
-				recomputableByRefreshButton={script.autoRefresh ?? false}
+				doNotRecomputeOnInputChanged={script.doNotRecomputeOnInputChanged}
 			/>
 		{/if}
 	{/each}

package/components/apps/editor/GridViewer.svelte

@@ -8,7 +8,7 @@ export let rowHeight;
 export let cols;
 export let gap = [10, 10];
 export let throttleUpdate = 100;
-export let allIdsInPath = undefined;
+export let onTopId = undefined;
 export let containerWidth = undefined;
 export let parentWidth = undefined;
 let getComputedCols;
@@ -56,7 +56,7 @@ onMount(() => {
 <div class="svlt-grid-container" style="height: {containerHeight}px" bind:this={container}>
 	{#if xPerPx}
 		{#each items as item (item.id)}
-			{@const onTop = allIdsInPath?.includes(item.id)}
+			{@const onTop = item.id == onTopId}
 			{@const width =
 				Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) * xPerPx -
 				gapX * 2}

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

@@ -7,7 +7,7 @@ declare class __sveltets_Render<T> {
         cols: [number, number][];
         gap?: number[] | undefined;
         throttleUpdate?: number | undefined;
-        allIdsInPath?: string[] | undefined;
+        onTopId?: string | undefined;
         containerWidth?: number | undefined;
         parentWidth?: number | undefined;
     };

package/components/apps/editor/RecomputeAllComponents.svelte

@@ -13,7 +13,7 @@ $: !firstLoad &&
     $worldStore.initializedOutputs ==
         allItems($app.grid, $app.subgrids).length + $app.hiddenInlineScripts.length &&
     refresh();
-$: componentNumber = Object.values($runnableComponents).filter((x) => x.autoRefresh).length;
+$: componentNumber = Object.keys($runnableComponents).length;
 function onClick(stopAfterClear = true) {
     if (timeout) {
         clearInterval(timeout);
@@ -39,10 +39,13 @@ function refresh() {
     }
     loading = true;
     Promise.all(Object.keys($runnableComponents).map((id) => {
-        if (!$runnableComponents?.[id]?.autoRefresh) {
-            return;
+        if (id.startsWith('bg_')) {
+            let index = parseInt(id.split('_')[1]);
+            if (!$app.hiddenInlineScripts[index]?.autoRefresh) {
+                return;
+            }
         }
-        return $runnableComponents?.[id]?.cb?.();
+        return $runnableComponents?.[id]?.();
     })).finally(() => {
         loading = false;
     });
@@ -71,7 +74,6 @@ onMount(() => {
 
 <div class="flex items-center">
 	<Button
-		disabled={componentNumber == 0}
 		on:click={() => onClick()}
 		color={timeout ? 'blue' : 'light'}
 		variant={timeout ? 'contained' : 'border'}

package/components/apps/editor/SettingsPanel.svelte

@@ -10,9 +10,9 @@ import BackgroundScriptTriggerList from './settingsPanel/triggerLists/Background
 const { selectedComponent, app, stateId } = getContext('AppViewerContext');
 $: hiddenInlineScript = $app?.hiddenInlineScripts
     ?.map((x, i) => ({ script: x, index: i }))
-    .find(({ script, index }) => $selectedComponent?.includes(`bg_${index}`));
-$: componentSettings = findComponentSettings($app, $selectedComponent?.[0]);
-$: tableActionSettings = findTableActionSettings($app, $selectedComponent?.[0]);
+    .find(({ script, index }) => `bg_${index}` === $selectedComponent);
+$: componentSettings = findComponentSettings($app, $selectedComponent);
+$: tableActionSettings = findTableActionSettings($app, $selectedComponent);
 function findTableActionSettings(app, id) {
     return allItems(app.grid, app.subgrids)
         .map((x) => {

package/components/apps/editor/SubGridEditor.svelte

@@ -7,7 +7,6 @@ import { expandGriditem, findGridItem } from './appUtils';
 import { push } from '../../../history';
 import Grid from '../svelte-grid/Grid.svelte';
 import GridViewer from './GridViewer.svelte';
-import { selectId } from '../utils';
 export let containerHeight = undefined;
 export let containerWidth = undefined;
 let classes = '';
@@ -20,15 +19,16 @@ export let visible = true;
 export let id;
 export let shouldHighlight = true;
 const dispatch = createEventDispatcher();
-const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth, breakpoint, allIdsInPath } = getContext('AppViewerContext');
+const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth, breakpoint } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
 $: highlight = id === $focusedGrid?.parentComponentId && shouldHighlight;
 const onpointerdown = (e) => {
     dispatch('focus');
 };
-function selectComponent(e, id) {
+function selectComponent(id) {
     if (!$connectingInput.opened) {
-        selectId(e, id, selectedComponent, $app);
+        dispatch('focus');
+        $selectedComponent = id;
     }
 }
 function lock(dataItem) {
@@ -60,7 +60,6 @@ let container = undefined;
 		{#if $mode !== 'preview'}
 			<div class={highlight ? 'border-gray-400  border border-dashed min-h-full' : ''}>
 				<Grid
-					allIdsInPath={$allIdsInPath}
 					items={$app.subgrids?.[subGridId] ?? []}
 					on:redraw={(e) => {
 						push(editorContext?.history, $app)
@@ -68,7 +67,7 @@ let container = undefined;
 							$app.subgrids[subGridId] = e.detail
 						}
 					}}
-					selectedIds={$selectedComponent}
+					onTopId={$selectedComponent}
 					let:dataItem
 					rowHeight={36}
 					cols={columnConfiguration}
@@ -95,17 +94,17 @@ let container = undefined;
 
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
-						on:pointerdown={(e) => selectComponent(e, dataItem.id)}
+						on:pointerdown={() => selectComponent(dataItem.id)}
 						class={classNames(
 							'h-full w-full center-center',
-							$selectedComponent?.includes(dataItem.id) ? 'active-grid-item' : '',
+							$selectedComponent === dataItem.id ? 'active-grid-item' : '',
 							'top-0'
 						)}
 					>
 						<Component
 							render={visible}
 							component={dataItem.data}
-							selected={Boolean($selectedComponent?.includes(dataItem.id))}
+							selected={$selectedComponent === dataItem.id}
 							locked={isFixed(dataItem)}
 							on:lock={() => lock(dataItem)}
 							on:expand={() => {
@@ -114,7 +113,7 @@ let container = undefined;
 								if (!parentGridItem) {
 									return
 								}
-								$selectedComponent = [dataItem.id]
+								$selectedComponent = dataItem.id
 								push(editorContext?.history, $app)
 
 								expandGriditem(
@@ -131,7 +130,7 @@ let container = undefined;
 			</div>
 		{:else}
 			<GridViewer
-				allIdsInPath={$allIdsInPath}
+				onTopId={$selectedComponent}
 				items={$app.subgrids?.[subGridId] ?? []}
 				let:dataItem
 				rowHeight={36}
@@ -142,13 +141,13 @@ let container = undefined;
 			>
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<div
-					on:pointerdown|stopPropagation={(e) => selectComponent(e, dataItem.id)}
+					on:pointerdown={() => selectComponent(dataItem.id)}
 					class={classNames('h-full w-full center-center', 'top-0')}
 				>
 					<Component
 						render={visible}
 						component={dataItem.data}
-						selected={Boolean($selectedComponent?.includes(dataItem.id))}
+						selected={$selectedComponent === dataItem.id}
 						locked={isFixed(dataItem)}
 					/>
 				</div>

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

@@ -3,7 +3,6 @@ import { components, type AppComponent, type BaseComponent } from './component';
 import type { Output, World } from '../rx';
 import type { FilledItem } from '../svelte-grid/types';
 import type { EvalAppInput, StaticAppInput } from '../inputType';
-export declare function dfs(grid: GridItem[], id: string, subgrids: Record<string, GridItem[]>): string[] | undefined;
 export declare function findGridItemParentGrid(app: App, id: string): string | undefined;
 export declare function allsubIds(app: App, parentId: string): string[];
 export declare function findGridItem(app: App, id: string): GridItem | undefined;

package/components/apps/editor/appUtils.js

@@ -3,25 +3,6 @@ import { ccomponents, components, getRecommendedDimensionsByComponent } from './
 import { gridColumns } from '../gridUtils';
 import { allItems } from '../utils';
 import gridHelp from '../svelte-grid/utils/helper';
-export function dfs(grid, id, subgrids) {
-    for (const item of grid) {
-        if (item.id === id) {
-            return [id];
-        }
-        else if (item.data.type == 'tablecomponent' && item.data.actionButtons.find((x) => x.id)) {
-            return [item.id, id];
-        }
-        else {
-            for (let i = 0; i < (item.data.numberOfSubgrids ?? 0); i++) {
-                const res = dfs(subgrids[`${item.id}-${i}`], id, subgrids);
-                if (res) {
-                    return [item.id, ...res];
-                }
-            }
-        }
-    }
-    return undefined;
-}
 function findGridItemById(root, subGrids, id) {
     for (const gridItem of allItems(root, subGrids)) {
         if (gridItem.id === id) {