windmill-components 1.642.0 → 1.655.0

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

@@ -1,13 +1,12 @@
-<script lang="ts">import Portal from '../../Portal.svelte';
+<script lang="ts">import { stopPropagation } from 'svelte/legacy';
+import Portal from '../../Portal.svelte';
 import { twMerge } from 'tailwind-merge';
 import { clickOutside } from '../../../utils';
 import { X } from 'lucide-svelte';
 import { getContext } from 'svelte';
-export let title;
-export let style = '';
-export let css = {};
+let { title, style = '', css = {}, class: className = '', children } = $props();
 const { mode } = getContext('AppViewerContext');
-let isOpen = false;
+let isOpen = $state(false);
 export function close() {
     isOpen = false;
 }
@@ -33,16 +32,13 @@ export function open() {
 					css?.popup?.class,
 					'wm-modal-form-popup'
 				)}
-				use:clickOutside
-				on:click_outside={() => {
-					close()
-				}}
+				use:clickOutside={{ onClickOutside: () => close() }}
 			>
 				<div class="px-4 py-2 border-b flex justify-between items-center">
 					<div>{title}</div>
 					<div class="w-8">
 						<button
-							on:click={() => {
+							onclick={() => {
 								isOpen = false
 							}}
 							class="hover:bg-surface-hover bg-surface-secondary rounded-full w-8 h-8 flex items-center justify-center transition-all"
@@ -52,17 +48,17 @@ export function open() {
 					</div>
 				</div>
 
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<div class="relative bg-surface rounded-md" on:click|stopPropagation={() => {}}>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div class="relative bg-surface rounded-md" onclick={stopPropagation(() => {})}>
 					<div
 						class={twMerge(
 							'max-w-screen-lg max-h-screen-80 overflow-auto flex flex-col',
-							$$props.class
+							className
 						)}
 						{style}
 					>
-						<slot />
+						{@render children?.()}
 					</div>
 				</div>
 			</div>

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

@@ -1,37 +1,13 @@
-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 AlwaysMountedModal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+interface Props {
     title: string;
-    style?: string | undefined;
+    style?: string;
     css?: any;
-    close?: (() => void) | undefined;
-    open?: (() => void) | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const AlwaysMountedModal: import("svelte").Component<Props, {
     close: () => void;
     open: () => void;
-}, string>;
-type AlwaysMountedModal = InstanceType<typeof AlwaysMountedModal>;
+}, "">;
+type AlwaysMountedModal = ReturnType<typeof AlwaysMountedModal>;
 export default AlwaysMountedModal;

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

@@ -1,16 +1,11 @@
-<script lang="ts">import Portal from '../../Portal.svelte';
+<script lang="ts">import { stopPropagation } from 'svelte/legacy';
+import Portal from '../../Portal.svelte';
 import { twMerge } from 'tailwind-merge';
 import { clickOutside } from '../../../utils';
 import { X } from 'lucide-svelte';
 import List from '../layout/List.svelte';
 import { fade } from 'svelte/transition';
-export let title;
-export let css = {};
-export let target = '';
-export let isOpen = false;
-export let fixedWidth = 'md';
-export let fixedHeight = 'md';
-export let contentClasses = '';
+let { title, css = {}, target = '', isOpen = $bindable(false), fixedWidth = 'md', fixedHeight = 'md', contentClasses = '', headerLeft, headerRight, children } = $props();
 const widthMap = {
     xs: '400px',
     sm: '600px',
@@ -45,7 +40,7 @@ function fadeFast(node) {
 }
 </script>
 
-<svelte:window on:keydown={handleKeyDown} />
+<svelte:window onkeydown={handleKeyDown} />
 
 {#if isOpen}
 	<Portal name="always-mounted" {target}>
@@ -63,10 +58,7 @@ function fadeFast(node) {
 						css?.popup?.class,
 						'wm-modal-form-popup'
 					)}
-					use:clickOutside
-					on:click_outside={() => {
-						close()
-					}}
+					use:clickOutside={{ onClickOutside: () => close() }}
 				>
 					<List gap="md">
 						<div class="flex w-full">
@@ -75,15 +67,15 @@ function fadeFast(node) {
 								<div class="grow w-min-0">
 									<List horizontal justify="between">
 										<div class="min-w-0 grow">
-											<slot name="header-left" />
+											{@render headerLeft?.()}
 										</div>
 										<div class="min-w-0 grow-0 justify-end">
 											<List horizontal justify="end">
-												<slot name="header-right" />
+												{@render headerRight?.()}
 												<div class="w-8">
 													<button
 														id="modal-close-button"
-														on:click={() => {
+														onclick={() => {
 															close()
 														}}
 														class="hover:bg-surface-hover rounded-full w-8 h-8 flex items-center justify-center transition-all"
@@ -98,13 +90,13 @@ function fadeFast(node) {
 							</List>
 						</div>
 
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div
 							class="w-full flex grow min-h-0 {contentClasses}"
-							on:click|stopPropagation={() => {}}
+							onclick={stopPropagation(() => {})}
 						>
-							<slot />
+							{@render children?.()}
 						</div>
 					</List>
 				</div>

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

@@ -1,44 +1,18 @@
-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 Modal2: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     title: string;
     css?: any;
     target?: string;
     isOpen?: boolean;
-    fixedWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-    fixedHeight?: "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;
-}, {
-    'header-left': {};
-    'header-right': {};
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    'header-left': {};
-    'header-right': {};
-    default: {};
-}, {
+    headerLeft?: import('svelte').Snippet;
+    headerRight?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+}
+declare const Modal2: import("svelte").Component<Props, {
     close: () => void;
     open: () => void;
-}, string>;
-type Modal2 = InstanceType<typeof Modal2>;
+}, "isOpen">;
+type Modal2 = ReturnType<typeof Modal2>;
 export default Modal2;

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

@@ -1,4 +1,5 @@
-<script lang="ts">import Portal from '../../Portal.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import Portal from '../../Portal.svelte';
 import { clickOutside } from '../../../utils';
 import { createFloatingActions } from 'svelte-floating-ui';
 import { fly } from 'svelte/transition';
@@ -9,7 +10,7 @@ let { floatingConfig = {
 }, 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);
+const [floatingRef, floatingContent] = createFloatingActions(untrack(() => floatingConfig));
 function close() {
     open = false;
 }

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

@@ -1,12 +1,7 @@
 <script lang="ts">import { classNames } from '../../../utils';
 import { Loader2 } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
-export let tabs;
-export let selectedIndex = 0;
-export let maxReachedIndex = -1;
-export let statusByStep = [];
-export let hasValidations = false;
-export let allowStepNavigation = false;
+let { tabs, selectedIndex = 0, maxReachedIndex = -1, statusByStep = [], hasValidations = false, allowStepNavigation = false } = $props();
 const dispatch = createEventDispatcher();
 function getStepColor(index, selectedIndex, statusByStep, maxReachedIndex) {
     if (!hasValidations) {
@@ -49,14 +44,14 @@ function getStepColor(index, selectedIndex, statusByStep, maxReachedIndex) {
 <div class="flex justify-between">
 	<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 -->
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 			<li
 				class={classNames(
 					'flex items-center gap-2 px-2 py-1 hover:bg-gray-1200 rounded-md m-0.5',
 					index <= maxReachedIndex || allowStepNavigation ? 'cursor-pointer' : 'cursor-not-allowed'
 				)}
-				on:click={() => {
+				onclick={() => {
 					dispatch('click', { index })
 				}}
 			>

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

@@ -1,3 +1,11 @@
+interface Props {
+    tabs: string[];
+    selectedIndex?: number;
+    maxReachedIndex?: number;
+    statusByStep?: Array<'success' | 'error' | 'pending'>;
+    hasValidations?: boolean;
+    allowStepNavigation?: boolean;
+}
 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;
@@ -11,17 +19,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Stepper: $$__sveltets_2_IsomorphicComponent<{
-    tabs: string[];
-    selectedIndex?: number;
-    maxReachedIndex?: number;
-    statusByStep?: Array<"success" | "error" | "pending">;
-    hasValidations?: boolean;
-    allowStepNavigation?: boolean;
-}, {
+declare const Stepper: $$__sveltets_2_IsomorphicComponent<Props, {
     click: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type Stepper = InstanceType<typeof Stepper>;
 export default Stepper;

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

@@ -10,11 +10,14 @@ import DraftBadge from '../../DraftBadge.svelte';
 import Badge from '../badge/Badge.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 { page } from '$app/state';
 import { DELETE, copyToClipboard } from '../../../utils';
 import AppDeploymentHistory from '../../apps/editor/AppDeploymentHistory.svelte';
 import { isDeployable } from '../../../utils_deployable';
 import { getDeployUiSettings } from '../../home/deploy_ui';
+import { isRuleActive } from '../../../workspaceProtectionRules.svelte';
+import { buildForkEditUrl } from '../../../utils/editInFork';
+import { isCloudHosted } from '../../../cloud';
 let { app, marked, shareModal, moveDrawer, deploymentDrawer, deleteConfirmedCallback = $bindable(), depth = 0, menuOpen = $bindable(false), showEditButton = $bindable(true) } = $props();
 const dispatch = createEventDispatcher();
 let appExport = $state(undefined);
@@ -54,8 +57,8 @@ async function loadAppJson() {
 	{/snippet}
 	{#snippet actions()}
 		<span class="hidden md:inline-flex gap-x-1">
-			{#if !$userStore?.operator && showEditButton}
-				{#if app.canWrite}
+			{#if !$userStore?.operator}
+				{#if showEditButton && app.canWrite}
 					<div>
 						<Button
 							aiId={`edit-app-button-${app.summary?.length > 0 ? app.summary : app.path}`}
@@ -68,18 +71,17 @@ async function loadAppJson() {
 							Edit
 						</Button>
 					</div>
-				{:else}
+				{/if}
+				{#if !isCloudHosted() && !isRuleActive('DisableWorkspaceForking') && (!showEditButton || !app.canWrite)}
 					<div>
 						<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}`}
-							variant="subtle"
-							wrapperClasses="w-20"
+							variant={!showEditButton ? 'default' : 'subtle'}
+							wrapperClasses="w-32"
 							unifiedSize="md"
 							startIcon={{ icon: GitFork }}
-							href="{base}/apps{app.raw_app ? '_raw' : ''}/add?template={app.path}"
+							href={buildForkEditUrl(app.raw_app ? 'raw_app' : 'app', app.path)}
 						>
-							Fork
+							Edit in fork
 						</Button>
 					</div>
 				{/if}
@@ -131,6 +133,12 @@ async function loadAppJson() {
 						disabled: !showEditButton,
 						hide: $userStore?.operator
 					},
+					{
+						displayName: 'Edit in workspace fork',
+						icon: GitFork,
+						href: buildForkEditUrl(app.raw_app ? 'raw_app' : 'app', path),
+						hide: $userStore?.operator || isCloudHosted() || isRuleActive('DisableWorkspaceForking')
+					},
 					{
 						displayName: 'Move/Rename',
 						icon: FolderOpen,
@@ -191,9 +199,9 @@ async function loadAppJson() {
 											path
 										})
 										let url =
-											$page.url.protocol +
+											page.url.protocol +
 											'//' +
-											`${$page.url.hostname}/public/${$workspaceStore}/${secretUrl}`
+											`${page.url.hostname}/public/${$workspaceStore}/${secretUrl}`
 										gotoUrl(url)
 									}
 								}

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

@@ -16,6 +16,9 @@ import { isDeployable } from '../../../utils_deployable';
 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';
+import { isRuleActive } from '../../../workspaceProtectionRules.svelte';
+import { buildForkEditUrl } from '../../../utils/editInFork';
+import { isCloudHosted } from '../../../cloud';
 let { flow, marked, shareModal, moveDrawer, deleteConfirmedCallback = $bindable(), deploymentDrawer, errorHandlerMuted, depth = 0, menuOpen = $bindable(false), showEditButton = $bindable(true) } = $props();
 const dispatch = createEventDispatcher();
 async function archiveFlow(path, archived) {
@@ -76,8 +79,8 @@ let flowHistory = $state(undefined);
 	{/snippet}
 	{#snippet actions()}
 		<span class="hidden md:inline-flex gap-x-1">
-			{#if !$userStore?.operator && showEditButton}
-				{#if flow.canWrite && !flow.archived}
+			{#if !$userStore?.operator}
+				{#if showEditButton && flow.canWrite && !flow.archived}
 					<div>
 						<Button
 							variant="subtle"
@@ -91,18 +94,17 @@ let flowHistory = $state(undefined);
 							Edit
 						</Button>
 					</div>
-				{:else}
+				{/if}
+				{#if !isCloudHosted() && !isRuleActive('DisableWorkspaceForking') && (!showEditButton || !flow.canWrite)}
 					<div>
 						<Button
-							variant="subtle"
-							wrapperClasses="w-20"
+							variant={!showEditButton ? 'default' : 'subtle'}
+							wrapperClasses="w-32"
 							unifiedSize="md"
 							startIcon={{ icon: GitFork }}
-							href="{base}/flows/add?template={flow.path}"
-							aiId={`fork-flow-button-${flow.summary?.length > 0 ? flow.summary : flow.path}`}
-							aiDescription={`Fork the flow ${flow.summary?.length > 0 ? flow.summary : flow.path}`}
+							href={buildForkEditUrl('flow', flow.path)}
 						>
-							Fork
+							Edit in fork
 						</Button>
 					</div>
 				{/if}
@@ -150,6 +152,12 @@ let flowHistory = $state(undefined);
 						disabled: !showEditButton,
 						hide: $userStore?.operator
 					},
+					{
+						displayName: 'Edit in workspace fork',
+						icon: GitFork,
+						href: buildForkEditUrl('flow', path),
+						hide: $userStore?.operator || isCloudHosted() || isRuleActive('DisableWorkspaceForking')
+					},
 					{
 						displayName: 'Audit logs',
 						icon: Eye,

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

@@ -1,11 +1,12 @@
-<script lang="ts">import Star from '../../Star.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import Star from '../../Star.svelte';
 import RowIcon from './RowIcon.svelte';
 import { BellOff } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import { goto } from '../../../navigation';
 import { triggerableByAI } from '../../../actions/triggerableByAI.svelte';
-let { marked, 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]) ?? '';
+let { marked, selected = false, disabled = false, canFavorite = true, isSelectable = false, alignWithSelectable = false, errorHandlerMuted = false, aiId = undefined, aiDescription = undefined, kind = 'script', triggerKind = undefined, summary = undefined, path, href = undefined, workspaceId, depth = 0, badges, actions, customSummary, onSelect = () => { } } = $props();
+let displayPath = (untrack(() => depth) === 0 ? untrack(() => path) : untrack(() => path)?.split('/')?.slice(-1)?.[0]) ?? '';
 </script>
 
 {#if href}
@@ -56,7 +57,7 @@ let displayPath = (depth === 0 ? path : path?.split('/')?.slice(-1)?.[0]) ?? '';
 		</div>
 	{/if}
 
-	{#if canFavorite && kind !== 'resource' && kind !== 'variable' && kind !== 'resource_type'}
+	{#if canFavorite && (kind == 'app' || kind == 'raw_app' || kind == 'script' || kind == 'flow')}
 		<div class="center-center h-full text-xs font-semibold text-secondary w-9">
 			<Star {kind} {path} {workspaceId} {summary} />
 		</div>
@@ -71,7 +72,7 @@ let displayPath = (depth === 0 ? path : path?.split('/')?.slice(-1)?.[0]) ?? '';
 
 {#snippet rowContent()}
 	<div class="shrink">
-		<RowIcon {kind} />
+		<RowIcon {kind} {triggerKind} />
 	</div>
 	<div class="grow">
 		<div class="text-emphasis flex-wrap text-left text-xs font-semibold">

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

@@ -8,7 +8,8 @@ interface Props {
     errorHandlerMuted?: boolean;
     aiId?: string | undefined;
     aiDescription?: string | undefined;
-    kind?: 'script' | 'flow' | 'app' | 'raw_app' | 'resource' | 'variable' | 'resource_type';
+    kind?: 'script' | 'flow' | 'app' | 'raw_app' | 'resource' | 'variable' | 'resource_type' | 'folder' | 'schedule' | 'trigger';
+    triggerKind?: string | undefined;
     summary?: string | undefined;
     path: string;
     href?: string;

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

@@ -1,23 +1,52 @@
 <script lang="ts">import BarsStaggered from '../../icons/BarsStaggered.svelte';
-import { Boxes, Code2, DollarSign, Folder, LayoutDashboard } from 'lucide-svelte';
-export let kind;
+import KafkaIcon from '../../icons/KafkaIcon.svelte';
+import NatsIcon from '../../icons/NatsIcon.svelte';
+import MqttIcon from '../../icons/MqttIcon.svelte';
+import AwsIcon from '../../icons/AwsIcon.svelte';
+import GoogleCloudIcon from '../../icons/GoogleCloudIcon.svelte';
+import { Boxes, Calendar, Code2, Database, DollarSign, Folder, LayoutDashboard, Mail, Route, Unplug } from 'lucide-svelte';
+let { kind, triggerKind = undefined } = $props();
+// Use triggerKind if kind is 'trigger' and triggerKind is provided
+let effectiveKind = $derived(kind === 'trigger' && triggerKind ? triggerKind : kind);
 </script>
 
-<div class="flex justify-center items-center" title={kind}>
-	{#if kind === 'flow'}
+<div class="flex justify-center items-center" title={effectiveKind}>
+	{#if effectiveKind === 'flow'}
 		<BarsStaggered size={16} class="text-teal-500" />
-	{:else if kind === 'app' || kind === 'raw_app'}
+	{:else if effectiveKind === 'app' || effectiveKind === 'raw_app'}
 		<LayoutDashboard size={16} class="text-orange-500" />
-	{:else if kind === 'script'}
+	{:else if effectiveKind === 'script'}
 		<Code2 size={16} class="text-blue-500" />
-	{:else if kind === 'variable'}
+	{:else if effectiveKind === 'variable'}
 		<DollarSign size={16} class="text-gray-400" />
-	{:else if kind === 'resource'}
+	{:else if effectiveKind === 'resource'}
 		<Boxes size={16} class="text-gray-400" />
-	{:else if kind === 'resource_type'}
-		<div style="width: 16px; height: 16px;" class="bg-gray-100 rounded-full" ></div>
-	{:else if kind === 'folder'}
+	{:else if effectiveKind === 'resource_type'}
+		<div style="width: 16px; height: 16px;" class="bg-gray-100 rounded-full"></div>
+	{:else if effectiveKind === 'folder'}
 		<Folder size={16} class="text-gray-400" />
+	{:else if effectiveKind === 'schedule' || effectiveKind === 'schedules'}
+		<Calendar size={16} class="text-gray-400" />
+	{:else if effectiveKind === 'routes'}
+		<Route size={16} class="text-gray-400" />
+	{:else if effectiveKind === 'websockets'}
+		<Unplug size={16} class="text-gray-400" />
+	{:else if effectiveKind === 'postgres'}
+		<Database size={16} class="text-gray-400" />
+	{:else if effectiveKind === 'kafka'}
+		<KafkaIcon size={16} class="text-gray-400" />
+	{:else if effectiveKind === 'nats'}
+		<NatsIcon size={16} class="text-gray-400" />
+	{:else if effectiveKind === 'mqtt'}
+		<MqttIcon size={16} class="text-gray-400" />
+	{:else if effectiveKind === 'sqs'}
+		<AwsIcon size={16} class="text-gray-400" />
+	{:else if effectiveKind === 'gcp'}
+		<GoogleCloudIcon size={16} />
+	{:else if effectiveKind === 'emails'}
+		<Mail size={16} class="text-gray-400" />
+	{:else if effectiveKind === 'trigger'}
+		<Calendar size={16} class="text-gray-400" />
 	{:else}
 		<div class="w-[16px]"></div>
 	{/if}

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

@@ -1,20 +1,8 @@
-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;
+interface Props {
+    kind: 'script' | 'flow' | 'app' | 'raw_app' | 'resource' | 'variable' | 'resource_type' | 'folder' | 'schedule' | 'trigger' | 'routes' | 'schedules' | 'websockets' | 'postgres' | 'kafka' | 'nats' | 'mqtt' | 'sqs' | 'gcp' | 'emails';
+    /** For 'trigger' kind, specifies the specific trigger type (routes, schedules, etc.) */
+    triggerKind?: string | undefined;
 }
-declare const RowIcon: $$__sveltets_2_IsomorphicComponent<{
-    kind: "script" | "flow" | "app" | "raw_app" | "resource" | "variable" | "resource_type" | "folder";
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type RowIcon = InstanceType<typeof RowIcon>;
+declare const RowIcon: import("svelte").Component<Props, {}, "">;
+type RowIcon = ReturnType<typeof RowIcon>;
 export default RowIcon;