windmill-components 1.82.2 → 1.82.4

package/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte.d.ts

@@ -1,11 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
+import SimpleEditor from '../../../../SimpleEditor.svelte';
 declare const __propDef: {
     props: {
-        code: string;
+        code: string | undefined;
         value?: any;
         error?: string | undefined;
+        editor?: SimpleEditor | undefined;
     };
     events: {
+        focus: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -21,7 +21,7 @@ $: componentInput && onchange?.();
 </script>
 
 {#if componentInput?.type === 'static'}
-	{#if fieldType === 'number'}
+	{#if fieldType === 'number' || fieldType === 'integer'}
 		<input on:keydown|stopPropagation type="number" bind:value={componentInput.value} />
 	{:else if fieldType === 'textarea'}
 		<textarea on:keydown|stopPropagation bind:value={componentInput.value} />
@@ -75,7 +75,7 @@ $: componentInput && onchange?.();
 		{/if}
 	{:else if fieldType === 'color'}
 		<ColorInput bind:value={componentInput.value} />
-	{:else if fieldType === 'object'}
+	{:else if fieldType === 'object' || fieldType == 'labeledselect'}
 		{#if format?.startsWith('resource-')}
 			<ResourcePicker
 				initialValue={componentInput.value?.split('$res:')[1] || ''}

package/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte

@@ -19,6 +19,6 @@ $: onLoad =
 	bind:inlineScript={runnable.inlineScript}
 	{onLoad}
 	{doNotRecomputeOnInputChanged}
-	id={$selectedComponent}
+	id={$selectedComponent?.[0]}
 	{onClick}
 />

package/components/apps/inputType.d.ts

@@ -1,6 +1,6 @@
 import type { ReadFileAs } from '../common/fileInput/model';
 import type { InlineScript } from './types';
-export type InputType = 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource' | 'tab-select';
+export type InputType = 'integer' | 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource' | 'labeledselect' | 'tab-select';
 export type InputConnection = {
     componentId: string;
     path: string;
@@ -81,7 +81,7 @@ export type StaticOptions = {
         label: string;
     }[];
 };
-export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'labeledresource', object> | AppInputSpec<'array', object[], 'tab-select'>;
+export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'array', object[], 'labeledselect'> | AppInputSpec<'labeledselect', object> | AppInputSpec<'labeledresource', object> | AppInputSpec<'array', object[], 'tab-select'>;
 export type RowAppInput = Extract<AppInput, {
     type: 'row';
 }>;

package/components/apps/rx.d.ts

@@ -2,10 +2,10 @@ import type { AppInput } from './inputType';
 import { type Writable } from 'svelte/store';
 export interface Subscriber<T> {
     id?: string;
-    next(v: T): any;
+    next(v: T): void;
 }
 export interface Observable<T> {
-    subscribe(x: Subscriber<T>): any;
+    subscribe(x: Subscriber<T>): void;
 }
 export interface Output<T> extends Observable<T> {
     set(x: T, force?: boolean): void;

package/components/apps/svelte-grid/Grid.svelte

@@ -12,7 +12,8 @@ export let gap = [10, 10];
 export let fastStart = false;
 export let throttleUpdate = 100;
 export let throttleResize = 100;
-export let onTopId = undefined;
+export let selectedIds;
+export let allIdsInPath;
 export let containerWidth = undefined;
 export let scroller = undefined;
 export let sensor = 20;
@@ -23,12 +24,6 @@ $: [gapX, gapY] = gap;
 let xPerPx = 0;
 let yPerPx = rowHeight;
 $: containerHeight = getContainerHeight(items, yPerPx, getComputedCols);
-const pointerup = (ev) => {
-    dispatch('pointerup', {
-        id: ev.detail.id,
-        cols: getComputedCols
-    });
-};
 const onResize = throttle(() => {
     items = specifyUndefinedColumns(items, getComputedCols, cols);
     dispatch('resize', {
@@ -84,23 +79,28 @@ const updateMatrix = ({ detail }) => {
         }
         citems = JSON.parse(JSON.stringify(initItems));
     }
-    let activeItem = getItemById(detail.id, citems);
-    if (activeItem) {
-        activeItem = {
-            ...activeItem,
-            [getComputedCols]: {
-                ...activeItem[getComputedCols],
-                ...detail.shadow
-            }
-        };
-        sortedItems = moveItem(activeItem, citems, getComputedCols, getItemById(detail.id, citems));
-        if (detail.onUpdate)
-            detail.onUpdate();
-        dispatch('change', {
-            unsafeItem: activeItem,
-            id: activeItem.id,
-            cols: getComputedCols
-        });
+    let nselectedIds = selectedIds ?? [];
+    if (detail.id && !selectedIds?.includes(detail.id)) {
+        nselectedIds = [detail.id, ...(selectedIds ?? [])];
+    }
+    sortedItems = citems;
+    for (let id of nselectedIds) {
+        let activeItem = getItemById(id, sortedItems);
+        if (activeItem) {
+            activeItem = {
+                ...activeItem,
+                [getComputedCols]: {
+                    ...activeItem[getComputedCols],
+                    ...shadows[id]
+                }
+            };
+            sortedItems = moveItem(activeItem, sortedItems, getComputedCols, getItemById(id, sortedItems));
+        }
+    }
+    for (let id of nselectedIds ?? []) {
+        if (detail.activate) {
+            moveResizes?.[id]?.inActivate();
+        }
     }
     if (isPointerUp) {
         dispatch('redraw', sortGridItemsPosition(JSON.parse(JSON.stringify(sortedItems)), getComputedCols));
@@ -115,15 +115,35 @@ const handleRepaint = ({ detail }) => {
         updateMatrix({ detail });
     }
 };
+let moveResizes = {};
+let shadows = {};
+export function handleMove({ detail }) {
+    Object.entries(moveResizes).forEach(([id, moveResize]) => {
+        if (selectedIds?.includes(id)) {
+            moveResize?.updateMove(JSON.parse(JSON.stringify(detail.cordDiff)), detail.eventY);
+        }
+    });
+    throttleMatrix({ detail: { isPointerUp: false, activate: false } });
+}
+export function handleInitMove({ detail }) {
+    Object.entries(moveResizes).forEach(([id, moveResize]) => {
+        if (selectedIds?.includes(id)) {
+            moveResize?.initmove();
+        }
+    });
+}
 </script>
 
 <div class="svlt-grid-container" style="height: {containerHeight}px" bind:this={container}>
 	{#if xPerPx || !fastStart}
 		{#each sortedItems as item (item.id)}
 			<MoveResize
+				on:initmove={handleInitMove}
+				on:move={handleMove}
+				bind:shadow={shadows[item.id]}
+				bind:this={moveResizes[item.id]}
 				on:repaint={handleRepaint}
-				on:pointerup={pointerup}
-				onTop={item.id == onTopId}
+				onTop={Boolean(allIdsInPath?.includes(item.id))}
 				id={item.id}
 				{xPerPx}
 				{yPerPx}
@@ -140,16 +160,9 @@ const handleRepaint = ({ detail }) => {
 				{sensor}
 				container={scroller}
 				nativeContainer={container}
-				let:resizePointerDown
-				let:movePointerDown
 			>
 				{#if item[getComputedCols]}
-					<slot
-						{movePointerDown}
-						{resizePointerDown}
-						dataItem={item}
-						item={item[getComputedCols]}
-					/>
+					<slot dataItem={item} item={item[getComputedCols]} />
 				{/if}
 			</MoveResize>
 		{/each}
@@ -160,4 +173,7 @@ const handleRepaint = ({ detail }) => {
 	.svlt-grid-container {
 		position: relative;
 		width: 100%;
+		-webkit-user-select: none;
+		   -moz-user-select: none;
+		        user-select: none;
 	}</style>

package/components/apps/svelte-grid/Grid.svelte.d.ts

@@ -9,29 +9,28 @@ declare class __sveltets_Render<T> {
         fastStart?: boolean | undefined;
         throttleUpdate?: number | undefined;
         throttleResize?: number | undefined;
-        onTopId?: string | undefined;
+        selectedIds: string[] | undefined;
+        allIdsInPath: string[] | undefined;
         containerWidth?: number | undefined;
         scroller?: HTMLElement | undefined;
         sensor?: number | undefined;
         parentWidth?: number | undefined;
+        handleMove?: (({ detail }: {
+            detail: any;
+        }) => void) | undefined;
+        handleInitMove?: (({ detail }: {
+            detail: any;
+        }) => void) | undefined;
     };
     events(): {
-        pointerup: CustomEvent<any>;
         resize: CustomEvent<any>;
         mount: CustomEvent<any>;
-        change: CustomEvent<any>;
         redraw: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {
         default: {
-            movePointerDown: ({ clientX, clientY, target }: {
-                clientX: any;
-                clientY: any;
-                target: any;
-            }) => void;
-            resizePointerDown: (e: any) => void;
             dataItem: FilledItem<T>;
             item: Required<import("./types").ItemLayout>;
         };
@@ -41,5 +40,11 @@ export type GridProps<T> = ReturnType<__sveltets_Render<T>['props']>;
 export type GridEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
 export type GridSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
 export default class Grid<T> extends SvelteComponentTyped<GridProps<T>, GridEvents<T>, GridSlots<T>> {
+    get handleMove(): ({ detail }: {
+        detail: any;
+    }) => void;
+    get handleInitMove(): ({ detail }: {
+        detail: any;
+    }) => void;
 }
 export {};

package/components/apps/svelte-grid/MoveResize.svelte

@@ -15,8 +15,9 @@ export let item;
 export let cols;
 export let nativeContainer;
 export let onTop;
+export let shadow = undefined;
+const divId = `component-${id}`;
 let shadowElement;
-let shadow = undefined;
 let active = false;
 let initX, initY;
 let capturePos = {
@@ -27,7 +28,7 @@ let cordDiff = { x: 0, y: 0 };
 let newSize = { width, height };
 let trans = false;
 let anima;
-const inActivate = () => {
+export function inActivate() {
     if (shadowElement && shadow != undefined) {
         let subgrid = shadowElement.closest('.subgrid');
         let irect = shadowElement.getBoundingClientRect();
@@ -57,18 +58,14 @@ const inActivate = () => {
         clearTimeout(anima);
         anima = setTimeout(() => {
             trans = false;
-        }, 100);
-        dispatch('pointerup', {
-            id
-        });
+        }, 50);
     }
-};
-let repaint = (cb, isPointerUp) => {
+}
+let repaint = (activate, isPointerUp) => {
     dispatch('repaint', {
         id,
-        shadow,
         isPointerUp,
-        onUpdate: cb
+        activate
     });
 };
 // Autoscroll
@@ -78,7 +75,7 @@ let rect;
 let scrollElement;
 const getContainerFrame = (element) => {
     if (element === document.documentElement || !element) {
-        const { height, top, right, bottom, left } = nativeContainer.getBoundingClientRect();
+        const { top, bottom } = nativeContainer.getBoundingClientRect();
         return {
             top: Math.max(0, top),
             bottom: Math.min(window.innerHeight, bottom)
@@ -87,11 +84,13 @@ const getContainerFrame = (element) => {
     return element.getBoundingClientRect();
 };
 const getScroller = (element) => (!element ? document.documentElement : element);
-function computeRect(target) {
-    let gridItem = target.closest('.svlt-grid-item');
+function computeRect() {
+    let gridItem = document.getElementById(divId);
+    if (!gridItem)
+        return;
     let subgrid = gridItem.closest('.subgrid');
     let irect = gridItem.getBoundingClientRect();
-    if (subgrid) {
+    if (subgrid && subgrid.parentElement) {
         let subGridParent = subgrid.parentElement;
         let subGridParentRect = subGridParent.getBoundingClientRect();
         let prect = subgrid.getBoundingClientRect();
@@ -109,25 +108,28 @@ function computeRect(target) {
     }
 }
 let dragClosure = undefined;
-const pointerdown = ({ clientX, clientY, target }) => {
+const pointerdown = ({ clientX, clientY }) => {
     dragClosure = () => {
         dragClosure = undefined;
         initX = clientX;
         initY = clientY;
-        capturePos = { x: left, y: top };
-        shadow = { x: item.x, y: item.y, w: item.w, h: item.h };
-        newSize = { width, height };
-        containerFrame = getContainerFrame(container);
-        scrollElement = getScroller(container);
-        cordDiff = { x: 0, y: 0 };
-        active = true;
-        trans = false;
-        computeRect(target);
-        _scrollTop = scrollElement.scrollTop;
+        dispatch('initmove');
     };
     window.addEventListener('pointermove', pointermove);
     window.addEventListener('pointerup', pointerup);
 };
+export function initmove() {
+    computeRect();
+    newSize = { width, height };
+    capturePos = { x: left, y: top };
+    shadow = { x: item.x, y: item.y, w: item.w, h: item.h };
+    cordDiff = { x: 0, y: 0 };
+    active = true;
+    trans = false;
+    containerFrame = getContainerFrame(container);
+    scrollElement = getScroller(container);
+    _scrollTop = scrollElement.scrollTop;
+}
 let sign = { x: 0, y: 0 };
 let vel = { x: 0, y: 0 };
 let intervalId = undefined;
@@ -138,8 +140,8 @@ const stopAutoscroll = () => {
     vel = { x: 0, y: 0 };
 };
 const update = () => {
-    const _newScrollTop = scrollElement.scrollTop - _scrollTop;
     const boundX = capturePos.x + cordDiff.x;
+    const _newScrollTop = (scrollElement?.scrollTop ?? 0) - (_scrollTop ?? 0);
     const boundY = capturePos.y + (cordDiff.y + _newScrollTop);
     let gridX = Math.round(boundX / xPerPx);
     let gridY = Math.round(boundY / yPerPx);
@@ -147,7 +149,6 @@ const update = () => {
         shadow.x = Math.max(Math.min(gridX, cols - shadow.w), 0);
         shadow.y = Math.max(gridY, 0);
     }
-    repaint(undefined, false);
 };
 const pointermove = (event) => {
     dragClosure && dragClosure();
@@ -155,49 +156,68 @@ const pointermove = (event) => {
     event.stopPropagation();
     event.stopImmediatePropagation();
     const { clientX, clientY } = event;
-    cordDiff = { x: clientX - initX, y: clientY - initY };
+    const cordDiff = { x: clientX - initX, y: clientY - initY };
+    dispatch('move', { cordDiff, clientY });
+};
+export function updateMove(newCoordDiff, clientY) {
+    if (!active) {
+        active = true;
+    }
+    if (trans) {
+        trans = false;
+    }
+    cordDiff = newCoordDiff;
+    // console.log(cordDiff, id, 'B')
     const Y_SENSOR = sensor;
-    let velocityTop = Math.max(0, (containerFrame.top + Y_SENSOR - clientY) / Y_SENSOR);
-    let velocityBottom = Math.max(0, (clientY - (containerFrame.bottom - Y_SENSOR)) / Y_SENSOR);
-    const topSensor = velocityTop > 0 && velocityBottom === 0;
-    const bottomSensor = velocityBottom > 0 && velocityTop === 0;
-    sign.y = topSensor ? -1 : bottomSensor ? 1 : 0;
-    vel.y = sign.y === -1 ? velocityTop : velocityBottom;
-    if (vel.y > 0) {
-        if (!intervalId) {
-            // Start scrolling
-            // TODO Use requestAnimationFrame
-            intervalId = setInterval(() => {
-                scrollElement.scrollTop += 2 * (vel.y + Math.sign(vel.y)) * sign.y;
-                update();
-            }, 10);
+    if (containerFrame) {
+        let velocityTop = Math.max(0, (containerFrame.top + Y_SENSOR - clientY) / Y_SENSOR);
+        let velocityBottom = Math.max(0, (clientY - (containerFrame.bottom - Y_SENSOR)) / Y_SENSOR);
+        const topSensor = velocityTop > 0 && velocityBottom === 0;
+        const bottomSensor = velocityBottom > 0 && velocityTop === 0;
+        sign.y = topSensor ? -1 : bottomSensor ? 1 : 0;
+        vel.y = sign.y === -1 ? velocityTop : velocityBottom;
+        if (vel.y > 0) {
+            if (!intervalId) {
+                // Start scrolling
+                // TODO Use requestAnimationFrame
+                intervalId = setInterval(() => {
+                    scrollElement.scrollTop += 2 * (vel.y + Math.sign(vel.y)) * sign.y;
+                    update();
+                }, 10);
+            }
+        }
+        else if (intervalId) {
+            stopAutoscroll();
+        }
+        else {
+            update();
         }
-    }
-    else if (intervalId) {
-        stopAutoscroll();
     }
     else {
         update();
     }
-};
+}
 const pointerup = (e) => {
-    dragClosure = undefined;
     stopAutoscroll();
     window.removeEventListener('pointerdown', pointerdown);
     window.removeEventListener('pointermove', pointermove);
     window.removeEventListener('pointerup', pointerup);
-    repaint(inActivate, true);
+    if (!dragClosure) {
+        repaint(true, true);
+    }
+    else {
+        dragClosure = undefined;
+    }
 };
-// Resize
 let resizeInitPos = { x: 0, y: 0 };
 let initSize = { width: 0, height: 0 };
 const resizePointerDown = (e) => {
     e.stopPropagation();
-    const { pageX, pageY, target } = e;
+    const { pageX, pageY } = e;
     resizeInitPos = { x: pageX, y: pageY };
     initSize = { width, height };
     cordDiff = { x: 0, y: 0 };
-    computeRect(target);
+    computeRect();
     newSize = { width, height };
     active = true;
     trans = false;
@@ -219,12 +239,12 @@ const resizePointerMove = ({ pageX, pageY }) => {
         // Limit col & row
         shadow.w = Math.round((newSize.width + gapX * 2) / xPerPx);
         shadow.h = Math.round((newSize.height + gapY * 2) / yPerPx);
-        repaint(undefined, false);
+        repaint(false, false);
     }
 };
 const resizePointerUp = (e) => {
     e.stopPropagation();
-    repaint(inActivate, true);
+    repaint(true, true);
     window.removeEventListener('pointermove', resizePointerMove);
     window.removeEventListener('pointerup', resizePointerUp);
 };
@@ -234,18 +254,19 @@ const resizePointerUp = (e) => {
 <div
 	draggable="false"
 	on:pointerdown|stopPropagation|preventDefault={pointerdown}
+	id={divId}
 	class="svlt-grid-item"
 	class:svlt-grid-active={active || (trans && rect)}
 	style="width: {active ? newSize.width : width}px; height:{active
 		? newSize.height
 		: height}px; {onTop ? 'z-index: 1000;' : ''}
-  {active
+  {active && rect
 		? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px);top:${rect.top}px;left:${rect.left}px;`
 		: trans
 		? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px); position:absolute; transition: width 0.2s, height 0.2s;`
 		: `transition: transform 0.1s, opacity 0.1s; transform: translate(${left}px, ${top}px); `} "
 >
-	<slot movePointerDown={pointerdown} {resizePointerDown} />
+	<slot />
 	<div class="svlt-grid-resizer" on:pointerdown={resizePointerDown} />
 </div>
 

package/components/apps/svelte-grid/MoveResize.svelte.d.ts

@@ -16,27 +16,33 @@ declare const __propDef: {
         cols: any;
         nativeContainer: any;
         onTop: any;
+        shadow?: {
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+        } | undefined;
+        inActivate?: (() => void) | undefined;
+        initmove?: (() => void) | undefined;
+        updateMove?: ((newCoordDiff: any, clientY: any) => void) | undefined;
     };
     events: {
-        pointerup: CustomEvent<any>;
         repaint: CustomEvent<any>;
+        initmove: CustomEvent<any>;
+        move: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {
-            movePointerDown: ({ clientX, clientY, target }: {
-                clientX: any;
-                clientY: any;
-                target: any;
-            }) => void;
-            resizePointerDown: (e: any) => void;
-        };
+        default: {};
     };
 };
 export type MoveResizeProps = typeof __propDef.props;
 export type MoveResizeEvents = typeof __propDef.events;
 export type MoveResizeSlots = typeof __propDef.slots;
 export default class MoveResize extends SvelteComponentTyped<MoveResizeProps, MoveResizeEvents, MoveResizeSlots> {
+    get inActivate(): () => void;
+    get initmove(): () => void;
+    get updateMove(): (newCoordDiff: any, clientY: any) => void;
 }
 export {};

package/components/apps/svelte-grid/utils/helper.d.ts

@@ -1,5 +1,4 @@
 declare const gridHelp: {
-    normalize(items: any, col: any): any;
     adjust(items: any, col: any): import("../types").FilledItem<unknown>[];
     item(obj: any): any;
     findSpace(item: any, items: any, cols: any): {

package/components/apps/svelte-grid/utils/helper.js

@@ -14,9 +14,6 @@ function makeItem(item) {
     };
 }
 const gridHelp = {
-    normalize(items, col) {
-        return normalize(items, col);
-    },
     adjust(items, col) {
         return adjust(items, col);
     },

package/components/apps/types.d.ts

@@ -92,11 +92,14 @@ export type AppViewerContext = {
     worldStore: Writable<World>;
     app: Writable<App>;
     summary: Writable<string>;
-    selectedComponent: Writable<string | undefined>;
+    selectedComponent: Writable<string[] | undefined>;
     mode: Writable<EditorMode>;
     connectingInput: Writable<ConnectingInput>;
     breakpoint: Writable<EditorBreakpoint>;
-    runnableComponents: Writable<Record<string, (inlineScript?: InlineScript) => Promise<void>>>;
+    runnableComponents: Writable<Record<string, {
+        autoRefresh: boolean;
+        cb: (inlineScript?: InlineScript) => Promise<void>;
+    }>>;
     staticExporter: Writable<Record<string, () => any>>;
     appPath: string;
     workspace: string;
@@ -122,13 +125,14 @@ export type AppViewerContext = {
         setTab?: (index: number) => void;
     }>>;
     hoverStore: Writable<string | undefined>;
+    allIdsInPath: Writable<string[]>;
 };
 export type AppEditorContext = {
     history: History<App> | undefined;
     pickVariableCallback: Writable<((path: string) => void) | undefined>;
     ontextfocus: Writable<(() => void) | undefined>;
     selectedComponentInEditor: Writable<string | undefined>;
-    movingcomponent: Writable<string | undefined>;
+    movingcomponents: Writable<string[] | undefined>;
 };
 export type FocusedGrid = {
     parentComponentId: string;
@@ -141,7 +145,6 @@ type ComponentID = string;
 export type ContextPanelContext = {
     search: Writable<string>;
     manuallyOpened: Writable<Record<string, boolean>>;
-    expanded: Writable<boolean>;
     hasResult: Writable<Record<string, boolean>>;
 };
 export {};

package/components/apps/utils.d.ts

@@ -2,6 +2,8 @@ import type { Schema } from '../../common';
 import type { App, ComponentCssProperty, GridItem } from './types';
 import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType';
 import type { Output } from './rx';
+import { type Writable } from 'svelte/store';
+export declare function selectId(e: PointerEvent, id: string, selectedComponent: Writable<string[] | undefined>, app: App): void;
 export declare function allItems(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): GridItem[];
 export declare function loadSchema(workspace: string, path: string, runType: 'script' | 'flow' | 'hubscript'): Promise<Schema>;
 export declare function schemaToInputsSpec(schema: Schema, defaultUserInput: boolean): Record<string, StaticAppInput>;