windmill-components 1.309.7 → 1.352.0

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

@@ -0,0 +1,33 @@
+<script>import Tooltip from '../../../Tooltip.svelte';
+import MultiSelect from '../../../multiselect/MultiSelectWrapper.svelte';
+import { twMerge } from 'tailwind-merge';
+export let items;
+export let value = undefined;
+export let title;
+export let tooltip;
+$: width = 0;
+const inputWidth = 280;
+</script>
+
+<div
+	class={twMerge(
+		'flex flex-col justify-between w-full',
+		width < inputWidth ? 'flex-col gap-2' : 'flex-row gap-16 '
+	)}
+	bind:clientWidth={width}
+>
+	<div class="flex items-center text-xs h-8 whitespace-nowrap">
+		{title}
+		<Tooltip light small>{tooltip}</Tooltip>
+	</div>
+
+	<div class="w-full">
+		{#if items.length === 0}
+			<div class="text-xs text-secondary w-full flex items-center justify-end h-8">
+				No components to recompute.
+			</div>
+		{:else}
+			<MultiSelect {items} bind:value />
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        items: string[];
+        value?: string[] | undefined;
+        title: string;
+        tooltip: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EventHandlerItemProps = typeof __propDef.props;
+export type EventHandlerItemEvents = typeof __propDef.events;
+export type EventHandlerItemSlots = typeof __propDef.slots;
+export default class EventHandlerItem extends SvelteComponent<EventHandlerItemProps, EventHandlerItemEvents, EventHandlerItemSlots> {
+}
+export {};

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

@@ -0,0 +1,103 @@
+<script>import { getContext } from 'svelte';
+import EventHandlerItem from './EventHandlerItem.svelte';
+import PanelSection from './common/PanelSection.svelte';
+const { runnableComponents } = getContext('AppViewerContext');
+export let item;
+export let ownId;
+const componentsWithEventHandler = [
+    'modalcomponent',
+    'drawercomponent',
+    'buttoncomponent',
+    'formcomponent',
+    'formbuttoncomponent',
+    'checkboxcomponent',
+    'resourceselectcomponent',
+    'selectcomponent',
+    'tabscomponent',
+    'conditionalwrapper',
+    'fileinputcomponent',
+    's3fileinputcomponent',
+    'steppercomponent'
+];
+</script>
+
+{#if componentsWithEventHandler.includes(item.data.type)}
+	<PanelSection
+		title="Event handlers"
+		tooltip="Event handlers are used to trigger actions on other components when a specific event occurs. For example, you can trigger a recompute on a component when a button is clicked."
+	>
+		{#if (`onOpenRecomputeIds` in item.data && Array.isArray(item.data.onOpenRecomputeIds)) || item.data.type === 'modalcomponent' || item.data.type === 'drawercomponent'}
+			<EventHandlerItem
+				title="on open"
+				tooltip="Select components to recompute after this component was opened"
+				items={Object.keys($runnableComponents).filter((id) => id !== ownId)}
+				bind:value={item.data.onOpenRecomputeIds}
+			/>
+		{/if}
+
+		{#if (`onCloseRecomputeIds` in item.data && Array.isArray(item.data.onCloseRecomputeIds)) || item.data.type === 'modalcomponent' || item.data.type === 'drawercomponent'}
+			<EventHandlerItem
+				title="on close"
+				tooltip="Select components to recompute after this component was closed"
+				items={Object.keys($runnableComponents).filter((id) => id !== ownId)}
+				bind:value={item.data.onCloseRecomputeIds}
+			/>
+		{/if}
+		{#if (`recomputeIds` in item.data && Array.isArray(item.data.recomputeIds)) || item.data.type === 'buttoncomponent' || item.data.type === 'formcomponent' || item.data.type === 'formbuttoncomponent' || item.data.type === 'checkboxcomponent'}
+			<EventHandlerItem
+				title="on success"
+				tooltip="Select components to recompute after this runnable has successfully run"
+				items={Object.keys($runnableComponents).filter((id) => id !== ownId)}
+				bind:value={item.data.recomputeIds}
+			/>
+		{/if}
+		{#if item.data.type === 'checkboxcomponent'}
+			<EventHandlerItem
+				title="on toggle"
+				tooltip="Contrary to onSuccess, this will only trigger recompute when a human toggle the change, not if it set by a default value or by setValue"
+				items={Object.keys($runnableComponents).filter((id) => id !== ownId)}
+				bind:value={item.data.onToggle}
+			/>
+		{/if}
+		{#if item.data.type === 'resourceselectcomponent' || item.data.type === 'selectcomponent'}
+			<EventHandlerItem
+				title="on select"
+				tooltip="Contrary to onSuccess, this will only trigger recompute when a human select an item, not if it set by a default value or by setValue"
+				items={Object.keys($runnableComponents).filter((id) => id !== ownId)}
+				bind:value={item.data.onSelect}
+			/>
+		{/if}
+		{#if item.data.type === 'tabscomponent' || item.data.type === 'conditionalwrapper'}
+			<EventHandlerItem
+				title="on tab change"
+				tooltip="Select components to recompute after the selected tab was changed"
+				items={Object.keys($runnableComponents).filter((id) => id !== ownId)}
+				bind:value={item.data.onTabChange}
+			/>
+		{/if}
+		{#if item.data.type === 'fileinputcomponent' || item.data.type === 's3fileinputcomponent'}
+			<EventHandlerItem
+				title="on file change"
+				tooltip="Select components to recompute after a file was selected"
+				items={Object.keys($runnableComponents).filter((id) => id !== ownId)}
+				bind:value={item.data.onFileChange}
+			/>
+		{/if}
+		{#if item.data.type === 'steppercomponent'}
+			<EventHandlerItem
+				title="on next"
+				tooltip="Select components to recompute after the next button was clicked"
+				items={Object.keys($runnableComponents).filter((id) => id !== ownId)}
+				bind:value={item.data.onNext}
+			/>
+		{/if}
+		{#if item.data.type === 'steppercomponent'}
+			<EventHandlerItem
+				title="on previous"
+				tooltip="Select components to recompute after the previous button was clicked"
+				items={Object.keys($runnableComponents).filter((id) => id !== ownId)}
+				bind:value={item.data.onPrevious}
+			/>
+		{/if}
+	</PanelSection>
+{/if}

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { GridItem } from '../../types';
+declare const __propDef: {
+    props: {
+        item: GridItem;
+        ownId: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EventHandlersProps = typeof __propDef.props;
+export type EventHandlersEvents = typeof __propDef.events;
+export type EventHandlersSlots = typeof __propDef.slots;
+export default class EventHandlers extends SvelteComponent<EventHandlersProps, EventHandlersEvents, EventHandlersSlots> {
+}
+export {};

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

@@ -1,6 +1,6 @@
 <script>import Button from '../../../common/button/Button.svelte';
 import PanelSection from './common/PanelSection.svelte';
-import { dndzone } from 'svelte-dnd-action';
+import { dragHandle, dragHandleZone } from '@windmill-labs/svelte-dnd-action';
 import { GripVertical, Plus, X } from 'lucide-svelte';
 import InputsSpecEditor from './InputsSpecEditor.svelte';
 import { generateRandomString } from '../../../../utils';
@@ -10,16 +10,19 @@ import { getContext, tick } from 'svelte';
 import { deleteGridItem } from '../appUtils';
 export let conditions = [];
 export let component;
-let dragDisabled = true;
 let items = conditions.slice(0, -1).map((condition, index) => {
     return { value: condition, id: generateRandomString(), originalIndex: index };
 });
-$: conditions = items.map((item) => item.value).concat([{
+$: conditions = items
+    .map((item) => item.value)
+    .concat([
+    {
         type: 'evalv2',
         expr: 'true',
         fieldType: 'boolean',
         connections: []
-    }]);
+    }
+]);
 const { app, runnableComponents, componentControl } = getContext('AppViewerContext');
 function handleConsider(e) {
     const { items: newItems } = e.detail;
@@ -49,16 +52,6 @@ function handleFinalize(e) {
             $componentControl[component.id]?.setTab?.(targetIndex);
         });
     }
-    dragDisabled = true;
-}
-function startDrag(event) {
-    event.preventDefault();
-    dragDisabled = false;
-}
-function handleKeyDown(event) {
-    if ((event.key === 'Enter' || event.key === ' ') && dragDisabled) {
-        dragDisabled = false;
-    }
 }
 function deleteSubgrid(index) {
     let subgrid = `${component.id}-${index}`;
@@ -69,7 +62,7 @@ function deleteSubgrid(index) {
         }
     }
     $runnableComponents = $runnableComponents;
-    for (let i = index; i < items.length - 1; i++) {
+    for (let i = index; i < items.length; i++) {
         $app.subgrids[`${component.id}-${i}`] = $app.subgrids[`${component.id}-${i + 1}`];
     }
     // Remove the corresponding item from the items array
@@ -84,7 +77,7 @@ function deleteSubgrid(index) {
     $app = $app;
 }
 function addCondition() {
-    const numberOfConditions = items.length;
+    const numberOfConditions = conditions.length;
     if (!$app.subgrids) {
         $app.subgrids = {};
     }
@@ -102,7 +95,7 @@ function addCondition() {
         id: generateRandomString(),
         originalIndex: items.length
     });
-    component.numberOfSubgrids = items.length;
+    component.numberOfSubgrids = items.length + 1;
 }
 </script>
 
@@ -116,11 +109,10 @@ function addCondition() {
 	{/if}
 	<div class="w-full flex flex-col mt-2">
 		<section
-			use:dndzone={{
+			use:dragHandleZone={{
 				items: items,
 				flipDurationMs: 200,
-				dropTargetStyle: {},
-				dragDisabled
+				dropTargetStyle: {}
 			}}
 			on:consider={handleConsider}
 			on:finalize={handleFinalize}
@@ -129,9 +121,8 @@ function addCondition() {
 				{@const condition = item.value}
 				<div class="w-full flex flex-row gap-2 items-center relative">
 					<div class={twMerge('grow border p-3 my-2 rounded-md bg-surface relative')}>
-						{#if dragDisabled}
 						<InputsSpecEditor
-							key={`Condition ${index + 1}`}
+							key={`condition${index + 1}`}
 							bind:componentInput={item.value}
 							id={component.id}
 							userInputEnabled={false}
@@ -147,10 +138,6 @@ function addCondition() {
 							customTitle={condition?.['customTitle']}
 							displayType={false}
 						/>
-						{:else}
-						<pre><code>{condition?.['expr']}</code></pre>
-						{/if}
-
 					</div>
 
 					<div class="flex flex-col justify-center gap-2">
@@ -162,20 +149,11 @@ function addCondition() {
 
 						<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 						<!-- svelte-ignore a11y-no-static-element-interactions -->
-						<div
-							tabindex={dragDisabled ? 0 : -1}
-							class="w-4 h-4"
-							on:mousedown={startDrag}
-							on:touchstart={startDrag}
-							on:keydown={handleKeyDown}
-							aria-label="drag-handle"
-							style={dragDisabled ? 'cursor: grab' : 'cursor: grabbing'}
-						>
+						<div use:dragHandle class="w-4 h-4 handle" aria-label="drag-handle">
 							<GripVertical size={16} />
 						</div>
 					</div>
 				</div>
-
 			{/each}
 		</section>
 		<div class="border rounded-md p-3 mb-2">

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

@@ -3,7 +3,7 @@ import CloseButton from '../../../common/CloseButton.svelte';
 import { getContext, tick } from 'svelte';
 import { deleteGridItem } from '../appUtils';
 import PanelSection from './common/PanelSection.svelte';
-import { dndzone } from 'svelte-dnd-action';
+import { dragHandle, dragHandleZone } from '@windmill-labs/svelte-dnd-action';
 import { generateRandomString } from '../../../../utils';
 import { GripVertical, Plus } from 'lucide-svelte';
 import GridTabDisabled from './GridTabDisabled.svelte';
@@ -103,17 +103,6 @@ function handleFinalize(e) {
             $componentControl[component.id]?.setTab?.(targetIndex);
         });
     }
-    dragDisabled = true;
-}
-let dragDisabled = true;
-function startDrag(event) {
-    event.preventDefault();
-    dragDisabled = false;
-}
-function handleKeyDown(event) {
-    if ((event.key === 'Enter' || event.key === ' ') && dragDisabled) {
-        dragDisabled = false;
-    }
 }
 </script>
 
@@ -123,10 +112,9 @@ function handleKeyDown(event) {
 	{/if}
 	<div class="w-full flex gap-2 flex-col mt-2">
 		<section
-			use:dndzone={{
+			use:dragHandleZone={{
 				items,
 				flipDurationMs: 200,
-				dragDisabled,
 				dropTargetStyle: {}
 			}}
 			on:consider={handleConsider}
@@ -149,22 +137,14 @@ function handleKeyDown(event) {
 							<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 
 							<!-- svelte-ignore a11y-no-static-element-interactions -->
-							<div
-								tabindex={dragDisabled ? 0 : -1}
-								class="w-4 h-4"
-								on:mousedown={startDrag}
-								on:touchstart={startDrag}
-								on:keydown={handleKeyDown}
-								aria-label="drag-handle"
-								style={dragDisabled ? 'cursor: grab' : 'cursor: grabbing'}
-							>
+							<div use:dragHandle class="handle w-4 h-4" aria-label="drag-handle">
 								<GripVertical size={16} />
 							</div>
 						</div>
 					</div>
 
 					{#if canDisableTabs && disabledTabs}
-						<GridTabDisabled bind:field={disabledTabs[index]} id={component.id} />
+						<GridTabDisabled {index} bind:field={disabledTabs[index]} id={component.id} />
 					{/if}
 				</div>
 			{/each}

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

@@ -3,6 +3,7 @@ import InputsSpecEditor from './InputsSpecEditor.svelte';
 import { slide } from 'svelte/transition';
 export let id;
 export let field;
+export let index;
 let disablable = field && !(field?.type === 'static' && field?.value === false);
 </script>
 
@@ -33,7 +34,7 @@ let disablable = field && !(field?.type === 'static' && field?.value === false);
 {#if disablable}
 	<div transition:slide|local>
 		<InputsSpecEditor
-			key={`Tab disabled`}
+			key="tabDisabled {index}"
 			bind:componentInput={field}
 			{id}
 			userInputEnabled={false}

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

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         id: string;
         field: RichConfiguration;
+        index: number;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -12,6 +12,7 @@ import { FunctionSquare, Loader2, Pen, Plug, Plug2, Upload, User } from 'lucide-
 import { fieldTypeToTsType } from '../../utils';
 import EvalV2InputEditor from './inputEditor/EvalV2InputEditor.svelte';
 import { Button } from '../../../common';
+import Toggle from '../../../Toggle.svelte';
 export let id;
 export let componentInput;
 export let key;
@@ -45,7 +46,9 @@ function applyConnection(connection) {
         ...componentInput,
         type: 'evalv2',
         expr: expr,
-        connections: [{ componentId: connection.componentId, id: connection.path.split('.')[0].split('[')[0] }]
+        connections: [
+            { componentId: connection.componentId, id: connection.path.split('.')[0].split('[')[0] }
+        ]
     };
     evalV2editor?.setCode(expr);
     $app = $app;
@@ -64,7 +67,7 @@ $: if (componentInput == undefined) {
 		<div class="flex justify-between items-end">
 			<div class="flex flex-row gap-4 items-center">
 				<div class="flex items-center">
-					<span class="text-xs font-semibold truncate text-primary">
+					<span class="!text-2xs font-semibold text-ellipsis text-primary">
 						{customTitle
 							? customTitle
 							: shouldCapitalize
@@ -109,7 +112,7 @@ $: if (componentInput == undefined) {
 						}}
 					>
 						<ToggleButton value="static" icon={Pen} iconOnly tooltip="Static" />
-						{#if userInputEnabled && !format?.startsWith('resource-')}
+						{#if userInputEnabled}
 							<ToggleButton value="user" icon={User} iconOnly tooltip="User Input" />
 						{/if}
 						{#if fileUpload}
@@ -180,5 +183,23 @@ $: if (componentInput == undefined) {
 		{:else if componentInput?.type === 'user'}
 			<span class="text-2xs italic text-tertiary">Field's value is set by the user</span>
 		{/if}
+		{#if (componentInput?.type === 'evalv2' || componentInput?.type === 'connected' || componentInput?.type === 'user') && fieldType == 'object' && format?.startsWith('resource-')}
+			<div class="flex flex-row items-center">
+				<Toggle
+					size="xs"
+					bind:checked={componentInput.allowUserResources}
+					options={{
+						left: 'static resource select only',
+						right: 'resources from users allowed'
+					}}
+				/>
+				<Tooltip
+					>Apps are executed on behalf of publishers and by default cannot access viewer's
+					resources. If the resource passed here as a reference does not come from a static
+					'Resource Select' component (which will be whitelisted by the auto-generated policy), you
+					need to toggle this.</Tooltip
+				>
+			</div>
+		{/if}
 	</div>
 {/if}

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

@@ -2,6 +2,7 @@
 import { createEventDispatcher } from 'svelte';
 import InputsSpecEditor from './InputsSpecEditor.svelte';
 import OneOfInputSpecsEditor from './OneOfInputSpecsEditor.svelte';
+import Tooltip from '../../../Tooltip.svelte';
 export let id;
 export let inputSpecs;
 export let inputSpecsConfiguration = undefined;
@@ -13,17 +14,29 @@ export let deletable = false;
 export let acceptSelf = false;
 export let recomputeOnInputChanged = true;
 export let showOnDemandOnlyToggle = false;
+export let overridenByComponent = [];
 $: finalInputSpecsConfiguration = inputSpecsConfiguration ?? inputSpecs;
 const dispatch = createEventDispatcher();
+const mapping = {
+    onSuccess: 'On success wizard',
+    onError: 'On error wizard'
+};
 </script>
 
 {#if inputSpecs}
 	<div class="w-full flex flex-col gap-4">
 		{#each Object.keys(finalInputSpecsConfiguration) as k}
-			{#if finalInputSpecsConfiguration[k]?.type == 'oneOf'}
+			{#if overridenByComponent.includes(k)}
+				<div>
+					<span class="text-xs font-semibold truncate text-primary">
+						{k}
+					</span>
+					<div class="text-tertiary text-xs">Managed by the component</div>
+				</div>
+			{:else if finalInputSpecsConfiguration[k]?.type == 'oneOf'}
 				<OneOfInputSpecsEditor
 					{acceptSelf}
-					key={k}
+					key={mapping[k] ?? k}
 					bind:oneOf={inputSpecs[k]}
 					{id}
 					{shouldCapitalize}
@@ -55,6 +68,7 @@ const dispatch = createEventDispatcher();
 					loading={meta?.['loading']}
 					documentationLink={meta?.['documentationLink']}
 					markdownTooltip={meta?.['markdownTooltip']}
+					allowTypeChange={meta?.['allowTypeChange']}
 					{displayType}
 					{recomputeOnInputChanged}
 					{showOnDemandOnlyToggle}
@@ -65,6 +79,22 @@ const dispatch = createEventDispatcher();
 					</div>{/if}
 			{/if}
 		{/each}
+		{#if overridenByComponent.length > 0}
+			{#each overridenByComponent.filter((item) => Object.keys(finalInputSpecsConfiguration).indexOf(item) < 0) as k}
+				<div>
+					<span class="text-xs font-semibold truncate text-primary">
+						{k}
+					</span>
+					<div class="text-tertiary text-xs">
+						Managed by the component
+						<Tooltip light>
+							The input is managed by the component and cannot be edited here: It will be injected
+							by the component itself.
+						</Tooltip>
+					</div>
+				</div>
+			{/each}
+		{/if}
 	</div>
 {:else}
 	<div class="text-tertiary text-sm">No inputs</div>

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

@@ -13,6 +13,7 @@ declare const __propDef: {
         acceptSelf?: boolean | undefined;
         recomputeOnInputChanged?: boolean | undefined;
         showOnDemandOnlyToggle?: boolean | undefined;
+        overridenByComponent?: string[] | undefined;
     };
     events: {
         delete: CustomEvent<any>;

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

@@ -147,8 +147,9 @@ onMount(() => {
 					</Badge>
 
 					<Tooltip light>
-						You can customise the CSS and the classes of this component instance. Theses
-						customisations will only be applied to this component.
+						You can customise the CSS and the classes of this component instance. These
+						customisations will only be applied to this component. You can also apply
+						custom classes set on the Global styling panel.
 					</Tooltip>
 				</div>
 			</Tab>
@@ -157,7 +158,7 @@ onMount(() => {
 					Global: {type ? ccomponents[type].name : ''}
 
 					<Tooltip light>
-						You can customise the CSS and the classes of all components of this type. Theses
+						You can customise the CSS and the classes of all components of this type. These
 						customisations will be applied to all components of this type.
 					</Tooltip>
 				</div>

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

@@ -3,7 +3,6 @@ export let value;
 export let componentInput;
 export let subFieldType;
 export let id;
-export let dragging = false;
 let fakeComponentInput = {
     ...componentInput,
     value
@@ -17,5 +16,4 @@ $: fakeComponentInput && (value = fakeComponentInput.value);
 	fieldType={subFieldType}
 	bind:componentInput={fakeComponentInput}
 	on:remove
-	{dragging}
 />

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

@@ -6,7 +6,6 @@ declare const __propDef: {
         componentInput: StaticInput<any>;
         subFieldType: InputType | undefined;
         id: string | undefined;
-        dragging?: boolean | undefined;
     };
     events: {
         remove: CustomEvent<any>;

package/package/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte

@@ -3,6 +3,7 @@ import ColorPicker, { ChromeVariant } from 'svelte-awesome-color-picker';
 import { ClearableInput } from '../../../../common';
 import { createPopperActions } from 'svelte-popperjs';
 import { fade } from 'svelte/transition';
+import { zIndexes } from '../../../../../zIndexes';
 export let value = '#fff';
 const dispatch = createEventDispatcher();
 const [popperRef, popperContent] = createPopperActions();
@@ -21,8 +22,8 @@ function open() {
 	<div
 		transition:fade={{ duration: 150 }}
 		use:popperContent={{ placement: 'bottom', strategy: 'fixed' }}
-		class="color-picker-input z-[1002] !text-primary"
-		style="width: {width > 280 ? width : 280}px;"
+		class={`color-picker-input !text-primary`}
+		style="width: {width > 280 ? width : 280}px; z-index: {zIndexes.colorInput}"
 	>
 		<ColorPicker
 			bind:isOpen

package/package/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte

@@ -6,6 +6,7 @@ import { Maximize2, X } from 'lucide-svelte';
 import { Drawer } from '../../../../common';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import Toggle from '../../../../Toggle.svelte';
+import { zIndexes } from '../../../../../zIndexes';
 export let componentInput;
 export let id;
 export let field;
@@ -43,7 +44,12 @@ let focus = false;
 
 {#if componentInput?.type === 'evalv2'}
 	{#if fullscreen}
-		<Drawer placement="bottom" on:close={() => (fullscreen = false)} open>
+		<Drawer
+			placement="bottom"
+			on:close={() => (fullscreen = false)}
+			open
+			offset={zIndexes.monacoEditor}
+		>
 			<Splitpanes horizontal class="h-full">
 				<Pane size={50}>
 					<SimpleEditor
@@ -109,6 +115,7 @@ let focus = false;
 					<div
 						class="p-1 !text-2xs absolute rounded-b border-b border-r border-l bg-surface w-full z-[5000] overflow-auto"
 					>
+						<!-- <div class="text-tertiary absolute top-0 right-0 !text-2xs">{id}.{field}</div> -->
 						<div class="float-right text-tertiary cursor-pointer"><X size={14} /></div>
 						<pre class="text-tertiary"
 							>{JSON.stringify($evalPreview[`${id}.${field}`] ?? null, null, 4) ?? 'null'}</pre