windmill-components 1.558.4 → 1.596.0

package/package/components/apps/editor/appPolicy.js

@@ -0,0 +1,186 @@
+import { Sha256 } from '@aws-crypto/sha256-js';
+import { getCountInput } from '../components/display/dbtable/queries/count';
+import { getDeleteInput } from '../components/display/dbtable/queries/delete';
+import { getInsertInput } from '../components/display/dbtable/queries/insert';
+import { getSelectInput } from '../components/display/dbtable/queries/select';
+import { getUpdateInput } from '../components/display/dbtable/queries/update';
+import { getPrimaryKeys } from '../components/display/dbtable/utils';
+import { isRunnableByName, isRunnableByPath } from '../inputType';
+import { computeS3FileInputPolicy, computeWorkspaceS3FileInputPolicy, computeS3FileViewerPolicy } from './appUtilsS3';
+import { collectStaticFields } from './commonAppUtils';
+import { collectOneOfFields, allItems, BG_PREFIX } from './appUtilsCore';
+export async function updatePolicy(app, currentPolicy) {
+    const items = allItems(app.grid, app.subgrids);
+    const allTriggers = (await Promise.all(items
+        .flatMap((x) => {
+        let c = x.data;
+        let r = [
+            { input: c.componentInput, id: x.id }
+        ];
+        if (c.type === 'tablecomponent') {
+            r.push(...c.actionButtons.map((x) => ({ input: x.componentInput, id: x.id })));
+        }
+        if ((c.type === 'aggridcomponent' ||
+            c.type === 'aggridcomponentee' ||
+            c.type === 'dbexplorercomponent' ||
+            c.type === 'aggridinfinitecomponent' ||
+            c.type === 'aggridinfinitecomponentee') &&
+            Array.isArray(c.actions)) {
+            r.push(...c.actions.map((x) => ({ input: x.componentInput, id: x.id })));
+        }
+        if (c.type === 'menucomponent') {
+            r.push(...c.menuItems.map((x) => ({ input: x.componentInput, id: x.id })));
+        }
+        if (c.type === 'dbexplorercomponent') {
+            let nr = [];
+            let config = c.configuration;
+            const dbType = config?.type?.selected;
+            let pg = config?.type?.configuration?.[dbType];
+            if (pg && dbType) {
+                const { table, resource, ducklake } = pg;
+                const tableValue = table.value;
+                const dbPath = resource?.value.split('$res:')[1] ??
+                    ducklake?.value?.split('ducklake://')[1];
+                const columnDefs = c.configuration.columnDefs.value;
+                const whereClause = c.configuration.whereClause.value;
+                if (tableValue && dbPath && columnDefs) {
+                    let dbInput = ducklake
+                        ? { type: 'ducklake', ducklake: dbPath }
+                        : { type: 'database', resourcePath: dbPath, resourceType: dbType };
+                    r.push({
+                        input: getSelectInput(dbInput, tableValue, columnDefs, whereClause),
+                        id: x.id
+                    });
+                    r.push({
+                        input: getCountInput(dbInput, tableValue, columnDefs, whereClause),
+                        id: x.id + '_count'
+                    });
+                    r.push({
+                        input: getInsertInput(dbInput, tableValue, columnDefs),
+                        id: x.id + '_insert'
+                    });
+                    let primaryColumns = getPrimaryKeys(columnDefs);
+                    let columns = columnDefs?.filter((x) => primaryColumns.includes(x.field));
+                    r.push({
+                        input: getDeleteInput(dbInput, tableValue, columns),
+                        id: x.id + '_delete'
+                    });
+                    columnDefs
+                        .filter((col) => col.editable || config.allEditable.value)
+                        .forEach((column) => {
+                        r.push({
+                            input: getUpdateInput(dbInput, tableValue, column, columns),
+                            id: x.id + '_update'
+                        });
+                    });
+                }
+            }
+            r.push(...nr);
+        }
+        const processed = r
+            .filter((x) => x.input)
+            .map(async (o) => {
+            if (o.input?.type == 'runnable') {
+                return await processRunnable(o.id, o.input.runnable, o.input.fields, app);
+            }
+        });
+        return processed;
+    })
+        .concat(Object.values(app.hiddenInlineScripts ?? {}).map(async (v, i) => {
+        return await processRunnable(BG_PREFIX + i, v, v.fields, app);
+    }))));
+    const ntriggerables = Object.fromEntries(allTriggers.filter(Boolean));
+    const s3_inputs = items
+        .filter((x) => x.data.type === 's3fileinputcomponent')
+        .map((x) => {
+        const c = x.data;
+        const config = c.configuration;
+        return computeS3FileInputPolicy(config?.type?.configuration?.s3, app);
+    })
+        .filter(Boolean);
+    if (items.findIndex((x) => {
+        const c = x.data;
+        if (c.type === 'schemaformcomponent' ||
+            c.type === 'formbuttoncomponent' ||
+            c.type === 'formcomponent') {
+            const props = c.type === 'schemaformcomponent'
+                ? c.componentInput?.value?.properties
+                : isRunnableByName(c.componentInput?.runnable)
+                    ? c.componentInput?.runnable?.inlineScript?.schema?.properties
+                    : c.componentInput?.runnable?.schema?.properties;
+            return (Object.values(props ?? {}).findIndex((p) => (p?.type === 'object' && p?.format === 'resource-s3_object') ||
+                (p?.type === 'array' &&
+                    (p?.items?.resourceType === 's3object' || p?.items?.resourceType === 's3_object'))) !== -1);
+        }
+        else {
+            return false;
+        }
+    }) !== -1) {
+        s3_inputs.push(computeWorkspaceS3FileInputPolicy());
+    }
+    const s3FileKeys = items
+        .filter((x) => x.data.type === 'imagecomponent' ||
+        x.data.type === 'pdfcomponent' ||
+        x.data.type === 'downloadcomponent')
+        .map((x) => {
+        const c = x.data;
+        const config = c.configuration;
+        return computeS3FileViewerPolicy(config);
+    })
+        .filter(Boolean);
+    return {
+        ...(currentPolicy ?? {}),
+        allowed_s3_keys: s3FileKeys,
+        s3_inputs,
+        triggerables_v2: ntriggerables
+    };
+}
+export async function processRunnable(id, runnable, fields, app) {
+    const staticInputs = collectStaticFields(fields);
+    const oneOfInputs = collectOneOfFields(fields, app);
+    const allowUserResources = Object.entries(fields)
+        .map(([k, v]) => {
+        return v['allowUserResources'] ? k : undefined;
+    })
+        .filter(Boolean);
+    if (isRunnableByName(runnable)) {
+        let hex = await hash(runnable.inlineScript?.content);
+        console.debug('hex', hex, id);
+        return [
+            `${id}:rawscript/${hex}`,
+            {
+                static_inputs: staticInputs,
+                one_of_inputs: oneOfInputs,
+                allow_user_resources: allowUserResources
+            }
+        ];
+    }
+    else if (isRunnableByPath(runnable)) {
+        let prefix = runnable.runType !== 'hubscript' ? runnable.runType : 'script';
+        return [
+            `${id}:${prefix}/${runnable.path}`,
+            {
+                static_inputs: staticInputs,
+                one_of_inputs: oneOfInputs,
+                allow_user_resources: allowUserResources
+            }
+        ];
+    }
+}
+async function hash(message) {
+    try {
+        const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
+        const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8); // hash the message
+        const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
+        const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
+        return hashHex;
+    }
+    catch {
+        //subtle not available, trying pure js
+        const hash = new Sha256();
+        hash.update(message ?? '');
+        const result = Array.from(await hash.digest());
+        const hex = result.map((b) => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
+        return hex;
+    }
+}

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

