windmill-components 1.623.1 → 1.642.0

package/package/components/tutorials/utils.js

@@ -2,6 +2,16 @@ import { deepEqual } from 'fast-equals';
 import { emptyApp } from '../apps/editor/appUtils';
 import { findGridItem } from '../apps/editor/appUtilsCore';
 import { isRunnableByName } from '../apps/inputType';
+import { wait } from '../../utils';
+// Tutorial animation delay constants
+export const DELAY_SHORT = 100;
+export const DELAY_MEDIUM = 300;
+export const DELAY_LONG = 500;
+export const DELAY_ANIMATION = 1500;
+export const DELAY_ANIMATION_LONG = 2500;
+export const DELAY_TYPING = 50;
+export const DELAY_CODE_CHAR = 2;
+export const DELAY_CODE_NEWLINE = 5;
 export function setInputBySelector(selector, value) {
     const input = document.querySelector(selector);
     if (input) {
@@ -144,3 +154,89 @@ export function waitForElementLoading(selector, callback, interval = 50, maxAtte
         attempts++;
     }, interval);
 }
+// Helper function to move cursor to element (for continuous cursor movement in tutorials)
+export async function moveCursorToElement(cursor, element, duration = DELAY_ANIMATION) {
+    const rect = element.getBoundingClientRect();
+    cursor.style.transition = `all ${duration / 1000}s ease-in-out`;
+    cursor.style.left = `${rect.left + rect.width / 2}px`;
+    cursor.style.top = `${rect.top + rect.height / 2}px`;
+    await wait(duration);
+}
+// Helper function to create a fake cursor element for tutorial animations
+export function createFakeCursor() {
+    const fakeCursor = document.createElement('div');
+    fakeCursor.style.cssText = `
+		position: fixed;
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		background-color: rgba(59, 130, 246, 0.8);
+		border: 2px solid white;
+		pointer-events: none;
+		z-index: 10000;
+		transition: all 1.5s ease-in-out;
+	`;
+    document.body.appendChild(fakeCursor);
+    return fakeCursor;
+}
+// Constants for cursor animation
+const CURSOR_START_OFFSET = -100;
+const CURSOR_CLICK_SCALE = 0.8;
+// Helper function to create and animate a fake cursor with start position
+export async function createFakeCursorWithStart(startElement, endElement, transitionDuration = 1.5) {
+    const fakeCursor = createFakeCursor();
+    const endRect = endElement.getBoundingClientRect();
+    let startX, startY;
+    if (startElement) {
+        const startRect = startElement.getBoundingClientRect();
+        startX = startRect.left + startRect.width / 2;
+        startY = startRect.top + startRect.height / 2;
+    }
+    else {
+        startX = endRect.left + CURSOR_START_OFFSET;
+        startY = endRect.top + endRect.height / 2;
+    }
+    fakeCursor.style.left = `${startX}px`;
+    fakeCursor.style.top = `${startY}px`;
+    await wait(DELAY_SHORT);
+    fakeCursor.style.left = `${endRect.left + endRect.width / 2}px`;
+    fakeCursor.style.top = `${endRect.top + endRect.height / 2}px`;
+    await wait(transitionDuration * 1000);
+    return fakeCursor;
+}
+// Helper function to animate a fake cursor click
+export async function animateFakeCursorClick(element, transitionDuration = 1.5, options) {
+    const fakeCursor = await createFakeCursorWithStart(options?.startElement ?? null, element, transitionDuration);
+    await wait(DELAY_MEDIUM);
+    // Animate click (shrink cursor briefly)
+    fakeCursor.style.transform = `scale(${CURSOR_CLICK_SCALE})`;
+    await wait(DELAY_SHORT);
+    fakeCursor.style.transform = 'scale(1)';
+    await wait(DELAY_SHORT);
+    // Trigger pointer events if needed (flow graph uses pointer events instead of click)
+    if (options?.usePointerEvents) {
+        element.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
+        element.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }));
+    }
+    // Click the element
+    element.click();
+    await wait(DELAY_SHORT);
+    // Remove fake cursor
+    fakeCursor.remove();
+}
+// Helper function to animate cursor to element and click (for reusing a cursor across multiple clicks)
+export async function animateCursorToElementAndClick(cursor, element, startOffset = CURSOR_START_OFFSET) {
+    const rect = element.getBoundingClientRect();
+    // Set initial position (off-screen to the left)
+    cursor.style.left = `${rect.left + startOffset}px`;
+    cursor.style.top = `${rect.top + rect.height / 2}px`;
+    await wait(DELAY_SHORT);
+    // Animate to target position
+    cursor.style.left = `${rect.left + rect.width / 2}px`;
+    cursor.style.top = `${rect.top + rect.height / 2}px`;
+    await wait(DELAY_ANIMATION);
+    await wait(DELAY_MEDIUM);
+    // Click on the element
+    element.click();
+    await wait(DELAY_SHORT);
+}

