windmill-components 1.60.4 → 1.83.1

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

@@ -3,13 +3,21 @@ import Button from '../../../common/button/Button.svelte';
 import FlowModuleScript from '../../../flows/content/FlowModuleScript.svelte';
 import FlowPathViewer from '../../../flows/content/FlowPathViewer.svelte';
 import { inferArgs } from '../../../../infer';
-import { emptySchema, getScriptByPath } from '../../../../utils';
-import { faCodeBranch, faExternalLinkAlt, faEye, faPen } from '@fortawesome/free-solid-svg-icons';
-import { clearResultAppInput } from '../../utils';
+import { workspaceStore } from '../../../../stores';
+import { emptySchema, getScriptByPath, sendUserToast } from '../../../../utils';
+import { faCodeBranch, faExternalLinkAlt, faEye, faPen, faRefresh } from '@fortawesome/free-solid-svg-icons';
+import { clearResultAppInput, loadSchema, schemaToInputsSpec } from '../../utils';
 import EmptyInlineScript from './EmptyInlineScript.svelte';
 import InlineScriptEditor from './InlineScriptEditor.svelte';
+import { computeFields } from './utils';
+import { deepEqual } from 'fast-equals';
+import { getContext } from 'svelte';
 export let componentInput;
+export let defaultUserInput = false;
+export let componentType;
 export let id;
