windmill-components 1.89.1 → 1.103.1

package/dist/components/apps/editor/contextPanel/ComponentOutput.svelte

@@ -1,43 +0,0 @@
-<script>import { components } from '../component';
-import { getContext } from 'svelte';
-import ComponentOutputViewer from './ComponentOutputViewer.svelte';
-import { connectInput } from '../appUtils';
-import SubGridOutput from './SubGridOutput.svelte';
-import OutputHeader from './components/OutputHeader.svelte';
-import TableActionsOutput from './components/TableActionsOutput.svelte';
-export let gridItem;
-export let first = false;
-export let nested = false;
-export let expanded = false;
-const { connectingInput } = getContext('AppViewerContext');
-const name = getComponentNameById(gridItem.id);
-function getComponentNameById(componentId) {
-    if (gridItem?.data?.type) {
-        return components[gridItem?.data.type].name;
-    }
-    else if (componentId == 'ctx') {
-        return 'Context';
-    }
-    else if (componentId.startsWith('bg_')) {
-        return 'Background';
-    }
-    else {
-        return 'Table action';
-    }
-}
-$: subGrids = Array.from({ length: gridItem.data.numberOfSubgrids ?? 0 }).map((_, i) => `${gridItem.id}-${i}`);
-</script>
-
-<OutputHeader id={gridItem.id} name={getComponentNameById(gridItem.id)} {first} {nested}>
-	<ComponentOutputViewer
-		componentId={gridItem.id}
-		on:select={({ detail }) => {
-			if ($connectingInput.opened) {
-				$connectingInput = connectInput($connectingInput, gridItem.id, detail)
-			}
-		}}
-	/>
-
-	<SubGridOutput {name} {expanded} {subGrids} parentId={gridItem.id} />
-	<TableActionsOutput {gridItem} />
-</OutputHeader>