package/package/components/tutorials/workspace/WorkspaceOnboardingOperatorTutorial.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">import { updateProgress } from '../../../tutorialUtils';
+import Tutorial from '../Tutorial.svelte';
+import { goto } from '$app/navigation';
+import { base } from '../../../base';
+import { page } from '$app/stores';
+import { wait } from '../../../utils';
+import { DELAY_MEDIUM } from '../utils';
+let { index } = $props();
+let tutorial = $state(undefined);
+export function runTutorial() {
+    // Check if we're on the homepage
+    if ($page.url.pathname !== `${base}/` && $page.url.pathname !== `${base}`) {
+        // Redirect to homepage with a tutorial parameter
+        goto(`${base}/?tutorial=workspace-onboarding-operator`);
+    }
+    else {
+        tutorial?.runTutorial();
+    }
+}
+</script>
+
+<Tutorial
+	bind:this={tutorial}
+	{index}
+	name="workspace-onboarding-operator"
+	tainted={false}
+	on:skipAll
+	getSteps={(driver) => {
+		const steps: DriveStep[] = [
+			{
+				popover: {
+					title: 'Welcome to Windmill! 🎉',
+					description:
+						"Let's take a quick tour! We'll show you the three main tools you can use: Scripts, Flows, and Apps.",
+					onNextClick: () => {
+						// Wait a bit to ensure the page is fully rendered before moving to next step
+						setTimeout(() => {
+							// Try to find the script tab button
+							const scriptsButton = document.querySelector('[data-value="script"]') as HTMLElement | null
+
+							if (scriptsButton) {
+								driver.moveNext()
+							} else {
+								// If we can't find the button, just move to next step anyway
+								driver.moveNext()
+							}
+						}, 100)
+					}
+				}
+			},
+			{
+				popover: {
+					title: 'Scripts - Run automated tasks',
+					description:
+						'<img src="/script-tutorial-operator.png" alt="Script Example" style="width: 100%; max-width: 400px; margin-bottom: 12px; border-radius: 8px; display: block; margin-left: auto; margin-right: auto;" /><p><strong>Scripts</strong> are ready-to-use tasks that do things automatically for you.</p><p style="margin-top: 8px;">You can <strong>run scripts</strong> whenever you need them - like generating a report, sending notifications, or processing data.</p>',
+					onNextClick: async () => {
+						// Move to the next step (Flows)
+						setTimeout(() => {
+							const flowsButton = document.querySelector('[data-value="flow"]') as HTMLElement | null
+
+							if (flowsButton) {
+								driver.moveNext()
+							} else {
+								driver.moveNext()
+							}
+						}, 100)
+					}
+				},
+				element: '[data-value="script"]'
+			},
+			{
+				popover: {
+					title: 'Flows - Run step-by-step processes',
+					description:
+						'<img src="/flow.png" alt="Flow" style="width: 100%; max-width: 400px; margin-bottom: 12px; border-radius: 8px; display: block; margin-left: auto; margin-right: auto;" /><p><strong>Flows</strong> are processes that run multiple tasks in order, one after another.</p><p style="margin-top: 8px;">You can <strong>start a flow</strong> and watch it complete each step automatically - perfect for tasks that have multiple stages.</p>',
+					onNextClick: async () => {
+						// Move to the next step (Apps)
+						setTimeout(() => {
+							const appsButton = document.querySelector('[data-value="app"]') as HTMLElement | null
+
+							if (appsButton) {
+								driver.moveNext()
+							} else {
+								driver.moveNext()
+							}
+						}, 100)
+					}
+				},
+				element: '[data-value="flow"]'
+			},
+			{
+				popover: {
+					title: 'Apps - Use custom tools',
+					description:
+						'<img src="/app.png" alt="App" style="width: 100%; max-width: 400px; margin-bottom: 12px; border-radius: 8px; display: block; margin-left: auto; margin-right: auto;" /><p><strong>Apps</strong> are easy-to-use tools with buttons, forms, and displays built just for your team.</p><p style="margin-top: 8px;">You can <strong>open an app</strong> to work with your data, fill out forms, or trigger tasks - no technical knowledge needed!</p>',
+					onNextClick: async () => {
+						// Move to the next step (cursor animation)
+						driver.moveNext()
+					}
+				},
+				element: '[data-value="app"]'
+			},
+			{
+				popover: {
+					title: 'Finally, the Menu section',
+					description: 'Explore available tabs where you can access your history of runs, your scheduled scripts, your tutorials progress etc.<p style="margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(128,128,128,0.3); font-size: 0.9em; opacity: 0.9;"><strong>💡 Want to learn more?</strong> Access more tutorials from the <strong>Tutorials</strong> page in the main menu.</p>',
+					onNextClick: async () => {
+						// Find the target button and click it
+						const targetButton = document.querySelector('[role="menuitem"]') as HTMLElement | null
+						if (targetButton) {
+							targetButton.click()
+						}
+
+						// Wait for menu to open
+						await wait(DELAY_MEDIUM)
+
+						// Mark tutorial as complete
+						updateProgress(index)
+						driver.destroy()
+
+						// Clean up URL parameter if present
+						if ($page.url.searchParams.has('tutorial')) {
+							goto(`${base}/`, { replaceState: true })
+						}
+					}
+				},
+				element: '[role="menuitem"]'
+			}
+		]
+
+		return steps
+	}}
+/>