+export let transformer;
+const { app, stateId } = getContext('AppViewerContext');
 async function fork(path) {
     let { content, language, schema } = await getScriptByPath(path);
     if (componentInput && componentInput.type == 'runnable') {
@@ -34,6 +42,40 @@ async function fork(path) {
 }
 let drawerFlowViewer;
 let flowPath = '';
+async function refreshScript(x) {
+    let { schema } = await getScriptByPath(x.path);
+    if (!deepEqual(x.schema, schema)) {
+        x.schema = schema;
+        if (componentInput?.type == 'runnable') {
+            componentInput.fields = computeFields(schema, false, componentInput.fields);
+        }
+        componentInput = componentInput;
+    }
+}
+async function refreshFlow(x) {
+    const schema = (await loadSchema($workspaceStore ?? '', x.path, 'flow')) ?? emptySchema();
+    x.schema = schema;
+    if (componentInput?.type == 'runnable') {
+        componentInput.fields = schemaToInputsSpec(schema, defaultUserInput);
+    }
+    componentInput = componentInput;
+    console.log('refreshFlow', componentInput);
+}
+$: if (componentInput &&
+    componentInput.type == 'runnable' &&
+    componentInput?.runnable?.type === 'runnableByPath') {
+    if (componentInput.runnable.runType == 'script') {
+        refreshScript(componentInput.runnable);
+    }
+    else if (componentInput.runnable.runType == 'flow') {
+        refreshFlow(componentInput.runnable);
+    }
+}
+function deleteInlineScript() {
+    if (componentInput && componentInput.type == 'runnable') {
+        componentInput = clearResultAppInput(componentInput);
+    }
+}
 </script>
 
 <Drawer bind:this={drawerFlowViewer} size="1200px">
@@ -42,23 +84,43 @@ let flowPath = '';
 	</DrawerContent>
 </Drawer>
 
-{#if componentInput && componentInput.type == 'runnable'}
+{#if transformer}
+	{#if componentInput?.type == 'runnable' && componentInput.transformer}
+		<InlineScriptEditor
+			transformer
+			defaultUserInput={false}
+			{id}
+			bind:inlineScript={componentInput.transformer}
+			name="Transformer"
+			on:delete={() => {
+				if (componentInput?.type == 'runnable') {
+					componentInput.transformer = undefined
+					componentInput = componentInput
+				}
+			}}
+		/>
+	{:else}
+		<span class="px-2 text-gray-600">
+			Selected editor component is a transformer but component has no transformer
+		</span>
+	{/if}
+{:else if componentInput && componentInput.type == 'runnable'}
 	{#if componentInput?.runnable?.type === 'runnableByName' && componentInput?.runnable?.name !== undefined}
 		{#if componentInput.runnable.inlineScript}
 			<InlineScriptEditor
+				{defaultUserInput}
 				{id}
 				bind:inlineScript={componentInput.runnable.inlineScript}
 				bind:name={componentInput.runnable.name}
-				on:delete={() => {
-					if (componentInput && componentInput.type == 'runnable') {
-						componentInput = clearResultAppInput(componentInput)
-					}
-				}}
+				bind:fields={componentInput.fields}
+				syncFields
+				on:delete={deleteInlineScript}
 			/>
 		{:else}
 			<EmptyInlineScript
-				{id}
+				{componentType}
 				name={componentInput.runnable.name}
+				on:delete={deleteInlineScript}
 				on:new={(e) => {
 					if (
 						componentInput &&
@@ -66,6 +128,7 @@ let flowPath = '';
 						componentInput?.runnable?.type === 'runnableByName'
 					) {
 						componentInput.runnable.inlineScript = e.detail
+						$app = $app
 					}
 				}}
 			/>
@@ -84,6 +147,7 @@ let flowPath = '';
 								componentInput.runnable?.type === 'runnableByPath'
 							) {
 								fork(componentInput.runnable.path)
+								$app = $app
 							}
 						}}
 					>
@@ -91,38 +155,65 @@ let flowPath = '';
 					</Button>
 				</div>
 			{/if}
-			<div class="border w-full">
-				{#if componentInput.runnable.runType == 'script' || componentInput.runnable.runType == 'hubscript'}
-					<FlowModuleScript path={componentInput.runnable.path} />
-				{:else if componentInput.runnable.runType == 'flow'}
-					<div class="py-1 flex gap-2 w-full flex-row-reverse">
-						<Button
-							size="xs"
-							startIcon={{ icon: faEye }}
-							on:click={() => {
-								flowPath = componentInput?.['runnable']?.path
-								drawerFlowViewer.openDrawer()
-							}}>Expand</Button
-						>
-						<Button
-							size="xs"
-							startIcon={{ icon: faPen }}
-							endIcon={{ icon: faExternalLinkAlt }}
-							target="_blank"
-							href="/flows/edit/{componentInput?.['runnable']?.path}?nodraft=true">Edit</Button
-						>
-						<Button
-							size="xs"
-							startIcon={{ icon: faEye }}
-							endIcon={{ icon: faExternalLinkAlt }}
-							target="_blank"
-							href="/flows/get/{componentInput?.['runnable']?.path}">Details page</Button
-						>
-					</div>
-					<FlowPathViewer path={componentInput.runnable.path} />
-				{:else}
-					Unrecognized runType {componentInput.runnable.runType}
-				{/if}
+			<div class="w-full">
+				{#key $stateId}
+					{#if componentInput.runnable.runType == 'script' || componentInput.runnable.runType == 'hubscript'}
+						<FlowModuleScript path={componentInput.runnable.path} />
+					{:else if componentInput.runnable.runType == 'flow'}
+						<div class="pb-2 flex gap-2 w-full flex-row-reverse">
+							<Button
+								size="xs"
+								startIcon={{ icon: faRefresh }}
+								on:click={() => {
+									if (
+										componentInput?.type == 'runnable' &&
+										componentInput.runnable?.type === 'runnableByPath'
+									) {
+										sendUserToast('Refreshing inputs')
+										if (componentInput.runnable.runType == 'script') {
+											refreshScript(componentInput.runnable)
+										} else if (componentInput.runnable.runType == 'flow') {
+											refreshFlow(componentInput.runnable)
+										}
+										$stateId = $stateId + 1
+									}
+								}}
+							>
+								Refresh
+							</Button>
+							<Button
+								size="xs"
+								startIcon={{ icon: faEye }}
+								on:click={() => {
+									flowPath = componentInput?.['runnable']?.path
+									drawerFlowViewer.openDrawer()
+								}}
+							>
+								Expand
+							</Button>
+							<Button
+								size="xs"
+								startIcon={{ icon: faPen }}
+								endIcon={{ icon: faExternalLinkAlt }}
+								target="_blank"
+								href="/flows/edit/{componentInput?.['runnable']?.path}?nodraft=true">Edit</Button
+							>
+							<Button
+								size="xs"
+								startIcon={{ icon: faEye }}
+								endIcon={{ icon: faExternalLinkAlt }}
+								target="_blank"
+								href="/flows/get/{componentInput?.['runnable']
+									?.path}?workspace_id={$workspaceStore}"
+							>
+								Details page
+							</Button>
+						</div>
+						<FlowPathViewer path={componentInput.runnable.path} />
+					{:else}
+						Unrecognized runType {componentInput.runnable.runType}
+					{/if}
+				{/key}
 			</div>
 		</div>
 	{/if}

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte.d.ts

@@ -3,7 +3,10 @@ import type { AppInput } from '../../inputType';
 declare const __propDef: {
     props: {
         componentInput: AppInput | undefined;
+        defaultUserInput?: boolean | undefined;
+        componentType: string;
         id: string;
+        transformer: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,51 +2,81 @@
 import SplitPanesWrapper from '../../../splitPanes/SplitPanesWrapper.svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import InlineScriptsPanelList from './InlineScriptsPanelList.svelte';
-import InlineScriptEditorPanel from './InlineScriptEditorPanel.svelte';
 import InlineScriptEditor from './InlineScriptEditor.svelte';
-const { lazyGrid, app } = getContext('AppEditorContext');
-let selectedScriptComponentId = undefined;
+import EmptyInlineScript from './EmptyInlineScript.svelte';
+import InlineScriptsPanelWithTable from './InlineScriptsPanelWithTable.svelte';
+import { findGridItem } from '../appUtils';
+const { app, runnableComponents } = getContext('AppViewerContext');
+const { selectedComponentInEditor } = getContext('AppEditorContext');
+function deleteBackgroundScript(index) {
+    // remove the script from the array at the index
+    $app.hiddenInlineScripts.splice(index, 1);
+    $app.hiddenInlineScripts = [...$app.hiddenInlineScripts];
+    delete $runnableComponents[`bg_${index}`];
+}
+$: gridItem =
+    $selectedComponentInEditor && !$selectedComponentInEditor.startsWith('bg_')
+        ? findGridItem($app, $selectedComponentInEditor?.split('_')?.[0])
+        : undefined;
+$: hiddenInlineScript = $app?.hiddenInlineScripts?.findIndex((k_, index) => `bg_${index}` === $selectedComponentInEditor);
+$: unusedInlineScript = $app?.unusedInlineScripts?.findIndex((k_, index) => `unused-${index}` === $selectedComponentInEditor);
 </script>
 
 <SplitPanesWrapper>
 	<Splitpanes class="!overflow-visible">
 		<Pane size={25}>
-			<InlineScriptsPanelList bind:selectedScriptComponentId />
+			<InlineScriptsPanelList />
 		</Pane>
 		<Pane size={75}>
-			{#each $lazyGrid as gridComponent, index (index)}
-				{#if gridComponent.data.id === selectedScriptComponentId}
-					<InlineScriptEditorPanel
-						id={gridComponent.data.id}
-						bind:componentInput={gridComponent.data.componentInput}
-					/>
-				{/if}
-
-				{#if gridComponent.data.type === 'tablecomponent'}
-					{#each gridComponent.data.actionButtons as actionButton, index (index)}
-						{#if actionButton.id === selectedScriptComponentId}
-							<InlineScriptEditorPanel
-								id={actionButton.id}
-								bind:componentInput={actionButton.componentInput}
-							/>
-						{/if}
-					{/each}
-				{/if}
-			{/each}
-			{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
-				{#if `unused-${index}` === selectedScriptComponentId}
+			{#if !$selectedComponentInEditor}
+				<div class="text-sm text-gray-500 text-center py-8 px-2">
+					Select a script on the left panel
+				</div>
+			{:else if gridItem}
+				{#key gridItem?.id}
+					<InlineScriptsPanelWithTable bind:gridItem />
+				{/key}
+			{:else if unusedInlineScript > -1 && $app.unusedInlineScripts?.[unusedInlineScript]}
+				{#key unusedInlineScript}
 					<InlineScriptEditor
-						id={`unused-${index}`}
-						bind:name={unusedInlineScript.name}
-						bind:inlineScript={unusedInlineScript.inlineScript}
+						id={`unused-${unusedInlineScript}`}
+						bind:name={$app.unusedInlineScripts[unusedInlineScript].name}
+						bind:inlineScript={$app.unusedInlineScripts[unusedInlineScript].inlineScript}
 						on:delete={() => {
 							// remove the script from the array at the index
-							$app.unusedInlineScripts.splice(index, 1)
+							$app.unusedInlineScripts.splice(unusedInlineScript, 1)
 							$app.unusedInlineScripts = [...$app.unusedInlineScripts]
 						}}
 					/>
-				{/if}
-			{/each}
+				{/key}
+			{:else if hiddenInlineScript > -1}
+				{#key hiddenInlineScript}
+					{#if $app.hiddenInlineScripts?.[hiddenInlineScript]?.inlineScript}
+						<InlineScriptEditor
+							id={`bg_${hiddenInlineScript}`}
+							bind:inlineScript={$app.hiddenInlineScripts[hiddenInlineScript].inlineScript}
+							bind:name={$app.hiddenInlineScripts[hiddenInlineScript].name}
+							bind:fields={$app.hiddenInlineScripts[hiddenInlineScript].fields}
+							syncFields
+							on:delete={() => deleteBackgroundScript(hiddenInlineScript)}
+						/>
+					{:else}
+						<EmptyInlineScript
+							name={$app.hiddenInlineScripts[hiddenInlineScript].name}
+							on:delete={() => deleteBackgroundScript(hiddenInlineScript)}
+							on:new={(e) => {
+								if ($app.hiddenInlineScripts[hiddenInlineScript]) {
+									$app.hiddenInlineScripts[hiddenInlineScript].inlineScript = e.detail
+								}
+							}}
+						/>
+					{/if}
+				{/key}
+			{:else}
+				<div class="text-sm text-gray-500 text-center py-8 px-2">
+					No script found at id {$selectedComponentInEditor}
+				</div>
+			{/if}
 		</Pane>
 	</Splitpanes>
 </SplitPanesWrapper>

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

@@ -1,93 +1,199 @@
-<script>import { Badge } from '../../../common';
-import { classNames } from '../../../../utils';
+<script>import { Badge, Button } from '../../../common';
+import { Plus } from 'lucide-svelte';
 import { getContext } from 'svelte';
+import Tooltip from '../../../Tooltip.svelte';
+import { getAllScriptNames } from '../../utils';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
 import { getAppScripts } from './utils';
-export let selectedScriptComponentId = undefined;
-const { app, selectedComponent, lazyGrid } = getContext('AppEditorContext');
-function selectInlineScript(id) {
-    selectedScriptComponentId = id;
-    if (!id.startsWith('unused-')) {
-        $selectedComponent = selectedScriptComponentId;
+const PREFIX = 'script-selector-';
+const { app, selectedComponent } = getContext('AppViewerContext');
+const { selectedComponentInEditor } = getContext('AppEditorContext');
+function selectScript(id) {
+    $selectedComponentInEditor = id;
+    if (!id.startsWith('unused-') || !id.startsWith('bg_')) {
+        $selectedComponent = [$selectedComponentInEditor.split('_transformer')[0]];
     }
 }
-$: runnables = getAppScripts($lazyGrid);
-// When seleced component changes, update selectedScriptComponentId
-$: {
-    if (selectedComponent) {
-        selectedScriptComponentId = $selectedComponent;
+$: runnables = getAppScripts($app.grid, $app.subgrids);
+// When selected component changes, update selectedScriptComponentId
+$: if ($selectedComponent != $selectedComponentInEditor &&
+    !$selectedComponentInEditor?.includes('_transformer')) {
+    $selectedComponentInEditor = $selectedComponent?.[0];
+}
+function createBackgroundScript() {
+    let index = 0;
+    let newScriptPath = `Background Script ${index}`;
+    const names = getAllScriptNames($app);
+    // Find a name that is not used by any other inline script
+    while (names.includes(newScriptPath)) {
+        newScriptPath = `Background Script ${++index}`;
+    }
+    if (!$app.hiddenInlineScripts) {
+        $app.hiddenInlineScripts = [];
     }
+    $app.hiddenInlineScripts.push({
+        name: newScriptPath,
+        inlineScript: undefined,
+        autoRefresh: true,
+        fields: {}
+    });
+    $app.hiddenInlineScripts = $app.hiddenInlineScripts;
+    selectScript(`bg_${$app.hiddenInlineScripts.length - 1}`);
 }
 </script>
 
-<div class="min-h-full flex flex-col gap-4">
-	<PanelSection title="Inline scripts" smallPadding>
-		<div class="flex flex-col gap-2 w-full">
-			{#if runnables.inline.length > 0}
-				<div class="flex gap-2 flex-col ">
-					{#each runnables.inline as { name, id }, index (index)}
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<div
-							class="{classNames(
-								'border flex  gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-sm cursor-pointer hover:bg-blue-50 hover:text-blue-400',
-								selectedScriptComponentId === id ? 'border-blue-500 border' : ''
-							)},"
-							on:click={() => selectInlineScript(id)}
-						>
-							<span class="text-xs truncate">{name}</span>
-							<div>
-								<Badge color="dark-indigo">{id}</Badge>
-							</div>
-						</div>
-					{/each}
-				</div>
-			{/if}
+<PanelSection title="Runnables">
+	<div class="w-full flex flex-col gap-6 py-1">
+		<div>
+			<div class="text-sm font-semibold truncate mb-1"> Inline scripts </div>
+			<div class="flex flex-col gap-2 w-full">
+				{#if runnables.inline.length > 0}
+					<div class="flex gap-1 flex-col ">
+						{#each runnables.inline as { name, id, transformer }, index (index)}
+							<button
+								id={PREFIX + id}
+								class="panel-item 
+				{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+								on:click={() => selectScript(id)}
+							>
+								<span class="text-2xs truncate">{name}</span>
+								<div>
+									<Badge color="dark-indigo">{id}</Badge>
+								</div>
+							</button>
+							{#if transformer}
+								<div class="w-full pl-4">
+									<button
+										id={PREFIX + id + '_transformer'}
+										class="border flex gap-1 truncate font-normal justify-between w-full items-center px-2 py-0.5 rounded-sm duration-200;
+			{$selectedComponentInEditor === id + '_transformer'
+											? 'border-blue-500 bg-blue-100'
+											: 'hover:bg-blue-50'}"
+										on:click={() => selectScript(id + '_transformer')}
+									>
+										<span class="text-2xs truncate">Transformer</span>
+									</button>
+								</div>
+							{/if}
+						{/each}
+					</div>
+				{/if}
+				{#if $app.unusedInlineScripts?.length > 0}
+					<div class="flex gap-1 flex-col ">
+						{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
+							{@const id = `unused-${index}`}
+							<button
+								id={PREFIX + id}
+								class="panel-item
+								{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+								on:click={() => selectScript(id)}
+							>
+								<span class="text-2xs truncate">{unusedInlineScript.name}</span>
+								<Badge color="red">Detached</Badge>
+							</button>
+						{/each}
+					</div>
+				{/if}
+				{#if runnables.inline.length == 0 && $app.unusedInlineScripts?.length == 0}
+					<div class="text-xs text-gray-500">No inline scripts</div>
+				{/if}
+			</div>
+		</div>
 
-			{#if $app.unusedInlineScripts?.length > 0}
-				<div class="flex gap-2 flex-col ">
-					{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<div
-							class="{classNames(
-								'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
-								selectedScriptComponentId === `unused-${index}` ? 'bg-blue-100 text-blue-600' : ''
-							)},"
-							on:click={() => selectInlineScript(`unused-${index}`)}
+		<div>
+			<div class="text-sm font-semibold truncate mb-1"> Workspace/Hub </div>
+			<div class="flex flex-col gap-1 w-full">
+				{#if runnables.imported.length > 0}
+					{#each runnables.imported as { name, id, transformer }, index (index)}
+						<button
+							id={PREFIX + id}
+							class="panel-item
+								{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+							on:click={() => selectScript(id)}
 						>
-							<span class="text-xs truncate">{unusedInlineScript.name}</span>
-							<Badge color="red">Detached</Badge>
-						</div>
+							<span class="text-2xs truncate">{name}</span>
+							<Badge color="dark-indigo">{id}</Badge>
+						</button>
+						{#if transformer}
+							<div class="w-full pl-4">
+								<button
+									id={PREFIX + id + '_transformer'}
+									class="border flex gap-1 truncate font-normal justify-between w-full items-center px-2 py-0.5 rounded-sm duration-200;
+	{$selectedComponentInEditor === id + '_transformer'
+										? 'border-blue-500 bg-blue-100'
+										: 'hover:bg-blue-50'}"
+									on:click={() => selectScript(id + '_transformer')}
+								>
+									<span class="text-2xs truncate">Transformer</span>
+								</button>
+							</div>
+						{/if}
 					{/each}
-				</div>
-			{/if}
-
-			{#if runnables.inline.length == 0 && $app.unusedInlineScripts?.length == 0}
-				<div class="text-sm text-gray-500">No inline scripts</div>
-			{/if}
+				{:else}
+					<div class="text-xs text-gray-500">No imported scripts/flows</div>
+				{/if}
+			</div>
 		</div>
-	</PanelSection>
 
-	<PanelSection title="Imported scripts" smallPadding>
-		<div class="flex flex-col gap-2 w-full">
-			{#if runnables.imported.length > 0}
-				<div class="flex gap-2 flex-col ">
-					{#each runnables.imported as { name, id }, index (index)}
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<div
-							class="{classNames(
-								'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
-								selectedScriptComponentId === id ? 'bg-blue-100 text-blue-600' : ''
-							)},"
-							on:click={() => selectInlineScript(id)}
+		<div>
+			<div class="w-full flex justify-between items-center mb-1">
+				<div class="text-sm font-semibold truncate">
+					Background scripts
+					<Tooltip class="mb-0.5">
+						Background scripts are triggered upon global refresh or when their input changes. The
+						result of a background script can be shared among many components.
+					</Tooltip>
+				</div>
+				<Button
+					size="xs"
+					color="light"
+					variant="border"
+					btnClasses="!rounded-full !p-1"
+					title="Create a new background script"
+					aria-label="Create a new background script"
+					on:click={createBackgroundScript}
+				>
+					<Plus size={14} class="text-gray-500" />
+				</Button>
+			</div>
+			<div class="flex flex-col gap-1 w-full">
+				{#if $app.hiddenInlineScripts?.length > 0}
+					{#each $app.hiddenInlineScripts as { name }, index (index)}
+						{@const id = `bg_${index}`}
+						<button
+							id={PREFIX + id}
+							class="panel-item
+								{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+							on:click={() => selectScript(id)}
 						>
-							<span class="text-xs truncate">{name}</span>
+							<span class="text-2xs truncate">{name}</span>
 							<Badge color="dark-indigo">{id}</Badge>
-						</div>
+						</button>
 					{/each}
-				</div>
-			{:else}
-				<div class="text-sm text-gray-500">No items</div>
-			{/if}
+				{:else}
+					<div class="text-xs text-gray-500">No background scripts</div>
+				{/if}
+			</div>
 		</div>
-	</PanelSection>
-</div>
+	</div>
+</PanelSection>
+
+<style>
+	.panel-item {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.25rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    border-radius: 0.125rem;
+    border-width: 1px;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    font-weight: 400;
+    transition-duration: 200ms
+}</style>

package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte.d.ts

@@ -1,8 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        selectedScriptComponentId?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };