windmill-components 1.448.1 → 1.472.1

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

@@ -1,1082 +0,0 @@
-<script>import SplitPanesWrapper from '../../splitPanes/SplitPanesWrapper.svelte';
-import { afterUpdate, onMount, setContext } from 'svelte';
-import { twMerge } from 'tailwind-merge';
-import { Pane, Splitpanes } from 'svelte-splitpanes';
-import { writable } from 'svelte/store';
-import { buildWorld } from '../rx';
-import AppEditorHeader from './AppEditorHeader.svelte';
-import GridEditor from './GridEditor.svelte';
-import { Alert, Button, Tab } from '../../common';
-import TabContent from '../../common/tabs/TabContent.svelte';
-import Tabs from '../../common/tabs/Tabs.svelte';
-import { userStore, workspaceStore } from '../../../stores';
-import { classNames, encodeState, getModifierKey, sendUserToast } from '../../../utils';
-import AppPreview from './AppPreview.svelte';
-import ComponentList from './componentsPanel/ComponentList.svelte';
-import ContextPanel from './contextPanel/ContextPanel.svelte';
-import ItemPicker from '../../ItemPicker.svelte';
-import VariableEditor from '../../VariableEditor.svelte';
-import { VariableService } from '../../../gen';
-import { initHistory } from '../../../history';
-import { Component, Minus, Paintbrush, Plus, Smartphone, Scan, Hand, Grab } from 'lucide-svelte';
-import { animateTo, findGridItem, findGridItemParentGrid } from './appUtils';
-import ComponentNavigation from './component/ComponentNavigation.svelte';
-import CssSettings from './componentsPanel/CssSettings.svelte';
-import SettingsPanel from './SettingsPanel.svelte';
-import { SecondaryMenu, secondaryMenuLeft, secondaryMenuLeftStore, secondaryMenuRightStore } from './settingsPanel/secondaryMenu';
-import Popover from '../../Popover.svelte';
-import { BG_PREFIX, migrateApp } from '../utils';
-import DarkModeObserver from '../../DarkModeObserver.svelte';
-import { getTheme } from './componentsPanel/themeUtils';
-import StylePanel from './settingsPanel/StylePanel.svelte';
-import HideButton from './settingsPanel/HideButton.svelte';
-import AppEditorBottomPanel from './AppEditorBottomPanel.svelte';
-import panzoom from 'panzoom';
-export let app;
-export let path;
-export let policy;
-export let summary;
-export let fromHub = false;
-export let diffDrawer = undefined;
-export let savedApp = undefined;
-export let version = undefined;
-export let newApp = false;
-export let newPath = undefined;
-export let replaceStateFn = (path) => window.history.replaceState(null, '', path);
-export let gotoFn = (path, opt) => window.history.pushState(null, '', path);
-migrateApp(app);
-const appStore = writable(app);
-const selectedComponent = writable(undefined);
-// $: selectedComponent.subscribe((s) => {
-// 	console.log('selectedComponent', s)
-// })
-const mode = writable('dnd');
-const breakpoint = writable('lg');
-const summaryStore = writable(summary);
-const connectingInput = writable({
-    opened: false,
-    input: undefined,
-    hoveredComponent: undefined
-});
-summaryStore.subscribe((s) => {
-    $worldStore?.outputsById['ctx'].summary.set(s);
-});
-const cssEditorOpen = writable(false);
-const history = initHistory(app);
-const jobsById = writable({});
-const focusedGrid = writable(undefined);
-const pickVariableCallback = writable(undefined);
-let context = {
-    email: $userStore?.email,
-    groups: $userStore?.groups,
-    username: $userStore?.username,
-    name: $userStore?.name,
-    query: Object.fromEntries(new URL(window.location.href).searchParams.entries()),
-    hash: window.location.hash.substring(1),
-    workspace: $workspaceStore,
-    mode: 'editor',
-    summary: $summaryStore,
-    author: policy.on_behalf_of_email
-};
-const darkMode = writable(document.documentElement.classList.contains('dark'));
-const worldStore = buildWorld(context);
-const previewTheme = writable(undefined);
-const initialized = writable({ initialized: false, initializedComponents: [] });
-const panzoomActive = writable(false);
-$secondaryMenuRightStore.isOpen = false;
-$secondaryMenuLeftStore.isOpen = false;
-let writablePath = writable(path);
-$: path && onPathChange();
-function onPathChange() {
-    writablePath.set(path);
-}
-setContext('AppViewerContext', {
-    worldStore,
-    app: appStore,
-    summary: summaryStore,
-    initialized: initialized,
-    selectedComponent,
-    mode,
-    connectingInput,
-    bgRuns: writable([]),
-    breakpoint,
-    runnableComponents: writable({}),
-    appPath: writablePath,
-    workspace: $workspaceStore ?? '',
-    onchange: () => saveFrontendDraft(),
-    isEditor: true,
-    jobs: writable([]),
-    staticExporter: writable({}),
-    noBackend: false,
-    errorByComponent: writable({}),
-    jobsById,
-    openDebugRun: writable(undefined),
-    focusedGrid,
-    stateId: writable(0),
-    parentWidth: writable(0),
-    state: writable({}),
-    componentControl: writable({}),
-    hoverStore: writable(undefined),
-    allIdsInPath: writable([]),
-    darkMode,
-    cssEditorOpen,
-    previewTheme,
-    debuggingComponents: writable({}),
-    replaceStateFn: replaceStateFn,
-    policy: policy,
-    recomputeAllContext: writable({
-        loading: false,
-        componentNumber: 0,
-        refreshing: [],
-        progress: 100
-    }),
-    panzoomActive
-});
-let scale = writable(100);
-const componentActive = writable(false);
-let yTop = writable(0);
-let runnableJob = writable({ focused: false, jobs: {}, frontendJobs: {}, width: 100 });
-setContext('AppEditorContext', {
-    yTop,
-    runnableJobEditorPanel: runnableJob,
-    evalPreview: writable({}),
-    componentActive,
-    dndItem: writable({}),
-    refreshComponents: writable(undefined),
-    history,
-    pickVariableCallback,
-    movingcomponents: writable(undefined),
-    selectedComponentInEditor: writable(undefined),
-    jobsDrawerOpen: writable(false),
-    scale,
-    stylePanel: () => StylePanel
-});
-let timeout = undefined;
-$: $appStore && saveFrontendDraft();
-function saveFrontendDraft() {
-    timeout && clearTimeout(timeout);
-    timeout = setTimeout(() => {
-        try {
-            localStorage.setItem(path != '' ? `app-${path}` : 'app', encodeState($appStore));
-        }
-        catch (err) {
-            console.error(err);
-        }
-    }, 500);
-}
-function hashchange(e) {
-    context.hash = e.newURL.split('#')[1];
-    context = context;
-}
-$: context.mode = $mode == 'dnd' ? 'editor' : 'viewer';
-$: width =
-    $breakpoint === 'sm' && $appStore?.mobileViewOnSmallerScreens !== false
-        ? 'min-w-[400px] max-w-[656px]'
-        : `min-w-[710px] ${$appStore.fullscreen ? 'w-full' : 'max-w-7xl'}`;
-let selectedTab = 'insert';
-let befSelected = undefined;
-$: if ($selectedComponent?.[0] != befSelected) {
-    befSelected = $selectedComponent?.[0];
-    if ($selectedComponent?.[0] != undefined) {
-        onSelectedComponentChange();
-    }
-}
-function onSelectedComponentChange() {
-    selectedTab = 'settings';
-    if (befSelected) {
-        if (!['ctx', 'state'].includes(befSelected) && !befSelected?.startsWith(BG_PREFIX)) {
-            let item = findGridItem($appStore, befSelected);
-            if (item?.data.type === 'containercomponent' || item?.data.type === 'listcomponent') {
-                $focusedGrid = {
-                    parentComponentId: befSelected,
-                    subGridIndex: 0
-                };
-            }
-            else if (item?.data.type === 'steppercomponent') {
-                $focusedGrid = {
-                    parentComponentId: befSelected,
-                    subGridIndex: $worldStore.outputsById?.[befSelected]?.currentStepIndex?.peak() ?? 0
-                };
-            }
-            else if (item?.data.type === 'tabscomponent' ||
-                item?.data.type === 'conditionalwrapper') {
-                $focusedGrid = {
-                    parentComponentId: befSelected,
-                    subGridIndex: $worldStore.outputsById?.[befSelected]?.selectedTabIndex?.peak() ?? 0
-                };
-            }
-            else {
-                let subgrid = findGridItemParentGrid($appStore, befSelected);
-                if (subgrid) {
-                    try {
-                        $focusedGrid = {
-                            parentComponentId: subgrid.split('-')[0],
-                            subGridIndex: parseInt(subgrid.split('-')[1])
-                        };
-                    }
-                    catch { }
-                }
-                else {
-                    $focusedGrid = undefined;
-                }
-            }
-        }
-    }
-}
-let itemPicker = undefined;
-$: if ($pickVariableCallback) {
-    itemPicker?.openDrawer();
-}
-let variableEditor = undefined;
-setContext('ContextPanel', {
-    search: writable(''),
-    manuallyOpened: writable({}),
-    hasResult: writable({})
-});
-function onThemeChange() {
-    $darkMode = document.documentElement.classList.contains('dark');
-}
-let runnablePanelSize = 30;
-let gridPanelSize = 70;
-let leftPanelSize = 22;
-let centerPanelSize = 56;
-let rightPanelSize = 22;
-let tmpRunnablePanelSize = -1;
-let tmpGridPanelSize = -1;
-let tmpLeftPanelSize = -1;
-let tmpCenterPanelSize = -1;
-let tmpRightPanelSize = -1;
-let toggled = false;
-let cssToggled = false;
-// Animation logic for cssInput
-$: animateCssInput($cssEditorOpen);
-$: $cssEditorOpen &&
-    secondaryMenuLeft?.open(StylePanel, {
-        type: 'style'
-    });
-function animateCssInput(cssEditorOpen) {
-    if (cssEditorOpen && !cssToggled) {
-        cssToggled = true;
-        tmpLeftPanelSize = leftPanelSize;
-        tmpCenterPanelSize = centerPanelSize;
-        tmpRightPanelSize = rightPanelSize;
-        animateTo(leftPanelSize, 20, (newValue) => (leftPanelSize = newValue));
-        animateTo(centerPanelSize, 55, (newValue) => (centerPanelSize = newValue));
-        animateTo(rightPanelSize, 25, (newValue) => (rightPanelSize = newValue));
-        tmpRunnablePanelSize = runnablePanelSize;
-        tmpGridPanelSize = gridPanelSize;
-        animateTo(runnablePanelSize, 0, (newValue) => (runnablePanelSize = newValue));
-        animateTo(gridPanelSize, 100, (newValue) => (gridPanelSize = newValue));
-    }
-    else if (!cssEditorOpen && cssToggled) {
-        cssToggled = false;
-        animateTo(leftPanelSize, tmpLeftPanelSize, (newValue) => (leftPanelSize = newValue));
-        animateTo(centerPanelSize, tmpCenterPanelSize, (newValue) => (centerPanelSize = newValue));
-        animateTo(rightPanelSize, tmpRightPanelSize, (newValue) => (rightPanelSize = newValue));
-        tmpLeftPanelSize = -1;
-        tmpCenterPanelSize = -1;
-        tmpRightPanelSize = -1;
-        animateTo(runnablePanelSize, tmpRunnablePanelSize, (newValue) => (runnablePanelSize = newValue));
-        animateTo(gridPanelSize, tmpGridPanelSize, (newValue) => (gridPanelSize = newValue));
-        tmpRunnablePanelSize = -1;
-        tmpGridPanelSize = -1;
-    }
-}
-$: $cssEditorOpen && selectCss();
-function selectCss() {
-    selectedTab !== 'css' && (selectedTab = 'css');
-}
-const cssId = 'wm-global-style';
-$: addOrRemoveCss(true, $mode === 'preview');
-let css = undefined;
-let lastTheme = undefined;
-appStore.subscribe(async (currentAppStore) => {
-    if (!currentAppStore.theme) {
-        return;
-    }
-    if (JSON.stringify(currentAppStore.theme) != lastTheme) {
-        if (currentAppStore.theme.type === 'inlined') {
-            css = currentAppStore.theme.css;
-        }
-        else if (currentAppStore.theme.type === 'path' && currentAppStore.theme?.path) {
-            let loadedCss = await getTheme($workspaceStore, currentAppStore.theme.path);
-            if (loadedCss) {
-                css = loadedCss.value;
-            }
-        }
-        lastTheme = JSON.stringify(currentAppStore.theme);
-    }
-});
-$: updateCssContent(css, $previewTheme);
-function addOrRemoveCss(isPremium, isPreview = false) {
-    const existingElement = document.getElementById(cssId);
-    if (!isPremium && isPreview) {
-        if (existingElement) {
-            existingElement.remove();
-        }
-    }
-    else {
-        if (!existingElement) {
-            const head = document.head;
-            const link = document.createElement('style');
-            link.id = cssId;
-            link.innerHTML = css ?? '';
-            head.appendChild(link);
-        }
-    }
-}
-function updateCssContent(cssString, previewTheme) {
-    const theme = previewTheme ?? cssString ?? '';
-    const existingElement = document.getElementById(cssId);
-    if (existingElement && theme !== existingElement.innerHTML) {
-        existingElement.innerHTML = theme;
-    }
-}
-let appEditorHeader = undefined;
-export function triggerTutorial() {
-    appEditorHeader?.toggleTutorial();
-}
-let box;
-function parseScroll() {
-    $yTop = box?.scrollTop;
-}
-let mounted = false;
-onMount(() => {
-    mounted = true;
-    setTimeout(() => {
-        if ($initialized?.initialized === false) {
-            sendUserToast('App is not yet initialized, please check the Troubleshoot Panel for more information', true, [
-                {
-                    label: 'Open troubleshoot panel',
-                    callback: () => {
-                        appEditorHeader?.openTroubleshootPanel();
-                    }
-                }
-            ]);
-        }
-    }, 10000);
-    parseScroll();
-});
-$: setGridPanelSize($componentActive);
-let lastComponentActive = false;
-afterUpdate(() => {
-    if ($componentActive != lastComponentActive) {
-        box.scrollTop = $yTop;
-        lastComponentActive = $componentActive;
-    }
-});
-function setGridPanelSize(x) {
-    if (mounted) {
-        if (x) {
-            gridPanelSize = 100;
-        }
-        else {
-            gridPanelSize = 100 - runnablePanelSize;
-        }
-    }
-}
-let runnableJobEnterTimeout = undefined;
-let stillInJobEnter = false;
-let storedLeftPanelSize = 0;
-let storedRightPanelSize = 0;
-let storedBottomPanelSize = 0;
-let centerPanelWidth = 0;
-function hideLeftPanel(animate = false) {
-    storedLeftPanelSize = leftPanelSize;
-    if (animate) {
-        animateTo(leftPanelSize, 0, (newValue) => (leftPanelSize = newValue));
-    }
-    else {
-        leftPanelSize = 0;
-    }
-    centerPanelSize = centerPanelSize + storedLeftPanelSize;
-    if ($connectingInput.opened) {
-        $connectingInput.opened = false;
-    }
-}
-function hideRightPanel() {
-    storedRightPanelSize = rightPanelSize;
-    rightPanelSize = 0;
-    centerPanelSize = centerPanelSize + storedRightPanelSize;
-    if ($connectingInput.opened) {
-        $connectingInput.opened = false;
-    }
-}
-function hideBottomPanel(animate = false) {
-    if (runnablePanelSize === 0) {
-        return;
-    }
-    storedBottomPanelSize = runnablePanelSize;
-    if (animate) {
-        tmpRunnablePanelSize = runnablePanelSize;
-        tmpGridPanelSize = gridPanelSize;
-        animateTo(runnablePanelSize, 0, (newValue) => (runnablePanelSize = newValue));
-        animateTo(gridPanelSize, 100, (newValue) => (gridPanelSize = newValue));
-    }
-    else {
-        runnablePanelSize = 0;
-        gridPanelSize = 99;
-    }
-}
-function showLeftPanel(animate = false) {
-    if (leftPanelSize !== 0) {
-        return;
-    }
-    if (animate) {
-        animateTo(leftPanelSize, storedLeftPanelSize, (newValue) => (leftPanelSize = newValue));
-    }
-    else {
-        leftPanelSize = storedLeftPanelSize;
-    }
-}
-function showRightPanel() {
-    rightPanelSize = storedRightPanelSize;
-    centerPanelSize = centerPanelSize - storedRightPanelSize;
-}
-function showBottomPanel(animate = false) {
-    if (runnablePanelSize !== 0) {
-        return;
-    }
-    if (animate) {
-        animateTo(runnablePanelSize, storedBottomPanelSize, (newValue) => (runnablePanelSize = newValue));
-        animateTo(gridPanelSize, gridPanelSize - storedBottomPanelSize, (newValue) => (gridPanelSize = newValue));
-    }
-    else {
-        runnablePanelSize = storedBottomPanelSize;
-        gridPanelSize = gridPanelSize - storedBottomPanelSize;
-    }
-}
-function keydown(event) {
-    let classes = event.target?.['className'];
-    if ((typeof classes === 'string' && classes.includes('inputarea')) ||
-        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
-        return;
-    }
-    isModifierKeyPressed = event.ctrlKey || event.metaKey;
-    switch (event.key) {
-        case 'b': {
-            if (event.ctrlKey || event.metaKey) {
-                event.preventDefault();
-                if (leftPanelSize !== 0) {
-                    hideLeftPanel();
-                }
-                else {
-                    showLeftPanel();
-                }
-            }
-            break;
-        }
-        case 'u': {
-            if (event.ctrlKey || event.metaKey) {
-                event.preventDefault();
-                if (rightPanelSize !== 0) {
-                    hideRightPanel();
-                }
-                else {
-                    showRightPanel();
-                }
-            }
-            break;
-        }
-        case 'l': {
-            if (event.ctrlKey || event.metaKey) {
-                event.preventDefault();
-                if (runnablePanelSize !== 0) {
-                    hideBottomPanel();
-                }
-                else {
-                    showBottomPanel();
-                }
-            }
-            break;
-        }
-        case 'Escape': {
-            if ($connectingInput.opened) {
-                $connectingInput.opened = false;
-            }
-            if (handMode) {
-                handMode = false;
-            }
-            break;
-        }
-    }
-}
-let previousLeftPanelHidden = false;
-let previousBottomPanelHidden = false;
-async function updatePannelInConnecting() {
-    if ($connectingInput.opened && !toggled) {
-        previousLeftPanelHidden = leftPanelSize === 0;
-        previousBottomPanelHidden = runnablePanelSize === 0;
-        if (previousLeftPanelHidden) {
-            showLeftPanel(true);
-        }
-        if (!previousBottomPanelHidden) {
-            hideBottomPanel(true);
-        }
-        secondaryMenuLeft.close();
-        toggled = true;
-    }
-    else if (!$connectingInput.opened && toggled) {
-        if (previousLeftPanelHidden) {
-            hideLeftPanel(true);
-        }
-        if (!previousBottomPanelHidden) {
-            showBottomPanel(true);
-        }
-        toggled = false;
-    }
-}
-$: $connectingInput.opened, updatePannelInConnecting();
-$: updateCursorStyle(!!$connectingInput.opened && !$panzoomActive);
-function updateCursorStyle(disabled) {
-    if (disabled) {
-        // Select all elements that don't have data-connection-button and aren't children of elements with data-connection-button
-        const elements = document.querySelectorAll(':not([data-connection-button]):not([data-connection-button] *)');
-        elements.forEach((element) => {
-            ;
-            element.style.cursor = 'not-allowed';
-        });
-    }
-    else {
-        // Reset cursor style for all elements
-        const elements = document.querySelectorAll('*');
-        elements.forEach((element) => {
-            ;
-            element.style.removeProperty('cursor');
-        });
-    }
-}
-let instance;
-let isModifierKeyPressed = false;
-function resetView() {
-    if (instance && box) {
-        instance.moveTo(0.5, 0);
-        instance.zoomAbs(0.5, 0, 1);
-        box.scrollTop = 0;
-    }
-}
-function zoomTo(x, y, scale) {
-    if (instance) {
-        instance.zoomAbs(x, y, scale);
-    }
-}
-function initPanzoom(node) {
-    instance = panzoom(node, {
-        bounds: true,
-        boundsPadding: 0.1,
-        maxZoom: 1.5,
-        minZoom: 0.3,
-        zoomDoubleClickSpeed: 1,
-        smoothScroll: false,
-        initialZoom: $scale / 100.0,
-        beforeMouseDown: (e) => {
-            if (e.ctrlKey || e.metaKey || handMode) {
-                // Prevent event propagation to children when panning
-                e.stopPropagation();
-                return false;
-            }
-            return true;
-        },
-        beforeWheel: (e) => {
-            if (e.ctrlKey || e.metaKey || handMode) {
-                // Prevent event propagation to children when zooming
-                e.stopPropagation();
-                return false;
-            }
-            return true;
-        }
-    });
-    // Handle pointerdown when connecting
-    node.addEventListener('pointerdown_connecting', (e) => {
-        instance.handleDown(e);
-    });
-    // Update scale store when zoom changes
-    instance.on('zoom', (e) => {
-        const currentScale = e.getTransform().scale * 100;
-        if (currentScale !== $scale) {
-            $scale = currentScale;
-        }
-    });
-    return {
-        destroy() {
-            instance.dispose();
-            node.removeEventListener('pointerdown_connecting', instance.handleDown);
-        }
-    };
-}
-function handleKeyUp(e) {
-    isModifierKeyPressed = false;
-}
-let mouseOverGridView = false;
-let handMode = false;
-let forceDeactivatePanzoom = false;
-$: $panzoomActive =
-    (isModifierKeyPressed || handMode) &&
-        !forceDeactivatePanzoom &&
-        !$componentActive &&
-        mouseOverGridView;
-$: forceDeactivatePanzoom = isModifierKeyPressed && handMode;
-</script>
-
-<svelte:head>
-	<link rel="stylesheet" href="/tailwind_full.css" />
-</svelte:head>
-
-<DarkModeObserver on:change={onThemeChange} />
-
-<svelte:window
-	on:hashchange={hashchange}
-	on:keydown={keydown}
-	on:keyup={handleKeyUp}
-	on:focus={() => {
-		if (isModifierKeyPressed) {
-			isModifierKeyPressed = false
-		}
-	}}
-/>
-
-{#if !$userStore?.operator}
-	{#if $appStore}
-		<AppEditorHeader
-			{newPath}
-			{newApp}
-			on:restore
-			{policy}
-			{fromHub}
-			bind:this={appEditorHeader}
-			{diffDrawer}
-			bind:savedApp
-			{version}
-			leftPanelHidden={leftPanelSize === 0}
-			rightPanelHidden={rightPanelSize === 0}
-			bottomPanelHidden={runnablePanelSize === 0}
-			on:savedNewAppPath
-			on:showLeftPanel={() => showLeftPanel()}
-			on:showRightPanel={() => showRightPanel()}
-			on:hideLeftPanel={() => hideLeftPanel()}
-			on:hideRightPanel={() => hideRightPanel()}
-			on:hideBottomPanel={() => hideBottomPanel()}
-			on:showBottomPanel={() => showBottomPanel()}
-		/>
-		{#if $mode === 'preview'}
-			<SplitPanesWrapper>
-				<div
-					class={twMerge(
-						'h-full w-full relative',
-						$appStore.css?.['app']?.['viewer']?.class,
-						'wm-app-viewer'
-					)}
-					style={$appStore.css?.['app']?.['viewer']?.style}
-				>
-					<AppPreview
-						workspace={$workspaceStore ?? ''}
-						summary={$summaryStore}
-						app={$appStore}
-						appPath={path}
-						{breakpoint}
-						{policy}
-						isEditor
-						{context}
-						noBackend={false}
-						{replaceStateFn}
-						{gotoFn}
-					/>
-				</div>
-			</SplitPanesWrapper>
-		{:else}
-			{#if $componentActive}
-				<div
-					class="absolute z-50 inset-0 h-full w-full bg-surface-secondary [background-size:16px_16px]"
-				>
-					<div class="w-min whitespace-nowrap mx-auto pt-0.5 z-50">
-						<Alert
-							title={`Press ${getModifierKey()} to drop component inside a container.`}
-							size="xs"
-							class="h-10 py-1"
-						/>
-					</div>
-				</div>
-			{/if}
-
-			{#if $connectingInput.opened}
-				<div class="absolute z-50 inset-0 w-min h-min whitespace-nowrap mx-auto pt-0.5">
-					<Alert title="Press Esc to exit connection mode." size="xs" class="h-10 py-1" />
-				</div>
-			{/if}
-
-			<SplitPanesWrapper>
-				<Splitpanes id="o1" class="max-w-full overflow-hidden">
-					<Pane bind:size={leftPanelSize} minSize={5} maxSize={33}>
-						<div
-							class={twMerge(
-								'w-full h-full relative',
-								$secondaryMenuLeftStore.isOpen ? 'overflow-hidden' : ''
-							)}
-						>
-							<!-- {yTop} -->
-
-							<SecondaryMenu right={false} />
-							<ContextPanel on:hidePanel={() => hideLeftPanel()} />
-						</div>
-					</Pane>
-					<Pane bind:size={centerPanelSize}>
-						<Splitpanes id="o2" horizontal class="!overflow-visible">
-							<Pane bind:size={gridPanelSize} class="ovisible">
-								<div
-									on:pointerdown={(e) => {
-										$selectedComponent = undefined
-										$focusedGrid = undefined
-									}}
-									class={twMerge(
-										'bg-surface-secondary h-full w-full relative',
-										$appStore.css?.['app']?.['viewer']?.class,
-										'wm-app-viewer h-full overflow-visible',
-										$panzoomActive ? 'cursor-grab' : ''
-									)}
-									style={$appStore.css?.['app']?.['viewer']?.style}
-									bind:clientWidth={centerPanelWidth}
-								>
-									{#if leftPanelSize === 0}
-										<div class="absolute top-0.5 left-0.5 z-50">
-											<HideButton
-												on:click={() => showLeftPanel()}
-												direction="left"
-												hidden
-												btnClasses="border bg-surface"
-											/>
-										</div>
-									{/if}
-									{#if rightPanelSize === 0}
-										<div class="absolute top-0.5 right-0.5 z-50">
-											<HideButton
-												on:click={() => showRightPanel()}
-												direction="right"
-												hidden
-												btnClasses="border bg-surface"
-											/>
-										</div>
-									{/if}
-									{#if runnablePanelSize === 0}
-										<div class="absolute bottom-0.5 right-0.5 z-50">
-											<HideButton
-												on:click={() => showBottomPanel()}
-												direction="bottom"
-												hidden
-												btnClasses="border bg-surface"
-											/>
-										</div>
-									{/if}
-
-									<div
-										class="absolute bottom-2 left-2 z-50 border bg-surface"
-										data-connection-button
-										on:pointerdown|stopPropagation
-									>
-										<div class="flex flex-row gap-2 text-xs items-center h-8 px-1">
-											<Button
-												color="light"
-												size="xs2"
-												disabled={$scale <= 30}
-												on:click={() => {
-													zoomTo(0.5, 0, Math.round(($scale - 10) / 10) / 10)
-												}}
-											>
-												<Minus size={14} />
-											</Button>
-											<div class="w-8 flex justify-center text-2xs h-full items-center">
-												{Math.round($scale)}%
-											</div>
-											<Button
-												color="light"
-												size="xs2"
-												disabled={$scale >= 150}
-												on:click={() => {
-													zoomTo(0.5, 0, Math.round(($scale + 10) / 10) / 10)
-												}}
-											>
-												<Plus size={14} />
-											</Button>
-											<Button color="light" size="xs2" disabled={false} on:click={resetView}>
-												<Scan size={14} />
-											</Button>
-											<Popover disappearTimeout={0} notClickable placement="bottom">
-												<svelte:fragment slot="text">
-													<div class="flex flex-row gap-2">
-														<div class="flex-1">
-															Hand Mode
-															<br />
-															<span class="ml-2">Pan</span>
-															<br />
-															<span class="ml-2">Zoom</span>
-
-															<br />
-															<span class="ml-2">Exit</span>
-														</div>
-														<div>
-															<span class="float-left text-tertiary-inverse"
-																>hold {getModifierKey()}</span
-															>
-															<br />
-															<span class="float-left text-tertiary-inverse">click & drag</span>
-															<br />
-															<span class="float-left text-tertiary-inverse">scroll</span>
-															<br />
-															<span class="float-left text-tertiary-inverse">esc</span>
-														</div>
-													</div>
-												</svelte:fragment>
-												<Button
-													color="light"
-													size="xs2"
-													disabled={false}
-													on:click={() => (handMode = !handMode)}
-													btnClasses={handMode ? 'bg-surface-hover' : ''}
-												>
-													{#if $panzoomActive}
-														<Grab size={14} />
-													{:else}
-														<Hand size={14} />
-													{/if}
-												</Button>
-											</Popover>
-										</div>
-									</div>
-
-									<div id="app-editor-top-level-drawer" />
-									<div
-										class="absolute pointer-events-none inset-0 h-full w-full surface-secondary bg-[radial-gradient(#dbdbdb_1px,transparent_1px)] dark:bg-[radial-gradient(#666666_1px,transparent_1px)] [background-size:16px_16px]"
-									/>
-
-									<!-- svelte-ignore a11y-no-static-element-interactions -->
-									<div
-										bind:this={box}
-										on:scroll={parseScroll}
-										on:mouseenter={() => {
-											mouseOverGridView = true
-										}}
-										on:mouseleave={() => {
-											mouseOverGridView = false
-										}}
-										class={classNames(
-											'mx-auto w-full h-full z-50',
-											$componentActive ? 'absolute right-0 left-0' : 'overflow-auto'
-										)}
-										style={$componentActive ? `top: -${$yTop}px;` : ''}
-									>
-										{#if $appStore.grid}
-											{#if !$connectingInput?.opened}
-												<ComponentNavigation />
-											{/if}
-
-											<div
-												class={twMerge(
-													width,
-													'mx-auto',
-													'z-10000',
-													$panzoomActive ? 'pointer-events-none' : ''
-												)}
-												use:initPanzoom
-											>
-												<GridEditor {policy} />
-											</div>
-										{/if}
-										{#if !$appStore?.mobileViewOnSmallerScreens && $breakpoint === 'sm'}
-											<div
-												class="absolute inset-0 flex bg-surface center-center z-10000 bg-opacity-60"
-											>
-												<div
-													class="bg-surface shadow-md rounded-md p-4 max-w-sm flex flex-col gap-2"
-												>
-													<div class="text-sm font-semibold"> Mobile View </div>
-													<div class="text-xs">
-														Enabling mobile view allows you to adjust component placement for
-														smaller screens.
-													</div>
-													<Button
-														color="light"
-														variant="border"
-														size="xs"
-														on:click={() => {
-															$appStore.mobileViewOnSmallerScreens = true
-														}}
-														startIcon={{
-															icon: Smartphone
-														}}
-													>
-														Add mobile view on smaller screens
-													</Button>
-												</div>
-											</div>
-										{/if}
-									</div>
-								</div>
-							</Pane>
-							{#if $connectingInput?.opened == false && !$componentActive}
-								<Pane bind:size={runnablePanelSize}>
-									<AppEditorBottomPanel
-										on:mouseenter={() => {
-											runnableJobEnterTimeout && clearTimeout(runnableJobEnterTimeout)
-											stillInJobEnter = true
-											runnableJobEnterTimeout = setTimeout(() => {
-												if (stillInJobEnter) {
-													$runnableJob.focused = true
-												}
-											}, 200)
-										}}
-										on:hidePanel={() => hideBottomPanel()}
-										on:mouseleave={() => {
-											stillInJobEnter = false
-											runnableJobEnterTimeout = setTimeout(
-												() => ($runnableJob.focused = false),
-												200
-											)
-										}}
-										{rightPanelSize}
-										{centerPanelWidth}
-										{runnablePanelSize}
-									/>
-								</Pane>
-							{/if}
-						</Splitpanes>
-					</Pane>
-					{#if rightPanelSize === 0}
-						<div class="relative flex flex-col h-full" />
-					{:else}
-						<Pane bind:size={rightPanelSize} minSize={15} maxSize={33}>
-							<div bind:clientWidth={$runnableJob.width} class="relative flex flex-col h-full">
-								<Tabs bind:selected={selectedTab} wrapperClass="!min-h-[42px]" class="!h-full">
-									<Popover disappearTimeout={0} notClickable placement="bottom">
-										<svelte:fragment slot="text">Component library</svelte:fragment>
-										<Tab
-											value="insert"
-											size="xs"
-											class="h-full"
-											on:pointerdown={() => {
-												if ($cssEditorOpen) {
-													$cssEditorOpen = false
-													selectedTab = 'insert'
-												}
-											}}
-											id="app-editor-component-library-tab"
-										>
-											<div class="m-1 center-center">
-												<Plus size={18} />
-											</div>
-										</Tab>
-									</Popover>
-									<Popover disappearTimeout={0} notClickable placement="bottom">
-										<svelte:fragment slot="text">Component settings</svelte:fragment>
-										<Tab
-											value="settings"
-											size="xs"
-											class="h-full"
-											on:pointerdown={() => {
-												if ($cssEditorOpen) {
-													$cssEditorOpen = false
-													selectedTab = 'settings'
-												}
-											}}
-										>
-											<div class="m-1 center-center">
-												<Component size={18} />
-											</div>
-										</Tab>
-									</Popover>
-									<Popover disappearTimeout={0} notClickable placement="bottom">
-										<svelte:fragment slot="text">Global styling</svelte:fragment>
-										<Tab
-											value="css"
-											size="xs"
-											class="h-full"
-											on:pointerdown={() => {
-												if (!$cssEditorOpen) {
-													$cssEditorOpen = true
-													selectedTab = 'css'
-												}
-											}}
-										>
-											<div class="m-1 center-center">
-												<Paintbrush size={18} />
-											</div>
-										</Tab>
-									</Popover>
-									<div class="h-full w-full flex justify-end px-1">
-										<HideButton on:click={() => hideRightPanel()} direction="right" />
-									</div>
-									<div slot="content" class="h-full overflow-y-auto">
-										<TabContent class="overflow-auto h-full" value="settings">
-											{#if $selectedComponent !== undefined}
-												<SettingsPanel
-													on:delete={() => {
-														befSelected = undefined
-														selectedTab = 'insert'
-													}}
-												/>
-												<SecondaryMenu right />
-											{:else}
-												<div class="min-w-[150px] text-sm !text-secondary text-center py-8 px-2">
-													Select a component to see the settings&nbsp;for&nbsp;it
-												</div>
-											{/if}
-										</TabContent>
-										<TabContent value="insert">
-											<ComponentList />
-										</TabContent>
-										<TabContent value="css" class="h-full">
-											<CssSettings />
-										</TabContent>
-									</div>
-								</Tabs>
-							</div>
-						</Pane>
-					{/if}
-				</Splitpanes>
-			</SplitPanesWrapper>
-		{/if}
-	{:else}
-		App is null
-	{/if}
-{:else}
-	App editor not available to operators
-{/if}
-
-<ItemPicker
-	bind:this={itemPicker}
-	pickCallback={(path, _) => {
-		$pickVariableCallback?.(path)
-	}}
-	itemName="Variable"
-	extraField="path"
-	loadItems={async () =>
-		(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
-			name: x.path,
-			...x
-		}))}
->
-	<div
-		slot="submission"
-		class="flex flex-row-reverse w-full bg-surface border-t border-gray-200 rounded-bl-lg rounded-br-lg"
-	>
-		<Button
-			variant="border"
-			color="blue"
-			size="sm"
-			startIcon={{ icon: Plus }}
-			on:click={() => {
-				variableEditor?.initNew?.()
-			}}
-		>
-			New variable
-		</Button>
-	</div>
-</ItemPicker>
-
-<VariableEditor bind:this={variableEditor} />
-
-<style global>
-	:global(#o1) > :global(.splitpanes__pane) {
-		overflow: visible !important;
-	}
-	:global(#o2) > :global(.splitpanes__pane) {
-		overflow: visible !important;
-	}</style>