windmill-components 1.87.0 → 1.89.1

package/package/components/apps/components/buttons/AppButton.svelte

@@ -0,0 +1,130 @@
+<script>import { Button } from '../../../common';
+import { getContext } from 'svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import { loadIcon } from '../icon';
+import { twMerge } from 'tailwind-merge';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+export let id;
+export let componentInput;
+export let configuration;
+export let recomputeIds = undefined;
+export let extraQueryParams = {};
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export let noWFull = false;
+export let preclickAction = undefined;
+export let customCss = undefined;
+export let render;
+export let initializing = false;
+export let extraKey = undefined;
+export let controls = undefined;
+const { worldStore, app, componentControl, selectedComponent } = getContext('AppViewerContext');
+let resolvedConfig = initConfig(components['buttoncomponent'].initialData.configuration, configuration);
+$: initializing = resolvedConfig?.label == undefined;
+let outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
+if (controls) {
+    $componentControl[id] = controls;
+}
+let runnableComponent;
+let beforeIconComponent;
+let afterIconComponent;
+$: resolvedConfig.beforeIcon && handleBeforeIcon();
+$: resolvedConfig.afterIcon && handleAfterIcon();
+async function handleBeforeIcon() {
+    if (resolvedConfig.beforeIcon) {
+        beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon);
+    }
+}
+async function handleAfterIcon() {
+    if (resolvedConfig.afterIcon) {
+        afterIconComponent = await loadIcon(resolvedConfig.afterIcon);
+    }
+}
+let errors = {};
+$: errorsMessage = Object.values(errors)
+    .filter((x) => x != '')
+    .join('\n');
+let runnableWrapper;
+async function handleClick(event) {
+    event?.stopPropagation();
+    event?.preventDefault();
+    $selectedComponent = [id];
+    if (preclickAction) {
+        await preclickAction();
+    }
+    if (!runnableComponent) {
+        runnableWrapper.onSuccess();
+    }
+    else {
+        await runnableComponent?.runComponent();
+    }
+}
+let loading = false;
+</script>
+
+{#each Object.keys(components['buttoncomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{extraKey}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+<!-- gotoNewTab={resolvedConfig.onSuccess.selected == 'goto'} -->
+
+<RunnableWrapper
+	bind:this={runnableWrapper}
+	{recomputeIds}
+	bind:runnableComponent
+	bind:loading
+	{componentInput}
+	doOnSuccess={resolvedConfig.onSuccess}
+	{id}
+	{extraQueryParams}
+	autoRefresh={false}
+	{render}
+	{outputs}
+	{extraKey}
+	refreshOnStart={resolvedConfig.triggerOnAppLoad}
+>
+	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
+		{#if errorsMessage}
+			<div class="text-red-500 text-xs">{errorsMessage}</div>
+		{/if}
+		<Button
+			on:pointerdown={(e) => e.stopPropagation()}
+			btnClasses={twMerge(
+				$app.css?.['buttoncomponent']?.['button']?.class,
+				customCss?.button?.class,
+				resolvedConfig.fillContainer ? 'w-full h-full' : ''
+			)}
+			wrapperClasses={resolvedConfig.fillContainer ? 'w-full h-full' : ''}
+			style={[$app.css?.['buttoncomponent']?.['button']?.style, customCss?.button?.style].join(';')}
+			disabled={resolvedConfig.disabled}
+			on:click={handleClick}
+			size={resolvedConfig.size}
+			color={resolvedConfig.color}
+			{loading}
+		>
+			<span class="truncate inline-flex gap-2 items-center">
+				{#if resolvedConfig.beforeIcon && beforeIconComponent}
+					<svelte:component this={beforeIconComponent} size={14} />
+				{/if}
+				{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
+					<div>{resolvedConfig.label}</div>
+				{/if}
+				{#if resolvedConfig.afterIcon && afterIconComponent}
+					<svelte:component this={afterIconComponent} size={14} />
+				{/if}
+			</span>
+		</Button>
+	</AlignWrapper>
+</RunnableWrapper>

package/package/components/apps/components/buttons/AppButton.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        configuration: RichConfigurations;
+        recomputeIds?: string[] | undefined;
+        extraQueryParams?: Record<string, any> | undefined;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        noWFull?: boolean | undefined;
+        preclickAction?: (() => Promise<void>) | undefined;
+        customCss?: ComponentCustomCSS<'buttoncomponent'> | undefined;
+        render: boolean;
+        initializing?: boolean | undefined;
+        extraKey?: string | undefined;
+        controls?: {
+            left: () => boolean;
+            right: () => boolean | string;
+        } | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppButtonProps = typeof __propDef.props;
+export type AppButtonEvents = typeof __propDef.events;
+export type AppButtonSlots = typeof __propDef.slots;
+export default class AppButton extends SvelteComponentTyped<AppButtonProps, AppButtonEvents, AppButtonSlots> {
+}
+export {};

package/package/components/apps/components/buttons/AppForm.svelte

@@ -0,0 +1,98 @@
+<script>import { Button } from '../../../common';
+import { faUser } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import { Icon } from 'svelte-awesome';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components } from '../../editor/component';
+import { concatCustomCss } from '../../utils';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+export let id;
+export let componentInput;
+export let configuration;
+export let recomputeIds = undefined;
+export let extraQueryParams = {};
+export let horizontalAlignment = undefined;
+export let customCss = undefined;
+export let render;
+export const staticOutputs = ['loading', 'result'];
+const { app, worldStore, stateId } = getContext('AppViewerContext');
+let outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
+let resolvedConfig = initConfig(components['formcomponent'].initialData.configuration, configuration);
+let runnableComponent;
+let isLoading = false;
+$: noInputs =
+    $stateId != undefined &&
+        (componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0);
+$: css = concatCustomCss($app.css?.formcomponent, customCss);
+let loading = false;
+</script>
+
+{#each Object.keys(components['formcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+<RunnableWrapper
+	{recomputeIds}
+	{render}
+	bind:runnableComponent
+	bind:loading
+	{componentInput}
+	{id}
+	doOnSuccess={resolvedConfig.onSuccess}
+	{extraQueryParams}
+	autoRefresh={false}
+	forceSchemaDisplay={true}
+	runnableClass="!block"
+	runnableStyle={css?.container?.style}
+	{outputs}
+>
+	<AlignWrapper {horizontalAlignment}>
+		<div
+			class="flex flex-col gap-2 px-4 w-full {css?.container?.class ?? ''}"
+			style={css?.container?.style ?? ''}
+		>
+			<div>
+				{#if noInputs}
+					<div class="text-gray-600 italic text-sm my-4">
+						Run forms are associated with a runnable that has user inputs.
+						<br />
+						Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
+						<strong>
+							User Input
+							<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
+						</strong>
+					</div>
+				{/if}
+			</div>
+			<div class="flex justify-end">
+				{#if !noInputs}
+					<Button
+						loading={isLoading}
+						btnClasses="my-1 {css?.button?.class ?? ''}"
+						style={css?.button?.style ?? ''}
+						on:pointerdown={(e) => {
+							e?.stopPropagation()
+						}}
+						on:click={() => {
+							runnableComponent?.runComponent()
+						}}
+						size={resolvedConfig.size}
+						color={resolvedConfig.color}
+					>
+						{resolvedConfig.label}
+					</Button>
+				{/if}
+			</div>
+		</div>
+	</AlignWrapper>
+</RunnableWrapper>

package/package/components/apps/components/buttons/AppForm.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        configuration: RichConfigurations;
+        recomputeIds?: string[] | undefined;
+        extraQueryParams?: Record<string, any> | undefined;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        customCss?: ComponentCustomCSS<'formcomponent'> | undefined;
+        render: boolean;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppFormProps = typeof __propDef.props;
+export type AppFormEvents = typeof __propDef.events;
+export type AppFormSlots = typeof __propDef.slots;
+export default class AppForm extends SvelteComponentTyped<AppFormProps, AppFormEvents, AppFormSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/package/components/apps/components/buttons/AppFormButton.svelte

@@ -0,0 +1,125 @@
+<script>import { Button } from '../../../common';
+import { faUser } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import { Icon } from 'svelte-awesome';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import { concatCustomCss } from '../../utils';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import AlwaysMountedModal, { getModal } from '../../../common/modal/AlwaysMountedModal.svelte';
+export let id;
+export let componentInput;
+export let configuration;
+export let recomputeIds = undefined;
+export let extraQueryParams = {};
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore } = getContext('AppViewerContext');
+let outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
+let resolvedConfig = initConfig(components['formbuttoncomponent'].initialData.configuration, configuration);
+let runnableComponent;
+let errors = {};
+$: errorsMessage = Object.values(errors)
+    .filter((x) => x != '')
+    .join('\n');
+$: noInputs =
+    componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0;
+$: if (outputs?.loading != undefined) {
+    outputs.loading.set(false, true);
+}
+$: css = concatCustomCss($app?.css?.formbuttoncomponent, customCss);
+let runnableWrapper;
+let loading = false;
+</script>
+
+{#each Object.keys(components['formbuttoncomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+<AlwaysMountedModal
+	title={resolvedConfig.label ?? ''}
+	class={css?.popup?.class}
+	style={css?.popup?.style}
+>
+	<RunnableWrapper
+		bind:this={runnableWrapper}
+		{recomputeIds}
+		{render}
+		bind:runnableComponent
+		{componentInput}
+		{id}
+		{extraQueryParams}
+		autoRefresh={false}
+		forceSchemaDisplay={true}
+		runnableClass="!block"
+		{outputs}
+		doOnSuccess={resolvedConfig.onSuccess}
+	>
+		<div class="flex flex-col gap-2 px-4 w-full">
+			<div>
+				{#if noInputs}
+					<div class="text-gray-600 italic text-sm my-4">
+						Run forms are associated with a runnable that has user inputs.
+						<br />
+						Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
+						<strong>
+							User Input
+							<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
+						</strong>
+					</div>
+				{/if}
+			</div>
+			<div class="flex justify-end">
+				<Button
+					{loading}
+					btnClasses="my-1"
+					on:pointerdown={(e) => {
+						e?.stopPropagation()
+					}}
+					on:click={async () => {
+						if (!runnableComponent) {
+							runnableWrapper.onSuccess()
+						} else {
+							await runnableComponent?.runComponent()
+						}
+						getModal().close()
+					}}
+					size="xs"
+					color="dark"
+				>
+					Submit
+				</Button>
+			</div>
+		</div>
+	</RunnableWrapper>
+</AlwaysMountedModal>
+
+<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+	{#if errorsMessage}
+		<div class="text-red-500 text-xs">{errorsMessage}</div>
+	{/if}
+	<Button
+		disabled={resolvedConfig.disabled ?? false}
+		size={resolvedConfig.size ?? 'md'}
+		color={resolvedConfig.color}
+		btnClasses={css?.button?.class ?? ''}
+		style={css?.button?.style ?? ''}
+		on:click={(e) => {
+			getModal().open()
+		}}
+	>
+		{resolvedConfig.label}
+	</Button>
+</AlignWrapper>

package/package/components/apps/components/buttons/AppFormButton.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        configuration: RichConfigurations;
+        recomputeIds?: string[] | undefined;
+        extraQueryParams?: Record<string, any> | undefined;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        customCss?: ComponentCustomCSS<'formbuttoncomponent'> | undefined;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppFormButtonProps = typeof __propDef.props;
+export type AppFormButtonEvents = typeof __propDef.events;
+export type AppFormButtonSlots = typeof __propDef.slots;
+export default class AppFormButton extends SvelteComponentTyped<AppFormButtonProps, AppFormButtonEvents, AppFormButtonSlots> {
+}
+export {};

package/package/components/apps/components/buttons/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AppButton } from './AppButton.svelte';
+export { default as AppForm } from './AppForm.svelte';
+export { default as AppFormButton } from './AppFormButton.svelte';

package/package/components/apps/components/buttons/index.js

@@ -0,0 +1,3 @@
+export { default as AppButton } from './AppButton.svelte';
+export { default as AppForm } from './AppForm.svelte';
+export { default as AppFormButton } from './AppFormButton.svelte';

package/package/components/apps/components/display/AppBarChart.svelte

@@ -0,0 +1,75 @@
+<script>import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, LineElement, PointElement, Title, Tooltip } from 'chart.js';
+import { getContext } from 'svelte';
+import { Bar, Line } from 'svelte-chartjs';
+import { initOutput } from '../../editor/appUtils';
+import { concatCustomCss } from '../../utils';
+import InputValue from '../helpers/InputValue.svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+export let id;
+export let componentInput;
+export let configuration;
+export let initializing = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore } = getContext('AppViewerContext');
+let outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
+ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, BarElement);
+let result = undefined;
+let theme = 'theme1';
+let lineChart = false;
+$: backgroundColor = {
+    theme1: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
+    // blue theme
+    theme2: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b'],
+    // red theme
+    theme3: ['#e74a3b', '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e']
+}[theme];
+const lineOptions = {
+    responsive: true,
+    animation: false,
+    maintainAspectRatio: false,
+    plugins: {
+        legend: {
+            display: false
+        }
+    }
+};
+const barOptions = {
+    responsive: true,
+    animation: false,
+    maintainAspectRatio: false,
+    plugins: {
+        legend: {
+            display: false
+        }
+    }
+};
+$: data = {
+    labels: result?.labels ?? [],
+    datasets: [
+        {
+            data: result?.data ?? [],
+            backgroundColor
+        }
+    ]
+};
+$: css = concatCustomCss($app.css?.barchartcomponent, customCss);
+</script>
+
+<InputValue {id} input={configuration.theme} bind:value={theme} />
+<InputValue {id} input={configuration.line} bind:value={lineChart} />
+
+<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
+	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
+		{#if result}
+			{#if lineChart}
+				<Line {data} options={lineOptions} />
+			{:else}
+				<Bar {data} options={barOptions} />
+			{/if}
+		{/if}
+	</div>
+</RunnableWrapper>

package/package/components/apps/components/display/AppBarChart.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        configuration: RichConfigurations;
+        initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'barchartcomponent'> | undefined;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppBarChartProps = typeof __propDef.props;
+export type AppBarChartEvents = typeof __propDef.events;
+export type AppBarChartSlots = typeof __propDef.slots;
+export default class AppBarChart extends SvelteComponentTyped<AppBarChartProps, AppBarChartEvents, AppBarChartSlots> {
+}
+export {};

package/package/components/apps/components/display/AppDisplayComponent.svelte

@@ -0,0 +1,46 @@
+<script>import DisplayResult from '../../../DisplayResult.svelte';
+import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { initOutput } from '../../editor/appUtils';
+import { IS_APP_PUBLIC_CONTEXT_KEY } from '../../types';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+export let id;
+export let componentInput;
+export let initializing = undefined;
+export let customCss = undefined;
+export let render;
+const requireHtmlApproval = getContext(IS_APP_PUBLIC_CONTEXT_KEY);
+const { app, worldStore } = getContext('AppViewerContext');
+let result = undefined;
+const outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
+</script>
+
+<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
+	<div class="flex flex-col w-full h-full">
+		<div
+			class={twMerge(
+				'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
+				$app.css?.['displaycomponent']?.['header']?.class,
+				customCss?.header?.class
+			)}
+		>
+			Results
+		</div>
+		<div
+			style={twMerge(
+				$app.css?.['displaycomponent']?.['container']?.style,
+				customCss?.container?.style
+			)}
+			class={twMerge(
+				'p-2 grow overflow-auto',
+				$app.css?.['displaycomponent']?.['container']?.class,
+				customCss?.container?.class
+			)}
+		>
+			<DisplayResult {result} {requireHtmlApproval} />
+		</div>
+	</div>
+</RunnableWrapper>

package/package/components/apps/components/display/AppDisplayComponent.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import { type ComponentCustomCSS } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'displaycomponent'> | undefined;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppDisplayComponentProps = typeof __propDef.props;
+export type AppDisplayComponentEvents = typeof __propDef.events;
+export type AppDisplayComponentSlots = typeof __propDef.slots;
+export default class AppDisplayComponent extends SvelteComponentTyped<AppDisplayComponentProps, AppDisplayComponentEvents, AppDisplayComponentSlots> {
+}
+export {};

package/package/components/apps/components/display/AppHtml.svelte

@@ -0,0 +1,59 @@
+<script>import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
+import { concatCustomCss } from '../../utils';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+export let id;
+export let componentInput;
+export let initializing = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore, selectedComponent, mode } = getContext('AppViewerContext');
+const outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
+let result = undefined;
+let h = undefined;
+let w = undefined;
+$: css = concatCustomCss($app.css?.htmlcomponent, customCss);
+</script>
+
+<div
+	on:pointerdown={(e) => {
+		e?.preventDefault()
+	}}
+	class="h-full w-full"
+	bind:clientHeight={h}
+	bind:clientWidth={w}
+>
+	{#if $mode == 'dnd'}
+		<button
+			class="absolute bottom-0 left-0 text-xs border px-2 py-0.5 bg-white/80"
+			on:click={() => ($selectedComponent = [id])}>Select</button
+		>
+	{/if}
+
+	<RunnableWrapper
+		{outputs}
+		{render}
+		autoRefresh
+		{componentInput}
+		{id}
+		bind:initializing
+		bind:result
+	>
+		{#key result}
+			<iframe
+				frameborder="0"
+				style="height: {h}px; width: {w}px; {css?.container?.style ?? ''}"
+				class="p-0 {css?.container?.class ?? ''}"
+				title="sandbox"
+				srcdoc={result
+					? '<scr' + `ipt type="application/javascript" src="/tailwind.js"></script>` + result
+					: ''}
+			/>
+		{/key}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<div on:click|stopPropagation class="absolute top-0 h-full w-full" />
+	</RunnableWrapper>
+</div>