windmill-components 1.613.4 → 1.623.1

package/package/components/sidebar/MenuButton.svelte

@@ -1,7 +1,6 @@
 <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'
 };
 </script>
@@ -12,7 +11,7 @@ import { createEventDispatcher } from 'svelte';
 import SideBarNotification from './SideBarNotification.svelte';
 import { conditionalMelt } from '../../utils';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
-let { aiId = undefined, aiDescription = undefined, label = undefined, sublabel = undefined, icon = undefined, iconClasses = null, iconProps = null, isCollapsed, disabled = false, lightMode = false, stopPropagationOnClick = false, shortcut = '', notificationsCount = 0, color = null, trigger = undefined, href = undefined, class: classNames = undefined } = $props();
+let { aiId = undefined, aiDescription = undefined, label = undefined, icon = undefined, iconClasses = null, iconProps = null, isCollapsed, disabled = false, lightMode = false, stopPropagationOnClick = false, shortcut = '', notificationsCount = 0, color = null, trigger = undefined, href = undefined, class: classNames = undefined } = $props();
 let buttonRef = $state(undefined);
 let dispatch = createEventDispatcher();
 // Dynamic component based on whether href is provided
@@ -48,62 +47,41 @@ const Element = href ? 'a' : 'button';
 			{href}
 			data-light-mode={lightMode}
 			class={twMerge(
-				'group flex items-center px-2 py-2 font-light rounded-md gap-2 w-full',
+				'group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full',
 				sidebarClasses.hoverBg,
+				color ? 'border-4' : '',
 				'transition-all relative',
-				sublabel ? 'h-10' : 'h-8',
 				classNames
 			)}
