windmill-components 1.558.4 → 1.596.0

package/package/components/common/languageIcons/LanguageIcon.svelte

@@ -21,7 +21,7 @@ import NuIcon from '../../icons/NuIcon.svelte';
 import JavaIcon from '../../icons/JavaIcon.svelte';
 import DuckDbIcon from '../../icons/DuckDbIcon.svelte';
 import RubyIcon from '../../icons/RubyIcon.svelte';
-let { lang, width = 30, height = 30, scale = 1, ...rest } = $props();
+let { lang, width = 30, height = 30, scale = 1, size = undefined, ...rest } = $props();
 const languageLabel = {
     python3: 'Python',
     deno: 'TypeScript',
@@ -46,7 +46,7 @@ const languageLabel = {
     nu: 'Nu',
     java: 'Java',
     ruby: 'Ruby'
-    // for related places search: ADD_NEW_LANG 
+    // for related places search: ADD_NEW_LANG
 };
 const langToComponent = {
     go: GoIcon,
@@ -86,8 +86,8 @@ const SvelteComponent = $derived(langToComponent[lang]);
 <div class="relative">
 	<SvelteComponent
 		title={languageLabel[lang]}
-		width={width * scale}
-		height={height * scale}
+		width={size ? size : width * scale}
+		height={size ? size : height * scale}
 		{...rest}
 	/>
 	{#if lang === 'deno'}

package/package/components/common/languageIcons/LanguageIcon.svelte.d.ts

@@ -5,6 +5,7 @@ interface Props {
     height?: number;
     scale?: number;
     [key: string]: any;
+    size?: number;
 }
 declare const LanguageIcon: import("svelte").Component<Props, {}, "">;
 type LanguageIcon = ReturnType<typeof LanguageIcon>;

package/package/components/common/modal/AlwaysMountedModal.svelte

@@ -47,7 +47,7 @@ export function open() {
 							}}
 							class="hover:bg-surface-hover bg-surface-secondary rounded-full w-8 h-8 flex items-center justify-center transition-all"
 						>
-							<X class="text-tertiary" />
+							<X class="text-primary" />
 						</button>
 					</div>
 				</div>

package/package/components/common/modal/Modal.svelte

@@ -41,7 +41,7 @@ function fadeFast(node) {
 	<div
 		on:click={() => (open = false)}
 		transition:fadeFast|local
-		class={'absolute top-0 bottom-0 left-0 right-0 z-[9999]'}
+		class={'fixed top-0 bottom-0 left-0 right-0 z-[9999]'}
 		role="dialog"
 		tabindex="-1"
 	>
@@ -77,7 +77,7 @@ function fadeFast(node) {
 								<slot name="settings" />
 							</div>
 
-							<div class="mt-4 text-sm text-tertiary">
+							<div class="mt-4 text-sm text-primary">
 								<slot />
 							</div>
 						</div>

package/package/components/common/modal/Modal2.svelte

@@ -8,15 +8,24 @@ export let title;
 export let css = {};
 export let target = '';
 export let isOpen = false;
-export let fixedSize = 'md';
-// Add size mapping with custom pixel values
-const sizeStyles = {
-    xs: { width: '400px', height: '250px' },
-    sm: { width: '600px', height: '400px' },
-    md: { width: '800px', height: '500px' },
-    lg: { width: '1400px', height: '720px' },
-    xl: { width: '1600px', height: '800px' },
-    xxl: { width: '1600px', height: '1000px' }
+export let fixedWidth = 'md';
+export let fixedHeight = 'md';
+export let contentClasses = '';
+const widthMap = {
+    xs: '400px',
+    sm: '600px',
+    md: '800px',
+    lg: '1400px',
+    xl: '1600px',
+    xxl: '1600px'
+};
+const heightMap = {
+    xs: '250px',
+    sm: '400px',
+    md: '500px',
+    lg: '720px',
+    xl: '800px',
+    xxl: '1000px'
 };
 export function close() {
     isOpen = false;
@@ -41,16 +50,16 @@ function fadeFast(node) {
 {#if isOpen}
 	<Portal name="always-mounted" {target}>
 		<div
-			class={'fixed top-0 bottom-0 left-0 right-0 transition-all overflow-auto z-[1100] bg-black bg-opacity-60 w-full h-full'}
+			class={'fixed top-0 bottom-0 left-0 right-0 transition-all z-[1110] overflow-auto bg-black bg-opacity-60 w-full h-full'}
 			transition:fadeFast|local
 		>
 			<div class="flex min-h-full items-center justify-center p-8">
 				<div
-					style={`width: ${sizeStyles[fixedSize].width}; height: ${sizeStyles[fixedSize].height}; ${
+					style={`width: ${widthMap[fixedWidth]}; height: ${heightMap[fixedHeight]}; ${
 						css?.popup?.style || ''
 					}`}
 					class={twMerge(
-						'max-h-screen-80 max-w-screen-80 rounded-lg relative bg-surface pt-2 px-4 pb-4',
+						'max-h-screen-80 max-w-screen-80 rounded-lg relative bg-surface p-4',
 						css?.popup?.class,
 						'wm-modal-form-popup'
 					)}
@@ -74,11 +83,11 @@ function fadeFast(node) {
 												<div class="w-8">
 													<button
 														on:click={() => {
-															isOpen = false
+															close()
 														}}
 														class="hover:bg-surface-hover rounded-full w-8 h-8 flex items-center justify-center transition-all"
 													>
-														<X class="text-tertiary " />
+														<X class="text-primary " />
 													</button>
 												</div>
 											</List>
@@ -90,7 +99,10 @@ function fadeFast(node) {
 
 						<!-- svelte-ignore a11y-click-events-have-key-events -->
 						<!-- svelte-ignore a11y-no-static-element-interactions -->
-						<div class="w-full flex grow min-h-0" on:click|stopPropagation={() => {}}>
+						<div
+							class="w-full flex grow min-h-0 {contentClasses}"
+							on:click|stopPropagation={() => {}}
+						>
 							<slot />
 						</div>
 					</List>

package/package/components/common/modal/Modal2.svelte.d.ts

@@ -21,7 +21,9 @@ declare const Modal2: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
     css?: any;
     target?: string;
     isOpen?: boolean;
-    fixedSize?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+    fixedWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+    fixedHeight?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+    contentClasses?: string;
     close?: () => void;
     open?: () => void;
 }, {

package/package/components/common/popup/PopupV2.svelte

@@ -6,7 +6,7 @@ let { floatingConfig = {
     strategy: 'absolute',
     //@ts-ignore
     placement: 'bottom-center'
-}, open = $bindable(false), target = undefined, button, children } = $props();
+}, open = $bindable(false), target = undefined, button, children, class: classNames = undefined } = $props();
 // export let containerClasses: string = 'rounded-lg shadow-md border p-4 bg-surface'
 // export let floatingClasses: string = ''
 const [floatingRef, floatingContent] = createFloatingActions(floatingConfig);
@@ -22,7 +22,7 @@ function close() {
 <Portal name="popup-v2" {target}>
 	{#if open}
 		<div
-			class="border rounded-lg shadow-lg bg-surface z5000"
+			class="dark:border rounded-lg shadow-lg bg-surface z5000 {classNames ?? ''}"
 			style="position:absolute"
 			use:floatingContent
 			transition:fly={{ duration: 100, y: -16 }}

package/package/components/common/popup/PopupV2.svelte.d.ts

@@ -7,6 +7,7 @@ interface Props {
     children?: import('svelte').Snippet<[{
         close: () => void;
     }]>;
+    class?: string;
 }
 declare const PopupV2: import("svelte").Component<Props, {}, "open">;
 type PopupV2 = ReturnType<typeof PopupV2>;

package/package/components/common/seconds/SecondsInput.svelte

@@ -42,8 +42,8 @@ function convertUnitsToSeconds() {
 			value={seconds == null || seconds == undefined
 				? 'Not set'
 				: disabled
-				? ''
-				: seconds + ' second' + (seconds === 1 ? '' : 's')}
+					? ''
+					: seconds + ' second' + (seconds === 1 ? '' : 's')}
 			{disabled}
 			readonly
 			type="text"

package/package/components/common/slack/SlackConnectionStatus.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">import { Badge, Button } from '..';
+import { Plug, RotateCw, Unplug } from 'lucide-svelte';
+import { base } from '../../../base';
+let { isConnected, slackTeamName, mode, onRefresh, onDisconnect } = $props();
+// Connection URLs based on mode
+let connectUrl = $derived(mode === 'instance'
+    ? `${base}/api/oauth/connect_slack?instance=true`
+    : `${base}/workspace_settings?tab=slack`);
+</script>
+
+<div class="flex items-center gap-2">
+	{#if isConnected === undefined}
+		<!-- Loading State -->
+		<RotateCw size={14} class="animate-spin text-secondary" />
+		{#if onRefresh}
+			<Button
+				variant="default"
+				unifiedSize="sm"
+				onclick={onRefresh}
+				startIcon={{ icon: RotateCw }}
+			/>
+		{/if}
+	{:else if isConnected}
+		<!-- Connected State - Show status indicator -->
+		<div class="flex items-center gap-2">
+			<Badge color="green">
+				<Plug size={14} />
+				<span class="text-xs text-primary">
+					{#if slackTeamName}
+						{mode === 'instance' ? 'Instance' : 'Workspace'} connected to the Slack workspace '{slackTeamName}'
+					{:else}
+						{mode === 'instance' ? 'Instance' : 'Workspace'} connected to Slack workspace
+					{/if}
+				</span>
+			</Badge>
+		</div>
+		<!-- Disconnect Button -->
+		{#if onDisconnect}
+			<Button
+				variant="default"
+				unifiedSize="sm"
+				onclick={onDisconnect}
+				startIcon={{ icon: Unplug }}
+				destructive
+			>
+				Disconnect slack
+			</Button>
+		{/if}
+	{:else}
+		<!-- Not Connected - Show connect button -->
+
+		<Badge color="red">
+			<Unplug size={14} />
+			<span class="text-xs text-primary"
+				>{mode === 'instance' ? 'Instance' : 'Workspace'} not connected to Slack</span
+			>
+		</Badge>
+
+		<a href={connectUrl} class="text-xs"
+			>{mode === 'instance' ? 'Connect instance to Slack' : 'Open workspace slack settings'}</a
+		>
+	{/if}
+</div>

package/package/components/common/slack/SlackConnectionStatus.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    isConnected: boolean | undefined;
+    slackTeamName?: string;
+    mode: 'instance' | 'workspace';
+    onRefresh?: () => void;
+    onDisconnect?: () => void;
+}
+declare const SlackConnectionStatus: import("svelte").Component<Props, {}, "">;
+type SlackConnectionStatus = ReturnType<typeof SlackConnectionStatus>;
+export default SlackConnectionStatus;

package/package/components/common/smtp/SmtpConfigurationStatus.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">import { Badge, Button } from '..';
+import { Settings } from 'lucide-svelte';
+let { hasSmtpConfig, openSmtpSettings } = $props();
+</script>
+
+<div class="flex items-center gap-2">
+	{#if hasSmtpConfig}
+		<Badge color="green">SMTP configured</Badge>
+	{:else}
+		<Badge color="red">SMTP not configured</Badge>
+	{/if}
+	{#if openSmtpSettings}
+		<Button
+			variant="default"
+			unifiedSize="sm"
+			startIcon={{ icon: Settings }}
+			onclick={openSmtpSettings}>Configure SMTP</Button
+		>
+	{:else}
+		<span class="text-xs text-secondary">SMTP is configured by the instance admin</span>
+	{/if}
+</div>

package/package/components/common/smtp/SmtpConfigurationStatus.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    hasSmtpConfig: boolean;
+    openSmtpSettings?: () => void;
+}
+declare const SmtpConfigurationStatus: import("svelte").Component<Props, {}, "">;
+type SmtpConfigurationStatus = ReturnType<typeof SmtpConfigurationStatus>;
+export default SmtpConfigurationStatus;

package/package/components/common/stepper/Stepper.svelte

@@ -39,7 +39,7 @@ function getStepColor(index, selectedIndex, statusByStep, maxReachedIndex) {
         }
         else {
             return current
-                ? 'border-gray-500 border bg-gray-200 text-tertiary'
+                ? 'border-gray-500 border bg-gray-200 text-primary'
                 : 'border-gray-500 border';
         }
     }
@@ -47,7 +47,7 @@ function getStepColor(index, selectedIndex, statusByStep, maxReachedIndex) {
 </script>
 
 <div class="flex justify-between">
-	<ol class="relative z-20 flex justify-between items-centers text-sm font-medium text-tertiary">
+	<ol class="relative z-20 flex justify-between items-centers text-sm font-medium text-primary">
 		{#each tabs ?? [] as step, index}
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
@@ -77,7 +77,7 @@ function getStepColor(index, selectedIndex, statusByStep, maxReachedIndex) {
 				<span
 					class={classNames(
 						'hidden sm:block',
-						selectedIndex === index ? 'font-semibold text-primary' : 'font-normal text-tertiary'
+						selectedIndex === index ? 'font-semibold text-primary' : 'font-normal text-primary'
 					)}
 				>
 					{step}

package/package/components/common/table/AppRow.svelte

@@ -8,7 +8,7 @@ import Button from '../button/Button.svelte';
 import Row from './Row.svelte';
 import DraftBadge from '../../DraftBadge.svelte';
 import Badge from '../badge/Badge.svelte';
-import { ExternalLink, Eye, File, FileJson, FolderOpen, GitFork, ChevronUpSquare, History, Pen, Share, Trash, Clipboard } from 'lucide-svelte';
+import { ExternalLink, Eye, File, FileJson, FolderOpen, GitFork, ChevronUpSquare, History, Pen, Share, Trash, Copy } from 'lucide-svelte';
 import { goto as gotoUrl } from '$app/navigation';
 import { page } from '$app/stores';
 import { DELETE, copyToClipboard } from '../../../utils';
@@ -45,20 +45,10 @@ async function loadAppJson() {
 >
 	{#snippet badges()}
 		{#if app.execution_mode == 'anonymous'}
-			<Badge small>
-				<div class="flex gap-1 items-center">
-					<Eye size={14} />
-					Public
-				</div></Badge
-			>
+			<Badge small icon={{ icon: Eye }}>Public</Badge>
 		{/if}
 		{#if app.raw_app}
-			<Badge small>
-				<div class="flex gap-1 items-center">
-					<FileJson size={14} />
-					Raw
-				</div></Badge
-			>
+			<Badge small icon={{ icon: FileJson }}>Raw</Badge>
 		{/if}
 		<SharedBadge canWrite={app.canWrite} extraPerms={app.extra_perms} />
 		<DraftBadge has_draft={app.has_draft} draft_only={app.draft_only} />
@@ -72,9 +62,8 @@ async function loadAppJson() {
 						<Button
 							aiId={`edit-app-button-${app.summary?.length > 0 ? app.summary : app.path}`}
 							aiDescription={`Edits the app ${app.summary?.length > 0 ? app.summary : app.path}`}
-							color="light"
-							size="xs"
-							variant="border"
+							variant="subtle"
+							wrapperClasses="w-20"
 							startIcon={{ icon: Pen }}
 							href="{base}/apps{app.raw_app ? '_raw' : ''}/edit/{app.path}?nodraft=true"
 						>
@@ -86,9 +75,9 @@ async function loadAppJson() {
 						<Button
 							aiId={`fork-app-button-${app.summary?.length > 0 ? app.summary : app.path}`}
 							aiDescription={`Fork the app ${app.summary?.length > 0 ? app.summary : app.path}`}
-							color="light"
-							size="xs"
-							variant="border"
+							variant="subtle"
+							wrapperClasses="w-20"
+							unifiedSize="md"
 							startIcon={{ icon: GitFork }}
 							href="{base}/apps{app.raw_app ? '_raw' : ''}/add?template={app.path}"
 						>
@@ -186,7 +175,7 @@ async function loadAppJson() {
 					},
 					{
 						displayName: 'Copy path',
-						icon: Clipboard,
+						icon: Copy,
 						action: () => {
 							copyToClipboard(path)
 						}

package/package/components/common/table/FlowRow.svelte

@@ -13,7 +13,7 @@ import DraftBadge from '../../DraftBadge.svelte';
 import { sendUserToast } from '../../../toast';
 import { DELETE, copyToClipboard, isOwner } from '../../../utils';
 import { isDeployable } from '../../../utils_deployable';
-import { Pen, GitFork, Trash, List, FolderOpen, ChevronUpSquare, Calendar, Share, Archive, Clipboard, Eye, HistoryIcon } from 'lucide-svelte';
+import { Pen, GitFork, Trash, List, FolderOpen, ChevronUpSquare, Calendar, Share, Archive, Copy, Eye, HistoryIcon } from 'lucide-svelte';
 import FlowHistory from '../../flows/FlowHistory.svelte';
 import { getDeployUiSettings } from '../../home/deploy_ui';
 let { flow, marked, starred, shareModal, moveDrawer, deleteConfirmedCallback = $bindable(), deploymentDrawer, errorHandlerMuted, depth = 0, menuOpen = $bindable(false) } = $props();
@@ -82,9 +82,9 @@ let flowHistory = $state(undefined);
 				{#if flow.canWrite && !flow.archived}
 					<div>
 						<Button
-							color="light"
-							size="xs"
-							variant="border"
+							variant="subtle"
+							wrapperClasses="w-20"
+							unifiedSize="md"
 							startIcon={{ icon: Pen }}
 							href="{base}/flows/edit/{flow.path}?nodraft=true"
 							aiId={`edit-flow-button-${flow.summary?.length > 0 ? flow.summary : flow.path}`}
@@ -96,9 +96,9 @@ let flowHistory = $state(undefined);
 				{:else}
 					<div>
 						<Button
-							color="light"
-							size="xs"
-							variant="border"
+							variant="subtle"
+							wrapperClasses="w-20"
+							unifiedSize="md"
 							startIcon={{ icon: GitFork }}
 							href="{base}/flows/add?template={flow.path}"
 							aiId={`fork-flow-button-${flow.summary?.length > 0 ? flow.summary : flow.path}`}
@@ -167,7 +167,7 @@ let flowHistory = $state(undefined);
 					},
 					{
 						displayName: 'Copy path',
-						icon: Clipboard,
+						icon: Copy,
 						action: () => {
 							copyToClipboard(path)
 						}

package/package/components/common/table/RawAppRow.svelte

@@ -60,9 +60,8 @@ const dispatch = createEventDispatcher();
 				{#if app.canWrite}
 					<div>
 						<Button
-							color="light"
-							size="xs"
-							variant="border"
+							variant="subtle"
+							unifiedSize="md"
 							startIcon={{ icon: Pen }}
 							on:click={() => updateAppDrawer?.toggleDrawer?.()}
 						>

package/package/components/common/table/Row.svelte

@@ -6,44 +6,45 @@ import { twMerge } from 'tailwind-merge';
 import { goto } from '../../../navigation';
 import { triggerableByAI } from '../../../actions/triggerableByAI.svelte';
 const dispatch = createEventDispatcher();
-let { marked, starred, canFavorite = true, errorHandlerMuted = false, aiId = undefined, aiDescription = undefined, kind = 'script', summary = undefined, path, href, workspaceId, depth = 0, badges, actions } = $props();
+let { marked, starred, selected = false, disabled = false, canFavorite = true, isSelectable = false, alignWithSelectable = false, errorHandlerMuted = false, aiId = undefined, aiDescription = undefined, kind = 'script', summary = undefined, path, href = undefined, workspaceId, depth = 0, badges, actions, customSummary, onSelect = () => { } } = $props();
 let displayPath = (depth === 0 ? path : path?.split('/')?.slice(-1)?.[0]) ?? '';
 </script>
 
-<div
-	style="display: none"
-	use:triggerableByAI={{
-		id: aiId,
-		description: aiDescription,
-		callback: () => {
-			goto(href)
-		}
-	}}
-></div>
+{#if href}
+	<div
+		style="display: none"
+		use:triggerableByAI={{
+			id: aiId,
+			description: aiDescription,
+			callback: () => {
+				goto(href)
+			}
+		}}
+	></div>
+{/if}
 <div
 	class={twMerge(
-		'hover:bg-surface-hover w-full inline-flex items-center gap-4 first-of-type:!border-t-0 first-of-type:rounded-t-md last-of-type:rounded-b-md [*:not(:last-child)]:border-b px-4 py-2.5 border-b last:border-b-0',
-		depth > 0 ? '!rounded-none' : ''
+		'w-full inline-flex items-center gap-4 first-of-type:!border-t-0 first-of-type:rounded-t-md last-of-type:rounded-b-md [*:not(:last-child)]:border-b px-4 py-3 border-b last:border-b-0',
+		depth > 0 ? '!rounded-none' : '',
+		disabled ? 'opacity-25' : 'hover:bg-surface-hover',
+		selected ? 'bg-surface-accent-selected' : ''
+
 	)}
 	style={depth > 0 ? `padding-left: ${depth * 32}px;` : ''}
 >
-	<a {href} class="min-w-0 grow hover:underline decoration-gray-400 inline-flex items-center gap-4">
-		<div class="shrink">
-			<RowIcon {href} {kind} />
-		</div>
-		<div class="grow">
-			<div class="text-primary flex-wrap text-left text-sm font-semibold">
-				{#if marked}
-					{@html marked}
-				{:else}
-					{!summary || summary.length == 0 ? displayPath : summary}
-				{/if}
-			</div>
-			<div class="text-secondary text-2xs truncate text-left font-light">
-				{path}
-			</div>
-		</div>
-	</a>
+	{#if isSelectable}
+		<input type="checkbox" checked={selected} onchange={onSelect} class="rounded max-w-4 w-full" />
+	{:else if alignWithSelectable}
+		<div class="rounded max-w-4 w-full"></div>
+	{/if}
+
+	{#if href}
+		<a {href} class="min-w-0 grow hover:underline decoration-gray-400 inline-flex items-center gap-4">
+			{@render rowContent()}
+		</a>
+	{:else}
+			{@render rowContent()}
+	{/if}
 
 	{#if errorHandlerMuted}
 		<BellOff class="w-8 opacity-60" size={12} fill="currentcolor" />
@@ -55,8 +56,8 @@ let displayPath = (depth === 0 ? path : path?.split('/')?.slice(-1)?.[0]) ?? '';
 		</div>
 	{/if}
 
-	{#if canFavorite}
-		<div class="center-center h-full text-sm font-semibold text-secondary">
+	{#if canFavorite && kind !== 'resource' && kind !== 'variable'}
+		<div class="center-center h-full text-xs font-semibold text-secondary w-9">
 			<Star
 				{kind}
 				{path}
@@ -75,3 +76,25 @@ let displayPath = (depth === 0 ? path : path?.split('/')?.slice(-1)?.[0]) ?? '';
 		{@render actions?.()}
 	</div>
 </div>
+
+{#snippet rowContent()}
+	<div class="shrink">
+		<RowIcon {kind} />
+	</div>
+	<div class="grow">
+		<div class="text-emphasis flex-wrap text-left text-xs font-semibold">
+			{#if customSummary}
+				{@render customSummary?.()}
+			{:else}
+				{#if marked}
+					{@html marked}
+				{:else}
+					{!summary || summary.length == 0 ? displayPath : summary}
+				{/if}
+			{/if}
+		</div>
+		<div class="text-hint text-3xs truncate text-left font-normal">
+			{path}
+		</div>
+	</div>
+{/snippet}

package/package/components/common/table/Row.svelte.d.ts

@@ -1,18 +1,26 @@
 interface Props {
     marked: string | undefined;
     starred: boolean;
+    selected?: boolean;
+    disabled?: boolean;
     canFavorite?: boolean;
+    isSelectable?: boolean;
+    alignWithSelectable?: boolean;
     errorHandlerMuted?: boolean;
     aiId?: string | undefined;
     aiDescription?: string | undefined;
-    kind?: 'script' | 'flow' | 'app' | 'raw_app';
+    kind?: 'script' | 'flow' | 'app' | 'raw_app' | 'resource' | 'variable';
     summary?: string | undefined;
     path: string;
-    href: string;
+    href?: string;
     workspaceId: string;
     depth?: number;
     badges?: import('svelte').Snippet;
     actions?: import('svelte').Snippet;
+    customSummary?: import('svelte').Snippet;
+    onSelect?: (e: Event & {
+        currentTarget: EventTarget & HTMLInputElement;
+    }) => void;
 }
 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> & {

package/package/components/common/table/RowIcon.svelte

@@ -1,28 +1,20 @@
-<script lang="ts">import { classNames } from '../../../utils';
-import BarsStaggered from '../../icons/BarsStaggered.svelte';
-import { Code2, LayoutDashboard } from 'lucide-svelte';
+<script lang="ts">import BarsStaggered from '../../icons/BarsStaggered.svelte';
+import { Boxes, Code2, DollarSign, LayoutDashboard } from 'lucide-svelte';
 export let kind;
-export let href = '#';
-const color = {
-    script: 'bg-blue-50 border-blue-200 dark:bg-blue-800/20 dark:border-blue-500/70',
-    flow: 'bg-[#f0fdfa] border-[#99f6e4] dark:bg-teal-800/20 dark:border-teal-600/70',
-    app: 'bg-[#fff7ed] border-orange-300 dark:bg-orange-800/20 dark:border-orange-400/70',
-    raw_app: 'bg-[#fff7ed] border-orange-300 dark:bg-orange-800/20 dark:border-orange-400/70'
-}[kind];
-const iconColor = {
-    script: '#60A5FA',
-    flow: '#14b8a6',
-    app: '#fb923c',
-    raw_app: '#fb923c'
-}[kind];
 </script>
 
-<a {href} class={classNames('rounded-md p-1 flex justify-center items-center border', color)}>
+<div class="flex justify-center items-center">
 	{#if kind === 'flow'}
-		<BarsStaggered size={20} class=" text-[#14b8a6] p-0.5" />
+		<BarsStaggered size={16} class="text-teal-500" />
 	{:else if kind === 'app' || kind === 'raw_app'}
-		<LayoutDashboard size={20} color={iconColor} />
+		<LayoutDashboard size={16} class="text-orange-500" />
 	{:else if kind === 'script'}
-		<Code2 size={20} color={iconColor} />
+		<Code2 size={16} class="text-blue-500" />
+	{:else if kind === 'variable'}
+		<DollarSign size={16} class="text-gray-400" />
+	{:else if kind === 'resource'}
+		<Boxes size={16} class="text-gray-400" />
+	{:else}
+		<div class="w-[16px]"></div>
 	{/if}
-</a>
+</div>

package/package/components/common/table/RowIcon.svelte.d.ts

@@ -12,8 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const RowIcon: $$__sveltets_2_IsomorphicComponent<{
-    kind: "script" | "flow" | "app" | "raw_app";
-    href?: string;
+    kind: "script" | "flow" | "app" | "raw_app" | "resource" | "variable";
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;