windmill-components 1.623.2 → 1.655.0

package/package/components/apps/components/layout/AppSplitpanes.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { stopPropagation } from 'svelte/legacy';
-import { getContext } from 'svelte';
+import { getContext, untrack } from 'svelte';
 import SubGridEditor from '../../editor/SubGridEditor.svelte';
 import { initCss } from '../../utils';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
@@ -11,10 +11,10 @@ import ResolveStyle from '../helpers/ResolveStyle.svelte';
 let { id, componentContainerHeight, customCss = undefined, horizontal = false, panes, render } = $props();
 const { app, focusedGrid, selectedComponent, componentControl, worldStore, connectingInput } = getContext('AppViewerContext');
 //used so that we can count number of outputs setup for first refresh
-initOutput($worldStore, id, {
+initOutput($worldStore, untrack(() => id), {
     selectedPaneIndex: 0
 });
-let everRender = $state(render);
+let everRender = $state(untrack(() => render));
 $effect.pre(() => {
     render && !everRender && (everRender = true);
 });
@@ -24,8 +24,8 @@ function onFocus() {
         subGridIndex: 0
     };
 }
-let css = $state(initCss($app.css?.containercomponent, customCss));
-$componentControl[id] = {
+let css = $state(initCss($app.css?.containercomponent, untrack(() => customCss)));
+$componentControl[untrack(() => id)] = {
     left: () => {
         if ($focusedGrid?.subGridIndex) {
             const index = $focusedGrid?.subGridIndex ?? 0;
@@ -48,7 +48,7 @@ $componentControl[id] = {
         return false;
     }
 };
-let sumedup = $state(panes.map((x) => (x / panes.reduce((a, b) => a + b, 0)) * 100));
+let sumedup = $state(untrack(() => panes).map((x) => (x / panes.reduce((a, b) => a + b, 0)) * 100));
 $effect.pre(() => {
     let ns = panes.map((x) => (x / panes.reduce((a, b) => a + b, 0)) * 100);
     if (!deepEqual(ns, sumedup)) {
@@ -72,11 +72,13 @@ $effect.pre(() => {
 <InitializeComponent {id} />
 
 {#if everRender}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class="h-full w-full border" onpointerdown={onFocus}>
 		{#key sumedup}
 			<Splitpanes {horizontal}>
 				{#each sumedup as paneSize, index (index)}
 					<Pane size={paneSize} minSize={20}>
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div
 							class="w-full h-full"
 							onpointerdown={stopPropagation(() => {

package/package/components/apps/components/layout/AppStepper.svelte

@@ -12,19 +12,19 @@ import RunnableComponent from '../helpers/RunnableComponent.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 let { id, componentContainerHeight, tabs, customCss = undefined, render, recomputeIds = undefined, extraQueryParams = {}, componentInput, onNext = undefined, onPrevious = undefined } = $props();
 const { app, worldStore, focusedGrid, selectedComponent, componentControl, connectingInput, mode, runnableComponents } = getContext('AppViewerContext');
-let everRender = $state(render);
+let everRender = $state(untrack(() => render));
 $effect.pre(() => {
     render && !everRender && (everRender = true);
 });
-let selected = $state(tabs[0]);
+let selected = $state(untrack(() => tabs)[0]);
 let tabHeight = $state(0);
 let footerHeight = $state(0);
 let runnableComponent = $state();
-let selectedIndex = $state(tabs?.indexOf(untrack(() => selected)) ?? -1);
+let selectedIndex = $state(untrack(() => tabs)?.indexOf(untrack(() => selected)) ?? -1);
 let maxReachedIndex = $state(-1);
 let statusByStep = $state([]);
 let debugMode = false;
-let outputs = initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, untrack(() => id), {
     currentStepIndex: 0,
     result: undefined,
     loading: false,
@@ -62,7 +62,7 @@ async function runStep(targetIndex) {
     }
     directionClicked = undefined;
 }
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     left: () => {
         const index = tabs.indexOf(selected);
         if (index > 0) {
@@ -99,7 +99,7 @@ $componentControl[id] = {
 $effect.pre(() => {
     selected != undefined && untrack(() => handleTabSelection());
 });
-let css = $state(initCss($app.css?.steppercomponent, customCss));
+let css = $state(initCss($app.css?.steppercomponent, untrack(() => customCss)));
 let lastStep = $derived(selectedIndex === tabs.length - 1);
 let directionClicked = $state(undefined);
 </script>

package/package/components/apps/components/layout/AppTabs.svelte

@@ -12,17 +12,17 @@ import { twMerge } from 'tailwind-merge';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
 import { deepEqual } from 'fast-equals';
 let { id, configuration, componentContainerHeight, tabs, customCss = undefined, render, disabledTabs, hiddenTabs, onTabChange = undefined } = $props();
-let resolvedConfig = $state(initConfig(components['tabscomponent'].initialData.configuration, configuration));
-let everRender = $state(render);
+let resolvedConfig = $state(initConfig(components['tabscomponent'].initialData.configuration, untrack(() => configuration)));
+let everRender = $state(untrack(() => render));
 $effect.pre(() => {
     render && !everRender && (everRender = true);
 });
 const { app, worldStore, focusedGrid, selectedComponent, mode, componentControl, connectingInput, runnableComponents } = getContext('AppViewerContext');
-let selected = $state(tabs[0]);
-let selectedIndex = $state(tabs?.indexOf(untrack(() => selected)) ?? -1);
-let css = $state(initCss($app.css?.tabscomponent, customCss));
+let selected = $state(untrack(() => tabs)[0]);
+let selectedIndex = $state(untrack(() => tabs)?.indexOf(untrack(() => selected)) ?? -1);
+let css = $state(initCss($app.css?.tabscomponent, untrack(() => customCss)));
 let tabHeight = $state(0);
-let outputs = initOutput($worldStore, id, {
+let outputs = initOutput($worldStore, untrack(() => id), {
     selectedTabIndex: 0
 });
 const titleBarHeight = 40; // Example height of a single accordion title bar in pixels
@@ -44,7 +44,7 @@ function handleTabSelection() {
         };
     }
 }
-$componentControl[id] = {
+$componentControl[untrack(() => id)] = {
     setSelectedIndex(index) {
         if (index >= 0 && index < tabs.length) {
             selected = tabs[index];
@@ -81,7 +81,7 @@ $componentControl[id] = {
         handleTabSelection();
     }
 };
-let lastTabs = tabs;
+let lastTabs = untrack(() => tabs);
 $effect.pre(() => {
     if (!untrack(() => selected)) {
         return;

package/package/components/apps/components/layout/ListWrapper.svelte

@@ -1,7 +1,11 @@
-<script lang="ts">import { setContext } from 'svelte';
+<script lang="ts">import { setContext, untrack } from 'svelte';
 import { writable } from 'svelte/store';
 let { index, value, disabled = false, onSet = undefined, onRemove = undefined, children } = $props();
-const ctx = writable({ index, value, disabled });
+const ctx = writable({
+    index: untrack(() => index),
+    value: untrack(() => value),
+    disabled: untrack(() => disabled)
+});
 $effect(() => {
     $ctx = { index, value, disabled };
 });

package/package/components/apps/components/layout/RowWrapper.svelte

@@ -1,7 +1,11 @@
-<script lang="ts">import { setContext } from 'svelte';
+<script lang="ts">import { setContext, untrack } from 'svelte';
 import { writable } from 'svelte/store';
 let { index, value, disabled = false, onSet, onRemove, children } = $props();
-const ctx = writable({ index, value, disabled });
+const ctx = writable({
+    index: untrack(() => index),
+    value: untrack(() => value),
+    disabled: untrack(() => disabled)
+});
 $effect(() => {
     $ctx = { index, value, disabled };
 });

package/package/components/apps/editor/AppEditor.svelte

@@ -36,8 +36,8 @@ import AppEditorBottomPanel from './AppEditorBottomPanel.svelte';
 import panzoom from 'panzoom';
 import { BG_PREFIX, findGridItem } from './appUtilsCore';
 let { app, path, policy, summary, fromHub = false, diffDrawer = undefined, savedApp = $bindable(undefined), version = undefined, newApp = false, newPath = undefined, replaceStateFn = (path) => window.history.replaceState(null, '', path), gotoFn = (path, opt) => window.history.pushState(null, '', path), unsavedConfirmationModal, onSavedNewAppPath } = $props();
-migrateApp(app);
-const stateApp = $state(app);
+migrateApp(untrack(() => app));
+const stateApp = $state(untrack(() => app));
 const appStore = writable(stateApp);
 const selectedComponent = writable(undefined);
 // $: selectedComponent.subscribe((s) => {
@@ -45,14 +45,14 @@ const selectedComponent = writable(undefined);
 // })
 const mode = writable('dnd');
 const breakpoint = writable('lg');
-const summaryStore = writable(summary);
+const summaryStore = writable(untrack(() => summary));
 const connectingInput = writable({
     opened: false,
     input: undefined,
     hoveredComponent: undefined
 });
 const cssEditorOpen = writable(false);
-const history = initHistory(app);
+const history = initHistory(untrack(() => app));
 const jobsById = writable({});
 const focusedGrid = writable(undefined);
 const pickVariableCallback = writable(undefined);
@@ -66,7 +66,7 @@ let context = $state({
     workspace: $workspaceStore,
     mode: 'editor',
     summary: $summaryStore,
-    author: policy.on_behalf_of_email
+    author: untrack(() => policy).on_behalf_of_email
 });
 const darkMode = writable(document.documentElement.classList.contains('dark'));
 const worldStore = buildWorld(untrack(() => context));
@@ -82,7 +82,7 @@ summaryStore.subscribe((s) => {
 });
 $secondaryMenuRightStore.isOpen = false;
 $secondaryMenuLeftStore.isOpen = false;
-let writablePath = writable(path);
+let writablePath = writable(untrack(() => path));
 function onPathChange() {
     writablePath.set(path);
 }
@@ -118,8 +118,8 @@ setContext('AppViewerContext', {
     cssEditorOpen,
     previewTheme,
     debuggingComponents: writable({}),
-    replaceStateFn: replaceStateFn,
-    policy: policy,
+    replaceStateFn: untrack(() => replaceStateFn),
+    policy: untrack(() => policy),
     recomputeAllContext: writable({
         loading: false,
         componentNumber: 0,
@@ -203,9 +203,7 @@ function onSelectedComponentChange() {
                     catch { }
                 }
                 else {
-                    const drawerAlreadyHandledFocusedGrid = item?.data.type === 'drawercomponent' &&
-                        $focusedGrid?.parentComponentId === befSelected;
-                    if (!drawerAlreadyHandledFocusedGrid) {
+                    if ($focusedGrid?.parentComponentId !== befSelected) {
                         $focusedGrid = undefined;
                     }
                 }
@@ -784,6 +782,7 @@ const unsavedConfirmationModal_render = $derived(unsavedConfirmationModal);
 					<Pane bind:size={centerPanelSize}>
 						<Splitpanes id="o2" horizontal class="!overflow-visible">
 							<Pane bind:size={gridPanelSize} class="ovisible">
+								<!-- svelte-ignore a11y_no_static_element_interactions -->
 								<div
 									onpointerdown={(e) => {
 										$selectedComponent = undefined
@@ -829,6 +828,7 @@ const unsavedConfirmationModal_render = $derived(unsavedConfirmationModal);
 										</div>
 									{/if}
 
+									<!-- svelte-ignore a11y_no_static_element_interactions -->
 									<div
 										class="absolute bottom-2 left-2 z-50 border bg-surface"
 										data-connection-button

package/package/components/apps/editor/AppEditorHeader.svelte

@@ -30,6 +30,9 @@ import AppEditorHeaderDeploy from './AppEditorHeaderDeploy.svelte';
 import AppEditorHeaderDeployInitialDraft from './AppEditorHeaderDeployInitialDraft.svelte';
 import { computeSecretUrl } from './appDeploy.svelte';
 import { updatePolicy } from './appPolicy';
+import { isRuleActive } from '../../../workspaceProtectionRules.svelte';
+import { buildForkEditUrl } from '../../../utils/editInFork';
+import { isCloudHosted } from '../../../cloud';
 let { policy = $bindable(), fromHub = false, diffDrawer = undefined, savedApp = $bindable(undefined), version = $bindable(undefined), leftPanelHidden = false, rightPanelHidden = false, bottomPanelHidden = false, newApp, newPath = '', unsavedConfirmationModal, onSavedNewAppPath, onShowLeftPanel, onShowRightPanel, onShowBottomPanel, onHideLeftPanel, onHideRightPanel, onHideBottomPanel } = $props();
 let newEditedPath = $state('');
 let deployedValue = $state(undefined); // Value to diff against
@@ -49,11 +52,12 @@ let pathError = $state('');
 let appExport = $state();
 let draftDrawerOpen = $state(false);
 let saveDrawerOpen = $state(false);
-let inputsDrawerOpen = $state(fromHub);
+let inputsDrawerOpen = $state(untrack(() => fromHub));
 let historyBrowserDrawerOpen = $state(false);
 let debugAppDrawerOpen = $state(false);
 let lazyDrawerOpen = $state(false);
 let deploymentMsg = $state('');
+let preserveOnBehalfOf = $state(false);
 function closeSaveDrawer() {
     saveDrawerOpen = false;
 }
@@ -71,7 +75,8 @@ async function createApp(path) {
                 summary: $summary,
                 policy,
                 deployment_message: deploymentMsg,
-                custom_path: customPath
+                custom_path: customPath,
+                preserve_on_behalf_of: preserveOnBehalfOf || undefined
             }
         });
         savedApp = {
@@ -160,7 +165,8 @@ async function updateApp(npath) {
             deployment_message: deploymentMsg,
             // custom_path requires admin so to accept update without it, we need to send as undefined when non-admin (when undefined, it will be ignored)
             // it also means that customPath needs to be set to '' instead of undefined to unset it (when admin)
-            custom_path: $userStore?.is_admin || $userStore?.is_super_admin ? (customPath ?? '') : undefined
+            custom_path: $userStore?.is_admin || $userStore?.is_super_admin ? (customPath ?? '') : undefined,
+            preserve_on_behalf_of: preserveOnBehalfOf || undefined
         }
     });
     savedApp = {
@@ -716,6 +722,7 @@ let hasErrors = $derived(Object.keys($errorByComponent).length > 0);
 			bind:customPathError
 			bind:pathError
 			bind:newEditedPath
+			bind:preserveOnBehalfOf
 			hideSecretUrl={false}
 		/>
 	</DrawerContent>
@@ -979,7 +986,17 @@ let hasErrors = $derived(Object.keys($errorByComponent).length > 0);
 							onClick: () => {
 								window.open(`/apps/add?template=${appPath}`)
 							}
-						}
+						},
+						...(!isCloudHosted() && !isRuleActive('DisableWorkspaceForking')
+							? [
+									{
+										label: 'Edit in workspace fork',
+										onClick: () => {
+											window.open(buildForkEditUrl('app', $appPath))
+										}
+									}
+								]
+							: [])
 					]
 				: undefined}
 		>

package/package/components/apps/editor/AppEditorHeaderDeploy.svelte

@@ -12,7 +12,14 @@ import { base } from '../../../base';
 import { isCloudHosted } from '../../../cloud';
 import EEOnly from '../../EEOnly.svelte';
 import TextInput from '../../text_input/TextInput.svelte';
-let { policy, setPublishState, appPath, customPath = $bindable(), onLatest, savedApp, summary = $bindable(), deploymentMsg = $bindable(), customPathError = $bindable(), pathError = $bindable(), newEditedPath = $bindable(), newPath, hideSecretUrl = false } = $props();
+import OnBehalfOfSelector, {} from '../../OnBehalfOfSelector.svelte';
+const WM_DEPLOYERS_GROUP = 'wm_deployers';
+let { policy, setPublishState, appPath, customPath = $bindable(), onLatest, savedApp, summary = $bindable(), deploymentMsg = $bindable(), customPathError = $bindable(), pathError = $bindable(), newEditedPath = $bindable(), newPath, hideSecretUrl = false, preserveOnBehalfOf = $bindable(false) } = $props();
+let isDeployer = $derived($userStore?.groups?.includes(WM_DEPLOYERS_GROUP) ?? false);
+let canPreserve = $derived(!!$userStore?.is_admin || !!$userStore?.is_super_admin || isDeployer);
+let savedOnBehalfOfEmail = $derived(savedApp?.policy?.on_behalf_of_email);
+let onBehalfOfChoice = $state(undefined);
+let customOnBehalfOfEmail = $state('');
 let dirtyCustomPath = $state(false);
 let path = $state(undefined);
 let dirtyPath = $state(false);
@@ -139,8 +146,41 @@ $effect(() => {
 		Hence, users will only be able to use the app as intended by the publisher without risk for
 		leaking resources not used in the app.
 	</Tooltip>
+	{#if canPreserve}
+		<div class="mt-4">
+			Because you are either an admin or part of the {WM_DEPLOYERS_GROUP} group, you can select another user to run this app on behalf of. Once deployed the app will be run on behalf of
+			<OnBehalfOfSelector
+				targetWorkspace={$workspaceStore ?? ''}
+				targetEmail={savedOnBehalfOfEmail}
+				selected={onBehalfOfChoice}
+				onSelect={(choice, email, username) => {
+					onBehalfOfChoice = choice
+					if (choice === 'me') {
+						policy.on_behalf_of_email = $userStore?.email
+						policy.on_behalf_of = `u/${$userStore?.username}`
+						customOnBehalfOfEmail = ''
+						preserveOnBehalfOf = false
+					} else if (choice === 'target') {
+						policy.on_behalf_of_email = savedOnBehalfOfEmail
+						customOnBehalfOfEmail = ''
+						preserveOnBehalfOf = true
+					} else if (choice === 'custom' && email) {
+						policy.on_behalf_of_email = email
+						policy.on_behalf_of = username ? `u/${username}` : undefined
+						customOnBehalfOfEmail = email
+						preserveOnBehalfOf = true
+					}
+				}}
+				kind="app"
+				{canPreserve}
+				customEmail={customOnBehalfOfEmail}
+				isDeployment={false}
+			/>
+		</div>
+	{/if}
 </Alert>
 
+
 <div class="mt-10"></div>
 
 {#if !hideSecretUrl}

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

@@ -12,7 +12,8 @@ type $$ComponentProps = {
     newEditedPath: string;
     newPath: string;
     hideSecretUrl?: boolean;
+    preserveOnBehalfOf?: boolean;
 };
-declare const AppEditorHeaderDeploy: import("svelte").Component<$$ComponentProps, {}, "summary" | "pathError" | "customPath" | "deploymentMsg" | "customPathError" | "newEditedPath">;
+declare const AppEditorHeaderDeploy: import("svelte").Component<$$ComponentProps, {}, "summary" | "preserveOnBehalfOf" | "pathError" | "customPath" | "deploymentMsg" | "customPathError" | "newEditedPath">;
 type AppEditorHeaderDeploy = ReturnType<typeof AppEditorHeaderDeploy>;
 export default AppEditorHeaderDeploy;

package/package/components/apps/editor/AppExportButton.svelte

@@ -10,9 +10,9 @@ import YAML from 'yaml';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import Tab from '../../common/tabs/Tab.svelte';
 import HighlightTheme from '../../HighlightTheme.svelte';
-let jsonViewerDrawer;
-let app = undefined;
-let rawType = 'yaml';
+let jsonViewerDrawer = $state();
+let app = $state(undefined);
+let rawType = $state('yaml');
 export function open(app_l) {
     app = app_l;
     jsonViewerDrawer?.toggleDrawer();
@@ -22,7 +22,7 @@ export function open(app_l) {
 <HighlightTheme />
 
 <Drawer bind:this={jsonViewerDrawer} size="800px">
-	<DrawerContent title="App Export" on:close={() => jsonViewerDrawer.toggleDrawer()}>
+	<DrawerContent title="App Export" on:close={() => jsonViewerDrawer?.toggleDrawer()}>
 		<div>
 			<Tabs bind:selected={rawType}>
 				<Tab value="yaml" label="YAML" />

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

@@ -1,22 +1,5 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AppExportButton: $$__sveltets_2_IsomorphicComponent<{
-    open?: (app_l: any) => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+declare const AppExportButton: import("svelte").Component<Record<string, never>, {
     open: (app_l: any) => void;
-}, string>;
-type AppExportButton = InstanceType<typeof AppExportButton>;
+}, "">;
+type AppExportButton = ReturnType<typeof AppExportButton>;
 export default AppExportButton;

package/package/components/apps/editor/AppInputs.svelte

@@ -5,7 +5,7 @@ import AppComponentInput from './AppComponentInput.svelte';
 import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
 import { allItems, BG_PREFIX } from './appUtilsCore';
 const { app } = getContext('AppViewerContext');
-let resourceOnly = true;
+let resourceOnly = $state(true);
 </script>
 
 <Alert type="info" title="Configurations">

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

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AppInputs: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AppInputs = InstanceType<typeof AppInputs>;
+declare const AppInputs: import("svelte").Component<Record<string, never>, {}, "">;
+type AppInputs = ReturnType<typeof AppInputs>;
 export default AppInputs;

package/package/components/apps/editor/AppJsonEditor.svelte

@@ -7,11 +7,11 @@ import { sendUserToast } from '../../../toast';
 import { userStore, workspaceStore } from '../../../stores';
 import { createEventDispatcher } from 'svelte';
 import { Globe, Loader2, Save } from 'lucide-svelte';
-let jsonViewerDrawer;
-let code = '';
+let jsonViewerDrawer = $state();
+let code = $state('');
 let path = '';
-let useDraft = false;
-let loading = true;
+let useDraft = $state(false);
+let loading = $state(true);
 const dispatch = createEventDispatcher();
 let app = undefined;
 export async function open(path_l) {
@@ -67,7 +67,7 @@ export async function saveDraft() {
 </script>
 
 <Drawer bind:this={jsonViewerDrawer} size="800px">
-	<DrawerContent title="App JSON" on:close={() => jsonViewerDrawer.toggleDrawer()}>
+	<DrawerContent title="App JSON" on:close={() => jsonViewerDrawer?.toggleDrawer()}>
 		{#if useDraft}
 			<div class="mb-1">
 				<Badge small color="indigo" baseClass="border border-indigo-200">+Draft</Badge>

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

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: Props & {
+    (internal: unknown, props: {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,11 +11,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const AppJsonEditor: $$__sveltets_2_IsomorphicComponent<{
-    open?: (path_l: string) => Promise<void>;
-    saveApp?: () => Promise<void>;
-    saveDraft?: () => Promise<void>;
-}, {
+declare const AppJsonEditor: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
@@ -23,6 +19,6 @@ declare const AppJsonEditor: $$__sveltets_2_IsomorphicComponent<{
     open: (path_l: string) => Promise<void>;
     saveApp: () => Promise<void>;
     saveDraft: () => Promise<void>;
-}, string>;
+}, "">;
 type AppJsonEditor = InstanceType<typeof AppJsonEditor>;
 export default AppJsonEditor;

package/package/components/apps/editor/AppPreview.svelte

@@ -16,8 +16,8 @@ import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
 import RecomputeAllComponents from './RecomputeAllComponents.svelte';
 import { BG_PREFIX } from './appUtilsCore';
 let { app, appPath = '', breakpoint = writable('lg'), policy = {}, summary = '', workspace = $workspaceStore, isEditor = false, context, noBackend = false, isLocked = $bindable(false), hideRefreshBar = false, class: classNames = '', replaceStateFn = (path) => window.history.replaceState(null, '', path), gotoFn = (path, opt) => window.history.pushState(null, '', path) } = $props();
-migrateApp(app);
-const appStore = writable(app);
+migrateApp(untrack(() => app));
+const appStore = writable(untrack(() => app));
 const selectedComponent = writable(undefined);
 const mode = writable('preview');
 const connectingInput = writable({
@@ -27,11 +27,11 @@ const connectingInput = writable({
 });
 const allIdsInPath = writable([]);
 let ncontext = {
-    ...context,
-    workspace,
+    ...untrack(() => context),
+    workspace: untrack(() => workspace),
     mode: 'viewer',
-    summary: summary,
-    author: policy.on_behalf_of_email
+    summary: untrack(() => summary),
+    author: untrack(() => policy).on_behalf_of_email
 };
 function resizeWindow() {
     !isEditor && ($breakpoint = window.innerWidth < 769 ? 'sm' : 'lg');
@@ -39,7 +39,7 @@ function resizeWindow() {
 resizeWindow();
 const parentWidth = writable(0);
 let previousDarkMode = document.documentElement.classList.contains('dark');
-const darkMode = writable(app?.darkMode ?? previousDarkMode);
+const darkMode = writable(untrack(() => app)?.darkMode ?? previousDarkMode);
 onDestroy(() => {
     setTheme(previousDarkMode);
 });
@@ -73,7 +73,7 @@ function hashchange(e) {
         return x;
     });
 }
-let writablePath = writable(appPath);
+let writablePath = writable(untrack(() => appPath));
 function onPathChange() {
     writablePath.set(appPath);
 }
@@ -85,21 +85,21 @@ setContext('AppViewerContext', {
         runnableInitialized: {}
     }),
     app: appStore,
-    summary: writable(summary),
+    summary: writable(untrack(() => summary)),
     selectedComponent,
     bgRuns: writable([]),
     mode,
     connectingInput,
-    breakpoint,
+    breakpoint: untrack(() => breakpoint),
     runnableComponents: writable({}),
     appPath: writablePath,
-    workspace,
+    workspace: untrack(() => workspace),
     onchange: undefined,
-    isEditor,
+    isEditor: untrack(() => isEditor),
     jobs: parentContext?.jobs ?? writable([]),
     jobsById: parentContext?.jobsById ?? writable({}),
     staticExporter: writable({}),
-    noBackend,
+    noBackend: untrack(() => noBackend),
     errorByComponent: writable({}),
     openDebugRun: writable(undefined),
     focusedGrid: writable(undefined),
@@ -113,9 +113,9 @@ setContext('AppViewerContext', {
     cssEditorOpen: writable(false),
     previewTheme: writable(undefined),
     debuggingComponents: writable({}),
-    replaceStateFn,
-    gotoFn,
-    policy,
+    replaceStateFn: untrack(() => replaceStateFn),
+    gotoFn: untrack(() => gotoFn),
+    policy: untrack(() => policy),
     recomputeAllContext: writable({
         loading: false,
         componentNumber: 0,
@@ -251,6 +251,7 @@ let maxRow = $derived(maxHeight($appStore.grid, appHeight, $breakpoint));
 				<GridViewer allIdsInPath={$allIdsInPath} items={app.grid} {maxRow} breakpoint={$breakpoint}>
 					{#snippet children({ dataItem })}
 						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div
 							class={'h-full w-full center-center'}
 							onpointerdown={() => ($selectedComponent = [dataItem.id])}

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

@@ -257,7 +257,7 @@ let hoverHeader = $state(false);
 			'text-red-500 px-1 text-2xs py-0.5 font-bold w-fit absolute border border-red-500 -bottom-1  shadow left-1/2 transform -translate-x-1/2 z-50 cursor-pointer'
 		)}
 	>
-		<Popover notClickable placement="bottom" contentClasses="!bg-surface border w-96 p-4">
+		<Popover placement="bottom" contentClasses="!bg-surface border w-96 p-4">
 			{#snippet trigger()}
 				<Bug size={14} />
 			{/snippet}