windmill-components 1.623.2 → 1.655.0

package/package/components/sidebar/FavoriteMenu.svelte

@@ -1,7 +1,63 @@
-<script lang="ts">import { CodeXml, LayoutDashboard, Star } from 'lucide-svelte';
+<script module lang="ts">export function getFavoriteHref(path, kind) {
+    return {
+        script: `/scripts/get/${path}`,
+        flow: `/flows/get/${path}`,
+        app: `/apps/get/${path}`,
+        raw_app: `/apps_raw/get/${path}`,
+        asset: '#'
+    }[kind];
+}
+export function getFavoriteLabel(path, kind) {
+    if (kind === 'asset') {
+        const asset = parseFavoriteAsset(path);
+        return `${asset.schema ? `${asset.schema}.` : ''}${asset.table} (${asset.assetName} ${asset.scheme})`;
+    }
+    return path;
+}
+class FavoriteManager {
+    current = $state([]);
+    async unstar(path, favorite_kind, workspaceId) {
+        this.current = this.current.filter((fav) => !(fav.path === path && fav.kind === favorite_kind));
+        await FavoriteService.unstar({
+            workspace: workspaceId ?? get(workspaceStore),
+            requestBody: { path, favorite_kind }
+        });
+    }
+    async star(path, favorite_kind, workspaceId, summary) {
+        const href = getFavoriteHref(path, favorite_kind);
+        const label = summary || getFavoriteLabel(path, favorite_kind);
+        this.current = [...this.current, { href, kind: favorite_kind, label, path }];
+        await FavoriteService.star({
+            workspace: workspaceId ?? get(workspaceStore),
+            requestBody: { path, favorite_kind }
+        });
+    }
+    isStarred(path, favorite_kind) {
+        return this.current.some((fav) => fav.path === path && fav.kind === favorite_kind);
+    }
+}
+export const favoriteManager = new FavoriteManager();
+export function parseFavoriteAsset(path) {
+    const [scheme, t0] = path.split('://');
+    const [assetName, tableKey] = t0.split('/');
+    const [t1, t2] = tableKey.split('.');
+    const [table, schema] = [
+        t2 ?? t1,
+        t1 === 'main' || t1 === 'public' ? undefined : t2 ? t1 : undefined
+    ];
+    return { table, schema, assetName: assetName || 'main', path, scheme };
+}
+</script>
+
+<script lang="ts">import { CodeXml, LayoutDashboard, Table2, Star, Trash2 } from 'lucide-svelte';
 import BarsStaggered from '../icons/BarsStaggered.svelte';
 import { Menu, MenuItem } from '../meltComponents';
 import MenuButton from './MenuButton.svelte';
+import { FavoriteService } from '../../gen';
+import { get } from 'svelte/store';
+import { globalDbManagerDrawer, workspaceStore } from '../../stores';
+import { parseDbInputFromAssetSyntax } from '../../utils';
+import DropdownV2 from '../DropdownV2.svelte';
 let { lightMode = false, isCollapsed = false, favoriteLinks = [], createMenu } = $props();
 </script>
 
@@ -27,25 +83,50 @@ let { lightMode = false, isCollapsed = false, favoriteLinks = [], createMenu } =
 				</div>
 			{:else}
 				<div class="py-1 w-full max-w-full">
