windmill-components 1.383.8 → 1.389.1

package/package/components/apps/editor/RunnableJobPanel.svelte

@@ -1,14 +1,13 @@
-<script>import DisplayResult from '../../DisplayResult.svelte';
-import LogViewer from '../../LogViewer.svelte';
-import { getContext } from 'svelte';
-import { Splitpanes, Pane } from 'svelte-splitpanes';
+<script>import { getContext } from 'svelte';
 import TestJobLoader from '../../TestJobLoader.svelte';
-import { Loader2 } from 'lucide-svelte';
+import RunnalbeJobPanelInner from './RunnalbeJobPanelInner.svelte';
+export let float = true;
+export let hidden = false;
+export let testJob = undefined;
+export let jobToWatch = undefined;
 const { runnableJobEditorPanel, selectedComponentInEditor } = getContext('AppEditorContext');
-let testJob = undefined;
 let testIsLoading = false;
 let testJobLoader;
-let jobToWatch = undefined;
 $: $runnableJobEditorPanel.focused &&
     $selectedComponentInEditor &&
     $runnableJobEditorPanel.jobs &&
@@ -39,57 +38,25 @@ let resultDrawerOpen = false;
 
 <TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job={testJob} />
 
-{#if ($runnableJobEditorPanel.focused && $selectedComponentInEditor) || logDrawerOpen || resultDrawerOpen}
+{#if ($runnableJobEditorPanel.focused && $selectedComponentInEditor) || logDrawerOpen || resultDrawerOpen || !float}
 	{@const frontendJob = $runnableJobEditorPanel?.frontendJobs[$selectedComponentInEditor ?? '']}
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<div
-		class="absolute z-[100] top-0 right-0 border-t h-full"
-		style="width: {$runnableJobEditorPanel.width}px; transform: translateX({$runnableJobEditorPanel.width}px);"
-	>
-		<Splitpanes horizontal>
-			<Pane size={frontendJob ? 30 : 50} minSize={10}>
-				{#if frontendJob}
-					<div class="p-2 bg-surface-secondary h-full w-full">
-						<div class="text-sm text-tertiary pb-4">Frontend Job</div>
-						<div class="text-2xs text-tertiary">Check your browser console to see the logs</div>
-					</div>
-				{:else}
-					<LogViewer
-						bind:drawerOpen={logDrawerOpen}
-						small
-						jobId={testJob?.id}
-						duration={testJob?.['duration_ms']}
-						mem={testJob?.['mem_peak']}
-						content={testJob?.logs}
-						isLoading={testIsLoading && testJob?.['running'] == false}
-						tag={testJob?.tag}
-					/>
-				{/if}
-			</Pane>
-			<Pane size={frontendJob ? 70 : 50} minSize={10} class="text-sm text-tertiary">
-				{#if frontendJob}
-					<div class="break-words relative h-full px-1">
-						<DisplayResult bind:drawerOpen={resultDrawerOpen} result={frontendJob} />
-					</div>
-				{:else if testJob != undefined && 'result' in testJob && testJob.result != undefined}
-					<div class="break-words relative h-full px-1">
-						<DisplayResult
-							bind:drawerOpen={resultDrawerOpen}
-							workspaceId={testJob?.workspace_id}
-							jobId={testJob?.id}
-							result={testJob.result}
-						/></div
-					>
-				{:else}
-					<div class="px-1 pt-1">
-						{#if testIsLoading}
-							<Loader2 class="animate-spin" />
-						{:else}
-							Test to see the result here
-						{/if}
-					</div>
-				{/if}
-			</Pane>
-		</Splitpanes>
-	</div>
+	{#if float}
+		<div
+			class="absolute z-[100] top-0 right-0 border-t h-full"
+			style="width: {$runnableJobEditorPanel.width}px; transform: translateX({$runnableJobEditorPanel.width}px);"
+		>
+			<RunnalbeJobPanelInner {frontendJob} {testJob} />
+		</div>
+	{:else}
+		<div class="flex flex-col w-full">
+			{#if $selectedComponentInEditor}
+				<RunnalbeJobPanelInner {frontendJob} {testJob} />
+			{:else if !hidden}
+				<div class="text-sm text-secondary text-center py-8 px-2 border-l h-full">
+					Logs and results will be displayed here
+				</div>
+			{/if}
+		</div>
+	{/if}
 {/if}

package/package/components/apps/editor/RunnableJobPanel.svelte.d.ts

@@ -1,6 +1,15 @@
 import { SvelteComponent } from "svelte";
+import type { Job } from '../../../gen';
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        float?: boolean | undefined;
+        hidden?: boolean | undefined;
+        testJob?: Job | undefined;
+        jobToWatch?: {
+            componentId: string;
+            job: string;
+        } | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/apps/editor/RunnalbeJobPanelInner.svelte

@@ -0,0 +1,56 @@
+<script>import DisplayResult from '../../DisplayResult.svelte';
+import LogViewer from '../../LogViewer.svelte';
+import { Splitpanes, Pane } from 'svelte-splitpanes';
+import { Loader2 } from 'lucide-svelte';
+export let frontendJob = false;
+export let testJob = undefined;
+let testIsLoading = false;
+let logDrawerOpen = false;
+let resultDrawerOpen = false;
+</script>
+
+<Splitpanes horizontal>
+	<Pane size={frontendJob ? 30 : 50} minSize={10}>
+		{#if frontendJob}
+			<div class="p-2 bg-surface-secondary h-full w-full">
+				<div class="text-sm text-tertiary pb-4">Frontend Job</div>
+				<div class="text-2xs text-tertiary">Check your browser console to see the logs</div>
+			</div>
+		{:else}
+			<LogViewer
+				bind:drawerOpen={logDrawerOpen}
+				small
+				jobId={testJob?.id}
+				duration={testJob?.['duration_ms']}
+				mem={testJob?.['mem_peak']}
+				content={testJob?.logs}
+				isLoading={testIsLoading && testJob?.['running'] == false}
+				tag={testJob?.tag}
+			/>
+		{/if}
+	</Pane>
+	<Pane size={frontendJob ? 70 : 50} minSize={10} class="text-sm text-tertiary">
+		{#if frontendJob}
+			<div class="break-words relative h-full px-1">
+				<DisplayResult bind:drawerOpen={resultDrawerOpen} result={frontendJob} />
+			</div>
+		{:else if testJob != undefined && 'result' in testJob && testJob.result != undefined}
+			<div class="break-words relative h-full px-1">
+				<DisplayResult
+					bind:drawerOpen={resultDrawerOpen}
+					workspaceId={testJob?.workspace_id}
+					jobId={testJob?.id}
+					result={testJob.result}
+				/></div
+			>
+		{:else}
+			<div class="px-1 pt-1">
+				{#if testIsLoading}
+					<Loader2 class="animate-spin" />
+				{:else}
+					Test to see the result here
+				{/if}
+			</div>
+		{/if}
+	</Pane>
+</Splitpanes>

package/package/components/apps/editor/RunnalbeJobPanelInner.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { Job } from '../../../gen';
+declare const __propDef: {
+    props: {
+        frontendJob?: boolean | any;
+        testJob?: Job | any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RunnalbeJobPanelInnerProps = typeof __propDef.props;
+export type RunnalbeJobPanelInnerEvents = typeof __propDef.events;
+export type RunnalbeJobPanelInnerSlots = typeof __propDef.slots;
+export default class RunnalbeJobPanelInner extends SvelteComponent<RunnalbeJobPanelInnerProps, RunnalbeJobPanelInnerEvents, RunnalbeJobPanelInnerSlots> {
+}
+export {};

package/package/components/apps/editor/SubGridEditor.svelte

@@ -70,7 +70,7 @@ $: maxRow = maxHeight($app.subgrids?.[subGridId] ?? [], containerHeight ?? 0, $b
 					? `animate-border border-dashed border-2 min-h-full ${
 							isActive && !$selectedComponent?.includes(id)
 								? 'border-orange-600'
-								: 'border-gray-600'
+								: 'dark:border-gray-600 border-gray-400'
 					  }`
 					: ''}
 			>
@@ -86,6 +86,7 @@ $: maxRow = maxHeight($app.subgrids?.[subGridId] ?? [], containerHeight ?? 0, $b
 					selectedIds={$selectedComponent}
 					let:dataItem
 					let:hidden
+					let:overlapped
 					cols={columnConfiguration}
 					scroller={container}
 					parentWidth={$parentWidth - 17}
@@ -103,6 +104,7 @@ $: maxRow = maxHeight($app.subgrids?.[subGridId] ?? [], containerHeight ?? 0, $b
 						<GridEditorMenu id={dataItem.id}>
 							<Component
 								{hidden}
+								{overlapped}
 								fullHeight={dataItem?.[$breakpoint === 'sm' ? 3 : 12]?.fullHeight}
 								render={visible}
 								component={dataItem.data}

package/package/components/apps/editor/component/Component.svelte

@@ -76,14 +76,17 @@ import AppDateSelect from '../../components/inputs/AppDateSelect.svelte';
 import AppDisplayComponentByJobId from '../../components/display/AppRecomputeAll.svelte';
 import AppRecomputeAll from '../../components/display/AppRecomputeAll.svelte';
 import AppUserResource from '../../components/inputs/AppUserResource.svelte';
+import { Anchor } from 'lucide-svelte';
 export let component;
 export let selected;
 export let locked = false;
 export let render;
 export let hidden;
 export let fullHeight;
-const { mode, app, hoverStore, connectingInput } = getContext('AppViewerContext');
+export let overlapped = false;
+const { mode, app, hoverStore, connectingInput, selectedComponent } = getContext('AppViewerContext');
 const editorContext = getContext('AppEditorContext');
+const componentActive = editorContext?.componentActive;
 const movingcomponents = editorContext?.movingcomponents;
 $: ismoving =
     movingcomponents != undefined && $mode == 'dnd' && $movingcomponents?.includes(component.id);
@@ -117,10 +120,25 @@ function mouseOut() {
 		}
 	}}
 	on:mouseout|stopPropagation={mouseOut}
-	class="h-full flex flex-col w-full component {initializing
-		? 'overflow-hidden h-0'
-		: ''} {hidden && $mode === 'preview' ? 'hidden' : ''} "
+	class={twMerge(
+		'h-full flex flex-col w-full component relative',
+		initializing ? 'overflow-hidden h-0' : '',
+		hidden && $mode === 'preview' ? 'hidden' : ''
+	)}
 >
+	{#if locked && componentActive && $componentActive && $selectedComponent?.[0] !== component.id && overlapped}
+		<div
+			class={twMerge(
+				'absolute inset-0 bg-locked center-center flex-col z-50',
+				overlapped ? 'bg-locked-hover' : ''
+			)}
+		>
+			<div class="bg-surface p-2 shadow-sm rounded-md flex center-center flex-col gap-2">
+				<Anchor size={24} class="text-primary " />
+				<div class="text-xs">Anchored: The component cannot be moved</div>
+			</div>
+		</div>
+	{/if}
 	{#if $mode !== 'preview'}
 		<ComponentHeader
 			on:mouseover={() => {
@@ -349,6 +367,7 @@ function mouseOut() {
 				componentInput={component.componentInput}
 				customCss={component.customCss}
 				actions={component.actions ?? []}
+				actionsOrder={component.actionsOrder ?? undefined}
 				{render}
 			/>
 		{:else if component.type === 'aggridcomponentee'}
@@ -360,6 +379,7 @@ function mouseOut() {
 				componentInput={component.componentInput}
 				customCss={component.customCss}
 				actions={component.actions ?? []}
+				actionsOrder={component.actionsOrder ?? undefined}
 				{render}
 			/>
 		{:else if component.type === 'aggridinfinitecomponent'}
@@ -370,6 +390,7 @@ function mouseOut() {
 				componentInput={component.componentInput}
 				customCss={component.customCss}
 				actions={component.actions ?? []}
+				actionsOrder={component.actionsOrder ?? undefined}
 				{render}
 			/>
 		{:else if component.type === 'aggridinfinitecomponentee'}
@@ -381,6 +402,7 @@ function mouseOut() {
 				componentInput={component.componentInput}
 				customCss={component.customCss}
 				actions={component.actions ?? []}
+				actionsOrder={component.actionsOrder ?? undefined}
 				{render}
 			/>
 		{:else if component.type === 'textcomponent'}

package/package/components/apps/editor/component/Component.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         render: boolean;
         hidden: boolean;
         fullHeight: boolean;
+        overlapped?: boolean | undefined;
     };
     events: {
         lock: CustomEvent<any>;

package/package/components/apps/editor/component/components.d.ts

@@ -70,17 +70,21 @@ export type TableComponent = BaseComponent<'tablecomponent'> & {
 };
 export type AggridComponent = BaseComponent<'aggridcomponent'> & {
     actions: TableAction[];
+    actionsOrder: RichConfiguration | undefined;
 };
 export type AggridComponentEe = BaseComponent<'aggridcomponentee'> & {
     license: string;
     actions: TableAction[];
+    actionsOrder: RichConfiguration | undefined;
 };
 export type AggridInfiniteComponent = BaseComponent<'aggridinfinitecomponent'> & {
     actions: TableAction[];
+    actionsOrder: RichConfiguration | undefined;
 };
 export type AggridInfiniteComponentEe = BaseComponent<'aggridinfinitecomponentee'> & {
     actions: TableAction[];
     license: string;
+    actionsOrder: RichConfiguration | undefined;
 };
 export type DisplayComponent = BaseComponent<'displaycomponent'>;
 export type JobIdDisplayComponent = BaseComponent<'jobiddisplaycomponent'>;
@@ -156,6 +160,7 @@ export type MenuComponent = BaseComponent<'menucomponent'> & {
 export type DBExplorerComponent = BaseComponent<'dbexplorercomponent'> & {
     columns: RichConfiguration;
     actions: TableAction[];
+    actionsOrder: RichConfiguration | undefined;
 };
 export type S3FileInputComponent = BaseComponent<'s3fileinputcomponent'> & {
     onFileChange?: string[];

package/package/components/apps/editor/componentsPanel/CssProperty.svelte

@@ -14,6 +14,7 @@ import SimpleEditor from '../../../SimpleEditor.svelte';
 import ToggleButtonGroup from '../../../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../../../common/toggleButton-v2/ToggleButton.svelte';
 import Popover from '../../../Popover.svelte';
+import { tailwindClasses } from './tailwindUtils';
 export let name;
 export let value = {};
 export let forceStyle = false;
@@ -191,6 +192,7 @@ let render = 0;
 						<SimpleEditor
 							class="h-24 border !rounded-none"
 							lang="tailwindcss"
+							{tailwindClasses}
 							bind:code={value.class}
 							fixedOverflowWidgets={true}
 							small

package/package/components/apps/editor/componentsPanel/tailwindUtils.js

@@ -3589,6 +3589,267 @@ export const tailwindClasses = [
     'border-double',
     'border-hidden',
     'border-none',
+    'outline-0',
+    'outline-1',
+    'outline-2',
+    'outline-4',
+    'outline-8',
+    'outline-inherit',
+    'outline-current',
+    'outline-transparent',
+    'outline-black',
+    'outline-white',
+    'outline-slate-50',
+    'outline-slate-100',
+    'outline-slate-200',
+    'outline-slate-300',
+    'outline-slate-400',
+    'outline-slate-500',
+    'outline-slate-600',
+    'outline-slate-700',
+    'outline-slate-800',
+    'outline-slate-900',
+    'outline-slate-950',
+    'outline-gray-50',
+    'outline-gray-100',
+    'outline-gray-200',
+    'outline-gray-300',
+    'outline-gray-400',
+    'outline-gray-500',
+    'outline-gray-600',
+    'outline-gray-700',
+    'outline-gray-800',
+    'outline-gray-900',
+    'outline-gray-950',
+    'outline-zinc-50',
+    'outline-zinc-100',
+    'outline-zinc-200',
+    'outline-zinc-300',
+    'outline-zinc-400',
+    'outline-zinc-500',
+    'outline-zinc-600',
+    'outline-zinc-700',
+    'outline-zinc-800',
+    'outline-zinc-900',
+    'outline-zinc-950',
+    'outline-neutral-50',
+    'outline-neutral-100',
+    'outline-neutral-200',
+    'outline-neutral-300',
+    'outline-neutral-400',
+    'outline-neutral-500',
+    'outline-neutral-600',
+    'outline-neutral-700',
+    'outline-neutral-800',
+    'outline-neutral-900',
+    'outline-neutral-950',
+    'outline-stone-50',
+    'outline-stone-100',
+    'outline-stone-200',
+    'outline-stone-300',
+    'outline-stone-400',
+    'outline-stone-500',
+    'outline-stone-600',
+    'outline-stone-700',
+    'outline-stone-800',
+    'outline-stone-900',
+    'outline-stone-950',
+    'outline-red-50',
+    'outline-red-100',
+    'outline-red-200',
+    'outline-red-300',
+    'outline-red-400',
+    'outline-red-500',
+    'outline-red-600',
+    'outline-red-700',
+    'outline-red-800',
+    'outline-red-900',
+    'outline-red-950',
+    'outline-orange-50',
+    'outline-orange-100',
+    'outline-orange-200',
+    'outline-orange-300',
+    'outline-orange-400',
+    'outline-orange-500',
+    'outline-orange-600',
+    'outline-orange-700',
+    'outline-orange-800',
+    'outline-orange-900',
+    'outline-orange-950',
+    'outline-amber-50',
+    'outline-amber-100',
+    'outline-amber-200',
+    'outline-amber-300',
+    'outline-amber-400',
+    'outline-amber-500',
+    'outline-amber-600',
+    'outline-amber-700',
+    'outline-amber-800',
+    'outline-amber-900',
+    'outline-amber-950',
+    'outline-yellow-50',
+    'outline-yellow-100',
+    'outline-yellow-200',
+    'outline-yellow-300',
+    'outline-yellow-400',
+    'outline-yellow-500',
+    'outline-yellow-600',
+    'outline-yellow-700',
+    'outline-yellow-800',
+    'outline-yellow-900',
+    'outline-yellow-950',
+    'outline-lime-50',
+    'outline-lime-100',
+    'outline-lime-200',
+    'outline-lime-300',
+    'outline-lime-400',
+    'outline-lime-500',
+    'outline-lime-600',
+    'outline-lime-700',
+    'outline-lime-800',
+    'outline-lime-900',
+    'outline-lime-950',
+    'outline-green-50',
+    'outline-green-100',
+    'outline-green-200',
+    'outline-green-300',
+    'outline-green-400',
+    'outline-green-500',
+    'outline-green-600',
+    'outline-green-700',
+    'outline-green-800',
+    'outline-green-900',
+    'outline-green-950',
+    'outline-emerald-50',
+    'outline-emerald-100',
+    'outline-emerald-200',
+    'outline-emerald-300',
+    'outline-emerald-400',
+    'outline-emerald-500',
+    'outline-emerald-600',
+    'outline-emerald-700',
+    'outline-emerald-800',
+    'outline-emerald-900',
+    'outline-emerald-950',
+    'outline-teal-50',
+    'outline-teal-100',
+    'outline-teal-200',
+    'outline-teal-300',
+    'outline-teal-400',
+    'outline-teal-500',
+    'outline-teal-600',
+    'outline-teal-700',
+    'outline-teal-800',
+    'outline-teal-900',
+    'outline-teal-950',
+    'outline-cyan-50',
+    'outline-cyan-100',
+    'outline-cyan-200',
+    'outline-cyan-300',
+    'outline-cyan-400',
+    'outline-cyan-500',
+    'outline-cyan-600',
+    'outline-cyan-700',
+    'outline-cyan-800',
+    'outline-cyan-900',
+    'outline-cyan-950',
+    'outline-sky-50',
+    'outline-sky-100',
+    'outline-sky-200',
+    'outline-sky-300',
+    'outline-sky-400',
+    'outline-sky-500',
+    'outline-sky-600',
+    'outline-sky-700',
+    'outline-sky-800',
+    'outline-sky-900',
+    'outline-sky-950',
+    'outline-blue-50',
+    'outline-blue-100',
+    'outline-blue-200',
+    'outline-blue-300',
+    'outline-blue-400',
+    'outline-blue-500',
+    'outline-blue-600',
+    'outline-blue-700',
+    'outline-blue-800',
+    'outline-blue-900',
+    'outline-blue-950',
+    'outline-indigo-50',
+    'outline-indigo-100',
+    'outline-indigo-200',
+    'outline-indigo-300',
+    'outline-indigo-400',
+    'outline-indigo-500',
+    'outline-indigo-600',
+    'outline-indigo-700',
+    'outline-indigo-800',
+    'outline-indigo-900',
+    'outline-indigo-950',
+    'outline-violet-50',
+    'outline-violet-100',
+    'outline-violet-200',
+    'outline-violet-300',
+    'outline-violet-400',
+    'outline-violet-500',
+    'outline-violet-600',
+    'outline-violet-700',
+    'outline-violet-800',
+    'outline-violet-900',
+    'outline-violet-950',
+    'outline-purple-50',
+    'outline-purple-100',
+    'outline-purple-200',
+    'outline-purple-300',
+    'outline-purple-400',
+    'outline-purple-500',
+    'outline-purple-600',
+    'outline-purple-700',
+    'outline-purple-800',
+    'outline-purple-900',
+    'outline-purple-950',
+    'outline-fuchsia-50',
+    'outline-fuchsia-100',
+    'outline-fuchsia-200',
+    'outline-fuchsia-300',
+    'outline-fuchsia-400',
+    'outline-fuchsia-500',
+    'outline-fuchsia-600',
+    'outline-fuchsia-700',
+    'outline-fuchsia-800',
+    'outline-fuchsia-900',
+    'outline-fuchsia-950',
+    'outline-pink-50',
+    'outline-pink-100',
+    'outline-pink-200',
+    'outline-pink-300',
+    'outline-pink-400',
+    'outline-pink-500',
+    'outline-pink-600',
+    'outline-pink-700',
+    'outline-pink-800',
+    'outline-pink-900',
+    'outline-pink-950',
+    'outline-rose-50',
+    'outline-rose-100',
+    'outline-rose-200',
+    'outline-rose-300',
+    'outline-rose-400',
+    'outline-rose-500',
+    'outline-rose-600',
+    'outline-rose-700',
+    'outline-rose-800',
+    'outline-rose-900',
+    'outline-rose-950',
+    'outline-none',
+    'outline-dashed',
+    'outline-dotted',
+    'outline-double',
+    'outline-offset-0',
+    'outline-offset-1',
+    'outline-offset-2',
+    'outline-offset-4',
+    'outline-offset-8',
     'ring-0',
     'ring-1',
     'ring-2',
@@ -4470,5 +4731,10 @@ export const tailwindClasses = [
     'border-spacing-y-64',
     'border-spacing-y-72',
     'border-spacing-y-80',
-    'border-spacing-y-96'
+    'border-spacing-y-96',
+    'shadow',
+    'border',
+    'ring',
+    'rounded',
+    'outline'
 ];

package/package/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -1,5 +1,5 @@
 <script>import { classNames } from '../../../../utils';
-import { getContext } from 'svelte';
+import { createEventDispatcher, getContext } from 'svelte';
 import { connectInput } from '../appUtils';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
 import ComponentOutput from './ComponentOutput.svelte';
@@ -8,14 +8,22 @@ import BackgroundScriptsOutput from './components/BackgroundScriptsOutput.svelte
 import OutputHeader from './components/OutputHeader.svelte';
 import { ClearableInput } from '../../../common';
 import DocLink from '../settingsPanel/DocLink.svelte';
+import HideButton from '../settingsPanel/HideButton.svelte';
 const { connectingInput, app } = getContext('AppViewerContext');
 const { search } = getContext('ContextPanel');
+const dispatch = createEventDispatcher();
 let hasState = false;
 </script>
 
 <PanelSection noPadding titlePadding="px-2 pt-2" title="Outputs">
 	<svelte:fragment slot="action">
 		<div class="p-0.5">
+			<HideButton
+				on:click={() => {
+					dispatch('hidePanel')
+				}}
+				direction="left"
+			/>
 			<DocLink docLink="https://www.windmill.dev/docs/apps/outputs" />
 		</div>
 	</svelte:fragment>

package/package/components/apps/editor/contextPanel/ContextPanel.svelte.d.ts

@@ -2,6 +2,8 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: Record<string, never>;
     events: {
+        hidePanel: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte

@@ -25,6 +25,7 @@ export let cache_ttl;
 			size="xs2"
 			iconOnly
 			startIcon={{ icon: Database }}
+			title="Cache settings"
 		/>
 	</svelte:fragment>
 	<div class="block text-primary">