windmill-components 1.596.1 → 1.612.2

package/package/components/sidebar/MenuButton.svelte

@@ -1,6 +1,7 @@
 <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>
@@ -11,7 +12,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, 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, 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 buttonRef = $state(undefined);
 let dispatch = createEventDispatcher();
 // Dynamic component based on whether href is provided
@@ -47,42 +48,63 @@ const Element = href ? 'a' : 'button';
 			{href}
 			data-light-mode={lightMode}
 			class={twMerge(
-				'group flex items-center px-2 py-2 font-light rounded-md h-8 gap-3 w-full',
+				'group flex items-center px-2 py-2 font-light rounded-md gap-2 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}
-				<SvelteComponent
-					size={16}
-					class={twMerge('flex-shrink-0', sidebarClasses.text, 'transition-colors', iconClasses)}
-					{...iconProps}
-				/>
-			{/if}
-
-			{#if !isCollapsed && label}
-				<span
-					class={twMerge(
-						'whitespace-pre truncate',
-						sidebarClasses.text,
-						'transition-all',
-						classNames
-					)}
+				<div
+					style="background-color: {color}"
+					class={twMerge('rounded-full center-center', color ? 'p-1 -ml-1' : '')}
 				>
-					{label}
-					<span class="pl-2 text-xs dark:text-secondary light:text-secondary-inverse font-semibold">
-						{shortcut}
-					</span>
-				</span>
+					<SvelteComponent
+						size={16}
+						class={twMerge('flex-shrink-0', sidebarClasses.text, 'transition-colors', iconClasses)}
+						{...iconProps}
+					/>
+				</div>
 			{/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 && notificationsCount > 0}
 				<div class="absolute translate-x-1/2 translate-y-1/2 -top-2 right-1 flex h-fit w-fit">
 					<SideBarNotification notificationCount={notificationsCount} small={true} />

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

@@ -1,6 +1,7 @@
 export declare const sidebarClasses: {
     text: string;
     selectedText: string;
+    sublabelText: string;
     hoverBg: string;
 };
 import type { MenubarMenuElements } from '@melt-ui/svelte';
@@ -8,6 +9,7 @@ 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.5 text-xs font-semibold mt-1">Live activity</div>
+		<div class="px-2 text-xs text-secondary font-normal 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-sm text-primary truncate">{user}</span>
-						<span class="text-xs text-primary truncate">{showActivity(url)}</span>
+						<span class="text-xs text-primary truncate">{user}</span>
+						<span class="text-2xs text-secondary truncate">{showActivity(url)}</span>
 					</div>
 				</div>
 			{/each}

package/package/components/sidebar/OperatorMenu.svelte

@@ -10,7 +10,7 @@ import BarsStaggered from '../icons/BarsStaggered.svelte';
 import { Menu, Menubar, MenuItem } from '../meltComponents';
 import MenuButton, { sidebarClasses } from './MenuButton.svelte';
 import MenuLink from './MenuLink.svelte';
-import { onDestroy } from 'svelte';
+import ResizeTransitionWrapper from '../common/ResizeTransitionWrapper.svelte';
 let darkMode = $state(false);
 let { isCollapsed = false, favoriteLinks = [] } = $props();
 let mainMenuLinks = $derived([
@@ -34,6 +34,12 @@ 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',
@@ -50,6 +56,23 @@ 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',
@@ -99,47 +122,14 @@ let secondMenuLinks = $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((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);
-    }
-});
+].filter(filterLink));
+let showMore = $state(false);
 </script>
 
 <Menubar>
 	{#snippet children({ createMenu })}
-		<Menu {createMenu} usePointerDownOutside>
+		<Menu {createMenu} usePointerDownOutside on:close={() => (showMore = false)}>
 			{#snippet triggr({ trigger })}
 				<MenuButton
 					class="!text-xs"
@@ -255,8 +245,8 @@ onDestroy(() => {
 							onClick={() => logout()}
 							class={twMerge(
 								'flex flex-row gap-3.5  items-center px-2 py-2 w-full',
-								'text-secondary text-xs',
-								'hover:bg-surface-hover hover:text-primary cursor-pointer',
+								'text-primary text-xs',
+								'hover:bg-surface-hover cursor-pointer',
 								'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
 							)}
 							{item}
@@ -265,57 +255,42 @@ onDestroy(() => {
 							Sign out
 						</MenuItem>
 					</div>
-					<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}
+					<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 />
 						{/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,7 +582,12 @@ 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} />
@@ -615,7 +620,7 @@ let secondaryMenuLinks = $derived([
 <ConfirmationModal
 	open={leaveWorkspaceModal}
 	title="Leave workspace"
-	confirmationText="Remove"
+	confirmationText="Leave workspace"
 	on:canceled={() => {
 		leaveWorkspaceModal = false
 	}}

package/package/components/sidebar/WorkspaceMenu.svelte

@@ -2,6 +2,7 @@
 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';
@@ -12,6 +13,7 @@ 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);
@@ -44,12 +46,6 @@ 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;
@@ -61,48 +57,37 @@ 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(() => {
+const groupedWorkspaces = $derived.by(() => {
     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}
-			<div class={isCollapsed ? '' : 'pl-6'}>
-				<MenuButton
-					class="!text-xs"
-					icon={GitFork}
-					label={removePrefix($workspaceStore ?? '', 'wm-fork-')}
-					{isCollapsed}
-					color={$workspaceColor}
-					{trigger}
-				/>
-			</div>
+			<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}
+			/>
 		{:else}
 			<MenuButton
 				class="!text-xs"
 				icon={Building}
+				iconProps={iconColor ? { style: `color: ${iconColor}` } : undefined}
 				label={$workspaceStore ?? ''}
 				{isCollapsed}
 				color={$workspaceColor}
@@ -114,13 +99,14 @@ const groupedWorkspaces = $derived(() => {
 	{#snippet children({ item })}
 		<div class="divide-y" role="none">
 			<div class="py-1">
-				{#each groupedWorkspaces() as { workspace, depth, isForked, parentName }}
+				{#each groupedWorkspaces as { workspace, depth, isForked, parentName }}
+					{@const isSelected = $workspaceStore === workspace.id}
 					<MenuItem
 						class={twMerge(
-							'text-xs min-w-0 w-full overflow-hidden flex flex-col py-1.5',
+							'text-xs min-w-0 w-full overflow-hidden flex flex-col py-2 px-3',
 							workspace.disabled && 'opacity-50 cursor-not-allowed',
-							$workspaceStore === workspace.id
-								? 'cursor-default bg-surface-selected'
+							isSelected
+								? 'cursor-default bg-surface-accent-selected'
 								: workspace.disabled
 									? ''
 									: 'cursor-pointer hover:bg-surface-hover data-[highlighted]:bg-surface-hover'
@@ -133,73 +119,47 @@ const groupedWorkspaces = $derived(() => {
 						{item}
 					>
 						<div class="flex items-center justify-between min-w-0 w-full">
-							<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="flex items-center gap-2 min-w-0" style:padding-left={`${depth * 16}px`}>
+								<WorkspaceIcon workspaceColor={workspace.color} {isForked} {parentName} />
 								<div class="min-w-0 flex-1">
 									<div
 										class={twMerge(
-											'truncate text-left text-[1.2em]',
-											isForked ? 'text-secondary' : 'text-primary'
+											'truncate text-left text-xs font-normal',
+											isSelected ? 'text-accent' : 'text-primary'
 										)}
+										title={workspace.name}
 									>
 										{workspace.name}{workspace.disabled ? ' (user disabled)' : ''}
 									</div>
 									<div
 										class={twMerge(
-											'font-mono text-2xs whitespace-nowrap truncate text-left',
-											isForked ? 'text-primary opacity-75' : 'text-primary'
+											'font-mono text-2xs whitespace-nowrap truncate text-left font-normal',
+											isSelected ? 'text-accent/80' : 'text-hint'
 										)}
+										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">
-					<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"
-					>
+					<MenuItem href="{base}/user/create_workspace" class={itemClass} {item}>
 						<Plus size={16} />
 						Workspace
-					</a>
+					</MenuItem>
 				</div>
 			{/if}
 			{#if !strictWorkspaceSelect && !isCloudHosted()}
 				<div class="py-1" role="none">
-					<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"
-					>
+					<MenuItem href="{base}/user/fork_workspace" class={itemClass} {item}>
 						<GitFork size={16} />
 						Fork current workspace
-					</a>
+					</MenuItem>
 				</div>
 			{/if}
 			{#if !strictWorkspaceSelect}
@@ -207,10 +167,7 @@ const groupedWorkspaces = $derived(() => {
 					<MenuItem
 						href="{base}/user/workspaces"
 						onClick={() => clearWorkspaceFromStorage()}
-						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'
-						)}
+						class={itemClass}
 						{item}
 					>
 						All workspaces
@@ -219,14 +176,7 @@ const groupedWorkspaces = $derived(() => {
 			{/if}
 			{#if ($userStore?.is_admin || $superadmin) && !strictWorkspaceSelect}
 				<div class="py-1" role="none">
-					<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}
-					>
+					<MenuItem href="{base}/workspace_settings" class={itemClass} {item}>
 						<Settings size={16} />
 						Workspace settings
 					</MenuItem>

package/package/components/sqlTypeService.js

@@ -4,7 +4,8 @@
  * This module handles the communication between the Monaco editor and the
  * custom TypeScript worker that injects SQL type annotations.
  */
-import { languages, Uri, editor, MarkerSeverity } from 'monaco-editor';
+import { getTypeScriptWorker } from '@codingame/monaco-vscode-standalone-typescript-language-features';
+import { Uri, editor, MarkerSeverity } from 'monaco-editor';
 /**
  * Cached promise for the TypeScript worker client
  * We lazily initialize this when first needed
@@ -14,7 +15,7 @@ async function getWorkerClient() {
     try {
         // Get or create the worker client
         if (!_workerClient) {
-            _workerClient = (await languages.typescript.getTypeScriptWorker());
+            _workerClient = (await getTypeScriptWorker());
         }
         return _workerClient;
     }
@@ -97,7 +98,7 @@ export async function updateSqlQueriesInWorker(fileUri, queries) {
 async function revalidateModel(model) {
     if (!model || model.isDisposed())
         return;
-    const getWorker = await languages.typescript.getTypeScriptWorker();
+    const getWorker = await 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, 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, containerClass = '', children, emptyMessage } = $props();
 setContext('datatable', {
     size
 });
@@ -63,7 +63,8 @@ $effect(() => {
 	class={twMerge(
 		'h-full',
 		rounded ? 'rounded-md overflow-hidden' : '',
-		noBorder ? 'border-0' : 'border'
+		noBorder ? 'border-0' : 'border',
+		containerClass
 	)}
 	bind:clientHeight={tableHeight}
 >

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

@@ -21,6 +21,7 @@ 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,6 +20,9 @@ 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');

package/package/components/text_input/TextInput.svelte.d.ts

@@ -24,6 +24,7 @@ declare function $$render<UnderlyingInputElT extends 'input' | 'textarea' = 'inp
     props: Props<UnderlyingInputElT>;
     exports: {
         focus: () => void;
+        select: () => void;
     };
     bindings: "value";
     slots: {};
@@ -36,6 +37,7 @@ declare class __sveltets_Render<UnderlyingInputElT extends 'input' | 'textarea'
     bindings(): "value";
     exports(): {
         focus: () => void;
+        select: () => void;
     };
 }
 interface $$IsomorphicComponent {