windmill-components 1.60.4 → 1.70.0

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

@@ -2,9 +2,10 @@
 import SplitPanesWrapper from '../../../splitPanes/SplitPanesWrapper.svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import InlineScriptsPanelList from './InlineScriptsPanelList.svelte';
-import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte';
 import InlineScriptEditor from './InlineScriptEditor.svelte';
-const { lazyGrid, app } = getContext('AppEditorContext');
+import EmptyInlineScript from './EmptyInlineScript.svelte';
+import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte';
+const { app, staticOutputs, runnableComponents } = getContext('AppEditorContext');
 let selectedScriptComponentId = undefined;
 </script>
 
@@ -14,16 +15,20 @@ let selectedScriptComponentId = undefined;
 			<InlineScriptsPanelList bind:selectedScriptComponentId />
 		</Pane>
 		<Pane size={75}>
-			{#each $lazyGrid as gridComponent, index (index)}
-				{#if gridComponent.data.id === selectedScriptComponentId}
+			{#if !selectedScriptComponentId}
+				<span class="p-2 text-sm text-gray-600">Select a script on the left panel</span>
+			{/if}
+
+			{#each $app.grid as gridItem (gridItem.data.id)}
+				{#if gridItem.data.id === selectedScriptComponentId}
 					<InlineScriptEditorPanel
-						id={gridComponent.data.id}
-						bind:componentInput={gridComponent.data.componentInput}
+						id={gridItem.data.id}
+						bind:componentInput={gridItem.data.componentInput}
 					/>
 				{/if}
 
-				{#if gridComponent.data.type === 'tablecomponent'}
-					{#each gridComponent.data.actionButtons as actionButton, index (index)}
+				{#if gridItem.data.type === 'tablecomponent'}
+					{#each gridItem.data.actionButtons as actionButton, index (index)}
 						{#if actionButton.id === selectedScriptComponentId}
 							<InlineScriptEditorPanel
 								id={actionButton.id}
@@ -33,6 +38,31 @@ let selectedScriptComponentId = undefined;
 					{/each}
 				{/if}
 			{/each}
+
+			{#if $app.subgrids}
+				{#each Object.keys($app.subgrids ?? {}) as key (key)}
+					{#each $app.subgrids[key] as gridItem (gridItem.data.id)}
+						{#if gridItem.data.id === selectedScriptComponentId}
+							<InlineScriptEditorPanel
+								id={gridItem.data.id}
+								bind:componentInput={gridItem.data.componentInput}
+							/>
+						{/if}
+
+						{#if gridItem.data.type === 'tablecomponent'}
+							{#each gridItem.data.actionButtons as actionButton, index (index)}
+								{#if actionButton.id === selectedScriptComponentId}
+									<InlineScriptEditorPanel
+										id={actionButton.id}
+										bind:componentInput={actionButton.componentInput}
+									/>
+								{/if}
+							{/each}
+						{/if}
+					{/each}
+				{/each}
+			{/if}
+
 			{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
 				{#if `unused-${index}` === selectedScriptComponentId}
 					<InlineScriptEditor
@@ -47,6 +77,34 @@ let selectedScriptComponentId = undefined;
 					/>
 				{/if}
 			{/each}
+			{#each $app?.hiddenInlineScripts ?? [] as hiddenInlineScript, index (index)}
+				{#if `bg_${index}` === selectedScriptComponentId}
+					{#if hiddenInlineScript.inlineScript}
+						<InlineScriptEditor
+							id={`bg_${index}`}
+							bind:inlineScript={hiddenInlineScript.inlineScript}
+							bind:name={hiddenInlineScript.name}
+							on:delete={() => {
+								// remove the script from the array at the index
+								$app.hiddenInlineScripts.splice(index, 1)
+								$app.hiddenInlineScripts = [...$app.hiddenInlineScripts]
+
+								delete $staticOutputs[`bg_${index}`]
+								delete $runnableComponents[`bg_${index}`]
+								$staticOutputs = $staticOutputs
+							}}
+						/>
+					{:else}
+						<EmptyInlineScript
+							id={`b_${index}`}
+							name={hiddenInlineScript.name}
+							on:new={(e) => {
+								hiddenInlineScript.inlineScript = e.detail
+							}}
+						/>
+					{/if}
+				{/if}
+			{/each}
 		</Pane>
 	</Splitpanes>
 </SplitPanesWrapper>

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

@@ -1,62 +1,81 @@
-<script>import { Badge } from '../../../common';
-import { classNames } from '../../../../utils';
+<script>import { Badge, Button } from '../../../common';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { Plus } from 'lucide-svelte';
 import { getContext } from 'svelte';
+import { getAllScriptNames } from '../../utils';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
 import { getAppScripts } from './utils';
+const PREFIX = 'script-selector-';
 export let selectedScriptComponentId = undefined;
 const { app, selectedComponent, lazyGrid } = getContext('AppEditorContext');
-function selectInlineScript(id) {
+let list;
+function selectScript(id) {
     selectedScriptComponentId = id;
-    if (!id.startsWith('unused-')) {
+    if (!id.startsWith('unused-') || !id.startsWith('bg_')) {
         $selectedComponent = selectedScriptComponentId;
     }
 }
 $: runnables = getAppScripts($lazyGrid);
-// When seleced component changes, update selectedScriptComponentId
-$: {
-    if (selectedComponent) {
-        selectedScriptComponentId = $selectedComponent;
+// When selected component changes, update selectedScriptComponentId
+$: if ($selectedComponent != selectedScriptComponentId) {
+    selectedScriptComponentId = $selectedComponent;
+}
+function createBackgroundScript() {
+    let index = 0;
+    let newScriptPath = `Background Script ${index}`;
+    const names = getAllScriptNames($app);
+    // Find a name that is not used by any other inline script
+    while (names.includes(newScriptPath)) {
+        newScriptPath = `Background Script ${++index}`;
+    }
+    if (!$app.hiddenInlineScripts) {
+        $app.hiddenInlineScripts = [];
     }
+    $app.hiddenInlineScripts.push({
+        name: newScriptPath,
+        inlineScript: undefined,
+        fields: {}
+    });
+    $app.hiddenInlineScripts = $app.hiddenInlineScripts;
+    selectScript(`bg_${$app.hiddenInlineScripts.length - 1}`);
 }
 </script>
 
-<div class="min-h-full flex flex-col gap-4">
+<div class="mb-0 pb-0 pl-2 sticky top-0 bg-white border-b text-xs font-semibold">Runnables</div>
+<div bind:this={list} class="grow flex flex-col gap-4">
 	<PanelSection title="Inline scripts" smallPadding>
 		<div class="flex flex-col gap-2 w-full">
 			{#if runnables.inline.length > 0}
-				<div class="flex gap-2 flex-col ">
+				<div class="flex gap-1 flex-col ">
 					{#each runnables.inline as { name, id }, index (index)}
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<div
-							class="{classNames(
-								'border flex  gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-sm cursor-pointer hover:bg-blue-50 hover:text-blue-400',
-								selectedScriptComponentId === id ? 'border-blue-500 border' : ''
-							)},"
-							on:click={() => selectInlineScript(id)}
+						<button
+							id={PREFIX + id}
+							class="border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200 
+							{selectedScriptComponentId === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+							on:click={() => selectScript(id)}
 						>
-							<span class="text-xs truncate">{name}</span>
+							<span class="text-2xs truncate">{name}</span>
 							<div>
 								<Badge color="dark-indigo">{id}</Badge>
 							</div>
-						</div>
+						</button>
 					{/each}
 				</div>
 			{/if}
 
 			{#if $app.unusedInlineScripts?.length > 0}
-				<div class="flex gap-2 flex-col ">
+				<div class="flex gap-1 flex-col ">
 					{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<div
-							class="{classNames(
-								'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
-								selectedScriptComponentId === `unused-${index}` ? 'bg-blue-100 text-blue-600' : ''
-							)},"
-							on:click={() => selectInlineScript(`unused-${index}`)}
+						{@const id = `unused-${index}`}
+						<button
+							id={PREFIX + id}
+							class="border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200 
+							{selectedScriptComponentId === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+							on:click={() => selectScript(id)}
 						>
-							<span class="text-xs truncate">{unusedInlineScript.name}</span>
+							<span class="text-2xs truncate">{unusedInlineScript.name}</span>
 							<Badge color="red">Detached</Badge>
-						</div>
+						</button>
 					{/each}
 				</div>
 			{/if}
@@ -67,24 +86,51 @@ $: {
 		</div>
 	</PanelSection>
 
-	<PanelSection title="Imported scripts" smallPadding>
-		<div class="flex flex-col gap-2 w-full">
+	<PanelSection title="Workspace/Hub" smallPadding>
+		<div class="flex flex-col gap-1 w-full">
 			{#if runnables.imported.length > 0}
-				<div class="flex gap-2 flex-col ">
-					{#each runnables.imported as { name, id }, index (index)}
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<div
-							class="{classNames(
-								'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
-								selectedScriptComponentId === id ? 'bg-blue-100 text-blue-600' : ''
-							)},"
-							on:click={() => selectInlineScript(id)}
-						>
-							<span class="text-xs truncate">{name}</span>
-							<Badge color="dark-indigo">{id}</Badge>
-						</div>
-					{/each}
-				</div>
+				{#each runnables.imported as { name, id }, index (index)}
+					<button
+						id={PREFIX + id}
+						class="border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200 
+							{selectedScriptComponentId === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+						on:click={() => selectScript(id)}
+					>
+						<span class="text-2xs truncate">{name}</span>
+						<Badge color="dark-indigo">{id}</Badge>
+					</button>
+				{/each}
+			{:else}
+				<div class="text-sm text-gray-500">No imported scripts/flows</div>
+			{/if}
+		</div>
+	</PanelSection>
+
+	<PanelSection
+		title="Background scripts"
+		tooltip="Background scripts are triggered upon global refresh or when their input changes. The result
+		of a background script can be shared among many components."
+		smallPadding
+	>
+		<svelte:fragment slot="action">
+			<Button size="xs" color="dark" variant="border" on:click={createBackgroundScript}
+				><Plus size={14} />
+			</Button>
+		</svelte:fragment>
+		<div class="flex flex-col gap-1 w-full">
+			{#if $app.hiddenInlineScripts?.length > 0}
+				{#each $app.hiddenInlineScripts as { name }, index (index)}
+					{@const id = `bg_${index}`}
+					<button
+						id={PREFIX + id}
+						class="border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200 
+							{selectedScriptComponentId === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+						on:click={() => selectScript(id)}
+					>
+						<span class="text-2xs truncate">{name}</span>
+						<Badge color="dark-indigo">{id}</Badge>
+					</button>
+				{/each}
 			{:else}
 				<div class="text-sm text-gray-500">No items</div>
 			{/if}

package/components/apps/editor/inlineScriptsPanel/utils.d.ts

@@ -1,4 +1,7 @@
-import type { AppComponent, GridItem } from "../../types";
+import type { Schema } from "../../../../common";
+import type { AppInputs } from "../../inputType";
+import type { GridItem } from "../../types";
+import type { AppComponent } from "../component";
 export interface AppScriptsList {
     inline: {
         name: string;
@@ -9,6 +12,7 @@ export interface AppScriptsList {
         id: string;
     }[];
 }
+export declare function computeFields(schema: Schema, defaultUserInput: boolean, fields: AppInputs): {};
 export declare function getAppScripts(grid: GridItem[]): FilledItem<{
     data: AppComponent;
     id: string;

package/components/apps/editor/inlineScriptsPanel/utils.js

@@ -1,3 +1,33 @@
+import { fieldTypeToTsType, schemaToInputsSpec } from "../../utils";
+// When the schema is loaded, we need to update the inputs spec
+// in order to render the inputs the component panel
+export function computeFields(schema, defaultUserInput, fields) {
+    let schemaCopy = JSON.parse(JSON.stringify(schema));
+    const result = {};
+    const newInputs = schemaToInputsSpec(schemaCopy, defaultUserInput);
+    if (!fields) {
+        return newInputs;
+    }
+    Object.keys(newInputs).forEach((key) => {
+        const newInput = newInputs[key];
+        const oldInput = fields[key];
+        // If the input is not present in the old inputs, add it
+        if (oldInput === undefined) {
+            result[key] = newInput;
+        }
+        else {
+            if (fieldTypeToTsType(newInput.fieldType) !== fieldTypeToTsType(oldInput.fieldType) ||
+                newInput.format !== oldInput.format ||
+                newInput.subFieldType !== oldInput.subFieldType) {
+                result[key] = newInput;
+            }
+            else {
+                result[key] = oldInput;
+            }
+        }
+    });
+    return result;
+}
 export function getAppScripts(grid) {
     return grid.reduce((acc, gridComponent) => {
         const component = gridComponent.data;

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

@@ -4,7 +4,7 @@ import PanelSection from './common/PanelSection.svelte';
 export let component;
 </script>
 
-{#if component.verticalAlignment !== undefined}
+{#if component.horizontalAlignment || component.verticalAlignment}
 	<PanelSection title="Alignment">
 		<div class="flex flex-wrap gap-2">
 			{#if component.horizontalAlignment}

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

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppComponent } from '../../types';
+import type { AppComponent } from '../component';
 declare const __propDef: {
     props: {
         component: AppComponent;

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

@@ -1,8 +1,10 @@
 <script>import { Button } from '../../../common';
 import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
 import { staticValues } from '../componentsPanel/componentStaticValues';
 import SubTypeEditor from './SubTypeEditor.svelte';
 export let componentInput;
+const dispatch = createEventDispatcher();
 function addElementByType() {
     if (componentInput.subFieldType && componentInput.value) {
         if (componentInput.subFieldType === 'boolean') {
@@ -31,6 +33,7 @@ function addElementByType() {
 function deleteElementByType(index) {
     if (componentInput.value) {
         componentInput.value.splice(index, 1);
+        dispatch('deleteArrayItem', { index });
         componentInput = componentInput;
     }
 }
@@ -42,7 +45,7 @@ function deleteElementByType(index) {
 			<div class="flex flex-row gap-2 items-center relative">
 				<SubTypeEditor bind:componentInput bind:value />
 
-				<div class="absolute top-4 right-4">
+				<div class="absolute top-1 right-1">
 					<Button
 						size="xs"
 						color="light"

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

@@ -5,43 +5,101 @@ declare const __propDef: {
             fieldType: "array";
             subFieldType?: "text" | undefined;
             format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                base64?: boolean | undefined;
+            } | undefined;
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
             subFieldType?: "textarea" | undefined;
             format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                base64?: boolean | undefined;
+            } | undefined;
         }) | (import("../../inputType").StaticInput<number[]> & {
             fieldType: "array";
             subFieldType?: "number" | undefined;
             format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                base64?: boolean | undefined;
+            } | undefined;
         }) | (import("../../inputType").StaticInput<boolean[]> & {
             fieldType: "array";
             subFieldType?: "boolean" | undefined;
             format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                base64?: boolean | undefined;
+            } | undefined;
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
             subFieldType?: "date" | undefined;
             format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                base64?: boolean | undefined;
+            } | undefined;
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
             subFieldType?: "time" | undefined;
             format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                base64?: boolean | undefined;
+            } | undefined;
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
             subFieldType?: "datetime" | undefined;
             format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                base64?: boolean | undefined;
+            } | undefined;
         }) | (import("../../inputType").StaticInput<object[]> & {
             fieldType: "array";
             subFieldType?: "object" | undefined;
             format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                base64?: boolean | undefined;
+            } | undefined;
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
             subFieldType?: "select" | undefined;
             format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                base64?: boolean | undefined;
+            } | undefined;
         } & {
-            optionValuesKey: "buttonColorOptions" | "buttonSizeOptions" | "tableSearchOptions" | "chartThemeOptions" | "textStyleOptions";
+            optionValuesKey: "buttonColorOptions" | "buttonSizeOptions" | "tableSearchOptions" | "chartThemeOptions" | "textStyleOptions" | "currencyOptions" | "localeOptions" | "objectFitOptions";
+        }) | (import("../../inputType").StaticInput<string[]> & {
+            fieldType: "array";
+            subFieldType?: "select" | undefined;
+            format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                base64?: boolean | undefined;
+            } | undefined;
+        } & {
+            optionValuesKey: "buttonColorOptions" | "buttonSizeOptions" | "tableSearchOptions" | "chartThemeOptions" | "textStyleOptions" | "currencyOptions" | "localeOptions" | "objectFitOptions";
         });
     };
     events: {
+        deleteArrayItem: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

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

@@ -1,5 +1,5 @@
 <script>import Button from '../../../common/button/Button.svelte';
-import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faCopy, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import PanelSection from './common/PanelSection.svelte';
 import InputsSpecsEditor from './InputsSpecsEditor.svelte';
@@ -15,44 +15,39 @@ import ComponentInputTypeEditor from './ComponentInputTypeEditor.svelte';
 import AlignmentEditor from './AlignmentEditor.svelte';
 import RunnableInputEditor from './inputEditor/RunnableInputEditor.svelte';
 import TemplateEditor from '../../../TemplateEditor.svelte';
+import CssProperty from '../componentsPanel/CssProperty.svelte';
+import { dirtyStore } from '../../../common/confirmationModal/dirtyStore';
+import GridTab from './GridTab.svelte';
+import { duplicateGridItem } from '../appUtils';
+import { deleteGridItem } from '../appUtils';
+import MoveToOtherGrid from './MoveToOtherGrid.svelte';
 export let component;
-export let onDelete = undefined;
 export let rowColumns = false;
-const { app, staticOutputs, runnableComponents, selectedComponent, worldStore } = getContext('AppEditorContext');
+export let onDelete = undefined;
+export let parent;
+export let noGrid = false;
+const { app, staticOutputs, runnableComponents, selectedComponent, worldStore, focusedGrid } = getContext('AppEditorContext');
+function duplicateElement(id) {
+    $dirtyStore = true;
+    const newId = duplicateGridItem($app, parent, id);
+    $selectedComponent = newId;
+}
 function removeGridElement() {
     $selectedComponent = undefined;
-    if (onDelete && component) {
-        delete $staticOutputs[component.id];
-        $staticOutputs = $staticOutputs;
-        delete $runnableComponents[component.id];
-        $runnableComponents = $runnableComponents;
-        onDelete();
-        // Delete static inputs
-    }
-    else {
-        if (component) {
-            $app.grid = $app.grid.filter((gridComponent) => gridComponent.data.id !== component?.id);
-            // Delete static inputs
-            delete $staticOutputs[component.id];
-            $staticOutputs = $staticOutputs;
-            delete $runnableComponents[component.id];
-            $runnableComponents = $runnableComponents;
-        }
-    }
-    if (component &&
-        component.componentInput?.type === 'runnable' &&
-        component.componentInput?.runnable?.type === 'runnableByName') {
-        const { name, inlineScript } = component.componentInput.runnable;
-        if (inlineScript) {
-            if (!$app.unusedInlineScripts) {
-                $app.unusedInlineScripts = [];
-            }
-            $app.unusedInlineScripts.push({
-                name,
-                inlineScript
-            });
+    $focusedGrid = undefined;
+    if (component && !noGrid) {
+        let ids = deleteGridItem($app, component, parent);
+        for (const key of ids) {
+            delete $staticOutputs[key];
+            delete $runnableComponents[key];
         }
     }
+    delete $staticOutputs[component.id];
+    delete $runnableComponents[component.id];
+    $app = $app;
+    $staticOutputs = $staticOutputs;
+    $runnableComponents = $runnableComponents;
+    onDelete?.();
 }
 $: extraLib =
     component?.componentInput?.type === 'template' && $worldStore
@@ -143,15 +138,50 @@ $: extraLib =
 			</PanelSection>
 		{/if}
 
+		{#if component.type === 'tabscomponent'}
+			<GridTab bind:tabs={component.tabs} {component} />
+		{/if}
+
 		{#if component.type === 'tablecomponent' && Array.isArray(component.actionButtons)}
 			<TableActions id={component.id} bind:components={component.actionButtons} />
 		{/if}
 
 		<AlignmentEditor bind:component />
-		{#if component.type === 'buttoncomponent' || component.type === 'formcomponent'}
+		{#if component.type === 'buttoncomponent' || component.type === 'formcomponent' || component.type === 'formbuttoncomponent'}
 			<Recompute bind:recomputeIds={component.recomputeIds} ownId={component.id} />
 		{/if}
 
+		{#if Object.keys(component.customCss ?? {}).length > 0}
+			<PanelSection title="Custom CSS">
+				{#each Object.keys(component.customCss ?? {}) as name}
+					{#if component?.customCss?.[name]}
+						<div class="mb-2">
+							<CssProperty {name} bind:value={component.customCss[name]} />
+						</div>
+					{/if}
+				{/each}
+			</PanelSection>
+		{/if}
+
+		<PanelSection title="Duplicate">
+			<Button
+				size="xs"
+				color="dark"
+				startIcon={{ icon: faCopy }}
+				on:click={() => {
+					if (component) {
+						duplicateElement(component.id)
+					}
+				}}
+			>
+				Duplicate component: {component.id}
+			</Button>
+		</PanelSection>
+
+		<PanelSection title="Move to other grid">
+			<MoveToOtherGrid bind:component {parent} />
+		</PanelSection>
+
 		<PanelSection title="Danger zone">
 			<Button
 				size="xs"

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

@@ -1,10 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppComponent } from '../../types';
+import type { AppComponent } from '../component';
 declare const __propDef: {
     props: {
-        component: AppComponent | undefined;
-        onDelete?: (() => void) | undefined;
+        component: AppComponent;
         rowColumns?: boolean | undefined;
+        onDelete?: (() => void) | undefined;
+        parent: string | undefined;
+        noGrid?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;