-					{#each favoriteLinks ?? [] as favorite (favorite.href)}
-						<MenuItem
-							href={favorite.href}
-							{item}
-							class="w-full inline-flex flex-row px-4 py-2 data-[highlighted]:bg-surface-hover"
-						>
-							<span class="center-center">
-								{#if favorite.kind == 'script'}
-									<CodeXml size={16} />
-								{:else if favorite.kind == 'flow'}
-									<BarsStaggered size={16} />
-								{:else if favorite.kind == 'app' || favorite.kind == 'raw_app'}
-									<LayoutDashboard size={16} />
-								{/if}
-							</span>
-							<span class="text-primary ml-2 grow min-w-0 text-xs truncate">
-								{favorite.label}
-							</span>
-						</MenuItem>
+					{#each favoriteLinks ?? [] as favorite}
+						<div class="relative group">
+							<MenuItem
+								href={favorite.href}
+								onClick={() => {
+									if (favorite.kind === 'asset') {
+										const dbInput = parseDbInputFromAssetSyntax(favorite.path)
+										if (dbInput) globalDbManagerDrawer.val?.openDrawer(dbInput)
+									}
+								}}
+								{item}
+								class="w-full inline-flex flex-row px-4 py-2 pr-8 data-[highlighted]:bg-surface-hover"
+							>
+								<span class="center-center">
+									{#if favorite.kind == 'script'}
+										<CodeXml size={16} />
+									{:else if favorite.kind == 'flow'}
+										<BarsStaggered size={16} />
+									{:else if favorite.kind == 'app' || favorite.kind == 'raw_app'}
+										<LayoutDashboard size={16} />
+									{:else if favorite.kind == 'asset'}
+										<Table2 size={16} />
+									{/if}
+								</span>
+								<span class="text-primary ml-2 grow min-w-0 text-xs truncate">
+									{favorite.label}
+								</span>
+							</MenuItem>
+							<div
+								class="absolute right-0 top-0 h-full flex items-center pr-1 opacity-0 group-hover:opacity-100 transition-opacity"
+							>
+								<DropdownV2
+									items={[
+										{
+											displayName: 'Delete',
+											icon: Trash2,
+											action: () => favoriteManager.unstar(favorite.path, favorite.kind)
+										}
+									]}
+									size="xs"
+									fixedHeight={false}
+								/>
+							</div>
+						</div>
 					{/each}
 				</div>
 			{/if}

package/package/components/sidebar/FavoriteMenu.svelte.d.ts

@@ -1,8 +1,36 @@
+export type FavoriteKind = Exclude<NonNullable<StarData['requestBody']>['favorite_kind'], undefined>;
+export declare function getFavoriteHref(path: string, kind: FavoriteKind): string;
+export declare function getFavoriteLabel(path: string, kind: FavoriteKind): string;
+declare class FavoriteManager {
+    current: {
+        label: string;
+        path: string;
+        href: string;
+        kind: FavoriteKind;
+    }[];
+    unstar(path: string, favorite_kind: FavoriteKind, workspaceId?: string): Promise<void>;
+    star(path: string, favorite_kind: FavoriteKind, workspaceId?: string, summary?: string): Promise<void>;
+    isStarred(path: string, favorite_kind: string): boolean;
+}
+export declare const favoriteManager: FavoriteManager;
+export declare function parseFavoriteAsset(path: string): {
+    table: string;
+    schema: string | undefined;
+    assetName: string;
+    path: string;
+    scheme: string;
+};
 import type { MenubarBuilders } from '@melt-ui/svelte';
+import { type StarData } from '../../gen';
 interface Props {
     lightMode?: boolean;
     isCollapsed?: boolean;
-    favoriteLinks?: any;
+    favoriteLinks?: {
+        label: string;
+        href: string;
+        path: string;
+        kind: FavoriteKind;
+    }[];
     createMenu: MenubarBuilders['createMenu'];
 }
 declare const FavoriteMenu: import("svelte").Component<Props, {}, "">;

package/package/components/sidebar/MenuButton.svelte

@@ -1,14 +1,16 @@
 <script module lang="ts">export const sidebarClasses = {
-    text: 'text-primary-inverse dark:text-primary data-[light-mode=true]:text-primary text-xs font-normal',
-    selectedText: 'text-emphasis-inverse dark:text-emphasis text-xs font-normal',
-    sublabelText: 'text-secondary-inverse dark:text-secondary text-2xs font-normal',
-    hoverBg: 'transition-colors hover:bg-surface-hover-inverse dark:hover:bg-surface-hover data-[light-mode=true]:hover:bg-surface-hover'
+    text: 'text-secondary text-xs font-normal',
+    iconText: 'text-hint',
+    selectedText: 'text-emphasis text-xs font-semibold',
+    sublabelText: 'text-secondary text-2xs font-normal',
+    hoverBg: 'transition-colors hover:bg-surface-hover',
+    selectedBg: 'bg-surface-hover'
 };
 </script>
 
 <script lang="ts">import { twMerge } from 'tailwind-merge';
 import Popover from '../Popover.svelte';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import SideBarNotification from './SideBarNotification.svelte';
 import { conditionalMelt } from '../../utils';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
@@ -16,7 +18,7 @@ let { aiId = undefined, aiDescription = undefined, label = undefined, sublabel =
 let buttonRef = $state(undefined);
 let dispatch = createEventDispatcher();
 // Dynamic component based on whether href is provided
-const Element = href ? 'a' : 'button';
+const Element = untrack(() => href) ? 'a' : 'button';
 </script>
 
 {#if !disabled}
@@ -55,6 +57,7 @@ const Element = href ? 'a' : 'button';
 				classNames
 			)}
 			use:conditionalMelt={trigger}
+			aria-label={label}
 			title={isCollapsed ? undefined : label}
 			{...$trigger}
 		>
@@ -66,7 +69,7 @@ const Element = href ? 'a' : 'button';
 						<foreignObject x="5" y="5" width="16" height="16">
 							<SvelteComponent
 								size={16}
-								class={twMerge(sidebarClasses.text, 'transition-colors', iconClasses)}
+								class={twMerge(sidebarClasses.iconText, 'transition-colors', iconClasses)}
 								{...iconProps}
 							/>
 						</foreignObject>
@@ -74,7 +77,7 @@ const Element = href ? 'a' : 'button';
 				{:else}
 					<SvelteComponent
 						size={16}
-						class={twMerge('flex-shrink-0', sidebarClasses.text, 'transition-colors', iconClasses)}
+						class={twMerge('flex-shrink-0', sidebarClasses.iconText, 'transition-colors', iconClasses)}
 						{...iconProps}
 					/>
 				{/if}
@@ -93,7 +96,7 @@ const Element = href ? 'a' : 'button';
 					>
 						{label}
 						<span
-							class="pl-2 text-xs dark:text-secondary light:text-secondary-inverse font-semibold"
+							class="pl-2 text-xs text-secondary font-semibold"
 						>
 							{shortcut}
 						</span>

package/package/components/sidebar/MenuButton.svelte.d.ts

@@ -1,8 +1,10 @@
 export declare const sidebarClasses: {
     text: string;
+    iconText: string;
     selectedText: string;
     sublabelText: string;
     hoverBg: string;
+    selectedBg: string;
 };
 import type { MenubarMenuElements } from '@melt-ui/svelte';
 interface Props {

package/package/components/sidebar/MenuLink.svelte

@@ -31,22 +31,23 @@ navigating.subscribe(() => {
 			}}
 			{onclick}
 			class={twMerge(
-				'group flex items-center px-2 py-2 text-sm font-light rounded-md h-8 gap-3',
+				'group flex items-center px-2 py-2 text-sm font-light rounded-md h-8 gap-2',
 				isSelected
-					? 'bg-surface-selected-inverse dark:bg-surface-selected'
+					? sidebarClasses.selectedBg
 					: sidebarClasses.hoverBg,
 				isSelected ? sidebarClasses.selectedText : sidebarClasses.text,
 				classNames
 			)}
 			data-light-mode={lightMode}
 			target={href.includes('http') ? '_blank' : null}
+			aria-label={label}
 			title={isCollapsed ? undefined : label}
 			use:conditionalMelt={item}
 			{...$item}
 		>
 			{#if icon}
 				{@const SvelteComponent = icon}
-				<SvelteComponent size={16} class={twMerge('flex-shrink-0 transition-all')} />
+				<SvelteComponent size={16} class={twMerge('flex-shrink-0 transition-all', isSelected ? sidebarClasses.selectedText : sidebarClasses.iconText)} />
 			{/if}
 
 			{#if !isCollapsed}

package/package/components/sidebar/MultiplayerMenu.svelte

@@ -1,13 +1,14 @@
-<script lang="ts">import { enterpriseLicense, userStore, workspaceStore, awarenessStore } from '../../stores';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { enterpriseLicense, userStore, workspaceStore, awarenessStore } from '../../stores';
 import { BROWSER } from 'esm-env';
 import { WebsocketProvider } from 'y-websocket';
 import * as Y from 'yjs';
 import { page } from '$app/stores';
 import { slide } from 'svelte/transition';
 const wsProtocol = BROWSER && window.location.protocol == 'https:' ? 'wss' : 'ws';
-let awareness = undefined;
+let awareness = $state(undefined);
 let wsProvider = undefined;
-let connected = false;
+let connected = $state(false);
 function connectWorkspace(workspace) {
     const ydoc = new Y.Doc();
     wsProvider = new WebsocketProvider(`${wsProtocol}://${window.location.host}/ws_mp/`, workspace, ydoc);
@@ -30,11 +31,15 @@ function connectWorkspace(workspace) {
         setPeers();
     });
 }
-$: awareness?.setLocalState({
-    name: $userStore?.username,
-    url: $page.url.pathname
+run(() => {
+    awareness?.setLocalState({
+        name: $userStore?.username,
+        url: $page.url.pathname
+    });
+});
+run(() => {
+    $enterpriseLicense && $workspaceStore && connectWorkspace($workspaceStore);
 });
-$: $enterpriseLicense && $workspaceStore && connectWorkspace($workspaceStore);
 function showActivity(url) {
     if (url.startsWith('/scripts/add')) {
         return 'Creating a script';

package/package/components/sidebar/MultiplayerMenu.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const MultiplayerMenu: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type MultiplayerMenu = InstanceType<typeof MultiplayerMenu>;
+declare const MultiplayerMenu: import("svelte").Component<Record<string, never>, {}, "">;
+type MultiplayerMenu = ReturnType<typeof MultiplayerMenu>;
 export default MultiplayerMenu;

package/package/components/sidebar/OperatorMenu.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { Home, Menu as MenuIcon, Play, Settings, LogOut, Moon, Sun, Code2, LayoutDashboard, Building, Calendar, ServerCog, GraduationCap } from 'lucide-svelte';
+<script lang="ts">import { Home, Menu as MenuIcon, Play, Settings, LogOut, Moon, Sun, Code2, LayoutDashboard, Building, Calendar, ServerCog, GraduationCap, Table2 } from 'lucide-svelte';
 import { base } from '../../base';
 import MultiplayerMenu from './MultiplayerMenu.svelte';
 import { clearWorkspaceFromStorage, enterpriseLicense, superadmin, userWorkspaces, workspaceStore, tutorialsToDo, skippedAll } from '../../stores';
@@ -158,6 +158,8 @@ let showMore = $state(false);
 									<BarsStaggered size={16} />
 								{:else if favorite.kind == 'app' || favorite.kind == 'raw_app'}
 									<LayoutDashboard size={16} />
+								{:else if favorite.kind == 'asset'}
+									<Table2 size={16} />
 								{/if}
 							</span>
 							<span class="text-primary ml-2 grow min-w-0 text-xs truncate">

package/package/components/sidebar/OperatorMenu.svelte.d.ts

@@ -1,6 +1,11 @@
+import type { FavoriteKind } from './FavoriteMenu.svelte';
 interface Props {
     isCollapsed?: boolean;
-    favoriteLinks?: any;
+    favoriteLinks?: {
+        label: string;
+        href: string;
+        kind: FavoriteKind;
+    }[];
 }
 declare const OperatorMenu: import("svelte").Component<Props, {}, "">;
 type OperatorMenu = ReturnType<typeof OperatorMenu>;

package/package/components/sidebar/SideBarNotification.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">import Notification from '../common/alert/Notification.svelte';
-export let notificationCount = 0;
-export let small = false;
+let { notificationCount = 0, small = false } = $props();
 </script>
 
 {#if !small}

package/package/components/sidebar/SideBarNotification.svelte.d.ts

@@ -1,21 +1,7 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SideBarNotification: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     notificationCount?: number;
     small?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SideBarNotification = InstanceType<typeof SideBarNotification>;
+}
+declare const SideBarNotification: import("svelte").Component<Props, {}, "">;
+type SideBarNotification = ReturnType<typeof SideBarNotification>;
 export default SideBarNotification;

package/package/components/sidebar/SidebarContent.svelte

@@ -14,7 +14,7 @@ import { twMerge } from 'tailwind-merge';
 import { onMount } from 'svelte';
 import { base } from '../../base';
 import { changelogs } from './changelogs';
-import { page } from '$app/stores';
+import { page } from '$app/state';
 import SideBarNotification from './SideBarNotification.svelte';
 import KafkaIcon from '../icons/KafkaIcon.svelte';
 import NatsIcon from '../icons/NatsIcon.svelte';
@@ -292,10 +292,10 @@ let triggerMenuLinks = $derived([
         aiId: 'sidebar-menu-link-schedules',
         aiDescription: 'Button to navigate to schedules'
     },
-    ...allTriggerLinks.filter((link) => $usedTriggerKinds.includes(link.kind) || $page.url.pathname.includes(link.href))
+    ...allTriggerLinks.filter((link) => $usedTriggerKinds.includes(link.kind) || page.url.pathname.includes(link.href))
 ]);
 let extraTriggerLinks = $derived(allTriggerLinks.filter((link) => {
-    return !$page.url.pathname.includes(link.href) && !$usedTriggerKinds.includes(link.kind);
+    return !page.url.pathname.includes(link.href) && !$usedTriggerKinds.includes(link.kind);
 }));
 let secondaryMenuLinks = $derived([
     // {
@@ -470,7 +470,7 @@ let secondaryMenuLinks = $derived([
 		</div>
 		<div class="pt-4">
 			<div
-				class="text-gray-400 text-[0.5rem] uppercase transition-opacity"
+				class="text-secondary text-[0.5rem] uppercase transition-opacity"
 				class:opacity-0={isCollapsed}>Triggers</div
 			>
 			<Menubar class="flex flex-col gap-1">
@@ -485,8 +485,8 @@ let secondaryMenuLinks = $derived([
 									aiId="sidebar-menu-link-add-trigger"
 									aiDescription="Button to add a new trigger. Can be HTTP, WebSocket, Postgres, Kafka, NATS, SQS, GCP Pub/Sub, or MQTT"
 									class={twMerge(
-										'w-full text-gray-400 text-2xs flex flex-row gap-1 py-1 items-center px-2 hover:bg-[#2A3648] dark:hover:bg-[#30404e] rounded',
-										'data-[highlighted]:bg-[#2A3648] dark:data-[highlighted]:bg-[#30404e]'
+										'w-full text-secondary text-2xs flex flex-row gap-1 py-1 items-center px-2 hover:bg-surface-hover rounded',
+										'data-[highlighted]:bg-surface-hover'
 									)}
 									meltElement={trigger}
 								>

package/package/components/sidebar/WorkspaceMenu.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">import { isPremiumStore, superadmin, userStore, userWorkspaces, workspaceStore, workspaceUsageStore, workspaceColor, clearWorkspaceFromStorage } from '../../stores';
+import { isRuleActive } from '../../workspaceProtectionRules.svelte';
 import { Building, Plus, Settings, GitFork } from 'lucide-svelte';
 import MenuButton from './MenuButton.svelte';
 import { Menu, MenuItem } from '../meltComponents';
 import WorkspaceIcon from '../workspace/WorkspaceIcon.svelte';
 import { goto } from '../../navigation';
 import { base } from '../../base';
-import { page } from '$app/stores';
+import { page } from '$app/state';
 import { switchWorkspace } from '../../storeUtils';
 import MultiplayerMenu from './MultiplayerMenu.svelte';
 import { enterpriseLicense } from '../../stores';
@@ -34,11 +35,11 @@ async function toggleSwitchWorkspace(id) {
         '/flows/get/',
         '/apps/get/'
     ];
-    const isOnEditPage = editPages.some((editPage) => $page.route.id?.includes(editPage) ?? false);
+    const isOnEditPage = editPages.some((editPage) => page.route.id?.includes(editPage) ?? false);
     if (!isOnEditPage) {
         switchWorkspace(id);
-        if ($page.url.searchParams.get('workspace')) {
-            $page.url.searchParams.set('workspace', id);
+        if (page.url.searchParams.get('workspace')) {
+            page.url.searchParams.set('workspace', id);
         }
     }
     else {
@@ -134,7 +135,7 @@ const itemClass = 'text-primary flex flex-row gap-2 px-4 py-2 text-xs hover:bg-s
 									<div
 										class={twMerge(
 											'font-mono text-2xs whitespace-nowrap truncate text-left font-normal',
-											isSelected ? 'text-accent/80' : 'text-hint'
+											isSelected ? 'text-accent/80' : 'text-secondary'
 										)}
 										title={workspace.id}
 									>
@@ -154,7 +155,7 @@ const itemClass = 'text-primary flex flex-row gap-2 px-4 py-2 text-xs hover:bg-s
 					</MenuItem>
 				</div>
 			{/if}
-			{#if !strictWorkspaceSelect && !isCloudHosted()}
+			{#if !strictWorkspaceSelect && !isCloudHosted() && !isRuleActive('DisableWorkspaceForking')}
 				<div class="py-1" role="none">
 					<MenuItem href="{base}/user/fork_workspace" class={itemClass} {item}>
 						<GitFork size={16} />

package/package/components/splitPanes/AnimatedPane.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">import {} from 'svelte';
+<script lang="ts">import { untrack } from 'svelte';
 import { Pane } from 'svelte-splitpanes';
 import { cubicOut } from 'svelte/easing';
 let { duration = 300, easing = cubicOut, size = $bindable(), opened, children, ...props } = $props();
-let t = $state(opened ? 1 : 0);
+let t = $state(untrack(() => opened) ? 1 : 0);
 let computedSize = $derived((opened ? easing(t) : 1 - easing(1 - t)) * size);
 let lastTValue = 0;
 let loopIsRunning = false;

package/package/components/splitPanes/SplitPanesWrapper.svelte

@@ -1,30 +1,26 @@
-<script lang="ts">import { afterUpdate } from 'svelte';
-/**
- * This component should be used instead of `Splitpanes` if the wrapper `Splitpanes`
- * has elements that are **NOT** `Pane` above the place of this component.
- */
-/** This element will act as the reference point to the `Splitpanes`
- * and the top difference will be calculated from it. */
-export let refElement = undefined;
-let wrapper;
-let gap = 0;
+<script lang="ts">import { tick } from 'svelte';
+let { refElement = undefined, class: className = '', children } = $props();
+let wrapper = $state();
+let gap = $state(0);
 function getTopDifference() {
-    const parent = refElement || wrapper.parentElement;
+    const parent = refElement || wrapper?.parentElement;
     if (!(wrapper && parent))
         return 0;
     const wrapperTop = wrapper.getBoundingClientRect().top;
     const parentTop = parent.getBoundingClientRect().top;
     return wrapperTop - parentTop;
 }
-afterUpdate(() => {
-    gap = getTopDifference();
+$effect(() => {
+    // Re-run when refElement changes
+    refElement;
+    tick().then(() => (gap = getTopDifference()));
 });
 </script>
 
 <div
 	bind:this={wrapper}
-	class="h-full {$$props.class || ''}"
+	class="h-full {className}"
 	style="max-height: calc(100% - {gap}px) !important;"
 >
-	<slot />
+	{@render children?.()}
 </div>

package/package/components/splitPanes/SplitPanesWrapper.svelte.d.ts

@@ -1,30 +1,14 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const SplitPanesWrapper: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+/**
+ * This component should be used instead of `Splitpanes` if the wrapper `Splitpanes`
+ * has elements that are **NOT** `Pane` above the place of this component.
+ */
+interface Props {
+    /** This element will act as the reference point to the `Splitpanes`
+     * and the top difference will be calculated from it. */
     refElement?: HTMLElement | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type SplitPanesWrapper = InstanceType<typeof SplitPanesWrapper>;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const SplitPanesWrapper: import("svelte").Component<Props, {}, "">;
+type SplitPanesWrapper = ReturnType<typeof SplitPanesWrapper>;
 export default SplitPanesWrapper;

package/package/components/sqlTypeService.d.ts

@@ -5,7 +5,7 @@
  * custom TypeScript worker that injects SQL type annotations.
  */
 import type { InferAssetsSqlQueryDetails } from '../infer';
-export declare function waitForWorkerInitialization(fileUri: string): Promise<true>;
+export declare function waitForWorkerInitialization(modelUri: string): Promise<true>;
 /**
  * Update SQL query type information in the TypeScript worker
  *
@@ -16,4 +16,4 @@ export declare function waitForWorkerInitialization(fileUri: string): Promise<tr
  * @param queries - Array of SQL query details from the WASM parser
  * @returns Promise that resolves when the update is complete
  */
-export declare function updateSqlQueriesInWorker(fileUri: string, queries: InferAssetsSqlQueryDetails[]): Promise<void>;
+export declare function updateSqlQueriesInWorker(modelUri: string, queries: InferAssetsSqlQueryDetails[]): Promise<void>;

package/package/components/sqlTypeService.js

@@ -25,13 +25,11 @@ async function getWorkerClient() {
         throw error;
     }
 }
-export async function waitForWorkerInitialization(fileUri) {
+export async function waitForWorkerInitialization(modelUri) {
     const WORKER_INIT_TIMEOUT = 10000;
     const MAX_RETRIES = 10;
     const RETRY_DELAY = 300;
-    if (!fileUri.endsWith('.ts'))
-        fileUri += '.ts';
-    const uri = Uri.parse(fileUri);
+    const uri = Uri.parse(modelUri);
     const startTime = Date.now();
     for (let retries = 0; retries < MAX_RETRIES; retries++) {
         try {
@@ -61,11 +59,9 @@ export async function waitForWorkerInitialization(fileUri) {
  * @param queries - Array of SQL query details from the WASM parser
  * @returns Promise that resolves when the update is complete
  */
-export async function updateSqlQueriesInWorker(fileUri, queries) {
+export async function updateSqlQueriesInWorker(modelUri, queries) {
     try {
-        if (!fileUri.endsWith('.ts'))
-            fileUri += '.ts';
-        const uri = Uri.parse(fileUri);
+        const uri = Uri.parse(modelUri);
         const uriString = uri.toString();
         const workerClient = await getWorkerClient();
         const worker = await workerClient(uri);