package/dist/components/apps/editor/contextPanel/ComponentOutput.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { GridItem } from '../../types';
-declare const __propDef: {
-    props: {
-        gridItem: GridItem;
-        first?: boolean | undefined;
-        nested?: boolean | undefined;
-        expanded?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ComponentOutputProps = typeof __propDef.props;
-export type ComponentOutputEvents = typeof __propDef.events;
-export type ComponentOutputSlots = typeof __propDef.slots;
-export default class ComponentOutput extends SvelteComponentTyped<ComponentOutputProps, ComponentOutputEvents, ComponentOutputSlots> {
-}
-export {};

package/dist/components/apps/editor/contextPanel/ComponentOutputViewer.svelte

@@ -1,34 +0,0 @@
-<script>import ObjectViewer from '../../../propertyPicker/ObjectViewer.svelte';
-import { getContext } from 'svelte';
-import { recursivelyFilterKeyInJSON as recursivelyFilterInJSON } from '../appUtils';
-export let componentId;
-const { worldStore } = getContext('AppViewerContext');
-const { search, hasResult } = getContext('ContextPanel');
-let object = {};
-function subscribeToAllOutputs(observableOutputs) {
-    if (observableOutputs) {
-        Object.entries(observableOutputs).forEach(([k, output]) => {
-            object[k] = undefined;
-            output?.subscribe({
-                id: 'alloutputs' + componentId + '-' + k,
-                next: (value) => {
-                    object[k] = value;
-                }
-            });
-        });
-    }
-}
-$: subscribeToAllOutputs($worldStore?.outputsById?.[componentId]);
-$: filtered = recursivelyFilterInJSON(object, $search, componentId);
-$: $hasResult[componentId] = Object.keys(filtered).length > 0;
-</script>
-
-{#if object != undefined && Object.keys(object).length > 0}
-	{#if $hasResult[componentId] || $search == ''}
-		<ObjectViewer json={filtered} on:select topBrackets={false} />
-	{:else if $search.length > 0}
-		<div class="text-xs pl-2 text-gray-600">No results</div>
-	{:else}
-		<div class="text-xs pl-2 text-gray-600">No outputs</div>
-	{/if}
-{/if}

package/dist/components/apps/editor/contextPanel/ComponentOutputViewer.svelte.d.ts

@@ -1,18 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        componentId: string;
-    };
-    events: {
-        select: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ComponentOutputViewerProps = typeof __propDef.props;
-export type ComponentOutputViewerEvents = typeof __propDef.events;
-export type ComponentOutputViewerSlots = typeof __propDef.slots;
-export default class ComponentOutputViewer extends SvelteComponentTyped<ComponentOutputViewerProps, ComponentOutputViewerEvents, ComponentOutputViewerSlots> {
-}
-export {};

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

@@ -1,78 +0,0 @@
-<script>import { classNames } from '../../../../utils';
-import { X } from 'lucide-svelte';
-import { getContext } from 'svelte';
-import { connectInput } from '../appUtils';
-import PanelSection from '../settingsPanel/common/PanelSection.svelte';
-import ComponentOutput from './ComponentOutput.svelte';
-import ComponentOutputViewer from './ComponentOutputViewer.svelte';
-import BackgroundScriptsOutput from './components/BackgroundScriptsOutput.svelte';
-import OutputHeader from './components/OutputHeader.svelte';
-const { connectingInput, app } = getContext('AppViewerContext');
-const { search } = getContext('ContextPanel');
-</script>
-
-<PanelSection noPadding titlePadding="px-1.5 pt-2" title="Outputs">
-	<div
-		class={classNames(
-			'bg-white w-full h-full z-30',
-			$connectingInput.opened ? 'border-blue-500 border-t-2 border-r-2 bg-blue-50/50 z-50' : ''
-		)}
-	>
-		<div class="min-w-[150px]">
-			<div class="sticky z-10 top-0 left-0 w-full bg-white p-1.5">
-				<div class="relative w-full">
-					<input
-						bind:value={$search}
-						class="px-2 pb-1 border border-gray-300 rounded-sm {search ? 'pr-8' : ''}"
-						placeholder="Search outputs..."
-					/>
-					{#if search}
-						<button
-							class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-200 rounded-full p-0.5"
-							on:click|stopPropagation|preventDefault={() => ($search = '')}
-						>
-							<X size="14" />
-						</button>
-					{/if}
-				</div>
-			</div>
-
-			<div class="flex flex-col gap-4">
-				<div>
-					<span class="text-xs font-bold p-2">State & Context</span>
-
-					<OutputHeader selectable={false} id={'ctx'} name={'App Context'} first color="blue">
-						<ComponentOutputViewer
-							componentId={'ctx'}
-							on:select={({ detail }) => {
-								$connectingInput = connectInput($connectingInput, 'ctx', detail)
-							}}
-						/>
-					</OutputHeader>
-
-					<OutputHeader selectable={false} id={'state'} name={'State'} color="blue">
-						<ComponentOutputViewer
-							componentId={'state'}
-							on:select={({ detail }) => {
-								$connectingInput = connectInput($connectingInput, 'state', detail)
-							}}
-						/>
-					</OutputHeader>
-				</div>
-
-				<div>
-					<span class="text-sm font-bold p-2">Components</span>
-					{#each $app.grid as gridItem, index (gridItem.id)}
-						<ComponentOutput {gridItem} first={index === 0} />
-					{/each}
-				</div>
-				<div>
-					<span class="text-sm font-bold p-2">Background scripts</span>
-					<div class="border-t">
-						<BackgroundScriptsOutput />
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</PanelSection>

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

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ContextPanelProps = typeof __propDef.props;
-export type ContextPanelEvents = typeof __propDef.events;
-export type ContextPanelSlots = typeof __propDef.slots;
-export default class ContextPanel extends SvelteComponentTyped<ContextPanelProps, ContextPanelEvents, ContextPanelSlots> {
-}
-export {};

package/dist/components/apps/editor/contextPanel/SubGridOutput.svelte

@@ -1,66 +0,0 @@
-<script>import { classNames } from '../../../../utils';
-import { getContext } from 'svelte';
-import { slide } from 'svelte/transition';
-import { connectInput } from '../appUtils';
-import ComponentOutput from './ComponentOutput.svelte';
-export let name = undefined;
-export let parentId;
-export let expanded = false;
-export let subGrids;
-const { app, connectingInput, worldStore } = getContext('AppViewerContext');
-let selected = 0;
-$: outputs = $worldStore?.outputsById[parentId];
-$: subgridItems = subGrids.map((k) => ({
-    k,
-    items: $app.subgrids?.[k] ?? []
-}));
-$: if (outputs?.selectedTabIndex) {
-    outputs.selectedTabIndex.subscribe({
-        id: 'subgridoutput-' + parentId,
-        next: (value) => {
-            selected = value;
-        }
-    });
-}
-</script>
-
-{#each subgridItems as { k, items }, index (k)}
-	<div class="ml-2 my-2">
-		{#if subGrids.length > 1}
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<div
-				class={classNames(
-					'px-1 py-0.5 flex justify-between items-center font-semibold text-xs border-l border-y w-full cursor-pointer',
-					selected === index ? 'bg-gray-200' : 'bg-gray-50'
-				)}
-				on:click={() => {
-					selected = index
-				}}
-			>
-				<div class="text-xs">
-					{name ? name : 'Should implement name'}
-					{index + 1}
-				</div>
-			</div>
-		{/if}
-
-		{#if selected === index || name !== 'Tabs'}
-			<div transition:slide|local class="border-l">
-				{#if items.length > 0}
-					{#each items as subGridItem, index (subGridItem.id)}
-						<ComponentOutput
-							gridItem={subGridItem}
-							first={index === 0}
-							{expanded}
-							on:select={({ detail }) => {
-								$connectingInput = connectInput($connectingInput, subGridItem.id, detail)
-							}}
-						/>
-					{/each}
-				{:else}
-					<div class="text-xs text-gray-500 border-y border-l p-1">No components</div>
-				{/if}
-			</div>
-		{/if}
-	</div>
-{/each}

package/dist/components/apps/editor/contextPanel/SubGridOutput.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        name?: string | undefined;
-        parentId: string;
-        expanded?: boolean | undefined;
-        subGrids: string[];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SubGridOutputProps = typeof __propDef.props;
-export type SubGridOutputEvents = typeof __propDef.events;
-export type SubGridOutputSlots = typeof __propDef.slots;
-export default class SubGridOutput extends SvelteComponentTyped<SubGridOutputProps, SubGridOutputEvents, SubGridOutputSlots> {
-}
-export {};

package/dist/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte

@@ -1,18 +0,0 @@
-<script>import { getContext } from 'svelte';
-import { connectInput } from '../../appUtils';
-import ComponentOutputViewer from '../ComponentOutputViewer.svelte';
-import OutputHeader from './OutputHeader.svelte';
-const { connectingInput } = getContext('AppViewerContext');
-export let id;
-export let name;
-export let first = false;
-</script>
-
-<OutputHeader renamable={false} selectable={true} {id} {name} color="blue" {first}>
-	<ComponentOutputViewer
-		componentId={id}
-		on:select={({ detail }) => {
-			$connectingInput = connectInput($connectingInput, id, detail)
-		}}
-	/>
-</OutputHeader>

package/dist/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte.d.ts

@@ -1,18 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        id: string;
-        name: string;
-        first?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type BackgroundScriptOutputProps = typeof __propDef.props;
-export type BackgroundScriptOutputEvents = typeof __propDef.events;
-export type BackgroundScriptOutputSlots = typeof __propDef.slots;
-export default class BackgroundScriptOutput extends SvelteComponentTyped<BackgroundScriptOutputProps, BackgroundScriptOutputEvents, BackgroundScriptOutputSlots> {
-}
-export {};

package/dist/components/apps/editor/contextPanel/components/BackgroundScriptsOutput.svelte

@@ -1,8 +0,0 @@
-<script>import { getContext } from 'svelte';
-import BackgroundScriptOutput from './BackgroundScriptOutput.svelte';
-const { app } = getContext('AppViewerContext');
-</script>
-
-{#each $app.hiddenInlineScripts as action, index}
-	<BackgroundScriptOutput id={`bg_${index}`} name={action.name} />
-{/each}

package/dist/components/apps/editor/contextPanel/components/BackgroundScriptsOutput.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type BackgroundScriptsOutputProps = typeof __propDef.props;
-export type BackgroundScriptsOutputEvents = typeof __propDef.events;
-export type BackgroundScriptsOutputSlots = typeof __propDef.slots;
-export default class BackgroundScriptsOutput extends SvelteComponentTyped<BackgroundScriptsOutputProps, BackgroundScriptsOutputEvents, BackgroundScriptsOutputSlots> {
-}
-export {};

package/dist/components/apps/editor/contextPanel/components/IdEditor.svelte

@@ -1,90 +0,0 @@
-<script>import { allItems } from '../../../utils';
-import { forbiddenIds } from '../../../../flows/idUtils';
-import { ArrowRight, Pencil } from 'lucide-svelte';
-import { createEventDispatcher, getContext } from 'svelte';
-import { fade, slide } from 'svelte/transition';
-import { Button, Popup } from '../../../../common';
-const { app, selectedComponent } = getContext('AppViewerContext');
-export let id;
-const dispatch = createEventDispatcher();
-const regex = /^[a-zA-Z0-9]{1,}$/;
-let value = id;
-let button;
-let input;
-let error = '';
-$: if (!regex.test(value)) {
-    error = 'The ID must include only letters and numbers';
-}
-else if (forbiddenIds.includes(value)) {
-    error = 'This ID is reserved';
-}
-else if (allItems($app.grid, $app.subgrids).some((item) => item.id === value && item.id !== id)) {
-    error = 'This ID is already in use';
-}
-else {
-    id = value;
-    error = '';
-}
-function save() {
-    if (error != '') {
-        return;
-    }
-    dispatch('change', id);
-    input.blur();
-}
-</script>
-
-<button
-	on:click|stopPropagation={() => {
-		$selectedComponent = [id]
-	}}
-	bind:this={button}
-	title="Edit ID"
-	class="flex items-center px-1 rounded-sm bg-gray-100 hover:text-black text-gray-600"
-	aria-label="Open component ID editor"
->
-	<Pencil size={14} />
-</button>
-<Popup
-	ref={button}
-	options={{ placement: 'top-start' }}
-	transition={fade}
-	wrapperClasses="!z-[1002]"
-	outerClasses="rounded shadow-xl bg-white border p-3"
-	on:close={() => (value = id)}
->
-	<label class="block text-gray-900">
-		<div class="pb-1 text-sm text-gray-600">Component ID</div>
-		<div class="flex w-full">
-			<input
-				type="text"
-				bind:value
-				class="!w-auto grow"
-				bind:this={input}
-				on:click|stopPropagation={() => {}}
-				on:keypress={({ key }) => {
-					if (key === 'Enter') save()
-				}}
-			/>
-			<Button
-				size="xs"
-				color="blue"
-				buttonType="button"
-				btnClasses="!p-1 !w-[34px] !ml-1"
-				aria-label="Save ID"
-				disabled={error != ''}
-				on:click={save}
-			>
-				<ArrowRight size={18} />
-			</Button>
-		</div>
-		{#if error != ''}
-			<div
-				transition:slide|local={{ duration: 100 }}
-				class="w-full text-sm text-red-600 whitespace-pre-wrap pt-1"
-			>
-				{error}
-			</div>
-		{/if}
-	</label>
-</Popup>

package/dist/components/apps/editor/contextPanel/components/IdEditor.svelte.d.ts

@@ -1,18 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        id: string;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type IdEditorProps = typeof __propDef.props;
-export type IdEditorEvents = typeof __propDef.events;
-export type IdEditorSlots = typeof __propDef.slots;
-export default class IdEditor extends SvelteComponentTyped<IdEditorProps, IdEditorEvents, IdEditorSlots> {
-}
-export {};

package/dist/components/apps/editor/contextPanel/components/OutputHeader.svelte

@@ -1,205 +0,0 @@
-<script>import { allItems } from '../../../utils';
-import { classNames } from '../../../../../utils';
-import { ChevronDown, ChevronUp, Pointer } from 'lucide-svelte';
-import { getContext } from 'svelte';
-import { allsubIds, findGridItem } from '../../appUtils';
-import IdEditor from './IdEditor.svelte';
-export let id;
-export let name;
-export let first = false;
-export let nested = false;
-export let color = 'indigo';
-export let selectable = true;
-export let renamable = true;
-const { manuallyOpened, search, hasResult } = getContext('ContextPanel');
-const { selectedComponent, app, hoverStore, allIdsInPath, connectingInput } = getContext('AppViewerContext');
-$: subids = $search != '' ? allsubIds($app, id) : [];
-$: inSearch =
-    $search != '' &&
-        ($hasResult[id] ||
-            Object.entries($hasResult).some(([key, value]) => value && subids.includes(key)));
-$: open = $allIdsInPath.includes(id) || $manuallyOpened[id] || inSearch;
-const hoverColor = {
-    blue: 'hover:bg-blue-300 hover:text-blue-600',
-    indigo: 'hover:bg-indigo-300 hover:text-indigo-600'
-};
-const openBackground = {
-    blue: 'bg-blue-50',
-    indigo: 'bg-indigo-50'
-};
-const manuallyOpenColor = {
-    blue: 'text-blue-600',
-    indigo: 'text-indigo-600'
-};
-const idClass = {
-    blue: 'bg-blue-500 text-white',
-    indigo: 'bg-indigo-500 text-white'
-};
-function renameId(newId) {
-    const item = findGridItem($app, id);
-    if (!item) {
-        return;
-    }
-    item.data.id = newId;
-    item.id = newId;
-    const oldSubgrids = Object.keys($app.subgrids ?? {}).filter((subgrid) => subgrid.startsWith(id + '-'));
-    oldSubgrids.forEach((subgrid) => {
-        if ($app.subgrids) {
-            $app.subgrids[subgrid.replace(id, newId)] = $app.subgrids[subgrid];
-            delete $app.subgrids[subgrid];
-        }
-    });
-    function propagateRename(from, to) {
-        allItems($app.grid, $app.subgrids).forEach((item) => {
-            renameComponent(from, to, item.data);
-        });
-        $app.hiddenInlineScripts.forEach((x) => {
-            console.log('process', x.name, id);
-            processRunnable(from, to, {
-                name: x.name,
-                inlineScript: x.inlineScript,
-                type: 'runnableByName'
-            });
-        });
-    }
-    propagateRename(id, newId);
-    if (item?.data.type == 'tablecomponent') {
-        for (let c of item.data.actionButtons) {
-            let old = c.id;
-            c.id = c.id.replace(id + '_', newId + '_');
-            propagateRename(old, c.id);
-        }
-    }
-    $app = $app;
-    $selectedComponent = [newId];
-}
-function renameComponent(from, to, data) {
-    if (data.type == 'tablecomponent') {
-        for (let c of data.actionButtons) {
-            renameComponent(from, to, c);
-        }
-    }
-    let componentInput = data.componentInput;
-    if (componentInput?.type == 'connected') {
-        if (componentInput.connection?.componentId === from) {
-            componentInput.connection.componentId = to;
-        }
-    }
-    else if (componentInput?.type == 'runnable') {
-        processRunnable(from, to, componentInput.runnable);
-    }
-    Object.values(data.configuration ?? {}).forEach((config) => {
-        if (config.type === 'connected') {
-            if (config.connection?.componentId === from) {
-                config.connection.componentId = to;
-            }
-        }
-        else if (config.type == 'oneOf') {
-            Object.values(config.configuration ?? {}).forEach((choices) => {
-                Object.values(choices).forEach((c) => {
-                    if (c.type === 'connected') {
-                        if (c.connection?.componentId === id) {
-                            c.connection.componentId = to;
-                        }
-                    }
-                });
-            });
-        }
-    });
-}
-function processRunnable(from, to, runnable) {
-    if (runnable?.type === 'runnableByName' &&
-        runnable?.inlineScript?.refreshOn?.find((x) => x.id === from)) {
-        runnable.inlineScript.refreshOn = runnable.inlineScript.refreshOn.map((x) => {
-            if (x.id === from) {
-                return {
-                    id: to,
-                    key: x.key
-                };
-            }
-            return x;
-        });
-    }
-}
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class={$search == '' || inSearch ? '' : 'invisible h-0 overflow-hidden'}>
-	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-	<div
-		on:mouseenter|stopPropagation={() => {
-			if (id !== $hoverStore) {
-				$hoverStore = id
-			}
-		}}
-		on:mouseleave|stopPropagation={() => {
-			if ($hoverStore !== undefined) {
-				$hoverStore = undefined
-			}
-		}}
-		class={classNames(
-			'flex items-center justify-between p-1 cursor-pointer border-b gap-1 truncate',
-			hoverColor[color],
-			$selectedComponent?.includes(id)
-				? openBackground[color]
-				: $connectingInput.hoveredComponent === id
-				? 'bg-orange-300 '
-				: 'bg-white',
-			first ? 'border-t' : '',
-			nested ? 'border-l' : ''
-		)}
-		on:click={() => {
-			$manuallyOpened[id] = $manuallyOpened[id] != undefined ? !$manuallyOpened[id] : true
-		}}
-	>
-		<div class="flex">
-			<button
-				disabled={!(selectable && !$selectedComponent?.includes(id)) || $connectingInput?.opened}
-				title="Select component"
-				on:click|stopPropagation={() => ($selectedComponent = [id])}
-				class="flex items-center ml-0.5 rounded-sm bg-gray-100 hover:text-black text-gray-600"
-			>
-				<div
-					class={classNames(
-						'text-2xs  font-bold px-2 py-0.5 rounded-sm',
-						$selectedComponent?.includes(id) ? idClass[color] : ''
-					)}
-				>
-					{id}
-				</div>
-				{#if selectable && !$selectedComponent?.includes(id)}
-					<div class="px-1">
-						<Pointer size={14} />
-					</div>
-				{/if}
-			</button>
-			{#if selectable && renamable && ($selectedComponent?.includes(id) || $hoverStore === id)}
-				<IdEditor
-					{id}
-					on:selected={() => ($selectedComponent = [id])}
-					on:change={({ detail }) => renameId(detail)}
-				/>
-			{/if}
-		</div>
-		<div class="text-2xs font-bold flex flex-row gap-2 items-center truncate">
-			{name}
-			{#if !open}
-				<ChevronDown size={14} />
-			{:else if $manuallyOpened[id]}
-				<ChevronUp size={14} class={manuallyOpenColor[color]} strokeWidth={4} />
-			{:else}
-				<ChevronUp size={14} />
-			{/if}
-		</div>
-	</div>
-	<div
-		class="border-b {open ? 'h-full' : 'h-0 overflow-hidden'} {$connectingInput.hoveredComponent ===
-			id && !$selectedComponent?.includes(id)
-			? '  bg-orange-100/40'
-			: ''}"
-	>
-		<div class={classNames(nested ? 'border-l ml-2' : '')}>
-			<slot />
-		</div>
-	</div>
-</div>