windmill-components 1.70.0 → 1.75.0

package/components/apps/editor/AppEditorHeader.svelte

@@ -1,6 +1,6 @@
 <script>import { goto } from '$app/navigation';
 import { page } from '$app/stores';
-import { Alert, Badge, Drawer, DrawerContent } from '../../common';
+import { Alert, Badge, ButtonPopup, ButtonPopupItem, Drawer, DrawerContent, UndoRedo } from '../../common';
 import Button from '../../common/button/Button.svelte';
 import { dirtyStore } from '../../common/confirmationModal/dirtyStore';
 import Skeleton from '../../common/skeleton/Skeleton.svelte';
@@ -17,14 +17,15 @@ import TestJobLoader from '../../TestJobLoader.svelte';
 import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { AppService, Job, Policy } from '../../../gen';
-import { userStore, workspaceStore } from '../../../stores';
+import { redo, undo } from '../../../history';
+import { workspaceStore } from '../../../stores';
 import { faBug, faClipboard, faExternalLink, faFileExport, faGlobe, faSave } from '@fortawesome/free-solid-svg-icons';
-import { AlignHorizontalSpaceAround, Expand, Eye, Laptop2, Loader2, MoreVertical, Pencil, SlidersHorizontal, Smartphone, X } from 'lucide-svelte';
+import { AlignHorizontalSpaceAround, Expand, Eye, Laptop2, Loader2, MoreVertical, Pencil, Redo, SlidersHorizontal, Smartphone, Undo, X } from 'lucide-svelte';
 import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { appToHubUrl, classNames, copyToClipboard, sendUserToast } from '../../../utils';
-import { toStatic } from '../utils';
+import { allItems, toStatic } from '../utils';
 import AppExportButton from './AppExportButton.svelte';
 import AppInputs from './AppInputs.svelte';
 import PanelSection from './settingsPanel/common/PanelSection.svelte';
@@ -37,7 +38,8 @@ async function hash(message) {
 }
 export let policy;
 export let fromHub = false;
