windmill-components 1.85.0 → 1.87.0

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

@@ -0,0 +1,161 @@
+<script>import { setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import { buildWorld } from '../rx';
+import { classNames } from '../../../utils';
+import Button from '../../common/button/Button.svelte';
+import { Unlock } from 'lucide-svelte';
+import RecomputeAllComponents from './RecomputeAllComponents.svelte';
+import GridViewer from './GridViewer.svelte';
+import { Component } from './component';
+import { twMerge } from 'tailwind-merge';
+import { columnConfiguration } from '../gridUtils';
+import { HiddenComponent } from '../components';
+import { deepEqual } from 'fast-equals';
+import { dfs } from './appUtils';
+export let app;
+export let appPath;
+export let breakpoint;
+export let policy;
+export let summary;
+export let workspace;
+export let isEditor;
+export let context;
+export let noBackend = false;
+export let isLocked = false;
+const appStore = writable(app);
+const selectedComponent = writable(undefined);
+const mode = writable('preview');
+const connectingInput = writable({
+    opened: false,
+    input: undefined,
+    hoveredComponent: undefined
+});
+const allIdsInPath = writable([]);
+const parentWidth = writable(0);
+setContext('AppViewerContext', {
+    worldStore: buildWorld(context),
+    initialized: writable({ initialized: false, initializedComponents: [] }),
+    app: appStore,
+    summary: writable(summary),
+    selectedComponent,
+    mode,
+    connectingInput,
+    breakpoint,
+    runnableComponents: writable({}),
+    appPath,
+    workspace,
+    onchange: undefined,
+    isEditor,
+    jobs: writable([]),
+    staticExporter: writable({}),
+    noBackend,
+    errorByComponent: writable({}),
+    openDebugRun: writable(undefined),
+    focusedGrid: writable(undefined),
+    stateId: writable(0),
+    parentWidth,
+    state: writable({}),
+    componentControl: writable({}),
+    hoverStore: writable(undefined),
+    allIdsInPath
+});
+let ncontext = { ...context, workspace };
+function hashchange(e) {
+    ncontext.hash = e.newURL.split('#')[1];
+    ncontext = ncontext;
+}
+let previousSelectedIds = undefined;
+$: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
+    previousSelectedIds = $selectedComponent;
+    $allIdsInPath = ($selectedComponent ?? [])
+        .flatMap((id) => dfs(app.grid, id, app.subgrids ?? {}))
+        .filter((x) => x != undefined);
+}
+$: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full ';
+$: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : '';
+</script>
+
+<svelte:window on:hashchange={hashchange} />
+
+<div id="app-editor-top-level-drawer" />
+
+<div class="relative">
+	<div
+		class="{$$props.class} {lockedClasses} h-full
+	w-full {app.fullscreen ? '' : 'max-w-6xl'} mx-auto"
+	>
+		{#if $appStore.grid}
+			<div
+				class={classNames(
+					'mx-auto',
+					width,
+					$appStore?.norefreshbar ? 'invisible h-0 overflow-hidden' : ''
+				)}
+			>
+				<div
+					class="w-full sticky z-[1001] top-0 flex justify-between border-b bg-gray-50 px-4 py-1 items-center gap-4"
+				>
+					<h2 class="truncate">{summary}</h2>
+					<RecomputeAllComponents />
+					<div class="text-2xs text-gray-600">
+						{policy.on_behalf_of ? `on behalf of ${policy.on_behalf_of_email}` : ''}
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		<div
+			style={app.css?.['app']?.['grid']?.style}
+			class={twMerge('px-4 pt-4 pb-2 overflow-visible', app.css?.['app']?.['grid']?.class ?? '')}
+			bind:clientWidth={$parentWidth}
+		>
+			<div>
+				<GridViewer
+					allIdsInPath={$allIdsInPath}
+					items={app.grid}
+					let:dataItem
+					rowHeight={36}
+					cols={columnConfiguration}
+					gap={[4, 2]}
+				>
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<div
+						class={'h-full w-full center-center'}
+						on:pointerdown={() => ($selectedComponent = [dataItem.id])}
+					>
+						<Component render={true} component={dataItem.data} selected={false} locked={true} />
+					</div>
+				</GridViewer>
+			</div>
+		</div>
+	</div>
+
+	{#if isLocked}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<div
+			on:click={() => (isLocked = false)}
+			class="absolute inset-0 center-center bg-black/20 z-50 backdrop-blur-[1px] cursor-pointer"
+		>
+			<Button on:click={() => (isLocked = false)}>
+				Unlock preview
+				<Unlock size={18} class="ml-1" strokeWidth={2.5} />
+			</Button>
+		</div>
+	{/if}
+</div>
+
+{#if app.hiddenInlineScripts}
+	{#each app.hiddenInlineScripts as script, index}
+		{#if script}
+			<HiddenComponent
+				id={`bg_${index}`}
+				inlineScript={script.inlineScript}
+				name={script.name}
+				fields={script.fields}
+				recomputeOnInputChanged={script.recomputeOnInputChanged ?? true}
+				recomputableByRefreshButton={script.autoRefresh ?? false}
+				noBackendValue={script.noBackendValue}
+			/>
+		{/if}
+	{/each}
+{/if}

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

@@ -0,0 +1,129 @@
+<script>import { classNames } from '../../../utils';
+import { Anchor, Bug, Expand, Move, Pen } from 'lucide-svelte';
+import { createEventDispatcher, getContext } from 'svelte';
+import Popover from '../../Popover.svelte';
+import { Alert, Button } from '../../common';
+import { twMerge } from 'tailwind-merge';
+import { getErrorFromLatestResult } from './appUtils';
+export let component;
+export let selected;
+export let locked = false;
+export let hover = false;
+export let shouldHideActions = false;
+export let hasInlineEditor = false;
+export let inlineEditorOpened = false;
+const dispatch = createEventDispatcher();
+const { errorByComponent, openDebugRun, jobs, connectingInput } = getContext('AppViewerContext');
+$: error = getErrorFromLatestResult(component.id, $errorByComponent, $jobs);
+function openDebugRuns() {
+    if ($openDebugRun) {
+        $openDebugRun(component.id);
+    }
+}
+</script>
+
+{#if selected || hover}
+	<span
+		on:mousedown|stopPropagation|capture
+		draggable="false"
+		title={`Id: ${component.id}`}
+		class={twMerge(
+			'px-2 text-2xs font-semibold w-fit absolute shadow -top-[9px] -left-[8px] border rounded-sm z-50 cursor-move',
+			selected
+				? 'bg-indigo-500/90 border-indigo-600 text-white'
+				: $connectingInput.opened
+				? 'bg-red-500/90 border-red-600 text-white'
+				: 'bg-blue-500/90 border-blue-600 text-white'
+		)}
+	>
+		{component.id}
+	</span>
+{/if}
+
+{#if selected && !shouldHideActions}
+	<div class="top-[-9px] -right-[8px] flex flex-row absolute gap-1.5 z-50">
+		{#if hasInlineEditor}
+			<button
+				title="Expand"
+				class={classNames(
+					'px-1 text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
+					'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
+				)}
+				on:click={() => dispatch('triggerInlineEditor')}
+				on:pointerdown|stopPropagation
+			>
+				{#if inlineEditorOpened}
+					<Pen aria-label="Unlock position" size={14} class="text-orange-500" />
+				{:else}
+					<Pen aria-label="Lock position" size={14} />
+				{/if}
+			</button>
+		{/if}
+		<button
+			title="Expand"
+			class={classNames(
+				'px-1 text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
+				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
+			)}
+			on:click={() => dispatch('expand')}
+			on:pointerdown|stopPropagation
+		>
+			<Expand aria-label="Expand position" size={14} />
+		</button>
+		<button
+			title="Lock Position"
+			class={classNames(
+				'px-1 text-2xs py-0.5 font-bold w-fit border  rounded-sm cursor-pointer',
+				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
+			)}
+			on:click={() => dispatch('lock')}
+			on:pointerdown|stopPropagation
+		>
+			{#if locked}
+				<Anchor aria-label="Unlock position" size={14} class="text-orange-500" />
+			{:else}
+				<Anchor aria-label="Lock position" size={14} />
+			{/if}
+		</button>
+		<span
+			draggable="false"
+			title="Move"
+			on:mousedown|stopPropagation|capture
+			class={classNames(
+				'px-1 text-2xs py-0.5 font-bold w-fit border cursor-move rounded-sm',
+				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
+			)}
+		>
+			<Move size={14} />
+		</span>
+	</div>
+{/if}
+
+{#if error}
+	{@const json = JSON.parse(JSON.stringify(error))}
+	<span
+		title="Error"
+		class={classNames(
+			'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',
+			'bg-red-100/80'
+		)}
+	>
+		<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
+			<Bug size={14} />
+			<span slot="text">
+				<div class="bg-white">
+					<Alert type="error" title={`${json?.name}: ${json?.message}`}>
+						<div class="flex flex-col gap-2">
+							<div>
+								<pre class=" whitespace-pre-wrap text-gray-900 bg-white border w-full p-4 text-xs">
+									{json?.stack ?? ''}	
+								</pre>
+							</div>
+							<Button color="red" variant="border" on:click={openDebugRuns}>Open Debug Runs</Button>
+						</div>
+					</Alert>
+				</div>
+			</span>
+		</Popover>
+	</span>
+{/if}

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

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppComponent } from './component';
+declare const __propDef: {
+    props: {
+        component: AppComponent;
+        selected: boolean;
+        locked?: boolean | undefined;
+        hover?: boolean | undefined;
+        shouldHideActions?: boolean | undefined;
+        hasInlineEditor?: boolean | undefined;
+        inlineEditorOpened?: boolean | undefined;
+    };
+    events: {
+        mousedown: MouseEvent;
+        pointerdown: PointerEvent;
+        triggerInlineEditor: CustomEvent<any>;
+        expand: CustomEvent<any>;
+        lock: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComponentHeaderProps = typeof __propDef.props;
+export type ComponentHeaderEvents = typeof __propDef.events;
+export type ComponentHeaderSlots = typeof __propDef.slots;
+export default class ComponentHeader extends SvelteComponentTyped<ComponentHeaderProps, ComponentHeaderEvents, ComponentHeaderSlots> {
+}
+export {};

package/dist/components/apps/editor/GridEditor.svelte

@@ -0,0 +1,127 @@
+<script>import { getContext } from 'svelte';
+import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
+import { twMerge } from 'tailwind-merge';
+import RecomputeAllComponents from './RecomputeAllComponents.svelte';
+import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
+import Component from './component/Component.svelte';
+import { push } from '../../../history';
+import { dfs, expandGriditem, findGridItem } from './appUtils';
+import Grid from '../svelte-grid/Grid.svelte';
+import { deepEqual } from 'fast-equals';
+import ComponentWrapper from './component/ComponentWrapper.svelte';
+import { classNames } from '../../../utils';
+export let policy;
+const { selectedComponent, app, mode, connectingInput, summary, focusedGrid, parentWidth, breakpoint, allIdsInPath } = getContext('AppViewerContext');
+const { history } = getContext('AppEditorContext');
+let previousSelectedIds = undefined;
+$: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
+    previousSelectedIds = $selectedComponent;
+    $allIdsInPath = ($selectedComponent ?? [])
+        .flatMap((id) => dfs($app.grid, id, $app.subgrids ?? {}))
+        .filter((x) => x != undefined);
+}
+</script>
+
+<div class="relative w-full z-20 overflow-visible">
+	<div
+		class="w-full sticky top-0 flex justify-between border-b {$connectingInput?.opened
+			? ''
+			: 'bg-gray-50 '} px-4 py-1 items-center gap-4"
+		style="z-index: 1000;"
+	>
+		<h2 class="truncate">{$summary}</h2>
+		{#if !$connectingInput.opened}
+			<RecomputeAllComponents />
+		{/if}
+		<div class="flex text-2xs text-gray-600 gap-1 items-center">
+			<div class="py-2 pr-2 text-gray-600 flex gap-2 items-center">
+				Hide bar on view
+				<input class="windmillapp" type="checkbox" bind:checked={$app.norefreshbar} />
+			</div>
+			<div>
+				{policy.on_behalf_of ? `on behalf of ${policy.on_behalf_of_email}` : ''}
+			</div>
+		</div>
+	</div>
+
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div
+		style={$app.css?.['app']?.['grid']?.style}
+		class={twMerge('px-4 pt-4 pb-2 overflow-visible', $app.css?.['app']?.['grid']?.class ?? '')}
+		on:pointerdown={() => {
+			$selectedComponent = undefined
+			$focusedGrid = undefined
+		}}
+		bind:clientWidth={$parentWidth}
+	>
+		<div class={!$focusedGrid && $mode !== 'preview' ? 'border-gray-400 border border-dashed' : ''}>
+			<Grid
+				allIdsInPath={$allIdsInPath}
+				selectedIds={$selectedComponent}
+				items={$app.grid}
+				on:redraw={(e) => {
+					push(history, $app)
+					$app.grid = e.detail
+				}}
+				let:dataItem
+				rowHeight={36}
+				cols={columnConfiguration}
+				fastStart={true}
+				gap={[4, 2]}
+			>
+				<ComponentWrapper
+					id={dataItem.id}
+					type={dataItem.data.type}
+					class={classNames(
+						'h-full w-full center-center',
+						Boolean($selectedComponent?.includes(dataItem.id)) ? 'active-grid-item' : ''
+					)}
+				>
+					<Component
+						render={true}
+						component={dataItem.data}
+						selected={Boolean($selectedComponent?.includes(dataItem.id))}
+						locked={isFixed(dataItem)}
+						on:lock={() => {
+							const gridItem = findGridItem($app, dataItem.id)
+							if (gridItem) {
+								toggleFixed(gridItem)
+							}
+							$app = $app
+						}}
+						on:expand={() => {
+							push(history, $app)
+							$selectedComponent = [dataItem.id]
+							expandGriditem($app.grid, dataItem.id, $breakpoint)
+							$app = $app
+						}}
+					/>
+				</ComponentWrapper>
+			</Grid>
+		</div>
+	</div>
+</div>
+
+{#if $app.hiddenInlineScripts}
+	{#each $app.hiddenInlineScripts as script, index}
+		{#if script}
+			<HiddenComponent
+				id={`bg_${index}`}
+				inlineScript={script.inlineScript}
+				name={script.name}
+				fields={script.fields}
+				recomputeOnInputChanged={script.recomputeOnInputChanged ?? true}
+				recomputableByRefreshButton={script.autoRefresh ?? false}
+			/>
+		{/if}
+	{/each}
+{/if}
+
+<style global>
+	:global(.svlt-grid-shadow) {
+		/* Back shadow */
+		background: #93c4fdd0 !important;
+	}
+	:global(.svlt-grid-active) {
+		opacity: 1 !important;
+	}</style>

package/dist/components/apps/editor/RecomputeAllComponents.svelte

@@ -0,0 +1,107 @@
+<script>import Dropdown from '../../Dropdown.svelte';
+import { ChevronDown, RefreshCw } from 'lucide-svelte';
+import { getContext, onMount } from 'svelte';
+import Button from '../../common/button/Button.svelte';
+import { allItems } from '../utils';
+const { runnableComponents, app, initialized } = getContext('AppViewerContext');
+let loading = false;
+let timeout = undefined;
+let interval = undefined;
+let shouldRefresh = false;
+let firstLoad = false;
+$: !firstLoad &&
+    $initialized.initializedComponents?.length ==
+        allItems($app.grid, $app.subgrids).length + $app.hiddenInlineScripts.length &&
+    refresh();
+$: componentNumber = Object.values($runnableComponents).filter((x) => x.autoRefresh).length;
+function onClick(stopAfterClear = true) {
+    if (timeout) {
+        clearInterval(timeout);
+        timeout = undefined;
+        shouldRefresh = false;
+        if (stopAfterClear)
+            return;
+    }
+    refresh();
+    if (interval) {
+        shouldRefresh = true;
+        timeout = setInterval(refresh, interval);
+    }
+}
+function setInter(inter) {
+    interval = inter;
+    onClick(!inter);
+}
+function refresh() {
+    let isFirstLoad = false;
+    if (!firstLoad) {
+        $initialized.initialized = true;
+        firstLoad = true;
+        isFirstLoad = true;
+    }
+    loading = true;
+    Promise.all(Object.keys($runnableComponents).map((id) => {
+        if (!$runnableComponents?.[id]?.autoRefresh &&
+            (!isFirstLoad || !$runnableComponents?.[id]?.refreshOnStart)) {
+            return;
+        }
+        return $runnableComponents?.[id]?.cb?.();
+    })).finally(() => {
+        loading = false;
+    });
+}
+function visChange() {
+    if (document.visibilityState === 'hidden') {
+        if (timeout) {
+            clearInterval(timeout);
+            timeout = undefined;
+        }
+    }
+    else if (shouldRefresh) {
+        timeout = setInterval(refresh, interval);
+    }
+}
+onMount(() => {
+    document.addEventListener('visibilitychange', visChange);
+    // setTimeout(() => refresh(), 1000)
+    return () => {
+        document.removeEventListener('visibilitychange', visChange);
+        if (timeout)
+            clearInterval(timeout);
+    };
+});
+</script>
+
+<div class="flex items-center">
+	<Button
+		disabled={componentNumber == 0}
+		on:click={() => onClick()}
+		color={timeout ? 'blue' : 'light'}
+		variant={timeout ? 'contained' : 'border'}
+		size="xs"
+		btnClasses="!rounded-r-none {timeout ? '!border !border-blue-500' : ''}"
+		title="Refresh {componentNumber} component{componentNumber > 1 ? 's' : ''} {interval
+			? `every ${interval / 1000} seconds`
+			: 'once'}"
+	>
+		<RefreshCw class={loading ? 'animate-spin' : ''} size={16} /> &nbsp;({componentNumber})
+	</Button>
+	<Dropdown
+		btnClasses="!rounded-l-none !border-l-0 min-w-[4rem] !px-2"
+		color={timeout ? 'blue' : 'light'}
+		variant="border"
+		dropdownItems={[
+			{
+				displayName: 'Once',
+				action: () => setInter(undefined)
+			},
+			...[1, 2, 3, 4, 5, 6].map((i) => ({
+				displayName: `Every ${i * 5} seconds`,
+				action: () => setInter(i * 5000)
+			}))
+		]}
+	>
+		<span class="grow text center">{interval ? `${interval / 1000}s` : 'once'}</span>
+		<ChevronDown class="ml-0.5" size={14} />
+	</Dropdown>
+</div>

package/dist/components/apps/editor/SettingsPanel.svelte

@@ -0,0 +1,119 @@
+<script>import Toggle from '../../Toggle.svelte';
+import Tooltip from '../../Tooltip.svelte';
+import { getContext } from 'svelte';
+import { allItems } from '../utils';
+import { findGridItem } from './appUtils';
+import PanelSection from './settingsPanel/common/PanelSection.svelte';
+import ComponentPanel from './settingsPanel/ComponentPanel.svelte';
+import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
+import BackgroundScriptTriggerList from './settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte';
+const { selectedComponent, app, stateId } = getContext('AppViewerContext');
+$: hiddenInlineScript = $app?.hiddenInlineScripts
+    ?.map((x, i) => ({ script: x, index: i }))
+    .find(({ script, index }) => $selectedComponent?.includes(`bg_${index}`));
+$: componentSettings = findComponentSettings($app, $selectedComponent?.[0]);
+$: tableActionSettings = findTableActionSettings($app, $selectedComponent?.[0]);
+function findTableActionSettings(app, id) {
+    return allItems(app.grid, app.subgrids)
+        .map((x) => {
+        if (x?.data?.type === 'tablecomponent') {
+            if (x?.data?.actionButtons) {
+                const tableAction = x.data.actionButtons.find((x) => x.id === id);
+                if (tableAction) {
+                    return { item: { data: tableAction, id: tableAction.id }, parent: x.data.id };
+                }
+            }
+        }
+    })
+        .find((x) => x);
+}
+function findComponentSettings(app, id) {
+    if (!id)
+        return undefined;
+    if (app?.grid) {
+        const gridItem = app.grid.find((x) => x.data?.id === id);
+        if (gridItem) {
+            return { item: gridItem, parent: undefined };
+        }
+    }
+    if (app?.subgrids) {
+        for (const key of Object.keys(app.subgrids ?? {})) {
+            const gridItem = app.subgrids[key].find((x) => x.data?.id === id);
+            if (gridItem) {
+                return { item: gridItem, parent: key };
+            }
+        }
+    }
+    return undefined;
+}
+</script>
+
+{#if componentSettings}
+	{#key componentSettings?.item?.id}
+		<ComponentPanel bind:componentSettings />
+	{/key}
+{:else if tableActionSettings}
+	{#key tableActionSettings?.item?.data?.id}
+		<ComponentPanel
+			noGrid
+			rowColumns
+			bind:componentSettings={tableActionSettings}
+			duplicateMoveAllowed={false}
+			onDelete={() => {
+				if (tableActionSettings) {
+					const parent = findGridItem($app, tableActionSettings.parent)
+					if (!parent) return
+
+					if (parent.data.type === 'tablecomponent') {
+						parent.data.actionButtons = parent.data.actionButtons.filter(
+							(x) => x.id !== tableActionSettings?.item.id
+						)
+					}
+				}
+			}}
+		/>
+	{/key}
+{:else if hiddenInlineScript}
+	<div class="min-h-full flex flex-col divide-y">
+		<PanelSection title={`Configuration`}>
+			<div class="flex items-center">
+				<Toggle
+					bind:checked={hiddenInlineScript.script.autoRefresh}
+					options={{ right: 'Run on start and app refresh' }}
+				/>
+				<Tooltip>
+					You may want to disable this so that the background script is only triggered by changes to
+					other values or triggered by another computation on a button (See 'Recompute Others')
+				</Tooltip>
+			</div>
+		</PanelSection>
+
+		<div class="p-2">
+			{#if hiddenInlineScript.script.inlineScript}
+				<BackgroundScriptTriggerList
+					fields={hiddenInlineScript.script.fields}
+					autoRefresh={hiddenInlineScript.script.autoRefresh}
+					id={`bg_${hiddenInlineScript.index}`}
+					bind:recomputeOnInputChanged={hiddenInlineScript.script.recomputeOnInputChanged}
+					bind:doNotRecomputeOnInputChanged={hiddenInlineScript.script.doNotRecomputeOnInputChanged}
+					bind:inlineScript={hiddenInlineScript.script.inlineScript}
+				/>
+			{:else}
+				<span class="text-gray-600 text-xs">No script defined</span>
+			{/if}
+		</div>
+		{#if Object.keys(hiddenInlineScript.script.fields).length > 0}
+			<PanelSection title={`Inputs`}>
+				{#key $stateId}
+					<InputsSpecsEditor
+						id={`bg_${hiddenInlineScript.index}`}
+						shouldCapitalize={false}
+						bind:inputSpecs={hiddenInlineScript.script.fields}
+						userInputEnabled={false}
+					/>
+				{/key}
+			</PanelSection>
+		{/if}
+		<div class="grow shrink" />
+	</div>
+{/if}