windmill-components 1.473.1 → 1.493.2

package/package/components/S3FilePicker.svelte.d.ts

@@ -1,36 +1,47 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        fromWorkspaceSettings?: boolean | undefined;
-        readOnlyMode: boolean;
-        initialFileKey?: {
-            s3: string;
-        } | undefined;
-        selectedFileKey?: {
-            s3: string;
-        } | undefined;
-        folderOnly?: boolean | undefined;
-        open?: ((preSelectedFileKey?: {
-            s3: string;
-            storage?: string | undefined;
-        } | undefined) => Promise<void>) | undefined;
+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;
     };
-    events: {
-        focus: FocusEvent;
-        click: MouseEvent;
-        close: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type S3FilePickerProps = typeof __propDef.props;
-export type S3FilePickerEvents = typeof __propDef.events;
-export type S3FilePickerSlots = typeof __propDef.slots;
-export default class S3FilePicker extends SvelteComponent<S3FilePickerProps, S3FilePickerEvents, S3FilePickerSlots> {
-    get open(): (preSelectedFileKey?: {
+    z_$$bindings?: Bindings;
+}
+declare const S3FilePicker: $$__sveltets_2_IsomorphicComponent<{
+    fromWorkspaceSettings?: boolean;
+    readOnlyMode: boolean;
+    initialFileKey?: {
+        s3: string;
+        storage?: string;
+    } | undefined;
+    selectedFileKey?: {
+        s3: string;
+        storage?: string;
+    } | undefined;
+    folderOnly?: boolean;
+    regexFilter?: RegExp | undefined;
+    open?: (preSelectedFileKey?: {
         s3: string;
-        storage?: string | undefined;
+        storage?: string;
     } | undefined) => Promise<void>;
-}
-export {};
+}, {
+    focus: FocusEvent;
+    click: MouseEvent;
+    close: CustomEvent<{
+        s3: string;
+        storage: string | undefined;
+    } | undefined>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    open: (preSelectedFileKey?: {
+        s3: string;
+        storage?: string;
+    } | undefined) => Promise<void>;
+}, string>;
+type S3FilePicker = InstanceType<typeof S3FilePicker>;
+export default S3FilePicker;

package/package/components/S3ObjectPicker.svelte

@@ -1,4 +1,4 @@
-<script>import { Loader2, Pipette } from 'lucide-svelte';
+<script lang="ts">import { Loader2, Pipette } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import { Button } from './common';
 import Toggle from './Toggle.svelte';
@@ -54,18 +54,6 @@ export function focus() {
 				bind:value
 			/>
 		{/await}
-		<Button
-			variant="border"
-			color="light"
-			size="xs"
-			btnClasses="mt-1"
-			on:click={() => {
-				s3FilePicker?.open?.(value)
-			}}
-			startIcon={{ icon: Pipette }}
-		>
-			Choose an object from the catalog
-		</Button>
 	{:else}
 		<FileUpload
 			allowMultiple={false}
@@ -83,4 +71,16 @@ export function focus() {
 			defaultValue={value?.s3}
 		/>
 	{/if}
+	<Button
+		variant="border"
+		color="light"
+		size="xs"
+		btnClasses="mt-1"
+		on:click={() => {
+			s3FilePicker?.open?.(value)
+		}}
+		startIcon={{ icon: Pipette }}
+	>
+		Choose an object from the catalog
+	</Button>
 </div>

package/package/components/S3ObjectPicker.svelte.d.ts

@@ -1,22 +1,27 @@
-import { SvelteComponent } from "svelte";
 import type SimpleEditor from './SimpleEditor.svelte';
-declare const __propDef: {
-    props: {
-        value: any;
-        editor?: SimpleEditor | undefined;
-        focus?: (() => void) | undefined;
+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;
     };
-    events: {
-        focus: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type S3ObjectPickerProps = typeof __propDef.props;
-export type S3ObjectPickerEvents = typeof __propDef.events;
-export type S3ObjectPickerSlots = typeof __propDef.slots;
-export default class S3ObjectPicker extends SvelteComponent<S3ObjectPickerProps, S3ObjectPickerEvents, S3ObjectPickerSlots> {
-    get focus(): () => void;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const S3ObjectPicker: $$__sveltets_2_IsomorphicComponent<{
+    value: any;
+    editor?: SimpleEditor | undefined;
+    focus?: () => void;
+}, {
+    focus: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, string>;
+type S3ObjectPicker = InstanceType<typeof S3ObjectPicker>;
+export default S3ObjectPicker;

package/package/components/SaveInputsButton.svelte

@@ -1,4 +1,4 @@
-<script>import { displayDate } from '../utils.js';
+<script lang="ts">import { displayDate } from '../utils.js';
 import { InputService } from '../gen/index.js';
 import { workspaceStore } from '../stores.js';
 import { Button } from './common';

package/package/components/SaveInputsButton.svelte.d.ts

@@ -1,24 +1,28 @@
-import { SvelteComponent } from "svelte";
 import { type RunnableType } from '../gen/index.js';
-declare const __propDef: {
-    props: {
-        runnableId: string | undefined;
-        runnableType: RunnableType | undefined;
-        args: object;
-        disabled?: boolean | undefined;
-        small?: boolean | undefined;
-        showTooltip?: boolean | undefined;
+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;
     };
-    events: {
-        update: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SaveInputsButtonProps = typeof __propDef.props;
-export type SaveInputsButtonEvents = typeof __propDef.events;
-export type SaveInputsButtonSlots = typeof __propDef.slots;
-export default class SaveInputsButton extends SvelteComponent<SaveInputsButtonProps, SaveInputsButtonEvents, SaveInputsButtonSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const SaveInputsButton: $$__sveltets_2_IsomorphicComponent<{
+    runnableId: string | undefined;
+    runnableType: RunnableType | undefined;
+    args: object;
+    disabled?: boolean;
+    small?: boolean | undefined;
+    showTooltip?: boolean | undefined;
+}, {
+    update: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SaveInputsButton = InstanceType<typeof SaveInputsButton>;
+export default SaveInputsButton;

package/package/components/SavedInputs.svelte

@@ -1,4 +1,4 @@
-<script>import { Button } from './common';
+<script lang="ts">import { Button } from './common';
 import { InputService, JobService } from '../gen/index.js';
 import { userStore, workspaceStore } from '../stores.js';
 import { base } from '../base';
@@ -297,7 +297,7 @@ async function loadLargeArgs(id, input, allowLarge) {
 									class="w-full h-full items-center text-xs font-normal grid grid-cols-8 gap-4 min-w-0"
 								>
 									<div class="">
-										<div class="rounded-full w-2 h-2 bg-orange-400 animate-pulse" />
+										<div class="rounded-full w-2 h-2 bg-orange-400 animate-pulse"></div>
 									</div>
 									<div class="col-span-2 truncate">
 										{i.created_by}
@@ -353,7 +353,8 @@ async function loadLargeArgs(id, input, allowLarge) {
 									class="w-full h-full items-center text-xs font-normal grid grid-cols-8 gap-4 min-w-0"
 								>
 									<div class="">
-										<div class="rounded-full w-2 h-2 {i.success ? 'bg-green-400' : 'bg-red-400'}" />
+										<div class="rounded-full w-2 h-2 {i.success ? 'bg-green-400' : 'bg-red-400'}"
+										></div>
 									</div>
 									<div class="col-span-2 truncate" title={i.created_by}>
 										{i.created_by}

package/package/components/SavedInputs.svelte.d.ts

@@ -1,23 +1,27 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        scriptHash?: string | null | undefined;
-        scriptPath?: string | null | undefined;
-        flowPath?: string | null | undefined;
-        canSaveInputs?: boolean | undefined;
-        isValid: boolean;
-        args: object;
+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;
     };
-    events: {
-        selected_args: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SavedInputsProps = typeof __propDef.props;
-export type SavedInputsEvents = typeof __propDef.events;
-export type SavedInputsSlots = typeof __propDef.slots;
-export default class SavedInputs extends SvelteComponent<SavedInputsProps, SavedInputsEvents, SavedInputsSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const SavedInputs: $$__sveltets_2_IsomorphicComponent<{
+    scriptHash?: string | null;
+    scriptPath?: string | null;
+    flowPath?: string | null;
+    canSaveInputs?: boolean;
+    isValid: boolean;
+    args: object;
+}, {
+    selected_args: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SavedInputs = InstanceType<typeof SavedInputs>;
+export default SavedInputs;

package/package/components/SavedInputsPicker.svelte

@@ -1,27 +1,30 @@
-<script>import { Button } from './common';
+<script lang="ts">import { Button } from './common';
 import { InputService } from '../gen/index.js';
 import { userStore, workspaceStore } from '../stores.js';
 import { sendUserToast } from '../utils.js';
 import { createEventDispatcher, onDestroy } from 'svelte';
-import { Edit, Trash2, Save, Eye } from 'lucide-svelte';
+import { Edit, Trash2, Save } from 'lucide-svelte';
 import Toggle from './Toggle.svelte';
 import { Cell } from './table/index';
 import SaveInputsButton from './SaveInputsButton.svelte';
 import Popover from './Popover.svelte';
 import InfiniteList from './InfiniteList.svelte';
 import { twMerge } from 'tailwind-merge';
-import PopoverV2 from './meltComponents/Popover.svelte';
-import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
+import SavedInputsPickerViewer from './SavedInputsPickerViewer.svelte';
 export let previewArgs = undefined;
 export let runnableId = undefined;
 export let runnableType = undefined;
 export let isValid = false;
 export let noButton = false;
 export let jsonView = false;
+export let limitPayloadSize = false;
 let infiniteList = null;
 let draft = true;
 let selectedInput = null;
 let isEditing = null;
+let viewerOpen = false;
+let openStates = {};
+let clientWidth = 0;
 const dispatch = createEventDispatcher();
 async function updateInput(input) {
     if (!input)
@@ -150,6 +153,10 @@ export function resetSelected(dispatchEvent) {
         dispatch('select', undefined);
     }
 }
+function updateViewerOpenState(itemId, isOpen) {
+    openStates[itemId] = isOpen;
+    viewerOpen = Object.values(openStates).some((state) => state);
+}
 $: $workspaceStore &&
     runnableId &&
     runnableType &&
@@ -196,7 +203,11 @@ $: $workspaceStore &&
 						<col />
 					</colgroup>
 				</svelte:fragment>
-				<svelte:fragment let:item>
+				<svelte:fragment let:item let:hover>
+					{@const editOptions =
+						item.created_by == $userStore?.username ||
+						$userStore?.is_admin ||
+						$userStore?.is_super_admin}
 					<Cell>
 						<div class="center-center">
 							<Save size={12} />
@@ -205,6 +216,7 @@ $: $workspaceStore &&
 					<Cell>
 						<div
 							class="w-full flex items-center text-sm justify-between gap-4 py-1 text-left transition-all"
+							bind:clientWidth
 						>
 							<div class="w-full h-full items-center justify-between flex gap-1 min-w-0">
 								{#if isEditing && isEditing.id === item.id}
@@ -224,29 +236,22 @@ $: $workspaceStore &&
 										{item.name}
 									</small>
 								{/if}
-								{#if item.created_by == $userStore?.username || $userStore?.is_admin || $userStore?.is_super_admin}
-									<div class="items-center flex gap-2">
-										<PopoverV2 displayArrow={false} closeButton={false} openOnHover={true}>
-											<svelte:fragment slot="trigger">
-												<Eye class="w-4 h-4 group-hover:block hidden" />
-											</svelte:fragment>
-											<svelte:fragment slot="content">
-												<div class="p-2">
-													{#if item.payloadData === 'WINDMILL_TOO_BIG'}
-														<div class="text-center text-tertiary text-xs">
-															Payload too big to preview but can still be loaded
-														</div>
-													{:else}
-														<div class="max-w-60 overflow-auto">
-															<ObjectViewer json={item.payloadData} />
-														</div>
-													{/if}
-												</div>
-											</svelte:fragment>
-										</PopoverV2>
 
+								<div class="items-center flex gap-2">
+									<SavedInputsPickerViewer
+										payloadData={item.payloadData}
+										{limitPayloadSize}
+										{hover}
+										{viewerOpen}
+										on:openChange={(e) => {
+											updateViewerOpenState(item.id, e.detail)
+										}}
+										maxWidth={clientWidth}
+										{editOptions}
+									/>
+									{#if editOptions}
 										{#if !isEditing || isEditing?.id !== item.id}
-											<div class="group-hover:block hidden -my-2">
+											<div class={hover || openStates[item.id] ? 'block -my-2' : 'hidden'}>
 												<Toggle
 													size="xs"
 													options={{ right: 'shared' }}
@@ -264,7 +269,7 @@ $: $workspaceStore &&
 											size="xs"
 											variant="border"
 											spacingSize="xs2"
-											btnClasses={'group-hover:block hidden -my-2'}
+											btnClasses={hover || openStates[item.id] ? 'block -my-2 ' : 'hidden'}
 											on:click={(e) => {
 												e.stopPropagation()
 												if (isEditing?.id === item.id) {
@@ -283,8 +288,10 @@ $: $workspaceStore &&
 											spacingSize="xs2"
 											variant="contained"
 											btnClasses={twMerge(
-												isEditing?.id === item.id ? 'block' : 'group-hover:block hidden -my-2',
-												'hover:text-white hover:bg-red-500 text-red-500'
+												isEditing?.id === item.id || hover || openStates[item.id]
+													? 'block -my-2'
+													: 'hidden',
+												'bg-transparent hover:text-white hover:bg-red-500 text-red-500'
 											)}
 											on:click={() => {
 												infiniteList?.deleteItem(item.id)
@@ -292,10 +299,12 @@ $: $workspaceStore &&
 										>
 											<Trash2 class="w-4 h-4" />
 										</Button>
-									</div>
-								{:else}
-									<span class="text-xs text-tertiary">By {item.created_by}</span>
-								{/if}
+									{:else}
+										<span class="text-xs text-tertiary px-2 w-28 truncate" title={item.created_by}
+											>{item.created_by}</span
+										>
+									{/if}
+								</div>
 							</div>
 						</div>
 					</Cell>

package/package/components/SavedInputsPicker.svelte.d.ts

@@ -1,29 +1,35 @@
-import { SvelteComponent } from "svelte";
 import { type RunnableType } from '../gen/index.js';
-declare const __propDef: {
-    props: {
-        previewArgs?: any;
-        runnableId?: string | undefined;
-        runnableType?: RunnableType | undefined;
-        isValid?: boolean | undefined;
-        noButton?: boolean | undefined;
-        jsonView?: boolean | undefined;
-        refresh?: (() => void) | undefined;
-        resetSelected?: ((dispatchEvent?: boolean) => void) | undefined;
+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;
     };
-    events: {
-        select: CustomEvent<any>;
-        isEditing: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SavedInputsPickerProps = typeof __propDef.props;
-export type SavedInputsPickerEvents = typeof __propDef.events;
-export type SavedInputsPickerSlots = typeof __propDef.slots;
-export default class SavedInputsPicker extends SvelteComponent<SavedInputsPickerProps, SavedInputsPickerEvents, SavedInputsPickerSlots> {
-    get refresh(): () => void;
-    get resetSelected(): (dispatchEvent?: boolean | undefined) => void;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const SavedInputsPicker: $$__sveltets_2_IsomorphicComponent<{
+    previewArgs?: any;
+    runnableId?: string | undefined;
+    runnableType?: RunnableType | undefined;
+    isValid?: boolean;
+    noButton?: boolean;
+    jsonView?: boolean;
+    limitPayloadSize?: boolean;
+    refresh?: () => void;
+    resetSelected?: (dispatchEvent?: boolean) => void;
+}, {
+    select: CustomEvent<any>;
+    isEditing: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    refresh: () => void;
+    resetSelected: (dispatchEvent?: boolean) => void;
+}, string>;
+type SavedInputsPicker = InstanceType<typeof SavedInputsPicker>;
+export default SavedInputsPicker;

package/package/components/SavedInputsPickerViewer.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">import { Button } from './common';
+import Popover from './meltComponents/Popover.svelte';
+import ObjectViewerWrapper from './propertyPicker/ObjectViewerWrapper.svelte';
+import { copyToClipboard, isObjectTooBig } from '../utils';
+import { Eye, CopyIcon, Loader2 } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+export let payloadData;
+export let limitPayloadSize = false;
+export let hover = false;
+export let viewerOpen = false;
+export let maxWidth = undefined;
+export let editOptions = true;
+const dispatch = createEventDispatcher();
+const payloadTooBigForPreview = payloadData != 'WINDMILL_TOO_BIG' && isObjectTooBig(payloadData);
+const buttonWidth = 34;
+const floatingConfig = {
+    placement: 'bottom-end',
+    strategy: 'fixed',
+    offset: { mainAxis: 8, crossAxis: -buttonWidth },
+    gutter: 0,
+    middleware: [
+        {
+            name: 'flip',
+            options: {
+                fallbackPlacements: ['bottom-top']
+            }
+        }
+    ]
+};
+const xOffset = editOptions ? 218 : 168; // width of the optional buttons on the right
+let popover;
+let popoverOpen = false;
+let hoverTimeout;
+let objectViewerLoaded = false;
+let popoverFullyOpened = false;
+function handlePopoverChange(event) {
+    const isOpen = event.detail;
+    popoverOpen = isOpen;
+    if (!isOpen) {
+        objectViewerLoaded = false;
+        popoverFullyOpened = false;
+    }
+    else {
+        // Set a small delay to ensure the popover is fully rendered before
+        // marking it as fully opened
+        setTimeout(() => {
+            popoverFullyOpened = true;
+        }, 50);
+    }
+    dispatch('openChange', isOpen);
+}
+function handleHoverChange(isHovering) {
+    if (isHovering) {
+        // Start debounce timer when hovering starts
+        hoverTimeout = setTimeout(() => {
+            if (viewerOpen && popover && !popoverOpen) {
+                popover.open();
+            }
+        }, 100);
+    }
+    else {
+        // Clear timeout if hover ends before debounce period
+        if (hoverTimeout) {
+            clearTimeout(hoverTimeout);
+            hoverTimeout = undefined;
+        }
+    }
+}
+$: handleHoverChange(hover);
+$: ajustedWidth = maxWidth ? Math.abs(maxWidth - xOffset) : undefined;
+</script>
+
+<Popover
+	bind:this={popover}
+	{floatingConfig}
+	on:openChange={handlePopoverChange}
+	on:click={(e) => {
+		e.stopPropagation()
+	}}
+	closeOnOtherPopoverOpen
+	closeOnClickOutside={false}
+	usePointerDownOutside
+>
+	<svelte:fragment slot="trigger" let:isOpen>
+		<Button
+			variant="contained"
+			color="light"
+			btnClasses={hover || isOpen ? 'block -my-2 hover:bg-surface bg-transparent' : 'hidden'}
+			wrapperClasses="p-0"
+			size="xs2"
+			iconOnly
+			nonCaptureEvent
+			startIcon={{ icon: Eye }}
+		/>
+	</svelte:fragment>
+	<svelte:fragment slot="content">
+		<div
+			class="p-2 overflow-auto"
+			style="width: {ajustedWidth ? ajustedWidth + 'px' : '50vh'}; max-height: 50vh"
+		>
+			{#if payloadData === 'WINDMILL_TOO_BIG'}
+				<div class="text-center text-tertiary text-xs">
+					{#if limitPayloadSize}
+						Payload too big to be used
+					{:else}
+						Payload too big to preview but can still be loaded
+					{/if}
+				</div>
+			{:else}
+				<div
+					class="relative p-2"
+					role="button"
+					tabindex="0"
+					aria-label="Copy JSON payload to clipboard"
+					on:click={() => {
+						copyToClipboard(JSON.stringify(payloadData))
+					}}
+					on:keydown
+				>
+					{#if !objectViewerLoaded && payloadTooBigForPreview}
+						<div class="flex justify-center items-center py-4">
+							<Loader2 size={20} class="animate-spin text-primary" />
+							<span class="ml-2 text-xs text-tertiary">Loading data...</span>
+						</div>
+					{/if}
+
+					{#if popoverFullyOpened || !payloadTooBigForPreview}
+						<div
+							class={!objectViewerLoaded && payloadTooBigForPreview
+								? 'invisible h-0 overflow-hidden'
+								: ''}
+						>
+							<ObjectViewerWrapper
+								json={payloadData}
+								allowCopy
+								pureViewer
+								on:mounted={() => (objectViewerLoaded = true)}
+							/>
+						</div>
+					{/if}
+
+					<div class="absolute top-2 right-2 w-full h-full">
+						<Button
+							variant="contained"
+							size="xs2"
+							class="absolute top-0 right-0"
+							iconOnly
+							startIcon={{ icon: CopyIcon }}
+							nonCaptureEvent
+						/>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</svelte:fragment>
+</Popover>