-const { app, summary, mode, breakpoint, appPath, jobs, staticExporter, errorByComponent, openDebugRun, focusedGrid, selectedComponent } = getContext('AppEditorContext');
+const { app, summary, mode, breakpoint, appPath, jobs, staticExporter, errorByComponent, openDebugRun, focusedGrid, selectedComponent } = getContext('AppViewerContext');
+const { history } = getContext('AppEditorContext');
 const loading = {
     publish: false,
     save: false
@@ -69,7 +71,7 @@ function collectStaticFields(fields) {
     }));
 }
 async function computeTriggerables() {
-    const allTriggers = await Promise.all($app.grid
+    const allTriggers = await Promise.all(allItems($app.grid, $app.subgrids)
         .flatMap((x) => {
         let c = x.data;
         let r = [c.componentInput];
@@ -92,14 +94,12 @@ async function computeTriggerables() {
         }
         return [];
     })
-        .concat(Object.values($app.hiddenInlineScripts).map(async (v) => {
+        .concat(Object.values($app.hiddenInlineScripts ?? {}).map(async (v) => {
         let hex = await hash(v.inlineScript?.content);
         const staticInputs = collectStaticFields(v.fields);
         return [`rawscript/${hex}`, staticInputs];
     })));
     policy.triggerables = Object.fromEntries(allTriggers.filter((x) => x.length > 0));
-    policy.on_behalf_of = `u/${$userStore?.username}`;
-    policy.on_behalf_of_email = $userStore?.email;
 }
 async function createApp(path) {
     await computeTriggerables();
@@ -148,18 +148,24 @@ async function save() {
         return;
     }
     loading.save = true;
-    await computeTriggerables();
-    await AppService.updateApp({
-        workspace: $workspaceStore,
-        path: $page.params.path,
-        requestBody: {
-            value: $app,
-            summary: $summary,
-            policy
-        }
-    });
-    loading.save = false;
-    sendUserToast('App saved');
+    try {
+        await computeTriggerables();
+        await AppService.updateApp({
+            workspace: $workspaceStore,
+            path: $page.params.path,
+            requestBody: {
+                value: $app,
+                summary: $summary,
+                policy
+            }
+        });
+        sendUserToast('App saved');
+        loading.save = false;
+    }
+    catch (e) {
+        loading.save = false;
+        throw e;
+    }
 }
 let selectedJobId = undefined;
 let testJobLoader;
@@ -167,8 +173,50 @@ let job = undefined;
 let testIsLoading = false;
 $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 $: hasErrors = Object.keys($errorByComponent).length > 0;
+function onKeyDown(event) {
+    switch (event.key) {
+        case 'Z':
+            if (event.ctrlKey) {
+                $app = redo(history);
+                event.preventDefault();
+            }
+            break;
+        case 'z':
+            if (event.ctrlKey) {
+                $app = undo(history, $app);
+                event.preventDefault();
+            }
+            break;
+        case 's':
+            if (event.ctrlKey) {
+                save();
+                event.preventDefault();
+            }
+            break;
+        // case 'ArrowDown': {
+        // 	let ids = generateIds()
+        // 	let idx = ids.indexOf($selectedIdStore)
+        // 	if (idx > -1 && idx < ids.length - 1) {
+        // 		$selectedIdStore = ids[idx + 1]
+        // 		event.preventDefault()
+        // 	}
+        // 	break
+        // }
+        // case 'ArrowUp': {
+        // 	let ids = generateIds()
+        // 	let idx = ids.indexOf($selectedIdStore)
+        // 	if (idx > 0 && idx < ids.length) {
+        // 		$selectedIdStore = ids[idx - 1]
+        // 		event.preventDefault()
+        // 	}
+        // 	break
+        // }
+    }
+}
 </script>
 
+<svelte:window on:keydown={onKeyDown} />
+
 <TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job />
 
 <Drawer bind:open={saveDrawerOpen} size="800px">
@@ -229,7 +277,7 @@ $: hasErrors = Object.keys($errorByComponent).length > 0;
 				</PanelSection>
 			</Pane>
 			<Pane size={75}>
-				<div class="h-full w-full overflow-hidden">
+				<div class="h-full w-full overflow-auto">
 					{#if selectedJobId}
 						{#if !job}
 							<Skeleton layout={[[40]]} />
@@ -353,6 +401,16 @@ $: hasErrors = Object.keys($errorByComponent).length > 0;
 	<div class="min-w-64 w-64">
 		<input type="text" placeholder="App summary" class="text-sm w-full" bind:value={$summary} />
 	</div>
+	<UndoRedo
+		undoProps={{ disabled: $history?.index === 0 }}
+		redoProps={{ disabled: $history && $history?.index === $history.history.length - 1 }}
+		on:undo={() => {
+			$app = undo(history, $app)
+		}}
+		on:redo={() => {
+			$app = redo(history)
+		}}
+	/>
 	<div class="flex gap-4 items-center grow justify-center">
 		<div>
 			<ToggleButtonGroup bind:selected={$mode}>
@@ -385,7 +443,7 @@ $: hasErrors = Object.keys($errorByComponent).length > 0;
 				<ToggleButton position="left" value={false} size="xs">
 					<div class="flex gap-1 justify-start items-center">
 						<AlignHorizontalSpaceAround size={14} />
-						<Tooltip light>
+						<Tooltip light class="mb-0.5">
 							The max width is 1168px and the content stay centered instead of taking the full page
 							width
 						</Tooltip>
@@ -473,14 +531,31 @@ $: hasErrors = Object.keys($errorByComponent).length > 0;
 		>
 			<span class="hidden md:inline">Publish</span>
 		</Button>
-		<Button
-			loading={loading.save}
-			startIcon={{ icon: faSave }}
-			on:click={save}
-			color="dark"
-			size="xs"
-		>
-			<span class="hidden md:inline">Save</span>
-		</Button>
+		{#if appPath == ''}
+			<Button
+				loading={loading.save}
+				startIcon={{ icon: faSave }}
+				on:click={save}
+				color="dark"
+				size="xs"
+			>
+				<span class="hidden md:inline">Save</span>
+			</Button>
+		{:else}
+			<ButtonPopup
+				loading={loading.save}
+				startIcon={{ icon: faSave }}
+				on:click={save}
+				color="dark"
+				size="xs"
+			>
+				<svelte:fragment slot="main">Save</svelte:fragment>
+				<ButtonPopupItem
+					on:click={() => {
+						window.open(`/apps/add?template=${appPath}`)
+					}}>Fork</ButtonPopupItem
+				>
+			</ButtonPopup>
+		{/if}
 	</div>
 </div>

package/components/apps/editor/AppInputs.svelte

@@ -3,7 +3,7 @@ import Toggle from '../../Toggle.svelte';
 import { getContext } from 'svelte';
 import AppComponentInput from './AppComponentInput.svelte';
 import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
-const { app, lazyGrid } = getContext('AppEditorContext');
+const { app } = getContext('AppViewerContext');
 let resourceOnly = true;
 </script>
 
@@ -14,9 +14,9 @@ let resourceOnly = true;
 	<Toggle bind:checked={resourceOnly} options={{ right: 'Resource only' }} />
 </div>
 <div class="gap-4 flex flex-col pt-4">
-	{#each $lazyGrid as gridItem (gridItem.data.id)}
+	{#each $app.grid as gridItem (gridItem.data.id)}
 		<div>
-			{#if gridItem.data.type === 'tablecomponent'}
+			{#if gridItem?.data?.type === 'tablecomponent'}
 				<div>
 					<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
 					<div class="ml-4 mt-4">

package/components/apps/editor/AppPreview.svelte

@@ -1,6 +1,4 @@
 <script>import { onMount, setContext } from 'svelte';
-import { fade } from 'svelte/transition';
-import { cubicOut } from 'svelte/easing';
 import { writable } from 'svelte/store';
 import { buildWorld } from '../rx';
 import GridEditor from './GridEditor.svelte';
@@ -28,10 +26,9 @@ const connectingInput = writable({
     hoveredComponent: undefined
 });
 const runnableComponents = writable({});
-setContext('AppEditorContext', {
+setContext('AppViewerContext', {
     worldStore,
     staticOutputs,
-    lazyGrid: writable(app.grid),
     app: appStore,
     summary: writable(summary),
     selectedComponent,
@@ -48,17 +45,33 @@ setContext('AppEditorContext', {
     noBackend,
     errorByComponent: writable({}),
     openDebugRun: writable(undefined),
-    focusedGrid: writable(undefined)
+    focusedGrid: writable(undefined),
+    stateId: writable(0),
+    parentWidth: writable(0)
+});
+setContext('AppEditorContext', {
+    history: undefined,
+    componentControl: writable({}),
+    pickVariableCallback: writable(undefined)
 });
 let mounted = false;
 onMount(() => {
     mounted = true;
 });
-$: mounted && ($worldStore = buildWorld($staticOutputs, undefined, context));
+let ncontext = context;
+function hashchange(e) {
+    ncontext.hash = e.newURL.split('#')[1];
+    ncontext = ncontext;
+}
+$: mounted && ($worldStore = buildWorld($staticOutputs, $worldStore, ncontext));
 $: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full ';
 $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : '';
 </script>
 
+<svelte:window on:hashchange={hashchange} />
+
+<div id="app-editor-top-level-drawer" />
+
 <div class="relative">
 	<div
 		class="{$$props.class} {lockedClasses} h-full 
@@ -70,10 +83,10 @@ $: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-non
 			</div>
 		{/if}
 	</div>
+
 	{#if isLocked}
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<div
-			transition:fade|local={{ duration: 200, easing: cubicOut }}
 			on:click={() => (isLocked = false)}
 			class="absolute inset-0 center-center bg-black/20 z-50 backdrop-blur-[1px] cursor-pointer"
 		>

package/components/apps/editor/ComponentHeader.svelte

@@ -1,5 +1,5 @@
 <script>import { classNames } from '../../../utils';
-import { Anchor, Bug, Move } from 'lucide-svelte';
+import { Anchor, Bug, Expand, Move } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import Popover from '../../Popover.svelte';
 import { Alert, Button } from '../../common';
@@ -9,7 +9,7 @@ export let locked = false;
 export let pointerdown = false;
 export let hover = false;
 const dispatch = createEventDispatcher();
-const { errorByComponent, openDebugRun, focusedGrid, worldStore } = getContext('AppEditorContext');
+const { errorByComponent, openDebugRun } = getContext('AppViewerContext');
 $: error = Object.values($errorByComponent).find((e) => e.componentId === component.id);
 function openDebugRuns() {
     if ($openDebugRun) {
@@ -47,6 +47,17 @@ function openDebugRuns() {
 			<Anchor aria-label="Lock position" size={14} />
 		{/if}
 	</button>
+	<button
+		title="Expand"
+		class={classNames(
+			'text-gray-800 px-1 text-2xs py-0.5 font-bold w-fit shadow border border-gray-300 absolute  -top-1  right-[4.5rem] z-50 cursor-pointer',
+			' hover:bg-gray-300',
+			selected ? 'bg-gray-200/80' : 'bg-gray-200/80'
+		)}
+		on:click={() => dispatch('expand')}
+	>
+		<Expand aria-label="Expand position" size={14} />
+	</button>
 {/if}
 
 {#if selected || hover}
@@ -54,7 +65,7 @@ function openDebugRuns() {
 		title="Move"
 		on:mousedown|stopPropagation|capture
 		class={classNames(
-			'text-gray-600 px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute border border-gray-300 -top-1 shadow right-[4.5rem] z-50 cursor-move',
+			'text-gray-600 px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute border border-gray-300 -top-1 shadow right-[0.5rem] z-50 cursor-move',
 			'bg-gray-200/80'
 		)}
 	>

package/components/apps/editor/ComponentHeader.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
     events: {
         mousedown: MouseEvent;
         lock: CustomEvent<any>;
+        expand: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/apps/editor/GridEditor.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext, afterUpdate } from 'svelte';
+<script>import { getContext, afterUpdate, setContext } from 'svelte';
 import Grid from '@windmill-labs/svelte-grid';
 import { classNames } from '../../../utils';
 import { columnConfiguration, disableDrag, enableDrag, isFixed, toggleFixed } from '../gridUtils';
@@ -6,8 +6,12 @@ import { twMerge } from 'tailwind-merge';
 import RecomputeAllComponents from './RecomputeAllComponents.svelte';
 import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
 import Component from './component/Component.svelte';
+import { deepEqual } from 'fast-equals';
+import { push } from '../../../history';
+import { expandGriditem, findGridItem } from './appUtils';
 export let policy;
-const { selectedComponent, app, mode, connectingInput, staticOutputs, runnableComponents, lazyGrid, summary, focusedGrid } = getContext('AppEditorContext');
+const { selectedComponent, app, mode, connectingInput, staticOutputs, runnableComponents, summary, focusedGrid, parentWidth, breakpoint } = getContext('AppViewerContext');
+const { history } = getContext('AppEditorContext');
 // The drag is disabled when the user is connecting an input
 // or when the user is previewing the app
 // or when the focused grid is a subgrid
@@ -16,7 +20,7 @@ function setAllDrags(enable) {
     const fct = enable ? disableDrag : enableDrag;
     $app.grid.map((gridItem) => {
         const disabledGridItem = fct(gridItem);
-        if (disabledGridItem.data.subGrids) {
+        if (disabledGridItem?.data?.subGrids) {
             disabledGridItem.data.subGrids = disabledGridItem.data.subGrids.map((subgrid) => subgrid?.map((subgridItem) => fct(subgridItem)) ?? []);
         }
         return disabledGridItem;
@@ -52,30 +56,29 @@ function removeGridElement(component) {
     }
 }
 function selectComponent(id) {
+    // Component selection is handled manually in the Map component (pointerdown
+    // event propagation is stopped to enable paning).
+    // Update the 'selectComponent()' function as well when this is updated.
     if (!$connectingInput.opened) {
         $selectedComponent = id;
         $focusedGrid = undefined;
     }
 }
-$: $app.grid && recomputeLazyGrid();
-let intervalId = undefined;
-function recomputeLazyGrid() {
-    {
-        if (intervalId) {
-            clearTimeout(intervalId);
-        }
-        intervalId = setTimeout(() => {
-            lazyGrid.set($app.grid);
-            intervalId = undefined;
-        }, 100);
-    }
-}
 let pointerdown = false;
+let lastapp = undefined;
 const onpointerdown = () => {
-    pointerdown = true;
+    if (history) {
+        lastapp = JSON.parse(JSON.stringify($app));
+        pointerdown = true;
+    }
 };
 const onpointerup = () => {
-    pointerdown = false;
+    if (history) {
+        pointerdown = false;
+        if (!deepEqual(lastapp, $app)) {
+            push(history, lastapp, false, true);
+        }
+    }
 };
 afterUpdate(() => {
     if ($selectedComponent) {
@@ -95,9 +98,9 @@ afterUpdate(() => {
 
 <div class="relative w-full z-20 overflow-visible">
 	<div
-		class="w-full sticky  top-0 flex justify-between border-l border-r border-b {$connectingInput?.opened
+		class="w-full sticky top-0 flex justify-between border-b {$connectingInput?.opened
 			? ''
-			: 'bg-gray-50 '} px-4 py-2 items-center gap-4"
+			: 'bg-gray-50 '} px-4 py-1 items-center gap-4"
 		style="z-index: 1000;"
 	>
 		<h2 class="truncate">{$summary}</h2>
@@ -109,9 +112,10 @@ afterUpdate(() => {
 		</div>
 	</div>
 
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div
 		style={$app.css?.['app']?.['grid']?.style}
-		class={twMerge('px-4 pt-4 pb-2  overflow-visible', $app.css?.['app']?.['grid']?.class ?? '')}
+		class={twMerge('px-4 pt-4 pb-2 overflow-visible', $app.css?.['app']?.['grid']?.class ?? '')}
 		on:pointerdown={onpointerdown}
 		on:pointerleave={onpointerup}
 		on:pointerup={onpointerup}
@@ -119,59 +123,69 @@ afterUpdate(() => {
 			$selectedComponent = undefined
 			$focusedGrid = undefined
 		}}
+		bind:clientWidth={$parentWidth}
 	>
-		<Grid
-			onTopId={$selectedComponent}
-			fillSpace={false}
-			bind:items={$app.grid}
-			let:dataItem
-			rowHeight={36}
-			cols={columnConfiguration}
-			fastStart={true}
-			gap={[4, 2]}
-		>
-			{#each $lazyGrid as gridComponent (gridComponent.id)}
-				{#if gridComponent.data.id === dataItem.data.id}
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					{#if $connectingInput.opened}
+		<div class={!$focusedGrid && $mode !== 'preview' ? 'border-gray-400 border border-dashed' : ''}>
+			<Grid
+				onTopId={$selectedComponent}
+				fillSpace={false}
+				bind:items={$app.grid}
+				let:dataItem
+				rowHeight={36}
+				cols={columnConfiguration}
+				fastStart={true}
+				gap={[4, 2]}
+			>
+				{#each $app.grid as gridComponent (gridComponent.id)}
+					{#if gridComponent?.data?.id && gridComponent?.data?.id === dataItem?.data?.id}
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						{#if $connectingInput.opened}
+							<div
+								on:pointerenter={() => ($connectingInput.hoveredComponent = gridComponent.data.id)}
+								on:pointerleave={() => ($connectingInput.hoveredComponent = undefined)}
+								class="absolute w-full h-full bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
+							/>
+							<div
+								style="transform: translate(-50%, -50%);"
+								class="absolute w-fit justify-center bg-indigo-500/90 left-[50%] top-[50%] z-50 px-6 rounded border text-white py-2 text-5xl center-center"
+							>
+								{dataItem.data.id}
+							</div>
+						{/if}
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
 						<div
-							on:pointerenter={() => ($connectingInput.hoveredComponent = gridComponent.data.id)}
-							on:pointerleave={() => ($connectingInput.hoveredComponent = undefined)}
-							class="absolute  w-full h-full bg-black border-2 bg-opacity-25 z-20 flex justify-center items-center"
-						/>
-						<div
-							style="transform: translate(-50%, -50%);"
-							class="absolute w-fit justify-center bg-indigo-500/90 left-[50%] top-[50%] z-50 px-6 rounded border text-white py-2 text-5xl center-center"
-							>{dataItem.data.id}</div
+							on:click|stopPropagation
+							on:pointerdown={() => selectComponent(dataItem.data.id)}
+							class={classNames(
+								'h-full w-full center-center',
+								$selectedComponent === dataItem.data.id ? 'active-grid-item' : '',
+								gridComponent.data.card ? 'border border-gray-100' : ''
+							)}
 						>
+							<Component
+								render={true}
+								{pointerdown}
+								component={gridComponent.data}
+								selected={$selectedComponent === dataItem.data.id}
+								locked={isFixed(gridComponent)}
+								on:delete={() => removeGridElement(gridComponent.data)}
+								on:lock={() => {
+									const gridItem = findGridItem($app, gridComponent.data.id)
+									if (gridItem) {
+										toggleFixed(gridItem)
+									}
+								}}
+								on:expand={() => {
+									push(history, $app)
+									expandGriditem($app.grid, gridComponent, $breakpoint)
+									$app = { ...$app }
+								}}
+							/>
+						</div>
 					{/if}
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<div
-						on:click|stopPropagation
-						on:pointerdown={() => selectComponent(dataItem.data.id)}
-						class={classNames(
-							'h-full w-full center-center',
-							$selectedComponent === dataItem.data.id ? 'active-grid-item' : '',
-							gridComponent.data.card ? 'border border-gray-100' : ''
-						)}
-					>
-						<Component
-							{pointerdown}
-							bind:pComponent={gridComponent.data}
-							selected={$selectedComponent === dataItem.data.id}
-							locked={isFixed(gridComponent)}
-							on:delete={() => removeGridElement(gridComponent.data)}
-							on:lock={() => {
-								let fComponent = $app.grid.find((c) => c.id === gridComponent.id)
-								if (fComponent) {
-									fComponent = toggleFixed(fComponent)
-								}
-							}}
-						/>
-					</div>
-				{/if}
-			{/each}
-		</Grid>
+				{/each}
+			</Grid>
+		</div>
 	</div>
 </div>
 
@@ -182,7 +196,7 @@ afterUpdate(() => {
 				id={`bg_${index}`}
 				inlineScript={script.inlineScript}
 				name={script.name}
-				bind:fields={script.fields}
+				fields={script.fields}
 				bind:staticOutputs={$staticOutputs[`bg_${index}`]}
 			/>
 		{/if}

package/components/apps/editor/GridPanel.svelte

@@ -0,0 +1,29 @@
+<script>import { getContext } from 'svelte';
+import ComponentPanel from './settingsPanel/ComponentPanel.svelte';
+const { selectedComponent } = getContext('AppViewerContext');
+export let gridItems;
+export let parent;
+</script>
+
+{#each gridItems as gridItem, i (gridItem?.data?.id ?? i)}
+	{#if gridItem?.data?.id === $selectedComponent}
+		<ComponentPanel {parent} bind:component={gridItem.data} />
+	{:else if gridItem?.data?.type === 'tablecomponent'}
+		{#each gridItem.data.actionButtons as actionButton (actionButton.id)}
+			{#if actionButton.id === $selectedComponent}
+				<ComponentPanel
+					parent={undefined}
+					noGrid
+					rowColumns
+					bind:component={actionButton}
+					duplicateMoveAllowed={false}
+					onDelete={() => {
+						gridItem.data.actionButtons = gridItem.data.actionButtons.filter(
+							(c) => c.id !== actionButton.id
+						)
+					}}
+				/>
+			{/if}
+		{/each}
+	{/if}
+{/each}

package/components/apps/editor/GridPanel.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { GridItem } from '../types';
+declare const __propDef: {
+    props: {
+        gridItems: GridItem[];
+        parent: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridPanelProps = typeof __propDef.props;
+export type GridPanelEvents = typeof __propDef.events;
+export type GridPanelSlots = typeof __propDef.slots;
+export default class GridPanel extends SvelteComponentTyped<GridPanelProps, GridPanelEvents, GridPanelSlots> {
+}
+export {};

package/components/apps/editor/RecomputeAllComponents.svelte

@@ -2,7 +2,7 @@
 import { ChevronDown, RefreshCw } from 'lucide-svelte';
 import { getContext, onMount } from 'svelte';
 import Button from '../../common/button/Button.svelte';
-const { runnableComponents } = getContext('AppEditorContext');
+const { runnableComponents } = getContext('AppViewerContext');
 let loading = false;
 let timeout = undefined;
 let interval = undefined;
@@ -58,17 +58,19 @@ onMount(() => {
 <div class="flex items-center">
 	<Button
 		on:click={() => onClick()}
-		color="{timeout ? 'blue' : 'light'}"
-		variant="{timeout ? 'contained' : 'border'}"
+		color={timeout ? 'blue' : 'light'}
+		variant={timeout ? 'contained' : 'border'}
 		size="xs"
 		btnClasses="!rounded-r-none {timeout ? '!border !border-blue-500' : ''}"
-		title="Refresh {componentNumber} component{componentNumber > 1 ? 's' : ''} {interval ? `every ${interval / 1000} seconds` : 'once'}"
+		title="Refresh {componentNumber} component{componentNumber > 1 ? 's' : ''} {interval
+			? `every ${interval / 1000} seconds`
+			: 'once'}"
 	>
 		<RefreshCw class={loading ? 'animate-spin' : ''} size={16} />
 	</Button>
 	<Dropdown
 		btnClasses="!rounded-l-none !border-l-0 min-w-[4rem] !px-2"
-		color="{timeout ? 'blue' : 'light'}"
+		color={timeout ? 'blue' : 'light'}
 		variant="border"
 		dropdownItems={[
 			{
@@ -78,7 +80,7 @@ onMount(() => {
 			...[1, 2, 3, 4, 5, 6].map((i) => ({
 				displayName: `Every ${i * 5} seconds`,
 				action: () => setInter(i * 5000)
-			})),
+			}))
 		]}
 	>
 		<span class="grow text center">{interval ? `${interval / 1000}s` : 'once'}</span>