+			style={color ? `border-color: ${color}; padding: 0 calc(0.5rem - 4px);` : ''}
 			use:conditionalMelt={trigger}
 			title={isCollapsed ? undefined : label}
 			{...$trigger}
 		>
 			{#if icon}
 				{@const SvelteComponent = icon}
-				<div
-					style="background-color: {color}"
-					class={twMerge('rounded-full center-center', color ? 'p-1 -ml-1' : '')}
-				>
-					<SvelteComponent
-						size={16}
-						class={twMerge('flex-shrink-0', sidebarClasses.text, 'transition-colors', iconClasses)}
-						{...iconProps}
-					/>
-				</div>
+				<SvelteComponent
+					size={16}
+					class={twMerge('flex-shrink-0', sidebarClasses.text, 'transition-colors', iconClasses)}
+					{...iconProps}
+				/>
 			{/if}
 
-			<div class="flex flex-col text-left grow min-w-0">
-				{#if !isCollapsed && label}
-					<div
-						class={twMerge(
-							'whitespace-pre truncate w-full',
-							sidebarClasses.text,
-							'transition-all',
-							classNames
-						)}
-						title={label}
-					>
-						{label}
-						<span
-							class="pl-2 text-xs dark:text-secondary light:text-secondary-inverse font-semibold"
-						>
-							{shortcut}
-						</span>
-					</div>
-				{/if}
-
-				{#if sublabel}
-					<div
-						class={twMerge(
-							'whitespace-pre truncate w-full',
-							sidebarClasses.sublabelText,
-							'transition-all',
-							classNames
-						)}
-						title={sublabel}>{sublabel}</div
-					>
-				{/if}
-			</div>
+			{#if !isCollapsed && label}
+				<span
+					class={twMerge(
+						'whitespace-pre truncate',
+						sidebarClasses.text,
+						'transition-all',
+						classNames
+					)}
+				>
+					{label}
+					<span class="pl-2 text-xs dark:text-secondary light:text-secondary-inverse font-semibold">
+						{shortcut}
+					</span>
+				</span>
+			{/if}
 
 			{#if isCollapsed && notificationsCount > 0}
 				<div class="absolute translate-x-1/2 translate-y-1/2 -top-2 right-1 flex h-fit w-fit">

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

@@ -1,7 +1,6 @@
 export declare const sidebarClasses: {
     text: string;
     selectedText: string;
-    sublabelText: string;
     hoverBg: string;
 };
 import type { MenubarMenuElements } from '@melt-ui/svelte';
@@ -9,7 +8,6 @@ interface Props {
     aiId?: string | undefined;
     aiDescription?: string | undefined;
     label?: string | undefined;
-    sublabel?: string | undefined;
     icon?: any | undefined;
     iconClasses?: string | null;
     iconProps?: any | null;

package/package/components/sidebar/MultiplayerMenu.svelte

@@ -80,7 +80,7 @@ function showActivity(url) {
 
 {#if connected}
 	<div class="divide-gray-100 border-t" role="none">
-		<div class="px-2 text-xs text-secondary font-normal mt-1">Live activity</div>
+		<div class="px-2.5 text-xs font-semibold mt-1">Live activity</div>
 		<div class="py-1 flex flex-col gap-y-1 max-h-48 overflow-auto" transition:slide>
 			{#each Object.entries($awarenessStore ?? {}) as [user, url]}
 				<div class="inline-flex gap-2 px-2 items-center">
@@ -93,8 +93,8 @@ function showActivity(url) {
 						>
 					</span>
 					<div class="flex flex-col">
-						<span class="text-xs text-primary truncate">{user}</span>
-						<span class="text-2xs text-secondary truncate">{showActivity(url)}</span>
+						<span class="text-sm text-primary truncate">{user}</span>
+						<span class="text-xs text-primary truncate">{showActivity(url)}</span>
 					</div>
 				</div>
 			{/each}

package/package/components/sidebar/OperatorMenu.svelte

@@ -4,13 +4,13 @@ import MultiplayerMenu from './MultiplayerMenu.svelte';
 import { clearWorkspaceFromStorage, enterpriseLicense, superadmin, userWorkspaces, workspaceStore, tutorialsToDo, skippedAll } from '../../stores';
 import { twMerge } from 'tailwind-merge';
 import { USER_SETTINGS_HASH } from './settings';
-import { logout } from '../../logoutKit';
+import { logout } from '../../logout';
 import DarkModeObserver from '../DarkModeObserver.svelte';
 import BarsStaggered from '../icons/BarsStaggered.svelte';
 import { Menu, Menubar, MenuItem } from '../meltComponents';
 import MenuButton, { sidebarClasses } from './MenuButton.svelte';
 import MenuLink from './MenuLink.svelte';
-import ResizeTransitionWrapper from '../common/ResizeTransitionWrapper.svelte';
+import { onDestroy } from 'svelte';
 let darkMode = $state(false);
 let { isCollapsed = false, favoriteLinks = [] } = $props();
 let mainMenuLinks = $derived([
@@ -34,12 +34,6 @@ let mainMenuLinks = $derived([
         $workspaceStore &&
         $userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.[link.id] ===
             true)));
-function filterLink(link) {
-    if (!$userWorkspaces || !$workspaceStore)
-        return false;
-    let userWorkspace = $userWorkspaces.find((_) => _.id === $workspaceStore);
-    return userWorkspace?.operator_settings?.[link.id] === true;
-}
 let secondMenuLinks = $derived([
     {
         label: 'Resources',
@@ -56,23 +50,6 @@ let secondMenuLinks = $derived([
         id: 'assets',
         href: `${base}/assets`
     },
-    {
-        label: 'Groups',
-        id: 'groups',
-        href: `${base}/groups`
-    },
-    {
-        label: 'Folders',
-        id: 'folders',
-        href: `${base}/folders`
-    },
-    {
-        label: 'Workers',
-        id: 'workers',
-        href: `${base}/workers`
-    }
-].filter(filterLink));
-let secondMenuTriggerLinks = $derived([
     {
         label: 'Custom HTTP routes',
         id: 'triggers',
@@ -122,14 +99,47 @@ let secondMenuTriggerLinks = $derived([
         label: 'Audit logs',
         id: 'audit_logs',
         href: `${base}/audit_logs`
+    },
+    {
+        label: 'Groups',
+        id: 'groups',
+        href: `${base}/groups`
+    },
+    {
+        label: 'Folders',
+        id: 'folders',
+        href: `${base}/folders`
+    },
+    {
+        label: 'Workers',
+        id: 'workers',
+        href: `${base}/workers`
     }
-].filter(filterLink));
-let showMore = $state(false);
+].filter((link) => {
+    if (!$userWorkspaces || !$workspaceStore)
+        return false;
+    return ($userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.[link.id] === true);
+}));
+let moreOpen = $state(false);
+let moreOpenTimeout = $state();
+function debouncedSetMoreOpen(value) {
+    if (moreOpenTimeout) {
+        clearTimeout(moreOpenTimeout);
+    }
+    moreOpenTimeout = setTimeout(() => {
+        moreOpen = value;
+    }, 150); // 150ms debounce
+}
+onDestroy(() => {
+    if (moreOpenTimeout) {
+        clearTimeout(moreOpenTimeout);
+    }
+});
 </script>
 
 <Menubar>
 	{#snippet children({ createMenu })}
-		<Menu {createMenu} usePointerDownOutside on:close={() => (showMore = false)}>
+		<Menu {createMenu} usePointerDownOutside>
 			{#snippet triggr({ trigger })}
 				<MenuButton
 					class="!text-xs"
@@ -245,8 +255,8 @@ let showMore = $state(false);
 							onClick={() => logout()}
 							class={twMerge(
 								'flex flex-row gap-3.5  items-center px-2 py-2 w-full',
-								'text-primary text-xs',
-								'hover:bg-surface-hover cursor-pointer',
+								'text-secondary text-xs',
+								'hover:bg-surface-hover hover:text-primary cursor-pointer',
 								'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
 							)}
 							{item}
@@ -255,42 +265,57 @@ let showMore = $state(false);
 							Sign out
 						</MenuItem>
 					</div>
-					<div onmouseleave={() => (showMore = false)} role="none">
-						{#if secondMenuLinks.length}
-							<ResizeTransitionWrapper vertical innerClass="w-full">
-								{#if !showMore}
-									<div onmouseenter={() => (showMore = true)} role="none">
-										<MenuItem {item}>
-											<div class="px-2 py-2 text-primary text-2xs">More...</div>
-										</MenuItem>
-									</div>
-								{:else}
-									{#snippet renderSecondMenuLinks(menuLinks: SecondMenuLink[])}
-										{#each menuLinks as menuLink (menuLink.href ?? menuLink.label)}
-											<MenuItem
-												href={menuLink.href}
-												class={twMerge(
-													'flex flex-row gap-3.5 items-center px-2 py-2 text-secondary text-2xs hover:bg-surface-hover hover:text-primary cursor-pointer',
-													'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
-												)}
-												{item}
-											>
-												{menuLink.label}
-											</MenuItem>
-										{/each}
-									{/snippet}
-									<div class="divide-y">
-										<div>{@render renderSecondMenuLinks(secondMenuLinks)}</div>
-										<div>{@render renderSecondMenuLinks(secondMenuTriggerLinks)}</div>
-									</div>
-								{/if}
-							</ResizeTransitionWrapper>
-						{/if}
-						{#if $enterpriseLicense}
-							<MultiplayerMenu />
+					<div
+						onmouseenter={() => debouncedSetMoreOpen(true)}
+						onmouseleave={() => debouncedSetMoreOpen(false)}
+						role="none"
+					>
+						<MenuItem
+							onFocusIn={() => debouncedSetMoreOpen(true)}
+							onFocusOut={() => debouncedSetMoreOpen(false)}
+							{item}
+						>
+							{#if !moreOpen || secondMenuLinks.length === 0}
+								<div class="px-2 py-2 text-primary text-2xs">More...</div>
+							{/if}
+						</MenuItem>
+						{#if moreOpen && secondMenuLinks.length > 0}
+							{#each secondMenuLinks as menuLink (menuLink.href ?? menuLink.label)}
+								<div>
+									<MenuItem
+										href={menuLink.href}
+										class={twMerge(
+											'flex flex-row gap-3.5 items-center px-2 py-2 text-secondary text-2xs hover:bg-surface-hover hover:text-primary cursor-pointer',
+											'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+										)}
+										{item}
+										onFocusIn={() => debouncedSetMoreOpen(true)}
+										onFocusOut={() => debouncedSetMoreOpen(false)}
+									>
+										{menuLink.label}
+									</MenuItem>
+								</div>
+							{/each}
 						{/if}
 					</div>
 				</div>
+				{#if $enterpriseLicense}
+					<div
+						onmouseenter={() => {
+							if (moreOpenTimeout) {
+								setTimeout(() => {
+									clearTimeout(moreOpenTimeout)
+								}, 15)
+							}
+						}}
+						onmouseleave={() => {
+							debouncedSetMoreOpen(false)
+						}}
+						role="none"
+					>
+						<MultiplayerMenu />
+					</div>
+				{/if}
 			{/snippet}
 		</Menu>
 	{/snippet}

package/package/components/sidebar/SidebarContent.svelte

@@ -582,12 +582,7 @@ let secondaryMenuLinks = $derived([
 							{/snippet}
 							{#snippet children({ item })}
 								{#each menuLink.subItems as subItem (subItem.href ?? subItem.label)}
-									<MenuItem
-										href={subItem.href}
-										class={itemClass}
-										target={subItem.external !== false ? '_blank' : undefined}
-										{item}
-									>
+									<MenuItem href={subItem.href} class={itemClass} target={subItem.external !== false ? "_blank" : undefined} {item}>
 										<div class="flex flex-row items-center gap-2">
 											{#if subItem.icon}
 												<subItem.icon size={16} />
@@ -620,7 +615,7 @@ let secondaryMenuLinks = $derived([
 <ConfirmationModal
 	open={leaveWorkspaceModal}
 	title="Leave workspace"
-	confirmationText="Leave workspace"
+	confirmationText="Remove"
 	on:canceled={() => {
 		leaveWorkspaceModal = false
 	}}

package/package/components/sidebar/UserMenu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { goto } from '../../navigation';
-import { logout } from '../../logoutKit';
+import { logout } from '../../logout';
 import { userStore, usageStore, workspaceUsageStore, isPremiumStore, workspaceStore } from '../../stores';
 import { USER_SETTINGS_HASH } from './settings';
 import { isCloudHosted } from '../../cloud';

package/package/components/sidebar/WorkspaceMenu.svelte

@@ -2,7 +2,6 @@
 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';
@@ -13,7 +12,6 @@ import { isCloudHosted } from '../../cloud';
 import { workspaceAIClients } from '../copilot/lib';
 import { twMerge } from 'tailwind-merge';
 import { buildWorkspaceHierarchy } from '../../utils/workspaceHierarchy';
-import { getContrastTextColor } from '../../utils';
 function removePrefix(str, prefix) {
     if (str.startsWith(prefix)) {
         return str.substring(prefix.length);
@@ -46,6 +44,12 @@ async function toggleSwitchWorkspace(id) {
         await goto('/');
     }
 }
+// Helper function to check if a workspace is forked
+function isForkedWorkspace(workspaceId) {
+    if (!$userWorkspaces)
+        return false;
+    return $userWorkspaces.some((w) => w.id === workspaceId && w.parent_workspace_id != null);
+}
 function getForkedWorkspace(workspaceId) {
     if (!$userWorkspaces)
         return undefined;
@@ -57,37 +61,48 @@ function getParentWorkspace(parentId) {
     return $userWorkspaces.find((w) => w.id === parentId);
 }
 // Group workspaces into parent-child hierarchy using Svelte 5 derived and the new utility
-const groupedWorkspaces = $derived.by(() => {
+const groupedWorkspaces = $derived(() => {
     if (!$userWorkspaces)
         return [];
     return buildWorkspaceHierarchy($userWorkspaces);
 });
-const itemClass = 'text-primary flex flex-row gap-2 px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary';
 </script>
 
+{#if isForkedWorkspace($workspaceStore ?? '') && !isCollapsed}
+	{@const forkedWorkspace = getForkedWorkspace($workspaceStore ?? '')}
+	{@const parentWorkspace = forkedWorkspace
+		? getParentWorkspace(forkedWorkspace.parent_workspace_id!)
+		: null}
+	<Menu {createMenu} usePointerDownOutside>
+		{#snippet triggr({ trigger })}
+			<div class="group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full text-xs">
+				<Building size={12} class="text-primary" />
+				<span class="text-xs text-primary"> {parentWorkspace?.name ?? ''} </span>
+			</div>
+		{/snippet}
+	</Menu>
+{/if}
 <Menu {createMenu} usePointerDownOutside>
 	{#snippet triggr({ trigger })}
 		{@const forkedWorkspace = getForkedWorkspace($workspaceStore ?? '')}
 		{@const parentWorkspace = forkedWorkspace
 			? getParentWorkspace(forkedWorkspace.parent_workspace_id!)
 			: null}
-		{@const iconColor = getContrastTextColor($workspaceColor)}
 		{#if forkedWorkspace && parentWorkspace}
-			<MenuButton
-				class="!text-xs"
-				icon={GitFork}
-				iconProps={iconColor ? { style: `color: ${iconColor}` } : undefined}
-				label={removePrefix($workspaceStore ?? '', 'wm-fork-')}
-				sublabel={parentWorkspace?.name ? `Fork of ${parentWorkspace.name}` : undefined}
-				{isCollapsed}
-				color={$workspaceColor}
-				{trigger}
-			/>
+			<div class={isCollapsed ? '' : 'pl-6'}>
+				<MenuButton
+					class="!text-xs"
+					icon={GitFork}
+					label={removePrefix($workspaceStore ?? '', 'wm-fork-')}
+					{isCollapsed}
+					color={$workspaceColor}
+					{trigger}
+				/>
+			</div>
 		{:else}
 			<MenuButton
 				class="!text-xs"
 				icon={Building}
-				iconProps={iconColor ? { style: `color: ${iconColor}` } : undefined}
 				label={$workspaceStore ?? ''}
 				{isCollapsed}
 				color={$workspaceColor}
@@ -99,14 +114,13 @@ const itemClass = 'text-primary flex flex-row gap-2 px-4 py-2 text-xs hover:bg-s
 	{#snippet children({ item })}
 		<div class="divide-y" role="none">
 			<div class="py-1">
-				{#each groupedWorkspaces as { workspace, depth, isForked, parentName }}
-					{@const isSelected = $workspaceStore === workspace.id}
+				{#each groupedWorkspaces() as { workspace, depth, isForked, parentName }}
 					<MenuItem
 						class={twMerge(
-							'text-xs min-w-0 w-full overflow-hidden flex flex-col py-2 px-3',
+							'text-xs min-w-0 w-full overflow-hidden flex flex-col py-1.5',
 							workspace.disabled && 'opacity-50 cursor-not-allowed',
-							isSelected
-								? 'cursor-default bg-surface-accent-selected'
+							$workspaceStore === workspace.id
+								? 'cursor-default bg-surface-selected'
 								: workspace.disabled
 									? ''
 									: 'cursor-pointer hover:bg-surface-hover data-[highlighted]:bg-surface-hover'
@@ -119,47 +133,73 @@ const itemClass = 'text-primary flex flex-row gap-2 px-4 py-2 text-xs hover:bg-s
 						{item}
 					>
 						<div class="flex items-center justify-between min-w-0 w-full">
-							<div class="flex items-center gap-2 min-w-0" style:padding-left={`${depth * 16}px`}>
-								<WorkspaceIcon workspaceColor={workspace.color} {isForked} {parentName} />
+							<div
+								class={twMerge('flex items-center gap-2 min-w-0', 'pl-4')}
+								style:padding-left={`${4 + depth * 12}px`}
+							>
+								{#if isForked}
+									<GitFork size={12} class="text-primary flex-shrink-0" />
+								{:else}
+									<Building size={12} />
+								{/if}
 								<div class="min-w-0 flex-1">
 									<div
 										class={twMerge(
-											'truncate text-left text-xs font-normal',
-											isSelected ? 'text-accent' : 'text-primary'
+											'truncate text-left text-[1.2em]',
+											isForked ? 'text-secondary' : 'text-primary'
 										)}
-										title={workspace.name}
 									>
 										{workspace.name}{workspace.disabled ? ' (user disabled)' : ''}
 									</div>
 									<div
 										class={twMerge(
-											'font-mono text-2xs whitespace-nowrap truncate text-left font-normal',
-											isSelected ? 'text-accent/80' : 'text-hint'
+											'font-mono text-2xs whitespace-nowrap truncate text-left',
+											isForked ? 'text-primary opacity-75' : 'text-primary'
 										)}
-										title={workspace.id}
 									>
 										{workspace.id}
 									</div>
+									{#if isForked && parentName}
+										<div class="text-primary text-2xs truncate text-left pl-2 min-h-[1rem]">
+											Fork of {parentName}
+										</div>
+									{/if}
 								</div>
 							</div>
+							{#if workspace.color}
+								<div
+									class="w-5 h-5 mr-2 rounded border border-gray-300 dark:border-gray-600"
+									style="background-color: {workspace.color}"
+								></div>
+							{/if}
 						</div>
 					</MenuItem>
 				{/each}
 			</div>
 			{#if (isCloudHosted() || $superadmin) && !strictWorkspaceSelect}
 				<div class="py-1" role="none">
-					<MenuItem href="{base}/user/create_workspace" class={itemClass} {item}>
+					<a
+						href="{base}/user/create_workspace"
+						class="text-primary px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary flex flex-flow gap-2"
+						role="menuitem"
+						tabindex="-1"
+					>
 						<Plus size={16} />
 						Workspace
-					</MenuItem>
+					</a>
 				</div>
 			{/if}
 			{#if !strictWorkspaceSelect && !isCloudHosted()}
 				<div class="py-1" role="none">
-					<MenuItem href="{base}/user/fork_workspace" class={itemClass} {item}>
+					<a
+						href="{base}/user/fork_workspace"
+						class="text-primary px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary flex flex-flow gap-2"
+						role="menuitem"
+						tabindex="-1"
+					>
 						<GitFork size={16} />
 						Fork current workspace
-					</MenuItem>
+					</a>
 				</div>
 			{/if}
 			{#if !strictWorkspaceSelect}
@@ -167,7 +207,10 @@ const itemClass = 'text-primary flex flex-row gap-2 px-4 py-2 text-xs hover:bg-s
 					<MenuItem
 						href="{base}/user/workspaces"
 						onClick={() => clearWorkspaceFromStorage()}
-						class={itemClass}
+						class={twMerge(
+							'text-primary block px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary',
+							'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+						)}
 						{item}
 					>
 						All workspaces
@@ -176,7 +219,14 @@ const itemClass = 'text-primary flex flex-row gap-2 px-4 py-2 text-xs hover:bg-s
 			{/if}
 			{#if ($userStore?.is_admin || $superadmin) && !strictWorkspaceSelect}
 				<div class="py-1" role="none">
-					<MenuItem href="{base}/workspace_settings" class={itemClass} {item}>
+					<MenuItem
+						href="{base}/workspace_settings"
+						class={twMerge(
+							'text-secondary px-4 py-2 text-xs hover:bg-surface-hover hover:text-primary flex flex-flow gap-2',
+							'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
+						)}
+						{item}
+					>
 						<Settings size={16} />
 						Workspace settings
 					</MenuItem>

package/package/components/sqlTypeService.js

@@ -4,8 +4,7 @@
  * This module handles the communication between the Monaco editor and the
  * custom TypeScript worker that injects SQL type annotations.
  */
-import { getTypeScriptWorker } from '@codingame/monaco-vscode-standalone-typescript-language-features';
-import { Uri, editor, MarkerSeverity } from 'monaco-editor';
+import { languages, Uri, editor, MarkerSeverity } from 'monaco-editor';
 /**
  * Cached promise for the TypeScript worker client
  * We lazily initialize this when first needed
@@ -15,7 +14,7 @@ async function getWorkerClient() {
     try {
         // Get or create the worker client
         if (!_workerClient) {
-            _workerClient = (await getTypeScriptWorker());
+            _workerClient = (await languages.typescript.getTypeScriptWorker());
         }
         return _workerClient;
     }
@@ -98,7 +97,7 @@ export async function updateSqlQueriesInWorker(fileUri, queries) {
 async function revalidateModel(model) {
     if (!model || model.isDisposed())
         return;
-    const getWorker = await getTypeScriptWorker();
+    const getWorker = await languages.typescript.getTypeScriptWorker();
     const worker = await getWorker(model.uri);
     const diagnostics = (await Promise.all([
         worker.getSyntacticDiagnostics(model.uri.toString()),

package/package/components/table/DataTable.svelte

@@ -10,7 +10,7 @@ let footerHeight = $state(0);
 let tableHeight = $state(0);
 const dispatch = createEventDispatcher();
 let tableContainer = $state();
-let { paginated = false, currentPage = $bindable(1), showNext = true, showPrev = true, loadMore = 0, shouldLoadMore = false, rounded = true, size = 'md', perPage = $bindable(undefined), shouldHidePagination = false, noBorder = false, rowCount = undefined, hasMore = true, contentHeight = $bindable(0), tableFixed = false, infiniteScroll = undefined, neverShowLoader = false, loading = false, loadingMore = false, containerClass = '', children, emptyMessage } = $props();
+let { paginated = false, currentPage = $bindable(1), showNext = true, showPrev = true, loadMore = 0, shouldLoadMore = false, rounded = true, size = 'md', perPage = $bindable(undefined), shouldHidePagination = false, noBorder = false, rowCount = undefined, hasMore = true, contentHeight = $bindable(0), tableFixed = false, infiniteScroll = undefined, neverShowLoader = false, loading = false, loadingMore = false, children, emptyMessage } = $props();
 setContext('datatable', {
     size
 });
@@ -63,8 +63,7 @@ $effect(() => {
 	class={twMerge(
 		'h-full',
 		rounded ? 'rounded-md overflow-hidden' : '',
-		noBorder ? 'border-0' : 'border',
-		containerClass
+		noBorder ? 'border-0' : 'border'
 	)}
 	bind:clientHeight={tableHeight}
 >

package/package/components/table/DataTable.svelte.d.ts

@@ -21,7 +21,6 @@ interface Props {
     neverShowLoader?: boolean;
     loading?: boolean;
     loadingMore?: boolean;
-    containerClass?: string;
     children?: import('svelte').Snippet;
     emptyMessage?: import('svelte').Snippet;
 }

package/package/components/text_input/TextInput.svelte

@@ -20,9 +20,6 @@ export const inputSizeClasses = {
 export function focus() {
     inputEl?.focus();
 }
-export function select() {
-    inputEl?.select();
-}
 let inputEl = $state();
 let { inputProps: _inputProps, value = $bindable(), class: className = '', error, size = 'md', unifiedHeight = true, underlyingInputEl: _underlyingInputEl } = $props();
 let underlyingInputEl = $derived(_underlyingInputEl ?? 'input');