windmill-components 1.82.12 → 1.83.0

package/components/apps/editor/contextPanel/components/OutputHeader.svelte.d.ts

@@ -6,10 +6,9 @@ declare const __propDef: {
         first?: boolean | undefined;
         nested?: boolean | undefined;
         color?: "blue" | "indigo" | undefined;
+        selectable?: boolean | undefined;
     };
     events: {
-        handleClick: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte

@@ -14,7 +14,7 @@ import { defaultCode } from '../component';
 import InlineScriptList from '../settingsPanel/mainInput/InlineScriptList.svelte';
 import WorkspaceScriptList from '../settingsPanel/mainInput/WorkspaceScriptList.svelte';
 export let name;
-export let id;
+export let componentType = undefined;
 let tab = 'inlinescripts';
 let filter = '';
 let picker;
@@ -30,7 +30,6 @@ async function inferInlineScriptSchema(language, content, schema) {
     return schema;
 }
 async function createInlineScriptByLanguage(language, path, subkind = undefined) {
-    const componentType = $app.grid.find((c) => c.data.id === id)?.data?.type;
     const content = defaultCode(componentType ?? '', language) ??
         initialCode(language, Script.kind.SCRIPT, subkind ?? 'flow');
     return newInlineScript(content, language, path);
@@ -63,9 +62,6 @@ function pickInlineScript(name) {
     dispatch('new', unusedInlineScript.inlineScript);
 }
 const langs = ['deno', 'python3', 'go', 'bash'];
-function loadSchemaFromTriggerable(path, arg1) {
-    throw new Error('Function not implemented.');
-}
 </script>
 
 <Drawer bind:this={picker} size="1000px">
@@ -184,8 +180,7 @@ console.log(ctx.email)
 if (!state.foo) { state.foo = 0 }
 state.foo += 1
 
-// you can also navigate to another page
-//await goto("?foo=bar")
+// you can also navigate (goto), recompute a script (recompute), or set a tab (setTab)
 
 return state.foo`,
 					language: 'frontend',

package/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         name: string;
-        id: string;
+        componentType?: string | undefined;
     };
     events: {
         delete: CustomEvent<any>;

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -5,7 +5,7 @@ import InlineScriptEditorDrawer from './InlineScriptEditorDrawer.svelte';
 import { inferArgs } from '../../../../infer';
 import Badge from '../../../common/badge/Badge.svelte';
 import Editor from '../../../Editor.svelte';
-import { emptySchema, scriptLangToEditorLang } from '../../../../utils';
+import { emptySchema, isMac, scriptLangToEditorLang } from '../../../../utils';
 import Popover from '../../../Popover.svelte';
 import { computeFields } from './utils';
 import { deepEqual } from 'fast-equals';
@@ -58,7 +58,6 @@ async function loadSchemaAndInputsByName() {
         }
     }
 }
-let isMac = navigator.userAgent.indexOf('Mac OS X') !== -1;
 $: extraLib =
     inlineScript?.language == 'frontend' && worldStore
         ? buildExtraLib($worldStore?.outputsById ?? {}, id, false, $state, true)
@@ -149,7 +148,7 @@ function handleRefreshOn(refreshOn) {
 						Format
 
 						<div class="flex flex-row items-center gap-1">
-							<Kbd>{isMac ? '⌘' : 'CTRL'}</Kbd>
+							<Kbd>{isMac() ? '⌘' : 'CTRL'}</Kbd>
 							<Kbd>S</Kbd>
 						</div>
 					</div>
@@ -171,7 +170,7 @@ function handleRefreshOn(refreshOn) {
 							Run
 
 							<div class="flex flex-row items-center gap-1">
-								<Kbd>{isMac ? '⌘' : 'CTRL'}</Kbd>
+								<Kbd>{isMac() ? '⌘' : 'CTRL'}</Kbd>
 								<Kbd>
 									<div class="h-4 flex items-center justify-center">
 										<CornerDownLeft size={10} />
@@ -220,15 +219,15 @@ function handleRefreshOn(refreshOn) {
 			{:else}
 				<SimpleEditor
 					bind:this={simpleEditor}
+					class="h-full"
+					{extraLib}
+					bind:code={inlineScript.content}
+					lang="javascript"
 					cmdEnterAction={async () => {
 						runLoading = true
 						await $runnableComponents[id]?.cb?.(!transformer ? inlineScript : undefined)
 						runLoading = false
 					}}
-					class="h-full"
-					{extraLib}
-					bind:code={inlineScript.content}
-					lang="javascript"
 					on:change={() => {
 						$app = $app
 					}}

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte

@@ -14,6 +14,7 @@ import { deepEqual } from 'fast-equals';
 import { getContext } from 'svelte';
 export let componentInput;
 export let defaultUserInput = false;
+export let componentType;
 export let id;
 export let transformer;
 const { app } = getContext('AppViewerContext');
@@ -86,8 +87,8 @@ function deleteInlineScript() {
 			}}
 		/>
 	{:else}
-		<span class="px-2 text-gray-600"
-			>Selected editor component is a transformer but component has no transformer
+		<span class="px-2 text-gray-600">
+			Selected editor component is a transformer but component has no transformer
 		</span>
 	{/if}
 {:else if componentInput && componentInput.type == 'runnable'}
@@ -104,7 +105,7 @@ function deleteInlineScript() {
 			/>
 		{:else}
 			<EmptyInlineScript
-				{id}
+				{componentType}
 				name={componentInput.runnable.name}
 				on:delete={deleteInlineScript}
 				on:new={(e) => {

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         componentInput: AppInput | undefined;
         defaultUserInput?: boolean | undefined;
+        componentType: string;
         id: string;
         transformer: boolean;
     };

package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte

@@ -62,7 +62,6 @@ $: unusedInlineScript = $app?.unusedInlineScripts?.findIndex((k_, index) => `unu
 						/>
 					{:else}
 						<EmptyInlineScript
-							id={`b_${hiddenInlineScript}`}
 							name={$app.hiddenInlineScripts[hiddenInlineScript].name}
 							on:delete={() => deleteBackgroundScript(hiddenInlineScript)}
 							on:new={(e) => {

package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelWithTable.svelte

@@ -9,6 +9,7 @@ export let gridItem;
 		defaultUserInput={gridItem.data?.type == 'formcomponent' ||
 			gridItem?.data?.type == 'formbuttoncomponent'}
 		id={gridItem.data.id}
+		componentType={gridItem.data.type}
 		transformer={$selectedComponentInEditor?.endsWith('_transformer')}
 		bind:componentInput={gridItem.data.componentInput}
 	/>
@@ -18,6 +19,7 @@ export let gridItem;
 	{#each gridItem.data.actionButtons as actionButton, index (index)}
 		{#if actionButton?.id === $selectedComponentInEditor || actionButton?.id + '_transformer' === $selectedComponentInEditor}
 			<InlineScriptEditorPanel
+				componentType={actionButton.type}
 				id={actionButton.id}
 				transformer={$selectedComponentInEditor?.endsWith('_transformer')}
 				bind:componentInput={actionButton.componentInput}

package/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte

@@ -1,5 +1,5 @@
 <script>import { Button } from '../../../common';
-import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import { X } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import { fade } from 'svelte/transition';
@@ -23,8 +23,8 @@ function addElementByType() {
         else if (subFieldType === 'object') {
             value.push({});
         }
-        else if (subFieldType === 'labeledresource') {
-            value.push({ value: '', label: '' });
+        else if (subFieldType === 'labeledresource' || subFieldType === 'labeledselect') {
+            value.push({ value: 'foo', label: 'bar' });
         }
         else if (subFieldType === 'tab-select') {
             value.push({ id: '', index: 0 });
@@ -49,28 +49,31 @@ function addElementByType() {
 function deleteElementByType(index) {
     if (componentInput.value) {
         componentInput.value.splice(index, 1);
+        redraw = redraw + 1;
         dispatch('deleteArrayItem', { index });
-        componentInput = componentInput;
     }
 }
+let redraw = 0;
 </script>
 
 <div class="flex gap-2 flex-col mt-2">
-	{#if Array.isArray(componentInput.value)}
-		{#each componentInput.value as value, index (index)}
-			<div class="flex flex-row gap-2 items-center relative">
-				<SubTypeEditor {subFieldType} bind:componentInput bind:value />
-				<button
-					transition:fade|local={{ duration: 100 }}
-					class="z-10  rounded-full p-1 duration-200 hover:bg-gray-200"
-					aria-label="Remove item"
-					on:click|preventDefault|stopPropagation={() => deleteElementByType(index)}
-				>
-					<X size={14} />
-				</button>
-			</div>
-		{/each}
-	{/if}
+	{#key redraw}
+		{#if Array.isArray(componentInput.value)}
+			{#each componentInput.value as value, index (index)}
+				<div class="flex flex-row gap-2 items-center relative">
+					<SubTypeEditor {subFieldType} bind:componentInput bind:value />
+					<button
+						transition:fade|local={{ duration: 100 }}
+						class="z-10  rounded-full p-1 duration-200 hover:bg-gray-200"
+						aria-label="Remove item"
+						on:click|preventDefault|stopPropagation={() => deleteElementByType(index)}
+					>
+						<X size={14} />
+					</button>
+				</div>
+			{/each}
+		{/if}
+	{/key}
 	<Button size="xs" color="light" startIcon={{ icon: faPlus }} on:click={() => addElementByType()}>
 		Add
 	</Button>

package/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -33,13 +33,16 @@ export let noGrid = false;
 export let duplicateMoveAllowed = true;
 let editor = undefined;
 const { app, runnableComponents, selectedComponent, worldStore, focusedGrid, stateId, state, errorByComponent, jobs } = getContext('AppViewerContext');
-const { history, ontextfocus } = getContext('AppEditorContext');
+const { history, ontextfocus, movingcomponents } = getContext('AppEditorContext');
 $: editor && ($ontextfocus = () => editor?.focus());
 function removeGridElement() {
     push(history, $app);
     if (componentSettings?.item.id) {
         $errorByComponent = clearErrorByComponentId(componentSettings?.item.id, $errorByComponent);
         $jobs = clearJobsByComponentId(componentSettings?.item.id, $jobs);
+        if ($movingcomponents?.includes(componentSettings?.item.id)) {
+            $movingcomponents = $movingcomponents.filter((id) => id !== componentSettings?.item.id);
+        }
     }
     $selectedComponent = undefined;
     $focusedGrid = undefined;
@@ -63,7 +66,7 @@ $: extraLib =
         : undefined;
 function keydown(event) {
     const { key, metaKey } = event;
-    if (key === 'Delte' || (key === 'Backspace' && metaKey)) {
+    if (key === 'Delete' || (key === 'Backspace' && metaKey)) {
         removeGridElement();
         event.stopPropagation();
     }
@@ -181,6 +184,10 @@ $: componentSettings?.item?.data && ($app = $app);
 					userInputEnabled={false}
 				/>
 			</PanelSection>
+		{:else}
+			<div class="h-full w-full font-bold text-gray-400 text-lg py-10 px-4"
+				>{ccomponents[component.type].name} has no configuration</div
+			>
 		{/if}
 
 		{#if componentSettings.item.data.type === 'tabscomponent'}
@@ -204,6 +211,14 @@ $: componentSettings?.item?.data && ($app = $app);
 		{#if Object.keys(ccomponents[component.type].customCss ?? {}).length > 0}
 			<PanelSection title="Styling">
 				<div slot="action">
+					<Button
+						color="light"
+						size="xs"
+						variant="border"
+						on:click={() => (viewCssOptions = !viewCssOptions)}
+					>
+						{viewCssOptions ? 'Hide' : 'Show'}
+					</Button>
 					<Button
 						color="light"
 						size="xs"
@@ -211,7 +226,7 @@ $: componentSettings?.item?.data && ($app = $app);
 						endIcon={{ icon: faChevronRight }}
 						on:click={() => secondaryMenu.open(StylePanel, { component })}
 					>
-						Open
+						Rich Editor
 					</Button>
 				</div>
 				{#if viewCssOptions}

package/components/apps/editor/settingsPanel/GridTab.svelte

@@ -1,7 +1,6 @@
 <script>import Button from '../../../common/button/Button.svelte';
 import CloseButton from '../../../common/CloseButton.svelte';
-import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import { CrossIcon } from 'lucide-svelte';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import { deleteGridItem } from '../appUtils';
 import PanelSection from './common/PanelSection.svelte';

package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -23,6 +23,7 @@ export let fieldType;
 export let subFieldType;
 export let format;
 export let selectOptions;
+export let fileUpload = undefined;
 export let placeholder;
 const { connectingInput } = getContext('AppViewerContext');
 $: if (componentInput == undefined) {
@@ -88,7 +89,7 @@ $: if (componentInput == undefined) {
 								<svelte:fragment slot="text">User Input</svelte:fragment>
 							</Popover>
 						{/if}
-						{#if 'fileUpload' in componentInput}
+						{#if fileUpload}
 							<Popover placement="bottom" notClickable disapperTimoout={0}>
 								<ToggleButton
 									position="center"

package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte.d.ts

@@ -16,6 +16,10 @@ declare const __propDef: {
         subFieldType: InputType | undefined;
         format: string | undefined;
         selectOptions: string[] | undefined;
+        fileUpload?: {
+            accept: string;
+            convertTo: string;
+        } | undefined;
         placeholder: string | undefined;
     };
     events: {

package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte

@@ -41,6 +41,7 @@ export let resourceOnly = false;
 					selectOptions={meta?.['selectOptions']}
 					tooltip={meta?.['tooltip']}
 					onlyStatic={meta?.['onlyStatic']}
+					fileUpload={meta?.['fileUpload']}
 					placeholder={meta?.['placeholder']}
 				/>
 			{/if}

package/components/apps/editor/settingsPanel/SelectedRunnable.svelte

@@ -1,8 +1,7 @@
 <script>import Button from '../../../common/button/Button.svelte';
 import Toggle from '../../../Toggle.svelte';
 import Tooltip from '../../../Tooltip.svelte';
-import { faClose, faEdit } from '@fortawesome/free-solid-svg-icons';
-import { includes } from 'lodash';
+import { faClose } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import { clearResultAppInput } from '../../utils';
 import ComponentTriggerList from './triggerLists/ComponentTriggerList.svelte';

package/components/apps/editor/settingsPanel/StylePanel.svelte

@@ -1,11 +1,50 @@
-<script>import { getContext } from 'svelte';
+<script>import { Button } from '../../../common';
+import { sendUserToast } from '../../../../utils';
+import { Copy } from 'lucide-svelte';
+import { getContext } from 'svelte';
 import { ccomponents } from '../component';
 import CssProperty from '../componentsPanel/CssProperty.svelte';
 import { quickStyleProperties } from '../componentsPanel/quickStyleProperties';
 export let component;
 const { app } = getContext('AppViewerContext');
+function applyToAllInstances() {
+    if (component) {
+        if (!$app.css) {
+            $app.css = {};
+        }
+        let componentType = component?.type;
+        if (!$app.css[componentType]) {
+            $app.css[componentType] = {};
+        }
+        Object.keys(ccomponents[component.type].customCss ?? {}).forEach((name) => {
+            if (!$app.css[componentType][name]) {
+                $app.css[componentType][name] = {};
+            }
+            if (component) {
+                let nstyle = component.customCss[name];
+                if (nstyle.style) {
+                    $app.css[componentType][name].style = nstyle.style;
+                }
+                if (nstyle.class) {
+                    $app.css[componentType][name].class = nstyle.class;
+                }
+            }
+        });
+        sendUserToast(`Applied style to all instances of the ${componentType.replace('component', '')} component`);
+    }
+}
 </script>
 
+<Button
+	variant="border"
+	color="light"
+	size="xs"
+	aria-label="Apply to all instances of this component"
+	on:click={applyToAllInstances}
+>
+	Copy style to global CSS &nbsp;<Copy size={18} />
+</Button>
+
 {#if component && component.customCss !== undefined}
 	{#each Object.keys(ccomponents[component.type].customCss ?? {}) as name}
 		<div class="w-full">
@@ -14,7 +53,6 @@ const { app } = getContext('AppViewerContext');
 				forceStyle={ccomponents[component.type].customCss[name].style !== undefined}
 				forceClass={ccomponents[component.type].customCss[name].class !== undefined}
 				{name}
-				componentType={component.type}
 				bind:value={component.customCss[name]}
 				on:change={() => app.set($app)}
 			/>

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

@@ -5,7 +5,6 @@ export let componentInput;
 export let id;
 export let hasRows = false;
 const { onchange, worldStore, state } = getContext('AppViewerContext');
-$: componentInput && onchange?.();
 $: extraLib =
     componentInput?.expr && $worldStore
         ? buildExtraLib($worldStore?.outputsById ?? {}, id, hasRows, $state, false)
@@ -20,6 +19,11 @@ $: extraLib =
 			shouldBindKey={false}
 			{extraLib}
 			autoHeight
+			on:change={() => {
+				if (onchange) {
+					onchange()
+				}
+			}}
 		/>
 	</div>
 {/if}

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

@@ -37,9 +37,9 @@ function formatName(name) {
 }
 function select(label) {
     componentInput.value = label;
-    if (document.activeElement?.blur) {
-        ;
-        document.activeElement.blur();
+    const elem = document.activeElement;
+    if (elem.blur) {
+        elem.blur();
     }
 }
 </script>

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

@@ -2,9 +2,10 @@
 export let code;
 export let value = undefined;
 export let error = '';
+export let editor = undefined;
 function parseJson() {
     try {
-        value = JSON.parse(code);
+        value = JSON.parse(code ?? '');
         error = '';
     }
     catch (e) {
@@ -16,7 +17,7 @@ $: code && parseJson();
 
 <div class="flex flex-col w-full">
 	<div class="border border-gray-300 w-full">
-		<SimpleEditor on:change autoHeight lang="json" bind:code />
+		<SimpleEditor on:focus bind:this={editor} on:change autoHeight lang="json" bind:code />
 	</div>
 	{#if error != ''}
 		<span class="text-red-600 text-xs">{error}</span>

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/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

@@ -13,6 +13,7 @@ export let fastStart = false;
 export let throttleUpdate = 100;
 export let throttleResize = 100;
 export let selectedIds;
+export let allIdsInPath;
 export let containerWidth = undefined;
 export let scroller = undefined;
 export let sensor = 20;
@@ -61,7 +62,6 @@ let sortedItems = [];
 $: sortedItems = JSON.parse(JSON.stringify(items)).sort((a, b) => a.id.localeCompare(b.id));
 let initItems = undefined;
 const updateMatrix = ({ detail }) => {
-    console.log('updateMatrix', detail);
     let isPointerUp = detail.isPointerUp;
     let citems;
     if (isPointerUp) {
@@ -79,8 +79,12 @@ const updateMatrix = ({ detail }) => {
         }
         citems = JSON.parse(JSON.stringify(initItems));
     }
+    let nselectedIds = selectedIds ?? [];
+    if (detail.id && !selectedIds?.includes(detail.id)) {
+        nselectedIds = [detail.id, ...(selectedIds ?? [])];
+    }
     sortedItems = citems;
-    for (let id of selectedIds ?? []) {
+    for (let id of nselectedIds) {
         let activeItem = getItemById(id, sortedItems);
         if (activeItem) {
             activeItem = {
@@ -93,7 +97,7 @@ const updateMatrix = ({ detail }) => {
             sortedItems = moveItem(activeItem, sortedItems, getComputedCols, getItemById(id, sortedItems));
         }
     }
-    for (let id of selectedIds ?? []) {
+    for (let id of nselectedIds ?? []) {
         if (detail.activate) {
             moveResizes?.[id]?.inActivate();
         }
@@ -139,7 +143,7 @@ export function handleInitMove({ detail }) {
 				bind:shadow={shadows[item.id]}
 				bind:this={moveResizes[item.id]}
 				on:repaint={handleRepaint}
-				onTop={Boolean(selectedIds?.includes(item.id))}
+				onTop={Boolean(allIdsInPath?.includes(item.id))}
 				id={item.id}
 				{xPerPx}
 				{yPerPx}
@@ -156,16 +160,9 @@ export function handleInitMove({ 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}

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

@@ -10,6 +10,7 @@ declare class __sveltets_Render<T> {
         throttleUpdate?: number | undefined;
         throttleResize?: number | undefined;
         selectedIds: string[] | undefined;
+        allIdsInPath: string[] | undefined;
         containerWidth?: number | undefined;
         scroller?: HTMLElement | undefined;
         sensor?: number | undefined;
@@ -30,12 +31,6 @@ declare class __sveltets_Render<T> {
     };
     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>;
         };