windmill-components 1.558.4 → 1.596.0

package/package/components/home/ItemsList.svelte

@@ -3,7 +3,7 @@ import { Button, Skeleton } from '../common';
 import Toggle from '../Toggle.svelte';
 import { AppService, FlowService, ScriptService, RawAppService } from '../../gen';
 import { userStore, workspaceStore } from '../../stores';
-import { Code2, FoldVertical, LayoutDashboard, SearchCode, SlidersHorizontal, UnfoldVertical } from 'lucide-svelte';
+import { Code2, FoldVertical, LayoutDashboard, ListFilterPlus, SearchCode, UnfoldVertical } from 'lucide-svelte';
 import { HOME_SEARCH_SHOW_FLOW, HOME_SEARCH_PLACEHOLDER } from '../../consts';
 import SearchItems from '../SearchItems.svelte';
 import ListFilters from './ListFilters.svelte';
@@ -22,6 +22,7 @@ import TreeViewRoot from './TreeViewRoot.svelte';
 import Popover from '../meltComponents/Popover.svelte';
 import { getContext, untrack } from 'svelte';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
+import TextInput from '../text_input/TextInput.svelte';
 let { filter = $bindable(''), subtab = $bindable('script') } = $props();
 let scripts = $state();
 let flows = $state();
@@ -36,7 +37,8 @@ async function loadScripts(includeWithoutMain) {
         workspace: $workspaceStore,
         showArchived: archived ? true : undefined,
         includeWithoutMain: includeWithoutMain ? true : undefined,
-        includeDraftOnly: true
+        includeDraftOnly: true,
+        withoutDescription: true
     });
     scripts = loadedScripts.map((script) => {
         return {
@@ -50,7 +52,8 @@ async function loadFlows() {
     flows = (await FlowService.listFlows({
         workspace: $workspaceStore,
         showArchived: archived ? true : undefined,
-        includeDraftOnly: true
+        includeDraftOnly: true,
+        withoutDescription: true
     })).map((x) => {
         return {
             canWrite: canWrite(x.path, x.extra_perms, $userStore) &&
@@ -256,7 +259,7 @@ $effect(() => {
 
 <CenteredPage>
 	<div
-		class="flex flex-wrap gap-2 items-center justify-between w-full mt-2"
+		class="flex flex-wrap gap-2 items-center justify-between w-full"
 		use:triggerableByAI={{
 			id: 'home-items-list',
 			description: 'Lists of scripts, flows, and apps'
@@ -271,24 +274,17 @@ $effect(() => {
 					}
 					setQuery($page.url, 'kind', v)
 				}}
-				class="h-10"
 			>
 				{#snippet children({ item })}
-					<ToggleButton value="all" label="All" class="text-sm px-4 py-2" {item} />
-					<ToggleButton
-						value="script"
-						icon={Code2}
-						label="Scripts"
-						class="text-sm px-4 py-2"
-						{item}
-					/>
+					<ToggleButton value="all" label="All" size="md" {item} />
+					<ToggleButton value="script" icon={Code2} label="Scripts" size="md" {item} />
 					{#if HOME_SEARCH_SHOW_FLOW}
 						<ToggleButton
 							value="flow"
 							label="Flows"
 							icon={FlowIcon}
-							class="text-sm px-4 py-2"
 							selectedColor="#14b8a6"
+							size="md"
 							{item}
 						/>
 					{/if}
@@ -296,23 +292,26 @@ $effect(() => {
 						value="app"
 						label="Apps"
 						icon={LayoutDashboard}
-						class="text-sm px-4 py-2"
 						selectedColor="#fb923c"
+						size="md"
 						{item}
 					/>
 				{/snippet}
 			</ToggleButtonGroup>
 		</div>
 
-		<div class="relative text-tertiary grow min-w-[100px]">
+		<div class="relative text-primary grow min-w-[100px]">
 			<!-- svelte-ignore a11y_autofocus -->
-			<input
-				autofocus
-				placeholder={HOME_SEARCH_PLACEHOLDER}
+			<TextInput
+				inputProps={{
+					autofocus: true,
+					placeholder: HOME_SEARCH_PLACEHOLDER
+				}}
+				size="md"
 				bind:value={filter}
-				class="bg-surface !h-10 !px-4 !pr-10 !rounded-lg text-sm focus:outline-none"
+				class="!pr-10"
 			/>
-			<button aria-label="Search" type="submit" class="absolute right-0 top-0 mt-3 mr-4">
+			<button aria-label="Search" type="submit" class="absolute right-0 top-0 mt-2 mr-4">
 				<svg
 					class="h-4 w-4 fill-current"
 					xmlns="http://www.w3.org/2000/svg"
@@ -335,11 +334,8 @@ $effect(() => {
 		</div>
 		<Button
 			on:click={() => openSearchWithPrefilledText('#')}
-			variant="border"
-			size="sm"
-			spacingSize="lg"
-			wrapperClasses="h-10"
-			color="light"
+			variant="default"
+			unifiedSize="md"
 			endIcon={{
 				icon: SearchCode
 			}}
@@ -358,24 +354,24 @@ $effect(() => {
 			<div class="mt-10"></div>
 		{/if}
 		{#if !loading}
-			<div class="flex w-full flex-row-reverse gap-2 mt-4 mb-1 items-center h-6">
+			<div class="flex w-full flex-row-reverse gap-2 mt-2 mb-1 items-center h-6">
 				<Popover floatingConfig={{ placement: 'bottom-end' }}>
 					{#snippet trigger()}
 						<Button
 							startIcon={{
-								icon: SlidersHorizontal
+								icon: ListFilterPlus
 							}}
 							nonCaptureEvent
 							iconOnly
 							size="xs"
 							color="light"
-							variant="border"
+							variant="default"
 							spacingSize="xs2"
 						/>
 					{/snippet}
 					{#snippet content()}
 						<div class="p-4">
-							<span class="text-sm font-semibold">Filters</span>
+							<span class="text-sm font-semibold text-emphasis">Filters</span>
 							<div class="flex flex-col gap-2 mt-2">
 								<Toggle size="xs" bind:checked={archived} options={{ right: 'Only archived' }} />
 								{#if $userStore && !$userStore.operator}
@@ -401,10 +397,8 @@ $effect(() => {
 				<Toggle size="xs" bind:checked={treeView} options={{ right: 'Tree view' }} />
 				{#if treeView}
 					<Button
-						btnClasses="py-0 h-6"
-						size="xs"
-						variant="border"
-						color="light"
+						size="xs2"
+						variant="default"
 						on:click={() => (collapseAll = !collapseAll)}
 						startIcon={{
 							icon: collapseAll ? UnfoldVertical : FoldVertical
@@ -428,7 +422,7 @@ $effect(() => {
 				<Skeleton layout={[[4], 0.5]} />
 			{/each}
 		{:else if filteredItems.length === 0}
-			<NoItemFound />
+			<NoItemFound hasFilters={filter !== '' || archived || filterUserFolders} />
 		{:else if treeView}
 			<TreeViewRoot
 				{items}
@@ -448,7 +442,7 @@ $effect(() => {
 				{showCode}
 			/>
 		{:else}
-			<div class="border rounded-md">
+			<div class="border rounded-md bg-surface-tertiary">
 				{#each (items ?? []).slice(0, nbDisplayed) as item (item.type + '/' + item.path + (item.hash ? '/' + item.hash : ''))}
 					<Item
 						{item}
@@ -467,9 +461,12 @@ $effect(() => {
 				{/each}
 			</div>
 			{#if items && items?.length > 15 && nbDisplayed < items.length}
-				<span class="text-xs"
+				<span class="text-xs font-normal text-secondary"
 					>{nbDisplayed} items out of {items.length}
-					<button class="ml-4" onclick={() => (nbDisplayed += 30)}>load 30 more</button></span
+					<button
+						class="ml-4 text-xs font-normal text-primary hover:text-emphasis"
+						onclick={() => (nbDisplayed += 30)}>load 30 more</button
+					></span
 				>
 			{/if}
 		{/if}

package/package/components/home/ListFilters.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">import { classNames } from '../../utils';
-import { Folder, User } from 'lucide-svelte';
+<script lang="ts">import { Folder, User } from 'lucide-svelte';
 import { Badge } from '../common';
 import { APP_TO_ICON_COMPONENT } from '../icons';
 import { onDestroy, onMount } from 'svelte';
@@ -49,11 +48,8 @@ let filtersAndSelected = $derived(selectedFilter
 		{#each filtersAndSelected as filter (filter)}
 			<div>
 				<Badge
-					class={classNames(
-						'cursor-pointer inline-flex items-center gap-1 align-middle',
-						filter === selectedFilter ? 'hover:bg-blue-200' : 'hover:bg-gray-200'
-					)}
-					on:click={() => {
+					class="inline-flex items-center gap-1 align-middle"
+					onclick={() => {
 						selectedFilter = selectedFilter == filter ? undefined : filter
 						if (selectedFilter) {
 							setQuery(new URL(window.location.href), queryName, selectedFilter)
@@ -61,8 +57,9 @@ let filtersAndSelected = $derived(selectedFilter
 							setQuery(new URL(window.location.href), queryName, undefined)
 						}
 					}}
-					color={filter === selectedFilter ? 'blue' : 'gray'}
-					baseClass={filter === selectedFilter ? 'border border-blue-500' : 'border'}
+					color={'transparent'}
+					clickable
+					selected={filter === selectedFilter}
 				>
 					<span style="height: 12px" class="-mt-0.5">
 						{#if resourceType}

package/package/components/home/ListFiltersQuick.svelte

@@ -1,51 +1,50 @@
 <script lang="ts">import { Folder, User, Circle } from 'lucide-svelte';
 import { APP_TO_ICON_COMPONENT } from '../icons';
-import { twMerge } from 'tailwind-merge';
 import { createEventDispatcher } from 'svelte';
+import { Button } from '../common';
 export let filters;
 export let selectedFilter = undefined;
 $: selectedAppFilter = selectedFilter?.kind === 'integrations' ? selectedFilter?.name : undefined;
 export let resourceType = false;
-function getIconComponent(name) {
-    return APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]];
+function getIconComponent(name, resourceType) {
+    if (resourceType) {
+        const icon = APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]];
+        if (icon) {
+            return { icon: icon, props: { width: 13, height: 13 } };
+        }
+        else {
+            return { icon: Circle, props: { class: 'text-gray-400' } };
+        }
+    }
+    else if (name.startsWith('u/')) {
+        return { icon: User };
+    }
+    else if (name.startsWith('f/')) {
+        return { icon: Folder };
+    }
+    return { icon: undefined };
 }
 const dispatch = createEventDispatcher();
 </script>
 
 {#if Array.isArray(filters) && filters.length > 0}
 	{#each filters as filter (filter)}
+		{@const icon = getIconComponent(filter, resourceType)}
 		<div>
-			<button
-				class={twMerge(
-					'w-full text-left py-2 px-3 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center rounded-md',
-					filter === selectedAppFilter ? 'bg-surface-hover' : ''
-				)}
-				on:click={() => {
+			<Button
+				selected={filter === selectedAppFilter}
+				onClick={() => {
 					selectedFilter =
 						selectedAppFilter == filter ? undefined : { kind: 'integrations', name: filter }
 					dispatch('selected')
 				}}
+				variant="subtle"
+				startIcon={icon}
+				unifiedSize="sm"
+				btnClasses="justify-start"
 			>
-				<div class="flex justify-center flex-row items-center gap-2">
-					{#if resourceType}
-						{@const icon = getIconComponent(filter)}
-						{#if icon}
-							<svelte:component this={icon} height="14px" width="14px" />
-						{:else}
-							<div
-								class="w-[14px] h-[14px] text-gray-400 flex flex-row items-center justify-center"
-							>
-								<Circle size="12" />
-							</div>
-						{/if}
-					{:else if filter.startsWith('u/')}
-						<User class="mr-0.5" size={14} />
-					{:else if filter.startsWith('f/')}
-						<Folder class="mr-0.5" size={14} />
-					{/if}
-					<span class="text-left text-2xs text-primary font-normal">{filter}</span>
-				</div>
-			</button>
+				{filter}
+			</Button>
 		</div>
 	{/each}
 {/if}

package/package/components/home/NoItemFound.svelte

@@ -1,6 +1,20 @@
-<div class="flex justify-center items-center h-48">
-	<div class="text-tertiary text-center">
-		<div class="text-2xl font-bold">No items found</div>
-		<div class="text-sm">Try changing your search or filters</div>
+<script lang="ts">"use strict";
+let { hasFilters = false } = $props();
+</script>
+
+{#if hasFilters}
+	<div class="flex justify-center items-center h-48">
+		<div class="text-primary text-center">
+			<div class="text-lg font-semibold text-emphasis">No items found</div>
+			<div class="text-xs font-normal text-hint">Try changing your search or filters</div>
+		</div>
 	</div>
-</div>
+{:else}
+	<div class="flex justify-center items-center h-48">
+		<div class="text-primary text-center">
+			<div class="text-lg font-semibold text-emphasis">Welcome to Windmill</div>
+			<div class="text-xs font-normal text-hint">Get started by creating your first script, flow, or app</div>
+		</div>
+	</div>
+{/if}
+

package/package/components/home/NoItemFound.svelte.d.ts

@@ -1,26 +1,6 @@
-export default NoItemFound;
-type NoItemFound = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const NoItemFound: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    hasFilters?: boolean;
 }
+declare const NoItemFound: import("svelte").Component<Props, {}, "">;
+type NoItemFound = ReturnType<typeof NoItemFound>;
+export default NoItemFound;

package/package/components/home/TreeView.svelte

@@ -25,18 +25,16 @@ $effect(() => {
 				class={twMerge('flex flex-row items-center gap-4 text-sm font-semibold')}
 				style={depth > 0 ? `padding-left: ${depth * 16}px;` : ''}
 			>
-				<div
-					class=" rounded-md p-1 flex justify-center items-center border bg-gray-50 border-gray-200 dark:bg-transparent dark:border-gray-900"
-				>
+				<div class="flex justify-center items-center">
 					{#if depth === 0}
-						<Folder size={20} color="#aaa" />
+						<Folder size={16} class="text-secondary" />
 					{:else}
-						<FolderTree size={20} color="#aaa" />
+						<FolderTree size={16} class="text-secondary" />
 					{/if}
 				</div>
 
 				<div>
-					<span class="whitespace-nowrap"
+					<span class="whitespace-nowrap text-xs text-emphasis font-semibold"
 						>{#if depth === 0}f/{/if}{item.folderName}</span
 					>
 					<div class="text-2xs font-normal text-secondary whitespace-nowrap">
@@ -46,15 +44,15 @@ $effect(() => {
 			</div>
 			<button class="w-full flex flex-row-reverse">
 				{#if opened}
-					<ChevronUp size={20} />
+					<ChevronUp size={16} />
 				{:else}
-					<ChevronDown size={20} />
+					<ChevronDown size={16} />
 				{/if}
 			</button>
 		</div>
 		{#if opened || isSearching}
 			<div>
-				{#each item.items.slice(0, showMax) as subItem ((subItem['path'] ? subItem['type'] + '__' + subItem['path'] : undefined) ?? 'folder__' + subItem['folderName'])}
+				{#each item.items.slice(0, showMax) as subItem, index ((subItem['path'] ? subItem['type'] + '__' + subItem['path'] + '__' + index : undefined) ?? 'folder__' + subItem['folderName'] + '__' + index)}
 					<TreeView
 						{isSearching}
 						{collapseAll}
@@ -72,7 +70,7 @@ $effect(() => {
 					<!-- svelte-ignore a11y_click_events_have_key_events -->
 					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
-						class="text-center text-sm text-secondary cursor-pointer hover:text-primary"
+						class="text-center text-xs py-2 text-secondary cursor-pointer hover:text-primary"
 						onclick={() => {
 							if (isFolder(item)) {
 								showMax += Math.min(30, item.items.length - showMax)
@@ -98,14 +96,14 @@ $effect(() => {
 				class={twMerge('flex flex-row items-center gap-4 text-sm font-semibold')}
 				style={depth > 0 ? `padding-left: ${depth * 16}px;` : ''}
 			>
-				<div
-					class=" rounded-md p-1 flex justify-center items-center border bg-gray-50 border-gray-200 dark:bg-transparent dark:border-gray-900"
-				>
-					<User size={20} color="#aaa" />
+				<div class="flex justify-center items-center">
+					<User size={16} class="text-secondary" />
 				</div>
 
 				<div>
-					<span class="whitespace-nowrap">u/{item.username}</span>
+					<span class="whitespace-nowrap text-xs text-emphasis font-semibold"
+						>u/{item.username}</span
+					>
 					<div class="text-2xs font-normal text-secondary whitespace-nowrap"
 						>({pluralize(item.items.length, ' item')})</div
 					>
@@ -113,15 +111,15 @@ $effect(() => {
 			</div>
 			<div class="w-full flex flex-row-reverse">
 				{#if opened}
-					<ChevronUp size={20} />
+					<ChevronUp size={16} />
 				{:else}
-					<ChevronDown size={20} />
+					<ChevronDown size={16} />
 				{/if}
 			</div>
 		</div>
 		{#if opened || isSearching}
 			<div>
-				{#each item.items.slice(0, showMax) as subItem ((subItem['path'] ? subItem['type'] + '__' + subItem['path'] : undefined) ?? 'folder__' + subItem['folderName'])}
+				{#each item.items.slice(0, showMax) as subItem, index ((subItem['path'] ? subItem['type'] + '__' + subItem['path'] + '__' + index : undefined) ?? 'folder__' + subItem['folderName'] + '__' + index)}
 					<TreeView
 						{collapseAll}
 						item={subItem}
@@ -138,7 +136,7 @@ $effect(() => {
 					<!-- svelte-ignore a11y_click_events_have_key_events -->
 					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
-						class="text-center text-sm text-secondary cursor-pointer py-2 hover:text-primary"
+						class="text-center text-xs text-secondary cursor-pointer py-2 hover:text-primary"
 						onclick={() => {
 							if (isUser(item)) {
 								showMax += Math.min(30, item.items.length - showMax)

package/package/components/home/TreeViewRoot.svelte

@@ -16,10 +16,10 @@ $effect(() => {
 	</div>
 {:else if groupedItems.length === 0}
 	<div class="flex flex-row items-center justify-center">
-		<div class="text-gray-500 dark:text-gray-400">No items</div>
+		<div class="text-xs font-normal text-hint">No items</div>
 	</div>
 {:else}
-	<div class="border rounded-md">
+	<div class="border rounded-md bg-surface-tertiary">
 		{#each groupedItems.slice(0, nbDisplayed) as item (item['folderName'] ?? 'user__' + item['username'])}
 			{#if item}
 				<TreeView
@@ -37,9 +37,9 @@ $effect(() => {
 		{/each}
 	</div>
 	{#if groupedItems.length > 15 && nbDisplayed < groupedItems.length}
-		<span class="text-xs"
+		<span class="text-xs font-normal text-secondary"
 			>{nbDisplayed} root nodes out of {groupedItems.length}
-			<button class="ml-4" onclick={() => (nbDisplayed += 30)}>load 30 more</button></span
+			<button class="ml-4 text-xs font-normal text-primary hover:text-emphasis" onclick={() => (nbDisplayed += 30)}>load 30 more</button></span
 		>
 	{/if}
 {/if}

package/package/components/home/TutorialBanner.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">import { Button } from '../common';
+import { GraduationCap, X } from 'lucide-svelte';
+import { base } from '../../base';
+import { goto } from '$app/navigation';
+import { sendUserToast } from '../../toast';
+import { getLocalSetting, storeLocalSetting } from '../../utils';
+import { skipAllTodos, syncTutorialsTodos, TUTORIAL_BANNER_DISMISSED_KEY } from '../../tutorialUtils';
+import { tutorialsToDo, userStore } from '../../stores';
+import { TUTORIALS_CONFIG } from '../../tutorials/config';
+import { hasRoleAccess } from '../../tutorials/roleUtils';
+import { onMount } from 'svelte';
+let isDismissed = $state(true);
+/**
+ * Get all tutorial indexes that are accessible to the current user based on their role.
+ * Automatically recomputes when $userStore changes.
+ */
+const accessibleTutorialIndexes = $derived.by(() => {
+    const indexes = new Set();
+    const user = $userStore;
+    for (const tab of Object.values(TUTORIALS_CONFIG)) {
+        // Check if user has access to this tab category
+        if (!hasRoleAccess(user, tab.roles)) {
+            continue;
+        }
+        for (const tutorial of tab.tutorials) {
+            // Check if tutorial has an index and user has access to it
+            if (tutorial.index !== undefined && hasRoleAccess(user, tutorial.roles)) {
+                indexes.add(tutorial.index);
+            }
+        }
+    }
+    return indexes;
+});
+onMount(async () => {
+    try {
+        // Sync tutorial progress from backend first
+        await syncTutorialsTodos();
+        // Check if banner has been manually dismissed
+        const manuallyDismissed = getLocalSetting(TUTORIAL_BANNER_DISMISSED_KEY) === 'true';
+        // Safe to check tutorialsToDo here since we awaited syncTutorialsTodos() above
+        // Filter tutorialsToDo to only include tutorials accessible to the user
+        const remainingAccessibleTutorials = $tutorialsToDo.filter((index) => accessibleTutorialIndexes.has(index));
+        // Check if all accessible tutorials are completed
+        const allTutorialsCompleted = remainingAccessibleTutorials.length === 0;
+        // Dismiss banner if manually dismissed OR all accessible tutorials completed
+        if (manuallyDismissed || allTutorialsCompleted) {
+            isDismissed = true;
+            // Set localStorage when all tutorials are completed to persist dismissal
+            // Note: This will re-set the key on every page load if localStorage is cleared
+            // but tutorials remain completed in backend. This is intentional - the banner
+            // should stay hidden if tutorials are completed, regardless of localStorage state.
+            if (allTutorialsCompleted) {
+                storeLocalSetting(TUTORIAL_BANNER_DISMISSED_KEY, 'true');
+            }
+        }
+    }
+    catch (error) {
+        console.error('Failed to sync tutorial progress:', error);
+        // Fallback to manual dismissal check only if API call fails
+        isDismissed = getLocalSetting(TUTORIAL_BANNER_DISMISSED_KEY) === 'true';
+    }
+});
+async function handleSkipAllTutorials() {
+    await skipAllTodos();
+    await syncTutorialsTodos();
+    storeLocalSetting(TUTORIAL_BANNER_DISMISSED_KEY, 'true');
+    isDismissed = true;
+}
+function dismissBanner() {
+    storeLocalSetting(TUTORIAL_BANNER_DISMISSED_KEY, 'true');
+    isDismissed = true;
+    const actions = [
+        {
+            label: 'Skip tutorials',
+            callback: handleSkipAllTutorials,
+            buttonType: 'default'
+        }
+    ];
+    sendUserToast('You can still access tutorials from the Tutorials page in the main menu or in the Help submenu.', false, actions, undefined, 8000);
+}
+function goToTutorials() {
+    goto(`${base}/tutorials`);
+}
+</script>
+
+{#if !isDismissed}
+	<div
+		class="flex items-center justify-between gap-4 px-4 py-3 rounded-lg border border-light bg-surface-tertiary mb-4"
+	>
+		<div class="flex items-center gap-3 flex-1 min-w-0">
+			<GraduationCap size={20} class="text-accent-primary flex-shrink-0" />
+			<div class="flex-1 min-w-0">
+				<div class="text-emphasis flex-wrap text-left text-xs font-semibold">
+					Learn with interactive tutorials
+				</div>
+				<div class="text-hint text-3xs truncate text-left font-normal">
+					Get started quickly with step-by-step guides on building flows, scripts, and more.
+				</div>
+			</div>
+		</div>
+		<div class="flex items-center gap-2 flex-shrink-0">
+			<Button
+				size="xs"
+				variant="accent"
+				onclick={goToTutorials}
+				startIcon={{ icon: GraduationCap }}
+			>
+				View tutorials
+			</Button>
+			<button
+				onclick={dismissBanner}
+				class="p-1.5 rounded hover:bg-surface-hover text-secondary hover:text-primary transition-colors"
+				aria-label="Dismiss tutorial banner"
+			>
+				<X size={16} />
+			</button>
+		</div>
+	</div>
+{/if}

package/package/components/home/TutorialBanner.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TutorialBanner: import("svelte").Component<Record<string, never>, {}, "">;
+type TutorialBanner = ReturnType<typeof TutorialBanner>;
+export default TutorialBanner;