package/package/components/{SavedInputs.svelte.d.ts → tutorials/workspace/WorkspaceOnboardingOperatorTutorial.svelte.d.ts}

@@ -1,10 +1,5 @@
 interface Props {
-    scriptHash?: string | null;
-    scriptPath?: string | null;
-    flowPath?: string | null;
-    canSaveInputs?: boolean;
-    isValid: boolean;
-    args: object;
+    index: number;
 }
 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> & {
@@ -19,10 +14,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const SavedInputs: $$__sveltets_2_IsomorphicComponent<Props, {
-    selected_args: CustomEvent<any>;
+declare const WorkspaceOnboardingOperatorTutorial: $$__sveltets_2_IsomorphicComponent<Props, {
+    skipAll: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type SavedInputs = InstanceType<typeof SavedInputs>;
-export default SavedInputs;
+}, {}, {
+    runTutorial: () => void;
+}, "">;
+type WorkspaceOnboardingOperatorTutorial = InstanceType<typeof WorkspaceOnboardingOperatorTutorial>;
+export default WorkspaceOnboardingOperatorTutorial;

package/package/components/variables/variablesFilter.d.ts

@@ -0,0 +1,56 @@
+import { FileCode, FileText, FolderIcon, Key, Users } from 'lucide-svelte';
+export declare function buildVariablesFilterSchema({ paths, owners, showUserFoldersFilter, userFoldersLabel }: {
+    paths: string[];
+    owners: string[];
+    showUserFoldersFilter?: boolean;
+    userFoldersLabel?: string;
+}): {
+    user_folders_only?: {
+        type: "boolean";
+        label: string;
+        icon: typeof Users;
+        description: string;
+    } | undefined;
+    owner: {
+        type: "oneof";
+        options: {
+            label: string;
+            value: string;
+        }[];
+        allowNegative: false;
+        allowMultiple: false;
+        label: string;
+        icon: typeof FolderIcon;
+        description: string;
+    };
+    path: {
+        type: "oneof";
+        options: {
+            label: string;
+            value: string;
+        }[];
+        allowNegative: true;
+        allowMultiple: true;
+        label: string;
+        icon: typeof FileCode;
+        description: string;
+    };
+    path_start: {
+        type: "string";
+        label: string;
+        icon: typeof FolderIcon;
+        description: string;
+    };
+    description: {
+        type: "string";
+        label: string;
+        icon: typeof FileText;
+        description: string;
+    };
+    value: {
+        type: "string";
+        label: string;
+        icon: typeof Key;
+        description: string;
+    };
+};

package/package/components/variables/variablesFilter.js

@@ -0,0 +1,51 @@
+import { FileCode, FileText, FolderIcon, Key, Users } from 'lucide-svelte';
+export function buildVariablesFilterSchema({ paths, owners, showUserFoldersFilter, userFoldersLabel }) {
+    return {
+        owner: {
+            type: 'oneof',
+            options: owners.map((s) => ({ label: s, value: s })),
+            allowNegative: false,
+            allowMultiple: false,
+            label: 'Owner',
+            icon: FolderIcon,
+            description: 'Filter by owner (folder or user path)'
+        },
+        path: {
+            type: 'oneof',
+            options: paths.map((s) => ({ label: s, value: s })),
+            allowNegative: true,
+            allowMultiple: true,
+            label: 'Path',
+            icon: FileCode,
+            description: 'Filter by exact variable path'
+        },
+        path_start: {
+            type: 'string',
+            label: 'Path prefix',
+            icon: FolderIcon,
+            description: 'Filter by path prefix (e.g., "f/folder/")'
+        },
+        description: {
+            type: 'string',
+            label: 'Description',
+            icon: FileText,
+            description: 'Search in variable description'
+        },
+        value: {
+            type: 'string',
+            label: 'Value',
+            icon: Key,
+            description: 'Search in non-secret variable values'
+        },
+        ...(showUserFoldersFilter
+            ? {
+                user_folders_only: {
+                    type: 'boolean',
+                    label: userFoldersLabel || 'User folders only',
+                    icon: Users,
+                    description: 'Show only variables in user folders'
+                }
+            }
+            : {})
+    };
+}

package/package/components/vscode.js

@@ -55,13 +55,13 @@ export function buildWorkerDefinition() {
                 return new Worker(new URL('@codingame/monaco-vscode-standalone-css-language-features/worker', import.meta.url), {
                     type: 'module'
                 });
-            },
-            graphql: () => {
-                console.log('Creating graphql worker');
-                return new Worker(new URL(`../monaco_workers/graphql.worker.bundle.js`, import.meta.url), {
-                    name: 'graphql'
-                });
             }
+            // graphql: () => {
+            // 	console.log('Creating graphql worker')
+            // 	return new Worker(new URL(`../monaco_workers/graphql.worker.bundle.js`, import.meta.url), {
+            // 		name: 'graphql'
+            // 	})
+            // }
         };
         const workerFunc = workerLoaders[selector];
         if (workerFunc !== undefined) {

package/package/components/waitJob.d.ts

@@ -1 +1 @@
-export declare function waitJob(id: string): Promise<unknown>;
+export declare function waitJob(id: string, forceWorkspace?: string): Promise<unknown>;

package/package/components/waitJob.js

@@ -3,8 +3,8 @@ import { workspaceStore } from '../stores';
 import { get } from 'svelte/store';
 const ITERATIONS_BEFORE_SLOW_REFRESH = 10;
 const ITERATIONS_BEFORE_SUPER_SLOW_REFRESH = 100;
-export async function waitJob(id) {
-    const workspace = get(workspaceStore);
+export async function waitJob(id, forceWorkspace) {
+    const workspace = forceWorkspace || get(workspaceStore);
     if (!id) {
         return;
     }
@@ -38,6 +38,7 @@ export async function waitJob(id) {
                 if (errorIteration === 5) {
                     try {
                         await cancelJob(id, workspace);
+                        return;
                     }
                     catch (err) {
                         console.error(err);

package/package/components/worker_group.d.ts

@@ -25,4 +25,6 @@ export type AutoscaleKubernetes = {
     type: 'kubernetes';
 };
 export declare const defaultTags: string[];
+/** Strip cache_clear, null/undefined values, empty arrays and empty objects from a worker group config. */
+export declare function cleanWorkerGroupConfig(config: Record<string, any>): Record<string, any>;
 export declare const nativeTags: string[];

package/package/components/worker_group.js

@@ -29,6 +29,21 @@ export const defaultTags = [
     'duckdb'
     // for related places search: ADD_NEW_LANG
 ];
+/** Strip cache_clear, null/undefined values, empty arrays and empty objects from a worker group config. */
+export function cleanWorkerGroupConfig(config) {
+    const { cache_clear, ...rest } = config;
+    const cleaned = {};
+    for (const [k, v] of Object.entries(rest)) {
+        if (v == null)
+            continue;
+        if (Array.isArray(v) && v.length === 0)
+            continue;
+        if (typeof v === 'object' && !Array.isArray(v) && Object.keys(v).length === 0)
+            continue;
+        cleaned[k] = v;
+    }
+    return cleaned;
+}
 export const nativeTags = [
     'nativets',
     'postgresql',

package/package/components/workspace/WorkspaceCard.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">import { GitFork, ChevronUp, ArchiveRestore } from 'lucide-svelte';
+import { slide } from 'svelte/transition';
+import { Badge, Button } from '../common';
+import { superadmin } from '../../stores';
+import { WorkspaceService } from '../../gen';
+import { pluralize } from '../../utils';
+import WorkspaceIcon from './WorkspaceIcon.svelte';
+import WorkspaceCard from './WorkspaceCard.svelte';
+import { twMerge } from 'tailwind-merge';
+let { workspace, isForked = false, depth = 0, children = [], isExpanded = false, expansionStates = {}, onEnterWorkspace, onUnarchive, onToggleExpand, selectedWorkspaceId, onMouseEnter, onMouseClick, onKeyboardNavigation } = $props();
+const paddingLeft = depth * 24;
+const isSelected = $derived(selectedWorkspaceId === workspace.id);
+// Helper functions
+function isWorkspaceArchived(workspace) {
+    return workspace['deleted'] === true;
+}
+function isWorkspaceDisabled(workspace) {
+    return workspace.disabled === true;
+}
+async function handleUnarchive() {
+    if (onUnarchive) {
+        await WorkspaceService.unarchiveWorkspace({ workspace: workspace.id });
+        await onUnarchive(workspace.id);
+    }
+}
+</script>
+
+<div class="block pb-2" style:padding-left={`${paddingLeft}px`}>
+	<div
+		class={twMerge(
+			'border border-border-light rounded-md overflow-hidden transition-all duration-150',
+			isSelected ? 'bg-surface-hover' : 'bg-surface-tertiary'
+		)}
+		data-workspace-id={workspace.id}
+	>
+		<!-- Main workspace card - clickable to enter workspace -->
+		<div
+			class="px-4 py-2 hover:bg-surface-hover transition-colors w-full"
+			class:rounded-lg={children.length === 0}
+			class:rounded-b-none={children.length > 0}
+			class:opacity-60={isWorkspaceDisabled(workspace)}
+			class:cursor-not-allowed={isWorkspaceDisabled(workspace)}
+			class:cursor-pointer={!isWorkspaceDisabled(workspace)}
+			role="button"
+			tabindex="0"
+			onclick={async () => {
+				onMouseClick?.()
+				if (!isWorkspaceDisabled(workspace)) {
+					await onEnterWorkspace(workspace.id)
+				}
+			}}
+			onkeydown={(e) => {
+				if ((e.key === 'Enter' || e.key === ' ') && !isWorkspaceDisabled(workspace)) {
+					e.preventDefault()
+					onKeyboardNavigation?.()
+					onEnterWorkspace(workspace.id)
+				}
+			}}
+			onmouseenter={() => onMouseEnter?.(workspace.id)}
+		>
+			<div class="flex flex-row items-center justify-between">
+				<div class="flex flex-row items-center gap-3 flex-1 min-w-0">
+					<div class="flex flex-row items-center gap-2 flex-1 min-w-0">
+						<div class="flex-shrink-0">
+							<WorkspaceIcon
+								workspaceColor={workspace.color}
+								{isForked}
+								parentName={workspace.parent_workspace_id ?? undefined}
+								size={12}
+							/>
+						</div>
+
+						<div class="min-w-0 flex-1">
+							<div class="flex flex-row items-center gap-2 flex-wrap">
+								<span class="text-xs font-semibold text-primary truncate">
+									{#if workspace.marked}
+										{@html workspace.marked}
+									{:else}
+										{workspace.name}
+									{/if}
+								</span>
+								<span class="text-secondary text-xs">-</span>
+								{#if workspace.id === 'admins'}
+									<Badge color="blue">{workspace.id}</Badge>
+								{:else}
+									<span class="font-mono text-2xs text-secondary truncate">
+										{workspace.id}
+									</span>
+								{/if}
+							</div>
+
+							<div class="text-xs text-secondary">
+								as <span class="font-mono">{workspace.username}</span>
+								{#if isWorkspaceArchived(workspace)}
+									<span class="text-red-500 ml-1">(archived)</span>
+									{#if $superadmin && onUnarchive}
+										<Button
+											size="xs2"
+											variant="default"
+											btnClasses="ml-1"
+											propagateEvent={false}
+											onClick={handleUnarchive}
+											startIcon={{ icon: ArchiveRestore }}
+										>
+											Unarchive
+										</Button>
+									{/if}
+								{/if}
+								{#if isWorkspaceDisabled(workspace)}
+									<span class="text-red-500 ml-1">(user disabled in this workspace)</span>
+								{/if}
+								{#if workspace.id === 'admins'}
+									<span class="text-accent ml-1">Used to manage your Windmill instance</span>
+								{/if}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Forks section - clickable to expand -->
+		{#if children.length > 0}
+			<div
+				class="border-t border-border-light px-4 py-1.5 hover:bg-surface-hover transition-colors cursor-pointer"
+				role="button"
+				tabindex="0"
+				onclick={() => {
+					onMouseClick?.()
+					onToggleExpand?.(workspace.id)
+				}}
+				onkeydown={(e) => {
+					if (e.key === 'Enter' || e.key === ' ') {
+						e.preventDefault()
+						onKeyboardNavigation?.()
+						onToggleExpand?.(workspace.id)
+					}
+				}}
+				onmouseenter={() => onMouseEnter?.(workspace.id)}
+			>
+				<div class="flex flex-row items-center justify-between">
+					<div class="flex flex-row items-center gap-2 pl-2">
+						<GitFork size={10} class="text-primary" />
+						<span class="text-2xs text-primary">
+							{pluralize(children.length, 'fork', 'forks')}
+						</span>
+					</div>
+					<div class="flex items-center">
+						<ChevronUp
+							size={16}
+							class={twMerge(
+								'text-secondary transition-transform duration-150',
+								isExpanded ? 'transform rotate-180' : ''
+							)}
+						/>
+					</div>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Expanded forks -->
+	{#if children.length > 0 && isExpanded}
+		<div class="mt-2 ml-6" transition:slide={{ duration: 150 }}>
+			{#each children as child (child.id)}
+				<WorkspaceCard
+					workspace={child}
+					isForked={true}
+					depth={depth + 1}
+					children={child._children || []}
+					isExpanded={expansionStates[child.id] ?? false}
+					{expansionStates}
+					{onEnterWorkspace}
+					{onUnarchive}
+					{onToggleExpand}
+					{selectedWorkspaceId}
+					{onMouseEnter}
+					{onMouseClick}
+					{onKeyboardNavigation}
+				/>
+			{/each}
+		</div>
+	{/if}
+</div>

package/package/components/workspace/WorkspaceCard.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { UserWorkspace } from '../../stores';
+import WorkspaceCard from './WorkspaceCard.svelte';
+declare const WorkspaceCard: import("svelte").Component<{
+    workspace: UserWorkspace & {
+        marked?: string;
+    };
+    isForked?: boolean;
+    depth?: number;
+    children?: (UserWorkspace & {
+        _children?: (UserWorkspace & /*elided*/ any)[];
+        marked?: string;
+    })[];
+    isExpanded?: boolean;
+    expansionStates?: Record<string, boolean>;
+    onEnterWorkspace: (workspaceId: string) => Promise<void>;
+    onUnarchive?: (workspaceId: string) => Promise<void>;
+    onToggleExpand?: (workspaceId: string) => void;
+    selectedWorkspaceId?: string | null;
+    onMouseEnter?: (workspaceId: string) => void;
+    onMouseClick?: () => void;
+    onKeyboardNavigation?: () => void;
+}, {}, "">;
+type WorkspaceCard = ReturnType<typeof WorkspaceCard>;
+export default WorkspaceCard;