windmill-components 1.87.0 → 1.89.0

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

@@ -0,0 +1,70 @@
+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;
+}
+function processGridItemRunnable(gridItem, list) {
+    const component = gridItem.data;
+    if (component) {
+        const componentInput = component.componentInput;
+        if (component.type === 'tablecomponent') {
+            component.actionButtons.forEach((actionButton) => {
+                if (actionButton.componentInput?.type !== 'runnable') {
+                    return;
+                }
+                processRunnable(actionButton.componentInput.runnable, actionButton.componentInput.transformer, actionButton.id, list);
+            });
+        }
+        if (componentInput?.type === 'runnable') {
+            processRunnable(componentInput.runnable, componentInput.transformer, gridItem.id, list);
+        }
+    }
+    return list;
+}
+export function getAppScripts(grid, subgrids) {
+    const scriptsList = grid.reduce((acc, gridComponent) => processGridItemRunnable(gridComponent, acc), { inline: [], imported: [], transformer: false });
+    if (subgrids) {
+        Object.values(subgrids).forEach((subgrid) => {
+            subgrid.forEach((subgridComponent) => {
+                processGridItemRunnable(subgridComponent, scriptsList);
+            });
+        });
+    }
+    return scriptsList;
+}
+function processRunnable(runnable, transformer, id, list) {
+    if (runnable?.type === undefined) {
+        return;
+    }
+    const type = runnable.type === 'runnableByPath' ? 'imported' : 'inline';
+    list[type].push({
+        name: runnable[runnable.type === 'runnableByPath' ? 'path' : 'name'],
+        id,
+        transformer: transformer !== undefined
+    });
+}

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