@@ -2,7 +2,7 @@ import type { App, BaseAppComponent, ComponentCustomCSS, ConnectingInput, Editor
 import { components, type AppComponent, type BaseComponent, type InitialAppComponent, type TypedComponent } from './component';
 import type { Output, World } from '../rx';
 import type { FilledItem, Size } from '../svelte-grid/types';
-import type { StaticAppInput, EvalAppInput, EvalV2AppInput, StaticAppInputOnDemand, AppInputs } from '../inputType';
+import type { StaticAppInput, EvalAppInput, EvalV2AppInput, StaticAppInputOnDemand } from '../inputType';
 import { type Writable } from 'svelte/store';
 type GridItemLocation = {
     type: 'grid';
@@ -31,7 +31,6 @@ export declare function selectId(e: PointerEvent, id: string, selectedComponent:
 export declare function connectOutput(connectingInput: Writable<ConnectingInput>, typ: TypedComponent['type'], id: string, spath: string): void;
 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;
 export declare function getNextGridItemId(app: App): string;
 export declare function getAllRecomputeIdsForComponent(app: App, id: string | undefined): string[];
 export declare function createNewGridItem(grid: GridItem[], id: string, data: AppComponent, columns?: Record<number, any>, initialPosition?: {
@@ -99,7 +98,6 @@ export declare function expandGriditem(grid: GridItem[], id: string, $breakpoint
 export declare function sortGridItemsPosition<T>(gridItems: FilledItem<T>[], width: number): FilledItem<T>[];
 export declare function connectInput(connectingInput: ConnectingInput, componentId: string, path: string, componentType?: TypedComponent['type']): ConnectingInput;
 export declare function recursivelyFilterKeyInJSON(json: object, search: string, extraSearch?: string | undefined): object;
-export declare function collectOneOfFields(fields: AppInputs, app: App): Record<string, any[]>;
 export declare const ROW_HEIGHT = 36;
 export declare const ROW_GAP_Y = 2;
 export declare const ROW_GAP_X = 4;

package/package/components/apps/editor/appUtils.js

@@ -1,6 +1,6 @@
 import { ccomponents, components, getRecommendedDimensionsByComponent, presets, processDimension } from './component';
 import { gridColumns } from '../gridUtils';
-import { allItems, processSubcomponents } from '../utils';
+import { processSubcomponents } from '../utils';
 import { get } from 'svelte/store';
 import { deepMergeWithPriority } from '../../../utils';
 import { sendUserToast } from '../../../toast';
@@ -8,6 +8,7 @@ import { getNextId } from '../../flows/idUtils';
 import { enterpriseLicense } from '../../../stores';
 import gridHelp from '../svelte-grid/utils/helper';
 import { DEFAULT_THEME } from './componentsPanel/themeUtils';
+import { allItems, findGridItem, findGridItemById } from './appUtilsCore';
 export function allItemsWithLocation(grid, subgrids) {
     const gridItems = grid.map((x, i) => ({
         location: {
@@ -156,14 +157,6 @@ export function connectOutput(connectingInput, typ, id, spath) {
         connectingInput.set(connectInput(get(connectingInput), componentId, path, typ));
     }
 }
-function findGridItemById(root, subGrids, id) {
-    for (const gridItem of allItems(root, subGrids)) {
-        if (gridItem.id === id) {
-            return gridItem;
-        }
-    }
-    return undefined;
-}
 export function findGridItemParentGrid(app, id) {
     const gridItem = app.grid.find((x) => x.id === id);
     if (gridItem || app.subgrids === undefined) {
@@ -203,9 +196,6 @@ export function allsubIds(app, parentId) {
     }
     return getAllSubgridsAndComponentIds(app, item?.data)[1];
 }
-export function findGridItem(app, id) {
-    return findGridItemById(app.grid, app.subgrids, id);
-}
 export function getNextGridItemId(app) {
     const allIds = allItems(app.grid, app.subgrids).flatMap((x) => {
         if (x.data.type === 'tablecomponent') {
@@ -717,54 +707,6 @@ export function recursivelyFilterKeyInJSON(json, search, extraSearch) {
     });
     return filteredJSON;
 }
-export function collectOneOfFields(fields, app) {
-    return Object.fromEntries(Object.entries(fields ?? {})
-        .filter(([k, v]) => v.type == 'evalv2')
-        .map(([k, v]) => {
-        let field = v;
-        if (!field.connections || field.connections.length !== 1) {
-            return [k, undefined];
-        }
-        const c = field.connections[0];
-        const gridItem = findGridItem(app, c.componentId);
-        if (field.expr !== c.componentId + '.' + c.id) {
-            return [k, undefined];
-        }
-        if (gridItem) {
-            const c = gridItem.data;
-            if (c) {
-                if (c.type === 'resourceselectcomponent' ||
-                    c.type === 'selectcomponent' ||
-                    c.type === 'multiselectcomponent' ||
-                    c.type === 'multiselectcomponentv2') {
-                    if ((c.type === 'selectcomponent' ||
-                        c.type === 'multiselectcomponent' ||
-                        c.type === 'multiselectcomponentv2') &&
-                        c.configuration?.create?.type === 'static' &&
-                        c.configuration?.create?.value === true) {
-                        return [k, undefined];
-                    }
-                    if (c.configuration?.items?.type === 'static') {
-                        const items = c.configuration.items.value;
-                        if (items && Array.isArray(items)) {
-                            if (c.type === 'multiselectcomponent' || c.type === 'multiselectcomponentv2') {
-                                return [k, items];
-                            }
-                            else {
-                                const options = items
-                                    .filter((item) => item && typeof item === 'object' && 'value' in item && item.value)
-                                    .map((item) => item.value);
-                                return [k, options];
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        return [k, undefined];
-    })
-        .filter(([k, v]) => v !== undefined));
-}
 export const ROW_HEIGHT = 36;
 export const ROW_GAP_Y = 2;
 export const ROW_GAP_X = 4;

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

@@ -0,0 +1,7 @@
+import type { AppInputs } from '../inputType';
+import type { App, GridItem } from '../types';
+export declare const BG_PREFIX = "bg_";
+export declare function findGridItemById(root: GridItem[], subGrids: Record<string, GridItem[]> | undefined, id: string): GridItem | undefined;
+export declare function allItems(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): GridItem[];
+export declare function findGridItem(app: App, id: string): GridItem | undefined;
+export declare function collectOneOfFields(fields: AppInputs, app: App): Record<string, any[]>;

package/package/components/apps/editor/appUtilsCore.js

@@ -0,0 +1,66 @@
+export const BG_PREFIX = 'bg_';
+export function findGridItemById(root, subGrids, id) {
+    for (const gridItem of allItems(root, subGrids)) {
+        if (gridItem.id === id) {
+            return gridItem;
+        }
+    }
+    return undefined;
+}
+export function allItems(grid, subgrids) {
+    if (subgrids == undefined) {
+        return grid ?? [];
+    }
+    return [...(grid ?? []), ...Object.values(subgrids).flat()];
+}
+export function findGridItem(app, id) {
+    return findGridItemById(app.grid, app.subgrids, id);
+}
+export function collectOneOfFields(fields, app) {
+    return Object.fromEntries(Object.entries(fields ?? {})
+        .filter(([k, v]) => v.type == 'evalv2')
+        .map(([k, v]) => {
+        let field = v;
+        if (!field.connections || field.connections.length !== 1) {
+            return [k, undefined];
+        }
+        const c = field.connections[0];
+        const gridItem = findGridItem(app, c.componentId);
+        if (field.expr !== c.componentId + '.' + c.id) {
+            return [k, undefined];
+        }
+        if (gridItem) {
+            const c = gridItem.data;
+            if (c) {
+                if (c.type === 'resourceselectcomponent' ||
+                    c.type === 'selectcomponent' ||
+                    c.type === 'multiselectcomponent' ||
+                    c.type === 'multiselectcomponentv2') {
+                    if ((c.type === 'selectcomponent' ||
+                        c.type === 'multiselectcomponent' ||
+                        c.type === 'multiselectcomponentv2') &&
+                        c.configuration?.create?.type === 'static' &&
+                        c.configuration?.create?.value === true) {
+                        return [k, undefined];
+                    }
+                    if (c.configuration?.items?.type === 'static') {
+                        const items = c.configuration.items.value;
+                        if (items && Array.isArray(items)) {
+                            if (c.type === 'multiselectcomponent' || c.type === 'multiselectcomponentv2') {
+                                return [k, items];
+                            }
+                            else {
+                                const options = items
+                                    .filter((item) => item && typeof item === 'object' && 'value' in item && item.value)
+                                    .map((item) => item.value);
+                                return [k, options];
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return [k, undefined];
+    })
+        .filter(([k, v]) => v !== undefined));
+}

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

@@ -1,5 +1,4 @@
 import type { App, RichConfigurations } from '../types';
-import { z } from 'zod';
 export declare function computeWorkspaceS3FileInputPolicy(): {
     allow_workspace_resource: boolean;
     allowed_resources: never[];
@@ -12,22 +11,23 @@ export declare function computeS3FileInputPolicy(s3Config: any, app: App): {
     allow_user_resources: boolean;
     file_key_regex: string;
 };
-declare const partialS3ObjectSchema: z.ZodObject<{
-    s3: z.ZodString;
-    storage: z.ZodOptional<z.ZodString>;
-    presigned: z.ZodOptional<z.ZodString>;
-}, "strip", z.ZodTypeAny, {
+export declare function isPartialS3Object(input: unknown): input is {
     s3: string;
-    storage?: string | undefined;
-    presigned?: string | undefined;
-}, {
-    s3: string;
-    storage?: string | undefined;
-    presigned?: string | undefined;
-}>;
-export declare function isPartialS3Object(input: unknown): input is z.infer<typeof partialS3ObjectSchema>;
-export declare function computeS3ImageViewerPolicy(config: RichConfigurations): {
+    storage?: string;
+    presigned?: string;
+};
+export declare function getS3File({ source, storage, presigned, appPath, username, workspace, token, isEditor, configuration }: {
+    source: string | undefined;
+    storage?: string;
+    presigned?: string;
+    appPath: string;
+    username: string | undefined;
+    workspace: string;
+    token: string | undefined;
+    isEditor: boolean;
+    configuration: RichConfigurations;
+}): Promise<string>;
+export declare function computeS3FileViewerPolicy(config: RichConfigurations): {
     s3_path: string;
     storage: string | undefined;
 } | undefined;
-export {};

package/package/components/apps/editor/appUtilsS3.js

@@ -1,5 +1,4 @@
-import { collectOneOfFields } from './appUtils';
-import { z } from 'zod';
+import { collectOneOfFields } from './appUtilsCore';
 function filenameExprToRegex(template) {
     const filenameEscaped = template.replaceAll('${file.name}', '<file_name>'); // replace filename with placeholder
     const escapedTemplate = filenameEscaped
@@ -8,6 +7,9 @@ function filenameExprToRegex(template) {
     const regexPattern = escapedTemplate.replaceAll('<file_name>', '[^/]+'); // replace filename placeholder with regex pattern
     return `^${regexPattern}$`;
 }
+function defaultIfEmptyString(str, dflt) {
+    return str === undefined || str === null || str === '' ? dflt : str;
+}
 function staticToRegex(str) {
     return `^${str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`;
 }
@@ -64,15 +66,35 @@ export function computeS3FileInputPolicy(s3Config, app) {
         file_key_regex
     };
 }
-const partialS3ObjectSchema = z.object({
-    s3: z.string(),
-    storage: z.string().optional(),
-    presigned: z.string().optional()
-});
 export function isPartialS3Object(input) {
-    return partialS3ObjectSchema.safeParse(input).success;
+    return input != undefined && typeof input === 'object' && typeof input['s3'] === 'string';
+}
+function computeForceViewerPolicies({ isEditor, configuration }) {
+    if (!isEditor) {
+        return undefined;
+    }
+    const policy = computeS3FileViewerPolicy(configuration);
+    return policy;
+}
+export async function getS3File({ source, storage, presigned, appPath, username, workspace, token, isEditor, configuration }) {
+    if (!source)
+        return '';
+    const appPathOrUser = defaultIfEmptyString(appPath, `u/${username ?? 'unknown'}/newapp`);
+    const params = new URLSearchParams();
+    params.append('s3', source);
+    if (storage) {
+        params.append('storage', storage);
+    }
+    if (token && token != '') {
+        params.append('token', token);
+    }
+    const forceViewerPolicies = computeForceViewerPolicies({ isEditor, configuration });
+    if (forceViewerPolicies) {
+        params.append('force_viewer_allowed_s3_keys', JSON.stringify([forceViewerPolicies]));
+    }
+    return `/api/w/${workspace}/apps_u/download_s3_file/${appPathOrUser}?${params.toString()}${presigned ? `&${presigned}` : ''}`;
 }
-export function computeS3ImageViewerPolicy(config) {
+export function computeS3FileViewerPolicy(config) {
     if (config.source.type === 'uploadS3' && isPartialS3Object(config.source.value)) {
         return {
             s3_path: config.source.value.s3,

package/package/components/apps/editor/component/ComponentInner.svelte

@@ -15,6 +15,7 @@ import AppQuillEditor from '../../components/inputs/AppQuillEditor.svelte';
 import AppList from '../../components/layout/AppList.svelte';
 import AppJobIdLogComponent from '../../components/display/AppJobIdLogComponent.svelte';
 import AppJobIdFlowStatus from '../../components/display/AppJobIdFlowStatus.svelte';
+import AppJobProgressBar from '../../components/display/AppJobProgressBar.svelte';
 import AppCarouselList from '../../components/display/AppCarouselList.svelte';
 import AppAccordionList from '../../components/display/AppAccordionList.svelte';
 import AppAggridTableEe from '../../components/display/table/AppAggridTableEe.svelte';
@@ -51,6 +52,7 @@ import AppTextInput from '../../components/inputs/AppTextInput.svelte';
 import AppDateInput from '../../components/inputs/AppDateInput.svelte';
 import AppSelect from '../../components/inputs/AppSelect.svelte';
 import AppBarChart from '../../components/display/AppBarChart.svelte';
+import AppChat from '../../components/display/AppChat.svelte';
 import AppDivider from '../../components/layout/AppDivider.svelte';
 import AppRangeInput from '../../components/inputs/AppRangeInput.svelte';
 import AppTabs from '../../components/layout/AppTabs.svelte';
@@ -90,6 +92,7 @@ const chunk2Components = new Set([
     'carousellistcomponent',
     'chartjscomponent',
     'chartjscomponentv2',
+    'chatcomponent',
     'checkboxcomponent',
     'codeinputcomponent',
     'conditionalwrapper',
@@ -124,6 +127,7 @@ const chunk4Components = new Set([
 ]);
 const chunk5Components = new Set([
     'jobidlogcomponent',
+    'jobprogressbarcomponent',
     'listcomponent',
     'logcomponent',
     'mapcomponent',
@@ -320,6 +324,16 @@ const chunk9Components = new Set(['verticalsplitpanescomponent']);
 				xData={component.xData}
 				{render}
 			/>
+		{:else if component.type === 'chatcomponent'}
+			<AppChat
+				id={component.id}
+				configuration={component.configuration}
+				componentInput={component.componentInput}
+				customCss={component.customCss}
+				recomputeIds={component.recomputeIds}
+				bind:errorHandledByComponent
+				{render}
+			/>
 		{:else if component.type === 'checkboxcomponent'}
 			<AppCheckbox
 				id={component.id}
@@ -573,6 +587,14 @@ const chunk9Components = new Set(['verticalsplitpanescomponent']);
 				configuration={component.configuration}
 				{render}
 			/>
+		{:else if component.type === 'jobprogressbarcomponent'}
+			<AppJobProgressBar
+				id={component.id}
+				customCss={component.customCss}
+				bind:initializing
+				configuration={component.configuration}
+				{render}
+			/>
 		{:else if component.type === 'listcomponent'}
 			<AppList
 				id={component.id}
@@ -943,7 +965,7 @@ const chunk9Components = new Set(['verticalsplitpanescomponent']);
 				>{error}</pre
 			>
 			<div class="flex mt-4">
-				<Button wrapperClasses="border rounded !border-gray-400" color="dark" on:click={reset}
+				<Button wrapperClasses="border rounded !border-gray-400" variant="accent" on:click={reset}
 					>reset</Button
 				>
 			</div>

package/package/components/apps/editor/component/componentCallbacks.svelte.js

@@ -1,11 +1,12 @@
 // import { getContext } from 'svelte'
-import { copyComponent, findGridItem, findGridItemParentGrid, getAllSubgridsAndComponentIds, insertNewGridItem } from '../appUtils';
+import { copyComponent, findGridItemParentGrid, getAllSubgridsAndComponentIds, insertNewGridItem } from '../appUtils';
 import { push } from '../../../../history.svelte';
 import { sendUserToast } from '../../../../toast';
 import { gridColumns } from '../../gridUtils';
 import { copyToClipboard } from '../../../../utils';
 import { get } from 'svelte/store';
 import { processSubcomponents } from '../../utils';
+import { findGridItem } from '../appUtilsCore';
 // const { app, selectedComponent, focusedGrid, componentControl } =
 // 	getContext<AppViewerContext>('AppViewerContext')
 // const { history, movingcomponents, jobsDrawerOpen } =