@@ -0,0 +1,45 @@
+<script>import { AlignCenterHorizontal, AlignCenterVertical, AlignEndHorizontal, AlignEndVertical, AlignStartHorizontal, AlignStartVertical } from 'lucide-svelte';
+import { getContext } from 'svelte';
+import PanelSection from './common/PanelSection.svelte';
+import ToggleButtonGroup from '../../../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../../../common/toggleButton-v2/ToggleButton.svelte';
+const { app } = getContext('AppViewerContext');
+export let component;
+</script>
+
+{#if component.horizontalAlignment || component.verticalAlignment}
+	<PanelSection title="Alignment">
+		<div class="flex flex-col gap-2 w-full">
+			{#if component.horizontalAlignment}
+				<div class="flex flex-row justify-between items-center">
+					<div class="text-xs font-semibold">Horizontal</div>
+					<div>
+						<ToggleButtonGroup
+							on:selected={() => (component = component)}
+							bind:selected={component.horizontalAlignment}
+						>
+							<ToggleButton value="left" icon={AlignStartVertical} />
+							<ToggleButton value="center" icon={AlignCenterVertical} />
+							<ToggleButton value="right" icon={AlignEndVertical} />
+						</ToggleButtonGroup>
+					</div>
+				</div>
+			{/if}
+			{#if component.type !== 'formcomponent' && component.verticalAlignment}
+				<div class="flex flex-row justify-between items-center">
+					<div class="text-xs font-semibold">Vertical</div>
+					<div>
+						<ToggleButtonGroup
+							on:selected={() => ($app = $app)}
+							bind:selected={component.verticalAlignment}
+						>
+							<ToggleButton value="top" icon={AlignStartHorizontal} />
+							<ToggleButton value="center" icon={AlignCenterHorizontal} />
+							<ToggleButton value="bottom" icon={AlignEndHorizontal} />
+						</ToggleButtonGroup>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</PanelSection>
+{/if}

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppComponent } from '../component';
+declare const __propDef: {
+    props: {
+        component: AppComponent;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AlignmentEditorProps = typeof __propDef.props;
+export type AlignmentEditorEvents = typeof __propDef.events;
+export type AlignmentEditorSlots = typeof __propDef.slots;
+export default class AlignmentEditor extends SvelteComponentTyped<AlignmentEditorProps, AlignmentEditorEvents, AlignmentEditorSlots> {
+}
+export {};

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

@@ -0,0 +1,151 @@
+<script>import { Button } from '../../../common';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { GripVertical, X } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import SubTypeEditor from './SubTypeEditor.svelte';
+import { flip } from 'svelte/animate';
+import { dndzone, SOURCES, TRIGGERS } from 'svelte-dnd-action';
+import { generateRandomString, pluralize } from '../../../../utils';
+const flipDurationMs = 200;
+export let componentInput;
+export let subFieldType = undefined;
+export let selectOptions = undefined;
+const dispatch = createEventDispatcher();
+function addElementByType() {
+    if (!Array.isArray(componentInput.value)) {
+        componentInput.value = [];
+    }
+    let value = componentInput.value;
+    if (subFieldType) {
+        if (subFieldType === 'boolean') {
+            value.push(false);
+        }
+        else if (subFieldType === 'number') {
+            value.push(0);
+        }
+        else if (subFieldType === 'object') {
+            value.push({});
+        }
+        else if (subFieldType === 'labeledresource' || subFieldType === 'labeledselect') {
+            value.push({ value: 'foo', label: 'bar' });
+        }
+        else if (subFieldType === 'tab-select') {
+            value.push({ id: '', index: 0 });
+        }
+        else if (subFieldType === 'text' ||
+            subFieldType === 'textarea' ||
+            // TODO: Add support for these types
+            subFieldType === 'date' ||
+            subFieldType === 'time' ||
+            subFieldType === 'datetime') {
+            value.push('');
+        }
+        else if (subFieldType === 'select' && selectOptions) {
+            value.push(selectOptions[0]);
+        }
+    }
+    else {
+        value.push('');
+    }
+    componentInput = componentInput;
+    if (componentInput.value) {
+        items.push({
+            value: componentInput.value[componentInput.value.length - 1],
+            id: generateRandomString()
+        });
+    }
+}
+function deleteElementByType(index) {
+    if (componentInput.value) {
+        componentInput.value.splice(index, 1);
+        items.splice(index, 1); // Add this
+        redraw = redraw + 1;
+        dispatch('deleteArrayItem', { index });
+    }
+}
+let redraw = 0;
+let dragDisabled = true;
+function handleConsider(e) {
+    const { items: newItems, info: { source, trigger } } = e.detail;
+    items = newItems;
+    // Ensure dragging is stopped on drag finish via keyboard
+    if (source === SOURCES.KEYBOARD && trigger === TRIGGERS.DRAG_STOPPED) {
+        dragDisabled = true;
+    }
+}
+function handleFinalize(e) {
+    const { items: newItems, info: { source } } = e.detail;
+    items = newItems;
+    // Ensure dragging is stopped on drag finish via pointer (mouse, touch)
+    if (source === SOURCES.POINTER) {
+        dragDisabled = true;
+    }
+    const reorderedValues = items.map((item) => item.value);
+    componentInput.value = reorderedValues;
+}
+function startDrag(e) {
+    // preventing default to prevent lag on touch devices (because of the browser checking for screen scrolling)
+    e.preventDefault();
+    dragDisabled = false;
+}
+function handleKeyDown(e) {
+    if ((e.key === 'Enter' || e.key === ' ') && dragDisabled)
+        dragDisabled = false;
+}
+let items = componentInput.value?.map((item, index) => {
+    return { value: item, id: generateRandomString() };
+}) ?? [];
+$: items && handleItemsChange();
+function handleItemsChange() {
+    componentInput.value = items.map((item) => item.value);
+}
+</script>
+
+<div class="flex gap-2 flex-col mt-2">
+	{#key redraw}
+		{#if Array.isArray(items) && componentInput.value}
+			<div class="text-xs text-gray-600 font-semibold">{pluralize(items.length, 'item')}</div>
+			<section
+				use:dndzone={{
+					items,
+					dragDisabled,
+					flipDurationMs,
+					dropTargetStyle: {}
+				}}
+				on:consider={handleConsider}
+				on:finalize={handleFinalize}
+			>
+				{#each items as item, index (item.id)}
+					<div animate:flip={{ duration: flipDurationMs }} class="border-0 outline-none">
+						<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+
+						<div class="flex flex-row gap-2 items-center relative my-1">
+							<SubTypeEditor {subFieldType} bind:componentInput bind:value={item.value} />
+							<div class="flex justify-between flex-col items-center">
+								<div
+									tabindex={dragDisabled ? 0 : -1}
+									class="w-4 h-4"
+									on:mousedown={startDrag}
+									on:touchstart={startDrag}
+									on:keydown={handleKeyDown}
+								>
+									<GripVertical size={16} />
+								</div>
+								<button
+									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>
+						</div>
+					</div>
+				{/each}
+			</section>
+		{/if}
+	{/key}
+	<Button size="xs" color="light" startIcon={{ icon: faPlus }} on:click={() => addElementByType()}>
+		Add
+	</Button>
+</div>

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { InputType, StaticInput, StaticOptions } from '../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: StaticInput<any[]>;
+        subFieldType?: InputType | undefined;
+        selectOptions?: StaticOptions['selectOptions'] | undefined;
+    };
+    events: {
+        deleteArrayItem: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ArrayStaticInputEditorProps = typeof __propDef.props;
+export type ArrayStaticInputEditorEvents = typeof __propDef.events;
+export type ArrayStaticInputEditorSlots = typeof __propDef.slots;
+export default class ArrayStaticInputEditor extends SvelteComponentTyped<ArrayStaticInputEditorProps, ArrayStaticInputEditorEvents, ArrayStaticInputEditorSlots> {
+}
+export {};

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

@@ -0,0 +1,55 @@
+<script>import { getContext } from 'svelte';
+import { CurlyBraces, FunctionSquare, Pen, Plug2 } from 'lucide-svelte';
+import ToggleButtonGroup from '../../../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../../../common/toggleButton-v2/ToggleButton.svelte';
+export let componentInput;
+export let disableStatic = false;
+const { onchange } = getContext('AppViewerContext');
+$: if (componentInput.fieldType == 'template' && componentInput.type == 'static') {
+    //@ts-ignore
+    componentInput.type = 'template';
+    componentInput['eval'] = componentInput.value;
+}
+let clientWidth;
+</script>
+
+{#if componentInput.fieldType !== 'any'}
+	<div class="w-full">
+		<div class="mx-auto" bind:clientWidth>
+			<ToggleButtonGroup on:selected={() => onchange?.()} bind:selected={componentInput.type}>
+				{#if componentInput.fieldType === 'template'}
+					<ToggleButton
+						tooltip={`Templated string (use \$\{<output>.x\} )`}
+						value="template"
+						disabled={disableStatic}
+						icon={CurlyBraces}
+						label="Template"
+					/>
+				{:else}
+					<ToggleButton
+						label="Static"
+						value="static"
+						disabled={disableStatic}
+						iconOnly={clientWidth < 250}
+						icon={Pen}
+					/>
+				{/if}
+
+				<ToggleButton
+					tooltip="Connect to an output"
+					value="connected"
+					icon={Plug2}
+					iconOnly={clientWidth < 250}
+					label="Connect"
+				/>
+				<ToggleButton
+					tooltip="Compute it with a script/flow"
+					value="runnable"
+					icon={FunctionSquare}
+					iconOnly={clientWidth < 250}
+					label="Compute"
+				/>
+			</ToggleButtonGroup>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: AppInput;
+        disableStatic?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComponentInputTypeEditorProps = typeof __propDef.props;
+export type ComponentInputTypeEditorEvents = typeof __propDef.events;
+export type ComponentInputTypeEditorSlots = typeof __propDef.slots;
+export default class ComponentInputTypeEditor extends SvelteComponentTyped<ComponentInputTypeEditorProps, ComponentInputTypeEditorEvents, ComponentInputTypeEditorSlots> {
+}
+export {};

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

@@ -0,0 +1,289 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import PanelSection from './common/PanelSection.svelte';
+import InputsSpecsEditor from './InputsSpecsEditor.svelte';
+import TableActions from './TableActions.svelte';
+import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
+import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
+import { classNames, getModifierKey, isMac } from '../../../../utils';
+import { buildExtraLib } from '../../utils';
+import Recompute from './Recompute.svelte';
+import Tooltip from '../../../Tooltip.svelte';
+import ComponentInputTypeEditor from './ComponentInputTypeEditor.svelte';
+import AlignmentEditor from './AlignmentEditor.svelte';
+import RunnableInputEditor from './inputEditor/RunnableInputEditor.svelte';
+import TemplateEditor from '../../../TemplateEditor.svelte';
+import { COMPONENT_SETS, ccomponents } from '../component';
+import CssProperty from '../componentsPanel/CssProperty.svelte';
+import GridTab from './GridTab.svelte';
+import { clearErrorByComponentId, clearJobsByComponentId, deleteGridItem } from '../appUtils';
+import GridPane from './GridPane.svelte';
+import { slide } from 'svelte/transition';
+import { push } from '../../../../history';
+import Kbd from '../../../common/kbd/Kbd.svelte';
+import { secondaryMenu } from './secondaryMenu';
+import StylePanel from './StylePanel.svelte';
+import { Delete } from 'lucide-svelte';
+export let componentSettings = undefined;
+export let rowColumns = false;
+export let onDelete = undefined;
+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, movingcomponents } = getContext('AppEditorContext');
+$: editor && ($ontextfocus = () => editor?.focus());
+function removeGridElement() {
+    push(history, $app);
+    if (componentSettings?.item.id) {
+        delete $worldStore.outputsById[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;
+    if (componentSettings?.item && !noGrid) {
+        let ids = deleteGridItem($app, componentSettings?.item.data, componentSettings?.parent, false);
+        for (const key of ids) {
+            delete $runnableComponents[key];
+        }
+    }
+    if (componentSettings?.item?.data?.id) {
+        delete $runnableComponents[componentSettings?.item?.data?.id];
+    }
+    $app = $app;
+    $runnableComponents = $runnableComponents;
+    onDelete?.();
+}
+let viewCssOptions = false;
+$: extraLib =
+    componentSettings?.item?.data?.componentInput?.type === 'template' && $worldStore
+        ? buildExtraLib($worldStore?.outputsById ?? {}, componentSettings?.item?.data?.id, false, $state, false)
+        : undefined;
+function keydown(event) {
+    const { key, metaKey } = event;
+    if (key === 'Delete' || (key === 'Backspace' && metaKey)) {
+        removeGridElement();
+        event.stopPropagation();
+    }
+}
+const initialConfiguration = componentSettings?.item?.data?.type
+    ? ccomponents[componentSettings.item.data.type].initialData.configuration
+    : {};
+const componentInput = componentSettings?.item?.data?.type
+    ? ccomponents[componentSettings?.item?.data?.type].initialData.componentInput
+    : undefined;
+$: componentSettings?.item?.data && ($app = $app);
+const hasInteraction = componentSettings?.item.data.type
+    ? COMPONENT_SETS[1].components.includes(componentSettings?.item.data.type)
+    : false;
+</script>
+
+<svelte:window on:keydown={keydown} />
+
+{#if componentSettings?.item?.data}
+	{@const component = componentSettings.item.data}
+	<div class="flex min-h-full flex-col min-w-[150px] w-full divide-y">
+		{#if component.componentInput}
+			<PanelSection title={hasInteraction ? 'Event handler' : 'Data source'}>
+				<svelte:fragment slot="action">
+					<span
+						class={classNames(
+							'text-white px-2 text-2xs py-0.5 font-bold rounded-sm w-fit',
+							'bg-indigo-500'
+						)}
+					>
+						{`${component.id}`}
+					</span>
+				</svelte:fragment>
+
+				{#if componentSettings.item.data.componentInput}
+					<ComponentInputTypeEditor
+						bind:componentInput={componentSettings.item.data.componentInput}
+					/>
+
+					<div class="flex flex-col w-full gap-2 my-2">
+						{#if componentSettings.item.data.componentInput.type === 'static'}
+							<StaticInputEditor
+								fieldType={componentInput?.fieldType}
+								subFieldType={componentInput?.subFieldType}
+								format={componentInput?.format}
+								bind:componentInput={componentSettings.item.data.componentInput}
+								noVariablePicker
+							/>
+						{:else if componentSettings.item.data.componentInput.type === 'template' && componentSettings.item.data.componentInput !== undefined}
+							<div class="py-1 min-h-[28px] rounded border border-1 border-gray-500">
+								<TemplateEditor
+									bind:this={editor}
+									fontSize={12}
+									bind:code={componentSettings.item.data.componentInput.eval}
+									{extraLib}
+								/>
+							</div>
+						{:else if componentSettings.item.data.componentInput.type === 'connected' && component.componentInput !== undefined}
+							<ConnectedInputEditor
+								bind:componentInput={componentSettings.item.data.componentInput}
+							/>
+						{:else if componentSettings.item.data.componentInput?.type === 'runnable' && component.componentInput !== undefined}
+							<RunnableInputEditor
+								appComponent={component}
+								bind:appInput={componentSettings.item.data.componentInput}
+								defaultUserInput={component.type == 'formcomponent' ||
+									component.type == 'formbuttoncomponent'}
+							/>
+						{/if}
+					</div>
+				{/if}
+				{#key $stateId}
+					{#if componentSettings.item.data.componentInput?.type === 'runnable'}
+						{#if Object.keys(componentSettings.item.data.componentInput.fields ?? {}).length > 0}
+							<div class="border w-full">
+								<PanelSection
+									title={`Runnable Inputs (${
+										Object.keys(componentSettings.item.data.componentInput.fields ?? {}).length
+									})`}
+								>
+									<svelte:fragment slot="action">
+										<Tooltip>
+											The runnable inputs of a button component are not settable by the user. They
+											must be defined statically or connected.
+										</Tooltip>
+									</svelte:fragment>
+
+									<InputsSpecsEditor
+										id={component.id}
+										shouldCapitalize={false}
+										displayType
+										bind:inputSpecs={componentSettings.item.data.componentInput.fields}
+										userInputEnabled={component.type === 'formcomponent' ||
+											component.type === 'formbuttoncomponent'}
+										{rowColumns}
+									/>
+								</PanelSection>
+							</div>
+						{/if}
+					{/if}
+				{/key}
+			</PanelSection>
+		{/if}
+		{#if Object.values(initialConfiguration).length > 0}
+			<PanelSection title={`Configuration (${Object.values(initialConfiguration).length})`}>
+				<InputsSpecsEditor
+					{rowColumns}
+					id={component.id}
+					inputSpecsConfiguration={initialConfiguration}
+					bind:inputSpecs={componentSettings.item.data.configuration}
+					userInputEnabled={false}
+				/>
+			</PanelSection>
+		{:else}
+			<div class="h-full w-full text-sm text-gray-500 text-center py-8 px-2"
+				>{ccomponents[component.type].name} has no configuration</div
+			>
+		{/if}
+
+		{#if componentSettings.item.data.type === 'tabscomponent'}
+			<GridTab bind:tabs={componentSettings.item.data.tabs} {component} />
+		{:else if componentSettings.item.data.type === 'verticalsplitpanescomponent' || componentSettings.item.data.type === 'horizontalsplitpanescomponent'}
+			<GridPane bind:panes={componentSettings.item.data.panes} {component} />
+		{:else if componentSettings.item.data.type === 'tablecomponent' && Array.isArray(componentSettings.item.data.actionButtons)}
+			<TableActions id={component.id} bind:components={componentSettings.item.data.actionButtons} />
+		{/if}
+
+		{#if componentSettings.item.data.type === 'buttoncomponent' || componentSettings.item.data.type === 'formcomponent' || componentSettings.item.data.type === 'formbuttoncomponent'}
+			<Recompute
+				bind:recomputeIds={componentSettings.item.data.recomputeIds}
+				ownId={component.id}
+			/>
+		{/if}
+
+		<div class="grow shrink" />
+
+		<AlignmentEditor bind:component={componentSettings.item.data} />
+
+		{#if Object.keys(ccomponents[component.type].customCss ?? {}).length > 0}
+			<PanelSection title="Styling">
+				<div slot="action" class="flex justify-end flex-wrap gap-1">
+					<Button
+						color="light"
+						size="xs"
+						variant="border"
+						on:click={() => (viewCssOptions = !viewCssOptions)}
+					>
+						{viewCssOptions ? 'Hide' : 'Show'}
+					</Button>
+					<Button
+						color="light"
+						size="xs"
+						variant="border"
+						endIcon={{ icon: faChevronRight }}
+						on:click={() => secondaryMenu.open(StylePanel, { component })}
+					>
+						Rich Editor
+					</Button>
+				</div>
+				{#if viewCssOptions}
+					<div transition:slide|local class="w-full">
+						{#each Object.keys(ccomponents[component.type].customCss ?? {}) as name}
+							{#if componentSettings.item.data?.customCss != undefined}
+								<div class="w-full mb-2">
+									<CssProperty
+										forceStyle={ccomponents[component.type].customCss[name].style != undefined}
+										forceClass={ccomponents[component.type].customCss[name].class != undefined}
+										{name}
+										bind:value={componentSettings.item.data.customCss[name]}
+									/>
+								</div>
+							{/if}
+						{/each}
+					</div>
+				{/if}
+			</PanelSection>
+		{/if}
+
+		{#if duplicateMoveAllowed}
+			<PanelSection title="Copy/Move">
+				<div slot="action">
+					<Button size="xs" color="red" variant="border" on:click={removeGridElement}>
+						Delete&nbsp;&nbsp;
+						{#if isMac()}
+							<Kbd kbdClass="center-center">
+								<span class="text-lg leading-none">⌘</span>
+								<span class="px-0.5">+</span>
+								<Delete size={16} />
+							</Kbd>
+						{:else}
+							<Kbd>Del</Kbd>
+						{/if}
+					</Button>
+				</div>
+				<div class="flex flex-col gap-1">
+					<div>
+						<span class="text-gray-600 text-xs mr-2"> Copy:</span>
+						<Kbd>{getModifierKey()}</Kbd>+<Kbd>C</Kbd>,
+						<Kbd>{getModifierKey()}</Kbd>+<Kbd>V</Kbd>
+					</div>
+					<div>
+						<span class="text-gray-600 text-xs mr-2">Move: </span>
+						<Kbd>{getModifierKey()}</Kbd>+<Kbd>X</Kbd>,
+						<Kbd>{getModifierKey()}</Kbd>+<Kbd>V</Kbd>
+					</div>
+					<div>
+						<span class="text-gray-600 text-xs mr-2">Navigate:</span>
+						<Kbd>&leftarrow;</Kbd>
+						<Kbd>&uparrow;</Kbd><Kbd>&rightarrow;</Kbd>
+						<Kbd>ESC</Kbd>
+					</div>
+					<div>
+						<span class="text-gray-600 text-xs mr-2">Add to selection:</span>
+						<Kbd>&DoubleUpArrow;</Kbd>+<Kbd>click</Kbd>
+					</div>
+				</div>
+			</PanelSection>
+		{/if}
+	</div>
+{/if}